/*
 * Veefore documentation styles.
 *
 * The tokens are lifted from apps/console/src/styles/tokens.css so the docs and
 * the product look like the same thing. Same reasoning applies: a neutral slate
 * base, no purple, and colour reserved for meaning. A callout that says an
 * action is refused is red because red means refused everywhere in Veefore, not
 * because red is eye-catching.
 *
 * Motion follows one rule: animate `transform` and `opacity` only. Those are
 * the two properties a browser can composite without laying the page out
 * again, which is the difference between motion that feels smooth and motion
 * that stutters on a long page. Nothing animates `height`, `top`, `width` or
 * `box-shadow`.
 *
 * Everything decorative is gated behind `html[data-motion='on']`, which the
 * client sets only when the reader has not asked for reduced motion. With
 * JavaScript off or motion reduced, the page is simply static — never blank.
 *
 * Plain CSS, no build step, no framework. A stylesheet that one person can read
 * end to end is worth more here than a utility pipeline.
 */

/* ------------------------------------------------------------------ tokens */

:root {
  --font-sans: 'Inter var', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Menlo', 'Consolas', 'Liberation Mono', monospace;

  --topbar-h: 56px;
  --tabbar-h: 44px;
  --sidebar-w: 276px;
  --aside-w: 232px;
  /*
   * Set by measured line length, not by eye.
   *
   * 672px at the 16px prose size is about 98 average characters, which is where
   * Tailwind, Mintlify and MDN sit. It was 756px at 15px — around 110
   * characters — which is long enough to lose your place mid-paragraph, and was
   * a large part of why the pages read as unpolished.
   *
   * `scripts/smoke-docs.ts` asserts the band, measured in *average* character
   * widths rather than CSS `ch`: `1ch` is the advance of `0`, which is wider
   * than average lowercase, so it reports this column as 82 and flatters it.
   */
  --content-max: 672px;
  /*
   * Tables, code and diagrams extend past the prose measure.
   *
   * Narrowing the text column for readability would otherwise cramp a
   * nine-column permissions matrix into a scrollbar. These three break out
   * symmetrically instead. Set to zero on narrow screens, where there is no
   * room to break out of.
   */
  --bleed: 42px;
  --radius: 10px;
  --radius-sm: 7px;

  /* ------------------------------------------------------------- motion */
  /* Three durations, used consistently. More than three reads as arbitrary. */
  --t-micro: 110ms; /* hover, focus, press */
  --t-base: 200ms; /* state changes, panels */
  --t-enter: 420ms; /* first appearance */

  /* Decelerating, for anything entering or settling. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  /* Symmetric, for a change between two steady states. */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  /* A little overshoot, used only on the search panel. */
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
}

html[data-theme='light'] {
  color-scheme: light;
  --surface-base: 250 250 249;
  --surface-raised: 255 255 255;
  --surface-sunken: 244 244 245;
  --surface-overlay: 255 255 255;
  --surface-hover: 244 244 245;
  --surface-active: 231 231 234;

  --text-primary: 24 24 27;
  --text-secondary: 82 82 91;
  --text-muted: 113 113 122;
  --text-inverted: 250 250 249;

  --border-subtle: 228 228 231;
  --border-default: 212 212 216;
  --border-strong: 161 161 170;

  --focus-ring: 37 99 235;

  --allowed-fg: 21 128 61;
  --allowed-bg: 240 253 244;
  --allowed-border: 187 247 208;
  --warning-fg: 161 98 7;
  --warning-bg: 254 252 232;
  --warning-border: 254 240 138;
  --blocked-fg: 185 28 28;
  --blocked-bg: 254 242 242;
  --blocked-border: 254 202 202;
  --info-fg: 29 78 216;
  --info-bg: 239 246 255;
  --info-border: 191 219 254;
  --neutral-fg: 63 63 70;
  --neutral-bg: 244 244 245;
  --neutral-border: 228 228 231;

  --accent-fg: 255 255 255;
  --accent-bg: 24 24 27;

  --shadow-card: 0 1px 2px 0 rgb(15 23 42 / 0.04), 0 1px 3px 0 rgb(15 23 42 / 0.06);
  --shadow-lift: 0 6px 16px -6px rgb(15 23 42 / 0.16), 0 2px 6px -2px rgb(15 23 42 / 0.1);
  --shadow-overlay: 0 10px 38px -10px rgb(15 23 42 / 0.25), 0 10px 20px -15px rgb(15 23 42 / 0.2);

  /* Shiki emits both themes; these pick the light one. */
  --shiki-light-display: inline;
  --shiki-dark-display: none;
}

html[data-theme='dark'] {
  color-scheme: dark;
  --surface-base: 9 9 11;
  --surface-raised: 24 24 27;
  --surface-sunken: 18 18 20;
  --surface-overlay: 32 32 36;
  --surface-hover: 39 39 42;
  --surface-active: 52 52 56;

  --text-primary: 250 250 250;
  --text-secondary: 212 212 216;
  --text-muted: 161 161 170;
  --text-inverted: 24 24 27;

  --border-subtle: 39 39 42;
  --border-default: 52 52 56;
  --border-strong: 82 82 91;

  --focus-ring: 96 165 250;

  --allowed-fg: 134 239 172;
  --allowed-bg: 5 46 22;
  --allowed-border: 22 101 52;
  --warning-fg: 253 224 71;
  --warning-bg: 56 36 4;
  --warning-border: 133 77 14;
  --blocked-fg: 252 165 165;
  --blocked-bg: 60 12 12;
  --blocked-border: 153 27 27;
  --info-fg: 147 197 253;
  --info-bg: 13 32 68;
  --info-border: 30 64 175;
  --neutral-fg: 212 212 216;
  --neutral-bg: 39 39 42;
  --neutral-border: 63 63 70;

  --accent-fg: 24 24 27;
  --accent-bg: 250 250 250;

  --shadow-card: 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --shadow-lift: 0 8px 20px -8px rgb(0 0 0 / 0.55), 0 2px 8px -4px rgb(0 0 0 / 0.4);
  --shadow-overlay: 0 10px 38px -10px rgb(0 0 0 / 0.6), 0 10px 20px -15px rgb(0 0 0 / 0.5);

  --shiki-light-display: none;
  --shiki-dark-display: inline;
}

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

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

