/* ============================================================
   EDGE - orange/charcoal terminal, ported from design/edge-terminal-v2.html.
   One deliberate deviation from the design file: its diverging pair
   (#ff8a1f up / #ff4b32 down) fails the palette validator's normal-vision
   floor (dE 12.3 < 15) - even full-color readers can't reliably tell the
   poles apart. Shipped pair: orange #db6e00 up / raspberry #c2447f down
   (all six checks pass on #0d1114; deutan dE 16.3, normal 18.1), with
   brighter same-hue inks for small text. Signs (+/-) always accompany color.
   ============================================================ */
:root{
  /* surfaces */
  --bg-app:#080b0d;
  --bg-header:#0a0d0f;
  --bg-surface:#0d1114;
  --bg-surface-raised:#111619;
  --bg-row:#0c1113;
  --bg-row-hover:#141a1d;
  --bg-selected:rgba(255,111,0,.10);

  /* borders */
  --border-subtle:#252c30;
  --border-strong:#343d42;

  /* text */
  --text-primary:#f5f4f1;
  --text-secondary:#a6abb0;
  --text-muted:#747b81;

  /* accent - interactive + positive emphasis */
  --accent:#ff7a00;
  --accent-hover:#ff8f24;
  --accent-soft:rgba(255,122,0,.12);
  --accent-border:rgba(255,122,0,.55);

  /* semantic series - validated diverging pair + text inks */
  --positive:#db6e00;
  --positive-ink:#ff8a1f;
  --negative:#c2447f;
  --negative-ink:#f06fa8;
  --negative-soft:rgba(194,68,127,.10);
  --warning:#ff9f1a;
  --warning-soft:rgba(255,159,26,.08);
  --neutral:#858c92;

  /* availability risk (injury) - a RESERVED STATUS slot, not a series hue.
     #fab219 is the dataviz reference palette's `warning` step, used unmodified.
     Its reserved `critical` #d03b3b was REJECTED here by measurement: against
     this board's shipped fade cue #c2447f it scores normal-vision dE 9.5, far
     under the 15 floor, so a red injury badge would be unreadable-as-distinct
     from a raspberry fade delta sitting in the same row. Severity therefore
     rides on FORM (filled = out, outlined = questionable) and on the letter
     code, never on a second hue. Measured on #0d1114: normal-vision dE 17.2 vs
     the orange value cue (CVD worst 15.5) and 32.3 vs the raspberry fade cue
     (CVD worst 22.8) - both clear the 15 floor. Contrast 10.34:1 as text on the
     surface, 8.43:1 as ink on its own 12% wash. The validator's lightness-band
     check does not apply: it is scoped to categorical palettes, and a reserved
     status step is by definition not a series color. */
  --risk:#fab219;
  --risk-soft:rgba(250,178,25,.12);
  --risk-border:rgba(250,178,25,.5);

  /* position badges - 6-hue categorical set, validated (all six checks pass
     on #0d1114). Positional color is load-bearing at the table's scan speed:
     "how many RBs left in this tier" is a color question. Letter labels keep
     identity from ever being color-alone. */
  --pos-qb:#d94f92; --pos-rb:#2c9e4b; --pos-wr:#3b82e0;
  --pos-te:#b87f0e; --pos-k:#1fa3b5; --pos-dst:#8f5ce8;
  --pos-ink:#0c0d0e;

  /* type */
  --font-ui:-apple-system,BlinkMacSystemFont,"Segoe UI","Inter",Helvetica,Arial,sans-serif;
  --font-num:var(--font-ui);
  --fs-xs:10px; --fs-sm:11px; --fs-md:12px; --fs-lg:13px; --fs-xl:16px; --fs-hero:26px;
  --track-caps:.1em;

  /* space + radius */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --r-sm:4px; --r-md:6px; --r-lg:11px;

  /* row metrics */
  --row-h:32px;
  --cell-x:10px;
}

