/*
 * Developer Portal v2 — docs zone stylesheet.
 *
 * Self-hosted, served from `/portal/assets/docs.css?v=<content hash>` under
 * `style-src 'self'` (immutable at the served hash, `no-store` otherwise). The
 * docs zone ships no inline style attribute and one script (`theme.js`, the
 * shared Theme choice); every rule needed to render a page lives in this file
 * and in `ds-tokens.css`, which the document links first.
 *
 * TOKENS COME FROM THE DESIGN SYSTEM
 * ----------------------------------
 * Every colour below is a design-system token name (`--canvas`,
 * `--foreground`, `--border`, the button and tag component tokens, …), and so
 * are the radii and type steps the rules have moved onto (`--radius-lg`,
 * `--text-sm`, …),
 * defined by `ds-tokens.css` — generated from the installed
 * `@seekout/design-system` by `src/developer-console/scripts/generate-docs-tokens.mjs`
 * and kept current by its `--check` mode in CI. There is no palette copy
 * here; never add a hex. A missing token is a design-system gap
 * (`plans/developer-console-design-system/design-system-work.md`), not a
 * one-off value. Only layout constants stay `--docs-*`.
 *
 * The docs zone follows the operating system unless the reader chose a Theme
 * (console-figma-parity part 2, Q-A as amended 2026-09-24): `ds-tokens.css`
 * makes dark the base and applies light under
 * `@media (prefers-color-scheme: light)` (and honours an explicit Theme choice,
 * `.dark`/`.light` on <html> from `theme.js`), so this file needs almost no
 * mode-specific rule of its own. Current browsers always report light or dark,
 * so "dark by default" reaches only a browser that ignores the query.
 */

/*
 * Inter Variable, self-hosted (see `--font-sans` below). The unicode ranges are
 * @fontsource-variable/inter 5.3.0's, so the browser fetches latin-ext only
 * for text that needs it.
 */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * The console's face, self-hosted: `fonts/` holds UNHASHED copies of the
 * console's own @fontsource-variable/inter files (latin + latin-ext, OFL in
 * `fonts/OFL.txt`), declared by the `@font-face` rules above, so a
 * build-manifest-free page can name them (`font-src 'self'`). The design
 * system's `--font-sans` names "Inter", a family nothing registers; this is the
 * console's override (`console-app/src/styles/globals.css`) restated.
 */
:root {
  --font-sans:
    'Inter Variable', 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  /* `SideNav`'s `chrome:w-70`. */
  --docs-nav-width: 17.5rem;
}

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

html {
  /* In-page anchors clear the sticky bar (it wraps to ~80px on a phone). */
  scroll-padding-top: 5.5rem;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  margin: 0;
  font-family: var(--font-sans);
  /* The console's body: every unclassed text node is 14px at 1.55. */
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--foreground);
  background-color: var(--canvas);
  -webkit-font-smoothing: antialiased;
}

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

a:hover {
  text-decoration: underline;
}

code,
pre {
  font-family: var(--font-mono);
}

/*
 * The keyboard focus indicator, exactly one per control, as the console draws
 * it (`console-app/src/styles/globals.css`): a 2px `--ring` outline, never on a
 * pointer focus. `--ring` is violet-30 on the dark base and violet-50 in light
 * — both opaque, both ≥3:1 on the canvas.
 */
:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

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

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

/* Tailwind's `sr-only`: read by assistive technology, never painted. */
.docs-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border-width: 0;
}

/* ── Skip link ─────────────────────────────────────────────────────────── */

/*
 * `SkipToContent` (`components/TopBar.tsx`): Tailwind's `sr-only` until
 * focused, then a `rounded-md border border-foreground bg-background px-4
 * py-2.5 text-sm font-semibold` pill at 12/12 — not the old `left: -9999px`
 * parking spot.
 */
.docs-skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border-width: 0;
}