html {
  /*
   * Native smooth scrolling, so an anchor click eases rather than jumping.
   * `scroll-padding-top` keeps the target clear of the sticky header — without
   * it, smooth scrolling lands the heading underneath the topbar, which reads
   * as the link being broken.
   */
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topbar-h) + var(--tabbar-h) + 20px);
}

body {
  margin: 0;
  background: rgb(var(--surface-base));
  color: rgb(var(--text-primary));
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /*
   * Deliberately *not* `overflow-x: hidden`.
   *
   * It was, and it hid a real bug: the topbar overflowed to 470px on a 390px
   * screen, so the theme toggle was clipped off the edge of the viewport with
   * no scrollbar to reveal it. Clipping overflow does not fix overflow, it
   * just makes it silent.
   *
   * `scripts/smoke-docs.ts` now asserts `scrollWidth <= clientWidth` at both
   * 1440px and 390px, which catches the cause instead of hiding the symptom.
   */
}

a {
  color: rgb(var(--info-fg));
  text-decoration: none;
  transition: color var(--t-micro) var(--ease-in-out);
}
a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

:focus-visible {
  outline: 2px solid rgb(var(--focus-ring));
  outline-offset: 2px;
  border-radius: 3px;
}

/* Headings are scroll targets; the margin keeps them clear of the header. */
.anchored {
  scroll-margin-top: calc(var(--topbar-h) + var(--tabbar-h) + 20px);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 16px;
  background: rgb(var(--accent-bg));
  color: rgb(var(--accent-fg));
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus {
  left: 0;
}

/* ------------------------------------------------------- scroll progress */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 60;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, rgb(var(--info-fg)), rgb(var(--allowed-fg)));
  /* No transition: the value comes from a scroll handler on every frame, and a
     transition on top of per-frame updates is what makes a progress bar lag
     behind the content it is reporting. */
  pointer-events: none;
  opacity: 0;
}
html[data-motion='on'] .scroll-progress {
  opacity: 1;
}

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

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  background: rgb(var(--surface-base) / 0.82);
  backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid rgb(var(--border-subtle));
  transition:
    border-color var(--t-base) var(--ease-in-out),
    background-color var(--t-base) var(--ease-in-out);
}
/* A faint lift once the page has scrolled, so the bar reads as being above
   the content rather than part of it. */
.topbar[data-scrolled] {
  border-bottom-color: rgb(var(--border-default));
  box-shadow: var(--shadow-card);
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: rgb(var(--text-primary));
  font-weight: 650;
  letter-spacing: -0.01em;
  flex: none;
}
.brand:hover {
  text-decoration: none;
}
.brand-mark {
  color: rgb(var(--info-fg));
  font-size: 15px;
  display: inline-block;
  transition: transform var(--t-base) var(--ease-spring);
}
.brand:hover .brand-mark {
  transform: rotate(90deg);
}
.brand-name {
  font-size: 15px;
}
.brand-sub {
  color: rgb(var(--text-muted));
  font-weight: 450;
  font-size: 13px;
}

.search-trigger {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1;
  /*
   * `min-width: 0` is load-bearing.
   *
   * A flex item defaults to `min-width: auto`, which refuses to shrink below
   * its min-content width. The icon, the label and the ⌘K hint together set a
   * floor of around 220px, so on a 390px screen this item pushed the theme
   * toggle off the right edge of the viewport instead of shrinking.
   */
  min-width: 0;
  max-width: 420px;
  height: 34px;
  padding: 0 10px;
  font: inherit;
  font-size: 13.5px;
  color: rgb(var(--text-muted));
  background: rgb(var(--surface-sunken));
  border: 1px solid rgb(var(--border-subtle));
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  transition:
    border-color var(--t-micro) var(--ease-in-out),
    color var(--t-micro) var(--ease-in-out),
    background-color var(--t-micro) var(--ease-in-out);
}
.search-trigger:hover {
  border-color: rgb(var(--border-default));
  color: rgb(var(--text-secondary));
  background: rgb(var(--surface-hover));
}
.search-trigger:active {
  transform: scale(0.995);
}
.search-trigger svg {
  width: 15px;
  height: 15px;
  flex: none;
}
.search-trigger span {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px 5px;
  border: 1px solid rgb(var(--border-default));
  border-bottom-width: 2px;
  border-radius: 4px;
  background: rgb(var(--surface-raised));
  color: rgb(var(--text-muted));
}

.topbar-links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.topbar-link {
  padding: 6px 10px;
  font-size: 13.5px;
  color: rgb(var(--text-secondary));
  border-radius: var(--radius-sm);
  transition:
    background-color var(--t-micro) var(--ease-in-out),
    color var(--t-micro) var(--ease-in-out);
}
.topbar-link:hover {
  background: rgb(var(--surface-hover));
  color: rgb(var(--text-primary));
  text-decoration: none;
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: rgb(var(--text-secondary));
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition:
    background-color var(--t-micro) var(--ease-in-out),
    color var(--t-micro) var(--ease-in-out),
    transform var(--t-micro) var(--ease-in-out);
}
.icon-button:hover {
  background: rgb(var(--surface-hover));
  color: rgb(var(--text-primary));
}
.icon-button:active {
  transform: scale(0.92);
}
.icon-button svg {
  width: 16px;
  height: 16px;
}
.menu-toggle {
  display: none;
}

