/* RunwayLab, results screen. Uses the tokens and components in src/styles.css only.
   Covers the result of a walk (and the sample), saved walks, the wall and a wall post. Breakpoints: 1000 / 760 / 520. */

/* the score number: gold ink */
:root { --rw-score-ink: var(--accent); --rw-score-glow: none; }

/* art placeholders keep their room while the drawing loads */
.rw-artslot { display: block; }
.rw-artslot.rw-empty__art { aspect-ratio: 320 / 200; }
.rw-artslot.rw-empty__figure { aspect-ratio: 64 / 128; }

/* ── head: status, the walk's name, Walk again ───────────────────────────────────────────────────────────────── */
.rw-reviewhead { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-4) var(--s-6); flex-wrap: wrap; margin-bottom: var(--s-6); padding-bottom: var(--s-5); border-bottom: 1px solid var(--hair); }
.rw-reviewhead__name { flex: 1 1 360px; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); justify-items: start; min-width: 0; }
.rw-reviewhead__title { overflow-wrap: anywhere; }
.rw-name-wrap { display: flex; align-items: center; gap: var(--s-3); min-width: 0; max-width: 100%; cursor: text; }
.rw-name {
  flex: 0 1 auto; min-width: 0; width: 16ch; max-width: 100%; field-sizing: content; margin: 0; padding: 2px 0 8px;
  font-family: var(--f-display); font-size: var(--t-title); font-weight: var(--w-title); font-variation-settings: 'opsz' var(--opsz-title); line-height: 1.1; letter-spacing: 0;
  color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--hair); border-radius: 0;
  transition: border-color var(--d-short) var(--ease-out);
  text-overflow: ellipsis;
}
.rw-name::placeholder { color: var(--ink-3); opacity: 1; }
.rw-name:hover:not([readonly]) { border-bottom-color: var(--ink-2); border-bottom-style: dotted; }
.rw-name:focus:not([readonly]) { border-bottom-color: var(--accent); border-bottom-style: solid; }
.rw-name:focus:not(:focus-visible) { outline: none; }
.rw-name[readonly] { border-bottom-color: transparent; cursor: default; }
.rw-name-wrap:has(.rw-name[readonly]) { cursor: default; }
.rw-name-wrap__icon { color: var(--ink-3); transition: color var(--d-short) var(--ease-out); }
.rw-name-wrap:focus-within .rw-name-wrap__icon { color: var(--accent); }

.rw-reviewhead__next { display: flex; align-items: center; gap: var(--s-3); }
.rw-reviewhead__score { display: none; }

/* ── the result: replay on the left, score and verdict on the right ─────────────────────────────────────────── */
.rw-result { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-6) clamp(32px, 4vw, 64px); align-items: start; }
.rw-result__media { position: sticky; top: var(--s-5); display: grid; gap: var(--s-3); min-width: 0; }
.rw-result__summary { display: grid; gap: var(--s-6); align-content: start; min-width: 0; }

/* the player: Plate III, an optional progress panel over it, then the controls */
.rw-playerbox { --ar: 1.333; display: grid; gap: var(--s-3); min-width: 0; }
.rw-player {
  grid-row: 1; grid-column: 1; position: relative;
  width: min(100%, calc(70dvh * var(--ar))); aspect-ratio: var(--ar); margin-inline: auto;
  background: var(--stage); border: 1.5px solid var(--rule); border-radius: var(--r-l); box-shadow: var(--print); overflow: hidden;
}
.rw-player::after { content: ''; position: absolute; inset: 4px; border: 1px solid var(--stage-hair); border-radius: 2px; pointer-events: none; }
.rw-player__video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.rw-player__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.rw-player__badge {
  position: absolute; top: 12px; left: 14px; z-index: 1; max-width: calc(100% - 28px);
  padding: 3px 8px; border: 1px solid var(--stage-hair);
  background: var(--stage); color: var(--stage-ink-2);
  font-size: var(--t-label); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; line-height: 1.3;
}
.rw-player__message { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--s-5); text-align: center; color: var(--stage-ink); background: var(--stage-scrim); }
.rw-player__overlay { grid-row: 1; grid-column: 1; z-index: 2; align-self: end; justify-self: center; width: calc(min(100%, 70dvh * var(--ar)) - 2 * var(--s-4)); margin-bottom: var(--s-4); min-width: 0; }
.rw-player__overlay:empty { display: none; }
.rw-player__controls { grid-row: 2; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); min-width: 0; }
.rw-player__controls input[type='range'] { flex: 1 1 140px; min-width: 0; margin: 0; }
.rw-player__toggle { min-width: 96px; }
.rw-player__speed { min-width: 52px; }
.rw-player__time { font-size: var(--t-small); color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* analysis progress, drawn over the replay */
.rw-progress {
  display: grid; gap: var(--s-3); padding: var(--s-5);
  background: var(--stage-scrim); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--stage-hair); border-radius: var(--r-s); color: var(--stage-ink);
}
.rw-progress__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); min-width: 0; }
.rw-progress__label { font-family: var(--f-display); font-size: 1.75rem; font-weight: 600; font-variation-settings: 'opsz' 36; line-height: 1.12; color: var(--stage-ink); min-width: 0; }
.rw-progress__pct { font-family: var(--f-display); font-size: 1.5rem; font-weight: 600; color: var(--stage-accent); font-variant-numeric: tabular-nums lining-nums; }
.rw-progress__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.rw-progress__left { font-size: var(--t-caption); font-weight: 500; color: var(--stage-ink-2); font-variant-numeric: tabular-nums; }

