/* Homepage styles (moved out of index.html so browsers cache them). When you
   edit this file, bump the ?v= on its <link> in index.html. */

  :root{
    --bg:#0d1117; --panel:#161b22; --panel2:#1c2129; --border:#2d333b;
    --text:#e6edf3; --muted:#8b949e; --accent:#3fb950; --accent2:#58a6ff;
    --danger:#f85149; --gold:#e3b341;
  }
  *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
  html{-webkit-text-size-adjust:100%}
  body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;min-height:100vh;overscroll-behavior-y:none}
  a{color:var(--accent2);text-decoration:none}
  header{position:sticky;top:0;z-index:50;background:rgba(13,17,23,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);padding-top:env(safe-area-inset-top)}
  .hwrap{max-width:1100px;margin:0 auto;padding:16px;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));display:flex;align-items:center;gap:14px}
  .logo{font-size:1.25rem;font-weight:800;letter-spacing:-.02em;display:flex;align-items:center;gap:9px}
  .logo img{height:38px;width:auto;flex-shrink:0}
  .logo span{color:var(--accent)}
  .logo .live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-left:6px;vertical-align:middle;animation:logo-pulse 1.6s ease-in-out infinite}
  @keyframes logo-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}
  @media (prefers-reduced-motion: reduce){.logo .live-dot{animation:none}}
  main{max-width:1100px;margin:0 auto;padding:18px 16px 60px;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));padding-bottom:calc(60px + env(safe-area-inset-bottom))}

  /* Live scores ticker: a slim, horizontally-scrolling strip directly below
     the header (ESPN-style), separate from the fuller Live Scores card
     further down the page -- this is the "glance while scrolling past"
     version, that one is the "sit and read" version. Not sticky (unlike
     header) to avoid stacking two sticky bars' z-index/height math on a
     page that's otherwise deliberately simple. */
  .ticker-wrap{background:var(--panel);border-bottom:1px solid var(--border)}
  .ticker-inner{max-width:1100px;margin:0 auto;padding:8px 16px;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));display:flex;align-items:center;gap:10px;position:relative}
  /* Mobile-only scroll hint (2026-08 sweep): a right-edge fade so a strip
     that's almost always wider than the screen doesn't look like a
     complete, non-scrolling row. Desktop rarely overflows so it stays off
     there. Static fade, not scroll-position-aware -- simplest version that
     answers "is there more?" without adding a scroll listener. */
  .ticker-inner::after{content:"";position:absolute;top:1px;bottom:1px;right:0;width:28px;background:linear-gradient(to right, transparent, var(--panel) 70%);pointer-events:none;display:none}
  /* Swipe cue (2026-08 audit follow-up): a small chevron sitting in the fade
     zone so the fade reads as "more to scroll" rather than a rendering
     glitch. Non-interactive (aria-hidden, pointer-events:none) so it adds
     zero controls to the page's link/control count. Fades itself out after
     the user actually scrolls the strip once (see markTickerScrolled() in
     the ticker JS), so it doesn't nag on repeat visits. */
  .ticker-hint{position:absolute;top:0;bottom:0;right:2px;width:20px;display:none;align-items:center;justify-content:center;pointer-events:none;color:var(--muted);font-size:.85rem;font-weight:800;opacity:.85;animation:tk-hint-pulse 1.6s ease-in-out infinite}
  .ticker-hint.hidden{display:none!important}
  @keyframes tk-hint-pulse{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
  @media (max-width:640px){
    .ticker-inner::after{display:block}
    .ticker-hint{display:flex}
  }
  .ticker-select{background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:.76rem;font-weight:700;padding:6px 8px;flex-shrink:0;font-family:inherit}
  .ticker-scroll{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .ticker-scroll::-webkit-scrollbar{display:none}
  .tk-item{scroll-snap-align:start;flex-shrink:0;display:flex;flex-direction:column;gap:2px;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:6px 10px;min-width:104px;text-decoration:none;color:inherit}
  .tk-item:hover{border-color:var(--accent2)}
  .tk-lg{font-size:.66rem;color:var(--muted)}
  .tk-matchup{display:flex;flex-direction:column;gap:1px;width:100%}
  .tk-team{display:flex;justify-content:space-between;gap:10px;font-size:.78rem;font-weight:700;color:var(--text)}
  .tk-team b{font-weight:800}
  .tk-name{font-size:.78rem;font-weight:700;color:var(--text);white-space:nowrap}
  .tk-status{font-size:.65rem;color:var(--muted)}
  .tk-status.live{color:var(--danger);font-weight:800}
  .tk-empty{font-size:.8rem;color:var(--muted);padding:4px 0;white-space:nowrap}
  /* Today HQ: an eyebrow label + live one-line status strip anchoring the
     top of the page as a single command-center zone, rather than the hero
     just being one more stacked section among many. The status strip is
     built entirely from data the page already fetches (today's games, open
     polls, starred teams playing) -- no new network calls. */
  .hq-status{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.82rem;font-weight:600;color:var(--muted);margin:0 0 14px}
  .hq-status .hot{color:var(--danger);font-weight:800}
  .hq-status a.hq-chip{color:var(--text);text-decoration:none}
  .hq-status a.hq-chip:hover{color:var(--accent2);text-decoration:underline}
  .hq-status .hq-next{color:var(--gold);font-weight:800;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em}
  h1.hero{font-size:1.4rem;margin-bottom:4px}
  .sub{color:var(--muted);font-size:.9rem;margin-bottom:6px}
  .hq-app{display:inline-block;margin:2px 0 8px;line-height:0;border-radius:8px}
  .hq-app img{height:40px;width:auto;display:block}
  .daily-line{color:var(--gold);font-size:.82rem;font-weight:600;margin-bottom:10px}
  .daily-line-label{color:var(--muted);font-weight:700;text-transform:uppercase;font-size:.72rem;letter-spacing:.04em}
  .sh-card{padding:4px 2px}
  .sh-row{display:flex;align-items:flex-start;gap:10px;padding:9px 10px;border-radius:8px;color:inherit;text-decoration:none}
  a.sh-row:hover{background:var(--panel2)}
  .sh-row+.sh-row{border-top:1px solid var(--border)}
  .sh-icon{font-size:1rem;flex-shrink:0;line-height:1.4}
  .sh-text{font-size:.84rem;line-height:1.45}
  .sh-text b{font-weight:700}
  .sh-lg{color:var(--muted);font-size:.76rem}
  .sh-row.sh-static{cursor:default}
  .sh-share{background:none;border:none;color:var(--accent2);font-family:inherit;font-size:.76rem;cursor:pointer;padding:0;margin-left:4px}
  .sh-share:disabled{opacity:.6;cursor:default}
  .seo-intro{color:var(--muted);font-size:.78rem;line-height:1.6;margin:-14px 0 20px;max-width:760px}
  .section-label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:16px 0 10px}
  .section-label-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
  .section-label-row .section-label{margin:16px 0 10px}
  .install-help-link{font-size:.78rem;font-weight:600;text-transform:none;letter-spacing:0;color:var(--accent2);white-space:nowrap}
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
  .app-card{position:relative;display:block;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:18px;transition:border-color .15s,transform .15s}
  .app-card:hover{border-color:var(--accent2);transform:translateY(-2px);text-decoration:none}
  .app-card.fav{border-color:var(--gold)}
  .app-emoji{font-size:2rem;line-height:1}
  .app-name{font-weight:700;margin-top:10px;color:var(--text);font-size:1.02rem}
  .app-tag{color:var(--muted);font-size:.8rem;margin-top:4px;line-height:1.4}
  .star{position:absolute;top:12px;right:12px;background:none;border:none;font-size:1.1rem;cursor:pointer;color:var(--muted);line-height:1;padding:4px}
  .star.on{color:var(--gold)}
  footer{max-width:1100px;margin:0 auto;padding:20px 16px 40px;color:var(--muted);font-size:.78rem;text-align:center}

  .dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-bottom:8px}
  .dash-card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:16px}
  .myday-row{padding:9px 0;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:3px}
  .myday-row:last-child{border-bottom:none}
  .myday-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .myday-team{font-weight:700;font-size:.88rem}
  a.myday-team{color:inherit;text-decoration:none}
  a.myday-team:hover{text-decoration:underline;color:var(--accent2)}
  .myday-game{font-size:.78rem;font-weight:700;color:var(--muted);white-space:nowrap}
  .myday-game.live{color:var(--danger)}
  .myday-game a{color:inherit;text-decoration:none}
  .myday-headline{font-size:.78rem;color:var(--text);line-height:1.4}
  .myday-headline a{color:inherit;text-decoration:none}
  .myday-headline a:hover{text-decoration:underline}
  .rundown-lines{display:flex;flex-direction:column;gap:8px}
  .rundown-line{font-size:.92rem;line-height:1.5;color:var(--text)}
  .rundown-line:first-child{font-weight:700}
  .rundown-line a{color:inherit;text-decoration:none;display:inline-flex;align-items:baseline;gap:5px}
  .rundown-line a:hover{color:var(--accent2);text-decoration:underline}
  .rundown-line a::after{content:"→";font-size:.85em;opacity:.55}
  .rundown-line a:hover::after{opacity:1}
  .rundown-nudge{margin-top:12px;padding-top:12px;border-top:1px solid var(--border);font-size:.82rem;color:var(--muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .watchlist-rows{display:flex;flex-direction:column;gap:2px}
  .watchlist-row{display:flex;align-items:center;gap:10px;padding:9px 4px;border-radius:8px;text-decoration:none;color:var(--text)}
  .watchlist-row:hover{background:var(--border)}
  .watchlist-row .wl-lg{font-size:1rem;flex-shrink:0}
  .watchlist-row .wl-teams-wrap{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
  .watchlist-row .wl-teams{font-size:.88rem;font-weight:600}
  .watchlist-row .wl-why{font-size:.72rem;color:var(--muted);font-weight:500}
  .watchlist-row .wl-time{font-size:.8rem;color:var(--muted);font-weight:600;flex-shrink:0}
  .watchlist-row .wl-live{font-size:.8rem;color:var(--danger);font-weight:800;flex-shrink:0}
  .watchlist-row .wl-final{font-size:.8rem;color:var(--muted);font-weight:700;flex-shrink:0}
  .watchlist-row .wl-final.wl-win{color:var(--text)}
  .gear-grid{display:flex;flex-wrap:wrap;gap:10px}
  .gear-btn{flex:1 1 160px;display:block;background:var(--panel2);border:1px solid var(--border);color:var(--text);text-align:center;border-radius:10px;padding:12px;font-weight:700;font-size:.88rem;text-decoration:none}
  .gear-btn:hover{border-color:var(--accent2);text-decoration:none}
  .gear-btn.primary{background:var(--accent2);color:#0d1117;border-color:transparent}
  .gear-fine{font-size:.72rem;color:var(--muted);margin-top:10px}
  /* Compact monetization row directly under Live Scores -- a lighter-weight
     sibling to the full "Shop Fan Gear" dash-card further down the page,
     scoped to whichever teams actually have a game today instead of a
     generic pitch. Pill chips instead of full gear-btn blocks since this
     needs to read as "one more quick link" next to the scores, not its own
     competing module. */
  .gnow-row{margin-top:12px;padding-top:10px;border-top:1px solid var(--border)}
  .gnow-label{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:6px}
  .gnow-chips{display:flex;flex-wrap:wrap;gap:6px}
  .gnow-chip{background:var(--panel2);border:1px solid var(--border);border-radius:999px;padding:5px 12px;font-size:.76rem;font-weight:700;color:var(--text);text-decoration:none}
  .gnow-chip:hover{border-color:var(--accent2);color:var(--accent2);text-decoration:none}
  .lt-select{width:100%;background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:11px 12px;color:var(--text);font-size:.9rem;font-family:inherit;margin-bottom:12px}
  .lt-grid{display:flex;flex-wrap:wrap;gap:8px}
  .lt-chip{display:flex;align-items:center;gap:6px;background:var(--panel2);border:1px solid var(--border);border-radius:999px;padding:7px 14px;font-size:.82rem;font-weight:700;color:var(--text);text-decoration:none}
  .lt-chip:hover{border-color:var(--accent2);color:var(--accent2);text-decoration:none}
  .lt-chip .lt-lg{color:var(--muted);font-weight:600;font-size:.72rem}
  .lt-chip .lt-game{margin-left:2px;font-weight:800;color:var(--muted);font-size:.76rem}
  .lt-chip .lt-game.live{color:var(--danger)}
  .lt-empty{color:var(--muted);font-size:.85rem}
  .lt-star-all{background:var(--panel2);border:1px solid var(--border);border-radius:999px;padding:7px 14px;font-size:.8rem;font-weight:700;color:var(--gold);cursor:pointer}
  .lt-star-all:hover{border-color:var(--gold)}
  /* Local Teams moved below Live Scores per the Aug 2026 homepage-hierarchy
     review ("move it lower / make it feel like a utility, not a major
     section") -- no dash-card wrapper and a smaller inline label instead of
     a full .section-label header, so it reads as a lightweight selector this
     far down the page rather than competing visually with Live Scores/
     Watchlist above it. Follow-up (same week): the inline select+grid still
     took up real vertical space in the main flow even collapsed to "no
     metro chosen" state, so it moved into a modal (#lt-overlay, same
     open/close pattern as #mt-overlay's My Teams picker) behind a single
     compact trigger button. The select/grid mechanics (#localTeamsSelect/
     #localTeamsGrid ids, renderLocalTeams(), resolveLocalEntry()) are
     unchanged -- only the surrounding chrome moved. */
  .lt-compact{margin-top:18px}
  .lt-compact-label{display:block;font-size:.72rem;font-weight:700;color:var(--muted);margin-bottom:8px}
  .lt-trigger{display:flex;align-items:center;gap:8px;width:100%;background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:10px 12px;color:var(--text);font-family:inherit;font-size:.82rem;cursor:pointer;text-align:left}
  .lt-trigger:hover{border-color:var(--accent2)}
  .lt-trigger-label{font-weight:700}
  .lt-trigger-value{flex:1;color:var(--muted)}
  .lt-trigger-arrow{color:var(--muted)}
  #lt-overlay{display:none;position:fixed;inset:0;z-index:210;background:rgba(0,0,0,.65);backdrop-filter:blur(3px);align-items:flex-start;justify-content:center;padding:24px 12px;overflow-y:auto}
  #lt-overlay.open{display:flex}
  .lt-panel{background:var(--panel);border:1px solid var(--border);border-radius:16px;max-width:640px;width:100%;padding:18px;margin:auto 0;box-shadow:0 16px 48px rgba(0,0,0,.5)}
  .nl-copy{color:var(--muted);font-size:.88rem;margin-bottom:8px;line-height:1.5}
  .nl-sample{color:var(--text);font-size:.8rem;font-style:italic;line-height:1.5;margin-bottom:14px;padding:8px 10px;background:var(--panel2);border-radius:8px;border:1px solid var(--border)}
  .nl-row{display:flex;gap:8px;flex-wrap:wrap}
  .nl-row input[type=email]{flex:1;min-width:180px;background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:11px 14px;color:var(--text);font-size:.92rem}
  .nl-row input[type=email]:focus{outline:none;border-color:var(--accent2)}
  .nl-row button{background:var(--accent);color:#04170a;border:none;border-radius:10px;padding:11px 20px;font-weight:700;font-size:.92rem;cursor:pointer;white-space:nowrap}
  .nl-row button:hover{filter:brightness(1.08)}
  .nl-row button:disabled{opacity:.6;cursor:default}
  .nl-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  .nl-msg{font-size:.85rem;margin-top:10px;display:none}
  .nl-msg.show{display:block}
  .nl-msg.ok{color:var(--accent)}
  .nl-msg.err{color:var(--danger)}
  .dash-card h2{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:12px;display:flex;align-items:center;justify-content:space-between}
  .dash-card h2 a{font-size:.7rem;font-weight:600;text-transform:none;letter-spacing:0;color:var(--accent2)}
  .empty{color:var(--muted);font-size:.85rem;padding:8px 0}
  .empty a{color:var(--accent2);font-weight:600;text-decoration:none}
  .empty a:hover{text-decoration:underline}
  .quiet-note{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:.82rem;padding:6px 0 14px;border-bottom:1px solid var(--border);margin-bottom:10px}
  .quiet-note a{color:var(--accent2);font-weight:600;text-decoration:none}
  .quiet-note a:hover{text-decoration:underline}

  .ws-strip{display:flex;flex-direction:column;gap:2px}
  .ws-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 6px;border-radius:8px;text-decoration:none;color:var(--text)}
  .ws-row:hover{background:var(--panel2)}
  .ws-lg{font-size:.85rem;font-weight:700}
  .ws-count{font-size:.75rem;color:var(--muted)}
  .ws-all{display:block;margin-top:10px;font-size:.78rem;font-weight:600;color:var(--accent2);text-decoration:none}
  .ws-all:hover{text-decoration:underline}

  .tg-league{margin-bottom:14px}
  .tg-league:last-child{margin-bottom:0}
  .tg-league-head{display:block;font-size:.8rem;font-weight:800;color:var(--text);margin-bottom:6px;text-decoration:none}
  .tg-league-head:hover{color:var(--accent2)}
  .tg-more-btn{display:block;width:100%;text-align:center;font-size:.78rem;font-weight:700;color:var(--accent2);padding:8px 0 2px;background:none;border:none;cursor:pointer;font-family:inherit}
  .tg-row{padding:6px 0;border-bottom:1px solid var(--border);font-size:.83rem}
  .tg-row:last-child{border-bottom:none}
  .tg-row.clickable{cursor:pointer;border-radius:8px;margin:0 -6px;padding:6px}
  .tg-row.clickable:hover{background:var(--panel2)}
  /* Starred-team games already sort to the top of their league block --
     this left accent makes that prioritization visible at a glance instead
     of only felt through row order. */
  .tg-row-mine{border-left:2px solid var(--gold);padding-left:8px;margin-left:-2px}
  .tg-row-mine.clickable{padding-left:8px;margin-left:-8px}
  .tg-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .tg-teams{font-weight:600;display:flex;align-items:center;gap:6px;min-width:0;flex-wrap:wrap}
  .tg-logo{width:18px;height:18px;object-fit:contain;flex-shrink:0}
  .tg-score{font-variant-numeric:tabular-nums}
  .tg-status{color:var(--muted);font-size:.72rem;white-space:nowrap}
  .tg-status.live{color:var(--danger);font-weight:700}

  /* Per-row quick actions (Box Score / Predict / Weather / Team Report /
     Tickets). Box Score + Predict apply across every two-team league;
     Weather + Team Report + Tickets only render for NFL/MLB, the two
     leagues with per-team hub sites and venue data to back them. Sits
     inside .tg-row.clickable rows, so the delegated click handler must
     ignore anything inside .tg-actions before falling through to the
     row's own box-score-open behavior (same pattern as .tg-star). */
  .tg-actions{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
  .tg-act{font-size:.66rem;padding:2px 8px;border-radius:999px;background:var(--panel2);border:1px solid var(--border);color:var(--text);text-decoration:none;font-weight:700;white-space:nowrap;line-height:1.6;font-family:inherit;cursor:pointer}
  .tg-act:hover{border-color:var(--accent2);color:var(--accent2);text-decoration:none}
  .tg-wx{display:block;width:100%;font-size:.7rem;color:var(--text);margin-top:4px}
  .tg-wx:empty{display:none;margin:0}
  /* "⋯ More" (2026-08 sweep: mobile rows had too many tiny pills). A native
     <details> so it needs zero JS -- collapsed by default (mobile), and
     unwrapped via display:contents above the 640px breakpoint so Weather/
     Team Report/Tickets flow back into .tg-actions exactly like before,
     with the summary hidden. Desktop behavior is unchanged either way. */
  .tg-more summary{list-style:none}
  .tg-more summary::-webkit-details-marker{display:none}
  .tg-more[open] summary{margin-bottom:5px}
  .tg-more-body{display:flex;flex-wrap:wrap;gap:5px}
  @media (min-width:641px){
    .tg-more{display:contents}
    .tg-more summary{display:none}
    .tg-more-body{display:contents}
  }
  .tg-wx-loading{color:var(--muted)}

  /* Inline follow-team quick action on each Live Scores row -- lets a visitor
     star a team straight from the score line instead of needing the My Teams
     modal. Sits inside .tg-row.clickable rows too, so clicks on the star must
     stop propagation before the row's own box-score click handler sees them. */
  .tg-star{background:none;border:none;font-size:.85rem;line-height:1;color:var(--muted);cursor:pointer;padding:2px 3px;flex-shrink:0}
  .tg-star:hover{color:var(--gold)}
  .tg-star.on{color:var(--gold)}
  .tg-hint{font-weight:400;text-transform:none;letter-spacing:0;color:var(--muted)}

  .gsearch{position:relative;margin:0 0 18px}
  .gsearch-label-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
  .gsearch-label{display:block;font-size:.78rem;font-weight:700;color:var(--muted);margin-bottom:6px}
  .gsearch-close{flex-shrink:0;background:none;border:none;color:var(--muted);font-size:1rem;line-height:1;cursor:pointer;padding:2px 4px;border-radius:6px;font-family:inherit}
  .gsearch-close:hover{color:var(--text);background:var(--panel)}
  .gsearch input{width:100%;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:12px 40px 12px 14px;color:var(--text);font-size:.92rem;font-family:inherit}
  .gsearch input:focus{outline:none;border-color:var(--accent2)}
  .gsearch-results{display:none;margin-top:10px}
  .gsearch-group-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:14px 0 8px}
  .gsearch-group-label:first-child{margin-top:0}
  .gsearch-count{font-weight:400;text-transform:none;letter-spacing:0;opacity:.7}
  .gsearch-suggested{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
  .gsearch-suggested-label{font-size:.76rem;color:var(--muted)}
  .gsearch-chip{background:var(--panel);border:1px solid var(--border);border-radius:999px;padding:5px 12px;font-size:.78rem;color:var(--text);cursor:pointer;font-family:inherit}
  .gsearch-chip:hover{border-color:var(--accent2);color:var(--accent2)}

  .action-row{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 16px}
  .action-btn{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:10px 16px;font-size:.88rem;font-weight:800;color:var(--text);display:flex;align-items:center;gap:7px;cursor:pointer;font-family:inherit}
  .action-btn:hover{border-color:var(--accent);color:var(--accent);text-decoration:none;transform:translateY(-1px)}
  /* "Today's Picks" is the page's primary daily action, so it gets a filled
     gold treatment instead of the plain outlined My Teams/Fantasy buttons --
     the same gold used for HyeDad Picks section labels elsewhere on the page. */
  .action-btn.picks-cta{background:var(--gold);border-color:var(--gold);color:#0d1117}
  .action-btn.picks-cta:hover{background:#f0c358;border-color:#f0c358;color:#0d1117}
  .fav-wx{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
  .fav-wx-chip{display:inline-flex;align-items:center;gap:5px;background:var(--panel);border:1px solid var(--border);border-radius:999px;padding:5px 12px;font-size:.78rem;color:var(--muted)}
  .fav-wx-chip b{color:var(--text)}

  .tg-badge{font-size:.6rem;font-weight:800;padding:2px 6px;border-radius:5px;letter-spacing:.05em;vertical-align:1px;margin-right:5px}
  .tg-badge.live{background:rgba(248,81,73,.15);color:var(--danger)}
  .tg-badge.final{background:var(--panel2);color:var(--muted);border:1px solid var(--border)}
  .tg-badge.pre{background:rgba(88,166,255,.12);color:var(--accent2)}
  .tg-pitchers{font-size:.72rem;color:var(--muted);margin-top:2px}

  .tf-results{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
  .tf-results a{background:var(--panel);border:1px solid var(--border);border-radius:999px;padding:6px 13px;font-size:.8rem;font-weight:700;color:var(--text);display:flex;align-items:center;gap:6px}
  .tf-results a img{width:16px;height:16px}
  .tf-results a:hover{border-color:var(--accent2);color:var(--accent2);text-decoration:none}
  .tf-results a.view-all{border-color:var(--accent);color:var(--accent)}

  .follow-tag{color:var(--gold);font-weight:600}

  .explore-card{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,var(--panel),var(--panel2));border:1px solid var(--border);border-radius:14px;padding:18px;margin-top:26px;transition:border-color .15s}
  .explore-card:hover{border-color:var(--accent);text-decoration:none}
  .explore-card .xc-emoji{font-size:2rem;line-height:1}
  .explore-card .xc-name{font-weight:800;color:var(--text);font-size:1.05rem}
  .explore-card .xc-tag{color:var(--muted);font-size:.85rem;margin-top:3px;line-height:1.45}
  .explore-card .xc-arrow{margin-left:auto;color:var(--accent);font-weight:800;font-size:1.3rem;flex-shrink:0}

  /* Per the Aug 2026 homepage-hierarchy review: trimmed from 5 buttons to
     exactly 4 -- My Teams, Live Scores, Picks, Newsletter -- since Shop Gear
     already lives in the top nav (see nav.js) as its own persistent pill, so
     repeating it here was redundant, not additive. Fantasy was already
     dropped from this row during an earlier reorg (it's a separate app, not
     one of the reorg's named on-page sections, and stays reachable via its
     own persistent nav.js pill). Order now matches the review's stated
     priority (today's games/my teams first, picks and newsletter after) --
     Live Scores moved ahead of Picks so the row's first two buttons are both
     "what's happening today" and the back two are "what do I do about it."
     On narrow screens the buttons shrink and wrap instead of duplicating a
     second, separate row (that used to exist here as .mobile-cta-row --
     merged into .action-row instead so mobile isn't showing Picks twice). */
  @media (max-width:640px){
    /* 4 buttons in a clean 2x2 grid -- reads as intentional instead of the
       old 5-button layout's awkward 3-col row with a deliberately empty 6th
       cell. */
    .action-row{display:grid;grid-template-columns:1fr 1fr;gap:7px}
    .action-row .action-btn{min-width:0;padding:9px 6px;font-size:.7rem;justify-content:center}
  }

  /* No-favorites prompt: heavier treatment than a plain explore-card (gold
     top border to match the Picks module) plus one-tap quick-star buttons so
     starring a team doesn't require opening the My Teams modal first.
     Collapsed by default (just the toggle row) so it doesn't push Live
     Scores far down the page, especially on mobile -- expands to the full
     description + quick-star grid only when tapped. */
  .mtp-card{background:linear-gradient(135deg,var(--panel),var(--panel2));border:1px solid var(--border);border-top:3px solid var(--gold);border-radius:14px;padding:14px 20px;margin:16px 0}
  .mtp-toggle{display:flex;gap:14px;align-items:center;width:100%;background:none;border:none;padding:0;margin:0;cursor:pointer;font-family:inherit;text-align:left}
  .mtp-toggle .xc-emoji{font-size:1.7rem;line-height:1;flex-shrink:0}
  .mtp-toggle-text{flex:1;min-width:0}
  .mtp-toggle .xc-name{display:block;font-weight:800;color:var(--text);font-size:1rem}
  .mtp-preview{display:block;color:var(--muted);font-size:.8rem;margin-top:2px}
  .mtp-chevron{color:var(--muted);font-size:.9rem;flex-shrink:0;transition:transform .15s}
  .mtp-card:not(.mtp-collapsed) .mtp-chevron{transform:rotate(180deg)}
  .mtp-body{margin-top:14px}
  .mtp-body .xc-tag{color:var(--muted);font-size:.85rem;line-height:1.45}
  .qp-teams button{display:inline-flex;align-items:center;gap:6px}
  .qp-lg{color:var(--muted);font-weight:600;font-size:.7rem}
  .mtp-full{display:inline-block;margin-top:14px;color:var(--accent);font-weight:700;font-size:.85rem}
  .mtp-full:hover{text-decoration:underline}

  /* Collapsed, this card is still the single biggest thing between the
     hero and Live Scores on mobile -- tighten its footprint there so
     scores show up sooner without removing the prompt entirely. */
  @media (max-width:640px){
    .mtp-card{padding:10px 14px;margin:10px 0}
    .mtp-toggle{gap:10px}
    .mtp-toggle .xc-emoji{font-size:1.3rem}
    .mtp-toggle .xc-name{font-size:.88rem}
    .mtp-preview{font-size:.74rem}
  }

  /* Second compression pass: even with the mtp-card tightened, Live Scores
     was still landing ~730px down on mobile once you add up the ticker
     strip, hero, Dad Take line, status chips, and the quick-action row
     above it. None of that content is removable without losing something
     real, so this shrinks the vertical rhythm between each piece instead --
     every section above Live Scores gets a smaller mobile margin, and the
     "Today's Dashboard" label immediately before the Live Scores card
     (which had a full 26px top margin meant for desktop breathing room)
     gets the biggest single cut since it's the last thing standing between
     the fold and the scores themselves. */
  @media (max-width:640px){
    .ticker-inner{padding:6px 16px}
    h1.hero{font-size:1.22rem;margin-bottom:2px}
    .sub{font-size:.82rem;margin-bottom:4px}
    .daily-line{font-size:.78rem;margin-bottom:6px}
    .hq-status{margin:0 0 8px;gap:5px 12px}
    .action-row{margin:0 0 10px}
    main{padding-top:10px}
    .section-label{margin:10px 0 6px}
    .section-label-row .section-label{margin:10px 0 6px}
    /* Collapsed My Teams prompt: drop the second preview line on mobile,
       keeping just the headline + chevron -- still a full tap target,
       one line shorter. */
    .mtp-preview{display:none}
  }
  /* Empty-state collapse: hqStatus only has content when there's a live
     game involving a starred team or an open poll -- when there's nothing
     to show, the div was still reserving its full margin/line-height as
     dead space above Live Scores. Applies at every width, not just mobile,
     since the waste is the same regardless of screen size. */
  .hq-status:empty{display:none;margin:0}

  /* My Teams picker modal */
  #mt-overlay{display:none;position:fixed;inset:0;z-index:210;background:rgba(0,0,0,.65);backdrop-filter:blur(3px);align-items:flex-start;justify-content:center;padding:24px 12px;overflow-y:auto}
  #mt-overlay.open{display:flex}
  .mt-panel{background:var(--panel);border:1px solid var(--border);border-radius:16px;max-width:640px;width:100%;padding:18px;margin:auto 0;box-shadow:0 16px 48px rgba(0,0,0,.5)}
  .mt-leagues{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px}
  .mt-leagues button{background:var(--panel2);border:1px solid var(--border);border-radius:999px;padding:5px 12px;font-size:.78rem;font-weight:700;color:var(--muted);cursor:pointer}
  .mt-leagues button.active{border-color:var(--accent);color:var(--accent)}
  .mt-teams{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;max-height:52vh;overflow-y:auto}
  .mt-teams button{background:var(--panel2);border:1px solid var(--border);border-radius:999px;padding:6px 13px;font-size:.8rem;font-weight:700;color:var(--text);cursor:pointer}
  .mt-teams button.on{border-color:var(--gold);color:var(--gold)}
  .mt-note{color:var(--muted);font-size:.78rem;margin-top:10px;line-height:1.5}

  /* Box score modal */
  #bs-overlay{display:none;position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.65);backdrop-filter:blur(3px);align-items:flex-start;justify-content:center;padding:24px 12px;overflow-y:auto}
  #bs-overlay.open{display:flex}
  .bs-panel{background:var(--panel);border:1px solid var(--border);border-radius:16px;max-width:560px;width:100%;padding:18px;margin:auto 0;box-shadow:0 16px 48px rgba(0,0,0,.5)}
  .bs-close{float:right;background:none;border:none;color:var(--muted);font-size:1.3rem;cursor:pointer;padding:2px 6px}
  .bs-matchup{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
  .bs-team{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;min-width:0}
  .bs-team img{width:44px;height:44px;object-fit:contain}
  .bs-team .bs-name{font-size:.8rem;font-weight:700;text-align:center}
  .bs-score{font-size:1.9rem;font-weight:800;font-variant-numeric:tabular-nums}
  .bs-status{text-align:center;color:var(--muted);font-size:.78rem;margin-bottom:12px}
  .bs-sec{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:14px 0 8px}
  table.bs-line{width:100%;border-collapse:collapse;font-size:.82rem;font-variant-numeric:tabular-nums}
  table.bs-line th,table.bs-line td{padding:4px 6px;text-align:center;border-bottom:1px solid var(--border)}
  table.bs-line th:first-child,table.bs-line td:first-child{text-align:left}
  table.bs-line tr:last-child td{border-bottom:none}
  .bs-statrow{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;padding:5px 0;border-bottom:1px solid var(--border);font-size:.82rem}
  .bs-statrow:last-child{border-bottom:none}
  .bs-statrow .sv{font-weight:700;font-variant-numeric:tabular-nums}
  .bs-statrow .sv.left{text-align:left}
  .bs-statrow .sv.right{text-align:right}
  .bs-statrow .sl{color:var(--muted);text-align:center}
  .bs-perf{font-size:.82rem;padding:4px 0;border-bottom:1px solid var(--border);line-height:1.4}
  .bs-perf:last-child{border-bottom:none}
  .bs-perf .muted{color:var(--muted)}
  .bs-loading{color:var(--muted);padding:14px 0;text-align:center}
  .gc-actions{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 2px}
  .gc-actions a{background:var(--panel2);border:1px solid var(--border);border-radius:999px;padding:5px 12px;font-size:.78rem;font-weight:700;color:var(--text)}
  .gc-actions a:hover{border-color:var(--accent2);color:var(--accent2);text-decoration:none}
  .gc-poll{margin-top:6px}
  .gc-poll-btns{display:flex;gap:8px;margin-bottom:8px}
  .gc-poll-btns button{flex:1;background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:8px;font-size:.85rem;font-weight:700;color:var(--text);cursor:pointer}
  .gc-poll-btns button:hover{border-color:var(--accent)}
  .gc-poll-btns button.picked{border-color:var(--accent);color:var(--accent)}
  .gc-poll-bar{display:flex;height:10px;border-radius:5px;overflow:hidden;background:var(--panel2);border:1px solid var(--border)}
  .gc-poll-bar .away{background:var(--accent2)}
  .gc-poll-bar .home{background:var(--accent)}
  .gc-poll-meta{display:flex;justify-content:space-between;font-size:.72rem;color:var(--muted);margin-top:4px}
  .bs-footlink{display:inline-block;margin-top:12px;margin-right:16px;font-size:.82rem;font-weight:600}
  .bs-teamhead{font-size:.76rem;font-weight:800;color:var(--text);margin:10px 0 4px}
  table.bs-players{width:100%;border-collapse:collapse;font-size:.76rem;font-variant-numeric:tabular-nums}
  table.bs-players th,table.bs-players td{padding:3px 5px;text-align:right;border-bottom:1px solid var(--border);white-space:nowrap}
  table.bs-players th:first-child,table.bs-players td:first-child{text-align:left;max-width:130px;overflow:hidden;text-overflow:ellipsis}
  table.bs-players th{color:var(--muted);font-weight:700}
  table.bs-players tr:last-child td{border-bottom:none}
  table.bs-players tr.totals td{font-weight:700}

  .section-label.picks-title{color:var(--gold)}
  .picks-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:26px}
  .picks-grid.single{grid-template-columns:1fr}

  /* Make Your Picks: the same KV-backed fan poll that used to live only
     inside a game's box-score modal, surfaced directly on the homepage for
     today's live games. Reuses .pick-card's gold-top-border treatment and
     the modal poll's .gc-poll-* bar/button styling so it doesn't need its
     own visual language. */
  .hp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-bottom:26px}
  .hp-poll-head{display:flex;justify-content:space-between;align-items:center;font-size:.78rem;font-weight:700;color:var(--muted);margin-bottom:6px}
  .hp-poll-body{display:flex;align-items:center;justify-content:center;gap:10px;font-weight:800;margin-bottom:10px}
  .hp-poll-team{display:flex;align-items:center;gap:6px}
  .hp-poll-team img{width:20px;height:20px;object-fit:contain}
  .hp-poll-vs{color:var(--muted);font-weight:600;font-size:.78rem}
  .pick-card{background:linear-gradient(135deg,var(--panel),var(--panel2));border:1px solid var(--border);border-top:3px solid var(--gold);border-radius:14px;padding:18px 18px 16px;display:flex;flex-direction:column;gap:7px;transition:border-color .15s,transform .15s}
  .pick-card:hover{border-color:var(--accent2);transform:translateY(-1px)}
  .pick-head{display:flex;align-items:center;gap:8px}
  .pick-icon{font-size:1.25rem;line-height:1}
  .pick-label{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--gold)}
  .pick-main{font-weight:700;font-size:1.08rem;line-height:1.35}
  .pick-sub{color:var(--muted);font-size:.85rem;line-height:1.45}
  .pick-cta{font-size:.8rem;font-weight:600;margin-top:2px;display:inline-block;padding:2px 0}
  .pick-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
  .pick-share{background:none;border:none;color:var(--accent2);font-family:inherit;cursor:pointer}
  .pick-share:disabled{opacity:.6;cursor:default}
  .picks-stamp{font-weight:400;text-transform:none;letter-spacing:0;color:var(--muted)}
  .picks-sub{font-size:.74rem;color:var(--muted);margin:-6px 0 12px}

  /* Top Stories is a dense, text-only headline list (ESPN's "Top Headlines"
     rail style) instead of a lead-image card + thumbnail rows -- more
     stories visible per screen without scrolling, and most of these
     articles don't have usable art anyway. */
  .story-row{padding:7px 0;border-bottom:1px solid var(--border)}
  .story-row:last-child{border-bottom:none}
  .story-h{display:block;font-size:.83rem;font-weight:600;color:var(--text);line-height:1.35}
  .story-h:hover{color:var(--accent2)}
  .story-meta{font-size:.7rem;color:var(--muted);margin-top:2px}
  .story-league{color:var(--gold);font-weight:700}

  /* "Top 5 stories" teaser -- originally mobile-only (see git history), now
     the homepage's only visible stories module at every width as part of
     the broader reorg toward hero -> quick actions -> watchlist -> scores
     -> picks -> stories teaser -> shop/newsletter -> install. The old full
     12-item "Top Sports Stories" card (id=storiesCard) still exists in the
     DOM -- loadTopStories() still fetches/populates it and this teaser both
     read from the same topStoriesCache -- but storiesCard itself is now
     display:none permanently rather than removed outright, so nothing about
     the fetch/parse code needed touching. "See all stories" now points to
     the dedicated News Tracker instead of the (hidden) local full list. */
  .stories-teaser{display:none}
  .stories-teaser.has-stories{display:block;margin-bottom:14px}

  /* Generic collapsed-by-default section (2026-08 audit follow-up): a fresh
     live-site sweep counted ~155 visible controls on desktop and a ~4800px
     mobile scroll height, calling out Top Stories, Newsletter, and Shop Gear
     specifically as lower-priority content worth collapsing by default.
     Reuses the same interaction shape as .mtp-card (My Teams prompt, see
     above) rather than a native <details> -- these sections already toggle
     their own display via JS (has-stories class, expandStories(), etc.) so
     a plain class-toggle composes with that existing logic instead of
     fighting it. Collapsed on every width (not mobile-only): these were
     flagged as low-priority everywhere, and staying collapsed until tapped
     is what actually shortens the page and thins out the control count. */
  .hq-collapse-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;background:none;border:none;padding:0;margin:16px 0 10px;cursor:pointer;font-family:inherit;text-align:left}
  .hq-collapse-toggle .section-label{margin:0}
  .hq-collapse-chevron{color:var(--muted);font-size:.8rem;flex-shrink:0;transition:transform .15s}
  .hq-collapse.open .hq-collapse-chevron{transform:rotate(180deg)}
  .hq-collapse:not(.open) .hq-collapse-body{display:none}
  .st-row{padding:6px 0;border-bottom:1px solid var(--border)}
  .st-row:last-child{border-bottom:none}
  .st-link{display:block;font-size:.82rem;font-weight:600;color:var(--text);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .st-link:hover{color:var(--accent2)}
  .st-more{display:block;width:100%;text-align:center;font-size:.78rem;font-weight:700;color:var(--accent2);padding:8px 0 2px;background:none;border:none;cursor:pointer;font-family:inherit}
  .st-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
  .st-tab{background:var(--panel2);border:1px solid var(--border);border-radius:999px;padding:5px 12px;font-size:.74rem;font-weight:700;color:var(--muted);cursor:pointer;font-family:inherit}
  .st-tab:hover{color:var(--text);border-color:var(--accent2)}
  .st-tab.on{background:var(--accent2);color:#0d1117;border-color:transparent}

  /* Compact "Shop + Newsletter" promo row -- two small cards side by side
     (stacking below ~500px combined width via auto-fit) instead of the two
     separate full-width section-label+dash-card blocks this used to be. */
  .promo-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
  .promo-title{font-weight:800;font-size:.92rem;margin:0 0 10px}

  /* Weather now lives as a persistent pill in the shared nav bar (nav.js) so it
     follows you across every tracker instead of only appearing on this homepage. */

  #install-banner{display:none;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:100;
    background:var(--panel);border:1px solid var(--accent);border-radius:14px;padding:12px 14px;align-items:center;gap:10px;box-shadow:0 8px 24px rgba(0,0,0,.4)}
  #install-banner .ib-text{flex:1;font-size:.85rem;line-height:1.4}
  #install-banner .ib-btn{background:var(--accent);color:#0d1117;border:none;border-radius:8px;padding:8px 14px;font-weight:700;font-size:.85rem;cursor:pointer}
  #install-banner .ib-close{background:none;border:none;color:var(--muted);font-size:1.2rem;cursor:pointer;padding:4px}

/* ===== hd-hub-v2 ===== */

/* ===== hd v2: hub layout + legacy component restyle (staging) ===== */
.hd-v2 body>header:not(.gh):not(.mh){display:none}
.hd-v2 main.hub-main{max-width:none;margin:0;padding:0}
.hd-v2 #hd-main{padding-top:32px;padding-bottom:56px}
.hub-col{display:flex;flex-direction:column;gap:32px;min-width:0}
.hub-col-c{gap:36px}
.hub-col-l{position:static}
.show-m{display:none}
/* head */
.hub-head .hero{margin:0;font:700 15px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.hub-head .hero::before{content:"";display:inline-block;width:3px;height:12px;border-radius:1px;background:var(--hd-gold);margin-right:10px;vertical-align:-1px}
.hub-head .sub{margin:10px 0 0;font:700 clamp(28px,3.2vw,40px)/1 var(--font-display);text-transform:uppercase;color:var(--text);letter-spacing:.005em}
.hd-v2 .hq-status{margin-top:12px;font:500 11.5px/1.4 var(--font-mono);letter-spacing:.04em;color:var(--muted);text-transform:uppercase;min-height:16px}
.hd-v2 .hq-status:empty{display:none}
/* hero */
.hub-hero{min-height:404px;display:flex;flex-direction:column}
.hub-hero .hero-band{flex:1;background:linear-gradient(105deg,color-mix(in srgb,var(--ca,#2a2a30) 85%,#0E0E10) 0 50%,color-mix(in srgb,var(--ch,#33333a) 85%,#0E0E10) 50% 100%)}
.hub-hero.is-loading .hero-band,.hub-hero.is-empty .hero-band{background:var(--surface)}
.hub-hero-ph{grid-column:1/-1;height:182px;border-radius:var(--r);background:linear-gradient(90deg,var(--surface-2),var(--surface-3),var(--surface-2));background-size:200% 100%;animation:hdsk 1.6s linear infinite}
.hub-hero-msg{color:var(--muted)!important}
.hub-hero-empty{grid-column:1/-1;display:flex;flex-direction:column;gap:8px;padding:40px 0}
.hub-hero-empty b{font:700 30px/1 var(--font-display);text-transform:uppercase}
.hub-hero-empty span{color:var(--text-2)}
.hub-hero .hero-body h2{grid-column:1/-1;margin:0;font:700 36px/1 var(--font-display);text-transform:uppercase;letter-spacing:.005em}
.hub-hero .hero-body{min-height:150px;align-content:start}
.hub-hero .hd-btn{white-space:nowrap}
.hub-hero .hub-st{font:600 11px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text);background:rgba(14,14,16,.55);padding:6px 9px;border-radius:3px}
.hub-pre{font-size:56px!important;font-style:normal!important}
.hub-hero-noimg{width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.08)}
.hub-hero .hero-team b{color:#fff}
@keyframes hdsk{to{background-position:-200% 0}}
/* section labels => C section headers */
.hd-v2 .section-label{display:flex;align-items:baseline;gap:12px;margin:0 0 16px;padding:0 0 12px;border-bottom:1px solid var(--line);font:700 var(--fs-h2,26px)/1 var(--font-display);text-transform:uppercase;letter-spacing:.01em;color:var(--text)}
.hub-col-r .section-label,.hub-col-l .section-label{font-size:21px;padding-bottom:10px;margin-bottom:6px}
.hd-v2 .picks-stamp,.hd-v2 .tg-hint{margin-left:auto;font:500 11px/1 var(--font-mono);color:var(--muted);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.hd-v2 .picks-sub{color:var(--text-2);font-size:13.5px;margin:-6px 0 14px}
/* cards => flat blocks with hairlines */
.hd-v2 .dash-card{background:none;border:0;border-radius:0;padding:0;margin:0;box-shadow:none}
.hd-v2 .dash-card>h2{display:flex;align-items:baseline;gap:10px;margin:0 0 4px;padding-bottom:10px;border-bottom:1px solid var(--line);font:700 21px/1 var(--font-display);text-transform:uppercase;color:var(--text)}
.hd-v2 #scores>h2 .tg-hint{display:none}
.hd-v2 .scores-filter{margin-left:auto;max-width:150px;height:32px;padding:0 28px 0 10px;border:1px solid var(--line);border-radius:999px;background:var(--bg-2);color:var(--text);font:600 12px/1 var(--font-ui);text-transform:none;letter-spacing:0;cursor:pointer}
.hd-v2 .scores-filter:focus-visible{outline:2px solid var(--hd-gold);outline-offset:2px}
.hd-v2 .empty{color:var(--muted);font-size:13.5px;padding:14px 0}
/* Live Scores rail list (legacy .tg-* rows) */
.hd-v2 #todayGames{min-height:420px}
.hd-v2 .tg-league{margin:0}
.hd-v2 .tg-league-head{display:flex;align-items:center;gap:8px;padding:16px 0 8px;margin:0;font:500 11px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.hd-v2 .tg-league-head:hover{color:var(--text)}
.hd-v2 .tg-row{display:block;padding:10px 0;margin:0;border-radius:0;border-bottom:0;border-top:1px solid var(--line-soft);font-size:14px}
.hd-v2 .tg-row.clickable{margin:0;padding:10px 0;border-radius:0}
.hd-v2 .tg-row.clickable:hover{background:none}
.hd-v2 .tg-row.clickable:hover .tg-teams{color:#fff}
.hd-v2 .tg-row-mine{border-left:0;box-shadow:inset 2px 0 0 var(--hd-gold);padding-left:10px!important;margin-left:0!important}
.hd-v2 .tg-top{display:flex;align-items:center;justify-content:space-between;gap:4px 8px;flex-wrap:wrap}
/* Long live statuses (clock + down & distance + TV) used to overrun the
   team names in the narrow rail. Teams keep their line; the status takes
   whatever room is left and drops to its own line when there isn't enough. */
.hd-v2 .tg-teams{flex:0 1 auto}
.hd-v2 .tg-top>.tg-status{flex:1 1 auto;min-width:0;margin-left:auto;white-space:normal;overflow-wrap:anywhere}
.hd-v2 .tg-teams{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;min-width:0;color:var(--text);font:500 13.5px/1.2 var(--font-ui);white-space:nowrap}
.hd-v2 .tg-score{font:700 18px/1 var(--font-display);font-variant-numeric:tabular-nums;color:var(--text)}
.hd-v2 .tg-status{font:500 10.5px/1.3 var(--font-mono);color:var(--muted);letter-spacing:.02em;text-transform:uppercase;text-align:right;white-space:nowrap}
.hd-v2 .tg-status.live{color:var(--live);font-weight:500}
.hd-v2 .tg-badge{display:none}
.hd-v2 .tg-status.live .tg-badge.live{display:inline-block;margin-right:6px;padding:2px 5px;border-radius:2px;background:var(--live);color:#fff;font-size:9.5px;letter-spacing:.08em}
.hd-v2 .tg-logo{width:18px;height:18px;flex:none}
.hd-v2 .tg-star{color:var(--muted);font-size:12px;padding:0 1px}
.hd-v2 .tg-star.on{color:var(--hd-gold)}
.hd-v2 .tg-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.hd-v2 .tg-act{height:24px;display:inline-flex;align-items:center;padding:0 9px;border-radius:999px;border:1px solid var(--line);background:none;color:var(--text-2);font:500 11.5px/1 var(--font-ui)}
.hd-v2 .tg-act:hover{border-color:var(--text-2);color:var(--text)}
.hd-v2 .tg-pitchers{margin-top:4px;font:500 10.5px/1.3 var(--font-mono);color:var(--muted);letter-spacing:.02em}
.hd-v2 .tg-more-btn{margin-top:8px;color:var(--text-2);font:500 13px/1 var(--font-ui);height:36px;border:1px solid var(--line);border-radius:999px;padding:0}
.hd-v2 .ws-row:hover{background:var(--surface)}
.hub-skel{display:flex;flex-direction:column;gap:0}
.hub-skel i{height:44px;border-top:1px solid var(--line-soft);background:linear-gradient(90deg,transparent,var(--surface) 50%,transparent);background-size:200% 100%;animation:hdsk 1.6s linear infinite}
/* Local teams / gear chips */
.hd-v2 .lt-trigger{display:flex;align-items:center;gap:10px;width:100%;height:auto;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-2);color:var(--text);font:500 14px/1.2 var(--font-ui);cursor:pointer;text-align:left}
.hd-v2 .lt-trigger-label{font-weight:600}
.hd-v2 .lt-trigger-value{flex:1;color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hd-v2 .gnow-row{margin-top:12px}
.hd-v2 .gnow-label{font:500 11px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
/* Trackers rail */
.hub-trackers .trk:hover b{color:var(--text)}
/* Start here => numbered digest feel */
.hd-v2 #startHereCard{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hd-v2 #startHereSection .section-label{border-bottom:0;margin-bottom:0}
/* Buttons */
.hd-v2 .action-row{display:none}
.hd-v2 .action-btn{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:none;color:var(--text);font:500 13.5px/1 var(--font-ui);cursor:pointer;white-space:nowrap}
.hd-v2 .action-btn.picks-cta{background:var(--hd-gold);border-color:var(--hd-gold);color:var(--hd-gold-ink)}
/* Picks / recap / angle grids */
.hd-v2 .hp-grid,.hd-v2 .picks-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.hd-v2 .pick-card,.hd-v2 .hp-card,.hd-v2 .recap-card{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg)}
/* collapsibles */
.hd-v2 .hq-collapse-toggle{display:flex;align-items:center;width:100%;gap:10px;background:none;border:0;padding:0;color:var(--text);cursor:pointer;text-align:left}
.hd-v2 .hq-collapse-toggle .section-label{flex:1;margin-bottom:0}
.hd-v2 .hq-collapse-chevron{color:var(--muted);font-size:14px;margin-left:-28px;padding-bottom:12px}
.hd-v2 .hq-collapse-body{margin-top:12px}
.hd-v2 .st-tabs{display:flex;gap:4px;padding:3px;background:var(--surface);border-radius:999px;overflow-x:auto;margin-bottom:12px;scrollbar-width:none}
.hd-v2 .st-tabs button{flex:none;height:30px;padding:0 12px;border:0;border-radius:999px;background:none;color:var(--muted);font:500 13px/1 var(--font-ui);cursor:pointer}
.hd-v2 .st-tabs button.active,.hd-v2 .st-tabs button.on,.hd-v2 .st-tabs button[aria-selected="true"]{background:var(--surface-3);color:var(--text)}
/* Right rail */
.hd-v2 .fav-wx:empty{display:none}
.hub-tr{grid-template-columns:repeat(4,1fr)}
.hub-tr a:hover{border-color:var(--line);background:var(--surface)}
.hub-tr img{width:30px;height:30px}
.hd-v2 .promo-row{display:flex;flex-direction:column;gap:20px}
.hd-v2 .promo-card{padding:16px 18px!important;border:1px solid var(--line)!important;border-radius:var(--r-lg)!important;background:var(--bg-2)!important}
.hd-v2 .promo-title{margin:0 0 6px;font:700 19px/1.05 var(--font-display);text-transform:uppercase;color:var(--text)}
.hd-v2 .nl-copy{color:var(--text-2);font-size:13.5px;line-height:1.45}
.hd-v2 .nl-sample{color:var(--muted);font-size:12.5px;line-height:1.45;margin:8px 0 12px}
.hd-v2 .nl-row{display:flex;gap:8px}
.hd-v2 .nl-row input[type=email]{flex:1;min-width:0;height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--text);font:400 14px var(--font-ui)}
.hd-v2 .nl-row button{height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--surface-2);color:var(--text);font:500 14px/1 var(--font-ui);cursor:pointer}
.hd-v2 .nl-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.hd-v2 .gear-btn{display:inline-flex;align-items:center;height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:none;color:var(--text);font:500 13.5px/1 var(--font-ui)}
.hd-v2 .gear-fine{margin-top:10px;font-size:12px;color:var(--muted)}
.hub-app{justify-content:space-between}
.hub-app .hq-app{margin-left:auto;display:block;line-height:0}
.hub-app .hq-app img{width:105px;height:35px}
.hd-v2 .mtp-card{border:1px solid var(--line);border-top:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-2);padding:14px 16px;margin:0}
.hd-v2 .mtp-toggle .xc-emoji{font-size:0;line-height:0}
.hd-v2 .mtp-toggle{display:flex;align-items:center;gap:12px;width:100%;background:none;border:0;padding:0;color:var(--text);text-align:left;cursor:pointer}
.hd-v2 .mtp-toggle .xc-emoji{color:var(--hd-gold)}
.hd-v2 .mtp-toggle-text{flex:1;display:flex;flex-direction:column;gap:4px}
.hd-v2 .xc-name{font:600 14px/1.3 var(--font-ui)}
.hd-v2 .mtp-preview,.hd-v2 .xc-tag{font-size:12.5px;color:var(--muted);line-height:1.45}
.hd-v2 .qp-teams button{border:1px solid var(--line);background:none;color:var(--text);border-radius:999px;height:34px;padding:0 12px;font:500 13px/1 var(--font-ui);cursor:pointer}
.hd-v2 .qp-teams{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.hd-v2 .mtp-full{font-size:13px;color:var(--text-2)}
/* Ticker (mobile only) */
.hub-tk{min-height:0}
/* CLS: hqStatus fills in after the scoreboard fetch; keep its line reserved */
#hqStatus.hq-status{min-height:16px}
#hqStatus.hq-status:empty{display:block;margin:12px 0 14px}
/* CLS: the watchlist fills in after data loads; on desktop put it under Live Scores so it doesn't push the scores down */
@media (min-width:1024px){#hqGroup_games{display:flex;flex-direction:column}#hqGroup_games>#watchlistSection{order:2;margin-top:28px}#hqGroup_games>.lt-compact{order:3}#hqGroup_games>*{order:1}}
/* Hub directory footer (legacy <footer>) */
.hd-v2 footer.hub-dir{max-width:var(--max);margin:0 auto;padding:28px 32px 8px;text-align:left;color:var(--muted);font-size:12.5px;border-top:1px solid var(--line-soft)}
.hd-v2 footer.hub-dir .footer-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 28px;line-height:1.6}
.hd-v2 footer.hub-dir b{color:var(--text-2);font-weight:600}
.hd-v2 footer.hub-dir a{color:var(--text-2);text-decoration:none}
.hd-v2 footer.hub-dir a:hover{color:var(--text)}
.hd-v2 #installCard{margin-top:16px;font-size:12px;color:var(--muted)}
.tg-tv{color:var(--muted);white-space:nowrap}
.yt-head{display:flex;align-items:baseline;justify-content:space-between}
.yt-edit{background:none;border:0;color:var(--muted);font:500 12px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.yt-edit:hover{color:var(--text)}
.st-meta{font-size:11.5px;color:var(--muted);margin-top:2px}
.fy-note{font-size:12px;color:var(--muted);margin:0 0 6px}
.fy-edit{background:none;border:0;padding:0;color:var(--text-2);font:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer;min-height:24px}
.fy-sub{font:600 11px/1 var(--font-mono,monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:14px 0 4px}
.gc-pre{text-align:center;color:var(--text-2);font-size:13px;line-height:1.5;margin:4px 0 8px}
.gc-share{background:var(--panel2);border:1px solid var(--border);border-radius:999px;padding:5px 12px;font:700 .78rem/1.2 inherit;color:var(--text);cursor:pointer}
@media (pointer:coarse){.gc-share{min-height:44px}}
.gc-play{display:flex;gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--line-soft,var(--border));font-size:13px;line-height:1.4}
.gc-when{flex:0 0 auto;min-width:64px;color:var(--muted);font-size:11.5px;font-family:var(--font-mono,monospace)}
.gc-ptext{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.gc-pscore{flex:0 0 auto;font-weight:700;font-variant-numeric:tabular-nums}
.gc-more{color:var(--muted);font-size:12px;margin:0 0 4px}
.tg-lgtag{display:inline-block;font:600 10px/1 var(--font-mono,monospace);letter-spacing:.06em;color:var(--muted);border:1px solid var(--line,var(--border));border-radius:4px;padding:2px 4px;margin-right:6px;vertical-align:2px}
.yt-links{display:inline-flex;gap:14px;align-items:baseline}
.yt-sched{display:none}
html.hd-has-teams .yt-sched{display:inline}
#forYouWrap .mtp-card{margin-bottom:12px}
#forYouWrap .lt-compact{margin-top:12px}
.hd-v2 footer.hub-dir .hub-promo{grid-template-columns:minmax(0,1fr)}
.hd-v2 footer.hub-dir+footer.ft{margin-top:20px}
.today-module.is-waiting{display:none}
.hd-v2 .today-sub{display:flex;align-items:baseline;gap:10px;margin:20px 0 10px;font:700 16px/1 var(--font-display);letter-spacing:.04em;text-transform:uppercase;color:var(--text)}
.hd-v2 .today-module .picks-grid,.hd-v2 .today-module .hp-grid{margin-bottom:4px}
.hd-v2 footer.hub-dir .hub-promo{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:16px;margin:0 0 22px;padding-bottom:18px;border-bottom:1px solid var(--line-soft)}
/* overlays keep legacy structure; only surfaces re-tinted via the bridge vars */
@media (max-width:1023px){
  .hd-grid.hub-grid{display:flex;flex-direction:column;align-items:stretch;gap:32px}
  .hub-col{display:contents}
  .hub-head{order:-50}.hub-hero{order:-40}#hqGroup_picks{order:4}.action-row{order:-25}#forYouWrap{order:-20}#myTeamsPrompt{order:-15}
  body.hd-has-favs #forYouWrap{order:-45}
  .hub-reports{order:55}.hub-trackers{order:60}
  .hd-grid.hub-grid>.hub-col-l{display:contents}
}
@media (max-width:767px){
  .show-m{display:block}
  .hd-v2 #hd-main{padding:18px 16px 32px}
  .hd-v2 .action-row{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px}
  .hub-head .sub{font-size:28px}
  .hub-hero{min-height:330px}
  .hub-hero .hero-body{min-height:140px;grid-template-columns:1fr}
  .hub-hero .hero-body h2{font-size:26px}
  .hub-hero .hero-acts{flex-wrap:wrap;gap:8px}
  .hub-hero .hd-btn{height:36px;padding:0 13px;font-size:13px}
  .hub-hero-ph{height:130px}
  .hub-pre{font-size:36px!important}
  .hub-hero-noimg{width:46px;height:46px}
  .hd-v2 .hp-grid,.hd-v2 .picks-grid{grid-template-columns:1fr}
  .hd-v2 .section-label{font-size:22px}
  .hd-v2 #todayGames{min-height:300px}
  .hd-v2 .scores-filter{max-width:138px}
  .hub-tr{grid-template-columns:repeat(8,1fr);gap:6px}
  .hub-tr a{aspect-ratio:1}
  .hub-tr img{width:26px;height:26px}
  .hd-v2 footer.hub-dir{padding:24px 16px 4px}
  .hd-v2 footer.hub-dir .footer-groups{grid-template-columns:1fr}
  .hd-v2 footer.hub-dir .hub-promo{grid-template-columns:1fr}
  .hub-tk .ticker-wrap{position:static}
  .hub-tk{min-height:103px}
  .hub-tk.tk-empty{min-height:0}
}

/* ===== My Teams Daily Brief ===== */
.brief-grid{display:grid;gap:10px;margin-bottom:12px}
.brief-card{min-height:124px;min-width:0;padding:12px 14px;border:1px solid var(--line,var(--border));border-radius:12px;background:var(--bg-2,var(--panel));display:flex;flex-direction:column;gap:4px}
.brief-card.brief-in{border-color:var(--live,#e5484d)}
.brief-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;min-width:0}
.brief-team{font:700 17px/1.1 var(--font-display);text-transform:uppercase;letter-spacing:.01em;color:var(--text);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.brief-team:hover,a.brief-team:focus-visible{color:var(--hd-gold,var(--accent))}
.brief-lg{flex:none;font:500 10.5px/1 var(--font-mono);letter-spacing:.08em;color:var(--muted)}
.brief-line{font:500 11.5px/1.35 var(--font-mono);letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
.brief-wait{opacity:.8}
.brief-live{display:inline-block;margin-right:6px;padding:1px 5px;border-radius:3px;background:var(--live,#e5484d);color:#fff;font-weight:600}
.brief-score{font-size:14px;line-height:1.35;color:var(--text);overflow-wrap:anywhere}
.brief-score b{font:700 19px/1 var(--font-display);font-variant-numeric:tabular-nums}
.brief-dash{color:var(--muted)}
.brief-res{display:inline-block;min-width:18px;margin-right:6px;padding:1px 4px;border-radius:3px;font:700 11px/1.3 var(--font-mono);text-align:center;color:#fff;background:var(--muted)}
.brief-res.W{background:var(--win,#2f9e44)} .brief-res.L{background:var(--loss,#e5484d)}
.brief-sub,.brief-tv{color:var(--text-2,var(--muted))}
.brief-story a{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;line-height:1.4;color:var(--text-2,var(--muted));text-decoration:none}
.brief-story a:hover,.brief-story a:focus-visible{color:var(--text);text-decoration:underline}
.brief-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:6px}
.brief-act{display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border:1px solid var(--line,var(--border));border-radius:999px;background:none;color:var(--text-2,var(--text));font:500 12.5px/1 var(--font-ui,inherit);text-decoration:none;cursor:pointer}
.brief-act:hover,.brief-act:focus-visible{border-color:var(--text-2,var(--text));color:var(--text)}
.brief-act.primary{background:var(--hd-gold,var(--accent));border-color:var(--hd-gold,var(--accent));color:var(--hd-gold-ink,#111)}
.brief-more{min-height:40px;padding:0 4px;border:0;background:none;color:var(--muted);font:500 12.5px/1 var(--font-ui,inherit);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media (pointer:coarse){.brief-act,.brief-more{min-height:44px}}
@media (prefers-reduced-motion:reduce){.brief-card{transition:none}}

/* Your Teams is static markup under the heading (no runtime move). */
html.hd-has-teams #myTeamsPrompt{display:none!important}
html.hd-has-teams #myDaySection{display:block!important;min-height:var(--brief-min,0px)}
@media (max-width:1023px){html.hd-has-teams #forYouWrap{order:-45}}
@media (min-width:600px){.brief-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:599px){.brief-grid{grid-template-columns:minmax(0,1fr)}}