/* Palette: "Steel Blue" direction. Every value was solved against contrast
     targets (WCAG 4.5:1 and APCA Lc) on the darkest surface of its theme, so
     the accent and signal colors are intentionally DIFFERENT per theme:
     lighter on dark, deeper on light. --text/--text-2/--text-3 are the three
     text tiers (primary / secondary / timestamps-and-labels). */
  :root{
    --surface-0:#0A0F13;
    --surface-1:#13181D;
    --surface-2:#1C2126;
    --text:#E8E7E2;
    --text-2:#CBCAC5;
    --text-3:#ADACA7;
    --accent:#1E7FD6;
    --brand-shadow:#1E7FD6;   /* wordmark drop shadow (dark theme) */
    --accent-ink:#FFFFFF;   /* label color ON an accent fill */
    --signal:#FEAEAA;       /* live / alert; one color replaces the old green+red pair */
    --line: color-mix(in srgb, var(--text) 12%, transparent);
    --line-strong: color-mix(in srgb, var(--text) 26%, transparent);
    color-scheme: dark;
  }
  :root[data-theme="light"]{
    --surface-0:#F7F6F0;
    --surface-1:#F0EEE9;
    --surface-2:#E7E5DF;
    --text:#1E272F;
    --text-2:#424B55;
    --text-3:#5E6872;
    --accent:#1E7FD6;
    --brand-shadow:#0E1A26;   /* wordmark on the light theme: blue letters, navy shadow */
    --brand-ink:#1E7FD6;
    --accent-ink:#FFFFFF;
    --signal:#A52831;
    color-scheme: light;
  }
  *{box-sizing:border-box;}
  ::-webkit-scrollbar{display:none;}
  *{scrollbar-width:none; -ms-overflow-style:none;}
  html,body{margin:0;padding:0;background:var(--surface-0);color:var(--text);height:100%;}
  body{
    font-family:'Source Serif 4', Georgia, serif;
    -webkit-font-smoothing:antialiased;
    transition:background .15s ease, color .15s ease;
  }
  h1,h2,h3,h4,.display{
    font-family:'Oswald', 'Arial Narrow', sans-serif;
    margin:0;
  }
  h5,h6{margin:0;}  /* was missing: browser default (~25px) was inflating every sidebar item */
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}
  button{font-family:inherit;}

  /* ================= Shell: left rail + topbar ================= */
  .shell{display:flex; min-height:100vh;}

  .rail{
    width:224px; flex-shrink:0;
    background:var(--surface-1);
    border-right:1px solid var(--line);
    display:flex; flex-direction:column;
    position:sticky; top:0; height:100vh;
  }
  /* Logo: lives in the always-visible top bar on every page (see .topbar). */
  .site-logo{
    display:flex; align-items:center; gap:8px; justify-self:center;
    color:var(--text); text-decoration:none; line-height:1; white-space:nowrap;
    transition:opacity .15s ease;
  }
  /* The wordmark (an inline SVG: the letters are shapes, so it looks the same everywhere): the header's text color,
     with the brand-blue drop shadow. The H carries the icon's speed lines. */
  .site-logo .word{display:block; height:28px; width:auto; max-width:100%; overflow:visible;}
  .site-logo .word-fill{fill:var(--brand-ink,currentColor); stroke:var(--brand-ink,currentColor);}
  .site-logo .word-shadow{fill:var(--brand-shadow); stroke:var(--brand-shadow);}
  .site-logo .word-fill,.site-logo .word-shadow{stroke-width:4; stroke-linejoin:round;}
  .site-logo .word{height:22px;}

  /* The slide-out menu header only exists on mobile, and only holds the close button. */
  .rail-brand{display:none; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--line);}
  .rail-title{font-family:'Oswald',sans-serif; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-3);}
  .rail-close{
    display:none;
    margin-left:auto; flex-shrink:0;
    width:28px; height:28px; align-items:center; justify-content:center;
    background:none; border:none; cursor:pointer; border-radius:5px;
    color:var(--text-3);
  }
  .rail-close svg{width:16px;height:16px;}
  .rail-close:hover{color:var(--text); background:color-mix(in srgb, var(--text) 6%, transparent);}

  .rail-scroll{flex:1; overflow-y:auto; padding:14px 0;}
  .rail-section{margin-bottom:6px;}
  .rail-label{
    font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:0.06em;
    color:var(--text-3); padding:10px 18px 6px;
  }
  .rail-item{
    display:flex; align-items:center; gap:10px;
    padding:7px 18px;
    font-family:'Oswald',sans-serif; font-size:13.5px; font-weight:500;
    color:var(--text-2);
    cursor:pointer; border-left:2px solid transparent;
  }
  .rail-item:hover{background:color-mix(in srgb, var(--text) 4%, transparent); color:var(--text);}
  .rail-item.active{background:color-mix(in srgb, var(--accent) 10%, transparent); border-left-color:var(--accent); color:var(--text);}
  .rail-item .swatch{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
  .rail-item .count{margin-left:auto; font-size:11px; color:var(--text-3);}

  .rail-foot{padding:12px 10px 14px;}
  .install-pill{
    display:flex; align-items:center; gap:9px;
    padding:9px 8px; border-radius:6px;
    font-family:'Oswald',sans-serif; font-size:12.5px; font-weight:500;
    color:var(--text-2); cursor:pointer;
    border:none; background:none; width:100%; text-align:left;
  }
  .install-pill svg{width:15px;height:15px; flex-shrink:0;}
  .install-pill:hover{background:color-mix(in srgb, var(--text) 5%, transparent); color:var(--text);}
  .install-pill:disabled{opacity:0.4; cursor:default;}
  .install-pill:disabled:hover{background:none;}

  .main{flex:1; min-width:0; display:flex; flex-direction:column;}

  .topbar{
    height:56px; flex-shrink:0;
    display:grid; grid-template-columns:1fr auto 1fr; align-items:center; column-gap:10px;
    padding:0 22px;
    border-bottom:1px solid var(--line);
    position:sticky; top:0; background:var(--surface-0); z-index:5;
  }
  .topbar-left{display:flex; align-items:center; gap:14px; min-width:0;}
  .topbar-right{display:flex; align-items:center; justify-content:flex-end;}
  .hamburger{display:none;}
  .search{
    position:relative;
    display:flex; align-items:center; gap:8px;
    background:var(--surface-2); border:1px solid var(--line);
    padding:7px 10px; width:38px; overflow:hidden;
    transition:width .18s ease; flex-shrink:0;
  }
  .search.open{width:280px; overflow:visible;}
  .search-icon-btn{
    background:none; border:none; padding:0; margin:0; cursor:pointer;
    color:var(--text-2); flex-shrink:0;
    display:flex; align-items:center;
  }
  .search-icon-btn svg{width:15px;height:15px;}
  .search input{
    background:none; border:none; outline:none; color:var(--text);
    font-family:'Source Serif 4',serif; font-size:13px; width:100%;
    opacity:0; transition:opacity .12s ease;
  }
  .search.open input{opacity:1;}
  .search input::placeholder{color:color-mix(in srgb, var(--text) 40%, transparent);}
  .search-results{
    display:none;
    position:absolute; top:calc(100% + 6px); left:0; right:0;
    background:var(--surface-1); border:1px solid var(--line-strong);
    max-height:340px; overflow-y:auto; z-index:30;
    box-shadow:0 8px 24px rgba(0,0,0,0.25);
  }
  .search-results.open{display:block;}
  .search-result{
    display:flex; align-items:center; gap:10px;
    padding:9px 12px; cursor:pointer;
    font-family:'Source Serif 4',serif; font-size:13.5px;
    border-bottom:1px solid var(--line);
  }
  .search-result:last-child{border-bottom:none;}
  .search-result:hover, .search-result.highlighted{background:color-mix(in srgb, var(--text) 6%, transparent);}
  .search-result .swatch{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
  .search-result .kind{
    margin-left:auto; font-family:'Oswald',sans-serif; font-size:10px; letter-spacing:0.04em;
    color:var(--text-3); text-transform:uppercase;
  }
  .search-empty{padding:14px 12px; font-size:12.5px; color:var(--text-3);}
  .topbar-spacer{flex:1;}
  .icon-btn{
    width:34px;height:34px; display:flex; align-items:center; justify-content:center;
    background:none; border:none; color:var(--text-2); cursor:pointer; position:relative;
  }
  .icon-btn:hover{color:var(--text);}
  .icon-btn svg{width:19px;height:19px;}
  .icon-btn .dot{
    position:absolute; top:6px; right:6px; width:6px;height:6px;border-radius:50%;
    background:var(--signal);
  }

  .content{flex:1; padding:14px 20px 36px; max-width:1180px;}

  @media (max-width: 880px){
    .rail{
      position:fixed; z-index:20; left:0; top:0;
      transform:translateX(-100%); transition:transform .2s ease, box-shadow .2s ease;
    }
    .rail.open{transform:translateX(0); box-shadow:2px 0 24px rgba(0,0,0,0.4);}  /* shadow only while open: it used to leak onto the page edge when closed */
    .hamburger{display:flex;}
    .rail-brand{display:flex;}
    .rail-close{display:flex;}
    .topbar{padding:0 12px;}
    .topbar-left{gap:8px;}
    .topbar.search-open .site-logo{opacity:0; pointer-events:none;}  /* make room while search is open */
    .content{padding:10px 12px 24px;}
    .search.open{width:150px;}

    /* Density pass: this app is used mostly on mobile, so vertical space
       is the scarce resource — every section below gets meaningfully
       tighter padding/margins than the desktop values above, rather than
       just shrinking proportionally. The goal is more content visible per
       screen, not a smaller version of the same spacious desktop layout. */
    .slate{margin:-10px -12px 14px; padding:10px 12px;}
    .slate-head{margin-bottom:7px;}
    .sort-toggle{margin-bottom:10px;}
    .board-grid{margin-bottom:14px;}
    .feature{padding:13px;}
    .feature-img{width:calc(100% + 26px); margin:-13px -13px 10px -13px;}
    .feature h3{font-size:19px;}
    .feature .tag{margin-bottom:8px;}
    .feature p{margin-top:8px; font-size:14px;}
    .feature .meta{margin-top:8px;}
    .sidelist{padding:14px 16px;}
    .sidelist h4{padding-bottom:8px; margin-bottom:2px;}
    .side-item{padding:7px 0;}
    .side-thumb{width:44px;height:44px;}
    .lane{padding:0 0 14px; margin-bottom:12px;}
    .lane-head{margin-bottom:8px;}
    .lane-head h3{font-size:14px;}
    .card{flex:0 0 210px;}
    .card-body{padding:9px 11px;}
    .card h4{font-size:14px;}
    .card p{font-size:12px; margin-top:5px;}
    .feast-cta{padding:16px 0;}
    footer{padding:12px 0 20px;}
    .page-header{padding:10px 0 8px;}
    .schedule-block{margin:10px 0 12px; padding-bottom:10px; gap:20px;}
    .team-story{padding:10px 0 10px 10px;}
    .team-story-thumb{width:64px;height:64px;}
    .settings-panel{margin-top:16px; padding-top:12px;}
    .league-block{margin-bottom:16px;}
  }

  .wrap{max-width:1180px;margin:0 auto;padding:0 24px;}
  @media (max-width:880px){.wrap{padding:0 12px;}}

  /* ================= What's On Today (game slate) ================= */
  .slate{
    background:var(--surface-1); border-bottom:1px solid var(--line);
    margin:-14px -20px 16px; padding:11px 20px;
  }
  .slate-head{margin-bottom:8px;}
  .slate-head h2{font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:0.04em;}
  .slate-row{display:flex; gap:10px; overflow-x:auto; padding-bottom:2px;}
  .matchup{
    flex:0 0 auto; display:flex; align-items:center; gap:10px;
    background:var(--surface-2); border:1px solid var(--line);
    padding:9px 14px; white-space:nowrap;
  }
  .matchup .teams{display:flex; align-items:center; gap:7px; font-family:'Oswald',sans-serif; font-size:13px; font-weight:600;}
  .matchup .dot{width:8px;height:8px;border-radius:50%; flex-shrink:0; background:var(--accent);}
  .matchup .at{color:color-mix(in srgb, var(--text) 40%, transparent); font-weight:400; font-size:11px;}
  .matchup .status{
    font-family:'Oswald',sans-serif; font-size:10.5px; letter-spacing:0.03em;
    color:var(--text-3); border-left:1px solid var(--line); padding-left:10px;
  }
  .matchup .status.live{color:var(--signal); font-weight:600;}

  /* ---------- Hero / trending ---------- */
  .board-grid{
    display:grid;
    grid-template-columns: 1.4fr 1fr;
    gap:0;
    border:1px solid var(--line);
    margin-bottom:18px;
  }
  @media (max-width:820px){
    .board-grid{grid-template-columns:1fr;}
  }
  .feature{
    padding:16px 18px 18px;
    border-right:1px solid var(--line);
  }
  @media (max-width:820px){
    .feature{border-right:none;border-bottom:1px solid var(--line);padding:14px;}
  }
  .feature-img{
    width:calc(100% + 36px); margin:-16px -18px 12px -18px;
    aspect-ratio:21/9; background-color:var(--surface-2); background-size:cover; background-position:center;
  }
  @media (max-width:820px){
    .feature-img{width:calc(100% + 28px); margin:-14px -14px 10px -14px;}
  }
  .feature .tag{
    display:inline-block;
    font-family:'Oswald',sans-serif;
    font-size:12px;
    font-weight:600;
    letter-spacing:0.04em;
    color:var(--accent-ink);
    background:var(--accent);
    padding:3px 8px;
    margin-bottom:14px;
  }
  .feature h3{
    font-size:clamp(22px,3.2vw,30px);
    line-height:1.1;
    font-weight:600;
  }
  .feature p{
    font-size:15.5px;
    line-height:1.55;
    color:var(--text-2);
    margin-top:12px;
    max-width:56ch;
  }
  .feature .meta{
    margin-top:16px;
    font-family:'Oswald',sans-serif;
    font-size:12px;
    letter-spacing:0.03em;
    color:var(--text-3);
  }

  .sidelist{padding:16px 18px;}
  @media (max-width:820px){.sidelist{padding:14px 16px;}}
  .sidelist h4{
    font-family:'Oswald',sans-serif;
    font-size:13px;
    letter-spacing:0.04em;
    color:var(--accent);
    padding-bottom:9px;
    border-bottom:1px solid var(--line);
    margin-bottom:2px;
    text-transform:uppercase;
  }
  .side-item{
    display:flex;
    gap:12px;
    padding:9px 0;
    border-bottom:1px solid var(--line);
  }
  .side-item:last-child{border-bottom:none;}
  .side-thumb{
    width:56px;height:56px;flex-shrink:0;border-radius:2px;
    background-color:var(--surface-2); background-size:cover; background-position:center;
  }
  .side-item-body{display:flex; flex-direction:column; justify-content:center; min-width:0;}
  .side-item h5{
    font-size:15px;
    font-weight:600;
    line-height:1.25;
  }
  .side-item .src{
    font-family:'Oswald',sans-serif;
    font-size:11px;
    letter-spacing:0.03em;
    color:var(--text-3);
    margin-top:6px;
  }

  /* ---------- Sport lanes ---------- */
  .lane{
    padding:0 0 18px;
    margin-bottom:18px;
    border-bottom:1px solid var(--line);
  }
  .lane-head{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    margin-bottom:10px;
  }
  .lane-head h3{
    font-size:16px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.03em;
  }
  .lane-head a.all{
    font-family:'Oswald',sans-serif;
    font-size:11.5px;
    letter-spacing:0.03em;
    color:var(--accent);
  }
  .series-chips{display:flex; gap:8px; margin:0 0 12px; flex-wrap:wrap;}
  .series-chips button{border:1px solid var(--line); background:transparent; color:var(--text-2, inherit); padding:5px 12px; border-radius:999px; font:inherit; font-size:12.5px; cursor:pointer;}
  .series-chips button.active{background:var(--accent); border-color:var(--accent); color:#fff;}
  .cards, .rowscroll{
    display:flex;
    gap:1px;
    background:var(--line);
    overflow-x:auto;
    margin:0 -1px;
    padding-bottom:2px;
  }
  .card{
    background:var(--surface-0);
    flex:0 0 250px;
    display:flex; flex-direction:column;
  }
  .card-img{
    width:100%; aspect-ratio:16/9; flex-shrink:0;
    background-color:var(--surface-2); background-size:cover; background-position:center;
  }
  .card-body{padding:11px 13px;}
  .card .stamp{
    font-family:'Oswald',sans-serif;
    font-size:10.5px;
    letter-spacing:0.04em;
    color:var(--text-3);
    margin-bottom:8px;
  }
  .card h4{
    font-size:15px;
    font-weight:600;
    line-height:1.28;
  }
  .card p{
    font-size:12.5px;
    line-height:1.5;
    color:var(--text-2);
    margin-top:7px;
  }

  /* ---------- Newsletter / Join the Feast ---------- */
  .feast-cta{
    padding:24px 0;
    border-bottom:1px solid var(--line);
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:20px;
  }
  .feast-cta[hidden]{display:none;}
  @media (max-width:700px){
    .feast-cta{grid-template-columns:1fr;text-align:left;}
  }
  .feast-cta h3{
    font-size:clamp(24px,3.6vw,32px);
    font-weight:700;
    max-width:16ch;
    text-transform:uppercase;
  }
  .feast-cta p{
    font-family:'Source Serif 4',serif;
    font-size:15px;
    color:var(--text-2);
    margin-top:8px;
  }
  .feast-form{
    display:flex;
    gap:0;
    border:1px solid var(--line-strong);
  }
  .feast-form input{
    background:transparent;
    border:none;
    color:var(--text);
    padding:14px 16px;
    font-family:'Source Serif 4',serif;
    font-size:14px;
    width:220px;
  }
  .feast-form input:focus{outline:2px solid var(--accent);outline-offset:-2px;}
  .feast-form button{
    background:var(--accent);
    border:none;
    color:var(--accent-ink);
    font-family:'Oswald',sans-serif;
    font-weight:600;
    font-size:13px;
    letter-spacing:0.03em;
    padding:0 22px;
    cursor:pointer;
  }
  .feast-form button:hover{background:color-mix(in srgb, var(--accent) 86%, var(--text));}

  /* ---------- Footer ---------- */
  footer{
    padding:16px 0 28px;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:14px;
    font-family:'Oswald',sans-serif;
    font-size:12px;
    letter-spacing:0.03em;
    color:var(--text-3);
  }

  /* ---------- Shared states ---------- */
  .loading, .empty{
    padding:30px 0;
    font-family:'Oswald',sans-serif;
    font-size:13px;
    letter-spacing:0.03em;
    color:var(--text-3);
  }
  .coverage{
    margin-top:10px;
    font-family:'Oswald',sans-serif;
    font-size:11px;
    letter-spacing:0.03em;
    color:var(--text-3);
  }
  .coverage a{border-bottom:1px solid transparent;}
  .coverage a:hover{border-bottom-color:color-mix(in srgb, var(--text) 48%, transparent);}
  .card h4 a, .feature h3 a, .side-item h5 a{color:inherit;}
  .card h4 a:hover, .feature h3 a:hover, .side-item h5 a:hover{color:var(--accent);}

  /* ---------- Stars, team chips, settings ---------- */
  .star-btn{
    background:none;border:none;cursor:pointer;
    color:var(--text-3);
    font-size:16px;line-height:1;
    padding:2px;
    transition:color 0.15s ease;
  }
  .star-btn.active{color:var(--accent);}
  .star-btn:hover{color:var(--accent);}

  .league-block{margin-bottom:20px;}
  .league-block h4{
    font-family:'Oswald',sans-serif;
    font-size:13px;letter-spacing:0.04em;
    color:var(--accent);
    padding-bottom:8px;border-bottom:1px solid var(--line);
    margin-bottom:10px;
    text-transform:uppercase;
  }
  .team-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(150px,1fr));
    gap:1px;
    background:var(--line);
  }
  .team-chip{
    background:var(--surface-0);
    padding:12px 14px;
    display:flex;align-items:center;justify-content:space-between;
    gap:8px;
    border-left:3px solid var(--chip-color, var(--line));
  }
  .team-chip a{
    font-size:14px;font-weight:500;
    font-family:'Source Serif 4',serif;
    color:var(--text);
  }
  .team-chip a:hover{color:var(--accent);}

  .page-header{
    padding:14px 0 12px;
    border-bottom:2px solid var(--text);
    display:flex;align-items:center;justify-content:space-between;
    flex-wrap:wrap;gap:12px;
  }
  .page-header .back{
    font-family:'Oswald',sans-serif;
    font-size:12px;letter-spacing:0.04em;
    color:var(--text-2);
  }
  .page-header .back:hover{color:var(--accent);}
  .page-title{
    display:flex;align-items:center;gap:12px;
  }
  .page-title h1{font-size:clamp(24px,3.6vw,34px);font-weight:700; text-transform:uppercase;}

  .team-page-header{
    border-bottom:3px solid var(--team-a, var(--accent));
    background: linear-gradient(135deg, color-mix(in srgb, var(--team-a, var(--accent)) 15%, transparent) 0%, transparent 70%);
    margin:0 -24px 14px; padding:16px 24px 12px;
  }
  @media (max-width:880px){.team-page-header{margin:0 -12px 12px; padding:12px 12px 8px;}}

  .settings-panel{
    margin-top:22px;padding-top:16px;border-top:1px solid var(--line);
  }
  .settings-panel h4{
    font-family:'Oswald',sans-serif;font-size:13px;letter-spacing:0.04em;
    color:var(--accent);margin-bottom:10px;
    text-transform:uppercase;
  }
  .toggle-row{
    display:flex;align-items:center;justify-content:space-between;
    padding:9px 0;border-bottom:1px solid var(--line);
    max-width:420px;
  }
  .toggle-row span{font-size:14px;}
  .toggle-row .hint{
    display:block;font-size:12px;color:var(--text-3);margin-top:2px;
  }
  .switch{
    position:relative;width:40px;height:22px;flex-shrink:0;
  }
  .switch input{opacity:0;width:0;height:0;}
  .switch .track{
    position:absolute;inset:0;background:color-mix(in srgb, var(--text) 18%, transparent);
    border-radius:11px;cursor:pointer;transition:background 0.15s ease;
  }
  .switch .track::before{
    content:'';position:absolute;left:3px;top:3px;width:16px;height:16px;
    background:var(--text);border-radius:50%;transition:transform 0.15s ease, background 0.15s ease;
  }
  .switch input:checked + .track{background:var(--accent);}
  .switch input:checked + .track::before{background:var(--accent-ink);}
  .switch input:checked + .track::before{transform:translateX(18px);}

  .btn-primary{
    background:var(--accent);color:var(--accent-ink);border:none;
    font-family:'Oswald',sans-serif;font-weight:600;font-size:13px;
    letter-spacing:0.03em;padding:11px 20px;cursor:pointer;
  }
  .btn-primary:hover{background:color-mix(in srgb, var(--accent) 86%, var(--text));}
  .btn-primary:disabled{opacity:0.5;cursor:default;}

  .team-story{
    padding:12px 0 12px 12px;border-bottom:1px solid var(--line);
    border-left:3px solid var(--team-a, var(--line));
    display:flex; gap:14px;
  }
  .team-story-thumb{
    width:88px;height:88px;flex-shrink:0;border-radius:2px;
    background-color:var(--surface-2); background-size:cover; background-position:center;
  }
  .team-story-body{flex:1; min-width:0;}
  .team-story h4{font-size:18px;font-weight:600;line-height:1.3;}
  .team-story p{font-size:14.5px;color:var(--text-2);margin-top:8px;}
  .team-story .stamp{
    font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:0.05em;
    color:var(--text-3);margin-bottom:8px;
  }
  @media (max-width:520px){.team-story-thumb{display:none;}}

  /* ---------- Affiliate links: deliberately understated, not ad-styled ---------- */
  .shop-links{
    margin:18px 0 8px;
    display:flex;gap:20px;flex-wrap:wrap;
  }
  .shop-link{
    font-family:'Oswald',sans-serif;
    font-size:12.5px;letter-spacing:0.03em;
    color:var(--accent);
    border-bottom:1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    padding-bottom:1px;
  }
  .shop-link:hover{border-bottom-color:var(--accent);}
  .affiliate-note{
    font-size:11px;color:var(--text-3);
    margin-top:2px;
  }

  /* ---------- Team page schedule ---------- */
  .schedule-block{
    display:flex; gap:24px; flex-wrap:wrap;
    margin:12px 0 14px; padding-bottom:12px; border-bottom:1px solid var(--line);
  }
  .schedule-col{flex:1; min-width:200px;}
  .schedule-col h4{
    font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:0.05em;
    color:var(--team-a-text, var(--accent)); margin-bottom:6px; text-transform:uppercase;
  }
  .game-line{
    font-size:13.5px; padding:5px 0; border-bottom:1px solid var(--line);
    display:flex; align-items:center; gap:8px;
  }
  .game-line:last-child{border-bottom:none;}
  .game-status{
    margin-left:auto; font-family:'Oswald',sans-serif; font-size:11px;
    color:var(--text-3);
  }
  .result{
    display:inline-flex; align-items:center; justify-content:center;
    width:18px;height:18px; border-radius:3px; font-family:'Oswald',sans-serif;
    font-size:11px; font-weight:700; flex-shrink:0;
  }
  /* Win = filled, loss = outlined, tie = dashed: distinguishable without hue. */
  .result.w{background:var(--accent); color:var(--accent-ink);}
  .result.l{background:transparent; border:1.5px solid var(--text-3); color:var(--text-2);}
  .result.t{background:transparent; border:1.5px dashed var(--text-3); color:var(--text-2);}

  /* ---------- Sort toggle (Trending / Latest) ---------- */
  .sort-toggle{
    display:flex; gap:2px; margin-bottom:16px;
  }
  .sort-toggle button{
    background:none; border:1px solid var(--line); color:var(--text-2);
    font-family:'Oswald',sans-serif; font-size:11.5px; letter-spacing:0.03em;
    padding:6px 14px; cursor:pointer; text-transform:uppercase;
  }
  .sort-toggle button.active{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
  .sort-toggle button:hover:not(.active){color:var(--text); border-color:var(--line-strong);}

  /* ---------- Back to top ---------- */
  #back-to-top{
    position:fixed; bottom:22px; right:22px; z-index:15;
    width:42px; height:42px; border-radius:50%;
    background:var(--surface-1); border:1px solid var(--line-strong);
    color:var(--text-2);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    opacity:0; transform:translateY(8px); pointer-events:none;
    transition:opacity .18s ease, transform .18s ease, color .15s ease, border-color .15s ease;
  }
  #back-to-top svg{width:18px;height:18px;}
  #back-to-top.visible{opacity:1; transform:translateY(0); pointer-events:auto;}
  #back-to-top:hover{color:var(--accent); border-color:var(--accent);}
  @media (max-width:880px){
    #back-to-top{bottom:16px; right:16px; width:40px; height:40px;}
  }

  /* ---------- Keyboard focus visibility ---------- */
  /* :focus-visible so mouse clicks don't show a ring, only real keyboard nav does. */
  a:focus-visible, button:focus-visible, input:focus-visible,
  .rail-item:focus-visible, .team-chip:focus-visible, .card a:focus-visible,
  .search-result:focus-visible, [tabindex]:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:2px;
  }
  .rail-item:focus-visible{outline-offset:-2px;}
  .star-btn:focus-visible{outline-offset:1px;}
  /* Fallback for browsers without :focus-visible support — still better than invisible focus */
  a:focus, button:focus{outline:2px solid transparent;}

  /* ---------- Popular team suggestions (empty states) ---------- */
  .empty-suggestion{margin-top:6px;}
  .empty-suggestion .empty-label{
    font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:0.04em;
    color:var(--text-3); margin-bottom:12px;
    text-transform:uppercase;
  }
  .popular-teams{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(160px,1fr));
    gap:1px; background:var(--line); margin-top:4px;
  }
  .popular-team-chip{
    background:var(--surface-0); padding:10px 12px;
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    border-left:3px solid var(--chip-color, var(--line));
  }
  .popular-team-chip a{font-size:13px; font-family:'Source Serif 4',serif; color:var(--text);}
  .popular-team-chip a:hover{color:var(--accent);}

  /* ---------- Favorites nav (between team pages) ---------- */
  .favorites-nav{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:12px 0; margin-bottom:8px; border-bottom:1px solid var(--line);
    font-family:'Oswald',sans-serif; font-size:12.5px;
  }
  .favorites-nav .fav-link{
    display:flex; align-items:center; gap:6px;
    color:var(--text-2);
    max-width:42%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  }
  .favorites-nav .fav-link:hover{color:var(--team-a-text, var(--accent));}
  .favorites-nav .fav-link.next{flex-direction:row-reverse; text-align:right;}
  .favorites-nav .fav-count{
    color:var(--text-3); letter-spacing:0.03em;
    flex-shrink:0; font-size:11px;
  }

  /* ---------- Skeleton loading states ---------- */
  @keyframes skeleton-shimmer{
    0%{background-position:-200% 0;}
    100%{background-position:200% 0;}
  }
  .skel{
    background:linear-gradient(90deg,
      color-mix(in srgb, var(--text) 8%, var(--surface-0)) 25%,
      color-mix(in srgb, var(--text) 14%, var(--surface-0)) 37%,
      color-mix(in srgb, var(--text) 8%, var(--surface-0)) 63%);
    background-size:400% 100%;
    animation:skeleton-shimmer 1.4s ease infinite;
    border-radius:2px;
  }
  @media (prefers-reduced-motion: reduce){
    .skel{animation:none;}
  }
  .skel-line{height:12px; margin-bottom:8px;}
  .skel-line.w-60{width:60%;} .skel-line.w-80{width:80%;} .skel-line.w-40{width:40%;}
  .skel-img{aspect-ratio:16/9; width:100%;}
  .skel-card{flex:0 0 250px; display:flex; flex-direction:column; background:var(--surface-0);}
  .skel-card-body{padding:14px 16px;}
  .skel-matchup{flex:0 0 auto; width:170px; height:38px;}
  .skel-hero{display:grid; grid-template-columns:1.4fr 1fr; gap:0; border:1px solid var(--line); margin-bottom:30px;}
  .skel-hero-main{padding:24px; border-right:1px solid var(--line);}
  .skel-hero-side{padding:24px;}
  @media (max-width:820px){.skel-hero{grid-template-columns:1fr;} .skel-hero-main{border-right:none; border-bottom:1px solid var(--line);}}
  .skel-team-story{display:flex; gap:16px; padding:18px 0 18px 14px; border-bottom:1px solid var(--line); border-left:3px solid var(--line);}
  .skel-team-thumb{width:88px; height:88px; flex-shrink:0;}

  /* ---------- Hover / transition polish ---------- */
  a{transition:color .15s ease;}

  .card{
    transition:transform .18s ease, box-shadow .18s ease;
  }
  .card:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 18px rgba(0,0,0,0.18);
  }
  :root[data-theme="light"] .card:hover{box-shadow:0 6px 18px rgba(0,0,0,0.08);}

  .side-item{transition:background .15s ease;}
  .side-item:hover{background:color-mix(in srgb, var(--text) 3%, transparent);}

  .team-story{transition:background .15s ease;}
  .team-story:hover{background:color-mix(in srgb, var(--text) 3%, transparent);}

  .matchup{transition:border-color .15s ease;}
  .matchup:hover{border-color:var(--line-strong);}

  .team-chip, .popular-team-chip{transition:background .15s ease;}
  .team-chip:hover, .popular-team-chip:hover{background:color-mix(in srgb, var(--text) 3%, transparent);}

  .rail-item{transition:background .15s ease, border-color .15s ease, color .15s ease;}

  .feature h3 a{transition:color .15s ease;}

  .icon-btn, .install-pill, .star-btn, .shop-link{transition:color .15s ease, background .15s ease, border-color .15s ease;}

  .search{transition:width .18s ease, border-color .15s ease;}
  .search:focus-within{border-color:var(--accent);}


  /* ---------- League pages ---------- */
  .league-tabs{display:flex; gap:6px; overflow-x:auto; padding:10px 0 6px;}
  .league-tabs a{
    flex:0 0 auto; font-family:'Oswald',sans-serif; font-size:12px; letter-spacing:0.04em; text-transform:uppercase;
    padding:6px 12px; border:1px solid var(--line); color:var(--text-2);
  }
  .league-tabs a:hover{color:var(--text); border-color:var(--line-strong);}
  .league-tabs a.active{background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:600;}
  .league-slate{margin:6px 0 12px;}
  .league-slate .cap{font-family:'Oswald',sans-serif; font-size:11px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; margin-bottom:7px;}
  .league-stories{--team-a:var(--accent);}


