@refrakt-md/lumina 0.14.2 → 0.14.4

package/index.css

@@ -41,6 +41,7 @@
 @import './styles/runes/annotate.css';
 @import './styles/runes/audio.css';
 @import './styles/runes/api.css';
+@import './styles/runes/badge.css';
 @import './styles/runes/bento.css';
 @import './styles/runes/blog.css';
 @import './styles/runes/bond.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.14.2",
+  "version": "0.14.4",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -83,9 +83,9 @@
     "build": "tsc"
   },
   "dependencies": {
-    "@refrakt-md/runes": "0.14.2",
-    "@refrakt-md/transform": "0.14.2",
-    "@refrakt-md/types": "0.14.2"
+    "@refrakt-md/runes": "0.14.4",
+    "@refrakt-md/transform": "0.14.4",
+    "@refrakt-md/types": "0.14.4"
   },
   "devDependencies": {
     "postcss": "^8.4.0"

package/styles/layouts/blog.css

@@ -1,7 +1,17 @@
 /* Blog layout */
 
+/* The blog header chrome is taller (1.125rem padding + 2rem logo), so
+   tell the mobile panel where the header ends. The variable lives on the
+   layout root so the panel — a sibling of the header — inherits it. */
+.rf-layout-blog-article {
+	--rf-header-height: 4.25rem;
+}
 /* ---- Header ---- */
 .rf-blog-header {
+	position: sticky;
+	top: 0;
+	z-index: 100;
+	background: var(--rf-color-bg);
 	border-bottom: 1px solid var(--rf-color-border);
 }
 .rf-blog-header__inner {

package/styles/layouts/docs.css

@@ -75,13 +75,25 @@
 	vertical-align: -0.15em;
 }
 
-/* ---- Fixed sidebar ---- */
+/* ---- Body wrapper: sidebar + content row ----
+ * The `body` slot in docsLayout groups sidebar + main so `position: sticky`
+ * on the sidebar has a containing block that ends *before* the footer.
+ * When the user scrolls past the wrapper's bottom (i.e. when the footer
+ * comes into view) sticky releases and the sidebar scrolls away with the
+ * page rather than overlaying the footer. */
+.rf-docs-body {
+	display: flex;
+	align-items: flex-start;
+}
+
+/* ---- Sticky sidebar ---- */
 .rf-docs-sidebar {
-	position: fixed;
-	left: 0;
+	position: sticky;
 	top: 3.125rem;
-	bottom: 0;
+	align-self: flex-start;
+	flex-shrink: 0;
 	width: 240px;
+	height: calc(100vh - 3.125rem);
 	overflow-y: auto;
 	padding: 1.5rem;
 	border-right: 1px solid var(--rf-color-border);
@@ -94,13 +106,12 @@
 
 /* ---- Content area ---- */
 .rf-docs-content {
+	flex: 1;
+	min-width: 0;
 	padding-top: 4.75rem;
 	padding-bottom: 4rem;
 	container-type: inline-size;
 }
-.rf-docs-content--has-nav {
-	margin-left: 240px;
-}
 .rf-docs-content__inner {
 	max-width: 60rem;
 	margin: 0 auto;
@@ -226,16 +237,28 @@ html:has(.rf-docs-header) {
 /* ---- Mobile overrides ---- */
 @media (max-width: 768px) {
 	.rf-docs-header {
-		position: static;
+		position: sticky;
+		top: 0;
 	}
 	.rf-docs-header__inner p ~ p {
 		display: none;
 	}
+	/* The toolbar is sticky directly below the header so the hamburger —
+	   which doubles as the open/close trigger for the sidebar-nav panel —
+	   stays reachable while the panel is open or the page is scrolled.
+	   `top` is 1px less than the header height so the two bars overlap by
+	   a pixel — sub-pixel rounding during scroll can otherwise leave a
+	   hairline gap that lets page content shine through.
+	   z-index sits above the .rf-mobile-panel (99) so the hamburger
+	   stays clickable while the panel is open. */
 	.rf-docs-toolbar {
 		display: flex;
+		position: sticky;
+		top: calc(3.5rem - 1px);
+		z-index: 100;
 	}
 	.rf-mobile-panel--nav {
-		top: 6.25rem;
+		top: calc(6.25rem - 1px);
 	}
 	.rf-docs-sidebar {
 		display: none;
@@ -243,9 +266,6 @@ html:has(.rf-docs-header) {
 	.rf-docs-content {
 		padding-top: 2rem;
 	}
-	.rf-docs-content--has-nav {
-		margin-left: 0;
-	}
 	.rf-docs-content__inner {
 		--rf-content-padding: 1.5rem;
 		--rf-docs-wide-inset: 1.5rem;

package/styles/layouts/mobile.css

@@ -1,4 +1,4 @@
-/* Shared mobile UI — menu button, fullscreen panel, close */
+/* Shared mobile UI — menu button, panel docked below header, close */
 
 /* ---- Mobile menu button (hidden on desktop) ---- */
 .rf-mobile-menu-btn {
@@ -13,42 +13,41 @@
 .rf-mobile-menu-btn:hover {
 	color: var(--rf-color-text);
 }
+/* Dots/X toggle — the SVG has both icons stacked; we show one at a time
+   based on the button's aria-expanded state. */
+.rf-mobile-menu-btn__icon-close {
+	display: none;
+}
+.rf-mobile-menu-btn[aria-expanded="true"] .rf-mobile-menu-btn__icon-open {
+	display: none;
+}
+.rf-mobile-menu-btn[aria-expanded="true"] .rf-mobile-menu-btn__icon-close {
+	display: inline;
+}
 
-/* ---- Fullscreen mobile panel ---- */
+/* ---- Mobile panel — docks below the header ----
+   The header height is fixed by --rf-header-height (default 3.5rem to
+   match the rendered chrome height — 0.625rem padding + 2rem logo +
+   line-box rounding). Layouts with a taller header set the variable on
+   their layout root so the panel — a sibling of the header — inherits. */
 .rf-mobile-panel {
 	display: none;
 	position: fixed;
-	inset: 0;
-	z-index: 100;
+	top: var(--rf-header-height, 3.5rem);
+	right: 0;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	max-width: 100vw;
+	z-index: 99;
 	background: var(--rf-color-bg, #fff);
+	overflow-x: hidden;
 	overflow-y: auto;
 	-webkit-overflow-scrolling: touch;
 }
-.rf-mobile-panel__header {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	padding: 1.125rem 1.5rem;
-	border-bottom: 1px solid var(--rf-color-border);
-}
-.rf-mobile-panel__title {
-	font-size: 0.85rem;
-	font-weight: 600;
-	text-transform: uppercase;
-	letter-spacing: 0.05em;
-	color: var(--rf-color-muted);
-}
-.rf-mobile-panel__close {
-	background: none;
-	border: none;
-	padding: 0.25rem;
-	cursor: pointer;
-	color: var(--rf-color-muted);
-	line-height: 0;
-}
-.rf-mobile-panel__close:hover {
-	color: var(--rf-color-text);
-}
+/* Layout-specific panels (e.g. the docs sidebar-nav panel that sits
+   under the docs header *and* toolbar) override `top` in their own
+   layout CSS. */
 .rf-mobile-panel__nav {
 	padding: 1.5rem;
 }
@@ -59,15 +58,16 @@
 	display: none;
 }
 /* Panel items — top-level links and group items render uniformly. The
-   four-class selectors below carry specificity (0,4,0), beating the
-   menubar's mobile rules in nav.css ((0,3,0)) on equal source position
-   so the panel's typography always wins (nav.css is imported later than
-   mobile.css in index.css). */
+   selectors below need to beat nav.css's nested-columns mobile overrides
+   ((0,4,0)) on equal source position (nav.css is imported later than
+   mobile.css in index.css), so the columns-context selectors carry
+   (0,5,0) by including `.rf-nav-group__panel` in the chain. */
 .rf-mobile-panel__nav a,
 .rf-mobile-panel .rf-nav--menubar .rf-nav__top-level .rf-nav-item__link,
-.rf-mobile-panel .rf-nav--menubar .rf-nav-group .rf-nav-item__link {
+.rf-mobile-panel .rf-nav--menubar .rf-nav-group .rf-nav-item__link,
+.rf-mobile-panel .rf-nav--menubar .rf-nav-group__panel .rf-nav--columns .rf-nav-item__link {
 	display: block;
-	padding: 0.5rem 0;
+	padding: 0;
 	font-size: 1.5rem;
 	font-weight: 700;
 	color: var(--rf-color-text);
@@ -77,7 +77,8 @@
 }
 .rf-mobile-panel__nav a:hover,
 .rf-mobile-panel .rf-nav--menubar .rf-nav__top-level .rf-nav-item__link:hover,
-.rf-mobile-panel .rf-nav--menubar .rf-nav-group .rf-nav-item__link:hover {
+.rf-mobile-panel .rf-nav--menubar .rf-nav-group .rf-nav-item__link:hover,
+.rf-mobile-panel .rf-nav--menubar .rf-nav-group__panel .rf-nav--columns .rf-nav-item__link:hover {
 	color: var(--rf-color-primary, var(--rf-color-text));
 	background: transparent;
 	text-decoration: none;
@@ -88,6 +89,9 @@
 .rf-mobile-panel .rf-nav--menubar .rf-nav-group h3 {
 	padding: 1.5rem 0 0.25rem;
 }
+/* Nested column collapse for the menubar drawer is handled in nav.css's
+   ≤768px block (it already resets grid-template-columns and the rich-panel
+   min-width rules). */
 .rf-mobile-panel__body {
 	padding: 1rem 1.5rem;
 }
@@ -101,7 +105,7 @@
 	.rf-mobile-menu-btn {
 		display: block;
 	}
-	/* The inline menubar collapses behind the hamburger on mobile — the
+	/* The inline menubar collapses behind the kebab on mobile — the
 	   .rf-mobile-panel duplicates the same nav and styles it as a flat
 	   vertical list (see nav.css's rf-nav--menubar mobile rules). */
 	.rf-header__inner > rf-nav,
@@ -109,8 +113,8 @@
 	.rf-blog-header__inner > rf-nav {
 		display: none;
 	}
-	/* Hide the duplicated brand line inside the mobile panel — the panel
-	   already has its own "Menu" title. */
+	/* Hide the duplicated brand line inside the mobile panel — the header
+	   above the panel already shows it. */
 	.rf-mobile-panel__nav > p:first-child {
 		display: none;
 	}

package/styles/layouts/plan.css

@@ -415,7 +415,7 @@
 		display: none;
 	}
 
-	.rf-mobile-panel--nav {
+	.rf-layout-plan .rf-mobile-panel--nav {
 		top: 3.0625rem;
 	}
 

package/styles/runes/badge.css

@@ -0,0 +1,33 @@
+/* Badge rune — standalone inline pill that visually stands out from prose.
+ *
+ * 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.
+ *
+ * rank="primary" boosts emphasis with a heavier background tint and a
+ * bolder weight, useful for "Popular" / "Featured" labels that should
+ * dominate over their 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));
+	font-weight: 500;
+}
+
+.rf-badge[data-meta-rank="primary"] {
+	background: color-mix(in srgb, var(--meta-color, transparent) 22%, 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. */
+.rf-badge::before {
+	display: none;
+}

package/styles/runes/hint.css

@@ -4,7 +4,6 @@
 	padding: 0.875rem 1.25rem;
 	border-radius: var(--rf-radius-md);
 	background: var(--rf-color-surface);
-	border: 1px solid var(--rf-color-border);
 }
 .rf-hint__header {
 	margin-bottom: 0.375rem;

package/styles/runes/nav.css

@@ -48,11 +48,19 @@
 	color: var(--rf-color-text);
 	text-decoration: none;
 }
-.rf-nav-item__link--active {
+/* SPEC-055: current page receives aria-current="page" at build time
+ * (replaces the legacy --active modifier set at runtime by rf-nav). */
+.rf-nav-item__link[aria-current="page"] {
 	background: color-mix(in srgb, var(--rf-color-primary) 8%, transparent);
 	color: var(--rf-color-primary);
 	font-weight: 600;
 }
+/* SPEC-055: ancestor-of-current-page link — subtler treatment than the
+ * exact-match aria-current state. Themes can collapse the two into a
+ * single style if they prefer. */
+.rf-nav-item__link[data-active="ancestor"] {
+	color: var(--rf-color-primary);
+}
 .rf-nav-item {
 	padding: 0.375rem 0.75rem;
 	font-size: 0.85rem;
@@ -90,11 +98,16 @@
 	transition: transform 200ms ease;
 	margin-right: 0.25rem;
 }
+/* SPEC-054 wraps the group body in `<div data-name="panel">`. Animate that
+ * wrapper; keep the direct ul/ol selectors as a fallback for older trees
+ * that haven't picked up the panel structure. */
+.rf-nav--collapsible .rf-nav-group > .rf-nav-group__panel,
 .rf-nav--collapsible .rf-nav-group > ul,
 .rf-nav--collapsible .rf-nav-group > ol {
 	overflow: hidden;
 	transition: height 200ms ease;
 }
+.rf-nav--collapsible .rf-nav-group[data-collapsed="true"] > .rf-nav-group__panel,
 .rf-nav--collapsible .rf-nav-group[data-collapsed="true"] > ul,
 .rf-nav--collapsible .rf-nav-group[data-collapsed="true"] > ol {
 	height: 0;
@@ -105,6 +118,7 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
+	.rf-nav--collapsible .rf-nav-group > .rf-nav-group__panel,
 	.rf-nav--collapsible .rf-nav-group > ul,
 	.rf-nav--collapsible .rf-nav-group > ol,
 	.rf-nav--collapsible .rf-nav-group h2::after,
@@ -134,6 +148,7 @@
 }
 .rf-nav--menubar > .rf-nav__top-level li {
 	padding: 0;
+	margin: 0;
 }
 .rf-nav--menubar > .rf-nav__top-level .rf-nav-item__link {
 	display: inline-block;
@@ -159,6 +174,7 @@
 	padding: 0.375rem 0.75rem;
 	font-size: 0.9rem;
 	font-weight: 500;
+	line-height: inherit;
 	text-transform: none;
 	letter-spacing: normal;
 	color: var(--rf-color-muted);
@@ -174,13 +190,17 @@
 	background: var(--rf-color-surface);
 	color: var(--rf-color-text);
 }
-.rf-nav--menubar .rf-nav-group ul {
+/* The dropdown panel is the <div data-name="panel"> wrapper added by the
+ * nav schema's buildGroupTag. Positioning + visibility live on this
+ * wrapper so the rule works equally well for simple <ul> dropdowns and
+ * rich panels containing nested navs / intro / footer slots. */
+.rf-nav--menubar .rf-nav-group > .rf-nav-group__panel {
 	display: block;
 	position: absolute;
 	top: 100%;
 	right: 0;
 	left: auto;
-	min-width: 12rem;
+	min-width: 14rem;
 	padding: 0.5rem;
 	background: var(--rf-color-bg);
 	border: 1px solid var(--rf-color-border);
@@ -193,14 +213,33 @@
 	transform: translateY(-4px);
 	transition: opacity 150ms ease, visibility 150ms ease, transform 150ms ease;
 }
-.rf-nav--menubar .rf-nav-group:hover > ul,
-.rf-nav--menubar .rf-nav-group:focus-within > ul,
-.rf-nav--menubar .rf-nav-group[data-open="true"] > ul {
+.rf-nav--menubar .rf-nav-group:hover > .rf-nav-group__panel,
+.rf-nav--menubar .rf-nav-group:focus-within > .rf-nav-group__panel,
+.rf-nav--menubar .rf-nav-group[data-open="true"] > .rf-nav-group__panel {
 	opacity: 1;
 	visibility: visible;
 	pointer-events: auto;
 	transform: translateY(0);
 }
+/* Inside the panel, lists render naturally (no extra positioning). */
+.rf-nav--menubar .rf-nav-group__panel ul {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+}
+.rf-nav--menubar .rf-nav-group__panel li {
+	padding: 0;
+}
+/* Flat dropdown items: force the link to fill the panel's content width so
+ * the hover hit-area is the whole row rather than just the text. Scoped to
+ * `> ul > li > a` so it only catches flat panels — nested columns navs
+ * (which sit inside `.rf-nav--columns`) keep their own item styling. */
+.rf-nav--menubar .rf-nav-group__panel > ul > li > .rf-nav-item__link {
+	display: block;
+	width: 100%;
+	box-sizing: border-box;
+	padding: 0.5rem 0.75rem;
+}
 .rf-nav--menubar .rf-nav-group .rf-nav-item__link {
 	font-size: 0.85rem;
 	font-weight: 400;
@@ -265,7 +304,7 @@
 		background: transparent;
 		color: var(--rf-color-muted);
 	}
-	.rf-nav--menubar .rf-nav-group ul {
+	.rf-nav--menubar .rf-nav-group > .rf-nav-group__panel {
 		position: static;
 		display: block;
 		min-width: 0;
@@ -312,11 +351,24 @@
 	background: transparent;
 	color: var(--rf-color-text);
 }
+/* Standalone columns (footer, section landing) use a text-only treatment
+ * for the active item — the generic `.rf-nav-item__link[aria-current="page"]`
+ * surface tint would compete with the column layout's quiet rhythm. The
+ * nested-in-menubar case re-enables the tint below at higher specificity. */
+.rf-nav--columns .rf-nav-item__link[aria-current="page"] {
+	background: transparent;
+}
 
 @media (max-width: 600px) {
 	.rf-nav--columns {
-		grid-template-columns: 1fr;
-		gap: 1.25rem;
+		/* Keep two columns on mobile. `minmax(0, 1fr)` lets columns shrink
+		 * below their min-content width so long link labels don't push the
+		 * grid wider than the viewport and trigger horizontal scroll. */
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+		gap: 1.25rem 1.5rem;
+	}
+	.rf-nav--columns .rf-nav-item__link {
+		overflow-wrap: anywhere;
 	}
 }
 
@@ -401,3 +453,255 @@
 		grid-template-columns: 1fr;
 	}
 }
+
+/* ─── Per-item description (SPEC-054, any layout) ─────────────────────── */
+
+.rf-nav-item__description {
+	display: block;
+	font-size: 0.8125rem;
+	color: var(--rf-color-muted);
+	line-height: 1.4;
+	margin-top: 0.125rem;
+}
+
+/* ─── Menubar group slots (SPEC-054 rich panel content) ──────────────── */
+
+/* Rich menubar panels: when the panel contains intro / nested nav / footer
+ * blocks, it auto-sizes to fit content rather than the narrow flat dropdown
+ * default. */
+.rf-nav--menubar .rf-nav-group__panel:has(.rf-nav-group__intro),
+.rf-nav--menubar .rf-nav-group__panel:has(.rf-nav-group__footer),
+.rf-nav--menubar .rf-nav-group__panel:has(.rf-nav) {
+	min-width: 20rem;
+	max-width: 36rem;
+}
+
+/* When the panel contains a nested columns nav with explicit column wrappers,
+ * widen the cap so each column has room for a one-line description rather
+ * than wrapping to three or four. */
+.rf-nav--menubar .rf-nav-group__panel:has(.rf-nav--columns > div[data-name="column"]) {
+	min-width: 36rem;
+	max-width: 56rem;
+}
+
+/* Nested columns nav inside a menubar panel: render as a distinct surface
+ * card so the column grid reads as a grouped block rather than bleeding
+ * into the panel's chrome. Resets the standalone columns padding (which
+ * assumes a footer-like context) and tightens the gap for the tighter
+ * dropdown box. */
+.rf-nav--menubar .rf-nav-group__panel .rf-nav--columns {
+	padding: 0.75rem;
+	gap: 1rem;
+	background: var(--rf-color-surface);
+	border: 1px solid var(--rf-color-border);
+	border-radius: var(--rf-radius-sm);
+}
+
+/* Items inside a nested menubar columns nav: render the whole link as one
+ * generously padded click target with the title on top in regular text
+ * colour and the description stacked below in muted colour. The description
+ * `<span>` lives inside the `<a>` (see navItem transform), so styling on
+ * the link covers both lines. */
+.rf-nav--menubar .rf-nav-group__panel .rf-nav--columns .rf-nav-item {
+	padding: 0;
+}
+.rf-nav--menubar .rf-nav-group__panel .rf-nav--columns .rf-nav-item__link {
+	display: block;
+	padding: 0.75rem;
+	color: var(--rf-color-text);
+	font-weight: 500;
+	border-radius: var(--rf-radius-sm);
+}
+.rf-nav--menubar .rf-nav-group__panel .rf-nav--columns .rf-nav-item__link:hover {
+	background: var(--rf-color-surface-hover);
+	color: var(--rf-color-text);
+}
+/* Re-enable a neutral surface tint on the active item inside a menubar
+ * dropdown — the standalone-columns override above zeroes the background,
+ * but here it helps the current page stand out from peers in a tight
+ * panel. Uses the purpose-built interactive-surface tokens so the contrast
+ * direction stays correct in dark mode. */
+.rf-nav--menubar .rf-nav-group__panel .rf-nav--columns .rf-nav-item__link[aria-current="page"] {
+	background: var(--rf-color-surface-active);
+}
+.rf-nav--menubar .rf-nav-group__panel .rf-nav--columns .rf-nav-item__link .rf-nav-item__description {
+	font-weight: 400;
+	color: var(--rf-color-muted);
+}
+
+/* Intro / footer slots inside a menubar panel get airy padding so the
+ * eyebrow / "see all" links breathe inside the dropdown frame. */
+.rf-nav--menubar .rf-nav-group__panel > .rf-nav-group__intro {
+	margin: 0 0 0.75rem;
+	padding: 0.5rem 0.75rem 0;
+}
+.rf-nav--menubar .rf-nav-group__panel > .rf-nav-group__footer {
+	margin: 0.75rem 0 0;
+	padding: 0 0.75rem 0.5rem;
+}
+
+.rf-nav-group__intro {
+	margin: 0 0 0.75rem;
+}
+
+/* Eyebrow intro: a plain paragraph in the intro slot renders as a small
+ * muted lead-in above the panel content. */
+.rf-nav-group__intro p:only-child {
+	margin: 0;
+	font-size: 0.75rem;
+	color: var(--rf-color-muted);
+}
+
+.rf-nav-group__footer {
+	margin: 0.75rem 0 0;
+}
+.rf-nav-group__footer p {
+	margin: 0;
+	font-size: 0.8125rem;
+	color: var(--rf-color-muted);
+}
+.rf-nav-group__footer a {
+	color: var(--rf-color-primary);
+	font-weight: 500;
+}
+
+/* ─── Multi-section columns (SPEC-054 columns flow rule) ──────────────── */
+
+/* When the columns layout has <hr> separators, groups are bucketed into
+ * .rf-nav-group__column wrappers (or .rf-nav__column at the nav level for
+ * headingless mode). Each column stacks one or more sections vertically. */
+.rf-nav--columns .rf-nav-group__column,
+.rf-nav--columns .rf-nav__column,
+.rf-nav--columns > div[data-name="column"] {
+	display: flex;
+	flex-direction: column;
+	gap: 1.25rem;
+}
+
+/* Multi-section columns mode: when the author has placed explicit `---`
+ * dividers, the structure already declares the column count. Use
+ * grid-auto-flow:column so each `data-name="column"` wrapper becomes its own
+ * track — this expands the container to fit the tracks rather than
+ * collapsing to one column when the container is narrow (e.g. nested inside
+ * a menubar panel at its min-width). */
+.rf-nav--columns:has(> div[data-name="column"]) {
+	display: grid;
+	grid-template-columns: unset;
+	grid-auto-flow: column;
+	grid-auto-columns: minmax(14rem, 1fr);
+}
+
+/* Stepped collapse: at four columns × 14rem min + gaps the grid needs ~62rem
+ * of width, so below ~900px the explicit-column flow would overflow. Step
+ * down to a 2×N grid before going single-column at the narrowest breakpoint. */
+@media (max-width: 900px) {
+	.rf-nav--columns:has(> div[data-name="column"]) {
+		grid-auto-flow: row;
+		grid-auto-columns: unset;
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+	}
+}
+
+@media (max-width: 600px) {
+	.rf-nav--columns:has(> div[data-name="column"]) {
+		grid-auto-flow: row;
+		grid-auto-columns: unset;
+		/* Keep two columns on mobile. `minmax(0, 1fr)` lets columns shrink
+		 * below their min-content width so long link labels don't push the
+		 * grid wider than the viewport and trigger horizontal scroll. */
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+	}
+}
+
+/* ─── Strip layout (SPEC-054 compact secondary nav) ───────────────────── */
+
+.rf-nav--strip {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.5rem 1rem;
+	padding: 0.5rem 0;
+	font-size: 0.8125rem;
+}
+.rf-nav--strip ul {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.5rem 1rem;
+	list-style: none;
+	padding: 0;
+	margin: 0;
+}
+.rf-nav--strip li {
+	padding: 0;
+}
+.rf-nav--strip .rf-nav-item__link {
+	display: inline-block;
+	padding: 0.25rem 0;
+	color: var(--rf-color-muted);
+	font-size: 0.8125rem;
+	border-radius: 0;
+	background: transparent;
+}
+.rf-nav--strip .rf-nav-item__link:hover {
+	color: var(--rf-color-text);
+	background: transparent;
+}
+.rf-nav--strip .rf-nav-item__link[aria-current="page"] {
+	color: var(--rf-color-primary);
+	background: transparent;
+}
+
+/* When a strip nav is nested inside a menubar panel footer slot, render
+ * compact-but-still-tap-friendly. */
+.rf-nav-group__footer .rf-nav--strip {
+	padding: 0;
+	font-size: 0.75rem;
+}
+
+/* ─── Mobile menubar: nested columns collapse ─────────────────────────── */
+
+/* Placed at the end of the file so the source order beats the desktop
+ * nested-columns rules at equal specificity. On a collapsed menubar
+ * drawer (≤ 768px), drop the columns nav's surface card chrome and
+ * flatten to a single-column flow so each item visually matches a
+ * regular flat-dropdown item rather than a card-styled grid cell. */
+@media (max-width: 768px) {
+	.rf-nav--menubar .rf-nav-group__panel .rf-nav--columns {
+		padding: 0;
+		gap: 0;
+		background: transparent;
+		border: 0;
+		border-radius: 0;
+		grid-auto-flow: row;
+		grid-auto-columns: unset;
+		grid-template-columns: 1fr;
+	}
+	/* Tighter padding + bolder weight matches the visual rhythm of the
+	 * regular flat menubar group items above. Hover swaps to a text-colour
+	 * change rather than a surface tint so the drawer doesn't fill with
+	 * highlighted bands as the user scrolls. */
+	.rf-nav--menubar .rf-nav-group__panel .rf-nav--columns .rf-nav-item__link {
+		padding: 0.25rem 0.75rem;
+		font-weight: 500;
+	}
+	.rf-nav--menubar .rf-nav-group__panel .rf-nav--columns .rf-nav-item__link:hover {
+		background: transparent;
+		color: var(--rf-color-primary);
+	}
+	/* Descriptions are space-eaters in a vertical drawer — hide them and let
+	 * the link title carry the line on its own. */
+	.rf-nav--menubar .rf-nav-group__panel .rf-nav--columns .rf-nav-item__description {
+		display: none;
+	}
+	/* Rich-panel min-widths (20rem / 36rem) above aren't viewport-gated and
+	 * would push the drawer wider than the mobile viewport. The drawer
+	 * renders the menubar as a flat vertical list, so no min-width is
+	 * needed — clamp to fit. Placed after the rich-panel rules so source
+	 * order wins the cascade at equal specificity. */
+	.rf-nav--menubar .rf-nav-group__panel:has(.rf-nav-group__intro),
+	.rf-nav--menubar .rf-nav-group__panel:has(.rf-nav-group__footer),
+	.rf-nav--menubar .rf-nav-group__panel:has(.rf-nav),
+	.rf-nav--menubar .rf-nav-group__panel:has(.rf-nav--columns > div[data-name="column"]) {
+		min-width: 0;
+		max-width: 100%;
+	}
+}