/* ============================================================
   Agora docs — MkDocs Material customization.
   Pluralis brand: Tufte-inspired, sans-serif body, weight-400 headings.
   Tokens lifted from PluralisResearch.github.io/app/globals.css.
   ============================================================ */

/* Inter powers the main text and diagrams, with system sans-serif fallbacks. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ── Pluralis design tokens ──────────────────────────────── */
:root {
  /* Type stacks */
  --p-font-body:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --p-font-code:  'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  /* Pluralis palette */
  --p-text:        #0d0f12;   /* body */
  --p-text-strong: #000;      /* headings, strong */
  --p-muted:       #4a4f57;   /* readable gray (was #71757e — too pale) */
  --p-muted-soft:  #6b7079;   /* still-readable secondary gray for sidenotes / captions */
  --p-bg:          #fff;
  --p-bg-soft:     #f8f8f8;
  --p-bg-softer:   #f3f3f3;
  --p-bg-figure:   #f9f9f9;
  --p-link:        #022548;   /* prose link, deeper than code; underlined */
  --p-link-hover:  #032f62;
  --p-code-link:   #005cc5;   /* code-style blue, distinctly lighter than --p-link */
  --p-purple:      #6f42c1;   /* highlight accent */
  --p-red:         #d73a49;
  --p-red-bg:      #fff0f0;

  /* Semantic colors used by figures + admonitions */
  --c-discovery:   #1a7f37;   /* Discovery / DHT / Seeds */
  --c-compute:     #005cc5;   /* Compute / Workers / Forward */
  --c-coord:       #6f42c1;   /* Coordination / Trainers */
  --c-failure:     #d73a49;   /* Faults / Ghost mode */
  --c-state:       #71757e;   /* Memory / state */
  --c-backward:    #bf8700;   /* Backward pass / gradients */
  --c-warn:        #bf8700;
  --c-warn-bg:     #fff8e1;
  --c-ok:          #1a7f37;
  --c-ok-bg:       #f0fff4;

  /* Surfaces and borders for figures (kept from docs-site, but darker
     so the gray lines actually read as lines on a printed page).      */
  --c-bg-figure:   #f9f9f9;
  --c-border:      #c8ccd1;   /* was #e5e5e5 — too pale */
  --c-border-soft: #d8dce0;   /* was #eeeeee */
  --c-border-strong:#b3b8bf;  /* was #dddddd */
  --c-bg-code:     var(--p-bg-soft);

  /* Diagram-specific aliases — kept at docs-site values so the swarm-fig
     zone diagram visually matches the reference exactly (forward arrow
     in the same blue, AllReduce tile in the same tinted bg). */
  --c-link:        #0969da;
  --c-link-bg:     #f0f7ff;

  /* Aliases needed by the swarm-fig CSS (it was written against earlier
     variable names; these map them onto the Pluralis tokens so muted
     text and surfaces resolve correctly instead of falling back to
     `inherit` and rendering at the wrong shade). */
  --c-muted:       var(--p-muted);
  --c-muted-soft:  var(--p-muted-soft);
  --c-text-strong: var(--p-text-strong);
  --c-bg:          var(--p-bg);
  --c-list:        var(--p-text);

  --radius:        4px;
  --radius-soft:   3px;
  --radius-card:   6px;
}

/* ── Material theme overrides — map Material vars to Pluralis ─ */
:root {
  --md-text-font: var(--p-font-body);
  --md-code-font: var(--p-font-code);
  --md-typeset-font-size: 17px;

  /* Header bar stays white via `palette.primary: white` in mkdocs.yml.
     Accent (link hover, active-TOC indicator) is Pluralis link blue. */
  --md-accent-fg-color:         var(--p-link);
  --md-accent-fg-color--transparent: rgba(3,47,98,0.08);
  --md-typeset-a-color:         var(--p-link);
  --md-default-fg-color:        var(--p-text);
  --md-default-bg-color:        var(--p-bg);
}

/* Header bar — "Agora" wordmark sits next to the temple-icon logo. */
.md-header__title {
  /* unset Material's default opacity/transform on small-screen tabs */
  opacity: 1;
  margin-left: 0;
}
.md-header__title .md-header__topic {
  font-family: var(--p-font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--p-text-strong);
  letter-spacing: -0.2px;
}
.md-header {
  border-bottom: 1px solid var(--c-border-soft);
  box-shadow: none;
}

/* Hide the duplicate "Agora" site-title at the top of the primary
   sidebar on desktop — the wordmark is now in the header. On mobile
   the drawer keeps it so users have a clear "drawer header" to tap. */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary .md-nav--primary > .md-nav__title {
    display: none;
  }
}

/* Breadcrumb current-item — added by extras.js so the path includes
   the current page name, not just its ancestors. The current item
   reads as plain text, darker and slightly bolder than the ancestor
   items, with a "›" separator before it.
   When the page H1 matches its section name (section-index pages
   like /quick-start/setup-guides/), extras.js applies the --current
   class to the existing ancestor <a class="md-path__link"> rather
   than appending a new <span>, so the rules below target the link
   as well as the ellipsis. */
.md-path,
.md-path__item,
.md-path__link,
.md-path__item .md-ellipsis {
  font-family: var(--p-font-body);
}
.md-path__item--current,
.md-path__item--current .md-path__link,
.md-path__item--current .md-ellipsis {
  color: var(--p-text-strong);
  font-weight: 600;
}
.md-path__item--current::before {
  content: "›";
  margin: 0 0.4em;
  color: var(--p-muted);
  font-weight: 400;
}

/* Sidebar group label (any nav title) — make section titles distinct
   from the page links underneath. */
.md-nav__title {
  color: var(--p-text-strong);
  font-weight: 600;
  font-size: 0.9rem;
}

/* Top-level section labels (Quick Start, Agora System) — collapsible
   sections render as <label class="md-nav__link"> in Material 9.x, NOT
   md-nav__title. Bold + dark colour to read as a section title. */
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link {
  color: var(--p-text);
  font-weight: 600;
}

/* "Agora System" is the most prominent label — picked via :has() so
   it's the *only* top-level item that gets the brand-prominence
   treatment. Hrefs in the sidebar are relative (no leading slash). */
.md-nav--primary > .md-nav__list > .md-nav__item:has(a[href*="agora-system/"]) > .md-nav__link {
  color: var(--p-text-strong);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0;
}
.md-nav--primary > .md-nav__list > .md-nav__item:has(a[href*="agora-system/"]) > .md-nav__link .md-ellipsis {
  font-size: inherit;        /* override Material's child .md-ellipsis size */
  font-weight: inherit;
}

/* Top-level link (Pluralis-8B run) — same size as everything else,
   colored Pluralis link blue so it's clearly clickable. */
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link {
  color: var(--p-link);
  font-weight: 500;
}
/* Active sidebar page accent uses Pluralis link blue */
.md-nav__link--active,
.md-nav__item--active > .md-nav__link {
  color: var(--p-link);
  font-weight: 500;
}

/* ── Body typography — Pluralis-style ─────────────────────── */
body, .md-typeset {
  font-family: var(--p-font-body);
  font-size: 17px;
  line-height: 1.45;
  color: var(--p-text);
}
/* All code (inline + block, in prose or in callouts) at one compact
   monospace size — 14 px. Smaller than 17 px body, distinct from
   surrounding prose, consistent everywhere. */
.md-typeset code,
.md-typeset pre,
.md-typeset pre code,
.admonition code,
.admonition pre,
.admonition pre code {
  font-family: var(--p-font-code);
  font-size: 14px;
  line-height: 1.5;
}
.md-typeset code { color: var(--p-code-link); background: var(--p-bg-soft); padding: 1px 4px; border-radius: 3px; }
.md-typeset pre code { color: inherit; background: none; padding: 0; }
.md-typeset pre {
  background: var(--p-bg-soft);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--radius);
}