/* the ribbon: where each part of the walk sits in time */
.rw-ribbon-wrap { position: relative; padding-top: 14px; }
.rw-ribbon { position: relative; height: 32px; background: var(--band); border: 1px solid var(--hair); overflow: hidden; }
.rw-ribbon__seg {
  position: absolute; top: 0; bottom: 0; padding: 0; margin: 0; cursor: pointer;
  background: var(--lamp); border: 0; border-inline: 1px solid var(--bg); border-radius: 0;
  transition: opacity var(--d-short) var(--ease-out);
}
.rw-ribbon__seg--turn { background: var(--ink); }
.rw-ribbon__seg--back { background: var(--data-tint); box-shadow: inset 0 0 0 1px var(--hair-strong); }
.rw-ribbon__seg:hover { opacity: 0.82; }
.rw-ribbon__seg:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--bg), inset 0 0 0 5px var(--focus); z-index: 1; }
.rw-ribbon__seg--approach:focus-visible { box-shadow: inset 0 0 0 3px var(--bg), inset 0 0 0 5px var(--ink); }
.rw-ribbon__ticks { position: absolute; top: 0; left: 0; right: 0; height: 10px; pointer-events: none; }
.rw-ribbon__tick { position: absolute; top: 0; width: 1px; height: 10px; background: var(--accent); }
.rw-ribbon__playhead { position: absolute; top: 12px; bottom: -4px; left: 0; width: 2px; background: var(--ink); transform: translateX(-1px); pointer-events: none; transition: left var(--d-micro) var(--ease-line); }
.rw-playerbox[data-playing='true'] ~ * .rw-ribbon__playhead { transition: none; }
.rw-ribbon__key { display: flex; flex-wrap: wrap; margin-top: var(--s-2); gap: var(--s-1) var(--s-5); font-size: var(--t-caption); font-weight: 500; color: var(--ink-3); }
.rw-ribbon__key span { display: inline-flex; align-items: center; gap: var(--s-2); }
.rw-ribbon__swatch { width: 14px; height: 8px; background: var(--lamp); }
.rw-ribbon__swatch--turn { background: var(--ink); }
.rw-ribbon__swatch--back { background: var(--data-tint); box-shadow: inset 0 0 0 1px var(--hair-strong); }

/* ── the score ─────────────────────────────────────────────────────────────────────────────────────────────── */
.rw-scoreblock { display: grid; gap: var(--s-3); justify-items: start; min-width: 0; background: var(--rule-line) top left / 100% 1px no-repeat; padding-top: var(--s-5); }
.rw-scoreblock .rw-eyebrow { margin: 0; }
.rw-score { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-1) var(--s-2); line-height: 0.9; margin: 0; }
.rw-score__num { font-family: var(--f-display); font-size: var(--t-score); font-weight: var(--w-score); font-variation-settings: 'opsz' 96; line-height: 0.9; letter-spacing: var(--track-score); color: var(--rw-score-ink); font-variant-numeric: tabular-nums lining-nums; }
.rw-score__max { font-family: var(--f-display); font-style: italic; font-size: var(--t-h2); font-weight: 500; color: var(--ink-3); margin-left: 0; }
.rw-score__more { align-self: center; margin-left: var(--s-2); font-size: var(--t-small); }
.rw-scoreblock__grade { display: grid; gap: var(--s-1); }
.rw-grade { font-family: var(--f-display); font-size: var(--t-h2); font-weight: var(--w-title); font-variation-settings: 'opsz' var(--opsz-h2); line-height: 1.12; color: var(--ink); }
.rw-grade__line { font-size: var(--t-small); line-height: 1.5; color: var(--ink-2); max-width: var(--measure-lede); }
.rw-laps { display: grid; gap: var(--s-2); margin-top: var(--s-2); }
.rw-chip--off { border-style: dashed; color: var(--ink-3); }

