/* DrawMate screens. Tokens, type, controls, marks and motion come from the interface kit
   (coach/kit/kit.css, glyphs.css, motion.js); this file only lays out the screens. No colour is
   written here except through a kit token, and nothing here animates: motion is the kit's.

   Progressive: body[data-step] says where the shooter is (stage.js). Setup shows one step at a time;
   the session is the camera, with one instruction on top and the time and cue at the bottom. */

.hidden, [hidden] { display: none !important; }
.center { text-align: center; margin-inline: auto; }

/* Prose: sentences are set in the sans; bold inside them is real bold. */
.fine, .restOverlay p, .lead, .hint, .checks, .rulesBody p, .issues li, .videoBlock p, #savedWhere { font-family: var(--sans); text-wrap: pretty; }
.fine b, .hint b, .rulesBody b { font-weight: 650; color: var(--text); }
.fine { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 8px 0 0; max-width: 65ch; }
.card p { margin: 0 0 10px; max-width: 65ch; }

/* ---------- header ---------- */
.bar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 2ch; min-height: 49px;
  padding: max(4px, env(safe-area-inset-top)) 16px 4px;
  background: var(--bg); border-bottom: 1px solid var(--line);
  text-transform: uppercase;
}
.bar > * { white-space: nowrap; }
.bar .k-tag { margin-left: auto; }
.barBtn { min-height: 44px; padding: 0 12px; font-size: var(--t-xs); border-color: var(--line); }
/* Account: [ ] signed out, [+] signed in (then it shows the email, cut short on a phone). */
.barAcct { flex: 0 0 auto; min-width: 44px; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 400px) { .bar .k-tag { display: none; } .bar .barAcct { margin-left: auto; } }
.barAcct::before { content: "[ ] "; content: "[ ] " / ""; color: var(--muted); }
.barAcct.on::before { content: "[+] "; content: "[+] " / ""; color: var(--good); }
/* Phones, signed in: the glyph alone; the email stays in the accessible name. Signed out keeps "Sign in". */
@media (max-width: 480px) {
  .barAcct.on { font-size: 0; min-width: 44px; }
  .barAcct.on::before { font-size: var(--t-xs); content: "[+]"; content: "[+]" / ""; }
}
.screen { display: none; }
.screen.active { display: block; }

/* ---------- setup: one step at a time ---------- */
.setup { max-width: 600px; margin: 0 auto; padding: 24px 16px max(32px, env(safe-area-inset-bottom)); min-height: calc(100dvh - 49px); display: grid; align-content: center; gap: 44px; }
.steps { list-style: none; margin: 0; padding: 0; }
.step { display: grid; gap: 22px; justify-items: start; }
.step[data-state=todo], .step[data-state=done] { display: none; }
.eyebrow { margin: 0; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.stepTitle { margin: 0; font-size: var(--t-l); line-height: 1.1; font-weight: normal; text-transform: uppercase; letter-spacing: 0.02em; text-wrap: balance; }
.stepTitle:focus { outline: none; }
.lead { margin: 0; max-width: 52ch; font-size: 18px; line-height: 1.5; }
.hint { margin: 0; max-width: 52ch; font-size: 15px; line-height: 1.5; color: var(--muted); }
.checks { list-style: none; margin: 0; padding: 0; width: 100%; font-size: 18px; line-height: 1.45; counter-reset: check; }
.checks li { counter-increment: check; display: grid; grid-template-columns: 4ch 1fr; padding: 12px 0; border-top: 1px solid var(--line); }
.checks li:last-child { border-bottom: 1px solid var(--line); }
.checks li::before { content: counter(check, decimal-leading-zero); font-family: var(--mono); font-size: var(--t-s); color: var(--ok); }
.rules { width: 100%; }
.rulesBody p { margin: 0 0 10px; max-width: 65ch; font-size: 15px; line-height: 1.55; color: var(--muted); text-transform: none; }
.cta { width: 100%; }
.big { min-height: 56px; font-size: var(--t-m); }
.drill { display: flex; align-items: center; justify-content: space-between; gap: 2ch; width: 100%; margin: 0; padding: 2px 0; border-block: 1px solid var(--line); font-size: var(--t-s); text-transform: uppercase; font-variant-numeric: tabular-nums; }
/* Phones: the camera choice sits right under the drill line, one ruled block of two rows. */
.drill + .camPick { margin-top: -22px; border-top: 0; }
/* A text button: sentence case, underlined, a 44 px target. */
.textLink {
  min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--muted);
  font-family: var(--sans); font-size: 15px; text-transform: none; text-decoration: underline; text-underline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) { .textLink:hover:not(:disabled) { color: var(--text); background: none; } }
