/* =========================================================
   Best of Seven — "Broadcast" design system (v2)
   Drop-in replacement for site/bo7/styles.css.
   Vanilla CSS, no build step. Class names are BEM-ish (.c-*)
   so render.js can migrate screen by screen.
   ========================================================= */

/* ---------- fonts (self-hosted; copy files into site/bo7/fonts) ---------- */
@font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-display: block; src: url('fonts/barlow-condensed-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-display: block; src: url('fonts/barlow-condensed-700.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-weight: 100 900; font-display: block; src: url('../fonts/Geist-VF.woff2') format('woff2'); }

:root {
  /* ---- surfaces (dark only — one theme for the whole game) ---- */
  --bg:        #0e0f12;  /* page */
  --bg-bar:    #121418;  /* action bar / sticky chrome */
  --panel:     #16181d;  /* cards, rows */
  --raised:    #1f2228;  /* selected option card */
  --seg-on:    #2a2e36;  /* active segment in a segmented control */
  --line:      #262a31;  /* dividers, tracks */
  --line-2:    #2f343c;  /* dashed open slots, stepper connectors */
  --line-3:    #3a3f48;  /* secondary-button border */

  /* ---- text ---- */
  --tx:   #eceae4;  /* primary */
  --tx-2: #b4b8bf;  /* body */
  --tx-3: #8b9099;  /* labels, meta */
  --tx-4: #5a5f68;  /* disabled, hints */

  /* ---- meaning (same L/C, different hue) ---- */
  --act:       #f0b44c;  /* amber — the ONE action color. Never decorative. */
  --act-hover: #ffc766;
  --act-deep:  #b98a35;  /* hatch partner for projected cap */
  --act-tint:  rgba(240,180,76,.07);
  --you:       #5fd49e;  /* your five, wins */
  --them:      #ff8f80;  /* opponent, losses, their weak spots */

  /* ---- type ---- */
  --f-display: 'Barlow Condensed', 'Arial Narrow', sans-serif; /* 600/700, UPPERCASE */
  --f-ui:      'Geist', system-ui, sans-serif;
  --fs-hero:  clamp(84px, 10.5vw, 152px);  /* home wordmark */
  --fs-d1:    clamp(48px, 5.6vw, 80px);    /* screen title (team name, Game 4) */
  --fs-d2:    clamp(28px, 3vw, 44px);      /* headline sentence (dispatch, book) */
  --fs-d3:    clamp(22px, 1.9vw, 28px);    /* card title, player name */
  --fs-d4:    22px;                        /* CTA label, stat numerals */
  --fs-body:  15px;  --lh-body: 1.5;
  --fs-small: 13px;
  --fs-label: 12px;  --ls-label: .12em;    /* UPPERCASE Geist 600 */
  --fs-micro: 11px;

  /* ---- space (4pt) ---- */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 28px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px;
  --gutter: var(--s10);

  /* ---- radius ---- */
  --r-tag: 4px; --r-chip: 8px; --r-row: 12px; --r-cta: 12px; --r-card: 14px; --r-panel: 18px; --r-pill: 999px;

  /* ---- chrome sizes ---- */
  --topbar-h: 64px;
  --actionbar-h: 88px;
  --cta-h: 56px;
  --tap: 44px;

  /* ---- motion ---- */
  --ease: cubic-bezier(.22,1,.36,1);
  --t-fast: 120ms; --t: 220ms; --t-slow: 380ms;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--tx); font: 400 var(--fs-body)/var(--lh-body) var(--f-ui); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { margin: 0; }
a { color: var(--act); } a:hover { color: var(--act-hover); }
:focus-visible { outline: 2px solid var(--act); outline-offset: 3px; }
/* No dangling words anywhere. Every wrapping line is balanced (one-word last lines are a bug).
   Also cap prose at 60ch and headlines at 22ch so balance has room to work. */
body * { text-wrap-style: balance; }  /* longhand: the `text-wrap` shorthand would reset nowrap */

/* =========================================================
   1. SHELL — every screen: TOP (where) · MAIN (read) · ACTION (do)
   ========================================================= */
.c-shell { height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; }   /* desktop/tablet: fixed frame, main scrolls */
.c-shell__main { min-height: 0; overflow-y: auto; padding: var(--s10) var(--gutter) var(--s8); }
.c-shell__main--cols { display: grid; gap: var(--s12); grid-template-columns: minmax(0,1fr) 400px; }        /* scout, series report */
.c-shell__main--three { display: grid; padding: 0; grid-template-columns: 300px minmax(0,1fr) 280px; }    /* draft */
.c-shell__main--rail { display: grid; padding: 0; grid-template-columns: 360px minmax(0,1fr); }           /* series */
.c-pane { padding: var(--s7) var(--s6); min-width: 0; }
.c-pane + .c-pane { border-left: 1px solid var(--line); }
.c-pane--wide { padding: var(--s7) var(--s10); }
.c-attack--compact { display: none; margin-top: var(--s4); background: var(--panel); border-radius: var(--r-row); padding: 12px 14px; border-left: 3px solid var(--them); }

/* ---------- top bar ---------- */
.c-topbar { height: var(--topbar-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 var(--gutter); border-bottom: 1px solid var(--line); }
.c-topbar__brand { font: 700 20px/1 var(--f-display); letter-spacing: .04em; text-transform: uppercase; }
.c-topbar__ctx { justify-self: end; font-size: 14px; color: var(--tx-3); white-space: nowrap; }
.c-topbar__ctx b { color: var(--them); font-weight: 600; }

/* ---------- stepper (desktop/tablet) ---------- */
.c-stepper { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.c-step { display: flex; align-items: center; gap: 8px; color: var(--tx-4); font: 600 16px/1 var(--f-display); letter-spacing: .05em; }
.c-step__dot { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 700 12px/1 var(--f-ui); border: 1.5px solid var(--line-2); }
.c-step + .c-step::before { content: ''; width: 28px; height: 1px; background: var(--line-2); margin-right: 2px; }
.c-step.is-done { color: var(--tx-3); } .c-step.is-done .c-step__dot { border-color: var(--you); color: var(--you); }
.c-step.is-now  { color: var(--tx); }   .c-step.is-now  .c-step__dot { background: var(--act); border-color: var(--act); color: var(--bg); }

/* ---------- mobile step bar (replaces stepper < 768) ---------- */
.c-stepbar { display: none; }
@media (max-width: 767px) { .c-stepbar { display: grid; } }
.c-stepbar { position: sticky; top: 0; z-index: 6; background: var(--bg); padding: calc(10px + env(safe-area-inset-top)) var(--s5) 12px; border-bottom: 1px solid var(--line); gap: var(--s2); }
.c-stepbar__row { display: flex; justify-content: space-between; align-items: center; }
.c-stepbar__now { font: 700 16px/1 var(--f-display); letter-spacing: .05em; text-transform: uppercase; }
.c-stepbar__ctx { font-size: var(--fs-small); color: var(--tx-3); }
.c-stepbar__track { display: grid; grid-template-columns: repeat(5,1fr); gap: 4px; }
.c-stepbar__seg { height: 3px; border-radius: 2px; background: var(--line); }
.c-stepbar__seg.is-done { background: var(--you); } .c-stepbar__seg.is-now { background: var(--act); }

/* ---------- action bar: coach line + the ONE primary action ---------- */
.c-actionbar { min-height: var(--actionbar-h); background: var(--bg-bar); border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--s8); align-items: center; padding: var(--s4) var(--gutter); position: sticky; bottom: 0; z-index: 5; }
.c-actionbar__aside { display: flex; align-items: center; gap: var(--s4); }
.c-coach { display: flex; align-items: center; gap: 14px; font-size: var(--fs-body); color: var(--tx-2); }
.c-coach b { color: var(--tx); font-weight: 600; }
.c-coach__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--act); flex: none; animation: bo7-pulse 2s infinite; }
.c-kbd { border: 1px solid var(--line-3); border-radius: var(--r-tag); padding: 2px 6px; color: var(--tx-3); font-size: 12px; }

/* =========================================================
   2. BUTTONS — hierarchy: primary (amber, one per screen) › secondary › quiet
   ========================================================= */
.c-btn { -webkit-appearance: none; appearance: none; border: 0; cursor: pointer; font: 700 var(--fs-d4)/1 var(--f-display); text-transform: uppercase; letter-spacing: .02em; min-height: var(--tap); display: inline-flex; align-items: center; justify-content: space-between; gap: var(--s6); transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.c-btn:active { transform: scale(.98); }
.c-btn--primary { height: var(--cta-h); min-width: 300px; padding: 0 var(--s6); border-radius: var(--r-cta); background: var(--act); color: var(--bg); }
.c-btn--primary:hover { background: var(--act-hover); }
.c-btn--primary .c-btn__arrow { animation: bo7-nudge 1.8s var(--ease) infinite; }
.c-btn--primary[aria-disabled="true"] { background: var(--panel); color: var(--tx-4); cursor: default; }
.c-btn--primary[aria-disabled="true"] .c-btn__arrow { animation: none; }
.c-btn--secondary { padding: 10px var(--s4); border-radius: 10px; background: transparent; color: var(--tx); border: 1.5px solid var(--line-3); font-size: 17px; justify-content: center; flex-direction: column; gap: 2px; }
.c-btn--secondary:hover { border-color: var(--tx); }
.c-btn--secondary small { font: 400 12px/1 var(--f-ui); color: var(--tx-3); text-transform: none; }
.c-btn--quiet { background: none; color: var(--tx-3); font: 500 14px/1 var(--f-ui); text-transform: none; padding: 0 var(--s2); }
.c-btn--quiet:hover { color: var(--tx); }

/* segmented control */
.c-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--bg); border-radius: var(--r-row); padding: 4px; gap: 4px; }
.c-seg__opt { -webkit-appearance: none; appearance: none; border: 0; background: transparent; font: inherit; border-radius: 9px; padding: 13px; text-align: center; font-size: 15px; color: var(--tx-3); cursor: pointer; min-height: var(--tap); }
.c-seg__opt:hover { color: var(--tx); }
.c-seg__opt.is-on { background: var(--seg-on); color: var(--tx); font-weight: 600; }

