/* DECIDE shared puzzle harness.
   Every puzzle runs the same ten beats. This is the look of those beats.
   Anything here must be true of ALL ten puzzles. Stage art and its transitions
   belong to the puzzle page, not to this file. */

:root{
  --canvas:#fbfbf6;--surface:#fff;--surface-2:#f3f7ef;--line:#e4eadf;--edge:#7d8b82;
  --fg:#17281d;--muted:#5e7367;--ink:#169e57;--gold:#c79200;--danger:#dc2626;
  --pencil:#5f7268;--pencil-line:#b9c5bd;--frame:#fff;--stroke:#c3cfc7;--water:#169e5714;--gold-ink:#8a6500;
  --brass:#a8791f;
  /* AA-safe TEXT colors. Raw --ink/--gold stay for borders, SVG fills, focus rings, meter bar (3:1). */
  --on-gold:#241a05;--ink-text:#0b7a41;
  --font-display:Georgia,"Iowan Old Style","Times New Roman",serif;
  --font-body:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root{--canvas:#06110c;--surface:#0b1a12;--surface-2:#11271a;--line:#1e3527;--edge:#71897b;
  --fg:#e9f4ec;--muted:#8ba89a;--ink:#2fd27a;--gold:#f5c542;--danger:#fb7185;
  --pencil:#8fa79a;--pencil-line:#43554b;--frame:#08150f;--stroke:#294435;--water:#2fd27a14;--gold-ink:#f5c542;
  --brass:#f5c542;--on-gold:#241a05;--ink-text:#2fd27a;}
}
:root[data-theme="dark"]{--canvas:#06110c;--surface:#0b1a12;--surface-2:#11271a;--line:#1e3527;--edge:#71897b;
  --fg:#e9f4ec;--muted:#8ba89a;--ink:#2fd27a;--gold:#f5c542;--danger:#fb7185;
  --pencil:#8fa79a;--pencil-line:#43554b;--frame:#08150f;--stroke:#294435;--water:#2fd27a14;--gold-ink:#f5c542;
  --brass:#f5c542;--on-gold:#241a05;--ink-text:#2fd27a;}
:root[data-theme="light"]{--canvas:#fbfbf6;--surface:#fff;--surface-2:#f3f7ef;--line:#e4eadf;--edge:#7d8b82;
  --fg:#17281d;--muted:#5e7367;--ink:#169e57;--gold:#c79200;--danger:#dc2626;
  --pencil:#5f7268;--pencil-line:#b9c5bd;--frame:#fff;--stroke:#c3cfc7;--water:#169e5714;--gold-ink:#8a6500;
  --brass:#a8791f;--on-gold:#241a05;--ink-text:#0b7a41;}

*{box-sizing:border-box}
/* The page itself must never scroll sideways. Wide content scrolls inside its own box. */
html,body{overflow-x:hidden}
body{margin:0;background:var(--canvas);color:var(--fg);font-family:var(--font-body);
  font-size:1.0625rem;line-height:1.62;-webkit-font-smoothing:antialiased}
.wrap{max-width:840px;margin:0 auto;padding:0 22px 140px}
.eyebrow{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:0 0 6px}

header.top{padding:56px 0 28px;border-bottom:1px solid var(--line)}
header.top h1{font-family:var(--font-display);font-weight:400;font-size:clamp(2rem,5.5vw,3.1rem);
  line-height:1.03;margin:0 0 6px;letter-spacing:-.02em}
header.top .sub{color:var(--muted);margin:0;font-family:var(--font-display);font-style:italic}
.purpose-head{display:grid;gap:7px;margin:20px 0 0;padding:16px 18px;background:var(--surface-2);
  border-left:3px solid var(--ink);border-radius:2px;text-align:left}
.purpose-head p{margin:0;font-size:.92rem;line-height:1.45;color:var(--fg)}
.purpose-head strong{color:var(--ink-text)}
.purpose-head .principle-tag{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.purpose-head .principle-tag strong{color:var(--gold-ink)}
.optional-detail{margin:10px 0 0;font-size:.82rem;color:var(--muted)}
.skill-purpose{margin:18px 0 0;padding:18px 20px;border:1px solid var(--line);
  border-top:3px solid var(--gold);border-radius:2px;background:var(--surface)}
.skill-purpose .k{font-family:var(--font-mono);font-size:.7rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold-ink);margin-bottom:8px}
.skill-purpose p{margin:8px 0 0;font-size:.94rem;line-height:1.55;color:var(--fg)}
.skill-purpose p:first-of-type{margin-top:0}
.skill-purpose .pathway{color:var(--muted)}
.skill-purpose .source-line{font-size:.82rem;color:var(--muted)}
.skill-purpose strong{color:var(--fg)}
.skill-purpose a{color:var(--ink-text);font-weight:700}

/* ---------- "how this works" intro (injected on every puzzle) ---------- */
.intro{margin:22px 0 0;border:1px solid var(--line);border-radius:2px;background:var(--surface);overflow:hidden}
.intro summary{list-style:none;cursor:pointer;padding:16px 20px;font-family:var(--font-mono);
  font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-text);
  display:flex;justify-content:space-between;align-items:center;gap:12px}
.intro summary::-webkit-details-marker{display:none}
.intro summary .chev{transition:transform .2s ease}
.intro[open] summary .chev{transform:rotate(90deg)}
.intro .body{padding:0 20px 20px;border-top:1px solid var(--line)}
.intro h4{font-family:var(--font-body);font-weight:700;font-size:.95rem;margin:16px 0 4px;color:var(--fg)}
.intro p{margin:0 0 6px;font-size:.96rem;color:var(--muted);max-width:62ch}
.intro p b{color:var(--fg);font-weight:700}
.intro .steps{display:grid;gap:10px;margin:12px 0 0}
.intro .stp{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline}
.intro .stp .k{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-ink);white-space:nowrap;padding-top:2px}

/* ---------- the analogy bridge (per-puzzle) ---------- */
.bridge{margin:22px 0 0;padding:16px 20px;background:var(--surface-2);border-left:3px solid var(--gold);border-radius:2px}
.bridge .k{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-ink);display:block;margin-bottom:6px}
.bridge p{margin:0;font-size:1rem;color:var(--fg);max-width:62ch}
.bridge p+p{margin-top:8px}

