/* Badgie Academy — Lesson Player MVP shared stylesheet (Phase 37A)
   Extends the design tokens proven in src/student-app/index.html. */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  /* WCAG AA (P3, re-verified against ACTUAL rendered backgrounds):
     --orange / --green are darkened for white-on-color (Continue button,
     state badges, nav hovers) and for accent TEXT on light backgrounds
     (lesson-item number/links, read-aloud button). They must NOT carry
     text on navy surfaces — anything rendered over the navy body or cards
     (e.g. .results-progress-note) uses --orange-light / --green-light.
     Ratios are enforced by tools/contrast-audit.mjs — update it when
     adding pairs. */
  --orange:#B85008;--orange-light:#FF8534;--orange-bg:#FFF3EB;
  --navy:#0A1628;--navy-mid:#122040;--navy-light:#1E3060;
  --green:#11713E;--green-light:#22B874;--green-bg:#E6F7F0;
  --white:#FFFFFF;--off-white:#F8F9FC;--border:#E2E8F0;
  --text:#1A202C;--muted:#5E6C81; /* was #64748B — 4.4986:1 on the #FFF7F2 hover tint; #5E6C81 is 5.04:1 there */
  --font-head:'Nunito',sans-serif;--font-body:'Space Grotesk',sans-serif;
}
body{font-family:var(--font-body);background:var(--navy);min-height:100vh;color:var(--text);}

/* ── Nav ──────────────────────────────────────────────────────────────── */
.nav{background:var(--navy-mid);padding:0 24px;height:56px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,0.08);}
.nav-logo{display:flex;align-items:center;gap:10px;font-family:var(--font-head);font-weight:900;font-size:18px;color:var(--white);text-decoration:none;}
.nav-logo-b{width:30px;height:30px;background:var(--orange);border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:900;color:white;font-size:16px;}
.nav-link{color:rgba(255,255,255,0.75);text-decoration:none;font-size:13px;font-weight:700;background:rgba(255,255,255,0.07);border-radius:20px;padding:7px 16px;transition:all 0.15s;}
.nav-link:hover{background:var(--orange);color:white;}

.main{max-width:920px;margin:0 auto;padding:24px 20px 60px;}

/* ── Loading / Error states ───────────────────────────────────────────── */
.state-card{background:var(--navy-light);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:32px 24px;text-align:center;color:rgba(255,255,255,0.85);}
.state-card .state-icon{font-size:34px;margin-bottom:10px;}
.state-card .state-title{font-family:var(--font-head);font-weight:800;font-size:18px;color:var(--white);margin-bottom:6px;}
.state-card .state-text{font-size:14px;color:rgba(255,255,255,0.65);line-height:1.6;}
.state-card .state-actions{margin-top:16px;}
@keyframes spin{to{transform:rotate(360deg)}}
.spinner{display:inline-block;width:28px;height:28px;border:3px solid rgba(255,255,255,0.2);border-top-color:var(--orange-light);border-radius:50%;animation:spin 0.9s linear infinite;margin-bottom:10px;}

/* ── Page header / breadcrumb ─────────────────────────────────────────── */
.page-header{margin-bottom:24px;}
.crumb{font-size:12px;color:rgba(255,255,255,0.5);margin-bottom:10px;}
.crumb a{color:var(--orange-light);text-decoration:none;}
.crumb a:hover{text-decoration:underline;}
.page-title{font-family:var(--font-head);font-weight:900;font-size:26px;color:var(--white);line-height:1.25;}
.page-sub{font-size:14px;color:rgba(255,255,255,0.6);margin-top:6px;line-height:1.6;}
.module-pill{display:inline-block;background:rgba(232,101,10,0.2);color:var(--orange-light);font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:4px 10px;border-radius:12px;border:1px solid rgba(232,101,10,0.3);}
.grade-pill{display:inline-block;background:rgba(34,184,116,0.16);color:var(--green-light);font-size:11px;font-weight:700;letter-spacing:0.5px;padding:4px 10px;border-radius:12px;border:1px solid rgba(34,184,116,0.3);}

