/* docs.css — the brandcurl API reference. A from-scratch, three-pane API
   reference that wears the landing's ferocious green-black terminal skin:
   near-black canvas, JetBrains Mono throughout, a live terminal on the right
   that tracks your scroll. Its own self-contained world (no tokens.css). */

:root {
  --dx-bg: #070907;
  --dx-panel: #0c110e;
  --dx-panel-2: #0f1511;
  --dx-ink: #e8efe9;
  --dx-ink-2: #b7c2ba;
  --dx-mut: #8b968e;
  --dx-dim: #79877f;
  --dx-faint: #717f77;
  --dx-line: rgba(255,255,255,0.075);
  --dx-line-2: rgba(255,255,255,0.12);
  --dx-green: #20d580;
  --dx-green-hi: #3ce392;
  --dx-green-soft: #7fdcab;
  --dx-amber: #fbbf24;
  --dx-amber-soft: #d9b25e;
  --dx-purple: #c084fc;
  --dx-cyan: #67e8f9;
  --dx-pink: #ff5ca8;
  --dx-top-h: 56px;
  --dx-nav-w: 244px;
  --dx-code-min: 420px;
  --dx-main-min: 596px;
  --dx-radius: 13px;
  --dx-top-bg: rgba(7, 9, 7, 0.82);
  /* the code rail's ground + edge. Resolved here, at :root, on purpose: the
     dark-pane token pins inside .dx-code must not repaint the rail itself. */
  --dx-rail: color-mix(in srgb, var(--dx-ink) 4%, transparent);
  --dx-rail-edge: var(--dx-line);
}

/* light: paper docs, same green — terminal/code panes stay dark (re-pinned below) */
:root[data-theme="light"] {
  --dx-bg: #f2f6f2;
  --dx-panel: #ffffff;
  --dx-panel-2: #f7faf7;
  --dx-ink: #0d130f;
  --dx-ink-2: #2e3a33;
  --dx-mut: #57645b;
  --dx-dim: #68736c;
  --dx-faint: #69716b;
  --dx-line: rgba(13, 19, 15, 0.1);
  --dx-line-2: rgba(13, 19, 15, 0.16);
  --dx-green: #10a55f;
  --dx-green-hi: #12b368;
  --dx-green-soft: #0b7d47;
  --dx-amber-soft: #8a5a00;
  --dx-amber: #b45309;
  --dx-purple: #7c3aed;
  --dx-cyan: #0e7490;
  --dx-pink: #be185d;
  --dx-top-bg: rgba(242, 246, 242, 0.85);
  --dx-rail: color-mix(in srgb, var(--dx-ink) 4%, transparent);
  --dx-rail-edge: var(--dx-line);
}

/* code rail + command palette are dark panes in both themes */
:root[data-theme="light"] .dx-code, :root[data-theme="light"] .dx-palette {
  --dx-ink: #e8efe9;
  --dx-ink-2: #b7c2ba;
  --dx-mut: #8b968e;
  --dx-dim: #79877f;
  --dx-faint: #717f77;
  --dx-line: rgba(255, 255, 255, 0.075);
  --dx-line-2: rgba(255, 255, 255, 0.12);
  --dx-green-soft: #7fdcab;
  --dx-amber-soft: #d9b25e;
  --dx-amber: #fbbf24;
  --dx-purple: #c084fc;
  --dx-cyan: #67e8f9;
  --dx-pink: #ff5ca8;
}