/* ================= Uniform stories + league placeholder tiles ================= */
.ph{
  display:flex; align-items:center; justify-content:center;
  background:
    repeating-linear-gradient(135deg, transparent 0 9px, color-mix(in srgb, var(--text) 4%, transparent) 9px 10px),
    var(--surface-2);
  color:color-mix(in srgb, var(--text) 26%, var(--surface-2));
}
.ph span{
  font-family:'Big Shoulders Display','Oswald','Arial Narrow',sans-serif; font-weight:900;
  letter-spacing:0.02em; line-height:1; font-size:34px;
}
.side-thumb.ph span, .team-story-thumb.ph span{font-size:15px;}
.feature-img.ph span{font-size:56px;}
.ph-long span{font-size:.7em; letter-spacing:0.06em;}
.side-thumb, .team-story-thumb{flex-shrink:0; border-radius:3px;}

/* Every story shows the same amount: source line (one line), headline (3 lines), summary (2 lines). */
.card{align-self:stretch;}
.card-body{flex:1; display:flex; flex-direction:column; min-width:0;}
.stamp, .side-item .src{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.card h4, .team-story h4{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; overflow:hidden;}
.card p, .team-story p{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden;}
.side-item h5{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden;}
.feature h3{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; line-clamp:4; overflow:hidden;}
.feature p{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; overflow:hidden;}
.coverage{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* ================= Desktop: horizontal nav bar instead of a side menu ================= */
@media (min-width:881px){
  .shell{flex-direction:column;}
  .main{display:contents;}
  .topbar{order:1;}
  .rail{
    order:2; width:auto; height:auto; flex-direction:row; align-items:center;
    position:sticky; top:56px; z-index:4;
    border-right:none; border-bottom:1px solid var(--line);
    padding:0 22px; background:var(--surface-0);
  }
  .content{order:3; width:100%; margin:0 auto; max-width:1180px;}
  .rail-scroll{display:flex; align-items:center; gap:2px; padding:0; overflow-x:auto; flex:1; scrollbar-width:none;}
  .rail-scroll::-webkit-scrollbar{display:none;}
  .rail-section{display:flex; align-items:center; margin:0;}
  .rail-section + .rail-section{margin-left:10px; padding-left:10px; border-left:1px solid var(--line);}
  .rail-label{display:none;}
  .rail-item{
    height:42px; padding:0 13px; white-space:nowrap;
    border-left:none; border-bottom:2px solid transparent;
  }
  .rail-item.active{background:none; border-bottom-color:var(--accent);}
  .rail-foot{padding:0 0 0 12px;}
  .install-pill{width:auto; padding:7px 10px;}
}

/* Cascade fixes: the base .slate margins (declared later) were beating the phone ones, pushing the
   page 8px wider than the screen; and the hamburger's display was being overridden on desktop. */
@media (max-width:880px){ .slate{margin:-10px -12px 14px; padding:10px 12px;} }
@media (min-width:881px){ .hamburger{display:none !important;} }
@media (min-width:881px){ .slate{margin:0 0 16px; border:1px solid var(--line);} }

.slate[hidden]{display:none;}

/* Menu sizing: phone slide-out hugs its items (was a fixed 224px); desktop nav bar is centered. */
@media (max-width:880px){
  .rail{width:max-content; min-width:150px; max-width:78vw;}
  .rail-item{padding-right:22px;}
}
@media (min-width:881px){
  .rail{justify-content:center;}
  .rail-scroll{flex:0 1 auto;}
  .rail-foot{position:absolute; right:22px; top:50%; transform:translateY(-50%); padding:0;}
}

/* Outlet chooser (public/outlet-picker.js) */
.pick-backdrop{position:fixed; inset:0; z-index:60; background:rgba(0,0,0,0.55); display:flex; align-items:center; justify-content:center; padding:16px;}
.pick-sheet{width:min(520px,100%); max-height:80vh; display:flex; flex-direction:column; background:var(--surface-1); border:1px solid var(--line); border-radius:12px; box-shadow:0 12px 40px rgba(0,0,0,0.45); overflow:hidden;}
.pick-head{display:flex; justify-content:space-between; gap:12px; align-items:flex-start; padding:14px 16px 10px; border-bottom:1px solid var(--line);}
.pick-kicker{font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-3);}
.pick-headline{margin-top:4px; font-weight:600; line-height:1.3; color:var(--text); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; overflow:hidden;}
.pick-close{flex-shrink:0; width:32px; height:32px; border:0; border-radius:8px; background:transparent; color:var(--text-2); font-size:22px; line-height:1; cursor:pointer;}
.pick-close:hover{background:color-mix(in srgb, var(--text) 8%, transparent); color:var(--text);}
.pick-list{overflow-y:auto; padding:6px;}
.pick-item{display:block; padding:10px 12px; border-radius:8px; text-decoration:none; color:var(--text);}
.pick-item:hover, .pick-item:focus-visible{background:color-mix(in srgb, var(--accent) 12%, transparent); outline:none;}
.pick-src{display:block; font-weight:600; font-size:14px;}
.pick-title{display:block; margin-top:2px; font-size:13px; color:var(--text-2); line-height:1.35; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden;}

.feature-img, .card-img, .side-thumb, .team-story-thumb{cursor:pointer;}

/* ---------- Compact lanes: smaller cards, so the next one peeks in and the row clearly scrolls ---------- */
.lane{padding:0 0 10px; margin-bottom:10px;}
.lane-head{margin-bottom:7px;}
.lane-head h3{font-size:14px;}
.card{flex:0 0 172px; scroll-snap-align:start;}
.cards{scroll-snap-type:x proximity; scrollbar-width:none;}
.card-img{aspect-ratio:16/10;}
.card-body{padding:8px 10px;}
.card .stamp{font-size:9.5px; margin-bottom:5px;}
.card h4{font-size:13px; line-height:1.25;}
.card p{font-size:11.5px; line-height:1.4; margin-top:5px;}
@media (max-width:700px){ .card{flex:0 0 150px;} .card h4{font-size:12.5px;} }
.cards-wrap{position:relative;}
.cards-wrap::after{content:''; position:absolute; top:0; right:0; bottom:2px; width:44px; pointer-events:none; background:linear-gradient(to right, transparent, var(--surface-0, #fff) 85%); transition:opacity .2s;}
.cards-wrap.at-end::after, .cards-wrap.no-scroll::after{opacity:0;}
.lane-arrow{position:absolute; top:34%; z-index:2; width:30px; height:44px; border:1px solid var(--line); background:var(--surface-0, #fff); color:var(--text); font-size:22px; line-height:1; cursor:pointer; opacity:0; transition:opacity .15s; padding:0;}
.lane-arrow.left{left:0;} .lane-arrow.right{right:0;}
.lane-arrow[hidden]{display:none;}
.cards-wrap.no-scroll .lane-arrow{display:none;}
@media (hover:hover){ .cards-wrap:hover .lane-arrow{opacity:.92;} }
@media (hover:none){ .lane-arrow{display:none;} }

/* ================= v17: lanes without bars or lag, smaller hero, teams grid, bigger logo ================= */
/* Lane rows: the grey strip under the cards came from a 2px padding on a grey background (and 1px gaps). Gone:
   cards are separated by their own thin border, nothing grey is left over, no scroll-snapping or hover motion. */
.cards{background:none; gap:0; margin:0; padding:0; scroll-snap-type:none; scrollbar-width:none; -ms-overflow-style:none; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;}
.cards::-webkit-scrollbar{display:none; width:0; height:0;}
.card{scroll-snap-align:none; border-right:1px solid var(--line); transition:none;}
.card:hover{transform:none; box-shadow:none;}
.cards-wrap::after{bottom:0; transition:none;}
.lane-arrow{transition:none;}

/* Top Headlines: a tighter block. Desktop shows the lead plus a longer list on the right; phones show the same list. */
.board-grid{margin-bottom:14px;}
.feature{padding:12px 16px 14px;}
.feature-img{width:calc(100% + 32px); margin:-12px -16px 10px -16px; aspect-ratio:24/9;}
.feature .tag{font-size:11px; padding:2px 7px; margin-bottom:8px;}
.feature h3{font-size:clamp(19px,2.3vw,25px); line-height:1.12;}
.feature p{font-size:14px; line-height:1.45; margin-top:8px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden;}
.feature .coverage{margin-top:8px;}
.feature .meta{margin-top:8px;}
.sidelist{padding:12px 16px;}
.sidelist h4{padding-bottom:7px; font-size:12px;}
.side-item{gap:10px; padding:7px 0;}
.side-thumb{width:46px; height:46px;}
.side-item h5{font-size:14px; line-height:1.22; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden;}
.side-item .src{font-size:10.5px; margin-top:4px;}
@media (max-width:820px){
  .feature{padding:10px 12px 12px;}
  .feature-img{width:calc(100% + 24px); margin:-10px -12px 8px -12px; aspect-ratio:16/7;}
  .feature h3{font-size:clamp(18px,5vw,21px);}
  .feature p{font-size:13px; margin-top:6px;}
  .sidelist{padding:10px 12px;}
}

/* Teams grid: separate chips with their own borders. The old grey 1px background showed through as grey bars
   in the empty cells at the end of the last row. */
.team-grid{background:none; gap:8px;}
.team-chip{border:1px solid var(--line); border-left:3px solid var(--chip-color, var(--line));}
.popular-team-chip{border:1px solid var(--line); border-left:3px solid var(--chip-color, var(--line));}
.popular-teams{background:none; gap:8px;}

/* Bigger logo on larger screens (the top bar grows with it). */
@media (min-width:881px){
  .topbar{height:66px;}
  .rail{top:66px;}
  .site-logo .word{height:30px;}
}
@media (min-width:1400px){
  .topbar{height:72px;}
  .rail{top:72px;}
  .site-logo .word{height:34px;}
}

/* ================= v22: smoother lanes on desktop ================= */
/* Below-the-fold lanes are not painted until they are near the screen, and each row scrolls on its own layer. */
.lane{content-visibility:auto; contain-intrinsic-size:auto 330px;}
.cards{will-change:scroll-position; contain:layout paint; scroll-behavior:auto;}
.card{contain:layout paint style;}
@media (hover:hover){ .cards{cursor:grab;} .cards.dragging{cursor:grabbing; user-select:none;} .cards.dragging a{pointer-events:none;} }

/* ================= v23: report button, report sheet, newsletter message ================= */
.report-btn{background:none; border:0; padding:0 2px; margin-left:4px; font-size:11px; line-height:1; color:var(--text-3, #8a8f98); cursor:pointer; opacity:.45; vertical-align:baseline;}
.report-btn:hover, .report-btn:focus-visible{opacity:1; color:var(--accent);}
.report-btn.done{opacity:.9; color:var(--accent); cursor:default;}
@media (hover:hover){ .card .report-btn, .side-item .report-btn, .team-story .report-btn{opacity:0;} .card:hover .report-btn, .side-item:hover .report-btn, .team-story:hover .report-btn, .report-btn.done{opacity:.6;} }
.report-sheet .report-reasons{display:grid; gap:6px; padding:12px 16px 4px;}
.report-sheet label{display:flex; gap:8px; align-items:center; font-size:14px; cursor:pointer;}
.report-sheet textarea{display:block; width:calc(100% - 32px); margin:8px 16px 0; padding:8px; font:inherit; font-size:14px; border:1px solid var(--line); background:var(--surface-0); color:var(--text); resize:vertical;}
.report-actions{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 16px 16px;}
.report-msg{font-size:13px; color:var(--text-2, inherit);}
.report-send{border:0; background:var(--accent); color:#fff; font:inherit; font-weight:600; padding:8px 16px; cursor:pointer;}
.report-send[disabled]{opacity:.6; cursor:default;}
.feast-msg{font-size:13px; margin-top:6px; color:var(--text-2, inherit);}
.feast-msg:empty{display:none;}

/* ================= v24: intros, related teams, daily archive, widget, team email box ================= */
.ssr-intro{font-family:'Source Serif 4',serif; font-size:15px; line-height:1.55; color:var(--text-2, inherit); margin:4px 0 14px; max-width:70ch;}
.related-teams{margin:22px 0 8px; padding-top:14px; border-top:1px solid var(--line);}
.related-teams h4{font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.04em; font-size:13px; margin:0 0 8px;}
.related-links{display:flex; flex-wrap:wrap; gap:8px;}
.related-links a{border:1px solid var(--line); padding:5px 10px; font-size:13px; color:var(--text); text-decoration:none;}
.related-links a:hover{border-color:var(--accent); color:var(--accent);}
.related-more{font-size:13px; margin:12px 0 0;} .related-more a{color:var(--accent);}
.team-cta{margin-top:24px; border-top:1px solid var(--line);}
.daily-list{list-style:none; counter-reset:dl; padding:0; margin:0 0 18px;}
.daily-item{counter-increment:dl; position:relative; padding:14px 0 14px 44px; border-bottom:1px solid var(--line);}
.daily-item::before{content:counter(dl); position:absolute; left:0; top:12px; font:900 28px/1 'Big Shoulders Display',sans-serif; color:var(--accent);}
.daily-item h3{font-size:18px; line-height:1.25; margin:2px 0 0;} .daily-item h3 a{color:var(--text); text-decoration:none;} .daily-item h3 a:hover{color:var(--accent);}
.daily-item p{font-family:'Source Serif 4',serif; font-size:14.5px; color:var(--text-2, inherit); margin:6px 0 0;}
.daily-league{color:var(--accent); font-weight:600;}
.daily-nav{display:flex; justify-content:space-between; gap:12px; margin:8px 0 22px; font-size:14px;} .daily-nav a{color:var(--accent);}
.daily-index{list-style:none; padding:0; margin:0;} .daily-index li{padding:10px 0; border-bottom:1px solid var(--line);}
.daily-index a{font-weight:600; color:var(--text); display:block;} .daily-index span{font-size:13px; color:var(--text-2, inherit);}
.widget-builder{max-width:720px;}
.widget-controls{display:flex; flex-wrap:wrap; gap:12px; margin:8px 0 14px;}
.widget-controls label{display:flex; flex-direction:column; gap:4px; font-size:12px; text-transform:uppercase; letter-spacing:.04em;}
.widget-controls select{font:inherit; font-size:14px; padding:6px 8px; border:1px solid var(--line); background:var(--surface-0); color:var(--text); text-transform:none; letter-spacing:0;}
.widget-preview iframe{width:100%; max-width:420px; border:0; display:block; margin-bottom:14px;}
.widget-code-label{display:block; font-size:13px; margin-bottom:4px;}
#w-code{width:100%; font:12.5px/1.45 ui-monospace,Menlo,monospace; padding:10px; border:1px solid var(--line); background:var(--surface-1, var(--surface-0)); color:var(--text); margin-bottom:10px;}
.meta-note{font-size:13px; color:var(--text-2, inherit);}
footer a{color:inherit;}

/* ================= v25: Catch me up ================= */
.sort-toggle .catchup-btn{margin-left:auto;}
.catchup-banner{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 14px; margin:0 0 12px; border:1px solid var(--accent); border-left-width:4px; background:var(--surface-1, var(--surface-0)); font-size:14px;}
.catchup-banner[hidden]{display:none;}
.catchup-banner span{flex:1; min-width:180px;}
.catchup-go{border:0; background:var(--accent); color:#fff; font:500 12.5px 'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.04em; padding:7px 12px; cursor:pointer;}
.catchup-dismiss, .catchup-close{border:0; background:none; color:inherit; font-size:20px; line-height:1; cursor:pointer; padding:0 4px;}
.catchup{border:1px solid var(--line); border-top:4px solid var(--accent); padding:12px 16px 4px; margin:0 0 18px; background:var(--surface-0);}
.catchup[hidden]{display:none;}
.catchup-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:6px;}
.catchup-head h3{font-family:'Oswald',sans-serif; text-transform:uppercase; font-size:18px; margin:0;}
.catchup-sub{font-size:13px; color:var(--text-2, inherit); margin-top:2px;}
.catchup-label{font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.04em; font-size:12.5px; color:var(--accent); margin:14px 0 4px;}
.catchup-foot{text-align:center; padding:10px 0;}
.catchup-foot .catchup-close{font-size:14px; font-weight:600; border:1px solid var(--line); padding:6px 14px;}
.sort-toggle .catchup-btn[hidden]{display:none;}

/* ================= v26: city and topic hubs ================= */
.hub-h2{font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.03em; font-size:17px; margin:26px 0 8px; padding-bottom:6px; border-bottom:2px solid var(--accent);}
.snap-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px;}
.snap-card{display:flex; flex-direction:column; gap:4px; padding:12px; border:1px solid var(--line); border-top:3px solid var(--accent); text-decoration:none; color:var(--text); background:var(--surface-0); min-height:128px;}
.snap-card:hover{border-color:var(--accent);}
.snap-league{font:500 10.5px 'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.06em; color:var(--accent);}
.snap-team{font:600 16px 'Oswald',sans-serif; text-transform:uppercase;}
.snap-latest{font-size:13.5px; line-height:1.35; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; overflow:hidden;}
.snap-meta{font-size:11.5px; color:var(--text-2, inherit); margin-top:auto;}
.hub-team{margin:14px 0 20px;}
.hub-team h3{font:600 15px 'Oswald',sans-serif; text-transform:uppercase; margin:0 0 4px;} .hub-team h3 a{color:var(--text); text-decoration:none;}
.hub-more{display:inline-block; font-size:13px; color:var(--accent); margin-top:6px;}
.hub-index{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:10px; margin:10px 0 24px;}
.hub-index-card{display:flex; flex-direction:column; gap:4px; padding:12px 14px; border:1px solid var(--line); text-decoration:none; color:var(--text);}
.hub-index-card:hover{border-color:var(--accent);}
.hub-index-card b{font:600 16px 'Oswald',sans-serif; text-transform:uppercase;}
.hub-index-card b em{font:500 10px 'Oswald',sans-serif; font-style:normal; background:var(--accent); color:#fff; padding:2px 6px; margin-left:6px; vertical-align:middle;}
.hub-index-card span{font-size:13px; color:var(--text-2, inherit);}
.topic-meta{font-size:13.5px; color:var(--text-2, inherit); margin:0 0 6px;}
.topic-status{display:inline-block; font:500 11px 'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.05em; padding:2px 7px; border:1px solid var(--line); margin-right:6px;}
.topic-status.on{background:var(--accent); border-color:var(--accent); color:#fff;}
.topic-teams{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:10px;}
.topic-team{border:1px solid var(--line); padding:10px 12px;}
.topic-team-head{display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:4px;}
.topic-team-head a{font:600 14.5px 'Oswald',sans-serif; text-transform:uppercase; color:var(--text); text-decoration:none;}
.topic-team-head span{font-size:12px; color:var(--accent); white-space:nowrap;}
.topic-team ul{list-style:none; margin:0; padding:0;} .topic-team li{font-size:13.5px; line-height:1.35; padding:4px 0; border-top:1px solid var(--line);}
.topic-team li a{color:var(--text); text-decoration:none;} .topic-team li a:hover{color:var(--accent);} .topic-team li span{font-size:11px; color:var(--text-2, inherit);}

/* ================= v27: the same menu and search on every page ================= */
.page-content > .wrap{max-width:none; margin:0; padding:0;}
.page-content{padding-top:16px;}
@media (max-width:880px){ .page-content{padding-top:10px;} }

/* ================= v28: team pulse, the big story, story tabs, league heatmap ================= */
.team-pulse{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 18px; margin:2px 0 12px; padding:10px 14px; border:1px solid var(--line); border-left:4px solid var(--team-a, var(--accent)); background:var(--surface-1, var(--surface-0));}
.pulse-stats{display:flex; flex-wrap:wrap; gap:6px 16px; font-size:13.5px; color:var(--text-2, inherit);}
.pulse-stats b{font:600 16px 'Oswald',sans-serif; color:var(--text);}
.trend{font:500 12.5px 'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.03em; padding:2px 7px; border:1px solid var(--line);}
.trend.up{color:#fff; background:var(--accent); border-color:var(--accent);}
.trend.down{color:var(--text-2, inherit);}
.pulse-spark{display:flex; align-items:center; gap:6px; color:var(--team-a-text, var(--accent));}
.spark-label{font-size:11px; color:var(--text-3, var(--text-2, inherit)); text-transform:uppercase; letter-spacing:.05em;}
.big-story{border:1px solid var(--line); border-top:4px solid var(--team-a, var(--accent)); padding:12px 14px; margin:6px 0 14px; background:var(--surface-0);}
.big-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;}
.big-tag{font:600 12px 'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.06em; color:var(--team-a-text, var(--accent));}
.big-count{font-size:12px; color:var(--text-2, inherit);}
.big-main{display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start;}
.big-img{width:150px; aspect-ratio:16/10; background-size:cover; background-position:center; background-color:var(--surface-2);}
.big-main h2{font-size:20px; line-height:1.2; margin:0;} .big-main h2 a{color:var(--text); text-decoration:none;} .big-main h2 a:hover{color:var(--accent);}
.big-main p{font-family:'Source Serif 4',serif; font-size:14px; color:var(--text-2, inherit); margin:6px 0 0;}
@media (max-width:600px){ .big-main{grid-template-columns:1fr;} .big-img{width:100%;} }
.big-timeline{margin-top:10px;} .big-timeline summary{cursor:pointer; font:500 13px 'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.04em; color:var(--accent);}
.big-timeline ol{list-style:none; margin:8px 0 0; padding:0 0 0 12px; border-left:2px solid var(--line);}
.big-timeline li{position:relative; padding:5px 0 5px 12px; font-size:13.5px; line-height:1.35;}
.tl-dot{position:absolute; left:-18px; top:10px; width:10px; height:10px; border-radius:50%; background:var(--team-a, var(--accent));}
.tl-time{display:block; font-size:11px; color:var(--text-2, inherit); text-transform:uppercase; letter-spacing:.04em;}
.big-timeline li a{color:var(--text); text-decoration:none;} .big-timeline li a:hover{color:var(--accent);} .big-timeline em{font-style:normal; font-size:11px; color:#fff; background:var(--accent); padding:1px 5px; margin-left:2px;}
.story-tabs{display:flex; gap:6px; flex-wrap:wrap; margin:14px 0 4px;}
.story-tabs:empty{display:none;}
.story-tabs button{border:1px solid var(--line); background:transparent; color:var(--text-2, inherit); font:500 12.5px 'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.03em; padding:5px 11px; cursor:pointer;}
.story-tabs button span{opacity:.6; margin-left:3px;}
.story-tabs button.active{background:var(--team-a, var(--accent)); border-color:var(--team-a, var(--accent)); color:#fff;}
.team-story[hidden]{display:none;}
.heatmap{margin:10px 0 18px;}
.heat-head{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px;}
.heat-head .hub-h2{margin-top:6px; flex:1;}
.heat-legend{font-size:12px; color:var(--text-2, inherit);}
.heat-hot{font-size:13.5px; margin:4px 0 8px;} .heat-hot a{color:var(--accent);}
.heat-group{font:500 11.5px 'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.05em; color:var(--text-2, inherit); margin:10px 0 4px;}
.heat-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:6px;}
.heat-tile{display:flex; flex-direction:column; gap:2px; padding:8px 9px; text-decoration:none; color:var(--text); border:1px solid var(--line);
  background:color-mix(in srgb, var(--accent) calc(var(--heat) * 0.55), var(--surface-0));}
.heat-tile:hover{outline:2px solid var(--accent); outline-offset:-2px;}
.heat-name{font:600 13px 'Oswald',sans-serif; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.heat-n{font-size:12px;}
.heat-divs{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:4px 16px;}
.heat-divs.single{display:block;}
.heat-div .heat-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));}
.heat-div .heat-group{margin-top:8px;}

/* ================= v29: games, odds and standings (public/espn.js, games.js) ================= */
.g-card{flex:0 0 auto; width:176px; background:var(--surface-2); border:1px solid var(--line); padding:8px 10px; display:flex; flex-direction:column; gap:4px;}
.g-card.is-live{border-color:var(--signal);}
.g-head{display:flex; justify-content:space-between; gap:6px; font-family:'Oswald',sans-serif; font-size:10.5px; letter-spacing:0.04em; text-transform:uppercase; color:var(--text-3);}
.g-lg{font-weight:600; color:var(--accent);}
.g-status{margin-left:auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.g-live{color:var(--signal); font-weight:700;}
.g-live::before{content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--signal); margin-right:5px; vertical-align:1px; animation:g-pulse 1.4s infinite;}
@keyframes g-pulse{50%{opacity:.25;}}
@media (prefers-reduced-motion:reduce){.g-live::before{animation:none;}}
.g-team{display:flex; align-items:center; gap:7px; font-family:'Oswald',sans-serif; font-size:13.5px; font-weight:500; min-width:0;}
.g-team.won{font-weight:700;}
.g-logo{width:18px; height:18px; flex-shrink:0; object-fit:contain;}
.g-name{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.g-name a{color:inherit; text-decoration:none;}
.g-name a:hover{text-decoration:underline;}
.g-rank{font-size:10px; color:var(--text-3); margin-right:3px; font-weight:400;}
.g-score{font-variant-numeric:tabular-nums;}
.g-rec{font-size:11px; color:var(--text-3); font-weight:400;}
.g-foot{font-size:11px; color:var(--text-3); border-top:1px solid var(--line); padding-top:4px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.slate-row .g-card, #league-slate-row .g-card{scroll-snap-align:start;}
.slate-row{scroll-snap-type:x proximity;}

/* team page: record, form, live / next / last game, division table */
.team-games{margin:12px 0 16px; display:grid; gap:12px;}
.team-card-games{border:1px solid var(--line); border-left:4px solid var(--team-a, var(--accent)); background:var(--surface-1); padding:10px 14px;}
.tc-head{font-family:'Oswald',sans-serif; font-size:14px; margin-bottom:8px;}
.tc-form{margin-left:8px; display:inline-flex; gap:3px; vertical-align:1px;}
.tc-form i{font-style:normal; font-size:10px; font-weight:700; width:16px; height:16px; display:inline-grid; place-items:center; color:#fff; background:var(--text-3);}
.tc-form i.w{background:#1f9d55;} .tc-form i.l{background:#c23b3b;}
.tc-row{display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:10px;}
.tc-cell{display:flex; flex-direction:column; gap:2px;}
.tc-k{font-size:10.5px; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-3);}
.tc-v{font-family:'Oswald',sans-serif; font-size:16px; font-weight:600;}
.tc-s{font-size:12px; color:var(--text-3);}
.tc-live .tc-k{color:var(--signal); font-weight:700;}
.tc-res{display:inline-block; padding:0 5px; color:#fff; font-size:12px; margin-right:2px;}
.tc-res.w{background:#1f9d55;} .tc-res.l{background:#c23b3b;} .tc-res.t{background:var(--text-3);}

/* standings tables */
.standings{margin:22px 0;}
.standings .st-body{display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:12px; align-items:start;}
.st-note{font-size:11.5px; color:var(--text-3); margin-top:8px;}
.st-group{border:1px solid var(--line); background:var(--surface-1);}
.st-group > summary{cursor:pointer; padding:8px 12px; font-family:'Oswald',sans-serif; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:0.04em;}
.st-scroll{overflow-x:auto;}
.st-table{width:100%; border-collapse:collapse; font-size:13px; font-variant-numeric:tabular-nums;}
.st-table th{font-size:10.5px; font-weight:600; color:var(--text-3); text-align:right; padding:4px 8px; border-bottom:1px solid var(--line);}
.st-table th:first-child{text-align:left;}
.st-table td{text-align:right; padding:5px 8px; border-bottom:1px solid var(--line); white-space:nowrap;}
.st-table tr:last-child td{border-bottom:0;}
.st-team{text-align:left !important; width:46%;}
.st-cell{display:flex; align-items:center; gap:7px;}
.st-team img{width:16px; height:16px; object-fit:contain;}
.st-team a{color:inherit; text-decoration:none;} .st-team a:hover{text-decoration:underline;}
.st-pos{width:14px; color:var(--text-3); font-size:11px;}
.st-table tr.me td{background:color-mix(in srgb, var(--team-a, var(--accent)) 14%, transparent); font-weight:700;}
@media (max-width:600px){ .standings .st-body{grid-template-columns:1fr;} .st-table{font-size:12px;} .st-table td,.st-table th{padding:4px 6px;} }
.standings .section-h{font-family:'Oswald',sans-serif; font-size:17px; font-weight:600; text-transform:uppercase; letter-spacing:0.03em; margin:0 0 10px;}

/* ================= v30: team logos and league leaders ================= */
.page-title .team-logo{width:56px; height:56px; object-fit:contain; flex-shrink:0;}
@media (max-width:600px){ .page-title .team-logo{width:40px; height:40px;} }
.team-chip .chip-logo{width:20px; height:20px; object-fit:contain; vertical-align:-5px; margin-right:7px;}
.section-more{float:right; font-size:12px; font-weight:500; text-transform:none; letter-spacing:0; color:var(--accent); text-decoration:none; margin-top:4px;}
.section-more:hover{text-decoration:underline;}
.leaders-box{margin:22px 0;}
.ld-section{font-family:'Oswald',sans-serif; font-size:16px; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; margin:22px 0 10px; padding-bottom:6px; border-bottom:2px solid var(--accent);}
.ld-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); gap:12px; align-items:start;}
.ld-card{border:1px solid var(--line); background:var(--surface-1); padding:10px 12px;}
.ld-card h3{font-family:'Oswald',sans-serif; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; color:var(--text-3); margin:0 0 6px;}
.ld-card ol{list-style:none; margin:0; padding:0;}
.ld-card li{display:flex; align-items:center; gap:9px; padding:5px 0; border-top:1px solid var(--line);}
.ld-card li:first-child{border-top:0;}
.ld-card li.me{background:color-mix(in srgb, var(--accent) 12%, transparent);}
.ld-rank{width:16px; font-size:11px; color:var(--text-3); text-align:right; flex-shrink:0;}
.ld-head{width:36px; height:36px; border-radius:50%; object-fit:cover; background:var(--surface-2); flex-shrink:0;}
.ld-who{flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.25;}
.ld-who b{font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ld-who small{font-size:11.5px; color:var(--text-3);}
.ld-who small a{color:inherit;}
.ld-val{font-family:'Oswald',sans-serif; font-size:16px; font-weight:600; font-variant-numeric:tabular-nums; text-align:right; display:flex; flex-direction:column;}
.ld-val small{font-family:inherit; font-size:10.5px; font-weight:400; color:var(--text-3);}
.ld-top .ld-head{width:48px; height:48px;}
.ld-top .ld-who b{font-size:15px;}
.ld-top .ld-val{font-size:20px; color:var(--accent);}
.ld-tabs{margin-bottom:12px;}
.ld-tabs a.active{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:700;}
.ld-empty{color:var(--text-3); font-style:italic; margin:20px 0;}
.tl-list{list-style:none; margin:0; padding:0; display:grid; gap:4px;}
.tl-list li{font-size:14px; padding:6px 10px; border-left:3px solid var(--team-a, var(--accent)); background:var(--surface-1);}
.tl-list li span{color:var(--text-3);}

/* v31: a tighter What's On Today bar on phones */
@media (max-width:600px){
  .slate{margin:-10px -12px 10px; padding:7px 12px 8px;}
  .slate-head{margin-bottom:5px;}
  .slate-head h2{font-size:11.5px;}
  .slate-row{gap:6px;}
  .g-card{width:132px; padding:5px 7px; gap:2px;}
  .g-head{font-size:9.5px;}
  .g-team{font-size:12.5px; gap:5px;}
  .g-logo{width:14px; height:14px;}
  .g-rec{font-size:10px;}
  .g-foot{font-size:9.5px; padding-top:3px; margin-top:1px;}
  #league-slate-row .g-card{width:132px;}
}

/* v34: every card in a side-scrolling row is exactly the same size. A long headline (or an unbreakable word)
   used to widen its card to fit, and the picture grew with it. Width is now fixed, long words wrap, the picture
   is a fixed shape, and the title and summary reserve the same number of lines. */
.cards .card{--card-w:172px; flex:0 0 var(--card-w); width:var(--card-w); min-width:0; max-width:var(--card-w); overflow:hidden;}
@media (max-width:700px){ .cards .card{--card-w:150px;} }
.cards .card > .card-img{width:100%; aspect-ratio:16/10; height:auto; flex:none;}
.cards .card h4, .cards .card p{overflow-wrap:anywhere; word-break:break-word;}
.cards .card h4{min-height:calc(3 * 1.25em);}
.cards .card p{min-height:calc(2 * 1.4em);}

/* v35: leaders seasons, and a smaller What's On Today bar on desktop too */
.ld-season{font-family:'Oswald',sans-serif; font-size:11px; font-weight:500; letter-spacing:0.04em; color:var(--text-3); margin-left:6px; text-transform:uppercase;}
.ld-season.last{color:#b45309;}
.ld-note{border-left:4px solid #d97706; background:color-mix(in srgb, #d97706 10%, transparent); padding:8px 12px; font-size:13.5px; margin:4px 0 12px;}
.ld-sub{margin-top:-4px;}
@media (min-width:601px){
  .slate{padding:8px 20px 9px;}
  .slate-head{margin-bottom:6px;}
  .slate-head h2{font-size:12px;}
  .slate-row{gap:8px;}
  .g-card{width:150px; padding:6px 8px; gap:3px;}
  .g-head{font-size:10px;}
  .g-team{font-size:12.5px; gap:6px;}
  .g-logo{width:15px; height:15px;}
  .g-rec{font-size:10.5px;}
  .g-foot{font-size:10px; padding-top:3px;}
}

/* v36: the storyline ("How it unfolded") — chapters of different stories, the big story highlighted */
.arc-head{font:500 13px 'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.04em; color:var(--accent);}
.arc-head span{color:var(--text-3); margin-left:6px;}
.big-timeline.arc li{padding:7px 0 9px 12px;}
.tl-meta{display:flex; gap:8px; align-items:baseline;}
.tl-label{font:600 11.5px 'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.05em; color:var(--team-a-text, var(--accent));}
.big-timeline .tl-meta .tl-time{display:inline;}
.big-timeline.arc li > a{display:block; font-weight:600; margin-top:1px;}
.tl-src{display:block; font-size:11.5px; color:var(--text-3); margin-top:1px;}
.big-timeline li.tl-anchor .tl-dot{width:14px; height:14px; left:-20px; top:9px; box-shadow:0 0 0 3px color-mix(in srgb, var(--team-a, var(--accent)) 25%, transparent);}
.big-timeline li.tl-anchor > a{color:var(--text);}
.big-timeline.arc em{font-style:normal; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:#fff; background:var(--team-a, var(--accent)); padding:1px 5px; margin-right:4px;}

/* v36.2: legal pages and the footer that links them from every page */
.legal{max-width:46rem; font-size:15.5px; line-height:1.65; margin-bottom:28px;}
.legal h2{font-family:'Oswald',sans-serif; font-size:17px; text-transform:uppercase; letter-spacing:.03em; margin:22px 0 6px;}
.legal ul{padding-left:20px;} .legal li{margin:6px 0;} .legal p{margin:8px 0;}
.site-legal{border-top:1px solid var(--line); margin:28px auto 0; padding:16px 20px 28px; max-width:1180px; font-size:12.5px; color:var(--text-3); display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:space-between;}
.site-legal nav{display:flex; flex-wrap:wrap; gap:6px 16px;}
.site-legal a{color:inherit; text-decoration:none;} .site-legal a:hover{color:var(--accent); text-decoration:underline;}

/* v37: page explanations live at the bottom ("About this page"), visible; the home page's logo is its h1 */
.page-about{max-width:1180px; margin:28px auto 0; padding:18px 24px 4px; border-top:1px solid var(--line);}
.page-about h2{font-family:'Oswald',sans-serif; font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--text-3); margin:0 0 8px;}
.page-about .ssr-intro{font-size:13.5px; color:var(--text-3); margin:0 0 8px; max-width:80ch;}
.page-about .related-more{font-size:13px; margin:0 0 8px;}
.page-about a{color:inherit; text-decoration:underline; text-decoration-color:color-mix(in srgb, currentColor 35%, transparent);}
@media (max-width:880px){ .page-about{padding:16px 12px 4px;} }
.ssr-lead{font-family:'Source Serif 4',serif; font-size:15px; line-height:1.55; color:var(--text-2, inherit); margin:4px 0 14px; max-width:70ch;}
.site-logo-h1{margin:0; font:inherit; line-height:inherit; display:contents;}

/* v37.3: the Install App button sits pinned to the right of the desktop menu bar; the centered menu used to slide
   UNDER it at in-between widths. The bar now reserves the button's space on both sides (so the menu stays
   centered), and below 1280px the button shows only its icon and menu items tighten. */
@media (min-width:881px){
  .rail{padding-left:150px; padding-right:150px;}
}
@media (min-width:881px) and (max-width:1279px){
  .rail{padding-left:56px; padding-right:56px;}
  .rail-foot{right:12px;}
  .install-pill span{display:none;}
  .install-pill{padding:7px 8px;}
  .rail-item{padding:0 9px;}
  .rail-section + .rail-section{margin-left:6px; padding-left:6px;}
}
@media (min-width:881px) and (max-width:1000px){
  .rail{padding-left:48px; padding-right:48px;}
  .rail-item{padding:0 7px; font-size:13px;}
  .rail-section + .rail-section{margin-left:4px; padding-left:4px;}
}

/* v39: performance + accessibility
   - the report flag and other small buttons get a 24px tap area (WCAG target size) without looking bigger
   - What's On Today keeps its space while it loads (it used to appear and push the page down: layout shift) */
.report-btn{min-width:24px; min-height:24px; display:inline-flex; align-items:center; justify-content:center; padding:0 4px;}
.slate.loading{min-height:118px;}
@media (max-width:600px){ .slate.loading{min-height:96px;} }
[data-bg]{background-color:var(--surface-2);}

/* Tapped a menu link: a thin moving bar at the top until the next page appears (public/chrome.js). */
html.nav-loading::before{content:"";position:fixed;top:0;left:0;height:3px;width:40%;z-index:9999;background:var(--accent);
  animation:navload 1s ease-in-out infinite;}
@keyframes navload{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}
@media (prefers-reduced-motion:reduce){html.nav-loading::before{animation:none;width:100%;opacity:.6}}

/* Lead story: why it is first (src/render.js whyTags, public/app.js renderHero). */
.why-tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:8px 0 2px;}
.why-label{font:700 11px/1 'Oswald','Arial Narrow',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin-right:2px;}
.why-tag{font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;font-size:12px;line-height:1;padding:5px 8px;border-radius:999px;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--text,inherit);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);}
.how-rank{font-size:13px;line-height:1.5;color:var(--text-3);margin:0 0 14px;}
.how-rank a{color:var(--accent);font-weight:600;text-decoration:none;}
.nowrap{white-space:nowrap;}

/* ---------- Build your feast (public/onboard.js) ---------- */
html.ob-lock{overflow:hidden;}
.ob-back{position:fixed;inset:0;z-index:10000;display:none;align-items:center;justify-content:center;padding:16px;
  background:rgba(5,8,11,.72);backdrop-filter:blur(3px);}
.ob-back.open{display:flex;}
.ob{position:relative;width:100%;max-width:640px;max-height:min(88vh,760px);display:flex;flex-direction:column;
  background:var(--surface-1);color:var(--text);border:1px solid var(--line-strong);border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.45);overflow:hidden;}
.ob-step{display:flex;flex-direction:column;min-height:0;padding:22px 22px 0;}
.ob-step[hidden]{display:none;}
.ob-done{padding-bottom:4px;}
.ob h2{font:700 28px/1.1 'Oswald','Arial Narrow',sans-serif;letter-spacing:.01em;margin:0 36px 6px 0;}
.ob h2::after{content:"";display:block;width:44px;height:4px;border-radius:2px;margin-top:8px;background:var(--accent);}
.ob-sub{font-size:14.5px;line-height:1.5;color:var(--text-2);margin:6px 0 12px;}
.ob-x{position:absolute;top:10px;right:10px;width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:var(--text-2);font-size:26px;line-height:1;cursor:pointer;}
.ob-x:hover{background:var(--surface-2);color:var(--text);}
.ob-search{width:100%;box-sizing:border-box;padding:12px 14px;font-size:16px;border-radius:10px;border:1px solid var(--line-strong);background:var(--surface-0,var(--surface-2));color:var(--text);}
.ob-search:focus{outline:2px solid var(--accent);outline-offset:1px;}
.ob-tabs{display:flex;gap:6px;overflow-x:auto;padding:12px 0 10px;scrollbar-width:none;}
.ob-tabs::-webkit-scrollbar{display:none;}
.ob-tab{flex:none;padding:8px 13px;min-height:36px;border-radius:999px;border:1px solid var(--line-strong);background:transparent;color:var(--text-2);font-size:13.5px;font-weight:600;cursor:pointer;}
.ob-tab.on{background:var(--text);color:var(--surface-1);border-color:var(--text);}
.ob-grid{flex:1;min-height:120px;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;padding:2px 2px 14px;align-content:start;}
.ob-chip{display:flex;align-items:center;gap:9px;min-height:46px;padding:8px 12px;border-radius:10px;border:1px solid var(--line-strong);
  background:var(--surface-2);color:var(--text);font-size:14px;text-align:left;cursor:pointer;transition:border-color .12s,background .12s;}
.ob-chip:hover{border-color:var(--text-3);}
.ob-chip.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--surface-2));}
.ob-dot{flex:none;width:12px;height:12px;border-radius:50%;background:var(--text-3);box-shadow:0 0 0 2px color-mix(in srgb,var(--text) 15%,transparent);}
.ob-name{flex:1;line-height:1.25;}
.ob-check{flex:none;font-size:17px;color:var(--text-3);}
.ob-chip.on .ob-check{color:var(--accent);}
.ob-empty{grid-column:1/-1;color:var(--text-3);font-size:14px;margin:12px 2px;}
.ob-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 0 18px;border-top:1px solid var(--line);}
.ob-count{font-size:13.5px;color:var(--text-2);}
.ob-actions{display:flex;gap:8px;margin-left:auto;}
.ob-skip{padding:11px 14px;border:0;background:transparent;color:var(--text-2);font-size:14px;font-weight:600;cursor:pointer;border-radius:10px;}
.ob-skip:hover{color:var(--text);background:var(--surface-2);}
.ob-go{display:inline-flex;align-items:center;padding:11px 18px;border:0;border-radius:10px;background:var(--accent);color:var(--accent-ink);font-size:14.5px;font-weight:700;cursor:pointer;text-decoration:none;}
.ob-go:disabled{opacity:.45;cursor:default;}
@media (max-width:600px){
  .ob-back{padding:0;align-items:flex-end;}
  .ob{max-width:none;max-height:92vh;border-radius:16px 16px 0 0;}
  .ob-step{padding:18px 16px 0;}
  .ob h2{font-size:24px;}
  .ob-grid{grid-template-columns:1fr 1fr;}
  .ob-chip{font-size:13.5px;padding:8px 10px;}
}

/* My Feast row with no teams yet: one big button. */
.feast-build{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;width:100%;min-height:120px;
  padding:22px 24px;border:2px dashed color-mix(in srgb,var(--accent) 55%,transparent);border-radius:14px;cursor:pointer;text-align:left;
  background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 16%,var(--surface-1)),var(--surface-1) 70%);color:var(--text);}
.feast-build:hover{border-style:solid;}
.feast-build-title{display:inline-flex;align-items:center;gap:10px;font:700 26px/1.1 'Oswald','Arial Narrow',sans-serif;letter-spacing:.01em;}
.feast-build-title::before{content:"+";display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font:700 24px/1 Arial,sans-serif;}
.feast-build-sub{font-size:14.5px;color:var(--text-2);line-height:1.45;}
#my-feast-cards:has(.feast-build){display:block;}

.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;}

/* One-tap alerts card (My Feast) */
.alerts-card{display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin:16px 0; padding:16px 18px; border:1px solid var(--line); border-left:4px solid var(--accent); background:var(--surface-1);}
.alerts-card[hidden]{display:none;}
.alerts-card h3{margin:0 0 4px; font-size:18px;}
.alerts-card p{margin:0; font-size:14px; color:var(--text-2); max-width:56ch;}
.alerts-card .ac-go{background:var(--accent); color:var(--accent-ink); border:0; padding:11px 20px; font:700 14px/1 inherit; cursor:pointer;}
.alerts-card .ac-go:disabled{opacity:.6;}
.alerts-card .ac-msg{font-size:12.5px; color:var(--text-3); margin-top:6px; max-width:30ch;}
.alerts-card .ac-done a{color:var(--accent); font-weight:600;}

/* /scores: the slate wraps into a grid instead of one scrolling row */
.slate-row.slate-wrap{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px; overflow:visible;}

/* Team page: visible FAQ under the news list */
.team-faq{margin:28px 0 8px; max-width:68ch;}
.team-faq h4{font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); margin:0 0 8px;}
.team-faq h5{font-size:15px; margin:14px 0 4px;}
.team-faq p{margin:0; font-size:14px; line-height:1.55; color:var(--text-2);}

/* ---------- Pick'Em ---------- */
.pk-hero{padding:22px 20px; border:1px solid var(--line); border-left:4px solid var(--accent); background:var(--surface-1); margin:16px 0;}
.pk-hero h2{margin:0 0 8px; font-size:clamp(22px,4vw,30px); line-height:1.1;}
.pk-hero p{margin:0 0 16px; color:var(--text-2); max-width:60ch;}
.pk-form label{display:block; font-size:13px; font-weight:700; margin-bottom:6px;}
.pk-row{display:flex; gap:8px; flex-wrap:wrap;}
.pk-row input,.pk-bh select{flex:1 1 180px; min-width:0; padding:11px 12px; font:inherit; background:var(--surface-0); color:var(--text); border:1px solid var(--line-strong);}
.pk-msg{font-size:13px; color:var(--text-3); margin-top:6px; min-height:1em;} .pk-msg.err{color:var(--signal);}
.pk-login{margin-top:14px; font-size:14px;} .pk-login summary{cursor:pointer; color:var(--accent); font-weight:600;} .pk-login form{margin-top:10px;}
.pk-link{background:none; border:0; padding:0; color:var(--accent); font:inherit; font-weight:600; cursor:pointer; text-decoration:underline;}
.pk-recovery{padding:18px; border:2px solid var(--accent); background:var(--surface-1); margin:16px 0;}
.pk-recovery h3{margin:0 0 6px;} .pk-code{font:700 clamp(22px,6vw,32px)/1.2 ui-monospace,Menlo,Consolas,monospace; letter-spacing:.08em; margin:12px 0; word-break:break-all;}
.pk-strip{list-style:none; margin:16px 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:8px;}
.pk-strip li{padding:12px; border:1px solid var(--line); background:var(--surface-1); display:flex; flex-direction:column; gap:2px;}
.pk-strip b{font-size:24px; line-height:1;} .pk-strip span{font-size:12px; color:var(--text-3);} .pk-strip li.hot{border-color:var(--accent); background:color-mix(in srgb, var(--accent) 14%, var(--surface-1));}
.pk-strip .pk-who b{font-size:16px; overflow:hidden; text-overflow:ellipsis;}
.pk-share{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:14px;}
.pk-tabs{margin:6px 0 14px;}
.pk-prog{font-size:14px; color:var(--text-2); margin:0 0 6px;}
.pk-day{font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); margin:20px 0 8px;}
.pk-games{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:10px;}
.pk-game{border:1px solid var(--line); background:var(--surface-1); padding:10px 12px;}
.pk-gh{display:flex; justify-content:space-between; font-size:12px; color:var(--text-3); margin-bottom:8px;} .pk-lg{font-weight:800; letter-spacing:.05em;}
.pk-st.live{color:var(--signal); font-weight:700;} .pk-st.final{font-weight:700;}
.pk-teams{display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; gap:6px;}
.pk-at{align-self:center; font-size:11px; color:var(--text-3);}
.pk-team{display:flex; flex-direction:column; gap:2px; align-items:flex-start; text-align:left; padding:10px; border:2px solid var(--line-strong); background:var(--surface-0); color:var(--text); font:inherit; cursor:pointer; min-height:64px;}
.pk-team:hover:not(:disabled){border-color:var(--accent);} .pk-team.mine{border-color:var(--accent); background:color-mix(in srgb, var(--accent) 16%, var(--surface-0));}
.pk-team.locked{cursor:default;} .pk-team.win{border-color:#2e9e5b;} .pk-team.loss{border-color:var(--signal);} .pk-team.winner .pk-tn{text-decoration:underline;}
.pk-tn{font-weight:700; font-size:14px; line-height:1.2;} .pk-sp,.pk-sc{font-size:13px; color:var(--text-3);} .pk-sc{font-size:20px; font-weight:800; color:var(--text);}
.pk-chk{font-size:11px; font-weight:700; color:var(--accent);}
.pk-crowd{position:relative; height:16px; margin-top:8px; background:color-mix(in srgb, var(--accent) 30%, var(--surface-2));} .pk-crowd span{position:absolute; left:0; top:0; bottom:0; background:var(--accent); opacity:.55;} .pk-crowd small{position:relative; z-index:1; font-size:11px; padding:0 6px; line-height:16px; color:var(--text);}
.pk-lines{font-size:12px; color:var(--text-3); margin-top:6px;}
.pk-bh{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px;} .pk-seg{display:flex;} .pk-segb{padding:9px 14px; font:inherit; font-weight:700; background:var(--surface-1); color:var(--text-2); border:1px solid var(--line-strong); margin-left:-1px; cursor:pointer;} .pk-segb.on{background:var(--accent); border-color:var(--accent); color:var(--accent-ink);}
.pk-table{width:100%; border-collapse:collapse; font-size:14px;} .pk-table th{text-align:left; font-size:12px; color:var(--text-3); padding:6px 8px; border-bottom:1px solid var(--line-strong);} .pk-table td{padding:9px 8px; border-bottom:1px solid var(--line);} .pk-table tr.me td{background:color-mix(in srgb, var(--accent) 14%, transparent); font-weight:700;} .pk-table a{color:var(--text); text-decoration:none; font-weight:600;}
.pk-sub{color:var(--text-2); margin:0 0 10px;} .pk-leagues{list-style:none; margin:18px 0; padding:0;} .pk-leagues li{display:flex; justify-content:space-between; gap:12px; align-items:center; flex-wrap:wrap; padding:12px 0; border-bottom:1px solid var(--line);} .pk-leagues small{display:block; color:var(--text-3);} .pk-lact{display:flex; gap:12px; align-items:center;}
.pk-card{border:1px solid var(--line); background:var(--surface-1); padding:18px; margin:14px 0;} .pk-stats{list-style:none; margin:0 0 12px; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:10px;} .pk-stats b{display:block; font-size:24px;} .pk-stats span{font-size:12px; color:var(--text-3);}
.pk-badges span{display:inline-block; margin:0 6px 6px 0; padding:4px 10px; border:1px solid var(--accent); color:var(--accent); font-size:12px; font-weight:700;}
.pk-how{margin:30px 0 10px;} .pk-how ul{padding-left:18px;} .pk-how li{margin:6px 0;}
.btn-primary{display:inline-block; background:var(--accent); color:var(--accent-ink); border:0; padding:11px 18px; font:700 14px/1 inherit; cursor:pointer; text-decoration:none;}

/* ---------- Bet of the Day ---------- */
.bd-card{border:1px solid var(--line); border-left:5px solid var(--accent); background:var(--surface-1); padding:18px 20px; margin:16px 0;} .bd-card.win{border-left-color:#2e9e5b;} .bd-card.loss{border-left-color:var(--signal);}
.bd-top{display:flex; justify-content:space-between; gap:10px; font-size:13px; color:var(--text-3);} .bd-status{font-weight:800; letter-spacing:.05em;} .bd-status.win{color:#2e9e5b;} .bd-status.loss{color:var(--signal);} .bd-status.pending{color:var(--accent);}
.bd-pick{font-size:clamp(28px,6vw,42px); line-height:1.05; margin:8px 0 4px;} .bd-match{margin:0 0 8px; color:var(--text-2);} .bd-terms,.bd-src,.bd-lines,.bd-crowd{margin:6px 0; font-size:14px; color:var(--text-2);} .bd-why{margin:10px 0; font-size:15px; line-height:1.5; max-width:62ch;}
.bd-model{list-style:none; margin:8px 0; padding:0; display:flex; gap:16px; flex-wrap:wrap; font-size:13px; color:var(--text-2);} .bd-model b{font-size:18px; color:var(--text);}
.bd-h{font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); margin:26px 0 8px;}
.bd-record,.bd-history{width:100%; border-collapse:collapse; font-size:14px;} .bd-record th,.bd-history th{text-align:left; font-size:12px; color:var(--text-3); padding:6px 8px; border-bottom:1px solid var(--line-strong);} .bd-record td,.bd-history td,.bd-record tbody th{padding:9px 8px; border-bottom:1px solid var(--line);}
.bd-up{color:#2e9e5b; font-weight:700;} .bd-down{color:var(--signal); font-weight:700;} .bd-streak{font-size:13px; color:var(--text-3);}
.bd-dot{display:inline-block; width:12px; height:12px; margin-right:3px; border-radius:50%; background:var(--line-strong);} .bd-dot.win{background:#2e9e5b;} .bd-dot.loss{background:var(--signal);}
.bd-history td.win{color:#2e9e5b; font-weight:700;} .bd-history td.loss{color:var(--signal); font-weight:700;}
.bd-rules{margin-top:30px; max-width:68ch;} .bd-rules li{margin:8px 0; font-size:14px; line-height:1.5; color:var(--text-2);}

/* ---------- Week in Review, players ---------- */
.wk-leagues{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px;} .wk-league h4{margin:0 0 6px;} .wk-league ul,.wk-scores,.wk-pk{padding-left:18px; font-size:14px;} .wk-scores{list-style:none; padding:0;} .wk-scores li{padding:5px 0; border-bottom:1px solid var(--line);} .wk-lg{font-size:11px; font-weight:800; color:var(--text-3); margin-right:6px;}
.pl-meta{margin:0 0 10px; color:var(--text-3);} .pl-stats{margin:14px 0; padding:14px; border:1px solid var(--line); background:var(--surface-1);} .pl-stats h4{margin:0 0 8px; font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-3);} .pl-stats ul{list-style:none; margin:0; padding:0; display:flex; gap:18px; flex-wrap:wrap;} .pl-stats b{font-size:20px;} .pl-stats span{font-size:13px; color:var(--text-2);} .pl-stats small{display:block; color:var(--text-3);}

/* Home: three ways in beside the news */
.home-promos{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:8px; margin:0 0 14px;}
.home-promo{display:flex; flex-direction:column; gap:3px; padding:11px 14px; border:1px solid var(--line); border-left:4px solid var(--accent); background:var(--surface-1); color:var(--text); text-decoration:none;}
.home-promo b{font-size:15px;} .home-promo span{font-size:13px; color:var(--text-2); line-height:1.35;} .home-promo:hover{background:var(--surface-2);}

.pk-check{display:flex; gap:8px; align-items:flex-start; margin:10px 0 0; font-size:13px; color:var(--muted,inherit);}
.pk-check input{margin-top:3px;}

.pk-auth-tabs{margin:0 0 14px;} .pk-fine{font-size:12.5px; color:var(--text-2); margin:8px 0 0;} .pk-fine a{color:var(--accent);}
.pk-form label small{font-weight:400; color:var(--text-2);} .pk-form h3{margin:0 0 6px;} .pk-sub{margin:0 0 10px; color:var(--text-2);}
.pk-acct{padding:16px 18px; border:1px solid var(--line); background:var(--surface-1); margin:12px 0;} .pk-acct h3{margin:0 0 8px; font-size:16px;}
.pk-badge{display:inline-block; font-size:11px; font-weight:700; padding:2px 7px; background:var(--accent); color:var(--accent-ink); vertical-align:middle;}
.pk-devs{list-style:none; margin:0 0 12px; padding:0;} .pk-devs li{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:9px 0; border-top:1px solid var(--line);}
.pk-devs li:first-child{border-top:0;} .pk-devs small{display:block; color:var(--text-2); font-size:12px;}
.pk-danger{border-color:#c0392b;} .pk-delbtn{padding:11px 14px; font:inherit; font-weight:700; background:#c0392b; color:#fff; border:0; cursor:pointer;}
.pk-row button:disabled,.pk-link:disabled{opacity:.55; cursor:default;}

.pk-auth-tabs[hidden],.pk-form[hidden],.pk-hero[hidden],.pk-acct[hidden]{display:none;}

.pk-rk{color:var(--accent); font-weight:800;}

.wk-hero{margin:8px 0 0;} .wk-heroimg{display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; background:var(--surface-2); margin:6px 0 12px;} .wk-leadh{font-size:clamp(22px,4vw,30px); line-height:1.15; margin:6px 0 8px;} .wk-leadh a{color:inherit; text-decoration:none;} .wk-outlets{font-size:13px; color:var(--text-2);}
.wk-tiles{list-style:none; margin:0 0 10px; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px;} .wk-tiles li{border:1px solid var(--line); background:var(--surface-1); padding:12px;} .wk-tiles b{display:block; font-size:26px; line-height:1;} .wk-tiles span{display:block; font-size:12px; color:var(--text-2); margin-top:5px;}
.wk-most{font-size:14px; margin:4px 0 12px;} .wk-bars{display:grid; gap:6px; max-width:520px;} .wk-bars div{display:grid; grid-template-columns:120px 1fr 32px; gap:8px; align-items:center; font-size:13px;} .wk-bars a{color:var(--text);} .wk-bar{display:block; height:8px; background:var(--surface-2);} .wk-bar i{display:block; height:100%; background:var(--accent);} .wk-bars em{font-style:normal; color:var(--text-2); text-align:right;}
.wk-chips{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px;} .wk-chips li{border:1px solid var(--line); background:var(--surface-1); padding:8px 12px; font-size:14px;} .wk-chips b{display:block;} .wk-chips span{font-size:12px; color:var(--text-2);} .wk-sh{margin:14px 0 4px; font-size:13px;} .wk-sub{font-size:13px; color:var(--text-2); margin:0 0 6px;}