@refrakt-md/skeleton 0.22.0

package/styles/runes/pricing.css

@@ -0,0 +1,40 @@
+/* pricing — structure. The tiers grid, the tier flex-column (so CTAs drop to a
+ * common baseline via margin-top:auto), the preamble/eyebrow layout +
+ * stretched-link, and list resets. All spacing, type, surface chrome, colour, and
+ * shadow stay skin (Lumina's styles/runes/pricing.css). */
+
+.rf-pricing > header,
+.rf-pricing__preamble {
+	flex-direction: column;
+	align-items: flex-start;
+}
+
+/* Linked eyebrow → pill with a stretched link (chrome is skin). */
+.rf-pricing__eyebrow:has(a) {
+	display: inline-block;
+	position: relative;
+}
+.rf-pricing__eyebrow:has(a) a::before {
+	content: '';
+	position: absolute;
+	inset: 0;
+}
+
+.rf-pricing__tiers,
+.rf-pricing > ul[data-layout="grid"] {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+	list-style: none;
+}
+
+.rf-tier {
+	display: flex;
+	flex-direction: column;
+}
+
+.rf-tier__body { flex: 1; }
+.rf-tier__body ul { list-style: none; }
+.rf-tier__body a {
+	display: block;
+	margin-top: auto;
+}

package/styles/runes/progress.css

@@ -0,0 +1,22 @@
+/* progress — structure. The label/value flex row (+ value auto-push), the track
+ * box (full-row basis + fixed height + clip), and the fill box. Colours, radii,
+ * type, gaps, and the fill transition are skin (Lumina's styles/runes/progress.css). */
+
+.rf-progress {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: baseline;
+}
+.rf-progress__value {
+	margin-left: auto;
+}
+.rf-progress__track {
+	flex-basis: 100%;
+	height: 0.5rem;
+	overflow: hidden;
+}
+.rf-progress__fill {
+	display: block;
+	height: 100%;
+	width: var(--rf-progress, 0%);
+}

package/styles/runes/pullquote.css

@@ -0,0 +1,39 @@
+/* pullquote — structure. The relative root (glyph anchor), the decorative-glyph
+ * positioning + the per-variant glyph hides + centred glyph re-centre, the
+ * centre/right auto-margins, and the float modes (+ responsive). The quote glyph,
+ * type, borders, backgrounds, and the inner-blockquote reset are skin. */
+.rf-pullquote { position: relative; }
+.rf-pullquote::before {
+	position: absolute;
+	top: -0.25rem;
+	left: 0;
+}
+.rf-pullquote--center {
+	margin-left: auto;
+	margin-right: auto;
+}
+.rf-pullquote--center::before {
+	left: 50%;
+	transform: translateX(-50%);
+}
+.rf-pullquote--left::before { display: none; }
+.rf-pullquote--right {
+	margin-left: auto;
+}
+.rf-pullquote--right::before { display: none; }
+.rf-pullquote[data-align="left"] {
+	float: left;
+	width: 40%;
+}
+.rf-pullquote[data-align="right"] {
+	float: right;
+	width: 40%;
+}
+.rf-pullquote--editorial::before { display: none; }
+@media (max-width: 768px) {
+	.rf-pullquote[data-align="left"],
+	.rf-pullquote[data-align="right"] {
+		float: none;
+		width: 100%;
+	}
+}

package/styles/runes/realm.css

@@ -0,0 +1,14 @@
+/* realm — structure. The stacked-top flex flip, the sections flex column, and the
+ * section-name block. The thin-edge inset padding + split gaps (which compete with
+ * the surface/split layers, like card) plus all chrome stay skin. */
+.rf-realm[data-media-position="top"] {
+	display: flex;
+	flex-direction: column;
+}
+.rf-realm__sections {
+	display: flex;
+	flex-direction: column;
+}
+.rf-realm-section__name {
+	display: block;
+}

package/styles/runes/recipe.css

