/* My Picks (proposed site v3): the My picks panel and the record page (?view=bets).
   Loaded after arcade.css. Older betslip/tracker rules in players.css and
   mockup-fidelity.css still exist, so the selectors here are scoped to
   #betslipDrawer / #trackerPanel to win without touching those files.
   Colour means performance (--good / --bad / --thin); blue is for actions only. */

/* ------------------------------------------------------------------------------------
   Panel shell. Wide screens (75em+): docked under the header on the right, the page
   narrows beside it and nothing is covered. Narrower: the same panel over the page;
   phones: a bottom sheet. It slides in over --dur-slow with --ease-drawer while the page
   narrows beside it at the same pace; closing is faster (--slip-close, 200ms): studio-betslip.js
   plays the slide out (a fade with reduced motion) and only then closes the dialog, and the
   page widens back over the same 200ms (UI-166).
   ------------------------------------------------------------------------------------ */
html body.players-page { --slip-close:200ms; }
html body.players-page #betslipDrawer[data-overlay] {
  --slip-w: 22.5rem;
  position:fixed !important; inset:var(--mp-top, 4.375rem) 0 0 auto !important; z-index:40; margin:0 !important;
  width:min(var(--slip-w), 100vw) !important; height:auto !important; max-height:none !important;
  padding:0 !important; overflow-y:auto !important; overflow-x:hidden; overscroll-behavior:contain;
  border:0 !important; border-left:1px solid var(--line) !important; border-radius:0 !important;
  box-shadow:none !important; background:var(--surface); color:var(--ink);
  scrollbar-gutter:auto;
}
html body.players-page #betslipDrawer[data-overlay][open] { display:flex; flex-direction:column; animation:slip-in var(--dur-slow) var(--ease-drawer); }
html body.players-page #betslipDrawer[data-overlay][data-docked=true] { box-shadow:none !important; }
html body.players-page #betslipDrawer[data-overlay]::backdrop { background:#0c0a1040; backdrop-filter:none; }
html body.players-page #betslipDrawer > * { flex:0 0 auto; }
@keyframes slip-in { from { translate:calc(100% * var(--move)) 0; } }
@keyframes slip-fade { from { opacity:0; } }
/* While it closes (studio-betslip.js animates it out) the panel takes no clicks or focus; a
   sheet stops being modal as its close starts, so the page is usable at once. */
html body.players-page #betslipDrawer[data-overlay][data-closing] { pointer-events:none; z-index:61; }
/* The sheet's backdrop fades in as it opens; as it closes, a stand-in (.slip-scrim, added by
   studio-betslip.js) fades out under it, above the header like the real one, taking no clicks. */
html body.players-page #betslipDrawer[data-overlay]::backdrop { animation:slip-scrim-in var(--dur-slow) var(--ease-out); }
@keyframes slip-scrim-in { from { opacity:0; } }
.slip-scrim { position:fixed; inset:0; z-index:60; pointer-events:none; }
/* Docked: the page gives the panel its width instead of sitting under it, narrowing in step
   with the panel's slide (the wide-screen padding in layouts.css changes in the same
   transition). Only while the panel docks or undocks (body.slip-moving, studio-betslip.js),
   so resizing the window never animates the page. */
@media (min-width:75em) {
  html body.players-page.slip-docked :is(.notebook-main, .notebook-footer) { margin-right:22.5rem !important; }
  html body.players-page.slip-moving :is(.notebook-main, .notebook-footer) { transition:margin-right var(--slip-close) var(--ease-drawer), padding-right var(--slip-close) var(--ease-drawer); }
  html body.players-page.slip-moving.slip-docked :is(.notebook-main, .notebook-footer) { transition-duration:var(--dur-slow); }
}
/* Below the dock width a widening still under way stops (the page is full width there). */
@media not all and (min-width:75em) {
  html body.players-page :is(.notebook-main, .notebook-footer) { transition-property:none; }
}

html body.players-page #betslipDrawer[data-overlay] .betslip-heading {
  position:sticky !important; top:0 !important; z-index:4; display:flex; align-items:center; gap:0.625rem;
  margin:0 !important; padding:1.25rem 1.25rem 0.75rem !important; background:var(--surface); }
html body.players-page #betslipDrawer #betslipTitle { display:flex; align-items:center; gap:0.625rem; flex:1 1 auto; margin:0;
  font:800 1.625rem/1.1 var(--font-display); letter-spacing:-0.02em; }
html body.players-page #betslipDrawer #betslipTitle:focus-visible { outline:3px solid var(--accent); outline-offset:3px; border-radius:var(--r-card); }
/* The header button already carries the count; the panel title keeps it for screen readers. */
html body.players-page #betslipDrawer #betslipCount { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
html body.players-page #betslipDrawer[data-overlay] #betslipClose {
  order:0; width:2.25rem; min-width:2.25rem; height:2.25rem; display:grid; place-items:center; padding:0; margin:0;
  border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface-raised); color:var(--ink); box-shadow:none; }
html body.players-page #betslipDrawer #betslipClose:hover { background:var(--surface-strong); }
.app-topbar .betslip-toggle[aria-pressed=true] { box-shadow:0 0 0 3px var(--bg), 0 0 0 5px var(--accent); }
/* A pick lands: the count bumps 35% on the bouncy spring (UI-165), after the flying copy of the
   price reaches it (studio-betslip.js). Scaled by --move, so with reduced motion it only changes. */
.app-topbar .betslip-toggle #betslipToggleCount.is-bumped { animation:ar-bump var(--dur-slow) var(--spring-bouncy); }
@keyframes ar-bump { 0% { scale:1; } 40% { scale:calc(1 + 0.35 * var(--move)); } 100% { scale:1; } }

/* Upcoming · Live · Final: one segmented track; the selected pill glides to the chosen tab. */
#betslipDrawer .slip-tabs { position:relative; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); margin:0 1.25rem 0.625rem; padding:3px;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r-control); }
#betslipDrawer .slip-tab-thumb { position:absolute; top:3px; bottom:3px; left:3px; width:calc((100% - 6px) / 3); border-radius:var(--r-data); background:var(--selected-bg); box-shadow:inset 0 0 0 1px var(--accent);
  translate:calc(100% * var(--tab-index, 0)) 0; transition:translate var(--dur-base) var(--ease-out); }
#betslipDrawer .slip-tab { position:relative; z-index:1; height:2.25rem; display:flex; align-items:center; justify-content:center; gap:0.375rem; padding:0 0.375rem;
  border:0; border-radius:var(--r-control); background:none; color:var(--muted); font:700 0.8125rem var(--font-body); white-space:nowrap; cursor:pointer;
  transition:color var(--dur-base) var(--ease-out); }
#betslipDrawer .slip-tab:hover { color:var(--ink); }
#betslipDrawer .slip-tab[aria-selected=true] { color:var(--ink); font-weight:800; }
#betslipDrawer .slip-tab-count { font:700 0.6875rem var(--font-mono); opacity:0.8; }
#betslipDrawer .slip-tab:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
#betslipDrawer .slip-date-line { margin:0 1.25rem 0.625rem; color:var(--muted); font-size:0.75rem; }
#betslipDrawer .slip-date-line:empty { display:none; }
#betslipDrawer .slip-panel { display:grid; align-content:start; }

/* This game / All games (only when a game page is open). */
html body.players-page #betslipDrawer[data-overlay] .betslip-scope { margin:0 1.25rem 0.75rem; }
html body.players-page #betslipDrawer[data-overlay] .betslip-scope button { border:2px solid var(--line); border-radius:var(--r-control); background:var(--surface-raised); font-weight:700; }
html body.players-page #betslipDrawer[data-overlay] .betslip-scope button[aria-pressed=true] { border-color:var(--edge); background:var(--accent); color:var(--accent-ink); }
html body.players-page #betslipDrawer[data-overlay] #betslipScopeCount { font-size:0.75rem; }

/* ------------------------------------------------------------------------------------
   Picks, grouped by game. Each pick is one line; tap it for the rest.
   ------------------------------------------------------------------------------------ */
html body.players-page #betslipDrawer #betslipItems { display:grid; align-content:start; gap:0.75rem; margin:0; padding:0 1.25rem 0.75rem; max-height:none; overflow:visible; list-style:none; }
html body.players-page #betslipDrawer .betslip-phase { display:grid; gap:0.75rem; }
html body.players-page #betslipDrawer .betslip-phase[hidden] { display:none; }
html body.players-page #betslipDrawer .betslip-phase+.betslip-phase { margin:0; padding:0; border:0; }
html body.players-page #betslipDrawer .betslip-phase-note { margin:0 0 -0.25rem; color:var(--muted); font-size:0.75rem; line-height:1.4; }
/* Needs review: finished games we couldn't grade, in no tab. One folded line above the tab's
   picks (the thin tone: too little data, not a loss); open it to settle each pick yourself. */
html body.players-page #betslipDrawer .betslip-review { gap:0.625rem; padding:0 0 0.75rem; border-bottom:1px solid var(--line); }
html body.players-page #betslipDrawer .betslip-review-title { margin:0; font:inherit; }
html body.players-page #betslipDrawer .slip-review-toggle { width:100%; min-height:2.75rem; display:flex; align-items:center; gap:0.5rem; margin:0; padding:0.375rem 0.625rem 0.375rem 0.75rem;
  border:2px solid var(--thin); border-radius:var(--r-control); background:var(--thin-bg); color:var(--ink); font:800 0.8125rem/1.3 var(--font-body); text-align:left; cursor:pointer; }
html body.players-page #betslipDrawer .slip-review-toggle::before { content:""; flex:0 0 auto; width:0.5rem; height:0.5rem; border-radius:var(--r-control); background:var(--thin); }
html body.players-page #betslipDrawer .slip-review-name { flex:0 1 auto; min-width:0; }
html body.players-page #betslipDrawer .slip-review-toggle small { flex:1 1 auto; min-width:0; color:var(--muted); font:700 0.6875rem var(--font-mono); }
html body.players-page #betslipDrawer .slip-review-toggle svg { flex:0 0 auto; color:var(--muted); transition:rotate var(--dur-base) var(--ease-out); }
html body.players-page #betslipDrawer .slip-review-toggle[aria-expanded=true] svg { rotate:180deg; }
html body.players-page #betslipDrawer .slip-review-toggle:hover svg { color:var(--ink); }
html body.players-page #betslipDrawer .slip-review-toggle:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
html body.players-page #betslipDrawer .slip-review-body { display:grid; gap:0.75rem; }
html body.players-page #betslipDrawer .slip-review-body[hidden] { display:none; }
html body.players-page #betslipDrawer .betslip-game-group { display:grid; gap:0.5rem; }
html body.players-page #betslipDrawer .betslip-game-heading { display:flex; align-items:center; justify-content:space-between; gap:0.75rem; margin:0; padding:0.125rem 0 0; }
html body.players-page #betslipDrawer .betslip-game-time { color:var(--muted); font:700 0.75rem/1.3 var(--font-body); }
html body.players-page #betslipDrawer .betslip-game-matchup { flex:0 0 auto; display:inline-flex; align-items:center; gap:0.25rem; color:var(--muted); font:700 0.6875rem var(--font-mono); white-space:nowrap; }
html body.players-page #betslipDrawer .betslip-game-matchup .team-logo-badge { width:1.25rem; height:1.25rem; }
html body.players-page #betslipDrawer .betslip-game-matchup .slip-at { margin:0 0.125rem; opacity:0.7; }
html body.players-page #betslipDrawer .betslip-game-picks { display:grid; gap:0.5rem; margin:0; padding:0; list-style:none; }

/* One pick: a tone bar, who and what, the saved price, a status line. */
html body.players-page #betslipDrawer .betslip-item {
  --tone:var(--line); position:relative; display:grid; gap:0.1875rem; margin:0; padding:0.625rem 0.625rem 0.625rem 0.9375rem; font-size:0.8125rem;
  background:var(--surface-raised); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:none; overflow:hidden; }
