/* ABA Academy · learning platform prototype · v1 (Oct 18 2026) · status: proposed, pending Arman
   Tokens reused from landing-v2/assets/shared.css (The Threshold). Product additions are marked "+". */
@font-face{font-family:"Fraunces";src:url("fonts/Fraunces-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url("fonts/Fraunces-italic-var.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/Inter-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces Fallback";src:local("Georgia"),local("Times New Roman"),local("DejaVu Serif");size-adjust:104%;ascent-override:94%;descent-override:24%;line-gap-override:0%}
@font-face{font-family:"Inter Fallback";src:local("Arial"),local("Helvetica"),local("DejaVu Sans");size-adjust:107%;ascent-override:90%;descent-override:22%;line-gap-override:0%}

:root{
  /* landing tokens (unchanged) */
  --navy-950:#070F24; --navy-900:#0B1A3A; --navy-700:#1C3466;
  --blue-500:#3D6BE0; --blue-ink:#2949AE; --blue-300:#8FB0FF;
  --sky-50:#F3F7FF; --sky-100:#E6EEFE; --ink:#0B1530; --ink-2:#3E4A66; --paper:#F7F9FD; --paper-2:#B9C6E4;
  --warm:#F2C27B; --warm-ink:#7A4A06;
  --serif:"Fraunces","Fraunces Fallback",Georgia,serif;
  --sans:"Inter","Inter Fallback",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ease-out:cubic-bezier(.22,1,.36,1); --ease-io:cubic-bezier(.65,0,.35,1); --ease-in:cubic-bezier(.55,0,.75,.2);
  --gutter:clamp(20px,4.4vw,64px); --max:1200px;
  /* + product semantics (light theme) */
  --bg:var(--sky-50); --bg-2:#FFFFFF; --fg:var(--ink); --fg-2:var(--ink-2); --accent:var(--blue-500); --accent-ink:var(--blue-ink);
  --tonal:rgba(41,73,174,.06); --tonal-2:rgba(41,73,174,.10); --tonal-3:rgba(41,73,174,.16);
  --groove:rgba(41,73,174,.16); --lit:rgba(143,176,255,.55);
  --success:#1D7349; --success-bg:rgba(29,115,73,.09);
  --attn:var(--warm-ink); --attn-bg:#FCEBD0;
  --error:#A3342F; --error-bg:rgba(163,52,47,.08);
  --ph-fg:var(--warm-ink); --ph-bg:#FCEBD0;
  --edge:rgba(62,74,102,.62); /* input bottom edge ≥3:1 on bg */
  --raise:0 1px 2px rgba(11,26,58,.05),0 12px 32px -10px rgba(28,52,102,.16),0 40px 80px -30px rgba(61,107,224,.18);
  --raise-sm:0 1px 2px rgba(11,26,58,.05),0 8px 22px -10px rgba(28,52,102,.18);
  --glass-bg:rgba(255,255,255,.62); --glass-sh:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 .5px rgba(255,255,255,.5),0 10px 30px -14px rgba(28,52,102,.28);
  --read:1.125rem; --lh:1.6; --measure:65ch;
  --focus:var(--blue-ink);
  --field-a:.55;
  color-scheme:light;
}
html[data-theme="dark"]{
  --bg:var(--navy-950); --bg-2:#0D1B3D; --fg:var(--paper); --fg-2:var(--paper-2); --accent-ink:#A9C2FF;
  --tonal:rgba(255,255,255,.05); --tonal-2:rgba(255,255,255,.08); --tonal-3:rgba(255,255,255,.13);
  --groove:rgba(185,198,228,.22); --lit:rgba(143,176,255,.45);
  --success:#7ED6A6; --success-bg:rgba(126,214,166,.10); --attn:#F2C27B; --attn-bg:rgba(242,194,123,.12);
  --error:#FF9F98; --error-bg:rgba(255,159,152,.10); --ph-fg:#F6D3A0; --ph-bg:rgba(242,194,123,.14);
  --edge:rgba(185,198,228,.6);
  --raise:0 1px 2px rgba(0,0,0,.2),0 18px 40px -16px rgba(0,0,0,.55),0 40px 90px -30px rgba(61,107,224,.28);
  --raise-sm:0 10px 26px -12px rgba(0,0,0,.6);
  --glass-bg:rgba(255,255,255,.07); --glass-sh:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 .5px rgba(255,255,255,.08),0 10px 30px -12px rgba(0,0,0,.5);
  --focus:var(--blue-300); --field-a:.4;
  color-scheme:dark;
}
html[data-theme="contrast"]{
  --bg:#FFFFFF; --bg-2:#FFFFFF; --fg:#000814; --fg-2:#1B2540; --accent:#1F3FA8; --accent-ink:#1A3690;
  --tonal:rgba(0,8,20,.05); --tonal-2:rgba(0,8,20,.08); --tonal-3:rgba(0,8,20,.14);
  --groove:#6B7896; --lit:transparent; --success:#0B5A33; --success-bg:#E3F3EA; --attn:#5C3700; --attn-bg:#FCEBD0;
  --error:#8A1F1A; --error-bg:#FBE9E8; --ph-fg:#5C3700; --ph-bg:#FCEBD0; --edge:#000814;
  --raise:none; --raise-sm:none; --glass-bg:#FFFFFF; --glass-sh:0 0 0 2px #000814; --focus:#000814; --field-a:0;
}
html[data-text="large"]{font-size:112.5%}
html[data-text="larger"]{font-size:125%}
html[data-read="easy"]{--lh:1.8}
html[data-read="easy"] body{letter-spacing:.03em;word-spacing:.12em}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg)}
body{margin:0;min-height:100vh;font-family:var(--sans);font-size:1rem;line-height:1.5;color:var(--fg);background:var(--bg);font-feature-settings:"ss01","cv11";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;transition:background-color .3s var(--ease-out),color .3s var(--ease-out)}
h1,h2,h3,h4,p,ol,ul,figure,blockquote,dl,dd,fieldset{margin:0}
fieldset{padding:0;min-width:0;border:0}
ol,ul{padding:0;list-style:none}
img,svg{display:block}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;padding:0;margin:0;cursor:pointer}
[hidden]{display:none!important}
.sr{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.defs{position:absolute;width:0;height:0;overflow:hidden}
:focus{outline:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:12px}
html[data-theme="contrast"] :focus-visible{outline:3px solid #000814;outline-offset:2px;box-shadow:0 0 0 5px #FFD84D}
.skip{position:fixed;left:16px;top:16px;z-index:300;transform:translateY(-220%);background:var(--bg-2);color:var(--fg);padding:0 20px;min-height:48px;display:inline-flex;align-items:center;border-radius:999px;font-weight:600;text-decoration:none;box-shadow:var(--raise);transition:transform .25s var(--ease-out)}
.skip:focus-visible{transform:none}
.skip+.skip:focus-visible{left:240px}

/* ambient field: static and very low in product */
.field{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;opacity:var(--field-a)}
.field i{position:absolute;border-radius:50%;filter:blur(90px)}
.field i:nth-child(1){width:56vw;height:56vw;left:-20vw;top:22vh;background:rgba(143,176,255,.32)}
.field i:nth-child(2){width:46vw;height:46vw;right:-18vw;top:-14vh;background:rgba(61,107,224,.14)}
.field i:nth-child(3){width:34vw;height:34vw;left:38vw;bottom:-22vh;background:rgba(242,194,123,.10)}
.grain{position:fixed;inset:0;z-index:250;pointer-events:none;background:url("grain.png");opacity:.022;mix-blend-mode:overlay}
html[data-theme="contrast"] .grain,html[data-theme="contrast"] .field{display:none}

/* ---------- type ---------- */
.eyebrow{font:600 .8125rem/1.3 var(--sans);letter-spacing:.11em;text-transform:uppercase;color:var(--accent-ink)}
.display{font-family:var(--serif);font-weight:360;font-variation-settings:"opsz" 144,"SOFT" 60,"WONK" 0;letter-spacing:-.026em;line-height:1.02;text-wrap:balance}
.display em{font-style:italic;font-weight:330;font-variation-settings:"opsz" 144,"SOFT" 100,"WONK" 1}
.d-xl{font-size:clamp(2.6rem,5.4vw,5rem)}
.d-l{font-size:clamp(2.1rem,3.8vw,3.5rem)}
.d-m{font-size:clamp(1.75rem,2.6vw,2.5rem)}
.title{font-family:var(--serif);font-size:clamp(1.3rem,1.7vw,1.6rem);font-weight:430;font-variation-settings:"opsz" 48,"SOFT" 40;letter-spacing:-.012em;line-height:1.2;text-wrap:balance}
.t-s{font-family:var(--serif);font-size:1.1875rem;font-weight:450;font-variation-settings:"opsz" 24;letter-spacing:-.005em;line-height:1.3}
.lede{font-size:clamp(1.125rem,1.35vw,1.3125rem);line-height:1.55;color:var(--fg-2);max-width:56ch;text-wrap:pretty}
.read{font-size:var(--read);line-height:var(--lh);max-width:var(--measure)}
.read p+p{margin-top:1em}
.muted{color:var(--fg-2)}
.small{font-size:.9375rem}
.xs{font-size:.8125rem}
.q-serif{font-family:var(--serif);font-style:italic;font-weight:380;font-variation-settings:"opsz" 36,"SOFT" 100;line-height:1.4}
p{text-wrap:pretty}
.ph{display:inline-flex;align-items:center;gap:.35em;font:600 .6875rem/1 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--ph-fg);background:var(--ph-bg);padding:.45em .7em;border-radius:999px;white-space:nowrap;vertical-align:.2em}
.ph-text{color:var(--fg-2);font-style:italic}
.term{text-decoration:underline dotted;text-underline-offset:.22em;cursor:help}
button.term{font:inherit;color:inherit;display:inline;min-height:0}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:calc(var(--max) + 2*var(--gutter));margin:0 auto;padding:0 var(--gutter)}
main{display:block;padding-top:112px;padding-bottom:96px;min-height:72vh}
.focus-mode main{padding-top:96px}
.stack>*+*{margin-top:var(--s,24px)}
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.spacer{flex:1}
@media (min-width:1680px){:root{--max:1360px}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:52px;padding:0 1.55em;border-radius:999px;font:600 1rem/1.1 var(--sans);letter-spacing:-.005em;text-decoration:none;text-align:center;transition:transform .2s var(--ease-out),box-shadow .25s var(--ease-out),background-color .25s var(--ease-out),color .25s var(--ease-out)}
.btn svg{width:18px;height:18px;flex:none;transition:transform .25s var(--ease-out)}
.btn:hover svg.go{transform:translateX(3px)}
.btn-primary{background:var(--accent);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 1px 2px rgba(11,26,58,.2),0 12px 32px -8px rgba(28,52,102,.35),0 24px 60px -18px rgba(61,107,224,.5)}
.btn-primary:hover{transform:translateY(-1px);background:#3561D2}
html[data-theme="contrast"] .btn-primary{box-shadow:none}
html[data-theme="contrast"] .btn-primary:hover{background:#142E86}
.btn-primary:active{transform:none}
.btn-primary[aria-disabled="true"]{opacity:.7;cursor:progress}
.btn-tonal{background:var(--tonal-2);color:var(--fg)}
.btn-tonal:hover{background:var(--tonal-3)}
html[data-theme="contrast"] .btn-tonal{box-shadow:inset 0 0 0 2px #000814;background:#fff}
.btn-quiet{min-height:44px;padding:0 14px;color:var(--fg)}
.btn-quiet:hover{background:var(--tonal)}
.btn-sm{min-height:44px;padding:0 18px;font-size:.9375rem}
.btn-lit{animation:litbtn 1.4s var(--ease-out) 1 both}
@keyframes litbtn{0%{box-shadow:0 0 0 0 rgba(143,176,255,0)}40%{box-shadow:0 0 0 10px rgba(143,176,255,.35),0 0 60px 10px rgba(242,194,123,.35)}100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 12px 32px -8px rgba(28,52,102,.35),0 24px 60px -18px rgba(61,107,224,.5)}}
.link{display:inline-flex;align-items:center;gap:.45em;min-height:44px;font-weight:600;color:var(--accent-ink);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.28em;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);transition:text-decoration-color .2s}
.link:hover{text-decoration-color:currentColor}
.link svg{width:16px;height:16px;flex:none}
.icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:999px;transition:background-color .2s var(--ease-out)}
.icon-btn:hover{background:var(--tonal-2)}
.icon-btn svg{width:20px;height:20px}
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---------- glass (nav + controls only) ---------- */
.glass{background:var(--glass-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:var(--glass-sh)}
html[data-transparency="reduce"] .glass{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--bg-2)}
html[data-theme="dark"][data-transparency="reduce"] .glass{background:var(--navy-900)}
.glass-dark{background:rgba(7,15,36,.42);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 .5px rgba(255,255,255,.06);color:var(--paper)}
html[data-transparency="reduce"] .glass-dark,html[data-theme="contrast"] .glass-dark{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--navy-950)}

