/*
  Arkie API Docs — presentation layer

  Section map:
  01. Theme tokens and document foundations
  02. Global navigation and action controls
  03. Three-column documentation shell
  04. Guide sections, typography, tables, and code samples
  05. API reference rows and status language
  06. Search, endpoint drawer, overlay, and toast surfaces
  07. Responsive breakpoints and reduced-motion policy

  Style reminder — Gilded Systems Manual:
  Swiss technical-manual hierarchy, asymmetric three-axis documentation layout,
  graphite/ivory foundation, Arkie Gilt only as a functional signal color.
*/

/* 01 — Dark theme design tokens and geometry shared by every component. */
:root {
  --bg: #0b0c0e;
  --bg-elevated: #111316;
  --bg-soft: #16191d;
  --bg-code: #090a0c;
  --surface: rgba(21, 23, 27, 0.84);
  --surface-solid: #15171b;
  --text: #f1eee6;
  --text-soft: #c2bfb7;
  --muted: #85837e;
  --faint: #5d5e5d;
  --line: rgba(241, 238, 230, 0.11);
  --line-strong: rgba(241, 238, 230, 0.2);
  --gilt: #d7a84a;
  --gilt-bright: #efc76e;
  --gilt-soft: rgba(215, 168, 74, 0.12);
  --green: #78aa8f;
  --green-soft: rgba(120, 170, 143, 0.11);
  --red: #d1786c;
  --red-soft: rgba(209, 120, 108, 0.12);
  --blue: #78a9bf;
  --blue-soft: rgba(120, 169, 191, 0.11);
  --purple: #aa91c6;
  --sidebar-width: 244px;
  --toc-width: 214px;
  --topbar-height: 64px;
  --content-max: 930px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  color-scheme: dark;
}

/* Light mode overrides only semantic tokens; component rules remain identical. */
html[data-theme="light"] {
  --bg: #f4f0e7;
  --bg-elevated: #faf7f0;
  --bg-soft: #ece7dd;
  --bg-code: #171817;
  --surface: rgba(250, 247, 240, 0.9);
  --surface-solid: #faf7f0;
  --text: #171816;
  --text-soft: #4f504c;
  --muted: #73746f;
  --faint: #9b9a92;
  --line: rgba(23, 24, 22, 0.12);
  --line-strong: rgba(23, 24, 22, 0.21);
  --gilt: #a97517;
  --gilt-bright: #8d6012;
  --gilt-soft: rgba(169, 117, 23, 0.1);
  --green: #447b5f;
  --green-soft: rgba(68, 123, 95, 0.1);
  --red: #a64f44;
  --red-soft: rgba(166, 79, 68, 0.09);
  --blue: #3f758c;
  --blue-soft: rgba(63, 117, 140, 0.09);
  --purple: #775995;
  color-scheme: light;
}

/* Predictable sizing, document behavior, base typography, and accessibility helpers. */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topbar-height) + 32px);
}

body {
  margin: 0;
  min-width: 320px;
  background:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px),
    var(--bg);
  background-size: 64px 64px;
  background-attachment: fixed;
  color: var(--text);
  font-family: "IBM Plex Sans", "Noto Sans TC", sans-serif;
  font-size: 15px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 15%, transparent 0, var(--bg) 72%);
  opacity: 0.92;
  z-index: -1;
}

button,
input { font: inherit; }

button,
a { -webkit-tap-highlight-color: transparent; }

a { color: inherit; }

button { color: inherit; }

svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

code,
pre,
kbd {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}

::selection {
  color: #111;
  background: var(--gilt-bright);
}

:focus-visible {
  outline: 2px solid var(--gilt);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  left: 16px;
  top: -80px;
  z-index: 100;
  padding: 10px 14px;
  color: #111;
  background: var(--gilt-bright);
  text-decoration: none;
  transition: top 160ms var(--ease-out);
}

