/* lesson.css — styles for lesson mode (lesson-mode.js).

   Inert unless lesson-mode.js is active: every rule hangs off #lesson or
   html[data-lesson]. The palette is the deck's own: paper #FBFBFA, ink
   #131312, muted #71716A, hairline #E4E4DE, gold #8A6A00 on paper and
   #D4B84A on ink. One family, Helvetica Neue, as in the slides.
*/
#lesson {
  --l-paper: #FBFBFA;
  --l-ink: #131312;
  --l-muted: #71716A;
  --l-dim: #8B8B84;
  --l-hair: #E4E4DE;
  --l-hair-ink: #2A2A28;
  --l-gold: #D4B84A;
  --l-gold-ink: #8A6A00;
  --l-bar: 56px;
  --l-sans: "Helvetica Neue", Helvetica, "Arial Nova", Arial, sans-serif;
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  font-family: var(--l-sans);
  color: var(--l-paper);
  -webkit-font-smoothing: antialiased;
}
#lesson *, #lesson *::before, #lesson *::after { box-sizing: border-box; }
#lesson button, #lesson a.lesson-btn { font: inherit; }
#lesson [hidden] { display: none !important; }

/* The deck keeps the bar's strip free (its own _fit is patched to match). */
html[data-lesson] deck-stage { bottom: 56px; }

/* ─── slide-image frames: Michael Oxman's slides, one PNG per section ───
   build_lesson.py injects these sections into the built deck copy; they are
   plain slides for the deck (rail, print, keys) and the PiP sits over them
   in lesson mode like over any other frame. The image is letterboxed on
   black, so a slide of any aspect keeps its proportions. */
deck-stage section.s-image { background: #000; padding: 0; }
section.s-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* In lesson mode the slide hangs from the top at 88% of the stage, leaving a
   black band under it for the caption strip: Michael's slides run edge to
   edge, so a strip over the image would sit on his REFLECT ON prompts. The
   deck's own views (rail, print, the slides PDF) keep the full-height image. */
html[data-lesson] section.s-image img { height: 88%; object-position: 50% 0; }

/* ─── stage box: the rendered slide's rectangle; the PiP lives inside ─── */
#lesson-stagebox { position: absolute; pointer-events: none; }

#lesson-pip {
  position: absolute;
  width: 22vw;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(0, 0, 0, 0.35);
  pointer-events: auto;
  --l-pip-gap: clamp(10px, 1.25vw, 22px);
}
#lesson-pip[data-size="large"] { width: 38vw; }
#lesson-pip[data-size="hidden"] { display: none; }
/* Image frames: the narration card is smaller (his clips are 640x360, shown
   uncropped) and sized from the stage width, not the viewport, so the corner
   choices in lesson.config.json hold at every window shape; the caption strip
   moves down into the band under the slide. A frame whose pip is "hidden" in
   lesson.config.json shows no card at all. */
#lesson[data-frame-kind="image"] #lesson-pip { width: calc(var(--l-stage-w, 100vw) * 0.18); }
#lesson[data-frame-kind="image"] #lesson-pip[data-size="large"] { width: calc(var(--l-stage-w, 100vw) * 0.32); }
#lesson[data-frame-kind="image"] #lesson-captions { bottom: 1.2%; }
#lesson-pip[data-frame-pip="hidden"] { display: none; }
#lesson-pip[data-corner="br"] { right: var(--l-pip-gap); bottom: var(--l-pip-gap); }
#lesson-pip[data-corner="bl"] { left: var(--l-pip-gap); bottom: var(--l-pip-gap); }
#lesson-pip[data-corner="tr"] { right: var(--l-pip-gap); top: var(--l-pip-gap); }
#lesson-pip[data-corner="tl"] { left: var(--l-pip-gap); top: var(--l-pip-gap); }
.lesson-pip-video { position: absolute; inset: 0; overflow: hidden; }
#lesson-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* transform / transform-origin come from LessonCore.cropStyle at run time */
}
/* The crop transform would scale and clip the browser's own cue box, so
   captions are drawn by the player instead; keep the native cues out of sight. */
#lesson-video::cue { visibility: hidden; }

