/* ═══════════════════════════════════════════════════════════════════
   API Reference (Redoc) — overrides on top of src/theme.ts.

   Redoc's literal colors are rewritten to DS tokens by scripts/build.ts
   (REDOC_COLOR_TOKENS), so both themes come from the tokens. This file only
   covers what the theme can't express. Anchored on Redoc's STABLE classes
   (menu-content, api-content, http-verb, operation-type, react-tabs__*),
   never on the per-build hashed ones; `!important` beats Redoc's inline
   styled rules.
   ═══════════════════════════════════════════════════════════════════ */

/* Sidebar sits below the sticky top nav. Redoc sets top/height inline. */
.menu-content {
  top: var(--top-nav-height) !important;
  height: calc(100vh - var(--top-nav-height)) !important;
  max-height: calc(100vh - var(--top-nav-height)) !important;
  border-right: 1px solid var(--border-default);
}

/* Headings follow the DS roles (product context): h1 Matangi, h2 Inter. */
.api-content h1 {
  font: var(--type-h1-font) !important;
  letter-spacing: var(--type-h1-tracking) !important;
  color: var(--text-heading) !important;
}

.api-content h2 {
  font: var(--type-h2-font) !important;
  font-size: var(--text-xl) !important;
  color: var(--text-heading) !important;
}

/* Section labels (Authorizations, Path Parameters, Request Body schema…). */
.api-content h5 {
  font-size: var(--text-sm) !important;
  font-weight: var(--weight-bold) !important;
  color: var(--text-muted) !important;
}

/* HTTP verb badges: background is the verb color (theme.ts → --verb-*);
   the label takes the matching --verb-*-text so it stays AA in both themes. */
.operation-type,
.http-verb {
  font-family: var(--font-mono) !important;
  font-weight: var(--weight-bold) !important;
  color: var(--verb-other-text) !important;
}

.operation-type.get, .http-verb.get { color: var(--verb-get-text) !important; }
.operation-type.post, .http-verb.post { color: var(--verb-post-text) !important; }
.operation-type.put, .http-verb.put { color: var(--verb-put-text) !important; }
.operation-type.patch, .http-verb.patch { color: var(--verb-patch-text) !important; }
.operation-type.delete, .http-verb.delete { color: var(--verb-delete-text) !important; }

/* Sample tabs (Payload / 200 / 4xx…): selected = DS accent. Status tabs
   keep their status hue as text when idle. */
.react-tabs__tab {
  border-color: var(--border-default) !important;
}

.react-tabs__tab--selected {
  background: var(--accent) !important;
  color: var(--accent-text) !important;
}

/* Search box at the top of the sidebar. */
.menu-content .search-input {
  color: var(--text-body);
}

.menu-content .search-input::placeholder {
  color: var(--input-placeholder);
}

/* URLs inside JSON samples: --link misses AA on the code surface; they read
   as string values there anyway. */
.redoc-json a {
  color: var(--syntax-str) !important;
}

/* Chevron next to "Authorizations:" ships without a fill (= black, invisible
   in the dark theme). */
.api-content h5 + svg {
  fill: var(--text-muted);
}