/* Lumina Theme Identity — CSS Barrel */

/* Design Tokens */
/* Lumina Theme — Design Tokens (Light Mode) */

:root {
	/* Typography */
	--rf-font-sans: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--rf-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

	/* Primary scale (sky-blue) */
	--rf-color-primary-50: #f0f9ff;
	--rf-color-primary-100: #e0f2fe;
	--rf-color-primary-200: #bae6fd;
	--rf-color-primary-300: #7dd3fc;
	--rf-color-primary-400: #38bdf8;
	--rf-color-primary-500: #0ea5e9;
	--rf-color-primary-600: #0284c7;
	--rf-color-primary-700: #0369a1;
	--rf-color-primary-800: #075985;
	--rf-color-primary-900: #0c4a6e;
	--rf-color-primary-950: #082f49;

	/* Core palette */
	--rf-color-text: #1a1a2e;
	--rf-color-muted: #64748b;
	--rf-color-border: #e2e8f0;
	--rf-color-bg: #ffffff;
	--rf-color-primary: var(--rf-color-primary-500);
	--rf-color-primary-hover: var(--rf-color-primary-600);

	/* Surfaces */
	--rf-color-surface: #f8fafc;
	--rf-color-surface-hover: #f1f5f9;
	--rf-color-surface-active: #e2e8f0;
	--rf-color-surface-raised: #ffffff;

	/* Semantic */
	--rf-color-info: #3b82f6;
	--rf-color-info-bg: #eff6ff;
	--rf-color-info-border: #bfdbfe;
	--rf-color-warning: #f59e0b;
	--rf-color-warning-bg: #fffbeb;
	--rf-color-warning-border: #fde68a;
	--rf-color-danger: #ef4444;
	--rf-color-danger-bg: #fef2f2;
	--rf-color-danger-border: #fecaca;
	--rf-color-success: #10b981;
	--rf-color-success-bg: #ecfdf5;
	--rf-color-success-border: #a7f3d0;

	/* Radii */
	--rf-radius-sm: 6px;
	--rf-radius-md: 10px;
	--rf-radius-lg: 16px;
	--rf-radius-full: 9999px;

	/* Spacing */
	--rf-spacing-xs: 0.25rem;
	--rf-spacing-sm: 0.5rem;
	--rf-spacing-md: 1.5rem;
	--rf-spacing-lg: 2rem;
	--rf-spacing-xl: 3rem;
	--rf-spacing-2xl: 4rem;

	/* Section spacing */
	--rf-spacing-section: 4rem;
	--rf-spacing-section-tight: 1.5rem;
	--rf-spacing-section-loose: 6rem;
	--rf-spacing-section-breathe: 8rem;

	/* Inset (horizontal padding) */
	--rf-inset-flush: 0;
	--rf-inset-tight: 1rem;
	--rf-inset-loose: 4rem;
	--rf-inset-breathe: 8rem;

	/* Shadows */
	--rf-shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
	--rf-shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
	--rf-shadow-md: 0 4px 12px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.04);
	--rf-shadow-lg: 0 8px 24px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);

	/* Code block */
	--rf-color-code-bg: #0f172a;
	--rf-color-code-text: #e2e8f0;
	--rf-color-inline-code-bg: #f1f5f9;

	/* Syntax highlighting (Shiki CSS variables) */
	--shiki-foreground: var(--rf-color-code-text);
	--shiki-background: var(--rf-color-code-bg);
	--shiki-token-keyword: #c792ea;
	--shiki-token-string: #c3e88d;
	--shiki-token-string-expression: #c3e88d;
	--shiki-token-constant: #f78c6c;
	--shiki-token-comment: #637777;
	--shiki-token-function: #82aaff;
	--shiki-token-parameter: #d6deeb;
	--shiki-token-punctuation: #89ddff;
	--shiki-token-link: #82aaff;
}

/* Lumina Theme — Dark Mode Token Overrides */

[data-theme="dark"] {
	--rf-color-text: #e2e8f0;
	--rf-color-muted: #94a3b8;
	--rf-color-border: rgba(255, 255, 255, 0.1);
	--rf-color-bg: #0c1222;
	--rf-color-primary: #38bdf8;
	--rf-color-primary-hover: #7dd3fc;

	--rf-color-surface: #0f172a;
	--rf-color-surface-hover: #1e293b;
	--rf-color-surface-active: #334155;
	--rf-color-surface-raised: #1e293b;

	--rf-color-info: #60a5fa;
	--rf-color-info-bg: rgba(59, 130, 246, 0.1);
	--rf-color-info-border: rgba(59, 130, 246, 0.3);
	--rf-color-warning: #fbbf24;
	--rf-color-warning-bg: rgba(245, 158, 11, 0.1);
	--rf-color-warning-border: rgba(245, 158, 11, 0.3);
	--rf-color-danger: #f87171;
	--rf-color-danger-bg: rgba(239, 68, 68, 0.1);
	--rf-color-danger-border: rgba(239, 68, 68, 0.3);
	--rf-color-success: #34d399;
	--rf-color-success-bg: rgba(16, 185, 129, 0.1);
	--rf-color-success-border: rgba(16, 185, 129, 0.3);

	--rf-color-code-bg: #0f172a;
	--rf-color-code-text: #e2e8f0;
	--rf-color-inline-code-bg: rgba(255, 255, 255, 0.08);

	/* Syntax highlighting (Shiki CSS variables) */
	--shiki-foreground: var(--rf-color-code-text);
	--shiki-background: var(--rf-color-code-bg);
	--shiki-token-keyword: #c792ea;
	--shiki-token-string: #c3e88d;
	--shiki-token-string-expression: #c3e88d;
	--shiki-token-constant: #f78c6c;
	--shiki-token-comment: #637777;
	--shiki-token-function: #82aaff;
	--shiki-token-parameter: #d6deeb;
	--shiki-token-punctuation: #89ddff;
	--shiki-token-link: #82aaff;

	--rf-shadow-xs: 0 1px 2px rgba(0,0,0,0.3);
	--rf-shadow-sm: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
	--rf-shadow-md: 0 4px 12px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.3);
	--rf-shadow-lg: 0 8px 24px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.3);
}

/* Auto dark mode via system preference */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--rf-color-text: #e2e8f0;
		--rf-color-muted: #94a3b8;
		--rf-color-border: rgba(255, 255, 255, 0.1);
		--rf-color-bg: #0c1222;
		--rf-color-primary: #38bdf8;
		--rf-color-primary-hover: #7dd3fc;

		--rf-color-surface: #0f172a;
		--rf-color-surface-hover: #1e293b;
		--rf-color-surface-active: #334155;
		--rf-color-surface-raised: #1e293b;

		--rf-color-info: #60a5fa;
		--rf-color-info-bg: rgba(59, 130, 246, 0.1);
		--rf-color-info-border: rgba(59, 130, 246, 0.3);
		--rf-color-warning: #fbbf24;
		--rf-color-warning-bg: rgba(245, 158, 11, 0.1);
		--rf-color-warning-border: rgba(245, 158, 11, 0.3);
		--rf-color-danger: #f87171;
		--rf-color-danger-bg: rgba(239, 68, 68, 0.1);
		--rf-color-danger-border: rgba(239, 68, 68, 0.3);
		--rf-color-success: #34d399;
		--rf-color-success-bg: rgba(16, 185, 129, 0.1);
		--rf-color-success-border: rgba(16, 185, 129, 0.3);

		--rf-color-code-bg: #0f172a;
		--rf-color-code-text: #e2e8f0;
		--rf-color-inline-code-bg: rgba(255, 255, 255, 0.08);

		/* Syntax highlighting (Shiki CSS variables) */
		--shiki-foreground: var(--rf-color-code-text);
		--shiki-background: var(--rf-color-code-bg);
		--shiki-token-keyword: #c792ea;
		--shiki-token-string: #c3e88d;
		--shiki-token-string-expression: #c3e88d;
		--shiki-token-constant: #f78c6c;
		--shiki-token-comment: #637777;
		--shiki-token-function: #82aaff;
		--shiki-token-parameter: #d6deeb;
		--shiki-token-punctuation: #89ddff;
		--shiki-token-link: #82aaff;

		--rf-shadow-xs: 0 1px 2px rgba(0,0,0,0.3);
		--rf-shadow-sm: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
		--rf-shadow-md: 0 4px 12px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.3);
		--rf-shadow-lg: 0 8px 24px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.3);
	}
}


/* Global Styles */
/* Lumina Theme — Global Base Styles */

/* Reset */
*, *::before, *::after {
	box-sizing: border-box;
}

html {
	font-family: var(--rf-font-sans);
	color: var(--rf-color-text);
	background: var(--rf-color-bg);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transition: background-color 200ms ease, color 200ms ease;
}

body {
	margin: 0;
}

h1, h2, h3, h4, h5, h6 {
	line-height: 1.25;
	margin-top: 2em;
	margin-bottom: 0.5em;
	font-weight: 650;
	letter-spacing: -0.015em;
}

h1 { font-size: 2rem; font-weight: 400; letter-spacing: -0.025em; }
h2 { font-size: 1.75rem; font-weight: 400; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.1rem; }

p {
	margin-top: 0;
	margin-bottom: 1rem;
}

a {
	color: var(--rf-color-primary);
	text-decoration: none;
	transition: color 150ms ease;
}
a:hover {
	color: var(--rf-color-primary-hover);
	text-decoration: underline;
}

strong { font-weight: 600; }

code {
	font-family: var(--rf-font-mono);
	font-size: 0.875em;
	background: var(--rf-color-inline-code-bg);
	padding: 0.15rem 0.4rem;
	border-radius: var(--rf-radius-sm);
	font-variant-ligatures: none;
}

pre {
	background: var(--rf-color-code-bg);
	color: var(--rf-color-code-text);
	padding: 1.25rem 1.5rem;
	border-radius: var(--rf-radius-md);
	overflow-x: auto;
	margin: 1.5rem 0;
	font-size: 0.875rem;
	line-height: 1.7;
	border: 1px solid var(--rf-color-border);
}

pre code {
	background: none;
	padding: 0;
	font-size: inherit;
	border-radius: 0;
}

img {
	max-width: 100%;
	height: auto;
}

hr {
	border: none;
	border-top: 1px solid var(--rf-color-border);
	margin: 2rem 0;
}

ul, ol {
	padding-left: 1.5rem;
	margin-top: 0;
	margin-bottom: 1rem;
}

li {
	margin-bottom: 0.25rem;
}

li > p {
	margin-bottom: 0.5rem;
}

table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5rem 0;
	font-size: 0.9rem;
}

th {
	text-align: left;
	font-weight: 600;
	padding: 0.625rem 1rem;
	border-bottom: 2px solid var(--rf-color-border);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--rf-color-muted);
}

td {
	padding: 0.625rem 1rem;
	border-bottom: 1px solid var(--rf-color-border);
}

meta {
	display: none;
}



/* Element Overrides */
/* Table wrapper */
.rf-table-wrapper {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 1.5rem 0;
	border: 1px solid var(--rf-color-border);
	border-radius: var(--rf-radius-md);
}
.rf-table-wrapper table {
	margin: 0;
	border-collapse: collapse;
	width: 100%;
	min-width: 100%;
}
.rf-table-wrapper th {
	background: var(--rf-color-surface);
}
.rf-table-wrapper th:first-child {
	border-top-left-radius: var(--rf-radius-md);
}
.rf-table-wrapper th:last-child {
	border-top-right-radius: var(--rf-radius-md);
}
.rf-table-wrapper tr:last-child td {
	border-bottom: none;
}

/* Blockquote */
blockquote {
	position: relative;
	border-left: 3px solid var(--rf-color-primary);
	margin: 1.5rem 0;
	padding: 1rem 1.25rem 1rem 2.75rem;
	color: var(--rf-color-muted);
	background: var(--rf-color-surface);
	border-radius: 0 var(--rf-radius-md) var(--rf-radius-md) 0;
}
blockquote::before {
	content: '';
	position: absolute;
	left: 0.75rem;
	top: 1rem;
	width: 18px;
	height: 18px;
	background: var(--rf-color-primary);
	opacity: 0.4;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 8C10 5.79 8.21 4 6 4C3.79 4 2 5.79 2 8C2 10.21 3.79 12 6 12C6.67 12 7.31 11.83 7.88 11.54C7.63 14.08 5.55 16.09 3 16.34V18.36C6.68 18.09 9.64 15.13 9.93 11.45C9.98 10.99 10 10.5 10 10V8ZM22 8C22 5.79 20.21 4 18 4C15.79 4 14 5.79 14 8C14 10.21 15.79 12 18 12C18.67 12 19.31 11.83 19.88 11.54C19.63 14.08 17.55 16.09 15 16.34V18.36C18.68 18.09 21.64 15.13 21.93 11.45C21.98 10.99 22 10.5 22 10V8Z'/%3E%3C/svg%3E");
	mask-size: contain;
	mask-repeat: no-repeat;
}
blockquote p:last-child {
	margin-bottom: 0;
}

/* Code wrapper — behavior-injected copy button for code blocks */
.rf-code-wrapper {
	position: relative;
}

.rf-code-wrapper > pre {
	margin: 0;
}

.rf-copy-btn {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border: none;
	border-radius: var(--rf-radius-sm);
	background: transparent;
	color: var(--rf-color-code-text, #e2e8f0);
	cursor: pointer;
	opacity: 0;
	transition: opacity 150ms ease, background-color 150ms ease;
}

.rf-code-wrapper:hover .rf-copy-btn {
	opacity: 0.6;
}

.rf-copy-btn:hover {
	opacity: 1 !important;
	background: rgba(255, 255, 255, 0.1);
}

.rf-copy-btn--copied {
	opacity: 1 !important;
	color: var(--rf-color-success, #4ade80);
}


/* Layouts */
/* Shared mobile UI — menu button, fullscreen panel, close */

/* ---- Mobile menu button (hidden on desktop) ---- */
.rf-mobile-menu-btn {
	display: none;
	background: none;
	border: none;
	padding: 0.25rem;
	cursor: pointer;
	color: var(--rf-color-muted);
	line-height: 0;
}
.rf-mobile-menu-btn:hover {
	color: var(--rf-color-text);
}

/* ---- Fullscreen mobile panel ---- */
.rf-mobile-panel {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 100;
	background: var(--rf-color-bg, #fff);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
.rf-mobile-panel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.125rem 1.5rem;
	border-bottom: 1px solid var(--rf-color-border);
}
.rf-mobile-panel__title {
	font-size: 0.85rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--rf-color-muted);
}
.rf-mobile-panel__close {
	background: none;
	border: none;
	padding: 0.25rem;
	cursor: pointer;
	color: var(--rf-color-muted);
	line-height: 0;
}
.rf-mobile-panel__close:hover {
	color: var(--rf-color-text);
}
.rf-mobile-panel__nav {
	padding: 1.5rem;
}
.rf-mobile-panel__nav p {
	margin: 0;
}
.rf-mobile-panel__nav img {
	display: none;
}
.rf-mobile-panel__nav a {
	display: block;
	padding: 0.75rem 0;
	font-size: 1.1rem;
	color: var(--rf-color-text);
	text-decoration: none;
	border-bottom: 1px solid var(--rf-color-border);
}
.rf-mobile-panel__nav a:hover {
	color: var(--rf-color-primary, var(--rf-color-text));
	text-decoration: none;
}
.rf-mobile-panel__body {
	padding: 1rem 1.5rem;
}

/* Panel opens via data-open attribute (set by mobile-menu behavior) */
.rf-mobile-panel[data-open] {
	display: block;
}

@media (max-width: 768px) {
	.rf-mobile-menu-btn {
		display: block;
	}
}

/* Default layout */
.rf-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--rf-color-bg);
	border-bottom: 1px solid var(--rf-color-border);
}
.rf-header__inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.125rem 1.5rem;
}
.rf-header__inner .rf-search-trigger {
	margin-left: auto;
}
.rf-header__inner p ~ p {
	order: 1;
}
.rf-header__inner .rf-mobile-menu-btn {
	order: 2;
}
.rf-header p {
	margin: 0;
	line-height: 1;
}
.rf-header a {
	display: inline-block;
	color: inherit;
	text-decoration: none;
}
.rf-header a:hover {
	text-decoration: none;
}
.rf-header p:first-child a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 600;
	font-size: 1.2rem;
	letter-spacing: -0.02em;
}
.rf-header img {
	height: 2rem;
	width: auto;
}
.rf-header__inner p ~ p {
	font-size: 0.85rem;
}
.rf-header__inner p ~ p a {
	margin-left: 1.5rem;
	color: var(--rf-color-muted);
}
.rf-header__inner p ~ p a:hover {
	color: var(--rf-color-text);
}
.rf-header__inner p ~ p a svg {
	width: 1.1rem;
	height: 1.1rem;
	vertical-align: -0.15em;
}
.rf-page-content {
	--rf-content-max: 80rem;
	--rf-content-gutter: 1.5rem;

	padding-top: 2.5rem;
	padding-bottom: 4rem;
	container-type: inline-size;
}
/* Markdoc wraps content in <article>; make it the grid container.
   5-track named grid: full | wide | content | wide | full */
.rf-page-content > article {
	display: grid;
	grid-template-columns:
		[full-start] 1fr
		[wide-start] minmax(0, var(--rf-wide-inset, 8rem))
		[content-start] min(var(--rf-content-max), 100% - var(--rf-content-gutter) * 2)
		[content-end] minmax(0, var(--rf-wide-inset, 8rem))
		[wide-end] 1fr
		[full-end];
}
.rf-page-content > article > * {
	grid-column: content;
}

/* Width constraint via data-width attribute — narrower than content */
.rf-page-content > article > [data-width="compact"] {
	max-width: var(--rf-width-compact, 30rem);
	margin-inline: auto;
}
.rf-page-content > article > [data-width="narrow"] {
	max-width: var(--rf-width-narrow, 40rem);
	margin-inline: auto;
}
/* Width breakout via data-width attribute — wider than content */
.rf-page-content > article > [data-width="wide"] {
	grid-column: wide;
}
.rf-page-content > article > [data-width="full"] {
	grid-column: full;
	padding-inline: max(
		var(--rf-content-gutter, 1.5rem),
		calc((100% - var(--rf-content-max, 80rem)) / 2)
	);
}
/* Tinted sections also break out to full width */
.rf-page-content > article > :is([data-tint], [data-color-scheme]):not([data-width]) {
	grid-column: full;
	padding-inline: max(
		var(--rf-content-gutter, 1.5rem),
		calc((100% - var(--rf-content-max, 80rem)) / 2)
	);
}

/* Section spacing — vertical rhythm around block runes.
 * Rune blocks (elements with data-rune) get section-level margins.
 * Prose elements (p, h2, pre, table, etc.) keep their natural flow
 * spacing from global.css — only gaining section margins when
 * immediately adjacent to a rune block. */
.rf-page-content > article > * + [data-rune] {
	margin-top: var(--rf-spacing-section, 4rem);
	margin-bottom: var(--rf-spacing-section, 4rem);
}
/* Prose after a rune block: section gap above only.
 * No margin-bottom so subsequent prose keeps natural flow spacing. */
.rf-page-content > article > [data-rune] + :not([data-rune]) {
	margin-top: var(--rf-spacing-section, 4rem);
}
.rf-page-content > article > [data-spacing="flush"] {
	margin-top: 0;
	margin-bottom: 0;
}
.rf-page-content > article > [data-spacing="tight"] {
	margin-top: var(--rf-spacing-section-tight, 1.5rem);
	margin-bottom: var(--rf-spacing-section-tight, 1.5rem);
}
.rf-page-content > article > [data-spacing="loose"] {
	margin-top: var(--rf-spacing-section-loose, 8rem);
	margin-bottom: var(--rf-spacing-section-loose, 8rem);
}
.rf-page-content > article > [data-spacing="breathe"] {
	margin-top: var(--rf-spacing-section-breathe, 12rem);
	margin-bottom: var(--rf-spacing-section-breathe, 12rem);
}

/* Spacing on tinted/dark sections — use padding so space is inside the painted background */
.rf-page-content > article > :is([data-color-scheme], [data-tint])[data-spacing="flush"] {
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
}
.rf-page-content > article > :is([data-color-scheme], [data-tint])[data-spacing="tight"] {
	margin-top: 0;
	margin-bottom: 0;
	padding-top: var(--rf-spacing-section-tight, 1.5rem);
	padding-bottom: var(--rf-spacing-section-tight, 1.5rem);
}
.rf-page-content > article > :is([data-color-scheme], [data-tint])[data-spacing="default"],
.rf-page-content > article > :is([data-color-scheme], [data-tint]):not([data-spacing]) {
	margin-top: 0;
	margin-bottom: 0;
	padding-top: var(--rf-spacing-section, 4rem);
	padding-bottom: var(--rf-spacing-section, 4rem);
}
.rf-page-content > article > :is([data-color-scheme], [data-tint])[data-spacing="loose"] {
	margin-top: 0;
	margin-bottom: 0;
	padding-top: var(--rf-spacing-section-loose, 8rem);
	padding-bottom: var(--rf-spacing-section-loose, 8rem);
}
.rf-page-content > article > :is([data-color-scheme], [data-tint])[data-spacing="breathe"] {
	margin-top: 0;
	margin-bottom: 0;
	padding-top: var(--rf-spacing-section-breathe, 12rem);
	padding-bottom: var(--rf-spacing-section-breathe, 12rem);
}

/* Inset — horizontal padding within block runes */
.rf-page-content > article > [data-inset="flush"] {
	padding-inline: 0;
}
.rf-page-content > article > [data-inset="tight"] {
	padding-inline: var(--rf-inset-tight, 1rem);
}
.rf-page-content > article > [data-inset="loose"] {
	padding-inline: var(--rf-inset-loose, 4rem);
}
.rf-page-content > article > [data-inset="breathe"] {
	padding-inline: var(--rf-inset-breathe, 8rem);
}

/* Collapse top/bottom padding when a full-bleed section is first/last */
.rf-page-content:has(> article > :first-child:is([data-width="full"], [data-tint])) {
	padding-top: 0;
}
.rf-page-content:has(> article > :last-child:is([data-width="full"], [data-tint])) {
	padding-bottom: 0;
}

@media (max-width: 768px) {
	.rf-header__inner p ~ p {
		display: none;
	}
}

/* Docs layout */

/* ---- Fixed header ---- */
.rf-docs-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
	background: var(--rf-color-bg, #fff);
	border-bottom: 1px solid var(--rf-color-border);
}
.rf-docs-header__inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.125rem 1.5rem;
}
.rf-docs-header__inner .rf-search-trigger {
	margin-left: auto;
}
.rf-docs-header__inner p ~ p {
	order: 1;
}
.rf-docs-header__inner .rf-mobile-menu-btn {
	order: 2;
}
.rf-docs-header p {
	margin: 0;
	line-height: 1;
}
.rf-docs-header a {
	display: inline-block;
	color: inherit;
	text-decoration: none;
}
.rf-docs-header a:hover {
	text-decoration: none;
}
.rf-docs-header p:first-child a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 600;
	font-size: 1.2rem;
	letter-spacing: -0.02em;
}
.rf-docs-header img {
	height: 2rem;
	width: auto;
}
.rf-docs-header__inner p ~ p {
	font-size: 0.85rem;
}
.rf-docs-header__inner p ~ p a {
	margin-left: 1.5rem;
	color: var(--rf-color-muted);
}
.rf-docs-header__inner p ~ p a:hover {
	color: var(--rf-color-text);
}
.rf-docs-header__inner p ~ p a svg {
	width: 1.1rem;
	height: 1.1rem;
	vertical-align: -0.15em;
}

/* ---- Fixed sidebar ---- */
.rf-docs-sidebar {
	position: fixed;
	left: 0;
	top: 4.125rem;
	bottom: 0;
	width: 240px;
	overflow-y: auto;
	padding: 1.5rem;
	border-right: 1px solid var(--rf-color-border);
	background: var(--rf-color-bg, #fff);
	z-index: 5;
}
.rf-docs-sidebar::-webkit-scrollbar {
	width: 0;
}

/* ---- Content area ---- */
.rf-docs-content {
	padding-top: 5.75rem;
	padding-bottom: 4rem;
	container-type: inline-size;
}
.rf-docs-content--has-nav {
	margin-left: 240px;
}
.rf-docs-content__inner {
	max-width: 60rem;
	margin: 0 auto;
	--rf-content-padding: 2.5rem;
}
.rf-docs-content__inner--has-toc {
	display: flex;
	gap: 6rem;
	max-width: calc(60rem + 220px + 6rem);
}
.rf-docs-content__inner--has-toc .rf-docs-content__body {
	flex: 1;
	min-width: 0;
}

/* Width-variant grid — mirrors default layout's 5-track grid,
   simplified to 3 tracks (no full breakout in docs context).
   The wide inset tracks also serve as the content gutter. */
.rf-docs-content__body > div > article {
	display: grid;
	grid-template-columns:
		[wide-start] minmax(var(--rf-content-padding, 2.5rem), var(--rf-docs-wide-inset, 3rem))
		[content-start] minmax(0, 1fr)
		[content-end] minmax(var(--rf-content-padding, 2.5rem), var(--rf-docs-wide-inset, 3rem))
		[wide-end];
}
.rf-docs-content__body > div > article > * {
	grid-column: content;
}
.rf-docs-content__body > div > article > [data-width="wide"],
.rf-docs-content__body > div > article > [data-width="full"] {
	grid-column: wide;
}
.rf-docs-content__body > div > article > [data-width="compact"] {
	max-width: var(--rf-width-compact, 30rem);
	margin-inline: auto;
}
.rf-docs-content__body > div > article > [data-width="narrow"] {
	max-width: var(--rf-width-narrow, 40rem);
	margin-inline: auto;
}

/* ---- "On this page" sidebar ---- */
.rf-docs-toc {
	width: 220px;
	flex-shrink: 0;
	position: sticky;
	top: 5.75rem;
	align-self: flex-start;
	max-height: calc(100vh - 5.75rem);
	overflow-y: auto;
	padding: 0 1.25rem;
}
.rf-docs-toc::-webkit-scrollbar {
	width: 0;
}

/* ---- Smooth scroll with fixed-header offset ---- */
html:has(.rf-docs-header) {
	scroll-behavior: smooth;
	scroll-padding-top: 5rem;
}
@media (prefers-reduced-motion: reduce) {
	html:has(.rf-docs-header) {
		scroll-behavior: auto;
	}
}

/* ---- Mobile toolbar (hidden on desktop) ---- */
.rf-docs-toolbar {
	display: none;
	align-items: center;
	gap: 0.75rem;
	padding: 0.625rem 1rem;
	border-bottom: 1px solid var(--rf-color-border);
	background: var(--rf-color-bg, #fff);
}
.rf-docs-toolbar__hamburger {
	background: none;
	border: none;
	padding: 0.25rem;
	cursor: pointer;
	color: var(--rf-color-muted);
	line-height: 0;
	flex-shrink: 0;
}
.rf-docs-toolbar__hamburger:hover {
	color: var(--rf-color-text);
}
.rf-docs-toolbar__breadcrumb {
	font-size: 0.8rem;
	color: var(--rf-color-muted);
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.rf-docs-breadcrumb-category {
	color: var(--rf-color-muted);
}
.rf-docs-breadcrumb-sep {
	margin: 0 0.35rem;
	color: var(--rf-color-border);
}
.rf-docs-breadcrumb-page {
	color: var(--rf-color-text);
	font-weight: 500;
}

/* ---- Hide TOC on medium screens ---- */
@media (max-width: 1100px) {
	.rf-docs-toc {
		display: none;
	}
	.rf-docs-content__inner--has-toc {
		display: block;
		max-width: 60rem;
	}
}

/* ---- Mobile overrides ---- */
@media (max-width: 768px) {
	.rf-docs-header {
		position: static;
	}
	.rf-docs-header__inner p ~ p {
		display: none;
	}
	.rf-docs-toolbar {
		display: flex;
	}
	.rf-mobile-panel--nav {
		top: 6.25rem;
	}
	.rf-docs-sidebar {
		display: none;
	}
	.rf-docs-content {
		padding-top: 2rem;
	}
	.rf-docs-content--has-nav {
		margin-left: 0;
	}
	.rf-docs-content__inner {
		--rf-content-padding: 1.5rem;
		--rf-docs-wide-inset: 1.5rem;
	}
}

/* Blog layout */

/* ---- Header ---- */
.rf-blog-header {
	border-bottom: 1px solid var(--rf-color-border);
}
.rf-blog-header__inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.125rem 1.5rem;
}
.rf-blog-header__inner .rf-search-trigger {
	margin-left: auto;
}
.rf-blog-header__inner p ~ p {
	order: 1;
}
.rf-blog-header__inner .rf-mobile-menu-btn {
	order: 2;
}
.rf-blog-header p {
	margin: 0;
	line-height: 1;
}
.rf-blog-header a {
	display: inline-block;
	color: inherit;
	text-decoration: none;
}
.rf-blog-header a:hover {
	text-decoration: none;
}
.rf-blog-header p:first-child a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 600;
	font-size: 1.2rem;
	letter-spacing: -0.02em;
}
.rf-blog-header img {
	height: 2rem;
	width: auto;
}
.rf-blog-header__inner p ~ p {
	font-size: 0.85rem;
}
.rf-blog-header__inner p ~ p a {
	margin-left: 1.5rem;
	color: var(--rf-color-muted);
}
.rf-blog-header__inner p ~ p a:hover {
	color: var(--rf-color-text);
}
.rf-blog-header__inner p ~ p a svg {
	width: 1.1rem;
	height: 1.1rem;
	vertical-align: -0.15em;
}

/* ---- Layout container ---- */
.rf-blog {
	max-width: 72rem;
	margin: 0 auto;
	padding: 2.5rem 1.5rem 4rem;
}
.rf-blog--has-sidebar {
	display: grid;
	grid-template-columns: 1fr 16rem;
	gap: 3rem;
	align-items: start;
}

/* ---- Blog index ---- */
.rf-blog-index {
	max-width: 42rem;
}
.rf-blog-index__title {
	font-size: 2.25rem;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0 0 1rem;
	color: var(--rf-color-text);
}
.rf-blog-index__body {
	margin-bottom: 2rem;
	line-height: 1.8;
	color: var(--rf-color-muted);
}
.rf-blog-index__body:empty {
	display: none;
}
.rf-blog-index__posts {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

/* ---- Post card ---- */
.rf-blog-card {
	display: block;
	padding: 1.5rem;
	border: 1px solid var(--rf-color-border);
	border-radius: var(--rf-radius-md, 0.5rem);
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.rf-blog-card:hover {
	border-color: var(--rf-color-text);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	text-decoration: none;
}
.rf-blog-card__title {
	font-size: 1.35rem;
	font-weight: 700;
	margin: 0 0 0.5rem;
	color: var(--rf-color-text);
}
.rf-blog-card__meta {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.85rem;
	color: var(--rf-color-muted);
	margin-bottom: 0.5rem;
}
.rf-blog-card__author::before {
	content: '\00b7';
	margin-right: 0.75rem;
}
.rf-blog-card__desc {
	margin: 0 0 0.75rem;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--rf-color-muted);
}
.rf-blog-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}
.rf-blog-card__link {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--rf-color-primary, var(--rf-color-text));
}

/* ---- Article ---- */
.rf-blog-article {
	max-width: 42rem;
}
.rf-blog-article__header {
	margin-bottom: 2.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--rf-color-border);
}
.rf-blog-article__title {
	font-size: 2.25rem;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0 0 1rem;
	color: var(--rf-color-text);
}
.rf-blog-article__meta {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.9rem;
	color: var(--rf-color-muted);
}
.rf-blog-article__meta time {
	font-weight: 500;
}
.rf-blog-article__author::before {
	content: '\00b7';
	margin-right: 0.75rem;
}
.rf-blog-article__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.75rem;
}
.rf-blog-article__tag {
	font-size: 0.75rem;
	font-weight: 500;
	padding: 0.2rem 0.6rem;
	border-radius: 9999px;
	background: var(--rf-color-surface);
	color: var(--rf-color-muted);
	border: 1px solid var(--rf-color-border);
}

/* ---- Article body typography ---- */
.rf-blog-article__body {
	line-height: 1.8;
}
.rf-blog-article__body h2 {
	margin-top: 2.5rem;
}
.rf-blog-article__body h3 {
	margin-top: 2rem;
}
.rf-blog-article__body p {
	margin-bottom: 1.25rem;
}
.rf-blog-article__body img {
	border-radius: var(--rf-radius-md);
	margin: 1.5rem 0;
}

/* ---- Sidebar ---- */
.rf-blog-sidebar {
	position: sticky;
	top: 2.5rem;
	font-size: 0.85rem;
	color: var(--rf-color-muted);
}
.rf-blog-sidebar h2,
.rf-blog-sidebar h3,
.rf-blog-sidebar h4 {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--rf-color-muted);
	margin-top: 0;
	margin-bottom: 0.5rem;
}
.rf-blog-sidebar ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.rf-blog-sidebar li {
	padding: 0.25rem 0;
}
.rf-blog-sidebar a {
	color: var(--rf-color-muted);
	text-decoration: none;
}
.rf-blog-sidebar a:hover {
	color: var(--rf-color-text);
}

/* ---- Footer ---- */
.rf-blog-footer {
	border-top: 1px solid var(--rf-color-border);
	padding: 2rem 1.5rem;
	text-align: center;
	font-size: 0.85rem;
	color: var(--rf-color-muted);
}

/* ---- Mobile ---- */
@media (max-width: 768px) {
	.rf-blog-header__inner p ~ p {
		display: none;
	}
	.rf-blog--has-sidebar {
		grid-template-columns: 1fr;
	}
	.rf-blog-article__title {
		font-size: 1.75rem;
	}
	.rf-blog-sidebar {
		position: static;
		border-top: 1px solid var(--rf-color-border);
		padding-top: 1.5rem;
	}
}

/* On This Page — TOC sidebar navigation */

