:root,
:root[data-theme='light'] {
  color-scheme: light;
  --bg: #f6f9fb;
  --surface: #ffffff;
  --surface-muted: #eef4f8;
  --surface-elevated: #ffffff;
  --text: #061d33;
  --text-muted: #475569;
  --border: #d8e1ea;
  --border-strong: #bfcad7;
  --link: #00afe5;
  --link-hover: #007fa3;
  --code-bg: #f1f5f9;
  --code-fg: #0f172a;
  --shadow: 0 1px 3px rgba(6, 29, 51, 0.06), 0 6px 24px rgba(6, 29, 51, 0.04);
  --brand-primary: #040043;
  --brand-secondary: #00afe5;
  --brand-accent: #ff5300;
  --brand-text: #061d33;
  --sidebar-text: #ffffff;
  --sidebar-text-muted: rgba(255, 255, 255, 0.72);
  --sidebar-link-active: #ffffff;
  --sidebar-link-hover-bg: rgba(255, 255, 255, 0.08);
  --shiki-foreground: #0f172a;
  --shiki-background: transparent;
  --shiki-token-keyword: #0f5fa6;
  --shiki-token-string: #166534;
  --shiki-token-comment: #64748b;
  --shiki-token-number: #b8455b;
  --shiki-token-function: #6f42c1;
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #050a18;
  --surface: #0c1426;
  --surface-muted: #131c33;
  --surface-elevated: #15203d;
  --text: #e7ecf3;
  --text-muted: #97a3b4;
  --border: #1f2a44;
  --border-strong: #2c3a5c;
  --link: #5dd0f0;
  --link-hover: #00afe5;
  --code-bg: #0a1326;
  --code-fg: #f1f5f9;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 6px 24px rgba(0, 0, 0, 0.4);
  --brand-primary: #040043;
  --brand-secondary: #00afe5;
  --brand-accent: #ff5300;
  --brand-text: #e7ecf3;
  --sidebar-text: #ffffff;
  --sidebar-text-muted: rgba(255, 255, 255, 0.72);
  --sidebar-link-active: #ffffff;
  --sidebar-link-hover-bg: rgba(255, 255, 255, 0.08);
  --shiki-foreground: #e7ecf3;
  --shiki-background: transparent;
  --shiki-token-keyword: #5dd0f0;
  --shiki-token-string: #86efac;
  --shiki-token-comment: #94a3b8;
  --shiki-token-number: #fda4af;
  --shiki-token-function: #c4b5fd;
}

@font-face {
  font-family: Urbanist;
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/urbanist-400.woff2') format('woff2');
}
@font-face {
  font-family: Urbanist;
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/urbanist-500.woff2') format('woff2');
}
@font-face {
  font-family: Urbanist;
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/urbanist-600.woff2') format('woff2');
}
@font-face {
  font-family: Urbanist;
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/urbanist-700.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-500.woff2') format('woff2');
}

* { box-sizing: border-box; }
html { min-width: 0; overflow-x: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Urbanist, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.65;
  min-width: 0;
  overflow-x: hidden;
}
a { color: var(--link); text-underline-offset: 0.18em; }
a:hover { color: var(--link-hover); }
.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 30;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  padding: 0.5rem 0.75rem;
  color: var(--text);
  text-decoration: none;
  border-radius: 6px;
}
.skip-link:focus { top: 1rem; }

