/* ==========================================================================
   slaude documentation
   Design tokens first, then layout, then prose, then components.
   ========================================================================== */

:root {
  --bg: #f9faf8;
  --bg-sunk: #f1f3f0;
  --surface: #ffffff;
  --surface-2: #f9faf8;
  --border: #e5e7eb;
  --border-strong: #c6cad0;

  --text: #111928;
  --text-2: #525c6a;
  --text-3: #6b7280;
  --text-4: #8e95a3;

  --accent: #853291;
  --accent-hover: #732c7c;
  --accent-soft: #fef3ff;
  --accent-line: #e5b8ef;

  /* The 600/700 steps, not 500: the 500-on-50-tint pairing the palette
     suggests lands between 2.1:1 and 4.4:1, under the 4.5:1 text minimum. */
  --ok: #007d55;
  --ok-soft: #e4fcef;
  --ok-line: #a8e6c9;
  --warn: #ad540a;
  --warn-soft: #fdf4e9;
  --warn-line: #f6d9ac;
  --danger: #ac2b26;
  --danger-soft: #fff4f3;
  --danger-line: #f5c0bd;
  --info: #056dce;
  --info-soft: #edf7ff;
  --info-line: #b9dcfa;

  --overlay: rgba(17, 25, 40, .8);

  /* Code keeps one dark surface in both themes, drawn from the darkest neutral
     so it reads as part of the same family rather than a pasted-in terminal. */
  --code-bg: #111928;
  --code-text: #e5e7eb;
  --code-bar: #1b2432;

  /* 6 chips · 8 inputs and default interactive · 12 cards and modals ·
     full for buttons and badges. */
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  /* 4px base. Steps: 2 4 8 12 16 20 24 32 40 48 — nothing between them. */
  --s-2: 2px;
  --s-4: 4px;
  --s-8: 8px;
  --s-12: 12px;
  --s-16: 16px;
  --s-20: 20px;
  --s-24: 24px;
  --s-32: 32px;
  --s-40: 40px;
  --s-48: 48px;

  --page-pad-x: 16px;
  --card-pad: 12px;
  --section-gap: 12px;
  --card-gap: 8px;

  --topbar-h: 48px;
  --topnav-h: 44px;
  --sidebar-w: 268px;
  --toc-w: 232px;
  --content-max: 748px;

  --shadow-sm: 0 1px 2px rgba(17, 25, 40, .05);
  --shadow-md: 0 4px 16px -4px rgba(17, 25, 40, .12), 0 1px 3px rgba(17, 25, 40, .06);
  --shadow-lg: 0 24px 60px -12px rgba(17, 25, 40, .28), 0 2px 8px rgba(17, 25, 40, .08);
}

