/* One Engine - design system (see DESIGN_SPEC.md) */
:root{
  --ground:#FBFCFD; --surface:#FFFFFF; --surface-sunk:#F5F7F9; --surface-hover:#F0F3F5;
  --line:#E5EAED; --line-strong:#D5DCE1;
  --ink:#0A1417; --ink-secondary:#44525A; --ink-tertiary:#7C8A92; --ink-quiet:#A9B4BA; --ink-on-accent:#FFFFFF;
  --accent:#0B6B5E; --accent-hover:#0D7A6B; --accent-press:#095247;
  --accent-tint:#E7F2F0; --accent-tint-2:#F2F8F7; --accent-ring:rgba(11,107,94,.32);
  --fresh:#15876B; --fresh-bg:#E8F6F1; --fresh-line:#BCE3D7;
  --stale:#B5740A; --stale-bg:#FBF1DF; --stale-line:#EDD3A0;
  --warn:#C0473B; --warn-bg:#FBEEEC; --warn-line:#EFC9C3;
  --font-sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue","Segoe UI",system-ui,sans-serif;
  --font-mono:ui-monospace,"SF Mono","JetBrains Mono","Menlo","Cascadia Code","Roboto Mono",monospace;
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;--s-9:96px;--s-10:128px;
  --r-xs:6px;--r-sm:10px;--r-md:14px;--r-lg:20px;--r-pill:999px;
  --shadow-1:0 1px 2px rgba(10,20,23,.04),0 1px 1px rgba(10,20,23,.03);
  --shadow-2:0 4px 12px rgba(10,20,23,.06),0 2px 4px rgba(10,20,23,.04);
  --shadow-3:0 12px 32px rgba(10,20,23,.10),0 4px 10px rgba(10,20,23,.05);
  --shadow-accent:0 4px 16px rgba(11,107,94,.16);
  --ease-out:cubic-bezier(.22,1,.36,1); --ease-in-out:cubic-bezier(.65,0,.35,1); --ease-soft:cubic-bezier(.4,0,.2,1);
  --d-fast:140ms; --d-base:240ms; --d-slow:420ms; --d-stage:680ms;
}
:root[data-mode="polyglot"]{ --ground:#F8F9FA; --accent-tint-2:#F6F7F8; }
@media (prefers-color-scheme:dark){
  :root{
    --ground:#0C1012; --surface:#15191C; --surface-sunk:#1B2024; --surface-hover:#222831;
    --line:#262D32; --line-strong:#39434A;
    --ink:#ECF1F3; --ink-secondary:#A7B4BB; --ink-tertiary:#74838B; --ink-quiet:#5A666D;
    --accent:#3FC9B0; --accent-hover:#54D8C0; --accent-tint:#13332E; --accent-tint-2:#0F2520; --accent-press:#2FB7A0;
    --fresh:#46D6AE; --fresh-bg:#13322A; --fresh-line:#1E4A3E;
    --stale:#E0A33C; --stale-bg:#33280F; --stale-line:#5A4717;
    --warn:#E8786B; --warn-bg:#34211F; --warn-line:#5A302B;
  }
  :root[data-mode="polyglot"]{ --ground:#0A0E10; --accent-tint-2:#161B1E; }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;line-height:1.5;
  transition:background var(--d-slow) var(--ease-soft);}
a{color:inherit}
::selection{background:var(--accent-tint)}

/* type */
.eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);
  margin:0 0 var(--s-2);transition:color var(--d-slow)}
:root[data-mode="polyglot"] .eyebrow{color:var(--ink-tertiary)}
.display{font-size:clamp(36px,7vw,56px);line-height:1.05;font-weight:600;letter-spacing:-.022em;text-wrap:balance;margin:0}
h1.step-h{font-size:clamp(28px,5vw,40px);line-height:1.14;font-weight:600;letter-spacing:-.02em;text-wrap:balance;margin:0}
.lead{font-size:19px;line-height:1.47;font-weight:400;letter-spacing:-.004em;color:var(--ink-secondary);max-width:64ch;margin:var(--s-3) 0 0}
.h2{font-size:28px;font-weight:600;letter-spacing:-.014em;margin:0}
.h3{font-size:21px;font-weight:500;letter-spacing:-.008em;margin:0}
code{font-family:var(--font-mono);font-size:12.5px;background:var(--surface-sunk);border:1px solid var(--line);
  border-radius:var(--r-xs);padding:1px 5px}
.muted{color:var(--ink-tertiary)} .small{font-size:14px}

/* layout frame */
.appbar{position:sticky;top:0;z-index:50;height:56px;display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--s-6);background:color-mix(in srgb,var(--surface) 80%,transparent);
  backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid transparent;transition:border-color var(--d-base),box-shadow var(--d-base)}
.appbar.is-scrolled{border-bottom-color:var(--line);box-shadow:0 1px 0 rgba(10,20,23,.02)}
.wordmark{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:600;letter-spacing:-.02em;cursor:pointer;background:none;border:0;color:var(--ink);padding:0}
.wordmark b{color:var(--accent);font-weight:600}
.wordmark .pname{color:var(--ink-tertiary);font-size:14px;font-weight:400;letter-spacing:0}
@media (max-width:1023px){.wordmark .sep,.wordmark .pname{display:none}}

.shell{display:grid;grid-template-columns:240px minmax(0,1fr)}
.rail{position:sticky;top:56px;align-self:start;height:calc(100vh - 56px);overflow:auto;
  padding:var(--s-6) var(--s-4);border-right:1px solid var(--line)}