.rf-on-this-page {
	font-size: 0.8rem;
}

.rf-on-this-page__title {
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--rf-color-muted, #64748b);
	margin: 0 0 0.75rem;
}

.rf-on-this-page__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rf-on-this-page__item {
	border-left: 2px solid transparent;
}

.rf-on-this-page__item[data-level="3"] {
	padding-left: 0.75rem;
}

.rf-on-this-page__item a {
	display: block;
	padding: 0.25rem 0.75rem;
	color: var(--rf-color-muted, #64748b);
	text-decoration: none;
	line-height: 1.4;
}

.rf-on-this-page__item a:hover {
	color: var(--rf-color-text, #1a1a2e);
}

.rf-on-this-page__item[data-active] {
	border-left-color: var(--rf-color-primary, #0ea5e9);
}

.rf-on-this-page__item[data-active] a {
	color: var(--rf-color-primary, #0ea5e9);
}

/* Search trigger button */
.rf-search-trigger {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.375rem 0.625rem 0.375rem 0.5rem;
	border: 1px solid var(--rf-color-border);
	border-radius: var(--rf-radius-full);
	background: var(--rf-color-surface);
	color: var(--rf-color-muted);
	font-size: 0.8rem;
	font-family: var(--rf-font-sans);
	cursor: pointer;
	transition: border-color 0.15s, color 0.15s, background 0.15s;
	line-height: 1;
	white-space: nowrap;
	flex-shrink: 0;
}
.rf-search-trigger:hover {
	border-color: var(--rf-color-primary);
	color: var(--rf-color-text);
	background: var(--rf-color-surface-hover);
}
.rf-search-trigger svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}
.rf-search-trigger__label {
	pointer-events: none;
}
.rf-search-trigger__kbd {
	display: inline-flex;
	align-items: center;
	padding: 0.125rem 0.375rem;
	border: 1px solid var(--rf-color-border);
	border-radius: var(--rf-radius-sm);
	background: var(--rf-color-bg);
	font-family: var(--rf-font-sans);
	font-size: 0.7rem;
	line-height: 1.2;
	color: var(--rf-color-muted);
}

/* Search dialog */
.rf-search-dialog {
	position: fixed;
	top: 15vh;
	left: 50%;
	transform: translateX(-50%);
	width: min(560px, calc(100vw - 2rem));
	max-height: 70vh;
	margin: 0;
	padding: 0;
	border: 1px solid var(--rf-color-border);
	border-radius: var(--rf-radius-lg);
	background: var(--rf-color-bg);
	box-shadow: var(--rf-shadow-lg);
	overflow: hidden;
	font-family: var(--rf-font-sans);
}
.rf-search-dialog[open] {
	display: flex;
	flex-direction: column;
}
.rf-search-dialog::backdrop {
	background: rgba(0, 0, 0, 0.4);
}

/* Dialog header */
.rf-search-dialog__header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.875rem 1rem;
	border-bottom: 1px solid var(--rf-color-border);
}
.rf-search-dialog__icon {
	flex-shrink: 0;
	color: var(--rf-color-muted);
}
.rf-search-dialog__input {
	flex: 1;
	border: none;
	outline: none;
	background: transparent;
	font-size: 1rem;
	font-family: var(--rf-font-sans);
	color: var(--rf-color-text);
}
.rf-search-dialog__input::placeholder {
	color: var(--rf-color-muted);
}
/* Hide native search clear button */
.rf-search-dialog__input::-webkit-search-cancel-button {
	display: none;
}
.rf-search-dialog__esc {
	display: inline-flex;
	align-items: center;
	padding: 0.125rem 0.375rem;
	border: 1px solid var(--rf-color-border);
	border-radius: var(--rf-radius-sm);
	background: var(--rf-color-surface);
	font-family: var(--rf-font-sans);
	font-size: 0.7rem;
	color: var(--rf-color-muted);
	flex-shrink: 0;
}

/* Dialog body */
.rf-search-dialog__body {
	flex: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Results */
.rf-search-dialog__results {
	padding: 0.5rem;
}
.rf-search-result {
	display: block;
	padding: 0.625rem 0.75rem;
	border-radius: var(--rf-radius-md);
	text-decoration: none;
	color: var(--rf-color-text);
	cursor: pointer;
}
.rf-search-result:hover,
.rf-search-result[data-active] {
	background: var(--rf-color-surface-hover);
}
.rf-search-result__title {
	display: block;
	font-weight: 500;
	font-size: 0.875rem;
	line-height: 1.4;
	margin-bottom: 0.125rem;
}
.rf-search-result__excerpt {
	display: block;
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--rf-color-muted);
}
.rf-search-result__excerpt mark {
	background: var(--rf-color-primary-100);
	color: var(--rf-color-primary-700);
	border-radius: 2px;
	padding: 0 1px;
}

/* Empty / unavailable state */
.rf-search-dialog__empty {
	text-align: center;
	padding: 2rem 1rem;
	font-size: 0.875rem;
	color: var(--rf-color-muted);
}

/* Footer */
.rf-search-dialog__footer {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.5rem 1rem;
	border-top: 1px solid var(--rf-color-border);
	font-size: 0.7rem;
	color: var(--rf-color-muted);
}
.rf-search-dialog__footer kbd {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.25rem;
	padding: 0 0.25rem;
	border: 1px solid var(--rf-color-border);
	border-radius: 3px;
	background: var(--rf-color-surface);
	font-family: var(--rf-font-sans);
	font-size: 0.65rem;
	line-height: 1.4;
}

/* Mobile */
@media (max-width: 768px) {
	.rf-search-trigger__label,
	.rf-search-trigger__kbd {
		display: none;
	}
	.rf-search-trigger {
		padding: 0.375rem;
		border-radius: var(--rf-radius-sm);
	}
	.rf-search-dialog[open] {
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		transform: none;
		width: 100%;
		height: 100vh;
		height: 100dvh;
		max-height: 100vh;
		max-height: 100dvh;
		border-radius: 0;
		border: none;
	}
	.rf-search-dialog__footer {
		display: none;
	}
}

/* Version Switcher — page-level version dropdown */

.rf-version-switcher {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
	font-size: 0.85rem;
}

.rf-version-switcher__label {
	color: var(--rf-color-muted);
	font-weight: 500;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.rf-version-switcher__select {
	appearance: none;
	-webkit-appearance: none;
	background: var(--rf-color-surface);
	border: 1px solid var(--rf-color-border);
	border-radius: var(--rf-radius-sm, 0.25rem);
	color: var(--rf-color-text);
	font-size: 0.85rem;
	font-family: inherit;
	padding: 0.3rem 2rem 0.3rem 0.6rem;
	cursor: pointer;
	line-height: 1.4;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.5rem center;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

.rf-version-switcher__select:hover {
	border-color: var(--rf-color-primary);
}

.rf-version-switcher__select:focus-visible {
	outline: none;
	border-color: var(--rf-color-primary);
	box-shadow: 0 0 0 2px var(--rf-color-primary-100, rgba(14, 165, 233, 0.15));
}

/* Shared split layout — used by Feature, Hero, Step, and any rune with data-layout */

[data-layout="split"],
[data-layout="split-reverse"] {
  display: grid;
  grid-template-columns: var(--split-ratio, 1fr 1fr);
  align-items: var(--split-valign, start);
  column-gap: var(--split-gap, var(--rf-spacing-lg));
}

[data-layout="split-reverse"] > [data-name="content"] { order: 2; }
[data-layout="split-reverse"] > [data-name="media"] { order: 1; }

/* Grid so children can use justify-self/align-self (default: stretch) */
[data-layout="split"] > [data-name="media"],
[data-layout="split-reverse"] > [data-name="media"],
[data-layout="split"] > [data-section="media"],
[data-layout="split-reverse"] > [data-section="media"] {
  display: grid;
}

/* ─── 3-section grid placement (header + content + media) ─────────── */
/* Only applies when a data-section="header" child exists (3-section runes).
   2-section runes (e.g. Feature with display:contents on content) use the
   default 2-column flow from the base grid above. */

/* Split: header + content in col 1, media in col 2 spanning both rows */
[data-layout="split"]:has(> [data-section="header"]) > [data-section="header"] { grid-column: 1; grid-row: 1; }
[data-layout="split"]:has(> [data-section="header"]) > [data-name="content"]   { grid-column: 1; grid-row: 2; }
[data-layout="split"]:has(> [data-section="header"]) > [data-section="media"]   { grid-column: 2; grid-row: 1 / 3; }

/* Split-reverse: media in col 1 spanning both rows, header + content in col 2 */
[data-layout="split-reverse"]:has(> [data-section="header"]) > [data-section="header"] { grid-column: 2; grid-row: 1; }
[data-layout="split-reverse"]:has(> [data-section="header"]) > [data-name="content"]   { grid-column: 2; grid-row: 2; }
[data-layout="split-reverse"]:has(> [data-section="header"]) > [data-section="media"]   { grid-column: 1; grid-row: 1 / 3; }

/* Reset margin on media zone in 3-section split layouts (header + content + media).
   2-section runes (e.g. Hero) retain their per-rune media margins. */
[data-layout="split"]:has(> [data-section="header"]) > [data-section="media"],
[data-layout="split-reverse"]:has(> [data-section="header"]) > [data-section="media"] {
  margin: 0;
}

/* ─── Media zone base styles ──────────────────────────────────────── */

/* Only clip overflow when media zone contains an image. Interactive content
   (preview, juxtapose) needs overflow visible for bleed effects. */
[data-section="media"]:has(> img) {
  border-radius: var(--rf-radius-lg);
  overflow: hidden;
}
[data-section="media"] img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--rf-radius-lg);
}

/* Split layout media gets subtle depth */
[data-layout="split"] > [data-section="media"] img,
[data-layout="split-reverse"] > [data-section="media"] img {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ─── Collapse breakpoints ────────────────────────────────────────── */

@media (max-width: 640px) {
  [data-layout^="split"][data-collapse="sm"] { grid-template-columns: 1fr; }
  [data-layout^="split"][data-collapse="sm"] > * { order: unset; }
}

@media (max-width: 768px) {
  [data-layout^="split"][data-collapse="md"] { grid-template-columns: 1fr; }
  [data-layout^="split"][data-collapse="md"] > * { order: unset; }
}

@media (max-width: 1024px) {
  [data-layout^="split"][data-collapse="lg"] { grid-template-columns: 1fr; }
  [data-layout^="split"][data-collapse="lg"] > * { order: unset; }
}

/* ─── Default mobile collapse for split layouts ───────────────────── */
/* Runes without an explicit data-collapse always collapse at sm */

@media (max-width: 640px) {
  [data-layout^="split"]:not([data-collapse]) {
    grid-template-columns: 1fr;
  }
  [data-layout^="split"]:not([data-collapse]) > [data-section="header"],
  [data-layout^="split"]:not([data-collapse]) > [data-name="content"],
  [data-layout^="split"]:not([data-collapse]) > [data-section="media"] {
    grid-column: auto;
    grid-row: auto;
  }
  [data-layout^="split"]:not([data-collapse]) > * {
    order: unset;
  }

  /* ─── Content-first collapse (data-media-position="top") ────────── */
  /* Media hoists above preamble as full-bleed card header */
  [data-media-position="top"] > [data-section="media"],
  [data-media-position="top"][data-layout="split"] > [data-section="media"],
  [data-media-position="top"][data-layout="split-reverse"] > [data-section="media"] {
    order: -1;
    grid-column: auto;
    grid-row: auto;
    width: calc(100% + 2 * var(--rune-padding, var(--rf-spacing-md)));
    margin: calc(-1 * var(--rune-padding, var(--rf-spacing-md)));
    margin-bottom: var(--rune-padding, var(--rf-spacing-md));
    border-radius: 0;
  }
  [data-media-position="top"] > [data-section="media"] img {
    border-radius: var(--rf-radius-md) var(--rf-radius-md) 0 0;
  }

  /* Stacked layout also needs flex context for order to work */
  [data-media-position="top"][data-layout="stacked"] {
    display: flex;
    flex-direction: column;
  }
}

/* ─── Explicit collapse breakpoint + content-first ────────────────── */

@media (max-width: 640px) {
  [data-media-position="top"][data-collapse="sm"] > [data-section="media"],
  [data-media-position="top"][data-collapse="sm"][data-layout="split"] > [data-section="media"],
  [data-media-position="top"][data-collapse="sm"][data-layout="split-reverse"] > [data-section="media"] {
    order: -1;
    grid-column: auto;
    grid-row: auto;
    width: calc(100% + 2 * var(--rune-padding, var(--rf-spacing-md)));
    margin: calc(-1 * var(--rune-padding, var(--rf-spacing-md)));
    margin-bottom: var(--rune-padding, var(--rf-spacing-md));
    border-radius: 0;
  }
  [data-media-position="top"][data-collapse="sm"] > [data-section="media"] img {
    border-radius: var(--rf-radius-md) var(--rf-radius-md) 0 0;
  }
  /* Reset grid placement on collapse for header/content */
  [data-media-position="top"][data-collapse="sm"] > [data-section="header"],
  [data-media-position="top"][data-collapse="sm"] > [data-name="content"] {
    grid-column: auto;
    grid-row: auto;
  }
}

@media (max-width: 768px) {
  [data-media-position="top"][data-collapse="md"] > [data-section="media"],
  [data-media-position="top"][data-collapse="md"][data-layout="split"] > [data-section="media"],
  [data-media-position="top"][data-collapse="md"][data-layout="split-reverse"] > [data-section="media"] {
    order: -1;
    grid-column: auto;
    grid-row: auto;
    width: calc(100% + 2 * var(--rune-padding, var(--rf-spacing-md)));
    margin: calc(-1 * var(--rune-padding, var(--rf-spacing-md)));
    margin-bottom: var(--rune-padding, var(--rf-spacing-md));
    border-radius: 0;
  }
  [data-media-position="top"][data-collapse="md"] > [data-section="media"] img {
    border-radius: var(--rf-radius-md) var(--rf-radius-md) 0 0;
  }
  [data-media-position="top"][data-collapse="md"] > [data-section="header"],
  [data-media-position="top"][data-collapse="md"] > [data-name="content"] {
    grid-column: auto;
    grid-row: auto;
  }
}

@media (max-width: 1024px) {
  [data-media-position="top"][data-collapse="lg"] > [data-section="media"],
  [data-media-position="top"][data-collapse="lg"][data-layout="split"] > [data-section="media"],
  [data-media-position="top"][data-collapse="lg"][data-layout="split-reverse"] > [data-section="media"] {
    order: -1;
    grid-column: auto;
    grid-row: auto;
    width: calc(100% + 2 * var(--rune-padding, var(--rf-spacing-md)));
    margin: calc(-1 * var(--rune-padding, var(--rf-spacing-md)));
    margin-bottom: var(--rune-padding, var(--rf-spacing-md));
    border-radius: 0;
  }
  [data-media-position="top"][data-collapse="lg"] > [data-section="media"] img {
    border-radius: var(--rf-radius-md) var(--rf-radius-md) 0 0;
  }
  [data-media-position="top"][data-collapse="lg"] > [data-section="header"],
  [data-media-position="top"][data-collapse="lg"] > [data-name="content"] {
    grid-column: auto;
    grid-row: auto;
  }
}


/* Universal Rune Attributes */
/* Universal Rune Attributes — spacing & inset
 *
 * Compound attribute selectors [data-rune][data-*] give specificity (0,2,0):
 *   - Overrides rune defaults like .rf-itinerary { margin: 2rem 0 } at (0,1,0)
 *   - Overridden by layout-level rules in default.css at (0,2,1)
 *   - Per-rune overrides (e.g. showcase) win via source order (loaded after) */

/* ── Spacing — vertical rhythm ─────────────────────────────────────── */

[data-rune][data-spacing="flush"]   { margin-top: 0; margin-bottom: 0; }
[data-rune][data-spacing="tight"]   { margin-top: var(--rf-spacing-section-tight, 1.5rem); margin-bottom: var(--rf-spacing-section-tight, 1.5rem); }
[data-rune][data-spacing="loose"]   { margin-top: var(--rf-spacing-section-loose, 8rem); margin-bottom: var(--rf-spacing-section-loose, 8rem); }
[data-rune][data-spacing="breathe"] { margin-top: var(--rf-spacing-section-breathe, 12rem); margin-bottom: var(--rf-spacing-section-breathe, 12rem); }

/* ── Inset — horizontal padding ────────────────────────────────────── */

[data-rune][data-inset="flush"]   { padding-inline: 0; }
[data-rune][data-inset="tight"]   { padding-inline: var(--rf-inset-tight, 1rem); }
[data-rune][data-inset="loose"]   { padding-inline: var(--rf-inset-loose, 4rem); }
[data-rune][data-inset="breathe"] { padding-inline: var(--rf-inset-breathe, 8rem); }


/* Dimensions */
/* ─── Metadata Dimensions ──────────────────────────────────────────────
 * Generic styling for metadata badges across all runes.
 * Works via data-meta-type, data-meta-rank, and data-meta-sentiment
 * attributes emitted by the identity transform engine.
 *
 * Composability: --meta-color cascades from sentiment → type rules.
 *                --meta-font-size cascades from rank → type rules.
 * ────────────────────────────────────────────────────────────────────── */

/* ─── Rank ─────────────────────────────────────────────────────────── */

[data-meta-rank="primary"] {
	--meta-font-size: 0.8125rem;
}

[data-meta-rank="secondary"] {
	--meta-font-size: 0.75rem;
	opacity: 0.8;
}

/* ─── Sentiment ────────────────────────────────────────────────────── */

[data-meta-sentiment="positive"] { --meta-color: var(--rf-color-success, #10b981); }
[data-meta-sentiment="negative"] { --meta-color: var(--rf-color-danger, #ef4444); }
[data-meta-sentiment="caution"]  { --meta-color: var(--rf-color-warning, #f59e0b); }
[data-meta-sentiment="neutral"]  { --meta-color: var(--rf-color-muted, #64748b); }

/* Colored dot for any item with a sentiment */
[data-meta-sentiment]::before {
	content: '';
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--meta-color, var(--rf-color-muted));
	flex-shrink: 0;
}

/* ─── Meta Types ───────────────────────────────────────────────────── */

/* Status: bordered pill */
[data-meta-type="status"] {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.5em 1.0em;
	border: 1px solid var(--rf-color-border);
	border-radius: 999px;
	font-size: var(--meta-font-size, 0.8125rem);
	font-weight: 500;
	color: var(--rf-color-muted);
}

/* Category: bordered pill */
[data-meta-type="category"] {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.5em 1.0em;
	border: 1px solid var(--rf-color-border);
	border-radius: 999px;
	font-size: var(--meta-font-size, 0.8125rem);
	font-weight: 500;
	color: var(--rf-color-muted);
}

/* Quantity: bordered pill with tabular numbers */
[data-meta-type="quantity"] {
	display: inline-flex;
	align-items: center;
	padding: 0.5em 1.0em;
	border: 1px solid var(--rf-color-border);
	border-radius: 999px;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	font-size: var(--meta-font-size, 0.8125rem);
	color: var(--rf-color-muted);
}

/* Temporal: bordered pill with time association */
[data-meta-type="temporal"] {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.5em 1.0em;
	border: 1px solid var(--rf-color-border);
	border-radius: 999px;
	font-size: var(--meta-font-size, 0.8125rem);
	font-variant-numeric: tabular-nums;
	color: var(--rf-color-muted);
}

/* Tag: bordered pill */
[data-meta-type="tag"] {
	display: inline-flex;
	align-items: center;
	padding: 0.5em 1.0em;
	border: 1px solid var(--rf-color-border);
	border-radius: 999px;
	font-size: calc(var(--meta-font-size, 0.8125rem) * 0.9);
	color: var(--rf-color-muted);
}

/* ID: bordered pill, monospace */
[data-meta-type="id"] {
	display: inline-flex;
	align-items: center;
	padding: 0.5em 1.0em;
	border: 1px solid var(--rf-color-border);
	border-radius: 999px;
	font-family: var(--rf-font-mono, monospace);
	font-size: var(--meta-font-size, 0.8125rem);
	font-weight: 500;
	color: var(--rf-color-muted);
}

/* ─── Labels ──────────────────────────────────────────────────────── */

/* Label element within metadata items — thin, muted style.
 * Themes can override or hide entirely: [data-meta-label] { display: none } */
[data-meta-label] {
	font-weight: 400;
	opacity: 0.65;
}

/* Visually hidden labels — accessible to screen readers but not visible.
 * Themes can restore with: [data-meta-label-hidden] { position: static; ... } */
[data-meta-label-hidden] {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ─── Mobile: compact badges ─────────────────────────────────────────── */

@media (max-width: 48rem) {
	[data-meta-type="status"],
	[data-meta-type="category"],
	[data-meta-type="quantity"],
	[data-meta-type="temporal"],
	[data-meta-type="tag"],
	[data-meta-type="id"] {
		padding: 0.25em 0.625em;
		font-size: calc(var(--meta-font-size, 0.8125rem) * 0.9);
	}

	[data-meta-sentiment]::before {
		width: 0.375rem;
		height: 0.375rem;
	}

	[data-section="header"] {
		gap: 0.375rem;
		margin-bottom: 1.5rem;
	}
}

/* ─── Density Dimension ─────────────────────────────────────────────────
 * Controls spacing, visibility, and detail level across all runes.
 * Three levels: full (dedicated page), compact (grid/card), minimal (list).
 *
 * Sets --rune-padding which surfaces consume for container padding.
 * ────────────────────────────────────────────────────────────────────── */

/* ─── Full: all content visible, generous spacing ─────────────────── */

[data-density="full"] {
	--rune-padding: var(--rf-spacing-md);
}

/* ─── Compact: truncated descriptions, tight spacing ──────────────── */

[data-density="compact"] {
	--rune-padding: var(--rf-spacing-sm);
}

[data-density="compact"] [data-section="description"] {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

[data-density="compact"] [data-meta-rank="secondary"] {
	display: none;
}

/* ─── Minimal: title and primary metadata only ────────────────────── */

[data-density="minimal"] {
	--rune-padding: var(--rf-spacing-xs);
}

[data-density="minimal"] [data-section="description"] {
	display: none;
}

[data-density="minimal"] [data-section="body"] {
	display: none;
}

[data-density="minimal"] [data-section="footer"] {
	display: none;
}

[data-density="minimal"] [data-meta-rank="secondary"] {
	display: none;
}

/* ─── Section Anatomy Dimension ─────────────────────────────────────────
 * Generic layout and typography for the 6 standard section roles.
 * Every rune that declares `sections` in its config gets these for free.
 *
 * Includes density × section interactions (title scaling, hiding).
 * ────────────────────────────────────────────────────────────────────── */

/* ─── Header: chrome metadata row (badges, status, icons) ────────── */

[data-section="header"] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 3rem;
}

/* ─── Preamble: intro section (eyebrow, headline, blurb) ─────────── */

[data-section="preamble"] {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

/* ─── Title: primary heading ──────────────────────────────────────── */

[data-section="title"] {
	font-family: var(--rf-font-sans);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--rf-color-text);
	margin: 0;
}

/* Scale title with density */
[data-density="compact"] [data-section="title"] {
	font-size: 2.125rem;
}

[data-density="minimal"] [data-section="title"] {
	font-size: 1rem;
}

/* ─── Description: secondary text ─────────────────────────────────── */

[data-section="description"] {
	font-size: 1rem;
	line-height: 1.5;
	color: var(--rf-color-muted);
	margin: var(--rf-spacing-xs) 0 var(--rf-spacing-md);
}

/* ─── Body: main content ──────────────────────────────────────────── */

[data-section="body"] {
	line-height: 1.6;
	color: var(--rf-color-text);
}

/* ─── Footer: actions and links ───────────────────────────────────── */

[data-section="footer"] {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rf-spacing-sm);
	margin-top: var(--rf-spacing-md);
	padding-top: var(--rf-spacing-sm);
	border-top: 1px solid var(--rf-color-border);
}

/* ─── Media: visual content ───────────────────────────────────────── */

[data-section="media"] {
	margin: var(--rf-spacing-sm) 0;
}

/* ─── Interactive State Dimension ───────────────────────────────────────
 * Generic styling for interactive rune states: open/closed, active/inactive,
 * selected, and disabled. Behaviours toggle data-state; themes read it here.
 * ────────────────────────────────────────────────────────────────────── */

/* ─── Open/Closed: collapsible content ────────────────────────────── */

[data-state="closed"] > [class*="__body"],
[data-state="closed"] > [class*="__content"] {
	display: none;
}

[data-state="open"] > [class*="__body"],
[data-state="open"] > [class*="__content"] {
	display: block;
	animation: rf-expand 0.2s ease-out;
}

@keyframes rf-expand {
	from { opacity: 0; transform: translateY(-0.5rem); }
	to { opacity: 1; transform: translateY(0); }
}

/* ─── Active/Inactive: selection indicators ───────────────────────── */

button[data-state="active"] {
	border-bottom: 2px solid var(--rf-color-primary);
	color: var(--rf-color-primary);
}

button[data-state="inactive"] {
	border-bottom: 2px solid transparent;
	color: var(--rf-color-muted);
}

/* Panels controlled by tab/toggle state */
[role="tabpanel"][data-state="inactive"] {
	display: none;
}

[role="tabpanel"][data-state="active"] {
	display: block;
}

/* ─── Selected: user selection highlight ──────────────────────────── */

[data-state="selected"] {
	background: color-mix(in oklch, var(--rf-color-primary) 10%, transparent);
	outline: 2px solid var(--rf-color-primary);
}

/* ─── Disabled: dimmed non-interactive ────────────────────────────── */

[data-state="disabled"] {
	opacity: 0.4;
	pointer-events: none;
}

/* ─── Media Slots Dimension ─────────────────────────────────────────────
 * Generic treatment for 5 media slot types: portrait, cover, thumbnail,
 * hero, icon. Applied via data-media attribute on image/media elements.
 *
 * Includes density × media interactions (compact shrinks, minimal hides).
 * ────────────────────────────────────────────────────────────────────── */

/* ─── Portrait: circular crop ─────────────────────────────────────── */

[data-media="portrait"] {
	border-radius: var(--rf-radius-full);
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: var(--media-portrait-size, 5rem);
	height: var(--media-portrait-size, 5rem);
}

/* ─── Cover: full-width banner image ──────────────────────────────── */

[data-media="cover"] {
	width: 100%;
	object-fit: cover;
	border-radius: var(--rf-radius-md) var(--rf-radius-md) 0 0;
}

/* ─── Thumbnail: small fixed preview ──────────────────────────────── */

[data-media="thumbnail"] {
	width: var(--media-thumbnail-size, 3rem);
	height: var(--media-thumbnail-size, 3rem);
	border-radius: var(--rf-radius-sm);
	object-fit: cover;
	flex-shrink: 0;
}

/* ─── Hero: large responsive image ────────────────────────────────── */

[data-media="hero"] {
	width: 100%;
	object-fit: cover;
}

/* ─── Icon: small square, no crop ─────────────────────────────────── */

[data-media="icon"] {
	width: var(--media-icon-size, 2rem);
	height: var(--media-icon-size, 2rem);
	object-fit: contain;
	flex-shrink: 0;
}

/* ─── Density × Media ─────────────────────────────────────────────── */

/* Compact: smaller portraits */
[data-density="compact"] [data-media="portrait"] {
	--media-portrait-size: 3rem;
}

/* Minimal: hide all media */
[data-density="minimal"] [data-media] {
	display: none;
}

/* ─── Surface Assignments ──────────────────────────────────────────────
 * Groups runes into 4 surface types: card, inline, banner, inset.
 * Each surface defines container treatment (background, padding, radius).
 * Padding scales with density via --rune-padding custom property.
 * ────────────────────────────────────────────────────────────────────── */

/* ─── Rune Spacing ────────────────────────────────────────────────── */
/* Only top-level runes get vertical margin; child runes (nav items,
   accordion items, grid cells, etc.) inherit spacing from their parent. */

[data-rune]:not([data-rune] [data-rune]) {
	margin: 1.5rem 0;
}

/* ─── Card: elevated container ────────────────────────────────────── */

.rf-recipe,
.rf-character,
.rf-testimonial,
.rf-event,
.rf-realm,
.rf-faction,
.rf-lore,
.rf-plot,
.rf-bond,
.rf-playlist,
.rf-track,
.rf-budget,
.rf-organization,
.rf-timeline,
.rf-swatch,
.rf-palette,
.rf-typography,
.rf-itinerary,
.rf-symbol,
.rf-changelog,
.rf-api,
.rf-howto {
	background: var(--rf-color-surface);
	border-radius: var(--rf-radius-md);
	padding: var(--rune-padding, var(--rf-spacing-md));
}

/* ─── Inline: no visual boundary ──────────────────────────────────── */

.rf-hint,
.rf-details,
.rf-sidenote,
.rf-conversation,
.rf-annotate,
.rf-xref,
.rf-diff,
.rf-pullquote,
.rf-textblock,
.rf-nav,
.rf-breadcrumb,
.rf-toc,
.rf-datatable,
.rf-form {
	padding: var(--rune-padding, var(--rf-spacing-sm)) 0;
}

/* ─── Banner: full-width strip ────────────────────────────────────── */

.rf-hero,
.rf-cta,
.rf-feature,
.rf-steps,
.rf-bento,
.rf-storyboard,
.rf-map {
	padding: var(--rune-padding, var(--rf-spacing-xl)) 0;
}

/* ─── Inset: recessed container ───────────────────────────────────── */

.rf-codegroup,
.rf-mockup,
.rf-diagram,
.rf-chart,
.rf-embed,
.rf-gallery,
.rf-figure,
.rf-reveal {
	background: var(--rf-color-surface);
	border-radius: var(--rf-radius-md);
	padding: var(--rune-padding, var(--rf-spacing-md));
}

/* === Checklist: universal checkbox item styling === */

/* All checklist items get left padding for the indicator */
[data-checked] {
	position: relative;
	padding-left: 1.75rem;
	list-style: none;
	margin-left: -1.5rem;
}

/* Indicator base — positioned left of text */
[data-checked]::before {
	content: '';
	position: absolute;
	left: 0.125rem;
	top: 0.5em;
	width: 1rem;
	height: 1rem;
	border-radius: var(--rf-radius-sm, 0.25rem);
	border: 2px solid var(--rf-color-border);
	background: transparent;
}

/* Checked — filled with checkmark */
[data-checked="checked"]::before {
	background: var(--rf-color-success);
	border-color: var(--rf-color-success);
}

[data-checked="checked"] {
	color: var(--rf-color-muted);
}

/* Active — primary colour with emphasis */
[data-checked="active"]::before {
	border-color: var(--rf-color-primary);
	background: var(--rf-color-primary);
	box-shadow: 0 0 0 3px color-mix(in oklch, var(--rf-color-primary) 20%, transparent);
}

[data-checked="active"] {
	color: var(--rf-color-primary);
	font-weight: 600;
}

/* Skipped — muted with strikethrough */
[data-checked="skipped"]::before {
	background: var(--rf-color-muted);
	border-color: var(--rf-color-muted);
}

[data-checked="skipped"] {
	text-decoration: line-through;
	color: var(--rf-color-muted);
}

/* Unchecked — empty indicator (inherits base styling) */
[data-checked="unchecked"]::before {
	background: transparent;
}

/* === Density interaction === */

/* Compact: tighter spacing */
[data-density="compact"] [data-checked] {
	padding-left: 1.5rem;
}

[data-density="compact"] [data-checked]::before {
	width: 0.75rem;
	height: 0.75rem;
}

/* Minimal: indicators only, no text */
[data-density="minimal"] [data-checked] {
	font-size: 0;
	padding-left: 0;
	display: inline-block;
	width: 1rem;
	height: 1rem;
}

/* === Sequential Items: universal ordered item styling === */

/* Numbered — counter circle to the left of each item */
[data-sequence="numbered"] {
	counter-reset: sequence;
	list-style: none;
	padding-left: 0;
}

[data-sequence="numbered"] > li {
	counter-increment: sequence;
	position: relative;
	padding-left: 2.25rem;
}

[data-sequence="numbered"] > li::before {
	content: counter(sequence);
	position: absolute;
	left: 0;
	top: 0.625rem;
	width: 1.5rem;
	height: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.75rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--rf-color-primary);
	background: var(--rf-color-surface-active);
	border-radius: 50%;
}

[data-sequence="numbered"] > li + li {
	border-top: 1px solid var(--rf-color-border);
}

/* Connected vertical — line with dots */
[data-sequence="connected"] {
	list-style: none;
	padding-left: 0;
}

[data-sequence="connected"] > li {
	position: relative;
	padding-left: 2rem;
	padding-bottom: 2rem;
	border-left: 2px solid var(--rf-color-border);
	margin-left: 0.375rem;
}

[data-sequence="connected"] > li:last-child {
	border-left-color: transparent;
	padding-bottom: 0;
}

[data-sequence="connected"] > li::before {
	content: '';
	position: absolute;
	left: -0.4375rem;
	top: 0.25rem;
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 50%;
	background: var(--rf-color-primary);
	border: 2px solid var(--rf-color-background);
	box-shadow: 0 0 0 2px var(--rf-color-primary);
}

/* Connected horizontal — line with dots */
[data-sequence="connected"][data-sequence-direction="horizontal"] {
	display: flex;
	gap: 2rem;
	overflow-x: auto;
}

[data-sequence="connected"][data-sequence-direction="horizontal"] > li {
	position: relative;
	min-width: 12rem;
	padding-top: 1.5rem;
	padding-left: 0;
	padding-bottom: 0;
	border-left: none;
	border-top: 2px solid var(--rf-color-border);
	margin-left: 0;
}

[data-sequence="connected"][data-sequence-direction="horizontal"] > li:last-child {
	border-top-color: var(--rf-color-border);
}

[data-sequence="connected"][data-sequence-direction="horizontal"] > li::before {
	left: 0.5rem;
	top: -0.4375rem;
}

/* Plain — no indicators, just ordered semantics */
[data-sequence="plain"] {
	list-style: none;
	padding-left: 0;
}

/* === Density interaction === */

/* Compact: smaller circles, tighter spacing */
[data-density="compact"] [data-sequence="numbered"] > li {
	padding-left: 1.75rem;
}

[data-density="compact"] [data-sequence="numbered"] > li::before {
	width: 1.25rem;
	height: 1.25rem;
	font-size: 0.625rem;
}

[data-density="compact"] [data-sequence="connected"] > li {
	padding-bottom: 1rem;
}

/* Minimal: no indicators, collapsed list */
[data-density="minimal"] [data-sequence] > li::before {
	display: none;
}

[data-density="minimal"] [data-sequence="connected"] > li {
	border-left: none;
	padding-left: 0;
	margin-left: 0;
}


/* Runes */
/* Accordion */
.rf-accordion {
	border: 1px solid var(--rf-color-border);
	border-radius: var(--rf-radius-md);
	overflow: hidden;
}
.rf-accordion__preamble {
	margin-bottom: 1.5rem;
}
.rf-accordion__eyebrow {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--rf-color-primary);
	margin: 0 0 0.5rem;
}
.rf-accordion__eyebrow:has(a) {
	display: inline-block;
	position: relative;
	padding: 0.25rem 0.875rem;
	border: 1px solid var(--rf-color-border);
	border-radius: var(--rf-radius-full);
	color: var(--rf-color-text);
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	transition: border-color 150ms ease;
}
.rf-accordion__eyebrow:has(a):hover { border-color: var(--rf-color-muted); }
.rf-accordion__eyebrow:has(a) a { color: var(--rf-color-primary); font-weight: 600; text-decoration: none; }
.rf-accordion__eyebrow:has(a) a::before { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.rf-accordion__headline {
	margin-top: 0;
}
.rf-accordion__blurb {
	color: var(--rf-color-muted);
	margin-bottom: 0;
}
.rf-accordion__image {
	margin-bottom: 1rem;
}
.rf-accordion__items {
	display: contents;
}
.rf-accordion-item {
	border-bottom: 1px solid var(--rf-color-border);
}
.rf-accordion-item:last-child {
	border-bottom: none;
}
.rf-accordion-item__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.875rem 1.25rem;
	font-weight: 600;
	font-size: 0.95rem;
	cursor: pointer;
	user-select: none;
	transition: background-color 200ms ease;
	list-style: none;
}
.rf-accordion-item__header::-webkit-details-marker { display: none; }
.rf-accordion-item__header::marker { display: none; content: ''; }
.rf-accordion-item__header:hover {
	background: var(--rf-color-surface);
}
.rf-accordion-item__header::after {
	content: '▾';
	flex-shrink: 0;
	color: var(--rf-color-muted);
	transition: transform 200ms ease;
}
.rf-accordion-item[open] .rf-accordion-item__header::after {
	transform: rotate(180deg);
}
.rf-accordion-item__title {
	flex: 1;
	min-width: 0;
}
.rf-accordion-item__body {
	padding: 0 1.25rem 1rem;
	font-size: 0.925rem;
	line-height: 1.65;
	color: var(--rf-color-muted);
}
.rf-accordion-item__body p:last-child {
	margin-bottom: 0;
}

/* Annotate */
.rf-annotate__body {
	display: contents;
}
/* Margin style */
.rf-annotate--margin {
	position: relative;
}
.rf-annotate--margin .rf-annotate-note {
	float: right;
	clear: right;
	width: 40%;
	margin: 0 -44% 0.5rem 1rem;
	padding: 0.75rem 1rem;
	font-size: 0.8125rem;
	color: var(--rf-color-muted);
	border-left: 2px solid var(--rf-color-border);
}
/* Inline style */
.rf-annotate--inline .rf-annotate-note {
	margin: 0.5rem 0 1rem;
	padding: 0.75rem 1rem;
	font-size: 0.875rem;
	color: var(--rf-color-muted);
	background: var(--rf-color-surface);
	border-radius: var(--rf-radius-md);
	border-left: 3px solid var(--rf-color-primary);
}
/* Tooltip style */
.rf-annotate--tooltip .rf-annotate-note {
	display: inline-block;
	position: relative;
	margin: 0 0.25rem;
	padding: 0;
	font-size: 0;
	vertical-align: super;
}
.rf-annotate--tooltip .rf-annotate-note::before {
	content: '?';
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1rem;
	height: 1rem;
	font-size: 0.625rem;
	font-weight: 700;
	color: var(--rf-color-primary);
	border: 1px solid var(--rf-color-primary);
	border-radius: var(--rf-radius-full, 50%);
	cursor: help;
}
.rf-annotate--tooltip .rf-annotate-note__body {
	display: none;
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: 16rem;
	padding: 0.75rem;
	font-size: 0.8125rem;
	color: var(--rf-color-text);
	background: var(--rf-color-bg);
	border: 1px solid var(--rf-color-border);
	border-radius: var(--rf-radius-md);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	margin-bottom: 0.5rem;
	z-index: 10;
}
.rf-annotate--tooltip .rf-annotate-note:hover .rf-annotate-note__body {
	display: block;
}
.rf-annotate-note__body p:last-child { margin-bottom: 0; }
.rf-annotate-note__body > span[property],
.rf-annotate-note__body > meta { display: none; }
@media (max-width: 768px) {
	.rf-annotate--margin .rf-annotate-note {
		float: none;
		width: 100%;
		margin: 0.5rem 0 1rem;
		padding: 0.75rem 1rem;
		background: var(--rf-color-surface);
		border-radius: var(--rf-radius-md);
	}
}

/* Audio */
.rf-audio rf-audio {
	display: block;
}
.rf-audio__description {
	padding: 0.75rem 1rem;
	font-size: 0.875rem;
	color: var(--rf-color-muted);
	line-height: 1.5;
}
.rf-audio__description p {
	margin: 0;
}
.rf-audio__description p + p {
	margin-top: 0.5rem;
}

/* ── Audio Player (web component internals) ── */

.rf-audio-player {
	padding: 1rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

/* Track info */
.rf-audio-player__info {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}
.rf-audio-player__name {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--rf-color-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.rf-audio-player__artist {
	font-size: 0.8125rem;
	color: var(--rf-color-muted);
}

/* Controls row */
.rf-audio-player__controls {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

/* Play / pause button */
.rf-audio-player__play {
	flex-shrink: 0;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--rf-radius-full, 9999px);
	border: none;
	background: var(--rf-color-primary);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.15s ease;
	padding: 0;
}
.rf-audio-player__play:hover {
	opacity: 0.85;
}
.rf-audio-player__play:focus-visible {
	outline: 2px solid var(--rf-color-primary);
	outline-offset: 2px;
}
.rf-audio-player__play:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}
.rf-audio-player__play svg {
	width: 1rem;
	height: 1rem;
	fill: currentColor;
}

/* Time displays */
.rf-audio-player__time {
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	color: var(--rf-color-muted);
	min-width: 2.5rem;
	user-select: none;
}
.rf-audio-player__time--current {
	text-align: right;
}
.rf-audio-player__time--duration {
	text-align: left;
}

/* Progress bar */
.rf-audio-player__progress {
	flex: 1;
	height: 6px;
	background: var(--rf-color-surface-active, #e5e7eb);
	border-radius: var(--rf-radius-full, 9999px);
	cursor: pointer;
	position: relative;
	overflow: hidden;
}
.rf-audio-player__progress:focus-visible {
	outline: 2px solid var(--rf-color-primary);
	outline-offset: 2px;
}
.rf-audio-player__progress-bar {
	height: 100%;
	background: var(--rf-color-primary);
	border-radius: var(--rf-radius-full, 9999px);
	width: 0%;
	transition: width 0.1s linear;
	pointer-events: none;
}

/* Waveform container */
.rf-audio-player__waveform {
	width: 100%;
	min-height: 48px;
	border-radius: var(--rf-radius-sm, 4px);
	overflow: hidden;
}

/* Hide standard progress bar when waveform is active */
.rf-audio[data-waveform="true"] .rf-audio-player__controls .rf-audio-player__progress {
	display: none;
}

/* Chapter list */
.rf-audio-player__chapters {
	list-style: none;
	padding: 0;
	margin: 0.75rem 0 0;
	padding-top: 0;
}
.rf-audio-player__chapter {
	display: flex;
	width: 100%;
	align-items: center;
	gap: 0.75rem;
	padding: 0.375rem 0.5rem;
	border: none;
	background: none;
	cursor: pointer;
	border-radius: var(--rf-radius-sm, 4px);
	transition: background 0.15s ease;
	text-align: left;
	font-family: inherit;
}
.rf-audio-player__chapter:hover {
	background: var(--rf-color-surface-hover, rgba(0, 0, 0, 0.04));
}
.rf-audio-player__chapter:focus-visible {
	outline: 2px solid var(--rf-color-primary);
	outline-offset: -2px;
}
.rf-audio-player__chapter--active {
	background: color-mix(in srgb, var(--rf-color-primary) 8%, transparent);
}
.rf-audio-player__chapter--active .rf-audio-player__chapter-name {
	color: var(--rf-color-primary);
}
.rf-audio-player__chapter-name {
	flex: 1;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--rf-color-text);
}
.rf-audio-player__chapter-time {
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	color: var(--rf-color-muted);
	flex-shrink: 0;
}

/* Active track highlight when connected to audio player */
.rf-track--active {
	background: color-mix(in srgb, var(--rf-color-primary) 6%, transparent);
	border-radius: var(--rf-radius-sm, 4px);
}
.rf-track--active .rf-track__track-name {
	color: var(--rf-color-primary);
}

/* Api */
.rf-api {
	border: 1px solid var(--rf-color-border);
	border-radius: var(--rf-radius-lg);
	overflow: hidden;
}
.rf-api__header {
	padding: 1rem 1.25rem;
	background: var(--rf-color-surface-hover);
	border-bottom: 1px solid var(--rf-color-border);
}
.rf-api__method {
	font-weight: 700;
	font-size: 0.75rem;
	padding: 0.25rem 0.5rem;
	border-radius: var(--rf-radius-sm);
	font-family: var(--rf-font-mono);
}
.rf-api__path {
	font-family: var(--rf-font-mono);
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--rf-color-text);
}
.rf-api__auth {
	margin-left: auto;
	font-size: 0.75rem;
	color: var(--rf-color-muted);
	background: var(--rf-color-surface-active);
	padding: 0.125rem 0.5rem;
	border-radius: var(--rf-radius-sm);
}
/* Method colors driven by data-method attribute from engine */
[data-method="GET"] .rf-api__method { color: var(--rf-color-success); background: var(--rf-color-success-bg); }
[data-method="POST"] .rf-api__method { color: var(--rf-color-info); background: var(--rf-color-info-bg); }
[data-method="PUT"] .rf-api__method { color: var(--rf-color-warning); background: var(--rf-color-warning-bg); }
[data-method="PATCH"] .rf-api__method { color: var(--rf-color-warning); background: var(--rf-color-warning-bg); }
[data-method="DELETE"] .rf-api__method { color: var(--rf-color-danger); background: var(--rf-color-danger-bg); }
[data-method="HEAD"] .rf-api__method { color: var(--rf-color-muted); background: var(--rf-color-surface); }
[data-method="OPTIONS"] .rf-api__method { color: var(--rf-color-muted); background: var(--rf-color-surface); }
.rf-api__body {
	padding: 1.25rem;
}
.rf-api__body table {
	width: 100%;
	border-collapse: collapse;
	margin: 1rem 0;
}
.rf-api__body th {
	text-align: left;
	padding: 0.5rem 0.75rem;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--rf-color-muted);
	border-bottom: 2px solid var(--rf-color-border);
}
.rf-api__body td {
	padding: 0.5rem 0.75rem;
	border-bottom: 1px solid var(--rf-color-border);
	font-size: 0.875rem;
}
.rf-api__body pre {
	border-radius: var(--rf-radius-md);
	margin: 1rem 0;
}
.rf-api__body blockquote {
	border-left: 3px solid var(--rf-color-warning-border);
	background: var(--rf-color-warning-bg);
	padding: 0.75rem 1rem;
	border-radius: 0 var(--rf-radius-md) var(--rf-radius-md) 0;
	margin: 1rem 0;
}

/* Bento */
.rf-bento__preamble {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.25rem;
	margin-bottom: 1.5rem;
}
.rf-bento__eyebrow {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--rf-color-primary);
	margin: 0 0 0.5rem;
}
.rf-bento__eyebrow:has(a) {
	display: inline-block;
	position: relative;
	padding: 0.25rem 0.875rem;
	border: 1px solid var(--rf-color-border);
	border-radius: var(--rf-radius-full);
	color: var(--rf-color-text);
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	transition: border-color 150ms ease;
}
.rf-bento__eyebrow:has(a):hover { border-color: var(--rf-color-muted); }
.rf-bento__eyebrow:has(a) a { color: var(--rf-color-primary); font-weight: 600; text-decoration: none; }
.rf-bento__eyebrow:has(a) a::before { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.rf-bento__headline {
	margin-top: 0;
}
.rf-bento__blurb {
	color: var(--rf-color-muted);
	margin-bottom: 0;
}
.rf-bento__image {
	margin-bottom: 1rem;
}
.rf-bento__grid {
	display: grid;
	grid-template-columns: repeat(var(--bento-columns, 4), 1fr);
	gap: var(--bento-gap, 1rem);
}
.rf-bento-cell {
	border-radius: var(--rf-radius-md);
	padding: 1.25rem;
	background: var(--rf-color-surface);
	overflow: hidden;
}
.rf-bento-cell--full {
	grid-column: 1 / -1;
}
.rf-bento-cell--large {
	grid-column: span 2;
	grid-row: span 2;
}
.rf-bento-cell--medium {
	grid-column: span 2;
}
.rf-bento-cell--small {
	grid-column: span 1;
}
/* Span mode: heading level determines column span via CSS variable */
.rf-bento-cell--span {
	grid-column: span var(--cell-span, 1);
}
.rf-bento-cell__icon {
	margin-bottom: 0.75rem;
	line-height: 0;
}
.rf-bento-cell__icon svg {
	width: 1.5rem;
	height: 1.5rem;
	color: var(--rf-color-accent);
}
.rf-bento-cell__icon .rf-icon {
	width: 1.5rem;
	height: 1.5rem;
	color: var(--rf-color-accent);
}
.rf-bento-cell__title {
	font-size: 1.125rem;
	font-weight: 600;
	margin: 0 0 0.5rem;
}
.rf-bento-cell__body > span[property],
.rf-bento-cell__body > meta { display: none; }
.rf-bento-cell__body p:last-child { margin-bottom: 0; }
.rf-bento-cell img {
	width: 100%;
	height: auto;
	border-radius: var(--rf-radius-sm);
	margin-bottom: 0.75rem;
}
/* Remove padding on bleed edges when showcase bleeds inside a cell */
.rf-bento-cell:has(.rf-showcase[data-bleed="bottom"]),
.rf-bento-cell:has(.rf-showcase[data-bleed="both"]),
.rf-bento-cell:has(.rf-showcase[data-bleed="bottom-end"]) {
	padding-bottom: 0;
}
.rf-bento-cell:has(.rf-showcase[data-bleed="end"]),
.rf-bento-cell:has(.rf-showcase[data-bleed="bottom-end"]),
.rf-bento-cell:has(.rf-showcase[data-bleed="top-end"]) {
	padding-inline-end: 0;
}
.rf-bento-cell:has(.rf-showcase[data-bleed="top"]),
.rf-bento-cell:has(.rf-showcase[data-bleed="both"]),
.rf-bento-cell:has(.rf-showcase[data-bleed="top-end"]) {
	padding-top: 0;
}
@media (max-width: 768px) {
	.rf-bento__grid { grid-template-columns: repeat(2, 1fr) !important; }
	.rf-bento-cell--full { grid-column: 1 / -1; }
	.rf-bento-cell--large { grid-column: span 2; grid-row: span 1; }
	.rf-bento-cell--medium { grid-column: span 2; }
	.rf-bento-cell--span { grid-column: span min(var(--cell-span, 1), 2); }
}
@media (max-width: 480px) {
	.rf-bento__grid { grid-template-columns: 1fr !important; }
	.rf-bento-cell--full,
	.rf-bento-cell--large,
	.rf-bento-cell--medium,
	.rf-bento-cell--span { grid-column: span 1; }
}

/* Blog — post listing with filtering and sorting */
.rf-blog {
	padding: 2rem 0;
}
.rf-blog__preamble {
	margin-bottom: 2rem;
}
.rf-blog__headline {
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0 0 0.5rem;
	line-height: 1.2;
	color: var(--rf-color-text);
}
.rf-blog__blurb {
	font-size: 1.1rem;
	color: var(--rf-color-muted);
	margin: 0 0 1rem;
	line-height: 1.6;
	max-width: 640px;
}
.rf-blog__posts {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}
.rf-blog__post {
	padding: 1.25rem 1.5rem;
	border-radius: var(--rf-radius-md);
	background: var(--rf-color-surface);
	transition: box-shadow 200ms ease;
}
.rf-blog__post:hover {
	box-shadow: var(--rf-shadow-md);
}
.rf-blog__post h3 {
	font-size: 1.25rem;
	font-weight: 600;
	margin: 0 0 0.375rem;
	line-height: 1.3;
}
.rf-blog__post h3 a {
	color: var(--rf-color-text);
	text-decoration: none;
}
.rf-blog__post h3 a:hover {
	color: var(--rf-color-primary);
}
.rf-blog__post time {
	display: inline-block;
	font-size: 0.85rem;
	color: var(--rf-color-muted);
	margin-bottom: 0.5rem;
}
.rf-blog__post p {
	font-size: 0.95rem;
	color: var(--rf-color-muted);
	margin: 0;
	line-height: 1.6;
}

/* Grid layout */
.rf-blog--grid .rf-blog__posts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.25rem;
}

/* Compact layout */
.rf-blog--compact .rf-blog__posts {
	gap: 0;
}
.rf-blog--compact .rf-blog__post {
	border-radius: 0;
	padding: 1rem 1.25rem;
}
.rf-blog--compact .rf-blog__post:first-child {
	border-radius: var(--rf-radius-md) var(--rf-radius-md) 0 0;
}
.rf-blog--compact .rf-blog__post:last-child {
	border-radius: 0 0 var(--rf-radius-md) var(--rf-radius-md);
}
.rf-blog--compact .rf-blog__post h3 {
	font-size: 1.1rem;
	margin-bottom: 0.125rem;
}
.rf-blog--compact .rf-blog__post p {
	font-size: 0.875rem;
}
.rf-blog--compact .rf-blog__post time {
	font-size: 0.8rem;
	margin-bottom: 0.25rem;
}

/* Bond */
.rf-bond {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 1rem 0;
}
.rf-bond > span[property="from"],
.rf-bond > span[property="to"] {
	font-weight: 600;
	font-size: 1rem;
	color: var(--rf-color-heading);
	white-space: nowrap;
}
.rf-bond__connector {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}
.rf-bond__arrow {
	display: inline-block;
	width: 2rem;
	height: 2px;
	background: var(--rf-color-border);
	position: relative;
}
.rf-bond__arrow::after {
	content: '';
	position: absolute;
	right: -1px;
	top: 50%;
	transform: translateY(-50%);
	border: 4px solid transparent;
	border-left: 6px solid var(--rf-color-border);
}
.rf-bond[data-bidirectional="true"] .rf-bond__arrow::before {
	content: '';
	position: absolute;
	left: -1px;
	top: 50%;
	transform: translateY(-50%);
	border: 4px solid transparent;
	border-right: 6px solid var(--rf-color-border);
}
.rf-bond__body {
	flex: 1;
	font-size: 0.875rem;
	color: var(--rf-color-muted);
}

/* Status variants */
.rf-bond--active .rf-bond__arrow,
.rf-bond--active .rf-bond__arrow::after {
	border-left-color: var(--rf-color-primary);
}
.rf-bond--active .rf-bond__arrow {
	background: var(--rf-color-primary);
}
.rf-bond--active[data-bidirectional="true"] .rf-bond__arrow::before {
	border-right-color: var(--rf-color-primary);
}

.rf-bond[data-status="broken"] .rf-bond__arrow {
	background: repeating-linear-gradient(
		90deg,
		var(--rf-color-muted) 0,
		var(--rf-color-muted) 4px,
		transparent 4px,
		transparent 8px
	);
}
.rf-bond[data-status="broken"] {
	opacity: 0.6;
}

/* Breadcrumb */
.rf-breadcrumb {
	font-size: 0.85rem;
	margin: 0 0 1.5rem;
}
.rf-breadcrumb__items {
	display: contents;
}
.rf-breadcrumb-item {
	display: contents;
}
.rf-breadcrumb ol {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.25rem;
	list-style: none;
	padding: 0;
	margin: 0;
}
.rf-breadcrumb li {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0;
	margin: 0;
}
.rf-breadcrumb li + li::before {
	content: var(--separator);
	color: var(--rf-color-muted);
	opacity: 0.5;
	margin-right: 0.125rem;
}
.rf-breadcrumb a {
	color: var(--rf-color-muted);
	text-decoration: none;
	transition: color 150ms ease;
}
.rf-breadcrumb a:hover {
	color: var(--rf-color-primary);
	text-decoration: none;
}
.rf-breadcrumb li:last-child span {
	color: var(--rf-color-text);
	font-weight: 500;
}

/* Budget */
.rf-budget__header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-bottom: 1.5rem;
}
.rf-budget__title {
	margin: 0 0 0.5rem;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--rf-color-text);
}

/* Categories */
.rf-budget__categories {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

/* Budget Category — no border box, spacing and typography create hierarchy */
.rf-budget-category {
	padding: 0;
}
.rf-budget-category--estimate {
	border-left: 2px dashed var(--rf-color-warning);
	padding-left: 1rem;
}
.rf-budget-category__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.5rem;
}
.rf-budget-category--estimate .rf-budget-category__header::after {
	content: 'est.';
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--rf-color-warning);
	background: var(--rf-color-warning-bg);
	padding: 0.0625rem 0.375rem;
	border-radius: var(--rf-radius-full);
	margin-left: 0.5rem;
}
.rf-budget-category__label {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--rf-color-text);
}
.rf-budget-category__subtotal {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--rf-color-text);
	white-space: nowrap;
}
.rf-budget-category__line-items {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* Budget Line Item */
.rf-budget-line-item {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 0.3125rem 0;
	gap: 1rem;
}
.rf-budget-line-item + .rf-budget-line-item {
	border-top: 1px solid var(--rf-color-border-light, var(--rf-color-border));
}
.rf-budget-line-item__description {
	font-size: 0.875rem;
	color: var(--rf-color-muted);
	flex: 1;
	min-width: 0;
}
.rf-budget-line-item__amount {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--rf-color-text);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* Budget Footer — total line */
.rf-budget__footer {
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 2px solid var(--rf-color-text);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.rf-budget__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}
.rf-budget__total-label {
	font-size: 1rem;
	font-weight: 700;
	color: var(--rf-color-text);
}
.rf-budget__total-amount {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--rf-color-text);
	font-variant-numeric: tabular-nums;
}
.rf-budget__per-person,
.rf-budget__per-day {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}
.rf-budget__per-person-label,
.rf-budget__per-day-label {
	font-size: 0.8125rem;
	color: var(--rf-color-muted);
}
.rf-budget__per-person-amount,
.rf-budget__per-day-amount {
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--rf-color-muted);
	font-variant-numeric: tabular-nums;
}

