/* handbook.css — web presentation of the semantic vocabulary and figures.
 *
 * The canonical Markdown names meaning; this stylesheet (plus the Material theme) decides what a
 * definition, a decision, or a tradeoff looks like on the web. It mirrors the Umber-Monograph accent
 * the PDF uses, so the two editions read as one book. Custom admonition types are registered here;
 * the Pandoc web filter emits `!!! definition "…"`, and these rules style it.
 */

:root {
  --hb-accent: #9a3f12;
  --hb-def: #1f6fae;
  --hb-good: #15803d;
  --hb-inset: #7c6bb0;
  --hb-case: #2f5169;
  --hb-warn: #b23b3b;
  /* One shared glyph for custom admonition types (Material needs an icon var per type). */
  --hb-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 4h16v2H4zm0 5h16v2H4zm0 5h10v2H4z"/></svg>');
  --md-admonition-icon--definition: var(--hb-icon);
  --md-admonition-icon--decision: var(--hb-icon);
  --md-admonition-icon--tradeoff: var(--hb-icon);
  --md-admonition-icon--case-study: var(--hb-icon);
  --md-admonition-icon--key-idea: var(--hb-icon);
  --md-admonition-icon--exercise: var(--hb-icon);
  /* A small book glyph for the quiet READ FURTHER box. */
  --md-admonition-icon--read-further: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zM7 4h4v8l-2-1.5L7 12V4z"/></svg>');
}

/* Dark-scheme contrast pass: the admonition hues are picked for the warm-paper ground; on the
 * family's warm-dark ground (mage-family.css slate tokens) lift each toward white so borders and
 * title tints stay legible. The accent follows the scheme's link color (rust, rust-tinted in dark). */
[data-md-color-scheme="slate"] {
  --hb-accent: var(--md-typeset-a-color);
  --hb-def: color-mix(in srgb, #1f6fae 55%, white);
  --hb-good: color-mix(in srgb, #15803d 55%, white);
  --hb-inset: color-mix(in srgb, #7c6bb0 65%, white);
  --hb-case: color-mix(in srgb, #2f5169 55%, white);
  --hb-warn: color-mix(in srgb, #b23b3b 65%, white);
}

/* Per-type accent color: border + title tint. The title-rule mixin Material uses keys off the
 * border color, so setting --hb-c and the border is enough. */
.md-typeset .admonition.definition,
.md-typeset details.definition { border-color: var(--hb-def); }
.md-typeset .definition > .admonition-title,
.md-typeset .definition > summary { background-color: color-mix(in srgb, var(--hb-def) 10%, transparent); }
.md-typeset .definition > .admonition-title::before,
.md-typeset .definition > summary::before { background-color: var(--hb-def); }

.md-typeset .admonition.decision { border-color: var(--hb-accent); }
.md-typeset .decision > .admonition-title { background-color: color-mix(in srgb, var(--hb-accent) 10%, transparent); }
.md-typeset .decision > .admonition-title::before { background-color: var(--hb-accent); }

.md-typeset .admonition.tradeoff { border-color: var(--hb-inset); }
.md-typeset .tradeoff > .admonition-title { background-color: color-mix(in srgb, var(--hb-inset) 10%, transparent); }
.md-typeset .tradeoff > .admonition-title::before { background-color: var(--hb-inset); }

.md-typeset .admonition.case-study { border-color: var(--hb-case); }
.md-typeset .case-study > .admonition-title { background-color: color-mix(in srgb, var(--hb-case) 10%, transparent); }
.md-typeset .case-study > .admonition-title::before { background-color: var(--hb-case); }

.md-typeset .admonition.key-idea { border-color: var(--hb-good); }
.md-typeset .key-idea > .admonition-title { background-color: color-mix(in srgb, var(--hb-good) 10%, transparent); }
.md-typeset .key-idea > .admonition-title::before { background-color: var(--hb-good); }

.md-typeset .admonition.exercise { border-color: var(--hb-accent); }
.md-typeset .exercise > .admonition-title { background-color: color-mix(in srgb, var(--hb-accent) 10%, transparent); }
.md-typeset .exercise > .admonition-title::before { background-color: var(--hb-accent); }

/* READ FURTHER: the curated end-of-chapter reading list. Rendered as a QUIET admonition — no colored
 * border, no fill, just a hairline separating it from the Summary prose above, a small tracked label,
 * and muted hanging-indent entries. It reads as end matter, not as one more colored callout. */
.md-typeset .admonition.read-further,
.md-typeset details.read-further {
  border: none;
  border-top: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  margin-top: 1.6em;
  padding-top: 0.2em;
  font-size: 0.85em;
  color: var(--md-default-fg-color--light);
}
.md-typeset .read-further > .admonition-title {
  background: transparent;
  color: var(--md-default-fg-color--light);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.md-typeset .read-further > .admonition-title::before {
  background-color: var(--md-default-fg-color--light);
}
/* Hanging indent per entry, so a wrapped citation aligns under its own first line. */
.md-typeset .read-further p {
  padding-left: 1.4em;
  text-indent: -1.4em;
  margin: 0.4em 0;
}

/* Figures: centered image, muted caption with the renderer-supplied "Figure N." prefix. */
.handbook-figure { margin: 1.6em auto; text-align: center; }
.handbook-figure img { max-width: 100%; height: auto; }
.handbook-figure figcaption {
  margin-top: 0.6em;
  font-size: 0.85em;
  color: var(--md-default-fg-color--light);
  text-align: center;
}

/* ── Home page (index.md only; these classes appear on no chapter page) ─────────────────────────
 * Top row: two peer button-styled links (PDF edition + the companion MAGE book), matching the MAGE
 * book's own top-row register. Theme-aware via the Material fg vars. */
.md-typeset .hb-top-row { display: flex; flex-wrap: wrap; gap: 0.6em; margin: 0.2em 0 0.4em; }
.md-typeset .hb-top-row a {
  font-weight: 600; padding: 0.4em 0.9em; border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 6px; color: var(--hb-accent);
}
.md-typeset .hb-top-row a:hover { border-color: var(--hb-accent); }
/* Contents left / cover right on a wide screen; below the breakpoint the row stacks and the cover
 * moves to the TOP at a small size (order: -1), just under the title block. */
.md-typeset .hb-home { display: flex; align-items: flex-start; gap: 2em; }
.md-typeset .hb-home-main { flex: 1 1 auto; min-width: 0; }
.md-typeset .hb-home-side {
  flex: 0 0 auto; width: 13.5em; max-width: 38%; margin-top: 1.8em;
  position: sticky; top: 4rem;
}
.md-typeset .hb-home-cover {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--md-default-fg-color--lightest); border-radius: 6px;
}
@media (max-width: 768px) {
  .md-typeset .hb-home { flex-direction: column; gap: 0; }
  .md-typeset .hb-home-side {
    order: -1; position: static; width: 9em; max-width: 45%; margin: 0.6em 0 0.4em;
  }
}

/* Math: rendered to HTML at build time (filters/web.lua Math handler), no client-side JS. Display
   math sits centered on its own line; inline math flows with the prose. */
.md-typeset .math.display {
  display: block;
  text-align: center;
  margin: 1.2em 0;
}