.skip-link:focus { top: 12px; }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* 02 — Fixed product toolbar and its primary navigation/actions. */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: var(--topbar-height);
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr) auto;
  align-items: center;
  border-bottom: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(18px);
}

.brand {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 22px;
  text-decoration: none;
  border-right: 1px solid var(--line);
}

.brand-mark {
  width: 31px;
  height: 31px;
  object-fit: contain;
}

.brand-word {
  font-weight: 600;
  letter-spacing: 0.17em;
  font-size: 14px;
}

.brand-divider {
  width: 1px;
  height: 17px;
  background: var(--line-strong);
}

.brand-product {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.15;
  letter-spacing: 0.15em;
}

.product-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 100%;
  padding-left: 18px;
}

.product-nav a {
  height: 100%;
  display: inline-flex;
  align-items: center;
  padding: 0 15px;
  color: var(--muted);
  font-size: 13px;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 140ms var(--ease-out), border-color 140ms var(--ease-out);
}

.product-nav a:hover,
.product-nav a.active {
  color: var(--text);
  border-bottom-color: var(--gilt);
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 14px;
}

.search-trigger {
  min-width: 224px;
  height: 36px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 9px 0 11px;
  color: var(--muted);
  background: var(--bg-soft);
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  cursor: pointer;
  transition: border-color 140ms var(--ease-out), color 140ms var(--ease-out), transform 140ms var(--ease-out);
}

.search-trigger:hover {
  color: var(--text);
  border-color: var(--gilt);
}

.search-trigger:active,
.icon-button:active,
.lang-button:active,
.copy-button:active,
.code-tab:active { transform: scale(0.97); }

.search-trigger svg { width: 16px; height: 16px; }
.search-trigger span { flex: 1; text-align: left; }

kbd {
  padding: 2px 6px;
  border: 1px solid var(--line-strong);
  border-bottom-color: color-mix(in srgb, var(--line-strong) 60%, var(--text));
  border-radius: 3px;
  color: var(--muted);
  background: var(--bg-elevated);
  font-size: 10px;
}

.language-switch {
  display: flex;
  height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  overflow: hidden;
}

.lang-button {
  min-width: 39px;
  border: 0;
  border-right: 1px solid var(--line);
  color: var(--muted);
  background: transparent;
  font-size: 11px;
  cursor: pointer;
  transition: color 140ms var(--ease-out), background 140ms var(--ease-out), transform 140ms var(--ease-out);
}

.lang-button:last-child { border-right: 0; }
.lang-button:hover { color: var(--text); }

.lang-button.active {
  color: #17130b;
  background: var(--gilt);
  font-weight: 600;
}

.icon-button,
.mobile-menu-button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  transition: color 140ms var(--ease-out), border-color 140ms var(--ease-out), transform 140ms var(--ease-out);
}

.icon-button:hover,
.mobile-menu-button:hover { color: var(--text); border-color: var(--gilt); }
.icon-button svg,
.mobile-menu-button svg { width: 18px; height: 18px; }
.moon-icon { display: none; }
html[data-theme="light"] .sun-icon { display: none; }
html[data-theme="light"] .moon-icon { display: block; }
.mobile-menu-button { display: none; }

/* 03 — Desktop documentation shell: sidebar, reading column, and page outline. */
.doc-shell {
  min-height: 100vh;
  padding-top: var(--topbar-height);
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr) var(--toc-width);
}

