/* Props (?view=percentage): board PS-03. Title with the week's verdict counts and one
   early-season note; two filters (Position, Side) with the rest under "More filters";
   then verdict tiers (Strong, Lean, Everything else) of row cards. Each row opens its Why
   layer in place. The list sizes itself to its own width (container queries), so it
   works with or without a docked My Picks panel beside it. */
#percentagePanel { min-width:0; }
body[data-active-view=percentage] .page-heading { display:none; }
.percentage-mono { font-family:var(--font-mono); font-weight:700; }
#percentagePanel .tone-good { color:var(--good); }
#percentagePanel .tone-bad { color:var(--bad); }
#percentagePanel .tone-thin { color:var(--thin); }
#percentagePanel .tone-muted { color:var(--muted); }

/* NBA: the Slate's day strip (slate.css .day-strip) above the heading, as on the Slate. It
   holds the calendar's popover. */
.percentage-day-strip { position:relative; min-width:0; margin-bottom:1.125rem; }
/* Out to the Slate's strip spot (main padding 0, then .slate-top's 0.75rem); the heading stays put. */
body[data-layout] .percentage-day-strip { --strip-up:calc(var(--main-pad-top, 0.75rem) - 0.75rem); --strip-out:calc(var(--main-pad-x, 0px) - var(--slate-pad-x, 0px));
  margin:calc(0px - var(--strip-up)) calc(0px - var(--strip-out)) calc(1.125rem + var(--strip-up)); }

/* Heading: title, then "8 Strong, 14 Lean this week." and the early-season note. */
.percentage-heading { display:flex; flex-direction:column; gap:0.5rem; margin-bottom:1.125rem; }
.percentage-heading h2 { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin:0; font:900 2.5rem/1 var(--font-display); letter-spacing:0; }
.percentage-heading h2 .percentage-week-label { font-size:0.6em; }
.percentage-summary { display:flex; flex-wrap:wrap; align-items:baseline; gap:0.25rem 0.375rem; margin:0; color:var(--muted); font-size:0.9375rem; line-height:1.45; }
/* One caveat line under the heading (UI-204): plain text, no marker. */
.percentage-summary .percentage-early-dot { display:none; }
.percentage-summary b { font-weight:700; }
.percentage-early { display:inline-flex; align-items:center; gap:0.375rem; color:var(--muted); }
.percentage-early[hidden] { display:none; }
.percentage-early-dot { flex:none; width:0.625rem; height:0.625rem; border:2px solid var(--thin); border-radius:50%; }
/* UI-95: "Scores updated 12 min ago" after the counts; with no scores, a notice heads the
   list and says what it is sorted by instead. */
.percentage-scores-age { color:var(--muted); font-size:0.8125rem; }
.percentage-scores-age[hidden] { display:none; }
.percentage-scores-missing { display:flex; align-items:baseline; gap:0.5rem; margin:0; padding:0.75rem 1rem; border:2px dashed var(--thin); border-radius:var(--r-card); color:var(--ink); font-size:0.9375rem; line-height:1.45; }
.percentage-scores-missing .percentage-early-dot { position:relative; top:0.0625rem; }

