/* ==========================================================================
   AdForm — Dokumentasi Developer
   docs.css — complete theme stylesheet

   DESIGN LANGUAGE: EFFERD (locked owner directive, .claude/rules/efferd-design.md)
     · Monochrome zinc. Off-white surface, near-black ink, hairline rails.
     · Geist + Geist Mono. Numbers, code and identifiers are ALWAYS mono.
     · Brand accent appears in exactly THREE places — the live dot in the
       topbar, the focus ring, and the copy-success checkmark. Nowhere else.
       Links are ink, not brand. Buttons are black, not brand.
     · Headlines are LARGE and LIGHT (weight 500), tight tracking, lh ~1.1.
     · Framed content column with visible vertical RAIL lines and hairline
       horizontal dividers between sections. Never a stack of shadowed cards.
     · Radius 14px cards / 10px inner. Shadow at most 0 1px 2px rgba(20,20,16,.03).

   BUILD CONTRACT
     Emitted by scripts/build-docs.mjs to /assets/docs.<hash8>.css, so the
     relative url("fonts/…") below resolves to /assets/fonts/*.
     JS hooks consumed by theme/docs.js and NOT to be renamed:
       [data-copy]  .doc-code  [data-theme-toggle]  .doc-toc__link  [data-active]

   CONTRAST LEDGER — measured in-browser on the rendered page, both schemes,
   20 text roles. WCAG 2.1 AA (4.5:1 text, 3:1 non-text). Zero failures.
                                      LIGHT     DARK
     h1 heading .....................  18.97 /  18.85   (min 3, large text)
     body paragraph .................  10.01 /  15.50
     lede 18px ......................   4.63 /   7.68
     sidebar link, rest state .......   4.63 /   7.68
     nav / TOC / table labels 12px ..   5.48 /   9.24   (--doc-label)
     code text ......................  18.31 /  18.48
     table cell .....................  10.44 /  14.98
     scope + optional badges ........   4.83 /   7.42
     warning label ..................   6.44 /  10.11
     danger label ...................   7.45 /   8.64
     focus ring (non-text, min 3) ... 10.58 /   7.59
   Two rules this file enforces on itself:
     · Brand cyan is NEVER text on a light surface (2.48:1 — fails AA). It is
       a dot, a ring and a checkmark only.
     · --doc-muted on --doc-sunken measures 4.47:1 and FAILS. Every 12px
       uppercase label on a sunken fill therefore uses --doc-label instead.
     · --doc-faint is decorative only (list markers, separators). No
       load-bearing text is ever set in it.

   Re-run the audit against a rendered page before changing any colour token.
   ========================================================================== */

/* ── 1. Fonts ─────────────────────────────────────────────────────────────
   Self-hosted. Zero external network requests. If the woff2 files are missing
   the fallback stack renders the page correctly — nothing depends on Geist.
   ------------------------------------------------------------------------ */

