/* Hallmark · pre-emit critique: P5 H5 E4 S4 R5 V4
 * genre: modern-minimal · macrostructure: Workbench · design-system: design.md · designed-as-app
 * Audience: API integrators. Compact reference + working examples; no decorative enrichment.
 * Shared portal palette and type; scoped code colours preserve syntax contrast.
 */
:root {
    --sidebar-width: 16rem;
    --header-height: 4rem;
    --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
    --docs-code-bg: oklch(22% 0.015 260);
    --docs-code-header: oklch(27% 0.015 260);
    --docs-code-rule: oklch(37% 0.015 260);
    --docs-code-text: oklch(93% 0.012 260);
    --docs-code-muted: oklch(74% 0.018 260);
    --docs-code-string: oklch(82% 0.10 165);
    --docs-code-key: oklch(83% 0.07 245);
    --docs-code-value: oklch(85% 0.10 80);
    --docs-get: oklch(48% 0.11 250);
    --docs-get-wash: oklch(96% 0.015 250);
    --text-muted: var(--color-muted);
    --accent: var(--color-accent);
    --accent-indigo: var(--color-accent);
    --accent-emerald: var(--color-live);
    --method-get: var(--docs-get);
    --method-get-wash: var(--docs-get-wash);
    --method-post: var(--color-accent);
    --method-post-wash: var(--color-accent-wash);
    --method-put: var(--color-warn);
    --method-put-wash: var(--color-warn-wash);
    --method-delete: var(--color-halt);
    --method-delete-wash: var(--color-halt-wash);
}
html, body { overflow-x: clip; }
html { scroll-padding-block-start: calc(var(--header-height) + var(--space-lg)); }
body { background: var(--color-paper-raised); color: var(--color-ink); font: var(--text-base)/1.65 var(--font-body); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
h1, h2, h3 { font-family: var(--font-display); font-style: normal; min-width: 0; overflow-wrap: anywhere; }
button, input { font: inherit; }
button, summary { cursor: pointer; }
button, .doc-header a, .sidebar-nav__link, .doc-text-link, .doc-download { white-space: nowrap; }
button { touch-action: manipulation; }
button:active { filter: brightness(.94); }
button:disabled { opacity: .5; cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
code, pre, kbd { font-family: var(--font-mono); }
code { font-size: .86em; overflow-wrap: anywhere; }
.doc-main a:not([class]) { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
.doc-main :is(p, li) > code { background: var(--color-paper-sunken); padding: var(--space-3xs) var(--space-2xs); border-radius: var(--radius-xs); }
.doc-skip-link { position: fixed; inset-block-start: var(--space-xs); inset-inline-start: var(--space-md); transform: translateY(-200%); z-index: var(--z-toast); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); background: var(--color-accent); color: var(--color-accent-ink); }
.doc-skip-link:focus { transform: none; }

/* A compact, shared documentation shell. */
.doc-header { position: fixed; inset: 0 0 auto; height: var(--header-height); z-index: var(--z-sticky); border-block-end: 1px solid var(--color-rule); background: var(--color-paper-raised); color: var(--color-ink); }
.doc-header__inner { display: flex; align-items: center; gap: var(--space-md); height: 100%; padding-inline: var(--space-md); }
.doc-header__identity { display: flex; align-items: center; gap: var(--space-sm); min-width: 0; }
.doc-header__brand { display: inline-flex; flex-shrink: 0; }
.doc-header__logo-img { width: 7.5rem; height: auto; }
.doc-header__label { display: none; font-size: var(--text-sm); color: var(--color-muted); padding-inline-start: var(--space-lg); border-inline-start: 1px solid var(--color-rule); }
.doc-header__nav { display: none; align-self: stretch; gap: var(--space-lg); }
.doc-header__link { display: inline-flex; align-items: center; border-block-end: 2px solid transparent; color: var(--color-muted); font-size: var(--text-sm); font-weight: 500; }
.doc-header__link.active { border-color: var(--color-accent); color: var(--color-ink); }
.doc-header__link:hover { color: var(--color-accent); }
.doc-header__btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); margin-inline-start: auto; min-height: 2.5rem; padding-inline: var(--space-sm); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 600; }
.doc-header__btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
.doc-header__btn--primary:hover { background: var(--color-accent-hover); }
.hamburger { flex-shrink: 0; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 1px solid var(--color-rule); border-radius: var(--radius-sm); background: var(--color-paper-raised); color: var(--color-ink); }
.hamburger svg { width: 1.125rem; height: 1.125rem; }
.doc-layout { padding-block-start: var(--header-height); }
.doc-sidebar { position: fixed; inset-block: var(--header-height) 0; inset-inline-start: 0; width: min(var(--sidebar-width), calc(100% - var(--space-xl))); padding: var(--space-lg) var(--space-sm); overflow-y: auto; overscroll-behavior: contain; border-inline-end: 1px solid var(--color-rule); background: var(--color-paper); color: var(--color-ink); z-index: var(--z-dropdown); visibility: hidden; transform: translateX(-100%); scrollbar-width: thin; scrollbar-color: var(--color-rule-control) transparent; }
html[dir="rtl"] .doc-sidebar { transform: translateX(100%); }
.doc-sidebar.open { transform: none; visibility: visible; }
.sidebar-overlay { position: fixed; inset: var(--header-height) 0 0; z-index: var(--z-raised); background: var(--color-scrim); display: none; }
.sidebar-overlay.show { display: block; }
body.doc-navigation-open { overflow-y: hidden; }
.sidebar-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); padding-inline: var(--space-xs); margin-block-end: var(--space-md); font-weight: 700; font-size: var(--text-sm); }
.doc-version { padding: var(--space-3xs) var(--space-xs); border: 1px solid var(--color-rule); border-radius: var(--radius-xs); background: var(--color-paper-raised); color: var(--color-muted); font: 500 var(--text-xs)/1.5 var(--font-mono); white-space: nowrap; }
.sidebar-search { position: relative; margin-block-end: var(--space-lg); }
.sidebar-search__input { width: 100%; min-height: 2.5rem; padding-inline: var(--space-xl) var(--space-lg); border: 1px solid var(--color-rule-control); border-radius: var(--radius-sm); background: var(--color-paper-raised); color: var(--color-ink); font-size: var(--text-sm); }
.sidebar-search__input::placeholder { color: var(--color-muted); }
.sidebar-search__icon { position: absolute; inset-inline-start: var(--space-sm); inset-block-start: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; color: var(--color-muted); pointer-events: none; }
.sidebar-search__shortcut { position: absolute; inset-inline-end: var(--space-sm); inset-block-start: 50%; transform: translateY(-50%); color: var(--color-muted); font-size: var(--text-xs); pointer-events: none; }
.sidebar-search:focus-within .sidebar-search__shortcut { display: none; }
.sidebar-section { margin-block-end: var(--space-lg); }
.sidebar-section__title { padding-inline: var(--space-xs); margin-block-end: var(--space-xs); font-size: .6875rem; font-weight: 700; letter-spacing: .07em; color: var(--color-muted); text-transform: uppercase; }
.sidebar-nav { display: grid; gap: var(--space-3xs); list-style: none; padding: 0; margin: 0; }
.sidebar-nav__link { white-space: normal; overflow-wrap: anywhere; display: flex; align-items: center; gap: var(--space-xs); min-height: 2.25rem; padding: var(--space-xs); border-radius: var(--radius-xs); color: var(--color-ink-soft); font-size: .8125rem; line-height: 1.4; }
.sidebar-nav__link:hover { background: var(--color-paper-sunken); color: var(--color-ink); }
.sidebar-nav__link.active { background: var(--color-accent-wash); color: var(--color-accent); font-weight: 700; }
.sidebar-nav__dot { width: .3125rem; height: .3125rem; border-radius: var(--radius-pill); margin-inline: var(--space-2xs); background: var(--color-rule-control); flex-shrink: 0; }
.sidebar-nav__link.active .sidebar-nav__dot { background: var(--color-accent); }
.sidebar-nav__method, .endpoint-url__method { flex-shrink: 0; padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-xs); font: 500 .625rem/1.6 var(--font-mono); text-align: center; min-width: 2.625rem; }
.sidebar-nav__method--get, .endpoint-url__method--get { background: var(--method-get-wash); color: var(--method-get); }
.sidebar-nav__method--post, .endpoint-url__method--post { background: var(--method-post-wash); color: var(--method-post); }
.sidebar-nav__method--put, .endpoint-url__method--put { background: var(--method-put-wash); color: var(--method-put); }
.sidebar-nav__method--delete, .endpoint-url__method--delete { background: var(--method-delete-wash); color: var(--method-delete); }
.sidebar-empty { padding: var(--space-xs); color: var(--color-muted); font-size: var(--text-sm); }
.doc-main { min-width: 0; }
.doc-main__inner { max-width: 84rem; margin-inline: auto; padding: var(--space-xl) var(--space-md); }