/* The two icons cross-fade and rotate, so the toggle reads as one control
   changing state rather than two icons swapping. */
[data-theme-toggle] {
  position: relative;
  overflow: hidden;
}
[data-theme-toggle] span {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    opacity var(--t-base) var(--ease-in-out),
    transform var(--t-base) var(--ease-out);
}
html[data-theme='dark'] .theme-icon-dark,
html[data-theme='light'] .theme-icon-light {
  opacity: 0;
  transform: rotate(-90deg) scale(0.6);
}
html[data-theme='dark'] .theme-icon-light,
html[data-theme='light'] .theme-icon-dark {
  opacity: 1;
  transform: rotate(0) scale(1);
}

/* ----------------------------------------------------------------- tabbar */

.tabbar {
  position: sticky;
  top: var(--topbar-h);
  z-index: 35;
  height: var(--tabbar-h);
  background: rgb(var(--surface-base) / 0.82);
  backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid rgb(var(--border-subtle));
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tabbar::-webkit-scrollbar {
  display: none;
}
.tabbar-inner {
  display: flex;
  gap: 2px;
  height: 100%;
  padding: 0 20px;
  align-items: stretch;
  position: relative;
}
.tab-link {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  font-size: 13.5px;
  font-weight: 500;
  color: rgb(var(--text-muted));
  white-space: nowrap;
  position: relative;
  transition: color var(--t-base) var(--ease-in-out);
}
.tab-link::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: rgb(var(--info-fg));
  transform: scaleX(0);
  transform-origin: 50% 100%;
  transition: transform var(--t-base) var(--ease-out);
}
.tab-link:hover {
  color: rgb(var(--text-primary));
  text-decoration: none;
}
.tab-link:hover::after {
  transform: scaleX(0.45);
  background: rgb(var(--border-strong));
}
.tab-link.is-current {
  color: rgb(var(--text-primary));
}
.tab-link.is-current::after,
.tab-link.is-current:hover::after {
  transform: scaleX(1);
  background: rgb(var(--info-fg));
}

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

.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--aside-w);
  gap: 40px;
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 20px;
  align-items: start;
}

