/* FAST Check page layer — loaded after cu-stroke.css (generated; do not edit that one).
   Hand-written: layout shared by every page + overrides that hold the team floor
   (text ≥ 7:1, controls ≥ 64 px). Spec: docs/superpowers/specs/2026-11-08-i18n-and-design-system-design.md */

/* ---- overrides pending a design-system fix ----
   (emergency, dark navy-ink and callbar-height were fixed in the system on 2026-11-10)
   weak-ink 4.9:1 and ink-muted 5.8:1 are under 7:1 → ink for text */
.cus-verdict--weak, .cus-verdict--running, .cus-verdict--skipped { color: var(--ink); }
   /* StepTracker labels + idle dots use ink-muted (5.8:1) → ink; current/none/found set their own */
.cus-steps li, .cus-steps__dot { color: var(--ink); }

/* ---- camera mirror: pages toggle .mirror at runtime (front camera); overlays counter-flip their text ---- */
video.mirror, canvas.mirror { transform: scaleX(-1); }

/* ---- page frame ---- */
.wrap { display: flex; flex-direction: column; min-height: 100dvh; max-width: var(--content-max); margin: 0 auto; }
.topbar { display: flex; align-items: center; gap: var(--space-3); min-height: var(--touch-min); box-sizing: border-box;
          padding: var(--space-2) var(--space-4); background: var(--surface-alt); border-bottom: 1px solid var(--border);
          font: 700 20px/28px var(--font-looped); }
.topbar a { color: var(--navy-ink); text-decoration: none; font-weight: 600; padding: var(--space-2) 0; white-space: nowrap; }
.topbar .title { flex: 1; min-width: 0; }
.panel { padding: var(--space-3) var(--space-4) var(--space-5); display: grid; gap: var(--space-3); flex: 1; align-content: start; }
.cus-verdict:empty { display: none; }
.hint { margin: 0; font: 400 20px/30px var(--font-looped); color: var(--ink); }

/* ---- language toggle (44 px: a stated deviation from touch-min, it is not part of the flow) ---- */
.lang-toggle { display: inline-flex; flex: none; border: 2px solid var(--border-strong); border-radius: var(--radius-pill); overflow: hidden; }
.lang-toggle button { min-height: 44px; min-width: 56px; padding: 0 var(--space-3); border: 0; background: transparent; color: var(--ink);
                      font: 700 17px/1 var(--font-looped); cursor: pointer; }
.lang-toggle button[aria-pressed="true"] { background: var(--action); color: var(--on-action); }
.lang-toggle button:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }

/* ---- left / right bars: navy while measuring; red only on the flagged side of a final "sign found" ---- */
.barrow { display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; gap: var(--space-3);
          font: 600 20px/30px var(--font-looped); }
.track { height: 22px; background: var(--surface-alt); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); overflow: hidden; }
.fill { height: 100%; width: 0; background: var(--none-ink); transition: width .12s linear; }
.fill.flagged { background: var(--found-ink); }
.barrow span:last-child { font: 700 18px var(--font-mono); text-align: right; }

/* ---- research details ---- */
.numbers { font: 16px/1.5 var(--font-mono); white-space: pre-wrap; min-height: 0; }
.dbg { display: none; }
body.showDebug .dbg { display: block; }
.linkbtn { background: transparent; color: var(--navy-ink); border: 0; font: 600 16px/24px var(--font-looped);
           padding: var(--space-2) 0; justify-self: start; text-decoration: underline; cursor: pointer; }

/* ---- home ---- */
.home-head { display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-4) 0; text-align: center; }
.logo-plate { background: #ffffff; border-radius: var(--radius-lg); padding: var(--space-4); line-height: 0; } /* white ground + clear space ≥ the red node (≈16 px at 200 px) */
.logo-plate img { width: 200px; height: auto; display: block; }
.home-head h1 { margin: 0; font: 700 34px/46px var(--font-sans); color: var(--navy-ink); }
.home-head p { margin: 0; font: 400 20px/30px var(--font-looped); }
.card { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: var(--space-4); min-height: 88px; box-sizing: border-box;
        padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--action); color: var(--on-action);
        text-decoration: none; font-family: var(--font-looped); }
.card:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.card .letter { width: 56px; height: 56px; border-radius: var(--radius-pill); display: grid; place-items: center;
                background: var(--on-action); color: var(--action); font: 700 30px/1 var(--font-mono); }