/* Introduction: context, base URL and two useful starting points. */
.doc-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-block-end: var(--space-lg); color: var(--color-muted); font-size: var(--text-xs); }
.doc-breadcrumb > span:last-child { color: var(--color-ink-soft); }
.doc-hero { padding-block-end: var(--space-lg); }
.doc-hero__heading { display: grid; gap: var(--space-lg); align-items: end; }
.doc-hero h1 { font-size: clamp(2rem, 2.4vw + 1rem, 3rem); font-weight: 600; letter-spacing: -.04em; line-height: 1.15; }
.doc-hero p { margin-block-start: var(--space-md); max-width: 62ch; color: var(--color-ink-soft); }
.doc-hero__base-url { min-width: 0; }
.doc-label { display: flex; align-items: center; justify-content: space-between; margin-block-end: var(--space-xs); font-size: var(--text-xs); font-weight: 600; color: var(--color-muted); }
.doc-hero__url-box { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); border: 1px solid var(--color-rule); border-radius: var(--radius-sm); background: var(--color-paper); color: var(--color-ink); }
.doc-hero__url-box code { min-width: 0; font-size: .6875rem; }
.copy-btn, .endpoint-url__copy { display: grid; place-items: center; min-width: 2rem; min-height: 2rem; margin-inline-start: auto; background: transparent; color: var(--color-muted); border-radius: var(--radius-xs); flex-shrink: 0; }
.copy-btn:hover, .endpoint-url__copy:hover { background: var(--color-paper-sunken); color: var(--color-accent); }
.doc-hero__format { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-block-start: var(--space-xs); color: var(--color-muted); font-size: var(--text-xs); }
.doc-start-links { display: grid; margin-block: var(--space-xl) var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-sm); }
.doc-start-links > a { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); padding: var(--space-lg); min-width: 0; }
.doc-start-links > a + a { border-block-start: 1px solid var(--color-rule); }
.doc-start-links > a:hover { background: var(--color-paper); }
.doc-start-links strong { display: block; font-weight: 600; font-size: var(--text-sm); white-space: nowrap; }
.doc-start-links small { display: block; color: var(--color-muted); font-size: var(--text-xs); margin-block-start: var(--space-2xs); }
.doc-start-links > a > span:last-child { color: var(--color-accent); }
.doc-note { border-inline-start: 2px solid var(--color-accent); padding: var(--space-xs) var(--space-md); background: var(--color-paper); color: var(--color-ink-soft); font-size: var(--text-sm); }
.doc-note summary { font-weight: 600; }
.doc-note summary span { display: none; margin-inline-start: var(--space-xs); color: var(--color-muted); font-size: var(--text-xs); font-weight: 400; }
.doc-note p { font-size: var(--text-sm); margin-block: var(--space-sm) var(--space-xs); }

