@refrakt-md/skeleton 0.22.0

package/styles/runes/file-ref.css

@@ -0,0 +1,2 @@
+/* file-ref — structure. The inline wrapper display; the link treatment is skin. */
+.rf-file-ref { display: inline; }

package/styles/runes/form.css

@@ -0,0 +1,55 @@
+/* form — structure. The form/body flex columns, the meta + honeypot hide, the
+ * inline-variant flex + field sizing + submit align, the field flex, the control
+ * full-width box, the textarea min-height, the choice flex, and the submit
+ * self-align. Type, borders, backgrounds, padding, and focus chrome are skin. */
+.rf-form {
+	display: flex;
+	flex-direction: column;
+}
+.rf-form__body {
+	display: flex;
+	flex-direction: column;
+}
+.rf-form meta { display: none; }
+.rf-form__hp {
+	position: absolute;
+	left: -9999px;
+	opacity: 0;
+	height: 0;
+	overflow: hidden;
+}
+.rf-form--inline .rf-form__body {
+	flex-direction: row;
+	flex-wrap: wrap;
+	align-items: flex-end;
+}
+.rf-form--inline .rf-form-field {
+	flex: 1;
+	min-width: 10rem;
+}
+.rf-form--inline .rf-form__submit {
+	align-self: flex-end;
+}
+.rf-form-field {
+	display: flex;
+	flex-direction: column;
+}
+.rf-form-field input,
+.rf-form-field textarea,
+.rf-form-field select {
+	width: 100%;
+	box-sizing: border-box;
+}
+.rf-form-field textarea {
+	min-height: 6rem;
+}
+.rf-form-choice {
+	display: flex;
+	align-items: center;
+}
+.rf-form-choice input {
+	width: auto;
+}
+.rf-form__submit {
+	align-self: flex-start;
+}

package/styles/runes/gallery.css

