/* styles/views/results.css: results, Today, Progress, charts, glyph (.res-*, .td-*, .pg-*, .ch-*) (owner E3, UX spec §13.1).
   Tokens only, no hex values. Animate transform and opacity only. */

/* =========================================================================
   Charts: shared
   ========================================================================= */
.ch-trend text, .ch-compass-lbl, .ch-sline text { font-family: var(--font-mono); }

/* ---------- Launch Signature glyph ---------- */
.ch-glyph { display: inline-block; width: var(--sz); height: var(--sz); flex: none; color: var(--brand); }
.ch-glyph svg { width: 100%; height: 100%; overflow: visible; }
.ch-glyph-guide { fill: none; stroke: var(--grid-major); stroke-width: .8; }
.ch-glyph-stop0 { stop-color: var(--tc); stop-opacity: .22; }
.ch-glyph-stop1 { stop-color: var(--tc); stop-opacity: 0; }
.ch-glyph-fill { stroke: none; }
.ch-glyph-core { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linejoin: round; }
.ch-glyph-phase { fill: none; stroke-width: 4; stroke-linecap: butt; }
.ch-glyph-flight { fill: none; stroke: var(--gold-hi); stroke-width: 2; stroke-linecap: round; }
[data-theme="light"] .ch-glyph-flight { stroke: var(--gold); }
.ch-glyph-strand { fill: none; stroke-width: 1.25; opacity: .7; }
.ch-glyph-strand--l { stroke: var(--foot-l); }
.ch-glyph-strand--r { stroke: var(--foot-r); }
.ch-glyph-compare { fill: none; stroke: var(--ghost); stroke-width: 1.2; stroke-dasharray: 3 3; }
.ch-glyph-letter { font-family: var(--font-num); font-weight: 600; font-size: 10px; fill: var(--ink-2); letter-spacing: .04em; }
.ch-glyph.is-drawing .ch-glyph-core, .ch-glyph.is-drawing .ch-glyph-phase, .ch-glyph.is-drawing .ch-glyph-flight, .ch-glyph.is-drawing .ch-glyph-strand {
  stroke-dasharray: 1 1; animation: ch-draw 500ms var(--ease-out) both;
}
.ch-glyph.is-drawing .ch-glyph-flight { animation-delay: 260ms; }
.ch-glyph.is-drawing .ch-glyph-fill { animation: ch-fade 400ms var(--ease-out) 200ms both; }
.ch-glyph--empty .ch-glyph-guide { stroke-dasharray: 2 3; stroke: var(--line-strong); }
@keyframes ch-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ch-fade { from { opacity: 0; } }

/* ---------- PercentileBar ---------- */
/* results preview (dev route): nine equal states in a row that scrolls sideways on phones */
.res-prev-scroll { width: 100%; overflow-x: auto; scrollbar-width: none; }
.res-prev-seg { width: max-content; grid-template-columns: repeat(var(--seg-n), 64px); }
.res-prev-seg .ui-seg-opt { padding: 0 4px; }
/* the mover is a full-width box shifted by p%: clip it sideways (not the marker's own few px) so it never widens the page */
.ch-pbar { position: relative; width: 100%; padding-top: 6px; overflow-x: clip; overflow-clip-margin: 6px; }
.ch-pbar-track { display: flex; gap: 2px; height: 8px; }
.ch-pbar.is-compact .ch-pbar-track { height: 6px; }
.ch-pbar-seg { position: relative; flex: var(--w) 1 0; border-radius: 2px; overflow: hidden; background: color-mix(in srgb, var(--tc) 16%, transparent); }
.ch-pbar-seg:first-child { border-radius: var(--r-pill) 2px 2px var(--r-pill); }
.ch-pbar-seg:last-child { border-radius: 2px var(--r-pill) var(--r-pill) 2px; }
.ch-pbar-fill { position: absolute; inset: 0; background: var(--tc); transform-origin: left; transform: scaleX(var(--lit)); }
.ch-pbar-mover { position: absolute; left: 0; right: 0; top: 0; height: 100%; pointer-events: none; }
.ch-pbar-marker { position: absolute; left: -2px; top: 0; width: 4px; height: 20px; border-radius: var(--r-pill); background: var(--ink); box-shadow: 0 0 0 2px var(--bg); }
.ch-pbar.is-compact .ch-pbar-marker { height: 18px; }
.ch-pbar-ghost { position: absolute; left: -1px; top: 2px; width: 2px; height: 16px; border-left: 2px dashed var(--ghost); }
.ch-pbar-labels { display: flex; gap: 2px; margin-top: 6px; }
.ch-pbar-label { flex: var(--w) 1 0; font-size: 11px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; }
.ch-pbar-label.is-current { color: var(--tc); }