.textLink:active:not(:disabled) { color: var(--text); background: none; }
/* A text link inside a line of fine print: keeps the line's height; the hit area grows invisibly. */
.textLink.inline { position: relative; min-height: 0; padding: 0; font-size: inherit; line-height: inherit; vertical-align: baseline; }
.textLink.inline::before { content: ""; position: absolute; inset: -12px -4px; }
/* A sub-option under a checkbox (camera-only video under Record). */
.check.sub { margin-left: 4ch; padding-top: 0; }
.check.sub:has(input:disabled) { opacity: 0.55; cursor: not-allowed; }
.alt, #setupHint { justify-self: center; margin-top: -10px; }
/* Live camera or a video file: the camera step swaps its copy and its button. */
#stepCamera.file .ifLive, #stepCamera:not(.file) .ifFile { display: none; }
#stepCamera.file .field.ifFile { display: grid; width: 100%; }

/* Recent sessions: only on the camera step, and only once there is one. */
body:not([data-step=setup-camera]) #historyCard { display: none; }
.history { display: grid; }
.histTrend { display: flex; justify-content: space-between; align-items: baseline; gap: 2ch; padding-bottom: 10px; }
.histTrend small { color: var(--muted); font-size: var(--t-xs); text-transform: uppercase; }
.histRow { display: grid; grid-template-columns: 1fr auto; gap: 2px 2ch; padding: 10px 0; border-top: 1px solid var(--line); align-items: baseline; }
.histRow:last-child { border-bottom: 1px solid var(--line); }
.histRow .histTime { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.histRow .histSub { grid-column: 1 / -1; color: var(--muted); }
details.histRow { display: block; padding: 0; }
details.histRow > summary { display: grid; grid-template-columns: 1fr auto auto; grid-template-areas: "when time arrow" "sub sub arrow"; gap: 2px 2ch; padding: 10px 0; align-items: baseline; list-style: none; cursor: pointer; min-height: 44px; }
details.histRow > summary > b { grid-area: when; white-space: nowrap; }
details.histRow > summary > .histTime { grid-area: time; }
details.histRow > summary > .histSub { grid-area: sub; }
details.histRow > summary::after { grid-area: arrow; align-self: center; }
/* Phones: date, then the time, then the sub-line; the arrow stays beside all three. */
@media (max-width: 480px) {
  details.histRow > summary { grid-template-columns: 1fr auto; grid-template-areas: "when arrow" "time arrow" "sub arrow"; }
  details.histRow > summary > .histTime { text-align: left; }
}
details.histRow > summary::-webkit-details-marker { display: none; }
details.histRow > summary::after { content: "►"; content: "►" / ""; color: var(--faint); font-size: var(--t-xs); }
details.histRow[open] > summary::after { content: "▼"; content: "▼" / ""; color: var(--muted); }
details.histRow > summary:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px; }
.histDetail { padding: 6px 0 24px; display: grid; gap: 16px; }
.histDetail .actions { justify-content: flex-start; }
.authActs > [hidden] { display: none; }
.authActs { display: flex; flex-wrap: wrap; gap: 8px 2ch; }
#authForm .row2 { margin: 0; }
#accountOut, #accountIn, #authForm { display: grid; gap: 16px; align-content: start; }
#accountOut .fine, #accountIn .k-why:empty { margin: 0; }
#accountIn .k-why:empty { display: none; }
#research { display: grid; gap: 4px; padding-top: 16px; }
#research[hidden] { display: none; }
#research .fine { margin: 0 0 8px 4ch; }
#research .k-disc { margin-left: 4ch; }
#research .k-disc[open] { margin-bottom: 8px; }
#research .bullets { padding-left: 2ch; list-style: "– "; }
#research .bullets li + li { margin-top: 4px; }
#research .row2 { margin-top: 16px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 16px; }
#research .k-disc > summary { text-wrap: balance; }
#research .check:has(input:disabled) { cursor: not-allowed; opacity: 0.55; }
#research .check:has(input:disabled)::before { color: var(--faint); }
#research .k-err, #research .k-why { margin-top: 8px; }
/* Sign-in step 2: "Check name@example.com", the code, the link note, then the two ways out. */
#authStep2 { display: grid; gap: 16px; align-content: start; }
#authStep2 .lead, #authStep2 .fine { margin: 0; }
#authCheck { overflow-wrap: anywhere; }
#authCheck:focus { outline: none; }
#authCode { width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 0; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font-size: var(--t-m); letter-spacing: 0.3em; font-variant-numeric: tabular-nums; text-transform: none; }
#authCode:disabled { color: var(--disabled); }
#authCaptcha:empty { display: none; }
#resendButton { min-width: 20ch; font-variant-numeric: tabular-nums; } /* the countdown never resizes the button */
/* The summary's save row and the setup line: sentences with a link in them, not boxes. */
#savedWhere a, #guestLine .textLink { color: var(--text); }
#savedWhere a { text-underline-offset: 3px; padding-block: 12px; } /* the link is a 44 px target inside the line */
#guestLine { justify-self: start; flex-wrap: wrap; align-items: center; }
#guestLine .textLink { padding: 0; }

