/* Where's the Game design system (2026-10-30 redesign). One stylesheet for every page.
   Tokens: light by default, dark from prefers-color-scheme or the header toggle (html[data-theme]). The dark palette
   matches the social graphics (scripts/graphics/lib/theme.css). Old names (--card, --chip) stay as aliases. */
:root{
  --bg:#f3f5f9;--surface:#fff;--surface-2:#eef2f8;--surface-3:#e4eaf3;--fg:#0f1720;--muted:#4f5b6b;--dim:#6b7686;--line:#dfe4ec;
  --accent:#0b63ce;--accent-soft:#e3eefc;--on-accent:#fff;--brand:#0b63ce;
  --tv:#0b63ce;--tv-soft:#e3eefc;--stream:#6a3fd6;--stream-soft:#efe9fd;--free:#137a3f;--free-soft:#e2f4ea;--oom:#8a5a00;--oom-soft:#fbf0d9;
  --ok:#137a3f;--warn:#b45309;--danger:#b3261e;--danger-soft:#fdecea;--live:#d92d20;
  --card:var(--surface);--chip:var(--surface-2);
  --shadow:0 1px 2px rgba(16,24,40,.06),0 4px 16px rgba(16,24,40,.06);--radius:14px;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --map-land:#dfe5ee;--map-edge:#fff;--map-hi:#0b63ce;--map-near:#f59e0b;--map-ext:#7aa7e8;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#0b0e13;--surface:#131821;--surface-2:#182030;--surface-3:#1f2a3c;--fg:#f1f4f8;--muted:#a3aebd;--dim:#8792a2;--line:#252d3a;
  --accent:#6aa8ff;--accent-soft:#16243a;--on-accent:#0b0e13;
  --tv:#6aa8ff;--tv-soft:#16243a;--stream:#b48cff;--stream-soft:#241c3a;--free:#4fd18b;--free-soft:#11281c;--oom:#f2b84b;--oom-soft:#2b2312;
  --ok:#4fd18b;--warn:#f2b84b;--danger:#ff8a80;--danger-soft:#2c1717;--live:#ff5a4f;
  --shadow:0 1px 2px rgba(0,0,0,.4);--map-land:#1f2a3c;--map-edge:#0b0e13;--map-hi:#6aa8ff;--map-near:#f2b84b;--map-ext:#3d6db3;color-scheme:dark}}
:root[data-theme=dark]{
  --bg:#0b0e13;--surface:#131821;--surface-2:#182030;--surface-3:#1f2a3c;--fg:#f1f4f8;--muted:#a3aebd;--dim:#8792a2;--line:#252d3a;
  --accent:#6aa8ff;--accent-soft:#16243a;--on-accent:#0b0e13;
  --tv:#6aa8ff;--tv-soft:#16243a;--stream:#b48cff;--stream-soft:#241c3a;--free:#4fd18b;--free-soft:#11281c;--oom:#f2b84b;--oom-soft:#2b2312;
  --ok:#4fd18b;--warn:#f2b84b;--danger:#ff8a80;--danger-soft:#2c1717;--live:#ff5a4f;
  --shadow:0 1px 2px rgba(0,0,0,.4);--map-land:#1f2a3c;--map-edge:#0b0e13;--map-hi:#6aa8ff;--map-near:#f2b84b;--map-ext:#3d6db3;color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.55 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
main,header,footer{max-width:760px;margin:0 auto;padding:0 16px}
header{padding-top:18px;position:relative}
a{color:var(--accent);text-underline-offset:2px}
h1,h2,h3{letter-spacing:-.015em;text-wrap:balance}
h1{font-size:clamp(1.55rem,1.2rem + 1.6vw,2.15rem);line-height:1.15;margin:.5rem 0 .4rem;font-weight:800}
h2{line-height:1.25}
.muted{color:var(--muted)}
svg.i{width:1.1em;height:1.1em;vertical-align:-.17em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Brand bar: TV mark + wordmark (links home), theme toggle at the right (added by lib/nav.js) */
.brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:.82rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin:0;text-decoration:none}
.brand svg{width:30px;height:30px;flex:none;border-radius:8px}
.theme-t{position:absolute;right:16px;top:18px;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--fg);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.theme-t svg{width:20px;height:20px}
.nav{display:flex;flex-wrap:wrap;gap:0 4px;margin:4px 0 4px;font-size:.95rem}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;margin-left:-10px;margin-right:6px;border-radius:10px;font-weight:600;text-decoration:none;color:var(--fg)}
.nav a:hover{background:var(--surface-2)}
.nav a[aria-current=page]{color:var(--accent);box-shadow:inset 0 -3px 0 var(--accent);border-radius:0}
.eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:12px 0 0}
.lede{font-size:1.05rem;color:var(--muted);margin:0 0 14px;max-width:62ch}
.crumbs{font-size:.85rem;color:var(--muted);margin:10px 0 0}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2px}
.crumbs li+li::before{content:"\203A";margin:0 6px;color:var(--dim)}
.crumbs a{color:var(--muted);display:inline-flex;align-items:center;min-height:24px}

