/* ============================================================
   RecurPost API documentation
   Self-contained stylesheet for the API/ mini-site. It carries the
   few app classes the page reuses (b-scale, icon-tile, hover-card,
   empty state disc) so the folder never reaches into ../css.
   ============================================================ */

:root {
  --api-text: #101010;
  --api-text-2: #374151;
  --api-surface: #fff;
  --api-tint: #e8f0fe;
  --api-highlight: #fff8e1;
  --api-code-inline: #B4235A;
  --api-muted: #6B7280;
  --api-subtle: #9CA3AF;
  --api-border: #E5E9EF;
  --api-bg: #F6F9FB;
  --api-primary: #0d6efd;
  --api-success: #10B981;
  --api-danger: #DC2626;
  --api-warning: #F59E0B;
  --api-code-bg: #0F172A;
  --api-code-head: #111C33;
  --api-code-line: #1E293B;
  --api-code-text: #E2E8F0;
  --api-topbar-h: 60px;
  --api-nav-w: 264px;
  --api-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  }

body.api-docs {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  color: var(--api-text);
  background: var(--api-bg);
  }

.api-docs code,
.api-docs kbd,
.api-docs pre {
  font-family: var(--api-mono);
  font-variant-ligatures: none;
  }

:where(.api-docs) code {
  font-size: 0.86em;
  color: var(--api-code-inline);
  }

/* ---------- carried app classes ---------- */

.b4 { font-size: 16px; }
.b5 { font-size: 14px; }
.b6 { font-size: 12px; }
.min-w-0 { min-width: 0; }

.api-docs .btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  }

.hover-card {
  color: var(--api-text);
  transition: border-color 0.16s ease-out, transform 0.16s ease-out, box-shadow 0.16s ease-out;
  }

.hover-card:hover {
  color: var(--api-text);
  border-color: var(--api-primary) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(16, 16, 16, 0.06);
  }

.icon-tile {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  font-size: 20px;
  }

.icon-tile-sm {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  font-size: 16px;
  }

.icon-tile-blue { background: #dbe6f9; color: #0d6efd; }
.icon-tile-violet { background: #ede9fe; color: #6c5ce7; }
.icon-tile-emerald { background: #e7f7ee; color: #16a34a; }
.icon-tile-amber { background: #fef3c7; color: #b45309; }

.no-ctn-box {
  max-width: 500px;
  }

.dash-delete-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #fff1f2;
  display: flex;
  align-items: center;
  justify-content: center;
  }

.dash-delete-icon i {
  font-size: 26px;
  color: #ef4444;
  }

.dash-confirm-icon-primary { background: var(--api-tint); }
.dash-confirm-icon-primary i { color: #0d6efd; }

/* The inline pill sits in normal flow inside an overlay instead of floating */

.clw-preview-toggle.clw-preview-toggle-inline {
  position: static;
  box-shadow: none;
  }

/* ---------- top bar ---------- */

.api-topbar {
  height: var(--api-topbar-h);
  z-index: 1035;
  }

.api-logo {
  height: 22px;
  width: auto;
  }

.api-logo-tag {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--api-tint);
  color: var(--api-primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  }

/* Top bar: logo left, search in the true centre, actions right. The grid starts at 992px,
   where the menu button is gone and the logo fits beside a centred search. */

.api-topbar-row {
  display: flex;
  }

.api-topbar-end {
  margin-left: auto;
  }

@media (min-width: 992px) {
  .api-topbar-row {
    display: grid;
    grid-template-columns: 1fr minmax(240px, 440px) 1fr;
    }

  .api-topbar-end {
    justify-self: end;
    }

  .api-topbar-row .api-search-trigger.btn {
    width: 100%;
    }
  }

.api-search-trigger.btn {
  width: 280px;
  max-width: 100%;
  padding: 6px 8px 6px 12px;
  background: var(--api-bg);
  border: 1px solid var(--api-border);
  color: var(--api-muted);
  font-size: 13px;
  }

.api-search-trigger.btn:hover {
  border-color: #cfd6df;
  color: var(--api-text);
  background: var(--api-bg);
  }

.api-search-trigger kbd,
.api-kbd {
  padding: 2px 6px;
  border: 1px solid var(--api-border);
  border-radius: 4px;
  background: var(--api-surface);
  color: var(--api-muted);
  font-size: 11px;
  box-shadow: none;
  }

/* ---------- shell ---------- */

.api-nav {
  width: var(--api-nav-w);
  flex: 0 0 var(--api-nav-w);
  }

.api-nav-body {
  padding: 20px 12px 40px;
  }

.api-nav-group + .api-nav-group {
  margin-top: 2px;
  }

/* Collapsible sidebar groups: a chevron row that opens a list of endpoints */

.api-nav-toggle {
  padding: 7px 10px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--api-text);
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  }

.api-nav-toggle:hover {
  background: var(--api-bg);
  }

.api-nav-toggle > i:first-child {
  width: 18px;
  flex: 0 0 18px;
  color: var(--api-muted);
  font-size: 16px;
  text-align: center;
  }

.api-nav-chevron {
  color: var(--api-subtle);
  font-size: 16px;
  transition: transform 0.2s ease-out;
  }

.api-nav-toggle.collapsed .api-nav-chevron {
  transform: rotate(-90deg);
  }

.api-nav-sub {
  margin: 2px 0 8px 16px;
  padding-left: 6px;
  border-left: 1px solid var(--api-border);
  }

.api-nav-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 6px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--api-subtle);
  }

.api-nav-title i {
  font-size: 14px;
  }

.api-nav-link {
  position: relative;
  padding: 6px 10px;
  border-radius: 6px;
  color: var(--api-text-2);
  font-size: 13.5px;
  text-decoration: none;
  transition: background-color 0.12s, color 0.12s;
  }

.api-nav-link:hover {
  background: var(--api-bg);
  color: var(--api-text);
  }

.api-nav-link.active {
  background: var(--api-tint);
  color: var(--api-primary);
  font-weight: 600;
  }

.api-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
  }