/* ── Catalog grid ─────────────────────────────────────────────────────── */
.module-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;}
.module-card{background:var(--white);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit;border:1.5px solid transparent;transition:all 0.15s;}
.module-card:hover{border-color:var(--orange);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.18);}
.module-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;}
.module-card-title{font-family:var(--font-head);font-weight:800;font-size:16px;color:var(--navy);line-height:1.35;}
.module-card-meta{font-size:13px;color:var(--muted);}

/* ── Lesson list (Module Detail) ──────────────────────────────────────── */
.lesson-list{display:flex;flex-direction:column;gap:10px;}
.lesson-item{background:var(--white);border-radius:14px;padding:16px 18px;display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;border:1.5px solid transparent;transition:all 0.15s;}
.lesson-item:hover{border-color:var(--orange);background:#FFF7F2;}
.lesson-item-num{width:36px;height:36px;flex-shrink:0;background:var(--orange-bg);color:var(--orange);border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:900;font-size:15px;}
.lesson-item-body{flex:1;min-width:0;}
.lesson-item-title{font-family:var(--font-head);font-weight:800;font-size:15px;color:var(--navy);}
.lesson-item-time{font-size:12px;color:var(--muted);margin-top:2px;}
.lesson-item-go{font-size:13px;font-weight:700;color:var(--orange);white-space:nowrap;}

/* ── Speech card / content card (reused visual language) ──────────────── */
.speech-card{background:var(--navy-light);border-radius:16px;padding:20px;display:flex;gap:16px;align-items:flex-start;margin-bottom:24px;border:1px solid rgba(255,255,255,0.08);position:relative;}
/* NO-FLASH RULE: the base figure MUST stay fully visible at all times. It never
   carries an animated `filter` or `opacity` — those churn the GPU layer on a
   transform-animated PNG and produce the user-visible transparency/repaint flash
   (P0). The figure only ever transforms (breathe / sway / bob / celebrate /
   think). The soft-blink filter is removed (JS scheduler disabled) and the
   celebration glow lives on an ::after overlay (below), so no full-character
   effect can dim or blank the figure. `backface-visibility:hidden` keeps the
   transform animation on a stable raster surface. `position:relative` anchors
   the celebration overlay. */
.badgie-avatar{width:88px;max-width:88px;height:112px;flex-shrink:0;display:flex;align-items:flex-end;justify-content:center;font-size:42px;overflow:visible;position:relative;-webkit-backface-visibility:hidden;backface-visibility:hidden;}
.badgie-avatar img{width:100%;height:100%;object-fit:contain;object-position:center bottom;box-sizing:border-box;-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:badgie-breathe 3s ease-in-out infinite;}
@keyframes badgie-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
/* ── 2D mouth pair ─────────────────────────────────────────────────────────
   A figure that carries a mouth pair stacks both frames and shows one at a
   time. Scoped to .has-mouth-pair so every single-image avatar is untouched.

   NO-FLASH RULE: the swap is `visibility` ONLY. visibility does not blend or
   composite, so the figure's alpha never dips — unlike a cross-fade, which is
   what produced the P0 flash. No animated opacity, no animated filter. The
   badgie-breathe transform above still applies to both frames identically, so
   the swap cannot introduce a scale step.

   Both frames are in the DOM and decoded up front, so a swap never waits on a
   decode. The pair is guaranteed identical in size and alpha by
   tests/test_mouth_pair_registration.mjs. */
.badgie-avatar.has-mouth-pair{position:relative;}
.badgie-avatar.has-mouth-pair img{position:absolute;inset:0;visibility:hidden;}
.badgie-avatar.has-mouth-pair img.is-shown{visibility:visible;}
/* B3.4 — speaking motion synced to read-aloud: a subtle, continuous nod/bob
   on the active speaker's free-standing figure, plus a tiny per-word pulse on
   word boundaries. Calm and on-brand (No-Mistake-Pose intact): no bounce, no
   distortion. The bob rides the container so the per-word scale-pulse on the
   image composes cleanly instead of fighting it. Motion-gated so
   reduced-motion users get a perfectly still figure. */
@media(prefers-reduced-motion:no-preference){
  .badgie-avatar.is-speaking{transform-origin:center bottom;animation:badgie-bob 1.6s ease-in-out infinite;}
  .badgie-avatar.is-speaking img{animation:none;}
  .badgie-avatar.is-speaking.is-pulsing img{animation:badgie-word-pulse 0.2s ease-out;}
}
@keyframes badgie-bob{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-3px) rotate(1.5deg)}}
@keyframes badgie-word-pulse{0%{transform:scale(1)}50%{transform:scale(1.02)}100%{transform:scale(1)}}
/* LIFE-1 — make the free-standing 2D figure feel alive. Four states layered on
   the existing breathe/bob: idle sway, soft blink, celebration pop, thinking
   tilt. No-Mistake-Pose intact (celebrate + curiosity only; never frown/shame).
   All motion is gated behind prefers-reduced-motion:no-preference; the global
   reduce reset further neutralizes it, leaving a still figure + static glow. */
