/* Phrasebook — CareCompile.
   Full-width shell: a persistent rail carries progress and navigation, the
   working area beside it holds one scenario at a time. Prose keeps a measure
   even when the window does not. */

:root{
  --paper:#f7f4ee; --panel:#fffdfa; --sunk:#f2eee6; --ink:#141e26; --ink-soft:#4d5f6c;
  --ink-faint:#8496a3; --rule:#e4dfd4; --rule-soft:#efeae0;
  --accent:#8a3324; --accent-ink:#4d1d14; --accent-wash:#f5eae6;
  --good:#2c6a4e; --good-wash:#e6f0ea; --good-rule:#c9e0d3;
  --warn:#8a6320; --warn-wash:#f6eedd; --warn-rule:#e6d5b0;
  --shadow:0 1px 2px rgba(20,30,38,.04), 0 10px 30px -18px rgba(20,30,38,.35);
  --shadow-lift:0 2px 4px rgba(20,30,38,.05), 0 20px 44px -22px rgba(20,30,38,.4);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --radius:16px; --rail:300px; --gut:34px; --bar:57px;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#11171c; --panel:#19212a; --sunk:#151d25; --ink:#e9eef2; --ink-soft:#a7b6c2;
    --ink-faint:#6f8090; --rule:#2a3540; --rule-soft:#222c35;
    --accent:#e08b76; --accent-ink:#f3cec3; --accent-wash:#2c2220;
    --good:#6fc79b; --good-wash:#1b2a24; --good-rule:#2f4c3e;
    --warn:#d9b26a; --warn-wash:#2a2418; --warn-rule:#4a3d24;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px -18px rgba(0,0,0,.85);
    --shadow-lift:0 2px 4px rgba(0,0,0,.35), 0 20px 44px -22px rgba(0,0,0,.9);
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:5px}

/* ================================================================== topbar */
.topbar{position:fixed;inset:0 0 auto 0;height:var(--bar);z-index:50;
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--rule);display:flex;align-items:center}
.topbar .inner{width:100%;padding:0 var(--gut);display:flex;align-items:center;gap:16px}
.wordmark{font-family:var(--serif);font-size:20px;font-weight:600;letter-spacing:-.012em;
  text-decoration:none;display:flex;align-items:baseline;gap:9px;white-space:nowrap}
.wordmark small{font-family:var(--sans);font-size:9.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-faint)}
.topbar .spacer{flex:1}
.whoami{font-size:12.5px;color:var(--ink-faint);display:flex;align-items:center;gap:14px;white-space:nowrap}
.whoami b{color:var(--ink-soft);font-weight:600}
.whoami a{color:var(--ink-faint);text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:1px}
.whoami a:hover{color:var(--ink);border-color:var(--ink-faint)}

/* =================================================================== shell */
.shell{padding-top:var(--bar);display:grid;grid-template-columns:var(--rail) minmax(0,1fr);
  align-items:start;min-height:100dvh}
.rail{position:sticky;top:var(--bar);align-self:start;max-height:calc(100dvh - var(--bar));
  overflow-y:auto;padding:26px var(--gut) 40px;border-right:1px solid var(--rule);
  background:var(--sunk);scrollbar-width:thin}
main{padding:26px var(--gut) 96px;min-width:0}

/* ==================================================================== rail */
.eyebrow{font-size:10px;letter-spacing:.19em;text-transform:uppercase;color:var(--ink-faint);
  font-weight:700;margin:0 0 11px}
.rail h1{font-family:var(--serif);font-size:29px;line-height:1.06;margin:0 0 10px;
  letter-spacing:-.02em;font-weight:600}
.rail .lede{font-family:var(--serif);font-size:14.5px;line-height:1.48;color:var(--ink-soft);margin:0}
.rail-sec{margin-top:26px;padding-top:22px;border-top:1px solid var(--rule)}
.rail-sec:first-of-type{border-top:0}
.rail-lbl{font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--ink-faint);margin:0 0 11px}

.stat{display:flex;align-items:center;gap:13px;margin-bottom:11px}
.ring{width:40px;height:40px;flex:none;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:5;stroke-linecap:round}
.ring .track{stroke:var(--rule)}
.ring .fill{stroke:var(--good);transition:stroke-dasharray .5s ease}
.stat .n{font-family:var(--serif);font-size:18.5px;font-weight:600;line-height:1.15;display:block;
  font-variant-numeric:tabular-nums}
