/* Norvya developer portal (norvya.health/developers). Shared by every generated page. Tokens first; dark mode by media query unless the
   viewer chose a theme (data-theme on <html>). All text pairs checked for WCAG AA. */
:root {
  --bg: #FFFFFF; --surface: #F8FAFC; --surface-2: #F1F5F9; --text: #0F172A; --muted: #475569;
  --border: #E2E8F0; --border-strong: #CBD5E1; --accent: #4338CA; --accent-hover: #3730A3;
  --accent-weak: #EEF2FF; --on-accent: #FFFFFF; --focus: #4338CA;
  --live-bg: #D1FAE5; --live-fg: #065F46; --gated-bg: #FEF3C7; --gated-fg: #92400E;
  --planned-bg: #E2E8F0; --planned-fg: #334155; --new-bg: #E0E7FF; --new-fg: #3730A3;
  --get-bg: #D1FAE5; --get-fg: #065F46; --post-bg: #E0E7FF; --post-fg: #3730A3;
  --del-bg: #FEE2E2; --del-fg: #991B1B; --put-bg: #FEF3C7; --put-fg: #92400E;
  --code-bg: #0F172A; --code-fg: #E2E8F0; --code-muted: #94A3B8; --code-border: #1E293B;
  --warn-bg: #FFFBEB; --warn-border: #FDE68A; --warn-fg: #78350F;
  --note-bg: #F0FDF4; --note-border: #BBF7D0; --note-fg: #14532D;
  --shadow: 0 1px 2px rgba(15,23,42,.06), 0 4px 16px rgba(15,23,42,.06);
  --radius: 12px; --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B1020; --surface: #111827; --surface-2: #1A2233; --text: #E5E7EB; --muted: #A1A9B8;
    --border: #243042; --border-strong: #334155; --accent: #A5B4FC; --accent-hover: #C7D2FE;
    --accent-weak: #1E1B4B; --on-accent: #0B1020; --focus: #A5B4FC;
    --live-bg: #064E3B; --live-fg: #A7F3D0; --gated-bg: #78350F; --gated-fg: #FDE68A;
    --planned-bg: #334155; --planned-fg: #E2E8F0; --new-bg: #312E81; --new-fg: #E0E7FF;
    --get-bg: #064E3B; --get-fg: #A7F3D0; --post-bg: #312E81; --post-fg: #E0E7FF;
    --del-bg: #7F1D1D; --del-fg: #FECACA; --put-bg: #78350F; --put-fg: #FDE68A;
    --code-bg: #060A14; --code-border: #1E293B;
    --warn-bg: #2A1F06; --warn-border: #78350F; --warn-fg: #FDE68A;
    --note-bg: #052E1B; --note-border: #065F46; --note-fg: #A7F3D0;
    --shadow: 0 1px 2px rgba(0,0,0,.4); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0B1020; --surface: #111827; --surface-2: #1A2233; --text: #E5E7EB; --muted: #A1A9B8;
  --border: #243042; --border-strong: #334155; --accent: #A5B4FC; --accent-hover: #C7D2FE;
  --accent-weak: #1E1B4B; --on-accent: #0B1020; --focus: #A5B4FC;
  --live-bg: #064E3B; --live-fg: #A7F3D0; --gated-bg: #78350F; --gated-fg: #FDE68A;
  --planned-bg: #334155; --planned-fg: #E2E8F0; --new-bg: #312E81; --new-fg: #E0E7FF;
  --get-bg: #064E3B; --get-fg: #A7F3D0; --post-bg: #312E81; --post-fg: #E0E7FF;
  --del-bg: #7F1D1D; --del-fg: #FECACA; --put-bg: #78350F; --put-fg: #FDE68A;
  --code-bg: #060A14; --code-border: #1E293B;
  --warn-bg: #2A1F06; --warn-border: #78350F; --warn-fg: #FDE68A;
  --note-bg: #052E1B; --note-border: #065F46; --note-fg: #A7F3D0;
  --shadow: 0 1px 2px rgba(0,0,0,.4); color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--sans); background: var(--bg); color: var(--text); line-height: 1.6; font-size: 16px;
       overflow-x: hidden; }
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
code, pre { font-family: var(--mono); }
p code, li code, td code, dd code { font-size: .86em; background: var(--surface-2); border: 1px solid var(--border);
  padding: 1px 5px; border-radius: 5px; overflow-wrap: anywhere; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--accent); color: var(--on-accent);
        padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── header ── */
