:root {
  --bg: #f3f6fb;
  --card: #ffffff;
  --text: #172033;
  --muted: #64748b;
  --line: #e2e8f0;
  --primary: #2563eb;
  --primary-soft: #dbeafe;
  --dark: #101827;
  --shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
  --radius: 20px;
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  padding: 0;
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, 0.08), transparent 30rem),
    linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

body { padding: 0; }

.demo-shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px;
}
.course-shell {
  max-width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Content area below the header */
.course-shell > .course-layout {
  padding: 28px;
  max-width: 1380px;
  margin: 0 auto;
  width: 100%;
}

.course-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: rgba(13, 16, 22, 0.97);
  color: #ffffff;
  border-radius: 0;
  padding: 0 28px;
  height: 56px;
  margin-bottom: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: none;
}

.course-layout {
  display: grid;
  grid-template-columns: 300px 1fr 260px;
  gap: 28px;
  align-items: start;
}

@media (max-width: 1100px) {
  .course-layout {
    grid-template-columns: 260px 1fr;
  }
  .lesson-resources-panel { display: none; }
}

@media (max-width: 720px) {
  .course-layout {
    grid-template-columns: 1fr;
  }
  .sidebar { display: none; }
}

.header-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.learner-chip {
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.learner-chip span {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(140, 151, 172, 0.65);
  margin-bottom: 2px;
  font-weight: 600;
}

.learner-chip strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: rgba(214, 224, 245, 0.85);
}

.course-status {
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.course-progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.lesson-body p {
  margin-bottom: 1.4em;
}

.lesson-summary {
  margin: 0 0 2em;
  padding: 12px 18px;
  background: #f0fdf4;
  border-left: 3px solid #16a34a;
  border-radius: 0 8px 8px 0;
}

.lesson-summary-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #15803d;
  margin-bottom: 4px;
}

.lesson-summary-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: #166534;
}

.lesson-recommendation {
  margin: 2em 0 0;
  padding: 14px 20px;
  background: #fefce8;
  border-left: 3px solid #ca8a04;
  border-radius: 0 8px 8px 0;
}

.lesson-recommendation-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #92400e;
  margin-bottom: 4px;
}

.lesson-recommendation-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: #78350f;
  font-weight: 500;
}

.lesson-objective {
  margin: 0 0 1.8em;
  padding: 12px 18px;
  background: #eff6ff;
  border-left: 3px solid #3b82f6;
  border-radius: 0 8px 8px 0;
}

.lesson-objective-prefix {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary-dark, #1d4ed8);
  margin-bottom: 4px;
}

.lesson-objective-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: #1e3a8a;
}

.lesson-callout {
  margin: 1.8em 0;
  padding: 16px 20px;
  background: transparent;
  border: 1px solid var(--line);
  border-left: 3px solid var(--muted);
  border-radius: 0 10px 10px 0;
  font-size: 15px;
  line-height: 1.78;
  color: var(--text);
}

.completion-subline {
  margin: -4px 0 18px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.demo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: linear-gradient(135deg, #111827, #1e293b);
  color: #ffffff;
  border-radius: 22px;
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: var(--shadow);
}

.brand-block {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo {
  width: 36px;
  height: 36px;
  background: rgba(22, 199, 182, 0.12);
  color: #16C7B6;
  border: 1px solid rgba(22, 199, 182, 0.28);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  letter-spacing: -0.04em;
  font-size: 15px;
  flex-shrink: 0;
}

/* Workspace logo — replaces .logo "M" pill in training mode */
.brand-logo-img {
  height: 32px;
  max-width: 120px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}

.header-text h1 {
  margin: 0;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 640;
  letter-spacing: -0.01em;
  color: rgba(242, 244, 248, 0.92);
}

.header-text p {
  margin: 2px 0 0;
  color: rgba(140, 151, 172, 0.70);
  font-size: 12px;
  font-weight: 450;
}

.back-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 10px 14px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.18);
  text-decoration: none;
  font-weight: 650;
  font-size: 14px;
  white-space: nowrap;
}

.back-home:hover { background: rgba(255, 255, 255, 0.16); }

.demo-layout {
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: 24px;
  align-items: start;
}

.sidebar {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  position: sticky;
  top: 24px;
}

.sidebar-top {
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
  margin-bottom: 14px;
}

