/* The subnet tool (subnet-tool.js): an address in a frame, its decimal
   octets over their bits, barriers between bits. Shared by the networking
   tools, which link it before their own stylesheet. Its colours are --st-*
   on :root, so a page's legend can use them too. */

:root {
  /* the regions, left to right: each bolder than the one before */
  --st-r0: #e4e7eb;   /* grey */
  --st-r1: #b3cdf5;   /* blue */
  --st-r2: #f6bf85;   /* orange */
  --st-r3: #ef8d5a;   /* deep orange, right of a third barrier */
  --st-bar: #22272e;
  --st-frame: #9aa5b1;
  --st-text: #22272e;
  --st-accent: #0077b8;
  --st-bg: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --st-r0: #2a3440;
    --st-r1: #234a8c;
    --st-r2: #8f5214;
    --st-r3: #b04a1e;
    --st-bar: #eaf1f6;
    --st-frame: #5d87a5;
    --st-text: #eaf1f6;
    --st-accent: #4fb3ff;
    --st-bg: #112b40;
  }
}

.st {
  container-type: inline-size;
  border: 2.5px solid var(--st-frame); border-radius: 10px; background: var(--st-bg);
  padding: 0.1rem 0.5rem 0.3rem; color: var(--st-text);
}
.st-octets {
  /* A bit and the gap after it, where a barrier stands. Four octets of
     8 bits and 8 gaps share a line. */
  --gw: 6px;
  --bw: clamp(13px, (100cqw - 230px) / 32, 24px);
  display: flex; justify-content: center; gap: 0.3rem;
}
.st-oct { display: flex; flex-direction: column; }
.st-row { display: flex; align-items: stretch; height: calc(var(--bw) * 1.2); margin-top: 0.1rem; }
.st-bit {
  width: var(--bw); border: 0; border-radius: 3px; padding: 0; margin: 0; color: var(--st-text);
  font: inherit; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: calc(var(--bw) * 0.66); font-weight: 700;
  display: grid; place-items: center;
}
button.st-bit { cursor: pointer; box-shadow: inset 0 0 0 1px var(--st-frame); }
button.st-bit:hover { box-shadow: inset 0 0 0 2px var(--st-accent); }
button.st-bit.st-locked { cursor: not-allowed; box-shadow: none; }   /* its flip makes an address the page refuses */
button.st-bit:focus-visible { outline: 2px solid var(--st-accent); outline-offset: 1px; }
.st-r0 { background: var(--st-r0); } .st-r1 { background: var(--st-r1); }
.st-r2 { background: var(--st-r2); } .st-r3 { background: var(--st-r3); }

/* selecting a tool: a click on it, and the line under it */
.st-selectable { cursor: pointer; }
.st-selectable:hover { border-color: var(--st-accent); }
.st-selectable:focus { outline: none; }
.st-selectable:focus-visible { outline: 2px solid var(--st-accent); outline-offset: 2px; }
.st-selected { border-color: var(--st-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--st-accent) 25%, transparent); }
.st-mask { margin-top: 0.25rem; }   /* the mask, under the address */
.st-mask-btn {
  background: none; border: 0; padding: 0; font: inherit; color: var(--st-accent); font-weight: 700;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.st-mask-btn[aria-pressed="true"] { text-decoration: none; }
.st-mask-btn:focus-visible { outline: 2px solid var(--st-accent); outline-offset: 1px; border-radius: 3px; }
.st-msg { margin-top: 0.3rem; padding-top: 0.2rem; border-top: 1px dashed var(--st-frame); text-align: center; font-size: 0.84rem; color: var(--st-text); }

/* the octet's decimal value, over its bits */
.st-dec {
  text-align: center; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.95rem; font-weight: 800;
  line-height: 1.3; margin-inline-start: var(--lead, 0);
}
.st-oct:not(:first-child) { --lead: calc(var(--gw) + 2px); }
.st-dec-in {
  /* three digits wide, centred over the octet's bits */
  width: 4ch; padding: 0; margin: 0; text-align: center; color: inherit; background: none;
  font: inherit; border: 1px dashed var(--st-frame); border-radius: 5px; cursor: text;
}
.st-dec-in:hover { border-color: var(--st-accent); }
.st-dec-in:focus-visible { outline: 2px solid var(--st-accent); outline-offset: 0; border-color: transparent; }
.st-dec-in.st-bad { border: 1px solid #d23b3b; color: #d23b3b; }

/* a gap between two bits; a barrier when one stands there */
.st-gap { position: relative; width: var(--gw); flex: none; }
.st-gap::before { content: ""; position: absolute; inset: 0 -3px; }  /* a wider target for the pointer */
.st-oct .st-gap:first-child { margin-right: 2px; }
.st-bar::after {
  content: ""; position: absolute; left: 50%; width: 3px; margin-left: -1.5px; top: -0.2rem; bottom: -0.2rem;
  border-radius: 2px; background: var(--st-bar);
}
.st-bar:focus { outline: none; }
.st-bar:focus-visible::after { box-shadow: 0 0 0 2px var(--st-accent); }
.st-movable .st-bar { cursor: ew-resize; touch-action: none; }
.st-add { cursor: copy; }
.st-add:hover::after {
  content: ""; position: absolute; left: 50%; width: 2px; margin-left: -1px; top: -0.2rem; bottom: -0.2rem;
  background: var(--st-bar); opacity: 0.35;
}

/* Too narrow for four octets on a line (a phone): two lines of two. */
@container (max-width: 660px) {
  .st-octets { --gw: 5px; --bw: clamp(12px, (100cqw - 90px) / 16, 22px); display: grid; grid-template-columns: repeat(2, max-content); gap: 0.1rem 0.3rem; }
}