.sidebar {
  position: sticky;
  top: calc(var(--topbar-h) + var(--tabbar-h));
  max-height: calc(100vh - var(--topbar-h) - var(--tabbar-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px 8px 64px 0;
  scrollbar-width: thin;
}

.sidebar-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-group {
  margin-bottom: 22px;
}
.nav-group-label {
  margin: 0 0 6px;
  padding: 0 10px;
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgb(var(--text-muted));
}
.nav-link {
  display: block;
  padding: 5px 10px;
  font-size: 13.5px;
  color: rgb(var(--text-secondary));
  border-radius: var(--radius-sm);
  position: relative;
  transition:
    background-color var(--t-micro) var(--ease-in-out),
    color var(--t-micro) var(--ease-in-out),
    transform var(--t-micro) var(--ease-out);
}
/* The active marker is a pseudo-element that scales in, so moving between
   pages animates rather than snapping a border on and off. */
.nav-link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: 2px;
  background: rgb(var(--info-fg));
  transform: scaleY(0);
  transition: transform var(--t-base) var(--ease-out);
}
.nav-link:hover {
  background: rgb(var(--surface-hover));
  color: rgb(var(--text-primary));
  text-decoration: none;
  transform: translateX(2px);
}
.nav-link.is-current {
  color: rgb(var(--text-primary));
  background: rgb(var(--surface-hover));
  font-weight: 550;
}
.nav-link.is-current::before {
  transform: scaleY(1);
}

.content {
  min-width: 0;
  padding: 32px 0 80px;
}
.content-centered {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 64px 20px;
}

.aside {
  position: sticky;
  top: calc(var(--topbar-h) + var(--tabbar-h));
  max-height: calc(100vh - var(--topbar-h) - var(--tabbar-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 28px 0 64px;
}
.toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid rgb(var(--border-subtle));
  position: relative;
}
.toc-heading {
  margin: 0 0 8px;
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgb(var(--text-muted));
}
/* A single marker that slides to the active entry, rather than a border
   turning on and off per item. Positioned by the client. */
.toc-marker {
  position: absolute;
  /*
   * `top: 0` is load-bearing, not a default.
   *
   * Without it an absolutely positioned element falls back to its *static*
   * position — where it would have sat in normal flow. The marker is appended
   * after the last list item, so its baseline was the bottom of the list and
   * every `translateY` was measured from there. The result was a marker
   * sitting several entries below the heading it was supposed to point at.
   */
  top: 0;
  left: -1px;
  width: 2px;
  height: 0;
  border-radius: 2px;
  background: rgb(var(--info-fg));
  transform: translateY(0);
  opacity: 0;
  transition:
    transform var(--t-base) var(--ease-out),
    height var(--t-base) var(--ease-out),
    opacity var(--t-base) var(--ease-in-out);
}
.toc li a {
  display: block;
  padding: 3px 0 3px 12px;
  font-size: 13px;
  color: rgb(var(--text-muted));
  line-height: 1.5;
  /* A long heading wraps inside the rail rather than overflowing it. The
     marker takes its height from the rendered link, so a two-line entry gets
     a two-line marker. */
  overflow-wrap: break-word;
  transition:
    color var(--t-base) var(--ease-in-out),
    transform var(--t-micro) var(--ease-out);
}
.toc li a:hover {
  color: rgb(var(--text-primary));
  text-decoration: none;
  transform: translateX(2px);
}
.toc li a.is-active {
  color: rgb(var(--text-primary));
}
.toc-d3 a {
  padding-left: 26px;
  font-size: 12.5px;
}

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

.prose {
  max-width: var(--content-max);
  /* Body copy is a step larger than the interface chrome around it, which is
     the usual arrangement: navigation is scanned, prose is read. */
  font-size: 16px;
  line-height: 1.75;
}

/*
 * Tables, code and diagrams break out of the prose measure.
 *
 * Only as direct children of `.prose` — one nested inside a callout or a step
 * belongs to that container's width, and widening it there would push it out
 * of its own border.
 */
.prose > .table-wrap,
.prose > .code-block,
.prose > .diagram,
.prose > .params {
  width: calc(100% + var(--bleed) * 2);
  max-width: calc(var(--content-max) + var(--bleed) * 2);
  margin-left: calc(var(--bleed) * -1);
}

.breadcrumb {
  margin: 0 0 10px;
  font-size: 12.5px;
  font-weight: 550;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgb(var(--text-muted));
}

.prose h1 {
  margin: 0 0 12px;
  font-size: 34px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.022em;
  /* Prevents a one-word last line in a two-line title. */
  text-wrap: balance;
}
.prose .lede {
  margin: 0 0 32px;
  font-size: 17px;
  line-height: 1.6;
  color: rgb(var(--text-secondary));
  text-wrap: pretty;
}

.prose h2 {
  margin: 48px 0 14px;
  padding-top: 14px;
  border-top: 1px solid rgb(var(--border-subtle));
  font-size: 22px;
  line-height: 1.3;
  font-weight: 650;
  letter-spacing: -0.015em;
}
.prose h3 {
  margin: 32px 0 10px;
  font-size: 16.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.prose h4 {
  margin: 24px 0 8px;
  font-size: 14.5px;
  font-weight: 650;
  color: rgb(var(--text-secondary));
}

.heading-anchor {
  margin-left: 8px;
  color: rgb(var(--text-muted));
  opacity: 0;
  font-weight: 400;
  text-decoration: none;
  display: inline-block;
  transform: translateX(-4px);
  transition:
    opacity var(--t-base) var(--ease-in-out),
    transform var(--t-base) var(--ease-out);
}
h2:hover .heading-anchor,
h3:hover .heading-anchor,
.heading-anchor:focus-visible {
  opacity: 1;
  transform: translateX(0);
}

.prose p {
  margin: 0 0 16px;
  text-wrap: pretty;
}
.prose ul,
.prose ol {
  margin: 0 0 16px;
  padding-left: 22px;
}
.prose li {
  margin-bottom: 5px;
}
.prose li > ul,
.prose li > ol {
  margin-top: 5px;
}
.prose strong {
  font-weight: 650;
  color: rgb(var(--text-primary));
}
.prose hr {
  margin: 40px 0;
  border: 0;
  border-top: 1px solid rgb(var(--border-subtle));
}

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

.prose :not(pre) > code {
  font-family: var(--font-mono);
  font-size: 0.855em;
  padding: 1.5px 5px;
  background: rgb(var(--surface-sunken));
  border: 1px solid rgb(var(--border-subtle));
  border-radius: 5px;
  /*
   * Deliberately not `white-space: nowrap`.
   *
   * It was, which read fine for `agent.id` and broke the page for
   * `POST /v1/mcp/servers/{serverId}/tools/{toolId}/authorize` — an unbreakable
   * 490px token in a heading pushed nine pages past the viewport on a phone.
   *
   * `anywhere` rather than `break-word` because only `anywhere` reduces the
   * element's *min-content* width. `break-word` lets the text wrap but leaves
   * the intrinsic width unchanged, so a grid or flex track sized from it still
   * overflows.
   *
   * Breaks only happen when the token would otherwise overflow its line, so
   * short identifiers are left intact.
   */
  overflow-wrap: anywhere;
}
.prose a > code {
  color: inherit;
}

.prose details {
  margin: 0 0 16px;
  padding: 0 14px;
  background: rgb(var(--surface-sunken));
  border: 1px solid rgb(var(--border-subtle));
  border-radius: var(--radius);
  transition: border-color var(--t-base) var(--ease-in-out);
}
.prose details:hover {
  border-color: rgb(var(--border-default));
}
.prose summary {
  padding: 11px 0;
  font-size: 13.5px;
  font-weight: 550;
  cursor: pointer;
  color: rgb(var(--text-secondary));
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color var(--t-micro) var(--ease-in-out);
}
.prose summary::-webkit-details-marker {
  display: none;
}
/* A rotating chevron, drawn in CSS so it needs no icon font or extra request. */
.prose summary::before {
  content: '';
  width: 6px;
  height: 6px;
  flex: none;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--t-base) var(--ease-out);
}
.prose details[open] summary::before {
  transform: rotate(45deg);
}
.prose details[open] summary {
  color: rgb(var(--text-primary));
}
/* The content slides in. `height` is not animatable here without JS, so the
   panel fades and translates instead — which reads as deliberate rather than
   as a half-finished accordion. */
html[data-motion='on'] .prose details[open] > *:not(summary) {
  animation: details-in var(--t-base) var(--ease-out) both;
}
@keyframes details-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ------------------------------------------------------------------ tables */

.table-wrap {
  margin: 0 0 20px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid rgb(var(--border-subtle));
  border-radius: var(--radius);
  transition: border-color var(--t-base) var(--ease-in-out);
}
.table-wrap:hover {
  border-color: rgb(var(--border-default));
}
.table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.table-wrap th {
  position: sticky;
  top: 0;
  text-align: left;
  padding: 9px 13px;
  background: rgb(var(--surface-sunken));
  border-bottom: 1px solid rgb(var(--border-subtle));
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgb(var(--text-muted));
  white-space: nowrap;
}
.table-wrap td {
  padding: 9px 13px;
  border-bottom: 1px solid rgb(var(--border-subtle));
  vertical-align: top;
  line-height: 1.55;
}
.table-wrap tbody tr {
  transition: background-color var(--t-micro) var(--ease-in-out);
}
.table-wrap tbody tr:hover {
  background: rgb(var(--surface-sunken) / 0.6);
}
.table-wrap tr:last-child td {
  border-bottom: 0;
}
.table-wrap td code {
  white-space: nowrap;
}

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

.code-block {
  position: relative;
  margin: 0 0 20px;
  background: rgb(var(--surface-sunken));
  border: 1px solid rgb(var(--border-subtle));
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--t-base) var(--ease-in-out);
}
.code-block:hover {
  border-color: rgb(var(--border-default));
}
.code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: rgb(var(--surface-raised));
  border-bottom: 1px solid rgb(var(--border-subtle));
}
.code-lang {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgb(var(--text-muted));
}
.code-copy {
  font: inherit;
  font-size: 11.5px;
  padding: 2px 8px;
  min-width: 56px;
  color: rgb(var(--text-muted));
  background: transparent;
  border: 1px solid rgb(var(--border-subtle));
  border-radius: 5px;
  cursor: pointer;
  transition:
    color var(--t-micro) var(--ease-in-out),
    border-color var(--t-micro) var(--ease-in-out),
    background-color var(--t-micro) var(--ease-in-out);
}
.code-copy:hover {
  color: rgb(var(--text-primary));
  border-color: rgb(var(--border-default));
  background: rgb(var(--surface-hover));
}
.code-copy:active {
  transform: scale(0.95);
}
.code-copy[data-copied] {
  color: rgb(var(--allowed-fg));
  border-color: rgb(var(--allowed-border));
  background: rgb(var(--allowed-bg));
}
/* The label swaps on copy; animating it makes the feedback legible at a
   glance rather than something you have to notice. */