.rail-item{display:flex;gap:var(--s-3);align-items:flex-start;padding:var(--s-2) var(--s-3);border-radius:var(--r-sm);
  cursor:pointer;background:transparent;border:0;width:100%;text-align:left;color:inherit;
  transition:background var(--d-fast)}
.rail-item:hover{background:var(--surface-hover)}
.rail-item.active{background:var(--accent-tint)}
.marker{flex:0 0 auto;width:26px;height:26px;border-radius:var(--r-pill);display:flex;align-items:center;justify-content:center;
  font-size:11.5px;font-weight:600;letter-spacing:.04em;background:var(--surface);border:1px solid var(--line);color:var(--ink-tertiary);
  transition:transform var(--d-base) var(--ease-out),background var(--d-fast),color var(--d-fast),border-color var(--d-fast)}
.rail-item.active .marker{background:var(--accent);border-color:var(--accent);color:var(--ink-on-accent);box-shadow:var(--shadow-accent);transform:scale(1.06)}
.rail-item.done .marker{background:var(--accent-tint);border-color:var(--accent);color:var(--accent)}
.rail-lbl{display:flex;flex-direction:column;gap:1px;padding-top:2px}
.rail-lbl b{font-size:14px;font-weight:500;color:var(--ink-secondary)}
.rail-item.active .rail-lbl b{font-weight:600;color:var(--ink)}
.rail-lbl span{font-size:13px;color:var(--ink-tertiary)}

.main{min-width:0}
.step{max-width:880px;margin:0 auto;padding:var(--s-9) var(--s-6);min-height:72vh;
  border-bottom:1px solid transparent}
.step.intro{max-width:760px}
.payload{margin-top:var(--s-6);display:flex;flex-direction:column;gap:var(--s-5)}

/* segmented control */
.seg{position:relative;display:inline-flex;background:var(--surface-sunk);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:3px;height:34px}
.seg.big{height:44px}
.seg button{position:relative;z-index:1;border:0;background:none;cursor:pointer;border-radius:var(--r-pill);
  padding:0 16px;font-size:14px;font-weight:500;color:var(--ink-tertiary);transition:color var(--d-base),background var(--d-base),box-shadow var(--d-base);white-space:nowrap}
.seg.big button{font-size:16px;padding:0 22px}
.seg .thumb{display:none}   /* the selected button itself is the pill (below) - aligns by construction, no JS */
.seg[data-sel="tidb"] button[data-v="tidb"]{color:var(--accent);font-weight:600;background:var(--surface);box-shadow:0 0 0 1px var(--accent),var(--shadow-1)}
.seg[data-sel="polyglot"] button[data-v="polyglot"]{color:var(--ink);font-weight:600;background:var(--surface);box-shadow:0 0 0 1px var(--line-strong),var(--shadow-1)}
.seg.big[data-sel="tidb"] button[data-v="tidb"]{box-shadow:0 0 0 1px var(--accent),var(--shadow-accent)}
.seg button:hover{color:var(--ink-secondary)}
.qbadge{display:inline-flex;align-items:center;gap:4px;margin-left:6px;color:var(--stale);font-size:11.5px;font-weight:600}
.qbadge i{width:6px;height:6px;border-radius:50%;background:var(--stale);display:inline-block}

/* buttons */
.btn{font-family:inherit;font-size:16px;font-weight:500;border-radius:var(--r-sm);padding:12px 22px;cursor:pointer;
  border:1px solid transparent;transition:background var(--d-fast),box-shadow var(--d-fast),transform var(--d-fast),border-color var(--d-fast)}
.btn-primary{background:var(--accent);color:var(--ink-on-accent);box-shadow:var(--shadow-1)}
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:var(--shadow-2)}
.btn-primary:active{background:var(--accent-press);transform:none}
.btn-primary:disabled{background:var(--surface-sunk);color:var(--ink-quiet);box-shadow:none;cursor:not-allowed;transform:none}
.btn-secondary{background:var(--surface);border-color:var(--line-strong);color:var(--ink)}
.btn-secondary:hover{background:var(--surface-hover);border-color:var(--ink-tertiary)}
.btn-quiet{background:none;border:0;color:var(--accent);font-weight:500;cursor:pointer;padding:6px 4px;font-size:15px}
.btn-quiet:hover{text-decoration:underline}
.btn-start{padding:16px 40px;font-size:21px;border-radius:var(--r-pill)}
.iconbtn{width:32px;height:32px;border-radius:var(--r-sm);border:0;background:none;cursor:pointer;color:var(--ink-tertiary);
  display:inline-flex;align-items:center;justify-content:center}
.iconbtn:hover{background:var(--surface-hover);color:var(--ink)}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.chip{border-radius:var(--r-pill);padding:7px 14px;font-size:14px;font-weight:500;background:var(--surface);
  border:1px solid var(--line);color:var(--ink-secondary);cursor:pointer;transition:all var(--d-fast)}
.chip:hover{background:var(--surface-hover);border-color:var(--line-strong);color:var(--ink);transform:translateY(-1px)}
.chip.sel{background:var(--accent-tint);border:1.5px solid var(--accent);color:var(--accent);font-weight:600}

/* inputs */
.input,textarea.sql{width:100%;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-sm);
  padding:12px 14px;font-size:16px;color:var(--ink);font-family:inherit;transition:border-color var(--d-fast),box-shadow var(--d-fast)}