/* Cards and sections */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin:0 0 14px;box-shadow:var(--shadow)}
.card h2{font-size:1.15rem;margin:0 0 8px}
.card h2 .i,.sec-h .i{color:var(--accent)}
.sec-h{display:flex;align-items:center;gap:8px;font-size:1.2rem;margin:26px 0 10px}
.card label{display:block;font-size:.92rem;padding:2px 0}
input[type=text],select{padding:9px 10px;font:inherit;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--fg);max-width:100%}
button.btn{padding:10px 16px;font:inherit;font-weight:600;border:0;border-radius:10px;background:var(--accent);color:var(--on-accent);cursor:pointer}
.teams{max-height:220px;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:6px 10px;margin-top:6px}
.msg{padding:8px 10px;border-radius:10px;background:var(--surface-2);margin-top:8px;font-size:.95rem}
.s-available{border-left:4px solid var(--ok)}.s-blackout{border-left:4px solid var(--danger)}.s-unavailable{border-left:4px solid var(--warn)}.s-check{border-left:4px solid var(--dim)}
.lg{font-size:.75rem;font-weight:700;color:var(--muted)}
.grid2{display:grid;gap:14px}
@media (min-width:720px){.grid2{grid-template-columns:1fr 1fr}.grid2>.card{margin:0}}

/* League icons (self-drawn inline SVG, lib/visuals.js) and league pill */
.lgp{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:800;letter-spacing:.06em;color:var(--accent);background:var(--accent-soft);border-radius:999px;padding:2px 9px 2px 6px;line-height:1.6}
.lgp svg{width:14px;height:14px}