/* ============================================================ BASE */
*{box-sizing:border-box;margin:0}
html{background:var(--bg-app);scrollbar-color:var(--border-strong) var(--bg-app)}
body{font:var(--fs-md)/1.45 var(--font-ui);color:var(--text-primary);background:var(--bg-app)}
a{color:var(--accent)}
a:hover{color:var(--accent-hover)}
button{font:inherit;cursor:pointer}
.num{font-family:var(--font-num);font-variant-numeric:tabular-nums}
.caps{font-size:var(--fs-xs);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text-muted);font-weight:600}
.wrap{max-width:1440px;margin:0 auto;padding:0 var(--sp-4)}
.view{display:none}
.view.active{display:block}
:focus-visible{outline:2px solid var(--accent-border);outline-offset:1px}
.dim{color:var(--text-muted)}

/* delta text - always signed; color redundant to the sign */
.d-up{color:var(--positive-ink)}
.d-dn{color:var(--negative-ink)}
.d-0{color:var(--neutral)}

/* ============================================================ TOPBAR */
.topbar{background:var(--bg-header);border-bottom:1px solid var(--border-subtle);position:sticky;top:0;z-index:10}
.topbar-inner{display:flex;align-items:center;gap:var(--sp-5);height:52px}
.brand{display:flex;gap:var(--sp-3);padding-right:var(--sp-5);border-right:1px solid var(--border-subtle);height:52px;align-items:center}
.brand-mark{font:800 italic 19px/1 var(--font-ui);letter-spacing:.04em;color:var(--text-primary)}
.brand-mark::after{content:"_";font-style:normal;color:var(--accent)}
.brand-sub{font-size:var(--fs-xs);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text-muted)}
.tabs{display:flex;gap:var(--sp-2);height:100%}
.tab{appearance:none;background:none;border:none;border-bottom:3px solid transparent;color:var(--text-muted);
  font:600 var(--fs-sm)/1 var(--font-ui);letter-spacing:var(--track-caps);text-transform:uppercase;
  padding:0 var(--sp-3);cursor:pointer;height:100%}
.tab:hover{color:var(--text-secondary)}
.tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.topbar-meta{margin-left:auto;display:flex;align-items:center;gap:0}
.topbar-meta>span{padding:0 var(--sp-4);border-left:1px solid var(--border-subtle);
  color:var(--text-secondary);font-size:var(--fs-sm);font-weight:600;letter-spacing:.04em;
  white-space:nowrap}
.sync-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:7px;vertical-align:1px}
.roomsel{display:flex;align-items:center;gap:var(--sp-2)}
select{background:var(--bg-surface-raised);color:var(--text-primary);border:1px solid var(--border-subtle);
  border-radius:var(--r-md);padding:6px 8px;font:600 var(--fs-sm)/1 var(--font-ui)}
select:focus{outline:none;border-color:var(--accent)}

/* ============================================================ STAT STRIP */
.stat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3);margin:var(--sp-4) 0}
.stat{position:relative;overflow:hidden;background:var(--bg-surface-raised);border:1px solid var(--border-subtle);
  border-radius:var(--r-lg);padding:var(--sp-4);box-shadow:0 1px 2px rgba(0,0,0,.35)}
