/* ANTLER — Phase 4 interface, built on the Nocturne tokens.
   Every colour, radius and spacing value comes from a variable; nothing is a
   raw hex except the shadow ambients, which are shade rather than colour. */

:root {
  --color-bg: #161826;
  --color-surface: #232532;
  --color-text: #e9e9ed;
  --color-accent: #9184d9;
  --color-accent-300: #d2cefd;
  --color-accent-400: #b5abfc;
  --color-accent-900: #2b2741;
  /* The only colour outside the mono palette. Realised loss ONLY — never a
     warning, never risk. No green anywhere: green is what a tout uses. */
  --color-loss: oklch(0.66 0.125 34);

  --space-1: 2.8px;  --space-2: 5.6px;  --space-3: 8.4px;
  --space-4: 11.2px; --space-6: 16.8px; --space-8: 22.4px;
  --radius-sm: 4px;  --radius-md: 8px;  --radius-lg: 14px;

  --font-body: Inter, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  /* Depth comes from a gradient, not flat panels. */
  background: radial-gradient(90% 40% at 80% 4%, #2a2547 0%, #171929 55%), #151726;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

/* Numbers are mono, sentences are Inter. No exceptions — a price is visually
   a different class of thing from a sentence. Tabular figures mean a live
   price never reflows as it ticks. */
.num, .kicker, .mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.screen {
  max-width: 460px; margin: 0 auto; min-height: 100vh;
  display: flex; flex-direction: column;
  padding: max(12px, env(safe-area-inset-top)) 0 0;
}
.content {
  flex: 1; padding: 0 14px 96px;
  display: flex; flex-direction: column; gap: 10px;
}

/* ── header ─────────────────────────────────────────────────────── */
.topbar {
  padding: 8px 18px 12px;
  display: flex; align-items: center; justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 9px; }
.mark { display: flex; align-items: stretch; gap: 2.5px; height: 15px; }
.mark i { width: 6px; border: 1.6px solid var(--color-accent-400); }
.mark i:first-child { border-right: 0; border-radius: 1px 0 0 1px; }
.mark i:last-child  { border-left: 0;  border-radius: 0 1px 1px 0; }
.wordmark {
  font-family: var(--font-mono); font-weight: 500; font-size: 12.5px;
  letter-spacing: .18em;
}

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: 99px;
  background: color-mix(in srgb, var(--color-surface) 55%, transparent);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-text) 9%, transparent);
  font-family: var(--font-mono); font-weight: 500; font-size: 9.5px;
  letter-spacing: .06em;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.dot {
  width: 5px; height: 5px; border-radius: 99px;
  background: var(--color-accent); animation: pulse 1.8s ease-in-out infinite;
}
.dot.stale { background: var(--color-loss); animation: none; }
@keyframes pulse { 0%,100% { opacity: .35 } 50% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .dot { animation: none; opacity: .9 } }

/* ── filter chips ───────────────────────────────────────────────── */
.chips { display: flex; gap: 6px; padding: 0 4px 2px; overflow-x: auto;
         scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; padding: 5px 11px; border-radius: 99px; font-size: 11px;
  text-decoration: none; white-space: nowrap;
  background: color-mix(in srgb, var(--color-text) 5%, transparent);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.chip[aria-current="true"] {
  background: color-mix(in srgb, var(--color-accent) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 40%, transparent);
  color: var(--color-accent-300); font-weight: 500;
}
.chip:hover { background: color-mix(in srgb, var(--color-text) 9%, transparent); }

/* ── cards: three glass levels over the gradient ground ─────────── */
.card {
  display: block; text-decoration: none; color: inherit;
  padding: 13px 14px 12px; border-radius: var(--radius-lg);
  background: rgba(30,32,48,.5);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-text) 8%, transparent);
}
/* Level 1 — the one that matters. The accent-tinted hairline is what marks it. */
.card.primary {
  background: linear-gradient(158deg,
    color-mix(in srgb, var(--color-accent-900) 72%, transparent), rgba(30,32,48,.62));
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-text) 9%, transparent),
              inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 28%, transparent),
              0 8px 22px rgba(0,0,0,.4);
}
.card.dim { background: rgba(30,32,48,.4); opacity: .72; }
.card:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 30%, transparent); }
.card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.kicker {
  font-size: 9.5px; font-weight: 500; letter-spacing: .1em;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
  margin-bottom: 5px;
}
.card.primary .kicker { color: var(--color-accent-400); }
.sel { font-size: 15px; font-weight: 500; line-height: 1.3; }
.sub { font-size: 11.5px; color: color-mix(in srgb, var(--color-text) 50%, transparent); }
.when {
  font-family: var(--font-mono); font-size: 10px;
  color: color-mix(in srgb, var(--color-text) 45%, transparent); margin-top: 3px;
}

