/* ============================================================
   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: 16px;
  overflow: hidden;
  box-shadow: var(--av-card-shadow);
  margin: 2px 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); }

.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: 11.5px; color: var(--av-ink-soft); padding: 7px 12px; background: #fff; line-height: 1.4; }
.av-figure figcaption a { color: var(--av-ink-soft); }
.av-slide .av-split .av-figure { height: 100%; min-height: 280px; }

/* ---- 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 - 32px);
    max-width: none;
    margin-left: calc((100% - (100vw - 280px - 32px)) / 2);
    margin-right: 0;
  }
}

/* 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;
}