.docs-skip-link:focus {
  top: 0.75rem;
  left: 0.75rem;
  z-index: 50;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip-path: none;
  white-space: normal;
  padding: 0.625rem 1rem;
  border: 1px solid var(--foreground);
  border-radius: var(--radius-md);
  background: var(--background);
  color: var(--foreground);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

/* ── Top bar ───────────────────────────────────────────────────────────── */

/*
 * One bar for every docs page, drawn as the console's `TopBar`
 * (`components/TopBar.tsx`; Figma 9:533): canvas, a 1px `--border` rule,
 * `px-4 py-3 gap-x-6 gap-y-3` wrapping, and from the chrome breakpoint (860px)
 * 56px tall with `px-6 pb-2.75 gap-x-12`. It wraps at every width for the same
 * reason the console's does. The console's Theme toggle joins it once
 * `theme.js` runs (below); there is no environment or account chip (public,
 * cached pages).
 */
.docs-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1.5rem;
  row-gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--canvas);
}

/* `BrandMark`: the Figma logotype, a 24px hairline, "Developers". */
.docs-brand {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.75rem;
  white-space: nowrap;
}

.docs-brand-logo {
  display: block;
  flex: none;
  width: 7rem;
  height: 1.75rem;
}

/*
 * A logo's colours belong to the mark, so there are two files and the scheme
 * picks one — the on-dark mark at the dark base, the on-light one under the
 * light query. No script, no recolouring.
 */
.docs-brand-logo-light {
  display: none;
}

@media (prefers-color-scheme: light) {
  :root:not(.dark) .docs-brand-logo-dark {
    display: none;
  }

  :root:not(.dark) .docs-brand-logo-light {
    display: block;
  }
}

/* An explicit Theme choice (`theme.js`) beats the OS, as in `ds-tokens.css`. */
:root.light .docs-brand-logo-dark {
  display: none;
}

:root.light .docs-brand-logo-light {
  display: block;
}

.docs-brand-divider {
  flex: none;
  width: 1px;
  height: 1.5rem;
  background: var(--border);
}

.docs-brand-name {
  font-size: var(--text-base);
  line-height: 1;
  font-weight: var(--font-weight-medium);
  color: var(--muted-foreground);
}

/*
 * Zone tabs in the console's order (Console, Docs, API reference). The current
 * zone keeps its label colour; a 4px `--accent` mark with a small top radius is
 * the whole cue (Figma `Color/Navigation/Item/Decoration/pressed`). The tab
 * fills the bar's row, so the mark sits on the bar's bottom edge by undoing the
 * bar's bottom padding: 12px, then 11px from the chrome breakpoint.
 */
.docs-zone-tabs,
.docs-zone-tabs ul,
.docs-zone-tabs li {
  display: flex;
  align-items: center;
  align-self: stretch;
}

.docs-zone-tabs ul {
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.docs-zone-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  gap: 0.375rem;
  font-size: var(--text-sm);
  line-height: 1;
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  color: var(--foreground);
  text-decoration: none;
}

.docs-zone-tab:hover {
  color: var(--foreground-strong);
  text-decoration: none;
}

.docs-zone-tab-current::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -0.75rem;
  left: 0;
  height: 0.25rem;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: var(--accent);
}

/*
 * Below this width the tabs wrap under the brand (with Inter loaded the bar's
 * content is 452px plus 24px of gap and 32px of padding on macOS: it wraps
 * below 508px), and — as on the console's wrapped bar — the tab hugs its label
 * and the mark sits 4px under it. The console detects the wrap with a
 * ResizeObserver; without the script one width stands in for the measurement.
 * Linux renders the same Inter a pixel or two narrower, so the natural wrap
 * point moves: below the query the tabs take a row of their own, so the query
 * and the layout always agree. The docs-parity e2e spec checks the mark's
 * offset on both sides of it, with the text narrowed too.
 */
@media (max-width: 507.98px) {
  .docs-topbar:not([data-wrap-measured]) .docs-zone-tabs {
    flex-basis: 100%;
  }

  .docs-topbar:not([data-wrap-measured]) .docs-zone-tabs li,
  .docs-topbar:not([data-wrap-measured]) .docs-zone-tab {
    align-self: center;
  }

  .docs-topbar:not([data-wrap-measured]) .docs-zone-tab-current::after {
    bottom: -0.5rem;
  }
}

