/* ============================================================
   Oberon RTK — main stylesheet
   Custom hand-rolled CSS, no framework.
   Load order in page.html:  modern-normalize.css → main.css
   ============================================================ */


/* ========================================================================
   Fonts
   from: https://gwfh.mranftl.com/fonts/open-sans
   licence: https://github.com/google/fonts/blob/main/ofl/opensans/OFL.txt
   ======================================================================== */

/* open-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/open-sans-v44-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url('/fonts/open-sans-v44-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  src: url('/fonts/open-sans-v44-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('/fonts/open-sans-v44-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  src: url('/fonts/open-sans-v44-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('/fonts/open-sans-v44-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}



/* ============================================================
   :root — tweakables
   ---------------------------------------------------------------
   All visual constants live here. Edit, reload the browser —
   no Python rebuild needed. Grouped below; every property has a
   one-line comment explaining its effect.
   ============================================================ */

:root {
  /* -- Layout dimensions ------------------------------------ */
  --topbar-height:        56px;     /* sticky top bar */
  --sidebar-width:       260px;     /* left nav tree column */
  --content-max-width:   760px;     /* prose column cap */
  --toc-width:           220px;     /* right on-this-page column */
  --gutter:               32px;     /* between columns */
  --content-padding:      16px;     /* content inner padding */

  /* Total width of the column group (sidebar + content + toc + gaps).
     Drives the page's outer max-width so extra viewport width becomes
     symmetric left/right whitespace instead of stretching the content
     column. */
  --layout-max-width: calc(
    var(--sidebar-width) + var(--content-max-width)
    + var(--toc-width) + 2 * var(--gutter)
  );

  /* -- Typography: fonts ------------------------------------ */
  --font-body:            "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
                          Roboto, "Helvetica Neue", Arial, sans-serif,
                          "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-mono:            ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
                          "Liberation Mono", "Courier New", monospace;

  /* -- Typography: sizes & weights -------------------------- */
  --base-font-size:       16px;     /* body / p / li / strong */
  --h1-size:              1.9rem;   /* page title (template only, not body) */
  --h2-size:              1.7rem;
  --h3-size:              1.3rem;
  --h4-size:              1.0rem;   /* same as body; differentiated by weight */
  --lead-size:            1.1rem;   /* page subtitle below the H1 */
  --heading-weight:       600;      /* all headings share (per §7.4) */
  --strong-weight:        600;      /* equal to heading-weight, never bolder */
  --body-line-height:     1.5;      /* readable body rhythm */
  --heading-line-height:  1.2;      /* tight; avoids stretched wrap */

  /* -- Spacing rhythm (rastered: multiples of 0.25rem) ------ */
  --space-unit:                     0.5rem;      /* vertical-rhythm base */
  --space-paragraph:                0.75rem;     /* p → p, blockquote, figure */
  --space-h2-above:                 2.25rem;     /* h2 breathes most */
  --space-h3-above:                 1.5rem;      /* h3 */
  --space-h4-above:                 1rem;        /* h4 */
  --space-heading-below:            0.5rem;     /* small; creates heading+para unit */
  --space-heading-after-heading:    0.75rem;     /* h2 → h3 etc., stacked directly */
  --space-list-loose-gap:           0.5rem;      /* between <li>s in a loose list only */
  --list-indent:                    1.25em;      /* first-level list padding-left */

  /* -- Colours (light theme) -------------------------------- */
  --color-text:           #24292f;
  --color-background:     #ffffff;
  --color-link:           #0969da;
  --color-link-underline: #c8dffd;
  --color-muted:          #57606a;
  --color-rule:           #d0d7de;
  --color-code-bg:        #e9ecf0;

  /* admonition accents (left border + title tint) */
  --color-note:           #0969da;
  --color-tip:            #1a7f37;
  --color-important:      #6639ba;
  --color-warning:        #bf8700;
  --color-caution:        #d1242f;
  --color-danger:         #a40e26;
  --color-seealso:        #57606a;

  /* unresolved {ref} indicator */
  --color-unresolved:     #bf3a2f;
}