/* Summary style — hide line items, show only category headers */
[data-variant="summary"] .rf-budget-category__line-items {
	display: none;
}
[data-variant="summary"] .rf-budget-category__header {
	margin-bottom: 0;
}

/* Cast */

/* Members list — base */
.rf-cast__members {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* Grid layout (default) */
.rf-cast--grid .rf-cast__members {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 1rem;
}

/* List layout */
.rf-cast--list .rf-cast__members {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

/* Member card — surface instead of border */
.rf-cast-member {
	background: var(--rf-color-surface);
	border-radius: var(--rf-radius-md);
	padding: 1.25rem;
	text-align: center;
}
.rf-cast-member__name {
	display: block;
	font-weight: 600;
	font-size: 1rem;
	color: var(--rf-color-text);
}
.rf-cast-member__role {
	display: block;
	font-size: 0.875rem;
	color: var(--rf-color-muted);
	margin-top: 0.125rem;
}
.rf-cast-member__body {
	margin-top: 0.75rem;
	font-size: 0.875rem;
	color: var(--rf-color-muted);
	line-height: 1.5;
}
.rf-cast-member__body:empty { display: none; }
.rf-cast-member img {
	width: 80px;
	height: 80px;
	border-radius: var(--rf-radius-full);
	object-fit: cover;
	margin: 0 auto 0.75rem;
	display: block;
}

/* List layout — horizontal member cards */
.rf-cast--list .rf-cast-member {
	display: flex;
	align-items: center;
	gap: 1rem;
	text-align: left;
	padding: 0.75rem 1rem;
}
.rf-cast--list .rf-cast-member img {
	width: 48px;
	height: 48px;
	margin: 0;
	flex-shrink: 0;
}
.rf-cast--list .rf-cast-member__body {
	margin-top: 0;
	flex: 1;
}

/* Character */

/* Portrait */
.rf-character__portrait {
	float: right;
	margin-left: 1.5rem;
	margin-bottom: 1rem;
	width: 120px;
	height: 120px;
	border-radius: var(--rf-radius-full);
	overflow: hidden;
}
.rf-character__portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Content */
.rf-character__sections {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.rf-character__content {
	clear: both;
}
.rf-character__content ul,
.rf-character__content ol {
	padding-left: 1.5rem;
}
.rf-character > span[property="name"] {
	display: block;
	font-size: 1.5rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
	color: var(--rf-color-heading);
}

/* Character Section */
.rf-character-section {
	padding: 0.75rem 0;
	border-top: 1px solid var(--rf-color-border);
}
.rf-character-section__name {
	display: block;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	margin-bottom: 0.5rem;
	color: var(--rf-color-heading);
}
.rf-character-section__body ul,
.rf-character-section__body ol {
	padding-left: 1.5rem;
}

/* Changelog */
.rf-changelog {
	margin: 2rem 0;
}
.rf-changelog__releases {
	display: contents;
}
.rf-changelog-release {
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--rf-color-border);
}
.rf-changelog-release:last-child {
	border-bottom: none;
}
.rf-changelog-release__body {
	display: contents;
}
.rf-changelog-release h3 {
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0 0 0.25rem;
	color: var(--rf-color-text);
}
.rf-changelog-release time {
	display: block;
	font-size: 0.8rem;
	color: var(--rf-color-muted);
	margin-bottom: 0.75rem;
}
.rf-changelog-release ul {
	padding-left: 1.25rem;
	margin: 0;
}
.rf-changelog-release li {
	font-size: 0.925rem;
	line-height: 1.65;
	margin-bottom: 0.25rem;
}
.rf-changelog-release strong {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.1rem 0.4rem;
	border-radius: var(--rf-radius-sm);
	margin-right: 0.375rem;
	vertical-align: middle;
}
.rf-changelog-release li strong:first-child {
	background: var(--rf-color-success-bg);
	color: var(--rf-color-success);
}

/* Chart */
.rf-chart {
	border-radius: var(--rf-radius-lg);
	padding: 1.5rem;
}
.rf-chart__title {
	font-weight: 600;
	font-size: 1rem;
	margin-bottom: 1rem;
	text-align: center;
}
.rf-chart__container { width: 100%; }
.rf-chart__svg { width: 100%; height: auto; }
.rf-chart__legend {
	display: flex;
	justify-content: center;
	gap: 1rem;
	margin-top: 1rem;
}
.rf-chart__legend-item {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.8125rem;
	color: var(--rf-color-muted);
}
.rf-chart__legend-color {
	width: 12px;
	height: 12px;
	border-radius: 2px;
}

/* Compare */
.rf-compare {
	border: 1px solid var(--rf-color-border);
	border-radius: var(--rf-radius-md);
	overflow: hidden;
}
.rf-compare--side-by-side .rf-compare__panels {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.rf-compare--stacked .rf-compare__panels {
	display: flex;
	flex-direction: column;
}
.rf-compare [data-panel] {
	min-width: 0;
	overflow: auto;
}
.rf-compare--side-by-side [data-panel] + [data-panel] {
	border-left: 1px solid var(--rf-color-border);
}
.rf-compare--stacked [data-panel] + [data-panel] {
	border-top: 1px solid var(--rf-color-border);
}
.rf-compare [data-label] {
	display: block;
	padding: 0.5rem 1rem;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--rf-color-muted);
	background: var(--rf-color-surface);
	border-bottom: 1px solid var(--rf-color-border);
}
.rf-compare pre {
	margin: 0;
	border: none;
	border-radius: 0;
}

/* Comparison */
.rf-comparison {
	margin: 2rem 0;
}
.rf-comparison__grid {
	display: contents;
}
.rf-comparison-column__body,
.rf-comparison-row__body {
	display: contents;
}
.rf-comparison__title {
	text-align: center;
	margin: 0 0 1.5rem;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--rf-color-text);
}
.rf-comparison > meta,
.rf-comparison > span[property] { display: none; }
/* Table layout */
.rf-comparison__table-wrapper {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 0 -1rem;
	padding: 0 1rem;
}
.rf-comparison__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}
.rf-comparison__table thead {
	position: sticky;
	top: 0;
	z-index: 1;
}
.rf-comparison__table th,
.rf-comparison__table td {
	padding: 0.75rem 1rem;
	text-align: left;
	border-bottom: 1px solid var(--rf-color-border);
}
.rf-comparison__table thead th {
	background: var(--rf-color-bg);
	font-weight: 700;
	font-size: 1rem;
	color: var(--rf-color-text);
	border-bottom: 2px solid var(--rf-color-border);
	vertical-align: bottom;
}
.rf-comparison__col-header--highlighted {
	background: color-mix(in srgb, var(--rf-color-primary) 5%, var(--rf-color-bg));
	border-bottom-color: var(--rf-color-primary);
}
.rf-comparison__recommended-badge {
	display: block;
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--rf-color-primary);
	margin-top: 0.25rem;
}
.rf-comparison__label-col {
	width: 1%;
	white-space: nowrap;
}
.rf-comparison__row-label {
	font-weight: 600;
	color: var(--rf-color-text);
	white-space: nowrap;
	background: var(--rf-color-bg);
}
.rf-comparison__cell {
	color: var(--rf-color-muted);
	vertical-align: middle;
}
.rf-comparison__cell--highlighted {
	background: color-mix(in srgb, var(--rf-color-primary) 3%, transparent);
}
.rf-comparison__cell p { margin: 0; font-size: 0.875rem; }
.rf-comparison__cell strong { display: none; }
.rf-comparison__cell em {
	font-style: italic;
	color: var(--rf-color-muted);
}
.rf-comparison__cell--empty {
	color: var(--rf-color-muted);
}
/* Row icons */
.rf-comparison__row-icon {
	font-weight: 700;
	font-size: 1.125rem;
}
.rf-comparison__row-icon--check {
	color: var(--rf-color-success);
}
.rf-comparison__row-icon--cross {
	color: var(--rf-color-danger);
}
/* Negative content */
.rf-comparison__negative {
	color: var(--rf-color-danger);
	opacity: 0.85;
}
.rf-comparison__negative del,
.rf-comparison__negative s {
	text-decoration: line-through;
}
/* Callout badge */
.rf-comparison__callout-badge {
	display: inline-block;
	background: color-mix(in srgb, var(--rf-color-primary) 10%, transparent);
	color: var(--rf-color-primary);
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.125rem 0.5rem;
	border-radius: 999px;
}
.rf-comparison__callout-badge p { margin: 0; font-size: inherit; }
/* Cards layout */
.rf-comparison__cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.5rem;
	align-items: start;
}
.rf-comparison-card {
	border: 1px solid var(--rf-color-border);
	border-radius: var(--rf-radius-md);
	padding: 1.5rem;
	background: var(--rf-color-bg);
	position: relative;
	transition: box-shadow 200ms ease, transform 200ms ease;
}
.rf-comparison-card:hover {
	box-shadow: var(--rf-shadow-md);
}
.rf-comparison-card--highlighted {
	border-color: var(--rf-color-primary);
	box-shadow: var(--rf-shadow-lg);
	transform: scale(1.02);
}
.rf-comparison-card__badge {
	position: absolute;
	top: -0.625rem;
	left: 50%;
	transform: translateX(-50%);
	background: var(--rf-color-primary);
	color: white;
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.125rem 0.75rem;
	border-radius: 999px;
	white-space: nowrap;
}
.rf-comparison-card__name {
	margin: 0 0 1rem;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--rf-color-text);
}
.rf-comparison-card__rows {
	list-style: none;
	padding: 0;
	margin: 0;
}
.rf-comparison-card__row {
	padding: 0.5rem 0;
	font-size: 0.875rem;
	color: var(--rf-color-muted);
	border-bottom: 1px solid var(--rf-color-border);
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
}
.rf-comparison-card__row:last-child { border-bottom: none; }
.rf-comparison-card__row strong { color: var(--rf-color-text); white-space: nowrap; }
.rf-comparison-card__row p { margin: 0; display: inline; }
.rf-comparison-card__row--negative { opacity: 0.7; }
.rf-comparison-card__row--callout {
	border-bottom: none;
	padding: 0.75rem 0 0.25rem;
}
/* Verdict */
.rf-comparison__verdict {
	text-align: center;
	font-size: 0.9375rem;
	color: var(--rf-color-muted);
	font-style: italic;
	margin: 1.5rem auto 0;
	max-width: 48rem;
}
/* Fallback column/row */
.rf-comparison-column { margin-bottom: 1rem; }
.rf-comparison-column--highlighted {
	border-left: 3px solid var(--rf-color-primary);
	padding-left: 1rem;
}
.rf-comparison-row { padding: 0.25rem 0; }
/* Responsive */
@media (max-width: 640px) {
	.rf-comparison__cards { grid-template-columns: 1fr; }
	.rf-comparison-card--highlighted { transform: none; }
	.rf-comparison__table { font-size: 0.8125rem; }
	.rf-comparison__table th,
	.rf-comparison__table td { padding: 0.5rem 0.625rem; }
}