/* ---------- a small "why you're doing this" note under a task heading ---------- */
.why{margin:8px 0 14px;font-size:.92rem;color:var(--muted);max-width:60ch;font-style:italic}

/* ---------- persistent notebook reminder ---------- */
.noteflag{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.68rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--gold-ink)}
.noteflag .dot{width:6px;height:6px;border-radius:50%;background:var(--gold)}
.jot{margin:12px 0 0;padding:10px 14px;background:var(--surface-2);border:1px dashed var(--stroke);
  border-radius:2px;font-size:.9rem;color:var(--muted);display:flex;gap:10px;align-items:flex-start}
.jot .pen{color:var(--gold-ink);font-weight:700}

.meter{position:sticky;top:0;z-index:20;background:var(--canvas);
  border-bottom:1px solid var(--line);padding:10px 0;margin-bottom:8px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.meter .rank{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.meter .pts{font-family:var(--font-mono);font-size:.95rem;color:var(--ink-text);
  font-variant-numeric:tabular-nums}
.bar{flex:1;min-width:120px;height:3px;background:var(--line);border-radius:2px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--ink);transition:width .5s ease}

section.step{margin:44px 0 0;padding:30px 0 0;border-top:1px solid var(--line);scroll-margin-top:96px}
section.step[hidden]{display:none}
/* Gating never depends on the `hidden` attribute alone: a sanitiser that strips
   boolean attributes would otherwise unfold the whole puzzle, answers included. */
.gated{display:none !important}
[hidden]{display:none !important}
section.step h2{font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.35rem,3.2vw,1.85rem);line-height:1.15;margin:6px 0 14px;letter-spacing:-.01em}
section.step p{max-width:64ch}
.situation{font-size:1.1rem}
.driving{font-family:var(--font-display);font-size:1.2rem;line-height:1.4;
  border-left:3px solid var(--gold);padding:14px 20px;background:var(--surface-2);margin:22px 0 0;max-width:60ch}

.stage{margin:22px 0;padding:16px;background:var(--frame);border:1px solid var(--line);border-radius:2px;
  overflow-x:auto}
.stage svg{width:100%;height:auto;display:block}

/* ---------- the huddle ---------- */
.huddle{margin:28px 0 0;padding:26px 28px;border:1px solid var(--line);border-radius:2px;background:var(--surface)}
.huddle .voices{display:grid;gap:14px;margin:0 0 22px}
.voice{display:grid;grid-template-columns:130px 1fr;gap:16px;align-items:baseline}
@media(max-width:640px){.voice{grid-template-columns:1fr;gap:3px}}
.voice .who{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.voice .said{font-family:var(--font-display);font-size:1.18rem;line-height:1.35;margin:0}
.voice.narrator .who{color:var(--gold-ink)}
.voice.narrator .said{color:var(--fg)}
.voice.narrator .said b{color:var(--gold-ink);font-weight:400}

.watchrow{display:grid;gap:26px;align-items:center;margin:24px 0 0}
@media(min-width:700px){.watchrow{grid-template-columns:220px 1fr}}
.watch svg{width:100%;max-width:200px;height:auto;display:block;margin:0 auto}
.watch .readout{font-family:var(--font-mono);font-size:1.5rem;text-align:center;
  color:var(--brass);font-variant-numeric:tabular-nums;margin-top:6px}
.watch .caption{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);text-align:center;margin-top:4px}
.hand{transform-origin:100px 130px}
.arc{transform:rotate(-90deg);transform-origin:100px 130px}

