/* Academy app — "The Stack" palette, adopted 2026-08-18.
   The direction the Founder selected for the site carries into the product so
   both read as one thing. Colour keeps the SAME meanings it has on the site:
     amber  (#F6C564) = your material — what you brought in
     forest (#244A36) = what stays yours — privacy, ownership, publish state
     coral  (#D3431A) = the act — the one control that starts something
   Amber treatment B (Founder, 2026-08-18): ink on amber is espresso #2A1C06,
   never pure black, and display weight eases on amber surfaces. */

:root{
  --bg:#f3f0e8; --card:#fffcf7; --card2:#fffcf7; --side:#ece7da; --sidesel:rgba(14,61,44,.10);
  --label:#18231f; --label2:#65736b; --label3:rgba(101,115,107,.45); --sep:#ded8c7;
  --fill:#e7efe8; --blue:#244A36; --bluebg:rgba(36,74,54,.12); --green:#1f6b4a; --orange:#D3431A; --red:#b42318;
  --amber:#F6C564; --on-amber:#2A1C06; --amberbg:rgba(246,197,100,.20); --coral:#D3431A;
  --shadow:0 6px 22px rgba(14,61,44,.07);
  --terra:#D3431A; --paper:#fffcf7;
}
@media(prefers-color-scheme:dark){:root{
  --bg:#0c1a14; --card:#15241c; --card2:#1a2c23; --side:#101c16; --sidesel:rgba(95,158,127,.24);
  --label:#f3f0e8; --label2:rgba(243,240,232,.62); --label3:rgba(243,240,232,.32); --sep:rgba(226,220,201,.16);
  --fill:#1a2f26; --blue:#7cb89a; --bluebg:rgba(36,74,54,.30); --green:#5f9e7f; --orange:#F0724B; --red:#e07060;
  --amber:#F6C564; --on-amber:#2A1C06; --amberbg:rgba(246,197,100,.22); --coral:#F0724B;
  --shadow:0 1px 3px rgba(0,0,0,.4);
  --terra:#F0724B; --paper:#15241c;
}}
:root[data-theme="dark"]{--bg:#0c1a14;--card:#15241c;--card2:#1a2c23;--side:#101c16;--sidesel:rgba(95,158,127,.24);--label:#f3f0e8;--label2:rgba(243,240,232,.62);--label3:rgba(243,240,232,.32);--sep:rgba(226,220,201,.16);--fill:#1a2f26;--blue:#7cb89a;--bluebg:rgba(36,74,54,.30);--green:#5f9e7f;--orange:#F0724B;--red:#e07060;--shadow:0 1px 3px rgba(0,0,0,.4);--terra:#F0724B;--paper:#15241c;--amber:#F6C564;--on-amber:#2A1C06;--amberbg:rgba(246,197,100,.22);--coral:#F0724B}
:root[data-theme="light"]{--bg:#f3f0e8;--card:#fffcf7;--card2:#fffcf7;--side:#ece7da;--sidesel:rgba(14,61,44,.10);--label:#18231f;--label2:#65736b;--label3:rgba(101,115,107,.45);--sep:#ded8c7;--fill:#e7efe8;--blue:#244A36;--bluebg:rgba(36,74,54,.12);--green:#1f6b4a;--orange:#D3431A;--red:#b42318;--shadow:0 6px 22px rgba(14,61,44,.07);--terra:#D3431A;--paper:#fffcf7;--amber:#F6C564;--on-amber:#2A1C06;--amberbg:rgba(246,197,100,.20);--coral:#D3431A}
*{box-sizing:border-box;-webkit-font-smoothing:antialiased}
body{margin:0;background:var(--bg);color:var(--label);font:15px/1.45 "Source Sans 3",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;letter-spacing:-.01em}
.app{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.chrome{grid-column:1/-1;display:flex;align-items:center;gap:12px;padding:14px 22px;border-bottom:1px solid var(--sep);background:color-mix(in srgb,var(--paper) 88%,transparent)}
.brand{display:flex;align-items:center;gap:9px;font:700 20px/1 Fraunces,Georgia,serif;color:var(--blue);text-decoration:none}
.brand svg{width:16px;height:16px;flex:none}
.projectchip{margin-left:8px;padding-left:14px;border-left:1px solid var(--sep);font-size:13px;color:var(--label2);max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl{display:none}
.wintitle{display:none}
.live{margin-left:auto;font-size:11px;font-weight:600;padding:3px 8px;border-radius:6px;background:var(--bluebg);color:var(--blue)}
.live.warn{background:color-mix(in srgb,var(--orange) 16%,transparent);color:var(--orange)}
.live.err{background:color-mix(in srgb,var(--red) 15%,transparent);color:var(--red)}
/* align-self:start stops the sidebar being grid-stretched to match the
   main content column's height — without this, the account card / theme
   toggle at the end of it end up at wildly different screen positions
   depending on how tall the current step's content is, and the dashed
   connector line (sized off the sidebar's stretched height) overshoots
   past the last nav item into whatever sits below it. position:sticky
   keeps it pinned in view on tall pages without any pixel-guessing about
   header height — it just sticks at the top of the scroll container. */
.side{background:var(--side);border-right:1px solid var(--sep);padding:22px 14px;display:flex;flex-direction:column;position:sticky;top:0;align-self:start;max-height:100vh;overflow-y:auto}
.themebar{padding:10px 6px 16px;border-bottom:1px solid var(--sep);margin-bottom:14px}
.themebar .seg{display:flex;width:100%}
.themebar .seg button{flex:1;text-align:center}
.sidehdr{font-size:11px;font-weight:700;color:var(--label2);letter-spacing:.1em;text-transform:uppercase;padding:0 10px 14px}
/* Scoped to .sidenav (just the step-list wrapper), not the whole
   sidebar, so its length only ever depends on the fixed 8-item nav list
   — never on the account card, theme toggle, or anything else nearby. */
.sidenav{position:relative}
.sidepath{position:absolute;left:35px;top:40px;bottom:24px;border-left:1px dashed color-mix(in srgb,var(--green) 45%,var(--sep));pointer-events:none}
.srow{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:12px;cursor:pointer;margin-bottom:4px;position:relative}
.srow:hover{background:rgba(14,61,44,.05)}
.srow.on{background:var(--paper);box-shadow:var(--shadow)}
.sicon{width:24px;height:24px;border-radius:50%;border:1px solid color-mix(in srgb,var(--green) 40%,var(--sep));background:var(--side);color:var(--label2);display:flex;align-items:center;justify-content:center;font:700 11px Fraunces,Georgia,serif;flex:none;z-index:1}
.srow.on .sicon{background:var(--terra);border-color:var(--terra);color:#fff7ef}
.srow:not(.on) .sicon{background:var(--side);color:var(--label2)}
.sicon .lucide{width:14px;height:14px}
.slab{font-size:14px;font-weight:500}
.srow.on .slab{font-weight:600;color:var(--blue)}
.ssub{font-size:11.5px;color:var(--label2)}
.acct{padding:12px;margin:0 4px 12px;background:var(--card);border-radius:12px;font-size:12px;color:var(--label2);border:1px solid var(--sep)}
.acct b{color:var(--label);display:block;font-size:13px;margin-bottom:2px}
.content{padding:0}
.cap{margin:16px 40px 0;background:var(--bluebg);color:var(--blue);border-radius:10px;padding:11px 15px;font-size:13px;line-height:1.45}
.canvas{padding:14px 40px}
.eyebrow{color:var(--terra);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin:18px 0 0}
.largetitle{font-family:"Fraunces",Georgia,serif;font-size:clamp(28px,3.2vw,40px);font-weight:600;letter-spacing:-.03em;margin:10px 0 8px;color:var(--blue);max-width:720px}
.subtitle{color:var(--label2);font-size:16px;margin:0 0 22px;max-width:620px;line-height:1.5}
.ghdr{font-size:13px;color:var(--label2);padding:22px 16px 7px 4px;font-weight:400}
.list{background:var(--card);border:1px solid var(--sep);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.li{display:flex;align-items:center;gap:12px;padding:13px 16px;position:relative;font-size:15px}
.li+.li::before{content:"";position:absolute;left:16px;right:0;top:0;height:1px;background:var(--sep)}
.li .lead{width:29px;height:29px;border-radius:8px;background:var(--fill);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--label2);flex:none}
.li .val{margin-left:auto;color:var(--label2);font-size:14px}
.chev{color:var(--label3);font-size:17px;margin-left:8px}
.check{margin-left:auto;color:var(--terra);font-size:18px;font-weight:700}
.litext{display:flex;flex-direction:column}.litext .t{font-weight:500}.litext .d{font-size:13px;color:var(--label2);margin-top:2px;line-height:1.35}
.btn{font:inherit;font-size:15px;font-weight:600;border-radius:999px;padding:11px 18px;border:none;cursor:pointer;letter-spacing:-.01em}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.filled{background:var(--terra);color:#fff7ef}
.btn.tinted{background:var(--bluebg);color:var(--blue)}
.btn.gray{background:var(--fill);color:var(--label)}
.btn.plain{background:none;color:var(--blue);padding:11px 4px}
.btn.sm{font-size:14px;padding:7px 13px;border-radius:999px}
.btnrow{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:20px}
.seg{display:inline-flex;background:var(--fill);border-radius:9px;padding:2px}
.seg button{border:none;background:none;padding:6px 16px;border-radius:7px;font:inherit;font-size:13px;font-weight:500;color:var(--label);cursor:pointer}
.seg button.on{background:var(--card);box-shadow:var(--shadow);font-weight:600}
.sw{width:51px;height:31px;border-radius:16px;background:var(--green);position:relative;flex:none;cursor:pointer}
.sw.off{background:var(--fill)}
.sw i{position:absolute;top:2px;left:22px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:left .15s}
.sw.off i{left:2px}
.badge{font-size:12.5px;font-weight:600;padding:3px 10px;border-radius:99px}
.b-good{color:var(--green);background:color-mix(in srgb,var(--green) 15%,transparent)}
.b-fair{color:var(--orange);background:color-mix(in srgb,var(--orange) 16%,transparent)}
.b-bad{color:var(--red);background:color-mix(in srgb,var(--red) 15%,transparent)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.card{background:var(--card);border:1px solid var(--sep);border-radius:18px;padding:18px;box-shadow:var(--shadow)}
.tag{font-size:13px;color:var(--label2)}
.bar{height:8px;border-radius:4px;background:var(--fill);overflow:hidden}.bar>i{display:block;height:100%;background:var(--blue);border-radius:4px}
.dropzone{border:2px dashed var(--label3);border-radius:18px;padding:36px;text-align:center;color:var(--label2);cursor:pointer;background:var(--paper)}
.dropzone.drag{border-color:var(--blue);background:var(--bluebg)}
.sourcegrid{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;margin:8px 0 18px}
.source{background:var(--paper);border:1px solid var(--sep);border-radius:18px;padding:22px;cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s;min-height:150px}
.source:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--green) 40%,var(--sep))}
.source.primary{border:1.5px solid var(--blue);position:relative}
.source.primary:after{content:"Recommended";position:absolute;right:14px;top:14px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--terra)}
.source.drag{border-color:var(--blue);background:var(--bluebg)}
.sourceicon{width:40px;height:40px;border-radius:12px;background:#e3ebdf;color:var(--blue);display:grid;place-items:center;margin-bottom:16px}
.source h3{font:600 18px Fraunces,Georgia,serif;margin:0 0 6px;color:var(--blue)}
.source p{margin:0;font-size:14px;color:var(--label2);line-height:1.45}
.statnum{font:700 26px/1 Fraunces,Georgia,serif;letter-spacing:-.02em;margin:6px 0 10px;color:var(--blue)}
.pathcard{display:flex;flex-direction:column;gap:8px}
.pathpill{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:var(--fill);cursor:pointer}
.pathpill:hover{background:color-mix(in srgb,var(--blue) 8%,var(--fill))}
.pathn{width:24px;height:24px;border-radius:50%;background:var(--paper);border:1px solid var(--sep);display:grid;place-items:center;font:700 11px Fraunces,Georgia,serif;color:var(--terra);flex:none}
.patht{flex:1;font-weight:500}.paths{color:var(--label3);font-size:12px}
.buildgrid{display:grid;grid-template-columns:1.5fr 1fr;gap:16px;margin-top:18px}
.accesscode{font:700 28px/1.1 Fraunces,Georgia,serif;letter-spacing:.04em;margin:0 0 12px;color:var(--blue)}
.emptypublish{min-height:88px;display:flex;align-items:center;justify-content:center;color:var(--label2);text-align:center;padding:24px}
.privacyline{display:flex;align-items:center;gap:8px}
.privacyline svg{flex:none;color:var(--green)}
.lead svg{display:block}
.lucide{display:inline-block;vertical-align:-.15em;flex:none}
.btn .lucide{margin-right:7px}
.chev .lucide{display:block}
.pill{display:inline-flex;align-items:center;gap:6px;background:var(--fill);border-radius:99px;padding:7px 14px;font-size:13px;font-weight:500}
.note{font-size:13px;color:var(--label2);margin:12px 4px}
/* A toast fired while the auth modal is open (every error path in doAuth,
   doRecover, doReset calls setToast then showAuth(true)) used to render
   behind .authmask (z-index:40, opaque, position:fixed, covers the whole
   viewport). The toast lived in normal document flow in the page underneath,
   so it existed in the DOM but was never visible: a duplicate-account
   signup, a wrong password, a rate-limit hit all looked like the button did
   nothing. Fixed here rather than fixed by chance: the toast now floats
   above every modal, fixed and centered, so an error is always seen. */
.toast{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:50;
  max-width:min(460px,92vw);font-size:13px;padding:10px 14px;border-radius:10px;
  margin:0;background:var(--fill);box-shadow:0 8px 24px rgba(0,0,0,.16)}
.toast.err{background:color-mix(in srgb,var(--red) 12%,transparent);color:var(--red)}
.toast.warn{background:color-mix(in srgb,var(--orange) 14%,transparent);color:var(--orange)}
.toast.ok{background:color-mix(in srgb,var(--green) 12%,transparent);color:var(--green)}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.field label{font-size:13px;color:var(--label2)}
.field input,.field textarea,.field select{
  font:inherit;padding:11px 14px;border-radius:12px;border:1px solid var(--sep);
  background:var(--card);color:var(--label);width:100%;
}
.field textarea{min-height:120px;resize:vertical}
.section-html{font-size:14px;line-height:1.55;max-height:420px;overflow:auto}
.section-html h1,.section-html h2,.section-html h3{letter-spacing:-.02em;font-family:Fraunces,Georgia,serif}
.authmask,.billingmask{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:40;padding:24px}
.authmask[hidden],.billingmask[hidden]{display:none}
.authcard,.billingcard{width:min(420px,100%);background:var(--card);border-radius:18px;padding:28px;box-shadow:0 16px 50px rgba(14,61,44,.14);border:1px solid var(--sep)}
.billingcard.wide{width:min(760px,96vw);max-height:88vh;overflow:auto}
.modelgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:10px}
.modelcard{background:var(--paper);border:1px solid var(--sep);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:6px}
.modelcard .mhead{display:flex;align-items:center;justify-content:space-between;gap:8px}
.modelcard .mname{font-weight:600;font-size:14.5px}
.modelcard .mprov{font-size:12px;color:var(--label2);text-transform:capitalize}
.modelcard .mcaveat{font-size:13px;color:var(--label2);line-height:1.4}
.modelcard details{font-size:12.5px;color:var(--label2)}
.modelcard details summary{cursor:pointer;color:var(--blue);font-weight:500;list-style:none}
.modelcard details ul{margin:6px 0 0;padding-left:16px}
.modelcard .mactions{margin-top:4px;display:flex;gap:8px;flex-wrap:wrap}
.guidebox{background:var(--fill);border-radius:12px;padding:12px 14px;margin-top:8px;font-size:13px}
.guidebox ol{margin:6px 0;padding-left:18px}
.guidebox li{margin:4px 0;line-height:1.4}
.guidebox a{color:var(--blue)}
.meter{background:var(--fill);border-radius:12px;padding:12px 14px;margin-bottom:14px;font-size:13px;color:var(--label2)}
.meter b{color:var(--label)}
.billingcard .price{font-size:22px;font-weight:700;letter-spacing:-.02em;margin:2px 0 4px}
.billingcard .fee{font-size:13px;color:var(--label2);margin:0 0 14px}
/* Was position:fixed to the viewport bottom — always visible, but it
   covered content on short pages and felt stuck to the whole screen
   rather than to the step you were on. Now it flows at the end of the
   content column instead: it's still the last thing you see on every
   step, just scrolls with that step instead of floating over it. */
.foot{margin-top:32px;background:var(--paper);border-top:1px solid var(--sep);padding:16px 40px;display:flex;justify-content:space-between;align-items:center}
.dots{display:flex;gap:7px}.dot{width:7px;height:7px;border-radius:50%;background:var(--label3)}.dot.on{background:var(--terra)}
.mobpath{display:none;gap:6px;overflow-x:auto;padding:10px 16px;border-bottom:1px solid var(--sep);background:var(--side);-webkit-overflow-scrolling:touch}
.mobpath button{flex:none;border:1px solid var(--sep);background:var(--paper);color:var(--label2);border-radius:999px;padding:7px 12px;font:600 12px/1 "Source Sans 3",sans-serif;cursor:pointer}
.mobpath button.on{background:var(--terra);border-color:var(--terra);color:#fff7ef}
@media(max-width:840px){.app{grid-template-columns:1fr}.side{display:none}.grid2,.grid3,.grid4,.sourcegrid,.buildgrid{grid-template-columns:1fr}.projectchip{display:none}.mobpath{display:flex}}

[data-x="x000"]{background:var(--fill);color:var(--label2)}
[data-x="x001"]{margin:6px 0}
[data-x="x002"]{margin-top:8px}
[data-x="x003"]{margin-bottom:12px}
[data-x="x004"]{margin-bottom:14px}
[data-x="x005"]{align-items:flex-start}
[data-x="x006"]{padding-top:0}
[data-x="x007"]{margin-top:0}
[data-x="x008"]{margin-bottom:16px}
[data-x="x009"]{margin-top:6px}
[data-x="x010"]{padding:0 4px}
[data-x="x011"]{margin:0}
[data-x="x012"]{cursor:pointer}
[data-x="x013"]{display:flex;gap:8px;flex-wrap:wrap}
[data-x="x014"]{flex:1;min-width:180px}
[data-x="x015"]{flex:1}
[data-x="x016"]{margin-top:8px;max-width:340px}
[data-x="x017"]{width:${pct}%}
[data-x="x018"]{background:color-mix(in srgb,var(--green) 15%,transparent);color:var(--green)}
[data-x="x019"]{width:${Math.min(100, Number(c[1])*8)||8}%}
[data-x="x020"]{width:${onTopic}%}
[data-x="x021"]{appearance:auto}
[data-x="x022"]{font-weight:700;margin-bottom:10px;letter-spacing:.04em;text-transform:uppercase;font-size:11px}
[data-x="x023"]{margin-top:16px}
[data-x="x024"]{justify-content:space-between}
[data-x="x025"]{display:flex;justify-content:space-between;align-items:center}
[data-x="x026"]{margin:8px 0 0}
[data-x="x027"]{font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:8px}
[data-x="x028"]{margin:0 0 12px}
[data-x="x029"]{font-size:14px;word-break:break-all;margin:0}
[data-x="x030"]{color:var(--blue)}
[data-x="x031"]{margin-top:14px}
[data-x="x032"]{margin-left:auto}
[data-x="x033"]{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
[data-x="x034"]{flex:1;min-width:160px}
[data-x="x035"]{width:190px}
[data-x="x036"]{width:210px}
[data-x="x037"]{margin:0 0 10px}
[data-x="x038"]{margin-bottom:10px}
[data-x="x039"]{font-weight:700;margin-bottom:6px}
[data-x="x040"]{font-size:14px;white-space:pre-wrap;margin:0 0 10px}
[data-x="x041"]{margin:0 0 10px;padding-left:18px;font-size:14px;color:var(--label2)}
[data-x="x042"]{margin-bottom:4px}
[data-x="x043"]{padding:8px 0}
[data-x="x044"]{margin:10px 0 0}
[data-x="x045"]{flex:1;min-width:200px}
[data-x="x046"]{margin:0 0 12px;padding-left:18px;font-size:14px;color:var(--label2)}

/* ── the Stack's meanings, expressed as product surfaces ──────────────── */
/* Material you brought in: corpus items, uploads, source counts. */
.is-material,.corpus-chip,.src-chip{background:var(--amber);color:var(--on-amber);
  border-radius:999px;padding:4px 11px;font-size:12.5px;font-weight:650;letter-spacing:-.01em}
/* What stays yours: anonymisation, sealed state, publish control. */
.is-private{background:var(--bluebg);color:var(--blue);border-radius:999px;
  padding:4px 11px;font-size:12.5px;font-weight:650}
/* The act: exactly one per view. */
.btn-primary,button.primary,.cta{background:var(--coral);color:#fff;border:0}
.btn-primary:hover,button.primary:hover{filter:brightness(.94)}
/* Type on any amber surface eases its weight — 700 on a bright field reads
   heavier than the same weight on paper (Founder ruling, 2026-08-18). */
.is-material,.on-amber,[data-ground="amber"]{font-weight:650}
[data-ground="amber"]{background:var(--amber);color:var(--on-amber)}
[data-ground="forest"]{background:var(--blue);color:#FBF7EF}

/* ══ THE STACK, PORTED TO THE APP ═══════════════════════════════════════════
   Founder, 2026-08-19, ratifying the design system: "Excellent work, approved,
   apply immediately. And design the UI based on this."

   Applied as a layer over the existing rules rather than a rewrite, so every
   class the app already renders keeps working and the diff stays readable.
   The tokens do most of it: this stylesheet was already fully token-driven,
   so retokenising re-aims every surface at once.

   DESIGN-SYSTEM.md §6 is explicit that the palette must NOT arrive without the
   structure — "that already happened once, the app took the colours in the
   first conversion and kept its old layout." So the structure comes too: the
   forest sidebar, the coral ground, paper panels on it, the 26px radius, the
   tightened card rhythm, and Archivo in place of the serif.

   What §6 re-decides for a tool rather than a page is honoured: no 1000px
   reading measure, tighter gaps than the site's 22px, type stepped down, and
   state carried by form as well as colour. */
:root{
  --coral:#D3431A; --terra:#D3431A;
  --amber:#F6C564; --on-amber:#2A1C06;
  --forest:#244A36; --sand:#F2E4C6;
  --bg:var(--coral);
  --paper:#FBF7EF; --card:#FFFDF9; --card2:#FFFDF9;
  --side:var(--forest);
  --label:#171A16; --label2:#58604F; --label3:#8A8478;
  --sep:rgba(23,26,22,.12);
  --fill:rgba(23,26,22,.06);
  --blue:var(--forest); --bluebg:rgba(36,74,54,.10);
  /* The semantic set the site never needed. Kept clear of the four wayfinding
     hues: coral means THE ACT and must never also mean danger. */
  --green:#1B6B45; --orange:#8A5A00; --red:#A32B20;
  --shadow:0 10px 30px rgba(23,26,22,.10);
  --radius:26px; --radius-2:16px;
}
/* Dark stays dark, but on the same bones: forest deepens, coral holds as the
   act. Not a second design, the same one at night. */
@media(prefers-color-scheme:dark){:root{
  --bg:#14261C; --paper:#1B3126; --card:#1F3A2C; --card2:#1F3A2C; --side:#102019;
  --label:#F3F0E8; --label2:rgba(243,240,232,.66); --label3:rgba(243,240,232,.36);
  --sep:rgba(243,240,232,.16); --fill:rgba(243,240,232,.08);
  --blue:#9CC9AF; --bluebg:rgba(156,201,175,.14);
  --green:#6FBF93; --orange:#E0B25C; --red:#E88579;
  --coral:#E4622F; --terra:#E4622F;
  --shadow:0 10px 30px rgba(0,0,0,.34);
}}
:root[data-theme="dark"]{
  --bg:#14261C; --paper:#1B3126; --card:#1F3A2C; --card2:#1F3A2C; --side:#102019;
  --label:#F3F0E8; --label2:rgba(243,240,232,.66); --label3:rgba(243,240,232,.36);
  --sep:rgba(243,240,232,.16); --fill:rgba(243,240,232,.08);
  --blue:#9CC9AF; --bluebg:rgba(156,201,175,.14);
  --green:#6FBF93; --orange:#E0B25C; --red:#E88579;
  --coral:#E4622F; --terra:#E4622F;
  --shadow:0 10px 30px rgba(0,0,0,.34);
}
:root[data-theme="light"]{
  --bg:#D3431A; --paper:#FBF7EF; --card:#FFFDF9; --card2:#FFFDF9; --side:#244A36;
  --label:#171A16; --label2:#58604F; --label3:#8A8478;
  --sep:rgba(23,26,22,.12); --fill:rgba(23,26,22,.06);
  --blue:#244A36; --bluebg:rgba(36,74,54,.10);
  --green:#1B6B45; --orange:#8A5A00; --red:#A32B20;
  --coral:#D3431A; --terra:#D3431A;
  --shadow:0 10px 30px rgba(23,26,22,.10);
}

body{font-family:'Archivo',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  font-size:15px;line-height:1.5;letter-spacing:-.01em}
/* Archivo everywhere: the serif was the old product's voice, not this one. */
.brand,.sicon,.largetitle,.source h3,.statnum,.pathn,.accesscode,
.section-html h1,.section-html h2,.section-html h3,.mobpath button{
  font-family:'Archivo',-apple-system,system-ui,sans-serif!important}
.largetitle{font-weight:700;letter-spacing:-.03em;color:var(--label)}
.subtitle{color:var(--label2)}

/* the chrome sits on the coral ground, not on a tinted panel */
.chrome{background:var(--paper);border-bottom:0;border-radius:0}
.brand{color:var(--coral)}

/* THE SIDEBAR IS THE FOREST GROUND. Structure, not just hue: the path reads as
   one dark column against the coral, the way the site's forest chapter does. */
.side{background:var(--side);border-right:0;color:#FBF7EF;min-height:100vh}
.side .sidehdr{color:rgba(251,247,239,.62)}
.side .themebar{border-bottom-color:rgba(251,247,239,.20)}
.side .seg{background:rgba(251,247,239,.12)}
.side .seg button{color:rgba(251,247,239,.80)}
.side .seg button.on{background:var(--paper);color:var(--forest)}
.srow{color:rgba(251,247,239,.86);border-radius:12px}
/* The sub-label inherits --label2, which is now dark ink for use ON PAPER.
   On the forest column that made the whole path almost unreadable. Caught by
   looking at it: the classes were all correct and the screen was wrong. */
.side .slab{color:#FBF7EF}
.side .ssub{color:rgba(251,247,239,.76)}  /* .62 measured 4.00:1 on the
   SELECTED row's lighter forest (#355845) — it passed on the plain sidebar
   and failed only on the row you are standing on, which is why it surfaced
   intermittently. .76 is 5.12:1 there and 6.17:1 unselected, still clearly
   secondary to the label above it. */
.srow.on .slab{color:var(--forest)}
.srow.on .ssub{color:var(--label2)}
.srow:hover{background:rgba(251,247,239,.08)}
.srow.on{background:var(--paper);box-shadow:none}
.srow.on .slab{color:var(--forest)}
.srow.on .ssub{color:var(--label2)}
.srow .sicon{background:rgba(251,247,239,.16);border-color:transparent;color:rgba(251,247,239,.86)}
.srow.on .sicon{background:var(--coral);border-color:var(--coral);color:#fff}
.sidepath{border-left-color:rgba(251,247,239,.26)}
.acct{background:rgba(251,247,239,.10);border-color:transparent;color:rgba(251,247,239,.80)}
.acct b{color:#FBF7EF}
.acct a{color:#FBF7EF}

/* the working area is the coral ground with paper cards resting on it */
.app{background:var(--coral)}
.canvas,.cap{color:var(--label)}
.cap{background:var(--paper);color:var(--label2);border-radius:var(--radius-2);
  margin:16px 26px 0;padding:13px 18px}
.canvas{padding:14px 26px 60px}
.list,.card{border-radius:var(--radius-2);border:0;box-shadow:var(--shadow)}
.card{padding:22px}
/* tighter than the site's reading rhythm: 22px is a page, this is a tool */
.grid2,.grid3,.grid4,.buildgrid,.sourcegrid,.modelgrid{gap:14px}
.ghdr{color:#fff;font-weight:650;padding:22px 4px 8px;font-size:13px;
  letter-spacing:.10em;text-transform:uppercase;opacity:.86}
.eyebrow{color:#fff;opacity:.86}
.largetitle{color:var(--label)}
/* a bare heading and lede sit on the coral, so they take the coral's ink */
.canvas > .largetitle,.canvas > .subtitle,.canvas > .lede,.canvas > .note{color:#fff}
.canvas > .subtitle,.canvas > .lede{opacity:.92}
.lede{font-size:17px;line-height:1.45;margin:4px 4px 6px;max-width:66ch}

/* the act is coral on white or white on coral, and nothing else is a button */
.btn.filled{background:var(--coral);color:#fff}
.btn.tinted{background:var(--paper);color:var(--label);box-shadow:var(--shadow)}
.card .btn.tinted,.list .btn.tinted,.panel .btn.tinted{background:var(--fill);box-shadow:none}
.btn.plain{color:#fff}
.card .btn.plain,.list .btn.plain,.panel .btn.plain{color:var(--coral)}

/* state reads as form as well as colour (§6): a pill with a weight and a
   shape, so it survives being seen by someone who cannot separate the hues */
.badge{font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:11.5px;
  padding:4px 10px;border-radius:8px}
.b-good{color:var(--green);background:rgba(27,107,69,.12)}
.b-fair{color:var(--orange);background:rgba(138,90,0,.12)}
.b-bad{color:var(--red);background:rgba(163,43,32,.10)}

.dropzone{border-radius:var(--radius-2);background:var(--card);border-color:var(--sep)}
.source{border-radius:var(--radius-2);border-color:var(--sep);background:var(--card)}
.source.primary{border-color:var(--coral)}
.source.primary:after{color:var(--coral)}
.sourceicon{background:var(--fill);color:var(--forest);border-radius:12px}
.accesscode{color:var(--coral)}
.li .lead{background:var(--fill);color:var(--label2);border-radius:9px}
.bar>i{background:var(--forest)}

/* ── the three account surfaces ──────────────────────────────────────────── */
.whoami{display:flex;align-items:center;gap:14px}
.whoami .avatar{width:44px;height:44px;border-radius:50%;background:var(--sand);
  color:var(--forest);display:grid;place-items:center;font-weight:700;font-size:18px;flex:none}
.whoami .whotext{flex:1;min-width:0}
.whoami .whotext b{display:block;font-size:17px;letter-spacing:-.02em}
.whoami .whotext span{font-size:13px;color:var(--label2)}
/* the library's three counts: the number leads, the label follows */
.stats3{display:grid;grid-template-columns:repeat(3,1fr)}
.stats3 .li+.li::before{left:0;top:16px;bottom:16px;right:auto;width:1px;height:auto}
.stats3 .litext .t{font-size:26px;font-weight:700;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;line-height:1.05}
.stats3 .litext .d{font-size:12.5px}
.keynote{display:flex;align-items:flex-start;gap:8px;color:#fff;opacity:.88;margin:14px 4px}
.keynote svg{flex:none;margin-top:2px}

@media(max-width:840px){
  /* The path strip already scrolls, but a grid track sizes to its content
     unless it is told not to, so the strip's intrinsic width was widening the
     whole page instead of scrolling inside it: 401px of sideways scroll on a
     430px screen, which is the one thing a vertical page must never do. It
     appeared only after the strip gained three more items. minmax(0,1fr) and
     min-width:0 are what actually stop it. */
  .app{grid-template-columns:minmax(0,1fr)}
  .app > *,.content,.mobpath,.canvas,.cap{min-width:0}
  .li{flex-wrap:wrap}
  .li .val{margin-left:auto}
}
@media(max-width:900px){
  .cap{margin:12px 14px 0}
  .canvas{padding:12px 14px 40px}
  .stats3{grid-template-columns:1fr}
  .stats3 .li+.li::before{left:16px;right:0;top:0;height:1px;width:auto;bottom:auto}
}

/* The transfer target picker. The app had no select anywhere until now, so it
   inherits nothing; matched to .field input so the row reads as one control. */
.field select{font-family:inherit;font-size:15px;color:var(--label);background:var(--card);
  border:1px solid var(--sep);border-radius:12px;padding:11px 14px;min-height:44px;
  max-width:100%;cursor:pointer}
.field select:focus{border-color:var(--coral);outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--coral) 18%,transparent)}

/* Closing-your-account panel. The counts are the decision, so they read as a
   list of consequences rather than a warning banner. */
.lede-in{font-size:16px;line-height:1.45;margin-bottom:14px}
.mt-in{margin-bottom:14px}
.ghdr-in{font-size:13px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;
  color:var(--label2);margin:18px 0 8px}
.pending-note{display:flex;align-items:flex-start;gap:8px;margin-top:16px}
.pending-note svg{flex:none;margin-top:2px;color:var(--label2)}

/* Removal preview. Sits above the library list, in place, rather than in a
   modal: the thing it describes is the list underneath it. */
.li .val .rowact{margin-left:14px}
.rm-card{margin-bottom:16px}
.rm-head{display:flex; align-items:flex-start; gap:16px; margin-bottom:16px}
.rm-head > div{flex:1; min-width:0}
.rm-head b{font-size:19px; font-weight:700; letter-spacing:-.025em; display:block}
.kicker-in{font-size:11px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--label2); margin-bottom:5px}
.val.v-hit{color:var(--red)}
.rm-blind{margin-top:14px; padding:16px 18px; border-radius:12px;
  background:color-mix(in srgb,var(--red) 9%,transparent); border-left:3px solid var(--red)}
.rm-blind p{margin:0; font-size:15px; line-height:1.5}
.rm-blind p + p{margin-top:8px; color:var(--label2)}
.rm-named{margin-top:14px; padding:16px 18px; border-radius:12px;
  background:color-mix(in srgb,var(--green) 10%,transparent); border-left:3px solid var(--green)}
.rm-named p{margin:0 0 10px; font-size:15px; line-height:1.5}
.rm-named .lessons{display:flex; flex-direction:column; gap:6px; margin:0; padding:0; list-style:none}
.rm-named .lessons li{display:flex; align-items:center; gap:10px; font-size:14px;
  background:var(--card); border-radius:8px; padding:9px 12px}
.rm-named .lessons li b{font-weight:600; flex:1}
.rm-named .lessons li span{font-size:12px; color:var(--label2); flex:none}
@media(max-width:840px){
  .li .val .rowact{margin-left:0; margin-top:8px}
}

/* The one destructive act in the product. Coral is THE ACT and must never also
   mean danger, so this takes the semantic stop colour instead. */
.btn.danger{background:var(--red);color:#fff}
.btn.danger:hover{filter:brightness(1.06)}

/* ─────────────────────────────────────────────────────────────────────────
   CONTRAST CORRECTION — 2026-08-22, from the first run of
   tools/contrast-audit.mjs against the live app in both themes.

   82 measured AA failures, from five causes, not eighty-two bugs:

   1. THE TOASTS WERE INVISIBLE, IN BOTH THEMES. `.toast.*` painted a 12%
      tint of its own text colour over "transparent". On the old paper
      ground that composited to a pale wash behind dark ink. The Stack made
      the working ground CORAL, so the same rule composited to coral-over-
      coral and every status message in the app measured 1.27:1 against a
      4.5:1 requirement. Success, error and warning alike — including the
      messages the undo work depends on to say a deletion happened. A person
      reviewing a screenshot reads the words they already know are there,
      which is why looking never caught it and measuring did.

   2. CORAL WAS LIGHTENED FOR DARK, AND CORAL IS A GROUND. `.app` is the
      coral working surface in both themes and it carries white text. Dark
      moved it #D3431A → #E4622F, taking white from 4.58:1 to 3.45:1 and
      failing 63 elements at a stroke. Dark deepens the ground instead: the
      file's own note says "forest deepens, coral holds as the act", and
      deepening is what that means for a surface.

   3. CORAL IS ALSO INK, AND THE TWO ROLES PULL OPPOSITE WAYS. As a ground
      under white it must be dark; as text on a paper card it must be light
      enough to read on dark paper. One token cannot be both, so the ink
      role is named separately rather than compromised.

   4. --forest WAS NEVER THEMED. It is fixed at #244A36 and used for the
      selected step label, the segmented control's live tab, source icons
      and the progress bar. On dark paper that measured 1.39:1 — the step
      you are standing on was the least readable word on the screen.

   5. THE DANGER BUTTON. White on the dark red measured 2.60:1, on
      "Close my account" — the most consequential control in the product.

   Every value below is measured, not chosen by eye. The audit is the guard;
   it was falsified against a planted defect before any of this was trusted.
   ───────────────────────────────────────────────────────────────────────── */

:root{
  --ground:#D3431A;      /* coral as a SURFACE: white on it, 4.58:1 */
  --coral-ink:#A8330D;   /* coral as TEXT on paper/card:      7.10:1 */
  --danger-ground:#A32B20;
}
@media(prefers-color-scheme:dark){:root{
  --ground:#B83A16;      /* deepened, so white reads:         5.75:1 */
  --coral-ink:#F5A98A;   /* lifted, so it reads on dark card: 6.60:1 */
  --danger-ground:#C4503F;
  --forest:#B9DBC8;      /* themed at last:  on dark paper    9.27:1 */
}}
:root[data-theme="dark"]{
  --ground:#B83A16; --coral-ink:#F5A98A; --danger-ground:#C4503F;
  --forest:#B9DBC8;
}
:root[data-theme="light"]{
  --ground:#D3431A; --coral-ink:#A8330D; --danger-ground:#A32B20;
  --forest:#244A36;
}

/* the ground, and everything that is a coral surface carrying white */
.app{background:var(--ground)}
.btn.filled{background:var(--ground);color:#fff}
.srow.on .sicon{background:var(--ground);border-color:var(--ground);color:#fff}
.mobpath button.on{background:var(--ground);border-color:var(--ground);color:#fff}

/* coral as ink, on paper and on cards */
.card .btn.plain,.list .btn.plain,.panel .btn.plain{color:var(--coral-ink)}
.source.primary:after{color:var(--coral-ink)}
.accesscode{color:var(--coral-ink)}
.source.primary{border-color:var(--coral-ink)}

/* A plain button is a LABEL, not a surface. On the coral ground it is white;
   anywhere paper sits behind it, it took white onto white — 1.02:1 on
   "Forgot password?" and 1.07:1 on "Back". Paper contexts get ink. */
.btn.plain{color:var(--coral-ink)}
.canvas > .btn.plain,.canvas > .btnrow > .btn.plain,
.canvas > .hdrow .btn.plain{color:#fff}

/* a tag riding on the coral ground takes the ground's ink, not the card's */
.canvas > .tag,.canvas > * > .tag{color:#fff;opacity:.92}
/* ...but a tag inside a paper card is on paper, not on the ground. Restoring
   it AFTER the rule above rather than narrowing that one, because the tags
   that ride the ground sit at several depths and the card is the reliable
   landmark. */
.card .tag,.list .tag,.modal .tag{color:var(--label2);opacity:1}

.whoami .avatar{color:#244A36}   /* on --sand, light in both themes: 7.92:1 */
.btn.danger{background:var(--danger-ground);color:#fff}
.toast{background:var(--card);border:1px solid var(--sep);color:var(--label);
  box-shadow:var(--shadow)}
.toast.ok{background:var(--card);color:var(--green);border-color:color-mix(in srgb,var(--green) 34%,transparent)}
.toast.err{background:var(--card);color:var(--red);border-color:color-mix(in srgb,var(--red) 34%,transparent)}
.toast.warn{background:var(--card);color:var(--orange);border-color:color-mix(in srgb,var(--orange) 34%,transparent)}

/* ── The profile menu, and the shell it replaced ────────────────────────────
   Founder, 2026-08-23, walking the app: "Academy Review at the very top, I
   have no idea what that is." "The email and sign out should not be there.
   We should have, just like a regular software, a circle next to Live
   connected, where you click on it and there's a dropdown." "Remove dark
   light and auto, keep it all light." "This dotted line is the worst dotted
   line in the world. Remove it, it's worthless and it doesn't say anything."
   The .acct block, .themebar and .sidepath are gone from the markup; these
   rules dress what replaced them. */
.chrome{position:relative}
.who{margin-left:auto;position:relative}
.whobtn{width:32px;height:32px;border-radius:50%;border:1px solid var(--sep);
  background:var(--card);color:var(--label);font:700 13px/1 Archivo,sans-serif;
  cursor:pointer;display:grid;place-items:center}
.whobtn:hover{border-color:var(--label3)}
.whomenu{position:absolute;right:0;top:40px;min-width:214px;background:var(--card);
  border:1px solid var(--sep);border-radius:12px;box-shadow:var(--shadow);
  padding:6px;z-index:60;display:grid;gap:1px}
.whomail{padding:9px 11px 8px;font-size:12.5px;color:var(--label2);
  border-bottom:1px solid var(--sep);margin-bottom:5px;overflow:hidden;text-overflow:ellipsis}
.whomenu button{all:unset;display:block;padding:9px 11px;border-radius:8px;cursor:pointer;
  font:500 14px/1.2 Archivo,sans-serif;color:var(--label)}
.whomenu button:hover{background:var(--fill)}

/* ── THE SHAPE OF THE APP ───────────────────────────────────────────────────
   Founder, 2026-08-23: the sidebar holds the sections of the software, not a
   journey; the eight steps are the process of creating a course and live
   inside My Academy; the fixed white bar at the foot goes, and if stages are
   shown at all they go at the top. These rules dress that structure. */

/* The build path, nested under My Academy and only while a course is open. */
.substeps{display:grid;gap:1px;margin:2px 0 10px 14px;
  border-left:1px solid rgba(251,247,239,.20);padding-left:10px}
.substep{all:unset;display:flex;align-items:center;gap:9px;cursor:pointer;
  padding:6px 9px;border-radius:9px;font:500 13px/1.25 Archivo,sans-serif;
  color:rgba(251,247,239,.78)}
.substep:hover{background:rgba(251,247,239,.08)}
.substep.on{background:var(--paper);color:var(--forest);font-weight:600}
.subn{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;
  font-size:11px;font-weight:700;background:rgba(251,247,239,.16);color:inherit;flex:none}
.substep.on .subn{background:var(--coral);color:#fff}

/* The stage strip, at the top of a build screen. Replaces the dots that used
   to sit in the removed foot bar, and it is legible: numbers and names. */
.crumb{display:flex;align-items:center;gap:8px;font-size:12.5px;
  color:var(--label2);margin-bottom:12px}
.crumblink{all:unset;cursor:pointer;color:var(--terra);font-weight:600}
.crumblink:hover{text-decoration:underline}
.stages{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px}
.stagepip{all:unset;display:flex;align-items:center;gap:7px;cursor:pointer;
  padding:5px 11px 5px 6px;border-radius:999px;border:1px solid var(--sep);
  background:var(--card);color:var(--label2);font:500 12.5px/1.2 Archivo,sans-serif}
.stagepip:hover{border-color:var(--label3)}
.stagepip span{display:grid;place-items:center;width:19px;height:19px;border-radius:50%;
  background:var(--fill);color:var(--label2);font-size:11px;font-weight:700;flex:none}
.stagepip.done span{background:var(--green,#1B6B45);color:#fff}
.stagepip.on{border-color:var(--terra);color:var(--forest);font-weight:600}
.stagepip.on span{background:var(--terra);color:#fff}

/* Back / Continue as ordinary buttons in the flow. */
.btnrow.stepnav{margin-top:26px;padding-top:18px;border-top:1px solid var(--sep);
  justify-content:space-between}

/* Add material: one column, a file box then a paste box. Founder C4 — the old
   1.15fr/.85fr grid put a description nobody could read beside the drop box. */
.addpanel{display:grid;gap:14px;margin:8px 0 18px}
.addpanel .source.primary{width:100%}

/* The courses list. A selected course reads as selected. */
.courserow{cursor:pointer}
.courserow:hover{background:var(--fill)}
.courserow.on{box-shadow:inset 3px 0 0 var(--terra)}

/* The profile menu was ALWAYS OPEN on the live site. `.whomenu` sets
   display:grid, which beats the `hidden` attribute's UA display:none, so the
   dropdown never closed and sat over the content on every screen. Found by
   looking at a screenshot rather than by any test: nothing errored. */
.whomenu[hidden]{display:none}

/* The forest column has to reach the bottom of the grid row, not stop where
   its own content stops and leave coral under the navigation. Rows are named
   explicitly: `align-items:stretch` alone made the chrome row absorb the slack
   and stand 300px tall with the wordmark floating in the middle of it. */
.app{grid-template-rows:auto 1fr}
.side{height:100%;min-height:0;align-self:stretch}

/* A CORAL BUTTON ON A CORAL GROUND IS INVISIBLE. The primary action on My
   Academy read as plain text. The design he approved answers this already:
   its `.topbar .btn` on the coral main is WHITE with coral text. */
/* The coral TOKEN lightens in dark (#E4622F) and this button puts it on white,
   where it measures 3.45:1. The token is right for a ground and wrong for ink
   on white, so this ink is a fixed value: #B8390F is 5.78:1 in either theme. */
.canvas .btn.filled{background:#fff;color:#B8390F;border:0}
.canvas .btn.filled:hover{background:#fff7ef}
.canvas .card .btn.filled,.canvas .list .btn.filled,.canvas .addpanel .btn.filled,.canvas .panel .btn.filled{
  background:var(--coral);color:#fff}
.canvas .card .btn.filled:hover,.canvas .addpanel .btn.filled:hover,.canvas .panel .btn.filled:hover{filter:brightness(1.06)}
/* Ghost/secondary on the coral ground needs a visible edge, not a tint that
   disappears into the orange. */
/* A white-tinted pill over coral measured 3.75:1 for its own white label: the
   tint lifts the ground toward the text. The secondary on the coral ground is
   the forest instead, the pairing the design system already uses, at 9.96:1. */
.canvas > .btnrow .btn.tinted,.canvas > .stepnav .btn.tinted{
  /* NOT var(--forest): the dark theme lightens it to #B9DBC8 and white on
     that is 1.5:1. Same mistake as the line above, in a second place —
     a theme token used where the pairing must hold in BOTH themes. */
  background:#244A36;color:#fff;box-shadow:none}
.canvas > .btnrow .btn.tinted:hover,.canvas > .stepnav .btn.tinted:hover{background:#1c3a2a;color:#fff}
.canvas > .btnrow .btn.plain,.canvas > .stepnav .btn.plain{color:#fff}

/* The forest column has to paint for the whole page, not just the first
   viewport. It is sticky and capped at 100vh, so on a long screen the ground
   under it went coral. Painting the column into the grid's own background
   keeps it whole without making the nav itself scroll with the content. */
.app{background:linear-gradient(90deg,var(--side) 0 248px,var(--coral) 248px)}
@media(max-width:840px){.app{background:var(--coral)}}

/* The breadcrumb sits on coral, so it cannot use ink and terra. */
.crumb{color:rgba(255,255,255,.78)}
.crumblink{color:#fff;text-decoration:underline;text-underline-offset:3px}
.crumblink:hover{color:var(--amber)}
.cap[hidden]{display:none}

/* ── THE APPROVED SCREENS, TRANSPLANTED ─────────────────────────────────────
   Founder, 2026-08-25: "the screens we agreed on were not applied at all, I'm
   not going to comment on the wrong screens."
   These rules are COPIED from the design he approved on 2026-08-19
   (app-screens-approved/app-ui.css), not adapted. Exactness is the instruction.
   Values changed only where the app's own token names differ. */
.topbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:0 4px 20px;color:#fff}
.topbar h1{font-size:34px;letter-spacing:-.03em;line-height:1.1;font-weight:700;color:#fff;margin:0}
.topbar .spacer{margin-left:auto}
.topbar .btn{background:#fff;color:#B8390F;min-height:44px;padding:0 22px;font-size:15px;border:0}
.topbar .btn:hover{background:#fff7ef}

.panel{background:var(--paper);border-radius:16px;padding:24px;margin-bottom:14px}
.panel.amber{background:#F6C564;color:#2A1C06}
.panel.forest{background:#244A36;color:#FBF7EF}
.panel > h2{font-size:22px;letter-spacing:-.03em;line-height:1.15;margin:0 0 4px}
.panel .sub{color:var(--label2);font-size:15px}
.panel.forest .sub{color:rgba(251,247,239,.80)}
.panel.amber .sub{color:rgba(42,28,6,.76)}
.panel .tag{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.10em;
  text-transform:uppercase;opacity:.62;margin-bottom:6px}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}

.stat{display:block}
.stat b{display:block;font-size:28px;letter-spacing:-.03em;line-height:1.05;
  font-variant-numeric:tabular-nums}
.stat span{font-size:13px;color:var(--label2)}
.panel.forest .stat span{color:rgba(251,247,239,.78)}
.panel.amber .stat span{color:rgba(42,28,6,.72)}

.crow{display:flex;align-items:center;gap:14px;padding:16px 0;
  border-top:1px solid rgba(23,26,22,.12);cursor:pointer}
.crow:first-of-type{border-top:0}
.crow .ct{flex:1;min-width:0}
.crow .ct b{display:block;font-size:17px;letter-spacing:-.02em}
.crow .ct span{font-size:13px;color:var(--label2)}
.crow:hover .ct b{color:#B8390F}
/* DESIGN-TRANSPLANT-JUDGE-2026-09-08.md D5: .crow's pointer/hover promise a
   navigation. Correct on the dashboard (data-course rows do navigate) but
   the transplant reused .crow for rows that only carry inline action
   buttons (access codes, academies, the analytics course list) -- .static
   drops the affordance for exactly those. */
.crow.static{cursor:default}
.crow.static:hover .ct b{color:inherit}
.pill{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:5px 11px;border-radius:8px;white-space:nowrap}
.pill.live{background:rgba(27,107,69,.12);color:#1B6B45}
.pill.draft{background:rgba(138,90,0,.12);color:#8A5A00}
.pill.stuck{background:rgba(163,43,32,.10);color:#A32B20}
.bar{display:block;height:8px;border-radius:5px;background:rgba(23,26,22,.10);overflow:hidden;margin-top:8px}
.bar i{display:block;height:100%;background:#244A36;border-radius:5px}

.learner{display:flex;align-items:center;gap:12px;padding:13px 0;
  border-top:1px solid rgba(23,26,22,.12)}
.learner:first-of-type{border-top:0}
.learner .av{width:34px;height:34px;border-radius:50%;background:#F2E4C6;color:#2A1C06;
  display:grid;place-items:center;font-size:13px;font-weight:700;flex:none}
.learner .ln{flex:1;min-width:0}
.learner .ln b{display:block;font-size:15px;font-weight:650}
.learner .ln span{font-size:13px;color:var(--label2)}
.learner .pct,.crow .pct{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
@media(max-width:900px){.cols{grid-template-columns:1fr}.cols3{grid-template-columns:1fr}}
.paneltop{margin-top:18px}

/* ── THE APPROVED SET-PASSWORD SCREEN, 2026-08-19. Transplanted. ──────────── */
.authcard.setpw{max-width:520px;padding:48px}
.setpw .brandword{font:700 20px/1 "Fraunces",Georgia,serif;letter-spacing:-.02em;
  color:#B8390F;margin-bottom:26px;display:block}
.setpw h1{font-family:"Fraunces",Georgia,serif;font-size:34px;line-height:1.1;
  letter-spacing:-.03em;font-weight:600;margin:0 0 10px;color:var(--label)}
.setpw .lede{color:var(--label2);font-size:17px;line-height:1.5;margin:0 0 22px}
.setpw .invited{display:flex;align-items:center;gap:12px;background:#F2E4C6;color:#2A1C06;
  border-radius:12px;padding:14px 16px;margin:0 0 22px;font-size:15px;line-height:1.45}
.setpw .invited b{font-size:16px}
.setpw .field{margin:0 0 22px}
.setpw .field label{display:block;font-weight:700;font-size:16px;color:var(--label);margin:0 0 8px}
.setpw .field input{width:100%;background:#fff;border:1px solid var(--sep);border-radius:12px;
  padding:14px 16px;font:inherit;font-size:16px;color:var(--label)}
.setpw .field input:focus{border-color:#B8390F;outline:none}
.setpw .meter{display:flex;gap:6px;margin:10px 0 10px}
.setpw .meter i{height:5px;flex:1;border-radius:3px;background:var(--sep)}
.setpw .meter i.on{background:#1B6B45}
.setpw .hint{color:var(--label2);font-size:15px;line-height:1.45;margin:0}
.setpw .btn.btn-wide{width:100%;min-height:52px;font-size:16px}
.setpw .authfoot{color:var(--label2);font-size:15px;line-height:1.5;margin:20px 0 0}
.setpw .meter{background:transparent;padding:0;border:0;box-shadow:none}
/* The eyebrow inside a panel was inheriting the coral canvas's white, so
   "Where things stand" measured 1.6:1 on amber. opacity is not a colour: each
   panel names its own ink. */
.panel .tag{color:var(--label);opacity:1}
.panel.amber .tag{color:#5C4A18}
.panel.forest .tag{color:rgba(251,247,239,.86)}

/* A65 — the public page card. A field whose value is set by a button beside it,
   and the price with its currency: both are one row, not a stack, because the
   button belongs to the value it saves. */
.field .row{display:flex;gap:8px;align-items:center}
.field .row input{flex:1;min-width:0}
.field .row select{width:auto;flex:none}
.field .row .btn{flex:none}
.pubaddr{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}

/* A64 — the payout card. A coach who cannot take money must be able to see
   that at a glance, and a warning must not read like a note.
   The ink is written out rather than taken from --orange / --red: measured on
   its own tint, the token ink came to 4.44:1 at 13px, and this is the third
   time in this codebase a themed token has been used as ink over a tint and
   come up short. Literals, measured: 6.9:1 and 7.4:1. */
.note.err{color:#8C1D13;background:rgba(163,43,32,.10);
  border-radius:10px;padding:10px 12px;margin:12px 0}
.note.warn{color:#6E3408;background:rgba(154,52,18,.10);
  border-radius:10px;padding:10px 12px;margin:12px 0}

/* DESIGN-TRANSPLANT-JUDGE-2026-09-08.md D4: production sends a CSP with no
   'unsafe-inline' on style-src, so every `style="..."` attribute a bundle
   emits is silently dropped by the browser — measured live, not inferred.
   Real classes instead, for the three inline styles the transplant added. */
.scrollx{overflow-x:auto}
.mt14{margin-top:14px}
.mt10{margin-top:10px}
.panel>h2.subhead2{margin-top:18px;font-size:17px}
.weektable{width:100%;border-collapse:collapse}
.weektable th,.weektable td{padding:6px 8px;text-align:left}
.weektable th.num,.weektable td.num{text-align:right}