.api-narrow {
  max-width: 820px;
  }

/* ---------- hero ---------- */

.api-hero {
  padding: 56px 0 48px;
  background: var(--api-surface);
  }

.api-hero-title {
  margin: 0 0 10px;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.02em;
  }

.api-hero-lead {
  max-width: 620px;
  margin-bottom: 24px;
  font-size: 17px;
  line-height: 1.55;
  }

.api-baseurl-value {
  color: var(--api-text);
  font-size: 14px;
  font-weight: 500;
  }

/* AI agent prompt card: a ready-made prompt people paste into their coding assistant */

.api-prompt-icon {
  color: #16a34a;
  font-size: 24px;
  }

.api-prompt {
  background: var(--api-bg);
  }

.api-prompt-text {
  color: var(--api-text-2);
  font-size: 12.5px;
  line-height: 1.7;
  white-space: pre-wrap;
  }

[data-bs-theme="dark"] .api-prompt-icon {
  color: #6EE7B7;
  }

/* ---------- sections ---------- */

.api-section {
  padding: 64px 0;
  border-bottom: 1px solid var(--api-border);
  scroll-margin-top: var(--api-topbar-h);
  }

.api-eyebrow {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--api-primary);
  }

.api-title {
  margin: 0 0 8px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  }

.api-lead {
  margin-bottom: 20px;
  color: var(--api-text-2);
  font-size: 15px;
  line-height: 1.6;
  }

/* ---------- endpoint bar ---------- */

.api-method {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 6px;
  background: #d1fae5;
  color: #047857;
  font-family: var(--api-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  }

.api-method-sm {
  padding: 1px 6px;
  font-size: 10px;
  }

.api-endpoint-path {
  color: var(--api-text);
  font-size: 14px;
  font-weight: 500;
  }

/* ---------- parameter groups ---------- */

.api-group-head {
  min-height: 44px;
  }

.api-group-toggle {
  background: transparent;
  border: 0;
  text-align: left;
  border-radius: inherit;
  }

.api-group-toggle:hover {
  background: var(--api-bg);
  }

.api-group-chevron {
  font-size: 18px;
  color: var(--api-muted);
  transition: transform 0.2s ease-out;
  }

.api-group-toggle:not(.collapsed) .api-group-chevron {
  transform: rotate(180deg);
  }

.api-group-tag {
  color: var(--api-muted);
  font-size: 16px;
  line-height: 1;
  }

.api-count {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--api-bg);
  border: 1px solid var(--api-border);
  color: var(--api-muted);
  font-size: 11px;
  font-weight: 600;
  }

