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;
}

/* ── Compact support matrices ──
 * Mintlify gives every table cell a 150px minimum width, which forces a
 * six-column check/dash table to scroll horizontally in the content column.
 * Cells in a support matrix hold an icon or a short field name, so let them
 * shrink to their content. */
.support-matrix table {
  font-size: 0.8125rem;
}

.support-matrix td,
.support-matrix th {
  min-width: 0;
  padding-right: 0.5rem;
  white-space: nowrap;
}

.support-matrix th code {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  font-size: 0.6875rem;
}

/* ── Provider routing figures ──
 * Inline SVG illustrations from snippets/exports/ProviderRoutingFigures.jsx.
 * Part colors match the provider dashboard's FortunaBCostBar (chart-1, chart-3,
 * chart-12, negative, chart-4) and its competitive zone (positive); chart
 * colors are the same hex in both themes, so only neutrals change with it. */
.pr-fig,
.pr-mini {
  --pr-ink: #03080a;
  --pr-muted: rgb(3 8 10 / 0.69);
  --pr-rule: rgb(3 8 10 / 0.12);
  --pr-surface: #ffffff;
  --pr-positive-text: #007544;
  --pr-negative-text: #bf0024;
}

.dark .pr-fig,
.dark .pr-mini {
  --pr-ink: #fcfcfe;
  --pr-muted: rgb(252 252 254 / 0.627);
  --pr-rule: rgb(252 252 254 / 0.14);
  --pr-surface: #080d0f;
  --pr-positive-text: #34dfaa;
  --pr-negative-text: #ff2d55;
}

.pr-fig {
  margin: 1.5rem 0;
  padding: 1rem;
  overflow-x: auto;
  container-type: inline-size;
  border: 1px solid var(--pr-rule);
  border-radius: 8px;
  background: var(--pr-surface);
}

.pr-fig svg {
  display: block;
  width: 100%;
  height: auto;
}

.pr-mini {
  margin: 1rem 0 1.25rem;
}

