@refrakt-md/lumina 0.22.0 → 0.24.0

package/styles/runes/audio.css

@@ -1,7 +1,4 @@
-/* Audio */
-.rf-audio rf-audio {
-	display: block;
-}
+@layer skin {
 .rf-audio__description {
 	padding: 0.75rem 1rem;
 	font-size: var(--rf-text-sm);
@@ -19,22 +16,17 @@
 
 .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: var(--rf-text);
 	font-weight: var(--rf-weight-semibold);
 	color: var(--rf-color-text);
-	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
@@ -45,24 +37,16 @@
 
 /* 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: var(--rf-color-on-primary);
 	cursor: pointer;
-	display: flex;
-	align-items: center;
-	justify-content: center;
 	transition: opacity 0.15s ease;
 	padding: 0;
 }
@@ -78,8 +62,6 @@
 	cursor: not-allowed;
 }
 .rf-audio-player__play svg {
-	width: 1rem;
-	height: 1rem;
 	fill: currentColor;
 }
 
@@ -88,7 +70,6 @@
 	font-size: var(--rf-text-xs);
 	font-variant-numeric: tabular-nums;
 	color: var(--rf-color-muted);
-	min-width: 2.5rem;
 	user-select: none;
 }
 .rf-audio-player__time--current {
@@ -100,51 +81,32 @@
 
 /* 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;
@@ -169,7 +131,6 @@
 	color: var(--rf-color-primary);
 }
 .rf-audio-player__chapter-name {
-	flex: 1;
 	font-size: var(--rf-text-sm);
 	font-weight: var(--rf-weight-medium);
 	color: var(--rf-color-text);
@@ -178,7 +139,6 @@
 	font-size: var(--rf-text-xs);
 	font-variant-numeric: tabular-nums;
 	color: var(--rf-color-muted);
-	flex-shrink: 0;
 }
 
 /* Active track highlight when connected to audio player */
@@ -189,3 +149,5 @@
 .rf-track--active .rf-track__track-name {
 	color: var(--rf-color-primary);
 }
+
+}

package/styles/runes/badge.css

@@ -1,3 +1,4 @@
+@layer skin {
 /* Badge rune — standalone inline chip.
  *
  * The universal chip primitive emitted by `{% badge %}` AND by every
@@ -21,3 +22,5 @@
 	border-radius: var(--rf-radius-sm);
 	white-space: nowrap;
 }
+
+}

package/styles/runes/bar.css

@@ -1,3 +1,4 @@
+@layer skin {
 /* Bar rune — composable handle for the SPEC-080 `bar` layout.
  *
  * Geometry comes from `[data-zone-layout="bar"]` in
@@ -8,3 +9,5 @@
 .rf-bar {
 	margin: 0.5rem 0;
 }
+
+}

package/styles/runes/bento.css

@@ -1,81 +1,14 @@
-/* Bento — a grid of cells, each a card-in-a-grid-track (SPEC-085). */
-
-/* The grid responds to its OWN width, not the viewport, so it reduces columns and
- * stacks correctly inside any container — a doc preview, a sidebar, a narrow page
- * track — not just at viewport breakpoints. The progressive-reduction and collapse
- * rules below are `@container rf-bento` queries against this. */
-.rf-bento {
-	container-type: inline-size;
-	container-name: rf-bento;
-}
+@layer skin {
+/* Bento — skin. A grid of cells, each a card-in-a-grid-track (SPEC-085). The
+ * container-query grid system, cell flex layout, media placement, sizing knobs,
+ * collapse queries, and the stretched link live in @refrakt-md/skeleton
+ * (styles/runes/bento.css). What remains here is skin: the grid gap, the cell
+ * surface chrome + spacing vars, the media-well chrome, type, and bleed resets. */
 
 .rf-bento__grid {
-	/* Effective column count: the author's `--bento-columns` (default 6),
-	 * progressively reduced at breakpoints below. A CSS variable (not the inline
-	 * `--bento-columns`) so the media queries can override it without !important. */
-	--bento-cols-effective: var(--bento-columns, 6);
-	display: grid;
-	grid-template-columns: repeat(var(--bento-cols-effective), 1fr);
-	/* Uniform fixed row tracks in grid mode — never tied to column width (which
-	 * would explode vertically on collapse). Makes row spans meaningful and bounds
-	 * tall guests instead of letting them balloon a row. When the grid collapses to
-	 * a single column it becomes a STACK, and `--bento-row-track` is flipped to
-	 * `auto` (below) so cells size to their content and text is never clipped.
-	 * `--bento-row-height` is the author's `row-height` preset (below); it falls
-	 * back to the theme default `--rf-bento-row-height`. */
-	grid-auto-rows: var(--bento-row-track, var(--bento-row-height, var(--rf-bento-row-height, 24rem)));
 	gap: var(--bento-gap, 1rem);
 }
 
-/* Author row-height presets — the uniform grid row track height (grid mode). */
-.rf-bento[data-row-height="sm"] { --bento-row-height: 16rem; }
-.rf-bento[data-row-height="md"] { --bento-row-height: 24rem; }
-.rf-bento[data-row-height="lg"] { --bento-row-height: 32rem; }
-.rf-bento[data-row-height="xl"] { --bento-row-height: 40rem; }
-
-/* content-height / media-ratio — perpendicular text-zone knobs, each settable as
- * a GRID default (on .rf-bento, inherited by every cell) or a per-CELL override
- * (on .rf-bento-cell, shadowing the inherited value). A cell is either a column
- * cell or a beside cell, so the two never collide:
- *   • column cells (top/bottom/no-media): `content-height` pins the TEXT height;
- *     the media zone (flex:1) absorbs the rest of the row track.
- *   • beside cells (start/end): `media-ratio` pins the MEDIA width; the content
- *     (flex:1) absorbs the rest of the cell width.
- * The cascade is pure CSS variable inheritance — grid sets the var on the
- * section, a cell redeclares it on itself. */
-.rf-bento[data-content-height="sm"], .rf-bento-cell[data-content-height="sm"] { --cell-content-height: 6rem; --cell-content-overflow: hidden; }
-.rf-bento[data-content-height="md"], .rf-bento-cell[data-content-height="md"] { --cell-content-height: 10rem; --cell-content-overflow: hidden; }
-.rf-bento[data-content-height="lg"], .rf-bento-cell[data-content-height="lg"] { --cell-content-height: 14rem; --cell-content-overflow: hidden; }
-.rf-bento[data-content-height="xl"], .rf-bento-cell[data-content-height="xl"] { --cell-content-height: 18rem; --cell-content-overflow: hidden; }
-
-.rf-bento[data-media-ratio="1/3"], .rf-bento-cell[data-media-ratio="1/3"] { --cell-media-ratio: 33.333%; }
-.rf-bento[data-media-ratio="2/5"], .rf-bento-cell[data-media-ratio="2/5"] { --cell-media-ratio: 40%; }
-.rf-bento[data-media-ratio="1/2"], .rf-bento-cell[data-media-ratio="1/2"] { --cell-media-ratio: 50%; }
-.rf-bento[data-media-ratio="3/5"], .rf-bento-cell[data-media-ratio="3/5"] { --cell-media-ratio: 60%; }
-.rf-bento[data-media-ratio="2/3"], .rf-bento-cell[data-media-ratio="2/3"] { --cell-media-ratio: 66.667%; }
-
-/* content-height pins the text area on COLUMN cells only (top/bottom — and
- * no-media cells, which default to `top`). Positive selectors keep this at the
- * same specificity as the mobile/collapse stack resets below, so those still win
- * and the text area returns to natural height when stacked. Both the basis and
- * the clip are gated on content-height being set (via the cascading vars): when
- * unset they fall back to `auto` / `visible`, so the content zone keeps its
- * default overflow and a bleeding showcase (negative margins) still reaches the
- * cell edge. The clip only engages when you actually pin the height. */
-.rf-bento-cell[data-media-position="top"] > .rf-bento-cell__content,
-.rf-bento-cell[data-media-position="bottom"] > .rf-bento-cell__content {
-	flex-basis: var(--cell-content-height, auto);
-	overflow: var(--cell-content-overflow, visible);
-}
-
-/* Cell footprint: resolved `cols`/`rows` spans, auto-capped to the effective
- * column count so a wide cell never overflows the (reduced) grid. */
-.rf-bento-cell {
-	grid-column: span min(var(--cell-cols, 1), var(--bento-cols-effective, 6));
-	grid-row: span var(--cell-rows, 1);
-	min-width: 0;
-}
-
 /* The cell. `:where()` keeps the background at zero specificity so a per-cell
  * `{% tint %}` can repaint it (tint-deferrable). */
 :where(.rf-bento-cell) {
@@ -83,98 +16,52 @@
 }
 .rf-bento-cell {
 	border-radius: var(--rf-radius-container);
-	/* The cell hugs its media with only a thin edge margin; the content zone adds
-	 * the remaining inset back (below), so copy still sits at the full padding
-	 * while media — and a media banner — sits close to the cell border.
-	 * `--bento-media-gap` is the always-on space between media and content (in any
-	 * `data-media-position`), regardless of cell size; the flex gap handles both
-	 * column / column-reverse (top/bottom) and row / row-reverse (start/end). */
+	/* Thin-edge inset model: the cell hugs its media with a thin edge; the content
+	 * zone adds the remaining inset back (below). */
 	--container-padding: 1.25rem;
 	--bento-cell-edge: 0.5rem;
 	--bento-media-gap: var(--rf-spacing-md);
 	padding: var(--bento-cell-edge);
 	border: 1px solid var(--rf-color-border);
-	overflow: hidden;
-	position: relative; /* anchor for the stretched link */
-	display: flex;
-	flex-direction: column;
 	gap: var(--bento-media-gap);
-	min-height: 0;
 }
 
-/* Media placement (data-media-position): top stacks media above content (the
- * default flow order); bottom flips it; start/end place media beside the body. */
-.rf-bento-cell[data-media-position="bottom"] { flex-direction: column-reverse; }
-.rf-bento-cell[data-media-position="start"] { flex-direction: row; align-items: stretch; }
-.rf-bento-cell[data-media-position="end"] { flex-direction: row-reverse; align-items: stretch; }
+/* Media slot shares the cell surface chrome (1px border + recessed well). */
+:where(.rf-bento-cell) [data-section="media"] {
+	border: 1px solid var(--rf-color-border);
+	background: oklch(from var(--rf-color-surface) calc(l - var(--rf-surface-inset-shift)) c h);
+}
+
 .rf-bento-cell[data-media-position="start"] > .rf-bento-cell__media,
 .rf-bento-cell[data-media-position="end"] > .rf-bento-cell__media {
-	flex: 0 0 var(--cell-media-ratio, 42%);
 	margin-bottom: 0;
-	align-self: stretch;
 }
-.rf-bento-cell[data-media-position="start"] > .rf-bento-cell__content,
-.rf-bento-cell[data-media-position="end"] > .rf-bento-cell__content { flex: 1; min-width: 0; }
 
-/* Zones. The WORK-339 media-zone selector sizes/clips any guest — no per-guest
- * CSS here. */
 .rf-bento-cell__media { margin-bottom: 0; }
-/* Text-first: the body keeps its natural height and is never squeezed out by
- * media. In a fixed grid track the media zone (top/bottom) absorbs the leftover
- * height and crops (cover); once collapsed to a stack it becomes an aspect-ratio
- * banner (below). `--bento-media-aspect` is the knob SPEC-086's `frame-aspect`
- * will drive; `--bento-media-anchor` picks which slice shows when cropped (e.g.
- * `top` to peek the top of a tall guest like a phone mockup). */
+
 /* Add the remaining inset back on top of the cell's thin edge, so text sits at
- * the full `--container-padding`. The top inset doubles as the gap between media
- * and copy (media zone carries no margin of its own). */
+ * the full `--container-padding`. */
 .rf-bento-cell__content {
-	display: flex;
-	flex-direction: column;
-	min-height: 0;
-	flex: 0 0 auto;
 	padding: calc(var(--container-padding) - var(--bento-cell-edge));
 }
-.rf-bento-cell[data-media-position="top"] > .rf-bento-cell__media,
-.rf-bento-cell[data-media-position="bottom"] > .rf-bento-cell__media {
-	flex: 1 1 auto;
-	min-height: 0;
-	aspect-ratio: var(--bento-media-aspect, 16 / 9);
-}
-.rf-bento-cell__media > :is(img, video) { object-position: var(--bento-media-anchor, center); }
-/* SPEC-086 — reconcile `frame` facets with bento's existing media vars rather
- * than duplicating them: frame-aspect/anchor (landed on the media zone by the
- * engine) feed the knobs bento already consumes (incl. the collapse path). */
-.rf-bento-cell__media[style*="--frame-aspect"] { --bento-media-aspect: var(--frame-aspect); }
-.rf-bento-cell__media[style*="--frame-anchor"] { --bento-media-anchor: var(--frame-anchor); }
 .rf-bento-cell__title {
 	font-size: var(--rf-text-lg);
 	font-weight: var(--rf-weight-semibold);
 	margin: 0 0 0.5rem;
 }
-.rf-bento-cell__body { min-height: 0; }
-.rf-bento-cell__body > span[property],
-.rf-bento-cell__body > meta { display: none; }
 .rf-bento-cell__body > :first-child { margin-top: 0; }
 .rf-bento-cell__body p:last-child { margin-bottom: 0; }
 .rf-bento-cell__footer {
-	margin-top: auto;
 	padding-top: 0.5rem;
 	border-top: 1px solid var(--rf-color-border);
 	font-size: 0.8125em;
 	color: var(--rf-color-muted);
 }
 .rf-bento-cell__body img {
-	width: 100%;
-	height: auto;
 	border-radius: var(--rf-radius-sm);
 	margin-bottom: 0.75rem;
 }
 
-/* Whole-cell link — stretched overlay; nested links stay clickable. */
-.rf-bento-cell__link { position: absolute; inset: 0; z-index: 0; }
-.rf-bento-cell a:not(.rf-bento-cell__link) { position: relative; z-index: 1; }
-
 /* Drop padding on bleed edges when a showcase bleeds (clipped to a peek by
  * the media-zone + cell overflow). */
 .rf-bento-cell:has(.rf-showcase[data-bleed="bottom"]),
@@ -187,34 +74,4 @@
 .rf-bento-cell:has(.rf-showcase[data-bleed="both"]),
 .rf-bento-cell:has(.rf-showcase[data-bleed="top-end"]) { padding-top: 0; }
 
-/* ─── Binary collapse ─── Above the chosen breakpoint, the grid renders exactly
- * as authored: `columns` and per-cell `cols`/`rows` are honored (span auto-cap
- * above still keeps wide cells inside the grid). Below it, the grid drops to a
- * single stacked column with auto row tracks (cells size to content, never
- * clipped). Default = `sm` (640px), so phones stack but tablet-portrait and up
- * keep the grid. Authors who want graceful column reduction between desktop and
- * stack can opt in via `collapse="gradual"` (not yet implemented). */
-@container rf-bento (max-width: 640px) {
-	/* `[data-collapse=""]` matches the unset (default) case — the engine emits
-	 * the attribute with an empty value when the author doesn't set it, so a bare
-	 * `:not([data-collapse])` wouldn't match. */
-	:is(.rf-bento[data-collapse="sm"], .rf-bento[data-collapse=""]) .rf-bento__grid { --bento-cols-effective: 1; --bento-row-track: auto; }
-	:is(.rf-bento[data-collapse="sm"], .rf-bento[data-collapse=""]) .rf-bento-cell[data-media-position="start"],
-	:is(.rf-bento[data-collapse="sm"], .rf-bento[data-collapse=""]) .rf-bento-cell[data-media-position="end"] { flex-direction: column; }
-	:is(.rf-bento[data-collapse="sm"], .rf-bento[data-collapse=""]) .rf-bento-cell[data-media-position] > .rf-bento-cell__media { flex: 0 0 auto; aspect-ratio: var(--bento-media-aspect, 16 / 9); }
-	:is(.rf-bento[data-collapse="sm"], .rf-bento[data-collapse=""]) .rf-bento-cell[data-media-position] > .rf-bento-cell__content { flex: 0 0 auto; }
-}
-@container rf-bento (max-width: 768px) {
-	.rf-bento[data-collapse="md"] .rf-bento__grid { --bento-cols-effective: 1; --bento-row-track: auto; }
-	.rf-bento[data-collapse="md"] .rf-bento-cell[data-media-position="start"],
-	.rf-bento[data-collapse="md"] .rf-bento-cell[data-media-position="end"] { flex-direction: column; }
-	.rf-bento[data-collapse="md"] .rf-bento-cell[data-media-position] > .rf-bento-cell__media { flex: 0 0 auto; aspect-ratio: var(--bento-media-aspect, 16 / 9); }
-	.rf-bento[data-collapse="md"] .rf-bento-cell[data-media-position] > .rf-bento-cell__content { flex: 0 0 auto; }
-}
-@container rf-bento (max-width: 1024px) {
-	.rf-bento[data-collapse="lg"] .rf-bento__grid { --bento-cols-effective: 1; --bento-row-track: auto; }
-	.rf-bento[data-collapse="lg"] .rf-bento-cell[data-media-position="start"],
-	.rf-bento[data-collapse="lg"] .rf-bento-cell[data-media-position="end"] { flex-direction: column; }
-	.rf-bento[data-collapse="lg"] .rf-bento-cell[data-media-position] > .rf-bento-cell__media { flex: 0 0 auto; aspect-ratio: var(--bento-media-aspect, 16 / 9); }
-	.rf-bento[data-collapse="lg"] .rf-bento-cell[data-media-position] > .rf-bento-cell__content { flex: 0 0 auto; }
 }

package/styles/runes/bg.css

@@ -1,3 +1,4 @@
+@layer skin {
 /* Background — Directive rune for background images, video, overlays, blur */
 
 /* Background layer — absolute positioned behind content. `border-radius:
@@ -6,10 +7,6 @@
  * without needing `overflow: hidden` (though hosts with thin-edge padding
  * still need it so the bg can't poke past the rounded outer edge). */
 [data-name="bg"] {
-	position: absolute;
-	inset: 0;
-	z-index: 0;
-	overflow: hidden;
 	border-radius: inherit;
 	background-image: var(--bg-image);
 	background-size: var(--bg-fit, cover);
@@ -27,51 +24,18 @@
 [data-name="bg"][data-bg-fixed] {
 	background-attachment: fixed;
 }
-/* Content above background — any sibling of the bg layer gets `z-index: 1`
- * so it stacks over the `data-name="bg"` layer (which sits at `z-index: 0`).
- * Keyed off the `data-bg` attribute the engine emits on the bg-owning rune
- * (`engine.ts` → `bgDataAttrs['data-bg'] = ''`), not the per-block BEM
- * modifier class `rf-<block>--has-bg` — the attribute is rune-agnostic so
- * one rule covers card, bento-cell, hero, feature, and anything else that
- * raises a bg layer. */
-[data-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);
 }
-
-/* Scrim (SPEC-088) — a structured legibility treatment behind overlaid text.
- * gradient: a directional darken/lighten; frost: a backdrop blur + tint.
- * `tone` picks the colour, `dir` the heavy edge; strength/blur come inline. */
-[data-name="scrim"] {
-	position: absolute;
-	inset: 0;
-	pointer-events: none;
-	z-index: 1;
-}
 [data-name="scrim"][data-scrim-tone="dark"]  { --scrim-color: 0 0 0; }
 [data-name="scrim"][data-scrim-tone="light"] { --scrim-color: 255 255 255; }
 [data-name="scrim"][data-scrim-dir="top"]    { --scrim-grad-dir: to top; }
@@ -86,3 +50,5 @@
 	backdrop-filter: blur(var(--scrim-blur, 8px));
 	background: rgb(var(--scrim-color, 0 0 0) / 0.18);
 }
+
+}

package/styles/runes/blog.css

@@ -1,3 +1,4 @@
+@layer skin {
 /* Blog — post listing with filtering and sorting */
 .rf-blog {
 	padding: 2rem 0;
@@ -21,8 +22,6 @@
 	max-width: 640px;
 }
 .rf-blog__posts {
-	display: flex;
-	flex-direction: column;
 	gap: 1.5rem;
 }
 .rf-blog__post {
@@ -48,7 +47,6 @@
 	color: var(--rf-color-primary);
 }
 .rf-blog__post time {
-	display: inline-block;
 	font-size: var(--rf-text-sm);
 	color: var(--rf-color-muted);
 	margin-bottom: 0.5rem;
@@ -62,8 +60,6 @@
 
 /* Grid layout */
 .rf-blog--grid .rf-blog__posts {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
 	gap: 1.25rem;
 }
 
@@ -92,3 +88,5 @@
 	font-size: var(--rf-text-xs);
 	margin-bottom: 0.25rem;
 }
+
+}

package/styles/runes/bond.css

@@ -1,8 +1,6 @@
+@layer skin {
 /* Bond */
 .rf-bond {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
 	gap: 0.75rem;
 }
 .rf-bond > span[property="from"],
@@ -12,38 +10,18 @@
 	color: var(--rf-color-text);
 	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 {
-	width: 100%;
 	font-size: var(--rf-text-sm);
 	color: var(--rf-color-muted);
 }
@@ -72,3 +50,5 @@
 .rf-bond[data-status="broken"] {
 	opacity: 0.6;
 }
+
+}

package/styles/runes/breadcrumb.css

@@ -1,26 +1,16 @@
-/* Breadcrumb */
+@layer skin {
+/* Breadcrumb — skin. The contents passthroughs + the flex trail live in
+ * @refrakt-md/skeleton (styles/runes/breadcrumb.css). */
 .rf-breadcrumb {
 	font-size: var(--rf-text-sm);
 	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;
@@ -44,3 +34,5 @@
 	color: var(--rf-color-text);
 	font-weight: var(--rf-weight-medium);
 }
+
+}

package/styles/runes/budget.css

@@ -1,3 +1,4 @@
+@layer skin {
 /* Budget */
 
 /* Duration + currency meta row — flex/gap from the shared
@@ -28,8 +29,6 @@
 
 /* Categories */
 .rf-budget__categories {
-	display: flex;
-	flex-direction: column;
 	gap: 1.5rem;
 }
 
@@ -42,9 +41,6 @@
 	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__subtotal::before {
@@ -72,16 +68,12 @@
 	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;
 }
@@ -91,8 +83,6 @@
 .rf-budget-line-item__description {
 	font-size: var(--rf-text-sm);
 	color: var(--rf-color-muted);
-	flex: 1;
-	min-width: 0;
 }
 .rf-budget-line-item__amount {
 	font-size: var(--rf-text-sm);
@@ -107,14 +97,9 @@
 	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;
 	gap: 1rem;
 }
 .rf-budget__total-label {
@@ -130,15 +115,11 @@
 	font-variant-numeric: tabular-nums;
 }
 .rf-budget__per-day {
-	display: flex;
-	justify-content: space-between;
-	align-items: baseline;
 	gap: 1rem;
 }
 .rf-budget__per-day-label {
 	font-size: var(--rf-text-sm);
 	color: var(--rf-color-muted);
-	min-width: 0;
 }
 .rf-budget__per-day-amount {
 	font-size: var(--rf-text);
@@ -147,11 +128,8 @@
 	white-space: nowrap;
 	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;
 }
+
+}