@refrakt-md/lumina 0.15.0 → 0.16.1

package/styles/runes/badge.css

@@ -1,33 +1,37 @@
-/* Badge rune — standalone inline pill that visually stands out from prose.
+/* Badge rune — standalone inline chip.
  *
- * Unlike the metadata badges that appear inside card chrome (plan items,
- * recipe meta, work item headers), standalone {% badge %} runes are meant
- * to pop. They reuse the universal `--meta-color` set by
- * dimensions/metadata.css's sentiment rules, applied as a sentiment-tinted
- * border, a low-opacity sentiment-tinted background, and sentiment-coloured
- * text. The leading sentiment dot from metadata.css is dropped — the
- * background tint already carries the sentiment cue.
+ * 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
+ * gives `--meta-color` works without per-status selectors.
  *
- * rank="primary" boosts emphasis with a heavier background tint and a
- * bolder weight, useful for "Popular" / "Featured" labels that should
- * dominate over their neighbours.
+ * `rank="primary"` boosts emphasis with a heavier tint and bolder weight,
+ * useful for labels that should dominate over neighbours.
  */
 
 .rf-badge {
 	vertical-align: baseline;
-	border-color: var(--meta-color, var(--rf-color-border));
-	background: color-mix(in srgb, var(--meta-color, transparent) 12%, transparent);
-	color: var(--meta-color, var(--rf-color-text));
+	border: none;
+	background: color-mix(in srgb, var(--meta-color, var(--rf-color-muted)) 10%, transparent);
+	color: var(--meta-color, var(--rf-color-muted));
+	font-size: 0.75rem;
 	font-weight: 500;
+	padding: 0.125rem 0.5rem;
+	border-radius: var(--rf-radius-sm);
+	white-space: nowrap;
 }
 
 .rf-badge[data-meta-rank="primary"] {
-	background: color-mix(in srgb, var(--meta-color, transparent) 22%, transparent);
+	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 badges, and the dot competes visually with adjacent prose. */
+ * standalone chips, and the dot competes visually with adjacent prose. */
 .rf-badge::before {
 	display: none;
 }

package/styles/runes/card.css

@@ -0,0 +1,83 @@
+/* card — generic content card (SPEC-070).
+ *
+ * Borderless (no outline) but with a soft surface fill — the surface + the
+ * structure (media split, footer separator) carry the card, no border needed.
+ * The media|content split + responsive collapse + mobile full-bleed media
+ * header come from the shared layouts/split.css (keyed off data-layout /
+ * data-section="media" / data-name="content" / data-media-position).
+ */
+
+.rf-card {
+	position: relative; /* anchor for the stretched link + media bleed */
+	padding: var(--rune-padding, var(--rf-spacing-md));
+	border-radius: var(--rf-radius-md);
+	background: var(--rf-color-surface);
+}
+
+.rf-card:hover {
+	background: var(--rf-color-surface-hover);
+}
+
+.rf-card__body > :first-child { margin-top: 0; }
+.rf-card__body > :last-child { margin-bottom: 0; }
+
+/* Eyebrow — a leading paragraph immediately before a heading, the same kicker
+ * treatment as page-section / recipe. */
+.rf-card__eyebrow {
+	font-size: 0.8rem;
+	font-weight: 600;
+	letter-spacing: 0.06em;
+	text-transform: uppercase;
+	color: var(--rf-color-primary);
+	margin: 0 0 0.375rem;
+}
+
+/* The body's leading heading is the card title; drop its prose top margin so it
+ * hugs the eyebrow (or the top of the card) instead of opening a gap. */
+.rf-card__title {
+	margin-top: 0;
+}
+
+.rf-card__footer {
+	margin-top: var(--rf-spacing-sm);
+	padding-top: var(--rf-spacing-sm);
+	border-top: 1px solid var(--rf-color-border);
+	font-size: 0.8125em;
+	color: var(--rf-color-muted);
+}
+
+/* In a collection grid, each row stretches its items to the tallest (see
+ * collection.css); these rules make a stacked card spend that height usefully:
+ * the card becomes a column, its content fills the leftover height, and the
+ * body grows so footers drop to a common baseline across the row. Scoped to
+ * stacked cards so a split card's grid (layouts/split.css) is left intact. */
+.rf-collection[data-layout='grid'] .rf-card[data-layout='stacked'] {
+	display: flex;
+	flex-direction: column;
+	/* The grid/flex wrapper stretches the card, but a nested flex container
+	 * doesn't always pass that height to its own flex children; pin it so the
+	 * content/body flex:1 reliably fills. */
+	height: 100%;
+}
+.rf-collection[data-layout='grid'] .rf-card[data-layout='stacked'] > .rf-card__content {
+	flex: 1;
+}
+.rf-collection[data-layout='grid'] .rf-card[data-layout='stacked'] .rf-card__content {
+	display: flex;
+	flex-direction: column;
+}
+.rf-collection[data-layout='grid'] .rf-card[data-layout='stacked'] .rf-card__body {
+	flex: 1;
+}
+
+/* Whole-card stretched link — covers the card; real links in body/footer
+ * sit above it via position:relative. */
+.rf-card__link {
+	position: absolute;
+	inset: 0;
+	z-index: 0;
+}
+.rf-card a:not(.rf-card__link) {
+	position: relative;
+	z-index: 1;
+}

package/styles/runes/codegroup.css

@@ -95,6 +95,19 @@
 	word-break: break-word;
 	overflow-x: hidden;
 }