/* ---------- split pill nav ---------- */
.nav{position:fixed;z-index:120;top:14px;left:0;right:0;margin:0 auto;width:min(100%,1520px);padding:0 clamp(12px,3vw,44px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;pointer-events:none;transition:transform .4s var(--ease-out),opacity .4s var(--ease-out)}
.nav>*{pointer-events:auto}
.nav.hide{transform:translateY(calc(-100% - 24px));opacity:0}
.pill{display:inline-flex;align-items:center;border-radius:999px}
.brand{justify-self:start;gap:10px;min-height:52px;padding:0 20px 0 16px;text-decoration:none;font:600 1.0625rem/1 var(--sans);letter-spacing:-.015em}
.brand svg{width:18px;height:29px;overflow:visible}
.brand use{fill:none;stroke:currentColor;stroke-width:9;stroke-linecap:round}
.brand small{font:500 .8125rem/1 var(--sans);color:var(--fg-2);letter-spacing:0;padding-left:10px;margin-left:2px;display:none}
@media (min-width:1180px){.brand small{display:inline}}
.sections{justify-self:center;padding:4px;gap:2px}
.sections a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;text-decoration:none;font-weight:550;font-size:.9688rem;color:var(--fg-2);transition:background-color .25s var(--ease-out),color .25s}
.sections a:hover{color:var(--fg);background:var(--tonal)}
.sections a[aria-current="page"]{color:var(--fg);background:var(--bg-2);box-shadow:var(--raise-sm)}
html[data-theme="dark"] .sections a[aria-current="page"]{background:rgba(255,255,255,.12)}
html[data-theme="contrast"] .sections a[aria-current="page"]{box-shadow:inset 0 0 0 2px #000814;text-decoration:underline}
.sections a svg{width:18px;height:18px}
.acct{justify-self:end;padding:4px;gap:2px}
.acct-btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 14px 0 4px;border-radius:999px;font-weight:600;font-size:.9375rem}
.acct-btn:hover{background:var(--tonal)}
.avatar{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;background:linear-gradient(160deg,#C9D8FF,#8FB0FF);color:var(--navy-900);font:650 .8125rem/1 var(--sans);letter-spacing:.02em}
html[data-theme="contrast"] .avatar{background:#000814;color:#fff}
.acct-btn .chev{width:14px;height:14px;transition:transform .25s var(--ease-out)}
.acct-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.signin-pill{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;text-decoration:none;font-weight:600;font-size:.9375rem}
.signin-pill:hover{background:var(--tonal-2)}
.menu{position:absolute;right:clamp(12px,3vw,44px);top:66px;min-width:260px;padding:8px;border-radius:24px;background:var(--bg-2);box-shadow:var(--raise);transform-origin:top right;animation:pop .22s var(--ease-out)}
html[data-theme="contrast"] .menu{box-shadow:0 0 0 2px #000814}
@keyframes pop{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
.menu .who{padding:12px 14px 10px}
.menu .who b{display:block;font-weight:600}
.menu a,.menu button{display:flex;align-items:center;gap:12px;width:100%;min-height:46px;padding:0 14px;border-radius:14px;text-decoration:none;text-align:left;font-weight:500}
.menu a:hover,.menu button:hover{background:var(--tonal)}
.menu .sep{height:10px}
.tabbar{display:none}
@media (max-width:899px){
  .nav{grid-template-columns:1fr auto}
  .nav .sections{display:none}
  .brand{min-height:48px;padding:0 16px 0 14px}
  .tabbar{display:flex;position:fixed;z-index:120;left:50%;bottom:calc(12px + env(safe-area-inset-bottom));transform:translateX(-50%);padding:5px;gap:2px;border-radius:999px;width:min(calc(100% - 24px),420px);transition:transform .35s var(--ease-out),opacity .35s}
  .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:54px;border-radius:999px;text-decoration:none;font:600 .75rem/1 var(--sans);color:var(--fg-2)}
  .tabbar a svg{width:22px;height:22px}
  .tabbar a[aria-current="page"]{color:var(--fg);background:var(--bg-2);box-shadow:var(--raise-sm)}
  html[data-theme="dark"] .tabbar a[aria-current="page"]{background:rgba(255,255,255,.12)}
  html[data-theme="contrast"] .tabbar a[aria-current="page"]{box-shadow:inset 0 0 0 2px #000814}
  main{padding-top:92px;padding-bottom:140px}
  .focus-mode .tabbar{display:none}
  .focus-mode main{padding-bottom:96px}
  .menu{top:60px}
}

/* ---------- footer: consistent help (WCAG 3.2.6) ---------- */
.foot{padding:28px 0 calc(40px + env(safe-area-inset-bottom));color:var(--fg-2);font-size:.875rem}
.foot .wrap{display:flex;flex-wrap:wrap;gap:4px 20px;align-items:center}
.foot a{display:inline-flex;align-items:center;gap:8px;min-height:44px;text-decoration:none;font-weight:550;color:var(--fg)}
.foot a:hover{text-decoration:underline;text-underline-offset:4px}
@media (max-width:899px){.foot{padding-bottom:110px}}

/* ---------- breadcrumb / back ---------- */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;font-size:.9375rem;color:var(--fg-2)}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-weight:550;color:var(--fg-2);padding:0 2px}
.crumbs a:hover{color:var(--fg);text-decoration:underline;text-underline-offset:4px}
.crumbs .sepc{opacity:.55}
.crumbs [aria-current]{color:var(--fg);font-weight:600}
.back{display:none}
@media (max-width:899px){.crumbs{display:none}.back{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-left:-10px;padding:0 10px;border-radius:999px;text-decoration:none;font-weight:600;color:var(--accent-ink)}.back:hover{background:var(--tonal)}}

/* ---------- arch (single source: #arch) ---------- */
.arch{overflow:visible;display:block}
.arch use{fill:none;stroke-linecap:round}
.arch .groove{stroke:var(--groove)}
.arch .fill{stroke:var(--accent);transition:stroke-dasharray .6s var(--ease-out)}
.arch .glow{stroke:var(--blue-300);opacity:0;filter:url(#soft)}
.arch.lit .glow{opacity:.55}
.arch.done .fill{stroke:var(--accent)}
.arch .inner{fill:url(#archlight);stroke:none;opacity:0;transition:opacity .5s}
.arch.lit .inner{opacity:1}
html[data-theme="contrast"] .arch .glow,html[data-theme="contrast"] .arch .inner{display:none}
html[data-theme="contrast"] .arch .groove{stroke-dasharray:.02 .015}
.arch-n{font-family:var(--serif);font-variation-settings:"opsz" 144;font-weight:360;color:var(--accent-ink)}
.archrow{display:flex;gap:clamp(10px,1.6vw,22px);align-items:flex-end}
.archrow li{display:flex;flex-direction:column;align-items:center;gap:8px}
.archrow .arch{width:clamp(30px,3vw,40px);height:auto;aspect-ratio:108/168}
.archrow a{display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;padding:6px 6px 2px;border-radius:14px}
.archrow a:hover{background:var(--tonal)}
.archrow .lbl{font:600 .8125rem/1 var(--sans);color:var(--fg-2)}
.archrow .cur .lbl{color:var(--fg)}
.celebrate .arch .glow{animation:archglow 1.4s var(--ease-out) 1 both}
@keyframes archglow{0%{opacity:0}35%{opacity:.95;stroke:var(--warm)}100%{opacity:.55}}

/* ---------- status ---------- */
.status{display:inline-flex;align-items:center;gap:8px;font-size:.9375rem;font-weight:550;color:var(--fg-2);white-space:nowrap}
.status svg{width:20px;height:20px;flex:none}
.status.done{color:var(--success)}
.status.now{color:var(--accent-ink)}

/* ---------- rail (course outline) ---------- */
.with-rail{display:grid;grid-template-columns:minmax(0,1fr);gap:48px}
@media (min-width:1100px){.with-rail{grid-template-columns:272px minmax(0,1fr);gap:clamp(48px,5vw,88px)}}
.rail{display:none}
@media (min-width:1100px){.rail{display:block;position:sticky;top:104px;align-self:start;max-height:calc(100vh - 128px);overflow:auto;padding:4px 8px 24px 4px;scrollbar-width:thin}}
.rail h2{font:600 .8125rem/1.3 var(--sans);letter-spacing:.11em;text-transform:uppercase;color:var(--fg-2);margin:0 0 12px 12px}
.rail a{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:center;min-height:48px;padding:6px 12px;border-radius:14px;text-decoration:none;color:var(--fg-2);font-size:.9375rem;line-height:1.3}
.rail a:hover{background:var(--tonal);color:var(--fg)}
.rail a[aria-current]{color:var(--fg);background:var(--tonal-2);font-weight:600}
.rail .arch{width:18px;height:28px}
.rail .sub{margin:2px 0 10px 34px}
.rail .sub a{grid-template-columns:18px 1fr;min-height:44px;font-size:.875rem;padding:4px 10px}
.rail .sub svg{width:16px;height:16px}
.rail .mt{display:block}
.rail .mt small{display:block;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600;opacity:.85}

/* ---------- sheets, dialogs, toasts ---------- */
.scrim{position:fixed;inset:0;z-index:200;background:rgba(7,15,36,.38);animation:fade .25s var(--ease-out)}
html[data-transparency="reduce"] .scrim{background:rgba(7,15,36,.6)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{position:fixed;z-index:210;left:50%;top:50%;transform:translate(-50%,-50%);width:min(calc(100% - 32px),560px);max-height:calc(100vh - 48px);overflow:auto;padding:36px clamp(24px,4vw,44px) 32px;border-radius:32px;background:var(--bg-2);box-shadow:var(--raise);animation:sheetin .3s var(--ease-out)}
html[data-theme="contrast"] .sheet{box-shadow:0 0 0 3px #000814}
@keyframes sheetin{from{opacity:0;transform:translate(-50%,calc(-50% + 10px))}to{opacity:1;transform:translate(-50%,-50%)}}
.sheet.side{left:auto;right:0;top:0;transform:none;height:100vh;max-height:none;width:min(100%,420px);border-radius:32px 0 0 32px;animation:sidein .3s var(--ease-out)}
@keyframes sidein{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
@media (max-width:640px){.sheet:not(.side){top:auto;bottom:0;transform:none;left:0;width:100%;border-radius:28px 28px 0 0;padding-bottom:calc(28px + env(safe-area-inset-bottom));animation:upin .3s var(--ease-out)}@keyframes upin{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}}
.sheet-x{position:absolute;right:14px;top:14px}
.sheet h2{margin-bottom:12px}
.sheet .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;align-items:center}
.toast{position:fixed;z-index:220;left:50%;top:84px;transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:8px 8px 8px 20px;min-height:56px;border-radius:999px;background:var(--navy-900);color:var(--paper);box-shadow:var(--raise);animation:toastin .3s var(--ease-out);max-width:calc(100% - 24px)}
html[data-theme="dark"] .toast{background:#1C2E5C}
html[data-theme="contrast"] .toast{background:#000814}
.toast .icon-btn:hover{background:rgba(255,255,255,.12)}
@keyframes toastin{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translateX(-50%)}}
@media (max-width:899px){.toast{top:76px}}
.banner{position:fixed;z-index:115;top:78px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:10px 18px;border-radius:999px;background:var(--attn-bg);color:var(--attn);font-size:.9375rem;font-weight:550;box-shadow:var(--raise-sm);max-width:calc(100% - 24px)}
html[data-theme="dark"] .banner{background:#2A2414}
@media (max-width:899px){.banner{top:70px;border-radius:20px}}

/* ---------- disclosure ---------- */
details.disc>summary{list-style:none;display:flex;align-items:center;gap:12px;min-height:52px;cursor:pointer;font-weight:600;border-radius:14px;padding:0 6px;margin:0 -6px}
details.disc>summary::-webkit-details-marker{display:none}
details.disc>summary:hover{background:var(--tonal)}
details.disc>summary .pm{margin-left:auto;width:20px;height:20px;transition:transform .3s var(--ease-out)}
details.disc[open]>summary .pm{transform:rotate(45deg)}
details.disc>div{padding:6px 0 16px}

/* ---------- forms ---------- */
.fld{display:block}
.fld>label,.fld .lbl{display:block;font-weight:600;margin-bottom:10px}
.fld .hint{display:block;color:var(--fg-2);font-size:.9375rem;margin:-4px 0 10px}
.input,.textarea{display:block;width:100%;min-height:56px;padding:14px 18px;border:0;border-radius:16px 16px 6px 6px;background:var(--tonal-2);box-shadow:inset 0 -2px 0 var(--edge);font-size:1.0625rem;line-height:1.5;color:var(--fg);transition:box-shadow .2s,background-color .2s}
.textarea{min-height:150px;resize:vertical;font-size:var(--read);line-height:var(--lh)}
.input:hover,.textarea:hover{background:var(--tonal-3)}
.input:focus-visible,.textarea:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:16px 16px 6px 6px;box-shadow:inset 0 -2px 0 var(--accent)}
.input::placeholder,.textarea::placeholder{color:var(--fg-2);opacity:1}
html[data-theme="contrast"] .input,html[data-theme="contrast"] .textarea{background:#fff;box-shadow:inset 0 0 0 2px #000814}
.input[aria-invalid="true"]{box-shadow:inset 0 -2px 0 var(--error)}
.msg{display:flex;gap:8px;align-items:flex-start;margin-top:10px;font-size:.9375rem;font-weight:550}
.msg svg{width:18px;height:18px;flex:none;margin-top:2px}
.msg.err{color:var(--error)}
.msg.ok{color:var(--success)}
.saved{display:inline-flex;align-items:center;gap:8px;font-size:.875rem;color:var(--fg-2);min-height:28px}
.saved svg{width:16px;height:16px}
.saved.err{color:var(--error);font-weight:600}
/* segmented + switch (controls: tonal, no outlines) */
.seg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:22px;background:var(--tonal-2)}
.seg button,.seg label{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:18px;font-weight:550;font-size:.9375rem;color:var(--fg-2);cursor:pointer;transition:background-color .2s,color .2s,box-shadow .2s}
.seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.seg [aria-pressed="true"],.seg label:has(input:checked){background:var(--bg-2);color:var(--fg);box-shadow:var(--raise-sm)}
html[data-theme="dark"] .seg [aria-pressed="true"],html[data-theme="dark"] .seg label:has(input:checked){background:rgba(255,255,255,.14)}
html[data-theme="contrast"] .seg [aria-pressed="true"],html[data-theme="contrast"] .seg label:has(input:checked){box-shadow:inset 0 0 0 2px #000814;text-decoration:underline}
.seg label:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.switch{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;min-height:56px;text-align:left;border-radius:14px;padding:6px 6px;margin:0 -6px}
.switch:hover{background:var(--tonal)}
.switch .track{position:relative;flex:none;width:52px;height:32px;border-radius:999px;background:var(--groove);transition:background-color .25s var(--ease-out)}
html[data-theme="contrast"] .switch .track{background:#fff;box-shadow:inset 0 0 0 2px #000814}
.switch .track::after{content:"";position:absolute;left:3px;top:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(11,26,58,.25);transition:transform .25s var(--ease-out)}
html[data-theme="contrast"] .switch .track::after{background:#000814}
.switch[aria-checked="true"] .track{background:var(--accent)}
.switch[aria-checked="true"] .track::after{transform:translateX(20px)}
html[data-theme="contrast"] .switch[aria-checked="true"] .track::after{background:#fff}
.switch .st{font-size:.8125rem;font-weight:600;color:var(--fg-2);margin-right:10px}
.switch>span:first-child{flex:1}
.switch b{display:block;font-weight:600}
.switch small{display:block;color:var(--fg-2);font-size:.875rem;margin-top:2px}

/* ---------- skeletons ---------- */
.skel{display:block;border-radius:12px;background:linear-gradient(100deg,var(--tonal-2) 30%,var(--tonal) 50%,var(--tonal-2) 70%);background-size:300% 100%;animation:shim 1.8s var(--ease-io) infinite}
@keyframes shim{from{background-position:100% 0}to{background-position:0 0}}
.sk-line{height:14px;margin:10px 0}.sk-h{height:44px;width:60%;border-radius:14px}.sk-block{height:220px;border-radius:24px}
.slow{margin-top:24px;color:var(--fg-2)}

/* ---------- generic state block ---------- */
.state{max-width:640px;padding:clamp(24px,6vh,72px) 0}
.state .state-arch{width:72px;height:auto;aspect-ratio:108/168;margin-bottom:28px}
.state h1,.state h2{margin-bottom:14px}
.state .actions{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;margin-top:28px}
.state details{margin-top:20px;color:var(--fg-2);font-size:.9375rem}

/* ---------- reduced motion (setting or system) ---------- */
html[data-motion="reduce"] *,html[data-motion="reduce"] *::before,html[data-motion="reduce"] *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
html[data-motion="reduce"] .skel{animation:none!important;background:var(--tonal-2)}
html[data-motion="reduce"] .page-in{animation:fadeonly .2s linear both!important;animation-duration:.2s!important}
@keyframes fadeonly{from{opacity:0}to{opacity:1}}
/* page transition: 250ms crossfade + 6px rise */
.page-in{animation:pagein .3s var(--ease-out) both}
@keyframes pagein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (forced-colors:active){.btn-primary,.btn-tonal,.input,.textarea,.seg,.switch .track{border:2px solid CanvasText}.arch .fill{stroke:Highlight}}

/* ---------- debug panel (?debug=1) ---------- */
.dbg{position:fixed;z-index:400;left:12px;bottom:12px;width:300px;max-height:calc(100vh - 24px);overflow:auto;padding:16px;border-radius:22px;background:#0B1A3A;color:#F7F9FD;font-size:.8125rem;box-shadow:0 20px 60px -20px rgba(0,0,0,.6)}
.dbg h2{font:700 .75rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;margin:4px 0 10px;color:#B9C6E4}
.dbg .grp{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:12px}
.dbg button,.dbg a{min-height:32px;padding:0 10px;border-radius:10px;background:rgba(255,255,255,.08);font-size:.75rem;font-weight:600;text-decoration:none;display:inline-flex;align-items:center}
.dbg button:hover,.dbg a:hover{background:rgba(255,255,255,.18)}
.dbg [aria-pressed="true"]{background:#3D6BE0}
.dbg .x{position:absolute;right:10px;top:10px}

@media print{.nav,.tabbar,.foot,.field,.grain,.skip,.dbg,.toast,.banner,.no-print{display:none!important}main{padding:0}body{background:#fff;color:#000}}
/* arch stroke weights by rendered size (viewBox units) */
.arch.a-xs use{stroke-width:11}.arch.a-sm use{stroke-width:7}.arch.a-md use{stroke-width:4}.arch.a-lg use{stroke-width:1.8}.arch.a-xl use{stroke-width:1.1}
.arch.a-xs .glow,.arch.a-sm .glow{stroke-width:16}.arch.a-md .glow{stroke-width:10}.arch.a-lg .glow{stroke-width:6}.arch.a-xl .glow{stroke-width:4}
.arch .fill.zero,.arch .glow.zero{opacity:0}
/* ---------- two-pill nav (final landing language) ---------- */
.nav{grid-template-columns:1fr auto}
.brand[aria-current="page"]{box-shadow:var(--glass-sh),inset 0 -2px 0 color-mix(in srgb,var(--accent) 55%,transparent)}
.brand small{display:none!important}
.acct{display:inline-flex;align-items:center;gap:2px;padding:4px}
.nav-links{display:inline-flex;gap:2px}
.nav-link{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;text-decoration:none;font-weight:600;font-size:.9375rem;color:var(--fg-2);transition:background-color .25s var(--ease-out),color .25s}
.nav-link:hover{color:var(--fg);background:var(--tonal)}
.nav-link[aria-current="page"]{color:var(--fg);background:var(--bg-2);box-shadow:var(--raise-sm)}
html[data-theme="dark"] .nav-link[aria-current="page"]{background:rgba(255,255,255,.12)}
html[data-theme="contrast"] .nav-link[aria-current="page"]{box-shadow:inset 0 0 0 2px currentColor;text-decoration:underline}
body[data-screen="certificate"] .nav-link[aria-current="page"]{background:rgba(255,255,255,.12)}
@media (max-width:899px){.nav-links{display:none}}
.brand span{white-space:nowrap}
@media (max-width:480px){.nav-link{padding:0 12px;font-size:.875rem}.brand{padding:0 14px 0 12px}}
.nav-link{white-space:nowrap}
@media (max-width:380px){body[data-signed-out] .brand span{display:none}body[data-signed-out] .brand{padding:0 16px}}
/* toasts sit at the bottom (clear of headings); the lesson keeps them at the top, clear of the player controls */
body:not([data-screen="lesson"]) .toast{top:auto;bottom:calc(28px + env(safe-area-inset-bottom))}
@media (max-width:899px){.app:not(.focus-mode) ~ .toast{bottom:calc(92px + env(safe-area-inset-bottom))}.toast{max-width:calc(100vw - 24px)}}
.dbg .dbg-p{font-size:.6875rem;color:#B9C6E4;margin:-4px 0 8px}
.dbg-ev{display:grid;gap:6px;margin:0 0 4px;padding:0;list-style:none;font-size:.6875rem;line-height:1.35}
.dbg-ev li{padding:6px 8px;border-radius:10px;background:rgba(255,255,255,.06);overflow-wrap:anywhere}
.dbg-ev b{color:#fff}.dbg-ev time{color:#B9C6E4;margin-left:4px}.dbg-ev code{display:block;margin-top:2px;color:#D7E0F5;font-family:ui-monospace,Menlo,monospace}
.dbg-ev .none{color:#B9C6E4}