/* ---------- Sparkline ---------- */
.ch-spark { flex: none; overflow: visible; }
.ch-spark-line { fill: none; stroke: var(--tone); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.ch-spark-area { fill: color-mix(in srgb, var(--tone) 14%, transparent); stroke: none; }
.ch-spark-dot { fill: var(--tone); }
.ch-spark-halo { fill: none; stroke: var(--tone); stroke-width: 1; stroke-dasharray: 1.5 1.5; opacity: .8; }
.ch-spark-none { stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 2 3; }

/* ---------- WeekDots ---------- */
.ch-week { display: flex; flex-wrap: wrap; align-items: center; column-gap: clamp(6px, 2.6vw, 12px); row-gap: 6px; min-height: 40px; min-width: 0; }
.ch-week-k { font-size: var(--fs-label); font-weight: 650; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }
.ch-week-days { display: flex; gap: clamp(3px, 1.2vw, 6px); flex: 1 1 auto; justify-content: space-between; max-width: 260px; min-width: 0; }
.ch-week-end { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; min-width: 0; }
.ch-week-day { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.ch-week-l { font-size: 11px; font-weight: 650; color: var(--muted); line-height: 1; }
.ch-week-dot { position: relative; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; color: var(--ice); }
.ch-week-day.is-train .ch-week-dot, .ch-week-day.is-trainToday .ch-week-dot { background: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.ch-week-day.is-rest .ch-week-dot { background: linear-gradient(90deg, var(--line-strong) 50%, transparent 50%); border: 1.5px solid var(--line-strong); }
.ch-week-day.is-today .ch-week-dot { border: 2px solid var(--brand); }
.ch-week-day.is-today .ch-week-l, .ch-week-day.is-trainToday .ch-week-l { color: var(--brand-strong); }
.ch-week-day.is-future .ch-week-dot::after, .ch-week-day.is-past .ch-week-dot::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--faint); }
.ch-week-day.is-past .ch-week-dot { border: 1.5px dashed var(--line); }
.ch-week-day.is-freeze .ch-week-dot { border: 1.5px solid var(--ice); }
.ch-week-day.has-tick .ch-week-dot { background: transparent; box-shadow: none; border: 2px solid var(--brand); }
.ch-week-fill { position: absolute; inset: -2px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.ch-week-n { font-size: var(--fs-small); color: var(--muted); white-space: nowrap; }
.ch-week-n b { font-family: var(--font-num); font-size: 20px; font-weight: 700; color: var(--ink); }
.ch-week-freeze { display: inline-flex; gap: 1px; color: var(--ice); }
.ch-week.is-compact .ch-week-k { display: none; }
@media (max-width: 380px) { .ch-week-k { display: none; } }

/* ---------- Readiness dial + strip ---------- */
.ch-dial { position: relative; width: var(--sz); max-width: 100%; display: flex; flex-direction: column; align-items: center; }
.ch-dial > svg { width: 100%; height: auto; overflow: visible; }
.ch-dial-zone { fill: none; stroke: color-mix(in srgb, var(--zc) 28%, transparent); stroke-width: 14; stroke-linecap: butt; }
.ch-dial-zone.is-on { stroke: var(--zc); }
.ch-dial-tick { stroke: var(--axis); stroke-width: 1; opacity: .6; }
.ch-dial-tick.is-zero { stroke: var(--ink-2); stroke-width: 1.6; opacity: 1; }
.ch-dial-needle { transform-box: view-box; transform-origin: 100px 100px; }
.ch-dial-needle line { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.ch-dial-needle circle { fill: var(--zc); stroke: var(--bg); stroke-width: 2; }
.ch-dial-hub { fill: var(--surface-3); stroke: var(--ink); stroke-width: 2; }
.ch-dial-read { margin-top: -6px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.ch-dial-word { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-num); font-weight: 700; font-size: 22px; letter-spacing: .06em; text-transform: uppercase; }
.ch-dial-sub { font-size: var(--fs-small); color: var(--muted); }
.ch-dial.is-building .ch-dial-zone { stroke-dasharray: 3 4; }
.ch-rstrip { display: grid; grid-template-columns: repeat(28, 1fr); gap: 3px; align-items: end; height: 26px; }
.ch-rcell { height: 24px; border-radius: 4px; background: transparent; position: relative; }
.ch-rcell.is-none::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%; background: var(--faint); }
.ch-rcell.is-go { background: var(--zc); }
.ch-rcell.is-normal { background: color-mix(in srgb, var(--zc) 70%, transparent); height: 14px; }
.ch-rcell.is-technique { border: 1.5px solid var(--zc); height: 18px; }

/* ---------- AsymmetryChart ---------- */
.ch-asym { margin: 0; }
.ch-asym-head { display: flex; justify-content: space-between; padding: 0 44px 6px 56px; font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ch-asym-body { display: grid; grid-template-columns: 56px 1fr 44px; align-items: start; }
.ch-asym-dates, .ch-asym-vals { display: flex; flex-direction: column; }
.ch-asym-dates span, .ch-asym-vals span { height: 28px; display: flex; align-items: center; font-size: var(--fs-label); color: var(--muted); font-family: var(--font-mono); }
.ch-asym-vals span { justify-content: flex-end; color: var(--ink-2); gap: 2px; }
.ch-asym-vals i { font-style: normal; font-size: 10px; color: var(--muted); }
.ch-asym-vals .is-warn { color: var(--warn-ink); }
.ch-asym-vals .is-red { color: var(--bad); }
.ch-asym-svg { width: 100%; display: block; }
.ch-asym-zone.is-good { fill: var(--good-soft); }
.ch-asym-zone.is-warn { fill: var(--warn-soft); }
.ch-asym-zone.is-bad { fill: var(--bad-soft); }
.ch-asym-axis { stroke: var(--line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ch-asym-bar { animation: ch-grow-x 420ms var(--ease-out) both; }
.ch-asym-bar.is-ok { fill: var(--good); }
.ch-asym-bar.is-warn { fill: var(--warn); }
.ch-asym-bar.is-red { fill: var(--bad); }
.ch-asym-mean { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 4 3; opacity: .7; }
.ch-asym-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: var(--s-3); font-size: var(--fs-micro); color: var(--muted); }
.ch-asym-key { display: inline-block; width: 12px; height: 8px; border-radius: 2px; margin-right: -4px; }
.ch-asym-key.is-good { background: var(--good); }
.ch-asym-key.is-warn { background: var(--warn); }
.ch-asym-key.is-mean { height: 0; border-top: 1.5px dashed var(--ink); opacity: .7; }
.ch-asym.is-empty { padding: var(--s-4) 0; }
@keyframes ch-grow-x { from { transform: scaleX(0); } }

/* ---------- Score ring ---------- */
bw-score-ring { display: inline-block; }
.ch-sring { position: relative; width: var(--sz); height: var(--sz); }
.ch-sring svg { width: 100%; height: 100%; overflow: visible; }
.ch-sring-track { fill: none; stroke: var(--line-strong); stroke-width: 1.5; stroke-linecap: round; }
.ch-sring.is-provisional .ch-sring-track { stroke-dasharray: 1.4 1.6; }
.ch-sring.is-empty .ch-sring-track { stroke-dasharray: 1 2.2; opacity: .8; }
.ch-sring-tick { stroke: var(--tk); stroke-width: 1.9; stroke-linecap: round; opacity: 0; transition: opacity 140ms var(--ease-out); }
.ch-sring-tick.is-on { opacity: 1; }
[data-motion="reduced"] .ch-sring-tick { transition: none; }
.ch-sring-bound { stroke: var(--faint); stroke-width: 1.4; stroke-linecap: round; }
.ch-sring-bound.is-reached { stroke: var(--tk); }
.ch-sring-head { fill: var(--tk); stroke: var(--bg); stroke-width: 1.2; }
.ch-sring-center { position: absolute; inset: 14%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; }
.ch-sring .ch-sring-num { font-size: calc(var(--sz) * .36); color: var(--ink); }
.ch-sring-tier { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-num); font-weight: 700; font-size: calc(var(--sz) * .1); letter-spacing: .1em; text-transform: uppercase; color: var(--tc); }
.ch-sring-q { font-family: var(--font-num); font-weight: 700; font-size: calc(var(--sz) * .42); color: var(--faint); line-height: 1; }

/* ---------- Mini compass ---------- */
.ch-compass { width: var(--sz); height: var(--sz); flex: none; }
.ch-compass svg { width: 100%; height: 100%; overflow: visible; }
.ch-compass-ring { fill: none; stroke: var(--grid-major); stroke-width: 1; }
.ch-compass-ring.is-minor { stroke-dasharray: 2 3; }
.ch-compass-spoke { stroke: var(--grid-major); stroke-width: .8; }
.ch-compass-petal { fill: color-mix(in srgb, var(--brand) 32%, transparent); stroke: var(--brand); stroke-width: 1.2; stroke-linejoin: round; transform-origin: 60px 60px; transform-box: view-box; animation: ch-petal 420ms var(--spring-pop) both; }
.ch-compass-petal.is-best { stroke: var(--gold); stroke-width: 2; fill: color-mix(in srgb, var(--gold) 26%, transparent); }
.ch-compass-petal.is-weak { stroke: var(--warn); stroke-dasharray: 3 2; fill: var(--warn-soft); }
.ch-compass-ghost { fill: none; stroke: var(--ghost); stroke-width: 1.2; stroke-dasharray: 3 3; }
.ch-compass-hub { fill: var(--surface-3); stroke: var(--ink-2); stroke-width: 1.2; }
.ch-compass-lbl { font-size: 8px; fill: var(--muted); letter-spacing: .04em; }
@keyframes ch-petal { from { transform: scale(0); opacity: 0; } }

/* ---------- Score history line ---------- */
.ch-sline { width: 100%; height: auto; overflow: visible; }
.ch-sline-grid { stroke: var(--grid); stroke-width: 1; }
.ch-sline-base { stroke: var(--line-strong); stroke-dasharray: 3 4; }
.ch-sline-step { fill: none; stroke: var(--brand-strong); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.ch-sline-step.is-prov { stroke-dasharray: 4 4; opacity: .8; }
.ch-sline-dot { fill: var(--brand); stroke: var(--surface); stroke-width: 2; }
.ch-sline .ch-sline-val { font-family: var(--font-num); font-weight: 700; font-size: 16px; fill: var(--ink); }
.ch-sline-season { stroke: var(--line-strong); stroke-dasharray: 2 3; }
.ch-sline-slbl { font-size: 9px; fill: var(--muted); }

/* ---------- Trend chart ---------- */
bw-trend { display: block; width: 100%; }
.ch-trend { position: relative; width: 100%; overflow: visible; }
.ch-trend-svg { display: block; width: 100%; height: 100%; overflow: visible; touch-action: pan-y; outline: none; cursor: crosshair; -webkit-user-select: none; user-select: none; }
.ch-trend-svg:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: var(--r-sm); }
.ch-trend-grid line { stroke: var(--grid); stroke-width: 1; }
.ch-trend-grid line.is-v { stroke-dasharray: 2 4; opacity: .7; }
.ch-trend-yaxis text, .ch-trend-xaxis text { font-size: 11px; fill: var(--axis); }
.ch-trend-faster { font-size: 11px; fill: var(--muted); font-weight: 600; }
.ch-trend-band { fill: var(--band-swc); stroke: none; }
.ch-trend-noise { font-size: 10px; fill: var(--brand-strong); letter-spacing: .06em; text-transform: uppercase; opacity: .9; }
.ch-trend-dip { fill: var(--band-dip); }
.ch-trend-diplbl { font-size: 10px; fill: var(--warn-ink); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ch-trend-stair { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linejoin: miter; opacity: .9; }
.ch-trend-pb { fill: var(--gold); stroke: var(--surface); stroke-width: 1.5; animation: ch-fade 300ms var(--ease-out) both; }
.ch-trend-pb.is-hover { stroke: var(--ink); }
.ch-trend-median { fill: none; stroke: var(--brand-strong); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1 1; animation: ch-draw 700ms var(--ease-out) both; }
.ch-trend-dot { fill: var(--surface); stroke: var(--tone); stroke-width: 2; animation: ch-fade 300ms var(--ease-out) both; }
.ch-trend-dot.is-hollow { fill: none; stroke-dasharray: 2 2; opacity: .75; }
.ch-trend-dot.is-two { stroke: var(--tone2); }
.ch-trend-dot.is-hover { fill: var(--tone); stroke: var(--surface); stroke-width: 2.5; }
.ch-trend-tiers line { stroke-width: 3; stroke-linecap: round; }
.ch-trend-tiername { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ch-trend-cross { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 3 3; }
.ch-trend-hit { fill: transparent; }
.ch-trend-tip {
  position: absolute; top: -34px; transform: translateX(-50%); z-index: 2; pointer-events: none;
  padding: 5px 10px; border-radius: var(--r-pill); background: var(--ink); color: var(--bg);
  font-size: var(--fs-label); font-weight: 650; white-space: nowrap; box-shadow: var(--shadow-1);
}
.ch-trend.is-empty { display: grid; }
.ch-trend.is-empty > * { grid-area: 1 / 1; }
.ch-trend-ghostline { fill: none; stroke: var(--line-strong); stroke-width: 3; stroke-dasharray: 6 6; stroke-linecap: round; }
.ch-trend-emptytext { align-self: center; justify-self: center; max-width: 240px; text-align: center; color: var(--ink-2); font-weight: 600; padding: var(--s-3); background: color-mix(in srgb, var(--surface) 80%, transparent); border-radius: var(--r-md); }

/* =========================================================================
   Today
   ========================================================================= */
.td { display: grid; gap: var(--s-3); padding-top: var(--s-1); }
.td-col { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.td-hero { margin: 0 calc(var(--gutter) * -1); padding: var(--s-2) var(--gutter) var(--s-2); display: flex; flex-direction: column; gap: var(--s-3); }
.td-kicker { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: var(--fs-label); font-weight: 650; letter-spacing: var(--track-label); color: var(--muted); }
.td-info { width: 32px; height: 32px; margin: -8px -6px -8px -4px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); position: relative; }
.td-info::before { content: ""; position: absolute; inset: -8px; }
.td-hero-row { display: flex; align-items: center; gap: var(--s-4); }
.td-ring { flex: none; border-radius: 50%; transition: transform var(--dur-1) var(--ease-standard); }
.td-ring:active { transform: scale(.97); }
.td-hero-side { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.td-up { font-family: var(--font-num); font-weight: 700; font-size: 22px; line-height: 1; color: var(--brand-strong); }
.td-up span { font-family: var(--font-ui); font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.td-rank { display: flex; flex-direction: column; gap: 2px; }
.td-rank b { font-family: var(--font-num); font-size: 28px; font-weight: 700; line-height: 1; letter-spacing: .01em; }
.td-rank span { font-size: var(--fs-small); color: var(--ink-2); }
.td-counted { font-size: var(--fs-label); color: var(--muted); }
.td-empty { color: var(--ink-2); font-size: var(--fs-small); }
.td-ready {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 10px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--zc) 13%, transparent); color: var(--zc); border: 1px solid color-mix(in srgb, var(--zc) 30%, transparent); position: relative;
}
.td-ready::before { content: ""; position: absolute; inset: -4px 0; }
.td-ready-w { font-family: var(--font-num); font-weight: 700; font-size: 16px; letter-spacing: .08em; }
.td-ready-t { font-size: var(--fs-label); color: var(--ink-2); }
.td-notsaved { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: var(--r-pill); background: var(--warn-soft); color: var(--warn-ink); font-size: var(--fs-label); font-weight: 650; }

.td-suggest {
  position: relative; padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4); border-radius: var(--r-lg); background: var(--surface);
  border: 1px solid var(--brand-line); box-shadow: inset 0 1px 0 var(--highlight); overflow: hidden; contain: layout paint;
}
.td-suggest::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--brand); }
[data-theme="light"] .td-suggest { box-shadow: var(--shadow-1); }
.td-suggest-k { display: block; font-size: 11px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-strong); margin-bottom: 6px; }
.td-suggest-row { display: flex; align-items: center; gap: var(--s-3); }
.td-suggest-ic { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-strong); }
.td-suggest-txt { flex: 1 1 auto; min-width: 0; }
.td-suggest-t { font-weight: 700; font-size: var(--fs-body); line-height: 1.25; }
.td-suggest-s { font-size: var(--fs-label); color: var(--muted); line-height: 1.35; margin-top: 2px; }
.td-start { flex: none; padding: 0 var(--s-4); }