/* Filters: Position chips and the Side segment, then "More filters". */
#percentagePanel .percentage-filters { border:0; border-radius:0; box-shadow:none; background:none; }
.percentage-filters { display:flex; flex-wrap:wrap; align-items:center; gap:0.75rem 1.25rem; margin-bottom:1.125rem; }
/* Wraps so large text (200% at 390) drops the Over/Under/Both segment under its label. */
.percentage-filter { position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:0.375rem; min-width:0; }
.percentage-filter-label { padding-right:0.25rem; color:var(--muted); font-size:0.8125rem; font-weight:700; white-space:nowrap; }
/* The selects behind the chips stay the source of truth, out of sight and out of tab order. */
.percentage-source { position:absolute; left:0; bottom:0; width:1px; height:1px; opacity:0; pointer-events:none; }
.percentage-chips { display:flex; flex-wrap:wrap; gap:0.375rem; }
.percentage-chips button { height:2.125rem; padding:0 0.75rem; background:transparent; color:var(--muted); border:2px solid var(--line); border-radius:var(--r-control); font:700 0.8125rem var(--font-body); cursor:pointer;
  transition:background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.percentage-chips button:hover { color:var(--ink); }
.percentage-chips button[aria-pressed=true] { padding:0 0.875rem; background:var(--selected-bg); color:var(--ink); border-color:var(--accent); font-weight:800; }
.percentage-seg { display:inline-flex; flex-wrap:wrap; max-width:100%; padding:2px; border:2px solid var(--line); border-radius:var(--r-control); }
.percentage-seg button { height:1.75rem; padding:0 0.75rem; background:transparent; color:var(--muted); border:0; border-radius:var(--r-control); font:700 0.8125rem var(--font-body); cursor:pointer; white-space:nowrap;
  transition:background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.percentage-seg button:hover { color:var(--ink); }
.percentage-seg button[aria-pressed=true] { background:var(--selected-bg); color:var(--ink); box-shadow:inset 0 0 0 1px var(--accent); font-weight:800; }
:is(.percentage-chips, .percentage-seg) button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.percentage-more-toggle { display:inline-flex; align-items:center; gap:0.5rem; height:2.125rem; padding:0 0.75rem; background:var(--surface); color:var(--ink); border:2px solid var(--line); border-radius:var(--r-control); font:700 0.8125rem var(--font-body); cursor:pointer; }
.percentage-more-toggle svg { color:var(--muted); transition:transform var(--dur-base) var(--ease-out); }
.percentage-more-toggle[aria-expanded=true] svg { transform:rotate(180deg); }
.percentage-more-count { min-width:1.25rem; height:1.25rem; padding:0 0.3rem; border-radius:var(--r-control); background:var(--accent); color:var(--accent-ink); font:700 0.6875rem/1.25rem var(--font-mono); text-align:center; }
.percentage-more-count[hidden] { display:none; }
.percentage-more { display:flex; flex-wrap:wrap; align-items:center; gap:0.75rem 1.25rem; margin:-0.375rem 0 1.25rem; padding:0.875rem 1rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-control); animation:ar-rise var(--dur-base) var(--ease-out); }
.percentage-more[hidden] { display:none; }
#percentagePanel .percentage-more :is(select, input) { height:2.125rem; min-height:0; padding:0 0.625rem; background-color:var(--bg); border:2px solid var(--line); border-radius:var(--r-control); box-shadow:none; color:var(--ink); font:700 0.8125rem var(--font-body); }
#percentagePanel .percentage-more select { padding-right:1.75rem; }
#percentagePanel #percentageMinimum { font-family:var(--font-mono); }
#percentagePanel #percentageMarket { width:auto; max-width:14rem; }
.percentage-more .percentage-search { flex:1 1 11rem; max-width:20rem; }
.percentage-more .percentage-search input { width:100%; min-width:0; }
.percentage-season { color:var(--muted); font:700 0.75rem var(--font-mono); white-space:nowrap; }
.percentage-reset { margin-left:auto; padding:0.25rem 0; border:0; background:none; color:var(--accent); font:800 0.8125rem var(--font-body); cursor:pointer; }
.percentage-reset:hover { text-decoration:underline; text-underline-offset:0.1875rem; }
/* UI-121: Download CSV sits before Reset filters, which follows it without its own push. */
.percentage-export + .percentage-reset { margin-left:0; }
/* Visible match count by the filters, and the jump back to the list (UI-229). With More
   filters open it sticks to the bottom of the screen until the list scrolls into view. */
.percentage-match { display:flex; align-items:center; gap:0.75rem; margin:-0.5rem 0 1rem; color:var(--muted); font:700 0.8125rem var(--font-body); }
.percentage-match[hidden], .percentage-match [hidden] { display:none; }
.percentage-match.is-empty .percentage-match-count { color:var(--ink); }
.percentage-match.is-open { position:sticky; bottom:calc(0.75rem + env(safe-area-inset-bottom, 0px)); z-index:20; width:fit-content; max-width:calc(100% - 3.75rem); }
.percentage-match.is-open.is-empty { padding:0.5rem 0.875rem; background:var(--surface-raised); border:2px solid var(--line); border-radius:var(--r-control); box-shadow:0 0.5rem 1.5rem #0006; }
/* A focused filter scrolls clear of the stuck bar rather than under it. */
html:has(#percentagePanel:not([hidden]) .percentage-match.is-open:not([hidden])) { scroll-padding-bottom:calc(4.5rem + env(safe-area-inset-bottom, 0px)); }
.percentage-jump { display:inline-flex; align-items:center; gap:0.5rem; height:2.5rem; padding:0 1rem; background:var(--accent); color:var(--accent-ink); border:2px solid var(--accent); border-radius:var(--r-control); box-shadow:0 0.5rem 1.5rem #0006; font:800 0.875rem var(--font-body); cursor:pointer; }
.percentage-jump:focus-visible { outline:3px solid var(--ink); outline-offset:2px; }
.percentage-export:disabled { color:var(--muted); cursor:default; text-decoration:none; }

/* Tiers. */
/* No scroll-margin-top here: html's scroll-padding-top (arcade.css) already clears the sticky
   header, and the two add up, which left the "Show N props" jump a header-height low (UI-627). */
/* One card per row, capped near 1280px on very wide screens (UI-636). */
#percentageResults { container:percentage-list / inline-size; display:flex; flex-direction:column; gap:1.5rem; min-width:0; max-width:80rem; }
#percentageResults:focus { outline:0; }
.percentage-none { margin:0; color:var(--muted); }
/* No props for these filters, or the season file failed: the words, then one button. */
:is(.percentage-empty, .percentage-load-error) { display:flex; flex-direction:column; align-items:flex-start; gap:0.75rem; }
:is(.percentage-empty, .percentage-load-error) p { margin:0; }
.percentage-empty strong { color:var(--ink); }
.percentage-tier { display:flex; flex-direction:column; gap:0.75rem; min-width:0; }
.percentage-tier-head { display:flex; flex-wrap:wrap; align-items:center; gap:0.25rem 0.75rem; }
.percentage-tier-head h3 { margin:0; font:800 1.375rem/1.1 var(--font-display); letter-spacing:-0.02em; }
.percentage-tier-count { color:var(--muted); font:400 1.125rem var(--font-mono); }
.percentage-tier-note { color:var(--muted); font-size:0.875rem; }
.percentage-tier-swatch { width:1.125rem; height:1.125rem; box-sizing:border-box; border-radius:var(--r-control); border:1px solid var(--line); background:var(--good); }
[data-tier=lean] .percentage-tier-swatch { background:none; border:3px solid var(--good); }
/* Best of what's posted: no verdict, so the swatch is the thin-data gold, not green. */
[data-tier=best] .percentage-tier-swatch { background:none; border:3px dashed var(--thin); }
.percentage-list { display:flex; flex-direction:column; gap:0.625rem; margin:0; padding:0; list-style:none; }
.percentage-group { display:flex; flex-direction:column; gap:0.375rem; }
.percentage-group[hidden], .percentage-play[hidden] { display:none; }
.percentage-show-all { align-self:flex-start; height:2.25rem; padding:0 0.875rem; background:transparent; color:var(--ink); border:2px solid var(--line); border-radius:var(--r-control); font:700 0.875rem var(--font-body); cursor:pointer; }
.percentage-show-all:hover { border-color:var(--muted); }
.percentage-rest-toggle { display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem 1.25rem; width:100%; padding:1rem 1.25rem; background:transparent; color:var(--ink); border:2px dashed var(--line); border-radius:var(--r-control); font:inherit; text-align:left; cursor:pointer; }
.percentage-rest-toggle.is-static { cursor:auto; }
.percentage-rest-toggle:not(.is-static):hover { border-color:var(--muted); }
.percentage-rest-toggle:focus-visible, .percentage-show-all:focus-visible, .percentage-more-toggle:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.percentage-rest-title { font:800 1.375rem/1.1 var(--font-display); letter-spacing:-0.02em; }
.percentage-rest-parts { display:flex; flex-wrap:wrap; gap:0.25rem 0.875rem; font-size:0.875rem; font-weight:700; }
/* Colour plus words, no marks (UI-532); thin data also takes a dashed underline, so colour
   is never the only cue (as the thin chip's dashed outline). */
.percentage-rest-part.is-thin { color:var(--muted); text-decoration:underline dashed 1px; text-underline-offset:0.25em; }
.percentage-rest-part.is-against { color:var(--bad); }
.percentage-rest-part.is-neutral { color:var(--muted); font-weight:500; }
.percentage-rest-show { display:inline-flex; align-items:center; gap:0.375rem; margin-left:auto; font-size:0.875rem; font-weight:800; }
.percentage-rest-show svg { transition:transform var(--dur-base) var(--ease-out); }
[aria-expanded=true] > .percentage-rest-show svg { transform:rotate(180deg); }
.percentage-rest-list { display:flex; flex-direction:column; gap:0.75rem; }
.percentage-rest-list[hidden] { display:none; }

/* A row: avatar, who/prop/context, micro chart, evidence, price, score, chevron. No edge
   stripe (UI-204); the tier heading carries the verdict, and the score its colour (UI-636). */
.percentage-play { position:relative; min-width:0; overflow:hidden; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); }
.percentage-play.is-open { background:var(--surface-raised); box-shadow:none; }
/* Fixed columns that line up card to card (UI-636): none sizes to its content, and the
   evidence column takes the spare width, so there's no gap before the price on wide screens.
   The who column is wide enough for the game line (team boxes and the rank chip, UI-656). */
.percentage-row { display:grid; grid-template-columns:2.5rem minmax(17.5rem, 21rem) 8.5rem minmax(0, 1fr) 9.5rem 3.75rem 2rem; align-items:center; gap:1rem; padding:0.75rem 1rem 0.75rem 1.5rem; cursor:pointer; }
.percentage-avatar { flex:0 0 auto; display:block; }
.percentage-avatar .player-avatar { position:relative; display:grid; place-items:center; width:2.5rem; height:2.5rem; overflow:hidden; border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface-raised); color:var(--muted); font:800 0.8125rem var(--font-body); }
.percentage-avatar .avatar-initials { color:var(--muted); }
.percentage-avatar .player-headshot { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center bottom; }
/* The headshot, as on Slate: initials until the photo loads (players.js adds .has-photo),
   then hidden so they never show through a transparent portrait. A failed photo drops
   .has-photo while the next source loads, and is removed if none works. */
.percentage-avatar .player-avatar.has-photo .avatar-initials { visibility:hidden; }
.percentage-identity { display:flex; flex-direction:column; gap:0.25rem; min-width:0; }
.percentage-name-line { display:flex; flex-wrap:wrap; align-items:center; gap:0.25rem 0.5rem; min-width:0; }
#percentageResults .percentage-identity .profile-name-button { min-width:0; max-width:100%; overflow:hidden; padding:0; background:none; border:0; color:var(--ink); font:900 1.5rem/1 var(--font-display); text-transform:uppercase; text-align:left; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }
#percentageResults .percentage-identity .profile-name-button:hover { text-decoration:underline; text-underline-offset:0.1875rem; }
/* UI-754: his other props in this tier. A button, not one more tag in the name line: ink on a
   raised face with a chevron, where the tags beside it are small filled pills. */
.percentage-more-props { flex:none; display:inline-flex; align-items:center; gap:0.25rem; height:1.625rem; padding:0 0.5rem; background:var(--surface-raised); color:var(--ink); border:2px solid var(--muted); border-radius:var(--r-control); font:800 0.75rem var(--font-body); white-space:nowrap; cursor:pointer; }
.percentage-more-props:hover { border-color:var(--ink); }
.percentage-more-props svg { flex:none; transition:transform var(--dur-base) var(--ease-out); }
.percentage-more-props[aria-expanded=true] svg { transform:rotate(180deg); }
/* Stacked over the matchup chip's tall tap padding below (.ar-mu-open, arcade.css), so a click
   anywhere on the prop line, its tags or the line-move note lands on the line, not the chip
   (UI-682). The chip keeps its face and the padding under it. */
.percentage-prop { position:relative; z-index:1; font-size:0.875rem; }
.percentage-prop-label { font-weight:600; }
.percentage-line { font-weight:700; }
/* UI-675: how far DK moved his line since last game. Plain muted text, no tone colour: context, not a verdict. */
.percentage-line-move { color:var(--muted); font-size:0.75rem; white-space:nowrap; }
.percentage-line-move::before { content:"· "; }
.percentage-tag { padding:0.0625rem 0.4375rem; border-radius:var(--r-data); background:var(--lilac); color:var(--accent-ink); font:800 0.625rem var(--font-body); white-space:nowrap; }
/* OUT / D / Q, the same pill as the Slate's All players list (MatchupLayouts.injuryTag). */
.percentage-injury { flex:none; padding:0.0625rem 0.375rem; border-radius:var(--r-data); background:var(--thin-bg); color:var(--thin); font:800 0.625rem var(--font-body); letter-spacing:0.04em; white-space:nowrap; cursor:help; }
.percentage-injury.is-out { background:var(--bad-bg); color:var(--bad); }
/* A carried status (UI-606): "OUT W4", an earlier week's, outlined so it never reads as fresh. */
.percentage-injury.is-carried { background:transparent; box-shadow:inset 0 0 0 1px currentColor; }
/* "Role change" (UI-530): a large vacancy, in the Role change card's Large vacancy colour (no mark, UI-462). */
.percentage-role-tag { flex:none; background:var(--thin-bg); color:var(--thin); cursor:help; }
/* "Bigger role (Hall out)" (UI-613, role-lines.js): context, never scored. The tag on
   the player page and the Slate's All players list: an outlined lilac pill, so it never reads
   as a verdict or an injury. Props rows say it in the Role chip instead (UI-698). */
.dk-role-tag { cursor:help; white-space:nowrap; }
/* Two lines under the prop (UI-636): the game ("MIN @ GB" with GB's defense rank joined to
   its box), then his role and the kickoff as plain text ("WR2 · Sun 12:00 PM"). Neither is
   cut: the game line wraps the rank chip under the boxes where it can't fit beside them. */
.percentage-context { display:flex; flex-direction:column; align-items:flex-start; gap:0.25rem; min-width:0; max-width:100%; color:var(--muted); font-size:0.75rem; }
.percentage-game { display:flex; flex-wrap:wrap; align-items:center; row-gap:0.25rem; min-width:0; max-width:100%; }
.percentage-when { display:flex; flex-wrap:wrap; align-items:center; column-gap:0.375rem; min-width:0; max-width:100%; white-space:nowrap; }
/* His club, then @ or vs, then the opponent (UI-213). */
.percentage-teams { flex:none; display:inline-flex; align-items:center; gap:0.25rem; }
.percentage-at { color:var(--muted); font-size:0.6875rem; font-weight:800; }
.percentage-context .percentage-logo { flex:none; display:inline-grid; place-items:center; width:1.25rem; height:1.25rem; }
.percentage-context .percentage-logo .team-logo { width:100%; height:100%; object-fit:contain; }
/* The rank joined to the opponent's box: square inner corners, no gap between them. Where the
   chip has wrapped under the boxes (.is-wrapped, set after layout by the view's watchWrap, UI-679)
   both keep their own rounded corners. */
.percentage-context .percentage-matchup { display:inline-flex; min-width:0; max-width:100%; }
.percentage-context .percentage-matchup:not(.is-joined) { margin-left:0.375rem; }
.percentage-game:has(.percentage-matchup.is-joined:not(.is-wrapped)) .percentage-teams > .team-boxes:last-child { border-top-right-radius:0; border-bottom-right-radius:0; }
.percentage-context .percentage-matchup.is-joined:not(.is-wrapped) .ar-mu { border-top-left-radius:0; border-bottom-left-radius:0; }
/* Phones: the boxes show their codes without logos (as Today's narrow cards do), so the rank
   chip fits beside them ("DEN @ SF | Tough 30th yds allowed" in about 270px at 390). */
@container percentage-list (max-width: 26rem) {
  .percentage-game .team-box { --tb-logo-w:0px; --tb-gap:0px; }
  .percentage-game .team-box-logo { display:none; }
}
.percentage-form { container:percentage-form / inline-size; display:flex; flex-direction:column; gap:0.3125rem; min-width:0; }
.percentage-form .ar-chart-micro { width:100%; max-width:9.5rem; }
/* UI-872: a play with no games says so once, in muted text, in place of the chart and count. */
.percentage-no-games { margin:0; color:var(--muted); font-size:0.75rem; font-weight:600; line-height:1.3; }
.percentage-count { display:inline-flex; align-items:center; gap:0.3125rem; font-size:0.75rem; font-weight:700; white-space:nowrap; }
.percentage-count-words { display:inline-flex; align-items:center; gap:0.3125rem; }
.percentage-count.tone-thin { text-decoration:underline dashed 1px; text-underline-offset:0.25em; }
/* Where the column is too narrow for "Form 4 of 5 over" (phones, large text), the count alone:
   "4/5" (UI-636). In ems of the column's own text, so 200% text switches too. */
@container percentage-form (max-width: 8em) {
  .percentage-count-words { display:none; }
  .percentage-count::before { content:attr(data-short); font-family:var(--font-mono); font-size:0.875rem; }
}
@container percentage-form (max-width: 13em) {
  .percentage-count.is-long .percentage-count-words { display:none; }
  .percentage-count.is-long::before { content:attr(data-short); font-family:var(--font-mono); font-size:0.875rem; }
}
.percentage-evidence { display:flex; flex-direction:column; gap:0.375rem; min-width:0; }
.percentage-evidence-top { display:flex; flex-wrap:wrap; align-items:center; gap:0.375rem 0.625rem; }
/* A neutral chip stays bare (the global .tone-neutral fill only showed once the open row's
   raised background sat behind it), so opening a row never restyles its evidence. */
#percentageResults .percentage-evidence .ar-sig.tone-neutral { background:none; }
.percentage-other-props { background:var(--surface-raised); color:var(--muted); }
.percentage-headline { margin:0; font-size:0.8125rem; line-height:1.4; color:var(--ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.percentage-pick { display:flex; flex-direction:column; align-items:stretch; gap:0.25rem; min-width:0; }
/* The price: the kit's .ar-price, side + line on the left, price on the right. */
html body[data-layout] #percentageResults .bet-side.ar-price { width:100%; min-width:0; height:2.75rem; min-height:0; flex-direction:row; justify-content:space-between; gap:0.375rem; padding:0 0.75rem; background:var(--surface-raised); color:var(--ink); border:2px solid var(--ink); border-radius:var(--r-control); box-shadow:none; font:900 1.3125rem/1 var(--font-display); }
#percentageResults .bet-side.ar-price :is(span, strong) { color:inherit; font:inherit; white-space:nowrap; }
/* The side as a small word above the line, the price set apart by a hairline. */
html body[data-layout] #percentageResults .bet-side.ar-price:has(> .bet-side-label) { display:grid; grid-template-columns:auto 1fr auto; grid-template-rows:auto auto; align-content:center; column-gap:0.5rem; row-gap:0.125rem; }
#percentageResults .bet-side.ar-price > .bet-side-label { grid-area:1 / 1; font:600 0.6875rem/1 var(--font-body); letter-spacing:0.01em; opacity:0.78; }
#percentageResults .bet-side.ar-price > .bet-side-label + span { grid-area:2 / 1; }
#percentageResults .bet-side.ar-price:has(> .bet-side-label) > strong { grid-area:1 / 3 / 3 / 4; align-self:stretch; display:flex; align-items:center; padding-left:0.5rem; border-left:1px solid color-mix(in srgb, currentColor 30%, transparent); font-weight:600; }
html body[data-layout] #percentageResults .bet-side.ar-price[aria-pressed=true] { background:var(--accent); color:var(--accent-ink); }
#percentageResults .bet-side.ar-price:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.percentage-quote-note { color:var(--muted); font-size:0.625rem; line-height:1.2; }
/* "Break-even 71%" (UI-94) is in the price's tooltip and, for screen readers, after it (UI-636). */
.percentage-price { display:block; min-width:0; }
/* Play Score, the list's sort key, as a big display number beside the price, in its tier's
   colour (UI-636): green under Strong and Lean, gold under Best of what's posted, ink where
   verdicts mix. */
.percentage-score { display:flex; flex-direction:column; align-items:center; gap:0.125rem; min-width:0; color:var(--muted); }
.percentage-score strong { color:var(--ink); font:900 2.125rem/0.9 var(--font-display); font-variant-numeric:tabular-nums; letter-spacing:0; }
.percentage-score[data-tone=good] strong { color:var(--good); }
.percentage-score[data-tone=thin] strong { color:var(--thin); }
.percentage-score.is-unscored strong { color:var(--muted); }
.percentage-score span { font-size:0.6875rem; }
/* LOGIC-62: a score just under a cut keeps its decimal, set at the label size so the big number keeps its two-digit width ("69" big, ".6" small; larger spilled at 320px, 200% text). */
.percentage-score strong .percentage-score-decimal { font-size:0.6875rem; }
.percentage-score-window { color:var(--muted); font:600 0.6875rem/1 var(--font-mono); font-variant-numeric:tabular-nums; white-space:nowrap; }
.percentage-row > .percentage-why-toggle { justify-self:end; }
.percentage-why-toggle { display:grid; place-items:center; width:2rem; height:2rem; padding:0; background:transparent; color:var(--muted); border:2px solid var(--line); border-radius:var(--r-control); cursor:pointer; }
.percentage-why-toggle svg { transition:transform var(--dur-base) var(--ease-out); }
.percentage-why-toggle[aria-expanded=true] svg { transform:rotate(180deg); }
.percentage-why-toggle:hover { color:var(--ink); border-color:var(--muted); }
.percentage-why-toggle:focus-visible, .percentage-more-props:focus-visible, #percentageResults .profile-name-button:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }

/* The Why layer. */
.percentage-why { display:grid; grid-template-columns:22rem minmax(0, 1fr); gap:1rem 1.25rem; margin:0 1rem 1rem 1.5rem; padding-top:0.875rem; border-top:2px solid var(--line); cursor:auto; }
.percentage-why-chart { display:flex; flex-direction:column; gap:0.5rem; min-width:0; padding:0.875rem 1rem; background:var(--bg); border:1px solid var(--line); border-radius:var(--r-control); }
.percentage-why-viewing { display:flex; align-items:center; justify-content:space-between; gap:0.5rem; color:var(--muted); font-size:0.75rem; font-weight:700; }
.percentage-why-viewing .percentage-seg button { height:1.625rem; padding:0 0.625rem; font-size:0.75rem; }
.percentage-why-count { display:flex; align-items:baseline; justify-content:space-between; gap:0.5rem; color:var(--muted); font-size:0.75rem; font-weight:700; }
.percentage-why-count strong { font-size:1.125rem; }
.percentage-why-chart .ar-chart-card { max-width:none; margin-top:0.75rem; }
/* "oldest / last game" spans the bars, not the card: the plot is the card less the kit's
   2.75rem line-label gutter, and no wider than --n bars (set by the view) at the card's
   2.25rem bar + 0.375rem gap. */
.percentage-why-axis { display:flex; justify-content:space-between; width:min(calc(100% - 2.75rem), calc(var(--n, 99) * 2.625rem - 0.375rem)); color:var(--muted); font-size:0.6875rem; }
/* UI-872: no games: no chart column, the reasons as one muted line, the price as its note. */
.percentage-why.is-empty { grid-template-columns:minmax(0, 1fr); }
.percentage-why-thin, .percentage-why-price { margin:0; color:var(--muted); font-size:0.875rem; line-height:1.4; }
.percentage-why-thin strong { color:var(--ink); font-weight:700; }
.percentage-why-price { font-size:0.75rem; }
.percentage-why-price .percentage-mono { color:var(--ink); }
.percentage-why-foot, .percentage-why-flip { margin:0; color:var(--muted); font-size:0.75rem; }
.percentage-why-foot .percentage-mono { color:var(--ink); }
.percentage-why-reasons { display:flex; flex-direction:column; gap:0.75rem; min-width:0; }
.percentage-why-head { display:flex; flex-wrap:wrap; align-items:center; gap:0.625rem; font-size:0.9375rem; }
/* UI-249: the side the reasons explain, kept in view whichever side the chart shows. */
.percentage-why-side { margin:0; color:var(--muted); font-size:0.75rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; }
.percentage-why-side strong { color:var(--ink); }
.percentage-why-viewing small { font-weight:600; }
.percentage-why-basis { margin:0; color:var(--muted); font-size:0.75rem; }
/* UI-630: the Play Score's defense read under legacy-v3 (opponents against their own lines). */
.percentage-why-own-line { margin:0; padding-top:0.625rem; border-top:1px solid var(--line); color:var(--ink); font-size:0.8125rem; line-height:1.45; overflow-wrap:anywhere; }
.percentage-why-own-label { margin-right:0.25rem; color:var(--muted); font-size:0.6875rem; font-weight:800; letter-spacing:0.04em; text-transform:uppercase; }
.percentage-why-own-line small { color:var(--muted); font-size:0.75rem; }
/* The Player page's Role change card (UI-530; styled in player-page.css), across the Why under the chart and reasons. */
.percentage-why > .role-card { grid-column:1 / -1; }
.percentage-why-actions { grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:0.625rem 0.875rem; color:var(--muted); font-size:0.8125rem; }
.percentage-open-page { height:2.375rem; padding:0 0.875rem; background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:var(--r-control); box-shadow:none; font:800 0.875rem var(--font-body); cursor:pointer; }
.percentage-log-button { height:2.375rem; padding:0 0.75rem; background:transparent; color:var(--ink); border:2px solid var(--line); border-radius:var(--r-control); font:700 0.8125rem var(--font-body); cursor:pointer; }
:is(.percentage-open-page, .percentage-log-button):focus-visible, .percentage-why .percentage-seg button:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.percentage-open-page:active { translate:0 calc(1px * var(--move)); filter:brightness(0.86); transition-duration:var(--dur-instant); }

/* Motion: arrival only. A filter or re-sort swaps the list without replaying the bars,
   stamps or reasons; a newly opened Why plays its own. The headline rises after the verdict
   stamps (arcade.css ar-reason, UI-169). */
@media (prefers-reduced-motion:no-preference) { .percentage-headline { animation:ar-reason var(--dur-base) var(--ease-out) both; animation-delay:calc(var(--dur-fast) + 60ms); } }
#percentageResults[data-motion=off] :is(.ar-bar, .ar-verdict, .ar-sig-row, .percentage-headline):not(.is-entering *) { animation:none; }
/* The Why's reveal clips without being a scroll box: scrollIntoView (a test's click, find in
   page) can't scroll a half-open panel's contents up, then leave them misplaced as it grows. */
#percentageResults .ar-why > * { overflow:clip; }
.percentage-why .ar-sig-row:nth-child(2) { --i:1; } .percentage-why .ar-sig-row:nth-child(3) { --i:2; } .percentage-why .ar-sig-row:nth-child(4) { --i:3; }

/* Middling widths (a docked panel, tablets): evidence drops under the player. From 70rem, where
   the evidence column beside the fixed ones would be under about 15rem (UI-636). */
@container percentage-list (max-width: 70rem) {
  .percentage-row { grid-template-columns:2.5rem minmax(0, 1fr) 8.5rem 8.5rem 3.75rem 2rem; grid-template-areas:"avatar who form pick score why" ". evidence evidence evidence evidence evidence"; row-gap:0.625rem; }
  .percentage-row > .percentage-avatar { grid-area:avatar; }
  .percentage-row > .percentage-identity { grid-area:who; }
  .percentage-row > .percentage-form { grid-area:form; }
  .percentage-row > .percentage-evidence { grid-area:evidence; }
  .percentage-row > .percentage-pick { grid-area:pick; }
  .percentage-row > .percentage-score { grid-area:score; }
  .percentage-row > .percentage-why-toggle { grid-area:why; justify-self:end; }
  .percentage-why { grid-template-columns:minmax(0, 1fr); }
}
/* Phones, in the desktop order: who + chevron (with the game line), then chart, price and
   score on one line, then the evidence: chips, then the sentence (UI-636: the sentence stays
   and the chip it repeats goes, as on desktop). */
@container percentage-list (max-width: 36rem) {
  .percentage-row { grid-template-columns:2.25rem minmax(0, 1fr) minmax(6.75rem, 1fr) 2.75rem; grid-template-areas:"avatar who who why" "form form pick score" "evidence evidence evidence evidence"; gap:0.375rem 0.625rem; padding:0.625rem 0.75rem 0.625rem 1.125rem; }
  .percentage-row > :is(.percentage-avatar, .percentage-why-toggle) { align-self:start; }
  .percentage-row > .percentage-why-toggle { width:2.5rem; height:2.5rem; justify-self:end; }
  .percentage-row > .percentage-score { align-self:center; }
  .percentage-score strong { font-size:1.875rem; }
  /* The full sentence under the chips: no two-line cut on a phone or at large text. */
  .percentage-headline { display:block; -webkit-line-clamp:unset; overflow:visible; }
  .percentage-avatar .player-avatar { width:2.25rem; height:2.25rem; }
  /* The verdict and the chips pack into one wrapping line instead of a chip per line. */
  .percentage-evidence-top { gap:0.25rem; }
  .percentage-evidence-top > .ar-signals { display:contents; }
  .percentage-evidence-top :is(.ar-sig, .ar-verdict) { height:1.4375rem; min-height:0; padding:0 0.375rem; font-size:0.6875rem; }
  /* Rows of about 220px at 390 (UI-70a). The player block runs under the chevron, so the
     team line has room for the matchup band chip beside it (the name and prop lines keep
     clear of the chevron). */
  .percentage-row > .percentage-identity { grid-column:2 / -1; grid-row:1; }
  .percentage-row > .percentage-why-toggle { grid-column:4; grid-row:1; position:relative; z-index:1; }
  .percentage-identity > :is(.percentage-name-line, .percentage-prop) { padding-right:3rem; }
  .percentage-context { column-gap:0.25rem; }
  .percentage-row > .percentage-form { gap:0.1875rem; }
  .percentage-identity { gap:0.125rem; }
  .percentage-count { flex-wrap:wrap; white-space:normal; }
  /* Full-size names (the board's ~24px); long ones wrap rather than cut ("Jacory
     Croskey-Merritt" at 360). */
  #percentageResults .percentage-identity .profile-name-button { white-space:normal; overflow-wrap:anywhere; }
  html body[data-layout] #percentageResults .bet-side.ar-price { padding:0 0.5rem; font-size:1.0625rem; }
  /* Above the prop line's stacking (UI-682), so its taller tap area still reaches down. */
  .percentage-more-props { position:relative; z-index:2; }
  .percentage-more-props::after { content:""; position:absolute; inset:-0.5rem -0.25rem; }
  .percentage-why { margin:0 0.75rem 0.75rem 1.125rem; }
  .percentage-why-chart { padding:0.75rem; }
  .percentage-why-viewing .percentage-seg button { height:2.5rem; }
  .percentage-rest-toggle { padding:0.875rem; }
  .percentage-rest-show { margin-left:0; }
}
/* Large text on small phones (UI-428): 200% text at 320 to 390 leaves the list 8 to 12 of
   its own ems wide, less than the phone row's fixed columns need (about 15). The player
   block takes the full width under the avatar and chevron, the price drops to its own line
   under the chart and score, and the context line and matchup chip wrap rather than cut.
   In ems, so default text never gets here (the list is 16.8em wide at 320). */
@container percentage-list (max-width: 16em) {
  .percentage-row { grid-template-columns:2.25rem minmax(0, 1fr) 2.5rem; grid-template-areas:"avatar . why" "who who who" "form form score" "pick pick pick" "evidence evidence evidence"; }
  .percentage-row > :is(.percentage-identity, .percentage-why-toggle) { grid-column:auto; grid-row:auto; }
  .percentage-row > .percentage-identity { grid-area:who; }
  .percentage-row > .percentage-why-toggle { grid-area:why; }
  .percentage-row > .percentage-form { grid-area:form; }
  .percentage-row > .percentage-score { grid-area:score; }
  .percentage-row > .percentage-pick { grid-area:pick; }
  .percentage-identity > :is(.percentage-name-line, .percentage-prop) { padding-right:0; overflow-wrap:anywhere; }
  /* "+1 more prop" is wider than the name line here (6px past the card at 320): it may shrink to
     the line and wrap between its words, as the tour's copy does (UI-760, UI-761). */
  .percentage-more-props { flex:0 1 auto; max-width:100%; height:auto; min-height:1.625rem; padding-block:0.125rem; white-space:normal; overflow-wrap:normal; }
  .percentage-when { white-space:normal; overflow-wrap:anywhere; }
  .percentage-context :is(.percentage-matchup, .ar-mu-open, .ar-mu) { max-width:100%; }
  .percentage-context .ar-mu { flex-wrap:wrap; height:auto; min-height:1.375rem; white-space:normal; overflow-wrap:anywhere; }
  /* Evidence chips grow to two lines ("WR1s vs GB: 5 of 5") instead of spilling out. */
  .percentage-evidence-top :is(.ar-sig, .ar-verdict) { flex-wrap:wrap; height:auto; min-height:1.4375rem; white-space:normal; }
  /* The open Why (UI-436). Narrower margins and padding give the chart room; the Chart side
     switch, the count and the page button wrap instead of running out of the card. */
  .percentage-why { margin:0 0.375rem 0.5rem; }
  .percentage-why-chart { padding:0.5rem; }
  .percentage-why-viewing, .percentage-why-count { flex-wrap:wrap; }
  .percentage-open-page { height:auto; min-height:2.375rem; padding-block:0.25rem; overflow-wrap:anywhere; }
  /* The chart: narrower gaps give the bars room. The shared chart's large-text form
     (arcade.css, UI-439) does the rest: under 10rem it drops the gutter and names the line
     under the plot, and when a game's slot can't hold its value it lists every game there
     ("W3 @DEN 22") instead of hiding the values. */
  .percentage-why-chart .ar-chart-card { --gap:0.125rem; }
  .percentage-why-axis { width:100%; flex-wrap:wrap; column-gap:0.5rem; }
}
@media (max-width:40em) {
  .percentage-heading h2 { font-size:1.875rem; }
  .percentage-summary { font-size:0.9375rem; }
  .percentage-filters { gap:0.625rem 0.875rem; }
  .percentage-chips { gap:0.25rem; }
  .percentage-chips button { padding:0 0.625rem; }
  .percentage-reset { margin-left:0; }
  /* Tap targets: 2.5rem on phones. */
  .percentage-chips button, .percentage-more-toggle, .percentage-seg button { height:2.5rem; }
  #percentagePanel .percentage-more :is(select, input) { height:2.5rem; }
  .percentage-reset { min-height:2.5rem; padding:0.5rem 0; }
  /* The back-to-top button (bottom right) never sits over the last row's text. */
  #percentageResults { padding-bottom:3.5rem; }
}
/* Colour key under the list. */
.percentage-key { display:flex; flex-wrap:wrap; gap:0.375rem 1rem; margin:1.25rem 0 0; color:var(--muted); font-size:0.75rem; }
.percentage-key > span { display:inline-flex; align-items:center; gap:0.375rem; }
.percentage-key-swatch { width:0.75rem; height:0.75rem; border-radius:var(--r-data); }
.percentage-key-swatch.is-good { background:var(--good); } .percentage-key-swatch.is-bad { background:var(--bad); } .percentage-key-swatch.is-thin { box-shadow:inset 0 0 0 2px var(--thin); }

/* Game-log dialog: the opponent badge next to each result. */
.percentage-team { display:inline-flex; align-items:center; gap:0.3rem; white-space:nowrap; }
.percentage-team .opponent-badge { width:1.55rem; height:1.55rem; font-size:0.5rem; }
.percentage-evidence-table .percentage-matchup { display:flex; margin-top:0.3rem; font-size:0.65rem; }
.percentage-evidence-table .percentage-vs { font-size:0.65rem; }
#percentageLogDialog { width:min(90rem,calc(100% - 1.5rem)); max-height:90dvh; padding:0; background:var(--bg); }
.percentage-log-heading { position:sticky; top:0; z-index:3; padding:.6rem 1rem; background:var(--surface); border-bottom:1px solid var(--line); }
.percentage-log-heading .dialog-heading { align-items:flex-start; margin:0; }
#percentageLogMeta { color:var(--muted); font-size:.8rem; margin:.3rem 0 0; }
#percentageLogMeta strong { color:var(--ink); white-space:nowrap; }
.percentage-log-window { display:inline-block; margin-left:.75rem; font-size:.7rem; }
#percentageLogBody { padding:.9rem 1rem 1rem; min-width:0; }
.percentage-log-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:1.25rem; }
.percentage-log-section { min-width:0; }
.percentage-log-section>header { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:.35rem 1rem; margin-bottom:.5rem; }
.percentage-log-section h3 { margin:0; font-size:1rem; }
.percentage-log-summary { display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem; margin:0; font-size:.8rem; }
.percentage-log-summary strong { color:var(--ink); font-size:.9rem; }
.percentage-log-summary span { color:var(--muted); }
.percentage-evidence-table { border-collapse:collapse; min-width:56rem; }
.percentage-log-scroll { border-color:var(--line); scrollbar-color:var(--muted) var(--surface); }
.percentage-evidence-table :is(th, td) { border-bottom-color:var(--line); }
.percentage-evidence-table thead th { background:var(--surface-subtle); color:var(--muted); }
.percentage-evidence-table .overview-stat-groups th { background:var(--surface); color:var(--ink); }
.percentage-evidence-table .overview-stat-groups .overview-comparison-heading { background:var(--accent-soft); color:var(--ink); border-color:var(--line); }
.percentage-evidence-table thead .overview-selected-heading { color:var(--ink); }
.percentage-evidence-table .overview-group-start { border-color:var(--line); }
.percentage-evidence-table tbody tr { --overview-row:var(--surface); }
.percentage-evidence-table tbody tr:nth-child(even) { --overview-row:var(--surface-raised); }
.percentage-evidence-table tbody tr:hover { --overview-row:var(--surface-strong); }
.percentage-evidence-table .overview-player { box-shadow:2px 0 var(--line); }
.percentage-evidence-table :is(.profile-name-button, .overview-stat) { color:var(--ink); }
.percentage-evidence-table :is(.overview-player-identity small, .stat-unavailable) { color:var(--muted); }
.percentage-evidence-table .overview-actual-tile { background:var(--surface-raised); }
.percentage-evidence-table .percentage-log-week th { text-align:left; background:var(--surface-raised); color:var(--muted); padding:.55rem .75rem; font-weight:400; font-size:.7rem; }
.percentage-log-week th>span { display:block; position:sticky; left:.75rem; width:max-content; max-width:min(60rem,calc(100vw - 5rem)); white-space:normal; line-height:1.5; }
.percentage-evidence-table .percentage-matchup { margin-top:.3rem; font-size:.65rem; }
.percentage-evidence-table .percentage-team .opponent-badge { width:1.25rem; height:1.25rem; }
.percentage-saved-line>span { display:block; padding:.2rem 0; font-size:.8rem; }
.percentage-evidence-table [data-result=hit] .overview-actual-tile { color:var(--good); background:var(--good-bg); }
.percentage-evidence-table [data-result=miss] .overview-actual-tile { color:var(--bad); background:var(--bad-bg); }
.percentage-evidence-table [data-result=push] .overview-actual-tile { color:var(--thin); background:var(--thin-bg); }
.percentage-evidence-table [data-result=hit] .percentage-result b { color:var(--good); }
.percentage-evidence-table [data-result=miss] .percentage-result b { color:var(--bad); }
.percentage-evidence-table [data-result=push] .percentage-result b { color:var(--thin); }
/* UI-630: the defense under legacy-v3, opponents against their own lines: five columns, no box-score groups. */
.percentage-own-note { margin:0 0 .6rem; color:var(--muted); font-size:.78rem; line-height:1.5; max-width:60rem; }
.percentage-own-note strong { color:var(--ink); font-weight:700; }
.percentage-evidence-table.percentage-own-table { min-width:22rem; width:100%; }
.percentage-own-table .percentage-own-ref { white-space:nowrap; font-size:.8rem; }
.percentage-own-table .percentage-own-stat { color:var(--ink); }
.percentage-own-usual { color:var(--muted); font-style:italic; }
.percentage-own-usual small { font-size:.65rem; font-style:normal; text-transform:uppercase; letter-spacing:.04em; }
@media (max-width:40em) {
  .percentage-log-heading,#percentageLogBody { padding:.8rem; }
  /* The own-line table fits a phone: tighter cells, wrapping headings. */
  .percentage-evidence-table.percentage-own-table { min-width:0; }
  .percentage-own-table :is(th, td) { padding-left:.3rem; padding-right:.3rem; }
  .percentage-own-table thead th { white-space:normal; }
  #percentageLogDialog .percentage-own-table.overview-detail-table :is(.overview-actual, .overview-outcome) { min-width:0; }
  #percentageLogTitle { font-size:1rem; }
  .percentage-log-window { display:block; margin:.25rem 0 0; }
}

/* Header: the player and play on the left, this week's line picker, then close. */
.percentage-log-heading .dialog-heading { display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:.5rem 1.25rem; }
.percentage-log-who { display:flex; align-items:center; gap:.75rem; min-width:0; }
#percentageLogAvatar .player-avatar { position:relative; display:block; width:3rem; height:3.4rem; overflow:hidden; border-radius:var(--r-control); background:var(--surface-raised); }
#percentageLogAvatar .player-headshot { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
#percentageLogAvatar .avatar-initials { display:grid; place-items:center; height:100%; color:var(--muted); font-size:.8rem; }
#percentageLogTitle { margin:0; }
#percentageLogMeta { margin:.2rem 0 0; line-height:1.45; }
.percentage-log-game { display:block; color:var(--ink); font-size:.82rem; }
#percentageLogMeta .percentage-log-window { margin-left:.5rem; }
#percentageLogClose { align-self:center; }
@media (max-width:40em) {
    #percentageLogClose { grid-column:2; grid-row:1; align-self:start; }
}
.percentage-week-line { color:var(--muted); font-variant-numeric:tabular-nums; text-align:center; }
.percentage-week-line>span { font-size:.85rem; }
/* This week's line strip at the top of the log body. */
/* Same card as the Games view's quote strip (studio-games.css scopes it to that panel). */
#percentageLogDialog .percentage-log-quote { display:flex; align-items:center; gap:1.25rem; min-height:5.6875rem; margin:0 0 1.25rem; padding:.8125rem .9375rem; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); }
#percentageLogDialog .percentage-log-quote .bet-side { background:var(--surface-raised); color:var(--ink); border-color:var(--line); box-shadow:none; min-height:2.875rem; }
#percentageLogDialog .percentage-log-quote .studio-odds-button { flex-direction:column; gap:.25rem; }
#percentageLogDialog .percentage-log-quote .bet-side strong { color:inherit; }
body[data-layout] #percentageLogDialog .percentage-log-quote .bet-side[aria-pressed=true] { background:var(--accent); border-color:var(--edge); box-shadow:none; color:var(--accent-ink); }
.percentage-log-quote .studio-line-value { display:grid; flex:0 0 auto; padding-right:1.25rem; border-right:1px solid var(--line); }
.percentage-log-quote .studio-line-value small { color:var(--muted); font-size:.7rem; letter-spacing:.08em; }
.percentage-log-quote .studio-line-value strong { font-size:2rem; line-height:1.1; }
.percentage-log-quote .studio-focus-lines { flex:1 1 auto; min-width:0; }
/* "Tracking only; no bet placed." under the line picker (UI-460). */
#percentageLogDialog .percentage-log-tracking { margin:-0.875rem 0 1.25rem; color:var(--muted); font-size:0.75rem; }
/* A game the scores file left unscored (UI-465): "not scored", the reason on hover and above the list. */
.percentage-score.is-unscored span { white-space:nowrap; }
/* "Week line": that game's main line, then "+2 alts" (every line in its title). */
.percentage-week-alts { display:block; color:var(--muted); font-size:.65rem; white-space:nowrap; }
@media (max-width:40em) {
  .percentage-log-quote { flex-direction:column; align-items:stretch; gap:.6rem; }
  #percentageLogDialog .percentage-log-quote .studio-line-value { padding:0 0 .5rem; border-right:0; border-bottom:1px solid var(--line); }
  /* Phones: the heading scrolls away with the log (it was 200px of sticky header), the
     season note sits flush under the matchup, and the sticky Week / Player column narrows
     so Actual, Result and Week line all show beside it. */
  .percentage-log-heading { position:static; }
  #percentageLogMeta .percentage-log-window { display:block; margin:.25rem 0 0; }
  #percentageLogDialog .overview-detail-table .overview-player { min-width:6.5rem; width:6.5rem; padding-left:.5rem; }
  /* A small portrait stays beside the name (UI-213/AUD-UI-027: identity on phones too). */
  #percentageLogDialog .overview-player-identity { gap:0.3125rem; }
  #percentageLogDialog .overview-player-identity .profile-avatar-button { flex:0 0 1.5rem; }
  #percentageLogDialog .overview-player-identity .player-avatar { width:1.5rem; height:1.8125rem; flex-basis:1.5rem; font-size:0.5625rem; }
  #percentageLogDialog .overview-detail-table .overview-actual { min-width:3.25rem; }
  #percentageLogDialog .overview-detail-table .overview-outcome { min-width:3.75rem; }
  #percentageLogDialog .overview-player-identity .profile-name-button { overflow-wrap:anywhere; }
  /* "RECEIVING YARDS · UNDER 42.5" wraps over Actual and Result instead of running off
     under the Week line column. */
  #percentageLogDialog .overview-comparison-heading { white-space:normal; text-align:left; }
  #percentageLogDialog .percentage-comparison-label { display:block; max-width:9.5rem; line-height:1.4; }
}

/* Tracked Unders record (UI-88): a folded card under the list. The summary carries the
   season line; the table lists the season and each week by rule. */
.percentage-tracking { margin:1.5rem 0 0;background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); }
.percentage-tracking[hidden] { display:none; }
.percentage-tracking summary { display:flex; flex-wrap:wrap; align-items:center; gap:0.375rem 1rem; padding:0.875rem 1.25rem; color:var(--ink); cursor:pointer; list-style:none; }
.percentage-tracking summary::-webkit-details-marker { display:none; }
.percentage-tracking summary:focus-visible { outline:3px solid var(--accent); outline-offset:2px; border-radius:var(--r-control); }
.percentage-tracking summary svg { margin-left:auto; color:var(--muted); transition:transform var(--dur-base) var(--ease-out); }
.percentage-tracking details[open] summary svg { transform:rotate(180deg); }
.percentage-tracking-title { font:800 1.375rem/1.1 var(--font-display); letter-spacing:-0.02em; }
.percentage-tracking-season { display:flex; flex-wrap:wrap; gap:0.25rem 0.875rem; font-size:0.875rem; }
.percentage-tracking-season b { color:var(--muted); font-weight:700; }
.percentage-tracking-small { padding:0.0625rem 0.5rem; border:2px dashed var(--thin); border-radius:var(--r-card); color:var(--thin); font:800 0.6875rem var(--font-body); white-space:nowrap; }
.percentage-tracking-body { display:flex; flex-direction:column; gap:0.75rem; padding:0 1.25rem 1rem; }
.percentage-tracking-note { margin:0; color:var(--muted); font-size:0.8125rem; line-height:1.45; }
.percentage-tracking-note strong { color:var(--ink); }
/* UI-755: with the strategy columns the table has six, wider than a phone: it scrolls sideways
   inside its card (never the page), the row's name staying put at the left edge (the phone
   block below; a wider screen fits all six, so nothing sticks there). */
.percentage-tracking-scroll { max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin; }
.percentage-tracking-table { width:100%; max-width:36rem; border-collapse:collapse; font-size:0.875rem; font-variant-numeric:tabular-nums; }
.percentage-tracking-table :is(th, td) { padding:0.5rem 0.625rem; border-bottom:1px solid var(--line); text-align:right; vertical-align:top; }
.percentage-tracking-table:has(th.is-strategy) { max-width:50rem; }
.percentage-tracking-table thead th { color:var(--muted); font-size:0.75rem; font-weight:800; vertical-align:bottom; white-space:nowrap; }
.percentage-tracking-table th[scope=row] { text-align:left; font-weight:800; white-space:nowrap; }
.percentage-tracking-table tbody tr:first-child { background:var(--surface-raised); }
.percentage-tracking-table td .percentage-mono { white-space:nowrap; }
.percentage-tracking-table tbody tr:last-child :is(th, td) { border-bottom:0; }
.percentage-tracking-table :is(td, th) > :is(span, small) { display:block; }
.percentage-tracking-table small { color:var(--muted); font-size:0.6875rem; font-weight:600; white-space:nowrap; }
.percentage-tracking-units { font-size:0.75rem; font-weight:600; }
.percentage-tracking-units:not(.tone-good):not(.tone-bad) { color:var(--muted); }
/* UI-739: a record cell with picks, and each Week label, is a button that opens those picks in
   the Tracked Unders dialog. The button fills its cell, so the whole cell is the target. */
.percentage-tracking-table td:has(> .percentage-tracking-open) { padding:0.1875rem; }
.percentage-tracking-open { display:flex; flex-direction:column; align-items:flex-end; width:100%; min-height:2.75rem; padding:0.25rem 0.375rem; border:1px solid var(--line); border-radius:var(--r-control); background:none; color:var(--ink); font:inherit; text-align:right; cursor:pointer; }
.percentage-tracking-open > :is(span, small) { display:block; }
.percentage-tracking-week { display:inline-flex; align-items:center; min-height:2rem; margin:-0.1875rem 0 0.125rem -0.4375rem; padding:0 0.4375rem; border:1px solid var(--line); border-radius:var(--r-control); background:none; color:var(--ink); font:inherit; font-weight:800; cursor:pointer; }
:is(.percentage-tracking-open, .percentage-tracking-week):hover { border-color:var(--muted); background:var(--surface-raised); }
.percentage-tracking-table tbody tr:first-child .percentage-tracking-open:hover { background:var(--surface); }
:is(.percentage-tracking-open, .percentage-tracking-week):focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
/* A finished week whose picks are all graded: a lock beside its name (NFL and NBA tables). */
.percentage-tracking-lock { margin-left:0.125rem; color:var(--muted); vertical-align:-0.0625rem; }
/* The dialog: a fixed heading (what was clicked, its record) over a list that scrolls inside. */
.percentage-tracking-dialog { width:min(34rem,calc(100% - 1.75rem)); max-height:90vh; max-height:90dvh; padding:0; overflow:hidden; background:var(--bg); }
.percentage-tracking-dialog[open] { display:flex; flex-direction:column; }
.percentage-tracking-dialog-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-shrink:0; padding:1.125rem 1.25rem; background:var(--surface); border-bottom:1px solid var(--line); }
.percentage-tracking-dialog-head > div { min-width:0; }
.percentage-tracking-dialog-head h2 { margin:0; font-size:1.375rem; line-height:1.25; overflow-wrap:anywhere; }
.percentage-tracking-dialog-record { display:flex; flex-wrap:wrap; align-items:baseline; gap:0.125rem 0.625rem; margin:0.375rem 0 0; color:var(--ink); font-size:0.9375rem; }
.percentage-tracking-dialog-record[hidden] { display:none; }
.percentage-tracking-dialog-record .percentage-tracking-units { font-size:0.875rem; }
.percentage-tracking-dialog small { color:var(--muted); font:600 0.75rem var(--font-body); }
.percentage-tracking-dialog-head .close-button { flex-shrink:0; width:2.75rem; height:2.75rem; border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface-raised); color:var(--ink); }
.percentage-tracking-dialog-head .close-button:focus-visible, .percentage-tracking-dialog-body:focus-visible, .percentage-tracking-dialog .profile-name-button:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.percentage-tracking-dialog-body { display:grid; gap:1.125rem; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:1rem 1.25rem 1.25rem; scrollbar-width:thin; }
.percentage-tracking-dialog-body:focus-visible { outline-offset:-3px; }
.percentage-tracking-dialog-group { display:grid; gap:0.5rem; min-width:0; }
.percentage-tracking-dialog .percentage-tracking-picks-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:0.125rem 0.5rem; margin:0; font-size:0.875rem; font-weight:400; }
.percentage-tracking-dialog .percentage-tracking-picks-head b { color:var(--ink); font-size:0.9375rem; }
.percentage-tracking-dialog .percentage-tracking-pick .profile-name-button { color:var(--ink); overflow-wrap:anywhere; }
.percentage-tracking-dialog .percentage-tracking-pick-result small { color:inherit; font-weight:700; }
.percentage-tracking-dialog .tone-good { color:var(--good); }
.percentage-tracking-dialog .tone-bad { color:var(--bad); }
.percentage-tracking-dialog .tone-thin { color:var(--thin); }
.percentage-tracking-picklist { display:grid; gap:0.25rem; margin:0; padding:0; list-style:none; }
.percentage-tracking-pick { display:flex; flex-wrap:wrap; align-items:baseline; gap:0.125rem 0.75rem; padding:0.375rem 0.625rem; border-radius:var(--r-control); background:var(--surface-raised); }
.percentage-tracking-pick .profile-name-button { font-weight:800; text-align:left; }
.percentage-tracking-pick-line { color:var(--muted); font-size:0.8125rem; white-space:nowrap; }
.percentage-tracking-pick-result { margin-left:auto; white-space:nowrap; font-weight:800; }
.percentage-tracking-pick-result:not([class*=tone-]) { color:var(--muted); }
/* UI-884: a top 5 picked before the week's props were all posted. A small "Early" mark on the
   strip, the note and each early pick; a pick that later dropped out of the top 5 stays under
   its list, struck through, with why (its result muted: it counts in no record). */
