@refrakt-md/lumina 0.32.0 → 0.34.0

package/styles/dimensions/sections.css

@@ -1,67 +1,66 @@
 @layer skin {
-/* ─── Section Anatomy Dimension — skin ──────────────────────────────────
+	/* ─── Section Anatomy Dimension — skin ──────────────────────────────────
  * Zone rhythm (margins, gaps, padding), typography, and borders for the 6
  * standard section roles. The flex zone *containers* (header / preamble /
  * footer) live in @refrakt-md/skeleton (dimensions/sections.css). Rhythm stays
  * here so rune zone overrides resolve against it by source order.
  * ────────────────────────────────────────────────────────────────────── */
 
-/* ─── Header: chrome metadata row (badges, status, icons) ────────── */
-[data-section="header"] {
-	gap: 0.5rem;
-	margin-bottom: 3rem;
-}
+	/* ─── Header: chrome metadata row (badges, status, icons) ────────── */
+	[data-section="header"] {
+		gap: 0.5rem;
+		margin-bottom: 3rem;
+	}
 
-/* ─── Preamble: intro section (eyebrow, headline, blurb) ─────────── */
-[data-section="preamble"] {
-	gap: 0.25rem;
-}
+	/* ─── Preamble: intro section (eyebrow, headline, blurb) ─────────── */
+	[data-section="preamble"] {
+		gap: 0.25rem;
+	}
 
-/* ─── Title: primary heading ──────────────────────────────────────── */
-/* Two inputs, in priority order:
+	/* ─── Title: primary heading ──────────────────────────────────────── */
+	/* Two inputs, in priority order:
  *   --rf-prominence-size  an explicit author `prominence=` (surfaces.css)
  *   --rf-title-size       the resting size for this density (density.css)
  * They were one variable until v0.32.0, which meant a rune could not state its
  * own resting size without also clobbering the author's override — the reason
  * `prominence` was inert on eight runes (WORK-538). Splitting them lets a rune
  * pin its default while `prominence` still wins. */
-[data-section="title"] {
-	font-family: var(--rf-font-sans);
-	font-size: var(--rf-prominence-size, var(--rf-title-size, var(--rf-text-2xl)));
-	font-weight: var(--rf-weight-bold);
-	line-height: var(--rf-leading-tight);
-	color: var(--rf-color-text);
-	margin: 0;
-}
+	[data-section="title"] {
+		font-family: var(--rf-font-sans);
+		font-size: var(--rf-prominence-size, var(--rf-title-size, var(--rf-text-2xl)));
+		font-weight: var(--rf-weight-bold);
+		line-height: var(--rf-leading-tight);
+		color: var(--rf-color-text);
+		margin: 0;
+	}
 
-/* ─── Description: secondary text ─────────────────────────────────── */
-[data-section="description"] {
-	font-size: var(--rf-text);
-	line-height: var(--rf-leading-normal);
-	color: var(--rf-color-muted);
-	margin: var(--rf-spacing-xs) 0 var(--rf-spacing-md);
-}
+	/* ─── Description: secondary text ─────────────────────────────────── */
+	[data-section="description"] {
+		font-size: var(--rf-text);
+		line-height: var(--rf-leading-normal);
+		color: var(--rf-color-muted);
+		margin: var(--rf-spacing-xs) 0 var(--rf-spacing-md);
+	}
 
-/* ─── Body: main content ──────────────────────────────────────────── */
-[data-section="body"] {
-	line-height: var(--rf-leading-relaxed);
-	color: var(--rf-color-text);
-}
+	/* ─── Body: main content ──────────────────────────────────────────── */
+	[data-section="body"] {
+		line-height: var(--rf-leading-relaxed);
+		color: var(--rf-color-text);
+	}
 
-/* ─── Footer: actions and links ───────────────────────────────────── */
-[data-section="footer"] {
-	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);
-}
+	/* ─── Footer: actions and links ───────────────────────────────────── */
+	[data-section="footer"] {
+		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"] {
-	/* Media zones manage their own spacing via their layout (split gap, cell
+	/* ─── Media: visual content ───────────────────────────────────────── */
+	[data-section="media"] {
+		/* Media zones manage their own spacing via their layout (split gap, cell
 	 * padding, flow margins); a blanket block margin here misaligns media in
 	 * flex/beside layouts, so keep it neutral. */
-	margin: 0;
-}
-
+		margin: 0;
+	}
 }