/* Conversation */
.rf-conversation {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	max-width: 40rem;
}
.rf-conversation__messages {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.rf-conversation-message {
	display: flex;
	flex-direction: column;
	max-width: 80%;
}
.rf-conversation-message--left {
	align-self: flex-start;
	align-items: flex-start;
}
.rf-conversation-message--right {
	align-self: flex-end;
	align-items: flex-end;
}
.rf-conversation-message__speaker {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--rf-color-muted);
	margin-bottom: 0.25rem;
	padding: 0 0.75rem;
}
.rf-conversation-message__body {
	padding: 0.75rem 1rem;
	border-radius: 1rem;
	font-size: 0.9375rem;
	line-height: 1.5;
}
.rf-conversation-message--left .rf-conversation-message__body {
	background: var(--rf-color-surface);
	border-bottom-left-radius: 0.25rem;
}
.rf-conversation-message--right .rf-conversation-message__body {
	background: var(--rf-color-primary);
	color: white;
	border-bottom-right-radius: 0.25rem;
}
.rf-conversation-message__body p { margin: 0; }
.rf-conversation-message__body p + p { margin-top: 0.5rem; }
.rf-conversation-message__body > span[property],
.rf-conversation-message__body > meta { display: none; }
.rf-conversation-message > span[property="speaker"],
.rf-conversation-message > meta[property] { display: none; }

/* Call to Action */
.rf-cta {
	padding: 3.5rem 2rem 3rem;
}
.rf-cta .rf-cta__preamble,
.rf-cta > h1, .rf-cta > h2, .rf-cta > h3,
.rf-cta > p {
	text-align: center;
}
.rf-cta__preamble {
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	margin-bottom: 1.5rem;
}
/* Higher specificity needed to override .rf-cta p (0,1,1) */
.rf-cta .rf-cta__eyebrow {
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--rf-color-primary);
	margin: 0 0 0.75rem;
	max-width: none;
}
/* Pill-badge variant when eyebrow contains a link */
.rf-cta .rf-cta__eyebrow:has(a) {
	display: inline-block;
	position: relative;
	padding: 0.25rem 0.875rem;
	border: 1px solid var(--rf-color-border);
	border-radius: var(--rf-radius-full);
	color: var(--rf-color-text);
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	transition: border-color 150ms ease;
}
.rf-cta .rf-cta__eyebrow:has(a):hover {
	border-color: var(--rf-color-muted);
}
.rf-cta .rf-cta__eyebrow:has(a) a {
	color: var(--rf-color-primary);
	font-weight: 600;
	text-decoration: none;
}
.rf-cta .rf-cta__eyebrow:has(a) a::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
}
.rf-cta__image {
	margin-bottom: 1.5rem;
}
.rf-cta h1,
.rf-cta h2,
.rf-cta h3,
.rf-cta__headline {
	font-size: 2.5rem;
	font-weight: 750;
	letter-spacing: -0.03em;
	margin-bottom: 0.75rem;
	margin-top: 0;
	line-height: 1.15;
	background: linear-gradient(135deg, var(--rf-color-text) 0%, var(--rf-color-muted) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
/* Higher specificity needed to override .rf-cta p (0,1,1) */
.rf-cta p,
.rf-cta .rf-cta__blurb {
	font-size: 1.15rem;
	color: var(--rf-color-muted);
	max-width: 540px;
	margin: 0 auto 2rem;
	line-height: 1.65;
}
.rf-cta ul {
	display: flex;
	gap: 0.75rem;
	justify-content: center;
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
	margin: 0;
}
.rf-cta li {
	padding: 0;
	margin: 0;
}
.rf-cta li a,
.rf-cta nav a {
	display: inline-flex;
	align-items: center;
	padding: 0.625rem 1.5rem;
	border-radius: var(--rf-radius-sm);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.925rem;
	transition: all 200ms ease;
}
.rf-cta li:first-child a {
	background: var(--rf-color-primary);
	color: white;
	box-shadow: var(--rf-shadow-sm);
}
.rf-cta li:first-child a:hover {
	background: var(--rf-color-primary-hover);
	box-shadow: var(--rf-shadow-md);
	transform: translateY(-1px);
	text-decoration: none;
}
.rf-cta li:not(:first-child) a {
	background: var(--rf-color-surface);
	color: var(--rf-color-text);
	border: 1px solid var(--rf-color-border);
}
.rf-cta li:not(:first-child) a:hover {
	background: var(--rf-color-surface-hover);
	border-color: var(--rf-color-surface-active);
	text-decoration: none;
}

/* Context-aware: CTA inside a hero gets more vertical space */
.rf-cta--in-hero {
	padding-top: 2rem;
	padding-bottom: 0;
}

/* Context-aware: CTA inside pricing — compact, left-aligned */
.rf-cta--in-pricing {
	padding: 1.5rem 0 0;
}
.rf-cta--in-pricing .rf-cta__preamble,
.rf-cta--in-pricing > h1, .rf-cta--in-pricing > h2, .rf-cta--in-pricing > h3,
.rf-cta--in-pricing > p {
	text-align: left;
}
.rf-cta--in-pricing p {
	margin: 0 0 1rem;
	max-width: none;
}

/* DataTable */
.rf-datatable__toolbar {
	display: flex;
	justify-content: flex-end;
	padding: 0.5rem 0.75rem;
	background: var(--rf-color-surface);
}
.rf-datatable__input {
	width: 14rem;
	padding: 0.35rem 0.625rem;
	border: 1px solid var(--rf-color-border);
	border-radius: var(--rf-radius-sm);
	font-size: 0.8rem;
	font-family: var(--rf-font-sans);
	background: var(--rf-color-bg);
	color: var(--rf-color-text);
}
.rf-datatable__input:focus {
	outline: none;
	border-color: var(--rf-color-primary);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--rf-color-primary) 15%, transparent);
}
.rf-datatable__content .rf-datatable__table {
	border: none;
	border-radius: 0;
	margin: 0;
	overflow: visible;
}
.rf-datatable__content .rf-datatable__table th {
	background: var(--rf-color-surface);
}
.rf-datatable__content .rf-datatable__table th:first-child,
.rf-datatable__content .rf-datatable__table th:last-child {
	border-radius: 0;
}
.rf-datatable__content table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
}
.rf-datatable__content .rf-table-wrapper {
	margin: 0;
	border: none;
	border-radius: 0;
	overflow: visible;
}
.rf-datatable__content th {
	text-align: left;
	padding: 0.75rem 1rem;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--rf-color-muted);
	background: var(--rf-color-surface);
}
.rf-datatable__content th[style*="cursor"]:hover {
	color: var(--rf-color-text);
}
.rf-datatable__content .sort-indicator {
	font-size: 0.65rem;
	opacity: 0.7;
}
.rf-datatable__content td {
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--rf-color-border);
	font-size: 0.875rem;
}
.rf-datatable__content tr:last-child td {
	border-bottom: none;
}
.rf-datatable__content tr:hover td {
	background: var(--rf-color-surface-hover);
}
.rf-datatable__pagination {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.75rem;
	padding: 0.5rem 0.75rem;
	background: var(--rf-color-surface);
}
.rf-datatable__page-btn {
	padding: 0.25rem 0.5rem;
	border: none;
	border-radius: var(--rf-radius-sm);
	background: transparent;
	color: var(--rf-color-muted);
	font-size: 0.8rem;
	font-family: var(--rf-font-sans);
	cursor: pointer;
	transition: color 150ms ease, background 150ms ease;
}
.rf-datatable__page-btn:hover:not(:disabled) {
	color: var(--rf-color-text);
	background: var(--rf-color-surface-hover);
}
.rf-datatable__page-btn:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}
.rf-datatable__page-info {
	font-size: 0.75rem;
	color: var(--rf-color-muted);
}

/* Details */
.rf-details {
	border: 1px solid var(--rf-color-border);
	border-radius: var(--rf-radius-md);
	overflow: hidden;
}
.rf-details__summary {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.25rem;
	font-weight: 600;
	font-size: 0.925rem;
	cursor: pointer;
	background: var(--rf-color-surface);
	user-select: none;
	list-style: none;
	transition: background-color 200ms ease;
}
.rf-details__summary::-webkit-details-marker { display: none; }
.rf-details__summary::marker { display: none; content: ''; }
.rf-details__summary:hover {
	background: var(--rf-color-surface-hover);
}
.rf-details__summary::after {
	content: '▸';
	flex-shrink: 0;
	margin-left: auto;
	color: var(--rf-color-muted);
	transition: transform 200ms ease;
}
.rf-details[open] .rf-details__summary::after {
	transform: rotate(90deg);
}
.rf-details__body {
	padding: 1rem 1.25rem;
	border-top: 1px solid var(--rf-color-border);
	font-size: 0.925rem;
	line-height: 1.65;
}
.rf-details__body p:last-child {
	margin-bottom: 0;
}

/* Diagram */
.rf-diagram {
	border: 1px solid var(--rf-color-border);
	border-radius: var(--rf-radius-lg);
	padding: 1.5rem;
	text-align: center;
}
.rf-diagram__title {
	font-weight: 600;
	font-size: 1rem;
	margin-bottom: 1rem;
}
.rf-diagram__container {
	display: flex;
	justify-content: center;
	overflow-x: auto;
}
.rf-diagram__container svg {
	max-width: 100%;
	height: auto;
}
.rf-diagram__source {
	text-align: left;
	font-size: 0.875rem;
	margin: 0;
}

/* Diff */
.rf-diff {
	border: 1px solid var(--rf-color-border);
	border-radius: var(--rf-radius-lg);
	overflow: hidden;
	font-size: 0.875rem;
}
.rf-diff__split-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.rf-diff__split-container .rf-diff__panel:first-child {
	border-right: 1px solid var(--rf-color-border);
}
.rf-diff__header,
.rf-diff__header-after {
	padding: 0.5rem 1rem;
	font-family: var(--rf-font-sans);
	font-size: 0.75rem;
	font-weight: 600;
	background: var(--rf-color-surface);
	border-bottom: 1px solid var(--rf-color-border);
}
.rf-diff__header {
	color: var(--rf-color-danger);
}
.rf-diff__header-after {
	color: var(--rf-color-success);
}
.rf-diff__code {
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	background: var(--rf-color-code-bg);
	overflow-x: auto;
	font-family: var(--rf-font-mono);
	font-size: 0.8125rem;
	line-height: 1.6;
}
.rf-diff__line {
	display: flex;
	min-height: 1.6em;
}
.rf-diff__line[data-type="equal"]  { background: transparent; }
.rf-diff__line[data-type="remove"] { background: rgba(248, 81, 73, 0.15); }
.rf-diff__line[data-type="add"]    { background: rgba(63, 185, 80, 0.15); }
.rf-diff__line[data-type="empty"]  { background: rgba(128, 128, 128, 0.05); }
.rf-diff__gutter,
.rf-diff__gutter-num,
.rf-diff__gutter-prefix {
	flex-shrink: 0;
	padding: 0 0.5rem;
	user-select: none;
	color: var(--rf-color-muted);
}
.rf-diff__gutter-num {
	width: 2.5em;
	text-align: right;
	font-size: 0.75rem;
}
.rf-diff__gutter-prefix {
	width: 1.5em;
	text-align: center;
	font-weight: bold;
}
.rf-diff__line[data-type="remove"] .rf-diff__gutter-prefix { color: var(--rf-color-danger); }
.rf-diff__line[data-type="add"] .rf-diff__gutter-prefix    { color: var(--rf-color-success); }
.rf-diff__line-content {
	flex: 1;
	white-space: pre;
	padding-right: 1rem;
}

/* Code Group */
.rf-codegroup {
	border: 1px solid var(--rf-color-border);
	overflow: hidden;
	background: var(--rf-color-code-bg);
	color: var(--rf-color-code-text);
	box-shadow: var(--rf-shadow-md);
	padding: 0;
}
.rf-codegroup__topbar {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.75rem 1rem;
	background: rgba(255, 255, 255, 0.03);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	margin-bottom: 0;
}
.rf-codegroup__dot {
	width: 10px;
	height: 10px;
	border-radius: var(--rf-radius-full);
	opacity: 0.8;
}
.rf-codegroup__dot:nth-child(1) { background: #ef4444; }
.rf-codegroup__dot:nth-child(2) { background: #f59e0b; }
.rf-codegroup__dot:nth-child(3) { background: #22c55e; }
.rf-codegroup__title {
	margin-left: 0.5rem;
	font-family: var(--rf-font-mono);
	font-size: 0.8rem;
	opacity: 0.7;
}
.rf-codegroup ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.rf-codegroup__tabs {
	display: flex;
	background: rgba(255, 255, 255, 0.03);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	overflow-x: auto;
	overflow-y: hidden;
}
.rf-codegroup__tab {
	flex: 0 0 auto;
	padding: 0.5rem 1rem;
	font-size: 0.8rem;
	font-family: var(--rf-font-mono);
	color: rgba(255, 255, 255, 0.5);
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	cursor: pointer;
	transition: color 200ms ease, border-color 200ms ease;
	white-space: nowrap;
}
.rf-codegroup__tab:hover {
	color: rgba(255, 255, 255, 0.8);
}
.rf-codegroup__tab--active {
	color: rgba(255, 255, 255, 0.95);
	border-bottom-color: var(--rf-color-primary);
}
.rf-codegroup pre {
	margin: 0;
	padding: 1rem 1.25rem;
	overflow-x: auto;
	background: none;
	border: none;
	border-radius: 0;
}
.rf-codegroup code {
	font-family: var(--rf-font-mono);
	font-size: 0.85rem;
}
/* Overflow modes */
.rf-codegroup[data-overflow="wrap"] pre {
	white-space: pre-wrap;
	word-break: break-word;
	overflow-x: hidden;
}
.rf-codegroup[data-overflow="hide"] pre {
	overflow-x: hidden;
}

/* Embed */
.rf-embed {
	padding: 0;
}
.rf-embed__wrapper {
	position: relative;
	width: 100%;
	height: 0;
	overflow: hidden;
	border-radius: var(--rf-radius-md);
	background: var(--rf-color-surface);
}
.rf-embed__wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
}
.rf-embed__fallback {
	font-size: 0.85rem;
	color: var(--rf-color-muted);
	margin-top: 0.5rem;
}
.rf-embed__fallback p:last-child {
	margin-bottom: 0;
}
.rf-embed__fallback:empty {
	display: none;
}

/* Event */
.rf-event__details {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem;
	background: var(--rf-color-surface);
	border-radius: var(--rf-radius-md);
	padding: 0.75rem 1rem;
}
.rf-event__detail {
	display: block;
}
.rf-event__label {
	display: block;
	margin-bottom: 0.125rem;
	font-size: 0.75rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--rf-color-muted);
	opacity: 0.6;
}
.rf-event__value {
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--rf-color-text);
}
.rf-event__register {
	display: inline-block;
	padding: 0.5rem 1rem;
	background: var(--rf-color-primary);
	color: #fff;
	border-radius: var(--rf-radius-md);
	font-weight: 500;
	font-size: 0.875rem;
	text-decoration: none;
	margin-left: auto;
}
.rf-event__register:hover {
	background: var(--rf-color-primary-hover);
}
.rf-event__content {
	margin-top: 1.5rem;
}
.rf-event__content ul,
.rf-event__content ol {
	padding-left: 1.5rem;
}
.rf-event__content a {
	color: var(--rf-color-primary);
	text-decoration: none;
}
.rf-event__content a:hover {
	color: var(--rf-color-primary-hover);
}

/* Faction */
.rf-faction {
	display: flex;
	flex-direction: column;
}

/* Scene image — base styles deferred to shared [data-section="media"] in split.css */
.rf-faction__scene {
	margin-bottom: var(--rf-spacing-md);
}

/* Content */
.rf-faction__sections {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.rf-faction__content ul,
.rf-faction__content ol {
	padding-left: 1.5rem;
}
.rf-faction > span[property="name"] {
	display: block;
	font-size: 1.5rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
	color: var(--rf-color-heading);
}

/* Faction Section */
.rf-faction-section {
	padding: 0.75rem 0;
	border-top: 1px solid var(--rf-color-border);
}
.rf-faction-section__name {
	display: block;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	margin-bottom: 0.5rem;
	color: var(--rf-color-heading);
}
.rf-faction-section__body ul,
.rf-faction-section__body ol {
	padding-left: 1.5rem;
}

/* Split layout — shared */
.rf-faction[data-layout="split"],
.rf-faction[data-layout="split-reverse"] {
	display: grid;
	grid-template-columns: var(--split-ratio, 1fr 1fr);
	column-gap: var(--split-gap, 2rem);
	align-items: var(--split-valign, start);
}
/* Split: badge + name + content left (col 1), scene right (col 2) */
.rf-faction[data-layout="split"] > .rf-faction__badge {
	grid-column: 1;
	grid-row: 1;
}
.rf-faction[data-layout="split"] > span[property="name"] {
	grid-column: 1;
	grid-row: 2;
}
.rf-faction[data-layout="split"] > .rf-faction__content {
	grid-column: 1;
	grid-row: 3;
}
.rf-faction[data-layout="split"] > .rf-faction__scene {
	grid-column: 2;
	grid-row: 1 / 4;
	margin: 0;
}
/* Split-reverse: scene left (col 1), badge + name + content right (col 2) */
.rf-faction[data-layout="split-reverse"] > .rf-faction__badge {
	grid-column: 2;
	grid-row: 1;
}
.rf-faction[data-layout="split-reverse"] > span[property="name"] {
	grid-column: 2;
	grid-row: 2;
}
.rf-faction[data-layout="split-reverse"] > .rf-faction__content {
	grid-column: 2;
	grid-row: 3;
}
.rf-faction[data-layout="split-reverse"] > .rf-faction__scene {
	grid-column: 1;
	grid-row: 1 / 4;
	margin: 0;
}
/* Collapse to single column on small screens */
@media (max-width: 640px) {
	.rf-faction[data-layout="split"],
	.rf-faction[data-layout="split-reverse"] {
		grid-template-columns: 1fr;
	}
	.rf-faction[data-layout="split"] > .rf-faction__badge,
	.rf-faction[data-layout="split"] > span[property="name"],
	.rf-faction[data-layout="split"] > .rf-faction__content,
	.rf-faction[data-layout="split"] > .rf-faction__scene,
	.rf-faction[data-layout="split-reverse"] > .rf-faction__badge,
	.rf-faction[data-layout="split-reverse"] > span[property="name"],
	.rf-faction[data-layout="split-reverse"] > .rf-faction__content,
	.rf-faction[data-layout="split-reverse"] > .rf-faction__scene {
		grid-column: auto;
		grid-row: auto;
	}
	.rf-faction[data-layout="split"]:not([data-media-position="top"]) > .rf-faction__scene,
	.rf-faction[data-layout="split-reverse"]:not([data-media-position="top"]) > .rf-faction__scene {
		margin-bottom: var(--rf-spacing-md);
	}
}
/* Reset grid placement when data-collapse triggers single-column from shared split.css */
@media (max-width: 640px) {
	.rf-faction[data-collapse="sm"] > .rf-faction__badge,
	.rf-faction[data-collapse="sm"] > span[property="name"],
	.rf-faction[data-collapse="sm"] > .rf-faction__content,
	.rf-faction[data-collapse="sm"] > .rf-faction__scene {
		grid-column: auto;
		grid-row: auto;
	}
	.rf-faction[data-collapse="sm"]:not([data-media-position="top"]) > .rf-faction__scene {
		margin-bottom: var(--rf-spacing-md);
	}
}
@media (max-width: 768px) {
	.rf-faction[data-collapse="md"] > .rf-faction__badge,
	.rf-faction[data-collapse="md"] > span[property="name"],
	.rf-faction[data-collapse="md"] > .rf-faction__content,
	.rf-faction[data-collapse="md"] > .rf-faction__scene {
		grid-column: auto;
		grid-row: auto;
	}
	.rf-faction[data-collapse="md"]:not([data-media-position="top"]) > .rf-faction__scene {
		margin-bottom: var(--rf-spacing-md);
	}
}
@media (max-width: 1024px) {
	.rf-faction[data-collapse="lg"] > .rf-faction__badge,
	.rf-faction[data-collapse="lg"] > span[property="name"],
	.rf-faction[data-collapse="lg"] > .rf-faction__content,
	.rf-faction[data-collapse="lg"] > .rf-faction__scene {
		grid-column: auto;
		grid-row: auto;
	}
	.rf-faction[data-collapse="lg"]:not([data-media-position="top"]) > .rf-faction__scene {
		margin-bottom: var(--rf-spacing-md);
	}
}

/* Split layout scene gets subtle depth */
.rf-faction[data-layout="split"] .rf-faction__scene img,
.rf-faction[data-layout="split-reverse"] .rf-faction__scene img {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Feature */
.rf-feature {
	padding: 2.5rem 0 2rem;
}
.rf-feature__preamble {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.25rem;
	margin-bottom: 1.5rem;
}
.rf-feature__eyebrow {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--rf-color-primary);
	margin: 0 0 0.5rem;
}
.rf-feature__eyebrow:has(a) {
	display: inline-block;
	position: relative;
	padding: 0.25rem 0.875rem;
	border: 1px solid var(--rf-color-border);
	border-radius: var(--rf-radius-full);
	color: var(--rf-color-text);
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	transition: border-color 150ms ease;
}
.rf-feature__eyebrow:has(a):hover { border-color: var(--rf-color-muted); }
.rf-feature__eyebrow:has(a) a { color: var(--rf-color-primary); font-weight: 600; text-decoration: none; }
.rf-feature__eyebrow:has(a) a::before { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.rf-feature__headline {
	margin-top: 0;
}
.rf-feature__blurb {
	color: var(--rf-color-muted);
	margin-bottom: 0;
	max-width: 40rem;
}
.rf-feature__image {
	margin-bottom: 1rem;
}
.rf-feature__content {
	display: contents;
}
.rf-feature h2 {
	margin-bottom: 2rem;
}
.rf-feature[data-align="center"] .rf-feature__preamble,
.rf-feature[data-align="center"] h2 {
	text-align: center;
}
.rf-feature[data-align="left"] .rf-feature__preamble,
.rf-feature[data-align="left"] h2 {
	text-align: left;
}
.rf-feature[data-align="right"] .rf-feature__preamble,
.rf-feature[data-align="right"] h2 {
	text-align: right;
}
.rf-feature__definitions {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(max(240px, calc((100% - 3rem) / 3)), 1fr));
	gap: 1.5rem;
	margin: 0;
}
/* Split layout: override defaults when in split mode */
.rf-feature[data-layout="split"] .rf-feature__content,
.rf-feature[data-layout="split-reverse"] .rf-feature__content {
	display: block;
}
.rf-feature[data-layout="split"] .rf-feature__preamble,
.rf-feature[data-layout="split-reverse"] .rf-feature__preamble,
.rf-feature[data-layout="split"] h2,
.rf-feature[data-layout="split-reverse"] h2 {
	text-align: left;
}
.rf-feature[data-layout="split"] .rf-feature__definitions,
.rf-feature[data-layout="split-reverse"] .rf-feature__definitions {
	display: block;
}
.rf-feature[data-layout="split"] .rf-feature__feature-item,
.rf-feature[data-layout="split-reverse"] .rf-feature__feature-item {
	background: none;
	padding: 0.75rem 0;
}
.rf-feature__feature-item {
	padding: 1.75rem;
	border-radius: var(--rf-radius-md);
	background: var(--rf-color-surface);
}
.rf-feature__feature-item dt {
	font-weight: 650;
	font-size: 1.125rem;
	margin-bottom: 0.75rem;
	letter-spacing: -0.01em;
	color: var(--rf-color-text);
}
.rf-feature__feature-item dt:has(> .rf-icon) {
	display: flex;
	flex-direction: column;
}
.rf-feature__feature-item dt > .rf-icon {
	width: 1.5rem;
	height: 1.5rem;
	margin-bottom: 0.5rem;
	color: var(--rf-color-accent);
}
.rf-feature__feature-item dd {
	margin: 0;
	color: var(--rf-color-muted);
	font-size: 0.9rem;
	line-height: 1.65;
}

/* Context-aware: feature inside a hero — no top padding, tighter spacing */
.rf-feature--in-hero {
	padding-top: 0;
}
.rf-feature--in-hero .rf-feature__feature-item {
	background: transparent;
}

/* Context-aware: feature inside a grid — remove outer padding */
.rf-feature--in-grid {
	padding: 0;
}

/* Figure */
.rf-figure img {
	max-width: 100%;
	height: auto;
	border-radius: var(--rf-radius-md);
	box-shadow: var(--rf-shadow-sm);
}
.rf-figure figcaption {
	margin-top: 0.625rem;
	font-size: 0.825rem;
	color: var(--rf-color-muted);
	text-align: center;
	font-style: italic;
}
.rf-figure--small { max-width: 320px; }
.rf-figure--medium { max-width: 640px; }
.rf-figure--large { max-width: 960px; }
.rf-figure--full { max-width: 100%; }
.rf-figure--left { margin-right: auto; }
.rf-figure--center { margin-left: auto; margin-right: auto; }
.rf-figure--right { margin-left: auto; }

/* Gallery — Multi-image container with grid/carousel/masonry layout */
.rf-gallery {
	position: relative;
}

/* Layout modifier classes */
.rf-gallery--grid {}
.rf-gallery--carousel {}
.rf-gallery--masonry {}

/* Items container — grid layout by default */
.rf-gallery__items {
	display: grid;
	grid-template-columns: repeat(var(--gallery-columns, 3), 1fr);
	gap: var(--gallery-gap, var(--rf-spacing-md));
}

/* Individual gallery items */
.rf-gallery__item {
	position: relative;
	overflow: hidden;
	border-radius: var(--rf-radius-md);
}
.rf-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.rf-gallery__item figcaption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 0.5rem 0.75rem;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
	color: white;
	font-size: 0.825rem;
}

/* Gallery caption */
.rf-gallery > figcaption {
	margin-top: 0.625rem;
	font-size: 0.825rem;
	color: var(--rf-color-muted);
	text-align: center;
	font-style: italic;
}

/* Carousel layout */
.rf-gallery[data-layout="carousel"] .rf-gallery__items {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}
.rf-gallery[data-layout="carousel"] .rf-gallery__item {
	flex: 0 0 calc(100% / var(--gallery-columns, 3));
	scroll-snap-align: start;
}

/* Carousel nav buttons */
.rf-gallery__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	border: none;
	background: var(--rf-color-surface);
	color: var(--rf-color-text);
	box-shadow: var(--rf-shadow-md);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.25rem;
	opacity: 0.8;
	transition: opacity 0.2s;
}
.rf-gallery__nav:hover {
	opacity: 1;
}
.rf-gallery__nav--prev {
	left: 0.5rem;
}
.rf-gallery__nav--next {
	right: 0.5rem;
}

/* Masonry layout (CSS progressive enhancement) */
.rf-gallery[data-layout="masonry"] .rf-gallery__items {
	grid-template-rows: masonry;
}

/* Lightbox cursor hint */
.rf-gallery[data-lightbox="true"] .rf-gallery__item {
	cursor: zoom-in;
}

/* Lightbox overlay */
.rf-gallery__lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(0, 0, 0, 0.9);
	display: flex;
	align-items: center;
	justify-content: center;
}
.rf-gallery__lightbox img {
	max-width: 90vw;
	max-height: 90vh;
	object-fit: contain;
	border-radius: var(--rf-radius-md);
}
.rf-gallery__lightbox-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.15);
	color: white;
	font-size: 1.5rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.rf-gallery__lightbox-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.15);
	color: white;
	font-size: 1.5rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.rf-gallery__lightbox-nav--prev {
	left: 1rem;
}
.rf-gallery__lightbox-nav--next {
	right: 1rem;
}

/* Column count overrides */
.rf-gallery[data-columns="1"] .rf-gallery__items { grid-template-columns: 1fr; }
.rf-gallery[data-columns="2"] .rf-gallery__items { grid-template-columns: repeat(2, 1fr); }
.rf-gallery[data-columns="4"] .rf-gallery__items { grid-template-columns: repeat(4, 1fr); }
.rf-gallery[data-columns="5"] .rf-gallery__items { grid-template-columns: repeat(5, 1fr); }
.rf-gallery[data-columns="6"] .rf-gallery__items { grid-template-columns: repeat(6, 1fr); }

/* Responsive: collapse to fewer columns on small screens */
@media (max-width: 768px) {
	.rf-gallery__items {
		grid-template-columns: repeat(2, 1fr);
	}
	.rf-gallery[data-layout="carousel"] .rf-gallery__item {
		flex-basis: 80%;
	}
}
@media (max-width: 480px) {
	.rf-gallery__items {
		grid-template-columns: 1fr;
	}
	.rf-gallery[data-layout="carousel"] .rf-gallery__item {
		flex-basis: 100%;
	}
}

/* Form */
.rf-form {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	max-width: 36rem;
}
.rf-form__body {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}
.rf-form meta { display: none; }
/* Honeypot */
.rf-form__hp {
	position: absolute;
	left: -9999px;
	opacity: 0;
	height: 0;
	overflow: hidden;
}
/* Inline variant */
.rf-form--inline .rf-form__body {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.75rem;
}
.rf-form--inline .rf-form-field {
	flex: 1;
	min-width: 10rem;
}
/* Compact variant */
.rf-form--compact {
	gap: 0.75rem;
	font-size: 0.875rem;
}
.rf-form--compact .rf-form__body {
	gap: 0.75rem;
}
.rf-form--compact input,
.rf-form--compact textarea,
.rf-form--compact select {
	padding: 0.375rem 0.625rem;
	font-size: 0.8125rem;
}
/* Field */
.rf-form-field {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}
.rf-form-field label {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--rf-color-text);
}
.rf-form-field__required {
	color: var(--rf-color-danger);
	margin-left: 0.125rem;
}
.rf-form-field input,
.rf-form-field textarea,
.rf-form-field select {
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--rf-color-border);
	border-radius: var(--rf-radius-md);
	font-size: 0.9375rem;
	font-family: inherit;
	color: var(--rf-color-text);
	background: var(--rf-color-bg);
	transition: border-color 0.15s, box-shadow 0.15s;
	width: 100%;
	box-sizing: border-box;
}
.rf-form-field input:focus,
.rf-form-field textarea:focus,
.rf-form-field select:focus {
	outline: none;
	border-color: var(--rf-color-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--rf-color-primary) 15%, transparent);
}
.rf-form-field textarea {
	resize: vertical;
	min-height: 6rem;
}
/* Fieldset */
.rf-form-fieldset {
	border: none;
	padding: 0;
	margin: 0.5rem 0 0;
}
.rf-form-fieldset legend {
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--rf-color-text);
	padding: 0;
	margin-bottom: 0.75rem;
}
/* Choice groups */
.rf-form-choice-group {
	border: none;
	padding: 0;
}
.rf-form-choice-group legend {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--rf-color-text);
	padding: 0;
	margin-bottom: 0.5rem;
}
.rf-form-choice {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.375rem 0;
	cursor: pointer;
	font-size: 0.9375rem;
}
.rf-form-choice input {
	width: auto;
	margin: 0;
	accent-color: var(--rf-color-primary);
}
/* Submit */
.rf-form__submit {
	padding: 0.625rem 1.5rem;
	background: var(--rf-color-primary);
	color: white;
	border: none;
	border-radius: var(--rf-radius-md);
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s;
	align-self: flex-start;
}
.rf-form__submit:hover {
	background: color-mix(in srgb, var(--rf-color-primary) 85%, black);
}
.rf-form__submit:active {
	transform: scale(0.98);
}
/* Help & description */
.rf-form__help {
	font-size: 0.8125rem;
	color: var(--rf-color-muted);
	font-style: italic;
	margin: 0;
}
.rf-form__text {
	font-size: 0.9375rem;
	color: var(--rf-color-muted);
	margin: 0;
}
/* Separator */
.rf-form__separator {
	border: none;
	border-top: 1px solid var(--rf-color-border);
	margin: 0.5rem 0;
}
/* Status messages */
.rf-form__status {
	padding: 0.75rem 1rem;
	border-radius: var(--rf-radius-md);
	font-size: 0.875rem;
	font-weight: 500;
}
.rf-form__status--submitting {
	background: var(--rf-color-surface);
	color: var(--rf-color-muted);
}
.rf-form__status--success {
	background: color-mix(in srgb, var(--rf-color-success) 10%, transparent);
	color: var(--rf-color-success);
	border: 1px solid color-mix(in srgb, var(--rf-color-success) 25%, transparent);
}
.rf-form__status--error {
	background: color-mix(in srgb, var(--rf-color-danger) 10%, transparent);
	color: var(--rf-color-danger);
	border: 1px solid color-mix(in srgb, var(--rf-color-danger) 25%, transparent);
}

