/* SlideForge — Dark Theme Presentation Stylesheet */
/* Zero dependencies. Vanilla CSS. */

/* ============================================
   CSS Custom Properties — Theme & Branding System
   ============================================ */

/* Default dark theme */
:root,
[data-theme="dark"] {
  --bg: #0D1117;
  --bg-surface: #161B22;
  --bg-elevated: #1C2128;
  --text: #E6EDF3;
  --text-muted: #8B949E;
  --accent: #2DD4BF;
  --accent-secondary: #F59E0B;
  --slate: #334155;
  --slide-width: 1280px;
  --slide-height: 720px;
  --transition-speed: 250ms;
  --font-stack: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --logo-filter: none;
  --logo-url: url('logo.svg');
}

/* Light theme */
[data-theme="light"] {
  --bg: #ffffff;
  --bg-surface: #f8f9fa;
  --bg-elevated: #e9ecef;
  --text: #1a1a2e;
  --text-muted: #6c757d;
  --accent: #0d9488;
  --accent-secondary: #d97706;
  --slate: #dee2e6;
  --logo-filter: none;
}

/* ── Brand: Airbrain (default) ─────────────── */
[data-brand="airbrain"] {
  --accent: #9333ea;
  --accent-secondary: #f59e0b;
  --font-stack: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

[data-brand="airbrain"][data-theme="light"] {
  --accent: #7c3aed;
  --accent-secondary: #d97706;
}

/* Alias teal/amber to accent system for backward compat */
:root {
  --teal: var(--accent);
  --amber: var(--accent-secondary);
}

/* Knowledge-check semantic colours (a11y). Correct = green, Incorrect = amber, fixed
   (NOT the decorative --accent), each with >=4.5:1 contrast on its theme background. */
:root, [data-theme="dark"] {
  --kc-correct: #34d399;
  --kc-correct-bg: rgba(52, 211, 153, 0.12);
  --kc-incorrect: #fbbf24;
  --kc-incorrect-bg: rgba(251, 191, 36, 0.12);
}
[data-theme="light"] {
  --kc-correct: #047857;
  --kc-correct-bg: #ecfdf5;
  --kc-incorrect: #b45309;
  --kc-incorrect-bg: #fffbeb;
}

/* ============================================
   Reset & Base
   ============================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  font-family: var(--font-stack);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

[data-theme="light"] body,
[data-theme="light"] {
  background: var(--bg);
}

/* ============================================
   Slide Container — 16:9 Letterboxing
   ============================================ */
.slide-viewport {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}

[data-theme="light"] .slide-viewport {
  background: #e0e0e0;
}

.slide-scaler {
  position: relative;
  width: var(--slide-width);
  height: var(--slide-height);
  overflow: hidden;
  transform-origin: center center;
}

/* ============================================
   Individual Slides
   ============================================ */
.slide {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg);
  padding: 60px 80px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-speed) ease, transform var(--transition-speed) ease;
  transform: translateX(40px);
}

.slide.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.slide.exit-left {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-40px);
}

/* ============================================
   Typography
   ============================================ */
.slide-title {
  font-size: 44px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 32px;
  color: var(--text);
}

.slide-title .accent {
  color: var(--teal);
}

.slide-subtitle {
  font-size: 24px;
  font-weight: 400;
  color: var(--text-muted);
  margin-bottom: 24px;
  line-height: 1.5;
}

.slide-body {
  font-size: 28px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text);
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.slide-body p {
  margin-bottom: 16px;
}

.slide-source {
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 24px;
  padding-top: 16px;
}

/* ============================================
   Title Slide Layout
   ============================================ */
.slide.layout-title {
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 80px;
}

.slide.layout-title .slide-title {
  font-size: 56px;
  margin-bottom: 16px;
}

.slide.layout-title .slide-subtitle {
  font-size: 28px;
}

/* ============================================
   Chapter Title Slide
   ============================================ */
.slide.layout-chapter {
  justify-content: center;
  padding-left: 120px;
}

.slide.layout-chapter .chapter-number {
  font-size: 18px;
  font-weight: 600;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 12px;
}

.slide.layout-chapter .slide-title {
  font-size: 52px;
  border-left: 4px solid var(--teal);
  padding-left: 24px;
}

/* ============================================
   Two-Column Layout
   ============================================ */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  flex: 1;
  align-items: center;
}

.two-col-wide-right {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 48px;
  flex: 1;
  align-items: center;
}

/* ============================================
   CSS Visual: Stat Callout Card
   ============================================ */
.stat-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  flex: 0 0 auto;
  align-items: stretch;
}

.stat-card {
  background: var(--bg-surface);
  border: 1px solid var(--slate);
  border-radius: 8px;
  padding: 32px 24px;
  text-align: center;
}