.input:focus,textarea.sql:focus,.searchbox:focus-within{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
textarea.sql{font-family:var(--font-mono);font-size:13.5px;line-height:22px;background:var(--surface-sunk);border-radius:var(--r-md);min-height:96px;resize:vertical}
.searchbox{display:flex;align-items:center;gap:var(--s-3);background:var(--surface);border:1px solid var(--line-strong);
  border-radius:var(--r-pill);padding:6px 6px 6px 18px;min-height:52px;transition:box-shadow var(--d-fast),border-color var(--d-fast)}
.searchbox.md{border-radius:var(--r-md);align-items:flex-end}
.searchbox .glyph{color:var(--ink-tertiary);flex:0 0 auto;display:flex}
.searchbox input,.searchbox textarea{flex:1;border:0;background:none;outline:none;font-size:16px;color:var(--ink);font-family:inherit;resize:none;padding:8px 0}
.searchbox .go{flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:0;background:var(--accent);color:var(--ink-on-accent);
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--d-fast)}
.searchbox .go:hover{background:var(--accent-hover)}
.runrow{display:flex;align-items:center;gap:var(--s-3);margin-top:var(--s-3)}
.runrow .spacer{flex:1}
.runrow .lastrun{font-size:14px;color:var(--ink-tertiary)}

/* sql block */
.sqlblock{background:var(--surface-sunk);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.sqlblock .chrome{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;border-bottom:1px solid var(--line)}
.sqlblock .chrome .lbl{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-tertiary)}
.sqlblock pre{margin:0;padding:14px 18px;overflow-x:auto;font-family:var(--font-mono);font-size:13.5px;line-height:22px;color:var(--ink)}
.sqlblock .kw{color:var(--accent);font-weight:500}
.sqlblock .fn{color:var(--ink);font-weight:600;background:linear-gradient(transparent 78%,var(--accent-tint) 0)}
.sqlblock .str{color:var(--fresh)}
.sqlblock .com{color:var(--ink-tertiary);font-style:italic}
.sqlblock .num{color:var(--ink-secondary)}

/* cards / panels */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-1);padding:var(--s-5)}
.stage{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-7);
  text-align:center;box-shadow:var(--shadow-1)}
.panel{background:var(--accent-tint-2);border-radius:var(--r-lg);padding:var(--s-5);transition:background var(--d-slow)}

/* results table */
.tablewrap{border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;box-shadow:var(--shadow-1)}
.tablescroll{overflow-x:auto}
table.res{width:100%;border-collapse:collapse;font-size:14px}
table.res th{background:var(--surface-sunk);text-align:left;font-size:11.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-tertiary);padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
table.res td{padding:10px 14px;border-bottom:1px solid var(--surface-sunk);color:var(--ink);white-space:nowrap;
  max-width:340px;overflow:hidden;text-overflow:ellipsis}
table.res td.num{text-align:right;font-variant-numeric:tabular-nums}
table.res tr:last-child td{border-bottom:0}
table.res td.wrap{white-space:normal;min-width:260px;max-width:460px;font-size:13px;line-height:1.5;color:var(--ink-secondary)}
.tablecap{font-size:14px;color:var(--ink-tertiary);margin-top:var(--s-3)}
.bar{display:inline-block;height:6px;border-radius:3px;background:var(--accent-tint);vertical-align:middle;width:64px;position:relative;margin-left:8px}
.bar>i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--accent)}

/* reveal animation */
.reveal{opacity:0;transform:translateY(12px);animation:reveal var(--d-slow) var(--ease-out) forwards}
/* agent-memory: the "it forgets" compaction beat */
.cw{border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s-4);background:var(--surface)}
.cwbar{display:flex;align-items:center;gap:10px;margin-bottom:var(--s-4);font-size:13px;color:var(--ink-secondary)}
.cwlabel{white-space:nowrap;font-weight:600}
.cwtrack{flex:1;height:10px;background:var(--surface-sunk);border-radius:var(--r-pill);overflow:hidden}
.cwfill{display:block;height:100%;width:35%;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--accent),var(--stale));animation:cwfill 1.6s var(--ease-out) forwards}
@keyframes cwfill{to{width:100%}}
.cwpct{font-weight:700;color:var(--stale)}
.cwstack{display:flex;flex-direction:column;gap:8px}
.cwitem{padding:10px var(--s-4);border-radius:var(--r-sm);background:var(--surface-sunk);font-size:14px;color:var(--ink)}
.cwitem.drop{border:1px solid var(--accent-tint-2);background:var(--accent-tint);animation:cwdrop .9s var(--ease-out) 1.5s forwards}
@keyframes cwdrop{to{opacity:.45;filter:grayscale(1);transform:translateX(-6px)}}
.cwtag{float:right;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--stale);opacity:0;animation:cwtagin .3s ease 2.1s forwards}
@keyframes cwtagin{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.cwfill{width:100%;animation:none}.cwitem.drop{opacity:.45;filter:grayscale(1);animation:none}.cwtag{opacity:1;animation:none}}
/* interactive chat sim (agent memory acts 1 + 2) */
.step.chatstep{max-width:1220px}
.chatwrap{display:grid;grid-template-columns:1fr 440px;gap:var(--s-5);align-items:start}
@media (max-width:1150px){.chatwrap{grid-template-columns:1fr 360px}}
@media (max-width:900px){.chatwrap{grid-template-columns:1fr}}
.chatpane{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-1);
  padding:var(--s-4);height:440px;overflow-y:auto;display:flex;flex-direction:column;gap:10px}
