@import url("/tokens.css");

/* HERON scanner.
 *
 * On the same tokens as the landing page and the docs, so the whole site is one system
 * rather than three that merely look similar. This file used to declare its own palette,
 * and the names had drifted: its `--mist` was the shared `--silver`, its `--foam` was the
 * shared `--mist`, and `--fog` had no equivalent at all. Those three are now the shared
 * roles, and `--shelf` is gone — it was declared and never used.
 */

/* Two app-only measurements. Neither is a colour or a shape, so neither belongs in the
   shared token file. */
:root {
  --bar-h: 64px;
  --rail-w: 300px;
}

* { box-sizing: border-box; }

/* `display:flex` on .panel would otherwise beat the hidden attribute's default
   `display:none`, and both views render at once. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--canvas);
  color: var(--silver);
  font-family: "DM Sans", "Helvetica Neue", system-ui, sans-serif;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

.num { font-family: "IBM Plex Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.r { text-align: right; }
.eyebrow {
  font-size: 10px; font-weight: var(--w-medium); letter-spacing: .14em;
  text-transform: uppercase; color: var(--mint);
}

/* ── top bar ─────────────────────────────────────────────────── */
.bar {
  height: var(--bar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; background: var(--canvas); z-index: 20;
}
.bar-left, .bar-right { display: flex; align-items: center; gap: 24px; min-width: 0; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { display: block; }
.brand:hover { opacity: .82; }

.tabs { display: flex; gap: 4px; }
.tab {
  font: inherit; font-size: 13px; font-weight: var(--w-medium);
  color: var(--steel); background: none; border: 0; cursor: pointer;
  padding: 7px 14px; border-radius: var(--r-small);
}
.tab:hover { color: var(--mist); }
.tab.is-on { background: var(--mint); color: var(--canvas); }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--rule); border-radius: var(--r-small);
  padding: 6px 12px; font-size: 12px; color: var(--steel);
}
/* 50% is a circle, not a radius step — the two-value scale does not apply */
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--steel); }
.pill.ok .dot { background: var(--mint); }
.pill.err .dot { background: var(--coral); }

.ghost {
  font: inherit; font-size: 13px; color: var(--silver);
  background: none; border: 1px solid var(--rule); border-radius: var(--r-small);
  padding: 7px 14px; cursor: pointer;
}
.ghost:hover { border-color: var(--mint); color: var(--mist); }

/* ── layout ──────────────────────────────────────────────────── */
main { display: flex; min-height: calc(100vh - var(--bar-h)); }

.rail {
  width: var(--rail-w); flex: none;
  border-right: 1px solid var(--rule); background: var(--abyss);
  padding: 22px 22px 18px;
  display: flex; flex-direction: column; gap: 20px;
}
.rail-head { display: flex; flex-direction: column; gap: 8px; }
.big { display: flex; align-items: baseline; gap: 9px; }
.big .num { font-size: 42px; font-weight: var(--w-medium); color: var(--mist); line-height: 1; }
.big small { font-size: 12px; color: var(--steel); }

.funnel { list-style: none; margin: 0; padding: 0; }
.funnel li {
  display: grid; grid-template-columns: 1fr auto;
  gap: 10px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--rule-2);
  font-size: 12px; color: var(--steel);
}
.funnel li:last-child { border-bottom: 0; padding-top: 11px; }
.funnel li:last-child span:first-child { color: var(--mint); font-weight: var(--w-medium); }
.funnel li b { font-family: "IBM Plex Mono", monospace; font-weight: var(--w-medium); color: var(--silver); }
.funnel li:last-child b { color: var(--mint); font-size: 15px; font-weight: var(--w-medium); }

.note {
  margin: 0; padding: 13px 14px;
  background: var(--canvas); border: 1px solid var(--rule); border-radius: var(--r-small);
  font-size: 12px; line-height: 1.55; color: var(--steel);
}

.rail-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.ctl { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--steel); }
.ctl select {
  font: inherit; font-size: 12px; color: var(--silver);
  background: var(--canvas); border: 1px solid var(--rule);
  border-radius: var(--r-small); padding: 5px 8px;
}
.ctl-check { justify-content: flex-start; cursor: pointer; }
.ctl-check input { accent-color: var(--mint); }