.sidebar,
.toc {
  position: sticky;
  top: var(--topbar-height);
  height: calc(100vh - var(--topbar-height));
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

.sidebar {
  border-right: 1px solid var(--line);
  padding: 26px 18px 20px 32px;
  background:
    linear-gradient(color-mix(in srgb, var(--bg) 91%, transparent), color-mix(in srgb, var(--bg) 97%, transparent)),
    url('/assets/arkie-docs-pattern.webp') top center / 620px auto no-repeat;
}

.route-spine {
  position: absolute;
  left: 18px;
  top: 38px;
  width: 1px;
  height: 172px;
  background: linear-gradient(var(--gilt), rgba(215, 168, 74, 0.08));
}

.route-spine i {
  position: absolute;
  left: -3px;
  width: 7px;
  height: 7px;
  border: 1px solid var(--gilt);
  background: var(--bg);
  transform: rotate(45deg);
}

.route-spine i:nth-child(1) { top: 0; }
.route-spine i:nth-child(2) { top: 39px; }
.route-spine i:nth-child(3) { top: 78px; }
.route-spine i:nth-child(4) { top: 117px; }
.route-spine i:nth-child(5) { top: 156px; }

.nav-group { margin-bottom: 27px; }

.nav-group-title,
.toc > p {
  margin: 0 0 9px;
  color: var(--faint);
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.15em;
}

.nav-group a,
.toc a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 1px 0;
  padding: 6px 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
  text-decoration: none;
  border-left: 1px solid transparent;
  transition: color 130ms var(--ease-out), background 130ms var(--ease-out), border-color 130ms var(--ease-out), transform 130ms var(--ease-out);
}

.nav-group a:hover,
.nav-group a.active,
.toc a:hover,
.toc a.active {
  color: var(--text);
  background: var(--gilt-soft);
  border-left-color: var(--gilt);
  transform: translateX(2px);
}

.nav-group a svg {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
}

.nav-badge {
  margin-left: auto;
  padding: 1px 5px;
  border: 1px solid var(--line);
  color: var(--faint);
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
}

.sidebar-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
  padding-top: 17px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
}

.sidebar-footer code { margin-left: auto; color: var(--gilt); }

.status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
}

.content {
  min-width: 0;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 52px 80px;
}

.toc {
  padding: 36px 24px 28px 20px;
  border-left: 1px solid var(--line);
}

.toc a { padding: 5px 8px; font-size: 12px; }

.toc-note {
  margin: 28px 0 0 8px;
  padding: 15px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.toc-note span {
  display: block;
  color: var(--faint);
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.15em;
}

.toc-note a {
  display: inline-block;
  padding: 5px 0 0;
  color: var(--gilt-bright);
}

/* 04 — Shared guide-section rhythm and the asymmetric overview composition. */
.spec-section {
  position: relative;
  padding: 72px 0;
  border-bottom: 1px solid var(--line-strong);
}

.hero {
  min-height: 560px;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(320px, 0.96fr);
  gap: 42px;
  align-content: center;
  padding-top: 92px;
  overflow: hidden;
}

.hero-art {
  position: absolute;
  inset: 0 -140px 0 18%;
  z-index: -1;
  background:
    linear-gradient(90deg, var(--bg) 0%, transparent 42%, var(--bg) 100%),
    linear-gradient(var(--bg) 0%, transparent 40%, var(--bg) 100%),
    url('/assets/arkie-docs-hero.webp') center / cover no-repeat;
  opacity: 0.32;
  filter: saturate(0.8);
}

html[data-theme="light"] .hero-art { opacity: 0.13; mix-blend-mode: multiply; }

.hero-copy,
.hero-request { position: relative; z-index: 1; }

.spec-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 21px;
  color: var(--muted);
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.15em;
}

.spec-label::after {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--gilt);
}

.spec-label span:first-child { color: var(--gilt); }

h1,
h2,
h3,
p { margin-top: 0; }

h1 {
  max-width: 660px;
  margin-bottom: 23px;
  font-size: clamp(42px, 5.1vw, 69px);
  line-height: 0.98;
  letter-spacing: -0.055em;
  font-weight: 600;
}

h2 {
  margin-bottom: 10px;
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.035em;
  font-weight: 600;
}

h3 {
  margin-bottom: 8px;
  font-size: 17px;
  line-height: 1.3;
}

.hero-lead,
.section-heading p,
.prose-block p {
  color: var(--text-soft);
}

.hero-lead {
  max-width: 590px;
  margin-bottom: 32px;
  font-size: 17px;
  line-height: 1.68;
}