@media(prefers-reduced-motion:no-preference){
  /* Idle: a gentle alive sway when no other state owns the figure. De-synced
     per card so a row of characters never moves in lockstep. */
  .badgie-avatar:not(.is-speaking):not(.is-celebrating):not(.is-thinking){transform-origin:center bottom;animation:badgie-sway 7s ease-in-out infinite;}
  .speech-card:nth-of-type(2n) .badgie-avatar:not(.is-speaking):not(.is-celebrating):not(.is-thinking){animation-delay:-2.3s;}
  .speech-card:nth-of-type(3n) .badgie-avatar:not(.is-speaking):not(.is-celebrating):not(.is-thinking){animation-delay:-4.6s;}
  /* Celebrating: a short joyful pop (one-shot, cleared by the controller). */
  .badgie-avatar.is-celebrating{transform-origin:center bottom;animation:badgie-celebrate 1.25s cubic-bezier(0.34,1.56,0.64,1) 1;}
  .badgie-avatar.is-celebrating img{animation:none;}
  /* Thinking: a slow, curious head-tilt — interested, never frustrated. */
  .badgie-avatar.is-thinking{transform-origin:center bottom;animation:badgie-think 2.6s ease-in-out infinite;}
}
/* Soft blink REMOVED. It dipped `filter: brightness()` on the base figure every
   few seconds; on a real GPU compositor that filter churn on a transform-
   animated PNG caused a visible transparency/repaint flash (P0). Per the
   no-flash rule no full-character filter/opacity effect may run on the base
   figure, so the blink is gone (the JS scheduler is also disabled). `.is-blinking`
   is intentionally left unstyled — even if the class ever appears it is inert.
   Transform-based life (breathe/sway/bob/celebrate/think) keeps the figure alive. */
/* Celebration glow lives on an OVERLAY pseudo-element, never on the base figure,
   so it can never dim/blank the character. `mix-blend-mode:screen` adds light
   (a warm halo) without covering the art; only the overlay's opacity animates. */
.badgie-avatar::after{content:"";position:absolute;inset:-8px;pointer-events:none;border-radius:50%;opacity:0;mix-blend-mode:screen;background:radial-gradient(closest-side, rgba(255,170,90,0.6), rgba(255,170,90,0) 72%);}
.badgie-avatar.is-celebrating::after{opacity:1;}
@media(prefers-reduced-motion:no-preference){
  .badgie-avatar.is-celebrating::after{animation:badgie-glow 1.25s ease-out 1;}
}
@keyframes badgie-glow{0%{opacity:0}28%{opacity:1}100%{opacity:0}}
@keyframes badgie-sway{0%,100%{transform:rotate(-1deg)}50%{transform:rotate(1deg)}}
@keyframes badgie-celebrate{0%{transform:translateY(0) scale(1)}30%{transform:translateY(-12px) scale(1.05)}55%{transform:translateY(0) scale(1)}72%{transform:translateY(-6px)}100%{transform:translateY(0) scale(1)}}
@keyframes badgie-think{0%,100%{transform:rotate(0deg)}30%{transform:rotate(-4deg) translateY(-2px)}65%{transform:rotate(-2deg)}}
@media(prefers-reduced-motion:reduce){
  .badgie-avatar img{animation:none;}
}
.speech-bubble{flex:1;}
.speech-name{font-size:11px;font-weight:700;color:var(--orange-light);letter-spacing:1px;text-transform:uppercase;margin-bottom:6px;}
.speech-text{font-size:15px;line-height:1.65;color:rgba(255,255,255,0.88);}