.td-quest { display: flex; align-items: center; gap: var(--s-2); min-height: 48px; padding: 0 var(--s-2) 0 0; text-align: left; color: var(--ink); }
.td-quest-k { flex: none; padding: 3px 8px; border-radius: 4px; border: 1.5px dashed var(--warn); color: var(--warn-ink); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; background: var(--warn-soft); }
.td-quest-t { flex: 1 1 auto; font-weight: 600; font-size: var(--fs-small); }
.td-quest .ui-icon { color: var(--muted); }

.td-week { padding: var(--s-3) var(--s-4); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--highlight); }
[data-theme="light"] .td-week { box-shadow: var(--shadow-1); border-color: transparent; }
.td-week-line { margin-top: 4px; font-size: var(--fs-label); color: var(--muted); }

.td-bests-head { margin: var(--s-2) 0 0; }
.td-tiles { display: flex; gap: var(--s-2); overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--gutter) * -1); padding: 4px var(--gutter) 8px; scrollbar-width: none; }
.td-tiles::-webkit-scrollbar { display: none; }
.td-tiles > div { scroll-snap-align: start; flex: none; }
.td-tile {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; width: 148px; height: 112px; padding: var(--s-3);
  text-align: left; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--highlight);
  transition: transform var(--dur-1) var(--ease-standard); contain: layout paint;
}
[data-theme="light"] .td-tile { box-shadow: var(--shadow-1); border-color: transparent; }
.td-tile:active { transform: scale(.97); }
.td-tile.has-today { border-color: var(--brand-line); }
.td-tile.is-pb { border-color: color-mix(in srgb, var(--gold) 55%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 10%, var(--surface)), var(--surface) 60%); }
.td-tile-k { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.td-tile-star { color: var(--gold); display: inline-flex; margin-left: auto; }
.td-tile bw-number { color: var(--brand-strong); }
.td-tile.is-pb bw-number { color: var(--gold-hi); }
[data-theme="light"] .td-tile.is-pb bw-number { color: var(--gold); }
.td-tile-dash { font-size: 30px; font-weight: 600; color: var(--faint); line-height: 1; }
.td-tile-sub { font-size: var(--fs-label); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-pb { color: var(--gold); font-weight: 700; letter-spacing: .04em; }
.td-tile bw-number[tone="muted"], .td-tile-lr.is-best { color: var(--muted); }
.td-best-k { color: var(--ink-2); font-weight: 700; letter-spacing: .08em; }
.td-tile-lr { display: flex; flex-direction: column; gap: 1px; font-size: 19px; font-weight: 600; line-height: 1; }
.td-tile-lr span { display: flex; align-items: baseline; gap: 5px; }
.td-tile-lr i { font-style: normal; font-size: 12px; font-weight: 700; width: 12px; }
.td-tile-lr .is-l { color: var(--foot-l); }
.td-tile-lr .is-r { color: var(--foot-r); }
.td-teasers { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.td-teasers > * { min-width: 0; }
.td-moment { min-width: 0; }

[data-viewport="wide"] .td, [data-viewport="xl"] .td { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; padding-top: var(--s-4); }
[data-viewport="wide"] .td-hero, [data-viewport="xl"] .td-hero { margin: 0; padding: var(--s-4); border-radius: var(--r-lg); background-color: var(--surface); border: 1px solid var(--line); }
[data-theme="light"][data-viewport="wide"] .td-hero, [data-theme="light"][data-viewport="xl"] .td-hero { border-color: transparent; box-shadow: var(--shadow-1); }
[data-viewport="wide"] .td-tiles, [data-viewport="xl"] .td-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); overflow: visible; margin: 0; padding: 0; }
[data-viewport="wide"] .td-tile, [data-viewport="xl"] .td-tile { width: 100%; }

/* =========================================================================
   Results: <bw-result>
   ========================================================================= */
bw-result { display: block; }
.res { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--s-3); text-align: center; padding: var(--s-2) 0 var(--s-4); }
/* the glow behind the number reaches past the stage: clip it sideways (it is transparent there) so it never widens the page */
.res-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; padding-top: 34px; isolation: isolate; overflow-x: clip; }
.res-stage::before { content: ""; position: absolute; inset: -20px -40px 0; background: radial-gradient(60% 70% at 50% 40%, var(--brand-soft), transparent 70%); pointer-events: none; z-index: -1; }
.res-num { position: relative; line-height: .9; }
/* reduced-motion PB mark: a gold underline + glow under the digits only (never crosses the lines below) */
.res-num.has-gold .ui-num-digits { position: relative; }
.res-num.has-gold .ui-num-digits::after { content: ""; position: absolute; left: 4%; right: 4%; bottom: -.05em; height: 3px; border-radius: var(--r-pill); background: var(--gold); box-shadow: 0 0 12px color-mix(in srgb, var(--gold) 70%, transparent); pointer-events: none; }
/* landing from the live number: digit cells masked like any roll (app.css) */
.res-num.is-landing .ui-num-cell {
  -webkit-mask-image: linear-gradient(transparent, black 22%, black 78%, transparent); mask-image: linear-gradient(transparent, black 22%, black 78%, transparent);
}
/* landing from the live number: a short roll, all digits together */
.res-num.is-landing .ui-num-strip { transition-duration: 320ms !important; transition-delay: 0ms !important; }
.res-slam {
  position: absolute; top: 0; left: 50%; translate: -50% 0; display: inline-flex; padding: 6px 18px 6px 14px; transform: skewX(var(--skew));
  background: var(--surface-3); border-left: 4px solid var(--gold); border-radius: 2px;
  font-family: var(--font-num); font-weight: 800; font-size: 22px; line-height: 1; letter-spacing: var(--track-chyron); color: var(--gold-hi); white-space: nowrap;
}
[data-theme="light"] .res-slam { color: var(--gold); background: var(--surface); box-shadow: var(--shadow-1); }
.res-slam-l { display: inline-block; transform: skewX(calc(var(--skew) * -1)); }
.res-today {
  position: absolute; top: 2px; left: 50%; translate: -50% 0; display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--brand-soft); color: var(--brand-strong); border: 1px solid var(--brand-line);
  font-family: var(--font-num); font-weight: 700; font-size: 15px; letter-spacing: .1em; white-space: nowrap;
}
.res-secondary { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink-2); letter-spacing: .01em; }
.res-verify { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-label); font-weight: 650; color: var(--muted); }
.res-verify.is-ok { color: var(--good); }
.res-hold { display: flex; flex-direction: column; gap: 2px; max-width: 340px; padding: 10px 14px; border-radius: var(--r-md); background: var(--warn-soft); color: var(--warn-ink); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); }
.res-hold b { font-family: var(--font-num); font-size: 17px; letter-spacing: .08em; }
.res-hold span { font-size: var(--fs-label); color: var(--ink-2); }
.res-delta { display: inline-flex; align-items: baseline; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 6px 14px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); font-size: var(--fs-small); font-weight: 650; }
.res-delta.is-up .res-delta-arrow { color: var(--brand-strong); font-size: .8em; }
.res-delta-was { color: var(--muted); font-weight: 500; text-decoration-thickness: 1.5px; }
.res-rank { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-2); width: 100%; max-width: 380px; }
.res-rank-row { display: flex; align-items: center; justify-content: center; gap: var(--s-2); flex-wrap: wrap; }
.res-rank-chy { display: inline-block; transform: skewX(var(--skew)); padding: 7px 14px 7px 12px; background: var(--surface-3); border-left: 4px solid var(--brand); border-radius: 2px; }
[data-theme="light"] .res-rank-chy { background: var(--surface); box-shadow: var(--shadow-1); }
.res-rank-txt { display: inline-block; transform: skewX(calc(var(--skew) * -1)); font-family: var(--font-num); font-weight: 700; font-size: 17px; line-height: 1; letter-spacing: var(--track-chyron); color: var(--ink); white-space: nowrap; }
.res-rank-emb { display: inline-flex; align-items: center; gap: 4px; }
.res-rank-tier { font-family: var(--font-num); font-weight: 700; font-size: 16px; letter-spacing: .1em; text-transform: uppercase; color: var(--tc); }
.res-rank-more { display: flex; flex-direction: column; gap: 8px; }
.res-rank-next { display: flex; align-items: center; justify-content: center; gap: var(--s-2); font-size: var(--fs-small); color: var(--ink-2); flex-wrap: wrap; }
.res-early { min-height: 32px; padding: 0 10px; border-radius: var(--r-pill); border: 1px dashed var(--line-strong); color: var(--muted); font-size: var(--fs-micro); font-weight: 650; position: relative; }
.res-early::before { content: ""; position: absolute; inset: -8px -2px; }
.res-beta { font-family: var(--font-num); font-weight: 700; font-size: 15px; letter-spacing: .1em; color: var(--violet); }
.res-foot { display: flex; align-items: center; justify-content: center; gap: var(--s-4); flex-wrap: wrap; }
.res-sig { display: inline-flex; align-items: center; gap: var(--s-3); text-align: left; }
.res-sig-txt { display: flex; flex-direction: column; gap: 2px; }
.res-sig-name { font-family: var(--font-num); font-weight: 700; font-size: 15px; letter-spacing: .1em; color: var(--ink-2); }
.res-sig-replay { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; color: var(--brand-strong); font-size: var(--fs-label); font-weight: 650; position: relative; }
.res-sig-replay::before { content: ""; position: absolute; inset: -6px -4px; }
.res-units .ui-seg { min-width: 108px; }
.res-actions { display: flex; gap: var(--s-2); width: 100%; max-width: 420px; }
.res-actions .ui-btn { flex: 1 1 0; }
.res .ui-note { max-width: 320px; }
.res.is-compact { gap: var(--s-2); padding-bottom: var(--s-2); }
.res.is-compact .res-stage { padding-top: 30px; }
.res.is-fault .res-fault { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--s-4); width: 100%; max-width: 380px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--warn); }
.res-fault-dash { font-size: var(--fs-display); line-height: 1; color: var(--faint); }
.res-fault-title { font-family: var(--font-num); font-weight: 700; font-size: 24px; letter-spacing: .06em; }
.res-fault-fix { color: var(--ink-2); }
.res-fault-status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-label); color: var(--muted); margin-top: 4px; }

