/* EasyGot German — Bauhaus Dessau.
   Warm concrete grey, with the three primaries used strictly as CODE rather than
   decoration: blue is the rule working, yellow is the rule's blind spot, red is a
   consonant hardening. Jost (a Futura revival, and Futura is the Bauhaus lineage) for
   display and body; JetBrains Mono for phonetic data. Form follows function, and the
   colour is information — which is also the argument this whole course makes about
   German spelling. */
:root{
  --cobalt:#1F4E9C;            /* Bauhaus blue — the rule working */
  --cobalt-hi:#2C63BE;
  --cobalt-deep:#143567;
  --lime:#E8E6E1;              /* concrete */
  --lime-2:#F4F3F0;
  --talavera:#E0A81C;          /* yellow — where the rule stops deciding */
  --brick:#C1352B;             /* red — a consonant hardening */
  --teal:#2E7D6B;
  --teal-hi:#20604F;
  --ink:#1C1C1A;
  --ink-dim:#4A4A46;
  --ink-faint:#7E7E78;
  --gold-hi:var(--brick);
  --line:rgba(28,28,26,.22);
  --line-soft:rgba(28,28,26,.11);
  --tile:#FFFFFF;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--lime);
  /* three primaries as a hairline across the top — the Bauhaus banner, used once */
  background-image:linear-gradient(90deg,
    var(--cobalt) 0 33.33%, var(--talavera) 33.33% 66.66%, var(--brick) 66.66% 100%);
  background-size:100% 3px;
  background-repeat:no-repeat;
  color:var(--ink);
  font-family:'Archivo',system-ui,-apple-system,sans-serif;
  line-height:1.55;font-size:16px;
  padding-bottom:calc(74px + env(safe-area-inset-bottom,0px));
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:740px;margin:0 auto;padding:0 16px}
h2,h3,h4,.lesson-h,.score,.uc-name,.primer h2{font-family:'Jost',system-ui,sans-serif}
b,strong{font-weight:700}
.ipa{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.86em;color:var(--cobalt);letter-spacing:-.02em}

/* ---- intro overlay ---- */
.overlay{position:fixed;inset:0;z-index:120;background:rgba(242,239,230,.97);
  display:flex;align-items:center;justify-content:center;padding:24px 16px;overflow-y:auto}
.overlay.hidden{display:none}
.primer{max-width:560px;background:var(--lime-2);border:2px solid var(--cobalt);border-radius:4px;
  padding:26px 22px;box-shadow:0 10px 34px rgba(18,52,106,.14)}
.primer h2{font-size:1.32rem;line-height:1.2;color:var(--cobalt);margin-bottom:12px}
.primer p{margin-bottom:12px;color:var(--ink-dim)}
.primer p b{color:var(--ink)}
.formula{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;
  background:rgba(27,74,140,.05);border:1px dashed var(--line);border-radius:4px;padding:12px 10px;margin:14px 0}
.formula .f{background:var(--tile);border:1px solid var(--line);border-radius:3px;
  padding:5px 9px;font-size:.83rem;font-weight:600;color:var(--cobalt)}
.formula .op{color:var(--talavera);font-weight:700}
.begin{width:100%;margin-top:6px;background:var(--cobalt);color:#fff;border:none;border-radius:3px;
  padding:13px;font:600 1rem 'Archivo',sans-serif;cursor:pointer}
.begin:hover{background:var(--cobalt-hi)}

/* ---- top bar ---- */
.topbar{position:sticky;top:0;z-index:30;background:rgba(242,239,230,.96);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line-soft);
  padding:calc(8px + env(safe-area-inset-top,0px)) 0 9px;margin-bottom:14px}
.topbar-in{max-width:740px;margin:0 auto;padding:0 16px;display:flex;align-items:center;gap:10px}
/* Back to the course picker. One PWA holds every course, so this is the switcher. */
.courses{flex:none;width:30px;height:30px;border-radius:99px;display:grid;place-items:center;
  border:1px solid var(--line-soft);color:var(--ink-faint);text-decoration:none}