.waitnote{font-size:.92rem;color:var(--muted);margin:0 0 12px;max-width:56ch}

.controls{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}
button{font-family:var(--font-body);font-size:.95rem;padding:11px 16px;border-radius:2px;
  border:1px solid var(--ink);background:transparent;color:var(--ink-text);cursor:pointer;
  transition:background .18s ease,color .18s ease}
button:hover:not(:disabled){background:var(--ink);color:var(--canvas)}
button:disabled{opacity:.34;cursor:not-allowed}
button.ghost{border-color:var(--edge);color:var(--muted)}
button.ghost:hover:not(:disabled){background:var(--surface-2);color:var(--fg)}
button.gold{border-color:var(--gold);color:var(--gold-ink)}
button.gold:hover:not(:disabled){background:var(--gold);color:var(--on-gold)}
button.done{border-color:var(--muted);color:var(--muted)}
button.justUnlocked{animation:unlockPulse 1s ease 2}
@keyframes unlockPulse{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 0 5px var(--surface-2)}}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
[tabindex="-1"]:focus{outline:none}

.choices{display:grid;gap:10px;margin:16px 0 0}
.choice{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid var(--edge);
  border-radius:2px;background:var(--surface);cursor:pointer}
.choice:hover{border-color:var(--ink)}
.choice input{margin-top:5px;accent-color:var(--ink)}
.choice.locked{cursor:default;opacity:.5}
.choice.locked.picked{opacity:1;border-color:var(--ink)}
.choice.wrong{border-color:var(--danger);border-style:dashed;opacity:1}

textarea{width:100%;min-height:96px;padding:14px;border:1px solid var(--edge);border-radius:2px;
  background:var(--surface);color:var(--fg);font-family:var(--font-body);font-size:1rem;
  line-height:1.55;resize:vertical}
textarea:focus{border-color:var(--ink)}
input[type=text]{width:100%;padding:12px 14px;border:1px solid var(--edge);border-radius:2px;
  background:var(--surface);color:var(--fg);font-family:var(--font-body);font-size:1rem}

.gate{margin:10px 0 0;font-size:.9rem;min-height:1.4em}
.gate.bad{color:var(--danger)}
.gate.ok{color:var(--ink-text)}
.gate.warn{color:var(--gold-ink)}
.gate code{font-family:var(--font-mono);background:var(--surface-2);padding:1px 5px;border-radius:2px}

/* Instrument readouts keep their column alignment (white-space:pre) and scroll inside their
   own box on a narrow screen, so a long line never runs off the page. */
.obs{margin:16px 0 0;padding:14px 18px;background:var(--surface-2);border-left:3px solid var(--stroke);
  font-family:var(--font-mono);font-size:.82rem;line-height:1.7;color:var(--fg);
  white-space:pre-wrap;overflow-wrap:break-word;overflow-x:auto}

.possibilities{display:grid;gap:16px;margin:22px 0 0}
@media(min-width:700px){.possibilities{grid-template-columns:1fr 1fr;gap:22px}}
.poss{padding:18px 20px;border:1px solid var(--gold);border-radius:2px;background:var(--surface)}
.poss h4{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-ink);margin:0 0 9px;font-weight:400}
.poss p{font-family:var(--font-display);font-size:1.08rem;margin:0}

/* ---------- the board ---------- */
.board{margin:30px 0 0;padding:24px;background:var(--surface-2);border:1px dashed var(--stroke);border-radius:2px}
.board h3{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0 0 4px;font-weight:400}
.board .sub{font-size:.88rem;color:var(--muted);margin:0 0 18px}
.cards{display:grid;gap:14px}
@media(min-width:700px){.cards{grid-template-columns:1fr 1fr}}
.pin{padding:16px 18px;background:var(--surface);border:1px solid var(--line);
  border-top:3px solid var(--gold);border-radius:2px}
.pin .from{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:7px}
.pin p{margin:0;font-size:.97rem;white-space:pre-line}
.whoami{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 18px}
.whoami div{flex:1;min-width:120px}
.whoami label{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);display:block;margin-bottom:5px}