@font-face {
  font-family: "Geist";
  src: url("fonts/Geist-Variable.woff2") format("woff2-variations"),
       url("fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("fonts/GeistMono-Regular.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* ── 2. Tokens ────────────────────────────────────────────────────────── */

:root {
  color-scheme: light;

  /* Type */
  --doc-font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --doc-font-mono: "Geist Mono", ui-monospace, "JetBrains Mono", SFMono-Regular,
    Menlo, Consolas, "Liberation Mono", monospace;

  --doc-text-xs: 0.75rem;      /* 12px */
  --doc-text-sm: 0.875rem;     /* 14px */
  --doc-text-base: 1rem;       /* 16px — floor for body copy, incl. mobile */
  --doc-text-lg: 1.125rem;     /* 18px */
  --doc-text-xl: 1.375rem;     /* 22px */
  --doc-text-2xl: 1.75rem;     /* 28px */
  --doc-text-code: 0.8125rem;  /* 13px */

  /* Surfaces — off-white, never pure white */
  --doc-bg: #fafafa;
  --doc-card: #ffffff;
  --doc-sunken: #f6f6f5;
  --doc-hover: #f0f0ef;

  /* Ink */
  --doc-fg: #0a0a0a;           /* headings, primary text */
  --doc-body: #3f3f46;         /* paragraphs — comfortable for long reads */
  --doc-muted: #6b7280;        /* metadata, captions, nav rest state */
  --doc-label: #5e6472;        /* 12px uppercase labels. Darker than --doc-muted
                                  because these sit on --doc-sunken, where
                                  --doc-muted lands at 4.47:1 and fails AA. */
  --doc-faint: #9ca3af;        /* DECORATIVE ONLY — never load-bearing text */

  /* Lines — hairline, very soft */
  --doc-border: #ececE8;
  --doc-border-strong: #dedede;

  /* Brand — three appearances only. See the header comment. */
  --doc-accent: #20b0c8;       /* cyan, from the logo */
  --doc-petrol: #004060;       /* petrol, from the logo */
  --doc-focus: var(--doc-petrol);

  /* Semantic — callouts only, always paired with a distinct icon + label */
  --doc-warn: #7c5400;
  --doc-warn-line: #e3d3a8;
  --doc-warn-bg: #fdfaf2;
  --doc-danger: #a11616;
  --doc-danger-line: #ecc9c9;
  --doc-danger-bg: #fdf6f6;

  /* Buttons — primary is BLACK, never brand-coloured */
  --doc-btn-bg: #0a0a0a;
  --doc-btn-fg: #fafafa;

  /* Geometry */
  --doc-radius-card: 14px;
  --doc-radius: 10px;
  --doc-radius-sm: 8px;
  --doc-radius-xs: 5px;
  --doc-shadow: 0 1px 2px rgba(20, 20, 16, 0.03);

  /* Layout */
  --doc-shell: 88rem;          /* 1408px — outer frame, matches Efferd */
  --doc-sidebar: 17rem;        /* 272px */
  --doc-toc: 15rem;            /* 240px */
  --doc-col: 38rem;            /* 608px ≈ 70 characters at 16px Geist.
                                  Efferd's docs column measures 672px (~78ch);
                                  trimmed here to honour the 65–75ch reading
                                  cap. Revert by editing this one line. */
  --doc-topbar-h: 56px;
  --doc-gutter: 16px;

  --doc-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --doc-dur: 160ms;
}

@media (min-width: 1024px) {
  :root { --doc-gutter: 24px; }
}

/* Dark — still monochrome zinc. Not blue-black, not pure black. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --doc-bg: #0b0b0c;
    --doc-card: #101012;
    --doc-sunken: #0e0e10;
    --doc-hover: #1a1a1d;
    --doc-fg: #fafafa;
    --doc-body: #e4e4e7;
    --doc-muted: #a1a1aa;
    --doc-label: #b4b4bd;
    --doc-faint: #71717a;
    --doc-border: rgba(255, 255, 255, 0.11);
    --doc-border-strong: rgba(255, 255, 255, 0.17);
    --doc-focus: #20b0c8;
    --doc-warn: #e3b341;
    --doc-warn-line: rgba(227, 179, 65, 0.28);
    --doc-warn-bg: rgba(227, 179, 65, 0.06);
    --doc-danger: #ff8a85;
    --doc-danger-line: rgba(255, 138, 133, 0.28);
    --doc-danger-bg: rgba(255, 138, 133, 0.06);
    --doc-btn-bg: #fafafa;
    --doc-btn-fg: #0a0a0a;
    --doc-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  }
}

/* The explicit toggle must win in BOTH directions over the media query. */
:root[data-theme="light"] {
  color-scheme: light;
  --doc-bg: #fafafa;
  --doc-card: #ffffff;
  --doc-sunken: #f6f6f5;
  --doc-hover: #f0f0ef;
  --doc-fg: #0a0a0a;
  --doc-body: #3f3f46;
  --doc-muted: #6b7280;
  --doc-label: #5e6472;
  --doc-faint: #9ca3af;
  --doc-border: #ececE8;
  --doc-border-strong: #dedede;
  --doc-focus: #004060;
  --doc-warn: #7c5400;
  --doc-warn-line: #e3d3a8;
  --doc-warn-bg: #fdfaf2;
  --doc-danger: #a11616;
  --doc-danger-line: #ecc9c9;
  --doc-danger-bg: #fdf6f6;
  --doc-btn-bg: #0a0a0a;
  --doc-btn-fg: #fafafa;
  --doc-shadow: 0 1px 2px rgba(20, 20, 16, 0.03);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --doc-bg: #0b0b0c;
  --doc-card: #101012;
  --doc-sunken: #0e0e10;
  --doc-hover: #1a1a1d;
  --doc-fg: #fafafa;
  --doc-body: #e4e4e7;
  --doc-muted: #a1a1aa;
  --doc-label: #b4b4bd;
  --doc-faint: #71717a;
  --doc-border: rgba(255, 255, 255, 0.11);
  --doc-border-strong: rgba(255, 255, 255, 0.17);
  --doc-focus: #20b0c8;
  --doc-warn: #e3b341;
  --doc-warn-line: rgba(227, 179, 65, 0.28);
  --doc-warn-bg: rgba(227, 179, 65, 0.06);
  --doc-danger: #ff8a85;
  --doc-danger-line: rgba(255, 138, 133, 0.28);
  --doc-danger-bg: rgba(255, 138, 133, 0.06);
  --doc-btn-bg: #fafafa;
  --doc-btn-fg: #0a0a0a;
  --doc-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* ── 3. Reset + base ─────────────────────────────────────────────────── */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--doc-bg);
  color: var(--doc-body);
  font-family: var(--doc-font);
  font-size: var(--doc-text-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* The page body must never scroll sideways. Wide children scroll inside
     their own containers (.doc-code pre, .doc-tablewrap). */
  overflow-x: clip;
}

img,
svg,
video { max-width: 100%; height: auto; display: block; }

button,
input,
select,
textarea { font: inherit; color: inherit; }

/* One global focus treatment. `outline` rather than box-shadow so it wraps
   inline links correctly across line breaks. Never removed without a
   replacement of at least equal visibility. */
:focus-visible {
  outline: 2px solid var(--doc-focus);
  outline-offset: 2px;
  border-radius: 3px;
}

:focus:not(:focus-visible) { outline: none; }

::selection {
  background: var(--doc-fg);
  color: var(--doc-bg);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Visually-hidden, still announced. */
.doc-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── 4. Skip link — the first focusable element on the page ──────────── */

.doc-skip {
  position: fixed;
  left: 12px;
  top: 12px;
  z-index: 90;
  transform: translateY(-180%);
  padding: 10px 16px;
  border: 1px solid var(--doc-border-strong);
  border-radius: var(--doc-radius-sm);
  background: var(--doc-card);
  color: var(--doc-fg);
  font-size: var(--doc-text-sm);
  font-weight: 500;
  text-decoration: none;
  box-shadow: var(--doc-shadow);
  transition: transform var(--doc-dur) var(--doc-ease);
}

.doc-skip:focus { transform: translateY(0); }

/* ── 5. Topbar ───────────────────────────────────────────────────────── */

.doc-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--doc-border);
  background: color-mix(in srgb, var(--doc-bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
}

@supports not (backdrop-filter: blur(1px)) {
  .doc-topbar { background: var(--doc-bg); }
}

.doc-topbar__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--doc-topbar-h);
  max-width: var(--doc-shell);
  margin-inline: auto;
  padding-inline: var(--doc-gutter);
}

.doc-topbar__spacer { flex: 1 1 auto; }

.doc-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--doc-fg);
  font-size: var(--doc-text-sm);
  font-weight: 500;
  letter-spacing: -0.012em;
  text-decoration: none;
  white-space: nowrap;
}