.top { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 92%, transparent);
       backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
.top-in { max-width: 1440px; margin: 0 auto; display: flex; align-items: center; gap: 20px; padding: 10px 24px; min-height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 700; white-space: nowrap; }
.brand-mark { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg, #4F46E5, #06B6D4); flex: none; }
.brand small { font-weight: 500; color: var(--muted); font-size: .9rem; }
.mainnav { display: flex; gap: 4px; list-style: none; }
.mainnav a { display: block; padding: 8px 12px; border-radius: 8px; color: var(--muted); text-decoration: none; font-size: .94rem; font-weight: 500; }
.mainnav a:hover { color: var(--text); background: var(--surface-2); }
.mainnav a[aria-current="page"] { color: var(--text); background: var(--surface-2); }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.search-btn { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; min-width: 220px;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--muted); border-radius: 10px; font: inherit; font-size: .9rem; cursor: pointer; }
.search-btn kbd, .kbd { font-family: var(--mono); font-size: .75rem; border: 1px solid var(--border-strong); border-radius: 5px; padding: 0 5px; margin-left: auto; color: var(--muted); }
.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text); border-radius: 10px; cursor: pointer; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 10px;
  font: inherit; font-weight: 600; font-size: .95rem; text-decoration: none; cursor: pointer; border: 1px solid transparent; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); color: var(--on-accent); }
