@refrakt-md/lumina 0.21.0 → 0.23.0

package/styles/runes/hero.css

@@ -1,21 +1,24 @@
-/* Hero */
+@layer skin {
+/* Hero — skin. The relative root, preamble/eyebrow/actions/button layout + their
+ * auto-margin alignment + mobile stack, the media-position flip, the responsive
+ * image box, and the cover-band height/containment authority live in
+ * @refrakt-md/skeleton (styles/runes/hero.css). What remains here is skin:
+ * spacing, type, the headline gradient, surface chrome, the scrim, radii, and
+ * text-align. */
 .rf-hero {
-	position: relative;
 	padding: 7rem 2rem 6.5rem;
 	background-size: cover;
 	background-position: center;
 }
 .rf-hero__preamble {
-	flex-direction: column;
-	align-items: center;
 	gap: 0.25rem;
 	margin-bottom: 2rem;
 }
 /* Higher specificity needed to override .rf-hero p (0,1,1) */
 .rf-hero .rf-hero__eyebrow {
-	font-size: 0.875rem;
-	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 1rem;
@@ -23,15 +26,13 @@
 }
 /* Pill-badge variant when eyebrow contains a link */
 .rf-hero .rf-hero__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-hero .rf-hero__eyebrow:has(a):hover {
@@ -39,13 +40,10 @@
 }
 .rf-hero .rf-hero__eyebrow:has(a) a {
 	color: var(--rf-color-primary);
-	font-weight: 600;
+	font-weight: var(--rf-weight-semibold);
 	text-decoration: none;
 }
 .rf-hero .rf-hero__eyebrow:has(a) a::before {
-	content: '';
-	position: absolute;
-	inset: 0;
 	border-radius: inherit;
 }
 .rf-hero__image {
@@ -53,47 +51,27 @@
 }
 .rf-hero__actions {
 	max-width: 720px;
-	margin: 0 auto;
-	display: flex;
-	align-items: center;
 	gap: 0.75rem;
-	flex-wrap: wrap;
 }
 .rf-hero[data-align="center"] .rf-hero__preamble,
 .rf-hero[data-align="center"] > h1,
 .rf-hero[data-align="center"] > p {
 	text-align: center;
 }
-.rf-hero[data-align="center"] .rf-hero__actions {
-	margin: 0 auto;
-	justify-content: center;
-}
 .rf-hero[data-align="left"] .rf-hero__preamble,
 .rf-hero[data-align="left"] > h1,
 .rf-hero[data-align="left"] > p {
 	text-align: left;
 }
-.rf-hero[data-align="left"] .rf-hero__preamble {
-	align-items: flex-start;
-}
-.rf-hero[data-align="left"] .rf-hero__actions {
-	margin: 0;
-}
 .rf-hero[data-align="right"] .rf-hero__preamble,
 .rf-hero[data-align="right"] > h1,
 .rf-hero[data-align="right"] > p {
 	text-align: right;
 }
-.rf-hero[data-align="right"] .rf-hero__preamble {
-	align-items: flex-end;
-}
-.rf-hero[data-align="right"] .rf-hero__actions {
-	margin: 0 0 0 auto;
-}
 .rf-hero__actions pre {
 	margin: 0;
 	padding: 0.7rem 1.75rem;
-	font-size: 0.95rem;
+	font-size: var(--rf-text);
 	border-radius: var(--rf-radius-sm);
 	background: var(--rf-color-code-bg);
 	color: var(--rf-color-code-text);
@@ -102,10 +80,11 @@
 }
 .rf-hero h1,
 .rf-hero__headline {
+	/* Hero display headline — a one-off above the --rf-text scale's top step. */
 	font-size: 3.25rem;
-	font-weight: 800;
-	letter-spacing: -0.035em;
-	line-height: 1.1;
+	font-weight: var(--rf-weight-bold);
+	letter-spacing: var(--rf-tracking-tight);
+	line-height: var(--rf-leading-tight);
 	margin: 0 0 1rem;
 	background: linear-gradient(135deg, var(--rf-color-text) 0%, var(--rf-color-muted) 100%);
 	-webkit-background-clip: text;
@@ -115,8 +94,8 @@
 /* Higher specificity needed to override .rf-hero p (0,1,1) */
 .rf-hero p,
 .rf-hero .rf-hero__blurb {
-	font-size: 1.2rem;
-	line-height: 1.65;
+	font-size: var(--rf-text-xl);
+	line-height: var(--rf-leading-relaxed);
 	color: var(--rf-color-muted);
 	margin: 0 0 2rem;
 	max-width: 40rem;
@@ -124,36 +103,25 @@
 .rf-hero[data-align="center"] > p,
 .rf-hero[data-align="center"] .rf-hero__blurb {
 	max-width: 560px;
-	margin-left: auto;
-	margin-right: auto;
 	margin-bottom: 2rem;
 }
 .rf-hero ul,
 .rf-hero nav {
-	display: flex;
 	gap: 0.75rem;
-	flex-wrap: wrap;
-	list-style: none;
 	padding: 0;
 	margin: 0;
 }
-.rf-hero[data-align="center"] ul,
-.rf-hero[data-align="center"] nav {
-	justify-content: center;
-}
 .rf-hero li {
 	padding: 0;
 	margin: 0;
 }
 .rf-hero li a,
 .rf-hero nav a {
-	display: inline-flex;
-	align-items: center;
 	padding: 0.7rem 1.75rem;
 	border-radius: var(--rf-radius-sm);
 	text-decoration: none;
-	font-weight: 600;
-	font-size: 0.95rem;
+	font-weight: var(--rf-weight-semibold);
+	font-size: var(--rf-text);
 	transition: all 200ms ease;
 }
 .rf-hero li:first-child a {
@@ -181,40 +149,17 @@
 	margin-top: 3rem;
 	border-radius: var(--rf-radius-lg);
 }
-/* BUG-001 — hero DOM is content-first (headline before media: the right
- * reading order for the classic hero), inverting the shared media-first
- * stacked contract in layouts/split.css. Counter it so the labels are
- * truthful: `bottom` (the hero default) is plain block flow — media renders
- * after the content, exactly the historical look — and an explicit `top`
- * flips the visual order without touching the DOM. */
-.rf-hero[data-media-position="bottom"] {
-	display: block;
-}
-.rf-hero[data-media-position="top"] {
-	display: flex;
-	flex-direction: column-reverse;
-}
 .rf-hero[data-media-position="top"] > .rf-hero__media {
 	margin-top: 0;
 	margin-bottom: 3rem;
 }
-.rf-hero__media img {
-	display: block;
-	width: 100%;
-	height: auto;
-}
 .rf-hero__media pre {
 	margin: 0;
 }
 
-/* ── Cover mode (SPEC-101) — `media-position="cover"` ───────────────────
- * The shared cover layer (dimensions/cover.css) does the grid stacking, the
- * default scrim, and the overlay anchoring; these rules supply the hero-band
- * specifics. This file imports after cover.css, so equal-specificity rules
- * here win. */
-
-/* The section's generous padding moves to the overlaid content — on the root
- * it would inset the media well (the backdrop must be flush with the band). */
+/* ── Cover mode (SPEC-101) — skin (the height/containment authority is skeleton).
+ * The section's generous padding moves to the overlaid content — on the root it
+ * would inset the media well (the backdrop must be flush with the band). */
 .rf-hero--cover {
 	padding: 0;
 }
@@ -222,38 +167,6 @@
 	--rune-padding: 7rem 2rem 6.5rem;
 }
 
-/* Band height authority: a hero is a full-width band, not a portrait tile.
- * Height comes from a viewport-aware floor — deliberately NOT a default
- * aspect-ratio: with `aspect-ratio` + `min-height`, the ratio transfers a
- * winning min-height back into *width* on narrow screens (a 22rem-tall 21/9
- * band computes ~820px wide on a 375px phone — the band marches off-screen).
- * `--cover-aspect: auto` releases the shared 3/4 tile default; an explicit
- * `aspect` knob still lands as an inline style and owns the shape. */
-.rf-hero--cover {
-	--cover-aspect: auto;
-	min-height: clamp(22rem, 55vh, 40rem);
-}
-/* An explicit aspect owns the shape — drop the floor so the same
- * ratio-vs-min-height transfer can't reintroduce the overflow. */
-.rf-hero--cover[data-aspect] {
-	min-height: 0;
-}
-
-/* The shared cover layer applies `container-type: size` (size containment) for
- * its orientation query — under it the band cannot grow with its content, so
- * tall content clips at min-height. The hero band doesn't use the orientation
- * query (the centred-band default below covers `auto` placement), so release
- * the containment and let the band stretch to fit. */
-.rf-hero--cover[data-media-position="cover"][data-cover-scope="full"] {
-	container-type: normal;
-}
-
-/* Named height scale (`height="sm…xl"`): an explicit band height. */
-.rf-hero--cover[data-height="sm"] { min-height: 20rem; }
-.rf-hero--cover[data-height="md"] { min-height: 28rem; }
-.rf-hero--cover[data-height="lg"] { min-height: 36rem; }
-.rf-hero--cover[data-height="xl"] { min-height: 44rem; }
-
 /* Mobile: the desktop overlay padding (7rem bands) would eat most of the well
  * on a phone — tighten it so the content fits the band. */
 @media (max-width: 640px) {
@@ -274,19 +187,9 @@
 	color: var(--rf-color-on-accent, var(--rf-color-bg));
 }
 
-/* Centre-band default: a hero overlay reads as a centred band, not the
- * cover-card caption strip — seat it mid-well unless the author anchors it
- * with an explicit `content-place`. */
-.rf-hero--cover[data-media-position="cover"]:is([data-content-place="auto"], :not([data-content-place])) > [data-name="content"] {
-	align-self: center;
-	justify-self: stretch;
-}
-
 /* The default cover scrim is edge-weighted (a caption-strip treatment); under
  * the centred band it would leave the headline on undarkened media. With no
- * explicit `content-place`, darken the well evenly (slightly bottom-weighted).
- * An explicit `content-place` re-enters the shared content-edge scrim contract,
- * and `scrim="none"` still opts out. */
+ * explicit `content-place`, darken the well evenly (slightly bottom-weighted). */
 .rf-hero--cover:is([data-content-place="auto"], :not([data-content-place])):not([data-scrim="none"]) > [data-section="media"]::after {
 	background-image: var(--cover-scrim-image, linear-gradient(rgb(0 0 0 / 0.45), rgb(0 0 0 / 0.35) 50%, rgb(0 0 0 / 0.55)));
 }
@@ -294,23 +197,8 @@
 /* Mobile: stack actions full-width so the code block and button line up */
 @media (max-width: 640px) {
 	.rf-hero__actions {
-		flex-direction: column;
-		align-items: stretch;
 		max-width: none;
 	}
-	.rf-hero__actions pre {
-		width: 100%;
-		box-sizing: border-box;
-	}
-	.rf-hero ul,
-	.rf-hero nav {
-		flex-direction: column;
-		align-items: stretch;
-	}
-	.rf-hero li a,
-	.rf-hero nav a {
-		justify-content: center;
-		width: 100%;
-		box-sizing: border-box;
-	}
+}
+
 }

package/styles/runes/hint.css

@@ -1,59 +1,32 @@
-/* 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: 600;
+	font-weight: var(--rf-weight-semibold);
 	text-transform: capitalize;
-	font-size: 0.8rem;
-	letter-spacing: 0.03em;
+	font-size: var(--rf-text-xs);
+	letter-spacing: var(--rf-tracking-wide);
 }
 .rf-hint__body {
-	font-size: 0.925rem;
-	line-height: 1.65;
+	font-size: var(--rf-text-sm);
+	line-height: var(--rf-leading-relaxed);
 }
 .rf-hint__body p:last-child {
 	margin-bottom: 0;
@@ -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: 0.875rem;
+	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;
-	font-size: 0.85rem;
+	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 */
@@ -11,7 +12,7 @@
 }
 .rf-howto__content ul li {
 	padding: 0.2rem 0;
-	line-height: 1.6;
+	line-height: var(--rf-leading-relaxed);
 }
 .rf-howto__content ul li::marker {
 	color: var(--rf-color-primary);
@@ -21,31 +22,18 @@
 .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: 1.65;
+	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: 0.75rem;
-	font-weight: 700;
+	font-size: var(--rf-text-xs);
+	font-weight: var(--rf-weight-bold);
 	color: var(--rf-color-primary);
 	background: var(--rf-color-surface);
 	border-radius: var(--rf-radius-full);
@@ -63,31 +51,21 @@
 	border-radius: 0 var(--rf-radius-md) var(--rf-radius-md) 0;
 	padding: 0.75rem 1.25rem;
 	margin: 1.75rem 0 0;
-	font-size: 0.9125rem;
+	font-size: var(--rf-text-sm);
 	font-style: italic;
 	color: var(--rf-color-muted);
-	line-height: 1.6;
+	line-height: var(--rf-leading-relaxed);
 }
 .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;