.stat-card .stat-value {
  font-size: 64px;
  font-weight: 700;
  color: var(--teal);
  line-height: 1.1;
}

.stat-card .stat-value.amber {
  color: var(--amber);
}

.stat-card .stat-label {
  font-size: 18px;
  color: var(--text-muted);
  margin-top: 8px;
}

/* ============================================
   CSS Visual: Flowchart
   ============================================ */
.flowchart {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: nowrap;
}

.flowchart.vertical {
  flex-direction: column;
}

.flow-node {
  background: var(--bg-surface);
  border: 2px solid var(--teal);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  text-align: center;
  min-width: 0;
  flex: 1 1 0;
  white-space: nowrap;
}

.flow-node.highlight {
  background: var(--teal);
  color: var(--bg);
  border-color: var(--teal);
}

.flow-node.amber {
  border-color: var(--amber);
}

.flow-node.amber.highlight {
  background: var(--amber);
  color: var(--bg);
}

.flow-arrow {
  font-size: 22px;
  color: var(--teal);
  padding: 0 6px;
  flex-shrink: 0;
}

.flowchart.vertical .flow-arrow {
  transform: rotate(90deg);
  padding: 8px 0;
}

/* ============================================
   CSS Visual: Step Diagram
   ============================================ */
.step-diagram {
  display: flex;
  gap: 20px;
  flex: 0 0 auto;
  align-items: stretch;
  justify-content: center;
}

.step-item {
  flex: 1;
  background: var(--bg-surface);
  border-top: 3px solid var(--teal);
  border-radius: 0 0 8px 8px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 220px;
}

.step-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--bg);
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.step-label {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

.step-desc {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* ============================================
   CSS Visual: Icon Grid
   ============================================ */
.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 20px;
  flex: 0 0 auto;
  align-items: stretch;
}

.icon-card {
  background: var(--bg-surface);
  border-radius: 8px;
  padding: 28px 20px;
  text-align: center;
  border: 1px solid var(--slate);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.icon-card .icon-symbol {
  font-size: 40px;
  margin-bottom: 12px;
  display: block;
}

.icon-card .icon-symbol.teal { color: var(--teal); }
.icon-card .icon-symbol.amber { color: var(--amber); }

/* CSS-only icons using shapes */
.css-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  position: relative;
}

.css-icon.shield {
  width: 40px;
  height: 48px;
  border: 3px solid var(--teal);
  border-radius: 4px 4px 20px 20px;
}

.css-icon.shield::after {
  content: '';
  position: absolute;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border-bottom: 3px solid var(--teal);
  border-right: 3px solid var(--teal);
  transform: translateX(-50%) rotate(45deg);
  top: 10px;
}

.css-icon.target {
  border: 3px solid var(--amber);
  border-radius: 50%;
}

.css-icon.target::before {
  content: '';
  position: absolute;
  top: 8px; left: 8px; right: 8px; bottom: 8px;
  border: 2px solid var(--amber);
  border-radius: 50%;
}

.css-icon.target::after {
  content: '';
  position: absolute;
  top: 16px; left: 16px; right: 16px; bottom: 16px;
  background: var(--amber);
  border-radius: 50%;
}

.css-icon.doc {
  width: 36px;
  height: 44px;
  border: 3px solid var(--teal);
  border-radius: 2px;
  margin: 2px auto 12px;
}

.css-icon.doc::before {
  content: '';
  position: absolute;
  top: 10px; left: 6px; right: 6px;
  height: 2px;
  background: var(--teal);
  box-shadow: 0 7px 0 var(--teal), 0 14px 0 var(--teal);
}

.icon-card .icon-label {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.icon-card .icon-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* ============================================
   CSS Visual: Comparison Table
   ============================================ */
.comparison-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 18px;
}

.comparison-table th {
  background: var(--bg-surface);
  color: var(--teal);
  font-weight: 600;
  padding: 16px 20px;
  text-align: left;
  border-bottom: 2px solid var(--teal);
}

.comparison-table td {
  padding: 14px 20px;
  border-bottom: 1px solid var(--slate);
  color: var(--text);
  vertical-align: top;
}

.comparison-table tr:last-child td {
  border-bottom: none;
}

.comparison-table .check {
  color: var(--teal);
  font-weight: 700;
}

.comparison-table .cross {
  color: var(--amber);
  font-weight: 700;
}

/* ============================================
   CSS Visual: Timeline
   ============================================ */
.timeline {
  position: relative;
  padding-left: 40px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--slate);
}

.timeline-item {
  position: relative;
  padding-left: 24px;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -32px;
  top: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--teal);
  border: 3px solid var(--bg);
}

.timeline-item.amber::before {
  background: var(--amber);
}