/* Team badges: monogram in team colors (data/team-colors.json). No logos unless the ?logos=1 preview flag is on. */
.tb{--tc:#334155;--ti:#fff;--ta:#cbd5e1;display:inline-flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--tc);color:var(--ti);box-shadow:inset 0 0 0 3px var(--ta),0 0 0 2px var(--surface);font:800 .72rem/1 var(--font);letter-spacing:.02em;overflow:hidden;position:relative}
.tb.sm{width:28px;height:28px;font-size:.58rem;box-shadow:inset 0 0 0 2px var(--ta),0 0 0 2px var(--surface)}
.tb.lg{width:64px;height:64px;font-size:1.05rem;box-shadow:inset 0 0 0 4px var(--ta),0 0 0 3px var(--surface)}
.tb.xl{width:88px;height:88px;font-size:1.4rem;box-shadow:inset 0 0 0 5px var(--ta),0 0 0 3px var(--surface)}
.tb::before{content:attr(data-m)}
.tb img{position:absolute;inset:12%;width:76%;height:76%;object-fit:contain;background:#fff;border-radius:50%;padding:6%}
.pair{display:inline-flex;flex:none}.pair .tb+.tb{margin-left:-6px}
.tb[data-l="3"]{font-size:.62rem;letter-spacing:0}.tb[data-l="4"]{font-size:.52rem;letter-spacing:-.02em}.tb.lg[data-l="3"],.tb.lg[data-l="4"]{font-size:.9rem}.tb.xl[data-l="3"],.tb.xl[data-l="4"]{font-size:1.15rem}.tb.sm[data-l="3"],.tb.sm[data-l="4"]{font-size:.48rem}

/* Network / service chips: text only, colored by how you get it */
.nc{display:inline-flex;align-items:center;gap:4px;font-size:.8rem;font-weight:700;line-height:1.3;padding:3px 9px;border-radius:999px;background:var(--tv-soft);color:var(--tv);border:1px solid transparent;max-width:100%;overflow-wrap:anywhere}
.nc.stream{background:var(--stream-soft);color:var(--stream)}
.nc.free{background:var(--free-soft);color:var(--free)}
.nc.oom{background:var(--oom-soft);color:var(--oom)}
.nc.none{background:transparent;color:var(--dim);border-color:var(--line);font-weight:600}

/* "Which service has it" strip: four lanes, each lists the channels a viewer with that setup would use */
.svc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:10px 0 4px;padding:0;list-style:none}
@media (min-width:560px){.svc{grid-template-columns:repeat(4,minmax(0,1fr))}}
.svc li{border:1px solid var(--line);border-radius:10px;padding:7px 9px;background:var(--surface);min-width:0}
.svc li.on{border-color:transparent;background:var(--surface-2)}
.svc .sl{display:flex;align-items:center;gap:5px;font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.svc .sv{display:flex;flex-wrap:wrap;gap:4px}
.svc li.off .sv{font-size:.8rem;color:var(--dim)}

/* Game cards: team-color accent, matchup header with badges */
.card.game{position:relative;padding:14px 16px 12px;overflow:hidden}
.card.game::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(var(--away,#94a3b8) 0 50%,var(--home,#64748b) 50% 100%)}
.g-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0 0 8px}
.g-top .win{margin-left:0}
.mh{display:flex;align-items:center;gap:12px;margin:0 0 6px}
.mh h2{margin:0;font-size:1.12rem;line-height:1.3;min-width:0;overflow-wrap:anywhere}
.mh h2 a{color:inherit;text-decoration:none;border-bottom:1px dotted var(--dim)}
.card.game .gpl{margin:2px 0 8px;font-size:.85rem}
.card.game .times{margin:2px 0 0;color:var(--muted);font-size:.88rem}
.card.game dl{margin-top:8px}
.card.game details.more{margin-top:4px}
.card.game details.more>summary{font-weight:600;font-size:.9rem;color:var(--accent);cursor:pointer}
.card.game details.more[open]>summary{margin-bottom:2px}

/* Status chips */
.st{display:inline-flex;align-items:center;gap:5px;font-size:.7rem;font-weight:800;letter-spacing:.04em;padding:2px 8px;border-radius:999px;margin-left:0}
.st.live{background:var(--live);color:#fff}
.st.live::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;animation:pulse 1.6s ease-in-out infinite}
.st.final{background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
@keyframes pulse{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.st.live::before,.dot-live,.skel,.skel *{animation:none!important}}

/* Skeleton loading cards (shapes match a game card, so nothing jumps when cards arrive) */
.skel{position:relative;height:214px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);margin:0 0 14px;padding:16px;overflow:hidden}
.skel::before{content:"";position:absolute;left:16px;right:16px;top:16px;height:150px;background:
 radial-gradient(circle at 20px 46px,var(--surface-2) 19px,transparent 20px),
 linear-gradient(var(--surface-2),var(--surface-2)) 0 0/64px 16px no-repeat,
 linear-gradient(var(--surface-2),var(--surface-2)) 52px 36px/60% 20px no-repeat,
 linear-gradient(var(--surface-2),var(--surface-2)) 0 84px/100% 46px no-repeat,
 linear-gradient(var(--surface-2),var(--surface-2)) 0 140px/40% 10px no-repeat}
.skel::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-100%);animation:shim 1.4s infinite}
:root[data-theme=dark] .skel::after{background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.05) 50%,transparent 70%)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .skel::after{background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.05) 50%,transparent 70%)}}
@keyframes shim{to{transform:translateX(100%)}}