/*
 * With `theme.js` the bar's content is no longer a fixed width (the Theme
 * button joins it), so the script measures the wrap as the console's
 * `useBarWrapState` does and marks the bar `data-wrapped`; the query above is
 * only the no-script fallback (`data-wrap-measured` is absent there).
 */
.docs-topbar[data-wrapped] .docs-zone-tabs li,
.docs-topbar[data-wrapped] .docs-zone-tab {
  align-self: center;
}

.docs-topbar[data-wrapped] .docs-zone-tab-current::after {
  bottom: -0.5rem;
}

/*
 * The console's `ThemeToggle` (`components/ThemeToggle.tsx`): a glyph and the
 * "Theme" caption, 6px apart, 32px tall, no box — `Clickable`, not `Button`.
 * The caption is visible from 768px (`md:not-sr-only`) and screen-reader-only
 * below; `aria-label` carries the action either way. The cluster sits at the
 * bar's end (`ml-auto … gap-6`). Shown only once `theme.js` has run (`.docs-js`
 * on <html>): without the script it could not work, and the page follows the OS.
 */
.docs-topbar-actions {
  display: none;
}

.docs-js .docs-topbar-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-width: 0;
  margin-left: auto;
}

.docs-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--foreground);
  font-family: inherit;
  font-size: var(--text-sm);
  line-height: 1;
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.docs-theme-toggle:hover {
  color: var(--foreground-strong);
}

.docs-theme-icon {
  display: block;
  flex: none;
  width: 1rem;
  height: 1rem;
  color: var(--muted-foreground);
}

.docs-theme-toggle:hover .docs-theme-icon {
  color: var(--foreground-strong);
}

/* The glyph shows the DESTINATION: a sun means "switch to light". */
.docs-theme-icon-moon {
  display: none;
}

@media (prefers-color-scheme: light) {
  :root:not(.dark) .docs-theme-icon-sun {
    display: none;
  }

  :root:not(.dark) .docs-theme-icon-moon {
    display: block;
  }
}

:root.light .docs-theme-icon-sun {
  display: none;
}

:root.light .docs-theme-icon-moon {
  display: block;
}

.docs-theme-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border-width: 0;
}

@media (min-width: 768px) {
  .docs-theme-label {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
  }
}

/*
 * Forced colours repaint every background with the system canvas, which would
 * erase the mark — the current zone's only cue. Paint it in the text colour.
 */
@media (forced-colors: active) {
  .docs-zone-tab-current::after {
    background: CanvasText;
  }
}

@media (min-width: 860px) {
  .docs-topbar {
    min-height: 3.5rem;
    column-gap: 3rem;
    padding: 0.75rem 1.5rem 0.6875rem;
  }

  .docs-zone-tab-current::after {
    bottom: -0.6875rem;
  }
}

/*
 * "Back to Console", shown only with a valid `?return_to`. It named four
 * variables nothing defined and rendered unstyled; it now mirrors the reference
 * zone's banner (`reference/components/ReferenceShell.tsx`): a full-width strip
 * under the bar, `border-b border-border bg-card px-8 py-2.5 text-sm
 * text-muted-foreground`, link `font-bold text-primary`.
 */
.docs-console-return {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 2rem;
  border-bottom: 1px solid var(--border);
  background: var(--card);
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}

.docs-console-return a {
  font-weight: var(--font-weight-bold);
  color: var(--primary);
  text-decoration: none;
}

.docs-console-return a:hover {
  text-decoration: underline;
}

/* ── Layout ────────────────────────────────────────────────────────────── */

/*
 * `ConsoleShell`: a `min-h-svh` column — the bar wraps, so its height is not a
 * constant to subtract — whose body becomes a row at the chrome breakpoint.
 */