.stat.lead{box-shadow:inset 3px 0 0 var(--accent),0 1px 2px rgba(0,0,0,.35)}
.stat .caps{display:block;margin-bottom:var(--sp-2)}
.stat-val{font:700 var(--fs-hero)/1.1 var(--font-num);font-variant-numeric:tabular-nums;position:relative;z-index:1}
.stat-val.name{font-size:var(--fs-xl)}
.stat-val .of{color:var(--accent)}
.stat-note{font-size:var(--fs-sm);color:var(--text-secondary);margin-top:3px;position:relative;z-index:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat-val .d-up,.stat-val .d-dn{font-size:var(--fs-lg);margin-left:var(--sp-1)}
.tex-dots{position:absolute;right:10px;bottom:8px;width:120px;height:52px;opacity:.5;
  background-image:radial-gradient(circle,var(--accent) 1px,transparent 1.4px);
  background-size:7px 7px;
  -webkit-mask-image:linear-gradient(75deg,transparent 30%,#000);mask-image:linear-gradient(75deg,transparent 30%,#000)}
.chev{position:absolute;right:14px;top:50%;width:34px;height:44px;transform:translateY(-50%);opacity:.55}
.chev i{position:absolute;left:0;width:34px;height:14px;background:var(--accent);
  clip-path:polygon(50% 0,100% 55%,100% 100%,50% 45%,0 100%,0 55%)}
.chev i:nth-child(1){top:0}.chev i:nth-child(2){top:16px;opacity:.6}.chev i:nth-child(3){top:32px;opacity:.3}
.chev.down{opacity:.45}
.chev.down i{background:var(--negative);transform:scaleY(-1)}

/* ============================================================ FILTERS */
.filters{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-3)}
.fchip{background:var(--bg-surface-raised);border:1px solid var(--border-subtle);border-radius:var(--r-md);
  color:var(--text-secondary);font:600 var(--fs-sm)/1 var(--font-ui);padding:7px 12px;cursor:pointer;min-height:30px}
.fchip:hover{color:var(--text-primary);border-color:var(--border-strong);background:var(--bg-row-hover)}
.fchip.active{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-border)}
.fdiv{width:1px;height:20px;background:var(--border-subtle);margin:0 var(--sp-1)}
.search{position:relative;margin-left:auto}
.search .lens{position:absolute;left:10px;top:50%;transform:translateY(-62%);width:9px;height:9px;
  border:1.5px solid var(--text-muted);border-radius:50%;pointer-events:none}
.search .lens::after{content:"";position:absolute;left:8px;top:9px;width:5px;height:1.5px;
  background:var(--text-muted);transform:rotate(45deg)}
.fsearch{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--r-md);
  color:var(--text-primary);font:var(--fs-sm)/1 var(--font-ui);padding:8px 10px 8px 28px;width:240px}
.fsearch::placeholder{color:var(--text-muted)}
.fsearch:focus{outline:none;border-color:var(--accent)}

/* ============================================================ BOARD TABLE */
.board-scroll{overflow-x:auto;border:1px solid var(--border-subtle);border-radius:var(--r-md);background:var(--bg-surface)}
table.board{border-collapse:collapse;width:100%;min-width:1180px}
.board thead th{position:sticky;top:0;background:var(--bg-surface-raised);color:var(--text-muted);
  font:600 var(--fs-xs)/1 var(--font-ui);letter-spacing:var(--track-caps);text-transform:uppercase;
  text-align:right;padding:10px var(--cell-x);border-bottom:1px solid var(--border-strong);white-space:nowrap;z-index:2}