.doc-brand__mark {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 5px;
}

.doc-brand__text { color: inherit; }

/* BRAND ACCENT 1 of 3 — the single live dot. Nothing else in the topbar
   carries colour. */
.doc-dot {
  position: relative;
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--doc-accent);
}

.doc-dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid var(--doc-accent);
  opacity: 0;
  animation: doc-ping 2.8s var(--doc-ease) infinite;
}

@keyframes doc-ping {
  0%   { opacity: 0.5; transform: scale(0.7); }
  70%  { opacity: 0;   transform: scale(1.5); }
  100% { opacity: 0;   transform: scale(1.5); }
}

@media (prefers-reduced-motion: reduce) {
  .doc-dot::after { display: none; }
}

.doc-topbar__link {
  padding: 6px 10px;
  border-radius: var(--doc-radius-xs);
  color: var(--doc-muted);
  font-size: var(--doc-text-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--doc-dur) var(--doc-ease),
              background-color var(--doc-dur) var(--doc-ease);
}

.doc-topbar__link:hover {
  color: var(--doc-fg);
  background: var(--doc-hover);
}

@media (max-width: 599px) {
  .doc-topbar__link { display: none; }
}

/* ── 6. Buttons ──────────────────────────────────────────────────────── */

.doc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--doc-radius-sm);
  background: var(--doc-btn-bg);
  color: var(--doc-btn-fg);
  font-size: var(--doc-text-sm);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--doc-dur) var(--doc-ease),
              background-color var(--doc-dur) var(--doc-ease),
              border-color var(--doc-dur) var(--doc-ease);
}

.doc-btn:hover { opacity: 0.88; }

/* Ghost — thin border, no fill. */
.doc-btn--ghost {
  background: transparent;
  color: var(--doc-fg);
  border-color: var(--doc-border-strong);
}

.doc-btn--ghost:hover { background: var(--doc-hover); opacity: 1; }

.doc-btn svg { width: 16px; height: 16px; flex: none; }

/* Icon-only control: 34px visual, 44px hit area via the ::before overlay. */
.doc-iconbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--doc-radius-sm);
  background: transparent;
  color: var(--doc-muted);
  cursor: pointer;
  transition: background-color var(--doc-dur) var(--doc-ease),
              color var(--doc-dur) var(--doc-ease);
}

.doc-iconbtn::before {
  content: "";
  position: absolute;
  inset: -5px;
}

.doc-iconbtn:hover {
  background: var(--doc-hover);
  color: var(--doc-fg);
}

.doc-iconbtn svg { width: 16px; height: 16px; }

/* Theme toggle — inline SVG icons, never glyphs. Moon in light, sun in dark. */
.doc-themetoggle .doc-i-sun { display: none; }
.doc-themetoggle .doc-i-moon { display: block; }

@media (prefers-color-scheme: dark) {
  .doc-themetoggle .doc-i-sun { display: block; }
  .doc-themetoggle .doc-i-moon { display: none; }
}

:root[data-theme="dark"] .doc-themetoggle .doc-i-sun { display: block; }
:root[data-theme="dark"] .doc-themetoggle .doc-i-moon { display: none; }
:root[data-theme="light"] .doc-themetoggle .doc-i-sun { display: none; }
:root[data-theme="light"] .doc-themetoggle .doc-i-moon { display: block; }

/* ── 7. Shell, three-column grid, and the four vertical rails ────────────
   Rail 1 = shell left edge          (.doc-shell::before)
   Rail 2 = sidebar / content        (.doc-sidebar border-inline-end)
   Rail 3 = content / TOC            (.doc-col border-inline-end)
   Rail 4 = shell right edge         (.doc-shell::after)
   This is the Efferd hallmark: the empty side gutters read as deliberate
   framing rather than as slack.
   ---------------------------------------------------------------------- */

.doc-shell {
  position: relative;
  display: grid;
  grid-template-columns: var(--doc-sidebar) minmax(0, 1fr) var(--doc-toc);
  /* align-items MUST stay `stretch` (the default). Two things depend on it:
     rails 2 and 3 are borders on these columns and must run the full page
     height, and the sticky inner panels need a taller containing block than
     themselves or they never actually stick. */
  align-items: stretch;
  width: 100%;
  max-width: var(--doc-shell);
  margin-inline: auto;
  min-height: calc(100vh - var(--doc-topbar-h));
}

.doc-shell::before,
.doc-shell::after {
  content: "";
  position: absolute;
  inset-block: 0;
  width: 1px;
  background: var(--doc-border);
  pointer-events: none;
  z-index: 1;
}

.doc-shell::before { left: 0; }
.doc-shell::after  { right: 0; }

/* min-width:0 on grid children is what actually stops a wide code block or
   table from forcing the whole page to scroll sideways. */
