/* css/dashboard.css
   GW DASHBOARD - ported from the design export's FINAL - Dashboard.dc.html
   (Draft D, with src/dash-core.js). Behaviour in js/modules/dashboard.js; the
   shell markup in index.html.

   Every rule is nested under `.db`. Colour, spacing, radius and font tokens
   are base.css's own; only values this page alone needs are declared on `.db`.
   Same scope-level re-point as the other redesigned pages (CONVENTIONS.md
   §5.2): Tough reads orange.

   ENTRANCE MOTION RUNS ONLY UNDER [data-anim]. The module sets it on a render
   the reader caused (the board/team-sheet switch, the first settled render)
   and clears it on a data repaint, so the 60-second live poll never replays
   the page under the reader. */

@keyframes db-in    { from { opacity: 0; transform: translateY(8px); } }
@keyframes db-out   { to { opacity: 0; transform: translateY(-6px) scale(.99); } }
@keyframes db-bar   { from { transform: scaleX(0); } }
@keyframes db-pitch { from { opacity: 0; transform: scale(.97); } }
@keyframes db-draw  { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes db-ring  { from { opacity: 0; transform: scale(.4); } }
@keyframes db-sk    { to { transform: translateX(100%); } }

.db {
  --pad: clamp(16px, 3vw, 40px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --shadow-pop: 0 16px 40px rgba(1, 4, 9, .6);
  --db-neutral-ink: #a2abb5;   /* neutral band text - grey is too dark on its tint */
  --db-hatch: repeating-linear-gradient(-45deg, transparent 0 3px, color-mix(in srgb, var(--band-grey) 30%, transparent) 3px 5px);
  --db-cmd-h: 56px;            /* measured by dashboard.js - the command bar wraps */
  --band-tough: var(--band-orange);
  --band-tough-bg: var(--band-orange-bg);

  font: 14px/1.45 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  color: var(--color-text);

  [data-band] { --b: var(--band-neutral); --bb: var(--band-neutral-bg); --bt: var(--db-neutral-ink); }
  [data-band=excellent] { --b: var(--band-gold);    --bb: var(--band-gold-bg);   --bt: var(--band-gold); }
  [data-band=great]     { --b: var(--band-great);   --bb: var(--band-great-bg);  --bt: var(--band-great); }
  [data-band=good]      { --b: var(--band-good);    --bb: var(--band-good-bg);   --bt: var(--band-good); }
  [data-band=tough]     { --b: var(--band-tough);   --bb: var(--band-tough-bg);  --bt: var(--band-tough); }
  [data-band=brutal]    { --b: var(--band-brutal);  --bb: var(--band-brutal-bg); --bt: var(--band-brutal); }
  [data-band=extreme]   { --b: var(--band-red);     --bb: var(--band-black-bg);  --bt: var(--band-red); }

  *, *::before, *::after { box-sizing: border-box; margin: 0; }
  button, input { font: inherit; color: inherit; }
  ol, ul { list-style: none; padding: 0; }
  :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
  [hidden] { display: none !important; }
  .lbl { font: 700 11px/1.2 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--color-muted); }
  .lbl--sm { font-size: 10px; }
  .muted { color: var(--color-muted); }
  .num { font-variant-numeric: tabular-nums; }
  .wrap { max-width: 1600px; margin: 0 auto; padding-inline: var(--pad); }
  .ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  kbd { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border: 1px solid var(--color-border); border-radius: 3px; font: 600 11px/1 var(--font-mono); color: var(--color-muted); }

  /* ─── Shared primitives ─────────────────────────────────────────────────── */

  /* score chip - tint + 60% hue ring; only excellent is solid gold. */
  .chip { display: inline-flex; align-items: center; justify-content: center; flex: none; height: 24px; min-width: 34px; padding: 0 6px; border-radius: 4px; background: var(--bb); color: var(--bt); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--b) 60%, transparent); font: 700 13px/1 var(--font-sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .chip[data-band=excellent] { background: var(--band-gold); color: var(--color-bg); box-shadow: 0 0 0 1px var(--band-gold), 0 0 14px color-mix(in srgb, var(--band-gold) 40%, transparent); }
  .chip.is-est { box-shadow: none; border: 1px dashed var(--b); }
  .chip--sm { height: 20px; min-width: 28px; padding: 0 4px; font-size: 12px; }
  .chip--lg { height: 32px; min-width: 46px; padding: 0 8px; font-size: 16px; }
  /* Still settling - the value is withheld, the footprint kept. */
  .chip.is-pending { position: relative; overflow: hidden; background: var(--color-skeleton); color: transparent; box-shadow: none; border: 0; }
  .chip.is-pending::after, .sk::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--color-skeleton-highlight), transparent); transform: translateX(-100%); animation: db-sk 1.3s linear infinite; }
  .sk { position: relative; overflow: hidden; display: block; height: 12px; width: var(--w, 70%); background: var(--color-skeleton); }

  .crest { flex: none; width: var(--s, 14px); height: var(--s, 14px); object-fit: contain; }
  .crest--18 { --s: 18px; } .crest--24 { --s: 24px; }
  .pos--GKP { color: var(--pos-gkp); } .pos--DEF { color: var(--pos-def); }
  .pos--MID { color: var(--pos-mid); } .pos--FWD { color: var(--pos-fwd); }
  .stat { flex: none; font-weight: 800; color: var(--band-red); }
  .stat--d { color: var(--band-amber); }
  .warn { color: var(--band-amber); }

  .seg { position: relative; display: flex; gap: 2px; padding: 2px; border: 1px solid var(--color-border); border-radius: 4px; background: var(--color-bg); }
  .seg button { position: relative; height: 30px; padding: 0 8px; border: 0; border-radius: 2px; background: transparent; color: var(--color-muted); font: 600 14px/1 var(--font-head); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: background-color .12s, color .12s; }
  .seg button:hover { color: var(--color-text); }
  .seg button[aria-pressed=true] { background: var(--color-text); color: var(--color-bg); }
  /* Board / team sheet: one sliding indicator instead of per-button fills. */
  .seg--view { display: grid; grid-template-columns: 1fr 1fr; }
  .seg--view button { height: 28px; padding: 0 12px; transition: color 220ms var(--ease); }
  .seg--view button[aria-pressed=true] { background: transparent; color: var(--color-bg); }
  .seg__ind { position: absolute; top: 2px; bottom: 2px; left: 2px; width: calc(50% - 3px); border-radius: 2px; background: var(--color-text); transform: translateX(calc(var(--i, 0) * (100% + 2px))); transition: transform 280ms var(--ease); }

  .btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--color-border); border-radius: 4px; background: var(--color-bg); color: var(--color-text); font-weight: 600; font-size: 13px; cursor: pointer; transition: background-color .12s, border-color .12s; }
  .btn:hover { border-color: var(--color-muted); }
  .btn[aria-expanded=true] { border-color: var(--color-accent); background: var(--color-accent-muted); color: var(--color-accent); }
  .btn--sm { height: 32px; background: var(--color-surface); }
  .btn--go { border-color: var(--color-text); background: var(--color-text); color: var(--color-bg); font-weight: 700; }
  .ib { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 1px solid var(--color-border); border-radius: 50%; background: transparent; color: var(--color-muted); font: italic 600 13px/1 Georgia, 'Times New Roman', serif; cursor: pointer; }
  .ib[aria-expanded=true] { border-color: var(--color-accent); background: var(--color-accent-muted); color: var(--color-accent); }
  .tag { display: inline-flex; align-items: center; height: 22px; padding: 0 10px 0 14px; background: var(--color-text); color: var(--color-bg); font: 600 12px/1 var(--font-head); letter-spacing: .05em; text-transform: uppercase; clip-path: polygon(8px 0, 100% 0, 100% 100%, 8px 100%, 0 50%); }

  /* Score numeral; the outline layer sits behind in the enclosing band hue. */
  .big { position: relative; display: inline-block; isolation: isolate; white-space: nowrap; font: 700 64px/.82 var(--font-score); font-variant-numeric: tabular-nums; }
  .big__o { position: absolute; top: .05em; left: .05em; z-index: -1; color: var(--b); filter: url(#gq-outline); }

  /* ─── Command bar ───────────────────────────────────────────────────────── */

  .cmd { position: sticky; top: var(--app-header-height); z-index: 30; background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
  .cmd__in { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-height: 56px; padding-block: 8px; }
  .gwtag { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border: 1px solid var(--color-border); color: var(--color-muted); font: 600 15px/1 var(--font-head); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
  .gwtag[data-state=pre-deadline] { color: var(--color-text); }
  .gwtag[data-state=live] { border-color: var(--color-text); background: var(--color-text); color: var(--color-bg); }
  .gwmeta { font-size: 12px; color: var(--color-muted); font-variant-numeric: tabular-nums; }
  .stale { font-size: 12px; font-weight: 700; color: var(--band-amber); }
  .tally { display: inline-flex; align-items: center; gap: 8px; }
  .tally b { font: 600 15px/1 var(--font-head); letter-spacing: .05em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
  .tally__bar { display: block; width: 56px; height: 4px; background: var(--color-bg); }
  .tally__bar > span { display: block; height: 100%; background: var(--color-text); transform-origin: left center; transition: transform .2s var(--ease); }
  .grow { flex: 1 1 0; }
  .search { position: relative; flex: 0 1 280px; min-width: 200px; }
  .search input { width: 100%; height: 36px; padding: 0 34px 0 10px; border: 1px solid var(--color-border); border-radius: 4px; background: var(--color-bg); font-size: 13px; }
  .search kbd { position: absolute; right: 8px; top: 9px; }
  .results { position: absolute; left: 0; right: 0; top: 40px; z-index: 50; max-height: 420px; overflow-y: auto; padding: 4px 0; background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: 4px; box-shadow: var(--shadow-pop); }
  .results li { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px; cursor: pointer; }
  .results li[aria-selected=true] { background: var(--color-surface); }
  .results li[aria-disabled=true] { cursor: not-allowed; }
  .results li[aria-disabled=true] b { color: var(--color-muted); }
  .results li > span:first-child { width: 30px; font: 700 10px/1 var(--font-sans); letter-spacing: .1em; }
  .results li > span:nth-child(2) { flex: 1; min-width: 0; display: grid; gap: 1px; }
  .results b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .results small, .results li > span:last-child { font-size: 11px; color: var(--color-muted); white-space: nowrap; }
  .results .empty { padding: 10px; font-size: 13px; color: var(--color-muted); cursor: default; }
  .hints { display: none; align-items: center; gap: 5px; font-size: 11px; color: var(--color-muted); }
  @media (min-width: 1360px) { .hints { display: flex; } }

  .drop { border-top: 1px solid var(--color-border-subtle); background: var(--color-bg); }
  .drop__in { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-block: 10px; }
  .drop__in--help { align-items: baseline; gap: 8px 20px; }
  .drop__in input { width: 160px; height: 36px; padding: 0 10px; border: 1px solid var(--color-border); border-radius: 4px; background: var(--color-surface); font-size: 13px; font-variant-numeric: tabular-nums; }
  .drop__t { font: 600 16px/1 var(--font-head); letter-spacing: .05em; text-transform: uppercase; }
  .drop__step { font-size: 12px; color: var(--color-muted); }
  .drop__step b { color: var(--color-text); font-variant-numeric: tabular-nums; }
  .imp-st { font-size: 13px; color: var(--color-muted); }
  .imp-st[data-type=error] { color: var(--band-red); }
  .imp-st[data-type=success] { color: var(--band-green); }
  .imp-info { font-size: 12px; color: var(--color-muted); }

  /* ─── Main grid ─────────────────────────────────────────────────────────── */

  .main { padding-block: 20px 120px; }
  .grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
  @media (min-width: 1240px) {
    .grid { grid-template-columns: minmax(0, 1fr) 340px; }
    .aside { position: sticky; top: calc(var(--app-header-height) + var(--db-cmd-h) + 20px); }
  }

  /* ─── Board ─────────────────────────────────────────────────────────────── */

  .board { min-width: 0; background: var(--color-surface); border: 1px solid var(--color-border); }
  .board__hd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding: 14px 16px 12px; border-bottom: 1px solid var(--color-border); }
  .board__hd h2 { font: 600 22px/1 var(--font-head); letter-spacing: .05em; text-transform: uppercase; }
  .board__hd .seg { align-self: center; }
  .board__meta { margin-left: auto; font-size: 12px; color: var(--color-muted); font-variant-numeric: tabular-nums; }
  .board__body.is-leaving { animation: db-out 190ms cubic-bezier(.4, 0, 1, 1) both; }
  .note { padding: 10px 16px; font-size: 11px; color: var(--color-muted); text-wrap: pretty; }

  .head, .row { display: grid; grid-template-columns: var(--cols); gap: 6px 10px; align-items: center; padding: 0 12px; }
  .head { height: 34px; border-bottom: 1px solid var(--color-border); font: 700 10px/1.2 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--color-muted); }
  .head .r, .row .r { text-align: right; }
  .grp__hd { display: flex; align-items: center; gap: 10px; height: 28px; padding: 0 12px; background: var(--color-bg); border-bottom: 1px solid var(--color-border-subtle); }
  .grp__hd b { font: 700 10px/1 var(--font-sans); letter-spacing: .12em; }
  .grp__hd span { font-size: 11px; color: var(--color-muted); font-variant-numeric: tabular-nums; }
  .row { min-height: 44px; padding-block: 5px; border-bottom: 1px solid var(--color-border-subtle); cursor: pointer; transition: background-color .12s; }
  .row:hover { background: var(--color-surface-raised); }
  .row.is-open { background: var(--color-surface-raised); box-shadow: inset 0 0 0 1px var(--color-accent); }
  .role { display: inline-grid; place-items: center; justify-self: start; min-width: 26px; height: 20px; padding: 0 4px; border: 1px solid transparent; color: var(--color-muted); font: 600 12px/1 var(--font-head); letter-spacing: .05em; text-transform: uppercase; }
  .role[data-role=XI] { border-color: var(--color-border); color: var(--color-text); }
  .role[data-role=C] { border-color: var(--color-text); background: var(--color-text); color: var(--color-bg); }
  .who { display: grid; gap: 2px; min-width: 0; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
  .who > span:first-child { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; font-weight: 600; }
  .who > span:last-child { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--color-muted); font-variant-numeric: tabular-nums; }
  .nx { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 11px; color: var(--color-muted); }
  .row > .chip { justify-self: start; }
  .ffc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .ffc > span { display: grid; gap: 3px; }
  .ffc b { font: 700 11px/1 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--bt); }
  .mbar { display: block; height: 3px; background: var(--color-surface-raised); }
  .mbar > span { display: block; height: 100%; background: var(--b); transform-origin: left center; }
  .mbar > span.is-est { background: transparent; border: 1px dashed var(--b); }
  .strip { display: flex; gap: 3px; min-width: 0; }
  .strip > span { flex: 1; display: flex; gap: 2px; min-width: 0; }
  .cell { flex: 1; display: inline-flex; align-items: center; justify-content: center; min-width: 0; height: 20px; border-radius: 3px; background: var(--bb); color: var(--bt); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--b) 60%, transparent); font: 700 11px/1 var(--font-sans); font-variant-numeric: tabular-nums; }
  .cell[data-band=excellent] { background: var(--band-gold); color: var(--color-bg); box-shadow: 0 0 0 1px var(--band-gold); }
  .cell.is-est { box-shadow: none; border: 1px dashed var(--b); }
  .cell--blank { background: var(--db-hatch); color: var(--color-muted); box-shadow: inset 0 0 0 1px var(--color-border); }
  .ms { font-size: 12px; color: var(--color-muted); font-variant-numeric: tabular-nums; }
  .ms.is-low { color: var(--color-text); }
  .ep, .live { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
  .live.is-stale { opacity: .6; }
  .flags { font-size: 12px; font-weight: 700; color: var(--band-amber); white-space: nowrap; }
  .rm { justify-self: end; display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid transparent; border-radius: 4px; background: none; color: var(--color-muted); font-size: 16px; cursor: pointer; transition: color .12s, border-color .12s; }
  .rm:hover { color: var(--color-text); border-color: var(--color-border); }
  .empty-slot { display: flex; align-items: center; min-height: 36px; padding: 0 12px 0 62px; border-bottom: 1px solid var(--color-border-subtle); font-size: 12px; color: var(--color-muted); }
  .sk-row { display: flex; align-items: center; height: 44px; padding: 0 12px; border-bottom: 1px solid var(--color-border-subtle); }
  .state { display: grid; gap: 8px; justify-items: start; padding: 24px 16px; border-bottom: 1px solid var(--color-border-subtle); }
  .state > b { font: 600 20px/1 var(--font-head); letter-spacing: .05em; text-transform: uppercase; }
  .state > span { font-size: 13px; color: var(--color-muted); }
  .wait { padding: 12px 16px; font-size: 12px; color: var(--color-muted); }
  /* Narrow board: role · player · score · pred · remove. */
  .board:not(.is-wide) .wd { display: none; }

  /* ─── Team sheet ────────────────────────────────────────────────────────── */

  .sheet { display: grid; gap: 14px; padding: 16px; }
  .pitch { position: relative; width: 100%; max-width: 720px; margin: 0 auto; padding: 28px 20px; border: 1px solid var(--color-border-subtle); background: var(--color-bg); overflow: hidden; }
  .pitch__lines { position: absolute; inset: 0; pointer-events: none; }
  .pitch__lines svg { position: absolute; inset: 0; width: 100%; height: 100%; }
  /* No vector-effect: non-scaling-stroke measures dashes in screen pixels and
     ignores pathLength="1", which left the draw-in animation with gaps. */
  .pitch__lines svg * { fill: none; stroke: var(--color-border); stroke-width: 1.5; }
  .pitch__ring { position: absolute; left: 50%; top: 50%; width: 140px; height: 140px; margin: -70px 0 0 -70px; border-radius: 50%; border: 1.5px solid var(--color-border); }
  .lines { position: relative; display: grid; grid-template-rows: .8fr 1fr 1fr .9fr; gap: 12px; min-height: 720px; }
  .line { display: flex; flex-wrap: wrap; justify-content: space-evenly; align-items: center; gap: 8px; }
  .tok { position: relative; isolation: isolate; display: grid; gap: 5px; justify-items: center; width: 128px; padding: 10px 6px 8px; border: 1px solid var(--color-border); border-radius: 4px; background: var(--color-surface); text-align: center; cursor: pointer; transition: background-color .12s, border-color .12s; }
  .tok:hover { background: var(--color-surface-raised); border-color: var(--color-muted); }
  .tok.is-cap { border-color: var(--color-text); }
  .tok.is-open { background: var(--color-surface-raised); border-color: var(--color-accent); }
  .tok__mark { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: 3px; pointer-events: none; }
  .tok__mark > span { position: absolute; left: 50%; top: 50%; width: 118%; aspect-ratio: 1; background: center / contain no-repeat; opacity: .1; transform: translate(-50%, -50%) rotate(10deg); }
  .tok__c { position: absolute; top: -1px; left: -1px; display: inline-grid; place-items: center; width: 20px; height: 20px; background: var(--color-text); color: var(--color-bg); font: 600 13px/1 var(--font-head); letter-spacing: .05em; text-transform: uppercase; }
  .tok__w { position: absolute; top: 3px; right: 5px; font-size: 11px; color: var(--band-amber); }
  .tok__pos { font: 700 10px/1 var(--font-sans); letter-spacing: .12em; }
  .tok__name { max-width: 100%; font: 400 17px/1.05 var(--font-team); letter-spacing: .03em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tok__sub { max-width: 100%; font-size: 11px; color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tok__nums { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
  .tok__nums small { font-size: 11px; font-weight: 400; color: var(--color-muted); }
  .bench { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
  .bench__t { display: grid; gap: 2px; }
  .bench__t b { font: 600 16px/1 var(--font-head); letter-spacing: .05em; text-transform: uppercase; }
  .bench ol { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 360px; }
  .bench li { flex: 1 1 150px; min-width: 0; }
  .bn { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 4px 8px; border: 1px solid var(--color-border); border-radius: 4px; background: var(--color-surface); text-align: left; cursor: pointer; transition: background-color .12s, border-color .12s; }
  .bn:hover { background: var(--color-surface-raised); border-color: var(--color-muted); }
  .bn.is-open { background: var(--color-surface-raised); border-color: var(--color-accent); }
  .bn > span:first-child { font: 700 23px/1 var(--font-score); letter-spacing: 0; color: var(--color-muted); }
  .bn > span:nth-child(2) { display: grid; gap: 1px; min-width: 0; }
  .bn b { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bn small { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--color-muted); white-space: nowrap; }
  .bn small b { font-size: 11px; font-weight: 700; }

  /* ─── Aside ─────────────────────────────────────────────────────────────── */

  .aside { display: grid; gap: 20px; min-width: 0; }
  .card { padding: 16px; background: var(--color-surface); border: 1px solid var(--color-border); }
  .card > header { display: flex; align-items: baseline; gap: 8px; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--color-border-subtle); }
  .card h2 { font: 600 20px/1 var(--font-head); letter-spacing: .05em; text-transform: uppercase; }
  .card > header > span:last-child:not(.lbl) { margin-left: auto; font-size: 11px; color: var(--color-muted); font-variant-numeric: tabular-nums; }
  .card--cap { background: var(--color-surface-raised); border: 0; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%); }
  .card--cap > header { padding-bottom: 0; border: 0; }
  .card p { font-size: 13px; color: var(--color-muted); }
  .cap { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; }
  .cap__l { display: grid; gap: 6px; min-width: 0; }
  .cap__name { font: 400 36px/1 var(--font-team); letter-spacing: .04em; text-transform: uppercase; overflow-wrap: anywhere; }
  .cap__sub { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-muted); }
  .cap__edge { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; }
  .cap__live { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
  .cap__r { display: grid; justify-items: end; gap: 4px; }
  .ladder { display: grid; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--color-border); }
  .ladder li { display: grid; grid-template-columns: 14px minmax(0, 1fr) minmax(40px, 1fr) 32px; align-items: center; gap: 8px; font-size: 12px; }
  .ladder li > span:first-child { color: var(--color-muted); font-variant-numeric: tabular-nums; }
  .ladder li > span:nth-child(2) { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 600; }
  .ladder li > span:last-child { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
  .lbar { display: block; height: 6px; background: var(--color-bg); }
  .lbar > span { display: block; height: 100%; background: var(--color-muted); transform-origin: left center; }
  .ladder li:first-child .lbar > span { background: var(--color-text); }
  .sk-stack { display: grid; gap: 8px; }
  .sk-stack .sk:first-child { height: 28px; }

  .why { display: grid; gap: 10px; }
  .why__top { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .why__top > span:last-child { display: grid; gap: 2px; min-width: 0; }
  .why__top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .why__top small { font-size: 11px; color: var(--color-muted); }
  .why__ctx { font-size: 12px; color: var(--color-muted); }
  .bd { display: grid; grid-template-columns: 56px minmax(0, 1fr) 30px 30px; align-items: center; gap: 8px; font-size: 12px; }
  .bd > span:first-child { font-weight: 600; }
  .bd .mbar { height: 6px; }
  .bd b { text-align: right; font-variant-numeric: tabular-nums; color: var(--bt); }
  .bd > span:last-child { color: var(--color-muted); font-variant-numeric: tabular-nums; }
  .why__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-top: 10px; border-top: 1px solid var(--color-border-subtle); font-size: 12px; }
  .why__facts > span { display: grid; gap: 2px; }
  .why__facts b { font-variant-numeric: tabular-nums; }
  .why__flags { font-size: 12px; }

  .risk { display: grid; gap: 4px; padding: 8px 0; border-bottom: 1px solid var(--color-border-subtle); }
  .risk > span { display: flex; align-items: baseline; gap: 8px; font-size: 12px; font-weight: 700; }
  .risk > span small { font-size: 12px; color: var(--color-muted); font-variant-numeric: tabular-nums; }
  .risk button { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 28px; padding: 0 4px; border: 0; border-radius: 4px; background: none; text-align: left; font-size: 12px; cursor: pointer; }
  .risk button:hover { background: var(--color-surface-raised); }
  .risk button > span:first-child { font: 600 12px/1 var(--font-head); letter-spacing: .05em; text-transform: uppercase; color: var(--color-muted); }
  .risk button > span:nth-child(2) { display: flex; align-items: center; gap: 6px; min-width: 0; }
  .risk button > span:last-child { max-width: 140px; color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* ─── Entrances - reader-caused renders only ────────────────────────────── */

  [data-anim] {
    .row, .tok, .bn, .sheet { animation: db-in 300ms var(--ease) both; animation-delay: var(--d, 0ms); }
    .pitch { animation: db-pitch 420ms var(--ease) both; }
    .pitch__lines svg * { stroke-dasharray: 1; animation: db-draw 900ms var(--ease) both; animation-delay: var(--d, 0ms); }
    .pitch__ring { animation: db-ring 640ms var(--ease) 320ms both; }
  }
  .lbar > span, .bd .mbar > span { animation: db-bar 560ms var(--ease) both; }

  /* ─── Narrow ────────────────────────────────────────────────────────────── */

  @media (max-width: 768px) {
    .cmd { position: static; }
  }
  @media (max-width: 719px) {
    .pitch { max-width: 100%; padding: 16px 8px; }
    .lines { grid-template-rows: none; gap: 20px; min-height: 0; }
    .tok { width: calc(33.333% - 8px); }
  }
  @media (max-width: 499px) {
    .tok { width: calc(50% - 6px); }
    .search { flex-basis: 100%; }
  }

  @media (prefers-reduced-motion: reduce) {
    &, *, *::before, *::after { animation: none !important; transition: none !important; }
  }
}