/* Daily Box Stats — light "sports section" aesthetic, mobile-first, no frameworks. */
:root{
  --paper:#f7f4ec; --card:#fffdf8; --ink:#1c1a15; --mut:#655e4f; --line:#ddd6c4;
  --nba:#c75b26; --nfl:#6b4f2a; --mlb:#b03046; --nhl:#2f6f8f; --ncaaf:#2e6b46; --soccer:#62449e; --ncaab:#a67c00;
  --acc:#1c1a15; --hl:#fff1b8; --rad:10px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* Page lock: the document itself must never scroll or rubber-band
   sideways — only the pieces built to move sideways (.strip, .twrap)
   may. overflow-x:clip (with the hidden fallback for older browsers)
   does not create a scroll container, so nothing here disturbs layout;
   overscroll-behavior-x stops a sideways drag at a strip's end from
   chaining into a whole-page pan. Root-cause fixes still matter: any
   content that truly overflows would be cut off, not scrollable. */
html,body{margin:0;padding:0;overflow-x:hidden;overflow-x:clip;overscroll-behavior-x:none}
body{background:var(--paper);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  min-height:100vh;font-variant-numeric:tabular-nums}
a{color:inherit}
/* Compact masthead (v1.7): brand + tagline share one line so the
   panel grid starts visibly higher; the double rule now sits under
   the topnav, which lives OUTSIDE the header so it can go sticky on
   desktop (a sticky element can only travel within its parent). */
.masthead{background:var(--paper)}
.mast-in{max-width:1440px;margin:0 auto;padding:6px 14px 2px;display:flex;
  align-items:baseline;justify-content:center;gap:4px 16px;flex-wrap:wrap}
.brand{font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:25px;
  letter-spacing:-.5px;text-decoration:none;color:var(--ink);white-space:nowrap}
.tagline{margin:0;color:var(--mut);font-size:12px}
@media (max-width:760px){.tagline{display:none}}
/* Streamlined header (v1.9, ported in the v1.8 reconciliation):
   the masthead carries NO date bar — the one date cluster lives
   in the topnav: the arrows + label (.tn-dnav, shown/hidden by
   showDateNav as before) sit inside .tn-date alongside Today /
   Yesterday / the picker, and the front label is compact. */
.tn-dnav{display:inline-flex;align-items:center;gap:6px}
.tn-dnav[hidden]{display:none}
.tn-date .dlabel{font-weight:800;font-size:13px;white-space:nowrap;
  font-family:Georgia,"Times New Roman",serif}
.tn-date button:disabled{opacity:.35;cursor:default}
/* Customize sports (Stage B) rides in the topnav cluster, front
   page only (app.js hides the span elsewhere). */
.tn-custom{display:inline-flex;gap:6px;align-items:center}
.tn-custom[hidden]{display:none}
.tn-custom button{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:8px;
  padding:5px 8px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit}
.tn-custom button:hover{border-color:var(--ink)}
/* Highlights of the Day (v1.10): a pill link in the MASTHEAD, on
   the brand/tagline line — deliberately NOT in the topnav: the
   desktop topnav row is full (measured slack ≈6px at 1440), and a
   ~143px pill there wraps the sticky bar to two rows (67px),
   breaking the slim-sticky-bar contract (panel-check). The
   masthead is never sticky and has the room at every width. */
.mast-hi{display:inline-flex;align-items:center}
.mast-hi a{display:inline-flex;align-items:center;border:1px solid var(--line);background:var(--card);
  color:var(--ink);border-radius:8px;padding:5px 8px;font-size:12.5px;font-weight:700;
  text-decoration:none;font-family:inherit;white-space:nowrap}
.mast-hi a:hover{border-color:var(--ink)}
@media (max-width:760px){.mast-hi a{min-height:34px}}
/* Box Scores index (v1.11): a second masthead pill beside
   Highlights — same .mast-hi idiom, same reasoning (the topnav
   stays untouched; the masthead wraps to a second line at phone
   widths instead of overflowing). Rows reuse .drow: a one-line
   abbr matchup (winner's chunk at 900, loser's muted — the score
   tiles' win/dim treatment) over the shared status meta line. */
.bx-date{color:var(--mut);font-size:13.5px;font-weight:700;margin:0 0 14px}
.bxrow .bxmu,.cbrow .bxmu{font-size:15px}
.bxrow .bxtm.win,.cbrow .bxtm.win{font-weight:900}
.bxrow .bxtm.dim,.cbrow .bxtm.dim{color:var(--mut)}
.bxrow .bxat,.cbrow .bxat{color:var(--mut);font-weight:400}
.bxrow .bxsc,.cbrow .bxsc{font-weight:800}
/* Biggest comebacks (Highlights): the featured section above the
   per-sport groups — a warm --hl-tinted card setting it apart
   from the plain group sections. Rows reuse the box-scores row
   chunks (.bxmu/.bxtm/.bxsc inside .drow) via .cbrow. */
.cbacks{background:#fff8d2;border:1.5px solid #e3d189;border-radius:14px;
  padding:12px 14px 4px}
.cb-note{font-weight:700}
/* Front-page search slot in the masthead zone (front view only). */
#frontSearchSlot{max-width:1440px;margin:0 auto;padding:0 14px 6px}
#frontSearchSlot .searchwrap{margin:0}
#frontSearchSlot .searchbox{padding:8px 12px}
main{max-width:1440px;margin:0 auto;padding:8px 14px 34px}
.loading,.empty{color:var(--mut);font-size:14.5px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--rad);padding:16px;line-height:1.55}
.empty .retry{margin-top:10px}
.btn{border:1px solid var(--ink);background:var(--card);color:var(--ink);border-radius:8px;
  padding:8px 14px;font-size:13.5px;font-weight:700;cursor:pointer;font-family:inherit}

/* ---------- sport sections ---------- */
.sport{margin:0 0 26px}
.sport-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;
  border-bottom:2px solid var(--ink);padding-bottom:5px;margin-bottom:10px}
.sport-dot{width:11px;height:11px;border-radius:3px;flex:0 0 auto;align-self:center}
.sport-name{font-family:Georgia,"Times New Roman",serif;font-size:22px;font-weight:700;margin:0}
.sport-full{margin-left:auto;font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap}
.sport-full:hover{text-decoration:underline}
.sport[data-sport="nba"] .sport-dot{background:var(--nba)} .sport[data-sport="nba"] .sport-full{color:var(--nba)}
.sport[data-sport="nfl"] .sport-dot{background:var(--nfl)} .sport[data-sport="nfl"] .sport-full{color:var(--nfl)}
.sport[data-sport="mlb"] .sport-dot{background:var(--mlb)} .sport[data-sport="mlb"] .sport-full{color:var(--mlb)}
.sport[data-sport="ncaaf"] .sport-dot{background:var(--ncaaf)} .sport[data-sport="ncaaf"] .sport-full{color:var(--ncaaf)}
.sport[data-sport="soccer"] .sport-dot{background:var(--soccer)} .sport[data-sport="soccer"] .sport-full{color:var(--soccer)}
.sport[data-sport="nhl"] .sport-dot{background:var(--nhl)} .sport[data-sport="nhl"] .sport-full{color:var(--nhl)}
.sport[data-sport="ncaab"] .sport-dot{background:var(--ncaab)} .sport[data-sport="ncaab"] .sport-full{color:var(--ncaab)}
.nogames{color:var(--mut);font-size:14px;background:var(--card);border:1px dashed var(--line);
  border-radius:var(--rad);padding:12px 14px}