/* ---------- Attempt sheet ---------- */
.res-as { display: flex; flex-direction: column; gap: var(--s-4); padding-bottom: var(--s-2); }
.res-as-head { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.res-as-head bw-number { font-size: 56px; }
.res-as-verify { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); font-weight: 650; color: var(--muted); }
.res-as-verify.is-ok { color: var(--good); }
.res-as-notes, .res-as-flags { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-label); color: var(--ink-2); }
.res-as-flags li { display: flex; gap: 8px; align-items: flex-start; }
.res-as-flags .ui-icon { color: var(--info); margin-top: 1px; }
.res-as-fault { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--r-md); background: var(--warn-soft); border-top: 3px solid var(--warn); }
.res-as-fault b { font-family: var(--font-num); font-size: 20px; letter-spacing: .06em; color: var(--warn-ink); }
.res-as-sig { display: grid; grid-template-columns: 140px 1fr; gap: var(--s-4); align-items: center; }
.res-as-sig .ch-glyph { width: 140px; height: 140px; }
.res-as-arch { font-family: var(--font-num); font-weight: 700; font-size: 26px; letter-spacing: .06em; text-transform: uppercase; }
.res-as-phases { margin-top: var(--s-3); display: flex; flex-direction: column; gap: 6px; }
.res-as-pbar { display: flex; gap: 2px; height: 8px; border-radius: var(--r-pill); overflow: hidden; }
.res-as-pdl { display: grid; grid-template-columns: 1fr 1fr; gap: 4px var(--s-3); font-size: var(--fs-label); }
.res-as-pdl div { display: flex; justify-content: space-between; gap: 6px; }
.res-as-pdl dt { display: flex; align-items: center; gap: 5px; color: var(--muted); }
.res-as-pdl dd { margin: 0; color: var(--ink); }
.res-as-pdl i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.res-as-pdl i.is-flight { background: transparent; border: 1.5px solid var(--gold-hi); }
.res-as-total { font-size: var(--fs-micro); color: var(--muted); }
.res-as-trace { margin: 0; }
.res-as-trace svg { width: 100%; height: auto; }
.res-as-ph { opacity: .12; }
.res-as-bw { stroke: var(--axis); stroke-dasharray: 3 3; }
.res-as-foot { fill: none; stroke-width: 1.2; opacity: .7; }
.res-as-force { fill: none; stroke: var(--brand-strong); stroke-width: 2.2; stroke-linejoin: round; }
.res-as-key { display: inline-block; width: 10px; height: 3px; border-radius: 2px; vertical-align: middle; margin: 0 6px 0 2px; }
.res-as-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.res-as-metrics div { padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface-2); }
.res-as-metrics dt { font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.res-as-metrics dd { margin: 2px 0 0; font-size: 20px; font-weight: 600; }
.res-as-reps ol { display: flex; flex-direction: column; margin-top: 6px; }
.res-as-reps li { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: var(--s-2); min-height: 44px; border-bottom: 1px solid var(--line); }
.res-as-reps li.is-current { background: var(--brand-soft); border-radius: var(--r-sm); padding: 0 6px; margin: 0 -6px; }
.res-as-reps li.is-fault .res-as-repv { color: var(--muted); }
.res-as-repn { color: var(--muted); font-size: 15px; }
.res-as-repv { font-size: 20px; font-weight: 600; }
.res-as-repx { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-label); color: var(--muted); }
.res-as-repx .ui-icon { color: var(--gold); }
.res-as-lab { padding: var(--s-3); border-radius: var(--r-md); border: 1px dashed var(--line-strong); }