/* same-origin page swaps crossfade (pairs with bc-chrome.css on the landing/install) */
@view-transition { navigation: auto; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--dx-top-h) + 18px); }
body {
  margin: 0; background: var(--dx-bg); color: var(--dx-ink);
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--dx-green-soft); text-decoration: none; }
a:hover { color: var(--dx-ink); }
::selection { background: var(--dx-green); color: #04180b; }
input:focus { outline: none; }
button { font-family: inherit; cursor: pointer; }
code, pre { font-family: inherit; }

/* ambient glow, like the landing */
.dx-glow {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(48% 38% at 78% 8%, color-mix(in srgb, var(--dx-green) 6%, transparent), transparent 70%),
    radial-gradient(42% 40% at 10% 4%, color-mix(in srgb, var(--dx-green) 3.5%, transparent), transparent 70%);
}

/* ── top bar ── */
.dx-top {
  position: sticky; top: 0; z-index: 40; height: var(--dx-top-h);
  display: flex; align-items: center; gap: 18px;
  padding: 0 22px; border-bottom: 1px solid var(--dx-line);
  background: var(--dx-top-bg); backdrop-filter: blur(14px);
}
.dx-brand { display: inline-flex; align-items: center; gap: 9px; color: var(--dx-ink); flex-shrink: 0; }
.dx-prompt { color: var(--dx-green); font-weight: 800; }
.dx-brand-name { font-weight: 800; letter-spacing: -0.02em; font-size: 16px; }
.dx-brand-tag {
  font-size: 10.5px; font-weight: 700; color: var(--dx-green-soft);
  border: 1px solid color-mix(in srgb, var(--dx-green) 30%, transparent); background: color-mix(in srgb, var(--dx-green) 8%, transparent);
  border-radius: 6px; padding: 2px 6px; letter-spacing: 0.04em;
}
.dx-pills { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.dx-pill {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  color: var(--dx-mut); background: rgba(255,255,255,0.03); border: 1px solid var(--dx-line);
  border-radius: 999px; padding: 6px 14px; font-size: 13px;
  transition: color 0.15s ease, background 0.15s ease;
}
.dx-pill:hover { color: var(--dx-ink); }
.dx-pill.is-on {
  color: var(--dx-ink); background: color-mix(in srgb, var(--dx-green) 10%, transparent);
  border-color: color-mix(in srgb, var(--dx-green) 30%, transparent);
}
.dx-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--dx-green); }
.dx-search-open {
  display: inline-flex; align-items: center; gap: 9px; margin-left: 8px;
  width: min(300px, 22vw); min-width: 120px; color: var(--dx-dim); font-size: 12.5px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--dx-line);
  border-radius: 9px; padding: 8px 12px; transition: border-color 0.15s, color 0.15s;
}
.dx-search-open:hover { border-color: var(--dx-line-2); color: var(--dx-mut); }
.dx-search-open kbd {
  margin-left: auto; font-family: inherit; font-size: 10.5px; color: var(--dx-mut);
  background: rgba(255,255,255,0.05); border: 1px solid var(--dx-line);
  border-radius: 5px; padding: 1px 6px;
}
.dx-search-ico { color: var(--dx-green-soft); }
.dx-top-r { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.dx-top-link { color: var(--dx-mut); font-size: 13px; }
.dx-top-link:hover { color: var(--dx-ink); }
.theme-seg-group {
  display: inline-flex; gap: 2px; padding: 2px; flex-shrink: 0;
  background: rgba(255,255,255,0.03); border: 1px solid var(--dx-line); border-radius: 999px;
}
.theme-seg {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 22px; border: 0; border-radius: 999px;
  background: transparent; color: var(--dx-dim);
  transition: color 0.15s ease, background 0.15s ease;
}
.theme-seg:hover { color: var(--dx-ink); }
.theme-seg[aria-pressed="true"] { background: rgba(255,255,255,0.07); color: var(--dx-ink); }
.dx-key {
  color: #04180b; background: var(--dx-green-hi); border-radius: 999px;
  padding: 8px 16px; font-size: 12.5px; font-weight: 700; white-space: nowrap;
  box-shadow: 0 0 22px color-mix(in srgb, var(--dx-green-hi) 22%, transparent); transition: filter 0.15s;
}
.dx-key:hover { filter: brightness(1.08); color: #04180b; }
.dx-menu { display: none; margin-left: auto; background: none; border: none; color: var(--dx-ink); font-size: 20px; }

/* ── shell grid ──
   Full-bleed: no max-width, no centering. The nav hugs the left edge and the
   code rail scales with the viewport instead of parking at a fixed width.
   The rail takes 44% of the screen, floored at --dx-code-min and capped so the
   prose column never starves below --dx-main-min (the cap only binds under
   ~1500px; at and above that the rail is a straight 44%). */
.dx-shell {
  position: relative; z-index: 1; max-width: none; margin: 0;
  display: grid;
  grid-template-columns:
    var(--dx-nav-w)
    minmax(0, 1fr)
    minmax(var(--dx-code-min), min(44%, 100% - var(--dx-nav-w) - var(--dx-main-min)));
  align-items: start;
}

/* ── left nav ── */
.dx-nav {
  position: sticky; top: var(--dx-top-h); align-self: start;
  height: calc(100vh - var(--dx-top-h)); overflow-y: auto;
  border-right: 1px solid var(--dx-line); padding: 18px 14px 60px;
  scrollbar-width: thin; scrollbar-color: var(--dx-faint) transparent;
}
.dx-nav::-webkit-scrollbar { width: 8px; }
.dx-nav::-webkit-scrollbar-thumb { background: var(--dx-faint); border-radius: 8px; }
.dx-nav-search {
  display: flex; align-items: center; gap: 8px; margin-bottom: 16px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--dx-line);
  border-radius: 9px; padding: 8px 11px;
}
.dx-nav-search:focus-within { border-color: color-mix(in srgb, var(--dx-green) 40%, transparent); }
.dx-nav-search input { flex: 1; min-width: 0; background: none; border: none; color: var(--dx-ink); font-size: 12.5px; }
.dx-nav-search input::placeholder { color: var(--dx-faint); }
.dx-drawer-pills, .dx-drawer-theme { display: none; }

.dx-nav-group { margin-bottom: 8px; }
.dx-nav-group-h {
  display: flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--dx-dim);
  padding: 12px 8px 6px;
}
.dx-nav-group-h .dx-gdot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.8; }
/* No pills, no tint, no border-left: active is a green prompt caret. Every item
   reserves the same 12px caret gutter (padding-left 20px = 8px inset + caret),
   so labels sit at the identical x whether active or not — and at the same 20px
   as a group header's label, whose dot rides the same gutter. */