html body.players-page #betslipDrawer .betslip-item::before { content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--tone); }
html body.players-page #betslipDrawer .betslip-item.tone-good { --tone:var(--good); }
html body.players-page #betslipDrawer .betslip-item.tone-bad { --tone:var(--bad); }
html body.players-page #betslipDrawer .betslip-item.tone-thin { --tone:var(--thin); }
html body.players-page #betslipDrawer .betslip-item.tone-good.is-open { box-shadow:inset 0 0 0 1px var(--good); }
html body.players-page #betslipDrawer .betslip-item:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
html body.players-page #betslipDrawer .betslip-pick-head { display:flex; align-items:center; gap:0.5rem; min-width:0; }
/* Full names always (many players share a surname): the line wraps under the name when it has to. */
html body.players-page #betslipDrawer .betslip-pick-name { flex:1 1 auto; min-width:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:0 0.3125rem; }
html body.players-page #betslipDrawer .betslip-name { flex:0 1 auto; max-width:100%; display:block; min-width:0; font:800 0.9375rem/1.25 var(--font-display); letter-spacing:-0.01em; overflow-wrap:anywhere; }
html body.players-page #betslipDrawer .betslip-name .profile-name-button { position:relative; z-index:2; max-width:100%; padding:0; border:0; background:none; color:inherit; font:inherit; text-align:left; white-space:normal; cursor:pointer; }
html body.players-page #betslipDrawer .betslip-name .profile-name-button:hover { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
html body.players-page #betslipDrawer .betslip-name .owner-name { position:relative; z-index:2; }
html body.players-page #betslipDrawer .betslip-item .betslip-line {
  flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; display:inline; margin:0; padding:0; border:0; background:none; color:var(--ink); font:700 0.8125rem/1.25 var(--font-body); }
html body.players-page #betslipDrawer .betslip-item .betslip-line b { display:inline; margin:0; font:700 0.8125rem var(--font-mono); color:inherit; }
html body.players-page #betslipDrawer .betslip-item .betslip-prop { display:inline; margin:0; color:var(--muted); font-size:inherit; font-weight:600; }
html body.players-page #betslipDrawer .slip-star-mark { flex:0 0 auto; color:var(--accent); font-size:0.875rem; }
/* The sport chip (UI-769): on each pick once the slip or the record's list mixes sports. */
:is(#betslipDrawer, #trackerPanel) .slip-sport { flex:0 0 auto; align-self:center; display:inline-flex; align-items:center; height:1.125rem; padding:0 0.3125rem;
  border:1px solid var(--line); border-radius:var(--r-data); background:var(--surface-raised); color:var(--muted); font:700 0.625rem/1 var(--font-mono); letter-spacing:0.04em; }
:is(#betslipDrawer, #trackerPanel) .slip-sport[data-sport=nba] { color:var(--ink); border-color:var(--accent); }
#trackerPanel .tracker-bet .slip-sport { margin-right:0.375rem; vertical-align:0.125rem; }
html body.players-page #betslipDrawer .betslip-price { flex:0 0 auto; margin-left:auto; padding:0.125rem 0.4375rem; border:2px solid transparent; border-radius:var(--r-control);
  font:700 0.875rem var(--font-mono); font-variant-numeric:tabular-nums; }
html body.players-page #betslipDrawer .betslip-item.tone-good .betslip-price { border-color:var(--good); color:var(--good); }
html body.players-page #betslipDrawer .betslip-item.tone-bad .betslip-price { border-color:var(--bad); color:var(--bad); }
/* A live NBA pick: the tone bar and status say ahead (green) or behind (red); its saved price stays plain. */
html body.players-page #betslipDrawer .betslip-item[data-live]:is(.tone-good, .tone-bad) .betslip-price { border-color:transparent; color:inherit; }
html body.players-page #betslipDrawer .betslip-lock { flex:0 0 auto; width:1.5rem; height:1.5rem; display:grid; place-items:center; margin:0;
  border:0; color:var(--muted); cursor:help; }
/* The chevron is the pick's button; its hit area stretches over the whole collapsed row. */
html body.players-page #betslipDrawer .slip-expand { flex:0 0 auto; width:1.75rem; height:1.75rem; display:grid; place-items:center; margin:0; padding:0;
  border:0; border-radius:var(--r-card); background:none; color:var(--muted); cursor:pointer; }
html body.players-page #betslipDrawer .slip-expand::after { content:""; position:absolute; inset:0; z-index:1; border-radius:var(--r-card); }
html body.players-page #betslipDrawer .slip-expand svg { transition:rotate var(--dur-base) var(--ease-out); }
html body.players-page #betslipDrawer .betslip-item.is-open .slip-expand svg { rotate:180deg; }
html body.players-page #betslipDrawer .betslip-item:hover .slip-expand { color:var(--ink); }
html body.players-page #betslipDrawer .slip-expand:focus-visible { outline:none; }
html body.players-page #betslipDrawer .slip-expand:focus-visible::after { box-shadow:inset 0 0 0 3px var(--accent); }
html body.players-page #betslipDrawer .betslip-item .slip-status { display:block; margin:0; padding:0; background:none; color:var(--muted); font-size:0.75rem; font-weight:700; line-height:1.35; }
html body.players-page #betslipDrawer .slip-status.tone-good { color:var(--good); }
html body.players-page #betslipDrawer .slip-status.tone-bad { color:var(--bad); }
html body.players-page #betslipDrawer .slip-status.tone-thin { color:var(--thin); }
html body.players-page #betslipDrawer .slip-status.ar-moved { border-radius:var(--r-card); }

/* Opened: evidence, a moved-price note, stake, then star · share · remove. Grows by grid rows. */
html body.players-page #betslipDrawer .slip-more { position:relative; z-index:2; display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--dur-base) var(--ease-out); }
html body.players-page #betslipDrawer .betslip-item.is-open .slip-more { grid-template-rows:1fr; }
/* One column no wider than the card, so a wide child (evidence at large text) can't widen the actions row past the clip. */
html body.players-page #betslipDrawer .slip-more-inner { min-height:0; overflow:hidden; display:grid; grid-template-columns:minmax(0, 1fr); gap:0.625rem; }
html body.players-page #betslipDrawer .betslip-item.is-open .slip-more-inner { padding-top:0.625rem; margin-top:0.375rem; border-top:1px solid var(--line); }
html body.players-page #betslipDrawer .slip-more-inner:empty { display:none; }
html body.players-page #betslipDrawer .slip-evidence { display:grid; gap:0.5rem; }
html body.players-page #betslipDrawer .slip-evidence-top { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0.5rem; }
html body.players-page #betslipDrawer .slip-evidence .ar-signals { gap:0.25rem; }
html body.players-page #betslipDrawer .slip-evidence .ar-sig { height:1.5rem; padding:0 0.4375rem; font-size:0.6875rem; }
/* Each action is as wide as its label, then rows share the spare width: a narrow drawer or large
   text wraps a button to the next line instead of pushing "Share pick" into Remove (UI-233). */
html body.players-page #betslipDrawer .slip-actions-row { display:flex; flex-wrap:wrap; gap:0.5rem; }
html body.players-page #betslipDrawer .slip-actions-row > .slip-action { flex:1 0 auto; max-width:100%; }
html body.players-page #betslipDrawer .slip-action { position:relative; width:auto; height:2.5rem; min-width:0; display:flex; align-items:center; justify-content:center; gap:0.375rem; margin:0; padding:0 0.5rem;
  border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); color:var(--ink); box-shadow:none;
  font:800 0.8125rem var(--font-body); white-space:nowrap; cursor:pointer; transition:translate var(--dur-instant) var(--ease-press), box-shadow var(--dur-instant) var(--ease-press); }
html body.players-page #betslipDrawer .slip-action:not(:disabled):hover { background:var(--surface-strong); }
html body.players-page #betslipDrawer .slip-action:not(:disabled):active { translate:0 calc(1px * var(--move)); filter:brightness(0.86); }
html body.players-page #betslipDrawer .slip-action:disabled { opacity:0.55; cursor:default; }
html body.players-page #betslipDrawer .slip-action svg { width:0.875rem; height:0.875rem; flex:0 0 auto; }
html body.players-page #betslipDrawer .slip-action > span { position:static; width:auto; height:auto; overflow:visible; clip-path:none; }
html body.players-page #betslipDrawer .bet-star.slip-action svg { fill:none; stroke:var(--muted); }
html body.players-page #betslipDrawer .bet-star.slip-action[aria-pressed=true] { background:var(--accent-soft); }
html body.players-page #betslipDrawer .bet-star.slip-action[aria-pressed=true] svg { fill:var(--accent); stroke:var(--edge); }
html body.players-page #betslipDrawer :is(.slip-action, .betslip-switch, .betslip-track-link, .slip-stake input, summary):focus-visible { outline:3px solid var(--accent); outline-offset:2px; }

/* A saved price that moved: plain words, the Switch action when today's is better. */
html body.players-page #betslipDrawer .betslip-item .betslip-move {
  position:static; display:block; margin:0; padding:0.5rem 0.625rem; background:var(--bg); color:var(--ink); border:2px solid var(--line); border-radius:var(--r-card); font-size:0.75rem; }
html body.players-page #betslipDrawer .betslip-move[data-verdict=keep-yours] { border-color:var(--good); }
html body.players-page #betslipDrawer .betslip-move[data-verdict=better-now] { border-color:var(--bad); }
html body.players-page #betslipDrawer .betslip-move-body { display:grid; gap:0.25rem; }
html body.players-page #betslipDrawer .betslip-move-verdict { font-weight:600; line-height:1.4; color:var(--muted); }
html body.players-page #betslipDrawer .betslip-move .betslip-verdict { padding:0; background:none; color:var(--ink); font-size:inherit; font-weight:800; }
html body.players-page #betslipDrawer .betslip-move .betslip-switch {
  justify-self:start; margin:0.25rem 0 0.125rem; padding:0.4375rem 0.75rem; border:1px solid var(--line); border-radius:var(--r-card);
  background:var(--accent); color:var(--accent-ink); box-shadow:none; font:800 0.75rem var(--font-body); }
html body.players-page #betslipDrawer .betslip-move-why summary { position:static; margin:0; color:var(--muted); font-size:0.6875rem; font-weight:700; text-decoration:underline; cursor:pointer; }
html body.players-page #betslipDrawer .betslip-move-why p { margin:0.25rem 0 0; color:var(--muted); font-size:0.6875rem; line-height:1.45; }

/* Results and locked picks. */
html body.players-page #betslipDrawer .bet-tracking-result { display:grid; gap:0.125rem; margin:0; padding:0.5rem 0.625rem; border:0; border-radius:var(--r-card); background:var(--bg); color:var(--ink); font-size:0.75rem; }
html body.players-page #betslipDrawer .bet-tracking-result small { color:var(--muted); font-size:0.6875rem; line-height:1.4; }
html body.players-page #betslipDrawer .bet-tracking-result.result-won { background:var(--good-bg); }
html body.players-page #betslipDrawer .bet-tracking-result.result-lost { background:var(--bad-bg); }
html body.players-page #betslipDrawer .betslip-track-link { justify-self:start; min-height:1.75rem; margin:-0.25rem 0 0; padding:0; color:var(--accent); font-size:0.75rem; font-weight:700; }

/* Manual settle on an opened Needs review pick: four results, then a confirm. */
html body.players-page #betslipDrawer .slip-settle { display:grid; gap:0.5rem; margin:0; padding:0.625rem; border:2px dashed var(--thin); border-radius:var(--r-card); background:var(--bg); }
html body.players-page #betslipDrawer .slip-settle-title { margin:0; color:var(--ink); font:800 0.8125rem var(--font-body); }
html body.players-page #betslipDrawer .slip-settle-note { margin:0; color:var(--muted); font-size:0.6875rem; line-height:1.45; }
html body.players-page #betslipDrawer .slip-settle-choices { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:0.375rem; }
html body.players-page #betslipDrawer .slip-settle-choice { min-width:0; height:2.5rem; margin:0; padding:0 0.25rem; border:1px solid var(--line); border-radius:var(--r-control);
  background:var(--surface); color:var(--ink); font:800 0.8125rem var(--font-body); cursor:pointer; }