/* Reference content uses a readable parameter column and a parallel code column. */
.endpoint-section { padding-block: var(--space-lg); scroll-margin-block-start: 0; min-width: 0; }
.endpoint-header { margin-block-end: var(--space-sm); }
.endpoint-header h2 { font-size: clamp(1.5rem, 1.3rem + .6vw, 2rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.2; }
.endpoint-description { max-width: 75ch; margin-block-end: var(--space-lg); color: var(--color-ink-soft); font-size: var(--text-base); }
.endpoint-url { display: flex; align-items: center; gap: var(--space-sm); margin-block: var(--space-lg); padding: var(--space-xs) var(--space-sm); border: 1px solid var(--color-rule); border-radius: var(--radius-sm); background: var(--color-paper); color: var(--color-ink); min-width: 0; }
.endpoint-url__method { font-size: var(--text-xs); }
.endpoint-url__path { min-width: 0; overflow-wrap: anywhere; font-family: var(--font-mono); font-size: .8125rem; }
.endpoint-url__path .param { color: var(--color-warm-ink); }
.endpoint-content, .auth-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); align-items: start; }
.endpoint-content > *, .auth-layout > * { min-width: 0; }
.panel { border: 1px solid var(--color-rule); border-radius: var(--radius-sm); background: var(--color-paper-raised); color: var(--color-ink); min-width: 0; }
.panel__header { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-block-end: 1px solid var(--color-rule); }
.panel__title { font-size: var(--text-sm); font-weight: 600; }
.panel__badge { margin-inline-start: auto; font: 400 .6875rem/1.6 var(--font-mono); color: var(--color-muted); }
.panel__body { padding-inline: var(--space-md); }
.param-row { padding-block: var(--space-md); border-block-end: 1px solid var(--color-rule-soft); }
.param-row:last-child { border: 0; }
.param-row__name { font: 500 .8125rem/1.7 var(--font-mono); color: var(--color-ink); overflow-wrap: anywhere; }
.param-row__meta { display: inline; margin-inline-start: var(--space-xs); }
.param-row__type { margin-inline-end: var(--space-xs); color: var(--color-muted); font-size: var(--text-xs); }
.param-row__required, .param-row__optional { font-size: .6875rem; font-weight: 500; }
.param-row__required { color: var(--color-halt); }
.param-row__optional { color: var(--color-muted); }
.param-row__desc { margin-block-start: var(--space-xs); color: var(--color-ink-soft); font-size: var(--text-sm); line-height: 1.65; overflow-wrap: anywhere; }
.param-group { margin-block-start: var(--space-md); padding-block: var(--space-sm); border-block-start: 1px solid var(--color-rule); }
.param-group__title { color: var(--color-muted); font-size: var(--text-xs); font-weight: 600; }