.eyebrow {
  margin: 0 0 7px;
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.sidebar h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.lesson-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lesson-item {
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: var(--text);
  padding: 12px;
  font-size: 15px;
  font-weight: 620;
  line-height: 1.35;
  cursor: pointer;
  transition: 0.16s ease;
}

.lesson-item:hover {
  background: #f8fafc;
  border-color: var(--line);
}

.lesson-item.active {
  background: var(--primary-soft, #eef2ff);
  border-color: var(--primary-light, #bfdbfe);
  color: var(--primary-dark, #1e3a8a);
}

.lesson-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 42px;
}

.lesson-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 16px;
}

.lesson-pill {
  background: var(--primary-soft);
  color: #1d4ed8;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.progress-track {
  width: 100%;
  height: 7px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 24px;
}

.progress-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--primary), #06b6d4);
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.lesson-meta {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 8px;
}

h2 {
  margin: 0;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -0.03em;
}

h3 {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 700;
}

.content-panel { margin-top: 16px; }

.lesson-body {
  font-size: 16px;
  line-height: 1.76;
  letter-spacing: -0.01em;
  margin-bottom: 24px;
  max-width: 720px;
}

.lesson-body p { margin-top: 0; }

.image-block {
  margin: 24px 0;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #f8fafc;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

#lessonImage {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  display: block;
}

.media-block {
  margin: 24px 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #f8fafc;
}

video {
  width: 100%;
  max-width: 760px;
  display: block;
  border-radius: 14px;
  background: #000000;
}

audio {
  width: 100%;
  display: block;
}

.nav-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

button {
  border: none;
  border-radius: 12px;
  background: var(--dark);
  color: #ffffff;
  padding: 11px 17px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.16s ease;
}

button:hover {
  transform: translateY(-1px);
  background: #020617;
}

.secondary-btn {
  background: #ffffff;
  color: var(--text);
  border: 1px solid #cbd5e1;
}

.secondary-btn:hover { background: #f8fafc; }

button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  transform: none;
}

button:disabled:hover {
  transform: none;
}

.hidden { display: none !important; }

@media (max-width: 900px) {
  body { padding: 14px; }

  .demo-layout   { grid-template-columns: 1fr; }
  .course-layout { grid-template-columns: 1fr; }

  .sidebar { position: static; }

  .demo-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .back-home { width: 100%; }

  .lesson-top { flex-direction: column; }

  #lessonImage { max-height: none; }
}

/* =========================
   FINAL ASSESSMENT
========================= */

.assessment-block {
  margin-top: 30px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #ffffff;
}

.assessment-header {
  margin-bottom: 18px;
}

.assessment-intro {
  color: var(--muted);
  margin-bottom: 0;
}

.assessment-questions {
  display: grid;
  gap: 16px;
}

.assessment-question {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  background: #ffffff;
}

.assessment-question-top {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.assessment-count {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: #1d4ed8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  font-size: 13px;
  font-weight: 800;
}

.assessment-options {
  display: grid;
  gap: 10px;
}

.assessment-option {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f8fafc;
  cursor: pointer;
  font-weight: 600;
}

.assessment-option:hover {
  border-color: #bfdbfe;
  background: #eff6ff;
}

.assessment-option input {
  margin-top: 2px;
}

.assessment-feedback {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #f8fafc;
  color: var(--muted);
  border: 1px solid var(--line);
  line-height: 1.5;
}

.assessment-question.is-correct {
  border-color: #86efac;
  background: #f0fdf4;
}

.assessment-question.is-correct .assessment-feedback {
  color: #166534;
  background: #dcfce7;
  border-color: #86efac;
}

.assessment-question.is-incorrect {
  border-color: #fecaca;
  background: #fff7f7;
}

.assessment-question.is-incorrect .assessment-feedback,
.assessment-question.is-unanswered .assessment-feedback {
  color: #991b1b;
  background: #fee2e2;
  border-color: #fecaca;
}

.scenario-panel {
  padding: 18px;
  border-radius: 18px;
  background: #111827;
  color: #ffffff;
}

.scenario-panel .eyebrow {
  color: var(--primary-light, #bfdbfe);
}

.scenario-panel p:last-child {
  margin-bottom: 0;
  color: #dbeafe;
}

.assessment-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 18px;
}

.assessment-score {
  color: var(--text);
  font-weight: 800;
}


/* =========================
   FINAL ACTIVITY PAGE
========================= */

.intro-nav-item {
  margin-bottom: 8px;
  border-color: #d1fae5;
  background: #f0fdf4;
  color: #065f46;
  font-style: italic;
}

.workshop-segment-nav-item {
  border-color: #e5e7eb;
  background: #f9fafb;
  color: #6b7280;
  font-size: 0.78em;
  font-style: italic;
  opacity: 0.85;
}

.assessment-nav-item {
  margin-top: 10px;
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
}

.assessment-page {
  margin-top: 24px;
}

.assessment-hero {
  margin-bottom: 22px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #ffffff;
}

.assessment-hero h3 {
  font-size: clamp(24px, 2.4vw, 34px);
  margin-bottom: 10px;
}

.scenario-step {
  margin-top: 16px;
}

.scenario-step-card,
.scenario-complete {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px;
  background: #ffffff;
}

.scenario-step-top {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.scenario-situation {
  padding: 16px;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px solid var(--line);
  line-height: 1.6;
}

.scenario-options {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.scenario-option {
  width: 100%;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  text-align: left;
  background: #ffffff;
  color: var(--text);
  border: 1px solid var(--line);
  box-shadow: none;
}

.scenario-option span {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: #1d4ed8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  font-size: 13px;
  font-weight: 800;
}

.scenario-option strong {
  line-height: 1.45;
}

.scenario-option:hover:not(:disabled) {
  background: #eff6ff;
  border-color: #bfdbfe;
}

.scenario-option:disabled {
  opacity: 1;
  cursor: default;
}

.scenario-option.is-correct {
  border-color: #86efac;
  background: #f0fdf4;
}

.scenario-option.is-incorrect {
  border-color: #fecaca;
  background: #fff7f7;
}

.scenario-continue {
  margin-top: 14px;
}


/* =========================
   BRANCHING SCENARIO SIMULATION
========================= */

.scenario-dashboard {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 16px 0 18px;
}

.scenario-dashboard div {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #ffffff;
}

.scenario-dashboard span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}

.scenario-dashboard strong {
  display: block;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
}

.scenario-option {
  position: relative;
  flex-wrap: wrap;
}

.scenario-option small {
  display: block;
  width: 100%;
  margin-left: 40px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.scenario-option.is-correct small {
  color: #166534;
}

.scenario-option.is-incorrect small {
  color: #991b1b;
}

.scenario-score-big {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  margin: 12px 0 18px;
  padding: 18px 22px;
  border-radius: 20px;
  background: linear-gradient(135deg, #eff6ff, #ffffff);
  border: 1px solid #bfdbfe;
  font-size: 42px;
  font-weight: 850;
  color: #1d4ed8;
}

.scenario-score-big small {
  display: block;
  font-size: 14px;
  color: var(--muted);
  font-weight: 800;
}

.scenario-summary-box {
  margin-top: 14px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: #ffffff;
}

.scenario-summary-box strong {
  display: block;
  margin-bottom: 6px;
}

.scenario-summary-box p {
  margin: 0;
  line-height: 1.55;
}

.scenario-summary-box.ok {
  border-color: #86efac;
  background: #f0fdf4;
  color: #166534;
}

.scenario-summary-box.risk {
  border-color: #fecaca;
  background: #fff7f7;
  color: #991b1b;
}

.scenario-breakdown {
  margin-top: 18px;
  display: grid;
  gap: 10px;
}

.scenario-break-item {
  padding: 13px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #ffffff;
}

.scenario-break-item strong,
.scenario-break-item span,
.scenario-break-item small {
  display: block;
}

.scenario-break-item strong {
  margin-bottom: 5px;
}

.scenario-break-item span {
  line-height: 1.45;
}

.scenario-break-item small {
  margin-top: 5px;
  font-weight: 800;
}

.scenario-break-item.ok {
  border-color: #86efac;
  background: #f0fdf4;
  color: #166534;
}

.scenario-break-item.fail {
  border-color: #fecaca;
  background: #fff7f7;
  color: #991b1b;
}

@media (max-width: 800px) {
  .scenario-dashboard {
    grid-template-columns: 1fr;
  }
}


/* =========================
   SCENARIO REPORT + OUTCOME STATES
========================= */

.scenario-outcome.ok {
  border-color: #86efac;
  background: linear-gradient(135deg, #f0fdf4, #ffffff);
}

.scenario-outcome.mid {
  border-color: #fde68a;
  background: linear-gradient(135deg, #fffbeb, #ffffff);
}

.scenario-outcome.fail {
  border-color: #fecaca;
  background: linear-gradient(135deg, #fff7f7, #ffffff);
}

#downloadScenarioReportBtn {
  border-color: #bfdbfe;
  color: #1d4ed8;
}

#downloadScenarioReportBtn:hover {
  background: #eff6ff;
}


/* =========================
   COURSE COMPLETION EXPERIENCE
========================= */

.course-completion-panel {
  margin-top: 28px;
}

.course-completion-card {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  padding: 28px;
  border-radius: 24px;
  border: 1px solid var(--line);
  background: #ffffff;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06);
}

.completion-icon {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  color: #16a34a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  flex: 0 0 44px;
  margin-top: 4px;
}

.completion-content {
  flex: 1;
}

.completion-content h3 {
  margin: 0 0 10px;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.1;
}

.completion-message {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
  max-width: 760px;
}

.completion-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 240px));
  gap: 14px;
  margin-bottom: 22px;
}

.completion-stat {
  padding: 16px;
  border-radius: 16px;
  border: 1px solid #bbf7d0;
  background: #ffffff;
}

.completion-stat span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}

.completion-stat strong {
  display: block;
  color: #166534;
  font-size: 26px;
  font-weight: 850;
}

.completion-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.activity-only-course .course-completion-card {
  margin-bottom: 8px;
}

@media (max-width: 800px) {
  .course-completion-card {
    flex-direction: column;
  }

  .completion-stats {
    grid-template-columns: 1fr;
  }
}


/* =========================
   PRESENTATION STYLES
========================= */

.theme-corporate {
  --bg: #f3f6fb;
  --card: #ffffff;
  --text: #172033;
  --muted: #64748b;
  --line: #e2e8f0;
  --primary: #2563eb;
  --primary-soft: #dbeafe;
  --dark: #101827;
}

.theme-minimal {
  --bg: #f8fafc;
  --card: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --line: #e5e7eb;
  --primary: #111827;
  --primary-soft: #e5e7eb;
  --dark: #111827;
  --shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.theme-minimal .demo-header {
  background: #ffffff;
  color: #111827;
  border: 1px solid var(--line);
}

.theme-minimal .header-text p {
  color: var(--muted);
}

.theme-minimal .logo {
  background: #111827;
}

.theme-minimal .hosted-badge {
  color: #111827;
  background: #f3f4f6;
  border-color: #e5e7eb;
}

.theme-compliance {
  --bg: #f1f5f9;
  --card: #ffffff;
  --text: #172033;
  --muted: #475569;
  --line: #cbd5e1;
  --primary: #1d4ed8;
  --primary-soft: #dbeafe;
  --dark: #1e293b;
}

.theme-compliance .demo-header {
  background: linear-gradient(135deg, #0f172a, #1e3a8a);
}

.theme-healthcare {
  --bg: #f0fdfa;
  --card: #ffffff;
  --text: #12342f;
  --muted: #4b6864;
  --line: #ccfbf1;
  --primary: #0f766e;
  --primary-soft: #ccfbf1;
  --dark: #134e4a;
}

.theme-healthcare .demo-header {
  background: linear-gradient(135deg, #134e4a, #0f766e);
}

.theme-healthcare .logo {
  background: linear-gradient(135deg, #0f766e, #14b8a6);
}

.theme-industrial {
  --bg: #fffbeb;
  --card: #ffffff;
  --text: #292013;
  --muted: #756044;
  --line: #fde68a;
  --primary: #b45309;
  --primary-soft: #fef3c7;
  --dark: #292524;
}

.theme-industrial .demo-header {
  background: linear-gradient(135deg, #292524, #92400e);
}

.theme-industrial .logo {
  background: linear-gradient(135deg, #b45309, #f59e0b);
}

.theme-dark {
  --bg: #0f172a;
  --card: #111827;
  --text: #f8fafc;
  --muted: #94a3b8;
  --line: #243244;
  --primary: #38bdf8;
  --primary-soft: rgba(56, 189, 248, 0.16);
  --dark: #020617;
  --shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
}

body.theme-dark {
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.12), transparent 30rem),
    linear-gradient(180deg, #020617 0%, #0f172a 100%);
  color: var(--text);
}

.theme-dark .demo-header,
.theme-dark .lesson-card,
.theme-dark .sidebar,
.theme-dark .assessment-question,
.theme-dark .scenario-step-card,
.theme-dark .scenario-complete {
  background: var(--card);
  color: var(--text);
  border-color: var(--line);
}

.theme-dark .demo-header {
  background: linear-gradient(135deg, #020617, #0f172a);
}

.theme-dark .lesson-item {
  color: var(--text);
}

.theme-dark .lesson-item:hover,
.theme-dark .assessment-option,
.theme-dark .scenario-situation,
.theme-dark .media-block,
.theme-dark .image-block,
.theme-dark .assessment-feedback,
.theme-dark .scenario-dashboard div,
.theme-dark .scenario-summary-box,
.theme-dark .completion-stat {
  background: #0f172a;
  color: var(--text);
  border-color: var(--line);
}

.theme-dark .lesson-item.active,
.theme-dark .assessment-nav-item,
.theme-dark .assessment-hero,
.theme-dark .assessment-block,
.theme-dark .lesson-pill,
.theme-dark .scenario-score-big {
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.35);
  color: #e0f2fe;
}

.theme-dark .progress-track {
  background: #1e293b;
}

.theme-dark .secondary-btn {
  background: #0f172a;
  color: var(--text);
  border-color: var(--line);
}

.theme-dark .secondary-btn:hover {
  background: #1e293b;
}

.theme-dark .course-completion-card {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), #111827);
  border-color: rgba(34, 197, 94, 0.35);
}

.theme-dark .completion-stat strong {
  color: #86efac;
}
/* =========================
   DARK THEME FIXES
========================= */

.theme-dark .assessment-question,
.theme-dark .assessment-option,
.theme-dark .scenario-option,
.theme-dark .scenario-break-item,
.theme-dark .scenario-summary-box,
.theme-dark .scenario-situation,
.theme-dark .assessment-feedback,
.theme-dark .scenario-dashboard div,
.theme-dark .completion-stat,
.theme-dark .media-block,
.theme-dark .image-block {
  background: #0f172a !important;
  color: #f8fafc !important;
  border-color: #243244 !important;
}

.theme-dark .assessment-option:hover,
.theme-dark .scenario-option:hover:not(:disabled) {
  background: #162033 !important;
  border-color: #38bdf8 !important;
}

.theme-dark .scenario-option strong,
.theme-dark .scenario-option small,
.theme-dark .scenario-break-item strong,
.theme-dark .scenario-break-item span,
.theme-dark .scenario-break-item small,
.theme-dark .assessment-feedback,
.theme-dark .assessment-score,
.theme-dark .lesson-meta,
.theme-dark .assessment-intro {
  color: #e2e8f0 !important;
}

.theme-dark .scenario-option span,
.theme-dark .assessment-count {
  background: rgba(56, 189, 248, 0.18) !important;
  color: #7dd3fc !important;
}

.theme-dark .scenario-option.is-correct,
.theme-dark .scenario-break-item.ok {
  background: rgba(34, 197, 94, 0.12) !important;
  border-color: rgba(34, 197, 94, 0.4) !important;
}

.theme-dark .scenario-option.is-incorrect,
.theme-dark .scenario-break-item.fail {
  background: rgba(239, 68, 68, 0.12) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
}

.theme-dark .scenario-option.is-correct small,
.theme-dark .scenario-break-item.ok small {
  color: #86efac !important;
}

.theme-dark .scenario-option.is-incorrect small,
.theme-dark .scenario-break-item.fail small {
  color: #fca5a5 !important;
}

.theme-dark .completion-message,
.theme-dark .header-text p {
  color: #cbd5e1 !important;
}
.lesson-item {
  position: relative;
  padding-left: 44px;
}

.lesson-item::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid #cbd5e1;
  background: #ffffff;
}

.lesson-item.completed::before {
  background: #22c55e;
  border-color: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.12);
}

.lesson-item.active::before {
  background: var(--primary, #2563eb);
  border-color: var(--primary, #2563eb);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}
.lesson-card,
.content-panel {
  animation: fadeSlideIn 0.32s ease;
}

.assessment-page.is-entering {
  animation: fadeSlideIn 0.28s ease;
}

@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================
   CONTENT REVEAL PACING
========================= */

@keyframes blockReveal {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.lesson-body.content-entering > * {
  opacity: 0;
  animation: blockReveal 0.28s ease forwards;
}

.lesson-body.content-entering > *:nth-child(1) { animation-delay: 0s; }
.lesson-body.content-entering > *:nth-child(2) { animation-delay: 0.05s; }
.lesson-body.content-entering > *:nth-child(3) { animation-delay: 0.10s; }
.lesson-body.content-entering > *:nth-child(4) { animation-delay: 0.14s; }
.lesson-body.content-entering > *:nth-child(n+5) { animation-delay: 0.18s; }

/* =========================
   LESSON BODY TYPOGRAPHY
========================= */

/* Sub-headings inside lesson body (level 2 blocks) */
.lesson-body h2 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 2em 0 0.5em;
  color: var(--text);
}

/* Divider block */
.lesson-divider {
  border: none;
  border-top: 1px solid var(--line);
  margin: 2em 0;
}

/* Quote block */
.lesson-body blockquote {
  margin: 1.6em 0;
  padding: 14px 20px;
  border-left: 3px solid var(--line);
  background: #f8fafc;
  font-style: italic;
  color: var(--muted);
  border-radius: 0 8px 8px 0;
  font-size: 15px;
  line-height: 1.7;
}

/* =========================
   DARK THEME CALLOUT / QUOTE
========================= */

.theme-dark .lesson-summary {
  background: rgba(22, 163, 74, 0.1);
  border-left-color: #4ade80;
}

.theme-dark .lesson-summary-label {
  color: #86efac;
}

.theme-dark .lesson-summary-text {
  color: #dcfce7;
}

.theme-dark .lesson-recommendation {
  background: rgba(202, 138, 4, 0.1);
  border-left-color: #fbbf24;
}

.theme-dark .lesson-recommendation-label {
  color: #fde68a;
}

.theme-dark .lesson-recommendation-text {
  color: #fef3c7;
}

.theme-dark .lesson-objective {
  background: rgba(59, 130, 246, 0.1);
  border-left-color: #60a5fa;
}

.theme-dark .lesson-objective-prefix {
  color: #bfdbfe;
}

.theme-dark .lesson-objective-text {
  color: #dbeafe;
}

.theme-dark .lesson-callout {
  background: rgba(56, 189, 248, 0.07);
  border-color: rgba(56, 189, 248, 0.2);
  border-left-color: var(--primary);
  color: var(--text);
}

.theme-dark .lesson-body blockquote {
  background: #0f172a;
  border-color: #243244;
  color: #94a3b8;
}
.theme-minimal .course-header {
  background: #ffffff;
  color: #111827;
  border: 1px solid var(--line);
}

.theme-compliance .course-header {
  background: linear-gradient(135deg, #0f172a, #1e3a8a);
}

.theme-healthcare .course-header {
  background: linear-gradient(135deg, #134e4a, #0f766e);
}

.theme-industrial .course-header {
  background: linear-gradient(135deg, #292524, #92400e);
}

/* ── Workshop activity block ─────────────────────────────────────────────── */

.lesson-activity {
  margin: 2em 0;
  border: 1.5px solid #d1fae5;
  border-left: 4px solid #059669;
  border-radius: 0 10px 10px 0;
  background: #f0fdf4;
  overflow: hidden;
}

.lesson-activity-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px 10px;
  border-bottom: 1px solid #d1fae5;
}

.lesson-activity-icon {
  color: #059669;
  flex-shrink: 0;
}

.lesson-activity-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #065f46;
  letter-spacing: -0.01em;
}

.activity-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0;
  padding: 8px 18px;
  background: rgba(5,150,105,0.05);
  border-bottom: 1px solid #d1fae5;
  font-size: 12px;
}

.activity-meta-item {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  color: #065f46;
  text-transform: capitalize;
}

.activity-meta-label {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: #059669;
}

.activity-materials {
  padding: 12px 18px;
  border-bottom: 1px solid #d1fae5;
}

.activity-materials-label {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #059669;
}

.activity-materials-list {
  margin: 0;
  padding-left: 1.3em;
  font-size: 13px;
  color: #065f46;
  line-height: 1.7;
}

.activity-instructions {
  padding: 14px 18px;
  border-bottom: 1px solid #d1fae5;
}

.activity-instructions-label {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #059669;
}

.activity-instructions-body {
  font-size: 14px;
  line-height: 1.75;
  color: #1a1f2b;
}

.activity-notes-area {
  padding: 14px 18px 18px;
}

.activity-notes-label {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #059669;
}

.activity-notes-lines {
  min-height: 80px;
  border-bottom: 1px solid #a7f3d0;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 27px,
    #a7f3d0 27px,
    #a7f3d0 28px
  );
  background-position: 0 27px;
}

/* Dark theme overrides for activity block */
.theme-dark .lesson-activity {
  background: rgba(5,150,105,0.08);
  border-color: rgba(5,150,105,0.3);
  border-left-color: #10b981;
}

.theme-dark .lesson-activity-header {
  border-bottom-color: rgba(5,150,105,0.2);
}

.theme-dark .lesson-activity-title {
  color: #a7f3d0;
}

.theme-dark .activity-meta {
  background: rgba(5,150,105,0.06);
  border-bottom-color: rgba(5,150,105,0.2);
}

.theme-dark .activity-meta-item,
.theme-dark .activity-materials-list {
  color: #a7f3d0;
}

.theme-dark .activity-meta-label,
.theme-dark .activity-materials-label,
.theme-dark .activity-instructions-label,
.theme-dark .activity-notes-label {
  color: #34d399;
}

.theme-dark .activity-materials,
.theme-dark .activity-instructions {
  border-bottom-color: rgba(5,150,105,0.2);
}

.theme-dark .activity-instructions-body {
  color: var(--text);
}

.theme-dark .activity-notes-lines {
  border-bottom-color: rgba(5,150,105,0.25);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 27px,
    rgba(5,150,105,0.2) 27px,
    rgba(5,150,105,0.2) 28px
  );
}


/* ==========================================================================
   PRESENTATION MODE
   Applied when lessons carry enhancement_status (Video Presentation route).
   Additive only — all course-mode selectors remain active beneath these.
   ========================================================================== */

body.mode-presentation {
  background:
    radial-gradient(circle at 80% 10%, rgba(30, 58, 138, 0.10), transparent 40rem),
    linear-gradient(180deg, #0a0d14 0%, #0f1520 100%);
  color: #e8ecf4;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
body.mode-presentation .course-header {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 0;
  margin-bottom: 0;
  padding: 20px 32px;
  box-shadow: none;
}

body.mode-presentation .course-shell {
  max-width: 100%;
  padding: 0;
}

/* ── Layout ─────────────────────────────────────────────────────────────── */
body.mode-presentation .course-layout {
  grid-template-columns: 240px 1fr;
  gap: 0;
  align-items: stretch;
  min-height: calc(100vh - 56px); /* 56px = new flat header height */
}

/* Presentation mode is full-width — suppress the training-mode padding wrapper */
body.mode-presentation .course-shell > .course-layout {
  padding: 0;
  max-width: 100%;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
body.mode-presentation .sidebar {
  background: rgba(255, 255, 255, 0.025);
  border: none;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 0;
  box-shadow: none;
  padding: 28px 16px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

body.mode-presentation .sidebar-top {
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  padding-bottom: 16px;
  margin-bottom: 16px;
}

body.mode-presentation #sidebarEyebrow {
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.18em;
}

body.mode-presentation #sidebarHeading {
  color: #e8ecf4;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Sidebar scene items — clean vertical list, not LMS buttons */
body.mode-presentation .lesson-item {
  background: transparent;
  border: none;
  border-radius: 0;
  border-left: 2px solid transparent;
  padding: 9px 12px 9px 14px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}

body.mode-presentation .lesson-item:hover {
  background: rgba(255, 255, 255, 0.04);
  border-left-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.75);
}

body.mode-presentation .lesson-item.active {
  background: transparent;
  border-left-color: #e8ecf4;
  color: #e8ecf4;
  font-weight: 600;
}

body.mode-presentation .lesson-item.completed {
  color: rgba(255, 255, 255, 0.3);
}

/* No progress dots in presentation mode — border-left is the sole indicator */
body.mode-presentation .lesson-item::before {
  display: none;
}

/* Suppress the learner-hint card in presentation mode */
body.mode-presentation .context-hint {
  display: none !important;
}

/* ── Main content card ───────────────────────────────────────────────────── */
body.mode-presentation .lesson-card {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 52px 64px;
}

/* ── Lesson meta (scene position label) ──────────────────────────────────── */
body.mode-presentation .lesson-meta {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: 12px;
}

/* ── Lesson title ────────────────────────────────────────────────────────── */
body.mode-presentation #lessonTitle {
  font-size: clamp(28px, 3.2vw, 46px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: #f0f4ff;
}

/* ── Scene deck (summary subtitle) ──────────────────────────────────────── */
.scene-deck {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  max-width: 680px;
}

/* ── Progress bar ────────────────────────────────────────────────────────── */
body.mode-presentation .progress-track {
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 0;
  margin-bottom: 32px;
}

body.mode-presentation .progress-fill {
  background: rgba(255, 255, 255, 0.55);
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

body.mode-presentation .course-progress-meta {
  color: rgba(255, 255, 255, 0.3);
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 8px;
}

/* ── Body text ───────────────────────────────────────────────────────────── */
body.mode-presentation .lesson-body {
  font-size: 17px;
  line-height: 1.88;
  letter-spacing: -0.01em;
  color: #c8d0e0;
  max-width: none;
}

body.mode-presentation .lesson-body p {
  margin-bottom: 1.5em;
}

body.mode-presentation .lesson-body h2 {
  color: #e8ecf4;
  font-size: 20px;
  margin-top: 2em;
  margin-bottom: 0.6em;
}

/* ── Navigation row ──────────────────────────────────────────────────────── */
body.mode-presentation .nav-row {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 48px;
  padding-top: 28px;
  justify-content: flex-end;
  gap: 10px;
}

body.mode-presentation button {
  background: rgba(255, 255, 255, 0.08);
  color: #e8ecf4;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

body.mode-presentation button:hover {
  background: rgba(255, 255, 255, 0.14);
  transform: none;
}

body.mode-presentation #nextBtn {
  background: #e8ecf4;
  color: #0a0d14;
  border-color: transparent;
  font-weight: 600;
}

body.mode-presentation #nextBtn:hover {
  background: #ffffff;
}

body.mode-presentation button:disabled {
  opacity: 0.2;
}

/* ── Compliance callout ──────────────────────────────────────────────────── */
body.mode-presentation .lesson-callout {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.1);
  border-left-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  line-height: 1.7;
}

/* ── Body copy suppressed — presentation scaffold is visual/audio-first ──── */
/* Hidden when a scene stage is visible (visual takes the frame; audio        */
/* delivers the content). Surfaced when the stage is collapsed so text-only   */
/* scenes still have readable substance rather than an empty card.            */

body.mode-presentation .lesson-body {
  display: none;
}

/* Title-card fallback: show body when there is no visual stage to fill the   */
/* frame. The content panel sits below the title/deck/progress bar.           */
body.mode-presentation .scene-stage.hidden ~ .content-panel .lesson-body {
  display: block;
}

/* Suppress visual_direction debug note rendered as ::after on #lessonBody */
body.mode-presentation #lessonBody[data-visual-direction]::after {
  display: none;
}

/* ── Scene stage — cinematic visual container ─────────────────────────────── */
/* Holds primary visual (image / video / page-render) and presenter overlay.  */
/* Aspect-ratio frame on a deep-dark field — cinematic, not LMS-boxed.        */
/* Collapsed entirely (hidden) when no media is present for the scene.        */

.scene-stage {
  display: none;  /* course mode: hidden unless a video is present */
}

/* Training-mode intro video — show stage when JS marks it as active */
.scene-stage.has-video {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #080c14;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 20px;
}

/* Training-mode lesson image — show stage when image is present but no video */
.scene-stage.has-image {
  display: block;
  width: 100%;
  margin-bottom: 20px;
}

.scene-stage.has-video .media-block {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.scene-stage.has-video video {
  width: 100%;
  height: 100%;
  max-width: none;
  border-radius: 0;
  object-fit: contain;
  background: transparent;
}

/* ── Workshop structural / transition slides ─────────────────────────── */

@keyframes ws-slide-in {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

@keyframes ws-icon-drop {
  0%   { opacity: 0; transform: translateY(-28px) rotate(-12deg) scale(0.7); }
  60%  { opacity: 1; transform: translateY(6px)   rotate(4deg)   scale(1.12); }
  80%  { transform: translateY(-3px) rotate(-2deg) scale(0.97); }
  100% { opacity: 1; transform: translateY(0)    rotate(0)     scale(1);    }
}

@keyframes ws-icon-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

@keyframes ws-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

@keyframes ws-ring-pulse {
  0%, 100% { box-shadow: 0 0 0 0px rgba(99,102,241,0.18); }
  50%       { box-shadow: 0 0 0 16px rgba(99,102,241,0);   }
}

.workshop-segment-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 32px;
  text-align: center;
  gap: 18px;
  animation: ws-slide-in 0.45s cubic-bezier(0.22,1,0.36,1) both;
}

.workshop-segment-slide .workshop-segment-title {
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  background: linear-gradient(110deg, #312e81, #6366f1, #a855f7, #6366f1, #312e81);
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: ws-shimmer 3.5s linear infinite;
  animation-delay: 0.55s;
  animation-fill-mode: backwards;
}

/* Per-segment colour theme for the title shimmer */
.workshop-segment-slide[data-segment="welcome"] .workshop-segment-title {
  background-image: linear-gradient(110deg, #065f46, #10b981, #34d399, #10b981, #065f46);
}
.workshop-segment-slide[data-segment="pre_check"] .workshop-segment-title {
  background-image: linear-gradient(110deg, #1e40af, #3b82f6, #60a5fa, #3b82f6, #1e40af);
}
.workshop-segment-slide[data-segment="break"] .workshop-segment-title,
.workshop-segment-slide[data-segment="lunch"] .workshop-segment-title {
  background-image: linear-gradient(110deg, #78350f, #f59e0b, #fcd34d, #f59e0b, #78350f);
}
.workshop-segment-slide[data-segment="close"] .workshop-segment-title {
  background-image: linear-gradient(110deg, #7f1d1d, #ef4444, #f87171, #ef4444, #7f1d1d);
}

.workshop-segment-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgba(99,102,241,0.07);
  animation: ws-ring-pulse 2.8s ease-in-out infinite, ws-icon-drop 0.55s cubic-bezier(0.22,1,0.36,1) both;
  animation-delay: 0s, 0.1s;
}

.workshop-segment-slide[data-segment="welcome"]   .workshop-segment-icon-wrap { background: rgba(16,185,129,0.10); animation-name: ws-ring-pulse-green, ws-icon-drop; }
.workshop-segment-slide[data-segment="pre_check"] .workshop-segment-icon-wrap { background: rgba(59,130,246,0.10); }
.workshop-segment-slide[data-segment="break"]     .workshop-segment-icon-wrap,
.workshop-segment-slide[data-segment="lunch"]     .workshop-segment-icon-wrap { background: rgba(245,158,11,0.12); }
.workshop-segment-slide[data-segment="close"]     .workshop-segment-icon-wrap { background: rgba(239,68,68,0.10); }

.workshop-segment-icon {
  font-size: 2.6rem;
  line-height: 1;
  animation: ws-icon-float 3.2s ease-in-out infinite;
  animation-delay: 0.7s;
  display: block;
}

.workshop-segment-meta {
  font-size: 0.92rem;
  color: #6b7280;
  margin: 0;
  letter-spacing: 0.03em;
  animation: ws-slide-in 0.4s cubic-bezier(0.22,1,0.36,1) both;
  animation-delay: 0.3s;
}

/* Scene-stage container reveal. Keyed on the LAYOUT class (.presentation-mode),
   not the terminology class (.mode-presentation), so a single-screen avatar
   briefing — body.presentation-mode.mode-briefing — also reveals the stage that
   holds the .media-composition. Real presentations carry both classes, so they
   are unaffected. */
body.mode-presentation .scene-stage,
body.presentation-mode .scene-stage {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #080c14;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 20px;
}

/* Full-bleed image inside stage */
body.mode-presentation .scene-stage .image-block {
  position: absolute;
  inset: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.mode-presentation .scene-stage #lessonImage {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
}

/* Full-bleed video inside stage */
body.mode-presentation .scene-stage .media-block {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

body.mode-presentation .scene-stage video {
  width: 100%;
  height: 100%;
  max-width: none;
  border-radius: 0;
  object-fit: contain;
  background: transparent;
}

/* ── Scene visual placeholder — retired in favour of stage collapse ─────── */
/* Kept in markup for JS compatibility; never rendered. */

.scene-visual-placeholder {
  display: none !important;
}

/* ── Narration bar — editorial audio guidance, not a media player ─────────── */
/* Extremely understated: no waveform, no glow, no podcast chrome.            */
/* Visible only in presentation mode. audioBlock native controls suppressed.  */

body.mode-presentation #audioBlock {
  display: none !important;
}

body.mode-presentation .narration-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
  opacity: 1;
  transition: opacity 220ms ease;
}

body.mode-presentation .narration-bar:hover {
  opacity: 1;
}

body.mode-presentation .narration-play-btn {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 0 2px; /* optical centre for triangle */
  cursor: pointer;
  letter-spacing: 0;
  transition: border-color 160ms ease, background 160ms ease;
}

body.mode-presentation .narration-play-btn::before {
  content: "▶";
  font-size: 13px;
}

body.mode-presentation .narration-play-btn.is-playing::before {
  content: "⏸";
  font-size: 14px;
  padding-left: 0;
}

body.mode-presentation .narration-play-btn:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.18);
}

body.mode-presentation .narration-bar-track {
  flex: 1;
  height: 3px;
  background: rgba(255, 255, 255, 0.2);
  position: relative;
  border-radius: 2px;
  cursor: pointer;
  /* Expand hit area vertically so it's easy to grab */
  padding: 10px 0;
  margin: -10px 0;
  box-sizing: content-box;
  transition: height 0.15s ease;
}

body.mode-presentation .narration-bar-track:hover,
body.mode-presentation .narration-bar-track.is-scrubbing {
  height: 5px;
}

body.mode-presentation .narration-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: var(--slide-accent, #fff);
  border-radius: 2px;
  transition: width 0.25s linear, background 1s ease;
  pointer-events: none;
}

/* Scrub thumb — appears on hover / drag */
body.mode-presentation .narration-bar-fill::after {
  content: "";
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%) scale(0);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s ease;
  pointer-events: none;
}

body.mode-presentation .narration-bar-track:hover .narration-bar-fill::after,
body.mode-presentation .narration-bar-track.is-scrubbing .narration-bar-fill::after {
  transform: translateY(-50%) scale(1);
}

/* Kill the smooth transition while actively scrubbing for instant feedback */
body.mode-presentation .narration-bar-track.is-scrubbing .narration-bar-fill {
  transition: none;
}

body.mode-presentation .narration-bar-label {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
}

/* No audio source — play button inert, no pointer event */
body.mode-presentation .narration-bar.narration-no-audio .narration-play-btn {
  opacity: 0.2;
  cursor: default;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  body.mode-presentation .narration-bar {
    transition: none;
  }
  body.mode-presentation .narration-bar-fill {
    transition: none;
  }
}

/* ── Avatar region — overlay portrait inside scene stage ────────────────── */
/* Default: hidden. Absolute-positioned over the bottom-left of the stage.   */
/* Never a layout column — the stage is the composition frame.               */

body.mode-presentation .presenter-region {
  position: absolute;
  z-index: 3;
  bottom: 20px;
  left: 20px;
  display: none;
}

/* side_panel (now: overlay portrait anchored to stage bottom-left) */
body.mode-presentation .presenter-region.avatar-side-panel {
  display: block;
  width: 168px;
}

/* Presenter avatar video — muted, supportive, no controls chrome.           */
/* Floats over visual content; subtle shadow grounds it in the scene.        */
body.mode-presentation .presenter-region .presenter-video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
  object-fit: cover;
  background: transparent;
}

/* Presenter-only state: no background visual, center the presenter portrait */
body.mode-presentation .scene-stage.presenter-only .presenter-region.avatar-side-panel {
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
  width: 240px;
}

/* Override old side-panel flex layout — content panel is now always block   */
body.mode-presentation #lessonContentPanel[data-avatar-mode="side_panel"] {
  display: block;
  gap: 0;
}

/* full_screen: presenter video fills the entire stage; slide visual is behind */
body.mode-presentation .scene-stage.avatar-full-screen {
  background: #000;
}

body.mode-presentation .presenter-video--full-screen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 4;
}

/* Suppress the slide image/video when presenter is full-screen */
body.mode-presentation .scene-stage.avatar-full-screen .visual-panel,
body.mode-presentation .scene-stage.avatar-full-screen #imageBlock,
body.mode-presentation .scene-stage.avatar-full-screen #videoBlock {
  opacity: 0.15;
  pointer-events: none;
}

/* ── Scene opacity transition ─────────────────────────────────────────────── */
/* Opacity fade only — no translate, no scale. Institutional, not consumer.  */

body.mode-presentation .lesson-card.scene-entering {
  animation: sceneEnter 0.38s ease forwards;
}

@keyframes sceneEnter {
  from { opacity: 0; transform: scale(0.997); }
  to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  body.mode-presentation .lesson-card.scene-entering {
    animation: none !important;
  }
}

/* ── Visual emphasis hooks ───────────────────────────────────────────────── */
/* Full-width image treatment when scene has visual_assets.                  */
/* Art direction note shown as ultra-muted ::after — production reference.   */

body.mode-presentation .scene-has-visual img {
  display: block;
  width: 100%;
  border-radius: 4px;
  margin: 1.5rem 0;
}

body.mode-presentation #lessonBody[data-visual-direction]::after {
  content: attr(data-visual-direction);
  display: block;
  margin-top: 2.5rem;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.16);
  font-style: normal;
}