html body.players-page #betslipDrawer .slip-settle-choice:not(:disabled, [aria-pressed=true]):hover { background:var(--surface-strong); }
html body.players-page #betslipDrawer .slip-settle-choice:disabled { opacity:0.55; cursor:default; }
html body.players-page #betslipDrawer .slip-settle-choice[aria-pressed=true] { background:var(--accent); color:var(--accent-ink); box-shadow:none; }
/* Clear of the sticky footer (totals, Go to record) when scrolled into view. */
html body.players-page #betslipDrawer .slip-settle-confirm { display:grid; gap:0.5rem; scroll-margin-bottom:9rem; }
html body.players-page #betslipDrawer .slip-settle-confirm p { margin:0; color:var(--ink); font-size:0.75rem; line-height:1.45; }
html body.players-page #betslipDrawer .slip-settle-buttons { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0.5rem; }
html body.players-page #betslipDrawer .slip-settle-yes { background:var(--accent); color:var(--accent-ink); }
html body.players-page #betslipDrawer .slip-settle-yes:not(:disabled):hover { background:var(--accent); filter:brightness(1.06); }
/* The saved result's undo note, at the top of the list until dismissed or the panel closes.
   Scrolled into view after a settle, it clears the sticky heading above (UI-263). */
html body.players-page #betslipDrawer .slip-settle-notice { scroll-margin-top:6.75rem; /* clear of the heading and its tracking line (UI-460) */ display:flex; align-items:center; gap:0.5rem; margin:0 0 0.75rem; padding:0.5rem 0.5rem 0.5rem 0.75rem;
  border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface-raised); box-shadow:none; list-style:none; }
html body.players-page #betslipDrawer .slip-settle-notice p { flex:1 1 auto; min-width:0; margin:0; color:var(--ink); font-size:0.75rem; line-height:1.4; }
html body.players-page #betslipDrawer .slip-settle-notice .slip-action { flex:0 0 auto; padding:0 0.875rem; }
html body.players-page #betslipDrawer .slip-settle-dismiss { flex:0 0 auto; width:2.5rem; height:2.5rem; margin:0; padding:0; border:0; border-radius:var(--r-card); background:none; color:var(--muted); font-size:1.125rem; cursor:pointer; }
html body.players-page #betslipDrawer .slip-settle-dismiss:hover { color:var(--ink); }
/* "set by you · Undo": a quiet bordered button like the record's "Change result" (UI-526). */
#betslipDrawer .slip-final-undo { display:inline-flex; align-items:center; min-height:1.5rem; margin:0 0 0 0.25rem; padding:0 0.5rem; border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface); color:var(--muted); font:700 0.6875rem var(--font-body); text-decoration:none; vertical-align:middle; white-space:nowrap; cursor:pointer; }
#betslipDrawer .slip-final-undo:hover:not(:disabled) { border-color:var(--muted); color:var(--ink); }
#betslipDrawer .slip-final-undo:disabled { opacity:0.55; cursor:default; }
html body.players-page #betslipDrawer :is(.slip-settle-choice, .slip-settle-dismiss, .slip-final-undo):focus-visible { outline:3px solid var(--accent); outline-offset:2px; }

/* Stake: label, a small mono field, and what 1u would win at this price. Saves on Enter or leaving. */
html body.players-page #betslipDrawer .slip-stake-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0.5rem 0.75rem; }
html body.players-page #betslipDrawer .slip-towin { display:grid; justify-items:end; min-width:0; max-width:100%; margin-left:auto; color:var(--muted); font-size:0.75rem; text-align:right; }
html body.players-page #betslipDrawer .slip-towin b { color:var(--ink); font:700 0.75rem var(--font-mono); }
html body.players-page #betslipDrawer .slip-stake { position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:0.375rem 0.5rem; margin:0; max-width:100%; }
html body.players-page #betslipDrawer .slip-stake label {
  flex:0 1 auto; display:flex; align-items:center; gap:0.625rem; width:auto; height:auto; padding:0; border:0; background:none; box-shadow:none; cursor:default; }
html body.players-page #betslipDrawer .slip-stake-label { color:var(--muted); font-size:0.75rem; font-weight:700; }
html body.players-page #betslipDrawer .slip-stake-field {
  width:5.25rem; height:2.25rem; display:flex; align-items:center; gap:0.125rem; padding:0 0.625rem; cursor:text;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r-card); color:var(--muted); font:700 0.875rem var(--font-mono); }
html body.players-page #betslipDrawer .slip-stake-field:focus-within { border-color:var(--accent); }
html body.players-page #betslipDrawer .slip-stake input:is([name=stake], [name=taken]) {
  flex:1 1 auto; width:100%; min-width:0; height:100%; padding:0; border:0; outline:0; background:none; box-shadow:none;
  color:var(--ink); font:700 0.875rem var(--font-mono); text-align:right; }
html body.players-page #betslipDrawer .slip-stake input::placeholder { color:var(--muted); }
html body.players-page #betslipDrawer .slip-stake .text-button { flex:0 0 auto; padding:0.25rem; color:var(--muted); font-size:0.75rem; font-weight:700; }
html body.players-page #betslipDrawer .slip-price-note { flex:1 0 100%; color:var(--muted); font-size:0.6875rem; line-height:1.4; }
html body.players-page #betslipDrawer .slip-stake input:disabled { opacity:0.65; cursor:default; }
/* The error sits in the flow under the field (never over the Star/Share/Remove row below). */
html body.players-page #betslipDrawer .slip-stake .tracking-error { position:static; flex:1 1 100%; width:auto; min-width:0; max-width:min(16rem, 100%); margin:0; padding:0.3125rem 0.5rem; border-radius:var(--r-card); background:var(--bad-bg); color:var(--ink); font-size:0.75rem; line-height:1.4; overflow-wrap:anywhere; }
html body.players-page #betslipDrawer .slip-stake .tracking-error:empty { display:none; }

html body.players-page #betslipDrawer .empty-state { padding:1.25rem 0.25rem; color:var(--muted); font-size:0.8125rem; line-height:1.5; }
#betslipDrawer .slip-hint { margin:0 1.25rem 1rem; color:var(--muted); font-size:0.75rem; line-height:1.45; }
/* "Tracking only; no bet placed." under the title, on its own line in the sticky heading (UI-460). */
html body.players-page #betslipDrawer .betslip-heading { flex-wrap:wrap; row-gap:0.125rem; }
html body.players-page #betslipDrawer .slip-tracking { flex:1 0 100%; order:3; margin:0; color:var(--muted); font-size:0.75rem; line-height:1.4; }
#betslipDrawer .slip-hint[hidden] { display:none; }

/* Final this week: each settled pick stamps in, tinted by result, with how far it got. */
#betslipDrawer .slip-final { margin:0.25rem 1.25rem 1rem; display:grid; gap:0.5rem; }
#betslipDrawer .slip-final[hidden] { display:none; }
#betslipDrawer .slip-final-head { display:flex; align-items:baseline; justify-content:space-between; gap:0.75rem; }
#betslipDrawer .slip-final-head h4 { margin:0; font:800 0.8125rem var(--font-body); color:var(--muted); }
#betslipDrawer .slip-final-total { font:700 0.8125rem var(--font-mono); }
#betslipDrawer .slip-final-total.tone-good { color:var(--good); }
#betslipDrawer .slip-final-total.tone-bad { color:var(--bad); }
#betslipDrawer .slip-final-list { display:grid; gap:0.5rem; margin:0; padding:0; list-style:none; }
#betslipDrawer .slip-final-item { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:0.625rem; padding:0.625rem 0.75rem;
  border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface-raised); box-shadow:none; }
#betslipDrawer .slip-final-item.is-won { background:var(--good-bg); }
#betslipDrawer .slip-final-item.is-lost { background:var(--bad-bg); }
#betslipDrawer .slip-final-item:is(.is-push, .is-void) { background:var(--thin-bg); }
/* The stamp is a solid block in the result's colour, no mark inside (UI-457). */
#betslipDrawer .slip-stamp { width:1rem; height:1rem; border-radius:var(--r-data); background:currentColor; color:var(--thin);
  animation:ar-stamp var(--dur-slow) var(--spring-bouncy) both; }
#betslipDrawer .is-won .slip-stamp { color:var(--good); }
#betslipDrawer .is-lost .slip-stamp { color:var(--bad); }
#betslipDrawer :is(.is-push, .is-void) .slip-stamp { color:var(--thin); }
#betslipDrawer .slip-final-body { min-width:0; display:grid; gap:0.125rem; }
#betslipDrawer .slip-final-name { display:flex; flex-wrap:wrap; align-items:baseline; gap:0 0.3125rem; min-width:0; }
#betslipDrawer .slip-final-name .betslip-name { overflow-wrap:anywhere; font:800 0.875rem/1.25 var(--font-display); }
#betslipDrawer .slip-final-name .profile-name-button { padding:0; border:0; background:none; color:inherit; font:inherit; cursor:pointer; }
#betslipDrawer .slip-final-name .profile-name-button:hover { color:var(--accent); }
html body.players-page #betslipDrawer .slip-final-name .betslip-line { display:inline; flex:0 0 auto; margin:0; padding:0; border:0; background:none; font:700 0.75rem var(--font-body); color:var(--ink); }
html body.players-page #betslipDrawer .slip-final-name .betslip-line b { display:inline; margin:0; font:700 0.75rem var(--font-mono); color:inherit; }
#betslipDrawer .slip-final-name .betslip-prop { color:var(--muted); }
#betslipDrawer .slip-final-body > small { color:var(--muted); font-size:0.6875rem; }
#betslipDrawer .is-won .slip-final-body > small b { color:var(--good); }
#betslipDrawer .is-lost .slip-final-body > small b { color:var(--bad); }
#betslipDrawer .slip-progress { display:grid; gap:0.125rem; margin-top:0.25rem; }
#betslipDrawer .slip-progress .ar-progress { height:0.375rem; background:var(--bg); }
#betslipDrawer .slip-progress .ar-progress::after { content:""; position:absolute; top:0; bottom:0; right:0; width:2px; background:var(--ink); }
#betslipDrawer .slip-progress-nums { display:flex; justify-content:space-between; font:700 0.625rem var(--font-mono); color:var(--muted); }
#betslipDrawer .slip-progress-nums b { color:var(--ink); }
#betslipDrawer .slip-final-units { font:700 0.875rem var(--font-mono); font-variant-numeric:tabular-nums; }
#betslipDrawer .is-won .slip-final-units { color:var(--good); }
#betslipDrawer .is-lost .slip-final-units { color:var(--bad); }

/* Footer: totals and Go to record, the note, then slip details. Sticks to the bottom. */
#betslipDrawer .slip-footer { position:sticky; bottom:0; z-index:3; display:grid; gap:0.625rem; margin:auto 1.25rem 0; padding:0.75rem 0 1rem;
  background:var(--surface); border-top:2px solid var(--line); }
#betslipDrawer .slip-totals { display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:0.125rem 0.75rem; }
#betslipDrawer #slipTotals { grid-column:1; color:var(--ink); font:700 0.8125rem var(--font-mono); }
#betslipDrawer #slipSeason { grid-column:1; font:700 0.75rem var(--font-mono); color:var(--muted); }
html body.players-page #betslipDrawer .slip-totals .slip-tracker-link { grid-column:2; grid-row:1 / span 2; }
#betslipDrawer #slipSeason:empty { display:none; }
#betslipDrawer #slipSeason[data-tone=positive] { color:var(--good); }
#betslipDrawer #slipSeason[data-tone=negative] { color:var(--bad); }
html body.players-page #betslipDrawer .slip-totals .slip-tracker-link {
  min-height:2.75rem; margin:0; display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; padding:0 1rem;
  border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface-raised); color:var(--ink); box-shadow:none; font:800 0.9375rem var(--font-display); white-space:nowrap; }