/* ── Multi-speaker dialogue cards (Phase 57C.1) ─────────────────────────── */
.char-speech-card{border-left:4px solid var(--char-accent, var(--orange));margin-bottom:12px;}
.char-avatar img{object-fit:contain;object-position:center bottom;box-sizing:border-box;}
.char-avatar span{line-height:1;}
.char-speech-card .speech-name{color:var(--char-accent, var(--orange-light));}
.voice-controls{display:flex;gap:8px;margin:-16px 0 20px 0;padding:0 0 0 88px;flex-wrap:wrap;}
.voice-btn{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);border-radius:20px;padding:5px 12px;font-size:12px;color:rgba(255,255,255,0.75);cursor:pointer;font-family:var(--font-body);transition:all 0.15s;}
.voice-btn:hover{background:var(--orange);border-color:var(--orange);color:white;}

.content-card{background:var(--white);border-radius:16px;padding:24px;margin-bottom:20px;}
.content-card h3{font-family:var(--font-head);font-weight:800;font-size:17px;color:var(--navy);margin-bottom:12px;}
.content-card p{font-size:15px;line-height:1.7;color:#334155;margin-bottom:12px;white-space:pre-line;}
.content-card p:last-child{margin-bottom:0;}
.content-card-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;}
.content-card-header h3{margin-bottom:0;flex:1;}
.read-aloud-btn{background:transparent;border:1.5px solid var(--orange);color:var(--orange);border-radius:20px;padding:4px 12px;font-size:12px;font-weight:700;cursor:pointer;font-family:var(--font-body);white-space:nowrap;flex-shrink:0;transition:all 0.15s;}
.read-aloud-btn:hover{background:var(--orange);color:white;}
.read-aloud-btn[aria-pressed="true"]{background:var(--orange);color:white;}

/* ── Step indicator ───────────────────────────────────────────────────── */
.step-dots{display:flex;gap:6px;justify-content:center;margin-bottom:20px;}
.dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.15);transition:all 0.3s;}
.dot.done{background:var(--green-light);}
.dot.active{background:var(--orange);width:22px;border-radius:4px;}

/* ── Prev/Next nav ────────────────────────────────────────────────────── */
.lesson-nav{display:flex;gap:12px;margin-top:8px;}
.btn-next{background:var(--orange);color:white;border:none;border-radius:12px;padding:14px 28px;font-family:var(--font-head);font-weight:800;font-size:15px;cursor:pointer;flex:1;display:flex;align-items:center;justify-content:center;gap:8px;transition:all 0.15s;text-decoration:none;}
.btn-next:hover{background:var(--orange-light);transform:translateY(-1px);}
.btn-prev{background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.75);border:1px solid rgba(255,255,255,0.18);border-radius:12px;padding:14px 24px;font-family:var(--font-head);font-weight:800;font-size:15px;cursor:pointer;flex:1;display:flex;align-items:center;justify-content:center;gap:8px;transition:all 0.15s;text-decoration:none;}
.btn-prev:hover{background:rgba(255,255,255,0.14);color:white;}

