:root{
  /* 22.10.2026: the flow's shared tokens (DESIGN_SYSTEM_FLOW.md section 1). The legacy names below point at them. */
  --pk:#D1409C; --pk-ink:#B22F82; --pk-deep:#9C1762; --pk-night:#7A0F4D; --pk-50:#FDF2F8; --pk-100:#FBE4F0; --pk-200:#F4C2DC;
  --ink:#1A1014; --ink-2:#4F4349; --ink-3:#6E6168;
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#FBF8F6; --line:#EEE5E1; --edge:#857A80; --track:#EFE3EA;
  --ok:#1E6B3A; --ok-tint:#E8F4EC; --warn:#8A5A00; --warn-tint:#FFF4E0; --err:#B3261E; --err-tint:#FDECEA; --info:#2F5E9E; --info-tint:#EAF1FA; --explain:#4B4B86; --focus:#1A1014;
  --font:'Heebo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r-sm:10px; --r-md:14px; --r-lg:22px; --r-pill:999px; --hit:48px; --hit-min:44px; --btn-h:56px;
  --ease:cubic-bezier(.16,1,.3,1);
  --safe-top:env(safe-area-inset-top,0px); --safe-bottom:env(safe-area-inset-bottom,0px);
  /* legacy names used by the rules below */
  --accent:var(--pk); --accent-deep:var(--pk-ink); --accent-soft:var(--pk-100); --accent-wash:var(--pk-50);
  --navy:#14142A; --paper:var(--bg); --tint:var(--surface-2); --line-strong:var(--edge); --track-off:#6B6B76;
  --dot:#22C55E; --serif:var(--font); --sans:var(--font);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;touch-action:manipulation}
html[dir=rtl] body{font-family:'Heebo',var(--sans)}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid #14141A;outline-offset:3px;box-shadow:0 0 0 6px #fff}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

#app{position:fixed;inset:0;overflow:hidden;background:#000}
#app[data-screen=capture]{touch-action:none}
@media (min-width:600px){
  #app{inset:auto;top:50%;left:50%;transform:translate(-50%,-50%);width:420px;height:min(92vh,880px);border-radius:28px;box-shadow:0 40px 120px rgba(20,20,42,.25);outline:10px solid #0b0b14}
  body{background:var(--tint)}
}

/* camera: the mirror is the hook, visible from the first tap (v0.3.1), never hidden behind a sheet */
#cam{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);background:#111}
#overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;transform:scaleX(-1)}
#app[data-screen=preflight]:not(.mirror) #cam,#app[data-screen=preflight] #overlay{opacity:0}
#app[data-screen=prepare] #overlay{opacity:0}
#app[data-screen=capture] #cam{opacity:1;transition:opacity .6s var(--ease)}
#app[data-screen=context] #cam,#app[data-screen=done] #cam{opacity:0}

/* top chrome */
.top{position:absolute;top:0;left:0;right:0;z-index:9;padding:calc(12px + var(--safe-top)) 18px 26px;background:linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.86) 55%,rgba(255,255,255,0) 100%);display:flex;flex-direction:column;gap:12px;pointer-events:none}
.top-row{display:flex;justify-content:space-between;align-items:center}
.logo{height:20px;width:auto}
.remain{font-size:15px;font-weight:700;color:var(--ink);background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.progress{display:flex;gap:4px;height:4px}
.progress span{flex:1;background:rgba(20,20,26,.28);border-radius:2px;overflow:hidden;position:relative}
.progress span.done{background:var(--accent)}
.progress span.manual::after{animation:none !important;transform:scaleX(var(--p,0)) !important}
.progress span.now::after{content:"";position:absolute;inset:0;background:var(--accent);transform-origin:left;animation:fill var(--step-ms,4000ms) linear forwards}
.progress span.now.hold::after{animation-play-state:paused}
html[dir=rtl] .progress span.now::after{transform-origin:right}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
#app[data-screen=preflight] .progress,#app[data-screen=prepare] .progress,#app[data-screen=context] .progress,#app[data-screen=done] .progress{opacity:0}

/* fixation dot: a constant dark rim so it reads on a bright wall too (accessibility A-07) */
.dot{position:absolute;z-index:6;width:18px;height:18px;border-radius:50%;background:var(--dot);box-shadow:0 0 0 2px rgba(10,10,24,.55),0 0 0 7px rgba(34,197,94,.22),0 0 24px rgba(34,197,94,.75);transform:translate(-50%,-50%);transition:left .5s var(--ease),top .5s var(--ease);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 2px rgba(10,10,24,.55),0 0 0 7px rgba(34,197,94,.22),0 0 24px rgba(34,197,94,.75)}50%{box-shadow:0 0 0 2px rgba(10,10,24,.55),0 0 0 11px rgba(34,197,94,.12),0 0 30px rgba(34,197,94,.95)}}

/* flash (legacy) and the two overlays that paint the whole screen: the colour event and the brightness probe */
#flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:7;transition:opacity .15s}
#flash.on{opacity:.85;transition:none}
.colour-overlay{position:absolute;inset:0;z-index:12;background:transparent}

/* the success cue everyone sees (the beep's visible partner): a thin magenta ring that flashes once */
.success-ring{position:absolute;inset:8px;z-index:11;border:3px solid var(--accent);border-radius:22px;opacity:0;pointer-events:none}
.success-ring.on{animation:succ .46s var(--ease)}
@keyframes succ{0%{opacity:0;transform:scale(1.02)}25%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.995)}}
#app.a11y-hearing .success-ring{border-width:7px;inset:4px}
#app.a11y-hearing .success-ring.on{animation-duration:.8s}

/* the turn ring: fills with the achieved head angle; the cue for profile and the chin lift (never a dot) */
.turn-ring{position:absolute;z-index:6;left:50%;top:56%;width:min(58vw,250px);height:min(58vw,250px);transform:translate(-50%,-50%) rotate(-90deg);pointer-events:none}
html[dir=rtl] .turn-ring{transform:translate(-50%,-50%) rotate(-90deg) scaleY(-1)}
.turn-ring .tr-bg{fill:none;stroke:rgba(255,255,255,.55);stroke-width:5}
.turn-ring .tr-fg{fill:none;stroke:var(--accent);stroke-width:6;stroke-linecap:round;stroke-dasharray:276.5;stroke-dashoffset:276.5;transition:stroke-dashoffset .12s linear;filter:drop-shadow(0 0 6px rgba(209,64,156,.55))}
.turn-ring.full .tr-fg{stroke:#22C55E;filter:drop-shadow(0 0 10px rgba(34,197,94,.8))}

/* sheets */
.sheet{position:absolute;inset:0;z-index:8;background:var(--surface);overflow:auto;padding:calc(72px + var(--safe-top)) 24px calc(28px + var(--safe-bottom));scroll-padding-bottom:160px}
.sheet-inner{max-width:420px;margin:0 auto;display:flex;flex-direction:column;gap:18px;min-height:100%}
/* glass sheets sit over the live mirror (v0.3.1): the camera stays visible, the words float over it */
#app.mirror .sheet.glass-full{background:rgba(251,251,252,.86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
#app.mirror .sheet.glass-full .sheet-inner{justify-content:flex-end}
.sheet.glass-bottom{top:38%;border-radius:22px 22px 0 0;background:rgba(255,255,255,.94);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);padding-top:18px;box-shadow:0 -12px 40px rgba(20,20,42,.18)}
@media (min-width:600px){.sheet.glass-bottom{border-radius:22px 22px 28px 28px}}
.eyebrow{font-family:var(--sans);font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-deep)}
html[dir=rtl] .eyebrow{letter-spacing:.02em}
.eyebrow.muted{color:var(--ink-3)}
h1{font-family:var(--serif);font-weight:500;font-size:clamp(1.7rem,6vw,2.2rem);line-height:1.12;letter-spacing:-.01em}
html[dir=rtl] h1{font-family:'Heebo',var(--sans);font-weight:600;letter-spacing:0}
.lead{font-size:1.06rem;line-height:1.6;color:var(--ink-2)}
.data-line{font-size:.9rem;line-height:1.5;color:var(--ink-3);border-top:1px solid var(--line);padding-top:14px;margin-top:auto}
.lang-switch{align-self:center;font-size:1rem;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;padding:10px;min-height:44px;display:inline-flex;align-items:center}
/* 18.7px bold counts as large text, so the brand magenta passes contrast (decision 12, option A) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:700;font-size:18.7px;padding:16px 30px;border-radius:4px;cursor:pointer;border:1.5px solid transparent;transition:transform .2s var(--ease),background .2s,opacity .2s;min-height:50px}
.btn:active{transform:translateY(1px)}
.btn-accent{background:var(--accent);color:#fff;width:100%}
.btn-accent:disabled{opacity:.45;cursor:default}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-small{font-size:1rem;padding:10px 16px;min-height:44px;width:auto;white-space:nowrap}
.status{font-size:.9rem;color:var(--ink-3);text-align:center;min-height:1.2em}
.status.error{color:#B42318}

/* the one instruction card (v0.2.3: at the top, next to the camera, so she reads without moving her head) */
.card{position:absolute;left:16px;right:16px;top:calc(84px + var(--safe-top));z-index:6;background:var(--surface);border-radius:8px;padding:16px 18px 12px;box-shadow:0 18px 60px rgba(20,20,42,.28),0 1px 0 rgba(255,255,255,.6) inset;transition:top .6s var(--ease)}
/* near/far: the answer button is docked in the thumb zone at the bottom (accessibility A-30) */
.btn-near{position:absolute;z-index:7;left:16px;right:16px;bottom:calc(18px + var(--safe-bottom));width:auto;min-height:64px;font-size:1.25rem}
.btn-near.wait{opacity:.6}
#app.pulsing .dot{animation:none}

