/*
 * quarto-reveal.css — Quarto's reveal.js layer.
 *
 * Layout/styling Quarto adds on top of reveal.js core + theme. Single source
 * of truth for both render and preview:
 *   - q2 render inlines this via include_str! (crates/quarto-core/src/revealjs/assemble.rs)
 *   - q2 preview imports it (ts-packages/preview-renderer .../RevealDeck.tsx)
 * Keep it minimal and reveal-scoped. Extended per authoring phase.
 */

/* Columns (Phase 2c) — a flex row of `.column`s. Each column's `width=X%`
   becomes an inline `flex-basis: X%` (RevealColumnsTransform). Mirrors Quarto 1
   (`div.columns{display:flex; gap:min(4vw,1.5em)}`, `div.column{flex:auto}`). */
.reveal .columns {
  display: flex;
  gap: min(4vw, 1.5em);
}

.reveal .column {
  flex: auto;
  overflow-x: auto;
}

/* Asides (Phase 2e) — `::: {.aside}` → `<aside class="aside">`, shown small
   and muted at the bottom of the slide. (`aside.notes` is hidden by reveal.css.)
   Mirrors Quarto 1's `.reveal .slide aside` rule. */
.reveal .slides aside.aside {
  position: absolute;
  bottom: 20px;
  font-size: 0.6em;
  color: #6c757d;
}

/* Per-slide footnotes (Phase 2e-ii) — RevealFootnotesTransform coalesces each
   slide's footnotes into a `<div class="aside-footnotes"><ol>` inside the
   bottom aside. (`OrderedList` carries no class, so the class rides a wrapping
   div.) Mirrors Quarto 1's `.reveal .slide aside .aside-footnotes` rules. */
.reveal .slides aside .aside-footnotes {
  margin-bottom: 0;
}

.reveal .slides aside .aside-footnotes li:first-of-type {
  margin-top: 0;
}

/* Stretched video in `q2 preview` (bd-xfw2omlt). The video shortcode emits
   `<iframe class="r-stretch">`; `q2 render` makes it a direct child of the
   `<section>` so reveal sizes it. The preview renderer must inject raw HTML
   through a wrapper `<div>` (React `dangerouslySetInnerHTML`), so RawBlock
   mirrors `r-stretch` onto that wrapper — reveal then stretches the wrapper,
   and this rule makes the iframe fill it. Inert in `q2 render` (no such
   `div.r-stretch > iframe` structure there). */
.reveal .slides section > div.r-stretch > iframe {
  width: 100%;
  height: 100%;
  display: block;
}