/* =====================================================================
     TrendsEngine app stylesheet: "Floodlight" (full revamp 2026-09-25)

     One cohesive system replacing the four stacked override layers this
     file had grown into. Plan and reasoning: ops/research/ui-revamp-
     2026-09-25.md. In short:
       - Night-game palette: midnight ultramarine surfaces, a periwinkle
         accent for anything you can click. Green / red / gold stay
         reserved for hit / miss / coin-flip (handover 3.4), never used as
         decoration, so a colour always means something.
       - Type: Saira Condensed (OFL) for page titles and the scoreboard
         numerals (hit rates, EV %, dollars), Instrument Sans (OFL) for
         everything you read. No monospace, no all-caps labels.
       - The one bold element: the big hit-rate numeral on every card,
         plus a threshold line drawn across every per-game chart.
       - Team colour: each card is lit softly by its team's own original
         colour-chip badge (the same cleared SVG the avatars already use).
       - Two themes: Night (default) and Day, chosen in Settings
         (html[data-theme]); "match my device" resolves to one of them.
       - Desktop: fixed left rail. Phone/tablet: compact sticky top bar
         plus a bottom tab bar within thumb reach.

     Several rules below are pinned by tests (option contrast, sample
     flag, mock toggle, the two badge rings and their reduced-motion
     block, depth tags, bye badge, team summary flag, mock tag). Their
     selectors and key declarations are kept as the tests expect.
     ===================================================================== */

  /* ---- tokens ---- */
  /* All design tokens (colours, type, radii, shadows, Night/Day) live in
     tokens.css, linked before this file (review P-047). */

  /* ---- base ---- */
  *{box-sizing:border-box;}
  html{-webkit-text-size-adjust:100%;scroll-padding-top:90px;}
  body{
    margin:0;padding:0 20px;
    background:var(--ink);color:var(--paper);
    font-family:var(--font-body);font-size:14px;line-height:1.5;
    font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
    -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
  }
  body::before{
    /* A fine film grain over the page (Clubhouse look, 2026-09-27): printed-
       program texture. Fixed so it doesn't repaint while scrolling. */
    content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  a{color:var(--text-accent);text-underline-offset:3px;}
  b,strong{font-weight:650;}
  ::selection{background:color-mix(in srgb,var(--brand-primary) 35%,transparent);}
  button,input,select,textarea{font:inherit;color:inherit;}
  button{cursor:pointer;}
  [hidden]{display:none !important;}
  :where(button,a,summary,[tabindex],input,select):focus-visible{outline:2px solid var(--text-accent);outline-offset:2px;border-radius:8px;}
  /* Skip link (review P-010, WCAG 2.4.1): hidden until keyboard focus, then the first thing on the page. */
  .skip-link{position:absolute;left:12px;top:-80px;z-index:1000;padding:10px 16px;border-radius:var(--r-ctl);
    background:var(--panel-2);color:var(--text-accent);font-weight:600;text-decoration:none;border:1px solid var(--edge-accent);}
  .skip-link:focus{top:12px;}
  main:focus{outline:none;}
  *{scrollbar-width:thin;scrollbar-color:var(--rule) transparent;}
  *::-webkit-scrollbar{width:8px;height:6px;}
  *::-webkit-scrollbar-thumb{background:var(--rule);border-radius:8px;}
  *::-webkit-scrollbar-track{background:transparent;}

  .shell{max-width:1320px;margin:0 auto;padding-bottom:72px;}

  /* =====================================================================
     APP SHELL
     ===================================================================== */
  .topbar{display:flex;align-items:center;gap:14px;}
  .brand{display:flex;align-items:center;gap:11px;margin-right:auto;min-width:0;color:inherit;text-decoration:none;}
  .brand svg{flex:none;display:block;}
  .brand h1{margin:0;font:inherit;display:flex;flex-direction:column;line-height:1.05;}
  .brand b{
    font-family:var(--font-display);font-weight:800;font-size:1.4rem;letter-spacing:.035em;color:var(--paper);
  }
  .brand span{font-size:11.5px;color:var(--paper-dim);letter-spacing:.01em;font-weight:500;}

  /* Main tool navigation (#modeSwitch). Rail list on desktop, bottom tab
     bar below 1100px. Each button carries an icon, a long label and a
     short label; CSS picks which label shows. */
  #modeSwitch{display:flex;}
  #modeSwitch .modebtn{
    display:flex;align-items:center;gap:12px;position:relative;
    border:0;background:none;color:var(--paper-dim);
    font-family:var(--font-body);font-size:14.5px;font-weight:550;white-space:nowrap;
    transition:background .18s var(--ease-out),color .18s var(--ease-out);
  }
  #modeSwitch .mb-ico{width:20px;height:20px;flex:none;}
  #modeSwitch .mb-ico *{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
  #modeSwitch .mb-short{display:none;}
  .nav-label{font-size:12px;color:var(--paper-faint);font-weight:550;padding:0 12px;}
  /* Free plan: the three priced tools say "Pro" in the nav (same lock the
     pages themselves explain; the server gate is the real enforcement). */
  body.plan-free #modeSwitch .modebtn:is([data-mode="ev"],[data-mode="arb"],[data-mode="calendar"]) .mb-label::after{
    content:"Pro";margin-left:8px;padding:1px 7px;border-radius:var(--r-ctl);
    font-size:var(--fs-min);font-weight:650;color:var(--text-accent);background:var(--tint-accent);vertical-align:1px;
  }

  /* Trend Board opens the sport menu: a small down-arrow says so (review R1-02). */
  #modeSwitch .modebtn[aria-haspopup="menu"] :is(.mb-label,.mb-short)::after{
    content:"";display:inline-block;width:5px;height:5px;margin-left:6px;vertical-align:3px;
    border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);opacity:.7;
  }

  .icon-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:10px;
    min-height:40px;min-width:40px;padding:0 10px;border-radius:12px;
    border:1px solid var(--line-soft);background:var(--panel);color:var(--paper-dim);
    transition:background .18s var(--ease-out),color .18s var(--ease-out),border-color .18s var(--ease-out);
  }
  .icon-btn:hover{color:var(--paper);border-color:var(--edge-accent);}
  .icon-btn svg{width:19px;height:19px;flex:none;}
  .icon-btn svg *{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
  .settings-btn .sb-label{font-size:14px;font-weight:550;}

  /* Sport switcher: rail list on desktop, a scrolling chip row elsewhere. */
  .sporttabs{display:flex;gap:6px;flex-wrap:wrap;}
  .sporttab{
    display:inline-flex;align-items:center;gap:8px;
    min-height:36px;padding:0 15px;border-radius:var(--r-ctl);
    border:1px solid var(--line-soft);background:var(--panel);color:var(--paper-dim);
    font-size:13.5px;font-weight:600;letter-spacing:.01em;white-space:nowrap;
    transition:background .18s var(--ease-out),color .18s var(--ease-out),border-color .18s var(--ease-out);
  }
  .sporttab:hover{color:var(--paper);border-color:var(--edge-accent);}
  .sporttab.active{background:var(--tint-accent);border-color:var(--edge-accent);color:var(--text-accent);}
  .sporttab.soon,.sporttab:disabled{opacity:.55;cursor:default;border-style:dashed;}
  /* Testing switches (mock data) are hidden from customers; a developer turns
     them on with localStorage te_dev_v1 = "1" (sets html[data-dev]). */
  :root:not([data-dev]) .dev-only{display:none !important;}
  /* Sport row at the top of the board: desktop only (phones use the top bar row). */
  .board-sport-row{display:none;}
  .board-sport-label{font-size:12.5px;font-weight:600;color:var(--paper-dim);}
  .sporttab.soon:hover{color:var(--paper-dim);border-color:var(--line-soft);}

  /* Utility strip: jurisdiction notice, plan preview, data freshness. */
  .utility-row{
    display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;
    padding:18px 0 16px;margin-bottom:10px;border-bottom:1px solid var(--line-soft);
    font-size:12.5px;color:var(--paper-dim);
  }
  .age-notice{font-size:12.5px;color:var(--paper-dim);font-weight:550;display:inline-flex;align-items:center;gap:8px;}
  .plan-switch{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12.5px;color:var(--paper-dim);}
  .plan-btn{
    min-height:30px;padding:0 13px;border-radius:var(--r-ctl);
    border:1px solid var(--line-soft);background:var(--panel);color:var(--paper-dim);
    font-size:12.5px;font-weight:650;
  }
  .plan-btn:hover{color:var(--paper);}
  .plan-btn.on{background:var(--tint-accent);color:var(--text-accent);border-color:var(--edge-accent);}
  .plan-note{font-size:11.5px;color:var(--paper-faint);}
  .utility-row .plan-note{display:none;}
  .freshness-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:12.5px;color:var(--paper-dim);margin-left:auto;}
  .freshness-bar > span,.freshness-more > span{display:inline-flex;align-items:center;}
  .offline-note{display:inline-flex;align-items:center;font-size:12.5px;font-weight:600;color:var(--warn);}
  .offline-note[hidden]{display:none;}
  .freshness-bar .dot,.card-provenance .dot,.offline-note .dot{
    width:7px;height:7px;border-radius:50%;background:var(--hit);display:inline-block;margin-right:7px;flex:none;
    box-shadow:0 0 0 3px color-mix(in srgb,var(--hit) 18%,transparent);
  }
  .freshness-bar .dot.stale,.card-provenance .dot.stale,.offline-note .dot.stale{background:var(--warn);box-shadow:0 0 0 3px var(--warn-dim);}
  .freshness-bar .dot.old,.card-provenance .dot.old{background:var(--miss);box-shadow:0 0 0 3px var(--miss-dim);}
  .freshness-more{display:contents;}
  .freshness-more summary{
    cursor:pointer;list-style:none;font-weight:600;color:var(--text-accent);
    border-radius:var(--r-ctl);padding:3px 11px;background:var(--tint-accent);
  }
  .freshness-more summary::-webkit-details-marker{display:none;}
  .freshness-more[open] summary{background:transparent;padding-inline:0;}
  .freshness-more > span{flex-basis:100%;}

  /* =====================================================================
     PAGE HEADINGS AND TEXT
     ===================================================================== */
  h2.section{
    font-family:var(--font-display);font-weight:700;line-height:1.02;
    color:var(--paper);margin:40px 0 10px;text-wrap:balance;
    display:flex;align-items:center;flex-wrap:wrap;gap:10px;
  }
  .view-title{margin-top:22px;}
  .section-intro{font-size:14.5px;line-height:1.6;margin:0 0 20px;max-width:70ch;}
  .section-intro b{color:var(--paper);}
  .section-intro details{margin-top:6px;}
  .section-intro summary{cursor:pointer;color:var(--text-accent);font-weight:600;font-size:13.5px;list-style:none;display:inline-flex;align-items:center;gap:6px;}
  .section-intro summary::-webkit-details-marker{display:none;}
  .section-intro summary::after{content:"";width:7px;height:7px;border:solid currentColor;border-width:0 1.6px 1.6px 0;transform:rotate(45deg) translateY(-2px);transition:transform .2s var(--ease-out);}
  .section-intro details[open] summary::after{transform:rotate(225deg) translateY(-1px);}
  .section-intro details p{margin:8px 0 0;}
  .subsection{
    font-family:var(--font-display);font-weight:700;font-size:1.45rem;line-height:1.1;
    color:var(--paper);margin:32px 0 14px;
  }
  .footnote{
    border-top:1px solid var(--line-soft);padding-top:18px;margin-top:28px;
    font-size:13px;line-height:1.65;color:var(--paper-dim);max-width:78ch;
  }
  .footnote b{color:var(--paper);}
  .app-footer{
    display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;
    margin-top:56px;padding-top:20px;border-top:1px solid var(--line-soft);
    font-size:13px;color:var(--paper-dim);
  }
  .app-footer a{color:var(--paper-dim);text-decoration:none;}
  .app-footer a:hover{color:var(--paper);text-decoration:underline;}
  .app-footer-note{flex-basis:100%;font-size:12px;color:var(--paper-faint);margin-top:4px;}
  /* Links inside a sentence are underlined so they don't rely on colour (WCAG 1.4.1). */
  .app-footer-note a{text-decoration:underline;text-underline-offset:2px;}

  .empty{
    grid-column:1/-1;text-align:center;padding:48px 20px;color:var(--paper-dim);
    font-size:14px;line-height:1.6;border:1px dashed var(--rule);border-radius:var(--r-card);
    background:color-mix(in srgb,var(--panel) 55%,transparent);
  }
  .empty a{color:var(--text-accent);cursor:pointer;text-decoration:underline;}
  .watch-avoid-col .empty,.card .empty,.card-empty{border:0;background:none;}
  .empty-action{
    display:inline-flex;align-items:center;margin:16px auto 0;min-height:40px;padding:0 20px;border-radius:var(--r-ctl);
    border:0;font-weight:650;
  }
  .empty-action:hover{background:var(--accent-strong);color:var(--on-accent);}
  .empty-note{display:block;margin-top:10px;font-size:12.5px;color:var(--paper-faint);}
  .loading-note{font-size:14px;color:var(--paper-dim);padding:28px 0;text-align:center;}
  .hint{font-size:12px;color:var(--paper-dim);margin-top:4px;min-height:14px;line-height:1.45;}
  .hint.show{color:var(--text-accent);}
  .hint:empty{display:none;}

  /* =====================================================================
     FILTER BAR (shared component, initFilterBar() in index.html)
     ===================================================================== */
  .filterbar{border-radius:var(--r-panel);
    padding:12px;margin-bottom:22px;
  }
  .tf-quick-row,.filterbar[data-tf="inline"]{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
  .filter-group{
    display:inline-flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px;
    min-width:0;min-height:42px;padding:0 14px;
    border:1px solid var(--field-edge);border-radius:var(--r-field);background:var(--panel-2);
    transition:border-color .15s,background .15s;
  }
  .filter-group:has(.hint:not(:empty)){padding-block:8px;}
  .filter-group:hover{border-color:var(--paper-dim);}
  .filter-group:focus-within{border-color:var(--edge-accent);background:var(--panel-3);}
  .filter-group:has(:focus-visible){outline:2px solid var(--text-accent);outline-offset:2px;} /* Q-041: a ring you can see */
  .filter-group label{font-size:12.5px;color:var(--paper-dim);font-weight:600;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;}
  .filter-group select,.filter-group input[type=search],.filter-group input[type=date],.filter-group input[type=number]{
    background:transparent;border:0;outline:none;color:var(--paper);
    font-family:var(--font-body);font-size:14px;font-weight:550;padding:0;min-width:110px;min-height:40px;
  }
  /* Team logos in pricing rows (was inline style in teamLogoHtml, Q-084). */
  .team-logo.row-logo{width:26px;height:26px;object-fit:contain;vertical-align:middle;}
  .team-logo.fallback-badge.row-logo{border-radius:50%;display:inline-flex;font-size:var(--fs-min);}
  .filter-group select{
    appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:20px;cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238793bd' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 2px center;
  }
  .filter-group input::placeholder{color:var(--paper-faint);font-weight:400;}
  .filter-group input[type=range]{accent-color:var(--brand-primary);width:150px;}
  .filter-group input[type=checkbox]{accent-color:var(--brand-primary);width:16px;height:16px;margin:0;}
  .filter-group > label:only-child{color:var(--paper);font-weight:550;}
  /* Dropdown options inherit the closed select's colours unreliably; style
     every option in the app explicitly with the real tokens so all stay
     legible (covers .filter-group and .scoring-row selects alike). */
  select option{background:var(--panel);color:var(--paper);}
  .hitrate-val{color:var(--text-accent);font-size:13px;font-weight:650;min-width:36px;display:inline-block;}
  .filter-search{flex:1 1 260px;flex-wrap:nowrap;position:relative;}
  .filter-search input{flex:1;min-width:0;width:auto;}
  .filter-search::before{
    content:"";width:15px;height:15px;flex:none;opacity:.7;order:-1;
    background:currentColor;color:var(--paper-dim);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") center/contain no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  .filter-search label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

  .search-suggest{
    position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:45;
    background:var(--panel);border:1px solid var(--rule);border-radius:14px;
    max-height:280px;overflow-y:auto;box-shadow:var(--pop-shadow);padding:4px;
  }
  .search-suggest-row{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:10px 12px;cursor:pointer;font-size:14px;color:var(--paper);border-radius:10px;
  }
  .search-suggest-row:hover,.search-suggest-row:focus{background:var(--panel-2);outline:none;}
  .search-suggest-row b{font-weight:600;}
  .search-suggest-row span{font-size:12px;color:var(--paper-dim);white-space:nowrap;}

  .tf-more-btn,.tf-clear-btn{
    display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:0 16px;
    font-size:13px;font-weight:600;white-space:nowrap;align-self:center;
    background:transparent;border:1px solid var(--rule);color:var(--paper-dim);border-radius:var(--r-field);
    transition:border-color .15s,color .15s,background .15s;
  }
  .tf-more-btn:hover,.tf-clear-btn:hover{border-color:var(--edge-accent);color:var(--paper);}
  .tf-more-btn.open{border-color:var(--edge-accent);color:var(--text-accent);background:var(--tint-accent);}
  .tf-clear-btn{border-color:transparent;}
  .tf-count{
    display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;
    border-radius:var(--r-ctl);background:var(--brand-primary);color:var(--on-accent);font-size:11px;font-weight:700;
  }
  .tf-more-drawer{
    display:flex;flex-wrap:wrap;gap:8px;overflow:hidden;
    max-height:0;opacity:0;transform:translateY(-6px);
    margin-top:0;padding-top:0;border-top:1px solid transparent;
    transition:max-height .22s ease,opacity .18s ease,transform .18s ease,margin-top .18s ease,padding-top .18s ease,border-top-color .18s ease;
  }
  .tf-more-drawer.open{max-height:640px;opacity:1;transform:none;margin-top:12px;padding-top:12px;border-top-color:var(--line-soft);}
  .tf-pills-row{display:flex;flex-wrap:wrap;gap:8px;}
  .tf-pills-row:empty{display:none;}
  .tf-pills-row:not(:empty){margin-top:12px;}
  .tf-pill{
    display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:550;
    background:var(--tint-accent);border:1px solid var(--edge-accent);color:var(--text-accent);
    border-radius:var(--r-ctl);padding:4px 6px 4px 12px;
  }
  .tf-pill button{
    /* 24px: the WCAG 2.2 target-size minimum (review P-027; was 20px). The
       negative margin keeps the pill the same height. */
    display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;
    margin:-2px -4px -2px 0;background:none;border:0;color:inherit;font-size:13px;line-height:1;padding:0;
  }
  .tf-pill button:hover{background:var(--tint-accent);}
  .result-count{margin-left:auto;font-size:13px;color:var(--paper-dim);white-space:nowrap;align-self:center;padding:0 6px;}

  label.mock-toggle-label{
    display:inline-flex;align-items:center;gap:8px;
    border:1px solid var(--warn);border-radius:10px;background:var(--warn-dim);
    color:var(--warning);font-weight:650;font-size:12.5px;padding:6px 11px;line-height:1.35;
  }
  label.mock-toggle-label input{accent-color:var(--warn);}
  .filter-group:has(> label.mock-toggle-label){background:none;padding:0;border:0;}

  /* Phone: the quick row + drawer collapse behind one "Filters (N)" button
     that opens the same fields as a bottom sheet. */
  .tf-mobile-toggle{display:none;}
  @media (max-width:640px){
    .tf-mobile-toggle{
      display:flex;width:100%;align-items:center;justify-content:space-between;
      min-height:48px;padding:0 16px;margin-bottom:16px;
      background:var(--panel);border:1px solid var(--line-soft);border-radius:14px;
      color:var(--paper);font-size:15px;font-weight:650;box-shadow:var(--card-shadow);
    }
    .filterbar{padding:0;margin-bottom:16px;}
    .filterbar .tf-quick-row,.filterbar .tf-more-drawer{display:none;}
    .filterbar{
      position:fixed;inset:auto 0 0 0;z-index:90;max-height:84vh;overflow-y:auto;
      visibility:hidden;opacity:0;pointer-events:none;transform:translateY(18px);
      transition:opacity .2s ease,transform .22s var(--ease-out),visibility .2s ease;
    }
    .filterbar.tf-sheet-open{
      visibility:visible;opacity:1;pointer-events:auto;transform:none;
      background:var(--panel);border:1px solid var(--rule);border-bottom:0;
      border-radius:22px 22px 0 0;box-shadow:var(--pop-shadow);
      padding:26px 16px calc(20px + env(safe-area-inset-bottom));
    }
    .filterbar.tf-sheet-open::before{
      content:"";position:absolute;top:9px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:4px;background:var(--rule);
    }
    .filterbar.tf-sheet-open .tf-quick-row{display:flex;flex-direction:column;align-items:stretch;}
    .filterbar.tf-sheet-open .tf-quick-row .filter-group,
    .filterbar.tf-sheet-open .tf-quick-row select,
    .filterbar.tf-sheet-open .tf-quick-row input,
    .filterbar.tf-sheet-open .tf-more-btn,
    .filterbar.tf-sheet-open .tf-clear-btn{width:100%;min-width:0;}
    .filterbar.tf-sheet-open .filter-group{min-height:50px;flex:none;}
    /* Add / pick-a-player bars (data-tf="inline") are actions, not filters:
       they stay in place on phones, never folded into the sheet. */
    .filterbar[data-tf="inline"]{position:static;visibility:visible;opacity:1;pointer-events:auto;transform:none;max-height:none;overflow:visible;}
    .filterbar[data-tf="inline"] .filter-group{width:100%;min-width:0;}
    .filterbar.tf-sheet-open .filter-group select{flex:1;}
    .filterbar.tf-sheet-open .tf-more-btn,.filterbar.tf-sheet-open .tf-clear-btn{justify-content:center;min-height:48px;}
    .filterbar.tf-sheet-open .tf-more-drawer.open{display:flex;flex-direction:column;}
    .filterbar.tf-sheet-open .result-count{margin-left:0;align-self:flex-start;}
    .tf-sheet-backdrop{
      position:fixed;inset:0;background:var(--scrim);z-index:85;
      visibility:hidden;opacity:0;transition:opacity .2s ease,visibility .2s ease;
      -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
    }
    .tf-sheet-backdrop.open{visibility:visible;opacity:1;}
  }

  /* Secondary pill rows: soccer leagues, fantasy positions. */
  .league-row{display:flex;gap:6px;flex-wrap:wrap;margin:-6px 0 20px;}
  .league-chip{
    min-height:32px;padding:0 13px;border-radius:var(--r-ctl);border:1px solid var(--line-soft);
    background:var(--panel);color:var(--paper-dim);font-size:12.5px;font-weight:600;
    transition:border-color .15s,color .15s,background .15s;
  }
  .league-chip:hover{border-color:var(--edge-accent);color:var(--paper);}
  .league-chip.active{background:var(--tint-accent);border-color:var(--edge-accent);color:var(--text-accent);}

  /* Fantasy feature tabs: underline tabs, one level below the sport pills. */
  .tabstrip{
    display:flex;gap:4px;margin:14px 0 8px;border-bottom:1px solid var(--line-soft);
    overflow-x:auto;scrollbar-width:none;
  }
  .tabstrip::-webkit-scrollbar{display:none;}
  .tabstrip button{
    position:relative;flex:none;min-height:46px;padding:0 14px;border:0;background:none;
    color:var(--paper-dim);font-size:14.5px;font-weight:600;white-space:nowrap;
    transition:color .15s;
  }
  .tabstrip button::after{
    content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2.5px;border-radius:3px 3px 0 0;
    background:var(--brand-primary);transform:scaleX(0);transition:transform .22s var(--ease-out);
  }
  .tabstrip button:hover{color:var(--paper);}
  .tabstrip button.active{color:var(--paper);}
  .tabstrip button.active::after{transform:scaleX(1);}

  /* Odds format: a small segmented control. */
  .odds-format-switch{display:inline-flex;gap:2px;padding:3px;border-radius:10px;background:var(--panel);border:1px solid var(--line-soft);}
  .odds-format-switch .modebtn{
    min-height:32px;padding:0 12px;border:0;border-radius:8px;background:none;
    color:var(--paper-dim);font-size:13px;font-weight:600;white-space:nowrap;
  }
  .odds-format-switch .modebtn:hover{color:var(--paper);}
  .odds-format-switch .modebtn.active{background:var(--tint-accent);color:var(--text-accent);box-shadow:inset 0 0 0 1px var(--edge-accent);}
  .filter-group:has(> .odds-format-switch){padding-right:5px;}

  /* =====================================================================
     CARDS
     ===================================================================== */
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-bottom:16px;}
  @media (min-width:1500px){ .grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));} }
  .card{
    position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-card);
    padding:18px 18px 14px;display:flex;flex-direction:column;gap:14px;min-width:0;
  }
  /* Team-colour light: the card's own team badge (p.logo), scaled so only
     its fill shows, faded out from the top-left corner. No blur filter,
     so 60 cards stay cheap to paint. */
  .card::before{
    content:"";position:absolute;z-index:-1;pointer-events:none;
    left:-90px;top:-130px;width:330px;height:300px;
    background-image:var(--team-chip);background-size:3000%;background-position:45% 22%;
    opacity:var(--glow-strength);
    -webkit-mask-image:radial-gradient(closest-side,#000 0%,rgba(0,0,0,.45) 45%,transparent 100%);
            mask-image:radial-gradient(closest-side,#000 0%,rgba(0,0,0,.45) 45%,transparent 100%);
  }
  #cardGrid > .card,#fantasyGrid > .card{content-visibility:auto;contain-intrinsic-size:auto 520px;}

  .card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
  .card-head{display:flex;align-items:center;gap:13px;min-width:0;}
  .who{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px;}
  .who b{display:block;font-size:16px;font-weight:650;color:var(--paper);line-height:1.2;letter-spacing:-.005em;}
  .who > span{font-size:12.5px;color:var(--paper-dim);font-weight:500;}

  /* Avatars */
  .headshot-wrap{position:relative;flex:none;}
  .headshot{width:54px;height:54px;border-radius:50%;object-fit:cover;background:var(--panel-2);border:2px solid var(--panel);}
  .team-badge{
    position:absolute;bottom:-3px;right:-3px;width:22px;height:22px;
    border-radius:50%;background:var(--ink);border:2px solid var(--panel);padding:1px;object-fit:contain;
  }
  .team-logo{
    width:52px;height:52px;object-fit:contain;border-radius:14px;flex:none;
    background:var(--panel-2);border:1px solid var(--line-soft);padding:3px;
  }
  .fallback-badge{
    align-items:center;justify-content:center;
    font-family:var(--font-display);font-weight:700;color:var(--paper-dim);
    background:var(--panel-2)!important;border:1px solid var(--rule)!important;
  }
  .headshot.fallback-badge{font-size:1.4rem;}
  .team-badge.fallback-badge{font-size:9px;} /* initials inside a 16px logo stand-in: decorative, exempt from --fs-min */
  .team-logo.fallback-badge{font-size:1.1rem;}
  .athlete-avatar{position:relative;overflow:hidden;padding:0;background:var(--panel-3);}
  .athlete-avatar .athlete-bg{position:absolute;inset:0;background-image:var(--team-chip);background-size:3000%;background-position:45% 22%;filter:saturate(1.05) brightness(.82);}
  .athlete-avatar.no-team .athlete-bg{background:linear-gradient(160deg,var(--panel-3),var(--panel-2));}
  .athlete-avatar svg{position:relative;width:92%;height:92%;margin-top:6%;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45));}
  .athlete-avatar .athlete-art{position:relative;width:96%;height:96%;object-fit:contain;margin-top:8%;}

  /* "Living Color-Chip" ring (Concept 1; legal PASS WITH CONDITIONS,
     ops/legal/visual-identity-concepts-2026-09-22.md). Wraps every cleared
     team badge SVG; the colour comes from that same image (blurred and
     ring-masked), speed/opacity from real DATA_META freshness tiers via
     badgeRingFreshnessClass(). Worded only as "just refreshed", never as
     real-time status (condition 1). */
  .te-badge-ring{position:relative;display:inline-flex;flex:none;}
  .te-badge-ring::before{
    content:"";position:absolute;inset:-5px;border-radius:50%;
    background-image:var(--te-ring-src);background-size:220% 220%;background-position:center;
    filter:blur(3px) saturate(1.6) brightness(1.15);opacity:.35;
    -webkit-mask:radial-gradient(circle,transparent 60%,#000 66%,#000 80%,transparent 86%);
            mask:radial-gradient(circle,transparent 60%,#000 66%,#000 80%,transparent 86%);
    animation:te-ring-spin 9s linear infinite;pointer-events:none;z-index:0;
  }
  .te-badge-ring > img,.te-badge-ring > .fallback-badge{position:relative;z-index:1;}
  .te-badge-ring.te-ring-fresh::before{animation-duration:5s;opacity:.55;}
  .te-badge-ring.te-ring-stale::before{animation-duration:13s;opacity:.28;}
  .te-badge-ring.te-ring-idle::before{animation-duration:20s;opacity:.18;}
  @keyframes te-ring-spin{to{transform:rotate(360deg);}}
  .headshot-wrap .te-badge-ring{position:absolute;bottom:-3px;right:-3px;}
  .headshot-wrap .te-badge-ring img.team-badge,
  .headshot-wrap .te-badge-ring .fallback-badge.team-badge{position:static;}

  /* "Form Signature" ring (Concept 2, legal PASS): one arc per real game in
     the player's last 10, rotated so game 1 starts at 12 o'clock. */
  .form-sig-wrap{position:relative;display:inline-flex;flex:none;}
  .form-sig-ring{position:absolute;inset:0;transform:rotate(-90deg);pointer-events:none;}
  .form-sig-empty{position:relative;display:inline-flex;flex:none;opacity:.92;}

  /* Player baseline ring (team colour, static; legal PASS WITH CONDITIONS,
     ops/legal/player-baseline-ring-2026-09-22.md). Same masked team-colour
     mechanism as the badge ring, but animation:none is hard-coded and it
     is never wired to the freshness classes (condition 2). */
  .te-baseline-ring{position:relative;display:inline-flex;flex:none;}
  .te-baseline-ring::before{
    content:"";position:absolute;inset:-5px;border-radius:50%;
    background-image:var(--te-ring-src);background-size:220% 220%;background-position:center;
    filter:blur(3px) saturate(1.6) brightness(1.15);opacity:.3;
    -webkit-mask:radial-gradient(circle,transparent 60%,#000 66%,#000 80%,transparent 86%);
            mask:radial-gradient(circle,transparent 60%,#000 66%,#000 80%,transparent 86%);
    animation:none;pointer-events:none;z-index:0;
  }
  .te-baseline-ring > img,.te-baseline-ring > .fallback-badge{position:relative;z-index:1;}

  @media (prefers-reduced-motion: reduce){
    /* Fully stops the badge ring's motion (renders as a static, dim halo). */
    .te-badge-ring::before{animation:none!important;opacity:.2!important;}
    *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important;}
  }

  /* Status chips on a card */
  .injury-badge{
    display:inline-flex;align-items:center;gap:5px;margin-top:5px;
    font-size:11px;font-weight:700;padding:3px 9px;border-radius:var(--r-ctl);letter-spacing:.01em;
  }
  .injury-badge.out{background:var(--miss-dim);color:var(--miss-text);}
  .injury-badge.caution{background:var(--warn-dim);color:var(--warning);}
  /* Neutral, not a warning colour: a bye week is a schedule fact. */
  .injury-badge.bye{background:var(--panel-2);color:var(--paper-dim);}
  .who .injury-badge{margin-left:0;}

  /* The prop the card is about, and its line */
  .prop-line{
    display:flex;justify-content:space-between;align-items:center;gap:10px;
    padding:10px 12px;border-radius:12px;background:var(--panel-2);
    font-size:13.5px;color:var(--paper-dim);font-weight:550;
  }
  .prop-line b{font-family:var(--font-display);font-weight:700;font-size:1.3rem;line-height:1;color:var(--paper);white-space:nowrap;}
  .line-yours{font:600 11px var(--font-body);color:var(--text-accent);margin-left:4px;}

  /* The hero: hit rate as a scoreboard numeral, with the record under it. */
  .rate-hero{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none;text-align:right;}
  .rate-ring{position:relative;width:74px;height:74px;flex:none;}
  .rate-ring svg{transform:rotate(-90deg);}
  .rate-num{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    font-family:var(--font-display);font-weight:800;font-size:1.3rem;letter-spacing:-.01em;
  }
  .rate-hero .rate-ring{width:auto;height:auto;}
  .rate-hero .rate-ring svg{display:none;}
  .rate-hero .rate-num{position:static;display:block;font-size:2.7rem;line-height:.86;}
  .rate-cap{font-size:12px;color:var(--paper-dim);font-weight:550;white-space:nowrap;}

  .rate-row{display:flex;justify-content:space-between;}
  .badges{flex-wrap:wrap;}
  .badge{
    display:inline-flex;flex-direction:row-reverse;align-items:baseline;gap:5px;
    padding:4px 10px;border-radius:var(--r-ctl);font-size:12px;border:0;background:var(--panel-2);
  }
  .badge b{font-weight:700;font-size:12.5px;}
  .badge span{font-size:11px;font-weight:600;opacity:.8;}

  /* Honest qualifier for a thin sample. align-self keeps it a chip, not a
     full-width bar, wherever it sits in a flex column (QA 2026-09-21). */
  .sample-flag{
    display:inline-flex;align-items:center;align-self:flex-start;width:fit-content;
    font-size:11.5px;font-weight:650;padding:3px 10px;border-radius:var(--r-ctl);white-space:nowrap;
    background:var(--warn-dim);color:var(--warning);
  }
  .rate-row .sample-flag{align-self:center;}

  .trend-pill{
    display:flex;gap:8px;align-items:flex-start;font-size:12.5px;font-weight:550;line-height:1.45;
    padding:9px 12px;border-radius:12px;
  }
  .trend-up{background:var(--hit-dim);color:var(--hit);}
  .trend-down{background:var(--miss-dim);color:var(--miss-text);}
  .trend-flat{background:var(--panel-2);color:var(--paper-dim);}
  .trend-reason{font-size:12px;color:var(--paper-dim);margin-top:4px;line-height:1.45;}

  .next-badge{display:block;max-width:100%;font-size:12.5px;line-height:1.5;color:var(--paper-dim);}
  .next-badge-opp{display:inline-flex;vertical-align:-3px;margin:0 3px;}
  .next-badge-logo{width:16px;height:16px;border-radius:50%;object-fit:contain;}
  .next-badge-logo.fallback-badge{font-size:7px;}

  /* Per-game chart. Each bar sits in a fixed-height track so its height is
     true to scale, and the prop line is drawn across the tracks (--lp,
     set by miniChart()/renderBarChart()), so you see how far each game
     cleared or missed. Scrolls sideways rather than squeezing labels. */
  .chart{display:flex;overflow-x:auto;overflow-y:hidden;padding:2px 0 2px;}
  .chart .bar-wrap{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;} /* Q-005: every game fits; scroll stays as a fallback */
  .chart .val{font-size:11px;font-weight:700;line-height:1;white-space:nowrap;}
  .bar-track{position:relative;width:100%;height:62px;display:flex;align-items:flex-end;}
  .chart .bar{width:100%;min-height:3px;border-radius:5px 5px 2px 2px;transition:opacity .15s;}
  .chart .bar-wrap:hover .bar{opacity:.78;}
  /* Segments reach across the gaps between bars so the line reads as one;
     the first and last stay inside the chart so it never scrolls for it. */
  .bar-track[style*="--lp"]::after{
    content:"";position:absolute;left:-2px;right:-2px;bottom:var(--lp);height:0;
    border-top:1.5px dashed color-mix(in srgb,var(--paper) 55%,transparent);pointer-events:none;
  }
  .bar-wrap:first-child > .bar-track::after{left:0;}
  .bar-wrap:last-child > .bar-track::after{right:0;}
  .chart .bar-label{font-size:var(--fs-min);color:var(--paper-dim);text-align:center;line-height:1.35;white-space:nowrap;}
  .chart .bar-opp{color:var(--paper-faint);font-weight:600;letter-spacing:.02em;}

  /* Custom line + splits (Mina approved 2026-09-24): a quiet tray. */
  .card-controls{
    display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;
    padding-top:12px;border-top:1px solid var(--line-soft);
  }
  .line-field{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--paper-dim);font-weight:550;}
  .line-input{
    width:70px;min-height:32px;padding:0 10px;border-radius:var(--r-field);border:1px solid var(--field-edge);
    background:var(--panel-2);color:var(--paper);font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums;
  }
  .line-input:focus{border-color:var(--edge-accent);outline:none;box-shadow:0 0 0 3px var(--tint-accent);}
  .split-group{display:flex;gap:4px;flex-wrap:wrap;}
  .split-btn{
    min-height:32px;padding:0 11px;border-radius:var(--r-ctl);border:1px solid var(--line-soft);
    background:transparent;color:var(--paper-dim);font-size:12.5px;font-weight:600;
    transition:background .15s var(--ease-out),color .15s var(--ease-out),border-color .15s;
  }
  .split-btn span{font-weight:500;opacity:.8;}
  .split-btn:hover:not(:disabled){color:var(--paper);border-color:var(--rule);}
  .split-btn.on{background:var(--tint-accent);color:var(--text-accent);border-color:var(--edge-accent);}
  .split-btn:disabled{opacity:.55;cursor:not-allowed;}
  .card-reset{background:none;border:0;color:var(--text-accent);font-size:12.5px;font-weight:600;padding:6px 4px;text-decoration:underline;text-underline-offset:3px;}
  .card-empty{padding:16px 8px;font-size:13px;}

  .card-provenance{display:flex;align-items:center;font-size:12px;color:var(--paper-dim);}
  .card-foot{
    display:flex;align-items:center;gap:8px;flex-wrap:wrap;
    padding-top:12px;border-top:1px solid var(--line-soft);font-size:12.5px;color:var(--paper-dim);
  }
  .card-foot > span:first-child{margin-right:auto;font-weight:550;}
  .card-foot > span + span{font-weight:650;color:var(--paper-faint);}
  .card-foot > span + span::before{content:"";display:inline-block;width:3px;height:3px;border-radius:50%;background:currentColor;margin:0 8px 3px 0;vertical-align:middle;}

  .share-btn,.watchlist-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    min-height:34px;padding:0 13px;border-radius:var(--r-ctl);white-space:nowrap;
    font-size:12.5px;font-weight:650;border:1px solid var(--rule);background:transparent;color:var(--paper-dim);
    transition:border-color .15s,color .15s,background .15s;
  }
  .share-btn:hover{color:var(--paper);border-color:var(--edge-accent);}
  .watchlist-btn{border-color:var(--edge-accent);color:var(--text-accent);}
  .watchlist-btn:hover{background:var(--tint-accent);}
  .watchlist-btn.on:hover{background:var(--accent-strong);color:var(--on-accent);}

  .load-more-area{display:flex;flex-direction:column;align-items:center;margin:8px 0 40px;}
  .load-more-btn{
    min-height:46px;padding:0 30px;border-radius:var(--r-ctl);font-size:14.5px;font-weight:650;
    background:var(--panel);border:1px solid var(--rule);color:var(--paper);
    transition:border-color .15s,background .15s;
  }
  .load-more-hint{font-size:12.5px;color:var(--paper-dim);margin-top:10px;text-align:center;}

  /* =====================================================================
     MATCHUP SPOTLIGHT (hero of the Trend Board)
     ===================================================================== */
  #spotlightArea{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:8px;}
  @media (min-width:1280px){ #spotlightArea{grid-template-columns:1fr 1fr;} #spotlightArea > .empty{grid-column:1/-1;} }
  .spotlight{
    position:relative;overflow:hidden;isolation:isolate;
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:24px;align-items:end;
    padding:24px;border-radius:24px;
  }
  @media (min-width:1280px){ #spotlightArea .spotlight{grid-template-columns:1fr;} }
  @media (max-width:720px){ .spotlight{grid-template-columns:1fr;} }
  .spotlight > div{min-width:0;}
  .spotlight-id{display:flex;flex-direction:column;gap:16px;}
  .spotlight-title{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:650;color:var(--paper-dim);}
  .spotlight-title::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--brand-primary);box-shadow:0 0 0 4px var(--tint-accent);}
  .vs-row{display:flex;align-items:center;gap:14px;}
  .vs-x{font-family:var(--font-display);font-weight:700;color:var(--paper-faint);font-size:1.1rem;}
  .spotlight-num{
    font-family:var(--font-display);color:var(--hit);
  }
  .spotlight-sub{font-size:15px;line-height:1.55;color:var(--paper-dim);max-width:46ch;}
  .spotlight-sub b{font-weight:650;}
  .spotlight-chart{display:flex;align-items:flex-end;overflow-x:auto;overflow-y:hidden;}
  .spotlight-chart .bar-wrap{min-width:30px;display:flex;flex-direction:column;align-items:center;}
  .spotlight-chart .bar{width:100%;min-height:4px;border-radius:7px 7px 2px 2px;}
  .spotlight-chart .val{line-height:1;white-space:nowrap;}
  .spotlight-chart .bar-label{white-space:nowrap;}
  .spotlight-chart:focus-visible,[id$="_chart"]:focus-visible{outline:2px solid var(--text-accent);outline-offset:4px;border-radius:8px;}
  @media (prefers-reduced-motion: no-preference){
    .spotlight-chart .bar{animation:te-rise .7s var(--ease-out) both;transform-origin:bottom;}
    .spotlight-chart .bar-wrap:nth-child(2) .bar{animation-delay:.04s;}
    .spotlight-chart .bar-wrap:nth-child(3) .bar{animation-delay:.08s;}
    .spotlight-chart .bar-wrap:nth-child(4) .bar{animation-delay:.12s;}
    .spotlight-chart .bar-wrap:nth-child(5) .bar{animation-delay:.16s;}
    .spotlight-chart .bar-wrap:nth-child(n+6) .bar{animation-delay:.2s;}
  }
  @keyframes te-rise{from{transform:scaleY(0);}to{transform:scaleY(1);}}

  /* Roadmap: sports that aren't in yet */
  .roadmap{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;}
  .roadmap .chip{
    font-size:12.5px;padding:7px 13px;border-radius:var(--r-ctl);
    border:1px dashed var(--rule);color:var(--paper-dim);background:transparent;
  }

  /* =====================================================================
     FANTASY
     ===================================================================== */
  #fantasySportTabs,#moversSportTabs{margin:8px 0 4px;}
  .proj-line{
    display:flex;justify-content:space-between;align-items:center;gap:8px;
    padding:10px 12px;border-radius:12px;background:var(--panel-2);
    font-size:13px;color:var(--paper-dim);font-weight:550;
  }
  .proj-line b{font-family:var(--font-display);font-weight:700;font-size:1.25rem;line-height:1;color:var(--paper);white-space:nowrap;}
  .callout{
    display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line-soft);
    box-shadow:inset 3px 0 0 var(--brand-primary);border-radius:14px;padding:12px 16px;margin-bottom:10px;font-size:14px;
  }
  .callout b{color:var(--paper);}

  .watch-avoid-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:30px;}
  @media (max-width:760px){ .watch-avoid-grid{grid-template-columns:1fr;} }
  .watch-avoid-grid > .fantasy-stale-note{grid-column:1/-1;}
  .watch-avoid-col{
    position:relative;overflow:hidden;
    border-radius:var(--r-card);padding:20px 20px 10px;
  }
  .watch-avoid-col::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;}
  .watch-avoid-col.watch::before{background:var(--hit);}
  .watch-avoid-col.avoid::before{background:var(--miss);}
  .watch-avoid-col h3{font-family:var(--font-display);font-weight:700;font-size:1.45rem;line-height:1.1;margin:0 0 2px;color:var(--paper);}
  .watch-avoid-col.watch h3{color:var(--hit);}
  .watch-avoid-col.avoid h3{color:var(--miss-text);}
  .watch-avoid-col .sub{font-size:12.5px;color:var(--paper-dim);display:block;margin-bottom:10px;}
  .movers-sport-heading{
    font-family:var(--font-display);font-weight:700;font-size:1.6rem;color:var(--paper);
    margin:34px 0 12px;display:flex;align-items:center;gap:12px;
  }
  .movers-sport-heading::after{content:"";flex:1;height:1px;background:var(--line-soft);}
  .movers-sport-heading:first-child{margin-top:4px;}
  .wa-row-wrap{padding:11px 0;border-bottom:1px solid var(--line-soft);}
  .wa-row-wrap:last-child{border-bottom:0;}
  .wa-row-wrap .trend-reason{margin-top:3px;}
  .wa-row-wrap .proj-line{margin-top:8px;padding:7px 10px;}
  .wa-row{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:14px;}
  .wa-row .name{color:var(--paper);min-width:0;}
  .wa-row .name b{font-weight:650;}
  .wa-row .team{color:var(--paper-dim);font-size:12.5px;}
  .wa-delta{font-family:var(--font-display);font-size:1.15rem;font-weight:700;white-space:nowrap;}
  .wa-sample{font-size:12px;color:var(--paper-faint);margin-top:6px;}

  .scoring-card{border-radius:var(--r-card);
    padding:22px 24px;margin-bottom:20px;max-width:680px;
  }
  .scoring-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid var(--line-soft);}
  .scoring-row:last-child{border-bottom:0;}
  .scoring-row label{font-size:14px;color:var(--paper);font-weight:550;}
  .scoring-row .sub{display:block;font-size:12px;color:var(--paper-dim);margin-top:2px;font-weight:400;}
  .scoring-row input[type=number]{
    width:88px;min-height:38px;background:var(--panel-2);border:1px solid var(--field-edge);border-radius:var(--r-field);
    color:var(--paper);padding:0 10px;font-weight:600;text-align:right;
  }
  .scoring-row select{
    appearance:none;-webkit-appearance:none;-moz-appearance:none;min-height:38px;
    background:var(--panel-2);border:1px solid var(--field-edge);border-radius:var(--r-field);color:var(--paper);padding:0 28px 0 12px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238793bd' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 10px center;
  }
  .scoring-row input:focus,.scoring-row select:focus{border-color:var(--edge-accent);outline:none;box-shadow:0 0 0 3px var(--tint-accent);}
  .scoring-sub{margin:18px 0 2px;font-size:13px;font-weight:650;color:var(--paper-dim);}
  .scoring-note{font-size:13px;color:var(--paper-dim);margin-top:14px;line-height:1.55;}
  .scoring-save-status{font-family:var(--font-body);font-size:13px;font-weight:600;transition:opacity .3s ease;}
  .scoring-save-status.ok{color:var(--hit);}
  .scoring-save-status.err{color:var(--miss-text);}
  .scoring-save-status a{color:inherit;text-decoration:underline;margin-left:6px;cursor:pointer;}
  .depth-count{font-size:14px;color:var(--paper);white-space:nowrap;font-weight:600;}
  .depth-tag{display:inline-block;margin-left:6px;font-size:11px;font-weight:700;padding:2px 9px;border-radius:var(--r-ctl);}
  .depth-tag.thin{background:var(--miss-dim);color:var(--miss-text);}
  .depth-tag.deep{background:var(--hit-dim);color:var(--hit);}
  .save-hint{font-size:12.5px;color:var(--hit);margin-top:10px;min-height:14px;}
  .team-summary-flag{
    background:var(--miss-dim);color:var(--negative);
    border-radius:12px;padding:11px 14px;margin:14px 0 0;font-size:13.5px;line-height:1.5;
  }

  .matchup-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:start;margin-bottom:20px;}
  @media (max-width:640px){ .matchup-grid{grid-template-columns:1fr;} }
  .matchup-col{border-radius:var(--r-card);padding:20px;}
  .matchup-col h4{font-family:var(--font-display);font-weight:700;font-size:1.3rem;margin:0 0 12px;color:var(--paper);}
  .matchup-total{font-family:var(--font-display);font-size:3rem;color:var(--paper);line-height:.9;}
  .matchup-vs{display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;color:var(--paper-faint);font-size:1.2rem;align-self:center;}
  .trade-stat-wrap{grid-column:1/-1;border-radius:var(--r-card);padding:18px 20px;overflow-x:auto;}
  .trade-stat-table{width:100%;border-collapse:collapse;font-size:14px;}
  .trade-stat-table th{font-family:var(--font-display);font-weight:700;font-size:1.1rem;color:var(--paper);padding-bottom:10px;border-bottom:1px solid var(--rule);}
  .trade-stat-table td{padding:8px 0;border-bottom:1px solid var(--line-soft);color:var(--paper);}
  .trade-stat-table tr:last-child td{border-bottom:0;}
  .tst-val{text-align:center;width:32%;white-space:nowrap;font-weight:600;}
  .tst-label{text-align:center;color:var(--paper-dim);font-size:13px;}
  .trade-stat-note{font-size:12.5px;color:var(--paper-dim);margin-top:12px;line-height:1.55;}
  .roster-row-wrap{border-bottom:1px solid var(--line-soft);}
  .roster-row-wrap:last-child{border-bottom:0;}
  .roster-row{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px;padding:9px 0;}
  .roster-row .rm{cursor:pointer;color:var(--miss-text);font-size:12.5px;font-weight:600;}
  .roster-row-matchup{font-size:12px;color:var(--paper-dim);padding:0 0 9px;}

  /* =====================================================================
     INJURY REPORT
     ===================================================================== */
  .injury-info{margin-top:0;padding-top:12px;border-top:1px solid var(--line-soft);display:grid;gap:8px;}
  .injury-what{font-size:14px;font-weight:650;color:var(--paper);}
  .injury-what span{font-weight:400;color:var(--paper-dim);}
  .injury-eta{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:13.5px;}
  .injury-eta-label{color:var(--paper-dim);font-size:12.5px;}
  .injury-eta b{font-family:var(--font-display);font-weight:700;font-size:1.2rem;text-align:right;color:var(--paper);}

  /* =====================================================================
     POSITIVE EV / ARBITRAGE
     ===================================================================== */
  .disclaimer-box{
    display:flex;gap:12px;align-items:flex-start;margin-bottom:18px;padding:14px 16px;
    background:var(--warn-dim);border:1px solid color-mix(in srgb,var(--warn) 55%,transparent);border-radius:14px;
    font-size:13.5px;line-height:1.55;color:var(--paper);
  }
  .disclaimer-box .dtag{
    flex:none;font-size:11.5px;font-weight:700;color:var(--warn);
    border:1px solid var(--warn);border-radius:var(--r-ctl);padding:2px 9px;margin-top:1px;white-space:nowrap;
  }
  #evFreshnessNote{margin:-4px 0 16px;font-size:12.5px;}

  .kelly-box{
    display:flex;gap:10px 14px;flex-wrap:wrap;align-items:center;margin-bottom:18px;padding:12px;border-radius:var(--r-panel);
  }
  .kelly-result{flex:1 1 280px;font-size:13px;color:var(--paper-dim);line-height:1.55;padding:0 6px;}
  .kelly-result b{color:var(--paper);}

  .ev-card{
    position:relative;display:flex;flex-direction:column;gap:12px;min-width:0;border-radius:var(--r-card);
    padding:18px 18px 16px;
  }
  .ev-card::after{content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:0 3px 3px 0;background:var(--rule);}
  .ev-card.clears::after{background:var(--hit);}
  .ev-card.negative::after{background:var(--miss);}
  .ev-card.plan-preview::after{background:var(--edge-accent);}
  .ev-card .matchup-line{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;}
  .ev-card .matchup-line > div{min-width:0;}
  .ev-card .matchup-line .teams{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:15.5px;font-weight:650;color:var(--paper);line-height:1.35;}
  .ev-card .matchup-line .sub{display:block;margin-top:4px;font-size:12.5px;color:var(--paper-dim);}
  .ev-card .team-logo{width:26px;height:26px;border-radius:50%;padding:0;border:0;background:none;}
  .ev-card .te-badge-ring::before{inset:-3px;}
  .ev-badge{
    flex:none;font-family:var(--font-display);font-weight:800;font-size:1.55rem;line-height:1;
    padding:7px 12px 6px;border-radius:12px;white-space:nowrap;
  }
  .ev-badge.clears{background:var(--hit-dim);color:var(--hit);}
  .ev-badge.negative{background:var(--miss-dim);color:var(--miss-text);}
  .ev-badge.pending{background:var(--panel-2);color:var(--paper-dim);}
  .ev-price-table{display:grid;grid-template-columns:1fr auto;column-gap:0;font-size:13.5px;}
  .ev-price-table .lbl,.ev-price-table .val{padding:8px 0;border-bottom:1px solid var(--line-soft);}
  .ev-price-table .val{padding-left:14px;}
  .ev-price-table .lbl{color:var(--paper-dim);}
  .ev-price-table .val{color:var(--paper);text-align:right;font-weight:600;white-space:nowrap;}
  .ev-price-table .val.best{color:var(--text-accent);font-weight:700;}
  .ev-price-table .val.second{font-weight:700;}
  .ev-price-table .val.third{color:var(--paper-dim);}
  .ev-price-table .val.worst{color:var(--miss-text);}
  /* The sizing suggestion row (evCardHtml's second table, after the
     fair-line caption) reads as one highlighted line, not another row. */
  .ev-card .provenance + .ev-price-table{background:var(--tint-accent);border-radius:12px;padding:2px 12px;align-items:center;}
  .ev-card .provenance + .ev-price-table .lbl,.ev-card .provenance + .ev-price-table .val{border-bottom:0;}
  .ev-card .provenance + .ev-price-table .val{font-family:var(--font-display);font-size:1.25rem;}
  .ev-book-rank{font-size:11px;color:var(--paper-faint);font-weight:600;margin-left:4px;}
  .ev-books-btn{
    align-self:flex-start;min-height:32px;padding:0 13px;border-radius:var(--r-ctl);
    font-size:12.5px;font-weight:650;background:transparent;border:1px solid var(--rule);color:var(--paper-dim);
    transition:border-color .15s,color .15s;
  }
  .ev-books-btn:hover,.ev-books-btn.open{border-color:var(--edge-accent);color:var(--text-accent);}
  .ev-books-drawer{overflow:hidden;max-height:0;opacity:0;transform:translateY(-4px);transition:max-height .22s ease,opacity .18s ease,transform .18s ease;}
  .ev-books-drawer.open{max-height:400px;opacity:1;transform:none;overflow-y:auto;box-shadow:inset 0 -12px 8px -8px var(--panel);}
  .ev-books-list{margin-top:4px;}
  .ev-card .provenance{display:flex;align-items:center;font-size:12px;color:var(--paper-dim);}
  .ev-fresh-dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:7px;flex:none;background:var(--paper-faint);}
  .ev-fresh-dot.fresh{background:var(--hit);}
  .ev-fresh-dot.stale{background:var(--warn);}
  .ev-card-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:flex-end;margin-top:auto;}
  /* The same visible "MOCK" / "SIMULATED" tag wherever sample data shows
     (EV/Arb rows, Movers, Injury Report, Trend Board, calendar examples),
     so it can never be mistaken for real data. */
  .ev-mock-tag,.mock-tag{
    display:inline-flex;align-items:center;vertical-align:1px;
    font-size:var(--fs-min);font-weight:700;letter-spacing:.06em;
    background:var(--miss-dim);color:var(--miss-text);border-radius:6px;padding:2px 6px;
  }
  .arb-leg-table{width:100%;border-collapse:collapse;font-size:13.5px;}
  .arb-leg-table th{font-size:12px;font-weight:600;color:var(--paper-dim);text-align:left;padding:0 6px 8px 0;border-bottom:1px solid var(--rule);}
  .arb-leg-table td{padding:9px 6px 9px 0;border-bottom:1px solid var(--line-soft);color:var(--paper);font-weight:550;}
  .arb-leg-table td:nth-child(3),.arb-leg-table td:nth-child(4){font-weight:700;}
  .arb-leg-table tr:last-child td{border-bottom:0;}

  /* Sportsbook filter: trigger + popover checklist */
  .book-filter-group{position:relative;}
  .filter-group.book-filter-group{padding:0;background:none;border:0;}
  .book-filter-popover{
    position:absolute;top:calc(100% + 8px);left:0;z-index:45;width:min(310px,calc(100vw - 32px));
    background:var(--panel);border:1px solid var(--rule);border-radius:16px;
    max-height:320px;overflow-y:auto;box-shadow:var(--pop-shadow);
  }
  .book-filter-popover-head{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:11px 14px;border-bottom:1px solid var(--line-soft);font-size:12px;color:var(--paper-dim);
    position:sticky;top:0;background:var(--panel);z-index:1;
  }
  .book-filter-bulk-actions{display:flex;gap:12px;}
  .book-filter-bulk-actions button{background:none;border:0;color:var(--text-accent);font-size:12.5px;font-weight:650;padding:0;}
  .book-filter-soon-note{padding:6px 14px 8px;margin-top:0;}
  .book-filter-list{list-style:none;margin:0;padding:4px;}
  .book-filter-row{
    display:flex;align-items:center;gap:11px;padding:9px 10px;cursor:pointer;
    font-size:14px;color:var(--paper-dim);border-radius:10px;
  }
  .book-filter-row:hover,.book-filter-row:focus{background:var(--panel-2);outline:none;}
  .book-filter-dot{width:16px;height:16px;flex:none;border-radius:5px;border:1.5px solid var(--rule);background:transparent;position:relative;}
  .book-filter-row.on{color:var(--paper);}
  .book-filter-row.on .book-filter-dot{background:var(--brand-primary);border-color:var(--brand-primary);}
  .book-filter-row.on .book-filter-dot::after{content:"";position:absolute;left:4.5px;top:1.5px;width:4px;height:8px;border:solid var(--on-accent);border-width:0 2px 2px 0;transform:rotate(45deg);}
  .book-filter-row.soon{opacity:.45;cursor:default;text-decoration:line-through;}
  .soon-tag{margin-left:auto;font-size:11px;font-weight:650;color:var(--paper-dim);text-decoration:none;}

  /* Free vs Pro preview */
  .plan-lock{
    display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;
    border:1px dashed var(--edge-accent);background:var(--tint-accent);border-radius:var(--r-panel);
    padding:16px 18px;margin:0 0 16px;font-size:14px;color:var(--paper);line-height:1.55;
  }
  .plan-lock b{color:var(--text-accent);}
  .plan-lock-cta{
    display:inline-flex;align-items:center;min-height:38px;padding:0 18px;border-radius:var(--r-ctl);font-weight:700;text-decoration:none;
  }
  .plan-lock-cta:hover{background:var(--accent-strong);color:var(--on-accent);}
  .plan-lock-lg{flex-direction:column;align-items:flex-start;padding:30px 28px;font-size:15px;max-width:640px;}
  .plan-lock-row{grid-column:1/-1;}
  .plan-preview-note{font-size:13px;color:var(--paper-dim);margin:0;line-height:1.55;}
  body.plan-free #evView .kelly-box{display:none;}
  body.plan-free #calendarView > :not(h2):not(.plan-lock){display:none !important;}

  /* =====================================================================
     TRACKING CALENDAR
     ===================================================================== */
  .cal-month-nav{display:flex;align-items:center;gap:10px;margin:6px 0 16px;flex-wrap:wrap;}
  .cal-month-nav button{
    min-height:40px;padding:0 15px;border-radius:12px;font-size:13.5px;font-weight:650;
    background:var(--panel);border:1px solid var(--line-soft);color:var(--paper);
  }
  .cal-month-nav button:hover{border-color:var(--edge-accent);}
  .cal-month-nav #calSettleBtn{margin-left:auto;background:var(--tint-accent);border-color:var(--edge-accent);color:var(--text-accent);}
  .cal-month-nav #calSettleBtn:disabled{opacity:.6;cursor:progress;}
  .cal-month-title{font-family:var(--font-display);font-weight:700;font-size:1.7rem;color:var(--paper);min-width:9ch;text-align:center;}
  .cal-money-row{
    display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 18px;padding:12px 14px;border-radius:var(--r-panel);font-size:13px;color:var(--paper-dim);
  }
  .cal-money-row label{font-weight:600;}
  .cal-money-row input{
    width:112px;min-height:38px;padding:0 12px;border-radius:var(--r-field);border:1px solid var(--field-edge);
    background:var(--panel-2);color:var(--paper);font-size:14px;font-weight:650;
  }
  .cal-money-row input:focus{border-color:var(--edge-accent);outline:none;box-shadow:0 0 0 3px var(--tint-accent);}
  .cal-money-row #calArbPct{width:74px;}
  .cal-pct{display:inline-flex;align-items:center;gap:6px;}
  .cal-money-note{flex-basis:100%;font-size:12.5px;color:var(--paper-faint);}
  .cal-month-total{font-family:var(--font-display);font-weight:700;font-size:2rem;line-height:1.1;color:var(--paper-dim);margin:6px 0 12px;}
  .cal-month-total.pos{color:var(--hit);}
  .cal-month-total.neg{color:var(--miss-text);}
  .cal-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:0 0 18px;}
  .cal-stat{border-radius:16px;padding:13px 15px;display:flex;flex-direction:column;gap:3px;min-width:0;}
  .cal-stat span{font-size:12.5px;color:var(--paper-dim);font-weight:550;}
  .cal-stat b{font-family:var(--font-display);font-weight:700;font-size:1.6rem;line-height:1.05;color:var(--paper);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .cal-stat b.pos{color:var(--hit);}
  .cal-stat b.neg{color:var(--miss-text);}
  .cal-assumed{grid-column:1/-1;margin:0;font-size:12.5px;color:var(--paper-dim);}
  .calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin-bottom:26px;}
  .cal-daylabel{font-size:12px;font-weight:650;color:var(--paper-faint);text-align:left;padding:0 4px 4px;}
  .cal-day{
    appearance:none;font:inherit;text-align:left;min-width:0;min-height:86px;overflow:hidden;
    display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:4px;
    padding:10px 11px;border-radius:14px;border:1px solid var(--line-soft);background:var(--panel);color:var(--paper-dim);
    transition:transform .12s var(--ease-out),border-color .15s var(--ease-out),background .15s;
  }
  .cal-day:hover{border-color:var(--edge-accent);}
  .cal-day:active{transform:scale(.97);}
  .cal-day--blank{visibility:hidden;cursor:default;}
  .cal-day .num{font-size:13px;font-weight:650;color:var(--paper-dim);}
  .cal-day.today{border-color:var(--edge-accent);box-shadow:inset 0 0 0 1px var(--edge-accent);}
  .cal-day.today .num{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;margin:-3px 0 0 -4px;border-radius:var(--r-ctl);background:var(--brand-primary);color:var(--on-accent);}
  .cal-day.selected{border-color:var(--paper-dim);}
  .cal-day .amt{font-family:var(--font-display);font-weight:700;font-size:1.25rem;line-height:1;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .cal-day .amt.pend{font-family:var(--font-body);font-size:11.5px;font-weight:550;color:var(--paper-dim);}
  .cal-day .amt .short{display:none;}
  .cal-day.win{background:linear-gradient(170deg,var(--hit-dim),transparent 120%),var(--panel);border-color:color-mix(in srgb,var(--hit) 40%,transparent);}
  .cal-day.win .amt:not(.pend){color:var(--hit);}
  .cal-day.loss{background:linear-gradient(170deg,var(--miss-dim),transparent 120%),var(--panel);border-color:color-mix(in srgb,var(--miss) 40%,transparent);}
  .cal-day.loss .amt:not(.pend){color:var(--miss-text);}
  .cal-day.pending{background:var(--panel-2);border-color:var(--rule);}
  .cal-day.pending .amt{color:var(--paper);}
  .cal-detail-list{display:flex;flex-direction:column;gap:10px;margin-bottom:10px;}
  .cal-detail-row{
    display:flex;justify-content:space-between;align-items:center;gap:12px;border-radius:14px;padding:13px 16px;font-size:14px;color:var(--paper);
  }
  .cal-money{display:block;margin-top:4px;font-size:13px;color:var(--paper-dim);}
  .cal-money b.pos{color:var(--hit);}
  .cal-money b.neg{color:var(--miss-text);}
  .cal-outcome{font-size:12px;font-weight:700;padding:4px 11px;border-radius:var(--r-ctl);white-space:nowrap;text-transform:capitalize;}
  .cal-outcome.win{background:var(--hit-dim);color:var(--hit);}
  .cal-outcome.loss{background:var(--miss-dim);color:var(--miss-text);}
  .cal-outcome.pending,.cal-outcome.push{background:var(--panel-2);color:var(--paper-dim);}
  .cal-outcome.half_win{background:var(--hit-dim);color:var(--hit);}
  .cal-outcome.half_loss{background:var(--miss-dim);color:var(--miss-text);}
  /* Result picker: the result pill itself is the control (2026-09-27). */
  .cal-result-select.cal-outcome{text-transform:none;appearance:none;-webkit-appearance:none;border:1px solid var(--line-soft);cursor:pointer;font-family:inherit;
    padding-right:26px;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
    background-position:calc(100% - 13px) 55%,calc(100% - 9px) 55%;background-size:4px 4px;background-repeat:no-repeat;min-height:32px;}
  .cal-result-select option{background:var(--panel);color:var(--paper);}
  .cal-line{display:block;}
  .cal-line b{display:block;font-weight:650;color:var(--paper);}
  .cal-line-sub{display:block;margin-top:2px;font-size:13px;color:var(--paper-dim);}
  .cal-line-sub .line-yours{margin-left:2px;}
  .track-side{margin-bottom:10px;}
  #calendarView > label.mock-toggle-label{margin:0 0 12px;}

  /* =====================================================================
     OVERLAYS: toast, onboarding modal, settings sheet
     ===================================================================== */
  .te-toast{
    position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));z-index:500;
    transform:translate(-50%,8px);opacity:0;pointer-events:none;
    font-size:13.5px;font-weight:600;padding:11px 18px;border-radius:var(--r-ctl);white-space:nowrap;
    border:1px solid transparent;box-shadow:var(--pop-shadow);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    transition:opacity .18s ease,transform .22s var(--ease-out);
  }
  .te-toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto;}
  .te-toast--ok{background:color-mix(in srgb,var(--panel) 80%,var(--hit) 20%);color:var(--paper);border-color:color-mix(in srgb,var(--hit) 50%,transparent);}
  .te-toast--err{background:color-mix(in srgb,var(--panel) 80%,var(--miss) 20%);color:var(--paper);border-color:color-mix(in srgb,var(--miss) 55%,transparent);}
  .te-toast a{color:inherit;text-decoration:underline;margin-left:8px;cursor:pointer;}
  /* Tap-to-explain hint bubble (review P-012b): one shared bubble for every
     [data-tip] element, opened by hover, keyboard focus or tap. It stays in
     the page as an empty live region when closed, so screen readers announce
     each hint as it opens. */
  .te-tip{
    position:fixed;left:0;top:0;z-index:520;max-width:min(300px,calc(100vw - 16px));
    font-size:12.5px;line-height:1.45;font-weight:550;white-space:pre-line;text-align:left;
    color:var(--paper);background:var(--panel-3);border:0 solid transparent;border-radius:12px;
    opacity:0;pointer-events:none;transition:opacity .12s ease;
  }
  /* Closed = empty, no padding, no border: a 0x0 box nothing can mistake for open. */
  /* Trend Board sport menu: opens from the Trend Board / Trends button. Same
     surface as the hint bubble; one button per sport, the current one ticked. */
  .sport-menu{
    position:fixed;left:0;top:0;z-index:530;min-width:180px;padding:6px;display:grid;gap:2px;
    background:var(--panel-3);border:1px solid var(--edge-accent);border-radius:14px;box-shadow:var(--pop-shadow);
  }
  .sport-menu-title{font-size:12px;font-weight:600;color:var(--paper-dim);padding:6px 10px 4px;}
  .sport-menu button{
    display:flex;align-items:center;gap:10px;min-height:40px;padding:0 10px;border:0;border-radius:10px;
    background:none;color:var(--paper);font:inherit;font-weight:600;text-align:left;cursor:pointer;
  }
  .sport-menu button::before{content:"";width:8px;height:8px;border-radius:50%;border:1.5px solid var(--paper-faint);flex:none;}
  .sport-menu button[aria-checked="true"]{background:var(--tint-accent);color:var(--text-accent);}
  .sport-menu button[aria-checked="true"]::before{background:var(--brand-primary);border-color:var(--brand-primary);}
  .sport-menu button:hover:not([disabled]){background:var(--panel-2);}
  .sport-menu button[disabled]{opacity:.55;cursor:default;}
  .sport-menu button span{margin-left:auto;font-size:11.5px;font-weight:550;color:var(--paper-faint);}
  .te-tip.show{opacity:1;padding:8px 11px;border-width:1px;border-color:var(--edge-accent);box-shadow:var(--pop-shadow);}
  @media (prefers-reduced-motion:reduce){ .te-tip{transition:none;} }
  [data-tip]{cursor:help;}
  /* Text hints carry a dotted underline so a tap target is visible without hover. */
  .has-tip,.card-provenance,.provenance[data-tip],.freshness-bar [data-tip],.injury-eta-label{
    text-decoration-thickness:1px;text-underline-offset:3px;
  }

  .modal-overlay{
    position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;
    background:var(--scrim);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  }
  .modal-box{
    position:relative;overflow:hidden;max-width:540px;width:100%;
    background:var(--panel);border:1px solid var(--rule);border-radius:26px;padding:32px 32px 28px;box-shadow:var(--pop-shadow);
  }
  .modal-box > *{position:relative;}
  .modal-title{font-family:var(--font-display);font-weight:700;font-size:2.3rem;line-height:1;color:var(--paper);margin-bottom:14px;}
  .modal-box p{font-size:15px;line-height:1.6;color:var(--paper-dim);margin:0 0 18px;}
  .modal-list{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:12px;color:var(--paper-dim);font-size:14.5px;line-height:1.55;}
  .modal-list li{position:relative;padding-left:30px;}
  .modal-list li::before{
    content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:7px;background:var(--tint-accent);
  }
  .modal-list li::after{content:"";position:absolute;left:7px;top:6px;width:5px;height:9px;border:solid var(--text-accent);border-width:0 2px 2px 0;transform:rotate(45deg);}
  .modal-list b{color:var(--paper);}
  .modal-close-btn{
    width:100%;min-height:50px;border:0;border-radius:14px;font-size:16px;font-weight:700;
    transition:background .15s;
  }
  .modal-close-btn:hover{background:var(--accent-strong);color:var(--on-accent);}
  /* 19+ gate (review P-002): the two existing buttons stacked full width. */
  /* Track window (2026-09-26): the modal box, .seg, .field-row and the
     age-gate button stack, reused as they are; only these text roles are new. */
  .track-box .track-what{margin:0 0 14px;font-weight:650;color:var(--paper);}
  .track-box .track-help{margin:10px 0 14px;font-size:13px;color:var(--paper-dim);}
  .track-box .track-error{margin:0 0 10px;min-height:1.2em;font-size:13px;font-weight:600;color:var(--miss-text);}
  .track-box .track-note{margin:12px 0 0;font-size:12px;color:var(--paper-faint);}
  .age-gate-actions{display:grid;gap:10px;}
  .age-gate-actions .load-more-btn{width:100%;}

  .sheet-overlay{
    position:fixed;inset:0;z-index:300;display:flex;justify-content:flex-end;
    background:var(--scrim);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
    animation:te-fade .18s ease both;
  }
  .sheet{
    width:min(400px,100%);height:100%;overflow-y:auto;background:var(--panel);border-left:1px solid var(--rule);
    padding:22px 22px calc(28px + env(safe-area-inset-bottom));box-shadow:var(--pop-shadow);
    animation:te-slide-in .26s var(--ease-out) both;
  }
  .sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
  .sheet-head h2{font-family:var(--font-display);font-weight:700;font-size:2rem;line-height:1;margin:0;}
  .sheet-section{padding:18px 0;border-bottom:1px solid var(--line-soft);}
  .sheet-section:last-of-type{border-bottom:0;}
  .sheet-section h3{font-size:14px;font-weight:650;margin:0 0 4px;color:var(--paper);}
  .sheet-section p{font-size:13px;color:var(--paper-dim);margin:0 0 12px;line-height:1.5;}
  .seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:3px;padding:3px;border-radius:12px;background:var(--panel-2);border:1px solid var(--line-soft);}
  .seg button,.seg .modebtn{
    min-height:38px;border:0;border-radius:9px;background:none;color:var(--paper-dim);font-size:13.5px;font-weight:650;padding:0 8px;
  }
  .seg button:hover{color:var(--paper);}
  .seg button[aria-pressed="true"],.seg .modebtn.active,.seg .plan-btn.on{background:var(--panel);color:var(--paper);box-shadow:0 1px 3px rgba(0,0,0,.25),inset 0 0 0 1px var(--edge-accent);}
  .seg.odds-format-switch{display:grid;}
  .seg .plan-btn{border-radius:9px;}
  .sheet-link-btn{
    display:flex;align-items:center;justify-content:space-between;width:100%;min-height:46px;padding:0 14px;
    border-radius:12px;border:1px solid var(--line-soft);background:var(--panel-2);color:var(--paper);font-size:14px;font-weight:600;text-decoration:none;
  }
  .sheet-link-btn + .sheet-link-btn{margin-top:8px;}
  .sheet-link-btn:hover{border-color:var(--edge-accent);}
  .sheet-link-btn::after{content:"";width:7px;height:7px;border:solid var(--paper-dim);border-width:1.6px 1.6px 0 0;transform:rotate(45deg);}
  .sheet-legal{font-size:12.5px;color:var(--paper-faint);line-height:1.55;margin:18px 0 0;}
  @keyframes te-fade{from{opacity:0;}to{opacity:1;}}
  @keyframes te-slide-in{from{transform:translateX(24px);opacity:.4;}to{transform:none;opacity:1;}}

  /* =====================================================================
     PRESS FEEDBACK
     ===================================================================== */
  @media (prefers-reduced-motion: no-preference){
    :where(.modebtn,.sporttab,.tf-more-btn,.tf-clear-btn,.share-btn,.watchlist-btn,.league-chip,.load-more-btn,.split-btn,.plan-btn,.icon-btn,.empty-action,.plan-lock-cta):active{transform:scale(.97);}
    :where(.modebtn,.sporttab,.tf-more-btn,.tf-clear-btn,.share-btn,.watchlist-btn,.league-chip,.load-more-btn,.split-btn,.plan-btn,.icon-btn){transition-property:transform,background,color,border-color;transition-duration:.14s,.18s,.18s,.18s;}
  }

  /* =====================================================================
     LAYOUT: desktop rail (1100px and up)
     ===================================================================== */
  @media (min-width:1100px){
    body{padding:0 40px 0 calc(var(--rail-w) + 40px);}
    .shell{max-width:1320px;}
    .topbar{
      position:fixed;left:0;top:0;bottom:0;width:var(--rail-w);z-index:40;
      flex-direction:column;align-items:stretch;gap:6px;
      padding:22px 14px 16px;background:var(--rail);overflow-y:auto;
    }
    .brand{margin:0 0 18px;padding:0 8px;}
    #modeSwitch{flex-direction:column;align-items:stretch;gap:2px;}
    .nav-label{margin:14px 0 6px;}
    .nav-label:first-child{margin-top:0;}
    #modeSwitch .modebtn{min-height:42px;padding:0 12px;border-radius:12px;}
    #modeSwitch .modebtn:hover{background:var(--panel-2);color:var(--paper);}
    #modeSwitch .modebtn.active{color:var(--paper);font-weight:650;}
    #modeSwitch .modebtn.active .mb-ico{color:var(--brand-primary);}
    #modeSwitch .modebtn.active::before{
      content:"";position:absolute;left:-14px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;
    }
    /* Desktop: the sport buttons sit at the top of the board (and in the
       Trend Board menu), not at the bottom of the rail where they were hard
       to find (Mina 2026-09-26). */
    .topbar .sporttabs{display:none;}
    .board-sport-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 20px;}
    .settings-btn{order:3;margin-top:auto;justify-content:flex-start;width:100%;min-height:44px;padding:0 12px;background:none;border-color:transparent;}
    .settings-btn:hover{background:var(--panel-2);border-color:transparent;}
    .rail-note{order:4;font-size:11.5px;color:var(--paper-faint);padding:8px 12px 0;line-height:1.5;}
  }

  /* =====================================================================
     LAYOUT: tablet + phone (below 1100px): sticky top bar, bottom tabs
     ===================================================================== */
  @media (max-width:1099px){
    body{padding:0 20px calc(var(--tabbar-h) + env(safe-area-inset-bottom));}
    /* The blur lives on a pseudo-element: backdrop-filter on the bar itself
       would make it the containing block for the fixed bottom tab bar
       inside it, pinning the tabs to the header instead of the screen. */
    .topbar{
      position:sticky;top:0;z-index:40;flex-wrap:wrap;gap:10px 12px;isolation:isolate;
      margin:0 -20px;padding:calc(10px + env(safe-area-inset-top)) 20px 10px;
      border-bottom:1px solid var(--line-soft);
    }
    .topbar::before{
      content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
      background:color-mix(in srgb,var(--rail) 86%,transparent);
      -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
    }
    .brand svg{width:30px;height:30px;}
    .brand b{font-size:1.35rem;}
    .brand span{display:none;}
    .settings-btn .sb-label{display:none;}
    .settings-btn{min-width:40px;padding:0;}
    .rail-note,.nav-label{display:none;}
    .topbar .sporttabs{
      order:5;flex-basis:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -20px;padding:0 20px 2px;
    }
    .topbar .sporttabs::-webkit-scrollbar{display:none;}
    .topbar .sporttab{flex:none;min-height:36px;}
    .topbar .sporttabs{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);}
    #modeSwitch{
      position:fixed;left:0;right:0;bottom:0;z-index:60;
      display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0;
      padding:6px 4px calc(6px + env(safe-area-inset-bottom));
      background:color-mix(in srgb,var(--rail) 90%,transparent);
      -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
      border-top:1px solid var(--line-soft);
    }
    #modeSwitch .modebtn{
      flex-direction:column;justify-content:center;gap:4px;min-height:52px;padding:4px 0;border-radius:14px;
      font-size:var(--fs-min);font-weight:650;letter-spacing:.01em;
    }
    #modeSwitch .mb-label{display:none;}
    #modeSwitch .mb-short{display:block;}
    #modeSwitch .mb-ico{width:22px;height:22px;padding:0;}
    #modeSwitch .modebtn.active{color:var(--text-accent);}
    #modeSwitch .modebtn.active::before{
      content:"";position:absolute;top:5px;left:50%;width:50px;height:30px;margin-left:-25px;border-radius:var(--r-ctl);background:var(--tint-accent);z-index:-1;
    }
    #modeSwitch .modebtn{isolation:isolate;}
    body.plan-free #modeSwitch .modebtn:is([data-mode="ev"],[data-mode="arb"],[data-mode="calendar"])::after{
      content:"";position:absolute;top:7px;right:calc(50% - 16px);width:7px;height:7px;border-radius:50%;background:var(--brand-primary);box-shadow:0 0 0 2px var(--rail);
    }
    .utility-row{padding-top:14px;}
    .utility-row .plan-switch{display:none;}
    .freshness-bar{margin-left:0;flex-basis:100%;}
    .te-toast{bottom:calc(var(--tabbar-h) + 14px + env(safe-area-inset-bottom));}
    .sheet-overlay{align-items:flex-end;}
    .sheet{width:100%;height:auto;max-height:88vh;border-left:0;border-top:1px solid var(--rule);border-radius:24px 24px 0 0;animation-name:te-slide-up;}
  }
  @keyframes te-slide-up{from{transform:translateY(28px);opacity:.4;}to{transform:none;opacity:1;}}

  /* =====================================================================
     LAYOUT: phone (640px and below)
     ===================================================================== */
  @media (max-width:640px){
    body{padding-left:14px;padding-right:14px;font-size:14px;}
    .topbar{margin:0 -14px;padding-left:14px;padding-right:14px;}
    .topbar .sporttabs{margin:0 -14px;padding:0 14px 2px;}
    .utility-row{gap:6px 14px;font-size:12px;}
    h2.section{margin-top:30px;}
    .view-title{margin-top:14px;}
    .section-intro{font-size:14px;}
    .grid{grid-template-columns:1fr;gap:14px;}
    .card{padding:16px 16px 12px;border-radius:18px;}
    .rate-hero .rate-num{font-size:2.5rem;}
    .spotlight{padding:18px;gap:16px;border-radius:20px;}
    .split-btn,.line-input{min-height:38px;}
    .share-btn,.watchlist-btn{min-height:40px;padding:0 15px;}
    .cal-month-nav #calSettleBtn{margin-left:0;flex-basis:100%;}
    .cal-month-title{font-size:1.45rem;flex:1;}
    .calendar-grid{gap:4px;}
    .cal-daylabel{text-align:center;padding:0 0 2px;font-size:11px;}
    .cal-day{min-height:58px;padding:6px;border-radius:10px;}
    .cal-day .num{font-size:11.5px;}
    .cal-day.today .num{min-width:20px;height:20px;margin:-2px 0 0 -2px;}
    .cal-day .amt{font-size:.95rem;}
    .cal-day .amt .full{display:none;}
    .cal-day .amt .short{display:inline;}
    .cal-day .amt.pend{font-size:var(--fs-min);}
    .cal-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
    .cal-stat b{font-size:1.35rem;}
    .kelly-box{padding:10px;}
    .kelly-box .filter-group{flex:1 1 100%;}
    .ev-card{padding:16px;}
    .modal-box{padding:26px 22px 22px;border-radius:22px;}
    .modal-title{font-size:2rem;}
    .te-toast{left:14px;right:14px;transform:translate(0,8px);white-space:normal;text-align:center;border-radius:16px;}
    .te-toast.show{transform:none;}
  }

  /* =====================================================================
     ROUND 2 (2026-09-25): "Holo" futuristic layer + new chart types.
     Research: ops/research/charts-and-futuristic-ui-2026-09-25.md. Built with
     the userinterface-wiki rules: layered shadows from one light source
     above, alpha borders, concentric radii, press scale, motion <= 300ms for
     anything the user triggers, one focal animation at a time.
     ===================================================================== */

  /* ---- surfaces: glass fill + rim lit by the team colour ---- */
  /* Full review Q-084: .card has two blocks now: layout (near the top) and surface (here, incl. its shadow). */
  .card{
    box-shadow:0 1px 0 var(--hi) inset,0 12px 28px -18px rgba(0,0,0,.55);
    border:1px solid transparent;
    background:
      linear-gradient(170deg,var(--fill-a),var(--fill-b)) padding-box,
      linear-gradient(145deg,transparent 0%,transparent 18%,var(--rim) 55%,var(--rim) 100%) border-box,
      var(--team-chip,linear-gradient(var(--rim),var(--rim))) 45% 22% / 3000% border-box;
  }
  .ev-card,.watch-avoid-col,.matchup-col,.scoring-card,.cal-stat,.cal-detail-row,.trade-stat-wrap,.filterbar,.kelly-box,.cal-money-row,.heatmap-wrap{
    border:1px solid transparent;
    background:
      linear-gradient(170deg,var(--fill-a),var(--fill-b)) padding-box,
      linear-gradient(150deg,color-mix(in srgb,var(--brand-primary) 38%,transparent),var(--rim) 40%,var(--rim)) border-box;
    box-shadow:var(--depth);
  }
  .spotlight{
    border:1px solid transparent;
  }


  /* Holo edge on the things you act on */
  @media (min-width:1100px){ #modeSwitch .modebtn.active::before{background:var(--holo);} }
  .empty-action,.plan-lock-cta,.modal-close-btn,.watchlist-btn.on,.load-more-btn:hover{
    background:var(--btn-primary-fill);box-shadow:var(--btn-primary-shadow);
    border-color:transparent;color:var(--on-accent);
  }
  .load-more-btn:hover{color:var(--on-accent);}


  /* =====================================================================
     CHARTS (round 2)
     ===================================================================== */
  /* Margin chart: prop line = zero axis, bars grow up (over) or down (under). */
  .chart{align-items:stretch;gap:5px;}
  .chart .bar-wrap{gap:3px;}
  .mplot{position:relative;width:100%;}
  .mplot::after{
    content:"";position:absolute;left:-3px;right:-3px;height:0;pointer-events:none;
    bottom:calc(var(--pad) + (100% - 2 * var(--pad)) * var(--a));
    border-top:1px solid color-mix(in srgb,var(--paper) 38%,transparent);
  }
  .bar-wrap:first-child > .mplot::after{left:0;}
  .bar-wrap:last-child > .mplot::after{right:0;}
  /* Natural finish (Mina 2026-09-26: "less computer/AI look, same data"):
     flat fills softened slightly toward the card, no glow, no gloss. */
  .mbar{
    --fill:color-mix(in srgb,var(--c) 86%,var(--panel));
    position:absolute;min-height:2px;
    bottom:calc(var(--pad) + (100% - 2 * var(--pad)) * var(--b));
    height:calc((100% - 2 * var(--pad)) * var(--h));
  }
  .mbar.flat{border-radius:1px;}
  /* A miss is a hollow ring (LOLLIPOP section below), so hit/miss never relies on colour alone (review P-016). */
  .mbar.flat.miss{background:var(--fill);}
  .mplot .val{position:absolute;left:-4px;right:-4px;text-align:center;font-size:11px;font-weight:700;line-height:1;white-space:nowrap;}

  /* Window meters */
  .badges{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:8px;flex:1 1 100%;}
  .meter{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:7px;font-size:12px;min-width:0;}
  .m-l{font-weight:650;color:var(--paper-dim);}
  .m-t{position:relative;height:6px;border-radius:3px;background:var(--panel-3);overflow:hidden;}
  .m-t i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:color-mix(in srgb,var(--c) 86%,var(--panel));}
  .meter b{font-weight:700;font-size:12.5px;}
  .rate-row{align-items:center;}

  /* Spotlight columns: flat bars and a plain dashed prop line (the 3D
     faces and the glass plane were retired 2026-09-26 for a natural look). */
  .spotlight-chart .bar.col3d{
    position:relative;
  }
  .spotlight-chart .bar-track[style*="--lp"]::after{
    bottom:var(--lp);height:0;z-index:2;
    border-top:1.5px dashed color-mix(in srgb,var(--paper) 55%,transparent);
  }
  .spotlight-chart .bar-track[style*="--lp"]::after{left:-7px;right:-7px;}
  .spotlight-chart .bar-wrap:first-child > .bar-track::after{left:0;}
  .spotlight-chart .bar-wrap:last-child > .bar-track::after{right:0;}
  @media (prefers-reduced-motion: no-preference){
    .spotlight-chart .bar.col3d{animation:te-rise .6s var(--ease-out) both;}
  }

  /* Fantasy area line */
  .fl-chart{position:relative;}
  .fl-chart svg{display:block;width:100%;height:auto;overflow:visible;}
  .fl-area{fill:color-mix(in srgb,var(--brand-primary) 16%,transparent);}
  .fl-line{fill:none;stroke:var(--brand-primary);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round;}
  .fl-form{stroke:var(--accent-2);stroke-width:1.4;stroke-dasharray:4 4;}
  .fl-zero{stroke:var(--miss);stroke-width:1;opacity:.5;}
  .fl-chart circle{fill:var(--panel);stroke:var(--hit);stroke-width:2.2;}
  .fl-chart .neg circle{stroke:var(--miss);}
  .fl-chart text{font:600 10px var(--font-body);fill:var(--paper-dim);text-anchor:middle;}
  .fl-chart .fl-val{fill:var(--paper);font-weight:700;font-size:var(--fs-min);}
  .fl-chart .fl-opp{fill:var(--paper-faint);font-size:var(--fs-min);}
  .fl-chart{display:flex;flex-direction:column-reverse;gap:4px;}
  .fl-key{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--paper-dim);}
  .fl-key i{width:16px;border-top:1.5px dashed var(--accent-2);}

  /* Movers dumbbell: full history -> last 5 on a 0-100% track */
  .dumbbell{position:relative;height:14px;margin-top:8px;border-radius:8px;
    background:linear-gradient(90deg,var(--panel-3),var(--panel-3)) center/100% 4px no-repeat;}
  .dumbbell i{position:absolute;top:50%;transform:translate(-50%,-50%);}
  .db-bar{left:var(--l) !important;width:var(--w);height:4px;transform:translateY(-50%) !important;border-radius:4px;}
  .dumbbell.up .db-bar{background:linear-gradient(90deg,color-mix(in srgb,var(--hit) 25%,transparent),var(--hit));}
  .dumbbell.down .db-bar{background:linear-gradient(90deg,var(--miss),color-mix(in srgb,var(--miss) 25%,transparent));}
  .db-full{left:var(--f);width:10px;height:10px;border-radius:50%;background:var(--panel);border:2px solid var(--paper-dim);}
  .db-last{left:var(--s);width:12px;height:12px;border-radius:50%;}
  .dumbbell.up .db-last{background:var(--hit);box-shadow:0 0 10px var(--hit);}
  .dumbbell.down .db-last{background:var(--miss);box-shadow:0 0 10px var(--miss);}

  /* EV chance gap */
  .chance-gap{display:grid;gap:7px;}
  .cg-track{position:relative;height:10px;border-radius:10px;background:var(--panel-3);box-shadow:inset 0 1px 2px rgba(0,0,0,.35);}
  .cg-fill{position:absolute;top:0;bottom:0;border-radius:10px;}
  .chance-gap.pos .cg-fill{background:linear-gradient(90deg,color-mix(in srgb,var(--hit) 30%,transparent),var(--hit));}
  .chance-gap.neg .cg-fill{background:color-mix(in srgb,var(--miss) 60%,transparent);}
  .cg-track b{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;transform:translate(-50%,-50%);}
  .cg-fair{background:var(--paper);box-shadow:0 0 0 3px var(--panel);}
  .cg-impl{background:var(--panel);border:2px solid var(--brand-primary);}
  .cg-key{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--paper-dim);}
  .cg-key span{display:inline-flex;align-items:center;gap:6px;}
  .cg-key i{width:9px;height:9px;border-radius:50%;}
  .k-fair{background:var(--paper);}
  .k-impl{border:2px solid var(--brand-primary);}

  /* Arbitrage stake split */
  .stake-split{display:flex;height:26px;border-radius:9px;overflow:hidden;gap:2px;background:var(--panel-3);}
  .stake-split i{display:flex;align-items:center;justify-content:center;min-width:0;font-style:normal;font-size:11.5px;font-weight:700;color:var(--on-accent);white-space:nowrap;overflow:hidden;}
  .stake-split span{padding:0 6px;overflow:hidden;text-overflow:ellipsis;}
  .stake-split .s0{background:linear-gradient(180deg,color-mix(in srgb,var(--brand-primary) 100%,white 12%),var(--brand-primary));}
  .stake-split .s1{background:linear-gradient(180deg,color-mix(in srgb,var(--accent-2) 100%,white 12%),var(--accent-2));}
  .stake-split .s2{background:linear-gradient(180deg,color-mix(in srgb,var(--accent-3) 100%,white 12%),var(--accent-3));}

  /* Trade butterfly bars */
  .bf-cell{position:relative;}
  .bf-cell em{position:relative;font-style:normal;z-index:1;}
  .bf{position:absolute;top:22%;bottom:22%;border-radius:4px;opacity:.9;}
  .bf-cell.a .bf{right:6px;background:linear-gradient(270deg,color-mix(in srgb,var(--brand-primary) 45%,transparent),transparent);}
  .bf-cell.b .bf{left:6px;background:linear-gradient(90deg,color-mix(in srgb,var(--accent-2) 45%,transparent),transparent);}
  .bf-cell.a{text-align:right;padding-right:12px;}
  .bf-cell.b{text-align:left;padding-left:12px;}
  .mc-cap{font-size:12.5px;color:var(--paper-dim);margin:4px 0 12px;font-weight:550;}

  /* Weekly matchup tug bar */
  .tug{margin:4px 0 26px;display:grid;gap:8px;}
  .tug-bar{height:12px;border-radius:12px;overflow:hidden;background:linear-gradient(90deg,transparent,var(--accent-2));box-shadow:inset 0 1px 2px rgba(0,0,0,.35);}
  .tug-bar i{display:block;height:100%;background:var(--holo);border-radius:12px 0 0 12px;}
  .tug-key{display:flex;justify-content:space-between;font-family:var(--font-display);font-weight:700;font-size:1.2rem;}

  /* Matchup heatmap */
  .heatmap-wrap{border-radius:var(--r-card);padding:6px;overflow-x:auto;margin-bottom:24px;}
  .heatmap{border-collapse:separate;border-spacing:3px;width:100%;font-size:12.5px;}
  .heatmap th{font-weight:650;color:var(--paper-dim);text-align:left;padding:6px 8px;white-space:nowrap;}
  .heatmap thead th{text-align:center;}
  .heatmap thead th:first-child{text-align:left;}
  .heatmap td{
    text-align:center;padding:7px 6px;border-radius:7px;font-weight:650;min-width:54px;
    /* Tint capped at 38% so the number always reads at 4.5:1 or better for
       any accent (including a team colour); the solid bar underneath carries
       the full-strength heat. */
    background:color-mix(in srgb,var(--brand-primary) calc(4% + var(--d) * 34%),var(--panel-2));
    box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--brand-primary) calc(var(--d) * 100%),transparent);
    color:var(--paper);font-variant-numeric:tabular-nums;
  }
  .heatmap td.hm-empty{background:transparent;color:var(--paper-faint);border:1px dashed var(--rule);}

  /* Calendar running-total curve */
  .cal-curve:empty{display:none;}
  .cal-curve{margin:0 0 16px;padding:14px 16px 8px;border-radius:var(--r-panel);border:1px solid transparent;
    background:linear-gradient(170deg,var(--fill-a),var(--fill-b)) padding-box,linear-gradient(150deg,color-mix(in srgb,var(--brand-primary) 38%,transparent),var(--rim) 40%) border-box;box-shadow:var(--depth);}
  .curve-head{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--paper-dim);font-weight:600;}
  .curve-head b{font-family:var(--font-display);font-size:1.5rem;color:var(--paper);}
  .curve-head b.pos{color:var(--hit);} .curve-head b.neg{color:var(--miss-text);}
  .cal-curve svg{display:block;width:100%;height:auto;}
  .cv-line{fill:none;stroke:var(--brand-primary);stroke-width:2.2;stroke-linejoin:round;}
  .cv-area.pos{fill:color-mix(in srgb,var(--hit) 22%,transparent);}
  .cv-area.neg{fill:color-mix(in srgb,var(--miss) 22%,transparent);}
  .cv-zero{stroke:var(--paper-faint);stroke-width:1;stroke-dasharray:3 4;}
  .cal-curve circle{fill:var(--panel);stroke:var(--paper-dim);stroke-width:2;}
  .cal-curve circle.w{stroke:var(--hit);} .cal-curve circle.l{stroke:var(--miss);}
  .cal-curve text{font:600 10px var(--font-body);fill:var(--paper-faint);text-anchor:middle;}

  @media (max-width:640px){
    .badges{grid-template-columns:repeat(3,minmax(0,1fr));}
    .meter{grid-template-columns:auto 1fr;grid-template-areas:"l b" "t t";row-gap:5px;}
    .meter .m-l{grid-area:l;} .meter b{grid-area:b;text-align:right;} .meter .m-t{grid-area:t;}
  }

  /* ---- Personalisation (round 2) ---- */
  .hello{margin:22px 0 4px;}
  .hello-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;}
  .hello-title{font-family:var(--font-display);line-height:.95;margin:0;}
  .hello-sub{margin:8px 0 0;font-size:14px;color:var(--paper-dim);display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
  .hello-team{display:inline-flex;align-items:center;gap:7px;color:var(--paper);font-weight:600;}
  .hello-team img{border-radius:50%;}
  .hello-edit{min-height:38px;padding:0 15px;border-radius:var(--r-ctl);border:1px solid var(--edge-accent);background:var(--tint-accent);color:var(--text-accent);font-weight:650;font-size:13.5px;}
  .hello-edit:hover{background:color-mix(in srgb,var(--brand-primary) 22%,transparent);}
  .hello-props{display:flex;gap:10px;overflow-x:auto;padding:16px 2px 10px;margin:0 -2px;scroll-snap-type:x proximity;scrollbar-width:none;}
  .hello-props::-webkit-scrollbar{display:none;}
  .prop-tile{
    flex:0 0 auto;min-width:190px;max-width:240px;scroll-snap-align:start;text-align:left;cursor:pointer;
    display:grid;grid-template-columns:1fr auto;grid-template-areas:"name rate" "stat rate" "dots dots";gap:2px 12px;
    padding:12px 14px;border-radius:16px;border:1px solid transparent;color:var(--paper);
    background:linear-gradient(170deg,var(--fill-a),var(--fill-b)) padding-box,linear-gradient(150deg,color-mix(in srgb,var(--brand-primary) 45%,transparent),var(--rim) 45%) border-box;
    box-shadow:var(--depth);transition:transform .15s var(--ease-out);
  }
  .prop-tile:hover{transform:translateY(-2px);}
  .prop-tile:active{transform:scale(.97);}
  .pt-name{grid-area:name;font-weight:650;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .pt-stat{grid-area:stat;font-size:12px;color:var(--paper-dim);}
  .pt-rate{grid-area:rate;font-family:var(--font-display);font-size:1.9rem;line-height:.9;text-align:right;align-self:center;}
  .pt-rate small{display:block;font-family:var(--font-body);font-weight:600;font-size:11px;color:var(--paper-dim);margin-top:3px;}
  .pt-dots{grid-area:dots;display:flex;gap:3px;margin-top:8px;}
  .pt-dots i{width:10px;height:5px;border-radius:3px;}
  .pt-dots i.h{background:var(--hit);} .pt-dots i.m{background:color-mix(in srgb,var(--miss) 80%,transparent);}
  .pt-note{grid-column:1 / -1;font-size:11.5px;color:var(--text-accent);margin-top:6px;}
  .prop-tile.idle{grid-template-areas:"name" "stat";grid-template-columns:1fr;}
  .prop-tile.empty-tile{cursor:default;grid-template-areas:"name" "stat";grid-template-columns:1fr;max-width:360px;border-style:dashed;
    background:transparent;border:1px dashed var(--rule);box-shadow:none;}
  .prop-tile.empty-tile:hover{transform:none;}
  /* Full review Q-051: on phones the empty "your props" tile is one short line, and the spotlight and glance
     tiles (moved below the cards by script) get breathing room. */
  @media (max-width:640px){
    .prop-tile.empty-tile{padding:10px 12px;}
    .prop-tile.empty-tile .pt-name{display:none;}
    #boardLate:not(:empty){margin-top:28px;}
  }

  .field-row{display:grid;gap:6px;margin:0 0 12px;}
  .field-row label,.field-label{font-size:13px;font-weight:600;color:var(--paper-dim);}
  .field-label{margin:4px 0 8px;}
  .field-row input,.field-row select{
    min-height:42px;padding:0 12px;border-radius:var(--r-field);border:1px solid var(--field-edge);background:var(--panel-2);color:var(--paper);font-size:14.5px;
  }
  .field-row input:focus,.field-row select:focus{outline:none;border-color:var(--edge-accent);box-shadow:0 0 0 3px var(--tint-accent);}
  .swatches{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
  .swatch{display:inline-flex;align-items:center;gap:6px;min-height:40px;min-width:40px;padding:0 8px;border-radius:12px;border:1px solid var(--rule);background:var(--panel-2);color:var(--paper-dim);font-size:12.5px;font-weight:650;}
  .swatch i{width:22px;height:22px;border-radius:50%;background:var(--sw);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);}
  .swatch .sw-neutral{background:#3cc8ff;box-shadow:inset 0 0 0 1px var(--rule);}
  .swatch .sw-team{background:var(--sw,transparent);border:1.5px dashed var(--paper-faint);}
  .swatch[aria-checked="true"]{border-color:var(--brand-primary);box-shadow:0 0 0 2px var(--tint-accent);color:var(--paper);}

  /* Compact cards */
  :root[data-density="compact"] .card{padding:13px 14px 10px;gap:10px;}
  :root[data-density="compact"] .rate-hero .rate-num{font-size:2.2rem;}
  :root[data-density="compact"] .prop-line{padding:7px 10px;}
  :root[data-density="compact"] .grid{gap:12px;}
  @media (prefers-reduced-motion:reduce){ .prop-tile:hover{transform:none;} }

  /* Roster by recent form */
  .by-form{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;}
  .bf-pos{border-radius:var(--r-card);padding:14px 16px;border:1px solid transparent;
    background:linear-gradient(170deg,var(--fill-a),var(--fill-b)) padding-box,linear-gradient(150deg,color-mix(in srgb,var(--brand-primary) 38%,transparent),var(--rim) 40%) border-box;box-shadow:var(--depth);}
  .bf-pos h4{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 8px;font-family:var(--font-display);font-weight:700;font-size:1.4rem;}
  .bf-pos h4 span{font-family:var(--font-body);font-size:12px;font-weight:600;color:var(--paper-dim);}
  .bf-row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--line-soft);font-size:13.5px;}
  .bf-name{display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-width:0;}
  .bf-name .injury-badge{margin-top:0;}
  .bf-track{height:8px;border-radius:8px;background:var(--panel-3);overflow:hidden;}
  .bf-track i{display:block;height:100%;border-radius:8px;background:var(--holo);}
  .bf-row b{font-family:var(--font-display);font-size:1.15rem;font-weight:700;}

  /* ---- NBA league type (2026-09-26): the first-visit question, the switch,
     the category card chart and the category matchup table. Existing
     tokens and the .seg control only. */
  .league-ask{margin:4px 0 18px;padding:18px;border-radius:var(--r-card);background:var(--panel);border:1px solid var(--edge-accent);}
  .league-ask h3{margin:0 0 4px;font-size:18px;color:var(--paper);}
  .league-ask p{margin:0 0 14px;color:var(--paper-dim);font-size:14px;}
  .league-ask-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;}
  .league-opt{display:grid;gap:4px;text-align:left;padding:14px;border-radius:12px;background:var(--panel-2);
    border:1px solid var(--line-soft);color:var(--paper);font:inherit;cursor:pointer;}
  .league-opt b{font-size:15px;}
  .league-opt span{font-size:13px;color:var(--paper-dim);line-height:1.45;}
  .league-opt:hover{border-color:var(--edge-accent);background:var(--tint-accent);}
  .league-switch{display:flex;align-items:center;gap:12px;margin:0 0 16px;font-size:13px;color:var(--paper-dim);}
  .league-switch .seg{min-width:240px;}
  .cat-chart{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;height:96px;margin:10px 0 4px;}
  .cat-bar{display:grid;grid-template-rows:1fr auto;gap:4px;text-align:center;}
  .cat-bar span{font-size:var(--fs-min);color:var(--paper-dim);}
  .cat-track{position:relative;border-radius:3px;background:linear-gradient(var(--line-soft),var(--line-soft)) center/100% 1px no-repeat;}
  .cat-track i{position:absolute;left:18%;right:18%;height:var(--h);border-radius:3px;}
  .cat-track i.up{bottom:50%;background:color-mix(in srgb,var(--hit) 86%,var(--panel));}
  .cat-track i.dn{top:50%;background:repeating-linear-gradient(135deg,transparent 0 3px,rgba(0,0,0,.22) 3px 5px),color-mix(in srgb,var(--miss) 86%,var(--panel));}
  .cat-key{font-size:12.5px;color:var(--paper-dim);margin-bottom:8px;}
  .cat-key b{color:var(--paper);font-weight:650;}
  .cat-picker{border:0;margin:8px 0 0;padding:10px 0;display:flex;flex-wrap:wrap;gap:8px 14px;border-bottom:1px solid var(--line-soft);}
  .cat-picker legend{padding:0;margin-bottom:8px;font-size:14px;color:var(--paper);display:grid;}
  .cat-picker label{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--paper);min-height:32px;}
  .cat-matchup{margin:0 0 16px;padding:16px;border-radius:var(--r-card);background:var(--panel);border:1px solid var(--line-soft);}
  .cat-matchup-head{display:grid;gap:2px;margin-bottom:10px;}
  .cat-matchup-head b{font-size:17px;color:var(--paper);}
  .cat-matchup-head span{font-size:13px;color:var(--paper-dim);}
  .cat-matchup table{width:100%;border-collapse:collapse;font-size:14px;}
  .cat-matchup th,.cat-matchup td{padding:7px 8px;border-bottom:1px solid var(--line-soft);text-align:right;}
  .cat-matchup th:first-child{text-align:left;}
  .cat-matchup thead th{font-size:12px;color:var(--paper-dim);font-weight:600;}
  .cat-matchup td.lead{font-weight:650;}
  .cat-matchup td.lead.me{color:var(--hit);}
  .cat-matchup td.lead.opp{color:var(--miss-text);}

  /* Trade ideas + personal touches (2026-09-26). Existing tokens only. */
  .trade-ideas{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-bottom:8px;}
  .trade-idea{display:grid;gap:10px;padding:14px;border-radius:var(--r-card);background:var(--panel);border:1px solid var(--line-soft);}
  .ti-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;}
  .ti-head .who{display:grid;gap:2px;}
  .ti-head .who span{font-size:13px;color:var(--paper-dim);}
  .ti-gain{font-weight:700;color:var(--hit);white-space:nowrap;}
  .ti-reasons{margin:0;padding-left:18px;display:grid;gap:6px;font-size:13.5px;color:var(--paper);line-height:1.45;}
  .ti-compare{justify-self:start;min-height:36px;padding:0 14px;border-radius:var(--r-ctl);border:1px solid var(--line-soft);
    background:none;color:var(--text-accent);font:inherit;font-size:13px;font-weight:600;cursor:pointer;}
  .ti-compare:hover{background:var(--tint-accent);border-color:var(--edge-accent);}
  .on-team-tag{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:var(--r-ctl);font-size:11px;font-weight:650;
    color:var(--text-accent);background:var(--tint-accent);border:1px solid var(--edge-accent);}
  .league-chip.fav-chip{border-style:dashed;}

  /* ---- Fantasy player card (2026-09-26, "fantasy sports vibe"): a
     position mark on the team colour, the value as a scoreboard numeral,
     the last game in shorthand. Tokens and the display face only. */
  .fc-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;}
  .fc-top .who{display:grid;gap:2px;min-width:0;}
  .fc-top .who b{font-size:16px;line-height:1.2;color:var(--paper);overflow-wrap:break-word;}
  .fc-top .who > span{font-size:13px;color:var(--paper-dim);}
  .fc-medal{position:relative;width:56px;height:56px;border-radius:16px;display:grid;place-items:center;overflow:hidden;
    background:linear-gradient(160deg,rgba(0,0,0,.15),rgba(0,0,0,.5)),var(--team-chip,linear-gradient(var(--panel-3),var(--panel-3))) 45% 22% / 3000%;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);}
  .fc-medal > span{font-family:var(--font-display);font-weight:750;font-size:20px;line-height:1;letter-spacing:-.02em;color:#fff;margin:-8px 0 0 -6px;
    text-shadow:0 1px 2px rgba(0,0,0,.55);}
  .fc-medal .team-badge,.fc-medal .fallback-badge{position:absolute;right:3px;bottom:3px;width:16px;height:16px;border-radius:5px;font-size:9px;}
  .fc-medal .te-badge-ring{position:absolute;right:3px;bottom:3px;}
  .fc-value{display:grid;justify-items:end;gap:2px;text-align:right;max-width:5.5rem;}
  .fc-value b{font-family:var(--font-display);font-size:2.1rem;line-height:.95;color:var(--paper);}
  .fc-value span{font-size:11px;line-height:1.25;color:var(--paper-dim);}
  .fc-last{font-size:13px;line-height:1.45;color:var(--paper);padding:8px 10px;border-radius:10px;background:var(--panel-2);}
  .fc-last > span{display:block;font-size:11.5px;color:var(--paper-dim);}
  .fc-last b{font-weight:650;}
  .league-switch b{color:var(--paper);font-weight:650;}

  /* =====================================================================
     REFINED (2026-09-27, Mina: "looks like AI made it"; research in
     ops/research/aesthetic-benchmark-2026-09-27.md). Same colours, same
     components: fewer effects. No glow on numbers, no floor grid, no card
     tilt, flat accent, compact rounded chart bars, lighter big numerals,
     hint underlines only on hover or focus.
     ===================================================================== */
  .has-tip,.card-provenance,.provenance[data-tip],.freshness-bar [data-tip],.injury-eta-label{text-decoration:none;}
  .has-tip:hover,.has-tip:focus-visible,.card-provenance:hover,.card-provenance:focus-visible,
  .provenance[data-tip]:hover,.injury-eta-label:hover{
    text-decoration:underline dotted color-mix(in srgb,currentColor 55%,transparent);text-underline-offset:3px;
  }
  .spotlight{box-shadow:var(--depth);}
  .spotlight{background:
      radial-gradient(520px 260px at 0% 0%,color-mix(in srgb,var(--brand-primary) 10%,transparent),transparent 70%) padding-box,
      linear-gradient(170deg,var(--fill-a),var(--fill-b)) padding-box,
      linear-gradient(150deg,color-mix(in srgb,var(--brand-primary) 38%,transparent),var(--rim) 40%,var(--rim)) border-box;}
  .spotlight-num{font-weight:700;letter-spacing:-.01em;font-size:3rem;line-height:.9;margin-bottom:8px;}
  .spotlight-chart{gap:10px;padding:10px 2px 0;}
  .spotlight-chart .bar-wrap{flex:1 0 24px;max-width:44px;gap:4px;}
  .spotlight-chart .bar-track{height:76px;justify-content:center;}
  .spotlight-chart .val{font-family:var(--font-body);font-size:12px;font-weight:650;}
  .spotlight-chart .bar-label{font-size:var(--fs-min);color:var(--paper-faint);}
  .vs-row img.headshot,.vs-row .headshot{width:52px;height:52px;}
  .vs-row img.team-logo{width:44px;height:44px;}
  .hello-title{color:var(--paper);font-weight:700;}
  .matchup-total,.fc-value b,.pt-rate{font-weight:700;}
  .spotlight-opp{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;}
  .spotlight-opp img{width:18px;height:18px;border-radius:5px;vertical-align:-3px;}
  @media (max-width:640px){
    .spotlight-num{font-size:2.5rem;}
    .spotlight-chart .bar-track{height:64px;}
  }

  /* Movers rows: picture or badge, and the next game (2026-09-27). */
  .mv-id{display:flex;align-items:center;gap:12px;min-width:0;}
  .mv-art{flex:none;width:44px;height:44px;display:grid;place-items:center;}
  .mv-art .headshot-wrap{transform:scale(.72);transform-origin:center;}
  .mv-art img.team-logo,.mv-art .team-logo{width:36px;height:36px;}
  .mv-next{display:flex;align-items:center;gap:5px;margin-top:3px;font-size:12.5px;color:var(--paper-faint);}
  .mv-next img,.mv-next .next-badge-logo{width:16px;height:16px;border-radius:4px;}
  /* Refined headings: one step smaller, flat colour (2026-09-27). */
  h2.section{font-size:clamp(1.45rem,1.2rem + .8vw,1.9rem);}
  .hello-title{font-size:clamp(1.8rem,1.4rem + 1.2vw,2.4rem);}
  .search-bar{margin-bottom:10px;}
  /* EV: every book's price at a glance (2026-09-27). */
  .ev-books-strip{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 2px;}
  .ev-books-strip .bk{display:inline-flex;align-items:baseline;gap:6px;padding:4px 9px;border-radius:var(--r-ctl);border:1px solid var(--line-soft);background:var(--panel-2);font-size:12px;}
  .ev-books-strip .bk em{font-style:normal;color:var(--paper-dim);}
  .ev-books-strip .bk b{font-weight:650;color:var(--paper);font-variant-numeric:tabular-nums;}
  .ev-books-strip .bk.best{border-color:color-mix(in srgb,var(--hit) 45%,transparent);background:var(--hit-dim);}
  .ev-books-strip .bk.best b{color:var(--hit);}
  .ev-books-strip .bk.more{color:var(--paper-faint);}
  /* Arbitrage calculator and estimated profit (2026-09-27). */
  /* Arbitrage calculator (redesigned 2026-09-29, Mina: "looks robotic"): one calm panel, odds on the left,
     amount on the right, results as clear rows. Existing tokens and shapes only. */
  .arb-calc{margin-bottom:18px;padding:20px;border-radius:var(--r-card);background:var(--panel);border:1px solid var(--line-soft);box-shadow:var(--card-shadow);}
  .ac-head h3{margin:0;font-size:1.15rem;font-weight:650;letter-spacing:-.02em;color:var(--paper);}
  .ac-head p{margin:4px 0 0;font-size:13.5px;color:var(--paper-dim);max-width:62ch;}
  .ac-body{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:14px 18px;margin-top:16px;align-items:end;}
  .ac-sides{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
  .ac-amount{display:flex;flex-direction:column;gap:10px;}
  .ac-field{display:flex;flex-direction:column;gap:6px;min-width:0;}
  .ac-field > span{font-size:12.5px;font-weight:600;color:var(--paper-dim);white-space:nowrap;}
  .ac-field > span em{font-style:normal;font-weight:500;color:var(--paper-faint);}
  .ac-field input{width:100%;min-height:46px;padding:0 14px;border-radius:var(--r-field);border:1px solid var(--line-soft);
    background:var(--panel-2);color:var(--paper);font:inherit;font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;
    transition:border-color .15s var(--ease-out),box-shadow .15s var(--ease-out);}
  .ac-field input::placeholder{color:var(--paper-faint);font-weight:400;}
  .ac-field input:focus{outline:none;border-color:var(--text-accent);box-shadow:0 0 0 3px var(--tint-accent);}
  .ac-field input[aria-invalid="true"]{border-color:var(--miss-text);}
  .ac-money-in{position:relative;}
  .ac-money-in i{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-style:normal;font-weight:600;color:var(--paper-dim);pointer-events:none;}
  .ac-money-in input{padding-left:28px;}
  .ac-seg{display:flex;padding:3px;border-radius:var(--r-ctl);background:var(--panel-2);border:1px solid var(--line-soft);}
  .ac-seg label{flex:1;position:relative;}
  .ac-seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer;}
  .ac-seg span{display:flex;align-items:center;justify-content:center;min-height:40px;text-align:center;padding:6px 10px;border-radius:var(--r-ctl);font-size:13px;font-weight:600;color:var(--paper-dim);white-space:nowrap;transition:background .15s var(--ease-out),color .15s var(--ease-out);}
  .ac-seg input:checked + span{background:var(--tint-accent);color:var(--text-accent);box-shadow:inset 0 0 0 1px var(--edge-accent);}
  .ac-seg input:focus-visible + span{outline:2px solid var(--text-accent);outline-offset:2px;}
  .arb-calc-out{margin-top:16px;font-size:14px;color:var(--paper-dim);}
  .arb-calc-stakes{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px;}
  .ac-leg{display:grid;grid-template-columns:auto 1fr 1fr;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--panel-2);border:1px solid var(--line-soft);}
  .ac-leg-n{font-size:12.5px;font-weight:650;color:var(--paper);}
  .ac-leg-v{display:flex;flex-direction:column;align-items:flex-end;}
  .ac-leg-v em{font-style:normal;font-size:11.5px;color:var(--paper-dim);}
  .ac-leg-v b{font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--paper);font-variant-numeric:tabular-nums;}
  .ac-sum{margin:12px 0 0;padding:12px 14px;border-radius:14px;font-size:14px;line-height:1.5;}
  .ac-sum.pos{background:var(--hit-dim);color:var(--paper);}
  .ac-sum.pos b{color:var(--hit);}
  .ac-sum.neg{background:var(--miss-dim);color:var(--paper);}
  .arb-calc-hint{display:block;font-size:13px;color:var(--paper-faint);}
  @media (max-width:900px){ .ac-body{grid-template-columns:1fr;} }
  @media (max-width:560px){ .ac-sides{grid-template-columns:1fr 1fr;} .ac-sides .ac-field:last-child{grid-column:1 / -1;} }
  .arb-est{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:10px 0 0;font-size:13.5px;color:var(--paper-dim);}
  .arb-est b{color:var(--hit);font-variant-numeric:tabular-nums;}
  .arb-use{background:none;border:0;color:var(--text-accent);font-weight:600;font-size:13px;cursor:pointer;padding:6px 2px;}
  .ev-books-strip .bk-tag{font-style:normal;font-size:var(--fs-min);font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--hit);}

  /* =====================================================================
     GRAPHITE (2026-09-27, Mina: the navy "pops out", "we're doing too
     much"; research in ops/research/dark-mode-benchmark-2026-09-27.md).
     Colours live in tokens.css; here only the last washes go: the page is
     one flat neutral, modals have no coloured halo, the chance-gap fill
     has no glow. The spotlight's top-left highlight stays (Mina likes it).
     ===================================================================== */

  /* =====================================================================
     LOLLIPOP CHARTS (2026-09-27, Mina: the bars looked "blocky"). Same
     markup, same scale, same numbers: each game is a thin stem from the
     prop line (cards) or the floor (spotlight) to a dot at its value. A hit
     is a filled dot, a miss a hollow ring, so the meaning never rests on
     colour alone (replaces the miss stripes, review P-016).
     ===================================================================== */
  .mbar{
    left:50%;right:auto;width:2px;transform:translateX(-50%);
    background:color-mix(in srgb,var(--c) 55%,transparent);border-radius:1px;overflow:visible;
  }
  .mbar::after{
    content:"";position:absolute;left:50%;width:10px;height:10px;border-radius:50%;
    transform:translateX(-50%);background:var(--c);box-sizing:border-box;
  }
  .mbar.up::after{top:-5px;}
  .mbar.dn::after{bottom:-5px;}
  .mbar.flat{width:2px;height:2px;background:transparent;}
  .mbar.flat::after{top:-4px;}
  .mbar.miss::after{background:var(--panel);border:2px solid var(--c);}
  .mplot:has(.mbar.up) .val,.mplot:has(.mbar.flat) .val{transform:translateY(-6px);}
  .mplot:has(.mbar.dn) .val{transform:translateY(6px);}
  .chart .bar-wrap:hover .mbar::after{box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent);}

  .spotlight-chart .bar.col3d{
    width:2px;border-radius:1px;overflow:visible;
    background:color-mix(in srgb,var(--c) 55%,transparent);
  }
  .spotlight-chart .bar.col3d::after{
    content:"";position:absolute;left:50%;top:-5px;width:10px;height:10px;border-radius:50%;
    transform:translateX(-50%);background:var(--c);box-sizing:border-box;
  }
  .spotlight-chart .bar.col3d.miss::after{background:var(--panel);border:2px solid var(--c);}
  .spotlight-chart .val{margin-bottom:8px;}
  /* Room for the value label above (or below) a dot at the chart's edge. */
  .mplot{--pad:21px;height:104px;}
  :root[data-density="compact"] .mplot{--pad:19px;height:84px;}
  @media (max-width:640px){ .mplot{height:96px;} }

  /* =====================================================================
     CLUBHOUSE (2026-09-27, Mina: Graphite looked "bland"; make it look
     better, professional, not AI). Colours are in tokens.css. The one bold
     move is the teams themselves: every card with a team wears its colour
     as a band across the top, like a jersey stripe, over the top-left team
     light she likes. The rest stays quiet: a fine film grain on the page
     (printed-program texture), bigger condensed headings, crisper surfaces.
     ===================================================================== */
  :root[data-theme="light"] body::before{opacity:.035;filter:invert(1);}

  /* Jersey stripe: the card's own team colour (its badge fill, same source
     as the corner light), 3px across the top, clipped by the card's radius. */
  .card[style*="--team-chip"]::after{
    content:"";position:absolute;left:0;right:0;top:0;bottom:auto;height:3px;z-index:1;opacity:1;
    border-radius:0;pointer-events:none;
    background:var(--team-chip) 45% 22% / 3000%;
  }
  :root[data-theme="light"] .card{box-shadow:0 1px 2px rgba(0,0,0,.05),0 10px 24px -18px rgba(0,0,0,.18);}

  /* Headings: the condensed face does the talking, set tighter and larger. */
  h2.view-title,.view-title{font-size:clamp(2.3rem,1.7rem + 1.8vw,3.1rem);letter-spacing:-.012em;line-height:.98;}
  h2.section{letter-spacing:-.006em;}
  .section-intro{color:color-mix(in srgb,var(--paper-dim) 88%,var(--paper));}

  /* Scoreboard numerals: tabular so columns of numbers line up. */
  .rate-num,.spotlight-num,.fc-value b,.ev-badge,.matchup-total,.cal-month-total,.wa-delta,.meter b{font-variant-numeric:tabular-nums;}

  /* Desktop rail: the active tool gets a floodlight bar and a warmer surface. */
  @media (min-width:1100px){
    .topbar{border-right:1px solid var(--line-soft);}
    #modeSwitch .modebtn.active{background:color-mix(in srgb,var(--brand-primary) 8%,var(--panel));}
  }

  /* =====================================================================
     FREE FEATURES ROUND (2026-09-27). Existing tokens and shapes only.
     ===================================================================== */
  /* Streak chip beside the sample flag */
  .streak-chip{display:inline-flex;align-items:center;padding:3px 9px;border-radius:var(--r-ctl);font-size:12px;font-weight:650;}
  .streak-chip.hit{background:var(--hit-dim);color:var(--hit);}
  .streak-chip.miss{background:var(--miss-dim);color:var(--miss-text);}
  .rate-row{flex-wrap:wrap;gap:8px;}

  /* Line slider under "Your line" */
  .line-range{flex:1 1 100%;width:100%;accent-color:var(--brand-primary);margin:2px 0 0;min-height:24px;}

  /* Compare */
  .compare-btn.on{border-color:var(--edge-accent);background:var(--tint-accent);color:var(--paper);}
  .compare-tray{
    position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--tabbar-h) + 14px);z-index:60;
    display:flex;align-items:center;gap:12px;padding:10px 12px 10px 16px;border-radius:var(--r-ctl);
    background:var(--panel-2);border:1px solid var(--rule);box-shadow:var(--pop-shadow);font-size:13.5px;color:var(--paper-dim);max-width:calc(100vw - 24px);
  }
  .compare-tray b{color:var(--paper);}
  .compare-tray button{background:none;border:1px solid var(--rule);border-radius:var(--r-ctl);color:var(--paper);padding:6px 12px;font:inherit;font-weight:600;cursor:pointer;}
  @media (min-width:1100px){ .compare-tray{bottom:24px;} }
  .compare-box{max-width:820px;width:calc(100vw - 32px);max-height:calc(100vh - 48px);overflow:auto;padding:22px;}
  .compare-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;}
  .compare-head .modal-title{margin:0;}
  .compare-body{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
  @media (max-width:640px){ .compare-body{grid-template-columns:1fr;} }

  /* Injury alert in the "For you" strip */
  .injury-alert{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin:0 0 14px;padding:14px 16px;
    border-radius:var(--r-panel);background:var(--warn-dim);border:1px solid color-mix(in srgb,var(--warn) 45%,transparent);color:var(--paper);font-size:14px;}
  .injury-alert ul{margin:6px 0 4px;padding-left:18px;}
  .injury-alert li{margin:2px 0;color:var(--paper-dim);}
  .injury-alert li b{color:var(--paper);}
  .injury-alert-note{font-size:12px;color:var(--paper-faint);}

  /* Saved views */
  .saved-views{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px;}
  .sv-label{font-size:12.5px;font-weight:650;color:var(--paper-dim);margin-right:2px;}
  .sv-chip{display:inline-flex;align-items:center;border:1px solid var(--rule);border-radius:var(--r-ctl);background:var(--panel-2);overflow:hidden;}
  .sv-chip button{background:none;border:0;color:var(--paper);font:inherit;font-size:13px;font-weight:600;padding:7px 4px 7px 12px;cursor:pointer;min-height:34px;}
  .sv-chip .sv-x{padding:7px 10px 7px 6px;color:var(--paper-faint);font-size:15px;}
  .sv-add{background:none;border:1px dashed var(--rule);border-radius:var(--r-ctl);color:var(--paper-dim);font:inherit;font-size:13px;font-weight:600;padding:7px 12px;cursor:pointer;min-height:34px;}
  .sv-form{display:inline-flex;gap:6px;align-items:center;}
  .sv-form input{min-height:34px;border-radius:var(--r-ctl);border:1px solid var(--rule);background:var(--panel-2);color:var(--paper);padding:0 12px;font:inherit;font-size:13px;width:190px;}
  .sv-form button{min-height:34px;border-radius:var(--r-ctl);border:1px solid var(--rule);background:var(--panel);color:var(--paper);padding:0 12px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;}
  .sv-form [data-view-save]{background:var(--btn-primary-fill);color:var(--on-accent);border-color:transparent;}

  /* "Where these numbers come from" */
  .trust-strip{margin:0 0 14px;font-size:13.5px;color:var(--paper-dim);}
  .trust-strip summary{cursor:pointer;color:var(--text-accent);font-weight:600;list-style:none;display:inline-flex;min-height:32px;align-items:center;}
  .trust-strip summary::-webkit-details-marker{display:none;}
  .trust-strip summary::after{content:"+";margin-left:8px;color:var(--paper-faint);}
  .trust-strip[open] summary::after{content:"\2212";}
  .trust-strip ul{margin:6px 0 0;padding:12px 16px 12px 30px;border-radius:var(--r-panel);background:var(--panel);border:1px solid var(--line-soft);max-width:75ch;}
  .trust-strip li{margin:3px 0;}
  #calCsvBtn{margin-left:8px;}

  /* =====================================================================
     TOUR AND ACCOUNT (2026-09-28). Existing tokens and shapes only: the tour
     note is the hint bubble's surface, its buttons are the primary button and
     a text button; the ring is a hairline in the accent over a dimmed page.
     ===================================================================== */
  .tour-layer{position:fixed;inset:0;z-index:600;}
  .tour-ring{
    position:fixed;border-radius:14px;pointer-events:none;
    box-shadow:0 0 0 2px var(--brand-primary),0 0 0 9999px var(--scrim);
    transition:left .2s var(--ease-out),top .2s var(--ease-out),width .2s var(--ease-out),height .2s var(--ease-out);
  }
  .tour-tip{
    position:fixed;left:0;top:0;width:min(320px,calc(100vw - 24px));padding:16px 16px 14px;
    background:var(--panel-3);border:1px solid var(--edge-accent);border-radius:14px;box-shadow:var(--pop-shadow);color:var(--paper);
  }
  .tour-count{font-size:12px;font-weight:600;color:var(--paper-dim);}
  .tour-title{font-family:var(--font-display);font-weight:700;font-size:1.5rem;line-height:1.05;margin:4px 0 6px;}
  .tour-tip p{margin:0 0 14px;font-size:14px;line-height:1.5;color:var(--paper-dim);}
  .tour-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;}
  .tour-skip{background:none;border:0;color:var(--paper-dim);font:inherit;font-size:14px;font-weight:600;padding:10px 4px;min-height:44px;cursor:pointer;}
  .tour-skip:hover{color:var(--paper);}
  .tour-next{width:auto;min-height:44px;padding:0 20px;font-size:15px;}
  @media (prefers-reduced-motion:reduce){ .tour-ring{transition:none;} }
  .account-status{font-size:13px;color:var(--paper-faint);}
  .account-plan{margin:12px 0 8px;font-size:14px;color:var(--paper-dim);}
  .account-plan b{color:var(--paper);}
  .news-opt{display:flex;gap:10px;align-items:flex-start;margin:4px 0 12px;font-size:13.5px;color:var(--paper-dim);line-height:1.5;cursor:pointer;}
  .news-opt input{accent-color:var(--brand-primary);width:18px;height:18px;margin:1px 0 0;flex:none;}
  #accountBody .sheet-link-btn{width:100%;}


  /* =====================================================================
     NIGHT SESSION (2026-09-28, Mina: "make it modern ... moving components",
     with a competitor's landing page as the feel to beat; our own version,
     research ops/research/modern-look-2026-09-28.md). Same layout, same
     parts. What changes: cool near-black with one soft beam of light behind
     everything, glass rail and bars, Geist type (not condensed, so display
     sizes are set a step smaller and tighter), the accent (Ice cyan since 2026-09-29), and motion
     with a job: new content eases in, clickable surfaces lift. All motion
     stops for people who turn it off.
     ===================================================================== */
  /* Ambient light: one viewport-sized fixed layer behind the page, drawn once.
     It is not rotated or animated in the app: a larger rotated drifting layer
     cost ~9ms per scroll frame on the 1440 board (review R7-01); this costs
     nothing measurable. Floodlight glow from above (2026-09-29: the diagonal beam was retired, legal review). */
  body::after{
    content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
    background:
      radial-gradient(ellipse 60vw 34vh at 50% -8vh,var(--beam-a),transparent 72%),
      radial-gradient(ellipse 90vw 26vh at 50% -6vh,var(--beam-b),transparent 70%),
      radial-gradient(ellipse 40vw 40vh at 100% 100%,color-mix(in srgb,var(--accent-2) 9%,transparent),transparent 70%),
      radial-gradient(ellipse 34vw 30vh at 0% 70%,color-mix(in srgb,var(--brand-primary) 6%,transparent),transparent 70%);
    opacity:.9;
  }
  body::before{opacity:.035;}

  /* Type: one family. Headings tighter, a touch lighter than the condensed face was. */
  h2.section,h2.view-title,.view-title,.hello-title,.modal-title,.sheet-head h2,.tour-title{letter-spacing:-.03em;font-weight:650;}
  h2.view-title,.view-title{font-size:clamp(2rem,1.5rem + 1.5vw,2.6rem);line-height:1.02;}
  h2.section{font-size:clamp(1.35rem,1.15rem + .7vw,1.7rem);}
  .brand b{font-size:1.05rem;letter-spacing:.06em;font-weight:750;}
  .rate-num,.spotlight-num,.fc-value b,.ev-badge,.matchup-total,.cal-month-total,.wa-delta,.pt-rate,.demo-rate b{letter-spacing:-.035em;}

  /* Glass rail (desktop) and bars (phone): the light shows through. */
  @media (min-width:1100px){
    .topbar{background:color-mix(in srgb,var(--rail) 74%,transparent);-webkit-backdrop-filter:blur(20px) saturate(140%);backdrop-filter:blur(20px) saturate(140%);}
    #modeSwitch .modebtn.active{background:var(--tint-accent);}
    #modeSwitch .modebtn.active .mb-ico{color:var(--text-accent);}
  }

  /* Surfaces: a hairline top light, and a lift on hover for what you can open. */
  .card,.ev-card,.spotlight,.prop-tile,.bf-pos{
    transition:transform .28s var(--ease-out),box-shadow .28s var(--ease-out),border-color .28s var(--ease-out);
  }
  @media (hover:hover) and (pointer:fine){
    .card:hover,.ev-card:hover,.prop-tile:hover{transform:translateY(-2px);box-shadow:0 1px 0 var(--hi) inset,0 22px 44px -22px rgba(0,0,0,.7),0 0 0 1px color-mix(in srgb,var(--brand-primary) 22%,transparent);}
    :root[data-theme="light"] :is(.card,.ev-card,.prop-tile):hover{box-shadow:0 1px 2px rgba(0,0,0,.05),0 18px 36px -20px rgba(40,30,120,.28),0 0 0 1px color-mix(in srgb,var(--brand-primary) 20%,transparent);}
  }


  /* Motion with a job: content that just arrived eases up into place. */
  @media (prefers-reduced-motion:no-preference){
    @keyframes te-in{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
    .grid > :is(.card,.ev-card,.prop-tile),.spotlight,.fc-grid > *{animation:te-in .5s var(--ease-out) both;}
    .grid > :nth-child(2){animation-delay:.04s} .grid > :nth-child(3){animation-delay:.08s}
    .grid > :nth-child(4){animation-delay:.12s} .grid > :nth-child(5){animation-delay:.16s}
    .grid > :nth-child(6){animation-delay:.2s} .grid > :nth-child(n+7){animation-delay:.24s}
    .view-title,h2.view-title{animation:te-in .45s var(--ease-out) both;}
  }

  /* =====================================================================
     AT A GLANCE (2026-09-29, Mina: "more charts, graphs, better visuals").
     A row of summary tiles above the Trend Board, Injury Report and Fantasy
     board. Existing tokens; colours keep their meaning; every chart has text.
     ===================================================================== */
  .glance{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:18px 0 20px;}
  .glance:empty{display:none;}
  .gl-tile{position:relative;overflow:hidden;min-width:0;padding:14px 16px 14px;border-radius:var(--r-panel);
    background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 100%,white 3%),var(--panel));
    border:1px solid var(--line-soft);box-shadow:var(--card-shadow);}
  .gl-tile::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
    background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--brand-primary) 55%,transparent),transparent);}
  .gl-wide{grid-column:span 2;}
  .gl-h{display:flex;flex-direction:column;gap:1px;margin-bottom:8px;}
  .gl-h h3{margin:0;font-size:14px;font-weight:650;letter-spacing:-.01em;color:var(--paper);}
  .gl-h span{font-size:12px;color:var(--paper-dim);}
  .gl-big{font-size:2.3rem;font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--paper);font-variant-numeric:tabular-nums;margin:6px 0 4px;}
  .gl-hit{color:var(--hit);} .gl-miss{color:var(--miss-text);}
  .gl-note{margin:6px 0 0;font-size:12.5px;color:var(--paper-dim);line-height:1.45;}
  .gl-note b{font-size:14px;}
  .gl-hist{display:block;width:100%;height:auto;overflow:visible;}
  .gl-hist text{font-size:var(--fs-min);fill:var(--paper-dim);font-family:var(--font-data);}
  .gl-hist .gl-axis{stroke:var(--rule);stroke-width:1;}
  .gl-hist .gl-bar:hover rect[rx]{filter:brightness(1.15);}
  .gl-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:7px;}
  .gl-list li{display:flex;flex-direction:column;gap:1px;font-size:12.5px;min-width:0;line-height:1.3;}
  .gl-list b{font-weight:600;color:var(--paper);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .gl-list span{color:var(--paper-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--font-data);font-size:11.5px;}
  .gl-bars{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:7px;}
  .gl-bars li{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) auto;align-items:center;gap:10px;}
  .gl-bl{display:flex;flex-direction:column;min-width:0;}
  .gl-bl b{font-size:12.5px;font-weight:600;color:var(--paper);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .gl-bl em{font-style:normal;font-size:11px;color:var(--paper-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .gl-track{height:8px;border-radius:8px;background:var(--panel-3);overflow:hidden;}
  .gl-track i{display:block;height:100%;border-radius:8px;background:var(--brand-primary);}
  .gl-v{font-size:12.5px;font-weight:650;color:var(--paper);font-family:var(--font-data);font-variant-numeric:tabular-nums;}
  .gl-stack{display:flex;gap:2px;height:14px;border-radius:14px;overflow:hidden;margin:10px 0 12px;}
  .gl-stack i{display:block;min-width:4px;}
  .gl-legend{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 16px;font-size:12.5px;color:var(--paper-dim);}
  .gl-legend li{display:inline-flex;align-items:center;gap:6px;}
  .gl-legend i{width:10px;height:10px;border-radius:3px;display:inline-block;}
  .gl-legend b{color:var(--paper);font-weight:650;font-family:var(--font-data);}
  .gl-split{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  .gl-tall{grid-row:span 1;}
  #fantasyGlance{grid-template-columns:repeat(3,minmax(0,1fr));}
  #boardGlance{grid-template-columns:repeat(5,minmax(0,1fr));}
  @media (max-width:1100px){ .glance{grid-template-columns:repeat(2,minmax(0,1fr));} #boardGlance{grid-template-columns:repeat(3,minmax(0,1fr));} #boardGlance .gl-wide{grid-column:1 / -1;} #fantasyGlance{grid-template-columns:1fr;} #fantasyGlance .gl-wide{grid-column:auto;} }
  @media (max-width:560px){ .glance,#boardGlance{grid-template-columns:1fr 1fr;gap:10px;} #boardGlance > .gl-tile:last-child{grid-column:1 / -1;} .gl-wide{grid-column:1 / -1;} .gl-big{font-size:1.9rem;} }
  @media (prefers-reduced-motion:no-preference){
    .gl-tile{animation:te-in .5s var(--ease-out) both;}
    .gl-tile:nth-child(2){animation-delay:.05s} .gl-tile:nth-child(3){animation-delay:.1s} .gl-tile:nth-child(4){animation-delay:.15s}
  }

  /* =====================================================================
     RICHER NIGHT (2026-09-29, Mina: dark mode "too bland ... catch their eye").
     Same layout and colours; more depth and one clear accent moment per screen.
     ===================================================================== */
  /* Data labels in the mono data face: chart values, dates, prices, counts. */
  .chart .bar-label,.mplot .val,.ev-price-table .val,.result-count,.card-provenance,.freshness-bar{font-family:var(--font-data);letter-spacing:-.01em;}
  .mplot .val{font-size:var(--fs-min);}
  /* The chosen sport / tab reads at a glance: solid Ice with dark text. */
  .sporttab.active{background:var(--brand-primary);border-color:transparent;color:var(--on-accent);box-shadow:0 6px 18px -10px color-mix(in srgb,var(--brand-primary) 80%,transparent);}
  .tabstrip button[aria-selected="true"],.tabstrip .active{color:var(--paper);}
  /* Rail: the current page gets a lit edge. */
  @media (min-width:1100px){
    #modeSwitch .modebtn.active::before{background:var(--brand-primary) !important;box-shadow:0 0 14px 1px color-mix(in srgb,var(--brand-primary) 60%,transparent);}
  }
  /* Cards: a lit top edge and a little more lift, so they sit above the page. */
  .card,.ev-card,.spotlight,.watch-avoid-col,.gl-tile{box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 40px -28px rgba(0,0,0,.9);}
  :root[data-theme="light"] :is(.card,.ev-card,.spotlight,.watch-avoid-col,.gl-tile){box-shadow:0 1px 2px rgba(0,0,0,.05),0 14px 30px -22px rgba(10,60,80,.25);}
  /* Headings: a touch larger, with the numbers that matter in the accent. */
  h2.section{font-size:clamp(1.45rem,1.2rem + .8vw,1.85rem);}
  .hello-title{letter-spacing:-.04em;}

  /* ---- 2026-09-30: compare head to head, injury news count, players you follow (existing tokens only) ---- */
  .cmp-sum{grid-column:1 / -1;width:100%;border-collapse:collapse;font-size:13.5px;}
  .cmp-sum caption{text-align:left;font-weight:600;color:var(--paper);padding:0 0 8px;}
  .cmp-sum th,.cmp-sum td{padding:8px 10px;border-bottom:1px solid var(--line-soft);text-align:left;vertical-align:top;}
  .cmp-sum thead th{font-weight:650;color:var(--paper);}
  .cmp-sum thead th span{display:block;font-weight:500;font-size:12px;color:var(--paper-dim);}
  .cmp-sum tbody th{font-weight:500;color:var(--paper-dim);white-space:nowrap;}
  .cmp-sum td b{font-family:var(--font-data);font-weight:600;color:var(--paper);}
  .cmp-bar{display:block;height:4px;margin-top:6px;border-radius:4px;background:linear-gradient(90deg,var(--brand-primary) var(--w),var(--panel-3) var(--w));}

  .nav-count{position:absolute;top:6px;right:8px;min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-ctl);display:inline-grid;place-items:center;
    background:var(--miss);color:#fff;font-family:var(--font-data);font-size:11px;font-weight:700;line-height:1;}
  /* What's new in Settings (2026-09-30): existing text tokens only; the count reuses .nav-count. */
  .settings-btn{position:relative;}
  .settings-btn .nav-count{top:-6px;right:-6px;}
  @media (min-width:1100px){ .settings-btn .nav-count{position:static;margin-left:auto;} }
  .whats-new-item{padding:10px 0;border-top:1px solid var(--line-soft);}
  .whats-new-item:first-child{border-top:0;padding-top:2px;}
  .whats-new-item b{font-size:14px;color:var(--paper);}
  .whats-new-item .wn-date{font-size:12px;color:var(--paper-dim);margin-left:6px;}
  .whats-new-item p{margin:4px 0 0;font-size:13.5px;line-height:1.5;color:var(--paper-dim);}
  .injury-mine{margin:14px 0 4px;padding:14px 16px;border:1px solid var(--line-soft);border-radius:var(--r-panel);background:var(--panel);}
  .injury-mine h3{margin:0 0 8px;font-size:14px;font-weight:650;color:var(--paper);}
  .injury-mine ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;}
  .injury-mine li{display:flex;align-items:center;gap:8px;font-size:13.5px;}
  .injury-mine li span{color:var(--paper-dim);}
  .cal-settle-note{font-size:12.5px;color:var(--paper-dim);align-self:center;}
  .help-line{margin:8px 0 14px;font-size:13px;color:var(--paper-dim);line-height:1.55;}
  /* Full review Q-019 / Q-014 (2026-09-30): pricing tabs say they are a sample until daily prices, and each card's price age. */
  .sample-note{margin:0 0 14px;padding:10px 14px;border:1px solid var(--warn);border-radius:10px;background:var(--warn-dim);font-size:13px;line-height:1.55;color:var(--paper);}
  .price-age{margin:8px 0 0;font-size:12.5px;color:var(--paper-dim);}
  .price-age.old{color:var(--warn);font-weight:600;}
  .help-line a{color:var(--text-accent);}
  /* Q-042: a focused field never sits under the phone's bottom menu. */
  @media (max-width:1099px){ html{scroll-padding-bottom:96px;} }

  /* Q-052: hold the board's space until the first cards arrive, so nothing below jumps. */
  #cardGrid:empty{min-height:140vh;}
  #boardView:has(#cardGrid:empty) .roadmap,#boardView:has(#cardGrid:empty) .footnote,#boardView:has(#cardGrid:empty) h2.section:not(.view-title){visibility:hidden;}
  html:not(.te-ready) #main{visibility:hidden;}
  .mc-note{font-size:12.5px;color:var(--paper-dim);margin:4px 0 8px;line-height:1.45;}

  /* V-R8-02: long select labels wrap under their label on phones instead of widening the page. */
  .scoring-row label{min-width:0;}
  .scoring-row select{max-width:100%;min-width:0;text-overflow:ellipsis;}
  @media (max-width:480px){ .scoring-row{flex-wrap:wrap;} .scoring-row select{flex:1 1 100%;} }