/* Apple HIG direction: apple.com light + iOS-dark, SF stacks, pills, soft shadows */
:root{
  --paper:#F5F5F7;
  --panel:#FFFFFF;
  --panel-2:#E8E8ED;
  --ink:#1D1D1F;
  --ink-2:#424245;
  --ink-3:#86868B;
  --line:rgba(0,0,0,.08);
  --line-2:rgba(0,0,0,.14);
  --accent:#0071E3;
  --accent-ink:#FFFFFF;
  --accent-soft:rgba(0,113,227,.08);
  --good:#248A3D;
  --over:#D70015;
  --glass:rgba(255,255,255,.72);
  --shadow:0 1px 3px rgba(0,0,0,.06), 0 10px 30px -18px rgba(0,0,0,.25);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#161617;
    --panel:#1C1C1E;
    --panel-2:#2C2C2E;
    --ink:#F5F5F7;
    --ink-2:#D2D2D7;
    --ink-3:#98989D;
    --line:rgba(255,255,255,.10);
    --line-2:rgba(255,255,255,.18);
    --accent:#0A84FF;
    --accent-ink:#FFFFFF;
    --accent-soft:rgba(10,132,255,.14);
    --good:#30D158;
    --over:#FF453A;
    --glass:rgba(28,28,30,.72);
    --shadow:0 1px 0 rgba(0,0,0,.4), 0 14px 34px -22px #000;
  }
}
:root[data-theme="dark"]{
  --paper:#161617;
  --panel:#1C1C1E;
  --panel-2:#2C2C2E;
  --ink:#F5F5F7;
  --ink-2:#D2D2D7;
  --ink-3:#98989D;
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.18);
  --accent:#0A84FF;
  --accent-ink:#FFFFFF;
  --accent-soft:rgba(10,132,255,.14);
  --good:#30D158;
  --over:#FF453A;
  --glass:rgba(28,28,30,.72);
  --shadow:0 1px 0 rgba(0,0,0,.4), 0 14px 34px -22px #000;
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.mono{font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace}
.lab{
  font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;
  font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);
}

/* ---------- shell ---------- */
.app{display:flex;flex-direction:column;min-height:100vh}

/* ---------- top deck ---------- */
.deck{
  position:sticky;top:0;z-index:40;
  background:var(--glass);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);
  border-bottom:1px solid var(--line);
}
.deck-row{
  display:flex;align-items:center;gap:18px;
  padding:10px 18px;flex-wrap:wrap;
}
.brand{display:flex;align-items:baseline;gap:9px;margin-right:auto}
.brand b{
  font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;font-weight:700;font-size:13px;
  letter-spacing:.16em;text-transform:uppercase;
}
.brand .dot{width:7px;height:7px;background:var(--accent);border-radius:50%;display:inline-block}

.clocks{display:flex;align-items:flex-end;gap:20px}
.clock{display:flex;flex-direction:column;gap:2px}
.clock .val{
  font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums;
  font-weight:500;letter-spacing:-.01em;line-height:1;
}
.clock.total .val{font-size:20px;color:var(--ink-2)}
.clock.stage .val{font-size:34px}
.clock.stage.warn .val{color:var(--accent)}
.clock.stage.over .val{color:var(--over)}