@@ -14,25 +15,20 @@
 	margin-bottom: 0;
 }
 .rf-itinerary-day__header {
-	font-size: 1.15rem;
-	font-weight: 700;
+	font-size: var(--rf-text-lg);
+	font-weight: var(--rf-weight-bold);
 	color: var(--rf-color-text);
 	margin-bottom: 1rem;
 	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,27 +47,25 @@
 
 /* Stop time */
 .rf-itinerary-stop__time {
-	display: block;
-	font-size: 0.8rem;
-	font-weight: 600;
+	font-size: var(--rf-text-xs);
+	font-weight: var(--rf-weight-semibold);
 	color: var(--rf-color-primary);
-	letter-spacing: 0.02em;
+	letter-spacing: var(--rf-tracking-wide);
 	margin-bottom: 0.15rem;
 }
 
 /* Stop location */
 .rf-itinerary-stop__location {
-	display: block;
-	font-size: 1.05rem;
-	font-weight: 700;
+	font-size: var(--rf-text);
+	font-weight: var(--rf-weight-bold);
 	color: var(--rf-color-text);
 	margin-bottom: 0.35rem;
 }
 
 /* Stop body */
 .rf-itinerary-stop__body {
-	font-size: 0.925rem;
-	line-height: 1.65;
+	font-size: var(--rf-text-sm);
+	line-height: var(--rf-leading-relaxed);
 	color: var(--rf-color-muted);
 }
 .rf-itinerary-stop__body p:last-child {
@@ -87,11 +75,8 @@
 /* Duration badge */
 .rf-itinerary-stop[data-duration]::after {
 	content: attr(data-duration);
-	position: absolute;
-	top: 0.15rem;
-	right: 0;
-	font-size: 0.75rem;
-	font-weight: 500;
+	font-size: var(--rf-text-xs);
+	font-weight: var(--rf-weight-medium);
 	color: var(--rf-color-muted);
 	background: var(--rf-color-surface);
 	padding: 0.1rem 0.5rem;
@@ -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: 0.925rem;
+	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: ' — ';
 }
+
+}