+/* WORK-304 — the standalone codeblock CSS at `elements/code.css`
+ * sets `display: grid; min-width: max-content` on `pre code` so
+ * row tints + line numbers extend across the horizontal scroll
+ * region. That sizing actively prevents wrapping (the code track
+ * is locked at max-content). Inside `overflow="wrap"` codegroups
+ * we WANT wrapping, so revert the code element back to a plain
+ * block with no min-width constraint. Lines stay block-flow so
+ * Shiki's `<span class="line">` children wrap with the pre's
+ * `white-space: pre-wrap`. */
+.rf-codegroup[data-overflow="wrap"] pre code {
+	display: block;
+	min-width: 0;
+}
 .rf-codegroup[data-overflow="hide"] pre {
 	overflow-x: hidden;
 }

package/styles/runes/collection.css

@@ -0,0 +1,166 @@
+/* Collection — list / grid / table / cards of registry entities (SPEC-070).
+ *
+ * The block is layout-agnostic; the `data-layout` attribute on the wrapper
+ * selects the arrangement. Built-in items carry `.rf-collection__card` /
+ * `__item`; a body template emits its own markup inside `.rf-collection__item`.
+ */
+
+.rf-collection {
+	margin: var(--rf-spacing-md) 0;
+}
+
+/* Preamble — rendered above items only when the query is non-empty, so a
+ * heading/intro can live inside the rune and vanish with an empty section. */
+.rf-collection__preamble > :first-child { margin-top: 0; }
+
+/* Empty state — shown in place of items when the query yields nothing. */
+.rf-collection__empty {
+	color: var(--rf-color-muted);
+	font-size: 0.9375em;
+}
+
+.rf-collection__items {
+	display: flex;
+	flex-direction: column;
+	gap: var(--rf-spacing-sm);
+}
+
+/* grid arranges items into responsive columns; list stays a stacked flow.
+ * Item chrome (a card box, bare row, …) comes from the item, not the layout. */
+.rf-collection[data-layout='grid'] .rf-collection__items {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+	gap: var(--rf-spacing-md);
+	align-items: stretch;
+}
+
+/* Uniform heights per row: grid stretches each item to the tallest in its row;
+ * a body-template item then lets its card fill that stretched height. */
+.rf-collection[data-layout='grid'] .rf-collection__item {
+	display: flex;
+}
+.rf-collection[data-layout='grid'] .rf-collection__item > * {
+	flex: 1;
+	min-width: 0;
+}
+
+/* Grouped grid: the grid belongs to each group (its items are the cells), not
+ * to __items — whose children are the group blocks (heading groups) or the
+ * accordion wrapper. Left on __items, each group becomes a single cell, i.e. a
+ * column per group. So when __items holds groups it stacks them, and each
+ * group becomes the grid instead, with the group title spanning every column. */
+.rf-collection[data-layout='grid'] .rf-collection__items:has(.rf-collection__group),
+.rf-collection[data-layout='grid'] .rf-collection__items:has(.rf-accordion) {
+	display: flex;
+	flex-direction: column;
+	gap: var(--rf-spacing-md);
+}
+.rf-collection[data-layout='grid'] .rf-collection__group {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+	gap: var(--rf-spacing-md);
+	align-items: stretch;
+}
+.rf-collection[data-layout='grid'] .rf-collection__group-title {
+	grid-column: 1 / -1;
+}
+
+.rf-collection__item {
+	min-width: 0;
+}
+
+.rf-collection__card {
+	display: flex;
+	flex-direction: column;
+	gap: var(--rf-spacing-xs);
+	padding: var(--rf-spacing-md);
+	border: 1px solid var(--rf-color-border);
+	border-radius: var(--rf-radius-md);
+	background: var(--rf-color-surface);
+}
+
+.rf-collection__card:hover {
+	background: var(--rf-color-surface-hover);
+}
+
+.rf-collection__title {
+	font-weight: 600;
+	color: var(--rf-color-text);
+	text-decoration: none;
+}
+
+.rf-collection__title:hover {
+	color: var(--rf-color-primary);
+}
+
+.rf-collection__field {
+	font-size: 0.875em;
+	color: var(--rf-color-muted);
+}
+
+/* grouping */
+.rf-collection__group {
+	margin-top: var(--rf-spacing-md);
+	display: flex;
+	flex-direction: column;
+	/* Tight default for short item rows (the built-in title link, no body). */
+	gap: var(--rf-spacing-xs);
+}
+/* Modestly roomier when items carry a body template (block content — a card,
+ * callout, list, …), so they don't collide. Body-template items are marked
+ * `data-block` by the resolver; the built-in inline title rows are not.
+ * Mirrors the rf-relationships rule. */
+.rf-collection__group:has(.rf-collection__item[data-block]) {
+	gap: var(--rf-spacing-sm);
+}
+
+/* Block-content item — let the body template (card / callout / etc.) fill the
+ * container instead of shrink-fitting. No-op in grid mode (items there are
+ * already `display: flex` with `flex: 1` on the child). Trim the outer margins
+ * of the template's first/last block so the group `gap` controls inter-item
+ * spacing — works for any block content, not a wrapper element. */
+.rf-collection__item[data-block] {
+	display: block;
+}
+.rf-collection__item[data-block] > :first-child {
+	margin-top: 0;
+}
+.rf-collection__item[data-block] > :last-child {
+	margin-bottom: 0;
+}
+
+.rf-collection__group-title {
+	margin: 0 0 var(--rf-spacing-sm);
+	font-size: 0.875em;
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+	color: var(--rf-color-muted);
+}
+
+/* table layout */
+.rf-collection__table {
+	width: 100%;
+	border-collapse: collapse;
+}
+
+.rf-collection__table th,
+.rf-collection__table td {
+	padding: var(--rf-spacing-sm);
+	text-align: left;
+	border-bottom: 1px solid var(--rf-color-border);
+}
+
+.rf-collection__table th {
+	font-size: 0.875em;
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+	color: var(--rf-color-muted);
+}
+
+/* Heading-template cells (`layout="table"` body) wrap their content as
+ * markdown paragraphs, which pick up the global `p { margin-bottom: 1rem }`
+ * and leave dead space inside each row. Drop it inside the table — table
+ * cells don't want paragraph spacing. */
+.rf-collection__table td p {
+	margin: 0;
+}