.doc-sidebar,
.doc-col,
.doc-tocrail { min-width: 0; }

.doc-sidebar { border-inline-end: 1px solid var(--doc-border); }   /* rail 2 */
.doc-col     { border-inline-end: 1px solid var(--doc-border); }   /* rail 3 */

@media (max-width: 1279px) {
  .doc-shell { grid-template-columns: var(--doc-sidebar) minmax(0, 1fr); }
  .doc-tocrail { display: none; }
  .doc-col { border-inline-end: 0; }
}

@media (max-width: 899px) {
  .doc-shell { grid-template-columns: minmax(0, 1fr); }
  .doc-shell::before,
  .doc-shell::after { display: none; }
  .doc-sidebar { border-inline-end: 0; }
}

/* ── 8. Sidebar + mobile disclosure ──────────────────────────────────────
   Markup is <details class="doc-mobilenav"> wrapping the nav.
   ≥900px : the <summary> is hidden and the nav is always visible, so the
            disclosure is invisible and inert. The template ships the element
            with `open`, which means the nav is reachable with JavaScript and
            CSS disabled — no keyboard trap, no hidden-but-focusable links.
   <900px : the <summary> becomes a 46px-tall tap target; a 4-line inline
            script in the template collapses it at that breakpoint.
   -------------------------------------------------------------------- */

/* STICKY LIVES ON THE <details>, NOT ON THE NAV INSIDE IT.
   Chrome wraps a <details>'s children in a `::details-content` box, and that
   box — not the <details> — is the containing block for anything inside. It
   is only as tall as the nav, so a sticky nav has zero slack and silently
   never sticks. Sticking the <details> itself gives it .doc-sidebar (a
   full-height stretched grid item) as its containing block, which works in
   every engine and needs no ::details-content support. */
.doc-sidebar__inner {
  padding: 24px var(--doc-gutter) 40px;
  scrollbar-width: thin;
  scrollbar-color: var(--doc-border-strong) transparent;
}

