/* Angelo docs theme — corresponds to the memory + zettelkasten dashboards.
 *
 * Source of truth for the palette is the dashboards' Tailwind usage and
 * memory/dashboard/frontend/src/utils/colors.ts (the pastel entry-type colors).
 */

:root {
  /* Dashboard palette (Tailwind grays + blue-600 accent) */
  --ang-bg: #f9fafb;          /* gray-50  — page canvas */
  --ang-surface: #ffffff;     /* white    — cards/surfaces */
  --ang-border: #e5e7eb;      /* gray-200 */
  --ang-text: #111827;        /* gray-900 */
  --ang-text-2: #374151;      /* gray-700 */
  --ang-muted: #6b7280;       /* gray-500 */
  --ang-accent: #2563eb;      /* blue-600 */
  --ang-accent-hover: #1e40af;/* blue-800 */
  --ang-code-bg: #1f2937;     /* gray-800 — dark code blocks, like the chat markdown */

  /* Entry-type colors (verbatim from colors.ts) */
  --ang-plan: #C6DEF1;
  --ang-decision: #DBCDF0;
  --ang-checkpoint: #F2C6DE;
  --ang-experiment: #C9E4DE;
  --ang-todo: #F4CCCC;
  --ang-note: #FAEDCB;
  --ang-annotation: #F7D9C4;
  --ang-document: #E8E8E8;

  /* Soft accent surfaces (blue-50/200) + the ZK "research" rose accent */
  --ang-accent-soft: #eff6ff;        /* blue-50  */
  --ang-accent-soft-border: #bfdbfe; /* blue-200 */
  --ang-rose: #e11d48;               /* rose-600 — workshop/research accent */
  --ang-rose-soft: #fff1f2;          /* rose-50  */

  /* Radius scale, mirroring the dashboards' Tailwind rounding */
  --ang-r-chip: 0.35rem;   /* rounded    — chips, pills */
  --ang-r-control: 0.5rem; /* rounded-md — buttons, inputs, search */
  --ang-r-card: 0.75rem;   /* rounded-lg/xl — cards, panels, images */

  /* Light, flat elevation (shadow-sm / shadow-md) */
  --ang-shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.05);
  --ang-shadow-md: 0 4px 10px -3px rgba(17, 24, 39, 0.12);
}

/* ---- Map the brand onto Material's light scheme ---- */
[data-md-color-scheme="default"] {
  --md-default-bg-color: var(--ang-bg);
  --md-default-fg-color: var(--ang-text);
  --md-default-fg-color--light: var(--ang-text-2);
  --md-default-fg-color--lighter: var(--ang-muted);

  /* Light, dashboard-like chrome: white header with dark text, blue accent */
  --md-primary-fg-color: var(--ang-surface);
  --md-primary-fg-color--light: var(--ang-surface);
  --md-primary-fg-color--dark: var(--ang-surface);
  --md-primary-bg-color: var(--ang-text);
  --md-primary-bg-color--light: var(--ang-text-2);

  --md-accent-fg-color: var(--ang-accent);
  --md-typeset-a-color: var(--ang-accent);

  /* Dark code blocks to match the dashboards' chat markdown */
  --md-code-bg-color: var(--ang-code-bg);
  --md-code-fg-color: #e5e7eb;
  --md-code-hl-comment-color: #94a3b8;
  --md-code-hl-keyword-color: #c4b5fd;
  --md-code-hl-string-color: #86efac;
  --md-code-hl-number-color: #fca5a5;
  --md-code-hl-function-color: #93c5fd;
  --md-code-hl-constant-color: #fcd34d;
  --md-code-hl-name-color: #e5e7eb;
  --md-code-hl-operator-color: #cbd5e1;
  --md-code-hl-punctuation-color: #cbd5e1;
  --md-code-hl-variable-color: #f9a8d4;

  /* Mermaid diagrams — set explicitly so node labels stay legible.
   * (Without these, node text inherits the primary fg color, which we set to
   * white for the light header, making labels invisible on the soft fill.)
   * Dark text on a blue-50 fill, gray-200 borders — reads like a dashboard. */
  --md-mermaid-font-family: var(--md-text-font-family, system-ui, sans-serif);
  --md-mermaid-node-bg-color: var(--ang-mmd-fill);
  --md-mermaid-node-fg-color: var(--ang-mmd-text);
  --md-mermaid-edge-color: var(--ang-mmd-edge);
  --md-mermaid-label-bg-color: var(--ang-surface);
  --md-mermaid-label-fg-color: var(--ang-mmd-text);
}

/* ---- Mermaid: per-server color schemes (fun, but always legible) ----
 * Each page is tagged (by scripts/hooks.py) with data-ang-server; the diagram
 * palette keys off it. Defaults to the memory/blue scheme. Dark hue-900 text on
 * a hue-50 fill with hue-200 borders keeps every label readable. */
:root {
  --ang-mmd-fill: var(--ang-accent-soft);         /* blue-50  */
  --ang-mmd-stroke: var(--ang-accent-soft-border);/* blue-200 */
  --ang-mmd-text: var(--ang-text);
  --ang-mmd-edge: #94a3b8;                         /* slate-400 */
  --ang-mmd-cluster-fill: #f8fafc;
  --ang-mmd-cluster-stroke: var(--ang-border);
}
body[data-ang-server="coordinator"] {   /* cyan — dashboard coordinator-live */
  --ang-mmd-fill: #ecfeff; --ang-mmd-stroke: #a5f3fc; --ang-mmd-text: #155e75;
  --ang-mmd-edge: #22d3ee; --ang-mmd-cluster-fill: #f0feff; --ang-mmd-cluster-stroke: #cffafe;
}
body[data-ang-server="memory"] {         /* blue — memory dashboard primary */
  --ang-mmd-fill: #eff6ff; --ang-mmd-stroke: #bfdbfe; --ang-mmd-text: #1e3a8a;
  --ang-mmd-edge: #60a5fa; --ang-mmd-cluster-fill: #f5f9ff; --ang-mmd-cluster-stroke: #dbeafe;
}
body[data-ang-server="artifacts"] {      /* amber — experiments / artifacts */
  --ang-mmd-fill: #fffbeb; --ang-mmd-stroke: #fde68a; --ang-mmd-text: #92400e;
  --ang-mmd-edge: #fbbf24; --ang-mmd-cluster-fill: #fffdf5; --ang-mmd-cluster-stroke: #fef3c7;
}
body[data-ang-server="zettelkasten"] {   /* rose — zettelkasten workshop */
  --ang-mmd-fill: #fff1f2; --ang-mmd-stroke: #fecdd3; --ang-mmd-text: #9f1239;
  --ang-mmd-edge: #fb7185; --ang-mmd-cluster-fill: #fff5f6; --ang-mmd-cluster-stroke: #ffe4e6;
}

/* Diagrams are centered in the content column (mermaid left-aligns by default). */
.md-typeset .mermaid { text-align: center; }
.md-typeset .mermaid > svg { margin: 0 auto; }

/* Node fills, rounded corners, and legible labels driven by the vars above. */
.md-typeset .mermaid .node rect,
.md-typeset .mermaid .node polygon,
.md-typeset .mermaid .node circle,
.md-typeset .mermaid .node path {
  fill: var(--ang-mmd-fill) !important;
  stroke: var(--ang-mmd-stroke) !important;
}
/* Soft, cute node corners. Cover the several shapes mermaid uses for a plain
   node across versions (bare <rect>, the label-container rect, basic shape). */
.md-typeset .mermaid .node rect,
.md-typeset .mermaid .node .label-container,
.md-typeset .mermaid .node rect.basic {
  rx: 12px !important;
  ry: 12px !important;
}
.md-typeset .mermaid .nodeLabel,
.md-typeset .mermaid .nodeLabel *,
.md-typeset .mermaid .cluster-label,
.md-typeset .mermaid .cluster-label * {
  color: var(--ang-mmd-text) !important;
  fill: var(--ang-mmd-text) !important;
}
/* Edges take the server hue; edge labels stay neutral-dark on white for reading.
 * NOTE: mermaid renders the line as a <path> element (not class="path"), so we
 * target the tag inside .edgePaths / .edgePath plus the flowchart-link class. */
.md-typeset .mermaid .edgePaths path,
.md-typeset .mermaid .edgePath path,
.md-typeset .mermaid path.flowchart-link,
.md-typeset .mermaid .flowchart-link,
.md-typeset .mermaid .relation {
  stroke: var(--ang-mmd-edge) !important;
}
.md-typeset .mermaid marker path,
.md-typeset .mermaid marker circle,
.md-typeset .mermaid .marker,
.md-typeset .mermaid .arrowMarkerPath,
.md-typeset .mermaid .arrowheadPath {
  fill: var(--ang-mmd-edge) !important;
  stroke: var(--ang-mmd-edge) !important;
}
.md-typeset .mermaid .edgeLabel,
.md-typeset .mermaid .edgeLabel span,
.md-typeset .mermaid .edgeLabel p {
  color: var(--ang-text) !important;
  fill: var(--ang-text) !important;
  background-color: var(--ang-surface) !important;
}
/* Subgraph clusters: gently tinted, rounded containers in the server hue. */
.md-typeset .mermaid .cluster rect {
  fill: var(--ang-mmd-cluster-fill) !important;
  stroke: var(--ang-mmd-cluster-stroke) !important;
  rx: 14px; ry: 14px;
}

/* Header gets a hairline like the dashboard top bars */
.md-header {
  border-bottom: 1px solid var(--ang-border);
  box-shadow: none;
}
.md-tabs {
  border-bottom: 1px solid var(--ang-border);
}

/* Links: blue-600 -> blue-800 on hover, matching the dashboards */
.md-typeset a {
  color: var(--ang-accent);
}
.md-typeset a:hover {
  color: var(--ang-accent-hover);
}

/* Inline code stays light (gray-200 / gray-700) like the dashboards; only
 * fenced blocks go dark (handled by --md-code-bg-color above). */
.md-typeset :not(pre) > code {
  background-color: var(--ang-border);
  color: var(--ang-text-2);
  border-radius: 0.25rem;
  padding: 0.1em 0.35em;
}

/* Tables: gray-100 header, gray-200 borders.
 * Material wraps the table in `.md-typeset__table` (display: inline-block) inside
 * the full-width `.md-typeset__scrollwrap`. To center a table that is narrower
 * than the content column we center the inline-block wrapper via the scrollwrap's
 * `text-align`, then reset cell text back to the start edge so only the table (not
 * its contents) is centered. */
.md-typeset__scrollwrap { text-align: center; }
.md-typeset__table { display: inline-block; text-align: start; }
.md-typeset table:not([class]) {
  display: table;
  border: 1px solid var(--ang-border);
  border-radius: 0.5rem;
  overflow: hidden;
}
.md-typeset table:not([class]) th {
  background-color: #f3f4f6;
  color: var(--ang-text-2);
  font-weight: 600;
}

/* ---- Cards (Material "grid cards") tuned to dashboard surfaces ---- */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid.cards > .card {
  background: var(--ang-surface);
  border: 1px solid var(--ang-border);
  border-radius: var(--ang-r-card);
  box-shadow: var(--ang-shadow-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--ang-accent-soft-border);
  box-shadow: var(--ang-shadow-md);
  transform: translateY(-1px);
}

/* Home "Where to go" cards echo the nav hues, so each card reads as the gateway
   to its section. Card order in index.md is Getting started, Explore the
   features, User guides, Reference, so the hues are mapped to match. */
.md-typeset .grid.cards.home-nav > ul > li:nth-child(1) { --card-accent: #059669; } /* Getting started      — emerald */
.md-typeset .grid.cards.home-nav > ul > li:nth-child(2) { --card-accent: #0891b2; } /* Explore the features — cyan    */
.md-typeset .grid.cards.home-nav > ul > li:nth-child(3) { --card-accent: #2563eb; } /* User guides          — blue    */
.md-typeset .grid.cards.home-nav > ul > li:nth-child(4) { --card-accent: #7c3aed; } /* Reference            — violet  */

/* Pillar cards on Home: one per feature server, tinted in its canonical accent
   so the "three pillars" grid mirrors the nav and the explainer diagrams. */
.md-typeset .grid.cards.pillar-cards > ul > li:nth-child(1) { --card-accent: #0891b2; } /* Coordinator  — cyan */
.md-typeset .grid.cards.pillar-cards > ul > li:nth-child(2) { --card-accent: #2563eb; } /* Memory       — blue */
.md-typeset .grid.cards.pillar-cards > ul > li:nth-child(3) { --card-accent: #e11d48; } /* Zettelkasten — rose */
.md-typeset .grid.cards.pillar-cards > ul > li > p > .twemoji,
.md-typeset .grid.cards.pillar-cards > ul > li a {
  color: var(--card-accent, var(--ang-accent));
}
.md-typeset .grid.cards.pillar-cards > ul > li:hover {
  border-color: color-mix(in srgb, var(--card-accent, var(--ang-accent)) 45%, transparent);
}
.md-typeset .grid.cards.home-nav > ul > li > p > .twemoji,
.md-typeset .grid.cards.home-nav > ul > li a {
  color: var(--card-accent, var(--ang-accent));
}
.md-typeset .grid.cards.home-nav > ul > li:hover {
  border-color: color-mix(in srgb, var(--card-accent, var(--ang-accent)) 45%, transparent);
}

/* ---- Entry-type chips (mirror the dashboard graph nodes) ---- */
.ang-node {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
}
.ang-chip {
  flex: 0 0 auto;
  width: 1.35em;
  height: 1.35em;
  border-radius: 0.35em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72em;
  font-weight: 700;
  line-height: 1;
  color: #1f2937;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.07);
}
.ang-chip--plan { background: var(--ang-plan); }
.ang-chip--decision { background: var(--ang-decision); }
.ang-chip--checkpoint { background: var(--ang-checkpoint); }
.ang-chip--experiment { background: var(--ang-experiment); }
.ang-chip--todo { background: var(--ang-todo); }
.ang-chip--note { background: var(--ang-note); }
.ang-chip--annotation { background: var(--ang-annotation); }
.ang-chip--document { background: var(--ang-document); }
.ang-chip--project { background: var(--ang-document); }

/* Status pills (active/superseded), from the dashboard done/failed colors */
.ang-status {
  font-size: 0.7em;
  font-weight: 600;
  padding: 0.1em 0.5em;
  border-radius: 0.35em;
  margin-left: 0.4em;
}
.ang-status--active { background: #f0fdf4; color: #166534; }
.ang-status--superseded,
.ang-status--discarded { background: #fef2f2; color: #991b1b; }
.ang-status--draft { background: #f1f5f9; color: #64748b; }

/* ---- Memory subtree (tree view of design notes) ---- */
.ang-tree ul {
  list-style: none;
  margin: 0.2rem 0 0.2rem 0.6rem;
  padding-left: 0.8rem;
  border-left: 1px solid var(--ang-border);
}
.ang-tree li {
  margin: 0.25rem 0;
}
.ang-tree .ang-context {
  color: var(--ang-muted);
}

/* ======================================================================
   Cuter, dashboard-matching polish
   Soft rounding, light shadows, pastel accents — echoing the memory +
   zettelkasten dashboards without drifting into gradient-SaaS territory.
   ====================================================================== */

/* Content images render as dashboard-style cards (frames the hero GIF and
   screenshots). Excludes inline icon/emoji images (twemoji/emojione). */
.md-typeset img:not(.twemoji):not(.emojione) {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--ang-border);
  border-radius: var(--ang-r-card);
  box-shadow: var(--ang-shadow-sm);
  background: var(--ang-surface);
}
/* An italic line immediately under an image reads as its caption */
.md-typeset p > img:only-child { margin-bottom: 0.4rem; }

/* Standalone content SVGs (diagrams dropped straight into the page) are inline by
   default and sit flush-left. Center them in the content column like images and
   tables. Scoped to block-level placements so inline icon SVGs are untouched. */
.md-typeset > svg,
.md-typeset p > svg:only-child,
.md-typeset figure > svg {
  display: block;
  margin-inline: auto;
}

/* Inline architecture diagram (Home): a dashboard-style card framing the SVG,
   so the hand-drawn graphic matches the framed screenshots and GIFs. */
.md-typeset .ang-arch {
  /* Material styles `figure { width: fit-content }`, which shrink-wraps the card
     to the SVG's 300px default (the SVG's own `width: 100%` then resolves against
     that collapsed figure). Force the card to fill the content column so the SVG
     scales up to full width. */
  width: 100%;
  margin: 1rem 0 0.5rem;
  padding: 1.4rem 1.4rem 1rem;
  background: var(--ang-surface);
  border: 1px solid var(--ang-border);
  border-radius: var(--ang-r-card);
  box-shadow: var(--ang-shadow-sm);
}
.md-typeset .ang-arch svg {
  display: block;
  width: 100%;
  height: auto;
}
.md-typeset .ang-arch figcaption {
  margin-top: 0.7rem;
  font-size: 0.78rem;
  color: var(--ang-muted);
  text-align: center;
}

/* Explainer GIFs are the page's hero visual: fill the content column and center,
   regardless of the intrinsic (sometimes half-scale) render size. */
.md-typeset img[src$=".gif"] {
  display: block;
  width: 100%;
  margin-inline: auto;
}

/* Still frames pulled from the explainer animations: supporting figures, framed
   as a card and centered, and a touch narrower than the full-bleed hero GIFs. */
.md-typeset img[src*="/stills/"] {
  display: block;
  width: 100%;
  max-width: 44rem;
  margin-inline: auto;
  border: 1px solid var(--ang-border);
  border-radius: var(--ang-r-card);
  box-shadow: var(--ang-shadow-sm);
  background: #fff;
}

/* Admonitions / collapsibles: rounder, softer, dashboard tinted panels */
.md-typeset .admonition,
.md-typeset details {
  border: 1px solid var(--ang-border);
  border-left-width: 0.2rem;
  border-radius: var(--ang-r-card);
  box-shadow: var(--ang-shadow-sm);
}
.md-typeset .admonition-title,
.md-typeset summary {
  border-radius: 0;
  font-weight: 600;
}

/* Buttons: blue-600, rounded, like the dashboards' primary CTA */
.md-typeset .md-button {
  border-radius: var(--ang-r-control);
  font-weight: 600;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.md-typeset .md-button--primary {
  background: var(--ang-accent);
  border-color: var(--ang-accent);
}
.md-typeset .md-button--primary:hover {
  background: var(--ang-accent-hover);
  border-color: var(--ang-accent-hover);
}

/* Search box: rounded control with a soft blue focus ring */
.md-search__form {
  border-radius: var(--ang-r-control);
  box-shadow: var(--ang-shadow-sm);
}
.md-search__input { border-radius: var(--ang-r-control); }
[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  box-shadow: 0 0 0 2px var(--ang-accent-soft-border);
}

/* Fenced code blocks: rounded like the chat markdown panels */
.md-typeset pre > code { border-radius: var(--ang-r-card); }
.md-typeset .highlight > pre > code,
.md-typeset .highlighttable { border-radius: var(--ang-r-card); }

/* Blockquotes: soft left accent + faint wash */
.md-typeset blockquote {
  border-left: 0.2rem solid var(--ang-accent-soft-border);
  border-radius: 0 var(--ang-r-control) var(--ang-r-control) 0;
  background: #f8fafc;
  color: var(--ang-text-2);
}

/* ---- Left nav: each top-level section (Diátaxis pillar) gets its own hue ----
 * The color is set once per top-level <li> as --sec/--sec-soft and cascades to
 * that section's label, item dots, and active/hover pills. Order matches the
 * mkdocs.yml nav: (1) Home, (2) Getting started, (3) Coordinator, (4) Memory,
 * (5) Zettelkasten, (6) User guides, (7) Reference. The three feature pillars
 * (3-5) take their canonical server accents (cyan / blue / rose) so the nav
 * echoes the dashboards and the explainer diagrams. */
.md-nav--primary > .md-nav__list > .md-nav__item {
  --sec: var(--ang-accent);
  --sec-soft: var(--ang-accent-soft);
}
.md-nav--primary > .md-nav__list > .md-nav__item:nth-child(2) {
  --sec: #059669; --sec-soft: #ecfdf5;   /* Getting started — emerald */
}
.md-nav--primary > .md-nav__list > .md-nav__item:nth-child(3) {
  --sec: #0891b2; --sec-soft: #ecfeff;   /* Coordinator     — cyan    */
}
.md-nav--primary > .md-nav__list > .md-nav__item:nth-child(4) {
  --sec: #2563eb; --sec-soft: #eff6ff;   /* Memory          — blue    */
}
.md-nav--primary > .md-nav__list > .md-nav__item:nth-child(5) {
  --sec: #e11d48; --sec-soft: #fff1f2;   /* Zettelkasten    — rose    */
}
.md-nav--primary > .md-nav__list > .md-nav__item:nth-child(6) {
  --sec: #b45309; --sec-soft: #fffbeb;   /* User guides     — amber   */
}
.md-nav--primary > .md-nav__list > .md-nav__item:nth-child(7) {
  --sec: #7c3aed; --sec-soft: #f5f3ff;   /* Reference       — violet  */
}

/* Section headers: uppercase meta labels, neutral by default. */
.md-nav--primary > .md-nav__list > .md-nav__item--section > .md-nav__link,
.md-nav--primary > .md-nav__list > .md-nav__item--nested > .md-nav__link {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--ang-muted);
  transition: color 0.15s ease;
}
/* ...and they light up in their pillar color when the active page lives under
   them (i.e. a pill in that section is selected). */
.md-nav--primary
  > .md-nav__list
  > .md-nav__item:has(.md-nav__link--active)
  > .md-nav__link {
  color: var(--sec);
}
/* A small pillar-colored dot leads every item below a top-level section,
   including expandable subgroups such as Synapse, so each row reads as
   belonging to its section even at rest. */
.md-nav--primary
  .md-nav__item:not(.md-nav__item--section)
  > .md-nav__link::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 0.45em;
  height: 0.45em;
  /* The link is `display:flex; align-items:flex-start`, so the dot would top-
     align with the first line's ascender. Nudge it down to the line's optical
     center (and rely on the link's own `gap` for horizontal spacing). */
  margin-top: 0.5em;
  border-radius: 9999px;
  background: var(--sec);
  opacity: 0.55;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.md-nav--primary
  .md-nav__item:not(.md-nav__item--section)
  > .md-nav__link:hover::before,
.md-nav--primary .md-nav__link--active::before {
  opacity: 1;
  transform: scale(1.15);
}

/* Active / hover pill: soft pillar wash + pillar text + left accent bar. */
.md-nav__link:focus,
.md-nav__link:hover { color: var(--sec); }
.md-nav--primary .md-nav__link--active {
  background: var(--sec-soft);
  color: var(--sec);
  border-radius: var(--ang-r-control);
  font-weight: 600;
}
/* TOC (right rail) stays on the page's server accent, not a pillar. */
.md-nav--secondary .md-nav__link--active {
  color: var(--ang-accent);
  font-weight: 600;
}

/* ---- Left nav wrapped in a white card (like the cluster-view panels) ----
 * The primary sidebar's nav becomes a bg-white, gray-200, rounded-lg, shadow-sm
 * card floating on the gray-50 canvas, with the "Angelo" site title as its
 * header. Only applies at the desktop breakpoint where the sidebar is docked. */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary {
    /* Give the card a little breathing room from the viewport edge. */
    padding: 1.2rem 0.4rem 1.2rem 0.8rem;
  }
  .md-sidebar--primary .md-sidebar__scrollwrap {
    margin: 0;
    /* Let the card's own rounded corners define the edge; hide the raw scroll. */
    scrollbar-width: thin;
  }
  .md-sidebar--primary .md-nav--primary {
    background: var(--ang-surface);
    border: 1px solid var(--ang-border);
    border-radius: var(--ang-r-card);
    box-shadow: var(--ang-shadow-sm);
    padding: 0 0.6rem 0.7rem;
  }
  /* "Angelo" reads as the card header: pinned to the card top (sticky so the
     list scrolls under it), bold, with a hairline divider. The white fill and
     top rounded corners let it sit flush inside the card as the scroll header. */
  .md-sidebar--primary .md-nav--primary > .md-nav__title {
    display: block;
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 0.6rem 0.2rem 0.55rem;
    margin: 0 -0.6rem 0.35rem;
    padding-left: 0.8rem;
    padding-right: 0.8rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ang-text);
    background: var(--ang-surface);
    box-shadow: none;
    border-radius: var(--ang-r-card) var(--ang-r-card) 0 0;
    border-bottom: 1px solid var(--ang-border);
  }
  /* The wordmark links home like the logo, but reads as the plain card title. */
  .md-sidebar--primary .md-nav--primary > .md-nav__title .md-ang-wordmark {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease;
  }
  .md-sidebar--primary .md-nav--primary > .md-nav__title .md-ang-wordmark:hover {
    color: var(--ang-accent);
  }
  /* The header logo sits inline with the wordmark rather than stacked. */
  .md-sidebar--primary .md-nav--primary > .md-nav__title .md-nav__button.md-logo {
    display: inline-flex;
    vertical-align: middle;
    margin: 0 0.4rem 0 0;
    padding: 0;
  }
  .md-sidebar--primary .md-nav--primary > .md-nav__title .md-nav__button.md-logo img,
  .md-sidebar--primary .md-nav--primary > .md-nav__title .md-nav__button.md-logo svg {
    width: 1.2rem;
    height: 1.2rem;
  }
}

/* Tabbed content (Design notes List/Tree, install tabs): rounded, tinted */
.md-typeset .tabbed-set > .tabbed-labels > label { font-weight: 600; }
.md-typeset .tabbed-set > input:checked + label { color: var(--ang-accent); }

/* Tables: pin the pastel header + rounder corners already set above */
.md-typeset table:not([class]) { border-radius: var(--ang-r-card); }

/* Keep the first column of a `.type-table` from wrapping its single-word type
   names (e.g. `annotation`, `checkpoint`). */
.md-typeset .type-table th:first-child,
.md-typeset .type-table td:first-child {
  white-space: nowrap;
}

/* Pastel type chips get a hair more rounding to feel candy-soft */
.ang-chip { border-radius: var(--ang-r-chip); }

/* ---- Inline lucide icons in page content (the dashboard "tour the tabs" lists)
 * `<span class="l-ico l-<name>"></span>` drops the dashboards' own icons inline
 * next to a tab name. Same mask technique as the nav dots, tinted in the page's
 * server accent so they echo the live dashboard chrome. Per-icon `--lm` mask
 * sources are generated from overrides/.icons/lucide/*.svg just below. */
.md-typeset .l-ico {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.22em;
  margin-right: 0.15em;
  background-color: var(--ang-accent);
  -webkit-mask: var(--lm) center / contain no-repeat;
  mask: var(--lm) center / contain no-repeat;
}

/* Per-icon mask sources (lucide v1.x, from the dashboards' icon set). */
.md-typeset .l-list-tree { --lm: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M8%205h13%22%20%2F%3E%20%3Cpath%20d%3D%22M13%2012h8%22%20%2F%3E%20%3Cpath%20d%3D%22M13%2019h8%22%20%2F%3E%20%3Cpath%20d%3D%22M3%2010a2%202%200%200%200%202%202h3%22%20%2F%3E%20%3Cpath%20d%3D%22M3%205v12a2%202%200%200%200%202%202h3%22%20%2F%3E%20%3C%2Fsvg%3E"); }
.md-typeset .l-waypoints { --lm: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22m10.586%205.414-5.172%205.172%22%20%2F%3E%20%3Cpath%20d%3D%22m18.586%2013.414-5.172%205.172%22%20%2F%3E%20%3Cpath%20d%3D%22M6%2012h12%22%20%2F%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2220%22%20r%3D%222%22%20%2F%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%224%22%20r%3D%222%22%20%2F%3E%20%3Ccircle%20cx%3D%2220%22%20cy%3D%2212%22%20r%3D%222%22%20%2F%3E%20%3Ccircle%20cx%3D%224%22%20cy%3D%2212%22%20r%3D%222%22%20%2F%3E%20%3C%2Fsvg%3E"); }
.md-typeset .l-workflow { --lm: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Crect%20width%3D%228%22%20height%3D%228%22%20x%3D%223%22%20y%3D%223%22%20rx%3D%222%22%20%2F%3E%20%3Cpath%20d%3D%22M7%2011v4a2%202%200%200%200%202%202h4%22%20%2F%3E%20%3Crect%20width%3D%228%22%20height%3D%228%22%20x%3D%2213%22%20y%3D%2213%22%20rx%3D%222%22%20%2F%3E%20%3C%2Fsvg%3E"); }
.md-typeset .l-pencil-ruler { --lm: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M13%207%208.7%202.7a2.41%202.41%200%200%200-3.4%200L2.7%205.3a2.41%202.41%200%200%200%200%203.4L7%2013%22%20%2F%3E%20%3Cpath%20d%3D%22m8%206%202-2%22%20%2F%3E%20%3Cpath%20d%3D%22m18%2016%202-2%22%20%2F%3E%20%3Cpath%20d%3D%22m17%2011%204.3%204.3c.94.94.94%202.46%200%203.4l-2.6%202.6c-.94.94-2.46.94-3.4%200L11%2017%22%20%2F%3E%20%3Cpath%20d%3D%22M21.174%206.812a1%201%200%200%200-3.986-3.987L3.842%2016.174a2%202%200%200%200-.5.83l-1.321%204.352a.5.5%200%200%200%20.623.622l4.353-1.32a2%202%200%200%200%20.83-.497z%22%20%2F%3E%20%3Cpath%20d%3D%22m15%205%204%204%22%20%2F%3E%20%3C%2Fsvg%3E"); }
.md-typeset .l-clock { --lm: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%20%2F%3E%20%3Cpath%20d%3D%22M12%206v6l4%202%22%20%2F%3E%20%3C%2Fsvg%3E"); }
.md-typeset .l-flask-conical { --lm: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M14%202v6a2%202%200%200%200%20.245.96l5.51%2010.08A2%202%200%200%201%2018%2022H6a2%202%200%200%201-1.755-2.96l5.51-10.08A2%202%200%200%200%2010%208V2%22%20%2F%3E%20%3Cpath%20d%3D%22M6.453%2015h11.094%22%20%2F%3E%20%3Cpath%20d%3D%22M8.5%202h7%22%20%2F%3E%20%3C%2Fsvg%3E"); }
.md-typeset .l-network { --lm: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Crect%20x%3D%2216%22%20y%3D%2216%22%20width%3D%226%22%20height%3D%226%22%20rx%3D%221%22%20%2F%3E%20%3Crect%20x%3D%222%22%20y%3D%2216%22%20width%3D%226%22%20height%3D%226%22%20rx%3D%221%22%20%2F%3E%20%3Crect%20x%3D%229%22%20y%3D%222%22%20width%3D%226%22%20height%3D%226%22%20rx%3D%221%22%20%2F%3E%20%3Cpath%20d%3D%22M5%2016v-3a1%201%200%200%201%201-1h12a1%201%200%200%201%201%201v3%22%20%2F%3E%20%3Cpath%20d%3D%22M12%2012V8%22%20%2F%3E%20%3C%2Fsvg%3E"); }
.md-typeset .l-search { --lm: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22m21%2021-4.34-4.34%22%20%2F%3E%20%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%228%22%20%2F%3E%20%3C%2Fsvg%3E"); }
.md-typeset .l-cog { --lm: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M11%2010.27%207%203.34%22%20%2F%3E%20%3Cpath%20d%3D%22m11%2013.73-4%206.93%22%20%2F%3E%20%3Cpath%20d%3D%22M12%2022v-2%22%20%2F%3E%20%3Cpath%20d%3D%22M12%202v2%22%20%2F%3E%20%3Cpath%20d%3D%22M14%2012h8%22%20%2F%3E%20%3Cpath%20d%3D%22m17%2020.66-1-1.73%22%20%2F%3E%20%3Cpath%20d%3D%22m17%203.34-1%201.73%22%20%2F%3E%20%3Cpath%20d%3D%22M2%2012h2%22%20%2F%3E%20%3Cpath%20d%3D%22m20.66%2017-1.73-1%22%20%2F%3E%20%3Cpath%20d%3D%22m20.66%207-1.73%201%22%20%2F%3E%20%3Cpath%20d%3D%22m3.34%2017%201.73-1%22%20%2F%3E%20%3Cpath%20d%3D%22m3.34%207%201.73%201%22%20%2F%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%222%22%20%2F%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228%22%20%2F%3E%20%3C%2Fsvg%3E"); }