.percentage-tracking-early { display:inline-block; padding:0 0.375rem; border:1px solid var(--thin); border-radius:var(--r-control); background:var(--thin-bg); color:var(--thin); font:800 0.6875rem/1.45 var(--font-body); letter-spacing:0.02em; white-space:nowrap; }
.percentage-tracking-pick .percentage-tracking-early { align-self:center; }
.percentage-tracking-early-note { margin:0; color:var(--muted); font-size:0.8125rem; line-height:1.45; }
.percentage-tracking-early-note strong { color:var(--ink); }
.percentage-tracking-droplist { margin-top:0.25rem; }
.percentage-tracking-pick.is-dropped { background:none; border:1px dashed var(--line); }
.percentage-tracking-pick.is-dropped .profile-name-button, .percentage-tracking-pick.is-dropped > span:first-child, .percentage-tracking-pick.is-dropped .percentage-tracking-pick-line { text-decoration:line-through; text-decoration-thickness:1.5px; }
.percentage-tracking-dialog .percentage-tracking-pick.is-dropped .profile-name-button { color:var(--muted); }
.percentage-tracking-pick.is-dropped .percentage-tracking-pick-result { color:var(--muted); font-weight:600; }
.percentage-tracking-dropped { flex-basis:100%; color:var(--muted); font-size:0.75rem; font-weight:600; }
/* After kickoff (UI-371): the current week stays, each started row marked by state. The
   bar above the tiers says where the week stands and filters by game state; a started row's
   price is disabled, with the result (saved stats) or the live progress under it. Colour and
   words carry a result, never a check or cross mark. */