.docs-layout {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

/*
 * The rail, as `SideNav` draws it: canvas, `px-4 py-3.5` with a bottom rule on a
 * phone, 280px wide with `p-3` and a right rule from the chrome breakpoint.
 * Sentence-case group headers, 40px rows 4px apart, groups 24px apart with a
 * hairline between each pair. No icons (part 2, Q-C).
 *
 * Below the chrome breakpoint the list folds behind a "Current page" row, as
 * the console's does — here a native `<details>`, so no script. The list is the
 * disclosure's sibling (WebKit will not show a closed `<details>`' content, so
 * forcing it open on a desktop left Safari's rail empty): on a phone `:has()`
 * hides it while the disclosure is closed, and from the breakpoint up the row
 * is hidden and the list simply shows. A browser without `:has()` shows the
 * list on a phone as well — the pre-fold layout, never an empty rail.
 */
.docs-nav {
  width: 100%;
  min-width: 0;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--canvas);
}

.docs-nav-items {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
  padding-top: 1rem;
}

.docs-nav-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
  cursor: pointer;
  list-style: none;
}

.docs-nav-summary::-webkit-details-marker {
  display: none;
}

.docs-nav-current {
  min-width: 0;
}

.docs-nav-current-caption {
  display: block;
  margin-bottom: 0.25rem;
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  font-weight: var(--font-weight-semibold);
  color: var(--muted-foreground);
}

.docs-nav-current-page {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  font-weight: var(--font-weight-semibold);
  color: var(--foreground);
}

