@refrakt-md/lumina 0.22.0 → 0.23.0

package/styles/runes/hint.css

@@ -1,49 +1,22 @@
-/* Hint */
+@layer skin {
+/* Hint — skin. The sunken surface chrome (fill, border, radius) comes from
+ * dimensions/surfaces.css via defaultElevation: 'sunken'; only the bespoke
+ * padding stays here so the icon+title+body breathes wider than --rune-padding
+ * at compact density. The header layout + icon-glyph box mechanism live in
+ * @refrakt-md/skeleton (styles/runes/hint.css). */
 .rf-hint {
 	--hint-color: var(--rf-color-info);
-	padding: 0.875rem 1.25rem;
-	border-radius: var(--rf-radius-md);
-	background: var(--rf-color-surface);
+	padding: var(--rf-spacing-snug) var(--rf-spacing-cozy);
 }
 .rf-hint__header {
-	margin-bottom: 0.375rem;
+	margin-bottom: var(--rf-spacing-xs);
 	color: var(--hint-color);
 }
-/* The lone `hintType` field renders icon + label in one inline-flex span. */
 .rf-hint__header > span {
-	display: inline-flex;
-	align-items: center;
-	gap: 0.375rem;
-}
-.rf-hint__header [data-icon-group="hint"] {
-	display: block;
+	gap: var(--rf-spacing-xs);
 }
 .rf-hint__header [data-icon-group="hint"]::before {
-	content: '';
-	display: block;
-	width: 1.25rem;
-	height: 1.25rem;
 	background-color: var(--hint-color);
-	-webkit-mask-size: contain;
-	mask-size: contain;
-	-webkit-mask-repeat: no-repeat;
-	mask-repeat: no-repeat;
-}
-[data-icon-group="hint"][data-icon="note"]::before {
-	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");
-	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");
-}
-[data-icon-group="hint"][data-icon="warning"]::before {
-	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
-	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
-}
-[data-icon-group="hint"][data-icon="caution"]::before {
-	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='15' y1='9' x2='9' y2='15'/%3E%3Cline x1='9' y1='9' x2='15' y2='15'/%3E%3C/svg%3E");
-	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='15' y1='9' x2='9' y2='15'/%3E%3Cline x1='9' y1='9' x2='15' y2='15'/%3E%3C/svg%3E");
-}
-[data-icon-group="hint"][data-icon="check"]::before {
-	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E");
-	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E");
 }
 .rf-hint__header [data-meta-value] {
 	font-weight: var(--rf-weight-semibold);
@@ -75,18 +48,20 @@
 
 /* Context-aware: compact hint when nested inside a hero */
 .rf-hint--in-hero {
-	margin: 1rem 0 0;
-	padding: 0.625rem 1rem;
+	margin: var(--rf-spacing-cozy) 0 0;
+	padding: var(--rf-spacing-sm) var(--rf-spacing-cozy);
 	border-radius: var(--rf-radius-sm);
 	font-size: var(--rf-text-sm);
 }
 .rf-hint--in-hero .rf-hint__header {
-	margin-bottom: 0.25rem;
+	margin-bottom: var(--rf-spacing-xs);
 }
 
 /* Context-aware: hint inside a feature block */
 .rf-hint--in-feature {
-	margin: 0.75rem 0 0;
-	padding: 0.5rem 0.875rem;
+	margin: var(--rf-spacing-snug) 0 0;
+	padding: var(--rf-spacing-sm) var(--rf-spacing-snug);
 	font-size: var(--rf-text-sm);
 }
+
+}

package/styles/runes/howto.css

@@ -1,3 +1,4 @@
+@layer skin {
 /* HowTo — matches recipe design */
 
 /* Tools/materials list — surfaced zone with primary markers */
@@ -21,29 +22,16 @@
 .rf-howto__content ol {
 	padding-left: 0;
 	margin: 0;
-	list-style: none;
-	counter-reset: howto-step;
 }
 .rf-howto__content ol > li {
-	counter-increment: howto-step;
 	padding: 0.625rem 0;
 	padding-left: 2.25rem;
-	position: relative;
 	line-height: var(--rf-leading-relaxed);
 }
 .rf-howto__content ol > li + li {
 	border-top: 1px solid var(--rf-color-border);
 }
 .rf-howto__content ol > li::before {
-	content: counter(howto-step);
-	position: absolute;
-	left: 0;
-	top: 0.625rem;
-	width: 1.5rem;
-	height: 1.5rem;
-	display: flex;
-	align-items: center;
-	justify-content: center;
 	font-size: var(--rf-text-xs);
 	font-weight: var(--rf-weight-bold);
 	color: var(--rf-color-primary);
@@ -71,23 +59,13 @@
 .rf-howto__content blockquote p {
 	margin: 0;
 }
-
-/* Metadata — est. time / difficulty are short, symmetric facts, so keep the
- * def-list a dense tile grid at every width (a smaller column min than the
- * 8rem default) instead of the shared mobile label/value list. */
-.rf-howto__metadata {
-	grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
-}
 @media (max-width: 48rem) {
 	.rf-howto__metadata {
-		grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
 		gap: 0.75rem;
-		align-items: normal;
 		padding: 0;
 		border: none;
 	}
-	.rf-howto__metadata > [data-name="row"] {
-		display: flex;
-	}
 }
 
+
+}

package/styles/runes/itinerary.css

@@ -1,3 +1,4 @@
+@layer skin {
 /* Itinerary */
 .rf-itinerary {
 	margin: 2rem 0;
@@ -21,18 +22,13 @@
 	padding-bottom: 0.5rem;
 	border-bottom: 2px solid var(--rf-color-border);
 }
-.rf-itinerary-day__header:empty {
-	display: none;
-}
 .rf-itinerary-day ol {
-	list-style: none;
 	padding: 0;
 	margin: 0;
 }
 
 /* Stop */
 .rf-itinerary-stop {
-	position: relative;
 	padding-left: 2rem;
 	padding-bottom: 1.5rem;
 	border-left: 2px solid var(--rf-color-border);
@@ -43,12 +39,6 @@
 	padding-bottom: 0;
 }
 .rf-itinerary-stop::before {
-	content: '';
-	position: absolute;
-	left: -0.4375rem;
-	top: 0.25rem;
-	width: 0.75rem;
-	height: 0.75rem;
 	border-radius: 50%;
 	background: var(--rf-color-primary);
 	border: 2px solid var(--rf-color-bg);
@@ -57,7 +47,6 @@
 
 /* Stop time */
 .rf-itinerary-stop__time {
-	display: block;
 	font-size: var(--rf-text-xs);
 	font-weight: var(--rf-weight-semibold);
 	color: var(--rf-color-primary);
@@ -67,7 +56,6 @@
 
 /* Stop location */
 .rf-itinerary-stop__location {
-	display: block;
 	font-size: var(--rf-text);
 	font-weight: var(--rf-weight-bold);
 	color: var(--rf-color-text);
@@ -87,9 +75,6 @@
 /* Duration badge */
 .rf-itinerary-stop[data-duration]::after {
 	content: attr(data-duration);
-	position: absolute;
-	top: 0.15rem;
-	right: 0;
 	font-size: var(--rf-text-xs);
 	font-weight: var(--rf-weight-medium);
 	color: var(--rf-color-muted);
@@ -126,13 +111,10 @@
 
 /* Horizontal direction */
 .rf-itinerary--horizontal .rf-itinerary-day ol {
-	display: flex;
 	gap: 2rem;
-	overflow-x: auto;
 	padding: 2rem 0 1rem;
 }
 .rf-itinerary--horizontal .rf-itinerary-stop {
-	min-width: 14rem;
 	padding-left: 0;
 	padding-top: 1.5rem;
 	padding-bottom: 0;
@@ -143,31 +125,20 @@
 .rf-itinerary--horizontal .rf-itinerary-stop:last-child {
 	border-top-color: transparent;
 }
-.rf-itinerary--horizontal .rf-itinerary-stop::before {
-	left: 0.5rem;
-	top: -0.4375rem;
-}
 .rf-itinerary--horizontal .rf-itinerary-stop[data-duration]::after {
-	position: static;
-	display: inline-block;
 	margin-top: 0.5rem;
 }
-
-/* Compact style */
-.rf-itinerary--compact .rf-itinerary-stop__body {
-	display: none;
-}
 .rf-itinerary--compact .rf-itinerary-stop {
 	padding-bottom: 0.75rem;
 }
 .rf-itinerary--compact .rf-itinerary-stop__location {
-	display: inline;
 	font-size: var(--rf-text-sm);
 }
 .rf-itinerary--compact .rf-itinerary-stop__time {
-	display: inline;
 	margin-bottom: 0;
 }
 .rf-itinerary--compact .rf-itinerary-stop__time::after {
 	content: ' — ';
 }
+
+}

package/styles/runes/juxtapose.css

@@ -1,135 +1,58 @@
-/* Juxtapose — interactive comparison between two panels */
-
-/* ─── Variant modifiers (for static/no-JS layout) ─── */
-.rf-juxtapose--slider,
-.rf-juxtapose--auto,
-.rf-juxtapose--fade,
-.rf-juxtapose--toggle {
-	/* shared base — no additional styling needed */
-}
-
-/* ─── Panels container ─── */
+@layer skin {
+/* Juxtapose — skin. The panel clip/positioning, label placement, media fill, slider
+ * divider/handle positioning, toggle-bar flex, and meta/label hides live in
+ * @refrakt-md/skeleton (styles/runes/juxtapose.css). */
 .rf-juxtapose__panels {
 	border-radius: var(--rf-radius-md);
-	overflow: hidden;
 	border: 1px solid var(--rf-color-border);
 	background: var(--rf-color-surface);
 }
-
-/* ─── Panel ─── */
-.rf-juxtapose-panel {
-	position: relative;
-	overflow: hidden;
-}
 .rf-juxtapose-panel__name {
-	position: absolute;
-	bottom: 0.5rem;
 	padding: 0.25rem 0.75rem;
 	background: rgba(0, 0, 0, 0.6);
 	color: white;
 	font-size: var(--rf-text-xs);
 	font-weight: var(--rf-weight-semibold);
 	border-radius: var(--rf-radius-sm);
-	pointer-events: none;
-}
-/* First panel: label bottom-left */
-.rf-juxtapose-panel:first-child .rf-juxtapose-panel__name {
-	left: 0.5rem;
-}
-/* Second panel: label bottom-right */
-.rf-juxtapose-panel:last-child .rf-juxtapose-panel__name {
-	right: 0.5rem;
 }
-.rf-juxtapose-panel__body {
-	/* Content fills the panel */
-}
-.rf-juxtapose-panel__body :is(img, .rf-placeholder) {
-	display: block;
-	width: 100%;
-	height: auto;
-	object-fit: cover;
-}
-
-/* Hide meta tags inside panels */
-.rf-juxtapose-panel > meta { display: none; }
-
-/* ─── Toggle variant: labels only on buttons, not in panels ─── */
-.rf-juxtapose--toggle .rf-juxtapose-panel__name {
-	display: none;
-}
-
-/* ─── Slider divider (injected by behavior) ─── */
 .rf-juxtapose__divider {
-	position: absolute;
-	z-index: 10;
 	cursor: col-resize;
-	touch-action: none;
 }
-
-/* Vertical orientation (left/right split) — default */
 .rf-juxtapose:not([data-orientation="horizontal"]) .rf-juxtapose__divider {
-	top: 0;
-	bottom: 0;
-	width: 3px;
-	transform: translateX(-50%);
 	background: var(--rf-color-bg, #fff);
 	box-shadow: var(--rf-shadow-sm);
 }
-
-/* Horizontal orientation (top/bottom split) */
 .rf-juxtapose[data-orientation="horizontal"] .rf-juxtapose__divider {
-	left: 0;
-	right: 0;
-	height: 3px;
-	transform: translateY(-50%);
 	background: var(--rf-color-bg, #fff);
 	box-shadow: var(--rf-shadow-sm);
 	cursor: row-resize;
 }
-
 .rf-juxtapose__divider-handle {
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%);
-	width: 2.5rem;
-	height: 2.5rem;
 	border-radius: var(--rf-radius-full);
 	background: var(--rf-color-bg, #fff);
 	border: 2px solid var(--rf-color-border);
 	box-shadow: var(--rf-shadow-md);
-	display: flex;
-	align-items: center;
-	justify-content: center;
 }
-
 .rf-juxtapose__divider-handle::before {
-	content: '\2194';  /* ↔ */
+	content: '\2194';
 	font-size: var(--rf-text);
 	color: var(--rf-color-muted);
 	line-height: 1;
 }
-
 .rf-juxtapose[data-orientation="horizontal"] .rf-juxtapose__divider-handle::before {
-	content: '\2195';  /* ↕ */
+	content: '\2195';
 }
-
 .rf-juxtapose__divider:focus-visible {
 	outline: 2px solid var(--rf-color-primary);
 	outline-offset: 2px;
 }
-
-/* ─── Toggle bar (injected by behavior) ─── */
 .rf-juxtapose__toggle-bar {
-	display: flex;
 	gap: 0.125rem;
 	padding: 0.125rem;
 	margin-bottom: 0.75rem;
 	background: var(--rf-color-surface-active);
 	border-radius: var(--rf-radius-full);
-	width: fit-content;
 }
-
 .rf-juxtapose__toggle-btn,
 .rf-juxtapose__toggle-btn[data-state] {
 	padding: 0.25rem 0.75rem;
@@ -142,20 +65,22 @@
 	cursor: pointer;
 	transition: background 150ms ease, color 150ms ease;
 }
-
 .rf-juxtapose__toggle-btn:hover {
 	color: var(--rf-color-text);
 }
-
 .rf-juxtapose__toggle-btn--active,
 .rf-juxtapose__toggle-btn[data-state="active"] {
 	background: var(--rf-color-bg);
 	color: var(--rf-color-text);
 	box-shadow: var(--rf-shadow-xs);
 }
-
-/* ─── Fade variant cursor hint ─── */
 .rf-juxtapose--fade .rf-juxtapose__panels {
 	cursor: pointer;
 }
+[data-section="media"] > .rf-juxtapose .rf-juxtapose__panels {
+	background: transparent;
+	border: 0;
+	border-radius: var(--rf-radius-media);
+}
 
+}

package/styles/runes/lore.css

@@ -1,7 +1,4 @@
-/* Lore */
-.rf-lore {
-	position: relative;
-}
+@layer skin {
 
 /* Content */
 .rf-lore__content {
@@ -15,7 +12,6 @@
 	font-style: italic;
 }
 .rf-lore > span[property="title"] {
-	display: block;
 	font-size: var(--rf-text-2xl);
 	font-weight: var(--rf-weight-bold);
 	margin-bottom: 0.5rem;
@@ -29,10 +25,6 @@
 }
 .rf-lore--spoiler::after {
 	content: 'Contains spoilers \2014 click to reveal';
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%);
 	padding: 0.5rem 1rem;
 	background: var(--rf-color-bg);
 	border-radius: var(--rf-radius-md);
@@ -40,5 +32,6 @@
 	font-weight: var(--rf-weight-medium);
 	color: var(--rf-color-muted);
 	cursor: pointer;
-	z-index: 1;
+}
+
 }

package/styles/runes/map.css

@@ -1,9 +1,9 @@
+@layer skin {
 /* ── Map Rune ── */
 
 .rf-map {
 	margin: 2rem 0;
 	border-radius: var(--rf-radius-lg, 0.75rem);
-	overflow: hidden;
 }
 
 /* Spacing variants */
@@ -12,15 +12,7 @@
 .rf-map--spacing-loose { margin: 3rem 0; }
 .rf-map--spacing-breathe { margin: 4rem 0; }
 
-/* Height variants */
-.rf-map--small .rf-map__container { height: 200px; }
-.rf-map--medium .rf-map__container { height: 400px; }
-.rf-map--large .rf-map__container { height: 600px; }
-.rf-map--full .rf-map__container { height: 80vh; min-height: 400px; }
-
 .rf-map__container {
-	width: 100%;
-	position: relative;
 	background: var(--rf-color-surface, #f8f9fa);
 	/* Establish a stacking context so Leaflet's internal pane z-indices
 	 * (tile-pane 200, overlay-pane 400, marker-pane 600, popup-pane 700,
@@ -28,14 +20,12 @@
 	 * a map dropped into a cover card's media slot punches through the
 	 * cover scrim (z-index auto) and overlaid content (z-index 1).
 	 * `position: relative` alone is not enough; `isolation: isolate` is. */
-	isolation: isolate;
 }
 
 /* Fallback list shown while Leaflet loads */
 .rf-map__fallback {
 	padding: 1.5rem;
 	margin: 0;
-	list-style: decimal inside;
 	font-size: var(--rf-text-sm);
 	color: var(--rf-color-muted);
 }
@@ -48,19 +38,6 @@
 	color: var(--rf-color-text);
 }
 
-/* Accessible text list (visible to screen readers, hidden visually) */
-.rf-map__pins {
-	position: absolute;
-	width: 1px;
-	height: 1px;
-	padding: 0;
-	margin: -1px;
-	overflow: hidden;
-	clip: rect(0, 0, 0, 0);
-	white-space: nowrap;
-	border: 0;
-}
-
 /* MapPin in fallback / a11y list */
 .rf-map-pin {
 	padding: 0.25rem 0;
@@ -72,7 +49,6 @@
 }
 
 .rf-map-pin__group {
-	display: inline-block;
 	font-size: var(--rf-text-xs);
 	padding: 0.1rem 0.5rem;
 	border-radius: var(--rf-radius-sm, 0.25rem);
@@ -81,12 +57,6 @@
 	margin-left: 0.5rem;
 }
 
-/* Hide meta tags and property spans inside the map */
-.rf-map meta,
-.rf-map span[property] {
-	display: none;
-}
-
 /* ── Map as a media guest ──
  * When dropped into a `[data-section="media"]` slot (e.g. a card or
  * bento-cell in cover mode), the map yields its standalone presentation to
@@ -99,12 +69,8 @@
 [data-section="media"] > .rf-map {
 	margin: 0;
 	padding: 0;
-	height: 100%;
 	border-radius: inherit;
 }
-[data-section="media"] > .rf-map > .rf-map__container {
-	height: 100%;
-}
 [data-section="media"] .rf-map__fallback {
 	padding: 0.75rem 1rem;
 }
@@ -123,7 +89,6 @@
 }
 
 .rf-map .leaflet-popup-content strong {
-	display: block;
 	font-size: var(--rf-text);
 	margin-bottom: 0.25rem;
 }
@@ -145,3 +110,5 @@
 .rf-map .leaflet-popup-content a:hover {
 	text-decoration: underline;
 }
+
+}

package/styles/runes/mediatext.css

@@ -1,32 +1,13 @@
+@layer skin {
 /* MediaText */
 
 /* Grid mode (default — no wrap) */
 .rf-mediatext:not([data-wrap="true"]) {
-	display: grid;
 	gap: 2rem;
-	align-items: start;
-}
-
-/* Ratio variants for grid mode */
-.rf-mediatext[data-ratio="1:1"]:not([data-wrap="true"]) {
-	grid-template-columns: 1fr 1fr;
-}
-.rf-mediatext[data-ratio="1:2"]:not([data-wrap="true"]) {
-	grid-template-columns: 1fr 2fr;
-}
-.rf-mediatext[data-ratio="2:1"]:not([data-wrap="true"]) {
-	grid-template-columns: 2fr 1fr;
-}
-
-/* Right alignment — media on the right in grid mode */
-.rf-mediatext--right:not([data-wrap="true"]) .rf-mediatext__media {
-	order: 1;
 }
 
 /* Media container */
 .rf-mediatext__media :is(img, .rf-placeholder) {
-	max-width: 100%;
-	height: auto;
 	border-radius: var(--rf-radius-md);
 }
 
@@ -38,40 +19,18 @@
 .rf-mediatext[data-wrap="true"] .rf-mediatext__media {
 	margin-bottom: 1rem;
 }
-.rf-mediatext[data-ratio="1:1"][data-wrap="true"] .rf-mediatext__media {
-	max-width: 50%;
-}
-.rf-mediatext[data-ratio="1:2"][data-wrap="true"] .rf-mediatext__media {
-	max-width: 33.333%;
-}
-.rf-mediatext[data-ratio="2:1"][data-wrap="true"] .rf-mediatext__media {
-	max-width: 66.666%;
-}
 .rf-mediatext--left[data-wrap="true"] .rf-mediatext__media {
-	float: left;
 	margin-right: 2rem;
 }
 .rf-mediatext--right[data-wrap="true"] .rf-mediatext__media {
-	float: right;
 	margin-left: 2rem;
 }
-.rf-mediatext[data-wrap="true"]::after {
-	content: '';
-	display: table;
-	clear: both;
-}
 
 /* Responsive — stack on mobile */
 @media (max-width: 768px) {
-	.rf-mediatext:not([data-wrap="true"]) {
-		grid-template-columns: 1fr !important;
-	}
-	.rf-mediatext--right:not([data-wrap="true"]) .rf-mediatext__media {
-		order: 0;
-	}
 	.rf-mediatext[data-wrap="true"] .rf-mediatext__media {
-		float: none;
-		max-width: 100%;
 		margin: 0 0 1rem 0;
 	}
 }
+
+}

package/styles/runes/milestone.css

@@ -1,3 +1,4 @@
+@layer skin {
 /* Milestone */
 
 /* SPEC-079: eyebrow + metadata zone names replace header-primary /
@@ -43,15 +44,10 @@
 
 /* Backlog tabs */
 .rf-milestone__tabs {
-	display: flex;
 	border-bottom: 1px solid var(--rf-color-border);
-	overflow-x: auto;
-	overflow-y: hidden;
-	-webkit-overflow-scrolling: touch;
 	margin-bottom: 0;
 }
 .rf-milestone__tab {
-	flex: 0 0 auto;
 	padding: 0.5rem 1rem;
 	font-size: var(--rf-text-sm);
 	font-weight: var(--rf-weight-medium);
@@ -82,14 +78,9 @@
 
 /* Aggregate progress */
 .rf-milestone__progress {
-	display: flex;
-	flex-direction: column;
 	margin-bottom: 1rem;
 }
 .rf-milestone__progress-header {
-	display: flex;
-	justify-content: space-between;
-	align-items: baseline;
 	margin-bottom: 0.375rem;
 }
 .rf-milestone__progress-label {
@@ -103,17 +94,13 @@
 	color: var(--rf-color-muted);
 }
 .rf-milestone__progress-bar {
-	height: 0.375rem;
 	border-radius: var(--rf-radius-sm);
 	background: var(--rf-color-surface-active);
-	overflow: hidden;
 }
 .rf-milestone__progress-bar::after {
-	content: '';
-	display: block;
-	height: 100%;
-	width: var(--rf-progress, 0%);
 	background: var(--rf-color-primary);
 	border-radius: var(--rf-radius-sm);
 	transition: width 0.3s ease;
 }
+
+}