.edge { text-align: right; flex: none; }
.edge-fig {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-weight: 500; font-size: 27px; line-height: 1;
}
.card.primary .edge-fig { color: var(--color-accent-300); }
.edge-fig small { font-size: 15px; opacity: .6; }
.edge-meta {
  font-family: var(--font-mono); font-size: 9.5px; margin-top: 4px;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
}

.card-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding-top: 10px; margin-top: 11px;
  border-top: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
  font-family: var(--font-mono); font-size: 10.5px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.card-foot strong { color: var(--color-text); font-weight: 500; }

/* Venue list — where the same bet is available. */
.venues { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
.venue {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--font-mono); font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.venue:first-child { color: var(--color-accent-300); }
.venue .vname { flex: 1; }
.venue .vage { font-size: 9.5px; color: color-mix(in srgb, var(--color-text) 38%, transparent); }
.family {
  font-size: 9px; letter-spacing: .04em; padding: 1px 5px; border-radius: 4px;
  background: color-mix(in srgb, var(--color-text) 7%, transparent);
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
}

/* Arb legs. */
.legs { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.leg { display: flex; align-items: baseline; gap: 8px; font-size: 11.5px; }
.leg .lname { flex: 1; font-family: var(--font-mono);
              color: color-mix(in srgb, var(--color-text) 72%, transparent); }
.leg .lprice { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.leg .lshare { font-family: var(--font-mono); font-size: 10px;
               color: color-mix(in srgb, var(--color-text) 45%, transparent); }

.warn {
  margin-top: 10px; padding: 8px 10px; border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-loss) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-loss) 30%, transparent);
  font-size: 10.5px; line-height: 1.5;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}

/* ── section labels and the tail line ───────────────────────────── */
.section {
  font-family: var(--font-mono); font-weight: 500; font-size: 9px;
  letter-spacing: .12em; padding: 8px 2px 2px;
  color: color-mix(in srgb, var(--color-text) 32%, transparent);
}
.tail {
  text-align: center; font-size: 10.5px; padding: 6px 0 2px;
  color: color-mix(in srgb, var(--color-text) 35%, transparent);
}

/* ── empty state ────────────────────────────────────────────────── */
.empty {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 0 30px; gap: 0;
}
.empty .bigmark { display: flex; align-items: stretch; gap: 16px; height: 74px;
                  margin-bottom: 34px; }
.empty .bigmark i {
  width: 26px; border: 2.5px solid color-mix(in srgb, var(--color-accent-400) 55%, transparent);
}
.empty .bigmark i:first-child { border-right: 0; border-radius: 2px 0 0 2px; }
.empty .bigmark i:last-child  { border-left: 0;  border-radius: 0 2px 2px 0; }
.empty h1 { font-size: 25px; font-weight: 500; line-height: 1.25;
            letter-spacing: -.02em; margin: 0 0 12px; }
.empty p { font-size: 13px; line-height: 1.6; margin: 0; max-width: 280px;
           color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.proof {
  margin-top: 38px; width: 100%; padding: 16px 20px; border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-surface) 50%, transparent);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-text) 7%, transparent),
              inset 0 0 0 1px color-mix(in srgb, var(--color-text) 8%, transparent);
  display: flex; justify-content: space-between; gap: 10px;
}
.proof div { text-align: left; }
.proof .pv { font-family: var(--font-mono); font-weight: 500; font-size: 19px; line-height: 1; }
.proof .pl { font-family: var(--font-mono); font-size: 9px; margin-top: 5px;
             color: color-mix(in srgb, var(--color-text) 40%, transparent); }

/* ── tab bar ────────────────────────────────────────────────────── */
.tabs {
  position: fixed; bottom: 0; left: 0; right: 0;
  max-width: 460px; margin: 0 auto;
  padding: 10px 22px calc(14px + env(safe-area-inset-bottom));
  display: flex; justify-content: space-between;
  background: linear-gradient(to top, rgba(21,23,38,.95), rgba(21,23,38,0));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-text) 7%, transparent);
  backdrop-filter: blur(10px);
}
.tab { display: flex; flex-direction: column; align-items: center; gap: 4px;
       text-decoration: none; }