.btn-ghost { border-color: var(--border-strong); color: var(--text); background: var(--bg); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-sm { min-height: 40px; padding: 0 14px; font-size: .9rem; }
.menu-btn { display: none; }

/* ── generic layout ── */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.section { padding: 56px 0; }
.section + .section { border-top: 1px solid var(--border); }
.eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
h1 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); line-height: 1.15; letter-spacing: -.02em; }
h2 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.25; letter-spacing: -.01em; }
h3 { font-size: 1.08rem; line-height: 1.35; }
.lede { font-size: 1.12rem; color: var(--muted); max-width: 68ch; margin-top: 14px; }
.muted { color: var(--muted); }
.small { font-size: .88rem; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); padding: 20px; box-shadow: var(--shadow); }
a.card { display: block; color: var(--text); text-decoration: none; transition: border-color .15s; }
a.card:hover { border-color: var(--accent); color: var(--text); }
.card h3 { margin-bottom: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card p { color: var(--muted); font-size: .94rem; }
.card .meta { margin-top: 12px; font-size: .82rem; color: var(--muted); display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.sec-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.sec-head p { color: var(--muted); max-width: 64ch; margin-top: 6px; }

/* ── badges ── */
.st { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; line-height: 1.6; }
.st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st-live { background: var(--live-bg); color: var(--live-fg); }
.st-gated { background: var(--gated-bg); color: var(--gated-fg); }
.st-planned { background: var(--planned-bg); color: var(--planned-fg); }
.st-new { background: var(--new-bg); color: var(--new-fg); }
.verb { display: inline-block; font-family: var(--mono); font-size: .72rem; font-weight: 700; padding: 2px 7px; border-radius: 6px; min-width: 52px; text-align: center; }
.v-get { background: var(--get-bg); color: var(--get-fg); } .v-post { background: var(--post-bg); color: var(--post-fg); }
.v-delete { background: var(--del-bg); color: var(--del-fg); } .v-put, .v-patch { background: var(--put-bg); color: var(--put-fg); }
.scope { font-family: var(--mono); font-size: .78rem; color: var(--muted); border: 1px dashed var(--border-strong); padding: 1px 7px; border-radius: 6px; overflow-wrap: anywhere; }

/* ── hero ── */
.hero { padding: 72px 0 56px; background: radial-gradient(900px 400px at 85% -10%, var(--accent-weak), transparent 70%); }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.hero-facts { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 28px; font-size: .9rem; color: var(--muted); }
.hero-facts b { color: var(--text); }
.term { background: var(--code-bg); color: var(--code-fg); border-radius: var(--radius); border: 1px solid var(--code-border); overflow: hidden; box-shadow: var(--shadow); min-width: 0; }
.term-head { display: flex; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--code-border); align-items: center; }
.term-head i { width: 10px; height: 10px; border-radius: 50%; background: #334155; display: block; }
.term-head span { margin-left: 8px; font-size: .78rem; color: var(--code-muted); font-family: var(--mono); }
.term pre { padding: 16px; font-size: .8rem; line-height: 1.65; overflow-x: auto; }
.c-k { color: #C4B5FD; } .c-s { color: #86EFAC; } .c-c { color: #94A3B8; } .c-n { color: #FDBA74; }

/* path cards on landing */
.paths .card { padding: 24px; }
.paths .num { width: 32px; height: 32px; border-radius: 9px; background: var(--accent-weak); color: var(--accent); display: grid; place-items: center; font-weight: 700; margin-bottom: 14px; }
.fam-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); }
.fam { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; color: var(--text); text-decoration: none; background: var(--bg); }
.fam:hover { border-color: var(--accent); color: var(--text); }
.fam-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-weight: 600; }
.fam span.cnt { font-size: .8rem; color: var(--muted); }
.group-label { font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin: 26px 0 10px; }
.trust-row { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.trust-row .card h3 { font-size: 1rem; }
.changelog-list { list-style: none; border-left: 2px solid var(--border); padding-left: 20px; }
.changelog-list li { position: relative; padding: 0 0 18px; }
.changelog-list li::before { content: ""; position: absolute; left: -27px; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); }
.changelog-list time { font-size: .8rem; color: var(--muted); font-family: var(--mono); }
.callout { border: 1px solid var(--warn-border); background: var(--warn-bg); color: var(--warn-fg); border-radius: 10px; padding: 12px 14px; font-size: .92rem; }
.callout.ok { border-color: var(--note-border); background: var(--note-bg); color: var(--note-fg); }
.callout b { color: inherit; }

/* ── docs layout (reference, guides, solutions) ── */
.docs { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 272px minmax(0, 1fr); }
.sidenav { position: sticky; top: 61px; align-self: start; height: calc(100vh - 61px); overflow-y: auto; border-right: 1px solid var(--border); padding: 20px 14px 40px 20px; font-size: .9rem; }
.sidenav h2 { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 20px 8px 6px; }
.sidenav h2:first-child { margin-top: 0; }
.sidenav ul { list-style: none; }
.sidenav a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 7px; color: var(--text); text-decoration: none; min-height: 32px; }
.sidenav a:hover { background: var(--surface-2); }
.sidenav a[aria-current="page"], .sidenav a.active { background: var(--accent-weak); color: var(--accent); font-weight: 600; }
.sidenav .sub { margin: 2px 0 8px 8px; border-left: 1px solid var(--border); padding-left: 6px; }
.sidenav .sub a { font-size: .82rem; justify-content: flex-start; color: var(--muted); padding: 4px 8px; min-height: 28px; }
.sidenav .sub a .verb { min-width: 42px; font-size: .62rem; padding: 1px 4px; }
.sidenav .sub a span.lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidenav .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot-live { background: var(--live-fg); } .dot-gated { background: #D97706; } .dot-planned { background: var(--border-strong); }
.sidenav .legend { margin: 22px 8px 0; font-size: .76rem; color: var(--muted); display: grid; gap: 4px; }
.sidenav .legend span { display: flex; gap: 6px; align-items: center; }
.docs-main { min-width: 0; padding: 32px 40px 80px; }
.crumbs { font-size: .84rem; color: var(--muted); margin-bottom: 14px; display: flex; gap: 6px; flex-wrap: wrap; }
.crumbs a { color: var(--muted); }
.page-head { max-width: 860px; }
.page-head .tags { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 0; align-items: center; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; margin: 22px 0; max-width: 980px; }
.facts div { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: var(--surface); }
.facts dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.facts dd { margin-top: 4px; font-size: .92rem; }
.prose { max-width: 76ch; }
.prose p, .prose li { color: var(--text); }
.prose p + p { margin-top: 10px; }
.prose ul { padding-left: 20px; margin: 8px 0; }
.prose h2 { margin: 36px 0 10px; }
.prose h3 { margin: 22px 0 6px; }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; margin: 10px 0; }
.table-wrap table th:first-child, .table-wrap table td:first-child { padding-left: 14px; }