.chatchips{margin-top:var(--s-3)}
.headcol{display:flex;flex-direction:column;gap:var(--s-4)}
.hpcard{background:var(--surface-sunk);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s-4)}
.mdfile.ghost .mdbody{opacity:.5;text-decoration:none}
.mdnever{display:block;font-family:var(--font-mono);font-size:11px;color:var(--stale);padding:0 10px 8px}
.hp-title{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-tertiary);margin-bottom:10px}
.cwfill2{display:block;height:100%;width:0%;border-radius:var(--r-pill);background:var(--accent);transition:width .5s var(--ease-out)}
.cwfill2.hot{background:linear-gradient(90deg,var(--accent),var(--stale))}
.cwtok{float:right;color:var(--ink-quiet);font-size:11px;margin-left:8px;font-variant-numeric:tabular-nums}
.headcol .cwitem{font-size:12.5px;line-height:1.5;overflow-wrap:anywhere}
.cwitem.key{border:1px solid var(--accent-tint-2);background:var(--accent-tint)}
.cwitem.dropgone{opacity:.35;filter:grayscale(1);text-decoration:line-through;transition:opacity .8s,filter .8s}
.cwitem.sum{border:1px dashed var(--line-strong)}
.cwnote{font-size:12.5px;font-weight:600;color:var(--stale);margin-bottom:8px}
.cwlost{font-size:12.5px;color:var(--stale);font-weight:600;margin-top:8px}
.mtable{max-height:360px;overflow-y:auto;display:flex;flex-direction:column;gap:6px}
.mtrow{display:flex;flex-direction:column;gap:3px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xs);
  padding:6px 9px;font-family:var(--font-mono);font-size:11.5px;color:var(--ink-secondary)}
.mtrow .mtk{white-space:nowrap;font-weight:600;color:var(--ink-tertiary)}
.mtrow .mtk.ok{color:var(--fresh)}
.mtrow .mtk.warn{color:var(--stale)}
.mtrow .mtc{white-space:normal;overflow-wrap:anywhere;line-height:1.5}
.mtrow .mttok{color:var(--ink-quiet);white-space:nowrap}
.mtrow.flash{animation:pulse 1.2s var(--ease-soft) infinite;border-color:var(--accent)}
.askrow{display:flex;gap:8px;margin-top:var(--s-3)}
.askrow .input{flex:1}
/* the manual escape hatch: a notes file (Act 1 teaching aside) */
.mdfile{margin-top:var(--s-4);border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--surface);box-shadow:var(--shadow-1);overflow:hidden}
.mdfile .mdname{font-family:var(--font-mono);font-size:11px;font-weight:700;padding:6px 10px;background:var(--surface-sunk);border-bottom:1px solid var(--line);color:var(--ink-secondary)}
.mdfile .mdbody{font-family:var(--font-mono);font-size:12px;line-height:1.6;padding:10px;white-space:pre-wrap;color:var(--ink)}
.mdfile .mdcap{font-size:12.5px;line-height:1.5;color:var(--ink-tertiary);padding:0 10px 10px}
@keyframes reveal{to{opacity:1;transform:none}}

/* trace */
.trace{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-1);overflow:hidden}
.trace .thead{padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--line)}
.trace .thead .h3{margin-bottom:2px}
.trace .legend{font-size:14px;color:var(--ink-tertiary);margin-top:4px}
.trow{display:grid;grid-template-columns:auto 1fr auto auto;column-gap:var(--s-3);row-gap:4px;align-items:center;padding:11px var(--s-5);
  border-bottom:1px solid var(--surface-sunk)}
.trow .tlabel{white-space:nowrap}
.trow:last-child{border-bottom:0}
.epill{font-size:11.5px;font-weight:600;letter-spacing:.04em;padding:3px 8px;border-radius:var(--r-xs);white-space:nowrap}
.epill.oltp{color:var(--accent);background:var(--accent-tint)}
.epill.olap{color:#3A6A7B;background:#EAF1F4}
.epill.hybrid{color:var(--ink);background:var(--surface-sunk);border:1px solid var(--line)}
.tlabel{font-size:14px;font-weight:500;color:var(--ink);min-width:0}
.tdetail{grid-column:1/-1;font-family:var(--font-mono);font-size:12.5px;line-height:1.45;color:var(--ink-tertiary)}
.tms{font-size:14px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--ink);text-align:right}
.badge{font-size:11.5px;font-weight:600;letter-spacing:.04em;padding:3px 8px;border-radius:var(--r-xs);display:inline-flex;align-items:center;gap:5px}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge.fresh{color:var(--fresh);background:var(--fresh-bg);border:1px solid var(--fresh-line)}
.badge.stale{color:var(--stale);background:var(--stale-bg);border:1px solid var(--stale-line);animation:pulse 1.6s var(--ease-soft) infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.62}}
.tsummary{padding:var(--s-4) var(--s-5);border-top:1px solid var(--line);font-size:14px;color:var(--ink-secondary);font-weight:500}
.tsummary.tidb{color:var(--accent)}
.tgroup{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-tertiary);
  padding:10px var(--s-5) 4px;border-top:1px dashed var(--line)}