/* ── App sidebar brand gradient (mirrors app/globals.css:326-340) ── */
.app-sidebar-bg {
  position: relative;
  background: linear-gradient(180deg, #040043 0%, #030030 50%, #020024 100%);
  color: var(--sidebar-text);
}

/* ── Topbar ─────────────────────────────────────────────────────── */
.docs-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.85rem clamp(1rem, 3vw, 2rem);
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(12px);
}
.docs-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  color: var(--brand-primary);
  text-decoration: none;
  flex: 0 0 auto;
}
:root[data-theme='dark'] .docs-brand {
  color: var(--brand-text);
}
.docs-brand-mark {
  display: inline-flex;
  align-items: center;
  color: inherit;
}
.docs-brand-suffix {
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.docs-hamburger,
.docs-search-trigger,
.docs-theme-toggle,
.docs-cta {
  font: inherit;
  cursor: pointer;
}
.docs-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: 0.45rem;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  color: var(--text);
}
.docs-search-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
  padding: 0.45rem 0.75rem;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
}
.docs-search-trigger:hover { color: var(--text); border-color: var(--border-strong); }
.docs-theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text);
}
.docs-theme-toggle-sun,
.docs-theme-toggle-moon {
  display: inline-flex;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
}
:root[data-theme='light'] .docs-theme-toggle-moon { display: none; }
:root[data-theme='dark'] .docs-theme-toggle-sun { display: none; }
.docs-cta {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.85rem;
  background: var(--brand-accent);
  color: #ffffff;
  border: 0;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
}
.docs-cta:hover { background: #e44a00; color: #ffffff; }

/* ── Shell + sidebar ───────────────────────────────────────────── */
.docs-shell {
  display: grid;
  grid-template-columns: minmax(13rem, 17rem) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  width: min(1240px, 100%);
  margin: 0 auto;
  padding: clamp(1rem, 2.5vw, 2rem);
}
.docs-sidebar {
  align-self: start;
  position: sticky;
  top: 4.5rem;
  max-height: calc(100vh - 6rem);
  overflow: auto;
  padding: 1.1rem 1rem;
  border-radius: 12px;
}
.docs-sidebar-inner > .nav-group { margin-bottom: 1.15rem; }
.docs-sidebar-inner > .nav-group:last-child { margin-bottom: 0; }
.nav-group h2 {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.45rem;
  color: var(--sidebar-text-muted);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.nav-group-icon {
  display: inline-flex;
  width: 1rem;
  height: 1rem;
  align-items: center;
  justify-content: center;
  color: inherit;
}
.nav-group ul { list-style: none; margin: 0; padding: 0; }
.nav-group a {
  display: block;
  border-radius: 6px;
  color: var(--sidebar-text-muted);
  padding: 0.4rem 0.55rem;
  text-decoration: none;
  font-weight: 500;
  transition: background 120ms ease, color 120ms ease;
}
.nav-group a:hover { background: var(--sidebar-link-hover-bg); color: var(--sidebar-link-active); }
.nav-group a[aria-current='page'] {
  background: rgba(255, 255, 255, 0.12);
  color: var(--sidebar-link-active);
  font-weight: 600;
}

/* ── Mobile drawer ─────────────────────────────────────────────── */
.docs-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 28;
  background: rgba(4, 0, 67, 0.55);
}
.docs-drawer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 29;
  width: min(20rem, 84vw);
  height: 100dvh;
  padding: 1.25rem 1rem 1.5rem;
  overflow: auto;
  box-shadow: 0 12px 36px rgba(2, 0, 36, 0.6);
}
.docs-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.2rem;
}
.docs-drawer-close {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  border-radius: 6px;
  padding: 0.3rem;
  cursor: pointer;
}

/* ── Main + article ────────────────────────────────────────────── */
.docs-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 2rem);
  min-width: 0;
}
.docs-article {
  min-width: 0;
  max-width: 780px;
  overflow-wrap: anywhere;
}

/* ── Right-rail TOC (M-DO3 DOCS-TOC-RAIL-01) ───────────────────── */
/* Default (under 1180px): the TOC sits at the top of the article as
   a compact <details> "On this page" disclosure. Above 1180px the
   media query below promotes it to a pinned right-rail column.
   The [hidden] attribute is the canonical "the page has fewer than
   2 h2s" gate set by the renderer. */