.stat .l{font-size:11.5px;color:var(--ink-faint);line-height:1.3;display:block}

nav.tabs{display:flex;flex-direction:column;gap:2px}
nav.tabs button{border:0;background:transparent;font:inherit;font-size:14.5px;font-weight:600;
  color:var(--ink-soft);padding:10px 13px;border-radius:9px;cursor:pointer;transition:.16s;
  text-align:left;display:flex;align-items:center;gap:10px}
nav.tabs button svg{width:16px;height:16px;flex:none;opacity:.7}
nav.tabs button:hover{background:var(--rule-soft);color:var(--ink)}
nav.tabs button[aria-selected="true"]{background:var(--ink);color:var(--paper)}
nav.tabs button[aria-selected="true"] svg{opacity:1}

/* filters as a rail list */
.filters{display:flex;flex-direction:column;gap:1px}
.filters button{border:0;background:transparent;font:inherit;font-size:13.5px;color:var(--ink-soft);
  padding:7px 11px;border-radius:8px;cursor:pointer;transition:.14s;display:flex;align-items:center;
  gap:8px;text-align:left;width:100%}
.filters button:hover{background:var(--rule-soft);color:var(--ink)}
.filters button[aria-pressed="true"]{background:var(--panel);color:var(--ink);font-weight:600;
  box-shadow:var(--shadow)}
.filters .c{margin-left:auto;font-size:11px;color:var(--ink-faint);font-variant-numeric:tabular-nums}

.dots{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.dots button{aspect-ratio:1;border-radius:7px;border:1px solid var(--rule);background:var(--panel);
  font:inherit;font-size:11px;font-weight:600;color:var(--ink-faint);cursor:pointer;
  font-variant-numeric:tabular-nums;transition:.14s;padding:0}
.dots button:hover{border-color:var(--ink-faint);color:var(--ink)}
.dots button.got{background:var(--good-wash);border-color:var(--good-rule);color:var(--good)}
.dots button.work{background:var(--warn-wash);border-color:var(--warn-rule);color:var(--warn)}
.dots button.here{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.legend{display:flex;gap:13px;margin-top:12px;font-size:11px;color:var(--ink-faint);flex-wrap:wrap}
.legend i{width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:5px;vertical-align:-1px}
.legend .g{background:var(--good)} .legend .w{background:var(--warn)}

/* ================================================================ practice */
.meta{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 13px;
  font-size:12px;color:var(--ink-faint)}
.track-tag{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--accent)}
.num{font-variant-numeric:tabular-nums}

.stage{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}
@media (min-width:1180px){
  .stage{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)}
  .stage .card.aside{position:sticky;top:calc(var(--bar) + 26px)}
}

.card{background:var(--panel);border:1px solid var(--rule);border-radius:var(--radius);
  padding:32px;box-shadow:var(--shadow-lift)}
.card.aside{background:var(--sunk);box-shadow:var(--shadow)}
.situation{max-width:64ch}
.situation p{font-family:var(--serif);font-size:18.5px;line-height:1.6;margin:0 0 17px;color:var(--ink)}
.situation p:last-child{margin-bottom:0}
.situation p.quote{padding-left:18px;border-left:3px solid var(--accent);font-style:italic;
  color:var(--accent);font-size:20.5px;line-height:1.42}

.turn{display:flex;flex-direction:column;gap:15px}
.turn .instr{font-size:14.5px;color:var(--ink-soft);line-height:1.5;margin:0;max-width:46ch}
.steps{list-style:none;margin:4px 0 0;padding:0;counter-reset:step}
.steps li{position:relative;padding-left:32px;margin-bottom:11px;font-size:14px;
  color:var(--ink-soft);line-height:1.45;counter-increment:step}
.steps li:last-child{margin-bottom:0}
.steps li::before{content:counter(step);position:absolute;left:0;top:-1px;width:21px;height:21px;
  border-radius:50%;background:var(--panel);border:1px solid var(--rule);color:var(--ink-faint);
  font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.turn kbd{font-family:var(--mono);font-size:11px;background:var(--panel);border:1px solid var(--rule);
  border-bottom-width:2px;border-radius:5px;padding:1px 6px;color:var(--ink-soft)}

.reveal{animation:rise .32s cubic-bezier(.2,.7,.3,1) both}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.reveal{animation:none}}
.lbl{font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--ink-faint);margin:0 0 11px}
.answer{font-family:var(--serif);font-size:19px;line-height:1.56;background:var(--accent-wash);
  border-radius:12px;padding:21px 23px;margin:0;color:var(--accent-ink);max-width:56ch}
.block{margin-top:26px}
.termlist{display:flex;flex-wrap:wrap;gap:6px}
.termlist button{font-family:var(--mono);font-size:12px;background:var(--panel);color:var(--ink-soft);
  padding:6px 11px;border-radius:7px;border:1px solid var(--rule);cursor:pointer;transition:.14s}
.termlist button:hover{border-color:var(--accent);color:var(--accent)}
.avoid{font-size:15px;line-height:1.6;color:var(--ink-soft);margin:0;padding-left:16px;
  border-left:2px solid var(--rule);max-width:56ch}

/* ================================================================= buttons */
.btn{border:0;background:var(--ink);color:var(--paper);font:inherit;font-size:14px;font-weight:600;
  padding:12px 22px;border-radius:10px;cursor:pointer;transition:.16s;display:inline-flex;
  align-items:center;justify-content:center;gap:8px;white-space:nowrap}
.btn:hover{opacity:.88}
.btn:active{transform:translateY(1px)}
.btn.big{padding:14px 26px;font-size:15px;align-self:flex-start}
.btn.ghost{background:var(--panel);color:var(--ink-soft);border:1px solid var(--rule)}
.btn.ghost:hover{color:var(--ink);border-color:var(--ink-faint);opacity:1}
.btn[disabled]{opacity:.3;cursor:default;transform:none}
.btn svg,.iconbtn svg{width:15px;height:15px;flex:none}
.iconbtn{border:1px solid var(--rule);background:var(--panel);color:var(--ink-soft);font:inherit;
  font-size:13px;font-weight:600;padding:9px 14px;border-radius:9px;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;transition:.16s}
.iconbtn:hover{border-color:var(--ink-faint);color:var(--ink)}
.iconbtn.on-good{background:var(--good-wash);border-color:var(--good-rule);color:var(--good)}
.iconbtn.on-warn{background:var(--warn-wash);border-color:var(--warn-rule);color:var(--warn)}

.footbar{position:sticky;bottom:0;margin-top:20px;padding:14px 0;
  background:linear-gradient(to top, var(--paper) 62%, transparent);
  display:flex;gap:9px;align-items:center;flex-wrap:wrap;z-index:20}
.footbar .spacer{flex:1}
.rate{display:flex;gap:8px}

/* =================================================================== words */
.wordbar{display:flex;gap:10px;align-items:center;margin-bottom:20px;flex-wrap:wrap}
.search{flex:1;min-width:230px;border:1px solid var(--rule);background:var(--panel);border-radius:11px;
  padding:12px 15px;font:inherit;font-size:15px;color:var(--ink);box-shadow:var(--shadow)}
.search::placeholder{color:var(--ink-faint)}
.search:focus{outline:2px solid var(--ink);outline-offset:-1px}
.group-head{font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--ink-faint);margin:30px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--rule);
  grid-column:1/-1}
.group-head:first-child{margin-top:0}
.termgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:11px;
  align-items:start}
.term{background:var(--panel);border:1px solid var(--rule);border-radius:13px;padding:20px 22px;
  box-shadow:var(--shadow);transition:.16s;height:100%}
.term.known{background:var(--good-wash);border-color:var(--good-rule)}
.term-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.written{font-family:var(--serif);font-size:22px;font-weight:600;margin:0;letter-spacing:-.014em}
.spoken{font-family:var(--mono);font-size:12.5px;color:var(--accent);background:var(--accent-wash);
  padding:3px 8px;border-radius:6px}
.term .track-tag{margin-left:auto;font-size:9.5px}
.meaning{font-family:var(--serif);font-size:16.5px;line-height:1.55;margin:13px 0 0}
.inuse{font-size:14.5px;line-height:1.55;margin:12px 0 0;padding-left:15px;
  border-left:2px solid var(--rule);color:var(--ink-soft);font-style:italic}