/* The DS secondary `Button` face (`buttonVariants`: h-8, px-4, radius-sm). */
.docs-nav-toggle {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  height: 2rem;
  padding: 0 1rem;
  border: 1px solid var(--color-button-secondary-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-button-secondary-background-default);
  color: var(--color-button-secondary-text-default);
  font-size: var(--text-sm);
  line-height: 1;
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

.docs-nav-summary:hover .docs-nav-toggle {
  border-color: var(--color-button-secondary-border-hovered);
  color: var(--color-button-secondary-text-hovered);
}

.docs-nav-menu[open] .docs-nav-toggle-open,
.docs-nav-menu:not([open]) .docs-nav-toggle-close {
  display: none;
}

.docs-nav-section,
.docs-nav ul {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.docs-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.docs-nav-group {
  margin: 0;
  padding: 0 0.75rem;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  font-weight: var(--font-weight-semibold);
  color: var(--muted-foreground);
}

.docs-nav-divider {
  flex: none;
  width: 100%;
  height: 1px;
  background: var(--border);
}

.docs-nav a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 2.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: 1;
  font-weight: var(--font-weight-medium);
  color: var(--foreground);
  text-decoration: none;
}

.docs-nav a:hover {
  background: var(--muted);
  text-decoration: none;
}

/*
 * The current page: `--sidebar-accent` tint, strong ink, semibold — tint only,
 * no bar. The wash alone is 1.19:1 against the rail, so the weight carries the
 * state too (WCAG 1.4.1), as in the console. Restated under `:hover` so the
 * pointer does not repaint it with every other row's wash.
 */
.docs-nav a[aria-current='page'],
.docs-nav a[aria-current='page']:hover {
  background: var(--sidebar-accent);
  color: var(--foreground-strong);
  font-weight: var(--font-weight-semibold);
}

@media (min-width: 860px) {
  .docs-layout {
    flex-direction: row;
  }

  .docs-nav {
    flex: none;
    width: var(--docs-nav-width);
    padding: 0.75rem;
    border-right: 1px solid var(--border);
    border-bottom: 0;
  }
}

@media (max-width: 859.98px) {
  .docs-nav:has(.docs-nav-menu:not([open])) .docs-nav-items {
    display: none;
  }
}

@media (min-width: 860px) {
  .docs-nav-menu {
    display: none;
  }

  .docs-nav-items {
    padding-top: 0;
  }
}

/* ── Content column ────────────────────────────────────────────────────── */

/*
 * `ConsoleShell`'s main: `px-4 pt-7 pb-14`, `px-6 pt-12 pb-15` from the chrome
 * breakpoint, `px-12` from 1024px, at most 80rem wide. Each block keeps a
 * 760px reading measure — a deliberate docs choice (plan P2-30). The column is
 * a size container so card grids change columns by the space they actually
 * get, not by the viewport (P17).
 */
.docs-body {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  max-width: 80rem;
  padding: 1.75rem 1rem 3.5rem;
  overflow-x: clip;
  container: docs-content / inline-size;
}

.docs-body > * {
  max-width: 47.5rem;
  margin-block: 0;
}

/*
 * The page's rhythm: blocks 16px apart, sections 48px (P17). Qualified with the
 * element so it outranks each block's own `margin: 0`.
 */
main.docs-body > * + * {
  margin-top: 1rem;
}

main.docs-body > h2 {
  margin-top: 3rem;
}

main.docs-body > h2 + * {
  margin-top: 0.75rem;
}

/* `PageHeader`'s `mb-7`. */
main.docs-body > .docs-page-header + * {
  margin-top: 1.75rem;
}

@media (min-width: 860px) {
  .docs-body {
    padding: 3rem 1.5rem 3.75rem;
    overflow-x: visible;
  }
}

@media (min-width: 1024px) {
  .docs-body {
    padding-inline: 3rem;
  }
}

/* ── Page header ───────────────────────────────────────────────────────── */

/*
 * `PageHeader` (P1; Figma 9:540): the nav group as a grey, sentence-case
 * eyebrow (Q-D), the `h1` 16px under it at `text-3xl` → `text-4xl` from the
 * chrome breakpoint, bold, strong ink, and the page's opening sentence 12px
 * under that.
 */
.docs-page-header {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.docs-body .docs-page-eyebrow {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  font-weight: var(--font-weight-semibold);
  color: var(--muted-foreground);
}

.docs-page-header h1,
.docs-hero h1 {
  max-width: 56rem;
  margin: 0;
  padding-top: 1rem;
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  font-weight: var(--font-weight-bold);
  color: var(--foreground-strong);
}

.docs-body .docs-page-description,
.docs-body .docs-lede {
  max-width: 65ch;
  margin: 0;
  padding-top: 0.75rem;
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: var(--foreground);
}

@media (min-width: 860px) {
  .docs-page-header h1 {
    font-size: var(--text-4xl);
  }
}

/* ── Text ──────────────────────────────────────────────────────────────── */

/* P2: a page section is `Header/md`, 24px medium. Its margin is the flow's. */
.docs-body h2 {
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  font-weight: var(--font-weight-medium);
  color: var(--foreground);
}

/*
 * `Title/md`, 16px semibold: a step (an h3, or an h2 where the steps are the
 * page's sections — Quickstart), a numbered item, a group in a card.
 */
.docs-body h3,
.docs-body .docs-step > h2,
.docs-subheading {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  font-weight: var(--font-weight-semibold);
  color: var(--foreground);
}

/* P4: every body line is 14px at line height 1.35 (`leading-snug`). */
.docs-body p,
.docs-list {
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--foreground);
}

.docs-body p.docs-muted,
.docs-muted {
  color: var(--muted-foreground);
}

/* P3: `Title/sm`, 14px semibold, muted, sentence case, never tracked. */
.docs-body p.docs-eyebrow,
.docs-eyebrow,
.docs-code-caption {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  font-weight: var(--font-weight-semibold);
  color: var(--muted-foreground);
}

.docs-list {
  margin: 0;
  padding-left: 1.25rem;
}

.docs-list li + li {
  margin-top: 0.375rem;
}

/*
 * Links in running text keep an underline at rest — the non-colour cue AA asks
 * for, as `EditorialProse` does (`underline underline-offset-2`). Standalone
 * links (cards, buttons, the rail) do not.
 */
.docs-body p a,
.docs-list a,
.docs-note a,
.docs-table a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* `InlineCode` (DS-P3): a scope or header inside a sentence. */
.docs-inline-code {
  padding: 0 0.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--muted);
  color: var(--foreground);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  overflow-wrap: anywhere;
}