package/styles/runes/conversation.css

@@ -47,7 +47,12 @@
 }
 .rf-conversation-message__body p { margin: 0; }
 .rf-conversation-message__body p + p { margin-top: 0.5rem; }
-.rf-conversation-message__body > span[property],
+/* The speaker name lives inline-bold inside the bubble (the explicit form
+ * authors it that way, and the named-speakers form injects it the same way),
+ * so the property-carrier span is data only — hide it. Same for the meta
+ * tags the engine consumes. `data-field` is the post-engine attribute set by
+ * createComponentRenderable. */
+.rf-conversation-message > span[data-field="speaker"],
+.rf-conversation-message > meta[data-field] { display: none; }
+.rf-conversation-message__body > span[data-field],
 .rf-conversation-message__body > meta { display: none; }
-.rf-conversation-message > span[property="speaker"],
-.rf-conversation-message > meta[property] { display: none; }

package/styles/runes/diff.css

@@ -2,7 +2,19 @@
 .rf-diff {
 	border: 1px solid var(--rf-color-border);
 	border-radius: var(--rf-radius-lg);
-	overflow: hidden;
+	/* WORK-304 — horizontal scroll lives on `.rf-diff` itself, not on
+	 * `.rf-diff__split-container`. On mobile the split-container's
+	 * `min-width: 40rem` makes it wider than the viewport; previously
+	 * `.rf-diff { overflow: hidden }` clipped the right panel and the
+	 * touch scroll had nowhere to land. Moving the scroll affordance
+	 * up one level lets users swipe the entire diff sideways to
+	 * reveal the off-screen panel; the border-radius still clips the
+	 * children at the rounded corners because `overflow-x: auto` is
+	 * non-visible. `overflow-y: hidden` keeps the vertical clip for
+	 * the rounded top/bottom. */
+	overflow-x: auto;
+	overflow-y: hidden;
+	overscroll-behavior-x: contain;
 	font-size: 0.875rem;
 	background: var(--rf-color-code-bg);
 }