/* ─── captions: a strip over the bottom of the stage, never over the PiP ───
   Centred like a subtitle: at most 60% of the stage wide, two lines tall,
   the font following the stage width (--l-stage-w, set by layoutStageBox:
   19 px on a 1100 px stage, 24 px at 1440). Beside a PiP in a bottom corner
   the player narrows the strip to the room next to the PiP (about 51% at
   1440), and beside the large PiP lifts it above the PiP instead
   (LessonCore.captionLayout writes inline max-width and bottom). */
#lesson-captions {
  position: absolute;
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 60%;
  padding: 0.28em 0.7em;
  border-radius: 8px;
  background: rgba(19, 19, 18, 0.78);
  color: var(--l-paper);
  font-size: clamp(14px, calc(var(--l-stage-w, 100vw) * 0.017), 30px);
  line-height: 1.3;
  text-align: center;
  white-space: pre-line;
  text-wrap: balance;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  display: none;
}
#lesson.lesson--cc #lesson-captions:not([hidden]) { display: -webkit-box; }
#lesson[data-state="start"] #lesson-stagebox { display: none; }

/* ─── control bar ─── */
#lesson-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--l-bar);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px 0 6px;
  background: var(--l-ink);
  border-top: 1px solid var(--l-hair-ink);
  color: var(--l-paper);
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
}
.lesson-transport, .lesson-settings { display: flex; align-items: center; gap: 2px; flex: none; }
.lesson-ctl {
  appearance: none;
  -webkit-appearance: none;
  min-width: 44px;
  height: 44px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--l-paper);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background-color 120ms ease, color 120ms ease;
}
.lesson-ctl:hover { background: rgba(251, 251, 250, 0.08); }
.lesson-ctl:active { background: rgba(251, 251, 250, 0.14); }
.lesson-ctl:focus-visible { outline: 2px solid var(--l-gold); outline-offset: -2px; }
.lesson-ctl svg { display: block; }
.lesson-ctl--text { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--l-dim); font-variant-numeric: tabular-nums; }
.lesson-ctl--text.is-on { color: var(--l-gold); }
#lesson-pip-size.is-on { color: var(--l-gold); }
#lesson-pip-size.is-off { color: var(--l-dim); }
#lesson-play { color: var(--l-gold); }
#lesson-play .ic-pause { display: none; }
#lesson[data-state="playing"] #lesson-play .ic-play { display: none; }
#lesson[data-state="playing"] #lesson-play .ic-pause { display: block; }
#lesson-fs .ic-fs-off { display: none; }
#lesson.lesson--fullscreen #lesson-fs .ic-fs-on { display: none; }
#lesson.lesson--fullscreen #lesson-fs .ic-fs-off { display: block; }
#lesson-next.lesson-pulse { color: var(--l-gold); box-shadow: inset 0 0 0 2px var(--l-gold); }

#lesson-time {
  flex: none;
  min-width: 96px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--l-paper);
  text-align: center;
}
#lesson-status {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 36vw;
  font-size: 13px;
  color: var(--l-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 6px;
}

/* Scrub: a 44 px tall hit area with a slim track and a gold fill (--p). */
.lesson-scrub-wrap { flex: 1 1 auto; min-width: 80px; display: flex; align-items: center; height: 44px; }
#lesson-scrub {
  --p: 0%;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 44px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
#lesson-scrub:focus { outline: none; }
#lesson-scrub::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--l-gold) var(--p), rgba(251, 251, 250, 0.22) var(--p));
}
#lesson-scrub::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--l-gold);
  border: 0;
  box-shadow: 0 0 0 0 rgba(212, 184, 74, 0);
  transition: box-shadow 120ms ease;
}
#lesson-scrub:hover::-webkit-slider-thumb, #lesson-scrub:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px rgba(212, 184, 74, 0.25); }
#lesson-scrub::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(251, 251, 250, 0.22); }
#lesson-scrub::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--l-gold); }
#lesson-scrub::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--l-gold); }
#lesson-scrub:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 5px rgba(212, 184, 74, 0.25); }