.pencilbox{margin:20px 0 0;padding:18px 20px;background:var(--surface-2);
  border-left:3px solid var(--pencil-line);transition:border-color .6s ease}
.pencilbox .tag{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--pencil);display:block;margin-bottom:8px;transition:color .6s ease}
.pencilbox p{font-family:var(--font-display);font-style:italic;color:var(--pencil);
  font-size:1.15rem;margin:0;transition:opacity .9s ease,color .6s ease}
.pencilbox.erasing p{text-decoration:line-through;text-decoration-color:var(--pencil-line)}
.pencilbox.erased p{opacity:.14}
.pencilbox.confirmed{border-left-color:var(--ink)}
.pencilbox.confirmed .tag{color:var(--ink)}
.pencilbox.confirmed p{color:var(--fg);font-style:normal}

.inkbox{margin:20px 0 0;padding:22px 24px;background:var(--surface-2);border-left:3px solid var(--ink)}
.inkbox .tag{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);display:block;margin-bottom:9px}
.inkbox p{font-family:var(--font-display);font-size:1.25rem;line-height:1.4;margin:0;max-width:54ch}

.compare{display:grid;gap:20px;margin:22px 0 0}
@media(min-width:760px){.compare{grid-template-columns:1fr 1fr;gap:26px}}
.compare .col{padding:18px 20px;border:1px solid var(--line);border-radius:2px;background:var(--surface)}
.compare .col h3{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:0 0 10px;font-weight:400}
.compare .col.theirs{border-color:var(--pencil-line)}
.compare .col.ours{border-color:var(--ink)}
.compare .col p{font-family:var(--font-display);font-size:1.08rem;margin:0}

ul.parts{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:1px}
ul.parts li{padding:14px 0;border-bottom:1px solid var(--line);display:grid;
  grid-template-columns:auto 1fr;gap:14px}
ul.parts .mark{color:var(--ink);font-family:var(--font-mono);font-size:.85rem;padding-top:3px}
ul.parts span.why{display:block;color:var(--muted);font-size:.94rem;margin-top:3px}

.toast{position:fixed;right:20px;bottom:20px;z-index:60;display:grid;gap:8px;max-width:330px}
.toast .t{background:var(--surface);border:1px solid var(--ink);border-left-width:3px;
  border-radius:2px;padding:12px 15px;box-shadow:0 8px 24px -14px rgba(0,0,0,.5);animation:slide .4s ease}
.toast .t .lbl{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink);display:flex;justify-content:space-between;gap:12px}
.toast .t p{margin:5px 0 0;font-size:.9rem;color:var(--muted);max-width:none}
@keyframes slide{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}

.card{margin:26px 0 0;padding:26px;border:1px solid var(--ink);border-radius:2px;background:var(--surface)}
.card .hdr{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);margin-bottom:14px}
.card .rule{font-family:var(--font-display);font-size:1.3rem;line-height:1.4;margin:0 0 18px}
.card .from{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.note{font-size:.9rem;color:var(--muted);margin-top:14px}
.optional-bridge{margin-top:16px;border:1px solid var(--line);border-radius:2px;background:var(--surface-2)}
.optional-bridge summary{cursor:pointer;padding:12px 14px;font-family:var(--font-mono);font-size:.7rem;
  font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-text)}
.optional-bridge .note{margin:0;padding:0 14px 14px}

/* ---------- the path (Scene 0 and the Close) ---------- */
.path{display:grid;gap:14px;margin:26px 0 0}
.rung{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;
  padding:18px 20px;border:1px solid var(--line);border-radius:2px;background:var(--surface);
  text-decoration:none;color:inherit}
a.rung:hover{border-color:var(--ink)}
.rung .n{font-family:var(--font-mono);font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}
.rung h3{font-family:var(--font-display);font-weight:400;font-size:1.2rem;margin:0 0 3px}
.rung p{margin:0;font-size:.92rem;color:var(--muted);max-width:52ch}
.rung .state{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-text);white-space:nowrap}
.rung.soon{opacity:.55}
.rung.soon .state{color:var(--muted)}

@media (prefers-reduced-motion:reduce){
  /* The springy rises and staggered fades are exactly the motion class that triggers
     vestibular sensitivity. Collapse everything, and stay collapsed when new
     transitions are added later. */
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}
@media print{
  body *{visibility:hidden}
  .card,.card *{visibility:visible}
  /* Force light values: browsers drop the dark page background at print but keep the near-white
     card text, which would print invisible for a dark-mode student. */
  .card{position:absolute;left:0;top:0;width:100%;border:2px solid #000;
    background:#fff !important;color:#111 !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .card .hdr,.card .rule{color:#111 !important}
  .card .from{color:#333 !important}
}