/* ── Code samples ──────────────────────────────────────────────────────── */

.docs-code {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
  margin: 0;
}

/*
 * The console's `CodeBlock` (DS-P4), following the theme (Q-E): the muted
 * surface with a `--border` edge, 16px by 14px, mono 12px at `leading-relaxed`.
 * The fill alone is ~1.1:1 on the canvas, so the border is what draws it.
 */
.docs-codeblock {
  margin: 0;
  overflow: auto;
  padding: 0.875rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--muted);
  color: var(--foreground);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
  white-space: pre;
}

/* A prompt is prose in a code face: it wraps rather than scrolling sideways. */
.docs-codeblock-wrap {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ── Steps and numbered items ──────────────────────────────────────────── */

/*
 * Quickstart's steps (P2-22). The console has no numbered-step component, so
 * the marker is the one shape docs uses for every numbered item: a 24px
 * `--primary` disc with `--primary-foreground` 12px semibold figures.
 */
.docs-steps {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 0;
  list-style: none;
  counter-reset: docs-step;
}

.docs-step {
  position: relative;
  min-width: 0;
  padding-left: 2.25rem;
  counter-increment: docs-step;
}

.docs-step > * {
  margin: 0;
}

.docs-step > * + * {
  margin-top: 0.75rem;
}

.docs-step::before,
.docs-marker {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: var(--text-xs);
  line-height: 1;
  font-weight: var(--font-weight-semibold);
}

.docs-step::before {
  content: counter(docs-step);
  position: absolute;
  top: 0;
  left: 0;
}

.docs-numbered {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: docs-numbered;
}

.docs-numbered-item {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  counter-increment: docs-numbered;
}

.docs-numbered-item p {
  margin: 0.25rem 0 0;
}

.docs-marker-counted::before {
  content: counter(docs-numbered);
}

/* ── Tables ────────────────────────────────────────────────────────────── */

/*
 * `ScrollTable` over the design system's `Table`: the bordered, rounded region
 * is what scrolls (a collapsed table cannot round its own corners), the head
 * is 40px of 14px medium muted text, cells are 12px all round, rows are ruled
 * with `--border`. Two deliberate differences from the console's dense data
 * tables: body cells wrap and sit at the top (docs cells hold sentences), and
 * the caption is the table's title row, in the eyebrow type (P3).
 */
.docs-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.docs-table {
  width: 100%;
  border-collapse: collapse;
  caption-side: top;
  color: var(--foreground);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}

.docs-table caption {
  padding: 0.75rem 0.75rem 0;
  text-align: left;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  font-weight: var(--font-weight-semibold);
  color: var(--muted-foreground);
}

.docs-table tr {
  border-bottom: 1px solid var(--border);
}

.docs-table tbody tr:last-child {
  border-bottom: 0;
}

.docs-table th {
  height: 2.5rem;
  padding: 0 0.75rem;
  text-align: left;
  vertical-align: middle;
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  color: var(--muted-foreground);
}

/* Identifiers in a cell keep whole; the region scrolls instead. */
.docs-table .docs-inline-code {
  overflow-wrap: normal;
  white-space: nowrap;
}

.docs-table td {
  padding: 0.75rem;
  text-align: left;
  vertical-align: top;
}

/* ── Notes ─────────────────────────────────────────────────────────────── */

/*
 * The console's `Note` (P15): a strong lead in sentence case, then the body, on
 * `--secondary-light` inside an `--input` edge.
 */
.docs-note {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.75rem;
  border: 1px solid var(--input);
  border-radius: var(--radius-lg);
  background: var(--secondary-light);
  color: var(--foreground);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.docs-note-lead {
  font-weight: var(--font-weight-semibold);
}

/*
 * A warning is the design system's `Alert variant="warning"` (Figma's Warning
 * family, ledger L-050): `flex items-start gap-2 p-4 text-sm rounded-sm
 * border`, the notification warning fill and 1px tangerine border, the filled
 * warning glyph (`mt-0.5 size-4`), then `AlertTitle` / `AlertDescription` —
 * 14px at the component's own line height of 1.35 (its `leading-[1.35]`;
 * DS-11 asks for that step as a token).
 */
.docs-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  min-width: 0;
  padding: 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--color-notification-text);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}