/* ---------- score strip ---------- */
.strip{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  padding-bottom:6px;margin-bottom:12px;scrollbar-width:thin;overscroll-behavior-x:contain}
.gchip{flex:0 0 auto;min-width:172px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--rad);padding:8px 11px;text-decoration:none;color:var(--ink);display:block}
.gchip:hover{border-color:var(--ink)}
.gchip .row{display:flex;align-items:baseline;gap:6px;font-size:13.5px;padding:1.5px 0}
.gchip .ab{font-weight:800;width:38px}
.gchip .sc{margin-left:auto;font-weight:800}
.gchip .row.win .ab,.gchip .row.win .sc{font-weight:900}
.gchip .row.dim{color:var(--mut)}
.gchip .st{font-size:12px;color:var(--mut);margin-top:4px;font-weight:700;letter-spacing:.2px}
.gchip .st.live{color:#b3261e}
/* Compact pregame line row (tile lines): quiet, single-line,
   rendered only when the game carries a line — tiles without
   one simply end at the status row. No provider label here;
   the box score carries it. */
.gchip .ln{font-size:11px;color:var(--mut);margin-top:2px;font-weight:600;white-space:nowrap}

/* ---------- digest boards (front page) ---------- */
.digest{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:640px){.digest{grid-template-columns:1fr}}
.board{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);overflow:hidden}
.board h3{margin:0;padding:9px 12px;font-size:12px;letter-spacing:1.6px;color:var(--mut);
  border-bottom:1px solid var(--line);font-weight:800}