/* Grid */
.rf-grid [data-layout="grid"] {
	display: grid;
	grid-template-columns: var(--grid-ratio, repeat(auto-fit, minmax(250px, 1fr)));
	align-items: var(--grid-valign, stretch);
	gap: var(--grid-gap, 1.5rem);
}
/* Explicit column counts override auto-fit */
.rf-grid [data-columns="1"] { grid-template-columns: 1fr; }
.rf-grid [data-columns="2"] { grid-template-columns: repeat(2, 1fr); }
.rf-grid [data-columns="3"] { grid-template-columns: repeat(3, 1fr); }
.rf-grid [data-columns="4"] { grid-template-columns: repeat(4, 1fr); }
.rf-grid [data-columns="5"] { grid-template-columns: repeat(5, 1fr); }
.rf-grid [data-columns="6"] { grid-template-columns: repeat(6, 1fr); }
/* Flow */
.rf-grid [data-flow="column"] { grid-auto-flow: column; }
.rf-grid [data-flow="dense"] { grid-auto-flow: dense; }
.rf-grid [data-flow="row dense"] { grid-auto-flow: row dense; }
.rf-grid [data-flow="column dense"] { grid-auto-flow: column dense; }
/* Spans */
.rf-grid [data-colspan="2"] { grid-column: span 2; }
.rf-grid [data-colspan="3"] { grid-column: span 3; }
.rf-grid [data-colspan="4"] { grid-column: span 4; }
.rf-grid [data-rowspan="2"] { grid-row: span 2; }
.rf-grid [data-rowspan="3"] { grid-row: span 3; }
.rf-grid [data-rowspan="4"] { grid-row: span 4; }
/* Cell styling */
.rf-grid [data-name="cell"] p:first-child { margin-top: 0; }
.rf-grid [data-name="cell"] p:last-child { margin-bottom: 0; }
/* Auto mode — responsive auto-fill */
.rf-grid[data-mode="auto"] [data-layout="grid"] {
	grid-template-columns: repeat(auto-fill, minmax(var(--grid-min, 250px), 1fr));
}
/* Masonry mode — progressive enhancement */
.rf-grid[data-mode="masonry"] [data-layout="grid"] {
	grid-template-rows: masonry;
}
/* Aspect ratio enforcement on cells */
.rf-grid[data-aspect] [data-name="cell"] {
	aspect-ratio: var(--grid-aspect);
	overflow: hidden;
}
.rf-grid[data-aspect] [data-name="cell"] > img,
.rf-grid[data-aspect] [data-name="cell"] > video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Stack order when collapsed */
.rf-grid[data-stack="reverse"] [data-name="cell"]:last-child {
	order: -1;
}
/* Collapse breakpoints */
@media (max-width: 640px) {
	.rf-grid[data-collapse="sm"] [data-layout="grid"] { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
	.rf-grid[data-collapse="md"] [data-layout="grid"] { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
	.rf-grid[data-collapse="lg"] [data-layout="grid"] { grid-template-columns: 1fr; }
}

/* Hero */
.rf-hero {
	position: relative;
	padding: 7rem 2rem 6.5rem;
	background-size: cover;
	background-position: center;
}
.rf-hero__preamble {
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	margin-bottom: 2rem;
}
/* Higher specificity needed to override .rf-hero p (0,1,1) */
.rf-hero .rf-hero__eyebrow {
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--rf-color-primary);
	margin: 0 0 1rem;
	max-width: none;
}
/* Pill-badge variant when eyebrow contains a link */
.rf-hero .rf-hero__eyebrow:has(a) {
	display: inline-block;
	position: relative;
	padding: 0.25rem 0.875rem;
	border: 1px solid var(--rf-color-border);
	border-radius: var(--rf-radius-full);
	color: var(--rf-color-text);
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	transition: border-color 150ms ease;
}
.rf-hero .rf-hero__eyebrow:has(a):hover {
	border-color: var(--rf-color-muted);
}
.rf-hero .rf-hero__eyebrow:has(a) a {
	color: var(--rf-color-primary);
	font-weight: 600;
	text-decoration: none;
}
.rf-hero .rf-hero__eyebrow:has(a) a::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
}
.rf-hero__image {
	margin-bottom: 1.5rem;
}
.rf-hero__actions {
	max-width: 720px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}
.rf-hero[data-align="center"] .rf-hero__preamble,
.rf-hero[data-align="center"] > h1,
.rf-hero[data-align="center"] > p {
	text-align: center;
}
.rf-hero[data-align="center"] .rf-hero__actions {
	margin: 0 auto;
	justify-content: center;
}
.rf-hero[data-align="left"] .rf-hero__preamble,
.rf-hero[data-align="left"] > h1,
.rf-hero[data-align="left"] > p {
	text-align: left;
}
.rf-hero[data-align="left"] .rf-hero__preamble {
	align-items: flex-start;
}
.rf-hero[data-align="left"] .rf-hero__actions {
	margin: 0;
}
.rf-hero[data-align="right"] .rf-hero__preamble,
.rf-hero[data-align="right"] > h1,
.rf-hero[data-align="right"] > p {
	text-align: right;
}
.rf-hero[data-align="right"] .rf-hero__preamble {
	align-items: flex-end;
}
.rf-hero[data-align="right"] .rf-hero__actions {
	margin: 0 0 0 auto;
}
.rf-hero__actions pre {
	margin: 0;
	padding: 0.7rem 1.75rem;
	font-size: 0.95rem;
	border-radius: var(--rf-radius-sm);
	background: var(--rf-color-code-bg);
	color: var(--rf-color-code-text);
	border: 1px solid var(--rf-color-border);
	white-space: nowrap;
}
.rf-hero h1,
.rf-hero__headline {
	font-size: 3.25rem;
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1.1;
	margin: 0 0 1rem;
	background: linear-gradient(135deg, var(--rf-color-text) 0%, var(--rf-color-muted) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
/* Higher specificity needed to override .rf-hero p (0,1,1) */
.rf-hero p,
.rf-hero .rf-hero__blurb {
	font-size: 1.2rem;
	line-height: 1.65;
	color: var(--rf-color-muted);
	margin: 0 0 2rem;
	max-width: 40rem;
}
.rf-hero[data-align="center"] > p,
.rf-hero[data-align="center"] .rf-hero__blurb {
	max-width: 560px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 2rem;
}
.rf-hero ul,
.rf-hero nav {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
	margin: 0;
}
.rf-hero[data-align="center"] ul,
.rf-hero[data-align="center"] nav {
	justify-content: center;
}
.rf-hero li {
	padding: 0;
	margin: 0;
}
.rf-hero li a,
.rf-hero nav a {
	display: inline-flex;
	align-items: center;
	padding: 0.7rem 1.75rem;
	border-radius: var(--rf-radius-sm);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.95rem;
	transition: all 200ms ease;
}
.rf-hero li:first-child a {
	background: var(--rf-color-primary);
	color: white;
	box-shadow: var(--rf-shadow-sm);
}
.rf-hero li:first-child a:hover {
	background: var(--rf-color-primary-hover);
	box-shadow: var(--rf-shadow-md);
	transform: translateY(-1px);
	text-decoration: none;
}
.rf-hero li:not(:first-child) a {
	background: var(--rf-color-surface);
	color: var(--rf-color-text);
	border: 1px solid var(--rf-color-border);
}
.rf-hero li:not(:first-child) a:hover {
	background: var(--rf-color-surface-hover);
	border-color: var(--rf-color-surface-active);
	text-decoration: none;
}
.rf-hero__media {
	margin-top: 3rem;
	border-radius: var(--rf-radius-lg);
}
.rf-hero__media img {
	display: block;
	width: 100%;
	height: auto;
}
.rf-hero__media pre {
	margin: 0;
}

/* Hint */
.rf-hint {
	--hint-color: var(--rf-color-info);
	--hint-bg: var(--rf-color-info-bg);
	border-left: 3px solid var(--hint-color);
	padding: 0.875rem 1.25rem;
	border-radius: 0 var(--rf-radius-md) var(--rf-radius-md) 0;
	background: var(--hint-bg);
}
.rf-hint__icon {
	display: flex;
	align-items: center;
	color: var(--hint-color);
}
.rf-hint__icon::before {
	content: '';
	display: block;
	width: 1.25rem;
	height: 1.25rem;
	background-color: var(--hint-color);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}
.rf-hint--note .rf-hint__icon::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");
}
.rf-hint--warning .rf-hint__icon::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
}
.rf-hint--caution .rf-hint__icon::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='15' y1='9' x2='9' y2='15'/%3E%3Cline x1='9' y1='9' x2='15' y2='15'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='15' y1='9' x2='9' y2='15'/%3E%3Cline x1='9' y1='9' x2='15' y2='15'/%3E%3C/svg%3E");
}
.rf-hint--check .rf-hint__icon::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E");
}
.rf-hint__title {
	font-weight: 600;
	text-transform: capitalize;
	font-size: 0.8rem;
	letter-spacing: 0.03em;
	color: var(--hint-color);
}
.rf-hint__body {
	font-size: 0.925rem;
	line-height: 1.65;
}
.rf-hint__body p:last-child {
	margin-bottom: 0;
}
.rf-hint--note {
	--hint-color: var(--rf-color-info);
	--hint-bg: var(--rf-color-info-bg);
}
.rf-hint--warning {
	--hint-color: var(--rf-color-warning);
	--hint-bg: var(--rf-color-warning-bg);
}
.rf-hint--caution {
	--hint-color: var(--rf-color-danger);
	--hint-bg: var(--rf-color-danger-bg);
}
.rf-hint--check {
	--hint-color: var(--rf-color-success);
	--hint-bg: var(--rf-color-success-bg);
}

/* Context-aware: compact hint when nested inside a hero */
.rf-hint--in-hero {
	margin: 1rem 0 0;
	padding: 0.625rem 1rem;
	border-radius: var(--rf-radius-sm);
	font-size: 0.875rem;
}
.rf-hint--in-hero .rf-hint__header {
	margin-bottom: 0.25rem;
}

/* Context-aware: hint inside a feature block */
.rf-hint--in-feature {
	margin: 0.75rem 0 0;
	padding: 0.5rem 0.875rem;
	border-left-width: 2px;
	font-size: 0.85rem;
}

/* HowTo — matches recipe design */

/* Meta bar — extra bottom spacing beyond section header default */
.rf-howto__meta {
	margin-bottom: 1.5rem;
}

/* Tools/materials list — surfaced zone with primary markers */
.rf-howto__content ul {
	background: var(--rf-color-surface);
	border: 1px solid var(--rf-color-border);
	border-radius: var(--rf-radius-md);
	padding: 1.25rem 1.25rem 1.25rem 2.5rem;
	margin: 0 0 1.75rem;
	list-style: disc;
}
.rf-howto__content ul li {
	padding: 0.2rem 0;
	line-height: 1.6;
}
.rf-howto__content ul li::marker {
	color: var(--rf-color-primary);
}

/* Steps — numbered with styled counters */
.rf-howto__content ol {
	padding-left: 0;
	margin: 0;
	list-style: none;
	counter-reset: howto-step;
}
.rf-howto__content ol > li {
	counter-increment: howto-step;
	padding: 0.625rem 0;
	padding-left: 2.25rem;
	position: relative;
	line-height: 1.65;
}
.rf-howto__content ol > li + li {
	border-top: 1px solid var(--rf-color-border);
}
.rf-howto__content ol > li::before {
	content: counter(howto-step);
	position: absolute;
	left: 0;
	top: 0.625rem;
	width: 1.5rem;
	height: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--rf-color-primary);
	background: var(--rf-color-surface);
	border-radius: var(--rf-radius-full);
}

.rf-howto__content ol > li > p,
.rf-howto__content ul > li > p {
	margin: 0;
}

/* Tips — callout accent like hint */
.rf-howto__content blockquote {
	border-left: 2px solid var(--rf-color-primary);
	background: var(--rf-color-surface);
	border-radius: 0 var(--rf-radius-md) var(--rf-radius-md) 0;
	padding: 0.75rem 1.25rem;
	margin: 1.75rem 0 0;
	font-size: 0.9125rem;
	font-style: italic;
	color: var(--rf-color-muted);
	line-height: 1.6;
}
.rf-howto__content blockquote p {
	margin: 0;
}

/* Juxtapose — interactive comparison between two panels */

/* ─── Variant modifiers (for static/no-JS layout) ─── */
.rf-juxtapose--slider,
.rf-juxtapose--auto,
.rf-juxtapose--fade,
.rf-juxtapose--toggle {
	/* shared base — no additional styling needed */
}

/* ─── Panels container ─── */
.rf-juxtapose__panels {
	border-radius: var(--rf-radius-md);
	overflow: hidden;
	border: 1px solid var(--rf-color-border);
	background: var(--rf-color-surface);
}

/* ─── Panel ─── */
.rf-juxtapose-panel {
	position: relative;
	overflow: hidden;
}
.rf-juxtapose-panel__name {
	position: absolute;
	bottom: 0.5rem;
	padding: 0.25rem 0.75rem;
	background: rgba(0, 0, 0, 0.6);
	color: white;
	font-size: 0.75rem;
	font-weight: 600;
	border-radius: var(--rf-radius-sm);
	pointer-events: none;
}
/* First panel: label bottom-left */
.rf-juxtapose-panel:first-child .rf-juxtapose-panel__name {
	left: 0.5rem;
}
/* Second panel: label bottom-right */
.rf-juxtapose-panel:last-child .rf-juxtapose-panel__name {
	right: 0.5rem;
}
.rf-juxtapose-panel__body {
	/* Content fills the panel */
}
.rf-juxtapose-panel__body img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* Hide meta tags inside panels */
.rf-juxtapose-panel > meta { display: none; }

/* ─── Toggle variant: labels only on buttons, not in panels ─── */
.rf-juxtapose--toggle .rf-juxtapose-panel__name {
	display: none;
}

/* ─── Slider divider (injected by behavior) ─── */
.rf-juxtapose__divider {
	position: absolute;
	z-index: 10;
	cursor: col-resize;
	touch-action: none;
}

/* Vertical orientation (left/right split) — default */
.rf-juxtapose:not([data-orientation="horizontal"]) .rf-juxtapose__divider {
	top: 0;
	bottom: 0;
	width: 3px;
	transform: translateX(-50%);
	background: var(--rf-color-bg, #fff);
	box-shadow: var(--rf-shadow-sm);
}

/* Horizontal orientation (top/bottom split) */
.rf-juxtapose[data-orientation="horizontal"] .rf-juxtapose__divider {
	left: 0;
	right: 0;
	height: 3px;
	transform: translateY(-50%);
	background: var(--rf-color-bg, #fff);
	box-shadow: var(--rf-shadow-sm);
	cursor: row-resize;
}

.rf-juxtapose__divider-handle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--rf-radius-full);
	background: var(--rf-color-bg, #fff);
	border: 2px solid var(--rf-color-border);
	box-shadow: var(--rf-shadow-md);
	display: flex;
	align-items: center;
	justify-content: center;
}

.rf-juxtapose__divider-handle::before {
	content: '\2194';  /* ↔ */
	font-size: 1rem;
	color: var(--rf-color-muted);
	line-height: 1;
}

.rf-juxtapose[data-orientation="horizontal"] .rf-juxtapose__divider-handle::before {
	content: '\2195';  /* ↕ */
}

.rf-juxtapose__divider:focus-visible {
	outline: 2px solid var(--rf-color-primary);
	outline-offset: 2px;
}

/* ─── Toggle bar (injected by behavior) ─── */
.rf-juxtapose__toggle-bar {
	display: flex;
	gap: 0.25rem;
	padding: 0.25rem;
	margin-bottom: 0.75rem;
	background: var(--rf-color-surface);
	border: 1px solid var(--rf-color-border);
	border-radius: var(--rf-radius-md);
	width: fit-content;
}

.rf-juxtapose__toggle-btn {
	padding: 0.375rem 1rem;
	border: none;
	border-radius: var(--rf-radius-sm);
	background: transparent;
	color: var(--rf-color-muted);
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}

.rf-juxtapose__toggle-btn:hover {
	color: var(--rf-color-text);
}

.rf-juxtapose__toggle-btn--active {
	background: var(--rf-color-bg, #fff);
	color: var(--rf-color-text);
	box-shadow: var(--rf-shadow-sm);
}

/* ─── Fade variant cursor hint ─── */
.rf-juxtapose--fade .rf-juxtapose__panels {
	cursor: pointer;
}


/* Lore */
.rf-lore {
	position: relative;
}

/* Content */
.rf-lore__content {
	transition: filter 0.3s ease;
}
.rf-lore__content ul,
.rf-lore__content ol {
	padding-left: 1.5rem;
}
.rf-lore__content blockquote {
	border-left: 2px solid var(--rf-color-primary);
	background: var(--rf-color-surface);
	border-radius: 0 var(--rf-radius-md) var(--rf-radius-md) 0;
	padding: 0.75rem 1.25rem;
	margin: 1rem 0;
	font-style: italic;
	color: var(--rf-color-muted);
	line-height: 1.6;
}
.rf-lore__content blockquote p {
	margin: 0;
}
.rf-lore > span[property="title"] {
	display: block;
	font-size: 1.5rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
	color: var(--rf-color-heading);
}

/* Spoiler mode */
.rf-lore--spoiler .rf-lore__content {
	filter: blur(5px);
	user-select: none;
}
.rf-lore--spoiler::after {
	content: 'Contains spoilers \2014 click to reveal';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 0.5rem 1rem;
	background: var(--rf-color-bg);
	border-radius: var(--rf-radius-md);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--rf-color-muted);
	cursor: pointer;
	z-index: 1;
}

/* Itinerary */
.rf-itinerary {
	margin: 2rem 0;
}
.rf-itinerary > header {
	margin-bottom: 1.5rem;
}

/* Day grouping */
.rf-itinerary-day {
	margin-bottom: 2rem;
}
.rf-itinerary-day:last-child {
	margin-bottom: 0;
}
.rf-itinerary-day__header {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--rf-color-text);
	margin-bottom: 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--rf-color-border);
}
.rf-itinerary-day__header:empty {
	display: none;
}
.rf-itinerary-day ol {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* Stop */
.rf-itinerary-stop {
	position: relative;
	padding-left: 2rem;
	padding-bottom: 1.5rem;
	border-left: 2px solid var(--rf-color-border);
	margin-left: 0.375rem;
}
.rf-itinerary-stop:last-child {
	border-left-color: transparent;
	padding-bottom: 0;
}
.rf-itinerary-stop::before {
	content: '';
	position: absolute;
	left: -0.4375rem;
	top: 0.25rem;
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 50%;
	background: var(--rf-color-primary);
	border: 2px solid var(--rf-color-bg);
	box-shadow: 0 0 0 2px var(--rf-color-primary);
}

/* Stop time */
.rf-itinerary-stop__time {
	display: block;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--rf-color-primary);
	letter-spacing: 0.02em;
	margin-bottom: 0.15rem;
}

/* Stop location */
.rf-itinerary-stop__location {
	display: block;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--rf-color-text);
	margin-bottom: 0.35rem;
}

/* Stop body */
.rf-itinerary-stop__body {
	font-size: 0.925rem;
	line-height: 1.65;
	color: var(--rf-color-muted);
}
.rf-itinerary-stop__body p:last-child {
	margin-bottom: 0;
}

/* Duration badge */
.rf-itinerary-stop[data-duration]::after {
	content: attr(data-duration);
	position: absolute;
	top: 0.15rem;
	right: 0;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--rf-color-muted);
	background: var(--rf-color-surface);
	padding: 0.1rem 0.5rem;
	border-radius: var(--rf-radius-sm);
}

/* Activity variant dots */
.rf-itinerary-stop--transport::before {
	background: var(--rf-color-info);
	box-shadow: 0 0 0 2px var(--rf-color-info);
}
.rf-itinerary-stop--food::before {
	background: var(--rf-color-warning);
	box-shadow: 0 0 0 2px var(--rf-color-warning);
}
.rf-itinerary-stop--sightseeing::before {
	background: var(--rf-color-primary);
	box-shadow: 0 0 0 2px var(--rf-color-primary);
}
.rf-itinerary-stop--lodging::before {
	background: var(--rf-color-success);
	box-shadow: 0 0 0 2px var(--rf-color-success);
}
.rf-itinerary-stop--activity::before {
	background: var(--rf-color-accent);
	box-shadow: 0 0 0 2px var(--rf-color-accent);
}
.rf-itinerary-stop--rest::before {
	background: var(--rf-color-muted);
	box-shadow: 0 0 0 2px var(--rf-color-muted);
}

/* Horizontal direction */
.rf-itinerary--horizontal .rf-itinerary-day ol {
	display: flex;
	gap: 2rem;
	overflow-x: auto;
	padding: 2rem 0 1rem;
}
.rf-itinerary--horizontal .rf-itinerary-stop {
	min-width: 14rem;
	padding-left: 0;
	padding-top: 1.5rem;
	padding-bottom: 0;
	border-left: none;
	border-top: 2px solid var(--rf-color-border);
	margin-left: 0;
}
.rf-itinerary--horizontal .rf-itinerary-stop:last-child {
	border-top-color: transparent;
}
.rf-itinerary--horizontal .rf-itinerary-stop::before {
	left: 0.5rem;
	top: -0.4375rem;
}
.rf-itinerary--horizontal .rf-itinerary-stop[data-duration]::after {
	position: static;
	display: inline-block;
	margin-top: 0.5rem;
}

/* Compact style */
.rf-itinerary--compact .rf-itinerary-stop__body {
	display: none;
}
.rf-itinerary--compact .rf-itinerary-stop {
	padding-bottom: 0.75rem;
}
.rf-itinerary--compact .rf-itinerary-stop__location {
	display: inline;
	font-size: 0.925rem;
}
.rf-itinerary--compact .rf-itinerary-stop__time {
	display: inline;
	margin-bottom: 0;
}
.rf-itinerary--compact .rf-itinerary-stop__time::after {
	content: ' — ';
}

/* ── Map Rune ── */

.rf-map {
	margin: 2rem 0;
	border-radius: var(--rf-radius-lg, 0.75rem);
	overflow: hidden;
}

/* Spacing variants */
.rf-map--spacing-flush { margin: 0; }
.rf-map--spacing-tight { margin: 0.5rem 0; }
.rf-map--spacing-loose { margin: 3rem 0; }
.rf-map--spacing-breathe { margin: 4rem 0; }

/* Height variants */
.rf-map--small .rf-map__container { height: 200px; }
.rf-map--medium .rf-map__container { height: 400px; }
.rf-map--large .rf-map__container { height: 600px; }
.rf-map--full .rf-map__container { height: 80vh; min-height: 400px; }