[data-theme="dark"] {
  --color-text:           #e6edf3;
  --color-background:     #0d1117;
  --color-link:           #58a6ff;
  --color-link-underline: #264165;
  --color-muted:          #8b949e;
  --color-rule:           #30363d;
  --color-code-bg:        #161b22;

  /* admonition accents adjusted for dark background */
  --color-note:           #58a6ff;
  --color-tip:            #3fb950;
  --color-important:      #a371f7;
  --color-warning:        #d29922;
  --color-caution:        #f85149;
  --color-danger:         #da3633;
  --color-seealso:        #8b949e;

  --color-unresolved:     #ff7b72;
}


/* ============================================================
   Reset
   (modern-normalize.css loaded separately before this file)
   ============================================================ */

html, body {
  min-height: 100%;
}

/* Anchor-jump offset — without this, TOC-link / footnote-ref clicks
   land the target under the sticky top bar. Applies to the root
   scrolling container. */
html {
  scroll-padding-top: calc(var(--topbar-height) + 0.5rem);
}

body {
  font-family: var(--font-body);
  font-size: var(--base-font-size);
  line-height: var(--body-line-height);
  color: var(--color-text);
  background: var(--color-background);
  /* Prevent accidental horizontal scrolling (iOS Safari will scroll
     sideways when focusing an input if the layout is even 1px wider
     than the viewport, which looks like the page "shifts" on tap). */
  overflow-x: hidden;
}


/* ============================================================
   Page grid — 3-column layout
   ---------------------------------------------------------------
   Top bar / footer span viewport edge-to-edge as direct body
   children. `.page` holds the 3-column grid (sidebar | content |
   toc). No outer max-width; only the content column is width-
   constrained (§5).
   ============================================================ */

.page {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr var(--toc-width);
  gap: var(--gutter);
  padding: 0 var(--content-padding);
  align-items: start;
  max-width: calc(var(--layout-max-width) + 2 * var(--content-padding));
  margin-inline: auto;
}


/* ============================================================
   Top bar
   ============================================================ */

.top-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-background);
  border-bottom: 1px solid var(--color-rule);
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  padding: 0 var(--content-padding);
}

.top-bar-inner {
  display: flex;
  align-items: center;
  gap: var(--gutter);
  width: 100%;
  max-width: var(--layout-max-width);
  margin-inline: auto;
}

.site-title {
  font-weight: var(--heading-weight);
  font-size: 1.1rem;
  color: var(--color-text);
  text-decoration: none;
  border: 0;
  flex-shrink: 0;
}

/* Hamburger — hidden on desktop; visible in mobile breakpoint below. */
.nav-toggle {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0.4rem 0.25rem;
  margin-right: 0.25rem;
  cursor: pointer;
  color: var(--color-text);
  display: none;  /* shown only in the mobile breakpoint */
  flex-direction: column;
  gap: 3px;
}
.nav-toggle-bar {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
}
/* Invisible click-catcher behind the drawer. No dim — the drawer is
   gutter-sized now, not a full-side panel, so a backdrop would feel
   heavy-handed. The overlay exists solely to close the drawer when
   the user taps outside it. */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 90;
  display: none;
}
body.nav-open .nav-overlay {
  display: block;
}
.site-title:hover {
  color: var(--color-link);
}

/* Top-bar entries — row of links after the site title. */
.top-bar-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 1.25rem;
  align-items: center;
  flex-wrap: wrap;
}
.top-bar-entry a {
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.95rem;
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
}
.top-bar-entry a:hover {
  color: var(--color-link);
}
.top-bar-entry-active a {
  color: var(--color-link);
  border-bottom-color: var(--color-link);
}

/* Search — input sits between the nav and the theme toggle; the
   results dropdown is absolutely-positioned below it. */
