/* Daily Box Stats — light "sports section" aesthetic, mobile-first, no frameworks. */
:root{
  --paper:#f7f4ec; --card:#fffdf8; --ink:#1c1a15; --mut:#655e4f; --line:#ddd6c4;
  --hair:#eee7d5; --hover:#faf6ea; --live:#b3261e; --sorted:#b3541e;
  --note-bg:#fdf6e0; --note-line:#ecd9a0; --note-ink:#8a6d1e;
  --cb-bg:#fff8d2; --cb-line:#e3d189;
  --stale-bg:#fdeceb; --stale-line:#e5a49e; --stale-ink:#8c2b23;
  --star:#b39a4a; --star-hover:#8a6d1e; --star-on:#d9a416;
  --skel:#efe9da; --skel2:#f3eee0;
  --drvrz:rgba(179,38,30,.07);
  --nba:#c75b26; --nfl:#6b4f2a; --mlb:#b03046; --nhl:#2f6f8f; --ncaaf:#2e6b46; --soccer:#62449e; --ncaab:#a67c00; --ufc:#9c2b2b;
  --acc:#1c1a15; --hl:#fff1b8; --rad:10px; --up:#1e7d46; --dn:#b3261e;
}
/* Night mode (2026-10-22): AUTO by default — index.html's boot
   script (and app.js after it) sets <html data-theme="dark"> when
   the OS is in dark mode and the reader hasn't forced light
   (localStorage dbs-theme="light", via the masthead button). The
   dark palette is a pure variable swap: every surface below reads
   the same custom properties in both themes, so layout, sizes and
   breakpoints are identical by construction. --mut keeps the light
   theme's ~6.4:1 contrast against --card (the readability pass
   must not regress); sport accents are brightened one step so the
   text links and dots stay legible on the dark card, and
   color-scheme tells the browser to render native controls
   (date input, selects, scrollbars) dark too. Share snapshot
   cards are NOT themed — they always render the light palette
   (see app.js share module). */
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#171512; --card:#211e18; --ink:#ece7d9; --mut:#aa9f83; --line:#3f3a2e;
  --hair:#332f27; --hover:#2a271e; --live:#f0645a; --sorted:#e07f3e;
  --note-bg:#332d12; --note-line:#6e5c20; --note-ink:#e6c86e;
  --cb-bg:#2e2a10; --cb-line:#6e5c20;
  --stale-bg:#3a1d1a; --stale-line:#7c443c; --stale-ink:#f2a49b;
  --star:#c9ab58; --star-hover:#e6c86e; --star-on:#e3b93e;
  --skel:#26231b; --skel2:#2b281f;
  --drvrz:rgba(240,100,90,.10);
  --nba:#e07f45; --nfl:#bb9257; --mlb:#e0687e; --nhl:#5ea6c9; --ncaaf:#5cab7d; --soccer:#a68ad9; --ncaab:#d9a92c; --ufc:#e07a7a;
  --acc:#ece7d9; --hl:#4a3d13; --up:#5cab7d; --dn:#f0645a;
}
*{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}
/* (No <=760px display:none here anymore — the tagline renders on
   phones too, on its own masthead line; see "Tagline on phones"
   after the one-row masthead block below.) */
/* 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}
/* One-row masthead (2026-10-23). */
.mast-in{column-gap:8px;padding-left:10px;padding-right:10px}
.brand{font-size:22px}
.mast-hi a{padding:5px 7px}}
@media (min-width:360px) and (max-width:760px){.mast-in{flex-wrap:nowrap}}
/* Tagline on phones (2026-10-27, Brian's call): the tagline is the
   secret minors door (app.js wireMilbDoor), so the old <=760px
   display:none made the door desktop-only. It now renders on
   phones too, on its OWN line under the brand row: order:9 parks
   it after the brand · Highlights pill · theme button, so the
   first row is exactly the one-row phone masthead as built;
   flex-basis:100% gives the tagline the full width, centered
   like the desktop cluster, same type treatment (12px,
   var(--mut), from .tagline above). The flex-wrap:wrap here
   supersedes the 360-760 nowrap for .mast-in so the tagline can
   take line 2; the first row still fits one line at every width
   where it did before. */
@media (max-width:760px){
  .mast-in{flex-wrap:wrap}
  .tagline{display:block;order:9;flex:0 0 100%;text-align:center}
}
/* Night-mode toggle (2026-10-22): a compact icon button at the
   end of the masthead line. Two states only — auto (moon, filled
   with ink while night mode is actually showing) and forced
   light (hollow moon; app.js keeps aria-label/title in step).
   Icon-only and fixed-size so the masthead line keeps its height:
   28px on desktop (under the brand's ~28px line), 32px on phones
   (under the Highlights pill's 34px min-height, which sets the
   phone row height either way). */
.themebtn{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:8px;
  width:28px;height:28px;padding:0;font-size:15px;line-height:1;cursor:pointer;font-family:inherit;
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;align-self:center}
.themebtn:hover{border-color:var(--ink)}
.themebtn.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
@media (max-width:760px){.themebtn{width:32px;height:32px;font-size:16px}}
/* 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:var(--cb-bg);border:1.5px solid var(--cb-line);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:var(--live)}
/* 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}
.gchip .tvln{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 var(--hair)}
.drow:last-child{border-bottom:0}
.drow:hover{background:var(--hover)}
.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 var(--hair);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:var(--hover)}
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:var(--sorted);font-weight:900}
/* Phone two-row leaders blocks (user directive 2026-10-23 evening):
   leadersBlocksHtml in app.js renders one .ld2 block list alongside
   every Full Leaders table; it is displayed ONLY at phone widths —
   the <=700px block below hides table.ld there and shows .ld2
   instead. Desktop never sees the blocks. */
.ld2{display:none}
/* 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:var(--sorted);font-weight:900}
.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:var(--note-ink);background:var(--note-bg);border:1px solid var(--note-line);border-radius:8px;font-size:12.5px;padding:6px 9px;margin:0 0 10px}
.livedot{width:8px;height:8px;border-radius:50%;background:var(--live);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:var(--live);
  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 .hdrec{font-size:16px;font-weight:700;color:var(--mut);white-space:nowrap}
.boxhead .st{font-size:13px;color:var(--mut);font-weight:700}
.boxhead .st.live{color:var(--live)}
.boxhead .betline{font-size:13px;color:var(--mut);margin-top:2px}
/* COMBO37: the live-drive line in the box header — same size and
   weight as the status line, ink-colored so it reads as current
   fact (not metadata), the possessing team's abbreviation in the
   live red, and the Red zone tag as a small live-red chip. */
.boxhead .driveline{font-size:13px;font-weight:700;margin-top:3px}
.boxhead .sitblock{margin-top:3px}
.boxhead .sitblock .driveline{margin-top:0}
.boxhead .sitlast{font-size:12.5px;line-height:1.4;margin-top:2px}
.boxhead .sitdrive{font-size:12px;font-weight:700;color:var(--mut);margin-top:1px}
.boxhead .driveline .dlteam{color:var(--live);font-weight:800}
.boxhead .driveline .dlrz{background:var(--live);color:#fff;font-size:10px;font-weight:800;letter-spacing:.4px;padding:1px 5px;border-radius:3px;vertical-align:1px;white-space:nowrap}
/* GAMEHEADER (2026-10-26): the prominent score strip inside
   .boxhead — the score is the largest type on the game page.
   Away reads abbr-then-number, home number-then-abbr, mirroring
   the matchup title's away-at-home order; the trailing team's
   number mutes on finals only (.sc-lose). Numbers never wrap
   or shrink (flex none on the digits); the strip is centered
   and fits one-width down to 320px. */
.scstrip{display:flex;align-items:baseline;justify-content:center;gap:14px;margin:3px 0 2px}
.scstrip .sc-cell{display:flex;align-items:baseline;gap:8px;min-width:0}
.scstrip .sc-ab{font-size:13px;font-weight:800;letter-spacing:.6px;color:var(--mut);white-space:nowrap}
.scstrip .sc-n{font-size:36px;font-weight:900;line-height:1;white-space:nowrap}
.scstrip .sc-n.sc-lose{color:var(--mut)}
.scstrip .sc-sep{font-size:20px;font-weight:700;color:var(--mut)}
.boxhead .tvline{font-size:13px;color:var(--mut);margin-top:2px}
.boxhead .tvline a.tvwatch{color:inherit;text-decoration:underline;text-underline-offset:2px}
.boxhead .tvnote{font-size:11.5px;color:var(--mut);margin-top:1px}
/* 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}
/* Stakes line (combo17): one quiet muted line under the preview's
   matchup header — same register as the betline, no card, no border. */
.pvstakes{font-size:13px;color:var(--mut);margin:0 0 12px}
.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}
.pvord{display:inline-block;min-width:15px;color:var(--mut);font-weight:700}
.pvpos{color:var(--mut);font-size:12.5px;font-weight:700}
.pvstat{color:var(--mut);font-size:12.5px;font-weight:600;line-height:1.35;margin:1px 0 1px 19px}
/* ---------- 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 var(--hair);padding-top:6px;overflow-wrap:break-word}
.flowpane[hidden]{display:none}
/* COMBO46: NHL game-page cards (goal timeline + shots/team bars).
   Both ride the .flowsec card shell; every color is a palette var
   or a flow-guarded team color carried inline (with data-cl /
   data-cd for the theme flip, the .tsg-bar pattern), so the cards
   follow night mode like the other analysis cards. The goal rows
   are a plain strip list: when · who · running score. The bar
   rows mirror the team-stats table's symmetry: away value + bar
   growing toward the centre label, home bar + value outside. */
.nhlgoals{margin-top:2px}
.nhlg{display:flex;align-items:baseline;gap:8px;padding:5px 0;border-bottom:1px solid var(--hair)}
.nhlg:last-child{border-bottom:0;padding-bottom:1px}
.nhlg-when{flex:0 0 auto;font-size:11.5px;font-weight:800;color:var(--mut);
  letter-spacing:.4px;white-space:nowrap;min-width:64px}
.nhlg-who{flex:1 1 auto;font-size:13.5px;font-weight:600;min-width:0;line-height:1.3}
.nhlg-who b{font-weight:800}
.nhlg-team{font-weight:900}
.nhlg-ast{display:block;color:var(--mut);font-weight:600;font-size:12.5px}
.nhlg-score{flex:0 0 auto;font-size:12.5px;font-weight:800;color:var(--mut);white-space:nowrap}
.nhlg-tag{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.6px;
  text-transform:uppercase;color:var(--ink);border:1px solid var(--line);
  border-radius:6px;padding:1px 5px;vertical-align:1px;white-space:nowrap}
.nhlcap{font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--mut);font-weight:800;margin:9px 0 3px}
.nhlcap:first-of-type{margin-top:5px}
.nhlbar-row{display:grid;grid-template-columns:41px 1fr 88px 1fr 41px;
  align-items:center;gap:6px;padding:2.5px 0}
.nhlbar-v{font-size:13px;font-weight:800;text-align:center;white-space:nowrap}
.nhlbar-lab{text-align:center;font-size:11.5px;font-weight:800;color:var(--mut);
  letter-spacing:.3px;line-height:1.15}
.nhlbar-track{display:block;height:8px;background:var(--hair);border-radius:4px;overflow:hidden}
.nhlbar-track i{display:block;height:100%;border-radius:4px;min-width:0}
/* Drive chart (v2.0): the football card under the flow card. Rows
   are CSS grids on one shared template (label / track / result) so
   the field header, every drive row and the continuation notes
   align on the same field scale at any width — the track is a
   percentage space (0 = own goal, 100 = the opponent's), so no
   horizontal scroll is possible. Segments sit in the track's top
   lane; a turnover return arrow runs in the lane below them. */
.drvsec{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);
  padding:10px 12px 9px;margin-bottom:14px;max-width:100%}
.drvtitle{font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:16px}
.drvqs{display:inline-flex;gap:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-top:8px;flex-wrap:wrap}
.drvq{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}
.drvq.on{background:var(--ink);color:var(--paper)}
.drvleg{display:flex;gap:14px;margin:8px 0 3px;font-size:12px;font-weight:700;color:var(--mut);flex-wrap:wrap}
.drvleg span{display:inline-flex;align-items:center;gap:5px}
.drvleg i{width:14px;height:9px;border-radius:2px;display:inline-block;background:var(--ink)}
.drvleg i.dla{background:none;width:auto;height:auto;font-style:normal;color:var(--ink);font-size:13px}
.drvfh{display:grid;grid-template-columns:52px 1fr 78px;gap:8px;font-size:11px;color:var(--mut);font-weight:700;margin-top:3px}
.drvfh-t{position:relative;display:block;height:14px}
.drvfh-t i{position:absolute;font-style:normal;white-space:nowrap}
.drvfh-t .l{left:0}.drvfh-t .m{left:50%;transform:translateX(-50%)}.drvfh-t .r{right:0}
.drvrow{display:grid;grid-template-columns:52px 1fr 78px;gap:8px;padding:5px 0 6px;border-top:1px solid var(--hair);cursor:pointer}
.drvlab{background:none;border:0;font:inherit;font-size:12.5px;font-weight:700;color:var(--ink);
  text-align:left;padding:0;display:flex;align-items:center;gap:5px;cursor:pointer;min-height:30px}
.drvlab b{font-weight:800}
.drvlive{width:7px;height:7px;border-radius:50%;background:var(--live);display:inline-block;flex:none}
.drvtrack{position:relative;height:30px}
.drvrz{position:absolute;top:0;bottom:0;left:80%;width:20%;background:var(--drvrz)}
.drvhalf{position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--hair)}
.drvseg{position:absolute;top:7px;height:11px;border-radius:2px;min-width:2px}
.drvseg.s{opacity:.45}
.drvfur{position:absolute;top:4px;width:2px;height:17px;background:var(--ink);opacity:.5;border-radius:1px}
.drvret{position:absolute;bottom:1px;height:5px;border-bottom:2px solid}
.drvret b{position:absolute;left:-1px;bottom:-4px;width:0;height:0;border-style:solid;
  border-width:3.5px 6px 3.5px 0;border-color:transparent currentColor transparent transparent}
.drvres{font-size:12px;font-weight:800;display:flex;flex-direction:column;justify-content:center;line-height:1.25}
.drvsub{font-size:11px;font-weight:700;color:var(--mut)}
.drvnote{display:grid;grid-template-columns:52px 1fr 78px;gap:8px;font-size:11px;color:var(--mut);font-weight:700;padding:0 0 4px;margin-top:-3px}
.drvdiv{display:flex;align-items:center;gap:10px;margin:9px 0 3px;font-size:11px;letter-spacing:1.2px;color:var(--mut);font-weight:800}
.drvdiv:before,.drvdiv:after{content:"";flex:1;border-top:1px solid var(--line)}
.drvdiv.half{color:var(--ink)}
.drvdiv.half:before,.drvdiv.half:after{border-top:2px solid var(--ink)}
.drvdet{border-top:1px dashed var(--line);padding:7px 2px 10px}
.drvdl{font-size:13px;margin:2px 0;line-height:1.45}
.drvdt{font-weight:800;color:var(--mut);font-size:11px;text-transform:uppercase;letter-spacing:.6px;margin-right:7px}
.drvdm{font-size:12.5px;color:var(--mut);margin-top:3px;line-height:1.45}
.drvplaysbtn{border:1px solid var(--line);background:none;border-radius:7px;padding:5px 10px;
  font:inherit;font-size:12px;font-weight:700;margin-top:8px;cursor:pointer;color:var(--ink);min-height:32px}