.ctrls{display:flex;gap:8px;align-items:center}
.btn{
  border:1px solid var(--line-2);background:var(--panel);color:var(--ink);
  border-radius:980px;padding:7px 16px;cursor:pointer;
  font-family:inherit;font-size:12.5px;font-weight:500;letter-spacing:0;text-transform:none;
}
.btn:hover{background:var(--panel-2)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.pri:hover{filter:brightness(1.06)}
.btn.ghost{border-color:transparent;color:var(--ink-3)}
.btn.ghost:hover{color:var(--ink)}
.btn[disabled]{opacity:.32;pointer-events:none}
/* fast-draft dial on the Screens stage: quiet pill, accent-tinted when armed */
.btn.fastflow{color:var(--ink-3)}
.btn.fastflow.on{color:var(--accent);border-color:var(--accent);background:transparent}
.btn.fastflow.on:hover{background:var(--panel-2)}

/* progress bar of stages */
.track{display:flex;height:5px;background:var(--panel-2);border-top:1px solid var(--line)}
.track .seg{position:relative;border-right:1px solid var(--panel)}
.track .seg:last-child{border-right:0}
.track .seg .fill{position:absolute;inset:0 auto 0 0;background:var(--line-2);width:0}
.track .seg.done .fill{width:100%;background:var(--line-2)}
.track .seg.active .fill{background:var(--accent)}
.track .seg.over .fill{background:var(--over)}

/* ---------- body ---------- */
.body{display:grid;grid-template-columns:206px minmax(0,1fr);flex:1;align-items:start}

.rail{
  position:sticky;top:97px;
  padding:16px 10px 40px;
  display:flex;flex-direction:column;gap:2px;
}
.stagebtn{
  display:grid;grid-template-columns:20px 1fr auto;align-items:center;gap:9px;
  width:100%;text-align:left;background:transparent;border:0;cursor:pointer;
  padding:8px 10px;border-radius:9px;color:var(--ink-2);
}
.stagebtn:hover{background:var(--panel)}
.stagebtn .num{
  font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;font-size:10px;color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
.stagebtn .nm{font-size:13.5px;font-weight:500}
.stagebtn .bud{font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;font-size:10px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.stagebtn[aria-current="true"]{background:var(--accent-soft);color:var(--ink)}
.stagebtn[aria-current="true"] .num{color:var(--accent)}
.stagebtn.done .nm{color:var(--ink-3)}
.stagebtn.done .num{font-size:0}
.stagebtn.done .num::after{content:"✓";color:var(--good);font-size:12px;font-weight:700}

/* ---------- stage ---------- */
.stage-wrap{padding:26px 30px 90px;max-width:820px;margin-inline:auto;width:100%}
.stage-head{display:flex;align-items:baseline;gap:14px;margin-bottom:22px;flex-wrap:wrap}
.stage-head h1{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;font-weight:700;font-size:27px;letter-spacing:-.022em;
  margin:0;text-wrap:balance;
}
.stage-head .idx{font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--accent)}
.stage-head .sub{color:var(--ink-3);font-size:13.5px}

.blocks{display:flex;flex-direction:column;gap:22px}

/* say lines */
.say{
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
  background:var(--panel);border:1px solid var(--line);border-left:2px solid var(--accent);
  padding:14px 16px;border-radius:14px;cursor:pointer;text-align:left;width:100%;
  box-shadow:var(--shadow);
}
.say .mark{
  font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;font-size:9px;letter-spacing:.12em;
  color:var(--accent);padding-top:6px;
}
.say p{
  margin:0;font-family:ui-serif,"New York",Georgia,serif;font-size:20.5px;line-height:1.4;
  letter-spacing:-.005em;
}
.say .slot{color:var(--accent);font-style:italic}
.say .fill-in{
  color:var(--ink);border-bottom:1px solid var(--accent);
  padding-bottom:1px;
}
.say.said .fill-in{border-bottom-color:var(--line-2)}
.say.said{border-left-color:var(--line-2);box-shadow:none;background:transparent}
.say.said p{color:var(--ink-3)}
.say.said .mark{color:var(--ink-3)}

/* generic block card */
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.card > .lab{display:block;margin-bottom:10px}
.card.plain{background:transparent;border-style:dashed}

ul.items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
ul.items.bullets li{
  padding-left:16px;position:relative;color:var(--ink-2);font-size:14px;line-height:1.55;
}
ul.items.bullets li::before{
  content:"";position:absolute;left:3px;top:9px;width:4px;height:1px;background:var(--line-2);
}
.chk{display:flex;gap:10px;align-items:flex-start;cursor:pointer;padding:5px 4px;border-radius:10px}
.chk:hover{background:var(--panel-2)}
.chk input{
  appearance:none;width:14px;height:14px;border:1px solid var(--line-2);border-radius:1px;
  margin:3px 0 0;flex:none;background:var(--paper);cursor:pointer;
}
.chk input:checked{background:var(--good);border-color:var(--good)}
.chk input:checked::after{
  content:"";display:block;width:4px;height:8px;margin:0 auto;
  border:solid var(--panel);border-width:0 1.5px 1.5px 0;transform:translateY(-1px) rotate(42deg);
}
.chk span{font-size:14.5px;line-height:1.45}
.chk input:checked + span{color:var(--ink-3);text-decoration:line-through;text-decoration-color:var(--line-2)}

.flow{
  font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:1.9;color:var(--ink-2);
  background:var(--panel-2);border-radius:10px;padding:9px 11px;overflow-x:auto;white-space:nowrap;
}
.flow.wrap{white-space:normal;overflow-x:visible;line-height:2}
.hint{font-size:13px;color:var(--ink-3);margin:8px 0 0}

/* fields */
.field{display:flex;flex-direction:column;gap:6px}
.field textarea{
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;resize:vertical;min-height:46px;line-height:1.5;font-size:14.5px;
  width:100%;
}
.field textarea:focus{border-color:var(--accent)}

/* prompt bar */
.promptbar{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  align-items:baseline;gap:10px 12px;padding:4px 0 2px;
}
.promptbar .kw{
  font-family:ui-serif,"New York",Georgia,serif;font-size:19px;color:var(--ink);white-space:nowrap;
}
.promptbar .kw.soft{color:var(--ink-3)}
.promptbar input{
  width:100%;min-width:0;
  background:transparent;border:0;border-bottom:1px solid var(--line-2);
  padding:4px 2px;font-family:ui-serif,"New York",Georgia,serif;font-size:19px;
}
.promptbar input::placeholder{color:var(--ink-3);font-size:15px;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif}
.promptbar input:focus{border-bottom-color:var(--accent);outline:none}
.profrow{display:flex;align-items:center;gap:9px;margin-top:16px;flex-wrap:wrap}
.profrow select{
  background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:5px 7px;font-size:13px;
}
.profhint{
  font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--accent);letter-spacing:.04em;
}

/* adaptive block + profile chip */
.card.adaptive{border-left:2px solid var(--accent)}
.card.adaptive .lab b{color:var(--accent);font-weight:500}
.profchip{
  font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);border:1px solid var(--accent);border-radius:99px;padding:2px 8px;
}
.chips.big .chip{font-size:11px;padding:5px 11px;letter-spacing:.04em;text-transform:none;color:var(--ink-2)}
.chips.big .chip.on{color:var(--panel)}
li.sub-lab{
  font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);padding-left:0!important;margin-bottom:2px;
}
li.sub-lab::before{display:none}