/* Links: always underlined, distinctly darker than inline code */
.md-typeset a,
.md-typeset a:visited {
  color: var(--p-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: rgba(2, 37, 72, 0.45);
}
.md-typeset a:hover {
  color: var(--p-link-hover);
  text-decoration-color: var(--p-link-hover);
}
/* Don't underline links that wrap pure code, button-styled links, or obvious nav chrome */
.md-typeset a code,
.md-typeset a > code { text-decoration: none; }
.md-typeset .md-button,
.md-typeset .md-button:visited { text-decoration: none; }
.md-header a, .md-tabs a, .md-nav a, .md-footer a { text-decoration: none; }

.md-typeset strong { color: var(--p-text-strong); }

/* Headings — weight 400, pure black, Pluralis sizes */
.md-typeset h1 { font-weight: 400; font-size: 1.75rem; margin: 2.2rem 0 0.8rem; color: var(--p-text-strong); letter-spacing: 0; }
.md-typeset h2 { font-weight: 400; font-size: 1.25rem; margin: 1.8rem 0 0.4rem; color: var(--p-text-strong); letter-spacing: 0; }
.md-typeset h3 { font-weight: 400; font-size: 1rem;    margin: 1.4rem 0 0.3rem; color: var(--p-text-strong); letter-spacing: 0; }
.md-typeset h4 { font-weight: 600; font-size: 0.95rem; margin: 1.2rem 0 0.3rem; color: var(--p-text-strong); }

/* Hero subtitle / lede paragraph — opening paragraph after an H1 OR
   any paragraph explicitly marked with `class="lede"` reads slightly
   bigger and muted gray, like a Stripe / Goodfire intro lead. */
.md-typeset h1 + p,
.md-typeset .lede,
.md-typeset p.lede {
  font-size: 1.05rem;
  color: var(--p-muted);
}

/* Task list checkboxes — Material's default is too pale on white. Use
   a darker gray for unchecked, Pluralis link blue for checked. */
.md-typeset .task-list-indicator::before {
  background-color: var(--p-muted);
}
.md-typeset .task-list-control [type="checkbox"]:checked
  + .task-list-indicator::before {
  background-color: var(--p-link);
}

/* Tables — header slightly bigger than body, cells slightly smaller.
   Distinct visual hierarchy without relying on bold weight alone. */
.md-typeset table:not([class]) {
  font-size: 1em;
}
.md-typeset table:not([class]) th {
  font-size: 18px;                  /* slightly bigger than 17 px body */
  font-weight: 600;
  color: var(--p-text-strong);
  background: transparent;
  border-bottom: 2px solid var(--c-border-strong);
}
.md-typeset table:not([class]) td {
  font-size: 15px;                  /* slightly smaller than body */
  border-bottom: 1px solid var(--c-border-soft);
}

/* Sidebar and on-this-page TOC */
.md-sidebar--secondary {
  width: 14rem;
  /* Layer above the article column so wide diagrams (swarm-fig
     extends past the article at ≥1220 px) sit underneath the TOC
     visually. The white nav block below does the actual occluding. */
  z-index: 2;
}
/* Opaque white background ONLY behind the actual TOC list (and title),
   so the height tracks the real content length on every page. The
   horizontal box-shadow extends the white across the sidebar's natural
   side-padding (about 0.8 rem each side in Material's default layout)
   so a wide diagram can't peek through the gap between the nav block
   and the sidebar edges. The bg still stops at the last TOC item. */
.md-sidebar--secondary .md-nav--secondary {
  background: var(--c-bg);
  box-shadow: -1rem 0 0 var(--c-bg), 1rem 0 0 var(--c-bg);
}
.md-nav__title[for="__toc"] {
  font-family: var(--p-font-body);
  color: var(--p-muted);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 1px;
  font-weight: 600;
}
.md-nav__link {
  font-family: var(--p-font-body);
}

/* Buttons (md-button) — Pluralis-toned */
.md-typeset .md-button {
  font-family: var(--p-font-body);
  font-weight: 500;
}

/* Primary CTA button — readable at rest (light blue tint + deep blue
   text), strong on hover (deep blue fill + white text). Material's
   default with palette.primary: white was leaving the button nearly
   invisible until hovered. */
.md-typeset .md-button--primary {
  background-color: #dbeafe;
  border-color: #dbeafe;
  color: var(--p-link);
}
.md-typeset .md-button--primary:focus,
.md-typeset .md-button--primary:hover {
  background-color: var(--p-link);
  border-color: var(--p-link);
  color: #fff;
}

/* Footnotes — Tufte-style sidenotes (right rail on wide, inline on narrow) */
.md-typeset .footnote {
  font-size: 0.92rem;
  line-height: 1.45;
  color: rgba(0,0,0,0.65);
}
.md-typeset .footnote-ref {
  font-size: 0.75em;
  vertical-align: super;
  line-height: 0;
  color: var(--p-link);
  font-weight: 500;
}

/* Numbered hierarchical headings — opt-in per page by adding `{ .numbered }`
   after the page H1, e.g. `# Training Architecture { .numbered }`. Uses
   :has() to scope counters to articles whose H1 carries the marker class. */
.md-content article:has(h1.numbered) { counter-reset: h2; }
.md-content article:has(h1.numbered) h2 { counter-reset: h3; }
.md-content article:has(h1.numbered) h2::before {
  counter-increment: h2;
  content: counter(h2) ". ";
  color: var(--p-muted);
  margin-right: 0.2rem;
  font-weight: 400;
}
.md-content article:has(h1.numbered) h3::before {
  counter-increment: h3;
  content: counter(h2) "." counter(h3) " ";
  color: var(--p-muted);
  margin-right: 0.2rem;
  font-weight: 400;
}

/* Numbered figures — <figure class="agora-figure"> wraps each diagram and
   provides the soft-gray surface from docs-site (figure-container).        */
.md-content article { counter-reset: agora-fig; }
.md-typeset figure.agora-figure {
  counter-increment: agora-fig;
  margin: 2rem 0;
  background: var(--p-bg-figure);
  border-top: 1px solid var(--c-border-soft);
  border-bottom: 1px solid var(--c-border-soft);
  padding: 24px 0 18px;
  width: 100%;
  overflow-x: auto;
}

/* Wide architecture diagrams (.swarm-fig has min-width: 1100px) stay
   inside the article column and scroll horizontally within the figure
   frame, so they never spill into the navigation or table-of-contents
   columns.                                                           */
@media (min-width: 1220px) {
  .md-typeset figure.agora-figure:has(.swarm-fig) {
    width: 100%;
    max-width: 100%;
    margin-right: 0;
    overflow-x: auto;
  }
  .md-typeset figure.agora-figure .swarm-fig {
    padding: 0;
    margin: 0;
  }
}
.md-typeset figure.agora-figure figcaption {
  font-size: 13px;       /* smaller than diagram body (max 16 px) and prose (17 px) */
  line-height: 1.5;
  color: var(--p-muted);
  margin: 14px auto 0;
  padding: 0 24px;
  max-width: 800px;
  text-align: center;
  font-style: italic;
  font-family: -apple-system, system-ui, "Helvetica Neue", Arial, sans-serif;
}
/* Inline colour cues in figcaptions — match the arrow colour for the
   referenced flow so the legend in the caption reads like the diagram. */
.md-typeset figure.agora-figure figcaption .fig-forward {
  color: var(--c-link); font-weight: 600; font-style: normal;
}
.md-typeset figure.agora-figure figcaption .fig-backward {
  color: var(--c-warn); font-weight: 600; font-style: normal;
}
.md-typeset figure.agora-figure figcaption .fig-discovery {
  color: var(--c-ok); font-weight: 600; font-style: normal;
}
.md-typeset figure.agora-figure figcaption::before {
  content: "Figure " counter(agora-fig) ". ";
  font-weight: 600;
  color: var(--p-text-strong);
  font-style: normal;
}

/* Diagrams use the same sans-serif stack as the rest of the docs. Inter
   falls back to the platform sans if the import fails or is blocked. */
.md-typeset .swarm-fig,
.md-typeset .agora-hero,
.md-typeset .ssn-fig,
.md-typeset .ipc-fig {
  font-family: 'Inter', -apple-system, system-ui, 'Helvetica Neue', Arial, sans-serif;
}

/* Semantic term highlighting (Goodfire-style) */
.t-discovery { color: var(--c-discovery); font-weight: 500; }
.t-compute   { color: var(--c-compute);   font-weight: 500; }
.t-coord     { color: var(--c-coord);     font-weight: 500; }
.t-failure   { color: var(--c-failure);   font-weight: 500; }
.t-state     { color: var(--c-state);     font-weight: 500; }
.t-backward  { color: var(--c-backward);  font-weight: 500; }

/* ── Body & typography (override retype defaults) ─────────── */
/* NB: variable used to be the never-defined `--font-body`, which
   silently resolved to `initial` and fell back to browser-default
   Times serif. Every page rendered the body, footer prev/next, and
   anything not inside .md-typeset in serif. Same one-character bug
   as the dev repo. */
html body {
  font-family: var(--p-font-body);
  background: var(--c-bg);
  color: var(--c-text);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

main h1, .markdown-section h1 {
  font-size: 36px; font-weight: 700; color: var(--c-text-strong);
  line-height: 1.2; letter-spacing: -0.5px;
}
main h2, .markdown-section h2 {
  font-size: 22px; font-weight: 700; color: var(--c-text-strong);
  margin-top: 48px; margin-bottom: 14px; letter-spacing: -0.2px;
}
main h3, .markdown-section h3 {
  font-size: 16px; font-weight: 600; color: var(--c-text-strong);
  margin-top: 32px; margin-bottom: 8px;
}
main h4, .markdown-section h4 {
  font-size: 14px; font-weight: 600; color: var(--c-list);
  margin-top: 24px; margin-bottom: 6px;
}

main p, .markdown-section p { color: var(--c-list); }
main strong, .markdown-section strong { color: var(--c-text-strong); }
main ul, main ol, .markdown-section ul, .markdown-section ol { color: var(--c-list); }
main li, .markdown-section li { line-height: 1.6; }

main a, .markdown-section a { color: var(--c-link); text-decoration: none; }
main a:hover, .markdown-section a:hover { text-decoration: underline; }

main hr, .markdown-section hr { border: none; border-top: 1px solid var(--c-border-soft); margin: 40px 0; }

/* ── Code (inline + block) ────────────────────────────────── */
main code, .markdown-section code {
  font-family: var(--font-code);
  font-size: 13px;
  background: var(--c-bg-code);
  padding: 1px 4px;
  border-radius: var(--radius-soft);
}
main pre, .markdown-section pre {
  background: var(--c-bg-code);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--radius);
  padding: 14px 18px;
  overflow-x: auto;
  line-height: 1.5;
}
main pre code, .markdown-section pre code { background: none; padding: 0; font-size: 13px; }

/* ── Tables ───────────────────────────────────────────────── */
main table, .markdown-section table {
  width: 100%; border-collapse: collapse;
  font-size: 13px; margin-bottom: 20px;
}
main th, .markdown-section th {
  text-align: left; font-weight: 600;
  color: var(--c-text-strong); padding: 8px 10px;
  border-bottom: 2px solid var(--c-border-strong);
  font-size: 12px;
}
main td, .markdown-section td {
  padding: 7px 10px; border-bottom: 1px solid var(--c-border-soft);
  color: var(--c-list); vertical-align: top;
}
main tr:last-child td, .markdown-section tr:last-child td { border-bottom: none; }
main tbody tr:hover, .markdown-section tbody tr:hover { background: var(--c-bg-soft); }

/* ── Callouts (retype admonitions → docs-site .callout look) ─
   Retype emits .admonition.admonition-info / .admonition-warning /
   .admonition-success. Map them visually to the reference style.
   ──────────────────────────────────────────────────────────── */
.admonition,
.md-typeset .admonition,
.md-typeset details {
  border-left: 3px solid var(--c-link);
  background: transparent;          /* dropped tinted bg per design ask */
  padding: 8px 16px 4px;
  margin: 20px 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--c-list);
  font-size: 14px;                  /* compact content text */
  line-height: 1.55;
}
.admonition p { margin-bottom: 6px; font-size: 1em; line-height: 1.5; }
.admonition p:last-child { margin-bottom: 0; }
.admonition ul { margin: 8px 0 0; padding-left: 20px; }
.admonition li { margin-bottom: 8px; font-size: 1em; line-height: 1.5; }
.admonition li:last-child { margin-bottom: 0; }

