/* =============================================================================
 *  Starlight × Nibiru Docs handoff — bridge stylesheet (conservative pass)
 *
 *  Scope: COLOUR + TYPOGRAPHY only on docs pages. We don't touch Starlight's
 *  layout, sidebar widths, header heights, or DOM structure. The handoff's
 *  full visual recreation needs proper component overrides — this bridge
 *  just re-tints what Starlight already renders so docs feel consistent
 *  with the splash brand.
 *
 *  Loaded LAST in the customCss cascade. Targets only `:root:not([data-has-hero])`
 *  so splash pages (which set data-has-hero) stay completely untouched.
 * ===========================================================================*/

/* ============================================================
   01 · MARKDOWN PROSE — recolor h1/h2/h3/p/em/strong/code
   ============================================================ */

:root:not([data-has-hero]) .sl-markdown-content {
	color: var(--star-soft, #d8d2c0);
}

/* H1 — Space Grotesk display per mockup .doc-article h1 */
:root:not([data-has-hero]) .content-panel h1,
:root:not([data-has-hero]) .sl-markdown-content h1 {
	font-family: var(--nibiru-font-display, 'Space Grotesk', 'Inter Tight', ui-sans-serif, sans-serif);
	font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.04em;
	color: var(--star, #f4eedb);
	margin: 0 0 18px;
}
/* Inline <em> in H1 → amber→magenta gradient text (mockup detail) */
:root:not([data-has-hero]) .content-panel h1 em,
:root:not([data-has-hero]) .sl-markdown-content h1 em {
	font-style: normal;
	font-weight: 500;
	background: linear-gradient(110deg, #ffb574 0%, #b86bff 70%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* H2 — Space Grotesk display, full hairline divider above (mockup pattern) */
:root:not([data-has-hero]) .sl-markdown-content h2 {
	font-family: var(--nibiru-font-display, 'Space Grotesk', 'Inter Tight', ui-sans-serif, sans-serif);
	font-size: 1.6rem;
	font-weight: 500;
	letter-spacing: -0.025em;
	line-height: 1.15;
	color: var(--star, #f4eedb);
	margin: 56px 0 16px;
	padding-top: 24px;
	border-top: 1px solid var(--nibiru-line, var(--line, rgba(244, 238, 219, 0.12)));
}
/* Drop the legacy magenta-bar pseudo — mockup uses the full top border instead */
:root:not([data-has-hero]) .sl-markdown-content h2::before {
	display: none;
	content: none;
}

/* H3 — Space Grotesk, lavender per mockup */
:root:not([data-has-hero]) .sl-markdown-content h3 {
	font-family: var(--nibiru-font-display, 'Space Grotesk', 'Inter Tight', ui-sans-serif, sans-serif);
	font-size: 1.18rem;
	font-weight: 500;
	letter-spacing: -0.02em;
	color: var(--nibiru-iris-soft, #d4b4ff);
	margin: 36px 0 12px;
}

/* H4 — mono eyebrow per mockup */
:root:not([data-has-hero]) .sl-markdown-content h4 {
	font-family: var(--font-mono, var(--nibiru-font-mono));
	font-size: 12px;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--muted, #6e6680);
	margin: 28px 0 10px;
	font-weight: 500;
}

:root:not([data-has-hero]) .sl-markdown-content p,
:root:not([data-has-hero]) .sl-markdown-content li {
	color: var(--star-soft, #d8d2c0);
}

:root:not([data-has-hero]) .sl-markdown-content strong {
	color: var(--star, #f4eedb);
	font-weight: 600;
}

/* Inline em → magenta-2 (handoff calls for this — not italic) */
:root:not([data-has-hero]) .sl-markdown-content em {
	color: var(--nebula-mag-2, #d8a8ff);
	font-style: normal;
}

/* List markers → magenta */
:root:not([data-has-hero]) .sl-markdown-content ul li::marker {
	color: var(--nebula-mag, #b86bff);
}

/* Inline code — match mockup's magenta-tinted pill */
:root:not([data-has-hero]) .sl-markdown-content :not(pre) > code {
	font-family: var(--font-mono, var(--nibiru-font-mono));
	font-size: 0.86em;
	background: rgba(184, 107, 255, 0.14);
	color: var(--nibiru-iris-soft, #d4b4ff);
	border: 1px solid rgba(184, 107, 255, 0.20);
	padding: 0.05em 0.4em;
	border-radius: 6px;
	letter-spacing: 0.04em;
}

/* Code-block frame (Expressive Code) — match mockup .code-block chrome */
:root:not([data-has-hero]) .expressive-code .frame,
:root:not([data-has-hero]) .expressive-code figure {
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--nibiru-line-strong, var(--line-strong, rgba(244, 238, 219, 0.28)));
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7);
}
:root:not([data-has-hero]) .expressive-code .frame .header,
:root:not([data-has-hero]) .expressive-code figcaption {
	border-bottom: 1px solid rgba(244, 238, 219, 0.08);
	font-family: var(--font-mono, var(--nibiru-font-mono));
	font-size: 11px;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--muted, #6e6680);
}
/* File-name label glows magenta per mockup */
:root:not([data-has-hero]) .expressive-code .title,
:root:not([data-has-hero]) .expressive-code figcaption .title {
	color: var(--nibiru-nebula-mag, var(--nebula-mag, #b86bff));
}

/* Blockquote — magenta gradient fade */
:root:not([data-has-hero]) .sl-markdown-content blockquote {
	border-left: 2px solid var(--nebula-mag, #b86bff);
	padding: 4px 0 4px 16px;
	background: linear-gradient(90deg, rgba(184, 107, 255, 0.05), transparent 60%);
	color: var(--star-soft, #d8d2c0);
	font-style: italic;
	font-family: var(--font-sans, var(--nibiru-font-text));
}

/* HR — gradient line, no longer the lotus PNG */
:root:not([data-has-hero]) .sl-markdown-content hr {
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(244, 238, 219, 0.16) 50%, transparent);
	background-color: transparent;
	background-image: linear-gradient(90deg, transparent, rgba(244, 238, 219, 0.16) 50%, transparent);
	max-width: 24rem;
	margin: 32px auto;
	filter: none;
	opacity: 1;
}

/* ============================================================
   02 · SIDEBAR — match docs-page-mockup .doc-sidebar
   ============================================================ */

/* Pane background + soft glass blur (mockup: rgba(10,4,20,0.4) + blur(8px)) */
:root:not([data-has-hero]) .sidebar-pane {
	background: rgba(10, 4, 20, 0.4);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

/* Item base — padding/typography per mockup .doc-sidebar a */
:root:not([data-has-hero]) nav.sidebar a {
	display: block;
	padding: 7px 12px;
	font-size: 14px;
	color: rgba(244, 238, 219, 0.7);
	border-left: 1.5px solid transparent;
	border-radius: 0 8px 8px 0;
	transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

/* Hover — lavender border-left + faint magenta wash */
:root:not([data-has-hero]) nav.sidebar a:hover {
	color: var(--star, #f4eedb);
	border-left-color: var(--nibiru-iris-soft, #d4b4ff);
	background: rgba(184, 107, 255, 0.06);
}

/* Active — solid magenta border-left + stronger magenta wash */
:root:not([data-has-hero]) nav.sidebar a[aria-current='page'] {
	color: var(--star, #f4eedb);
	font-weight: 500;
	border-left-color: var(--nibiru-nebula-mag, var(--nebula-mag, #b86bff));
	background: rgba(184, 107, 255, 0.10);
	position: relative;
}

/* Group label (folder summary) — mono uppercase per mockup */
:root:not([data-has-hero]) nav.sidebar .group-label .large {
	font-family: var(--font-mono, var(--nibiru-font-mono));
	font-size: 11px;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--muted, #6e6680);
	font-weight: 500;
	margin: 22px 0 8px;
}
:root:not([data-has-hero]) nav.sidebar > ul > li:first-child .group-label .large {
	margin-top: 0;
}

/* Tighter list spacing per mockup (1px gap) */
:root:not([data-has-hero]) nav.sidebar ul ul {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

/* ============================================================
   03 · TABLE OF CONTENTS (right rail) — match .doc-toc
   ============================================================ */

/* Right pane chrome — sticky, full-height, faint left border */
:root:not([data-has-hero]) .right-sidebar-panel {
	padding: 56px 24px 56px 16px;
	font-size: 13px;
	border-left: 1px solid var(--nibiru-line, var(--line, rgba(244, 238, 219, 0.12)));
}

/* "On this page" header — mono 11px uppercase muted */
:root:not([data-has-hero]) .right-sidebar-panel h2,
:root:not([data-has-hero]) starlight-toc h2 {
	font-family: var(--font-mono, var(--nibiru-font-mono));
	font-size: 11px;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--muted, #6e6680);
	font-weight: 500;
	margin: 0 0 12px;
}

/* TOC item base — line-height + faint default colour */
:root:not([data-has-hero]) starlight-toc a {
	color: rgba(244, 238, 219, 0.6);
	display: block;
	padding: 4px 0;
	line-height: 1.4;
	transition: color 160ms ease;
	border-left: none;
}

:root:not([data-has-hero]) starlight-toc a:hover {
	color: var(--star, #f4eedb);
}

/* Indent depth-2 headings */
:root:not([data-has-hero]) starlight-toc li li a {
	padding-left: 12px;
	font-size: 12px;
}

/* Active heading — magenta border-left with negative margin per mockup */
:root:not([data-has-hero]) starlight-toc a[aria-current='true'] {
	color: var(--star, #f4eedb);
	border-left: 2px solid var(--nibiru-nebula-mag, var(--nebula-mag, #b86bff));
	margin-left: -10px;
	padding-left: 8px;
}
:root:not([data-has-hero]) starlight-toc li li a[aria-current='true'] {
	padding-left: 20px;
}

/* ============================================================
   04 · ASIDES → handoff CALLOUTS (cyan / green / amber / rose)
   ============================================================ */

:root:not([data-has-hero]) .starlight-aside--note {
	background: var(--note-bg, rgba(106, 217, 255, 0.06));
	border-color: var(--note-border, rgba(106, 217, 255, 0.30));
	border-left: 3px solid var(--note-fg, #6ad9ff);
}
:root:not([data-has-hero]) .starlight-aside--note .starlight-aside__title {
	color: var(--note-fg, #6ad9ff);
}

:root:not([data-has-hero]) .starlight-aside--tip {
	background: var(--tip-bg, rgba(110, 231, 176, 0.06));
	border-color: var(--tip-border, rgba(110, 231, 176, 0.30));
	border-left: 3px solid var(--tip-fg, #6ee7b0);
}
:root:not([data-has-hero]) .starlight-aside--tip .starlight-aside__title {
	color: var(--tip-fg, #6ee7b0);
}

:root:not([data-has-hero]) .starlight-aside--caution {
	background: var(--warn-bg, rgba(255, 181, 116, 0.06));
	border-color: var(--warn-border, rgba(255, 181, 116, 0.32));
	border-left: 3px solid var(--warn-fg, #ffb574);
}
:root:not([data-has-hero]) .starlight-aside--caution .starlight-aside__title {
	color: var(--warn-fg, #ffb574);
}

:root:not([data-has-hero]) .starlight-aside--danger {
	background: var(--danger-bg, rgba(255, 122, 184, 0.06));
	border-color: var(--danger-border, rgba(255, 122, 184, 0.32));
	border-left: 3px solid var(--danger-fg, #ff7ab8);
}
:root:not([data-has-hero]) .starlight-aside--danger .starlight-aside__title {
	color: var(--danger-fg, #ff7ab8);
}

/* ============================================================
   05 · TABLES — handoff DocTable look
   ============================================================ */

:root:not([data-has-hero]) .sl-markdown-content table {
	border: 1px solid var(--line, rgba(244, 238, 219, 0.08));
	border-radius: 8px;
	overflow: hidden;
}
:root:not([data-has-hero]) .sl-markdown-content thead {
	background: var(--space-2, #120822);
	border-bottom: 1px solid var(--line, rgba(244, 238, 219, 0.08));
}
:root:not([data-has-hero]) .sl-markdown-content th {
	font-family: var(--font-mono, var(--nibiru-font-mono));
	font-size: 11px;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--muted, #8b85a3);
	font-weight: 500;
}
:root:not([data-has-hero]) .sl-markdown-content tbody tr:hover {
	background: rgba(184, 107, 255, 0.04);
}

/* ============================================================
   06 · PAGINATION — match .page-pagination cards
   ============================================================ */

:root:not([data-has-hero]) .pagination-links {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 80px;
	padding-top: 36px;
	border-top: 1px solid var(--nibiru-line, var(--line, rgba(244, 238, 219, 0.12)));
}
@media (max-width: 600px) {
	:root:not([data-has-hero]) .pagination-links {
		grid-template-columns: 1fr;
	}
}

:root:not([data-has-hero]) .pagination-links a {
	background: var(--nibiru-night, var(--space-2, #120825));
	border: 1px solid var(--nibiru-line, var(--line, rgba(244, 238, 219, 0.12)));
	border-radius: 14px;
	padding: 16px 18px;
	transition: border-color 200ms ease, transform 200ms ease;
	display: flex;
	flex-direction: column;
	gap: 4px;
	text-decoration: none;
}
:root:not([data-has-hero]) .pagination-links a:hover {
	border-color: var(--nibiru-nebula-mag, var(--nebula-mag, #b86bff));
	transform: translateY(-1px);
}

/* Mockup label "← Previous" / "Next →" — mono uppercase muted */
:root:not([data-has-hero]) .pagination-links a > span:first-child,
:root:not([data-has-hero]) .pagination-links svg + span,
:root:not([data-has-hero]) .pagination-links .link-title {
	font-family: var(--font-mono, var(--nibiru-font-mono));
	font-size: 11px;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--muted, #6e6680);
}

/* The destination title — 15px medium */
:root:not([data-has-hero]) .pagination-links a > span:last-child {
	font-family: var(--font-sans, var(--nibiru-font-text));
	font-size: 15px;
	font-weight: 500;
	color: var(--star, #f4eedb);
	letter-spacing: -0.01em;
	text-transform: none;
}

/* "Next" cell aligns right per mockup */
:root:not([data-has-hero]) .pagination-links a.link-next {
	text-align: right;
	align-items: flex-end;
}

/* ============================================================
   07 · SEARCH — Pagefind modal accents
   ============================================================ */

site-search button {
	color: var(--muted, #8b85a3);
}
site-search button:hover {
	border-color: var(--line-strong, rgba(244, 238, 219, 0.16));
}

dialog.dialog-frame {
	background: var(--space-2, #120822);
	border: 1px solid var(--line, rgba(244, 238, 219, 0.08));
	box-shadow:
		0 24px 48px -16px rgba(0, 0, 0, 0.6),
		0 0 60px rgba(184, 107, 255, 0.10);
	color: var(--star, #f4eedb);
}
dialog.dialog-frame::backdrop {
	background: rgba(6, 3, 15, 0.6);
	backdrop-filter: blur(6px);
}

.pagefind-ui {
	--pagefind-ui-primary: var(--nebula-mag, #b86bff);
	--pagefind-ui-text: var(--star, #f4eedb);
	--pagefind-ui-background: var(--space-2, #120822);
	--pagefind-ui-border: var(--line, rgba(244, 238, 219, 0.08));
	--pagefind-ui-tag: var(--space-3, #1a0c2e);
	--pagefind-ui-font: var(--font-sans, var(--nibiru-font-text));
}
.pagefind-ui__result-excerpt mark {
	background: rgba(184, 107, 255, 0.30);
	color: var(--star, #f4eedb);
	padding: 0;
}

/* ============================================================
   08 · ARTICLE-HEADER BLOCKS (consumed by PageTitle override)
   ============================================================
   These styles target the markup the PageTitle override emits:
   .breadcrumbs · .doc-lede · .doc-meta · .help-strip
   They are scoped tightly so they don't leak to splash pages.
   ============================================================ */

:root:not([data-has-hero]) .breadcrumbs {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-mono, var(--nibiru-font-mono));
	font-size: 12px;
	color: var(--muted, #6e6680);
	margin-bottom: 18px;
	flex-wrap: wrap;
}
:root:not([data-has-hero]) .breadcrumbs a {
	color: inherit;
	text-decoration: none;
	border: none;
	transition: color 160ms ease;
}
:root:not([data-has-hero]) .breadcrumbs a:hover {
	color: var(--star, #f4eedb);
}
:root:not([data-has-hero]) .breadcrumbs .sep {
	color: var(--line-strong, rgba(244, 238, 219, 0.28));
}

:root:not([data-has-hero]) .doc-lede {
	font-size: 1.18rem;
	line-height: 1.55;
	color: rgba(244, 238, 219, 0.72);
	max-width: 56ch;
	margin: 0 0 36px;
	font-family: var(--font-sans, var(--nibiru-font-text));
	font-weight: 400;
}

:root:not([data-has-hero]) .doc-meta {
	display: flex;
	gap: 28px;
	align-items: center;
	font-family: var(--font-mono, var(--nibiru-font-mono));
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted, #6e6680);
	padding-bottom: 28px;
	margin-bottom: 36px;
	border-bottom: 1px solid var(--nibiru-line, var(--line, rgba(244, 238, 219, 0.12)));
	flex-wrap: wrap;
}
:root:not([data-has-hero]) .doc-meta strong {
	color: rgba(244, 238, 219, 0.85);
	font-weight: 500;
}
:root:not([data-has-hero]) .doc-meta a {
	color: inherit;
	border: none;
	text-decoration: none;
	transition: color 160ms ease;
}
:root:not([data-has-hero]) .doc-meta a:hover {
	color: var(--star, #f4eedb);
}
:root:not([data-has-hero]) .doc-meta .pulse {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #7ad6a3;
	box-shadow: 0 0 8px rgba(122, 214, 163, 0.7);
	display: inline-block;
	margin-right: 6px;
}

/* ============================================================
   09 · HELP STRIP — bottom of every article ("Was this helpful?")
   ============================================================ */

:root:not([data-has-hero]) .help-strip {
	margin-top: 48px;
	padding: 18px 22px;
	background: rgba(244, 238, 219, 0.03);
	border: 1px solid var(--nibiru-line, var(--line, rgba(244, 238, 219, 0.12)));
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	font-size: 14px;
}
:root:not([data-has-hero]) .help-strip-text {
	color: rgba(244, 238, 219, 0.75);
}
:root:not([data-has-hero]) .help-strip-actions {
	display: flex;
	gap: 8px;
}
:root:not([data-has-hero]) .help-strip-actions a {
	padding: 7px 14px;
	border: 1px solid var(--line-strong, rgba(244, 238, 219, 0.28));
	border-radius: 999px;
	font-size: 13px;
	color: rgba(244, 238, 219, 0.85);
	text-decoration: none;
	transition: color 160ms ease, border-color 160ms ease;
}
:root:not([data-has-hero]) .help-strip-actions a:hover {
	color: var(--star, #f4eedb);
	border-color: var(--nibiru-iris-soft, #d4b4ff);
}

/* ============================================================
   10b · DOC HEADER — emitted by BrandHeader.astro on docs pages
   ============================================================ */

:root:not([data-has-hero]) header.doc-header {
	position: sticky;
	top: 0;
	z-index: 60;
	height: 64px;
	display: flex;
	align-items: center;
	padding: 0 24px;
	background: rgba(6, 3, 15, 0.72);
	border-bottom: 1px solid var(--nibiru-line, var(--line, rgba(244, 238, 219, 0.12)));
	backdrop-filter: saturate(150%) blur(14px);
	-webkit-backdrop-filter: saturate(150%) blur(14px);
}

.doc-header .doc-header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: 24px;
}

.doc-header .brand {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: none;
	font-family: var(--nibiru-font-display, 'Space Grotesk', sans-serif);
	color: var(--star, #f4eedb);
	text-decoration: none;
	border: none;
}
/* Brand-mark is now an <img> of the lotus logo. Size matches the mockup
   spec (height ~30px) and lets it inherit the page's drop-shadow on hover. */
.doc-header .brand-mark {
	height: 30px;
	width: auto;
	flex: none;
	display: block;
	filter: drop-shadow(0 0 12px rgba(184, 107, 255, 0.35));
}
.doc-header .brand-name {
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -0.02em;
}
.doc-header .brand-name em {
	font-style: normal;
	font-weight: 300;
}
.doc-header .nav-version {
	font-family: var(--font-mono, var(--nibiru-font-mono));
	font-size: 11px;
	letter-spacing: 0.04em;
	color: var(--muted, #6e6680);
	padding: 3px 7px;
	border: 1px solid var(--nibiru-line, var(--line, rgba(244, 238, 219, 0.12)));
	border-radius: 999px;
	margin-left: 6px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.doc-header .nav-version .dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #7ad6a3;
	box-shadow: 0 0 8px rgba(122, 214, 163, 0.7);
}

.doc-header .doc-nav {
	display: flex;
	gap: 24px;
	align-items: center;
	flex: 1;
	justify-content: center;
}
.doc-header .doc-nav a {
	font-size: 14px;
	color: rgba(244, 238, 219, 0.7);
	text-decoration: none;
	border: none;
	transition: color 160ms ease;
}
.doc-header .doc-nav a:hover,
.doc-header .doc-nav a[aria-current='page'] {
	color: var(--star, #f4eedb);
}

.doc-header .doc-header-tools {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* Pagefind search trigger — restyled as the mockup's .search-inline pill */
.doc-header site-search button[data-open-modal] {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 220px;
	height: 36px;
	padding: 0 12px;
	background: rgba(244, 238, 219, 0.04);
	border: 1px solid var(--nibiru-line, var(--line, rgba(244, 238, 219, 0.12)));
	border-radius: 999px;
	color: rgba(244, 238, 219, 0.55);
	font-size: 13px;
	font-family: var(--nibiru-font-text, 'Inter Tight', sans-serif);
	cursor: pointer;
	transition: border-color 160ms ease, background-color 160ms ease;
}
.doc-header site-search button[data-open-modal]:hover {
	border-color: var(--line-strong, rgba(244, 238, 219, 0.28));
}
.doc-header site-search button[data-open-modal] svg {
	width: 14px;
	height: 14px;
	flex: none;
}
.doc-header site-search kbd {
	margin-left: auto;
	font-family: var(--font-mono, var(--nibiru-font-mono));
	font-size: 11px;
	color: var(--muted, #6e6680);
	padding: 2px 6px;
	border: 1px solid var(--nibiru-line, var(--line, rgba(244, 238, 219, 0.12)));
	border-radius: 4px;
	background: rgba(244, 238, 219, 0.03);
}
.doc-header site-search kbd kbd {
	border: none;
	background: none;
	padding: 0;
}

/* Language pills — mono uppercase, magenta tint on active */
.doc-header .lang-switcher {
	display: flex;
	gap: 4px;
	font-family: var(--font-mono, var(--nibiru-font-mono));
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted, #6e6680);
}
.doc-header .lang-switcher a {
	padding: 4px 8px;
	border-radius: 6px;
	color: inherit;
	text-decoration: none;
	border: none;
	transition: color 160ms ease, background-color 160ms ease;
}
.doc-header .lang-switcher a:hover {
	color: var(--star, #f4eedb);
}
.doc-header .lang-switcher a[aria-current='true'] {
	color: var(--star, #f4eedb);
	background: rgba(184, 107, 255, 0.12);
}

/* Hide on small screens — collapses gracefully */
@media (max-width: 768px) {
	.doc-header .doc-nav { display: none; }
	.doc-header .lang-switcher { display: none; }
	.doc-header site-search button[data-open-modal] { min-width: 0; }
}

/* ============================================================
   10 · PAGE-LEVEL ATMOSPHERE — soft magenta/blue radial wash
   ============================================================
   Mockup body has two faint radial gradients in the top corners.
   We add them to non-splash pages via a fixed pseudo-element so
   they don't shift on scroll and sit behind everything else.
   ============================================================ */

:root:not([data-has-hero]) body::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		radial-gradient(ellipse 70% 50% at 0% 0%,   rgba(184, 107, 255, 0.10), transparent 60%),
		radial-gradient(ellipse 60% 40% at 100% 0%, rgba(91, 141, 255, 0.07),  transparent 60%);
}