/* ---------- Session summary ---------- */
.res-sum { min-height: 100vh; min-height: 100dvh; max-width: 640px; margin: 0 auto; padding: calc(var(--safe-top) + 4px) var(--gutter) calc(var(--safe-bottom) + var(--s-6)); display: flex; flex-direction: column; gap: var(--s-3); }
.res-sum-bar { display: flex; align-items: center; justify-content: space-between; height: var(--run-bar-h); margin: 0 -8px; }
.res-sum-mark { color: var(--brand); display: inline-flex; }
.res-sum-spacer { width: var(--tap); }
.res-sum-load { display: flex; flex-direction: column; gap: var(--s-3); }
.res-sum-head { position: relative; display: flex; flex-direction: column; gap: 4px; padding: var(--s-2) 0 var(--s-2); }
.res-sum-h1 { font-family: var(--font-num); font-weight: 800; font-size: 44px; line-height: .95; letter-spacing: .02em; text-transform: uppercase; transform: skewX(var(--skew)); transform-origin: left; }
.res-sum-sub { color: var(--ink-2); font-size: var(--fs-small); }
.res-sum-pbs { color: var(--gold); }
.res-sum-stamp {
  position: absolute; right: 0; top: 12px; display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 6px;
  border: 2px solid var(--brand); color: var(--brand-strong); font-family: var(--font-num); font-weight: 800; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; transform: rotate(-8deg);
}
.res-sum-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.res-tile { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 104px; padding: var(--s-3); text-align: left; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--highlight); transition: transform var(--dur-1); }
[data-theme="light"] .res-tile { box-shadow: var(--shadow-1); border-color: transparent; }
.res-tile:active { transform: scale(.97); }
.res-tile.is-pb { border-color: color-mix(in srgb, var(--gold) 60%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 12%, var(--surface)), var(--surface) 65%); }
.res-tile-k { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.res-tile-star { margin-left: auto; color: var(--gold); display: inline-flex; }
.res-tile-sub { font-size: var(--fs-label); color: var(--muted); }
.res-tile.is-pb .res-tile-sub { color: var(--gold); font-family: var(--font-num); font-weight: 700; letter-spacing: .1em; font-size: 14px; }
.res-tile-none { color: var(--faint); font-weight: 600; }
.res-card { display: block; width: 100%; text-align: left; position: relative; padding: var(--s-4); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--highlight); contain: layout paint; }
[data-theme="light"] .res-card { box-shadow: var(--shadow-1); border-color: transparent; }
button.res-card { transition: transform var(--dur-1); }
button.res-card:active { transform: scale(.985); }
.res-tp-head { display: flex; align-items: center; justify-content: space-between; }
.res-tp-total { display: inline-flex; align-items: baseline; gap: 2px; color: var(--brand-strong); }
.res-tp-total bw-number { color: var(--brand-strong); font-size: 40px; font-weight: 700; }
.res-tp-plus { font-family: var(--font-num); font-size: 28px; font-weight: 700; }
.res-tp-unit { font-family: var(--font-num); font-size: 16px; font-weight: 700; letter-spacing: .08em; margin-left: 4px; color: var(--muted); }
.res-tp-lines { display: flex; flex-direction: column; margin: var(--s-2) 0; }
.res-tp-lines li { display: flex; justify-content: space-between; align-items: center; min-height: 36px; border-bottom: 1px dashed var(--line); font-size: var(--fs-small); }
.res-tp-lines li b { font-size: 18px; color: var(--ink); }
.res-tp-lines li.is-zero, .res-tp-lines li.is-zero b { color: var(--muted); }
.res-tp-none { margin: var(--s-2) 0; font-size: var(--fs-small); }
.res-tp-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); flex-wrap: wrap; font-size: var(--fs-label); color: var(--muted); }
.res-contacts { display: inline-flex; align-items: center; gap: 5px; }
.res-contacts.is-near, .res-contacts.is-over { color: var(--warn-ink); }
.res-streak-line { margin-top: 2px; font-size: var(--fs-small); color: var(--ink-2); }
.res-league { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "k move" "pts move"; align-items: center; gap: 2px var(--s-3); padding-right: 40px; }
.res-league .ui-label { grid-area: k; }
.res-league-move { grid-area: move; font-family: var(--font-num); font-weight: 700; font-size: 32px; line-height: 1; }
.res-league-up { color: var(--brand-strong); }
.res-league-pts { grid-area: pts; font-size: var(--fs-label); color: var(--muted); }
.res-chev { position: absolute; right: 14px; top: 50%; margin-top: -9px; color: var(--faint); }
.res-badge-row { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.res-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--gold) 14%, transparent); color: var(--gold); font-weight: 650; font-size: var(--fs-small); }
.res-sum-actions { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-2); }
.res-save { display: flex; flex-direction: column; gap: var(--s-3); padding-bottom: var(--s-2); }
.res-save-body { font-size: var(--fs-body); color: var(--ink-2); }
.res-save-actions { display: flex; flex-direction: column; gap: var(--s-2); }