/* =========================================================
   3. TEXT ATOMS
   ========================================================= */
.c-label { font: 600 var(--fs-label)/1.2 var(--f-ui); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--tx-3); }
.c-label--you { color: var(--you); } .c-label--them { color: var(--them); } .c-label--act { color: var(--act); }
.c-title { font: 700 var(--fs-d3)/1 var(--f-display); text-transform: uppercase; }
.t-display { font: 700 var(--fs-d1)/.86 var(--f-display); text-transform: uppercase; }
.t-hero { font: 700 var(--fs-hero)/.8 var(--f-display); text-transform: uppercase; letter-spacing: -.015em; }
.c-headline { font: 600 var(--fs-d2)/1.06 var(--f-display); max-width: 22ch; }
.c-body { color: var(--tx-2); max-width: 60ch; }
.c-meta { font-size: var(--fs-small); color: var(--tx-3); }

/* =========================================================
   4. SURFACES
   ========================================================= */
.c-card { background: var(--panel); border-radius: var(--r-card); padding: var(--s5) var(--s6); }
.c-card--panel { border-radius: var(--r-panel); padding: var(--s7); }
.c-card--rail { border-left: 4px solid var(--them); }           /* "the book on them" */
.c-card--accent { display: grid; grid-template-columns: 6px 1fr; padding: 0; overflow: hidden; }  /* dispatch */
.c-card--accent::before { content: ''; background: var(--act); }
.c-card--accent > * { padding: 22px 26px; }

/* option card (mode / adjustment) — a radio */
.c-option { border: 1.5px solid var(--line); border-radius: var(--r-row); padding: var(--s4); cursor: pointer; display: grid; gap: 6px; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.c-option:hover { border-color: var(--tx-4); }
.c-option[aria-checked="true"] { background: var(--raised); border-color: var(--tx); }
.c-radio { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--tx-4); flex: none; transition: border var(--t-fast) var(--ease); }
.c-option[aria-checked="true"] .c-radio, .c-radio.is-on { border: 5px solid var(--tx); }
.c-row[aria-checked="true"] .c-radio { border: 6px solid var(--act); }

/* tags */
.c-tag { display: inline-block; font: 600 10px/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; padding: 4px 6px; border-radius: var(--r-tag); }
.c-tag--you { background: var(--you); color: var(--bg); }

/* =========================================================
   5. DATA
   ========================================================= */
/* dimension bar: label · value on one line, track below */
.c-dim__head { display: flex; justify-content: space-between; align-items: baseline; }
.c-dim__v { font: 700 22px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.c-dim__track { height: 5px; border-radius: 3px; background: var(--line); margin-top: 6px; position: relative; }
.c-dim__fill { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--tx-3); transition: width var(--t-slow) var(--ease); }
.c-dim--attack .c-dim__fill { background: var(--them); } .c-dim--attack { color: var(--them); }
.c-dim--beats  .c-dim__fill { background: var(--you); }  .c-dim--beats .c-dim__v { color: var(--you); }
/* opponent grade line drawn on top of a player bar */
.c-dim__mark { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--them); }

/* dimension group column (Strengths / Average / Attack here) */
.c-dimgroup { display: grid; gap: 14px; align-content: start; }
.c-dimgroup__head { display: flex; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid var(--line-3); }
.c-dimgroup--attack .c-dimgroup__head { border-color: var(--them); }

/* mirror bar (matchup) */
.c-mirror { display: grid; grid-template-columns: 36px minmax(0,1fr) 120px minmax(0,1fr) 36px; align-items: center; gap: var(--s3); }
.c-mirror__track { height: 6px; background: var(--line); border-radius: 3px; display: flex; }
.c-mirror__track--mine { justify-content: flex-end; }
.c-mirror__fill--mine { background: var(--you); border-radius: 3px; }
.c-mirror__fill--opp { background: var(--them); border-radius: 3px; }
.c-mirror__label { text-align: center; font-size: var(--fs-small); color: var(--tx-2); }

