@refrakt-md/lumina 0.8.4 → 0.9.0

package/styles/runes/realm.css

@@ -1,41 +1,12 @@
 /* Realm */
 .rf-realm {
-	margin: 1.5rem 0;
 	display: flex;
 	flex-direction: column;
 }
 
-/* Badge bar — surface strip */
-.rf-realm__badge {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 0.75rem 1.25rem;
-	align-items: center;
-	background: var(--rf-color-surface);
-	border-radius: var(--rf-radius-md);
-	padding: 0.625rem 1rem;
-	margin-bottom: 1rem;
-}
-.rf-realm__type-badge,
-.rf-realm__scale-badge {
-	font-size: 0.8125rem;
-	font-weight: 500;
-	text-transform: capitalize;
-	color: var(--rf-color-muted);
-}
-.rf-realm__type-badge::before { content: 'Type: '; font-weight: 400; opacity: 0.65; }
-.rf-realm__scale-badge::before { content: 'Scale: '; font-weight: 400; opacity: 0.65; }
-
-/* Scene image */
+/* Scene image — base styles deferred to shared [data-section="media"] in split.css */
 .rf-realm__scene {
-	border-radius: var(--rf-radius-lg);
-	overflow: hidden;
-}
-.rf-realm__scene img {
-	display: block;
-	width: 100%;
-	height: auto;
-	border-radius: var(--rf-radius-lg);
+	margin-bottom: var(--rf-spacing-md);
 }
 
 /* Content */
@@ -54,7 +25,6 @@
 	font-weight: 700;
 	margin-bottom: 0.5rem;
 	color: var(--rf-color-heading);
-	order: -1;
 }
 
 /* Realm Section */
@@ -62,9 +32,11 @@
 	padding: 0.75rem 0;
 	border-top: 1px solid var(--rf-color-border);
 }