/* The palette above defines one light theme. The dark values below are derived
   from it: hues held, the brand lifted out of the 500/600 band (which fails
   contrast on a dark ground) into the 200/300 band, and the neutrals rotated
   around the darkest neutral rather than pure grey so both themes read as one
   family. Kept in sync between the media query and the explicit toggle. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #0b1018;
    --bg-sunk: #070b11;
    --surface: #111928;
    --surface-2: #1a2433;
    --border: #2a3444;
    --border-strong: #3d4859;

    --text: #f9faf8;
    --text-2: #c6cad0;
    --text-3: #8e95a3;
    --text-4: #6b7280;

    --accent: #d68ee4;
    --accent-hover: #e5b8ef;
    --accent-soft: #2a122e;
    --accent-line: #4a2050;

    --ok: #4fd3a0;
    --ok-soft: #08251a;
    --ok-line: #17513a;
    --warn: #f7b75c;
    --warn-soft: #2a1d0a;
    --warn-line: #543a16;
    --danger: #f2726c;
    --danger-soft: #2c1211;
    --danger-line: #5a2523;
    --info: #5ca8f0;
    --info-soft: #0a1c2e;
    --info-line: #1b3e60;

    --code-bg: #0b1018;
    --code-text: #e5e7eb;
    --code-bar: #111928;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 4px 16px -4px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .4);
    --shadow-lg: 0 24px 60px -12px rgba(0, 0, 0, .7), 0 2px 8px rgba(0, 0, 0, .5);
  }
}

:root[data-theme='dark'] {
  --bg: #0b1018;
  --bg-sunk: #070b11;
  --surface: #111928;
  --surface-2: #1a2433;
  --border: #2a3444;
  --border-strong: #3d4859;

  --text: #f9faf8;
  --text-2: #c6cad0;
  --text-3: #8e95a3;
  --text-4: #6b7280;

  --accent: #d68ee4;
  --accent-hover: #e5b8ef;
  --accent-soft: #2a122e;
  --accent-line: #4a2050;

  --ok: #4fd3a0;
  --ok-soft: #08251a;
  --ok-line: #17513a;
  --warn: #f7b75c;
  --warn-soft: #2a1d0a;
  --warn-line: #543a16;
  --danger: #f2726c;
  --danger-soft: #2c1211;
  --danger-line: #5a2523;
  --info: #5ca8f0;
  --info-soft: #0a1c2e;
  --info-line: #1b3e60;

  --code-bg: #0b1018;
  --code-text: #e5e7eb;
  --code-bar: #111928;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 4px 16px -4px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .4);
  --shadow-lg: 0 24px 60px -12px rgba(0, 0, 0, .7), 0 2px 8px rgba(0, 0, 0, .5);
}

/* --------------------------------------------------------------- reset -- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--topbar-h) + var(--topnav-h) + 20px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: .001ms !important; transition-duration: .001ms !important; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; }
svg { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

button { font: inherit; color: inherit; }

::selection { background: var(--accent-line); color: var(--text); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent); color: #fff; padding: 12px 16px; border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; color: #fff; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }

/* -------------------------------------------------------------- topbar -- */

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

.topbar-inner {
  height: var(--topbar-h);
  display: flex; align-items: center; gap: var(--s-12);
  padding: 0 var(--page-pad-x);
  max-width: 1560px; margin: 0 auto;
}

.menu-btn {
  display: none; width: 32px; height: 32px; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--border); border-radius: var(--radius-full); cursor: pointer; color: var(--text-2);
}
.menu-btn svg { width: 16px; height: 16px; }

.brand { display: flex; align-items: baseline; gap: 8px; color: var(--text); flex-shrink: 0; }
.brand:hover { color: var(--text); }
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: var(--radius-sm);
  background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: -.01em;
  transform: translateY(2px);
}
.brand-name { font-weight: 700; font-size: 16px; letter-spacing: -.01em; }
.brand-sub { font-size: 12px; color: var(--text-3); font-weight: 500; }

.search-btn {
  margin-left: auto; margin-right: auto;
  display: flex; align-items: center; gap: var(--s-8);
  width: min(440px, 42vw); padding: 8px 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-full);
  color: var(--text-3); font-size: 14px; cursor: pointer;
  transition: border-color .14s, box-shadow .14s;
}
.search-btn:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.search-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.search-btn span { flex: 1; text-align: left; }
.search-btn kbd, .search-input-row kbd {
  font-family: var(--sans); font-size: 10px; font-weight: 500; letter-spacing: .06em;
  padding: 2px 4px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-sunk); color: var(--text-4);
}

.topbar-actions { display: flex; align-items: center; gap: var(--s-4); flex-shrink: 0; }
.ghost {
  padding: 8px 12px; border-radius: var(--radius-full); font-size: 14px; font-weight: 500; color: var(--text-2);
}
.ghost:hover { background: var(--surface-2); color: var(--text); }

.theme-btn {
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: var(--radius-full); cursor: pointer; color: var(--text-3);
}
.theme-btn:hover { background: var(--surface-2); color: var(--text); }
.theme-btn svg { width: 16px; height: 16px; }
.i-moon { display: none; }
:root[data-theme='dark'] .i-sun { display: none; }
:root[data-theme='dark'] .i-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .i-sun { display: none; }
  :root:not([data-theme='light']) .i-moon { display: block; }
}