@@ -0,0 +1,128 @@
+/* gallery — structure. The grid/carousel/masonry layouts, item positioning + media
+ * fill, the carousel/lightbox/nav positioning, and the responsive column counts.
+ * The thin-edge/gap vars, radii, scrim, and nav/lightbox chrome stay skin
+ * (Lumina's styles/runes/gallery.css). */
+
+.rf-gallery { position: relative; }
+.rf-gallery__items {
+	display: grid;
+	grid-template-columns: repeat(var(--gallery-columns, 3), 1fr);
+}
+.rf-gallery__item {
+	position: relative;
+	overflow: hidden;
+}
+.rf-gallery__item :is(img, .rf-placeholder) {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	display: block;
+}
+.rf-gallery__item figcaption {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	right: 0;
+}
+
+/* Carousel */
+.rf-gallery[data-layout="carousel"] .rf-gallery__items {
+	display: flex;
+	overflow-x: auto;
+	scroll-snap-type: x mandatory;
+	-webkit-overflow-scrolling: touch;
+}
+.rf-gallery[data-layout="carousel"] .rf-gallery__item {
+	flex: 0 0 calc(100% / var(--gallery-columns, 3));
+	scroll-snap-align: start;
+}
+
+/* Carousel nav buttons */
+.rf-gallery__nav {
+	position: absolute;
+	top: 50%;
+	transform: translateY(-50%);
+	z-index: 2;
+	width: 2.5rem;
+	height: 2.5rem;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+.rf-gallery__nav--prev {
+	left: calc(var(--rf-gallery-edge) + 0.5rem);
+}
+.rf-gallery__nav--next {
+	right: calc(var(--rf-gallery-edge) + 0.5rem);
+}
+
+/* Masonry */
+.rf-gallery[data-layout="masonry"] .rf-gallery__items {
+	display: block;
+	column-count: var(--gallery-columns, 3);
+}
+.rf-gallery[data-layout="masonry"] .rf-gallery__item {
+	break-inside: avoid;
+}
+.rf-gallery[data-layout="masonry"] .rf-gallery__item :is(img, .rf-placeholder) {
+	height: auto;
+}
+
+/* Lightbox */
+.rf-gallery__lightbox {
+	position: fixed;
+	inset: 0;
+	z-index: 9999;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+.rf-gallery__lightbox img {
+	max-width: 90vw;
+	max-height: 90vh;
+	object-fit: contain;
+}
+.rf-gallery__lightbox-close {
+	position: absolute;
+	top: 1rem;
+	right: 1rem;
+	width: 2.5rem;
+	height: 2.5rem;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+.rf-gallery__lightbox-nav {
+	position: absolute;
+	top: 50%;
+	transform: translateY(-50%);
+	width: 3rem;
+	height: 3rem;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+.rf-gallery__lightbox-nav--prev {
+	left: 1rem;
+}
+.rf-gallery__lightbox-nav--next {
+	right: 1rem;
+}
+
+/* Responsive column counts */
+@media (max-width: 768px) {
+	.rf-gallery {
+		--gallery-columns: 2 !important;
+	}
+	.rf-gallery[data-layout="carousel"] .rf-gallery__item {
+		flex-basis: 80%;
+	}
+}
+@media (max-width: 480px) {
+	.rf-gallery {
+		--gallery-columns: 1 !important;
+	}
+	.rf-gallery[data-layout="carousel"] .rf-gallery__item {
+		flex-basis: 100%;
+	}
+}

package/styles/runes/grid.css

@@ -0,0 +1,62 @@
+/* grid — structure. The whole grid system: the auto-fit track, explicit column
+ * counts, flow, spans, auto/masonry modes, aspect-ratio cells, stack order, and
+ * the collapse breakpoints. Only the gap and the cell prose margins are skin
+ * (Lumina's styles/runes/grid.css). */
+
+.rf-grid [data-layout="grid"] {
+	display: grid;
+	grid-template-columns: var(--grid-ratio, repeat(auto-fit, minmax(250px, 1fr)));
+	align-items: var(--grid-valign, stretch);
+}
+/* Explicit column counts override auto-fit */
+.rf-grid [data-columns="1"] { grid-template-columns: 1fr; }
+.rf-grid [data-columns="2"] { grid-template-columns: repeat(2, 1fr); }
+.rf-grid [data-columns="3"] { grid-template-columns: repeat(3, 1fr); }
+.rf-grid [data-columns="4"] { grid-template-columns: repeat(4, 1fr); }
+.rf-grid [data-columns="5"] { grid-template-columns: repeat(5, 1fr); }
+.rf-grid [data-columns="6"] { grid-template-columns: repeat(6, 1fr); }
+/* Flow */
+.rf-grid [data-flow="column"] { grid-auto-flow: column; }
+.rf-grid [data-flow="dense"] { grid-auto-flow: dense; }
+.rf-grid [data-flow="row dense"] { grid-auto-flow: row dense; }
+.rf-grid [data-flow="column dense"] { grid-auto-flow: column dense; }
+/* Spans */
+.rf-grid [data-colspan="2"] { grid-column: span 2; }
+.rf-grid [data-colspan="3"] { grid-column: span 3; }
+.rf-grid [data-colspan="4"] { grid-column: span 4; }
+.rf-grid [data-rowspan="2"] { grid-row: span 2; }
+.rf-grid [data-rowspan="3"] { grid-row: span 3; }
+.rf-grid [data-rowspan="4"] { grid-row: span 4; }
+/* Auto mode — responsive auto-fill */
+.rf-grid[data-mode="auto"] [data-layout="grid"] {
+	grid-template-columns: repeat(auto-fill, minmax(var(--grid-min, 250px), 1fr));
+}
+/* Masonry mode — progressive enhancement */
+.rf-grid[data-mode="masonry"] [data-layout="grid"] {
+	grid-template-rows: masonry;
+}
+/* Aspect ratio enforcement on cells */
+.rf-grid[data-aspect] [data-name="cell"] {
+	aspect-ratio: var(--grid-aspect);
+	overflow: hidden;
+}
+.rf-grid[data-aspect] [data-name="cell"] > img,
+.rf-grid[data-aspect] [data-name="cell"] > video {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+/* Stack order when collapsed */
+.rf-grid[data-stack="reverse"] [data-name="cell"]:last-child {
+	order: -1;
+}
+/* Collapse breakpoints */
+@media (max-width: 640px) {
+	.rf-grid[data-collapse="sm"] [data-layout="grid"] { grid-template-columns: 1fr; }
+}
+@media (max-width: 768px) {
+	.rf-grid[data-collapse="md"] [data-layout="grid"] { grid-template-columns: 1fr; }
+}
+@media (max-width: 1024px) {
+	.rf-grid[data-collapse="lg"] [data-layout="grid"] { grid-template-columns: 1fr; }
+}

package/styles/runes/hero.css

@@ -0,0 +1,130 @@
+/* hero — structure. The relative root (scrim/overlay anchor), the preamble +
+ * eyebrow stretched-link, the actions/button flex rows and their alignment via
+ * auto-margins + the mobile stack, the media-position flip, the responsive image
+ * box, and the cover-band height/containment authority (which wins over the
+ * shared cover layer by specificity). All spacing, type, the headline gradient,
+ * surface chrome, scrim, radii, and text-align stay skin (Lumina's
+ * styles/runes/hero.css). */
+
+.rf-hero { position: relative; }
+
+.rf-hero__preamble {
+	flex-direction: column;
+	align-items: center;
+}
+
+/* Linked eyebrow → pill with a stretched link (chrome is skin). */
+.rf-hero .rf-hero__eyebrow:has(a) {
+	display: inline-block;
+	position: relative;
+}
+.rf-hero .rf-hero__eyebrow:has(a) a::before {
+	content: '';
+	position: absolute;
+	inset: 0;
+}
+
+.rf-hero__actions {
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	margin: 0 auto;
+}
+
+/* Alignment — auto-margins + flex alignment position the preamble/actions. */
+.rf-hero[data-align="center"] .rf-hero__actions {
+	margin: 0 auto;
+	justify-content: center;
+}
+.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 {
+	align-items: flex-end;
+}
+.rf-hero[data-align="right"] .rf-hero__actions {
+	margin: 0 0 0 auto;
+}
+.rf-hero[data-align="center"] > p,
+.rf-hero[data-align="center"] .rf-hero__blurb {
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.rf-hero ul,
+.rf-hero nav {
+	display: flex;
+	flex-wrap: wrap;
+	list-style: none;
+}
+.rf-hero[data-align="center"] ul,
+.rf-hero[data-align="center"] nav {
+	justify-content: center;
+}
+.rf-hero li a,
+.rf-hero nav a {
+	display: inline-flex;
+	align-items: center;
+}
+
+/* BUG-001 — content-first DOM inverts the shared media-first stacked contract. */
+.rf-hero[data-media-position="bottom"] {
+	display: block;
+}
+.rf-hero[data-media-position="top"] {
+	display: flex;
+	flex-direction: column-reverse;
+}
+.rf-hero__media img {
+	display: block;
+	width: 100%;
+	height: auto;
+}
+
+/* ── Cover mode (SPEC-101) — band height + containment authority. These win over
+ * the shared cover layer (dimensions/cover.css) by selector specificity. ── */
+.rf-hero--cover {
+	--cover-aspect: auto;
+	min-height: clamp(22rem, 55vh, 40rem);
+}
+.rf-hero--cover[data-aspect] {
+	min-height: 0;
+}
+.rf-hero--cover[data-media-position="cover"][data-cover-scope="full"] {
+	container-type: normal;
+}
+.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; }
+/* Centre-band default: seat the overlay mid-well unless anchored. */
+.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;
+}
+
+/* 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;
+	}
+	.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

@@ -0,0 +1,28 @@
+/* hint — structure. The header's icon+label inline-flex row, the icon display, and
+ * the glyph-mask box mechanism (the mask box + which registry glyph fills it). The
+ * header→body margin, the body reset, surface, colours, gaps, and type stay skin
+ * (Lumina's styles/runes/hint.css) — the header margin overrides sections.css
+ * `[data-section="header"]` (skin) by source order. The glyph *shapes* come from
+ * the icon registry as --rf-icon-hint-* mask custom properties (WORK-437). */
+
+/* The lone hintType field renders icon + label in one inline-flex span (the gap
+ * is skin). */
+.rf-hint__header > span {
+	display: inline-flex;
+	align-items: center;
+}
+.rf-hint__header [data-icon-group="hint"] { display: block; }
+.rf-hint__header [data-icon-group="hint"]::before {
+	content: '';
+	display: block;
+	width: 1.25rem;
+	height: 1.25rem;
+	-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: var(--rf-icon-hint-note); mask-image: var(--rf-icon-hint-note); }
+[data-icon-group="hint"][data-icon="warning"]::before { -webkit-mask-image: var(--rf-icon-hint-warning); mask-image: var(--rf-icon-hint-warning); }
+[data-icon-group="hint"][data-icon="caution"]::before { -webkit-mask-image: var(--rf-icon-hint-caution); mask-image: var(--rf-icon-hint-caution); }
+[data-icon-group="hint"][data-icon="check"]::before { -webkit-mask-image: var(--rf-icon-hint-check); mask-image: var(--rf-icon-hint-check); }

package/styles/runes/howto.css

@@ -0,0 +1,35 @@
+/* howto — structure. The steps list reset + counter, the step item counter +
+ * positioning, the step-number box placement/centring, and the metadata dense-tile
+ * grid (+ mobile). The surfaced tools list chrome, the step-number glyph + chrome,
+ * tip callouts, and type/spacing stay skin. */
+.rf-howto__content ol {
+	list-style: none;
+	counter-reset: howto-step;
+}
+.rf-howto__content ol > li {
+	counter-increment: howto-step;
+	position: relative;
+}
+.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;
+}
+.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));
+		align-items: normal;
+	}
+	.rf-howto__metadata > [data-name="row"] {
+		display: flex;
+	}
+}