/* Copyable code, without imitation window chrome. */
.code-panel { border: 1px solid var(--docs-code-rule); border-radius: var(--radius-sm); background: var(--docs-code-bg); color: var(--docs-code-text); overflow: clip; min-width: 0; }
.code-panel__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); min-height: 2.75rem; padding: var(--space-xs) var(--space-md); border-block-end: 1px solid var(--docs-code-rule); background: var(--docs-code-header); color: var(--docs-code-text); }
.code-panel__label, .code-panel__tab { font: 500 var(--text-xs)/1.5 var(--font-body); }
.code-panel__tabs { display: flex; }
.code-panel__tab { color: var(--docs-code-text); background: transparent; cursor: default; }
.code-panel__actions { margin-inline-start: auto; }
.code-panel__copy { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 1.75rem; padding-inline: var(--space-xs); border: 1px solid var(--docs-code-rule); border-radius: var(--radius-xs); background: transparent; color: var(--docs-code-text); font-size: var(--text-xs); }
.code-panel__copy:hover { background: var(--docs-code-rule); }
.code-panel :focus-visible { outline-color: var(--docs-code-string); }
.code-panel__body { overflow: auto; max-height: 34rem; scrollbar-width: thin; scrollbar-color: var(--docs-code-rule) transparent; direction: ltr; }
.code-panel__body pre { margin: 0; padding: var(--space-lg); font: 400 .75rem/1.9 var(--font-mono); color: var(--docs-code-text); tab-size: 2; text-align: left; }
.code-panel__caption { padding: var(--space-sm) var(--space-md); border-block-start: 1px solid var(--docs-code-rule); color: var(--docs-code-muted); font-size: var(--text-xs); }
.token-key { color: var(--docs-code-key); }
.token-string, .token-url { color: var(--docs-code-string); }
.token-number, .token-bool { color: var(--docs-code-value); }
.token-null, .token-comment { color: var(--docs-code-muted); font-style: normal; }
.token-bracket { color: var(--docs-code-text); }
.response-section { margin-block-start: var(--space-xl); }
.response-section__title { display: flex; align-items: center; gap: var(--space-xs); margin-block-end: var(--space-sm); font-size: var(--text-sm); font-weight: 600; }
.response-section__title svg { color: var(--color-muted); }
.response-tabs { display: flex; gap: var(--space-xs); flex-wrap: wrap; margin-block-end: var(--space-md); }
.response-tab { padding: var(--space-xs) var(--space-sm); border: 1px solid var(--color-rule); border-radius: var(--radius-xs); background: var(--color-paper-raised); color: var(--color-ink-soft); font-size: var(--text-xs); }
.response-tab[aria-selected="true"] { border-color: var(--color-accent); background: var(--color-accent-wash); color: var(--color-accent); }
.response-label { font-size: var(--text-xs); color: var(--color-muted); }
.response-tab:hover { border-color: var(--color-rule-control); }
.response-section > .code-panel[role="tabpanel"] { margin-block-start: 0 !important; }
.status-badge { font: 500 .6875rem/1.5 var(--font-mono); color: var(--docs-code-text); }
.status-badge--200 { color: var(--docs-code-string); }
.status-badge--401, .status-badge--422 { color: var(--docs-code-value); }
.headers-section { margin-block-start: var(--space-lg); }
.headers-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.headers-table :is(th, td) { padding: var(--space-sm); border-block-end: 1px solid var(--color-rule); text-align: start; overflow-wrap: anywhere; }
.headers-table th { color: var(--color-muted); font-size: var(--text-xs); font-weight: 600; }
.headers-table td { color: var(--color-ink-soft); vertical-align: top; }
.headers-table td:first-child { font-family: var(--font-mono); font-size: var(--text-xs); }
.section-divider { border-block-start: 1px solid var(--color-rule); margin-block: var(--space-lg); }
.doc-alert { display: block; gap: var(--space-sm); margin-block: var(--space-md); padding: var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-xs); background: var(--color-paper); color: var(--color-ink-soft); font-size: var(--text-sm); overflow-wrap: anywhere; }
.doc-alert--info { border-inline-start: 3px solid var(--color-accent); }
.doc-alert--warning { border-color: var(--color-warn-line); background: var(--color-warn-wash); color: var(--color-ink-soft); }
.doc-alert--danger { border-color: var(--color-halt-line); background: var(--color-halt-wash); color: var(--color-ink-soft); }
.doc-alert__icon { width: 1rem; height: 1rem; flex-shrink: 0; margin-block-start: var(--space-2xs); }
.doc-alert:has(> .doc-alert__icon) { display: flex; align-items: flex-start; }
.doc-alert > div { min-width: 0; }
.doc-alert > strong { flex-shrink: 0; }