.drvplist{margin-top:4px}
.drvpl{display:flex;gap:8px;font-size:12px;padding:4px 0;border-top:1px solid var(--hair)}
/* combo28: the label column can never paint into the play text.
   Pre-fix .drvpd was nowrap and .drvpt's flex base was its
   max-content (the whole unwrapped play string), so shrink
   engaged at every width and pinned the label to its 88px
   min-width floor while longer labels' glyphs (up to ~136px in
   wide fonts) spilled over the text. Now the text takes a small
   fixed base and grows, so the label keeps its max-content
   (floored at the uniform 88px) wherever the row has room, and
   only under real pressure does the label wrap inside its own
   column; the text keeps a floor and breaks overlong words
   rather than spilling. */
.drvpd{font-weight:800;white-space:normal;color:var(--mut);min-width:88px}
.drvpt{line-height:1.4;flex:1 1 30px;min-width:0;overflow-wrap:break-word}
.drvpyd{font-weight:800}
.drvempty{font-size:12.5px;color:var(--mut);padding:10px 0 6px}
/* Soccer Shot Activity (replaces the soccer flow section when the
   commentary carries shot events): timeline + draggable time
   window + stacked outcome bars. Chrome reuses the flow grammar. */
.smcover{background:var(--note-bg);border:1px solid var(--note-line);color:var(--note-ink);
  border-radius:8px;padding:6px 9px;font-size:12px;font-weight:700;margin-top:8px;line-height:1.45}
.smfullbtn{border:1px solid var(--line);background:var(--card);color:var(--mut);border-radius:8px;
  padding:6px 11px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;margin-left:auto;white-space:nowrap}
.smfullbtn.on{background:var(--ink);color:var(--card);border-color:var(--ink)}
.smtl{display:block;width:100%;max-width:680px;height:auto;margin:6px auto 0}
.smpt{cursor:pointer;outline:none}
.smpt:focus-visible{stroke:var(--sorted);stroke-width:2.5;fill:rgba(179,84,30,.14)}
.smwin{max-width:680px;margin:2px auto 0}
.smwin-track{position:relative;height:30px}
.smwin-inner{position:absolute;top:0;bottom:0;left:10%;width:87.22%}
.smwin-inner::before{content:"";position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;
  border-radius:2px;background:var(--hair)}
.smwin-range{position:absolute;top:50%;height:4px;margin-top:-2px;border-radius:2px;background:var(--sorted)}
.smhandle{position:absolute;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;
  border:2px solid var(--sorted);background:var(--card);cursor:grab;padding:0;z-index:2;touch-action:none;
  box-shadow:0 1px 3px rgba(38,35,27,.25)}
.smhandle::after{content:"";position:absolute;left:50%;top:6px;bottom:6px;width:2px;margin-left:-1px;
  background:var(--sorted);border-radius:1px}
.smhandle:active{cursor:grabbing}
.smhandle:focus-visible{outline:2px solid var(--sorted);outline-offset:2px}
.smwinlab{font-size:12px;color:var(--mut);font-weight:700;margin-top:1px}
.smwinlab b{color:var(--ink)}
.smbars{margin-top:9px}
.smbar-row{display:flex;align-items:center;gap:8px;margin-top:5px}
.smbar-lab{display:inline-flex;align-items:center;gap:5px;width:40px;flex:none;font-size:12.5px;color:var(--mut);font-weight:700}
.smbar-lab i{width:10px;height:10px;border-radius:2px;display:inline-block;flex:none}
.smbar-lab b{color:var(--ink);font-size:13px}
.smbar-track{flex:1;display:flex;height:17px;border-radius:4px;overflow:hidden;background:var(--hair);min-width:0}
.smseg{border:0;padding:0;margin:0;cursor:pointer;font:inherit;display:flex;align-items:center;justify-content:center;min-width:0}
.smseg span{font-size:10.5px;font-weight:800;color:var(--ink);line-height:1;padding:0 2px}
.smseg span.oncol{color:#fffdf8}
.smseg:focus-visible{outline:2px solid var(--sorted);outline-offset:-2px}
.smbar-none{font-size:11.5px;color:var(--mut);font-weight:700;align-self:center;padding-left:6px}
.smbar-tot{font-size:11.5px;color:var(--mut);font-weight:700;white-space:nowrap;flex:none}
.smlegend{display:flex;gap:13px;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--mut);font-weight:700;margin-top:7px}
.smlegend .smli{display:inline-flex;align-items:center;gap:5px}
.smlegend .smdot{width:9px;height:9px;border-radius:50%;background:var(--mut);display:inline-block}
.smlegend .smdot.open{background:transparent;border:2px solid var(--mut)}
.smlegend .smdia{width:8px;height:8px;border:2px solid var(--mut);transform:rotate(45deg);display:inline-block}
.smlegend .smstar{color:var(--mut);font-size:14px}
.smlegend .smx{color:var(--mut);font-size:13px;font-weight:800}
.smnote{font-size:11.5px;color:var(--mut);margin-top:3px;line-height:1.45}
.smdet{border-top:1px solid var(--hair);margin-top:8px;padding-top:7px;min-height:40px}
.smdet .smmain{font-size:14px;font-weight:700;color:var(--ink)}
.smdet .smsub{font-size:12px;color:var(--mut);font-weight:700;margin-top:1px}
.smso{border-top:1px solid var(--hair);margin-top:8px;padding-top:7px}
.smsohead{font-size:12.5px;font-weight:700;color:var(--ink)}
.smsoatts{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:4px}
.smsoatt{font-size:12px;color:var(--mut);font-weight:600;white-space:nowrap}
.smsoatt b{color:var(--ink)}
.smsoatt i{font-style:normal;font-weight:800}
.smsoatt .sc{color:#2e7d32}
:root[data-theme="dark"] .smsoatt .sc{color:#7fc97f}
.smsoatt .ms{color:var(--live)}
.smsoatt .sv{color:var(--mut);font-size:11px}
.smsoatt .smtally{color:var(--mut)}
/* ---- who scored when? (2026-10-23): the basketball scoring
   timeline. Same card chrome as .flowsec; rows are a name column,
   a relative track carrying the period dividers, and the PTS
   column. Marks are 28px hit buttons whose visible dot is sized
   by points (7/11/15px); a grouped same-clock marker fakes its
   stack with two currentColor ghost shadows (the dot carries the
   team color as both background and color for exactly this). */
.wssec{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);
  padding:10px 12px 9px;margin-bottom:14px;max-width:100%}
.wshead{display:flex;align-items:center;gap:8px}
.wsteams{display:flex;gap:8px;margin:8px 0}
.wsteambtn{flex:1;border:1px solid var(--line);background:transparent;color:var(--mut);
  font-family:inherit;font-size:13.5px;font-weight:700;padding:8px 6px;border-radius:9px;
  cursor:pointer;min-height:40px}
.wsteambtn.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.wsperiods{display:inline-flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.wsperbtn{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}
.wsperbtn.on{background:var(--ink);color:var(--paper)}
.wsleg{display:flex;gap:14px;margin:8px 0 2px;font-size:12px;font-weight:700;color:var(--mut)}
.wsleg-i{display:inline-flex;align-items:center;gap:5px}
.wsdot{display:inline-block;border-radius:50%;flex:none}
.wsdot.s1{width:7px;height:7px}
.wsdot.s2{width:11px;height:11px}
.wsdot.s3{width:15px;height:15px}
.wsdot.grpdot{box-shadow:3px -3px 0 -1.5px,-3px 3px 0 -1.5px}
.wsaxis,.ws-row{display:grid;grid-template-columns:minmax(84px,110px) 1fr 30px;gap:8px;align-items:center}
.wsaxis{margin-top:5px;font-size:10.5px;font-weight:700;color:var(--mut)}
.ws-axis-track{position:relative;height:14px;display:block}
.ws-seg{position:absolute;top:0;text-align:center;white-space:nowrap;overflow:hidden}
.ws-pts{text-align:right;font-weight:700;font-size:14px}
.wsaxis .ws-pts{font-size:10.5px;color:var(--mut)}
.ws-row{padding:2px 0;border-top:1px solid var(--hair)}
.ws-name{display:flex;flex-direction:column;min-width:0}
.ws-pname{font-size:13px;font-weight:700;line-height:1.25;overflow-wrap:break-word}
.ws-pos{font-size:11px;color:var(--mut)}
.ws-track{position:relative;height:30px;display:block}
.ws-div{position:absolute;top:0;bottom:0;width:1px;background:var(--line);opacity:.7}
.ws-div.half{width:2px;background:var(--mut);opacity:.75}
.ws-mark{position:absolute;top:50%;transform:translate(-50%,-50%);width:28px;height:28px;
  background:none;border:0;padding:0;cursor:pointer;display:flex;align-items:center;
  justify-content:center;border-radius:50%}
.ws-mark:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.ws-mark.sel .wsdot{box-shadow:0 0 0 2px var(--card),0 0 0 4.5px var(--ink)}
.ws-fan{position:absolute;top:50%;width:0;height:0}
.ws-mark.fan{left:0}
.ws-dnp{position:absolute;left:0;top:50%;transform:translateY(-50%);font-size:11px;color:var(--mut);font-style:italic}
.wsallbtn{width:100%;margin-top:8px;border:1px solid var(--line);background:transparent;color:var(--ink);
  font-family:inherit;font-size:13px;font-weight:700;padding:9px;border-radius:9px;cursor:pointer;min-height:40px}
.wsnote{font-size:11.5px;color:var(--mut);margin-top:6px}
.wsinfo{font-size:12.5px;line-height:1.45;color:var(--ink);margin-top:7px;min-height:18px;
  border-top:1px solid var(--hair);padding-top:6px;overflow-wrap:break-word}
.wsinfo-main{font-weight:700}
.wsinfo-text{color:var(--mut)}
.wsinfo-hint{color:var(--mut)}
/* 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 var(--hair);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 var(--hair)}
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 var(--hair)}
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}
/* basketball team stats (2026-10-23): "Where the gap came from"
   graphic — since GAMEHEADER (2026-10-26) its own section below
   the game page's score summary, no longer atop the Team Stats
   table — a card in the same cream family,
   three diverging-bar rows on fixed 52px value slots so the two
   sides' bar tracks are the same width and the cross-category
   scaling is exact. Bars carry both theme surfaces' colors as
   data attributes; themeApplyGap re-points them on a flip. */
.tsgap{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);
  padding:10px 12px 11px;margin-bottom:14px}
.tsg-head{font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:14.5px}
.tsg-net{color:var(--mut);font-size:12.5px;font-weight:700;margin:1px 0 8px}
.tsg-rows{display:flex;flex-direction:column;gap:5px}
.tsg-row{display:grid;grid-template-columns:1fr 30px 1fr;align-items:center;gap:6px}
.tsg-z{display:grid;align-items:center;gap:6px;min-height:12px}
.tsg-za{grid-template-columns:52px 1fr}
.tsg-zh{grid-template-columns:1fr 52px}
.tsg-za .tsg-val{text-align:right}
.tsg-track{display:flex}
.tsg-za .tsg-track{justify-content:flex-end}
.tsg-zh .tsg-track{justify-content:flex-start}
.tsg-bar{display:block;height:10px;border-radius:2px;min-width:2px}
.tsg-tick{display:block;width:3px;height:12px;background:var(--line);border-radius:1px}
.tsg-val{font-size:11.5px;font-weight:800;white-space:nowrap}
.tsg-cat{text-align:center;font-size:10.5px;letter-spacing:.8px;color:var(--mut);font-weight:800}
.tsg-c0{display:block;font-size:9.5px;color:var(--mut);font-weight:700}
/* grouped section labels inside the basketball table: understated
   small caps, hairline under, no fill — the rows stay the table's. */
table.tstats tr.tssec td{font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--mut);font-weight:800;text-align:left;padding:10px 8px 3px}
table.tstats tbody tr.tssec:first-child td{padding-top:5px}
/* combined shooting cells + rebounds sub-line: stacked blocks in
   the value cells; the sub-line may wrap (the cells are nowrap),
   everything else stays one line so the table never widens. */
.ts-ma{display:block;font-size:14.5px}
.ts-pct{display:block;font-size:11px;color:var(--mut);font-weight:600;margin-top:1px}
.ts-pbar{display:block;height:3px;background:var(--hair);border-radius:2px;margin-top:3px;overflow:hidden}
.ts-pbar i{display:block;height:100%;background:var(--mut);opacity:.5;border-radius:2px}
table.tstats td.av .ts-pbar i{margin-left:auto}
.ts-main{display:block}
.ts-sub{display:block;white-space:normal;font-size:10.5px;color:var(--mut);
  font-weight:600;line-height:1.3;margin-top:1px}
/* MLB Pressure vs. Payoff + Free-Base Breakdown (v2.0): the grid's
   five shade steps are one steel-blue ramp (the concept's scale),
   declared as variables so the dark card swaps in its own ramp —
   pale steps carry ink text, the deep step carries paper text
   (dark theme: the deepest step is the pale one, so its text
   flips with the variable). Cells are real buttons (tap, focus),
   46px tall, grouped five innings to a block like the concept. */
