@refrakt-md/lumina 0.33.0 → 0.34.0

package/styles/dimensions/state.css

@@ -13,8 +13,14 @@
 	}
 
 	@keyframes rf-expand {
-		from { opacity: 0; transform: translateY(-0.5rem); }
-		to { opacity: 1; transform: translateY(0); }
+		from {
+			opacity: 0;
+			transform: translateY(-0.5rem);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
 	}
 
 	/* Active/inactive selection indicators */

package/styles/dimensions/substrate.css

@@ -1,5 +1,5 @@
 @layer skin {
-/* Substrate (SPEC-087) — generated surface pattern.
+	/* Substrate (SPEC-087) — generated surface pattern.
  *
  * The token-driven gradient recipes that realise each pattern ship here in the
  * always-included base layer (not a theme's swappable CSS), so "dots = dots on
@@ -21,42 +21,59 @@
  * and each pattern only feeds custom properties (which never collide with a
  * rune's background). The rune's `background-color` still shows through. */
 
-[data-substrate]:not([data-substrate="none"]) {
-	--substrate-cell: 16px;
-	--substrate-opacity: 0.5;
-	/* `--substrate-boost` (per-pattern) and `--substrate-mode-boost` (light/dark)
+	[data-substrate]:not([data-substrate="none"]) {
+		--substrate-cell: 16px;
+		--substrate-opacity: 0.5;
+		/* `--substrate-boost` (per-pattern) and `--substrate-mode-boost` (light/dark)
 	 * are intentionally NOT set here — only referenced with a `1` fallback — so a
 	 * lower-specificity pattern rule or an inherited dark-mode rule can drive them
 	 * without losing to this (0,2,0) base. The product is clamped to 100% by
 	 * color-mix. */
-	--substrate-ink: color-mix(in oklab, var(--rf-color-border) calc(var(--substrate-opacity) * var(--substrate-boost, 1) * var(--substrate-mode-boost, 1) * 100%), transparent);
-	background-image: var(--substrate-image);
-	background-size: var(--substrate-tile, var(--substrate-cell) var(--substrate-cell));
-	background-position: var(--substrate-pos, 0 0);
-	background-repeat: repeat;
-}
+		--substrate-ink: color-mix(
+			in oklab,
+			var(--rf-color-border)
+				calc(
+					var(--substrate-opacity) *
+					var(--substrate-boost, 1) *
+					var(--substrate-mode-boost, 1) *
+					100%
+				),
+			transparent
+		);
+		background-image: var(--substrate-image);
+		background-size: var(--substrate-tile, var(--substrate-cell) var(--substrate-cell));
+		background-position: var(--substrate-pos, 0 0);
+		background-repeat: repeat;
+	}
 
-/* dots — one tiled radial-gradient. A small dot reads fainter than a 1px line,
+	/* dots — one tiled radial-gradient. A small dot reads fainter than a 1px line,
  * so dots get a per-pattern ink boost. */
-[data-substrate="dots"] {
-	--substrate-image: radial-gradient(var(--substrate-ink) var(--substrate-dot, 1.5px), transparent 0);
-	--substrate-boost: 1.4;
-}
+	[data-substrate="dots"] {
+		--substrate-image: radial-gradient(
+			var(--substrate-ink) var(--substrate-dot, 1.5px),
+			transparent 0
+		);
+		--substrate-boost: 1.4;
+	}
 
-/* grid — two tiled linear-gradients */
-[data-substrate="grid"] {
-	--substrate-image:
-		linear-gradient(var(--substrate-ink) 1px, transparent 1px),
-		linear-gradient(90deg, var(--substrate-ink) 1px, transparent 1px);
-}
+	/* grid — two tiled linear-gradients */
+	[data-substrate="grid"] {
+		--substrate-image:
+			linear-gradient(var(--substrate-ink) 1px, transparent 1px),
+			linear-gradient(90deg, var(--substrate-ink) 1px, transparent 1px);
+	}
 
-/* lines — diagonal hatching (the repeating gradient owns its own spacing) */
-[data-substrate="lines"] {
-	--substrate-image: repeating-linear-gradient(45deg, var(--substrate-ink) 0 1px, transparent 1px var(--substrate-cell));
-	--substrate-tile: auto;
-}
+	/* lines — diagonal hatching (the repeating gradient owns its own spacing) */
+	[data-substrate="lines"] {
+		--substrate-image: repeating-linear-gradient(
+			45deg,
+			var(--substrate-ink) 0 1px,
+			transparent 1px var(--substrate-cell)
+		);
+		--substrate-tile: auto;
+	}
 
-/* cross — plus marks at the centre of each cell, drawn as two perpendicular
+	/* cross — plus marks at the centre of each cell, drawn as two perpendicular
  * thin ellipses (no `mask` — an element-level `mask` would clip the rune's
  * own text content along with the pattern, which is what we don't want). A
  * small plus reads fainter than a 1px line at the same ink opacity, so the
@@ -67,45 +84,52 @@
  * transparent for a zero-length transition, beats the `ink 100%, transparent
  * 100%` form which some renderers collapse to nothing). Ellipse radii at
  * 1px (rather than sub-pixel 0.5px) so the stroke survives DPR rounding. */
-[data-substrate="cross"] {
-	--substrate-image:
-		radial-gradient(ellipse 3px 1px at center, var(--substrate-ink) 100%, transparent 0),
-		radial-gradient(ellipse 1px 3px at center, var(--substrate-ink) 100%, transparent 0);
-	--substrate-pos: center;
-	--substrate-boost: 1.6;
-}
+	[data-substrate="cross"] {
+		--substrate-image:
+			radial-gradient(ellipse 3px 1px at center, var(--substrate-ink) 100%, transparent 0),
+			radial-gradient(ellipse 1px 3px at center, var(--substrate-ink) 100%, transparent 0);
+		--substrate-pos: center;
+		--substrate-boost: 1.6;
+	}
 
-/* checker — alternating filled cells */
-[data-substrate="checker"] {
-	--substrate-image:
-		conic-gradient(var(--substrate-ink) 0 25%, transparent 0 50%, var(--substrate-ink) 0 75%, transparent 0);
-}
+	/* checker — alternating filled cells */
+	[data-substrate="checker"] {
+		--substrate-image: conic-gradient(
+			var(--substrate-ink) 0 25%,
+			transparent 0 50%,
+			var(--substrate-ink) 0 75%,
+			transparent 0
+		);
+	}
 
-[data-substrate="none"] { background-image: none; }
+	[data-substrate="none"] {
+		background-image: none;
+	}
 
-/* substrate-fill="inset" — paint the pattern over the recessed inset fill
+	/* substrate-fill="inset" — paint the pattern over the recessed inset fill
  * (SPEC-087 inset surface) instead of the inherited surface colour. */
-[data-substrate][data-substrate-fill="inset"] {
-	background-color: oklch(from var(--rf-color-surface) calc(l - var(--rf-surface-inset-shift)) c h);
-}
+	[data-substrate][data-substrate-fill="inset"] {
+		background-color: oklch(
+			from var(--rf-color-surface) calc(l - var(--rf-surface-inset-shift)) c h
+		);
+	}
 
-/* Dark mode — the border ink sits close to the dark surface, so patterns need
+	/* Dark mode — the border ink sits close to the dark surface, so patterns need
  * more presence across the board (dots compound their per-pattern boost on top,
  * landing near full strength). Set the multiplier on the dark root so it
  * inherits into every substrate element; mirrors how dark.css triggers dark. */
-[data-theme="dark"],
-[data-color-scheme="dark"] {
-	--substrate-mode-boost: 1.6;
-}
-@media (prefers-color-scheme: dark) {
-	:root:not([data-theme="light"]) {
+	[data-theme="dark"],
+	[data-color-scheme="dark"] {
 		--substrate-mode-boost: 1.6;
 	}
-}
-/* A tint-locked light subtree resets to the light intensity (nearest ancestor
+	@media (prefers-color-scheme: dark) {
+		:root:not([data-theme="light"]) {
+			--substrate-mode-boost: 1.6;
+		}
+	}
+	/* A tint-locked light subtree resets to the light intensity (nearest ancestor
  * wins via inheritance), even when nested inside dark mode. */
-[data-color-scheme="light"] {
-	--substrate-mode-boost: 1;
-}
-
+	[data-color-scheme="light"] {
+		--substrate-mode-boost: 1;
+	}
 }

package/styles/dimensions/surfaces.css

@@ -1,5 +1,5 @@
 @layer skin {
-/* ─── Surface Assignments (SPEC-107) ───────────────────────────────────
+	/* ─── Surface Assignments (SPEC-107) ───────────────────────────────────
  * Surface chrome is selected by the `data-elevation` depth-ladder axis, not by
  * rune name. Each rung maps to a chrome bundle (fill / border / radius /
  * padding / resting shadow); `data-prominence` maps the page-section-header
@@ -8,33 +8,37 @@
  * preserved while a theme can re-point any rune to a different rung.
  * ────────────────────────────────────────────────────────────────────── */
 
-/* Semantic surface/media aliases over the raw token scale (these reference
+	/* Semantic surface/media aliases over the raw token scale (these reference
  * tokens rather than holding raw values, so they live in the styles layer, not
  * the generated token contract). Outer surfaces round at --rf-radius-container;
  * media guests nested inside them round at the smaller --rf-radius-media so they
  * never read as more rounded than their container. SPEC-086's `frame` will
  * override these per-instance. */
-:root {
-	--rf-radius-container: var(--rf-radius-lg);
-	--rf-radius-media: var(--rf-radius-md);
-}
+	:root {
+		--rf-radius-container: var(--rf-radius-lg);
+		--rf-radius-media: var(--rf-radius-md);
+	}
 
-/* ─── Rune Spacing ────────────────────────────────────────────────── */
-/* Only top-level runes get vertical margin; child runes (nav items,
+	/* ─── Rune Spacing ────────────────────────────────────────────────── */
+	/* Only top-level runes get vertical margin; child runes (nav items,
    accordion items, grid cells, etc.) inherit spacing from their parent.
    Layout-chrome navs (menubar in header, columns in footer) are excluded
    so they sit flush with the surrounding header/footer container. */
 
-/* `:where(...)` zeros the selector specificity so per-rune CSS, the
+	/* `:where(...)` zeros the selector specificity so per-rune CSS, the
  * `[data-rune][data-spacing="..."]` attribute rules, and per-instance overrides
  * all win cleanly. Without `:where()` the `:not([data-rune] [data-rune])` clause
  * inflates this default to (0,3,0) — beating the (0,2,0) spacing attribute and
  * masking `spacing="flush"` on top-level runes like hero. */
-:where([data-rune]:not([data-rune] [data-rune]):not([data-layout="menubar"]):not([data-layout="columns"])) {
-	margin: var(--rf-spacing-md) 0;
-}
+	:where(
+		[data-rune]:not([data-rune] [data-rune]):not([data-layout="menubar"]):not(
+			[data-layout="columns"]
+		)
+	) {
+		margin: var(--rf-spacing-md) 0;
+	}
 
-/* ─── Elevation: depth-ladder chrome ──────────────────────────────────
+	/* ─── Elevation: depth-ladder chrome ──────────────────────────────────
  * `flat` and the shadow rungs (`raised` / `floating` / `overlay`) carry a
  * surface: fill, border, radius, and container padding. `sunken` adds the same
  * chrome but recesses its fill below the page. `flush` has no surface boundary
@@ -42,47 +46,47 @@
  * box-shadow on top of the flat chrome (kept distinct from `frame-shadow`'s
  * per-guest drop-shadow, SPEC-107 §1). */
 
-[data-elevation="flat"],
-[data-elevation="sunken"],
-[data-elevation="raised"],
-[data-elevation="floating"],
-[data-elevation="overlay"] {
-	background: var(--rf-color-surface);
-	border: 1px solid var(--rf-color-border);
-	border-radius: var(--rf-radius-container);
-	padding: var(--rune-padding, var(--rf-spacing-md));
-}
+	[data-elevation="flat"],
+	[data-elevation="sunken"],
+	[data-elevation="raised"],
+	[data-elevation="floating"],
+	[data-elevation="overlay"] {
+		background: var(--rf-color-surface);
+		border: 1px solid var(--rf-color-border);
+		border-radius: var(--rf-radius-container);
+		padding: var(--rune-padding, var(--rf-spacing-md));
+	}
 
-/* Sunken — the recessed "darker surface" (e.g. chart / diagram). Derived at
+	/* Sunken — the recessed "darker surface" (e.g. chart / diagram). Derived at
  * use-site via relative-color (lower L, keep C+H) so it recomputes from a
  * tinted `--rf-color-surface` automatically (a static inset-colour token would
  * freeze to the untinted :root). Writes `background` only — never re-bases
  * `--rf-color-surface` — so insets don't compound under nesting; depth is
  * conveyed by border + the darker fill. `--rf-surface-inset-shift: 0` flushes
  * it back to the surface colour. */
-[data-elevation="sunken"] {
-	background: oklch(from var(--rf-color-surface) calc(l - var(--rf-surface-inset-shift)) c h);
-}
+	[data-elevation="sunken"] {
+		background: oklch(from var(--rf-color-surface) calc(l - var(--rf-surface-inset-shift)) c h);
+	}
 
-/* Resting-shadow rungs — depth above the flat surface. */
-[data-elevation="raised"] {
-	box-shadow: var(--rf-shadow-sm);
-}
-[data-elevation="floating"] {
-	box-shadow: var(--rf-shadow-md);
-}
-[data-elevation="overlay"] {
-	box-shadow: var(--rf-shadow-lg);
-}
+	/* Resting-shadow rungs — depth above the flat surface. */
+	[data-elevation="raised"] {
+		box-shadow: var(--rf-shadow-sm);
+	}
+	[data-elevation="floating"] {
+		box-shadow: var(--rf-shadow-md);
+	}
+	[data-elevation="overlay"] {
+		box-shadow: var(--rf-shadow-lg);
+	}
 
-/* Flush — no surface boundary; only vertical rhythm (density-aware via
+	/* Flush — no surface boundary; only vertical rhythm (density-aware via
  * --rune-padding). Replaces the old inline/banner padding buckets; banner runes
  * that want a more generous band declare their own `padding-block`. */
-[data-elevation="flush"] {
-	padding-block: var(--rune-padding, var(--rf-spacing-sm));
-}
+	[data-elevation="flush"] {
+		padding-block: var(--rune-padding, var(--rf-spacing-sm));
+	}
 
-/* ─── Prominence: page-section-header type register ───────────────────
+	/* ─── Prominence: page-section-header type register ───────────────────
  * `data-prominence` re-points the section title size for page-section-header
  * family runes (the engine only emits it where a header role exists). `normal`
  * is the rune's resting size; the other steps ramp away from it, cascading down
@@ -103,17 +107,17 @@
  * override. density.css clears the variable at every rune root, before these
  * rules, so an ancestor's prominence cannot leak into a nested rune's title
  * while a rune carrying both still keeps its own. */
-[data-prominence="quiet"] {
-	--rf-prominence-size: calc(var(--rf-title-size, var(--rf-text-2xl)) * 5 / 6);
-}
-[data-prominence="prominent"] {
-	--rf-prominence-size: calc(var(--rf-title-size, var(--rf-text-2xl)) * 5 / 4);
-}
-[data-prominence="display"] {
-	--rf-prominence-size: calc(var(--rf-title-size, var(--rf-text-2xl)) * 5 / 3);
-}
+	[data-prominence="quiet"] {
+		--rf-prominence-size: calc(var(--rf-title-size, var(--rf-text-2xl)) * 5 / 6);
+	}
+	[data-prominence="prominent"] {
+		--rf-prominence-size: calc(var(--rf-title-size, var(--rf-text-2xl)) * 5 / 4);
+	}
+	[data-prominence="display"] {
+		--rf-prominence-size: calc(var(--rf-title-size, var(--rf-text-2xl)) * 5 / 3);
+	}
 
-/* ─── Media slot shares the surface chrome ───────────────────────────
+	/* ─── Media slot shares the surface chrome ───────────────────────────
  * When a `flat` surface wraps a cover `[data-section="media"]` slot, the slot
  * shares the surface's 1px border and a recessed well fill so the framed media
  * reads as part of the same surface. Scoped via `:where()` for zero specificity
@@ -121,17 +125,16 @@
  * e.g. character / testimonial) opt out — they manage their own circular chrome.
  * The hand-rolled `card` / `bento-cell` surfaces (which sit outside the
  * elevation axis) carry the same media chrome from their own CSS files. */
-:where([data-elevation="flat"]) [data-section="media"]:not([data-media="portrait"]) {
-	border: 1px solid var(--rf-color-border);
-	background: oklch(from var(--rf-color-surface) calc(l - var(--rf-surface-inset-shift)) c h);
-}
+	:where([data-elevation="flat"]) [data-section="media"]:not([data-media="portrait"]) {
+		border: 1px solid var(--rf-color-border);
+		background: oklch(from var(--rf-color-surface) calc(l - var(--rf-surface-inset-shift)) c h);
+	}
 
-/* …but a sunken surface used as a media-zone guest already sits inside the
+	/* …but a sunken surface used as a media-zone guest already sits inside the
  * slot's recessed well, so its own chrome would just double up. Drop it; keep
  * padding so axis labels / SVG keep breathing room. */
-[data-section="media"] > [data-elevation="sunken"] {
-	background: transparent;
-	border: 0;
-}
-
+	[data-section="media"] > [data-elevation="sunken"] {
+		background: transparent;
+		border: 0;
+	}
 }

package/styles/elements/blockquote.css

@@ -1,27 +1,26 @@
 @layer skin {
-/* Blockquote */
-blockquote {
-	position: relative;
-	border-left: 3px solid var(--rf-color-primary);
-	margin: 1.5rem 0;
-	padding: 1rem 1.25rem 1rem 3.25rem;
-	color: var(--rf-color-muted);
-}
-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;
-}
-
+	/* Blockquote */
+	blockquote {
+		position: relative;
+		border-left: 3px solid var(--rf-color-primary);
+		margin: 1.5rem 0;
+		padding: 1rem 1.25rem 1rem 3.25rem;
+		color: var(--rf-color-muted);
+	}
+	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;
+	}
 }