.hero-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line-strong);
}

.hero-meta > div {
  display: flex;
  flex-direction: column;
  padding: 17px 12px 0 0;
}

.hero-meta strong {
  color: var(--gilt-bright);
  font-family: "IBM Plex Mono", monospace;
  font-size: 17px;
}

.hero-meta span {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.02em;
}

/* Terminal-like request panels intentionally keep a dark code surface in both themes. */
.hero-request,
.code-panel {
  align-self: center;
  border: 1px solid var(--line-strong);
  border-top-color: color-mix(in srgb, var(--gilt) 65%, var(--line));
  background: var(--bg-code);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.25);
}

.hero-request { transform: translateY(18px); }

.request-head,
.code-tabs {
  min-height: 45px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.11);
  color: #817f79;
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.13em;
}

.request-light { display: inline-flex; gap: 5px; margin-right: 4px; }
.request-light i { width: 6px; height: 6px; border-radius: 50%; background: #46484a; }
.request-light i:nth-child(2) { background: #665b3e; }
.request-light i:nth-child(3) { background: #4c5e54; }

.copy-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 5px 8px;
  color: #9a9891;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
  font-size: 9px;
  letter-spacing: 0.04em;
  transition: color 140ms var(--ease-out), border-color 140ms var(--ease-out), transform 140ms var(--ease-out);
}

.copy-button:hover { color: var(--gilt-bright); border-color: var(--gilt); }
.copy-button svg { width: 13px; height: 13px; }

pre {
  margin: 0;
  padding: 25px;
  overflow-x: auto;
  color: #e9e6dc;
  font-size: 12.5px;
  line-height: 1.75;
  scrollbar-color: #3d3e3f #111;
}

.hero-request pre { min-height: 146px; display: flex; align-items: center; }
.tok-muted { color: #8c8d8a; }
.tok-gold { color: #e0b75e; }
.tok-string { color: #92bea5; }

.request-result {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: #7e817d;
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
}

.request-result span:last-child { margin-left: auto; }

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 32px;
}

.section-heading.compact { margin-bottom: 28px; }
.section-heading > div { max-width: 630px; }
.section-heading p { margin-bottom: 0; font-size: 16px; }

.text-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--gilt);
  color: var(--gilt-bright);
  font-size: 12px;
  text-decoration: none;
}

.text-link span:last-child { transition: transform 140ms var(--ease-out); }
.text-link:hover span:last-child { transform: translate(2px, 2px); }

/* Comparison table used by Quickstart to explain the available integration surfaces. */
.integration-table {
  margin-bottom: 26px;
  border-top: 1px solid var(--line-strong);
}

.table-row {
  display: grid;
  grid-template-columns: 0.8fr 1.5fr 0.7fr;
  gap: 16px;
  align-items: center;
  min-height: 54px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--line);
}

.table-row strong { font-size: 13px; }
.table-row span { color: var(--text-soft); }
.table-row code { justify-self: start; color: var(--gilt); font-size: 11px; }

.table-head {
  min-height: 38px;
  color: var(--faint);
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Semantic notes: gilt for caution/guidance, blue for informational material. */
.callout {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 13px;
  margin: 24px 0;
  padding: 15px 17px;
  border-left: 2px solid var(--gilt);
  background: var(--gilt-soft);
}

.callout svg { width: 18px; height: 18px; margin-top: 2px; color: var(--gilt-bright); }
.callout strong { display: block; font-size: 13px; }
.callout p { margin: 2px 0 0; color: var(--text-soft); font-size: 13px; }
.info-callout { border-left-color: var(--blue); background: var(--blue-soft); }
.info-callout svg { color: var(--blue); }

/* Multi-language code viewer. JavaScript updates text only; CSS owns visual tab state. */
.code-panel { margin-top: 24px; }
.code-panel pre { min-height: 240px; }
.code-tabs { padding-left: 6px; }

.code-tab,
.drawer-code-tab {
  align-self: stretch;
  padding: 0 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  color: #777873;
  background: transparent;
  cursor: pointer;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  transition: color 130ms var(--ease-out), border-color 130ms var(--ease-out), transform 130ms var(--ease-out);
}

.code-tab:hover,
.code-tab.active,
.drawer-code-tab:hover,
.drawer-code-tab.active { color: #e8e5db; border-bottom-color: var(--gilt); }

/* Paired explanatory blocks used by authentication and other compact guide material. */
.two-column-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.prose-block {
  min-width: 0;
  padding: 25px;
  background: var(--bg-elevated);
}

.prose-block p { min-height: 72px; }

.inline-code-line {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  background: var(--bg-code);
}

.inline-code-line code {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #d6d2c8;
  font-size: 11px;
  white-space: nowrap;
}

.copy-mini {
  margin-left: auto;
  border: 0;
  color: var(--gilt-bright);
  background: transparent;
  cursor: pointer;
  font-size: 10px;
}

.scope-list { display: flex; flex-wrap: wrap; gap: 7px; }
.scope-list code {
  padding: 7px 9px;
  border: 1px solid var(--line);
  color: var(--gilt-bright);
  background: var(--gilt-soft);
  font-size: 10px;
}

/* Structured registries for execution hosts and model families. */
.host-list { border-top: 1px solid var(--line-strong); }

.host-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 200px;
  align-items: center;
  gap: 14px;
  min-height: 62px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--line);
}

.host-row strong { font-size: 12px; }
.host-row code { color: var(--gilt-bright); font-size: 11px; overflow-wrap: anywhere; }
.host-row span { color: var(--muted); font-size: 12px; }

.family-ledger { border-top: 1px solid var(--line-strong); }

.family-row {
  position: relative;
  display: grid;
  grid-template-columns: 62px 145px minmax(0, 1fr) 90px;
  align-items: center;
  gap: 15px;
  min-height: 84px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--line);
}

