/* Public pages on the API host (/, /features, /docs, /changelog, /health, /reference, OAuth popup).
   Load order: tokens.css → components.css (the Design System's erix- classes) → this file.
   Only page layout lives here; colours, type and components come from the design system (v8). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--surface-subtle); color: var(--ink); font: 400 14px/20px var(--font-sans); }
img, svg { max-width: 100%; }
a { color: var(--primary); text-underline-offset: 3px; text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-xs); }
:where(body:not(.reference)) :where(h1, h2, h3, h4, p) { margin: 0; }
code, kbd { font-family: var(--font-mono); font-size: 0.92em; }
:where(body:not(.reference)) :not(pre) > code { background: var(--surface-sunken); border-radius: var(--radius-xs); padding: 1px 5px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--space-lg); top: -48px; z-index: var(--z-toast); background: var(--primary); color: var(--on-primary); padding: var(--space-md) var(--space-lg); border-radius: var(--radius-md); }
.skip:focus { top: var(--space-lg); }
.muted { color: var(--ink-muted); }
.num { font-variant-numeric: tabular-nums; }
/* The page uses each card as one padded body (bundle.css pads __head/__body instead). */
.erix-card { padding: var(--card-pad); }
.erix-card--flush { padding: 0; }
/* Public tables carry prose: let cells wrap. */
.erix-table td { white-space: normal; }

/* ---------- Top bar: brand, nav as underline tabs, theme ---------- */
.site-top { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--surface-raised); border-bottom: 1px solid var(--border-soft); }
.site-top__in { max-width: calc(var(--content-max) + 64px); margin: 0 auto; padding: 0 32px; min-height: var(--topbar-height); display: flex; align-items: center; gap: var(--space-2xl); }
.site-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font: 700 17px/1 var(--font-display); letter-spacing: -0.01em; }
.site-brand:hover { text-decoration: none; }
.site-brand img { display: block; height: 26px; width: auto; padding: 3px 5px; border-radius: var(--radius-sm); background: var(--logo-plate); }
.site-brand small { font: 600 12px/16px var(--font-sans); color: var(--ink-subtle); letter-spacing: 0; }
.site-nav { position: relative; display: flex; align-self: stretch; gap: 22px; margin-left: auto; }
.site-nav a { position: relative; display: inline-flex; align-items: center; padding: 0 1px; color: var(--ink-muted); font: 600 13.5px/1 var(--font-sans); white-space: nowrap; transition: color .12s ease-out; }
.site-nav a:hover { color: var(--ink); text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--ink); }
.site-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: var(--primary); }
.site-nav a:focus-visible { outline-offset: -2px; }
.site-top .erix-iconbtn { flex: none; }
@media (max-width: 720px) {
  .site-top__in { flex-wrap: wrap; padding: 0 var(--space-xl); gap: 0 var(--space-md); }
  .site-top .erix-iconbtn { margin-left: auto; }
  /* One scrollable row of 44px tabs under the brand. */
  .site-nav { order: 3; margin: 0 calc(-1 * var(--space-xl)); padding: 0 var(--space-xl); width: calc(100% + 2 * var(--space-xl)); height: 44px; overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--border-soft); }
  .site-nav::-webkit-scrollbar { display: none; }
}

/* ---------- Page ---------- */
.page { max-width: calc(var(--content-max) + 64px); margin: 0 auto; padding: 28px 32px var(--space-4xl); }
.section { margin-top: var(--space-3xl); }
.section__eyebrow { font: 600 12.5px/16px var(--font-sans); color: var(--ink-subtle); margin-bottom: var(--space-sm); }
.section__eyebrow--ai { color: var(--accent); }
.section__title { font: 650 22px/28px var(--font-sans); letter-spacing: -0.01em; margin-bottom: var(--space-sm); }
.section__lead { font: 400 16px/24px var(--font-sans); color: var(--ink-muted); max-width: 640px; }
.section__head { margin-bottom: var(--space-xl); }
.t-h1 + .section__lead { margin-top: var(--space-sm); }
.stack { display: flex; flex-direction: column; gap: var(--space-md); }
.row { display: flex; gap: var(--space-md); flex-wrap: wrap; align-items: center; }
.grid { display: grid; gap: var(--space-xl); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .page { padding: var(--space-2xl) var(--space-xl) var(--space-3xl); }
  .erix-card { padding: var(--space-xl); }
  .erix-card--flush { padding: 0; }
}
/* Several items in one card: grouped by space, not by a card each. */
.erix-card.grid { gap: var(--space-2xl) var(--space-xl); }

/* ---------- Hero: the design system Banner at page scale ---------- */
.hero.erix-banner { padding: var(--space-3xl); min-height: 0; align-items: flex-end; }
.hero .erix-banner__title { font: 700 48px/52px var(--font-display); letter-spacing: -0.02em; max-width: 720px; }
.hero .erix-banner__text { font: 400 16px/24px var(--font-sans); max-width: 600px; margin-top: var(--space-md); }
.hero .erix-banner__actions { margin-right: 0; flex-wrap: wrap; }
.hero > .erix-banner__motif { width: 340px; height: 163px; right: -14px; bottom: auto; top: 0; }
@media (max-width: 720px) {
  .hero.erix-banner { padding: var(--space-2xl) var(--space-xl); }
  .hero .erix-banner__title { font-size: 32px; line-height: 38px; }
}