/* ── panel ───────────────────────────────────────────────────── */
.panel { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.panel-head { padding: 20px 26px 14px; }
.panel-head h1 { margin: 0 0 3px; font-size: 21px; font-weight: var(--w-medium); color: var(--mist); letter-spacing: -.01em; }
.sub { margin: 0; font-size: 12px; color: var(--steel); }

.thead, .row {
  display: grid;
  grid-template-columns: minmax(150px,1fr) 104px 92px 88px 132px 92px 190px;
  gap: 16px; align-items: center;
  padding: 0 26px;
}
.thead {
  padding-bottom: 10px; border-bottom: 1px solid var(--rule);
  font-size: 11px; font-weight: var(--w-medium); letter-spacing: .06em; color: var(--steel);
}
.rows { display: flex; flex-direction: column; }
.row {
  padding: 12px 26px; border-bottom: 1px solid var(--rule-2);
  cursor: pointer; border-left: 2px solid transparent;
}
.row:hover { background: var(--shoal); }
/* Was `opacity: .46`, which applied to MOST rows (the gate rejects most of the
   leaderboard) and blended their text to 1.65:1 — unreadable. De-emphasis now comes from
   a milder fade plus explicit colours that still pass: --silver over --canvas measures
   6.3:1 at this opacity, where --steel measured 2.3:1. */
.row.is-cut { opacity: .72; }
.row.is-cut .pool-name small,
.row.is-cut .state { color: var(--silver); }
.row.is-pass { border-left-color: var(--mint); }

.pool-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pool-name b { font-size: 14px; font-weight: var(--w-medium); color: var(--mist); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 11px --steel is 3.15:1 on --canvas. The bin step and fee tier are read, not decor. */
.pool-name small { font-size: 11px; color: var(--silver); }
.row .num { font-size: 13px; color: var(--silver); }
.persist { font-size: 14px; font-weight: var(--w-medium); }

.state { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: var(--w-medium); letter-spacing: .04em; }
.state svg { flex: none; }

.spark { display: block; }

.empty { padding: 44px 26px; color: var(--steel); font-size: 14px; }
.panel-foot {
  margin-top: auto; padding: 13px 26px; border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; gap: 20px;
  font-size: 12px; color: var(--steel);
}

/* ── brief ───────────────────────────────────────────────────── */
.brief { overflow-y: auto; }
.brief-inner { max-width: 840px; margin: 0 auto; padding: 36px 26px 60px; }
.brief h1 { margin: 10px 0 12px; font-size: 38px; font-weight: var(--w-medium); color: var(--mist); letter-spacing: -.022em; line-height: 1.06; text-wrap: balance; }
.lede { margin: 0 0 26px; font-size: 15px; line-height: 1.6; color: var(--steel); max-width: 62ch; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r-card); overflow: hidden; margin-bottom: 30px; }
.stats > div { background: var(--canvas); padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; }
.stats .num { font-size: 25px; font-weight: var(--w-medium); color: var(--mist); line-height: 1; }
.stats small { font-size: 11px; color: var(--steel); letter-spacing: .06em; text-transform: uppercase; }
.sect { margin: 26px 0 12px; font-size: 10px; font-weight: var(--w-medium); letter-spacing: .14em; text-transform: uppercase; color: var(--steel); }
.card {
  background: var(--shoal); border-radius: var(--r-card); padding: 18px 20px;
  display: flex; gap: 18px; align-items: flex-start; margin-bottom: 10px;
}
.card p { margin: 6px 0 0; font-size: 13px; line-height: 1.6; color: var(--steel); }
.card b { font-size: 15px; color: var(--mist); }
.tag {
  font-size: 10px; font-weight: var(--w-medium); letter-spacing: .04em;
  border: 1px solid currentColor; border-radius: var(--r-small); padding: 2px 9px;
}

/* ── drawer ──────────────────────────────────────────────────── */
.scrim { position: fixed; inset: 0; background: rgba(7,24,41,.62); z-index: 30; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 92vw);
  background: var(--abyss); border-left: 1px solid var(--rule);
  z-index: 31; overflow-y: auto; padding: 22px 24px 40px;
}
.close {
  position: absolute; top: 14px; right: 16px;
  font: inherit; font-size: 24px; line-height: 1; color: var(--steel);
  background: none; border: 0; cursor: pointer; padding: 4px 8px;
}
.close:hover { color: var(--mist); }
.kv { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--rule-2); font-size: 12px; }
.kv span:first-child { color: var(--steel); }
.kv span:last-child { font-family: "IBM Plex Mono", monospace; color: var(--silver); }
.term { width: 100%; height: 190px; display: block; margin: 14px 0 8px; }
.term-labels { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 0; }
.term-labels div { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.term-labels b { font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: var(--w-medium); color: var(--silver); }
.term-labels small { font-size: 10px; color: var(--steel); }
.flag { display: flex; align-items: flex-start; gap: 9px; font-size: 12px; color: var(--silver); padding: 5px 0; }

button:focus-visible, select:focus-visible, .row:focus-visible {
  outline: 2px solid var(--mint); outline-offset: 2px; border-radius: var(--r-small);
}

/* The seven-column grid needs 996px (columns + 6x16px gaps + 52px padding), but the rail
   holds 300px until the 1080px breakpoint, so between roughly 1080px and 1320px the panel
   was narrower than its own table and the last columns were clipped with no scrollbar.
   Two defences: narrower columns through that band, and a scroll container so the table
   can never silently lose a column again. */
@media (max-width: 1320px) {
  .thead, .row { grid-template-columns: minmax(130px,1fr) 92px 84px 78px 104px 76px 128px; gap: 12px; padding: 0 18px; }
  .row { padding: 12px 18px; }
}
.panel { overflow-x: auto; }
.thead, .rows { min-width: 0; }

/* The bar is four controls plus a brand and three tabs in two non-wrapping flex rows;
   it was 433px wide on its own and pushed the whole page sideways on a phone. It now
   sheds what it can, in order of how much it is needed on a small screen. */
@media (max-width: 900px) {
  .bar { height: auto; min-height: var(--bar-h); flex-wrap: wrap; gap: 10px; padding: 10px 16px; }
  .bar-left, .bar-right { gap: 12px; flex-wrap: wrap; }
  .bar-right { margin-left: auto; }
  #status-text { display: none; }        /* the dot still carries the state */
  .pill { padding: 6px 8px; }
  .tab { padding: 7px 10px; font-size: 12px; }
}
@media (max-width: 560px) {
  #refresh { display: none; }            /* the 60s poll already refreshes */
  .brand img:last-child { display: none; }   /* the mark alone is enough */
}

@media (max-width: 1080px) {
  .rail { display: none; }
  .thead, .row { grid-template-columns: minmax(120px,1fr) 92px 82px 120px 84px; }
  .thead span:nth-child(4), .row > :nth-child(4),
  .thead span:nth-child(7), .row > :nth-child(7) { display: none; }
}

/* `a.ghost` has to match `button.ghost` exactly — the Scoreboard link sits in the same
   row as the two buttons and must not read as a different control. */
a.ghost { text-decoration: none; display: inline-flex; align-items: center; }