/* Light is the default. The dark values are declared twice on purpose: the
   media query follows the operating system, the [data-theme] block is the
   manual toggle, and the toggle has to win in both directions. :where() keeps
   the media block at zero specificity so [data-theme="dark"] beats it, and the
   :not() means an explicit "light" choice survives an OS set to dark. */
:root {
  color-scheme: light;
  --paper: #e6e9ec;
  --surface: #ffffff;
  --ink: #171a20;
  --muted: #6b717a;
  --rule: #d2d7dd;
  --signal: #1b5e4b;
  --signal-bg: #e2eee9;
  --down: #94382c;
  --gate-ink: #ffffff;
  --shadow: rgba(15, 20, 24, 0.18);

  /* One per watched channel, assigned by the channel's position in the legend
     and never by rank, so filtering the table cannot repaint them.

     Light red / green / blue / magenta, validated together against this
     surface: all six pairs clear the colour-blind separation floor (worst 8.8)
     and the normal-vision floor (worst 19.2), and each clears 3:1 on white.
     Magenta is the fourth because it is the only family that also survives on
     the dark surface — orange and yellow collapse into the red there. Channel
     five onwards falls back to the plain fill below and is told apart by its
     fixed position, which is how every channel worked before there were any
     colours at all. */
  --ch-1: #ff5252;
  --ch-2: #31a577;
  --ch-3: #3792e6;
  --ch-4: #fa38d3;

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --paper: #14171b;
    --surface: #1b1f25;
    --ink: #e4e7ea;
    --muted: #8b929c;
    --rule: #2c323a;
    --signal: #6fc9a8;
    --signal-bg: #1c3630;
    --down: #d98577;
    --gate-ink: #0f1418;
    --shadow: rgba(0, 0, 0, 0.5);
    /* The same four hues re-stepped for the dark surface, not flipped. */
    --ch-1: #ff3d3d;
    --ch-2: #3fab7c;
    --ch-3: #198de6;
    --ch-4: #f42acb;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #14171b;
  --surface: #1b1f25;
  --ink: #e4e7ea;
  --muted: #8b929c;
  --rule: #2c323a;
  --signal: #6fc9a8;
  --signal-bg: #1c3630;
  --down: #d98577;
  --gate-ink: #0f1418;
  --shadow: rgba(0, 0, 0, 0.5);
  --ch-1: #ff3d3d;
  --ch-2: #3fab7c;
  --ch-3: #198de6;
  --ch-4: #f42acb;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 14px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}
header {
  position: sticky; top: 0; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 20px;
  padding: 14px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}
h1 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.status { color: var(--muted); font-size: 13px; }
.legend { display: flex; gap: 14px; margin-left: auto; font-size: 12px; color: var(--muted); }
/* Each legend entry is the mute switch for that channel. Muted dims the whole
   entry and strikes the note, so the state reads at a glance from across the
   room rather than needing a hover. */
.legend .chan {
  display: flex; align-items: center; gap: 6px;
  font: inherit; font-size: 12px; color: var(--muted);
  background: none; border: 1px solid transparent; border-radius: 3px;
  padding: 2px 5px; cursor: pointer;
}
.legend .chan:hover { color: var(--ink); border-color: var(--rule); }
.legend .chan .bell { font-size: 11px; opacity: 0.75; }
.legend .chan.muted { opacity: 0.5; }
.legend .chan.muted .bell { text-decoration: line-through; }
.pip {
  width: 9px; height: 9px; border: 1px solid var(--muted);
  display: inline-block; flex: none;
}
/* Colour marks identity; the pip's fixed position in the row carries it too,
   which is what keeps the red/green pair readable without colour vision. */
.pip.ch1.on { background: var(--ch-1); border-color: var(--ch-1); }
.pip.ch2.on { background: var(--ch-2); border-color: var(--ch-2); }
.pip.ch3.on { background: var(--ch-3); border-color: var(--ch-3); }
.pip.ch4.on { background: var(--ch-4); border-color: var(--ch-4); }
.pip.on { background: var(--signal); border-color: var(--signal); }

.controls {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  padding: 10px 20px; border-bottom: 1px solid var(--rule);
  background: var(--surface);
}
input[type="search"], select {
  font: inherit; font-size: 13px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: 3px; padding: 5px 8px;
}
input[type="search"] { min-width: 220px; }
label.toggle { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
label.vol { cursor: default; color: var(--muted); }
label.vol input[type="range"] { width: 92px; accent-color: var(--signal); cursor: pointer; }
.volpct { font-family: var(--mono); font-size: 12px; min-width: 34px; text-align: right; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; }

table { width: 100%; border-collapse: collapse; background: var(--surface); }
th, td { padding: 9px 14px; text-align: right; white-space: nowrap; }
th:first-child, td:first-child, th.left, td.left { text-align: left; }
thead th {
  position: sticky; top: 57px;
  font-size: 12px; font-weight: 500; color: var(--muted);
  background: var(--surface); border-bottom: 1px solid var(--rule);
  cursor: pointer; user-select: none;
}
thead th[aria-sort="descending"]::after { content: " \2193"; }
thead th[aria-sort="ascending"]::after { content: " \2191"; }
tbody tr { border-bottom: 1px solid var(--rule); }
tbody tr.multi { background: var(--signal-bg); }
tbody tr:hover { background: var(--paper); }
tbody tr.multi:hover { background: var(--signal-bg); filter: brightness(0.97); }
/* The width guard, independent of whatever the JS trims to: a symbol can never
   widen the column past this no matter what a contract claims to be called. */
.sym {
  font-weight: 600;
  display: inline-block; max-width: 18ch;
  overflow: hidden; text-overflow: ellipsis; vertical-align: bottom;
}
.addr { font-family: var(--mono); font-size: 12px; color: var(--muted); cursor: help; }
.num { font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; }
.neg { color: var(--down); }
.pos { color: var(--signal); }
.pips { display: inline-flex; gap: 3px; }
.count { font-family: var(--mono); font-size: 13px; }
a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule); }
a:hover { border-bottom-color: var(--ink); }
.empty { padding: 60px 20px; text-align: center; color: var(--muted); }
.unresolved { color: var(--muted); font-style: italic; }
@media (max-width: 760px) {
  .col-vol, .col-mentions, .col-dex { display: none; }
  th, td { padding: 8px 10px; }
}