/* ---------- Celebration overlays (body-level, under the particle canvas) ---------- */
.res-cele { position: fixed; inset: 0; z-index: calc(var(--z-fx) - 1); display: grid; place-items: center; padding: var(--gutter); outline: none; -webkit-tap-highlight-color: transparent; isolation: isolate; color: var(--ink); }
.res-cele-card { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); text-align: center; max-width: 360px; }
.res-cele-stage { position: relative; width: 240px; height: 240px; display: grid; place-items: center; }
.res-cele-stage > * { grid-area: 1 / 1; }
.res-cele-old, .res-cele-new, .res-cele-sil { display: grid; place-items: center; }
.res-cele-new { opacity: 0; }
.res-cele-rays { width: var(--sz); height: var(--sz); overflow: visible; pointer-events: none; }
.res-cele-rays line { stroke: var(--tc); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; }
.res-cele-cap, .res-cele-name { font-family: var(--font-num); font-weight: 800; font-size: 40px; line-height: 1; letter-spacing: .04em; color: var(--tc); white-space: nowrap; }
/* placement type matches the rank page it hands off to (same size, slant and chyrons) */
.res-cele-name { font-size: 64px; line-height: .9; letter-spacing: .05em; }
.res-cele-name .res-cele-letters { display: inline-block; transform: skewX(var(--skew)); }
.res-cele-l { display: inline-block; opacity: 0; }
.res-cele-sub { color: var(--ink-2); font-size: var(--fs-small); opacity: 0; }
.res-cele--top100 .res-cele-sub, .res-cele--badge .res-cele-sub, .res-cele--promotion .res-cele-sub { opacity: 1; }
.res-cele-chyron, .res-cele-rankchy { display: inline-block; transform: skewX(var(--skew)); padding: 6px 14px 6px 12px; background: var(--surface-3); border-left: 4px solid var(--brand); border-radius: 2px; opacity: 0; }
.res-cele-rankchy { border-left-color: var(--tc); }
.res-cele-chyron span, .res-cele-rankchy span { display: inline-block; transform: skewX(calc(var(--skew) * -1)); font-family: var(--font-num); font-weight: 700; font-size: 17px; line-height: 1; letter-spacing: var(--track-chyron); text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.res-cele-chyron span { font-size: 14px; }
.res-cele-goal { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 240px; opacity: 0; }
.res-cele-goaltrack { width: 100%; height: 10px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.res-cele-goalfill { display: block; height: 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 55%, transparent), var(--tc)); transform-origin: left; transform: scaleX(0); }
.res-cele-goaltext { font-size: var(--fs-small); color: var(--ink-2); }
.res-cele-kicker { font-family: var(--font-num); font-weight: 700; font-size: 18px; letter-spacing: var(--track-chyron); color: var(--gold-hi); }
[data-theme="light"] .res-cele-kicker { color: var(--gold); }
.res-cele-rank { font-family: var(--font-num); font-weight: 800; font-size: 120px; line-height: .85; color: var(--ink); }
.res-cele-title { font-family: var(--font-num); font-weight: 800; font-size: 34px; letter-spacing: .04em; color: var(--ink); }
.res-cele-flip { position: relative; width: 140px; height: 140px; transform-style: preserve-3d; }
.res-cele-face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--line-strong); backface-visibility: hidden; overflow: hidden; }
.res-cele-face--back { transform: rotateY(180deg); }
.res-cele-shine { position: absolute; inset: 0; width: 40%; background: linear-gradient(90deg, transparent, var(--highlight), transparent); transform: translateX(-120%) skewX(-18deg); }
.res-cele-slam { display: inline-block; transform: skewX(var(--skew)); padding: 10px 18px; background: var(--surface-3); border-left: 4px solid var(--brand); }
.res-cele-slamtxt { display: inline-block; transform: skewX(calc(var(--skew) * -1)); font-family: var(--font-num); font-weight: 800; font-size: 30px; letter-spacing: .08em; color: var(--ink); }
/* C3 tier-up: the biggest earned moment scales with the screen (same timing) */
.res-cele-card--tier { max-width: min(92vw, 760px); }
.res-cele--tier .res-cele-stage { width: clamp(240px, 48vmin, 460px); height: clamp(240px, 48vmin, 460px); }
.res-cele--tier .res-cele-stage .ui-emblem { --sz: clamp(120px, 24vmin, 240px) !important; }
.res-cele--tier .res-cele-rays { --sz: clamp(220px, 44vmin, 420px) !important; }
.res-cele--tier .res-cele-cap { font-size: clamp(40px, 7vmin, 80px); }
.res-cele-mine { font-family: var(--font-num); font-weight: 700; font-size: clamp(18px, 3.2vmin, 30px); letter-spacing: var(--track-chyron); color: var(--gold-hi); opacity: 0; }
[data-theme="light"] .res-cele-mine { color: var(--gold); }
.res-cele-halo { display: grid; width: 100%; height: 100%; pointer-events: none; animation: res-cele-in 600ms var(--ease-out) 420ms both; }
.res-cele-halo svg { grid-area: 1 / 1; width: 100%; height: 100%; overflow: visible; }
.res-cele-halo line { stroke: var(--tc); stroke-linecap: round; }
.res-cele-halo-a line { stroke-width: 2.5; opacity: .32; }
.res-cele-halo-b line { stroke-width: 1.5; opacity: .2; }
.res-cele-halo-a { animation: res-cele-spin 20s linear infinite; }
.res-cele-halo-b { animation: res-cele-spin 30s linear infinite reverse; }
@keyframes res-cele-spin { to { transform: rotate(360deg); } }
@keyframes res-cele-in { from { opacity: 0; } }
[data-motion="reduced"] .res-cele-halo, [data-motion="reduced"] .res-cele-halo svg { animation: none; }

/* =========================================================================
   Progress
   ========================================================================= */