:root{--pvp0:#efe9da;--pvp1:#d3dfe9;--pvp2:#a7bfd4;--pvp3:#6f96b8;--pvp4:#3c6a94;--pvp4tx:#fffdf8}
:root[data-theme="dark"]{--pvp0:#26231b;--pvp1:#2c4257;--pvp2:#3a5a76;--pvp3:#54809f;--pvp4:#9dc2e0;--pvp4tx:#1c1a15}
.pvp{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);
  padding:10px 12px 11px;margin-bottom:6px}
.pvp-title{font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:16px}
.pvp-sub{color:var(--mut);font-size:12.5px;font-weight:700;margin:1px 0 9px}
.pvp-grp{margin-bottom:9px}
.pvp-hrow,.pvp-row{display:grid;grid-template-columns:36px repeat(var(--n,5),1fr);gap:5px}
.pvp-hrow{margin-bottom:4px}
.pvp-hn{text-align:center;font-size:11.5px;color:var(--mut);font-weight:700;align-self:end}
.pvp-lab{display:flex;align-items:center;font-size:12px;font-weight:800;color:var(--mut);letter-spacing:.4px}
.pvp-hrow .pvp-lab{font-size:10.5px;letter-spacing:1.2px}
.pvp-row{margin-bottom:5px}
.pvp-row:last-child{margin-bottom:0}
.pvp-cell{appearance:none;-webkit-appearance:none;border:0;font:inherit;cursor:pointer;position:relative;
  border-radius:8px;min-height:46px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;font-size:17px;font-weight:800;color:var(--ink);padding:2px 0;margin:0}
.pvp-cell.s0,.pvp-sw.s0{background:var(--pvp0)}
.pvp-cell.s1,.pvp-sw.s1{background:var(--pvp1)}
.pvp-cell.s2,.pvp-sw.s2{background:var(--pvp2)}
.pvp-cell.s3,.pvp-sw.s3{background:var(--pvp3)}
.pvp-cell.s3{color:#f7f4ec}
.pvp-cell.s4,.pvp-sw.s4{background:var(--pvp4)}
.pvp-cell.s4{color:var(--pvp4tx)}
.pvp-cell.sel{box-shadow:inset 0 0 0 2px var(--ink)}
.pvp-cell.dash{background:var(--pvp0);color:var(--mut);cursor:default}
.pvp-cell.future{background:var(--pvp0);opacity:.45;cursor:default}
.pvp-dot{width:5px;height:5px;border-radius:50%;background:currentColor;margin-top:3px}
/* combo30: chances figure under the runs number (the .figs grammar:
   small, bold, one line under the value) — opacity on currentColor,
   not --mut, so it reads on every shade step in both themes. */
.pvp-fig{display:block;font-size:10.5px;font-weight:700;line-height:1.3;margin-top:1px;opacity:.72}
/* combo30: wasted-inning corner dot (3+ chances, 0 runs). */
.pvp-wdot{position:absolute;top:5px;right:5px;width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.85}
.pvp-pays{margin:1px 0 9px}
.pvp-pay{font-size:13px;font-weight:700;margin-top:2px}
.pvp-legend{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--mut);font-weight:700;margin-top:1px}
.pvp-sw{width:16px;height:11px;border-radius:3px;display:inline-block}
.pvp-note{font-size:12px;color:var(--mut);margin-top:7px}
.pvp-detail{font-size:13.5px;font-weight:600;border-top:1px solid var(--hair);margin-top:9px;padding-top:8px;min-height:20px}
.pvp-def{font-size:12px;line-height:1.45;color:var(--mut);margin-top:5px}
.fbb{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);
  padding:10px 12px 11px;margin:2px 0 14px}
.fbb-head{font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:14.5px;margin-bottom:8px}
.fbb-rows{display:flex;flex-direction:column;gap:5px}
.fbb-row{display:grid;grid-template-columns:1fr 104px 1fr;align-items:center;gap:6px}
.fbb-cat{text-align:center;font-size:10.5px;letter-spacing:.6px;color:var(--mut);font-weight:800;text-transform:uppercase}
.fbb-bar{display:block;height:10px;border-radius:2px;min-width:2px}
/* 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}
/* combo30: home-run clip link in a batting line's name cell. The
   glyph is ::before content, so the anchor adds no text (name
   sorts/reads untouched); muted until hovered, theme-var colors. */
.hrclip{display:inline-block;margin-left:5px;color:var(--mut);text-decoration:none;vertical-align:1px;line-height:1}
.hrclip::before{content:"\25B6";font-size:10px}
.hrclip:hover{color:var(--ink)}
/* 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:700;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}
/* COMBO42 (user directive 2026-10-25 evening): the box-score
   tables take the LEADERS' type system — the body sans stack
   (pinned here so the tables' identity is explicit), bold stat
   values, bold names, and headers in the leaders' label treatment
   (small, uppercase, muted, weight 700, .3px tracking). The
   serif display face leaves the box surface: the team-block
   heading goes sans with everything inside the blocks. Page-level
   display headings outside the box blocks (.boxhead h1, .brand,
   .sport-name) keep the paper's serif — they are not box scores. */
.teamblock h2{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:19px;font-weight:700;margin:0 0 4px}
.gname{font-size:11px;letter-spacing:.8px;color:var(--mut);font-weight:700;margin:12px 0 5px;text-transform:uppercase}
table.bx{width:100%;border-collapse:collapse;min-width:560px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
table.bx th,table.bx td{padding:6.5px 6px;font-size:12.5px;text-align:right;
  border-bottom:1px solid var(--hair);white-space:nowrap}
table.bx td{font-weight:700}
table.bx th{font-size:10px;letter-spacing:.3px;color:var(--mut);font-weight:700}
table.bx td.pl,table.bx th.pl{text-align:left;font-weight:700}
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)}
/* Starters/bench split + mini team logos (2026-10-22).
   The divider row exists only in the default feed order of a
   basketball By-team table; the first sort removes it (sortBoxTable)
   and the table's .bxsorted class swaps the treatment to the starter
   markers. In the Combined (.bxc) tables — headline-sorted from the
   start — there is never a divider and the markers always show. */
table.bx tr.benchdiv td{padding:4px 6px;font-size:10px;font-weight:700;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--mut);text-align:left;background:var(--paper);
  border-top:2px solid var(--line);border-bottom:1px solid var(--line)}
.stmark{display:none;width:14px;height:14px;line-height:14px;text-align:center;font-size:9px;
  font-weight:800;border-radius:3px;background:var(--ink);color:var(--card);
  margin-left:5px;vertical-align:1px}
table.bxsorted .stmark,table.bxc .stmark{display:inline-block}
/* Mini logos: one class per surface, each sized to sit INSIDE the
   existing line height so tiles never grow. .lg-hdr rides the
   box/preview h1, .lg-team the box score's per-team h2, .lg-tile
   the tile rows (flex rows center it; the Box Scores rows and any
   inline context use the vertical-align/margin form).
   NIGHT MODE (integrated when this build was ported onto the
   night tree): every color above is a palette variable, so the
   divider and the pill theme with the surface for free. The marks
   themselves are handled in app.js: where the payload carries a
   dark-surface variant (logoDark), logoImg emits both URLs and
   themeApplyLogos swaps the src on a theme flip, so mostly-dark
   marks — the Nets' black roundel, the Raiders' silver-on-black —
   stay visible on dark cards; single-URL teams and MLB's
   constructed mlbstatic SVGs render identically in both themes. */
/* Rank / seed tile tag (combo18, 2026-10-24): the small muted
   "#n" immediately before the tile abbreviation — a college Top
   25 rank or an NBA conference seed (tied seeds carry the site's
   "t" suffix, e.g. "#8t"). Plain text: never a link, never a
   flex-grow item, never wraps. An NBA span still waiting on the
   standings payload is EMPTY, and :empty removes it from layout
   entirely — no placeholder width, no reserved gap — until
   paintSeedTags fills it; a team with no rank/seed emits no span
   at all. The Box Scores index row is inline (not flex), so its
   tag takes a small right margin there instead of a flex gap. */
.rktag{font-size:10px;font-weight:700;color:var(--mut);letter-spacing:-.3px;
  white-space:nowrap;flex:0 0 auto}
.rktag:empty{display:none}
.bxrow .rktag{margin-right:4px}
.lg-hdr{width:22px;height:22px;vertical-align:-4px;margin-right:7px}
.lg-team{width:18px;height:18px;vertical-align:-3px;margin-right:6px}
.lg-tile{width:16px;height:16px}
.gchip .lg-tile,.gtile .lg-tile{flex:0 0 auto;align-self:center}
.bxrow .lg-tile{vertical-align:-3px;margin-right:5px}
/* Leader-row identity (2026-10-23): the same 16px mark on leader
   rows — a flex child that never squashes in panel boards, and the
   bxrow inline form inside leaders-table name cells. */
.plead-board .lg-tile{flex:0 0 auto}
table.ld td.pl .lg-tile{vertical-align:-3px;margin-right:5px}
.ld2 .lg-tile{vertical-align:-3px;margin-right:5px}
/* 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}
/* COMBO37: the football fumble figures line under a player's name
   in the box tables (by-team and Combined) — the .figs treatment
   above, verbatim, under its own class so the basketball model
   never sees it. Only fumbling players (FUM > 0) carry one. */
table.bx .fumfig{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}
/* Desktop box tables (combo21, 2026-10-24; the app.js half is
   boxSplitModel): at >=1024px — the stylesheet's desktop line —
   the basketball box tables render with split shooting columns
   and stop stretching to the full content width: the table hugs
   its columns (width:auto over the auto layout; the >=701px rule
   already nullifies the phone colgroup), the player column is
   capped so names sit next to the stats, and names wrap inside
   the cap rather than truncating, as everywhere on the site.
   Type matches the .bxfig desktop sizes (14px cells / 11px
   headers) so the page's scale doesn't change with the form.
   The Team Stats block tightens in the same pass: the gap
   graphic, the comparison table, its note and MLB's Free-Base
   Breakdown (which travels directly under the table) cap at
   680px — the analysis cards' own measure (.flowsvg / .smtl)
   — and center. Below 1024px nothing in this block applies and
   every surface renders exactly as before. */
@media (min-width:1024px){
  table.bx.bxsplit{width:auto;min-width:0}
  table.bx.bxsplit th,table.bx.bxsplit td{font-size:14px}
  table.bx.bxsplit th{font-size:11px}
  table.bx.bxsplit td.pl,table.bx.bxsplit th.pl{max-width:230px}
  table.bx.bxsplit td.pl{white-space:normal;line-height:1.18;overflow-wrap:break-word}
  .tsgap,table.tstats,.fbb{max-width:680px;margin-left:auto;margin-right:auto}
  .tsnote{max-width:680px;margin-left:auto;margin-right:auto}
}
.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:var(--star);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:var(--star-hover)}
.favstar.on{color:var(--star-on)}
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}
/* Home highlights strip (2026-10-26): up to three story cards
   between the date controls and the sport sections. Desktop is a
   plain equal-thirds row; phone (<=700px, the panels' own
   breakpoint) turns it into the .strip-style swipe lane — cards
   at 76% of the lane so the next one peeks, scroll-snap on, the
   lane scrolls internally and the page never does. The mount
   (#homeStrip) is display:none while empty, so a day with no
   qualifying story shows no shell. Colors are the shared theme
   variables, so night mode is automatic. */
#homeStrip:empty{display:none}
.homestrip{margin:0 0 12px}
.hs-head{display:flex;align-items:baseline;gap:10px;margin:0 0 6px}
.hs-title{font-size:12px;letter-spacing:1.6px;color:var(--mut);font-weight:800;
  text-transform:uppercase;margin:0;white-space:nowrap;overflow:hidden}
.hs-all{margin-left:auto;font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap}
.hs-all:hover{text-decoration:underline}
.hs-row{display:flex;gap:8px}
.hscard{flex:1 1 0;min-width:0;background:var(--card);border:1px solid var(--line);
  border-radius:var(--rad);padding:8px 11px;text-decoration:none;color:var(--ink);
  display:flex;flex-direction:column;gap:2px}
.hscard:hover{border-color:var(--ink)}
.hscard .who{display:block;min-width:0}
.hscard .nm{font-weight:700;font-size:14.5px;display:block;white-space:normal;line-height:1.25}
.hscard .bxmu{font-size:14.5px;display:block;white-space:nowrap;overflow:hidden}
.hscard .bxtm.win{font-weight:900}
.hscard .bxtm.dim{color:var(--mut)}
.hscard .bxat{color:var(--mut);font-weight:400}
.hscard .bxsc{font-weight:800}
.hscard .hs-note{font-size:13.5px;font-weight:600;line-height:1.3;display:block}
.hscard .hs-kind{font-size:13.5px;display:block;line-height:1.3}
.hscard .mt{color:var(--mut);font-size:12.5px;display:block;line-height:1.35}
.hscard .hs-meta{color:var(--mut);font-size:12px;display:flex;align-items:center;gap:5px;
  margin-top:auto;padding-top:3px;white-space:nowrap;overflow:hidden}
@media (max-width:700px){
  .hs-row{overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;
    padding-bottom:6px;scrollbar-width:thin;overscroll-behavior-x:contain}
  .hscard{flex:0 0 76%;scroll-snap-align:start}
}
/* Home strip rotation (2026-10-27): when the day's pool runs
   past three cards, the strip renders a viewport + track
   instead of the row — the viewport clips, the track slides
   one card left every 5s (hsRot in app.js), and the page
   itself never scrolls sideways. Cards keep their widths
   inside the track: a desktop third (two 8px gaps accounted)
   and the phone 76% card, so a window is three across on
   desktop and one-plus-a-peek on the phone, exactly the
   strip's existing geometry. The slide transition lives on
   .hs-anim only, so the wrap snap and repaints move the track
   instantly; .hs-sliding eats pointer events for the slide's
   duration so no click can land on a card mid-shift. */
.hs-view{overflow:hidden}
.hs-track{display:flex;gap:8px}
.hs-track.hs-anim{transition:transform .52s ease}
.hs-track.hs-sliding{pointer-events:none}
.hs-track .hscard{flex:0 0 calc((100% - 16px)/3)}
@media (max-width:700px){
  .hs-track .hscard{flex:0 0 76%}
}
.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 .tvln{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:var(--note-bg);border:1px solid var(--note-line);color:var(--note-ink);
  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}
/* Content-proportioned zones (morning fix, 2026-10-23): a slate
   of 1-4 games takes only the width its tiles need (a 112px
   tile + 8px gap per column) and the Leaders zone absorbs the
   rest, instead of the tiles zone claiming its full 55% share
   around a single tile and leaving the section's left half
   empty. Desktop widths only: below 701px the zones stack and
   a flex-basis would size the zone's HEIGHT. Five or more
   games keep the standing 55/45 split. flex-shrink stays on,
   so on a narrow desktop window the zone compresses and the
   grid wraps instead of overflowing. */
@media (min-width:701px){
  .panel .ptiles-n1{flex:0 1 120px}
  .panel .ptiles-n2{flex:0 1 240px}
  .panel .ptiles-n3{flex:0 1 360px}
  .panel .ptiles-n4{flex:0 1 480px}
}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
/* Tile height: 104px standard (status + two team rows + the
   betting-line row + the "Box score" foot). A tile that carries
   a TV/streaming row (v2.1) — and ONLY that tile — grows by the
   row's 14px via its data-tv attribute (user correction
   2026-10-26: tiles without a TV line keep their exact
   dimensions; the panel does not grow for a row a tile doesn't
   have). The fitted skeleton's ghost tiles mirror the same
   split 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[data-tv]{height:118px}
.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:var(--live)}
.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 .tvln{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)}
/* Rank/seed tag width budget (combo18): a tagged panel-tile row
   pays for its tag out of the row's own slack — tighter flex
   gaps, a slightly narrower abbreviation box, the star's right
   padding, a marginally smaller tag — and a hastag tile gives
   back 2px of horizontal padding per side. Tile outer
   dimensions never change (104px / 118px with TV, combo4).
   Measured on the live 2026-10-24 slate: the worst tagged row
   (#24 + 4-letter abbr + two-digit score) fits its row box at
   390px with room to spare; at 360px tagged rows end up
   NARROWER than the untagged baseline rows beside them. The
   strip's .gchip rows (172px min) need none of this. */