.search {
  position: relative;
  margin-left: auto;  /* push search + theme toggle to the right */
}
.search-input {
  font-family: inherit;
  /* 16px prevents iOS Safari's auto-zoom on focus, which otherwise
     shifts the whole viewport and appears to push the field off-screen. */
  font-size: 16px;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--color-rule);
  border-radius: 4px;
  background: var(--color-background);
  color: var(--color-text);
  width: 180px;
  -webkit-appearance: none;
  appearance: none;
}
.search-input:focus {
  outline: none;
  border-color: var(--color-link);
}
.search-results {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  width: min(340px, 90vw);
  max-height: 60vh;
  overflow-y: auto;
  /* Subtle tinted background distinguishes the panel from the page
     content beneath it — using the existing code-bg token avoids
     adding a new one for a single effect. */
  background-color: var(--color-code-bg);
  border: 1px solid var(--color-rule);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  z-index: 110;
}
.search-count {
  position: sticky;
  top: 0;
  padding: 0.4rem 0.75rem;
  font-size: 0.8rem;
  color: var(--color-muted);
  background-color: var(--color-code-bg);
  border-bottom: 1px solid var(--color-rule);
}
.search-hit {
  display: block;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--color-rule);
  color: var(--color-text);
  text-decoration: none;
}
.search-hit:last-child { border-bottom: 0; }
.search-hit:hover,
.search-hit:focus {
  background: var(--color-background);
  outline: none;
}
.search-hit-title {
  font-weight: var(--heading-weight);
  font-size: 0.95rem;
}
.search-hit-desc {
  font-size: 0.85rem;
  color: var(--color-muted);
  margin-top: 0.1rem;
}
.search-hit-snippet {
  font-size: 0.8rem;
  color: var(--color-muted);
  margin-top: 0.2rem;
  line-height: 1.3;
}
.search-status {
  padding: 0.6rem 0.75rem;
  color: var(--color-muted);
  font-size: 0.9rem;
}