.theme-dark .course-header,
.theme-dark .lesson-card,
.theme-dark .sidebar,
.theme-dark .assessment-question,
.theme-dark .scenario-step-card,
.theme-dark .scenario-complete {
  background: var(--card);
  color: var(--text);
  border-color: var(--line);
}

@media (max-width: 900px) {
  .course-layout {
    grid-template-columns: 1fr;
  }

  .course-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .header-right {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }
}

/* =========================================
   PASS 20 — LEARNER INTERACTION POLISH
   Lesson header settle, completion entrance,
   sidebar dot transitions, scroll-reset pacing.
========================================= */

/* ── Lesson header area: subtle settle on navigation ── */
.lesson-top.is-refreshing,
#narrationBar.is-refreshing {
  animation: lessonTopSettle 380ms ease-out forwards;
}

@keyframes lessonTopSettle {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Completion card: document-like entrance ── */
.course-completion-card.is-entering {
  animation: completionEnter 280ms ease-out forwards;
}

@keyframes completionEnter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Sidebar nav dots: smooth colour transition ── */
.lesson-item::before {
  transition: background 200ms ease, border-color 200ms ease, box-shadow 220ms ease;
}

/* ── Respect reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .lesson-top.is-refreshing,
  .course-completion-card.is-entering {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .lesson-item::before {
    transition: none !important;
  }
}

/* ── Context hint — light theme (learner player) ──────────── */
.context-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px 9px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin-top: 12px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 240ms ease, transform 240ms ease;
}
.context-hint.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.context-hint.is-hiding {
  opacity: 0;
  transform: translateY(2px);
  pointer-events: none;
}
.context-hint-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='8' cy='8' r='6.5' stroke='%2364748b' stroke-width='1.25'/%3E%3Cpath d='M8 7v4M8 5.5v.5' stroke='%2364748b' stroke-width='1.25' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.context-hint-text {
  flex: 1;
  font-size: 11.5px;
  font-weight: 450;
  color: #94a3b8;
  line-height: 1.45;
}
.context-hint-dismiss {
  appearance: none;
  background: none;
  border: none;
  padding: 2px 4px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  color: #cbd5e1;
  transition: color 140ms ease;
  border-radius: 4px;
}
.context-hint-dismiss:hover {
  color: #94a3b8;
}
@media (prefers-reduced-motion: reduce) {
  .context-hint {
    transition: opacity 120ms ease !important;
    transform: none !important;
  }
}