.toc {
  margin: 0 0 1.4rem;
}
.toc[hidden] {
  display: none !important;
}
.toc-details {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.65rem 0.9rem;
}
.toc-summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  list-style: none;
}
.toc-summary::-webkit-details-marker { display: none; }
.toc-summary::marker { content: ''; }
.toc-summary > span { color: inherit; }
/* Round 1 finding M3: server-rendered chevron gives mobile users a
   visible "this folds" affordance now that the UA marker is hidden.
   Rotates 90deg when the disclosure is open. */
.toc-chevron {
  transition: transform 150ms ease;
  color: var(--text-muted);
}
.toc-details[open] > .toc-summary > .toc-chevron {
  transform: rotate(90deg);
}
.toc-summary:hover .toc-chevron { color: var(--text); }
.toc-nav { margin-top: 0.55rem; }
.toc-list, .toc-sublist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.toc-sublist {
  margin-left: 0.85rem;
  border-left: 1px solid var(--border);
  padding-left: 0.55rem;
}
.toc-item { line-height: 1.4; }
.toc-item + .toc-item { margin-top: 0.2rem; }
.toc-link {
  display: block;
  padding: 0.25rem 0.4rem;
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease;
  /* Round 1 L12: long headings ("Managing Team Member Sessions
     (Client Admin Only)") need to break cleanly inside the rail. */
  overflow-wrap: anywhere;
}
.toc-item-h3 .toc-link {
  font-size: 0.82rem;
  font-weight: 400;
}
.toc-link:hover { color: var(--link); background: var(--surface-muted); }
/* Round 1 finding H1: keyboard users need a visible focus ring that
   doesn't disappear inside the rounded padding box. Outline + offset
   sits OUTSIDE the rounded border so it survives the .active
   tinted background. */
.toc-link:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
  border-radius: 6px;
}
/* Round 1 finding M1: light-mode .toc-link.active previously used
   var(--link) (#00afe5) on a color-mix(--link 12%, transparent)
   tint over --bg. Effective contrast ~2.3:1 fails WCAG AA 4.5:1
   for normal text. Light mode now uses var(--link-hover) (#007fa3),
   ~5.4:1 on the same tint. Dark mode already exceeded AA so it
   keeps var(--link). */
.toc-link.active,
.toc-link[aria-current='true'] {
  color: var(--link-hover);
  background: color-mix(in srgb, var(--link) 12%, transparent);
  font-weight: 600;
}
:root[data-theme='dark'] .toc-link.active,
:root[data-theme='dark'] .toc-link[aria-current='true'] {
  color: var(--link);
  background: color-mix(in srgb, var(--link) 20%, transparent);
}

/* M-DO3: at >=1181px the TOC becomes a pinned right-rail column.
   Lower bound bumped to 14rem (Round 1 L12) so long headings like
   "Managing Team Member Sessions" don't wrap to three lines at the
   1181px breakpoint. Block declared AFTER the base .toc / .toc-details
   / .toc-summary rules so the cascade resolves desktop overrides
   correctly (Round 2 Codex finding 1).

   M-DO4: the grid column is now .docs-toc-column (a wrapper that
   stacks the TOC aside with the optional Edit-on-GitHub / Report /
   Open-in-portal extras block beneath it). The TOC still pins,
   the extras list follows the TOC scroll. */
@media (min-width: 1181px) {
  .docs-main {
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 16rem);
    align-items: start;
  }
  .docs-toc-column {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: 5rem;
    align-self: start;
    max-height: calc(100vh - 7rem);
    overflow: auto;
    margin: 0;
  }
  .toc {
    margin: 0;
  }
  .toc-details {
    background: transparent;
    border: 0;
    padding: 0;
  }
  /* Desktop: the chevron is decorative noise once the rail is always
     visible. Hide it so the heading reads as a section label, but
     keep the <summary> in the DOM and tab order — Round 1 H2
     (three-way reviewer convergence) — so keyboard / mouse / SR
     users all see the same collapsibility model. The summary stays
     interactive; users CAN collapse the rail on desktop if they
     want. */
  .toc-summary {
    cursor: pointer;
    margin-bottom: 0.35rem;
  }
  .toc-summary .toc-chevron { display: none; }
  .docs-article { grid-column: 1; }
}