.board thead th.tl{text-align:left}
.board thead th .star{color:var(--accent);font-size:var(--fs-sm)}
.board thead th.sortable{cursor:pointer;user-select:none}
.board thead th.sortable:hover{color:var(--text-secondary)}
.board thead th.sorted{color:var(--accent)}
.board tbody td{height:var(--row-h);padding:0 var(--cell-x);background:var(--bg-row);
  border-bottom:1px solid var(--border-subtle);text-align:right;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.board tbody td.tl{text-align:left}
.board tbody tr:hover td{background:var(--bg-row-hover)}
.adp{color:var(--text-secondary);font-weight:600}
.tier{color:var(--text-muted)}
.player{font-weight:600}
.player .team{font-size:var(--fs-xs);color:var(--text-muted);font-weight:400;margin-left:6px}
.bye{color:var(--text-muted)}
.sos{color:var(--text-secondary)}
.auction{color:var(--text-secondary)}

/* round separator rows */
/* left-aligned (design had right) so the label stays visible when the table
   is horizontally scrolled on narrow screens */
.round-sep td{height:24px;background:var(--bg-app);text-align:left;
  font:700 var(--fs-xs)/1 var(--font-num);letter-spacing:var(--track-caps);
  color:var(--text-muted);border-bottom:1px solid var(--border-subtle)}
.round-sep .rn{color:var(--accent)}
.round-sep:hover td{background:var(--bg-app)}

/* site cells */
.site{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-weight:700}
.site .dl{font-size:var(--fs-xs);font-weight:600;margin-left:5px}

/* signal badges */
.sigs{display:flex;gap:4px;justify-content:flex-end}
.sig{font:700 9px/1 var(--font-num);letter-spacing:.07em;padding:3px 6px;border-radius:var(--r-sm);
  border:1px solid var(--border-strong);color:var(--text-secondary);background:rgba(0,0,0,.25)}
.sig-val{border-color:var(--accent-border);color:var(--positive-ink);background:var(--accent-soft)}
.sig-fade{border-color:rgba(194,68,127,.55);color:var(--negative-ink);background:var(--negative-soft)}

/* flagged rows - value (orange) / fade (raspberry); text stays neutral */
tr.glow-val td{background:var(--bg-selected)}
tr.glow-val td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
tr.glow-val:hover td{background:rgba(255,111,0,.16)}
tr.glow-fade td{background:var(--negative-soft);border-bottom-color:var(--border-strong)}
tr.glow-fade td:first-child{box-shadow:inset 3px 0 0 var(--negative)}
tr.glow-fade:hover td{background:rgba(194,68,127,.16)}

/* position badges - one hue per position, letter carries identity too */
.pos{display:inline-block;min-width:32px;text-align:center;font:800 var(--fs-xs)/1 var(--font-num);
  letter-spacing:.03em;color:var(--pos-ink);background:var(--neutral);
  padding:4px 5px;border-radius:var(--r-sm);box-shadow:0 1px 1px rgba(0,0,0,.4)}
.pos-QB{background:var(--pos-qb)} .pos-RB{background:var(--pos-rb)}
.pos-WR{background:var(--pos-wr)} .pos-TE{background:var(--pos-te)}
.pos-K{background:var(--pos-k)}   .pos-DST{background:var(--pos-dst)}

/* ---------------------------------------------- injury / availability risk
   Severity rides on FORM, never on a second hue (see --risk). The letter code
   is always present, so the chip is never color-alone. A STALE designation
   gets no status color at all: we do not vouch for it, and a muted chip says
   that more honestly than a colored one with a caveat in a tooltip. */
.inj{display:inline-block;font:800 9px/1 var(--font-num);letter-spacing:.06em;
  padding:3px 5px;border-radius:var(--r-sm);margin-left:6px;vertical-align:1px;
  border:1px solid var(--risk-border);color:var(--risk);background:transparent}
.inj-out{background:var(--risk);color:var(--pos-ink);border-color:var(--risk)}
.inj-stale{border-color:var(--border-strong);color:var(--text-muted);background:transparent}
.ba .inj,.slot .inj{margin-left:5px}

/* queue / avoid markers on the board */
.mk{display:inline-block;font:800 9px/1 var(--font-num);margin-left:6px;vertical-align:1px}
.mk-q{color:var(--accent)}
.mk-x{color:var(--negative-ink)}

/* keyboard cursor row (j/k) */
tr.cursor td{background:var(--bg-row-hover);box-shadow:inset 0 0 0 1px var(--border-strong)}
tr.cursor td:first-child{box-shadow:inset 3px 0 0 var(--text-secondary),inset 0 0 0 1px var(--border-strong)}
/* The name is a real <button> so it is keyboard-reachable and announced as
   interactive, but it must look like text everywhere it appears - board rows,
   best-available list, type-ahead. Scoping this reset to .player left default
   button chrome around every name in the draft room. */
.pname{cursor:pointer;background:none;border:none;color:inherit;font:inherit;
  padding:0;text-align:left;letter-spacing:inherit}
.pname:hover{color:var(--accent);text-decoration:underline}

/* ============================================================ TYPE-AHEAD */
.ta{position:relative;margin-top:var(--sp-3)}
.ta-in{display:flex;align-items:center;gap:var(--sp-3);background:var(--bg-surface-raised);
  border:1px solid var(--border-strong);border-radius:var(--r-md);padding:0 var(--sp-3)}
.ta-in:focus-within{border-color:var(--accent)}
.ta-slash{white-space:nowrap;color:var(--text-secondary)}
.ta-slash b{color:var(--accent);font-weight:700}
#taInput{flex:1;background:none;border:none;color:var(--text-primary);
  font:600 var(--fs-lg)/1 var(--font-ui);padding:13px 0;min-width:0}