/* after the count-up: the grade, then the verdict, fade in */
.rw-scoreblock.is-counting .rw-scoreblock__grade,
.rw-scoreblock.is-counting .rw-laps { animation: rw-fade var(--d-short) var(--ease-out) var(--d-score) backwards; }
.rw-scoreblock.is-counting ~ .rw-verdict,
.rw-scoreblock.is-counting ~ .rw-tiles { animation: rw-fade var(--d-medium) var(--ease-out) calc(var(--d-score) + 120ms) backwards; }

/* waiting for the analysis */
.rw-scoreblock__skel { display: grid; gap: var(--s-3); width: 100%; }
.rw-skel--score { width: min(240px, 70%); height: clamp(88px, 10vw, 136px); }
.rw-skel--short { width: 55%; }
.rw-scoreblock__note { display: flex; gap: var(--s-2); align-items: flex-start; font-size: var(--t-small); color: var(--ink-2); }
.rw-scoreblock__note .rw-icon { color: var(--accent); margin-top: 2px; }

/* the verdict: a clipping from the review, in the serif */
.rw-verdict { margin: 0; padding: var(--s-2) 0 var(--s-2) var(--s-5); border-left: 2px solid var(--lamp); font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem); font-variation-settings: 'opsz' 24; line-height: 1.35; color: var(--ink); max-width: var(--measure-lede); }
.rw-verdict p { text-wrap: pretty; }

.rw-match { display: grid; gap: 2px; }
.rw-match__name { font-family: var(--f-display); font-size: 1.5rem; font-weight: 600; font-variation-settings: 'opsz' 32; line-height: 1.15; color: var(--ink); }
.rw-match__tag { font-size: var(--t-small); font-weight: 500; color: var(--accent); }
.rw-tile__pts { font-size: var(--t-caption); font-weight: 500; color: var(--ink-3); white-space: nowrap; letter-spacing: 0.01em; }
.rw-tile__pts.rw-accent { color: var(--accent); }
.rw-focus { display: grid; gap: var(--s-1); }

/* the judge: offered, judging, failed, absent */
.rw-working { color: var(--ink-2); font-weight: 500; }
.rw-judgeoffer .rw-card__head .rw-icon, .rw-judging__eyebrow .rw-icon { color: var(--accent); }
.rw-judgeoffer p { max-width: var(--measure-lede); }
.rw-judgefail { display: grid; gap: var(--s-3); justify-items: start; }
.rw-judgeoff { max-width: var(--measure-lede); }

@property --rw-sweep { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.rw-judging { position: relative; isolation: isolate; gap: var(--s-3); }
.rw-judging::before {
  content: ''; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--rw-sweep), transparent 0turn, transparent 0.62turn, var(--lamp) 0.82turn, transparent 1turn);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: rw-sweep 2.4s linear infinite;
}
@keyframes rw-sweep { to { --rw-sweep: 360deg; } }
.rw-judging__top { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); }
.rw-judging__eyebrow { display: inline-flex; align-items: center; gap: var(--s-2); margin: 0; }
.rw-judging__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); }
.rw-judging__stage { font-size: var(--t-h3); font-weight: 600; line-height: 1.35; color: var(--ink); min-width: 0; }
.rw-judging__pct { font-family: var(--f-display); font-size: 1.5rem; font-weight: 600; color: var(--accent); min-width: 3.2ch; text-align: right; font-variant-numeric: tabular-nums lining-nums; }
.rw-judging__left { min-height: 1.5em; font-size: var(--t-small); line-height: 1.5; color: var(--ink-2); font-variant-numeric: tabular-nums; }

.rw-noscorecard, .rw-analysisstop { gap: var(--s-4); }
.rw-noscorecard .rw-eyebrow { margin: 0; }
.rw-noscore, .rw-analysisstop__title { font-family: var(--f-display); font-size: var(--t-h2); font-weight: var(--w-title); font-variation-settings: 'opsz' var(--opsz-h2); line-height: 1.12; color: var(--ink); }

