/* Framework default slide styles: the owned output vocabulary
   (DOCS/architecture.md) rendered neutrally on top of any stock reveal
   theme. Courses restyle via reveal's --r-* variables and their own
   extensions/styles/ sheets. */

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

.reveal .columns {
  display: flex;
  gap: 2em;
  align-items: flex-start;
}

.reveal .column {
  flex: 1;
  min-width: 0;
}

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

/* --- Callouts -------------------------------------------------------------- */

.reveal .callout {
  margin: 0.8em 0;
  border-left: 4px solid var(--callout-color, #607d8b);
  border-radius: 4px;
  background: color-mix(in srgb, var(--callout-color, #607d8b) 6%, transparent);
  font-size: 0.9em;
}

.reveal .callout-note      { --callout-color: #0288d1; }
.reveal .callout-tip       { --callout-color: #2e7d32; }
.reveal .callout-warning   { --callout-color: #f57c00; }
.reveal .callout-important { --callout-color: #c62828; }
.reveal .callout-caution   { --callout-color: #f9a825; }

.reveal .callout-title {
  padding: 0.4em 0.8em 0;
}

.reveal .callout-title p {
  margin: 0;
}

.reveal .callout-content {
  padding: 0.2em 0.8em 0.4em;
}

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

.reveal .cell {
  margin: 0.6em 0;
}

.reveal .cell-output pre {
  margin: 0.4em 0;
  padding: 0.5em 0.8em;
  font-size: 0.55em;
  line-height: 1.4;
  overflow: auto;
}

.reveal .cell-output-stderr pre,
.reveal .cell-output-error pre {
  border-left: 3px solid #c62828;
}

.reveal details.code-fold summary {
  cursor: pointer;
  font-size: 0.7em;
  opacity: 0.8;
}

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

.reveal figure.figure {
  margin: 0.6em auto;
}

.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 figure.figure figcaption {
  font-size: 0.7em;
  opacity: 0.75;
  margin-top: 0.3em;
}

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

/* --- Title slide ------------------------------------------------------------ */

.reveal section.title-slide h1.title {
  margin-bottom: 0.2em;
}

.reveal section.title-slide p.subtitle {
  font-size: 1.2em;
  margin-bottom: 1.6em;
}

.reveal section.title-slide p.author {
  margin-bottom: 0;
}

.reveal section.title-slide p.institute {
  font-size: 0.8em;
  opacity: 0.85;
}

/* --- Overflowing slides scroll ---------------------------------------------
   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; }
}

/* --- Figures ---------------------------------------------------------------
   A paragraph holding only an image is a figure on a slide: center it
   (quarto's revealjs default alignment). */

.reveal p > img:only-child {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* --- Column layout -----------------------------------------------------------
   `::: {.columns}` / `::: {.column width=…}` from the authoring dialect:
   side-by-side flex boxes. Gap is theme territory. */

.reveal .columns {
  display: flex;
  align-items: flex-start;
}

.reveal .column {
  flex: 1;
  min-width: 0;
}

/* --- 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 ----------------------------------------------------------------
   Reveal's stock slide-number badge and the menu plugin's font-awesome
   button are heavy; quiet both. The icon uses a mask so a theme recolors it
   with `background-color`. */

.reveal .slide-number {
  background-color: transparent;
  font-size: 0.8em;
}

/* Button offsets live in fixes.css (menu.js re-injects its own css at
   runtime; 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: #616161;
  -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;
}

/* Hoisted stretch images and figure images center horizontally. */

.reveal section > img.r-stretch,
.reveal figure > img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Padded boxes must not overflow their column. */

.reveal pre,
.reveal blockquote,
.reveal .callout {
  box-sizing: border-box;
}