/* Theme toggle button — pushed to far right of the top bar. */
.theme-toggle {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0.25rem;
  margin-left: 0.5rem;
  color: var(--color-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.theme-toggle:hover {
  color: var(--color-link);
}
.theme-icon {
  width: 1.15rem;
  height: 1.15rem;
  display: block;
}
/* Show sun in light mode, moon in dark mode. */
.theme-icon-moon { display: none; }
[data-theme="dark"] .theme-icon-sun  { display: none; }
[data-theme="dark"] .theme-icon-moon { display: block; }


/* ============================================================
   Breadcrumbs
   ============================================================ */

.content > article > .breadcrumbs,
.content .breadcrumbs {
  font-size: 0.9rem;
  color: var(--color-muted);
  margin: 0 0 var(--space-paragraph) 0;
}
.content .breadcrumbs a {
  color: var(--color-muted);
  text-decoration: none;
  border: 0;
}
.content .breadcrumbs a:hover {
  color: var(--color-link);
}
.content .breadcrumbs .sep {
  margin: 0 0.35em;
  color: var(--color-rule);
}
.content .breadcrumb-current {
  color: var(--color-text);
}


/* ============================================================
   Left sidebar
   ============================================================ */

.sidebar {
  position: sticky;
  top: var(--topbar-height);
  max-height: calc(100vh - var(--topbar-height));
  overflow-y: auto;
  padding: var(--space-paragraph) 16px var(--space-paragraph) 0;
  font-size: 0.95rem;
  /* Thin divider between sidebar and content column — Docsy-style
     structural hint. Mobile override below turns the sidebar into a
     bordered dropdown panel and replaces this rule. */
  border-right: 1px solid var(--color-rule);
}

/* Main-sections block inside the drawer — mobile-only; replaces the
   top bar when the hamburger is open. Hidden on desktop, where the
   top bar holds the same entries. */
.drawer-sections {
  display: none;
}

.sidebar-tree,
.sidebar-tree ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
/* Children indent matches the parent's chevron+gap width, so each
   child's text aligns vertically with its parent's text. */
.sidebar-tree {
  --sidebar-toggle-width: 1.15rem;
  --sidebar-toggle-gap: 0.25rem;
}
.sidebar-tree .sidebar-children {
  /* Children's icon (dot for leaves, chevron for nested sections)
     sits at the parent's text position plus a tiny 2–3 px indent,
     so each level visually "hangs under" the previous one's text. */
  padding-left: calc(var(--sidebar-toggle-width) + var(--sidebar-toggle-gap) + 0.05rem);
  display: none;  /* collapsed by default */
}
.sidebar-tree .sidebar-section.sidebar-expanded > .sidebar-children {
  display: block;
}
.sidebar-tree li {
  margin: 0;
  line-height: 1.3;
}
/* Inter-item spacing larger than the wrapped-line spacing, so a
   two-line item reads as one item rather than as two. */
.sidebar-tree li + li {
  margin-top: 0.35rem;
}
/* Leaf-item marker: a small bullet occupying the same width slot as
   the section chevron, so leaf text left-aligns with section text. */
.sidebar-tree .sidebar-leaf {
  display: flex;
  align-items: baseline;
  gap: var(--sidebar-toggle-gap);
}
.sidebar-tree .sidebar-leaf::before {
  content: "\2022";  /* U+2022 BULLET */
  flex-shrink: 0;
  width: var(--sidebar-toggle-width);
  text-align: center;
  color: var(--color-muted);
  font-size: 0.9em;
}
.sidebar-tree .sidebar-row {
  display: flex;
  align-items: baseline;
  gap: var(--sidebar-toggle-gap);
}
.sidebar-tree .sidebar-link {
  color: var(--color-text);
  text-decoration: none;
  border: 0;
  display: block;
  padding: 0.1rem 0;
  flex: 1;
}
.sidebar-tree .sidebar-link:hover {
  color: var(--color-link);
}
.sidebar-tree .sidebar-current > .sidebar-link,
.sidebar-tree .sidebar-current > .sidebar-row > .sidebar-link,
.sidebar-tree li.sidebar-current > a {
  font-weight: var(--heading-weight);
  color: var(--color-link);
}

/* Toggle chevron: small triangle, rotates 90° when expanded. */
.sidebar-toggle {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  width: var(--sidebar-toggle-width);
  height: var(--sidebar-toggle-width);
  cursor: pointer;
  color: var(--color-muted);
  font: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sidebar-toggle::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 5px solid currentColor;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  transition: transform 0.12s ease;
}
.sidebar-section.sidebar-expanded > .sidebar-row > .sidebar-toggle::before {
  transform: rotate(90deg);
}
.sidebar-toggle:hover {
  color: var(--color-text);
}


/* ============================================================
   Content — prose, headings, links, code, tables
   ============================================================ */

.content {
  max-width: var(--content-max-width);
  padding: var(--space-paragraph) 0;
  min-width: 0;  /* allow shrinking below intrinsic width so wide
                    <pre>/<table> children trigger overflow-x on
                    themselves, not on the page grid */
}

/* Anchor-jump offset — without this, clicking a TOC entry or
   footnote ref lands the target under the sticky top bar. */
.content [id] {
  scroll-margin-top: calc(var(--topbar-height) + 0.5rem);
}

/* Page title — set by the template, not the Markdown body. */
.content > article > h1 {
  font-size: var(--h1-size);
  font-weight: var(--heading-weight);
  line-height: var(--heading-line-height);
  margin: 0 0 var(--space-paragraph) 0;
}

/* Page subtitle / lead — rendered from frontmatter `description:`.
   Sits right under the H1; slightly larger than body, muted, sets up
   the page with a one-line summary. */
.content .lead {
  margin-top: 0;
  margin-bottom: 1.25rem;
  font-size: var(--lead-size);
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-muted);
}

/* Body prose elements: spacing above only; no spacing below. */
.content p,
.content ul,
.content ol,
.content dl,
.content blockquote,
.content figure,
.content pre,
.content table {
  margin-top: var(--space-paragraph);
  margin-bottom: 0;
}

/* First body element of the content column has no top margin. */
.content > :first-child,
.content > article > :first-child {
  margin-top: 0;
}

/* Headings — scoped; no <h1> in body per §9.1 convention. */
.content h2,
.content h3,
.content h4 {
  font-weight: var(--heading-weight);
  line-height: var(--heading-line-height);
  margin-bottom: var(--space-heading-below);
}
.content h2 { font-size: var(--h2-size); margin-top: var(--space-h2-above); }
.content h3 { font-size: var(--h3-size); margin-top: var(--space-h3-above); }
.content h4 { font-size: var(--h4-size); margin-top: var(--space-h4-above); }

/* Heading + following block = visual unit (suppress that block's top margin). */
.content h2 + p,
.content h3 + p,
.content h4 + p,
.content h2 + ul,
.content h3 + ul,
.content h4 + ul,
.content h2 + ol,
.content h3 + ol,
.content h4 + ol,
.content h2 + pre,
.content h3 + pre,
.content h4 + pre,
.content h2 + blockquote,
.content h3 + blockquote,
.content h4 + blockquote {
  margin-top: 0;
}

/* Heading after heading: tighter spacing. */
.content h2 + h3,
.content h2 + h4,
.content h3 + h4 {
  margin-top: var(--space-heading-after-heading);
}

/* Strong — not bolder than headings. */
.content strong {
  font-weight: var(--strong-weight);
}

/* Links — prose style. Underline alone is sufficient to recognise
   a link; colour only on hover for affordance. `text-underline-offset`
   clears descenders (otherwise they'd touch the line); it adapts
   to the active font automatically. Section-listing overrides below. */
.content a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--color-link-underline);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
  text-decoration-skip-ink: auto;  /* descenders break the line */
}
.content a:hover {
  color: var(--color-link);
  text-decoration-color: var(--color-link);
}

