/* tutorials.css — shared component kit for how-to-use tutorials.
   Ported from the approved first-project exemplar
   (docs/superpowers/specs/assets/2026-06-02-first-project-exemplar.html).
   Page-level rules (design tokens, reset, html/body, paper noise, topbar/brand)
   are intentionally omitted — web/how-to-use.html provides them so tutorials
   inherit the app palette and all 7 themes. Bare-element selectors are scoped
   to .reading so they never leak onto the host page. */

/* Layout: step rail + reading column */
.tut{display:grid; grid-template-columns:84px minmax(0,1fr); gap:30px; max-width:908px; margin:0 auto; padding:8px 0 64px}
/* Progress spine: a bold, tall, sticky rail that ties the whole tutorial
   together and shows where you are. Step markers sit on a track whose amber
   fill advances as you move through the steps (driven by tutorials.js). */
.steprail{position:sticky; top:28px; align-self:start; height:calc(100vh - 130px); min-height:300px;
  display:flex; flex-direction:column; justify-content:flex-start; gap:14px; align-items:center}
.steprail__track{position:absolute; left:50%; top:20px; bottom:20px; width:4px; transform:translateX(-50%);
  border-radius:3px; background:var(--rule-soft)}
.steprail__fill{position:absolute; left:50%; top:20px; width:4px; transform:translateX(-50%);
  border-radius:3px; background:var(--amber); height:0; transition:height .3s ease}
.steprail a{position:relative; width:44px; height:44px; display:grid; place-items:center; border-radius:50%;
  font-family:var(--ff-mono); font-size:15px; font-weight:500; color:var(--ink-faint); text-decoration:none;
  border:2px solid var(--rule); background:var(--paper); transition:all .25s ease; z-index:2}
.steprail a.done{color:var(--amber); border-color:var(--amber)}
.steprail a.active{color:#fff; background:var(--amber); border-color:var(--amber);
  box-shadow:0 0 0 6px var(--amber-soft); transform:scale(1.1)}
.steprail a{cursor:pointer}
.steprail a:hover{border-color:var(--amber)}
/* synthesized section-dot spine (Concept / Tour / Reference) */
.steprail--dots a{width:16px; height:16px; border-width:2px; font-size:0}
.steprail--dots a.done{background:var(--amber); border-color:var(--amber)}
.steprail--dots a.active{background:var(--amber); border-color:var(--amber);
  box-shadow:0 0 0 5px var(--amber-soft); transform:scale(1.5)}
.reading{max-width:760px}

/* Hero */
.eyebrow{font-family:var(--ff-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--amber); margin:0 0 14px}
.reading h1{font-family:var(--ff-display); font-weight:500; font-size:46px; line-height:1.08; letter-spacing:-.02em; margin:0 0 16px; color:var(--ink)}
.reading h1[tabindex="-1"]:focus{outline:none}
.dek{font-size:19px; line-height:1.5; color:var(--ink-2); margin:0 0 22px; max-width:62ch}
.meta-row{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:0 0 14px}
.chip{display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border-radius:100px; background:var(--paper-2); border:1px solid var(--rule); font-size:13px; color:var(--ink-2); font-weight:500}
.chip b{color:var(--ink); font-weight:600}
.jump{font-size:13.5px; color:var(--ink-muted)}
.jump a{color:var(--amber); text-decoration:none; border-bottom:1px solid var(--amber-line)}
.jump a:hover{border-bottom-color:var(--amber)}

/* Outcome preview */
.preview{margin:36px 0 8px; padding:24px; background:linear-gradient(180deg,var(--paper-2),var(--paper)); border:1px solid var(--rule); border-radius:var(--r-xl); box-shadow:var(--shadow)}
.preview .label{font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin:0 0 12px}

/* Step blocks */
.step{padding:48px 0 8px; border-top:1px solid var(--rule-soft); margin-top:40px}
.step.in{animation:rise .6s ease both}
@keyframes rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.step.in{animation:none} html{scroll-behavior:auto} .typing i,.acard--work .dot,.spin{animation:none}}
.step:first-of-type{border-top:none}
.step__n{font-family:var(--ff-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--amber); font-weight:500; margin:0 0 8px}
.step h2{font-family:var(--ff-display); font-weight:500; font-size:30px; line-height:1.15; letter-spacing:-.015em; margin:0 0 14px; color:var(--ink)}
.step p{margin:0 0 16px; color:var(--ink-2); font-size:15.5px}
.step p strong{color:var(--ink); font-weight:600}
.result{display:flex; gap:10px; align-items:flex-start; margin:18px 0 4px; padding:12px 15px; background:var(--sage-soft); border:1px solid oklch(85% 0.04 150); border-radius:var(--r-lg); font-size:14px; color:var(--ink-2)}
.result b{color:var(--sage); font-weight:600}
.aside{margin:16px 0; padding:14px 16px 14px 18px; border-left:3px solid var(--amber-line); background:var(--amber-soft); border-radius:0 var(--r) var(--r) 0; font-size:13.5px; color:var(--ink-2)}
.aside .k{font-family:var(--ff-mono); font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--amber); display:block; margin-bottom:4px}
.aside--author{border-left-color:var(--slate); background:var(--slate-soft)}
.aside--author .k{color:var(--slate)}

/* Copyable prompt */
.prompt{display:flex; align-items:center; gap:12px; margin:8px 0 16px; padding:12px 14px; background:var(--ink); border-radius:var(--r-lg); box-shadow:var(--shadow)}
.prompt code{font-family:var(--ff-display); font-style:italic; font-size:15px; color:var(--paper); line-height:1.5; flex:1}
.prompt button{font-family:var(--ff-mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink); background:var(--paper-2); border:none; padding:7px 12px; border-radius:var(--r); cursor:pointer; white-space:nowrap; transition:background .2s}
.prompt button:hover{background:#fff}

/* ===== Recreated app UI (demo) ===== */
.demo-frame{margin:6px 0 30px; border:1px solid var(--rule); border-radius:var(--r-lg); overflow:hidden; background:#fff; box-shadow:0 1px 1px oklch(30% 0.02 70 / .05), 0 8px 18px oklch(30% 0.02 70 / .07), 0 20px 38px oklch(30% 0.02 70 / .08)}
.demo-bar{display:flex; align-items:center; gap:8px; padding:9px 12px; background:var(--paper-3); border-bottom:1px solid var(--rule)}
.demo-bar .dots{display:flex; gap:6px}
.demo-bar .dots i{width:9px;height:9px;border-radius:50%;background:var(--rule); display:block}
.demo-bar .url{flex:1; text-align:center; font-family:var(--ff-mono); font-size:10.5px; color:var(--ink-muted); background:var(--paper); border:1px solid var(--rule-soft); border-radius:100px; padding:3px 10px}
.annot{position:relative; display:flex; align-items:flex-start; gap:8px; margin:10px 0 0; font-size:12.5px; color:var(--ink-3)}
.annot .pin{flex:none; width:18px;height:18px;border-radius:50%;background:var(--amber);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:700;font-family:var(--ff-ui)}
.ring{box-shadow:0 0 0 2px var(--amber), 0 0 0 6px var(--amber-soft); border-radius:var(--r)}

/* three-rail mini */
.app{display:grid; grid-template-columns:128px minmax(0,1fr) 150px; height:300px; background:var(--paper); font-size:11px}
.app__rail{display:flex; flex-direction:column; background:var(--paper-2); overflow:hidden}
.app__rail--l{border-right:1px solid var(--rule)}
.app__rail--r{border-left:1px solid var(--rule); background:var(--paper-2)}
.app__center{display:flex; flex-direction:column; min-width:0; background:var(--paper)}
.rl-head{padding:9px 11px; border-bottom:1px solid var(--rule-soft); font-family:var(--ff-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); display:flex; justify-content:space-between; align-items:center}
.rl-body{flex:1; padding:9px; overflow:hidden}
.empty-note{color:var(--ink-faint); font-size:10.5px; font-style:italic; padding:8px 4px; line-height:1.5}

/* group + leaf */
.grp{margin-bottom:6px}
.grp__h{display:flex; justify-content:space-between; align-items:center; padding:5px 7px; font-family:var(--ff-mono); font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--c-idea); font-weight:500}
.leaf{display:grid; grid-template-columns:14px 1fr; gap:7px; align-items:center; padding:6px 8px; border-radius:var(--r-sm); background:oklch(62% 0.14 85 / .08); box-shadow:inset 2px 0 0 var(--c-idea)}
.leaf .g{color:var(--c-idea)}
.leaf .lb{font-size:11px; color:var(--ink); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.leaf--pop{animation:leafpop .6s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes leafpop{from{opacity:0; transform:translateY(-6px) scale(.96)} to{opacity:1; transform:none}}

/* messages */
.thread{flex:1; padding:11px 13px; overflow:hidden; display:flex; flex-direction:column; gap:11px}
.sys{font-size:10.5px; color:var(--ink-muted); background:var(--paper-2); border:1px solid var(--rule-soft); border-radius:var(--r); padding:7px 9px; line-height:1.5}
.sys b{color:var(--ink-2)}
.m{display:flex; gap:8px; align-items:flex-start}
.m--u{flex-direction:row-reverse}
.av{flex:none; width:24px;height:24px;border-radius:6px; display:grid;place-items:center; font-size:11px}
.av--u{background:var(--ink); color:var(--paper); font-family:var(--ff-mono); font-size:8px; font-weight:600}
.av--idea{background:oklch(62% 0.14 85 / .16); border:1px solid oklch(62% 0.14 85 / .35)}
.av--coordinator{background:oklch(48% 0.02 60 / .14); border:1px solid oklch(48% 0.02 60 / .4)}
.av--outline{background:oklch(55% 0.07 200 / .16); border:1px solid oklch(55% 0.07 200 / .38)}
.av--writer{background:oklch(48% 0.08 25 / .16); border:1px solid oklch(48% 0.08 25 / .38)}
.bub{max-width:78%}
.who{font-size:9.5px; color:var(--ink-muted); font-family:var(--ff-mono); margin:0 0 3px}
.tx{font-family:var(--ff-display); font-size:12px; line-height:1.5; color:var(--ink)}
.m--u .tx{background:var(--ink); color:var(--paper); padding:7px 10px; border-radius:var(--r); border-bottom-right-radius:2px; display:inline-block}
.typing{display:inline-flex; gap:4px; padding:6px 2px}
.typing i{width:5px;height:5px;border-radius:50%;background:var(--ink-faint); animation:bnc 1.1s infinite ease-in-out}
.typing i:nth-child(2){animation-delay:.15s} .typing i:nth-child(3){animation-delay:.3s}
@keyframes bnc{0%,80%,100%{transform:translateY(0); opacity:.5} 40%{transform:translateY(-4px); opacity:1}}

/* composer */
.comp{border-top:1px solid var(--rule-soft); padding:9px 11px}
.comp__m{display:flex; flex-wrap:wrap; gap:4px; align-items:center; margin-bottom:7px}
.comp__m .lbl{font-family:var(--ff-mono); font-size:8.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted); margin-right:2px}
.mc{font-family:var(--ff-mono); font-size:9.5px; padding:3px 7px; border-radius:100px; border:1px solid var(--rule); background:var(--paper); color:var(--ink-2)}
.mc--on{border-color:var(--c-idea); background:oklch(62% 0.14 85 / .1); color:var(--c-idea); font-weight:500}
.mc--lock{opacity:.45}
.comp__hint{font-family:var(--ff-mono); font-size:8.5px; color:var(--ink-faint); margin-left:2px}
.comp__box{border:1px solid var(--rule); border-radius:var(--r); background:var(--paper); padding:8px 10px; min-height:34px; font-family:var(--ff-display); font-size:12px; color:var(--ink-3)}
.comp__box.is-typed{color:var(--ink)}
.comp__act{display:flex; justify-content:space-between; align-items:center; margin-top:7px}
.comp__kb{font-family:var(--ff-mono); font-size:8.5px; color:var(--ink-faint)}
.sendbtn{font-family:var(--ff-ui); font-size:11px; font-weight:600; color:#fff; background:var(--amber); border:none; padding:6px 14px; border-radius:var(--r); cursor:pointer; box-shadow:var(--shadow-sm); transition:transform .12s, filter .2s}
.sendbtn:hover{filter:brightness(1.05)} .sendbtn:active{transform:translateY(1px)}
.sendbtn:disabled{background:var(--rule); color:var(--ink-faint); cursor:default; box-shadow:none}

/* agent card */
.acard{border:1px solid var(--rule-soft); border-radius:var(--r); background:var(--paper); padding:7px 8px; margin-bottom:6px}
.acard__top{display:flex; align-items:center; gap:6px}
.acard .dot{width:7px;height:7px;border-radius:50%;background:var(--ink-faint)}
.acard .nm{font-size:10px; font-weight:600; color:var(--ink-2)}
.acard .st{margin-left:auto; font-family:var(--ff-mono); font-size:8px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint)}
.acard--work{border-color:var(--amber-line); background:linear-gradient(180deg,var(--amber-soft),var(--paper)); box-shadow:0 0 0 1px var(--amber-line)}
.acard--work .dot{background:var(--amber); animation:pf .9s infinite}
.acard--work .nm{color:var(--ink)}
.acard--work .st{color:var(--amber)}
.acard--lock{opacity:.45}
.acard__work{margin-top:5px; font-size:9.5px; color:var(--ink-2); display:flex; align-items:center; gap:5px}
.spin{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--amber-line); border-top-color:var(--amber); animation:sp .9s linear infinite}
@keyframes pf{0%,100%{box-shadow:0 0 0 0 var(--amber-soft)} 50%{box-shadow:0 0 0 4px transparent}}
@keyframes sp{to{transform:rotate(360deg)}}

/* modal recreation */
.scene{position:relative; background:repeating-linear-gradient(45deg,var(--paper-2),var(--paper-2) 12px,var(--paper-3) 12px,var(--paper-3) 24px); padding:26px; display:grid; place-items:center}
.modal{width:100%; max-width:380px; background:var(--paper); border:1px solid var(--rule); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); padding:20px}
.modal h4{font-family:var(--ff-display); font-weight:500; font-size:18px; margin:0 0 16px; color:var(--ink)}
.fld{margin-bottom:13px}
.fld > span{display:block; font-family:var(--ff-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted); margin-bottom:5px}
.in{border:1px solid var(--rule); border-radius:var(--r); padding:8px 10px; font-size:12.5px; color:var(--ink-3); background:var(--paper-2)}
.in--ph{color:var(--ink-faint)}
.typegrp{display:flex; gap:6px}
.tbtn{flex:1; text-align:center; padding:7px 4px; border:1px solid var(--rule); border-radius:var(--r); font-size:11px; color:var(--ink-2); background:var(--paper-2)}
.tbtn--on{border-color:var(--amber); background:var(--amber-soft); color:var(--amber); font-weight:600}
.modal__act{display:flex; justify-content:flex-end; gap:8px; margin-top:18px}
.mbtn{font-size:12px; padding:7px 14px; border-radius:var(--r); border:1px solid var(--rule); background:var(--paper); color:var(--ink-2); font-weight:500}
.mbtn--go{background:var(--amber); border-color:var(--amber); color:#fff; font-weight:600}

/* follow-along banner */
.followalong{display:flex; gap:12px; align-items:flex-start; margin:30px 0 0; padding:16px 18px; background:var(--amber-soft); border:1px solid var(--amber-line); border-radius:var(--r-lg)}
.followalong .fa-ic{flex:none; width:26px;height:26px;border-radius:50%;background:var(--amber);color:#fff;display:grid;place-items:center;font-size:11px}
.followalong b{color:var(--ink)}
/* pipeline flow diagram */
.flow{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:8px 0 18px; padding:18px; background:var(--paper-2); border:1px solid var(--rule); border-radius:var(--r-lg)}
.fnode{display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 12px; background:#fff; border:1px solid var(--rule); border-radius:var(--r); font-family:var(--ff-mono); font-size:11px; color:var(--ink-2); min-width:76px; text-align:center; box-shadow:var(--shadow-sm)}
.fnode .fi{font-size:18px}
.fnode--ag{border-color:var(--ac); box-shadow:inset 0 -2px 0 var(--ac); color:var(--ink); font-family:var(--ff-ui); font-weight:600}
.farrow{display:flex; flex-direction:column; align-items:center; color:var(--ink-muted); font-size:9px; font-family:var(--ff-mono); text-transform:uppercase; letter-spacing:.03em; line-height:1.2; text-align:center}
.farrow::after{content:"→"; font-size:16px; color:var(--amber); line-height:1; margin-top:2px}
/* multi-group left rail */
.grp--idea .grp__h{color:var(--c-idea)} .grp--idea .leaf{background:oklch(62% 0.14 85 / .08); box-shadow:inset 2px 0 0 var(--c-idea)} .grp--idea .leaf .g{color:var(--c-idea)}
.grp--outline .grp__h{color:var(--c-outline)} .grp--outline .leaf{background:oklch(55% 0.07 200 / .08); box-shadow:inset 2px 0 0 var(--c-outline)} .grp--outline .leaf .g{color:var(--c-outline)}
.grp--draft .grp__h{color:var(--c-writer)} .grp--draft .leaf{background:oklch(48% 0.08 25 / .08); box-shadow:inset 2px 0 0 var(--c-writer)} .grp--draft .leaf .g{color:var(--c-writer)}
/* success */
.success{display:flex; gap:14px; align-items:flex-start; margin:44px 0 8px; padding:20px 22px; background:linear-gradient(180deg,var(--sage-soft),var(--paper)); border:1px solid oklch(82% 0.05 150); border-radius:var(--r-xl)}
.success .tick{flex:none; width:34px;height:34px;border-radius:50%;background:var(--sage); color:#fff; display:grid;place-items:center; font-size:17px}
.success h3{font-family:var(--ff-display); font-weight:500; font-size:20px; margin:0 0 5px; color:var(--ink)}
.success p{margin:0; font-size:14px; color:var(--ink-2)}

/* self-check + troubleshooting (details) */
details.card{margin:14px 0; border:1px solid var(--rule); border-radius:var(--r-lg); background:var(--paper-2); overflow:hidden}
details.card > summary{list-style:none; cursor:pointer; padding:14px 16px; font-weight:600; font-size:14.5px; color:var(--ink); display:flex; align-items:center; gap:10px}
details.card > summary::-webkit-details-marker{display:none}
details.card > summary .tw{margin-left:auto; transition:transform .2s; color:var(--ink-muted)}
details.card[open] > summary .tw{transform:rotate(90deg)}
details.card .body{padding:0 16px 16px; font-size:14px; color:var(--ink-2)}
.qbadge{font-family:var(--ff-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--amber); background:var(--amber-soft); border:1px solid var(--amber-line); padding:3px 8px; border-radius:100px}
.ts-item{padding:13px 0; border-top:1px solid var(--rule-soft)}
.ts-item:first-child{border-top:none}
.ts-item b{color:var(--ink); display:block; margin-bottom:3px; font-size:14px}
.ts-item span{font-size:13.5px; color:var(--ink-2)}

/* whats next */
.next{margin:40px 0 0}
.next h3{font-family:var(--ff-display); font-weight:500; font-size:24px; margin:0 0 16px; color:var(--ink)}
.nextgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px}
.ncard{display:block; text-decoration:none; padding:18px; background:var(--paper-2); border:1px solid var(--rule); border-radius:var(--r-lg); transition:all .2s; color:inherit}
.ncard:hover{transform:translateY(-2px); border-color:var(--amber); box-shadow:var(--shadow)}
.ncard .ic{font-size:20px; margin-bottom:9px}
.ncard .t{font-weight:600; font-size:14.5px; color:var(--ink); margin-bottom:4px}
.ncard .d{font-size:12.5px; color:var(--ink-muted); line-height:1.5}
.ncard .mt{font-family:var(--ff-mono); font-size:10px; color:var(--amber); margin-top:9px; text-transform:uppercase; letter-spacing:.04em}

@media(max-width:720px){
  .tut{grid-template-columns:1fr; gap:0}
  .steprail{display:none}
  .reading h1{font-size:34px}
}

/* single-column tutorials (Tour / Concept / Reference). Default to one column
   (no-JS safe); tutorials.js adds .spined when it synthesizes a section-dot
   spine, switching to the same 2-col layout the Walkthroughs use. */
.tut--solo{grid-template-columns:1fr; max-width:760px}
.tut--solo.spined{grid-template-columns:84px minmax(0,1fr); max-width:874px}
/* ≤720px the progress spine is display:none; collapse the solo grid back to one
   column so .reading doesn't auto-place into the now-empty 84px spine track
   (the @media .tut reset above loses on specificity to .tut--solo.spined). */
@media (max-width:720px){.tut--solo.spined{grid-template-columns:1fr; max-width:760px}}

/* ===== Reference archetype: card gallery ===== */
/* A tier section groups identical-shape cards under a labeled header.
   --accent is passed per-card (e.g. style="--accent:var(--c-idea)") and
   falls back to --ink-muted when an agent has no defined accent var. */
.reftier{margin:34px 0 0}
.reftier__h{display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; margin:0 0 4px}
.reftier__h h2{font-family:var(--ff-display); font-weight:500; font-size:24px; line-height:1.15; letter-spacing:-.015em; margin:0; color:var(--ink)}
.reftier__h .lock{font-family:var(--ff-mono); font-size:11px; letter-spacing:.04em; color:var(--ink-muted)}
.reftier__sub{margin:0 0 16px; font-size:14px; color:var(--ink-2); max-width:62ch}

.refgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; margin:0}
.refcard{--accent:var(--ink-muted);
  display:flex; flex-direction:column; gap:9px;
  padding:16px 16px 15px; background:var(--paper-2);
  border:1px solid var(--rule); border-top:3px solid var(--accent);
  border-radius:var(--r-lg); box-shadow:var(--shadow-sm)}
.refcard__head{display:flex; align-items:center; gap:10px}
.refcard__icon{flex:none; width:30px; height:30px; border-radius:var(--r);
  display:grid; place-items:center; font-size:16px; line-height:1;
  background:var(--paper); border:1px solid var(--rule-soft)}
.refcard__name{font-family:var(--ff-ui); font-weight:600; font-size:15px; color:var(--ink); line-height:1.2}
.refcard__role{margin:0; font-size:13.5px; color:var(--ink-2); line-height:1.45}
.refcard__when{margin:0; font-size:13px; color:var(--ink-2); line-height:1.45}
.refcard__when b{font-family:var(--ff-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:3px; font-weight:500}
.refcard__prompt{margin:2px 0 0; padding:9px 11px; background:var(--ink); border-radius:var(--r);
  font-family:var(--ff-display); font-style:italic; font-size:13px; line-height:1.45; color:var(--paper); word-break:break-word}
.refcard__tier{align-self:flex-start; margin-top:auto; padding-top:2px;
  font-family:var(--ff-mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)}

/* ===== Best-practice margin notes (sidenotes) ===== */
/* A "noted" tutorial widens its column so .sidenote blocks can lift into the
   right whitespace (positioned by tutorials.js placeSidenotes, with a dashed
   connector to the block they follow). Default styling is the inline fallback
   used on narrow screens / without JS. Author rule: place each .sidenote
   immediately AFTER a full-width content block (a paragraph or a recreation),
   never a heading or section boundary, so the connector lands on real content. */
.tut--noted{max-width:1180px}
.tut--solo.tut--noted{max-width:1180px}   /* noted width wins over .spined for noted Concepts */
.tut--noted .reading{max-width:none; position:relative}
.tut--noted .reading > *{max-width:680px}
.content-container.tutorial-view.has-sidenotes{max-width:1180px}
.sidenote{box-sizing:border-box; max-width:680px; margin:14px 0;
  font-size:12.5px; line-height:1.55; color:var(--ink-2);
  border-left:2px solid var(--amber-line); background:var(--amber-soft);
  border-radius:0 var(--r) var(--r) 0; padding:10px 13px}
.sidenote .k{display:block; font-family:var(--ff-mono); font-size:9px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--amber); margin-bottom:5px}
.tut--noted svg.sn-links{position:absolute; inset:0; width:100%; pointer-events:none;
  overflow:visible; color:var(--amber-2); z-index:0}
/* In noted tutorials, fade step entrances with OPACITY ONLY. A transform (the
   default 'rise' animation) creates a containing block, which would re-parent
   absolutely-positioned sidenotes to the step (mis-aligning them, and shifting
   them when a step animates into view on scroll). Opacity creates no such block. */
@keyframes sn-fade{from{opacity:0} to{opacity:1}}
.tut--noted .step.in{animation-name:sn-fade}
/* Steps visible at init skip the entrance animation — prevents the opacity-0 flash from
   animation-fill-mode:both when .in is added asynchronously to already-visible content. */
.step.in--now,.tut--noted .step.in--now{animation:none}
.refcard__tier .pill{display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:100px;
  background:var(--paper); border:1px solid var(--rule); color:var(--ink-2); font-weight:500}
.refcard__more{display:inline-block; margin-top:10px; font-family:var(--ff-mono); font-size:11px;
  text-transform:uppercase; letter-spacing:.04em; color:var(--amber); text-decoration:none}
.refcard__more:hover{text-decoration:underline}

/* ============================================================
   First-paper walkthrough (#first-paper) — scholarly on-ramp.
   Tutorial-scoped recreations for the two interactive demos.
   Namespaced .fp-* so they never collide with the real
   ui-citations.jsx component classes in styles.css. Tokens
   (--sage, --amber-line, --c-editor, …) come from how-to-use.html :root.
   ============================================================ */
.fp-predict{display:flex; gap:10px; align-items:flex-start; margin:14px 0; padding:11px 14px;
  background:var(--amber-soft); border:1px dashed var(--amber-line); border-radius:var(--r);
  font-size:13px; color:var(--ink-2); line-height:1.55}
.fp-predict .k{font-family:var(--ff-mono); font-size:9px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--amber); font-weight:600; flex:none; padding-top:2px}
.fp-token{font-family:var(--ff-mono); font-size:12.5px; background:var(--amber-soft);
  border:1px solid var(--amber-line); color:var(--amber); padding:1px 6px; border-radius:4px; white-space:nowrap}
.fp-rendered{font-family:var(--ff-ui); font-size:13px; font-weight:600; color:var(--sage);
  background:var(--sage-soft); padding:1px 6px; border-radius:4px; white-space:nowrap}
.fp-ref{display:flex; align-items:flex-start; gap:10px; padding:11px 13px; background:#fff;
  border:1px solid var(--rule); border-left:3px solid var(--c-editor); border-radius:var(--r); margin-top:12px}
.fp-ref__body{flex:1; min-width:0}
.fp-ref__title{font-size:12.5px; color:var(--ink); font-weight:600; line-height:1.4}
.fp-ref__meta{font-family:var(--ff-mono); font-size:10.5px; color:var(--ink-muted); margin-top:3px}
.fp-badge{font-family:var(--ff-mono); font-size:10px; font-weight:600; padding:3px 8px; border-radius:100px;
  white-space:nowrap; flex:none}
.fp-badge--ok{background:var(--sage-soft); border:1px solid oklch(85% 0.04 150); color:var(--sage)}
.fp-bib{font-family:var(--ff-display); font-size:13px; color:var(--ink-2); padding:10px 13px 10px 29px;
  margin-top:10px; background:var(--paper-2); border-radius:var(--r); text-indent:-16px; line-height:1.5}
.fp-spin{display:flex; align-items:center; gap:9px; margin-top:12px; font-size:12.5px; color:var(--ink-muted)}
.fp-verdict{margin-top:12px; padding:13px 15px; background:#fff; border:1px solid var(--rule);
  border-left:3px solid var(--sage); border-radius:var(--r)}
.fp-verdict__head{display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--ink)}
.fp-verdict__tag{font-family:var(--ff-mono); font-size:10px; font-weight:600; color:var(--sage);
  padding:2px 8px; border-radius:100px; background:var(--sage-soft); border:1px solid oklch(85% 0.04 150); white-space:nowrap}