/* -------------------------------------------------------------- topnav -- */

.topnav {
  border-bottom: 1px solid var(--border);
  overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.topnav::-webkit-scrollbar { display: none; }
.topnav-tab { scroll-snap-align: start; }
.topnav-inner {
  display: flex; gap: var(--s-4); padding: 0 var(--page-pad-x); max-width: 1560px; margin: 0 auto;
  height: var(--topnav-h); align-items: stretch;
}
.topnav-tab {
  display: inline-flex; align-items: center; padding: 0 var(--s-12);
  font-size: 14px; font-weight: 500; color: var(--text-3);
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.topnav-tab:hover { color: var(--text); }
.topnav-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 700; }

/* --------------------------------------------------------------- shell -- */

.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--toc-w);
  gap: 0 var(--s-40);
  max-width: 1560px; margin: 0 auto; padding: 0 var(--page-pad-x);
  align-items: start;
}

.sidebar {
  position: sticky; top: calc(var(--topbar-h) + var(--topnav-h));
  height: calc(100vh - var(--topbar-h) - var(--topnav-h));
  overflow-y: auto; overscroll-behavior: contain;
  padding: var(--s-24) var(--s-12) var(--s-48) 0;
  scrollbar-width: thin;
}
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-full); border: 2px solid var(--bg); }

.nav-group + .nav-group { margin-top: var(--s-24); }
.nav-group-title {
  margin: 0 0 var(--s-4); padding: 0 var(--s-8);
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-3);
}
.sidebar ul { list-style: none; margin: 0; padding: 0; }
.sidebar li a {
  display: block; padding: var(--s-4) var(--s-8); border-radius: var(--radius-sm);
  font-size: 14px; color: var(--text-2); line-height: 1.45;
}
.sidebar li a:hover { background: var(--surface-2); color: var(--text); }
.sidebar li a.active {
  background: var(--accent-soft); color: var(--accent); font-weight: 700;
  box-shadow: inset 2px 0 0 var(--accent);
}

.content { min-width: 0; padding: var(--s-32) 0 var(--s-48); }

.toc-col { position: sticky; top: calc(var(--topbar-h) + var(--topnav-h)); padding: var(--s-32) 0 var(--s-40); }
.toc { max-height: calc(100vh - 140px); overflow-y: auto; }
.toc ul { border-left: 2px solid var(--border); }
.toc-title { margin: 0 0 var(--s-8); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc li a {
  display: block; padding: var(--s-4) 0 var(--s-4) var(--s-12); margin-left: -2px;
  border-left: 2px solid transparent;
  font-size: 14px; color: var(--text-2); line-height: 1.4;
}
.toc li a:hover { color: var(--text); border-left-color: var(--border-strong); }
.toc li a.active { color: var(--accent); font-weight: 700; border-left-color: var(--accent); }
.toc-h3 a { padding-left: var(--s-24) !important; font-size: 12px; }

/* --------------------------------------------------------------- prose -- */

.prose { max-width: var(--content-max); }

.page-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-20);
  margin-bottom: var(--s-12);
}
.page-head h1 { margin-bottom: 0; }

.copy-page {
  display: inline-flex; align-items: center; gap: var(--s-4); flex-shrink: 0;
  margin-top: var(--s-4); padding: var(--s-8) var(--s-12);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-full);
  color: var(--text-2); font-size: 14px; font-weight: 500; cursor: pointer;
  transition: border-color .14s, color .14s, box-shadow .14s;
}
.copy-page:hover { border-color: var(--border-strong); color: var(--text); box-shadow: var(--shadow-sm); }
.copy-page.done { color: var(--ok); border-color: var(--ok-line); }
.copy-page svg { width: 14px; height: 14px; }
@media (max-width: 560px) { .copy-page span { display: none; } .copy-page { padding: var(--s-8); } }

.eyebrow {
  margin: 0 0 var(--s-4); font-size: 12px; font-weight: 700; color: var(--accent);
  letter-spacing: 0;
}

