*/
.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;
}
/* ── 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: 4.5rem; /* 3.5rem 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;
}
}
/* ══════════════════════════════════════════════════════════════
Homepage — Landing page layout
══════════════════════════════════════════════════════════════ */
.docs-homepage {
width: 100%;
max-width: 72rem;
margin: 0 auto;
padding: 0 2rem;
}
/* Open hero composition — no boxed gradient card; a soft radial tint of the
theme primary bleeds from the top edge instead (reads as light, not as a
placeholder container). */
.docs-homepage__hero {
position: relative;
text-align: center;
padding: 5.5rem 2rem 4rem;
margin-bottom: 3rem;
}
.docs-homepage__hero::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(
34rem 14rem at 50% -6rem,
color-mix(in srgb, var(--rb-primary) 5%, transparent),
transparent 62%
);
pointer-events: none;
}
/* E152-010: display titles pick up the heading font override too */
.docs-homepage__title,
.docs-homepage__links-title,
.docs-homepage__code-title,
.docs-homepage__cta-section-title,
.docs-section-landing__title {
font-family: var(--rb-heading-font-family, var(--rb-font-family));
}
.docs-homepage__title {
font-size: clamp(2.5rem, 5vw, 3.25rem);
font-weight: 700;
letter-spacing: -0.04em;
line-height: 1.08;
text-wrap: balance;
color: var(--rb-text);
margin-bottom: 1.25rem;
}
.docs-homepage__description {
font-size: 1.1875rem;
color: var(--rb-text-muted);
max-width: 38rem;
margin: 0 auto 2.25rem;
line-height: 1.55;
text-wrap: balance;
}
.docs-homepage__actions {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.docs-homepage__cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 1.5rem;
border-radius: var(--rb-border-radius);
font-weight: 500;
font-size: 0.9375rem;
text-decoration: none;
transition: opacity var(--rb-duration-normal) var(--rb-ease-out-expo),
transform var(--rb-duration-normal) var(--rb-ease-out-expo),
box-shadow var(--rb-duration-normal) var(--rb-ease-out-expo),
background-color var(--rb-duration-normal) var(--rb-ease-out-expo),
border-color var(--rb-duration-normal) var(--rb-ease-out-expo);
}
.docs-homepage__cta:active {
transform: translateY(0) scale(0.98);
}
.docs-homepage__cta--primary {
background: var(--rb-primary);
color: var(--rb-primary-foreground);
}
.docs-homepage__cta--primary:hover {
opacity: 0.9;
transform: translateY(-1px);
box-shadow: var(--rb-shadow-md);
}
.docs-homepage__cta--secondary {
background: var(--rb-btn-bg, transparent);
color: var(--rb-btn-text, var(--rb-text));
border: 1px solid var(--rb-btn-border, var(--rb-border));
}
.docs-homepage__cta--secondary:hover {
border-color: var(--rb-btn-hover-border, var(--rb-text-muted));
background: var(--rb-btn-hover-bg, var(--rb-surface));
color: var(--rb-btn-hover-text, var(--rb-btn-text, var(--rb-text)));
}
/* Homepage feature cards — larger than standard card-grid */
.docs-homepage__cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.25rem;
margin-bottom: 3rem;
}
.docs-homepage__cards .docs-card {
padding: 1.75rem;
border-radius: calc(var(--rb-border-radius) * 1.5);
box-shadow: var(--rb-shadow-sm);
}
.docs-homepage__cards .docs-card__icon {
width: 2.75rem;
height: 2.75rem;
padding: 0.625rem;
margin-bottom: 1rem;
border: 1px solid color-mix(in srgb, var(--rb-primary) 14%, transparent);
}
.docs-homepage__cards .docs-card__title {
font-size: 1.0625rem;
margin-bottom: 0.5rem;
}
.docs-homepage__cards .docs-card__description {
font-size: 0.875rem;
line-height: 1.6;
}
@media (max-width: 768px) {
.docs-homepage__hero {
padding: 2.5rem 1rem 2rem;
}
.docs-homepage__title {
font-size: 2rem;
}
.docs-homepage__description {
font-size: 1.0625rem;
}
.docs-homepage__cards {
grid-template-columns: 1fr;
}
.docs-homepage__links-grid {
grid-template-columns: 1fr;
}
}
/* E66-013: Quick Links block */
.docs-homepage__links {
margin-bottom: 3rem;
}
.docs-homepage__links-title {
font-size: 1.5rem;
font-weight: 600;
color: var(--rb-text);
margin-bottom: 1.25rem;
}
.docs-homepage__links-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 1rem;
}
.docs-homepage__link {
display: flex;
flex-direction: column;
gap: 0.25rem;
padding: 1rem 1.25rem;
border: 1px solid var(--rb-border);
border-radius: var(--rb-border-radius);
text-decoration: none;
color: var(--rb-text);
transition: all 0.2s ease;
}
.docs-homepage__link:hover {
border-color: var(--rb-primary);
box-shadow: var(--rb-shadow-sm);
transform: translateY(-1px);
}
.docs-homepage__link-icon {
font-size: 1.25rem;
margin-bottom: 0.25rem;
}
.docs-homepage__link-title {
font-weight: 500;
font-size: 0.9375rem;
}
.docs-homepage__link-desc {
font-size: 0.8125rem;
color: var(--rb-text-muted);
line-height: 1.5;
}
/* E66-013: Code Example block */
.docs-homepage__code-example {
margin-bottom: 3rem;
}
.docs-homepage__code-title {
font-size: 1.5rem;
font-weight: 600;
color: var(--rb-text);
margin-bottom: 1rem;
}
.docs-homepage__code-block {
background: var(--rb-code-block-bg);
color: var(--rb-code-block-text);
border-radius: 0.625rem;
padding: 1.5rem;
font-family: var(--rb-font-code);
font-size: 0.875rem;
line-height: 1.7;
overflow-x: auto;
margin: 0;
}
.docs-homepage__code-block code {
background: none;
padding: 0;
border-radius: 0;
font-size: inherit;
color: inherit;
}
/* E66-013: CTA Section block */
.docs-homepage__cta-section {
text-align: center;
padding: 3rem 2rem;
border-radius: var(--rb-border-radius);
margin-bottom: 3rem;
}
.docs-homepage__cta-section--default {
background: var(--rb-surface);
border: 1px solid var(--rb-border);
}
.docs-homepage__cta-section--accent {
background: linear-gradient(
135deg,
color-mix(in srgb, var(--rb-primary) 8%, transparent) 0%,
color-mix(in srgb, var(--rb-accent, var(--rb-primary)) 6%, transparent) 100%
);
border: 1px solid color-mix(in srgb, var(--rb-primary) 15%, transparent);
}
.docs-homepage__cta-section-title {
font-size: 1.75rem;
font-weight: 700;
color: var(--rb-text);
margin-bottom: 0.75rem;
}
.docs-homepage__cta-section-desc {
font-size: 1.0625rem;
color: var(--rb-text-muted);
max-width: 32rem;
margin: 0 auto 1.5rem;
line-height: 1.6;
}
/* ── E67-012: Section Landing Pages ──────────────────────── */
.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. Hero/cards keep theirs. */
@media (prefers-reduced-motion: no-preference) {
.docs-homepage__hero {
animation: fadeInUp 0.6s var(--rb-ease-out-expo) both;
}
.docs-section-landing__hero {
animation: fadeInUp 0.6s var(--rb-ease-out-expo) both;
}
/* fill-mode backwards (not both): a forwards fill would pin `transform`
after the entrance and permanently override the hover lift. */
.docs-homepage__cards .docs-card {
animation: fadeInUp 0.5s var(--rb-ease-out-expo) backwards;
}
.docs-homepage__cards .docs-card:nth-child(2) { animation-delay: 0.05s; }
.docs-homepage__cards .docs-card:nth-child(3) { animation-delay: 0.1s; }
.docs-homepage__cards .docs-card:nth-child(4) { animation-delay: 0.15s; }
.docs-homepage__cards .docs-card:nth-child(5) { animation-delay: 0.2s; }
.docs-homepage__cards .docs-card:nth-child(6) { animation-delay: 0.25s; }
}
/* 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: 4.5rem;
max-height: calc(100vh - 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:
1fr / minmax(380px,1fr), 4rem gap) so the endpoint overview sits half-width over
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;
grid-template-columns: 1fr minmax(380px, 1fr);
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-shadow-opacity: 25%;
--rb-sidebar-radius: 16px;
--rb-sidebar-margin: 8px;
--rb-sidebar-shadow-opacity: 25%;
}
html[data-theme-mode="light"] {
--rb-header-bg: #1d2b66;
--rb-header-text: #ffffff;
--rb-header-tab-text: #ffffff;
--rb-header-tab-hover-text: #000000;
--rb-header-tab-hover-bg: #fc771c;
--rb-header-tab-active-text: #000000;
--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: #000000;
--rb-header-tab-hover-bg: #fc771c;
--rb-header-tab-active-text: #000000;
--rb-header-tab-active-bg: #fc771c;
--rb-sidebar-bg: #1d2b66;
--rb-sidebar-text: #ffffff;
}
}