/* ---------- settings sheet: everything that isn't the next step ---------- */
.sheet {
  margin: 0 0 0 auto; padding: 0; width: min(520px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh;
  border: 0; border-left: 1px solid var(--line); background: var(--bg); color: var(--text); overscroll-behavior: contain;
}
.sheet::backdrop { background: var(--scrim); }
.sheetHead { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 2ch; padding: max(4px, env(safe-area-inset-top)) 16px 4px; min-height: 57px; background: var(--bg); border-bottom: 1px solid var(--line); }
.sheetHead h2 { margin: 0; }
.sheetHead h2::after { content: none; }
.sheetBody { display: grid; gap: 33px; padding: 22px 16px max(32px, env(safe-area-inset-bottom)); }
.sheet .inSession { display: none; }
.sheet[data-in-session] .inSession { display: flex; }
.sheetFoot { margin: 0; font-size: var(--t-xs); text-transform: uppercase; }
.sheetFoot a { color: var(--muted); text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; }
.card { min-width: 0; }
.sheetBody .card { scroll-margin-top: 72px; }
.row2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; align-items: start; }

/* ---------- session: the camera is the screen ---------- */
.session { position: relative; height: calc(100dvh - 49px); }
.stage { position: relative; height: 100%; background: var(--stage); color: var(--text); display: grid; place-items: center; overflow: hidden; }
#view { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; }
#video { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* Viewfinder corners over the camera. They turn red for the GO, green while you hold, amber paused. */
.viewfinder { position: absolute; inset: 10px; pointer-events: none; --k-c: 22px; --k-ink: color-mix(in oklch, var(--text) 45%, transparent); }
.viewfinder.go { --k-ink: var(--work); --k-w: 4px; }
.viewfinder.hold { --k-ink: var(--good); }
.viewfinder.pause { --k-ink: var(--ok); }
/* Framing: where your head-to-hips should sit. Only while you step into frame. */
.guide { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: min(36%, 300px); height: 64%; outline: 2px dashed color-mix(in oklch, var(--ok) 60%, transparent); outline-offset: -2px; pointer-events: none; display: none; }
body[data-step=framing] .guide { display: block; }