.tab svg { stroke: color-mix(in srgb, var(--color-text) 30%, transparent); }
.tab span { font-family: var(--font-mono); font-size: 9px; font-weight: 400;
            color: color-mix(in srgb, var(--color-text) 40%, transparent); }
.tab[aria-current="page"] svg { stroke: var(--color-accent-400); }
.tab[aria-current="page"] span { color: var(--color-accent-400); font-weight: 500; }
.tab:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px;
                     border-radius: var(--radius-sm); }

/* ── sparkline ──────────────────────────────────────────────────── */
.spark { margin: 11px 0 0; height: 34px; display: block; width: 100%; }

/* ── screen 02: price detail ────────────────────────────────────── */
.backrow { gap: 12px; justify-content: flex-start; }
.back { font-family: var(--font-mono); font-size: 15px; text-decoration: none;
        color: color-mix(in srgb, var(--color-text) 60%, transparent); padding: 0 4px; }
.back:hover { color: var(--color-accent-300); }

.chart { width: 100%; height: 150px; display: block; margin: 12px 0 0; }
.chart .grid { stroke: color-mix(in srgb, var(--color-text) 6%, transparent); stroke-width: 1; }
.chart .soft { stroke: var(--color-accent); stroke-width: 1.9;
               stroke-linejoin: round; stroke-linecap: round; }
.chart .ref  { stroke: color-mix(in srgb, var(--color-text) 34%, transparent);
               stroke-width: 1.2; stroke-dasharray: 4 4; }

.legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.lg { display: inline-flex; align-items: center; gap: 6px;
      font-family: var(--font-mono); font-size: 9.5px;
      color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.lg i { width: 14px; height: 2px; background: var(--color-accent); }
.lg i.ref { height: 0; background: none;
            border-top: 1.5px dashed color-mix(in srgb, var(--color-text) 50%, transparent); }

.figs { display: flex; gap: 18px; margin: 10px 0 12px; }
.fig { font-family: var(--font-mono); font-variant-numeric: tabular-nums;
       font-weight: 500; font-size: 20px; line-height: 1; }
.fig.accent { color: var(--color-accent-300); }
.figl { font-family: var(--font-mono); font-size: 9px; margin-top: 4px;
        color: color-mix(in srgb, var(--color-text) 40%, transparent); }

.method { font-size: 11.5px; line-height: 1.6; margin: 0 0 8px;
          color: color-mix(in srgb, var(--color-text) 62%, transparent); }
.method strong { color: var(--color-text); font-weight: 500; }
.method.muted { color: color-mix(in srgb, var(--color-text) 42%, transparent);
                margin-bottom: 0; }
.venue.refrow { color: color-mix(in srgb, var(--color-text) 85%, transparent); }
.venue.refrow:first-child { color: var(--color-accent-300); }

.axis { display: flex; justify-content: space-between; margin-top: 6px;
        font-family: var(--font-mono); font-size: 9.5px;
        color: color-mix(in srgb, var(--color-text) 35%, transparent); }

/* "The price moved" — stated, not implied by a timestamp. */
.moved {
  padding: 10px 12px; border-radius: var(--radius-md); font-size: 11.5px;
  line-height: 1.55; color: color-mix(in srgb, var(--color-text) 78%, transparent);
  background: color-mix(in srgb, var(--color-text) 6%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-text) 10%, transparent);
}
.moved strong { color: var(--color-text); font-weight: 500; }
.moved.worse {
  background: color-mix(in srgb, var(--color-loss) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-loss) 28%, transparent);
}
.moved .muted { color: color-mix(in srgb, var(--color-text) 45%, transparent); }

/* Discord alerts are point-in-time and cannot update themselves. When the
   board and the message disagree, say so on the board rather than leaving the
   reader to notice. */
.alerted {
  font-family: var(--font-mono); font-size: 9px; margin-top: 5px;
  color: color-mix(in srgb, var(--color-text) 38%, transparent);
}

/* ── screen 04: alerts ──────────────────────────────────────────── */
.alertcard, .gonecard { padding: 13px 14px; }
.gonecard { background: rgba(30,32,48,.35); opacity: .7;
            box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-text) 6%, transparent); }