@@ -0,0 +1,40 @@
+/* recipe — structure. The content flex column, the steps list reset + counter, the
+ * step item counter + positioning, the step-number box placement/centring, and the
+ * metadata dense-tile grid (+ mobile). The thin-edge inset padding + split gaps,
+ * the ingredients list chrome, the step-number glyph + chrome, tip callouts, media
+ * radius, and type stay skin. */
+.rf-recipe__content {
+	display: flex;
+	flex-direction: column;
+}
+.rf-recipe__content ol {
+	list-style: none;
+	counter-reset: recipe-step;
+}
+.rf-recipe__content ol > li {
+	counter-increment: recipe-step;
+	position: relative;
+}
+.rf-recipe__content ol > li::before {
+	content: counter(recipe-step);
+	position: absolute;
+	left: 0;
+	top: 0.625rem;
+	width: 1.5rem;
+	height: 1.5rem;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+.rf-recipe__metadata {
+	grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
+}
+@media (max-width: 48rem) {
+	.rf-recipe__metadata {
+		grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
+		align-items: normal;
+	}
+	.rf-recipe__metadata > [data-name="row"] {
+		display: flex;
+	}
+}

package/styles/runes/relationships.css

@@ -0,0 +1,49 @@
+/* relationships — structure (mirrors collection). The items flex/grid arrangement,
+ * grid item flex + grouped-grid passthrough + grid group/title span, the base group
+ * flex, the item flex/block reset, and the card flex column. Gaps, margins, card
+ * chrome, and type are skin. */
+.rf-relationships__items {
+	display: flex;
+	flex-direction: column;
+}
+.rf-relationships[data-layout='grid'] .rf-relationships__items {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+	align-items: stretch;
+}
+.rf-relationships[data-layout='grid'] .rf-relationships__item {
+	display: flex;
+}
+.rf-relationships[data-layout='grid'] .rf-relationships__item > * {
+	flex: 1;
+	min-width: 0;
+}
+.rf-relationships[data-layout='grid'] .rf-relationships__items:has(.rf-relationships__group),
+.rf-relationships[data-layout='grid'] .rf-relationships__items:has(.rf-accordion) {
+	display: flex;
+	flex-direction: column;
+}
+.rf-relationships[data-layout='grid'] .rf-relationships__group {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+	align-items: stretch;
+}
+.rf-relationships[data-layout='grid'] .rf-relationships__group-title {
+	grid-column: 1 / -1;
+}
+.rf-relationships__group {
+	display: flex;
+	flex-direction: column;
+}
+.rf-relationships__item {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: baseline;
+}
+.rf-relationships__item[data-block] {
+	display: block;
+}
+.rf-relationships__card {
+	display: flex;
+	flex-direction: column;
+}

package/styles/runes/reveal.css

@@ -0,0 +1,29 @@
+/* reveal — structure. The eyebrow stretched-link, the steps flex column, the
+ * hidden-step collapse (height/overflow), the metadata hide, and the control
+ * button flex. The animation (opacity/transform/transition), spacing, type,
+ * borders, and surface chrome are skin (Lumina's styles/runes/reveal.css). */
+
+.rf-reveal__eyebrow:has(a) {
+	display: inline-block;
+	position: relative;
+}
+.rf-reveal__eyebrow:has(a) a::before {
+	content: '';
+	position: absolute;
+	inset: 0;
+}
+.rf-reveal__steps {
+	display: flex;
+	flex-direction: column;
+}
+.rf-reveal-step--hidden {
+	height: 0;
+	overflow: hidden;
+}
+.rf-reveal-step__body > span[property],
+.rf-reveal-step__body > meta { display: none; }
+.rf-reveal__next,
+.rf-reveal__reset {
+	display: inline-flex;
+	align-items: center;
+}

package/styles/runes/sandbox.css

@@ -0,0 +1,30 @@
+/* sandbox — structure. The iframe clip + fill, and the banner / poster / activate
+ * layout (positioning, flex, sizing). Radii, surface, borders, type, and the play
+ * glyph stay skin (Lumina's styles/runes/sandbox.css). */
+
+.rf-sandbox { overflow: hidden; }
+.rf-sandbox iframe {
+	display: block;
+	width: 100%;
+}
+.rf-sandbox__untrusted-banner { display: block; }
+.rf-sandbox__poster {
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	min-height: 150px;
+}
+.rf-sandbox__poster-image {
+	position: absolute;
+	inset: 0;
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+.rf-sandbox__activate {
+	position: relative;
+	z-index: 1;
+	display: inline-flex;
+	align-items: center;
+}

package/styles/runes/section.css

@@ -0,0 +1,36 @@
+/* section — structure. The column stack, the preamble flex + eyebrow stretched-
+ * link, the responsive image box, the full-width body, and the header alignment
+ * (align-items + auto-margins). Type, gaps, max-width, radii, and text-align are
+ * skin. */
+.rf-section {
+	display: flex;
+	flex-direction: column;
+}
+.rf-section__preamble {
+	display: flex;
+	flex-direction: column;
+}
+.rf-section__eyebrow:has(a) {
+	display: inline-block;
+	position: relative;
+}
+.rf-section__eyebrow:has(a) a::before {
+	content: '';
+	position: absolute;
+	inset: 0;
+}
+.rf-section__image {
+	max-width: 100%;
+	height: auto;
+}
+.rf-section__body {
+	width: 100%;
+}
+.rf-section[data-align="center"] .rf-section__preamble {
+	align-items: center;
+	margin-inline: auto;
+}
+.rf-section[data-align="end"] .rf-section__preamble {
+	align-items: flex-end;
+	margin-inline-start: auto;
+}

package/styles/runes/showcase.css

@@ -0,0 +1,12 @@
+/* showcase — structure. The relative root + viewport (frame anchors), the breakout
+ * overflow on a non-clipping host, and the bento-cell fill. The spacing/inset axes
+ * (margins/padding values) and the mobile bleed reset are skin. */
+.rf-showcase { position: relative; }
+.rf-showcase__viewport { position: relative; }
+:has(> .rf-showcase[data-displace]:not(.rf-showcase--in-bento-cell)) {
+	overflow: visible;
+}
+.rf-showcase--in-bento-cell {
+	flex: 1;
+	min-height: 0;
+}

package/styles/runes/spacing.css

@@ -0,0 +1,45 @@
+/* spacing — structure. The scale flex column + item flex, the scale-bar sizing, the
+ * scale-label flex-shrink, the radii/shadows flex-wrap rows + item columns, and the
+ * radius/shadow sample sizing. Colours, radii, borders, gaps, and type are skin. */
+.rf-spacing__scale {
+	display: flex;
+	flex-direction: column;
+}
+.rf-spacing__scale-item {
+	display: flex;
+	align-items: center;
+}
+.rf-spacing__scale-bar {
+	height: 1.25rem;
+	min-width: 4px;
+}
+.rf-spacing__scale-label {
+	flex-shrink: 0;
+}
+.rf-spacing__radii {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: flex-end;
+}
+.rf-spacing__radius-item {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+.rf-spacing__radius-sample {
+	width: 3.5rem;
+	height: 3.5rem;
+}
+.rf-spacing__shadows {
+	display: flex;
+	flex-wrap: wrap;
+}
+.rf-spacing__shadow-item {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+.rf-spacing__shadow-sample {
+	width: 5rem;
+	height: 3.5rem;
+}

package/styles/runes/steps.css

@@ -0,0 +1,65 @@
+/* steps — structure. The step counter mechanism, the step item positioning, the
+ * counter-badge box placement, the preamble/eyebrow layout + stretched-link, list
+ * resets, and the media-position flip. All spacing, type, surface, and the badge
+ * chrome stay skin (Lumina's styles/runes/steps.css). */
+
+.rf-steps { counter-reset: step; }
+
+.rf-steps__preamble {
+	flex-direction: column;
+	align-items: flex-start;
+}
+
+/* Linked eyebrow → pill with a stretched link (chrome is skin). */
+.rf-steps__eyebrow:has(a) {
+	display: inline-block;
+	position: relative;
+}
+.rf-steps__eyebrow:has(a) a::before {
+	content: '';
+	position: absolute;
+	inset: 0;
+}
+
+.rf-steps ol { list-style: none; }
+
+.rf-step__content { display: contents; }
+
+.rf-step {
+	counter-increment: step;
+	position: relative;
+}
+
+.rf-step::before {
+	content: counter(step);
+	position: absolute;
+	left: 0;
+	top: 0.625rem;
+	width: 1.5rem;
+	height: 1.5rem;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.rf-step h1,
+.rf-step h2,
+.rf-step h3,
+.rf-step h4,
+.rf-step h5,
+.rf-step h6,
+.rf-step strong {
+	display: block;
+}
+
+.rf-step__media { overflow: hidden; }
+
+/* BUG-001 — content-first DOM inverts the shared media-first stacked contract
+ * (layouts/split.css): counter it so the labels are truthful. */
+.rf-step[data-media-position="bottom"] {
+	display: block;
+}
+.rf-step[data-media-position="top"] {
+	display: flex;
+	flex-direction: column-reverse;
+}

package/styles/runes/storyboard.css

@@ -0,0 +1,22 @@
+/* storyboard — structure. The panels grid (+ responsive column counts), the
+ * panel clip for the clean/comic styles, the panel image fill, and the metadata
+ * hide. Borders, radii, the comic tilt, polaroid chrome, type, and gaps are skin. */
+.rf-storyboard__panels {
+	display: grid;
+	grid-template-columns: repeat(var(--sb-columns, 3), 1fr);
+}
+.rf-storyboard--clean .rf-storyboard-panel { overflow: hidden; }
+.rf-storyboard--comic .rf-storyboard-panel { overflow: hidden; }
+.rf-storyboard-panel img {
+	width: 100%;
+	height: auto;
+	display: block;
+}
+.rf-storyboard-panel__body > span[property],
+.rf-storyboard-panel__body > meta { display: none; }
+@media (max-width: 768px) {
+	.rf-storyboard__panels { grid-template-columns: repeat(2, 1fr) !important; }
+}
+@media (max-width: 480px) {
+	.rf-storyboard__panels { grid-template-columns: 1fr !important; }
+}

package/styles/runes/swatch.css

@@ -0,0 +1,12 @@
+/* swatch — structure. The inline-flex chip row and the colour-chip box. Borders,
+ * radii, gap, padding, and type are skin. */
+.rf-swatch {
+	display: inline-flex;
+	align-items: center;
+}
+.rf-swatch__chip {
+	display: inline-block;
+	width: 0.875em;
+	height: 0.875em;
+	flex-shrink: 0;
+}

package/styles/runes/symbol.css

@@ -0,0 +1,8 @@
+/* symbol — structure. Only the list display resets on the symbol-body and member
+ * lists. The signature-bar geometry comes from the shared [data-zone-layout="bar"]
+ * (already skeleton); everything else here — bar padding, doc-prose spacing,
+ * borders, type, the blockquote reset — is skin (Lumina's styles/runes/symbol.css). */
+
+.rf-symbol__body > div > ul { list-style: none; }
+.rf-symbol__body > div > ul > li > ul { list-style: none; }
+.rf-symbol-member ul { list-style: none; }

package/styles/runes/tabs.css

@@ -0,0 +1,28 @@
+/* tabs — structure. The eyebrow stretched-link, the scrollable tab strip (display
+ * + overflow), and the tab-button flex. The strip's `display: flex` is what
+ * guest-posture's hide rule overrides — now both skeleton, resolved by specificity.
+ * Type, colour, borders, spacing, and the active treatment are skin (Lumina's
+ * styles/runes/tabs.css). */
+
+.rf-tabs__eyebrow:has(a) {
+	display: inline-block;
+	position: relative;
+}
+.rf-tabs__eyebrow:has(a) a::before {
+	content: '';
+	position: absolute;
+	inset: 0;
+}
+
+/* Tab bar — the scrollable strip. */
+.rf-tabs__tabs {
+	display: flex;
+	overflow-x: auto;
+	overflow-y: hidden;
+	-webkit-overflow-scrolling: touch;
+}
+
+/* Tab buttons — fixed-basis flex items. */
+.rf-tab {
+	flex: 0 0 auto;
+}

package/styles/runes/testimonial.css

@@ -0,0 +1,13 @@
+/* testimonial — structure. The author name/role block display and the fixed
+ * avatar box (size + crop). Surface, type, the quote treatment, the blockquote
+ * `::before` reset, and the avatar radius/margin stay skin (Lumina's
+ * styles/runes/testimonial.css) — the `blockquote::before { display:none }` reset
+ * must stay skin to override elements/blockquote.css by source order. */
+
+.rf-testimonial__author-name { display: block; }
+.rf-testimonial__author-role { display: block; }
+.rf-testimonial :is(img, .rf-placeholder) {
+	width: 48px;
+	height: 48px;
+	object-fit: cover;
+}

package/styles/runes/textblock.css

@@ -0,0 +1,25 @@
+/* textblock — structure. The body block, the drop-cap float, and the multi-column
+ * counts (+ responsive). The drop-cap/lead type, column gap/rule, and text-align
+ * are skin. */
+.rf-textblock__body {
+	display: block;
+}
+.rf-textblock--dropcap .rf-textblock__body > p:first-child::first-letter {
+	float: left;
+}
+.rf-textblock[data-columns="2"] .rf-textblock__body { column-count: 2; }
+.rf-textblock[data-columns="3"] .rf-textblock__body { column-count: 3; }
+.rf-textblock[data-columns="4"] .rf-textblock__body { column-count: 4; }
+@media (max-width: 768px) {
+	.rf-textblock[data-columns="3"] .rf-textblock__body,
+	.rf-textblock[data-columns="4"] .rf-textblock__body {
+		column-count: 2;
+	}
+}
+@media (max-width: 480px) {
+	.rf-textblock[data-columns="2"] .rf-textblock__body,
+	.rf-textblock[data-columns="3"] .rf-textblock__body,
+	.rf-textblock[data-columns="4"] .rf-textblock__body {
+		column-count: 1;
+	}
+}

package/styles/runes/timeline.css

@@ -0,0 +1,31 @@
+/* timeline — structure. The list reset, entry positioning, date/title block
+ * display, the marker box placement (vertical + horizontal), the horizontal flex
+ * scroll, and the horizontal entry min-width. Connector borders, marker chrome,
+ * type, and spacing are skin. */
+.rf-timeline ol { list-style: none; }
+.rf-timeline-entry { position: relative; }
+.rf-timeline-entry > time { display: block; }
+.rf-timeline-entry > span { display: block; }
+.rf-timeline--vertical .rf-timeline-entry::before {
+	content: '';
+	position: absolute;
+	left: -0.4375rem;
+	top: 0.25rem;
+	width: 0.75rem;
+	height: 0.75rem;
+}
+.rf-timeline--horizontal ol {
+	display: flex;
+	overflow-x: auto;
+}
+.rf-timeline--horizontal .rf-timeline-entry {
+	min-width: 12rem;
+}
+.rf-timeline--horizontal .rf-timeline-entry::before {
+	content: '';
+	position: absolute;
+	top: -0.4375rem;
+	left: 0.5rem;
+	width: 0.75rem;
+	height: 0.75rem;
+}

package/styles/runes/toc.css

@@ -0,0 +1,10 @@
+/* toc — structure. The list reset and the inline-block link box. The surface
+ * chrome, type, indents, and colour are skin (Lumina's styles/runes/toc.css). */
+
+.rf-toc ul,
+.rf-toc ol {
+	list-style: none;
+}
+.rf-toc a {
+	display: inline-block;
+}

package/styles/runes/track.css

@@ -0,0 +1,55 @@
+/* track — structure. The row flex + counter, the number box, the cell flex sizing
+ * + ellipsis overflow + duration auto-push, the description/cue full-row + wrap,
+ * the chapter row flex + time auto-push, and the narrow-screen hides. The
+ * number/separator glyphs, type, borders, and spacing stay skin. */
+.rf-track {
+	display: flex;
+	align-items: center;
+	counter-increment: track;
+}
+.rf-track::before {
+	content: counter(track);
+	min-width: 1.5rem;
+	flex-shrink: 0;
+}
+.rf-track__track-name {
+	flex: 1;
+	min-width: 0;
+	overflow: hidden;
+}
+.rf-track__track-artist {
+	flex-shrink: 0;
+}
+.rf-track__track-duration {
+	flex-shrink: 0;
+	margin-left: auto;
+	min-width: 3rem;
+}
+.rf-track__track-meta {
+	flex-shrink: 0;
+}
+.rf-track__track-description {
+	flex-basis: 100%;
+}
+.rf-track:has(.rf-track__track-description) {
+	flex-wrap: wrap;
+}
+.rf-track [data-name="lyrics"],
+.rf-track [data-name="chapters"] {
+	flex-basis: 100%;
+	list-style: none;
+}
+.rf-track [data-name="chapters"] li {
+	display: flex;
+}
+.rf-track [data-name="chapter-time"] {
+	margin-left: auto;
+}
+@media (max-width: 480px) {
+	.rf-track__track-artist {
+		display: none;
+	}
+	.rf-track__track-meta {
+		display: none;
+	}
+}

package/styles/runes/typography.css

@@ -0,0 +1,33 @@
+/* typography — structure. The specimens flex column, the specimen-header flex, the
+ * sizes flex column, the size-sample flex + ellipsis clip, the size-label sizing,
+ * the weights flex-wrap, and the weight-sample flex column. Borders, radii,
+ * padding, and type are skin. */
+.rf-typography__specimens {
+	display: flex;
+	flex-direction: column;
+}
+.rf-typography__specimen-header {
+	display: flex;
+	align-items: baseline;
+}
+.rf-typography__sizes {
+	display: flex;
+	flex-direction: column;
+}
+.rf-typography__size-sample {
+	display: flex;
+	align-items: baseline;
+	overflow: hidden;
+}
+.rf-typography__size-label {
+	flex-shrink: 0;
+	min-width: 3rem;
+}
+.rf-typography__weights {
+	display: flex;
+	flex-wrap: wrap;
+}
+.rf-typography__weight-sample {
+	display: flex;
+	flex-direction: column;
+}

package/styles/runes/xref.css

@@ -0,0 +1,5 @@
+/* xref — structure. The external-indicator pseudo display box; the glyph + colour
+ * + unresolved treatment are skin. */
+.rf-xref--external::after {
+	display: inline-block;
+}