.pg { display: flex; flex-direction: column; gap: var(--s-3); padding-bottom: var(--s-2); }
.pg-h1 { margin: var(--s-2) 0 var(--s-1); }
.pg-board { padding: 4px 0; overflow: hidden; }
.pg-board-head { display: grid; grid-template-columns: 1fr 50px 62px 56px; gap: 6px; padding: 8px var(--s-3) 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pg-board-head .is-today { color: var(--brand-strong); text-align: right; }
.pg-board-head .is-pb { color: var(--gold); text-align: right; }
.pg-row { display: grid; grid-template-columns: 1fr 50px 62px 56px; align-items: center; gap: 6px; width: 100%; min-height: 72px; padding: 0 var(--s-3); text-align: left; border-top: 1px solid var(--line); transition: background-color var(--dur-2); content-visibility: auto; contain-intrinsic-size: auto 72px; }
.pg-row:active { background: var(--highlight); }
.pg-row-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pg-row-ic { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); position: relative; }
.pg-row-dot { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--tc); box-shadow: 0 0 0 2px var(--surface); }
.pg-row-t { display: flex; flex-direction: column; min-width: 0; }
.pg-row-n { font-weight: 650; font-size: var(--fs-small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-row-s { font-size: 11px; color: var(--muted); white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; }
.pg-row-s .ui-icon { color: var(--gold); }
.pg-v { font-family: var(--font-num); font-weight: 600; font-size: 20px; line-height: 1; text-align: right; white-space: nowrap; }
.pg-v small { font-size: 11px; color: var(--muted); font-weight: 600; margin-left: 1px; }
.pg-v.is-today { color: var(--brand-strong); }
.pg-v.is-pb { color: var(--gold); }
.pg-v.is-none { color: var(--faint); }
.pg-row .ch-spark { justify-self: end; }
/* narrow screens (320 px, or larger text in a small frame): the 30-day trend steps aside so test names stay readable */
@media (max-width: 359px) {
  .pg-board-head, .pg-row { grid-template-columns: 1fr 40px 62px; }
  .pg-board-head > :nth-child(4), .pg-row .ch-spark { display: none; }
}
.pg-cards { display: grid; gap: var(--s-3); }
.pg-card { display: flex; flex-direction: column; gap: var(--s-2); }
.pg-card-k { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 2px var(--s-2); font-size: var(--fs-label); font-weight: 650; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }
.pg-card-k .ui-icon { color: var(--faint); }
.pg-form { border-left: 4px solid var(--card-tone, var(--brand)); }
.pg-form-t { font-family: var(--font-num); font-weight: 700; font-size: 22px; line-height: 1.1; letter-spacing: .03em; color: var(--card-tone, var(--brand-strong)); }
.pg-form-b { font-size: var(--fs-small); color: var(--ink-2); }
.pg-split { display: flex; align-items: center; gap: var(--s-4); }
.pg-split > :last-child { flex: 1 1 auto; min-width: 0; }
.pg-big { font-family: var(--font-num); font-weight: 700; font-size: 40px; line-height: 1; }
.pg-big small { font-size: 16px; color: var(--muted); margin-left: 2px; }
.pg-sub { font-size: var(--fs-label); color: var(--muted); }
.pg-minibal { display: block; width: 100%; height: 60px; margin-top: 6px; }
.pg-minibal .z-good { fill: var(--good-soft); }
.pg-minibal .z-warn { fill: var(--warn-soft); }
.pg-minibal .axis { stroke: var(--line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pg-minibal .b { fill: var(--good); }
.pg-minibal .b.is-warn { fill: var(--warn); }
.pg-minibal .b.is-red { fill: var(--bad); }
.pg-balring { position: relative; flex: none; }
.pg-balring-n { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-num); font-weight: 700; font-size: 22px; }
[data-viewport="wide"] .pg-cards, [data-viewport="xl"] .pg-cards { grid-template-columns: 1fr 1fr; }
[data-viewport="wide"] .pg-overview, [data-viewport="xl"] .pg-overview { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s-5); align-items: start; }
[data-viewport="wide"] .pg-overview .pg-cards, [data-viewport="xl"] .pg-overview .pg-cards { grid-template-columns: 1fr; }
.pg-overview { display: flex; flex-direction: column; gap: var(--s-3); }

/* detail */
.pg-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: var(--s-3); padding-top: var(--s-2); }
.pg-head-pb { display: flex; flex-direction: column; gap: 2px; }
.pg-head-pb bw-number { color: var(--gold-hi); }
[data-theme="light"] .pg-head-pb bw-number { color: var(--gold); }
.pg-head-meta { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-label); color: var(--muted); }
.pg-head-meta .ui-icon { color: var(--good); }
.pg-head-today { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.pg-head-today b { font-family: var(--font-num); font-weight: 700; font-size: 30px; line-height: 1; color: var(--brand-strong); }
.pg-verdict { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: var(--r-md); background: color-mix(in srgb, var(--tone) 10%, var(--surface)); border-left: 4px solid var(--tone); }
.pg-verdict b { font-family: var(--font-num); font-weight: 700; font-size: 18px; letter-spacing: .1em; color: var(--tone); }
.pg-verdict span { font-size: var(--fs-small); color: var(--ink-2); }
.pg-chart { padding: var(--s-6) var(--s-3) var(--s-2); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--highlight); }
[data-theme="light"] .pg-chart { box-shadow: var(--shadow-1); border-color: transparent; }
.pg-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; padding: 0 2px; font-size: var(--fs-micro); color: var(--muted); }
.pg-legend span { display: inline-flex; align-items: center; gap: 5px; }
.pg-legend i { display: inline-block; }
.pg-legend .k-dot { width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--series-1); }
.pg-legend .k-dot.is-l { border-color: var(--foot-l); }
.pg-legend .k-dot.is-r { border-color: var(--foot-r); }
.pg-legend .k-line { width: 14px; height: 3px; border-radius: 2px; background: var(--brand-strong); }
.pg-legend .k-band { width: 14px; height: 10px; border-radius: 2px; background: var(--band-swc); }
.pg-legend .k-pb { width: 8px; height: 8px; background: var(--gold); transform: rotate(45deg); }
.pg-legend .k-tier { width: 8px; height: 3px; border-radius: 2px; background: var(--tier-blaze); box-shadow: 0 -5px 0 var(--tier-nova); margin-top: 5px; }
.pg-controls { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); flex-wrap: wrap; }
.pg-controls .ui-seg { flex: 1 1 220px; max-width: 320px; }
.pg-listtoggle { min-height: 44px; padding: 0 8px; color: var(--brand-strong); font-size: var(--fs-small); font-weight: 650; }
.pg-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.pg-table th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 6px 4px; border-bottom: 1px solid var(--line); }
.pg-table td { padding: 10px 4px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.pg-list { display: flex; flex-direction: column; }
.pg-li { display: grid; grid-template-columns: 64px 1fr auto 56px; align-items: center; gap: var(--s-2); min-height: 52px; width: 100%; text-align: left; border-bottom: 1px solid var(--line); }
.pg-li-d { font-size: var(--fs-label); color: var(--muted); font-family: var(--font-mono); }
.pg-li-v { font-family: var(--font-num); font-weight: 600; font-size: 22px; display: inline-flex; align-items: center; gap: 6px; }
.pg-li-pb { display: inline-flex; align-items: center; gap: 2px; font-family: var(--font-num); font-weight: 700; font-size: 13px; letter-spacing: .06em; color: var(--gold); }
.pg-li-t { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-label); color: var(--muted); }
.pg-li-dl { text-align: right; font-family: var(--font-num); font-weight: 600; font-size: 16px; color: var(--muted); }
.pg-li-dl.is-up { color: var(--brand-strong); }
.pg-li-un { opacity: .6; }
.pg-dirtable { display: flex; flex-direction: column; }
.pg-dir { display: grid; grid-template-columns: 64px 1fr 64px 52px; align-items: center; gap: var(--s-2); min-height: 40px; border-bottom: 1px solid var(--line); font-size: var(--fs-small); }
.pg-dir-n { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--ink-2); }
.pg-dir-bar { height: 6px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.pg-dir-bar i { display: block; height: 100%; width: 100%; background: var(--brand); transform-origin: left; transform: scaleX(var(--f)); }
.pg-dir.is-weak .pg-dir-bar i { background: var(--warn); }
.pg-dir.is-best .pg-dir-bar i { background: var(--gold); }
.pg-dir-v { text-align: right; font-family: var(--font-num); font-weight: 600; font-size: 18px; }
.pg-dir-d { text-align: right; font-size: var(--fs-label); color: var(--muted); }
.pg-dir-d.is-up { color: var(--brand-strong); }
.pg-compare { display: flex; align-items: center; gap: var(--s-4); }
.pg-detail, .pg-detail-main, .pg-detail-side { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
[data-viewport="wide"] .pg-detail, [data-viewport="xl"] .pg-detail { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--s-5); align-items: start; }

/* balance */
.pg-bal-head { display: flex; align-items: center; gap: var(--s-4); padding-top: var(--s-2); }
.pg-bal-msg { display: flex; flex-direction: column; gap: 4px; }
.pg-bal-msg b { font-family: var(--font-num); font-weight: 700; font-size: 22px; letter-spacing: .04em; color: var(--tone); }
.pg-bal-msg span { font-size: var(--fs-small); color: var(--ink-2); }
.pg-foot { font-size: var(--fs-small); color: var(--ink-2); line-height: 1.45; }

/* score */
.pg-comp { display: grid; grid-template-columns: 1fr auto; gap: 6px var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); align-items: center; }
.pg-comp-n { font-weight: 650; font-size: var(--fs-small); display: flex; align-items: center; gap: 6px; }
.pg-comp-w { font-family: var(--font-num); font-weight: 700; font-size: 14px; color: var(--muted); letter-spacing: .04em; }
.pg-comp-bar { grid-column: 1 / -1; position: relative; height: 10px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.pg-comp-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: var(--r-pill); background: var(--tc, var(--brand)); transform-origin: left; transform: scaleX(var(--f)); }
.pg-comp.is-missing { opacity: .6; }
.pg-comp-v { font-family: var(--font-num); font-weight: 600; font-size: 18px; text-align: right; }
.pg-comp-add { min-height: 36px; padding: 0 10px; border-radius: var(--r-pill); border: 1px dashed var(--line-strong); color: var(--brand-strong); font-size: var(--fs-label); font-weight: 650; position: relative; }
.pg-comp-add::before { content: ""; position: absolute; inset: -6px 0; }