/* ETL auto-sync spinner */
.etlrun{display:inline-flex;align-items:center;gap:6px;margin-left:2px;font-weight:600;color:var(--stale)}
.spin{width:11px;height:11px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;display:inline-block;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* retail agent as a customer-support chat */
.askwho{font-size:14px;color:var(--ink-secondary);margin:2px 0 12px}
.askbubble{background:var(--accent-tint);border:1px solid var(--accent-tint-2);border-radius:var(--r-md);
  padding:10px var(--s-4);margin-bottom:var(--s-4);font-size:15px;color:var(--ink)}
.askbubble .who,.ansrole{display:block;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin-bottom:4px}
.askbubble .who{color:var(--accent)}
.ansrole{color:var(--ink-tertiary)}
/* old-way vs TiDB accumulating scorecard */
#agent-cmp{margin-top:var(--s-4)}
.cmpwrap{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--surface)}
.cmptitle{padding:11px var(--s-4);font-weight:600;font-size:14px;border-bottom:1px solid var(--line);background:var(--surface-sunk)}
.cmpscroll{overflow-x:auto}
table.cmp{width:100%;border-collapse:collapse;font-size:14px}
table.cmp th,table.cmp td{padding:11px var(--s-4);text-align:left;border-bottom:1px solid var(--surface-sunk);vertical-align:top}
table.cmp thead th{font-size:12px;color:var(--ink-secondary);font-weight:700;white-space:nowrap}
table.cmp thead th span{display:block;font-weight:400;color:var(--ink-tertiary);font-size:11px}
table.cmp .cmp-k{color:var(--ink-secondary);width:36%}
table.cmp .cmp-tidb{color:var(--accent);background:var(--accent-tint);font-weight:500}
.cmp-todo{color:var(--ink-quiet);font-style:italic}
.cmpnote{padding:11px var(--s-4);font-size:13px;line-height:1.5;color:var(--ink-tertiary);border-top:1px solid var(--surface-sunk)}
table.cmp tbody tr:last-child td{border-bottom:0}

/* metric chips */
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4)}
.metric{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-1);padding:var(--s-5)}
.metric .ml{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-tertiary)}
.metric .mv{font-size:34px;line-height:1.1;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums;margin-top:6px}
.metric .mv.accent{color:var(--accent)} .metric .mv.fresh{color:var(--fresh)} .metric .mv.stale{color:var(--stale);font-size:22px}
.metric .mv.txt{font-size:20px;line-height:1.3}
.metric .ms{font-size:14px;color:var(--ink-tertiary);margin-top:4px}

/* banners */
.banner{border-radius:var(--r-md);padding:12px 16px;font-size:14px;border:1px solid;display:flex;gap:10px;align-items:flex-start;line-height:1.4}
.banner.affirm{background:var(--fresh-bg);border-color:var(--fresh-line);color:var(--fresh)}
.banner.caution{background:var(--stale-bg);border-color:var(--stale-line);color:var(--stale)}
.banner.critical{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)}
.banner svg{flex:0 0 auto;margin-top:1px}

/* answer */
.answer{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-1);
  padding:var(--s-5);font-size:16px;line-height:1.55}

/* toasts */
.toasts{position:fixed;bottom:var(--s-6);left:50%;transform:translateX(-50%);z-index:100;display:flex;flex-direction:column;gap:var(--s-2);align-items:center}
.toast{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-3);
  padding:12px 18px;font-size:14px;font-weight:500;display:flex;align-items:center;gap:10px;animation:tin var(--d-base) var(--ease-out)}