/* ── why: measured on the left, Gemini, moments and stills on the right ─────────────────────────────────── */
.rw-analysis { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto 1fr; gap: var(--space-block) clamp(32px, 4vw, 64px); align-items: start; margin-top: var(--space-section); }
.rw-analysis .rw-breakdown { display: contents; }
.rw-breakdown__group--measured { grid-column: 1; grid-row: 1 / span 2; }
.rw-breakdown__group--opinion { grid-column: 2; grid-row: 1; }
.rw-analysis__aside { grid-column: 2; grid-row: 1; display: grid; gap: var(--space-block); min-width: 0; }
.rw-analysis--judged .rw-analysis__aside { grid-row: 2; }
.rw-analysis__moments:empty, .rw-analysis__stills:empty { display: none; }

.rw-breakdown__group { display: grid; gap: var(--s-4); align-content: start; min-width: 0; }
.rw-breakdown__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-4); background: var(--rule-line) top left / 100% 1px no-repeat; padding-top: var(--s-5); }
.rw-breakdown__group--opinion .rw-breakdown__head { background-image: linear-gradient(90deg, var(--ink) 0 40px, var(--hair) 40px); }
.rw-breakdown__title { display: grid; gap: var(--s-2); min-width: 0; }
.rw-breakdown__title .rw-eyebrow { margin: 0; }
.rw-breakdown__group--opinion .rw-eyebrow { color: var(--ink-2); }
.rw-breakdown__title h2 { font-size: var(--t-h2); }
.rw-breakdown__sum { font-size: var(--t-num-xl); white-space: nowrap; }
.rw-breakdown__sum .rw-unit { font-size: var(--t-small); }
.rw-breakdown__note { font-size: var(--t-small); line-height: 1.5; color: var(--ink-2); max-width: var(--measure); }
.rw-breakdown__disclaimer { max-width: var(--measure); margin-top: var(--s-2); }
.rw-breakdown__bars { display: grid; gap: var(--s-1); margin-top: var(--s-2); }
.rw-breakdown__bars > .rw-bar { padding: var(--s-3); margin-inline: calc(-1 * var(--s-3)); border-radius: var(--r-s); transition: background-color var(--d-short) var(--ease-out), box-shadow var(--d-short) var(--ease-out); }
.rw-breakdown__bars > .rw-bar:hover { background: var(--surface); box-shadow: inset 0 0 0 1px var(--hair); }
.rw-bar__num .rw-unit { font-size: var(--t-caption); }
.rw-bar__note { max-width: var(--measure); }

.rw-why { margin-top: calc(-1 * var(--s-1)); }
.rw-why > summary { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap); list-style: none; color: var(--accent); font-size: var(--t-small); font-weight: 500; border-radius: var(--r-xs); }
.rw-why > summary:hover span { text-decoration: underline; text-underline-offset: 3px; }
.rw-why > summary::after { content: ''; flex: none; width: 7px; height: 7px; margin-bottom: 3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform var(--d-short) var(--ease-out); }
.rw-why[open] > summary::after { transform: translateY(3px) rotate(-135deg); }
.rw-why__body { display: grid; gap: var(--s-3); padding: var(--s-4); background: var(--band); border-left: 2px solid var(--hair-strong); font-size: var(--t-small); line-height: 1.5; color: var(--ink); }
.rw-why__body .rw-muted { color: var(--ink-2); }
.rw-why__about { color: var(--ink-2); max-width: var(--measure); }
.rw-why__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.rw-why__list > li { display: grid; gap: 2px; padding-top: var(--s-3); border-top: 1px solid var(--hair); }
.rw-why__list > li:first-child { padding-top: 0; border-top: 0; }
.rw-why__head { display: flex; flex-wrap: wrap; gap: 2px var(--s-3); align-items: baseline; }
.rw-why__value { font-weight: 600; font-variant-numeric: tabular-nums; }
.rw-why__share { margin-left: auto; color: var(--ink-2); font-size: var(--t-caption); font-weight: 500; font-variant-numeric: tabular-nums; }
.rw-why__ref { padding-left: var(--s-3); border-left: 2px solid var(--hair-strong); color: var(--ink-2); font-family: var(--f-display); font-style: italic; font-size: 1rem; }

.rw-aside__title { font-family: var(--f-display); font-size: 1.5rem; font-weight: var(--w-title); font-variation-settings: 'opsz' 32; line-height: 1.15; margin-bottom: var(--s-4); background: var(--rule-line) top left / 100% 1px no-repeat; padding-top: var(--s-5); }
.rw-stillsblock { display: grid; gap: var(--s-3); }
.rw-stillsblock .rw-aside__title { margin-bottom: 0; }

