/* =========================================================================
   Modern CPR — interactive lesson player
   Depends on tokens/fonts from moderncpr.css
   ========================================================================= */

.lesson-body{
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;
  background:var(--ground);color:var(--ink);
}

/* ---- Top bar ---- */
.lesson-bar{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--line)}
.lesson-bar-inner{display:flex;align-items:center;gap:1rem;max-width:var(--maxw);margin-inline:auto;
  width:100%;padding:.6rem var(--gutter);min-height:58px}
.lesson-bar .brand{font-size:1.05rem}
.lesson-bar .mark{width:26px;height:26px}
.lesson-heading{display:flex;flex-direction:column;line-height:1.15;margin-inline:auto 0;text-align:right}
.lesson-kicker{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.lesson-name{font-family:var(--font-display);font-weight:700;font-size:.98rem;color:var(--ink)}
.lesson-tools{display:flex;align-items:center;gap:.5rem}
.lz-btn{display:inline-flex;align-items:center;gap:.4em;font-family:var(--font-body);font-weight:600;
  font-size:.82rem;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:.4rem .8rem;cursor:pointer;text-decoration:none}
.lz-btn:hover{color:var(--ink);border-color:var(--line-2)}
.lz-btn svg{width:16px;height:16px}
.lz-btn[aria-pressed="true"]{color:var(--brand-strong);border-color:var(--brand);background:var(--brand-tint)}
.lz-btn[aria-pressed="false"] .wave{opacity:.25}

@media (max-width:640px){
  .lesson-heading{display:none}
  .lesson-bar .brand-txt{display:none}
}

/* ---- Progress ---- */
.lesson-progress{display:flex;gap:3px;padding:0 var(--gutter) .5rem;max-width:var(--maxw);margin-inline:auto;width:100%}
.lesson-progress .seg{height:4px;flex:1;border-radius:3px;background:var(--surface-2);overflow:hidden;position:relative}
.lesson-progress .seg::after{content:"";position:absolute;inset:0;background:var(--brand);transform:scaleX(0);
  transform-origin:left;transition:transform .35s ease}
.lesson-progress .seg.done::after{transform:scaleX(1)}
.lesson-progress .seg.active::after{transform:scaleX(1);background:linear-gradient(90deg,var(--brand),var(--pulse))}

/* ---- Stage / slides ---- */
.lesson-stage{flex:1;overflow-y:auto;display:flex;flex-direction:column;align-items:center;
  padding:clamp(1.4rem,4vw,3rem) var(--gutter) 2rem}
.lesson-stage:focus{outline:none}
.slide{width:100%;max-width:760px;margin:auto 0;animation:slideIn .4s ease both}
@keyframes slideIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.slide{animation:none}}

.slide-eyebrow{font-family:var(--font-mono);font-size:.72rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brand);display:inline-flex;align-items:center;gap:.5em;margin-bottom:.8rem}
.slide-eyebrow .num{background:var(--brand-tint);color:var(--brand-strong);border-radius:var(--r-pill);
  padding:.15em .6em}
.slide h2{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.3rem);letter-spacing:-.01em;margin-bottom:.6rem}
.slide-lead{font-size:var(--fs-lead);color:var(--ink-2);margin-bottom:1.4rem}
.slide p{color:var(--ink-2)}
.slide strong{color:var(--ink)}

/* key-point chips (short on-slide text — full narration lives in captions) */
.keypoints{display:grid;gap:.7rem;margin:1.4rem 0}
.kp{display:flex;gap:.8rem;align-items:flex-start;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:.9rem 1.1rem}
.kp .kp-ico{flex:0 0 auto;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
  background:var(--brand-tint);color:var(--brand-strong)}
.kp .kp-ico svg{width:18px;height:18px}
.kp b{font-family:var(--font-mono);font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.kp span{color:var(--ink-2);font-size:var(--fs-small)}

.stat-row{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.3rem 0}
.stat{flex:1 1 130px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1rem;text-align:center}
.stat b{display:block;font-family:var(--font-mono);font-weight:600;font-size:1.5rem;color:var(--pulse);
  font-variant-numeric:tabular-nums;line-height:1}
.stat span{font-size:.76rem;color:var(--muted);letter-spacing:.02em}

/* chain of survival */
.chain{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.3rem 0}
.chain .link{flex:1 1 140px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--brand);
  border-radius:var(--r-sm);padding:.7rem .85rem;font-size:.82rem;color:var(--ink-2)}