.term-actions{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.term.veiled .meaning,.term.veiled .inuse,.term.veiled .spoken{filter:blur(5px);opacity:.55;
  cursor:pointer;user-select:none;transition:.2s}
.term.veiled.open .meaning,.term.veiled.open .inuse,.term.veiled.open .spoken{filter:none;opacity:1}
.empty{text-align:center;color:var(--ink-faint);font-size:15px;padding:56px 0;font-family:var(--serif);
  grid-column:1/-1}

/* =================================================================== login */
.login-page{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px}
.login{width:100%;max-width:395px}
.login .brand{text-align:center;margin-bottom:26px}
.login h1{font-family:var(--serif);font-size:40px;line-height:1.02;margin:0 0 9px;
  letter-spacing:-.02em;font-weight:600}
.login .brand p{font-family:var(--serif);color:var(--ink-soft);margin:0;font-size:15.5px}
.login form{background:var(--panel);border:1px solid var(--rule);border-radius:var(--radius);
  padding:27px;box-shadow:var(--shadow-lift)}
.field{margin-bottom:15px}
.field label{display:block;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  font-weight:700;color:var(--ink-faint);margin-bottom:8px}
.field input{width:100%;border:1px solid var(--rule);background:var(--paper);border-radius:10px;
  padding:12px 14px;font:inherit;font-size:16px;color:var(--ink)}
.field input:focus{outline:2px solid var(--ink);outline-offset:-1px}
.login .btn{width:100%;padding:13px}
.alert{background:var(--accent-wash);color:var(--accent-ink);border:1px solid var(--accent);
  border-radius:10px;padding:11px 14px;font-size:13.5px;margin-bottom:16px;line-height:1.45}
.login-foot{text-align:center;font-size:12px;color:var(--ink-faint);margin-top:20px;line-height:1.6}

/* =================================================================== admin */
.page-head{margin-bottom:26px}
.page-head h1{font-family:var(--serif);font-size:34px;line-height:1.05;margin:0 0 10px;
  letter-spacing:-.02em;font-weight:600}
.page-head .lede{font-family:var(--serif);font-size:17px;color:var(--ink-soft);margin:0;max-width:52ch}
table.grid{width:100%;border-collapse:collapse;font-size:14.5px;background:var(--panel);
  border:1px solid var(--rule);border-radius:13px;overflow:hidden;box-shadow:var(--shadow)}
table.grid th{text-align:left;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);padding:13px 16px;border-bottom:1px solid var(--rule);font-weight:700}
table.grid td{padding:14px 16px;border-bottom:1px solid var(--rule-soft);vertical-align:middle}
table.grid tr:last-child td{border-bottom:0}
.minibar{height:5px;background:var(--rule);border-radius:3px;overflow:hidden;min-width:110px;
  margin-top:6px;max-width:220px}
.minibar i{display:block;height:100%;background:var(--good);border-radius:3px}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.pill{display:inline-block;font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:999px;
  background:var(--warn-wash);color:var(--warn);border:1px solid var(--warn-rule);margin:2px 4px 2px 0}

/* ================================================================== footer */
footer{margin-top:52px;padding-top:24px;border-top:1px solid var(--rule);font-size:12.5px;
  color:var(--ink-faint);line-height:1.65;max-width:70ch}
footer p{margin:0 0 9px}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(90px);
  background:var(--ink);color:var(--paper);font-size:13px;font-weight:600;padding:11px 20px;
  border-radius:999px;box-shadow:var(--shadow-lift);transition:transform .28s cubic-bezier(.2,.7,.3,1);
  z-index:60;pointer-events:none}
.toast.show{transform:translateX(-50%) translateY(0)}

/* ============================================================== responsive */
@media (max-width:1000px){
  :root{--gut:22px}
  .shell{grid-template-columns:minmax(0,1fr)}
  .rail{position:static;max-height:none;overflow:visible;border-right:0;
    border-bottom:1px solid var(--rule);padding:20px var(--gut) 20px}
  .rail-sec{margin-top:18px;padding-top:16px}
  .rail h1{font-size:26px;margin-bottom:0}
  .rail .lede{display:none}
  .rail .eyebrow{display:none}
  .rail-lbl{margin-bottom:9px}
  .stat{display:inline-flex;margin:0 22px 0 0}
  .legend{margin-top:9px}
  nav.tabs{flex-direction:row;background:var(--rule-soft);padding:4px;border-radius:12px;
    border:1px solid var(--rule)}
  nav.tabs button{flex:1;justify-content:center;padding:9px}
  .filters{flex-direction:row;flex-wrap:wrap;gap:6px}
  .filters button{width:auto;border:1px solid var(--rule);background:var(--panel);border-radius:999px;
    padding:6px 13px;font-size:12.5px}
  .filters .c{margin-left:5px}
  .filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
  .filters button[aria-pressed="true"] .c{color:inherit;opacity:.6}
  .dots{display:flex;overflow-x:auto;gap:6px;padding-bottom:4px;scrollbar-width:none}
  .dots::-webkit-scrollbar{display:none}
  .dots button{flex:none;width:34px;height:34px;aspect-ratio:auto;font-size:12px}
  main{padding-bottom:26px}
  .footbar{position:sticky;bottom:0;background:var(--paper);border-top:1px solid var(--rule);
    padding:12px var(--gut);margin:20px calc(var(--gut) * -1) 0}
}
@media (max-width:620px){
  :root{--gut:15px}
  .card{padding:21px}
  .situation p{font-size:17px} .situation p.quote{font-size:18px}
  .answer{font-size:17px;padding:17px 18px}
  .termgrid{grid-template-columns:minmax(0,1fr)}
  .footbar .spacer{display:none}
  .rate{width:100%;order:3}
  .rate .iconbtn{flex:1;justify-content:center}
  .whoami{gap:10px;font-size:12px}
}