.prose h1 {
  margin: 0 0 var(--s-12); text-wrap: balance; font-size: 32px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em;
}
.lede { margin: 0 0 var(--s-24); font-size: 18px; line-height: 1.6; color: var(--text-3); }

.prose h2 {
  overflow-wrap: break-word;
  margin: var(--s-48) 0 var(--s-16); font-size: 24px; line-height: 1.25; font-weight: 700; letter-spacing: -.02em;
  padding-top: var(--s-8); border-top: 1px solid var(--border);
}
.prose h3 { overflow-wrap: break-word; margin: var(--s-32) 0 var(--s-8); font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.prose h4 { margin: var(--s-24) 0 var(--s-8); font-size: 18px; font-weight: 700; color: var(--text-2); }

.anchor {
  margin-left: var(--s-8); color: var(--text-4); opacity: 0; font-weight: 500;
  transition: opacity .12s;
}
h2:hover .anchor, h3:hover .anchor, .anchor:focus { opacity: 1; }

.prose p { margin: 0 0 var(--s-16); color: var(--text-2); overflow-wrap: break-word; }
.prose strong { color: var(--text); font-weight: 700; }

.prose ul, .prose ol { margin: 0 0 var(--s-16); padding-left: var(--s-24); color: var(--text-2); }
.prose li { margin: var(--s-4) 0; overflow-wrap: break-word; }
.prose li::marker { color: var(--text-4); }

.prose hr { margin: var(--s-40) 0; border: none; border-top: 1px solid var(--border); }

.prose blockquote {
  margin: 0 0 var(--s-16); padding: var(--s-2) 0 var(--s-2) var(--s-16);
  border-left: 2px solid var(--border-strong); color: var(--text-3);
}

.ext { font-size: .8em; margin-left: 2px; opacity: .6; }

/* inline code — must be breakable: a long token in a paragraph would otherwise
   push the page wider than the viewport and scroll the whole body sideways. */
.prose :not(pre) > code {
  font-family: var(--mono); font-size: .855em;
  background: var(--surface-2); border: 1px solid var(--border);
  padding: .1em .34em; border-radius: var(--radius-sm); color: var(--text);
  overflow-wrap: anywhere;
}
.prose a > code { color: var(--accent); border-color: var(--accent-line); }

/* --------------------------------------------------------------- table -- */

/* A clipped table edge must read as "there is more", not as a layout bug. */
.table-wrap {
  margin: 0 0 var(--s-20); overflow-x: auto;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface);
  scrollbar-width: thin;
}
.table-wrap.is-scrollable {
  mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
}
.table-wrap.is-scrollable.at-end { mask-image: none; -webkit-mask-image: none; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
thead th {
  text-align: left; padding: var(--s-8) var(--s-16); white-space: nowrap;
  background: var(--surface-2); color: var(--text-3);
  font-weight: 700; font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
tbody td { padding: var(--s-12) var(--s-16); border-bottom: 1px solid var(--border); color: var(--text-2); vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-2); }
td code, th code { white-space: nowrap; overflow-wrap: normal; }

/* ---------------------------------------------------------------- code -- */

.code {
  margin: 0 0 var(--s-24); border-radius: var(--radius-lg);
  border: 1px solid rgba(0, 0, 0, .08);
  box-shadow: var(--shadow-sm);
  overflow: hidden; background: var(--code-bg);
}
:root[data-theme='dark'] .code { border-color: rgba(255, 255, 255, .07); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .code { border-color: rgba(255, 255, 255, .07); }
}
.code-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-8) var(--s-8) var(--s-8) var(--s-12); background: var(--code-bar);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.code-lang {
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: #8e95a3;
}
.copy {
  background: none; border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--radius-full);
  color: #c6cad0; font-size: 12px; padding: var(--s-4) var(--s-8); cursor: pointer;
  transition: background .12s, color .12s;
}
.copy:hover { background: rgba(255, 255, 255, .08); color: #e5e7eb; }
.copy.done { color: #4fd3a0; border-color: #17513a; }

.code pre { margin: 0; padding: var(--s-16); overflow-x: auto; }
.code code {
  font-family: var(--mono); font-size: 14px; line-height: 1.6;
  color: var(--code-text); background: none; border: none; padding: 0; white-space: pre;
}

/* highlight.js token colors (one dark palette, both themes — code stays dark) */
.hljs-comment, .hljs-quote { color: #6b7280; font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-type { color: #d68ee4; }
.hljs-string, .hljs-attr, .hljs-addition { color: #4fd3a0; }
.hljs-number, .hljs-symbol, .hljs-meta { color: #f7b75c; }
.hljs-title, .hljs-section, .hljs-name { color: #5ca8f0; }
.hljs-variable, .hljs-template-variable, .hljs-built_in { color: #e5b8ef; }
.hljs-deletion { color: #f2726c; }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 700; }

/* ---------------------------------------------------------------- tabs -- */

.tabs { margin: 0 0 var(--s-20); }
.tab-bar {
  display: flex; gap: var(--s-2); border-bottom: 1px solid var(--border); margin-bottom: -1px;
  overflow-x: auto; scrollbar-width: none;
}
.tab-bar::-webkit-scrollbar { display: none; }
.tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: var(--s-8) var(--s-12); font-size: 14px; font-weight: 500; color: var(--text-3); cursor: pointer;
  white-space: nowrap;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 700; }
.tab-panel { display: none; padding-top: var(--s-12); }
.tab-panel.active { display: block; }
.tab-panel .code { margin-bottom: 0; }

/* ------------------------------------------------------------ callouts -- */

.callout {
  margin: 0 0 var(--s-20); padding: var(--card-pad) var(--s-16); border-radius: var(--radius-lg);
  border: 1px solid var(--info-line); background: var(--info-soft);
}
.callout-head { display: flex; align-items: center; gap: var(--card-gap); margin-bottom: var(--s-4); }
.callout-icon { display: inline-flex; color: var(--info); }
.callout-icon svg { width: 16px; height: 16px; }
.callout-title { font-weight: 700; font-size: 14px; color: var(--text); }
.callout-body > :last-child { margin-bottom: 0; }
.callout-body { overflow-wrap: break-word; }
.callout-body p { font-size: 14px; color: var(--text-2); margin-bottom: var(--s-8); }
.callout-body ul, .callout-body ol { font-size: 14px; margin-bottom: var(--s-8); }

.callout-tip { border-color: var(--ok-line); background: var(--ok-soft); }
.callout-tip .callout-icon { color: var(--ok); }
.callout-warning { border-color: var(--warn-line); background: var(--warn-soft); }
.callout-warning .callout-icon { color: var(--warn); }
.callout-danger { border-color: var(--danger-line); background: var(--danger-soft); }
.callout-danger .callout-icon { color: var(--danger); }

/* --------------------------------------------------------------- cards -- */

.cards { display: grid; gap: var(--section-gap); margin: 0 0 var(--s-24); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards[data-cols='3'] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards[data-cols='1'] { grid-template-columns: 1fr; }
@media (max-width: 720px) { .cards, .cards[data-cols='3'] { grid-template-columns: 1fr; } }

.card {
  display: flex; flex-direction: column; gap: var(--s-4);
  padding: var(--card-pad); border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); color: var(--text);
  transition: border-color .14s, box-shadow .14s, transform .14s;
}
.card:hover {
  border-color: var(--accent-line); box-shadow: var(--shadow-md); color: var(--text);
  transform: translateY(-1px);
}
.card-title { font-weight: 700; font-size: 16px; letter-spacing: -.01em; }
.card-desc { font-size: 14px; color: var(--text-3); line-height: 1.5; flex: 1; }
.card-more { display: inline-flex; align-items: center; gap: var(--s-4); font-size: 14px; font-weight: 700; color: var(--accent); margin-top: var(--s-4); }
.card-more svg { width: 13px; height: 13px; }

/* --------------------------------------------------------------- steps -- */

.steps { counter-reset: step; margin: 0 0 var(--s-24); }
.steps > h3 {
  counter-increment: step; position: relative; padding-left: var(--s-40); margin-top: var(--s-24);
}
.steps > h3::before {
  content: counter(step);
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: var(--s-24); height: var(--s-24); border-radius: var(--radius-full);
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--accent-line);
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
}
.steps > *:not(h3) { padding-left: var(--s-40); }
@media (max-width: 560px) { .steps > *:not(h3) { padding-left: 0; } }

/* ------------------------------------------------------------- mermaid -- */

.mermaid-wrap {
  margin: 0 0 var(--s-20); padding: var(--s-20); overflow-x: auto;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface);
  text-align: center;
}
.mermaid { margin: 0; font-family: var(--sans) !important; }
.mermaid:not([data-processed]) { visibility: hidden; min-height: 60px; }

/* Mermaid ships hairline edges and bare edge labels. Both are the parts a
   reader actually traces, so they get weight and a ground of their own. */
.mermaid .flowchart-link,
.mermaid .messageLine0,
.mermaid .messageLine1,
.mermaid .relationshipLine { stroke-width: 1.7px; }

.mermaid .marker,
.mermaid marker path { fill: var(--text-3); stroke: var(--text-3); }

.mermaid .messageText, .mermaid .loopText, .mermaid .noteText {
  font-size: 12px !important; letter-spacing: 0;
}
/* Mermaid measures label boxes before this stylesheet applies, so never change
   an edge label's font-size, tracking or casing here — it clips. Ground only. */
/* A cylinder is storage, not another step — give it its own fill. */
.mermaid .node path[d*="C"] + path, .mermaid g.node.default > path {
  filter: saturate(.55);
}

/* Nodes read as one family: same corner, same border weight, tabular labels. */
.mermaid .node rect,
.mermaid .node polygon,
.mermaid .node circle,
.mermaid .cluster rect { rx: 6; ry: 6; stroke-width: 1.4px; }

.mermaid .nodeLabel, .mermaid .actor > tspan { font-weight: 500; }
.mermaid .cluster-label .nodeLabel { font-weight: 700; font-size: 12px !important; }

/* Sequence diagrams: the lifeline is scaffolding, not content. */
.mermaid line.actor-line { stroke-dasharray: 3 4; opacity: .55; }

/* ---------------------------------------------------------- prev / next -- */

.prevnext {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--section-gap);
  max-width: var(--content-max); margin: var(--s-48) 0 0;
}
.pn {
  display: flex; flex-direction: column; gap: var(--s-2); padding: var(--card-pad) var(--s-16);
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface);
  transition: border-color .14s, box-shadow .14s;
}
.pn:hover { border-color: var(--accent-line); box-shadow: var(--shadow-sm); }
.pn-next { text-align: right; }
.pn-dir { font-size: 12px; color: var(--text-3); }
.pn-label { font-size: 14px; font-weight: 700; color: var(--text); }

.page-foot {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-16); flex-wrap: wrap;
  max-width: var(--content-max); margin-top: var(--s-32); padding-top: var(--s-16);
  border-top: 1px solid var(--border);
  font-size: 14px; color: var(--text-3);
}

/* -------------------------------------------------------------- search -- */

.search-overlay {
  position: fixed; inset: 0; z-index: 120;
  background: var(--overlay);
  backdrop-filter: blur(4px);
  display: grid; place-items: start center; padding: 12vh var(--s-16) var(--s-16);
}
.search-overlay[hidden] { display: none; }

.search-modal {
  width: min(620px, 100%); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.search-input-row {
  display: flex; align-items: center; gap: var(--s-8); padding: var(--s-12) var(--s-16);
  border-bottom: 1px solid var(--border);
}
.search-input-row svg { width: 16px; height: 16px; color: var(--text-4); flex-shrink: 0; }
.search-input-row input {
  flex: 1; border: none; background: none; outline: none;
  font-family: var(--sans); font-size: 16px; color: var(--text);
}
.search-input-row input::placeholder { color: var(--text-4); }

.search-results { max-height: 56vh; overflow-y: auto; padding: var(--s-4); }
.search-empty { padding: var(--s-24) var(--s-16); text-align: center; color: var(--text-3); font-size: 14px; }
.sr {
  display: block; padding: var(--s-8) var(--s-12); border-radius: var(--radius); color: var(--text);
}
.sr:hover, .sr.sel { background: var(--accent-soft); color: var(--text); }
.sr-crumb { font-size: 12px; color: var(--text-3); }
.sr-title { font-size: 14px; font-weight: 700; margin-top: var(--s-2); }
.sr-snip { font-size: 12px; color: var(--text-3); margin-top: var(--s-2); line-height: 1.45; }
.sr mark { background: var(--accent-line); color: var(--text); border-radius: var(--radius-sm); padding: 0 2px; }

/* ------------------------------------------------------------- landing -- */

/* Reference pages are tables first, prose second: give the columns room. */
.is-wide { --content-max: 1000px; }
.is-wide .shell { max-width: 1680px; }

.is-landing .toc-col { display: none; }
.is-landing .shell { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
.is-landing .prose { max-width: 880px; }
.is-landing .page-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-20);
  margin-bottom: var(--s-12);
}
.page-head h1 { margin-bottom: 0; }

.copy-page {
  display: inline-flex; align-items: center; gap: var(--s-4); flex-shrink: 0;
  margin-top: var(--s-4); padding: var(--s-8) var(--s-12);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-full);
  color: var(--text-2); font-size: 14px; font-weight: 500; cursor: pointer;
  transition: border-color .14s, color .14s, box-shadow .14s;
}
.copy-page:hover { border-color: var(--border-strong); color: var(--text); box-shadow: var(--shadow-sm); }
.copy-page.done { color: var(--ok); border-color: var(--ok-line); }
.copy-page svg { width: 14px; height: 14px; }
@media (max-width: 560px) { .copy-page span { display: none; } .copy-page { padding: var(--s-8); } }

.eyebrow { display: none; }
.is-landing .prose h1 { font-size: 40px; margin-bottom: var(--s-16); }
.is-landing .prose > h2:first-of-type { border-top: none; padding-top: 0; }

/* ---------------------------------------------------------- responsive -- */

@media (max-width: 1200px) {
  .shell { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  .toc-col { display: none; }
}

@media (max-width: 900px) {
  :root { --topbar-h: 48px; }
  .shell { grid-template-columns: minmax(0, 1fr); }
  .menu-btn { display: inline-flex; }
  .brand-sub { display: none; }
  .search-btn { width: auto; margin-right: 0; }
  .search-btn span, .search-btn kbd { display: none; }
  .search-btn { padding: var(--s-8); }
  .topbar-actions .ghost { display: none; }

  .sidebar {
    position: fixed; inset: calc(var(--topbar-h) + var(--topnav-h)) auto 0 0;
    width: 280px; max-width: 84vw; height: auto;
    background: var(--surface); border-right: 1px solid var(--border);
    z-index: 80; padding: var(--s-20) var(--s-12) var(--s-40);
    transform: translateX(-102%); transition: transform .2s ease;
    box-shadow: var(--shadow-lg);
  }
  .sidebar.open { transform: none; }
  body.nav-open::after {
    content: ''; position: fixed; inset: 0; z-index: 70;
    background: var(--overlay);
  }
  .content { padding-top: var(--s-24); }
  .prose h1 { font-size: 24px; }
  .is-landing .prose h1 { font-size: 24px; }
  .lede { margin-bottom: var(--s-20); }
  .lede { font-size: 16px; }
  .prevnext { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .prose h2 { font-size: 20px; }
  .code code { font-size: 12px; }
}

@media print {
  .topbar, .sidebar, .toc-col, .prevnext, .search-overlay, .page-foot { display: none !important; }
  .shell { grid-template-columns: 1fr; }
}