.percentage-state-bar { display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem 1rem; margin:0 0 1rem; padding:0.75rem 1rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); }
.percentage-state-line { flex:1 1 18rem; margin:0; color:var(--ink); font-size:0.875rem; font-weight:700; line-height:1.4; }
.percentage-state-chips button .percentage-mono { color:var(--muted); font-weight:600; }
.percentage-state-chips button[aria-pressed=true] .percentage-mono { color:inherit; }
.percentage-state-chips button:disabled { opacity:0.45; cursor:default; }
.percentage-state-note { flex-basis:100%; margin:0; color:var(--muted); font-size:0.75rem; line-height:1.4; }
.percentage-state-tag { font-weight:800; color:var(--ink); }
.percentage-state-tag.is-live { color:var(--accent-strong, var(--ink)); }
.percentage-state-tag.is-live::before { content:""; display:inline-block; width:0.4375rem; height:0.4375rem; margin-right:0.25rem; border-radius:50%; background:var(--bad); vertical-align:0.0625rem; }
.percentage-state-tag.is-awaiting, .percentage-state-tag.is-unofficial { color:var(--muted); }
.percentage-outcome { display:block; color:var(--muted); font-size:0.75rem; line-height:1.3; text-align:center; overflow-wrap:anywhere; }
.percentage-outcome b { font-weight:800; color:var(--ink); }
#percentagePanel .percentage-outcome.tone-good b { color:var(--good); }
#percentagePanel .percentage-outcome.tone-bad b { color:var(--bad); }
.percentage-outcome-note { display:block; font-size:0.625rem; }
#percentageResults .percentage-play.is-started .bet-side.ar-price:disabled { background:transparent; color:var(--muted); border-color:var(--line); cursor:default; }
#percentageResults .percentage-play.is-started .bet-side.ar-price[aria-pressed=true]:disabled { background:var(--selected-bg); color:var(--ink); border-color:var(--accent); }
.percentage-tracking-scope { padding:0.0625rem 0.5rem; border-radius:var(--r-card); background:var(--surface-raised); color:var(--ink); font:800 0.75rem var(--font-body); white-space:nowrap; }
/* NBA's tracked strategies (nba-tracked-view.js), in the Tracked Unders card's shape. The table
   scrolls sideways inside its card with the row names stuck at the left edge, in a column exactly
   --nba-names wide (a long label wraps rather than widening it): the scroll padding and the
   sliding group names line up with that edge. */