#taInput:focus{outline:none}
#taInput::placeholder{color:var(--text-muted);font-weight:400}
.ta-hint{white-space:nowrap}
.ta-list{list-style:none;position:absolute;left:0;right:0;top:100%;z-index:9;
  background:var(--bg-surface-raised);border:1px solid var(--border-strong);
  border-top:none;border-radius:0 0 var(--r-md) var(--r-md);max-height:320px;overflow-y:auto;
  box-shadow:0 12px 28px rgba(0,0,0,.55)}
.ta-list:empty{display:none}
.ta-list li{display:grid;grid-template-columns:38px 40px minmax(0,1fr) auto;gap:var(--sp-2);
  align-items:center;padding:8px var(--sp-3);border-bottom:1px solid var(--border-subtle);
  cursor:pointer;font-size:var(--fs-sm)}
.ta-list li:last-child{border-bottom:none}
.ta-list li.on{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}
.ta-list li .rk{font:var(--fs-sm)/1 var(--font-num);color:var(--text-muted);text-align:right}
.ta-list li .nm{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ta-list li .nm .team{font-size:var(--fs-xs);color:var(--text-muted);font-weight:400;margin-left:6px}
.ta-list li .meta{font:var(--fs-xs)/1 var(--font-num);color:var(--text-muted);text-align:right;white-space:nowrap}

/* ============================================================ PLAYER CARD */
.pcard-scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:20;border:none}
.pcard{position:fixed;top:0;right:0;bottom:0;width:min(430px,100vw);z-index:21;
  background:var(--bg-surface);border-left:1px solid var(--border-strong);
  box-shadow:-18px 0 40px rgba(0,0,0,.5);overflow-y:auto;overscroll-behavior:contain}
.pc-hd{position:sticky;top:0;background:var(--bg-surface-raised);z-index:2;
  border-bottom:1px solid var(--border-strong);padding:var(--sp-4)}
.pc-close{position:absolute;top:var(--sp-3);right:var(--sp-3);background:none;border:none;
  color:var(--text-muted);font:700 18px/1 var(--font-ui);padding:6px 9px;border-radius:var(--r-sm)}
.pc-close:hover{color:var(--text-primary);background:var(--bg-row-hover)}
.pc-name{font:700 20px/1.2 var(--font-ui);padding-right:34px}
.pc-sub{display:flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-2);flex-wrap:wrap}
.pc-sub .f{font-size:var(--fs-sm);color:var(--text-secondary)}
.pc-sub .f b{color:var(--text-primary);font-weight:600}
.pc-sec{padding:var(--sp-4);border-bottom:1px solid var(--border-subtle)}
.pc-sec>.caps{display:block;margin-bottom:var(--sp-2)}
.pc-verdict{font:600 var(--fs-lg)/1.5 var(--font-ui);color:var(--text-primary)}
.pc-verdict .lede{color:var(--accent)}
.pc-verdict.fade .lede{color:var(--negative-ink)}
.pc-why{font-size:var(--fs-sm);color:var(--text-secondary);margin-top:var(--sp-2);line-height:1.55}

/* five-source strip */
.pc-src{display:grid;grid-template-columns:44px 54px 1fr;gap:var(--sp-2);align-items:center;
  padding:6px 0;border-bottom:1px solid var(--border-subtle);font-size:var(--fs-sm)}