.dx-nav-item {
  position: relative;
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 6px 8px 6px 20px; border-radius: 0; color: var(--dx-mut); font-size: 12.5px;
  background: none; border: none; transition: color 0.13s;
}
.dx-nav-item:hover { color: var(--dx-ink); }
.dx-nav-item.is-active { color: var(--dx-ink); }
.dx-nav-item.is-active::before {
  content: "\276F"; position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  color: var(--dx-green); font-size: 10px; line-height: 1; font-weight: 800;
}
.dx-nav-item:focus-visible, .dx-pal-item:focus-visible { outline: 2px solid var(--dx-green); outline-offset: -2px; }
.dx-nav-item .dx-m { flex-shrink: 0; font-size: 9px; font-weight: 800; letter-spacing: 0.03em; width: 34px; }
.dx-nav-item .dx-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-nav-guide .dx-t { color: inherit; }

/* method colors */
.dx-m-get { color: var(--dx-green-soft); }
.dx-m-post { color: var(--dx-amber-soft); }
.dx-m-patch { color: var(--dx-purple); }
.dx-m-delete { color: var(--dx-pink); }

/* ── center content ── */
.dx-main { padding: 40px 48px 120px; min-width: 0; }
.dx-section { scroll-margin-top: calc(var(--dx-top-h) + 18px); padding-bottom: 40px; }
.dx-section + .dx-section { border-top: 1px solid var(--dx-line); padding-top: 48px; }

