/*
 * public/deck/deck.css
 *
 * Slideshow deck stylesheet. Ported verbatim from the-goat-hub's
 * hypno-hippo deck (2026-03-24, commit 6554f3a7 — "Pure HTML/CSS/JS
 * slideshow, no npm, no build step, no dependencies"), with the plotly
 * slide-type styling added on top.
 *
 * Design intent (locked in with Meghan 2026-09-15):
 *   - Dark chrome (header/nav/footer, gradient title slide)
 *   - White slide cards for text/equation/plotly, dark caption bars
 *     over image slides
 *   - KaTeX rendered LARGE on equation slides (2.2em) with the
 *     equation slide's own colour rules pinned so KaTeX's default
 *     mord/mrel/mbin/mop/minner/mfrac classes don't drift back to
 *     grey. The comment on the-goat-hub source read: "It is usually
 *     the equations that wreck the formatting" — hence the
 *     over-specified colour rules below. Leave them.
 *
 * Add plotly-slide styles below the equation block; do not reorder.
 * Any future style tweak on live decks: edit this file, rerun the
 * globalomni box's pm2 restart, every deck picks it up. No re-render
 * needed on Squiddlr side.
 */

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: #0f0f13;
  color: #e8e8e8;
  overflow: hidden;
  height: 100vh;
}

