/* GitLab Mono, from the @gitlab/fonts package, under the SIL Open Font Licence
   1.1 (fonts/OFL.txt). It is JetBrains Mono with the ligatures turned off,
   which is what a wall of addresses wants: no pair of characters joining up
   into a shape that is not in the address. One file covers every weight. */
@font-face {
  font-family: "GitLab Mono";
  src: url("/fonts/GitLabMono.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #f4f5f7;          /* page and canvas background */
  --panel: #ffffffdd;     /* the bars over it */
  --edge: #d3d8de;
  --text: #4a5560;
  --dim: #a9b5c0;         /* quiet text on the bars */
  --live: #0d6f8c;        /* the accent the bars pick things out in */
  --addr: #3a638f;        /* the addresses on the canvas, which past the first
                             few are all of them: a definite blue */
  --addr-v4: #6b6b6b;     /* and a plain grey for that first few, the 2^32 that
                             are IPv4's whole share of the space: greyed out, in
                             the ordinary sense of it, and left behind within
                             the first minute of scrolling. The two carry about
                             the same weight and differ in colour, so the change
                             is a change of colour and not of legibility */
  --warn: #b0392c;
  --dark: 0;              /* read by the canvas, which draws itself */
  --mono: "GitLab Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "DejaVu Sans Mono", monospace;
  color-scheme: light dark;
}

/* Dark, either because the system asked for it and nothing has overruled that,
   or because the button did. Light needs no block of its own: it is the base. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #1c1f24; --panel: #1c1f24dd; --edge: #343a42; --text: #c3ced8; --addr: #a6c8ee; --addr-v4: #b3b3b3; --dim: #4c5763; --live: #7fe3ff; --warn: #ff9c88; --dark: 1; }
}

:root[data-theme="dark"] {
  --bg: #1c1f24; --panel: #1c1f24dd; --edge: #343a42; --text: #c3ced8; --addr: #a6c8ee; --addr-v4: #b3b3b3; --dim: #4c5763; --live: #7fe3ff; --warn: #ff9c88; --dark: 1;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;               /* there is no scrollbar; there is only the wheel */
  background: var(--bg);
  color: var(--text);
  font: 13px/1.5 var(--mono);
  user-select: none;
  overscroll-behavior: none;
  touch-action: none;             /* the finger drags the addresses, not the page */
}

#grid {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}

header, footer {
  position: fixed;
  left: 0;
  right: 0;
  padding: 10px 14px;
  background: var(--panel);
  backdrop-filter: blur(6px);
}

header {
  top: 0;
  border-bottom: 1px solid var(--edge);
  display: flex;
  flex-wrap: wrap;                /* a narrow screen keeps its buttons: the page
                                     has no scrollbar to go and find them with */
  align-items: center;
  gap: 6px 14px;
}

header h1 {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--live);
}

header p { margin: 0; flex: 1; color: var(--dim); }

footer {
  bottom: 0;
  border-top: 1px solid var(--edge);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
}

#track {
  flex-basis: 100%;
  height: 2px;
  background: var(--edge);
}

#bar {
  width: 2px;
  height: 100%;
  background: var(--live);
}

dl {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0;
  flex: 1;
  min-width: 0;
}

dt {
  color: var(--dim);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

dd {
  margin: 0;
  color: var(--live);
  overflow-wrap: anywhere;
}

small { display: block; color: var(--dim); }

#keep {
  margin: 0;
  flex: 0 0 auto;
  text-align: center;
}

/* Wide enough for the words the button says after a click, so that saying them
   does not move it out from under the pointer. */
#copy {
  display: inline-block;
  min-width: 18ch;
  padding: 7px 14px;
  font: inherit;
  color: var(--bg);
  background: var(--live);
  border: 0;
  cursor: pointer;
}

/* The header's remark slot: a landmark going by, or the reason a link was
   refused, which is the only thing in here worth alarm. */
#note { color: var(--live); }
#note.warn { color: var(--warn); }

#theme, #notation, #smaller, #bigger {
  padding: 5px 10px;
  font: inherit;
  color: var(--text);
  background: none;
  border: 1px solid var(--edge);
  cursor: pointer;
}

/* Wide enough for either word, so that switching does not shuffle the header. */
#theme, #notation { min-width: 12ch; }

/* The size pair sits together, and is narrow: it is one character each. */
#smaller, #bigger { padding: 5px 9px; }
#smaller { margin-right: -10px; }

#theme:hover, #notation:hover, #smaller:hover, #bigger:hover {
  border-color: var(--live);
  color: var(--live);
}