/* hero / overview */
.dx-hero-eyebrow { color: var(--dx-green-soft); font-size: 12.5px; letter-spacing: 0.02em; }
.dx-hero-title { font-size: clamp(30px, 4.4vw, 46px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; margin: 12px 0 0; }
.dx-hero-title .g { color: var(--dx-green); }
.dx-lead { color: var(--dx-mut); font-size: 15px; line-height: 1.65; max-width: 58ch; margin: 20px 0 0; }
.dx-lead p { margin: 0 0 12px; }

.dx-quick {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 28px 0 8px;
}
.dx-quick-card {
  border: 1px solid var(--dx-line); border-radius: 12px; background: var(--dx-panel);
  padding: 16px; transition: border-color 0.15s, transform 0.15s;
}
.dx-quick-card:hover { border-color: color-mix(in srgb, var(--dx-green) 30%, transparent); transform: translateY(-2px); }
.dx-quick-card h4 { margin: 0 0 6px; font-size: 13.5px; color: var(--dx-ink); font-weight: 700; }
.dx-quick-card p { margin: 0; font-size: 12px; color: var(--dx-mut); line-height: 1.6; }
.dx-quick-card .dx-qk { color: var(--dx-green); }

/* endpoint header */
.dx-ep-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dx-badge {
  font-size: 11px; font-weight: 800; letter-spacing: 0.05em; color: #04180b;
  border-radius: 7px; padding: 4px 10px; flex-shrink: 0;
}
.dx-badge-get { background: var(--dx-green-hi); }
.dx-badge-post { background: var(--dx-amber); }
.dx-badge-patch { background: var(--dx-purple); }
.dx-badge-delete { background: var(--dx-pink); }
.dx-path { font-size: 17px; font-weight: 600; color: var(--dx-ink); letter-spacing: -0.01em; word-break: break-all; }
.dx-path .v { color: var(--dx-green-soft); }
.dx-ep-flags { display: flex; gap: 8px; margin-left: auto; }
.dx-flag {
  font-size: 10.5px; color: var(--dx-dim); border: 1px solid var(--dx-line);
  border-radius: 6px; padding: 3px 8px; white-space: nowrap;
}
.dx-flag.auth { color: var(--dx-amber-soft); border-color: rgba(251,191,36,0.25); }
/* endpoint rhythm runs on a 4px scale: head →16→ summary →12→ desc →28→ block */
.dx-summary { font-size: 15px; color: var(--dx-ink-2); margin: 16px 0 0; font-weight: 500; }
.dx-desc { color: var(--dx-mut); font-size: 13.5px; line-height: 1.62; margin: 12px 0 0; max-width: 60ch; }
.dx-desc p { margin: 0 0 12px; }
.dx-desc code, .dx-inline-code {
  font-size: 12px; color: var(--dx-green-soft); background: color-mix(in srgb, var(--dx-green) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--dx-green) 14%, transparent); border-radius: 5px; padding: 1px 5px;
}