/* Everything inside admonitions — prose, code (inline + block), table
   cells — renders at the same body size. Earlier "callout prose bigger
   / callout code smaller" multipliers were cascading dangerously through
   `.admonition table` paths (admonition table → 0.95em parent → admonition
   code → 0.7em → ~11 px). One uniform body size avoids the cascade. */
.admonition,
.admonition p,
.admonition li,
.admonition td,
.admonition th,
.admonition code,
.admonition pre,
.admonition pre code,
.admonition table:not([class]) {
  font-size: 1em;
}
.admonition .admonition-title,
.md-typeset .admonition .admonition-title,
.md-typeset details > summary {
  font-size: 15px;                  /* bigger than 14px content, tight enough for the icon */
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.5;                 /* matches Material's icon-row baseline */
  color: var(--c-link);
  background: transparent;
}

/* Variant types now signalled by the left-border color and the title
   color only — backgrounds dropped per design ask. */
.admonition.admonition-warning,
.admonition-warning,
.md-typeset .admonition.warning {
  border-left-color: var(--c-warn);
  background: transparent;
}
.admonition.admonition-warning .admonition-title,
.admonition-warning .admonition-title,
.md-typeset .admonition.warning > .admonition-title { color: var(--c-warn); }

.admonition.admonition-success,
.admonition-success,
.md-typeset .admonition.success {
  border-left-color: var(--c-ok);
  background: transparent;
}
.admonition.admonition-success .admonition-title,
.admonition-success .admonition-title,
.md-typeset .admonition.success > .admonition-title { color: var(--c-ok); }

.admonition.admonition-danger,
.admonition-danger,
.md-typeset .admonition.danger {
  border-left-color: var(--c-err);
  background: transparent;
}
.admonition.admonition-danger .admonition-title,
.admonition-danger .admonition-title,
.md-typeset .admonition.danger > .admonition-title { color: var(--c-err); }

/* ── Architecture / pipeline-zone diagram ─────────────────── */
.swarm-fig {
  width: fit-content; min-width: 1100px; max-width: 1400px;
  margin: 0 auto; padding: 0 24px;
}
.swarm-fig .fig-header { margin-bottom: 14px; }
.swarm-fig .fig-header h2 { font-size: 22px; margin: 0 0 4px; }
.swarm-fig .fig-header .fig-subtitle { font-size: 13px; color: var(--c-muted); }
.swarm-fig .architecture {
  display: flex; gap: 0; align-items: stretch; min-height: 380px;
}
.swarm-fig .zone {
  display: flex; flex-direction: column;
  border: 1px solid var(--c-border); background: var(--c-bg);
  overflow: hidden;
}
.swarm-fig .zone-header { padding: 10px 14px 8px; border-bottom: 1px solid var(--c-border-soft); }
.swarm-fig .zone-number {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 1.5px; color: var(--c-muted-soft); margin-bottom: 2px;
}
.swarm-fig .zone-title { font-size: 16px; font-weight: 700; color: var(--c-text-strong); margin-bottom: 3px; }
.swarm-fig .zone-desc { font-size: 11px; color: var(--c-muted); line-height: 1.4; }
.swarm-fig .zone-body { flex: 1; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.swarm-fig .seed-zone { flex: 0 0 200px; border-radius: var(--radius-card) 0 0 var(--radius-card); }
.swarm-fig .pipeline-zone { flex: 1; min-width: 500px; }
.swarm-fig .trainer-zone { flex: 0 0 220px; border-radius: 0 var(--radius-card) var(--radius-card) 0; }

.swarm-fig .stage-grid { display: flex; gap: 5px; flex: 1; }
.swarm-fig .pipeline-stage {
  flex: 1; background: var(--c-bg-figure);
  border: 1px solid var(--c-border); border-radius: var(--radius);
  padding: 7px; display: flex; flex-direction: column; gap: 3px;
}
.swarm-fig .pipeline-stage.head, .swarm-fig .pipeline-stage.tail {
  border-color: var(--c-link); background: var(--c-link-bg);
}
.swarm-fig .stage-label {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 1px; color: var(--c-muted-soft);
}
.swarm-fig .stage-name { font-size: 13px; font-weight: 700; color: var(--c-list); }
.swarm-fig .stage-detail { font-size: 11px; color: var(--c-muted); line-height: 1.4; }
.swarm-fig .worker-node {
  background: var(--c-bg); border: 1px solid var(--c-border);
  border-radius: var(--radius); padding: 6px 8px; margin-top: 4px;
}
.swarm-fig .worker-label {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.8px; color: var(--p-muted-soft);
}
.swarm-fig .worker-gpu  { font-size: 11px; font-weight: 600; color: var(--p-text); }
.swarm-fig .worker-info { font-size: 11px; color: var(--c-muted-soft); }

.swarm-fig .ar-bar {
  margin-top: auto; padding: 5px 8px;
  background: var(--c-link-bg); border: 1px solid #d0e0f0;
  border-radius: var(--radius-soft); text-align: center;
}
.swarm-fig .ar-label {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 1px; color: var(--c-link);
}
.swarm-fig .ar-detail { font-size: 11px; color: var(--c-muted); }

.swarm-fig .seed-item, .swarm-fig .trainer-item {
  background: var(--c-bg-figure); border: 1px solid var(--c-border);
  border-radius: var(--radius); padding: 7px; flex: 1;
}
.swarm-fig .seed-name, .swarm-fig .trainer-name {
  font-size: 12px; font-weight: 600; color: var(--c-list);
}
.swarm-fig .seed-desc, .swarm-fig .trainer-desc {
  font-size: 11px; color: var(--c-muted); line-height: 1.4; margin-top: 3px;
}
.swarm-fig .trainer-tag {
  display: inline-block; font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.8px;
  padding: 2px 5px; border-radius: var(--radius-soft); margin-top: 3px;
}
.swarm-fig .tag-cpu { background: var(--c-link-bg); color: var(--c-link); }

.swarm-fig .arrow-col {
  width: 80px; flex-shrink: 0;
  display: flex; flex-direction: column; justify-content: center;
  align-items: center; gap: 8px; padding: 12px 0;
}
.swarm-fig .data-flow {
  display: flex; flex-direction: column; align-items: center;
  gap: 3px; width: 100%;
}
.swarm-fig .flow-direction {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 1px; color: var(--p-muted-soft);
}
.swarm-fig .flow-arrow-line { width: 100%; height: 2px; position: relative; }
.swarm-fig .flow-arrow-line .line { width: 100%; height: 2px; }
.swarm-fig .flow-arrow-line .head-right {
  position: absolute; right: -1px; top: 50%; transform: translateY(-50%);
  width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent;
}
.swarm-fig .flow-arrow-line .head-left {
  position: absolute; left: -1px; top: 50%; transform: translateY(-50%);
  width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent;
}
.swarm-fig .flow-payload {
  background: var(--c-bg); border: 1px solid var(--c-border);
  border-radius: var(--radius); padding: 4px 6px;
  width: 100%; text-align: center;
}
.swarm-fig .payload-what { font-size: 11px; font-weight: 600; color: var(--c-list); line-height: 1.3; }
.swarm-fig .payload-size { font-size: 10px; color: var(--c-muted-soft); margin-top: 2px; }

.swarm-fig .flow-forward .line { background: var(--c-link); }
.swarm-fig .flow-forward .head-right { border-left: 6px solid var(--c-link); }
/* Mirrored direction: same blue, points LEFT. Used where data-going-INTO-
   compute travels right-to-left in the layout (e.g. IPC: Trainer → Workers). */
.swarm-fig .flow-forward .head-left { border-right: 6px solid var(--c-link); }
.swarm-fig .flow-backward .line { background: var(--c-warn); }
.swarm-fig .flow-backward .head-left { border-right: 6px solid var(--c-warn); }
/* Mirrored direction: same yellow, points RIGHT. Used where data-coming-OUT-
   of-compute travels left-to-right in the layout (e.g. IPC: Workers → Trainer). */
.swarm-fig .flow-backward .head-right { border-left: 6px solid var(--c-warn); }
.swarm-fig .flow-discovery .line { background: var(--c-ok); }
.swarm-fig .flow-discovery .head-right { border-left: 6px solid var(--c-ok); }

.swarm-fig .zone-footer {
  padding: 5px 10px; border-top: 1px solid var(--c-border-soft);
  background: var(--c-bg-soft);
}
.swarm-fig .security-badge { display: flex; align-items: flex-start; gap: 5px; }
.swarm-fig .badge-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--c-ok);
  flex-shrink: 0;
  /* Align to the visual center of the FIRST text line, not the bounding-box
     center — keeps the dot lined up even when text wraps to two lines. */
  margin-top: 0.4em;
}
.swarm-fig .badge-text { font-size: 11px; color: var(--c-muted); }
.swarm-fig .badge-text strong { color: var(--c-list); }