.rf-map__container {
	width: 100%;
	position: relative;
	background: var(--rf-color-surface, #f8f9fa);
}

/* Fallback list shown while Leaflet loads */
.rf-map__fallback {
	padding: 1.5rem;
	margin: 0;
	list-style: decimal inside;
	font-size: 0.925rem;
	color: var(--rf-color-muted);
}

.rf-map__fallback li {
	padding: 0.25rem 0;
}

.rf-map__fallback strong {
	color: var(--rf-color-text);
}

/* Accessible text list (visible to screen readers, hidden visually) */
.rf-map__pins {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* MapPin in fallback / a11y list */
.rf-map-pin {
	padding: 0.25rem 0;
}

.rf-map-pin__description {
	color: var(--rf-color-muted);
	font-style: italic;
}

.rf-map-pin__group {
	display: inline-block;
	font-size: 0.75rem;
	padding: 0.1rem 0.5rem;
	border-radius: var(--rf-radius-sm, 0.25rem);
	background: var(--rf-color-surface, #f0f0f0);
	color: var(--rf-color-muted);
	margin-left: 0.5rem;
}

/* Hide meta tags and property spans inside the map */
.rf-map meta,
.rf-map span[property] {
	display: none;
}

/* Leaflet popup overrides to match theme */
.rf-map .leaflet-popup-content-wrapper {
	border-radius: var(--rf-radius-md, 0.5rem);
	font-family: var(--rf-font-sans, inherit);
	font-size: 0.875rem;
	color: var(--rf-color-text);
}

.rf-map .leaflet-popup-content {
	margin: 0.75rem 1rem;
	line-height: 1.5;
}

.rf-map .leaflet-popup-content strong {
	display: block;
	font-size: 0.95rem;
	margin-bottom: 0.25rem;
}

.rf-map .leaflet-popup-content em {
	color: var(--rf-color-muted);
}

.rf-map .leaflet-popup-content small {
	color: var(--rf-color-muted);
	font-size: 0.8rem;
}

.rf-map .leaflet-popup-content a {
	color: var(--rf-color-primary);
	text-decoration: none;
}

.rf-map .leaflet-popup-content a:hover {
	text-decoration: underline;
}

/* Mockup — Device frame chrome around content */

.rf-mockup {
	--mockup-bezel-dark: #1a1a1a;
	--mockup-bezel-light: #e5e5e5;
	--mockup-bezel: var(--mockup-bezel-dark);
	--mockup-chrome: #2a2a2a;
	--mockup-chrome-text: #999;
	--mockup-scale: 1;
	display: block;
	width: 100%;
	container-type: inline-size;
	background-color: transparent;
}

/* Inside a placed showcase, let device frame use natural width */
.rf-showcase[data-place] .rf-mockup {
	width: auto;
	max-width: 100%;
	container-type: normal;
}
.rf-showcase[data-place] .rf-mockup__frame {
	zoom: var(--mockup-scale, 1);
}

/* ── Fit mode: none (native pixel size) ── */

.rf-mockup[data-fit="none"] {
	display: inline-block;
	width: auto;
	container-type: normal;
}

.rf-mockup[data-fit="none"] .rf-mockup__frame {
	zoom: normal;
	transform: scale(var(--mockup-scale, 1));
	transform-origin: top center;
	margin-inline: 0;
}

.rf-mockup[data-fit="none"].rf-mockup--browser,
.rf-mockup[data-fit="none"].rf-mockup--browser-dark {
	display: block;
}

/* ── Color modifiers ── */

.rf-mockup--dark {
	--mockup-bezel: var(--mockup-bezel-dark);
	--mockup-chrome: #2a2a2a;
	--mockup-chrome-text: #999;
}

.rf-mockup--light {
	--mockup-bezel: var(--mockup-bezel-light);
	--mockup-chrome: #f5f5f5;
	--mockup-chrome-text: #666;
}

.rf-mockup--auto {
	--mockup-bezel: var(--mockup-bezel-dark);
	--mockup-chrome: #2a2a2a;
	--mockup-chrome-text: #999;
}

/* ── Frame (wraps everything) ── */

.rf-mockup__frame {
	position: relative;
	margin-inline: auto;
	zoom: calc(var(--mockup-scale, 1) * min(1, tan(atan2(100cqi, var(--mockup-device-width, 100cqi)))));
}

/* ── Viewport (content area) ── */

.rf-mockup__viewport {
	overflow: auto;
	background: var(--rf-color-bg);
}
.rf-mockup__viewport img {
	display: block;
}

.rf-mockup__viewport > *:first-child {
	margin-top: 0;
}

.rf-mockup__viewport > *:last-child {
	margin-bottom: 0;
}

/* ── Label ── */

.rf-mockup__label {
	text-align: center;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--rf-color-muted);
	margin-top: 0.75rem;
}

/* ═══════════════════════════════════════
   MOBILE DEVICES
   ═══════════════════════════════════════ */

/* ── Bezel (mobile/tablet outer shell) ── */

.rf-mockup__bezel {
	background: var(--mockup-bezel);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* ── Notch variants ── */

.rf-mockup__notch {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
}

.rf-mockup__notch--dynamic-island {
	width: 120px;
	height: 34px;
	top: 12px;
	background: #000;
	border-radius: 20px;
}

.rf-mockup__notch--classic {
	width: 150px;
	height: 28px;
	top: 0;
	background: var(--mockup-bezel);
	border-radius: 0 0 20px 20px;
}

.rf-mockup__notch--punch-hole {
	width: 12px;
	height: 12px;
	top: 16px;
	background: #000;
	border-radius: var(--rf-radius-full);
}

/* ── Status bar ── */

.rf-mockup__status-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 1.5rem;
	height: 44px;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--rf-color-text);
	background: var(--rf-color-bg);
	position: relative;
	z-index: 1;
}

.rf-mockup__status-time {
	font-variant-numeric: tabular-nums;
}

.rf-mockup__status-icons::after {
	content: '\25CF\25CF\25CF \25AE 100%';
	font-size: 0.625rem;
	letter-spacing: 0.05em;
	color: var(--rf-color-muted);
}

/* ── Home indicator ── */

.rf-mockup__home-indicator {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 32px;
	background: var(--rf-color-bg);
}

.rf-mockup__home-indicator::after {
	content: '';
	display: block;
	width: 134px;
	height: 5px;
	background: var(--rf-color-text);
	border-radius: var(--rf-radius-full);
	opacity: 0.2;
}

/* ── iPhone 15 ── */

.rf-mockup--iphone-15 .rf-mockup__frame {
	--mockup-device-width: 393px;
	width: 393px;
	border-radius: 55px;
}

.rf-mockup--iphone-15 .rf-mockup__bezel {
	border-radius: 55px;
	border: 10px solid var(--mockup-bezel);
}

.rf-mockup--iphone-15 .rf-mockup__viewport {
	height: 852px;
	border-radius: 0;
}

/* ── iPhone SE ── */

.rf-mockup--iphone-se .rf-mockup__frame {
	--mockup-device-width: 375px;
	width: 375px;
	border-radius: 40px;
}

.rf-mockup--iphone-se .rf-mockup__bezel {
	border-radius: 40px;
	border: 10px solid var(--mockup-bezel);
	padding-bottom: 60px;
}

.rf-mockup--iphone-se .rf-mockup__notch--classic {
	position: relative;
	top: auto;
	left: auto;
	transform: none;
	width: 100%;
	height: 60px;
	background: var(--mockup-bezel);
	border-radius: 0;
}

.rf-mockup--iphone-se .rf-mockup__bezel::after {
	content: '';
	position: absolute;
	bottom: 14px;
	left: 50%;
	transform: translateX(-50%);
	width: 36px;
	height: 36px;
	border: 2px solid var(--mockup-chrome-text);
	border-radius: var(--rf-radius-full);
	opacity: 0.5;
}

.rf-mockup--iphone-se .rf-mockup__viewport {
	height: 667px;
}

/* ── Pixel ── */

.rf-mockup--pixel .rf-mockup__frame {
	--mockup-device-width: 412px;
	width: 412px;
	border-radius: 40px;
}

.rf-mockup--pixel .rf-mockup__bezel {
	border-radius: 40px;
	border: 8px solid var(--mockup-bezel);
}

.rf-mockup--pixel .rf-mockup__viewport {
	height: 915px;
}

/* ── Generic phone ── */

.rf-mockup--phone .rf-mockup__frame {
	--mockup-device-width: 390px;
	width: 390px;
	border-radius: 48px;
}

.rf-mockup--phone .rf-mockup__bezel {
	border-radius: 48px;
	border: 10px solid var(--mockup-bezel);
}

.rf-mockup--phone .rf-mockup__viewport {
	height: 844px;
}

/* ═══════════════════════════════════════
   TABLET DEVICES
   ═══════════════════════════════════════ */

/* ── iPad ── */

.rf-mockup--ipad .rf-mockup__frame {
	--mockup-device-width: 820px;
	width: 820px;
	border-radius: 24px;
}

.rf-mockup--ipad .rf-mockup__bezel {
	border-radius: 24px;
	border: 12px solid var(--mockup-bezel);
}

.rf-mockup--ipad .rf-mockup__viewport {
	height: 1180px;
}

/* ── Generic tablet ── */

.rf-mockup--tablet .rf-mockup__frame {
	--mockup-device-width: 800px;
	width: 800px;
	border-radius: 20px;
}

.rf-mockup--tablet .rf-mockup__bezel {
	border-radius: 20px;
	border: 14px solid var(--mockup-bezel);
}

.rf-mockup--tablet .rf-mockup__viewport {
	height: 1100px;
}

/* ═══════════════════════════════════════
   DESKTOP DEVICES
   ═══════════════════════════════════════ */

/* ── Title bar (browser / macbook) ── */

.rf-mockup__title-bar {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.625rem 1rem;
	background: var(--mockup-chrome);
	min-height: 2.5rem;
}

/* ── Traffic lights ── */

.rf-mockup__traffic-lights {
	display: flex;
	gap: 0.5rem;
	flex-shrink: 0;
}

.rf-mockup__traffic-light {
	display: block;
	width: 12px;
	height: 12px;
	border-radius: var(--rf-radius-full);
}

.rf-mockup__traffic-light--close {
	background: #ff5f57;
}

.rf-mockup__traffic-light--minimize {
	background: #febc2e;
}

.rf-mockup__traffic-light--maximize {
	background: #28c840;
}

/* ── Address bar (browser only) ── */

.rf-mockup__address-bar {
	flex: 1;
	display: flex;
	align-items: center;
	max-width: 60%;
	margin: 0 auto;
	padding: 0.25rem 0.75rem;
	background: rgba(255, 255, 255, 0.08);
	border-radius: var(--rf-radius-sm);
	min-height: 1.75rem;
}

.rf-mockup__url {
	font-size: 0.75rem;
	font-family: var(--rf-font-sans);
	color: var(--mockup-chrome-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ── Browser ── */

.rf-mockup--browser .rf-mockup__frame {
	width: 100%;
	border-radius: var(--rf-radius-lg) var(--rf-radius-lg) 0 0;
	overflow: hidden;
}

.rf-mockup--browser .rf-mockup__title-bar {
	border-radius: var(--rf-radius-lg) var(--rf-radius-lg) 0 0;
}

.rf-mockup--browser .rf-mockup__viewport {
	min-height: 12rem;
	border: 1px solid var(--rf-color-border);
	border-top: none;
}

/* ── Browser dark ── */

.rf-mockup--browser-dark .rf-mockup__frame {
	width: 100%;
	border-radius: var(--rf-radius-lg) var(--rf-radius-lg) 0 0;
	overflow: hidden;
}

.rf-mockup--browser-dark .rf-mockup__title-bar {
	background: #1a1a1a;
	border-radius: var(--rf-radius-lg) var(--rf-radius-lg) 0 0;
}

.rf-mockup--browser-dark .rf-mockup__address-bar {
	background: rgba(255, 255, 255, 0.06);
}

.rf-mockup--browser-dark .rf-mockup__viewport {
	min-height: 12rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-top: none;
}

/* ── MacBook ── */

.rf-mockup--macbook .rf-mockup__frame {
	--mockup-device-width: 1440px;
	width: 1440px;
}

.rf-mockup--macbook .rf-mockup__title-bar {
	border-radius: var(--rf-radius-md) var(--rf-radius-md) 0 0;
	border: 3px solid var(--mockup-bezel);
	border-bottom: none;
}

.rf-mockup--macbook .rf-mockup__viewport {
	min-height: 12rem;
	border: 3px solid var(--mockup-bezel);
	border-top: none;
	border-bottom: none;
}

/* ── Keyboard ── */

.rf-mockup__keyboard {
	background: linear-gradient(to bottom, var(--mockup-bezel), color-mix(in srgb, var(--mockup-bezel), #000 15%));
	padding: 0.5rem 2rem 0.75rem;
	border-radius: 0 0 var(--rf-radius-md) var(--rf-radius-md);
	display: flex;
	justify-content: center;
}

.rf-mockup__trackpad {
	width: 40%;
	height: 6px;
	background: color-mix(in srgb, var(--mockup-bezel), #fff 10%);
	border-radius: var(--rf-radius-full);
	margin-top: 0.25rem;
}

/* ═══════════════════════════════════════
   SPECIAL DEVICES
   ═══════════════════════════════════════ */

/* ── Watch ── */

.rf-mockup--watch .rf-mockup__frame {
	--mockup-device-width: 198px;
	width: 198px;
	border-radius: 40px;
	position: relative;
}

.rf-mockup--watch .rf-mockup__bezel {
	border-radius: 40px;
	border: 14px solid var(--mockup-bezel);
}

.rf-mockup--watch .rf-mockup__bezel::after {
	content: '';
	position: absolute;
	right: -6px;
	top: 35%;
	width: 6px;
	height: 28px;
	background: var(--mockup-bezel);
	border-radius: 0 3px 3px 0;
}

.rf-mockup--watch .rf-mockup__viewport {
	height: 242px;
	border-radius: 26px;
}

/* ── None (no frame) ── */

.rf-mockup--none .rf-mockup__viewport {
	border: 1px dashed var(--rf-color-border);
	border-radius: var(--rf-radius-sm);
}

/* ═══════════════════════════════════════
   CONTEXT: inside preview
   ═══════════════════════════════════════ */

.rf-grid .rf-mockup {
	justify-self: center;
}
.rf-preview .rf-mockup {
	margin: 0;
}

/* ═══════════════════════════════════════
   DARK MODE
   ═══════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
	.rf-mockup--auto {
		--mockup-bezel: var(--mockup-bezel-light);
		--mockup-chrome: #3a3a3a;
		--mockup-chrome-text: #aaa;
	}

	.rf-mockup--light .rf-mockup__address-bar {
		background: rgba(0, 0, 0, 0.15);
	}
}

/* Nav */
.rf-nav {
	padding: 0.5rem 0;
}
.rf-nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.rf-nav li {
	padding: 0.0625rem 0;
}
.rf-nav-group {
	margin-bottom: 1.75rem;
}
.rf-nav-group h2,
.rf-nav-group h3 {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--rf-color-muted);
	margin-top: 0;
	margin-bottom: 0.5rem;
	padding-left: 0.75rem;
	font-weight: 600;
}
.rf-nav-item__link {
	display: block;
	padding: 0.375rem 0.75rem;
	border-radius: var(--rf-radius-sm);
	color: var(--rf-color-text);
	text-decoration: none;
	font-size: 0.85rem;
	transition: background-color 150ms ease, color 150ms ease;
}
.rf-nav-item__link:hover {
	background: var(--rf-color-surface);
	color: var(--rf-color-text);
	text-decoration: none;
}
.rf-nav-item__link--active {
	background: var(--rf-color-info-bg);
	color: var(--rf-color-primary);
	font-weight: 600;
}
.rf-nav-item {
	padding: 0.375rem 0.75rem;
	font-size: 0.85rem;
	color: var(--rf-color-muted);
}

/* Organization */
.rf-organization__type {
	font-size: 0.75rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--rf-color-muted);
	opacity: 0.6;
	margin-bottom: 0.5rem;
}
.rf-organization__body img {
	max-height: 80px;
	width: auto;
	margin-bottom: 1rem;
}
.rf-organization__body ul,
.rf-organization__body ol {
	padding-left: 1.5rem;
}
.rf-organization__body a { color: var(--rf-color-primary); }
.rf-organization__body a:hover { color: var(--rf-color-primary-hover); }

/* PageSection */
.rf-page-section {
	padding: 3rem 0;
}
.rf-page-section > h1:first-child,
.rf-page-section > h2:first-child {
	margin-top: 0;
}
.rf-page-section--split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: start;
}

@media (max-width: 768px) {
	.rf-page-section--split {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
}

/* Playlist */

/* Inner header (headline + description) inside content */
.rf-playlist__content > .rf-playlist__header {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.25rem;
	margin-bottom: 1rem;
}
.rf-playlist__headline {
	margin: 0;
}
.rf-playlist__content > .rf-playlist__header p {
	margin: 0;
	font-size: 0.925rem;
	color: var(--rf-color-muted);
	line-height: 1.5;
}

/* Tracks list wrapper */
.rf-playlist__tracks {
	list-style: none;
	padding: 0;
	margin: 0;
	counter-reset: track;
	border: 1px solid var(--rf-color-border);
	border-radius: var(--rf-radius-md);
	overflow: hidden;
}

/* Track items — override sequence dimension's absolute positioning */
.rf-playlist__tracks > li {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	padding: 0.75rem 1.25rem;
	padding-left: 1.25rem;
	position: static;
	transition: background 0.15s ease;
}
/* Hide meta elements from flex layout */
.rf-playlist__tracks > li > meta {
	display: none;
}
.rf-playlist__tracks > li + li {
	border-top: 1px solid var(--rf-color-border);
}
.rf-playlist__tracks > li:hover {
	background: color-mix(in srgb, var(--rf-color-border) 15%, transparent);
}
.rf-playlist__tracks > li::before {
	position: static;
	width: auto;
	height: auto;
	min-width: 1.5rem;
	font-size: 0.8rem;
	font-variant-numeric: tabular-nums;
	color: var(--rf-color-muted);
	background: none;
	border-radius: 0;
	text-align: right;
	flex-shrink: 0;
}

/* Track name */
.rf-playlist__tracks [data-name="track-name"] {
	flex: 1;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--rf-color-text);
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Track artist */
.rf-playlist__tracks [data-name="track-artist"] {
	font-size: 0.8125rem;
	color: var(--rf-color-muted);
	flex-shrink: 0;
}
.rf-playlist__tracks [data-name="track-artist"]::before {
	content: '\00b7';
	margin-right: 0.5rem;
	opacity: 0.5;
}

/* Track duration — pushed right */
.rf-playlist__tracks [data-name="track-duration"] {
	font-size: 0.8125rem;
	color: var(--rf-color-muted);
	font-variant-numeric: tabular-nums;
	flex-shrink: 0;
	margin-left: auto;
	min-width: 3rem;
	text-align: right;
}

/* Track meta (date etc.) */
.rf-playlist__tracks [data-name="track-meta"] {
	font-size: 0.75rem;
	color: var(--rf-color-muted);
	flex-shrink: 0;
}
.rf-playlist__tracks [data-name="track-meta"]::before {
	content: '\00b7';
	margin-right: 0.5rem;
	opacity: 0.5;
}

/* Player area */
.rf-playlist__player {
	padding: 0.75rem 0;
	margin-top: 0.5rem;
}

/* Media zone — domain-specific cover art overrides (base styles in split.css) */
.rf-playlist__media img {
	aspect-ratio: 1;
	object-fit: cover;
}

/* Hide secondary columns on narrow screens */
@media (max-width: 480px) {
	.rf-playlist__tracks [data-name="track-artist"],
	.rf-playlist__tracks [data-name="track-meta"] {
		display: none;
	}
}

/* Plot */
.rf-plot {
	display: flex;
	flex-direction: column;
}
.rf-plot > span[property="name"] {
	display: block;
	font-size: 1.5rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
	color: var(--rf-color-heading);
}

/* Description */
.rf-plot > p {
	color: var(--rf-color-muted);
	margin-bottom: 1rem;
	margin-top: 0;
}

/* Beats list */
.rf-plot ol {
	list-style: none;
	padding-left: 0;
	margin: 1rem 0 0;
}

/* Beat — all variants use left padding with dot at left: 0 */
.rf-beat {
	position: relative;
	padding: 0.625rem 0 0.625rem 2.25rem;
}
.rf-beat + .rf-beat {
	border-top: 1px solid var(--rf-color-border);
}
.rf-beat::before {
	content: '';
	position: absolute;
	left: 0.375rem;
	top: 1rem;
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 50%;
	background: var(--rf-color-surface-active);
	border: 2px solid var(--rf-color-bg);
	box-shadow: 0 0 0 2px var(--rf-color-surface-active);
}
.rf-beat > span[data-field="label"] {
	font-weight: 600;
	font-size: 1rem;
	color: var(--rf-color-heading);
}
.rf-beat__body {
	margin-top: 0.25rem;
	font-size: 0.9375rem;
	color: var(--rf-color-muted);
	line-height: 1.6;
}
.rf-beat__body p {
	margin: 0;
}

.rf-plot--linear ol {
	margin-top: 1.5rem;
}
/* Linear variant — connector line matching timeline pattern */
.rf-plot--linear .rf-beat {
	padding: 0 0 2rem 2rem;
	border-left: 2px solid var(--rf-color-border);
	margin-left: 0.375rem;
}
.rf-plot--linear .rf-beat::before {
	left: -0.4375rem;
	top: 0.125rem;
}
.rf-plot--linear .rf-beat > span[data-field="label"] {
	line-height: 1;
	display: block;
	margin-top: -0.5rem;
}
.rf-plot--linear .rf-beat + .rf-beat {
	border-top: none;
}
.rf-plot--linear .rf-beat:last-child {
	border-left-color: transparent;
	padding-bottom: 0;
}

/* Beat status variants */
.rf-beat--complete::before {
	background: var(--rf-color-success);
	box-shadow: 0 0 0 2px var(--rf-color-success);
}
.rf-beat--complete > span[data-field="label"] {
	color: var(--rf-color-muted);
}

.rf-beat--active::before {
	background: var(--rf-color-primary);
	box-shadow: 0 0 0 2px var(--rf-color-primary), 0 0 0 5px color-mix(in srgb, var(--rf-color-primary) 20%, transparent);
}
.rf-beat--active > span[data-field="label"] {
	color: var(--rf-color-primary);
}

.rf-beat--planned::before {
	background: var(--rf-color-surface-active);
}

.rf-beat--abandoned > span[data-field="label"] {
	text-decoration: line-through;
	color: var(--rf-color-muted);
}
.rf-beat--abandoned::before {
	background: var(--rf-color-muted);
	box-shadow: 0 0 0 2px var(--rf-color-muted);
}

/* Preview — Component showcase with theme toggle and width control */
.rf-preview {
	margin: 2rem 0;
}

/* Toolbar — transparent, controls float above the canvas */
.rf-preview__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.25rem 0.25rem 0.5rem;
	min-height: 2rem;
}
.rf-preview__title {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--rf-color-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* Controls container (view toggle + theme toggle) */
.rf-preview__controls {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/* View toggle pill (code/preview) */
.rf-preview__view-toggle {
	display: flex;
	gap: 0.125rem;
	background: var(--rf-color-surface-active);
	border-radius: var(--rf-radius-full);
	padding: 0.125rem;
}

/* Theme toggle pill */
.rf-preview__toggle {
	display: flex;
	gap: 0.125rem;
	background: var(--rf-color-surface-active);
	border-radius: var(--rf-radius-full);
	padding: 0.125rem;
}
.rf-preview__toggle-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.625rem;
	height: 1.625rem;
	border: none;
	border-radius: var(--rf-radius-full);
	background: transparent;
	color: var(--rf-color-muted);
	cursor: pointer;
	transition: background 150ms ease, color 150ms ease;
	padding: 0;
}
.rf-preview__toggle-btn:hover {
	color: var(--rf-color-text);
}
.rf-preview__toggle-btn--active {
	background: var(--rf-color-bg);
	color: var(--rf-color-text);
	box-shadow: var(--rf-shadow-xs);
}

/* Canvas — framed area for the preview content */
.rf-preview__canvas {
	padding: 2rem 2.5rem;
	background: var(--rf-color-bg);
	color: var(--rf-color-text);
	border: 1px solid var(--rf-color-border);
	border-radius: var(--rf-radius-lg);
	overflow: hidden;
}
.rf-preview__canvas:has(.rf-mockup) {
	text-align: center;
}
.rf-preview__canvas > *:first-child {
	margin-top: 0;
}
.rf-preview__canvas > *:last-child {
	margin-bottom: 0;
}

/* Viewport simulation toggle pill */
.rf-preview__viewport-toggle {
	display: flex;
	gap: 0.125rem;
	background: var(--rf-color-surface-active);
	border-radius: var(--rf-radius-full);
	padding: 0.125rem;
}

/* Viewport simulation frame */
.rf-preview__viewport-frame {
	position: relative;
	overflow: hidden;
	transition: max-width 300ms ease;
}
.rf-preview__viewport-frame--constrained {
	margin: 0 auto;
	border: 1px dashed var(--rf-color-border);
	border-radius: var(--rf-radius-sm);
}
.rf-preview__viewport-label {
	position: absolute;
	top: 0.25rem;
	right: 0.5rem;
	font-size: 0.625rem;
	color: var(--rf-color-muted);
	font-variant-numeric: tabular-nums;
	pointer-events: none;
	z-index: 1;
}

/* Source code view — bordered frame matching the canvas */
.rf-preview__source {
	overflow: hidden;
	border: 1px solid var(--rf-color-border);
	border-radius: var(--rf-radius-lg);
}
.rf-preview__source pre {
	margin: 0;
	border-radius: 0;
}
.rf-preview__source .rf-codeblock,
.rf-preview__source .rf-code-wrapper {
	border-radius: 0;
}

/* Source tabs (data-source panels) */
.rf-preview__source-tabs {
	display: flex;
	gap: 0;
	background: var(--rf-color-surface);
}
.rf-preview__source-tab {
	padding: 0.5rem 1rem;
	border: none;
	background: transparent;
	color: var(--rf-color-muted);
	font-size: 0.75rem;
	font-weight: 500;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	transition: color 150ms ease, border-color 150ms ease;
}
.rf-preview__source-tab:hover {
	color: var(--rf-color-text);
}
.rf-preview__source-tab--active {
	color: var(--rf-color-text);
	border-bottom-color: var(--rf-color-primary);
}

/* Small containers: edge-to-edge bleed */
@container (max-width: 1280px) {
	.rf-preview__toolbar {
		padding: 0.25rem var(--rf-content-padding, 1.5rem) 0.5rem;
	}
	.rf-preview__canvas {
		border-radius: 0;
		border-left: none;
		border-right: none;
		padding: 1.5rem var(--rf-content-padding, 1.5rem);
	}
	.rf-preview__source {
		border-radius: 0;
	}
	/* Break out of feature's padding-inline to reach viewport edges */
	.rf-preview--in-feature {
		margin-inline: calc(-1 * var(--rf-content-gutter, 1.5rem));
	}
	.rf-preview--in-feature .rf-preview__toolbar {
		padding-inline: var(--rf-content-gutter, 1.5rem);
	}
}

/* Pricing */
.rf-pricing {
	padding: 2rem 0;
}
.rf-pricing > header,
.rf-pricing__preamble {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.25rem;
	text-align: center;
	margin-bottom: 2rem;
}
.rf-pricing > header h1,
.rf-pricing__headline {
	margin-top: 0;
}
.rf-pricing__eyebrow {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--rf-color-primary);
	margin: 0 0 0.5rem;
}
.rf-pricing__eyebrow:has(a) {
	display: inline-block;
	position: relative;
	padding: 0.25rem 0.875rem;
	border: 1px solid var(--rf-color-border);
	border-radius: var(--rf-radius-full);
	color: var(--rf-color-text);
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	transition: border-color 150ms ease;
}
.rf-pricing__eyebrow:has(a):hover { border-color: var(--rf-color-muted); }
.rf-pricing__eyebrow:has(a) a { color: var(--rf-color-primary); font-weight: 600; text-decoration: none; }
.rf-pricing__eyebrow:has(a) a::before { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.rf-pricing__blurb {
	color: var(--rf-color-muted);
	margin-bottom: 0;
}
.rf-pricing__image {
	margin-bottom: 1rem;
}
.rf-pricing__tiers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.5rem;
	list-style: none;
	padding: 0;
	margin: 0;
}
.rf-pricing > ul[data-layout="grid"] {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.5rem;
	list-style: none;
	padding: 0;
	margin: 0;
}
.rf-tier {
	border: 1px solid var(--rf-color-border);
	border-radius: var(--rf-radius-md);
	padding: 2rem;
	background: var(--rf-color-bg);
	display: flex;
	flex-direction: column;
	transition: box-shadow 200ms ease;
}
.rf-tier:hover {
	box-shadow: var(--rf-shadow-md);
}
.rf-tier--featured {
	border-color: var(--rf-color-primary);
	box-shadow: var(--rf-shadow-lg);
}
.rf-tier h1[property="name"] {
	margin: 0 0 0.5rem;
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--rf-color-muted);
}
.rf-tier p[property="price"] {
	font-size: 2.5rem;
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--rf-color-text);
	margin-bottom: 1.5rem;
	line-height: 1.1;
}
.rf-tier__body {
	flex: 1;
}
.rf-tier__body ul {
	list-style: none;
	padding-left: 0;
	margin: 0 0 1.5rem;
}
.rf-tier__body li {
	padding: 0.375rem 0;
	font-size: 0.9rem;
	color: var(--rf-color-muted);
}
.rf-tier__body li::before {
	content: '\2713';
	margin-right: 0.5rem;
	color: var(--rf-color-success);
	font-weight: 600;
}
.rf-tier__body a {
	display: block;
	text-align: center;
	padding: 0.625rem 1.5rem;
	border-radius: var(--rf-radius-sm);
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
	transition: background-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
	margin-top: auto;
}
.rf-tier:not(.rf-tier--featured) a {
	background: var(--rf-color-surface);
	color: var(--rf-color-text);
	border: 1px solid var(--rf-color-border);
}
.rf-tier:not(.rf-tier--featured) a:hover {
	background: var(--rf-color-surface-hover);
	text-decoration: none;
}
.rf-tier--featured a {
	background: var(--rf-color-primary);
	color: white;
}
.rf-tier--featured a:hover {
	background: var(--rf-color-primary-hover);
	box-shadow: var(--rf-shadow-sm);
	transform: translateY(-1px);
	text-decoration: none;
}
.rf-tier__body p:has(a) {
	margin-bottom: 0;
}

/* Sandbox — Isolated HTML/CSS/JS rendering via iframe */
.rf-sandbox {
	border-radius: var(--rf-radius-md);
	overflow: hidden;
}

.rf-sandbox iframe {
	display: block;
	width: 100%;
	border: none;
}

/* Static fallback (pre/code shown before hydration) */
.rf-sandbox pre {
	margin: 0;
}

/* When inside preview, remove sandbox margin */
.rf-preview .rf-sandbox {
	margin: 0;
	border-radius: 0;
}

/* Realm */
.rf-realm {
	display: flex;
	flex-direction: column;
}

/* Scene image — base styles deferred to shared [data-section="media"] in split.css */
.rf-realm__scene {
	margin-bottom: var(--rf-spacing-md);
}

/* Content */
.rf-realm__sections {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.rf-realm__content ul,
.rf-realm__content ol {
	padding-left: 1.5rem;
}
.rf-realm > span[property="name"] {
	display: block;
	font-size: 1.5rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
	color: var(--rf-color-heading);
}

/* Realm Section */
.rf-realm-section {
	padding: 0.75rem 0;
	border-top: 1px solid var(--rf-color-border);
}
.rf-realm-section__name {
	display: block;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	margin-bottom: 0.5rem;
	color: var(--rf-color-heading);
}
.rf-realm-section__body ul,
.rf-realm-section__body ol {
	padding-left: 1.5rem;
}

/* Split layout — shared */
.rf-realm[data-layout="split"],
.rf-realm[data-layout="split-reverse"] {
	display: grid;
	grid-template-columns: var(--split-ratio, 1fr 1fr);
	column-gap: var(--split-gap, 2rem);
	align-items: var(--split-valign, start);
}
/* Split: badge + name + content left (col 1), scene right (col 2) */
.rf-realm[data-layout="split"] > .rf-realm__badge {
	grid-column: 1;
	grid-row: 1;
}
.rf-realm[data-layout="split"] > span[property="name"] {
	grid-column: 1;
	grid-row: 2;
}
.rf-realm[data-layout="split"] > .rf-realm__content {
	grid-column: 1;
	grid-row: 3;
}
.rf-realm[data-layout="split"] > .rf-realm__scene {
	grid-column: 2;
	grid-row: 1 / 4;
	margin: 0;
}
/* Split-reverse: scene left (col 1), badge + name + content right (col 2) */
.rf-realm[data-layout="split-reverse"] > .rf-realm__badge {
	grid-column: 2;
	grid-row: 1;
}
.rf-realm[data-layout="split-reverse"] > span[property="name"] {
	grid-column: 2;
	grid-row: 2;
}
.rf-realm[data-layout="split-reverse"] > .rf-realm__content {
	grid-column: 2;
	grid-row: 3;
}
.rf-realm[data-layout="split-reverse"] > .rf-realm__scene {
	grid-column: 1;
	grid-row: 1 / 4;
	margin: 0;
}
/* Collapse to single column on small screens */
@media (max-width: 640px) {
	.rf-realm[data-layout="split"],
	.rf-realm[data-layout="split-reverse"] {
		grid-template-columns: 1fr;
	}
	.rf-realm[data-layout="split"] > .rf-realm__badge,
	.rf-realm[data-layout="split"] > span[property="name"],
	.rf-realm[data-layout="split"] > .rf-realm__content,
	.rf-realm[data-layout="split"] > .rf-realm__scene,
	.rf-realm[data-layout="split-reverse"] > .rf-realm__badge,
	.rf-realm[data-layout="split-reverse"] > span[property="name"],
	.rf-realm[data-layout="split-reverse"] > .rf-realm__content,
	.rf-realm[data-layout="split-reverse"] > .rf-realm__scene {
		grid-column: auto;
		grid-row: auto;
	}
	/* Only add margin when NOT in full-bleed media-position mode (shared split.css handles that) */
	.rf-realm[data-layout="split"]:not([data-media-position="top"]) > .rf-realm__scene,
	.rf-realm[data-layout="split-reverse"]:not([data-media-position="top"]) > .rf-realm__scene {
		margin-bottom: var(--rf-spacing-md);
	}
}
/* Reset grid placement when data-collapse triggers single-column from shared split.css */
@media (max-width: 640px) {
	.rf-realm[data-collapse="sm"] > .rf-realm__badge,
	.rf-realm[data-collapse="sm"] > span[property="name"],
	.rf-realm[data-collapse="sm"] > .rf-realm__content,
	.rf-realm[data-collapse="sm"] > .rf-realm__scene {
		grid-column: auto;
		grid-row: auto;
	}
	.rf-realm[data-collapse="sm"]:not([data-media-position="top"]) > .rf-realm__scene {
		margin-bottom: var(--rf-spacing-md);
	}
}
@media (max-width: 768px) {
	.rf-realm[data-collapse="md"] > .rf-realm__badge,
	.rf-realm[data-collapse="md"] > span[property="name"],
	.rf-realm[data-collapse="md"] > .rf-realm__content,
	.rf-realm[data-collapse="md"] > .rf-realm__scene {
		grid-column: auto;
		grid-row: auto;
	}
	.rf-realm[data-collapse="md"]:not([data-media-position="top"]) > .rf-realm__scene {
		margin-bottom: var(--rf-spacing-md);
	}
}
@media (max-width: 1024px) {
	.rf-realm[data-collapse="lg"] > .rf-realm__badge,
	.rf-realm[data-collapse="lg"] > span[property="name"],
	.rf-realm[data-collapse="lg"] > .rf-realm__content,
	.rf-realm[data-collapse="lg"] > .rf-realm__scene {
		grid-column: auto;
		grid-row: auto;
	}
	.rf-realm[data-collapse="lg"]:not([data-media-position="top"]) > .rf-realm__scene {
		margin-bottom: var(--rf-spacing-md);
	}
}

/* Split layout scene gets subtle depth */
.rf-realm[data-layout="split"] .rf-realm__scene img,
.rf-realm[data-layout="split-reverse"] .rf-realm__scene img {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Recipe — editorial cookbook aesthetic */

.rf-recipe .rf-recipe__eyebrow {
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--rf-color-primary);
	margin: 0 0 0.375rem;
}
.rf-recipe__headline {
	margin-top: 0;
	margin-bottom: 0.25rem;
}
.rf-recipe .rf-recipe__blurb {
	color: var(--rf-color-muted);
	margin-bottom: 0;
	max-width: 40rem;
}
.rf-recipe__image {
	margin-bottom: 1rem;
}

/* Content wrapper */
.rf-recipe__content {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
}

/* Ingredients — surfaced zone with custom markers */
.rf-recipe__content ul {
	background: var(--rf-color-surface);
	border: 1px solid var(--rf-color-border);
	border-radius: var(--rf-radius-md);
	padding: 1.25rem 1.25rem 1.25rem 2.5rem;
	list-style: disc;
	margin: 0;
}
.rf-recipe__content ul li {
	padding: 0.2rem 0;
	line-height: 1.6;
}
.rf-recipe__content ul li::marker {
	color: var(--rf-color-primary);
}

/* Steps — numbered with styled counters */
.rf-recipe__content ol {
	padding-left: 0;
	margin: 0;
	list-style: none;
	counter-reset: recipe-step;
}
.rf-recipe__content ol > li {
	counter-increment: recipe-step;
	padding: 0.625rem 0;
	padding-left: 2.25rem;
	position: relative;
	line-height: 1.65;
}
.rf-recipe__content ol > li + li {
	border-top: 1px solid var(--rf-color-border);
}
.rf-recipe__content ol > li::before {
	content: counter(recipe-step);
	position: absolute;
	left: 0;
	top: 0.625rem;
	width: 1.5rem;
	height: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--rf-color-primary);
	background: var(--rf-color-surface);
	border-radius: var(--rf-radius-full);
}

.rf-recipe__content ol > li > p,
.rf-recipe__content ul > li > p {
	margin: 0;
}

/* Tips — callout accent like hint */
.rf-recipe__content blockquote {
	border-left: 2px solid var(--rf-color-primary);
	background: var(--rf-color-surface);
	border-radius: 0 var(--rf-radius-md) var(--rf-radius-md) 0;
	padding: 0.75rem 1.25rem;
	margin: 0;
	font-size: 0.9125rem;
	font-style: italic;
	color: var(--rf-color-muted);
	line-height: 1.6;
}
.rf-recipe__content blockquote p {
	margin: 0;
}

/* Media zone — domain-specific overrides (base styles in split.css) */
.rf-recipe__media img {
	border-radius: var(--rf-radius-lg);
}

/* Reveal */
.rf-reveal__preamble {
	margin-bottom: 1.5rem;
}
.rf-reveal__eyebrow {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--rf-color-primary);
	margin: 0 0 0.5rem;
}
.rf-reveal__eyebrow:has(a) {
	display: inline-block;
	position: relative;
	padding: 0.25rem 0.875rem;
	border: 1px solid var(--rf-color-border);
	border-radius: var(--rf-radius-full);
	color: var(--rf-color-text);
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	transition: border-color 150ms ease;
}
.rf-reveal__eyebrow:has(a):hover { border-color: var(--rf-color-muted); }
.rf-reveal__eyebrow:has(a) a { color: var(--rf-color-primary); font-weight: 600; text-decoration: none; }
.rf-reveal__eyebrow:has(a) a::before { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.rf-reveal__headline {
	margin-top: 0;
}
.rf-reveal__blurb {
	color: var(--rf-color-muted);
	margin-bottom: 0;
}
.rf-reveal__image {
	margin-bottom: 1rem;
}
.rf-reveal__steps {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.rf-reveal-step {
	transition: opacity 0.3s ease, transform 0.3s ease;
}
.rf-reveal-step--visible {
	opacity: 1;
	transform: translateY(0);
}
.rf-reveal-step--hidden {
	opacity: 0;
	height: 0;
	overflow: hidden;
	margin: 0;
	transform: translateY(0.5rem);
}
.rf-reveal-step__content {
	padding: 1rem 0;
	border-bottom: 1px solid var(--rf-color-border);
}
.rf-reveal-step__title {
	font-size: 1.125rem;
	font-weight: 600;
	margin: 0 0 0.5rem;
}
.rf-reveal-step__body > span[property],
.rf-reveal-step__body > meta { display: none; }
.rf-reveal-step__body p:last-child { margin-bottom: 0; }
.rf-reveal__next,
.rf-reveal__reset {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1rem;
	padding: 0.5rem 1.25rem;
	border: 1px solid var(--rf-color-border);
	border-radius: var(--rf-radius-md);
	background: var(--rf-color-surface);
	color: var(--rf-color-text);
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s;
}
.rf-reveal__next:hover,
.rf-reveal__reset:hover {
	background: var(--rf-color-border);
}

/* Sidenote */
.rf-sidenote {
	margin: 1rem 0;
	font-size: 0.875rem;
	line-height: 1.6;
}
.rf-sidenote--sidenote {
	border-left: 3px solid var(--rf-color-primary);
	padding: 0.75rem 1rem;
	background: var(--rf-color-info-bg);
	border-radius: 0 var(--rf-radius-md) var(--rf-radius-md) 0;
	color: var(--rf-color-muted);
}
.rf-sidenote--footnote {
	border-top: 1px solid var(--rf-color-border);
	padding-top: 0.75rem;
	margin-top: 2rem;
	color: var(--rf-color-muted);
}
.rf-sidenote--tooltip {
	background: var(--rf-color-surface-hover);
	border: 1px solid var(--rf-color-border);
	border-radius: var(--rf-radius-md);
	padding: 0.75rem 1rem;
	color: var(--rf-color-muted);
}
.rf-sidenote__body p { margin: 0; }
.rf-sidenote__body p + p { margin-top: 0.5rem; }

/* Steps */
.rf-steps {
	counter-reset: step;
}
.rf-steps__preamble {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.25rem;
	margin-bottom: 1.5rem;
}
.rf-steps__eyebrow {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--rf-color-primary);
	margin: 0 0 0.5rem;
}
.rf-steps__eyebrow:has(a) {
	display: inline-block;
	position: relative;
	padding: 0.25rem 0.875rem;
	border: 1px solid var(--rf-color-border);
	border-radius: var(--rf-radius-full);
	color: var(--rf-color-text);
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	transition: border-color 150ms ease;
}
.rf-steps__eyebrow:has(a):hover { border-color: var(--rf-color-muted); }
.rf-steps__eyebrow:has(a) a { color: var(--rf-color-primary); font-weight: 600; text-decoration: none; }
.rf-steps__eyebrow:has(a) a::before { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.rf-steps__headline {
	margin-top: 0;
}
.rf-steps__blurb {
	color: var(--rf-color-muted);
	margin-bottom: 0;
}
.rf-steps__image {
	margin-bottom: 1rem;
}
.rf-steps ol {
	list-style: none;
	padding-left: 0;
	margin: 0;
}
.rf-step__content {
	display: contents;
}

/* Individual step — borderless, matching recipe */
.rf-step {
	counter-increment: step;
	position: relative;
	padding: 0.625rem 0 0.625rem 2.25rem;
}
.rf-step + .rf-step {
	border-top: 1px solid var(--rf-color-border);
}
.rf-step::before {
	content: counter(step);
	position: absolute;
	left: 0;
	top: 0.625rem;
	width: 1.5rem;
	height: 1.5rem;
	background: var(--rf-color-surface);
	color: var(--rf-color-primary);
	border-radius: var(--rf-radius-full);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
}
.rf-step h1,
.rf-step h2,
.rf-step h3,
.rf-step h4,
.rf-step h5,
.rf-step h6,
.rf-step strong {
	display: block;
	margin-top: 0;
	margin-bottom: 0.375rem;
}
.rf-step pre {
	margin-top: 0;
}
.rf-step > p:first-of-type {
	margin-top: 0;
}
.rf-step p {
	font-size: 0.925rem;
	line-height: 1.65;
}
.rf-step__media {
	border-radius: var(--rf-radius-md);
	overflow: hidden;
}

/* Storyboard */
.rf-storyboard__panels {
	display: grid;
	grid-template-columns: repeat(var(--sb-columns, 3), 1fr);
	gap: 1rem;
}
/* Clean style */
.rf-storyboard--clean .rf-storyboard-panel {
	border: 1px solid var(--rf-color-border);
	border-radius: var(--rf-radius-md);
	overflow: hidden;
}
.rf-storyboard--clean .rf-storyboard-panel__body {
	padding: 0.75rem;
}
/* Comic style */
.rf-storyboard--comic .rf-storyboard-panel {
	border: 3px solid var(--rf-color-text);
	border-radius: 0.25rem;
	overflow: hidden;
	transform: rotate(-0.5deg);
}
.rf-storyboard--comic .rf-storyboard-panel:nth-child(even) {
	transform: rotate(0.5deg);
}
.rf-storyboard--comic .rf-storyboard-panel__body {
	padding: 0.5rem;
}
.rf-storyboard--comic .rf-storyboard-panel__body p {
	font-family: 'Comic Sans MS', 'Chalkboard SE', cursive;
	font-size: 0.9375rem;
	text-align: center;
	margin: 0.5rem 0 0;
}
/* Polaroid style */
.rf-storyboard--polaroid .rf-storyboard-panel {
	background: white;
	padding: 0.75rem 0.75rem 2.5rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	border-radius: 2px;
}
.rf-storyboard--polaroid .rf-storyboard-panel__body p {
	font-size: 0.8125rem;
	text-align: center;
	color: var(--rf-color-muted);
	margin: 0.5rem 0 0;
}
/* Shared image styles */
.rf-storyboard-panel img {
	width: 100%;
	height: auto;
	display: block;
}
.rf-storyboard-panel__body > span[property],
.rf-storyboard-panel__body > meta { display: none; }
.rf-storyboard-panel__body p:last-child { margin-bottom: 0; }
@media (max-width: 768px) {
	.rf-storyboard__panels { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
	.rf-storyboard__panels { grid-template-columns: 1fr !important; }
}

/* Symbol */
.rf-symbol__header {
	padding: 0.5rem 0;
}
.rf-symbol__source-link {
	margin-left: auto;
	font-size: 0.75rem;
	color: var(--rf-color-muted);
	text-decoration: none;
}
.rf-symbol__source-link:hover {
	color: var(--rf-color-primary);
}
.rf-symbol__body {
	padding: 0;
}
.rf-symbol__body > header {
	margin-bottom: 1rem;
}
.rf-symbol__body > header h2,
.rf-symbol__body > header h3,
.rf-symbol__body > header h4 {
	margin-top: 0;
}
.rf-symbol__body pre {
	border-radius: var(--rf-radius-md);
	margin: 1rem 0;
}
.rf-symbol__body > div > ul {
	list-style: none;
	padding-left: 0;
	margin: 1rem 0;
}
.rf-symbol__body > div > ul > li {
	padding: 0.375rem 0;
	border-bottom: 1px solid var(--rf-color-border);
	font-size: 0.9375rem;
}
.rf-symbol__body > div > ul > li:last-child {
	border-bottom: none;
}
.rf-symbol__body > div > ul > li > ul {
	margin-top: 0.375rem;
	padding-left: 1.25rem;
	list-style: none;
}
.rf-symbol__body > div > ul > li > ul > li {
	padding: 0.25rem 0;
	font-size: 0.875rem;
	color: var(--rf-color-muted);
}
.rf-symbol__body blockquote {
	border-left: 3px solid var(--rf-color-border);
	padding: 0.5rem 1rem;
	margin: 0.75rem 0;
	border-radius: 0 var(--rf-radius-sm) var(--rf-radius-sm) 0;
	font-size: 0.9375rem;
}
.rf-symbol__body blockquote::before {
	content: none;
}

/* Deprecated symbol */
[data-deprecated] .rf-symbol__body > header h2,
[data-deprecated] .rf-symbol__body > header h3,
[data-deprecated] .rf-symbol__body > header h4 {
	text-decoration: line-through;
	opacity: 0.7;
}

/* SymbolGroup */
.rf-symbol-group {
	margin: 1.5rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--rf-color-border);
}
.rf-symbol-group:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}
.rf-symbol-group h3 {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--rf-color-muted);
	margin: 0 0 1rem;
}