.api-param {
  padding: 14px 16px;
  scroll-margin-top: calc(var(--api-topbar-h) + 16px);
  transition: background-color 0.4s ease-out;
  }

.api-param + .api-param {
  border-top: 1px solid var(--api-border);
  }

.api-param.is-target {
  background: var(--api-highlight);
  }

.api-param-name {
  min-width: 0;
  color: var(--api-text);
  font-size: 13px;
  font-weight: 600;
  overflow-wrap: anywhere;
  }

.api-param-type {
  color: var(--api-muted);
  font-family: var(--api-mono);
  font-size: 12px;
  }

.api-pill {
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  }

.api-pill-required {
  background: #fef2f2;
  color: var(--api-danger);
  }

.api-pill-optional {
  background: #f3f4f6;
  color: var(--api-muted);
  }

.api-param-desc {
  margin-top: 6px;
  color: var(--api-text-2);
  line-height: 1.55;
  }

.api-param-meta {
  margin-top: 6px;
  color: var(--api-muted);
  font-size: 12.5px;
  }

.api-param-meta code,
.api-prefix-examples code {
  display: inline-block;
  margin: 2px 2px 2px 0;
  padding: 1px 6px;
  border: 1px solid var(--api-border);
  border-radius: 4px;
  background: var(--api-bg);
  color: var(--api-text);
  font-size: 11.5px;
  }

.api-param-default {
  font-style: normal;
  }

.api-group-note {
  line-height: 1.5;
  }

.api-kv-key {
  width: 110px;
  flex: 0 0 110px;
  }

/* Platform chips: each network keeps its own tint so long option lists scan by colour and label */

.api-platform {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px 1px 6px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: middle;
  }