/* ================================================================= phrases */
.phrasegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:11px;
  align-items:start}
.phrasegrid .group-head{grid-column:1/-1}
.phrase{background:var(--panel);border:1px solid var(--rule);border-radius:13px;padding:20px 22px;
  box-shadow:var(--shadow);height:100%}
.phrase-say{font-family:var(--serif);font-size:18px;line-height:1.5;margin:0;color:var(--accent-ink);
  background:var(--accent-wash);border-radius:10px;padding:15px 17px}
.phrase-why{font-size:14px;line-height:1.55;color:var(--ink-soft);margin:13px 0 0;padding-left:14px;
  border-left:2px solid var(--rule)}

/* ================================================================ drawings */
.drawing{background:var(--panel);border:1px solid var(--rule);border-radius:var(--radius);
  padding:26px 28px;box-shadow:var(--shadow);margin-bottom:16px}
.figure{margin:20px 0 22px;padding:20px;background:var(--sunk);border:1px solid var(--rule);
  border-radius:12px;overflow-x:auto}
.figure svg{width:100%;min-width:640px;height:auto;display:block}
.d-b{fill:var(--panel);stroke:var(--ink-faint);stroke-width:1.5}
.d-b2{fill:var(--accent-wash);stroke:var(--accent);stroke-width:1.5}
.d-b3{fill:var(--sunk);stroke:var(--rule);stroke-width:1.5}
.d-b4{fill:none;stroke:var(--rule);stroke-width:1.5;stroke-dasharray:5 4}
.d-b5{fill:var(--good-wash);stroke:var(--good-rule);stroke-width:1.5}
.d-t{fill:var(--ink);font-family:var(--sans);font-size:14px;font-weight:600;text-anchor:middle}
.d-s{fill:var(--ink-faint);font-family:var(--sans);font-size:11.5px;text-anchor:middle}
.d-l{fill:var(--ink-faint);font-family:var(--sans);font-size:11.5px;text-anchor:middle}
.d-h{fill:var(--ink-soft);font-family:var(--sans);font-size:12.5px;font-weight:700;
  letter-spacing:.05em}
.d-a{stroke:var(--ink-faint);stroke-width:1.6;fill:none}
.d-ah{fill:var(--ink-faint)}

/* =============================================================== questions */
.quizcard{max-width:900px}
.question{font-family:var(--serif);font-size:21px;line-height:1.45;margin:0 0 22px;
  letter-spacing:-.01em}
.options{display:grid;gap:9px}
.option{display:flex;align-items:flex-start;gap:13px;text-align:left;border:1px solid var(--rule);
  background:var(--paper);border-radius:11px;padding:14px 16px;font:inherit;font-size:15.5px;
  color:var(--ink);cursor:pointer;transition:.15s;line-height:1.45}
.option:hover:not([disabled]){border-color:var(--ink-faint);background:var(--panel)}
.option[disabled]{cursor:default;opacity:.62}
.opt-key{flex:none;width:23px;height:23px;border-radius:6px;background:var(--rule-soft);
  color:var(--ink-faint);font-size:11.5px;font-weight:700;display:flex;align-items:center;
  justify-content:center;margin-top:1px}