.timeline-item .timeline-date {
  font-size: 14px;
  color: var(--teal);
  font-weight: 600;
  margin-bottom: 2px;
}

.timeline-item.amber .timeline-date {
  color: var(--amber);
}

.timeline-item .timeline-label {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
}

.timeline-item .timeline-desc {
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Horizontal timeline variant */
.timeline-horizontal {
  display: flex;
  align-items: flex-start;
  gap: 0;
  flex: 1;
  padding-top: 32px;
  position: relative;
}

.timeline-horizontal::before {
  content: '';
  position: absolute;
  top: 38px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--slate);
}

.timeline-h-item {
  flex: 1;
  text-align: center;
  position: relative;
  padding-top: 32px;
}

.timeline-h-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--teal);
}

.timeline-h-item.amber::before {
  background: var(--amber);
}

.timeline-h-item .th-label {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.timeline-h-item .th-desc {
  font-size: 13px;
  color: var(--text-muted);
  padding: 0 8px;
}

/* ============================================
   CSS Visual: Bar Chart
   ============================================ */
.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  height: 260px;
  padding-top: 20px;
  border-bottom: 2px solid var(--slate);
}

.bar-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
}

.bar {
  width: 48px;
  background: var(--teal);
  border-radius: 4px 4px 0 0;
  transition: height 0.5s ease;
  min-height: 4px;
}

.bar.amber { background: var(--amber); }

.bar-label {
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 8px;
  text-align: center;
}

.bar-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

/* ============================================
   CSS Visual: Callout / Highlight Box
   ============================================ */
.callout {
  background: var(--bg-surface);
  border-left: 4px solid var(--teal);
  padding: 24px 28px;
  border-radius: 0 8px 8px 0;
  margin: 16px 0;
}

.callout.amber {
  border-left-color: var(--amber);
}

.callout .callout-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--teal);
  margin-bottom: 8px;
}

.callout.amber .callout-title {
  color: var(--amber);
}

.callout .callout-text {
  font-size: 18px;
  color: var(--text);
  line-height: 1.5;
}

/* ============================================
   CSS Visual: Image / Diagram Frame
   ============================================ */
.slide-image-frame {
  background: var(--bg-surface);
  border: 1px solid var(--slate);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-height: 480px;
  overflow: hidden;
}

.slide-image-frame img {
  max-width: 100%;
  max-height: 400px;
  object-fit: contain;
  border-radius: 4px;
}

.slide-image-frame .image-caption {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 10px;
  text-align: center;
  font-style: italic;
}

/* Full-bleed image (no frame, fills content area) */
.slide-image-full {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.slide-image-full img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
}

/* Image alongside text (two-column with image) */
.image-text-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  flex: 1;
  align-items: center;
}

.image-text-layout .slide-image-frame {
  max-height: 400px;
}

.image-text-layout .image-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ============================================
   CSS Visual: Org Chart
   ============================================ */
.org-chart {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
}

.org-level {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: stretch;
  position: relative;
}

.org-level-3 {
  gap: 20px;
}

.org-level-4 {
  gap: 12px;
}

.org-node {
  background: var(--bg-surface);
  border: 2px solid var(--teal);
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  text-align: center;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
}

.org-node.org-board {
  background: var(--bg-elevated);
  border-color: var(--amber);
  font-size: 13px;
  padding: 8px 16px;
}

.org-node.org-top {
  background: var(--teal);
  color: var(--bg);
  border-color: var(--teal);
  font-size: 16px;
  padding: 12px 24px;
}

.org-node.org-mid {
  font-size: 13px;
  padding: 8px 14px;
  flex: 1 1 0;
}

.org-node.accent-border {
  border-color: var(--amber);
  border-style: dashed;
}

.org-node.org-leaf {
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  border-color: var(--slate);
  color: var(--text-muted);
  flex: 1 1 0;
}

/* Vertical connector line */
.org-connector {
  width: 2px;
  height: 20px;
  background: var(--slate);
  margin: 0 auto;
}

/* Horizontal branch: a bar that spans the width of its sibling level,
   with vertical drop-lines to each child node */
.org-branch {
  position: relative;
  height: 20px;
  margin: 0 auto;
}

.org-branch::before {
  content: '';
  position: absolute;
  top: 0;
  height: 2px;
  background: var(--slate);
}

.org-branch-3::before {
  left: 16.67%;
  right: calc(100% - 83.33%);
}

.org-branch-4::before {
  left: 12.5%;
  right: calc(100% - 87.5%);
}

.org-branch .org-drop {
  position: absolute;
  top: 0;
  width: 2px;
  height: 100%;
  background: var(--slate);
}

/* Position drops at centre of each equal-width flex child.
   For N children with equal gap, centres are at:
   (2k+1) / (2N) * 100%  for k = 0..N-1
   3 children: 16.67%, 50%, 83.33%
   4 children: 12.5%, 37.5%, 62.5%, 87.5% */