.family-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 20px;
  height: 1px;
  background: var(--gilt);
  transform: translateX(-36px);
}

.family-index { color: var(--faint); font-family: "IBM Plex Mono", monospace; font-size: 11px; }
.family-name { font-size: 16px; }
.family-description { color: var(--text-soft); font-size: 13px; }
.family-count { justify-self: end; color: var(--gilt); font-family: "IBM Plex Mono", monospace; font-size: 10px; }

/* 05 — Sticky API reference controls and generated operation rows. */
.reference-toolbar {
  position: sticky;
  top: var(--topbar-height);
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 -10px 30px;
  padding: 10px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(14px);
}

.endpoint-search {
  min-width: 280px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.endpoint-search svg { width: 16px; height: 16px; color: var(--muted); }

.endpoint-search input {
  width: 100%;
  padding: 8px 0;
  border: 0;
  color: var(--text);
  background: transparent;
  outline: none;
}

.endpoint-search input::placeholder { color: var(--faint); }

.method-legend { display: flex; align-items: center; gap: 11px; }
.method-legend span { display: inline-flex; align-items: center; gap: 5px; color: var(--faint); font-family: "IBM Plex Mono", monospace; font-size: 8px; }
.legend-dot { width: 5px; height: 5px; border-radius: 50%; }
.legend-dot.get { background: var(--blue); }
.legend-dot.post { background: var(--green); }
.legend-dot.patch { background: var(--gilt); }
.legend-dot.delete { background: var(--red); }
.legend-dot.ws { background: var(--purple); }

.endpoint-group { margin: 0 0 44px; }

.endpoint-group-head {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 10px;
}

.endpoint-group-head h3 { margin: 0; font-size: 20px; letter-spacing: -0.02em; }
.endpoint-group-head span { color: var(--faint); font-family: "IBM Plex Mono", monospace; font-size: 10px; }
.endpoint-group-head::after { content: ""; height: 1px; flex: 1; background: var(--line); }

.endpoint-list { border-top: 1px solid var(--line-strong); }

.endpoint-row {
  width: 100%;
  display: grid;
  grid-template-columns: 64px minmax(220px, 0.9fr) minmax(260px, 1.1fr) 22px;
  align-items: center;
  gap: 14px;
  min-height: 62px;
  padding: 10px 7px;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background 130ms var(--ease-out), transform 130ms var(--ease-out);
}

.endpoint-row:hover {
  background: var(--gilt-soft);
  transform: translateX(3px);
}

.endpoint-row code {
  color: var(--text);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.endpoint-row-description { color: var(--muted); font-size: 12px; }
.endpoint-arrow { color: var(--faint); font-size: 15px; transition: color 130ms var(--ease-out), transform 130ms var(--ease-out); }
.endpoint-row:hover .endpoint-arrow { color: var(--gilt); transform: translateX(3px); }

/* HTTP/WebSocket method colors are consistent across reference, search, and drawer. */
.method-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  padding: 4px 5px;
  border: 1px solid currentColor;
  font-family: "IBM Plex Mono", monospace;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.07em;
}

.method-badge.get { color: var(--blue); background: var(--blue-soft); }
.method-badge.post { color: var(--green); background: var(--green-soft); }
.method-badge.patch { color: var(--gilt-bright); background: var(--gilt-soft); }
.method-badge.delete { color: var(--red); background: var(--red-soft); }
.method-badge.ws { color: var(--purple); background: rgba(170, 145, 198, 0.1); }

.empty-state { padding: 60px 20px; text-align: center; border: 1px solid var(--line); }
.empty-state span { display: block; color: var(--gilt); font-family: "IBM Plex Mono", monospace; font-size: 32px; }
.empty-state strong { display: block; margin: 8px 0 4px; }
.empty-state p { color: var(--muted); }

/* Explanatory asynchronous lifecycle; visual arrows do not imply active processing. */
.event-flow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  margin-bottom: 24px;
  background: var(--line);
  border: 1px solid var(--line);
}