/* moments, as a short timeline */
.rw-moments { list-style: none; margin: 0 0 0 5px; padding: 0 0 0 var(--s-5); display: grid; gap: var(--s-5); border-left: 1px solid var(--hair-strong); }
.rw-moments > li { position: relative; display: grid; gap: var(--s-2); justify-items: start; }
.rw-moments > li::before { content: ''; position: absolute; left: calc(-1 * var(--s-5) - 5px); top: 13px; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 2px var(--lamp); }
.rw-moments > li p { font-size: var(--t-body); line-height: 1.55; color: var(--ink); max-width: var(--measure); }
.rw-moments .rw-btn--chip { position: relative; }
.rw-moments .rw-btn--chip::before { content: ''; position: absolute; inset: -4px -2px; }

/* what Gemini saw: small plates */
.rw-stills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3) var(--s-2); }
.rw-still { display: grid; gap: var(--s-1); padding: 0; margin: 0; background: transparent; border: 0; border-radius: 0; cursor: pointer; color: var(--ink-3); font-size: var(--t-caption); font-weight: 500; text-align: left; font-variant-numeric: tabular-nums; }
.rw-still img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: 1px solid var(--rule); background: var(--band); box-shadow: 2px 2px 0 var(--plate-shadow); transition: border-color var(--d-short) var(--ease-out), box-shadow var(--d-short) var(--ease-out); }
.rw-still:hover img { border-color: var(--accent); box-shadow: 2px 2px 0 var(--lamp); }
.rw-still:hover { color: var(--ink); }

/* ── keep it ───────────────────────────────────────────────────────────────────────────────────────────────── */
.rw-keep { margin-top: var(--space-section); }
.rw-keep .rw-sechead { margin-bottom: var(--s-6); }
.rw-keep__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.rw-keep__grid--one, .rw-keep__grid:has(> .rw-wallpost[hidden]) { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
.rw-keep .rw-card { gap: var(--s-5); }
.rw-keep .rw-card__head .rw-icon { color: var(--accent); }
.rw-keep .rw-actions { margin-top: 0; }
.rw-keep__status { display: grid; gap: var(--s-3); }
.rw-keep__status:empty { display: none; }
.rw-socials { max-width: 30rem; }
.rw-keep__try p { max-width: var(--measure-lede); }
.rw-wallpost .rw-check { font-size: var(--t-small); }
.rw-wallpost .rw-field { max-width: 24rem; }
.rw-wallpost__done { font-weight: 500; color: var(--ink); }

/* ── the numbers ───────────────────────────────────────────────────────────────────────────────────────────── */
.rw-result__details .rw-details { margin-top: var(--space-section); }
.rw-result__details:empty { display: none; }
.rw-coverage { margin-bottom: var(--s-5); gap: var(--s-3); }
.rw-coverage h3 { font-size: var(--t-h3); }
.rw-coverage strong { font-weight: 700; }
.rw-counts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-5); font-size: var(--t-small); color: var(--ink-2); }
.rw-counts li { display: inline-flex; gap: var(--s-2); align-items: baseline; }
.rw-counts__n { font-family: var(--font-mono); font-size: var(--t-mono); color: var(--ink); }
.rw-metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s-3); margin-block: var(--s-5); }
.rw-metric { gap: var(--s-2); padding: var(--s-5); }
.rw-metric h3 { font-size: var(--t-label); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; line-height: 1.4; color: var(--ink-3); }
.rw-metric__value { font-family: var(--f-display); font-size: var(--t-num-xl); font-weight: var(--w-num); font-variation-settings: 'opsz' var(--opsz-num); line-height: 1.1; font-variant-numeric: tabular-nums lining-nums; }
.rw-metric__value .rw-unit { font-size: var(--t-small); }
.rw-metric__none { font-size: var(--t-h3); font-weight: 600; color: var(--ink-2); }
.rw-metric .rw-disclosure > summary { font-size: var(--t-small); }
.rw-metric .rw-disclosure p { margin-top: var(--s-2); }

/* ── saved walks ───────────────────────────────────────────────────────────────────────────────────────────── */
.rw-pagehead--ruled { padding-bottom: var(--s-6); background: var(--rule-line) bottom left / 100% 1px no-repeat; }
.rw-pagehead .rw-eyebrow { margin: 0; }
.rw-saved-toolbar .rw-field { min-width: 190px; }
.rw-toolbar .rw-field--inline .rw-field__label { white-space: nowrap; }
.rw-saved-count, .rw-wallstatus { font-size: var(--t-small); color: var(--ink-2); margin-bottom: var(--s-4); }
.rw-saved-count:empty, .rw-wallstatus:empty { display: none; }
.rw-saved { justify-content: flex-start; gap: var(--s-4); padding: var(--s-3) var(--s-5) var(--s-3) var(--s-3); }
.rw-saved .rw-row__main { flex: 1; }
.rw-saved .rw-row__score .rw-unit { font-size: var(--t-caption); }
.rw-saved__thumb {
  flex: none; display: grid; place-items: center; width: 64px; height: 80px; border: 1px solid var(--rule); overflow: hidden;
  background: radial-gradient(ellipse 70% 30% at 50% 100%, color-mix(in srgb, var(--stage-accent) 22%, transparent), transparent 70%), linear-gradient(to bottom, var(--stage), var(--stage-2));
  color: var(--stage-ink); --accent: var(--stage-accent);
}
.rw-saved__figure { display: block; width: auto; height: 64px; }
.rw-row-wrap .rw-row__delete { flex: none; }
.rw-empty--small { padding-block: var(--s-7); }