.org-branch-3 .org-drop:nth-child(1) { left: 16.67%; }
.org-branch-3 .org-drop:nth-child(2) { left: 50%; }
.org-branch-3 .org-drop:nth-child(3) { left: 83.33%; }

.org-branch-4 .org-drop:nth-child(1) { left: 12.5%; }
.org-branch-4 .org-drop:nth-child(2) { left: 37.5%; }
.org-branch-4 .org-drop:nth-child(3) { left: 62.5%; }
.org-branch-4 .org-drop:nth-child(4) { left: 87.5%; }

/* ============================================
   Bullet List (minimal)
   ============================================ */
.slide-list {
  list-style: none;
  padding: 0;
}

.slide-list li {
  font-size: 24px;
  line-height: 1.6;
  padding-left: 24px;
  position: relative;
  margin-bottom: 12px;
}

.slide-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  width: 8px;
  height: 8px;
  background: var(--teal);
  border-radius: 50%;
}

/* ============================================
   Knowledge Check Slides
   ============================================ */
.knowledge-check {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.kc-question {
  font-size: 26px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 28px;
  line-height: 1.4;
}

.kc-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kc-option {
  background: var(--bg-surface);
  border: 2px solid var(--slate);
  border-radius: 8px;
  padding: 16px 24px;
  font-size: 20px;
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--transition-speed) ease, background var(--transition-speed) ease;
  user-select: none;
}

.kc-option:hover {
  border-color: var(--text-muted);
}

.kc-option.selected.correct {
  border-color: var(--kc-correct);
  background: var(--kc-correct-bg);
}

.kc-option.selected.incorrect {
  border-color: var(--kc-incorrect);
  background: var(--kc-incorrect-bg);
}

.kc-option.reveal-correct {
  border-color: var(--kc-correct);
}

.kc-feedback {
  margin-top: 20px;
  font-size: 18px;
  line-height: 1.5;
  padding: 16px 20px;
  border-radius: 8px;
  display: none;
}

.kc-feedback.show {
  display: block;
}

.kc-feedback.correct {
  background: var(--kc-correct-bg);
  color: var(--kc-correct);
  border: 1px solid var(--kc-correct);
}

.kc-feedback.incorrect {
  background: var(--kc-incorrect-bg);
  color: var(--kc-incorrect);
  border: 1px solid var(--kc-incorrect);
}

/* ============================================
   Slide Counter
   ============================================ */
.slide-counter {
  position: fixed;
  bottom: 20px;
  left: 28px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-muted);
  z-index: 100;
  font-variant-numeric: tabular-nums;
}

/* ============================================
   Progress Bar
   ============================================ */
.progress-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 4px;
  background: var(--teal);
  transition: width var(--transition-speed) ease;
  z-index: 100;
  box-shadow: 0 0 8px var(--teal);
}

/* ============================================
   Chapter Sidebar
   ============================================ */
.sidebar-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-speed) ease;
}

.sidebar-overlay.open {
  opacity: 1;
  visibility: visible;
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 340px;
  height: 100%;
  background: var(--bg-surface);
  border-right: 1px solid var(--slate);
  z-index: 201;
  transform: translateX(-100%);
  transition: transform var(--transition-speed) ease;
  padding: 32px 0;
  overflow-y: auto;
}

.sidebar.open {
  transform: translateX(0);
}

.sidebar-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 0 24px 16px;
  border-bottom: 1px solid var(--slate);
  margin-bottom: 8px;
}

.sidebar-chapter {
  padding: 12px 24px;
  font-size: 16px;
  color: var(--text);
  cursor: pointer;
  transition: background var(--transition-speed) ease;
  display: flex;
  align-items: center;
  gap: 12px;
}

.sidebar-chapter:hover {
  background: var(--bg-elevated);
}

.sidebar-chapter.active {
  color: var(--teal);
  background: rgba(45, 212, 191, 0.08);
  border-left: 3px solid var(--teal);
}

.sidebar-chapter .chapter-num {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  min-width: 24px;
}

.sidebar-chapter.active .chapter-num {
  color: var(--teal);
}

.sidebar-slide {
  padding: 8px 24px 8px 60px;
  font-size: 14px;
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--transition-speed) ease;
}

.sidebar-slide:hover {
  background: var(--bg-elevated);
  color: var(--text);
}

.sidebar-slide.active {
  color: var(--teal);
  font-weight: 700;
}

/* ============================================
   References Popup
   ============================================ */
.ref-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-speed) ease;
}

.ref-overlay.open {
  opacity: 1;
  visibility: visible;
}