/* SymbolMember */
.rf-symbol-member {
	margin: 1.25rem 0;
	padding: 0;
}
.rf-symbol-member h4 {
	margin: 0 0 0.5rem;
	font-family: var(--rf-font-mono);
	font-size: 1rem;
}
.rf-symbol-member pre {
	border-radius: var(--rf-radius-sm);
	margin: 0.75rem 0;
}
.rf-symbol-member ul {
	list-style: none;
	padding-left: 0;
	margin: 0.75rem 0;
}
.rf-symbol-member li {
	padding: 0.25rem 0;
	font-size: 0.875rem;
}
.rf-symbol-member blockquote {
	border-left: 3px solid var(--rf-color-border);
	padding: 0.375rem 0.75rem;
	margin: 0.5rem 0;
	border-radius: 0 var(--rf-radius-sm) var(--rf-radius-sm) 0;
	font-size: 0.875rem;
}
.rf-symbol-member blockquote::before {
	content: none;
}

/* Tabs */
.rf-tabs__preamble {
	margin-bottom: 1.5rem;
}
.rf-tabs__eyebrow {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--rf-color-primary);
	margin: 0 0 0.5rem;
}
.rf-tabs__eyebrow:has(a) {
	display: inline-block;
	position: relative;
	padding: 0.25rem 0.875rem;
	border: 1px solid var(--rf-color-border);
	border-radius: var(--rf-radius-full);
	color: var(--rf-color-text);
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	transition: border-color 150ms ease;
}
.rf-tabs__eyebrow:has(a):hover { border-color: var(--rf-color-muted); }
.rf-tabs__eyebrow:has(a) a { color: var(--rf-color-primary); font-weight: 600; text-decoration: none; }
.rf-tabs__eyebrow:has(a) a::before { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.rf-tabs__headline {
	margin-top: 0;
}
.rf-tabs__blurb {
	color: var(--rf-color-muted);
	margin-bottom: 0;
}
.rf-tabs__image {
	margin-bottom: 1rem;
}

/* Tab bar — clean bottom line, no background */
.rf-tabs__tabs {
	display: flex;
	border-bottom: 1px solid var(--rf-color-border);
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
}
.rf-tabs__panels {
	padding: 0;
	margin: 0;
}

/* Tab buttons */
.rf-tab {
	flex: 0 0 auto;
	padding: 0.625rem 1.25rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--rf-color-muted);
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	cursor: pointer;
	transition: color 200ms ease, border-color 200ms ease;
	white-space: nowrap;
	font-family: inherit;
}
.rf-tab:hover {
	color: var(--rf-color-text);
}
.rf-tab--active {
	color: var(--rf-color-primary);
	border-bottom-color: var(--rf-color-primary);
	font-weight: 600;
}

/* Panel content — breathing room */
.rf-tab-panel {
	padding: 1.5rem 0;
}
.rf-tab-panel > *:first-child {
	margin-top: 0;
}
.rf-tab-panel > *:last-child {
	margin-bottom: 0;
}
.rf-tab-panel pre {
	margin: 0;
}

/* Testimonial */
.rf-testimonial {
	border-radius: var(--rf-radius-lg);
	padding: 1.75rem 2rem;
	background: var(--rf-color-surface);
}
.rf-testimonial__rating {
	display: flex;
	gap: 0.125rem;
	margin-bottom: 0.75rem;
}
.rf-testimonial__star {
	font-size: 1.1rem;
	color: var(--rf-color-border);
	line-height: 1;
}
.rf-testimonial__star--filled {
	color: var(--rf-color-warning);
}
.rf-testimonial blockquote {
	border: none;
	padding: 0;
	margin: 0 0 1rem;
	font-size: 1.05rem;
	font-style: italic;
	line-height: 1.7;
	color: var(--rf-color-text);
	background: none;
	border-radius: 0;
}
.rf-testimonial blockquote::before {
	display: none;
}
.rf-testimonial blockquote p {
	margin: 0;
}
.rf-testimonial span[property="authorName"] {
	display: block;
	font-weight: 700;
	font-style: normal;
	font-size: 0.925rem;
	color: var(--rf-color-text);
}
.rf-testimonial span[property="authorRole"] {
	display: block;
	margin-top: 0.125rem;
	font-size: 0.85rem;
	color: var(--rf-color-muted);
}
.rf-testimonial img {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	margin-top: 0.75rem;
}

/* Timeline */
.rf-timeline {
	margin: 2rem 0;
}
.rf-timeline ol {
	list-style: none;
	padding: 0;
	margin: 0;
}
.rf-timeline-entry {
	position: relative;
}
.rf-timeline-entry:last-child {
	padding-bottom: 0;
}
.rf-timeline-entry > time {
	display: block;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--rf-color-primary);
	letter-spacing: 0.02em;
	margin-bottom: 0.25rem;
}
.rf-timeline-entry > span {
	display: block;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--rf-color-text);
	margin-bottom: 0.5rem;
}
.rf-timeline-entry__body {
	font-size: 0.925rem;
	line-height: 1.65;
	color: var(--rf-color-muted);
}
.rf-timeline-entry__body p:last-child {
	margin-bottom: 0;
}

/* Vertical timeline */
.rf-timeline--vertical .rf-timeline-entry {
	padding-left: 2rem;
	padding-bottom: 2rem;
	border-left: 2px solid var(--rf-color-border);
	margin-left: 0.375rem;
}
.rf-timeline--vertical .rf-timeline-entry:last-child {
	border-left-color: transparent;
}
.rf-timeline--vertical .rf-timeline-entry::before {
	content: '';
	position: absolute;
	left: -0.4375rem;
	top: 0.25rem;
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 50%;
	background: var(--rf-color-primary);
	border: 2px solid var(--rf-color-bg);
	box-shadow: 0 0 0 2px var(--rf-color-primary);
}

/* Horizontal timeline */
.rf-timeline--horizontal ol {
	display: flex;
	gap: 2rem;
	overflow-x: auto;
	padding: 2rem 0 1rem;
}
.rf-timeline--horizontal .rf-timeline-entry {
	min-width: 12rem;
	padding-top: 1.5rem;
	border-top: 2px solid var(--rf-color-border);
}
.rf-timeline--horizontal .rf-timeline-entry::before {
	content: '';
	position: absolute;
	top: -0.4375rem;
	left: 0.5rem;
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 50%;
	background: var(--rf-color-primary);
	border: 2px solid var(--rf-color-bg);
	box-shadow: 0 0 0 2px var(--rf-color-primary);
}

/* Table of Contents */
.rf-toc {
	padding: 1.25rem 1.5rem;
	border-left: 3px solid var(--rf-color-primary);
	background: var(--rf-color-surface);
	border-radius: 0 var(--rf-radius-md) var(--rf-radius-md) 0;
}
.rf-toc__list {
	font-weight: 650;
	margin-bottom: 0.75rem;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--rf-color-muted);
}
.rf-toc ul,
.rf-toc ol {
	list-style: none;
	padding-left: 0;
	margin: 0;
}
.rf-toc li {
	margin: 0.125rem 0;
}
.rf-toc li[data-level="3"] {
	padding-left: 1rem;
}
.rf-toc li[data-level="4"] {
	padding-left: 2rem;
}
.rf-toc a {
	color: var(--rf-color-text);
	text-decoration: none;
	font-size: 0.85rem;
	display: inline-block;
	padding: 0.2rem 0;
	transition: color 150ms ease;
}
.rf-toc a:hover {
	color: var(--rf-color-primary);
	text-decoration: none;
}

/* Track */
.rf-track {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1.25rem;
	transition: background 0.15s ease;
	counter-increment: track;
}
.rf-track + .rf-track {
	border-top: 1px solid var(--rf-color-border);
}
.rf-track:hover {
	background: color-mix(in srgb, var(--rf-color-border) 15%, transparent);
}
.rf-track::before {
	content: counter(track);
	min-width: 1.5rem;
	font-size: 0.8rem;
	color: var(--rf-color-primary);
	text-align: right;
	flex-shrink: 0;
}

/* Track name — primary text, takes remaining space */
.rf-track__track-name {
	flex: 1;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--rf-color-text);
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Artist — secondary text with dot separator */
.rf-track__track-artist {
	font-size: 0.8125rem;
	color: var(--rf-color-muted);
	flex-shrink: 0;
}
.rf-track__track-artist::before {
	content: '\00b7';
	margin-right: 0.5rem;
	opacity: 0.5;
}

/* Duration — pushed right, tabular nums */
.rf-track__track-duration {
	font-size: 0.8125rem;
	color: var(--rf-color-muted);
	font-variant-numeric: tabular-nums;
	flex-shrink: 0;
	margin-left: auto;
	min-width: 3rem;
	text-align: right;
}

/* Meta (date etc.) — dot separator */
.rf-track__track-meta {
	font-size: 0.75rem;
	color: var(--rf-color-muted);
	flex-shrink: 0;
}
.rf-track__track-meta::before {
	content: '\00b7';
	margin-right: 0.5rem;
	opacity: 0.5;
}

/* Description — full width below the row */
.rf-track__track-description {
	flex-basis: 100%;
	font-size: 0.8125rem;
	color: var(--rf-color-muted);
	line-height: 1.5;
	padding-top: 0.5rem;
}
.rf-track__track-description p {
	margin: 0;
}

/* Wrap when description is present */
.rf-track:has(.rf-track__track-description) {
	flex-wrap: wrap;
}

/* Cue points (lyrics / chapters) */
.rf-track [data-name="lyrics"],
.rf-track [data-name="chapters"] {
	flex-basis: 100%;
	list-style: none;
	padding: 0.5rem 0 0;
	margin: 0;
	font-size: 0.8125rem;
}
.rf-track [data-name="lyrics"] li {
	padding: 0.125rem 0;
	color: var(--rf-color-muted);
}
.rf-track [data-name="lyric"] {
	margin: 0;
}
.rf-track [data-name="chapters"] li {
	display: flex;
	gap: 0.75rem;
	padding: 0.25rem 0;
}
.rf-track [data-name="chapter-name"] {
	color: var(--rf-color-text);
	font-weight: 500;
}
.rf-track [data-name="chapter-time"] {
	color: var(--rf-color-muted);
	font-variant-numeric: tabular-nums;
	margin-left: auto;
}

/* Hide secondary columns on narrow screens */
@media (max-width: 480px) {
	.rf-track__track-artist {
		display: none;
	}
	.rf-track__track-meta {
		display: none;
	}
}

/* Xref — inline cross-reference link */

.rf-xref {
	/* Inherits normal link styling from the theme */
}

/* Unresolved reference */
.rf-xref--unresolved {
	text-decoration: underline dashed;
	color: var(--rf-color-text-muted);
	cursor: help;
}