/* Hero: "Tonight on TV" */
.hero{position:relative;border-radius:18px;padding:16px;margin:10px 0 14px;color:#fff;background:radial-gradient(120% 140% at 100% 0,#2a6fd6 0,#0b3d86 45%,#0a1f44 100%);overflow:hidden;min-height:196px}
.hero::after{content:"";position:absolute;right:-30px;bottom:-40px;width:180px;height:180px;border-radius:50%;border:24px solid rgba(255,255,255,.06)}
.hero h2{margin:0 0 2px;font-size:1.25rem;display:flex;align-items:center;gap:8px}
.hero p{margin:0;color:#d6e4ff;font-size:.9rem}
.hero .hs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0 10px}
.hero .hs div{background:rgba(255,255,255,.1);border-radius:12px;padding:8px 10px}
.hero .hs b{display:block;font-size:1.45rem;line-height:1.1;font-variant-numeric:tabular-nums}
.hero .hs span{display:block;line-height:1.25;font-size:.66rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#d6e4ff}
.hero .hl{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.hero .hl li{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.14);border-radius:999px;padding:3px 10px 3px 7px;font-size:.8rem;font-weight:700}
.hero .hl svg{width:14px;height:14px}
.hero a{color:#fff}

/* Maps (lib/maps.js): fixed aspect ratio so nothing shifts while the SVG loads */
figure.map{margin:10px 0 4px;position:relative}
.map-box{position:relative;width:100%;aspect-ratio:975/610;background:var(--surface-2);border-radius:12px;overflow:hidden}
.map-box.zoom{aspect-ratio:4/3}
.map-box svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.map-box .st-l{fill:var(--map-land);stroke:var(--map-edge);stroke-width:.8;vector-effect:non-scaling-stroke}
.map-box .dma{fill:var(--map-land);stroke:var(--surface);stroke-width:.6;vector-effect:non-scaling-stroke}
.map-box .hi{fill:var(--map-hi);fill-opacity:.85}
.map-box .ext{fill:var(--map-ext);fill-opacity:.75}
.map-box .near{fill:url(#hatch);fill-opacity:1}
.map-box .lbl{font:700 11px var(--font);fill:var(--fg);paint-order:stroke;stroke:var(--surface);stroke-width:3px;stroke-linejoin:round}
.map-box .dot{stroke:var(--surface);stroke-width:1.5;vector-effect:non-scaling-stroke}
.map-box .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--dim);font-size:.85rem}
figure.map figcaption{font-size:.82rem;color:var(--muted);margin-top:6px}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:8px 0 0;padding:0;list-style:none;font-size:.82rem;color:var(--muted)}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.legend i.hi{background:var(--map-hi)}.legend i.ext{background:var(--map-ext)}.legend i.near{background:repeating-linear-gradient(45deg,var(--map-near) 0 3px,transparent 3px 6px);border:1px solid var(--map-near)}
.legend i.dot{border-radius:50%;background:var(--accent)}

/* Diagrams: flow (setup -> channel -> game), how-to-watch hub, network flow, coverage */
.flow{display:grid;gap:8px;margin:10px 0 0}
.flow .col h3{margin:0 0 6px;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.flow .node{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:8px 10px;margin:0 0 6px;font-size:.9rem;min-height:44px}
.flow .node b{font-variant-numeric:tabular-nums}
.flow .node.free{border-left:4px solid var(--free)}.flow .node.tv{border-left:4px solid var(--tv)}.flow .node.stream{border-left:4px solid var(--stream)}.flow .node.oom{border-left:4px solid var(--oom)}
.flow .arrow{display:none}
@media (min-width:640px){.flow{grid-template-columns:1fr 24px 1.2fr 24px .9fr;align-items:start}.flow .arrow{display:flex;align-self:center;justify-content:center;color:var(--dim)}}
.hub{display:grid;gap:10px;margin:8px 0 0}
@media (min-width:600px){.hub{grid-template-columns:1fr 1fr}}
.hub .way{position:relative;border:1px solid var(--line);border-radius:12px;padding:12px 12px 10px 52px;background:var(--surface);min-height:84px}
.hub .way .wi{position:absolute;left:12px;top:12px;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center}
.hub .way.free .wi{background:var(--free-soft);color:var(--free)}.hub .way.tv .wi{background:var(--tv-soft);color:var(--tv)}.hub .way.stream .wi{background:var(--stream-soft);color:var(--stream)}.hub .way.oom .wi{background:var(--oom-soft);color:var(--oom)}
.hub .way h3{margin:0;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.hub .way p{margin:2px 0 0;font-weight:700;overflow-wrap:anywhere}
.hub .way small{display:block;color:var(--muted);font-weight:400;margin-top:2px}
.hub .way.unv p{color:var(--muted);font-weight:600}
.netflow{display:flex;flex-direction:column;align-items:stretch;gap:0;margin:8px 0 0}
.netflow .nf-src,.netflow .nf-mid{align-self:center;text-align:center;border-radius:12px;padding:10px 16px;font-weight:800}
.netflow .nf-src{background:var(--surface-2)}
.netflow .nf-mid{background:var(--accent);color:var(--on-accent);font-size:1.1rem}
.netflow .nf-line{align-self:center;width:2px;height:18px;background:var(--line)}
.netflow ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.netflow li{border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:10px;padding:8px 10px;font-size:.9rem;background:var(--surface)}
.netflow li b{display:block}
.netflow li.free{border-top-color:var(--free)}.netflow li.stream{border-top-color:var(--stream)}
.cov{display:grid;gap:10px;margin:8px 0 0}
@media (min-width:640px){.cov{grid-template-columns:repeat(3,1fr)}}
.cov>div{border-radius:12px;padding:12px;background:var(--surface-2)}
.cov h3{display:flex;align-items:center;gap:6px;margin:0 0 4px;font-size:.95rem}
.cov p{margin:0;font-size:.88rem}
.cov .k{display:block;font-size:1.6rem;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}

/* Season timeline (TNF/SNF) */
.tl{position:relative;margin:12px 0 4px;padding:0;list-style:none;display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:6px}
.tl li{flex:0 0 112px;scroll-snap-align:start;border:1px solid var(--line);border-radius:12px;padding:8px;background:var(--surface);font-size:.78rem;position:relative}
.tl li::before{content:"";position:absolute;left:8px;top:-1px;right:8px;height:3px;border-radius:2px;background:var(--accent)}
.tl li.past{background:var(--surface-2)}.tl li.past .tb{opacity:.5}.tl li.past::before{background:var(--dim)}
.tl li.next{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.tl .d{font-weight:800;font-size:.8rem}
.tl .m{display:flex;align-items:center;gap:4px;margin-top:6px}
.tl .lb{display:block;color:var(--muted);margin-top:4px}

/* Bar charts (viewership): self-made SVG-free HTML bars */
.bars{list-style:none;margin:8px 0 0;padding:0}
.bars li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:7px 0;border-top:1px solid var(--line);font-size:.9rem}
.bars li:first-child{border-top:0}
.bars .bt{min-width:0;overflow-wrap:anywhere}
.bars .bv{font-weight:800;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.bars .bb{grid-column:1/-1;height:8px;border-radius:4px;background:var(--surface-2);overflow:hidden}
.bars .bb i{display:block;height:100%;border-radius:4px;background:var(--accent)}
.bars .bs{grid-column:1/-1;font-size:.75rem;color:var(--muted)}
.bars .bs a{color:var(--muted);display:inline-flex;align-items:center;min-height:24px}
.bars li.nfl .bb i{background:#2f6fd8}.bars li.cfb .bb i{background:#c4651d}.bars li.mlb .bb i{background:#c0392b}.bars li.nba .bb i{background:#7b4bd6}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .bars li.nfl .bb i{background:#6aa8ff}}
:root[data-theme=dark] .bars li.nfl .bb i{background:#6aa8ff}

/* Live fan-activity module */
.pulse{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:14px 16px;margin:0 0 14px;box-shadow:var(--shadow)}
.pulse-grid .pulse{min-height:300px}
.pulse h2{display:flex;align-items:center;gap:8px;font-size:1.05rem;margin:0}
.pulse .sub{font-size:.78rem;color:var(--muted);margin:2px 0 8px}
.dot-live{width:9px;height:9px;border-radius:50%;background:var(--live);box-shadow:0 0 0 0 rgba(217,45,32,.5);animation:ping 1.8s infinite;flex:none}
.dot-live.off{background:var(--dim);animation:none}
@keyframes ping{70%{box-shadow:0 0 0 8px rgba(217,45,32,0)}100%{box-shadow:0 0 0 0 rgba(217,45,32,0)}}
.pulse ol{margin:0;padding:0;list-style:none;counter-reset:r}
.pulse ol li{counter-increment:r;display:flex;align-items:center;gap:10px;padding:6px 0;border-top:1px solid var(--line);font-size:.9rem;min-height:44px}
.pulse ol li:first-child{border-top:0}
.pulse ol li::before{content:counter(r);font-weight:800;color:var(--dim);width:1.1em;text-align:right;font-variant-numeric:tabular-nums}
.pulse ol li .pn{flex:1;min-width:0}
.pulse ol li .pv{font-size:.75rem;color:var(--muted);white-space:nowrap}
.pulse .tabs{display:flex;gap:6px;margin:6px 0 4px}
.pulse-grid{display:grid;gap:14px}
@media (min-width:720px){.pulse-grid{grid-template-columns:1fr 1fr}.pulse-grid>.pulse{margin:0}}

/* Teams grid (league pages, teams index) */
.tgrid{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.tgrid a{display:flex;align-items:center;gap:10px;min-height:52px;padding:6px 10px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--fg);text-decoration:none;font-size:.88rem;font-weight:600;line-height:1.25}
.tgrid a:hover{border-color:var(--accent)}

/* Team page hero */
.thero{display:flex;align-items:center;gap:14px;margin:8px 0 6px}
.thero h1{margin:0}

/* Pills row for internal links */
.pills{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 0;padding:0;list-style:none}
.pills a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-weight:600;font-size:.88rem;text-decoration:none;color:var(--fg)}
.pills a:hover{border-color:var(--accent);color:var(--accent)}

/* Footer */
.site-foot{max-width:760px;margin:24px auto 0;padding:20px 16px 36px;color:var(--muted);font-size:.85rem;border-top:1px solid var(--line)}
.site-foot a{display:inline-flex;align-items:center;min-height:44px}
.foot-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px;margin:0 0 8px}
@media (min-width:640px){.foot-cols{grid-template-columns:repeat(4,minmax(0,1fr))}}
.foot-cols h2{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--fg);margin:6px 0 0}
.foot-cols ul{list-style:none;margin:0;padding:0}
.foot-cols li a{min-height:44px}
.site-foot .fine{margin:8px 0 0;font-size:.8rem}
.site-foot .fine a{min-height:24px}
@media (min-width:1100px){main,header,.site-foot{max-width:900px}}

/* Shared: accessibility, tap targets (44px), team search, footer */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
button,.btn,select,input[type=text],input[type=email],input[type=search],input[type=password]{min-height:44px}
/* Safari draws native selects at a fixed ~23px height whatever min-height says (WebKit e2e, 2026-10-31): own the look. */
select{-webkit-appearance:none;appearance:none;padding-right:30px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23888' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:12px 8px}
.card label:has(input[type=checkbox]){min-height:44px;display:flex;align-items:center;gap:8px}
input[type=checkbox]{width:24px;height:24px}
summary{min-height:44px;display:flex;align-items:center}
.tsearch{position:relative;margin:0 0 12px;max-width:360px}
.tsearch input{width:100%;padding:9px 12px;font:inherit;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--fg)}
.tsearch ul{position:absolute;z-index:10;left:0;right:0;top:100%;margin:4px 0 0;padding:4px;list-style:none;background:var(--card);border:1px solid var(--line);border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,.15)}
.tsearch li a{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 10px;border-radius:6px;color:var(--fg);text-decoration:none}
.tsearch li[aria-selected=true] a,.tsearch li a:hover{background:var(--chip)}
.tsearch li.none{padding:10px;font-size:.9rem;color:var(--muted)}
.tl{font-size:.7rem;font-weight:700;color:var(--muted);min-width:2.6rem}
.badge.ota,.tag.ota{background:var(--free);border-color:var(--free);color:var(--on-accent)}

/* QA round 1: layout stability (F12), tap targets (F23), wrapping badges (F8) */
/* The team search (lib/nav.js) is inserted right after the nav: reserve its 56px so content does not jump. */
header nav.nav{margin-bottom:60px}
header nav.nav+.tsearch{margin-top:-56px}
main{min-height:60vh}
.card a,ul.src a,.ways a,.why a{padding:4px 0}
.badge,.tag{white-space:normal}
dd{min-width:0;overflow-wrap:anywhere}
.f dd a,ul.src a{padding:5px 0}
ul.src li+li{margin-top:10px}

/* QA round 2: [hidden] always hides (form{display:flex} overrode it, F12); skip link on every page and 24px checkboxes (F18) */
[hidden]{display:none!important}
.skip{position:absolute;left:-9999px;top:8px;z-index:100}
.skip:focus{left:16px;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;background:var(--card);border:2px solid var(--accent);border-radius:8px}

/* QA round 3 (F18): the five nav links fit on one line at 390px (Sign in no longer wraps); tap targets stay 44px tall. */
@media (max-width:430px){.nav{gap:0;font-size:.88rem}.nav a{padding:0 5px;margin-left:-5px;margin-right:3px}.nav a[aria-current=page]{box-shadow:inset 0 -2px 0 var(--accent)}}
@media (max-width:360px){.nav{font-size:.82rem}.nav a{padding:0 4px;margin-left:-4px;margin-right:1px}}

/* QC 2026-10-23 (H5/M6): email signup CTA (lib/signup.js) on the homepage, team pages and the TNF page */
.signup{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin:0 0 14px;font-size:.92rem}
.signup h2{font-size:1.05rem;margin:0 0 6px}
.signup p{margin:0 0 8px}
.signup-form{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px}
.signup input[type=email]{flex:1 1 200px;padding:10px 12px;font:inherit;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--fg)}
.signup button{padding:10px 16px;font:inherit;font-weight:700;border:0;border-radius:10px;background:var(--accent);color:var(--on-accent);cursor:pointer}
.signup .signup-fine{font-size:.82rem}
.signup .signup-fine a{display:inline-flex;align-items:center;min-height:24px}
.signup .sample summary{font-size:.88rem}
.sample-mail{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:.88rem}
.sample-mail p{margin:6px 0 0}
.signup .sample summary{cursor:pointer;color:var(--accent)}

/* Task 2 (2026-10-26): signup funnel. Link buttons, the team-page jump button (F5), email-first login (F1), sticky Save
   on My setup (F6), checkboxes that keep their size when the label wraps (F10). */
a.btn{display:inline-flex;align-items:center;padding:10px 16px;font-weight:700;border-radius:10px;background:var(--accent);color:var(--on-accent);text-decoration:none}
.signup-jump{margin:4px 0 10px}
#magicForm input[type=email]{flex:1 1 220px;padding:10px 12px;font:inherit;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--fg)}
.pwd{margin-top:10px}
.pwd summary{cursor:pointer;color:var(--accent)}
.pwd input{padding:9px 10px;font:inherit;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--fg);max-width:100%}
.linkbtn{background:none;border:0;padding:0 2px;font:inherit;color:var(--accent);text-decoration:underline;cursor:pointer;min-height:44px}
.linkbtn:disabled{color:var(--muted);cursor:default;text-decoration:none}
.savebar{position:sticky;bottom:0;z-index:5;background:var(--bg);padding:10px 0;margin:0 0 10px;border-top:1px solid var(--line)}
input[type=checkbox]{flex:none}

/* 2026-10-27: team picker in the homepage and TNF signup boxes (lib/signup.js, data-picker). Full-width row above the
   email box; chips wrap; 44px tap targets. */
.signup-teams{flex:1 1 100%;display:flex;flex-direction:column;gap:6px}
.signup-teams label{font-weight:600}
.signup .signup-teams input[type=text]{padding:10px 12px;font:inherit;font-weight:400;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--fg);width:100%;max-width:none;box-sizing:border-box}
.signup-teams .team-status{margin:0;font-size:.85rem;overflow-wrap:anywhere}
/* Long email addresses (the corrections mailto) wrap on 320px phones (stress test 2026-10-29). */
a[href^="mailto:"]{overflow-wrap:anywhere}
.signup-teams .team-status:empty{display:none}
.team-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.team-chips[hidden]{display:none}
.team-chips li{display:inline-flex;align-items:center;gap:2px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:0 0 0 12px}
.signup .team-chips .chip-x{background:none;color:var(--fg);min-width:44px;min-height:44px;padding:0;font-size:1.2rem;line-height:1;border-radius:999px}
.signup .team-chips .chip-x:hover,.signup .team-chips .chip-x:focus-visible{color:var(--accent)}

