/* Like That — the per-sport model hubs (/nfl, /nba, /mlb).
 *
 * ⚠ THIS IS A REAL STYLESHEET, LINKED FROM THE THREE SHELLS, AND IT HAS TO
 * STAY ONE. It used to be a string concatenated inside `sporthub.js`, which is
 * `defer`red — so `lt-theme.js` ran FIRST, saw a `.nav-right` that nothing had
 * hidden yet, docked the dark-mode button inside it, and then this CSS landed
 * and hid the container. The toggle vanished on every phone. A link in the
 * head is render-blocking and cannot lose that race.
 */

/* ── the site's own top bar, not a bespoke one ─────────────────────────
   These pages used to carry their own bar: logo left, then NFL/NBA/MLB/
   Betting as bordered pills. Every other page on the site has a sticky
   nav with a centred logo, a flat row of uppercase links and a hamburger
   under 640px — so the model pages announced themselves as a different
   site. The markup is the same on all three shells and `_inject_nav`
   fills `.nav-left`/`.mobile-menu` exactly as it does everywhere else;
   this is the styling for it, declared once instead of in three files. */
nav{position:sticky;top:0;z-index:100;background:var(--bg,#111);border-bottom:1px solid var(--border,#2C2C2C)}
.nav-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:.9rem 2rem;gap:1rem}
.nav-left{display:flex;flex-wrap:wrap;gap:1.5rem}
.nav-left a{color:var(--text-muted,#888);text-decoration:none;font-size:.72rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;transition:color .2s}
.nav-left a:hover,.nav-left a.active{color:var(--red,#C8102E)}
.nav-brand{display:flex;justify-content:center;align-items:center;text-decoration:none}
.nav-logo{height:48px;width:auto;display:block;border-radius:4px}
.nav-right{display:flex;gap:1rem;justify-content:flex-end}
.nav-right a{color:var(--text-muted,#888);text-decoration:none;font-size:.72rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;transition:color .2s;display:flex;align-items:center;gap:.3rem}
.nav-right a:hover{color:var(--white,#F5F2EE)}
.nav-right svg{width:14px;height:14px}
.nav-divider{height:1px;background:var(--red,#C8102E);opacity:.6}
.hamburger{display:none;cursor:pointer;color:var(--text-muted,#888);background:none;border:none;padding:4px}
.hamburger svg{width:22px;height:22px}
.mobile-menu{display:none;flex-direction:column;border-top:1px solid var(--border,#2C2C2C)}
.mobile-menu a{padding:.85rem 2rem;color:var(--text-muted,#888);text-decoration:none;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid var(--border,#2C2C2C);transition:color .2s}
.mobile-menu a:hover{color:var(--white,#F5F2EE)}
.mobile-menu.open{display:flex}
/* The masthead every other page uses: Anton, uppercase, one line under it.
   It was Playfair at 2.6rem over a gold kicker and a three-line paragraph,
   which is a different typeface from the headings further down this very
   page. */
.page-header{padding:3rem 2rem 1.4rem;max-width:1180px;margin:0 auto}
.page-header h1{font-family:'Anton','Arial Narrow',sans-serif;font-size:clamp(2.2rem,7vw,3.4rem);font-weight:900;color:var(--white,#F5F2EE);letter-spacing:.01em;line-height:.9;text-transform:uppercase;margin-bottom:.4rem}
.page-header p{color:var(--text-faint,#6B6B6B);font-size:.85rem;letter-spacing:.05em;text-transform:uppercase}
/* The sport switch is a tab strip, the same one the kickoff filter uses.
   A filled pill outweighs everything under it, which is backwards. */
.sh-switch{max-width:1180px;margin:0 auto;padding:0 2rem;display:flex;gap:1.6rem;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--border,#2C2C2C)}
.sh-switch::-webkit-scrollbar{display:none}
.sh-switch a{font:600 .82rem 'Archivo','Helvetica Neue',Arial,sans-serif;letter-spacing:.02em;color:var(--text-muted,#888);text-decoration:none;padding:.15rem 0 .6rem;border-bottom:2px solid transparent;white-space:nowrap}
.sh-switch a:hover{color:var(--text,#E8E4E0)}
.sh-switch a.on{color:var(--white,#F5F2EE);border-bottom-color:var(--red,#C8102E)}
/* ⚠ THE BREAKPOINT IS NOT OPTIONAL. Under 640px every other page hides
   the link row and the socials and shows the hamburger instead; without
   this rule the seven links stay in the grid and push the page 44px wide
   on a phone. Same numbers as the rest of the site, on purpose. */
@media(max-width:640px){.nav-top{grid-template-columns:auto 1fr auto;padding:.75rem 1rem}
.nav-left,.nav-right{display:none}
.hamburger{display:block;order:-1}
.page-header{padding:1.75rem 1rem 1.1rem}
.sh-switch{padding:0 1rem;gap:1.3rem}
}
.sh-wrap{max-width:720px;margin:0 auto;padding:2rem 1.2rem 4rem}
.sh-sec{margin-bottom:2rem}
.sh-sec-h{font:800 .64rem 'Archivo',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--gold,#D4AF37);margin-bottom:.7rem;display:flex;align-items:center;gap:.5rem}
.sh-sec-h::after{content:'';flex:1;height:1px;background:var(--border,#2C2C2C)}
.sh-tbl{width:100%;border-collapse:collapse;font-size:.84rem}
.sh-tbl td{padding:.4rem 0;border-top:1px solid var(--border,#2C2C2C);color:var(--text-muted,#888)}
.sh-tbl td:first-child{color:var(--text,#E8E4E0);font-weight:600}
.sh-tbl td:nth-child(2),.sh-tbl td:nth-child(3){text-align:right;font-variant-numeric:tabular-nums}
.sh-tbl tr.hd td{font:700 .58rem 'Archivo',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint,#6B6B6B);border-top:none}
.sh-note{font-size:.72rem;color:var(--text-faint,#6B6B6B);margin-top:.55rem;line-height:1.5}
.sh-empty{color:var(--text-faint,#6B6B6B);font-size:.85rem;padding:1rem 0}
.sh-link{display:flex;align-items:center;justify-content:space-between;gap:.6rem;text-decoration:none;border:1px solid var(--border,#2C2C2C);border-radius:8px;padding:.85rem 1rem;background:var(--surface,#1E1E1E)}
.sh-link:hover{border-color:var(--gold,#D4AF37)}
.sh-link b{color:var(--text,#E8E4E0);font-size:.92rem;display:block}
.sh-link small{color:var(--text-muted,#888);font-size:.74rem}
.sh-link .arw{color:var(--gold,#D4AF37);font-size:1.1rem}
.sh-live-hd{font:700 .64rem 'Archivo',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--red,#C8102E);margin-bottom:.6rem;display:flex;align-items:center;gap:.5rem}
.lv-dot{width:8px;height:8px;border-radius:50%;background:var(--red,#C8102E);box-shadow:0 0 0 0 rgba(200,16,46,.6);animation:lvpulse 1.8s infinite}
@keyframes lvpulse{0%{box-shadow:0 0 0 0 rgba(200,16,46,.5)}
70%{box-shadow:0 0 0 8px rgba(200,16,46,0)}
100%{box-shadow:0 0 0 0 rgba(200,16,46,0)}
}
.lv-row{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .9rem;padding:.55rem 0;border-top:1px solid var(--border,#2C2C2C);font-size:.8rem}
.lv-tm{font-weight:600;color:var(--text,#E8E4E0)}
.lv-st{color:var(--text-faint,#6B6B6B);font-size:.72rem}
.lv-b{color:var(--text-muted,#888)}
.lv-b b{color:var(--gold,#D4AF37)}
@media(prefers-reduced-motion:reduce){.lv-dot{animation:none}
}
.shp-game{margin-bottom:1rem}
.shp-gh{font:700 .64rem 'Archivo',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint,#6B6B6B);margin-bottom:.5rem}
/* Player props: a swipeable strip INSIDE each game's drawer — the host's
   call ("player props horizontal scrollable cards", never one page-wide
   list). Each mini card: face, name, market, our number as the hero, the
   book's line beneath it. The face keeps its initials-tile fallback. */
.shd-ph{font:600 .62rem 'Archivo',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint,#6B6B6B);margin:.9rem 0 .45rem}
.shd-ph em{font-style:normal;text-transform:none;letter-spacing:0;color:var(--text-faint,#6B6B6B);font-weight:400;margin-left:.4rem}
/* Market filter over the prop strip. Pills rather than the underlined tabs the
   board uses: these sit INSIDE a drawer, and a second row of underlined tabs
   reads as another section heading instead of a control on the strip below it.
   ⚠ 24px minimum height — the WCAG 2.5.8 tap floor the site audit checks. */
.shd-pf{display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:none;padding:0 .1rem .5rem}
.shd-pf::-webkit-scrollbar{display:none}
.shd-pf button{font:600 .68rem 'Archivo',sans-serif;background:none;color:var(--text-muted,#8C8C8C);border:1px solid var(--border,#2C2C2C);border-radius:999px;padding:.3rem .6rem;min-height:24px;cursor:pointer;white-space:nowrap}
.shd-pf button:hover{color:var(--text,#E8E4E0)}
.shd-pf button[aria-pressed='true']{color:var(--bg,#111);background:var(--white,#F5F2EE);border-color:var(--white,#F5F2EE)}
.shd-pf button:focus-visible{outline:2px solid var(--gold,#D4AF37);outline-offset:2px}
/* Why the book column is empty — see `bookDue` in sporthub.js. Quiet: it
   is an explanation, not a warning, and it removes itself once lines land. */
.shd-pnote{font:400 .68rem 'Archivo',sans-serif;line-height:1.45;color:var(--text-faint,#6B6B6B);margin:.15rem .1rem .35rem}
.shd-pstrip{display:flex;gap:.55rem;overflow-x:auto;padding:.1rem .1rem .5rem;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.shd-pstrip::-webkit-scrollbar{height:4px}
.shd-pstrip::-webkit-scrollbar-thumb{background:var(--border,#2C2C2C);border-radius:2px}
.shp-c{flex:0 0 128px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.18rem;border:1px solid var(--border,#2C2C2C);border-radius:10px;background:var(--bg,#111);padding:.65rem .5rem .55rem}
/* ⚠ THIS RULE IS LOAD-BEARING AND ITS ABSENCE IS SILENT. `.shp-c` sets
   display:flex, and a class selector outranks the browser's own [hidden]
   rule — so `card.hidden = true` set the attribute, changed nothing, and the
   market filter rendered its chips over a strip that never filtered. Any
   element this file gives a `display` to and JS hides needs its own
   [hidden] rule back. */
.shp-c[hidden]{display:none!important}
.shp-face{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:top;background:var(--surface,#1E1E1E);flex:none;border:1px solid var(--border,#2C2C2C)}
.shp-face-t{display:inline-flex;align-items:center;justify-content:center;font:700 .78rem 'Archivo',sans-serif;letter-spacing:.02em}
.shp-cn{font-size:.74rem;font-weight:700;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:.15rem}
.shp-cm{font:400 .6rem 'Archivo',sans-serif;color:var(--text-muted,#888);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shp-cv{font-family:'Anton','Archivo',sans-serif;font-size:1.3rem;line-height:1.1;color:var(--gold,#D4AF37);font-variant-numeric:tabular-nums;margin-top:.12rem}
.shp-cb{font-family:'JetBrains Mono',monospace;font-size:.66rem;color:var(--text-muted,#888);font-variant-numeric:tabular-nums}
/* ⚠ The thin-data note. Deliberately quiet — this is a caveat on a number, not
   a warning about a player, and red would read as "avoid him". Muted italic in
   the same column as the book line, so it sits where the eye already goes. */
.shp-cp{font-family:'JetBrains Mono',monospace;font-size:.62rem;color:var(--gold,#D4AF37);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.shp-ct{font-size:.6rem;font-style:italic;color:var(--text-faint,#7C7C7C);letter-spacing:.02em}
.shp-c-thin .shp-cv{opacity:.72}
.shp-gh{display:flex;align-items:center;gap:.45rem}
.shp-gh .shg-tile,.shp-gh .shg-crest{width:20px;height:20px;border-radius:4px;font-size:.5rem;display:inline-flex;align-items:center;justify-content:center;object-fit:contain}
.sh-trend{display:flex;align-items:baseline;gap:.6rem;padding:.5rem 0;border-top:1px solid var(--border,#2C2C2C)}
.sh-trend:first-child{border-top:none}
.sh-trend-tm{font:800 .8rem 'Archivo',sans-serif;letter-spacing:.03em;width:3rem;flex:none}
.sh-trend-b{display:flex;flex-wrap:wrap;gap:.35rem}
.sh-chip{display:inline-flex;align-items:center;gap:.3rem;font:600 .68rem 'Archivo',sans-serif;color:var(--text,#E8E4E0);background:var(--bg2,#191919);border:1px solid var(--border,#2C2C2C);border-radius:999px;padding:.16rem .5rem}
/* ── the game card ──────────────────────────────────────────────────────
   Reasons as sentences, not a chart. The only graphic is a 2px bar that
   ranks the three drivers, and the card reads fine with it ignored. */
.shg{border:1px solid var(--border,#2C2C2C);border-radius:6px;background:var(--surface,#1E1E1E);overflow:hidden;margin-bottom:.9rem}
.shg-top{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.45rem .75rem;border-bottom:1px solid var(--border,#2C2C2C);background:var(--bg2,#191919)}
.shg-when{font:700 .58rem 'Archivo',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint,#7C7C7C)}
.shg-score{display:grid;grid-template-columns:1fr auto;gap:.45rem .8rem;padding:.75rem}
.shg-rows{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.shg-tr{display:flex;align-items:center;gap:.55rem;min-width:0}
.shg-tile{width:2.5rem;flex:none;text-align:center;border-radius:3px;font:700 .68rem ui-monospace,monospace;padding:.2rem 0}
.shg-nm{font:700 1rem 'Anton','Archivo',sans-serif;letter-spacing:.01em;text-transform:uppercase;color:var(--white,#F5F2EE);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shg-tr.dim .shg-nm{color:var(--text-muted,#8C8C8C)}
.shg-pts{font:700 2.1rem 'Anton','Archivo',sans-serif;line-height:.95;color:var(--white,#F5F2EE);font-variant-numeric:tabular-nums;text-align:right;display:flex;flex-direction:column;gap:.35rem;justify-content:center}
.shg-pts .lo{color:var(--text-muted,#8C8C8C)}
.shg-lines{border-top:1px solid var(--border,#2C2C2C);padding:.6rem .75rem;display:flex;flex-wrap:wrap;gap:.25rem 1.4rem;align-items:baseline}
.shg-pair{display:flex;align-items:baseline;gap:.45rem}
.shg-k{font:700 .56rem 'Archivo',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint,#7C7C7C)}
.shg-v{font:500 .9rem ui-monospace,monospace;color:var(--text,#E8E4E0);font-variant-numeric:tabular-nums}
.shg-v.gold{color:var(--gold,#D4AF37)}
.shg-gap{width:100%;font-size:.8rem;color:var(--text-muted,#8C8C8C);line-height:1.55;padding-top:.4rem;border-top:1px dotted var(--border,#2C2C2C);margin-top:.45rem}
.shg-gap b{color:var(--text,#E8E4E0);font-weight:600}
.shg-why{border-top:1px solid var(--border,#2C2C2C);padding:.7rem .75rem .3rem}
.shg-wh{font:700 .56rem 'Archivo',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint,#7C7C7C);margin-bottom:.6rem}
.shg-d{padding-bottom:.7rem}
.shg-dt{display:flex;align-items:baseline;gap:.5rem}
.shg-dl{font:700 .72rem 'Archivo',sans-serif;letter-spacing:.04em;color:var(--white,#F5F2EE)}
.shg-dp{margin-left:auto;font:500 .72rem ui-monospace,monospace;font-variant-numeric:tabular-nums;white-space:nowrap}
.shg-dd{font-size:.76rem;color:var(--text-muted,#8C8C8C);line-height:1.55;margin-top:.15rem}
.shg-bar{height:2px;margin-top:.45rem;border-radius:2px;opacity:.6}
.shg-more{font-size:.74rem;color:var(--text-faint,#7C7C7C);margin-top:.2rem}
/* ── the box score, in a drawer on the same card ────────────────────────
   It used to be a whole second page. Two pages drawing the same game from
   the same payload is two places to keep right and four taps to reach. */
.shg-boxb{display:flex;width:100%;align-items:center;gap:.5rem;background:transparent;border:0;border-top:1px solid var(--border,#2C2C2C);padding:.6rem .75rem;cursor:pointer;text-align:left;font:700 .58rem 'Archivo',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint,#7C7C7C)}
.shg-boxb:hover{color:var(--text,#E8E4E0);background:var(--bg2,#191919)}
.shg-boxb:focus-visible{outline:2px solid var(--gold,#D4AF37);outline-offset:-2px}
.shg-caret{margin-left:auto;font-size:.95rem;line-height:1;color:var(--gold,#D4AF37)}
.shg-drawer{display:none;border-top:1px solid var(--border,#2C2C2C);background:var(--bg,#111)}
.shg-drawer.open{display:block}
.shg-sides{display:grid;grid-template-columns:1fr 1fr}
.shg-side{padding:.85rem 1rem 1rem;min-width:0}
.shg-side+.shg-side{border-left:1px solid var(--border,#2C2C2C)}
.shg-sh{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;border-bottom:1px solid var(--border,#2C2C2C);padding-bottom:.4rem}
.shg-sname{font:400 .9rem 'Anton','Archivo',sans-serif;letter-spacing:.02em;text-transform:uppercase;color:var(--white,#F5F2EE)}
.shg-spts{font:700 1rem ui-monospace,monospace;font-variant-numeric:tabular-nums;color:var(--gold,#D4AF37)}
.shg-tbl{margin-top:.75rem}
.shg-th{font:400 .55rem ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint,#7C7C7C);margin-bottom:.3rem}
.shg-tbl table{width:100%;border-collapse:collapse;table-layout:fixed}
.shg-tbl th{font:400 .53rem ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint,#7C7C7C);text-align:right;padding:.2rem .25rem;width:2.7rem}
.shg-tbl td{font-family:ui-monospace,monospace;font-variant-numeric:tabular-nums;font-size:.76rem;text-align:right;padding:.26rem .25rem;color:var(--text,#E8E4E0);border-top:1px solid rgba(255,255,255,.045)}
/* A truncated name is worse than an abbreviation and abbreviations are
   out, so the figures take fixed narrow columns and the name takes what
   is left — wrapping to a second line if it needs one, never clipping. */
.shg-tbl th.pl,.shg-tbl td.pl{text-align:left;font-family:'Archivo',sans-serif;width:auto;white-space:normal;overflow-wrap:break-word;line-height:1.25}
.shg-tbl td.pl i{font-style:normal;font-family:ui-monospace,monospace;font-size:.55rem;letter-spacing:.08em;color:var(--text-faint,#7C7C7C);margin-left:.2rem}
.shg-tbl td.pl s{text-decoration:none;color:var(--gold,#D4AF37);font-family:ui-monospace,monospace;font-size:.55rem;margin-left:.25rem}
.shg-none{font-size:.78rem;color:var(--text-faint,#7C7C7C);padding:.5rem 0 .1rem;line-height:1.5}
.shg-tag{font:700 .5rem 'Archivo',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#111;background:var(--gold,#D4AF37);border-radius:2px;padding:.08rem .3rem;vertical-align:middle;margin-left:.35rem}
.shg-fine{font-size:.68rem;color:var(--text-faint,#7C7C7C);font-style:italic;margin-top:.55rem}
.shg-sp{display:flex;flex-wrap:wrap;gap:.15rem 1rem;padding:.7rem 1rem;border-bottom:1px solid var(--border,#2C2C2C)}
.shg-sp .st{font-size:.78rem;color:var(--text-muted,#8C8C8C)}
.shg-sp .st b{color:var(--text,#E8E4E0);font-variant-numeric:tabular-nums}
.shg-sp .st b.hot{color:var(--gold,#D4AF37)}
/* ── the board: kickoff-window filter and day headings ────────────────── */
.shb-filter{border-bottom:1px solid var(--border,#2C2C2C);margin-bottom:.2rem}
.shb-tabs{display:flex;gap:1.5rem;overflow-x:auto;scrollbar-width:none}
.shb-tabs::-webkit-scrollbar{display:none}
.shb-tabs button{font:600 .82rem 'Archivo',sans-serif;background:none;border:0;border-bottom:2px solid transparent;color:var(--text-muted,#8C8C8C);padding:.15rem 0 .55rem;cursor:pointer;white-space:nowrap}
.shb-tabs button:hover{color:var(--text,#E8E4E0)}
.shb-tabs button[aria-pressed='true']{color:var(--white,#F5F2EE);border-bottom-color:var(--red,#C8102E)}
.shb-tabs button:focus-visible{outline:2px solid var(--gold,#D4AF37);outline-offset:2px}
.shb-tabs em{font-style:normal;font-family:ui-monospace,monospace;font-size:.66rem;color:var(--text-faint,#7C7C7C);margin-left:.35rem}
.shb-day{display:flex;align-items:baseline;gap:.55rem;flex-wrap:wrap;padding:1.2rem 0 .5rem}
.shb-day b{font:400 .92rem 'Anton','Archivo',sans-serif;letter-spacing:.02em;text-transform:uppercase;color:var(--white,#F5F2EE)}
.shb-day span{font:400 .63rem ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint,#7C7C7C)}
.shb-stale{border-left:3px solid var(--gold,#D4AF37);background:rgba(212,175,55,.07);padding:.85rem 1rem;margin-bottom:1.1rem;font-size:.84rem;line-height:1.55;color:var(--text-muted,#8C8C8C)}
.shb-stale b{color:var(--gold,#D4AF37)}
.shg-crest{width:26px;height:26px;flex:none;display:block;object-fit:contain}
@media(max-width:520px){.shg-pts{font-size:1.8rem}
.shg-nm{font-size:.92rem}
.shg-sides{grid-template-columns:1fr}
.shg-side+.shg-side{border-left:0;border-top:1px solid var(--border,#2C2C2C)}
.shb-tabs{gap:1.15rem}
.shb-tabs button{font-size:.78rem}
}