/* ── Lesson Check: question / choice cards ────────────────────────────── */
.quiz-card{background:var(--white);border-radius:16px;padding:24px;margin-bottom:20px;border:2px solid transparent;}
.quiz-question{font-family:var(--font-head);font-weight:800;font-size:17px;color:var(--navy);margin-bottom:16px;line-height:1.4;}
.quiz-options{display:flex;flex-direction:column;gap:10px;}
.quiz-option{background:var(--off-white);border:1.5px solid var(--border);border-radius:12px;padding:12px 16px;font-size:14px;color:var(--text);cursor:pointer;display:flex;align-items:center;gap:10px;font-family:var(--font-body);transition:all 0.15s;text-align:left;width:100%;}
.quiz-option:hover:not(.disabled){border-color:var(--orange);background:#FFF7F2;}
.quiz-option.selected{border-color:var(--orange);background:var(--orange-bg);color:var(--navy);}
.quiz-option.selected .option-letter{background:var(--orange);color:white;}
.quiz-option.disabled{cursor:default;}
/* Graded states — "No Mistake Pose": the student's not-quite pick stays in
   warm curiosity-orange (never harsh red); the correct choice turns green. */
.quiz-option.correct{border-color:var(--green-light);background:var(--green-bg);color:var(--navy);}
.quiz-option.correct .option-letter{background:var(--green);color:white;}
.quiz-option.not-quite{border-color:var(--orange-light);background:var(--orange-bg);color:var(--navy);}
.quiz-option.not-quite .option-letter{background:var(--orange-light);color:var(--navy);}
.option-letter{width:26px;height:26px;border-radius:8px;background:var(--border);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;transition:all 0.15s;}
/* Non-color marker on graded options (correct / not-quite). Navy text on the
   option's light state background — 16:1, well past AA — so meaning isn't
   carried by color alone (P3 / WCAG 1.4.1). */
.option-marker{margin-left:auto;font-size:12px;font-weight:800;color:var(--navy);white-space:nowrap;display:inline-flex;align-items:center;gap:4px;}

/* ── Reveal teaching point panel ──────────────────────────────────────── */
.reveal-panel{margin-top:14px;padding:16px;border-radius:12px;background:var(--navy-light);border:1px solid rgba(232,101,10,0.3);display:none;}
.reveal-panel.show{display:block;animation:fadeIn 0.3s ease;}
.reveal-panel.graded-correct{border-color:rgba(34,184,116,0.45);}
.reveal-panel.graded-correct .reveal-panel-label{color:var(--green-light);}
.reveal-panel-label{font-size:11px;font-weight:700;color:var(--orange-light);letter-spacing:1px;text-transform:uppercase;margin-bottom:8px;}
.reveal-panel-text{font-size:14px;line-height:1.6;color:rgba(255,255,255,0.88);}
/* P3b — compact in-card character presence: row of [figure][label+text] so
   the state change (curious/correct) lands where the student is already
   looking. min-width:0 on the text column is required for wrapping instead
   of overflowing at narrow (390px) widths, since flex children default to
   min-width:auto (their content's intrinsic width). Stays a row at every
   width — this panel is already narrow and short, so there's no case where
   stacking it (like .speech-card does at 540px) reads better. */
.reveal-panel-body{display:flex;gap:10px;align-items:flex-start;}
.reveal-panel-content{flex:1;min-width:0;}
.btn-reveal{background:transparent;border:1.5px solid var(--orange);color:var(--orange);border-radius:10px;padding:9px 16px;font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font-body);margin-top:14px;transition:all 0.15s;}
.btn-reveal:hover:not(:disabled){background:var(--orange);color:white;}
.btn-reveal:disabled{opacity:0.55;cursor:default;}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ── Results summary ──────────────────────────────────────────────────── */
.results-card{background:var(--navy-light);border:2px solid var(--orange);border-radius:20px;padding:32px 24px;text-align:center;margin-bottom:20px;}
.results-icon{font-size:60px;margin-bottom:12px;}
.results-title{font-family:var(--font-head);font-weight:900;font-size:24px;color:var(--white);margin-bottom:8px;}
.results-sub{font-size:15px;color:rgba(255,255,255,0.65);line-height:1.6;}
.results-recap{text-align:left;margin-top:20px;}
.results-recap-item{background:rgba(255,255,255,0.05);border-radius:12px;padding:14px 16px;margin-bottom:10px;}
.results-recap-label{font-size:11px;font-weight:700;color:var(--orange-light);letter-spacing:1px;text-transform:uppercase;margin-bottom:6px;}
.results-recap-text{font-size:14px;line-height:1.6;color:rgba(255,255,255,0.85);}
.results-progress-note{margin-top:14px;padding:12px 16px;background:rgba(34,184,116,0.12);border:1px solid rgba(34,184,116,0.35);border-radius:12px;color:var(--green-light);font-weight:700;font-size:13.5px;text-align:center;} /* note renders on the navy body — --green is 2.5:1 there; --green-light is 5.9:1 */