/* 2026-10-28: digest CTA (lib/signup.js html({picker:true})) on the homepage, TNF and SNF: bigger headline, team picker
   + ZIP + email, a "Sample" email beside the form (below it on phones), and the phone-only sticky bar on TNF/SNF. */
.signup:has(.signup-body){border:2px solid var(--accent);background:var(--card)}
.signup:has(.signup-body) h2{font-size:1.25rem;line-height:1.3;margin:0 0 6px}
.signup-body{display:grid;gap:12px}
@media (min-width:720px){.signup-body{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:start}}
.signup .signup-form input.signup-zip{flex:0 0 7.5rem;width:7.5rem;padding:10px 12px;font:inherit;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--fg)}
.signup .signup-form input.signup-zip+label+input[type=email]{flex:1 1 160px;min-width:0}
.signup-body .signup-form button{flex:1 1 100%}
.digest-sample{margin:0}
.digest-sample figcaption{font-size:.8rem;margin:0 0 4px}
.sample-tag{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:1px 8px;border-radius:999px;background:var(--chip);border:1px solid var(--line);color:var(--fg)}
.digest-sample .sample-mail{background:var(--chip)}
.digest-sample .sample-foot{font-size:.78rem;margin:6px 0 0}
.cta-sticky{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;gap:8px;align-items:center;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:var(--card);border-top:1px solid var(--line);box-shadow:0 -4px 16px rgba(0,0,0,.12)}
.cta-sticky a.btn{flex:1;justify-content:center;min-height:44px}
.cta-sticky-x{min-width:44px;min-height:44px;border:0;background:none;color:var(--muted);font-size:1.4rem;cursor:pointer}
@media (min-width:721px){.cta-sticky{display:none!important}}
@media (max-width:720px){body.has-cta-sticky{padding-bottom:72px}}
/* 2026-10-29: signup funnel fix. 16px fields so iPhone Safari does not zoom in on focus; tap-to-pick buttons when a
   typed team name matches several teams (lib/signup.js bindPicker). */