/* adaptive editing */
.ahead{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.ahead .lab{margin:0}
.btn.tiny{padding:3px 8px;font-size:9.5px;margin-left:auto}
.editlist{display:flex;flex-direction:column;gap:6px}
.editrow{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
.editrow .del{background:none;border:0;color:var(--ink-3);cursor:pointer;font-size:14px;padding:2px 4px;line-height:1}
.editrow .del:hover{color:var(--over)}
input.editline{
  width:100%;background:var(--paper);border:1px solid var(--line);border-radius:10px;
  padding:7px 9px;font-size:14px;
}
input.editline:focus{border-color:var(--accent);outline:none}
.editbar{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}

/* ai controls */
.airow{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.aistatus{font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--ink-3);letter-spacing:.03em}
.aistatus.small{font-size:10px}
.aistatus.warn{color:var(--over)}
#askClaudeBtn[disabled]{opacity:.5}

/* context pairs */
.pairs{display:flex;flex-direction:column;gap:6px}
.pair{display:grid;grid-template-columns:1fr auto 1.25fr auto;align-items:center;gap:9px}
.pair input{
  background:var(--paper);border:1px solid var(--line);border-radius:10px;
  padding:7px 9px;font-size:14px;min-width:0;
}
.pair input:focus{border-color:var(--accent);outline:none}
.pair .arrow{color:var(--accent);font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;font-size:13px}
.pair .del{background:none;border:0;color:var(--ink-3);cursor:pointer;font-size:14px;padding:2px 4px;line-height:1}
.pair .del:hover{color:var(--over)}
@media (max-width:620px){
  .pair{grid-template-columns:1fr auto;grid-template-areas:"a d" "b b"}
  .pair .arrow{display:none}
}

/* screens builder */
.screens{display:flex;flex-direction:column;gap:10px}
.screen{
  background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:11px 12px;
  display:flex;flex-direction:column;gap:9px;
}
.screen-top{display:flex;gap:10px;align-items:center}
.screen-top .n{
  font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;font-size:10px;color:var(--accent);flex:none;
  width:22px;
}
.screen-top input{
  flex:1;background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:4px 0;font-size:15px;font-weight:500;
}
.screen-top input:focus{border-bottom-color:var(--accent);outline:none}
.screen-top .del{background:none;border:0;color:var(--ink-3);cursor:pointer;font-size:15px;line-height:1;padding:2px 5px}
.screen-top .del:hover{color:var(--over)}
.screen-spot{
  background:transparent;border:0;border-bottom:1px dashed var(--line);
  padding:3px 0 3px 32px;font-size:12.5px;color:var(--ink-2);width:100%;
}
.screen-spot::placeholder{color:var(--ink-3);font-style:italic}
.screen-spot:focus{border-bottom-color:var(--accent);outline:none;color:var(--ink)}
.sublab{display:block;margin:-4px 0 12px;font-size:12px;color:var(--ink-3);font-style:italic}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{
  border:1px solid var(--line-2);background:transparent;border-radius:99px;
  padding:3px 9px;cursor:pointer;
  font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);
}
.chip:hover{border-color:var(--ink-3)}
.chip.on{background:var(--good);border-color:var(--good);color:var(--panel)}

/* recap */
.recap{
  background:var(--panel);border:1px solid var(--line);border-left:2px solid var(--accent);
  padding:18px 20px;border-radius:10px;box-shadow:var(--shadow);
}
.recap p{
  font-family:ui-serif,"New York",Georgia,serif;font-size:20px;line-height:1.55;margin:0 0 12px;
}
.recap p:last-child{margin-bottom:0}
.recap .slot{color:var(--accent);font-style:italic}

/* stage footer nav */
.stage-nav{display:flex;gap:10px;margin-top:30px;align-items:center}

/* ---------- patterns panel ---------- */
/* In-app confirm (see askConfirm) — sits above the panel/voicebar layer at 60 */
.modalwrap{
  position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:20px;
  background:rgba(10,8,6,.44);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;transition:opacity .14s ease;
}
.modalwrap.open{opacity:1}
.modalbox{
  width:min(400px,100%);background:var(--panel);border:1px solid var(--line-2);
  border-radius:16px;padding:22px;box-shadow:var(--shadow);
  transform:translateY(8px) scale(.985);transition:transform .16s cubic-bezier(.4,0,.2,1);
}
.modalwrap.open .modalbox{transform:none}
.modalbox h2{margin:0 0 8px;font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.modalbox p{margin:0 0 20px;font-size:13.5px;line-height:1.5;color:var(--ink-3)}
.modalbar{display:flex;gap:8px;justify-content:flex-end}
.btn.danger{background:var(--over);border-color:var(--over);color:#fff}
.btn.danger:hover{background:var(--over);filter:brightness(1.1)}

/* Tooltips (see tipInit): one dark card in both themes, Notion-style — no arrow, small type,
   optional bold head line. Replaces the browser's native title box everywhere. */
:root{--tip-bg:#2C2C2E;--tip-ink:#F5F5F7;--tip-ink-2:rgba(245,245,247,.72)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--tip-bg:#3A3A3C} }
:root[data-theme="dark"]{--tip-bg:#3A3A3C}
.tip[popover]{inset:auto;margin:0;border:0;overflow:visible}   /* undo the UA popover box; we position it ourselves */
.tip[popover]:not(:popover-open){display:none}
.tip{
  position:fixed;z-index:80;max-width:280px;padding:7px 10px 8px;border-radius:8px;
  background:var(--tip-bg);color:var(--tip-ink);font-size:12.5px;line-height:1.4;letter-spacing:0;
  box-shadow:0 8px 24px -8px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.06) inset;
  pointer-events:none;opacity:0;transform:translateY(-2px);
  transition:opacity .12s ease,transform .12s ease;
}
.tip.show{opacity:1;transform:none}
.tip.above{transform:translateY(2px)}
.tip.above.show{transform:none}
.tip b{display:block;font-weight:600;margin-bottom:2px}
.tip span{color:var(--tip-ink-2)}
.tip b + span{color:var(--tip-ink-2)}
@media (hover:none){ .tip{display:none} }

.scrim{
  position:fixed;inset:0;background:rgba(10,8,6,.34);z-index:50;
  opacity:0;pointer-events:none;transition:opacity .18s ease;
}
.scrim.open{opacity:1;pointer-events:auto}
.panel{
  position:fixed;top:0;right:0;bottom:0;width:min(480px,94vw);z-index:60;
  background:var(--panel);border-left:1px solid var(--line-2);
  display:flex;flex-direction:column;
  transform:translateX(102%);transition:transform .22s cubic-bezier(.4,0,.2,1);
  box-shadow:-30px 0 60px -40px rgba(0,0,0,.6);
}
.panel.open{transform:none}
.panel-head{padding:14px 16px 0;border-bottom:1px solid var(--line)}
.panel-head .row{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.panel-head .row .lab{margin-right:auto}
.tabs{display:flex;gap:2px;overflow-x:auto}
.tab{
  background:transparent;border:0;border-bottom:2px solid transparent;cursor:pointer;
  padding:8px 10px;color:var(--ink-3);white-space:nowrap;
  font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.panel-body{overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:18px}
.pgroup h3{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;font-size:15px;font-weight:600;margin:0 0 3px;
}
.pgroup .q{font-size:13px;color:var(--ink-3);margin:0 0 8px}
.pgroup ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.pgroup li{font-size:13.5px;line-height:1.45;padding-left:15px;position:relative;color:var(--ink-2)}
.pgroup li::before{content:"";position:absolute;left:2px;top:9px;width:5px;height:1px;background:var(--accent)}
.pgroup li b{color:var(--ink);font-weight:500}
.psearch{
  width:100%;background:var(--paper);border:1px solid var(--line);border-radius:10px;
  padding:7px 9px;font-size:13px;margin-bottom:2px;
}

@media (prefers-reduced-motion: reduce){
  .panel,.scrim{transition:none}
}
@media (max-width:860px){
  /* minmax(0,…), never a bare 1fr: a bare fr track is sized by its content's min-content
     width, and the nowrap .flow strips ("WHERE: Prevent → Assist → Recover") then push the
     track past the viewport — iOS shrink-to-fits the whole page and everything renders tiny */
  .body{grid-template-columns:minmax(0,1fr)}
  .rail{
    position:static;flex-direction:row;overflow-x:auto;border-right:0;
    border-bottom:1px solid var(--line);padding:8px;gap:4px;
  }
  .stagebtn{grid-template-columns:auto auto;width:auto;white-space:nowrap}
  .stagebtn .bud{display:none}
  .stage-wrap{padding:20px 16px 80px}
  .clock.stage .val{font-size:28px}
}

/* multiple-choice questions */
.mcwrap{display:flex;flex-direction:column;gap:16px}
.mcq{display:flex;flex-direction:column;gap:8px}
.mcq-q{font-size:15px;line-height:1.4;color:var(--ink);cursor:pointer}
/* the active question while listening: the next heard answer lands here */
.mcq.vtarget .mcq-q::before{
  content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#FF3B30;
  margin:0 9px 2px 0;vertical-align:middle;animation:vpulse 1.4s ease-in-out infinite;
}
.mcq.vtarget .mcq-other{border-color:#FF3B30;box-shadow:0 0 0 3px rgba(255,59,48,.14)}
.chips.mc{gap:6px}
.chips.mc .chip{font-size:12px;padding:5px 11px;text-transform:none;letter-spacing:.01em;color:var(--ink-2)}
.chips.mc .chip.on{background:var(--good);border-color:var(--good);color:var(--panel)}
.mcq-other{
  background:var(--paper);border:1px solid var(--line);border-radius:10px;
  padding:6px 9px;font-size:13.5px;max-width:340px;
}
.mcq-other:focus{border-color:var(--accent);outline:none}

/* collapsible learning note */
.note{border:1px dashed var(--line-2);border-radius:10px;background:transparent}
.note.open{background:var(--panel)}
.notehead{
  width:100%;display:flex;align-items:center;gap:10px;
  background:transparent;border:0;cursor:pointer;padding:11px 14px;text-align:left;
}
.notehead:hover{background:var(--panel-2)}
.notehead .cap{font-size:13px;filter:grayscale(.2)}
.notehead .lab{margin:0;flex:1}
.notehead .chev{color:var(--ink-3);font-size:11px}
.notebody{padding:0 14px 14px 36px}

/* ai-tailored opener line */
.say.opener .mark{color:var(--good)}
/* said wins over the tailored-opener green: once she's said it, the card goes quiet */
.say.opener.said .mark{color:var(--ink-3)}
.say.opener p::after{
  content:"tailored";
  display:inline-block;margin-left:8px;transform:translateY(-2px);
  font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--good);border:1px solid var(--good);border-radius:99px;padding:1px 5px;vertical-align:middle;
}

/* coupling warning under an mc question */
.mcq-warn{
  margin:2px 0 0;font-size:12.5px;line-height:1.45;color:var(--accent);
  border-left:2px solid var(--accent);padding:4px 0 4px 10px;max-width:520px;
}

/* paste-the-whole-prompt */
.pastewrap{margin-top:12px}
.pastetoggle{
  background:none;border:0;cursor:pointer;padding:0;
  font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.04em;color:var(--ink-3);
}
.pastetoggle:hover{color:var(--accent)}
.pastearea{
  width:100%;margin-top:8px;background:var(--paper);border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;font-family:ui-serif,"New York",Georgia,serif;font-size:17px;line-height:1.45;resize:vertical;
}
.pastearea:focus{border-color:var(--accent);outline:none}

/* ai loading / error banner */
.aibanner{
  display:flex;align-items:center;gap:10px;
  background:var(--accent-soft);border:1px solid var(--accent);border-radius:10px;
  padding:11px 14px;font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;font-size:12px;letter-spacing:.03em;color:var(--ink);
}
.aibanner.err{background:transparent;border-color:var(--over);color:var(--over)}
.spin{
  width:12px;height:12px;border:2px solid var(--accent);border-top-color:transparent;border-radius:50%;
  display:inline-block;animation:spin .7s linear infinite;flex:none;
}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){ .spin{animation:none} }

/* inline segment reveal */
.reveal{
  margin-top:10px;padding-top:10px;border-top:1px dashed var(--line-2);
}

/* apply-row for a typed answer that must be committed */
.otherrow{display:flex;gap:8px;align-items:center}
.otherrow .mcq-other{flex:1;max-width:none}
.otherrow .btn.tiny{flex:none;padding:6px 12px}

/* generate-tip button, prominent, in the field header */
.fieldhead{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.fieldhead .lab{margin:0}
.btn.tipbtn{
  margin-left:auto;padding:6px 12px;font-size:10.5px;
  border-color:var(--accent);color:var(--accent);
}
.btn.tipbtn:hover{background:var(--accent);color:var(--accent-ink)}

/* ===== sequential screens: near-real wireframes, route strip, interviewer notes ===== */
.screen-arch{
  font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);padding-left:32px;margin-top:-4px;
}
.wf{margin-left:32px;background:var(--paper);border:1px solid var(--line-2);border-radius:12px;overflow:hidden}
.wf-mobile{
  width:272px;height:572px;border-radius:24px;border-width:1.5px;
  display:flex;flex-direction:column;box-shadow:var(--shadow);
}
.wf-web{max-width:540px}
.wf-plain{max-width:460px}
.wf-statusbar{flex:none;height:20px;display:flex;align-items:center;justify-content:center}
.wf-statusbar i{width:54px;height:5px;border-radius:3px;background:var(--line-2)}
.wf-homebar{flex:none;height:16px;display:flex;align-items:center;justify-content:center}
.wf-homebar i{width:76px;height:4px;border-radius:3px;background:var(--line-2)}
.wf-browserbar{height:20px;display:flex;gap:4px;align-items:center;padding:0 10px;border-bottom:1px solid var(--line)}
.wf-browserbar i{width:7px;height:7px;border-radius:50%;background:var(--line-2)}
.wf-body{padding:10px;display:flex;flex-direction:column;gap:7px}
.wf-mobile .wf-body{flex:1;min-height:0;overflow:hidden;padding:6px 12px 10px}
.wf-mobile .wfb-cta{margin-top:auto}
.wf-mobile .wfb-list,.wf-mobile .wfb-chat,.wf-mobile .wfb-cards,.wf-mobile .wfb-media,.wf-mobile .wfb-gallery,.wf-mobile .wfb-combos,.wf-mobile .wfb-steps{min-height:0;flex-shrink:1;overflow:hidden}
/* few blocks -> spread out and let content blocks fill the face instead of leaving a void */
.wf-mobile .wf-body.wf-sparse{gap:12px}
.wf-mobile .wf-sparse .wfb-list,.wf-mobile .wf-sparse .wfb-gallery,.wf-mobile .wf-sparse .wfb-chat,.wf-mobile .wf-sparse .wfb-combos{flex-grow:1}
/* text cards don't stretch (tall empty tiles look broken) — visual blocks absorb the space instead */
.wf-mobile .wf-sparse .wfb-combos{justify-content:space-evenly}
.wf-mobile .wf-sparse .wfb-check{flex-grow:1;justify-content:center}
.wfb{position:relative;font-size:12px;color:var(--ink-2);border-radius:7px}
.wfb .wf-star{
  position:absolute;top:-13px;right:8px;z-index:1;background:var(--paper);padding:0 5px;border-radius:4px;
  border:1px solid var(--accent);
  font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);
}
.wfb-idea{outline:1.5px solid var(--accent);outline-offset:1.5px;background:var(--accent-soft)}
.wfb-navbar{display:flex;align-items:center;gap:8px;padding:7px 10px;background:var(--panel-2);border-radius:8px;font-weight:600;color:var(--ink);font-size:12.5px}
.wfb-back{color:var(--ink-3);font-size:15px;line-height:1}
.wfb-header{font-size:15.5px;font-weight:700;color:var(--ink);padding:1px 2px}
.wfb-copy{padding:0 2px;line-height:1.45}
.wfb-search{border:1px solid var(--line-2);border-radius:16px;padding:6px 11px;display:flex;gap:7px;align-items:center;color:var(--ink-3);font-size:11.5px}
.wfb-mag{font-size:13px;line-height:1}
.wfb-tabs{display:flex;gap:13px;border-bottom:1px solid var(--line);padding:2px 2px 6px;font-size:11.5px}
.wfb-tab{color:var(--ink-3)}
.wfb-tab.act{color:var(--ink);font-weight:600;box-shadow:0 2px 0 var(--accent)}
.wfb-chips{display:flex;flex-wrap:wrap;gap:5px}
.wfb-chip{border:1px solid var(--line-2);border-radius:12px;padding:3px 9px;font-size:10.5px;background:var(--panel)}
.wfb-list{border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--panel)}
.wfb-row{display:flex;gap:9px;align-items:center;padding:7px 10px;border-bottom:1px solid var(--line);font-size:11.5px}
.wfb-row:last-child{border-bottom:0}
.wfb-dot{width:16px;height:16px;border-radius:50%;background:var(--panel-2);border:1px solid var(--line-2);flex:none}
.wfb-cards{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.wfb-card{border:1px solid var(--line-2);border-radius:9px;padding:16px 9px 9px;font-size:10.5px;background:var(--panel);line-height:1.35}
.wfb-gallery{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.wfb-gcard{border:1px solid var(--line-2);border-radius:9px;overflow:hidden;background:var(--panel);display:flex;flex-direction:column;min-height:0}
.wfb-thumb{display:block;min-height:40px;flex:1;background:repeating-linear-gradient(45deg,transparent,transparent 6px,var(--line) 6px,var(--line) 7px);border-bottom:1px solid var(--line)}
.wfb-glabel{padding:5px 8px;font-size:10.5px;line-height:1.3;flex:none}
.wfb-combos{display:flex;flex-direction:column;gap:6px}
.wfb-combo{border:1px solid var(--line-2);border-radius:9px;padding:7px 9px;background:var(--panel)}
.wfb-combo-name{font-size:11px;font-weight:600;color:var(--ink);margin-bottom:5px}
.wfb-combo-pieces{display:flex;gap:6px}
.wfb-piece{flex:1;display:flex;flex-direction:column;gap:3px;font-size:9.5px;color:var(--ink-3);text-align:center;min-width:0}
.wfb-piece span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wfb-thumb.sm{min-height:26px;flex:none;border:1px dashed var(--line-2);border-bottom-style:dashed;border-radius:5px}
/* native OS permission dialog, sketched: dimmed zone + centered system sheet */
.wfb-permwrap{background:repeating-linear-gradient(45deg,transparent,transparent 5px,var(--line) 5px,var(--line) 6px);border-radius:9px;padding:14px 18px;display:flex;justify-content:center}
.wfb-perm{background:var(--paper);border:1px solid var(--line-2);border-radius:12px;max-width:200px;width:100%;padding:12px 0 0;text-align:center;box-shadow:var(--shadow)}
.wfb-perm-icon{font-size:16px;color:var(--ink-3);line-height:1;margin-bottom:6px}
.wfb-perm-title{font-size:11px;font-weight:600;color:var(--ink);padding:0 12px 10px;line-height:1.35}
.wfb-perm-btns{display:flex;border-top:1px solid var(--line)}
.wfb-perm-btn{flex:1;padding:7px 4px;font-size:11px;color:var(--ink-2);border-right:1px solid var(--line)}
.wfb-perm-btn:last-child{border-right:0}
.wfb-perm-btn.primary{color:var(--accent);font-weight:700}
.wfb-steps{display:flex;flex-direction:column;gap:6px;padding:0 2px}
.wfb-step{display:flex;gap:8px;align-items:center;font-size:11.5px}
.wfb-stepnum{width:18px;height:18px;border-radius:50%;border:1px solid var(--ink-3);display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--ink);flex:none}
.wfb-check{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 0;font-size:12.5px;color:var(--ink);font-weight:600}
.wfb-checkmark{width:34px;height:34px;border-radius:50%;border:2px solid #59a06b;color:#59a06b;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:400}
.wfb-media{border:1px dashed var(--line-2);border-radius:9px;min-height:54px;display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(45deg,transparent,transparent 7px,var(--line) 7px,var(--line) 8px)}
.wfb-media span{background:var(--paper);padding:1px 7px;border-radius:4px;font-size:10.5px}
.wfb-field{border:1px solid var(--line-2);border-radius:9px;padding:8px 11px;color:var(--ink-3);background:var(--panel);font-size:11.5px}
.wfb-button{background:var(--ink);color:var(--paper);border-radius:10px;padding:9px 11px;text-align:center;font-weight:600;font-size:12px}
.wfb-link{color:var(--accent);text-decoration:underline;font-size:11.5px;padding:0 2px}
.wfb-status{border:1px solid var(--line-2);background:var(--panel-2);border-radius:9px;padding:6px 10px;font-size:11px}
.wfb-progress{display:flex;align-items:center;gap:9px;font-size:10.5px;color:var(--ink-3)}
.wfb-bartrack{flex:1;height:5px;border-radius:3px;background:var(--panel-2);overflow:hidden;border:1px solid var(--line)}
.wfb-bar{display:block;width:55%;height:100%;background:var(--accent)}
.wfb-chat{display:flex;flex-direction:column;gap:5px}
.wfb-bubble{max-width:82%;border-radius:12px;padding:6px 10px;font-size:11px;border:1px solid var(--line-2);line-height:1.4}
.wfb-bubble.bot{align-self:flex-start;background:var(--panel-2);border-bottom-left-radius:4px}
.wfb-bubble.me{align-self:flex-end;background:var(--accent-soft);border-color:var(--accent);border-bottom-right-radius:4px;color:var(--ink)}
.noterow{display:flex;gap:8px;align-items:flex-start;margin-top:2px;padding-left:32px}
.screen-note{
  flex:1;background:transparent;border:1px solid var(--line-2);border-radius:8px;
  padding:7px 10px;font:inherit;font-size:12.5px;color:var(--ink);min-height:34px;resize:vertical;
}
.screen-note::placeholder{color:var(--ink-3);font-style:italic}
.screen-note:focus{border-color:var(--accent);outline:none}
.noterow .btn.tiny{flex:none;margin-top:1px}
.notemuted{font-size:12px;color:var(--ink-3);font-style:italic;padding-left:32px}
.skelstrip{
  font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--ink-3);letter-spacing:.03em;
  margin-top:12px;line-height:1.9;
}
.skelstrip b{color:var(--ink-2);font-weight:500}
.flowdone{
  margin-top:12px;padding:9px 12px;border:1px solid var(--good);border-radius:8px;
  color:var(--good);font-size:12px;font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;letter-spacing:.04em;
}
.nextrow{display:flex;gap:10px;align-items:center;margin-top:12px;flex-wrap:wrap}

/* flow map + exit connectors */
.flowmap{
  font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--ink-2);letter-spacing:.03em;
  line-height:1.9;margin:2px 0 12px;
}
.flowmap b{color:var(--ink);font-weight:500}
.flowmap .dim{color:var(--ink-3)}
.screen-exit{
  font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--ink-3);letter-spacing:.03em;
  padding:0 0 0 44px;
}
.screen-exit b{color:var(--accent);font-weight:500}

/* ------- live listening HUD ------- */
.voicebar{
  position:fixed;right:18px;bottom:18px;z-index:60;
  display:flex;gap:10px;align-items:flex-start;
  max-width:440px;padding:9px 13px;border-radius:14px;
  background:var(--glass);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);
  box-shadow:var(--shadow);font-size:12px;
}
.voicebar .vdot{width:9px;height:9px;border-radius:50%;background:var(--ink-3);margin-top:4px;flex:none}
.voicebar .vdot.live{background:#FF3B30;animation:vpulse 1.4s ease-in-out infinite}
@keyframes vpulse{0%,100%{opacity:1}50%{opacity:.35}}
.voicebar .vbody{display:flex;flex-direction:column;gap:4px;min-width:0}
/* the transcript is the content: primary ink, up to two lines, tail kept (we slice from the end) */
.voicebar .vinterim{
  color:var(--ink);font-style:italic;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* one event line under it — quiet unless it's a warning */
.voicebar .vevent{
  color:var(--ink-3);font-size:11.5px;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.voicebar .vevent.warn{color:var(--over)}
/* "use what I heard as the prompt" — the model wasn't sure it was an assignment; she is */
.voicebar .voffer{
  text-align:left;font:inherit;font-size:12px;line-height:1.35;cursor:pointer;
  color:var(--accent);background:var(--accent-soft);border:1px solid transparent;border-radius:9px;
  padding:6px 9px;margin:2px 0 4px;
}
.voicebar .voffer i{color:var(--ink-2);font-style:italic}
.voicebar .voffer:hover{border-color:var(--accent)}
/* Listen sits next to Reset in the header: identical pill, so the only difference is the
   status LED. Live reads as RECORDING (red + pulse, same language as the voice bar's dot),
   not as a primary action — blue here looked like "the button you should press". */
#voiceBtn{display:inline-flex;align-items:center;gap:7px}
#voiceBtn .vled{width:7px;height:7px;border-radius:50%;background:var(--ink-3);flex:none;transition:background .15s}
#voiceBtn.live{background:rgba(255,59,48,.10);border-color:#FF3B30;color:#FF3B30}
#voiceBtn.live:hover{background:rgba(255,59,48,.16)}
#voiceBtn.live .vled{background:#FF3B30;animation:vpulse 1.4s ease-in-out infinite}

/* ------- canvas mode: screens in a row, drag to pan ------- */
.canvas-wrap{
  margin-top:12px;overflow-x:auto;overflow-y:hidden;cursor:grab;
  background:var(--panel-2);border:1px solid var(--line);border-radius:12px;
  scrollbar-width:thin;user-select:none;
}
.canvas-wrap.dragging{cursor:grabbing}
.canvas-wrap.dragging *{pointer-events:none}
.canvas-strip{display:flex;align-items:flex-start;gap:18px;padding:18px 22px 20px;width:max-content}
.canvas-col{width:272px;flex:none;display:flex;flex-direction:column;gap:8px}
.canvas-col .wf{margin-left:0}
/* medium-aware column widths: fixed/landscape screens are not phones */
.canvas-col.md-web,.canvas-col.md-kiosk{width:480px}
.canvas-col.md-physical{width:400px}
.canvas-col .wf-web,.canvas-col .wf-plain{max-width:none;width:100%}
/* kiosk / seatback / TV: landscape panel with a bezel */
.wf-kiosk{
  width:100%;height:340px;border-radius:14px;border:5px solid var(--line-2);
  display:flex;flex-direction:column;box-shadow:var(--shadow);
}
.wf-kiosk .wf-body{flex:1;min-height:0;overflow:hidden;padding:12px 16px;gap:8px}
.wf-kiosk .wfb-media{flex:1 1 auto;min-height:44px;max-height:55%}
.wf-kiosk .wfb-list,.wf-kiosk .wfb-chat,.wf-kiosk .wfb-cards,.wf-kiosk .wfb-gallery,.wf-kiosk .wfb-combos{min-height:0;flex-shrink:1;overflow:hidden}
.wf-kiosk .wfb-button{padding:12px;font-size:13px}
.canvas-head{display:flex;align-items:center;gap:6px;min-height:22px}
.canvas-head .t{
  font-size:14px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;
}
.canvas-head .del{flex:none;background:none;border:0;box-shadow:none;color:var(--ink-3);font-size:12px;cursor:pointer;padding:2px 4px}
.canvas-head .del:hover{color:var(--accent)}
.canvas-say{display:flex;gap:8px;align-items:baseline;border-left:2px solid var(--accent);padding:4px 8px;background:var(--panel);border-radius:0 8px 8px 0}
.canvas-say .mark{font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;font-size:9px;letter-spacing:.08em;color:var(--accent);flex:none}
.canvas-say p{margin:0;font-size:12.5px;color:var(--ink);font-style:italic;line-height:1.45}
.canvas-hop{
  flex:none;align-self:center;max-width:120px;
  font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;font-size:10px;line-height:1.5;color:var(--ink-3);
  background:var(--panel);border:1px dashed var(--line-2);border-radius:8px;padding:6px 9px;text-align:center;
}
.canvas-notetoggle{
  align-self:flex-start;background:none;border:0;cursor:pointer;padding:0 2px;
  font-size:11px;color:var(--ink-3);font-family:inherit;
}
.canvas-notetoggle:hover{color:var(--accent)}
.canvas-col .noterow{display:flex;flex-direction:column;gap:6px;align-items:stretch}
.canvas-col .noterow .btn{align-self:flex-start}
.canvas-col.ghost .ghostphone{
  width:100%;max-width:300px;height:430px;border:1.5px dashed var(--line-2);border-radius:18px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  color:var(--ink-3);font-size:12px;text-align:center;padding:0 24px;
}
.canvas-col.ghost.md-web .ghostphone,.canvas-col.ghost.md-kiosk .ghostphone{max-width:none;height:340px;border-radius:14px}
.canvas-col.ghost .ghostphone p{margin:0;line-height:1.5}

/* per-screen spoken line + entry context; honest media placeholder */
.screen-say{
  display:flex;gap:10px;align-items:baseline;margin-left:32px;
  border-left:2px solid var(--accent);padding:4px 10px;background:var(--panel-2);border-radius:0 8px 8px 0;
}
.screen-say .mark{font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;font-size:9px;letter-spacing:.08em;color:var(--accent);flex:none}
.screen-say p{margin:0;font-size:13.5px;color:var(--ink);font-style:italic;line-height:1.45}
.flow-bet{margin:10px 0 4px;margin-left:0}
.flow-bet p{font-weight:600}
.screen-entry{
  font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--ink-3);letter-spacing:.03em;padding-left:32px;
}
.screen-entry b{color:var(--ink-2);font-weight:500}
.wfb-media{min-height:64px;padding:10px}
.wf-mobile .wfb-media{flex:1 1 auto;min-height:54px;max-height:42%}
.wfb-media span{white-space:normal;text-align:center;line-height:1.4;max-width:90%}

/* ---- Screens: script view (text column to redraw from) + immersive medium ---- */
.wf-script{max-width:none;width:100%;padding:12px 14px 14px;font-size:13px;color:var(--ink-2)}
.wf-script .sc-head{font-weight:600;color:var(--ink);margin-bottom:8px;font-size:14px;line-height:1.3}
.wf-script .sc-med{font-weight:500;color:var(--ink-3);font-size:11px;text-transform:uppercase;letter-spacing:.06em;margin-left:6px}
.wf-script ol{margin:0;padding:0 0 0 18px;display:flex;flex-direction:column;gap:6px}
.wf-script li{line-height:1.4}
.wf-script li b{font-weight:600;color:var(--ink);margin-right:6px}
.wf-script .sc-label{color:var(--ink-2)}
.wf-script .sc-items{display:block;color:var(--ink-3);font-size:12px;margin-top:1px}
.wf-script li.sc-idea{border-left:2px solid var(--accent);padding-left:8px;margin-left:-10px}
.wf-script .sc-star{margin-left:6px;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.canvas-col.md-immersive{width:400px}
.wf-immersive{max-width:none;width:100%;border-radius:24px}
.canvas-col.ghost.md-immersive .ghostphone{max-width:none;height:300px;border-radius:24px}
.wf-script .sc-entry{color:var(--ink-3);font-size:12px;margin:-4px 0 8px;font-style:italic}

/* ---- touch layout: nav buttons fill the width, bigger tap targets ---- */
@media (max-width:620px){
  /* one button spans the row, two (or more) split it evenly and wrap when they no longer fit */
  .stage-nav .btn,
  .nextrow .btn{
    flex:1 1 0;min-width:min(100%,120px);min-height:52px;
    padding:14px 18px;font-size:16px;border-radius:18px;
  }
  .nextrow{gap:10px;align-items:stretch}   /* a two-line label must not shrink its neighbour */
  /* the main action (Sketch the flow / Redo) takes its own row; the toggles share the next one */
  .nextrow .btn:first-child{flex-basis:100%}
  /* Apply sits next to a text field — stays a compact pill, just easier to hit */
  .otherrow .btn.tiny{flex:none;min-height:44px;padding:10px 18px;font-size:12px}

  /* Screens: one screen per swipe. Desktop columns (272px) are unreadable on a phone —
     each column takes the width of the viewport, with a sliver of the next one showing so
     it is obvious the flow continues sideways. */
  .canvas-strip{gap:12px;padding:14px 16px 16px}
  .canvas-col,
  .canvas-col.md-web,.canvas-col.md-kiosk,.canvas-col.md-physical,.canvas-col.md-immersive{
    width:min(86vw,340px);
  }
  .canvas-wrap{scroll-snap-type:x proximity;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .canvas-col{scroll-snap-align:center}
  .canvas-hop{align-self:center}
  .btn.tipbtn{min-height:42px;padding:10px 16px;font-size:13px}
}
/* the programmatic jump to the top of a new stage must win over scroll anchoring */
.stage-wrap{overflow-anchor:none;min-width:0}
.blocks,.blocks > *{min-width:0}   /* long nowrap children scroll inside themselves, never widen the page */

/* ============================ ACCESS GATE + ACCOUNT ============================ */
.gate{position:fixed;inset:0;z-index:100;background:var(--paper);display:flex;align-items:center;justify-content:center;padding:24px}
.gate[hidden]{display:none}
.gate-card{
  width:min(380px,100%);background:var(--panel);border:1px solid var(--line-2);border-radius:18px;
  padding:28px 26px 22px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px;margin:0;
}
.gate-card .brand{margin:0 0 12px}
.gate-card h2{margin:0;font-size:22px;font-weight:600;letter-spacing:-.01em}
.gate-card p{margin:0 0 8px;color:var(--ink-3);font-size:13.5px;line-height:1.45}
.gate-input{
  font-size:16px;letter-spacing:.14em;text-transform:uppercase;padding:11px 14px;
  border:1px solid var(--line-2);border-radius:12px;background:var(--paper);color:var(--ink);outline:none;width:100%;
}
.gate-input::placeholder{letter-spacing:.14em;color:var(--ink-3)}
.gate-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.gate-card .btn.pri{padding:10px 16px;font-size:14px}
.gate-err{min-height:18px;font-size:12.5px;color:var(--over)}
.gate-foot{font-size:12px;color:var(--ink-3)}
body.gated .app{visibility:hidden}

.modal{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:60;
  width:min(440px,92vw);background:var(--panel);border:1px solid var(--line-2);border-radius:18px;
  box-shadow:var(--shadow);padding:16px 20px 16px;display:flex;flex-direction:column;gap:14px;
}
.modal[hidden]{display:none}
.modal-head{display:flex;align-items:center;gap:10px}
.modal-head .lab{margin-right:auto}
.acct-plan{display:flex;align-items:center;gap:10px}
.acct-plan b{font-size:20px;font-weight:600;letter-spacing:-.01em}
.acct-badge,.acct-rows .soon span{
  font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-soft);padding:3px 8px;border-radius:980px;white-space:nowrap;
}
.acct-rows{margin:0;display:flex;flex-direction:column;border-top:1px solid var(--line)}
.acct-rows > div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.acct-rows dt{color:var(--ink-3)}
.acct-rows dd{margin:0;color:var(--ink);text-align:right}
.acct-rows .soon{color:var(--ink-3);display:flex;gap:8px;align-items:baseline}
.acct-rows .soon span{color:var(--ink-3);background:var(--panel-2)}
.acct-note{margin:0;font-size:12px;color:var(--ink-3);line-height:1.45}
.modal-foot{display:flex;justify-content:flex-end}