/* ── the wall ──────────────────────────────────────────────────────────────────────────────────────────────── */
.rw-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-bottom: var(--s-6); border-block: 1px solid var(--rule); }
.rw-stats:empty { display: none; }
.rw-stat { display: grid; gap: var(--s-1); align-content: start; min-width: 0; padding: var(--s-5) var(--s-5) var(--s-5) 0; }
.rw-stat + .rw-stat { padding-left: var(--s-5); border-left: 1px solid var(--hair); }
.rw-stat__label { font-size: var(--t-label); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3); }
.rw-stat__value { font-family: var(--f-display); font-size: var(--t-num-xl); font-weight: var(--w-num); font-variation-settings: 'opsz' var(--opsz-num); line-height: 1.1; font-variant-numeric: tabular-nums lining-nums; }
.rw-stat__value--none { font-family: var(--f-display); font-style: italic; font-size: var(--t-h2); font-weight: 500; color: var(--ink-3); }

.rw-wallgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--gap); align-items: stretch; }
.rw-wallcard { display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: 1px solid var(--hair-strong); border-radius: var(--r-m); overflow: hidden; transition: transform var(--d-short) var(--ease-out), box-shadow var(--d-short) var(--ease-out), border-color var(--d-short) var(--ease-out); }
.rw-wallcard:hover { transform: translate(-2px, -2px); box-shadow: var(--print-sm); border-color: var(--rule); }
.rw-wallcard:has(.rw-wallcard__link:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.rw-wallcard__link { flex: 1; display: flex; flex-direction: column; min-width: 0; color: var(--ink); text-decoration: none; }
.rw-wallcard__link:hover { color: var(--ink); }
.rw-wallcard__link:focus-visible { outline: none; }
.rw-wallcard__stage {
  position: relative; display: flex; align-items: center; justify-content: center; height: 220px; padding: var(--s-5) var(--s-4) var(--s-4);
  background: radial-gradient(ellipse 55% 22% at 50% 90%, color-mix(in srgb, var(--stage-accent) 20%, transparent), transparent 72%), linear-gradient(to bottom, var(--stage), var(--stage-2));
  border-bottom: 1px solid var(--hair-strong);
  color: var(--stage-accent); --accent: var(--stage-accent);
}
.rw-wallcard__stage .rw-thumb { width: auto; max-width: 100%; height: 100%; }
.rw-wallcard__stage:has(.rw-wallcard__poster) { padding: 0; overflow: hidden; }
.rw-wallcard__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.rw-wallcard__stage:has(.rw-wallcard__poster) .rw-wallcard__rank { z-index: 1; color: var(--stage-ink); text-shadow: 0 1px 8px rgb(0 0 0 / 0.6); }
.rw-wallcard__badge {
  position: absolute; z-index: 1; right: var(--s-3); bottom: var(--s-3); display: inline-flex; align-items: center; gap: var(--s-1);
  padding: 3px 8px 3px 5px; border: 1px solid var(--stage-hair); background: rgb(15 26 49 / 0.82); color: var(--stage-ink); font-size: var(--t-label); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase;
}
.rw-wallcard__badge .rw-icon { width: 14px; height: 14px; color: var(--stage-accent); }
.rw-walledit { margin: 0; display: grid; gap: var(--s-2); justify-items: center; }
.rw-walledit__video { display: block; width: 100%; max-width: 360px; aspect-ratio: 9 / 16; max-height: 72vh; border: 1.5px solid var(--rule); box-shadow: var(--print); background: var(--stage); object-fit: contain; }
.rw-wallcard__figure { height: 100%; width: auto; color: var(--stage-ink); }
.rw-wallcard__rank { position: absolute; top: var(--s-3); left: var(--s-4); font-family: var(--f-display); font-style: italic; font-size: var(--t-num-xl); font-weight: 600; line-height: 1; color: color-mix(in srgb, var(--stage-ink) 70%, transparent); font-variant-numeric: tabular-nums lining-nums; }
.rw-wallcard--podium .rw-wallcard__stage { height: 280px; }
.rw-wallcard--podium .rw-wallcard__rank { color: var(--stage-accent); }
.rw-wallcard__body { display: grid; gap: var(--s-2); align-content: start; min-width: 0; padding: var(--s-5) var(--s-5) var(--s-4); }
.rw-wallcard__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); min-width: 0; }
.rw-wallcard__head h2 { font-family: var(--f-display); font-size: 1.5rem; font-weight: 600; font-variation-settings: 'opsz' 32; line-height: 1.15; min-width: 0; overflow-wrap: anywhere; }
.rw-wallcard__score { font-family: var(--f-display); font-size: var(--t-num-xl); font-weight: var(--w-num); font-variation-settings: 'opsz' var(--opsz-num); line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.rw-wallcard__score .rw-unit { font-size: var(--t-caption); }
.rw-wallcard__match { font-size: var(--t-small); font-weight: 500; color: var(--accent); }
.rw-wallcard__match--none { color: var(--ink-3); font-size: var(--t-caption); }
.rw-wallcard__verdict { font-family: var(--f-display); font-style: italic; font-size: 1.0625rem; line-height: 1.45; color: var(--ink-2); overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.rw-wallcard__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); margin: 0 var(--s-5); padding: var(--s-3) 0 var(--s-4); border-top: 1px solid var(--hair); }
.rw-clap .rw-icon { width: 18px; height: 18px; }
.rw-wall__fine { margin-top: var(--space-block); max-width: var(--measure); font-family: var(--f-display); font-style: italic; font-size: 1rem; color: var(--ink-2); }
.rw-wallcard--podium { border: 1.5px solid var(--rule); box-shadow: var(--print); }
.rw-wallcard--podium:hover { box-shadow: 8px 8px 0 var(--lamp); }