.card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.card-body{display:flex;gap:16px;align-items:center}
.guide{flex:0 0 132px;width:132px;height:132px;position:relative;display:flex;align-items:center;justify-content:center}
.guide canvas{width:132px;height:132px;display:block}
.guide-label{position:absolute;bottom:-16px;left:0;right:0;text-align:center;font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-deep)}
html[dir=rtl] .guide-label{letter-spacing:.02em}
.guide.hidden{display:none}
.instr h2{font-family:var(--sans);font-weight:700;font-size:1.45rem;line-height:1.2;letter-spacing:-.01em;transition:color .3s}
.instr h2.ok{color:var(--accent-deep)}
.instr p{margin-top:6px;font-size:1.12rem;line-height:1.45;color:var(--ink-2)}
.read{font-family:var(--serif);font-size:1.55rem;line-height:1.3;color:var(--accent-deep);background:var(--accent-wash);border-inline-start:3px solid var(--accent);padding:14px 16px;border-radius:4px;margin-top:4px}
html[dir=rtl] .read{font-family:'Heebo',var(--sans);font-weight:500;font-size:1.4rem}
.ring{flex:0 0 108px;width:108px;height:108px;margin:0}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:var(--line);stroke-width:6}
.ring-fg{fill:none;stroke:var(--accent);stroke-width:6;stroke-linecap:round;stroke-dasharray:276.5;stroke-dashoffset:0}
.card-foot{display:flex;justify-content:space-between;align-items:center;margin-top:10px;min-height:28px}
.hint{font-size:1rem;color:var(--ink-2);font-weight:500}
.hint.ok{color:var(--accent-deep);font-weight:700}
.link{background:none;border:0;font-size:1rem;color:var(--ink-3);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:8px 0;min-height:44px}
@media (max-width:359px){.card-body{flex-direction:column;align-items:flex-start}}

.hidden{display:none !important}

/* done / debug */
.debug{border-top:1px solid var(--line);padding-top:14px;font-size:.9rem}
.debug summary{cursor:pointer;font-weight:600;color:var(--ink-2)}
#summary{margin:12px 0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
#summary .kv{background:var(--tint);border-radius:4px;padding:10px 12px}
#summary .kv b{display:block;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}
#summary .kv span{font-family:var(--serif);font-size:1.25rem}
#summary .kv.wide{grid-column:1 / -1}
.debug-actions{display:flex;flex-wrap:wrap;gap:8px}
.debug-actions .btn{padding:10px 14px;font-size:.86rem}
.stills{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:12px}
.stills figure{margin:0}
.stills img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:4px;background:var(--tint)}
.stills figcaption{font-size:.68rem;color:var(--ink-3);margin-top:3px;text-align:center}