@@ -14,12 +26,19 @@
 	color: var(--rf-color-muted);
 	background: var(--rf-color-surface);
 	border-bottom: 1px solid var(--rf-color-border);
+	/* `.rf-diff` is the horizontal scroll container (so mobile users
+	 * can swipe to reveal the off-screen split panel). Without
+	 * sticky, the header would scroll horizontally along with the
+	 * content and the filename label would slide off-screen.
+	 * `position: sticky; left: 0` pins the header to the visible left
+	 * edge of the scroll viewport at all scroll positions. WORK-304. */
+	position: sticky;
+	left: 0;
 }
 .rf-diff__split-container {
 	display: grid;
 	grid-template-columns: 1fr 1fr;
 	min-width: 40rem;
-	overflow-x: auto;
 }
 .rf-diff__split-container .rf-diff__panel:first-child {
 	border-right: 1px solid var(--rf-color-border);
@@ -31,25 +50,68 @@
 	border-radius: 0;
 	background: var(--rf-color-code-bg);
 	overflow-x: auto;
+	overscroll-behavior-x: contain;
 	font-family: var(--rf-font-mono);
 	font-size: 0.8125rem;
 	line-height: 1.6;
 }
+
+/* WORK-304 — inner rows wrapper, sized as `display: grid; min-width:
+ * max-content` so every `.rf-diff__line` (grid item) spans the
+ * widest line's intrinsic width. The pre is the scroll container
+ * (`overflow-x: auto`); this wrapper is what actually expands past
+ * the pre's visible width when a line overflows, triggering the
+ * pre's scroll and keeping the row tint (+/-/highlight) contiguous
+ * across the full scroll region. Mirrors the
+ * `pre code { display: grid; min-width: max-content }` pattern in
+ * the standalone codeblock at `elements/code.css`. */
+.rf-diff__rows {
+	display: grid;
+	min-width: max-content;
+}
+/* WORK-304 — annotated line primitive. Three states share one row
+ * shape (`add`, `remove`, `highlight`); only the tint token and the
+ * gutter rail colour change. The same selector form is reused by the
+ * standalone code block for `data-line-status="highlight"` via the
+ * `.rf-codeblock` rules below.
+ *
+ * `display: block` + inline-block children (not `display: flex`) for
+ * the line container so the line's intrinsic max-content is the
+ * unambiguous sum of children's intrinsic widths — flex container
+ * max-content was being clipped by the flex-basis / flex-grow /
+ * flex-shrink combination depending on browser, leaving the row
+ * tint cut off at the text width when the user scrolled
+ * horizontally. `white-space: nowrap` keeps the inline-block
+ * children on a single row (the children themselves preserve their
+ * own `white-space: pre` for the code). `min-width: max-content`
+ * keeps the line at least as wide as its content (full row tint
+ * when content overflows the visible viewport); default width =
+ * 100% of pre keeps it filling the visible width on short rows. */
 .rf-diff__line {
+	/* `display: flex` for internal layout (gutters + content side
+	 * by side). The line's WIDTH is determined by the parent grid
+	 * track (`.rf-diff__code`'s `grid-template-columns:
+	 * minmax(100%, max-content)`), not by the flex sizing here —
+	 * so the row tint covers the full grid column regardless of
+	 * how flex sizing would have resolved. */
 	display: flex;
 	min-height: 1.6em;
 	border-left: 3px solid transparent;
 }