.event-step {
  position: relative;
  min-height: 120px;
  padding: 18px 14px;
  background: var(--bg-elevated);
}

.event-step:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: -8px;
  top: 50%;
  z-index: 2;
  color: var(--gilt);
  transform: translateY(-50%);
}

.event-step code { color: var(--gilt); font-size: 9px; }
.event-step strong { display: block; margin: 13px 0 4px; font-size: 12px; }
.event-step p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.45; }

.error-envelope {
  margin-bottom: 20px;
  padding: 15px 17px;
  border-left: 2px solid var(--gilt);
  background: var(--bg-code);
}

.error-envelope code { color: #dedbd1; font-size: 12px; }

.error-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--line-strong);
}

.error-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  min-height: 75px;
  padding: 15px 10px 15px 0;
  border-bottom: 1px solid var(--line);
}

.error-item:nth-child(odd) { border-right: 1px solid var(--line); }
.error-item:nth-child(even) { padding-left: 18px; }
.error-status { color: var(--red); font-family: "IBM Plex Mono", monospace; font-size: 11px; }
.error-item code { display: block; color: var(--text); font-size: 10px; }
.error-item p { margin: 3px 0 0; color: var(--muted); font-size: 11px; line-height: 1.4; }

/* Closing provenance, contract link, and compact brand signature. */
.site-footer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 34px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.site-footer > div { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 600; letter-spacing: 0.1em; }
.site-footer p { margin: 0; text-align: center; }
.site-footer a { color: var(--gilt-bright); text-decoration: none; }

/* 06 — Shared modal layer for search, endpoint details, and mobile navigation. */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 180ms var(--ease-out);
}

.overlay.visible { opacity: 1; }