/* endpoint: two columns (docs | code) at wide widths */
.op { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 36px; padding: 40px 0; border-top: 1px solid var(--border); scroll-margin-top: 72px; }
.op-doc { min-width: 0; }
.op-line { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 10px 0 14px; }
.op-path { font-family: var(--mono); font-size: .92rem; font-weight: 600; overflow-wrap: anywhere; }
.op-doc h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 22px 0 6px; }
.op-doc > p { max-width: 72ch; }
.field { padding: 10px 0; border-bottom: 1px solid var(--border); }
.field:last-child { border-bottom: 0; }
.field-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.field-name { font-family: var(--mono); font-weight: 600; font-size: .88rem; }
.field-type { font-family: var(--mono); font-size: .78rem; color: var(--muted); }
.req { font-size: .7rem; font-weight: 700; color: var(--del-fg); background: var(--del-bg); padding: 0 6px; border-radius: 5px; }
.field p { font-size: .88rem; color: var(--muted); margin-top: 2px; }
.enum { font-size: .8rem; color: var(--muted); margin-top: 4px; display: flex; gap: 4px; flex-wrap: wrap; }
.enum code { font-size: .76rem; }
.errs { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: .86rem; }
.errs code { justify-self: start; }
.op-code { min-width: 0; position: sticky; top: 76px; align-self: start; display: grid; gap: 14px; }
.codebox { background: var(--code-bg); border: 1px solid var(--code-border); border-radius: var(--radius); overflow: hidden; color: var(--code-fg); }
.codebox-head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--code-border); padding: 0 6px 0 4px; gap: 6px; }
.tabs { display: flex; gap: 2px; overflow-x: auto; }
.tab { background: none; border: 0; color: var(--code-muted); font: inherit; font-size: .8rem; padding: 10px 10px; cursor: pointer; border-bottom: 2px solid transparent; min-height: 40px; white-space: nowrap; }
.tab[aria-selected="true"] { color: #FFFFFF; border-bottom-color: #A5B4FC; }
.tab:focus-visible { outline-color: #A5B4FC; }
.copy { background: none; border: 1px solid var(--code-border); color: var(--code-fg); border-radius: 7px; font: inherit; font-size: .76rem; padding: 4px 10px; cursor: pointer; min-height: 32px; min-width: 56px; }
.copy:focus-visible { outline-color: #A5B4FC; }
.codebox pre { padding: 14px 16px; font-size: .78rem; line-height: 1.6; overflow-x: auto; max-height: 420px; }
.codebox .label { font-size: .76rem; color: var(--code-muted); padding: 10px 12px; font-family: var(--mono); }

/* solutions */
.sol-flow { counter-reset: s; display: grid; gap: 12px; }
.sol-step { display: grid; grid-template-columns: 36px 1fr; gap: 14px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); }
.sol-step::before { counter-increment: s; content: counter(s); width: 32px; height: 32px; border-radius: 9px; background: var(--accent-weak); color: var(--accent); font-weight: 700; display: grid; place-items: center; }
.sol-step h3 { margin-bottom: 4px; }
.sol-step p { color: var(--muted); font-size: .94rem; }
.ep-list { list-style: none; margin-top: 10px; display: grid; gap: 6px; }
.ep-list li { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: .86rem; }
.ep-list code { background: none; border: 0; padding: 0; font-weight: 600; }
.ep-list .why { color: var(--muted); flex-basis: 100%; padding-left: 60px; font-size: .84rem; }
.spec-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; scroll-margin-top: 76px; }
.spec-card h3 { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 1.1rem; }
.spec-card dl { display: grid; grid-template-columns: 130px 1fr; gap: 6px 14px; margin-top: 12px; font-size: .9rem; }
.spec-card dt { color: var(--muted); font-weight: 600; font-size: .82rem; padding-top: 2px; }
.chip-nav { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 8px; }
.chip-nav a { border: 1px solid var(--border-strong); border-radius: 999px; padding: 6px 12px; font-size: .86rem; text-decoration: none; color: var(--text); min-height: 36px; display: inline-flex; align-items: center; gap: 6px; }
.chip-nav a:hover { border-color: var(--accent); }

/* search dialog */
dialog.search { border: 1px solid var(--border-strong); border-radius: 14px; padding: 0; width: min(680px, calc(100vw - 32px)); margin: 10vh auto auto;
  background: var(--bg); color: var(--text); box-shadow: 0 20px 60px rgba(0,0,0,.3); }
dialog.search::backdrop { background: rgba(15,23,42,.5); }
.search-in { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--border); padding: 0 14px; }
.search-in input { flex: 1; border: 0; background: none; font: inherit; font-size: 1rem; padding: 16px 0; color: var(--text); min-width: 0; }
.search-in input:focus { outline: none; }
.search-in:focus-within { box-shadow: inset 0 -2px 0 var(--focus); }
.results { list-style: none; max-height: 56vh; overflow-y: auto; padding: 6px; }
.results a { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding: 10px 12px; border-radius: 9px; color: var(--text); text-decoration: none; }
.results a:hover, .results a[aria-selected="true"] { background: var(--accent-weak); }
.results .r-kind { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; padding-top: 3px; min-width: 64px; }
.results .r-t { font-weight: 600; font-size: .92rem; overflow-wrap: anywhere; }
.results .r-s { grid-column: 2; font-size: .8rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-foot { border-top: 1px solid var(--border); padding: 8px 14px; font-size: .76rem; color: var(--muted); display: flex; gap: 14px; flex-wrap: wrap; }

footer.foot { border-top: 1px solid var(--border); padding: 36px 0; font-size: .88rem; color: var(--muted); }
.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 20px; }
.foot h2 { font-size: .76rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text); margin-bottom: 8px; }
.foot ul { list-style: none; display: grid; gap: 6px; }
.foot a { color: var(--muted); }