@media (min-width: 900px) {
  .doc-mobilenav {
    position: sticky;
    top: var(--doc-topbar-h);
  }
  .doc-sidebar__inner {
    max-height: calc(100vh - var(--doc-topbar-h));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

.doc-sidebar__inner::-webkit-scrollbar { width: 8px; }
.doc-sidebar__inner::-webkit-scrollbar-track { background: transparent; }
.doc-sidebar__inner::-webkit-scrollbar-thumb {
  background: var(--doc-border-strong);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}

/* .doc-sidebar stays a plain block. It is a grid item under the default
   `align-items: stretch`, so it is already full page height — which is what
   both rail 2 and the sticky disclosure below depend on. */
.doc-mobilenav { display: block; }

.doc-mobilenav__summary {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 46px;
  padding: 12px var(--doc-gutter);
  border-bottom: 1px solid var(--doc-border);
  color: var(--doc-fg);
  font-size: var(--doc-text-sm);
  font-weight: 500;
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.doc-mobilenav__summary::-webkit-details-marker { display: none; }
.doc-mobilenav__summary::marker { content: ""; }
.doc-mobilenav__summary:hover { background: var(--doc-hover); }
.doc-mobilenav__summary:focus-visible { outline-offset: -3px; }

.doc-mobilenav__chev {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--doc-muted);
  transition: transform var(--doc-dur) var(--doc-ease);
}

.doc-mobilenav[open] .doc-mobilenav__chev { transform: rotate(180deg); }

@media (max-width: 899px) {
  .doc-mobilenav__summary { display: flex; }
  .doc-sidebar__inner {
    position: static;
    max-height: none;
    overflow: visible;
    padding: 12px var(--doc-gutter) 22px;
    border-bottom: 1px solid var(--doc-border);
  }
}

/* ── 9. Sidebar navigation ───────────────────────────────────────────── */

.doc-navgroup + .doc-navgroup {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--doc-border);
}

.doc-navgroup__title {
  margin: 0 0 8px;
  padding-inline: 10px;
  color: var(--doc-label);
  font-size: var(--doc-text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.doc-navlist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.doc-navlist a {
  position: relative;
  display: block;
  padding: 7px 10px;
  border-radius: var(--doc-radius-xs);
  color: var(--doc-muted);
  font-size: var(--doc-text-sm);
  line-height: 1.45;
  text-decoration: none;
  transition: color var(--doc-dur) var(--doc-ease),
              background-color var(--doc-dur) var(--doc-ease);
}

.doc-navlist a:hover {
  color: var(--doc-fg);
  background: var(--doc-hover);
}

/* Active item is signalled on THREE channels — marker bar, weight, ink
   colour — so it is never colour alone. */
.doc-navlist a[aria-current="page"],
.doc-navlist a[data-active],
.doc-navlist a.is-active {
  color: var(--doc-fg);
  font-weight: 500;
  background: var(--doc-hover);
}

.doc-navlist a[aria-current="page"]::before,
.doc-navlist a[data-active]::before,
.doc-navlist a.is-active::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: 2px;
  background: var(--doc-fg);
}

/* ── 10. Main column ─────────────────────────────────────────────────── */

.doc-col {
  padding-inline: clamp(16px, 4vw, 48px);
  padding-bottom: 76px;
}

.doc-article {
  max-width: var(--doc-col);
  margin-inline: auto;
}

/* ── 11. Breadcrumb + page head ──────────────────────────────────────── */

.doc-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding-top: 26px;
  color: var(--doc-muted);
  font-size: var(--doc-text-xs);
}

.doc-breadcrumb:empty { display: none; }

.doc-breadcrumb a { color: inherit; text-decoration: none; }

.doc-breadcrumb a:hover {
  color: var(--doc-fg);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.doc-breadcrumb__sep { color: var(--doc-faint); }

.doc-titleblock {
  padding: 14px 0 26px;
  border-bottom: 1px solid var(--doc-border);
}

/* Headline: LARGE and LIGHT. Weight 500, tight tracking, lh ~1.1. */
.doc-title {
  margin: 0;
  color: var(--doc-fg);
  font-size: var(--doc-text-2xl);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.032em;
  text-wrap: balance;
}

@media (min-width: 768px) {
  .doc-title {
    font-size: 2rem;
    line-height: 1.08;
    letter-spacing: -0.036em;
  }
}

.doc-lede {
  margin: 10px 0 0;
  color: var(--doc-muted);
  font-size: var(--doc-text-lg);
  line-height: 1.55;
  text-wrap: pretty;
}

.doc-lede:empty { display: none; }

.doc-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

.doc-meta:empty { display: none; }

/* HTTP method + scope badges. Monochrome — the WORD is the differentiator,
   not a colour. Mono face, per "identifiers are always mono". */
.doc-method,
.doc-scope {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border: 1px solid var(--doc-border-strong);
  border-radius: var(--doc-radius-xs);
  background: var(--doc-card);
  font-family: var(--doc-font-mono);
  font-size: var(--doc-text-xs);
  line-height: 1.5;
  white-space: nowrap;
}

.doc-method {
  color: var(--doc-fg);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.doc-scope { color: var(--doc-muted); }

/* Endpoint line under the badges — scrolls inside itself when long. */
.doc-endpointline {
  margin: 12px 0 0;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.doc-endpointline::-webkit-scrollbar { display: none; }

.doc-endpointline code {
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid var(--doc-border);
  border-radius: var(--doc-radius-xs);
  background: var(--doc-sunken);
  color: var(--doc-body);
  font-family: var(--doc-font-mono);
  font-size: var(--doc-text-xs);
  white-space: nowrap;
}

/* ── 12. Prose ───────────────────────────────────────────────────────── */

.doc-body { padding-top: 30px; }

.doc-body > * { margin: 0; }
.doc-body > * + * { margin-top: 18px; }

.doc-body p {
  color: var(--doc-body);
  line-height: 1.75;
  text-wrap: pretty;
}

.doc-body strong { color: var(--doc-fg); font-weight: 500; }
.doc-body em { font-style: italic; }

/* Sequential heading levels only: h1 (title block) → h2 → h3 → h4. */
.doc-h2,
.doc-h3,
.doc-h4 {
  position: relative;
  color: var(--doc-fg);
  letter-spacing: -0.02em;
  text-wrap: balance;
  scroll-margin-top: calc(var(--doc-topbar-h) + 20px);
}

/* Section rhythm: 44px of air above each h2 with a hairline divider drawn at
   the top of that space. Sections are delimited by LINES, never by cards. */
.doc-body > .doc-h2 {
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid var(--doc-border);
  font-size: var(--doc-text-xl);
  font-weight: 500;
  line-height: 1.35;
}

.doc-body > .doc-h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.doc-body > .doc-h3 {
  margin-top: 32px;
  font-size: var(--doc-text-lg);
  font-weight: 500;
  line-height: 1.45;
}

.doc-body > .doc-h4 {
  margin-top: 26px;
  font-size: var(--doc-text-base);
  font-weight: 500;
  line-height: 1.5;
}

/* Heading anchor: hidden until hover, but ALWAYS revealed on keyboard focus
   so it can never be a hidden-yet-focusable trap. */
.doc-anchor {
  position: absolute;
  left: -1.1em;
  width: 1.1em;
  color: var(--doc-faint);
  font-weight: 400;
  text-decoration: none;
  opacity: 0;
  transition: opacity var(--doc-dur) var(--doc-ease);
}

.doc-h2:hover > .doc-anchor,
.doc-h3:hover > .doc-anchor,
.doc-h4:hover > .doc-anchor,
.doc-anchor:focus-visible { opacity: 1; }

.doc-anchor:hover { color: var(--doc-fg); }

/* Below the width where the hanging anchor has a margin to live in, hide it
   the visually-hidden way rather than with opacity. `width:0` does nothing to
   an inline box, so an opacity-0 anchor still occupies its glyph advance and
   visibly indents every heading. Clipping it out of flow keeps the headings
   flush AND keeps the anchor reachable by keyboard. */
@media (max-width: 1023px) {
  .doc-anchor {
    position: absolute;
    left: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    opacity: 1;
  }
  .doc-anchor:focus-visible {
    position: static;
    width: auto;
    height: auto;
    clip-path: none;
    margin-right: 6px;
  }
}

/* Links are ink, not brand. Underline settles in on hover. */
.doc-link,
.doc-body a {
  color: var(--doc-fg);
  text-decoration: underline;
  text-decoration-color: var(--doc-border-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--doc-dur) var(--doc-ease);
}

.doc-link:hover,
.doc-body a:hover { text-decoration-color: currentColor; }

.doc-link--ext svg {
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-left: 3px;
  vertical-align: -1px;
  color: var(--doc-muted);
}

/* Lists */
.doc-body ul,
.doc-body ol {
  padding-left: 1.35em;
  color: var(--doc-body);
}

.doc-body li + li { margin-top: 7px; }
.doc-body li::marker { color: var(--doc-faint); }
.doc-body li > p + p { margin-top: 7px; }

.doc-body ul ul,
.doc-body ol ol,
.doc-body ul ol,
.doc-body ol ul { margin-top: 7px; }

/* Blockquote — hairline rail, no tint, no card. */
.doc-body blockquote {
  padding: 2px 0 2px 18px;
  border-left: 2px solid var(--doc-border-strong);
  color: var(--doc-muted);
}

.doc-body blockquote p { color: inherit; }
.doc-body blockquote > * + * { margin-top: 12px; }

/* Divider inside prose */
.doc-body hr {
  height: 1px;
  border: 0;
  background: var(--doc-border);
  margin-block: 34px;
}

/* Inline code */
.doc-body :not(pre) > code {
  padding: 0.12em 0.38em;
  border: 1px solid var(--doc-border);
  border-radius: var(--doc-radius-xs);
  background: var(--doc-sunken);
  color: var(--doc-fg);
  font-family: var(--doc-font-mono);
  font-size: 0.86em;
  overflow-wrap: anywhere;
}

.doc-body a > code { color: inherit; }

kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 1px 5px;
  border: 1px solid var(--doc-border-strong);
  border-bottom-width: 2px;
  border-radius: var(--doc-radius-xs);
  background: var(--doc-card);
  color: var(--doc-fg);
  font-family: var(--doc-font-mono);
  font-size: var(--doc-text-xs);
  text-align: center;
}

/* Figures */
.doc-body img {
  border: 1px solid var(--doc-border);
  border-radius: var(--doc-radius);
  background: var(--doc-card);
}

.doc-body figcaption {
  margin-top: 8px;
  color: var(--doc-muted);
  font-size: var(--doc-text-xs);
}

/* ── 13. Code blocks — the two-shell Efferd construction ─────────────────
   Outer   .doc-code           14px radius, hairline border, card fill, 4px pad
   Bar     .doc-code__bar      filename / language + the copy button
   Surface .doc-code__surface  10px radius, hairline border, sunken fill,
                               plus a 1px inner top highlight (the premium tell)
   <pre>                       scrolls HORIZONTALLY inside itself; the page
                               body never does.
   -------------------------------------------------------------------- */

.doc-code {
  padding: 4px;
  border: 1px solid var(--doc-border);
  border-radius: var(--doc-radius-card);
  background: var(--doc-card);
  box-shadow: var(--doc-shadow);
}

.doc-code__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 32px;
  padding: 5px 6px 5px 12px;
}

/* No filename: the copy button alone, right-aligned. */
.doc-code__bar--bare { justify-content: flex-end; }

.doc-code__name {
  margin: 0;
  overflow: hidden;
  color: var(--doc-muted);
  font-family: var(--doc-font-mono);
  font-size: var(--doc-text-xs);
  line-height: 1.5;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.doc-code__surface {
  position: relative;
  border: 1px solid var(--doc-border);
  border-radius: var(--doc-radius);
  background: var(--doc-sunken);
  overflow: hidden;
}

/* The 1px inner top highlight. */
.doc-code__surface::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: calc(var(--doc-radius) - 1px);
  box-shadow: inset 0 1px color-mix(in srgb, var(--doc-fg) 7%, transparent);
  pointer-events: none;
  z-index: 1;
}

.doc-code pre {
  margin: 0;
  padding: 14px 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  background: transparent;
  scrollbar-width: thin;
  scrollbar-color: var(--doc-border-strong) transparent;
}

.doc-code pre::-webkit-scrollbar { height: 8px; }
.doc-code pre::-webkit-scrollbar-track { background: transparent; }
.doc-code pre::-webkit-scrollbar-thumb {
  background: var(--doc-border-strong);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}

.doc-code code {
  display: block;
  color: var(--doc-fg);
  font-family: var(--doc-font-mono);
  font-size: var(--doc-text-code);
  line-height: 1.65;
  tab-size: 2;
  white-space: pre;
}

/* Copy button. Styled here; the wiring lives in theme/docs.js.
   Supports both the `[data-copied]` attribute and the `.is-copied` class. */
.doc-copy {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--doc-radius-sm);
  background: transparent;
  color: var(--doc-muted);
  cursor: pointer;
  transition: background-color var(--doc-dur) var(--doc-ease),
              color var(--doc-dur) var(--doc-ease);
}

/* 44px hit area without inflating the 28px visual. */
.doc-copy::before {
  content: "";
  position: absolute;
  inset: -8px;
}

.doc-copy:hover {
  background: var(--doc-hover);
  color: var(--doc-fg);
}

.doc-copy svg {
  position: absolute;
  width: 14px;
  height: 14px;
  transition: opacity var(--doc-dur) var(--doc-ease),
              transform var(--doc-dur) var(--doc-ease);
}

.doc-copy .doc-i-copy { opacity: 1; transform: scale(1); }

/* BRAND ACCENT 2 of 3 — the copy-success checkmark. */
.doc-copy .doc-i-check {
  opacity: 0;
  transform: scale(0.6);
  color: var(--doc-accent);
}

.doc-copy[data-copied] .doc-i-copy,
.doc-copy.is-copied .doc-i-copy { opacity: 0; transform: scale(0.6); }

.doc-copy[data-copied] .doc-i-check,
.doc-copy.is-copied .doc-i-check { opacity: 1; transform: scale(1); }

/* ── 14. Tables — API reference: parameter / type / required / description */

.doc-tablewrap {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--doc-border);
  border-radius: var(--doc-radius);
  background: var(--doc-card);
  box-shadow: var(--doc-shadow);
  scrollbar-width: thin;
  scrollbar-color: var(--doc-border-strong) transparent;
}