/* ---------- Feature tile: chip + title + text ---------- */
.feature { display: flex; flex-direction: column; gap: var(--space-md); height: 100%; }
.feature > .erix-chip { margin-bottom: var(--space-xs); }
.feature__title { font: 600 15px/22px var(--font-sans); letter-spacing: -0.005em; }
.feature__text { color: var(--ink-muted); }
.ticks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-sm); }
.ticks li { display: flex; gap: var(--space-md); align-items: flex-start; color: var(--ink-muted); }
.ticks li > .erix-icon { color: var(--success); margin-top: 2px; --icon-duo: 0; }
.ticks--icons li > .erix-icon { color: var(--primary); --icon-duo: var(--icon-tint); }
.ticks--grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg); }
@media (max-width: 900px) { .ticks--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ticks--grid { grid-template-columns: minmax(0, 1fr); } }
.ticks strong { color: var(--ink); font-weight: 600; }

/* ---------- Steps (how it works) ---------- */
.step__n { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: var(--radius-full); background: var(--primary); color: var(--on-primary); font: 700 12px/1 var(--font-sans); box-shadow: var(--shadow-btn); }

/* ---------- Code: a recessed well (surface-sunken), mono 13/20 ---------- */
.code { background: var(--surface-sunken); color: var(--ink); border-radius: var(--radius-lg); overflow: hidden; }
.code__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 40px; padding: 4px 6px 4px var(--space-lg); border-bottom: 1px solid var(--border-soft); font: 600 12.5px/16px var(--font-sans); color: var(--ink-muted); }
.code pre { margin: 0; padding: var(--space-lg); overflow-x: auto; font: 400 13px/20px var(--font-mono); }
.code__head .erix-btn { background: transparent; color: var(--ink-muted); }
.code__head .erix-btn:hover:not(:disabled) { background: var(--surface-raised); color: var(--ink); }
.tok-k { color: var(--primary); } .tok-s { color: var(--success); } .tok-c { color: var(--ink-subtle); } .tok-n { color: var(--orange); }

/* ---------- Method badges (docs, status) ---------- */
.method { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 52px; height: 22px; padding: 0 var(--space-sm); border-radius: var(--radius-sm); font: 700 11px/1 var(--font-mono); }
.method--get { background: var(--primary-subtle); color: var(--primary); }
.method--post { background: var(--success-subtle); color: var(--success); }
.method--patch, .method--put { background: var(--warning-subtle); color: var(--warning); }
.method--delete { background: var(--danger-subtle); color: var(--danger); }
.method--any, .method--job { background: var(--surface-sunken); color: var(--ink-muted); }

/* ---------- Timeline (changelog) ---------- */
.release { position: relative; padding-left: var(--space-2xl); padding-bottom: var(--space-2xl); }
.release:last-child { padding-bottom: 0; }
.release:not(:last-child)::after { content: ""; position: absolute; left: 4px; top: 22px; bottom: 4px; width: 1.5px; border-radius: 1px; background: var(--border); }
.release::before { content: ""; position: absolute; left: 0; top: 7px; width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--primary); box-shadow: 0 0 0 3px var(--primary-subtle); }
.release__head { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-md); }
.release__v { font: 650 17px/24px var(--font-sans); letter-spacing: -0.01em; }
.release__date { font: 500 12.5px/16px var(--font-sans); color: var(--ink-subtle); }

/* ---------- Footer ---------- */
.site-foot { border-top: 1px solid var(--border-soft); background: var(--surface-raised); }
.site-foot__in { max-width: calc(var(--content-max) + 64px); margin: 0 auto; padding: var(--space-xl) 32px; display: flex; gap: var(--space-lg); flex-wrap: wrap; align-items: center; justify-content: space-between; color: var(--ink-subtle); font: 500 12.5px/16px var(--font-sans); }
.site-foot nav { display: flex; gap: var(--space-xs) var(--space-lg); flex-wrap: wrap; }
.site-foot a { color: var(--ink-muted); display: inline-flex; align-items: center; min-height: 24px; }
.site-foot a:hover { color: var(--primary); }
@media (max-width: 720px) { .site-foot__in { padding: var(--space-xl); } }
@media (pointer: coarse) { .site-foot a { min-height: 44px; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---------- /reference (Redoc, themed in reference.js) ---------- */
body.reference { background: var(--surface); }
.reference__loading { max-width: calc(var(--content-max) + 64px); margin: 0 auto; padding: var(--space-3xl) 32px; color: var(--ink-muted); }
body.reference .redoc-wrap { border-top: 0; }
body.reference h1, body.reference h2 { letter-spacing: -0.01em; }
/* Bricolage only for the page title (the API name); Redoc uses the sans for every other heading. */
body.reference .api-info h1 { font-family: var(--font-display); }
/* Redoc hard-codes these label colours; take them from the tokens so dark mode reads. */
body.reference .api-content h5 { color: var(--ink-muted); }
body.reference .api-content h5 span { color: var(--ink); }
body.reference button.collapser { background: transparent; color: inherit; border: 0; }
body.reference [role="search"] input, body.reference .search-input { font-family: var(--font-sans); color: var(--ink); }
/* Redoc's "API docs by Redocly" footer pulls a logo from its CDN; the CSP allows no extra hosts. */
body.reference a[href*="redocly.com"] { display: none; }