.signup .signup-form input,.signup .signup-form .signup-teams input[type=text],.signup .signup-form input.signup-zip{font-size:16px}
.team-choices{display:flex;flex-wrap:wrap;gap:6px}
.team-choices[hidden]{display:none}
.signup .team-choices .team-choice{min-height:44px;padding:8px 12px;font-weight:400;background:var(--card);color:var(--fg);border:1px solid var(--accent);border-radius:999px;flex:0 1 auto}
.tl:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* 2026-10-30: CTA A/B test, variant B = email + button only. <html data-cta> is set before first paint (lib/chrome.js boot script). */
[data-cta="B"] .signup .signup-teams,[data-cta="B"] .signup .signup-zip,[data-cta="B"] .signup label[for$="-z"]{display:none!important}

/* Variant B headline and note (digest boxes): A shows .h-a, B shows .h-b and the note. */
.signup .h-b,.signup .signup-b-note{display:none}
[data-cta="B"] .signup .h-a{display:none}
[data-cta="B"] .signup .h-b{display:inline}
[data-cta="B"] .signup .signup-b-note{display:block;margin:6px 0 0;font-size:.85rem}

/* 2026-11-02 conversion fix (lib/signup.js): the offer names the page's team, the email box has a visible label and
   sits next to the button, and game pages tick away/home with checkboxes (home pre-ticked). No ZIP field in the box. */