/* Authentication is a task guide, alongside one complete request. */
.auth-method { display: flex; align-items: start; gap: var(--space-md); padding-block: var(--space-lg); border-block-end: 1px solid var(--color-rule); }
.auth-method:first-child { padding-block-start: 0; }
.auth-method__number { flex-shrink: 0; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 1px solid var(--color-rule); border-radius: var(--radius-xs); color: var(--color-muted); font: 500 .6875rem/1 var(--font-mono); }
.auth-method h3, .auth-registration h3, .auth-headers h3 { font-size: var(--text-sm); font-weight: 600; letter-spacing: -.01em; }
.auth-method p, .auth-registration p { margin-block: var(--space-xs) var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-soft); }
.auth-method__detail { display: block; color: var(--color-muted); font-size: var(--text-xs); }
.doc-text-link { font-size: var(--text-xs); font-weight: 600; color: var(--color-accent); }
.doc-text-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.auth-registration { margin-block-start: var(--space-lg); padding: var(--space-md); border-radius: var(--radius-sm); background: var(--color-paper); color: var(--color-ink); }
.auth-registration__heading { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-sm); justify-content: space-between; align-items: center; }
.doc-access-label { font-size: .6875rem; color: var(--color-muted); }
.auth-headers { margin-block-start: var(--space-lg); }
.auth-headers dl { margin: var(--space-xs) 0 0; }
.auth-headers dl > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--space-md); padding-block: var(--space-sm); border-block-end: 1px solid var(--color-rule); }
.auth-headers dt { font: 500 .75rem/1.7 var(--font-mono); overflow-wrap: anywhere; }
.auth-headers dd { margin: 0; font-size: var(--text-sm); }
.auth-headers dd span { display: block; margin-block-start: var(--space-2xs); color: var(--color-muted); font-size: var(--text-xs); }
.copy-feedback { position: fixed; inset-block-end: var(--space-lg); inset-inline-end: var(--space-md); max-width: calc(100% - var(--space-lg)); padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-sm); background: var(--color-ink); color: var(--color-paper-raised); z-index: var(--z-toast); font-size: var(--text-sm); opacity: 0; pointer-events: none; transition: opacity var(--dur-short) var(--ease-out); }
.copy-feedback.show { opacity: 1; }
.dcf { border-radius: var(--radius-sm); }
.dcf__link { white-space: nowrap; }

