/* Shared neobrutalist component language for non-Docs, non-Landing pages. */
body:not(:has(.api-content)):not(:has(.hero-copy)) {
  --nb-ink: #000; --nb-paper: #fff; --nb-blue: #5294ff; --nb-yellow: #ffd93d;
  --nb-green: #05e17a; --nb-border: 3px solid #000; --nb-shadow: 4px 4px 0 #000;
  --bg: #dcebfe; --surface: #fff; --elevated: #fff3c4; --sunken: #eef4ff; --code-bg: #0a0a0a;
  --border: #000; --border-soft: #000; --border-strong: #000;
  --fg: #000; --fg-2: #1a1a1a; --fg-3: #333; --fg-4: #333; --fg-5: #4d4d4d;
  --accent: #5294ff; --accent-strong: #2f7bff; --accent-soft: #ffd93d; --accent-line: #000;
  --ok: #0a7a45; --warn: #a15c00; --danger: #c22326;
  --radius-sm: 3px; --radius: 5px; --radius-lg: 5px; color-scheme: light; color: #1a1a1a;
  background-color: #dcebfe;
  background-image: linear-gradient(to right, rgba(0,0,0,.08) 1px, transparent 1px), linear-gradient(to bottom, rgba(0,0,0,.08) 1px, transparent 1px);
  background-size: 70px 70px;
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
body[data-code-page] { font-family: 'DM Sans', system-ui, sans-serif; }
body:not(:has(.api-content)):not(:has(.hero-copy)),
body[data-code-page] { --font: 'DM Sans', system-ui, sans-serif; --font-mono: 'Space Mono', ui-monospace, monospace; }
body:not(:has(.api-content)):not(:has(.hero-copy)) h1,
body:not(:has(.api-content)):not(:has(.hero-copy)) h2,
body:not(:has(.api-content)):not(:has(.hero-copy)) h3,
body:not(:has(.api-content)):not(:has(.hero-copy)) h4 { color: #000; font-family: 'Space Grotesk', 'DM Sans', system-ui, sans-serif; }
body:not(:has(.api-content)):not(:has(.hero-copy)) ::selection { background: #ffd93d; color: #000; }
body:not(:has(.api-content)):not(:has(.hero-copy)) :focus-visible { outline: 3px solid #000; outline-offset: 2px; }

body:not(:has(.api-content)):not(:has(.hero-copy)) .auth-card,
body:not(:has(.api-content)):not(:has(.hero-copy)) .card,
body:not(:has(.api-content)):not(:has(.hero-copy)) .panel,
body:not(:has(.api-content)):not(:has(.hero-copy)) .status-hero,
body:not(:has(.api-content)):not(:has(.hero-copy)) .status-group,
body:not(:has(.api-content)):not(:has(.hero-copy)) .code-request,
body:not(:has(.api-content)):not(:has(.hero-copy)) .cl-card,
body:not(:has(.api-content)):not(:has(.hero-copy)) .info-card {
  background: #fff; border: 3px solid #000; border-radius: 5px; box-shadow: 4px 4px 0 #000;
}

body:not(:has(.api-content)):not(:has(.hero-copy)) .auth-logo .logo-mark,
body:not(:has(.api-content)):not(:has(.hero-copy)) .brand-mark,
body:not(:has(.api-content)):not(:has(.hero-copy)) .brand .logo-mark {
  width: 42px; height: 42px; padding: 4px; object-fit: contain; border: 3px solid #000;
  border-radius: 8px; background: #5294ff; box-shadow: 4px 4px 0 #000;
}

body:not(:has(.api-content)):not(:has(.hero-copy)) .btn,
body:not(:has(.api-content)):not(:has(.hero-copy)) button,
body:not(:has(.api-content)):not(:has(.hero-copy)) .google-btn,
body:not(:has(.api-content)):not(:has(.hero-copy)) .hero-btn,
body:not(:has(.api-content)):not(:has(.hero-copy)) .btn-solid,
body:not(:has(.api-content)):not(:has(.hero-copy)) .btn-ghost,
body:not(:has(.api-content)):not(:has(.hero-copy)) .btn-refresh,
body:not(:has(.api-content)):not(:has(.hero-copy)) .copy-btn {
  color: #000; background: #fff; border: 3px solid #000; border-radius: 5px; box-shadow: 3px 3px 0 #000;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
body:not(:has(.api-content)):not(:has(.hero-copy)) .btn-primary,
body:not(:has(.api-content)):not(:has(.hero-copy)) .btn-solid,
body:not(:has(.api-content)):not(:has(.hero-copy)) [type=submit],
body:not(:has(.api-content)):not(:has(.hero-copy)) .google-btn { background: #ffd93d; font-weight: 700; }
body:not(:has(.api-content)):not(:has(.hero-copy)) .btn:hover,
body:not(:has(.api-content)):not(:has(.hero-copy)) button:hover,
body:not(:has(.api-content)):not(:has(.hero-copy)) .google-btn:hover,
body:not(:has(.api-content)):not(:has(.hero-copy)) .hero-btn:hover,
body:not(:has(.api-content)):not(:has(.hero-copy)) .btn-solid:hover,
body:not(:has(.api-content)):not(:has(.hero-copy)) .btn-ghost:hover,
body:not(:has(.api-content)):not(:has(.hero-copy)) .btn-refresh:hover,
body:not(:has(.api-content)):not(:has(.hero-copy)) .copy-btn:hover {
  color: #000; background: #ffd93d; transform: translate(2px, 2px); box-shadow: 1px 1px 0 #000;
}

body:not(:has(.api-content)):not(:has(.hero-copy)) input,
body:not(:has(.api-content)):not(:has(.hero-copy)) textarea,
body:not(:has(.api-content)):not(:has(.hero-copy)) select {
  border: 2px solid #000; border-radius: 3px; background: #fff; color: #000;
}
body:not(:has(.api-content)):not(:has(.hero-copy)) input:focus,
body:not(:has(.api-content)):not(:has(.hero-copy)) textarea:focus,
body:not(:has(.api-content)):not(:has(.hero-copy)) select:focus { outline: 2px solid #000; outline-offset: 2px; box-shadow: 3px 3px 0 #000; }

body:not(:has(.api-content)):not(:has(.hero-copy)) .topbar,
body:not(:has(.api-content)):not(:has(.hero-copy)) .dash-topbar,
body:not(:has(.api-content)):not(:has(.hero-copy)) .site-header { background: #fff; border-color: #000; }
body:not(:has(.api-content)):not(:has(.hero-copy)) .topbar { border-right: 3px solid #000; }
body:not(:has(.api-content)):not(:has(.hero-copy)) .toplink:hover,
body:not(:has(.api-content)):not(:has(.hero-copy)) .side-link:hover,
body:not(:has(.api-content)):not(:has(.hero-copy)) .user-menu-row:hover { background: #ffd93d; color: #000; }
body:not(:has(.api-content)):not(:has(.hero-copy)) .side-link.active { background: #ffd93d; color: #000; border: 2px solid #000; box-shadow: 2px 2px 0 #000; }
body:not(:has(.api-content)):not(:has(.hero-copy)) .brand::before,
body:not(:has(.api-content)):not(:has(.hero-copy)) .mb-brand::before { border: 3px solid #000; border-radius: 5px; background-color: #5294ff; box-shadow: 2px 2px 0 #000; }

body:not(:has(.api-content)):not(:has(.hero-copy)) .status-pill,
body:not(:has(.api-content)):not(:has(.hero-copy)) .status-badge,
body:not(:has(.api-content)):not(:has(.hero-copy)) .badge,
body:not(:has(.api-content)):not(:has(.hero-copy)) .tag,
body:not(:has(.api-content)):not(:has(.hero-copy)) .pill { border: 2px solid #000; border-radius: 3px; background: #a8f0c6; color: #000; }
body:not(:has(.api-content)):not(:has(.hero-copy)) .group-head,
body:not(:has(.api-content)):not(:has(.hero-copy)) .group-title,
body:not(:has(.api-content)):not(:has(.hero-copy)) .group-count,
body:not(:has(.api-content)):not(:has(.hero-copy)) .status-group > header { background: #ffd93d; color: #000; }
body:not(:has(.api-content)):not(:has(.hero-copy)) .status-group .row,
body:not(:has(.api-content)):not(:has(.hero-copy)) .status-row { background: #fff; color: #000; border-color: #000; }
body:not(:has(.api-content)):not(:has(.hero-copy)) .toast { border: 3px solid #000; border-radius: 4px; background: #ffd93d; color: #000; box-shadow: 4px 4px 0 #000; }
body:not(:has(.api-content)):not(:has(.hero-copy)) .auth-footer { border-color: #000; }

/* Code pages reuse the Docs left rail and should keep its full-width nav rows. */
body[data-code-page] {
  --bg: #dcebfe; --surface: #fff; --elevated: #fff3c4; --code-bg: #0a0a0a;
  --fg: #000; --fg-2: #1a1a1a; --fg-3: #333; --fg-4: #333; --fg-5: #4d4d4d;
  --border: #000; --border-soft: #000; --border-strong: #000;
  background-color: #dcebfe;
  background-image: linear-gradient(to right, rgba(0,0,0,.08) 1px, transparent 1px), linear-gradient(to bottom, rgba(0,0,0,.08) 1px, transparent 1px);
  background-size: 70px 70px;
  color: #1a1a1a;
  font-family: 'DM Sans', system-ui, sans-serif;
}
body[data-code-page] .title { color: #000; font-family: 'Space Grotesk', 'DM Sans', sans-serif; }
body[data-code-page] .brand,
body[data-code-page] .category-title,
body[data-code-page] .endpoint-path,
body[data-code-page] .code-item-name { font-family: 'Space Grotesk', 'DM Sans', sans-serif; }
body[data-code-page] .searchbar { border: 3px solid #000; border-radius: 5px; background: #fff; box-shadow: 4px 4px 0 #000; }
body[data-code-page] .searchbar input { border: 0; background: transparent; box-shadow: none; }
body[data-code-page] .api-content { border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
body[data-code-page] .category { margin-bottom: 18px; border: 3px solid #000; border-radius: 5px; background: #fff; box-shadow: 4px 4px 0 #000; overflow: hidden; }
body[data-code-page] .category-header { background: #ffd93d; color: #000; }
body[data-code-page] .category-title,
body[data-code-page] .endpoint-path,
body[data-code-page] .endpoint-desc,
body[data-code-page] .count-badge,
body[data-code-page] .code-item-name,
body[data-code-page] .code-item-cat { color: #000; }
body[data-code-page] .endpoint-row:hover { background: #fff1a8; }
body[data-code-page] .footer { border-color: #000; color: #333; }
body[data-code-page] .btn,
body[data-code-page] button { border: 2px solid #000; border-radius: 4px; background: #fff; color: #000; box-shadow: 3px 3px 0 #000; }
body[data-code-page] .btn-primary { background: #ffd93d; }
body[data-code-page] .method-badge { background: #a8f0c6; color: #000; border: 2px solid #000; }
body[data-code-page] .brand::before,
body[data-code-page] .mb-brand::before {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border: 3px solid #000;
  border-radius: 5px;
  background-color: #5294ff;
  background-image: url('/favicon.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px;
  box-shadow: 2px 2px 0 #000;
}
body[data-code-page] .code-item {
  margin: 0;
  border: 0;
  border-top: 2px solid #000;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  overflow: hidden;
}
body[data-code-page] .code-item:first-child { border-top: 0; }
body[data-code-page] .code-item .endpoint-row { min-height: 76px; padding: 14px 18px; }
body[data-code-page] .code-item-num { color: #333; font-family: 'Space Mono', monospace; }
body[data-code-page] .code-item-name { font-family: 'Space Grotesk', 'DM Sans', sans-serif; font-size: 16px; font-weight: 700; }
body[data-code-page] .code-item-cat { color: #333; }
body[data-code-page] .code-item .endpoint-arrow { color: #000; }
body[data-code-page] .code-tag { padding: 2px 8px; }
body[data-code-page] .category-body.code-body { max-height: none; padding: 0; opacity: 1; border-top: 3px solid #000; overflow: visible; }
body[data-code-page] .code-viewer-head { min-height: 58px; padding: 10px 16px; }
body[data-code-page] .code-body pre.code-pre {
  padding: 1rem;
  border: 0;
  background: rgb(33, 33, 33);
  color: #eff;
  font-family: 'JetBrains Mono', 'Ubuntu Mono', monospace;
  font-size: .875rem;
  line-height: 1.75;
  border-radius: 0;
  box-shadow: none;
}
body[data-code-page] .code-body pre.code-pre code { color: #eff; }
body[data-code-page] .code-pre .hljs-attr { color: #80cbc4; font-weight: 600; }
body[data-code-page] .code-pre .hljs-string { color: #c3e88d; }
body[data-code-page] .code-pre .hljs-number { color: #f78c6c; }
body[data-code-page] .code-pre .hljs-literal { color: #ff5370; font-weight: 700; }
body[data-code-page] .code-pre .hljs-punctuation,
body[data-code-page] .code-pre .hljs-operator,
body[data-code-page] .code-pre .hljs-subst { color: #89ddff; }
body[data-code-page] .code-pre .hljs-keyword { color: #c792ea; font-weight: 700; }
body[data-code-page] .code-pre .hljs-comment { color: #546e7a; font-style: italic; }
body[data-code-page] .code-head-actions .btn { min-height: 32px; }
body[data-code-page] .topbar {
  width: 280px;
  background: #fff;
  border-right: 3px solid #000 !important;
}
body[data-code-page] .brand {
  gap: 10px;
  padding: 20px 16px 18px;
  color: #000;
  font-family: 'Space Grotesk', 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
}
body[data-code-page] .brand::before {
  width: 30px;
  height: 30px;
  border: 3px solid #000;
  border-radius: 5px;
  background-color: #5294ff;
  background-image: url('/favicon.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px;
  box-shadow: 2px 2px 0 #000;
}
body[data-code-page] .brand-slash { color: #000; }
body[data-code-page] .brand-ver { padding: 1px 6px; border: 2px solid #000; border-radius: 3px; background: #ffd93d; color: #000; font-weight: 700; }
body[data-code-page] .side-scroll { padding: 6px 12px 18px; gap: 24px; }
body[data-code-page] .side-label { margin: 0 0 8px; padding: 0 4px; color: #000; font-family: 'Space Mono', monospace; font-size: 11px; font-weight: 700; }
body[data-code-page] .toplinks,
body[data-code-page] .side-cats { gap: 0; border-top: 2px solid #000; }
body[data-code-page] .toplinks a,
body[data-code-page] .side-cats a,
body[data-code-page] .side-cat-all,
body[data-code-page] .code-cat {
  min-height: 44px;
  padding: 9px 10px;
  border: 0;
  border-bottom: 2px solid #000;
  border-radius: 0;
  background: #fff;
  color: #000;
  font-size: 13.5px;
  font-weight: 600;
}
body[data-code-page] .toplinks a:hover,
body[data-code-page] .side-cats a:hover,
body[data-code-page] .side-cat-all:hover,
body[data-code-page] .code-cat:hover { background: #ffd93d; color: #000; }
body[data-code-page] .toplinks a.is-active,
body[data-code-page] .side-cats a.active,
body[data-code-page] .side-cat-all.is-active,
body[data-code-page] .code-cat.active { background: #ffd93d; color: #000; font-weight: 700; box-shadow: none; }
body[data-code-page] .toplinks svg,
body[data-code-page] .side-cats svg,
body[data-code-page] .side-cat-icon { color: #000; opacity: 1; }
body[data-code-page] .side-foot { padding: 12px 16px; border-top: 2px solid #000; color: #333; }
body[data-code-page] .code-list { border: 3px solid #000; border-radius: 5px; background: #fff; box-shadow: 4px 4px 0 #000; }
body[data-code-page] .code-item { border-color: #000; }
body[data-code-page] .code-item:hover .endpoint-row { background: #fff1a8; }
body[data-code-page] .code-tag { border: 2px solid #000; border-radius: 3px; background: #c084fc; color: #000; }
body[data-code-page] .code-viewer-head { background: #ffd93d; }
body[data-code-page] .code-body { border-top: 3px solid #000; }
body[data-code-page] .mobile-bar { background: #fff; border-bottom: 3px solid #000; }

/* Changelog uses the shared docs rail markup; keep its navigation block bold and structured. */
body:has(.cl-hero) .topbar {
  width: 280px;
  background: #fff;
  border-right: 3px solid #000 !important;
}
body:has(.cl-hero) .brand {
  gap: 10px;
  padding: 20px 16px 18px;
  color: #000;
  font-family: 'Space Grotesk', 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
}
body:has(.cl-hero) .brand::before {
  width: 30px;
  height: 30px;
  border: 3px solid #000;
  border-radius: 5px;
  background-color: #5294ff;
  background-image: url('/favicon.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px;
  box-shadow: 2px 2px 0 #000;
}
body:has(.cl-hero) .brand-slash { color: #000; }
body:has(.cl-hero) .brand-ver { padding: 1px 6px; border: 2px solid #000; border-radius: 3px; background: #ffd93d; color: #000; font-weight: 700; }
body:has(.cl-hero) .side-scroll { padding: 6px 12px 18px; }
body:has(.cl-hero) .toplinks { gap: 0; border-top: 2px solid #000; }
body:has(.cl-hero) .toplinks .side-label { margin: 0; padding: 12px 8px 8px; color: #000; font-weight: 700; }
body:has(.cl-hero) .toplinks a {
  min-height: 44px;
  padding: 9px 10px;
  border: 0;
  border-bottom: 2px solid #000;
  border-radius: 0;
  background: #fff;
  color: #000;
  font-size: 13.5px;
  font-weight: 600;
}
body:has(.cl-hero) .toplinks a:hover,
body:has(.cl-hero) .toplinks a.is-active { background: #ffd93d; color: #000; }
body:has(.cl-hero) .toplinks a.is-active { box-shadow: none; }
body:has(.cl-hero) .toplinks svg { color: #000; }
body:has(.cl-hero) .side-foot { border-top: 2px solid #000; color: #333; }
body:has(.cl-hero) .mobile-bar { background: #fff; border-bottom: 3px solid #000; }
@media (prefers-reduced-motion: reduce) {
  body:not(:has(.api-content)):not(:has(.hero-copy)) *, body:not(:has(.api-content)):not(:has(.hero-copy)) *::before, body:not(:has(.api-content)):not(:has(.hero-copy)) *::after { transition-duration: .01ms !important; }
}