/* Unresolved-ref indicator (iteration 3). */
.content .unresolved-ref {
  color: var(--color-unresolved);
  border-bottom: 1px dotted var(--color-unresolved);
  cursor: help;
}

/* Lists. */
.content ul,
.content ol {
  padding-left: var(--list-indent);
}
.content li > ul,
.content li > ol {
  margin-top: 0;
  padding-left: var(--list-indent);
}

/* Ordered-list markers: rendered via CSS counters so positioning is
   identical across browsers. (Native `::marker` in Safari right-aligns
   to the content edge and lets wider numbers spill past the padding.) */
.content ol {
  list-style: none;
  counter-reset: rtk-ol;
}
.content ol > li {
  counter-increment: rtk-ol;
  position: relative;
}
.content ol > li::before {
  content: counter(rtk-ol) ".";
  position: absolute;
  left: calc(-1 * var(--list-indent));
  width: calc(var(--list-indent) - 0.25em);
  text-align: right;
}

/* Tight vs loose lists (§7.4, principle 11).
   - Default: items tight (no inter-item margin).
   - Loose list (items wrapped in <p>): add inter-item gap. */
.content li + li {
  margin-top: 0;
}
.content li:has(> p) + li {
  margin-top: var(--space-list-loose-gap);
}
/* Multi-paragraph list items: inter-paragraph gap. First <p> in <li>
   has no top margin (doesn't push content down inside the item). */
.content li > p {
  margin-top: 0;
}
.content li > p + p {
  margin-top: var(--space-paragraph);
}

/* Definition lists (`Term\n:   definition` syntax). */
.content dt {
  font-weight: var(--heading-weight);
  margin-top: var(--space-paragraph);
}
.content dl > dt:first-child {
  margin-top: 0;
}
.content dd {
  margin: 0 0 0 1.5rem;
}
/* Multi-paragraph <dd>: first <p> sits at top of dd; subsequent <p>s get
   inter-paragraph spacing. Same pattern as <li>. */
.content dd > p {
  margin-top: 0;
}
.content dd > p + p {
  margin-top: var(--space-paragraph);
}

/* Blockquote. */
.content blockquote {
  border-left: 3px solid var(--color-rule);
  margin-left: 0;
  padding-left: 1em;
  color: var(--color-text);
}

/* Horizontal rule. */
.content hr {
  border: 0;
  border-top: 1px solid var(--color-rule);
  margin: 1.5rem 0;
}

/* Code — inline and fenced. */
.content code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--color-code-bg);
  padding: 0.1em 0.3em;
  border-radius: 3px;
}
.content pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--color-code-bg);
  padding: 0.75em 1em;
  border-radius: 4px;
  overflow-x: auto;   /* §5.3: code blocks don't wrap; scroll horizontally. */
  line-height: 1.45;
}
.content pre code {
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-size: 1em;
}

/* Tables — cells wrap, no horizontal scroll (§5.3). */
.content table {
  border-collapse: collapse;
  width: 100%;
}
.content table th,
.content table td {
  padding: 0.4em 0.6em;
  border-bottom: 1px solid var(--color-rule);
  text-align: left;
  vertical-align: top;
}
.content table th {
  font-weight: var(--heading-weight);
  border-bottom: 2px solid var(--color-rule);
}