/* =========================
   OPERATIONAL SUMMARY
========================= */

.operational-summary {
  margin-top: 20px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #ffffff;
  overflow: hidden;
}

.operational-summary-inner {
  padding: 28px;
}

.operational-summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.operational-summary-header .eyebrow {
  margin: 0;
}

.operational-profile-tag {
  padding: 5px 12px;
  border-radius: 999px;
  background: #f1f5f9;
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.operational-summary-text {
  color: var(--text);
  font-size: 15px;
  line-height: 1.72;
  margin: 0 0 22px;
  max-width: 680px;
}

.operational-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.operational-column {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f8fafc;
}

.operational-column-label {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.operational-list {
  margin: 0;
  padding: 0 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.operational-list li {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
}

@media (max-width: 700px) {
  .operational-columns {
    grid-template-columns: 1fr;
  }
}

.theme-dark .operational-summary {
  background: var(--card);
  border-color: var(--line);
}

.theme-dark .operational-column {
  background: #0f172a;
  border-color: var(--line);
}

.theme-dark .operational-profile-tag {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--line);
  color: var(--text);
}

/* ── Presentation-mode layout composition ─────────────────────────────────── */
/* Applied when body.presentation-mode is set at init (is_presentation=true). */
/* All rules scoped to .presentation-mode — zero bleed into training-mode.    */

body.presentation-mode .scene-stage {
  aspect-ratio: unset;
  min-height: unset;
  background: transparent;
  overflow: visible;
  animation: none;
}

body.presentation-mode .course-layout {
  max-width: 1400px;
  margin: 0 auto;
}

body.presentation-mode .stage-shell {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  overflow: hidden;
  max-width: 1100px;
  margin: 0 auto;
}

@keyframes stageIn {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes stageSettle {
  from { opacity: 0; }
  to   { opacity: 1; }
}

body.presentation-mode .stage-shell.stage-settling {
  animation: stageSettle 0.4s ease forwards;
}

body.presentation-mode .media-composition {
  display: flex;
  align-items: stretch;
  min-height: 520px;
  max-height: 760px;
}

body.presentation-mode .media-composition.has-visual {
  flex-direction: row-reverse;
}

/* Presenter-left layout: presenter (40%) on left, slide (60%) on right */
body.presentation-mode .media-composition.has-visual.has-presenter {
  flex-direction: row;
}

body.presentation-mode .media-composition.no-visual {
  justify-content: center;
  align-items: center;
  min-height: 320px;
}

body.presentation-mode .visual-panel {
  position: relative;
  flex: 0 0 60%;
  overflow: hidden;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  max-height: 760px;
  background: #111;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.presentation-mode .visual-panel img:not(.slide-logo) {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  background: #f8f9fa;
}

body.presentation-mode .visual-panel .chart-container {
  width: 100%;
  height: 100%;
  min-height: 340px;
  background: #0b0e14;
  padding: 16px 10px 10px;
  box-sizing: border-box;
}

/* ── Visual cue stage & layers ─────────────────────────────────────────── */
body.presentation-mode .visual-stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body.presentation-mode .visual-layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* transition handles both slide-in and fade */
  transition: transform 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity  0.55s ease;
}

/* Hidden state — invisible, non-interactive */
body.presentation-mode .visual-layer.layer--hidden {
  opacity: 0;
  pointer-events: none;
}

/* Off-screen-right starting position (applied before layer--visible) */
body.presentation-mode .visual-layer.layer--slide-from-right {
  transform: translateX(105%);
  opacity: 0;
}

/* Off-screen-left starting position */
body.presentation-mode .visual-layer.layer--slide-from-left {
  transform: translateX(-105%);
  opacity: 0;
}

/* Visible state — overrides hidden & slide origins */
body.presentation-mode .visual-layer.layer--visible {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

/* Chart layer fills the whole layer */
body.presentation-mode .visual-layer[data-layer="chart"] .chart-container {
  width: 100%;
  height: 100%;
  min-height: 300px;
  background: #0b0e14;
  padding: 16px 10px 10px;
  box-sizing: border-box;
}

/* Logo layer — centred branding */
body.presentation-mode .visual-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #0b0e14;
}

body.presentation-mode .visual-logo img {
  max-width: 70%;
  max-height: 70%;
  object-fit: contain;
}

body.presentation-mode .visual-logo-text {
  font-size: 22px;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  text-align: center;
  padding: 24px;
  font-family: 'Inter','Segoe UI',system-ui,sans-serif;
  letter-spacing: -0.02em;
}

/* Image layer */
body.presentation-mode .visual-layer[data-layer="image"] img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

body.presentation-mode .presenter-panel {
  flex: 0 0 40%;
  overflow: hidden;
  background: #0b0e14;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

body.presentation-mode .media-composition.has-visual.no-presenter {
  max-width: 960px;
  margin: 0 auto;
}

body.presentation-mode .media-composition.has-visual.no-presenter .visual-panel {
  flex: 0 0 100% !important;
  width: 100% !important;
}

body.presentation-mode .presenter-panel.centred {
  flex: 0 0 100%;
  max-width: 640px;
  border-radius: var(--radius-lg);
}

body.presentation-mode .presenter-panel video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

body.presentation-mode .presenter-panel {
  position: relative;
}

body.presentation-mode .presenter-nameplate {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 16px 14px;
  background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0) 100%);
  display: flex;
  flex-direction: column;
  gap: 2px;
  pointer-events: none;
}

body.presentation-mode .presenter-nameplate__name {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

body.presentation-mode .presenter-nameplate__title {
  font-size: 11px;
  font-weight: 400;
  color: rgba(255,255,255,0.75);
  line-height: 1.3;
}

body.presentation-mode .visual-empty-atmosphere {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 320px;
  background: var(--surface-raised);
}

@media (max-width: 768px) {
  body.presentation-mode .media-composition.has-visual {
    /* On mobile stack: slide image on top, avatar below */
    flex-direction: column-reverse;
    max-height: unset;
  }
  body.presentation-mode .visual-panel,
  body.presentation-mode .presenter-panel {
    flex: 0 0 auto;
    width: 100%;
    height: 240px;
    border-radius: 0;
  }
  body.presentation-mode .visual-panel {
    height: 300px;
  }
}

/* =============================================================================
   CUE AUTHORING UI
   Timeline pin editor overlaid on the narration scrubber.
   Activated by the ✏ button that appears when visual_cues are present.
============================================================================= */

/* ── Edit toggle button ─────────────────────────────────────────────────── */

body.mode-presentation .cue-edit-toggle {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
  margin-left: 4px;
}

body.mode-presentation .cue-edit-toggle:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}

body.mode-presentation .cue-edit-toggle.is-active {
  background: rgba(245, 158, 11, 0.25);
  border-color: rgba(245, 158, 11, 0.7);
  color: #fbbf24;
}

/* ── Authoring toolbar (appears above narration bar) ────────────────────── */

body.mode-presentation .cue-authoring-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 10px;
  margin-bottom: 10px;
  animation: cue-toolbar-in 180ms ease;
}

@keyframes cue-toolbar-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

body.mode-presentation .cue-toolbar-btn {
  padding: 5px 12px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 140ms ease;
}

body.mode-presentation .cue-toolbar-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  transform: none;
}

body.mode-presentation .cue-toolbar-copy {
  margin-left: 4px;
}

body.mode-presentation .cue-toolbar-count {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.45);
}

/* ── Track overflow fix in authoring mode ───────────────────────────────── */

body.mode-presentation .narration-bar--authoring #narrationTrack {
  overflow: visible;
}

/* ── Cue pins ────────────────────────────────────────────────────────────── */

body.mode-presentation .cue-pin {
  position: absolute;
  bottom: calc(100% + 4px);   /* float above the track line */
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: grab;
  user-select: none;
  z-index: 20;
}

body.mode-presentation .cue-pin:active,
body.mode-presentation .cue-pin.is-dragging {
  cursor: grabbing;
  z-index: 30;
}

body.mode-presentation .cue-pin.is-dragging .cue-pin-head {
  transform: scale(1.08);
}

/* Pin colour tokens */
body.mode-presentation .cue-pin.cue-type-logo    { --pin-clr: #7c3aed; }
body.mode-presentation .cue-pin.cue-type-show     { --pin-clr: #2563eb; }
body.mode-presentation .cue-pin.cue-type-animate  { --pin-clr: #d97706; }
body.mode-presentation .cue-pin.cue-type-hide     { --pin-clr: #475569; }

/* Pin head (label chip) */
body.mode-presentation .cue-pin-head {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--pin-clr);
  border-radius: 5px;
  padding: 3px 7px 3px 6px;
  white-space: nowrap;
  transition: transform 120ms ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

body.mode-presentation .cue-pin-label-text {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.03em;
}

body.mode-presentation .cue-pin-time {
  font-size: 9px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  min-width: 22px;
  text-align: right;
}

body.mode-presentation .cue-pin-delete {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  line-height: 1;
  padding: 0 0 0 2px;
  cursor: pointer;
  display: none; /* revealed on hover */
  transition: color 100ms ease;
}

body.mode-presentation .cue-pin:hover .cue-pin-delete {
  display: inline;
  transform: none;
}

body.mode-presentation .cue-pin-delete:hover {
  color: #fff;
  background: transparent;
  transform: none;
}

/* Pin stem */
body.mode-presentation .cue-pin-line {
  width: 2px;
  height: 14px;
  background: var(--pin-clr);
  opacity: 0.7;
  border-radius: 1px;
}

/* No-audio scale note */
body.mode-presentation .cue-pin-no-audio-note {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
  white-space: nowrap;
  pointer-events: none;
}

/* Narration fallback — shown for image-heavy PDFs with no extractable text blocks */
.lesson-narration-fallback {
  color: rgba(214, 224, 245, 0.65);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.7;
  max-width: 680px;
}

/* ── Slide number overlay ────────────────────────────────────────────────── */
/* ── Caption overlay — custom rendered WebVTT cues over the slide ──────── */
.caption-overlay {
  display: none; /* shown via JS when CC is active */
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  max-width: 80%;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
  padding: 5px 14px;
  border-radius: 4px;
  text-align: center;
  pointer-events: none;
  z-index: 20;
  backdrop-filter: blur(4px);
  white-space: pre-wrap;
}

/* In presentation mode the captionOverlay stays in sceneStage (re-parenting
   breaks on scene change).  Anchor it to the visual (right) panel area using
   left/right offsets from sceneStage — presenter is 40%, visual is 60%. */
body.mode-presentation .caption-overlay {
  left: 41%;
  right: 2%;
  transform: none;
  max-width: none;
  text-align: center;
  bottom: 6%;
}

/* Workspace logo — top-right of .visual-panel (injected via JS, not inside slide canvas) */
.slide-logo {
  position: absolute;
  top: 10px;
  right: 12px;
  max-height: 32px;
  max-width: 110px;
  object-fit: contain;
  pointer-events: none;
  z-index: 30;
}

.slide-number {
  display: none; /* hidden in course mode */
}

body.mode-presentation .slide-number {
  display: block;
  position: absolute;
  bottom: 10px;
  right: 14px;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.04em;
  pointer-events: none;
  z-index: 10;
  user-select: none;
}

/* ── Present button ──────────────────────────────────────────────────────── */
.present-btn {
  display: none; /* hidden in course mode */
}

body.mode-presentation .present-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

body.mode-presentation .present-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.24);
}

body.mode-presentation .present-btn svg {
  flex-shrink: 0;
  opacity: 0.7;
}

/* ── Full-screen present mode ────────────────────────────────────────────── */
/* body.is-presenting — hides all chrome, shows only stage + narration bar   */

body.is-presenting .course-header {
  display: none;
}

body.is-presenting .sidebar {
  display: none;
}

body.is-presenting .course-layout {
  padding: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  display: block !important;
  min-height: 100vh !important;
}

body.is-presenting .lesson-card {
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
  background: #080c14;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

body.is-presenting .lesson-top,
body.is-presenting .course-progress-meta,
body.is-presenting .progress-track,
body.is-presenting #lessonContentPanel {
  display: none;
}

body.is-presenting .scene-stage {
  border-radius: 0;
  margin: 0 !important;
  aspect-ratio: 16 / 9;
  max-height: calc(100vh - 56px) !important; /* leave room for narration bar */
  width: 100% !important;
  max-width: 100% !important;
}

body.is-presenting .narration-bar {
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-bottom: none;
}

/* Exit-present button shown inside fullscreen */
body.is-presenting .present-btn {
  position: fixed;
  top: 12px;
  right: 16px;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.55);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Prev/next nav still accessible in present mode */
body.is-presenting .nav-row {
  position: fixed;
  bottom: 56px;
  right: 16px;
  z-index: 9999;
  display: flex;
  gap: 8px;
  background: rgba(0, 0, 0, 0.5);
  padding: 6px 8px;
  border-radius: 8px;
}

/* ── Slide view toggle (elements / image mode) ───────────────────────────── */
.slide-view-toggle {
  display: none;
}

body.mode-presentation .slide-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

body.mode-presentation .slide-view-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
}

body.mode-presentation .slide-view-toggle.is-active {
  background: rgba(99, 220, 180, 0.18);
  border-color: rgba(99, 220, 180, 0.45);
  color: #63dcb4;
}

body.is-presenting .slide-view-toggle {
  position: fixed;
  top: 12px;
  left: 160px;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.55);
  border-color: rgba(255, 255, 255, 0.2);
}

/* ── Speaker notes toggle (inside narration bar) ─────────────────────────── */
/* ── Autoplay toggle button ──────────────────────────────────────────────── */
.autoplay-toggle {
  display: none; /* shown via mode-presentation below */
}

body.mode-presentation .autoplay-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  flex-shrink: 0;
}

body.mode-presentation .autoplay-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}

body.mode-presentation .autoplay-toggle.is-active {
  background: rgba(99, 220, 180, 0.18);
  border-color: rgba(99, 220, 180, 0.45);
  color: rgb(99, 220, 180);
}

body.mode-presentation .autoplay-toggle svg {
  opacity: 0.7;
  flex-shrink: 0;
}

body.mode-presentation .autoplay-toggle.is-active svg {
  opacity: 1;
}

/* ── CC (captions) toggle ────────────────────────────────────────────────── */
.cc-toggle {
  display: none; /* hidden in course mode; shown in presentation mode below */
}

body.mode-presentation .cc-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  flex-shrink: 0;
}

body.mode-presentation .cc-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}

body.mode-presentation .cc-toggle.is-active {
  background: rgba(99, 220, 180, 0.18);
  border-color: rgba(99, 220, 180, 0.45);
  color: rgb(99, 220, 180);
}

/* ── Speaker notes toggle ────────────────────────────────────────────────── */
.speaker-notes-toggle {
  display: none; /* hidden in course mode */
}

body.mode-presentation .speaker-notes-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 6px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}

body.mode-presentation .speaker-notes-toggle:hover,
body.mode-presentation .speaker-notes-toggle.is-active {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
}

body.mode-presentation .speaker-notes-toggle svg {
  opacity: 0.7;
  flex-shrink: 0;
}

/* ── Speaker notes panel ─────────────────────────────────────────────────── */
.speaker-notes {
  display: none; /* hidden in course mode */
}

body.mode-presentation .speaker-notes {
  display: none; /* shown only when .is-open */
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  margin-top: 10px;
}

body.mode-presentation .speaker-notes.is-open {
  display: block;
}

.speaker-notes__text {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(214, 224, 245, 0.8);
  margin: 0 0 0.8em;
}

.speaker-notes__text:last-child {
  margin-bottom: 0;
}

.speaker-notes__empty {
  font-size: 13px;
  color: rgba(214, 224, 245, 0.35);
  font-style: italic;
  margin: 0;
}

/* In fullscreen present mode: notes float as a bottom drawer */
body.is-presenting .speaker-notes.is-open {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9998;
  max-height: 30vh;
  overflow-y: auto;
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-bottom: none;
  background: rgba(8, 12, 20, 0.92);
  backdrop-filter: blur(12px);
  margin: 0;
  padding: 14px 20px 20px;
}

body.is-presenting .autoplay-toggle {
  position: fixed;
  top: 12px;
  left: 100px;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.55);
  border-color: rgba(255, 255, 255, 0.2);
}

body.is-presenting .autoplay-toggle.is-active {
  background: rgba(99, 220, 180, 0.25);
  border-color: rgba(99, 220, 180, 0.5);
}

body.is-presenting .speaker-notes-toggle {
  position: fixed;
  top: 12px;
  left: 16px;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.55);
  border-color: rgba(255, 255, 255, 0.2);
}

/* ─────────────────────────────────────────────────────────────────
   Presentation element layer renderer
   CSS-positioned text/asset elements with click-to-reveal cue system.
   Mirrors static/css/modules/56-presentation-elements.css.
───────────────────────────────────────────────────────────────────── */

.slide-canvas {
  --slide-accent: #14b8a6;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  overflow: hidden;
  background: #0e0e14;
  border-radius: 4px;
  container-type: size;
}

body.is-presenting .slide-canvas {
  border-radius: 0;
}

.slide-bg {
  position: absolute;
  inset: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.slide-canvas[data-mode="image"] .slide-bg {
  opacity: 1;
}

/* Elements mode composes the slide's own text, so the lesson scene image must
   NOT show behind it. That image is a training-course device — the pipeline
   generates one per lesson in every mode — and used as a full-bleed backdrop
   it put white body copy straight over a photograph of a meeting, with no
   scrim anywhere in this file to carry it. A scrim was the alternative; a
   presentation slide reads better as type on the dark canvas, and the
   presenter panel beside it already supplies the picture. The image is still
   loaded and tokenised, so restoring it is this one declaration. */
.slide-canvas[data-mode="elements"] .slide-bg {
  opacity: 0;
}

/* ── Ken Burns — JS-driven transform zoom (narration-over-slides mode) ────── */
/* The CSS keyframe animation has been replaced with JS-driven transforms in
   _kenBurnsStart() / _kenBurnsStop(). The transition property here defines
   the easing curve; JS sets the actual transform values each scene. */
.slide-bg {
  will-change: transform;
}

/* ── Mask-based progressive reveal system ────────────────────────────────────
   .slide-reveal-masks contains absolutely-positioned panels that cover visual
   group regions on a flattened PDF slide image. Masks are lifted (.lifted) one
   at a time in reveal_plan order, creating a genuine build effect.
   backdrop-filter blurs + darkens the image beneath each mask so unrevealed
   content is unreadable. The solid rgba fallback covers browsers that don't
   support backdrop-filter. */

.slide-reveal-masks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;  /* above slide-bg and text stack */
}