-.rf-diff__line[data-type="equal"]  { background: transparent; }
-.rf-diff__line[data-type="remove"] {
+.rf-diff__line[data-line-status="equal"]  { background: transparent; }
+.rf-diff__line[data-line-status="remove"] {
 	background: color-mix(in srgb, var(--rf-color-danger) 18%, transparent);
 	border-left-color: var(--rf-color-danger);
 }
-.rf-diff__line[data-type="add"] {
+.rf-diff__line[data-line-status="add"] {
 	background: color-mix(in srgb, var(--rf-color-success) 18%, transparent);
 	border-left-color: var(--rf-color-success);
 }
-.rf-diff__line[data-type="empty"]  { background: transparent; }
+.rf-diff__line[data-line-status="highlight"] {
+	background: var(--rf-color-line-highlight);
+	border-left-color: var(--rf-color-line-highlight-rail, var(--rf-color-primary));
+}
+.rf-diff__line[data-line-status="empty"]  { background: transparent; }
 .rf-diff__gutter-num {
 	flex-shrink: 0;
 	padding: 0 0.5rem;
@@ -65,17 +127,23 @@
  * Remove lines colour the before-number; add lines colour the after-number.
  * The opposite side renders empty (no number) which itself signals "nothing
  * here on this side". */
-.rf-diff__line[data-type="remove"] .rf-diff__gutter-num[data-side="before"] {
+.rf-diff__line[data-line-status="remove"] .rf-diff__gutter-num[data-side="before"] {
 	color: var(--rf-color-danger);
 }
-.rf-diff__line[data-type="add"] .rf-diff__gutter-num[data-side="after"] {
+.rf-diff__line[data-line-status="add"] .rf-diff__gutter-num[data-side="after"] {
 	color: var(--rf-color-success);
 }
 .rf-diff .rf-codeblock {
 	margin: 0;
 }
 .rf-diff__line-content {
-	flex: 1;
+	/* `flex: 1 0 auto` so line-content contributes its
+	 * `white-space: pre` text width to the line's intrinsic
+	 * max-content (which the parent grid track reads from); grow:1
+	 * lets it fill any free space in the row beyond the gutters
+	 * when the grid track is wider than the line's natural size
+	 * (short content / wide visible viewport). WORK-304. */
+	flex: 1 0 auto;
 	white-space: pre;
 	padding-right: 1rem;
 	/* Pin the row to 1.6em even when the text is empty — the highlighted

package/styles/runes/drawer.css

@@ -70,8 +70,26 @@ section.rf-drawer .rf-drawer__title {
 section.rf-drawer .rf-drawer__body > :first-child { margin-top: 0; }
 section.rf-drawer .rf-drawer__body > :last-child { margin-bottom: 0; }
 
+/* In-flow footer — small text, top divider, mirrors the dialog-mode look so
+ * authors get the same chrome whether JS is enhancing or not. */
+section.rf-drawer .rf-drawer__footer {
+	display: block;
+	margin-top: var(--rf-spacing-md);
+	padding-top: var(--rf-spacing-sm);
+	border-top: 1px solid var(--rf-drawer-border);
+	font-size: 0.875rem;
+	color: var(--rf-color-muted);
+}
+section.rf-drawer .rf-drawer__footer > :first-child { margin-top: 0; }
+section.rf-drawer .rf-drawer__footer > :last-child { margin-bottom: 0; }
+
 /* ─── JS / dialog mode ─────────────────────────────────────────── */
 
+/* Dialog base. Crucially the `display: flex` rule below is scoped to the
+ * `[open]` state — without that scope, declaring `display: flex` on the
+ * bare `dialog.rf-drawer` overrides the browser UA's `display: none` for
+ * closed dialogs, so the closed dialog renders visibly as an empty box
+ * positioned by the side `inset` rules. */
 dialog.rf-drawer {
 	box-sizing: border-box;
 	background: var(--rf-drawer-bg);
@@ -81,28 +99,36 @@ dialog.rf-drawer {
 	box-shadow: var(--rf-drawer-shadow);
 	padding: 0;
 	margin: 0;
-	overflow: auto;
+	overflow: hidden;
 	max-width: calc(100vw - 2 * var(--rf-drawer-gutter));
 	max-height: calc(100vh - 2 * var(--rf-drawer-gutter));
 }
 
+/* Flex column layout only when the dialog is actually open. The header
+ * and footer pin via `flex: 0 0 auto`; the body scrolls via `flex: 1 1
+ * auto; overflow-y: auto`. The dialog's `max-height` cap on the dialog
+ * provides the scroll context. */
+dialog.rf-drawer[open] {
+	display: flex;
+	flex-direction: column;
+}
+
 dialog.rf-drawer::backdrop {
 	background: rgb(0 0 0 / 0.35);
 	backdrop-filter: blur(2px);
 }
 
 dialog.rf-drawer .rf-drawer__header {
+	flex: 0 0 auto;
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
 	gap: var(--rf-spacing-md);
 	padding: var(--rf-spacing-md) var(--rf-spacing-lg);
 	border-bottom: 1px solid var(--rf-drawer-border);
-	position: sticky;
-	top: 0;
 	background: var(--rf-drawer-bg);
-	z-index: 1;
-}dialog.rf-drawer .rf-drawer__title {
+}
+dialog.rf-drawer .rf-drawer__title {
 	margin: 0;
 	font-size: 1.05rem;
 	font-weight: 600;
@@ -126,8 +152,26 @@ dialog.rf-drawer .rf-drawer__close:hover {
 }
 
 dialog.rf-drawer .rf-drawer__body {
+	flex: 1 1 auto;
+	overflow-y: auto;
 	padding: var(--rf-spacing-md) var(--rf-spacing-lg);
+	min-height: 0;
+}
+
+/* Dialog footer — small text, top divider, pinned at bottom via flex.
+ * Stays visible regardless of body scroll depth so links like "View
+ * source on GitHub →" (the SPEC-078 use case) are always one tap away. */
+dialog.rf-drawer .rf-drawer__footer {
+	flex: 0 0 auto;
+	padding: var(--rf-spacing-sm) var(--rf-spacing-lg);
+	border-top: 1px solid var(--rf-drawer-border);
+	background: var(--rf-drawer-bg);
+	font-size: 0.875rem;
+	color: var(--rf-color-muted);
 }
+dialog.rf-drawer .rf-drawer__footer > :first-child { margin-top: 0; }
+dialog.rf-drawer .rf-drawer__footer > :last-child { margin-bottom: 0; }
+dialog.rf-drawer .rf-drawer__footer p { margin: 0; }
 
 /* Collapse the vertical margins of first / last children inside the body
  * so the drawer's own padding is what spaces content from the chrome —
@@ -282,7 +326,8 @@ dialog.rf-drawer[data-state="closing"]::backdrop {
  */
 @media (max-width: 640px) {
 	dialog.rf-drawer .rf-drawer__header,
-	dialog.rf-drawer .rf-drawer__body {
+	dialog.rf-drawer .rf-drawer__body,
+	dialog.rf-drawer .rf-drawer__footer {
 		padding: 0.75rem 1rem;
 	}
 }

package/styles/runes/file-ref.css

@@ -0,0 +1,31 @@
+/* file-ref — path-based inline reference to a project file (SPEC-078).
+ *
+ * Renders as `<span class="rf-file-ref"><a>label</a></span>` in prose
+ * (plus an invisible hoist sentinel `<meta>` when preview="drawer").
+ * The span carries the data-rune class; the inner `<a>` is the click
+ * target with its own visual treatment.
+ *
+ * Without preview, the link points at the canonical GitHub URL — give
+ * it a small external-link affordance so readers know they're about to
+ * leave the page. With preview, it points at the hoisted drawer's
+ * fragment id; visually the same inline-link affordance — what makes
+ * it a "preview link" rather than a "navigate-away link" is the drawer
+ * that opens on click, not extra inline chrome.
+ */
+
+.rf-file-ref {
+	display: inline;
+}
+
+.rf-file-ref > a {
+	color: var(--rf-color-primary);
+	text-decoration: underline;
+	text-decoration-thickness: 1px;
+	text-underline-offset: 2px;
+	font-family: var(--rf-font-mono, ui-monospace, SFMono-Regular, monospace);
+	font-size: 0.9375em;
+}
+
+.rf-file-ref > a:hover {
+	text-decoration-thickness: 2px;
+}

package/styles/runes/nav.css

@@ -67,6 +67,21 @@
 	color: var(--rf-color-muted);
 }
 
+/* Items with an inline badge (recognised by the nav schema and tagged with
+ * data-name="badge") sit on one row so the badge rides alongside the link
+ * instead of wrapping to the next line — the link's `display: block` would
+ * otherwise eat the full row. */
+.rf-nav-item:has(> .rf-badge[data-name="badge"]) {
+	display: flex;
+	align-items: center;
+	gap: 0.375rem;
+	padding: 0;
+}
+.rf-nav-item:has(> .rf-badge[data-name="badge"]) > .rf-nav-item__link {
+	flex: 0 1 auto;
+	min-width: 0;
+}
+
 /* ─── Collapsible groups (vertical sidebar) ───────────────────────────── */
 
 .rf-nav--collapsible .rf-nav-group h2,