.option.right{border-color:var(--good);background:var(--good-wash);opacity:1}
.option.right .opt-key{background:var(--good);color:var(--panel)}
.option.wrong{border-color:var(--accent);background:var(--accent-wash);opacity:1}
.option.wrong .opt-key{background:var(--accent);color:var(--panel)}
.q-why{margin-top:22px;padding-top:20px;border-top:1px solid var(--rule);
  animation:rise .3s cubic-bezier(.2,.7,.3,1) both}
.q-why p:last-child{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink-soft);
  max-width:70ch}
.q-why.good .lbl{color:var(--good)}
.q-why.bad .lbl{color:var(--accent)}

/* ================================================================ planning */
.guidegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:13px;
  align-items:start}
.guide{background:var(--panel);border:1px solid var(--rule);border-radius:var(--radius);
  padding:24px 26px;box-shadow:var(--shadow);height:100%}
.guide-when{font-size:13.5px;color:var(--ink-faint);margin:6px 0 18px;font-style:italic}
.guide .steps li{font-size:15px;color:var(--ink);margin-bottom:13px}
.guide-good{margin-top:20px;padding:15px 17px;background:var(--good-wash);
  border:1px solid var(--good-rule);border-radius:11px}
.guide-good .lbl{color:var(--good);margin-bottom:7px}
.guide-good p:last-child{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-soft)}

/* =============================================================== semantics */
#sem-body{max-width:76ch}
.sem-intro{font-family:var(--serif);font-size:18.5px;line-height:1.6;color:var(--ink);
  margin:0 0 17px}
.sem-sec{background:var(--panel);border:1px solid var(--rule);border-radius:var(--radius);
  padding:26px 28px;box-shadow:var(--shadow);margin-top:14px}
.sem-sec .written{margin-bottom:12px}
.sem-list{margin:16px 0 0;padding:0;list-style:none}
.sem-list li{position:relative;padding-left:22px;margin-bottom:11px;font-size:15px;
  line-height:1.55;color:var(--ink-soft)}
.sem-list li:last-child{margin-bottom:0}
.sem-list li::before{content:"";position:absolute;left:2px;top:9px;width:6px;height:6px;
  border-radius:50%;background:var(--accent)}

.muted{color:var(--ink-faint);font-size:13px}
@media (max-width:620px){
  .phrasegrid,.guidegrid{grid-template-columns:minmax(0,1fr)}
  .drawing,.guide,.sem-sec{padding:20px}
  .figure{padding:12px}
  .question{font-size:19px}
  .option{font-size:15px;padding:13px 14px}
}

/* ============================================================ numbered nav */
nav.tabs button{position:relative;padding-right:34px}
nav.tabs .step{position:absolute;right:11px;top:50%;transform:translateY(-50%);
  font-size:10.5px;font-weight:700;color:var(--ink-faint);font-variant-numeric:tabular-nums;
  background:var(--panel);border:1px solid var(--rule);border-radius:5px;width:19px;height:19px;
  display:flex;align-items:center;justify-content:center;line-height:1}
nav.tabs button[aria-selected="true"] .step{background:transparent;border-color:transparent;
  color:var(--paper);opacity:.6}

/* =================================================================== codes */
.codebar{display:flex;gap:12px;align-items:center;margin-bottom:18px;flex-wrap:wrap}
.codebar .search{max-width:460px}
table.grid.codes{margin-bottom:8px}
table.grid.codes td{padding:11px 14px;font-size:14px;vertical-align:top}
table.grid.codes th{padding:11px 14px}
.code-cell{font-family:var(--mono);font-size:13px;color:var(--accent);white-space:nowrap;
  font-weight:600}
.muted-cell{color:var(--ink-faint);font-size:13.5px;line-height:1.45}
.panel-head{font-family:var(--serif);font-size:17px;font-weight:600;margin:22px 0 9px;
  color:var(--ink)}
.panel-head:first-child{margin-top:4px}
.callout{background:var(--panel);border:1px solid var(--rule);border-left:3px solid var(--accent);
  border-radius:11px;padding:18px 20px;margin:14px 0 20px;max-width:78ch}
.callout.warn{border-left-color:var(--warn);background:var(--warn-wash);border-color:var(--warn-rule)}
.callout.warn .lbl{color:var(--warn)}
.callout p{margin:0 0 10px;font-size:14.5px;line-height:1.6;color:var(--ink-soft)}
.callout p:last-child{margin-bottom:0}
.callout .tablewrap{margin-top:14px}
#view-codes .group-head{margin-top:34px}
#view-codes .group-head:first-child{margin-top:0}