.docs-alert-warning {
  border-color: var(--color-notification-warning-border);
  background: var(--color-notification-warning-background);
}

.docs-alert-icon {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  margin-top: 0.125rem;
}

.docs-alert-warning .docs-alert-icon {
  color: var(--color-notification-warning-icon);
}

.docs-alert-body {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.docs-body .docs-alert-title,
.docs-body .docs-alert-description {
  margin: 0;
  color: inherit;
  font-size: var(--text-sm);
  line-height: 1.35;
}

.docs-body .docs-alert-title {
  font-weight: var(--font-weight-semibold);
}

/* ── Cards and panels ──────────────────────────────────────────────────── */

/*
 * The Overview build-path card (P5): a bordered `--card` tile, 20px in, a
 * 16px semibold title, muted body, and the `ArrowRight` in its bottom-right
 * corner; the border turns `--primary` under the pointer. The card's one link
 * covers the whole tile, so the tile is the target, as in the console.
 * Columns come from the content column's width: two from 512px (`@lg`, the
 * choice-tile grid's step), and never three — inside the 760px reading
 * measure a third tile would be ~245px wide.
 */
.docs-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.docs-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  color: var(--card-foreground);
}

.docs-card:hover {
  border-color: var(--primary);
}

.docs-card > * {
  margin: 0;
}

.docs-card-title {
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  font-weight: var(--font-weight-semibold);
  color: var(--foreground);
  overflow-wrap: anywhere;
}

.docs-card-title a {
  color: inherit;
  text-decoration: none;
}

.docs-card-title a::after,
.docs-card-link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.docs-body .docs-card-text,
.docs-card-meta {
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--muted-foreground);
}

.docs-card-meta {
  display: grid;
  gap: 0.25rem;
  padding: 0;
  list-style: none;
}

.docs-card-arrow {
  flex: none;
  align-self: flex-end;
  width: 1rem;
  height: 1rem;
  margin-top: auto;
  color: var(--primary);
}

.docs-card-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-end;
  gap: 0.375rem;
  margin-top: auto;
  color: var(--primary);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.docs-card-link:hover {
  text-decoration: none;
}

.docs-card-link .docs-card-arrow {
  margin-top: 0;
}

/*
 * A content card (P9): the design system's `Card` look, `rounded-lg p-6`, its
 * parts 16px apart, an 18px semibold title (`Title/lg`).
 */
.docs-panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
}

.docs-panel {
  display: grid;
  align-content: start;
  gap: 1rem;
  min-width: 0;
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  color: var(--card-foreground);
}

.docs-panel > * {
  margin: 0;
}

.docs-panel-title {
  /* A recipe card jumps here: keep the panel's own top edge in view too. */
  scroll-margin-top: 1.5rem;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  font-weight: var(--font-weight-semibold);
  color: var(--foreground);
}

.docs-body h2.docs-panel-title {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  font-weight: var(--font-weight-semibold);
}

.docs-panel-group {
  display: grid;
  gap: 0.5rem;
}

.docs-disclosure summary {
  cursor: pointer;
  color: var(--primary);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  font-weight: var(--font-weight-medium);
}

.docs-disclosure[open] summary {
  margin-bottom: 0.75rem;
}

