/* Slide mechanics: what the output vocabulary (DOCS/architecture.md) needs
   to lay out on top of any stock reveal theme. No palette, sizes, or
   spacing; the deck theme loads after this sheet and supplies the look. */

/* --- Layout ---------------------------------------------------------------- */

/* `::: {.columns}` / `::: {.column width=…}`: side-by-side boxes. A column
   with a width keeps it as its basis; the rest share what is left. Widths
   that fill the row shrink in proportion to absorb the gap, never wrap. */
.reveal .columns {
  display: flex;
  align-items: flex-start;
}
.reveal .column {
  flex: 1 1 0;
  min-width: 0;
}
.reveal .column[style*="width"] {
  flex: 0 1 auto;
}

.reveal .slides section.center {
  text-align: center;
}

/* Content taller than the deck viewport must stay reachable; reveal core
   would clip it. Sections keep their full configured height so percentage
   positioning is unaffected. */
.reveal .slides section {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

@media print {
  .reveal .slides section { overflow: visible; }
}

/* Padded boxes must not overflow their column. */
.reveal pre,
.reveal blockquote,
.reveal .callout {
  box-sizing: border-box;
}

/* --- Cells ----------------------------------------------------------------- */

.reveal .cell-output pre {
  overflow: auto;
}

.reveal details.code-fold summary {
  cursor: pointer;
}

/* --- Figures ---------------------------------------------------------------- */

.reveal figure.figure img {
  max-width: 100%;
  height: auto;
}

.reveal figure.align-center,
.reveal .cell-output-display {
  text-align: center;
}

.reveal figure.align-left  { text-align: left; }
.reveal figure.align-right { text-align: right; }

.reveal img.align-left  { float: left; margin-right: 0.6em; }
.reveal img.align-right { float: right; margin-left: 0.6em; }

/* An image alone in its paragraph, a hoisted stretch image, and a figure's
   image are figures on a slide: centered. */
.reveal p > img:only-child,
.reveal section > img.r-stretch,
.reveal figure > img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* --- Widgets ----------------------------------------------------------------
   Script-driven containers (`::widget`): full slide width, content centered.
   Per-instance height rides the element's style attribute. */

.reveal .widget {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* --- Chrome ----------------------------------------------------------------
   The menu plugin's font-awesome glyph is replaced by a masked box, so a
   theme colours the icon with `background-color`. Button offsets live in
   fixes.css: menu.js re-injects its own css at runtime, and the override
   needs !important, which is quarantined there. */

.reveal .slide-menu-button .fas::before,
.reveal .slide-menu-button .fa::before {
  content: "";
  display: inline-block;
  height: 2.2rem;
  width: 2.2rem;
  background-color: currentColor;
  -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/></svg>') center / 2.2rem 2.2rem no-repeat;
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/></svg>') center / 2.2rem 2.2rem no-repeat;
}

/* --- Dark-background slides -------------------------------------------------
   Reveal marks sections whose backdrop is dark; text must flip to white. */

.reveal section.has-dark-background,
.reveal section.has-dark-background h1,
.reveal section.has-dark-background h2,
.reveal section.has-dark-background h3,
.reveal section.has-dark-background h4,
.reveal section.has-dark-background h5,
.reveal section.has-dark-background h6 {
  color: #fff;
}