/* Top: the one instruction, then the measured view or the calibration gauge, then notices. */
.stageTop { position: absolute; top: 16px; left: 16px; right: 16px; z-index: 2; display: grid; gap: 8px; justify-items: center; pointer-events: none; }
.stageTop > * { pointer-events: auto; }
.pill { display: flex; align-items: baseline; gap: 1ch; max-width: min(100%, 36ch); padding: 8px 16px; background: var(--scrim); font-size: var(--t-m); line-height: 1.25; }
.pill strong { text-transform: uppercase; text-wrap: balance; }
.pill.k-flash .dot::before { color: inherit; }
.dot { flex: 0 0 auto; }
.viewChip { display: flex; align-items: baseline; gap: 1ch; margin: 0; padding: 0 4px 0 12px; background: var(--scrim); font-size: var(--t-xs); text-transform: uppercase; color: var(--muted); }
.viewChip .textLink { font-size: 13px; }
body:not([data-step=first]):not([data-step=live]) .viewChip { display: none; }
.stageTop .k-gauge { padding: 4px 12px; background: var(--scrim); color: var(--text); font-size: var(--t-s); }
.stageTop .k-gauge .k-meter { font-size: var(--t-m); }
.k-notices { width: min(520px, 100%); }

/* Bottom: the time, its cue and the set, readable from 3 m; then the controls. */
/* Above the pause and rest overlays (z 3), so End is always reachable; the drawer (z 5) covers it. */
.hud { position: absolute; left: 16px; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 4; display: grid; justify-items: center; gap: 12px; pointer-events: none; }
.hud > * { pointer-events: auto; }
/* One slot under the time, shared by the cue and the hold meter, sized for two lines of cue: the
   time never moves as cues change length or the hold meter comes and goes. */
