/* ============================================================
   Walkthrough player — shared slide-deck + narration styling
   Theme-adaptive: reads each lesson's existing CSS variables
   (--teal, --dark-teal, --accent, --text, --grey, --radius)
   with safe fallbacks, so one stylesheet fits all courses.
   ============================================================ */

:root {
  --av-accent:       var(--teal, #0B7B6B);
  --av-accent-dark:  var(--dark-teal, #065C50);
  --av-accent-soft:  var(--very-light-teal, #E6F3F0);
  --av-accent-line:  var(--light-teal, #6BB5A6);
  --av-highlight:    var(--accent, #CC0033);
  --av-highlight-soft: var(--accent-light, #FDEAEF);
  --av-ink:          var(--text, #2D3436);
  --av-ink-soft:     var(--text-light, #555);
  --av-line:         var(--grey, #E8ECEE);
  --av-radius:       var(--radius, 12px);
  --av-card-shadow:  0 4px 22px rgba(4, 42, 37, 0.10);
}

/* ---- Stage / card ---- */
.av-deck {
  background: #fff;
  display: flex; flex-direction: column; position: relative;
  border: 1px solid var(--av-line);
  border-radius: 0;
  overflow: hidden;
  box-shadow: var(--av-card-shadow);
  margin: 0 0 26px;
}
.av-stage {
  position: relative; padding: 26px 30px 18px;
  background: var(--av-accent-soft);
  display: flex; align-items: center; justify-content: center;
}
.av-card {
  width: 100%; max-width: 1060px; margin: 0 auto;
  aspect-ratio: 16 / 9; min-height: 320px;
  background: #fff; color: var(--av-ink-soft);
  border: 1px solid var(--av-line);
  border-left: 5px solid var(--av-accent);
  border-radius: 14px;
  box-shadow: var(--av-card-shadow);
  overflow: hidden; position: relative;
}
.av-slide {
  position: absolute; inset: 0;
  display: none; flex-direction: column;
  padding: 40px 52px; overflow-y: auto;
}
.av-slide.active { display: flex; animation: avFade 0.4s ease; }
@keyframes avFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---- Typography ---- */
.av-tag {
  display: inline-block; background: var(--av-highlight-soft); color: var(--av-highlight);
  font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
  padding: 5px 12px; border-radius: 6px; margin-bottom: 14px; align-self: flex-start;
}
.av-slide h1 { font-size: 34px; font-weight: 800; line-height: 1.15; color: var(--av-ink); margin: 0 0 14px; letter-spacing: -.01em; }
.av-slide h2 { font-size: 25px; font-weight: 800; line-height: 1.2; color: var(--av-ink); margin: 0 0 12px; letter-spacing: -.005em; }
.av-slide h3 { font-size: 16px; font-weight: 700; color: var(--av-accent-dark); margin: 0 0 8px; }
.av-slide p { font-size: 15.5px; color: var(--av-ink-soft); margin: 0 0 12px; line-height: 1.6; }
.av-slide p.lede { font-size: 18px; color: var(--av-ink); font-weight: 400; line-height: 1.5; }
.av-slide ul { list-style: none; padding: 0; margin: 0; }
.av-slide ul li { position: relative; padding: 7px 0 7px 22px; font-size: 15.5px; color: var(--av-ink-soft); line-height: 1.55; }
.av-slide ul li::before { content: ''; position: absolute; left: 4px; top: 16px; width: 7px; height: 7px; background: var(--av-accent); border-radius: 50%; }
.av-slide ul li strong, .av-slide p strong { color: var(--av-ink); font-weight: 700; }
.av-slide a { color: var(--av-accent-dark); text-decoration: underline; text-underline-offset: 2px; }

/* ---- Title / divider slide ---- */
.av-slide.divider {
  background: linear-gradient(150deg, var(--av-accent) 0%, var(--av-accent-dark) 100%);
  color: #fff;
  align-items: flex-start; justify-content: center;
}
.av-slide.divider h1 { color: #fff; font-size: 40px; max-width: 820px; }
.av-slide.divider p { color: rgba(255,255,255,0.92); font-size: 18px; max-width: 720px; }
.av-slide.divider .module-num { font-size: 12px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: rgba(255,255,255,0.8); margin-bottom: 16px; }
.av-slide.divider .duration { display: inline-block; background: rgba(255,255,255,0.18); color: #fff; padding: 5px 14px; border-radius: 6px; font-size: 12.5px; font-weight: 600; margin-top: 22px; }
.av-slide.divider a { color: #fff; }

/* ---- Layout helpers ---- */
.av-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.av-three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.av-four-col { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.av-split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 24px; align-items: center; }

.av-card-tile {
  background: var(--av-accent-soft);
  border: 1px solid var(--av-line);
  border-radius: 12px; padding: 16px 18px;
  border-left: 4px solid var(--av-accent);
}
.av-card-tile h3 { font-size: 15px; color: var(--av-ink); font-weight: 700; margin-bottom: 6px; }
.av-card-tile p { font-size: 13.5px; margin: 0; color: var(--av-ink-soft); line-height: 1.5; }
.av-card-tile.alt { border-left-color: var(--av-highlight); }
.av-card-tile.alt h3 { color: var(--av-highlight); }
.av-card-tile.dark { background: var(--av-accent); border-color: var(--av-accent-dark); border-left-color: #fff; }
.av-card-tile.dark h3 { color: #fff; }
.av-card-tile.dark p { color: rgba(255,255,255,0.92); }
/* On divider (dark) slides, `.av-slide.divider p` would otherwise force white text
   onto the light card-tiles, making it unreadable. Restore the tile's own colours. */
.av-slide.divider .av-card-tile h3 { color: var(--av-ink); }
.av-slide.divider .av-card-tile p { color: var(--av-ink-soft); }
.av-slide.divider .av-card-tile.alt h3 { color: var(--av-highlight); }
.av-slide.divider .av-card-tile.dark h3 { color: #fff; }
.av-slide.divider .av-card-tile.dark p { color: rgba(255,255,255,0.92); }

.av-pill-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
.av-pill {
  background: var(--av-accent-soft); color: var(--av-accent-dark);
  border: 1px solid var(--av-line); border-radius: 10px; padding: 14px 12px; text-align: center;
  font-size: 12.5px; font-weight: 600; line-height: 1.3;
  display: flex; align-items: center; justify-content: center; min-height: 62px;
}
.av-quote {
  border-left: 4px solid var(--av-accent); padding: 14px 22px; margin: 14px 0;
  font-size: 17px; font-style: italic; color: var(--av-ink);
  background: var(--av-accent-soft); border-radius: 0 var(--av-radius) var(--av-radius) 0;
}
.av-quote .attrib { display: block; margin-top: 8px; font-style: normal; font-size: 12px; color: var(--av-accent-dark); font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; }

/* ---- Stat callout ---- */
.av-stat { text-align: center; padding: 8px 14px; }
.av-stat .num { font-size: 46px; font-weight: 800; color: var(--av-accent); line-height: 1; }
.av-stat .lbl { font-size: 13px; color: var(--av-ink-soft); margin-top: 6px; }

/* ---- Images / figures ---- */
.av-figure { margin: 4px 0 8px; border-radius: 12px; overflow: hidden; border: 1px solid var(--av-line); background: #fff; }
.av-figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
.av-figure figcaption { font-size: 11px; color: var(--av-ink-soft); padding: 6px 12px; background: #fff; line-height: 1.35; }
.av-figure figcaption a { color: var(--av-ink-soft); }
.av-slide .av-split .av-figure { height: 100%; min-height: 210px; max-height: 100%; }
/* When a slide is content-heavy, flexbox compresses .av-figure; because it has
   overflow:hidden, an inline SVG sized at its intrinsic height gets cropped
   (e.g. a Venn's lowest circle). Let the SVG scale down to the figure's
   available height instead of being clipped. viewBox + preserveAspectRatio
   keeps it centred and undistorted. */
.av-figure:has(svg), .av-figure:has(img) { display: flex; flex-direction: column; min-height: 0; }
.av-figure:has(svg) svg, .av-figure:has(img) img { flex: 0 1 auto; min-height: 0; max-width: 100%; max-height: 100%; width: 100%; height: auto; object-fit: contain; }
.av-figure:has(svg) figcaption, .av-figure:has(img) figcaption { flex: 0 0 auto; }

/* ---- Formula block ---- */
.av-formula {
  background: var(--av-accent-soft); border: 1px solid var(--av-line);
  border-left: 4px solid var(--av-accent);
  border-radius: 0 10px 10px 0; padding: 16px 20px; margin: 14px 0;
  font-size: 18px; color: var(--av-ink); overflow-x: auto;
}
.av-formula .flabel { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--av-accent-dark); font-weight: 700; margin-bottom: 8px; }

/* ---- Nav arrows ---- */
.av-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,0.92); color: var(--av-ink);
  border: 1px solid var(--av-line);
  font-size: 22px; cursor: pointer; opacity: 0; transition: opacity 0.2s, background 0.2s;
  z-index: 10; font-family: inherit; box-shadow: var(--av-card-shadow);
}
.av-stage:hover .av-arrow { opacity: 0.95; }
.av-arrow:hover { background: var(--av-accent-soft); color: var(--av-accent-dark); opacity: 1 !important; }
.av-arrow:disabled { opacity: 0.18 !important; cursor: not-allowed; }
.av-arrow.prev { left: 46px; }
.av-arrow.next { right: 46px; }

/* ---- Controls bar ---- */
.av-controls {
  background: #fff; border-top: 1px solid var(--av-line);
  padding: 13px 30px; color: var(--av-ink-soft);
  display: flex; align-items: center; gap: 13px;
}
.av-nav-btn, .av-play-btn, .av-mute-btn {
  background: var(--av-accent-soft); border: 1px solid var(--av-line);
  color: var(--av-accent-dark); width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  font-size: 15px; flex-shrink: 0; font-family: inherit; transition: all 0.15s;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}
.av-nav-btn:hover:not(:disabled), .av-play-btn:hover, .av-mute-btn:hover { background: var(--av-accent); color: #fff; border-color: var(--av-accent); }
.av-nav-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.av-play-btn.playing { background: var(--av-accent); color: #fff; border-color: var(--av-accent); }
.av-mute-btn.muted { background: var(--av-line); color: var(--av-ink-soft); }
.av-progress-wrap { flex: 1; min-width: 0; }
.av-progress-label { font-size: 12.5px; color: var(--av-ink-soft); font-weight: 600; }
.av-counter { font-size: 12.5px; color: var(--av-ink-soft); min-width: 64px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.av-toggle-btn {
  background: #fff; border: 1px solid var(--av-line);
  color: var(--av-ink-soft); padding: 7px 14px; border-radius: 8px; font-size: 12px; cursor: pointer;
  font-weight: 700; transition: all 0.15s; flex-shrink: 0; font-family: inherit;
}
.av-toggle-btn:hover { background: var(--av-accent-soft); border-color: var(--av-accent-line); color: var(--av-accent-dark); }
.av-toggle-btn.active { background: var(--av-accent); border-color: var(--av-accent); color: #fff; }

/* ---- Audio progress bar ---- */
.av-audio-bar { height: 3px; background: var(--av-line); position: relative; overflow: hidden; }
.av-audio-bar-fill { height: 100%; width: 0; background: var(--av-accent); transition: width 0.12s linear; }

/* ---- Transcript ---- */
.av-transcript {
  background: var(--av-accent-soft); color: var(--av-ink-soft);
  border-top: 1px solid var(--av-line);
  max-height: 0; overflow: hidden; transition: max-height 0.35s ease;
}
.av-transcript.open { max-height: 320px; overflow-y: auto; }
.av-transcript-inner { padding: 20px 30px; font-size: 15px; line-height: 1.7; color: var(--av-ink-soft); }
.av-transcript-inner h4 {
  font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--av-accent-dark); margin-bottom: 10px; font-weight: 700;
  display: flex; justify-content: space-between; align-items: center;
}
.av-transcript-inner button.close { background: none; border: none; color: var(--av-ink-soft); cursor: pointer; font-size: 18px; padding: 0 4px; font-family: inherit; }
.av-transcript-inner button.close:hover { color: var(--av-highlight); }

/* ---- Dive-deeper bar (prompts scroll to written content) ---- */
.av-dive-bar {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--av-accent-soft); color: var(--av-accent-dark);
  border-top: 1px solid var(--av-line);
  padding: 15px 16px; cursor: pointer;
  font-size: 12.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  transition: background 0.15s, color 0.15s;
}
.av-dive-bar:hover { background: var(--av-accent); color: #fff; }
.av-dive-arrow { display: inline-block; font-size: 15px; animation: avDive 1.6s ease-in-out infinite; }
@keyframes avDive { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .av-pill-grid, .av-four-col, .av-three-col { grid-template-columns: 1fr 1fr; }
  .av-two-col, .av-split { grid-template-columns: 1fr; }
  .av-slide { padding: 30px 28px; }
  .av-slide h1 { font-size: 27px; } .av-slide h2 { font-size: 21px; }
  .av-slide.divider h1 { font-size: 29px; }
  .av-arrow.prev { left: 14px; } .av-arrow.next { right: 14px; }
  .av-stage { min-height: 420px; padding: 18px 16px 10px; }
  .av-controls { padding: 10px 16px; gap: 9px; }
}

/* ============================================================
   Full-bleed walkthrough
   The lesson body is a centered 800px reading column, but the
   walkthrough deck should fill the whole content area to the right
   of the 280px sidebar (matching the example course). This breaks
   the deck out of the reading column and keeps a small side gutter.
   On narrow screens (sidebar hidden) it falls back to normal width.
   ============================================================ */
@media (min-width: 769px) {
  .av-deck {
    width: calc(100vw - 280px);
    max-width: none;
    margin-left: calc((100% - (100vw - 280px)) / 2);
    margin-right: 0;
    border-left: 0; border-right: 0; border-top: 0;
  }
  /* When a section leads with the deck, drop the reading-column's top padding
     so the deck butts directly against the section header band (no white gap). */
  .module-body > .av-deck:first-child { margin-top: -40px; }
}

/* Condensed section header (re-rendered by walkthrough.js): chip + title, one line */
.module-header.mh-condensed {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding-top: 16px !important; padding-bottom: 16px !important;
}
.module-header.mh-condensed .mh-chip {
  background: var(--accent, #CC0033); color: #fff;
  font-size: 12.5px; font-weight: 700; letter-spacing: .4px;
  padding: 5px 13px; border-radius: 20px; white-space: nowrap; flex-shrink: 0;
}
.module-header.mh-condensed .mh-title {
  font-size: 20px; font-weight: 700; color: #fff; line-height: 1.25; margin: 0;
}