.code-copy-label {
  display: inline-block;
}
html[data-motion='on'] .code-copy[data-copied] .code-copy-label {
  animation: copied-in var(--t-base) var(--ease-spring) both;
}
@keyframes copied-in {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.code-block pre {
  margin: 0;
  padding: 14px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  font-family: var(--font-mono);
  font-size: 12.8px;
  line-height: 1.65;
  background: transparent !important;
}
.code-block code {
  font-family: inherit;
}

/* Shiki dual themes: both colours are emitted, one is displayed. */
html[data-theme='light'] .shiki,
html[data-theme='light'] .shiki span {
  color: var(--shiki-light) !important;
  font-style: var(--shiki-light-font-style) !important;
  font-weight: var(--shiki-light-font-weight) !important;
  text-decoration: var(--shiki-light-text-decoration) !important;
}
html[data-theme='dark'] .shiki,
html[data-theme='dark'] .shiki span {
  color: var(--shiki-dark) !important;
  font-style: var(--shiki-dark-font-style) !important;
  font-weight: var(--shiki-dark-font-weight) !important;
  text-decoration: var(--shiki-dark-text-decoration) !important;
}

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

.callout {
  margin: 0 0 20px;
  padding: 14px 16px;
  border: 1px solid;
  border-left-width: 3px;
  border-radius: var(--radius);
  font-size: 15px;
  line-height: 1.7;
}
.callout > *:last-child {
  margin-bottom: 0;
}
.callout-title {
  margin: 0 0 6px;
  font-weight: 650;
  font-size: 13.5px;
  letter-spacing: -0.005em;
}
.callout p {
  margin-bottom: 10px;
}
.callout p:last-child {
  margin-bottom: 0;
}
.callout .code-block {
  margin-top: 12px;
  margin-bottom: 4px;
}
.callout ul,
.callout ol {
  margin-bottom: 10px;
}
.callout .table-wrap {
  margin-bottom: 10px;
}

.callout-note {
  background: rgb(var(--neutral-bg));
  border-color: rgb(var(--neutral-border));
  color: rgb(var(--text-secondary));
}
.callout-note .callout-title {
  color: rgb(var(--text-primary));
}

.callout-tip,
.callout-check {
  background: rgb(var(--allowed-bg));
  border-color: rgb(var(--allowed-border));
}
.callout-tip .callout-title,
.callout-check .callout-title {
  color: rgb(var(--allowed-fg));
}

.callout-warning {
  background: rgb(var(--warning-bg));
  border-color: rgb(var(--warning-border));
}
.callout-warning .callout-title {
  color: rgb(var(--warning-fg));
}

.callout-danger {
  background: rgb(var(--blocked-bg));
  border-color: rgb(var(--blocked-border));
}
.callout-danger .callout-title {
  color: rgb(var(--blocked-fg));
}

.callout-security {
  background: rgb(var(--info-bg));
  border-color: rgb(var(--info-border));
}
.callout-security .callout-title {
  color: rgb(var(--info-fg));
}

.generated-banner {
  margin: 0 0 28px;
  padding: 11px 14px;
  font-size: 13px;
  color: rgb(var(--text-secondary));
  background: rgb(var(--surface-sunken));
  border: 1px dashed rgb(var(--border-default));
  border-radius: var(--radius);
}
.generated-banner strong {
  color: rgb(var(--text-primary));
}

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

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
  gap: 12px;
  margin: 0 0 24px;
}
.card {
  display: block;
  position: relative;
  padding: 15px 16px;
  color: inherit;
  background: rgb(var(--surface-raised));
  border: 1px solid rgb(var(--border-subtle));
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  /* `box-shadow` is deliberately not in the transition list: it cannot be
     composited, so animating it is the single most common cause of a janky
     hover. The lift is the transform; the shadow swaps instantly underneath
     it, which is imperceptible. */
  transition:
    transform var(--t-base) var(--ease-out),
    border-color var(--t-base) var(--ease-in-out);
}
a.card:hover {
  border-color: rgb(var(--border-strong));
  text-decoration: none;
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}
a.card:active {
  transform: translateY(-1px);
}
.card-icon {
  display: block;
  margin-bottom: 8px;
  font-size: 18px;
  line-height: 1;
  color: rgb(var(--info-fg));
  transition: transform var(--t-base) var(--ease-spring);
}
a.card:hover .card-icon {
  transform: scale(1.14);
}
.card-title {
  display: block;
  margin-bottom: 4px;
  font-size: 14.5px;
  font-weight: 650;
  color: rgb(var(--text-primary));
}
.card-body {
  display: block;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgb(var(--text-secondary));
}
.card-body > *:last-child {
  margin-bottom: 0;
}
.card-body p {
  margin: 0 0 8px;
}
/* An arrow that slides in on hover, so a card that navigates looks like it
   navigates. Cards without an href do not get one. */