html body.players-page #betslipDrawer .slip-totals .slip-tracker-link:hover { background:var(--surface-strong); }
html body.players-page #betslipDrawer .slip-options>.slip-note { margin:0.25rem 0.625rem 0.5rem; color:var(--ink); font-size:0.75rem; line-height:1.45; }
/* Neutral tones stay transparent here (a global .tone-neutral fills a background). */
#betslipDrawer .tone-neutral:not(.betslip-item), #trackerPanel :is(.rec-units, .rec-roi-row).tone-neutral { background:none; }
html body.players-page #betslipDrawer .slip-options { margin:0; padding:0; border:0; color:var(--muted); font-size:0.75rem; }
html body.players-page #betslipDrawer .slip-options>summary { min-height:2.75rem; display:flex; align-items:center; padding:0 0.625rem; border-radius:var(--r-control); color:var(--muted); font-weight:700; cursor:pointer; }
html body.players-page #betslipDrawer .slip-options>summary:hover { color:var(--ink); background:var(--surface-raised); }
html body.players-page #betslipDrawer .slip-options[open] { max-height:40vh; overflow:auto; }
html body.players-page #betslipDrawer .slip-options>p { margin:0.25rem 0.625rem 0.5rem; font-size:0.75rem; line-height:1.5; }
html body.players-page #betslipDrawer .slip-options>#betslipSummary { border:0; padding:0; }
html body.players-page #betslipDrawer .slip-options>button { width:auto; margin:0.25rem 0.625rem 0.5rem; }
html body.players-page #betslipDrawer .slip-options>small { display:block; margin:0 0.625rem; font-size:0.6875rem; line-height:1.5; }
/* Back up / Restore (UI-85): the same actions as the header's Your data, which phones don't show. */
html body.players-page #betslipDrawer .slip-backup { display:flex; flex-wrap:wrap; gap:0.5rem; margin:0.25rem 0.625rem 0.75rem; }
html body.players-page #betslipDrawer .slip-backup>p { flex:1 0 100%; margin:0; color:var(--ink); font-size:0.75rem; line-height:1.5; }
html body.players-page #betslipDrawer .slip-backup>.pd-button { min-height:2.75rem; padding:0 1rem; }
html body.players-page #betslipDrawer :is(button, summary, input):focus-visible { outline:3px solid var(--accent); outline-offset:2px; }

/* Phones: a bottom sheet with a grab handle that rises from the bottom. */
@media (max-width:40em) {
  html body.players-page #betslipDrawer[data-overlay] {
    inset:auto 0 0 0 !important; width:100vw !important; max-height:calc(100dvh - 4.5rem) !important;
    border-left:0 !important; border-top:1px solid var(--line) !important; border-radius:var(--r-card) var(--r-card) 0 0 !important; box-shadow:none !important; }
  html body.players-page #betslipDrawer[data-overlay][open] { animation-name:slip-up; }
  html body.players-page #betslipDrawer[data-overlay]::backdrop { background:#0c0a10bd; }
  html body.players-page #betslipDrawer[data-overlay] .betslip-heading { padding:1.375rem 1rem 0.75rem !important; border-radius:var(--r-card) var(--r-card) 0 0; }
  html body.players-page #betslipDrawer .betslip-heading::before { content:""; position:absolute; top:0.5rem; left:50%; width:2.75rem; height:5px; margin-left:-1.375rem; border-radius:var(--r-card); background:var(--line); }
  #betslipDrawer :is(.slip-tabs, .slip-date-line, .slip-hint, .slip-final), html body.players-page #betslipDrawer[data-overlay] .betslip-scope { margin-left:1rem; margin-right:1rem; }
  html body.players-page #betslipDrawer #betslipItems { padding:0 1rem 0.75rem; }
  #betslipDrawer .slip-footer { margin:auto 1rem 0; padding-bottom:calc(0.875rem + env(safe-area-inset-bottom)); }
  /* The sheet is the screen's width here, so it can be a container measured in its own text
     size: the rules below apply only at a large text size (200%), never at the default. */
  html body.players-page #betslipDrawer[data-overlay] { container:slip / inline-size; }
}
/* Large text (UI-261, UI-297). The tabs stack (the gliding pill gives way to a filled tab),
   the footer scrolls with the list instead of pinning a third of the sheet over it, the
   pick's name drops under the photo when it can't have 6rem, and the totals sit above Go to
   record. */
@container slip (max-width:15em) {
  #betslipDrawer .slip-tabs { grid-template-columns:minmax(0, 1fr); }
  #betslipDrawer .slip-tab-thumb { display:none; }
  #betslipDrawer .slip-tab { height:auto; min-height:44px; flex-wrap:wrap; white-space:normal; }
  #betslipDrawer .slip-tab[aria-selected=true] { background:var(--selected-bg); box-shadow:inset 0 0 0 1px var(--accent); }
  #betslipDrawer .slip-footer { position:static; }
  html body.players-page #betslipDrawer .betslip-pick-head { flex-wrap:wrap; }
  html body.players-page #betslipDrawer .betslip-pick-name { flex-basis:6rem; }
  #betslipDrawer .slip-totals { grid-template-columns:minmax(0, 1fr); }
  html body.players-page #betslipDrawer .slip-totals .slip-tracker-link { grid-column:1; grid-row:auto; white-space:normal; }
}
@keyframes slip-up { from { translate:0 calc(100% * var(--move)); } }
@media (prefers-reduced-motion: reduce) {
  /* The panel fades in and out instead of sliding; the page takes its new width at once. */
  html body.players-page { --slip-close:var(--dur-slow); }
  html body.players-page #betslipDrawer[data-overlay][open] { animation:slip-fade var(--dur-slow) var(--ease-out); }
  html body.players-page :is(.notebook-main, .notebook-footer) { transition:none !important; }
  #betslipDrawer .slip-stamp, html body.players-page #betslipDrawer[data-overlay]::backdrop { animation:none; }
  #betslipDrawer :is(.slip-tab-thumb, .slip-more, .slip-expand svg) { transition:none; }
  html body.players-page #betslipDrawer .slip-review-toggle svg { transition:none; }
}

/* ------------------------------------------------------------------------------------
   Record page (?view=bets).
   ------------------------------------------------------------------------------------ */
#trackerPanel:not([hidden]) { display:grid; grid-template-columns:minmax(0, 1fr) auto; column-gap:1rem; align-items:center; }
#trackerPanel > * { grid-column:1 / -1; min-width:0; }
#trackerPanel #trackerSummary { display:contents; }
#trackerPanel .rec-top, #trackerPanel .tracker-scroll, #trackerPanel .tracker-more, #trackerPanel #trackerEmpty, #trackerPanel .tracker-status { grid-column:1 / -1; }
#trackerPanel .tracker-filters-row { grid-column:1; }
#trackerPanel .tracker-toolbar { grid-column:2; }

/* Heading row: title, Active/Record pill, note, then Share record + Export CSV. A grid, not a wrapping row,
   so the two buttons keep one place whatever the week shows (UI-360): one row when wide, title + buttons
   over pill + note in between, one column on a phone. */
body[data-layout] #trackerPanel .tracker-header { display:grid; grid-template-columns:auto auto minmax(0, 1fr) auto; grid-template-areas:"head views note actions"; align-items:center; gap:0.75rem 1.125rem; margin:0 0 1.125rem; }
body[data-layout] #trackerPanel .tracker-header>.section-heading { grid-area:head; min-width:0; display:grid; gap:0.25rem; margin:0; padding:0; }
#trackerPanel .tracker-header>.rec-views { grid-area:views; justify-self:start; }
#trackerPanel .tracker-header>.rec-note { grid-area:note; }
#trackerPanel .rec-actions { grid-area:actions; min-width:0; display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:0.75rem; }
@media (max-width:80em) {
  body[data-layout] #trackerPanel .tracker-header { grid-template-columns:auto minmax(0, 1fr); grid-template-areas:"head actions" "views note"; }
  #trackerPanel .tracker-header>.rec-views { margin-left:0; }
}
body[data-active-view=tracker] #trackerPanel #trackerTitle { margin:0; font:800 2.125rem/1 var(--font-display); letter-spacing:-0.03em; }
#trackerPanel .rec-views { display:flex; gap:0.25rem; margin-left:0.75rem; padding:0.25rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-control); box-shadow:none; }
#trackerPanel .rec-view { height:2.125rem; display:flex; align-items:center; gap:0.5rem; padding:0 0.875rem; border:2px solid transparent; border-radius:var(--r-card);
  background:none; color:var(--muted); font:700 0.875rem var(--font-body); white-space:nowrap; }
#trackerPanel button.rec-view { cursor:pointer; }
#trackerPanel button.rec-view:not(.is-current):hover { color:var(--ink); background:var(--surface-raised); }
#trackerPanel .rec-view.is-current { background:var(--selected-bg); color:var(--ink); border-color:var(--accent); font-weight:800; }
/* UI-435: the heading row is a container measured in its own text size. With the browser's
   text set to 200% a 320 phone's row holds 8.7em, and "Active picks 0" on one line is 10em:
   under 11em the switch's labels wrap with slimmer sides. At the default size the row holds
   at least 18em. */
#trackerPanel .tracker-header { container:rec-head / inline-size; }
@container rec-head (max-width:11em) {
  #trackerPanel .rec-view { height:auto; min-height:2.125rem; flex-wrap:wrap; gap:0.25rem 0.5rem; padding:0.25rem 0.5rem; white-space:normal; }
}
#trackerPanel #trackerActiveCount { min-width:1.25rem; height:1.25rem; display:inline-grid; place-items:center; padding:0 0.25rem; border-radius:var(--r-data); background:var(--surface-raised); color:var(--ink); font:700 0.6875rem var(--font-mono); }
#trackerPanel .rec-note { margin:0; color:var(--muted); font-size:0.8125rem; text-align:right; }
body[data-layout] #trackerPanel #exportTracker.rec-export { min-height:2.75rem; display:inline-flex; align-items:center; gap:0.5rem; padding:0 1rem; border-radius:var(--r-card); font:800 0.875rem var(--font-body); }
#trackerPanel .tracker-status { margin:-0.625rem 0 0.25rem; }
#trackerPanel .tracker-status #trackerCount { color:var(--muted); font-size:0.75rem; }

/* The sport filter (UI-769): All / NFL / NBA, the Active/Record switch's look. Only when a second sport exists. */
#trackerPanel .rec-sport { grid-column:1 / -1; justify-self:start; display:flex; flex-wrap:wrap; max-width:100%; gap:0.25rem; margin:0 0 1rem; padding:0.25rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-control); }
#trackerPanel .rec-sport-option { min-height:2.125rem; display:flex; align-items:center; padding:0 0.875rem; border:2px solid transparent; border-radius:var(--r-card);
  background:none; box-shadow:none; color:var(--muted); font:700 0.875rem var(--font-body); white-space:nowrap; cursor:pointer; }
#trackerPanel .rec-sport-option:not([aria-pressed=true]):hover { color:var(--ink); background:var(--surface-raised); }
#trackerPanel .rec-sport-option[aria-pressed=true] { background:var(--selected-bg); color:var(--ink); border-color:var(--accent); font-weight:800; }
#trackerPanel .rec-sport-option:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }

/* Season sentence, the results calendar and return by market. */
#trackerPanel .rec-top { display:grid; grid-template-columns:minmax(0, 1fr) minmax(19rem, 26rem); align-items:start; gap:1.5rem; margin-bottom:1.25rem; }
#trackerPanel .rec-hero { display:grid; grid-template-columns:minmax(0, 1fr); gap:0.75rem; padding:1.375rem 1.5rem 1.25rem; background:var(--surface-raised); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:none; }
#trackerPanel .rec-headline { margin:0; font:800 clamp(1.75rem, 3.2vw, 2.75rem)/1.08 var(--font-display); letter-spacing:-0.03em; color:var(--ink); }
#trackerPanel .rec-big { font-variant-numeric:tabular-nums; }
#trackerPanel .rec-units { white-space:nowrap; }
#trackerPanel .rec-units-value { font-family:var(--font-mono); font-weight:700; letter-spacing:-0.04em; font-variant-numeric:tabular-nums; }
#trackerPanel .rec-units.tone-good { color:var(--good); }
#trackerPanel .rec-units.tone-bad { color:var(--bad); }
#trackerPanel .rec-units.tone-neutral { color:var(--muted); }
#trackerPanel .rec-units-glyph { font-size:0.7em; margin-right:0.125em; vertical-align:0.12em; }
#trackerPanel .rec-rate { max-width:44rem; margin:0; color:var(--muted); font-size:0.9375rem; line-height:1.5; }
#trackerPanel .tracker-scoreboard { display:flex; flex-wrap:wrap; gap:0.5rem; border:0; border-radius:0; background:none; overflow:visible; }
#trackerPanel .tracker-kpi { display:flex; flex-wrap:wrap; max-width:100%; align-items:baseline; gap:0 0.5rem; padding:0.375rem 0.75rem; border:2px solid var(--line); border-radius:var(--r-card); background:var(--bg); }
#trackerPanel .tracker-kpi+.tracker-kpi { border-left:2px solid var(--line); }
#trackerPanel .tracker-kpi>strong { display:flex; align-items:center; gap:0.3125rem; color:var(--ink); font:700 0.9375rem/1.3 var(--font-mono); letter-spacing:-0.02em; }
#trackerPanel .tracker-kpi>strong svg { fill:var(--accent); stroke:var(--edge); stroke-width:1.2; }
#trackerPanel .tracker-kpi>span { min-width:0; overflow-wrap:anywhere; color:var(--muted); font-size:0.75rem; font-weight:700; letter-spacing:0; text-transform:none; }
#trackerPanel .tracker-kpi>span small { color:inherit; font-size:inherit; font-weight:600; }
body[data-layout] #trackerPanel .tracker-kpi>span b { font-family:var(--font-mono); }
#trackerPanel .tracker-kpi.tracker-net-positive>strong, #trackerPanel .tracker-kpi>span .tracker-net-positive { color:var(--good); }
#trackerPanel .tracker-kpi.tracker-net-negative>strong, #trackerPanel .tracker-kpi>span .tracker-net-negative { color:var(--bad); }

/* Results calendar: each game day coloured by net units (deeper = more), dashed = open, ring = today. */
#trackerPanel .rec-cal { display:grid; gap:0.5rem; margin-top:0.25rem; padding:0.875rem 1rem 0.75rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); }
#trackerPanel .rec-cal-head { display:flex; align-items:center; flex-wrap:wrap; gap:0.5rem 0.75rem; }
#trackerPanel .rec-cal-head h4 { margin:0; min-width:9.5rem; text-align:center; font:800 1.125rem var(--font-display); }
#trackerPanel .rec-cal-nav { width:2rem; height:2rem; display:grid; place-items:center; padding:0; border:2px solid var(--line); border-radius:var(--r-control); background:var(--bg); color:var(--ink); font:800 1.125rem/1 var(--font-body); cursor:pointer; }
#trackerPanel .rec-cal-nav:disabled { opacity:0.35; cursor:default; }
#trackerPanel .rec-cal-summary { margin-left:auto; color:var(--muted); font-size:0.75rem; }
#trackerPanel .rec-cal-weekdays, #trackerPanel .rec-cal-grid { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:0.375rem; }
#trackerPanel .rec-cal-weekdays span { color:var(--muted); font-size:0.6875rem; font-weight:700; padding-left:0.25rem; }
#trackerPanel .rec-cal-cell { --cell:var(--bg); position:relative; min-width:0; min-height:3.25rem; display:grid; grid-template-columns:auto auto; grid-template-rows:auto 1fr; align-content:space-between;
  gap:0 0.25rem; padding:0.3125rem 0.4375rem; border:2px solid var(--line); border-radius:var(--r-card); background:var(--cell); color:var(--ink); font:inherit; text-align:left; }
#trackerPanel .rec-cal-cell.is-out { border:0; background:none; }
#trackerPanel button.rec-cal-cell { cursor:pointer; }
#trackerPanel button.rec-cal-cell:hover { border-color:var(--ink); }
#trackerPanel button.rec-cal-cell[aria-pressed=true] { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent); }
#trackerPanel .rec-cal-cell.tone-up { border-color:var(--edge); }
#trackerPanel .rec-cal-cell.tone-up.depth-1 { --cell:#1f4a39; }
#trackerPanel .rec-cal-cell.tone-up.depth-2 { --cell:#2b7a5a; }
#trackerPanel .rec-cal-cell.tone-up.depth-3 { --cell:var(--good); color:var(--accent-ink); }
#trackerPanel .rec-cal-cell.tone-down { border-color:var(--edge); }
#trackerPanel .rec-cal-cell.tone-down.depth-1 { --cell:#5a2a38; }
#trackerPanel .rec-cal-cell.tone-down.depth-2 { --cell:#8e3b4d; }
#trackerPanel .rec-cal-cell.tone-down.depth-3 { --cell:var(--bad); color:var(--accent-ink); }
#trackerPanel .rec-cal-cell.tone-even { --cell:var(--surface-raised); }
#trackerPanel .rec-cal-cell.tone-open, #trackerPanel .rec-cal-cell.has-open { border-style:dashed; }
#trackerPanel .rec-cal-cell.tone-open { border-color:var(--muted); }
#trackerPanel .rec-cal-cell.is-today { box-shadow:0 0 0 2px var(--ink); }
#trackerPanel .rec-cal-day { font:700 0.6875rem var(--font-mono); opacity:0.85; }
#trackerPanel .rec-cal-rec { justify-self:end; font:700 0.6875rem var(--font-mono); }
#trackerPanel .rec-cal-net, #trackerPanel .rec-cal-open { grid-column:1 / -1; justify-self:end; align-self:end; font:700 0.9375rem var(--font-mono); font-variant-numeric:tabular-nums; }
#trackerPanel .rec-cal-open { font-size:0.6875rem; color:var(--muted); }
/* Units like "+0.69u" fit a narrow day cell: the figure scales with the cell (a seventh of the
   calendar, less gaps, padding and border), up to its usual size. */
#trackerPanel .rec-cal { container-type:inline-size; }
#trackerPanel .rec-cal-net { white-space:nowrap; font-size:min(0.9375rem, calc(((100cqi - 2.25rem) / 7 - 1.125rem) / 3.4)); }
#trackerPanel .rec-cal-rec { white-space:nowrap; }
#trackerPanel .rec-cal.is-entering .rec-cal-cell:not(.is-out) { animation:rec-cell-in var(--dur-slow) var(--ease-out) both; animation-delay:calc(var(--d, 0) * 28ms * var(--move)); }
@keyframes rec-cell-in { from { opacity:0; translate:calc(-4px * var(--move)) calc(-4px * var(--move)); } }
#trackerPanel .rec-cal-legend { display:flex; flex-wrap:wrap; gap:0.375rem 1rem; margin:0.125rem 0 0; padding:0; list-style:none; color:var(--muted); font-size:0.6875rem; font-weight:600; }
#trackerPanel .rec-cal-legend li { display:inline-flex; align-items:center; gap:0.375rem; }
#trackerPanel .rec-cal-legend i { width:0.75rem; height:0.75rem; border-radius:var(--r-data); border:1.5px solid var(--line); background:var(--bg); }
#trackerPanel .rec-cal-legend i.tone-up { background:#2b7a5a; border-color:var(--edge); }
#trackerPanel .rec-cal-legend i.tone-down { background:#8e3b4d; border-color:var(--edge); }
#trackerPanel .rec-cal-legend i.tone-even { background:var(--surface-raised); }
#trackerPanel .rec-cal-legend i.tone-open { border-style:dashed; border-color:var(--muted); }
#trackerPanel .rec-cal-legend i.is-today { border-color:var(--ink); }

/* Return by market: ROI bars around zero (±50% at least, or the largest return shown), record and units beside each. */
#trackerPanel .rec-roi, #trackerPanel .rec-empty { display:grid; gap:0.625rem; padding:1.25rem 1.375rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:none; }
#trackerPanel .rec-roi-head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:0 0.75rem; }
#trackerPanel .rec-roi h3, #trackerPanel .rec-empty h2 { margin:0; font:800 1.375rem var(--font-display); letter-spacing:-0.02em; text-transform:none; }
#trackerPanel .rec-roi-head span { color:var(--muted); font-size:0.75rem; }
#trackerPanel .rec-roi-sentence { margin:0; color:var(--ink); font-size:0.875rem; line-height:1.5; }
#trackerPanel .rec-roi-sentence b.tone-good { color:var(--good); }
#trackerPanel .rec-roi-sentence b.tone-bad { color:var(--bad); font-family:var(--font-mono); }
#trackerPanel .rec-roi-axis { display:grid; grid-template-columns:minmax(0, 1fr) 7rem 4.75rem; gap:0.5rem; color:var(--muted); font:700 0.625rem var(--font-mono); }
#trackerPanel .rec-roi-axis span { grid-column:2; grid-row:1; }
#trackerPanel .rec-roi-axis span:nth-child(2) { justify-self:center; }
#trackerPanel .rec-roi-axis span:nth-child(3) { justify-self:end; }
#trackerPanel .rec-roi-list { display:grid; margin:0; padding:0; list-style:none; }
#trackerPanel .rec-roi-row { display:grid; grid-template-columns:minmax(0, 1fr) 7rem 4.75rem; align-items:center; gap:0.5rem; padding:0.5625rem 0; border-top:1px solid var(--line); }
#trackerPanel .rec-roi-name { display:grid; min-width:0; }
#trackerPanel .rec-roi-name b { font-size:0.875rem; }
#trackerPanel .rec-roi-name small { color:var(--muted); font-size:0.6875rem; }
#trackerPanel .rec-roi-bar { position:relative; height:0.75rem; }
#trackerPanel .rec-roi-bar::before { content:""; position:absolute; left:50%; top:-3px; bottom:-3px; width:1px; background:var(--line); }
#trackerPanel .rec-roi-fill { position:absolute; top:0; bottom:0; width:calc(var(--w, 0) * 1%); min-width:3px; border-radius:0; background:var(--muted);
  transform-origin:left center; animation:rec-roi-in var(--dur-slow) var(--ease-out) both; }
#trackerPanel .tone-good .rec-roi-fill { left:50%; background:var(--good); }
#trackerPanel .tone-bad .rec-roi-fill { right:50%; background:var(--bad); transform-origin:right center; }
#trackerPanel .tone-neutral .rec-roi-fill { left:calc(50% - 1.5px); }
@keyframes rec-roi-in { from { transform:scaleX(calc(1 - var(--move))); } }
#trackerPanel .rec-roi-val { display:grid; justify-items:end; font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
#trackerPanel .rec-roi-val b { font-size:0.8125rem; }
#trackerPanel .rec-roi-val small { color:var(--muted); font-size:0.6875rem; }
#trackerPanel .rec-roi-row.tone-good .rec-roi-val b { color:var(--good); }
#trackerPanel .rec-roi-row.tone-bad .rec-roi-val b { color:var(--bad); }
#trackerPanel .rec-roi-note { margin:0; color:var(--muted); font-size:0.6875rem; }
/* Return by market fits its card at any text size (UI-318): one shrinkable track, and once the card
   is too narrow for name, bar and value side by side (phones at 200% text), the value moves up beside
   the name and the bar takes the full width below. The axis spans that width too, over the bars. */