.ref-panel {
  background: var(--bg-surface);
  border: 1px solid var(--slate);
  border-radius: 12px;
  padding: 32px 36px;
  max-width: 600px;
  width: 90%;
  max-height: 70vh;
  overflow-y: auto;
}

.ref-panel-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--slate);
}

.ref-item {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(51, 65, 85, 0.5);
}

.ref-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.ref-item .ref-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--amber);
  margin-bottom: 4px;
}

.ref-item .ref-text {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.5;
}

.ref-item .ref-text a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: opacity var(--transition-speed) ease;
}

.ref-item .ref-text a:hover {
  opacity: 0.8;
}

.ref-dismiss {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 20px;
  text-align: center;
}

/* ============================================
   Keyboard Hint (bottom-left)
   ============================================ */
.keyboard-hint {
  position: fixed;
  bottom: 16px;
  left: 20px;
  font-size: 12px;
  color: var(--text-muted);
  z-index: 50;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.keyboard-hint:hover {
  opacity: 1;
}

.keyboard-hint kbd {
  background: var(--bg-elevated);
  border: 1px solid var(--slate);
  border-radius: 3px;
  padding: 1px 6px;
  font-family: var(--font-stack);
  font-size: 11px;
  margin: 0 2px;
}

/* ============================================
   Slide Logo (lower right)
   ============================================ */
.slide-logo {
  position: absolute;
  bottom: 20px;
  right: 28px;
  width: 32px;
  height: 32px;
  opacity: 1;
  filter: var(--logo-filter);
}

.slide-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ============================================
   Brand/Theme Controls Popup
   ============================================ */
.brand-panel-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-speed) ease;
}

.brand-panel-overlay.open {
  opacity: 1;
  visibility: visible;
}

.brand-panel {
  background: var(--bg-surface);
  border: 1px solid var(--slate);
  border-radius: 12px;
  padding: 32px 36px;
  max-width: 480px;
  width: 90%;
  max-height: 70vh;
  overflow-y: auto;
}

.brand-panel-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--slate);
}

.brand-section {
  margin-bottom: 20px;
}

.brand-section-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.brand-option-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.brand-btn {
  background: var(--bg-elevated);
  border: 2px solid var(--slate);
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 14px;
  font-family: var(--font-stack);
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--transition-speed) ease, background var(--transition-speed) ease;
}

.brand-btn:hover {
  border-color: var(--text-muted);
}

.brand-btn.active {
  border-color: var(--accent);
  background: rgba(45, 212, 191, 0.1);
}

[data-brand="airbrain"] .brand-btn.active {
  background: rgba(147, 51, 234, 0.1);
}

/* ── Brand: Airbrain — Knowledge check & sidebar overrides ── */
[data-brand="airbrain"] .sidebar-chapter.active {
  background: rgba(147, 51, 234, 0.08);
}

.brand-dismiss {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 20px;
  text-align: center;
}

/* ============================================
   Print / Export Mode
   ============================================ */
@media print {
  :root {
    --bg: #ffffff;
    --bg-surface: #f8f9fa;
    --bg-elevated: #e9ecef;
    --text: #1a1a2e;
    --text-muted: #6c757d;
    --slate: #dee2e6;
  }

  html, body {
    background: #fff;
    overflow: visible;
  }

  .slide-viewport {
    position: static;
    display: block;
  }

  .slide-scaler {
    width: 100%;
    height: auto;
    transform: none !important;
  }

  .slide {
    position: relative;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    page-break-after: always;
    page-break-inside: avoid;
    min-height: 680px;
    border: 1px solid #dee2e6;
    margin-bottom: 20px;
  }

  .slide-counter,
  .progress-bar,
  .sidebar-overlay,
  .sidebar,
  .ref-overlay,
  .keyboard-hint,
  .brand-panel-overlay,
  .slide-logo {
    display: none !important;
  }

  .stat-card {
    border-color: #dee2e6;
    background: #f8f9fa;
  }

  .stat-card .stat-value {
    color: var(--accent);
  }

  .flow-node {
    border-color: var(--accent);
  }

  .flow-node.highlight {
    background: var(--accent);
    color: #fff;
  }

  .comparison-table th {
    background: #f8f9fa;
    color: var(--accent);
    border-bottom-color: var(--accent);
  }

  @page {
    size: landscape;
    margin: 0.5in;
  }
}

/* ============================================
   Notes Banner (click-to-open)
   ============================================ */
.notes-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 10px 20px;
  background: var(--bg-surface); border-bottom: 1px solid var(--slate);
  font-family: var(--font-stack); font-size: 14px; color: var(--text-muted);
}
.notes-banner a {
  color: var(--accent); font-weight: 600; text-decoration: none;
}
.notes-banner a:hover { text-decoration: underline; }
.notes-banner-close {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--text-muted); font-size: 18px;
  cursor: pointer; padding: 4px 8px;
}
.notes-banner-close:hover { color: var(--text); }