.courses svg{width:16px;height:16px}
.courses:hover{color:var(--cobalt);border-color:var(--line)}
.crumb{flex:none;display:flex;align-items:center;gap:7px;cursor:pointer;
  font-family:inherit;font-size:.86rem;font-weight:600;color:var(--cobalt);
  background:rgba(27,74,140,.07);border:1px solid var(--line);border-radius:99px;padding:6px 12px}
.crumb .cn{font-family:'Jost',system-ui,sans-serif;color:var(--brick)}
.crumb .cm{color:var(--ink-dim);font-weight:400}
.crumb::after{content:"▾";font-size:.7rem;color:var(--ink-faint);margin-left:1px}
.roundbar{flex:1;display:flex;align-items:center;gap:8px;min-width:0}
.pips{display:flex;gap:3px;flex:1;min-width:0}
.pip{flex:1;height:4px;border-radius:2px;background:rgba(27,74,140,.16);max-width:22px}
.pip.hit{background:var(--teal)}
.pip.miss{background:var(--brick)}
.pip.now{background:var(--talavera)}
.streakchip{flex:none;font-size:.78rem;color:var(--ink-faint)}
.streakchip b{color:var(--brick)}
.gear{flex:none;width:32px;height:32px;border-radius:99px;cursor:pointer;display:grid;place-items:center;
  background:transparent;border:1px solid var(--line-soft);color:var(--ink-faint);font-size:.9rem}
.gear:hover{color:var(--cobalt);border-color:var(--line)}

/* ---- views ---- */
[data-view]{display:none}
[data-view].on{display:block}
.vh{font-size:1.3rem;color:var(--cobalt);margin-bottom:4px}
.sech{font-size:1rem;color:var(--cobalt);margin:22px 0 8px}
.sechint{font-size:.85rem;color:var(--ink-faint);margin-bottom:10px}

/* ---- cards ---- */
.card{background:var(--tile);border:1px solid var(--line);border-radius:4px;
  padding:18px 16px;box-shadow:0 1px 0 rgba(27,74,140,.06)}
.whystrip{background:rgba(27,74,140,.05);border:1px solid var(--line-soft);border-radius:4px;
  padding:9px 13px;margin-bottom:12px;font-size:.85rem;color:var(--ink-dim)}
.whystrip summary{cursor:pointer;list-style:none}
.whystrip summary::-webkit-details-marker{display:none}
.whystrip summary b{color:var(--cobalt)}
.whystrip .dbody{margin-top:8px;padding-top:8px;border-top:1px solid var(--line-soft)}
.prompt{text-align:center;color:var(--ink-dim);font-size:.95rem;margin-bottom:6px}
.stage{display:grid;place-items:center;min-height:150px;padding:10px 0}
.glyph{font-family:'Jost',system-ui,sans-serif;font-size:5rem;line-height:1.1;color:var(--cobalt);
  text-align:center;font-weight:600}
.glyph.word{font-size:3.1rem}
.glyph.phrase{font-size:2.1rem;line-height:1.35}
.glyph.cue{display:flex;flex-direction:column;gap:4px}
.cueline{font-family:'JetBrains Mono',monospace;font-size:1.6rem;color:var(--brick)}
.cuegloss{font-family:'Archivo',sans-serif;font-size:1rem;color:var(--ink-dim)}
/* the "what's it for?" drill shows an English job, not a Spanish glyph — so it sets as
   prose rather than as a specimen */
.glyph.job{font-size:1.35rem;line-height:1.35;max-width:22ch}
.jobline{font-family:'Archivo',sans-serif;color:var(--ink-dim);font-weight:400}
.jobline::before{content:"“";color:var(--talavera)}
.jobline::after{content:"”";color:var(--talavera)}

/* ---- the sentence builder ---- */
.buildbox{background:var(--lime-2);border:1px solid var(--line);border-radius:4px;padding:13px}
.blab{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);margin-bottom:6px}
.brow{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;min-height:34px}
.bchip{background:var(--tile);border:1px solid var(--line);border-radius:99px;padding:6px 12px;
  cursor:pointer;font:.86rem 'Archivo',sans-serif;color:var(--cobalt)}