.agetag { font-family: var(--font-mono); font-size: 9.5px;
          color: color-mix(in srgb, var(--color-text) 42%, transparent); }
.alertline { font-size: 12.5px; line-height: 1.5; margin: 6px 0 0;
             color: color-mix(in srgb, var(--color-text) 85%, transparent); }
.alertline.muted { color: color-mix(in srgb, var(--color-text) 50%, transparent);
                   font-size: 11px; margin-top: 8px; }
.alertline strong { color: var(--color-text); font-weight: 500; }
/* A verdict that reports a loss says so inline. The one place outside a
   realised-P&L figure that the loss colour is allowed, and only because the
   sentence it marks IS a realised loss. */
.alertline strong.loss { color: var(--color-loss); }
.advice { background: rgba(30,32,48,.28); margin-top: 6px; }

/* ── screen 03: P&L (shadow book) ───────────────────────────────── */
.per { font-family: var(--font-mono); font-size: 10px; padding: 4px 8px;
       border-radius: 99px; text-decoration: none;
       color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.per.on { background: color-mix(in srgb, var(--color-text) 8%, transparent);
          color: var(--color-text); font-weight: 500; }
.hero { font-family: var(--font-mono); font-variant-numeric: tabular-nums;
        font-weight: 500; font-size: 32px; line-height: 1; margin-top: 6px; }
.hero2 { font-family: var(--font-mono); font-variant-numeric: tabular-nums;
         font-weight: 500; font-size: 18px; line-height: 1; margin-top: 6px;
         color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.herosub { font-family: var(--font-mono); font-size: 9.5px; margin-top: 6px;
           color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.pnlchart { height: 118px; margin-top: 14px; }
.pnlchart .zero { stroke: color-mix(in srgb, var(--color-text) 14%, transparent); }

.settled { display: flex; justify-content: space-between; align-items: center;
           gap: 10px; padding: 3px 0; }
.sname { font-size: 12px; color: color-mix(in srgb, var(--color-text) 85%, transparent); }
.smeta { font-family: var(--font-mono); font-size: 9.5px; margin-top: 3px;
         color: color-mix(in srgb, var(--color-text) 35%, transparent); }
.sr { text-align: right; }
.spnl { font-family: var(--font-mono); font-variant-numeric: tabular-nums;
        font-weight: 500; font-size: 13px; color: var(--color-accent-300); }
/* The one colour outside the mono palette, and only ever for realised loss. */
.spnl.loss { color: var(--color-loss); }

/* ── surfaces ────────────────────────────────────────────────────
   The two glass treatments were written inline in .card and .card.primary.
   Naming them lets the filter pills and ranking tiles BE the same material
   rather than approximating it — which is what went wrong the first time. */
:root {
  --glass: rgba(30,32,48,.5);
  --glass-line: inset 0 0 0 1px color-mix(in srgb, var(--color-text) 8%, transparent);
  --glass-lift: linear-gradient(158deg,
      color-mix(in srgb, var(--color-accent-900) 72%, transparent), rgba(30,32,48,.62));
  --glass-line-on: inset 0 1px 0 color-mix(in srgb, var(--color-text) 9%, transparent),
                   inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 28%, transparent),
                   0 8px 22px rgba(0,0,0,.4);
}

/* ── filters ─────────────────────────────────────────────────────
   Glass pills that open a panel of checkboxes. Native <details>, so it works
   with no JS at all, and multi-select is genuine: each dimension posts a list.

   A pill carries its own state in its label — "SPORT · 2" — because a closed
   dropdown that hides what it is filtering on is how you end up staring at a
   number wondering why it disagrees with yesterday. */
.filters {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  align-items: center; margin: 0 0 var(--space-2);
}
.fpill { position: relative; }

/* The market board already filters with .chip. These pills were a second
   filter vocabulary — mono 9.5px, tracked, glass, on words rather than
   numbers. They now share the chip's geometry, tint and type, so the two
   filter bars are one control. */
.fpill > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 99px;
  background: color-mix(in srgb, var(--color-text) 5%, transparent);
  backdrop-filter: none; box-shadow: none;
  font-family: var(--font-mono); font-weight: 500;
  font-size: 9px; letter-spacing: .1em;
  color: color-mix(in srgb, var(--color-text) 40%, transparent);
  white-space: nowrap;
}
.fpill > summary::-webkit-details-marker,
.fpill > summary::marker { display: none; content: ''; }
.fpill > summary:hover {
  background: color-mix(in srgb, var(--color-text) 9%, transparent);
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
}
.fpill > summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Active is byte-identical to .chip[aria-current="true"]. */
.fpill.on > summary {
  background: color-mix(in srgb, var(--color-accent) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 40%, transparent);
  color: var(--color-accent-300);
}

/* The dimension ("WINDOW") is a label, so it stays mono caps. The value
   ("All time") is a word, so it is Inter at chip size — the system's one hard
   type rule is mono for numbers, Inter for language. A value that IS a number
   keeps mono: add class="fval num". */
.fpill > summary .fval {
  font-family: var(--font-body); font-weight: 400;
  font-size: 11px; letter-spacing: 0;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
}
.fpill > summary .fval.num {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 10px;
}
.fpill.on > summary .fval { color: var(--color-accent-300); font-weight: 500; }

.fpill > summary .fcar {
  display: inline-flex; flex: none; opacity: .45; transition: transform .14s ease;
}
.fpill[open] > summary .fcar { opacity: .9; transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .fpill > summary .fcar { transition: none; } }

.fpanel {
  position: absolute; z-index: 40; top: calc(100% + 5px); left: 0;
  min-width: 186px; max-width: min(280px, calc(100vw - 34px));
  max-height: 268px; overflow-y: auto;
  padding: var(--space-2); border-radius: var(--radius-lg);
  background: rgba(24,26,40,.94); backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--glass-line), 0 14px 34px rgba(0,0,0,.5);
}
.fopt {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: var(--radius-md); cursor: pointer;
  font-size: 12.5px; line-height: 1.25;
  color: color-mix(in srgb, var(--color-text) 74%, transparent);
}
.fopt:hover { background: color-mix(in srgb, var(--color-text) 5%, transparent); }
.fopt input { position: absolute; opacity: 0; pointer-events: none; }
.fbox {
  flex: none; width: 13px; height: 13px; border-radius: 3.5px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-text) 22%, transparent);
}
.fopt input:checked ~ .fbox {
  background: var(--color-accent-400);
  box-shadow: inset 0 0 0 1px var(--color-accent-400);
}
.fopt input:checked ~ .flabel { color: var(--color-text); }
.fopt input:focus-visible ~ .fbox { outline: 2px solid var(--color-accent-400); outline-offset: 2px; }
.flabel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Primary actions in this system are outlined, never filled. */
.fapply {
  width: 100%; margin-top: var(--space-2); padding: 7px;
  border: 0; cursor: pointer; border-radius: var(--radius-md);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--color-accent);
  color: var(--color-accent-300);
  font-family: var(--font-mono); font-weight: 500;
  font-size: 9.5px; letter-spacing: .1em;
}
.fapply:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.fapply:active { box-shadow: inset 0 0 0 1px var(--color-accent-400); }
.fapply:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.fclear {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em;
  text-decoration: none; padding: 6px 4px;
  color: color-mix(in srgb, var(--color-text) 34%, transparent);
}
/* CLEAR is not destructive. The loss colour is realised loss only — never a
   warning — which this file states in its own token comment. */