.card-arrow {
  position: absolute;
  right: 14px;
  bottom: 13px;
  font-size: 14px;
  color: rgb(var(--info-fg));
  opacity: 0;
  transform: translateX(-6px);
  transition:
    opacity var(--t-base) var(--ease-in-out),
    transform var(--t-base) var(--ease-out);
}
a.card:hover .card-arrow {
  opacity: 1;
  transform: translateX(0);
}

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

.steps {
  margin: 0 0 24px;
  padding-left: 30px;
  border-left: 1px solid rgb(var(--border-subtle));
  counter-reset: step;
}
.step {
  position: relative;
  padding-bottom: 8px;
}
.step + .step {
  margin-top: 24px;
}
.step-title {
  margin: 0 0 8px;
  font-size: 15.5px;
  font-weight: 650;
  counter-increment: step;
}
.step-title::before {
  content: counter(step);
  position: absolute;
  left: -45px;
  top: -1px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 12.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: rgb(var(--text-secondary));
  background: rgb(var(--surface-base));
  border: 1px solid rgb(var(--border-default));
  border-radius: 50%;
  transition:
    border-color var(--t-base) var(--ease-in-out),
    color var(--t-base) var(--ease-in-out),
    transform var(--t-base) var(--ease-spring);
}
.step:hover .step-title::before {
  border-color: rgb(var(--info-fg));
  color: rgb(var(--info-fg));
  transform: scale(1.08);
}
.step-body > *:last-child {
  margin-bottom: 0;
}

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

.tabs {
  margin: 0 0 20px;
  border: 1px solid rgb(var(--border-subtle));
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--t-base) var(--ease-in-out);
}
.tabs:hover {
  border-color: rgb(var(--border-default));
}
.tabs-strip {
  display: flex;
  gap: 2px;
  padding: 0 8px;
  background: rgb(var(--surface-sunken));
  border-bottom: 1px solid rgb(var(--border-subtle));
  position: relative;
}
.tabs-strip button {
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  padding: 8px 10px;
  color: rgb(var(--text-muted));
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color var(--t-base) var(--ease-in-out);
}
.tabs-strip button:hover {
  color: rgb(var(--text-secondary));
}
.tabs-strip button[aria-selected='true'] {
  color: rgb(var(--text-primary));
}
/* One underline that slides between tabs. Positioned by the client with a
   translate and a scale, so the movement is a single composited transform. */
.tabs-underline {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 1px;
  background: rgb(var(--info-fg));
  transform-origin: 0 50%;
  transition: transform var(--t-base) var(--ease-out);
}
.tab {
  padding: 16px 16px 2px;
}
.tab[hidden] {
  display: none;
}
.tab > *:last-child {
  margin-bottom: 0;
}
.tab .code-block {
  margin-bottom: 14px;
}
html[data-motion='on'] .tabs[data-ready] .tab:not([hidden]) {
  animation: tab-in var(--t-base) var(--ease-out) both;
}
@keyframes tab-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* With JavaScript off every tab is visible, which is correct: the reader sees
   all the languages rather than none of them. */
.tabs:not([data-ready]) .tab::before {
  content: attr(data-tab-label);
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgb(var(--text-muted));
}

/* ------------------------------------------------------------------- params */

.params {
  margin: 0 0 20px;
  padding: 0;
  border: 1px solid rgb(var(--border-subtle));
  border-radius: var(--radius);
  overflow: hidden;
}
.param-name {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 11px 14px 0;
}
.params > .param-name:not(:first-child) {
  border-top: 1px solid rgb(var(--border-subtle));
  margin-top: 4px;
  padding-top: 15px;
}
.param-name code {
  font-size: 13px;
  font-weight: 600;
}
.param-type {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: rgb(var(--text-muted));
}
.param-req {
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 4px;
}
.param-req-required {
  color: rgb(var(--blocked-fg));
  background: rgb(var(--blocked-bg));
  border: 1px solid rgb(var(--blocked-border));
}
.param-req-optional {
  color: rgb(var(--text-muted));
  background: rgb(var(--neutral-bg));
  border: 1px solid rgb(var(--neutral-border));
}
.param-doc {
  margin: 0;
  padding: 4px 14px 12px;
  font-size: 13.5px;
  color: rgb(var(--text-secondary));
}
.param-doc > *:last-child {
  margin-bottom: 0;
}
.param-doc p {
  margin: 0 0 8px;
}

/* ----------------------------------------------------------------- diagrams */