.board h3 b{color:var(--ink)}
.drow{display:flex;align-items:center;gap:9px;padding:8px 12px;text-decoration:none;color:var(--ink);
  border-bottom:1px solid #eee7d5}
.drow:last-child{border-bottom:0}
.drow:hover{background:#faf6ea}
.drow .rk{color:var(--mut);font-weight:800;width:22px;text-align:center;font-size:13px;white-space:nowrap;flex:0 0 auto}
.drow .who{flex:1;min-width:0}
.drow .nm{font-weight:700;font-size:14.5px;display:block;white-space:normal;line-height:1.25}
.drow .mt{color:var(--mut);font-size:12.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drow .val{font-size:19px;font-weight:900}
.board .none{padding:10px 12px;color:var(--mut);font-size:13px}

/* ---------- sport detail ---------- */
.cats{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 12px}
.cats button{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;
  padding:7px 13px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit}
.cats button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.twrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);
  border-radius:var(--rad);background:var(--card);overscroll-behavior-x:contain}
table.ld{width:100%;border-collapse:collapse;min-width:640px}
table.ld th,table.ld td{padding:8px 7px;font-size:13.5px;text-align:right;
  border-bottom:1px solid #eee7d5;white-space:nowrap}
table.ld th{font-size:10.5px;letter-spacing:1px;color:var(--mut);font-weight:800}
table.ld tr:last-child td{border-bottom:0}
table.ld tbody tr{cursor:pointer}
table.ld tbody tr:hover td{background:#faf6ea}
table.ld td.rk,table.ld th.rk{text-align:center;color:var(--mut);font-weight:800;width:32px}
table.ld td.pl,table.ld th.pl{text-align:left}
table.ld td.sorted,table.ld th.sorted{color:#b3541e;font-weight:900}
/* sortable headers (detail boards + box-score tables) */
table.ld th[data-col],table.bx th[data-ci]{cursor:pointer}
table.ld th.sorted::after,table.bx th.sorted::after{content:"▾";font-size:8px;margin-left:2px}
table.bx th.sorted,table.bx td.sorted{color:#b3541e;font-weight:800}
.pname{font-weight:700;font-size:14px}
.pmeta{color:var(--mut);font-size:12.5px}
/* player reference links (Sports Reference) — inherit the cell's text
   color; box-score names carry a quiet dotted underline so they read as
   tappable without shouting */
.reflink{color:inherit;text-decoration:none;cursor:pointer}
.reflink:hover{text-decoration:underline}
table.bx td.pl .reflink{border-bottom:1px dotted var(--mut)}
table.bx td.pl .reflink:hover{text-decoration:none;border-bottom:1px solid currentColor}
.livenote{display:flex;align-items:center;gap:7px;color:var(--mut);font-size:12.5px;margin:0 0 10px}
.fbnote{color:#8a6d1e;background:#fdf6e0;border:1px solid #ecd9a0;border-radius:8px;font-size:12.5px;padding:6px 9px;margin:0 0 10px}
.livedot{width:8px;height:8px;border-radius:50%;background:#b3261e;flex:0 0 auto;
  animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
/* Live games: the pulsing dot + clock rendered inline next to an
   in-progress game's status (score strip, box head, leader/favorite/
   search meta lines). The status line exists in every game state, so
   the dot+clock add no layout shift when a game tips off or ends. */
.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#b3261e;
  margin-right:5px;vertical-align:1px;flex:0 0 auto;animation:pulse 1.6s ease-in-out infinite}
.live-clock{white-space:nowrap}
@media (prefers-reduced-motion: reduce){
  .livedot,.live-dot{animation:none}
}

/* ---------- box score ---------- */
.backrow{display:flex;gap:14px;flex-wrap:wrap;margin:0 0 10px;font-size:13.5px;font-weight:700}
.backrow a{text-decoration:none}
.backrow a:hover{text-decoration:underline}
/* Prev/Next game nav (2026-10-21): one row under the back links on
   box-score and preview pages. Buttons reuse the .btn treatment
   (card surface, ink border, 8px radius) sized up to a comfortable
   phone tap target; the two ends pin to the row's edges. Text is
   abbreviations only and each button clips its own overflow, so
   the row can never push the page wider. A disabled end is a span:
   dimmed, no border emphasis, no pointer. */
.gnav{display:flex;justify-content:space-between;gap:10px;margin:0 0 12px}
.gnav-btn{display:inline-flex;align-items:center;min-height:42px;box-sizing:border-box;
  border:1px solid var(--ink);background:var(--card);color:var(--ink);border-radius:8px;
  padding:9px 14px;font-size:13.5px;font-weight:700;text-decoration:none;white-space:nowrap;
  min-width:0;overflow:hidden;text-overflow:ellipsis}
a.gnav-btn:hover{text-decoration:underline}
.gnav-btn.dis{border-color:var(--line);color:var(--mut);opacity:.45;cursor:default}
.boxhead{border-bottom:2px solid var(--ink);padding-bottom:8px;margin-bottom:12px}
.boxhead h1{font-family:Georgia,"Times New Roman",serif;font-size:24px;margin:0 0 3px}
.boxhead .st{font-size:13px;color:var(--mut);font-weight:700}
.boxhead .st.live{color:#b3261e}
.boxhead .betline{font-size:13px;color:var(--mut);margin-top:2px}
/* Pregame preview (v1.9): records line + form/leaders rows under
   each team block on an unplayed game's page. Plain block rows —
   they wrap, never truncate, and nothing here can scroll sideways. */
.pvrec{font-size:13.5px;color:var(--mut);font-weight:700;margin:0 0 4px}
.pvrow{font-size:14px;line-height:1.45;padding:4px 0;border-bottom:1px dotted var(--line)}
.pvrow:last-child{border-bottom:none}
.pvres{font-weight:800}
.pvcat{font-weight:700}
.pvdate{color:var(--mut);font-size:12.5px}
/* ---------- AI recap (v1.5) ---------- */
.recapsec{margin:0 0 14px}
.recapbtn{border:1px solid var(--ink);background:var(--ink);color:var(--paper);border-radius:8px;
  padding:9px 16px;font-size:14px;font-weight:800;cursor:pointer;font-family:inherit;max-width:100%}
.recapbtn:disabled{opacity:.45;cursor:default}
.recappanel{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);
  padding:12px 14px;margin-top:10px;max-width:100%}
.recappanel[hidden]{display:none}
.recapscore{font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:16.5px;
  line-height:1.35;white-space:normal;overflow-wrap:break-word;margin-bottom:8px}
.recapscript{font-size:14.5px;line-height:1.6;margin:8px 0 2px;white-space:normal;overflow-wrap:break-word}
.recapmsg{font-size:14px;line-height:1.55;color:var(--mut)}
.recapnote{font-size:12px;line-height:1.45;color:var(--mut);margin-top:6px}
/* ---------- game flow + win probability (v1.8 Stage C) ----------
   One card under the line score: title row (+ tabs when a real WP
   series exists), a legend, the SVG (viewBox-scaled, so it fits a
   360px phone with no sideways scroll), an optional caption
   (period-totals label / shootout note) and the tap info line.
   The SVG is capped at 680px wide and centered (v1.9 fix): at full
   desktop content width (~1150px) a partial-game chart stretched
   enormous; the cap covers both panes (flow + win probability),
   which share the .flowsvg class. Phones are unaffected — the cap
   only bites above 680px of available width. */
.flowsec{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);
  padding:10px 12px 9px;margin-bottom:14px;max-width:100%}
.flowhead{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.flowtitle{font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:16px}
.flowtabs{display:inline-flex;gap:0;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.flowtab{border:0;background:transparent;color:var(--mut);font-family:inherit;font-size:12.5px;
  font-weight:700;padding:6px 10px;cursor:pointer;min-height:32px}
.flowtab.on{background:var(--ink);color:var(--paper)}
.flowleg{display:flex;gap:14px;margin:5px 0 2px;font-size:12px;font-weight:700;color:var(--mut)}
.flowleg .flleg{display:inline-flex;align-items:center;gap:5px}
.flowleg i{width:10px;height:10px;border-radius:2px;display:inline-block}
.flowsvg{display:block;width:100%;max-width:680px;height:auto;margin:0 auto}
.flowcap{font-size:12px;color:var(--mut);font-weight:700;margin-top:2px}
.flowsrc{font-size:11.5px;color:var(--mut);margin-top:2px}
.flowinfo{font-size:12.5px;line-height:1.45;color:var(--ink);margin-top:5px;min-height:18px;
  border-top:1px solid #eee7d5;padding-top:6px;overflow-wrap:break-word}
.flowpane[hidden]{display:none}
/* Share snapshot: a quiet pill in the chart card's head and in the
   detail page's head; the fallback panel (download / X intent /
   copy link) opens under it when the browser can't share files. */
.sharebtn{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:8px;
  padding:7px 13px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit;
  min-height:36px;margin-left:auto;white-space:nowrap}
.sharebtn:disabled{opacity:.45;cursor:default}
.sharefall{margin-top:10px;border-top:1px solid #eee7d5;padding-top:9px;max-width:100%}
.sharefall[hidden]{display:none}
section.sport>.sharefall{border-top:0;padding-top:2px;margin:2px 0 8px}
.sharefall .sfmsg{font-size:13px;font-weight:700;margin:0 0 7px}
.sharefall .sfrow{display:flex;flex-wrap:wrap;gap:8px}
.sharefall a.btn{display:inline-block;text-decoration:none}
.sharefall .sfbtn{min-height:36px}
.sharefall .sfnote{font-size:12px;line-height:1.45;color:var(--mut);margin:7px 0 0}
table.lines{width:100%;border-collapse:collapse;background:var(--card);
  border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;margin-bottom:14px}
table.lines th,table.lines td{padding:7px 8px;font-size:13.5px;text-align:right;border-bottom:1px solid #eee7d5}
table.lines th{font-size:10.5px;letter-spacing:1px;color:var(--mut)}
table.lines tr:last-child td{border-bottom:0}
table.lines td.tm,table.lines th.tm{text-align:left;font-weight:800}
table.lines td.tot{font-weight:900}
table.lines td.rhe{color:var(--mut)}
/* team stats comparison table (v1.6): one table, away value right-
   aligned, label centered, home value left-aligned; the better
   number carries .win. Fixed 27/46/27 columns so it fits a phone
   with no sideways scroll; labels may wrap, values never do. */
table.tstats{width:100%;border-collapse:collapse;background:var(--card);
  border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;margin-bottom:6px;
  table-layout:fixed}
table.tstats th.av,table.tstats td.av{width:27%}
table.tstats th.lb,table.tstats td.lb{width:46%}
table.tstats th,table.tstats td{padding:6.5px 8px;font-size:13.5px;border-bottom:1px solid #eee7d5}
table.tstats thead th{font-size:12.5px;font-weight:900;letter-spacing:.4px;
  border-bottom:2px solid var(--line)}
table.tstats tbody tr:last-child td{border-bottom:0}
table.tstats td.av,table.tstats th.av{text-align:right}
table.tstats td.hv,table.tstats th.hv{text-align:left}
table.tstats td.lb,table.tstats th.lb{text-align:center}
table.tstats td.lb{font-size:11px;letter-spacing:.8px;color:var(--mut);font-weight:800;
  text-transform:uppercase;overflow-wrap:break-word}
table.tstats td.av,table.tstats td.hv{font-weight:600;white-space:nowrap}
table.tstats td.win{font-weight:900}
.tsnote{color:var(--mut);font-size:12px;font-weight:700;margin:0 0 14px}
/* X highlights link (v1.6): a .btn sibling of the Recap button */
.hlbtn{display:inline-block;text-decoration:none;margin-left:8px;vertical-align:top}
/* Box-score player view toggle (By team / Combined): same segmented
   look as .flowtabs, its own classes so the two never cross-wire. */
.bxvtabs{display:inline-flex;gap:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;margin:16px 0 0}
.bxvtab{border:0;background:transparent;color:var(--mut);font-family:inherit;font-size:12.5px;
  font-weight:700;padding:6px 12px;cursor:pointer;min-height:36px}
.bxvtab.on{background:var(--ink);color:var(--paper)}
#bxCombined{margin:6px 0 0}
#bxCombined[hidden],.teamblock[hidden]{display:none}
.tmchip{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.6px;color:var(--mut);
  border:1px solid var(--line);border-radius:4px;padding:0 3px;margin-left:6px;vertical-align:1px}
table.bxc th.sorted.asc::after{content:"▴"}
/* Panel featured tables toggle direction like the Combined view;
   By-team tables on the box page never carry .asc, so this marker
   only ever shows in a panel (or if a By-team wiring ever toggles). */
table.bx th.sorted.asc::after{content:"▴"}
.teamblock{margin:18px 0 0}
.teamblock h2{font-family:Georgia,"Times New Roman",serif;font-size:19px;margin:0 0 4px}
.gname{font-size:11px;letter-spacing:1.6px;color:var(--mut);font-weight:800;margin:12px 0 5px}
table.bx{width:100%;border-collapse:collapse;min-width:560px}
table.bx th,table.bx td{padding:6.5px 6px;font-size:12.5px;text-align:right;
  border-bottom:1px solid #eee7d5;white-space:nowrap}
table.bx th{font-size:10px;letter-spacing:.8px;color:var(--mut);font-weight:800}
table.bx td.pl,table.bx th.pl{text-align:left;font-weight:600}
table.bx tr.tot td{font-weight:900;border-top:2px solid var(--line)}
table.bx tr.hl td{background:var(--hl)}
table.bx tr.dnp td{color:var(--mut)}
/* Basketball box tables (.bxfig, 2026-10-21): FG/3PT are no longer
   columns — their makes-attempts ride under PTS as a small muted
   figures line (the panel leaders' .figs treatment) — so the
   remaining columns take larger type than the shared box base. */
table.bx.bxfig th,table.bx.bxfig td{font-size:14px}
table.bx.bxfig th{font-size:11px}
table.bx.bxfig .figs{display:block;font-size:10.5px;font-weight:700;color:var(--mut);white-space:nowrap;line-height:1.3;margin-top:1px}
/* Full Leaders basketball tables (2026-10-21): the same figures line
   under PTS, now that FG/3PT are no longer columns there either —
   the panel/box .figs treatment at the same size; the Week board's
   micro tier steps it down with the rest of its type. */
table.ld .figs{display:block;font-size:10.5px;font-weight:700;color:var(--mut);white-space:nowrap;line-height:1.3;margin-top:1px}
table.ld.micro .figs{font-size:9.5px}
.pos{color:var(--mut);font-size:10.5px;font-weight:700;margin-left:5px}
.foot{max-width:1440px;margin:0 auto;padding:0 14px 26px;color:var(--mut);font-size:12px;line-height:1.6}

/* ---------- v1.4: sticky nav, search, favorites, performances,
   game-type tags, box jump chips ---------- */
.topnav{max-width:1440px;margin:0 auto;padding:5px 10px 7px;display:flex;flex-wrap:wrap;
  gap:4px 10px;align-items:center;border-top:1px solid var(--line);
  border-bottom:3px double var(--ink);background:var(--paper)}
.tn-all{font-weight:800;font-size:13px;text-decoration:none;white-space:nowrap;padding:5px 0}
.tn-all:hover{text-decoration:underline}
/* Desktop-only slim sticky nav: at >=1024px the sport-links row
   sticks as a <=38px bar; below 1024px NOTHING is sticky (the
   standing mobile rule). */
@media (min-width:1024px){
  .topnav{position:sticky;top:0;z-index:50;padding-top:3px;padding-bottom:3px}
  section.sport,.favsec,.perfsec{scroll-margin-top:52px}
}
.tn-links{display:flex;flex-wrap:wrap;gap:2px 7px}
.tn-links a{text-decoration:none;font-weight:800;font-size:12px;padding:5px 0;white-space:nowrap}
.tn-links a:hover{text-decoration:underline}
.sdot{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:4px;vertical-align:0}
.tn-date{margin-left:auto;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tn-date button{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:8px;
  padding:5px 8px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit}
.tn-date input[type="date"]{border:1px solid var(--line);background:var(--card);color:var(--ink);
  border-radius:8px;padding:4px 6px;font-size:12.5px;font-weight:700;font-family:inherit;width:124px}
.updated{color:var(--mut);font-size:11.5px;font-weight:700;white-space:nowrap}
/* Consolidated date cluster on small screens (v1.9): the arrows +
   label, Today/Yesterday and the picker wrap into compact rows of
   their own, left-aligned, with >=34px tap targets and no
   sideways page overflow. */
@media (max-width:760px){
  .tn-date{margin-left:0;row-gap:5px}
  .tn-date button,.tn-custom button{min-height:34px}
  .tn-date input[type="date"]{min-height:34px}
  .panel .drow .sup{font-size:10.5px}
}
.sport-date{font-family:Georgia,"Times New Roman",serif;font-size:15px;font-weight:700;color:var(--mut);white-space:nowrap;min-width:0}
section.sport,.favsec,.perfsec{scroll-margin-top:14px}
.teamblock,.gname{scroll-margin-top:14px}
.searchwrap{margin:0 0 14px}
.searchbox{width:100%;border:1px solid var(--line);background:var(--card);color:var(--ink);
  border-radius:8px;padding:9px 12px;font-size:14.5px;font-family:inherit}
.searchbox:focus{outline:2px solid var(--ink);outline-offset:0}
.searchres{margin-top:10px}
.noresults{padding:10px 12px;color:var(--mut);font-size:13px}
.drow.static{cursor:default}
.drow.static:hover{background:transparent}
.favstar{color:#b39a4a;font-size:15px;line-height:1;cursor:pointer;padding:2px 3px;
  flex:0 0 auto;user-select:none;-webkit-user-select:none}
.favstar:hover{color:#8a6d1e}
.favstar.on{color:#d9a416}
table.ld td.pl .favstar,table.bx td.pl .favstar{float:right;margin-left:4px}
/* League tag on mixed-league soccer tiles (v1.8): same chip shape
   as the game-type tag, muted so it reads as context, not status. */
.lgtag{border-color:var(--line);color:var(--mut);font-weight:800}
.gtag{display:inline-block;border:1px solid var(--ink);border-radius:4px;padding:0 4px;
  font-size:9.5px;font-weight:900;letter-spacing:.6px;vertical-align:1px}
.favsec,.perfsec{margin:0 0 26px}
.favrow{display:flex;gap:16px;flex-wrap:wrap;margin-top:6px;font-size:13px;font-weight:700}
.favrow .favstar{float:none;padding:0 2px 0 0}
.jumpchips{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 14px}
.jchip{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;
  padding:6px 12px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit}
.jchip:hover{border-color:var(--ink)}

/* ---------- Day | Week toggle + NCAAF scope (v1.3) ---------- */
.dw{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 8px}
.dw button{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;
  padding:7px 13px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit}
.dw button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.confsel{margin:0 0 10px}
.confsel label{font-size:12px;font-weight:800;letter-spacing:.6px;color:var(--mut);text-transform:uppercase}
.confsel select{margin-left:6px;border:1px solid var(--line);background:var(--card);color:var(--ink);
  border-radius:8px;padding:6px 8px;font-size:14px;font-weight:700;font-family:inherit;max-width:70vw}

/* ---------- front page v1.7: the panel grid (v1.8: seven panels) ----------
   Equal panels: 2 columns on phones/tablets, 3 columns at >=1024px
   (seven panels lay out 3/3/1 — the lone last-row panel keeps the
   standard column width, left-aligned, never stretched), rows 1fr
   so every panel in the grid shares a height.
   Panel content is BUDGETED — fixed strip lane (80px; 64px
   before the tile-lines change grew it to fit the compact
   pregame-line row), fixed leaders bar, three fixed 48px
   leader rows — so a busy day (15 NFL games) and a quiet one
   (2 NHL games) produce identical panel heights, and the
   loading skeleton occupies exactly the loaded height.
   (v1.8 reconciliation budget: the v1.9 leader-row growth
   43->48px is paid for by the strip lane 70->64, the leaders
   bar 28->26 + its margin, the strip margin 6->4, and the
   heading floor 74->70 — net zero, skeleton in lockstep.
   Tile lines then grew the lane 64->80 uniformly in every
   panel — net +16px per panel, skeleton in lockstep again.) */
/* Homepage sections (2026-10-21 redesign): ONE COMPACT FULL-WIDTH
   SECTION PER SPORT, stacked — no two-across grid, no equal-height
   rows. Each section's height is its content's height. */
.frontgrid{display:flex;flex-direction:column;gap:12px;margin:0 0 26px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);
  padding:7px 10px;display:flex;flex-direction:column;margin:0;min-width:0;
  container-type:inline-size}
/* The heading is two deterministic rows: .p-top (dot + name + the
   game count + the leaders link) and .p-meta (date + season chip +
   scope selector). .p-meta's min-height reserves its loaded height
   while the panel is still a skeleton, so skeleton and loaded
   panels match (acceptance (g)); .p-head's min-height is the
   belt-and-braces floor for the pair. */
.p-head{border-bottom:2px solid var(--ink);padding-bottom:4px;margin-bottom:6px;
  min-height:70px;flex-direction:column;flex-wrap:nowrap;align-items:stretch;row-gap:0}
.p-top{display:flex;align-items:center;gap:8px;min-width:0}
/* Stage B alignment: the meta row reserves the SAME 30px in every
   panel — with or without a scope selector — so the score strips
   and leaders blocks start at the same Y across a desktop row.
   (Before, .p-meta reserved 24px while a scope <select> actually
   occupies ~28-30px, so scoped panels' strips sat lower.) */
.p-meta{display:flex;align-items:center;flex-wrap:wrap;gap:3px 8px;margin-top:3px;min-height:30px}
.panel .sport-name{font-size:19px;white-space:nowrap}
.p-count{font-size:11px;color:var(--mut);font-weight:700;white-space:nowrap}
/* Narrow panels (phone columns and desktop's ~335px thirds): the
   heading row trades a little type size for air so name + game
   count + leaders link always fit (v1.9 heading-fit hardening —
   the 24-width sweep in panel-check guards this). */
@container (max-width:340px){
  .panel .sport-name{font-size:16.5px}
  .p-count{font-size:10.5px}
  .p-top{gap:5px}
  .panel .p-head .sport-full{font-size:12px}
}
/* Narrow panels ONLY (concept tiles): the tile text room is
   ~90-100px, and the longest realistic line ("MIL −20.5 · O/U
   231.5") overflows it at the base size, so the line and the
   status step down a notch in narrow panels to stay on one line
   (panel-check (o) measures the fit at 1440/390/360). */
@container (max-width:380px){
  .panel .gtile .ln{font-size:9px;letter-spacing:-.5px}
  .panel .gtile .gst{font-size:10px;letter-spacing:-.2px}
}
.p-date{display:inline-flex;align-items:center;min-width:0}
.p-dt{font-family:Georgia,"Times New Roman",serif;font-weight:700;color:var(--mut);
  font-size:14px;white-space:nowrap}
.p-fb{display:inline-block;background:#fdf6e0;border:1px solid #ecd9a0;color:#8a6d1e;
  border-radius:999px;padding:1px 8px;font-size:11.5px;font-weight:800;white-space:nowrap}
.p-chips{display:inline-flex;align-items:center}
.p-chip{display:inline-block;border:1px solid var(--ink);border-radius:999px;padding:1px 8px;
  font-size:10.5px;font-weight:900;letter-spacing:.6px;text-transform:uppercase;white-space:nowrap}
/* Offseason (Stage B): dashed + muted — visibly a different kind of
   state from the solid Preseason/Postseason chips, and never a
   replacement for the fallback pill that names the results date. */
.p-chip.offseason{border-style:dashed;border-color:var(--mut);color:var(--mut)}
.p-scope{display:inline-flex;align-items:center}
.panel .confsel{margin:0;display:inline-flex;align-items:center}
.panel .confsel label{font-size:10.5px}
.panel .confsel select{margin-left:5px;padding:3px 6px;font-size:12.5px;max-width:158px;border-radius:999px}
/* Full-leaders link on the heading's sport-name row (v1.7.1; it
   lived in a panel footer before): right-aligned via the base
   .sport-full margin-left:auto, one line, a >=36px tap target.
   Which label shows is a PANEL-width question, not a viewport one
   (v1.9 heading-fit, ported in the v1.8 reconciliation): main is
   capped at 1440px (concept build, 2026-10-21; was 1060px), so a
   narrow panel can be ~335px wide no
   matter how wide the window gets, and the FULL label there
   (name + "Full NCAA MBB leaders") overflowed the box when the
   switch keyed on the viewport. The panel is a size container
   (see .panel) and the full label appears only when the panel
   itself is at least 440px wide — in practice the wide
   two-column band. Everywhere else the compact "Full leaders"
   takes over — the panel names the sport. Without container-
   query support the compact label shows at every width, which
   always fits. */
.panel .p-head .sport-full{display:inline-flex;align-items:center;min-height:36px;
  padding:2px 0 2px 6px;font-size:12.5px}
.fl-long{display:none}
.fl-short{display:inline}
@container (min-width:440px){
  .panel .fl-long{display:inline}
  .panel .fl-short{display:none}
}
/* in-panel game tiles (concept, 2026-10-21; redesign same day):
   the section body is two zones in a .pbody flex row — the slate
   as a WRAPPING GRID of compact bordered tiles on the LEFT
   (~55%), the Leaders block on the RIGHT (~45%). No scroll
   strip, no arrows, no peek: tiles are compact, latest-first,
   and the zone renders the WHOLE slate at content height (the
   page scrolls, never the zone). The compact betting-line row
   (.gtile .ln) rides under the team rows, above the "Box score"
   foot; sports whose feeds carry no odds (MLB) simply leave it
   out. At <=700px the zones stack (tiles above leaders) — see
   the phone block. */
.pbody{display:flex;gap:14px;align-items:flex-start}
/* Content-driven heights (2026-10-21 redesign): no fixed panel
   height at any width — the tiles zone shows the whole slate and
   the page scrolls, never the zone. */
.ptiles{flex:1 1 55%;min-width:0}
.ptiles-none{overflow:visible}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
/* Tile height is UNIFORM at 104px: status + two team rows + the
   betting-line row + the "Box score" foot. (The concept's 88px
   could not fit its own content — the line row and foot were
   clipped, the user's 2026-10-21 screenshot — so tiles now carry
   the height their content needs, and the fitted skeleton's
   ghost tiles match by construction.) */
.gtile{display:flex;flex-direction:column;height:104px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--rad);padding:6px 7px;
  text-decoration:none;color:var(--ink)}
.gtile:hover{border-color:var(--ink)}
.gtile .gst{font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  color:var(--mut);margin-bottom:2px;white-space:nowrap;overflow:hidden}
.gtile .gst.live{color:#b3261e}
.gtile .row{display:flex;align-items:center;gap:5px;font-size:13px;padding:1px 0}
.gtile .ab{font-weight:700;width:34px;flex:0 0 auto}
.gtile .row.win .ab,.gtile .row.win .sc{font-weight:900}
.gtile .sc{margin-left:auto;font-weight:800}
.gtile .row.dim{color:var(--mut)}
.gtile .ln{font-size:9.5px;letter-spacing:-.3px;color:var(--mut);font-weight:600;white-space:nowrap;overflow:hidden;margin-top:1px}
.gtile .gbox{margin-top:auto;padding-top:3px;font-size:11.5px;font-weight:600;color:var(--mut)}
/* leaders zone: category select + the leaders board (markup
   floor of 7 rows, rows 4+ are .xrow — top 3 visible collapsed
   at every width; "Show more" opens the board in 10s). */
.panel .plead{flex:1 1 45%;min-width:0;display:flex;flex-direction:column}
.panel .plead-wrap{min-height:0}
/* Leaders depth (2026-10-21 redesign; stepped 2026-10-21):
   THREE rows visible by default at EVERY width — rows past 3
   (.xrow) render in markup but stay hidden until the reader
   expands the board in place ("Show more": 10, then +10 per
   click up to the pool; "Show less" back to 3); the expansion
   state lives on .plead-wrap.expanded. */
.panel .plead-board .drow.xrow{display:none}
.panel .plead-wrap.expanded .plead-board .drow.xrow{display:flex}
.showmore{margin-top:6px;align-self:flex-start;display:inline-flex;align-items:center;
  border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:8px;
  padding:5px 12px;font-size:12px;font-weight:800;font-family:inherit;cursor:pointer;min-height:28px}
.showmore:hover{border-color:var(--ink)}
/* Concept lead bar: the LEADERS label stacks above the category
   select, which runs the full width of the leaders zone (the
   mock's arrangement, at every width — the phone block below only
   adds the taller touch target). */
.panel .plead-bar{flex-wrap:wrap}
.panel .plead-title{flex:1 1 100%}
.plead-bar{display:flex;align-items:center;gap:8px;margin:0 0 4px;min-height:26px}
.plead-title{font-size:12px;letter-spacing:1.6px;color:var(--mut);font-weight:800;text-transform:uppercase}
.pcat{flex:1;min-width:0;border:1px solid var(--line);background:var(--card);color:var(--ink);
  border-radius:8px;padding:5px 8px;font-size:13.5px;font-weight:700;font-family:inherit;cursor:pointer}
.panel .plead-board .drow{min-height:48px;padding-top:0;padding-bottom:0}
/* Concept leader rows: team NAME in gray under the player name
   (no rank, no matchup line, no supporting line on panels). */
.drow .tm{display:block;color:var(--mut);font-size:12px;line-height:1.3;white-space:nowrap;overflow:hidden}
/* The supporting-stat line (v1.9): value-first, quieter than the
   headline value, under the matchup/status line. (Detail/search
   rows only now — front-panel rows dropped it in the concept.) */
.drow .sup{display:block;color:var(--mut);font-size:11px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.panel .plead-board .none{display:flex;align-items:center;padding:14px 12px;gap:8px;flex-wrap:wrap}
/* OTHER SPORTS (concept, 2026-10-21): phone-only section after
   the grid holding the sports whose displayed slate is empty for
   the requested date. Hidden entirely on desktop; at <=700px the
   section shows (unless [hidden] — no sport collapsed) and each
   lit row (.on, set by paintPanelHead) is a name + fallback
   status line + Full leaders link. The matching panels carry
   .fb-panel and are display:none at <=700px (phone block). */
.othersec{display:none}
.other-head{font-size:12px;letter-spacing:1.6px;color:var(--mut);font-weight:800;text-transform:uppercase;margin:0 0 2px}
.orow{display:none;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px solid var(--line)}
.orow.on{display:flex}
.or-main{flex:1;min-width:0}
.or-name{font-weight:800;font-size:15px}
.or-status{color:var(--mut);font-size:12.5px;margin-top:1px}
.or-link{font-weight:800;font-size:12.5px;text-decoration:none;white-space:nowrap;color:var(--ink)}
/* Latest mode additions (2026-10-21 redesign). The "Up next"
   strip: today's unplayed games as a schedule strip (shared
   strip chips) under a yesterday-main section — a schedule, not
   scores, and the only second date a section ever shows. */
.upnext{margin-top:10px;border-top:1px dashed var(--line);padding-top:7px}
.upnext-label{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--mut);font-weight:800;margin:0 0 5px}
/* Last-played compact summary: the expand control + the next
   scheduled game stay visible; the results hide behind it. */
.lp-toggle{display:inline-flex;align-items:center;border:1px solid var(--line);background:var(--card);
  color:var(--ink);border-radius:8px;padding:5px 12px;font-size:12px;font-weight:800;
  font-family:inherit;cursor:pointer;min-height:28px;margin:0 0 8px}
.lp-toggle:hover{border-color:var(--ink)}
.lp-main[hidden]{display:none}
.lp-next{font-size:12.5px;color:var(--mut);font-weight:700;padding:1px 0 3px}
/* Refresh-failure marker (spec §8) + the shared Retry button. */
.p-stale{background:#fdeceb;border:1px solid #e5a49e;color:#8c2b23;border-radius:8px;
  padding:6px 9px;font-size:12.5px;font-weight:700;margin:0 0 8px}
.p-stale[hidden]{display:none}
.retrybtn{display:inline-flex;align-items:center;border:1px solid currentColor;background:transparent;
  color:inherit;border-radius:8px;padding:3px 10px;font-size:12px;font-weight:800;
  font-family:inherit;cursor:pointer;min-height:26px;margin-left:6px}
/* Phone-width section expand for inactive Latest sections; the
   button only exists visually inside the <=700px block. */
.sec-toggle{display:none}
/* Date cluster: the active mode/date button. */
.tn-date button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.panel .drow .val{font-size:17px}
.vunit{font-size:10.5px;font-weight:800;color:var(--mut);letter-spacing:.4px;flex:0 0 auto}
/* Panel Points rows, basketball (2026-10-21): the shooting line
   under the points value. Only rows WITH figures get the stacked
   value column (.valcol, right-aligned so values and figures share
   the column's right edge); every other row keeps the plain
   .val + .vunit pair with identical markup and geometry. */
.panel .plead-board .valcol{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end}
.panel .plead-board .vrow{display:flex;align-items:center;gap:9px}
.panel .plead-board .figs{font-size:10.5px;font-weight:700;color:var(--mut);white-space:nowrap;line-height:1.3;margin-top:1px}
/* Basketball panel rows (2026-10-21, depth build): the extra
   core-stat line under the team name — the player's other core
   stats from the same game (REB/AST/STL/+/-; PTS swapped in
   when it isn't the headline). Same muted register as the team
   line, one step smaller; the row grows past its 48px floor to
   fit it. The two depth buttons sit side by side when both
   show (open past 3 with pool remaining). */
.panel .plead-board .drow .xline{display:block;color:var(--mut);font-size:11px;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;margin-top:1px}
.plead-wrap .showmore+.showmore{margin-left:6px}
/* ---------- Customize sports editor (Stage B) ----------
   Inline panel in the newspaper style, rendered above the grid and
   hidden until the topnav's "Customize sports" button opens it. */
.custedit{background:var(--card);border:1px solid var(--ink);border-radius:var(--rad);
  padding:12px 14px;margin:0 0 14px}
.cust-head{display:flex;align-items:baseline;gap:6px 12px;flex-wrap:wrap;margin:0 0 8px}
.cust-head h3{font-family:Georgia,"Times New Roman",serif;font-size:17px;font-weight:700;margin:0}
.cust-note{color:var(--mut);font-size:12.5px}
.cust-rows{display:flex;flex-wrap:wrap;gap:4px 16px;margin:0 0 10px}
.cust-row{display:inline-flex;align-items:center;gap:8px}
.cust-lab{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:14px;
  padding:6px 2px;cursor:pointer;min-height:36px}
.cust-row input{width:17px;height:17px;accent-color:var(--ink);flex:0 0 auto;cursor:pointer}
.cust-mv{display:inline-flex;gap:2px}
.mvb{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:8px;
  font-size:11px;line-height:1;cursor:pointer;padding:0}
.mvb:hover{border-color:var(--ink)}
.mvb.off{opacity:.3}
.cust-floatrow{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:14px;
  min-height:36px;cursor:pointer;margin:0 0 10px}
.cust-floatrow input{width:17px;height:17px;accent-color:var(--ink);flex:0 0 auto;cursor:pointer}
#custResetOrder[hidden]{display:none}
.cust-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cust-hint{color:#b3261e;font-size:12.5px;font-weight:700}
.cust-spacer{flex:1}
.cust-save{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.cust-save:disabled{opacity:.4;cursor:default}

/* loading skeleton — same fixed heights as the loaded panel body */
.skel-note{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skel-tiles{display:flex}
.skel-chip{flex:1;background:#efe9da;border-radius:var(--rad)}
.skel-cat{flex:1;height:30px;background:#efe9da;border-radius:8px}
.skel-board{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);overflow:hidden}
.skel-row{height:48px;border-bottom:1px solid #eee7d5;background:#f3eee0}
.skel-row:last-child{border-bottom:0}
/* The generic shell shows the same THREE leader rows the loaded
   board shows by default (rows 4-7 wait for "Show more"). */
.skel-board .skel-row.xrow{display:none}
/* Fitted skeleton (post-resolution): ghost tiles mirror the
   .gtile geometry exactly (same height/border/radius, ghost
   colors) under their own class; the ghost "Show more" bar
   matches the real button. */
.skel-gtile{height:104px;background:#f3eee0;border:1px solid #eee7d5;border-radius:var(--rad);pointer-events:none}
.skel-more{height:28px;margin-top:6px;background:#f3eee0;border-radius:8px}
@media (max-width:640px){
  /* Stage B mobile trim: slightly tighter grid gaps/padding and
     less dead space under the grid — leader names/values keep
     their sizes, and the sideways lock is untouched. */
  .frontgrid{gap:10px;margin-bottom:18px}
  .panel{padding:6px 8px}
  /* In a narrow panel the heading link wraps under the sport name
     rather than forcing the name row wider than the panel. */
  .p-top{flex-wrap:wrap}
  /* Two columns, generous touch targets: the category select goes
     full-width at >=38px tall; names wrap (never ellipsized). */
  .plead-bar{flex-wrap:wrap}
  .plead-title{flex:1 1 100%}
  .pcat{flex:1 1 100%;min-height:38px}
  .skel-cat{flex:1 1 100%;min-height:38px}
  .panel .sport-name{font-size:16.5px}
  .p-dt{font-size:12px}
  /* The fallback pill may wrap to two lines inside a narrow panel
     rather than forcing the heading wider than the panel. */
  .p-fb{font-size:10.5px;padding:1px 6px;white-space:normal;line-height:1.3;text-align:center}
  .p-date{flex:1 1 auto}
  /* The scope select sizes to its widest option ("Power 4 + Notre
     Dame") — wider than a phone panel. Cap it to the heading and
     visually hide the SCOPE/LEAGUE word (the select shows it). */
  .p-scope{min-width:0;flex:0 1 auto}
  .panel .confsel .conflab{display:none}
  .panel .confsel select{margin-left:0;max-width:138px}
  .gtile .ab{width:32px}
  /* Concept leader rows stay on one line at phone widths: name +
     team stacked in .who, value + unit at the right (the old
     rank/star wrap-drop rules went with the rich row format). */
  .panel .drow .nm{font-size:13.5px}
  .panel .drow .val{font-size:16px}
}

/* ---------- phone table layouts (<=700px) ----------
   Box-score tables (table.bx) keep the fitted layout: fixed layout
   with the per-column widths app.js measures from the actual content
   (the <colgroup> it emits) inside the 342px budget — all stat
   columns stay, number cells never wrap, and nothing scrolls
   sideways. Player names are NEVER truncated: the player cell wraps
   the name onto two lines (at a space or hyphen) instead of
   ellipsizing it, and app.js floors the player column at the longest
   single name-word.
   Full Leaders tables (table.ld) follow the same fit since the
   user's 2026-10-22 directive: leadersFit in app.js measures the
   shown columns into FIT_BUDGET — basketball without MIN (and
   without GP on the Week/Month shapes; both stay in the grid at
   0 width, hidden by the .cx rules below, so desktop is
   untouched) — the colgroup sums to 342 and width:100% scales it
   to the wrapper. No sideways scroll, no sticky columns; the page
   itself never scrolls sideways either. (This supersedes the
   2026-10-21 scroll design and its same-night tightening.)
   Above 700px the colgroup widths are ignored and the roomy
   desktop layout applies to both. */
@media (min-width:701px){
  table.ld col,table.bx col{width:auto!important}
  /* Leaders tables emit no inline width (the phone fit lives in
     the colgroup); desktop keeps its full-width layout regardless. */
  table.ld{width:100%!important}
}
@media (max-width:700px){
  /* Phone widths: panels go ONE across, full width, stacked in
     display order (user spec, 2026-10-20). */
  .frontgrid{grid-template-columns:1fr}
  main{padding:12px 8px 30px}
  /* Concept panels (2026-10-21): the two zones stack — tiles grid
     (3 across, three tile-rows tall, vertical scroll beyond)
     above the leaders; leaders show the TOP 3 (rows 4-7 hidden,
     board + empty state shrink to 3 rows in lockstep, skeleton
     rows gate identically). */
  .pbody{flex-direction:column;align-items:stretch}
  .tgrid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}
  .ptiles{flex:0 0 auto}
  .ptiles-none{flex:0 0 auto;height:auto}
  /* Latest mode, phone widths (spec §7): an INACTIVE section
     (last-played, bare) collapses to its heading + a compact
     expand row; expanding shows the body in place. This is the
     OTHER SPORTS idea generalized inside the section list —
     explicit-date views keep the OTHER SPORTS block below. */
  .panel.mob-collapsed:not(.sec-open) .sec-body{display:none}
  .panel.mob-collapsed .sec-toggle{display:inline-flex;align-items:center;
    border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:8px;
    padding:5px 12px;font-size:12px;font-weight:800;font-family:inherit;cursor:pointer;
    min-height:30px;margin-top:6px}
  /* Fallback / bare-day sports collapse into OTHER SPORTS rows:
     their panels leave the grid, the section shows instead. */
  .panel.fb-panel{display:none}
  .othersec{display:block;margin:-6px 0 20px}
  .othersec[hidden]{display:none}
  .twrap{overflow-x:visible}
  table.bx{min-width:0;width:100%;table-layout:fixed}
  /* Leaders tables: the one-width fit (2026-10-22) — the emitted
     colgroup sums to FIT_BUDGET and width:100% scales it to the
     wrapper exactly, like table.bx. Cell padding is the box
     tables' 1px/side: at 4px the padding alone ate 6px per column
     and the basketball set could not fit honestly. */
  table.ld{min-width:0;width:100%;table-layout:fixed}
  table.ld th,table.ld td{padding:7px 1px;font-size:11px;white-space:nowrap;overflow:hidden}
  table.ld th{font-size:9px;letter-spacing:.3px}
  table.ld.micro th,table.ld.micro td,table.ld.ldmicro th,table.ld.ldmicro td{font-size:9px;padding:7px 1px}
  table.ld.micro th,table.ld.ldmicro th{font-size:7px;letter-spacing:.1px}
  /* The under-PTS figures line at its phone size (leadersFit
     reserves the PTS column from the widest line over the pool). */
  table.ld .figs{font-size:10px}
  table.ld.micro .figs,table.ld.ldmicro .figs{font-size:8.5px}
  table.ld th.rk,table.ld td.rk{padding-left:3px;padding-right:3px;width:auto}
  /* The leaders dropped columns (2026-10-22): basketball MIN — and
     GP on the Week/Month shapes — stay in the grid at 0 width with
     invisible text, exactly the box tables' dropped-column
     treatment below (display:none / visibility:collapse on a
     middle column breaks Chrome's fixed layout and zeroes the
     LAST column). Desktop ignores the colgroup and has no .cx
     rules, so MIN/GP render there as before. The tier classes:
     "micro" is the Week/Month board's forced tier (unchanged);
     "ldmicro" is the same phone fonts for a Day/Season board
     whose fit fell back — a separate class so no base-width rule
     (the desktop .figs size) can see it. */
  table.ld col.cx-min,table.ld col.cx-gp{width:0!important}
  table.ld th.cx-min,table.ld td.cx-min,table.ld th.cx-gp,table.ld td.cx-gp{font-size:0;visibility:hidden;padding:0;letter-spacing:0}
  table.bx th,table.bx td{padding:6px 1px;font-size:10px;white-space:nowrap;overflow:hidden}
  table.bx th{font-size:8px;letter-spacing:.2px}
  table.bx.micro th,table.bx.micro td{font-size:9px}
  table.bx.micro th{font-size:7px;letter-spacing:.1px}
  table.bx.dense th,table.bx.dense td{font-size:8.5px}
  table.bx.dense th{font-size:7px;letter-spacing:.1px}
  /* Phone readability (2026-10-20): the box columns boxFit drops in the
     micro tier (OREB/DREB/PF — see BOX_DROP in app.js) leave the phone
     layout entirely, and the kept columns use the freed room at 11px. */
  /* The dropped cells must stay table-cell: display:none (or a
     collapsed col) makes Chrome's fixed layout re-grid the table to
     fewer columns and the trailing +/- column loses its width
     (fit-check probe, 2026-10-20). Zero-width cols + zero-size,
     invisible cell text keeps the grid 1:1 and paints nothing. */
  table.bx col.cx-oreb,table.bx col.cx-dreb,table.bx col.cx-pf,table.bx col.cx-to{width:0!important}
  table.bx th.cx-oreb,table.bx td.cx-oreb,table.bx th.cx-dreb,table.bx td.cx-dreb,table.bx th.cx-pf,table.bx td.cx-pf,table.bx th.cx-to,table.bx td.cx-to{font-size:0!important;letter-spacing:0;visibility:hidden;padding:0}
  table.bx.micro.bxdrop th,table.bx.micro.bxdrop td{font-size:12px;padding:6px 0}
  table.bx.micro.bxdrop th{font-size:9px;letter-spacing:.1px}
  /* Basketball bxdrop tables (.bxfig) render at the larger fonts
     boxFit measures for them (13px cells / 10px headers), and their
     under-PTS figures line at its measured 10px. */
  table.bx.micro.bxdrop.bxfig th,table.bx.micro.bxdrop.bxfig td{font-size:13px}
  table.bx.micro.bxdrop.bxfig th{font-size:10px}
  table.bx.bxfig .figs{font-size:10px}
  table.bx.micro.bxdrop th.pl,table.bx.micro.bxdrop td.pl{padding-left:4px}
  table.ld td.pl .pname{display:block;font-size:11px;white-space:normal;overflow:visible;line-height:1.2;overflow-wrap:break-word}
  table.ld td.pl .pmeta{display:block;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25;overflow-wrap:break-word}
  table.bx td.pl{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.18;overflow-wrap:break-word}
  table.lines{table-layout:fixed}
  table.lines th,table.lines td{padding:6px 1px;font-size:11.5px;white-space:nowrap;overflow:hidden}
  table.lines th{font-size:9px;letter-spacing:.3px}
  table.lines th.tm,table.lines td.tm{width:42px}
  table.tstats th,table.tstats td{padding:6px 4px;font-size:12.5px}
  table.tstats thead th{font-size:11.5px}
  table.tstats td.lb{font-size:9.5px;letter-spacing:.5px}
}