@refrakt-md/lumina 0.16.0 → 0.17.0

package/dist/tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAE3D;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,YAAY,EAAE,iBAiL1B,CAAC"}
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAE3D;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,YAAY,EAAE,iBA6L1B,CAAC"}

package/dist/tokens.js

@@ -64,6 +64,17 @@ export const luminaTokens = {
             // alias via `extra` below for downstream CSS that still reads it.
             'inline-bg': '#e6e5e3',
         },
+        // WORK-304 — line-level annotation tokens shared by snippet /
+        // codegroup / diff. `highlight` is the neutral surface tint applied
+        // to `[data-line-status="highlight"]` rows; `highlight-rail` is the
+        // left-edge border colour (left as a soft accent so themes can
+        // repaint just the rail without touching the row background);
+        // `number` is the gutter colour for `pre[data-linenumbers]`.
+        line: {
+            highlight: 'color-mix(in srgb, var(--rf-color-text) 6%, transparent)',
+            'highlight-rail': 'var(--rf-color-primary, var(--rf-color-text))',
+            number: 'var(--rf-color-muted)',
+        },
     },
     radius: {
         sm: '6px',

package/dist/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"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"}

package/index.css

@@ -44,6 +44,7 @@
 @import './styles/runes/api.css';
 @import './styles/runes/card.css';
 @import './styles/runes/badge.css';
+@import './styles/runes/bar.css';
 @import './styles/runes/bento.css';
 @import './styles/runes/blog.css';
 @import './styles/runes/bond.css';
@@ -54,6 +55,7 @@
 @import './styles/runes/collection.css';
 @import './styles/runes/relationships.css';
 @import './styles/runes/aggregate.css';