/* Header */
.header {
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  padding: 8px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #2a2a3e;
}
.header h1 { font-size: 1rem; color: #f5f5dc; }
.header .meta { font-size: 0.75rem; color: #8899aa; }
.header a { color: #5dade2; text-decoration: none; font-size: 0.8rem; }

/* Header actions: slide-style toggle (web deck vs Excalidraw board) */
.header-actions { display: flex; align-items: center; gap: 16px; }
.view-toggle { display: flex; align-items: center; gap: 6px; }
.view-toggle[hidden], #boardDownload[hidden] { display: none; }
.view-toggle button {
  background: #2a2a3e; color: #e8e8e8; border: 1px solid #44475a;
  border-radius: 6px; padding: 4px 10px; font-size: 0.8rem; cursor: pointer;
}
.view-toggle button[aria-pressed="true"] { background: #f5f5dc; color: #1a1a2e; border-color: #f5f5dc; }
.view-toggle button:focus-visible, #boardDownload:focus-visible { outline: 2px solid #5dade2; outline-offset: 2px; }
#boardDownload { margin-left: 6px; }

/* Slide container */
.slide-area {
  height: calc(100vh - 90px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow-y: auto;
}
.slide {
  max-width: 1100px;
  width: 90%;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
  overflow: hidden;
  display: none !important;
}
.slide.active { display: block !important; }
.slide-area[hidden] { display: none; }

/* Board view: one pre-rendered 16:9 frame image per slide */
.slide-board { margin: 0; max-width: min(1100px, calc((100vh - 260px) * 16 / 9)); }
.slide-board img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #fff; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.slide.active.slide-title,
.slide.active.slide-equation,
.slide.active.slide-plotly {
  display: flex !important;
}

/* Title slide */
.slide-title {
  background: linear-gradient(135deg, #1a1a2e, #0a3d62);
  color: #f5f5dc;
  padding: 60px;
  text-align: center;
  min-height: 500px;
  flex-direction: column;
  justify-content: center;
}
.slide-title h2 { font-size: 2.8rem; margin-bottom: 12px; line-height: 1.2; }
.slide-title .subtitle { font-size: 1.2rem; color: #aabbcc; margin-bottom: 30px; }
.slide-title .course { font-size: 0.95rem; color: #7799aa; }

/* Image slide */
.slide-image img { width: 100%; display: block; border-radius: 12px 12px 0 0; }
.slide-image .caption {
  background: #1a1a2e;
  padding: 20px 30px;
  border-radius: 0 0 12px 12px;
}
.slide-image .caption h3 { font-size: 1.3rem; color: #f5f5dc; margin-bottom: 6px; }
.slide-image .caption p { font-size: 1rem; color: #ccd0d4; line-height: 1.6; }

/*
 * Equation slide.
 *
 * KaTeX injects a lot of spans with its own classes (mord, mrel, mbin,
 * mop, minner, mfrac, katex-html). Those inherit `color: currentColor`
 * from KaTeX's stylesheet, which is grey-on-white by default. Pin them
 * back to #1a1a2e explicitly so equations don't come out ghost-grey on
 * a white slide. If you add new KaTeX class overrides, add them here.
 */
.slide-equation {
  background: #fff;
  padding: 50px;
  text-align: center;
  min-height: 400px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.slide-equation h3 { font-size: 1.5rem; color: #1a1a2e; margin-bottom: 30px; }
.slide-equation .katex-display { margin: 20px 0; }
.slide-equation .katex-display > .katex { font-size: 2.2em; color: #1a1a2e; font-weight: normal; }
.slide-equation .katex-display > .katex .katex-html { color: #1a1a2e; }
.slide-equation .katex-display > .katex .mord,
.slide-equation .katex-display > .katex .mrel,
.slide-equation .katex-display > .katex .mbin,
.slide-equation .katex-display > .katex .mop,
.slide-equation .katex-display > .katex .minner,
.slide-equation .katex-display > .katex .mfrac { color: #1a1a2e; }
.slide-equation .eq-label {
  font-size: 0.95rem;
  color: #666;
  font-style: italic;
  margin-top: 8px;
}
.slide-equation .note {
  font-size: 0.9rem;
  color: #666;
  margin-top: 20px;
  max-width: 600px;
  line-height: 1.5;
}
.slide-equation .highlight {
  background: #e8f4f4;
  padding: 16px 20px;
  border-radius: 8px;
  margin-top: 20px;
  font-size: 1.05rem;
  color: #1a1a2e;
  max-width: 600px;
}

/* Text slide */
.slide-text { background: #fff; padding: 50px; min-height: 400px; }
.slide-text h3 { font-size: 1.6rem; color: #1a1a2e; margin-bottom: 20px; }
.slide-text ul { margin-left: 24px; color: #333; }
.slide-text li { font-size: 1.1rem; line-height: 1.7; margin-bottom: 8px; }
.slide .katex-inline { white-space: nowrap; }
.slide-text .katex-inline > .katex,
.slide-image .katex-inline > .katex,
.slide-equation .note .katex-inline > .katex,
.slide-equation .highlight .katex-inline > .katex {
  color: currentColor;
}
.slide-text .quote {
  font-style: italic;
  font-size: 1.15rem;
  color: #555;
  border-left: 4px solid #3498db;
  padding: 12px 20px;
  margin: 20px 0;
  background: #f8f9fa;
  border-radius: 0 8px 8px 0;
}
.slide-text .highlight {
  background: #e8f4f4;
  padding: 16px 20px;
  border-radius: 8px;
  margin: 16px 0;
  font-size: 1.05rem;
  color: #1a1a2e;
}

/*
 * Plotly slide.
 *
 * Composable with the other types — put a plotly slide at any index in
 * the manifest. The renderer only loads plotly.min.js if the deck has
 * at least one plotly slide, so decks without one pay zero cost.
 * Plotly bundles are ~3MB; loading is deferred until we know we need it.
 */
.slide-plotly {
  background: #fff;
  padding: 40px 50px;
  min-height: 500px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}
.slide-plotly h3 {
  font-size: 1.5rem;
  color: #1a1a2e;
  margin-bottom: 20px;
  text-align: center;
}
.slide-plotly .plotly-target {
  flex: 1;
  min-height: 400px;
  width: 100%;
}
.slide-plotly .caption {
  font-size: 0.95rem;
  color: #555;
  margin-top: 16px;
  line-height: 1.5;
  text-align: center;
}

/*
 * Lecture visuals: tables, title image, and a text slide's visual.
 */
.slide.active.slide-table { display: flex !important; }
.slide-table {
  background: #fff; padding: 40px 50px; min-height: 420px;
  flex-direction: column; align-items: center;
}
.slide-table h3 { font-size: 1.5rem; color: #1a1a2e; margin-bottom: 20px; text-align: center; }
.slide-table .caption { font-size: 0.95rem; color: #555; margin-top: 16px; text-align: center; }
.deck-table { border-collapse: collapse; color: #1a1a2e; font-size: 1.05rem; max-width: 100%; }
.deck-table caption { caption-side: top; font-weight: 600; margin-bottom: 8px; }
.deck-table th, .deck-table td { border: 1px solid #c8ccd4; padding: 6px 14px; text-align: left; }
.deck-table th { background: #e9ecef; font-weight: 600; }
.deck-table tbody tr:nth-child(even) td { background: #f8f9fa; }
.deck-table .katex-inline > .katex { color: currentColor; }
.table-more { font-size: 0.8rem; color: #666; margin-top: 6px; }

.slide.active.slide-title.has-image { flex-direction: row; align-items: center; gap: 32px; text-align: left; }
.slide-title.has-image .title-text { flex: 1 1 50%; }
.slide-title .title-image { flex: 1 1 50%; max-width: 50%; max-height: 420px; object-fit: contain; border-radius: 8px; }

.text-visual.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px; align-items: center; }
.text-visual.stacked { display: flex; flex-direction: column; gap: 16px; }
.text-visual.stacked .slide-visual { display: flex; justify-content: center; overflow-x: auto; }
.slide-visual img { width: 100%; max-height: 440px; object-fit: contain; border-radius: 8px; }
.slide-visual .plotly-target { width: 100%; min-height: 380px; }
.slide-visual .katex-render { text-align: center; }
.slide-visual .katex-display > .katex { font-size: 1.8em; color: #1a1a2e; }
.slide-visual .katex-display > .katex .katex-html,
.slide-visual .katex-display > .katex .mord,
.slide-visual .katex-display > .katex .mrel,
.slide-visual .katex-display > .katex .mbin,
.slide-visual .katex-display > .katex .mop,
.slide-visual .katex-display > .katex .minner,
.slide-visual .katex-display > .katex .mfrac { color: #1a1a2e; }
.slide-visual .eq-label { font-size: 0.95rem; color: #666; font-style: italic; text-align: center; }
@media (max-width: 760px) {
  .text-visual.split { grid-template-columns: 1fr; }
  .slide.active.slide-title.has-image { flex-direction: column; }
  .slide-title .title-image { max-width: 100%; }
}

/* Speaker notes panel (below the slide; hidden until Notes / N) */
.notes-panel {
  height: 28vh; overflow-y: auto; background: #1a1a2e; color: #e8e8e8;
  border-top: 1px solid #2a2a3e; padding: 12px 24px;
}
.notes-panel[hidden] { display: none; }
.notes-panel .notes-label { font-size: 0.75rem; color: #8899aa; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
.notes-panel .notes-body { font-size: 1.05rem; line-height: 1.6; max-width: 70ch; }
.notes-panel .notes-body p { margin-bottom: 10px; }
.notes-panel .notes-empty { color: #8899aa; }
/* 72vh + 28vh panel; the extra 26px leaves room for the beta strip so the nav stays on screen. */
body.notes-open .slide-area { height: calc(72vh - 116px); }
body.notes-open .hint { display: none; }
.notes-tools { display: inline-flex; gap: 8px; margin-left: 12px; }
.notes-tools[hidden] { display: none; }
.nav button[aria-expanded="true"] { background: #f5f5dc; color: #1a1a2e; }
.nav button:focus-visible { outline: 2px solid #5dade2; outline-offset: 2px; }

/* Navigation */
.nav {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: #141418;
}
.nav button {
  background: #2a2a3e;
  border: none;
  color: #ccc;
  padding: 8px 24px;
  border-radius: 6px;
  font-size: 0.9rem;
  cursor: pointer;
}
.nav button:hover { background: #3a3a5e; color: #fff; }
.nav button:disabled { opacity: 0.3; cursor: default; }
.nav .counter { color: #777; font-size: 0.85rem; min-width: 80px; text-align: center; }

/* Keyboard hint */
.hint { position: fixed; bottom: 56px; right: 16px; font-size: 0.7rem; color: #444; }

footer {
  position: fixed;
  bottom: 0;
  right: 12px;
  font-size: 0.65rem;
  color: #444;
}
footer a { color: #444; text-decoration: none; }
.deck-bug-link {
  display: inline-flex;
  align-items: center;
  color: #F4B860;
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
  margin-left: 12px;
}
.deck-bug-link:hover { color: #ffe7b8; }
footer .deck-bug-link { margin-left: 0; font-size: 0.8rem; color: #F4B860; }

/* Beta strip (optional — controlled by window.__DECK__.beta) */
.beta-strip {
  background: #fff8e1;
  color: #7a5a00;
  border-bottom: 1px solid #e2a308;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 12px;
  line-height: 1.3;
}

/* Error state (manifest fetch failure) */
.deck-error {
  color: #cc6666;
  text-align: center;
  padding: 60px;
  background: #fff;
  border-radius: 12px;
  max-width: 600px;
}
.deck-error h2 { margin-bottom: 12px; }
.deck-error p { color: #888; margin-top: 12px; font-size: 0.95rem; }