.bchip[aria-pressed=true]{background:var(--cobalt);color:#fff;border-color:var(--cobalt)}
.bchip.fill{border-color:rgba(224,168,28,.55);color:var(--brick)}
.bchip.fill:hover{background:rgba(224,168,28,.14)}
.bhint{font-size:.8rem;color:var(--ink-faint)}
.bout{border-top:1px dashed var(--line);padding-top:11px;text-align:center;font-size:.88rem;
  color:var(--ink-dim);min-height:52px}
.bpart{font-family:'Jost',system-ui,sans-serif;font-size:1.1rem;color:var(--cobalt)}
.bwhy{font-size:.78rem;color:var(--ink-faint)}
.bsentence{font-family:'Jost',system-ui,sans-serif;font-size:1.3rem;color:var(--cobalt);font-weight:600}
.bgloss{font-size:.85rem;color:var(--ink-faint)}

/* ---- options ---- */
.opts{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.opt{display:flex;align-items:center;gap:11px;width:100%;text-align:left;cursor:pointer;
  background:var(--lime-2);border:1px solid var(--line);border-radius:3px;
  padding:12px 13px;font:1.02rem 'Archivo',sans-serif;color:var(--ink)}
.opt:hover:not(:disabled){border-color:var(--cobalt);background:#fff}
.opt .key{flex:none;width:22px;height:22px;border-radius:3px;display:grid;place-items:center;
  background:rgba(27,74,140,.09);color:var(--cobalt);font-size:.75rem;font-weight:700}
.opt.correct{border-color:var(--teal);background:rgba(46,125,107,.10)}
.opt.correct .key{background:var(--teal);color:#fff}
.opt.wrongpick{border-color:var(--brick);background:rgba(179,84,43,.09)}
.opt.wrongpick .key{background:var(--brick);color:#fff}
.opt:disabled{cursor:default}

.feedback{min-height:22px;text-align:center;margin-top:12px;font-size:.95rem;font-weight:600}
.feedback.good{color:var(--teal-hi)}
.feedback.bad{color:var(--brick)}
.sayrow{display:flex;justify-content:center;margin-top:4px}
.say{background:transparent;border:1px solid var(--line);border-radius:99px;cursor:pointer;
  color:var(--cobalt);display:inline-grid;place-items:center;margin-left:6px;vertical-align:middle}
.say.sm{width:24px;height:24px}
.say.big{width:38px;height:38px;margin:6px 0}
.say:hover{background:rgba(27,74,140,.08)}
.next{
  display:none;width:100%;margin-top:14px;background:var(--cobalt);color:#fff;border:none;
  border-radius:3px;padding:12px;font:600 1rem 'Archivo',sans-serif;cursor:pointer;
  /* The teaching panel opens directly above this, which pushed the button off-screen and
     made every single answer require a scroll. Sticking it to the bottom keeps it reachable
     the instant you answer, while the panel stays readable underneath. The offset must
     clear the fixed bottom nav, or it parks underneath it. */
  position:sticky;
  bottom:calc(64px + env(safe-area-inset-bottom,0px));
  z-index:6;
  box-shadow:0 4px 18px rgba(18,52,106,.28);
}
.next.show{display:block}
.next:hover{background:var(--cobalt-hi)}
.hint{text-align:center;font-size:.76rem;color:var(--ink-faint);margin-top:9px}

/* ---- teaching panel ---- */
.panel{display:none;margin-top:16px;padding-top:15px;border-top:1px dashed var(--line)}
.panel.show{display:block}
.panel h3{font-size:1rem;color:var(--cobalt);margin-bottom:10px}
.panel h4{font-size:.83rem;color:var(--brick);margin-bottom:5px;letter-spacing:.02em;text-transform:uppercase}
.factrow{display:flex;gap:14px;align-items:flex-start;margin-bottom:12px}
.bigchar{flex:none;width:76px;height:76px;display:grid;place-items:center;font-family:'Jost',system-ui,sans-serif;
  font-size:2.5rem;color:var(--cobalt);background:var(--lime);border:1px solid var(--line);border-radius:4px}
.facts{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.facts .row{display:flex;gap:8px;font-size:.88rem}
.facts .lbl{flex:none;width:56px;color:var(--ink-faint);font-size:.78rem;padding-top:2px}
.facts .val{flex:1;color:var(--ink-dim)}
.facts .val b{color:var(--ink)}
.lookbox{background:rgba(224,168,28,.09);border:1px solid rgba(224,168,28,.35);border-radius:4px;
  padding:11px 13px;margin-top:11px}
.lookpair{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.lp{flex:1;text-align:center}
.lp .ch{font-family:'Jost',system-ui,sans-serif;font-size:2rem;color:var(--cobalt)}
.lp.alien .ch{color:var(--brick)}
.lp .cap{font-size:.72rem;color:var(--ink-faint)}
.vs{color:var(--ink-faint);font-size:.78rem}
.lookdiff{font-size:.86rem;color:var(--ink-dim)}
.tonebox{background:var(--lime);border:1px solid var(--line-soft);border-radius:4px;
  padding:10px 12px;margin:10px 0;font-size:.92rem;color:var(--ink-dim)}
.tonebox b{color:var(--ink)}
.tonebox [lang=es],.th{font-weight:600;color:var(--cobalt)}
.partsrow{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0}
.part{flex:1;min-width:74px;background:var(--lime-2);border:1px solid var(--line-soft);
  border-radius:3px;padding:8px 6px;text-align:center}
.part.stressed{border-color:var(--talavera);background:rgba(224,168,28,.12)}
.pch{font-family:'Jost',system-ui,sans-serif;font-size:1.25rem;color:var(--cobalt)}
.part.stressed .pch{color:var(--brick);font-weight:700}
.prole{font-size:.68rem;color:var(--talavera);text-transform:uppercase;letter-spacing:.04em;min-height:12px}
.pnote{font-size:.72rem;color:var(--ink-faint)}
.rulenote{font-size:.88rem;color:var(--ink-dim);margin-top:8px}
.flagchip{display:inline-block;margin-top:9px;font-size:.78rem;padding:4px 9px;border-radius:3px}
.flagchip.irr{background:rgba(179,84,43,.11);color:var(--brick);border:1px solid rgba(179,84,43,.3)}
.flagchip.reg{background:rgba(46,125,107,.10);color:var(--teal-hi);border:1px solid rgba(46,125,107,.28)}
.freqchip{display:inline-block;margin-left:7px;font-size:.68rem;padding:2px 7px;border-radius:99px;vertical-align:middle}
.freqchip.f1{background:var(--talavera);color:#3a2a00;font-weight:600}
.freqchip.f2{background:rgba(27,74,140,.12);color:var(--cobalt)}
.humanlink{font-size:.8rem;color:var(--ink-faint);margin-top:9px}
.humanlink a{color:var(--cobalt)}
.spellnote{list-style:none;font-size:.85rem;color:var(--ink-dim)}
.spellnote li{margin-bottom:4px}
.stress-aguda{color:var(--brick)}
.stress-llana{color:var(--cobalt)}
.stress-esdrujula{color:var(--teal-hi)}
.stress-sobresdrujula{color:var(--talavera)}

/* ---- result ---- */
.result{text-align:center;margin-bottom:14px}
.score{font-family:'Jost',system-ui,sans-serif;font-size:3rem;color:var(--cobalt);line-height:1}
.score small{font-size:1.2rem;color:var(--ink-faint)}
.meta{font-size:.85rem;color:var(--ink-faint)}
.verdict{border-radius:4px;padding:11px 13px;margin-bottom:9px;border:1px solid var(--line-soft);background:var(--lime-2)}
.verdict.ready{border-color:rgba(46,125,107,.4);background:rgba(46,125,107,.08)}
.verdict.slow{border-color:rgba(224,168,28,.45);background:rgba(224,168,28,.10)}
.verdict.work{border-color:rgba(179,84,43,.35);background:rgba(179,84,43,.07)}
.vt{font-weight:700;font-size:.94rem;margin-bottom:2px}
.vd{font-size:.84rem;color:var(--ink-dim)}
.misslist{margin-top:14px}
.misslist h4{font-size:.8rem;color:var(--brick);text-transform:uppercase;letter-spacing:.03em;margin-bottom:6px}
.missrow{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid var(--line-soft);font-size:.88rem}
.mth{font-family:'Jost',system-ui,sans-serif;font-size:1.15rem;color:var(--cobalt);min-width:60px}
.mr{color:var(--brick);font-family:'JetBrains Mono',monospace;font-size:.82rem}
.mg{color:var(--ink-faint);flex:1;font-size:.8rem}
.btnrow{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.btn-pri,.btn-sec{flex:1;min-width:110px;border-radius:3px;padding:11px;cursor:pointer;
  font:600 .92rem 'Archivo',sans-serif}
.btn-pri{background:var(--cobalt);color:#fff;border:none}
.btn-pri:hover{background:var(--cobalt-hi)}
.btn-sec{background:transparent;color:var(--cobalt);border:1px solid var(--line)}
.btn-sec:hover{background:rgba(27,74,140,.07)}

/* ---- lesson ---- */
.lessonbar{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.lback{background:transparent;border:none;color:var(--cobalt);cursor:pointer;font:.88rem 'Archivo',sans-serif}
.lsteps{display:flex;gap:4px;flex:1}
.lstep{flex:1;height:3px;border-radius:2px;background:rgba(27,74,140,.15);max-width:34px}
.lstep.done{background:var(--cobalt)}
.lstep.now{background:var(--talavera)}
.lesson-h{font-size:1.16rem;color:var(--cobalt);line-height:1.25;margin-bottom:9px}
.lesson-p{font-size:.95rem;color:var(--ink-dim);margin-bottom:14px}
.lesson-p b{color:var(--ink)}
.lesson-foot{font-size:.85rem;color:var(--ink-dim);margin-top:11px}
.lessonnav{display:flex;gap:8px;margin-top:14px}

/* ---- the stress machine ---- */
.machine{background:var(--lime-2);border:1px solid var(--line);border-radius:4px;padding:13px}
.mrow{margin-bottom:12px}
.mlab{font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint)}
.mopts{display:flex;flex-wrap:wrap;gap:6px;margin:5px 0 4px}
.mopt{background:var(--tile);border:1px solid var(--line);border-radius:3px;padding:7px 11px;
  cursor:pointer;font:.86rem 'Archivo',sans-serif;color:var(--ink-dim);
  display:flex;flex-direction:column;align-items:center;gap:1px}
.mopt[aria-pressed=true]{background:var(--cobalt);color:#fff;border-color:var(--cobalt)}
.mopt small{font-size:.66rem;opacity:.8}
.mhint{font-size:.76rem;color:var(--ink-faint)}
.mout{border-top:1px dashed var(--line);padding-top:11px;margin-top:4px;text-align:center}
.sylrow{display:flex;gap:5px;justify-content:center;margin-bottom:9px}
.sylbox{width:30px;height:30px;border-radius:3px;display:grid;place-items:center;
  border:1px solid var(--line);background:var(--tile);font-size:.82rem;color:var(--ink-faint)}
.sylbox.on{background:var(--talavera);border-color:var(--talavera);color:#3a2a00;font-weight:700}
.mword{font-size:1.05rem;margin-bottom:5px;color:var(--cobalt)}
.mword .th{font-family:'Jost',system-ui,sans-serif;font-size:1.25rem;margin-right:6px}
.mword b{font-family:'JetBrains Mono',monospace;font-size:.9rem;color:var(--brick)}
.mword .mg{color:var(--ink-faint);font-size:.82rem;margin-left:5px}
.mword.mnone{font-size:.85rem;color:var(--ink-faint)}
.mtone{font-family:'Jost',system-ui,sans-serif;font-size:1.3rem;font-weight:700}
.mformula{font-size:.78rem;color:var(--ink-faint);margin-top:3px}
.mfixed{font-size:.75rem;color:var(--ink-faint);margin-top:9px;padding-top:8px;border-top:1px dashed var(--line-soft)}

/* ---- lesson widgets ---- */
.lgrid{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.lcell{width:48px;height:48px;border-radius:3px;border:1px solid var(--line);background:var(--tile);
  font-family:'Jost',system-ui,sans-serif;font-size:1.4rem;color:var(--cobalt);cursor:pointer}
.lcell[aria-pressed=true]{background:var(--cobalt);color:#fff;border-color:var(--cobalt)}
.linfo{background:var(--lime);border:1px solid var(--line-soft);border-radius:4px;padding:10px 12px;
  font-size:.88rem;color:var(--ink-dim);min-height:44px}
.linfo .big{font-family:'Jost',system-ui,sans-serif;font-size:1.5rem;color:var(--cobalt);margin-right:8px;vertical-align:middle}
.reveal{text-align:center;background:var(--lime-2);border:1px solid var(--line);border-radius:4px;padding:18px}
.rth{font-family:'Jost',system-ui,sans-serif;font-size:2.6rem;color:var(--cobalt)}
.rq{font-size:.85rem;color:var(--ink-faint);margin:7px 0}
.ra{display:none}
.reveal.shown .ra{display:block}
.rr{font-family:'JetBrains Mono',monospace;font-size:1.15rem;color:var(--brick);margin-top:6px}
.rg{font-size:.9rem;color:var(--ink-dim)}
.revbtn{margin-top:10px;background:transparent;border:1px solid var(--line);border-radius:3px;
  color:var(--cobalt);padding:8px 16px;cursor:pointer;font:.88rem 'Archivo',sans-serif}
.twoup{display:flex;gap:9px}
.upcard{flex:1;text-align:center;background:var(--lime-2);border:1px solid var(--line);
  border-radius:4px;padding:13px 8px}
.uth{font-family:'Jost',system-ui,sans-serif;font-size:1.9rem;color:var(--cobalt)}
.ur{font-family:'JetBrains Mono',monospace;font-size:.86rem;color:var(--brick);margin-top:3px}
.ug{font-size:.78rem;color:var(--ink-faint)}
.tapstrip{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;justify-content:center}
.tapch{min-width:52px;height:50px;padding:0 10px;border-radius:3px;border:1px solid var(--line);
  background:var(--tile);font-family:'Jost',system-ui,sans-serif;font-size:1.25rem;color:var(--cobalt);cursor:pointer}
.tapch[aria-pressed=true]{background:var(--cobalt);color:#fff;border-color:var(--cobalt)}
.tapch.right{background:rgba(46,125,107,.16);border-color:var(--teal);color:var(--teal-hi)}
.tapch.wrong{background:rgba(179,84,43,.13);border-color:var(--brick);color:var(--brick)}

/* ---- path ---- */
.unitcards{display:flex;flex-direction:column;gap:9px;margin-top:12px}
.unitcard{text-align:left;width:100%;cursor:pointer;background:var(--tile);
  border:1px solid var(--line);border-radius:4px;padding:13px;font-family:inherit}
.unitcard.here{border-color:var(--cobalt);box-shadow:inset 3px 0 0 var(--cobalt)}
.unitcard.next{border-color:var(--talavera);box-shadow:inset 3px 0 0 var(--talavera)}
.uc-top{display:flex;align-items:center;gap:9px}
.uc-n{font-family:'Jost',system-ui,sans-serif;font-size:1.1rem;color:var(--brick);min-width:22px}
.uc-name{font-size:1rem;color:var(--ink);font-weight:600;flex:1}
.uc-tag{font-size:.68rem;padding:2px 7px;border-radius:99px}
.uc-tag.here{background:rgba(27,74,140,.12);color:var(--cobalt)}
.uc-tag.next{background:rgba(224,168,28,.2);color:#7a5a00}
.uc-sub{font-size:.79rem;color:var(--ink-faint);margin-top:3px}
.uc-pay{font-size:.82rem;color:var(--ink-dim);margin-top:6px}
.uc-pay .th{font-family:'Jost',system-ui,sans-serif}
.uc-pay b{font-family:'JetBrains Mono',monospace;font-size:.8rem;color:var(--brick)}
.uc-pay .pg{color:var(--ink-faint)}
.uc-modes{display:flex;flex-wrap:wrap;gap:9px;margin-top:8px}
.uc-mode{font-size:.73rem;color:var(--ink-faint);display:flex;align-items:center;gap:4px}
.vdot{width:7px;height:7px;border-radius:99px;background:rgba(27,74,140,.2);display:inline-block}
.vdot.ready{background:var(--teal)}
.vdot.slow{background:var(--talavera)}
.vdot.work{background:var(--brick)}
.uc-lesson{display:inline-block;margin-top:9px;font-size:.8rem;color:var(--cobalt)}

/* ---- progress ---- */
.bigstats{display:flex;gap:9px;margin:12px 0}
.bigstat{flex:1;text-align:center;background:var(--tile);border:1px solid var(--line);border-radius:4px;padding:12px 6px}
.bigstat .n{font-family:'Jost',system-ui,sans-serif;font-size:1.7rem;color:var(--cobalt)}
.bigstat .l{font-size:.72rem;color:var(--ink-faint)}
.corebar{position:relative;height:9px;border-radius:5px;background:rgba(27,74,140,.12);overflow:hidden}
.corefill{position:absolute;inset:0;background:rgba(27,74,140,.32)}
.coresolid{position:absolute;inset:0;background:var(--cobalt)}
.taught{color:var(--cobalt)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:6px;margin-top:10px}
.tile{background:var(--tile);border:1px solid var(--line-soft);border-radius:3px;padding:6px 4px;text-align:center}
.tile.rough{border-color:rgba(179,84,43,.4)}
.tile .t{font-family:'Jost',system-ui,sans-serif;font-size:1.15rem;color:var(--cobalt);line-height:1.2}
.tile .t.small{font-size:.76rem;font-family:'Archivo',sans-serif}
.tile .bar{height:3px;border-radius:2px;background:rgba(27,74,140,.13);margin-top:5px;overflow:hidden}
.tile .fill{height:100%;background:var(--teal)}

/* ---- guide ---- */
.ref{background:var(--tile);border:1px solid var(--line);border-radius:4px;margin-bottom:8px}
.ref summary{cursor:pointer;padding:11px 13px;font-size:.92rem;font-weight:600;color:var(--cobalt);list-style:none}
.ref summary::-webkit-details-marker{display:none}
.ref summary::before{content:"▸ ";color:var(--talavera)}
.ref[open] summary::before{content:"▾ "}
.ref .dbody{padding:0 13px 13px;font-size:.88rem;color:var(--ink-dim)}
.ref .dbody p,.ref .dbody ul,.ref .dbody ol{margin-bottom:9px}
.ref .dbody ul,.ref .dbody ol{margin-left:18px}
.ref .dbody li{margin-bottom:4px}
.ref h4{font-size:.82rem;color:var(--brick);text-transform:uppercase;letter-spacing:.03em;margin:12px 0 6px}
.tbl{width:100%;border-collapse:collapse;font-size:.84rem;margin-bottom:10px}
.tbl th{text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-faint);border-bottom:1px solid var(--line);padding:5px 6px;font-weight:600}
.tbl td{padding:6px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.tbl td.g{font-family:'Jost',system-ui,sans-serif;font-size:1.05rem;color:var(--cobalt);white-space:nowrap}
.tbl td.r{font-family:'JetBrains Mono',monospace;font-size:.8rem;color:var(--brick)}
.tbl .mean{color:var(--ink-faint);font-size:.78rem}
#glossary p{font-size:.86rem;color:var(--ink-dim);margin-bottom:10px}
#glossary h4{font-size:.82rem;color:var(--brick);text-transform:uppercase;letter-spacing:.03em;margin:14px 0 5px}

/* ---- sheets ---- */
.sheet{position:fixed;inset:0;z-index:110;background:rgba(18,52,106,.35);display:none;align-items:flex-end}
.sheet.on{display:flex}
.sheet-in{width:100%;max-height:82vh;overflow-y:auto;background:var(--lime-2);
  border-top:2px solid var(--cobalt);border-radius:8px 8px 0 0;
  padding:14px 16px calc(20px + env(safe-area-inset-bottom,0px));max-width:740px;margin:0 auto}
.sheet-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;color:var(--cobalt)}
.sheet-h .x{background:transparent;border:none;color:var(--ink-faint);font-size:1rem;cursor:pointer}
.sheet-sec{font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);margin:12px 0 6px}
.pickrow{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;
  background:var(--tile);border:1px solid var(--line-soft);border-radius:3px;padding:10px 12px;
  margin-bottom:5px;font-family:inherit}
.pickrow[aria-pressed=true]{border-color:var(--cobalt);background:rgba(27,74,140,.06)}
.pk-n{font-family:'Jost',system-ui,sans-serif;color:var(--brick);min-width:20px}
.pk-b{flex:1;min-width:0;display:flex;flex-direction:column}
.pk-t{font-size:.92rem;color:var(--ink);font-weight:600}
.pk-s{font-size:.76rem;color:var(--ink-faint)}
.codebox{width:100%;background:var(--tile);border:1px solid var(--line);border-radius:3px;
  padding:9px;font:.76rem 'JetBrains Mono',monospace;color:var(--ink-dim);resize:vertical}

/* ---- bottom nav ---- */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;
  background:rgba(242,239,230,.97);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-top:1px solid var(--line-soft);padding-bottom:env(safe-area-inset-bottom,0px)}
.navbtn{flex:1;background:transparent;border:none;cursor:pointer;padding:9px 0 7px;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  font:.68rem 'Archivo',sans-serif;color:var(--ink-faint)}
.navbtn svg{width:21px;height:21px}
.navbtn[aria-current=true]{color:var(--cobalt);font-weight:600}

@media (max-width:380px){
  .glyph{font-size:4rem}
  .glyph.word{font-size:2.5rem}
  .twoup{flex-direction:column}
}


/* ---------- German-specific: the colour code ----------
   Blue = the length rule decided it. Yellow = the rule's blind spot. Red = a consonant
   hardening. The colours are the information, not decoration — a reader can see which
   rule is firing without reading a word of the panel. */
.vlong{color:var(--cobalt);font-weight:700;border-bottom:2px solid var(--cobalt)}
.vshort{color:var(--cobalt);font-weight:700;border-bottom:2px dotted var(--cobalt)}
.vunknown{color:#8a6d10;font-weight:700;border-bottom:2px dashed var(--talavera)}
.devoiced{color:var(--brick);font-weight:700}
.marked{letter-spacing:.01em}
.warn{color:#8a6d10;font-weight:600}
.mtone.vlong,.mtone.vshort{border-bottom:0}
.mtone.vunknown{color:#8a6d10;border-bottom:0}
.tapch.wide{min-width:82px}
.glyph.job{font-size:1.35rem;line-height:1.35;max-width:22ch;font-family:'Archivo',sans-serif}
.jobline{color:var(--ink-dim);font-weight:400}
.jobline::before{content:"\201C";color:var(--talavera)}
.jobline::after{content:"\201D";color:var(--talavera)}

/* ---- the sentence builder ---- */
.buildbox{background:var(--lime-2);border:1px solid var(--line);border-radius:2px;padding:13px}
.blab{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint);margin-bottom:6px}
.brow{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;min-height:34px}
.bchip{background:var(--tile);border:1px solid var(--line);border-radius:2px;padding:6px 12px;
  cursor:pointer;font:.86rem 'Archivo',sans-serif;color:var(--cobalt)}
.bchip[aria-pressed=true]{background:var(--cobalt);color:#fff;border-color:var(--cobalt)}
.bchip.fill{border-color:rgba(224,168,28,.7);color:#8a6d10}
.bchip.fill:hover{background:rgba(224,168,28,.16)}
.bhint{font-size:.8rem;color:var(--ink-faint)}
.bout{border-top:1px solid var(--line);padding-top:11px;text-align:center;font-size:.88rem;
  color:var(--ink-dim);min-height:52px}
.bpart{font-family:'Jost',sans-serif;font-size:1.1rem;font-weight:500;color:var(--cobalt)}
.bwhy{font-size:.78rem;color:var(--ink-faint)}
.bsentence{font-family:'Jost',sans-serif;font-size:1.3rem;color:var(--cobalt);font-weight:700}
.bgloss{font-size:.85rem;color:var(--ink-faint)}