.card b { display: block; font-size: 26px; line-height: 34px; }
.card small { display: block; font-size: 17px; line-height: 26px; }
.research { color: var(--navy-ink); font: 600 16px/24px var(--font-looped); text-align: center; padding: var(--space-2); }

/* ---- speech check ---- */
.cus-stage.speech { aspect-ratio: auto; min-height: 260px; display: grid; align-content: center; justify-items: center;
                    gap: var(--space-3); padding: 48px var(--space-4) var(--space-4); box-sizing: border-box; }
.speech .phrase { font: 700 34px/48px var(--font-looped); text-align: center; color: var(--on-stage); }
.speech .cus-stage__cue { position: static; }
.speech .track { width: 100%; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); }
.speech .fill { background: var(--weak); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.q { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.q > span { grid-column: 1 / -1; font: 600 22px/32px var(--font-looped); }
.q button { min-height: var(--touch-min); border-radius: var(--radius-md); border: 2px solid var(--border-strong); background: var(--surface-raised);
            color: var(--ink); font: 700 24px/32px var(--font-looped); cursor: pointer; }
.q button[aria-pressed="true"] { background: var(--action); border-color: var(--action); color: var(--on-action); }
.q button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.review { gap: var(--space-4); }
.review audio { width: 100%; }

/* ---- research recorder (Thai only) ---- */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.form-row label { display: grid; gap: var(--space-1); font: 600 16px/22px var(--font-sans); }
.form-row select, .form-row input { min-height: 52px; padding: 0 var(--space-3); border: 2px solid var(--border-strong); border-radius: var(--radius-md);
                                    background: var(--surface-raised); color: var(--ink); font: 400 18px var(--font-sans); box-sizing: border-box; width: 100%; }
/* speech phases: which controls show when (moved from the page's inline style).
   Scoped to .speech-page: face/arm also set data-phase, and an unscoped #start rule hid their Start. */
.speech-page .review { display: none; }
.speech-page[data-phase="review"] .review, .speech-page[data-phase="done"] .review { display: grid; }
.speech-page:not([data-phase="ready"]) .readyOnly { display: none; }
.speech-page:not([data-phase="idle"]) #start { display: none; }
.speech-page:not([data-phase="review"]):not([data-phase="done"]) .afterOnly { display: none; }
.speech-page[data-phase="record"] .speech .fill { background: var(--on-stage); }

/* ---- FAST sequence (2026-11-11): step tracker, follow-up block, summary ---- */
.steps-bar { padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--border); background: var(--surface); }
.flow { display: grid; gap: var(--space-3); }
.flow:empty { display: none; }
.startpick { display: grid; gap: var(--space-3); }
.cus-btn--pick { flex-direction: column; gap: 2px; padding-block: var(--space-3); }
.pick-sub { font-size: 18px; line-height: 26px; font-weight: 600; }
/* Arm before Start: no camera yet, so a short stage keeps both camera choices above the call bar. */
.arm-page:not([data-phase]) #stage { max-height: 30dvh; }
.flow .cus-onset legend { font-size: 24px; line-height: 34px; margin-bottom: var(--space-2); }
.flow-urgent { font-weight: 700; color: var(--found-ink); }
.card--start { grid-template-columns: auto 1fr; min-height: 112px; }
.card .letters { padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill); background: var(--on-action); color: var(--action);
                 font: 700 22px/1 var(--font-mono); white-space: nowrap; }
.card--start b { font-size: 30px; line-height: 40px; }
.sum-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.sum-rows li { display: grid; gap: var(--space-1); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
               background: var(--surface-alt); border: 2px solid var(--border); font: 400 20px/30px var(--font-looped); }
.sum-rows li b { font-weight: 700; font-size: 22px; }
.sum-rows li[data-status="skipped"] { border-style: dashed; }
.sum-rows li[data-status="found"] { border-color: var(--found-ink); }
#window:empty, #lastWell:empty, #callSlot:empty, #callLate:empty { display: none; }
.summary-page .panel > div:empty { display: none; }
/* scrollIntoView ignores the sticky call bar: keep revealed follow-up controls above it */
.flow > *, #window { scroll-margin-bottom: calc(var(--callbar-height) + var(--space-4)); scroll-margin-top: var(--space-4); }