/* a wall post */
.rw-backlink { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); color: var(--ink-2); font-size: var(--t-label); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; text-decoration: none; }
.rw-backlink::before { content: '←'; transition: transform var(--d-short) var(--ease-out); }
.rw-backlink:hover { color: var(--ink); }
.rw-backlink:hover::before { transform: translateX(-3px); }
.rw-reviewhead--wall .rw-reviewhead__name { gap: var(--s-2); }
.rw-measures { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0; margin: 0 0 var(--s-5); border-top: 1px solid var(--rule); }
.rw-measure { display: grid; gap: 2px; padding: var(--s-4) var(--s-5) var(--s-4) 0; border-bottom: 1px solid var(--hair); }
.rw-measure dt { font-size: var(--t-label); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3); }
.rw-measure dd { margin: 0; font-family: var(--f-display); font-size: 1.5rem; font-weight: 600; font-variation-settings: 'opsz' 32; font-variant-numeric: tabular-nums lining-nums; }
.rw-measure dd .rw-unit { font-size: var(--t-caption); }

/* ── small page-specific resets of shared defaults ── */
.rw-breakdown { margin-top: 0; }
.rw-breakdown__head { padding-bottom: 0; border-bottom: 0; }
.rw-match, .rw-focus { padding-top: 0; border-top: 0; }
.rw-wallpost { max-width: none; }
.rw-coverage { padding: clamp(24px, 3vw, 40px); }
.rw-why { margin-top: calc(-1 * var(--s-1)); }
.rw-socials { margin-top: 0; }
.rw-ribbon { margin-top: 0; }
.rw-ribbon__seg { font-size: 0; color: transparent; }
.rw-moments > li { align-items: start; }