/* Keyboard-first global search surface. Results are generated from local static data. */
.search-dialog {
  position: fixed;
  left: 50%;
  top: 12vh;
  z-index: 90;
  width: min(720px, calc(100vw - 32px));
  max-height: 72vh;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-top: 2px solid var(--gilt);
  background: var(--surface-solid);
  box-shadow: 0 35px 100px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translate(-50%, -10px) scale(0.98);
  transition: opacity 190ms var(--ease-out), transform 190ms var(--ease-out);
}

.search-dialog.visible { opacity: 1; transform: translate(-50%, 0) scale(1); }

.search-dialog-head {
  height: 58px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
}

.search-dialog-head svg { width: 18px; height: 18px; color: var(--gilt); }
.search-dialog-head input { flex: 1; border: 0; outline: none; color: var(--text); background: transparent; font-size: 15px; }
.search-results { max-height: calc(72vh - 58px); overflow-y: auto; padding: 9px; }

.search-result {
  width: 100%;
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 11px 10px;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.search-result:hover { background: var(--gilt-soft); }
.search-result strong { display: block; font-size: 12px; }
.search-result code { color: var(--muted); font-size: 10px; }
.search-result > span:last-child { color: var(--faint); font-size: 10px; }

/* Right-side endpoint inspector containing generated, non-executing code text. */
.endpoint-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 95;
  width: min(680px, calc(100vw - 24px));
  height: 100vh;
  border-left: 1px solid var(--line-strong);
  background: var(--surface-solid);
  box-shadow: -30px 0 90px rgba(0, 0, 0, 0.45);
  transform: translateX(100%);
  transition: transform 220ms var(--ease-out);
}

.endpoint-drawer.visible { transform: translateX(0); }

.drawer-head {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
}

.drawer-head > div { display: flex; align-items: baseline; gap: 12px; }
.drawer-head h2 { margin: 0; font-size: 22px; }
.drawer-index { color: var(--gilt); font-family: "IBM Plex Mono", monospace; font-size: 10px; }
.drawer-body { height: calc(100vh - 76px); overflow-y: auto; padding: 28px 26px 60px; }

.endpoint-signature {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

.endpoint-signature code { color: var(--text); font-size: 13px; overflow-wrap: anywhere; }
.drawer-description { margin: 22px 0; color: var(--text-soft); font-size: 15px; }

.drawer-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 24px;
  border: 1px solid var(--line);
}

.drawer-meta > div { padding: 12px; border-right: 1px solid var(--line); }
.drawer-meta > div:last-child { border-right: 0; }
.drawer-meta span { display: block; color: var(--faint); font-family: "IBM Plex Mono", monospace; font-size: 8px; letter-spacing: 0.1em; }
.drawer-meta strong { display: block; margin-top: 4px; color: var(--text); font-size: 11px; }
.drawer-code-panel { margin-top: 0; }
.drawer-code-panel pre { min-height: 300px; }

.drawer-warning {
  margin-top: 20px;
  padding: 14px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
}

.drawer-warning strong { color: var(--gilt-bright); }
.drawer-warning p { margin: 3px 0 0; }

/* Short-lived aria-live status confirmation, primarily used after copy actions. */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 120;
  padding: 10px 14px;
  border: 1px solid var(--gilt);
  color: var(--text);
  background: var(--surface-solid);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  font-size: 12px;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out);
}

.toast.visible { opacity: 1; transform: translate(-50%, 0); }