/* ─── start overlay: reads as the deck's own title frame ─── */
#lesson-start {
  position: absolute;
  inset: 0;
  display: none;
  background: var(--l-paper);
  color: var(--l-ink);
  pointer-events: auto;
  overflow: auto;
}
#lesson[data-state="start"] #lesson-start { display: flex; align-items: center; }
.lesson-start-inner {
  width: 100%;
  max-width: 1040px;
  padding: 48px clamp(28px, 7vw, 140px);
  margin: 0 auto;
}
.lesson-kicker { font-size: 15px; font-weight: 500; letter-spacing: 0.01em; color: var(--l-muted); }
#lesson-start h1 {
  margin: 20px 0 0;
  font-size: clamp(38px, 6.4vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 700;
  max-width: 14ch;
}
.lesson-runtime { margin: 28px 0 0; font-size: clamp(17px, 1.6vw, 22px); line-height: 1.45; color: var(--l-ink); max-width: 44ch; }
.lesson-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.lesson-btn {
  appearance: none;
  -webkit-appearance: none;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: 8px;
  border: 1.5px solid var(--l-ink);
  background: transparent;
  color: var(--l-ink);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.lesson-btn:hover { background: rgba(19, 19, 18, 0.06); }
.lesson-btn:focus-visible { outline: 2px solid var(--l-gold-ink); outline-offset: 3px; }
.lesson-btn--primary { background: var(--l-ink); color: var(--l-paper); border-color: var(--l-ink); }
.lesson-btn--primary:hover { background: #2a2a28; }
.lesson-startnote { margin: 18px 0 0; font-size: 15px; color: var(--l-muted); }
.lesson-note { margin: 44px 0 0; font-size: 14px; line-height: 1.5; color: var(--l-muted); max-width: 52ch; }
.lesson-embedded-hint { margin: 10px 0 0; font-size: 14px; color: var(--l-gold-ink); }
.lesson-embedded-hint { display: none; }
#lesson.lesson--embedded .lesson-embedded-hint { display: block; }

/* ─── end-of-part card ─── */
#lesson-endcard {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: var(--l-bar);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(19, 19, 18, 0.55);
  pointer-events: auto;
}
#lesson[data-state="ended"] #lesson-endcard { display: flex; }
.lesson-card {
  width: min(640px, 100%);
  padding: 36px 40px 40px;
  border-radius: 12px;
  background: var(--l-paper);
  color: var(--l-ink);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.lesson-card h2 { margin: 12px 0 0; font-size: clamp(26px, 3vw, 36px); line-height: 1.08; letter-spacing: -0.03em; font-weight: 700; }
.lesson-card p { margin: 16px 0 0; font-size: 17px; line-height: 1.45; color: var(--l-muted); }
.lesson-card p:empty { display: none; }
.lesson-card .lesson-actions { margin-top: 28px; }

/* ─── error box and toast ─── */
#lesson-error {
  position: fixed;
  left: 50%;
  top: 40px;
  transform: translateX(-50%);
  z-index: 1001;
  max-width: 560px;
  padding: 18px 22px;
  border-radius: 10px;
  background: #FBFBFA;
  color: #131312;
  border: 1.5px solid #C8361F;
  font: 15px/1.45 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#lesson-error p { margin: 8px 0 0; }
.lesson-error-fix { color: #71716A; }
#lesson-toast {
  position: absolute;
  left: 50%;
  bottom: calc(var(--l-bar) + 18px);
  transform: translate(-50%, 6px);
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--l-ink);
  color: var(--l-paper);
  font-size: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 180ms ease, transform 180ms ease;
}
#lesson-toast[data-show] { opacity: 1; transform: translate(-50%, 0); }

/* ─── labeled bar buttons: Chapters, Transcript, Browse slides, Back ─── */
.lesson-ctl--labeled { gap: 6px; padding: 0 12px 0 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; }
.lesson-ctl--labeled.is-on { color: var(--l-gold); }
.lesson-ctl--back { color: var(--l-gold); }
#lesson-back-to-video { display: none; }

/* ─── bar variant: browse mode ─── */
#lesson[data-state="browse"] :is(.lesson-transport, #lesson-time, .lesson-scrub-wrap, #lesson-speed, #lesson-cc, #lesson-pip-size, #lesson-autonext, #lesson-transcript-btn, #lesson-browse) { display: none; }
#lesson[data-state="browse"] #lesson-back-to-video { display: inline-flex; }
#lesson[data-state="browse"] #lesson-status { flex: 1 1 auto; max-width: none; color: var(--l-paper); }
#lesson[data-state="browse"] #lesson-stagebox { display: none; }

/* ─── Back to Canvas: a small pill in the top-left corner, every state ─── */
#lesson-canvas-link {
  position: absolute;
  top: 10px;
  left: 12px;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(19, 19, 18, 0.72);
  color: var(--l-paper);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-decoration: none;
  pointer-events: auto;
}
#lesson-canvas-link:hover { background: var(--l-ink); }
#lesson-canvas-link:focus-visible { outline: 2px solid var(--l-gold); outline-offset: 2px; }