+@import './styles/runes/file-ref.css';
 @import './styles/runes/progress.css';
 @import './styles/runes/changelog.css';
 @import './styles/runes/chart.css';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@refrakt-md/lumina",
   "description": "Lumina theme for refrakt.md — design tokens, CSS, identity transform, and layout configs",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -83,9 +83,9 @@
     "build": "tsc"
   },
   "dependencies": {
-    "@refrakt-md/runes": "0.16.0",
-    "@refrakt-md/transform": "0.16.0",
-    "@refrakt-md/types": "0.16.0"
+    "@refrakt-md/runes": "0.17.0",
+    "@refrakt-md/transform": "0.17.0",
+    "@refrakt-md/types": "0.17.0"
   },
   "devDependencies": {
     "postcss": "^8.4.0"

package/styles/dimensions/metadata.css

@@ -1,19 +1,15 @@
 /* ─── 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.
+ * SPEC-080 typography / geometry split:
+ *  - `[data-meta-type=…]` selectors carry ONLY typography hints
+ *    (monospace, tabular-nums). No padding, no border, no chip geometry.
+ *  - Geometry comes from `[data-zone-layout=…]` selectors (`bar`,
+ *    `definition-list`) and from the universal `.rf-badge` class, which
+ *    is emitted by chip-type fields AND by the standalone `{% badge %}`
+ *    rune.
+ *  - Sentiment rules drive `--meta-color`, which the chip and any
+ *    sentiment-tinted text inherits.
  * ────────────────────────────────────────────────────────────────────── */
 
-/* ─── Rank ─────────────────────────────────────────────────────────── */
-
-[data-meta-rank="primary"],
-[data-meta-rank="secondary"] {
-	--meta-font-size: 0.8125rem;
-}
-
 /* ─── Sentiment ────────────────────────────────────────────────────── */
 
 [data-meta-sentiment="positive"] { --meta-color: var(--rf-color-success, #10b981); }
@@ -21,105 +17,139 @@
 [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 — typography only ─────────────────────────────────── */
 
-/* ─── 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;
+[data-meta-type="id"],
+[data-meta-type="code"] {
+	font-family: var(--rf-font-mono, monospace);
 	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);
+/* IDs read as primary-coloured references wherever they appear (eyebrow
+ * bars, metadata def-lists, etc.) — a semantic treatment of the `id` type,
+ * not a per-layout one. `code` (e.g. API paths) stays neutral monospace. */
+[data-meta-type="id"] {
+	color: var(--rf-color-primary);
 	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);
+	font-size: var(--meta-font-size, 0.8125rem);
 }
 
-/* Tag: bordered pill */
-[data-meta-type="tag"] {
+/* Rating — `value` filled marks out of `total`; each mark carries
+ * `data-filled`. Stars via colour (filled = primary, empty = border). */
+[data-meta-type="rating"] {
 	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);
+	gap: 0.0625rem;
+	line-height: 1;
+}
+[data-meta-type="rating"] span::before {
+	content: '★';
+}
+[data-meta-type="rating"] span[data-filled="true"] {
+	color: var(--rf-color-primary);
+}
+[data-meta-type="rating"] span[data-filled="false"] {
+	color: var(--rf-color-border);
 }
 
-/* ID: bordered pill, monospace */
-[data-meta-type="id"] {
-	display: inline-flex;
+[data-meta-type="status"],
+[data-meta-type="category"],
+[data-meta-type="tag"] {
+	font-size: var(--meta-font-size, 0.8125rem);
+}
+
+/* Linked eyebrow content (matches today's hero behaviour). */
+[data-zone="eyebrow"] a {
+	color: var(--rf-color-primary);
+	text-decoration: underline;
+	text-underline-offset: 0.15em;
+}
+
+/* ─── Layout: bar (SPEC-080) ───────────────────────────────────────── */
+
+/* Horizontal flex row of fields, each in its own intrinsic shape (chip or
+ * bare). Wraps by default; `data-wrap="false"` keeps it on one line. A field
+ * tagged `data-align="end"` (and everything after it) is pushed to the right
+ * edge. */
+[data-zone-layout="bar"] {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.5rem;
 	align-items: center;
-	padding: 0.5em 1.0em;
+}
+[data-zone-layout="bar"][data-wrap="false"] {
+	flex-wrap: nowrap;
+}
+[data-zone-layout="bar"] [data-align="end"] {
+	margin-left: auto;
+}
+
+/* ─── Layout: definition-list ──────────────────────────────────────── */
+
+/* Single source of truth for the `definition-list` primitive, shared by
+ * both the projected metadata zone (`<dl data-zone="…">`) and the authored
+ * `{% deflist %}` rune (`<dl data-rune="deflist">`) — they emit the same
+ * `data-zone-layout` so they render identically (geometry, borders, margin).
+ *
+ * Each row stacks `dt` above `dd`. Rows flow into multiple columns
+ * via `auto-fit` — CSS grid naturally collapses to a single column
+ * when the container is narrower than the minimum, so the same rule
+ * reads fine on mobile and packs dense on wider screens without a
+ * media-query step. The 8rem minimum keeps short label / value pairs
+ * like "Prep" + "15m" tight while leaving room for the per-item border. */
+[data-zone-layout="definition-list"] {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
+	gap: 0.75rem;
+	margin: 1.25rem 0;
+}
+
+[data-zone-layout="definition-list"] > [data-name="row"] {
+	display: flex;
+	flex-direction: column;
+	gap: 0.125rem;
+	min-width: 0;
+	padding: 0.625rem 0.75rem;
 	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);
+	border-radius: var(--rf-radius-sm);
+}
+
+[data-zone-layout="definition-list"] dt {
+	font-size: 0.75rem;
 	font-weight: 500;
 	color: var(--rf-color-muted);
 }
 
+[data-zone-layout="definition-list"] dd {
+	margin: 0;
+	font-size: 0.875rem;
+}
+
+/* Multi-value dd (fields with `splitOn`) renders a row of chips
+ * inside the cell, flowing naturally. */
+[data-zone-layout="definition-list"] dd[data-multi-value] {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.25rem;
+}
+
 /* ─── Labels ──────────────────────────────────────────────────────── */
 
-/* Label element within metadata items — thin, muted style.
- * Themes can override or hide entirely: [data-meta-label] { display: none } */
+/* Label element within a chip — thin, muted; pairs visually with the value */
 [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; ... } */
+/* Visually hidden labels — accessible to screen readers only */
 [data-meta-label-hidden] {
 	position: absolute;
 	width: 1px;
@@ -132,22 +162,29 @@
 	border: 0;
 }
 
-/* ─── Mobile: compact badges ─────────────────────────────────────────── */
+/* ─── Mobile: compact ──────────────────────────────────────────────── */
 
 @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-zone-layout="bar"] {
+		gap: 0.375rem;
+	}
+
+	/* On narrow screens, fall back to the original label-left / value-right
+	 * list: each row's dt/dd flow directly into a two-column grid via
+	 * `display: contents`, which drops the per-item border (no box to paint).
+	 * The border + padding move to the list itself so the whole group reads
+	 * as one bordered card. */
+	[data-zone-layout="definition-list"] {
+		grid-template-columns: max-content 1fr;
+		gap: 0.25rem 1rem;
+		align-items: baseline;
+		padding: 0.75rem 1rem;
+		border: 1px solid var(--rf-color-border);
+		border-radius: var(--rf-radius-sm);
 	}
 
-	[data-meta-sentiment]::before {
-		width: 0.375rem;
-		height: 0.375rem;
+	[data-zone-layout="definition-list"] > [data-name="row"] {
+		display: contents;
 	}
 
 	[data-section="header"] {

package/styles/elements/code.css

@@ -42,3 +42,75 @@
 	opacity: 1 !important;
 	color: var(--rf-color-success, #4ade80);
 }
+
+/* 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` /
+ * `data-lines` (start offset) from the AST node onto both `<pre>` and
+ * `<code>`; the highlight transform sets `data-line-status="highlight"`
+ * on the matching `span.line` rows post-Shiki (file-coordinate math
+ * lives there, not in CSS).
+ *
+ * The starting line counter is seeded from `--rf-start-line` which the
+ * fence transform inlines on `<pre>` when `data-lines` is set
+ * (e.g. lines="74-125" → --rf-start-line: 73 so the first
+ * counter-increment lands on 74). Defaults to 0 so unannotated fences
+ * count from 1.
+ *
+ * `<code>` becomes a CSS grid so:
+ *   - consecutive `.line` rows tile perfectly with no subpixel cracks
+ *     at non-100% zoom (the previous inline-block stacking left faint
+ *     gaps the rail and bg shone through);
+ *   - line bg + rail extend across the full horizontal scroll region
+ *     (grid track width = max-content keeps lines full-width even
+ *     when the pre scrolls).
+ *
+ * Every line carries a 3px transparent left border so geometry stays
+ * 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 .line {
+	border-left: 3px solid transparent;
+}
+
+/* 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] 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);
+}
+
+/* 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);
+}

package/styles/layouts/split.css

@@ -43,22 +43,40 @@
 
 /* ─── 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) {
+/* Clip overflow + round corners when the media zone holds media-like
+   content: an image, or a self-contained block rune that wants the same
+   "fills the slot" treatment (codegroup, snippet, chart, sandbox). Anything
+   else keeps overflow visible so interactive bleed effects (preview,
+   juxtapose) still work. Add new rune-typed media here when they should
+   participate in the same chrome. */
+[data-section="media"]:where(
+  :has(> img),
+  :has(> [data-rune="code-group"]),
+  :has(> [data-rune="snippet"]),
+  :has(> [data-rune="chart"]),
+  :has(> [data-rune="sandbox"])
+) {
   border-radius: var(--rf-radius-lg);
   overflow: hidden;
 }
-[data-section="media"] img {
+[data-section="media"] > :where(
+  img,
+  [data-rune="code-group"],
+  [data-rune="snippet"],
+  [data-rune="chart"],
+  [data-rune="sandbox"]
+) {
   display: block;
   width: 100%;
   height: auto;
   border-radius: var(--rf-radius-lg);
+  margin: 0;
 }
 
-/* Split layout media gets subtle depth */
-[data-layout="split"] > [data-section="media"] img,
-[data-layout="split-reverse"] > [data-section="media"] img {
+/* Split layout images get subtle depth. Block runes carry their own visual
+   weight (topbars, frames) so the shadow is image-only. */
+[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);
 }
 
@@ -109,7 +127,13 @@
     margin-bottom: var(--rune-padding, var(--rf-spacing-md));
     border-radius: 0;
   }
-  [data-media-position="top"] > [data-section="media"] img {
+  [data-media-position="top"] > [data-section="media"] > :where(
+    img,
+    [data-rune="code-group"],
+    [data-rune="snippet"],
+    [data-rune="chart"],
+    [data-rune="sandbox"]
+  ) {
     border-radius: var(--rf-radius-md) var(--rf-radius-md) 0 0;
   }
 
@@ -134,7 +158,13 @@
     margin-bottom: var(--rune-padding, var(--rf-spacing-md));
     border-radius: 0;
   }
-  [data-media-position="top"][data-collapse="sm"] > [data-section="media"] img {
+  [data-media-position="top"][data-collapse="sm"] > [data-section="media"] > :where(
+    img,
+    [data-rune="code-group"],
+    [data-rune="snippet"],
+    [data-rune="chart"],
+    [data-rune="sandbox"]
+  ) {
     border-radius: var(--rf-radius-md) var(--rf-radius-md) 0 0;
   }
   /* Reset grid placement on collapse for header/content */
@@ -157,7 +187,13 @@
     margin-bottom: var(--rune-padding, var(--rf-spacing-md));
     border-radius: 0;
   }
-  [data-media-position="top"][data-collapse="md"] > [data-section="media"] img {
+  [data-media-position="top"][data-collapse="md"] > [data-section="media"] > :where(
+    img,
+    [data-rune="code-group"],
+    [data-rune="snippet"],
+    [data-rune="chart"],
+    [data-rune="sandbox"]
+  ) {
     border-radius: var(--rf-radius-md) var(--rf-radius-md) 0 0;
   }
   [data-media-position="top"][data-collapse="md"] > [data-section="header"],
@@ -179,7 +215,13 @@
     margin-bottom: var(--rune-padding, var(--rf-spacing-md));
     border-radius: 0;
   }
-  [data-media-position="top"][data-collapse="lg"] > [data-section="media"] img {
+  [data-media-position="top"][data-collapse="lg"] > [data-section="media"] > :where(
+    img,
+    [data-rune="code-group"],
+    [data-rune="snippet"],
+    [data-rune="chart"],
+    [data-rune="sandbox"]
+  ) {
     border-radius: var(--rf-radius-md) var(--rf-radius-md) 0 0;
   }
   [data-media-position="top"][data-collapse="lg"] > [data-section="header"],

package/styles/runes/api.css

@@ -1,16 +1,12 @@
 /* Api */
-.rf-api__header {
+
+/* SPEC-080: the endpoint header is a projected `eyebrow` bar (method + path
+ * + auth). Geometry + the auth right-push come from `[data-zone-layout="bar"]`
+ * in dimensions/metadata.css; field shape (method/auth chips, path mono code)
+ * is intrinsic to metaType. */
+.rf-api__eyebrow {
 	padding: 0.5rem 0;
 }
-.rf-api__method {
-	font-family: var(--rf-font-mono);
-}
-.rf-api__path {
-	background: none;
-}
-.rf-api__auth {
-	margin-left: auto;
-}
 .rf-api__body {
 	padding: 0;
 }

package/styles/runes/badge.css

@@ -1,16 +1,13 @@
 /* Badge rune — standalone inline chip.
  *
- * Built atop the metadata pill base (`data-meta-type`), but reshaped to the
- * compact chip look used by plan-progress status counts: **no border**,
- * solid-ish sentiment-tinted background, smaller font + tighter padding, and
- * a small corner radius. Tints come from the universal `--meta-color` set by
- * `dimensions/metadata.css`'s sentiment rules (positive / caution / negative /
- * neutral → success / warning / danger / muted). Background is a `color-mix`
- * of that color, so the chip stays sentiment-flexible — any value the theme
+ * The universal chip primitive emitted by `{% badge %}` AND by every
+ * chip-type field a block renders (`bar` chips, `definition-list` `<dd>`
+ * for chip-type fields). Tints come from the
+ * universal `--meta-color` set by `dimensions/metadata.css`'s
+ * sentiment rules (positive / caution / negative / neutral → success
+ * / warning / danger / muted). Background is a `color-mix` of that
+ * color, so the chip stays sentiment-flexible — any value the theme
  * gives `--meta-color` works without per-status selectors.
- *
- * `rank="primary"` boosts emphasis with a heavier tint and bolder weight,
- * useful for labels that should dominate over neighbours.
  */
 
 .rf-badge {
@@ -24,14 +21,3 @@
 	border-radius: var(--rf-radius-sm);
 	white-space: nowrap;
 }
-
-.rf-badge[data-meta-rank="primary"] {
-	background: color-mix(in srgb, var(--meta-color, var(--rf-color-muted)) 28%, transparent);
-	font-weight: 600;
-}
-
-/* Drop the sentiment dot — the background tint carries the cue for
- * standalone chips, and the dot competes visually with adjacent prose. */
-.rf-badge::before {
-	display: none;
-}

package/styles/runes/bar.css

@@ -0,0 +1,10 @@
+/* Bar rune — composable handle for the SPEC-080 `bar` layout.
+ *
+ * Geometry comes from `[data-zone-layout="bar"]` in
+ * `dimensions/metadata.css` (flex row, wrap, `[data-align="end"]`
+ * right-push). This file only carries the minimum class hook so the rune
+ * participates in CSS tree-shaking. */
+
+.rf-bar {
+	margin: 0.5rem 0;
+}

package/styles/runes/budget.css

@@ -1,9 +1,9 @@
 /* Budget */
+
+/* Duration + currency meta row — flex/gap from the shared
+ * `[data-zone-layout=bar]` primitive; this block owns only its spacing. */
 .rf-budget__meta {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-	gap: 0.5rem;
+	margin-bottom: 0.75rem;
 }
 .rf-budget__preamble {
 	margin-bottom: 1.5rem;