.chain .link b{display:block;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;color:var(--brand);margin-bottom:.15rem}

/* ---- Knowledge check ---- */
.check-q{font-family:var(--font-display);font-weight:700;font-size:1.3rem;line-height:1.3;margin-bottom:1.1rem}
.options{display:grid;gap:.7rem}
.option{display:flex;gap:.8rem;align-items:flex-start;text-align:left;width:100%;
  background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:.95rem 1.1rem;
  font:inherit;color:var(--ink);cursor:pointer;transition:border-color .15s,background .15s}
.option:hover:not(:disabled){border-color:var(--line-2)}
.option .marker{flex:0 0 auto;width:26px;height:26px;border-radius:50%;border:2px solid var(--line-2);
  display:grid;place-items:center;font-family:var(--font-mono);font-size:.8rem;color:var(--muted);font-weight:600}
.option .opt-txt{padding-top:.15rem}
.option.correct{border-color:var(--good);background:var(--good-tint)}
.option.correct .marker{background:var(--good);border-color:var(--good);color:#fff}
.option.wrong{border-color:var(--pulse);background:var(--pulse-tint)}
.option.wrong .marker{background:var(--pulse);border-color:var(--pulse);color:#fff}
.option:disabled{cursor:default}
.option.dim{opacity:.55}
.feedback{margin-top:1rem;border-radius:var(--r);padding:.9rem 1.1rem;font-size:var(--fs-small);
  border:1px solid var(--line);display:none}
.feedback.show{display:block;animation:slideIn .3s ease both}
.feedback.ok{background:var(--good-tint);border-color:var(--good);color:var(--ink)}
.feedback.no{background:var(--pulse-tint);border-color:var(--pulse);color:var(--ink)}
.feedback b{color:var(--ink)}

/* ---- Metronome ---- */
.metronome{text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.8rem 1.4rem;margin:1.3rem 0}
.metro-heart{width:88px;height:88px;margin:0 auto 1rem;color:var(--pulse);display:grid;place-items:center}
.metro-heart svg{width:100%;height:100%}
.metro-heart.beat{animation:metroBeat .545s ease-in-out infinite}
@keyframes metroBeat{0%,55%,100%{transform:scale(1)}22%{transform:scale(1.18)}}
@media (prefers-reduced-motion: reduce){.metro-heart.beat{animation:none}}
.metro-bpm{font-family:var(--font-mono);font-weight:600;font-size:2.2rem;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1}
.metro-bpm small{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;display:block;margin-top:.2rem}
.metro-cue{min-height:1.4em;font-size:var(--fs-small);color:var(--brand-strong);font-weight:600;margin:.6rem 0 1rem}
.metro-tips{font-size:.82rem;color:var(--muted);margin-top:.9rem}

/* ---- Scenario ---- */
.scenario .sc-setup{background:var(--surface-2);border-radius:var(--r);padding:1rem 1.2rem;margin-bottom:1.2rem;
  font-size:var(--fs-small);color:var(--ink-2)}
.scenario .sc-setup b{color:var(--ink)}
.sc-progress{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.6rem}
.sc-done{text-align:center;padding:1rem}
.sc-done .big{font-size:2.4rem;line-height:1}

/* ---- Summary / completion ---- */
.complete{text-align:center}
.complete .medal{width:96px;height:96px;margin:0 auto 1.2rem;color:var(--good)}
.complete .recap{text-align:left;max-width:520px;margin:1.4rem auto}
.complete-cta{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:1.6rem}

/* ---- Captions / transcript ---- */
.lesson-foot{position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--line);z-index:20}
.captions{max-width:760px;margin:0 auto;padding:.7rem var(--gutter) 0;font-size:.9rem;color:var(--ink-2);
  text-align:center;line-height:1.5}
.captions b{color:var(--brand-strong);font-weight:600}
.lesson-nav{display:flex;align-items:center;gap:1rem;max-width:760px;margin-inline:auto;
  width:100%;padding:.8rem var(--gutter) 1rem}
.step-info{font-family:var(--font-mono);font-size:.74rem;color:var(--muted);margin-inline:auto;letter-spacing:.04em}
#prevBtn[hidden]{display:none}
#nextBtn:disabled{opacity:.45;cursor:not-allowed}
.hint{font-size:.74rem;color:var(--muted);font-family:var(--font-mono);letter-spacing:.02em}

.lesson-noscript{max-width:600px;margin:3rem auto;padding:1.4rem;border:1px solid var(--line);
  border-radius:var(--r);background:var(--surface);text-align:center}