/* Images — fluid width, scales with the content column. */
.content img {
  max-width: 100%;
  height: auto;
}

/* Image links — the image IS the link, no underline. */
.content a.image-link,
.content figure a {
  text-decoration: none;
  display: inline-block;
}

/* Figures — {figure} directive (plain ![]() stays inline in prose). */
.content figure {
  margin-left: 0;
  margin-right: 0;
}
.content figure img {
  display: block;  /* block-level in a figure (centred alignment etc.) */
}
.content figure figcaption {
  margin-top: 0.25rem;
  font-size: 0.9rem;
  color: var(--color-muted);
}
.content figure figcaption > :first-child {
  margin-top: 0;
}

/* Admonitions — subtle left-border style (§7.4 principle, no tinted
   background). Each type gets its own accent via a scoped custom
   property so the rule body stays DRY. */
.content .admon {
  --admon-color: var(--color-note);
  margin-top: var(--space-paragraph);
  padding: 0.5rem 1rem;
  border-left: 4px solid var(--admon-color);
}
.content .admon-note     { --admon-color: var(--color-note); }
.content .admon-tip      { --admon-color: var(--color-tip); }
.content .admon-important{ --admon-color: var(--color-important); }
.content .admon-warning  { --admon-color: var(--color-warning); }
.content .admon-caution  { --admon-color: var(--color-caution); }
.content .admon-danger   { --admon-color: var(--color-danger); }
.content .admon-seealso  { --admon-color: var(--color-seealso); }

.content .admon-title {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-weight: var(--heading-weight);
  color: var(--admon-color);
  line-height: 1.2;
  margin: 0;
}
.content .admon-icon {
  width: 1.05em;
  height: 1.05em;
  flex-shrink: 0;
}
.content .admon-body > :first-child {
  margin-top: 0.25rem;
}

/* Pygments code-block frame: the formatter wraps its output in a
   <div class="highlight"><pre>…</pre></div>. We already style
   .content pre above; the Pygments-specific syntax-colour classes
   (.k, .s, .c1, etc.) come from the generated pygments.css. */
.content .highlight {
  margin-top: var(--space-paragraph);
}
.content .highlight pre {
  margin-top: 0;
}

/* Last-updated line (§4.8). Leaf pages only, rendered by template. */
.content .last-updated {
  margin-top: 2rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-rule);
  color: var(--color-muted);
  font-size: 0.9rem;
}


/* ============================================================
   Section listing (auto-generated on section pages — B3c)
   ============================================================ */

.content .section-listing {
  margin-top: 2rem;
}

.content .section-listing ul {
  list-style: none;
  padding-left: 0;
  margin-top: 0;
}

.content .section-listing li {
  margin-top: 0;
  padding: 0.5rem 0;
}

.content .section-listing-title {
  display: inline-block;
  font-size: 1.05rem;
  font-weight: var(--heading-weight);
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 0;
}
.content .section-listing-title:hover {
  color: var(--color-link);
}

.content .section-listing-description {
  margin-top: 0.25rem;
  color: var(--color-muted);
  font-size: 0.95rem;
  line-height: 1.4;
}


/* ============================================================
   Right TOC (on-this-page)
   ============================================================ */

.toc {
  position: sticky;
  top: var(--topbar-height);
  max-height: calc(100vh - var(--topbar-height));
  overflow-y: auto;
  padding: var(--space-paragraph) 0 var(--space-paragraph) 16px;
  font-size: 0.9rem;
  color: var(--color-muted);
  /* Thin divider between content and TOC — hidden at the 2-column
     breakpoint along with the TOC itself. */
  border-left: 1px solid var(--color-rule);
}
.toc-inner ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.toc-inner li {
  margin: 0;
  line-height: 1.25;
}
.toc-inner li + li {
  margin-top: 0.35rem;
}
.toc-inner li a {
  color: var(--color-muted);
  text-decoration: none;
  border: 0;
  display: block;
}
.toc-inner li a:hover {
  color: var(--color-link);
}
.toc-inner .toc-h3 {
  padding-left: 1rem;
}
.toc-heading {
  font-weight: var(--heading-weight);
  color: var(--color-text);
  font-size: 0.9rem;
  margin-bottom: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}