.pc-src:last-child{border-bottom:none}
.pc-src .lab{font:700 var(--fs-xs)/1 var(--font-num);letter-spacing:.06em;color:var(--text-secondary)}
.pc-src .lab .off{color:var(--text-muted);font-weight:400}
.pc-src .v{font:700 var(--fs-sm)/1 var(--font-num);font-variant-numeric:tabular-nums;text-align:right}
.pc-src .bar{position:relative;height:14px}
.pc-src .bar .mid{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--border-strong)}
.pc-src .bar i{position:absolute;top:4px;height:6px;border-radius:3px}
.pc-src .bar i.up{background:var(--positive)}
.pc-src .bar i.dn{background:var(--negative)}
.pc-src .d{font:700 var(--fs-xs)/1 var(--font-num);position:absolute;top:0;line-height:14px}

/* production + meta grids */
.pc-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.pc-kv{background:var(--bg-surface-raised);border:1px solid var(--border-subtle);
  border-radius:var(--r-md);padding:var(--sp-3)}
.pc-kv .k{font-size:var(--fs-xs);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text-muted);font-weight:600}
.pc-kv .v{font:700 var(--fs-xl)/1.1 var(--font-num);font-variant-numeric:tabular-nums;margin-top:3px}
.pc-kv .v small{font-size:var(--fs-sm);color:var(--text-muted);font-weight:600}
.pc-kv .n{font-size:var(--fs-xs);color:var(--text-muted);margin-top:2px}

/* survival curve */
.pc-curve{width:100%;height:118px;display:block}
.pc-curve .axis{stroke:var(--border-subtle);stroke-width:1}
.pc-curve .grid{stroke:var(--border-subtle);stroke-width:1;stroke-dasharray:2 3;opacity:.6}
.pc-curve .line{fill:none;stroke:var(--accent);stroke-width:2}
.pc-curve .area{fill:var(--accent-soft)}
.pc-curve .mine{stroke:var(--text-secondary);stroke-width:1;stroke-dasharray:3 3}
.pc-curve .dot{fill:var(--accent)}
.pc-curve text{fill:var(--text-muted);font:9px/1 var(--font-num)}
.pc-pks{font:600 var(--fs-sm)/1.4 var(--font-num);font-variant-numeric:tabular-nums;
  color:var(--text-secondary);margin-top:4px}
.pc-pks b{color:var(--accent);font-weight:700}

/* actions */
.pc-actions{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.pc-actions .fchip{min-height:36px}
.pc-actions .fchip.on{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-border)}
.pc-actions .fchip.on-x{background:var(--negative-soft);color:var(--negative-ink);border-color:rgba(194,68,127,.55)}
.pc-note{width:100%;margin-top:var(--sp-3);background:var(--bg-surface-raised);
  border:1px solid var(--border-subtle);border-radius:var(--r-md);color:var(--text-primary);
  font:var(--fs-sm)/1.5 var(--font-ui);padding:8px 10px;resize:vertical;min-height:56px}
.pc-note:focus{outline:none;border-color:var(--accent)}
.pc-prov{font-size:var(--fs-xs);color:var(--text-muted);line-height:1.6}

@media (max-width:640px){
  .pcard{width:100vw}
  .ta-list li{grid-template-columns:34px 40px minmax(0,1fr)}
  .ta-list li .meta{display:none}
}

/* ============================================================ DRAFT ROOM */
.draft-setup{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-4)}
button.primary{background:var(--accent);color:var(--pos-ink);border:none;border-radius:var(--r-md);
  padding:8px 16px;font:700 var(--fs-sm)/1 var(--font-ui);min-height:30px}
button.primary:hover{background:var(--accent-hover)}
.room{display:grid;grid-template-columns:1fr 300px;gap:var(--sp-4)}
.room-main{min-width:0}
.panel{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--r-md)}
.panel-hd{display:flex;align-items:baseline;justify-content:space-between;
  padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border-subtle)}

/* pick strip */
.pick-strip{display:flex;gap:var(--sp-1);overflow-x:auto;padding:var(--sp-3) 0 var(--sp-4)}
.pick{flex:0 0 88px;background:var(--bg-surface-raised);border:1px solid var(--border-subtle);
  border-radius:var(--r-sm);padding:var(--sp-2)}