.fp-verdict__quote{font-family:var(--ff-display); font-style:italic; font-size:12.5px; color:var(--ink-2);
  margin-top:8px; padding-left:11px; border-left:2px solid var(--rule)}
.fp-verdict__note{font-size:11.5px; color:var(--ink-muted); margin-top:8px; line-height:1.5}

/* The .fp-* / .sendbtn / .spin classes above are the shared interactive-demo kit
   (first authored for first-paper, now reused by body-of-work + finish-draft). */

/* body-of-work (#body-of-work, Step 3) — "shared base, private verdicts" paper
   switcher. Switching the active paper swaps the per-paper reports panel while
   the shared research-base panel stays pinned. */
.bw-tabs{display:flex; gap:6px; margin-bottom:12px}
.bw-tab{font-family:var(--ff-ui); font-size:12px; font-weight:600; padding:6px 14px; border-radius:100px;
  background:#fff; border:1px solid var(--rule); color:var(--ink-2); cursor:pointer}
.bw-tab.active{background:var(--amber-soft); border-color:var(--amber); color:var(--amber)}
.bw-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:560px){.bw-grid{grid-template-columns:1fr}}
.bw-panel{background:#fff; border:1px solid var(--rule); border-radius:var(--r); padding:11px 13px}
.bw-panel__h{font-family:var(--ff-mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-muted); margin-bottom:9px; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.bw-pin{font-family:var(--ff-ui); font-size:9.5px; font-weight:600; text-transform:none; letter-spacing:0;
  padding:2px 7px; border-radius:100px; background:oklch(52% 0.08 240 / .1); color:var(--c-research);
  border:1px solid oklch(52% 0.08 240 / .25)}
.bw-rep{display:flex; justify-content:space-between; gap:10px; align-items:baseline; padding:6px 0;
  font-size:12px; border-top:1px solid var(--rule)}
.bw-rep:first-of-type{border-top:0}
.bw-rep__k{font-family:var(--ff-mono); font-size:10px; color:var(--ink-muted)}
.bw-rep__v{color:var(--ink-2); text-align:right}
.bw-empty{font-size:12px; color:var(--ink-muted); font-style:italic; padding:6px 0}

/* finish-draft (#finish-draft) — import review canvas (Step 1): drop a mis-split
   front-matter row, merge an over-split, watch the section tally update. */
.fd-row{display:grid; grid-template-columns:auto 1fr auto auto; gap:10px; align-items:center;
  padding:7px 11px; border:1px solid var(--rule); border-radius:var(--r); background:var(--paper-2)}
.fd-ctl{font-family:var(--ff-ui); font-size:10.5px; font-weight:600; padding:3px 9px; border-radius:100px;
  background:#fff; border:1px solid var(--rule); color:var(--ink-2); cursor:pointer}
.fd-ctl:disabled{opacity:.4; cursor:default}
.fd-row--dropped{opacity:.4; text-decoration:line-through}
.fd-row--merged{display:none}

/* finish-draft — prose-citation scan (Step 3): matched author-year cites convert
   to verified [@key]; an unmatched one is surfaced (never dropped or invented). */
.fd-flag{font-family:var(--ff-mono); font-size:10px; font-weight:600; padding:2px 7px; border-radius:100px;
  background:var(--amber-soft); border:1px solid var(--amber); color:var(--amber); white-space:nowrap}
.fd-scan-readout{margin-top:12px; font-size:12.5px; color:var(--ink-2); line-height:1.6;
  padding:10px 13px; background:#fff; border:1px solid var(--rule); border-radius:var(--r)}

/* ============================================================
   "Meet your workspace" (#first-project, Step 2) — interactive
   region tips. Hovering/focusing a rail highlights it (signaling)
   and pops a detail card anchored over it (spatial contiguity).
   Pure CSS, scoped to .app.wk so no other demo app is affected;
   the .annot map below the frame is the always-on baseline for
   touch / keyboard / no-hover, so nothing is lost without pointer.
   ============================================================ */
.app.wk{position:relative}
.app.wk .app__rail--l,.app.wk .app__center,.app.wk .app__rail--r{
  cursor:help; outline:none; transition:box-shadow .18s ease, opacity .18s ease}
/* signaling: ring the active (hovered/focused) region */
.app.wk .app__rail--l:hover,.app.wk .app__center:hover,.app.wk .app__rail--r:hover,
.app.wk .app__rail--l:focus-within,.app.wk .app__center:focus-within,.app.wk .app__rail--r:focus-within{
  box-shadow:inset 0 0 0 2px var(--amber)}
/* limelight: hovering the app dims every region; the hovered one brightens back, so attention
   lands on a single subject. The keyboard path runs only when the pointer is away (`:not(:hover)`),
   so hover always wins and exactly one region is ever active — one card at a time. */
.app.wk:hover .app__rail--l,.app.wk:hover .app__center,.app.wk:hover .app__rail--r,
.app.wk:not(:hover):focus-within .app__rail--l,.app.wk:not(:hover):focus-within .app__center,.app.wk:not(:hover):focus-within .app__rail--r{
  opacity:.4}
.app.wk .app__rail--l:hover,.app.wk .app__center:hover,.app.wk .app__rail--r:hover,
.app.wk:not(:hover) .app__rail--l:focus-within,.app.wk:not(:hover) .app__center:focus-within,.app.wk:not(:hover) .app__rail--r:focus-within{
  opacity:1}
/* the detail card sits BESIDE its subject (over a dimmed neighbour) so the subject stays fully
   visible. Columns are 128px / 1fr / 150px: the left & right cards float over the centre, and the
   centre card floats over the right rail. */
.wktip{position:absolute; top:44px; z-index:6; width:208px; max-width:calc(100% - 16px);
  background:var(--ink); color:var(--paper); border-radius:var(--r-lg); padding:11px 13px;
  box-shadow:var(--shadow-lg); opacity:0; pointer-events:none; transition:opacity .18s ease}
.wktip--l{left:138px}
.wktip--r{right:158px}
.wktip--c{right:4px; width:195px}  /* covers a sliver of centre's right edge for a comfortable width */
.wktip__h{display:block; font-family:var(--ff-mono); font-size:9px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--amber-2); margin-bottom:5px}
.wktip__b{font-family:var(--ff-display); font-size:12.5px; line-height:1.5; color:var(--paper)}
.wktip__b b{color:#fff; font-weight:600}
/* side caret pointing back at the subject region */
.wktip::after{content:""; position:absolute; top:16px; width:10px; height:10px;
  background:var(--ink); transform:rotate(45deg)}
.wktip--l::after{left:-5px}
.wktip--r::after{right:-5px}
.wktip--c::after{left:-5px}
/* reveal exactly one card: the hovered region's, or — pointer away — the focused region's */
.app.wk .app__rail--l:hover ~ .wktip--l,.app.wk .app__center:hover ~ .wktip--c,.app.wk .app__rail--r:hover ~ .wktip--r,
.app.wk:not(:hover) .app__rail--l:focus-within ~ .wktip--l,.app.wk:not(:hover) .app__center:focus-within ~ .wktip--c,.app.wk:not(:hover) .app__rail--r:focus-within ~ .wktip--r{
  opacity:1}
@media (prefers-reduced-motion:reduce){
  .app.wk .app__rail--l,.app.wk .app__center,.app.wk .app__rail--r,.wktip{transition:none}
}

/* ============================================================
   Generic region/control hover-tip primitive (house pattern).
   Layout-agnostic sibling to the 3-rail `.app.wk` flavor above.
   `.wk-spot` = any hover/keyboard-focusable target: lights an
   amber signaling outline and reveals an OPTIONAL `.wk-tip` child
   card anchored over it (spatial contiguity). No `.wk-tip` child
   = a ring-only spotlight (pure signaling; adjacent prose carries
   the "what"). The `.annot` row below each frame stays the
   always-on touch / keyboard / no-hover baseline.
   Outline (not box-shadow) is used for the ring so it never
   clobbers a target's own box-shadow (e.g. import slots / skill
   leaf coloured left bars).
   ============================================================ */
.wk-spot{position:relative; cursor:help; border-radius:3px;
  outline:2px solid transparent; outline-offset:1px; transition:outline-color .18s ease}
.wk-spot:hover,.wk-spot:focus-within{outline-color:var(--amber)}
.wk-tip{position:absolute; z-index:6; top:calc(100% + 8px); left:0;
  width:220px; max-width:calc(100vw - 40px);
  background:var(--ink); color:var(--paper); border-radius:var(--r-lg);
  padding:10px 12px; box-shadow:var(--shadow-lg);
  opacity:0; pointer-events:none; transition:opacity .18s ease}
.wk-tip--right{left:auto; right:0}
.wk-tip--above{top:auto; bottom:calc(100% + 8px)}
.wk-tip__h{display:block; font-family:var(--ff-mono); font-size:9px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--amber-2); margin-bottom:4px}
.wk-tip__b{font-family:var(--ff-display); font-size:12.5px; line-height:1.5; color:var(--paper)}
.wk-tip__b b{color:#fff; font-weight:600}
.wk-tip::after{content:""; position:absolute; left:18px; width:10px; height:10px;
  background:var(--ink); transform:rotate(45deg)}
.wk-tip--right::after{left:auto; right:18px}
.wk-tip:not(.wk-tip--above)::after{top:-5px}
.wk-tip--above::after{bottom:-5px}
.wk-spot:hover > .wk-tip,.wk-spot:focus-within > .wk-tip{opacity:1}
@media (prefers-reduced-motion:reduce){ .wk-spot,.wk-tip{transition:none} }

/* ============================================================
   Interface Tour (#interface-tour) — single-rail mockups (Left /
   Right rails) reveal a wktip-style detail card in the RIGHT MARGIN
   on hover/focus. Same dark-card family as the #first-project .wktip
   tips, but margin-placed so the card never covers the narrow mockup
   it describes. The card is the always-visible inline baseline <680px.
   ============================================================ */
.wktipwrap{position:relative; width:max-content; max-width:100%; margin:6px 0 30px}
.wktipwrap .demo-frame{margin:0}
.wktipwrap:focus{outline:none}
/* signaling: amber ring on the mockup while engaged (outline preserves the drop shadow) */
.wktipwrap:hover .demo-frame,
.wktipwrap:focus-within .demo-frame{outline:2px solid var(--amber); outline-offset:-2px}
/* "interactive" hint pill; fades once engaged */
.wktipwrap__hint{position:absolute; left:9px; bottom:9px; z-index:5;
  font-family:var(--ff-mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase;
  background:var(--amber); color:#fff; border-radius:100px; padding:3px 8px;
  box-shadow:var(--shadow-lg); pointer-events:none; transition:opacity .18s ease}
.wktipwrap:hover .wktipwrap__hint,
.wktipwrap:focus-within .wktipwrap__hint{opacity:0}
/* margin-placed variant of .wktip (inherits dark bg, header, body, hidden state) */
.wktip--side{top:0; left:100%; right:auto; transform:none; margin-left:20px; width:230px}
.wktip--side::after{top:18px; left:-5px; right:auto}            /* base caret, repointed left */
.wktip--side::before{content:""; position:absolute; left:-20px; top:22px; width:20px;
  border-top:2px dashed var(--amber)}                            /* connector across the gap */
.wktipwrap:hover .wktip--side,
.wktipwrap:focus-within .wktip--side{opacity:1}
/* lead-in line before an annotation — bound to what follows by proximity */
.step__lead{margin:32px 0 8px}
/* narrow: the card becomes a static, always-visible note below the mockup */
@media (max-width:680px){
  .wktipwrap{width:auto}
  .wktipwrap__hint{display:none}
  .wktipwrap:hover .demo-frame,.wktipwrap:focus-within .demo-frame{outline:none}
  .wktip--side{position:static; opacity:1; width:auto; max-width:none; margin:8px 0 0; pointer-events:auto}
  .wktip--side::after,.wktip--side::before{display:none}
}
@media (prefers-reduced-motion:reduce){.wktipwrap__hint{transition:none}}