@refrakt-md/lumina 0.16.0 → 0.17.0

package/styles/runes/bug.css

@@ -1,13 +1,10 @@
 /* Bug */
 
-/* Primary badges: ID left, status right */
-.rf-bug__header-primary {
-	justify-content: space-between;
-	margin-bottom: 0.75rem;
-}
+/* SPEC-079: eyebrow + metadata zone names replace header-primary /
+ * header-secondary. Layout-level geometry lives on [data-zone-layout]
+ * selectors; this file carries bug-specific spacing + assignee prefix. */
 
-/* Preamble: title + optional description between badge groups */
-.rf-bug__preamble {
+.rf-bug__eyebrow {
 	margin-bottom: 0.75rem;
 }
 .rf-bug__title h1,
@@ -16,15 +13,12 @@
 	margin-top: 0;
 }
 
-/* Secondary badges: pill row below preamble */
-.rf-bug__header-secondary {
+.rf-bug__metadata {
 	margin-bottom: 1.5rem;
 }
 
-.rf-bug__assignee-badge {
-	margin-left: auto;
-}
-.rf-bug__assignee-badge::before { content: '@'; }
+.rf-bug__metadata [data-field="assignee"] dd .rf-badge::before { content: '@'; }
+
 .rf-bug__body {
 	font-size: 0.925rem;
 	line-height: 1.65;

package/styles/runes/character.css

@@ -1,6 +1,14 @@
-/* Character */
+/* Character — the title and the role/status def-list come from the shared
+ * dimensions (sections + metadata); only the floated portrait avatar is
+ * character-specific chrome. Unlike faction/realm, character is not a split
+ * rune: the portrait floats and the content column wraps around it. */
 
-/* Portrait */
+/* Contain the floated portrait within the article */
+.rf-character {
+	display: flow-root;
+}
+
+/* Portrait — floated circular avatar */
 .rf-character__portrait {
 	float: right;
 	margin-left: 1.5rem;
@@ -22,20 +30,10 @@
 	flex-direction: column;
 	gap: 1rem;
 }
-.rf-character__content {
-	clear: both;
-}
 .rf-character__content ul,
 .rf-character__content ol {
 	padding-left: 1.5rem;
 }
-.rf-character > span[property="name"] {
-	display: block;
-	font-size: 1.5rem;
-	font-weight: 700;
-	margin-bottom: 0.5rem;
-	color: var(--rf-color-heading);
-}
 
 /* Character Section */
 .rf-character-section {

package/styles/runes/codegroup.css

@@ -22,18 +22,26 @@
 	border-bottom: 1px solid var(--rf-color-border);
 	margin-bottom: 0;
 }
-.rf-codegroup__dot {
-	width: 10px;
+/* Window chrome — three traffic-light dots painted as gradients on one
+ * pseudo-element. The element reserves real width (three 10px dots, 1rem
+ * apart) so the flex row spaces the title clear of the dots — box-shadow
+ * dots take no layout space and overlapped the title. Pure decoration, so
+ * it lives entirely in CSS (no markup). */
+.rf-codegroup__topbar::before {
+	content: '';
+	flex: 0 0 auto;
+	width: 2.625rem;
 	height: 10px;
-	border-radius: var(--rf-radius-full);
 	opacity: 0.8;
+	background-repeat: no-repeat;
+	background-image:
+		radial-gradient(circle at 5px 50%, #ef4444 5px, transparent 5px),
+		radial-gradient(circle at calc(5px + 1rem) 50%, #f59e0b 5px, transparent 5px),
+		radial-gradient(circle at calc(5px + 2rem) 50%, #22c55e 5px, transparent 5px);
 }
-.rf-codegroup__dot:nth-child(1) { background: #ef4444; }
-.rf-codegroup__dot:nth-child(2) { background: #f59e0b; }
-.rf-codegroup__dot:nth-child(3) { background: #22c55e; }
-.rf-codegroup__title[data-section="title"] {
+/* Filename title — the topbar bar's lone `code` field. */
+.rf-codegroup__topbar [data-meta-type="code"] {
 	margin-left: 0.5rem;
-	font-family: var(--rf-font-mono);
 	font-size: 0.8rem;
 	font-weight: normal;
 	color: var(--rf-color-muted);
@@ -95,6 +103,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/decision.css

@@ -1,13 +1,9 @@
 /* Decision */
 
-/* Primary badges: ID left, status right */
-.rf-decision__header-primary {
-	justify-content: space-between;
-	margin-bottom: 0.75rem;
-}
+/* SPEC-079: eyebrow + metadata zone names replace header-primary /
+ * header-secondary. */
 
-/* Preamble: title + optional description between badge groups */
-.rf-decision__preamble {
+.rf-decision__eyebrow {
 	margin-bottom: 0.75rem;
 }
 .rf-decision__title h1,
@@ -16,8 +12,7 @@
 	margin-top: 0;
 }
 
-/* Secondary badges: pill row below preamble */
-.rf-decision__header-secondary {
+.rf-decision__metadata {
 	margin-bottom: 1.5rem;
 }
 

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/event.css

@@ -1,11 +1,16 @@
 /* Event */
-.rf-event__meta {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-	gap: 0.5rem;
+
+/* When/where def-list — geometry from the shared `[data-zone-layout=
+ * definition-list]` primitive; this block owns only its top margin. */
+.rf-event__metadata {
+	margin-top: 1.25rem;
 }
+
+/* Register CTA — a bar-wrapped link; style the inner `<a>` as a button. */
 .rf-event__register {
+	margin-top: 1.5rem;
+}
+.rf-event__register a {
 	display: inline-block;
 	padding: 0.5rem 1rem;
 	background: var(--rf-color-primary);
@@ -14,22 +19,21 @@
 	font-weight: 500;
 	font-size: 0.875rem;
 	text-decoration: none;
-	margin-top: 1.5rem;
 }
-.rf-event__register:hover {
+.rf-event__register a:hover {
 	background: var(--rf-color-primary-hover);
 }
-.rf-event__content {
+.rf-event__body {
 	margin-top: 1.5rem;
 }
-.rf-event__content ul,
-.rf-event__content ol {
+.rf-event__body ul,
+.rf-event__body ol {
 	padding-left: 1.5rem;
 }
-.rf-event__content a {
+.rf-event__body a {
 	color: var(--rf-color-primary);
 	text-decoration: none;
 }
-.rf-event__content a:hover {
+.rf-event__body a:hover {
 	color: var(--rf-color-primary-hover);
 }

package/styles/runes/faction.css

@@ -1,5 +1,11 @@
-/* Faction */
-.rf-faction {
+/* Faction — split/stacked geometry, the title, and the metadata def-list all
+ * come from the shared layers: layouts/split.css ([data-layout] +
+ * [data-section="media"]), dimensions/sections.css ([data-section="title"] /
+ * "preamble"), and dimensions/metadata.css ([data-zone-layout]). This file
+ * only carries faction-specific chrome. */
+
+/* Stacked layout — split / split-reverse are handled by shared split.css */
+.rf-faction[data-layout="stacked"] {
 	display: flex;
 	flex-direction: column;
 }
@@ -19,13 +25,6 @@
 .rf-faction__content ol {
 	padding-left: 1.5rem;
 }
-.rf-faction > span[property="name"] {
-	display: block;
-	font-size: 1.5rem;
-	font-weight: 700;
-	margin-bottom: 0.5rem;
-	color: var(--rf-color-heading);
-}
 
 /* Faction Section */
 .rf-faction-section {
@@ -44,112 +43,3 @@
 .rf-faction-section__body ol {
 	padding-left: 1.5rem;
 }
-
-/* Split layout — shared */
-.rf-faction[data-layout="split"],
-.rf-faction[data-layout="split-reverse"] {
-	display: grid;
-	grid-template-columns: var(--split-ratio, 1fr 1fr);
-	column-gap: var(--split-gap, 2rem);
-	align-items: var(--split-valign, start);
-}
-/* Split: badge + name + content left (col 1), scene right (col 2) */
-.rf-faction[data-layout="split"] > .rf-faction__badge {
-	grid-column: 1;
-	grid-row: 1;
-}
-.rf-faction[data-layout="split"] > span[property="name"] {
-	grid-column: 1;
-	grid-row: 2;
-}
-.rf-faction[data-layout="split"] > .rf-faction__content {
-	grid-column: 1;
-	grid-row: 3;
-}
-.rf-faction[data-layout="split"] > .rf-faction__scene {
-	grid-column: 2;
-	grid-row: 1 / 4;
-}
-/* Split-reverse: scene left (col 1), badge + name + content right (col 2) */
-.rf-faction[data-layout="split-reverse"] > .rf-faction__badge {
-	grid-column: 2;
-	grid-row: 1;
-}
-.rf-faction[data-layout="split-reverse"] > span[property="name"] {
-	grid-column: 2;
-	grid-row: 2;
-}
-.rf-faction[data-layout="split-reverse"] > .rf-faction__content {
-	grid-column: 2;
-	grid-row: 3;
-}
-.rf-faction[data-layout="split-reverse"] > .rf-faction__scene {
-	grid-column: 1;
-	grid-row: 1 / 4;
-	margin: 0;
-}
-/* Collapse to single column on small screens */
-@media (max-width: 640px) {
-	.rf-faction[data-layout="split"],
-	.rf-faction[data-layout="split-reverse"] {
-		grid-template-columns: 1fr;
-	}
-	.rf-faction[data-layout="split"] > .rf-faction__badge,
-	.rf-faction[data-layout="split"] > span[property="name"],
-	.rf-faction[data-layout="split"] > .rf-faction__content,
-	.rf-faction[data-layout="split"] > .rf-faction__scene,
-	.rf-faction[data-layout="split-reverse"] > .rf-faction__badge,
-	.rf-faction[data-layout="split-reverse"] > span[property="name"],
-	.rf-faction[data-layout="split-reverse"] > .rf-faction__content,
-	.rf-faction[data-layout="split-reverse"] > .rf-faction__scene {
-		grid-column: auto;
-		grid-row: auto;
-	}
-	.rf-faction[data-layout="split"]:not([data-media-position="top"]) > .rf-faction__scene,
-	.rf-faction[data-layout="split-reverse"]:not([data-media-position="top"]) > .rf-faction__scene {
-		margin-bottom: var(--rf-spacing-md);
-	}
-}
-/* Reset grid placement when data-collapse triggers single-column from shared split.css */
-@media (max-width: 640px) {
-	.rf-faction[data-collapse="sm"] > .rf-faction__badge,
-	.rf-faction[data-collapse="sm"] > span[property="name"],
-	.rf-faction[data-collapse="sm"] > .rf-faction__content,
-	.rf-faction[data-collapse="sm"] > .rf-faction__scene {
-		grid-column: auto;
-		grid-row: auto;
-	}
-	.rf-faction[data-collapse="sm"]:not([data-media-position="top"]) > .rf-faction__scene {
-		margin-bottom: var(--rf-spacing-md);
-	}
-}
-@media (max-width: 768px) {
-	.rf-faction[data-collapse="md"] > .rf-faction__badge,
-	.rf-faction[data-collapse="md"] > span[property="name"],
-	.rf-faction[data-collapse="md"] > .rf-faction__content,
-	.rf-faction[data-collapse="md"] > .rf-faction__scene {
-		grid-column: auto;
-		grid-row: auto;
-	}
-	.rf-faction[data-collapse="md"]:not([data-media-position="top"]) > .rf-faction__scene {
-		margin-bottom: var(--rf-spacing-md);
-	}
-}
-@media (max-width: 1024px) {
-	.rf-faction[data-collapse="lg"] > .rf-faction__badge,
-	.rf-faction[data-collapse="lg"] > span[property="name"],
-	.rf-faction[data-collapse="lg"] > .rf-faction__content,
-	.rf-faction[data-collapse="lg"] > .rf-faction__scene {
-		grid-column: auto;
-		grid-row: auto;
-	}
-	.rf-faction[data-collapse="lg"]:not([data-media-position="top"]) > .rf-faction__scene {
-		margin-bottom: var(--rf-spacing-md);
-	}
-}
-
-/* Split layout scene gets subtle depth */
-.rf-faction[data-layout="split"] .rf-faction__scene img,
-.rf-faction[data-layout="split-reverse"] .rf-faction__scene img {
-	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-}

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