/* ---- v0.3 ---- */
.finale{position:absolute;inset:0;z-index:13;background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;opacity:0;transition:opacity .4s}
.finale.run{opacity:1}
.finale svg{width:120px;height:120px;transform:rotate(-90deg)}
.fin-bg{fill:none;stroke:var(--line);stroke-width:5}
.fin-fg{fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round;stroke-dasharray:326.7;stroke-dashoffset:326.7}
.finale.run .fin-fg{animation:finclose 2.6s var(--ease) forwards}
@keyframes finclose{to{stroke-dashoffset:0}}
.finale h2{font-size:1.5rem;font-weight:700}
.near-line.digits{direction:ltr;font-family:var(--sans);font-weight:700;letter-spacing:.35em;font-variant-numeric:tabular-nums;font-size:14px;padding:14px 12px}
.receipt-box{margin:18px 0;border:1px solid var(--line);border-radius:8px;padding:14px 16px}
.receipt-box h3{font-size:.95rem;margin-bottom:8px}
.rrow{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--line);font-size:.92rem}
.rrow:last-child{border-bottom:0}
.rrow.ok b{color:var(--accent-deep)}
.rrow.warn b{color:#B45309}
.redo{background:var(--accent-wash);border-inline-start:3px solid var(--accent);border-radius:6px;padding:14px 16px;margin:16px 0}
.redo strong{display:block;margin-bottom:6px}
.redo p{font-size:.95rem;color:var(--ink-2);line-height:1.5}
.redo-actions{display:flex;gap:12px;align-items:center;margin-top:12px}
.redo-actions .btn{padding:12px 18px}
/* voice-led (the default): the card is one line (label, title, guide, hint); the written paragraph belongs to the
   full-text mode chosen in prepare (her 19.10 09:45 rule). The read sentence, the rings and the near button stay. */
#app.voiceled:not(.staring) .card #stepText{display:none}
#app.voiceled .card{padding:12px 16px 8px}
#app.voiceled .guide,#app.voiceled .guide canvas{width:104px;height:104px;flex-basis:104px}
/* voice-led alignment: a slim one-line banner so the frame stays visible; full card only in full-text mode */
#app.voiceled.aligning .card{padding:10px 16px 8px}
#app.voiceled.aligning #stepText,#app.voiceled.aligning #checks,#app.voiceled.aligning .card-foot,#app.voiceled.aligning .guide{display:none}
#app.voiceled.aligning .instr h2{font-size:1.1rem}

/* ---- v0.3.1: the preparation screen over the mirror ---- */
#app:not([data-screen=prepare]) .light{display:none}
.light{position:absolute;top:calc(58px + var(--safe-top));z-index:10;left:16px;right:16px;z-index:9;display:flex;gap:12px;align-items:center;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.92);box-shadow:0 8px 24px rgba(20,20,42,.18)}
.light-dot{flex:0 0 12px;height:12px;border-radius:50%;background:var(--line-strong)}
.light[data-state=ok] .light-dot{background:#22C55E}
.light[data-state=dark] .light-dot,.light[data-state=bright] .light-dot,.light[data-state=shadow] .light-dot,.light[data-state=nocam] .light-dot{background:#B42318}
.light strong{display:block;font-weight:600;font-size:1rem;line-height:1.25}
.light p{font-size:.9rem;color:var(--ink-2);line-height:1.3}
.light p:empty{display:none}
.light[data-state=ok] strong{color:#15803D}
.light[data-state=dark] strong,.light[data-state=bright] strong,.light[data-state=nocam] strong{color:#B42318}
.chips{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.chips li{display:flex;align-items:center;gap:10px;min-height:48px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:.98rem;font-weight:500;line-height:1.25}
.chips .ico{flex:0 0 30px;height:30px;border-radius:50%;background:var(--accent-wash);display:flex;align-items:center;justify-content:center;color:var(--accent-deep)}
.chips .ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.toggles{display:flex;flex-direction:column;gap:2px}
.switch{display:flex;align-items:center;gap:12px;cursor:pointer;min-height:48px;padding:4px 0}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch .track{flex:0 0 44px;height:26px;border-radius:13px;background:var(--track-off);position:relative;transition:background .25s}
.switch .knob{position:absolute;top:3px;inset-inline-start:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(20,20,42,.3);transition:inset-inline-start .25s var(--ease)}
.switch input:checked + .track{background:var(--accent)}
.switch input:checked + .track .knob{inset-inline-start:21px}
.switch input:focus-visible + .track{outline:3px solid #14141A;outline-offset:2px}
.switch-text{font-size:1rem;color:var(--ink)}
.needs-label{margin-top:4px}
.need-note{font-size:.92rem;color:var(--ink-2);line-height:1.4;padding:0 0 8px 56px}
html[dir=rtl] .need-note{padding:0 56px 8px 0}
.beep,.bright{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px 14px;border-radius:10px;background:var(--tint)}
.beep strong,.bright strong{display:block;font-weight:600;font-size:1rem;line-height:1.3}
.beep p,.bright p{font-size:.9rem;color:var(--ink-2);line-height:1.4;margin-top:2px}
.bright[data-state=idle]{display:none}
.bright[data-state=ok] strong,.bright[data-state=room] strong{color:#15803D}
.bright[data-state=low] strong{color:#B42318}
.bright[data-state=ok] button,.bright[data-state=room] button,.bright[data-state=checking] button{display:none}
.preview{border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:#fff;display:flex;gap:14px;align-items:center}
.preview-stage{position:relative;width:112px;height:112px;flex:0 0 112px}
.preview-stage canvas{width:112px;height:112px;display:block}
.preview-text{flex:1;min-width:0}
.preview-top{display:flex;justify-content:space-between;gap:8px}
.pv-dot{position:absolute;left:50%;top:2px;transform:translateX(-50%);animation:pulse 1.6s ease-in-out infinite;width:14px;height:14px;border-radius:50%;background:var(--dot)}
.pv-title{font-weight:700;font-size:1.1rem;margin-top:4px;color:var(--accent-deep)}
.pv-text{font-size:.95rem;color:var(--ink-2);line-height:1.35;min-height:2.6em;margin-top:2px}
.pv-text.sentence{font-family:var(--serif);font-size:1rem;color:var(--accent-deep)}
html[dir=rtl] .pv-text.sentence{font-family:'Heebo',var(--sans)}
.pv-dots{display:flex;gap:5px;margin-top:8px}
.pv-dots i{width:6px;height:6px;border-radius:50%;background:var(--line-strong);transition:background .3s,transform .3s var(--ease)}
.pv-dots i.on{background:var(--accent);transform:scale(1.4)}
.sticky-cta{position:sticky;bottom:calc(-28px - var(--safe-bottom));margin:0 -24px;padding:14px 24px calc(28px + var(--safe-bottom));background:linear-gradient(180deg,rgba(255,255,255,0),#fff 28%);display:flex;flex-direction:column;gap:8px;align-items:center}
.sticky-cta .btn{width:100%}

/* the stare: the card shrinks to a caption at the very bottom */
#app.staring .card{top:auto;bottom:calc(20px + var(--safe-bottom));padding:12px 16px 8px}
#app.staring .card-top,#app.staring .guide,#app.staring .instr h2,#app.staring #hint{display:none}
#app.staring .instr p{margin:0;font-size:1.08rem;line-height:1.4;color:var(--ink);font-weight:500;text-align:center}
#app.staring .card-body{display:block}
#app.staring .card-foot{justify-content:flex-end;margin-top:6px;min-height:0}

/* the dot ring (countdown fallback when audio is unavailable) */
.dot-ring{position:absolute;z-index:5;width:60px;height:60px;transform:translate(-50%,-50%) rotate(-90deg);pointer-events:none;transition:left .5s var(--ease),top .5s var(--ease)}
.dot-ring .ring-bg{stroke:rgba(255,255,255,.55);stroke-width:3}
.dot-ring .ring-fg{stroke:var(--dot);stroke-width:3}

/* near and far: the small test line (its size is the measurement, never enlarged) */
.near-line{position:absolute;z-index:6;left:16px;right:16px;top:58%;text-align:center;background:#fff;color:var(--ink);padding:9px 12px;border-radius:6px;font:500 11px/1.3 var(--sans);box-shadow:0 8px 24px rgba(20,20,42,.18)}
html[dir=rtl] .near-line{font-family:'Heebo',var(--sans)}

/* live checks */
.checks{list-style:none;display:flex;flex-direction:column;gap:9px;margin:4px 0 2px}
.checks li{display:flex;align-items:center;gap:11px;font-size:1.02rem;color:var(--ink-3);transition:color .25s}
.checks .tick{flex:0 0 22px;height:22px;border-radius:50%;border:1.5px solid var(--ink-3);display:flex;align-items:center;justify-content:center;transition:background .25s var(--ease),border-color .25s,transform .35s var(--ease)}
.checks .tick svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .2s}
.checks li.ok{color:var(--ink)}
.checks li.ok .tick{background:var(--accent);border-color:var(--accent);transform:scale(1.08)}
.checks li.ok .tick svg{opacity:1}
.checks li.warn{color:var(--ink)}
.checks li.warn .tick{border-style:dashed;border-color:var(--accent)}
.checks .ck-warn{margin-inline-start:auto;font-size:.86rem;font-weight:600;color:var(--accent-deep)}
#app.aligning .instr p{display:none}
#app.aligning .guide{display:none}

/* the context screen ("while we analyze"), the mock of the first post-mapping screen */
.ctx{display:flex;flex-direction:column;gap:18px}
.ctx .q{font-weight:600;font-size:1.05rem;line-height:1.35;margin-bottom:8px}
.ctx .ans{display:flex;flex-wrap:wrap;gap:8px}
.ctx .ans button{border:1.5px solid var(--line-strong);background:#fff;border-radius:999px;padding:10px 16px;min-height:44px;font-size:1rem;cursor:pointer}
.ctx .ans button.on{border-color:var(--accent);background:var(--accent-wash);color:var(--accent-deep);font-weight:600}

/* adapted takes */
#app.a11y-vision .instr h2{font-size:1.8rem}
#app.a11y-vision .instr p{font-size:1.3rem}
#app.a11y-vision .hint{font-size:1.2rem}
#app.a11y-vision .dot{width:24px;height:24px}
#app.a11y-vision .read{font-size:1.9rem}
#app.a11y-vision .remain{font-size:18px}
#app.a11y-hearing .hint.ok{font-size:1.25rem}

/* done */
.upload{display:flex;flex-direction:column;gap:10px}
.up-line{font-size:1.02rem;color:var(--ink-2);line-height:1.4}
.up-line.err{color:var(--accent-deep);font-weight:600}
.bar{height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.bar span{display:block;height:100%;width:0;background:var(--accent);transition:width .3s var(--ease)}
html[dir=rtl] .bar span{margin-inline-start:auto}
.code{display:flex;flex-direction:column;gap:6px;align-items:center;border:1px solid var(--line);border-radius:8px;padding:16px 12px}
.code b{font-family:var(--sans);font-size:2.6rem;font-weight:700;letter-spacing:.18em;color:var(--ink);direction:ltr;unicode-bidi:isolate;padding-inline-start:.18em}
.results h3,.signal h3{font-family:var(--sans);font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-deep);margin-bottom:8px}
html[dir=rtl] .results h3,html[dir=rtl] .signal h3{letter-spacing:.02em}
.res-wait{font-size:.97rem;color:var(--ink-2)}
.res-wait::after{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-inline-start:8px;animation:pulse2 1.4s ease-in-out infinite}
.res-wait.static::after{display:none}
@keyframes pulse2{0%,100%{opacity:.25}50%{opacity:1}}
.res-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:.97rem}
.res-row b{font-weight:600;direction:ltr;unicode-bidi:isolate}
.res-row span{color:var(--ink);text-align:end;direction:ltr;unicode-bidi:isolate;word-break:break-word}

/* reduced motion: decoration stops, time information and the pulse-block statics stay as they are */
@media (prefers-reduced-motion: reduce){
  .card{transition:none}
  .dot,.pv-dot{animation:none}
  .res-wait::after{animation:none;opacity:1}
  .checks .tick{transition:none}
  .success-ring.on{animation-duration:.2s}
  .finale.run .fin-fg{animation-duration:.3s}
}

/* ---------- 0.4: the one intro screen, the demo image, the task line ---------- */
.intro-ask { font-size: .95rem; opacity: .85; margin-top: -.35rem; }
.intro-needs { margin: .9rem 0 .6rem; }
.consent { display: flex; flex-direction: column; gap: .55rem; margin: .4rem 0 1rem; font-size: .88rem; line-height: 1.45; }
.consent .tick { display: flex; gap: .6rem; align-items: flex-start; cursor: pointer; }
.consent .tick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.consent .tick .box { flex: 0 0 auto; width: 22px; height: 22px; margin-top: .1rem; border: 2px solid #D1409C; border-radius: 6px; background: #fff; position: relative; }
.consent .tick input:checked + .box { background: #D1409C; }
.consent .tick input:checked + .box::after { content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.consent .tick input:focus-visible + .box { outline: 3px solid rgba(209,64,156,.45); outline-offset: 2px; }
.consent a { color: #D1409C; text-decoration: underline; }
.guide-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.guide { position: relative; }
.guide.has-img canvas { visibility: hidden; }
.task-line { margin: .3rem 0 0; font-weight: 600; color: #D1409C; font-size: 1.05rem; text-align: center; }
.task-line.listen { color: #6E6E78; font-weight: 500; }

/* ---------- 0.5: one continuous progress line, the top panel with the demo bubble, three intro screens ---------- */
.progress-line{display:block;height:4px;background:rgba(20,20,26,.16);border-radius:2px;overflow:hidden}
.progress-line span{display:block;height:100%;width:0;background:var(--accent);border-radius:2px;transition:width .5s linear}
.panel{position:absolute;left:12px;right:12px;top:calc(62px + var(--safe-top));z-index:6;background:rgba(255,255,255,.93);border-radius:14px;padding:10px 12px;box-shadow:0 10px 30px rgba(20,20,42,.16);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.panel.hidden{display:none}
.panel-row{display:flex;gap:12px;align-items:center}
.bubble{flex:0 0 92px;width:92px;height:92px;position:relative;border-radius:50%;overflow:hidden;background:#fff;box-shadow:0 0 0 2px rgba(209,64,156,.35) inset}
.bubble canvas{width:92px;height:92px;display:block}
.bubble.hidden{display:none}
.bubble .guide-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.bubble.has-img canvas{visibility:hidden}
.fill-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);pointer-events:none}
.fill-ring.hidden{display:none}
.fill-ring .fr-bg{fill:none;stroke:rgba(209,64,156,.18);stroke-width:8}
.fill-ring .fr-fg{fill:none;stroke:var(--accent);stroke-width:8;stroke-linecap:round;stroke-dasharray:289;stroke-dashoffset:289;transition:stroke-dashoffset .12s linear}
.fill-ring.full .fr-fg{stroke:#1E6B34}
.bubble .ring{position:absolute;inset:0;width:100%;height:100%;margin:0}
.bubble .ring svg{width:100%;height:100%}
.panel .instr{flex:1;min-width:0}
.panel .instr h2{font-family:var(--sans);font-size:1.16rem;line-height:1.25;font-weight:700;letter-spacing:0}
.panel .instr p{margin-top:4px;font-size:.98rem;line-height:1.35;color:var(--ink-2)}
.panel .instr p:empty{display:none}
.panel .task-line{margin-top:6px;text-align:start;font-size:1rem}
.panel .hint{display:block;font-size:.9rem;color:var(--accent-deep)}
.panel .hint:empty{display:none}
.panel .read{margin-top:10px;font-size:1.3rem;line-height:1.3}
.panel .checks{margin-top:8px}
#app.staring .panel{padding:8px 12px}
#app.staring .bubble{display:none}
#app.staring .instr h2{font-size:1.02rem}
#app.voiceled .panel{padding:10px 12px}
#app.a11y-vision .panel .instr h2{font-size:1.4rem}
.intro-step .chips-big{display:flex;flex-direction:column;gap:8px;margin:.6rem 0 .9rem}
.intro-step .chips-big li{font-size:1.02rem;padding:10px 12px;display:flex;gap:10px;align-items:center}
.consent .tick.all{font-weight:700;border-top:1px solid rgba(0,0,0,.08);padding-top:.6rem;margin-top:.2rem}
.intro-step.hidden{display:none}

/* ---------- 0.6: one state language (explain / listen / act / hold / done), per the instruction-UX audit ---------- */
.part-label{font-size:12.5px;font-weight:600;color:var(--ink-2);background:rgba(255,255,255,.9);border-radius:999px;padding:4px 10px;white-space:nowrap}
.rule3{list-style:none;display:flex;flex-direction:column;gap:8px;margin:.5rem 0 .9rem}
.rule3 li{display:flex;align-items:center;gap:10px;font-size:1rem;color:var(--ink-2);padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:#fff}
.rule3 li b{font-size:1.02rem;color:var(--ink);min-width:5.2em}
.rule3 .chip-dot{width:12px;height:12px;border-radius:50%;flex:0 0 12px;background:#6A6AA8}
.rule3 .r-act .chip-dot{background:var(--accent-deep)}
.rule3 .r-done .chip-dot{background:#1E6B34}
.effect{font-size:.92rem;line-height:1.45;color:var(--ink-2);margin:.1rem 0 .5rem;padding-inline-start:2px}
.effect:empty{display:none}
.toggles .effect{flex-basis:100%}
.scene{display:block;width:100%;max-width:260px;margin:.2rem auto .4rem;fill:none;stroke:var(--accent-deep);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.scene .s-floor{fill:var(--line);stroke:none}.scene .s-phone{fill:#fff}.scene .s-frame{stroke-dasharray:5 5;stroke:var(--ink-3);stroke-width:1.6}.scene .s-head{fill:#fff}
.scene2{max-width:340px}
.scene2 .s-photo{mix-blend-mode:multiply}
.scene2 .s-table{stroke:var(--ink);stroke-width:2.4}
.scene2 .s-ray{stroke:var(--accent);stroke-width:1.4;stroke-dasharray:3 4}
.scene2 .s-sight{stroke:var(--ink-3);stroke-width:1.6;stroke-dasharray:4 4}.scene2 .s-sight-head{stroke:var(--ink-3);stroke-width:1.6}
.scene2 .s-body,.scene2 .s-hair,.scene2 .s-face{stroke:var(--accent);stroke-width:1.7}
.scene2 .s-body{fill:var(--tint)}.scene2 .s-hair{fill:var(--line)}.scene2 .s-face{fill:url(#faceGlow)}
.scene2 .s-brow,.scene2 .s-nose,.scene2 .s-mouth{stroke:var(--accent);stroke-width:1.5}
.scene2 .s-eye{fill:var(--ink);stroke:none}
.scene2 .s-phone{fill:var(--ink);stroke:var(--ink)}.scene2 .s-cam{fill:#fff;stroke:none}
.scene2 .s-stand,.scene2 .s-lamp-pole{stroke:var(--ink);stroke-width:2.2}
.scene2 .s-lamp{fill:#fff;stroke:var(--ink);stroke-width:2}
.scene2 .s-beam{fill:var(--accent-soft);stroke:none;opacity:.85}
.scene2 .s-ray{stroke:var(--accent);stroke-width:1.5;stroke-dasharray:2 4}
.scene2 .s-sight{stroke:var(--ink-3);stroke-width:1.3;stroke-dasharray:3 4}.scene2 .s-sight-head{stroke:var(--ink-3);stroke-width:1.3}
.soundcheck{margin:.4rem 0 .8rem;display:flex;flex-direction:column;gap:.4rem;align-items:flex-start}
.soundcheck .btn{width:auto;min-height:48px;padding:0 18px}
.sound-ask{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:1rem}
.sound-ask .link{color:var(--accent-deep);font-weight:700;text-decoration:none;border:1.5px solid var(--accent-deep);border-radius:999px;padding:0 16px;min-height:44px}
.sound-ask .btn{width:auto;min-height:48px;padding:0 22px}
.sound-level{display:flex;align-items:flex-end;gap:3px;height:26px}
.sound-level i{display:block;width:6px;border-radius:2px;background:var(--line,#e6dfe3)}
.sound-level i.lit{background:var(--accent-deep)}

/* the panel: chip + one headline + one line, always in the same place */
.panel{min-height:112px}
.mode-chip{display:inline-flex;align-items:center;gap:6px;font-size:.88rem;font-weight:700;line-height:1;padding:6px 11px 6px 9px;border-radius:999px;color:#fff;background:#55558F;margin-bottom:6px}
html[dir=rtl] .mode-chip{padding:6px 9px 6px 11px}
.mode-chip .mc-icon{display:inline-flex;width:16px;height:16px}
.mode-chip .mc-icon svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mode-chip .mc-extra{font-weight:500;opacity:.92}
.mode-chip .mc-extra:empty{display:none}
.mode-chip.m-explain{background:#4B4B86}
.mode-chip.m-practice{background:#fff;color:#4B4B86;box-shadow:inset 0 0 0 1.5px #4B4B86}
.mode-chip.m-listen{background:#2F5E9E}
.mode-chip.m-act{background:var(--accent-deep)}
.mode-chip.m-hold{background:#8A2766}
.mode-chip.m-done{background:#1E6B34}
.mode-chip.m-fix{background:#8A5A00}
.panel .instr h2{font-size:1.28rem;line-height:1.25}
#app[data-mode=act] .panel .instr h2,#app[data-mode=hold] .panel .instr h2,#app[data-mode=listen] .panel .instr h2{font-size:1.5rem;color:var(--ink)}
#app[data-mode=done] .panel .instr h2{color:#1E6B34}
#app[data-mode=explain] .panel .instr h2{color:var(--ink-2)}
.panel .instr p{font-size:1.04rem;color:var(--ink-2)}
#app.a11y-vision .panel .instr h2{font-size:1.75rem}
#app.a11y-vision .panel .instr p{font-size:1.25rem}
#app.bigtext .sheet .lead,#app.bigtext .sheet .chips-big li,#app.bigtext .consent{font-size:1.2rem}
.bubble .mode-icon{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:#fff;border-radius:50%}
.bubble.has-icon .mode-icon{display:flex}
.bubble.has-icon .guide-img,.bubble.has-icon canvas{visibility:hidden}
.bubble .mode-icon svg{width:62%;height:62%;fill:none;stroke:var(--accent-deep);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.bubble .mode-icon.i-listen svg{stroke:#2F5E9E}.bubble .mode-icon.i-done svg{stroke:#1E6B34}
.bubble .mode-icon svg .fillme{fill:var(--accent-soft)}
.bubble .mode-icon .demo-phone{animation:nearIn 1.9s ease-in-out infinite}
.bubble .mode-icon.i-near_out .demo-phone{animation-name:nearOut}
@keyframes nearIn{0%{transform:translateX(0)}60%,100%{transform:translateX(16px)}}
@keyframes nearOut{0%,40%{transform:translateX(16px)}100%{transform:translateX(0)}}
.ring .ring-fg,.fill-ring .fr-fg{stroke-dashoffset:276.5}
.fill-ring .fr-fg{stroke-dashoffset:289}
.mic-meter{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:.88rem;color:var(--ink-2)}
.mic-meter .mm-bars{display:inline-flex;align-items:flex-end;gap:3px;height:16px}
.mic-meter .mm-bars i{display:block;width:4px;height:4px;border-radius:2px;background:var(--line-strong);transition:height .08s linear,background .08s}
.mic-meter.on .mm-bars i.lit{background:var(--accent-deep)}
.face-note{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:.84rem;color:var(--ink-3)}
.face-note .fn-dot{width:8px;height:8px;border-radius:50%;background:#1E6B34}
.face-note.lost{color:#8A5A00;font-weight:700}.face-note.lost .fn-dot{background:#C77700}
.panel-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;padding-top:4px;border-top:1px solid rgba(0,0,0,.07)}
.panel-actions .pa{background:none;border:0;color:var(--ink-2);font-size:.92rem;text-decoration:underline;text-underline-offset:3px;min-height:44px;padding:0 10px;cursor:pointer}
.panel-actions .pa.hidden{display:none}
.panel .read{transition:opacity .2s}
.panel .read.pending{opacity:.5}
.panel .read .first{font-weight:700;background:var(--accent-soft);border-radius:4px;padding:0 3px}
#app.reading .bubble{display:none}
#app.tracking .panel{top:auto;bottom:calc(16px + var(--safe-bottom));padding:8px 12px}
#app.tracking .bubble{display:none}
#app.tracking .panel .instr h2{font-size:1.18rem}
#app.tracking .mode-chip{margin-bottom:3px}
.btn-near{min-height:64px}
.btn-near:disabled{opacity:.55}
.skip-light{position:absolute;z-index:14;left:50%;transform:translateX(-50%);bottom:calc(20px + var(--safe-bottom));width:auto;min-height:56px;padding:0 26px;background:#fff;color:var(--ink);border:2px solid var(--ink)}
.turn-arrow{position:absolute;z-index:6;left:50%;top:56%;width:min(34vw,140px);height:min(34vw,140px);transform:translate(-50%,-50%);pointer-events:none;opacity:.9}
.turn-arrow svg{width:100%;height:100%;fill:none;stroke:#fff;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px rgba(20,20,42,.7))}
.turn-arrow.done svg{stroke:#7CE3A1}
#app.a11y-hearing .mode-chip{font-size:1rem}
@media (prefers-reduced-motion:reduce){.bubble .mode-icon .demo-phone{animation:none}}
.dot-ring .ring-fg{stroke-dasharray:163.4;stroke-dashoffset:163.4}

/* ---------- 0.6.2: digit-span response slots, continue button ---------- */
.after-btn{display:flex;align-items:center;justify-content:center;text-decoration:none;margin:1rem 0}
.after-btn.hidden{display:none}

/* 0.6.2: the word list, one word at a time, centred under the lens */
.panel .read.words,.read.words{font-size:56px;line-height:1.2;text-align:center;background:none;border:0;padding:8px 0;min-height:72px;margin-top:4px;font-weight:600;color:var(--accent)}
html[dir=rtl] .read.words{font-size:56px}

/* 21.10 evening (her note): a real photo of the set-up instead of the drawing, and a compact screen so the switches and
   the sound check are visible above the button without scrolling */
.scene-photo{display:block;width:100%;max-height:128px;object-fit:cover;object-position:50% 12%;border-radius:12px;margin:.3rem 0 .5rem}
#intro2 h1{margin-bottom:.2rem}
#intro2 .chips-big{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:.4rem 0 .4rem}
#intro2 .chips-big li:nth-child(2){grid-column:1 / -1;order:-1}
#intro2 .chips-big li{font-size:.93rem;padding:5px 10px;min-height:38px;line-height:1.22}
#intro2 .chips .ico{flex-basis:26px;height:26px}#intro2 .chips .ico svg{width:16px;height:16px}
#intro2 .switch{min-height:40px;padding:2px 0}
#intro2 .soundcheck{margin:.2rem 0 .4rem}

/* 22.10: birth month + year, first element of the consent screen */
.age-field{margin:.4rem 0 .8rem}
.age-label{display:block;font-weight:700;font-size:1.02rem}
.age-help{margin:.15rem 0 .5rem;font-size:.86rem;color:var(--ink-2)}
.age-selects{display:flex;gap:.6rem}
.age-selects select{flex:1;min-height:46px;font-size:1rem;padding:.4rem .6rem;border:2px solid #D1409C;border-radius:8px;background:#fff;color:#000}
.age-selects select:focus-visible{outline:3px solid rgba(209,64,156,.45);outline-offset:2px}
.c-detail{margin:-.25rem 0 .2rem 0;padding-inline-start:calc(22px + .6rem);font-size:.84rem;line-height:1.5;color:var(--ink-2)}
.c-detail summary{cursor:pointer;color:#D1409C;text-decoration:underline;width:max-content;min-height:24px}
.c-detail summary:focus-visible{outline:3px solid rgba(209,64,156,.45);outline-offset:2px}
.c-detail p{margin:.35rem 0 .2rem}


/* ======================================================================================================
   0.7 (22.10.2026): design + tightening pass A. Tokens above; Heebo only; pill buttons; the card below the face.
   ====================================================================================================== */
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;box-shadow:0 0 0 2px #fff}
body{font-family:var(--font)}

/* top bar: Peritale logo, the time pill (outside the take), the language pill (instead of the grey band at the bottom) */
.logo{height:28px;width:auto}
.top{gap:10px}
.top-row{gap:10px}
.remain{font-size:14px;font-weight:600;background:#fff;border:1px solid var(--line);color:var(--ink-2)}
#app[data-screen=capture] .remain,#app[data-screen=done] .remain{display:none}
.lang-pill{pointer-events:auto;min-height:44px;min-width:44px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid var(--edge);border-radius:var(--r-pill);background:#fff;font:600 14px/1 var(--font);color:var(--ink);text-decoration:none;white-space:nowrap}
#app[data-screen=capture] .lang-pill,#app[data-screen=done] .lang-pill{display:none}
.progress-line{height:6px;background:var(--track);border-radius:3px}
.progress-line span{background:var(--pk)}
#app:not([data-screen=capture]) #progress{opacity:0}
#app.mirror .sheet.glass-full{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}

/* type */
.eyebrow{font-size:.875rem;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--pk-ink)}
h1,html[dir=rtl] h1{font-family:var(--font);font-weight:700;font-size:clamp(1.55rem,7vw,1.75rem);line-height:1.2;letter-spacing:0;text-wrap:balance}
.lead{font-size:1.125rem;line-height:1.5;color:var(--ink-2);text-wrap:balance}
.instr p,.panel .instr p{text-wrap:balance}
.status{font-size:.875rem}
.link{min-height:var(--hit);font-size:1rem;color:var(--ink-2)}

/* buttons: pill, 56 px, one decision */
.btn{border-radius:var(--r-pill);min-height:var(--btn-h);font-size:17px;font-weight:700;padding:0 24px;gap:8px}
.btn-accent{background:var(--pk-ink);color:#fff}
.btn-accent:hover,.btn-accent:active{background:var(--pk-deep)}
.btn-accent:disabled,.btn[disabled]{background:#EBD3E1;color:#6A4A5B;opacity:1;cursor:default}
.btn-outline{background:#fff;color:var(--pk-ink);border-color:var(--pk-ink)}
.btn[aria-busy=true]{pointer-events:none}
.btn[aria-busy=true]::before{content:"";flex:none;width:20px;height:20px;border-radius:50%;border:3px solid currentColor;border-inline-end-color:transparent;animation:spin .8s linear infinite}
.btn-accent[aria-busy=true]{background:var(--pk-ink);color:#fff;opacity:1}
@keyframes spin{to{transform:rotate(360deg)}}
.btn-near{min-height:64px}

/* intro 1: lead, label above the three state cards, the adaptation row */
.cards-label{font-size:1rem;font-weight:600;color:var(--ink);margin-top:.1rem}
.rule3{margin:.2rem 0 .4rem}
.rule3 .chip-dot{background:var(--explain)}
.rule3 .r-act .chip-dot{background:var(--pk-ink)}
.rule3 .r-done .chip-dot{background:var(--ok)}
.needs-row{border-top:1px solid var(--line);margin-top:.2rem}
.needs-row summary{cursor:pointer;min-height:var(--hit);display:flex;align-items:center;font-weight:600;color:var(--pk-ink);text-decoration:underline;text-underline-offset:4px;list-style:none}
.needs-row summary::-webkit-details-marker{display:none}
.needs-row[open] summary{text-decoration:none}
.intro-ask{margin-top:0;font-size:1rem;opacity:1;color:var(--ink-2)}
.switch{min-height:var(--hit);padding:6px 0}
#intro2 .switch{min-height:var(--hit);padding:4px 0}
.switch .track{flex:0 0 46px;height:28px;border-radius:14px;background:var(--track-off)}
.switch .knob{top:3px;width:22px;height:22px}
.switch input:checked + .track{background:var(--pk-ink)}
.switch input:checked + .track .knob{inset-inline-start:21px}
.effect{font-size:.875rem}

/* consent: birth month and year, master tick first, the ticks, one links row, one line under the button */
.age-help{font-size:.875rem}
.age-selects select{min-height:52px;font-size:1.0625rem;border:1.5px solid var(--edge);border-radius:12px}
.consent{font-size:.9375rem;line-height:1.5;gap:.1rem;margin:.2rem 0 .6rem}
.consent .tick{min-height:var(--hit);padding-block:8px}
.consent .tick .box{width:24px;height:24px;border:2px solid var(--edge);border-radius:6px}
.consent .tick input:checked + .box{background:var(--pk-ink);border-color:var(--pk-ink)}
.consent .tick input:checked + .box::after{left:7px;top:2px}
.consent .tick.all{font-weight:700;border-top:0;border-bottom:1px solid var(--line);padding-top:8px;padding-bottom:10px;margin:0 0 .3rem}
.consent a{color:var(--pk-ink)}
.c-detail{font-size:.875rem;margin:-.35rem 0 .3rem}
.c-detail summary{min-height:var(--hit-min);display:flex;align-items:center;color:var(--pk-ink)}
.links-row{display:flex;align-items:center;gap:10px;min-height:var(--hit);font-weight:600}
.links-row a{display:inline-flex;align-items:center;min-height:var(--hit);padding:0 2px}
.cta-note{font-size:.875rem;color:var(--ink-3);text-align:center}

/* D-01: the instruction card lives BELOW the face zone (20% to 62% of the viewport). Near steps keep it at the top (the answer button is at the bottom). */
.panel{left:12px;right:12px;top:auto;bottom:calc(16px + var(--safe-bottom));max-height:34vh;max-height:34dvh;overflow:auto;border-radius:var(--r-lg);background:rgba(255,255,255,.96);transition:opacity .15s ease}
#app.near .panel{top:calc(86px + var(--safe-top));bottom:auto}
#app.colouring .panel{bottom:calc(92px + var(--safe-bottom))}
#app.stepwait .panel{opacity:0;pointer-events:none}
@media (max-height:700px){
  .bubble{flex-basis:64px;width:64px;height:64px}
  .bubble canvas{width:64px;height:64px}
  .panel{max-height:38vh;max-height:38dvh;min-height:0}
}
.bubble{box-shadow:inset 0 0 0 1px var(--line)}
.face-note{position:absolute;z-index:8;top:calc(84px + var(--safe-top));left:50%;transform:translateX(-50%);margin:0;padding:6px 12px;border-radius:var(--r-pill);background:rgba(255,255,255,.94);box-shadow:0 2px 10px rgba(20,20,42,.14);font-size:.875rem;white-space:nowrap}
.face-note.lost{color:var(--warn)}
.mode-chip{min-height:32px;padding:0 12px;font-size:.875rem}
html[dir=rtl] .mode-chip{padding:0 12px}
.mode-chip.m-explain{background:var(--explain)}
.mode-chip.m-practice{color:var(--explain);box-shadow:inset 0 0 0 1.5px var(--explain)}
.mode-chip.m-listen{background:var(--info)}
.mode-chip.m-act{background:var(--pk-ink)}
.mode-chip.m-done{background:var(--ok)}
.mode-chip.m-fix{background:var(--warn)}
#app[data-mode=done] .panel .instr h2{color:var(--ok)}
.panel-actions{justify-content:space-between}
.panel-actions .pa{min-height:var(--hit);color:var(--ink-2);font-size:1rem}
.mic-meter,.panel .hint{font-size:.875rem}
.checks .ck-warn{font-size:.875rem}
#app.reading .panel .instr h2{font-size:1.1rem}
.panel .read.words,.read.words{color:var(--pk-ink)}
.read,html[dir=rtl] .read{font-family:var(--font)}
.turn-ring,.turn-arrow{top:46%}
.turn-ring .tr-bg{stroke-width:6}
.turn-ring .tr-fg{opacity:.9}

/* the finish: ring closes green with a check, then one line and one button (the staff details live in details[data-staff-only]) */
.finale svg{transform:none}
.finale .fin-bg,.finale .fin-fg{transform:rotate(-90deg);transform-origin:60px 60px}
.fin-fg{stroke:var(--pk)}
@keyframes finclose{to{stroke-dashoffset:0;stroke:var(--ok)}}
.finale h2{font-size:1.75rem;line-height:1.2}
.fin-check{fill:none;stroke:var(--ok);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:70;stroke-dashoffset:70}
.finale.run .fin-check{animation:fincheck .4s ease 2.2s forwards}
@keyframes fincheck{to{stroke-dashoffset:0}}
.finale-btn{width:min(80%,320px)}
.finale-btn,.finish-cta{visibility:hidden;opacity:0;animation:showbtn .3s ease 1.2s both}
@keyframes showbtn{from{visibility:hidden;opacity:0}to{visibility:visible;opacity:1}}
.done-inner{align-items:center;text-align:center;justify-content:center;gap:16px}
.done-ring{width:120px;height:120px;display:block}
.done-ring .fin-bg{stroke:var(--track);stroke-width:5;fill:none}
.done-ring .done-fg{fill:none;stroke:var(--ok);stroke-width:5}
.done-ring .fin-check{stroke-dashoffset:0}
.finish-cta{width:100%;display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:8px}
.after-btn{margin:0}
.after-btn[aria-busy=true]{pointer-events:none}
.up-line{font-size:.875rem;color:var(--ink-3);min-height:1.2em}
.note-line{font-size:.875rem;color:var(--warn);background:var(--warn-tint);border-radius:var(--r-sm);padding:8px 12px}
.debug{text-align:start;width:100%}
.redo{text-align:start}
@media (prefers-reduced-motion:reduce){
  .finale-btn,.finish-cta{animation-duration:.01s;animation-delay:0s}
  .btn[aria-busy=true]::before{animation:none}
  .finale.run .fin-check{animation-duration:.01s;animation-delay:0s}
  .panel{transition:none}
}

/* 0.7 fixes after the first screenshots */
.remain{align-self:flex-start}
h1:focus,h1:focus-visible{outline:none;box-shadow:none}
.sticky-cta{margin-top:auto}
.c-detail{margin:-.7rem 0 0}
.consent .tick{padding-bottom:4px}

/* 22.10 no-wait handoff: part B opens full-screen in a same-origin iframe while this document finishes the upload underneath */
.nowait-veil{position:fixed;inset:0;z-index:50;background:var(--bg);opacity:0;transition:opacity .25s ease;pointer-events:none}
.nowait-veil.on{opacity:1}
.partb-frame{position:fixed;inset:0;width:100%;height:100%;border:0;z-index:60;background:#fff;opacity:0;transition:opacity .3s ease}
.partb-frame.on{opacity:1}
.partb-open,.partb-open body{overflow:hidden}
#app.hidden-by-frame{display:none}
@media (prefers-reduced-motion:reduce){.nowait-veil,.partb-frame{transition:none}}

/* 22.10 (Revital 14:55): the instruction is a compact caption at the TOP, like an interpreter's line: max about two lines at 18 px+, above the face
   (aperture top 76 px, hairline ~250 px, eyes ~325 px at 390x844), never over the eyes or forehead. The gaze-dot steps (tracking) keep the caption at the
   bottom because the dot itself travels to the top of the screen; the near steps keep the answer button at the bottom. */
.panel,#app.near .panel,#app.colouring .panel{top:calc(54px + var(--safe-top));bottom:auto;min-height:0;max-height:26vh;max-height:26dvh;padding:8px 12px;border-radius:var(--r-lg);box-shadow:0 6px 22px rgba(20,20,42,.16)}
#app.tracking .panel{top:auto;bottom:calc(16px + var(--safe-bottom))}
.panel-row{gap:10px}
.bubble{flex:0 0 52px;width:52px;height:52px}
.bubble canvas{width:52px;height:52px}
@media (max-height:700px){.bubble{flex-basis:44px;width:44px;height:44px}.bubble canvas{width:44px;height:44px}.panel,#app.near .panel,#app.colouring .panel{max-height:30vh;max-height:30dvh}}
.panel .mode-chip{display:none}
#app[data-mode=act] .panel,#app[data-mode=hold] .panel{box-shadow:0 6px 22px rgba(20,20,42,.16),inset 4px 0 0 var(--pk-ink)}
html[dir=rtl] #app[data-mode=act] .panel,html[dir=rtl] #app[data-mode=hold] .panel{box-shadow:0 6px 22px rgba(20,20,42,.16),inset -4px 0 0 var(--pk-ink)}
#app[data-mode=done] .panel{box-shadow:0 6px 22px rgba(20,20,42,.16),inset 4px 0 0 var(--ok)}
html[dir=rtl] #app[data-mode=done] .panel{box-shadow:0 6px 22px rgba(20,20,42,.16),inset -4px 0 0 var(--ok)}
.panel .instr h2,#app[data-mode=act] .panel .instr h2,#app[data-mode=hold] .panel .instr h2,#app[data-mode=listen] .panel .instr h2,#app.reading .panel .instr h2,#app.tracking .panel .instr h2{font-size:1.125rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.panel .instr p{font-size:1.125rem;line-height:1.3;margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.panel .instr p#stepText:empty,.panel .instr p:empty{display:none}
.panel .hint{font-size:1rem;line-height:1.25}
.panel .read{margin-top:4px;font-size:1.125rem;line-height:1.3}
.panel .read.words,.read.words{font-size:40px;line-height:1.15;min-height:0;padding:2px 0;margin-top:2px}
.panel .checks{margin-top:4px}
.panel-actions{margin-top:2px;padding-top:0}
.panel-actions .pa{min-height:44px}

.panel .instr h2.t-dup{display:none}
.face-note{top:68vh;top:68dvh}
#app .panel .instr h2.t-dup{display:none!important}

/* 22.10 22:30 spacing pass (her note: the screens look cramped) */
.intro-step h1{margin-bottom:.35rem}
.intro-step .lead{margin-bottom:.5rem}
.intro-step .cards-label{margin-top:.5rem}
.intro-step .chips-big{gap:10px;margin:.8rem 0 1.1rem}
.rule3{gap:10px;margin:.5rem 0 .9rem}
.toggles{gap:8px}
.consent{gap:.55rem;margin:.5rem 0 .9rem}
.c-detail{margin:-.2rem 0 .35rem}
.age-field{margin:.6rem 0 1rem}
.soundcheck{margin:.9rem 0 1rem;gap:.7rem}
#introHear .soundcheck .btn{min-height:52px;padding:0 26px;font-size:1.05rem}

/* 22.10 22:35: hearing-check button in the start button's slot; filled cards everywhere on the intro (no outline borders) */
.sound-ask{flex-direction:column;align-items:stretch;gap:10px}
.sound-ask .btn,.soundcheck .btn{width:100%;min-height:56px;font-size:1.1rem;padding:0 22px}
.sound-level{justify-content:center;height:30px}
.chips li,.intro-step .chips-big li,.rule3 li{border:0;background:var(--accent-wash)}

/* 22.10 22:40: one approve-all tick with its sentences beneath; research stays its own tick */
.consent .tick.all{border:0;margin:0;padding-bottom:4px;font-weight:700}
.consent-items{list-style:disc;margin:0 0 .6rem;padding-inline-start:calc(24px + .6rem + 1em);font-size:.92rem;line-height:1.5;color:var(--ink-2);display:flex;flex-direction:column;gap:.35rem}
.consent-items li{padding-inline-start:.1rem}
.consent-items .c-detail{display:inline;margin:0;padding:0;font-size:.875rem}
.consent-items .c-detail summary{display:inline;min-height:0}
.consent-items .c-detail p{margin:.25rem 0 0}

/* ===== 0.10.0 (24.10.2026): prior questions, one 3-part journey bar, voice tasks, photo bubbles, pause veil ===== */
/* one bar for the whole journey: three equal parts, part 1 (this take) fills the first third */
.progress-line.parts3{position:relative;background:var(--fill-2,#F6D9E9);height:6px;border-radius:3px;overflow:hidden}
.progress-line.parts3 span{background:var(--pk-ink,#B22F82);border-radius:3px}
.progress-line.parts3::before,.progress-line.parts3::after{content:"";position:absolute;top:0;bottom:0;width:2px;background:#fff;z-index:2}
.progress-line.parts3::before{left:33.333%}.progress-line.parts3::after{left:66.666%}
html[dir=rtl] .progress-line.parts3::before{left:auto;right:33.333%}html[dir=rtl] .progress-line.parts3::after{left:auto;right:66.666%}
.part-label{margin:0;flex:1;min-width:0;padding:0 8px;text-align:center;font-size:12px;line-height:1.25;font-weight:600;color:var(--ink-3,#6E6168)}
.part-label:empty{display:none}
.save-line{margin:0;font-size:15px;line-height:1.45;font-weight:600;color:var(--pk-ink,#B22F82)}
/* the prior questions */
#introPrior{display:flex;flex-direction:column;gap:14px}
#introPrior.hidden{display:none}
.prior-lead{margin:0}
.prior-bar{height:4px;background:var(--fill-2,#F6D9E9);border-radius:2px;overflow:hidden}
.prior-bar span{display:block;height:100%;background:var(--pk-ink,#B22F82);border-radius:2px;transition:width .35s ease}
.prior-q{margin:4px 0 0;font-size:24px;line-height:1.25;font-weight:700;outline:0}
.prior-hint{margin:-4px 0 0;font-size:15px;line-height:1.45;color:var(--ink-3,#6E6168)}
.prior-body{display:flex;flex-direction:column;gap:14px}
.prior-opts{display:grid;grid-template-columns:1fr;gap:10px}
.prior-opts.dense{gap:8px}
.prior-opt{min-height:56px;padding:12px 18px;border:0;border-radius:var(--r-chip,26px);background:var(--fill,#FBEAF3);color:var(--ink,#1A1014);font:600 17px/1.3 var(--font,Heebo,system-ui,sans-serif);text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.prior-opts.dense .prior-opt{min-height:50px;font-size:16px;padding:10px 16px}
.prior-opt.on{background:var(--pk-ink,#B22F82);color:#fff}
.prior-other,.prior-year{width:100%;min-height:52px;border:0;border-radius:var(--r-md,14px);background:var(--fill,#FBEAF3);padding:0 16px;font:600 18px var(--font,Heebo,system-ui,sans-serif);color:var(--ink,#1A1014)}
.prior-other.hidden{display:none}
.prior-err{margin:0;color:#9C1762;font-size:14px}.prior-err.hidden{display:none}
.prior-next{width:100%}
.prior-foot{display:flex;justify-content:space-between;align-items:center;min-height:44px}
.prior-back,.prior-skip{background:none;border:0;color:var(--pk-ink,#B22F82);font-weight:600;font-size:16px;text-decoration:none;min-height:44px;cursor:pointer}
.prior-skip{align-self:center}
/* voice tasks inside the take (go/no-go, shapes) */
.task-stage{position:absolute;left:14px;right:14px;top:44%;bottom:7%;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;pointer-events:none}
.task-stage.hidden{display:none}
.gng-circle{width:min(48vw,210px);aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.22);box-shadow:0 0 0 4px rgba(255,255,255,.75) inset;transition:background .08s,transform .08s}
.gng-circle span{font:800 30px/1 var(--font,Heebo,system-ui,sans-serif);color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.25)}
.gng-circle.on.pink{background:#E0529F;box-shadow:0 0 0 4px #fff inset,0 8px 30px rgba(224,82,159,.45);transform:scale(1.03)}
.gng-circle.on.blue{background:#3A7BD5;box-shadow:0 0 0 4px #fff inset,0 8px 30px rgba(58,123,213,.45);transform:scale(1.03)}
.gng-circle.hit{background:#9C1762}
.gng-circle.oops{background:#6E6168}
.sym-box{width:100%;display:flex;flex-direction:column;align-items:center;gap:12px}
.sym-box.hidden,#gngCircle.hidden{display:none}
.sym-key{display:grid;grid-template-columns:repeat(9,1fr);gap:3px;width:100%;max-width:380px;background:rgba(255,255,255,.94);border-radius:var(--r-md,14px);padding:8px 6px}
.sym-key .k{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--pk-deep,#9C1762)}
.sym-key .k b{font-size:15px;line-height:1;color:var(--ink,#1A1014)}
.sym-shape{width:128px;height:128px;border-radius:var(--r-lg,22px);background:rgba(255,255,255,.96);display:flex;align-items:center;justify-content:center;color:var(--pk-deep,#9C1762);box-shadow:0 10px 30px rgba(20,20,42,.18)}
.task-stage.sym-on{justify-content:flex-start;padding-top:2px;padding-bottom:132px}
.sym-hint{margin:0;min-height:1.3em;font-size:14px;font-weight:600;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.5);text-align:center}
.sym-pad{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(15,1fr);gap:8px;max-width:400px;margin:0 auto;pointer-events:auto}
.sym-pad.hidden{display:none}
.sym-btn,.sp-btn{grid-column:span 3;min-height:56px;border:0;border-radius:16px;background:rgba(255,255,255,.62);color:#9C1762;font:800 24px/1 var(--font,Heebo,system-ui,sans-serif);box-shadow:0 2px 10px rgba(20,20,42,.14);touch-action:manipulation;-webkit-tap-highlight-color:transparent;cursor:pointer}
.sp-btn:nth-child(n+6){grid-column:span 3}
.sp-btn:nth-child(6){grid-column:2 / span 3}
.sp-btn:active{background:rgba(255,255,255,.92)}
.sym-heard{margin:0;min-height:1.4em;font-size:16px;font-weight:700;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.45)}
.task-counter{margin:0;font-size:14px;font-weight:600;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.45)}
.task-counter:empty{display:none}
/* the instruction bubble shows the demo woman photo; a state icon (mic, speaker, check) becomes a small badge instead of covering her */
.bubble.photo.has-icon .guide-img{visibility:visible}
.bubble.photo.has-icon .mode-icon{inset:auto;right:-6px;bottom:-6px;width:36%;height:36%;border:2px solid var(--fill-2,#F6D9E9);box-shadow:0 2px 8px rgba(20,20,42,.18)}
html[dir=rtl] .bubble.photo.has-icon .mode-icon{right:auto;left:-6px}
.bubble.photo.has-icon .mode-icon svg{width:64%;height:64%}
/* pictogram bubble for the voice tasks (no face): circles / shapes */
.bubble .mode-icon.i-gng svg circle.p{fill:#E0529F;stroke:none}.bubble .mode-icon.i-gng svg circle.b{fill:#3A7BD5;stroke:none}
.bubble .mode-icon.i-sym svg path,.bubble .mode-icon.i-sym svg circle,.bubble .mode-icon.i-sym svg rect{stroke-width:5}
/* auto-pause: one line, no button */
.pause-veil{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.pause-veil.hidden{display:none}
.pause-veil p{margin:0;padding:18px 26px;border-radius:var(--r-lg,22px);background:var(--fill,#FBEAF3);color:var(--pk-deep,#9C1762);font:700 20px/1.3 var(--font,Heebo,system-ui,sans-serif);text-align:center}
/* the bridge line at the end of the take */
.nowait-veil .bridge{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px;text-align:center}
.nowait-veil .bridge b{font:700 22px/1.3 var(--font,Heebo,system-ui,sans-serif);color:var(--ink,#1A1014)}
.nowait-veil .bridge span{font:500 17px/1.4 var(--font,Heebo,system-ui,sans-serif);color:var(--ink-2,#4F4349)}
.prior-body .prior-next{position:sticky;bottom:calc(10px + var(--safe-bottom,0px));box-shadow:0 -10px 16px 6px rgba(255,255,255,.92)}
/* the part label: inline in the take (no language pill there), on its own row above the bar on the intro and prior screens */
#app:not([data-screen=capture]) .top-row{flex-wrap:wrap;row-gap:6px}
#app:not([data-screen=capture]) .part-label{order:3;flex:0 0 100%;padding:0;text-align:start;font-size:13px}
#app:not([data-screen=capture]) .sheet{padding-top:calc(96px + var(--safe-top,0px))}

/* 24.10 contrast step inside the video: a mid-grey ground (sRGB 128, same as part 2) and three tap choices at the bottom */
.con-box{width:100%;display:flex;flex-direction:column;align-items:center;gap:10px}
.con-box.hidden{display:none}
.con-ground{width:100%;max-width:380px;height:168px;border-radius:var(--r-lg,22px);background:rgb(128,128,128);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(20,20,42,.18)}
.con-ground span{font:700 104px/1 var(--font,Heebo,system-ui,sans-serif);font-variant-numeric:lining-nums}
.con-pad{margin-top:50px;position:static;display:flex;gap:10px;justify-content:center;width:100%;max-width:380px;pointer-events:auto}
.con-pad .con-btn{flex:1;grid-column:auto;min-height:64px;font-size:28px}
.task-stage:has(#conBox:not(.hidden)){justify-content:flex-start;padding-top:2px}