/* ── Breadcrumbs + prev/next pager + TOC extras (M-DO4) ────────── */
.docs-breadcrumbs {
  margin: 0 0 1.2rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.docs-breadcrumb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
}
.docs-breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.docs-breadcrumb-item + .docs-breadcrumb-item::before {
  content: '/';
  color: var(--text-muted);
  opacity: 0.6;
  margin-right: 0.15rem;
}
.docs-breadcrumb-item a {
  color: var(--text-muted);
  text-decoration: none;
  border-radius: 4px;
  padding: 0.1rem 0.25rem;
}
.docs-breadcrumb-item a:hover {
  color: var(--link);
  background: var(--surface-muted);
}
.docs-breadcrumb-item a:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}
.docs-breadcrumb-current {
  color: var(--text);
  font-weight: 500;
}
/* Plain-text section step rendered when the section index doc isn't
   published (round 1 Critical Sato C2 / Liam F1 — no 404-bound link). */
.docs-breadcrumb-placeholder {
  color: var(--text-muted);
  opacity: 0.85;
}

.docs-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 2.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.docs-pager-link {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-elevated);
  color: var(--text);
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
  min-width: 0;
}
.docs-pager-link:hover {
  background: var(--surface-muted);
  border-color: var(--link);
  color: var(--link);
}
.docs-pager-link:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}
.docs-pager-prev {
  grid-column: 1;
  text-align: left;
}
.docs-pager-next {
  grid-column: 2;
  text-align: right;
}
/* When only one side is rendered, the lone link fills its column and
   the other column stays empty so the layout does not jump. */
.docs-pager-link:only-child {
  grid-column: span 2;
}
.docs-pager-direction {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 600;
}
.docs-pager-title {
  font-size: 0.98rem;
  font-weight: 600;
  color: inherit;
  overflow-wrap: anywhere;
}
@media (max-width: 640px) {
  .docs-pager {
    grid-template-columns: 1fr;
  }
  .docs-pager-prev,
  .docs-pager-next {
    grid-column: 1;
    text-align: left;
  }
}

.toc-extras {
  margin-top: 1.4rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
}
.toc-extras-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.toc-extras-item + .toc-extras-item {
  margin-top: 0.2rem;
}
.toc-extras-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.45rem;
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 0.85rem;
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease;
}
.toc-extras-link:hover {
  color: var(--link);
  background: var(--surface-muted);
}
.toc-extras-link:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}
.toc-extras-icon {
  display: inline-flex;
  width: 14px;
  height: 14px;
  align-items: center;
  justify-content: center;
  color: inherit;
}

/* ── Hero meta strip (M-DO5 DOCS-FRONTMATTER-HERO-01) ──────────── */
/* Compact strip beneath the article H1 surfacing frontmatter values
   plus a computed read-time. Hidden via the renderer (empty string)
   when no metadata is supplied — pages without frontmatter still
   build correctly. */