/* param tables */
.dx-block-h {
  display: flex; align-items: center; gap: 9px; margin: 28px 0 12px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dx-dim);
}
.dx-block-h::after { content: ""; flex: 1; height: 1px; background: var(--dx-line); }
.dx-params { display: flex; flex-direction: column; }
.dx-param {
  display: grid; grid-template-columns: minmax(0, 220px) 1fr; gap: 8px 24px;
  padding: 14px 2px; border-top: 1px solid var(--dx-line); align-items: start;
}
.dx-param:first-child { border-top: none; }
.dx-param-key { display: flex; flex-direction: column; gap: 6px; }
.dx-param-name { font-size: 13px; color: var(--dx-ink); font-weight: 600; word-break: break-all; }
.dx-param-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dx-tag {
  font-size: 10px; letter-spacing: 0.03em; color: var(--dx-mut);
  border: 1px solid var(--dx-line); border-radius: 5px; padding: 1px 6px;
}
.dx-tag.req { color: var(--dx-amber-soft); border-color: rgba(251,191,36,0.28); }
.dx-tag.type { color: var(--dx-cyan); border-color: rgba(103,232,249,0.22); }
.dx-param-body { font-size: 12.5px; color: var(--dx-mut); line-height: 1.65; }
.dx-param-body code { font-size: 11.5px; color: var(--dx-green-soft); background: color-mix(in srgb, var(--dx-green) 8%, transparent); border-radius: 4px; padding: 1px 4px; }
.dx-enum { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.dx-enum-v { font-size: 11px; color: var(--dx-ink-2); background: rgba(255,255,255,0.05); border: 1px solid var(--dx-line); border-radius: 5px; padding: 1px 7px; }
.dx-enum-v.def { color: var(--dx-green); border-color: color-mix(in srgb, var(--dx-green) 30%, transparent); }

/* response header chips */
.dx-hchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.dx-hchip { font-size: 11px; color: var(--dx-green-soft); background: color-mix(in srgb, var(--dx-green) 6%, transparent); border: 1px solid color-mix(in srgb, var(--dx-green) 16%, transparent); border-radius: 6px; padding: 2px 8px; }

/* status list */
.dx-status-row { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; border-top: 1px solid var(--dx-line); font-size: 13px; }
.dx-status-row:first-child { border-top: none; }
.dx-code-n { font-weight: 700; min-width: 40px; }
.dx-code-2xx { color: var(--dx-green); }
.dx-code-3xx { color: var(--dx-cyan); }
.dx-code-4xx { color: var(--dx-amber); }
.dx-code-5xx { color: var(--dx-pink); }
.dx-status-row .d { color: var(--dx-mut); }

/* generic note */
.dx-note {
  border-left: 2px solid var(--dx-green); background: color-mix(in srgb, var(--dx-green) 5%, transparent);
  border-radius: 0 10px 10px 0; padding: 12px 16px; margin: 20px 0; font-size: 12.5px;
  color: var(--dx-ink-2); line-height: 1.7;
}
.dx-note code { color: var(--dx-green-soft); }

/* ── right code terminal ──
   A continuous, full-height ground the terminals sit ON, rather than cards
   floating over the page. --dx-rail/--dx-rail-edge resolve at :root so this
   stays correct on paper too, where .dx-code re-pins the pane tokens dark. */
.dx-code {
  position: sticky; top: var(--dx-top-h); align-self: start;
  height: calc(100vh - var(--dx-top-h)); padding: 20px 18px;
  border-left: 1px solid var(--dx-rail-edge); background: var(--dx-rail);
}
.dx-code-sticky { display: flex; flex-direction: column; gap: 16px; max-height: 100%; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--dx-faint) transparent; }
.dx-code-sticky::-webkit-scrollbar { width: 8px; }
.dx-code-sticky::-webkit-scrollbar-thumb { background: var(--dx-faint); border-radius: 8px; }
.dx-term-stack { display: flex; flex-direction: column; gap: 14px; }
.dx-term {
  border: 1px solid var(--dx-line-2); border-radius: var(--dx-radius); overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--dx-green) 3%, transparent), transparent 40%), #05070500;
  background-color: #060806; box-shadow: 0 26px 70px rgba(0,0,0,0.5);
  display: flex; flex-direction: column; min-height: 0;
}
.dx-term-bar {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-bottom: 1px solid var(--dx-line); background: rgba(255,255,255,0.015);
}
.dx-dots { display: flex; gap: 6px; }
.dx-dots span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.12); }
.dx-dots span:first-child { background: rgba(255,92,168,0.5); }
.dx-dots span:nth-child(2) { background: rgba(251,191,36,0.5); }
.dx-dots span:nth-child(3) { background: color-mix(in srgb, var(--dx-green) 55%, transparent); }
.dx-term-title { font-size: 11px; color: var(--dx-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-term-copy {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--dx-mut); background: rgba(255,255,255,0.04);
  border: 1px solid var(--dx-line); border-radius: 6px; padding: 3px 9px; transition: color 0.15s, border-color 0.15s;
}
.dx-term-copy:hover { color: var(--dx-green-soft); border-color: color-mix(in srgb, var(--dx-green) 30%, transparent); }
.dx-term-copy.ok { color: var(--dx-green); border-color: color-mix(in srgb, var(--dx-green) 40%, transparent); }

/* language tabs */
.dx-langs { display: flex; gap: 2px; padding: 8px 12px 0; border-bottom: 1px solid var(--dx-line); background: rgba(255,255,255,0.01); }
.dx-lang {
  font-size: 11.5px; color: var(--dx-dim); background: none; border: none;
  padding: 7px 11px; border-bottom: 2px solid transparent; transition: color 0.13s;
}
.dx-lang:hover { color: var(--dx-mut); }
.dx-lang.is-on { color: #eafff1; border-bottom-color: var(--dx-green); }

.dx-pre {
  margin: 0; padding: 15px 16px; overflow: auto; font-size: 12.5px; line-height: 1.7;
  scrollbar-width: thin; scrollbar-color: var(--dx-faint) transparent; min-height: 0;
}
/* request block sizes to its content (capped); the response fills the rest */
.dx-term > .dx-sample.dx-pre { flex: 0 0 auto; max-height: 44vh; }
.dx-resp { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.dx-resp .dx-pre { flex: 1; }
.dx-pre::-webkit-scrollbar { width: 8px; height: 8px; }
.dx-pre::-webkit-scrollbar-thumb { background: var(--dx-faint); border-radius: 8px; }
.dx-pre code { white-space: pre; display: block; color: var(--dx-ink-2); }

/* response sub-panel */
.dx-resp-bar {
  display: flex; align-items: center; gap: 10px; padding: 9px 14px;
  border-top: 1px solid var(--dx-line); border-bottom: 1px solid var(--dx-line);
  background: rgba(255,255,255,0.015);
}
.dx-resp-bar .lbl { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dx-dim); }
.dx-resp-status { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--dx-green); }
.dx-resp-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dx-green); box-shadow: 0 0 8px color-mix(in srgb, var(--dx-green) 70%, transparent); }
.dx-resp-tabs { margin-left: auto; display: flex; gap: 2px; }
.dx-resp-tab { font-size: 11px; color: var(--dx-dim); background: none; border: none; padding: 3px 8px; border-radius: 6px; }
.dx-resp-tab.is-on { color: #eafff1; background: rgba(255,255,255,0.06); }

/* language visibility — driven by html[data-lang] + localStorage, no JS state */
.dx-sample { display: none; }
.dx-sample.always { display: block; }
html[data-lang="curl"] .dx-sample[data-lang="curl"],
html[data-lang="js"] .dx-sample[data-lang="js"],
html[data-lang="python"] .dx-sample[data-lang="python"],
html[data-lang="go"] .dx-sample[data-lang="go"] { display: block; }
.dx-resp-body { display: none; }
.dx-resp-body.is-on { display: block; }

/* syntax tokens */
.tok-key { color: var(--dx-green-soft); }
.tok-str { color: #b7e9c6; }
.tok-num { color: var(--dx-amber); }
.tok-bool { color: var(--dx-purple); }
.tok-null { color: var(--dx-dim); }
.tok-punc { color: var(--dx-dim); }
.tok-flag { color: var(--dx-amber-soft); }
.tok-cmd { color: var(--dx-green); font-weight: 600; }
.tok-url { color: #b7e9c6; }
.tok-var { color: var(--dx-cyan); }
.tok-comment { color: var(--dx-faint); font-style: italic; }
.tok-kw { color: var(--dx-purple); }

/* inline code blocks in main (mobile fallback for the terminal) */
.dx-inline-term { margin: 24px 0 0; border: 1px solid var(--dx-line-2); border-radius: var(--dx-radius); overflow: hidden; }

/* ── command palette ── */
.dx-palette {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-start; justify-content: center;
  padding-top: 14vh; background: rgba(3,5,3,0.72); backdrop-filter: blur(4px);
}
.dx-palette[hidden] { display: none; }
.dx-palette-box {
  width: min(560px, 92vw); background: var(--dx-panel-2); border: 1px solid var(--dx-line-2);
  border-radius: 14px; box-shadow: 0 40px 100px rgba(0,0,0,0.6); overflow: hidden;
}
.dx-palette-box input {
  width: 100%; background: none; border: none; border-bottom: 1px solid var(--dx-line);
  color: var(--dx-ink); font-size: 15px; padding: 16px 18px;
}
.dx-palette-box input::placeholder { color: var(--dx-faint); }
.dx-palette-list { max-height: 46vh; overflow-y: auto; padding: 8px; }
/* same de-pill treatment as the nav: the caret marks the row, not a tint */
.dx-pal-item {
  position: relative;
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 9px 12px 9px 24px; border-radius: 0; background: none; border: none; color: var(--dx-mut); font-size: 13px;
}
.dx-pal-item .dx-m { width: 40px; font-size: 9.5px; font-weight: 800; flex-shrink: 0; }
.dx-pal-item .p { color: var(--dx-dim); font-size: 11.5px; margin-left: auto; }
.dx-pal-item.is-active, .dx-pal-item:hover { color: var(--dx-ink); }
.dx-pal-item.is-active::before {
  content: "\276F"; position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--dx-green); font-size: 10px; line-height: 1; font-weight: 800;
}
.dx-pal-empty { padding: 22px; text-align: center; color: var(--dx-dim); font-size: 13px; }

/* ── responsive ── */
@media (max-width: 1280px) and (min-width: 861px) {
  .dx-top { gap: 12px; padding-inline: 16px; }
  .dx-pills { gap: 4px; }
  .dx-pill { padding-inline: 10px; }
  .dx-top-r { gap: 10px; }
  /* three columns on a small laptop: give the gutters back to the prose */
  .dx-main { padding-inline: 32px; }
}
@media (max-width: 1180px) {
  .dx-shell { grid-template-columns: var(--dx-nav-w) minmax(0, 1fr); }
  .dx-code { display: none; }
  .dx-inline-term { display: block; }
}
@media (max-width: 1160px) and (min-width: 861px) {
  .dx-top-link { display: none; }
}
@media (min-width: 1181px) { .dx-inline-term { display: none; } }

@media (max-width: 860px) {
  .dx-shell { grid-template-columns: minmax(0, 1fr); }
  .dx-search-open { display: none; }
  .dx-menu { display: block; }
  .dx-top > .dx-pills { display: none; }
  .dx-top-r { display: none; }
  .dx-nav {
    position: fixed; top: var(--dx-top-h); left: 0; bottom: 0; width: min(300px, 84vw); z-index: 45;
    height: calc(100vh - var(--dx-top-h)); background: var(--dx-panel-2);
    transform: translateX(-104%); transition: transform 0.22s cubic-bezier(0.22,0.68,0.3,1);
    border-right: 1px solid var(--dx-line-2);
  }
  .dx-drawer-pills {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
    margin-bottom: 16px;
  }
  .dx-drawer-pills .dx-pill { justify-content: center; padding-inline: 8px; }
  .dx-drawer-theme {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 18px; padding: 16px 4px 0; border-top: 1px solid var(--dx-line);
  }
  .dx-drawer-theme-label { color: var(--dx-dim); font-size: 10.5px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; }
  .dx-nav.is-open { transform: none; box-shadow: 0 30px 90px rgba(0,0,0,0.6); }
  .dx-main { padding: 28px 20px 100px; }
}
@media (max-width: 520px) {
  .dx-param { grid-template-columns: 1fr; gap: 8px; }
  .dx-ep-flags { margin-left: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; }
}

/* headline green: use the theme's contrast-safe text green on paper */
:root[data-theme="light"] .dx-pill,
:root[data-theme="light"] .theme-seg-group { background: rgba(13,19,15,0.05); }
:root[data-theme="light"] .theme-seg[aria-pressed="true"] { background: rgba(13,19,15,0.09); }
:root[data-theme="light"] .dx-hero-title .g { color: var(--dx-green-soft); }