/* Figure container — light gray surface around any HTML diagram */
.figure-container {
  margin: 36px -24px;
  background: var(--c-bg-figure);
  border-top: 1px solid var(--c-border-soft);
  border-bottom: 1px solid var(--c-border-soft);
  padding: 24px 0;
  width: calc(100% + 48px);
  overflow-x: auto;
}
.figure-caption {
  text-align: center; font-size: 12.5px; color: var(--c-muted);
  padding: 12px 24px 0; max-width: 800px; margin: 0 auto;
}

/* ── Sidenotes (Goodfire-style margin notes) ──────────────── */
.sidenote {
  display: block;
  margin: 6px 0 14px;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--c-muted);
  background: var(--c-bg-soft);
  border-left: 2px solid var(--c-border-soft);
  border-radius: 0 var(--radius-soft) var(--radius-soft) 0;
}
.sidenote strong { color: #555; font-weight: 600; }
.sidenote code { font-size: 11px; color: #666; }
.sidenote a { color: var(--c-link); }
.sidenote-number {
  font-size: 10px; font-weight: 600; color: var(--c-link); margin-right: 4px;
}
.note-ref {
  font-size: 10px; font-weight: 600; color: var(--c-link);
  text-decoration: none; vertical-align: super; line-height: 0; margin-left: 1px;
}
.note-ref:hover { text-decoration: underline; }

/* ── Mini hero diagram (homepage) ─────────────────────────────
   Three separate boxes (Discovery / Compute / Coordination), each
   with its own gray edge, sitting on the figure-container's gray
   surface. Discovery and Coordination = white internals; Compute
   keeps a soft Pluralis blue tint to mark it as the active layer. */
.agora-hero {
  display: flex; align-items: stretch; gap: 0;       /* boxes sit right next to the arrow columns */
  margin: 24px 0;
  background: transparent;
}
.agora-hero .hero-zone {
  flex: 1; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
  background: #fff;                   /* Discovery + Coordination: white */
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
}
.agora-hero .hero-zone.compute {
  background: var(--c-link-bg);       /* Compute: light blue tint, kept */
}
.agora-hero .hero-zone .hero-label {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 1.5px; color: var(--c-muted-soft);
}
.agora-hero .hero-zone .hero-title {
  font-size: 16px; font-weight: 700; color: var(--c-text-strong);
}
.agora-hero .hero-zone .hero-desc {
  font-size: 12.5px; color: var(--c-muted); line-height: 1.4;
}
.agora-hero .hero-arrow {
  flex: 0 0 64px;                     /* wider column → more visual reach between zones */
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  font-size: 24px; color: var(--c-link); font-weight: 700;
}

/* ── Subspace Networks compression diagram ───────────────── */
.ssn-fig {
  margin: 24px 0; padding: 18px 16px;
  background: var(--c-bg-figure); border: 1px solid var(--c-border-soft);
  border-radius: var(--radius-card);
}
.ssn-fig svg { display: block; margin: 0 auto; max-width: 100%; height: auto; }

/* ── Inter-process communication sequence diagram ────────── */
.ipc-fig {
  margin: 24px 0; padding: 18px 16px;
  background: var(--c-bg-figure); border: 1px solid var(--c-border-soft);
  border-radius: var(--radius-card);
}
.ipc-fig svg { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.ssn-fig .ssn-caption {
  text-align: center; font-size: 12.5px; color: var(--c-muted);
  margin-top: 10px;
}

/* ── Pills, chips, status grid (for future use) ──────────── */
.metric-chip {
  display: inline-block; padding: 6px 10px;
  background: var(--c-bg-soft); border: 1px solid var(--c-border-soft);
  border-radius: var(--radius); margin-right: 8px;
}
.metric-chip .metric-value {
  font-size: 16px; font-weight: 700; color: var(--c-text-strong);
}
.metric-chip .metric-label {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.8px; color: var(--c-muted-soft);
}
.tag {
  display: inline-block; font-size: 10px; font-weight: 600;
  padding: 1px 5px; border-radius: var(--radius-soft); vertical-align: middle;
}
.tag-blue   { background: #dbeafe; color: #1d4ed8; }
.tag-yellow { background: #fef3c7; color: #92400e; }
.tag-green  { background: #d1fae5; color: #065f46; }
.tag-gray   { background: #f3f4f6; color: #6b7280; }

/* ── Cloud-provider screenshot styling ────────────────────── */
img.docs-screenshot, .docs-screenshot img {
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  max-width: 100%;
  margin: 6px 0 16px;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1100px) {
  .swarm-fig {
    min-width: 0; width: 100%; padding: 0;
  }
  .swarm-fig .architecture {
    flex-direction: column; min-height: 0;
  }
  .swarm-fig .seed-zone, .swarm-fig .pipeline-zone, .swarm-fig .trainer-zone {
    flex: 1 1 auto; min-width: 0; border-radius: 0;
  }
  .swarm-fig .seed-zone { border-radius: var(--radius-card) var(--radius-card) 0 0; }
  .swarm-fig .trainer-zone { border-radius: 0 0 var(--radius-card) var(--radius-card); }
  .swarm-fig .arrow-col {
    width: 100%; flex-direction: row; padding: 8px 12px; gap: 12px;
  }
  .swarm-fig .stage-grid { flex-wrap: wrap; }
  .swarm-fig .pipeline-stage { flex: 1 1 45%; min-width: 200px; }
}

@media (max-width: 700px) {
  .agora-hero { flex-direction: column; }
  .agora-hero .hero-zone + .hero-zone { border-left: none; border-top: 1px solid var(--c-border); }
  .agora-hero .hero-arrow {
    flex: 0 0 24px; height: 24px; transform: rotate(90deg);
  }
}

/* ============================================================
   Pluralis run-page restyle.
   Editorial system adapted from pluralis.ai/runs/pluralis-8b/.
   Content and MkDocs behaviour stay intact; this is presentation only.
   ============================================================ */

:root {
  --p-font-display: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --p-font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --p-font-code: "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --p-header-height: 90px;
  --p-rail-top: calc(var(--p-header-height) + 58px);

  --p-ink: #111;
  --p-body: #2a2a2a;
  --p-muted: #636363;
  --p-faint: #929292;
  --p-rule: #e2e2e2;
  --p-rule-soft: rgba(0, 0, 0, 0.08);
  --p-bg: #fff;
  --p-bg-soft: #fafafa;
  --p-bg-softer: #f3f3f3;
  --p-bg-warm: #dcd5c5;
  --p-link: var(--p-ink);
  --p-link-hover: #000;
  --p-code-link: var(--p-body);

  --c-bg: var(--p-bg);
  --c-list: var(--p-body);
  --c-muted: var(--p-muted);
  --c-muted-soft: var(--p-faint);
  --c-text-strong: var(--p-ink);
  --c-bg-figure: var(--p-bg-soft);
  --c-bg-code: var(--p-bg-soft);
  --c-border: var(--p-rule);
  --c-border-soft: var(--p-rule);
  --c-border-strong: rgba(0, 0, 0, 0.18);

  --md-text-font: var(--p-font-body);
  --md-code-font: var(--p-font-code);
  --md-typeset-a-color: var(--p-link);
  --md-default-fg-color: var(--p-body);
  --md-default-bg-color: var(--p-bg);
  --md-primary-fg-color: var(--p-bg);
  --md-primary-bg-color: var(--p-ink);
  --md-accent-fg-color: var(--p-ink);
  --md-accent-fg-color--transparent: rgba(0, 0, 0, 0.06);

  --radius: 4px;
  --radius-soft: 4px;
  --radius-card: 8px;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--p-header-height) + 24px);
  scrollbar-gutter: stable;
}

html,
body {
  max-width: 100vw;
  overflow-x: hidden;
}

body,
.md-typeset {
  background: var(--p-bg);
  color: var(--p-body);
  font-family: var(--p-font-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* Header: turn Material's app bar into a quiet editorial masthead. */
.md-header,
.md-header.md-header--shadow {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--p-bg);
  color: var(--p-ink);
  border-bottom: 1px solid var(--p-rule-soft);
  box-shadow: none;
  transform: none !important;
  width: 100%;
}

.md-container {
  padding-top: var(--p-header-height);
}

.md-header__inner {
  box-sizing: border-box;
  width: 100%;
  min-height: 88px;
  max-width: 800px;
  margin: 0 auto;
  padding: 18px 24px 14px;
}

@media screen and (min-width: 76.25em) {
  .md-header__inner {
    position: relative;
    max-width: 1080px;
  }

  .md-header__title {
    position: absolute;
    left: 0;
    top: 50%;
    width: auto;
    flex: 0 0 auto;
    transform: translateY(-50%);
  }

  .md-header__title .md-header__topic,
  .md-header__title .md-ellipsis {
    width: auto;
  }

  .md-header .md-search {
    margin-left: auto;
  }

  .md-header .md-source {
    margin-left: 24px;
  }
}

.md-header__button.md-logo {
  display: none;
}

.md-header__button {
  color: var(--p-ink);
  opacity: 1;
}

.md-header__title {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  margin: 0;
  min-width: 0;
  overflow: visible;
  text-align: center;
}

.md-header__title .md-header__topic {
  color: var(--p-ink);
  display: block;
  font-family: var(--p-font-display);
  font-size: 1.75rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  opacity: 1;
  position: static;
  transform: none;
}

.md-header__title .md-header__topic + .md-header__topic {
  display: none !important;
}

.md-header__title .md-ellipsis {
  overflow: visible;
  text-overflow: clip;
}

.md-search__form {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

#__search:checked ~ .md-header .md-search__form,
[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  background: var(--p-bg);
  border-bottom: 1px solid var(--p-rule);
  border-radius: 0;
  box-shadow: none;
}

.md-search__input,
.md-search__icon {
  color: var(--p-muted);
}

#__search:checked ~ .md-header .md-search__input,
[data-md-toggle="search"]:checked ~ .md-header .md-search__input {
  color: var(--p-ink);
  font-family: var(--p-font-body);
  font-size: 16px;
}

.md-search__input::placeholder {
  color: var(--p-faint);
}

.md-search__output {
  border: 1px solid var(--p-rule);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

/* Layout: reference page proportions, with MkDocs sidebars kept as rails. */
.md-grid {
  max-width: 1080px;
}

.md-main__inner {
  align-items: flex-start;
  gap: 48px;
  margin-top: 48px;
}

.md-content {
  min-width: 0;
}

.md-content__inner {
  box-sizing: border-box;
  width: 100%;
  max-width: 680px;
  margin: 0 auto 96px;
  padding: 0 0 0;
}

.md-sidebar {
  color: var(--p-faint);
  align-self: flex-start;
}

.md-sidebar--primary {
  width: 170px;
}

.md-sidebar--secondary {
  width: 170px;
  z-index: 2;
}

.md-sidebar__scrollwrap {
  margin: 0;
}

.md-sidebar .md-nav {
  font-family: var(--p-font-body);
  font-size: 13px;
}

.md-sidebar .md-nav__title,
.md-nav__title[for="__toc"] {
  background: transparent;
  box-shadow: none;
  color: var(--p-faint);
  font-family: var(--p-font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.45;
  padding: 0 0 10px;
  text-transform: uppercase;
}

.md-nav__link,
.md-nav__item .md-nav__link,
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link,
.md-nav--primary > .md-nav__list > .md-nav__item:has(a[href*="agora-system/"]) > .md-nav__link {
  color: var(--p-faint);
  font-family: var(--p-font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  margin-top: 6px;
  transition: color 120ms ease;
}

.md-nav__link:hover,
.md-nav__link:focus,
.md-nav__link--active,
.md-nav__item--active > .md-nav__link {
  color: var(--p-ink);
  font-weight: 400;
}

.md-sidebar--secondary .md-nav__link.md-nav__link--active:not([data-p-toc-active="true"]) {
  color: var(--p-faint);
  font-weight: 400;
}

.md-sidebar--secondary .md-nav__link[data-p-toc-active="true"],
.md-sidebar--secondary .md-nav__link[aria-current="true"] {
  color: var(--p-ink) !important;
  font-weight: 400 !important;
}

.md-sidebar--secondary .md-nav--secondary {
  background: var(--p-bg);
  box-shadow: -16px 0 0 var(--p-bg), 16px 0 0 var(--p-bg);
}

@media screen and (min-width: 76.25em) {
  .md-sidebar__scrollwrap {
    position: fixed;
    top: var(--p-rail-top);
    width: inherit;
    height: auto !important;
    max-height: calc(100vh - var(--p-rail-top) - 24px);
    overflow-y: auto;
    scrollbar-width: thin;
  }

  .md-sidebar--primary .md-sidebar__scrollwrap {
    left: calc((100vw - 1080px) / 2);
  }

  .md-sidebar--secondary .md-sidebar__scrollwrap {
    right: calc((100vw - 1080px) / 2);
  }
}

.md-nav__icon {
  color: var(--p-faint);
}

.md-sidebar--primary .md-nav__link > svg {
  display: none;
}

.md-path {
  color: var(--p-faint);
  font-family: var(--p-font-body);
  font-size: 13px;
  box-sizing: border-box;
  max-width: 680px;
  margin: 0 auto 28px;
  padding: 19px 20px 0;
}

.md-path__list {
  width: 100%;
}

.md-path__link,
.md-path__item .md-ellipsis {
  color: var(--p-faint);
  font-family: var(--p-font-body);
}

.md-path__item--current,
.md-path__item--current .md-path__link,
.md-path__item--current .md-ellipsis {
  color: var(--p-ink);
  font-weight: 400;
}

/* Prose. */
.md-typeset {
  color: var(--p-body);
}

.md-typeset h1,
main h1,
.markdown-section h1 {
  margin: 0 0 16px;
  color: var(--p-ink);
  font-family: var(--p-font-display);
  font-size: clamp(34px, 4.7vw, 52px);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.06;
}

.md-typeset h2,
main h2,
.markdown-section h2 {
  margin: 44px 0 14px;
  color: var(--p-ink);
  font-family: var(--p-font-display);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.3;
}

.md-typeset h3,
main h3,
.markdown-section h3 {
  margin: 32px 0 10px;
  color: var(--p-ink);
  font-family: var(--p-font-display);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.35;
}

.md-typeset h4,
main h4,
.markdown-section h4 {
  margin: 26px 0 8px;
  color: var(--p-ink);
  font-family: var(--p-font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.45;
}

.md-typeset h1 + p,
.md-typeset .lede,
.md-typeset p.lede {
  max-width: 560px;
  margin: 0 0 32px;
  color: var(--p-muted);
  font-size: 17px;
  line-height: 1.55;
}

.md-typeset p,
main p,
.markdown-section p {
  margin: 0 0 16px;
  color: var(--p-body);
  font-size: 16px;
  line-height: 1.75;
  overflow-wrap: break-word;
}

.md-typeset p:last-child {
  margin-bottom: 0;
}

.md-typeset strong,
main strong,
.markdown-section strong {
  color: var(--p-ink);
  font-weight: 600;
}

.md-typeset ul,
.md-typeset ol,
main ul,
main ol,
.markdown-section ul,
.markdown-section ol {
  margin: 0 0 16px;
  padding-left: 20px;
  color: var(--p-body);
}

.md-typeset li,
main li,
.markdown-section li {
  margin: 0 0 10px;
  color: var(--p-body);
  font-size: 16px;
  line-height: 1.7;
  overflow-wrap: break-word;
}

.md-typeset a,
.md-typeset a:visited,
main a,
.markdown-section a {
  color: var(--p-ink);
  text-decoration: underline;
  text-decoration-color: var(--p-rule);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 120ms ease, text-decoration-color 120ms ease;
}

.md-typeset a:hover,
main a:hover,
.markdown-section a:hover {
  color: var(--p-link-hover);
  text-decoration-color: var(--p-ink);
}

.md-header a,
.md-tabs a,
.md-nav a,
.md-footer a,
.md-typeset .headerlink {
  text-decoration: none;
}

.md-typeset .headerlink {
  color: rgba(0, 0, 0, 0.35);
  font-family: var(--p-font-body);
  font-size: 0.55em;
  opacity: 0;
  transition: opacity 120ms ease, color 120ms ease;
}

.md-typeset h1:hover .headerlink,
.md-typeset h2:hover .headerlink,
.md-typeset h3:hover .headerlink {
  opacity: 1;
}

.md-typeset hr,
main hr,
.markdown-section hr {
  border: none;
  border-top: 1px solid var(--p-rule);
  margin: 40px 0;
}

/* Buttons become reference-style text links. */
.md-typeset .md-button,
.md-typeset .md-button:visited {
  display: inline-block;
  margin: 0 20px 16px 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--p-muted);
  font-family: var(--p-font-body);
  font-size: 15px;
  font-weight: 400;
  text-decoration: none;
  transition: color 120ms ease;
}

.md-typeset .md-button--primary,
.md-typeset .md-button--primary:visited {
  color: var(--p-ink);
  font-weight: 500;
}

/* Conflicting older `.md-button:hover` block removed — it set the
   primary button's hover state to `transparent` background and
   black text, fighting the newer outlined/filled hover treatment
   defined later in this file. Cleanup so the cascade only contains
   one source of truth for button hover states. */

/* Code, tables, and callouts. */
.md-typeset code,
main code,
.markdown-section code,
.admonition code,
.admonition pre,
.admonition pre code {
  color: var(--p-body);
  font-family: var(--p-font-code);
  font-size: 0.82em;
}

.md-typeset code,
main code,
.markdown-section code {
  background: rgba(0, 0, 0, 0.035);
  border-radius: 4px;
  padding: 1px 4px;
}

.md-typeset pre,
main pre,
.markdown-section pre {
  box-sizing: border-box;
  max-width: 100%;
  background: var(--p-bg-soft);
  border: 1px solid var(--p-rule);
  border-radius: 8px;
  box-shadow: none;
  line-height: 1.5;
}

.md-typeset .highlight,
.md-typeset .highlighttable {
  box-sizing: border-box;
  max-width: 100%;
}

.md-typeset .highlight {
  margin: 0 0 16px;
  overflow-x: auto;
}

.md-typeset .highlight pre {
  margin: 0;
  width: 100%;
}

.md-typeset .highlight code {
  overflow-wrap: normal;
  white-space: pre;
}

.md-typeset pre code,
main pre code,
.markdown-section pre code {
  background: transparent;
  color: inherit;
  font-size: 13px;
  padding: 0;
}

.md-typeset table:not([class]),
main table,
.markdown-section table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid rgba(0, 0, 0, 0.15);
  font-size: 0.95em;
  margin: 20px 0 24px;
}

.md-typeset table:not([class]) th,
main th,
.markdown-section th {
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.12);
  color: var(--p-ink);
  font-size: 0.82em;
  font-weight: 600;
  padding: 8px 10px;
  text-align: left;
}

.md-typeset table:not([class]) td,
main td,
.markdown-section td {
  border: 1px solid rgba(0, 0, 0, 0.12);
  color: var(--p-body);
  font-size: 0.82em;
  padding: 8px 10px;
  vertical-align: top;
}

.md-typeset table:not([class]) tbody tr:nth-child(2n),
main tbody tr:nth-child(2n),
.markdown-section tbody tr:nth-child(2n) {
  background: rgba(0, 0, 0, 0.015);
}

.md-typeset .admonition,
.md-typeset details,
.admonition {
  margin: 20px 0;
  padding: 8px 16px 8px;
  background: transparent;
  border: 0;
  border-left: 3px solid var(--p-rule);
  border-radius: 0;
  box-shadow: none;
  color: var(--p-body);
  font-size: 14px;
  line-height: 1.55;
}

.md-typeset .admonition .admonition-title,
.admonition .admonition-title,
.md-typeset details > summary {
  background: transparent;
  color: var(--p-ink);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.5;
  margin: 0 0 4px;
  padding: 0;
}

.md-typeset .admonition .admonition-title::before,
.md-typeset details > summary::before {
  display: none;
}

.md-typeset .admonition.warning,
.admonition-warning {
  border-left-color: #bf8700;
}

.md-typeset .admonition.info,
.admonition-info {
  border-left-color: var(--p-rule);
}

.md-typeset .admonition p,
.admonition p,
.admonition li {
  color: var(--p-body);
  font-size: 1em;
  line-height: 1.55;
}

/* Figures and existing HTML diagrams. */
.md-content article {
  counter-reset: agora-fig;
}

.md-typeset figure {
  margin: 28px 0;
}

.md-typeset figure.agora-figure {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 32px 0;
  padding: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  background: var(--p-bg-soft);
  border: 1px solid var(--p-rule);
  border-radius: 8px;
  box-shadow: none;
}

.md-typeset figure.agora-figure:has(.swarm-fig) {
  --p-swarm-zoom: 1;
  overflow-x: hidden;
  overflow-y: visible;
}

@media (min-width: 1220px) {
  .md-typeset figure.agora-figure:has(.swarm-fig) {
    width: min(1280px, calc(100vw - ((100vw - 1080px) / 2 + 237px) - 32px));
    max-width: none;
    margin-right: 0;
  }

  .md-typeset figure.agora-figure .swarm-fig {
    margin: 0;
    padding: 0;
  }
}

@media (max-width: 760px) {
  .md-typeset figure.agora-figure:has(.swarm-fig) {
    --p-swarm-zoom: 0.47;
    margin-left: -20px;
    margin-right: -20px;
    width: calc(100% + 40px);
    max-width: none;
  }
}

@media (min-width: 761px) and (max-width: 900px) {
  .md-typeset figure.agora-figure:has(.swarm-fig) {
    --p-swarm-zoom: 0.58;
  }
}

@media (min-width: 901px) and (max-width: 1219px) {
  .md-typeset figure.agora-figure:has(.swarm-fig) {
    --p-swarm-zoom: 0.68;
  }
}

@media (min-width: 1220px) and (max-width: 1399px) {
  .md-typeset figure.agora-figure:has(.swarm-fig) {
    --p-swarm-zoom: 0.68;
  }
}

@media (min-width: 1400px) and (max-width: 1599px) {
  .md-typeset figure.agora-figure:has(.swarm-fig) {
    --p-swarm-zoom: 0.78;
  }
}

@media (min-width: 1600px) and (max-width: 1799px) {
  .md-typeset figure.agora-figure:has(.swarm-fig) {
    --p-swarm-zoom: 0.86;
  }
}

@media (min-width: 1800px) and (max-width: 1919px) {
  .md-typeset figure.agora-figure:has(.swarm-fig) {
    --p-swarm-zoom: 0.94;
  }
}

.md-typeset figure.agora-figure > .swarm-fig {
  width: max-content;
  min-width: 1220px;
  max-width: none;
  zoom: var(--p-swarm-zoom);
}

.md-typeset figure.agora-figure > .swarm-fig .architecture {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-height: 380px;
}

.md-typeset figure.agora-figure > .swarm-fig .seed-zone {
  flex: 0 0 200px;
  border-radius: var(--radius-card) 0 0 var(--radius-card);
}

.md-typeset figure.agora-figure > .swarm-fig .pipeline-zone {
  flex: 1 1 auto;
  min-width: 640px;
}

.md-typeset figure.agora-figure > .swarm-fig .trainer-zone {
  flex: 0 0 220px;
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
}

.md-typeset figure.agora-figure > .swarm-fig .arrow-col {
  flex: 0 0 80px;
  width: auto;
  height: auto;
  transform: none;
}

.md-typeset figure.agora-figure > .swarm-fig .stage-grid {
  display: flex;
  flex-wrap: nowrap;
}

.md-typeset figure.agora-figure > .swarm-fig .pipeline-stage {
  flex: 1 1 0;
  min-width: 0;
}

.md-typeset figure.agora-figure > .ssn-fig,
.md-typeset figure.agora-figure > .ipc-fig {
  min-width: min(760px, 100%);
}

.md-typeset figure.agora-figure figcaption,
.figure-caption,
.ssn-fig .ssn-caption,
.md-typeset figcaption {
  max-width: 680px;
  margin: 12px auto 0;
  padding: 0;
  color: var(--p-faint);
  font-family: var(--p-font-body);
  font-size: 13px;
  font-style: normal;
  line-height: 1.55;
  text-align: center;
}

.md-typeset figure.agora-figure figcaption::before {
  color: var(--p-ink);
  font-weight: 600;
}

.swarm-fig,
.md-typeset .swarm-fig,
.md-typeset .agora-hero,
.md-typeset .ssn-fig,
.md-typeset .ipc-fig,
.md-typeset .worker-fig,
.md-typeset .trainer-fig {
  font-family: var(--p-font-body);
}

.swarm-fig .zone,
.swarm-fig .worker-node,
.swarm-fig .flow-payload,
.agora-hero .hero-zone,
.ssn-fig,
.ipc-fig,
.worker-fig,
.worker-fig .wc-cell,
.trainer-fig {
  border-color: var(--p-rule);
}

.swarm-fig .zone,
.agora-hero .hero-zone {
  background: #fff;
}

.swarm-fig .pipeline-stage,
.swarm-fig .seed-item,
.swarm-fig .trainer-item,
.ssn-fig,
.ipc-fig,
.worker-fig,
.trainer-fig {
  background: #fff;
}

.swarm-fig .pipeline-stage.head,
.swarm-fig .pipeline-stage.tail,
.swarm-fig .ar-bar,
.agora-hero .hero-zone.compute,
.worker-fig .wc-cell,
.worker-fig .wc-cell.accent {
  background: #f3f3f3;
  border-color: var(--p-rule);
}

.swarm-fig .zone-title,
.swarm-fig .stage-name,
.swarm-fig .seed-name,
.swarm-fig .trainer-name,
.agora-hero .hero-zone .hero-title,
.worker-fig .worker-label,
.worker-fig .wc-name {
  color: var(--p-ink);
}

.swarm-fig .zone-desc,
.swarm-fig .stage-detail,
.swarm-fig .worker-info,
.swarm-fig .seed-desc,
.swarm-fig .trainer-desc,
.swarm-fig .payload-size,
.agora-hero .hero-zone .hero-desc,
.worker-fig .wc-desc {
  color: var(--p-muted);
}

.worker-fig {
  box-sizing: border-box;
  display: block;
  max-width: 880px;
  margin: 0 auto;
  padding: 18px 16px;
  border: 1px solid var(--p-rule);
  border-radius: 8px;
}

.worker-fig .worker-label {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}

.worker-fig .worker-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}

.worker-fig .wc-cell {
  box-sizing: border-box;
  flex: 1 1 calc(33.333% - 10px);
  min-width: 190px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--p-rule);
  border-radius: 6px;
}

.worker-fig .wc-name {
  margin: 0 0 3px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.worker-fig .wc-desc {
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
}

.trainer-fig {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 18px 16px;
  border: 1px solid var(--p-rule);
  border-radius: 8px;
}

.trainer-fig svg {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

img.docs-screenshot,
.docs-screenshot img {
  border: 1px solid var(--p-rule);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 8px 32px rgba(0, 0, 0, 0.06);
  margin: 8px 0 18px;
}

/* Footer and utility surfaces. */
.md-footer {
  background: var(--p-bg);
  color: var(--p-muted);
  border-top: 1px solid var(--p-rule);
}

.md-footer-meta {
  background: var(--p-bg);
}

.md-footer__link {
  color: var(--p-muted);
  /* Material's default `align-items: end` bottom-anchored the back/
     forward chevrons in the flex line, leaving them ~16 px below
     the vertical midpoint of the "Previous" / "Next" + page title
     stack. Center the arrow against the text instead so the SVG
     and the label share a midline. */
  align-items: center;
}
/* Material gives `.md-footer__title` a default `margin-bottom: 0.7rem`
   which shifts the title's bounding box DOWN within the flex line,
   throwing off the flex `align-items: center` that should otherwise
   line up the arrow and the title centers. Zero it so both children
   share the same midpoint. */
.md-footer__link .md-footer__title {
  margin-bottom: 0;
}

.md-footer__link:hover {
  color: var(--p-ink);
}

.md-top {
  background: var(--p-bg-soft);
  color: var(--p-muted);
  border: 1px solid var(--p-rule);
  border-radius: 6px;
  box-shadow: none;
}

.md-top:hover,
.md-top:focus {
  background: var(--p-bg);
  color: var(--p-ink);
}

/* Responsive fit: preserve the editorial feeling on the narrow in-app pane. */
@media screen and (max-width: 76.2344em) {
  .md-header__inner {
    min-height: 90px;
    padding: 24px 16px 12px;
  }

  .md-header__title {
    padding: 0;
  }

  .md-header__title .md-header__topic {
    font-size: 1.5rem;
  }

  .md-main__inner {
    display: block;
    margin-top: 34px;
  }

  .md-content__inner {
    max-width: 680px;
    margin: 0 auto 64px;
    padding: 0 20px;
  }

  .md-sidebar--primary,
  .md-sidebar--secondary {
    width: 242px;
  }

  .md-sidebar--primary {
    display: none;
  }

  [data-md-toggle="drawer"]:checked ~ .md-container .md-sidebar--primary {
    display: block;
  }

  .md-typeset h1,
  main h1,
  .markdown-section h1 {
    font-size: clamp(34px, 10vw, 40px);
    margin-bottom: 12px;
  }

  .md-typeset h1 + p,
  .md-typeset .lede,
  .md-typeset p.lede {
    margin-bottom: 28px;
    font-size: 16px;
  }

  .md-typeset h2,
  main h2,
  .markdown-section h2 {
    font-size: 22px;
    margin-top: 36px;
  }

}

@media screen and (max-width: 700px) {
  .md-typeset .md-button,
  .md-typeset .md-button:visited {
    margin-right: 16px;
    font-size: 14px;
  }

  .md-typeset table:not([class]) {
    font-size: 0.9em;
  }

  .md-typeset figure.agora-figure {
    margin-left: -20px;
    margin-right: -20px;
    width: calc(100% + 40px);
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    padding: 18px 20px;
  }
}

/* ── Post-launch stylistic refinements ────────────────────── */

/* 1. Header repo link "PluralisResearch/agora": was inheriting
   Material's tiny .65rem (~10.4px), unreadable next to the search
   bar. Bumped so the wordmark is actually legible. */
.md-header .md-source,
.md-header .md-source__repository {
  font-size: 13px;
}

/* 2. Left-rail nav section headers (e.g. "Agora System",
   "Quick Start") were var(--p-faint) #929292 at 13px — visually
   indistinguishable from regular page links nested under them, so
   the section structure didn't read at a glance. Darken to
   --p-ink and bump 1px so the hierarchy reads. !important needed
   to defeat the higher-specificity `:has(a[href*="…"])` rule that
   already targets section links at line 1169. */
.md-sidebar--primary .md-nav__item--section > .md-nav__link {
  /* Was var(--p-ink) #111 (effectively black). User prefers a dark
     gray for section labels so they read as a distinct hierarchy
     layer between the bold #111 active page and the faint #929292
     inactive links. #444 = strong enough to anchor the section but
     not competing with the active leaf for "you are here" weight. */
  color: #444 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* 3. Right-rail "TABLE OF CONTENTS" title: same fade-into-the-page
   problem at 11px / --p-faint. Match the LHS section-header
   treatment so both rails feel weight-balanced. */
.md-nav__title[for="__toc"] {
  color: var(--p-ink);
  font-size: 12px;
}

/* 4. Prose link underlines: text-decoration-color was --p-rule
   (#e2e2e2) — so faint that external links, which keep --p-ink
   text and rely entirely on the underline to signal "this is a
   link", were effectively invisible. Step to --p-muted (#636363)
   so the underline carries real contrast against #111 body text
   without going all the way to currentColor (which reads like an
   inline-emphasised word rather than a link). */
.md-typeset a,
.md-typeset a:visited,
main a,
.markdown-section a {
  text-decoration-color: var(--p-muted);
}

/* 5. Active page in the LHS nav: Material's default theme uses
   --md-accent-fg-color (#4051b5 indigo) for `.md-nav__link--active`,
   which clashes with the Pluralis monochrome palette. Override to
   --p-ink + weight 600 so the selected page reads as the strongest
   item in the rail without introducing a foreign accent colour.
   !important needed to defeat Material's higher-specificity rule. */
.md-sidebar--primary .md-nav__link--active,
.md-sidebar--primary .md-nav__item--active > .md-nav__link,
.md-sidebar--primary [aria-current="page"] {
  color: var(--p-ink) !important;
  font-weight: 600 !important;
}

/* 6. Breadcrumb separator alignment: Material draws `>` between
   `.md-path__item`s as a 12.8 px mask-image ::before pseudo on the
   non-first item. The parent <li> has `display: flex` but
   `align-items: normal`, so the fixed-height chevron defaults to
   flex-start (the top of the 27 px flex line) while the text
   baseline sits lower. Force `align-items: center` on every item
   so the chevron and the label text line up. Also pin
   `display: flex` on items that default to `list-item` so the
   alignment fix applies uniformly. */
.md-path .md-path__item {
  display: flex;
  align-items: center;
  gap: 3.2px;
}

/* 8. Removed: the ancestor-path highlight rule. Earlier iteration
   bolded any section link whose descendant contained the active page
   (so "Quick Start" stayed dark while you were on /quick-start/
   requirements/). On re-review the user found this confusing: it
   read as if BOTH "Quick Start" AND "Requirements" were the current
   page. Reverted so only the actual active leaf carries the dark
   highlight + left-border indicator; ancestor sections fall back to
   the faint default styling. */

/* Reverted: the always-bold "Pluralis-8B run" rule. The user
   prefers it to follow the same active/inactive cascade as every
   other link — bold only on the homepage where it has `--active`,
   faint otherwise so the nav state actually reflects the current
   page. Material's default cascade now governs this link. */

/* Active-leaf left-border indicator. Bold-text alone for the active
   page reads identically to the ancestor section that contains it
   (both color: --p-ink + weight 600), so the user can't tell which
   line is the *current* page vs which line is the *section it lives
   inside*. A 2 px ink-coloured left border on the active leaf gives
   "you are here" a distinct visual marker while the ancestor stays
   in its bold-but-borderless ancestor state. */
.md-sidebar--primary .md-nav__link--active {
  border-left: 2px solid var(--p-ink);
  padding-left: 6px;
  margin-left: -8px;
}

/* 7. Header right-cluster: lay out the custom "Pluralis Research"
   link and the GitHub source link side-by-side, pluralis on the
   LEFT, source on the RIGHT, vertically centred. extras.js wraps
   both in `.md-header__right-cluster` and inserts pluralis ahead
   of source in the DOM so the flow direction matches the visual
   order. */
.md-header__right-cluster {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  margin-left: auto;
  align-self: center;
}

/* Widen .md-source so the full "PluralisResearch/agora" handle fits
   without the ellipsis Material clips it with at 11.7 rem default.
   Also disable the inner ellipsis on the repository text so the
   wordmark renders end-to-end. */
.md-header__right-cluster .md-source {
  max-width: none;
  width: auto;
}
.md-header__right-cluster .md-source__repository {
  max-width: none;
  overflow: visible;
  text-overflow: clip;
}

/* GitHub source link: per request, revert to a smaller serif treatment
   so it reads as understated chrome rather than a primary brand mark.
   Override my prior "make it 13 px Inter" rule.
   Layout: flex with align-items:center so the GitHub icon and the
   "PluralisResearch/agora" text share a single vertical midpoint
   instead of Material's default block-baseline layout (which left
   the SVG 2 px LOWER than the text). */
.md-header .md-source {
  display: flex;
  align-items: center;
  gap: 4px;
}
.md-header .md-source,
.md-header .md-source__repository {
  font-family: Times, "Times New Roman", serif;
  font-size: 11px;
  font-weight: 400;
}
.md-header .md-source__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  width: auto;
  padding: 0;
  margin: 0;
}
.md-header .md-source__icon svg {
  display: block;
  width: 14px;
  height: 14px;
  margin: 0;
}
.md-header .md-source__icon + .md-source__repository {
  padding-left: 0;
  margin-left: 0;
}

/* Pluralis Research link (injected by extras.js into the right-cluster):
   small logo + label, links to pluralis.ai. Same compact serif as the
   GitHub source link so the two stacked items read as a matched pair. */
.md-header__pluralis-link {
  color: var(--p-ink);
  font-family: Times, "Times New Roman", serif;
  font-size: 11px;
  font-weight: 400;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: opacity 120ms ease;
}
.md-header__pluralis-link:hover {
  opacity: 0.7;
}
.md-header__pluralis-logo {
  width: 14px;
  height: 14px;
  display: block;
}

/* Header height: reverted the vertical-stack bump now that
   "Pluralis Research" and the source link sit on a single horizontal
   line. Material's default header height is fine again. */

/* 9. Buttons (`{ .md-button }` and `{ .md-button--primary }`) had
   ZERO padding and ZERO border under the prior CSS — they rendered
   as plain underlined text on the homepage CTAs ("Get started: Agora
   client", "Agora system overview") and anywhere else `.md-button`
   was used. Restore visible affordance with a Pluralis-monochrome
   treatment: outlined default + filled primary. */
.md-typeset .md-button,
.md-typeset .md-button:visited,
.md-content .md-button {
  display: inline-block;
  padding: 8px 18px;
  margin: 6px 4px 6px 0;
  border: 1px solid var(--p-ink);
  border-radius: 4px;
  background: transparent;
  color: var(--p-ink);
  font-family: var(--p-font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.md-typeset .md-button:hover,
.md-content .md-button:hover {
  background: var(--p-ink);
  color: var(--p-bg);
  border-color: var(--p-ink);
  text-decoration: none;
}
.md-typeset .md-button--primary,
.md-content .md-button--primary {
  background: var(--p-ink);
  color: var(--p-bg);
  border-color: var(--p-ink);
}
.md-typeset .md-button--primary:hover,
.md-content .md-button--primary:hover {
  /* Hover state — a clearly LIGHTER gray than #111 rest so the
     interaction reads as feedback. Previous #333 was still too
     close to black to register; #555 is a perceptibly different
     tone (matches --p-muted #636363 visual weight). */
  background: #555;
  color: var(--p-bg);
  border-color: #555;
}

/* 10. Page-hero image — placed at the top of /docs/ and
   /docs/agora-system/overview/ via an <img class="page-hero"> tag.
   Full-width within the article column, soft rounded corners, modest
   bottom margin so the H1 below sits in clear breathing room. */
.md-typeset img.page-hero,
.md-content img.page-hero {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 0 0 28px 0;
}

/* 11. Titles, prose headings, and the top-left wordmark in a serif
   stack (Times → Times New Roman → generic serif) — matches the Pluralis main site. Navigation rails (LHS
   sidebar + RHS TOC) intentionally stay Inter so the navigation
   chrome reads as a different layer from the content. */
.md-header__title,
.md-header__title .md-ellipsis,
.md-content h1,
.md-content h2,
.md-content h3,
.md-content h4,
.md-content h5,
.md-content h6,
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  font-family: Times, "Times New Roman", serif;
}

/* Top-left header wordmark uppercased so it renders as "AGORA"
   without changing site_name in mkdocs.yml (which would also
   uppercase the <title> tag and search results). */
.md-header__title .md-ellipsis,
.md-header__topic .md-ellipsis {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Align the header search bar's LEFT edge with the article column's
   left edge (where body prose begins). Material's flex layout
   parks the search ~3 rem right of that line; shift it visually
   left via `transform` so the box stays in its flex slot (the
   right-cluster's `margin-left: auto` is unaffected) and only the
   rendered position moves. Wide-viewport only; on narrow viewports
   the article column reaches further left so no shift is needed. */
@media screen and (min-width: 76.25em) {
  .md-header .md-search {
    transform: translateX(-3rem);
  }
}

/* 12. `:visited` color fix for primary buttons. The base button rule
   sets `.md-typeset .md-button:visited { color: var(--p-ink) }` —
   which silently applied to .md-button--primary too (same class)
   AFTER a click had visited the destination, turning the white
   button text BLACK on the black background. Browsers permit color
   overrides on :visited, so re-pin both color and background for
   the primary variant in the visited state. */
.md-typeset .md-button--primary,
.md-typeset .md-button--primary:visited,
.md-content .md-button--primary,
.md-content .md-button--primary:visited {
  background: var(--p-ink);
  color: var(--p-bg);
  border-color: var(--p-ink);
}

/* 13b. Active-search expansion direction.
   Material's default opens the search bar by expanding the inner
   panel from `width: 11.7rem` to `width: 34.4rem`, growing in BOTH
   directions from its current centre — so the LEFT edge shifts left
   by (34.4 − 11.7) / 2 = 11.35 rem when activated. The user wants
   the left edge to stay anchored at the article column. Push the
   active panel back to the right by the same 11.35 rem via
   `transform: translateX`, so the left edge of the open panel lines
   up with the left edge of the closed panel; the panel still grows
   to 34.4 rem total width, just entirely on the right side.

   Why `transform` and not `position: absolute`: pulling the inner
   out of flow collapses `.md-search` to zero width, which lets
   Material's flex layout slide the whole search box leftward. A
   transform leaves layout alone — it's a pure paint-time shift. */
@media screen and (min-width: 76.25em) {
  [data-md-toggle="search"]:checked ~ .md-header .md-search__inner {
    transform: translateX(11.35rem);
  }
}

/* 13. Search overlay: Material ships a `.md-search__overlay` element
   that pops to `height: 200vh; background: rgba(0,0,0,0.54)` the
   instant `data-md-toggle="search"` is checked — a full-page gray
   wash that's visible even before the user has typed a single
   character. The results panel itself (`.md-search__scrollwrap`)
   has its own white background and already auto-sizes to the actual
   number of results, so the page-wide dimmer adds no UX value while
   creating a big block of unrequested gray.

   Hiding it entirely means:
   - Clicking the search bar with no query → nothing extra shows.
   - Typing → the results panel appears, sized to its content (the
     "dynamic length" the user asked for falls out naturally from
     Material's existing scrollwrap auto-sizing). */
.md-search__overlay {
  display: none !important;
}

/* 14. Hide scrollbars on both sidebar scrollwraps. Material renders a
   thin scrollbar on the LHS nav and the RHS table-of-contents
   whenever their content exceeds the viewport — visually noisy on
   a primarily monochrome rail. Cleared via `scrollbar-width: none`
   for Firefox/standards and `::-webkit-scrollbar { display: none }`
   for Chromium/WebKit. Scrolling itself still works (touch / wheel
   / arrow-keys); only the visible scrollbar track disappears. */
.md-sidebar--primary .md-sidebar__scrollwrap,
.md-sidebar--secondary .md-sidebar__scrollwrap {
  scrollbar-width: none;
}
.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar,
.md-sidebar--secondary .md-sidebar__scrollwrap::-webkit-scrollbar {
  display: none;
}

/* 15. Bump header repo link + Pluralis Research link to 15 px. The
   prior 13 px (and Material's 11 px default) read as understated
   chrome; the user wants them more prominent — closer to the wordmark
   weight without overpowering it. */
.md-header .md-source,
.md-header .md-source__repository,
.md-header__pluralis-link {
  font-size: 15px;
}