/* ============================================
   Moodle/SCORM self-paced additions
   Appended by the smoodle conversion. Everything below styles the
   companion panel, navigation buttons, welcome and completion overlays,
   and abbreviation tooltips for the LMS edition of this course.
   ============================================ */

/* Fullscreen body for SCORM iframe delivery */
html { overflow: hidden; }
body { margin: 0; padding: 0; width: 100vw; height: 100vh; height: 100dvh; overflow: hidden; }

/* Slide viewport makes room for the companion panel (height, not bottom
   offset, so slides stay centred) */
.slide-viewport {
  bottom: auto !important;
  height: calc(100vh - 220px) !important; height: calc(100dvh - 220px) !important;
}
.companion-collapsed .slide-viewport {
  height: calc(100vh - 40px) !important; height: calc(100dvh - 40px) !important;
}

/* ── Companion panel (study notes) ─────────── */
.companion-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 220px;
  background: var(--bg-surface);
  border-top: 1px solid var(--slate);
  display: flex;
  flex-direction: column;
  z-index: 800;
}

.companion-collapsed .companion-panel {
  height: 40px;
}

.companion-header {
  flex: 0 0 40px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
  border-bottom: 1px solid var(--slate);
}

.companion-collapsed .companion-header {
  border-bottom: none;
}

.companion-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.companion-slide-label {
  font-size: 12px;
  color: var(--text-muted);
}

.companion-controls {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

.companion-btn {
  background: var(--bg-elevated);
  border: 1px solid var(--slate);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--font-stack);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
}

.companion-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.companion-btn:active {
  transform: translateY(1px);
  background: var(--slate);
  color: var(--text);
}

.companion-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}

.companion-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 20px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
}

.companion-body p {
  margin: 0 0 10px 0;
}

.companion-body p:last-child {
  margin-bottom: 0;
}

.companion-collapsed .companion-body {
  display: none;
}

/* Abbreviation tooltips in the companion panel */
.companion-body abbr {
  position: relative;
  text-decoration: none;
  border-bottom: 1px dotted var(--accent);
  cursor: help;
}

.companion-body abbr:hover::after {
  content: attr(title);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 900;
}

/* ── Navigation buttons ────────────────────── */
.nav-btn {
  position: fixed;
  top: calc((100vh - 220px) / 2); top: calc((100dvh - 220px) / 2);
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--slate);
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  z-index: 850;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.companion-collapsed .nav-btn {
  top: calc((100vh - 40px) / 2); top: calc((100dvh - 40px) / 2);
}

#navPrev { left: 18px; }
#navNext { right: 18px; }

.nav-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.nav-btn:active {
  transform: translateY(-50%) scale(0.94);
}

.nav-btn:disabled {
  opacity: 0.35;
  cursor: default;
  border-color: var(--slate);
  color: var(--text-muted);
}

/* Solid accent fill when the slide is released (narration ended or the
   pacing timer expired). No animation. */
.nav-btn.ready {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
  opacity: 1;
}

/* ── Top controls: Exit / Chapters / References ──────────────────────────────
   Touch equivalents for the keyboard-only actions (nothing here needs a
   keyboard). The row itself is click-through; only the buttons take pointer
   events, so it never blocks a tap on the slide beneath. */
.course-controls {
  position: fixed; top: 0; left: 0; right: 0; z-index: 860;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 8px;
  pointer-events: none;
}
.course-controls > * { pointer-events: auto; }
.course-ctrl-group { display: flex; gap: 8px; }
.course-ctrl {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 8px 14px;
  background: var(--bg-elevated); border: 1px solid var(--slate); border-radius: 8px;
  color: var(--text); font-family: var(--font-stack); font-size: 13px; font-weight: 600;
  line-height: 1; cursor: pointer; white-space: nowrap;
  transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
}
.course-ctrl:hover { border-color: var(--accent); color: var(--accent); }
.course-ctrl:active { transform: translateY(1px); background: var(--slate); color: var(--text); }
.course-ctrl svg { width: 15px; height: 15px; flex: 0 0 auto; }
.course-ctrl[hidden] { display: none; }

/* ── Welcome and completion overlays ───────── */
.course-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.72);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 950;
}

.course-overlay.open {
  display: flex;
}

.overlay-panel {
  width: min(580px, 90vw);
  max-height: 85vh; max-height: 85dvh;
  overflow-y: auto;
  background: var(--bg-surface);
  border: 1px solid var(--slate);
  border-radius: 12px;
  padding: 34px 38px;
}

.overlay-panel h2 {
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 12px 0;
}

.overlay-panel p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0 0 16px 0;
}