package/styles/elements/code.css

@@ -1,50 +1,52 @@
 @layer skin {
-/* Code block wrapper — the rf-codeblock div comes from the Markdoc fence node
+	/* Code block wrapper — the rf-codeblock div comes from the Markdoc fence node
    schema at build time. Inside codegroup the margin is removed by
    .rf-codegroup .rf-codeblock. */
-.rf-codeblock {
-	position: relative;
-	margin: 1.5rem 0;
-}
+	.rf-codeblock {
+		position: relative;
+		margin: 1.5rem 0;
+	}
 
-.rf-codeblock > pre {
-	margin: 0;
-}
+	.rf-codeblock > pre {
+		margin: 0;
+	}
 
-/* Copy button — injected by the copy behavior at runtime */
-.rf-codeblock__copy {
-	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;
-}
+	/* Copy button — injected by the copy behavior at runtime */
+	.rf-codeblock__copy {
+		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-codeblock:hover .rf-codeblock__copy {
-	opacity: 0.6;
-}
+	.rf-codeblock:hover .rf-codeblock__copy {
+		opacity: 0.6;
+	}
 
-.rf-codeblock__copy:hover {
-	opacity: 1 !important;
-	background: rgba(255, 255, 255, 0.1);
-}
+	.rf-codeblock__copy:hover {
+		opacity: 1 !important;
+		background: rgba(255, 255, 255, 0.1);
+	}
 
-.rf-codeblock__copy--copied {
-	opacity: 1 !important;
-	color: var(--rf-color-success, #4ade80);
-}
+	.rf-codeblock__copy--copied {
+		opacity: 1 !important;
+		color: var(--rf-color-success, #4ade80);
+	}
 
-/* WORK-304 — fence-level annotations: line numbers + line highlight.
+	/* WORK-304 — fence-level annotations: line numbers + line highlight.
  *
  * Shiki renders each line as `<span class="line">…</span>`. The fence
  * schema forwards `data-linenumbers` / `data-highlight-lines` /
@@ -71,49 +73,48 @@
  * consistent across highlighted and plain rows — matches the diff row
  * primitive at `runes/diff.css`. Highlighted rows just colour the
  * border + add the surface tint. */
-.rf-codeblock pre code {
-	display: grid;
-	min-width: max-content;
-}
+	.rf-codeblock pre code {
+		display: grid;
+		min-width: max-content;
+	}
 
-.rf-codeblock pre code .line {
-	border-left: 3px solid transparent;
-}
+	.rf-codeblock pre code .line {
+		border-left: 3px solid transparent;
+	}
 
-/* Line numbers — gutter::before owns the left column. Strip the pre's
+	/* Line numbers — gutter::before owns the left column. Strip the pre's
  * horizontal padding when linenumbers are on so the gutter sits flush
  * against the codeblock edge; the gutter's own padding + right border
  * provides the visual separation from the code body. */
-.rf-codeblock pre[data-linenumbers] {
-	padding-left: 0;
-}
+	.rf-codeblock pre[data-linenumbers] {
+		padding-left: 0;
+	}
 
-.rf-codeblock pre[data-linenumbers] code {
-	counter-reset: rf-line var(--rf-start-line, 0);
-}
+	.rf-codeblock pre[data-linenumbers] code {
+		counter-reset: rf-line var(--rf-start-line, 0);
+	}
 
-.rf-codeblock pre[data-linenumbers] code .line::before {
-	counter-increment: rf-line;
-	content: counter(rf-line);
-	display: inline-block;
-	width: 3em;
-	padding-inline: 0.75rem 0.5rem;
-	margin-right: 0.75rem;
-	text-align: right;
-	color: var(--rf-color-line-number);
-	font-variant-numeric: tabular-nums;
-	user-select: none;
-	border-right: 1px solid var(--rf-color-border);
-}
+	.rf-codeblock pre[data-linenumbers] code .line::before {
+		counter-increment: rf-line;
+		content: counter(rf-line);
+		display: inline-block;
+		width: 3em;
+		padding-inline: 0.75rem 0.5rem;
+		margin-right: 0.75rem;
+		text-align: right;
+		color: var(--rf-color-line-number);
+		font-variant-numeric: tabular-nums;
+		user-select: none;
+		border-right: 1px solid var(--rf-color-border);
+	}
 
-/* Highlighted lines share diff's row template — neutral surface tint
+	/* Highlighted lines share diff's row template — neutral surface tint
  * + primary-coloured left rail, no `+`/`-` sigil. The grid layout on
  * `<code>` above keeps consecutive highlighted rows continuous (no
  * subpixel gaps between the rails). Border is on every `.line` (above)
  * so the content alignment doesn't jump when highlighting a row. */
-.rf-codeblock pre code .line[data-line-status="highlight"] {
-	background: var(--rf-color-line-highlight);
-	border-left-color: var(--rf-color-line-highlight-rail);
-}
-
+	.rf-codeblock pre code .line[data-line-status="highlight"] {
+		background: var(--rf-color-line-highlight);
+		border-left-color: var(--rf-color-line-highlight-rail);
+	}
 }