.fclear:hover { color: var(--color-text); }

/* ── ranking tiles ─────────────────────────────────────────────
   A ranking tile is an alert card with a disclosure on it, so it now uses the
   alert card's own classes — .kicker, .agetag, .sel, .alertline — instead of
   private twins that drift from them. .rankname and .rankverdict were copies
   of .sel and .alertline; a copy is a promise to keep two rules in step by
   hand, and this is what it looks like when that promise lapses. */
.rank { margin: 0; }

/* Collapsed: the plain card pane, at full .card glass — same material,
   padding and radius as an alert card. */
.rank > summary {
  display: block; list-style: none; cursor: pointer;
  background: var(--glass);
  border-radius: var(--radius-lg);
}
.rank > summary::-webkit-details-marker,
.rank > summary::marker { display: none; content: ""; }
.rank > summary:hover {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 30%, transparent);
}
.rank > summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* A measurement that cannot support an answer reads like a closed alert —
   dimmed, neutral hairline. Same treatment as .gonecard, so "not answerable
   yet" and "this opportunity is gone" look like the same class of statement,
   which is what they are. */
.rank.thin > summary {
  background: rgba(30,32,48,.35); opacity: .7;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-text) 6%, transparent);
}

/* Open promotes the tile to primary: the .card.primary lift, and the kicker
   takes the accent exactly as it does on a primary card. */