/* Hover description. Positioned from JS, so it is fixed and never captures
   the pointer — otherwise it would sit under the cursor and flicker. */
#tip {
  position: fixed; top: 0; left: 0; z-index: 20;
  max-width: 340px; padding: 9px 11px;
  font-size: 12px; line-height: 1.5; white-space: normal;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--rule); border-radius: 4px;
  box-shadow: 0 4px 16px var(--shadow);
  pointer-events: none;
}
#tip[hidden] { display: none; }
#tip .tip-head { font-weight: 600; }
#tip .tip-note { color: var(--muted); }
#tip .tip-addr { font-family: var(--mono); word-break: break-all; }
#tip p { margin: 6px 0 0; }
#tip p:first-child { margin-top: 0; }

.themetoggle {
  font: inherit; font-size: 14px; line-height: 1; color: var(--muted);
  background: none; border: 1px solid var(--rule); border-radius: 3px;
  padding: 5px 9px; cursor: pointer;
}
.themetoggle:hover { color: var(--ink); border-color: var(--muted); }

.signout button {
  font: inherit; font-size: 13px; color: var(--muted);
  background: none; border: 1px solid var(--rule); border-radius: 3px;
  padding: 4px 10px; cursor: pointer;
}
.signout button:hover { color: var(--ink); border-color: var(--muted); }

/* login */
.gate {
  max-width: 340px; margin: 12vh auto; padding: 26px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 4px;
}
.gate h1 { margin: 0 0 4px; }
.gate p.hint { margin: 0 0 22px; color: var(--muted); font-size: 13px; }
.gate label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.gate .field { margin-bottom: 16px; }
.gate input[type="text"], .gate input[type="password"] {
  width: 100%; font: inherit; font-size: 14px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: 3px; padding: 8px 10px;
}
.gate input[inputmode="numeric"] { font-family: var(--mono); letter-spacing: 0.25em; }
.gate button {
  width: 100%; font: inherit; font-size: 14px; font-weight: 500;
  color: var(--gate-ink); background: var(--signal);
  border: 0; border-radius: 3px; padding: 10px; cursor: pointer;
}
.gate button:hover { filter: brightness(1.1); }
.gate .error {
  margin: 0 0 16px; padding: 9px 11px; font-size: 13px;
  color: var(--down); background: var(--paper);
  border-left: 3px solid var(--down); border-radius: 0;
}