#trackerPanel .rec-roi { grid-template-columns:minmax(0, 1fr); container:rec-roi / inline-size; }
@container rec-roi (max-width:16em) {
  #trackerPanel .rec-roi-axis { grid-template-columns:minmax(0, 1fr); }
  #trackerPanel .rec-roi-axis span { grid-column:1; }
  #trackerPanel .rec-roi-row { grid-template-columns:minmax(0, 1fr) auto; row-gap:0.375rem; }
  #trackerPanel .rec-roi-name { grid-area:1 / 1; }
  #trackerPanel .rec-roi-val { grid-area:1 / 2; }
  #trackerPanel .rec-roi-bar { grid-area:2 / 1 / 3 / -1; }
}
#trackerPanel .rec-empty p { margin:0; color:var(--muted); font-size:0.875rem; line-height:1.5; }
#trackerPanel .rec-empty-cal { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:0.3125rem; }
#trackerPanel .rec-empty-cal span { height:1.5rem; border:1.5px solid var(--line); border-radius:var(--r-card); }
#trackerPanel .rec-empty-cal span.is-open { border-style:dashed; border-color:var(--muted); }
#trackerPanel .rec-empty-actions { display:flex; align-items:center; flex-wrap:wrap; gap:0.75rem 1rem; }
#trackerPanel .rec-units-help summary { color:var(--ink); font-size:0.8125rem; font-weight:700; text-decoration:underline; cursor:pointer; }
#trackerPanel .rec-units-help p { margin-top:0.375rem; font-size:0.8125rem; }
/* Unit size on the Cash P/L card: "1u = $[100]", 12px or more at every width. */
#trackerPanel .rec-unit-size { display:inline-flex; flex-wrap:wrap; max-width:100%; align-items:baseline; gap:0.125rem; margin-left:0.25rem; font-size:0.6875rem; font-weight:600; white-space:nowrap; }
#trackerPanel .rec-unit-size input { width:4.5rem; min-height:0; padding:0.0625rem 0.25rem; border:1.5px solid var(--line); border-radius:var(--r-control); background:var(--bg); color:var(--ink); font:600 0.75rem var(--font-mono); }
#trackerPanel .rec-unit-size input:focus-visible { outline:3px solid var(--accent); outline-offset:1px; }
/* No picks this season: one empty state, nothing else. */
#trackerPanel .rec-top.is-empty { grid-template-columns:minmax(0, 40rem); }
/* The season picker stays (an earlier season may have picks); week, sort and search go. */
/* Qualified: out-ranks the #trackerPanel display rules earlier in this sheet. */
body[data-layout] #trackerPanel.is-empty :is(.tracker-status, #exportTracker) { display:none; }
#trackerPanel.is-empty .tracker-toolbar > :not(:has(#season)) { display:none; }
body[data-layout] #trackerPanel.is-empty .tracker-toolbar { grid-column:1 / -1; justify-content:flex-start; }
#trackerPanel :is(.rec-cal-nav, .rec-cal-cell, .rec-why-link, .rec-units-help summary):focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
@media (prefers-reduced-motion: reduce) { #trackerPanel .rec-cal.is-entering .rec-cal-cell, #trackerPanel .rec-roi-fill { animation:none; } }

/* Filter pills and the tools on the right (search, week, sort, season). */
#trackerPanel .tracker-filters-row { display:flex; flex-wrap:wrap; gap:0.5rem; margin:0 0 1rem; }
#trackerPanel .tracker-stat { --chip-dot:none; min-height:2.25rem; display:inline-flex; align-items:center; gap:0.5rem; padding:0 0.875rem;
  background:var(--surface); color:var(--muted); border:2px solid var(--line); border-radius:var(--r-card); box-shadow:none; font:800 0.875rem var(--font-body); cursor:pointer; }
#trackerPanel .tracker-stat::before { display:none; }
#trackerPanel .tracker-stat strong { min-width:0; padding:0; border-radius:0; background:none; color:inherit; font:700 0.75rem var(--font-mono); opacity:0.85; }
#trackerPanel .tracker-stat:hover { color:var(--ink); border-color:var(--muted); }
#trackerPanel .tracker-stat[aria-pressed=true] { background:var(--selected-bg); color:var(--ink); border-color:var(--accent); box-shadow:none; }
#trackerPanel .tracker-stat[aria-pressed=true] strong { background:none; color:inherit; }
#trackerPanel .tracker-stat:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }

body[data-layout] #trackerPanel .tracker-toolbar { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:0.5rem; margin:0 0 1rem; }
body[data-layout] #trackerPanel .tracker-toolbar>label { display:flex; align-items:center; gap:0.375rem; flex:0 0 auto; width:auto; color:var(--muted); font-size:0.75rem; font-weight:700; }
#trackerPanel .tracker-toolbar select { min-width:0; width:auto; height:2.5rem; min-height:0; padding:0 0.625rem; border-radius:var(--r-control); font-size:0.8125rem; font-weight:700; }
body[data-layout] #trackerPanel .tracker-toolbar .rec-search { width:16.25rem; height:2.5rem; padding:0 0.75rem; gap:0.5rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-control); cursor:text; }
body[data-layout] #trackerPanel .tracker-toolbar .rec-search:focus-within { border-color:var(--accent); }
#trackerPanel .tracker-toolbar .rec-search input { flex:1 1 auto; min-width:0; height:100%; padding:0; border:0; outline:0; background:none; box-shadow:none; color:var(--ink); font:600 0.875rem var(--font-body); }

/* The table: one ruled card, a header strip, week bands and compact rows. */
#trackerPanel .tracker-scroll { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:none; overflow:hidden; }
#trackerPanel .tracker-scroll[hidden] { display:none; }
#trackerPanel .tracker-table { min-width:0; border-collapse:collapse; border-spacing:0; font-size:0.875rem; }
#trackerPanel .tracker-table thead th { height:2.375rem; padding:0 0.75rem; border-bottom:2px solid var(--line); color:var(--muted); font:700 0.6875rem var(--font-mono); letter-spacing:0.1em; }
#trackerPanel .tracker-table thead th:first-child { width:auto; padding-left:3.25rem; }
#trackerPanel .tracker-table thead th:is(:nth-child(3),:nth-child(4),:nth-child(5)) { text-align:left; }
#trackerPanel .tracker-table [data-tracker-sort] { font:inherit; letter-spacing:inherit; }
#trackerPanel .tracker-table .tracker-row { --result-bg:#241d31; --result-accent:var(--line); }
#trackerPanel .tracker-table .tracker-row[data-result=won] { --result-bg:#1c2b2c; --result-accent:var(--green); }
#trackerPanel .tracker-table .tracker-row[data-result=lost] { --result-bg:#2d1f2e; --result-accent:#ff7a7a; }
#trackerPanel .tracker-table .tracker-row[data-result=pending] { --result-bg:#2a2230; --result-accent:var(--accent); }
#trackerPanel .tracker-table .tracker-row[data-result=review] { --result-bg:#2d2629; --result-accent:var(--gold); }
#trackerPanel .tracker-table .tracker-row>* { height:2.75rem; padding:0.375rem 0.75rem; background:var(--surface); border:0; border-bottom:1px solid var(--surface-raised); border-radius:0; }
#trackerPanel .tracker-table .tracker-row:hover>:not([class^=tracker-result-]) { background:#262033; }
#trackerPanel .tracker-table .tracker-row>th { padding-left:3rem; border-radius:0; }
#trackerPanel .tracker-table .tracker-manage { border-right:0; }
#trackerPanel .tracker-table .tracker-bet .bet-star { left:0.625rem; }
#trackerPanel .tracker-bet { display:table-cell; }
#trackerPanel .tracker-bet>strong { display:inline; margin-right:0.625rem; font-size:0.9375rem; font-weight:800; white-space:nowrap; }
body[data-layout] #trackerPanel .tracker-bet .profile-name-button { padding:0; border:0; background:none; color:inherit; font:inherit; }
body[data-layout] #trackerPanel .tracker-bet .profile-name-button:hover { color:var(--accent); }
#trackerPanel .tracker-prop { display:inline; margin:0; color:var(--muted); font-size:0.8125rem; }
#trackerPanel .tracker-table .tracker-matchup { display:inline; margin:0; color:var(--muted); font-size:0.8125rem; font-weight:400; }
#trackerPanel .tracker-table .tracker-matchup::before { content:"\00a0· "; }
#trackerPanel .tracker-table .tracker-box-link { font:inherit; font-size:0.8125rem; cursor:pointer; }
#trackerPanel .tracker-moved { display:inline-block; margin-left:0.5rem; padding:0 0.5rem; border-radius:var(--r-card); background:var(--gold); color:var(--accent-ink); border:1px solid var(--line); font:800 0.6875rem/1.35 var(--font-body); white-space:nowrap; vertical-align:1px; }
#trackerPanel .tracker-table .tracker-added { color:var(--muted); font:400 0.75rem var(--font-body); white-space:nowrap; }
#trackerPanel .tracker-table .tracker-added small { margin:0; }
#trackerPanel .tracker-table .tracker-line { min-width:0; text-align:left; }
#trackerPanel .tracker-line-value { height:1.875rem; display:inline-flex; align-items:center; gap:0.4375rem; padding:0 0.625rem; background:var(--surface-raised); border:1px solid var(--line); border-radius:var(--r-card); font:700 0.8125rem var(--font-mono); white-space:nowrap; }
#trackerPanel .tracker-line-value .tracker-side { color:var(--ink); font:inherit; letter-spacing:0; text-transform:none; }
#trackerPanel .tracker-line-value .tracker-number { display:inline; font:inherit; letter-spacing:0; }
#trackerPanel .tracker-line-value .tracker-price { color:var(--muted); }
#trackerPanel .tracker-table .tracker-score { min-width:0; text-align:left; }
#trackerPanel .tracker-table .tracker-score .tracker-number { display:inline; font:700 0.875rem var(--font-mono); }
#trackerPanel .tracker-table .tracker-score small { display:inline; margin-left:0.375rem; }
#trackerPanel .tracker-table .tracker-actual { min-width:0; text-align:left; }
#trackerPanel .tracker-table .tracker-actual .tracker-number { display:inline; font:700 0.875rem var(--font-mono); color:var(--ink); }
#trackerPanel .tracker-table .tracker-row[data-result=lost]>.tracker-actual .tracker-number { color:#ff9c9c; }
#trackerPanel .tracker-table .tracker-row[data-result=won]>.tracker-actual .tracker-number { color:var(--green); }
#trackerPanel .tracker-table .tracker-row:is([data-result=pending],[data-result=review])>.tracker-actual .tracker-number { color:var(--muted); }
#trackerPanel .tracker-table td small { margin-top:0.125rem; font-size:0.6875rem; }
#trackerPanel .tracker-table .tracker-row>td[class^=tracker-result-] { min-width:0; background:var(--result-bg); color:var(--ink); }
#trackerPanel .tracker-table .tracker-row>td[class^=tracker-result-] small { color:var(--muted); opacity:1; white-space:nowrap; }
#trackerPanel .tracker-result-badge { display:inline-flex; padding:0.1875rem 0.625rem; border-radius:var(--r-data); border:2px solid var(--line); background:var(--surface-raised); color:var(--ink); font:800 0.75rem var(--font-body); }
#trackerPanel .tracker-result-badge::before { display:none; }
#trackerPanel .tracker-result-won .tracker-result-badge { background:var(--green); color:var(--accent-ink); border-color:var(--edge); }
#trackerPanel .tracker-result-lost .tracker-result-badge { background:var(--line); color:var(--ink); border-color:var(--line); }
#trackerPanel .tracker-result-pending .tracker-result-badge { background:var(--bg); color:var(--accent); border-color:var(--accent); }
#trackerPanel .tracker-result-review .tracker-result-badge { background:var(--bg); color:var(--gold); border-color:var(--gold); }
#trackerPanel .tracker-result-push .tracker-result-badge { background:transparent; color:var(--ink); border-color:var(--ink); }
#trackerPanel .tracker-table td[class^=tracker-net-] { font:700 0.875rem var(--font-mono); }
body[data-layout] #trackerPanel .tracker-table .tracker-net-positive { color:var(--green); }
body[data-layout] #trackerPanel .tracker-table .tracker-net-negative { color:#ff8f8f; }
#trackerPanel .tracker-table .tracker-net-neutral { color:var(--muted); }
#trackerPanel .tracker-table td[class^=tracker-net-] small { font-family:var(--font-body); }
#trackerPanel .tracker-stake label { width:5.5rem; height:2rem; border:1px solid var(--line); border-radius:var(--r-data); background:var(--bg); }
#trackerPanel .tracker-stake input[name=stake] { font-family:var(--font-mono); }
#trackerPanel .tracker-manage-bar { align-items:center; }
#trackerPanel .tracker-manage-bar .tracker-icon-button { width:2rem; height:2rem; background:var(--surface-raised); border:1px solid var(--line); border-radius:var(--r-control); box-shadow:none; color:var(--ink); }
#trackerPanel .tracker-manage-bar .tracker-remove-locked { background:none; border:2px dashed var(--line); box-shadow:none; color:var(--muted); }