@container docs-content (min-width: 32rem) {
  .docs-cards,
  .docs-panels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── Tags ──────────────────────────────────────────────────────────────── */

/*
 * The design system's `Tag` in `vanilla`, `pill`, `static` (P13): 24px, 8px
 * in, 12px regular, on the tag component tokens. Never default gray (DS-5).
 */
.docs-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.docs-tag {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 0.25rem;
  height: 1.5rem;
  margin: 0;
  padding: 0 0.5rem;
  border: 1px solid transparent;
  border-radius: 9999px;
  background: var(--color-tag-vanilla-background);
  color: var(--color-tag-vanilla-text);
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  font-weight: var(--font-weight-normal);
  white-space: nowrap;
}

.docs-body p.docs-tag {
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  color: var(--color-tag-vanilla-text);
}

.docs-strip {
  display: grid;
  gap: 0.75rem;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */

/*
 * A link shaped like the design system's `Button` (P14; `buttonVariants`):
 * 32px, 16px in, a 1px border, `rounded-sm`, 14px medium at line height 1, on
 * the generated button component tokens. The secondary has no hover fill. It
 * is the console's wrap-allowed shape (`h-auto min-h-8 shrink text-center
 * whitespace-normal`), so a long label wraps inside its border on a phone
 * instead of widening the page. One focus indicator: the page's `--ring`
 * outline (the console's buttons draw a ring instead; either is one).
 */
.docs-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.docs-button {
  display: inline-flex;
  flex-shrink: 1;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2rem;
  padding: 0.375rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  line-height: 1;
  font-weight: var(--font-weight-medium);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  /* No colour transition: declared on the resting rule it also ran from the
     browser's default link colours on every page load. */
}

/* Beats the running-text underline: a button inside a paragraph is not prose. */
.docs-body .docs-button,
.docs-button:hover {
  text-decoration: none;
}

.docs-button-primary {
  background: var(--color-button-primary-background-default);
  border-color: var(--color-button-primary-border-default);
  color: var(--color-button-primary-text-default);
}

.docs-button-primary:hover {
  background: var(--color-button-primary-background-hovered);
  border-color: var(--color-button-primary-border-hovered);
  color: var(--color-button-primary-text-hovered);
}

.docs-button-secondary {
  background: var(--color-button-secondary-background-default);
  border-color: var(--color-button-secondary-border-default);
  color: var(--color-button-secondary-text-default);
}

.docs-button-secondary:hover {
  background: var(--color-button-secondary-background-hovered);
  border-color: var(--color-button-secondary-border-hovered);
  color: var(--color-button-secondary-text-hovered);
}

/* A `PageHero`'s action row and note, under the page header. */
.docs-opening {
  display: grid;
  gap: 0.75rem;
}

/* ── Landing ───────────────────────────────────────────────────────────── */

/*
 * `/` has no rail. Its hero is `PageHeader`'s hero variant (Overview 9:533):
 * `text-4xl` → `text-5xl`, centred in the mocks' 870px column from the chrome
 * breakpoint, 48px above the rest; the blocks under it keep the reading
 * measure, centred in the same column. Section labels are eyebrows (P3).
 */
.docs-landing {
  margin-inline: auto;
}

.docs-landing > * {
  margin-inline: auto;
}

.docs-hero {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 54.375rem;
}

.docs-body > .docs-hero {
  max-width: 54.375rem;
}

main.docs-body > .docs-hero + * {
  margin-top: 3rem;
}

.docs-hero h1 {
  max-width: none;
  padding-top: 0;
  font-size: var(--text-4xl);
}

.docs-body .docs-hero .docs-page-description {
  max-width: none;
}

.docs-hero .docs-actions {
  margin-top: 1.5rem;
}

.docs-body.docs-landing > h2 {
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  font-weight: var(--font-weight-semibold);
  color: var(--muted-foreground);
}

@media (min-width: 860px) {
  .docs-hero {
    text-align: center;
  }

  /*
   * `leading-tight` (1.25) like the standard title — Part 1's hero fix
   * (`console-parity-p4-shells` ffce9646) moved the console's hero off the
   * size's own line height (1.0 at 48px), and the docs follow it.
   */
  .docs-hero h1 {
    font-size: var(--text-5xl);
  }

  .docs-hero .docs-actions {
    justify-content: center;
  }
}