package/styles/runes/itinerary.css

@@ -0,0 +1,41 @@
+/* itinerary — structure. The empty-day-header hide, the stops list reset, stop
+ * positioning + marker box placement (vertical + horizontal), the time/location
+ * block display, the duration-badge placement, the horizontal flex-scroll + stop
+ * min-width, and the compact display toggles. Connector borders, marker chrome,
+ * the duration text, type, and spacing are skin. */
+.rf-itinerary-day__header:empty { display: none; }
+.rf-itinerary-day ol { list-style: none; }
+.rf-itinerary-stop { position: relative; }
+.rf-itinerary-stop::before {
+	content: '';
+	position: absolute;
+	left: -0.4375rem;
+	top: 0.25rem;
+	width: 0.75rem;
+	height: 0.75rem;
+}
+.rf-itinerary-stop__time { display: block; }
+.rf-itinerary-stop__location { display: block; }
+.rf-itinerary-stop[data-duration]::after {
+	position: absolute;
+	top: 0.15rem;
+	right: 0;
+}
+.rf-itinerary--horizontal .rf-itinerary-day ol {
+	display: flex;
+	overflow-x: auto;
+}
+.rf-itinerary--horizontal .rf-itinerary-stop {
+	min-width: 14rem;
+}
+.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;
+}
+.rf-itinerary--compact .rf-itinerary-stop__body { display: none; }
+.rf-itinerary--compact .rf-itinerary-stop__location { display: inline; }
+.rf-itinerary--compact .rf-itinerary-stop__time { display: inline; }