.hudLive { display: none; grid-template-areas: "meta" "time" "cue"; justify-items: center; gap: 4px; padding: 10px 24px 12px; background: var(--scrim); max-width: 100%; }
body:is([data-step=first], [data-step=live]):not([data-paused]) .hudLive { display: grid; }
.hudMeta { grid-area: meta; }
.hud .k-timer { grid-area: time; }
.hudCue, .hud #holdGauge { grid-area: cue; align-self: start; }
.hudMeta { display: flex; flex-wrap: nowrap; justify-content: center; gap: 0 2ch; align-items: baseline; max-width: 100%; font-size: var(--t-s); text-transform: uppercase; color: var(--text); white-space: nowrap; }
.hudMeta .k-ticks { flex-wrap: nowrap; min-width: 0; overflow: hidden; font-size: var(--t-s); }
.hud .k-timer { justify-items: center; gap: 0; }
.hud .k-read { font-size: 132px; }
.hud .k-timer[data-prev] .k-read { color: var(--text); }
/* The sub-line repeats the instruction on top; only the par result and the hold meter stay. */
.hud #timerMark, .hud #timerSubText { display: none; }
/* Par: its line is there for the whole session when a par is set, so the result doesn't shift it. */
.hud .k-timer:not([data-par]) .k-sub { display: none; }
.hud #holdGauge { font-size: var(--t-s); color: var(--text); }
.hud #holdGauge .k-meter { font-size: var(--t-m); }
.hud #holdGauge.off { visibility: hidden; }
.hudCue { margin: 0; min-height: 2.6em; max-width: 30ch; font-size: var(--t-m); line-height: 1.3; text-transform: uppercase; text-align: center; text-wrap: balance; }
/* While the clock runs, the last rep's cue would read as this rep's: hidden, with its space kept. */
.hud:has(.k-timer:is([data-state=go], [data-state=running], [data-state=hold])) .hudCue { visibility: hidden; }
body:is([data-step=framing], [data-step=failed]) .bootLog { display: none; }
.hudCue.good { color: var(--good); }
.hudCue.work { color: var(--ok); }
.hudCtl { display: none; flex-wrap: wrap; justify-content: center; gap: 8px; }
body:is([data-step=loading], [data-step=framing], [data-step=calibrate], [data-step=first], [data-step=live], [data-step=rest]) .hudCtl { display: flex; }
.hudCtl button { min-height: 44px; padding: 8px 16px; font-size: var(--t-xs); background: var(--scrim); }
/* Loading: Cancel only. Rest: Details and End. Paused: the overlay's Resume, so no second one here. */
body:not([data-step=first]):not([data-step=live]):not([data-step=rest]) #detailsButton,
body[data-step=loading] #flipButton,
body:is([data-step=loading], [data-step=rest]) :is(#voiceButton, #pauseButton),
body[data-paused] #pauseButton { display: none; }
#voiceButton::before { content: "[x]"; content: "[x]" / ""; color: var(--good); }
#voiceButton[aria-pressed=false] { color: var(--muted); }
#voiceButton[aria-pressed=false]::before { content: "[ ]"; content: "[ ]" / ""; color: var(--muted); }

/* Boot log: what the coach is loading, printed line by line while the stage is empty. */
.bootLog { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: min(420px, calc(100% - 48px)); margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: var(--t-xs); text-transform: uppercase; color: var(--muted); }
.bootLog li { display: flex; align-items: baseline; gap: 1ch; }
.bootLog li .lead { flex: 1; min-width: 2ch; overflow: hidden; color: var(--faint); white-space: nowrap; }
.bootLog li .lead::before { content: "........................................................................"; content: "........................................................................" / ""; }
.bootLog li .gunIcon { margin: 0; }
.bootLog li.done { color: var(--text); }

/* Overlays on the stage: camera blocked / failed, paused, and the rest between sets. */
/* Auto margins centre the box but fall back to the top edge when it is taller than a phone's stage,
   so the overlay scrolls instead of cutting off the buttons. */
/* The bottom padding keeps the box clear of the HUD's control row, which sits above the overlay. */
.stageOverlay { position: absolute; inset: 0; z-index: 3; display: grid; overflow-y: auto; overscroll-behavior: contain; padding: 24px 24px calc(44px + 32px + env(safe-area-inset-bottom)); background: var(--scrim-strong); }
.stageOverlay > * { margin: auto; }
@media (max-width: 480px) { .stageOverlay { padding: 16px; } }
.stageOverlay .k-state { --k-ink: var(--text); max-width: 480px; }
.stageOverlay .k-state.work { --k-ink: var(--work); }
.stageOverlay .k-state.pause { --k-ink: var(--ok); }
.restBox { --k-ink: var(--text); --k-c: 18px; display: grid; justify-items: center; gap: 14px; text-align: center; padding: 28px 32px; max-width: 460px; }
.restOverlay h2, .restBox h2 { margin: 0; }
.restBox h2::before, .restBox h2::after { content: none; }
.restBox p { margin: 0; color: var(--muted); line-height: 1.5; font-family: var(--sans); text-wrap: pretty; }
.restBox .count { font-family: var(--mono); font-size: var(--t-xl); line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.restBox .k-meter { font-size: var(--t-s); color: var(--muted); }
.restBox .restNext { font-family: var(--mono); font-size: var(--t-xs); text-transform: uppercase; color: var(--text); }
.restBox .restNext.final { color: var(--mark); }

/* ---------- details drawer: the last rep's splits and checks, every rep so far ---------- */
.details {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 5; width: min(420px, 100%);
  display: grid; align-content: start; gap: 22px; padding: 0 16px max(20px, env(safe-area-inset-bottom));
  background: var(--bg); border-left: 1px solid var(--line); overflow: auto; overscroll-behavior: contain;
}
.detailsHead { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 2ch; padding: 8px 0; background: var(--bg); border-bottom: 1px solid var(--line); }
.detailsHead h2 { margin: 0; }
.detailsHead h2::after { content: none; }
.details .k-keys { display: none; }
.trackLine { font-variant-numeric: tabular-nums; margin-top: 16px; }
.trackLine:empty { display: none; }
@media (hover: hover) and (pointer: fine) { .details .k-keys { display: flex; } }
.lastHead { display: flex; justify-content: space-between; align-items: baseline; gap: 1ch; }
.lastHead small { color: var(--muted); font-size: var(--t-xs); text-transform: uppercase; }
.k-read { margin-top: 2px; }
.splits { display: flex; flex-wrap: wrap; gap: 4px 2ch; color: var(--muted); margin: 12px 0 4px; }
.splits b { color: var(--text); }
.splits:empty { display: none; }
.card .cue, .cue { margin: 12px 0; line-height: 1.45; display: flex; gap: 1ch; }
.cue::before { flex: 0 0 auto; }
.cue.good { color: var(--good); }
.cue.muted { color: var(--muted); }

/* Check results: a disclosure each. Mark, small label, value; open it for what the check means. */
.chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0 2ch; }
.chip { min-width: 0; border-top: 1px solid var(--line); }
.chip > summary { display: grid; grid-template-columns: auto 1fr auto; column-gap: 1ch; align-items: baseline; line-height: 1.3; }
.chip > summary::before { grid-row: span 3; }
.chip > summary::after { grid-column: 3; grid-row: 1; }
.chip > summary b { grid-column: 2; font-size: var(--t-xs); text-transform: uppercase; color: var(--muted); }
.chip > summary > span { grid-column: 2; }
.chip.weak > summary { color: var(--muted); }
.chip.info > summary { color: var(--text); }
/* Style and info checks, folded away from the graded ones. */
.notGraded { grid-column: 1 / -1; border-top: 1px solid var(--line); }
.notGraded > summary { color: var(--muted); font-size: var(--t-xs); text-transform: uppercase; }
.notGraded > .chips, .notGraded > .ungradedList { margin: 0; padding: 0; font-family: var(--mono); font-size: inherit; color: var(--text); }
.ungradedList { list-style: none; display: grid; gap: 4px; }
.ungradedList li { display: flex; justify-content: space-between; gap: 2ch; font-size: var(--t-xs); text-transform: uppercase; }
.ungradedList li span + span { color: var(--muted); }

.repHead { display: flex; justify-content: space-between; align-items: baseline; gap: 2ch; margin-bottom: -14px; }
.repHead small { color: var(--muted); font-size: var(--t-xs); text-transform: uppercase; }
.repHead .k-spark { font-size: var(--t-s); overflow: hidden; }
.repList { display: grid; max-height: 34dvh; overflow: auto; overscroll-behavior: contain; border-top: 1px solid var(--line); }
.repRow { border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.repRow > summary, div.repRow { display: grid; grid-template-columns: 6ch 7ch minmax(0, 1fr) auto; align-items: baseline; gap: 1ch; padding: 8px 0; min-height: 44px; }
.repRow .n { color: var(--muted); }
.repRow .c { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.repRow.flag .c { color: var(--work); }
.repRow.clean .c { color: var(--good); }
.repRow > summary::after { grid-column: 4; }
.repChecks { margin: 0 0 8px; padding: 0; list-style: none; display: grid; gap: 2px; font-size: var(--t-xs); text-transform: uppercase; color: var(--muted); font-family: var(--mono); }
.repChecks li { display: flex; align-items: baseline; }
.repChecks .notGradedRow { display: block; }
.repChecks .notGradedRow ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.actions { display: flex; gap: 10px; }
.actions > * { flex: 1; }
.actions.wrap { flex-wrap: wrap; }
.actions.wrap > * { flex: 1 1 160px; }

@media (max-width: 600px) {
  .stepTitle { font-size: var(--t-m); }
  .big { font-size: var(--t-s); }
  .setup { align-content: start; padding-top: 32px; }
  .hud .k-read { font-size: 99px; }
}

/* ---------- summary: the same column, type and hierarchy as the setup steps ---------- */
.summary { max-width: 760px; margin: 0 auto; padding: 44px 16px max(44px, env(safe-area-inset-bottom)); display: grid; gap: 33px; }
.sumHead { display: grid; gap: 10px; }
/* Anything scrolled or tabbed to clears the sticky header (html scroll-padding below). */
.sumHead .fine { margin: 0; }
/* The median, as large as the live time; best, spread and count on one line under it. */
.sumHero { display: grid; gap: 4px; padding-top: 22px; border-top: 1px solid var(--line); }
.heroSub span { white-space: nowrap; }
/* Hold spread leads; the time sits under it at a step smaller. */
.sumHold { display: grid; gap: 4px; padding-top: 22px; border-top: 1px solid var(--line); }
.holdNum { margin: 0; font-size: 99px; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.holdNum small { font-size: var(--t-l); letter-spacing: 0; color: var(--muted); }
.holdNum:empty { display: none; }
.holdSub { margin: 0; font-family: var(--sans); font-size: 15px; line-height: 1.5; color: var(--text); max-width: 60ch; text-wrap: pretty; }
.holdSub span { color: var(--muted); }
.holdMore { margin-top: 8px; }
.holdMore[hidden] { display: none; }
.holdTable { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: var(--t-s); }
.holdTable th, .holdTable td { text-align: right; padding: 6px 0 6px 2ch; border-top: 1px solid var(--line); white-space: nowrap; }
.holdTable th:first-child, .holdTable td:first-child { text-align: left; padding-left: 0; }
.holdTable th { font-weight: 400; color: var(--muted); font-size: var(--t-xs); text-transform: uppercase; }
.holdTable caption { caption-side: top; text-align: left; padding-bottom: 6px; font-family: var(--sans); font-size: 13px; color: var(--muted); }
.holdTable td { color: var(--muted); }
.holdTable .far td { color: var(--text); }
.holdNotes { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.holdNotes li { font-family: var(--sans); font-size: 13px; line-height: 1.5; color: var(--muted); max-width: 65ch; }
.summary:has(#summaryHold:not([hidden])) .heroTime { font-size: 66px; }
.sumSave { display: grid; gap: 12px; padding: 16px 0; border-block: 1px solid var(--line); }
.sumSave .videoBlock { padding: 0; border: 0; }
.sumSave p { margin: 0; }
.heroTime { margin: 0; font-size: 99px; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.heroTime small { font-size: var(--t-l); letter-spacing: 0; color: var(--muted); }
.heroNote { margin: 4px 0 0; display: grid; gap: 2px; font-family: var(--sans); font-size: 14px; color: var(--muted); }
.heroNote:empty { display: none; }
.heroSub { margin: 0; font-size: var(--t-s); text-transform: uppercase; color: var(--muted); }
#savedWhere:empty { display: none; }
.sumSave:has(#savedWhere:empty):has(.videoBlock:empty) { display: none; }
.sumActs { display: flex; flex-wrap: wrap; gap: 8px; }
.sumActs > button { flex: 1 1 auto; }
.sumActs > #newSession { flex: 1 1 240px; }
.heatPhotoToggle { display: grid; gap: 0; margin: 10px 0 22px; }
.heatPhotoToggle .k-why { margin: 0; }
@media (max-width: 480px) { .heroTime, .holdNum { font-size: 66px; } .summary:has(#summaryHold:not([hidden])) .heroTime { font-size: 48px; } .summary { padding-top: 33px; } }
.videoBlock { display: flex; flex-wrap: wrap; gap: 10px 2ch; align-items: center; justify-content: space-between; padding: 12px 0; border-block: 1px solid var(--line); }
.videoBlock p { margin: 0; }
.videoBlock .button { flex: 0 1 260px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); column-gap: 3ch; margin-bottom: 33px; }
.stat { border-top: 1px solid var(--line); padding: 10px 0 16px; min-width: 0; }
.stat small { display: block; color: var(--muted); font-size: var(--t-xs); text-transform: uppercase; }
.stat b { display: block; font-size: var(--t-l); line-height: 1.2; margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.stat span { display: block; color: var(--muted); font-family: var(--sans); font-size: 13px; line-height: 1.4; }
.timesBox { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px 3ch; }
.timesBox small { display: block; color: var(--muted); font-size: var(--t-xs); text-transform: uppercase; margin-bottom: 8px; }
.timesBox .k-spark { display: block; overflow: hidden; }
#summaryBody, [role=tabpanel] { min-width: 0; }
#panelOverview > .card + .card { margin-top: 33px; }
.issues { margin: 0; padding: 0; list-style: none; counter-reset: issue; display: grid; gap: 8px; }
.issues li { counter-increment: issue; position: relative; padding-left: 4ch; }
.issues li::before { content: counter(issue, decimal-leading-zero); position: absolute; left: 0; color: var(--muted); }
.issues li span { color: var(--muted); white-space: nowrap; }
.checkTable { display: grid; gap: 10px; }

/* Heat maps: one per camera angle and kind. Map left, numbers and the rep picker right; stacked on phones. */
.heatMaps { display: grid; gap: 33px; }
.heatGroup h3 { display: flex; align-items: baseline; gap: 1ch; margin: 0 0 10px; font-size: var(--t-s); font-weight: normal; text-transform: uppercase; }
.heatBody { display: flex; flex-wrap: wrap; gap: 16px 3ch; align-items: flex-start; }
.heatSide { flex: 1 1 180px; min-width: 0; display: grid; gap: 16px; }
.heatStats { display: grid; grid-template-columns: auto 1fr; gap: 4px 2ch; margin: 0; font-size: var(--t-xs); text-transform: uppercase; }
.heatStats dt { color: var(--muted); }
.heatStats dd { margin: 0; font-variant-numeric: tabular-nums; }
.heatLegend { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: var(--t-xs); text-transform: uppercase; color: var(--muted); }
.heatLegend li { display: flex; gap: 1ch; align-items: baseline; }
.heatLegend li > i { font-style: normal; width: 5ch; text-align: center; }
.heatLegend .k-heatRamp { width: 5ch; white-space: pre; }
.heatPick { display: grid; gap: 6px; }
.heatReps { flex-wrap: wrap; margin: 0; border: 0; gap: 4px; }
/* Phones: the picker above the map, so the map it redraws is in view. */
@media (max-width: 600px) {
  .heatBody { flex-direction: column; flex-wrap: nowrap; }
  .heatSide { display: contents; }
  .heatPick { order: -1; }
}
.heatReps label { flex: 0 0 auto; border: 1px solid var(--line-strong); }
.heatReps label + label { border-left: 1px solid var(--line-strong); }
.heatReps span { min-height: 44px; padding: 12px 1ch; font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
.heatReps input:focus-visible + span { outline: 2px solid var(--mark); outline-offset: 2px; }

@media (min-width: 960px) { .repList { max-height: none; } }

html { scroll-padding-top: 66px; }
.fieldHint { font-size: var(--t-xs); text-transform: none; color: var(--muted); }

/* Summary help: how to read the numbers, and where the reference times come from. */
.sumHelp { margin-top: 16px; border-top: 1px solid var(--line); }
.sumHelp p, #refList { margin: 0 0 10px; max-width: 65ch; }
#refList { padding: 0; list-style: none; display: grid; gap: 6px; }
#refList a { color: var(--text); }

/* Style group in Settings: one calm line under each select. */
#styleFold > summary h2 { margin: 0; }
.styleNote { display: block; margin-top: 6px; text-transform: none; font-size: 13px; }

/* Safety checklist: one tick per line, all of them before Continue. */
.tickList { list-style: none; margin: 0; padding: 0; width: 100%; font-family: var(--sans); font-size: 17px; line-height: 1.45; }
.tickList li { border-top: 1px solid var(--line); }
.tickList li:last-child { border-bottom: 1px solid var(--line); }
.tickList .check { padding-block: 12px; }
.rules.why > .rulesBody { padding-top: 4px; }
#recheckList .tickList { font-size: 16px; }
.tickList .check::before { font-family: var(--mono); }