.toast::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--fresh)}
.toast.stale::before{background:var(--stale)} .toast.warn::before{background:var(--warn)}
@keyframes tin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* inspector */
.disc summary{list-style:none;cursor:pointer;color:var(--accent);font-weight:500;font-size:15px;display:flex;align-items:center;gap:6px}
.disc summary::-webkit-details-marker{display:none}
.disc summary .chev{transition:transform var(--d-fast)}
.disc[open] summary .chev{transform:rotate(90deg)}
.insp{margin-top:var(--s-4);display:flex;flex-direction:column;gap:var(--s-2)}
.insprow{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--s-3) var(--s-4)}
.insprow .top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3)}
.insprow .tbl{font-weight:600;font-size:14px}
.insprow .role{font-size:11.5px;font-weight:600;letter-spacing:.04em;color:var(--accent)}
:root[data-mode="polyglot"] .insprow .role{color:var(--ink-tertiary)}
.insprow .smp{font-family:var(--font-mono);font-size:12.5px;color:var(--ink-tertiary);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* seeding animation */
.seedstage{position:relative;height:300px;margin-top:var(--s-5);display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;
  gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.quad{position:relative;display:flex;align-items:flex-start;justify-content:flex-start;padding:14px;overflow:hidden}
.quad .ql{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-tertiary);opacity:.4;transition:opacity var(--d-base),color var(--d-base)}
.quad.lit .ql{opacity:1;color:var(--ink)}
.quad .ql .ck{color:var(--fresh);opacity:0;margin-left:6px;transition:opacity var(--d-base)}
.quad.lit .ql .ck{opacity:1}
.tok{position:absolute;bottom:-20px;left:14px;height:18px;border-radius:var(--r-pill);background:var(--surface);
  border:1px solid var(--line-strong);display:flex;align-items:center;gap:6px;padding:0 10px 0 6px;font-size:11px;color:var(--ink-secondary);
  opacity:0;box-shadow:var(--shadow-1)}
.tok>i{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.tok.flew{animation:fly var(--d-stage) var(--ease-out) forwards}
@keyframes fly{0%{opacity:0;transform:translateY(0)}30%{opacity:1}85%{transform:translateY(var(--ty));opacity:1}100%{transform:translateY(calc(var(--ty) + 2px));opacity:1}}
.seedcap{margin-top:var(--s-4);font-size:16px;color:var(--ink-secondary);opacity:0;transition:opacity var(--d-slow)}
.seedcap.show{opacity:1}

/* mobile progress (hidden on desktop) */
.mprog{display:none}

@media (max-width:1023px){
  .shell{grid-template-columns:60px minmax(0,1fr)}
  .rail{padding:var(--s-5) var(--s-2)}
  .rail-lbl{display:none}
  .rail-item.active .rail-lbl{display:flex;position:absolute;left:60px;background:var(--surface);border:1px solid var(--line);
    box-shadow:var(--shadow-2);border-radius:var(--r-sm);padding:6px 10px;z-index:5}
  .step{padding:var(--s-8) var(--s-5)}
  .metrics{grid-template-columns:1fr}
}
@media (max-width:767px){
  .shell{grid-template-columns:1fr}
  .rail{display:none}
  .appbar{padding:0 var(--s-4)}
  .step{padding:var(--s-7) var(--s-4)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-delay:0s !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .reveal,.cst li,.cdly{opacity:1;transform:none}
}

/* ===================== GUIDED ONE-STEP FLOW ===================== */
.step{display:none;min-height:auto;border-bottom:0}
.step.shown{display:block}
.step.stepin{animation:stepin var(--d-slow) var(--ease-out)}
@keyframes stepin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.sqlblock .cmt{color:var(--ink-tertiary);font-style:italic}

/* rail act groups */
.rail-act{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-quiet);padding:var(--s-4) var(--s-3) var(--s-2)}
.rail-act:first-child{padding-top:0}
@media (max-width:1023px){.rail-act{display:none}}

/* use-case switch (2-way, in the appbar) */
.seg.uc[data-sel="mem"] button[data-uc="mem"]{color:var(--accent);font-weight:600;background:var(--surface);box-shadow:0 0 0 1px var(--accent),var(--shadow-1)}
.seg.uc[data-sel="retail"] button[data-uc="retail"]{color:var(--accent);font-weight:600;background:var(--surface);box-shadow:0 0 0 1px var(--accent),var(--shadow-1)}
@media (max-width:520px){.seg.uc button{padding:0 11px;font-size:13px}}

/* flow footer nav */
.flownav{max-width:880px;margin:0 auto;padding:var(--s-5) var(--s-6) var(--s-9);display:flex;align-items:center;justify-content:space-between;gap:var(--s-4)}
.flowpos{font-size:13px;color:var(--ink-tertiary);font-variant-numeric:tabular-nums}
.flownav .btn{font-size:15px;padding:10px 20px}
.flownav .btn-secondary:disabled{opacity:.4;cursor:not-allowed}
@media (max-width:767px){.flownav{padding:var(--s-4) var(--s-4) var(--s-8)}}

.subtle{font-size:15px;color:var(--ink-tertiary);margin:var(--s-4) 0 0;max-width:60ch}
.seed-continue-inline{margin-top:var(--s-2)}
.step .payload code{font-size:12.5px}

/* frankenstack */
.stackgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-3)}
.scard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s-4);box-shadow:var(--shadow-1);display:flex;flex-direction:column;gap:3px}
.scard b{font-size:15px}
.scard span{font-size:13px;color:var(--ink-tertiary)}
.sdot{width:10px;height:10px;border-radius:50%;margin-bottom:4px}
.sdot.pg{background:#4169E1}.sdot.rd{background:#D64541}.sdot.vc{background:#8E44AD}.sdot.es{background:#F2A600}
.costcards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3)}
.ccard{background:var(--surface-sunk);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s-4)}
.ccard b{display:block;font-size:14px;margin-bottom:4px;color:var(--ink)}
.ccard span{font-size:13.5px;color:var(--ink-secondary);line-height:1.45}

/* block legend + block model */
.blocklegend{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.kindpill{display:inline-flex;flex-direction:column;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 12px;font-size:12.5px;color:var(--ink-tertiary);max-width:230px;line-height:1.35}
.kindpill b{font-size:12.5px;color:var(--ink);font-weight:600;text-transform:capitalize}

/* recall result cards */
.memlist{display:flex;flex-direction:column;gap:var(--s-2)}
.memrow{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s-3) var(--s-4);box-shadow:var(--shadow-1)}
.memtop{display:flex;align-items:center;gap:var(--s-3);margin-bottom:6px}
.memtok{font-family:var(--font-mono);font-size:12px;color:var(--ink-tertiary)}
.memc{font-size:14.5px;line-height:1.5;color:var(--ink)}

/* token economics bars */
.tokchart{display:flex;flex-direction:column;gap:var(--s-3);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s-5);box-shadow:var(--shadow-1)}
.tokrow{display:grid;grid-template-columns:170px 1fr 140px;gap:var(--s-3);align-items:center}
.tokk{font-size:13.5px;font-weight:500;text-transform:capitalize;display:flex;flex-direction:column}
.tokn{font-size:11.5px;color:var(--ink-quiet);font-weight:400}
.tokbar{height:14px;background:var(--surface-sunk);border-radius:var(--r-pill);overflow:hidden}
.tokbar>i{display:block;height:100%;background:var(--accent);border-radius:var(--r-pill);transition:width var(--d-slow) var(--ease-out)}
.tokbar>i.hot{background:var(--warn)}
.tokbar>i.good{background:var(--fresh)}
.tokv{font-size:13.5px;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}