package/styles/runes/juxtapose.css

@@ -0,0 +1,61 @@
+/* juxtapose — structure. The panel clip + relative positioning, the panel-label
+ * absolute placement, the media fill, the slider divider + handle positioning, the
+ * toggle-bar flex, and the meta/label hides. Radii, surface, chrome, glyphs, and
+ * the toggle-button styling stay skin (Lumina's styles/runes/juxtapose.css). */
+
+.rf-juxtapose__panels { overflow: hidden; }
+.rf-juxtapose-panel {
+	position: relative;
+	overflow: hidden;
+}
+.rf-juxtapose-panel__name {
+	position: absolute;
+	bottom: 0.5rem;
+	pointer-events: none;
+}
+.rf-juxtapose-panel:first-child .rf-juxtapose-panel__name { left: 0.5rem; }
+.rf-juxtapose-panel:last-child .rf-juxtapose-panel__name { right: 0.5rem; }
+.rf-juxtapose-panel__body :is(img, .rf-placeholder) {
+	display: block;
+	width: 100%;
+	height: auto;
+	object-fit: cover;
+}
+.rf-juxtapose-panel > meta { display: none; }
+.rf-juxtapose--toggle .rf-juxtapose-panel__name { display: none; }
+
+/* Slider divider (injected by behavior) */
+.rf-juxtapose__divider {
+	position: absolute;
+	z-index: 10;
+	touch-action: none;
+}
+.rf-juxtapose:not([data-orientation="horizontal"]) .rf-juxtapose__divider {
+	top: 0;
+	bottom: 0;
+	width: 3px;
+	transform: translateX(-50%);
+}
+.rf-juxtapose[data-orientation="horizontal"] .rf-juxtapose__divider {
+	left: 0;
+	right: 0;
+	height: 3px;
+	transform: translateY(-50%);
+}
+.rf-juxtapose__divider-handle {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	width: 2.5rem;
+	height: 2.5rem;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+/* Toggle bar (injected by behavior) */
+.rf-juxtapose__toggle-bar {
+	display: flex;
+	width: fit-content;
+}

package/styles/runes/lore.css

@@ -0,0 +1,12 @@
+/* lore — structure. The relative root (spoiler-overlay anchor), the title block,
+ * and the spoiler-overlay positioning. The blur effect, overlay chrome, glyph, and
+ * type stay skin. */
+.rf-lore { position: relative; }
+.rf-lore > span[property="title"] { display: block; }
+.rf-lore--spoiler::after {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	z-index: 1;
+}

package/styles/runes/map.css

@@ -0,0 +1,45 @@
+/* map — structure. The wrapper clip, the per-size container heights, the container
+ * box (width/positioning/isolation stacking context), the fallback list reset, the
+ * sr-only pins list, the pin-group inline box, metadata hide, the media-guest fill,
+ * and the popup-title block. Margins, radii, surface, fallback type, and the
+ * Leaflet popup chrome are skin. */
+.rf-map { overflow: hidden; }
+.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;
+	isolation: isolate;
+}
+.rf-map__fallback {
+	list-style: decimal inside;
+}
+.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;
+}
+.rf-map-pin__group {
+	display: inline-block;
+}
+.rf-map meta,
+.rf-map span[property] {
+	display: none;
+}
+[data-section="media"] > .rf-map {
+	height: 100%;
+}
+[data-section="media"] > .rf-map > .rf-map__container {
+	height: 100%;
+}
+.rf-map .leaflet-popup-content strong {
+	display: block;
+}