.diagram {
  margin: 0 0 24px;
}
.diagram-frame {
  padding: 14px;
  background: rgb(var(--surface-raised));
  border: 1px solid rgb(var(--border-subtle));
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: border-color var(--t-base) var(--ease-in-out);
  /* A wide diagram scrolls rather than squashing its labels into illegibility. */
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
.diagram-frame:hover {
  border-color: rgb(var(--border-default));
}
.diagram-caption {
  margin: 10px 2px 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: rgb(var(--text-muted));
}
.diagram-alt {
  margin-top: 10px;
}
.diagram-alt summary {
  font-size: 12.5px;
}

.dg {
  display: block;
  width: 100%;
  min-width: 620px;
  height: auto;
}

/* Diagram primitives, themed from the same tokens as the rest of the site, so
   a diagram is designed in both light and dark rather than being a light-mode
   picture pasted onto a dark page. */
.dg-box {
  fill: rgb(var(--surface-raised));
  stroke: rgb(var(--border-default));
  stroke-width: 1;
}
.dg-box.dg-sunken {
  fill: rgb(var(--surface-sunken));
  stroke: rgb(var(--border-subtle));
}
.dg-box.dg-allow {
  fill: rgb(var(--allowed-bg));
  stroke: rgb(var(--allowed-border));
}
.dg-box.dg-warn {
  fill: rgb(var(--warning-bg));
  stroke: rgb(var(--warning-border));
}
.dg-box.dg-block {
  fill: rgb(var(--blocked-bg));
  stroke: rgb(var(--blocked-border));
}
.dg-box.dg-info {
  fill: rgb(var(--info-bg));
  stroke: rgb(var(--info-border));
}
.dg-dashed {
  stroke-dasharray: 4 4;
}

.dg-num {
  fill: rgb(var(--surface-sunken));
  stroke: rgb(var(--border-subtle));
  stroke-width: 1;
}

.dg-t {
  font-family: var(--font-sans);
  font-size: 13px;
  fill: rgb(var(--text-primary));
}
.dg-t-heading {
  font-size: 14.5px;
  font-weight: 650;
}
.dg-t-meta {
  font-size: 11.5px;
}
.dg-t-mono {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
}
.dg-t-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 650;
}

.dg-fg-text {
  fill: rgb(var(--text-primary));
}
.dg-fg-muted {
  fill: rgb(var(--text-muted));
}
.dg-fg-allow {
  fill: rgb(var(--allowed-fg));
}
.dg-fg-warn {
  fill: rgb(var(--warning-fg));
}
.dg-fg-block {
  fill: rgb(var(--blocked-fg));
}
.dg-fg-info {
  fill: rgb(var(--info-fg));
}

.dg-line {
  fill: none;
  stroke: rgb(var(--border-strong));
  stroke-width: 1.5;
  stroke-linecap: round;
}
.dg-line-muted {
  stroke: rgb(var(--border-default));
}
.dg-line-allow {
  stroke: rgb(var(--allowed-fg));
}
.dg-line-block {
  stroke: rgb(var(--blocked-fg));
}
.dg-arrow-fill {
  fill: rgb(var(--border-strong));
}
.dg-arrow-fill-allow {
  fill: rgb(var(--allowed-fg));
}
.dg-arrow-fill-block {
  fill: rgb(var(--blocked-fg));
}

.dg-boundary {
  fill: none;
  stroke: rgb(var(--warning-fg));
  stroke-width: 1.5;
  stroke-dasharray: 6 5;
}

.dg-mark {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dg-mark-yes {
  stroke: rgb(var(--allowed-fg));
}
.dg-mark-no {
  stroke: rgb(var(--blocked-fg));
}
.dg-mark-partial {
  fill: rgb(var(--warning-fg));
  stroke: none;
}

/*
 * Staggered entrance.
 *
 * Each element carries a `--dg-step` index, so a diagram assembles itself in
 * reading order rather than appearing all at once. Capped at 12 steps of 40ms,
 * which is 480ms for the longest diagram — long enough to read as deliberate,
 * short enough that a reader scrolling past does not wait for it.
 *
 * Only applied once the diagram is on screen, which the client marks.
 */
html[data-motion='on'] .diagram[data-reveal]:not(.is-visible) .dg > :not(defs) {
  opacity: 0;
}
html[data-motion='on'] .diagram.is-visible .dg > :not(defs) {
  animation: dg-in 380ms var(--ease-out) both;
  animation-delay: calc(var(--dg-step, 0) * 40ms);
}
@keyframes dg-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --------------------------------------------------------------- page footer */

.page-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: var(--content-max);
  margin: 56px 0 0;
}
.page-nav-link {
  padding: 13px 16px;
  color: inherit;
  background: rgb(var(--surface-raised));
  border: 1px solid rgb(var(--border-subtle));
  border-radius: var(--radius);
  transition:
    transform var(--t-base) var(--ease-out),
    border-color var(--t-base) var(--ease-in-out);
}
.page-nav-link:hover {
  border-color: rgb(var(--border-strong));
  text-decoration: none;
  box-shadow: var(--shadow-lift);
}
.page-nav-link.is-prev:hover {
  transform: translateX(-3px);
}
.page-nav-link.is-next:hover {
  transform: translateX(3px);
}
.page-nav-link.is-next {
  text-align: right;
}
.page-nav-link span {
  display: block;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgb(var(--text-muted));
  margin-bottom: 3px;
}
.page-nav-link strong {
  font-size: 14px;
  font-weight: 600;
  color: rgb(var(--info-fg));
}

.page-footer {
  max-width: var(--content-max);
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid rgb(var(--border-subtle));
  font-size: 12.5px;
  color: rgb(var(--text-muted));
}
.page-footer p {
  margin: 0 0 6px;
}
.page-footer-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

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