.signup-form:has(.signup-email){align-items:flex-end}
.signup-email{flex:1 1 220px;display:flex;flex-direction:column;gap:4px;min-width:0}
.signup-email label,.signup-pick legend{font-weight:600}
.signup .signup-email input[type=email]{flex:none;width:100%;box-sizing:border-box;min-height:44px}
.signup .signup-form button[type=submit]{min-height:44px}
.signup-pick{flex:1 1 100%;border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px}
.signup-pick legend{padding:0;margin:0 0 2px}
.signup-pick label{display:inline-flex;align-items:center;gap:8px;min-height:44px;cursor:pointer}
.signup-pick input[type=checkbox]{width:20px;height:20px;margin:0;accent-color:var(--accent)}
.signup:has(.signup-email){border:2px solid var(--accent);background:var(--card)}
[data-cta="B"] .signup .n-a{display:none}


/* 2026-11-02 (SEO/landing weekly job): on phones the signup box moves up so its button is in the first screen more often
   (landing tester: 390x664). Layout only, no copy or field changes; both A/B variants use the same box.
   - homepage: the box is shown right after the headline, above the date line / ZIP bar (DOM order is unchanged);
   - team pages: the box is the first block of <main> instead of below the schedule card (TNF/SNF: see the end of this block);
   - tighter spacing inside the box and in the page header. */
