/* How the course's figures sit on the page.
 *
 * Loaded by _quarto.yml on top of whatever theme is in force. Everything
 * here is expressed in Bootstrap's own custom properties, so it follows the
 * theme rather than fixing a palette of its own - including into dark mode,
 * where Quarto redefines the same properties.

 */

figure img,
figure svg,
.quarto-figure img,
.quarto-figure svg {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 4px;
}

/* The diagrams are drawn on a transparent ground on purpose, so they read
 * against the page itself. Only the screenshots want a panel behind them,
 * which is what fills a Live window's rounded corners. */
figure img[src$=".png"],
figure img[src$=".jpg"],
.quarto-figure img[src$=".png"],
.quarto-figure img[src$=".jpg"] {
  background: var(--bs-tertiary-bg, #f8f9fa);
}

figcaption,
.figure-caption,
.quarto-figure figcaption {
  font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, Menlo,
               monospace);
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--bs-secondary-color, #6c757d);
  margin-top: 0.5rem;
  text-align: left;
}

.quarto-video,
.quarto-video video,
figure video,
video {
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 4px;
  background: var(--bs-tertiary-bg, #f8f9fa);
}

/* Mermaid text.
 *
 * Node labels are deliberately left in Mermaid's own font. It sizes each
 * node box from the label measured in that font and draws the label into a
 * foreignObject of exactly that width, and a foreignObject clips to its own
 * rect whatever overflow says - so restyling a node label after layout
 * delivers "live_set" as "live_se". Edge labels float free of any box and
 * take the book's monospace safely, which is where the diagram's own
 * vocabulary (property and function names) actually appears. */
.mermaid .edgeLabel,
pre.mermaid .edgeLabel {
  font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, Menlo,
               monospace);
  font-size: 0.8rem;
}

.mermaid,
pre.mermaid {
  margin-block: 1.25rem;
}