.gtile.hastag{padding-left:5px;padding-right:5px}
.gtile .row.tagged{gap:2px}
.gtile .row.tagged .rktag{font-size:9px;letter-spacing:-.5px}
.gtile .row.tagged .ab{width:30px}
.gtile .row.tagged .favstar{padding-right:0}
@media (max-width:400px){
  .gtile .row.tagged{gap:1px}
  .gtile.hastag{padding-left:4px;padding-right:4px}
}
/* 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:var(--stale-bg);border:1px solid var(--stale-line);color:var(--stale-ink);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}
/* Collapsed status row (morning fix, 2026-10-23): a section
   with no relevant games (.sec-collapsed, set by the head
   painters for the dated view's fallback/bare states and for
   Latest's bare state) shrinks to its heading — sport name +
   the status text in .p-date — plus this toggle, at EVERY
   width; the body waits behind the toggle (.sec-open, flipped
   by the shared section-toggle handler). On phone the dated
   view's OTHER SPORTS rows still own these states: those
   panels are display:none there, so the two never present
   the same section twice. */
.panel.sec-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}
.panel.sec-collapsed .sec-toggle:hover{border-color:var(--ink)}
.panel.sec-collapsed:not(.sec-open) .sec-body{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:var(--live);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:var(--skel);border-radius:var(--rad)}
.skel-cat{flex:1;height:30px;background:var(--skel);border-radius:8px}
.skel-board{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);overflow:hidden}
/* Ghost row height = the loaded panel leader row's height at each
   breakpoint (the two-line name/status/team stack measures 50px on
   desktop, 48.8px on phone) — the fitted skeleton's board must land
   on the loaded board's height, not the old 48px .drow minimum. */
.skel-row{height:50px;border-bottom:1px solid var(--hair);background:var(--skel2)}
.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:var(--skel2);border:1px solid var(--hair);border-radius:var(--rad);pointer-events:none}
.skel-gtile[data-tv]{height:118px}
.skel-more{height:28px;margin-top:6px;background:var(--skel2);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}
  .skel-scope{display:block;flex:0 0 auto;width:132px;height:30px;background:var(--skel);border-radius:8px}
  .skel-row{height:48.8px}
  .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}
  .pzone{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}
  /* Leaders blocks replace the table on phone. There is NO header
     row: header-tap sorting has no target on phone, which the user
     explicitly accepted ("If that removes ability to sort by
     header that's fine") — the category pills and Top 10/25/All
     above the board remain the controls. The sorted stat keeps
     its orange emphasis on label + value.
     DENSITY (user, 2026-10-24, FINAL): the 2026-10-23 two-row
     blocks (values 18px, name 15px, ~164px per block, ~3 players
     per screen) are superseded — "Everything is one row (even
     basketball) for full leaders." ONE stat row per block,
     compressed from the top: 5px top padding, the name high in
     the block at 14.5px on a tight line, the meta at 11px directly
     beneath it, the stat row tight under that — values 15px,
     labels 9.5px, 2px cell gutters. The basketball shot figures
     ride inside the PTS cell (which flexes wider) and wrap onto
     two lines only when the cell's width demands it. Smaller
     type is explicitly authorized; nothing is dropped. */
  table.ld{display:none}
  .ld2{display:block}
  .ld2row{padding:4px 8px 5px;border-bottom:1px solid var(--hair)}
  .ld2row:last-child{border-bottom:0}
  .ld2row[data-href]{cursor:pointer}
  .ld2h{display:flex;gap:6px;align-items:flex-start}
  .ld2rk{flex:0 0 auto;min-width:24px;text-align:center;font-size:13px;font-weight:800;color:var(--mut);line-height:1.15;padding-top:1px}
  /* font-size on the who block itself: its strut would otherwise
     inherit the 16px body size and floor every line box at ~18px,
     padding the name and meta lines with dead air. */
  .ld2who{flex:1 1 auto;min-width:0;font-size:11px;line-height:1.15}
  .ld2 .pname{font-size:14.5px;white-space:normal;overflow-wrap:break-word}
  .ld2 .pmeta{font-size:11px;white-space:normal;overflow-wrap:break-word}
  .ld2s{display:flex;gap:2px;margin-top:3px}
  .ld2c{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:0}
  .ld2c.hasfigs{flex-grow:1.8}
  .ld2c.wide{flex-grow:1.6}
  .ld2c.wide .ld2v{font-size:14px}
  .ld2l{font-size:9.5px;font-weight:700;letter-spacing:.3px;color:var(--mut);white-space:nowrap;line-height:1}
  .ld2v{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1.05}
  .ld2c.sorted .ld2l{color:var(--sorted)}
  .ld2c.sorted .ld2v{color:var(--sorted);font-weight:900}
  /* COMBO47: team-page stat cells are sort tap targets — the
     whole cell (label + value) takes the tap; the dotted
     underline is the affordance, matching the header taps'
     cursor treatment on desktop. */
  .ld2c.tpsort{cursor:pointer}
  .ld2c.tpsort .ld2l{text-decoration:underline dotted;text-underline-offset:2px}
  .pmeta .tpsort{cursor:pointer;text-decoration:underline dotted;text-underline-offset:2px}
  .pmeta .tpsort.sorted{color:var(--sorted);font-weight:900}
  /* SORTFIX (2026-10-27): the sort cells and the GP meta are
     real <button>s (app.js leadersBlocksHtml / tpTableHtml —
     Mobile Safari swallows taps on non-interactive spans whose
     own hit-tested children carry no pointer/handler). Strip
     the UA button chrome so the visual is exactly the old
     span's, and let the label/value children carry the pointer
     themselves as well. */
  button.ld2c{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;-webkit-appearance:none;appearance:none}
  button.tpsort{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;-webkit-appearance:none;appearance:none}
  .ld2c.tpsort .ld2l,.ld2c.tpsort .ld2v{cursor:pointer}
  .ld2 .figs{display:block;font-size:10px;font-weight:700;color:var(--mut);white-space:normal;line-height:1.15;margin-top:0}
  .ld2empty{padding:10px 8px;color:var(--mut);font-size:12px}
  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}
  /* COMBO41 (user directive 2026-10-25, "Bigger font"): every box
     tier up at phone widths — boxFit in app.js measures at
     these exact sizes, so the colgroups grow in lockstep and the
     one-width fit (all columns, no sideways scroll, names wrap)
     is preserved. Desktop sizes are untouched. */
  /* COMBO42: the tiers move toward the leaders' 15px value size
     at the leaders' bold weight — standard 13 -> 14, micro
     11.5 -> 12.5, basketball 14.5 -> 15 (below) — and every box
     header takes the leaders' .3px label tracking. boxFit
     measures at these exact sizes AND at the bold weight, so the
     fit still grows in lockstep. The dense tier (NHL skaters,
     20 columns) keeps its combo41 sizes; see CHANGES.md. */
  table.bx th,table.bx td{padding:6px 1px;font-size:14px;white-space:nowrap;overflow:hidden}
  table.bx th{font-size:10.5px;letter-spacing:.3px}
  table.bx.micro th,table.bx.micro td{font-size:12.5px}
  table.bx.micro th{font-size:9px;letter-spacing:.3px}
  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:15px;padding:6px 0}
  table.bx.micro.bxdrop th{font-size:11px;letter-spacing:.3px}
  /* Basketball bxdrop tables (.bxfig) render at the larger fonts
     boxFit measures for them (15px cells / 11px headers since
     COMBO43 — the header drops from the combo42 12px to the bxdrop
     tier's own 11px, which is also the desktop bxfig header size —
     and their under-PTS figures line at its measured 11.5px. */
  table.bx.micro.bxdrop.bxfig th,table.bx.micro.bxdrop.bxfig td{font-size:15px}
  table.bx.micro.bxdrop.bxfig th{font-size:11px}
  /* COMBO43 (user, 2026-10-25): basketball player names render
     slightly smaller than the 15px values — 14px, bold kept — so
     the rebalanced player column fits ordinary names' longest
     words whole and wraps happen at spaces, not mid-word. The
     selector carries the full tier chain: the 15px tier rule
     above is (0,4,2) and a shorter selector silently loses to
     it (found by probe — the name link still computed 15px).
     The name cell's left padding also trims 4px -> 2px on the
     basketball tables only (the 1447 rule below is the bxdrop
     tier's; football keeps its 4px). */
  table.bx.micro.bxdrop.bxfig td.pl{font-size:14px;padding-left:2px}
  table.bx.bxfig .figs{font-size:11.5px}
  /* COMBO41: the sub-elements riding inside box rows scale with the
     rows at phone widths only (their base rules keep the desktop
     sizes): the starters/bench divider, the Combined view's team
     chip, the player-cell note, and the starter marker. The fumbles
     figures line (.fumfig) keeps its 10.5px base size — it is a
     nowrap line inside the PLAYER column, whose width is set by
     names and stat columns, not by the line — but at phone widths
     it may wrap instead of truncating: at the combo41 sizes the
     passing table's player column is 91px and the one-line
     "Fumbles 2 · Lost 0" measures 93px (probe-verified ptrunc);
     wide player columns keep it on one line exactly as before. */
  table.bx .fumfig{white-space:normal}
  table.bx tr.benchdiv td{font-size:11.5px}
  table.bx .tmchip{font-size:11px}
  table.bx .pos{font-size:12px}
  table.bx .stmark{width:16px;height:16px;line-height:16px;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}
}

/* ================= The Race — NBA standings (2026-10-23) =================
   The standings chart in the paper's own language: serif display
   title, small-caps hairline band labels, rust dots (the NBA
   accent) for current positions and hollow dots for the comparison
   date on the SAME games scale. Every color is a theme variable —
   the dark palette is the same variable swap as the rest of the
   site. The cutoff team's row wears the --hl tint, like the
   concept's highlighted sixth-place row. */
.race-page{max-width:920px;margin:0 auto}
.race-top{margin-bottom:6px}
.race-eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.14em;color:var(--mut)}
.race-titlebar{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;border-bottom:2px solid var(--ink);padding-bottom:8px}
.race-title{font-family:Georgia,"Times New Roman",serif;font-size:31px;font-weight:700;margin:2px 0 0;letter-spacing:-.5px}
.race-asof{font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--mut);text-transform:uppercase;white-space:nowrap}
.race-controls{display:flex;flex-wrap:wrap;gap:10px 18px;margin:12px 0 4px}
.rctl{display:flex;flex-direction:column;gap:4px}
.rctl-lab{font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--mut);text-transform:uppercase}
.rctl-mode{margin-left:auto}
.rseg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--card)}
.rsegbtn{border:0;background:transparent;color:var(--mut);font-family:inherit;font-size:13px;
  font-weight:700;padding:6px 12px;cursor:pointer;min-height:44px}
.rsegbtn.on{background:var(--ink);color:var(--paper)}
.rsegbtn.dis{opacity:.45;cursor:default}
.rseg.sm .rsegbtn{min-height:30px;padding:3px 8px;font-size:12px}
.race-notes{color:var(--mut);font-size:12.5px;line-height:1.5;margin:6px 0 0}
.race-div{margin-top:6px}
.rtie{font-size:11px;font-weight:800;color:var(--mut);margin-left:1px}
.race-foot{color:var(--mut);font-size:12.5px;border-top:1px solid var(--hair);margin-top:14px;padding-top:8px}
.rtable-title{font-family:Georgia,"Times New Roman",serif;font-size:19px;font-weight:700;margin:18px 0 6px}
table.rtable{width:100%;border-collapse:collapse;font-size:14px}
table.rtable th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);
  border-bottom:2px solid var(--line);padding:5px 8px;text-align:right}
table.rtable td{border-bottom:1px solid var(--hair);padding:6px 8px;text-align:right;font-variant-numeric:tabular-nums}
table.rtable th.sd,table.rtable td.sd{text-align:left}
table.rtable th.tm,table.rtable td.tm{text-align:left}
table.rtable td.tm{font-weight:700}
table.rtable tr.cutoff td{background:var(--hl)}
.rtable-note{color:var(--mut);font-size:12.5px;margin-top:6px}
table.rtable tr.tband td{text-align:left;font-size:10.5px;font-weight:800;letter-spacing:.09em;color:var(--mut);padding:12px 8px 4px;border-bottom:1px solid var(--hair)}
table.rtable tbody tr.tband:first-child td{padding-top:5px}
table.rtable td.mvcell{white-space:nowrap}
/* RECNOWRAP (2026-10-26): a W\u2013L record must never break
   at its en dash. Brian's screenshot: the panel Race
   table's Rec column was squeezed below the record's full
   width and "3\u20130" wrapped ("3\u2013" over "0") \u2014 the
   dash is a legal line-break point and the cell carried no
   protection (measured: the record string's min-content
   is the 13.9px fragment "3\u2013", not the full 21px, so a
   table layout that distributes width down toward
   min-content can strand it there). Every standings value
   cell is a short token \u2014 the combined record, W/L
   splits, the overall-record column, GB, Strk, +/\u2212 \u2014 so
   all of them take nowrap; the two text cells keep
   wrapping exactly as today: team names (names wrap,
   never truncate) and the band subheader row, which spans
   the table. The form cell's \u2264430px rule further down
   (td.fcell, higher specificity) still lets the Last-10
   dots wrap at the narrowest widths. */
table.rtable td{white-space:nowrap}
table.rtable td.tm,table.rtable tr.tband td{white-space:normal}
.mv{font-weight:800}
.mv.up{color:var(--up)}
.mv.dn{color:var(--dn)}
.mv.flat{color:var(--mut);font-weight:700}
/* NBA panel: Scores | Standings toggle + the compact race zone */
.p-views{display:inline-flex;gap:6px;margin-right:2px}
.pviewbtn{border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);font-family:inherit;font-size:13px;
  font-weight:700;padding:6px 14px;min-height:34px;cursor:pointer}
.pviewbtn.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
/* Leaders scope (Day | Live now) in the panel lead bar: the two
   buttons ride the category select's row where it fits; on phone
   the bar wraps and they take their own row under the select —
   the skeleton bars carry a .skel-scope ghost of that phone row
   (same height) so fitted-skeleton height still equals loaded
   height by construction. The sport page's scope control reuses
   the .dw pill grammar above and needs no rules of its own.
   The ghost is hidden on DESKTOP ONLY: the hide rule is wrapped
   in min-width so it can never override the phone ghost rule
   above (unscoped, source order let it win at <=640px too and
   the ghost lost the toggle row — a 38px fitted-skeleton
   shortfall on phone, fixed 2026-10-23). */
.lscope{display:inline-flex;gap:6px;flex:0 0 auto}
.lscopebtn{border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);font-family:inherit;font-size:12.5px;
  font-weight:700;padding:5px 10px;min-height:30px;cursor:pointer}
.lscopebtn.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
/* Manual "Show today's games" toggle (2026-10-24): rides the
   panel meta row beside the date + pill, in the .lscopebtn
   button idiom. Its 30px min-height (border-box) equals .p-meta's
   reserved row height, so on desktop the header is the same
   height with or without the button; the empty .p-today span
   costs nothing in every other state. */
.p-today{display:inline-flex;align-items:center}
.ptodaybtn{border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);font-family:inherit;font-size:12.5px;
  font-weight:700;padding:5px 10px;min-height:30px;cursor:pointer;white-space:nowrap}
.ptodaybtn:hover{border-color:var(--ink)}
/* Fresh legs (2026-10-26): the pressed state mirrors the
   Scores|Standings .pviewbtn.on — same ink/paper pair, no new
   color. The every-game line is plain muted text in the
   .livenote/.lp-next family. */
.ptodaybtn.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.freshnote{font-size:12px;color:var(--mut);font-weight:700}
.ptiles>.freshnote{display:block;padding:2px 0 4px}
.ptiles+.freshnote{margin-top:6px}
.freshrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 8px}
/* Fresh legs v2 (2026-10-26 evening): the back-to-back
   section — a muted label in the .freshnote family over the
   moved games (a second tile grid on the panel, a second
   strip on the sport page; the strip keeps its own bottom
   margin inside the wrapper). Section tiles size to their
   content instead of the fixed tile height, so an
   availability note never overflows its tile; the note is a
   small muted line in the tiles' .ln/.tvln family, and an
   unfilled cold note span takes no room at all. */
.b2bseclab{font-size:12px;color:var(--mut);font-weight:700;margin:10px 0 5px}
.b2bsec .strip{margin-bottom:0}
.b2bsec .gtile{height:auto;min-height:104px}
.b2bsec .gtile[data-tv]{min-height:118px}
.injnote{display:block;font-size:10.5px;line-height:1.35;font-weight:600;color:var(--mut);margin-top:2px}
.gchip .injnote{font-size:11px;max-width:232px}
.injnote:empty{display:none}
@media (min-width:641px){.skel-scope{display:none}}
.sp-pzone{margin-top:10px}
.pzone{flex:1 1 55%;min-width:0}
.pzone>.ptiles{flex:none}
.prace-head{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.prace-title{font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:15px}
.prace-ctls{display:inline-flex;gap:6px}
.prace-full{display:inline-block;margin-bottom:6px;font-weight:700;font-size:13px;text-decoration:none}
.prace-full:hover{text-decoration:underline}
.prace-body table.rtable{font-size:12.5px}
.prace-body table.rtable th{font-size:9.5px;padding:4px 5px}
.prace-body table.rtable td{padding:5px}
.prace-body table.rtable tr.tband td{padding-top:9px}
.prace-body .twrap{overflow-x:visible}
@media (max-width:700px){
  /* Phone tier for the full-page standings tables (COMBO48):
     the panel density (12.5px, 5px cells) so the widest
     tables fit one width, and the +/− column (class dcol,
     generalized tables only) sheds — the sanctioned first
     shed; seed/team/record/GB never shed. Desktop and the
     NBA tables (which fit) are untouched. */
  table.rtable{font-size:12.5px}
  table.rtable th{font-size:9.5px;padding:4px 5px}
  table.rtable td{padding:5px 4px}
  table.rtable tr.tband td{padding:10px 5px 3px}
  table.rtable th.dcol,table.rtable td.dcol{display:none}
  /* The two widest tables (NHL, NCAAF) also shed Strk on
     phone — the second shed in the sanctioned order. */
  table.rtable.w2 th.scol,table.rtable.w2 td.scol{display:none}
}
@media (max-width:340px){
  /* Legacy narrow phones: one more density step. */
  table.rtable{font-size:11.5px}
  table.rtable th{font-size:9px;padding:4px 3px}
  table.rtable td{padding:5px 3px}
}
@media (max-width:700px){
  .race-title{font-size:26px}
  .rctl{flex:1 1 42%}
  .rctl-mode{margin-left:0}
}

/* ================= The Race beyond the NBA (2026-10-23) =================
   The generalized standings views reuse the .race-* / .rtable /
   .prace styles above; only the sport switcher row, the soccer
   note line inside table team cells, and the panel group segment
   wrap are new. */
.rx-sports{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.rx-sport{border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);
  font-size:12.5px;font-weight:700;padding:4px 11px;text-decoration:none}
.rx-sport:hover{border-color:var(--ink)}
.rx-sport.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.rtable .rnote{display:block;font-size:11px;font-weight:600;color:var(--mut);margin-top:1px}
.prace-ctls .rseg.sm{flex-wrap:wrap}
.rseg-wrap{flex-wrap:wrap}

/* LOGODOTS (2026-10-26): standings team-cell logos + the Last
   10 form-dots column (worker v1.8.1 fields). The logo rides
   the shared .lg-tile sizing, aligned like the leader-row
   logos; dots are 7px, wins in --up, losses in --dn, ties
   in --mut, oldest first. */
table.rtable td.tm .lg-tile{vertical-align:-3px;margin-right:5px}
.fdots{display:inline-flex;gap:2px;align-items:center}
.fdot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.fdot.w{background:var(--up)}
.fdot.l{background:var(--dn)}
.fdot.t{background:var(--mut)}
table.rtable td.fcell{white-space:nowrap}
@media (max-width:700px){
  .fdot{width:6px;height:6px}
  .fdots{gap:1px}
}
/* The 320px pinch (LOGODOTS): with ten-entry form arrays and
   the movement column up, a single row of dots overflows the
   widest standings tables. At <=430px the dots wrap to two
   rows of five (the header wraps with them), the generalized
   tables take the w2 ladder's Strk shed too, and the w2
   tables shed their record-context column (NHL's GP — W, L
   and OTL already sum to it; NCAAF's Overall — the conference
   record beside it is the table's story). Soccer's tables
   carry no form column and are untouched (the GP shed is
   w2-scoped, so soccer's P column stays). Verified in a real
   browser at 320 and 390, light and dark, with the payloads
   as captured and with a worst case (ten-entry form arrays
   on every team, movement column up): every full-page
   standings table fits its one width with the form column
   at 41-53px, no name wraps, no sideways scroll. */
@media (max-width:430px){
  .fdots{flex-wrap:wrap;width:34px}
  table.rtable td.fcell{white-space:normal}
  table.rtable:has(th.fcol) th.scol,table.rtable:has(th.fcol) td.scol,
  table.rtable.w2:has(th.fcol) th.ocol,table.rtable.w2:has(th.fcol) td.ocol,
  table.rtable.w2:has(th.fcol) th.gcol,table.rtable.w2:has(th.fcol) td.gcol{display:none}
}

/* ================= Team pages (2026-10-24) ================= */
.tlink{color:inherit;text-decoration:none;cursor:pointer}
.tlink:hover{text-decoration:underline}
span.tlink{display:inline-flex;align-items:center;gap:inherit}
a.tlink-hdr{color:inherit}
.tp-head{margin:6px 0 10px}
.tp-idrow{display:flex;gap:12px;align-items:center}
.tp-idrow .lg-hdr{width:54px;height:54px;object-fit:contain}
.tp-name{font-size:26px;margin:0;line-height:1.1}
.tp-season{color:var(--mut);font-weight:700;font-size:13px;margin-top:2px}
.tp-hrec{display:flex;align-items:baseline;gap:7px;margin-top:3px}
.tp-hlab{font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--mut)}
.tp-hrec b{font-size:19px;font-weight:800}
.tp-stand{font-size:13.5px;font-weight:700;margin-top:3px}
.tp-ref{display:inline-block;margin-top:3px;font-size:12.5px;color:var(--mut);text-decoration:none}
.tp-ref:hover{text-decoration:underline}
.tp-next{margin-top:8px;font-size:14px;font-weight:600}
.tp-backlinks{margin:8px 0 0;font-size:13px}
.tp-backlinks a{color:var(--mut);text-decoration:none;font-weight:700}
.tp-backlinks a:hover{text-decoration:underline}
.tp-h{font-size:16px;margin:14px 0 8px}
/* COMBOFIX (2026-10-24, Changes 6+7 final): the Season timeline
   chart is back with a labeled y-axis (.tp-yax), a dated x-axis
   (.tp-xax) and a legend (.tp-legend); the slider below carries
   touch fixes (touch-action on every part, 48px-tall handles)
   and its own dated axis (.tp-saxis). */