@media (min-width: 40rem) {
    .doc-header__inner { padding-inline: var(--space-lg); }
    .doc-header__logo-img { width: 8.5rem; }
    .doc-header__btn { font-size: var(--text-sm); padding-inline: var(--space-md); }
    .doc-main__inner { padding: var(--space-xl) var(--space-xl) var(--space-2xl); }
    .doc-start-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .doc-start-links > a + a { border-block-start: 0; border-inline-start: 1px solid var(--color-rule); }
    .doc-note summary span { display: inline; }
    .doc-hero__url-box code { font-size: .75rem; }
}
@media (min-width: 60rem) {
    .hamburger { display: none; }
    .doc-header__identity { min-width: calc(var(--sidebar-width) - var(--space-md)); }
    .doc-header__nav { display: flex; }
    .doc-sidebar { visibility: visible; transform: none !important; }
    .sidebar-overlay { display: none !important; }
    .doc-main { margin-inline-start: var(--sidebar-width); }
    body.doc-navigation-open { overflow-y: auto; }
    .doc-main__inner { padding-inline: var(--space-xl); }
    .endpoint-content, .auth-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .auth-layout { gap: var(--space-xl); }
    .endpoint-section { padding-block: var(--space-xl); }
}
@media (min-width: 80rem) {
    .doc-header__identity { min-width: calc(var(--sidebar-width) - var(--space-xs)); }
    .doc-header__label { display: block; }
    .doc-header__nav { margin-inline-start: var(--space-xl); }
    .doc-main__inner { padding-inline: var(--space-xl); }
    .doc-hero__heading { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-xl); }
}
@media (pointer: coarse) {
    .sidebar-nav__link, .response-tab, .code-panel__copy, .copy-btn, .endpoint-url__copy { min-height: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0ms !important; }
}
@media print {
    .doc-header, .doc-sidebar, .sidebar-overlay, .copy-feedback, .copy-btn, .code-panel__copy, .endpoint-url__copy, .response-tabs { display: none !important; }
    .doc-layout { padding: 0; }
    .doc-main { margin: 0; }
    .code-panel[hidden] { display: block !important; }
    .code-panel__body { max-height: none; }
    .code-panel__body pre { white-space: pre-wrap; overflow-wrap: anywhere; }
}