.api-platform i { font-size: 13px; }
.api-platform-fb { background: #e7f0ff; color: #1659c7; }
.api-platform-in { background: #fde8f1; color: #b4235a; }
.api-platform-tw { background: #eef0f2; color: #111827; }
.api-platform-ln { background: #e3eff8; color: #0a5d9a; }
.api-platform-pi { background: #fde8e8; color: #b91c1c; }
.api-platform-yt { background: #fdeaea; color: #c4161c; }
.api-platform-tk { background: #ecfdfb; color: #0f766e; }
.api-platform-th { background: #f1f1f1; color: #1f2937; }
.api-platform-bs { background: #e6f1fe; color: #1263c6; }
.api-platform-gmb { background: #e9f6ec; color: #1a7f37; }

/* ---------- callouts ---------- */

.api-callout {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
  }

.api-callout > i {
  font-size: 16px;
  line-height: 1.25;
  }

.api-callout code {
  color: inherit;
  font-weight: 600;
  }

/* ---------- code panels ---------- */

.api-code-sticky {
  position: sticky;
  top: calc(var(--api-topbar-h) + 24px);
  }

.api-code {
  overflow: hidden;
  background: var(--api-code-bg);
  border: 1px solid var(--api-code-line);
  }

.api-code-head {
  min-height: 44px;
  padding: 0 8px 0 14px;
  background: var(--api-code-head);
  border-bottom: 1px solid var(--api-code-line);
  }

.api-code-title {
  color: #CBD5E1;
  font-size: 12.5px;
  font-weight: 600;
  }

.api-code-body {
  margin: 0;
  max-height: 460px;
  padding: 16px;
  overflow: auto;
  color: var(--api-code-text);
  font-size: 12.5px;
  line-height: 1.65;
  }

.api-code-body code.hljs,
.api-code-body code {
  padding: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
  }

.api-code .btn-outline-secondary {
  --bs-btn-color: #94A3B8;
  --bs-btn-border-color: #334155;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #1E293B;
  --bs-btn-hover-border-color: #475569;
  --bs-btn-active-bg: #1E293B;
  --bs-btn-active-border-color: #475569;
  padding: 3px 10px;
  font-size: 12px;
  }

.api-code .btn-outline-secondary.is-copied {
  --bs-btn-color: #6EE7B7;
  --bs-btn-border-color: #065F46;
  }

.api-code-tabs {
  --bs-nav-link-color: #94A3B8;
  --bs-nav-link-hover-color: #E2E8F0;
  --bs-nav-underline-link-active-color: #fff;
  --bs-nav-underline-gap: 18px;
  --bs-nav-link-padding-y: 12px;
  align-self: stretch;
  flex-wrap: nowrap;
  font-size: 12.5px;
  }

.api-code-tabs .nav-link.active {
  border-bottom-color: var(--api-primary);
  }

.api-code-mini .api-code-body {
  padding: 12px 14px;
  }

/* ---------- endpoint index ---------- */

/* ---------- reference ---------- */

.api-status {
  display: inline-flex;
  justify-content: center;
  min-width: 44px;
  padding: 2px 8px;
  border-radius: 6px;
  font-family: var(--api-mono);
  font-size: 12px;
  font-weight: 700;
  }

.api-status:empty {
  display: none;
  }

.api-status-success { background: #d1fae5; color: #047857; }
.api-status-warning { background: #fef3c7; color: #b45309; }
.api-status-danger { background: #fee2e2; color: #b91c1c; }

.api-prefix {
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--api-tint);
  color: var(--api-primary);
  font-weight: 600;
  }

.api-table th {
  padding: 10px 16px;
  background: var(--api-bg);
  color: var(--api-muted);
  font-size: 12px;
  font-weight: 600;
  }

.api-table td {
  padding: 12px 16px;
  }

.api-table tr:last-child td {
  border-bottom: 0;
  }

.api-accordion {
  --bs-accordion-border-width: 0;
  --bs-accordion-btn-focus-box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.2);
  --bs-accordion-active-bg: var(--api-surface);
  --bs-accordion-active-color: var(--api-text);
  }

.api-accordion .accordion-item + .accordion-item {
  border-top: 1px solid var(--api-border);
  }

.api-accordion .accordion-button {
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  }

.api-issue {
  padding-top: 0;
  color: var(--api-text-2);
  line-height: 1.6;
  }

.api-issue ul {
  padding-left: 18px;
  }

/* ---------- footer ---------- */

.api-footer {
  padding: 28px 0;
  background: var(--api-surface);
  }

/* ---------- search ---------- */

.api-search .modal-content {
  border: 1px solid var(--api-border);
  border-radius: 12px;
  }

.api-search .modal-dialog {
  max-width: 600px;
  }

.api-search .form-control {
  font-size: 15px;
  }

.api-search-item {
  color: var(--api-text);
  border-radius: 8px;
  }

.api-search-item.active,
.api-search-item:hover {
  background: var(--api-tint);
  color: var(--api-text);
  }

/* the tag in front of each result: same width for every kind so the names line up */
.api-search-tag {
  min-width: 56px;
  margin-top: 2px;
  font-weight: 600;
  }

.api-search-item mark {
  padding: 0;
  background: #fde68a;
  color: inherit;
  }

/* ---------- try it ---------- */

.api-try .modal-content {
  border: 1px solid var(--api-border);
  border-radius: 12px;
  }

/* Response column: tinted, and it stays in view while a long form scrolls */

.api-try-side {
  background: var(--api-bg);
  border-top: 1px solid var(--api-border);
  }

.api-try-side-inner {
  position: sticky;
  top: 0;
  }

.api-try-empty {
  gap: 8px;
  min-height: 220px;
  background: var(--api-surface);
  border-style: dashed !important;
  color: var(--api-subtle);
  }

.api-try-empty i {
  font-size: 28px;
  }

.api-try-response .api-code-body {
  max-height: 56vh;
  }

.api-try-label {
  font-family: var(--api-mono);
  font-size: 12.5px;
  font-weight: 600;
  }

.api-try .form-control,
.api-try .form-select {
  font-size: 13px;
  }

.api-try-optional {
  border-color: var(--api-border) !important;
  }

.api-try-response {
  margin-top: 8px;
  }

/* ---------- capability areas ---------- */

.api-area {
  padding: 72px 0 8px;
  scroll-margin-top: var(--api-topbar-h);
  }

.api-area-title {
  margin: 0 0 8px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  }

.api-area .api-lead {
  max-width: 820px;
  }

/* ============================================================
   Dark mode
   theme.js sets data-bs-theme="dark" on <html>; Bootstrap's own
   components follow it, and these rules move the page's tokens.
   ============================================================ */

/* Charcoal palette: #181818 page, #1F1F1F panels, #282828 hover, #2B2B2B
   borders, #008BE0 accent. --api-primary-text is the lighter accent for
   text, since #008BE0 is too dark to read on a blue tint. */

[data-bs-theme="dark"] {
  --api-text: #F5F5F5;
  --api-text-2: #D4D4D4;
  --api-muted: #B0B0B0;
  --api-subtle: #8A8A8A;
  --api-border: #2B2B2B;
  --api-bg: #181818;
  --api-surface: #1F1F1F;
  --api-hover: #282828;
  --api-primary: #008BE0;
  --api-primary-text: #3DA5EC;
  --api-tint: rgba(0, 139, 224, 0.16);
  --api-highlight: rgba(245, 158, 11, 0.16);
  --api-code-inline: #F9A8D4;
  --api-code-bg: #141414;
  --api-code-head: #1A1A1A;
  --api-code-line: #2B2B2B;
  --bs-body-bg: var(--api-surface);
  --bs-body-bg-rgb: 31, 31, 31;
  --bs-body-color: var(--api-text);
  --bs-body-color-rgb: 245, 245, 245;
  --bs-emphasis-color: #fff;
  --bs-border-color: var(--api-border);
  --bs-secondary-color: var(--api-muted);
  --bs-secondary-bg: var(--api-hover);
  --bs-tertiary-bg: var(--api-hover);
  --bs-tertiary-bg-rgb: 40, 40, 40;
  --bs-primary: #008BE0;
  --bs-primary-rgb: 0, 139, 224;
  --bs-primary-text-emphasis: #3DA5EC;
  --bs-link-color: #3DA5EC;
  --bs-link-color-rgb: 61, 165, 236;
  --bs-link-hover-color: #6DBBF1;
  --bs-link-hover-color-rgb: 109, 187, 241;
  --bs-focus-ring-color: rgba(0, 139, 224, 0.35);
  }

/* White text on #008BE0 misses 4.5:1, so filled buttons sit one step deeper */

[data-bs-theme="dark"] .btn-primary {
  --bs-btn-bg: #0077C2;
  --bs-btn-border-color: #0077C2;
  --bs-btn-hover-bg: #006AAD;
  --bs-btn-hover-border-color: #006AAD;
  --bs-btn-active-bg: #005E9A;
  --bs-btn-active-border-color: #005E9A;
  --bs-btn-disabled-bg: #0077C2;
  --bs-btn-disabled-border-color: #0077C2;
  --bs-btn-focus-shadow-rgb: 0, 139, 224;
  }

/* Content sits on the darker page tone so the cards read as raised panels */

[data-bs-theme="dark"] .api-hero {
  background: var(--api-bg);
  }

[data-bs-theme="dark"] .api-logo-tag,
[data-bs-theme="dark"] .api-eyebrow,
[data-bs-theme="dark"] .api-prefix {
  color: var(--api-primary-text);
  }

/* Sidebar: hover lifts to #282828; the active page also gets an accent bar */

[data-bs-theme="dark"] .api-nav-toggle:hover,
[data-bs-theme="dark"] .api-nav-link:hover {
  background: var(--api-hover);
  }

[data-bs-theme="dark"] .api-nav-link.active {
  background: var(--api-hover);
  color: var(--api-text);
  box-shadow: inset 3px 0 0 var(--api-primary);
  }

[data-bs-theme="dark"] .api-search-item.active {
  background: var(--api-hover);
  }

/* Each logo file shows in its own theme */

[data-bs-theme="dark"] .api-logo-light,
.api-logo-dark {
  display: none;
  }

[data-bs-theme="dark"] .api-logo-dark {
  display: inline;
  }

[data-bs-theme="dark"] .api-search-trigger.btn:hover {
  border-color: #3A3A3A;
  }

[data-bs-theme="dark"] .hover-card:hover {
  box-shadow: none;
  }

[data-bs-theme="dark"] .api-method { background: rgba(16, 185, 129, 0.16); color: #6EE7B7; }
[data-bs-theme="dark"] .api-pill-required { background: rgba(239, 68, 68, 0.16); color: #FCA5A5; }
[data-bs-theme="dark"] .api-pill-optional { background: rgba(148, 163, 184, 0.14); color: var(--api-muted); }
[data-bs-theme="dark"] .api-status-success { background: rgba(16, 185, 129, 0.16); color: #6EE7B7; }
[data-bs-theme="dark"] .api-status-warning { background: rgba(245, 158, 11, 0.16); color: #FCD34D; }
[data-bs-theme="dark"] .api-status-danger { background: rgba(239, 68, 68, 0.16); color: #FCA5A5; }
/* Icon tiles: a dim wash of the hue with a saturated glyph */

[data-bs-theme="dark"] .icon-tile-blue { background: rgba(0, 139, 224, 0.16); color: #3DA5EC; }
[data-bs-theme="dark"] .icon-tile-violet { background: rgba(167, 139, 250, 0.16); color: #A78BFA; }
[data-bs-theme="dark"] .icon-tile-emerald { background: rgba(52, 211, 153, 0.14); color: #34D399; }
[data-bs-theme="dark"] .icon-tile-amber { background: rgba(251, 191, 36, 0.14); color: #FBBF24; }
[data-bs-theme="dark"] .dash-confirm-icon-primary i { color: var(--api-primary-text); }

[data-bs-theme="dark"] .api-platform { background: rgba(255, 255, 255, 0.06); }
[data-bs-theme="dark"] .api-platform-fb { color: #3DA5EC; }
[data-bs-theme="dark"] .api-platform-in { color: #F9A8D4; }
[data-bs-theme="dark"] .api-platform-tw,
[data-bs-theme="dark"] .api-platform-th { color: #E5E7EB; }
[data-bs-theme="dark"] .api-platform-ln { color: #7DD3FC; }
[data-bs-theme="dark"] .api-platform-pi,
[data-bs-theme="dark"] .api-platform-yt { color: #FCA5A5; }
[data-bs-theme="dark"] .api-platform-tk { color: #5EEAD4; }
[data-bs-theme="dark"] .api-platform-bs { color: #3DA5EC; }
[data-bs-theme="dark"] .api-platform-gmb { color: #86EFAC; }

/* The X and Threads brand marks are black; flip them so they read on dark */

[data-bs-theme="dark"] .api-platform-tw .rp-brand-ico,
[data-bs-theme="dark"] .api-platform-th .rp-brand-ico {
  filter: invert(1);
  }

[data-bs-theme="dark"] .api-search-item mark {
  background: rgba(245, 158, 11, 0.35);
  }

/* The floating preview pill comes from design-preview.css with light colours */

[data-bs-theme="dark"] .clw-preview-toggle {
  background: var(--api-surface);
  border-color: var(--api-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  }

[data-bs-theme="dark"] .clw-preview-toggle-group {
  background: var(--api-bg);
  }

[data-bs-theme="dark"] .clw-preview-toggle-btn:hover {
  color: var(--api-text);
  }

[data-bs-theme="dark"] .clw-preview-toggle-btn.active {
  background: var(--api-hover);
  color: var(--api-primary-text);
  }

/* ---------- responsive ---------- */

@media (min-width: 992px) {
  .api-try-side {
    border-top: 0;
    border-left: 1px solid var(--api-border);
    }

  .api-nav {
    position: sticky;
    top: var(--api-topbar-h);
    height: calc(100vh - var(--api-topbar-h));
    overflow-y: auto;
    }
  }

@media (max-width: 1199px) {
  .api-code-sticky {
    position: static;
    }
  }

@media (max-width: 991px) {
  .api-nav {
    width: var(--api-nav-w);
    }

  .api-wrap {
    padding: 0 24px;
    }
  }

@media (max-width: 576px) {
  .api-wrap {
    padding: 0 16px;
    }

  .api-hero {
    padding: 36px 0 32px;
    }

  .api-hero-title {
    font-size: 28px;
    }

  .api-section {
    padding: 44px 0;
    }

  .api-baseurl {
    display: flex !important;
    flex-wrap: wrap;
    }

  /* Label on its own line so the URL and its copy button stay together */
  .api-baseurl-label {
    flex-basis: 100%;
    }

  /* Phone header: icon-only search, a smaller logo; Get API Key stays in the hero */
  .api-search-trigger.btn {
    width: auto;
    padding: 8px;
    }

  .api-logo {
    height: 18px;
    }
  }

@media (prefers-reduced-motion: reduce) {
  .hover-card,
  .api-group-chevron,
  .api-nav-chevron,
  .api-param {
    transition: none;
    }

  .hover-card:hover {
    transform: none;
    }
  }