.pick .pk{font:700 var(--fs-sm)/1 var(--font-num);font-variant-numeric:tabular-nums;color:var(--text-secondary)}
.pick .tm{font-size:var(--fs-xs);color:var(--text-muted);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick.now{border-color:var(--border-strong);background:var(--bg-row-hover)}
.pick.now .pk{color:var(--text-primary)}
.pick.mine{border-color:var(--accent-border);background:var(--accent-soft)}
.pick.mine .pk{color:var(--accent)}
.pick.mine .tm{color:var(--text-secondary)}

/* clock card */
.clock-card{display:flex;align-items:center;gap:var(--sp-4);background:var(--bg-surface-raised);
  border:1px solid var(--border-strong);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-3)}
.clock-time{font:800 32px/1 var(--font-num);font-variant-numeric:tabular-nums}
.clock-time.you{color:var(--accent)}
.clock-meta .caps{display:block}
.clock-team{font:600 var(--fs-xl)/1.2 var(--font-ui)}
.clock-until{margin-left:auto;text-align:right}
.clock-until .num{font-size:var(--fs-xl);font-weight:700}

/* alerts */
.alerts{display:flex;flex-direction:column;gap:var(--sp-1);margin-bottom:var(--sp-3)}
.alert{display:flex;align-items:center;gap:var(--sp-2);border:1px solid var(--border-subtle);
  border-left:3px solid var(--warning);background:var(--warning-soft);border-radius:var(--r-sm);
  padding:7px var(--sp-3);font-size:var(--fs-sm)}
.alert .tag{font:700 var(--fs-xs)/1 var(--font-num);letter-spacing:var(--track-caps);color:var(--warning);white-space:nowrap}
.alert .body{color:var(--text-secondary)}
.alert .body b{color:var(--text-primary);font-weight:600}
.alert-fade{border-left-color:var(--negative);background:var(--negative-soft)}
.alert-fade .tag{color:var(--negative-ink)}
.alert-info{border-left-color:var(--border-strong);background:rgba(0,0,0,.2)}
.alert-info .tag{color:var(--text-muted)}

/* best available + survival meter */
.ba-list{list-style:none;padding:var(--sp-1) 0}
.ba{display:grid;grid-template-columns:34px 40px minmax(90px,1fr) 76px minmax(80px,120px) auto;
  gap:var(--sp-2);align-items:center;
  padding:6px var(--sp-4);border-bottom:1px solid var(--border-subtle)}