.doc-tablewrap::-webkit-scrollbar { height: 8px; }
.doc-tablewrap::-webkit-scrollbar-track { background: transparent; }
.doc-tablewrap::-webkit-scrollbar-thumb {
  background: var(--doc-border-strong);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}

.doc-tablewrap table {
  width: 100%;
  /* Wide enough that a 4-column parameter table never squeezes the type
     column into a hyphen-free mid-word break. Below this the wrapper scrolls,
     which is the intended behaviour — the page body still never does. */
  min-width: 42rem;
  border-collapse: collapse;
  font-size: var(--doc-text-sm);
  line-height: 1.6;
}

.doc-tablewrap caption {
  padding: 10px 14px;
  border-bottom: 1px solid var(--doc-border);
  color: var(--doc-muted);
  font-size: var(--doc-text-xs);
  text-align: left;
}

.doc-tablewrap thead th {
  padding: 9px 14px;
  border-bottom: 1px solid var(--doc-border);
  background: var(--doc-sunken);
  color: var(--doc-label);
  font-size: var(--doc-text-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.doc-tablewrap tbody td,
.doc-tablewrap tbody th {
  padding: 11px 14px;
  border-top: 1px solid var(--doc-border);
  color: var(--doc-body);
  text-align: left;
  vertical-align: top;
}

.doc-tablewrap tbody tr:first-child td,
.doc-tablewrap tbody tr:first-child th { border-top: 0; }

.doc-tablewrap tbody th { color: var(--doc-fg); font-weight: 500; }

.doc-tablewrap tbody tr:hover td,
.doc-tablewrap tbody tr:hover th { background: var(--doc-sunken); }

/* Identifiers inside a table must never break mid-token — `string` splitting
   into `strin` / `g` is worse than a scrollbar. Long values still get an
   escape hatch via the wrapper's overflow-x. */
.doc-tablewrap code {
  font-family: var(--doc-font-mono);
  font-size: 0.92em;
  white-space: nowrap;
}

/* Name, type and required columns stay on one line. The description column
   (last) is the only one allowed to wrap, so it absorbs the slack. */
.doc-tablewrap tbody td:not(:last-child),
.doc-tablewrap tbody th:not(:last-child) { white-space: nowrap; }

.doc-tablewrap tbody td:last-child,
.doc-tablewrap tbody th:last-child { min-width: 16rem; }

/* Required flag: a word plus a glyph — never colour alone. */
.doc-req,
.doc-opt {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--doc-font-mono);
  font-size: var(--doc-text-xs);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.doc-req { color: var(--doc-fg); font-weight: 500; }
.doc-opt { color: var(--doc-muted); }

.doc-req::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
}

.doc-opt::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: none;
  border-radius: 50%;
  border: 1px solid currentColor;
}