/* ============================================================
   Footer
   ============================================================ */

.footer {
  border-top: 1px solid var(--color-rule);
  padding: 1.25rem var(--content-padding);
  margin-top: 3rem;
  text-align: center;
  color: var(--color-muted);
  font-size: 0.9rem;
}
.footer p {
  margin: 0;
}
.footer p + p {
  margin-top: 0.125rem;
}
.footer a {
  color: var(--color-muted);
  border-bottom: 1px solid var(--color-rule);
  text-decoration: none;
}
.footer a:hover {
  color: var(--color-link);
  border-bottom-color: var(--color-link);
}


/* ============================================================
   Responsive — breakpoints
   ≥ 1280px : full 3-column
   768–1279 : 2-column (right TOC hidden)
   < 768px  : 1-column (left sidebar hidden)
   ============================================================ */

@media (max-width: 1279px) {
  .page {
    grid-template-columns: var(--sidebar-width) 1fr;
  }
  .toc {
    display: none;
  }
}

@media (max-width: 767px) {
  .page {
    grid-template-columns: 1fr;
    /* Wider L/R gutter at mobile so text/code doesn't touch the
       viewport's vertical scrollbar. */
    padding: 0 20px;
  }

  /* Tighten the top-bar gap so hamburger + title + search + theme
     toggle fit on a ~375px iPhone without overflowing. */
  .top-bar-inner {
    gap: 0.75rem;
  }
  /* Search: narrower input (top bar is tight at mobile), can shrink
     further if needed, snippet suppressed (it adds visual noise on a
     small screen), dropdown spans almost the full viewport width. */
  .search-input {
    width: 120px;
    min-width: 0;
  }
  .search-results {
    /* Pin to the viewport gutters instead of right-aligning under the
       small search input; avoids left-edge overflow on narrow screens. */
    position: fixed;
    top: calc(var(--topbar-height) + 4px);
    left: 12px;
    right: 12px;
    width: auto;
    max-height: 50vh;
  }
  .search-hit-snippet {
    display: none;
  }

  /* Hamburger visible, hides the top-bar link row to avoid clutter;
     the full tree is available via the drawer. */
  .nav-toggle {
    display: flex;
  }
  /* Hide the top-bar's own entry row (the drawer carries a copy). */
  .top-bar .top-bar-nav {
    display: none;
  }

  /* Sidebar becomes a dropdown panel pinned to the viewport gutters,
     matching the search-results panel — same "no-windows" feel. */
  .sidebar {
    position: fixed;
    top: calc(var(--topbar-height) + 4px);
    left: 12px;
    right: 12px;
    width: auto;
    max-height: calc(100vh - var(--topbar-height) - 20px);
    overflow-y: auto;
    background-color: var(--color-code-bg);
    border: 1px solid var(--color-rule);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    padding: var(--space-paragraph) var(--content-padding);
    z-index: 95;
    /* Hidden until the hamburger opens it; opacity+visibility avoids a
       layout flash and keeps animations cheap. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.12s ease, transform 0.12s ease, visibility 0s linear 0.12s;
  }
  body.nav-open .sidebar {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.12s ease, transform 0.12s ease;
  }

  /* Drawer: main-sections at top (replacing the top bar), then the
     current-section subtree below. Stack the formerly-horizontal
     top-bar entries as a vertical list. */
  .drawer-sections {
    display: block;
  }
  .drawer-sections .top-bar-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
  }
  .drawer-sections .top-bar-entry a {
    padding: 0.25rem 0;
    border-bottom: 0;
    font-size: 1rem;
  }
  /* Drawer holds only the main-sections list; within-section navigation
     happens via breadcrumbs and section listings on each page. Keeping
     the drawer short means it fits without scrolling even when iOS
     Safari's URL bar is on-screen. */
  .sidebar .sidebar-subtree {
    display: none;
  }
}


/* ============================================================
   Dark mode  (colour overrides are in :root[data-theme="dark"])
   ============================================================ */
/* No additional rules needed here — all dark-mode changes happen
   via custom properties redefined under [data-theme="dark"]. */