/* ─── side panels: the chapters drawer and the transcript ─── */
#lesson-chapters, #lesson-transcript {
  position: absolute;
  top: 0;
  right: 0;
  bottom: var(--l-bar);
  width: min(400px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--l-paper);
  color: var(--l-ink);
  border-left: 1px solid var(--l-hair);
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.25);
  pointer-events: auto;
  outline: none;
  animation: lesson-slide-in 180ms ease-out;
}
@keyframes lesson-slide-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.lesson-panel-head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 12px 10px 10px 22px; border-bottom: 1px solid var(--l-hair); }
.lesson-panel-title { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.lesson-panel-close { color: var(--l-ink); }
.lesson-panel-close:hover { background: rgba(19, 19, 18, 0.06); }
.lesson-panel-close:focus-visible { outline-color: var(--l-gold-ink); }
.lesson-panel-sub { flex: none; margin: 0; padding: 12px 22px 0; font-size: 13px; color: var(--l-muted); }
.lesson-panel-body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 6px 0 28px; }

/* rows shared by the drawer, the transcript and Oxman's chapter list */
.lesson-ch-item, .lesson-tr-line {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 8px 22px 8px 14px;
  border: 0;
  border-left: 4px solid transparent;
  background: transparent;
  color: var(--l-ink);
  font: inherit;
  font-size: 14px;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}
.lesson-ch-item:hover, .lesson-tr-line:hover { background: rgba(19, 19, 18, 0.05); }
.lesson-ch-item:focus-visible, .lesson-tr-line:focus-visible { outline: 2px solid var(--l-gold-ink); outline-offset: -2px; }
.lesson-ch-item[aria-current], .lesson-tr-line[aria-current] { border-left-color: var(--l-gold-ink); background: rgba(212, 184, 74, 0.16); }
.lesson-ch-item[aria-current] { font-weight: 600; }

.lesson-ch-group { padding: 14px 0 8px; }
.lesson-ch-group + .lesson-ch-group { border-top: 1px solid var(--l-hair); }
.lesson-ch-heading { margin: 0; padding: 0 22px; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.lesson-ch-meta { margin: 3px 0 8px; padding: 0 22px; font-size: 12.5px; color: var(--l-muted); }
.lesson-ch-num { flex: none; width: 26px; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--l-muted); }
.lesson-ch-title { flex: 1 1 auto; min-width: 0; }
.lesson-ch-tick { flex: none; display: inline-flex; color: var(--l-gold-ink); }
.lesson-ch-time { flex: none; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--l-muted); }

.lesson-tr-line { align-items: flex-start; gap: 12px; padding: 8px 22px 8px 18px; font-size: 14.5px; line-height: 1.45; }
.lesson-tr-time { flex: none; width: 40px; padding-top: 2px; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--l-muted); }
.lesson-tr-text { flex: 1 1 auto; min-width: 0; }
.lesson-tr-empty { margin: 16px 22px; font-size: 14px; color: var(--l-muted); }

/* ─── narrow viewports ─── */
@media (max-width: 1100px) {
  .lesson-ctl-label { display: none; }
  .lesson-ctl--labeled { padding: 0 8px; }
}
@media (max-width: 1000px) { #lesson-status { display: none; } }
@media (max-width: 720px) {
  #lesson-speed, #lesson-autonext { display: none; }
  #lesson-time { min-width: 80px; font-size: 12px; }
  #lesson-pip { width: 30vw; }
  #lesson-pip[data-size="large"] { width: 48vw; }
}

@media (prefers-reduced-motion: reduce) {
  #lesson *, #lesson *::before, #lesson *::after { transition: none !important; animation: none !important; }
}