/* 07 — Remove the auxiliary table of contents before compressing the main reading area. */
@media (max-width: 1240px) {
  :root { --toc-width: 0px; }
  .doc-shell { grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
  .toc { display: none; }
  .content { max-width: 980px; }
}

/* Convert the left navigation into an off-canvas panel and stack the hero. */
@media (max-width: 980px) {
  :root { --sidebar-width: 0px; }
  .topbar { grid-template-columns: auto minmax(0, 1fr) auto; }
  .brand { border-right: 0; padding-left: 15px; }
  .brand-divider,
  .brand-product { display: none; }
  .product-nav { justify-content: center; padding-left: 0; }
  .product-nav a { padding: 0 10px; }
  .doc-shell { display: block; }
  .sidebar {
    position: fixed;
    left: 0;
    top: var(--topbar-height);
    z-index: 70;
    width: 292px;
    height: calc(100vh - var(--topbar-height));
    transform: translateX(-100%);
    transition: transform 200ms var(--ease-out);
  }
  .sidebar.visible { transform: translateX(0); }
  .mobile-menu-button { display: grid; }
  .content { max-width: 900px; padding-left: 32px; padding-right: 32px; }
  .search-trigger { min-width: 42px; width: 42px; }
  .search-trigger span,
  .search-trigger kbd { display: none; }
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-request { transform: none; }
}

/* Phone layout: compact toolbar, single-column content, and reduced table density. */
@media (max-width: 720px) {
  :root { --topbar-height: 58px; }
  .topbar { grid-template-columns: auto 1fr auto; }
  .brand { padding: 0 10px; }
  .brand-word { font-size: 12px; }
  .brand-mark { width: 27px; height: 27px; }
  .product-nav { display: none; }
  .top-actions { justify-self: end; gap: 5px; padding-right: 8px; }
  .language-switch { height: 34px; }
  .lang-button { min-width: 36px; }
  .icon-button,
  .mobile-menu-button,
  .search-trigger { width: 34px; height: 34px; min-width: 34px; }
  .content { padding: 0 18px 60px; }
  .spec-section { padding: 54px 0; }
  .hero { gap: 28px; padding-top: 66px; }
  h1 { font-size: clamp(40px, 13vw, 58px); }
  h2 { font-size: 31px; }
  .hero-meta { grid-template-columns: 1fr 1fr; }
  .hero-meta > div:last-child { display: none; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 14px; }
  .table-row { grid-template-columns: 0.8fr 1.2fr; }
  .table-row > *:last-child { display: none; }
  .code-tabs { overflow-x: auto; padding-right: 68px; }
  .code-tab { flex: 0 0 auto; }
  .code-copy,
  .drawer-copy { position: absolute; right: 8px; background: var(--bg-code); }
  .code-panel { position: relative; }
  pre { padding: 20px 17px; font-size: 11px; }
  .two-column-detail { grid-template-columns: 1fr; }
  .prose-block p { min-height: auto; }
  .host-row { grid-template-columns: 94px 1fr; }
  .host-row span { grid-column: 1 / -1; }
  .family-row { grid-template-columns: 42px 105px 1fr; gap: 10px; }
  .family-count { display: none; }
  .reference-toolbar { align-items: flex-start; flex-direction: column; gap: 4px; }
  .endpoint-search { min-width: 100%; }
  .method-legend { display: none; }
  .endpoint-row { grid-template-columns: 54px minmax(0, 1fr) 18px; gap: 9px; }
  .endpoint-row-description { display: none; }
  .method-badge { width: 50px; }
  .event-flow { grid-template-columns: 1fr; }
  .event-step { min-height: 80px; }
  .event-step:not(:last-child)::after { right: auto; left: 20px; top: auto; bottom: -10px; transform: rotate(90deg); }
  .error-grid { grid-template-columns: 1fr; }
  .error-item:nth-child(odd) { border-right: 0; }
  .error-item:nth-child(even) { padding-left: 0; }
  .site-footer { grid-template-columns: 1fr; text-align: left; }
  .site-footer p { text-align: left; }
  .drawer-meta { grid-template-columns: 1fr; }
  .drawer-meta > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .drawer-meta > div:last-child { border-bottom: 0; }
}

/* Entrance motion is opt-in only when the visitor has not requested reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy,
  .hero-request {
    opacity: 0;
    transform: translateY(12px);
    animation: enter 520ms var(--ease-out) forwards;
  }
  .hero-request { animation-delay: 90ms; }
  .hero-request { transform: translateY(30px); }
  @keyframes enter { to { opacity: 1; transform: translateY(0); } }
}

/* Accessibility override: make all transitions and animations effectively immediate. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}