.docs-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.9rem;
  margin: 0.1rem 0 1.4rem;
  padding: 0;
  color: var(--text-muted);
  font-size: 0.86rem;
}
.docs-hero-meta-step {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.docs-hero-meta-step time { color: inherit; }
.docs-hero-meta-icon-wrap {
  display: inline-flex;
  width: 14px;
  height: 14px;
  align-items: center;
  justify-content: center;
  color: inherit;
}
.docs-hero-meta-icon { display: block; }

h1, h2, h3, h4, h5, h6 { line-height: 1.25; margin: 1.8rem 0 0.7rem; }
h1 { margin-top: 0; font-size: 2.25rem; }
h2 { font-size: 1.55rem; border-top: 1px solid var(--border); padding-top: 1.3rem; }
h3 { font-size: 1.2rem; }
/* Round 1 finding M4: deep-link landing positions the target
   heading under the 80px sticky topbar without scroll-margin-top.
   Matches the .toc { top: 5rem } sticky offset and the
   IntersectionObserver rootMargin: -80px in docs.js — single
   source of truth, no off-by-one between visible heading and
   scroll-spy state. */
.docs-article h2[id],
.docs-article h3[id] {
  scroll-margin-top: 5rem;
}
.heading-anchor {
  display: inline-block;
  width: 1.1em;
  margin-left: -1.1em;
  color: var(--text-muted);
  opacity: 0;
  text-decoration: none;
}
h1:hover .heading-anchor, h2:hover .heading-anchor,
h3:hover .heading-anchor, h4:hover .heading-anchor { opacity: 1; }
p, li { color: var(--text); }

/* ── Code blocks (S-DO1 FR-014) ────────────────────────────────── */
code {
  border-radius: 4px;
  background: var(--code-bg);
  color: var(--code-fg);
  padding: 0.1rem 0.25rem;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 0.92em;
}
.code-block {
  margin: 1rem 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--code-bg);
  overflow: hidden;
}
.code-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0.85rem;
  background: color-mix(in srgb, var(--surface-muted) 80%, transparent);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
}
.code-block-language { color: var(--text-muted); }
.code-block-copy {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  padding: 0.2rem 0.6rem;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
}
.code-block-copy:hover { color: var(--link); border-color: var(--link); }
.code-block-copy[data-copied='true'] {
  color: #15803d;
  border-color: #15803d;
}
.code-block pre {
  margin: 0;
  padding: 0.85rem 1rem;
  overflow-x: auto;
  background: transparent;
  color: var(--shiki-foreground);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 0.9rem;
  line-height: 1.55;
}
.code-block pre code {
  background: transparent;
  color: inherit;
  padding: 0;
  font-size: inherit;
}
/* Shiki output: per S-DO1 review round 1 finding H3, we strip Shiki
   inline style attributes so the meta CSP fallback style-src self does
   not block them. The class names Shiki emits (shiki, line) are themed
   here using CSS custom properties that respond to data-theme=dark.
   The result is intentionally minimal (foreground text colour only) —
   the brief contract is tokenised colours in light + dark, not
   pixel-perfect Shiki token parity. */
.code-block .shiki,
.code-block .shiki span {
  color: var(--shiki-foreground);
  background-color: transparent;
}
.code-block .shiki .line { display: block; }

.table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}
table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  background: var(--surface);
}
th, td {
  border-bottom: 1px solid var(--border);
  padding: 0.65rem 0.75rem;
  text-align: left;
  vertical-align: top;
}
th { background: var(--surface-muted); font-weight: 800; }
blockquote {
  margin-left: 0;
  border-left: 3px solid var(--brand-accent);
  padding-left: 1rem;
  color: var(--text-muted);
}

/* ── Visually-hidden helper (a11y) ─────────────────────────────── */
/* Standard "screen-reader only" pattern. Used by M-DO2 callouts to
   announce the flavour ("Note" / "Warning" / etc.) to assistive tech
   without taking visual space. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Command palette (M-DO6 DOCS-COMMAND-PALETTE-01) ────────────── */
/* The palette is rendered server-side and starts `hidden`. docs.js
   removes the `hidden` attribute on open. Body scroll is locked
   while the palette is open via `document.body.style.overflow` set
   inline by the open handler.

   Keep the markup width responsive enough that the brief's "resize
   to 320px width" validation step holds — the dialog box itself
   max-widths at 36rem; the input row + result rows wrap clean at
   320px. */
.palette-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(4, 0, 67, 0.55);
  backdrop-filter: blur(2px);
}
.palette {
  position: fixed;
  inset: 0;
  z-index: 61;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(0.75rem, 5vh, 5rem) 1rem 1rem;
  pointer-events: none;
}
.palette[hidden],
.palette-backdrop[hidden] {
  display: none !important;
}
.palette > * {
  pointer-events: auto;
}
.palette {
  /* The dialog box itself is the child .palette-input-row + results +
     hint. We bind those to a column flex so the visible box obeys the
     z-index. Wrap it in a max-width box for desktop centring. */
}
.palette-input-row,
.palette-results,
.palette-empty,
.palette-hint {
  width: min(36rem, 100%);
  margin-inline: auto;
}
.palette-input-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.8rem;
  background: var(--surface-elevated);
  border: 1px solid var(--border-strong);
  border-radius: 12px 12px 0 0;
  box-shadow: var(--shadow);
}
.palette-input-icon {
  display: inline-flex;
  color: var(--text-muted);
}
.palette-input-row input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  padding: 0.25rem 0;
}
.palette-input-row input::placeholder { color: var(--text-muted); }
.palette-close {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  padding: 0.25rem 0.4rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.palette-close:hover { color: var(--text); border-color: var(--border-strong); }
.palette-close:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}
.palette-results {
  list-style: none;
  margin: 0;
  padding: 0.3rem 0;
  background: var(--surface-elevated);
  border: 1px solid var(--border-strong);
  border-top: 0;
  border-radius: 0;
  max-height: min(60vh, 28rem);
  overflow-y: auto;
}
.palette-results:empty + .palette-empty[hidden] {
  /* When there are no results AND no empty-state, hide the rounded
     bottom-edge artefact by collapsing the bottom border radius via
     the hint container instead — see .palette-hint below. */
}
.palette-result-section {
  list-style: none;
  padding: 0.5rem 0.85rem 0.2rem;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.palette-result {
  list-style: none;
  margin: 0;
  padding: 0;
}
.palette-result + .palette-result {
  border-top: 1px solid var(--border);
}
.palette-result-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.55rem;
  padding: 0.55rem 0.85rem;
  color: var(--text);
  text-decoration: none;
  border-radius: 0;
}
.palette-result-link:hover,
.palette-result.palette-result-active > .palette-result-link {
  background: var(--surface-muted);
  color: var(--text);
}
.palette-result.palette-result-active > .palette-result-link {
  background: color-mix(in srgb, var(--link) 14%, transparent);
  color: var(--link-hover);
}
:root[data-theme='dark'] .palette-result.palette-result-active > .palette-result-link {
  color: var(--link);
  background: color-mix(in srgb, var(--link) 22%, transparent);
}
.palette-result-title {
  font-weight: 600;
}
.palette-result-caret {
  color: var(--text-muted);
}
.palette-result-heading {
  color: var(--text-muted);
  font-weight: 500;
}
.palette-result-path {
  flex-basis: 100%;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 0.75rem;
}
.palette-empty {
  width: min(36rem, 100%);
  margin: 0 auto;
  padding: 0.85rem;
  background: var(--surface-elevated);
  border: 1px solid var(--border-strong);
  border-top: 0;
  color: var(--text-muted);
  text-align: center;
}
.palette-hint {
  width: min(36rem, 100%);
  margin: 0 auto;
  padding: 0.55rem 0.85rem 0.7rem;
  background: var(--surface-elevated);
  border: 1px solid var(--border-strong);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  color: var(--text-muted);
  font-size: 0.78rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}
.palette-hint kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.3rem;
  height: 1.3rem;
  padding: 0 0.3rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 4px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 0.74rem;
  line-height: 1;
}
.docs-search-trigger-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.3rem;
  height: 1.2rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  border-radius: 4px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 0.7rem;
  margin-left: 0.4rem;
}
@media (max-width: 480px) {
  .docs-search-trigger-kbd { display: none; }
}

body.docs-palette-open { overflow: hidden; }