/* ── 15. Callouts — note / warning / danger ──────────────────────────────
   Differentiated on FOUR channels so colour is never the sole signal:
     1. a distinct icon SHAPE  (circle / triangle / octagon)
     2. a visible text LABEL
     3. left border WEIGHT + STYLE (2px solid / 3px solid / 3px double)
     4. a restrained semantic hue
   Icons are SVG (CSS masks, inlined as data URIs — no network, no emoji).
   -------------------------------------------------------------------- */

.doc-callout {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 4px 11px;
  padding: 14px 16px;
  border: 1px solid var(--doc-border);
  border-left-width: 2px;
  border-left-color: var(--doc-border-strong);
  border-radius: var(--doc-radius);
  background: var(--doc-card);
  color: var(--doc-body);
}

.doc-callout::before {
  content: "";
  grid-row: 1 / span 2;
  grid-column: 1;
  width: 18px;
  height: 18px;
  background-color: var(--doc-muted);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 18px 18px;
  mask-size: 18px 18px;
}

.doc-callout__label {
  grid-column: 2;
  margin: 0;
  color: var(--doc-fg);
  font-size: var(--doc-text-xs);
  font-weight: 500;
  letter-spacing: 0.07em;
  line-height: 18px;
  text-transform: uppercase;
}

.doc-callout__body { grid-column: 2; min-width: 0; }
.doc-callout__body > * { margin: 0; }
.doc-callout__body > * + * { margin-top: 10px; }

.doc-callout__body p {
  color: inherit;
  font-size: var(--doc-text-sm);
  line-height: 1.65;
}

/* NOTE — circle + i */
.doc-callout--note::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11.25v4.75'/%3E%3Cpath d='M12 7.9h.01'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11.25v4.75'/%3E%3Cpath d='M12 7.9h.01'/%3E%3C/svg%3E");
}

/* WARNING — triangle + ! */
.doc-callout--warning {
  border-color: var(--doc-warn-line);
  border-left-width: 3px;
  border-left-color: var(--doc-warn);
  background: var(--doc-warn-bg);
}

.doc-callout--warning .doc-callout__label { color: var(--doc-warn); }

.doc-callout--warning::before {
  background-color: var(--doc-warn);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cpath d='M12 9v4.5'/%3E%3Cpath d='M12 17.2h.01'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cpath d='M12 9v4.5'/%3E%3Cpath d='M12 17.2h.01'/%3E%3C/svg%3E");
}

/* DANGER — octagon + × */
.doc-callout--danger {
  border-color: var(--doc-danger-line);
  border-left-width: 3px;
  border-left-style: double;
  border-left-color: var(--doc-danger);
  background: var(--doc-danger-bg);
}