.pr-mini svg {
  display: block;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

.pr-fig svg text,
.pr-mini svg text {
  font-family: inherit;
  font-size: 12px;
  fill: var(--pr-muted);
}

.pr-sw {
  display: inline-block;
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.pr-bg-price { background: #0088fe; }
.pr-bg-ttft { background: #ffbb28; }
.pr-bg-speed { background: #7b68ee; }
.pr-bg-rel { background: #ff2d55; }
.pr-bg-429 { background: #ff8042; }
.pr-bg-received { background: var(--pr-ink); }
/* Learned capacity is a limit, not a cost part, so its heading swatch is neutral. */
.pr-bg-capacity { background: rgb(var(--gray-400)); }

.pr-fill-ttft { fill: #ffbb28; }
.pr-fill-speed { fill: #7b68ee; }
.pr-fill-rel { fill: #ff2d55; }
.pr-fill-429 { fill: #ff8042; }

/* Charts */
.pr-fig .lbl { font-size: 13px; fill: var(--pr-ink); }
.pr-fig .num { fill: var(--pr-muted); font-variant-numeric: tabular-nums; }
.pr-fig .strong { fill: var(--pr-ink); font-weight: 600; }
.pr-fig .halo { paint-order: stroke; stroke: var(--pr-surface); stroke-width: 4px; stroke-linejoin: round; }
.pr-fig .axis { stroke: var(--pr-rule); stroke-width: 1; }
.pr-fig .zone { fill: rgb(0 191 111 / 0.12); }
.pr-fig .zone-lbl { font-weight: 600; fill: var(--pr-positive-text); }
.pr-fig .zone-lbl.muted { fill: var(--pr-muted); }
.pr-fig .edge { stroke: #00bf6f; stroke-width: 1.5; stroke-dasharray: 4 3; }
.pr-fig .edge-curve { fill: none; stroke: #00bf6f; stroke-width: 2; stroke-dasharray: 5 3; }
.pr-fig .curve { fill: none; stroke: var(--pr-ink); stroke-width: 2.5; }
.pr-fig .curve-fill { fill: var(--pr-ink); opacity: 0.04; }
.pr-fig .dot { fill: var(--pr-muted); fill-opacity: 0.8; stroke: var(--pr-surface); stroke-width: 1.5; }
.pr-fig .dot-in { fill: #00bf6f; stroke: var(--pr-surface); stroke-width: 1.5; }
.pr-fig .got { fill: none; stroke: var(--pr-ink); stroke-width: 2; }
.pr-fig .got-fill { fill: var(--pr-ink); opacity: 0.06; }
.pr-fig .cap { fill: none; stroke: #da70d6; stroke-width: 2.5; }
.pr-fig .real { fill: none; stroke: var(--pr-muted); stroke-width: 1.5; stroke-dasharray: 5 4; }
.pr-fig .rate { fill: #ff8042; }

.pr-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.375rem 1rem;
  margin-top: 0.75rem;
  font-size: 12px;
  color: var(--pr-muted);
}

.pr-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.pr-ln {
  display: inline-block;
  width: 18px;
  height: 0;
}

.pr-ln-cap { border-top: 2.5px solid #da70d6; }
.pr-ln-real { border-top: 1.5px dashed var(--pr-muted); }

/* Endpoint table under the tradeoff chart */
.pr-table {
  margin-top: 0.875rem;
  border-top: 1px solid var(--pr-rule);
  font-size: 12px;
}

.pr-row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 84px;
  gap: 0.5rem;
  align-items: center;
  padding: 0.375rem 0;
  border-bottom: 1px solid var(--pr-rule);
}

.pr-head { color: var(--pr-muted); white-space: nowrap; }
.pr-sub::before { content: ", "; }
.pr-name { font-weight: 600; color: var(--pr-ink); }
.pr-bar { display: flex; height: 10px; }
.pr-bar i { display: block; height: 100%; }
.pr-share { display: flex; align-items: center; gap: 0.375rem; }
.pr-share i { display: block; height: 10px; max-width: 54px; border-radius: 2px; background: var(--pr-muted); opacity: 0.5; }
.pr-share b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--pr-muted); }

@media (max-width: 560px) {
  .pr-row { grid-template-columns: 76px minmax(0, 1fr) 32px; }
  .pr-share i { display: none; }
  .pr-head { white-space: normal; }
  .pr-sub { display: block; }
  .pr-sub::before { content: none; }
}

/* SVG text shrinks with the figure, so enlarge it on narrow figures. */
@container (max-width: 480px) {
  .pr-fig svg text { font-size: 15px; }
  .pr-fig svg .lbl { font-size: 16px; }
}

@container (max-width: 400px) {
  .pr-fig svg text { font-size: 17px; }
  .pr-fig svg .lbl { font-size: 18px; }
}

/* Mini diagrams */
.pr-mini-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem 1.5rem;
}

.pr-mini-row svg { flex: 0 1 auto; min-width: 0; margin-inline: 0; }

@media (max-width: 640px) {
  .pr-mini-row { flex-wrap: wrap; }
}

.pr-mini .strong-lbl { fill: var(--pr-ink); font-weight: 600; }
.pr-mini .amt { text-anchor: end; font-variant-numeric: tabular-nums; }
.pr-mini .op { font-size: 20px; }
.pr-mini .paper { fill: var(--pr-surface); stroke: var(--pr-rule); stroke-width: 1; }
.pr-mini .usual { stroke: var(--pr-muted); stroke-width: 1; stroke-dasharray: 3 3; }
.pr-mini .sum-line { stroke: var(--pr-ink); stroke-width: 1; }
.pr-mini .price-pill { fill: #0088fe; opacity: 0.12; }
.pr-mini .pill-text { fill: var(--pr-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.pr-mini .neg-pill { fill: #ff2d55; opacity: 0.12; }
.pr-mini .neg-text { font-size: 13px; fill: var(--pr-negative-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.pr-mini .span-stream { fill: var(--pr-muted); opacity: 0.3; }
.pr-mini .span-total { fill: var(--pr-rule); }
.pr-mini .extra { opacity: 0.45; }
.pr-mini .bad { fill: none; stroke: #ff2d55; stroke-width: 1.5; }
.pr-mini .tree { fill: none; stroke: var(--pr-muted); stroke-width: 1; }
.pr-mini .brace { fill: none; stroke: var(--pr-muted); stroke-width: 1.25; }
.pr-mini .big-arrow { fill: none; stroke: var(--pr-ink); stroke-width: 3; }
.pr-mini .big-arrow-head,
.pr-mini .user-dot { fill: var(--pr-ink); }

/* Color-keyed lists and two-column lists in the page body */
.pr-factors ul {
  list-style: none;
  padding-left: 0;
}

/* Mintlify's prose list pads each item with !important for its dot bullet. */
.pr-factors li {
  padding-left: 0 !important;
}

.pr-factors li::before {
  display: none;
}

.pr-factors .pr-sw,
h3 .pr-sw {
  margin-right: 0.625rem;
  transform: translateY(1px);
}

h3 .pr-sw {
  width: 13px;
  height: 13px;
  transform: translateY(-2px);
}

.pr-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0 1.75rem;
}