@media (max-width:720px){
  header{display:flex;flex-direction:column;padding-top:8px}
  header>a.brand{align-self:flex-start}
  header>#signup{order:2}
  header>.date,header>.bar,header>.zipmsg,header>.zipnote,header>.mine{order:3}
  header>#hero-box,header>#chips{order:4}
  header>#signup~*{order:4}
  main#out:has(>#signup){display:flex;flex-direction:column}
  main#out>#signup{order:-1}
  .signup{padding:10px 12px;margin-bottom:10px}
  .signup:has(.signup-body) h2{font-size:1.1rem;line-height:1.25;margin-bottom:4px}
  .signup-lede{font-size:.85rem;line-height:1.35;margin-bottom:6px}
  .signup-body{gap:8px}
  .signup .signup-form{gap:6px}
  header>.tsearch{margin-bottom:4px}
  header>.crumbs{margin-top:4px}
  header>.eyebrow{margin-top:6px}
  header>.thero{margin:4px 0 2px}
  header>.eyebrow+h1,header>h1{margin:.25rem 0}
  header>p.muted{margin:4px 0 8px}
  header>.signup-jump{margin:2px 0 8px}
  header>.signup-jump .btn{padding:6px 12px;line-height:1.2;font-size:.9rem;min-height:44px}
  header>p#sub{font-size:.88rem;line-height:1.35}
  .thero h1{font-size:1.4rem}
  .thero .tb.xl{width:72px;height:72px}
  /* TNF/SNF (2026-11-02): the box goes first in <main>, above the answer card (DOM order is unchanged, so desktop and the
     answer text stay as they were); the answer card follows right after it. */
  main#main:has(>#signup){display:flex;flex-direction:column}
  main#main>#signup{order:-1}
}