.tp-tlwrap{display:flex;gap:6px;align-items:flex-start}
.tp-yax{position:relative;width:46px;flex:0 0 46px;height:104px;margin-top:4px}
.tp-yax span{position:absolute;right:0;font-size:10.5px;font-weight:700;color:var(--mut);line-height:1;white-space:nowrap}
.tp-yax .y-t{top:0}
.tp-yax .y-z{top:50%;transform:translateY(-50%)}
.tp-yax .y-b{bottom:0}
.tp-tlmain{flex:1;min-width:0}
.tp-tl{display:flex;align-items:stretch;height:104px;border-bottom:2px solid var(--line);position:relative;margin:4px 0 2px}
.tp-tl::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:2px solid var(--line)}
.tbar{flex:1 1 0;min-width:2px;background:none;border:0;padding:0;margin:0;cursor:pointer;display:flex;flex-direction:column;position:relative}
.tbar .tb-up,.tbar .tb-dn{flex:1;display:flex;justify-content:center}
.tbar .tb-up{align-items:flex-end}
.tbar .tb-dn{align-items:flex-start}
.tbar i{display:block;width:min(14px,80%);border-radius:2px}
.tbar.w .tb-up i{background:#2e7d32}
.tbar.l .tb-dn i{background:#b0413e}
.tbar.d::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px;border-radius:50%;background:var(--mut)}
.tbar.out{opacity:.28}
.tbar:hover{opacity:1}
.tbar:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
html[data-theme="dark"] .tbar.w .tb-up i{background:#66bb6a}
html[data-theme="dark"] .tbar.l .tb-dn i{background:#e57373}
.tp-xax{position:relative;height:15px;margin-top:2px}
.tp-xax span{position:absolute;top:0;font-size:10.5px;color:var(--mut);white-space:nowrap;transform:translateX(-50%)}
.tp-xax span.xf{transform:none}
.tp-xax span.xl{transform:translateX(-100%)}
.tp-legend{display:flex;flex-wrap:wrap;gap:3px 14px;font-size:12px;color:var(--mut);margin:5px 0 0}
.tp-legend .sw{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px;background:var(--mut)}
.tp-legend .sw.w{background:#2e7d32}
.tp-legend .sw.l{background:#b0413e}
.tp-legend .sw.d{width:8px;height:8px;border-radius:50%}
html[data-theme="dark"] .tp-legend .sw.w{background:#66bb6a}
html[data-theme="dark"] .tp-legend .sw.l{background:#e57373}
.tp-detail{font-size:13.5px;padding:7px 2px;min-height:20px}
.tp-boxlink{font-weight:700;white-space:nowrap}
.tp-tl-empty{border:1px dashed var(--line);border-radius:10px;padding:14px;font-size:14px;color:var(--mut);margin:10px 0}
.tp-sh{font-size:14px;margin:12px 0 2px}
.tp-expl{font-size:12.5px;color:var(--mut);margin:0 0 2px}
.tp-sctl{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 2px}
.tp-rlabel{font-weight:800;font-size:14px}
.tp-presets{display:inline-flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.tp-presets button,.tp-mode button,.tp-morebtn{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:7px 12px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit}
.tp-presets button.on,.tp-mode button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.tp-morewrap{text-align:center;margin:9px 0 2px}
.tp-slider{position:relative;height:48px;margin:2px 4px 0}
.tp-slider,.tp-track,.tp-region,.tp-handle{touch-action:none}
.tp-track{position:absolute;left:0;right:0;top:50%;height:6px;margin-top:-3px;border-radius:3px;background:var(--line)}
.tp-region{position:absolute;top:50%;height:6px;margin-top:-3px;border-radius:3px;background:var(--ink);opacity:.85}
.tp-handle{position:absolute;top:50%;width:36px;height:48px;margin:-24px 0 0 -18px;cursor:grab;z-index:2}
.tp-saxis{position:relative;height:21px;margin:0 4px}
.tp-sticks span{position:absolute;top:0;width:1px;height:5px;background:var(--line)}
.tp-sd{position:absolute;top:8px;font-size:10.5px;color:var(--mut)}
.tp-sd-l{left:0}
.tp-sd-r{right:0}
.tp-handle::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:26px;margin:-13px 0 0 -6px;border-radius:6px;background:var(--card);border:2px solid var(--ink)}
.tp-handle:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:8px}
.tp-keys{font-size:11.5px;color:var(--mut);margin:2px 0 0}
.tp-strip{display:flex;gap:8px;flex-wrap:wrap}
.tp-stat{flex:1 1 130px;border:1px solid var(--line);border-radius:10px;background:var(--card);padding:8px 10px;display:flex;flex-direction:column;gap:1px}
.tp-slab{font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--mut)}
.tp-sval{font-size:19px;font-weight:800}
.tp-rank{font-size:11.5px;font-weight:700;color:var(--mut)}
.tp-note{font-size:12px;color:var(--mut);margin:6px 0 0}
.tp-ext{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;align-items:center}
.tp-elab{font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--mut);width:100%}
.tp-echip{border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:12.5px;background:var(--card)}
.tp-leaders{margin-top:12px}
.tp-leaders h4,.tp-twrap h4{font-size:13.5px;margin:0 0 6px}
.tp-lrow{display:flex;gap:12px;align-items:baseline;padding:5px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.tp-lnm{font-weight:700;min-width:150px}
.tp-gp{color:var(--mut);font-size:11.5px;font-weight:600}
.tp-lv{font-size:13px;color:var(--mut)}
.tp-lv b{color:var(--ink);font-size:14.5px}
.tp-load{font-size:13px;color:var(--mut);font-style:italic}
.tp-mode{display:flex;gap:6px;margin:12px 0 4px}
.tp-twrap{margin-top:12px}
/* COMBO34: team player tables render as league boards (table.ld
   + .ld2 blocks, swapped by the global 700px rules). Their rows
   belong to no single game and carry no link, so they take no
   pointer cursor; header sorting keeps the global
   table.ld th[data-col] cursor and .sorted treatment. */
.tp-twrap table.ld tbody tr{cursor:default}
.tp-sched{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.tp-game{display:flex;align-items:center;gap:8px;padding:7px 10px;border-bottom:1px solid var(--line);font-size:13.5px;flex-wrap:wrap}
.tp-game:last-child{border-bottom:0}
.tp-game.sel{background:rgba(127,127,127,.10)}
.tp-gd{font-weight:700;min-width:86px;color:var(--mut);font-size:12.5px}
.tp-vs{color:var(--mut)}
.tp-opp{display:inline-flex;align-items:center;gap:6px;font-weight:700}
.tp-opp .lg-tile{width:20px;height:20px;object-fit:contain}
.tp-gr{margin-left:auto}
.tp-res{font-weight:800}
.tp-res.w{color:#2e7d32}
.tp-res.l{color:#b0413e}
html[data-theme="dark"] .tp-res.w{color:#66bb6a}
html[data-theme="dark"] .tp-res.l{color:#e57373}
.tp-live{font-weight:800}
.tp-when{color:var(--mut);font-size:12.5px;font-weight:600}
.tp-note{margin:10px 0 2px;font-size:13px;color:var(--mut)}
.tp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:8px 0 14px}
.tp-card{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;background:var(--card);padding:9px 10px;text-decoration:none;color:var(--ink);font-weight:700;font-size:13.5px}
.tp-card .lg-tile{width:26px;height:26px;object-fit:contain}
.tp-card:hover{border-color:var(--ink)}
.tp-lgsel{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font-size:12px;font-weight:800;letter-spacing:.6px;color:var(--mut);text-transform:uppercase}
@media (max-width:700px){
  .tp-name{font-size:22px}
  .tp-idrow .lg-hdr{width:44px;height:44px}
  .tp-presets{margin-left:0}
  .tp-lnm{min-width:120px}
}

/* Density, small phones (2026-10-24): at <=375px the one-row
   leaders blocks tighten once more — narrower row padding, 1px
   cell gutters, values at 14px — so the widest value strings
   (FT "13-16", TOI "24:36", C/ATT "24/38") still fit their cells
   on a 360px screen with nothing clipped. Compression order per
   the user's density directive: gutters, then labels, then the
   value size itself. */
@media (max-width:375px){
  .ld2row{padding-left:6px;padding-right:6px}
  .ld2s{gap:1px}
  .ld2v{font-size:14px}
}

/* Fantasy mode (combo31): the Fantasy button is a .dw row of its
   own, right under the scope control; position chips reuse .cats;
   the contributing line wraps inside the player cell (the table's
   figures are nowrap everywhere else); the panel's Fantasy link is
   an .lscopebtn anchor and needs the underline off. */
#fantasyToggle{margin-top:-4px}
table.ld td.pl .figs.fl{white-space:normal;overflow-wrap:break-word}
.fsum{margin:2px 0 8px}
.plead-bar a.fbtn{text-decoration:none}
/* ============ COMPACT QUIET SECTIONS (desktop only, 2026-10-26) ============
   Brian: "Fit more sports into the first screen. On desktop, the
   single-game NFL section leaves substantial empty space, pushing
   other sports down. Make quiet sports more compact and preserve
   the scrolling scores and leaders."
   A front-panel section whose SHOWN slate has 1-4 games renders
   compactly at desktop widths. The trigger is the count class
   panelTilesHtml already stamps on the tiles zone (.ptiles-n1..n4,
   the 2026-10-23 small-slate family) — pure presentation keyed off
   the rendered slate, so every re-render (date change, "Show
   today's games", postseason flip, live refresh) re-decides from
   the slate actually on screen; no compact state is stored.
   Compact form:
     - games become slim single-row score bars: the same .gtile
       markup and box-score link laid out in a row — status first,
       the two team rows (with an "@" between them), then the
       betting line and TV line flowing inside the bar, and the
       "Box score" foot pinned right;
     - leaders collapse to the bar (title + category select +
       scope toggle on ONE line) plus the TOP board row; the
       board's own depth expander ("Show more" / "Show less")
       restores the full board in place — rows are only ever
       CSS-hidden, never removed from the markup;
     - the section head is untouched.
   Fallbacks to the full form, by construction:
     - a panel showing the Fresh-legs Back-to-back section
       (.b2bsec) never matches (:not(:has(.b2bsec))) — the
       partition and its availability notes keep the tile grid;
     - the NBA/RX panel in Standings view has no .ptiles in its
       zone, so nothing matches and the table renders as today;
     - empty/error panels (.ptiles-none / .perr) carry no count
       class and render as today.
   Widths below 1024px get none of these rules: phone rendering
   is exactly as before. Browsers without :has() support render
   exactly as before at every width. */
@media (min-width:1024px){
  /* Zone split: bars are short and wide, so the tiles zone gives
     back the small-slate width the leaders board can use. (The
     .pzone form covers the NBA/RX Scores view, whose zone wraps
     the tiles div.) */
  .pbody:has(.ptiles-n1):not(:has(.b2bsec))>.ptiles,
  .pbody:has(.ptiles-n2):not(:has(.b2bsec))>.ptiles,
  .pbody:has(.ptiles-n3):not(:has(.b2bsec))>.ptiles,
  .pbody:has(.ptiles-n4):not(:has(.b2bsec))>.ptiles,
  .pbody:has(.ptiles-n1):not(:has(.b2bsec))>.pzone,
  .pbody:has(.ptiles-n2):not(:has(.b2bsec))>.pzone,
  .pbody:has(.ptiles-n3):not(:has(.b2bsec))>.pzone,
  .pbody:has(.ptiles-n4):not(:has(.b2bsec))>.pzone{flex:1 1 44%}
  /* Slim score bars: the tile grid becomes a stack of bars. */
  .pbody:has(.ptiles-n1):not(:has(.b2bsec)) .tgrid,
  .pbody:has(.ptiles-n2):not(:has(.b2bsec)) .tgrid,
  .pbody:has(.ptiles-n3):not(:has(.b2bsec)) .tgrid,
  .pbody:has(.ptiles-n4):not(:has(.b2bsec)) .tgrid{display:flex;flex-direction:column;gap:5px}
  .pbody:has(.ptiles-n1):not(:has(.b2bsec)) .gtile,
  .pbody:has(.ptiles-n2):not(:has(.b2bsec)) .gtile,
  .pbody:has(.ptiles-n3):not(:has(.b2bsec)) .gtile,
  .pbody:has(.ptiles-n4):not(:has(.b2bsec)) .gtile{flex-direction:row;flex-wrap:wrap;align-items:center;height:auto;min-height:36px;padding:6px 10px;column-gap:9px;row-gap:3px}
  .pbody:has(.ptiles-n1):not(:has(.b2bsec)) .gtile .row ~ .row::before,
  .pbody:has(.ptiles-n2):not(:has(.b2bsec)) .gtile .row ~ .row::before,
  .pbody:has(.ptiles-n3):not(:has(.b2bsec)) .gtile .row ~ .row::before,
  .pbody:has(.ptiles-n4):not(:has(.b2bsec)) .gtile .row ~ .row::before{content:"@";color:var(--mut);font-weight:600}
  .pbody:has(.ptiles-n1):not(:has(.b2bsec)) .gtile .gbox,
  .pbody:has(.ptiles-n2):not(:has(.b2bsec)) .gtile .gbox,
  .pbody:has(.ptiles-n3):not(:has(.b2bsec)) .gtile .gbox,
  .pbody:has(.ptiles-n4):not(:has(.b2bsec)) .gtile .gbox{margin:0 0 0 auto}
  .pbody:has(.ptiles-n1):not(:has(.b2bsec)) .gtile .ln,
  .pbody:has(.ptiles-n2):not(:has(.b2bsec)) .gtile .ln,
  .pbody:has(.ptiles-n3):not(:has(.b2bsec)) .gtile .ln,
  .pbody:has(.ptiles-n4):not(:has(.b2bsec)) .gtile .ln,
  .pbody:has(.ptiles-n1):not(:has(.b2bsec)) .gtile .tvln,
  .pbody:has(.ptiles-n2):not(:has(.b2bsec)) .gtile .tvln,
  .pbody:has(.ptiles-n3):not(:has(.b2bsec)) .gtile .tvln,
  .pbody:has(.ptiles-n4):not(:has(.b2bsec)) .gtile .tvln{margin-top:0}
  /* Leaders: one-line bar (the panel title gives up its own line)
     and only the top board row until the expander opens. */
  .pbody:has(.ptiles-n1):not(:has(.b2bsec)) .plead-bar,
  .pbody:has(.ptiles-n2):not(:has(.b2bsec)) .plead-bar,
  .pbody:has(.ptiles-n3):not(:has(.b2bsec)) .plead-bar,
  .pbody:has(.ptiles-n4):not(:has(.b2bsec)) .plead-bar{flex-wrap:nowrap}
  .pbody:has(.ptiles-n1):not(:has(.b2bsec)) .plead-title,
  .pbody:has(.ptiles-n2):not(:has(.b2bsec)) .plead-title,
  .pbody:has(.ptiles-n3):not(:has(.b2bsec)) .plead-title,
  .pbody:has(.ptiles-n4):not(:has(.b2bsec)) .plead-title{flex:0 0 auto}
  /* The collapse is gated on the expander's presence: a board
     whose pool fits the default depth (<=3 rows — e.g. Passing
     on a one-game NFL slate, two quarterbacks) renders NO "Show
     more" button, so its rows all stay visible; nothing is ever
     hidden without the one click that brings it back. */
  .pbody:has(.ptiles-n1):not(:has(.b2bsec)):has(.plead-wrap .showmore) .plead-board .drow ~ .drow,
  .pbody:has(.ptiles-n2):not(:has(.b2bsec)):has(.plead-wrap .showmore) .plead-board .drow ~ .drow,
  .pbody:has(.ptiles-n3):not(:has(.b2bsec)):has(.plead-wrap .showmore) .plead-board .drow ~ .drow,
  .pbody:has(.ptiles-n4):not(:has(.b2bsec)):has(.plead-wrap .showmore) .plead-board .drow ~ .drow{display:none}
  .pbody:has(.ptiles-n1):not(:has(.b2bsec)):has(.plead-wrap .showmore) .plead-wrap.expanded .plead-board .drow ~ .drow,
  .pbody:has(.ptiles-n2):not(:has(.b2bsec)):has(.plead-wrap .showmore) .plead-wrap.expanded .plead-board .drow ~ .drow,
  .pbody:has(.ptiles-n3):not(:has(.b2bsec)):has(.plead-wrap .showmore) .plead-wrap.expanded .plead-board .drow ~ .drow,
  .pbody:has(.ptiles-n4):not(:has(.b2bsec)):has(.plead-wrap .showmore) .plead-wrap.expanded .plead-board .drow ~ .drow{display:flex}
  /* Fitted-skeleton lockstep (the panel-check (g) contract): the
     fitted skeleton stamps the same count class, so its ghosts
     take the compact geometry too — ghost bars at bar height and
     a one-row ghost board. */
  .pbody:has(.ptiles-n1):not(:has(.b2bsec)) .skel-gtile,
  .pbody:has(.ptiles-n2):not(:has(.b2bsec)) .skel-gtile,
  .pbody:has(.ptiles-n3):not(:has(.b2bsec)) .skel-gtile,
  .pbody:has(.ptiles-n4):not(:has(.b2bsec)) .skel-gtile{height:36px}
  .pbody:has(.ptiles-n1):not(:has(.b2bsec)) .skel-board .skel-row ~ .skel-row,
  .pbody:has(.ptiles-n2):not(:has(.b2bsec)) .skel-board .skel-row ~ .skel-row,
  .pbody:has(.ptiles-n3):not(:has(.b2bsec)) .skel-board .skel-row ~ .skel-row,
  .pbody:has(.ptiles-n4):not(:has(.b2bsec)) .skel-board .skel-row ~ .skel-row{display:none}
}

/* ================= UFC (Phase 1, 2026-10-26) =================
   Compact front panel, section list, event page with the
   fight-length strip, fighter page, rankings. All colors ride
   the theme variables; outcome fills are always paired with
   text labels (color is never the only encoding). Names wrap —
   they never truncate. */
.sport[data-sport="ufc"] .sport-full{color:var(--ufc)}
.ufc-sec{max-width:860px;margin:0 auto}
.ufc-crumb{margin:2px 0 8px;font-size:13px;font-weight:700}
.ufc-crumb a{color:var(--ufc);text-decoration:none}
.ufc-crumb a:hover{text-decoration:underline}
.ufc-h{font-family:Georgia,"Times New Roman",serif;font-size:24px;font-weight:700;margin:0 0 6px}
.ufc-sub{font-family:Georgia,"Times New Roman",serif;font-size:17px;font-weight:700;margin:16px 0 7px}
.ufc-note{color:var(--mut);font-size:12.5px;margin:10px 0 0}
.ufc-note-inline{color:var(--mut);font-size:12px}
.ufc-tabs{display:flex;gap:8px;margin:0 0 10px}
.ufc-tab{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;
  padding:5px 13px;font-size:13px;font-weight:700;text-decoration:none}
.ufc-tab.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.ufc-jump{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--mut);margin:8px 0}
.ufc-jump select{flex:1;min-width:0;padding:7px 9px;font-size:14px;font-family:inherit;color:var(--ink);
  background:var(--card);border:1px solid var(--line);border-radius:8px}
.ufc-evrow{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--rad);padding:10px 12px;margin:0 0 7px;text-decoration:none;color:var(--ink)}
.ufc-evrow:hover{background:var(--hover)}
.ufc-ev-main{flex:1;min-width:0}
.ufc-ev-name{display:block;font-weight:700;font-size:15px}
.ufc-ev-when{display:block;color:var(--mut);font-size:12.5px;margin-top:1px}
.ufc-ev-heads{display:block;margin-top:5px}
.ufc-ev-head{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12.5px;color:var(--mut);margin-top:3px}
.ufc-ev-head:first-child{margin-top:0}
.ufc-ev-hs{width:28px;height:28px;border-radius:50%;background:var(--skel);overflow:hidden;flex:none}
.ufc-ev-hs img{width:100%;height:100%;object-fit:cover;display:block}
.ufc-ev-hname.win{font-weight:800;color:var(--ink)}
.ufc-ev-w{font-weight:800;color:var(--up);font-size:11px;letter-spacing:.3px}
.ufc-ev-hname{font-weight:700;color:var(--ink)}
.ufc-ev-hrec{white-space:nowrap}
.ufc-ev-hform{white-space:nowrap}
.ufc-ev-tag{font-size:11.5px;font-weight:700;color:var(--ufc);border:1px solid var(--ufc);
  border-radius:999px;padding:2px 9px;white-space:nowrap}
.ufc-evmeta{display:flex;flex-wrap:wrap;gap:6px 14px;color:var(--mut);font-size:13.5px;margin:0 0 8px}
.ufc-state{font-weight:700;color:var(--ufc)}
.ufc-segstarts{display:flex;flex-wrap:wrap;gap:4px 16px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--rad);padding:8px 12px;font-size:13px;margin:0 0 10px}
.ufc-live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--live);margin-right:6px;animation:ufcpulse 1.6s infinite}
@keyframes ufcpulse{0%,100%{opacity:1}50%{opacity:.35}}
/* front panel compact card */
.ufc-pcard{padding:2px 2px 4px}
.ufc-pkick{font-size:12px;font-weight:700;color:var(--ufc);text-transform:uppercase;letter-spacing:.4px}
.ufc-pname{display:block;font-family:Georgia,"Times New Roman",serif;font-size:17.5px;font-weight:700;
  color:var(--ink);text-decoration:none;margin:3px 0 5px}
.ufc-pname:hover{text-decoration:underline}
.ufc-pmain{font-size:15px;font-weight:700}
.ufc-presult{font-size:13.5px;color:var(--mut);margin-top:2px}
.ufc-plinks{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px;font-size:13px;font-weight:700}
.ufc-plinks a{color:var(--ufc);text-decoration:none}
.ufc-plinks a:hover{text-decoration:underline}
.ufc-pnext{color:var(--mut);font-weight:400}
/* UFC front panel — the full card in a bounded scroll region
   (2026-10-27). Vertical inner scroll, not a horizontal lane:
   a fight card is one ordered list read main-event-down, and
   the lane idiom is for independent tiles. The region shows
   roughly the first five fights; the rest scroll inside the
   panel, so the panel's height is the same whether the card
   carries 5 fights or 14. Momentum scrolling matches the
   site's lane idiom (-webkit-overflow-scrolling:touch). */
.ufc-pfights{margin-top:10px;border-top:1px solid var(--line);max-height:312px;overflow-y:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin}
.ufc-pf-seg{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--ufc);padding:8px 2px 2px}
.ufc-pfight{display:block;padding:7px 2px 8px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.ufc-pfight:last-child{border-bottom:none}
.ufc-pf-wc{display:block;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--mut)}
.ufc-pf-title{color:var(--ufc);text-transform:none;letter-spacing:0}
.ufc-pf-names{display:block;font-size:14px;margin-top:1px}
.ufc-pf-names b{font-weight:800}
.ufc-pf-vs{color:var(--mut);font-size:12px}
.ufc-pf-rec{color:var(--mut);font-size:12px}
.ufc-pf-res{display:block;font-size:12.5px;color:var(--mut);margin-top:1px}
.ufc-pf-hs{display:inline-block;width:30px;height:30px;border-radius:50%;background:var(--skel);vertical-align:middle;margin-right:6px;overflow:hidden}
.ufc-pf-hs img{width:100%;height:100%;object-fit:cover;display:block}
.ufc-pf-meta{display:block;font-size:12px;color:var(--mut);margin-top:3px;line-height:1.5}
.ufc-pf-mname{font-weight:700;color:var(--ink)}
.ufc-pf-meta .fdots{margin-left:4px;vertical-align:-1px}
/* outcome bar */
.ufc-ob{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);padding:9px 12px 10px;margin:0 0 6px}
.ufc-ob-head{font-size:13px;font-weight:700;margin:0 0 7px}
.ufc-obar{display:flex;height:20px;border-radius:5px;overflow:hidden;border:1px solid var(--line)}
.ufc-obar-seg{border:0;padding:0 4px;font-family:inherit;font-size:11px;font-weight:700;color:#fff;
  cursor:pointer;white-space:nowrap;overflow:hidden;text-align:center}
.ufc-obar-seg.on{outline:2px solid var(--ink);outline-offset:-2px}
.ufc-obar-seg.ko,.ufc-wbar-seg.ko{background:#b3261e}
.ufc-obar-seg.sub,.ufc-wbar-seg.sub{background:#62449e}
.ufc-obar-seg.dec,.ufc-wbar-seg.dec{background:#2f6f8f}
.ufc-obar-seg.draw{background:#a67c00}
.ufc-obar-seg.oth{background:#8a8378}
:root[data-theme="dark"] .ufc-obar-seg.dec{background:#54809f}
:root[data-theme="dark"] .ufc-obar-seg.draw{background:#c49a35}
.ufc-ob-legend{display:flex;flex-wrap:wrap;gap:3px 14px;font-size:12.5px;color:var(--mut);margin-top:6px}
.ufc-ob-clear{border:1px solid var(--line);background:var(--card);color:var(--ufc);border-radius:999px;
  padding:2px 10px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit}
/* highlights */
.ufc-hl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:7px}
.ufc-hl-card{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--rad);
  padding:9px 12px;text-decoration:none;color:var(--ink)}
.ufc-hl-card:hover{background:var(--hover)}
.ufc-hl-lab{display:block;font-size:11.5px;font-weight:700;color:var(--ufc);text-transform:uppercase;letter-spacing:.4px}
.ufc-hl-who{display:block;font-size:15px;font-weight:700;margin:2px 0 0}
.ufc-hl-val{display:block;font-size:13.5px;margin-top:1px}
.ufc-hl-vs{display:block;font-size:12px;color:var(--mut);margin-top:1px}
/* bouts */
.ufc-bouts{display:flex;flex-direction:column;gap:7px}
.ufc-bout{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);padding:10px 12px}
.ufc-bout.flash{outline:2px solid var(--ufc);outline-offset:1px}
.ufc-bout-top{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;font-size:12.5px;color:var(--mut);margin:0 0 7px}
.ufc-wc{font-weight:700;color:var(--ink)}
.ufc-title{color:var(--ufc);font-weight:700}
.ufc-upnext{font-weight:700;color:var(--ufc)}
.ufc-live-tag{font-weight:700;color:var(--live)}
.ufc-fighters{display:flex;flex-direction:column;gap:3px}
.ufc-fighter{display:flex;align-items:center;gap:9px;min-width:0}
.ufc-hs{width:38px;height:38px;border-radius:50%;object-fit:cover;background:var(--skel);flex:none}
.ufc-hs-big{width:84px;height:84px;border-radius:50%;object-fit:cover;background:var(--skel);flex:none}
.ufc-fname{font-size:15.5px;font-weight:700;min-width:0}
.ufc-fname a{color:var(--ink);text-decoration:none}
.ufc-fname a:hover{text-decoration:underline}
.ufc-fighter.win .ufc-fname a{color:var(--ufc)}
.ufc-frec{font-size:12.5px;color:var(--mut);font-weight:400}
.ufc-fcol{display:flex;flex-direction:column;min-width:0}
.ufc-fmeta{display:block;font-size:12.5px;color:var(--mut);margin-top:1px}
.ufc-fform{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--mut);margin-top:1px;flex-wrap:wrap}
.ufc-fform .fdots{flex:0 0 auto}
.ufc-winlab{font-size:11px;font-weight:700;color:var(--paper);background:var(--up);
  border-radius:999px;padding:2px 8px;white-space:nowrap}
.ufc-vs{font-size:11.5px;color:var(--mut);font-weight:700;padding-left:47px}
.ufc-result{font-size:13.5px;margin:7px 0 0}
.ufc-strip{display:flex;align-items:center;gap:3px;margin-top:8px}
.ufc-cell{position:relative;flex:1;height:11px;border:1px solid var(--line);border-radius:3px;
  background:transparent;overflow:hidden}
.ufc-cell .ufc-fill{position:absolute;inset:0;width:0;background:var(--ufc);opacity:.85}
.ufc-cell.off{background:repeating-linear-gradient(45deg,transparent 0 4px,var(--hair) 4px 8px);opacity:.55}
.ufc-strip-lab{font-size:12px;color:var(--mut);font-weight:700;white-space:nowrap;margin-left:6px}
/* Phase 2: expanded fight box score + strike-target silhouettes.
   Fighter A reads in the UFC red, fighter B in the outcomes-bar
   blue, consistently across numbers, bars and silhouettes. */
.ufc-det{margin-top:9px}
.ufc-det:empty{margin-top:0}
.ufc-detbtn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--hover);
  color:var(--ink);border-radius:999px;padding:6px 14px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit}
.ufc-detbtn:hover{border-color:var(--ufc);color:var(--ufc)}
.ufc-boxpanel{margin-top:10px;border-top:1px solid var(--hair);padding-top:10px}
.ufc-bs-head{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:baseline;margin:0 0 4px}
.ufc-bs-name{font-size:14.5px;font-weight:700;min-width:0}
.ufc-bs-name a{color:inherit;text-decoration:none}
.ufc-bs-name a:hover{text-decoration:underline}
.ufc-bs-name.a{color:var(--ufc);text-align:left}
.ufc-bs-name.b{color:#2f6f8f;text-align:right}
:root[data-theme="dark"] .ufc-bs-name.b{color:#54809f}
.ufc-bs-scope{font-size:11.5px;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.4px;white-space:nowrap}
.ufc-bs-row{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:8px;align-items:center;padding:5px 0;border-top:1px solid var(--hair)}
.ufc-bs-v{display:flex;flex-direction:column;min-width:0}
.ufc-bs-v.a{align-items:flex-end;text-align:right}
.ufc-bs-v.b{align-items:flex-start;text-align:left}
.ufc-bs-num{font-size:19px;font-weight:800;line-height:1.1}
.ufc-bs-v.a .ufc-bs-num{color:var(--ufc)}
.ufc-bs-v.b .ufc-bs-num{color:#2f6f8f}
:root[data-theme="dark"] .ufc-bs-v.b .ufc-bs-num{color:#54809f}
.ufc-bs-sub{font-size:11.5px;color:var(--mut);white-space:nowrap}
.ufc-bs-c{min-width:0}
.ufc-bs-lab{display:block;text-align:center;font-size:11.5px;font-weight:700;color:var(--mut);
  text-transform:uppercase;letter-spacing:.3px}
.ufc-bs-bars{display:flex;gap:3px;margin-top:4px}
.ufc-bs-track{flex:1;height:8px;background:var(--hair);border-radius:4px;display:flex;overflow:hidden;min-width:0}
.ufc-bs-track.a{justify-content:flex-end}
.ufc-bs-fill{height:100%;border-radius:4px}
.ufc-bs-fill.a{background:var(--ufc)}
.ufc-bs-fill.b{background:#2f6f8f}
:root[data-theme="dark"] .ufc-bs-fill.b{background:#54809f}
.ufc-sils{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
@media (max-width:460px){.ufc-sils{grid-template-columns:1fr}}
.ufc-sil{display:flex;gap:10px;align-items:flex-start;background:var(--hover);border:1px solid var(--hair);
  border-radius:8px;padding:8px 10px;min-width:0}
.ufc-sil-fig{flex:none;line-height:0}
.ufc-sil-svg{display:block}
.ufc-sil-rg.a{fill:var(--ufc)}
.ufc-sil-rg.b{fill:#2f6f8f}
:root[data-theme="dark"] .ufc-sil-rg.b{fill:#54809f}
.ufc-sil-base{fill:var(--line)}
.ufc-sil-side{min-width:0}
.ufc-sil-lab{font-size:12px;font-weight:700;color:var(--mut);margin:1px 0 4px}
.ufc-sil-cr{display:flex;align-items:baseline;gap:6px;font-size:12.5px;color:var(--mut);line-height:1.6}
.ufc-sil-cr b{font-size:14px;color:var(--ink)}
.ufc-sil-att{font-size:11.5px}
.ufc-sil-note{font-size:11.5px;color:var(--mut);margin-top:5px}
.ufc-bs-take{font-size:13.5px;margin:10px 0 0}
.ufc-bs-note{font-size:12px;color:var(--mut);margin:8px 0 0}
/* fighter page */
.ufc-fhead{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--line);
  border-radius:var(--rad);padding:12px 14px}
.ufc-fid{min-width:0}
.ufc-nick{font-size:16px;color:var(--mut);font-weight:400}
.ufc-record{font-size:15px;margin-top:2px}
.ufc-splits{font-size:13px;color:var(--mut);margin-top:3px;line-height:1.5}
.ufc-rankline{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 2px}
.ufc-rankline:empty{display:none}
.ufc-rankchip{font-size:12.5px;font-weight:700;color:var(--ufc);border:1px solid var(--ufc);
  border-radius:999px;padding:2px 10px;text-decoration:none}
.ufc-wbar-wrap{margin:10px 0 2px}
.ufc-wbar{display:flex;height:20px;border-radius:5px;overflow:hidden;border:1px solid var(--line)}
.ufc-wbar-seg{display:flex;align-items:center;justify-content:center;padding:0 4px;
  font-size:11px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden}
.ufc-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:7px;margin:10px 0 2px}
.ufc-fact{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);
  padding:7px 11px;min-width:0}
.ufc-fact span{display:block;font-size:11.5px;color:var(--mut);font-weight:700;text-transform:uppercase;letter-spacing:.3px;overflow-wrap:anywhere}
.ufc-fact b{font-size:15.5px;overflow-wrap:anywhere}
.ufc-next-card{display:flex;gap:11px;align-items:center;background:var(--card);border:1px solid var(--line);
  border-radius:var(--rad);padding:10px 12px}
.ufc-next-main{font-size:14.5px}
.ufc-next-main a{color:var(--ink);font-weight:700;text-decoration:none}
.ufc-next-main a:hover{text-decoration:underline}
.ufc-scope{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:14px 0 4px}
.ufc-chip{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;
  padding:5px 13px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit}
.ufc-chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.ufc-timeline{display:flex;flex-wrap:wrap;gap:4px;margin:8px 0 2px}
.ufc-tl{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;
  font-size:12px;font-weight:700;border:1px solid var(--line);background:var(--card);color:var(--mut)}
.ufc-tl.w{background:var(--up);border-color:var(--up);color:#fff}
.ufc-tl.l{background:var(--dn);border-color:var(--dn);color:#fff}
.ufc-tl.d{background:#a67c00;border-color:#a67c00;color:#fff}
.ufc-hrow{display:flex;gap:10px;align-items:flex-start;background:var(--card);border:1px solid var(--line);
  border-radius:var(--rad);padding:8px 12px;margin:0 0 6px}
.ufc-hres{flex:none;width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:700;border:1px solid var(--line);color:var(--mut);background:var(--card)}
.ufc-hres.w{background:var(--up);border-color:var(--up);color:#fff}
.ufc-hres.l{background:var(--dn);border-color:var(--dn);color:#fff}
.ufc-hres.d{background:#a67c00;border-color:#a67c00;color:#fff}
.ufc-hmain{flex:1;min-width:0}
.ufc-hopp{display:block;font-size:15px;font-weight:700}
.ufc-hopp a{color:var(--ink);text-decoration:none}
.ufc-hopp a:hover{text-decoration:underline}
.ufc-hev{display:block;font-size:12.5px;color:var(--mut)}
.ufc-hev a{color:var(--mut)}
.ufc-hmeth{font-size:12.5px;color:var(--mut);text-align:right;white-space:nowrap}
/* rankings */
.ufc-rmeta{color:var(--mut);font-size:13px;margin:0 0 6px}
.ufc-rmeta a{color:var(--ufc)}
.ufc-rrow{display:flex;align-items:center;gap:11px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--rad);padding:8px 12px;margin:0 0 6px}
.ufc-rrow.champ{border-color:var(--ufc);border-width:1.5px;padding:11px 13px}
.ufc-rrank{flex:none;width:30px;text-align:center;font-family:Georgia,"Times New Roman",serif;
  font-size:17px;font-weight:700;color:var(--ufc)}
.ufc-rrow .ufc-hs{width:40px;height:40px}
.ufc-rrow.champ .ufc-hs{width:54px;height:54px}
.ufc-rmain{flex:1;min-width:0}
.ufc-rname{display:block;font-size:15.5px;font-weight:700}
.ufc-rrow.champ .ufc-rname{font-size:18px}
.ufc-rname a{color:var(--ink);text-decoration:none}
.ufc-rname a:hover{text-decoration:underline}
.ufc-interim{font-size:11.5px;font-weight:700;color:var(--paper);background:#a67c00;
  border-radius:999px;padding:2px 8px;vertical-align:2px}
.ufc-rnext{display:block;font-size:12.5px;color:var(--mut);margin-top:1px}
.ufc-rrec{display:block;font-size:12.5px;color:var(--mut);margin-top:1px}
.ufc-rlast{display:block;font-size:12.5px;color:var(--mut);margin-top:1px}
.ufc-rform{display:block;font-size:12.5px;color:var(--mut);margin-top:1px}
.ufc-rform .fdots{margin-left:4px;vertical-align:-1px}
.ufc-headform{margin-top:7px}
.ufc-rnext a{color:var(--mut);font-weight:700}
.ufc-rankmatch{display:inline-block;font-size:12px;font-weight:700;color:var(--ufc);
  border:1px solid var(--ufc);border-radius:999px;padding:1px 9px;margin-top:3px;text-decoration:none}
.ufc-rmove{flex:none;font-size:12.5px;font-weight:700;color:var(--mut);white-space:nowrap}
.ufc-mv-up{color:var(--up)}
.ufc-mv-down{color:var(--dn)}
@media (max-width:700px){
  .ufc-h{font-size:21px}
  .ufc-fhead{flex-direction:row;padding:10px 12px}
  .ufc-hs-big{width:64px;height:64px}
  .ufc-hmeth{white-space:normal}
  .ufc-strip-lab{font-size:11.5px}
  .ufc-obar-seg span{display:none}   /* the legend below the bar carries the labels + counts at phone widths */
}

/* ---------- Minor league baseball (SECRET section, 2026-10-27) ----------
   The hidden door: a fixed menu toggled by 5 taps on the masthead
   tagline (app.js wireMilbDoor, the nbaranking #secretDoor pattern;
   moved off the brand link 2026-10-27 — the tagline is not a link,
   so the taps never reload the page).
   Everything below is namespaced .milb- / #milbDoor so no existing
   surface changes. Tables carry their own .milb-t styling inside
   .twrap (never the ld class — see the note at table.milb-t); at phone
   widths the desktop-only columns (data-pri="2") drop out and the
   dense type shrinks so each table fits one width — no sideways
   scroll. */
#milbDoor{position:fixed;top:54px;left:50%;transform:translateX(-50%);z-index:90;
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px;
  box-shadow:0 10px 28px rgba(20,16,8,.28)}
#milbDoor[hidden]{display:none}
#milbDoor a{display:block;color:var(--ink);text-decoration:none;font-size:12px;font-weight:700;
  letter-spacing:1.2px;text-transform:uppercase;padding:8px 14px;border-radius:8px}
#milbDoor a:hover{background:var(--hover)}
.milb-sec{max-width:1060px;margin:0 auto}
.milb-crumb{margin:2px 0 8px;font-size:13px;font-weight:700}
.milb-crumb a{color:var(--mlb);text-decoration:none}
.milb-crumb a:hover{text-decoration:underline}
.milb-h{font-family:Georgia,"Times New Roman",serif;font-size:24px;font-weight:700;margin:0 0 6px}
.milb-h3{font-family:Georgia,"Times New Roman",serif;font-size:18px;font-weight:700;margin:18px 0 8px}
.milb-h4{font-size:13px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--mut);margin:14px 0 6px}
.milb-sub{color:var(--mut);font-size:13.5px;margin:0 0 10px;line-height:1.5}
.milb-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.milb-tab{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;
  padding:6px 13px;font-size:13px;font-weight:700;text-decoration:none}
.milb-tab.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.milb-chips{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 10px}
.milb-chips a{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;
  padding:7px 13px;font-size:13px;font-weight:700;text-decoration:none}
.milb-chips a.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.milb-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin:10px 0 16px}
.milb-card{display:block;border:1px solid var(--line);border-radius:var(--rad);background:var(--card);
  padding:13px 14px;text-decoration:none;color:var(--ink)}
.milb-card:hover{border-color:var(--ink)}
.milb-card b{display:block;font-size:16px;margin-bottom:4px}
.milb-card span{color:var(--mut);font-size:13px;line-height:1.45;display:block}
.milb-filters{display:flex;gap:14px;flex-wrap:wrap;margin:0 0 8px}
.milb-sel{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;
  letter-spacing:.6px;text-transform:uppercase;color:var(--mut);margin:0 0 10px}
.milb-sel select{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:8px;
  padding:6px 8px;font-size:13.5px;font-weight:600;font-family:inherit;text-transform:none;letter-spacing:0}
.milb-count{color:var(--mut);font-size:12.5px;margin:0 0 6px}
.milb-twrap{margin:0 0 14px}
/* Milb tables are styled self-contained here (mirroring table.ld) and
   must NOT carry the ld class: at <=700px the site hides table.ld and
   swaps in .ld2 blocks, which would blank these tables on phones. */
table.milb-t{width:100%;border-collapse:collapse;min-width:0;font-size:12.5px}
table.milb-t th,table.milb-t td{padding:6px 5px;font-size:12.5px;text-align:right;
  border-bottom:1px solid var(--hair);white-space:nowrap;font-weight:700}
table.milb-t th{font-size:10.5px;letter-spacing:1px;color:var(--mut);font-weight:800}
table.milb-t tr:last-child td{border-bottom:0}
table.milb-t tbody tr{cursor:default}
table.milb-t tbody tr:hover td{background:var(--hover)}
table.milb-t td.rk,table.milb-t th.rk{text-align:center;color:var(--mut);font-weight:800;width:32px}
table.milb-t td.pl,table.milb-t th.pl{text-align:left}
table.milb-t th .milb-tha{color:inherit;text-decoration:none;cursor:pointer;display:block}
table.milb-t th.msorted,table.milb-t td.msorted{color:var(--sorted);font-weight:900}
table.milb-t td.st{font-weight:700}
.milb-seg{white-space:nowrap}
.milb-plink{color:inherit;text-decoration:none;font-weight:700}
.milb-plink:hover{text-decoration:underline}
.milb-tlink{color:inherit;text-decoration:none}
.milb-tlink:hover{text-decoration:underline}
.milb-tabbr{display:none}
.milb-t100{display:inline-block;background:var(--cb-bg);border:1px solid var(--cb-line);color:var(--ink);
  border-radius:999px;font-size:10.5px;font-weight:800;padding:1px 7px;white-space:nowrap;vertical-align:1px}
.milb-ovr{color:var(--mut);font-size:12px;font-weight:700;white-space:nowrap}
/* Phone second line under the player name (stint context: level ·
   league + division · team). In the DOM on every viewport but
   display:none above 700px — desktop rendering is unchanged; the
   <=700px block below turns it on where the columns drop out. */
.milb-sub2{display:none}
.milb-rankline{margin:0 0 10px;font-size:13.5px}
.milb-note-inline{color:var(--mut);font-size:12.5px}
.milb-standline{font-size:14.5px;margin:0 0 12px}
.milb-more{display:inline-block;border:1px solid var(--line);background:var(--card);color:var(--ink);
  border-radius:999px;padding:7px 14px;font-size:13px;font-weight:700;text-decoration:none}
.milb-teamgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;margin:0 0 12px}
.milb-teamcard{display:block;border:1px solid var(--line);border-radius:10px;background:var(--card);
  padding:9px 11px;text-decoration:none;color:var(--ink)}
.milb-teamcard:hover{border-color:var(--ink)}
.milb-teamcard b{display:block;font-size:13.5px}
.milb-teamcard span{color:var(--mut);font-size:12px}
.milb-divlab{font-size:12px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--mut);margin:10px 0 5px}
.milb-ladder{border:1px solid var(--line);border-radius:var(--rad);background:var(--card);margin:0 0 16px;overflow:hidden}
.milb-rung{display:flex;gap:10px;padding:9px 12px;border-bottom:1px solid var(--hair);font-size:13.5px;flex-wrap:wrap}
.milb-rung:last-child{border-bottom:0}
.milb-runglab{font-weight:800;min-width:86px;color:var(--mut);font-size:12px;letter-spacing:.6px;text-transform:uppercase;padding-top:2px}
.milb-rungteams{flex:1;min-width:180px}
.milb-foot{color:var(--mut);font-size:12.5px;line-height:1.55;margin:16px 0 0}
@media (max-width:700px){
  table.milb-t th[data-pri="2"],table.milb-t td[data-pri="2"]{display:none}
  table.milb-t th,table.milb-t td{padding:5px 3px;font-size:11.5px}
  table.milb-t td.pl{white-space:normal}
  .milb-sub2{display:block;font-size:10.5px;font-weight:600;line-height:1.35;color:var(--mut);
    white-space:normal;margin-top:1px}
  .milb-tfull{display:none}
  .milb-tabbr{display:inline}
  .milb-h{font-size:21px}
}

/* ---------- BSDB newspaper skin (2026-10-27) ----------
   boxscoredatabase.com in Brian's player-first newspaper design:
   warm ivory paper, near-black ink, one muted brick accent, the
   recolored tile mark (bsdb-mark-np.png + the -np favicon set,
   wired in app.js bsdbBrandInit), a compact left-aligned lockup,
   front panels in a 3 / 2 / 1 responsive grid, leaders first with
   detailed game cards under them (app.js panelBodyHtmlBsdb).
   EVERY rule is html.bsdb-scoped: the class exists only on the
   BSDB host, so dailyboxstats.com matches nothing here. The skin
   governs the LIGHT theme — the variable overrides sit under
   :not([data-theme="dark"]), so BSDB night mode keeps the site's
   existing dark palette (and the white wordmark twin) untouched.
   This block supersedes the same-day 3x lockup treatment: the
   redesign's masthead is the compact concept lockup. */
html.bsdb:not([data-theme="dark"]){
  --paper:#FAF9F6; --card:#fffefa; --ink:#20211E; --mut:#6f6a5e;
  --line:#ddd8ca; --hair:#eae5d6; --hover:#f3efe3;
  --live:#B64132; --sorted:#B64132; --dn:#B64132;
}
/* Masthead: mark + wordmark together at the left, tagline on its
   own line under them, Highlights pill + theme button at the
   right (margin-left:auto on the pill carries the pair). */
html.bsdb .mast-in{justify-content:flex-start;align-items:center;padding-top:10px;padding-bottom:6px;row-gap:4px}
html.bsdb .brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
html.bsdb .bsdb-mark{display:block;width:56px;height:56px}
html.bsdb .bsdb-word{display:block;height:40px;width:auto}
html.bsdb .tagline{order:9;flex:0 0 100%;text-align:left;margin-top:1px}
html.bsdb .mast-hi{margin-left:auto}
@media (max-width:760px){
  html.bsdb .mast-in{padding-top:8px}
  html.bsdb .bsdb-mark{width:44px;height:44px}
  html.bsdb .bsdb-word{height:31px}
}
/* Front grid: three sport columns on wide screens, two at
   intermediate widths, one stacked column on phones. Sections
   grow vertically with their content (align-items:start). */
html.bsdb .frontgrid{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}
@media (min-width:820px){html.bsdb .frontgrid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1220px){html.bsdb .frontgrid{grid-template-columns:repeat(3,1fr)}}
html.bsdb .sport.panel{border-radius:5px}
/* Leaders-first panel body: a single vertical column — the
   leaders block, then the scores zone below a hairline. */
html.bsdb .pbody-bsdb{display:block}
html.bsdb .bsdb-alllead{display:inline-block;margin:7px 0 1px;font-size:13px;font-weight:800;color:var(--live);text-decoration:none}
html.bsdb .bsdb-alllead:hover{text-decoration:underline}
html.bsdb .bsdb-scores{margin-top:10px;border-top:1px solid var(--line);padding-top:7px}
html.bsdb .bsdb-scores-head{font-family:Georgia,"Times New Roman",serif;font-size:14.5px;font-weight:700;margin-bottom:2px}
html.bsdb .skel-card{height:88px;background:var(--skel);border-radius:5px;margin-top:8px}
/* Detailed game cards: status line, linescore table (its own
   sideways scroller on narrow screens — the page never scrolls),
   supporting line, then the TV / line / Full box score footer. */
html.bsdb .gcard{border-top:1px solid var(--hair);padding:8px 0 9px}
html.bsdb .gcard:first-of-type{border-top:0}
html.bsdb .gc-head{display:flex;align-items:center;gap:8px;margin-bottom:3px;min-height:17px}
html.bsdb .gc-status{font-size:11.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--mut)}
html.bsdb .gc-status.live{color:var(--live)}
html.bsdb .gc-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:thin}
html.bsdb .gc-table{border-collapse:collapse;width:100%;font-size:13px}
html.bsdb .gc-table th{font-size:10.5px;font-weight:700;letter-spacing:.4px;color:var(--mut);text-align:right;padding:0 0 2px 7px}
html.bsdb .gc-table th.gc-th-team{text-align:left;padding-left:0}
html.bsdb .gc-table td{padding:2.5px 0 2.5px 7px;text-align:right;white-space:nowrap}
html.bsdb .gc-table td.gc-team{text-align:left;padding-left:0}
html.bsdb .gc-team .favstar{margin-right:1px}
html.bsdb .gc-team img{vertical-align:-3px;margin-right:5px}
html.bsdb .gc-name{font-weight:700;font-size:13.5px}
html.bsdb .gc-row.win .gc-name{font-weight:800}
html.bsdb .gc-row.win .gc-tot{font-weight:900}
html.bsdb .gc-row.dim{color:var(--mut)}
html.bsdb .gc-tot{font-weight:800;font-size:14px}
html.bsdb .gc-sup{font-size:12px;font-weight:600;color:var(--mut);margin-top:3px}
html.bsdb .gc-foot{display:flex;align-items:flex-end;gap:10px;margin-top:5px}
html.bsdb .gc-fl{display:flex;flex-direction:column;gap:1px;min-width:0;font-size:12px;font-weight:600;color:var(--mut)}
html.bsdb .gc-full{margin-left:auto;flex:0 0 auto;font-size:12.5px;font-weight:800;color:var(--live);text-decoration:none;white-space:nowrap}
html.bsdb .gc-full:hover{text-decoration:underline}
html.bsdb .bsdb-scores .b2bsec{margin-top:6px}
html.bsdb .bsdb-scores .injnote{margin:2px 0 6px}