package/styles/dimensions/sequence.css

@@ -1,64 +1,63 @@
 @layer skin {
-/* === Sequential Items — skin ===
+	/* === Sequential Items — skin ===
  * The connector lines (borders), the marker chrome (fill, radius, shadow), the
  * counter type, and the layout gaps. The counter mechanism, list resets, item
  * geometry, and marker box placement live in @refrakt-md/skeleton
  * (dimensions/sequence.css). */
 
-/* Numbered — counter circle chrome + type. */
-[data-sequence="numbered"] > li::before {
-	font-size: var(--rf-text-xs);
-	font-weight: var(--rf-weight-bold);
-	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 — the line is a left border; the dot is the marker. */
-[data-sequence="connected"] > li {
-	border-left: 2px solid var(--rf-color-border);
-}
-
-[data-sequence="connected"] > li:last-child {
-	border-left-color: transparent;
-}
-
-[data-sequence="connected"] > li::before {
-	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);
-}
-
-/* Connected horizontal — the line moves to the top border; gap spaces the items. */
-[data-sequence="connected"][data-sequence-direction="horizontal"] {
-	gap: 2rem;
-}
-
-[data-sequence="connected"][data-sequence-direction="horizontal"] > li {
-	border-left: none;
-	border-top: 2px solid var(--rf-color-border);
-}
-
-[data-sequence="connected"][data-sequence-direction="horizontal"] > li:last-child {
-	border-top-color: var(--rf-color-border);
-}
-
-/* === Density interaction === */
-
-/* Compact: smaller circle keeps the same type scale. */
-[data-density="compact"] [data-sequence="numbered"] > li::before {
-	font-size: var(--rf-text-xs);
-}
-
-/* Minimal: drop the connector line on the collapsed list. */
-[data-density="minimal"] [data-sequence="connected"] > li {
-	border-left: none;
-}
-
+	/* Numbered — counter circle chrome + type. */
+	[data-sequence="numbered"] > li::before {
+		font-size: var(--rf-text-xs);
+		font-weight: var(--rf-weight-bold);
+		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 — the line is a left border; the dot is the marker. */
+	[data-sequence="connected"] > li {
+		border-left: 2px solid var(--rf-color-border);
+	}
+
+	[data-sequence="connected"] > li:last-child {
+		border-left-color: transparent;
+	}
+
+	[data-sequence="connected"] > li::before {
+		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);
+	}
+
+	/* Connected horizontal — the line moves to the top border; gap spaces the items. */
+	[data-sequence="connected"][data-sequence-direction="horizontal"] {
+		gap: 2rem;
+	}
+
+	[data-sequence="connected"][data-sequence-direction="horizontal"] > li {
+		border-left: none;
+		border-top: 2px solid var(--rf-color-border);
+	}
+
+	[data-sequence="connected"][data-sequence-direction="horizontal"] > li:last-child {
+		border-top-color: var(--rf-color-border);
+	}
+
+	/* === Density interaction === */
+
+	/* Compact: smaller circle keeps the same type scale. */
+	[data-density="compact"] [data-sequence="numbered"] > li::before {
+		font-size: var(--rf-text-xs);
+	}
+
+	/* Minimal: drop the connector line on the collapsed list. */
+	[data-density="minimal"] [data-sequence="connected"] > li {
+		border-left: none;
+	}
 }

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;
+	}
 }