/* ── Lesson completion celebration (Phase 40A.1) ─────────────────────── */
@keyframes results-pop{0%{transform:scale(0.5);opacity:0}70%{transform:scale(1.18)}100%{transform:scale(1);opacity:1}}
@keyframes results-pulse{0%,100%{box-shadow:0 0 0 0 rgba(232,101,10,0)}50%{box-shadow:0 0 36px 12px rgba(232,101,10,0.3)}}
@keyframes confetti-fall{0%{transform:translateY(-10px) rotate(0deg);opacity:1}100%{transform:translateY(100vh) rotate(600deg);opacity:0}}
.results-card.celebrate{animation:results-pulse 2.2s ease 0.1s 2;}
.results-card.celebrate .results-icon{animation:results-pop 0.55s cubic-bezier(0.34,1.56,0.64,1) both;}
.confetti-wrap{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:100;overflow:hidden;}
.confetti-piece{position:absolute;top:0;animation:confetti-fall linear forwards;}

/* ── My Progress page (Phase 59A) ───────────────────────────────────────── */
.progress-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:8px;}
.progress-stat{background:var(--navy-light);border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:16px;text-align:center;}
.progress-stat-value{font-family:var(--font-head);font-weight:900;font-size:26px;color:var(--orange-light);}
.progress-stat-label{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,0.55);margin-top:4px;}
.progress-section-title{font-family:var(--font-head);font-weight:800;font-size:16px;color:var(--white);margin:28px 0 12px;}
.progress-empty-note{margin-top:16px;padding:14px 16px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:12px;color:rgba(255,255,255,0.7);font-size:14px;line-height:1.6;}
.progress-badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;}
.progress-badge{background:var(--white);border-radius:14px;padding:14px 10px;text-align:center;}
.progress-badge.locked{opacity:0.4;filter:grayscale(0.6);}
.progress-badge-emoji{font-size:26px;margin-bottom:4px;}
.progress-badge-name{font-family:var(--font-head);font-weight:800;font-size:11.5px;color:var(--navy);line-height:1.3;}
.progress-module-list{display:flex;flex-direction:column;gap:8px;}
.progress-module-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--navy-light);border:1px solid rgba(255,255,255,0.08);border-radius:10px;padding:10px 14px;font-size:13px;color:rgba(255,255,255,0.85);}
.progress-module-row.complete{border-color:rgba(34,184,116,0.4);}
.progress-module-status{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:0.5px;color:rgba(255,255,255,0.5);flex-shrink:0;}
.progress-module-row.complete .progress-module-status{color:var(--green-light);}
.access-code-form{display:flex;flex-direction:column;gap:10px;max-width:320px;margin-top:8px;}
.access-code-form label{font-size:13px;font-weight:700;color:rgba(255,255,255,0.85);}
.access-code-form input{background:var(--navy-light);border:1px solid rgba(255,255,255,0.18);border-radius:10px;padding:12px 14px;font-size:15px;color:white;font-family:var(--font-body);}
.access-code-form input:focus-visible{outline:3px solid #FF8534;outline-offset:2px;}
.access-code-form .btn-next{flex:none;}
.progress-cert-list{display:flex;flex-direction:column;gap:8px;}
.progress-cert{background:rgba(232,101,10,0.1);border:1px solid rgba(232,101,10,0.3);border-radius:10px;padding:10px 14px;font-size:13px;color:rgba(255,255,255,0.85);}

/* ── Reusable lesson visuals (Gold-Standard polish) ───────────────────────
   Additive component styles for lesson-visuals.js. All cards reuse .content-card
   (white surface, navy text) so contrast matches the audited card pairs. */
.lv-card .lv-callout-title{font-weight:800;color:var(--navy);margin:14px 0 8px;}

/* Device cards */
.lv-device-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin-top:6px;}
.lv-device{background:var(--off-white);border:1.5px solid var(--border);border-radius:14px;padding:16px 12px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;transition:border-color 0.15s,transform 0.15s;}
.lv-device:hover{border-color:var(--orange);transform:translateY(-2px);}
.lv-device-icon{color:var(--orange);display:flex;align-items:center;justify-content:center;height:48px;}
.lv-device-name{font-family:var(--font-head);font-weight:800;font-size:15px;color:var(--navy);}
.lv-device-caption{font-size:12.5px;line-height:1.4;color:var(--muted);}

