@refrakt-md/lumina 0.21.0 → 0.23.0

package/styles/runes/drawer.css

@@ -1,3 +1,4 @@
+@layer skin {
 /* Drawer — addressable modal panel (SPEC-060).
  *
  * Two visual modes ride on the same `.rf-drawer` element:
@@ -19,9 +20,6 @@
  */
 
 .rf-drawer {
-	--rf-drawer-size-sm: 22rem;
-	--rf-drawer-size-md: 36rem;
-	--rf-drawer-size-lg: 52rem;
 	--rf-drawer-bg: var(--rf-color-surface);
 	--rf-drawer-fg: var(--rf-color-text);
 	--rf-drawer-border: var(--rf-color-border);
@@ -32,13 +30,6 @@
 	--rf-drawer-anim-ease: cubic-bezier(0.32, 0.72, 0, 1);
 }
 
-/* ─── Body-scroll lock while any drawer is open ────────────────── */
-
-html.rf-drawer-open,
-html.rf-drawer-open body {
-	overflow: hidden;
-}
-
 /* ─── No-JS / in-flow mode ─────────────────────────────────────── */
 
 section.rf-drawer {
@@ -52,19 +43,16 @@ section.rf-drawer {
 }
 
 section.rf-drawer .rf-drawer__header {
-	display: flex;
-	align-items: baseline;
-	justify-content: space-between;
 	gap: var(--rf-spacing-sm);
 	margin-bottom: var(--rf-spacing-sm);
 }
 
 section.rf-drawer .rf-drawer__title {
 	margin: 0;
-	font-size: 1.05rem;
-	font-weight: 600;
+	font-size: var(--rf-text);
+	font-weight: var(--rf-weight-semibold);
 	color: var(--rf-color-primary);
-	letter-spacing: 0.01em;
+	letter-spacing: var(--rf-tracking-normal);
 }
 
 section.rf-drawer .rf-drawer__body > :first-child { margin-top: 0; }
@@ -73,11 +61,10 @@ 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;
+	font-size: var(--rf-text-sm);
 	color: var(--rf-color-muted);
 }
 section.rf-drawer .rf-drawer__footer > :first-child { margin-top: 0; }
@@ -91,7 +78,6 @@ section.rf-drawer .rf-drawer__footer > :last-child { margin-bottom: 0; }
  * 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);
 	color: var(--rf-drawer-fg);
 	border: 1px solid var(--rf-drawer-border);