.slide-reveal-mask {
  position: absolute;
  /* Solid background covers content when backdrop-filter is unsupported */
  background: rgba(18, 20, 28, 0.88);
  /* Frosted-glass blur over the background image region */
  backdrop-filter: blur(16px) brightness(0.18);
  -webkit-backdrop-filter: blur(16px) brightness(0.18);
  border-radius: 3px;
  pointer-events: none;
  /* Transition for both lift (reveal) and hide (reset) */
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Lifted = revealed: fade mask out so background content shows through */
.slide-reveal-mask.lifted {
  opacity: 0;
  pointer-events: none;
}

/* When masks are present, dim the background slightly so unrevealed
   regions (outside any mask bbox) are softer — reduces visual noise */
.slide-canvas:has(.slide-reveal-mask:not(.lifted)) .slide-bg {
  filter: brightness(0.88);
  transition: filter 0.4s ease;
}
.slide-canvas:not(:has(.slide-reveal-mask:not(.lifted))) .slide-bg {
  filter: brightness(1);
  transition: filter 0.5s ease;
}

/* Fade + slide-up entrance for image-mode visual assets in narration-only */
.slide-canvas[data-mode="image"] .slide-asset.revealed {
  animation: slideAssetIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes slideAssetIn {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

.slide-element {
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
  transform: translateY(8px);
  box-sizing: border-box;
}

.slide-element.revealed {
  opacity: 1;
  transform: translateY(0);
}

.slide-canvas[data-mode="image"] .slide-element {
  display: none;
}

/* Hide the text stack entirely in image mode — background image IS the content */
.slide-canvas[data-mode="image"] .slide-content-stack {
  display: none;
}

/* ── Presentation Intelligence — reveal animations ──────────────────────────
   Each .anim-* class drives a specific entrance animation from reveal_plan.
   Duration is overridden by JS (el.style.animationDuration = step.duration_s + 's').
   --anim-speed is set by data-energy on .slide-canvas to scale all durations.      */

.slide-canvas[data-energy="low"]    { --anim-speed: 1.6; }
.slide-canvas[data-energy="medium"] { --anim-speed: 1.0; }
.slide-canvas[data-energy="high"]   { --anim-speed: 0.65; }

/* Suppress the default transition when a keyframe animation is in play */
.slide-element[class*="anim-"] {
  transition: none;
}

/* ── fade_in ── gentle opacity entrance (default/fallback) */
@keyframes reveal-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; transform: none; }
}
.slide-element.anim-fade-in.revealed {
  animation: reveal-fade-in calc(0.5s * var(--anim-speed, 1)) ease both;
}

/* ── slide_up ── lift from below with opacity */
@keyframes reveal-slide-up {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
.slide-element.anim-slide-up.revealed {
  animation: reveal-slide-up calc(0.55s * var(--anim-speed, 1)) cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── staggered_fade_left_to_right ── slides in from the left */
@keyframes reveal-fade-from-left {
  from { opacity: 0; transform: translateX(-18px); }
  to   { opacity: 1; transform: translateX(0); }
}
.slide-element.anim-staggered-fade-left-to-right.revealed {
  animation: reveal-fade-from-left calc(0.6s * var(--anim-speed, 1)) cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── staggered_slide_up ── quick slide-up for list items */
@keyframes reveal-staggered-up {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.slide-element.anim-staggered-slide-up.revealed {
  animation: reveal-staggered-up calc(0.45s * var(--anim-speed, 1)) cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── chart_build ── grows up from baseline (chart container) */
@keyframes reveal-chart-build {
  from { opacity: 0; transform: scaleY(0.1) translateY(12%); }
  to   { opacity: 1; transform: scaleY(1) translateY(0); }
}
.slide-element.anim-chart-build.revealed {
  transform-origin: bottom center;
  animation: reveal-chart-build calc(1.2s * var(--anim-speed, 1)) cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ── highlight_pulse ── pops in with a brief scale bounce */
@keyframes reveal-highlight-pulse {
  0%   { opacity: 0; transform: scale(0.88); }
  60%  { opacity: 1; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}
.slide-element.anim-highlight-pulse.revealed {
  animation: reveal-highlight-pulse calc(0.7s * var(--anim-speed, 1)) cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── dim_others ── the highlighted element fades in; canvas-level class dims siblings */
.slide-canvas.has-dimming-active .slide-element.revealed:not(.anim-dim-others) {
  opacity: 0.28;
  filter: brightness(0.55) saturate(0.4);
  transition: opacity 0.35s ease, filter 0.35s ease;
}
.slide-element.anim-dim-others.revealed {
  animation: reveal-highlight-pulse calc(0.6s * var(--anim-speed, 1)) cubic-bezier(0.22, 1, 0.36, 1) both;
  position: relative;
  z-index: 2;
}

/* ── zoom_to_region ── subtle zoom-in scale from slightly smaller */
@keyframes reveal-zoom-in {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
.slide-element.anim-zoom-to-region.revealed {
  animation: reveal-zoom-in calc(0.65s * var(--anim-speed, 1)) cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── none ── instant appear, no motion */
.slide-element.anim-none.revealed {
  transition: none;
  animation: none;
  opacity: 1;
  transform: none;
}

/* Scene objects: visibility via CSS transition only.
 * No keyframes, no animation classes, no fill-mode.
 * Transition on the base rule fires when .revealed is added. */
.scene-obj {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 300ms ease, transform 300ms ease;
}

.scene-obj.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ── Presenter guidance in speaker notes ── */
.speaker-notes__guidance {
  font-size: 12px;
  line-height: 1.5;
  color: #94a3b8;
  background: rgba(20, 184, 166, 0.08);
  border-left: 2px solid #14b8a6;
  padding: 8px 12px;
  margin-bottom: 10px;
  border-radius: 0 4px 4px 0;
}
.speaker-notes__guidance strong {
  color: #14b8a6;
  font-weight: 600;
}

/* ── Narrative chip — arc position + role label ──────────────────────────────
   Absolute bottom-right of the slide canvas. Fades in on hover; hidden when
   presenting (body.is-presenting) so it doesn't appear on the big screen.     */
.slide-narrative-chip {
  position: absolute;
  bottom: 1.8cqh;
  right: 1.6cqw;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(0, 0, 0, 0.52);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.52);
  font-size: 1.35cqw;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.45cqh 0.95cqw;
  border-radius: 0.4cqw;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.slide-canvas:hover .slide-narrative-chip { opacity: 1; }
body.is-presenting .slide-narrative-chip  { display: none; }

.slide-narrative-chip__arc {
  color: rgba(20, 184, 166, 0.8);
}

/* ── primary_message tooltip on outline lesson items ─────────────────────────
   Appears to the right of the item on hover. Only in presentation mode where
   the sidebar is dark.                                                         */
body.mode-presentation .lesson-item[data-tip] {
  position: relative;
  overflow: visible;
}
body.mode-presentation .lesson-item[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: rgba(15, 23, 42, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.82);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  padding: 7px 11px;
  border-radius: 5px;
  white-space: normal;
  width: 200px;
  z-index: 200;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
body.mode-presentation .lesson-item[data-tip]:hover::after { opacity: 1; }

/* ── Callout overlay cards (narration-over-slides) ──────────────────────────
   Positioned absolutely on .slide-canvas; JS places them via left/top %.
   Two styles: "stat" (large number/percentage) and "phrase" (short text). */

.slide-callout {
  position: absolute;
  z-index: 30;
  transform: translateY(10px) scale(0.9);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  max-width: 28cqw;
}

.slide-callout.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.slide-callout__inner {
  display: block;
  border-radius: 0.6cqw;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-family: inherit;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.slide-callout--stat .slide-callout__inner {
  background: rgba(0, 0, 0, 0.72);
  color: var(--slide-accent, #14b8a6);
  border: 0.15cqw solid var(--slide-accent, #14b8a6);
  padding: 0.9cqh 1.4cqw;
  font-size: 4.5cqw;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 0 1.5cqw 0.3cqw color-mix(in srgb, var(--slide-accent, #14b8a6) 35%, transparent);
}

.slide-callout--phrase .slide-callout__inner {
  background: var(--slide-accent, #14b8a6);
  color: #fff;
  padding: 0.7cqh 1.2cqw;
  font-size: 2.4cqw;
  font-weight: 600;
  box-shadow: 0 0.4cqh 1.2cqw rgba(0,0,0,0.35);
}

/* ── Stack layout (elements mode) ── */
.slide-content-stack {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 0.5cqh 7cqw 4cqh;
  gap: 0;
  overflow-y: auto;
  scrollbar-width: none;
}
.slide-content-stack::-webkit-scrollbar { display: none; }

.slide-scene-title {
  font-size: 6.4cqh;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  padding-bottom: 2cqh;
  margin-bottom: 2.5cqh;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  flex-shrink: 0;
  opacity: 0.95;
}

.slide-text {
  font-family: inherit;
  color: #ffffff;
  line-height: 1.4;
  word-break: break-word;
  flex-shrink: 0;
}

.slide-text + .slide-text {
  margin-top: 1.6cqh;
}

.slide-text[data-role="heading"] {
  font-size: 5.6cqh;
  font-weight: 700;
}

.slide-text[data-role="body"] {
  font-size: 4.4cqh;
  font-weight: 400;
  color: rgba(255,255,255,0.88);
}


/* ── Presenter-weighted layout for text slides ──────────────────────────────
   Once the scene image stopped painting behind the text (see .slide-bg above),
   two things followed. The canvas no longer has an image to frame, so its
   16/9 aspect-ratio was only letterboxing type into the middle of the panel —
   it now fills the panel, which makes the copy LARGER (33px title against 24px)
   even as the panel gets narrower. And the presenter can take the greater share,
   which is what the composition is actually worth watching.

   The split is raised only above 1400px. Below that the panel gets narrow
   enough that the copy wraps into an overflow — measured 28px short at 1280 and
   160px at 1100 — and .slide-content-stack scrolls with a hidden scrollbar, so
   an overflow is silent. For the same reason the sizes below are min() of a
   height- and a width-derived unit: cqh alone ignores the wrap, because the
   canvas height is pinned by the composition's min-height and does not change
   when the panel narrows. Do NOT add justify-content:center to the stack —
   centring a flex column that overflows makes its top unreachable. */
@media (min-width: 1400px) {
  body.presentation-mode .media-composition.has-visual.has-presenter
    .presenter-panel { flex: 0 0 55%; }
  body.presentation-mode .media-composition.has-visual.has-presenter
    .visual-panel { flex: 0 0 45%; }
}

.slide-canvas[data-mode="elements"] {
  aspect-ratio: auto;
  height: 100%;
  width: 100%;
}

.slide-canvas[data-mode="elements"] .slide-content-stack {
  padding-top: 5cqh;
  padding-bottom: 5cqh;
}

.slide-canvas[data-mode="elements"] .slide-scene-title {
  font-size: min(6.4cqh, 7.4cqw);
}
.slide-canvas[data-mode="elements"] .slide-text[data-role="heading"] {
  font-size: min(5.6cqh, 6.6cqw);
}
.slide-canvas[data-mode="elements"] .slide-text[data-role="body"] {
  font-size: min(4.4cqh, 5.2cqw);
}
.slide-canvas[data-mode="elements"] .slide-text[data-role="callout"] {
  font-size: min(3.8cqh, 4.6cqw);
}

.slide-text[data-role="callout"] {
  font-size: 3.8cqh;
  font-weight: 400;
  color: rgba(255,255,255,0.75);
  font-style: italic;
}

.slide-text--list {
  display: flex;
  flex-direction: column;
  gap: 1.3cqh;
  font-size: 4.4cqh;
  white-space: normal;
  flex-shrink: 1;
}

.slide-text-item {
  position: relative;
  padding-left: 1.2em;
  line-height: 1.35;
  color: rgba(255,255,255,0.92);
}

.slide-text-item::before {
  content: '•';
  position: absolute;
  left: 0;
  color: rgba(99,179,237,0.9);
}

.slide-asset {
  object-fit: contain;
}

.slide-cue-pip-row {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  z-index: 10;
  pointer-events: none;
}

.slide-cue-pip {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.slide-cue-pip.active {
  background: rgba(255,255,255,0.85);
}

.slide-key-hint {
  position: absolute;
  bottom: 26px;
  right: 10px;
  font-size: 10px;
  color: rgba(255,255,255,0.35);
  pointer-events: none;
  user-select: none;
  letter-spacing: 0.02em;
}

/* ─────────────────────────────────────────────────────────────────
   Slide editor controls (visible only in /demo/ editor mode)
   .slide-editor-toggle  — render mode toggle button
   data-editor-mode="1"  — set on canvas when editor mode active
───────────────────────────────────────────────────────────────────── */

.slide-editor-toggle {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 20;
  padding: 4px 10px;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.15s ease, border-color 0.15s ease !important;
  font-size: 11px;
  font-family: inherit;
  font-weight: 500;
  color: rgba(255,255,255,0.9);
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 4px;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background 0.15s ease, border-color 0.15s ease;
  line-height: 1.4;
}

.slide-canvas:hover .slide-editor-toggle,
.slide-editor-toggle:hover {
  opacity: 1;
}

.slide-editor-toggle:hover {
  background: rgba(30,100,200,0.7);
  border-color: rgba(255,255,255,0.45);
}

.slide-editor-toggle:active {
  background: rgba(20,70,160,0.85);
}

/* Draggable elements: show grab cursor and a faint outline in editor mode */
.slide-canvas[data-editor-mode="1"] .slide-element {
  cursor: grab;
}

.slide-canvas[data-editor-mode="1"] .slide-element:hover {
  outline: 1px dashed rgba(255,255,255,0.35);
  outline-offset: 2px;
}

.slide-canvas[data-editor-mode="1"] .slide-element:active {
  cursor: grabbing;
}

/* ── Chart slide elements ─────────────────────────────────────────────────── */
.slide-chart-wrap {
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
  padding: 8px;
  box-sizing: border-box;
}
.slide-chart-wrap canvas {
  width: 100% !important;
  height: 100% !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ROUND-1 UI ENHANCEMENTS
   Learner experience: progress bar, status chip, sidebar bottom,
   presentation header progress, narration toolbar redesign.
═══════════════════════════════════════════════════════════════════════════ */

/* ── LESSON N OF N — teal mono eyebrow ─────────────────────────────────── */
.lesson-meta {
  color: var(--primary, #16c7b6);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-family: "IBM Plex Mono", "Courier New", monospace;
  margin: 0 0 10px;
}

/* ── IN PROGRESS status chip ────────────────────────────────────────────── */
.lesson-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  font-family: "IBM Plex Mono", "Courier New", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid rgba(22, 199, 182, 0.35);
  background: rgba(22, 199, 182, 0.10);
  color: var(--primary, #16c7b6);
  flex-shrink: 0;
}
.lesson-status-chip.is-complete {
  border-color: rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.10);
  color: #22c55e;
}
.lesson-status-dot { font-size: 10px; }

/* ── Sidebar progress bar ───────────────────────────────────────────────── */
.sidebar-progress-section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line, rgba(0,0,0,0.08));
}
.sidebar-progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
}
.sidebar-progress-eyebrow {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-family: "IBM Plex Mono", "Courier New", monospace;
  color: var(--muted, #64748b);
}
.sidebar-progress-pct {
  font-size: 11px;
  font-weight: 700;
  font-family: "IBM Plex Mono", "Courier New", monospace;
  color: var(--primary, #16c7b6);
}
.sidebar-progress-track {
  width: 100%;
  height: 4px;
  background: var(--line, rgba(0,0,0,0.08));
  border-radius: 999px;
  overflow: hidden;
}
.sidebar-progress-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--primary, #16c7b6), #06b6d4);
  border-radius: 999px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Sidebar bottom (workbook download) ─────────────────────────────────── */
.sidebar-bottom {
  display: none;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line, rgba(0,0,0,0.08));
}
.sidebar-workbook-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid rgba(22, 199, 182, 0.28);
  background: rgba(22, 199, 182, 0.07);
  color: var(--primary, #16c7b6);
  font-size: 11px;
  font-weight: 700;
  font-family: "IBM Plex Mono", "Courier New", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.sidebar-workbook-btn:hover {
  background: rgba(22, 199, 182, 0.14);
  border-color: rgba(22, 199, 182, 0.45);
}

/* Make sidebar a flex column so bottom sticks */
.sidebar {
  display: flex;
  flex-direction: column;
}
.lesson-list { flex: 1; }

/* ── Presentation header progress ──────────────────────────────────────── */
.pres-progress-header {
  display: none; /* shown via mode-presentation CSS below */
  align-items: center;
  gap: 10px;
  flex: 1;
  padding: 0 16px;
}
.pres-progress-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-family: "IBM Plex Mono", "Courier New", monospace;
  color: var(--muted, #64748b);
  white-space: nowrap;
}
.pres-progress-track {
  flex: 1;
  height: 3px;
  background: var(--line, rgba(0,0,0,0.08));
  border-radius: 999px;
  overflow: hidden;
}
.pres-progress-fill {
  width: 0%;
  height: 100%;
  background: var(--primary, #16c7b6);
  border-radius: 999px;
  transition: width 0.4s ease;
}
.pres-progress-count {
  font-size: 11px;
  font-weight: 700;
  font-family: "IBM Plex Mono", "Courier New", monospace;
  color: var(--text, #1e293b);
  white-space: nowrap;
}

body.mode-presentation .pres-progress-header {
  display: flex;
}

/* ── Narration bar toolbar redesign ─────────────────────────────────────── */
body.mode-presentation .narration-bar {
  display: flex !important;
  align-items: center;
  gap: 0;
  padding: 0 12px;
}

/* Left cluster: play button + track + label */
.narration-bar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

/* Right cluster: toolbar action buttons */
.narration-bar-right {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.narration-bar-divider {
  width: 1px;
  height: 18px;
  background: var(--line, rgba(0,0,0,0.12));
  margin: 0 6px;
}

/* Generic toolbar button */
.narration-toolbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--muted, #64748b);
  font-size: 10px;
  font-weight: 700;
  font-family: "IBM Plex Mono", "Courier New", monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.narration-toolbar-btn:hover {
  background: rgba(0,0,0,0.05);
  color: var(--text, #1e293b);
}
.narration-toolbar-btn.is-active,
.narration-toolbar-btn[aria-pressed="true"] {
  background: rgba(22, 199, 182, 0.12);
  color: var(--primary, #16c7b6);
  border: 1px solid rgba(22, 199, 182, 0.25);
}

/* Dark theme overrides */
.theme-dark .narration-toolbar-btn:hover {
  background: rgba(255,255,255,0.07);
  color: #f1f5f9;
}
.theme-dark .narration-toolbar-btn.is-active,
.theme-dark .narration-toolbar-btn[aria-pressed="true"] {
  background: rgba(22, 199, 182, 0.15);
  color: var(--primary, #16c7b6);
}

.theme-dark .sidebar-progress-track { background: rgba(255,255,255,0.08); }
.theme-dark .pres-progress-track { background: rgba(255,255,255,0.08); }
.theme-dark .sidebar-bottom { border-top-color: rgba(255,255,255,0.08); }
.theme-dark .sidebar-progress-section { border-top-color: rgba(255,255,255,0.08); }
.theme-dark .narration-bar-divider { background: rgba(255,255,255,0.12); }
.theme-dark .pres-progress-count { color: rgba(255,255,255,0.85); }

/* Right panel — notes & resources */
.lesson-resources-panel {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.resources-card {
  background: var(--card, #fff);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 12px;
  padding: 18px;
}

.resources-card-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted, #64748b);
  margin: 0 0 12px;
}

.notes-textarea {
  width: 100%;
  min-height: 120px;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.09);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--text, #172033);
  resize: vertical;
  font-family: inherit;
  line-height: 1.5;
  box-sizing: border-box;
}

.notes-textarea::placeholder { color: var(--muted, #64748b); opacity: 0.55; }
.notes-textarea:focus { outline: 2px solid var(--accent, #16c7b6); outline-offset: 0; border-color: transparent; }

.resources-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.resources-list li a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--accent, #16c7b6);
  text-decoration: none;
  font-weight: 500;
}

.resources-list li a:hover { text-decoration: underline; }

.resources-list li a svg { flex-shrink: 0; opacity: 0.7; }

.progress-summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.progress-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--muted, #64748b);
}

.progress-summary-row strong {
  font-weight: 600;
  color: var(--text, #172033);
}

.progress-summary-bar {
  height: 4px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 4px;
}

.progress-summary-fill {
  height: 100%;
  background: var(--accent, #16c7b6);
  border-radius: 4px;
  transition: width 0.4s ease;
  width: 0%;
}

.theme-dark .resources-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

.theme-dark .notes-textarea {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(214, 224, 245, 0.9);
}

.theme-dark .progress-summary-bar { background: rgba(255, 255, 255, 0.08); }
.theme-dark .progress-summary-row strong { color: rgba(214, 224, 245, 0.9); }


/* ── Semantic Scene Objects — Phase 1 ──────────────────────────────────────
   Three priority patterns: three_column_argument, people_team, case_study.
   The PDF/PPTX is reference material. These components ARE the slide.        */

/* ── Canvas base ─────────────────────────────────────────────────────────── */
.slide-canvas--scene {
  background: #0e1829;
  display: flex;
  flex-direction: column;
  container-type: size;
  container-name: scene-canvas;
  position: relative;
}

/* Reference background — slide image at low opacity so charts/brand imagery
   remain visible as context behind the semantic component layer. Not a mask. */
.scene-obj-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
}

.scene-layout {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.8cqh;
  padding: 4cqh 5cqw 4cqh 5cqw;
  overflow: hidden;
  min-height: 0;
}

/* ── Absolute positioning layer (bbox_normalised objects) ─────────────────
   Positioned inset:0 so percentage left/top/width/height on children are
   relative to the full canvas area. pointer-events:none on the layer so
   it never blocks interaction on the flow layout beneath it.               */
.scene-abs-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
}

/* Each bbox-placed object is absolutely positioned; pointer-events restored. */
.scene-obj--abs {
  position: absolute;
  box-sizing: border-box;
  pointer-events: auto;
  overflow: visible;
}

/* Crop images fill the bbox height when the container has an explicit height.
   Chart and illustration crops are flex columns so the title takes auto
   height and the image fills the remainder.                                 */
.scene-obj--abs.scene-obj--chart-image-crop,
.scene-obj--abs.scene-obj--illustration-crop {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.scene-obj--abs.scene-obj--chart-image-crop .so-crop__img,
.scene-obj--abs.scene-obj--illustration-crop .so-crop__img {
  flex: 1;
  width: 100%;
  min-height: 0;
}

/* Photo crops: width drives the circle (aspect-ratio:1/1 on .so-crop__img--photo);
   name/role labels overflow below — overflow:visible on the container allows it. */
.scene-obj--abs.scene-obj--photo-crop {
  overflow: visible;
}

/* ── Base scene object ────────────────────────────────────────────────────── */
.scene-obj {
  box-sizing: border-box;
}

/* slide_title ───────────────────────────────────────────────────────────── */
.scene-obj--slide-title {
  font-size: 4.2cqw;
  font-weight: 700;
  line-height: 1.2;
  color: #f1f5f9;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  text-wrap: balance;
}

/* ── Layout groups ────────────────────────────────────────────────────────── */

/* Three-column argument */
.scene-columns-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2cqw;
  flex: 1;
  min-height: 0;
}

/* People / team grid — 4 equal columns; :has() adjusts for smaller counts */
.scene-persons-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2cqw;
  flex: 0 0 auto;
  align-content: start;
}

.scene-persons-grid:has(> :nth-child(2):last-child) {
  grid-template-columns: repeat(2, 1fr);
}

.scene-persons-grid:has(> :nth-child(3):last-child) {
  grid-template-columns: repeat(3, 1fr);
}

/* Reasons grid — 3 columns when 3 children (matches PDF side-by-side layout), 2 when 2 */
.scene-reasons-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2cqw;
  flex: 1;
  align-content: start;
}

.scene-reasons-grid:has(> :nth-child(2):last-child) {
  grid-template-columns: repeat(2, 1fr);
}

.scene-reasons-grid:has(> :nth-child(4)) {
  grid-template-columns: repeat(2, 1fr);
}

/* Ecosystem / coverage row — compact horizontal strip below person cards */
.scene-ecosystem-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2cqw;
  flex-shrink: 0;
}

.scene-ecosystem-row .scene-obj--ecosystem-block {
  flex: 1 1 auto;
  min-width: 10cqw;
}

.scene-ecosystem-row .scene-obj--coverage-list {
  flex: 1 1 auto;
  min-width: 14cqw;
}

/* ── argument_card ────────────────────────────────────────────────────────── */
.scene-obj--argument-card {
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-top: 2px solid #14b8a6;
  border-radius: 6px;
  padding: 2.8cqh 2.4cqw;
  display: flex;
  flex-direction: column;
  gap: 1.2cqh;
}

.so-ac__title {
  font-size: 2cqw;
  font-weight: 600;
  color: #f1f5f9;
  line-height: 1.3;
  text-wrap: balance;
}

.so-ac__body {
  font-size: 1.6cqw;
  color: #94a3b8;
  line-height: 1.55;
  margin: 0;
  flex: 1;
}

.so-ac__bullets {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.7cqh;
}

.so-ac__bullets li {
  font-size: 1.5cqw;
  color: #94a3b8;
  line-height: 1.4;
  padding-left: 1.4cqw;
  position: relative;
}

.so-ac__bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.5cqw;
  height: 0.5cqw;
  border-radius: 50%;
  background: #14b8a6;
}

/* ── synthesis_row ────────────────────────────────────────────────────────── */
.scene-obj--synthesis-row {
  background: rgba(20, 184, 166, 0.12);
  border: 1px solid rgba(20, 184, 166, 0.25);
  border-radius: 5px;
  padding: 1.8cqh 2.4cqw;
  font-size: 1.7cqw;
  font-weight: 500;
  color: #e2e8f0;
  line-height: 1.5;
  text-align: center;
  flex-shrink: 0;
}

/* ── person_card ──────────────────────────────────────────────────────────── */
.scene-obj--person-card {
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 2.8cqh 2cqw 2.4cqh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2cqh;
  text-align: center;
}

.so-pc__avatar {
  width: 8cqw;
  height: 8cqw;
  border-radius: 50%;
  background: linear-gradient(135deg, #14b8a6 0%, #0891b2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3cqw;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.18);
}

/* Per-person accent colours */
.so-pc__avatar[data-person-index="0"] { background: linear-gradient(135deg, #14b8a6, #0891b2); box-shadow: 0 0 0 3px rgba(20,184,166,0.2); }
.so-pc__avatar[data-person-index="1"] { background: linear-gradient(135deg, #6366f1, #8b5cf6); box-shadow: 0 0 0 3px rgba(99,102,241,0.2); }
.so-pc__avatar[data-person-index="2"] { background: linear-gradient(135deg, #f59e0b, #ea580c); box-shadow: 0 0 0 3px rgba(245,158,11,0.2); }
.so-pc__avatar[data-person-index="3"] { background: linear-gradient(135deg, #ec4899, #d946ef); box-shadow: 0 0 0 3px rgba(236,72,153,0.2); }

.so-pc__body {
  display: flex;
  flex-direction: column;
  gap: 0.5cqh;
  min-width: 0;
  align-items: center;
}

.so-pc__name {
  font-size: 1.9cqw;
  font-weight: 700;
  color: #f1f5f9;
  line-height: 1.2;
  text-wrap: balance;
}

.so-pc__role {
  font-size: 1.3cqw;
  color: #14b8a6;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.3;
  text-wrap: balance;
}

.so-pc__bio {
  font-size: 1.2cqw;
  color: #64748b;
  line-height: 1.5;
  margin: 0;
}

/* ── ecosystem_block ──────────────────────────────────────────────────────── */
.scene-obj--ecosystem-block {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 1.6cqh 2cqw;
}

.so-eco__label {
  font-size: 1.1cqw;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #14b8a6;
  margin-bottom: 0.8cqh;
}

.so-eco__items {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5cqh 1.2cqw;
}

.so-eco__items li {
  font-size: 1.4cqw;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  padding: 0.3cqh 0.8cqw;
}

/* ── coverage_list ────────────────────────────────────────────────────────── */
.scene-obj--coverage-list {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 1.6cqh 2cqw;
}

.so-cov__region {
  font-size: 1.1cqw;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #94a3b8;
  margin-bottom: 0.8cqh;
}

.so-cov__items {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4cqh;
}

.so-cov__items li {
  font-size: 1.4cqw;
  color: #94a3b8;
}

/* ── company_intro ────────────────────────────────────────────────────────── */
.scene-obj--company-intro {
  padding: 1cqh 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.so-ci__company {
  font-size: 4cqw;
  font-weight: 700;
  color: #f1f5f9;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.so-ci__sector {
  font-size: 1.3cqw;
  color: #14b8a6;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 0.4cqh;
}

.so-ci__tagline {
  font-size: 1.7cqw;
  color: #94a3b8;
  line-height: 1.5;
  margin: 0.8cqh 0 0;
}

/* ── definition_panel ────────────────────────────────────────────────────── */
.scene-obj--definition-panel {
  background: rgba(20, 184, 166, 0.08);
  border-left: 3px solid #14b8a6;
  border-radius: 0 6px 6px 0;
  padding: 1.8cqh 2.4cqw;
  flex-shrink: 0;
}

.so-dp__label {
  font-size: 1.1cqw;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #14b8a6;
  margin-bottom: 0.8cqh;
}

.so-dp__content {
  font-size: 1.7cqw;
  color: #e2e8f0;
  line-height: 1.55;
  margin: 0;
}

/* ── reason_card ─────────────────────────────────────────────────────────── */
.scene-obj--reason-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 6px;
  padding: 2cqh 2cqw;
  display: flex;
  gap: 1.6cqw;
  align-items: flex-start;
}

.so-rc__number {
  font-size: 3.2cqw;
  font-weight: 800;
  color: rgba(20, 184, 166, 0.35);
  line-height: 1;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
}

.so-rc__body {
  display: flex;
  flex-direction: column;
  gap: 0.6cqh;
  min-width: 0;
}

.so-rc__title {
  font-size: 1.7cqw;
  font-weight: 600;
  color: #f1f5f9;
  line-height: 1.3;
}

.so-rc__desc {
  font-size: 1.4cqw;
  color: #94a3b8;
  line-height: 1.5;
  margin: 0;
}

/* ── chart_image_crop ────────────────────────────────────────────────────── */
.scene-charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2cqw;
  width: 100%;
}

.scene-charts-grid:has(> :nth-child(1):last-child) {
  grid-template-columns: 1fr;
}

.scene-obj--chart-image-crop {
  display: flex;
  flex-direction: column;
  gap: 0.8cqh;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 1.2cqh 1.4cqw;
  overflow: hidden;
}

.so-crop__title {
  font-size: 1.4cqw;
  font-weight: 600;
  color: #cbd5e1;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.so-crop__img {
  width: 100%;
  /* height set inline per chart bbox aspect — fallback here */
  min-height: 14cqh;
  flex: 1;
  background-color: transparent;
  /* background-image, background-size, background-position applied by JS */
  border-radius: 3px;
}

.so-crop__badge {
  display: inline-block;
  font-size: 1.1cqw;
  color: #64748b;
  font-style: italic;
  flex-shrink: 0;
}

/* ── illustration_crop ───────────────────────────────────────────────────── */
.scene-obj--illustration-crop {
  display: flex;
  flex-direction: column;
  gap: 0.8cqh;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 1.2cqh 1.4cqw;
  overflow: hidden;
}

/* ── logo_crop ───────────────────────────────────────────────────────────── */
.scene-obj--logo-crop {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
}

.so-crop__img--logo {
  min-height: 6cqh;
  width: auto;
  max-width: 20cqw;
}

/* ── photo_crop ──────────────────────────────────────────────────────────── */
.scene-photos-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1.6cqw;
  width: 100%;
}

.scene-obj--photo-crop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6cqh;
  flex: 1 1 0;
  min-width: 8cqw;
  max-width: 18cqw;
  overflow: hidden;
}

.so-crop__img--photo {
  width: 100%;
  min-height: 10cqh;
  border-radius: 50%;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
}

.so-photo__name {
  font-size: 1.25cqw;
  font-weight: 600;
  color: #e2e8f0;
  text-align: center;
  line-height: 1.3;
}

.so-photo__role {
  font-size: 1.05cqw;
  color: #94a3b8;
  text-align: center;
  line-height: 1.3;
}

/* ── chart_observation ───────────────────────────────────────────────────── */
.scene-obj--chart-observation {
  font-size: 1.4cqw;
  color: #94a3b8;
  font-style: italic;
  line-height: 1.5;
  padding: 0.6cqh 1.2cqw;
  border-left: 2px solid rgba(20, 184, 166, 0.35);
  margin-top: 0.4cqh;
}

/* ── stat_callout ────────────────────────────────────────────────────────── */
.scene-obj--stat-callout {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4cqh;
  background: rgba(20, 184, 166, 0.08);
  border: 1px solid rgba(20, 184, 166, 0.2);
  border-radius: 8px;
  padding: 2cqh 2cqw;
  text-align: center;
}

.so-stat__value {
  font-size: 4cqw;
  font-weight: 800;
  color: #14b8a6;
  line-height: 1;
  letter-spacing: -0.02em;
}

.so-stat__label {
  font-size: 1.4cqw;
  color: #94a3b8;
  line-height: 1.3;
}

/* ── supporting_illustration ─────────────────────────────────────────────── */
.scene-obj--supporting-illustration {
  display: flex;
  flex-direction: column;
  gap: 0.6cqh;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 6px;
  padding: 1.6cqh 1.8cqw;
}

.so-illus__label {
  font-size: 1.5cqw;
  font-weight: 600;
  color: #e2e8f0;
}

.so-illus__desc {
  font-size: 1.3cqw;
  color: #94a3b8;
  line-height: 1.5;
  margin: 0;
}

/* ── transition_card ─────────────────────────────────────────────────────── */
.scene-obj--transition-card {
  font-size: 2.2cqw;
  font-weight: 500;
  color: #e2e8f0;
  text-align: center;
  padding: 3cqh 3cqw;
  background: rgba(20, 184, 166, 0.06);
  border: 1px solid rgba(20, 184, 166, 0.14);
  border-radius: 8px;
  line-height: 1.4;
}

/* ── scene_legal_footer ──────────────────────────────────────────────────── */
.scene-legal-footer {
  position: relative;
  z-index: 1;
  font-size: 0.9cqw;
  color: #475569;
  line-height: 1.4;
  padding: 1cqh 1.5cqw 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: auto;
  flex-shrink: 0;
}

/* ── takeaway ────────────────────────────────────────────────────────────── */
.scene-obj--takeaway {
  background: linear-gradient(90deg, rgba(20, 184, 166, 0.15) 0%, rgba(20, 184, 166, 0.04) 100%);
  border: 1px solid rgba(20, 184, 166, 0.2);
  border-radius: 6px;
  padding: 2cqh 2.4cqw;
  font-size: 1.8cqw;
  font-weight: 500;
  color: #e2e8f0;
  line-height: 1.5;
  flex-shrink: 0;
}

/* ── generic_text ────────────────────────────────────────────────────────── */
.so-gt__heading {
  font-size: 2cqw;
  font-weight: 600;
  color: #f1f5f9;
  margin-bottom: 0.6cqh;
}

.so-gt__content {
  font-size: 1.6cqw;
  color: #94a3b8;
  line-height: 1.55;
  margin: 0;
}

/* ── Slide-type–specific canvas overrides ───────────────────────────────── */

/* case_study: tighter gap, company intro full-width header */
.slide-canvas--case-study .scene-layout {
  gap: 1.4cqh;
}

/* people_team: looser top padding to let the grid breathe */
.slide-canvas--people-team .scene-layout,
.slide-canvas--ecosystem-map .scene-layout,
.slide-canvas--team-overview .scene-layout {
  padding-top: 3.2cqh;
}

/* ── Rebuilt chart stubs (case_study) ───────────────────────────────────── */
/* Rendered from key_metrics + visual_direction when no chart_blocks available */
.scene-chart-stub-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2cqw;
  flex-shrink: 0;
}

.scene-chart-stub {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 1.8cqh 2cqw 1.2cqh;
  display: flex;
  flex-direction: column;
  gap: 1cqh;
  min-height: 16cqh;
}

.chart-stub__title {
  font-size: 1.2cqw;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  flex-shrink: 0;
}

.chart-stub__svg {
  flex: 1;
  display: block;
  overflow: visible;
}

/* ── Chart blocks in scene canvases ─────────────────────────────────────── */
/* chart_blocks extracted by vision_chart_extractor.py render at the bottom  */
/* of any scene layout. Chart.js renders into the <canvas> child element.    */
.scene-chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30cqw, 1fr));
  gap: 2cqw;
  width: 100%;
}

.scene-chart-wrap {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 1.8cqh 2cqw;
  min-height: 18cqh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.scene-chart-wrap canvas {
  flex: 1;
  width: 100% !important;
  height: 100% !important;
  min-height: 12cqh;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BRIEFING READER — one clean screen
   A briefing is a single short read, not a multi-lesson course, so we hide the
   course chrome (left navigation + right Notes / Mimr Guide panel) for EVERY
   briefing. A single-screen briefing (layout="single_screen" →
   body.presentation-mode.mode-briefing) additionally STACKS the presenter video
   on top — reading the whole briefing aloud — with the key points below it.
   Real presentations (body.mode-presentation) and workshops are unaffected:
   these selectors all require .mode-briefing.
   ═══════════════════════════════════════════════════════════════════════════ */

/* (1) Hide the left nav + right notes/guide for all briefings, and let the
       reading column breathe centred. */
body.mode-briefing .sidebar,
body.mode-briefing .lesson-resources-panel,
body.mode-briefing #guideFab {
  display: none !important;
}
body.mode-briefing .course-layout {
  grid-template-columns: minmax(0, 1fr) !important;
  max-width: 1000px;
}

/* (2) Single-screen briefing → presenter video on top, verbatim briefing text
       (the normal .content-panel transcript) below it. We reuse the presentation
       composition ONLY for the presenter clip and suppress its dark slide-reveal
       panel — a briefing is prose to read, not a slide deck. The .scene-stage
       aspect-ratio is released so the video sizes to 16:9 and the page flows. */
body.presentation-mode.mode-briefing .stage-shell {
  max-width: 920px;
}
body.presentation-mode.mode-briefing .scene-stage {
  aspect-ratio: auto;
  height: auto;
  min-height: 0;
}
body.presentation-mode.mode-briefing .media-composition,
body.presentation-mode.mode-briefing .media-composition.has-visual,
body.presentation-mode.mode-briefing .media-composition.has-visual.has-presenter,
body.presentation-mode.mode-briefing .media-composition.no-visual {
  flex-direction: column !important;
  align-items: stretch;
  min-height: 0;
  max-height: none;
}
/* Presenter clip — full width, 16:9, reading the whole briefing. */
body.presentation-mode.mode-briefing .presenter-panel,
body.presentation-mode.mode-briefing .presenter-panel.centred {
  flex: 0 0 auto;
  width: 100% !important;
  max-width: none !important;
  aspect-ratio: 16 / 9;
  height: auto;
  max-height: 60vh;
  border-radius: var(--radius-lg);
}
/* Drop the dark slide-reveal panel — the readable transcript below the stage
   (.content-panel / .lesson-body) is the briefing text, so the reveal box would
   only duplicate it (and its cqh-sized slide styling doesn't suit prose). */
body.presentation-mode.mode-briefing .visual-panel {
  display: none !important;
}
/* Let the verbatim transcript below the video breathe as a normal read. */
body.presentation-mode.mode-briefing .content-panel {
  margin-top: 20px;
}
/* When a real presenter video is present it carries native controls (play/pause,
   scrub, volume, fullscreen), so the custom narration bar is redundant — hide it.
   The body flag is set by app.js only when the video exists; the voice-only
   fallback (no flag) keeps the narration bar as its sole playback control. */
body.presentation-mode.mode-briefing.briefing-native-video .narration-bar {
  display: none !important;
}
/* A single-page briefing is one screen: the topbar (logo + injected workspace
   branding + mode label + hosted badge) is redundant chrome, and the
   Previous / Complete footer navigates nothing. Drop both — this also removes
   any injected tenant/workspace branding from the header, since that lived in
   the topbar. Scoped to the single-screen layout only, so classic multi-section
   briefings keep their header and section-to-section nav. */
body.presentation-mode.mode-briefing .course-header,
body.presentation-mode.mode-briefing .nav-row {
  display: none !important;
}
/* Tenant mark, top-right of the presenter clip. With the topbar gone this is the
   only place the brand appears, so it needs to read cleanly over the video: a
   small, softly-rounded frosted chip (not a slab of white) sized so a dark logo
   stays legible. .presenter-panel is already position:relative (the nameplate
   anchors to it), so the chip positions against the video, not the page. */
body.presentation-mode.mode-briefing .presenter-brand-logo {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 6;
  display: flex;
  align-items: center;
  padding: 7px 11px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 2px 9px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  pointer-events: none;
}
body.presentation-mode.mode-briefing .presenter-brand-logo img {
  display: block;
  height: 22px;
  width: auto;
  max-width: 132px;
  object-fit: contain;
}
@media (max-width: 768px) {
  body.presentation-mode.mode-briefing .presenter-brand-logo {
    top: 9px;
    right: 9px;
    padding: 5px 9px;
    border-radius: 8px;
  }
  body.presentation-mode.mode-briefing .presenter-brand-logo img {
    height: 18px;
    max-width: 104px;
  }
}
/* The scene-stage/composition fill the 920px reading shell (capped above); release
   the composition's fixed min-height so the stacked video + prose flow naturally.
   NB: do NOT force max-width:100% on .stage-shell here — that would defeat the
   920px reading cap and stretch the column full-bleed on wide screens. */
body.presentation-mode.mode-briefing .media-composition {
  min-height: 0 !important;
}
/* On narrow screens the presentation composition's fat card padding shrinks the
   stage to a thumbnail and the narration toolbar overflows the viewport. For the
   briefing reader, trim the card padding and let the toolbar clusters wrap. */
@media (max-width: 768px) {
  body.presentation-mode.mode-briefing .lesson-card {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  body.presentation-mode.mode-briefing .narration-bar {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  body.presentation-mode.mode-briefing .narration-bar-left {
    flex: 1 1 100%;
  }
  body.presentation-mode.mode-briefing .narration-bar-right {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}