/* Phishing example */
.lv-phish{border:1.5px solid var(--border);border-radius:12px;overflow:hidden;margin-top:4px;}
.lv-phish-head{display:flex;align-items:baseline;gap:8px;background:var(--off-white);padding:10px 14px;border-bottom:1px solid var(--border);}
.lv-phish-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:var(--muted);}
.lv-phish-sender{font-size:13px;font-weight:700;color:var(--orange);word-break:break-all;}
.lv-phish-subject{font-family:var(--font-head);font-weight:800;font-size:15px;color:var(--navy);padding:12px 14px 4px;}
.lv-phish-body{font-size:14px;line-height:1.6;color:#334155;padding:0 14px 14px;}
.lv-flags{margin:0;padding-left:20px;}
.lv-flag{font-size:14px;line-height:1.6;color:#334155;margin-bottom:4px;}

/* Password strength */
.lv-pw{display:flex;flex-direction:column;gap:12px;margin-top:4px;}
.lv-pw-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.lv-pw-sample{font-family:var(--font-body);font-size:14px;background:var(--off-white);border:1px solid var(--border);border-radius:8px;padding:6px 10px;color:var(--navy);min-width:120px;}
.lv-pw-meter{display:flex;gap:4px;flex:1;min-width:120px;}
.lv-pw-seg{flex:1;height:8px;border-radius:4px;background:var(--border);}
.lv-pw-seg.s1{background:var(--orange-light);}
.lv-pw-seg.s2{background:var(--orange-light);}
.lv-pw-seg.s3{background:var(--green-light);}
.lv-pw-seg.s4{background:var(--green);}
.lv-pw-tag{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:0.5px;}
.lv-pw-tag.t1,.lv-pw-tag.t2{color:var(--orange);}
.lv-pw-tag.t3,.lv-pw-tag.t4{color:var(--green);}

/* Scam popup */
.lv-popup{max-width:320px;margin:6px auto 0;border:1.5px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,0.12);}
.lv-popup-bar{background:var(--off-white);height:30px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;border-bottom:1px solid var(--border);}
.lv-popup-dot{width:10px;height:10px;border-radius:50%;background:var(--orange-light);}
.lv-popup-x{font-size:18px;color:var(--muted);line-height:1;}
.lv-popup-body{padding:20px 16px;text-align:center;}
.lv-popup-heading{font-family:var(--font-head);font-weight:900;font-size:18px;color:var(--orange);margin-bottom:8px;}
.lv-popup-msg{font-size:14px;color:#334155;margin-bottom:14px;}
.lv-popup-btn{display:inline-block;background:var(--orange-light);color:var(--navy);font-family:var(--font-head);font-weight:800;font-size:14px;padding:10px 22px;border-radius:10px;}

/* Code output panel */
.lv-code{background:var(--navy);border-radius:12px;overflow:hidden;margin-top:4px;}
.lv-code-bar{display:flex;align-items:center;gap:6px;padding:8px 12px;background:var(--navy-mid);color:rgba(255,255,255,0.4);font-size:9px;}
.lv-code-lang{margin-left:auto;text-transform:uppercase;letter-spacing:1px;font-weight:700;color:rgba(255,255,255,0.6);}
.lv-code-pre{margin:0;padding:14px 16px;overflow-x:auto;}
.lv-code-pre code{font-family:'Space Grotesk',ui-monospace,monospace;font-size:13.5px;line-height:1.6;color:#E6F7F0;white-space:pre;}
.lv-output{margin-top:10px;border:1.5px solid var(--border);border-radius:12px;overflow:hidden;}
.lv-output-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:var(--muted);background:var(--off-white);padding:8px 14px;border-bottom:1px solid var(--border);}
.lv-output-pre{margin:0;padding:12px 14px;font-family:'Space Grotesk',ui-monospace,monospace;font-size:13.5px;line-height:1.6;color:var(--navy);white-space:pre-wrap;}

/* AI learning diagram */
.lv-ai-flow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px;}
.lv-ai-node{background:var(--orange-bg);border:1.5px solid var(--orange);color:var(--orange);font-family:var(--font-head);font-weight:800;font-size:13px;padding:10px 16px;border-radius:12px;}
.lv-ai-node:last-child{background:var(--green-bg);border-color:var(--green);color:var(--green);}
.lv-ai-arrow{color:var(--muted);font-size:18px;font-weight:800;}

/* ── Misc shared ──────────────────────────────────────────────────────── */
.dur-badge{background:var(--orange);color:white;font-size:10px;font-weight:700;padding:2px 9px;border-radius:9px;letter-spacing:0.3px;flex-shrink:0;}
.screen{display:none;}
.screen.active{display:block;animation:fadeIn 0.3s ease;}

/* ── Accessibility scaffolding (reused as-is from student-app) ────────── */
:focus-visible{outline:3px solid #FF8534;outline-offset:3px;border-radius:4px}
.quiz-option:focus-visible{outline:3px solid #FF8534;outline-offset:2px;border-color:#FF8534;background:#FFF7F2}
.btn-next:focus-visible,.btn-prev:focus-visible,.btn-reveal:focus-visible,.voice-btn:focus-visible,.read-aloud-btn:focus-visible,.nav-link:focus-visible,.module-card:focus-visible,.lesson-item:focus-visible{outline:3px solid #FF8534;outline-offset:2px}
.skip-link{position:absolute;top:-100%;left:8px;z-index:9999;background:#FF8534;color:var(--navy);font-weight:800;padding:10px 18px;border-radius:0 0 10px 10px;text-decoration:none;font-family:'Space Grotesk',sans-serif;font-size:14px;transition:top 0.15s}
.skip-link:focus{top:0}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important}
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── Mobile (540px breakpoint, reused from student-app) ───────────────── */
@media(max-width:540px){
  .main{padding:16px 14px 48px;}
  .page-title{font-size:21px;}
  .module-grid{grid-template-columns:1fr;}
  .speech-card{flex-direction:column;align-items:center;text-align:center;}
  .char-speech-card .speech-bubble{text-align:left;width:100%;}
  .voice-controls{padding-left:0;justify-content:center;}
  .lesson-nav{flex-direction:column;}

  /* Reflect & Compare is the most interactive-element-dense screen in the
     experience (stacked, scrollable choice lists). The shared "Ask Badgie"
     launch button is fixed bottom-right — repositioning it only moves the
     collision to a different scroll position, since *some* row of a long
     list will always pass under any fixed point. Instead, de-emphasize it
     at rest (so any choice text it sits over stays readable through it)
     and restore full prominence the moment it's actually wanted.
     badgie-tutor.css itself is left untouched. */
  body.lp-check-page .badgie-tutor-launch{opacity:0.45;transform:scale(0.82);transition:opacity 0.15s ease,transform 0.15s ease;}
  body.lp-check-page .badgie-tutor-launch:hover,
  body.lp-check-page .badgie-tutor-launch:focus-visible,
  body.lp-check-page .badgie-tutor-launch:active{opacity:1;transform:scale(1);}
}