/* ── Callouts / admonitions (M-DO2) ────────────────────────────── */
/* GitHub-style alert markers (NOTE / TIP / IMPORTANT / WARNING /
   CAUTION) emit an aside.callout.callout-<flavour> with an inline
   Lucide-style SVG. Tokens follow the brand palette: info / important
   borrow the brand secondary blue, success picks a green sibling,
   warn uses the brand accent orange, and danger uses a calibrated red.
   Both light + dark themes are themed via CSS custom properties. */
:root,
:root[data-theme='light'] {
  --callout-info-border: #00afe5;
  --callout-info-bg: rgba(0, 175, 229, 0.08);
  --callout-info-fg: #0f5fa6;
  --callout-success-border: #15803d;
  --callout-success-bg: rgba(21, 128, 61, 0.08);
  --callout-success-fg: #166534;
  --callout-warn-border: #ff5300;
  --callout-warn-bg: rgba(255, 83, 0, 0.08);
  --callout-warn-fg: #c2410c;
  --callout-danger-border: #c0282b;
  --callout-danger-bg: rgba(192, 40, 43, 0.08);
  --callout-danger-fg: #c0282b;
}
:root[data-theme='dark'] {
  --callout-info-border: #5dd0f0;
  --callout-info-bg: rgba(93, 208, 240, 0.12);
  --callout-info-fg: #5dd0f0;
  --callout-success-border: #4ade80;
  --callout-success-bg: rgba(74, 222, 128, 0.12);
  --callout-success-fg: #86efac;
  --callout-warn-border: #ff7a33;
  --callout-warn-bg: rgba(255, 122, 51, 0.14);
  --callout-warn-fg: #ffb084;
  --callout-danger-border: #f87171;
  --callout-danger-bg: rgba(248, 113, 113, 0.14);
  --callout-danger-fg: #fca5a5;
}

.callout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.55rem 0.75rem;
  align-items: start;
  margin: 1.1rem 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-left: 4px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
}
.callout-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
}
.callout-icon { display: block; }
.callout-body { min-width: 0; }
.callout-body > p { margin: 0; }
.callout-body > p + p { margin-top: 0.45rem; }

.callout-info {
  border-left-color: var(--callout-info-border);
  background: var(--callout-info-bg);
}
.callout-info .callout-icon-wrap { color: var(--callout-info-fg); }

.callout-success {
  border-left-color: var(--callout-success-border);
  background: var(--callout-success-bg);
}
.callout-success .callout-icon-wrap { color: var(--callout-success-fg); }

.callout-warn {
  border-left-color: var(--callout-warn-border);
  background: var(--callout-warn-bg);
}
.callout-warn .callout-icon-wrap { color: var(--callout-warn-fg); }

.callout-danger {
  border-left-color: var(--callout-danger-border);
  background: var(--callout-danger-bg);
}
.callout-danger .callout-icon-wrap { color: var(--callout-danger-fg); }

/* ── Footer ────────────────────────────────────────────────────── */
.docs-footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  padding: 1.5rem clamp(1rem, 3vw, 2rem);
  margin-top: 3rem;
}
.docs-footer-inner {
  width: min(1240px, 100%);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.docs-footer p { margin: 0; }
.docs-footer ul { display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0; }
.docs-footer a { color: var(--text-muted); text-decoration: none; }
.docs-footer a:hover { color: var(--link); }

/* ── Mobile breakpoint (S-DO1 FR-010, FR-012, FR-013) ─────────── */
@media (max-width: 820px) {
  .docs-shell {
    display: block;
    padding: 1rem;
  }
  .docs-sidebar { display: none; }
  .docs-hamburger { display: inline-flex; }
  .docs-search-trigger { margin-left: 0; }
  .docs-search-trigger-label { display: none; }
  .docs-cta { padding: 0.4rem 0.7rem; }
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.3rem; }
}
@media (min-width: 821px) {
  .docs-drawer-overlay,
  .docs-drawer { display: none !important; }
}

body.docs-drawer-open { overflow: hidden; }