.ba:last-child{border-bottom:none}
.ba:hover{background:var(--bg-row-hover)}
.ba .rk{font:var(--fs-sm)/1 var(--font-num);font-variant-numeric:tabular-nums;color:var(--text-muted);text-align:right}
.ba .nm{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ba .nm .team{font-size:var(--fs-xs);color:var(--text-muted);font-weight:400;margin-left:6px}
.ba .adp-d{font:var(--fs-sm)/1 var(--font-num);font-variant-numeric:tabular-nums;text-align:right;color:var(--text-muted)}
.surv{display:flex;align-items:center;gap:var(--sp-2)}
.surv .pct{font:700 var(--fs-sm)/1 var(--font-num);font-variant-numeric:tabular-nums;width:34px;text-align:right}
.meter{flex:1;height:4px;background:var(--border-subtle);border-radius:2px;overflow:hidden}
.meter i{display:block;height:100%;background:var(--accent)}
.meter.mid i{background:var(--warning);opacity:.75}
.meter.low i{background:var(--negative)}
.draftbtn{background:var(--bg-surface-raised);border:1px solid var(--border-subtle);border-radius:var(--r-sm);
  color:var(--text-secondary);font:600 var(--fs-xs)/1 var(--font-ui);padding:6px 10px}
.draftbtn:hover{background:var(--accent);border-color:var(--accent);color:var(--pos-ink)}

/* roster slots */
.roster,.picklog{list-style:none;padding:var(--sp-1) 0}
.slot{display:flex;align-items:center;gap:var(--sp-2);padding:6px var(--sp-4);border-bottom:1px solid var(--border-subtle);font-size:var(--fs-sm)}
.slot:last-child{border-bottom:none}
.slot .lab{font:700 var(--fs-xs)/1 var(--font-num);letter-spacing:.05em;color:var(--text-muted);width:38px}
.slot .who{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slot .who .team{font-size:var(--fs-xs);color:var(--text-muted);font-weight:400;margin-left:5px}
.slot.open .who{color:var(--text-muted);font-weight:400}
.slot .rd{margin-left:auto;font:var(--fs-xs)/1 var(--font-num);font-variant-numeric:tabular-nums;color:var(--text-muted)}
.slot .byeclash{margin-left:auto;font:600 var(--fs-xs)/1 var(--font-num);color:var(--warning)}
.bench-hd{padding:8px var(--sp-4) 2px}
.picklog li{display:flex;gap:var(--sp-2);padding:5px var(--sp-4);border-bottom:1px solid var(--border-subtle);
  font-size:var(--fs-sm);color:var(--text-muted)}
.picklog li:last-child{border-bottom:none}
.picklog li b{color:var(--text-primary);font-weight:600}
.empty{color:var(--text-muted);font-size:var(--fs-sm);padding:10px var(--sp-4)}

/* ============================================================ LIVE */
.live-head{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-4)}
.scores{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--sp-3);margin-top:var(--sp-4)}
.scores .alert{grid-column:1/-1}
.game{background:var(--bg-surface-raised);border:1px solid var(--border-subtle);border-radius:var(--r-lg);padding:var(--sp-3) var(--sp-4)}
.game-status{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--sp-2)}
.game-status .live{color:var(--accent);font:700 var(--fs-xs)/1 var(--font-num);letter-spacing:var(--track-caps)}
.game-status .live::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:5px}
.game-status .fin,.game-status .sched{color:var(--text-muted);font:600 var(--fs-xs)/1 var(--font-num);letter-spacing:var(--track-caps)}
.game-status .qtr{font:var(--fs-sm)/1 var(--font-num);font-variant-numeric:tabular-nums;color:var(--text-secondary)}
.game-row{display:flex;align-items:baseline;gap:var(--sp-2);padding:3px 0}
.game-row .tm{font-weight:600}
.game-row .rec{font-size:var(--fs-xs);color:var(--text-muted)}
.game-row .sc{margin-left:auto;font:700 var(--fs-xl)/1 var(--font-num);font-variant-numeric:tabular-nums}
.game-row.losing .sc{color:var(--text-secondary)}
.game-note{margin-top:var(--sp-2);font-size:var(--fs-xs);color:var(--text-muted);border-top:1px solid var(--border-subtle);padding-top:var(--sp-2)}
.game-note b{color:var(--text-secondary);font-weight:600}

/* ============================================================ FOOTER */
.footer{margin:var(--sp-5) 0;padding-top:var(--sp-3);border-top:1px solid var(--border-subtle);
  display:flex;gap:var(--sp-4);color:var(--text-muted);font-size:var(--fs-xs);line-height:1.6}
.footer .right{margin-left:auto;text-align:right}

/* ============================================================ RESPONSIVE */
/* The draft room needs ~1000px for two real columns; below that, stack. */
@media (max-width:1000px){
  .room{grid-template-columns:1fr}
  .stat-strip{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .wrap{padding:0 var(--sp-2)}
  .topbar-inner{gap:var(--sp-3);flex-wrap:wrap;height:auto;padding:var(--sp-2) 0}
  .brand{border-right:none;padding-right:0;height:auto}
  .brand-sub,.hide-m{display:none}
  .search{margin-left:0;order:9;width:100%}
  .fsearch{width:100%}
  .clock-time{font-size:24px}
  .scores{grid-template-columns:1fr}
  .ba{grid-template-columns:34px 40px minmax(0,1fr) 110px auto}
  .ba .adp-d{display:none}
}