@refrakt-md/lumina 0.14.4 → 0.16.0

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

@@ -0,0 +1,316 @@
+/* Drawer — addressable modal panel (SPEC-060).
+ *
+ * Two visual modes ride on the same `.rf-drawer` element:
+ *
+ * 1. **No-JS (in-flow)** — `.rf-drawer` not inside a `<dialog>`. Renders
+ *    as a styled callout block at its authored position, visually
+ *    distinct so the reader understands "set-aside material". Close
+ *    button stays `hidden` (the schema marks it that way; behaviors
+ *    reveals it post-enhancement).
+ * 2. **JS (panel)** — `dialog.rf-drawer[open]`. Floats slightly off the
+ *    viewport edge (margin on all four sides) so it reads as a "card
+ *    that slid in" rather than a flush slab. Size modifier sets width
+ *    (right/left) or height (top/bottom). Slide-in animation uses
+ *    `@starting-style` to interpolate from off-screen on open.
+ *
+ * Body-scroll lock is applied as a class on `<html>` by the behavior
+ * (`html.rf-drawer-open` → `overflow: hidden`) so mobile Safari doesn't
+ * scroll the page underneath the open dialog.
+ */
+
+.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);
+	--rf-drawer-shadow: 0 18px 48px -12px rgb(0 0 0 / 0.35);
+	--rf-drawer-gutter: var(--rf-spacing-sm);
+	--rf-drawer-radius: var(--rf-radius-md);
+	--rf-drawer-anim-duration: 220ms;
+	--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 {
+	margin: var(--rf-spacing-lg) 0;
+	padding: var(--rf-spacing-md) var(--rf-spacing-lg);
+	background: var(--rf-drawer-bg);
+	color: var(--rf-drawer-fg);
+	border: 1px solid var(--rf-drawer-border);
+	border-left: 4px solid var(--rf-color-primary);
+	border-radius: var(--rf-drawer-radius);
+}
+
+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;
+	color: var(--rf-color-primary);
+	letter-spacing: 0.01em;
+}
+
+section.rf-drawer .rf-drawer__body > :first-child { margin-top: 0; }
+section.rf-drawer .rf-drawer__body > :last-child { margin-bottom: 0; }
+
+/* ─── JS / dialog mode ─────────────────────────────────────────── */
+
+dialog.rf-drawer {
+	box-sizing: border-box;
+	background: var(--rf-drawer-bg);
+	color: var(--rf-drawer-fg);
+	border: 1px solid var(--rf-drawer-border);
+	border-radius: var(--rf-drawer-radius);
+	box-shadow: var(--rf-drawer-shadow);
+	padding: 0;
+	margin: 0;
+	overflow: auto;
+	max-width: calc(100vw - 2 * var(--rf-drawer-gutter));
+	max-height: calc(100vh - 2 * var(--rf-drawer-gutter));
+}
+
+dialog.rf-drawer::backdrop {
+	background: rgb(0 0 0 / 0.35);
+	backdrop-filter: blur(2px);
+}
+
+dialog.rf-drawer .rf-drawer__header {
+	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 {
+	margin: 0;
+	font-size: 1.05rem;
+	font-weight: 600;
+}
+
+dialog.rf-drawer .rf-drawer__close {
+	appearance: none;
+	background: transparent;
+	border: 0;
+	cursor: pointer;
+	color: var(--rf-color-muted);
+	padding: var(--rf-spacing-xs) var(--rf-spacing-sm);
+	font-size: 1.25rem;
+	line-height: 1;
+	border-radius: var(--rf-radius-sm);
+	flex-shrink: 0;
+}
+dialog.rf-drawer .rf-drawer__close:hover {
+	color: var(--rf-color-text);
+	background: var(--rf-color-surface-hover);
+}
+
+dialog.rf-drawer .rf-drawer__body {
+	padding: var(--rf-spacing-md) var(--rf-spacing-lg);
+}
+
+/* Collapse the vertical margins of first / last children inside the body
+ * so the drawer's own padding is what spaces content from the chrome —
+ * otherwise a `<figure>` or `<p>` with its own top/bottom margin stacks
+ * on top of the body's padding and the content looks adrift. A snippet
+ * inside a drawer compiles to `body > .rf-codeblock > .rf-snippet > <pre>`,
+ * so the margin-zero walk reaches two levels deep to catch the figure. */
+dialog.rf-drawer .rf-drawer__body > :first-child,
+dialog.rf-drawer .rf-drawer__body > :first-child > :first-child {
+	margin-top: 0;
+}
+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);
+}
+dialog.rf-drawer[data-side="bottom"][data-state="closing"] {
+	animation: rf-drawer-slide-out-bottom var(--rf-drawer-anim-duration) var(--rf-drawer-anim-ease) forwards;
+}
+
+dialog.rf-drawer[open]:not([data-state="closing"])::backdrop {
+	animation: rf-drawer-backdrop-in var(--rf-drawer-anim-duration) var(--rf-drawer-anim-ease);
+}
+dialog.rf-drawer[data-state="closing"]::backdrop {
+	animation: rf-drawer-backdrop-out var(--rf-drawer-anim-duration) var(--rf-drawer-anim-ease) forwards;
+}
+
+@keyframes rf-drawer-slide-in-right {
+	from { transform: translateX(calc(100% + var(--rf-drawer-gutter))); opacity: 0; }
+	to   { transform: translateX(0); opacity: 1; }
+}
+@keyframes rf-drawer-slide-in-left {
+	from { transform: translateX(calc(-100% - var(--rf-drawer-gutter))); opacity: 0; }
+	to   { transform: translateX(0); opacity: 1; }
+}
+@keyframes rf-drawer-slide-in-top {
+	from { transform: translateY(calc(-100% - var(--rf-drawer-gutter))); opacity: 0; }
+	to   { transform: translateY(0); opacity: 1; }
+}
+@keyframes rf-drawer-slide-in-bottom {
+	from { transform: translateY(calc(100% + var(--rf-drawer-gutter))); opacity: 0; }
+	to   { transform: translateY(0); opacity: 1; }
+}
+@keyframes rf-drawer-backdrop-in {
+	from { background: rgb(0 0 0 / 0); backdrop-filter: blur(0); }
+	to   { background: rgb(0 0 0 / 0.35); backdrop-filter: blur(2px); }
+}
+
+@keyframes rf-drawer-slide-out-right {
+	from { transform: translateX(0); opacity: 1; }
+	to   { transform: translateX(calc(100% + var(--rf-drawer-gutter))); opacity: 0; }
+}
+@keyframes rf-drawer-slide-out-left {
+	from { transform: translateX(0); opacity: 1; }
+	to   { transform: translateX(calc(-100% - var(--rf-drawer-gutter))); opacity: 0; }
+}
+@keyframes rf-drawer-slide-out-top {
+	from { transform: translateY(0); opacity: 1; }
+	to   { transform: translateY(calc(-100% - var(--rf-drawer-gutter))); opacity: 0; }
+}
+@keyframes rf-drawer-slide-out-bottom {
+	from { transform: translateY(0); opacity: 1; }
+	to   { transform: translateY(calc(100% + var(--rf-drawer-gutter))); opacity: 0; }
+}
+@keyframes rf-drawer-backdrop-out {
+	from { background: rgb(0 0 0 / 0.35); backdrop-filter: blur(2px); }
+	to   { background: rgb(0 0 0 / 0); backdrop-filter: blur(0); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+	dialog.rf-drawer[data-side="right"][open],
+	dialog.rf-drawer[data-side="left"][open],
+	dialog.rf-drawer[data-side="top"][open],
+	dialog.rf-drawer[data-side="bottom"][open],
+	dialog.rf-drawer[data-state="closing"],
+	dialog.rf-drawer[open]::backdrop,
+	dialog.rf-drawer[data-state="closing"]::backdrop {
+		animation: none;
+	}
+}
+
+/* ─── Mobile tightening ────────────────────────────────────────────
+ *
+ * On narrow viewports the drawer fills the screen (capped by
+ * `max-width: 100vw - 2*gutter`), so the desktop-comfortable
+ * 1.5rem / 2rem padding starts crowding the content. Halve it
+ * roughly to 0.75rem / 1rem so the body has more room without
+ * losing the chrome's breathing space.
+ */
+@media (max-width: 640px) {
+	dialog.rf-drawer .rf-drawer__header,
+	dialog.rf-drawer .rf-drawer__body {
+		padding: 0.75rem 1rem;
+	}
+}
+
+/* ─── 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/expand.css

@@ -0,0 +1,74 @@
+/* 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.
+ */
+
+.rf-expand {
+	margin: var(--rf-spacing-md) 0;
+}
+
+/* Peer-document mode — subtle top + bottom rule, no background, no
+ * rounded corners. Reads as "set-aside material" without competing
+ * visually with the host content. Authors who want a stronger
+ * treatment can override `.rf-expand[data-outline-scope]` in their
+ * theme. */
+.rf-expand[data-outline-scope] {
+	padding: var(--rf-spacing-md) 0;
+	border-top: 1px solid var(--rf-color-border);
+	border-bottom: 1px solid var(--rf-color-border);
+}
+
+/* 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 > :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;
+	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;
+	border-radius: 0 var(--rf-radius-sm) var(--rf-radius-sm) 0;
+}

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,

package/styles/runes/progress.css

@@ -0,0 +1,49 @@
+/* progress — generic completion bar (SPEC-072 / WORK-285).
+ *
+ * Presentational: the fill width is driven by the `--rf-progress` custom
+ * property set on the root from the computed percent. Generalized from the
+ * former plan milestone progress bar.
+ */
+
+.rf-progress {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: baseline;
+	gap: var(--rf-spacing-xs) var(--rf-spacing-sm);
+	margin: var(--rf-spacing-sm) 0;
+}
+
+.rf-progress__label {
+	font-weight: 600;
+	color: var(--rf-color-text);
+}
+
+.rf-progress__value {
+	font-weight: 600;
+	color: var(--rf-color-text);
+	margin-left: auto;
+}
+
+.rf-progress__track {
+	flex-basis: 100%;
+	height: 0.5rem;
+	border-radius: var(--rf-radius-pill, 999px);
+	background: var(--rf-color-surface-hover);
+	overflow: hidden;
+}
+
+.rf-progress__fill {
+	display: block;
+	height: 100%;
+	width: var(--rf-progress, 0%);
+	border-radius: inherit;
+	background: var(--rf-color-primary);
+	transition: width 0.3s ease;
+}
+
+/* Sentiment variants tint the fill; the neutral default uses the primary.
+ * Token names follow the sentiment scheme in dimensions/metadata.css
+ * (positive→success, caution→warning, negative→danger). */
+.rf-progress--positive .rf-progress__fill { background: var(--rf-color-success); }
+.rf-progress--caution .rf-progress__fill { background: var(--rf-color-warning); }
+.rf-progress--negative .rf-progress__fill { background: var(--rf-color-danger); }