@@ -99,18 +85,6 @@ dialog.rf-drawer {
 	box-shadow: var(--rf-drawer-shadow);
 	padding: 0;
 	margin: 0;
-	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 {
@@ -119,10 +93,6 @@ dialog.rf-drawer::backdrop {
 }
 
 dialog.rf-drawer .rf-drawer__header {
-	flex: 0 0 auto;
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
 	gap: var(--rf-spacing-md);
 	/* Reset the generous `[data-section="header"]` bottom margin (3rem) — the
 	 * dialog chrome spaces the header from the body via the body's own
@@ -134,8 +104,8 @@ dialog.rf-drawer .rf-drawer__header {
 }
 dialog.rf-drawer .rf-drawer__title {
 	margin: 0;
-	font-size: 1.05rem;
-	font-weight: 600;
+	font-size: var(--rf-text);
+	font-weight: var(--rf-weight-semibold);
 }
 
 dialog.rf-drawer .rf-drawer__close {
@@ -145,10 +115,9 @@ dialog.rf-drawer .rf-drawer__close {
 	cursor: pointer;
 	color: var(--rf-color-muted);
 	padding: var(--rf-spacing-xs) var(--rf-spacing-sm);
-	font-size: 1.25rem;
+	font-size: var(--rf-text-xl);
 	line-height: 1;
 	border-radius: var(--rf-radius-sm);
-	flex-shrink: 0;
 }
 dialog.rf-drawer .rf-drawer__close:hover {
 	color: var(--rf-color-text);
@@ -156,21 +125,17 @@ 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;
+	font-size: var(--rf-text-sm);
 	color: var(--rf-color-muted);
 }
 dialog.rf-drawer .rf-drawer__footer > :first-child { margin-top: 0; }
@@ -191,67 +156,24 @@ dialog.rf-drawer .rf-drawer__body > :last-child,
 dialog.rf-drawer .rf-drawer__body > :last-child > :last-child {
 	margin-bottom: 0;
 }
-
-/* ─── Side modifiers ───────────────────────────────────────────────
- *
- * Each side anchors the dialog with `inset`. The slide-in animation is
- * a keyframes animation triggered by `[open]` — picked over
- * `@starting-style` because keyframes have broader browser support
- * (everywhere `<dialog>` works) and a clearer source-of-truth: the
- * starting/ending frames are spelled out, no cascade-interaction
- * footguns. The matching backdrop fade is a separate animation.
- */
-
-dialog.rf-drawer[data-side="right"] {
-	inset:
-		var(--rf-drawer-gutter)
-		var(--rf-drawer-gutter)
-		var(--rf-drawer-gutter)
-		auto;
-	height: auto;
-}
 dialog.rf-drawer[data-side="right"][open]:not([data-state="closing"]) {
 	animation: rf-drawer-slide-in-right var(--rf-drawer-anim-duration) var(--rf-drawer-anim-ease);
 }
 dialog.rf-drawer[data-side="right"][data-state="closing"] {
 	animation: rf-drawer-slide-out-right var(--rf-drawer-anim-duration) var(--rf-drawer-anim-ease) forwards;
 }
-dialog.rf-drawer[data-side="left"] {
-	inset:
-		var(--rf-drawer-gutter)
-		auto
-		var(--rf-drawer-gutter)
-		var(--rf-drawer-gutter);
-	height: auto;
-}
 dialog.rf-drawer[data-side="left"][open]:not([data-state="closing"]) {
 	animation: rf-drawer-slide-in-left var(--rf-drawer-anim-duration) var(--rf-drawer-anim-ease);
 }
 dialog.rf-drawer[data-side="left"][data-state="closing"] {
 	animation: rf-drawer-slide-out-left var(--rf-drawer-anim-duration) var(--rf-drawer-anim-ease) forwards;
 }
-dialog.rf-drawer[data-side="top"] {
-	inset:
-		var(--rf-drawer-gutter)
-		var(--rf-drawer-gutter)
-		auto
-		var(--rf-drawer-gutter);
-	width: auto;
-}
 dialog.rf-drawer[data-side="top"][open]:not([data-state="closing"]) {
 	animation: rf-drawer-slide-in-top var(--rf-drawer-anim-duration) var(--rf-drawer-anim-ease);
 }
 dialog.rf-drawer[data-side="top"][data-state="closing"] {
 	animation: rf-drawer-slide-out-top var(--rf-drawer-anim-duration) var(--rf-drawer-anim-ease) forwards;
 }
-dialog.rf-drawer[data-side="bottom"] {
-	inset:
-		auto
-		var(--rf-drawer-gutter)
-		var(--rf-drawer-gutter)
-		var(--rf-drawer-gutter);
-	width: auto;
-}
 dialog.rf-drawer[data-side="bottom"][open]:not([data-state="closing"]) {
 	animation: rf-drawer-slide-in-bottom var(--rf-drawer-anim-duration) var(--rf-drawer-anim-ease);
 }
@@ -336,30 +258,4 @@ dialog.rf-drawer[data-state="closing"]::backdrop {
 	}
 }
 
-/* ─── Size modifiers (only meaningful in dialog mode) ─────────── */
-
-dialog.rf-drawer[data-side="right"][data-size="sm"],
-dialog.rf-drawer[data-side="left"][data-size="sm"] {
-	width: var(--rf-drawer-size-sm);
-}
-dialog.rf-drawer[data-side="right"][data-size="md"],
-dialog.rf-drawer[data-side="left"][data-size="md"] {
-	width: var(--rf-drawer-size-md);
-}
-dialog.rf-drawer[data-side="right"][data-size="lg"],
-dialog.rf-drawer[data-side="left"][data-size="lg"] {
-	width: var(--rf-drawer-size-lg);
-}
-
-dialog.rf-drawer[data-side="top"][data-size="sm"],
-dialog.rf-drawer[data-side="bottom"][data-size="sm"] {
-	height: var(--rf-drawer-size-sm);
-}
-dialog.rf-drawer[data-side="top"][data-size="md"],
-dialog.rf-drawer[data-side="bottom"][data-size="md"] {
-	height: var(--rf-drawer-size-md);
-}
-dialog.rf-drawer[data-side="top"][data-size="lg"],
-dialog.rf-drawer[data-side="bottom"][data-size="lg"] {
-	height: var(--rf-drawer-size-lg);
 }

package/styles/runes/embed.css

@@ -1,32 +1,24 @@
-/* Embed */
+@layer skin {
+/* Embed — skin. The responsive iframe wrapper + empty-fallback hide live in
+ * @refrakt-md/skeleton (styles/runes/embed.css). */
 .rf-embed {
 	margin: 0;
 	padding: 0;
 }
 .rf-embed__wrapper {
-	position: relative;
-	width: 100%;
-	height: 0;
-	overflow: hidden;
 	border-radius: var(--rf-radius-md);
 	background: var(--rf-color-surface);
 }
 .rf-embed__wrapper iframe {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
 	border: none;
 }
 .rf-embed__fallback {
-	font-size: 0.85rem;
+	font-size: var(--rf-text-sm);
 	color: var(--rf-color-muted);
 	margin-top: 0.5rem;
 }
 .rf-embed__fallback p:last-child {
 	margin-bottom: 0;
 }
-.rf-embed__fallback:empty {
-	display: none;
+
 }

package/styles/runes/event.css

@@ -1,3 +1,4 @@
+@layer skin {
 /* Event */
 
 /* When/where def-list — geometry from the shared `[data-zone-layout=
@@ -11,13 +12,12 @@
 	margin-top: 1.5rem;
 }
 .rf-event__register a {
-	display: inline-block;
 	padding: 0.5rem 1rem;
 	background: var(--rf-color-primary);
 	color: var(--rf-color-on-primary);
 	border-radius: var(--rf-radius-md);
-	font-weight: 500;
-	font-size: 0.875rem;
+	font-weight: var(--rf-weight-medium);
+	font-size: var(--rf-text-sm);
 	text-decoration: none;
 }
 .rf-event__register a:hover {
@@ -37,3 +37,5 @@
 .rf-event__body a:hover {
 	color: var(--rf-color-primary-hover);
 }
+
+}

package/styles/runes/expand.css

@@ -1,72 +1,37 @@
-/* Expand — inline-substitution of a registered entity (SPEC-066).
- *
- * The wrapper is intentionally minimal — the embedded rune (plan rune,
- * character rune, etc.) renders itself standalone-style; expand just
- * provides the wrapper + canonical-link affordance. Themes that want
- * the embedded content visually distinguished from inline-authored
- * content target `.rf-expand .rf-spec`, `.rf-expand h1`, etc.
- *
- * Two visual treatments:
- *
- * 1. **Default (`level=` unset, peer-document mode)** — the embed reads
- *    like a quoted document. A subtle border + indent treatment marks
- *    it as set-aside material. Heading scale is dialed down slightly
- *    so an H1 inside the embed doesn't compete with the host's H1.
- * 2. **Sub-section mode (`level=` set)** — the embed merges into the
- *    host outline. The wrapper sheds the quoted treatment so it reads
- *    as authored sub-content. Authors opt into this by setting
- *    `level=`; CSS targets `.rf-expand:not([data-outline-scope])` to
- *    pick the right treatment automatically.
- */
-
+@layer skin {
+/* Expand — skin. The inline-block canonical-link box lives in @refrakt-md/skeleton
+ * (styles/runes/expand.css). */
 .rf-expand {
 	margin: var(--rf-spacing-md) 0;
 }
-
-/* Peer-document mode — no background, no rounded corners, no rules.
- * Reads as "set-aside material" through spacing alone, without competing
- * visually with the host content. Authors who want a stronger treatment
- * (rules, background, etc.) can override `.rf-expand[data-outline-scope]`
- * in their theme. */
 .rf-expand[data-outline-scope] {
 	padding: var(--rf-spacing-md) 0;
 }
-
-/* Tone down embedded headings so the host outline keeps visual primacy.
- * The semantic levels are preserved (H1 stays H1 etc.); only the visual
- * scale is adjusted in the peer-document treatment. Authors using
- * `level=` for sub-section mode get the normal heading scale. */
 .rf-expand[data-outline-scope] :is(h1, h2, h3, h4, h5, h6):first-child {
 	margin-top: 0;
 }
-.rf-expand[data-outline-scope] h1 { font-size: 1.5rem; }
-.rf-expand[data-outline-scope] h2 { font-size: 1.25rem; }
-.rf-expand[data-outline-scope] h3 { font-size: 1.1rem; }
-
+.rf-expand[data-outline-scope] h1 { font-size: var(--rf-text-2xl); }
+.rf-expand[data-outline-scope] h2 { font-size: var(--rf-text-xl); }
+.rf-expand[data-outline-scope] h3 { font-size: var(--rf-text-lg); }
 .rf-expand > :first-child { margin-top: 0; }
 .rf-expand > :last-child { margin-bottom: 0; }
-
 .rf-expand__canonical-link {
-	display: inline-block;
 	margin-top: var(--rf-spacing-sm);
-	font-size: 0.875rem;
+	font-size: var(--rf-text-sm);
 	color: var(--rf-color-primary);
 	text-decoration: none;
 }
 .rf-expand__canonical-link:hover {
 	text-decoration: underline;
 }
-
-/* Error-state placeholder rendered when resolution fails. The build
- * also surfaces the error through `ctx.error`; this is the user-facing
- * affordance so the failure isn't silent. Keyed off `[data-expand-error]`
- * which the resolver sets on the error wrapper. */
 .rf-expand[data-expand-error] {
 	padding: var(--rf-spacing-sm) var(--rf-spacing-md);
 	border-left: 3px solid var(--rf-color-danger);
 	background: var(--rf-color-danger-bg);
 	color: var(--rf-color-danger);
 	font-family: var(--rf-font-mono);
-	font-size: 0.875rem;
+	font-size: var(--rf-text-sm);
 	border-radius: 0 var(--rf-radius-sm) var(--rf-radius-sm) 0;
 }
+
+}

package/styles/runes/faction.css

@@ -1,3 +1,4 @@
+@layer skin {
 /* 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"] /
@@ -28,12 +29,6 @@
 	row-gap: var(--rf-faction-media-gap);
 }
 
-/* Stacked layouts — beside layouts handled by shared split.css */
-.rf-faction[data-media-position="top"] {
-	display: flex;
-	flex-direction: column;
-}
-
 .rf-faction[data-media-position="top"] > .rf-faction__scene {
 	margin-bottom: var(--rf-faction-media-gap);
 }
@@ -43,8 +38,6 @@
 
 /* Content */
 .rf-faction__sections {
-	display: flex;
-	flex-direction: column;
 	gap: 1rem;
 }
 .rf-faction__content ul,
@@ -58,10 +51,9 @@
 	border-top: 1px solid var(--rf-color-border);
 }
 .rf-faction-section__name {
-	display: block;
-	font-size: 1.25rem;
-	font-weight: 700;
-	line-height: 1.3;
+	font-size: var(--rf-text-xl);
+	font-weight: var(--rf-weight-bold);
+	line-height: var(--rf-leading-snug);
 	margin-bottom: 0.5rem;
 	color: var(--rf-color-text);
 }
@@ -69,3 +61,5 @@
 .rf-faction-section__body ol {
 	padding-left: 1.5rem;
 }
+
+}

package/styles/runes/feature.css

@@ -1,36 +1,34 @@
-/* Feature */
+@layer skin {
+/* Feature — skin. The preamble/eyebrow/content/definitions-grid/icon layout and
+ * the media-position flip live in @refrakt-md/skeleton (styles/runes/feature.css). */
 .rf-feature {
 	padding: 2.5rem 0 2rem;
 }
 .rf-feature__preamble {
-	flex-direction: column;
-	align-items: flex-start;
 	gap: 0.25rem;
 	margin-bottom: 1.5rem;
 }
 .rf-feature__eyebrow {
-	font-size: 0.8125rem;
-	font-weight: 600;
-	letter-spacing: 0.05em;
+	font-size: var(--rf-text-sm);
+	font-weight: var(--rf-weight-semibold);
+	letter-spacing: var(--rf-tracking-wider);
 	text-transform: uppercase;
 	color: var(--rf-color-primary);
 	margin: 0 0 0.5rem;
 }
 .rf-feature__eyebrow:has(a) {
-	display: inline-block;
-	position: relative;
 	padding: 0.25rem 0.875rem;
 	border: 1px solid var(--rf-color-border);
 	border-radius: var(--rf-radius-full);
 	color: var(--rf-color-text);
-	font-weight: 400;
+	font-weight: var(--rf-weight-normal);
 	text-transform: none;
-	letter-spacing: 0;
+	letter-spacing: var(--rf-tracking-normal);
 	transition: border-color 150ms ease;
 }
 .rf-feature__eyebrow:has(a):hover { border-color: var(--rf-color-muted); }
-.rf-feature__eyebrow:has(a) a { color: var(--rf-color-primary); font-weight: 600; text-decoration: none; }
-.rf-feature__eyebrow:has(a) a::before { content: ''; position: absolute; inset: 0; border-radius: inherit; }
+.rf-feature__eyebrow:has(a) a { color: var(--rf-color-primary); font-weight: var(--rf-weight-semibold); text-decoration: none; }
+.rf-feature__eyebrow:has(a) a::before { border-radius: inherit; }
 .rf-feature__headline {
 	margin-top: 0;
 }
@@ -42,9 +40,6 @@
 .rf-feature__image {
 	margin-bottom: 1rem;
 }
-.rf-feature__content {
-	display: contents;
-}
 .rf-feature h2 {
 	margin-bottom: 2rem;
 }
@@ -63,20 +58,13 @@
 /* Definitions stack in a single column by default; the `--definitions-grid`
  * modifier (SPEC-091 media-position variant: top/bottom) tiles them as a grid. */
 .rf-feature__definitions {
-	display: block;
 	margin: 0;
 }
 .rf-feature--definitions-grid .rf-feature__definitions {
-	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(max(240px, calc((100% - 3rem) / 3)), 1fr));
 	gap: 1.5rem;
 }
 /* Beside layouts (media on start/end): definitions stay stacked (no grid
  * modifier) inside the content track. */
-.rf-feature[data-media-position="start"] .rf-feature__content,
-.rf-feature[data-media-position="end"] .rf-feature__content {
-	display: block;
-}
 .rf-feature[data-media-position="start"] .rf-feature__preamble,
 .rf-feature[data-media-position="end"] .rf-feature__preamble,
 .rf-feature[data-media-position="start"] h2,
@@ -97,27 +85,21 @@
 	background: var(--rf-color-surface);
 }
 .rf-feature__feature-item dt {
-	font-weight: 650;
-	font-size: 1.125rem;
+	font-weight: var(--rf-weight-semibold);
+	font-size: var(--rf-text-lg);
 	margin-bottom: 0.75rem;
-	letter-spacing: -0.01em;
+	letter-spacing: var(--rf-tracking-tight);
 	color: var(--rf-color-text);
 }
-.rf-feature__feature-item dt:has(> .rf-icon) {
-	display: flex;
-	flex-direction: column;
-}
 .rf-feature__feature-item dt > .rf-icon {
-	width: 1.5rem;
-	height: 1.5rem;
 	margin-bottom: 0.5rem;
 	color: var(--rf-color-primary);
 }
 .rf-feature__feature-item dd {
 	margin: 0;
 	color: var(--rf-color-muted);
-	font-size: 0.9rem;
-	line-height: 1.65;
+	font-size: var(--rf-text-sm);
+	line-height: var(--rf-leading-relaxed);
 }
 
 /* Context-aware: feature inside a hero — no top padding, tighter spacing */
@@ -133,14 +115,4 @@
 	padding: 0;
 }
 
-/* BUG-001 — content-first DOM inverts the shared media-first stacked contract
- * (layouts/split.css): counter it so the labels are truthful. `bottom` (the
- * default) is plain block flow — media after the content, the historical
- * look; an explicit `top` flips the visual order without touching the DOM. */
-.rf-feature[data-media-position="bottom"] {
-	display: block;
-}
-.rf-feature[data-media-position="top"] {
-	display: flex;
-	flex-direction: column-reverse;
 }

package/styles/runes/figure.css

@@ -1,34 +1,15 @@
-/* Figure */
-.rf-figure img {
-	display: block;
-	max-width: 100%;
-	height: auto;
-	margin-inline: auto;
+@layer skin {
+/* Figure — skin. The image box, frame-aspect fill, size max-widths, and alignment
+ * auto-margins live in @refrakt-md/skeleton (styles/runes/figure.css). */
+.rf-figure :is(img, .rf-placeholder) {
 	border-radius: var(--rf-radius-media);
 }
-
-/* When `frame-aspect` sets an explicit surface shape, the image fills the
- * shape rather than sitting at its natural size with whitespace on the
- * inline-end. `object-fit: cover` crops only if the natural aspect doesn't
- * match — and `frame-anchor` already picks the focal point of that crop
- * (the same contract as a card's media slot). */
-.rf-figure[style*="--frame-aspect"] img {
-	width: 100%;
-	height: 100%;
-	object-fit: cover;
-	margin: 0;
-}
 .rf-figure figcaption {
 	margin-top: 0.625rem;
-	font-size: 0.825rem;
+	font-size: var(--rf-text-sm);
 	color: var(--rf-color-muted);
 	text-align: center;
 	font-style: italic;
 }
-.rf-figure--small { max-width: 320px; }
-.rf-figure--medium { max-width: 640px; }
-.rf-figure--large { max-width: 960px; }
-.rf-figure--full { max-width: 100%; }
-.rf-figure--left { margin-right: auto; }
-.rf-figure--center { margin-left: auto; margin-right: auto; }
-.rf-figure--right { margin-left: auto; }
+
+}

package/styles/runes/file-ref.css

@@ -1,21 +1,4 @@
-/* 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;
-}
+@layer skin {
 
 .rf-file-ref > a {
 	color: var(--rf-color-primary);
@@ -29,3 +12,5 @@
 .rf-file-ref > a:hover {
 	text-decoration-thickness: 2px;
 }
+
+}