style.css

/*
 * OpenRouter Docs — Bauhaus theme overrides
 *
 * Custom CSS for Mintlify to align with the bauhaus design system.
 * Uses Mintlify's exposed ID/element selectors for targeted styling.
 *
 * Brand palette:
 *   Ink #03080A   Cloud #FCFCFE   Grape #7624F4
 *   Volt #C8FF00  Coral #FF6849   Royal #035ADE
 */

/* ── Code font: Geist Mono ── */
@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600&display=swap');

/*
 * Inverse semantic pair mirrors packages/frontend/components/ui/theme.css.
 * Mintlify is a separate app, so its generated tooltip DOM uses the same
 * light Ink/Cloud and dark Cloud/Ink values through RGB channel variables.
 */
:root {
  --inverse: 3 8 10;
  --inverse-foreground: 252 252 254;
  --tooltip-background: var(--inverse);
  --tooltip-foreground: var(--inverse-foreground);
}

code,
pre,
pre code,
.code-block code,
[class*="code"] code {
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

/* ── Text selection: accent tint per DESIGN.md ── */
::selection {
  background: rgb(118 36 244 / 0.14);
}

.dark ::selection,
html.dark ::selection {
  background: rgb(200 255 0 / 0.14);
  color: inherit;
}

/* ── Dark-mode accent swap: Volt (#C8FF00 = rgb(200 255 0)) per DESIGN.md ──
 * Mintlify + Tailwind use space-separated RGB: rgb(var(--primary-light) / alpha).
 * Override accent in dark mode from Grape to Volt. */
.dark,
[data-theme="dark"],
html.dark {
  --primary: 200 255 0;
  --primary-light: 200 255 0;
  --primary-dark: 200 255 0;
  --light-primary: 200 255 0;
  --primary-foreground: 3 8 10;
  --inverse: 252 252 254;
  --inverse-foreground: 3 8 10;

  /* ── Dark-mode border: Cloud at 14% per DESIGN.md ── */
  --default-border-color: rgb(252 252 254 / 0.14);
}

/* ── Border radius: bauhaus 4/6/8px scale ── */
#navbar {
  border-radius: 0;
}

/* Sidebar active item */
#sidebar a[aria-current="page"],
nav[aria-label="Pages"] a[aria-current="page"] {
  border-radius: 8px;
}

/* Cards and code blocks */
[data-component-part="code-block-root"] {
  border-radius: 8px;
}

/* ── Link styling per DESIGN.md ──
 * underline at 40% opacity of current color, full on hover, offset 2px */
a:not([class]) {
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: rgb(0 0 0 / 0.4);
}

a:not([class]):hover {
  text-decoration-color: currentColor;
}

.dark a:not([class]),
html.dark a:not([class]) {
  text-decoration-color: rgb(255 255 255 / 0.4);
}

.dark a:not([class]):hover,
html.dark a:not([class]):hover {
  text-decoration-color: currentColor;
}

/* ── Sidebar badges: outline style ── */
.nav-tag-pill-text {
  background: transparent !important;
  color: rgb(0 0 0 / 0.5) !important;
  border: 1px solid rgb(0 0 0 / 0.2) !important;
}

.dark .nav-tag-pill-text,
html.dark .nav-tag-pill-text {
  background: transparent !important;
  color: rgb(252 252 254 / 0.5) !important;
  border: 1px solid rgb(252 252 254 / 0.2) !important;
}

/* Match the home navbar logo height (h-6 / 1.5rem). */
.nav-logo {
  height: 1.5rem;
}

/* ── Sidebar expand chevrons: raise dark-mode contrast ──
 * Collapsible group toggles render a caret whose default dark tone
 * (gray-600 on Ink) is nearly invisible, so it isn't clear which items
 * have subsections. Derive the caret from Cloud via the DESIGN.md opacity
 * scale: muted-foreground (Cloud `a0`) at rest, full Cloud (foreground) on
 * hover — no custom hex outside the brand palette. */
.dark nav[aria-label="Pages"] button[aria-expanded] svg.transition-transform,
html.dark nav[aria-label="Pages"] button[aria-expanded] svg.transition-transform {
  color: rgb(252 252 254 / 0.627);
}

.dark nav[aria-label="Pages"] button[aria-expanded]:hover svg.transition-transform,
html.dark nav[aria-label="Pages"] button[aria-expanded]:hover svg.transition-transform {
  color: rgb(252 252 254);
}

/* ── Sidebar expand chevrons: enlarge for legibility ──
 * The default caret (w-2 ≈ 8px) is easy to miss; bump its footprint so it
 * reads clearly as an expandable affordance. */