/* Swatch — inline color chip */
.rf-swatch {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	vertical-align: middle;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 9999px;
	padding: 0.125em 0.625em 0.125em 0.375em;
	margin: 0 0.15em;
}
.rf-swatch__chip {
	display: inline-block;
	width: 0.875em;
	height: 0.875em;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.1);
	flex-shrink: 0;
}
.rf-swatch__label {
	font-weight: 500;
}
.rf-swatch__value {
	color: var(--rf-color-text-muted, #6b7280);
	font-size: 0.75em;
	font-family: var(--rf-font-mono, monospace);
	vertical-align: middle;
}

/* Palette — color swatch grid */
.rf-palette__title {
	font-size: 1.125rem;
	font-weight: 600;
	margin-bottom: 1rem;
}
.rf-palette__group {
	margin-bottom: 1.5rem;
}
.rf-palette__group:last-child {
	margin-bottom: 0;
}
.rf-palette__group-title {
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--rf-color-text-muted, #6b7280);
	margin-bottom: 0.75rem;
}
.rf-palette__grid {
	display: grid;
	grid-template-columns: repeat(var(--rf-palette-cols, 4), 1fr);
	gap: 0.75rem;
}
.rf-palette__swatch {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}
.rf-palette__swatch-color {
	height: 5rem;
	border-radius: var(--rf-radius-md, 8px);
	border: 1px solid rgba(0, 0, 0, 0.08);
}
.rf-palette__swatch-name {
	font-weight: 500;
	font-size: 0.875rem;
}
.rf-palette__swatch-value {
	font-family: var(--rf-font-mono, monospace);
	font-size: 0.75rem;
	color: var(--rf-color-text-muted, #6b7280);
}
.rf-palette__swatch-contrast {
	font-family: var(--rf-font-mono, monospace);
	font-size: 0.7rem;
	color: var(--rf-color-text-muted, #6b7280);
}
.rf-palette__swatch-a11y {
	display: flex;
	gap: 0.5rem;
	font-size: 0.7rem;
	font-weight: 500;
}
.rf-palette__swatch-a11y--pass {
	color: var(--rf-color-success, #10b981);
}
.rf-palette__swatch-a11y--fail {
	color: var(--rf-color-danger, #ef4444);
}

/* Neutral scale — horizontal gradient strip */
.rf-palette__scale {
	display: flex;
	border-radius: var(--rf-radius-md, 8px);
	overflow: hidden;
	margin-bottom: 0.5rem;
}
.rf-palette__scale-stop {
	flex: 1;
	padding: 1.25rem 0.5rem 0.5rem;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	min-height: 4rem;
	font-size: 0.625rem;
	font-family: var(--rf-font-mono, monospace);
}
.rf-palette__scale + .rf-palette__swatch-name {
	margin-top: 0.25rem;
	font-size: 0.8rem;
}

/* Context-aware: no outer margin when inside design-context */
.rf-palette--in-design-context {
	margin: 0;
}

/* Typography — font specimen display */
.rf-typography__title {
	font-size: 1.125rem;
	font-weight: 600;
	margin-bottom: 1rem;
}
.rf-typography__specimens {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}
.rf-typography__specimen {
	border: 1px solid var(--rf-color-border, #e5e7eb);
	border-radius: var(--rf-radius-lg, 12px);
	padding: 1.5rem;
}
.rf-typography__specimen-header {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--rf-color-border, #e5e7eb);
}
.rf-typography__specimen-role {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--rf-color-primary, #0ea5e9);
	background: var(--rf-color-primary-bg, rgba(14, 165, 233, 0.1));
	padding: 0.125rem 0.5rem;
	border-radius: var(--rf-radius-sm, 4px);
}
.rf-typography__specimen-family {
	font-size: 0.9rem;
	color: var(--rf-color-text-muted, #6b7280);
}
.rf-typography__sizes {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-bottom: 1rem;
}
.rf-typography__size-sample {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.rf-typography__size-label {
	flex-shrink: 0;
	font-size: 0.7rem;
	font-family: var(--rf-font-mono, monospace);
	color: var(--rf-color-text-muted, #6b7280);
	min-width: 3rem;
	text-align: right;
}
.rf-typography__weights {
	display: flex;
	gap: 1.5rem;
	flex-wrap: wrap;
	padding-top: 1rem;
	border-top: 1px solid var(--rf-color-border, #e5e7eb);
}
.rf-typography__weight-sample {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}
.rf-typography__weight-label {
	font-size: 0.7rem;
	font-family: var(--rf-font-mono, monospace);
	color: var(--rf-color-text-muted, #6b7280);
}
.rf-typography__charset {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--rf-color-border, #e5e7eb);
	font-size: 0.875rem;
	line-height: 1.8;
	letter-spacing: 0.05em;
	word-break: break-all;
	color: var(--rf-color-text-muted, #6b7280);
}

/* Context-aware: no outer border when inside design-context (parent already has one) */
.rf-typography--in-design-context {
	margin: 0;
}
.rf-typography--in-design-context .rf-typography__specimen {
	border: none;
	border-radius: 0;
	padding: 0;
}
.rf-typography--in-design-context .rf-typography__specimen + .rf-typography__specimen {
	padding-top: 1.5rem;
}

/* Spacing — spacing scale, radii, and shadow display */
.rf-spacing__title {
	font-size: 1.125rem;
	font-weight: 600;
	margin-bottom: 1rem;
}
.rf-spacing__section {
	margin-bottom: 2rem;
}
.rf-spacing__section:last-child {
	margin-bottom: 0;
}
.rf-spacing__section-title {
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--rf-color-text-muted, #6b7280);
	margin-bottom: 0.75rem;
}

/* Spacing scale — proportional bars */
.rf-spacing__scale {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}
.rf-spacing__scale-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.rf-spacing__scale-bar {
	height: 1.25rem;
	background: var(--rf-color-primary, #0ea5e9);
	border-radius: var(--rf-radius-sm, 4px);
	opacity: 0.8;
	min-width: 4px;
}
.rf-spacing__scale-label {
	font-size: 0.75rem;
	font-family: var(--rf-font-mono, monospace);
	color: var(--rf-color-text, #1a1a2e);
	white-space: nowrap;
	flex-shrink: 0;
}
.rf-spacing__scale-multiplier {
	color: var(--rf-color-text-muted, #6b7280);
	margin-left: 0.25rem;
}

/* Radius — rounded corner samples */
.rf-spacing__radii {
	display: flex;
	gap: 1.25rem;
	flex-wrap: wrap;
	align-items: flex-end;
}
.rf-spacing__radius-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.375rem;
}
.rf-spacing__radius-sample {
	width: 3.5rem;
	height: 3.5rem;
	border: 2px solid var(--rf-color-border, #e5e7eb);
	background: var(--rf-color-surface-raised, #f9fafb);
}
.rf-spacing__radius-label {
	font-weight: 500;
	font-size: 0.8rem;
}
.rf-spacing__radius-value {
	font-size: 0.7rem;
	font-family: var(--rf-font-mono, monospace);
	color: var(--rf-color-text-muted, #6b7280);
}

/* Shadows — sample cards */
.rf-spacing__shadows {
	display: flex;
	gap: 1.5rem;
	flex-wrap: wrap;
}
.rf-spacing__shadow-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
}
.rf-spacing__shadow-sample {
	width: 5rem;
	height: 3.5rem;
	background: var(--rf-color-surface, #fff);
	border-radius: var(--rf-radius-md, 8px);
}
.rf-spacing__shadow-label {
	font-weight: 500;
	font-size: 0.8rem;
}

/* Context-aware: no outer margin when inside design-context */
.rf-spacing--in-design-context {
	margin: 0;
}

/* Design Context — unified token card wrapper */
.rf-design-context {
	border: 1px solid var(--rf-color-border, #e5e7eb);
	border-radius: 0.75rem;
	overflow: hidden;
}
.rf-design-context__title {
	font-size: 1.125rem;
	font-weight: 600;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--rf-color-border, #e5e7eb);
	background: var(--rf-color-bg-muted, #f9fafb);
}
.rf-design-context__sections {
	display: flex;
	flex-direction: column;
}
.rf-design-context__sections > * {
	padding: 1.25rem;
	margin: 0;
}
.rf-design-context__sections > * + * {
	border-top: 1px dashed var(--rf-color-border, #e5e7eb);
}

/* PullQuote */
.rf-pullquote {
	margin: 2rem 0;
	padding: 1.5rem 2rem;
	border: none;
	font-size: 1.375rem;
	font-style: italic;
	font-weight: 500;
	line-height: 1.5;
	color: var(--rf-color-text);
	background: none;
	border-radius: 0;
	position: relative;
}
.rf-pullquote::before {
	content: '\201C';
	position: absolute;
	top: -0.25rem;
	left: 0;
	font-size: 4rem;
	font-style: normal;
	font-weight: 700;
	line-height: 1;
	color: var(--rf-color-primary);
	opacity: 0.4;
}
.rf-pullquote p {
	margin: 0;
}
.rf-pullquote p + p {
	margin-top: 0.75rem;
}

/* Alignment — block modes */
.rf-pullquote--center {
	text-align: center;
	max-width: 80%;
	margin-left: auto;
	margin-right: auto;
}
.rf-pullquote--center::before {
	left: 50%;
	transform: translateX(-50%);
}
.rf-pullquote--left {
	text-align: left;
	border-left: 2px solid var(--rf-color-primary);
	padding-left: 1.5rem;
}
.rf-pullquote--left::before {
	display: none;
}
.rf-pullquote--right {
	text-align: right;
	border-right: 2px solid var(--rf-color-primary);
	padding-right: 1.5rem;
	margin-left: auto;
}
.rf-pullquote--right::before {
	display: none;
}

/* Float modes — left/right pull quotes can float for text wrapping */
.rf-pullquote[data-align="left"] {
	float: left;
	width: 40%;
	margin: 0.5rem 2rem 1rem 0;
}
.rf-pullquote[data-align="right"] {
	float: right;
	width: 40%;
	margin: 0.5rem 0 1rem 2rem;
}

/* Style: accent — uses primary color background tint */
.rf-pullquote--accent {
	background: color-mix(in srgb, var(--rf-color-primary) 8%, transparent);
	border-radius: var(--rf-radius-md);
	padding: 2rem 2.5rem;
}
.rf-pullquote--accent::before {
	color: var(--rf-color-primary);
	opacity: 0.5;
}

/* Style: editorial — decorative top/bottom rules */
.rf-pullquote--editorial {
	border-top: 2px solid var(--rf-color-border);
	border-bottom: 2px solid var(--rf-color-border);
	padding: 1.75rem 0;
	font-family: Georgia, 'Times New Roman', serif;
	letter-spacing: 0.01em;
}
.rf-pullquote--editorial::before {
	display: none;
}

/* Reset inner blockquote — global blockquote styles shouldn't apply here */
.rf-pullquote blockquote {
	border: none;
	background: none;
	padding: 0;
	margin: 0;
	border-radius: 0;
	color: inherit;
}
.rf-pullquote blockquote::before {
	display: none;
}

/* Responsive — floated quotes become full-width on mobile */
@media (max-width: 768px) {
	.rf-pullquote[data-align="left"],
	.rf-pullquote[data-align="right"] {
		float: none;
		width: 100%;
		margin: 1.5rem 0;
	}
	.rf-pullquote--center {
		max-width: 100%;
	}
}

/* TextBlock */
.rf-textblock__body {
	display: block;
}

/* Drop cap — decorative first letter */
.rf-textblock--dropcap .rf-textblock__body > p:first-child::first-letter {
	float: left;
	font-size: 3.5em;
	font-weight: 700;
	line-height: 0.8;
	padding-right: 0.1em;
	margin-top: 0.05em;
	color: var(--rf-color-primary);
	font-family: Georgia, 'Times New Roman', serif;
}

/* Lead paragraph — emphasized opening text */
.rf-textblock--lead .rf-textblock__body > p:first-child {
	font-size: 1.25rem;
	line-height: 1.6;
	font-weight: 400;
	color: var(--rf-color-text);
}

/* Multi-column text flow */
.rf-textblock[data-columns="2"] .rf-textblock__body {
	column-count: 2;
	column-gap: 2rem;
	column-rule: 1px solid var(--rf-color-border);
}
.rf-textblock[data-columns="3"] .rf-textblock__body {
	column-count: 3;
	column-gap: 2rem;
	column-rule: 1px solid var(--rf-color-border);
}
.rf-textblock[data-columns="4"] .rf-textblock__body {
	column-count: 4;
	column-gap: 2rem;
	column-rule: 1px solid var(--rf-color-border);
}

/* Text alignment */
.rf-textblock--center .rf-textblock__body { text-align: center; }
.rf-textblock--right .rf-textblock__body { text-align: right; }
.rf-textblock--justify .rf-textblock__body { text-align: justify; }

/* Responsive — columns collapse on smaller screens */
@media (max-width: 768px) {
	.rf-textblock[data-columns="3"] .rf-textblock__body,
	.rf-textblock[data-columns="4"] .rf-textblock__body {
		column-count: 2;
	}
}
@media (max-width: 480px) {
	.rf-textblock[data-columns="2"] .rf-textblock__body,
	.rf-textblock[data-columns="3"] .rf-textblock__body,
	.rf-textblock[data-columns="4"] .rf-textblock__body {
		column-count: 1;
	}
}

/* MediaText */

/* Grid mode (default — no wrap) */
.rf-mediatext:not([data-wrap="true"]) {
	display: grid;
	gap: 2rem;
	align-items: start;
}

/* Ratio variants for grid mode */
.rf-mediatext[data-ratio="1:1"]:not([data-wrap="true"]) {
	grid-template-columns: 1fr 1fr;
}
.rf-mediatext[data-ratio="1:2"]:not([data-wrap="true"]) {
	grid-template-columns: 1fr 2fr;
}
.rf-mediatext[data-ratio="2:1"]:not([data-wrap="true"]) {
	grid-template-columns: 2fr 1fr;
}

/* Right alignment — media on the right in grid mode */
.rf-mediatext--right:not([data-wrap="true"]) .rf-mediatext__media {
	order: 1;
}

/* Media container */
.rf-mediatext__media img {
	max-width: 100%;
	height: auto;
	border-radius: var(--rf-radius-md);
}

/* Body */
.rf-mediatext__body p:first-child { margin-top: 0; }
.rf-mediatext__body p:last-child { margin-bottom: 0; }

/* Wrap mode — float-based text wrapping */
.rf-mediatext[data-wrap="true"] .rf-mediatext__media {
	max-width: 50%;
	margin-bottom: 1rem;
}
.rf-mediatext--left[data-wrap="true"] .rf-mediatext__media {
	float: left;
	margin-right: 2rem;
}
.rf-mediatext--right[data-wrap="true"] .rf-mediatext__media {
	float: right;
	margin-left: 2rem;
}
.rf-mediatext[data-wrap="true"]::after {
	content: '';
	display: table;
	clear: both;
}

/* Responsive — stack on mobile */
@media (max-width: 768px) {
	.rf-mediatext:not([data-wrap="true"]) {
		grid-template-columns: 1fr !important;
	}
	.rf-mediatext--right:not([data-wrap="true"]) .rf-mediatext__media {
		order: 0;
	}
	.rf-mediatext[data-wrap="true"] .rf-mediatext__media {
		float: none;
		max-width: 100%;
		margin: 0 0 1rem 0;
	}
}

/* Tint Rune — Colour Token Bridge
 *
 * Maps --tint-* custom properties (set by the identity transform) to
 * Lumina's internal --rf-color-* tokens.
 *
 * The six bridgeable tokens are registered with @property so that when a
 * tint doesn't override a particular token, the property falls back to
 * its inherited value instead of becoming guaranteed-invalid (which would
 * happen with a self-referencing var() fallback — a CSS cycle). */

/* ── 0. Token registration ────────────────────────────────────────────────
 * @property makes guaranteed-invalid fall back to the inherited value
 * (inherits: true) rather than propagating as invalid through children.
 * initial-value matches the light-mode defaults from tokens/base.css. */

@property --rf-color-bg {
	syntax: '<color>';
	inherits: true;
	initial-value: #ffffff;
}
@property --rf-color-surface {
	syntax: '<color>';
	inherits: true;
	initial-value: #f8fafc;
}
@property --rf-color-text {
	syntax: '<color>';
	inherits: true;
	initial-value: #1a1a2e;
}
@property --rf-color-muted {
	syntax: '<color>';
	inherits: true;
	initial-value: #64748b;
}
@property --rf-color-primary {
	syntax: '<color>';
	inherits: true;
	initial-value: #0ea5e9;
}
@property --rf-color-border {
	syntax: '<color>';
	inherits: true;
	initial-value: #e2e8f0;
}

/* ── 1. Colour scheme override ──────────────────────────────────────────────
 * Forces dark or light mode tokens on a subtree. The six tint-bridgeable
 * tokens are also exposed as --cs-* intermediaries so compound selectors
 * in step 4 can fall back to them without a cycle. */

[data-color-scheme="dark"] {
	color-scheme: dark;
	color: var(--rf-color-text);
	background-color: var(--rf-color-bg);

	--cs-bg: #0c1222;
	--cs-surface: #0f172a;
	--cs-text: #e2e8f0;
	--cs-muted: #94a3b8;
	--cs-accent: #38bdf8;
	--cs-border: rgba(255, 255, 255, 0.1);

	--rf-color-bg: var(--cs-bg);
	--rf-color-surface: var(--cs-surface);
	--rf-color-text: var(--cs-text);
	--rf-color-muted: var(--cs-muted);
	--rf-color-primary: var(--cs-accent);
	--rf-color-border: var(--cs-border);

	--rf-color-primary-hover: #7dd3fc;
	--rf-color-surface-hover: #1e293b;
	--rf-color-surface-active: #334155;
	--rf-color-surface-raised: #1e293b;

	--rf-color-info: #60a5fa;
	--rf-color-info-bg: rgba(59, 130, 246, 0.1);
	--rf-color-info-border: rgba(59, 130, 246, 0.3);
	--rf-color-warning: #fbbf24;
	--rf-color-warning-bg: rgba(245, 158, 11, 0.1);
	--rf-color-warning-border: rgba(245, 158, 11, 0.3);
	--rf-color-danger: #f87171;
	--rf-color-danger-bg: rgba(239, 68, 68, 0.1);
	--rf-color-danger-border: rgba(239, 68, 68, 0.3);
	--rf-color-success: #34d399;
	--rf-color-success-bg: rgba(16, 185, 129, 0.1);
	--rf-color-success-border: rgba(16, 185, 129, 0.3);

	--rf-color-code-bg: #0f172a;
	--rf-color-code-text: #e2e8f0;
	--rf-color-inline-code-bg: rgba(255, 255, 255, 0.08);

	--rf-shadow-xs: 0 1px 2px rgba(0,0,0,0.3);
	--rf-shadow-sm: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
	--rf-shadow-md: 0 4px 12px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.3);
	--rf-shadow-lg: 0 8px 24px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.3);
}

[data-color-scheme="light"] {
	color-scheme: light;
	color: var(--rf-color-text);
	background-color: var(--rf-color-bg);

	--cs-bg: #ffffff;
	--cs-surface: #f8fafc;
	--cs-text: #1a1a2e;
	--cs-muted: #64748b;
	--cs-accent: #0ea5e9;
	--cs-border: #e2e8f0;

	--rf-color-bg: var(--cs-bg);
	--rf-color-surface: var(--cs-surface);
	--rf-color-text: var(--cs-text);
	--rf-color-muted: var(--cs-muted);
	--rf-color-primary: var(--cs-accent);
	--rf-color-border: var(--cs-border);

	--rf-color-primary-hover: #0284c7;
	--rf-color-surface-hover: #f1f5f9;
	--rf-color-surface-active: #e2e8f0;
	--rf-color-surface-raised: #ffffff;

	--rf-color-info: #3b82f6;
	--rf-color-info-bg: #eff6ff;
	--rf-color-info-border: #bfdbfe;
	--rf-color-warning: #f59e0b;
	--rf-color-warning-bg: #fffbeb;
	--rf-color-warning-border: #fde68a;
	--rf-color-danger: #ef4444;
	--rf-color-danger-bg: #fef2f2;
	--rf-color-danger-border: #fecaca;
	--rf-color-success: #10b981;
	--rf-color-success-bg: #ecfdf5;
	--rf-color-success-border: #a7f3d0;

	--rf-color-inline-code-bg: #f1f5f9;

	--rf-shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
	--rf-shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
	--rf-shadow-md: 0 4px 12px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.04);
	--rf-shadow-lg: 0 8px 24px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
}

/* ── 2. Tint bridge — light mode (default) ────────────────────────────────
 * Maps --tint-* → --rf-color-*. No fallback needed — when --tint-* is
 * unset, var() produces guaranteed-invalid, and @property makes the
 * token inherit from the parent element.
 *
 * :where() background gives tinted elements a painted background at zero
 * specificity — runes with their own background naturally override it. */

:where([data-tint]) {
	background-color: var(--rf-color-bg);
}

[data-tint] {
	color: var(--rf-color-text);
	--rf-color-bg: var(--tint-background);
	--rf-color-surface: var(--tint-surface);
	--rf-color-text: var(--tint-primary);
	--rf-color-muted: var(--tint-secondary);
	--rf-color-primary: var(--tint-accent);
	--rf-color-border: var(--tint-border);
}

/* ── 3. Tint bridge — dark ancestor ───────────────────────────────────────
 * When a dark context is on an ancestor (data-theme on html, or
 * data-color-scheme on a parent), prefer dark tint values.
 * Uses descendant combinator — does NOT match same-element.
 * Unset tokens → guaranteed-invalid → @property inherits from parent
 * (which carries the dark theme value). */

:is([data-theme="dark"], [data-color-scheme="dark"]) [data-tint] {
	--rf-color-bg: var(--tint-dark-background, var(--tint-background));
	--rf-color-surface: var(--tint-dark-surface, var(--tint-surface));
	--rf-color-text: var(--tint-dark-primary, var(--tint-primary));
	--rf-color-muted: var(--tint-dark-secondary, var(--tint-secondary));
	--rf-color-primary: var(--tint-dark-accent, var(--tint-accent));
	--rf-color-border: var(--tint-dark-border, var(--tint-border));
}

/* ── 4. Tint bridge — colour scheme + tint on SAME element ────────────────
 * Compound selectors (no space) match when both attributes sit on the
 * same element. Falls back to --cs-* intermediaries so that unlisted
 * tint tokens use the colour-scheme value, not the page-level value. */

[data-color-scheme="dark"][data-tint] {
	--rf-color-bg: var(--tint-dark-background, var(--tint-background, var(--cs-bg)));
	--rf-color-surface: var(--tint-dark-surface, var(--tint-surface, var(--cs-surface)));
	--rf-color-text: var(--tint-dark-primary, var(--tint-primary, var(--cs-text)));
	--rf-color-muted: var(--tint-dark-secondary, var(--tint-secondary, var(--cs-muted)));
	--rf-color-primary: var(--tint-dark-accent, var(--tint-accent, var(--cs-accent)));
	--rf-color-border: var(--tint-dark-border, var(--tint-border, var(--cs-border)));
}

[data-color-scheme="light"][data-tint] {
	--rf-color-bg: var(--tint-background, var(--cs-bg));
	--rf-color-surface: var(--tint-surface, var(--cs-surface));
	--rf-color-text: var(--tint-primary, var(--cs-text));
	--rf-color-muted: var(--tint-secondary, var(--cs-muted));
	--rf-color-primary: var(--tint-accent, var(--cs-accent));
	--rf-color-border: var(--tint-border, var(--cs-border));
}

/* Showcase — Media presentation wrapper with shadows, bleed, and aspect ratio */
.rf-showcase {
	position: relative;
}
.rf-showcase__viewport {
	position: relative;
}
/* Shadows */
.rf-showcase[data-shadow="soft"] {
	filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1));
}
.rf-showcase[data-shadow="hard"] {
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.25));
}
.rf-showcase[data-shadow="elevated"] {
	filter: drop-shadow(0 12px 40px rgba(0, 0, 0, 0.2));
}
/* Bleed displacement via negative margins */
.rf-showcase[data-bleed="top"] {
	margin-top: calc(-1 * var(--showcase-offset, 2rem));
	position: relative;
	z-index: 1;
}
.rf-showcase[data-bleed="bottom"] {
	margin-bottom: calc(-1 * var(--showcase-offset, 2rem));
	position: relative;
	z-index: 1;
}
.rf-showcase[data-bleed="both"] {
	margin-top: calc(-1 * var(--showcase-offset, 2rem));
	margin-bottom: calc(-1 * var(--showcase-offset, 2rem));
	position: relative;
	z-index: 1;
}
.rf-showcase[data-bleed="end"] {
	margin-inline-end: calc(-1 * var(--showcase-offset, 2rem));
	position: relative;
	z-index: 1;
}
.rf-showcase[data-bleed="bottom-end"] {
	margin-bottom: calc(-1 * var(--showcase-offset, 2rem));
	margin-inline-end: calc(-1 * var(--showcase-offset, 2rem));
	position: relative;
	z-index: 1;
}
.rf-showcase[data-bleed="top-end"] {
	margin-top: calc(-1 * var(--showcase-offset, 2rem));
	margin-inline-end: calc(-1 * var(--showcase-offset, 2rem));
	position: relative;
	z-index: 1;
}
/* Parent needs overflow visible for bleed — except inside clipping containers like bento cells */
:has(> .rf-showcase[data-bleed]:not(.rf-showcase--in-bento-cell)) {
	overflow: visible;
}
/* Bento cell context — showcase fills remaining space */
.rf-showcase--in-bento-cell {
	flex: 1;
	min-height: 0;
}
/* Aspect ratio enforcement */
.rf-showcase[data-aspect] .rf-showcase__viewport {
	aspect-ratio: var(--showcase-aspect);
	overflow: hidden;
}
.rf-showcase[data-aspect] .rf-showcase__viewport > img,
.rf-showcase[data-aspect] .rf-showcase__viewport > video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Self-positioning within parent via place attribute */
.rf-showcase[data-place] {
	justify-self: var(--place-x, auto);
	align-self: var(--place-y, auto);
}
/* Spacing — vertical margin around the showcase */
.rf-showcase[data-spacing="flush"]   { margin-top: 0; margin-bottom: 0; }
.rf-showcase[data-spacing="tight"]   { margin-top: var(--rf-spacing-section-tight, 1.5rem); margin-bottom: var(--rf-spacing-section-tight, 1.5rem); }
.rf-showcase[data-spacing="loose"]   { margin-top: var(--rf-spacing-section-loose, 8rem); margin-bottom: var(--rf-spacing-section-loose, 8rem); }
.rf-showcase[data-spacing="breathe"] { margin-top: var(--rf-spacing-section-breathe, 12rem); margin-bottom: var(--rf-spacing-section-breathe, 12rem); }
/* Inset — all-around padding (not just inline, since showcase is a contained frame) */
.rf-showcase[data-inset="flush"]   { padding: 0; }
.rf-showcase[data-inset="tight"]   { padding: var(--rf-inset-tight, 1rem); }
.rf-showcase[data-inset="loose"]   { padding: var(--rf-inset-loose, 4rem); }
.rf-showcase[data-inset="breathe"] { padding: var(--rf-inset-breathe, 8rem); }
/* Responsive: collapse bleed on mobile */
@media (max-width: 768px) {
	.rf-showcase[data-bleed] {
		margin-top: 0;
		margin-bottom: 0;
		margin-inline-end: 0;
	}
}

/* Background — Directive rune for background images, video, overlays, blur */

/* Background layer — absolute positioned behind content */
[data-name="bg"] {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	background-image: var(--bg-image);
	background-size: var(--bg-fit, cover);
	background-position: var(--bg-position, center);
	background-repeat: no-repeat;
}
/* Blur and opacity applied when set via custom properties */
[data-name="bg"][style*="--bg-blur"] {
	filter: blur(var(--bg-blur));
}
[data-name="bg"][style*="--bg-opacity"] {
	opacity: var(--bg-opacity);
}
/* Fixed (parallax) background */
[data-name="bg"][data-bg-fixed] {
	background-attachment: fixed;
}
/* Content above background — any sibling of bg layer gets z-index */
.rf-has-bg > :not([data-name="bg"]) {
	position: relative;
	z-index: 1;
}
/* Video background */
[data-name="bg-video"] {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--bg-position, center);
}
[data-name="bg-video"][style*="--bg-blur"] {
	filter: blur(var(--bg-blur));
}
[data-name="bg-video"][style*="--bg-opacity"] {
	opacity: var(--bg-opacity);
}
/* Overlay */
[data-name="bg-overlay"] {
	position: absolute;
	inset: 0;
}
[data-name="bg-overlay"][data-bg-overlay="dark"] {
	background: rgba(0, 0, 0, 0.5);
}
[data-name="bg-overlay"][data-bg-overlay="light"] {
	background: rgba(255, 255, 255, 0.6);
}

/* Spec */
.rf-spec__body {
	font-size: 0.925rem;
	line-height: 1.65;
}
.rf-spec__body > header {
	margin-bottom: 0.75rem;
}
.rf-spec__body > header h1,
.rf-spec__body > header h2,
.rf-spec__body > header h3 {
	margin-top: 0;
}
.rf-spec__body blockquote {
	border-left: 3px solid var(--rf-color-border);
	padding: 0.5rem 1rem;
	margin: 0.75rem 0;
	font-style: italic;
	color: var(--rf-color-muted);
}

/* Work */
.rf-work__assignee-badge {
	margin-left: auto;
}
.rf-work__assignee-badge::before { content: '@'; }
.rf-work__body {
	font-size: 0.925rem;
	line-height: 1.65;
}
.rf-work__body > header {
	margin-bottom: 0.75rem;
}
.rf-work__body > header h1,
.rf-work__body > header h2,
.rf-work__body > header h3 {
	margin-top: 0;
}
.rf-work__body > div > section {
	margin-top: 1rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--rf-color-border);
}
.rf-work__body > div > section:first-child {
	margin-top: 0.75rem;
}

/* Complexity dots */
.rf-work__complexity-badge::after {
	margin-left: 0.25rem;
}
[data-complexity="trivial"] > .rf-work__header > .rf-work__complexity-badge::after { content: '●'; }
[data-complexity="simple"] > .rf-work__header > .rf-work__complexity-badge::after { content: '●●'; }
[data-complexity="moderate"] > .rf-work__header > .rf-work__complexity-badge::after { content: '●●●'; }
[data-complexity="complex"] > .rf-work__header > .rf-work__complexity-badge::after { content: '●●●●'; }
[data-complexity="unknown"] > .rf-work__header > .rf-work__complexity-badge::after { content: '?'; }

/* Bug */
.rf-bug__assignee-badge {
	margin-left: auto;
}
.rf-bug__assignee-badge::before { content: '@'; }
.rf-bug__body {
	font-size: 0.925rem;
	line-height: 1.65;
}
.rf-bug__body > header {
	margin-bottom: 0.75rem;
}
.rf-bug__body > header h1,
.rf-bug__body > header h2,
.rf-bug__body > header h3 {
	margin-top: 0;
}
.rf-bug__body > div > section {
	margin-top: 1rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--rf-color-border);
}
.rf-bug__body > div > section:first-child {
	margin-top: 0.75rem;
}

/* Decision */
.rf-decision__body {
	font-size: 0.925rem;
	line-height: 1.65;
}
.rf-decision__body > header {
	margin-bottom: 0.75rem;
}
.rf-decision__body > header h1,
.rf-decision__body > header h2,
.rf-decision__body > header h3 {
	margin-top: 0;
}
.rf-decision__body > div > section {
	margin-top: 1rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--rf-color-border);
}
.rf-decision__body > div > section:first-child {
	margin-top: 0.75rem;
}

/* Milestone */
.rf-milestone__target-badge {
	margin-left: auto;
}
.rf-milestone__body {
	font-size: 0.925rem;
	line-height: 1.65;
}
.rf-milestone__body > header {
	margin-bottom: 0.75rem;
}
.rf-milestone__body > header h1,
.rf-milestone__body > header h2,
.rf-milestone__body > header h3 {
	margin-top: 0;
}
.rf-milestone__body ul {
	padding-left: 1.5rem;
}

/* Auto-backlog */
.rf-milestone__backlog {
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid var(--rf-color-border);
}
.rf-milestone__backlog-group {
	margin-bottom: 1rem;
}
.rf-milestone__backlog-group-label {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--rf-color-muted);
	margin: 0 0 0.375rem;
}

/* Aggregate progress */
.rf-milestone__progress {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin-bottom: 1rem;
}
.rf-milestone__progress-label {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--rf-color-muted);
	white-space: nowrap;
}
.rf-milestone__progress-bar {
	flex: 1;
	height: 0.375rem;
	border-radius: var(--rf-radius-sm);
	background: var(--rf-color-surface-active);
	overflow: hidden;
}
.rf-milestone__progress-bar::after {
	content: '';
	display: block;
	height: 100%;
	width: var(--rf-progress, 0%);
	background: var(--rf-color-success);
	border-radius: var(--rf-radius-sm);
	transition: width 0.3s ease;
}

/* Backlog */

/* Group sections */
.rf-backlog__group {
	margin-bottom: 1.5rem;
}
.rf-backlog__group-title {
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--rf-color-muted);
	margin: 0 0 0.5rem;
	padding-bottom: 0.375rem;
	border-bottom: 1px solid var(--rf-color-border);
}

/* Cards — mini rune surface */
.rf-backlog__card {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 0.75rem 1rem;
	border-radius: var(--rf-radius-md);
	background: var(--rf-color-surface);
	margin-bottom: 0.5rem;
	transition: box-shadow 200ms ease;
}
.rf-backlog__card:hover {
	box-shadow: var(--rf-shadow-md);
}

/* Card link — suppress underline */
.rf-backlog__card-link {
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}
.rf-backlog__card-link:hover {
	text-decoration: none;
}

/* Card title — smaller than full rune */
.rf-backlog__card [data-section="title"] {
	font-size: 0.9375rem;
	font-weight: 600;
}

/* Checklist progress badge */
.rf-backlog__card-progress {
	font-family: var(--rf-font-mono);
	font-size: 0.6875rem;
	font-weight: 600;
	padding: 0.125rem 0.5rem;
	border: 1px solid var(--rf-color-border);
	border-radius: 999px;
	color: var(--rf-color-muted);
	margin-left: auto;
}

/* Decision Log */

/* Entry list */
.rf-decision-log__list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.rf-decision-log__entry {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 0.75rem 1rem;
	border-radius: var(--rf-radius-md);
	background: var(--rf-color-surface);
	margin-bottom: 0.5rem;
	transition: box-shadow 200ms ease;
}
.rf-decision-log__entry:hover {
	box-shadow: var(--rf-shadow-md);
}

/* Entry link — suppress underline */
.rf-decision-log__link {
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}
.rf-decision-log__link:hover {
	text-decoration: none;
}

/* Entry title — smaller than full rune */
.rf-decision-log__entry [data-section="title"] {
	font-size: 0.9375rem;
	font-weight: 600;
}

/* Superseded/deprecated entries — muted with strikethrough */
.rf-decision-log__entry[data-status="superseded"] [data-section="title"],
.rf-decision-log__entry[data-status="deprecated"] [data-section="title"] {
	color: var(--rf-color-muted);
	text-decoration: line-through;
}

/* Plan Progress */
.rf-plan-progress {
	background: var(--rf-color-surface);
	border: 1px solid var(--rf-color-border);
	border-radius: var(--rf-radius-md);
	padding: 0.75rem 1.25rem;
}
.rf-plan-progress__row {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	padding-block: 0.25rem;
}
.rf-plan-progress__row + .rf-plan-progress__row {
	border-block-start: 1px solid var(--rf-color-border);
}
.rf-plan-progress__label {
	font-weight: 600;
	font-size: 0.8125rem;
	color: var(--rf-color-text);
	min-width: 8rem;
}
.rf-plan-progress__counts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
}
.rf-plan-progress__count {
	font-size: 0.75rem;
	padding: 0.125rem 0.5rem;
	border-radius: var(--rf-radius-sm);
	white-space: nowrap;
}

/* Status-colored counts */
.rf-plan-progress__count[data-status="done"],
.rf-plan-progress__count[data-status="fixed"],
.rf-plan-progress__count[data-status="accepted"],
.rf-plan-progress__count[data-status="active"],
.rf-plan-progress__count[data-status="complete"] {
	color: var(--rf-color-success);
	background: var(--rf-color-success-bg);
}
.rf-plan-progress__count[data-status="in-progress"],
.rf-plan-progress__count[data-status="confirmed"],
.rf-plan-progress__count[data-status="review"] {
	color: var(--rf-color-warning);
	background: var(--rf-color-warning-bg);
}
.rf-plan-progress__count[data-status="ready"],
.rf-plan-progress__count[data-status="reported"],
.rf-plan-progress__count[data-status="proposed"],
.rf-plan-progress__count[data-status="planning"] {
	color: var(--rf-color-info);
	background: var(--rf-color-info-bg);
}
.rf-plan-progress__count[data-status="blocked"] {
	color: var(--rf-color-danger);
	background: var(--rf-color-danger-bg);
}
.rf-plan-progress__count[data-status="draft"],
.rf-plan-progress__count[data-status="pending"],
.rf-plan-progress__count[data-status="superseded"],
.rf-plan-progress__count[data-status="deprecated"],
.rf-plan-progress__count[data-status="wontfix"],
.rf-plan-progress__count[data-status="duplicate"] {
	color: var(--rf-color-muted);
	background: var(--rf-color-surface-active);
}

/* Plan Activity */
.rf-plan-activity__list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.rf-plan-activity__entry {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	padding: 0.25rem 0.5rem;
	border-radius: var(--rf-radius-sm);
	font-size: 0.8125rem;
}
.rf-plan-activity__entry:nth-child(odd) {
	background: var(--rf-color-surface);
}
.rf-plan-activity__date {
	font-family: var(--rf-font-mono);
	font-size: 0.75rem;
	color: var(--rf-color-muted);
	white-space: nowrap;
}
.rf-plan-activity__type {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--rf-color-muted);
	min-width: 4rem;
}
.rf-plan-activity__id {
	font-family: var(--rf-font-mono);
	font-size: 0.75rem;
	color: var(--rf-color-primary);
	white-space: nowrap;
}
.rf-plan-activity__status {
	font-size: 0.75rem;
	padding: 0.0625rem 0.375rem;
	border-radius: var(--rf-radius-sm);
	white-space: nowrap;
}

/* Status badge colors */
.rf-plan-activity__status[data-status="done"],
.rf-plan-activity__status[data-status="fixed"],
.rf-plan-activity__status[data-status="accepted"] {
	color: var(--rf-color-success);
	background: var(--rf-color-success-bg);
}
.rf-plan-activity__status[data-status="in-progress"],
.rf-plan-activity__status[data-status="confirmed"],
.rf-plan-activity__status[data-status="review"] {
	color: var(--rf-color-warning);
	background: var(--rf-color-warning-bg);
}
.rf-plan-activity__status[data-status="ready"],
.rf-plan-activity__status[data-status="reported"],
.rf-plan-activity__status[data-status="proposed"] {
	color: var(--rf-color-info);
	background: var(--rf-color-info-bg);
}
.rf-plan-activity__status[data-status="blocked"] {
	color: var(--rf-color-danger);
	background: var(--rf-color-danger-bg);
}
.rf-plan-activity__status[data-status="draft"] {
	color: var(--rf-color-muted);
	background: var(--rf-color-surface-active);
}
.rf-plan-activity__title {
	color: var(--rf-color-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.rf-plan-activity__link {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	color: inherit;
	text-decoration: none;
	width: 100%;
}
.rf-plan-activity__link:hover .rf-plan-activity__title {
	color: var(--rf-color-primary);
}


/* Plan CLI shell tokens
 *
 * Shell-specific custom properties for the plan CLI layout (sidebar, dashboard,
 * TOC, cross-references). Rune styling is handled entirely by the active theme
 * (Lumina by default).
 *
 * All values reference --rf-* tokens when a refrakt theme is active, with
 * fallback values for standalone use.
 */
:root {
	/* Sidebar */
	--plan-sidebar-width: 16rem;
}


/* ==========================================================================
   Plan CLI Shell Styles
   Layout chrome for the plan CLI renderer (sidebar, dashboard, TOC,
   cross-references, relationships). Rune styling (spec, work, bug, decision,
   milestone, backlog, decision-log, plan-progress, plan-activity) is provided
   by the active theme (Lumina by default).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Dashboard grid layout
   -------------------------------------------------------------------------- */

.rf-plan-dashboard {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
	gap: var(--rf-spacing-lg, 1.5rem);
	padding: var(--rf-spacing-lg, 1.5rem);
}

.rf-plan-dashboard__section {
	min-width: 0;
}

.rf-plan-dashboard__section-title {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--rf-color-text, #212529);
	margin-block-end: var(--rf-spacing-md, 1rem);
	padding-block-end: var(--rf-spacing-sm, 0.5rem);
	border-block-end: 2px solid var(--rf-color-border, #dee2e6);
}

/* --------------------------------------------------------------------------
   Sidebar navigation
   -------------------------------------------------------------------------- */

.rf-plan-sidebar {
	position: fixed;
	inset-block: 0;
	inset-inline-start: 0;
	width: var(--plan-sidebar-width);
	background: var(--rf-color-bg, #fff);
	border-inline-end: 1px solid var(--rf-color-border, #dee2e6);
	padding: var(--rf-spacing-lg, 1.5rem) var(--rf-spacing-md, 1rem);
	overflow-y: auto;
}

.rf-plan-sidebar__title {
	font-size: 1.125rem;
	font-weight: 700;
	margin-block-end: var(--rf-spacing-lg, 1.5rem);
	color: var(--rf-color-text, #212529);
}

/* Search / filter input */
.rf-plan-sidebar__search {
	display: block;
	width: 100%;
	padding: 0.25rem 0.5rem;
	margin-block-end: var(--rf-spacing-md, 1rem);
	border: 1px solid var(--rf-color-border, #dee2e6);
	border-radius: var(--rf-radius-sm, 0.25rem);
	background: var(--rf-color-bg, #ffffff);
	color: var(--rf-color-text, #212529);
	font-size: 0.8125rem;
	outline: none;
	box-sizing: border-box;
}

.rf-plan-sidebar__search:focus {
	border-color: var(--rf-color-info, #339af0);
	box-shadow: 0 0 0 2px var(--rf-color-info-bg, #e7f5ff);
}

.rf-plan-sidebar__search::placeholder {
	color: var(--rf-color-muted, #6c757d);
}

.rf-plan-sidebar__group {
	margin-block-end: var(--rf-spacing-lg, 1.5rem);
}

.rf-plan-sidebar__group-title {
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--rf-color-muted, #6c757d);
	margin-block-end: var(--rf-spacing-sm, 0.5rem);
}

/* Status sub-group */
.rf-plan-sidebar__status-group {
	margin-block-end: 0.25rem;
}

.rf-plan-sidebar__status-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 0.25rem 0.5rem;
	border: none;
	border-radius: var(--rf-radius-sm, 0.25rem);
	background: transparent;
	color: var(--rf-color-muted, #6c757d);
	font-size: 0.8125rem;
	cursor: pointer;
	text-align: start;
	transition: background 0.15s ease;
}

.rf-plan-sidebar__status-header:hover {
	background: var(--rf-color-surface-active, #f1f3f5);
}

.rf-plan-sidebar__status-header::before {
	content: '▸';
	display: inline-block;
	margin-inline-end: 0.25rem;
	transition: transform 0.15s ease;
	font-size: 0.75em;
}

.rf-plan-sidebar__status-header[aria-expanded="true"]::before {
	transform: rotate(90deg);
}

.rf-plan-sidebar__status-label {
	flex: 1;
	font-weight: 500;
}

.rf-plan-sidebar__status-count {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--rf-color-muted, #6c757d);
	background: var(--rf-color-surface-active, #f1f3f5);
	padding: 0 0.375rem;
	border-radius: var(--rf-radius-full, 9999px);
	min-width: 1.25rem;
	text-align: center;
}

.rf-plan-sidebar__status-items {
	padding-inline-start: var(--rf-spacing-sm, 0.5rem);
}

.rf-plan-sidebar__status-items[hidden] {
	display: none;
}

.rf-plan-sidebar__link {
	display: block;
	padding: 0.25rem 0.5rem;
	border-radius: var(--rf-radius-sm, 0.25rem);
	color: var(--rf-color-text, #212529);
	text-decoration: none;
	font-size: 0.8125rem;
	transition: background 0.15s ease;
}

.rf-plan-sidebar__link:hover {
	background: var(--rf-color-surface-active, #f1f3f5);
}

.rf-plan-sidebar__link--active {
	background: var(--rf-color-info-bg, #e7f5ff);
	color: var(--rf-color-info, #339af0);
	font-weight: 600;
}

.rf-plan-sidebar__link--focused {
	outline: 2px solid var(--rf-color-info, #339af0);
	outline-offset: -2px;
	background: var(--rf-color-surface-active, #f1f3f5);
}

.rf-plan-sidebar__link--blocked {
	border-left: 2px solid var(--rf-color-danger, #ff6b6b);
}

.rf-plan-sidebar__blocker-icon {
	margin-left: auto;
	font-size: 0.75rem;
	color: var(--rf-color-danger, #ff6b6b);
	flex-shrink: 0;
}

/* Views section in sidebar */
.rf-plan-sidebar__view-header {
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--rf-color-muted, #6c757d);
	padding: 0.25rem 0.5rem;
	margin-block-start: 0.25rem;
}

.rf-plan-sidebar__view-items {
	padding-inline-start: 0.25rem;
}

.rf-plan-sidebar__link .rf-plan-sidebar__view-label {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rf-plan-sidebar__link .rf-plan-sidebar__view-count {
	font-size: 0.6875rem;
	font-weight: 600;
	color: var(--rf-color-muted, #6c757d);
	background: var(--rf-color-surface-active, #f1f3f5);
	padding: 0 0.375rem;
	border-radius: var(--rf-radius-full, 9999px);
	min-width: 1.25rem;
	text-align: center;
}

.rf-plan-sidebar__group[data-type="views"] .rf-plan-sidebar__link {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

/* Main content offset when sidebar is present */
.rf-plan-main {
	margin-inline-start: var(--plan-sidebar-width);
	padding: var(--rf-spacing-xl, 2rem);
}

/* Inner wrapper: flex layout when TOC is present */
.rf-plan-main__inner--has-toc {
	display: flex;
	gap: var(--rf-spacing-xl, 2rem);
}
.rf-plan-main__inner--has-toc {
	max-width: calc(60rem + 200px + 2rem);
	margin: 0 auto;
}
.rf-plan-main__inner--has-toc .rf-plan-main__body {
	flex: 1;
	min-width: 0;
	max-width: 60rem;
}

.rf-plan-main__body {
	max-width: 60rem;
	margin: 0 auto;
	padding: 0 2.5rem;
}

/* --------------------------------------------------------------------------
   "On this page" TOC aside
   -------------------------------------------------------------------------- */

.rf-plan-toc {
	width: 200px;
	flex-shrink: 0;
	position: sticky;
	top: var(--rf-spacing-lg, 1.5rem);
	align-self: flex-start;
	max-height: calc(100vh - var(--rf-spacing-xl, 2rem) * 2);
	overflow-y: auto;
}

.rf-on-this-page {
	font-size: 0.8125rem;
}

.rf-on-this-page__title {
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--rf-color-muted, #6c757d);
	margin: 0 0 0.75rem;
}

.rf-on-this-page__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rf-on-this-page__item {
	border-left: 2px solid transparent;
}

.rf-on-this-page__item[data-level="3"] {
	padding-left: 0.75rem;
}

.rf-on-this-page__item a {
	display: block;
	padding: 0.25rem 0.75rem;
	color: var(--rf-color-muted, #6c757d);
	text-decoration: none;
	line-height: 1.4;
}

.rf-on-this-page__item a:hover {
	color: var(--rf-color-text, #212529);
}

.rf-on-this-page__item[data-active] {
	border-left-color: var(--rf-color-info, #339af0);
}

.rf-on-this-page__item[data-active] a {
	color: var(--rf-color-info, #339af0);
}

/* --------------------------------------------------------------------------
   Cross-reference links
   -------------------------------------------------------------------------- */

.rf-plan-ref {
	font-family: var(--rf-font-mono, ui-monospace, monospace);
	font-size: 0.8125rem;
	color: var(--rf-color-info, #339af0);
	text-decoration: none;
	border-bottom: 1px dashed var(--rf-color-info, #339af0);
	padding-inline: 0.25rem;
}

.rf-plan-ref:hover {
	background: var(--rf-color-info-bg, #e7f5ff);
	border-radius: var(--rf-radius-sm, 0.25rem);
	border-bottom-color: transparent;
}

.rf-plan-ref::before {
	margin-inline-end: 0.25rem;
}

.rf-plan-ref[data-type="spec"]::before { content: '📋'; }
.rf-plan-ref[data-type="work"]::before { content: '🔧'; }
.rf-plan-ref[data-type="bug"]::before { content: '🐛'; }
.rf-plan-ref[data-type="decision"]::before { content: '⚖️'; }
.rf-plan-ref[data-type="milestone"]::before { content: '🎯'; }

/* --------------------------------------------------------------------------
   Relationships section
   -------------------------------------------------------------------------- */

.rf-plan-relationships {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--rf-color-border, #dee2e6);
}

.rf-plan-relationships__heading {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--rf-color-text, #212529);
	margin: 0 0 1rem;
}

.rf-plan-relationships__group {
	margin-bottom: 1rem;
}

.rf-plan-relationships__group-title {
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--rf-color-muted, #6c757d);
	margin: 0 0 0.375rem;
}

.rf-plan-relationships__group[data-kind="blocked-by"] .rf-plan-relationships__group-title {
	color: var(--rf-color-danger, #ff6b6b);
}

.rf-plan-relationships__group[data-kind="blocks"] .rf-plan-relationships__group-title {
	color: var(--rf-color-warning, #f59f00);
}

.rf-plan-relationships__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.rf-plan-relationships__item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.375rem 0.5rem;
	border-radius: var(--rf-radius-sm, 0.25rem);
	background: var(--rf-color-surface-active, #f1f3f5);
	font-size: 0.8125rem;
}

.rf-plan-relationships__id {
	font-family: var(--rf-font-mono, ui-monospace, monospace);
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--rf-color-text, #212529);
}

.rf-plan-relationships__status {
	font-size: 0.6875rem;
	font-weight: 500;
	padding: 0.0625rem 0.375rem;
	border-radius: var(--rf-radius-sm, 0.25rem);
	text-transform: lowercase;
}

.rf-plan-relationships__status[data-status="done"],
.rf-plan-relationships__status[data-status="fixed"],
.rf-plan-relationships__status[data-status="accepted"] {
	color: var(--rf-color-success, #51cf66);
	background: var(--rf-color-success-bg, #ebfbee);
}
.rf-plan-relationships__status[data-status="in-progress"],
.rf-plan-relationships__status[data-status="review"] {
	color: var(--rf-color-warning, #f59f00);
	background: var(--rf-color-warning-bg, #fff9db);
}
.rf-plan-relationships__status[data-status="ready"] {
	color: var(--rf-color-info, #339af0);
	background: var(--rf-color-info-bg, #e7f5ff);
}
.rf-plan-relationships__status[data-status="blocked"] {
	color: var(--rf-color-danger, #ff6b6b);
	background: var(--rf-color-danger-bg, #fff5f5);
}
.rf-plan-relationships__status[data-status="draft"] {
	color: var(--rf-color-muted, #6c757d);
	background: var(--rf-color-surface-active, #f1f3f5);
}

.rf-plan-relationships__type {
	font-size: 0.6875rem;
	color: var(--rf-color-muted, #6c757d);
}

.rf-plan-relationships__title {
	color: var(--rf-color-text, #212529);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.rf-plan-relationships__link {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: inherit;
	text-decoration: none;
	width: 100%;
}
.rf-plan-relationships__link:hover .rf-plan-relationships__title {
	color: var(--rf-color-primary, #339af0);
}
.rf-plan-relationships__link:hover .rf-plan-relationships__id {
	color: var(--rf-color-primary, #339af0);
}

/* --------------------------------------------------------------------------
   Copy-to-clipboard button on code blocks
   -------------------------------------------------------------------------- */

.rf-code-wrapper {
	position: relative;
}

.rf-copy-button {
	position: absolute;
	top: 0.25rem;
	right: 0.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 1px solid var(--rf-color-border, #dee2e6);
	border-radius: var(--rf-radius-sm, 0.25rem);
	background: var(--rf-color-surface, #f8f9fa);
	color: var(--rf-color-muted, #6c757d);
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.15s ease;
}

.rf-code-wrapper:hover .rf-copy-button {
	opacity: 1;
}

.rf-copy-button:hover {
	color: var(--rf-color-text, #212529);
	border-color: var(--rf-color-muted, #6c757d);
}

.rf-copy-button--copied {
	color: var(--rf-color-success, #51cf66);
	border-color: var(--rf-color-success, #51cf66);
}

/* --------------------------------------------------------------------------
   Mobile toolbar (hidden on desktop)
   -------------------------------------------------------------------------- */

.rf-plan-toolbar {
	display: none;
	align-items: center;
	gap: 0.75rem;
	padding: 0.625rem 1rem;
	border-block-end: 1px solid var(--rf-color-border, #dee2e6);
	background: var(--rf-color-bg, #fff);
}

.rf-plan-toolbar__hamburger {
	background: none;
	border: none;
	padding: 0.25rem;
	cursor: pointer;
	color: var(--rf-color-muted, #6c757d);
	line-height: 0;
	flex-shrink: 0;
}

.rf-plan-toolbar__hamburger:hover {
	color: var(--rf-color-text, #212529);
}

.rf-plan-toolbar__title {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--rf-color-text, #212529);
}

/* --------------------------------------------------------------------------
   Responsive adjustments
   -------------------------------------------------------------------------- */

/* Hide TOC on medium screens */
@media (max-width: 64rem) {
	.rf-plan-toc {
		display: none;
	}
	.rf-plan-main__inner--has-toc {
		display: block;
	}
}

@media (max-width: 48rem) {
	.rf-plan-toolbar {
		display: flex;
	}

	.rf-plan-sidebar {
		display: none;
	}

	.rf-plan-main {
		margin-inline-start: 0;
		padding: var(--rf-spacing-md, 1rem);
	}

	.rf-plan-main__body {
		padding: 0;
	}

	.rf-plan-dashboard {
		grid-template-columns: 1fr;
		padding: var(--rf-spacing-md, 1rem);
	}
}