/* Common slide utilities for Reveal.js decks: article mode, topbar, TOC, notes, and font sizing */
:root {
  --accent: #0D47A1;
  --soft: #f4f6fb;
  --base-font-size: 160%;
  --topbar-h: 52px;
  --bottom-safe: 40px; /* reserved space for Reveal overlays (progress, controls, slide number) */
}

/* Base tweaks to Reveal theme */
.reveal h1, .reveal h2, .reveal h3 { color: var(--accent); }
.reveal section img { max-width: 100%; height: auto; }

/* Font scaling via CSS var */
.reveal { font-size: var(--base-font-size); }

/* Offset page content for fixed topbar in article mode only. In slides mode, the Reveal viewport is offset instead. */
body {
  margin: 0;
}
html.article-mode body {
  padding-top: var(--topbar-h);
}
/* Remove offset when topbar is hidden in fullscreen */
html.fullscreen-active body {
  padding-top: 0 !important;
}

/* Article mode: render slides as a continuous article */
html.article-mode {
  background: #fff;
}
html.article-mode .reveal {
  width: min(1100px, 96vw);
  margin: 0 auto;
  position: static;
  transform: none !important;
  box-shadow: none !important;
}
html.article-mode .reveal .slides {
  position: static;
  inset: auto;
  transform: none !important;
}
html.article-mode .reveal .slides section {
  position: static;
  display: block !important;
  transform: none !important;
  opacity: 1 !important;
  max-height: none !important;
  overflow: visible !important;
  margin: 1.5rem 0;
}
html.article-mode .reveal > .controls,
html.article-mode .reveal > .progress,
html.article-mode .reveal > .slide-number,
html.article-mode .reveal > .backgrounds {
  display: none !important;
}

/* Topbar */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 36px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid #e1e5f0;
  z-index: 10050;
}
html.article-mode .topbar {
  height: 44px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.9);
}
.topbar .bar-sep { width: 1px; height: 24px; background: #e1e5f0; }
.topbar .spacer { flex: 1 1 auto; }
.topbar button {
  padding: 4px 8px; font-size: 0.85rem; border-radius: 6px;
  border: 1px solid #bbb; background: #f8f8f8; cursor: pointer;
}
.topbar button:hover { background: #f0f0f0; }
.topbar .font-size-label { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: #333; }
.topbar #font-size-range { display: inline-block !important; width: 160px; }
.topbar #font-size-percent { min-width: 3ch; text-align: right; color: #555; }

/* Drawing overlay */
.draw-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 10030;
  pointer-events: none;
}
html.drawing-active .draw-canvas {
  pointer-events: auto;
  cursor: crosshair;
  touch-action: none;
}

/* Hide topbar in fullscreen */
html.fullscreen-active #topbar { display: none !important; }

/* TOC */
.toc-menu { position: relative; }
.toc-dropdown { position: absolute; top: 100%; left: 0; margin-top: 6px; min-width: 280px; max-height: 50vh; overflow: auto; background: #fff; border: 1px solid #e1e5f0; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.08); padding: 6px; z-index: 10060; }
.toc-dropdown[hidden] { display: none; }
.toc-dropdown ul { list-style: none; margin: 0; padding: 0; }
.toc-dropdown li { margin: 0; }
.toc-dropdown a { display: block; padding: 6px 8px; border-radius: 6px; color: #0a58ca; text-decoration: none; }
.toc-dropdown a:hover { background: #f4f6fb; }

/* Notes sidebar */
.notes-sidebar {
  position: fixed;
  top: var(--topbar-h);
  right: 0;
  bottom: 0;
  width: min(34vw, 420px);
  max-width: 100%;
  background: #fff;
  border-left: 1px solid #e1e5f0;
  z-index: 10040;
  display: none;
}
.notes-sidebar.open { display: block; }
.notes-sidebar h4 { margin: 10px; font-size: 0.95rem; color: #333; }
.notes-sidebar textarea {
  width: calc(100% - 20px);
  margin: 0 10px 10px;
  height: calc(100% - 50px);
  resize: none;
  border: 1px solid #e1e5f0;
  border-radius: 6px;
  padding: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* In article mode, keep slider visible */
html.article-mode .topbar #font-size-range { display: inline-block !important; }

/* Fragments visible in article mode */
html.article-mode .reveal .fragment { opacity: 1 !important; visibility: visible !important; transform: none !important; transition: none !important; }

/* Scrolling and interaction enhancements */
/* Enable per-slide vertical scrolling when content exceeds viewport (slides mode) */
.reveal .slides section {
  max-height: calc(100vh - var(--topbar-h) - var(--bottom-safe));
  padding-bottom: calc(var(--bottom-safe) + 6px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
}
/* In fullscreen, topbar is hidden; still reserve bottom overlays */
html.fullscreen-active .reveal .slides section {
  max-height: calc(100vh - var(--bottom-safe));
}
/* Ensure Reveal backgrounds don't intercept pointer events; keep content interactive */
.reveal > .backgrounds { pointer-events: none !important; }
.reveal > .slides { pointer-events: auto; }

/* Allow full-page scrolling in article mode by undoing Reveal's viewport/body locking */
html.article-mode,
html.article-mode body,
body.article-mode,
html.article-mode.reveal-viewport,
body.article-mode.reveal-viewport,
html.article-mode body.reveal-viewport {
  height: auto !important;
  min-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: visible !important;
}
/* Ensure Reveal containers don't enforce fixed viewport in article mode */
html.article-mode .reveal,
html.article-mode .reveal .slides {
  height: auto !important;
}
/* Reveal may add .reveal-viewport to the scrolling element; unlock it in article mode */
html.article-mode .reveal-viewport { overflow-y: auto !important; }
/* In article mode, slides are rendered as a continuous document already; make sure no per-section clipping */
html.article-mode .reveal .slides section {
  max-height: none !important;
  overflow: visible !important;
}
/* Avoid scroll chaining restrictions in article mode */
html.article-mode .reveal .slides { overscroll-behavior: auto !important; }

/* Offset Reveal's fixed viewport by topbar height to avoid clipping (slides mode)
   Apply to the actual viewport wrapper element (DIV.reveal-viewport in Reveal 5) */
html:not(.article-mode) .reveal-viewport {
  top: var(--topbar-h) !important;
  height: calc(100vh - var(--topbar-h)) !important;
}

/* Reset offset when fullscreen (topbar hidden) */
html.fullscreen-active:not(.article-mode) .reveal-viewport {
  top: 0 !important;
  height: 100vh !important;
}

/* Guarantee per-slide scrollbar when content exceeds viewport in slides mode */
html:not(.article-mode) .reveal .slides section {
  overflow-y: auto !important;
  max-height: calc(100vh - var(--topbar-h) - var(--bottom-safe)) !important;
  -webkit-overflow-scrolling: touch;
}