/* Week bands: collapsible, record and units, and a link to the drawer when picks are live. */
#trackerPanel .tracker-table .tracker-week-row>th { height:2.5rem; padding:0 1rem; background:var(--bg); border:0; border-bottom:1px solid var(--surface-raised); }
#trackerPanel .tracker-table tbody .tracker-week-row:first-child>th { padding-top:0; }
#trackerPanel .tracker-week-toggle { display:inline-flex; align-items:center; gap:0.75rem; min-height:2.25rem; padding:0 0.25rem; border:0; border-radius:var(--r-control); background:none; color:var(--ink); cursor:pointer; vertical-align:middle; }
#trackerPanel .tracker-week-toggle[aria-expanded=false] .tracker-week-chevron { transform:rotate(-90deg); }
#trackerPanel .tracker-week-chevron { color:var(--muted); transition:transform 120ms ease; }
#trackerPanel .tracker-week-title { font:800 1rem var(--font-display); letter-spacing:-0.01em; color:var(--ink); }
#trackerPanel .tracker-week-stats { gap:0.75rem; margin-left:0.75rem; color:var(--muted); font:700 0.8125rem var(--font-mono); vertical-align:middle; }
#trackerPanel .tracker-week-stats b.tracker-cash-positive { color:var(--green); }
#trackerPanel .tracker-week-stats b.tracker-cash-negative { color:#ff8f8f; }
#trackerPanel .tracker-week-risk { color:var(--accent); }
#trackerPanel .tracker-week-review { color:var(--thin); }
#trackerPanel .tracker-week-count { margin-left:0.75rem; font-size:0.75rem; vertical-align:middle; }
#trackerPanel .tracker-week-link { float:right; min-height:2.25rem; padding:0; border:0; background:none; color:var(--muted); font-size:0.8125rem; font-weight:700; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
#trackerPanel .tracker-week-link:hover { color:var(--accent); }
#trackerPanel :is(.tracker-week-toggle, .tracker-week-link, .rec-view, .bet-star):focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
@media (prefers-reduced-motion: reduce) { #trackerPanel .tracker-week-chevron { transition:none; } }

@media (max-width:75em) {
  #trackerPanel .rec-top { grid-template-columns:minmax(0, 1fr); }
  #trackerPanel:not([hidden]) { grid-template-columns:minmax(0, 1fr); }
  #trackerPanel .tracker-filters-row, #trackerPanel .tracker-toolbar { grid-column:1 / -1; }
  body[data-layout] #trackerPanel .tracker-toolbar { justify-content:flex-start; }
}
/* Narrow screens keep the stacked card rows from players.css, restyled. */
@media (max-width:68.75em) {
  #trackerPanel .tracker-scroll { background:none; border:0; box-shadow:none; overflow:visible; }
  #trackerPanel .tracker-table .tracker-row { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-control); overflow:hidden; }
  #trackerPanel .tracker-table .tracker-row>* { height:auto; padding:0.5rem 0.75rem; border-bottom:0; }
  #trackerPanel .tracker-table .tracker-row>th { padding-left:3rem; border-left:0; }
  #trackerPanel .tracker-table .tracker-row>.tracker-added { padding-left:0.75rem; }
  #trackerPanel .tracker-table .tracker-week-row>th { display:block; height:auto; padding:0.5rem 0.25rem 0; background:none; border:0; }
  #trackerPanel .tracker-bet>strong { white-space:normal; }
}
@media (max-width:40em) {
  body[data-layout] #trackerPanel .tracker-header { grid-template-columns:minmax(0, 1fr); grid-template-areas:"head" "views" "note" "actions"; gap:0.625rem; }
  #trackerPanel .rec-views { margin-left:0; }
  #trackerPanel .rec-note { text-align:left; }
  #trackerPanel .rec-actions { justify-content:space-between; }
  /* A long line (a spread, a TD scorer) wraps inside its chip instead of running past the card. */
  #trackerPanel .tracker-line-value { max-width:100%; height:auto; min-height:1.875rem; flex-wrap:wrap; white-space:normal; padding-block:0.25rem; }
  body[data-active-view=tracker] #trackerPanel #trackerTitle { font-size:1.75rem; }
  #trackerPanel .rec-hero { padding:1rem; }
  #trackerPanel .rec-cal { padding:0.75rem 0.625rem; }
  #trackerPanel .rec-cal-weekdays, #trackerPanel .rec-cal-grid { gap:0.25rem; }
  #trackerPanel .rec-cal-cell { min-height:2.75rem; padding:0.25rem; grid-template-columns:1fr; }
  #trackerPanel .rec-cal-rec { display:none; }
  #trackerPanel :is(.rec-cal-net, .rec-cal-open) { justify-self:start; font-size:0.5625rem; letter-spacing:-0.04em; }
  #trackerPanel .rec-cal-summary { margin-left:0; flex-basis:100%; }
  #trackerPanel :is(.rec-roi, .rec-empty) { padding:1rem; }
  body[data-layout] #trackerPanel .tracker-toolbar .rec-search { width:100%; }
  body[data-layout] #trackerPanel .tracker-toolbar>label:not(.rec-search) { flex:1 1 8rem; }
  #trackerPanel .tracker-toolbar select { width:100%; }
  #trackerPanel .tracker-table .tracker-row>.tracker-added { padding-left:3rem; }
  #trackerPanel .tracker-week-link { float:none; display:block; min-height:1.75rem; }
}
/* Very narrow for its text (320 or 390px with 200% text, UI-324): the units headline wraps,
   the calendar's month title takes its own row, weekdays drop to one letter and day cells keep
   their number and colour (the figure is in each day's label and its picks). The query is in
   em, so 100% text never reaches it. */
#trackerPanel .rec-top { container:rec-top / inline-size; }
@container rec-top (max-width:14em) {
  #trackerPanel .rec-hero { padding:0.75rem 0.5rem; }
  #trackerPanel .rec-units { white-space:normal; }
  #trackerPanel .rec-cal { grid-template-columns:minmax(0, 1fr); padding:0.5rem 0.25rem; }
  #trackerPanel .rec-cal-head h4 { order:-1; flex:1 1 100%; min-width:0; text-align:left; }
  #trackerPanel .rec-cal-weekdays, #trackerPanel .rec-cal-grid { gap:0.125rem; }
  #trackerPanel .rec-cal-weekdays span { padding:0; font-size:0; text-align:center; }
  #trackerPanel .rec-cal-weekdays span::first-letter { font-size:0.6875rem; }
  #trackerPanel .rec-cal-cell { min-height:1.75rem; padding:0.125rem 0; justify-items:center; }
  #trackerPanel :is(.rec-cal-net, .rec-cal-open) { display:none; }
}
/* The pick cards below it, at the same text size: one column, so no card is wider than the page. */
#trackerPanel .tracker-scroll { container:rec-list / inline-size; }
@container rec-list (max-width:14em) {
  #trackerPanel .tracker-table tbody { grid-template-columns:minmax(0, 1fr); }
  #trackerPanel .tracker-table .tracker-row { grid-template-columns:minmax(0, 1fr); }
  #trackerPanel .tracker-week-stats { display:flex; flex-wrap:wrap; gap:0 0.75rem; margin-left:0; }
  #trackerPanel .tracker-week-stats>* { white-space:nowrap; }
}

/* Compact tools: the selects keep their accessible label text, drawn visually hidden. */
@media (min-width:75.0625em) {
  body[data-layout] #trackerPanel .tracker-toolbar>label:not(.rec-search) { font-size:0; gap:0; }
  #trackerPanel .tracker-toolbar>label:not(.rec-search) select { font-size:0.8125rem; }
  body[data-layout] #trackerPanel .tracker-toolbar .rec-search { width:13.75rem; }
  #trackerPanel .tracker-table :is(.tracker-score, .tracker-actual) small { white-space:nowrap; }
  #trackerPanel .tracker-table .tracker-actual small { max-width:11rem; overflow:hidden; text-overflow:ellipsis; }
  #trackerPanel .tracker-table thead th:nth-child(7) { text-align:right; }
}

/* Rows tinted by result; the badge's colour and word carry it, no check or cross (UI-456). Losses explain themselves. */
#trackerPanel .tracker-table .tracker-row { --result-bg:var(--surface); --row-bg:var(--surface); }
#trackerPanel .tracker-table .tracker-row[data-result=won] { --result-bg:#1f4a39; --row-bg:#1a3129; }
#trackerPanel .tracker-table .tracker-row[data-result=lost] { --result-bg:#5a2a38; --row-bg:#34202b; }
#trackerPanel .tracker-table .tracker-row:is([data-result=push],[data-result=void]) { --result-accent:var(--thin); --result-bg:#4a4128; --row-bg:#2e2a22; }
#trackerPanel .tracker-table .tracker-row>* { background:var(--row-bg); }
#trackerPanel .tracker-table .tracker-row:hover>:not([class^=tracker-result-]) { background:var(--row-bg); }
#trackerPanel .tracker-result-won .tracker-result-badge { background:var(--good); color:var(--accent-ink); border-color:var(--edge); }
#trackerPanel .tracker-result-lost .tracker-result-badge { background:var(--bad); color:var(--accent-ink); border-color:var(--edge); }
#trackerPanel :is(.tracker-result-push, .tracker-result-void) .tracker-result-badge { background:transparent; color:var(--thin); border-color:var(--thin); }
body[data-layout] #trackerPanel .tracker-table .tracker-net-negative { color:var(--bad); }
#trackerPanel .tracker-table .tracker-row[data-result=lost]>.tracker-actual .tracker-number { color:var(--bad); }
#trackerPanel .tracker-table .tracker-row[data-result=won]>.tracker-actual .tracker-number { color:var(--good); }
#trackerPanel .tracker-moved { background:var(--bg); color:var(--muted); border-color:var(--line); }
#trackerPanel .tracker-moved.tone-good { color:var(--good); border-color:var(--good); }
#trackerPanel .tracker-moved.tone-bad { color:var(--bad); border-color:var(--bad); }
#trackerPanel .tracker-table .tracker-why-row>td { padding:0.125rem 1rem 0.875rem 3rem; background:#34202b; border:0; border-bottom:1px solid var(--surface-raised); }
#trackerPanel .rec-why { display:flex; align-items:center; gap:1rem; }
#trackerPanel .rec-why p { flex:1 1 auto; margin:0; color:var(--ink); font-size:0.8125rem; line-height:1.5; max-width:62rem; }
#trackerPanel .rec-why p b { color:var(--bad); }
#trackerPanel .rec-why .rec-why-link { display:inline; padding:0; border:0; background:none; color:var(--ink); font:700 0.8125rem var(--font-body); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
#trackerPanel .rec-why .rec-why-link:hover { color:var(--accent); }
#trackerPanel .rec-why-chart { flex:0 0 auto; padding:0.375rem 0.5rem; border-radius:var(--r-card); background:var(--bg); }
@media (max-width:68.75em) {
  #trackerPanel .tracker-table .tracker-why-row { display:block; margin-top:-0.625rem; }
  #trackerPanel .tracker-table .tracker-why-row>td { display:block; padding:0.625rem 0.75rem; border:1px solid var(--line); border-top:0; border-radius:0 0 var(--r-control) var(--r-control); }
  #trackerPanel .rec-why { flex-wrap:wrap; }
}
html body.players-page #betslipDrawer #betslipItems .betslip-item[data-pick-key]:hover { border-color:var(--edge); }

/* An entered stake's dollars carry a small "stake" tag (the title says which stake). */
#trackerPanel .tracker-stake-tag { display:inline-block; margin-left:0.3125rem; padding:0 0.3125rem; border:1px solid currentColor; border-radius:var(--r-data); font:700 0.625rem/1.5 var(--font-body); letter-spacing:0.02em; text-transform:uppercase; opacity:0.8; vertical-align:1px; }
/* "Clear my result" under a result you set by hand (back to automatic grading), and "Undo" under
   a corrected one: quiet bordered buttons like "Change result" below, on their own line (UI-526). */
#trackerPanel .tracker-clear-result { display:flex; align-items:center; width:fit-content; min-height:1.75rem; margin:0.25rem 0 0; padding:0 0.5rem; border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface); color:var(--muted); font:700 0.6875rem var(--font-body); text-decoration:none; white-space:nowrap; cursor:pointer; }
#trackerPanel .tracker-clear-result:hover:not(:disabled) { border-color:var(--muted); color:var(--ink); }
#trackerPanel .tracker-clear-result:disabled { opacity:0.55; cursor:default; }
#trackerPanel .tracker-clear-result:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
/* Change a stats grade (UI-250, UI-525): a quiet "Change result" button under the result opens a
   small popover anchored to it (fixed, placed by placeCorrect in studio-betslip.js), like the Teams
   nav menu: 8px box, 1px rule, no shadow. Lost / Push / Void apply at once; × closes. */
#trackerPanel .rec-correct-toggle { display:inline-flex; align-items:center; gap:0.3125rem; min-height:1.75rem; margin:0.25rem 0 0; padding:0 0.5rem; border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface); color:var(--muted); font:700 0.6875rem var(--font-body); white-space:nowrap; cursor:pointer; }
#trackerPanel .rec-correct-toggle:hover:not(:disabled) { border-color:var(--muted); color:var(--ink); }
#trackerPanel .rec-correct-toggle[aria-expanded=true] { background:var(--selected-bg); border-color:var(--accent); color:var(--ink); }
#trackerPanel .rec-correct-toggle:disabled { opacity:0.55; cursor:default; }
#trackerPanel .rec-correct-toggle svg { flex:none; }
#trackerPanel .rec-correct { position:fixed; z-index:60; top:0; left:0; display:grid; gap:0.5rem; width:min(17rem, calc(100vw - 2rem)); box-sizing:border-box; margin:0; padding:0.625rem 0.75rem 0.75rem; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); box-shadow:none; color:var(--ink); text-align:left; white-space:normal; }
#trackerPanel .rec-correct-head { display:flex; align-items:center; justify-content:space-between; gap:0.5rem; }
#trackerPanel .rec-correct-title { margin:0; color:var(--ink); font:800 0.8125rem var(--font-body); }
#trackerPanel .rec-correct-close { display:grid; place-items:center; width:2rem; height:2rem; margin:-0.25rem -0.375rem -0.25rem 0; padding:0; border:0; border-radius:var(--r-control); background:none; color:var(--muted); font:400 1.25rem/1 var(--font-body); cursor:pointer; }
#trackerPanel .rec-correct-close:hover { background:var(--surface-raised); color:var(--ink); }
#trackerPanel .rec-correct-note { margin:0; color:var(--muted); font-size:0.75rem; line-height:1.45; }
#trackerPanel .rec-correct-choices { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0.375rem; }
#trackerPanel .rec-correct-choice { min-width:0; height:2.5rem; margin:0; padding:0 0.25rem; border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface-raised); color:var(--ink); font:800 0.8125rem var(--font-body); cursor:pointer; }
#trackerPanel .rec-correct-choice:not(:disabled):hover { background:var(--selected-bg); border-color:var(--accent); }
#trackerPanel .rec-correct-choice:disabled { opacity:0.55; cursor:default; }
#trackerPanel :is(.rec-correct-toggle, .rec-correct-close, .rec-correct-choice):focus-visible { outline:3px solid var(--accent); outline-offset:2px; }

/* Phones: every control in My Picks and the record gets a hit area of 44px or so, and the
   "1u = $" label is at least 12px. Text links grow an invisible hit area, not their text. */
@media (max-width:40em) {
  #trackerPanel .tracker-week-link { position:relative; }
  #trackerPanel .tracker-week-link::after { content:""; position:absolute; inset:50% -0.5rem auto; height:2.75rem; translate:0 -50%; }
  #trackerPanel .tracker-week-link { min-height:2.5rem; }
  #trackerPanel .rec-unit-size { font-size:0.8125rem; align-items:center; }
  #trackerPanel .rec-unit-size input { width:5rem; min-height:2.5rem; padding:0 0.5rem; font-size:0.875rem; }
  #trackerPanel .rec-cal-nav { width:2.5rem; height:2.5rem; }
  #trackerPanel .tracker-stake label { height:2.5rem; }
  #trackerPanel .tracker-manage-bar .tracker-icon-button { width:2.5rem; height:2.5rem; }
  #trackerPanel .tracker-table .tracker-bet .bet-star::after { content:""; position:absolute; inset:-0.5rem -0.375rem; }
  #trackerPanel .tracker-clear-result { min-height:2.5rem; padding:0 0.625rem; }
  #trackerPanel .rec-correct-toggle { min-height:2.5rem; padding:0 0.625rem; }
  #trackerPanel .rec-correct-close { width:2.5rem; height:2.5rem; margin:-0.5rem -0.5rem -0.5rem 0; }
  html body.players-page #betslipDrawer .slip-expand { width:2.5rem; height:2.5rem; }
  html body.players-page #betslipDrawer .slip-stake-field { height:2.5rem; }
  html body.players-page #betslipDrawer .slip-final-undo { min-height:2.5rem; padding:0 0.625rem; }
  /* At a large text size the title and the Active picks / Record switch wrap, not widen the page. */
  body[data-layout] #trackerPanel .tracker-header>.section-heading { flex-shrink:1; min-width:0; max-width:100%; }
  #trackerPanel .rec-views { max-width:100%; flex-wrap:wrap; border-radius:var(--r-control); }
}

/* A headshot beside each player pick (UI-161): My Picks rows, the Final list and the
   record. Small and round; initials show until the photo loads (players.css
   fades it in on .has-photo). */
:is(#betslipDrawer, #trackerPanel) .pick-avatar { position:relative; z-index:2; flex:0 0 auto; width:2rem; height:2rem; margin:0; padding:0; border:0; border-radius:var(--r-control); background:none; cursor:pointer; }
html body :is(#betslipDrawer, #trackerPanel) .pick-avatar .player-avatar { position:relative; display:grid; place-items:center; width:100%; height:100%; overflow:hidden; box-sizing:border-box;
  border:2px solid var(--line); border-radius:var(--r-control); background:var(--surface); color:var(--muted); font:800 0.625rem/1 var(--font-mono); letter-spacing:0; }
html body :is(#betslipDrawer, #trackerPanel) .pick-avatar .player-headshot { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; }
:is(#betslipDrawer, #trackerPanel) .pick-avatar:hover .player-avatar { border-color:var(--accent); }
#betslipDrawer .slip-final-item:has(> .pick-avatar) { grid-template-columns:auto auto minmax(0, 1fr) auto; }
#trackerPanel .tracker-bet .pick-avatar { display:inline-block; width:1.75rem; height:1.75rem; margin:-0.25rem 0.5rem -0.25rem 0; vertical-align:middle; }
/* Saved selection evidence and flat-unit record views. */
.slip-score-snapshot, .slip-cash-totals { color:var(--muted); font-size:0.75rem; line-height:1.5; }
.slip-cash-totals { padding:0.75rem 1rem; border-top:1px solid var(--line); }
#trackerPanel .rec-analysis { grid-column:1 / -1; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1.25rem; margin-bottom:1.25rem; }
.rec-breakdowns, .rec-history { padding:1rem; border:1px solid var(--line); border-radius:var(--r-card); min-width:0; }
@media (max-width:74.99em) { #trackerPanel .rec-analysis { grid-template-columns:minmax(0, 1fr); } }
.rec-breakdowns h3, .rec-history h3 { margin:0 0 0.75rem; }
.rec-breakdowns p, .rec-history p { color:var(--muted); font-size:0.8125rem; line-height:1.5; }
.rec-table-scroll { max-width:100%; overflow:auto; }
.rec-table-scroll table { width:100%; border-collapse:collapse; font-size:0.8125rem; font-variant-numeric:tabular-nums; }
.rec-table-scroll th, .rec-table-scroll td { padding:0.625rem; border-bottom:1px solid var(--line); text-align:right; white-space:nowrap; }
.rec-table-scroll th:first-child { text-align:left; }
/* Cumulative units chart (UI-280): unit labels left, week ticks below, a stretched SVG for the
   gridlines and line, HTML dots so they stay round. Positions come from data-kit-chart-x/y (%). */
.rec-history-figure { margin:1rem 0; min-width:0; }
.rec-history .rec-history-unit { margin:0 0 0.75rem; font-size:0.75rem; }
.rec-history-plot { display:grid; grid-template-columns:auto minmax(0, 1fr); grid-template-rows:9rem auto; column-gap:0.5rem; padding-right:0.75rem; }
.rec-history-y { position:relative; grid-row:1; grid-column:1; width:calc((var(--n, 4) + 1) * 1ch); color:var(--muted); font:0.6875rem/1 var(--font-mono); font-variant-numeric:tabular-nums; text-align:right; }
.rec-history-y span { position:absolute; right:0; transform:translateY(-50%); line-height:1; white-space:nowrap; }
.rec-history-y .is-zero { color:var(--ink); font-weight:700; }
.rec-history-box { position:relative; grid-row:1; grid-column:2; min-width:0; }
.rec-history-chart { display:block; width:100%; height:100%; overflow:visible; }
.rec-history-chart path { fill:none; vector-effect:non-scaling-stroke; }
.rec-history-chart .rec-history-grid { stroke:var(--line); stroke-width:1; stroke-dasharray:3 3; }
.rec-history-chart .rec-history-grid.is-zero { stroke:var(--muted); stroke-dasharray:none; }
.rec-history-chart .rec-history-line { stroke:var(--accent); stroke-width:2; stroke-linejoin:round; }
.rec-history-dots { position:absolute; inset:0; pointer-events:none; }
.rec-history-dot { position:absolute; width:0.5rem; height:0.5rem; transform:translate(-50%, -50%); border:2px solid var(--surface); border-radius:50%; background:var(--muted); box-sizing:content-box; }
.rec-history-dot.is-up { background:var(--good); }
.rec-history-dot.is-down { background:var(--bad); }
.rec-history-x { position:relative; grid-row:2; grid-column:2; min-height:1.75rem; color:var(--muted); font:0.6875rem/1.2 var(--font-mono); white-space:nowrap; container-type:inline-size; }
.rec-history-x span { position:absolute; top:0; padding-top:0.5rem; transform:translateX(-50%); }
.rec-history-x b { font-weight:400; }
/* Week labels thin with the room they have (em here follows the axis text, so 200% text thins too):
   alternate labels go first, then everything between Start and the latest week. Ticks stay. */
@container (max-width:36em) { .rec-history-x .is-minor b { display:none; } }
@container (max-width:20em) { .rec-history-x span:not(.is-start, .is-end) b { display:none; } }
.rec-history-x span::before { content:""; position:absolute; top:0; left:50%; height:0.3125rem; border-left:1px solid var(--muted); }
.rec-history-x .is-start { transform:none; }
.rec-history-x .is-start::before { left:0; }
.rec-history-x .is-end:not(.is-start) { transform:translateX(-100%); }
.rec-history-x .is-end:not(.is-start)::before { left:auto; right:0; }
.rec-history .rec-history-figure figcaption { margin-top:0.25rem; color:var(--muted); font-size:0.75rem; line-height:1.5; }
.tracker-published-score { color:var(--muted); }
#trackerPanel .tracker-table .tracker-score > small { display:block; margin-left:0; }
#trackerPanel .tracker-toolbar { flex-wrap:wrap; }