.doc-callout--danger .doc-callout__label { color: var(--doc-danger); }

.doc-callout--danger::before {
  background-color: var(--doc-danger);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.86 2h8.28L22 7.86v8.28L16.14 22H7.86L2 16.14V7.86z'/%3E%3Cpath d='m14.5 9.5-5 5'/%3E%3Cpath d='m9.5 9.5 5 5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.86 2h8.28L22 7.86v8.28L16.14 22H7.86L2 16.14V7.86z'/%3E%3Cpath d='m14.5 9.5-5 5'/%3E%3Cpath d='m9.5 9.5 5 5'/%3E%3C/svg%3E");
}

/* ── 16. Pager ───────────────────────────────────────────────────────── */

.doc-pager {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 52px;
  padding-top: 28px;
  border-top: 1px solid var(--doc-border);
}

.doc-pager:empty { display: none; }

.doc-pager__link {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 13px 16px;
  border: 1px solid var(--doc-border);
  border-radius: var(--doc-radius);
  background: var(--doc-card);
  text-decoration: none;
  transition: border-color var(--doc-dur) var(--doc-ease),
              background-color var(--doc-dur) var(--doc-ease);
}

.doc-pager__link:hover {
  border-color: var(--doc-border-strong);
  background: var(--doc-sunken);
}

.doc-pager__link--next {
  grid-column: 2;
  align-items: flex-end;
  text-align: right;
}

.doc-pager__dir {
  color: var(--doc-muted);
  font-size: var(--doc-text-xs);
  letter-spacing: 0.02em;
}

.doc-pager__title {
  color: var(--doc-fg);
  font-size: var(--doc-text-sm);
  font-weight: 500;
  line-height: 1.45;
}

@media (max-width: 599px) {
  .doc-pager { grid-template-columns: minmax(0, 1fr); }
  .doc-pager__link--next { grid-column: 1; }
}

/* ── 17. Article footer ──────────────────────────────────────────────── */

.doc-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid var(--doc-border);
  color: var(--doc-muted);
  font-size: var(--doc-text-xs);
}

.doc-footer p { margin: 0; }
.doc-footer p:empty { display: none; }

.doc-footer a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--doc-border-strong);
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.doc-footer a:hover { color: var(--doc-fg); }

.doc-footer__updated,
.doc-footer__build { font-family: var(--doc-font-mono); }
.doc-footer__build { color: var(--doc-faint); }
.doc-footer__md { flex: 1 1 100%; order: 3; }

/* ── 18. TOC rail ────────────────────────────────────────────────────── */

.doc-tocrail__inner,
.doc-tocrail > .doc-toc {
  position: sticky;
  top: var(--doc-topbar-h);
  max-height: calc(100vh - var(--doc-topbar-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 30px var(--doc-gutter) 40px;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.doc-tocrail__inner:hover,
.doc-tocrail > .doc-toc:hover {
  scrollbar-color: var(--doc-border-strong) transparent;
}

/* No TOC emitted (page has fewer than two headings) → the rail stays blank
   rather than showing an empty sticky box. Requires the build to emit '' with
   no surrounding whitespace, which page.html is written to allow. */
.doc-toc:empty { display: none; }

.doc-toc__title {
  margin: 0 0 10px;
  color: var(--doc-label);
  font-size: var(--doc-text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.doc-toc ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--doc-border);
}

.doc-toc li { margin: 0; }

.doc-toc__link {
  display: block;
  margin-left: -1px;
  padding: 5px 0 5px 12px;
  border-left: 1px solid transparent;
  color: var(--doc-muted);
  font-size: var(--doc-text-xs);
  line-height: 1.5;
  text-decoration: none;
  transition: color var(--doc-dur) var(--doc-ease),
              border-color var(--doc-dur) var(--doc-ease);
}

.doc-toc__link:hover {
  color: var(--doc-fg);
  border-left-color: var(--doc-border-strong);
}

/* Active: marker + weight + ink colour. Three channels, never colour alone. */
.doc-toc__link[data-active],
.doc-toc__link.is-active {
  color: var(--doc-fg);
  font-weight: 500;
  border-left-color: var(--doc-fg);
}

.doc-toc__link:focus-visible { outline-offset: -2px; }

.doc-toc__lvl3 > .doc-toc__link { padding-left: 24px; }

/* ── 19. Mobile refinements ──────────────────────────────────────────── */

@media (max-width: 899px) {
  .doc-col {
    padding-inline: var(--doc-gutter);
    padding-bottom: 56px;
  }
  .doc-article { max-width: none; }
  .doc-breadcrumb { padding-top: 20px; }
  .doc-title { font-size: 1.625rem; }
  .doc-lede { font-size: var(--doc-text-base); }
  /* Body copy never drops below 16px on mobile. */
  body { font-size: var(--doc-text-base); }
}

/* ── 20. Print ───────────────────────────────────────────────────────── */

@media print {
  .doc-topbar,
  .doc-sidebar,
  .doc-tocrail,
  .doc-pager,
  .doc-copy,
  .doc-skip { display: none !important; }

  .doc-shell::before,
  .doc-shell::after { display: none; }

  .doc-shell { display: block; min-height: 0; }
  .doc-col { border: 0; padding: 0; }
  .doc-article { max-width: none; }

  body { background: #fff; color: #000; }

  .doc-code,
  .doc-tablewrap,
  .doc-callout { break-inside: avoid; box-shadow: none; }

  .doc-body a::after {
    content: " (" attr(href) ")";
    color: #555;
    font-size: 0.85em;
  }
}