/* Layout: a French "cahier" (Seyès-ruled exercise book). Home = the notebook's contents page; lessons = one ruled page at a time. */
:root{
  --paper:#ffffff; --sheet:#f3f5fb; --fg:#1b2133; --muted:#5b6478;
  --ink:#2343a8; --ink-soft:#e6ebfa; --margin:#d93b6e; --rule:#dfe6f6; --border:#d4dbea;
  --red:#d6453d; --yellow:#c98f00; --green:#2f9e5b; --none:#c3c9d6;
  --ok-bg:#e7f6ed; --bad-bg:#fdecea; --near-bg:#fff6dc;
  --f-display:"Shantell Sans","Comic Neue","Segoe Print",cursive;
  --f-body:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#151b2a; --sheet:#0e131e; --fg:#e6e9f2; --muted:#9aa3b8;
  --ink:#93aefc; --ink-soft:#1e2946; --margin:#ff74a0; --rule:#1d2640; --border:#2a3450;
  --red:#ff7a70; --yellow:#f5c242; --green:#5fd08c; --none:#3b4560;
  --ok-bg:#15301f; --bad-bg:#3a1b1b; --near-bg:#352a0e; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#151b2a; --sheet:#0e131e; --fg:#e6e9f2; --muted:#9aa3b8;
  --ink:#93aefc; --ink-soft:#1e2946; --margin:#ff74a0; --rule:#1d2640; --border:#2a3450;
  --red:#ff7a70; --yellow:#f5c242; --green:#5fd08c; --none:#3b4560;
  --ok-bg:#15301f; --bad-bg:#3a1b1b; --near-bg:#352a0e; color-scheme:dark}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--sheet);color:var(--fg);font:17px/1.55 var(--f-body);min-height:100vh}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
h1,h2,h3{font-family:var(--f-display);color:var(--ink);line-height:1.2;text-wrap:balance;margin:0}
p{margin:0}
.muted{color:var(--muted)}
.small{font-size:.85rem}

.app{max-width:1100px;margin:0 auto;padding:0 16px 40px}
.top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-block:12px;position:sticky;top:0;background:var(--sheet);z-index:5}
.brand{background:none;border:none;padding:0;text-align:left;display:grid}
.brand-name{font-family:var(--f-display);font-weight:700;font-size:1.35rem;color:var(--ink);line-height:1.1}
.brand-sub{font-size:.8rem;color:var(--muted)}
.nav{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--border);border-radius:999px;background:var(--paper);font-size:.85rem;font-variant-numeric:tabular-nums}
.chip b{color:var(--ink)}
.navbtn{border:1px solid var(--border);background:var(--paper);border-radius:8px;padding:5px 12px;font-size:.88rem}
.navbtn:hover{border-color:var(--ink)}