/* cap meter with projected segment */
.c-cap__track { height: 8px; border-radius: 4px; background: var(--line); display: flex; overflow: hidden; }
.c-cap__used { background: var(--tx); transition: width var(--t-slow) var(--ease); }
.c-cap__proj { background: repeating-linear-gradient(-45deg, var(--act) 0 4px, var(--act-deep) 4px 8px); }
.c-cap__proj.is-over { background: repeating-linear-gradient(-45deg, var(--them) 0 4px, #b5574c 4px 8px); }

/* scoreboard */
.c-score { display: flex; align-items: center; justify-content: space-between; }
.c-score__n { font: 700 88px/.85 var(--f-display); font-variant-numeric: tabular-nums; }
.c-score__n--you { color: var(--you); } .c-score__n--them { color: var(--them); }
.c-pips { display: flex; gap: 5px; }
.c-pip { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--tx-4); }
.c-pip--w { background: var(--you); border-color: var(--you); } .c-pip--l { background: var(--them); border-color: var(--them); }

/* box score */
.c-box { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.c-box th { font: 600 11px/1 var(--f-ui); letter-spacing: .1em; color: var(--tx-4); text-align: right; padding: 0 0 8px; border-bottom: 1px solid var(--line); }
.c-box td { text-align: right; padding: 9px 0; border-bottom: 1px solid #1d2026; color: var(--tx-2); }
.c-box th:first-child, .c-box td:first-child { text-align: left; color: var(--tx); font-weight: 500; position: sticky; left: 0; background: var(--bg); }
.c-box td.pts { color: var(--tx); font-weight: 700; } .c-box td.pos { color: var(--you); } .c-box td.neg { color: var(--them); }

/* =========================================================
   6. LIST ROWS
   ========================================================= */
/* selectable player row (draft) */
.c-row { display: grid; grid-template-columns: 28px minmax(0,1fr) 170px 170px 84px; gap: var(--s5); align-items: center; background: var(--panel); border: 1.5px solid var(--line); border-radius: var(--r-row); padding: var(--s4) var(--s5); cursor: pointer; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.c-row:hover { border-color: var(--tx-3); }
.c-row[aria-checked="true"] { border-color: var(--act); background: var(--act-tint); }
.c-row[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.c-row__name { font: 700 26px/1 var(--f-display); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-row__sub { display: flex; gap: var(--s2); align-items: center; margin-top: 6px; font-size: var(--fs-small); color: var(--tx-3); white-space: nowrap; overflow: hidden; }
.c-row__bars { display: contents; }   /* desktop: the two stat cells are direct grid columns; phone: they wrap under the name */
.c-row__sal { text-align: right; font: 700 22px/1 var(--f-display); font-variant-numeric: tabular-nums; }

/* roster slot (your five) */
.c-slot { display: grid; grid-template-columns: 36px minmax(0,1fr); gap: var(--s3); align-items: center; padding: var(--s3); border-radius: var(--r-row); background: var(--panel); border: 1.5px solid var(--panel); }
.c-slot__badge { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 700 16px/1 var(--f-display); background: var(--you); color: var(--bg); }
.c-slot--open { background: transparent; border: 1.5px dashed var(--line-2); cursor: pointer; }
.c-slot--open .c-slot__badge { background: var(--raised); color: var(--tx-3); }
.c-slot--open:hover { border-color: var(--act); }
.c-slot--now { background: var(--act-tint); border-color: var(--act); }
.c-slot--now .c-slot__badge { background: var(--act); }

/* game log row */
.c-game { display: grid; grid-template-columns: 36px 48px minmax(0,1fr) 24px; gap: 10px; align-items: center; padding: 11px 14px; border-radius: 10px; background: var(--panel); border: 1.5px solid var(--panel); cursor: pointer; }
.c-game--w .c-game__wl { color: var(--you); } .c-game--l .c-game__wl { color: var(--them); }
.c-game--next { background: var(--act-tint); border-color: var(--act); animation: bo7-ring 2s infinite; }
.c-game--future { background: transparent; border-color: #1f2228; opacity: .7; cursor: default; }
.c-game__score { font: 700 19px/1 var(--f-display); font-variant-numeric: tabular-nums; }

/* beat card */
.c-beat { background: var(--panel); border-radius: var(--r-row); padding: var(--s4) 18px; border-top: 2px solid var(--tx-4); }
.c-beat--hot { border-color: var(--act); } .c-beat--foul { border-color: var(--them); } .c-beat--glass { border-color: var(--you); }

/* split-flap team tile */
.c-flap { position: relative; width: 176px; height: 120px; border-radius: var(--r-card); background: var(--panel); border: 2px solid var(--line-3); display: grid; place-items: center; box-shadow: 0 0 0 7px var(--bg), 0 0 0 8px var(--line); }
.c-flap::before { content: ''; position: absolute; left: 12px; right: 12px; top: calc(50% - 1px); height: 2px; background: rgba(0,0,0,.6); z-index: 1; }
.c-flap__tile { font: 700 68px/1 var(--f-display); transform-origin: top center; }
.c-flap__tile.is-drop { animation: bo7-flap .1s var(--ease); }
.c-flap.is-landed { border-color: var(--team, var(--act)); box-shadow: 0 0 0 7px var(--bg), 0 0 0 8px var(--line), 0 18px 50px color-mix(in srgb, var(--team, var(--act)) 30%, transparent); }

/* bottom sheet / modal */
.c-scrim { position: fixed; inset: 0; background: rgba(5,6,8,.6); z-index: 20; animation: bo7-fade var(--t) var(--ease) both; }
.c-sheet { position: fixed; z-index: 21; left: 50%; top: 50%; width: min(720px, calc(100vw - 48px)); max-height: calc(100dvh - 48px); overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: var(--s4); transform: translate(-50%,-50%); background: var(--panel); border-radius: var(--r-panel); padding: var(--s8); animation: bo7-pop var(--t-slow) var(--ease) both; }

/* =========================================================
   7. MOTION — guiding, never decorative
   ========================================================= */
@keyframes bo7-pulse { 0% { box-shadow: 0 0 0 0 rgba(240,180,76,.6); } 70% { box-shadow: 0 0 0 10px rgba(240,180,76,0); } 100% { box-shadow: 0 0 0 0 rgba(240,180,76,0); } }
@keyframes bo7-nudge { 0%,60%,100% { transform: translateX(0); } 80% { transform: translateX(5px); } }
@keyframes bo7-ring  { 0%,100% { border-color: rgba(240,180,76,.35); } 50% { border-color: rgba(240,180,76,1); } }
@keyframes bo7-flap  { from { transform: rotateX(-92deg); filter: brightness(1.8); } to { transform: none; filter: none; } }
@keyframes bo7-rise  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes bo7-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes bo7-pop   { from { opacity: 0; transform: translate(-50%,-46%); } to { opacity: 1; transform: translate(-50%,-50%); } }
@keyframes bo7-sheet { from { transform: translateY(100%); } to { transform: none; } }
.is-enter > * { animation: bo7-rise var(--t-slow) var(--ease) both; }
.is-enter > *:nth-child(2) { animation-delay: 40ms; } .is-enter > *:nth-child(3) { animation-delay: 80ms; } .is-enter > *:nth-child(4) { animation-delay: 120ms; }

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

/* =========================================================
   8. RESPONSIVE — 3 layouts, same components
   ≥1100 desktop (as designed) · 768–1099 tablet · <768 phone
   ========================================================= */
@media (min-width: 1600px) { :root { --gutter: var(--s16); } }

@media (min-width: 1100px) and (max-width: 1365px) {           /* small laptops: rails tighten so the decision pane keeps ≥ 560px */
  .c-shell__main--three { grid-template-columns: 260px minmax(0,1fr) 240px; }
  .c-row { grid-template-columns: 24px minmax(0,1fr) 150px 150px 76px; gap: var(--s4); }
}
@media (max-width: 1099px) {
  :root { --gutter: var(--s8); }
  .c-step:not(.is-now) .c-step__label { display: none; }            /* stepper → dots + current label */
  .c-shell__main--three { grid-template-columns: 260px minmax(0,1fr); }
  .c-shell__main--three > .c-pane:last-child { display: none; }      /* "attack these" folds into row grade lines */
  .c-attack--compact { display: block; }                              /* …and a one-card summary appears in the left rail */
  .c-shell__main--cols { grid-template-columns: minmax(0,1fr); }
  .c-shell__main--rail { grid-template-columns: 300px minmax(0,1fr); }
  .c-row { grid-template-columns: 24px minmax(0,1fr) 130px 130px 72px; gap: var(--s4); }
}

@media (max-width: 767px) {
  :root { --gutter: var(--s5); --actionbar-h: auto; --fs-d4: 22px; }
  .c-topbar, .c-stepper { display: none; }                         /* use .c-stepbar */
  .c-shell { display: block; height: auto; min-height: 100dvh; }   /* phone: the DOCUMENT scrolls; chrome is sticky */
  .c-shell__main { overflow: visible; }
  .c-attack--compact { display: none; }
  .c-shell__main { padding: 18px var(--s5) var(--s4); }
  .c-shell__main--three, .c-shell__main--rail, .c-shell__main--cols { display: flex; flex-direction: column; gap: var(--s4); padding: 18px var(--s5) var(--s4); }
  .c-pane { padding: 0; } .c-pane + .c-pane { border: 0; }
  .c-actionbar { grid-template-columns: 1fr; gap: 10px; padding: var(--s3) var(--s5) calc(var(--s3) + env(safe-area-inset-bottom)); }
  .c-coach { font-size: var(--fs-small); }
  .c-btn--primary { width: 100%; min-width: 0; border-radius: var(--r-card); }
  .c-kbd { display: none; }
  .c-row { grid-template-columns: 18px minmax(0,1fr) auto; gap: 10px 10px; padding: 13px 14px; border-radius: var(--r-card); }
  .c-row__bars { grid-column: 2 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .c-row__name { font-size: 22px; }
  .c-flap { width: 96px; height: 68px; } .c-flap__tile { font-size: 38px; }
  .c-score__n { font-size: 52px; }
  .c-sheet { left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: calc(100dvh - 24px); gap: var(--s3); transform: none; border-radius: 22px 22px 0 0; padding: var(--s6) var(--s5) calc(var(--s6) + env(safe-area-inset-bottom)); animation: bo7-sheet var(--t-slow) var(--ease) both; }
  .c-box { font-size: 14px; }
}
@media (max-width: 379px) { :root { --gutter: var(--s4); } .c-row__name { font-size: 20px; } }

/* =========================================================
   9. SCROLLING — the frame stays, the story scrolls
   ========================================================= */
/* Desktop/tablet: exactly one vertical scroller per screen (.c-shell__main or a .c-pane--scroll).
   Phone: the document scrolls; chrome is position:sticky. Never nest same-axis scrollers. */
html { scroll-padding-top: var(--topbar-h); scroll-padding-bottom: var(--actionbar-h); }
/* main.js toggles .is-scrolled (scrollTop > 4) and .is-end (within 8px of the bottom) on the shell */
.c-topbar, .c-stepbar { transition: box-shadow var(--t) var(--ease); }
.c-shell.is-scrolled .c-topbar, .c-shell.is-scrolled .c-stepbar { box-shadow: 0 1px 0 var(--line), 0 10px 24px rgba(0,0,0,.45); }
/* "There's more": a 72px fade pinned to the scroller's foot with the pill that names what is
   below. It is the last item of the scrolled content, sticky at bottom 0 (above the action
   bar on phones), and overlaps the content above it by its own height. Both fade out at the end. */
.c-morebar { position: sticky; bottom: 0; z-index: 2; height: 72px; margin-top: -72px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: var(--s4); pointer-events: none; background: linear-gradient(to bottom, transparent, var(--bg)); transition: opacity var(--t) var(--ease); }
.c-more { -webkit-appearance: none; appearance: none; pointer-events: auto; display: flex; gap: var(--s2); align-items: center; white-space: nowrap; background: var(--raised); border: 1px solid var(--line-3); border-radius: var(--r-pill); padding: var(--s2) 14px; font: inherit; font-size: var(--fs-small); color: var(--tx); cursor: pointer; }
.c-more:hover { border-color: var(--tx-3); }
.c-more__arrow { display: inline-block; animation: bo7-bob 1.6s infinite; }
.c-shell.is-end .c-morebar { opacity: 0; }
/* On the two-column screens the bar and the end mark close the main (left) column. A sticky
   box stops at its scroller's content edge, so a scroller that ends in the bar trades its
   bottom padding for the end mark's margin (the bar then sits on the visible bottom edge). */
.c-shell__main--cols > .c-morebar, .c-shell__main--cols > .c-endmark { grid-column: 1; }
.c-shell__main--cols:has(> .c-morebar) { padding-bottom: 0; }
.c-shell__main--cols > .c-endmark { margin-bottom: var(--s8); }
.c-shell.is-end .c-more { pointer-events: none; }
/* Sticky section / table headers inside a scroller. At rest (scroller at the top) the head
   is see-through, so the Draft flap's landing glow above it is not cut off. */
.c-stickyhead { position: sticky; top: 0; z-index: 1; background: var(--bg); padding: 14px 0 10px; border-bottom: 1px solid var(--line-3); }
.c-shell:not(.is-scrolled) .c-stickyhead { background: transparent; }
.c-stickyhead--you { border-color: var(--you); } .c-stickyhead--them { border-color: var(--them); }
.c-endmark { display: flex; align-items: center; gap: 14px; color: var(--tx-4); font-size: var(--fs-small); white-space: nowrap; }
.c-endmark::before, .c-endmark::after { content: ''; flex: 1; height: 1px; background: var(--line); }
/* Phone large-title collapse: once the screen's .t-display scrolls under the step bar (main.js,
   IntersectionObserver), the compact title takes the step row's place. It cross-fades in the
   same box, so the sticky bar never changes height (no content jump, no observer loop). */
.c-stepbar__row { position: relative; }
.c-stepbar__now, .c-stepbar__ctx { transition: opacity var(--t) var(--ease); }
.c-stepbar__title { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 700 16px/1.2 var(--f-display); letter-spacing: .05em; text-transform: uppercase; opacity: 0; pointer-events: none; transition: opacity var(--t) var(--ease); }
.c-stepbar.is-collapsed .c-stepbar__now, .c-stepbar.is-collapsed .c-stepbar__ctx { opacity: 0; }
.c-stepbar.is-collapsed .c-stepbar__title { opacity: 1; }
/* Horizontal table scroller (phone box scores) */
.c-hscroll { position: relative; }
.c-hscroll__body { overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: var(--s2); -webkit-overflow-scrolling: touch; }
.c-hscroll__body td:first-child, .c-hscroll__body th:first-child { position: sticky; left: 0; background: var(--panel); z-index: 1; }
.c-hscroll.is-scrolled th:first-child, .c-hscroll.is-scrolled td:first-child { box-shadow: 6px 0 8px -4px rgba(0,0,0,.6); }
.c-hscroll::after { content: ''; position: absolute; top: 0; right: 0; bottom: var(--s2); width: 44px; pointer-events: none; background: linear-gradient(to right, transparent, var(--panel)); transition: opacity var(--t) var(--ease); }
.c-hscroll.is-end::after { opacity: 0; }
/* "Swipe for more →": only while the table overflows and until the first swipe this session */
.c-hscroll__hint { display: none; justify-content: flex-end; margin-bottom: var(--s2); font-size: var(--fs-label); color: var(--act); white-space: nowrap; }
.c-hscroll.has-hint .c-hscroll__hint { display: flex; }
/* Tooltip (hover with a mouse, long-press 400ms on touch) */
.c-tip { position: absolute; z-index: 30; background: var(--tx); color: var(--bg); border-radius: var(--r-chip); padding: 8px 10px; font-size: 12px; line-height: 1.35; white-space: nowrap; box-shadow: 0 8px 24px rgba(0,0,0,.5); pointer-events: none; animation: bo7-fade var(--t-fast) var(--ease) both; }
.c-tip::after { content: ''; position: absolute; left: var(--tip-arrow, 16px); bottom: 100%; border: 6px solid transparent; border-bottom-color: var(--tx); }
.c-tip--above::after { bottom: auto; top: 100%; border-bottom-color: transparent; border-top-color: var(--tx); }
@media (max-width: 767px) { .c-tip { max-width: calc(100vw - 32px); white-space: normal; } }
@keyframes bo7-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
/* Visually hidden, still read (side names on mirror rows, the coach live region) */
.u-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body > .u-sr { position: fixed; top: 0; left: 0; }   /* the coach live region: out of flow, so it cannot add a scrollable pixel under the frame */

/* Short screens: chrome steps down one size, summaries stay, lists scroll */
@media (min-width: 768px) and (max-height: 759px) {
  :root { --topbar-h: 56px; --actionbar-h: 76px; --cta-h: 52px; --fs-d1: clamp(40px, 4vw, 56px); --fs-d2: clamp(24px, 2.4vw, 34px); }
  .c-btn--primary { min-width: 260px; font-size: 21px; }
  .c-flap { width: 132px; height: 90px; } .c-flap__tile { font-size: 52px; }
  .c-slot { padding: 9px 10px; } .c-row { padding: 12px var(--s4); } .c-row__name { font-size: 22px; }
}
/* Wide: cap the grid, keep chrome full-bleed */
@media (min-width: 1600px) {
  .c-shell__main, .c-actionbar { padding-left: max(var(--gutter), calc((100vw - 1600px) / 2)); padding-right: max(var(--gutter), calc((100vw - 1600px) / 2)); }
  .c-shell__main--three { grid-template-columns: 320px minmax(0, 960px) 300px; justify-content: center; }
}

/* =========================================================
   10. SCROLL OWNERSHIP (desktop/tablet) — rails fit, one pane scrolls
   Draft (--three) and Series (--rail): main itself does not scroll; the
   decision pane does (.c-pane--scroll). Rails are sized to fit and never scroll.
   ========================================================= */
@media (min-width: 768px) {
  .c-shell__main--three, .c-shell__main--rail { overflow: hidden; }
  .c-shell__main--three > .c-pane, .c-shell__main--rail > .c-pane { min-height: 0; }
  .c-pane--scroll { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; position: relative; }
}
/* Phone: the document scrolls (see §8). Re-assert after the rules above. */
@media (max-width: 767px) {
  :root { --topbar-h: var(--stepbar-h, calc(64px + env(safe-area-inset-top))); }   /* the sticky .c-stepbar's height (main.js measures it), used by scroll-padding */
  .c-stickyhead { top: var(--topbar-h); }
  .c-morebar { bottom: var(--bar-h, 0px); }
  .c-more { min-height: var(--tap); }
  .c-shell__main--three, .c-shell__main--rail, .c-pane--scroll { overflow: visible; }
  /* Player row: line 1 = radio · name · salary; line 2 = the two grade bars */
  .c-row > .c-radio { grid-row: 1; grid-column: 1; }
  .c-row__sal { grid-row: 1; grid-column: 3; }
  .c-row__bars { grid-row: 2; }
  .t-display--inline { font-size: 32px; line-height: .95; }   /* a display title sharing a row (Draft team name beside the flap) */
}
@media (max-width: 379px) { .t-display--inline { font-size: 28px; } }

/* Copy that has a long and a short form (e.g. "Small forward" / "SF"). Prefer this to letting a label wrap. */
.u-short { display: none; }
@media (max-width: 767px) { .u-long { display: none; } .u-short { display: inline; } }
.c-spinrow { display: flex; align-items: center; gap: var(--s6); }
@media (max-width: 767px) {
  .c-spinrow { gap: 14px; }
  .c-btn--respin { min-width: 56px; padding: 6px 10px; }
  .u-short.c-meta { display: block; }
}

/* ===== additions (classes the designs render inline; tokens only) ===== */
/* Draft: grade-column labels under "Pick one to sign" (the designs draw them inline on the
   row grid). Same columns and inset as .c-row; ≤1099 the rows carry their own labels. */
.c-colhead { display: grid; grid-template-columns: 28px minmax(0,1fr) 170px 170px 84px; gap: var(--s5); align-items: end; padding: var(--s3) calc(var(--s5) + 1.5px) 0; font: 600 var(--fs-micro)/1.3 var(--f-ui); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--tx-4); }
@media (min-width: 1100px) and (max-width: 1365px) { .c-colhead { grid-template-columns: 24px minmax(0,1fr) 150px 150px 76px; gap: var(--s4); } }
@media (min-width: 768px) and (max-height: 759px) { .c-colhead { padding-inline: calc(var(--s4) + 1.5px); } }
@media (max-width: 1099px) { .c-colhead { display: none; } }
.c-rows { display: grid; gap: var(--s2); margin-top: var(--s3); }
.u-nowrap { white-space: nowrap; }
.c-five__note { margin-top: auto; padding-top: var(--s4); line-height: 1.5; }
.c-book__avoid { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--line); }
/* Draft cap meter in the action bar: the coach reads first, the meter sits beside it
   (desktop); ≤1099 the meter takes the row and the coach stays only for screen readers. */
.c-cap { flex: 0 1 340px; min-width: 0; order: 1; }
.c-cap__head { display: flex; justify-content: space-between; gap: var(--s3); font-size: var(--fs-small); color: var(--tx-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.c-cap__head b { color: var(--tx); font-weight: 600; }
.c-cap .c-cap__track { margin-top: var(--s2); }
.c-cap__meta { margin-top: 6px; font-size: var(--fs-label); color: var(--tx-4); }
.c-actionbar__aside:has(.c-cap) .c-coach { flex: 1 1 auto; min-width: 0; }
@media (max-width: 1099px) {
  .c-cap { flex: 1 1 auto; }
  .c-actionbar__aside:has(.c-cap) .c-coach { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* Draft "Your five": a stacked list on desktop/tablet; on phones a five-up strip
   (badge + one-word status) so the landed team and its rows stay near the fold. */
.c-slots { display: grid; gap: var(--s2); margin-top: var(--s3); }
@media (max-width: 767px) {
  .c-slots { grid-template-columns: repeat(5, minmax(0,1fr)); gap: 6px; }
  .c-slots .c-slot { grid-template-columns: minmax(0,1fr); justify-items: center; gap: 2px; padding: var(--s2) var(--s1); min-height: var(--tap); }
  .c-slots .c-slot__badge, .c-slots .c-slot--open .c-slot__badge, .c-slots .c-slot--now .c-slot__badge { width: auto; height: auto; background: none; color: var(--tx); }
  .c-slots .c-slot--now .c-slot__badge { color: var(--act); }
  .c-five__note { display: none; }
}
/* Draft row: the archetype line ellipsizes (it is a tag list, not a sentence). */
.c-row__role { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Narrow tablets (768–959): the decision pane is too narrow for one-line rows (the name
   column collapsed to a few px), so rows take the phone layout: radio · name · salary,
   then the two grade bars; the landed label takes its short form. */
@media (min-width: 768px) and (max-width: 959px) {
  .c-row { grid-template-columns: 24px minmax(0,1fr) auto; gap: 10px var(--s3); }
  .c-row > .c-radio { grid-row: 1; grid-column: 1; }
  .c-row__sal { grid-row: 1; grid-column: 3; }
  .c-row__bars { grid-row: 2; grid-column: 2 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
  .c-landed__long { display: none; }
  .c-landed__short { display: block; }
}
/* Draft fix round: the grade column head is two deliberate lines (dimension, then
   "they're N"); with the name in the head, ≥1100 rows drop their duplicate label.
   Open slots that wait for this pick do not invite a click. */
.c-colhead__mark > span { display: block; white-space: nowrap; }
@media (min-width: 1100px) { .c-row .c-dim__name { display: none; } }
.c-slot--wait { cursor: default; }
.c-slot--wait:hover { border-color: var(--line-2); }
/* Action bar: a quiet hint ("or press Space") beside the primary, as one grid cell. */
.c-actionbar__go { display: flex; align-items: center; gap: var(--s4); }
@media (max-width: 767px) { .c-actionbar__go > .c-btn--primary { flex: 1 1 auto; } }

/* Matchup: mirror rows, legend, readiness card, your-five list. */
.c-mirrors { display: grid; gap: 14px; margin-top: var(--s7); max-width: 760px; }
.c-mirror__v { font: 700 var(--fs-d4)/1 var(--f-display); font-variant-numeric: tabular-nums; color: var(--tx-3); }
.c-mirror__v--opp { text-align: right; }
.c-mirror__v--you { color: var(--you); } .c-mirror__v--them { color: var(--them); }
.c-mirror__fill--dim { background: var(--line-2); border-radius: 3px; }
.c-mirror--target .c-mirror__label { color: var(--tx); font-weight: 600; }
.c-mirror--legend .c-label--you { text-align: right; }
@media (max-width: 767px) {
  /* Phone: the label rides above its two bars, values at the ends. */
  .c-mirror { grid-template-columns: 28px minmax(0,1fr) minmax(0,1fr) 28px; row-gap: var(--s1); column-gap: var(--s2); }
  .c-mirror > :nth-child(1) { grid-row: 1 / 3; grid-column: 1; }
  .c-mirror > :nth-child(2) { grid-row: 2; grid-column: 2; }
  .c-mirror > :nth-child(3) { grid-row: 1; grid-column: 2 / 4; }
  .c-mirror > :nth-child(4) { grid-row: 2; grid-column: 3; }
  .c-mirror > :nth-child(5) { grid-row: 1 / 3; grid-column: 4; }
  .c-mirror--legend > :nth-child(2) { grid-column: 1 / 3; grid-row: 1; text-align: left; }
  .c-mirror--legend > :nth-child(4) { grid-column: 3 / 5; grid-row: 1; text-align: right; }
  .c-mirror__v { font-size: 20px; }
}
.c-matchup__aside { display: grid; gap: var(--s4); align-content: start; }
.c-readiness__head { display: flex; align-items: baseline; gap: var(--s3); margin-top: var(--s2); }
.c-readiness__n { font: 700 56px/.9 var(--f-display); font-variant-numeric: tabular-nums; }
.c-readiness__band { font: 700 var(--fs-d4)/1 var(--f-display); text-transform: uppercase; color: var(--you); }
.c-readiness__band--mid { color: var(--tx-2); } .c-readiness__band--low { color: var(--them); }
.c-readiness__track { height: 5px; border-radius: 3px; background: var(--line); margin-top: var(--s4); display: flex; }
.c-readiness__fill { background: var(--you); border-radius: 3px; }
.c-readiness__ends { display: flex; justify-content: space-between; gap: var(--s3); margin-top: 6px; font-size: var(--fs-micro); color: var(--tx-4); white-space: nowrap; }
.c-readiness__note { margin-top: var(--s4); color: var(--tx-2); }
.c-fivelist { padding: var(--s1) var(--s5); }
.c-fivelist__row { display: grid; grid-template-columns: 32px minmax(0,1fr) auto; gap: var(--s3); align-items: center; padding: var(--s3) 0; }
.c-fivelist__row + .c-fivelist__row { border-top: 1px solid var(--line); }
.c-fivelist__slot { font: 600 var(--fs-micro)/1 var(--f-ui); letter-spacing: var(--ls-label); color: var(--you); }
.c-fivelist__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-fivelist__sal { font: 700 17px/1 var(--f-display); font-variant-numeric: tabular-nums; }

/* Series rail: scoreboard card and seven game rows (they always fit; see the short tier). */
.c-rail { display: flex; flex-direction: column; gap: var(--s5); }
.c-scorecard { padding: var(--s5) 22px; }
.c-score__them { text-align: right; min-width: 0; }
.c-score__them .c-label { max-width: 128px; margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-scorecard__meta { margin-top: var(--s3); text-align: center; color: var(--tx-2); }
.c-games { display: grid; gap: 6px; }
.c-game { color: var(--tx); }
.c-game__n { font: 700 17px/1 var(--f-display); color: var(--tx-3); }
.c-game__venue { font-size: var(--fs-label); color: var(--tx-3); }
.c-game__wl { font: 700 17px/1 var(--f-display); text-align: right; }
.c-game__up { font: 700 17px/1 var(--f-display); text-transform: uppercase; color: var(--tx-4); white-space: nowrap; }
.c-game--next .c-game__n, .c-game--next .c-game__up, .c-game--next .c-game__wl { color: var(--act); }
.c-game--next { cursor: default; }
.c-game--w:hover, .c-game--l:hover { border-color: var(--line-3); }
.c-game[aria-pressed="true"] { background: var(--raised); border-color: var(--tx-3); }
.c-game__chip { display: none; }
.c-games__hint { text-align: center; }
@media (min-width: 768px) and (max-height: 759px) {
  .c-rail { gap: var(--s3); padding-block: var(--s5); }
  .c-score__n { font-size: 64px; }
  .c-scorecard { padding: 14px 18px; }
  .c-scorecard__meta { margin-top: var(--s2); }
  .c-game { padding: var(--s2) 14px; }
}
@media (max-width: 767px) {
  /* Phone: the seven games become a chip strip (number + margin), tap for the box. */
  .c-rail { gap: var(--s3); }
  .c-games { grid-template-columns: repeat(7, minmax(0,1fr)); gap: 2px; }
  .c-game { grid-template-columns: minmax(0,1fr); justify-items: center; gap: 2px; padding: 6px 0; min-height: var(--tap); }
  .c-game__venue, .c-game__score, .c-game__wl, .c-game__up, .c-game > span:empty:not(.c-game__chip) { display: none; }
  .c-game__n { font: 500 var(--fs-micro)/1 var(--f-ui); }
  .c-game__chip { display: block; font: 700 15px/1 var(--f-display); text-transform: uppercase; min-height: 15px; }
  .c-game--w .c-game__chip { color: var(--you); } .c-game--l .c-game__chip { color: var(--them); }
  .c-game--next .c-game__chip { color: var(--act); }
}
@media (max-width: 379px) { .c-games { margin-inline: -6px; } }

/* Series main pane: the frame stays, the report scrolls (inner .c-pane--scroll). */
.c-series { padding: 0; }
.c-series__body { display: flex; flex-direction: column; gap: var(--s7); padding: var(--s7) var(--s10) 0; }
.c-series__body > :last-child { margin-bottom: var(--s12); }   /* in place of bottom padding: the sticky more bar reaches the edge */
@media (min-width: 768px) {
  .c-shell__main--rail > .c-series { position: relative; min-height: 0; }
  .c-series > .c-pane--scroll { position: absolute; inset: 0; }
}
@media (max-width: 1099px) { .c-series__body { padding: var(--s6) var(--s8) 0; } .c-series__body > :last-child { margin-bottom: var(--s10); } }
@media (max-width: 767px) { .c-series__body { padding: 0; gap: var(--s5); } .c-series__body > :last-child { margin-bottom: 0; } }
/* The dispatch runs two or three sentences (longer than the artboard sample): a step down from d2, wider measure. */
.c-series__headline { margin-top: 10px; max-width: 30ch; font-size: clamp(26px, 2.4vw, 36px); }
.c-beats { display: grid; gap: var(--s3); grid-template-columns: minmax(0,1fr); }
@media (min-width: 768px) { .c-beats--n2, .c-beats--n4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1100px) { .c-beats--n3 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.c-beat__label { font: 600 var(--fs-micro)/1.2 var(--f-ui); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--tx-3); }
.c-beat--hot .c-beat__label { color: var(--act); } .c-beat--foul .c-beat__label { color: var(--them); } .c-beat--glass .c-beat__label { color: var(--you); }
.c-beat__text { margin-top: var(--s2); line-height: 1.45; }
.c-series__seg .c-seg { width: max-content; max-width: 100%; background: var(--panel); }
.c-series__seg .c-seg__opt { padding: 10px var(--s4); }
@media (max-width: 767px) { .c-series__seg .c-seg { width: auto; } }
.c-boxhead { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); margin-top: var(--s3); white-space: nowrap; }
/* Box table: a 140px name column, then numeric columns that never squeeze below a tap's width. */
.c-box td:first-child, .c-box th:first-child { min-width: 140px; padding-right: var(--s3); white-space: nowrap; }
.c-box th:not(:first-child), .c-box td:not(:first-child) { min-width: 44px; padding-left: var(--s3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.c-box th { padding-top: var(--s3); text-transform: uppercase; }
.c-box tbody th { font: inherit; font-weight: 500; letter-spacing: normal; text-transform: none; color: var(--tx); text-align: left; padding: 9px var(--s3) 9px 0; border-bottom: 1px solid #1d2026; }
.c-hscroll--bg .c-hscroll__body td:first-child, .c-hscroll--bg .c-hscroll__body th:first-child { background: var(--bg); }
.c-hscroll--bg::after { background: linear-gradient(to right, transparent, var(--bg)); }
/* Scout: title + meta on one baseline, the book, three dimension groups, notes; the side
   column holds their five (a <details> fold on phones) and the numbered game plan. */
.c-scout { display: flex; flex-direction: column; gap: var(--s7); min-width: 0; }
.c-scout__title { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s5); row-gap: var(--s2); margin-top: var(--s2); }
.c-scout__title .t-display { min-width: 0; overflow-wrap: anywhere; }
.c-scout__sub { font-size: var(--fs-body); color: var(--tx-3); white-space: nowrap; }
.c-scout__blurb { margin-top: var(--s2); max-width: 46ch; font-size: clamp(24px, 2.4vw, 34px); }
.c-scout__groups { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s8); }
.c-dimgroup__hint { font-size: var(--fs-label); color: var(--tx-4); }
.c-dimgroup--average .c-dimgroup__head { border-color: var(--line); }
.c-dimgroup--average .c-dim { color: var(--tx-2); }
.c-dimgroup--average .c-dim__fill { background: var(--tx-4); }
.c-dimgroup .c-dim__head { gap: var(--s3); }
.c-dimgroup__sealed { padding-top: var(--s1); }
.c-scoutnote .c-body { margin-top: var(--s2); }
.c-scout__aside { display: flex; flex-direction: column; gap: var(--s6); min-width: 0; }
.c-oppfive { padding: 0; overflow: hidden; margin-top: 10px; }
.c-oppfive__row { display: grid; grid-template-columns: 32px minmax(0,1fr) auto; gap: var(--s3); align-items: center; padding: 13px var(--s4); }
.c-oppfive__row + .c-oppfive__row { border-top: 1px solid var(--raised); }
.c-oppfive__slot { font: 700 15px/1 var(--f-display); color: var(--tx-3); }
.c-oppfive__who { min-width: 0; }
.c-oppfive__name { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-oppfive__role { display: block; margin-top: 2px; font-size: var(--fs-label); color: var(--tx-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-oppfive__sal { font: 700 17px/1 var(--f-display); color: var(--tx-2); font-variant-numeric: tabular-nums; }
.c-oppfive__fold { display: none; }
.c-oppfive__summary { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); min-height: var(--tap); padding: var(--s3) 14px; background: var(--panel); border-radius: var(--r-row); cursor: pointer; list-style: none; font-size: 14px; }
.c-oppfive__summary::-webkit-details-marker { display: none; }
.c-oppfive__peek { min-width: 0; font-size: var(--fs-small); color: var(--tx-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-oppfive__fold[open] .c-oppfive__summary { border-radius: var(--r-row) var(--r-row) 0 0; }
.c-oppfive__fold .c-oppfive { margin-top: 0; border-radius: 0 0 var(--r-row) var(--r-row); border-top: 1px solid var(--raised); }
.c-plan { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: var(--s3); counter-reset: plan; }
.c-plan > li { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 10px; line-height: 1.5; counter-increment: plan; }
.c-plan > li::before { content: counter(plan); width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--them); color: var(--them); display: grid; place-items: center; font: 700 12px/1 var(--f-ui); }
/* Injury report (D13): coral-rail accent card, first in the Scout main column. */
.c-injury::before { background: var(--them); }
.c-injury--dinged::before { background: var(--act); }
.c-injury__rows { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: var(--s2); }
.c-injury__row { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s3); row-gap: 2px; }
.c-injury__tag { font: 600 var(--fs-label)/1.2 var(--f-ui); letter-spacing: var(--ls-label); text-transform: uppercase; }
.c-injury__row--out .c-injury__tag { color: var(--them); }
.c-injury__row--dinged .c-injury__tag { color: var(--act); }
.c-injury__name { font-weight: 600; }
.c-injury__note { color: var(--tx-2); }
@media (max-width: 1099px) { .c-scout__aside { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s8); align-items: start; } }
@media (max-width: 767px) {
  .c-scout { gap: var(--s5); }
  .c-scout__title { flex-direction: column; align-items: flex-start; row-gap: 6px; margin-top: 6px; }
  .c-scout__sub { font-size: var(--fs-small); }
  .c-scout__groups { grid-template-columns: minmax(0,1fr); gap: var(--s5); }
  .c-dimgroup--attack { order: -1; }
  .c-scout__aside { display: flex; gap: var(--s5); align-items: stretch; }
  .c-oppfive__full { display: none; }
  .c-oppfive__fold { display: block; }
}
/* Top-bar context: a Daily squad label ("vs Gilgeous-Alexander’s Five · Round 1") ellipsizes inside its column. */
.c-topbar { column-gap: var(--s4); }
.c-topbar__ctx { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* Home (Task 8): the top bar carries the brand and a quiet Rules link (no stepper); on phones
   the step bar reads "Best of Seven" with the Rules button in its context slot. */
.c-topbar__links { grid-column: 2 / 4; justify-self: end; display: flex; align-items: center; gap: var(--s4); }
.c-topbar__links + .c-topbar__ctx:empty { display: none; }
.c-stepbar__ctx .c-btn--quiet { margin-right: calc(var(--s2) * -1); }
/* Home hero (left column): eyebrow, wordmark, lede, then the two mode cards. */
.c-hero { display: flex; flex-direction: column; min-width: 0; }
.c-hero__eyebrow { display: flex; align-items: center; gap: 10px; }
.c-hero__eyebrow::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--you); flex: none; }
.c-hero__title { margin-top: var(--s6); }
.c-hero__lede { margin-top: var(--s6); font-size: 21px; line-height: 1.45; color: var(--tx-2); max-width: 34ch; }
.c-option__head { display: flex; align-items: center; gap: var(--s2); }
.c-option__head .c-radio { order: 2; margin-left: auto; }
.c-option__title { font: 700 24px/1 var(--f-display); text-transform: uppercase; color: var(--tx-2); }
.c-option[aria-checked="true"] .c-option__title { color: var(--tx); }
.c-option__sub { font-size: var(--fs-small); color: var(--tx-3); }
.c-option[aria-checked="true"] .c-option__sub { color: var(--tx-2); }
/* Home mode cards: title left; the mint Selected tag (checked card only), then the radio, right. */
.c-modes { display: grid; gap: 10px; margin-top: var(--s7); max-width: 560px; }
.c-modes__label { margin-bottom: 2px; }
.c-modes .c-option { gap: 0; padding: var(--s4) 18px; }
.c-modes .c-option__head .c-radio { margin-left: 0; }
.c-modes .c-option__title { font-size: 22px; letter-spacing: .01em; }
.c-option__sel { order: 1; margin-left: auto; visibility: hidden; }
.c-option[aria-checked="true"] .c-option__sel { visibility: visible; }
.c-option__desc { font-size: 14px; line-height: 1.45; color: var(--tx-2); margin-top: 6px; }
.c-option__facts { font-size: 12px; color: var(--tx-3); margin-top: 8px; letter-spacing: .02em; }
/* Home bracket (aside): header, the sixteen-team drawing (tall in the aside, wide in one column), caption.
   Records are mint: the best-run path, "Your best", the won trophy and its titles line. */
.c-shell__main--home { grid-template-columns: minmax(0,1fr) 520px; column-gap: var(--s16); padding-bottom: var(--s4); }   /* 16, not 20: leaves a few px of slack at 1440×900 so font metrics never add a 1px scroll */
.c-bracket { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.c-bracket__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.c-bracket__head .c-label { color: var(--tx-2); }
.c-bracket__svg { width: 100%; display: block; }
.c-bracket__svg--tall { flex: 0 1 auto; min-height: 0; max-height: 520px; }
.c-bracket__svg--wide { display: none; height: 200px; }
.c-bracket__svg line, .c-bracket__svg path { fill: none; stroke: var(--line-2); stroke-width: 1.5; }
.c-bracket__svg .c-bracket__best { stroke: var(--you); stroke-width: 2.5; }
.c-bracket__svg text { font: 600 11px var(--f-ui); fill: var(--tx-3); letter-spacing: .06em; text-transform: uppercase; }
.c-bracket__svg--wide text { font-size: 10px; letter-spacing: .04em; }
.c-bracket__svg .c-bracket__round { fill: var(--tx-4); }
.c-bracket__svg .c-bracket__best-label, .c-bracket__svg .c-bracket__titles { fill: var(--you); }
.c-bracket__svg .c-bracket__trophy { fill: var(--line-3); stroke: none; }
.c-bracket__svg .c-bracket__trophy.is-won { fill: var(--you); }
.c-bracket__caption { margin-top: 12px; max-width: 48ch; }
/* Home breakpoints (the base --cols collapses at ≤1099; the home keeps two columns down to 1000). */
@media (min-width: 1000px) and (max-width: 1365px) {
  .c-shell__main--home { grid-template-columns: minmax(0,1fr) 400px; column-gap: var(--s12); padding-top: var(--s8); }
  .c-hero__title { margin-top: var(--s4); }
  .c-hero__lede { margin-top: var(--s5); }
  .c-modes { max-width: none; margin-top: var(--s5); gap: var(--s2); }
  .c-modes .c-option { padding: var(--s3) var(--s4); }
  .c-modes .c-option__title { font-size: 20px; }
  .c-option__desc { font-size: 13px; margin-top: var(--s1); }
  .c-option__facts { margin-top: 6px; }
  .c-bracket__svg--tall text:not(.c-bracket__round) { font-size: 13px; }   /* ~9px on the 400 rail; round names keep 11 so they do not touch */
}
@media (min-width: 768px) and (max-height: 759px) {
  :root { --fs-hero: clamp(72px, 8.6vw, 104px); }
  .c-shell__main--home { padding-top: var(--s5); padding-bottom: var(--s5); }
  .c-hero__title { margin-top: 14px; }
  .c-hero__lede { margin-top: 14px; font-size: 17px; }
  .c-modes { margin-top: var(--s5); gap: var(--s2); }
  .c-modes .c-option { padding: var(--s3) var(--s4); }
  .c-modes .c-option__title { font-size: 20px; }
  .c-option__desc { font-size: 13px; margin-top: var(--s1); }
  .c-option__facts { margin-top: 6px; }
  .c-bracket__svg--tall { max-height: 440px; }
  .c-bracket__caption { margin-top: var(--s2); }
}
@media (max-width: 999px) {
  .c-shell__main--home { grid-template-columns: minmax(0,1fr); align-content: start; row-gap: var(--s6); }
  .c-modes { max-width: none; }
  .c-bracket { justify-content: flex-start; }
  .c-bracket__svg--tall { display: none; }
  .c-bracket__svg--wide { display: block; }
}
@media (max-width: 767px) {
  :root { --fs-hero: clamp(64px, 19vw, 84px); }
  .c-shell__main--home { gap: 0; padding-inline: var(--gutter); padding-bottom: var(--s5); }
  .c-hero__title { margin-top: var(--s3); }
  .c-hero__lede { margin-top: 14px; font-size: var(--fs-body); }
  .c-modes { margin-top: 18px; gap: var(--s2); }
  .c-modes .c-option { padding: var(--s3) 14px; }
  .c-modes .c-option__title { font-size: 20px; }
  .c-option__desc { font-size: 13px; margin-top: var(--s1); }
  .c-option__facts { margin-top: 6px; }
  .c-shell__main--home > .c-bracket { margin-top: var(--s6); }
  .c-bracket__caption { margin-top: var(--s2); }
  .c-bracket__meta { display: none; }
  .c-bracket__head .c-label { white-space: nowrap; }
}
@media (max-width: 379px) {
  :root { --fs-hero: 64px; }
  .c-hero__lede { font-size: 15px; margin-top: var(--s3); }
  .c-modes { margin-top: 14px; }
  .c-option__desc { font-size: 12.5px; }
  .c-option__facts { display: none; }
  .c-shell__main--home > .c-bracket { margin-top: var(--s5); }
}
/* Road to a title: the run intro's rungs (number · round + sub · opponent). The current round is amber. */
.c-ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.c-ladder__rung { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; gap: var(--s4); align-items: center; padding: 18px var(--s5); border-radius: var(--r-card); background: var(--panel); border: 1.5px solid var(--panel); }
.c-ladder__rung.is-now { background: var(--act-tint); border-color: var(--act); }
.c-ladder__n { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font: 700 20px/1 var(--f-display); background: var(--raised); color: var(--tx-3); }
.c-ladder__rung.is-now > .c-ladder__n { background: var(--act); color: var(--bg); }
.c-ladder__rung.is-goal > .c-ladder__n { color: var(--act); }
.c-ladder__text { min-width: 0; display: grid; gap: 2px; }
.c-ladder__round { font: 700 24px/1 var(--f-display); text-transform: uppercase; color: var(--tx-2); }
.c-ladder__rung.is-now .c-ladder__round { color: var(--tx); }
.c-ladder__sub { font-size: 14px; color: var(--tx-3); }
.c-ladder__opp { font: 700 22px/1 var(--f-display); color: var(--tx-4); max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-ladder__rung.is-now > .c-ladder__opp { color: var(--them); }
/* Run intro: the seed (display), its city and conference, three run-rule tiles at the foot. */
.c-intro { display: flex; flex-direction: column; min-width: 0; }
.c-intro__eyebrow { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); }
.c-intro__title { margin-top: var(--s4); font-size: clamp(64px, 9.4vw, 136px); line-height: .82; }
.c-intro__meta { margin-top: var(--s5); font: 600 28px/1.1 var(--f-display); text-transform: uppercase; letter-spacing: .02em; color: var(--tx-2); }
.c-intro__aside { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.c-tiles { margin-top: auto; padding-top: var(--s10); display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s3); }
.c-tile { background: var(--panel); border-radius: var(--r-card); padding: 18px var(--s5); min-width: 0; }
.c-tile__k { font: 700 22px/1.05 var(--f-display); text-transform: uppercase; }
.c-tile__t { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--tx-2); }
/* Rules sheet (D21): while it is open the shell's action bar hides, so "Got it" is the one
   visible primary. The sheet scrolls inside itself if a short screen cannot hold it. */
.c-shell.has-sheet > .c-actionbar { visibility: hidden; }
@media (max-width: 767px) { html:has(.c-shell.has-sheet) { overflow: hidden; } }   /* the page behind the phone sheet stays put */
.c-sheet:focus { outline: none; }
.c-sheet__grab { display: none; }
.c-sheet__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s4); }
.c-sheet__title { margin-top: var(--s2); font: 700 44px/.9 var(--f-display); text-transform: uppercase; }
.c-sheet__close { -webkit-appearance: none; appearance: none; background: none; font: inherit; width: var(--tap); height: var(--tap); flex: none; border-radius: 50%; border: 1.5px solid var(--line-3); color: var(--tx-3); display: grid; place-items: center; cursor: pointer; }
.c-sheet__close:hover { color: var(--tx); border-color: var(--tx-3); }
.c-sheet > .c-btn--primary { width: 100%; min-width: 0; flex: none; }
.c-rules__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.c-rules__row { display: grid; grid-template-columns: 40px minmax(0,1fr); gap: var(--s4); padding: 10px 0; border-top: 1px solid var(--line); }
.c-rules__n { font: 700 32px/1 var(--f-display); color: var(--act); }
.c-rules__k { font: 700 22px/1.1 var(--f-display); text-transform: uppercase; }
.c-rules__t { margin-top: 2px; color: var(--tx-2); }
.c-rules__ways { display: grid; gap: 10px; }
.c-rules__waysrow { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.c-rules__way { background: var(--bg); border-radius: var(--r-row); padding: var(--s4); }
.c-rules__way .c-rules__k { font-size: 20px; }
.c-rules__way .c-rules__t { margin-top: var(--s1); font-size: 14px; }
@media (max-width: 767px) {
  .c-option__title { font-size: 20px; }
  .c-intro__title { font-size: clamp(56px, 18vw, 72px); }
  .c-intro__meta { font-size: 20px; }
  /* Phone: the road to a title follows the seed; the run-rule tiles drop below it. */
  .c-intro { display: contents; }
  .c-intro__title { margin-top: 0; }
  .c-intro__meta { margin-top: 0; }
  .c-tiles { order: 1; padding-top: 0; grid-template-columns: minmax(0,1fr); gap: var(--s2); }
  .c-tile { padding: 14px var(--s4); }
  .c-ladder { gap: 6px; }
  .c-ladder__rung { grid-template-columns: 32px minmax(0,1fr) auto; gap: var(--s3); padding: 11px 14px; border-radius: var(--r-row); }
  .c-ladder__n { width: 32px; height: 32px; font-size: 16px; }
  .c-ladder__round { font-size: 19px; }
  .c-ladder__sub { font-size: var(--fs-label); }
  .c-ladder__opp { font-size: 17px; max-width: 120px; }
  .c-sheet__grab { display: block; flex: none; width: 36px; height: 4px; border-radius: 2px; background: var(--line-3); margin: calc(var(--s2) * -1) auto 0; }
  .c-sheet__title { font-size: 30px; }
  .c-rules__row { grid-template-columns: 26px minmax(0,1fr); gap: var(--s3); }
  .c-rules__n { font-size: 24px; }
  .c-rules__k { font-size: 18px; }
  .c-rules__t { font-size: 14px; }
  .c-rules__waysrow { grid-template-columns: minmax(0,1fr); }
}

/* ---------- Reports: Series Report, Run Result ---------- */
.c-report { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--s6); align-content: start; min-width: 0; }   /* minmax: a long fold hint (a Daily squad label) ellipsizes instead of widening the column */
.c-report__hero { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s6); }
.c-report__head { min-width: 0; display: grid; gap: 10px; }
.c-report__title { font-size: clamp(56px, 6.7vw, 96px); line-height: .85; }
.c-report__title--xl { font-size: clamp(56px, 8.4vw, 128px); line-height: .82; }
.c-report__score { font: 700 clamp(56px, 6.7vw, 96px)/.85 var(--f-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.c-report__score.is-w, .c-final__score.is-w { color: var(--you); }
.c-report__score.is-l, .c-final__score.is-l { color: var(--them); }
.c-report__meta { font: 600 clamp(20px, 2.1vw, 30px)/1.1 var(--f-display); text-transform: uppercase; color: var(--tx-2); }
.c-report__text { color: var(--tx-2); max-width: 60ch; line-height: 1.5; }
.c-report__text b { color: var(--tx); font-weight: 600; }
.c-report__turn { margin-top: 10px; color: var(--tx); }
.c-report__pair { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s3); }
.c-report__block { display: grid; grid-template-columns: minmax(0,1fr); gap: 18px; min-width: 0; }
.c-report__aside { display: grid; gap: var(--s4); align-content: start; min-width: 0; }
/* game strip: one chip per played game */
.c-strip { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.c-strip__chip { display: grid; justify-items: center; gap: 2px; min-width: 0; padding: 10px 0; border-radius: 10px; background: var(--panel); border-top: 2px solid var(--line-2); font-variant-numeric: tabular-nums; }
.c-strip__chip.is-w { border-top-color: var(--you); }
.c-strip__chip.is-l { border-top-color: var(--them); }
.c-strip__g { font-size: var(--fs-micro); color: var(--tx-3); }
.c-strip__m { font: 700 var(--fs-d4)/1 var(--f-display); white-space: nowrap; }
.c-strip__chip.is-w .c-strip__m { color: var(--you); }
.c-strip__chip.is-l .c-strip__m { color: var(--them); }
.c-strip__s { font-size: var(--fs-label); color: var(--tx-3); white-space: nowrap; }
/* MVP card */
.c-mvp { display: grid; grid-template-columns: 52px minmax(0,1fr); gap: var(--s4); align-items: start; }
.c-mvp__badge { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--act); color: var(--bg); font: 700 18px/1 var(--f-display); }
.c-mvp__body { min-width: 0; }
.c-mvp__name { font: 700 26px/1 var(--f-display); text-transform: uppercase; }
.c-mvp__note { margin-top: var(--s2); font-size: 14px; line-height: 1.5; color: var(--tx-2); }
/* benchmark verdict (Run Result): mint when you beat the real team / par or won it all */
.c-verdict { border-left: 4px solid var(--them); max-width: 720px; }
.c-verdict.is-good { border-left-color: var(--you); }
.c-verdict__title { color: var(--them); }
.c-verdict.is-good .c-verdict__title { color: var(--you); }
.c-verdict__body { margin-top: var(--s2); font-size: 17px; line-height: 1.5; }
.c-final { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s4); }
.c-final__score { font: 700 44px/.9 var(--f-display); white-space: nowrap; }
.c-final__vs { color: var(--tx-2); }
/* report folds: native <details name>, one open per list */
.c-folds { border-top: 1px solid var(--line); }
.c-fold { border-bottom: 1px solid var(--line); }
.c-fold__head { list-style: none; display: flex; align-items: center; gap: var(--s4); min-height: 56px; cursor: pointer; }
.c-fold__head::-webkit-details-marker { display: none; }
.c-fold__label { flex: none; font-size: 16px; color: var(--tx); white-space: nowrap; }
.c-fold[open] .c-fold__label { font-weight: 600; }
.c-fold__hint { margin-left: auto; min-width: 0; font-size: var(--fs-small); color: var(--tx-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-fold__icon { flex: none; margin-left: auto; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line-3); color: var(--tx-3); display: grid; place-items: center; font-size: 16px; line-height: 1; transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.c-fold__hint + .c-fold__icon { margin-left: 0; }
.c-fold__head:hover .c-fold__icon { border-color: var(--tx-3); }
.c-fold[open] .c-fold__icon { border-color: var(--act); color: var(--act); }
.c-fold__body { padding: var(--s1) 0 var(--s7); }
/* series leaders + per-game table */
.c-leaders { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.c-leader { min-width: 0; padding: var(--s4) 18px; border-radius: var(--r-row); background: var(--panel); }
.c-leader__v { margin-top: var(--s2); font: 700 44px/.9 var(--f-display); font-variant-numeric: tabular-nums; }
.c-leader__n { margin-top: 6px; font-size: 14px; color: var(--tx-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-box--report { margin-top: 10px; }
.c-box--report td:first-child, .c-box--report th:first-child { min-width: 0; }
/* series highs */
.c-highs { display: grid; }
.c-high { display: grid; grid-template-columns: 120px 64px minmax(0,1fr); gap: var(--s4); align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line); }
.c-high__v { font: 700 var(--fs-d4)/1 var(--f-display); font-variant-numeric: tabular-nums; }
.c-high__who { min-width: 0; color: var(--tx-2); }
/* four factors: mirror rows with wider value columns (52.3, 0.31) */
.c-ff { display: grid; gap: 14px; }
.c-mirror--ff { grid-template-columns: 56px minmax(0,1fr) 120px minmax(0,1fr) 56px; }
.c-mirror--ff > .c-mirror__v:first-child { text-align: right; }
/* how the odds moved: one column per node, height = series win % */
.c-odds { display: grid; gap: var(--s3); }
.c-odds__chart { display: grid; gap: var(--s2); }
.c-odds__plot { position: relative; height: 170px; margin-top: var(--s7); display: grid; gap: var(--s2); border-bottom: 1px solid var(--line-3); }
.c-odds__col { position: relative; min-width: 0; }
.c-odds__bar { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 6px 6px 0 0; background: var(--tx-4); opacity: .9; }
.c-odds__col.is-up .c-odds__bar { background: var(--you); }
.c-odds__col.is-down .c-odds__bar { background: var(--them); }
.c-odds__v { position: absolute; left: 0; right: 0; text-align: center; font: 700 18px/1 var(--f-display); font-variant-numeric: tabular-nums; color: var(--tx-3); white-space: nowrap; }
.c-odds__col.is-up .c-odds__v { color: var(--you); }
.c-odds__col.is-down .c-odds__v { color: var(--them); }
.c-odds__mid { position: absolute; left: 0; right: 0; bottom: 50%; border-top: 1px dashed var(--line-3); pointer-events: none; }
.c-odds__midlabel { position: absolute; right: 0; bottom: calc(50% - 6px); font-size: var(--fs-micro); color: var(--tx-4); }
.c-odds__x { display: grid; gap: var(--s2); }
.c-odds__plot, .c-odds__x { padding-right: 36px; }   /* the 50% label sits in this gutter, clear of the columns */
.c-odds__x > span { text-align: center; font-size: var(--fs-label); color: var(--tx-3); }
.c-odds__x > .is-turn { color: var(--act); font-weight: 600; }
/* run ladder states (Series Report, Run Result) */
.c-run { display: grid; gap: var(--s3); align-content: start; }
.c-ladder__res { font: 700 20px/1 var(--f-display); text-transform: uppercase; white-space: nowrap; color: var(--tx-4); }
.c-ladder__rung.is-done > .c-ladder__n { background: var(--you); color: var(--bg); }
.c-ladder__rung.is-done > .c-ladder__res { color: var(--you); }
.c-ladder__rung.is-now > .c-ladder__res { color: var(--act); }
.c-ladder__rung.is-lost { border-color: var(--them); background: color-mix(in srgb, var(--them) 7%, var(--panel)); }
.c-ladder__rung.is-lost > .c-ladder__n { background: var(--them); color: var(--bg); }
.c-ladder__rung.is-lost > .c-ladder__res { color: var(--them); }
.c-ladder__rung.is-off { background: transparent; border-color: var(--line); }
.c-ladder__rung.is-off .c-ladder__round { color: var(--tx-4); }
.c-ladder__rung.is-off > .c-ladder__n { background: var(--panel); color: var(--tx-4); }
.c-run__share { width: 100%; min-height: 52px; margin-top: var(--s2); }
/* report action bar: quiet "Back to menu" beside the primary (below it on phones) */
@media (max-width: 767px) {
  .c-actionbar__go--multi { flex-wrap: wrap; justify-content: center; gap: var(--s1) var(--s3); }
  .c-actionbar__go--multi > .c-btn--quiet { order: 2; flex: 1 0 100%; justify-content: center; }
}

/* ---------- War Room ---------- */
.c-ticker { display: flex; align-items: center; gap: 6px; }
.c-ticker__r { padding: 6px var(--s3); border-radius: 6px; font: 600 15px/1 var(--f-display); letter-spacing: .05em; color: var(--tx-4); white-space: nowrap; }
.c-ticker__r.is-done { color: var(--you); }
.c-ticker__r.is-now { background: var(--act); color: var(--bg); font-weight: 700; }
.c-topbar__opp { color: var(--them); font-weight: 600; }
.c-topbar__label { font: 600 16px/1 var(--f-display); letter-spacing: .05em; text-transform: uppercase; color: var(--tx-3); white-space: nowrap; }
.c-warroom { display: grid; gap: var(--s6); align-content: start; min-width: 0; }
.c-warroom__title { margin-top: 10px; }
.c-warroom__opts { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.c-warroom__opts .c-option { grid-template-rows: auto auto 1fr; gap: 10px; min-height: 148px; padding: 18px var(--s5); border-radius: var(--r-card); }
.c-option__tag { justify-self: start; align-self: end; border: 1px solid currentColor; color: var(--tx-3); white-space: nowrap; }
.c-option__tag--you { color: var(--you); }
.c-option__tag--them { color: var(--them); }
.c-warroom__aside { display: grid; gap: var(--s5); align-content: start; }
.c-next { display: grid; gap: 14px; padding: var(--s6); }
.c-next__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.c-next__list > li { display: grid; grid-template-columns: 24px minmax(0,1fr); gap: 10px; line-height: 1.5; }
.c-next__n { color: var(--act); font-weight: 700; }
.c-warroom__note { line-height: 1.5; }
.c-warroom__note .is-out { color: var(--them); font-weight: 600; }
.c-warroom__note .is-dinged { color: var(--act); font-weight: 600; }

@media (max-width: 1099px) {
  .c-warroom__opts { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 767px) {
  .c-report { gap: var(--s4); }
  .c-report__pair { grid-template-columns: minmax(0,1fr); }
  .c-strip__chip { padding: var(--s2) 0; }
  .c-strip__m { font-size: 18px; }
  .c-fold__head { min-height: 48px; }
  .c-leaders { gap: 6px; }
  .c-leader { padding: var(--s3); }
  .c-leader__v { font-size: 30px; }
  .c-high { grid-template-columns: 84px 40px minmax(0,1fr); gap: var(--s3); }
  .c-mirror--ff { grid-template-columns: 44px minmax(0,1fr) minmax(0,1fr) 44px; }
  .c-odds__plot { height: 130px; margin-top: 22px; gap: 6px; }
  .c-odds__x { gap: 6px; }
  .c-odds__plot, .c-odds__x { padding-right: 30px; }
  .c-odds__v { font-size: 14px; }
  .c-final__score { font-size: 36px; }
  .c-warroom__opts { grid-template-columns: minmax(0,1fr); gap: var(--s2); }
  .c-warroom__opts .c-option { min-height: 0; padding: 14px var(--s4); }
  .c-next { padding: var(--s5); }
}