.overlay-list {
  list-style: none;
  margin: 0 0 22px 0;
  padding: 0;
}

.overlay-list li {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  padding: 7px 0 7px 22px;
  position: relative;
}

.overlay-list li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 15px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.overlay-panel kbd {
  display: inline-block;
  background: var(--bg-elevated);
  border: 1px solid var(--slate);
  border-radius: 4px;
  padding: 1px 7px;
  font-size: 12px;
  font-family: inherit;
  color: var(--text);
}

.overlay-btn {
  display: inline-block;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: var(--bg);
  font-family: var(--font-stack);
  font-size: 15px;
  font-weight: 700;
  padding: 11px 26px;
  cursor: pointer;
  transition: filter 150ms ease;
}

.overlay-btn:hover {
  filter: brightness(1.1);
}

.overlay-btn:active {
  transform: translateY(1px);
  filter: brightness(0.92);
}

/* Course closure: result acknowledgement + actions */
.completion-result { text-align: left; margin: 2px 0 10px; }
.completion-result .result-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 9px 14px; border-radius: 8px; background: var(--bg-elevated); margin-bottom: 6px; font-size: 15px;
}
.completion-result .result-row span { color: var(--text-muted); }
.completion-result .result-row strong { color: var(--text); font-weight: 700; }
.completion-result .result-verdict.pass { color: var(--kc-correct); }
.completion-result .result-verdict.notyet { color: var(--amber); }
.completion-result .result-note { font-size: 13px; color: var(--text-muted); margin: 2px 2px 6px; }
.completion-result .result-recorded { font-size: 13px; color: var(--text-muted); margin-top: 8px; }
/* Overlay primary action pinned as a footer: always visible while the content
   scrolls; the opaque bar hides scrolled content and the border-top + shadow
   signal there is more above. Centred, works at every width. */
.overlay-panel { padding-bottom: 0; }
.overlay-panel > .overlay-foot,
.overlay-panel > .overlay-actions {
  position: sticky; bottom: 0; z-index: 1;
  margin: 16px -38px 0; padding: 16px 38px calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--bg-surface); border-top: 1px solid var(--slate);
  box-shadow: 0 -10px 12px -10px rgba(0,0,0,0.18); text-align: center;
}
.overlay-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.overlay-btn-secondary { background: var(--bg-elevated); border: 1px solid var(--slate); color: var(--text); }
.completion-closed { display: none; margin: 4px 0 2px; font-size: 15px; color: var(--text); }
.overlay-panel .training-link { color: var(--accent); font-weight: 600; text-decoration: underline; }

.completion-check {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #16a34a;
  color: #ffffff;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 16px 0;
}

/* Library icons (house asset store) in icon grids */
.icon-card svg.icon-symbol {
  width: 44px;
  height: 44px;
  margin: 0 auto 12px;
  display: block;
}

/* Slide enrichment: library illustrations and inline icons */
.layout-title .title-illustration {
  max-height: 230px;
  margin: 0 auto 28px;
  display: block;
}
.layout-chapter .chapter-illustration {
  position: absolute;
  right: 90px;
  top: 50%;
  transform: translateY(-50%);
  width: 330px;
  max-height: 400px;
}
.comparison-table svg.cell-icon {
  width: 22px;
  height: 22px;
  vertical-align: -5px;
  margin-right: 10px;
  color: var(--accent);
}
.flow-node svg.node-icon {
  width: 24px;
  height: 24px;
  display: block;
  margin: 0 auto 6px;
  color: inherit;
}

/* ============================================
   Motion standard: one entry per slide
   The content group rises into place when a slide becomes active, as one move.
   It used to arrive item by item, up to nine flowchart nodes 1.21s apart, which
   standards/motion.md rules out twice over: one focal point, and never animate
   what repeats on every page load. Vanilla CSS only: SCORM packages must stay
   offline and self-contained (no CDN frameworks). Honours prefers-reduced-motion.
   ============================================ */
@media (prefers-reduced-motion: no-preference) {
  .slide.active .slide-title { animation: sf-rise 0.4s ease-out both; }
  .slide.active .slide-subtitle,
  .slide.active .chapter-number { animation: sf-rise 0.4s ease-out 0.12s both; }
  .slide.active .title-illustration { animation: sf-pop 0.5s ease-out both; }
  .slide.active .chapter-illustration { animation: sf-pop 0.55s ease-out 0.18s both; }

  .slide.active .slide-body > * { animation: sf-rise 0.45s ease-out both; }
  .slide.active .two-col > *:nth-child(1) { animation: sf-rise 0.45s ease-out 0.2s both; }
  .slide.active .two-col > *:nth-child(2) { animation: sf-rise 0.45s ease-out 0.35s both; }

  .slide.active .stat-card-grid > .stat-card,
  .slide.active .icon-grid > .icon-card,
  .slide.active .step-diagram > .step-item,
  .slide.active .timeline > .timeline-item,
  .slide.active .kc-options > .kc-option,
  .slide.active .slide-list > li { animation: sf-rise 0.4s ease-out both; }

  .slide.active .flowchart > * { animation: sf-rise 0.35s ease-out both; }

  .slide.active .comparison-table tbody tr { animation: sf-fade 0.45s ease-out both; }

  .slide.active .slide-source { animation: sf-fade 0.6s ease-out 0.35s both; }
}