.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 10vh 20px 20px;
  background: rgb(9 9 11 / 0.5);
  backdrop-filter: blur(3px);
}
.search-overlay[hidden] {
  display: none;
}
html[data-motion='on'] .search-overlay:not([hidden]) {
  animation: overlay-in var(--t-base) var(--ease-in-out) both;
}
html[data-motion='on'] .search-overlay:not([hidden]) .search-panel {
  animation: panel-in 260ms var(--ease-spring) both;
}
@keyframes overlay-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(-12px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.search-panel {
  width: 100%;
  max-width: 620px;
  background: rgb(var(--surface-overlay));
  border: 1px solid rgb(var(--border-default));
  border-radius: 12px;
  box-shadow: var(--shadow-overlay);
  overflow: hidden;
}
.search-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgb(var(--border-subtle));
  color: rgb(var(--text-muted));
}
.search-input-row svg {
  width: 16px;
  height: 16px;
  flex: none;
}
.search-input {
  flex: 1;
  font: inherit;
  font-size: 15px;
  color: rgb(var(--text-primary));
  background: transparent;
  border: 0;
  outline: none;
}
.search-results {
  max-height: 54vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  /* Keyboard navigation scrolls this list; smooth makes the selection appear
     to travel rather than teleport. */
  scroll-behavior: smooth;
}
.search-empty {
  padding: 22px 14px;
  font-size: 13.5px;
  color: rgb(var(--text-muted));
  text-align: center;
}
.search-hit {
  display: block;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  color: inherit;
  transition:
    background-color var(--t-micro) var(--ease-in-out),
    transform var(--t-micro) var(--ease-out);
}
.search-hit:hover,
.search-hit.is-active {
  background: rgb(var(--surface-hover));
  text-decoration: none;
}
.search-hit.is-active {
  transform: translateX(2px);
}
.search-hit-crumb {
  display: block;
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgb(var(--text-muted));
}
.search-hit-title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: rgb(var(--text-primary));
}
.search-hit-snippet {
  font-size: 12.5px;
  line-height: 1.5;
  color: rgb(var(--text-muted));
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.search-hit mark {
  background: rgb(var(--warning-bg));
  color: rgb(var(--warning-fg));
  border-radius: 3px;
  padding: 0 1px;
}
.search-foot {
  display: flex;
  gap: 16px;
  padding: 8px 14px;
  border-top: 1px solid rgb(var(--border-subtle));
  font-size: 11.5px;
  color: rgb(var(--text-muted));
}
.search-foot span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.search-foot svg {
  width: 13px;
  height: 13px;
}

/* ------------------------------------------------------- reveal on scroll */

/*
 * Content sections fade and rise as they enter the viewport.
 *
 * Gated on `data-motion` so that without JavaScript, or with reduced motion,
 * nothing is ever hidden — the failure mode of a reveal animation is a blank
 * page, which is much worse than no animation.
 *
 * The first screenful is marked `is-visible` immediately by the client, so
 * the content a reader lands on does not animate in underneath them.
 */
html[data-motion='on'] [data-reveal]:not(.is-visible) {
  opacity: 0;
  transform: translateY(10px);
}
html[data-motion='on'] [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity var(--t-enter) var(--ease-out),
    transform var(--t-enter) var(--ease-out);
}

/* The article itself eases in on load, which covers the paint of a new page
   and makes navigation feel continuous rather than like a hard cut. */
html[data-motion='on'] .prose {
  animation: page-in 380ms var(--ease-out) both;
}
html[data-motion='on'] .page-nav,
html[data-motion='on'] .page-footer {
  animation: page-in 380ms var(--ease-out) 80ms both;
}
@keyframes page-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Sidebar groups cascade in, so the navigation assembles rather than snapping. */
html[data-motion='on'] .nav-group {
  animation: nav-in 320ms var(--ease-out) both;
  animation-delay: calc(var(--nav-step, 0) * 45ms);
}
@keyframes nav-in {
  from {
    opacity: 0;
    transform: translateX(-6px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

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

@media (max-width: 860px) {
  .shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  /* No room to break out of a single-column layout. */
  :root {
    --bleed: 0px;
  }
  .menu-toggle {
    display: inline-flex;
  }
  .topbar-links .topbar-link {
    display: none;
  }
  /* The keyboard hint and the "docs" sub-label are the first things to go:
     neither is useful on a touch device, and together they are the width the
     search field needs to stay usable. */
  .search-trigger kbd {
    display: none;
  }
  .brand-sub {
    display: none;
  }
  .topbar {
    gap: 10px;
    padding: 0 14px;
  }
  .sidebar {
    position: fixed;
    inset: calc(var(--topbar-h) + var(--tabbar-h)) 0 0 0;
    z-index: 30;
    max-height: none;
    padding: 20px;
    background: rgb(var(--surface-base));
    border-right: 0;
    /* Off-canvas by transform rather than `display`, so opening and closing
       the drawer animates. `visibility` keeps it out of the tab order while
       closed, and unlike `display` it can be transitioned. */
    transform: translateX(-100%);
    visibility: hidden;
    transition:
      transform 260ms var(--ease-out),
      visibility 260ms step-end;
  }
  .sidebar[data-open] {
    transform: translateX(0);
    visibility: visible;
    transition:
      transform 260ms var(--ease-out),
      visibility 0s;
  }
  .prose h1 {
    font-size: 27px;
  }
  .page-nav {
    grid-template-columns: 1fr;
  }
  .dg {
    min-width: 560px;
  }
}

/* A reader who has asked for less motion gets none of it. Everything above is
   either gated on `data-motion` — which the client never sets in that case —
   or neutralised here. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .search-results {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media print {
  .topbar,
  .tabbar,
  .sidebar,
  .aside,
  .page-nav,
  .search-overlay,
  .scroll-progress {
    display: none !important;
  }
  .shell {
    display: block;
  }
  .prose {
    max-width: none;
  }
  .diagram-frame {
    border-color: #999;
    box-shadow: none;
  }
  .diagram-alt {
    display: none;
  }
}