.nba-tracked-table { max-width:64rem; }
.nba-tracked-scroll { --nba-names:6.25rem; scroll-padding-inline-start:var(--nba-names); }
.nba-tracked-table thead tr:last-child th { min-width:5rem; }
.nba-tracked-table thead th small { display:block; margin-top:0.125rem; font-weight:600; }
.nba-tracked-groups th { padding-bottom:0.125rem; border-bottom:0; text-align:left; }
.nba-tracked-groups th > span { padding-bottom:0.25rem; border-bottom:2px solid var(--line); color:var(--muted); font-size:0.6875rem; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; white-space:nowrap; }
.nba-tracked-groups b { display:inline-block; position:sticky; left:var(--nba-names); font-weight:inherit; }
.nba-tracked-table :is(th[scope=row], thead td) { position:sticky; left:0; z-index:1; width:var(--nba-names); min-width:var(--nba-names); background:var(--surface); box-shadow:1px 0 0 var(--line); }
.nba-tracked-table th[scope=row], .nba-tracked-table th[scope=row] small { white-space:normal; }
.nba-tracked-table :is(th, td).is-group-start { border-left:1px solid var(--line); }
.nba-tracked-table tbody tr:first-child { background:none; }
.nba-tracked-table tbody tr:first-child .percentage-tracking-open:hover { background:var(--surface-raised); }
.nba-tracked-table tbody tr.is-total { background:var(--surface-raised); }
.nba-tracked-table tbody tr.is-total th[scope=row] { background:var(--surface-raised); }
.nba-tracked-table tbody tr.is-total .percentage-tracking-open:hover { background:var(--surface); }
.nba-tracked-table td.is-unused { color:var(--muted); vertical-align:middle; }
/* The finished weeks: a rule above the first, a lock (.percentage-tracking-lock) beside a settled one. */
.nba-tracked-table tr.is-past-first > :is(th, td) { border-top:2px solid var(--line); }
.nba-tracked-week { white-space:nowrap; }
.nba-tracked-empty { display:flex; align-items:baseline; gap:0.5rem; margin:0; color:var(--ink); font-size:0.875rem; font-weight:700; line-height:1.4; }
.nba-tracked-empty .percentage-early-dot { flex-shrink:0; }
/* The dialog: each pick's capture lead, score or confidence, CLV and overlaps on a line of its own. */
.nba-tracked-pick > small { color:var(--muted); font-weight:700; }
.nba-tracked-pick-meta { flex-basis:100%; color:var(--muted); font-size:0.75rem; line-height:1.4; }
.nba-tracked-pick-late { flex-basis:100%; color:var(--ink); font-size:0.75rem; font-weight:700; line-height:1.4; }
.nba-tracked-replayed { padding:0 0.375rem; border:1px dashed var(--thin); border-radius:var(--r-control); color:var(--thin); font-size:0.6875rem; font-weight:800; }
.nba-tracked-facts { display:grid; grid-template-columns:max-content 1fr; gap:0.375rem 0.875rem; margin:0; font-size:0.875rem; line-height:1.45; }
.nba-tracked-facts dt { color:var(--muted); font-weight:800; }
.nba-tracked-facts dd { margin:0; color:var(--ink); min-width:0; }
.nba-tracked-calibration { width:100%; border-collapse:collapse; font-size:0.8125rem; font-variant-numeric:tabular-nums; }
.nba-tracked-calibration caption { padding-bottom:0.25rem; color:var(--ink); font-weight:800; text-align:left; }
.nba-tracked-calibration :is(th, td) { padding:0.3125rem 0.5rem; border-bottom:1px solid var(--line); text-align:right; }
.nba-tracked-calibration :is(th[scope=row], thead th:first-child) { text-align:left; }
.nba-tracked-calibration thead th { color:var(--muted); font-size:0.75rem; }
@media (max-width:75em) {
  /* Tighter cells and a long second header line in two, so nine columns fit 1024px. */
  .nba-tracked-scroll { --nba-names:5.75rem; }
  .nba-tracked-table :is(th, td) { padding-inline:0.375rem; }
  .nba-tracked-table thead th small { width:max-content; max-width:5.25rem; margin-left:auto; white-space:normal; }
}
@media (max-width:40em) {
  .nba-tracked-facts { grid-template-columns:1fr; gap:0.125rem; }
  .nba-tracked-facts dd + dt { margin-top:0.375rem; }
}
@media (prefers-reduced-motion: reduce) {
  .percentage-more { animation:none; }
  .percentage-chips button, .percentage-seg button,
  .percentage-more-toggle svg, .percentage-rest-show svg, .percentage-more-props svg,
  .percentage-why-toggle svg, .percentage-tracking summary svg,.percentage-open-page:active { transition:none; }
}
@media (max-width:40em) {
  .percentage-tracking summary { padding:0.75rem 1rem; }
  .percentage-tracking-body { padding:0 1rem 0.875rem; }
  .percentage-tracking-table :is(th, td) { padding:0.5rem 0.375rem; }
  /* The six-column table: the row's name sticks, with a rule on its right edge. The scroll
     padding is the sticky column's width (7rem and its two 0.375rem paddings), so a focused cell
     is never left under it. */
  .percentage-tracking-scroll:has(th.is-strategy) { scroll-padding-inline-start:7.75rem; }
  .percentage-tracking-table:has(th.is-strategy) :is(th[scope=row], thead td) { position:sticky; left:0; z-index:1; width:7rem; min-width:7rem; max-width:7rem; background:var(--surface); box-shadow:1px 0 0 var(--line); }
  .percentage-tracking-table:has(th.is-strategy) tbody tr:first-child th[scope=row] { background:var(--surface-raised); }
  .percentage-tracking-dialog { width:calc(100% - 1rem); }
  .percentage-tracking-dialog-head { padding:0.875rem; }
  .percentage-tracking-dialog-head h2 { font-size:1.1875rem; }
  .percentage-tracking-dialog-body { padding:0.75rem 0.875rem 0.875rem; }
}