/* home / chooser */
.home{display:none;max-width:820px;margin:0 auto;padding:var(--s-9) var(--s-6)}
.home.shown{display:block}
:root[data-home="1"] .shell{grid-template-columns:1fr}
:root[data-home="1"] .rail,
:root[data-home="1"] #flownav,
:root[data-home="1"] #uc-switch{display:none}
.homecards{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);margin-top:var(--s-7)}
.homecard{text-align:left;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-lg);
  padding:var(--s-6);cursor:pointer;display:flex;flex-direction:column;gap:var(--s-3);box-shadow:var(--shadow-1);
  transition:transform var(--d-fast),box-shadow var(--d-fast),border-color var(--d-fast)}
.homecard:hover{transform:translateY(-3px);box-shadow:var(--shadow-3);border-color:var(--accent)}
.homecard .hctag{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.homecard b{font-size:26px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.homecard .hcdesc{font-size:15px;line-height:1.5;color:var(--ink-secondary);flex:1}
.homecard .hcgo{font-size:15px;font-weight:600;color:var(--accent);margin-top:var(--s-2)}
@media (max-width:760px){.homecards{grid-template-columns:1fr}}

/* "or ask your own" disclosure: chips are the primary control */
.askdisc summary{color:var(--ink-tertiary);font-size:13.5px;font-weight:500}
.askdisc summary:hover{color:var(--accent)}
.askdisc[open] summary{margin-bottom:var(--s-3);color:var(--ink-secondary)}

/* conversation view: the memory shown as the chats it came from */
.convowrap{display:flex;flex-direction:column;gap:var(--s-4)}
.convo{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-4) var(--s-5);box-shadow:var(--shadow-1);display:flex;flex-direction:column;gap:var(--s-2)}
.convohead{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-tertiary);padding-bottom:var(--s-2);border-bottom:1px solid var(--line)}
.convohead span{font-weight:400;text-transform:none;letter-spacing:0;margin-left:8px;color:var(--ink-quiet)}
.bub{max-width:82%;border-radius:14px;padding:8px 12px;font-size:13.5px;line-height:1.45}
.bub.user{align-self:flex-end;background:var(--accent-tint);border:1px solid var(--accent-ring)}
.bub.agent{align-self:flex-start;background:var(--surface-sunk);border:1px solid var(--line)}
.bub.tool{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-tertiary);background:var(--surface-sunk);border-style:dashed}
.bub.decision{background:var(--fresh-bg);border:1px solid var(--fresh-line)}
.bubmeta{font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-quiet);margin-bottom:3px}
.bub.decision .bubmeta{color:var(--fresh)}
.bubc{color:var(--ink)}
.bub.tool .bubc{color:var(--ink-tertiary)}

/* live trace playback */
.trow.live .tdetail{color:var(--accent);animation:pulse 1s var(--ease-soft) infinite}

/* money-shot step lists + delayed reveal */
.cst{margin:0;padding:0 0 0 18px;display:flex;flex-direction:column;gap:6px}
.cst li{font-size:13px;line-height:1.4;color:var(--ink-secondary);opacity:0;animation:reveal .35s var(--ease-out) forwards}
.cst li b{font-weight:600;color:var(--ink)}
.cst li span{display:block;font-size:11.5px;color:var(--ink-tertiary)}
.cdly{opacity:0;animation:reveal .4s var(--ease-out) forwards;display:flex;flex-direction:column;gap:var(--s-3)}

/* recall pipeline strip: what just happened, stage by stage */
.pipe{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;background:var(--accent-tint-2);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s-3) var(--s-4)}
.pstep{display:flex;flex-direction:column;gap:1px;min-width:0}
.pstep b{font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap}
.pstep i{font-style:normal;font-size:11px;color:var(--ink-tertiary);white-space:nowrap}
.parr{color:var(--accent);font-size:16px;line-height:1;flex:0 0 auto}
@media (max-width:800px){.pipe{gap:6px}.pstep b{font-size:11.5px}.pstep i{display:none}}

/* turn-by-turn accumulation chart */
.tokbar.stack{display:flex;gap:1px}
.tokbar.stack>i{position:static;display:block;height:100%;border-radius:0}
.tokbar.stack>i:first-child{border-radius:var(--r-pill) 0 0 var(--r-pill)}
.tokbar.stack>i:last-child{border-radius:0 var(--r-pill) var(--r-pill) 0}
.tokbar.stack>i:only-child{border-radius:var(--r-pill)}
.tseg.hot{background:var(--warn)}
.tseg.pale{background:var(--stale-bg);border:1px solid var(--stale-line)}
.tseg.good{background:var(--fresh)}
.tokleg{display:flex;gap:var(--s-4);flex-wrap:wrap;font-size:12px;color:var(--ink-tertiary);padding-top:var(--s-2);border-top:1px solid var(--line)}
.tokleg span{display:inline-flex;align-items:center;gap:6px}
.tokleg .dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.tokleg .dot.hot{background:var(--warn)}
.tokleg .dot.pale{background:var(--stale-bg);border:1px solid var(--stale-line)}
.tokleg .dot.good{background:var(--fresh)}