package/styles/runes/mediatext.css

@@ -0,0 +1,37 @@
+/* mediatext — structure. The grid layout + ratios, the right-order swap, the media
+ * image box, the wrap-mode media widths + floats + clearfix (and the responsive
+ * collapse). Gaps, radii, and body margins are skin. */
+.rf-mediatext:not([data-wrap="true"]) {
+	display: grid;
+	align-items: start;
+}
+.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; }
+.rf-mediatext--right:not([data-wrap="true"]) .rf-mediatext__media { order: 1; }
+.rf-mediatext__media :is(img, .rf-placeholder) {
+	max-width: 100%;
+	height: auto;
+}
+.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; }
+.rf-mediatext--right[data-wrap="true"] .rf-mediatext__media { float: right; }
+.rf-mediatext[data-wrap="true"]::after {
+	content: '';
+	display: table;
+	clear: both;
+}
+@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%;
+	}
+}

package/styles/runes/milestone.css

@@ -0,0 +1,31 @@
+/* milestone — structure. The backlog tab strip (scrollable flex) + tab flex, and
+ * the aggregate-progress flex + bar box + fill. The eyebrow/title/metadata/body
+ * spacing, tab chrome, and bar colours are skin. */
+.rf-milestone__tabs {
+	display: flex;
+	overflow-x: auto;
+	overflow-y: hidden;
+	-webkit-overflow-scrolling: touch;
+}
+.rf-milestone__tab {
+	flex: 0 0 auto;
+}
+.rf-milestone__progress {
+	display: flex;
+	flex-direction: column;
+}
+.rf-milestone__progress-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: baseline;
+}
+.rf-milestone__progress-bar {
+	height: 0.375rem;
+	overflow: hidden;
+}
+.rf-milestone__progress-bar::after {
+	content: '';
+	display: block;
+	height: 100%;
+	width: var(--rf-progress, 0%);
+}