(Ordner MIT eigener Seite, E190/E192). Der Link-Zweig
erbte bisher die Geometrie von .docs-sidebar__link — 0.8125rem/400 gegen 0.75rem/600
der Toggle-Zeile, wodurch Kinder größer wirkten als ihre Eltern (Denny repro
2026-08-04, talent360-Portal). Beide Zweige teilen sich jetzt Größe und Padding;
das Gewicht bleibt der einzige Hierarchie-Unterschied. */
.docs-sidebar__item--tag-group > .docs-sidebar__link,
.docs-sidebar__item--tag-group > .docs-sidebar__branch > .docs-sidebar__link {
font-size: 0.75rem;
padding: 0.25rem 0.5rem;
font-weight: 500;
}
/* Chevron-Spalte reservieren, damit die Endpoint-Zahl aller Zeilentypen in einer
Flucht steht. Zeilen MIT Inhalt bekommen dort seit 2026-08-04 einen echten
Toggle (.docs-sidebar__branch-toggle, Regel darunter) — der Spacer greift nur
noch bei den kinderlosen. */
.docs-sidebar__item--tag-group > .docs-sidebar__link::after {
content: '';
width: 12px;
flex-shrink: 0;
}
/* Ordner-Zeile mit zwei Zielen (Denny 2026-08-04): das Label navigiert zur
Ordnerseite, der Chevron klappt auf. Vorher trugen nur reine Klapp-Ordner einen
Chevron, während Ordner MIT eigener Seite ihre Kinder je nach Art entweder
dauerhaft oder nur auf der aktiven Seite zeigten — dieselbe Zahl rechts, drei
verschiedene Verhalten. */
.docs-sidebar__branch {
display: flex;
align-items: center;
border-radius: 0.375rem;
}
/* Hover und Aktiv-Fläche liegen auf dem WRAPPER, nicht auf dem Link. Vorher endeten
sie 28px vor dem rechten Rand (die Chevron-Spalte gehört dem Button), während die
Klapp-Ordner-Zeile direkt daneben über die volle Breite läuft — zwei Zeilentypen,
zwei Hover-Formen, ohne dass die Zeile das erklärt (Denny repro 2026-08-04).
Der Chevron behält seinen EIGENEN Hover: sein Tint legt sich als zweite Schicht
auf den der Zeile und zeigt so, dass er ein separates Ziel ist. */
.docs-sidebar__branch:hover {
background-color: var(--rb-sidebar-hover-bg, color-mix(in srgb, var(--rb-sidebar-text) 8%, transparent));
}
/* Der Link malt seinen Hover nicht mehr selbst — er läge als doppelter Tint auf dem
der Zeile und machte die Label-Hälfte dunkler als die Chevron-Hälfte. */
.docs-sidebar__branch > .docs-sidebar__link:hover {
background-color: transparent;
}
/* Aktiv steht NACH Hover: beide Selektoren haben zwei Klassen (:has() zählt sein
spezifischstes Argument), bei Gleichstand entscheidet die Reihenfolge — und die
aktive Zeile soll unter dem Zeiger aktiv bleiben, wie .docs-sidebar__link--active:hover. */
.docs-sidebar__branch:has(> .docs-sidebar__link--active) {
background-color: var(--rb-sidebar-active-bg);
}
.docs-sidebar__branch > .docs-sidebar__link--active,
.docs-sidebar__branch > .docs-sidebar__link--active:hover {
background-color: transparent;
}
/* padding-right: 0 + 1.75rem Button ist gerechnet, nicht geschätzt: die
Klapp-Ordner-Zeile schließt mit [8px padding][12px Chevron] ab, ihr Chevron sitzt
also 14px vom rechten Rand und ihre Zahl endet bei 32px. Mit 1.75rem Button und
einem Link ohne rechtes Padding landen beide exakt dort — sonst stünden die
Chevrons und Zahlen der zwei Zeilentypen wieder in verschiedenen Fluchten, was
der Auslöser der ganzen Runde war. */
/* Der --tag-group-Präfix ist NICHT redundant, auch wenn __branch nur dort vorkommt:
ohne ihn hat die Regel zwei Klassen und verliert gegen die Kurzform
`padding: 0.25rem 0.5rem` der Drei-Klassen-Regel oben — das rechte Padding blieb
dadurch bei 8px stehen und die Zahl der zweigeteilten Zeilen endete 40px statt
32px vom Rand (Denny repro 2026-08-04). Beim Kürzen also die Rechnung darunter
mitlesen. */
.docs-sidebar__item--tag-group > .docs-sidebar__branch > .docs-sidebar__link {
flex: 1;
min-width: 0;
padding-right: 0;
}
/* Der Button füllt die reservierte Spalte — der Spacer im Link würde sie verdoppeln. */
.docs-sidebar__branch > .docs-sidebar__link::after {
content: none;
}
/* Kinderlose Zeile: kein Button, aber dieselbe Spalte, damit die Zahl fluchtet. */
.docs-sidebar__branch:not(:has(> .docs-sidebar__branch-toggle))::after {
content: '';
width: 1.75rem;
flex-shrink: 0;
}
.docs-sidebar__branch-toggle {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 1.75rem;
align-self: stretch;
padding: 0;
border: none;
background: none;
color: var(--rb-sidebar-text);
cursor: pointer;
border-radius: 0.375rem;
transition: background-color var(--rb-duration-fast) var(--rb-ease-out-expo);
}
.docs-sidebar__branch-toggle:hover {
background-color: var(--rb-sidebar-hover-bg, color-mix(in srgb, var(--rb-sidebar-text) 8%, transparent));
}
.docs-sidebar__branch-toggle:focus-visible {
outline: 2px solid var(--rb-primary);
outline-offset: -2px;
}
/* :has() statt eines Nachbar-Selektors am Button: der Button sitzt im __branch-
Wrapper, die Sublist ist Nachbar des WRAPPERS. (:has() ist im Portal bereits im
Einsatz, siehe .docs-code-block:has(> .docs-code-lang).) */
.docs-sidebar__branch:has(> .docs-sidebar__branch-toggle[aria-expanded="false"]) + .docs-sidebar__sublist {
display: none;
}
.docs-sidebar__branch-toggle[aria-expanded="false"] .docs-sidebar__chevron {
transform: rotate(-90deg);
}
/* E69-007 / v11: any sublist whose toggle is collapsed is hidden (folders + tag-groups) */
.docs-sidebar__folder-toggle[aria-expanded="false"] + .docs-sidebar__sublist {
display: none;
}
.docs-sidebar__folder-toggle[aria-expanded="false"] .docs-sidebar__chevron {
transform: rotate(-90deg);
}
/* Freshly expanded sublists ease in (display:none stays — no max-height fragility) */
@media (prefers-reduced-motion: no-preference) {
.docs-sidebar__folder-toggle[aria-expanded="true"] + .docs-sidebar__sublist {
animation: rb-fade-in var(--rb-duration-normal) var(--rb-ease-out-expo);
}
}
/* E69-010: Rendering optimization for large APIs (50+ tag-groups) */
.docs-sidebar__item--tag-group > .docs-sidebar__sublist {
content-visibility: auto;
contain-intrinsic-size: auto 0px;
}
/* Mobile sidebar — full-screen overlay with slide animation. The desktop
box-model dials (margin/radius/border) are neutralized here: an off-canvas
overlay with outer margin or rounded corners reads as broken. */
@media (max-width: 768px) {
.docs-sidebar {
display: block;
position: fixed;
top: var(--rb-header-offset);
left: 0;
bottom: 0;
width: 18rem;
height: auto;
margin: 0;
border-radius: 0;
z-index: 30;
transform: translateX(-100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: none;
overflow-y: auto;
}
/* Sidebar becomes a plain scrolling block; the nav is no longer the scroll area. */
.docs-sidebar__nav {
overflow: visible;
}
/* Branding lives in the page footer on mobile (see .docs-footer__branding). */
.docs-sidebar__footer {
display: none;
}
/* Off-canvas panel with a fixed 18rem width — --rb-sidebar-width has no effect
here, so the drag handle would be a dead control (and a stray touch target). */
.docs-sidebar__resizer {
display: none;
}
.docs-sidebar--open {
transform: translateX(0);
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
}
/* Gegenstück zum ausgeblendeten .docs-header__section-tabs weiter oben. */
.docs-sidebar__sections {
display: flex;
}
/* E69-005: Compact API tree on mobile */
.docs-sidebar__item--api-tree > .docs-sidebar__sublist {
padding-left: 0.25rem;
}
.docs-sidebar__item--tag-group > .docs-sidebar__sublist {
padding-left: 0.125rem;
}
.docs-sidebar__link--endpoint {
font-size: 0.6875rem;
padding: 0.1875rem 0.375rem;
}
}
/* ══════════════════════════════════════════════════════════════
Content — Article typography & elements
══════════════════════════════════════════════════════════════ */
.docs-content {
max-width: var(--rb-content-max-width);
padding: 2.5rem 3rem 4rem;
min-width: 0;
/* Flex column so the feedback widget + prev/next nav pin to the bottom
of the min-height grid cell on short pages instead of hugging the
article. The article & friends live in .docs-content__body (a plain
block — the floating page-actions button needs block formatting). */
display: flex;
flex-direction: column;
}
.docs-content__body {
flex: 1 0 auto;
width: 100%;
}
.docs-content article {
width: 100%;
}
/* ── Headings ── */
/* E125-001 (D2/D4): Mintlify-level hierarchy — bigger, tighter H1; H2 carries
weight through size + whitespace instead of an underline rule. */
/* E152-010: heading font family — falls back to the body font when no override.
E152-011: --rb-heading-font-weight (when set) overrides every level uniformly;
the fallback in each rule keeps the per-level default (700 / 600) otherwise. */
.docs-content h1,
.docs-content h2,
.docs-content h3,
.docs-content h4,
.docs-content h5,
.docs-content h6 {
font-family: var(--rb-heading-font-family, var(--rb-font-family));
}
.docs-content h1 {
font-size: calc(2.5rem * var(--rb-heading-scale, 1));
font-weight: var(--rb-heading-font-weight, 700);
line-height: 1.1;
letter-spacing: -0.035em;
margin-bottom: 1rem;
color: var(--rb-text);
}
.docs-content h2 {
font-size: calc(1.5rem * var(--rb-heading-scale, 1));
font-weight: var(--rb-heading-font-weight, 600);
line-height: 1.3;
letter-spacing: -0.02em;
margin-top: 3.5rem;
margin-bottom: 1rem;
color: var(--rb-text);
}
.docs-content h3 {
font-size: calc(1.375rem * var(--rb-heading-scale, 1));
font-weight: var(--rb-heading-font-weight, 600);
line-height: 1.35;
letter-spacing: -0.015em;
margin-top: 2.25rem;
margin-bottom: 0.625rem;
color: var(--rb-text);
}
.docs-content h4 {
font-size: calc(1.125rem * var(--rb-heading-scale, 1));
font-weight: var(--rb-heading-font-weight, 600);
line-height: 1.4;
margin-top: 1.75rem;
margin-bottom: 0.5rem;
color: var(--rb-text);
}
.docs-content h5, .docs-content h6 {
font-weight: var(--rb-heading-font-weight, 600);
margin-top: 1.5rem;
margin-bottom: 0.5rem;
color: var(--rb-text);
}
/* Hover-visible anchor links on headings */
.docs-content :where(h1, h2, h3, h4, h5, h6) {
position: relative;
}
.docs-content a.heading-anchor {
position: absolute;
left: -1.5rem;
top: 50%;
transform: translateY(-50%);
opacity: 0;
color: var(--rb-text-muted);
font-weight: 400;
font-size: 0.875em;
text-decoration: none;
transition: opacity 0.15s ease;
padding-right: 0.375rem;
}
.docs-content a.heading-anchor::before {
content: '#';
}
.docs-content :where(h1, h2, h3, h4, h5, h6):hover a.heading-anchor {
opacity: 1;
}
.docs-content a.heading-anchor:hover {
color: var(--rb-primary);
}
/* ── Paragraphs & Inline ── */
.docs-content p {
margin-bottom: 1.25rem;
color: var(--rb-text);
line-height: var(--rb-line-height);
}
.docs-content strong { font-weight: 600; color: var(--rb-text); }
/* Inline code with border for clarity */
.docs-content code {
font-family: var(--rb-code-font-family);
font-size: 0.85em;
background: var(--rb-code-bg);
color: var(--rb-code-text);
padding: 0.125rem 0.375rem;
border-radius: 0.25rem;
border: 1px solid var(--rb-border);
}
/* ── Links ── */
/* .docs-page-actions__* excluded (2026-07-17): the copy-page menu entries are
anchors (spec download, Open in Claude) — the content underline made them
read as inline links inside the dropdown. */
.docs-content a:not(.heading-anchor, .docs-card, .docs-prev-next__prev, .docs-prev-next__next, .docs-api-endpoint-link, .docs-page-actions__item, .docs-page-actions__primary) {
color: var(--rb-link);
text-decoration: underline;
text-decoration-color: color-mix(in srgb, var(--rb-link) 30%, transparent);
text-underline-offset: 0.2em;
transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.docs-content a:not(.heading-anchor, .docs-card, .docs-prev-next__prev, .docs-prev-next__next, .docs-api-endpoint-link, .docs-page-actions__item, .docs-page-actions__primary):hover {
color: var(--rb-link-hover);
text-decoration-color: var(--rb-link-hover);
}
/* ── Lists ── */
.docs-content ul, .docs-content ol {
margin-bottom: 1.25rem;
padding-left: 1.5rem;
}
.docs-content li {
margin-bottom: 0.375rem;
line-height: 1.7;
}
.docs-content li::marker {
color: var(--rb-text-muted);
}
.docs-content ul ul, .docs-content ol ol,
.docs-content ul ol, .docs-content ol ul {
margin-top: 0.375rem;
margin-bottom: 0.375rem;
}
/* ── Blockquotes — classic quote styling (editor parity) ──
The former callout-style tint made quotes look like half-broken
callouts once real callouts got their header/icon treatment; quotes
now read as quotes: italic, muted, thin bar, no background. */
.docs-content blockquote {
border-left: 3px solid color-mix(in srgb, var(--rb-text-muted) 45%, transparent);
padding: 0.125rem 0 0.125rem 1.25rem;
margin: 1.5rem 0;
color: var(--rb-text-muted);
font-style: italic;
}
.docs-content blockquote p:last-child {
margin-bottom: 0;
}
.docs-content blockquote blockquote {
margin-top: 0.75rem;
border-left-color: var(--rb-border);
}
/* ── Tables — rounded wrapper with alternating rows ── */
.docs-content .table-wrapper {
overflow-x: auto;
margin: 1.5rem 0;
border: 1px solid var(--rb-border);
border-radius: var(--rb-border-radius);
-webkit-overflow-scrolling: touch;
}
.docs-content table {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
margin: 0;
}
.docs-content thead {
background: var(--rb-surface);
}
.docs-content th {
text-align: left;
font-weight: 600;
padding: 0.6875rem 1rem;
border-bottom: 2px solid var(--rb-border);
font-size: 0.8125rem;
letter-spacing: 0.01em;
color: var(--rb-text);
}
.docs-content td {
padding: 0.6875rem 1rem;
border-bottom: 1px solid var(--rb-border);
vertical-align: top;
}
.docs-content tbody tr:last-child td {
border-bottom: none;
}
.docs-content tbody tr:nth-child(even) {
background: color-mix(in srgb, var(--rb-surface) 50%, transparent);
}
.docs-content tbody tr:hover {
background: var(--rb-surface-hover);
}
/* Fallback: tables without .table-wrapper still look decent */
.docs-content > table,
.docs-content article > table {
border: 1px solid var(--rb-border);
border-radius: var(--rb-border-radius);
overflow: hidden;
margin: 1.5rem 0;
}
/* ── HR — elegant centered dots ── */
.docs-content hr {
border: none;
margin: 2.5rem 0;
text-align: center;
line-height: 0;
}
.docs-content hr::after {
content: '\00b7\00a0\00a0\00b7\00a0\00a0\00b7';
font-size: 1.5rem;
letter-spacing: 0.5em;
color: var(--rb-text-muted);
opacity: 0.5;
}
/* ── Images ── */
.docs-content img {
border-radius: var(--rb-border-radius);
border: 1px solid var(--rb-border);
box-shadow: var(--rb-shadow-sm);
margin: 1.5rem 0;
}
/* ── Breadcrumb ── */
.docs-breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.25rem;
font-size: 0.8125rem;
color: var(--rb-text-muted);
margin-bottom: 1rem;
}
.docs-breadcrumb__list {
display: flex;
align-items: center;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
gap: 0.25rem;
}
.docs-breadcrumb__item {
display: flex;
align-items: center;
}
.docs-breadcrumb__item:not(:last-child)::after {
content: "/";
color: var(--rb-border);
font-size: 0.75rem;
margin-left: 0.375rem;
user-select: none;
}
.docs-breadcrumb__link {
color: var(--rb-text-muted);
text-decoration: none;
transition: color 0.15s ease;
}
.docs-breadcrumb__link:hover {
color: var(--rb-primary);
}
.docs-breadcrumb a {
color: var(--rb-text-muted);
text-decoration: none;
transition: color 0.15s ease;
}
.docs-breadcrumb a:hover {
color: var(--rb-primary);
}
.docs-breadcrumb__separator {
color: var(--rb-border);
font-size: 0.75rem;
margin: 0 0.125rem;
user-select: none;
}
/* E125-001 (D4): the trailing segment doubles as a Mintlify-style eyebrow
above the H1 — primary-tinted, medium weight. */
.docs-breadcrumb__current {
color: var(--rb-eyebrow-color, var(--rb-primary));
font-weight: 500;
}
/* E152-051: "section" eyebrow style — a single primary-tinted group label above
the H1 (Mintlify styling.eyebrows parity), replacing the breadcrumb trail.
--rb-eyebrow-color (E154 catalog): override-only, primary fallback. */
.docs-eyebrow {
color: var(--rb-eyebrow-color, var(--rb-primary));
font-size: 0.8125rem;
font-weight: 500;
margin-bottom: 1rem;
}
/* ── Page title & description ── */
.docs-page__title { margin-bottom: 0.5rem; }
.docs-page__description {
color: var(--rb-text-muted);
font-size: 1.125rem;
line-height: 1.6;
margin-bottom: 2.5rem;
}
@media (max-width: 768px) {
.docs-content {
padding: 1.5rem 1rem 3rem;
}
.docs-content h1 { font-size: 1.75rem; }
.docs-content h2 { font-size: 1.375rem; }
.docs-content h3 { font-size: 1.125rem; }
.docs-content a.heading-anchor { display: none; }
}
/* ══════════════════════════════════════════════════════════════
Table of Contents — Right-side navigation
══════════════════════════════════════════════════════════════ */
.docs-toc {
position: sticky;
top: var(--rb-header-offset);
height: calc(100vh - var(--rb-header-offset));
overflow-y: auto;
padding: 1.5rem 1rem 2rem;
width: 14rem;
font-size: 0.8125rem;
scrollbar-width: thin;
scrollbar-color: var(--rb-border) transparent;
}
.docs-toc::-webkit-scrollbar { width: 3px; }
.docs-toc::-webkit-scrollbar-track { background: transparent; }
.docs-toc::-webkit-scrollbar-thumb {
background: var(--rb-border);
border-radius: 3px;
}
/* E125-001 (D5): calmer TOC — sentence-case label, softer track line */
.docs-toc__title {
font-weight: 600;
font-size: 0.75rem;
letter-spacing: 0;
color: var(--rb-text);
margin-bottom: 0.75rem;
}
.docs-toc__list {
list-style: none;
border-left: 1px solid color-mix(in srgb, var(--rb-border) 70%, transparent);
}
.docs-toc__item {
margin-bottom: 0;
}
.docs-toc__link {
/* The active link nudges its text 2px right (set below). It rides on
padding, not transform: a transform would carry the marker border
along and slide it off the track line. */
--rb-toc-nudge: 0px;
display: block;
color: var(--rb-text-muted);
padding: 0.25rem 0 0.25rem calc(0.875rem + var(--rb-toc-nudge));
margin-left: -1px;
border-left: 2px solid transparent;
line-height: 1.45;
transition: color var(--rb-duration-slow) var(--rb-ease-out-expo),
border-color var(--rb-duration-slow) var(--rb-ease-out-expo),
padding-left var(--rb-duration-slow) var(--rb-ease-out-expo);
}
/* Indent nested entries via the link's text padding only, so the
active-marker border stays aligned with the TOC track line. */
.docs-toc__item--level-3 .docs-toc__link { padding-left: calc(1.625rem + var(--rb-toc-nudge)); }
.docs-toc__item--level-4 .docs-toc__link { padding-left: calc(2.375rem + var(--rb-toc-nudge)); }
.docs-toc__link:hover {
color: var(--rb-text);
}
/* Active TOC link: the 2px marker sits flush on the 1px track line
(margin-left: -1px above); only the text moves. */
.docs-toc__link--active {
--rb-toc-nudge: 2px;
color: var(--rb-primary);
border-left-color: var(--rb-primary);
font-weight: 500;
}
/* Back to top link */
.docs-toc__back-to-top {
display: inline-flex;
align-items: center;
gap: 0.375rem;
margin-top: 1.25rem;
font-size: 0.75rem;
color: var(--rb-text-muted);
opacity: 0.8;
transition: color 0.15s ease, opacity 0.15s ease;
}
.docs-toc__back-to-top:hover {
color: var(--rb-primary);
}
@media (max-width: 1280px) {
.docs-toc { display: none; }
}
/* ══════════════════════════════════════════════════════════════
Footer
══════════════════════════════════════════════════════════════ */
.docs-footer {
border-top: 1px solid var(--rb-border);
padding: 2rem 1.5rem;
text-align: center;
font-size: 0.8125rem;
color: var(--rb-text-muted);
}
.docs-footer__text {
margin-bottom: 0.75rem;
}
/* Desktop shows "Built with routebase" pinned in the sidebar; the footer only carries
it as a mobile fallback. A footer that would hold nothing but the branding therefore
collapses on desktop so it doesn't leave an empty bordered bar. */
.docs-footer__branding {
display: none;
justify-content: center;
}
.docs-footer--branding-only {
display: none;
}
@media (max-width: 768px) {
.docs-footer__branding {
display: flex;
}
.docs-footer--branding-only {
display: block;
}
}
.docs-footer__brand-link {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.25rem 0.625rem;
border: 1px solid color-mix(in srgb, var(--rb-border) 70%, transparent);
border-radius: 999px;
font-size: 0.6875rem;
line-height: 1;
color: var(--rb-text-muted);
opacity: 0.8;
text-decoration: none;
transition: opacity var(--rb-duration-fast) var(--rb-ease-out-expo), color var(--rb-duration-fast) var(--rb-ease-out-expo), border-color var(--rb-duration-fast) var(--rb-ease-out-expo);
}
.docs-footer__brand-link:hover {
color: var(--rb-text);
border-color: var(--rb-text-muted);
opacity: 1;
}
.docs-footer__brand-label {
opacity: 0.8;
}
.docs-footer__brand-mark {
flex-shrink: 0;
border-radius: 4px;
}
.docs-footer__brand-name {
font-family: 'Routebase Brand', var(--rb-font-family, system-ui, sans-serif);
font-weight: 900;
font-size: 0.75rem;
letter-spacing: -0.01em;
text-transform: lowercase;
color: var(--rb-text);
}
/* Inside the SIDEBAR footer the brand pill sits on --rb-sidebar-bg, not the
page background — it must read the sidebar text token, or a custom sidebar
color (e.g. dark blue on a light theme) renders it dark-on-dark. The mobile
page footer keeps the content tokens above. */
.docs-sidebar__footer .docs-footer__brand-link {
color: color-mix(in srgb, var(--rb-sidebar-text) 78%, transparent);
border-color: color-mix(in srgb, var(--rb-sidebar-text) 30%, transparent);
}
.docs-sidebar__footer .docs-footer__brand-link:hover {
color: var(--rb-sidebar-text);
border-color: color-mix(in srgb, var(--rb-sidebar-text) 55%, transparent);
}
.docs-sidebar__footer .docs-footer__brand-name {
color: var(--rb-sidebar-text);
}
/* ══════════════════════════════════════════════════════════════
Code Blocks — Syntax highlighted code areas
══════════════════════════════════════════════════════════════ */
/* Inline code within pre should reset border */
.docs-content pre code {
background: none;
padding: 0;
border: none;
font-size: 0.8125rem;
line-height: 1.7;
color: inherit;
}
/* E125-001 (D1): code blocks are always dark (both modes) with a Mintlify-style
chrome — a header row carrying the language label + an always-visible copy
button. The header renders whenever a language label exists (:has()); plain
blocks keep the button as a floating overlay. */
.docs-content pre {
background: var(--rb-code-block-bg);
color: var(--rb-code-block-text);
border: 1px solid var(--rb-code-block-border);
border-radius: 0.625rem;
padding: 1.125rem 1.25rem;
overflow-x: auto;
/* Der Block folgt der Syntax-Theme-Palette, nicht dem Seiten-Modus — ohne eigenes
color-scheme zeichnet der Browser die HELLE native Scrollbar des hellen Portals
auf den dunklen Block (Denny repro 2026-08-04). Die Variable kommt aus
GetCodeBlockColorScheme, damit github-light nicht ins Gegenteil kippt. Gilt mit
für Code-Group-/Code-Panel-Tabs, die dasselbe als Scroll-Element nutzen. */
color-scheme: var(--rb-code-block-scheme, dark);
margin: 1.25rem 0;
position: relative;
tab-size: 2;
-moz-tab-size: 2;
}
.docs-content pre code {
color: var(--rb-code-block-text);
}
/* Code block wrapper with metadata */
.docs-code-block {
position: relative;
margin: 1.25rem 0;
}
/* Language label — floating fallback (blocks without header layout) */
.docs-code-lang {
position: absolute;
top: 0.5rem;
left: 0.875rem;
font-size: 0.6875rem;
font-family: var(--rb-font-family);
color: var(--rb-code-block-text);
text-transform: uppercase;
letter-spacing: 0.04em;
pointer-events: none;
z-index: 1;
opacity: 0.55;
}
/* Copy button — always visible, quiet until hover */
.docs-code-copy-btn {
position: absolute;
top: 0.5rem;
right: 0.5rem;
display: flex;
align-items: center;
gap: 0.25rem;
padding: 0.25rem 0.5rem;
border: 1px solid transparent;
border-radius: 0.375rem;
background: transparent;
color: var(--rb-code-block-text);
font-size: 0.6875rem;
font-family: var(--rb-font-family);
cursor: pointer;
opacity: 0.55;
transition: opacity 0.15s ease, background-color 0.15s ease;
z-index: 1;
}
.docs-code-copy-btn:hover {
opacity: 1;
background: color-mix(in srgb, var(--rb-code-block-text) 10%, transparent);
}
/* "Copied" success state — the shell JS toggles this class and swaps the icon */
.docs-code-copy-btn--copied {
opacity: 1;
color: var(--rb-method-get);
}
@media (prefers-reduced-motion: no-preference) {
.docs-code-copy-btn--copied,
.docs-page-actions__item--copied {
animation: rb-pop var(--rb-duration-slow) var(--rb-ease-spring);
}
}
.docs-code-block pre {
margin: 0;
}
/* Header-row layout when a language label is present */
.docs-code-block:has(> .docs-code-lang) {
background: var(--rb-code-block-bg);
border: 1px solid var(--rb-code-block-border);
border-radius: 0.625rem;
overflow: hidden;
}
.docs-code-block:has(> .docs-code-lang) > .docs-code-lang {
position: static;
display: block;
padding: 0.5rem 1.25rem;
opacity: 0.55;
border-bottom: 1px solid color-mix(in srgb, var(--rb-code-block-text) 8%, transparent);
}
.docs-code-block:has(> .docs-code-lang) > pre {
border: none;
border-radius: 0;
}
/* ══════════════════════════════════════════════════════════════
HTTP Method Badges
══════════════════════════════════════════════════════════════ */
/* Tinted style matching the app-wide METHOD_COLORS_DOC standard — colored text
on a 10% tint with a 20% ring (same treatment as the sidebar method badges). */
.docs-method-badge {
--rb-method: var(--rb-text-muted);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.1875rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.6875rem;
font-weight: 600;
font-family: var(--rb-code-font-family);
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--rb-method);
background-color: color-mix(in srgb, var(--rb-method) 10%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rb-method) 20%, transparent);
min-width: 3rem;
line-height: 1.3;
}
.docs-method-badge--get { --rb-method: var(--rb-method-get); }
.docs-method-badge--post { --rb-method: var(--rb-method-post); }
.docs-method-badge--put { --rb-method: var(--rb-method-put); }
.docs-method-badge--delete { --rb-method: var(--rb-method-delete); }
.docs-method-badge--patch { --rb-method: var(--rb-method-patch); }
.docs-method-badge--head { --rb-method: var(--rb-method-get); }
.docs-method-badge--options { --rb-method: var(--rb-method-get); }
/* ══════════════════════════════════════════════════════════════
Prev/Next Navigation — quiet pill buttons with the page title below
(E158 round 4, Denny: no full-width cards; label is a rounded pill,
the title reads as plain bold text — Anthropic-docs style)
══════════════════════════════════════════════════════════════ */
.docs-prev-next {
display: flex;
justify-content: space-between;
gap: 1rem;
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid color-mix(in srgb, var(--rb-border) 50%, transparent);
}
.docs-prev-next__prev,
.docs-prev-next__next {
display: flex;
flex-direction: column;
gap: 0.875rem;
flex: 1;
max-width: 50%;
min-width: 0;
text-decoration: none;
}
.docs-prev-next__next { margin-left: auto; text-align: right; }
/* The label is the pill; the whole anchor stays clickable. align-self keeps the
pill hugging its content instead of stretching across the column. */
.docs-prev-next__label {
display: inline-flex;
align-items: center;
align-self: flex-start;
gap: 0.5rem;
padding: 0.5rem 1.125rem;
border: 1px solid var(--rb-btn-border, var(--rb-border));
border-radius: 9999px;
font-size: 0.875rem;
background: var(--rb-btn-bg, transparent);
color: var(--rb-btn-text, var(--rb-text-muted));
transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.docs-prev-next__next .docs-prev-next__label { align-self: flex-end; }
.docs-prev-next__prev:hover .docs-prev-next__label,
.docs-prev-next__next:hover .docs-prev-next__label {
border-color: var(--rb-btn-hover-border, var(--rb-primary));
color: var(--rb-btn-hover-text, var(--rb-primary));
background: var(--rb-btn-hover-bg, transparent);
}
/* Arrow indicators */
.docs-prev-next__prev .docs-prev-next__label::before {
content: '\2190';
font-size: 0.875rem;
}
.docs-prev-next__next .docs-prev-next__label::after {
content: '\2192';
font-size: 0.875rem;
}
.docs-prev-next__title {
font-weight: 600;
color: var(--rb-text);
font-size: 1.125rem;
line-height: 1.4;
}
.docs-prev-next__prev:hover .docs-prev-next__title,
.docs-prev-next__next:hover .docs-prev-next__title {
color: var(--rb-primary);
}
@media (max-width: 640px) {
.docs-prev-next {
flex-direction: column;
}
.docs-prev-next__prev,
.docs-prev-next__next {
max-width: 100%;
}
}
/* ══════════════════════════════════════════════════════════════
API Endpoint — Endpoint detail pages
══════════════════════════════════════════════════════════════ */
.docs-endpoint-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
padding: 0.875rem 1rem;
background: var(--rb-surface);
border: 1px solid var(--rb-border);
border-radius: var(--rb-border-radius);
}
.docs-endpoint-header--sticky {
position: sticky;
top: var(--rb-header-offset);
z-index: 10;
backdrop-filter: blur(8px);
background: color-mix(in srgb, var(--rb-surface) 92%, transparent);
}
.docs-endpoint-path {
font-family: var(--rb-code-font-family);
font-size: 0.9375rem;
font-weight: 500;
color: var(--rb-text);
word-break: break-all;
}
.docs-endpoint-section {
margin: 2rem 0;
}
.docs-endpoint-section h3 {
font-size: 1rem;
margin-bottom: 0.875rem;
}
/* Parameter table with improved readability */
.docs-params-table {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
border: 1px solid var(--rb-border);
border-radius: var(--rb-border-radius);
overflow: hidden;
}
.docs-params-table th {
text-align: left;
padding: 0.5rem 0.875rem;
background: var(--rb-surface);
border-bottom: 2px solid var(--rb-border);
font-weight: 600;
font-size: 0.6875rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--rb-text-muted);
}
.docs-params-table td {
padding: 0.5rem 0.875rem;
border-bottom: 1px solid var(--rb-border);
vertical-align: top;
}
.docs-params-table tbody tr:last-child td {
border-bottom: none;
}
.docs-params-table tbody tr:hover {
background: var(--rb-surface-hover);
}
.docs-param-name {
font-family: var(--rb-code-font-family);
font-weight: 500;
color: var(--rb-text);
font-size: 0.8125rem;
}
.docs-param-required {
color: var(--rb-method-delete);
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.docs-param-type {
font-family: var(--rb-code-font-family);
font-size: 0.8125rem;
color: var(--rb-text-muted);
}
/* ── Property list (BEM) — used by endpoint templates ── */
.docs-param-list {
border: 1px solid var(--rb-border);
border-radius: var(--rb-border-radius);
overflow: hidden;
font-size: 0.875rem;
}
.docs-param-list--compact {
border: none;
border-radius: 0;
}
.docs-param {
padding: 0.625rem 0.875rem;
border-bottom: 1px solid var(--rb-border);
}
.docs-param:last-child {
border-bottom: none;
}
.docs-param__header {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.docs-param__name {
font-family: var(--rb-code-font-family);
font-weight: 500;
color: var(--rb-text);
font-size: 0.8125rem;
}
.docs-param__type {
font-family: var(--rb-code-font-family);
font-size: 0.8125rem;
color: var(--rb-text-muted);
}
.docs-param__ref-name {
font-family: var(--rb-code-font-family);
font-size: 0.75rem;
color: var(--rb-primary);
background: color-mix(in srgb, var(--rb-primary) 8%, transparent);
padding: 0.0625rem 0.375rem;
border-radius: 0.25rem;
}
.docs-param__location {
font-size: 0.6875rem;
color: var(--rb-text-muted);
background: var(--rb-surface);
padding: 0.0625rem 0.375rem;
border-radius: 0.25rem;
border: 1px solid var(--rb-border);
}
.docs-param__required {
color: var(--rb-method-delete);
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.docs-param__description {
margin: 0.25rem 0 0 0;
font-size: 0.8125rem;
color: var(--rb-text-muted);
line-height: 1.5;
}
/* Nested / collapsible properties via / */
.docs-param__nested {
margin-top: 0.375rem;
}
.docs-param__nested summary {
cursor: pointer;
font-size: 0.75rem;
color: var(--rb-primary);
font-weight: 500;
list-style: none;
user-select: none;
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
.docs-param__nested summary::-webkit-details-marker {
display: none;
}
.docs-param__nested summary::before {
content: "▶";
font-size: 0.5rem;
transition: transform 0.15s ease;
display: inline-block;
}
.docs-param__nested[open] > summary::before {
transform: rotate(90deg);
}
.docs-param__nested-list {
margin-top: 0.375rem;
padding-left: 0.875rem;
border-left: 2px solid var(--rb-border);
}
.docs-param__nested-list .docs-param {
padding: 0.375rem 0 0.375rem 0.5rem;
border-bottom: 1px solid color-mix(in srgb, var(--rb-border) 50%, transparent);
}
.docs-param__nested-list .docs-param:last-child {
border-bottom: none;
}
/* Response status codes with colored left borders */
.docs-status-code {
font-family: var(--rb-code-font-family);
font-weight: 600;
font-size: 0.875rem;
}
.docs-status-code--2xx { color: var(--rb-method-get); }
.docs-status-code--4xx { color: var(--rb-method-put); }
.docs-status-code--5xx { color: var(--rb-method-delete); }
/* Response sections with colored left border indicators */
.docs-endpoint-response {
border-left: 3px solid var(--rb-border);
padding-left: 1rem;
margin: 1rem 0;
}
.docs-endpoint-response--2xx { border-left-color: var(--rb-method-get); }
.docs-endpoint-response--4xx { border-left-color: var(--rb-method-put); }
.docs-endpoint-response--5xx { border-left-color: var(--rb-method-delete); }
.docs-badge--deprecated {
background: var(--rb-method-put);
color: #ffffff;
font-size: 0.6875rem;
padding: 0.125rem 0.5rem;
border-radius: 0.25rem;
font-weight: 600;
letter-spacing: 0.02em;
}
/* ── E73-024: Deprecation banner + migration guide ── */
.docs-deprecation-banner {
border: 1px solid var(--rb-method-put);
border-left-width: 4px;
border-radius: var(--rb-border-radius);
background: color-mix(in srgb, var(--rb-method-put) 8%, transparent);
padding: 0.875rem 1.25rem;
margin: 1.5rem 1.5rem 0;
}
.docs-deprecation-banner--sunset {
border-color: var(--rb-method-delete);
background: color-mix(in srgb, var(--rb-method-delete) 8%, transparent);
}
.docs-deprecation-banner__title {
font-weight: 600;
font-size: 0.9375rem;
color: var(--rb-text);
margin: 0 0 0.25rem;
}
.docs-deprecation-banner__meta {
font-size: 0.875rem;
color: var(--rb-text-muted);
margin: 0;
}
.docs-deprecation-banner__successor {
font-family: var(--rb-code-font-family);
font-size: 0.8125rem;
}
a.docs-deprecation-banner__successor {
color: var(--rb-primary);
text-decoration: none;
}
a.docs-deprecation-banner__successor:hover {
text-decoration: underline;
}
.docs-deprecation-banner__guide-link {
display: inline-block;
margin-top: 0.5rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--rb-primary);
text-decoration: none;
}
.docs-deprecation-banner__guide-link:hover {
text-decoration: underline;
}
.docs-migration-guide {
margin: 2rem 1.5rem;
padding: 1.5rem;
background: var(--rb-surface);
border: 1px solid var(--rb-border);
border-radius: var(--rb-border-radius);
}
.docs-migration-guide__title {
font-size: 1.125rem;
font-weight: 600;
color: var(--rb-text);
margin: 0 0 1rem;
}
.docs-migration-guide__content {
font-size: 0.875rem;
color: var(--rb-text);
}
.docs-playground-mount {
margin-top: 2rem;
padding: 1.5rem;
background: var(--rb-surface);
border: 1px solid var(--rb-border);
border-radius: var(--rb-border-radius);
}
/* ── API Reference Index ── */
.docs-api-overview__count {
font-size: 0.875rem;
color: var(--rb-text-muted);
margin-bottom: 2rem;
}
/* E144-007: the tag anchor bar had no rules at all — inline anchors rendered
as one unbroken word ("AdminAuthDefaultCustomers…"). */
.docs-api-tag-nav {
display: flex;
flex-wrap: wrap;
gap: 0.375rem 1rem;
margin-bottom: 2rem;
}
.docs-api-tag-nav__link {
font-size: 0.875rem;
font-weight: 500;
color: var(--rb-link);
text-decoration: none;
}
.docs-api-tag-nav__link:hover {
text-decoration: underline;
}
.docs-api-tag {
margin-bottom: 2.5rem;
}
.docs-api-tag__title {
font-size: 1.25rem;
font-weight: 600;
color: var(--rb-text);
margin-bottom: 0.25rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--rb-border);
}
.docs-api-tag__description {
font-size: 0.875rem;
color: var(--rb-text-muted);
margin-bottom: 1rem;
}
.docs-api-tag__endpoints {
display: flex;
flex-direction: column;
gap: 0;
border: 1px solid var(--rb-border);
border-radius: var(--rb-border-radius);
overflow: hidden;
}
.docs-api-endpoint-link {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.625rem 0.875rem;
text-decoration: none;
color: var(--rb-text);
border-bottom: 1px solid var(--rb-border);
transition: background-color 0.15s ease;
}
.docs-api-endpoint-link:last-child {
border-bottom: none;
}
.docs-api-endpoint-link:first-child {
border-top: none;
}
.docs-api-endpoint-link:hover {
background-color: var(--rb-surface-hover);
}
.docs-api-endpoint-link .docs-method-badge {
flex-shrink: 0;
min-width: 3.5rem;
text-align: center;
}
.docs-api-endpoint-link__path {
font-family: var(--rb-code-font-family);
font-size: 0.8125rem;
font-weight: 500;
color: var(--rb-text);
flex-shrink: 0;
}
.docs-api-endpoint-link__summary {
font-size: 0.8125rem;
color: var(--rb-text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ══════════════════════════════════════════════════════════════
Utility — Feedback form & page-level styles
══════════════════════════════════════════════════════════════ */
/* E158 round 4 (Denny): question and Yes/No sit inline, left-aligned, with a
segmented pill button group (Anthropic-docs style) instead of the centered
stack of two separate buttons. */
.docs-feedback {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 1rem 1.5rem;
margin-top: 2.5rem;
padding-top: 1.5rem;
border-top: 1px solid color-mix(in srgb, var(--rb-border) 50%, transparent);
text-align: left;
}
/* E125-001 (D2): no stacked hairlines — an empty widget (JS disabled/not yet
mounted) disappears, and prev/next drops its own rule when feedback shows. */
.docs-feedback:empty {
display: none;
}
.docs-feedback:not(:empty) + .docs-prev-next {
border-top: none;
padding-top: 0;
}
.docs-feedback__question {
font-size: 0.938rem;
font-weight: 500;
color: var(--rb-text);
}
.docs-feedback__buttons {
display: flex;
gap: 0;
}
/* --rb-btn-* (E154 catalog, 2026-07-17): shared neutral-button tokens — feedback
Yes/No/Skip, prev/next pills, copy-page bar, changelog labels, secondary CTA.
Override-only; each rule keeps its previous look as fallback. */
.docs-feedback__btn {
display: inline-flex;
align-items: center;
padding: 0.5rem 1.375rem;
border: 1px solid var(--rb-btn-border, var(--rb-border));
background: var(--rb-btn-bg, transparent);
color: var(--rb-btn-text, var(--rb-text-muted));
font-size: 0.875rem;
cursor: pointer;
transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
/* Segmented pill: the pair shares one middle divider. */
.docs-feedback__btn--up {
border-radius: 9999px 0 0 9999px;
border-right: none;
}
.docs-feedback__btn--down {
border-radius: 0 9999px 9999px 0;
}
/* Reference design is text-only — the thumb icons made the pill busy. */
.docs-feedback__btn svg {
display: none;
}
.docs-feedback__btn:hover {
border-color: var(--rb-btn-hover-border, var(--rb-primary));
color: var(--rb-btn-hover-text, var(--rb-primary));
background: var(--rb-btn-hover-bg, var(--rb-bg-subtle));
}
/* Own row below the question (flex-basis is clamped by max-width during flex
line-breaking, so the cap sits on the children, not the form — otherwise the
form ends up NEXT to the question). Inner pieces stay at a readable width. */
.docs-feedback__comment-form {
flex-basis: 100%;
}
.docs-feedback__comment-form .docs-feedback__textarea,
.docs-feedback__comment-form .docs-feedback__comment-actions {
max-width: 480px;
}
.docs-feedback__textarea {
width: 100%;
padding: 0.75rem 1.125rem;
text-align: left;
border: 1px solid var(--rb-border);
border-radius: 18px;
background: transparent;
color: var(--rb-text);
font-family: inherit;
font-size: 0.875rem;
resize: vertical;
min-height: 80px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.docs-feedback__textarea:focus {
outline: none;
border-color: var(--rb-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--rb-primary) 12%, transparent);
}
.docs-feedback__comment-actions {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 0.5rem;
}
.docs-feedback__char-count {
font-size: 0.75rem;
color: var(--rb-text-muted);
}
.docs-feedback__action-buttons {
display: flex;
gap: 0.5rem;
}
/* Skip/Submit share the Yes/No pill language; Submit is the tonal variant
(tinted fill + primary text) — quiet, not a hard CTA (Denny, E158 round 5). */
.docs-feedback__skip {
padding: 0.5rem 1.375rem;
border: 1px solid var(--rb-btn-border, var(--rb-border));
border-radius: 9999px;
background: var(--rb-btn-bg, transparent);
color: var(--rb-btn-text, var(--rb-text-muted));
font-size: 0.813rem;
cursor: pointer;
transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.docs-feedback__skip:hover {
border-color: var(--rb-btn-hover-border, var(--rb-primary));
color: var(--rb-btn-hover-text, var(--rb-primary));
background: var(--rb-btn-hover-bg, var(--rb-bg-subtle));
}
.docs-feedback__submit {
padding: 0.5rem 1.375rem;
border: 1px solid color-mix(in srgb, var(--rb-primary) 60%, transparent);
border-radius: 9999px;
background: color-mix(in srgb, var(--rb-primary) 12%, transparent);
color: var(--rb-primary);
font-size: 0.813rem;
font-weight: 500;
cursor: pointer;
transition: border-color 0.2s ease, background-color 0.2s ease;
}
.docs-feedback__submit:hover {
border-color: var(--rb-primary);
background: color-mix(in srgb, var(--rb-primary) 18%, transparent);
}
.docs-feedback__thanks {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
color: var(--rb-text-muted);
font-size: 0.875rem;
}
.docs-feedback__thanks svg {
color: var(--rb-success, #22c55e);
}
.docs-feedback__error {
color: var(--rb-danger, #ef4444);
font-size: 0.875rem;
}
/* ══════════════════════════════════════════════════════════════
Code Examples — Tabbed code panels (E63-055)
══════════════════════════════════════════════════════════════ */
.docs-code-examples { margin: 1.5rem 0; }
.docs-code-tabs {
display: flex;
gap: 0;
border-bottom: 2px solid var(--rb-border);
margin-bottom: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.docs-code-tab {
padding: 0.5rem 1rem;
border: none;
background: transparent;
color: var(--rb-text-muted);
font-size: 0.8125rem;
font-weight: 500;
font-family: var(--rb-font-family);
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
white-space: nowrap;
transition: color var(--rb-duration-fast) var(--rb-ease-out-expo), border-color var(--rb-duration-fast) var(--rb-ease-out-expo);
}
.docs-code-tab:hover { color: var(--rb-text); }
.docs-code-tab--active {
color: var(--rb-primary);
border-bottom-color: var(--rb-primary);
}
.docs-code-panel { display: none; }
.docs-code-panel--active { display: block; }
.docs-code-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5rem 1rem;
background: var(--rb-code-bg);
border: 1px solid var(--rb-border);
border-bottom: none;
border-radius: var(--rb-border-radius) var(--rb-border-radius) 0 0;
font-size: 0.75rem;
color: var(--rb-text-muted);
}
.docs-code-panel pre {
margin-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.docs-code-copy {
padding: 0.25rem 0.5rem;
border: 1px solid var(--rb-border);
border-radius: 0.25rem;
background: var(--rb-surface);
color: var(--rb-text-muted);
font-size: 0.6875rem;
font-family: var(--rb-font-family);
cursor: pointer;
transition: color var(--rb-duration-fast) var(--rb-ease-out-expo), border-color var(--rb-duration-fast) var(--rb-ease-out-expo);
}
.docs-code-copy:hover {
color: var(--rb-text);
border-color: var(--rb-text-muted);
}
/* ══════════════════════════════════════════════════════════════
Search Dialog — Cmd+K modal (E63 Sprint 5)
══════════════════════════════════════════════════════════════ */
.docs-search-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 50;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
align-items: flex-start;
justify-content: center;
padding-top: 12vh;
}
.docs-search-dialog {
width: 100%;
max-width: 36rem;
background: var(--rb-background);
border: 1px solid var(--rb-border);
border-radius: calc(var(--rb-border-radius) * 2);
box-shadow:
var(--rb-shadow-md),
0 25px 50px -12px rgba(0, 0, 0, 0.25),
0 0 0 1px rgba(0, 0, 0, 0.05);
overflow: hidden;
display: flex;
flex-direction: column;
max-height: 70vh;
}
.docs-search-input-wrap {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.875rem 1.125rem;
border-bottom: 1px solid var(--rb-border);
}
.docs-search-input-icon {
flex-shrink: 0;
color: var(--rb-text-muted);
opacity: 0.6;
}
.docs-search-input {
flex: 1;
border: none;
outline: none;
background: transparent;
font-size: 1rem;
font-family: var(--rb-font-family);
color: var(--rb-text);
}
.docs-search-input::placeholder {
color: var(--rb-text-muted);
}
.docs-search-results {
overflow-y: auto;
padding: 0.5rem;
flex: 1;
}
.docs-search-result {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 0.625rem 0.75rem;
border-radius: var(--rb-border-radius);
cursor: pointer;
text-decoration: none;
color: var(--rb-text);
transition: background-color 0.1s ease;
}
.docs-search-result:hover,
.docs-search-result--active {
background-color: var(--rb-surface-hover);
color: var(--rb-text);
}
.docs-search-result__type {
flex-shrink: 0;
width: 1.25rem;
height: 1.25rem;
margin-top: 0.125rem;
color: var(--rb-text-muted);
display: flex;
align-items: center;
justify-content: center;
}
.docs-search-result--active .docs-search-result__type {
color: var(--rb-primary);
}
.docs-search-result__body {
flex: 1;
min-width: 0;
}
.docs-search-result__title {
font-weight: 500;
font-size: 0.875rem;
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.docs-search-result__snippet {
font-size: 0.8125rem;
color: var(--rb-text-muted);
line-height: 1.4;
margin-top: 0.125rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.docs-search-result mark {
background-color: var(--rb-accent);
color: var(--rb-accent-foreground);
border-radius: 2px;
padding: 0 2px;
}
/* E67-030: Section grouping in search results */
.docs-search-section-header {
padding: 0.5rem 1rem 0.25rem;
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--rb-text-muted);
border-top: 1px solid var(--rb-border);
}
.docs-search-section-header:first-child {
border-top: none;
}
.docs-search-result__section {
display: inline-block;
margin-left: 0.5rem;
padding: 0.0625rem 0.375rem;
font-size: 0.6875rem;
font-weight: 500;
color: var(--rb-text-muted);
background: var(--rb-bg-muted);
border-radius: 0.25rem;
vertical-align: middle;
}
.docs-search-empty {
padding: 2rem 1rem;
text-align: center;
color: var(--rb-text-muted);
font-size: 0.875rem;
}
.docs-search-footer {
display: flex;
gap: 1rem;
padding: 0.625rem 1rem;
border-top: 1px solid var(--rb-border);
font-size: 0.75rem;
color: var(--rb-text-muted);
}
.docs-search-footer kbd {
display: inline-block;
padding: 0.0625rem 0.375rem;
border: 1px solid var(--rb-border);
border-radius: 0.25rem;
background: var(--rb-surface);
font-family: var(--rb-font-family);
font-size: 0.6875rem;
margin-right: 0.25rem;
}
@media (max-width: 640px) {
.docs-search-overlay {
padding-top: 1rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.docs-search-dialog { max-height: 85vh; }
}
/* ══════════════════════════════════════════════════════════════
Doc Components (E63 Sprint 11)
══════════════════════════════════════════════════════════════ */
/* ── Callout (E63-080) ── */
/* Base box styles also target the bare stored form `div[data-callout]`:
the header/body structure is built client-side (doc-components.ts
callouts()), so no-JS surfaces and the inert in-app preview still get
a properly padded, bordered box. Keep this block ABOVE the variant
tints so their equal-specificity background/border-color rules win. */
.docs-callout,
div[data-callout] {
margin: 1.5rem 0;
padding: 1rem 1.25rem 1rem 1rem;
border-left: 4px solid var(--rb-border);
border-radius: var(--rb-border-radius);
background: var(--rb-surface);
border: 1px solid var(--rb-border);
border-left-width: 4px;
}
.docs-callout__header {
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 600;
font-size: 0.875rem;
margin-bottom: 0.5rem;
}
.docs-callout__header svg {
width: 1.125rem;
height: 1.125rem;
flex-shrink: 0;
}
/* E65-040: custom emoji icon replaces the SVG in the header. */
.docs-callout__emoji {
font-size: 1.125rem;
line-height: 1;
flex-shrink: 0;
}
.docs-callout__body {
font-size: 0.9375rem;
line-height: 1.65;
}
.docs-callout__body > *:first-child { margin-top: 0; }
.docs-callout__body > *:last-child { margin-bottom: 0; }
/* Callout variants with semantic colors */
div[data-callout="info"] {
border-left-color: #3b82f6;
background: rgba(59, 130, 246, 0.05);
border-color: rgba(59, 130, 246, 0.15);
border-left-color: #3b82f6;
}
div[data-callout="info"] .docs-callout__header { color: #2563eb; }
div[data-callout="warning"] {
border-left-color: #f59e0b;
background: rgba(245, 158, 11, 0.05);
border-color: rgba(245, 158, 11, 0.15);
border-left-color: #f59e0b;
}
div[data-callout="warning"] .docs-callout__header { color: #b45309; }
div[data-callout="error"] {
border-left-color: #ef4444;
background: rgba(239, 68, 68, 0.05);
border-color: rgba(239, 68, 68, 0.15);
border-left-color: #ef4444;
}
div[data-callout="error"] .docs-callout__header { color: #b91c1c; }
div[data-callout="tip"] {
border-left-color: #22c55e;
background: rgba(34, 197, 94, 0.05);
border-color: rgba(34, 197, 94, 0.15);
border-left-color: #22c55e;
}
div[data-callout="tip"] .docs-callout__header { color: #15803d; }
/* E152-063: neutral note + success check */
div[data-callout="note"] {
border-left-color: #64748b;
background: rgba(100, 116, 139, 0.05);
border-color: rgba(100, 116, 139, 0.15);
border-left-color: #64748b;
}
div[data-callout="note"] .docs-callout__header { color: #475569; }
div[data-callout="check"] {
border-left-color: #16a34a;
background: rgba(22, 163, 74, 0.05);
border-color: rgba(22, 163, 74, 0.15);
border-left-color: #16a34a;
}
div[data-callout="check"] .docs-callout__header { color: #15803d; }
/* Dark mode callout adjustments */
[data-theme-mode="dark"] div[data-callout="info"] {
background: rgba(59, 130, 246, 0.08);
border-color: rgba(59, 130, 246, 0.2);
border-left-color: #3b82f6;
}
[data-theme-mode="dark"] div[data-callout="warning"] {
background: rgba(245, 158, 11, 0.08);
border-color: rgba(245, 158, 11, 0.2);
border-left-color: #f59e0b;
}
[data-theme-mode="dark"] div[data-callout="error"] {
background: rgba(239, 68, 68, 0.08);
border-color: rgba(239, 68, 68, 0.2);
border-left-color: #ef4444;
}
[data-theme-mode="dark"] div[data-callout="tip"] {
background: rgba(34, 197, 94, 0.08);
border-color: rgba(34, 197, 94, 0.2);
border-left-color: #22c55e;
}
[data-theme-mode="dark"] div[data-callout="note"] {
background: rgba(100, 116, 139, 0.1);
border-color: rgba(100, 116, 139, 0.25);
border-left-color: #64748b;
}
[data-theme-mode="dark"] div[data-callout="check"] {
background: rgba(22, 163, 74, 0.1);
border-color: rgba(22, 163, 74, 0.2);
border-left-color: #22c55e;
}
/* Dark mode: brighter header text — the AA-darkened light-mode hues
fail contrast on the dark callout background, so restore the 500-shade
tones which meet AA against the dark surface. */
[data-theme-mode="dark"] div[data-callout="info"] .docs-callout__header { color: #3b82f6; }
[data-theme-mode="dark"] div[data-callout="warning"] .docs-callout__header { color: #f59e0b; }
[data-theme-mode="dark"] div[data-callout="error"] .docs-callout__header { color: #ef4444; }
[data-theme-mode="dark"] div[data-callout="tip"] .docs-callout__header { color: #22c55e; }
[data-theme-mode="dark"] div[data-callout="note"] .docs-callout__header { color: #94a3b8; }
[data-theme-mode="dark"] div[data-callout="check"] .docs-callout__header { color: #4ade80; }
/* ── Frame (E152-062) — framed image with caption ──
Token-only styling: the CSS vars flip in dark mode, so no separate
[data-theme-mode="dark"] block is needed (unlike the callouts,
which use literal colors). */
figure[data-frame] {
margin: 1.5rem 0;
padding: 0.75rem;
border: 1px solid var(--rb-border);
border-radius: var(--rb-border-radius);
background: var(--rb-surface);
}
figure[data-frame] img {
margin: 0 auto;
border-radius: calc(var(--rb-border-radius) * 0.75);
}
figure[data-frame] figcaption {
margin-top: 0.625rem;
text-align: center;
font-size: 0.8125rem;
line-height: 1.5;
color: var(--rb-text-muted);
}
/* Frames authored without a caption: no stray gap below the image */
figure[data-frame] figcaption:empty {
display: none;
}
/* ── Mermaid (E152-060) — client-rendered diagram container ──
Token-only styling: the CSS vars flip in dark mode, so no separate
[data-theme-mode="dark"] block is needed. The escaped source
is the no-JS fallback; the lazy portal script (mermaid.ts) swaps it
for inline SVG and sets .is-rendered. */
.docs-mermaid {
margin: 1.5rem 0;
padding: 1rem;
border: 1px solid var(--rb-border);
border-radius: var(--rb-border-radius);
background: var(--rb-surface);
overflow-x: auto;
}
.docs-mermaid-svg {
display: flex;
justify-content: center;
}
.docs-mermaid-svg svg {
max-width: 100%;
height: auto;
}
.docs-mermaid-src {
margin: 0;
padding: 0;
border: none;
background: transparent;
font-family: var(--rb-code-font-family);
font-size: 0.8125rem;
line-height: 1.6;
overflow-x: auto;
}
.docs-mermaid.is-rendered .docs-mermaid-src {
display: none;
}
/* ── Tooltip (E152-061) — inline hover bubble ──
Token-only styling (vars flip in dark mode, no dedicated block).
Reveal on :hover and :focus-visible; doc-components.ts adds
tabindex="0" so keyboard and touch-tap can focus the term. The
fade transition is neutralized by the global reduced-motion rule. */
span[data-tooltip] {
position: relative;
cursor: help;
text-decoration: underline dotted;
text-decoration-color: var(--rb-text-muted);
text-underline-offset: 3px;
}
span[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 0.5rem);
left: 50%;
transform: translateX(-50%);
width: max-content;
max-width: 16rem;
padding: 0.5rem 0.75rem;
font-size: 0.8125rem;
font-weight: 400;
line-height: 1.5;
text-align: center;
white-space: normal;
color: var(--rb-text);
background: var(--rb-surface);
border: 1px solid var(--rb-border);
border-radius: var(--rb-border-radius);
box-shadow: var(--rb-shadow-md);
opacity: 0;
visibility: hidden;
transition: opacity 150ms ease;
pointer-events: none;
z-index: 30;
}
span[data-tooltip]:hover::after,
span[data-tooltip]:focus-visible::after {
opacity: 1;
visibility: visible;
}
span[data-tooltip]:focus-visible {
outline: 2px solid var(--rb-primary);
outline-offset: 2px;
}
/* ── Navigation tooltip (2026-08-04) — reveals a label the sidebar cut off ──
Same tokens as the inline tooltip above, but it CANNOT be a ::after on the row:
.docs-sidebar is overflow:hidden and .docs-sidebar__nav is overflow-y:auto, so a
bubble wide enough to hold the full label gets clipped by both. shell.ts
(navTooltips) therefore keeps ONE fixed-position element on and positions
it from the row's bounding rect — the only way out of that clipping context.
Shown only while a label is actually truncated; `hidden` is the resting state. */
.docs-nav-tooltip {
position: fixed;
top: 0;
left: 0;
z-index: 60;
max-width: 22rem;
padding: 0.375rem 0.625rem;
font-family: var(--rb-font-family);
font-size: 0.75rem;
font-weight: 400;
line-height: 1.4;
white-space: normal;
overflow-wrap: break-word;
color: var(--rb-text);
background: var(--rb-surface);
border: 1px solid var(--rb-border);
border-radius: var(--rb-border-radius);
box-shadow: var(--rb-shadow-md);
opacity: 0;
pointer-events: none;
transition: opacity var(--rb-duration-fast) var(--rb-ease-out-expo);
}
.docs-nav-tooltip[hidden] {
display: none;
}
.docs-nav-tooltip--visible {
opacity: 1;
}
/* ── Inline Icon (E152-064) — standalone icon in running text ──
Token-only: the SVG inherits currentColor, so it follows the
surrounding text in both modes. doc-components.ts injects the SVG. */
span[data-icon] {
display: inline-flex;
width: 1em;
height: 1em;
vertical-align: -0.125em;
}
span[data-icon] svg {
width: 100%;
height: 100%;
}
/* ── Badge (E152-065) — inline status pill ──
Literal semantic colors matching the callout palette, with a
dark-mode block (same approach as the callouts). */
span[data-badge] {
display: inline-flex;
align-items: center;
padding: 0.125rem 0.5rem;
border-radius: 9999px;
border: 1px solid;
font-size: 0.75em;
font-weight: 600;
line-height: 1.4;
vertical-align: baseline;
white-space: nowrap;
}
span[data-badge="neutral"] {
color: #475569;
background: rgba(100, 116, 139, 0.08);
border-color: rgba(100, 116, 139, 0.25);
}
span[data-badge="info"] {
color: #2563eb;
background: rgba(59, 130, 246, 0.08);
border-color: rgba(59, 130, 246, 0.25);
}
span[data-badge="success"] {
color: #15803d;
background: rgba(34, 197, 94, 0.08);
border-color: rgba(34, 197, 94, 0.25);
}
span[data-badge="warning"] {
color: #b45309;
background: rgba(245, 158, 11, 0.08);
border-color: rgba(245, 158, 11, 0.3);
}
span[data-badge="error"] {
color: #b91c1c;
background: rgba(239, 68, 68, 0.08);
border-color: rgba(239, 68, 68, 0.25);
}
[data-theme-mode="dark"] span[data-badge="neutral"] { color: #94a3b8; }
[data-theme-mode="dark"] span[data-badge="info"] { color: #60a5fa; }
[data-theme-mode="dark"] span[data-badge="success"] { color: #4ade80; }
[data-theme-mode="dark"] span[data-badge="warning"] { color: #fbbf24; }
[data-theme-mode="dark"] span[data-badge="error"] { color: #f87171; }
/* ── Columns (E152-066) — multi-column layout for any content ──
Pure CSS, no activation JS. Collapses to a single column on
mobile (same breakpoint family as the card grid). */
div[data-column-layout] {
display: grid;
gap: 1rem;
margin: 1.5rem 0;
}
div[data-column-layout="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
div[data-column-layout="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
div[data-column-layout="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
div[data-column-layout] > div[data-column] > *:first-child { margin-top: 0; }
div[data-column-layout] > div[data-column] > *:last-child { margin-bottom: 0; }
@media (max-width: 768px) {
div[data-column-layout] { grid-template-columns: 1fr !important; }
}
/* ── Update / changelog entry (E152-067) ──
doc-components.ts rebuilds div[data-update] into .docs-update:
sticky anchor-linked label column + content body. Token-only. */
.docs-update {
display: grid;
grid-template-columns: 12rem minmax(0, 1fr);
gap: 1.5rem;
margin: 0;
padding: 2rem 0;
border-top: 1px solid var(--rb-border);
}
.docs-update:last-child { border-bottom: 1px solid var(--rb-border); }
.docs-update__aside {
font-size: 0.875rem;
}
.docs-update__label {
position: sticky;
top: calc(var(--rb-header-offset) + 1rem); /* header (sidebar/toc sticky offset) + 1rem */
display: inline-block;
padding: 0.25rem 0.75rem;
border: 1px solid var(--rb-btn-border, var(--rb-border));
border-radius: 9999px;
background: var(--rb-btn-bg, var(--rb-surface));
color: var(--rb-btn-text, var(--rb-text));
font-weight: 600;
text-decoration: none;
}
.docs-update__label:hover {
border-color: var(--rb-btn-hover-border, var(--rb-primary));
color: var(--rb-btn-hover-text, var(--rb-primary));
}
.docs-update__description {
margin-top: 0.625rem;
color: var(--rb-text-muted);
}
.docs-update__body > *:first-child { margin-top: 0; }
.docs-update__body > *:last-child { margin-bottom: 0; }
@media (max-width: 768px) {
.docs-update {
grid-template-columns: 1fr;
gap: 0.75rem;
}
.docs-update__label { position: static; }
}
/* ── Tabs (E63-081) ── */
div[data-tabs] {
margin: 1.5rem 0;
border: 1px solid var(--rb-border);
border-radius: var(--rb-border-radius);
overflow: hidden;
}
.docs-tabs-bar {
display: flex;
gap: 0;
border-bottom: 1px solid var(--rb-border);
background: var(--rb-surface);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.docs-tab-btn {
padding: 0.625rem 1rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--rb-text-muted);
background: transparent;
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
white-space: nowrap;
transition: color var(--rb-duration-fast) var(--rb-ease-out-expo), border-color var(--rb-duration-fast) var(--rb-ease-out-expo);
font-family: var(--rb-font-family);
}
.docs-tab-btn:hover { color: var(--rb-text); }
.docs-tab-btn--active {
color: var(--rb-primary);
border-bottom-color: var(--rb-primary);
}
.docs-tab-panel { display: none; padding: 1.25rem; }
.docs-tab-panel--active { display: block; }
.docs-tab-panel > *:first-child { margin-top: 0; }
.docs-tab-panel > *:last-child { margin-bottom: 0; }
/* ── Steps (E63-082) ── */
div[data-steps] {
margin: 1.5rem 0;
position: relative;
}
.docs-step {
display: flex;
gap: 1rem;
position: relative;
padding-bottom: 1.75rem;
}
.docs-step:last-child { padding-bottom: 0; }
.docs-step__indicator {
display: flex;
flex-direction: column;
align-items: center;
flex-shrink: 0;
}
.docs-step__number {
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: 50%;
background: var(--rb-primary);
color: var(--rb-primary-foreground);
font-size: 0.8125rem;
font-weight: 700;
flex-shrink: 0;
position: relative;
z-index: 1;
box-shadow: 0 0 0 3px var(--rb-background);
}
/* Continuous connecting line */
.docs-step__line {
width: 2px;
flex: 1;
background: var(--rb-border);
margin-top: 0.375rem;
}
.docs-step:last-child .docs-step__line { display: none; }
.docs-step__content {
flex: 1;
min-width: 0;
padding-top: 0.125rem;
}
.docs-step__title {
font-weight: 600;
font-size: 1rem;
line-height: 2rem;
margin-bottom: 0.5rem;
}
.docs-step__body > *:first-child { margin-top: 0; }
.docs-step__body > *:last-child { margin-bottom: 0; }
/* ── Accordion (E63-083) ── */
div[data-accordion] {
margin: 1.5rem 0;
border: 1px solid var(--rb-border);
border-radius: var(--rb-border-radius);
overflow: hidden;
}
.docs-accordion-item {
border-bottom: 1px solid var(--rb-border);
}
.docs-accordion-item:last-child { border-bottom: none; }
.docs-accordion-header {
display: flex;
align-items: center;
gap: 0.75rem;
width: 100%;
padding: 0.875rem 1rem;
background: transparent;
border: none;
cursor: pointer;
text-align: left;
font-size: 0.9375rem;
font-weight: 500;
color: var(--rb-text);
font-family: var(--rb-font-family);
transition: background-color 0.15s ease;
}
.docs-accordion-header:hover { background: var(--rb-surface-hover); }
.docs-accordion-chevron {
width: 1rem;
height: 1rem;
flex-shrink: 0;
transition: transform var(--rb-duration-slow) var(--rb-ease-out-expo);
color: var(--rb-text-muted);
}
.docs-accordion-item--open .docs-accordion-chevron {
transform: rotate(90deg);
}
.docs-accordion-body {
max-height: 0;
overflow: hidden;
transition: max-height var(--rb-duration-slow) var(--rb-ease-out-expo), padding var(--rb-duration-slow) var(--rb-ease-out-expo);
}
.docs-accordion-item--open .docs-accordion-body {
max-height: 2000px;
transition: max-height 0.5s var(--rb-ease-out-expo);
}
.docs-accordion-body__inner {
padding: 0 1rem 1rem 2.75rem;
}
.docs-accordion-body__inner > *:first-child { margin-top: 0; }
.docs-accordion-body__inner > *:last-child { margin-bottom: 0; }
/* ── Card Grid (E63-084) ── */
div[data-card-grid] {
margin: 1.5rem 0;
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
div[data-card-grid][data-columns="2"] { grid-template-columns: repeat(2, 1fr); }
div[data-card-grid][data-columns="3"] { grid-template-columns: repeat(3, 1fr); }
div[data-card-grid][data-columns="4"] { grid-template-columns: repeat(4, 1fr); }
.docs-card {
display: block;
padding: 1.25rem;
border: 1px solid var(--rb-border);
border-radius: var(--rb-border-radius);
background: var(--rb-background);
text-decoration: none;
color: var(--rb-text);
transition: border-color var(--rb-duration-normal) var(--rb-ease-out-expo),
box-shadow var(--rb-duration-normal) var(--rb-ease-out-expo),
transform var(--rb-duration-normal) var(--rb-ease-out-expo);
}
a.docs-card:hover {
border-color: var(--rb-primary);
box-shadow: var(--rb-shadow-md);
transform: translateY(-2px);
}
a.docs-card:hover .docs-card__icon {
transform: scale(1.06);
}
.docs-card__icon {
width: 2rem;
height: 2rem;
color: var(--rb-primary);
margin-bottom: 0.75rem;
padding: 0.375rem;
background: color-mix(in srgb, var(--rb-primary) 8%, transparent);
border-radius: calc(var(--rb-border-radius) * 0.75);
transition: transform var(--rb-duration-slow) var(--rb-ease-spring);
}
.docs-card__icon svg {
width: 100%;
height: 100%;
display: block;
}
.docs-card__title {
font-weight: 600;
font-size: 0.9375rem;
margin-bottom: 0.375rem;
line-height: 1.4;
}
.docs-card__description {
font-size: 0.8125rem;
color: var(--rb-text-muted);
line-height: 1.55;
}
@media (max-width: 640px) {
div[data-card-grid],
div[data-card-grid][data-columns="2"],
div[data-card-grid][data-columns="3"],
div[data-card-grid][data-columns="4"] {
grid-template-columns: 1fr;
}
}
/* ── Code Group (E63-085) ──
The group chrome mirrors the E152-042 code-block chrome (Shiki
palette vars): the old rgba-white-on-black bar assumed a dark
--rb-code-bg underneath, which light themes broke (white tab text
on light gray). Inner .docs-code-block chrome (built by the shell's
copyButtons) is stripped so blocks merge seamlessly into the group;
the tab bar already names each language, so the inner label hides. */
div[data-code-group] {
margin: 1.5rem 0;
border: 1px solid var(--rb-code-block-border);
border-radius: 0.625rem;
overflow: hidden;
background: var(--rb-code-block-bg);
}
.docs-code-group-bar {
display: flex;
gap: 0;
border-bottom: 1px solid color-mix(in srgb, var(--rb-code-block-text) 8%, transparent);
background: transparent;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.docs-code-group-tab {
padding: 0.5rem 0.875rem;
font-size: 0.8125rem;
font-family: var(--rb-code-font-family);
color: color-mix(in srgb, var(--rb-code-block-text) 55%, transparent);
background: transparent;
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
white-space: nowrap;
transition: color var(--rb-duration-fast) var(--rb-ease-out-expo), border-color var(--rb-duration-fast) var(--rb-ease-out-expo);
}
.docs-code-group-tab:hover { color: color-mix(in srgb, var(--rb-code-block-text) 85%, transparent); }
.docs-code-group-tab--active {
color: var(--rb-code-block-text);
border-bottom-color: var(--rb-primary);
}
.docs-code-group-panel { display: none; }
.docs-code-group-panel--active { display: block; }
.docs-code-group-panel .docs-code-block,
.docs-code-group-panel .docs-code-block:has(> .docs-code-lang) {
margin: 0;
background: transparent;
border: none;
border-radius: 0;
}
.docs-code-group-panel .docs-code-block > .docs-code-lang { display: none; }
.docs-code-group-panel pre {
margin: 0;
border: none;
border-radius: 0;
}
/* ── Responsive adjustments ── */
@media (max-width: 768px) {
.docs-step { gap: 0.75rem; }
.docs-step__number {
width: 1.75rem;
height: 1.75rem;
font-size: 0.75rem;
}
}
/* ── E67-012: Section Landing Pages ──────────────────────── */
/* E152-010: display titles pick up the heading font override too */
.docs-section-landing__title {
font-family: var(--rb-heading-font-family, var(--rb-font-family));
}
.docs-section-landing {
width: 100%;
max-width: 72rem;
margin: 0 auto;
padding: 0 2rem;
}
.docs-section-landing__hero {
text-align: center;
padding: 3rem 2rem 2.5rem;
background: linear-gradient(
180deg,
color-mix(in srgb, var(--rb-primary) 3%, transparent) 0%,
transparent 100%
);
border-radius: var(--rb-border-radius);
margin-bottom: 2rem;
}
.docs-section-landing__title {
font-size: 2.25rem;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.15;
color: var(--rb-text);
margin-bottom: 0.75rem;
}
.docs-section-landing__description {
font-size: 1.125rem;
color: var(--rb-text-muted);
max-width: 36rem;
margin: 0 auto 1.5rem;
line-height: 1.6;
}
.docs-section-landing__content {
max-width: 48rem;
margin: 0 auto;
}
@media (max-width: 768px) {
.docs-section-landing__hero {
padding: 2rem 1rem 1.5rem;
}
.docs-section-landing__title {
font-size: 1.75rem;
}
.docs-section-landing__description {
font-size: 1rem;
}
}
/* ══════════════════════════════════════════════════════════════
Animations & Transitions
══════════════════════════════════════════════════════════════ */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Micro-interaction keyframes (phase 2): copy-success pop + expand fade */
@keyframes rb-pop {
0% { transform: scale(1); }
40% { transform: scale(1.15); }
100% { transform: scale(1); }
}
@keyframes rb-fade-in {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* E125-001 (D9): no entrance animation on article content — the delayed
paint hurt LCP and read as a flash of faded text. The hero keeps its. */
@media (prefers-reduced-motion: no-preference) {
.docs-section-landing__hero {
animation: fadeInUp 0.6s var(--rb-ease-out-expo) both;
}
}
/* E132-030 analogue: neutralize ALL animations/transitions for reduced motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ══════════════════════════════════════════════════════════════
Cross-document view transitions — fast content cross-fade on
navigation. Progressive enhancement: unsupported browsers keep
instant full-page loads.
══════════════════════════════════════════════════════════════ */
@view-transition {
navigation: auto;
}
/* The reduced-motion kill switch above uses universal selectors, which never
match ::view-transition-* pseudos — the opt-out must be explicit. */
@media (prefers-reduced-motion: reduce) {
@view-transition {
navigation: none;
}
}
/* Static chrome gets its own (visually identical) snapshot groups so only
the content area reads as fading. */
.docs-header { view-transition-name: rb-header; }
.docs-sidebar { view-transition-name: rb-sidebar; }
.docs-toc { view-transition-name: rb-toc; }
/* Subtle and fast — the default 250ms cross-fade reads sluggish on docs. */
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) {
animation-duration: 150ms;
}
/* ══════════════════════════════════════════════════════════════
Print Styles
══════════════════════════════════════════════════════════════ */
@media print {
/* Hide non-content elements */
.docs-header,
.docs-sidebar,
.docs-toc,
.docs-footer,
.docs-prev-next,
.docs-feedback,
.docs-layout__overlay,
.docs-search-overlay,
.docs-header__mobile-toggle,
.docs-code-copy-btn,
.docs-toc__back-to-top,
a.heading-anchor {
display: none !important;
}
/* Full-width content */
.docs-layout {
display: block;
}
.docs-content {
max-width: 100%;
padding: 0;
}
/* Clean typography for print */
body {
font-size: 11pt;
line-height: 1.5;
color: #000;
background: #fff;
}
.docs-content h1 { font-size: 22pt; }
.docs-content h2 { font-size: 16pt; border-bottom-color: #ccc; }
.docs-content h3 { font-size: 13pt; }
/* Show link URLs in print */
.docs-content a[href]::after {
content: ' (' attr(href) ')';
font-size: 0.85em;
color: #666;
font-weight: 400;
}
.docs-content a[href^="#"]::after,
.docs-content a[href^="javascript"]::after {
content: '';
}
/* Code blocks */
.docs-content pre {
border: 1px solid #ddd;
page-break-inside: avoid;
white-space: pre-wrap;
word-wrap: break-word;
}
/* Tables */
.docs-content table {
page-break-inside: auto;
}
.docs-content tr {
page-break-inside: avoid;
}
.docs-content thead {
display: table-header-group;
}
/* Images */
.docs-content img {
max-width: 100% !important;
page-break-inside: avoid;
box-shadow: none;
border: 1px solid #ddd;
}
/* Callouts */
.docs-callout {
page-break-inside: avoid;
}
/* Hide the page-actions menu in print */
.docs-page-actions {
display: none !important;
}
}
/* ══════════════════════════════════════════════════════════════
Page Actions — "Copy page" split-button + dropdown menu
══════════════════════════════════════════════════════════════ */
.docs-page-actions {
position: relative;
float: right;
margin: 0 0 0.75rem 1rem;
z-index: 20;
}
.docs-page-actions__bar {
display: inline-flex;
align-items: stretch;
border: 1px solid var(--rb-btn-border, var(--rb-border));
border-radius: var(--rb-border-radius);
background: var(--rb-btn-bg, var(--rb-surface));
overflow: hidden;
}
.docs-page-actions__primary {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.375rem 0.75rem;
font-size: 0.8125rem;
font-weight: 500;
color: var(--rb-btn-text, var(--rb-text));
background: transparent;
border: none;
cursor: pointer;
text-decoration: none;
white-space: nowrap;
transition: background-color 0.15s ease, color 0.15s ease;
}
.docs-page-actions__primary:hover { background: var(--rb-btn-hover-bg, var(--rb-surface)); color: var(--rb-btn-hover-text, var(--rb-btn-text, var(--rb-text))); }
.docs-page-actions__trigger {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
padding: 0;
color: var(--rb-btn-text, var(--rb-text-muted));
background: transparent;
border: none;
border-left: 1px solid var(--rb-btn-border, var(--rb-border));
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
}
.docs-page-actions__trigger:hover { background: var(--rb-btn-hover-bg, var(--rb-surface)); color: var(--rb-btn-hover-text, var(--rb-text)); }
.docs-page-actions__trigger svg { transition: transform 0.2s ease; }
.docs-page-actions--open .docs-page-actions__trigger svg { transform: rotate(180deg); }
.docs-page-actions__menu {
position: absolute;
top: calc(100% + 0.375rem);
right: 0;
min-width: 17rem;
padding: 0.375rem;
background: var(--rb-surface);
border: 1px solid var(--rb-border);
border-radius: var(--rb-border-radius);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
z-index: 40;
}
.docs-page-actions__menu[hidden] { display: none; }
.docs-page-actions__item {
display: flex;
align-items: flex-start;
gap: 0.625rem;
width: 100%;
padding: 0.5rem 0.625rem;
font: inherit;
text-align: left;
color: var(--rb-text);
background: transparent;
border: none;
border-radius: calc(var(--rb-border-radius) - 2px);
cursor: pointer;
text-decoration: none;
transition: background-color 0.12s ease;
}
.docs-page-actions__item:hover { background: var(--rb-surface); }
.docs-page-actions__item svg { flex-shrink: 0; margin-top: 0.125rem; color: var(--rb-text-muted); }
.docs-page-actions__item-text { display: flex; flex-direction: column; gap: 0.05rem; }
.docs-page-actions__item-text strong { font-size: 0.8125rem; font-weight: 600; color: var(--rb-text); }
.docs-page-actions__item-text small { font-size: 0.75rem; color: var(--rb-text-muted); }
.docs-page-actions__item--copied .docs-page-actions__item-text strong { color: var(--rb-accent); }
.docs-page__header {
position: relative;
}
/* ══════════════════════════════════════════════════════════════
E66-011: Split API Reference Layout (layout id "stripe" until 2026-07-18)
Two-column layout with description left and sticky code right.
Only active when .docs-split-layout is present on the page.
══════════════════════════════════════════════════════════════ */
/* Two-column grid */
.docs-split-columns {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
align-items: start;
margin-top: 1.5rem;
}
/* Left panel: description, params, responses */
.docs-split-description {
min-width: 0;
}
/* Right panel: sticky code examples */
.docs-split-code {
position: sticky;
top: calc(var(--rb-header-offset) + 1rem);
max-height: calc(100vh - var(--rb-header-offset) - 1.5rem);
overflow-y: auto;
background: var(--rb-code-background);
border-radius: var(--rb-border-radius);
border: 1px solid var(--rb-border);
}
/* Custom scrollbar for code panel */
.docs-split-code::-webkit-scrollbar {
width: 4px;
}
.docs-split-code::-webkit-scrollbar-track {
background: transparent;
}
.docs-split-code::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--rb-text-muted) 30%, transparent);
border-radius: 2px;
}
/* Language selector bar */
.docs-split-lang-bar {
display: flex;
gap: 0;
border-bottom: 1px solid color-mix(in srgb, var(--rb-border) 60%, transparent);
background: color-mix(in srgb, var(--rb-surface) 80%, var(--rb-code-background));
position: sticky;
top: 0;
z-index: 5;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.docs-split-lang-tab {
padding: 0.5rem 0.875rem;
font-size: 0.75rem;
font-weight: 500;
font-family: var(--rb-font-family);
color: var(--rb-text-muted);
background: transparent;
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
white-space: nowrap;
transition: color var(--rb-duration-fast) var(--rb-ease-out-expo), border-color var(--rb-duration-fast) var(--rb-ease-out-expo);
}
.docs-split-lang-tab:hover {
color: var(--rb-text);
}
.docs-split-lang-tab--active {
color: var(--rb-primary);
border-bottom-color: var(--rb-primary);
}
/* Code panels */
.docs-split-code-panels {
padding: 0;
}
.docs-split-code-panel {
display: none;
}
.docs-split-code-panel--active {
display: block;
}
.docs-split-code-panel pre {
margin: 0;
border: none;
border-radius: 0;
background: transparent;
font-size: 0.8125rem;
line-height: 1.6;
}
.docs-split-code-panel pre code {
padding: 1rem;
display: block;
}
.docs-split-code-panel .docs-code-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.375rem 0.75rem;
font-size: 0.6875rem;
color: var(--rb-text-muted);
border-bottom: 1px solid color-mix(in srgb, var(--rb-border) 40%, transparent);
}
/* Response example section at bottom of code panel */
.docs-split-response-example {
border-top: 1px solid color-mix(in srgb, var(--rb-border) 60%, transparent);
}
.docs-split-response-header {
padding: 0.5rem 0.875rem;
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--rb-text-muted);
background: color-mix(in srgb, var(--rb-surface) 80%, var(--rb-code-background));
border-bottom: 1px solid color-mix(in srgb, var(--rb-border) 40%, transparent);
}
.docs-split-response-schema {
padding: 0.75rem;
}
.docs-split-response-schema .docs-status-code {
font-size: 0.75rem;
margin-bottom: 0.5rem;
display: inline-block;
}
.docs-split-response-schema .docs-param-list--dark {
background: transparent;
}
.docs-split-response-schema .docs-param-list--dark .docs-param {
border-color: color-mix(in srgb, var(--rb-border) 40%, transparent);
padding: 0.375rem 0;
}
.docs-split-response-schema .docs-param-list--dark .docs-param__name {
color: var(--rb-code-text);
font-size: 0.75rem;
}
.docs-split-response-schema .docs-param-list--dark .docs-param__type {
font-size: 0.6875rem;
}
/* When split layout is active, hide the TOC since code panel replaces it */
.docs-split-layout ~ .docs-toc {
display: none;
}
/* Wider content area when using split layout */
body[data-api-layout="split"] .docs-content {
max-width: none;
}
body[data-api-layout="split"] .docs-content article {
max-width: none;
}
/* React API reference pages: let the two-column endpoint reader (content left,
sticky code panel right) fill the middle column instead of the prose
max-width. Whether the layout itself is capped (centered) or spans the
viewport (full) follows contentWidthMode — see the fullBleed block below. */
body[data-page-type="apiReference"][data-react-api="true"] .docs-content {
max-width: none;
margin-inline: 0;
/* The React reader brings its own inner padding (px-6/xl:px-10) — drop most of
the prose padding so the code column reaches close to the viewport edge. */
padding-inline: 0.5rem;
}
body[data-page-type="apiReference"][data-react-api="true"] .docs-content article {
max-width: none;
}
body[data-page-type="apiReference"][data-react-api="true"] .docs-toc {
display: none;
}
/* The reader island is client:only — reserve height so feedback/prev-next
don't render high up and leap down when the island mounts (CLS). */
.rb-endpoint-root {
min-height: 50vh;
}
/* E153-036: header strip of React API pages (breadcrumb + floating page actions)
aligns with the reader's inner padding (docs-content 0.5rem + island px-6/xl:px-10)
instead of sitting at the near-flush 0.5rem base. */
body[data-page-type="apiReference"][data-react-api="true"] .docs-breadcrumb,
body[data-page-type="apiReference"][data-react-api="true"] .docs-eyebrow,
body[data-page-type="apiReference"][data-react-api="true"] .docs-prev-next,
body[data-page-type="apiReference"][data-react-api="true"] .docs-feedback {
margin-inline: 1.5rem;
}
/* Direct child of the body wrapper = the layout's floating instance only
(single-endpoint pages); the inline instance inside the stacked-page title
row keeps its own margins. */
body[data-page-type="apiReference"][data-react-api="true"] .docs-content__body > .docs-page-actions {
margin-right: 1.5rem;
}
@media (min-width: 1280px) {
body[data-page-type="apiReference"][data-react-api="true"] .docs-breadcrumb,
body[data-page-type="apiReference"][data-react-api="true"] .docs-eyebrow,
body[data-page-type="apiReference"][data-react-api="true"] .docs-prev-next,
body[data-page-type="apiReference"][data-react-api="true"] .docs-feedback {
margin-inline: 2.5rem;
}
body[data-page-type="apiReference"][data-react-api="true"] .docs-content__body > .docs-page-actions {
margin-right: 2.5rem;
}
}
/* E153-036: stacked-page header (perFolder/singlePage) — same inset as the reader's
inner padding, and on xl the reader's two-column grid (EndpointReaderView Row:
minmax(0,1fr) / minmax(380px,min(40%,520px)), 4rem gap) so the endpoint overview
sits over the content column, flush with the code column. Stacks to full width
below xl. */
.docs-page--api-reference .docs-api-reference-head {
padding: 0 1.5rem;
}
/* E158 (Denny): the copy-page split button sits inline next to the page title on
stacked pages (the page suppresses the layout's floating instance) — the float
used to squeeze this grid (grid = BFC root) so the overview never aligned with
the reader's code column. */
.docs-api-reference-head__title-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem 1rem;
}
.docs-api-reference-head__title-row .docs-page-actions {
float: none;
/* Right edge of the intro column, vertically centered on the headline. */
margin: 0 0 0 auto;
flex-shrink: 0;
}
.docs-page--api-reference .docs-deprecation-banner {
margin-inline: 1.5rem;
}
@media (min-width: 1280px) {
.docs-page--api-reference .docs-api-reference-head {
padding: 0 2.5rem;
display: grid;
/* Muss dem Row-Template des Readers folgen (Row.tsx) — sonst fluchtet der
Endpoint-Overview nicht mehr mit der Code-Spalte darunter. */
grid-template-columns: minmax(0, 1fr) minmax(380px, min(40%, 520px));
column-gap: 4rem;
align-items: start;
}
.docs-page--api-reference .docs-deprecation-banner {
margin-inline: 2.5rem;
}
}
.docs-api-reference-head__overview {
margin-top: 0.5rem;
min-width: 0;
}
/* Responsive: stack on screens narrower than 1024px */
@media (max-width: 1024px) {
.docs-split-columns {
grid-template-columns: 1fr;
}
.docs-split-code {
position: static;
max-height: none;
}
}
/* Responsive: tighter spacing on mobile */
@media (max-width: 768px) {
.docs-split-columns {
gap: 1rem;
}
}
@media (min-width: 1281px) {
body[data-page-type="apiReference"][data-react-api="true"] .docs-layout {
grid-template-columns: var(--rb-sidebar-width) minmax(0, 1fr);
}
}
/* ══════════════════════════════════════════════════════════════
Theme Overrides (E154 — visual per-surface editor)
══════════════════════════════════════════════════════════════ */
:root {
--rb-header-opacity: 100%;
--rb-header-border-width: 0px;
--rb-header-radius: 16px;
--rb-header-margin-x: 8px;
--rb-header-margin-top: 7px;
--rb-header-shadow-opacity: 25%;
--rb-sidebar-radius: 16px;
--rb-sidebar-margin: 8px;
--rb-sidebar-shadow-opacity: 25%;
--rb-sidebar-width: 270px;
}
html[data-theme-mode="light"] {
--rb-header-bg: #1d2b66;
--rb-header-text: #ffffff;
--rb-header-tab-text: #ffffff;
--rb-header-tab-hover-text: #ffffff;
--rb-header-tab-hover-bg: #fc771c;
--rb-header-tab-active-text: #ffffff;
--rb-header-tab-active-bg: #fc771c;
--rb-sidebar-bg: #1d2b66;
--rb-sidebar-text: #ffffff;
}
@media not all and (prefers-color-scheme: dark) {
html:not([data-theme-mode="dark"]) {
--rb-header-bg: #1d2b66;
--rb-header-text: #ffffff;
--rb-header-tab-text: #ffffff;
--rb-header-tab-hover-text: #ffffff;
--rb-header-tab-hover-bg: #fc771c;
--rb-header-tab-active-text: #ffffff;
--rb-header-tab-active-bg: #fc771c;
--rb-sidebar-bg: #1d2b66;
--rb-sidebar-text: #ffffff;
}
}