nav[aria-label="Pages"] button[aria-expanded] svg.transition-transform {
  width: 0.625rem;
  height: 0.625rem;
}

/* ── Tooltips: inverse surface pairing ──
 * Mintlify has a foreground variable for tooltips but no matching background
 * variable, so both values are mirrored here from the inverse pair. Its
 * tooltip popup renders through Base UI (role="tooltip" on a data-side popup
 * filled with bg-primary-dark, which is Volt in dark mode); the Radix
 * selectors cover the previous implementation. */
[role="tooltip"][data-side],
[data-radix-popper-content-wrapper]
  > div[data-state="delayed-open"],
[data-radix-popper-content-wrapper]
  > div[data-state="instant-open"] {
  background-color: rgb(var(--tooltip-background)) !important;
  color: rgb(var(--tooltip-foreground)) !important;
}

/* ── Callout + code block alignment ──
 * A code block that is the only child of a callout body carries Mintlify's default
 * prose margins (mt-5 mb-8), which push the snippet down so it no longer lines
 * up with the top-aligned callout icon. Drop those margins so the snippet's
 * top edge aligns with the icon. */
.callout [data-component-part="callout-content"] > .code-block:first-child {
  margin-top: 0;
}

.callout [data-component-part="callout-content"] > .code-block:last-child {
  margin-bottom: 0;
}

/* ── Floating code-block buttons: opaque background ──
 * Mintlify only backs the floating buttons (report / copy / ask) with
 * gray-100/gray-800 when the code block has no fade overlay
 * (group-[:not(:has([data-fade-overlay]))]). Collapsible/expandable blocks
 * always carry a fade overlay, so the buttons stay transparent and the code
 * text bleeds through behind them. Apply the same background unconditionally
 * so the buttons are legible on every code block. */
[data-floating-buttons] button {
  background-color: rgb(241 239 245);
}

.dark [data-floating-buttons] button,
html.dark [data-floating-buttons] button {
  background-color: rgb(40 38 44);
}

/* ── Changelog: Update tags as outline pills (matches sidebar badges) ── */
[data-component-part="update-tag"] {
  border: 1px solid rgb(0 0 0 / 0.2);
  border-radius: 9999px;
  padding: 0.125rem 0.625rem;
  font-size: 0.75rem;
  line-height: 1.25rem;
  color: rgb(0 0 0 / 0.6);
}

.dark [data-component-part="update-tag"],
html.dark [data-component-part="update-tag"] {
  border-color: rgb(252 252 254 / 0.2);
  color: rgb(252 252 254 / 0.6);
}

/* ── Navbar CTA: drop the chevron, pair label and background per theme ──
 * Mintlify renders the primary CTA with a trailing chevron, a text-white
 * label, and a bg-primary-dark fill in both themes (primary-dark maps to
 * docs.json colors.dark = Volt). Per DESIGN.md the pairings are white on
 * Grape in light mode and Ink on Volt in dark mode, which is exactly what
 * --primary already resolves to (Grape from docs.json, Volt via the
 * dark-mode swap above). */
#topbar-cta-button svg {
  display: none;
}

/* Mintlify pads the CTA pl-3/pr-2 to hug the chevron; even it out. */
#topbar-cta-button a {
  padding-right: 0.75rem;
}

#topbar-cta-button .bg-primary-dark {
  background-color: rgb(var(--primary));
}

.dark #topbar-cta-button .text-white,
html.dark #topbar-cta-button .text-white {
  color: rgb(3 8 10);
}

/* ── Changelog: selected filter pill readability ──
 * Mintlify renders the active filter as bg-primary + text-white/90. In dark
 * mode our primary is Volt (#C8FF00), so switch the text to Ink per DESIGN.md. */
.dark #changelog-filters-content button.bg-primary,
html.dark #changelog-filters-content button.bg-primary {
  color: rgb(3 8 10 / 0.9) !important;
}

/* ── Changelog: separate inline status badges from bullet text ── */
.changelog-status-badge {
  margin-left: 0.5rem;
}

.changelog-status-badge[data-color="gray"] {
  border: 1px solid rgb(3 8 10 / 0.3) !important;
}

.dark .changelog-status-badge[data-color="gray"],
html.dark .changelog-status-badge[data-color="gray"] {
  border-color: rgb(252 252 254 / 0.4) !important;
}

/* ── Mermaid: center diagrams in the content column ── */
.mermaid > svg {
  margin-inline: auto;
}