.rank[open] > summary {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--glass-lift);
  box-shadow: var(--glass-line-on);
  opacity: 1;
}
.rank[open] > summary .kicker { color: var(--color-accent-400); }

/* The question is a title, not prose. At 12.5px it was the same size as the
   verdict beneath it, which is why the tile had no hierarchy while an alert
   card does. .sel is the established title scale. */
.rank .sel { margin-top: 1px; }

/* Phosphor caret-right, rotating on open. */
.rankcar {
  display: inline-flex; flex: none; transition: transform .14s ease;
  color: color-mix(in srgb, var(--color-text) 32%, transparent);
}
.rank[open] .rankcar { transform: rotate(90deg); color: var(--color-accent-400); }
@media (prefers-reduced-motion: reduce) { .rankcar { transition: none; } }

/* The tag sits with the caret on the right of the kicker row. */
.ranktag { display: flex; align-items: center; gap: 6px; flex: none; }

.rankbody {
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 14%, transparent);
}

/* Calibration table — fixed columns so claimed and realised line up down the
   page. Eyeballing the trend is the point; ragged columns defeat it. */
.calhead {
  display: flex; align-items: baseline; gap: 8px; padding-bottom: 5px;
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .1em;
  color: color-mix(in srgb, var(--color-text) 30%, transparent);
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--color-text) 7%, transparent);
}
.calhead .vname { flex: 1; }
.calc { width: 62px; text-align: right; flex: none; }
.venue .loss { color: var(--color-loss); }

/* Six tabs, not four. Equal cells and tighter gutters so every label holds one
   line at 375px — a truncated tab label is worse than a terse one. */
.tabs { padding-left: 8px; padding-right: 8px; justify-content: space-around; }
.tab { flex: 1 1 0; min-width: 0; }
.tab span { font-size: 8.5px; letter-spacing: .04em; white-space: nowrap; }
/* Radios read as a different promise from checkboxes — one choice, not several.
   The window pill is the only single-select dimension, so the shape has to say
   so before the user clicks and finds their previous pick cleared. */
.fopt input[type="radio"] ~ .fbox { border-radius: 50%; }
.fopt input[type="radio"]:checked ~ .fbox {
  background: radial-gradient(circle at 50% 50%,
    var(--color-accent-400) 0 3.2px, transparent 3.4px);
  box-shadow: inset 0 0 0 1px var(--color-accent-400);
}
/* CLV distribution bar. Proportion only — a count already sits beside it, and
   a second number dressed as a bar would just be the same fact twice. */
.clvbar {
  flex: none; width: 92px; height: 5px; border-radius: 3px; overflow: hidden;
  background: color-mix(in srgb, var(--color-text) 7%, transparent);
}
.clvbar i { display: block; height: 100%; background: var(--color-accent-400); }
.venue .vname.loss ~ .clvbar i { background: var(--color-loss); }

/* Text input — one style, used by the invite and account forms. Matches the
   filter panel's surface so a form reads as part of the same interface. */
.nameinput {
  width: 100%; padding: 10px 12px; border: 0; border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: 14px; color: var(--color-text);
  background: color-mix(in srgb, var(--color-text) 6%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-text) 10%, transparent);
}
.nameinput::placeholder { color: color-mix(in srgb, var(--color-text) 35%, transparent); }
.nameinput:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }

/* Instruction steps. NOT .venues — that component accent-colours its first row
   and is used elsewhere for rows carrying ADD/DROP links, so numbered steps
   rendered with it read as buttons and get tapped. They are prose. */
.steps { display: flex; flex-direction: column; gap: 9px; margin-top: 11px; }
.step { display: flex; gap: 9px; align-items: baseline; }
.stepn {
  flex: none; width: 17px; height: 17px; border-radius: 50%;
  font-family: var(--font-mono); font-size: 9.5px; line-height: 17px;
  text-align: center;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-text) 16%, transparent);
}
.stept {
  font-family: var(--font-body); font-size: 13px; line-height: 1.45;
  color: color-mix(in srgb, var(--color-text) 82%, transparent);
}
.stept em { font-style: normal; color: var(--color-text); font-weight: 500; }