/* EasyGot French — encre violette sur papier Seyès.
   The violet ink and pale blue grid of a French school exercise book: literally what
   learning to read French looks like. Libre Baskerville for display, Karla for body,
   IBM Plex Mono for phonetic data. The faint horizontal rule behind the page is the
   Seyès line — decoration that means something, and the reason the ground is warm white
   rather than the lime-wash of the Spanish course or the lacquer of the Thai one. */
:root{
  --cobalt:#4A3C8C;            /* encre violette — the ink itself */
  --cobalt-hi:#5F4FAD;
  --cobalt-deep:#332764;
  --lime:#FBFAF5;              /* paper */
  --lime-2:#FFFFFF;
  --talavera:#C98A1E;          /* the pencil annotation */
  --brick:#C4453F;             /* the red margin line */
  --teal:#2E7D6B;
  --teal-hi:#1F6455;
  --ink:#1A1726;
  --ink-dim:#4B4660;
  --ink-faint:#867FA0;
  --gold-hi:var(--brick);
  --line:rgba(74,60,140,.26);
  --line-soft:rgba(74,60,140,.13);
  --seyes:#BFD4E8;             /* the grid */
  --tile:#FFFFFF;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--lime);
  /* the Seyès rule: a faint horizontal grid, with the red margin down the left */
  background-image:
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(191,212,232,.55) 31px 32px),
    linear-gradient(90deg, transparent 0 26px, rgba(196,69,63,.22) 26px 27px, transparent 27px);
  color:var(--ink);
  font-family:'Karla',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:'Libre Baskerville',Georgia,serif}
b,strong{font-weight:700}
.ipa{font-family:'IBM Plex 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 'Karla',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:'Libre Baskerville',Georgia,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:'Libre Baskerville',Georgia,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:'IBM Plex Mono',monospace;font-size:1.6rem;color:var(--brick)}
.cuegloss{font-family:'Karla',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:'Karla',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 'Karla',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:'Libre Baskerville',Georgia,serif;font-size:1.1rem;color:var(--cobalt)}
.bwhy{font-size:.78rem;color:var(--ink-faint)}
.bsentence{font-family:'Libre Baskerville',Georgia,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 'Karla',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 'Karla',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:'Libre Baskerville',Georgia,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:'Libre Baskerville',Georgia,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:'Libre Baskerville',Georgia,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:'Libre Baskerville',Georgia,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:'Libre Baskerville',Georgia,serif;font-size:1.15rem;color:var(--cobalt);min-width:60px}
.mr{color:var(--brick);font-family:'IBM Plex 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 'Karla',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 'Karla',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 'Karla',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:'Libre Baskerville',Georgia,serif;font-size:1.25rem;margin-right:6px}
.mword b{font-family:'IBM Plex 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:'Libre Baskerville',Georgia,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:'Libre Baskerville',Georgia,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:'Libre Baskerville',Georgia,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:'Libre Baskerville',Georgia,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:'IBM Plex 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 'Karla',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:'Libre Baskerville',Georgia,serif;font-size:1.9rem;color:var(--cobalt)}
.ur{font-family:'IBM Plex 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:'Libre Baskerville',Georgia,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:'Libre Baskerville',Georgia,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:'Libre Baskerville',Georgia,serif}
.uc-pay b{font-family:'IBM Plex 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:'Libre Baskerville',Georgia,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:'Libre Baskerville',Georgia,serif;font-size:1.15rem;color:var(--cobalt);line-height:1.2}
.tile .t.small{font-size:.76rem;font-family:'Karla',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:'Libre Baskerville',Georgia,serif;font-size:1.05rem;color:var(--cobalt);white-space:nowrap}
.tbl td.r{font-family:'IBM Plex 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:'Libre Baskerville',Georgia,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 'IBM Plex 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 'Karla',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}
}


/* ---------- French-specific: silence, liaison, the marked word ---------- */
/* Silent letters are shown, not described — greyed in place so the eye learns the shape
   of a French ending rather than a rule about it. */
.mute{color:var(--ink-faint);opacity:.5}
.marked,.say-all{letter-spacing:.01em}
.opt.marked span:last-child{font-family:'Libre Baskerville',Georgia,serif;font-size:1.05rem}
.silentbox{background:rgba(74,60,140,.06);border-color:rgba(74,60,140,.22)}
.tapch.issilent{color:var(--ink-faint);opacity:.55;border-style:dashed}
.tapch.wide{min-width:70px}
.glyph.job{font-size:1.35rem;line-height:1.35;max-width:22ch;font-family:'Karla',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: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 'Karla',sans-serif;color:var(--cobalt)}
.bchip[aria-pressed=true]{background:var(--cobalt);color:#fff;border-color:var(--cobalt)}
.bchip.fill{border-color:rgba(201,138,30,.55);color:var(--brick)}
.bchip.fill:hover{background:rgba(201,138,30,.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:'Libre Baskerville',Georgia,serif;font-size:1.05rem;color:var(--cobalt)}
.bwhy{font-size:.78rem;color:var(--ink-faint)}
.bsentence{font-family:'Libre Baskerville',Georgia,serif;font-size:1.2rem;color:var(--cobalt);font-weight:700}
.bgloss{font-size:.85rem;color:var(--ink-faint)}