/* =====================================================================
   LESSON ENGINE — mobile redesign (2026 handoff package)
   Shared chrome (close + progress segments) + six states: reading slide,
   multiple choice (unanswered/correct/wrong), fill-the-word, completion.
   Reuses tokens from path-redesign.css (same :root variables in styles.css).
   Known content-model gap: the real question data has ONE shared `why`
   explanation per question, not one per wrong option as the spec's
   `explainWrong{[optionId]}` describes. The result sheet below is built to
   accept a per-option map if the data ever provides one; today it falls
   back to the single shared explanation for every wrong option, which is
   what the app has always shown — flagged, not silently invented.
   ===================================================================== */

.lp-frame{display:flex;flex-direction:column;
  min-height:calc(100vh - var(--sticky-h,150px) - 64px);
  min-height:calc(100dvh - var(--sticky-h,150px) - 64px);
  background:var(--ground)}
.lp-chrome{flex:none;background:var(--surface);border-bottom:3px solid var(--ink);
  padding:calc(12px + env(safe-area-inset-top)) 14px 12px;display:flex;align-items:center;gap:12px}
.lp-close{width:34px;height:34px;border:2.5px solid var(--ink);border-radius:10px;
  background:var(--surface);display:flex;align-items:center;justify-content:center;
  font-size:15px;flex:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.lp-segs{flex:1;display:flex;gap:5px}
.lp-seg{flex:1;height:9px;border-radius:5px;background:var(--seg-empty)}
.lp-seg.on{background:var(--teal)}
.lp-content{flex:1;overflow:hidden;padding:18px 16px 0}
.lp-content.tight{padding-top:16px}
.lp-actions{position:sticky;bottom:0;z-index:40;padding:14px 16px calc(18px + env(safe-area-inset-bottom));
  background:linear-gradient(to top, #FDF3E7 55%, rgba(253,243,231,0))}

.lp-btn{min-height:56px;width:100%;border:3px solid var(--ink);border-radius:16px;
  background:var(--teal);box-shadow:0 5px 0 #16304B;display:flex;align-items:center;
  justify-content:center;gap:9px;font-family:'Baloo 2',sans-serif;font-weight:800;
  font-size:17.5px;color:var(--surface);cursor:pointer;-webkit-tap-highlight-color:transparent}
.lp-btn:active{transform:translateY(3px);box-shadow:0 2px 0 #16304B}
.lp-btn[disabled]{border-color:var(--locked-border);background:var(--locked-fill);
  box-shadow:none;color:var(--disabled-ink);cursor:default}
.lp-btn[disabled]:active{transform:none}
.lp-btn.navy{background:var(--ink);box-shadow:0 5px 0 rgba(22,48,75,.4)}

/* ---- A: reading slide ---- */
.lp-illus{border:3px solid var(--ink);border-radius:18px;background:var(--blue-tint);
  box-shadow:0 5px 0 rgba(22,48,75,.15);height:232px;flex:none;display:grid;
  place-items:center;overflow:hidden}
.lp-illus img{width:100%;height:100%;object-fit:cover}
.lp-illus .fallback{display:flex;align-items:flex-end;gap:10px;font-size:34px}
.lp-illus .fallback .main{font-size:78px;line-height:1}
.lp-illus .fallback .side1{font-size:34px}
.lp-illus .fallback .side2{font-size:44px}
.lp-read-k{font-family:'Nunito',sans-serif;font-weight:800;font-size:10.5px;letter-spacing:.1em;
  color:var(--teal-text);text-transform:uppercase;margin-top:18px}
.lp-read-title{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:26px;letter-spacing:-.4px;
  line-height:1.12;color:var(--ink);margin-top:4px}
.lp-read-body{font-family:'Nunito',sans-serif;font-weight:700;font-size:15.5px;line-height:1.52;
  color:var(--ink);margin-top:11px}

/* ---- B/C/D: multiple choice ---- */
.lp-qblock{display:flex;align-items:flex-start;gap:10px}
.lp-qmascot{width:46px;height:46px;border-radius:50%;border:2.5px solid var(--ink);
  background:var(--avatar-tint);display:flex;align-items:center;justify-content:center;
  font-size:24px;flex:none;overflow:hidden}
.lp-qmascot img{width:100%;height:100%;object-fit:cover}
.lp-qtext{flex:1;min-width:0}
.lp-qk{font-family:'Nunito',sans-serif;font-weight:800;font-size:10.5px;letter-spacing:.1em;
  color:var(--ink-soft);text-transform:uppercase}
.lp-qtitle{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:21px;line-height:1.2;
  color:var(--ink);margin-top:3px}

.lp-options{display:flex;flex-direction:column;gap:11px;margin-top:20px}
.lp-opt{min-height:62px;border:3px solid var(--ink);border-radius:15px;background:var(--surface);
  box-shadow:0 4px 0 rgba(22,48,75,.18);display:flex;align-items:center;gap:13px;
  padding:10px 15px;cursor:pointer;-webkit-tap-highlight-color:transparent;text-align:left}
.lp-opt:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(22,48,75,.18)}
.lp-opt .badge{width:30px;height:30px;border:2.5px solid var(--ink);border-radius:9px;
  background:var(--ground);display:flex;align-items:center;justify-content:center;
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:14px;color:var(--ink);flex:none}
.lp-opt .label{flex:1;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:16px;
  line-height:1.25;color:var(--ink)}
.lp-opt.selected{border-color:var(--blue);background:var(--blue-tint)}
.lp-opt.correct{border-color:var(--ink);background:var(--teal);box-shadow:0 4px 0 #16304B}
.lp-opt.correct .badge{background:var(--surface);color:var(--ink)}
.lp-opt.correct .label{color:var(--surface)}
.lp-opt.wrong{border-color:var(--red);background:var(--red-tint);box-shadow:0 4px 0 rgba(214,69,51,.3)}
.lp-opt.wrong .badge{border-color:var(--red);color:var(--red)}
.lp-opt.dim{border-color:var(--dimmed-border);background:var(--dimmed-surface);box-shadow:none;cursor:default}
.lp-opt.dim .badge{border-color:#8A8781;color:var(--locked-ink)}
.lp-opt.dim .label{color:var(--locked-ink)}
.lp-opt .answermark{font-family:'Nunito',sans-serif;font-weight:800;font-size:11px;
  letter-spacing:.05em;color:var(--teal-text);flex:none;margin-left:6px}

.lp-sheet{position:sticky;bottom:0;z-index:40;border-top:3px solid var(--ink);padding:15px 16px 18px;
  padding-bottom:calc(18px + env(safe-area-inset-bottom))}
.lp-sheet.ok{background:var(--teal-tint)}
.lp-sheet.no{background:var(--red-tint)}
.lp-sheet-head{display:flex;align-items:center;gap:9px}
.lp-sheet-marker{width:28px;height:28px;border-radius:50%;border:2.5px solid var(--ink);
  display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--surface);flex:none}
.lp-sheet.ok .lp-sheet-marker{background:var(--teal)}
.lp-sheet.no .lp-sheet-marker{background:var(--red);border-color:var(--ink)}
.lp-sheet-label{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:19px;color:var(--ink)}
.lp-sheet-explain{font-family:'Nunito',sans-serif;font-weight:700;font-size:14.5px;line-height:1.45;
  color:var(--ink);margin-top:8px}
.lp-sheet .lp-btn{margin-top:13px}

/* ---- E: fill the word ---- */
.lp-fw-instr{font-family:'Nunito',sans-serif;font-weight:800;font-size:10.5px;letter-spacing:.1em;
  color:var(--ink-soft);text-transform:uppercase}
.lp-fw-card{border:3px solid var(--ink);border-radius:18px;background:var(--surface);
  box-shadow:0 5px 0 rgba(22,48,75,.15);padding:18px 17px 19px;margin-top:10px}
.lp-fw-card+.lp-fw-card{margin-top:18px;padding:16px 17px 18px}
.lp-fw-sentence{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:20px;line-height:1.7;color:var(--ink)}
.lp-blank{display:inline-flex;box-sizing:border-box;align-items:center;height:38px;
  vertical-align:middle;margin:0 2px;border-radius:11px;font-family:'Nunito',sans-serif;
  font-weight:800;font-size:18px}
.lp-blank.filled{padding:0 13px;border:3px solid var(--ink);background:var(--teal);
  box-shadow:0 3px 0 #16304B;color:var(--surface);cursor:pointer}
.lp-blank.empty{min-width:96px;padding:0 13px;border:3px dashed var(--locked-border);
  background:var(--locked-surface)}
.lp-fw-bank-label{margin-top:22px}
.lp-fw-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:11px}
.lp-fw-chip{height:46px;padding:0 16px;border-radius:13px;display:grid;place-items:center;
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:17px;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.lp-fw-chip.avail{border:3px solid var(--ink);background:var(--surface);
  box-shadow:0 4px 0 rgba(22,48,75,.2);color:var(--ink)}
.lp-fw-chip.used{border:3px dashed var(--dimmed-border);background:var(--locked-fill);
  box-shadow:none;color:var(--locked-ink);cursor:default}

/* ---- F: completion ---- */
.lp-donewrap{display:flex;flex-direction:column;
  min-height:calc(100vh - var(--sticky-h,150px) - 64px);
  min-height:calc(100dvh - var(--sticky-h,150px) - 64px);
  background:var(--ground)}
.lp-banner{flex:none;background:var(--teal);border-bottom:3px solid var(--ink);
  padding:30px 20px 26px;text-align:center}
.lp-banner .mascot{font-size:66px;line-height:1}
.lp-banner .k{font-family:'Nunito',sans-serif;font-weight:800;font-size:11px;letter-spacing:.12em;
  color:rgba(255,255,255,.9);margin-top:8px;text-transform:uppercase}
.lp-banner h1{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:30px;letter-spacing:-.4px;
  line-height:1.1;color:var(--surface);margin-top:3px}
.lp-donebody{flex:1;padding:18px 16px 0}
.lp-rewardrow{display:flex;gap:11px}
.lp-rewardcard{flex:1;border:3px solid var(--ink);border-radius:16px;
  box-shadow:0 5px 0 rgba(22,48,75,.15);padding:13px 14px;background:var(--surface)}
.lp-rewardcard .k{font-family:'Nunito',sans-serif;font-weight:800;font-size:9.5px;
  letter-spacing:.08em;color:var(--ink-soft);text-transform:uppercase}
.lp-rewardcard .v{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:25px;color:var(--ink);
  line-height:1.1;margin-top:2px}
.lp-rewardcard .u{font-family:'Nunito',sans-serif;font-weight:800;font-size:12px}
.lp-donebody .jp-chaptercard{margin-top:16px;margin-bottom:0}
.lp-nextup{border:3px solid var(--ink);border-radius:18px;background:var(--surface);
  box-shadow:0 5px 0 rgba(22,48,75,.15);padding:13px 14px;margin-top:10px;display:flex;
  align-items:center;gap:12px}
.lp-nextup .node{width:50px;height:50px;border-radius:50%;border:3px solid var(--ink);
  background:var(--surface);display:flex;align-items:center;justify-content:center;
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:15px;color:var(--ink);flex:none}
.lp-nextup .txt{flex:1;min-width:0}
.lp-nextup .title{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:17px;color:var(--ink);margin-top:5px}
.lp-donelabel{margin-top:22px;font-family:'Nunito',sans-serif;font-weight:800;font-size:10.5px;
  letter-spacing:.1em;color:var(--ink-soft);text-transform:uppercase}
.lp-doneactions{position:sticky;bottom:0;z-index:40;padding:14px 16px calc(18px + env(safe-area-inset-bottom));
  background:linear-gradient(to top, #FDF3E7 55%, rgba(253,243,231,0));
  display:flex;flex-direction:column;gap:10px}
.lp-secondary{min-height:48px;border:none;background:none;font-family:'Baloo 2',sans-serif;
  font-weight:800;font-size:15.5px;color:var(--ink);text-align:center;text-decoration:underline;
  text-underline-offset:3px;cursor:pointer}

@media (min-width:431px){ .lp-content,.lp-actions,.lp-donebody,.lp-doneactions{max-width:430px;margin-left:auto;margin-right:auto;width:100%} }
@media (prefers-reduced-motion: reduce){ .lp-sheet{animation:none!important} }

/* ---------- Desktop adaptation (Option B): wider reading column, bigger
   illustration/type — the lesson/quiz/fill-word flow stays single-column and
   one-thing-at-a-time by design; that doesn't change on a bigger screen.
   Additive only, ~900px and up. ---------- */
@media (min-width:900px){
  .lp-content,.lp-actions,.lp-donebody,.lp-doneactions{max-width:640px}
  .lp-illus{height:280px}
  .lp-illus .fallback .main{font-size:96px}
  .lp-read-title{font-size:31px}
  .lp-read-body{font-size:17px}
  .lp-qtitle{font-size:24px}
  .lp-opt{min-height:68px}
  .lp-banner h1{font-size:34px}
  .lp-rewardcard .v{font-size:28px}
}