/* buttons */
.btn{border:1.5px solid var(--border);background:var(--paper);border-radius:10px;padding:9px 18px;font-weight:700;display:inline-flex;align-items:center;gap:8px;justify-content:center}
.btn:hover{border-color:var(--ink)}
.btn.primary{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{border-style:dashed;color:var(--muted);font-weight:400}
.btn.danger{border-color:var(--red);color:var(--red)}
.btn:disabled{opacity:.5;cursor:default}
.btn.sm{padding:5px 12px;font-size:.88rem}
.linkbtn{background:none;border:none;color:var(--ink);text-decoration:underline;padding:0;font-size:.9rem}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.spacer{flex:1}

/* ruled page */
.page{position:relative;background:var(--paper);border:1px solid var(--border);border-radius:6px;padding:20px 20px 24px 64px;overflow:hidden}
.page::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom,transparent 0,transparent 31px,var(--rule) 31px,var(--rule) 32px);opacity:.7}
.page::after{content:"";position:absolute;top:0;bottom:0;left:46px;width:2px;background:var(--margin);opacity:.35;pointer-events:none}
.page > *{position:relative}
.panel{background:var(--paper);border:1px solid var(--border);border-radius:6px;padding:16px}
.panel h2{font-size:1.1rem;margin-bottom:8px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.panel h2 .count{font-family:var(--f-body);font-size:.8rem;color:var(--muted);font-weight:400}

/* home */
.home{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
.home-main,.home-side{display:grid;gap:16px;min-width:0}
.next h1{font-size:1.7rem;margin:4px 0 6px}
.eyebrow{font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;color:var(--margin);font-weight:700}
.next .goal{color:var(--muted);margin-bottom:14px;max-width:60ch}
.next .alt{margin-top:12px;font-size:.9rem;color:var(--muted)}
.course-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.course-list li{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:6px}
.course-list li.now{background:var(--ink-soft)}
.course-list .num{width:24px;font-variant-numeric:tabular-nums;color:var(--muted);font-size:.8rem;text-align:right}
.course-list .t{flex:1;min-width:0}
.course-list .tag{font-size:.72rem;color:var(--muted);border:1px solid var(--border);border-radius:999px;padding:0 7px}
.course-list button{background:none;border:none;color:var(--ink);font-size:.82rem;text-decoration:underline;padding:0}
.unit-head{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:12px 0 4px;font-weight:700;list-style:none}
.unit-head .when{text-transform:none;letter-spacing:0;font-weight:400}
.dot{display:inline-block;width:11px;height:11px;border-radius:50%;background:var(--none);flex:none}
.dot.red{background:var(--red)}.dot.yellow{background:var(--yellow)}.dot.green{background:var(--green)}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:.78rem;color:var(--muted);margin-bottom:6px}
.legend span{display:inline-flex;gap:5px;align-items:center}
.meter{height:10px;border-radius:999px;background:var(--ink-soft);overflow:hidden;margin:4px 0}
.meter .fill{height:100%;background:var(--ink);border-radius:999px;transition:width .6s ease}
.steps{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-wrap:wrap;gap:4px;font-size:.78rem}
.steps li{padding:2px 8px;border-radius:999px;border:1px solid var(--border);color:var(--muted)}
.steps li.past{color:var(--ink);background:var(--ink-soft);border-color:var(--ink-soft)}
.steps li.now{color:var(--paper);background:var(--ink);border-color:var(--ink);font-weight:700}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
.stat-row b{display:block;font-family:var(--f-display);font-size:1.4rem;color:var(--ink);font-variant-numeric:tabular-nums}
.stat-row span{font-size:.78rem;color:var(--muted)}
.defis{list-style:none;margin:0;padding:0;font-size:.88rem}
.defis li{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid var(--rule);font-variant-numeric:tabular-nums}

/* lesson */
.lesson-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.lesson-top h1{font-size:1.3rem}
.stages{display:flex;gap:4px;flex-wrap:wrap;list-style:none;margin:0 0 14px;padding:0}
.stages li{font-size:.78rem;padding:3px 10px;border-radius:999px;border:1px solid var(--border);background:var(--paper);color:var(--muted)}
.stages li.done{color:var(--ink);background:var(--ink-soft);border-color:var(--ink-soft)}
.stages li.now{background:var(--ink);color:var(--paper);border-color:var(--ink);font-weight:700}
.lesson-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:16px;align-items:start}
.lesson-side{display:grid;gap:12px;min-width:0}
.stage-title{font-size:1.25rem;margin-bottom:4px}
.stage-sub{color:var(--muted);margin-bottom:16px;font-size:.92rem}
.md p{margin:0 0 .6em}
.md strong{color:var(--ink)}
.tbl{overflow-x:auto;margin:6px 0 12px}
table{border-collapse:collapse;background:var(--paper);font-size:.95rem}
th,td{border:1px solid var(--border);padding:5px 12px;text-align:left}
th{background:var(--ink-soft)}
caption{caption-side:top;text-align:left;font-weight:700;padding-bottom:4px;color:var(--muted);font-size:.85rem}
.trick{border:2px dashed var(--margin);border-radius:10px;padding:10px 14px;background:var(--paper)}
.trick::before{content:"Astuce";display:block;font-family:var(--f-display);color:var(--margin);font-size:.85rem}
.examples{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.examples li{display:grid;grid-template-columns:auto 1fr;gap:0 10px;align-items:center}
.examples .fr{font-weight:700;font-family:var(--f-display)}
.examples .en{grid-column:2;color:var(--muted);font-size:.9rem}
.say{border:1px solid var(--border);background:var(--paper);border-radius:999px;width:32px;height:32px;display:inline-grid;place-items:center;color:var(--ink);flex:none;padding:0}
.say:hover{border-color:var(--ink)}
.say.slow{width:auto;padding:0 10px;font-size:.78rem}
.vocab-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.vcard{border:1px solid var(--border);border-radius:8px;padding:10px 12px;background:var(--paper);display:grid;grid-template-columns:1fr auto;gap:2px 8px;align-items:center}
.vcard .fr{font-weight:700;color:var(--ink);font-size:1.05rem}
.vcard .pron{color:var(--muted);font-style:italic;font-size:.85rem;grid-column:1}
.vcard .en{grid-column:1}
.vcard .say{grid-row:1/4;grid-column:2}

/* exercises */
.ex{display:grid;gap:14px}
.ex-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rung{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;font-weight:700;padding:2px 9px;border-radius:999px;border:1px solid currentColor}
.rung .bars{display:inline-flex;gap:2px;align-items:flex-end}
.rung .bars i{width:4px;background:currentColor;opacity:.25;border-radius:1px}
.rung .bars i:nth-child(1){height:5px}.rung .bars i:nth-child(2){height:8px}.rung .bars i:nth-child(3){height:11px}.rung .bars i:nth-child(4){height:14px}
.rung .bars i.on{opacity:1}
.rung.r1{color:var(--green)}.rung.r2{color:var(--yellow)}.rung.r3{color:var(--margin)}.rung.r4{color:var(--ink)}
.prompt{font-weight:700;font-size:1.05rem}
.prompt .en-toggle{font-weight:400;font-size:.8rem;margin-left:6px}
.qtext{font-family:var(--f-display);font-size:1.35rem;font-weight:500;line-height:1.4}
.options{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.opt{border:1.5px solid var(--border);background:var(--paper);border-radius:10px;padding:10px 14px;text-align:left;font-family:var(--f-display);font-weight:500}
.opt:hover:not(:disabled){border-color:var(--ink)}
.opt.correct{background:var(--ok-bg);border-color:var(--green)}
.opt.wrong{background:var(--bad-bg);border-color:var(--red)}
.opt:disabled{cursor:default}
.answer-input{width:100%;border:1.5px solid var(--border);border-radius:10px;padding:10px 12px;background:var(--paper);font-family:var(--f-display);font-weight:500;font-size:1.1rem}
.answer-input:focus{border-color:var(--ink);outline:none}
textarea.answer-input{min-height:110px;resize:vertical;line-height:1.5}
.accents{display:flex;flex-wrap:wrap;gap:4px}
.accents button{min-width:34px;padding:3px 6px;border:1px solid var(--border);border-radius:6px;background:var(--sheet);font-size:1rem}
.accents button:hover{border-color:var(--ink)}
.bank{display:flex;flex-wrap:wrap;gap:6px}
.tile{border:1.5px solid var(--border);border-bottom-width:3px;background:var(--paper);border-radius:8px;padding:5px 11px;font-family:var(--f-display);font-weight:500}
.tile:hover:not(:disabled){border-color:var(--ink)}
.tile:disabled{opacity:.3;cursor:default}
.built{min-height:52px;border:1.5px dashed var(--border);border-radius:10px;padding:8px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.built:empty::before{content:"Tap the words in order";color:var(--muted);font-size:.9rem}
.match{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.match .col{display:grid;gap:8px;align-content:start}
.match .opt.sel{border-color:var(--ink);background:var(--ink-soft)}
.match .opt.done{background:var(--ok-bg);border-color:var(--green);opacity:.8}
.feedback{border-radius:10px;padding:12px 14px;display:grid;gap:6px}
.feedback.ok{background:var(--ok-bg)}
.feedback.bad{background:var(--bad-bg)}
.feedback.near{background:var(--near-bg)}
.feedback.hint{background:var(--near-bg)}
.feedback .verdict{font-family:var(--f-display);font-weight:700}
.feedback .ai{border-top:1px solid var(--border);padding-top:6px;margin-top:2px}
.thinking{font-family:var(--f-display);color:var(--muted)}
.thinking::after{content:"…";animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.2}}
.reading{font-family:var(--f-display);font-weight:500;font-size:1.08rem;line-height:2;white-space:pre-line}
.reading-kind{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.qlist{display:grid;gap:14px;counter-reset:q}
.qitem{display:grid;gap:8px}
.check{border:1px solid var(--border);border-radius:10px;padding:12px;display:grid;gap:10px;background:var(--paper)}
.checklist{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.checklist label{display:flex;gap:8px;align-items:flex-start}
.model{border-left:3px solid var(--ink);padding:6px 12px;font-family:var(--f-display);background:var(--ink-soft);border-radius:0 8px 8px 0}
.corrections{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.corrections li{display:grid;gap:2px}
.corrections s{color:var(--red)}
.corrections b{color:var(--green)}
.ask{display:grid;gap:8px}
.ask .answer{font-size:.92rem}
.bilan-score{font-family:var(--f-display);font-size:2.4rem;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1}
.levelup{background:var(--ink);color:var(--paper);border-radius:10px;padding:12px 16px;font-family:var(--f-display)}
.bonus{border:1px solid var(--border);border-radius:10px;padding:10px 14px}
.bonus .k{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--margin);font-weight:700}

.help-row{display:grid;gap:8px;margin-top:4px}
.help-row .linkbtn{justify-self:start;font-size:.85rem}

.note-row{display:grid;gap:6px;margin-top:6px;border-top:1px dashed var(--border);padding-top:8px}
.note-row .linkbtn{justify-self:start;font-size:.85rem}
.note-box{display:grid;gap:6px}
.note-ta{min-height:80px;font-size:1rem}

.field select,.field input,.field textarea{width:100%;min-width:0;max-width:100%}

/* forms */
.form{display:grid;gap:16px;max-width:640px}
.field{display:grid;gap:5px}
.field label,.field .label{font-weight:700;font-size:.92rem}
.field input,.field select,.field textarea{border:1.5px solid var(--border);border-radius:8px;padding:9px 11px;background:var(--paper)}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink);outline:none}
.hint{font-size:.82rem;color:var(--muted)}
.status{font-size:.88rem}
.status.err{color:var(--red)}
.status.ok{color:var(--green)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.filerow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.filerow:focus-within label.btn{outline:2px solid var(--ink);outline-offset:2px}
.ai-state{display:flex;gap:8px;align-items:center;font-size:.9rem}
.ai-state .dot{width:9px;height:9px}
fieldset{border:1px solid var(--border);border-radius:8px;padding:12px 14px;display:grid;gap:12px;margin:0}
legend{font-family:var(--f-display);color:var(--ink);padding:0 6px}

/* vocab page */
.vocab-table td.fr{font-weight:700;color:var(--ink)}
.vocab-table td.pron{color:var(--muted);font-style:italic}
.box{font-size:.75rem;color:var(--muted);white-space:nowrap}

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--fg);color:var(--paper);padding:10px 16px;border-radius:10px;font-size:.9rem;z-index:20;max-width:calc(100% - 32px)}

@media (max-width:860px){
  .home,.lesson-grid{grid-template-columns:minmax(0,1fr)}
  .page{padding:16px 14px 20px 48px}
  .page::after{left:34px}
  .match{grid-template-columns:1fr 1fr}
  .qtext{font-size:1.2rem}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- online: learner picker, plans, parent area ---------- */
.profiles{position:relative;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px}
.profile{display:grid;justify-items:center;gap:6px;padding:18px 10px;border:1.5px solid var(--border);border-radius:12px;background:var(--paper);min-width:0}
.profile:hover{border-color:var(--ink)}
.avatar{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:var(--ink-soft);color:var(--ink);font:700 1.6rem var(--f-display)}
.pname{font-weight:700;max-width:100%;overflow-wrap:anywhere;text-align:center}
.plans{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-block:12px}
.plan{display:grid;gap:4px;text-align:left;padding:16px;border:1.5px solid var(--border);border-radius:12px;background:var(--paper);min-width:0}
.plan:hover{border-color:var(--ink)}
.plan b{font-size:1.05rem}
.price{font:700 1.6rem var(--f-display);color:var(--ink);font-variant-numeric:tabular-nums}
.legal{max-width:760px;margin:0 auto;padding:24px 16px 48px}
.legal h1{font-size:1.8rem;margin-bottom:6px}
.legal h2{font-size:1.2rem;margin:26px 0 8px}
.legal .draft{background:var(--near-bg);border:1px solid var(--yellow);border-radius:8px;padding:10px 14px;margin:14px 0}
.legal li{margin-bottom:6px}
/* ---------- speaking & the Atelier ---------- */
.say-target{font-family:var(--f-display);font-weight:700;font-size:1.7rem;color:var(--ink);margin:4px 0 6px;line-height:1.3}
.speak{display:grid;gap:8px;justify-items:start;margin-top:12px}
.mic-btn{display:inline-flex;align-items:center;gap:10px;border:none;border-radius:999px;padding:12px 22px 12px 16px;background:var(--margin);color:#fff;font-weight:700;font-size:1rem;box-shadow:0 2px 0 rgba(0,0,0,.15)}
.mic-btn svg{width:22px;height:22px}
.mic-btn:hover{filter:brightness(1.07)}
.mic-btn.on{animation:micpulse 1.2s ease-in-out infinite}
@keyframes micpulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--margin) 55%,transparent)}50%{box-shadow:0 0 0 10px color-mix(in srgb,var(--margin) 0%,transparent)}}
.mic-mini{min-width:34px;padding:3px 6px;border:1px solid var(--margin);border-radius:6px;background:var(--paper);color:var(--margin);display:inline-grid;place-items:center}
.mic-mini.on{background:var(--margin);color:#fff;animation:micpulse 1.2s ease-in-out infinite}
.spoken{width:100%}
.said{font-family:var(--f-display);font-size:1.15rem;line-height:2}
.w{border:none;background:none;padding:0 2px;border-radius:4px;font:inherit;color:inherit;cursor:pointer;border-bottom:3px solid transparent}
.w.ok{border-bottom-color:var(--green)}
.w.close{border-bottom-color:var(--yellow);background:var(--near-bg)}
.w.miss{border-bottom-color:var(--red);border-bottom-style:dashed;color:var(--red)}
.read-aloud{white-space:normal}
.interim{font-style:italic}
.feedback mark{background:var(--bad-bg);color:inherit;border-bottom:2px solid var(--red);padding:0 2px}
audio{height:34px;max-width:100%}
.tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0 0 14px}
.tab{display:grid;gap:2px;padding:10px 8px;border:1.5px solid var(--border);border-radius:10px;background:var(--paper);font-family:var(--f-display);font-weight:700;font-size:1.05rem;color:var(--ink);min-width:0}
.tab span{font-family:var(--f-body);font-weight:400;color:var(--muted)}
.tab.on{border-color:var(--ink);background:var(--ink-soft)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip-btn{border:1px solid var(--border);border-radius:999px;padding:4px 12px;background:var(--paper);font-size:.9rem}
.chip-btn.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.studio-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.studio-card{display:grid;gap:6px;align-content:start;text-align:left;padding:16px;border:1.5px solid var(--border);border-radius:12px;background:var(--paper);min-width:0}
.studio-card:hover{border-color:var(--ink)}
.studio-card b{font-family:var(--f-display);color:var(--ink);font-size:1.05rem}
.skills4{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.skills4 li{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 40px;gap:8px;align-items:center}
.sk-name{font-weight:700;font-size:.92rem}
.meter.sm{height:8px;margin:0;display:block}
.meter.sm .fill{display:block}
.classes{list-style:none;margin:0;padding:0;font-size:.9rem}
.classes li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--rule)}
.classes li.me{font-weight:700}
@media (max-width:560px){.tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.say-target{font-size:1.4rem}}
@media (prefers-reduced-motion:reduce){.mic-btn.on,.mic-mini.on{animation:none;outline:3px solid var(--margin);outline-offset:2px}}