-.rf-realm-section__header {
-	font-size: 1.125rem;
-	font-weight: 600;
+.rf-realm-section__name {
+	display: block;
+	font-size: 1.25rem;
+	font-weight: 700;
+	line-height: 1.3;
 	margin-bottom: 0.5rem;
 	color: var(--rf-color-heading);
 }
@@ -78,41 +50,103 @@
 .rf-realm[data-layout="split-reverse"] {
 	display: grid;
 	grid-template-columns: var(--split-ratio, 1fr 1fr);
-	gap: var(--split-gap, 2rem);
+	column-gap: var(--split-gap, 2rem);
 	align-items: var(--split-valign, start);
 }
-/* Name and badge span full width at the top */
-.rf-realm[data-layout="split"] > span[property="name"],
-.rf-realm[data-layout="split-reverse"] > span[property="name"] {
-	grid-column: 1 / -1;
+/* Split: badge + name + content left (col 1), scene right (col 2) */
+.rf-realm[data-layout="split"] > .rf-realm__badge {
+	grid-column: 1;
 	grid-row: 1;
 }
-.rf-realm[data-layout="split"] > .rf-realm__badge,
-.rf-realm[data-layout="split-reverse"] > .rf-realm__badge {
-	grid-column: 1 / -1;
+.rf-realm[data-layout="split"] > span[property="name"] {
+	grid-column: 1;
 	grid-row: 2;
 }
-/* Split: content left (col 1), scene right (col 2) */
 .rf-realm[data-layout="split"] > .rf-realm__content {
 	grid-column: 1;
 	grid-row: 3;
 }
 .rf-realm[data-layout="split"] > .rf-realm__scene {
+	grid-column: 2;
+	grid-row: 1 / 4;
+}
+/* Split-reverse: scene left (col 1), badge + name + content right (col 2) */
+.rf-realm[data-layout="split-reverse"] > .rf-realm__badge {
+	grid-column: 2;
+	grid-row: 1;
+}
+.rf-realm[data-layout="split-reverse"] > span[property="name"] {
+	grid-column: 2;
+	grid-row: 2;
+}
+.rf-realm[data-layout="split-reverse"] > .rf-realm__content {
 	grid-column: 2;
 	grid-row: 3;
 }
-/* Split-reverse: scene left (col 1), content right (col 2) — matches DOM order */
+.rf-realm[data-layout="split-reverse"] > .rf-realm__scene {
+	grid-column: 1;
+	grid-row: 1 / 4;
+	margin: 0;
+}
 /* Collapse to single column on small screens */
 @media (max-width: 640px) {
 	.rf-realm[data-layout="split"],
 	.rf-realm[data-layout="split-reverse"] {
 		grid-template-columns: 1fr;
 	}
+	.rf-realm[data-layout="split"] > .rf-realm__badge,
+	.rf-realm[data-layout="split"] > span[property="name"],
 	.rf-realm[data-layout="split"] > .rf-realm__content,
-	.rf-realm[data-layout="split"] > .rf-realm__scene {
+	.rf-realm[data-layout="split"] > .rf-realm__scene,
+	.rf-realm[data-layout="split-reverse"] > .rf-realm__badge,
+	.rf-realm[data-layout="split-reverse"] > span[property="name"],
+	.rf-realm[data-layout="split-reverse"] > .rf-realm__content,
+	.rf-realm[data-layout="split-reverse"] > .rf-realm__scene {
+		grid-column: auto;
+		grid-row: auto;
+	}
+	/* Only add margin when NOT in full-bleed media-position mode (shared split.css handles that) */
+	.rf-realm[data-layout="split"]:not([data-media-position="top"]) > .rf-realm__scene,
+	.rf-realm[data-layout="split-reverse"]:not([data-media-position="top"]) > .rf-realm__scene {
+		margin-bottom: var(--rf-spacing-md);
+	}
+}
+/* Reset grid placement when data-collapse triggers single-column from shared split.css */
+@media (max-width: 640px) {
+	.rf-realm[data-collapse="sm"] > .rf-realm__badge,
+	.rf-realm[data-collapse="sm"] > span[property="name"],
+	.rf-realm[data-collapse="sm"] > .rf-realm__content,
+	.rf-realm[data-collapse="sm"] > .rf-realm__scene {
 		grid-column: auto;
 		grid-row: auto;
 	}
+	.rf-realm[data-collapse="sm"]:not([data-media-position="top"]) > .rf-realm__scene {
+		margin-bottom: var(--rf-spacing-md);
+	}
+}
+@media (max-width: 768px) {
+	.rf-realm[data-collapse="md"] > .rf-realm__badge,
+	.rf-realm[data-collapse="md"] > span[property="name"],
+	.rf-realm[data-collapse="md"] > .rf-realm__content,
+	.rf-realm[data-collapse="md"] > .rf-realm__scene {
+		grid-column: auto;
+		grid-row: auto;
+	}
+	.rf-realm[data-collapse="md"]:not([data-media-position="top"]) > .rf-realm__scene {
+		margin-bottom: var(--rf-spacing-md);
+	}
+}
+@media (max-width: 1024px) {
+	.rf-realm[data-collapse="lg"] > .rf-realm__badge,
+	.rf-realm[data-collapse="lg"] > span[property="name"],
+	.rf-realm[data-collapse="lg"] > .rf-realm__content,
+	.rf-realm[data-collapse="lg"] > .rf-realm__scene {
+		grid-column: auto;
+		grid-row: auto;
+	}
+	.rf-realm[data-collapse="lg"]:not([data-media-position="top"]) > .rf-realm__scene {
+		margin-bottom: var(--rf-spacing-md);
+	}
 }
 
 /* Split layout scene gets subtle depth */

package/styles/runes/recipe.css

@@ -1,14 +1,5 @@
 /* Recipe — editorial cookbook aesthetic */
 
-/* Root: no border box, just flow spacing */
-.rf-recipe {
-	margin: 1.5rem 0;
-}
-
-/* Header */
-.rf-recipe__header {
-	margin-bottom: 1.25rem;
-}
 .rf-recipe .rf-recipe__eyebrow {
 	font-size: 0.8rem;
 	font-weight: 600;
@@ -30,31 +21,6 @@
 	margin-bottom: 1rem;
 }
 
-/* Meta bar — soft surface strip instead of bordered divider */
-.rf-recipe__meta {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 0.75rem 1.25rem;
-	align-items: center;
-	background: var(--rf-color-surface);
-	border-radius: var(--rf-radius-md);
-	padding: 0.625rem 1rem;
-	margin-bottom: 1.5rem;
-}
-.rf-recipe__meta-item {
-	font-size: 0.8125rem;
-	color: var(--rf-color-muted);
-	font-weight: 400;
-}
-
-/* Difficulty — plain text, same style as other meta items */
-.rf-recipe__badge {
-	font-size: 0.8125rem;
-	font-weight: 400;
-	text-transform: capitalize;
-	color: var(--rf-color-muted);
-}
-
 /* Content wrapper */
 .rf-recipe__content {
 	display: flex;
@@ -65,6 +31,7 @@
 /* Ingredients — surfaced zone with custom markers */
 .rf-recipe__content ul {
 	background: var(--rf-color-surface);
+	border: 1px solid var(--rf-color-border);
 	border-radius: var(--rf-radius-md);
 	padding: 1.25rem 1.25rem 1.25rem 2.5rem;
 	list-style: disc;
@@ -112,6 +79,11 @@
 	border-radius: var(--rf-radius-full);
 }
 
+.rf-recipe__content ol > li > p,
+.rf-recipe__content ul > li > p {
+	margin: 0;
+}
+
 /* Tips — callout accent like hint */
 .rf-recipe__content blockquote {
 	border-left: 2px solid var(--rf-color-primary);
@@ -128,61 +100,7 @@
 	margin: 0;
 }
 
-/* Media zone */
-.rf-recipe__media {
-	border-radius: var(--rf-radius-lg);
-	overflow: hidden;
-}
+/* Media zone — domain-specific overrides (base styles in split.css) */
 .rf-recipe__media img {
-	display: block;
-	width: 100%;
-	height: auto;
 	border-radius: var(--rf-radius-lg);
 }
-
-/* Split layout — shared */
-.rf-recipe[data-layout="split"],
-.rf-recipe[data-layout="split-reverse"] {
-	display: grid;
-	gap: var(--split-gap, 2rem);
-	align-items: var(--split-valign, start);
-}
-/* Both use the same column template */
-.rf-recipe[data-layout="split"],
-.rf-recipe[data-layout="split-reverse"] {
-	grid-template-columns: var(--split-ratio, 1fr 1fr);
-}
-/* Split: content left (col 1), media right (col 2) — DOM order is media first,
-   so explicit placement is needed */
-.rf-recipe[data-layout="split"] > .rf-recipe__content {
-	grid-column: 1;
-	grid-row: 2;
-}
-.rf-recipe[data-layout="split"] > .rf-recipe__media {
-	grid-column: 2;
-	grid-row: 2;
-}
-/* Split-reverse: media left (col 1), content right (col 2) — matches DOM order */
-/* Meta bar spans full width in split layouts */
-.rf-recipe[data-layout="split"] > .rf-recipe__meta,
-.rf-recipe[data-layout="split-reverse"] > .rf-recipe__meta {
-	grid-column: 1 / -1;
-}
-/* Collapse to single column on small screens */
-@media (max-width: 640px) {
-	.rf-recipe[data-layout="split"],
-	.rf-recipe[data-layout="split-reverse"] {
-		grid-template-columns: 1fr;
-	}
-	.rf-recipe[data-layout="split"] > .rf-recipe__content,
-	.rf-recipe[data-layout="split"] > .rf-recipe__media {
-		grid-column: auto;
-		grid-row: auto;
-	}
-}
-
-/* Split layout media gets subtle depth */
-.rf-recipe[data-layout="split"] .rf-recipe__media img,
-.rf-recipe[data-layout="split-reverse"] .rf-recipe__media img {
-	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-}

package/styles/runes/reveal.css

@@ -1,8 +1,5 @@
 /* Reveal */
-.rf-reveal {
-	margin: 1.5rem 0;
-}
-.rf-reveal__header {
+.rf-reveal__preamble {
 	margin-bottom: 1.5rem;
 }
 .rf-reveal__eyebrow {

package/styles/runes/sandbox.css

@@ -1,6 +1,5 @@
 /* Sandbox — Isolated HTML/CSS/JS rendering via iframe */
 .rf-sandbox {
-	margin: 1.5rem 0;
 	border-radius: var(--rf-radius-md);
 	overflow: hidden;
 }

package/styles/runes/spacing.css

@@ -1,7 +1,4 @@
 /* Spacing — spacing scale, radii, and shadow display */
-.rf-spacing {
-	margin: 1.5rem 0;
-}
 .rf-spacing__title {
 	font-size: 1.125rem;
 	font-weight: 600;

package/styles/runes/spec.css

@@ -0,0 +1,20 @@
+/* Spec */
+.rf-spec__body {
+	font-size: 0.925rem;
+	line-height: 1.65;
+}
+.rf-spec__body > header {
+	margin-bottom: 0.75rem;
+}
+.rf-spec__body > header h1,
+.rf-spec__body > header h2,
+.rf-spec__body > header h3 {
+	margin-top: 0;
+}
+.rf-spec__body blockquote {
+	border-left: 3px solid var(--rf-color-border);
+	padding: 0.5rem 1rem;
+	margin: 0.75rem 0;
+	font-style: italic;
+	color: var(--rf-color-muted);
+}

package/styles/runes/steps.css

@@ -1,9 +1,11 @@
 /* Steps */
 .rf-steps {
 	counter-reset: step;
-	margin: 1.5rem 0;
 }
-.rf-steps__header {
+.rf-steps__preamble {
+	flex-direction: column;
+	align-items: flex-start;
+	gap: 0.25rem;
 	margin-bottom: 1.5rem;
 }
 .rf-steps__eyebrow {

package/styles/runes/storyboard.css

@@ -1,7 +1,4 @@
 /* Storyboard */
-.rf-storyboard {
-	margin: 1.5rem 0;
-}
 .rf-storyboard__panels {
 	display: grid;
 	grid-template-columns: repeat(var(--sb-columns, 3), 1fr);

package/styles/runes/symbol.css

@@ -1,45 +1,6 @@
 /* Symbol */
-.rf-symbol {
-	margin: 1.5rem 0;
-}
 .rf-symbol__header {
-	display: flex;
-	align-items: center;
-	gap: 0.5rem;
 	padding: 0.5rem 0;
-	flex-wrap: wrap;
-}
-.rf-symbol__kind-badge {
-	font-size: 0.6875rem;
-	font-weight: 700;
-	text-transform: uppercase;
-	letter-spacing: 0.05em;
-	padding: 0.125rem 0.5rem;
-	border-radius: var(--rf-radius-sm);
-	color: var(--rf-color-primary);
-	background: var(--rf-color-primary-bg, rgba(14, 165, 233, 0.1));
-}
-.rf-symbol__lang-badge {
-	font-size: 0.6875rem;
-	font-weight: 500;
-	padding: 0.125rem 0.5rem;
-	border-radius: var(--rf-radius-sm);
-	color: var(--rf-color-muted);
-	background: var(--rf-color-surface-active);
-}
-.rf-symbol__since-badge {
-	font-size: 0.6875rem;
-	color: var(--rf-color-success);
-	background: var(--rf-color-success-bg);
-	padding: 0.125rem 0.5rem;
-	border-radius: var(--rf-radius-sm);
-}
-.rf-symbol__deprecated-badge {
-	font-size: 0.6875rem;
-	color: var(--rf-color-warning);
-	background: var(--rf-color-warning-bg);
-	padding: 0.125rem 0.5rem;
-	border-radius: var(--rf-radius-sm);
 }
 .rf-symbol__source-link {
 	margin-left: auto;

package/styles/runes/tabs.css

@@ -1,8 +1,5 @@
 /* Tabs */
-.rf-tabs {
-	margin: 1.5rem 0;
-}
-.rf-tabs__header {
+.rf-tabs__preamble {
 	margin-bottom: 1.5rem;
 }
 .rf-tabs__eyebrow {

package/styles/runes/testimonial.css

@@ -1,9 +1,7 @@
 /* Testimonial */
 .rf-testimonial {
-	border: 1px solid var(--rf-color-border);
 	border-radius: var(--rf-radius-lg);
 	padding: 1.75rem 2rem;
-	margin: 1.5rem 0;
 	background: var(--rf-color-surface);
 }
 .rf-testimonial__rating {

package/styles/runes/textblock.css

@@ -1,7 +1,4 @@
 /* TextBlock */
-.rf-textblock {
-	margin: 1.5rem 0;
-}
 .rf-textblock__body {
 	display: block;
 }

package/styles/runes/toc.css

@@ -4,7 +4,6 @@
 	border-left: 3px solid var(--rf-color-primary);
 	background: var(--rf-color-surface);
 	border-radius: 0 var(--rf-radius-md) var(--rf-radius-md) 0;
-	margin: 1.5rem 0;
 }
 .rf-toc__list {
 	font-weight: 650;

package/styles/runes/track.css

@@ -3,12 +3,12 @@
 	display: flex;
 	align-items: center;
 	gap: 0.75rem;
-	padding: 0.625rem 1.5rem;
+	padding: 0.75rem 1.25rem;
 	transition: background 0.15s ease;
 	counter-increment: track;
 }
 .rf-track + .rf-track {
-	box-shadow: inset 0 1px 0 color-mix(in srgb, var(--rf-color-border) 50%, transparent);
+	border-top: 1px solid var(--rf-color-border);
 }
 .rf-track:hover {
 	background: color-mix(in srgb, var(--rf-color-border) 15%, transparent);
@@ -34,29 +34,40 @@
 	white-space: nowrap;
 }
 
-/* Artist — secondary text */
+/* Artist — secondary text with dot separator */
 .rf-track__track-artist {
 	font-size: 0.8125rem;
 	color: var(--rf-color-muted);
 	flex-shrink: 0;
 }
+.rf-track__track-artist::before {
+	content: '\00b7';
+	margin-right: 0.5rem;
+	opacity: 0.5;
+}
 
-/* Duration — right-aligned, tabular nums */
+/* Duration — pushed right, tabular nums */
 .rf-track__track-duration {
 	font-size: 0.8125rem;
 	color: var(--rf-color-muted);
 	font-variant-numeric: tabular-nums;
 	flex-shrink: 0;
+	margin-left: auto;
 	min-width: 3rem;
 	text-align: right;
 }
 
-/* Meta (date etc.) */
+/* Meta (date etc.) — dot separator */
 .rf-track__track-meta {
 	font-size: 0.75rem;
 	color: var(--rf-color-muted);
 	flex-shrink: 0;
 }
+.rf-track__track-meta::before {
+	content: '\00b7';
+	margin-right: 0.5rem;
+	opacity: 0.5;
+}
 
 /* Description — full width below the row */
 .rf-track__track-description {

package/styles/runes/typography.css

@@ -1,7 +1,4 @@
 /* Typography — font specimen display */
-.rf-typography {
-	margin: 1.5rem 0;
-}
 .rf-typography__title {
 	font-size: 1.125rem;
 	font-weight: 600;

package/styles/runes/work.css

@@ -0,0 +1,35 @@
+/* Work */
+.rf-work__assignee-badge {
+	margin-left: auto;
+}
+.rf-work__assignee-badge::before { content: '@'; }
+.rf-work__body {
+	font-size: 0.925rem;
+	line-height: 1.65;
+}
+.rf-work__body > header {
+	margin-bottom: 0.75rem;
+}
+.rf-work__body > header h1,
+.rf-work__body > header h2,
+.rf-work__body > header h3 {
+	margin-top: 0;
+}
+.rf-work__body > div > section {
+	margin-top: 1rem;
+	padding-top: 0.75rem;
+	border-top: 1px solid var(--rf-color-border);
+}
+.rf-work__body > div > section:first-child {
+	margin-top: 0.75rem;
+}
+
+/* Complexity dots */
+.rf-work__complexity-badge::after {
+	margin-left: 0.25rem;
+}
+[data-complexity="trivial"] > .rf-work__header > .rf-work__complexity-badge::after { content: '●'; }
+[data-complexity="simple"] > .rf-work__header > .rf-work__complexity-badge::after { content: '●●'; }
+[data-complexity="moderate"] > .rf-work__header > .rf-work__complexity-badge::after { content: '●●●'; }
+[data-complexity="complex"] > .rf-work__header > .rf-work__complexity-badge::after { content: '●●●●'; }
+[data-complexity="unknown"] > .rf-work__header > .rf-work__complexity-badge::after { content: '?'; }

package/styles/runes/xref.css

@@ -0,0 +1,12 @@
+/* Xref — inline cross-reference link */
+
+.rf-xref {
+	/* Inherits normal link styling from the theme */
+}
+
+/* Unresolved reference */
+.rf-xref--unresolved {
+	text-decoration: underline dashed;
+	color: var(--rf-color-text-muted);
+	cursor: help;
+}