/* how */
.pg-how { display: flex; flex-direction: column; gap: var(--s-5); padding-top: var(--s-2); }
.pg-how section { display: flex; flex-direction: column; gap: var(--s-2); }
.pg-how h2 { font-size: var(--fs-h2); line-height: 1.3; font-weight: 700; }
.pg-how p, .pg-how li { color: var(--ink-2); font-size: var(--fs-small); }
.pg-how ul.pg-dots { display: flex; flex-direction: column; gap: 6px; padding-left: 18px; list-style: disc; }
.pg-weights { display: flex; flex-direction: column; gap: 10px; }
.pg-weight { display: grid; grid-template-columns: 1fr 48px; gap: 4px; align-items: center; font-size: var(--fs-small); }
.pg-weight-bar { grid-column: 1 / -1; height: 8px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.pg-weight-bar i { display: block; height: 100%; width: 100%; background: var(--brand); transform-origin: left; transform: scaleX(var(--f)); }
.pg-weight b { font-family: var(--font-num); font-weight: 700; font-size: 18px; text-align: right; }
.pg-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }
.pg-tier { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--s-3) 4px; border-radius: var(--r-md); background: var(--surface-2); text-align: center; }
.pg-tier b { font-family: var(--font-num); font-weight: 700; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--tc); }
.pg-tier span { font-size: 11px; color: var(--muted); }
.pg-rules { display: flex; flex-direction: column; }
.pg-rules li { display: flex; justify-content: space-between; gap: var(--s-2); padding: 8px 0; border-bottom: 1px dashed var(--line); }
.pg-rules b { font-family: var(--font-num); font-size: 17px; color: var(--ink); }
.ch-week-ok { display: inline-flex; vertical-align: -2px; color: var(--brand-strong); }

/* score page + readiness page */
.pg-score-head { display: flex; align-items: center; gap: var(--s-4); padding-top: var(--s-2); }
.pg-score-side { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pg-prov { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-small); color: var(--ink-2); padding: 10px 12px; border-radius: var(--r-md); background: var(--info-soft); }
.pg-prov .ui-icon { color: var(--info); margin-top: 2px; }
/* score page: one column on phones; the chart beside the weighted list when wide.
   The area chart is capped so its labels never balloon with the container. */
.pg-score-main, .pg-score-aside { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
[data-viewport="wide"] .pg-score, [data-viewport="xl"] .pg-score { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-5); align-items: start; }
.pg-area { display: block; width: 100%; max-width: 400px; height: auto; margin-inline: auto; overflow: visible; }
.pg-area-grid { stroke: var(--grid); stroke-dasharray: 2 4; }
.pg-area-bg { fill: var(--surface-2); }
.pg-area-col.is-missing .pg-area-bg { fill: none; stroke: var(--line-strong); stroke-dasharray: 4 4; }
.pg-area-fill { fill: color-mix(in srgb, var(--tc) 70%, transparent); stroke: var(--tc); stroke-width: 1.5; }
.pg-area-col { animation: pg-rise 520ms var(--ease-out) both; transform-box: fill-box; }
.pg-area-p { font-family: var(--font-num); font-weight: 700; font-size: 15px; fill: var(--ink); }
.pg-area-add { font-family: var(--font-num); font-weight: 700; font-size: 24px; fill: var(--faint); }
.pg-area-lbl { font-family: var(--font-num); font-weight: 700; font-size: 11px; letter-spacing: .08em; fill: var(--muted); }
@keyframes pg-rise { from { opacity: 0; transform: translateY(8px); } }
.pg-ready-head { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); padding-top: var(--s-3); }
.pg-legend .k-ready { width: 10px; height: 10px; border-radius: 3px; }
.pg-legend .k-ready.is-go { background: var(--ready-go); }
.pg-legend .k-ready.is-normal { background: color-mix(in srgb, var(--ready-normal) 70%, transparent); height: 6px; }
.pg-legend .k-ready.is-tech { border: 1.5px solid var(--ready-tech); }

.res-actions .res-share { flex: 1.5 1 0; white-space: nowrap; padding: 0 var(--s-4); }
.res-sig .ch-glyph-core { stroke-width: 3; }
.res-sig .ch-glyph-phase { stroke-width: 5; }
/* every celebration overlay is an opaque stage (the page never shows through);
   the stage is a layer of its own so the placement hand-off can fade it away */
.res-cele.is-stage::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70% 46% at 50% 36%, color-mix(in srgb, var(--tc) 20%, transparent), transparent 72%),
    linear-gradient(var(--grid-minor) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--stage);
  transition: opacity 300ms var(--ease-out);
}
.res-cele.is-handoff::before { opacity: 0; }
.pg-controls .pg-units { flex: 0 0 auto; min-width: 112px; }
.pg-listtoggle { min-height: var(--tap); }
.td-notsaved { position: relative; }
.td-notsaved::before { content: ""; position: absolute; inset: -4px 0; }
.ch-trend.is-scrubbing .ch-trend-noise { opacity: 0; }