/* =====================================================================
     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,.utility-row:focus{outline:none;}   /* the skip link lands on the header row (B3F-6), a script-focused target, not a control */
  *{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, .brand .brand-mark{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;}
  .sporttab.soon[aria-disabled="true"]{opacity:.78;}   /* tappable "soon" chips (they explain themselves): text at 4.5:1 (review A-05) */
  /* 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;}
  :root:not([data-dev]) .filter-group:has(> .dev-only:only-child){display:none;}
  /* 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);
  }
  /* The notice is a button (B1-26, 2026-10-10): it opens Change location. Same pill recipe as .plan-btn; a 5px down-arrow
     (currentColor, like the Trend Board button) says it opens something. */
  .age-notice{font:inherit;font-size:12.5px;color:var(--paper-dim);font-weight:550;display:inline-flex;align-items:center;gap:8px;
    min-height:32px;padding:0 13px;border-radius:var(--r-ctl);border:1px solid var(--line-soft);background:var(--panel);cursor:pointer;}
  .age-notice::after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-1px) rotate(45deg);opacity:.7;}
  .age-notice:hover{color:var(--paper);border-color:var(--paper-dim);}
  .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,.phone-fold > 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,.phone-fold > summary::-webkit-details-marker{display:none;}
  .section-intro summary::after,.phone-fold > 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,.phone-fold[open] > summary::after{transform:rotate(225deg) translateY(-1px);}
  .section-intro details p{margin:8px 0 0;}
  /* B3F-2 (2026-10-12): a long explainer folds behind "How this works" on phones so the first price card sits within the first two
     screens. The details is open on wide screens (script), where its summary is hidden and the text reads exactly as before. */
  details.section-intro.phone-fold > p{margin:0;}
  details.section-intro.phone-fold > p.intro-link{margin-top:8px;}   /* the board's "How we count trends" sits inside its fold */
  .board-season-note{margin-bottom:8px;}
  @media (min-width:641px){ details.phone-fold > summary{display:none;} }
  @media (max-width:640px){ details.section-intro.phone-fold{margin-bottom:12px;} details.section-intro.phone-fold[open] > p{margin-top:8px;} }
  .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{overflow-wrap:anywhere;}   /* a long unbroken word never widens the page (P6) */
  /* The Pro note under the board's search box (launch review F2): the .empty note's words, one line under the field. */
  .search-note{margin:-2px 0 14px;font-size:13.5px;line-height:1.5;color:var(--paper-dim);}
  .search-note .empty-action{margin-top:6px;}
  .empty.more-matches{padding:10px 14px;border-style:solid;font-size:13.5px;}   /* a one-line hint, not an empty page (R8 F2) */
  .empty a{color:var(--text-accent);cursor:pointer;text-decoration:underline;}
  .empty a.empty-action{color:var(--on-accent);text-decoration:none;}
  html.te-restoring{overflow-anchor:none;}   /* while a reload puts the page back, only that code moves it (sweep S2-1) */   /* a link styled as the empty-state button (Fantasy See Pro) reads like the button */
  .link-btn{display:inline;padding:0;border:0;background:none;font:inherit;color:var(--text-accent);cursor:pointer;text-decoration:underline;}
  .empty .link-action{background:none;border:0;padding:0;font:inherit;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:44px;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{
    width:100%;border:0;background:none;text-align:left;font-family:inherit;min-height:44px;
    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:focus-visible{outline:2px solid var(--edge-accent);outline-offset:-2px;}
  .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;margin-bottom:0;   /* on the bottom edge (it floated 16 px up: sweep S1-7) */
      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;}
    /* Done stays in view while More filters makes the sheet scroll (sweep S1-8). */
    .filterbar.tf-sheet-open .tf-sheet-done{position:sticky;bottom:0;z-index:2;box-shadow:0 -12px 14px var(--panel),0 40px 0 var(--panel);}   /* covers the strip under it too (R8 F8) */
    .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);}
  /* Phones: the strip was wider than the screen ("ring Settings" cut, L1 F9), and an edge fade alone went unnoticed (final customer
     pass W2), so on phones the tabs wrap onto two rows: every tab is in view and none is cut (2026-10-12). */
  @media (max-width:640px){
    .tabstrip{flex-wrap:wrap;overflow:visible;row-gap:0;}
    .tabstrip button{padding:0 10px;}
  }

  /* 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;}
  /* While a sport's cards arrive in slices the grid keeps its old height (paintCardsChunked); rows must not stretch to fill it,
     or every card is first drawn 1,700px tall and the page jumps as they shrink back (R7-5). */
  #cardGrid,#fantasyGrid{align-content:start;}
  /* Same skip-offscreen-work trick for the other long lists (speed pass 2026-10-06); `auto` remembers the real height once seen. */
  #injuryGrid > .card{content-visibility:auto;contain-intrinsic-size:auto 220px;}
  #evGrid > .ev-card,#arbGrid > .ev-card{content-visibility:auto;contain-intrinsic-size:auto 300px;}
  #moversPanel .mover-row{content-visibility:auto;contain-intrinsic-size:auto 120px;}
  /* Cards arrive in slices above "Show more" and the footer; never let the browser anchor the reader to those, or the page follows
     them down to the bottom (B1-28). Cards in view stay the anchor, so nothing under the reader's thumb moves. */
  .grid ~ *{overflow-anchor:none;}

  .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;}
  /* One name + subline style for every player/team card (Trend Board, Fantasy, Injury Report, Compare, trade ideas). Mina 2026-10-07. */
  .who b{display:block;font-size:18.5px;font-weight:700;color:var(--paper);line-height:1.2;letter-spacing:-.012em;}
  .who > b + span{font-size:13.5px;font-weight:600;color:var(--paper);opacity:.78;letter-spacing:.02em;}
  /* "Club · League" (playerSubline): the last club word and the league are one box, one line tall. It sits whole on a line, or shows
     only the word when the league can't fit beside it; a dot or the league never starts a line (R1-06). */
  .sl-end{display:inline-flex;flex-wrap:wrap;max-width:100%;vertical-align:top;height:1.3em;height:1lh;overflow:hidden;}
  .sl-w{min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .sl-lg{white-space:nowrap;}

  /* Avatars */
  .headshot-wrap{position:relative;flex:none;display:flex;} /* flex: the jersey is the whole avatar, no line-height gap under it (B1-11) */
  .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;}
  /* Team badge (2026-10-06, replaces the cartoon avatars): a rounded square in the team's own colour (--tb, from
     team_colors.js) with the abbreviation in --tf (white or near-black, >= 4.5:1). The outer box keeps the old 54px footprint so
     lists line up. Flat fill, no gradient, no glow, no motion. */
  /* Jersey-back avatar (2026-10-07, Mina's direction 2; replaces the abbreviation square): size comes from --jb (40px lists,
     56px cards, 96px hero), the drawing is one 100-unit SVG. No ring or band around it (B1-11). Static. */
  .team-abbr-badge{--jb-edge:rgba(255,255,255,.16);width:var(--jb,56px);height:var(--jb,56px);flex:none;display:inline-block;border-radius:24%;}
  [data-theme="light"] .team-abbr-badge{--jb-edge:rgba(0,0,0,.16);}
  .team-abbr-badge:focus-visible{outline:2px solid var(--text-accent);outline-offset:3px;}
  .jb-svg{display:block;width:100%;height:100%;border-radius:24%;overflow:hidden;}
  .jb-name{font-family:var(--font-display);font-weight:800;letter-spacing:.04em;}
  .jb-body{stroke:var(--jb-edge);stroke-width:1.2;}
  .jb-rim{stroke:var(--jb-edge);stroke-width:2;rx:24;}
  .spotlight .vs-row{--jb:62px;}
  /* Movers row (2026-10-08): name + team, the line as the headline, one short stats line (a fixed two-line slot so rows align). */
  .mv-line{display:block;margin-top:2px;font-size:15px;font-weight:650;line-height:1.35;color:var(--paper);}
  .mv-approx{font-weight:700;color:var(--text-accent);cursor:help;}
  .mv-season{display:block;font-size:13.5px;color:var(--paper-dim);}
  .mv-why{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(2 * 1.45em);line-height:1.45;font-size:13.5px;color:var(--paper-dim);font-variant-numeric:tabular-nums;}
  .mv-who{display:block;font-size:13.5px;color:var(--paper-dim);}
  .mv-note{margin:0 0 10px;font-size:13.5px;color:var(--paper-dim);}
  .intro-link{margin:-10px 0 16px;font-size:13.5px;}
  .intro-link a,.how-links a{color:var(--text-accent);font-weight:600;}
  .intro-link a{display:inline-block;padding-block:13px;margin-block:-13px;} /* 44px tap target, no visual change */
  .section-intro + .intro-link,.section-intro .intro-link{margin-top:8px;}
  .how-links{line-height:1.9;}

  /* "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;}

  @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.sample-ok{background:var(--panel-2);color:var(--paper-dim);}
  .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;min-height:calc(2 * 1.45em + 18px);box-sizing:border-box;
  }
  .trend-up{background:var(--hit-dim);color:var(--hit-text);}
  .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;} /* initials in a 16px stand-in: decorative, exempt from --fs-min */

  /* 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:hidden;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[data-lazy] .bar-wrap{visibility:hidden;} /* SPD-08: same-height stand-in until the card nears the viewport */
  .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;}
  /* One block on every card (2026-10-07): the line box + slider, or for a yes/no market a fixed row of the same height, so the
     controls line up across a row of cards. The yes/no row sits over a hidden copy of the box + slider, so the heights match by construction. */
  .line-block{flex:1 1 100%;display:flex;flex-direction:column;gap:6px;}
  .line-block-fixed{position:relative;}
  .line-ghost{display:flex;flex-direction:column;gap:6px;visibility:hidden;pointer-events:none;}
  .line-fixed{font-size:12.5px;color:var(--paper-dim);font-weight:550;padding:0 64px 0 10px;position:absolute;inset:0;display:flex;align-items:center;
    border-radius:var(--r-field);background:var(--panel-2);box-sizing:border-box;}
  .line-field{align-self:flex-start;}
  .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;}   /* B3F-11: was opacity .8, which put the Day window buttons under 4.5:1 (review R8-7); the weight alone separates the count */
  .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;}
  /* Reset floats at the card-controls' top right, so it appearing on release never grows the card (QA round 2). */
  .card-controls{position:relative;}
  .card-reset{position:absolute;top:2px;right:0;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;
  }
  /* The pair shares fixed slots (title, jerseys, %, 3-line text) so its rows line up across both cards; align-content:start stops a shorter card sinking. */
  @media (min-width:1280px){ #spotlightArea .spotlight{grid-template-columns:1fr;align-content:start;} #spotlightArea .spotlight-sub{min-height:calc(3 * 1.55em);} #spotlightArea .spotlight-num{min-height:.9em;} }
  @media (min-width:1280px){ #spotlightArea > .spotlight:only-child{grid-column:1/-1;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-content:normal;} }   /* B3F-13: a lone card spans the row, laid out like the base card */
  @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{min-height:24px;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-dim);font-size:var(--fs-min);letter-spacing:.14em;
    padding:4px 9px;border:1px solid var(--rule);border-radius:var(--r-ctl);background:var(--panel-2);}
  /* Both sides of the pair sit in the same box (the ring's size), so jerseys match in size and line up on one centre line. */
  .vs-side{display:grid;place-items:center;flex:none;width:calc(var(--jb,62px) * 1.2);height:calc(var(--jb,62px) * 1.2);}
  .spotlight-num{
    font-family:var(--font-display);color:var(--hit-text);
  }
  .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;}
  #fantasySportTabs{margin-top:20px;}   /* B3F-8: Fantasy has no intro line, so the pills get the 20px every other tool's intro leaves under its title */
  .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 .proj-unit{display:block;font-size:11.5px;font-weight:500;color:var(--paper-faint);margin-top:2px;}
  .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-text);}
  .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:has(.scoring-inline-err){flex-wrap:wrap;} .scoring-inline-err{flex:0 0 100%;font-size:12.5px;color:var(--miss-text);}
  .scoring-row input[aria-invalid="true"]{border-color:var(--miss-text);}
  .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-text);}
  .scoring-save-status.err{color:var(--miss-text);}
  .scoring-save-status button{font:inherit;color:inherit;background:none;border:0;text-decoration:underline;margin-left:6px;padding:4px 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-text);}
  .save-hint{font-size:12.5px;color:var(--hit-text);margin-top:10px;min-height:14px;}
  .team-summary-flag{
    background:var(--miss-dim);color:var(--miss-text);   /* the readable red on this tint, as .depth-tag.thin (gauntlet G1-3: 3.85:1 in Day) */
    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-what-none{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;
  }
  /* Left accent = which tool the card is from (Mina 2026-10-10): Positive EV is Ice, Arbitrage is the second chart hue, both at
     half strength, neither green (green is the % badge only). Not the price state: that is the badge and the age note. */
  .ev-card::after{content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:0 3px 3px 0;background:var(--kind-edge,var(--rule));}
  .ev-card.k-ev{--kind-edge:color-mix(in srgb,var(--brand-primary) 55%,transparent);}
  .ev-card.k-arb{--kind-edge:color-mix(in srgb,var(--accent-2) 55%,transparent);}
  /* Day (B3-04): on white the same 55% mix is only 2.3:1 against the card, against 3.3:1 at night; 75% matches the Night strength. */
  :root[data-theme="light"] .ev-card.k-ev{--kind-edge:color-mix(in srgb,var(--brand-primary) 75%,transparent);}
  :root[data-theme="light"] .ev-card.k-arb{--kind-edge:color-mix(in srgb,var(--accent-2) 75%,transparent);}
  /* DS-INC-22 (b): a purple accent near the Arbitrage violet; Arbitrage's edge moves to the third chart hue so the two tools differ. */
  :root[data-accent-near="violet"] .ev-card.k-arb{--kind-edge:color-mix(in srgb,var(--accent-3) 55%,transparent);}
  :root[data-accent-near="violet"][data-theme="light"] .ev-card.k-arb{--kind-edge:color-mix(in srgb,var(--accent-3) 75%,transparent);}
  /* Sport and league tag above the headline (B1-20): same pill family as the trust chips, text in --paper so it reads first. */
  .ev-sport{display:inline-flex;align-items:center;min-height:26px;margin:0 0 8px;padding:3px 10px;border-radius:var(--r-ctl);border:1px solid var(--line-soft);background:var(--panel-2);font-size:12.5px;font-weight:650;line-height:1.2;color:var(--paper);letter-spacing:.01em;}
  .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 .ev-headline{margin:0 0 6px;font-family:var(--font-display);line-height:1.2;letter-spacing:-.01em;overflow-wrap:anywhere;}
  .ev-headline .eh-who{display:block;font-size:1.15rem;font-weight:700;color:var(--paper);}
  .ev-headline .eh-line{display:block;margin-top:2px;font-size:1.3rem;font-weight:700;color:var(--text-accent);}
  .ev-headline .eh-side{white-space:nowrap;}
  /* Display review UIP-03 (2026-10-16): with a player-prop card on the board, the name and the line each take exactly two
     lines, so the price boxes and meters of the cards in one row line up (longer text ends in an ellipsis; the heading's
     aria-label keeps the full text). Phones show one card per row, so they keep the natural height. */
  @media (min-width:641px){
    #evGrid.has-props .ev-headline .eh-who,#evGrid.has-props .ev-headline .eh-line{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;min-height:2.4em;}
    /* The team row too (UI2-03): two rows of 26px badges plus the 6px gap, the most it takes at full width (below). */
    #evGrid.has-props .ev-card .matchup-line .teams{min-height:58px;align-content:flex-start;}
  }
  /* Screens 641px and wider (UI2-03, 2026-10-16): the team row and the date line run the full card width under the % badge.
     Beside the badge they had about 140px at common laptop widths, so "Miami Dolphins @ Buffalo Bills" took 3 rows and longer
     matchups 4, and cards in one row no longer lined up. The left column's own box is dropped (display:contents) so its parts
     sit in the card header's grid: sport tag and headline beside the badge, as before. Phones keep the stacked column. */
  @media (min-width:641px){
    .ev-card .matchup-line{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 12px;align-items:start;}   /* no row gap: the parts keep their own 8/6/4px spacing (V1-01) */
    .ev-card .matchup-line > div{display:contents;}
    .ev-card .matchup-line > div > *{grid-column:1;min-width:0;}
    .ev-card .matchup-line .ev-sport{justify-self:start;}
    .ev-card .matchup-line .teams,.ev-card .matchup-line .sub{grid-column:1 / -1;}
    .ev-card .matchup-line > .ev-badge{grid-column:2;grid-row:1 / span 2;}
  }
  .em-note .em-bankroll-link{display:block;margin-top:4px;background:none;border:0;padding:0;font:inherit;font-size:12px;color:var(--text-accent);cursor:pointer;text-decoration:underline;}
  .ev-card .matchup-line .teams{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:13px;font-weight:500;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-text);}
  .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;
  }

  /* The fixed example card under an empty board: the normal card, dashed edge, label on top. */
  .ev-card.example{border-style:dashed;}
  .ev-example-mark{margin:0 0 8px;}
  /* The example card's Track: the normal button, greyed out (dashed like the card), with its reason beside it. */
  .ev-card-actions .watchlist-btn:disabled{opacity:.55;cursor:not-allowed;border-style:dashed;background:transparent;}
  .ev-card-actions .ex-track-note{order:-1;margin-right:auto;font-size:12px;color:var(--paper-faint);}   /* B3F-3: first in the row whatever its place in the markup */

  /* 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);
  }
  .why-num{position:relative;margin:8px 0 0;font-size:12.5px;}
  .why-num summary{display:inline-block;cursor:pointer;color:var(--text-accent);font-weight:650;padding:8px 0;min-height:24px;}
  /* In the flow, not floating (button audit round 2): it used to cover the card's own buttons and get cut off at the card edge. */
  .why-pop{position:static;margin-top:2px;max-width:420px;padding:12px 14px;background:var(--panel);border:1px solid var(--rule);border-radius:16px;box-shadow:var(--pop-shadow);color:var(--paper-dim);font-variant-numeric:tabular-nums;}
  .why-pop p{margin:0 0 8px;line-height:1.45;}
  .why-pop b{color:var(--paper);}
  .tf-sheet-done{display:none;}
  .tf-sheet-open .tf-sheet-done{display:flex;width:100%;justify-content:center;align-items:center;margin-top:12px;min-height:44px;}
  .why-pop .why-note{font-size:12px;}
  .why-pop a{color:var(--text-accent);font-weight:650;}
  .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(.cal-preview) > :not(h2):not(.plan-lock){display:none !important;}
  /* Free preview (opt-in): the example switch, month, totals and grid, read-only; the lists, entries and settings stay Pro. */
  body.plan-free #calendarView.cal-preview > :not(h2):not(.plan-lock):not(.mock-toggle-label):not(.cal-month-nav):not(.cal-month-total):not(.cal-stats):not(.cal-curve):not(.calendar-grid):not(.disclaimer-box){display:none !important;}
  body.plan-free #calendarView.cal-preview .calendar-grid{pointer-events:none;}
  body.plan-free #calendarView.cal-preview :is(#calSettleNote,#calSettleBtn,#calNewEntryBtn,#calCsvBtn){display:none !important;}   /* Pro actions stay Pro */
  .plan-lock .cal-preview-btn{display:block;margin-top:10px;min-height:44px;}

  /* =====================================================================
     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-text);}
  .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-text);}
  .cal-stat b.neg{color:var(--miss-text);}
  .cal-assumed{grid-column:1/-1;margin:0;font-size:12.5px;color:var(--paper-dim);}
  /* Day panel (2026-10-11): the day's totals as two of the month's own stat tiles, with the amounts that make them up. */
  .cal-day-sum{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 12px;}
  .cal-stat small{font-size:12.5px;color:var(--paper-faint);overflow-wrap:anywhere;}
  .cal-group-label{font-size:13px;font-weight:650;color:var(--paper-dim);margin:14px 0 8px;}
  .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:13px;font-weight:650;color:var(--paper-dim);}
  .cal-day .amt .short{display:none;}
  .cal-day .amt .amt-word{display:block;font-style:normal;font-size:11px;font-weight:600;letter-spacing:0;line-height:1.1;}   /* phone: "$300" + "pending" (review R1-03); 11px is the text floor */
  .cal-day .amt .aw-s{display:none;}
  @media (max-width:359px){ .cal-day .amt .aw-l{display:none;} .cal-day .amt .aw-s{display:inline;} }   /* 320px cells are ~38px wide */
  .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-text);}
  .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-text);}
  .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-text);}
  .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-text);}
  .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;}
  /* Per-outcome results on a placed arbitrage line (CAL-FIX-4): the existing .seg control, one row per outcome. Tokens only. */
  .cal-legs{display:block;margin-top:8px;}
  .cal-leg{display:block;margin-top:8px;}
  .cal-leg-name{display:block;margin-bottom:4px;font-size:13px;font-weight:650;color:var(--paper);}
  .cal-legs .seg{max-width:240px;}
  .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);
    /* A long message wraps on every width, never runs off the screen (review 2026-10-14) */
    white-space:normal;width:max-content;max-width:min(560px,calc(100vw - 28px));text-align:center;
    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 button{font:inherit;color:inherit;background:none;border:0;border-radius:var(--r-ctl);text-decoration:underline;margin-left:4px;padding:2px 8px;min-height:28px;cursor:pointer;}
  /* R8-03: the toast's Undo / Retry is a real button, at least 44px tall on touch screens. */
  @media (pointer:coarse),(max-width:640px){ .te-toast button{min-height:44px;padding:0 14px;} }
  /* Soft account prompt (2026-10-11, #acctNudge): the toast's place, blur and shadow, one step higher so it never covers the action's own
     toast (or its Undo). Neutral panel colours only; the two buttons are the existing .modal-close-btn and .load-more-btn. */
  .te-nudge{
    position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));z-index:499;box-sizing:border-box;width:min(440px,calc(100vw - 28px));
    transform:translate(-50%,8px);opacity:0;pointer-events:none;padding:14px 16px 12px;border-radius:16px;
    background:var(--panel);color:var(--paper);border:1px solid var(--line-soft);box-shadow:var(--pop-shadow);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:opacity .18s ease,transform .22s var(--ease-out);
  }
  .te-nudge.show{opacity:1;transform:translate(-50%,0);pointer-events:auto;}
  .te-nudge p{margin:0 0 10px;font-size:13.5px;line-height:1.5;font-weight:550;color:var(--paper);}
  .te-nudge-actions{display:flex;gap:8px;flex-wrap:wrap;}
  .te-nudge-actions .modal-close-btn{width:auto;min-height:44px;padding:0 18px;border-radius:var(--r-ctl);font-size:14px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;}
  .te-nudge-actions .load-more-btn{min-height:44px;padding:0 18px;font-size:14px;}
  /* Finish-a-Google-sign-up box (#consentSheet): the location gate's recipe plus the Settings checkbox rows. */
  .consent-box .news-opt{margin:0 0 12px;}
  .consent-box .news-opt a{color:var(--text-accent);}
  .consent-box{max-height:calc(100dvh - 32px);overflow-y:auto;}
  /* 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%;}
  /* The free-account card (2026-10-12) uses the same two buttons as links to the sign-up and log-in pages. */
  .age-gate-actions a.modal-close-btn,.age-gate-actions a.load-more-btn{display:flex;align-items:center;justify-content:center;text-decoration:none;}
  #accountGate .age-gate-note{margin:16px 0 0;}
  #accountGate .account-gate-later{display:block;margin:12px auto 0;min-height:44px;padding:0 12px;}   /* Not now (softened, 2026-10-12) */
  #accountGateTitle:focus{outline:none;}   /* focus starts on the title for screen readers; it isn't a control, so no ring */
  /* 200% zoom or a very short screen: the title wraps instead of running off, and both buttons stay on the card's first screen (review R1/R8). */
  @media (max-height:480px),(max-width:260px){ #accountGate .modal-title{font-size:1.5rem;overflow-wrap:anywhere;} #accountGate .modal-box{padding:22px 20px 20px;} }
  /* Where-you-live gate (2026-10-10): the Personalisation .field-row select and the existing disabled look (.split-btn). */
  .age-gate-actions .modal-close-btn:disabled{background:var(--panel-2);color:var(--paper-dim);opacity:1;cursor:not-allowed;box-shadow:none;}   /* neutral, never accent (review RG-05) */
  .modal-box p.age-gate-note{margin:-4px 0 16px;font-size:13px;color:var(--paper-dim);}
  .modal-box p.age-gate-note.age-gate-geo{margin:-4px 0 6px;}
  .modal-box .field-row select{width:100%;min-width:0;max-width:100%;min-height:44px;}   /* long place names never push past the box on phones */

  .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;
    position:sticky;top:-22px;z-index:2;margin-top:-22px;padding:22px 0 8px;background:var(--panel);}   /* title and close stay in view while the sheet scrolls (S4-2) */
  .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, .brand .brand-mark{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:"";content:"" / "Pro";position:absolute;top:7px;right:calc(50% - 16px);width:7px;height:7px;border-radius:50%;background:var(--paper-faint);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));}
    .te-nudge{bottom:calc(var(--tabbar-h) + 84px + 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;}
    /* Solid on phones: page text must not ghost through behind the logo (tour 2026-10-07). */
    .topbar::before{background:var(--rail);-webkit-backdrop-filter:none;backdrop-filter:none;}
    .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:64px;padding:6px 4px;border-radius:10px;}
    .cal-day .num{font-size:12px;}
    .cal-day.today .num{min-width:20px;height:20px;margin:-2px 0 0 -2px;}
    .cal-day .amt{font-size:.8125rem;} /* 13px: money in a day cell stays readable on a phone (Mina 2026-10-08) */
    .cal-day .amt .full{display:none;}
    .cal-day .amt .short{display:inline;}
    .cal-day .amt.pend{font-size:.8125rem;}
    .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;width:auto;max-width:none;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);
  }
  /* Line pill: its own column at the right end of the dashed axis, so it never touches a bar or a bar label. */
  .line-tag-col{flex:0 0 34px;}
  .line-tag-col .mplot::after{left:0;right:0;}
  .line-tag{position:absolute;right:0;bottom:calc(var(--pad) + (100% - 2 * var(--pad)) * var(--a));transform:translateY(50%);
    padding:1px 4px;border-radius:6px;background:color-mix(in srgb,var(--panel-2) 88%,transparent);color:var(--paper-dim);
    font-size:var(--fs-min);line-height:1.2;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;}
  .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));
    transition:bottom .12s var(--ease-out),height .12s var(--ease-out),background-color .12s linear;
  }
  @media (prefers-reduced-motion: reduce){ .mbar{transition:none;} }
  .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;}
  .meter-na{opacity:.6;} .meter-na b{color:var(--paper-dim);}
  .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 var(--fs-min) 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:8px 6px 0;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 */
  .k-fair{background:var(--paper);}
  .k-impl{border:2px solid var(--brand-primary);}

  /* Arbitrage stake split */

  /* 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-text);} .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 var(--fs-min) 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;}
    /* Launch review L2 P1 (2026-10-12): with nothing tracked yet, the hint row goes on phones so a card reaches the first screen;
       every card's own "+ Track" says the same. It shows again with the first tracked line. */
    .hello-props:has(> .empty-tile:only-child){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:#6fb4d2;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;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 16px;font-size:13px;color:var(--paper-dim);}
  .league-switch > span{white-space:nowrap;}   /* "Your scoring" read "Your / scoring" on a phone (launch review L1 F9) */
  .league-switch .seg{min-width:240px;}
  /* Category value block on a card (B1-24): header + caption, a chart with a labelled midline, a legend, then the quiet Best / Weakest line. */
  .cat-block{--cat-up:color-mix(in srgb,var(--hit) 86%,var(--panel));--cat-dn:repeating-linear-gradient(135deg,transparent 0 3px,rgba(0,0,0,.22) 3px 5px),color-mix(in srgb,var(--miss) 86%,var(--panel));display:grid;gap:6px;margin:12px 0 4px;}
  .cat-head{display:grid;gap:1px;}
  .cat-head b{font-size:13px;font-weight:650;color:var(--paper);}
  .cat-head span{font-size:12px;color:var(--paper-dim);line-height:1.35;}
  .cat-chart{display:grid;grid-template-columns:30px repeat(var(--n,9),1fr);gap:4px;height:96px;margin:4px 0 0;}
  .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:var(--cat-up);}
  .cat-track i.dn{top:50%;background:var(--cat-dn);}
  .cat-axis .cat-track{display:flex;align-items:center;justify-content:flex-start;background:none;}
  .cat-axis em{font-style:normal;font-size:var(--fs-min);line-height:1.1;color:var(--paper-faint);text-align:left;}
  .cat-legend{display:flex;flex-wrap:wrap;gap:2px 14px;font-size:12px;color:var(--paper-dim);}
  .cat-legend span{display:inline-flex;align-items:center;gap:6px;}
  .cat-legend i{width:10px;height:10px;border-radius:2px;flex:none;}
  .cat-legend i.up{background:var(--cat-up);}
  .cat-legend i.dn{background:var(--cat-dn);}
  .cat-key{font-size:12px;color:var(--paper-faint);margin-top:2px;}
  .cat-key b{color:var(--paper-dim);font-weight:600;}
  .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;}
  /* Neutral: who is ahead on past games is a fact, not a win, so no green or red on either side (B1-25, legal 2026-10-10). */

  /* 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;grid-template-rows:auto 1fr auto;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-sub{display:flex;align-items:center;flex-wrap:wrap;gap:2px 6px;} /* bye/injury pill shares the team line so it never adds height (QA 2026-10-07) */
  .ti-sub .injury-badge{margin:0;}
  .ti-sub > span:first-child{font-size:13.5px;font-weight:600;color:var(--paper);opacity:.78;letter-spacing:.02em;}   /* same as .who > b + span (review R8-04) */
  .ti-gain{font-weight:700;color:var(--hit-text);white-space:nowrap;}
  /* Fantasy rows (2026-10-07): jersey-back avatar at list size, week labels and the per-week strip reuse the badge tokens. */
  .row-avatar{--jb:36px;flex:none;display:inline-grid;place-items:center;width:36px;height:36px;margin-right:2px;}
  .row-initials{display:grid;place-items:center;width:36px;height:36px;border-radius:24%;background:var(--panel-2);color:var(--paper-dim);font:700 12px var(--font-display);}
  .ti-head .who{flex:1;min-width:0;} .ti-head{justify-content:flex-start;} .ti-head .ti-gain{margin-left:auto;}
  .roster-row .rr-name{flex:1;min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:6px;}
  .roster-row .rr-val{white-space:nowrap;font-variant-numeric:tabular-nums;}
  .wa-row .name:has(> .row-avatar),.wa-row .name:has(> .row-initials){display:flex;align-items:center;gap:8px;} /* only rows that start with an avatar (QA 2026-10-07: the bare rule broke Movers rows) */
  .bf-name .row-avatar{--jb:28px;width:28px;height:28px;}
  .search-suggest-row .row-avatar{--jb:28px;width:28px;height:28px;} .search-suggest-row b{flex:1;}
  /* QA 2026-10-08: the header and notes were cells of the outer auto-fill grid, squeezing the cards into one cell. Stack them; the cards get their own 3-column (desktop) / 1-column (phone) grid. */
  #tradeSimResults{display:block;}
  #tradeSimResults .trade-ideas{grid-template-columns:repeat(3,minmax(0,1fr));}
  @media (max-width:900px){ #tradeSimResults .trade-ideas{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));} }
  @media (max-width:600px){ #tradeSimResults .trade-ideas{grid-template-columns:1fr;} }
  .trade-sim-head{display:flex;gap:12px;align-items:center;margin:4px 0 12px;font-size:14px;}
  .trade-sim-sub{font-size:12.5px;color:var(--paper-dim);margin-top:4px;line-height:1.45;max-width:60ch;}
  /* B2 trade value rebuild: the one-line basis label on a card (existing .mc-note type, spacing from the card grid), and the Trending window label in the dimmer-but-readable text tone. */
  .trade-idea .mc-note,#tradeIdeas > .mc-note{margin:0;}
  .wa-sample.wa-window{color:var(--paper-dim);line-height:1.45;}
  .watch-avoid-grid > .mc-note{grid-column:1/-1;margin:0;}
  .week-strip{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 2px;}
  .ws-chip{display:grid;gap:1px;justify-items:center;min-width:64px;padding:5px 8px;border-radius:var(--r-ctl);background:var(--panel-2);border:1px solid var(--line-soft);font-size:11px;color:var(--paper-dim);}
  .ws-chip i{font-style:normal;} .ws-chip b{font-size:15px;color:var(--paper);font-variant-numeric:tabular-nums;} .ws-chip em{font-style:normal;font-size:11px;letter-spacing:.04em;}
  .ws-chip.out{background:var(--miss-dim);} .ws-chip.out em{color:var(--miss-text);}
  .ws-chip.window,.ws-chip.doubtful,.ws-chip.questionable{background:var(--warn-dim);} .ws-chip.window em,.ws-chip.doubtful em,.ws-chip.questionable em{color:var(--warning);}
  .ti-reasons{margin:0;padding-left:18px;display:grid;gap:6px;align-content:start;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;}
  /* QA 2026-10-08: the 44px rule above only applies to coarse pointers; a 390px screen needs it by width too. */
  @media (max-width:640px){
    #fantasyView .sporttab,#fantasyView .league-chip,#fantasyView .share-btn,#fantasyView .watchlist-btn,#fantasyView .ti-compare,#fantasyView .tabstrip button{min-height:44px;}
  }

  /* ---- 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{overflow-wrap:break-word;}
  .fc-avatar{display:grid;place-items:center;}
  .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{--jb:40px;flex:none;min-width:56px;min-height:56px;display:grid;place-items: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-text);}
  .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-text);}
  .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-text);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-text);}

  /* =====================================================================
     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-text);}
  .streak-chip.miss{background:var(--miss-dim);color:var(--miss-text);}
  .rate-row{flex-wrap:wrap;gap:8px;}
  /* One chip line on every card, filled or not, so a row of cards keeps its hit-rate bars and controls level (2026-10-07). */
  .rate-chips{flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;min-height:54px;align-content:flex-start;}

  /* 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%;}
  #accountBody .delete-box{margin-top:14px;padding:14px;border-radius:12px;border:1px solid var(--line-soft);background:var(--panel-2);}
  #accountBody .delete-box h4{font-size:14px;font-weight:650;margin:0 0 6px;color:var(--paper);}
  #accountBody .delete-box .sheet-link-btn{background:var(--panel);}
  #accountBody .delete-box .sheet-link-btn:disabled{opacity:.5;cursor:not-allowed;}
  #accountBody [data-delete-open]{margin-top:14px;}


  /* =====================================================================
     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;}
    .grid.settled > *,.grid > .no-enter{animation:none;}
  }

  /* =====================================================================
     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;}
  #injuryGlance{align-items:start;}   /* B3F-4: the Status tile hugs its content instead of stretching to the taller "Most players listed" tile */
  /* Crash test 2026-10-12 (desktop layout shift 0.18): the at-a-glance block sits above the filters and fills in once the sport's
     data is in, which used to push them down a screen. Until the first draw it holds about the space it will take (below the
     fold, so what is on screen does not move) with one quiet line, like #main while the page gets ready. Phones fold their filters
     above the block when the page starts, so there the block stays out of the way until it has content. */
  @media (min-width:700px){
    #boardGlance.glance-pending:empty{display:block;min-height:900px;}
    #boardGlance.glance-pending:empty::before{content:"Loading\2026";display:block;padding:28px 0;text-align:center;font-size:14px;color:var(--paper-dim);}
  }
  .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-text);} .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-sentence{margin:2px 0 0;font-size:14.5px;line-height:1.5;color:var(--paper-dim);}
  .gl-sentence b{font-size:1.15em;font-weight:700;color:var(--paper);font-variant-numeric:tabular-nums;}
  .gl-sentence .gl-fine{display:block;margin-top:4px;font-size:12px;}
  .gl-sentence .nw{white-space:nowrap;}
  .gl-sentence b.gl-hit{color:var(--hit-text);} .gl-sentence b.gl-miss{color:var(--miss-text);}
  .gl-sentence i{font-style:normal;color:var(--paper);font-weight:550;}
  .gl-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:7px;}
  .gl-list li{font-size:13px;min-width:0;line-height:1.4;color:var(--paper);}
  .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) 3.6em;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{text-align:right;font-size:12.5px;font-weight:650;color:var(--paper);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-variant-numeric:tabular-nums;}
  /* Injury Report: the status group headings span the whole grid row; same type as the board's subsection labels. */
  #injuryGrid .inj-group{grid-column:1/-1;margin:8px 0 -4px;font-size:13px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--paper-dim);}
  /* Injury Report: each status is a filter (launch review L2 H2). Same look as the legend, with a 44 px tap area. */
  .gl-legend .gl-pick{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 6px;margin:0 -6px;background:none;border:0;
    border-radius:8px;color:inherit;font:inherit;cursor:pointer;}
  .gl-legend .gl-pick[aria-pressed="true"]{background:var(--panel);box-shadow:inset 0 0 0 1px var(--edge-accent);color:var(--paper);}   /* as .tp-row */
  .gl-legend .gl-pick:focus-visible{outline:2px solid var(--brand-primary);outline-offset:2px;}
  .gl-split{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  .gl-tall{grid-row:span 1;}

  /* BOARD TOP SECTION (Mina 2026-10-06): ranked hit-rate bars, form grids, schedule card. Existing tokens
     only; green / red / gold keep their meaning (beat it / never / around half). */
  #boardGlance{position:relative;}
  #boardGlance.settled .gl-tile{animation:none;}
  .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  .gl-hero .gl-sentence{font-size:17px;line-height:1.45;margin:0;color:var(--paper-dim);text-wrap:balance;}
  .gl-hero .gl-sentence b{font-size:1.12em;}
  /* Between-seasons banner (2026-10-07): the days-to-go number sits beside a plain sentence; same tile, tokens and type as the rest. */
  #boardGlance > .gl-wide.gl-offseason{grid-column:1 / -1;} /* banner on its own row; the bars and schedule sit side by side below it */
  .gl-offseason .os-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
  .gl-offseason .os-count{display:flex;flex-direction:column;align-items:flex-start;min-width:96px;}
  .gl-offseason .os-count .gl-big{margin:0;color:var(--gold);}
  .gl-offseason .os-count span{font-size:12px;color:var(--paper-faint);letter-spacing:.02em;}
  .gl-offseason .gl-note{flex:1 1 260px;margin:0;font-size:13.5px;}
  .gl-fine{margin:12px 0 0;font-size:12px;line-height:1.5;color:var(--paper-faint);}
  .gl-fine i{font-style:normal;color:var(--paper-dim);font-weight:550;}
  .gl-hero{container-type:inline-size;}
  .hb-seg{margin-top:14px;max-width:340px;}
  .hb-seg button{cursor:pointer;}
  .hb-seg button:focus-visible{outline:2px solid var(--text-accent);outline-offset:2px;}
  .hb-list{list-style:none;margin:0;padding:0;}
  .hb-axis,.hb-row{display:grid;grid-template-columns:34px minmax(0,1fr) minmax(0,1.25fr) 7.8em;column-gap:12px;align-items:center;}
  .hb-axis{margin-top:12px;}
  .hb-scale{grid-column:3;position:relative;height:14px;font-size:11px;color:var(--paper-faint);}
  .hb-scale em{position:absolute;top:0;font-style:normal;line-height:14px;font-variant-numeric:tabular-nums;}
  .hb-scale em:nth-child(1){left:0;} .hb-scale em:nth-child(2){left:50%;transform:translateX(-50%);} .hb-scale em:nth-child(3){right:0;}
  .hb-row{padding:9px 0;border-top:1px solid var(--line-soft);}
  .hb-row:first-child{border-top:0;}
  .hb-track{position:relative;height:10px;border-radius:6px;background:var(--panel-3);overflow:hidden;}
  .hb-track::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent calc(25% - 1px),var(--panel) calc(25% - 1px) 25%,transparent 25% calc(50% - 1px),var(--panel) calc(50% - 1px) 50%,transparent 50% calc(75% - 1px),var(--panel) calc(75% - 1px) 75%,transparent 75%);}
  .hb-fill{display:block;height:100%;border-radius:6px;transform-origin:left center;background:color-mix(in srgb,var(--c) 88%,var(--panel));}
  .hb-rate{text-align:right;font-size:13px;line-height:1.2;white-space:nowrap;color:var(--paper-dim);font-variant-numeric:tabular-nums;}
  .hb-rate b{font-size:14px;font-weight:650;color:var(--paper);}
  .hb-main{max-width:100%;}
  @keyframes hb-grow{from{transform:scaleX(0);}to{transform:none;}}
  @media (prefers-reduced-motion:no-preference){
    .hb-wait .hb-fill{transform:scaleX(0);}
    .hb-play .hb-fill{animation:hb-grow .28s var(--ease-out) both;animation-delay:calc(var(--i) * 30ms);}
  }
  @container (max-width:470px){
    .hb-axis,.hb-row{grid-template-columns:34px minmax(0,1fr) auto;}
    .hb-row{row-gap:9px;padding:11px 0;}
    .hb-rate{grid-column:3;grid-row:1;}
    .hb-track{grid-column:1 / -1;grid-row:2;}
    .hb-scale{grid-column:1 / -1;}
  }
  .gl-tip{position:absolute;z-index:6;left:0;top:0;max-width:min(260px,calc(100% - 8px));padding:8px 11px;display:flex;flex-direction:column;gap:2px;
    font-size:12.5px;line-height:1.4;color:var(--paper);background:var(--panel-3);border:1px solid var(--edge-accent);border-radius:12px;box-shadow:var(--pop-shadow);pointer-events:none;}
  .gl-tip[hidden]{display:none;}
  .gl-tip b{font-weight:650;font-size:13px;}
  .gl-tip span{color:var(--paper-dim);}
  .gl-tip .fg-auto{margin-left:4px;}
  /* form grid */
  .gl-form{container-type:inline-size;}
  .gl-form .gl-h .fg-legend{display:block;margin-top:2px;color:var(--paper-faint);}
  .fg-list{list-style:none;margin:6px 0 0;padding:0;}
  .fg-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto 3.2em;align-items:center;column-gap:12px;padding:9px 0;border-top:1px solid var(--line-soft);}
  .fg-row:first-child{border-top:0;}
  .fg-badge{--jb:40px;display:grid;place-items:center;}
  .fg-main{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;border-radius:6px;}
  .fg-main:focus-visible{outline:2px solid var(--text-accent);outline-offset:3px;}
  .fg-name{max-width:100%;font-size:14px;font-weight:600;line-height:1.3;color:var(--paper);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .fg-main:hover .fg-name{color:var(--text-accent);}
  .fg-stat{display:flex;align-items:center;gap:6px;max-width:100%;font-size:12.5px;line-height:1.4;color:var(--paper-dim);white-space:nowrap;}
  .fg-stat .fg-auto{flex:none;margin:0;}
  .fg-auto{display:inline-block;padding:0 6px;height:17px;line-height:17px;border-radius:var(--r-ctl);background:var(--panel-2);color:var(--paper-dim);font-size:11px;font-weight:600;letter-spacing:.01em;white-space:nowrap;}
  .fg-sq{--q:clamp(9px,calc(150px / var(--nq,5)),18px);display:flex;gap:2px;align-items:center;}
  .fg-q{flex:none;width:var(--q);height:var(--q);border-radius:3px;}
  .fg-q.hit{background:var(--hit);}
  .fg-q.miss{background:var(--miss) repeating-linear-gradient(135deg,rgba(0,0,0,.2) 0 1.5px,transparent 1.5px 4px);}
  .fg-rec{font-size:15px;font-weight:650;line-height:1;text-align:right;color:var(--paper-faint);font-variant-numeric:tabular-nums;}
  .gl-perfect .fg-rec b{color:var(--hit);} .gl-cold .fg-rec b{color:var(--miss-text);}
  .fg-all{margin-top:4px;min-height:40px;padding:0;background:none;border:0;color:var(--text-accent);font:inherit;font-size:13px;font-weight:600;cursor:pointer;border-radius:6px;}
  .fg-all:hover{color:var(--accent-strong);}
  .fg-all:focus-visible,.sc-go:focus-visible,.run-note button:focus-visible{outline:2px solid var(--text-accent);outline-offset:3px;}
  @container (max-width:430px){
    .fg-row{grid-template-columns:40px minmax(0,1fr) auto;row-gap:8px;}
    .fg-rec{grid-column:3;grid-row:1;}
    .fg-sq{grid-column:2 / 4;grid-row:2;}
  }
  /* schedule */
  .gl-sched .gl-big{margin-top:2px;}
  .sc-none{margin:4px 0 0;font-size:15px;line-height:1.4;font-weight:600;color:var(--paper);}
  .sc-days{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;}
  .sc-days li{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;}
  .sc-days b{min-height:12px;font-size:11px;font-weight:650;line-height:1;color:var(--paper-dim);font-variant-numeric:tabular-nums;}
  .sc-bar{display:flex;align-items:flex-end;justify-content:center;width:100%;height:46px;}
  .sc-bar i{display:block;width:min(100%,20px);border-radius:4px 4px 2px 2px;background:color-mix(in srgb,var(--brand-primary) 80%,var(--panel));}
  .sc-bar i.none{background:var(--panel-3);}
  .sc-days em{font-style:normal;font-size:11px;line-height:1;color:var(--paper-faint);white-space:nowrap;}
  .sc-days li:first-child em{color:var(--paper);font-weight:600;}
  .sc-go{display:block;margin-top:12px;padding:0;min-height:36px;background:none;border:0;color:var(--text-accent);font:inherit;font-size:13px;font-weight:600;line-height:1.35;text-align:left;cursor:pointer;border-radius:6px;}
  .sc-go:hover{color:var(--accent-strong);}
  .run-note{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:-6px 0 14px;font-size:13px;color:var(--paper-dim);}
  .run-note[hidden]{display:none;}
  .run-note button{padding:0;background:none;border:0;color:var(--text-accent);font:inherit;font-weight:600;cursor:pointer;border-radius:6px;}
  .card.gl-found{outline:2px solid var(--text-accent);outline-offset:3px;}
  @media (max-width:560px){
    .gl-hero .gl-sentence{font-size:15.5px;}
  }
  #fantasyGlance{grid-template-columns:repeat(3,minmax(0,1fr));}
  #boardGlance{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:dense;}
  #boardGlance > .gl-wide{grid-column:span 3;} #boardGlance > .gl-runs{grid-column:span 2;}
  @media (max-width:1100px){ .glance{grid-template-columns:repeat(2,minmax(0,1fr));} #boardGlance{grid-template-columns:repeat(2,minmax(0,1fr));} #boardGlance > .gl-wide{grid-column:1 / -1;} #boardGlance > .gl-runs{grid-column:span 1;} #boardGlance > .gl-sched{grid-column:1 / -1;} #fantasyGlance{grid-template-columns:1fr;} #fantasyGlance .gl-wide{grid-column:auto;} }
  @media (max-width:560px){ .glance{grid-template-columns:1fr 1fr;gap:10px;} #boardGlance{grid-template-columns:1fr;gap:10px;} #boardGlance > .gl-tile{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. */
  .mplot .val,.ev-price-table .val{font-family:var(--font-data);letter-spacing:-.01em;}
  /* Words and dates stay in the body font; mono is for number columns only (Mina 2026-10-06). */
  .chart .bar-label{font-variant-numeric:tabular-nums;}
  .chart .bar-label .bd-m,.chart .bar-label .bd-d{display:block;} .chart .bar-label .bd-m{line-height:1.15;}
  .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-variant-numeric:tabular-nums;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(--brand-primary);color:var(--on-accent);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;}
  html:not(.te-ready) #main{position:relative;}
  /* While the page gets ready the space stays reserved (nothing jumps) and one quiet line says it is working (B1-28). */
  html:not(.te-ready) #main::before{content:"Loading\2026";visibility:visible;position:absolute;top:0;left:0;right:0;padding:28px 0;text-align:center;font-size:14px;color:var(--paper-dim);}
  .mc-note{font-size:12.5px;color:var(--paper-dim);margin:4px 0 8px;line-height:1.45;}
  /* Weekly Matchup on recent form (B1-25): a small label over each total, a plain games fact, and one neutral line under both lineups. */
  .mc-label{font-size:12.5px;font-weight:650;color:var(--paper-dim);margin:2px 0 4px;}
  .mc-games{font-size:12.5px;color:var(--paper-dim);margin:0 0 8px;}
  .mc-games b,.roster-row-games b{color:var(--paper);font-weight:650;}
  .roster-row-games{font-size:12px;color:var(--paper-dim);padding:0 0 4px;}
  .mc-ahead{margin:14px 0 20px;padding:12px 14px;border-radius:var(--r-panel);background:var(--panel-2);border:1px solid var(--line-soft);font-size:14.5px;line-height:1.5;color:var(--paper);text-wrap:pretty;}

  /* 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%;} }

  /* Free plan: the "Pro" chip beside a card's game filter (2026-10-03). */
  a.split-btn.split-pro{display:inline-flex;align-items:center;text-decoration:none;border-style:dashed;color:var(--text-accent);}
  a.split-btn.split-pro:hover{border-color:var(--edge-accent);}
  .plan-lock-lg > span{color:var(--paper-dim);}

  /* =====================================================================
     TREND CARD READABILITY (Mina, 2026-10-03: bigger numbers and slider,
     player and team easy to see, clearer chart with a "how to read" key).
     Same layout, same data; only sizes, the line marker and the key change.
     ===================================================================== */
  #cardGrid .headshot{width:60px;height:60px;}
  #cardGrid .rate-cap{font-size:13px;}
  #cardGrid .prop-line{font-size:15px;}
  #cardGrid .prop-line b{font-size:1.5rem;}
  /* Cards in one grid row line up (Mina 2026-10-07): 2-line name block, one-line subline and market label, a reserved note row. */
  #cardGrid > .card .card-top{min-height:72px;}
  /* The controls tray sits at the card's bottom edge and its chips never wrap, so "Your line" lines up across a row
     whatever the next-game note above it needs. */
  #cardGrid > .card .card-controls{margin-top:auto;}
  #cardGrid .split-group{flex-wrap:nowrap;}
  #cardGrid .split-btn{flex:1 1 auto;min-width:0;padding:0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  #cardGrid > .card .trend-pill{min-height:calc(3 * 1.45em + 18px);}
  #cardGrid > .card .card-top .who{min-width:0;}
  #cardGrid > .card .card-top .who b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;min-height:2.4em;overflow-wrap:break-word;}
  #cardGrid > .card .card-top .who > b + span{max-width:100%;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;min-height:2.6em;line-height:1.3;overflow-wrap:break-word;}
  #cardGrid .prop-line{min-height:62px;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;row-gap:2px;align-items:center;}
  #cardGrid .prop-label{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  #cardGrid .prop-note{grid-column:1 / -1;margin-left:0;min-height:1.3em;line-height:1.3;}
  /* The line is the dashed zero axis every dot is measured from. */
  #cardGrid .mplot::after{border-top:1.5px dashed color-mix(in srgb,var(--paper) 55%,transparent);}
  #cardGrid .mplot .val{font-size:13.5px;font-weight:750;}
  #cardGrid .mbar{width:3px;}
  #cardGrid .mbar::after{width:13px;height:13px;}
  #cardGrid .mbar.up::after{top:-6.5px;}
  #cardGrid .mbar.dn::after{bottom:-6.5px;}
  #cardGrid .mplot:has(.mbar.up) .val,#cardGrid .mplot:has(.mbar.flat) .val{transform:translateY(-8px);}
  #cardGrid .mplot:has(.mbar.dn) .val{transform:translateY(8px);}
  #cardGrid .chart .bar-label{font-size:12px;line-height:1.35;}
  #cardGrid .chart .bar-opp{font-size:11.5px;}
  .chart-key{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font-size:12px;color:var(--paper-dim);line-height:1.4;margin:2px 0 0;}
  .chart-key span{display:inline-flex;align-items:center;gap:5px;color:var(--paper);opacity:.85;}
  .chart-key .k-dot{width:10px;height:10px;border-radius:50%;display:inline-block;}
  .chart-key .k-dot.hit{background:var(--hit);}
  .chart-key .k-dot.miss{background:transparent;border:2px solid var(--miss);box-sizing:border-box;}
  .chart-key .k-line{width:16px;height:0;border-top:1.5px dashed color-mix(in srgb,var(--paper) 55%,transparent);display:inline-block;}
  /* Bigger line slider: thicker track, larger thumb, easy on a phone. */
  #cardGrid .line-range{-webkit-appearance:none;appearance:none;height:30px;background:transparent;margin:4px 0 0;cursor:pointer;}
  #cardGrid .line-range::-webkit-slider-runnable-track{height:8px;border-radius:4px;background:linear-gradient(90deg,var(--brand-primary),color-mix(in srgb,var(--brand-primary) 30%,var(--panel-2)));}
  #cardGrid .line-range::-moz-range-track{height:8px;border-radius:4px;background:color-mix(in srgb,var(--brand-primary) 30%,var(--panel-2));}
  #cardGrid .line-range::-moz-range-progress{height:8px;border-radius:4px;background:var(--brand-primary);}
  #cardGrid .line-range::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-8px;border-radius:50%;background:var(--paper);border:3px solid var(--brand-primary);box-shadow:0 2px 6px rgba(0,0,0,.35);}
  #cardGrid .line-range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--paper);border:3px solid var(--brand-primary);box-shadow:0 2px 6px rgba(0,0,0,.35);}
  #cardGrid .line-range:focus-visible{outline:2px solid var(--edge-accent);outline-offset:2px;border-radius:var(--r-ctl);}
  #cardGrid .line-input{font-size:15px;width:76px;min-height:36px;}

  /* Header "Sign up free" button, shown only while signed out (2026-10-03). Accent outline, same family as the
     settings button; full-width above Settings on the desktop rail. */
  .acct-btn[hidden]{display:none;}
  .acct-btn{text-decoration:none;color:var(--text-accent);border-color:var(--edge-accent);background:var(--tint-accent);font-size:14px;font-weight:650;white-space:nowrap;}
  .acct-btn:hover{color:var(--paper);}
  @media (min-width:1100px){
    .acct-btn{order:3;margin-top:auto;justify-content:flex-start;width:100%;min-height:44px;padding:0 12px;}
    .acct-btn:not([hidden]) ~ .settings-btn{margin-top:4px;}
  }
  @media (max-width:1099px){
    .acct-btn{min-height:40px;padding:0 12px;gap:7px;}
    .acct-btn svg{width:17px;height:17px;}
  }
  .acct-btn .ab-short{display:none;}
  @media (max-width:480px){
    .acct-btn .ab-full,.acct-btn svg{display:none;}
    .acct-btn .ab-short{display:inline;}
    .brand{gap:8px;}
    .brand b{font-size:1.15rem;}
  }

  /* My Team: "Add several players at once" (2026-10-03). */
  .multi-add{margin:0 0 18px;border:1px solid var(--line-soft);border-radius:var(--r-panel);background:var(--panel);padding:12px 16px;}
  .multi-add summary{cursor:pointer;font-weight:650;font-size:14px;color:var(--text-accent);min-height:28px;display:flex;align-items:center;}
  .multi-add label{display:block;font-size:13px;color:var(--paper-dim);margin:10px 0 6px;}
  .multi-add textarea{width:100%;box-sizing:border-box;border-radius:var(--r-field);border:1px solid var(--field-edge);background:var(--panel-2);color:var(--paper);font:inherit;font-size:14.5px;padding:10px 12px;resize:vertical;}
  .multi-add textarea:focus{border-color:var(--edge-accent);outline:none;box-shadow:0 0 0 3px var(--tint-accent);}
  .multi-add .load-more-btn{margin-top:10px;}
  .multi-add-msg{font-size:13px;color:var(--paper);margin:10px 0 0;line-height:1.5;}
  .multi-add-msg:empty{display:none;}

  /* =====================================================================
     PRICE CARDS (Mina, 2026-10-03): best price first, a plain fair-vs-best
     comparison, and arbitrage sides as tiles. Same numbers and rounding.
     ===================================================================== */
  .ev-hero{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:8px;margin:2px 0 4px;}
  .eh-cell{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:var(--r-panel);background:var(--panel-2);border:1px solid var(--line-soft);min-width:0;}
  .eh-cell.eh-best{background:var(--tint-accent);border-color:var(--edge-accent);}
  .eh-lbl{font-size:12px;font-weight:650;color:var(--paper-dim);letter-spacing:.02em;}
  .eh-best .eh-lbl{color:var(--text-accent);}
  .eh-cell b{font-family:var(--font-display);font-size:1.75rem;font-weight:700;line-height:1.05;color:var(--paper);font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
  .eh-sub{font-size:12.5px;color:var(--paper-dim);line-height:1.3;overflow-wrap:anywhere;}
  .eh-best .eh-sub{color:var(--paper);font-weight:600;}
  .eh-vs{align-self:center;font-size:12px;font-weight:650;color:var(--paper-faint);}
  /* Edge meter (EV-CARD-1): fair price is a fixed tick at 40%; a better price grows right, a worse one left. */
  .edge-meter{display:grid;gap:9px;padding:12px 14px;border-radius:var(--r-panel);background:var(--panel-2);margin-top:4px;}
  .em-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;}
  .em-title{font-size:13px;font-weight:600;color:var(--paper);}
  /* The two chances behind the badge's edge (B1-19): plain text, never green (the % is the badge's). Wraps on narrow cards. */
  .em-pair{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin:0;font-size:14px;color:var(--paper-dim);font-variant-numeric:tabular-nums;}
  .em-pair b{margin-left:4px;font-size:1.0625rem;font-weight:700;color:var(--paper);}
  .em-sep{color:var(--paper-faint);}
  .em-track{position:relative;height:12px;border-radius:6px;background:var(--panel-3);}
  .em-fill{position:absolute;top:0;bottom:0;border-radius:6px;background:linear-gradient(90deg,color-mix(in srgb,var(--hit) 30%,transparent),var(--hit));transform-origin:left center;}
  .edge-meter.aged .em-fill{background:linear-gradient(90deg,color-mix(in srgb,var(--warn) 30%,transparent),var(--warn));}
  .em-tick{position:absolute;top:-3px;width:2px;height:18px;margin-left:-1px;background:var(--paper);}
  .em-scale{position:relative;display:flex;justify-content:space-between;font-size:12px;color:var(--paper-dim);}
  .em-scale span:first-child{margin-left:calc(40% - 2.2em);}
  .em-note{font-size:12.5px;color:var(--paper-dim);margin:0;line-height:1.45;}
  .em-note b{color:var(--paper);font-variant-numeric:tabular-nums;}
  .edge-meter.aged .em-note{color:var(--warn);font-weight:600;}
  @media (prefers-reduced-motion:no-preference){
    .em-fill{animation:em-grow .3s var(--ease-out,ease-out) both;}
    @keyframes em-grow{from{transform:scaleX(0);}to{transform:scaleX(1);}}
  }
  /* Trust row + book strip header + More details fold (EV-CARD-2/3). */
  .ev-trust{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0;}
  .tr-chip{display:inline-flex;align-items:center;min-height:26px;padding:3px 10px;border-radius:var(--r-ctl);border:1px solid var(--line-soft);background:var(--panel-2);font-size:12px;font-weight:600;color:var(--paper-dim);}
  .tr-chip.old,.tr-chip.thin{color:var(--warn);}
  .ev-strip-hd{margin:12px 0 0;font-size:12px;color:var(--paper-dim);}
  .ev-strip-hd + .ev-books-strip{margin-top:6px;}
  .ev-books-strip .bk-narrow{display:none;}
  /* Arbitrage stake box + "What can go wrong" fold (market-voice #5). Same tokens as the trust chips and More details fold. */
  .arb-stake{margin:12px 0 0;font-size:13px;color:var(--paper-dim);}
  .as-controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;}
  .as-field{display:inline-flex;align-items:center;gap:6px;font-weight:600;}
  .arb-stake-in{width:96px;min-height:44px;padding:6px 10px;border-radius:var(--r-ctl);border:1px solid var(--line-soft);background:var(--panel-2);color:inherit;font:inherit;font-variant-numeric:tabular-nums;}
  .as-round{display:inline-flex;align-items:center;gap:6px;}
  .arb-round-btn{min-height:44px;min-width:44px;padding:3px 12px;border-radius:var(--r-ctl);border:1px solid var(--line-soft);background:var(--panel-2);color:var(--paper-dim);font-size:12px;font-weight:600;cursor:pointer;}
  .arb-round-btn[aria-pressed="true"]{color:var(--text-accent);border-color:var(--text-accent);}
  .as-grid{display:grid;grid-template-columns:1fr auto;gap:4px 14px;margin:10px 0 0;align-items:baseline;}
  .as-grid.as-two{grid-template-columns:1fr auto auto;}
  .as-grid b{text-align:right;color:var(--paper);font-variant-numeric:tabular-nums;}
  .as-h{font-size:11.5px;text-align:right;}
  .as-grid b.as-profit{color:var(--hit-text);}
  .as-grid b.as-profit.as-loss{color:var(--miss-text);}
  .as-hint{margin:8px 0 0;font-size:12px;}
  .risk-list{margin:0;padding-left:18px;display:grid;gap:6px;color:var(--paper-dim);}
  .em-method{color:var(--paper-dim);}
  .ev-more{margin:6px 0 0;font-size:13px;}
  .ev-more > summary{display:flex;align-items:center;min-height:44px;cursor:pointer;color:var(--text-accent);font-weight:650;list-style:none;}
  .ev-more > summary::-webkit-details-marker{display:none;}
  .ev-more > summary::after{content:"";width:7px;height:7px;margin-left:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s;}
  .ev-more[open] > summary::after{transform:rotate(225deg);}
  .em-body{display:grid;gap:8px;padding-bottom:4px;}
  .em-line{margin:0;font-size:13px;color:var(--paper);font-variant-numeric:tabular-nums;}
  .bk-edge{font-size:12px;font-weight:600;color:var(--hit-text);}
  .bk-edge.neg{color:var(--miss-text);}
  @media (max-width:600px){
    .ev-books-strip .bk-wide{display:none;}
    .ev-books-strip .bk-narrow{display:inline-flex;}
  }
  /* Arbitrage sides as tiles. */
  .arb-legs{display:flex;align-items:stretch;gap:6px;}
  .arb-leg{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:4px;padding:12px;border-radius:var(--r-panel);background:var(--panel-2);border:1px solid var(--line-soft);}
  .al-out{font-size:13px;font-weight:650;color:var(--paper);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .al-price{font-family:var(--font-display);font-size:1.6rem;font-weight:700;line-height:1.05;color:var(--paper);font-variant-numeric:tabular-nums;}
  .al-book{font-size:12.5px;color:var(--paper-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .al-split{height:6px;border-radius:3px;background:var(--panel-3);overflow:hidden;margin-top:4px;}
  .al-split i{display:block;height:100%;border-radius:3px;}
  .arb-leg.s0 .al-split i{background:var(--brand-primary);}
  .arb-leg.s1 .al-split i{background:var(--accent-2);}
  .arb-leg.s2 .al-split i{background:var(--accent-3);}
  /* DS-INC-22 (b): with a purple accent, leg 2 takes the pink and leg 3 the neutral faint ink, so no two legs share a hue. */
  :root[data-accent-near="violet"] .arb-leg.s1 .al-split i{background:var(--accent-3);}
  :root[data-accent-near="violet"] .arb-leg.s2 .al-split i{background:var(--paper-dim);}
  .al-pct{font-size:12px;color:var(--paper-dim);font-variant-numeric:tabular-nums;}
  .al-plus{align-self:center;font-weight:700;color:var(--paper-faint);font-size:15px;}
  .arb-explain{font-size:12.5px;color:var(--paper-dim);margin:2px 0 0;}
  @media (max-width:520px){
    .ev-hero{grid-template-columns:1fr 1fr;}
    .eh-vs{display:none;}
    .arb-legs{flex-direction:column;}
    .al-plus{display:none;}
  }

  /* =====================================================================
     MOVERS + INJURY REPORT, more visual (Mina, 2026-10-03). Green/red stay.
     ===================================================================== */
  .mv-rank{flex:none;width:22px;font-family:var(--font-display);font-size:1.05rem;font-weight:700;color:var(--paper-faint);text-align:center;font-variant-numeric:tabular-nums;}
  .mover-row .wa-delta{display:flex;flex-direction:column;align-items:flex-end;gap:3px;}
  .mv-pill{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:var(--r-ctl);font-size:1.05rem;font-weight:750;line-height:1.1;}
  .mv-pill.up{background:color-mix(in srgb,var(--hit) 16%,transparent);color:var(--hit-text);}
  .mv-pill.down{background:color-mix(in srgb,var(--miss) 16%,transparent);color:var(--miss-text);}
  .mover-row .wa-delta small{font-family:var(--font-body);font-size:12px;font-weight:600;color:var(--paper-dim);letter-spacing:0;}
  .mover-row .dumbbell{height:8px;}
  /* Injury cards (B3-02, Mina 2026-10-11: "too much ... strong colours pop too much"). A neutral card, like every other card:
     no coloured edge, no team-colour light. The status is the word in a neutral chip (heavier for Out, Injured Reserve and
     Suspension, lighter for the rest), never a colour. The length of the absence is the one visual: a four-step bar in the
     chart accent (the same flat fill as "Most players listed" above it), lit one to four steps, with the current step's word
     in full-strength text. The jersey is the 40px list size, a little muted, so it never out-shouts the name. */
  .inj-card{display:flex;flex-direction:column;}
  /* Every card's estimate row and time-out meter sit on the card's bottom edge, so they line up across a row of cards
     whatever the name, subline or injury text above them takes (Mina 2026-10-07). The injury text keeps a one-line slot. */
  .inj-card .injury-info{margin-top:auto;}
  .inj-card .injury-what{min-height:1.5em;}
  .inj-card .team-abbr-badge{--jb:40px;filter:saturate(.7);}
  .inj-card .injury-badge{background:var(--panel-2);color:var(--paper-dim);border:1px solid var(--line-soft);font-weight:600;}
  .inj-card.inj-long .injury-badge{color:var(--paper);font-weight:700;}
  .inj-meter{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:10px 0 0;}
  .inj-meter span{display:flex;flex-direction:column;gap:4px;font-size:11.5px;font-weight:600;color:var(--paper-faint);}
  .inj-meter i{display:block;height:6px;border-radius:3px;background:var(--panel-3);}
  .inj-meter span.on{color:var(--paper-dim);}
  .inj-meter span.on i{background:color-mix(in srgb,var(--brand-primary) 86%,var(--panel));}
  /* The current step (the last lit one) is named in full-strength text, so the length reads without colour. */
  .inj-meter span.on:not(:has(~ .on)){color:var(--paper);font-weight:700;}

  /* B3F-7 (review R8-5, R1-8): tablets (641 to 1099px) get the phone's 44px header controls and place pill; they were 40 and 32px. */
  @media (min-width:641px) and (max-width:1099px){
    .find-btn,.settings-btn,.acct-btn,.age-notice{min-height:44px;}
    .find-btn,.settings-btn{min-width:44px;}
  }
  /* Phones: the new card and header controls meet the 44px tap target (review AB-03, 2026-10-03). */
  @media (max-width:640px){
    #cardGrid .split-btn,#cardGrid .line-input,#cardGrid .share-btn,#cardGrid .watchlist-btn,.acct-btn,.multi-add summary{min-height:44px;}
  }

  /* =====================================================================
     FIND A PLAYER OR TEAM from any tab (2026-10-03). Header button + dialog.
     ===================================================================== */
  /* Redesign (Mina 2026-10-03, "nicer, smoother, less like AI slop"): a quiet search field in the rail and a
     command-palette sheet near the top of the screen. Existing tokens only; the one accent moment is the sport
     mark of the highlighted row. */
  .find-btn{justify-content:flex-start;font-size:14px;font-weight:450;color:var(--paper-faint);}
  .find-btn .fb-label{flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .find-btn .fb-kbd,.find-close .fc-esc,.find-keys kbd{font:600 11.5px/1 var(--font-body);color:var(--paper-dim);border:1px solid var(--rule);
    border-bottom-width:2px;border-radius:6px;padding:3px 6px;background:var(--panel);}
  @media (min-width:1100px){
    .find-btn{width:100%;min-height:42px;gap:8px;padding:0 8px 0 11px;margin:0 0 10px;border-radius:var(--r-field);font-size:13.5px;
      background:transparent;border-color:var(--line-soft);}
    .find-btn:hover{background:var(--panel-2);border-color:var(--line-soft);color:var(--paper-dim);}
  }
  @media (max-width:1099px){
    .find-btn .fb-label,.find-btn .fb-kbd{display:none;}
    .find-btn{min-width:40px;padding:0;justify-content:center;color:var(--paper-dim);}
    .topbar{gap:10px 8px;}
  }

  .find-dialog{width:min(640px,calc(100vw - 32px));max-height:min(560px,calc(100dvh - 20vh));margin:12vh auto auto;padding:0;
    border:1px solid var(--line-soft);border-radius:var(--r-panel);background:var(--panel);color:var(--paper);box-shadow:var(--pop-shadow);overflow:hidden;}
  .find-dialog[open]{display:flex;flex-direction:column;}
  .find-dialog::backdrop{background:var(--scrim);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
  @media (prefers-reduced-motion:no-preference){
    .find-dialog[open]{animation:te-find-in .16s var(--ease-out);}
    .find-dialog[open]::backdrop{animation:te-fade .16s ease;}
  }
  @keyframes te-find-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
  .find-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0;}

  .find-head{display:flex;align-items:center;gap:12px;min-height:60px;padding:0 12px 0 18px;border-bottom:1px solid var(--line-soft);flex:none;}
  .find-glass{width:20px;height:20px;flex:none;color:var(--paper-faint);}
  .find-glass *{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;}
  #findInput{flex:1;min-width:0;min-height:56px;padding:0;border:0;background:transparent;color:var(--paper);font:inherit;font-size:17px;font-weight:450;
    -webkit-appearance:none;appearance:none;outline:none;}
  #findInput::placeholder{color:var(--paper-faint);}
  #findInput::-webkit-search-cancel-button{display:none;}
  .find-head:focus-within .find-glass{color:var(--text-accent);}
  .find-close{flex:none;display:inline-flex;align-items:center;justify-content:center;min-height:36px;min-width:36px;padding:0 4px;border:0;
    border-radius:8px;background:transparent;color:var(--paper-dim);font:600 14px var(--font-body);cursor:pointer;}
  .find-close:hover .fc-esc{color:var(--paper);border-color:var(--paper-faint);}
  .find-close:focus-visible{outline:2px solid var(--text-accent);outline-offset:2px;}
  .find-close .fc-cancel{display:none;}

  .find-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:6px;}
  .find-recent{padding:8px 10px 6px;}
  .find-recent-label{margin:0 0 8px;font-size:12.5px;font-weight:550;color:var(--paper-faint);}
  .find-chips{display:flex;flex-wrap:wrap;gap:6px;}
  .find-chip{min-height:32px;padding:0 12px;border-radius:var(--r-ctl);border:1px solid var(--line-soft);background:transparent;color:var(--paper-dim);
    font:500 13.5px var(--font-body);cursor:pointer;transition:background .14s var(--ease-out),color .14s var(--ease-out);}
  .find-chip:hover{background:var(--panel-2);color:var(--paper);}
  .find-chip:focus-visible{outline:2px solid var(--text-accent);outline-offset:1px;}
  .find-results{display:flex;flex-direction:column;gap:2px;}
  .find-row{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"mark name tags" "mark meta tags";align-items:center;gap:1px 14px;
    text-align:left;width:100%;min-height:56px;padding:8px 12px 8px 8px;border-radius:12px;border:0;background:transparent;color:var(--paper);
    cursor:pointer;transition:background .12s var(--ease-out);}
  .find-row[aria-selected="true"]{background:var(--panel-2);}
  .find-row:focus-visible{outline:2px solid var(--text-accent);outline-offset:-2px;}
  .fr-mark{grid-area:mark;display:grid;place-items:center;width:48px;height:38px;border-radius:10px;background:var(--panel-2);
    font-size:11px;font-weight:650;letter-spacing:0;color:var(--paper-dim);transition:background .12s var(--ease-out),color .12s var(--ease-out);}
  .find-row[aria-selected="true"] .fr-mark{background:var(--tint-accent);color:var(--text-accent);}
  .fr-name{grid-area:name;align-self:end;font-weight:600;font-size:15px;letter-spacing:-.005em;line-height:1.25;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .fr-meta{grid-area:meta;align-self:start;font-size:12.5px;color:var(--paper-dim);line-height:1.35;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .fr-sport{display:none;}
  .fr-tags{grid-area:tags;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;}
  .fr-tags i{font-style:normal;font-size:12px;font-weight:550;padding:3px 8px;border-radius:6px;color:var(--paper-dim);border:1px solid var(--line-soft);white-space:nowrap;}
  .fr-tags i.pro{color:var(--text-accent);border-color:var(--edge-accent);}
  .fr-tags i.inj{color:var(--miss-text);}
  .find-empty{padding:28px 18px 24px;text-align:center;color:var(--paper-dim);font-size:13.5px;line-height:1.5;}
  .find-empty p{margin:0 auto;max-width:42ch;}
  .find-empty .fe-title{margin-bottom:4px;font-size:15px;font-weight:600;color:var(--paper);}
  .find-skel{display:block;height:56px;border-radius:12px;background:var(--panel-2);opacity:.55;margin-bottom:2px;}
  @media (prefers-reduced-motion:no-preference){ .find-skel{animation:te-find-pulse 1.2s ease-in-out infinite alternate;} }
  @keyframes te-find-pulse{from{opacity:.35;}to{opacity:.7;}}

  .find-foot{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 16px;border-top:1px solid var(--line-soft);}
  .find-note{font-size:12.5px;color:var(--paper-dim);margin:0;}
  .find-note.find-note-quiet{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  .find-foot:has(.find-note-quiet){justify-content:flex-end;}
  .find-keys{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--paper-faint);white-space:nowrap;}
  .find-keys kbd{padding:2px 5px;font-size:11px;}
  .find-keys kbd + kbd{margin-left:-1px;}
  .find-keys kbd:nth-of-type(3){margin-left:8px;}
  @media (hover:none),(max-width:640px){ .find-keys{display:none;} }

  /* Phones: a full-height sheet, the field first, a plain "Cancel" (44px) instead of the Esc key. */
  @media (max-width:640px){
    .find-dialog{width:100%;max-width:100%;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0;}
    .find-head{padding:env(safe-area-inset-top) 6px 0 16px;}
    .find-close .fc-esc{display:none;}
    .find-close .fc-cancel{display:inline;color:var(--text-accent);}
    .find-close{min-height:44px;min-width:44px;padding:0 10px;}
    .fr-tags i:not(.inj):not(.pro):nth-child(n+2){display:none;}
    .find-chip{min-height:44px;padding:0 14px;}
    .find-foot{padding:10px 16px calc(10px + env(safe-area-inset-bottom));}
  }
  /* Phones: logo, Find, Sign up and Settings stay on one row (2026-10-03). */
  @media (max-width:480px){
    .topbar .brand b{font-size:1rem;letter-spacing:.05em;}
    .topbar .brand .brand-mark{width:28px;height:28px;}
  }
  @media (max-width:370px){
    .topbar .brand h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  }

  /* "Since your last visit" (2026-10-03): accent chips, no new colours. */
  .hello-new{margin:0 0 10px;font-size:14px;color:var(--paper);}
  .hello-new b{color:var(--text-accent);}
  .prop-tile.has-new{border-color:var(--edge-accent);}
  .pt-new{display:inline-block;justify-self:start;font-size:11.5px;font-weight:650;padding:2px 8px;border-radius:var(--r-ctl);background:var(--tint-accent);color:var(--text-accent);margin-bottom:2px;}
  .card-new{display:inline-flex;align-self:flex-start;font-size:12px;font-weight:650;padding:3px 9px;border-radius:var(--r-ctl);background:var(--tint-accent);color:var(--text-accent);}
  .prop-tile.has-new{grid-template-areas:"new new" "name rate" "stat rate" "dots dots";}
  .prop-tile .pt-new{grid-area:new;}
  .acct-btn.acct-pending{visibility:hidden;}
  /* Phones: 44px tap targets in the header and the Find dialog (review Q-03). */
  @media (max-width:640px){
    .find-btn,.settings-btn,.find-close{min-height:44px;min-width:44px;}
  }

  /* =====================================================================
     DROPDOWN LISTS (Mina 2026-10-03): our own list instead of the browser's grey box. Same family as the Find
     palette: panel, hairline border, 12px radius, soft highlight, a check on the chosen value. Existing tokens only.
     ===================================================================== */
  .te-pop{position:fixed;z-index:1300;max-width:min(420px,calc(100vw - 16px));overflow-y:auto;overscroll-behavior:contain;padding:5px;
    background:var(--panel);color:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r-field);box-shadow:var(--pop-shadow);outline:none;}
  @media (prefers-reduced-motion:no-preference){
    .te-pop:not([hidden]){animation:te-pop-in .14s var(--ease-out);}
    .te-pop.up:not([hidden]){animation-name:te-pop-in-up;}
  }
  @keyframes te-pop-in{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
  @keyframes te-pop-in-up{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}
  .te-opt{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:38px;padding:0 10px 0 12px;border-radius:8px;
    font-size:14px;font-weight:500;color:var(--paper-dim);cursor:pointer;white-space:nowrap;transition:background .1s var(--ease-out),color .1s var(--ease-out);}
  .te-opt.is-active{background:var(--panel-2);color:var(--paper);}
  .te-opt.is-sel{color:var(--paper);font-weight:600;}
  .te-opt svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--text-accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
  .te-opt[aria-disabled="true"]{color:var(--paper-faint);cursor:default;opacity:.6;}
  .te-group{padding:8px 12px 4px;font-size:12px;font-weight:600;color:var(--paper-faint);}
  .te-pop::-webkit-scrollbar{width:8px;} .te-pop::-webkit-scrollbar-thumb{background:var(--rule);border-radius:8px;}
  .sheet-note{margin:6px 0 0;font-size:13px;color:var(--paper-faint);}

  /* =====================================================================
     POLISH 2026-10-06: type wrapping, press feedback, upgrade card
     ===================================================================== */
  /* Headings balance, running text never ends on a single word, long names wrap instead of pushing the layout. */
  h1,h2,h3,.modal-title{text-wrap:balance;}
  p,li,.section-intro,.gl-note,.plan-preview-note,.track-help{text-wrap:pretty;}
  .who b,.who span,.fc-name,.mv-who,.find-row b{overflow-wrap:anywhere;}
  .section-intro,.plan-preview-note{max-width:68ch;}
  .ev-card.plan-preview{grid-column:1/-1;max-width:640px;}
  .ev-card.plan-preview[data-upgrade]{cursor:pointer;}
  .ev-card.plan-preview[data-upgrade]:focus-visible{outline:2px solid var(--text-accent);outline-offset:2px;}
  .plan-lock[data-upgrade]{cursor:pointer;}
  @media (prefers-reduced-motion: no-preference){
    :where(.modal-close-btn,.acct-btn,.find-btn,.sheet-link-btn,.tf-pill button,.ev-card.plan-preview[data-upgrade],.plan-lock[data-upgrade]):active{transform:scale(.98);}
    :where(.modal-close-btn,.acct-btn,.find-btn,.ev-card.plan-preview[data-upgrade]){transition-property:transform,background,color,border-color;transition-duration:.14s,.18s,.18s,.18s;transition-timing-function:var(--ease-out);}
  }

  /* Upgrade card (Free members, on tapping something locked): the age-gate modal recipe, nothing new. */
  .upgrade-box .modal-title{font-size:1.65rem;line-height:1.15;letter-spacing:-.02em;margin-bottom:10px;}
  .upgrade-box .upgrade-lead{margin:0 0 14px;color:var(--paper);}
  .upgrade-box .modal-list{margin-bottom:18px;}
  .upgrade-price{margin:0 0 18px;padding:14px 16px;border:1px solid var(--line-soft);border-radius:var(--r-panel);background:var(--panel-2);}
  .upgrade-price p{margin:0 0 8px;font-size:13.5px;line-height:1.55;color:var(--paper-dim);}
  .upgrade-price p:last-child{margin:0;}
  .upgrade-price b{color:var(--paper);font-weight:650;font-variant-numeric:tabular-nums;}
  .upgrade-box a.modal-close-btn{display:flex;align-items:center;justify-content:center;text-decoration:none;}
  @media (max-width:640px){
    .upgrade-box{max-height:calc(100dvh - 32px);overflow-y:auto;}
  }
  /* Every dialog fits the screen and scrolls inside itself, also on a phone turned sideways (phone test P4-7: the Track sheet and
     the upgrade card were taller than a landscape screen, with Cancel / Not now out of reach). */
  .modal-overlay .modal-box{max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);overflow-y:auto;overscroll-behavior:contain;}


  /* =====================================================================
     W1 POLISH 2026-10-06 (ops/reviews/2026-10-06-walkthrough/W1-aesthetic.md)
     ===================================================================== */
  /* W1-03: 44px tap targets on touch screens. Only coarse pointers, so desktop density is unchanged. */
  @media (pointer:coarse){
    .cal-result-select.cal-outcome{min-height:44px;}   /* calendar day panel result select (review R8-07) */
    .cal-legs .seg button{min-height:44px;}   /* per-outcome Won / Lost / Void */
    .sporttab,.topbar .sporttab,.league-chip,.share-btn,.watchlist-btn,.plan-lock-cta,.ev-books-btn,.pw-toggle,.load-more-btn{min-height:44px;}
    #cardGrid .line-range,.line-range{min-height:44px;height:44px;}
    .brand{min-height:44px;}
    .app-footer a{display:inline-block;padding:12px 4px;}
    .mock-toggle-label{display:flex;align-items:center;gap:10px;min-height:44px;}
    #calShowSimulated{width:22px;height:22px;flex:none;}
    .consent-box .news-opt{min-height:44px;align-items:center;}   /* finish-account and save-items boxes: tick rows 44px (design review R8-07) */
  }
  /* W1-05: figures line up in charts. */
  svg text,.m-line b{font-variant-numeric:tabular-nums;}
  /* W1-07: Movers rows on phones: name column first, the numbers drop under it instead of squeezing it. */
  @media (max-width:480px){
    .mover-row .wa-row{flex-wrap:wrap;}
    .mover-row .mv-id{flex:1 1 100%;}
    .mover-row .wa-delta{flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 10px;padding-left:34px;}
  }
  /* W1-08: injury "most players listed" team names wrap instead of clipping. */
  #injuryGlance .gl-bl b{white-space:normal;overflow-wrap:anywhere;}
  /* W1-11: Settings selects get the same chevron as the filter selects. */
  .field-row select{
    appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:34px;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 14px center;
  }
  /* W1-12: age gate buttons match in height; focus shows one ring (outline), not outline plus highlight. */
  .age-gate-actions .modal-close-btn,.age-gate-actions .load-more-btn{min-height:48px;}
  .modal-close-btn:focus-visible{box-shadow:none;outline-offset:3px;}
  /* W1-16: the Fantasy search field is one box, not a bordered panel around a bordered field. */
  .filterbar.search-bar{border:0;background:transparent;box-shadow:none;padding-left:0;padding-right:0;}
  /* W1-02: Day mover pills use a lighter tint so the number text stays 4.5:1+. */
  :root[data-theme="light"] .mv-pill.up{background:color-mix(in srgb,var(--hit) 10%,transparent);}
  :root[data-theme="light"] .mv-pill.down{background:color-mix(in srgb,var(--miss) 10%,transparent);}
  /* QA 2026-10-06: the dot-plot tooltip's Open card button meets the 44px touch rule. */

  /* Touch targets (QA round 2, 2026-10-06): 44px minimum on touch screens; the visual size stays where it was. */
  /* Batch-1 review R1-04: the last controls under 44px on a touch screen (price-card actions, Movers chips, calculator and
     bankroll links, details summaries, the price tools' number boxes). The look stays; the tap area grows. */
  @media (pointer:coarse),(max-width:640px){
    .ev-card-actions .watchlist-btn,.ev-card-actions .hide-btn,#moversSportTabs .sporttab{min-height:44px;}
    .arb-use,.em-note .em-bankroll-link{display:inline-flex;align-items:center;min-height:44px;}
    .why-num summary{padding:13px 0;}
    .section-intro summary,.trust-strip summary,.phone-fold > summary{min-height:44px;}
    #evView input:not([type=checkbox]):not([type=radio]),#arbView input:not([type=checkbox]):not([type=radio]),#injuriesView input[type=search],#evView select,#arbView select{min-height:44px;}
    .ac-seg span{min-height:44px;}
  }
  @media (pointer:coarse),(max-width:640px){
    .app-footer-note a{display:inline-block;padding:13px 2px;margin:-13px 0;}
    .hello-edit,#searchFilter,.sv-add,.fg-all,.age-notice{min-height:44px;}
    .track-box .seg button{min-height:44px;}   /* B3F-12: the Track sheet's mode and side buttons were 38px */
    #settingsSheet .seg > button{min-height:44px;}   /* same 44px as the Track sheet: card size, theme, odds format (R8 note, chief 2026-10-12) */
    .fg-main{min-height:44px;justify-content:center;}
    .streak-chip{position:relative;}
    .streak-chip::after{content:"";position:absolute;inset:-10px 0;}
  }

  /* MY ENTRIES (2026-10-06): the builder drawer and the calendar's entry rows. Existing tokens and parts only; the leg squares
     are the form grid's own (.fg-q): green hit, striped red miss, grey pending or void. Losses are styled exactly like wins. */
  .en-help{margin:0 0 4px;font-size:13px;line-height:1.5;color:var(--paper-dim);}
  .en-empty{margin:0;font-size:13px;color:var(--paper-faint);}
  .en-legs{list-style:none;margin:0;padding:0;display:grid;gap:8px;}
  .en-leg{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:10px 12px;border:1px solid var(--line-soft);border-radius:12px;background:var(--panel-2);font-size:13.5px;color:var(--paper);}
  .en-leg-main{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 150px;}
  .en-sub{font-size:12px;color:var(--paper-dim);}
  .en-you{font-size:11.5px;font-weight:600;color:var(--paper-dim);}
  .en-x{width:32px;height:32px;border:1px solid var(--rule);border-radius:var(--r-ctl);background:transparent;color:var(--paper-dim);font-size:18px;line-height:1;cursor:pointer;}
  .en-x:hover{color:var(--paper);border-color:var(--edge-accent);}
  .en-edit{flex:1 1 100%;display:flex;flex-wrap:wrap;gap:8px 14px;font-size:12px;color:var(--paper-dim);}
  .en-edit label{display:flex;align-items:center;gap:6px;}
  .en-edit input{min-width:0;width:9.5em;min-height:34px;padding:0 10px;border:1px solid var(--rule);border-radius:var(--r-ctl);background:var(--panel);color:var(--paper);font:inherit;font-size:13px;}
  .en-edit input[aria-invalid="true"]{border-color:var(--miss);}
  .en-set{display:inline-flex;gap:6px;}
  .en-set button,.en-undo,.en-del{min-height:32px;padding:0 11px;border:1px solid var(--rule);border-radius:var(--r-ctl);background:transparent;color:var(--paper-dim);font:inherit;font-size:12.5px;font-weight:650;cursor:pointer;}
  .en-set button:hover,.en-undo:hover,.en-del:hover{color:var(--paper);border-color:var(--edge-accent);}
  .en-foot{display:flex;flex-direction:column;gap:3px;margin:0 0 10px;font-size:13px;color:var(--paper-dim);}
  .en-price b{font-size:1.15rem;color:var(--paper);}
  .en-price-note{font-size:12px;color:var(--paper-faint);}
  .en-payout{margin:0 0 8px;font-size:13.5px;color:var(--paper-dim);} .en-payout b{color:var(--paper);}
  .en-where{font-size:12.5px;color:var(--paper-dim);}
  .en-entry{padding:14px 16px;border:1px solid var(--line-soft);border-radius:14px;background:var(--panel);margin-bottom:10px;}
  .en-entry .en-legs{margin:10px 0;}
  .en-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
  .en-title{font-weight:650;font-size:14px;color:var(--paper);margin-right:auto;}
  .en-actions{margin-top:10px;}
  .en-sq{display:inline-flex;gap:2px;align-items:center;}
  .en-q{display:block;width:12px;height:12px;border-radius:3px;background:var(--rule);}
  .en-q.won{background:var(--hit);}
  .en-q.lost{background:var(--miss) repeating-linear-gradient(135deg,rgba(0,0,0,.2) 0 1.5px,transparent 1.5px 4px);}
  .en-q.void,.en-q.pend{background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--rule);}
  .en-q.void{opacity:.6;}
  .en-cell{display:flex;flex-direction:column;gap:2px;margin-top:4px;}
  .en-cell .en-q{width:7px;height:7px;border-radius:2px;}
  .en-cell .en-sq{gap:1px;}
  .en-chip{position:fixed;right:16px;bottom:16px;z-index:150;min-height:44px;padding:0 18px;border:1px solid var(--edge-accent);border-radius:var(--r-ctl);background:var(--panel);color:var(--text-accent);font:inherit;font-size:13.5px;font-weight:650;cursor:pointer;box-shadow:var(--pop-shadow);}
  .en-chip:hover{background:var(--tint-accent);}
  /* PR51 QA 2026-10-07: My entries (calendar list and builder) and the in-text How we calculate links meet 44px on touch. */
  @media (pointer:coarse),(max-width:640px){
    .en-set button,.en-undo,.en-del,.en-x{min-height:44px;min-width:44px;}
    .en-edit input{min-height:44px;}
    .entry-sheet .icon-btn{width:44px;height:44px;min-width:44px;min-height:44px;}
    .entry-sheet .field-row input,.entry-sheet .field-row select{min-height:44px;}
    .calc-line a{display:inline-block;padding:13px 6px;}
    .link-btn{display:inline-block;min-height:44px;padding:0 4px;}
  }
  .entry-sheet{width:min(440px,100%);}
  @media (max-width:760px){
    .en-chip{bottom:calc(var(--tabbar-h) + 14px + env(safe-area-inset-bottom));}
    .entry-sheet{width:100%;}
  }

  /* Simulation QA 2026-10-07: Fantasy controls reach 44px on touch screens and phones. */
  .save-hint.err{color:var(--miss-text);}
  .roster-row .link-btn.rm{color:var(--miss-text);font-size:12.5px;font-weight:600;}
  @media (pointer:coarse),(max-width:640px){
    .scoring-row input[type=number],.scoring-row select,.fantasy-pane .filter-group select,.fantasy-pane .filter-group input[type=search],.fantasy-pane input[type=search],.fantasy-pane textarea{min-height:44px;}
    .roster-row .link-btn.rm{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 8px;}
    .fantasy-pane .compare-btn,#cardGrid .compare-btn{min-height:44px;}
  }

  /* Settings "Your team" picker (2026-10-07): sport tabs, search inside the sport, 44px tap rows; the choice auto-saves with an Undo toast. */
  .tp-cur{font-weight:650;color:var(--paper);margin-left:6px;}
  .tp-clear{border:0;background:none;color:var(--text-accent);font:inherit;font-weight:600;cursor:pointer;text-decoration:underline;padding:0 0 0 6px;}
  .tp-sports button{min-height:40px;padding:0 4px;font-size:13px;}
  .tp-list{display:grid;gap:4px;max-height:min(260px,38vh);overflow-y:auto;overscroll-behavior:contain;padding:3px;border:1px solid var(--line-soft);border-radius:12px;background:var(--panel-2);}
  .tp-row{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 10px;border:0;border-radius:9px;background:none;color:var(--paper);font:inherit;font-size:14px;font-weight:550;text-align:left;cursor:pointer;}
  .tp-row img{width:24px;height:24px;object-fit:contain;flex:none;}
  .tp-row:hover{background:var(--panel-3);}
  .tp-row[aria-pressed="true"]{background:var(--panel);box-shadow:inset 0 0 0 1px var(--edge-accent);}
  .tp-empty{margin:0;padding:12px;font-size:13px;color:var(--paper-dim);}
  .tp-row small{margin-left:auto;font-size:var(--fs-min);font-weight:550;color:var(--paper-dim);}
  /* Search results (Mina 2026-10-07): the jersey avatar replaces the sport text chip; subline is position · full team · league. */
  .fr-mark.fr-mark-av{background:none;--jb:38px;width:38px;height:38px;}
  .find-row .fr-meta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

  /* =====================================================================
     TREND CARD DECLUTTER + HIDE + MAKE IT YOURS (Mina, 2026-10-10: B1-10, B1-12, B1-13, B1-22)
     Tier 1 on every card: who and the hit rate, the line, the chart (with a short key), one quiet sample chip. Everything else
     sits in one "Details" fold (the same .ev-more fold the price cards use). Existing colours and parts only.
     ===================================================================== */
  /* B1-12: the line reads as clearly as its number: the stat in 1.1rem/650 full-contrast, "Over 0.5" as the condition. */
  #cardGrid .prop-line{min-height:76px;}
  #cardGrid .prop-label{font-size:1.1rem;font-weight:650;color:var(--paper);letter-spacing:-.01em;}
  .prop-cond{display:inline-flex;align-items:baseline;gap:7px;white-space:nowrap;}
  #cardGrid .pl-side{font-size:1.05rem;font-weight:650;color:var(--paper);}
  #cardGrid .prop-line b{font-size:1.65rem;}
  #cardGrid .prop-note.line-yours{font-size:13px;font-weight:600;line-height:1.3;}

  /* B1-10: the one quiet row under the chart, then the Details fold, the caption and the footer. */
  #cardGrid > .card > .rate-row .rate-chips{min-height:28px;flex-wrap:nowrap;overflow:hidden;}
  #cardGrid > .card > .rate-row .sample-flag{max-width:100%;overflow:hidden;text-overflow:ellipsis;}
  .card-more{margin:auto 0 0;border-top:1px solid var(--line-soft);}
  .card-more > summary{gap:0;}
  .card-more .cm-hint{margin:0 auto 0 10px;font-size:12.5px;font-weight:500;color:var(--paper-dim);}
  .card-more .em-body{padding:2px 0 6px;gap:12px;}
  #cardGrid > .card .card-more .trend-pill{min-height:0;}
  #cardGrid > .card .card-more .card-controls{margin-top:0;padding-top:0;border-top:0;}
  .cm-chips{display:flex;flex-wrap:wrap;gap:6px 8px;}
  .cm-howto{margin:0;font-size:12.5px;line-height:1.45;color:var(--paper-dim);}
  .cm-actions{display:flex;flex-wrap:wrap;gap:8px;padding-top:4px;}
  #cardGrid .card-foot{flex-wrap:nowrap;}
  #cardGrid .card-foot > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  #cardGrid .card-foot > button{flex:none;}
  #cardGrid .card-foot > span:first-child{margin-right:0;}
  #cardGrid .card-foot > span + span{margin-right:auto;}

  /* B1-22: Hide beside Track; the per-tab "N hidden · Show" control; a hidden card shown again is dimmed. */
  .hide-btn[data-hidden="1"]{border-color:var(--edge-accent);color:var(--text-accent);}
  .hidden-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 12px;}
  .hidden-bar[hidden]{display:none;}
  .hidden-toggle{min-height:36px;}
  .card:has(.hide-btn[data-hidden="1"]),.ev-card:has(.hide-btn[data-hidden="1"]){opacity:.6;}
  @media (pointer:coarse),(max-width:640px){
    .hide-btn,.hidden-toggle,.cm-actions .share-btn{min-height:44px;}
  }

  /* "Make it yours" (B1-13, then B3-03, Mina 2026-10-11: on every screen, top right). One button in the header row above every
     tool, right-aligned: the 44px accent pill with the sliders glyph. It replaces the copies that sat in the Trend Board's sport row
     and greeting line. Phones: tighter padding; under 370px the glyph drops and the words stay. Below 1100px the top bar's own
     Settings icon is hidden: it was the same sliders glyph right above this button (chief, by-eye pass 2026-10-12), so this is the one
     door there, and it carries the What's new count. Desktop keeps Settings at the foot of the rail. */
  .make-yours{position:relative;display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 20px 0 16px;font-size:15px;white-space:nowrap;}
  .make-yours .nav-count{position:absolute;top:-6px;right:-6px;}
  @media (max-width:1099px){ .topbar .settings-btn{display:none;} }
  .make-yours svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
  .utility-row .make-yours{margin-left:auto;}
  @media (max-width:640px){
    .utility-row .make-yours{padding:0 14px 0 12px;gap:8px;font-size:14px;}
  }
  @media (max-width:369px){
    .utility-row{column-gap:8px;}
    .utility-row .make-yours{padding:0 10px;font-size:13px;}
    .utility-row .make-yours svg{display:none;}
  }

  /* GRW-A1 / GRW-A5 (2026-10-12): the one-line dismissible note. The .sample-note shape (10px corner) on the plain panel surface, the
     .run-note type, and the existing .icon-btn close at the 44px target. It replaces the first-visit pop-up and carries the iPhone
     install note; nothing new in colour, type or radius. */
  .te-strip{display:flex;align-items:center;gap:4px 8px;margin:0 0 14px;padding:0 0 0 14px;border:1px solid var(--line-soft);border-radius:10px;background:var(--panel);}
  .te-strip[hidden]{display:none;}
  .te-strip p{flex:1 1 auto;margin:0;padding:8px 0;font-size:13px;line-height:1.55;color:var(--paper-dim);}
  .te-strip .icon-btn{flex:none;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:0;background:none;}

/* iPhone Safari zooms the page in when a field with text under 16px gets focus, which reads as a glitch (Mina's sign-up report;
   iPhone sweep S4-3, 2026-10-12). On touch screens every field shows 16px text; desktop is unchanged. */
@media (pointer: coarse){
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]), select, textarea{font-size:16px !important;}
  /* Phone tap targets of at least 44 px (iPhone sweep S1-6, S3-3). Small marks keep their look and get a larger invisible press area. */
  .tf-pill button{position:relative;}   /* .card-reset is already absolute, which anchors its ::after */
  .tf-pill button::after{content:"";position:absolute;inset:-10px;}
  .card-reset::after{content:"";position:absolute;inset:-7px 0;}
  .filter-group input[type=range]{min-height:44px;}
  .filterbar.tf-sheet-open .filter-group select,.sv-chip button,.sport-menu button,.odds-format-switch .modebtn,.cal-month-nav button,
  #trackSheet input,#trackSheet select{min-height:44px;}
  .filterbar.tf-sheet-open .filter-group label:has(> input[type=checkbox]){min-height:44px;display:inline-flex;align-items:center;gap:10px;}
  #compareClose{width:44px;height:44px;}
  #settingsClose{width:44px;height:44px;}
  #settingsSheet input:not([type=checkbox]):not([type=radio]):not([type=range]),#settingsSheet select,.swatch{min-height:44px;}   /* R8 F4 */
  /* The page behind an open sheet doesn't scroll (index.html lockUnderSheets; sweep S2-7). On body, not html: body's overflow
     reaches the page scroller all the same, and restyling <html> redid the whole page's style (120-180 ms per open and close
     on a throttled phone, speed test P5b-2; 4-5 ms on body). */
  html.te-sheet-lock body{overflow:hidden;}
  .modal-overlay,.sheet-overlay,.filterbar.tf-sheet-open{overscroll-behavior:contain;}
}