/* One shared reference, with an explicit version selection. */
.doc-version-switch { display: flex; flex: none; padding: 3px; border: 1px solid var(--color-rule); border-radius: 8px; gap: 2px; margin-inline-start: auto; }
.doc-version-switch a { padding: 5px 12px; border-radius: 5px; color: var(--color-muted); font-size: 13px; font-weight: 650; text-decoration: none; }
.doc-version-switch a[aria-current="page"] { background: var(--color-accent); color: var(--color-accent-ink); }
.doc-endpoint-auth { color: var(--color-ink-soft); font-size: 13px; margin: 14px 0 20px; }
.doc-endpoint-auth strong { color: var(--color-ink); margin-inline-end: 8px; }
.doc-contract-note { font-size: 14px; line-height: 1.7; max-width: 85ch; margin: 8px 0; color: var(--color-ink-soft); }
.doc-fields { margin: 0; }
.doc-field { padding: 16px 20px; border-bottom: 1px solid var(--color-rule); }
.doc-field:last-child { border-bottom: 0; }
.doc-field dt { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.doc-field dt code { font-size: 13px; overflow-wrap: anywhere; }
.doc-field__requirement { margin-inline-start: auto; font-size: 11px; color: var(--color-muted); }
.doc-field dd { margin: 6px 0 0; font-size: 13px; line-height: 1.7; color: var(--color-ink-soft); }
.doc-field__type { display: block; font-size: 11px; color: var(--color-muted); margin-bottom: 3px; }
.doc-request-example { min-width: 0; }
.doc-response-contract { padding: 20px 24px; background: var(--color-paper-sunken); border: 1px solid var(--color-rule); border-radius: 8px; margin-top: 24px; }
.doc-response-contract h3 { font-size: 14px; margin: 0 0 8px; }
.doc-response-contract p { font-size: 14px; line-height: 1.8; margin: 0; overflow-wrap: anywhere; }
.doc-reference-details p, .doc-reference-details li { max-width: 88ch; font-size: 14px; line-height: 1.8; }
.doc-reference-details h3 { margin-top: 24px; font-size: 17px; }
@media (max-width: 39.999rem) {
    .doc-header__label { display: none; }
    .doc-header__inner { gap: 8px; }
    .doc-header__identity { flex-shrink: 0; }
    .doc-header__btn { display: none; }
    .doc-version-switch { margin-inline-start: auto; }
    .doc-version-switch a { padding: 9px 12px; min-height: 44px; }
    .doc-field { padding: 14px; }
    /* Response samples sit in a padded panel inside the padded page; on a
       phone the two insets plus the code's own left a 270px column for
       JSON nested three levels deep. */
    .doc-response-contract { padding: 16px 12px; }
    .code-panel__body pre { padding: var(--space-md); }
    /* The note's disclosure row was a 23px-tall tap target. */
    .doc-note summary { padding-block: var(--space-xs); }
    /* Opening the menu focuses the endpoint search. At 14px iOS zooms the
       page in to type, and the shared 4px-offset focus ring drew a second
       rounded box round the field's own border. 16px, and the ring lies on
       the border instead. */
    .sidebar-search__input { font-size: 1rem; }
    .sidebar-search__input:focus-visible { outline-offset: -1px; }
}

/*
 * Sideways scrollers say that they scroll, as the landing page's strips do.
 * On a phone a code sample or a migration table is wider than the screen and
 * scrolls inside its box with no sign that it can: lines and cells stopped
 * mid-word at the edge and read as cut off. The edge with more beyond it
 * fades, driven by the box's own scroll position; where everything fits the
 * timeline is inactive and nothing applies. Code panels keep their ground on
 * the panel, so the fade reveals the panel, not the page.
 */
@property --doc-fade-start { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --doc-fade-end { syntax: "<length>"; inherits: false; initial-value: 0px; }
@keyframes doc-scroll-fade {
    0%   { --doc-fade-start: 0px;  --doc-fade-end: 32px; }
    10%  { --doc-fade-start: 32px; }
    90%  { --doc-fade-end: 32px; }
    100% { --doc-fade-start: 32px; --doc-fade-end: 0px; }
}
@supports (animation-timeline: scroll()) {
    @media (max-width: 39.999rem) {
        .code-panel__body, .doc-migration table {
            -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--doc-fade-start), #000 calc(100% - var(--doc-fade-end)), transparent);
            mask-image: linear-gradient(to right, transparent, #000 var(--doc-fade-start), #000 calc(100% - var(--doc-fade-end)), transparent);
            animation: doc-scroll-fade linear both;
            animation-timeline: scroll(self inline);
        }
    }
}

/* Response samples share the request editor palette. */
.doc-response-example { margin: 16px 0; }
.doc-response-example .code-panel__body { max-height: 34rem; overflow: auto; }
.syntax-key { color: var(--docs-code-key); }
.syntax-string { color: var(--docs-code-string); }
.syntax-number { color: var(--docs-code-value); }
.syntax-literal { color: oklch(82% .10 305); }
.doc-auth-options { list-style: none; padding: 0; display: grid; gap: 10px; margin: 12px 0; }
.doc-auth-options li { padding: 12px 16px; border-inline-start: 3px solid var(--color-accent); background: var(--color-accent-wash); }
.doc-auth-options strong { display: block; margin-bottom: 3px; }
.doc-response-contract .doc-response-note { font-size: 13px; color: var(--color-ink-soft); margin: 12px 0 0; }