/* ── responsive ── */
@media (max-width: 1200px) {
  .op { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .op-code { position: static; }
}
@media (max-width: 1080px) {
  .search-btn { min-width: 0; } .search-btn .lbl, .search-btn kbd { display: none; }
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .docs { grid-template-columns: minmax(0, 1fr); }
  .sidenav { position: fixed; inset: 61px 0 0 0; height: auto; z-index: 25; background: var(--bg); border-right: 0; transform: translateX(-100%); transition: transform .2s; visibility: hidden; }
  body.nav-open .sidenav { transform: none; visibility: visible; }
  .docs-main { padding: 24px 16px 64px; }
  .mainnav { display: none; } body.nav-open .mainnav { display: none; }
  .menu-btn { display: grid; }
  .top-in { padding: 10px 16px; gap: 10px; }
  .wrap { padding: 0 16px; }
  .brand small { display: none; }
  .top-actions .btn-primary { display: none; }
  .spec-card dl { grid-template-columns: minmax(0, 1fr); }
  .spec-card dt { padding-top: 8px; }
  .ep-list .why { padding-left: 0; }
}
/* phase-1 additions */
.resp-list { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: .86rem; }
.resp-list code { justify-self: start; }
.op-doc ul { padding-left: 20px; margin: 8px 0; }
.note-line { font-size: .86rem; color: var(--muted); margin-top: 8px; }
.ext-list .why { padding-left: 0; }
.soon { opacity: .85; }
.soon h3 { color: var(--muted); }
div.card.soon { box-shadow: none; border-style: dashed; }
.planned-list { padding-left: 20px; margin: 8px 0; }
.redirect-box { max-width: 720px; margin: 48px auto; padding: 0 16px; }
.redirect-box ul { padding-left: 20px; margin-top: 10px; display: grid; gap: 6px; }
.search-msg { padding: 14px; }
.search-close { background: none; border: 1px solid var(--border); color: var(--muted); border-radius: 7px; font: inherit;
  font-size: .76rem; padding: 4px 10px; cursor: pointer; min-height: 32px; min-width: 44px; }
.brand img { flex: none; border-radius: 8px; }
.sidenav .nav-l { display: flex; gap: 8px; align-items: center; min-width: 0; }
.prose.wide { max-width: 980px; }
.events-sec { scroll-margin-top: 72px; padding-top: 32px; margin-top: 24px; border-top: 1px solid var(--border); }
.endpoints-label { margin-top: 44px; scroll-margin-top: 72px; }
.gen-note { margin-top: 40px; }
.foot-note { margin-top: 20px; }
.cl-grid { align-items: start; }
.cl-date { font-size: .8rem; color: var(--muted); font-family: var(--mono); }
.ep-group { margin-top: 22px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 1rem; }
.verb:not([class*="v-"]) { background: var(--surface-2); color: var(--text); }
[id] { scroll-margin-top: 72px; }
@media (max-width: 900px) {
  .no-js .sidenav { position: static; transform: none; visibility: visible; height: auto; border-bottom: 1px solid var(--border); }
}
/* phase-2 additions: changelog kinds, response box spacing */
.st-added { background: var(--live-bg); color: var(--live-fg); }
.st-fixed { background: var(--planned-bg); color: var(--planned-fg); }
.cl-day { font-size: 1rem; margin: 30px 0 12px; font-family: var(--mono); color: var(--muted); }
.changelog-list h3 { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 1rem; }
.changelog-list p { margin-top: 4px; }
.prose ol.planned-list li + li { margin-top: 8px; }
.callout ul { margin: 0; }
/* phase-3 additions: Try it, status */
.tryit { border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); }
.tryit > summary { cursor: pointer; padding: 12px 14px; font-weight: 600; font-size: .92rem; min-height: 44px; display: flex; align-items: center; }
.tryit[open] > summary { border-bottom: 1px solid var(--border); }
.tryit-form { padding: 14px; display: grid; gap: 12px; }
.tryit-warn { font-size: .84rem; }
.tf { display: grid; gap: 4px; }
.tf label { font-size: .84rem; font-weight: 600; }
.tf-kind { font-weight: 400; color: var(--muted); font-size: .78rem; }
.tf input, .tf textarea { font: inherit; font-family: var(--mono); font-size: .82rem; color: var(--text); background: var(--bg);
  border: 1px solid var(--border-strong); border-radius: 8px; padding: 9px 10px; min-height: 44px; width: 100%; min-width: 0; }
.tf textarea { min-height: 140px; max-height: 360px; resize: vertical; }
.tf input:focus-visible, .tf textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.tf-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tryit-status { font-size: .86rem; font-weight: 600; }
.tryit-status.ok { color: var(--live-fg); }
.tryit-status.bad { color: var(--del-fg); }
.tryit-body { margin-top: 8px; background: var(--code-bg); color: var(--code-fg); border: 1px solid var(--code-border); border-radius: 10px;
  padding: 12px 14px; font-size: .78rem; line-height: 1.6; overflow: auto; max-height: 420px; }
.st-down { background: var(--del-bg); color: var(--del-fg); }
.status-grid { margin: 22px 0 10px; max-width: 980px; }
.status-card { display: grid; gap: 8px; align-content: start; }
.status-name { font-size: 1.08rem; }
.status-line { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.status-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.docs-main > .callout { max-width: 980px; margin-top: 18px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }