/* H3 arena — shared design tokens.
 *
 * The system is taken from pollen-robotics.com/microduck, measured off the page rather than
 * described from memory. Its character, and the four things that actually carry it:
 *
 *   1. WARM neutral ground (#faf8f2), never cold grey and never pure white. White is reserved
 *      for cards, so a card reads as an object sitting ON the page.
 *   2. HARD EDGES. 3px near-black border, ZERO radius, and a solid offset colour slab instead
 *      of a blur shadow (`box-shadow: <colour> 6px 6px 0 0`). No soft shadows anywhere. This
 *      one treatment is most of the personality; pills and blurs are what made the old build
 *      read as a dashboard.
 *   3. Anton for display — a bold condensed uppercase face — used SPARINGLY and large, against
 *      small quiet DM Sans body copy. The contrast between those two is the typography.
 *   4. ONE accent (#ff7a2f) doing ONE job per screen, with black ink on it. Eyebrow labels are
 *      12.8px/600/0.14em uppercase in the accent. Everything else is neutral.
 *
 * Theming rule: the complete LIGHT palette is defined on bare :root. Dark redefines only the
 * tokens, twice — under prefers-color-scheme for the default "system" setting, and under
 * [data-theme="dark"] so an explicit toggle wins in both directions. No colour has its only
 * definition inside a media query, and body paints an explicit background.
 */

:root {
  --bg:        #faf8f2;   /* warm off-white — the page */
  --ground:    #f2ecdd;   /* second warm ground, for alternating blocks */
  --surface:   #ffffff;   /* cards only */
  --sunken:    #ece7da;
  --ink:       #08080c;
  --ink-2:     #33333c;
  --muted:     #76736a;
  --line:      rgba(16, 16, 24, .16);   /* hairline divider */
  --edge:      #08080c;                 /* the hard card border */
  --line-2:    rgba(16, 16, 24, .28);

  --accent:    #ff7a2f;   /* the one saturated colour; ink on it is near-black, not white */
  --accent-ink:#08080c;
  --accent-sw: #ffe9dc;
  --yellow:    #ffd23f;
  --blue:      #8fb8dc;
  --purple:    #9d87e8;
  --warn:      #8a5a06;
  --warn-bg:   #fff4d6;
  --warn-line: #febc2e;
  --bad:       #b3241c;
  --bad-bg:    #ffe9e7;
  --bad-line:  #ff5f57;
  --good:      #1b7a2c;
  --good-bg:   #e6f7e8;
  --good-line: #28c840;

  /* square, by design — a radius token that is not 0 is how this system stops looking like
     itself, so the scale is kept only for the two places that genuinely need a curve */
  --r-sm: 0px; --r-md: 0px; --r-lg: 0px; --r-pill: 999px;
  --edge-w: 3px;
  --off: 6px;                            /* the offset slab distance */

  --sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Anton", "Arial Narrow", "Helvetica Neue Condensed", Impact, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, "JetBrains Mono", Consolas, monospace;
  --shadow: var(--off) var(--off) 0 0 var(--yellow);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #101018;
    --ground:    #16161f;
    --surface:   #1b1b25;
    --sunken:    #23232e;
    --ink:       #f7f6f2;
    --ink-2:     rgba(247, 246, 242, .78);
    --muted:     rgba(247, 246, 242, .52);
    --line:      rgba(247, 246, 242, .16);
    --edge:      #f7f6f2;
    --line-2:    rgba(247, 246, 242, .3);

    --accent:    #ff7a2f;
    --accent-ink:#08080c;
    --accent-sw: #3a1c0c;
    --warn:      #febc2e;
    --warn-bg:   #2e2308;
    --warn-line: #6b520f;
    --bad:       #ff5f57;
    --bad-bg:    #2e1412;
    --bad-line:  #6b241f;
    --good:      #28c840;
    --good-bg:   #10240f;
    --good-line: #1f5c24;
  }
}

:root[data-theme="dark"] {
  --bg:        #101018;
  --ground:    #16161f;
  --surface:   #1b1b25;
  --sunken:    #23232e;
  --ink:       #f7f6f2;
  --ink-2:     rgba(247, 246, 242, .78);
  --muted:     rgba(247, 246, 242, .52);
  --line:      rgba(247, 246, 242, .16);
  --edge:      #f7f6f2;
  --line-2:    rgba(247, 246, 242, .3);

  --accent:    #ff7a2f;
  --accent-ink:#08080c;
  --accent-sw: #3a1c0c;
  --warn:      #febc2e;
  --warn-bg:   #2e2308;
  --warn-line: #6b520f;
  --bad:       #ff5f57;
  --bad-bg:    #2e1412;
  --bad-line:  #6b241f;
  --good:      #28c840;
  --good-bg:   #10240f;
  --good-line: #1f5c24;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);          /* explicit: the host paints its own ground behind us */
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); text-decoration: none; border-bottom: 1.5px solid var(--accent); }
a:hover { background: var(--accent); color: var(--accent-ink); border-bottom-color: var(--accent); }

.mono { font-family: var(--mono); font-variant-ligatures: none; }

/* ---- structural rhythm: full-width bands, alternating grounds --------------- */
.band { width: 100%; border-bottom: 1px solid var(--line); }
.band.alt { background: var(--ground); }
.inner { max-width: 1560px; margin: 0 auto; padding: 34px 40px; }
.inner.tight { padding: 22px 40px; }

/* the eyebrow is the reference's most repeated device: tiny, uppercase, wide-tracked, accent */
.eyebrow {
  font-family: var(--sans); font-size: 12.8px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 14px;
}
.display {
  font-family: var(--display); font-weight: 400; font-size: 40px; line-height: 1.04;
  letter-spacing: .004em; text-transform: uppercase; margin: 0;
}
.display.sm { font-size: 27px; }
/* long-form prose is NOT the display face — Anton is for labels and headlines only */
.display.prose { font-family: var(--sans); font-weight: 700; text-transform: none;
                 letter-spacing: -.02em; line-height: 1.24; font-size: 26px; }
.lede { color: var(--ink-2); font-size: 15px; max-width: 76ch; }
.small { font-size: 13px; color: var(--muted); }

/* ---- metadata pills -------------------------------------------------------- */
.pills { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  border: 1.5px solid var(--line-2); border-radius: 0;
  padding: 3px 9px; color: var(--muted); background: transparent;
  white-space: nowrap;
}
.pill.accent { border-color: var(--accent); color: var(--accent-ink); background: var(--accent); }
.pill.warn { border-color: var(--warn-line); color: var(--warn); background: var(--warn-bg); }
.pill b { color: inherit; font-weight: 700; }

/* ---- numbered step badge (the reference's 01–04, in the accent, no circle) -- */
.numbadge {
  display: inline-flex; align-items: baseline;
  font-family: var(--display); font-size: 22px; color: var(--accent);
  letter-spacing: 0; flex: none;
}

/* ---- buttons: square, hard border, solid offset slab ----------------------- */
button {
  font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--ink);
  background: var(--surface); border: 2px solid var(--edge);
  border-radius: 0; padding: 9px 16px; cursor: pointer;
  transition: transform .08s, box-shadow .08s, background .12s, color .12s, opacity .12s;
}
button:hover:not(:disabled) { background: var(--accent); color: var(--accent-ink);
                              border-color: var(--edge); }
button:disabled { opacity: .34; cursor: not-allowed; }
button.solid { background: var(--ink); color: var(--bg); border-color: var(--ink); }
button.solid:hover:not(:disabled) { background: var(--accent); color: var(--accent-ink);
                                    border-color: var(--edge); }
button.accent { background: var(--accent); color: var(--accent-ink); border-color: var(--edge); }
button.on { background: var(--accent); color: var(--accent-ink); border-color: var(--edge); }
button.big { font-size: 16px; font-weight: 700; padding: 15px 26px; }
/* the slab: pressing it moves the button onto its own shadow */
button.slab { box-shadow: var(--off) var(--off) 0 0 var(--edge); }
button.slab:active:not(:disabled) { transform: translate(var(--off), var(--off));
                                    box-shadow: 0 0 0 0 var(--edge); }

kbd {
  font-family: var(--mono); font-size: 10px; border: 1.5px solid var(--line-2);
  border-radius: 0; padding: 0 4px; margin-left: 7px; color: var(--muted);
}
button.solid kbd, button.accent kbd, button.on kbd, .seg button.on kbd {
  color: inherit; border-color: currentColor; opacity: .8;
}

/* ---- callouts: square, hard left rule -------------------------------------- */
.callout { border-radius: 0; padding: 12px 16px; font-size: 13.5px;
           border: 1.5px solid var(--line); border-left-width: 5px; }
.callout.warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }
.callout.bad  { background: var(--bad-bg);  border-color: var(--bad-line);  color: var(--bad); }
.callout.good { background: var(--good-bg); border-color: var(--good-line); color: var(--good); }
.callout b { color: inherit; font-weight: 700; }

/* ---- site chrome ----------------------------------------------------------- */
/* THREE ZONES: the product name left, the two things the app DOES centred with equal weight,
   everything else right. Voting used to be the page and the leaderboard a link off to one side,
   which told a visitor the ranking was an afterthought — it is the point of the exercise, and a
   voter who can see where things stand is more likely to keep voting.
   Grid, not flex, because only a grid can centre the middle zone against unequal side zones
   without measuring anything. */
.topbar {
  position: sticky; top: 0; z-index: 40; background: var(--bg);
  border-bottom: var(--edge-w) solid var(--edge);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 14px; padding: 9px 22px;
}
.topbar .zone { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar .zone.right { justify-content: flex-end; }

/* The centre pair. QUIET on purpose: the accent's one job on the voting view is marking which
   clip is audible, so a loud segmented control here would compete with the only signal that has
   to dominate mid-vote. Hard border, zero radius, ink fill for the active one — the house
   treatment, at label size. */
/* AN ANCHOR IN THE TOP BAR IS CHROME, NOT PROSE. `a` carries a 1.5px accent underline
   everywhere else in this system, and on the vote page that grew the 47 px bar to 51 px — 4 px
   straight out of a 26 px no-scroll clearance budget. The bar's anchors (About, Admin) therefore
   take the label treatment and mark hover with colour instead. */
.topbar a.lbl { border-bottom: none; line-height: 1; }
.topbar a.lbl:hover { color: var(--ink); }

.nav { display: flex; gap: 0; flex: none; }
.nav a {
  font-family: var(--sans); font-size: 13.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; padding: 6px 18px; line-height: 1.2;
  border: 2px solid var(--edge); border-right-width: 0; background: var(--surface);
  color: var(--ink);
}
.nav a:last-child { border-right-width: 2px; }
.nav a:hover { background: var(--sunken); color: var(--ink); }
.nav a.on { background: var(--ink); color: var(--bg); }
.nav a.on:hover { background: var(--ink); color: var(--bg); }
.wordmark { font-family: var(--display); font-weight: 400; letter-spacing: .02em;
            font-size: 21px; margin: 0; text-transform: uppercase; line-height: 1;
            white-space: nowrap; }
/* NOT the accent. The product name is on every page and the accent has exactly one job on the
   voting view — marking which clip you are hearing — so a loud title would compete with the
   only signal that has to be unmissable. Muted second half instead: it still reads as a
   wordmark, and it stays out of the way. */
.wordmark span { color: var(--muted); }
.grow { flex: 1; }