/* ── reduced motion ────────────────────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .rw-judging::before { animation: none; background: var(--lamp); }
  .rw-ribbon__playhead, .rw-breakdown__bars > .rw-bar, .rw-backlink::before, .rw-wallcard { transition: none; }
  .rw-backlink:hover::before { transform: none; }
  .rw-wallcard:hover { transform: none; }
}

/* ── laptop to tablet ──────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .rw-result, .rw-analysis { grid-template-columns: minmax(0, 1fr); }
  .rw-result__media { position: static; }
  .rw-analysis { grid-template-rows: none; }
  .rw-breakdown__group--measured, .rw-breakdown__group--opinion, .rw-analysis__aside, .rw-analysis--judged .rw-analysis__aside { grid-column: 1; grid-row: auto; }
  .rw-keep__grid { grid-template-columns: minmax(0, 1fr); }
  .rw-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rw-stat:nth-child(odd) { padding-left: 0; border-left: 0; }
  .rw-stat:nth-child(n + 3) { border-top: 1px solid var(--hair); }
}

/* ── phone ─────────────────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .rw-reviewhead { margin-bottom: var(--s-5); }

  /* Walk again becomes a bar along the bottom once the score has scrolled away */
  .rw-review .rw-reviewhead__next {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--surface) 94%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-top: 1px solid var(--hair);
    transform: translateY(110%); visibility: hidden;
    transition: transform var(--d-medium) var(--ease-out), visibility 0s linear var(--d-medium);
  }
  .rw-review .rw-reviewhead__next.is-shown { transform: none; visibility: visible; transition: transform var(--d-medium) var(--ease-out), visibility 0s; }
  .rw-review .rw-reviewhead__next > .rw-btn { flex: 1; }
  .rw-review .rw-reviewhead__score { display: inline-flex; align-items: baseline; font-family: var(--f-display); font-size: 1.5rem; font-weight: 600; padding-inline: var(--s-2); }
  .rw-screen.rw-review { padding-bottom: calc(var(--space-block) + 80px); }

  /* the score leads; the DOM order stays */
  .rw-result { display: flex; flex-direction: column; gap: var(--s-6); }
  .rw-result__summary { order: -1; }
  .rw-result__summary[data-state='running'] { order: 0; }
  .rw-result__summary:empty { display: none; }

  .rw-player { box-shadow: var(--print-sm); }
  .rw-player__overlay { grid-row: 2; width: 100%; margin: 0; }
  .rw-progress { background: var(--stage); -webkit-backdrop-filter: none; backdrop-filter: none; padding: var(--s-4); }
  .rw-progress__label { font-size: 1.375rem; }
  .rw-player__controls { grid-row: 3; }

  .rw-breakdown__head { flex-wrap: wrap; }
  .rw-keep .rw-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rw-keep .rw-actions > .rw-btn:only-child, .rw-keep .rw-actions > a.rw-btn { grid-column: 1 / -1; }

  .rw-pagehead__cta { width: 100%; }
  .rw-pagehead > :first-child { flex: 1 1 100%; }
  .rw-saved-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
  .rw-saved-toolbar .rw-field { min-width: 0; }
  .rw-saved-toolbar .rw-toolbar__end { grid-column: 1 / -1; margin-left: 0; width: 100%; }

  .rw-row-wrap { display: grid; gap: 0; }
  .rw-row-wrap .rw-row__delete { justify-self: end; }
  .rw-saved { gap: var(--s-3); padding: var(--s-3); }
  .rw-saved__thumb { width: 48px; height: 60px; }
  .rw-saved__figure { height: 48px; }
  .rw-saved .rw-row__score:not(.rw-row__score--none) { font-size: 1.75rem; }

  .rw-wallgrid { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .rw-wallcard--podium { box-shadow: var(--print-sm); }
  .rw-wallcard--podium .rw-wallcard__stage { height: 240px; }
  .rw-wallcard:not(.rw-wallcard--podium) .rw-wallcard__link { flex-direction: row; }
  .rw-wallcard:not(.rw-wallcard--podium) .rw-wallcard__stage { flex: none; width: 96px; height: auto; min-height: 128px; padding: var(--s-5) var(--s-2) var(--s-2); border-bottom: 0; border-right: 1px solid var(--hair-strong); }
  .rw-wallcard:not(.rw-wallcard--podium) .rw-wallcard__stage .rw-thumb, .rw-wallcard:not(.rw-wallcard--podium) .rw-wallcard__figure { height: 104px; }
  .rw-wallcard:not(.rw-wallcard--podium) .rw-wallcard__rank { top: var(--s-2); left: var(--s-2); font-size: 1.25rem; }
  .rw-wallcard:not(.rw-wallcard--podium) .rw-wallcard__body { padding: var(--s-4); }
  .rw-wallcard:not(.rw-wallcard--podium) .rw-wallcard__head { flex-direction: column; gap: 2px; }
  .rw-wallcard:not(.rw-wallcard--podium) .rw-wallcard__score { font-size: 1.75rem; }
  .rw-wallcard__foot { margin-inline: var(--s-4); }
  .rw-wallpost__actions { width: 100%; }
  .rw-walledit__video { box-shadow: var(--print-sm); }
}

@media (max-width: 520px) {
  .rw-player__controls input[type='range'] { order: -1; flex-basis: 100%; }
  .rw-player__time { margin-right: auto; }
  .rw-stills { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rw-measures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rw-metrics { grid-template-columns: minmax(0, 1fr); }
  .rw-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}