@keyframes sf-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes sf-pop {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: none; }
}
@keyframes sf-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ============================================
   Standard: centred content
   The content group sits centred in the slide; standalone images centre
   themselves on the horizontal axis.
   ============================================ */
.slide-body { justify-content: center; }
.slide-body > img { align-self: center; }
.step-diagram, .flowchart { justify-content: center; }
/* Images in grid cells centre in their cell; a start-aligned image dumps
   all spare cell width on one edge of the slide */
.two-col > img, .two-col-wide-right > img { justify-self: center; }
.two-col > div > img { display: block; margin-left: auto; margin-right: auto; }

/* Smooth rescale when the layout around the deck changes; never let flex
   shrink the fixed 1280x720 canvas on narrow windows (it squashes the deck
   into a portrait sliver before the transform is applied) */
.slide-scaler { transition: transform 0.3s ease; flex: 0 0 auto; }

/* ============================================
   Standard: animated show/hide of the study-notes panel + mobile layout
   ============================================ */
.companion-panel {
  transition: height 0.3s ease;
  overflow: hidden;
}
.companion-body {
  transition: opacity 0.22s ease 0.08s;
}
.companion-collapsed .companion-body {
  display: block;
  opacity: 0;
  pointer-events: none;
}
.slide-viewport {
  transition: height 0.3s ease;
}

@media (max-width: 700px) {
  .companion-panel { height: 42dvh; }
  .companion-collapsed .companion-panel { height: 40px; }
  .slide-viewport { height: 58dvh !important; }
  .companion-collapsed .slide-viewport { height: calc(100vh - 40px) !important; height: calc(100dvh - 40px) !important; }
  .companion-body { font-size: 16px; line-height: 1.55; }
    /* Notes bar stays ONE compact row: hide the title, keep labels on one line,
     and let the row scroll sideways if the buttons overflow. A fixed short
     height means it never grows tall or clips in fullscreen portrait. */
  .companion-header { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 6px 12px; }
  .companion-title { display: none; }
  .companion-slide-label { flex: 0 0 auto; }
  .companion-btn { min-height: 36px; white-space: nowrap; flex: 0 0 auto; }
  .companion-controls { flex: 0 0 auto; }
  .companion-panel { padding-bottom: env(safe-area-inset-bottom, 0px); }
  .companion-collapsed .companion-panel { height: 44px; }
}

/* ============================================
   Standard: vertical flowchart consistency
   Uniform node widths; the column flex container must not distribute
   heights (flex: 1 1 0 is for the horizontal orientation only).
   ============================================ */
.flowchart.vertical .flow-node {
  width: 100%;
  max-width: 560px;
  flex: 0 0 auto;
}

/* ============================================
   Standard: learner integrity + persistent help
   ============================================ */
/* Progress bar rides the top edge of the notes (companion) panel, tracking its
   state - never across the top of the slides, never at the screen bottom edge
   behind the panel. The mobile override comes after the base rule so the cascade
   resolves in its favour. */
.progress-bar { top: auto; bottom: 220px; z-index: 950; }
.companion-collapsed .progress-bar { bottom: 40px; }
@media (max-width: 700px) {
  .progress-bar { bottom: 42vh; bottom: 42dvh; }
  .companion-collapsed .progress-bar { bottom: 44px; }
}
/* Chapter menu: slides not yet reached are locked (no jumping ahead) */
.sidebar-chapter.locked, .sidebar-slide.locked {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ============================================
   Motion standard fix: transform-bearing elements
   sf-rise/sf-pop end on transform:none and fill-mode both keeps it, which
   clobbers stylesheet transforms. Elements that carry one (rotated vertical
   flow arrows, the absolutely-centred chapter illustration) animate opacity
   only, or a keyframe that preserves their transform.
   ============================================ */
.slide.active .flowchart > .flow-arrow { animation-name: sf-fade; }
.slide.active .chapter-illustration { animation: sf-pop-side 0.55s ease-out 0.18s both; }
@keyframes sf-pop-side {
  from { opacity: 0; transform: translateY(-50%) scale(0.96); }
  to { opacity: 1; transform: translateY(-50%); }
}