/* cold vs warm (money shot) */
.cwhead{display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center;background:var(--accent-tint-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-6) var(--s-5)}
.cwbig{font-size:clamp(44px,9vw,60px);font-weight:600;letter-spacing:-.02em;color:var(--accent);line-height:1;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:8px}
.cwbig em{font-size:16px;font-style:normal;color:var(--ink-secondary);font-weight:500}
.cwsub{font-size:14.5px;color:var(--ink-secondary);max-width:62ch;line-height:1.5}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
.ccol{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s-5);box-shadow:var(--shadow-1);display:flex;flex-direction:column;gap:var(--s-3)}
.ccol.cold{border-color:var(--warn-line)}
.ccol.warm{border-color:var(--fresh-line)}
.cchead{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3)}
.ctag{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--warn);background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:var(--r-xs);padding:3px 8px}
.ctag.good{color:var(--fresh);background:var(--fresh-bg);border-color:var(--fresh-line)}
.csys{font-size:12.5px;color:var(--ink-tertiary)}
.cnum{display:flex;align-items:baseline;gap:8px}
.cnum>span{font-size:40px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ccol.cold .cnum>span{color:var(--warn)}
.ccol.warm .cnum>span{color:var(--fresh)}
.cnum em{font-size:13px;font-style:normal;color:var(--ink-tertiary)}
.cbar{height:10px;background:var(--surface-sunk);border-radius:var(--r-pill);overflow:hidden}
.cbar>i{display:block;height:100%;border-radius:var(--r-pill)}
.cbar>i.bad{background:var(--warn)}
.cbar>i.good{background:var(--fresh)}
.cbadge{align-self:flex-start;font-size:11.5px;font-weight:700;letter-spacing:.06em;padding:4px 10px;border-radius:var(--r-pill)}
.cbadge.forgot{color:var(--warn);background:var(--warn-bg);border:1px solid var(--warn-line)}
.cbadge.remembered{color:var(--fresh);background:var(--fresh-bg);border:1px solid var(--fresh-line)}
.canswer{font-size:14.5px;line-height:1.55;color:var(--ink)}
.creg{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--warn);background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:var(--r-sm);padding:8px 10px;line-height:1.4}
.creg svg{flex:0 0 auto;margin-top:1px}

/* collapsed SQL disclosure: one quiet line unless opened */
.sqldisc summary{color:var(--ink-tertiary);font-size:13.5px;font-weight:500}
.sqldisc summary:hover{color:var(--accent)}
.sqldisc[open] summary{color:var(--ink-secondary);margin-bottom:var(--s-3)}
.sqldisc>textarea.sql{margin-top:var(--s-2)}

/* architecture mini-diagram (one table step) */
.arch{display:flex;flex-direction:column;gap:var(--s-3)}
.arch-lane{display:grid;grid-template-columns:52px 1fr auto 1.5fr;gap:var(--s-3);align-items:center}
.arch-tag{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-quiet)}
.arch-node{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s-3) var(--s-4);box-shadow:var(--shadow-1);display:flex;flex-direction:column;gap:2px;min-width:0}
.arch-node b{font-size:14px}
.arch-node span{font-size:12.5px;color:var(--ink-tertiary);line-height:1.4}
.arch-node.tidb{border-color:var(--accent);background:var(--accent-tint-2)}
.arch-node.tidb .j{color:var(--ink-secondary)}
.arch-node.good{border-color:var(--fresh-line)}
.arch-arrow{display:flex;flex-direction:column;align-items:center;gap:2px}
.arch-arrow i{font-style:normal;font-family:var(--font-mono);font-size:11px;color:var(--ink-tertiary);white-space:nowrap}
.arch-arrow::after{content:"\2192";font-size:20px;color:var(--accent);line-height:1}
.arch-cap{font-size:13.5px;color:var(--ink-secondary);background:var(--surface-sunk);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 14px;line-height:1.45}
@media (max-width:800px){
  .arch-lane{grid-template-columns:1fr}
  .arch-tag{padding-top:var(--s-2)}
  .arch-arrow{flex-direction:row;gap:8px}
  .arch-arrow::after{content:"\2193"}
}

/* takeaways */
.takegrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
.take{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s-5);box-shadow:var(--shadow-1);display:flex;flex-direction:column;gap:6px}
.tnum{font-size:32px;font-weight:600;letter-spacing:-.02em;color:var(--accent);line-height:1;font-variant-numeric:tabular-nums}
.take>div:last-child{font-size:14.5px;color:var(--ink-secondary);line-height:1.5}
.closing{margin-top:var(--s-6);display:flex;flex-direction:column;gap:var(--s-4);align-items:flex-start}

@media (max-width:900px){
  .stackgrid,.costcards{grid-template-columns:1fr 1fr}
  .compare,.takegrid{grid-template-columns:1fr}
  .tokrow{grid-template-columns:120px 1fr 96px}
}

/* v5.6 polish: the head panel after compaction, and the live notes file */
.cwnote{font-size:12px;font-weight:600;color:var(--stale);line-height:1.5;margin-bottom:8px}
.headcol .cwitem{font-size:12px;line-height:1.55;padding:8px 10px}
.headcol .cwitem.dropgone{opacity:.45;font-size:11px;padding:6px 10px}
.cwitem.sum{border:1px solid var(--accent-tint-2);background:var(--accent-tint)}
.cwchip{display:block;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:4px}
.cwchip.plain{color:var(--ink-tertiary)}
.cwitem.sum .cwtok{display:none}
.cwlost{font-size:12px;line-height:1.55;margin-top:10px;color:var(--stale);font-weight:600}
.mdline{font-family:var(--font-mono);font-size:12px;line-height:1.7;overflow-wrap:anywhere}
.mdline.new{animation:mdflash 1.4s ease}
@keyframes mdflash{0%{background:var(--accent-tint)}100%{background:transparent}}
@media (prefers-reduced-motion:reduce){.mdline.new{animation:none}}