@refrakt-md/lumina 0.8.4 → 0.9.0

package/styles/runes/decision.css

@@ -0,0 +1,21 @@
+/* Decision */
+.rf-decision__body {
+	font-size: 0.925rem;
+	line-height: 1.65;
+}
+.rf-decision__body > header {
+	margin-bottom: 0.75rem;
+}
+.rf-decision__body > header h1,
+.rf-decision__body > header h2,
+.rf-decision__body > header h3 {
+	margin-top: 0;
+}
+.rf-decision__body > div > section {
+	margin-top: 1rem;
+	padding-top: 0.75rem;
+	border-top: 1px solid var(--rf-color-border);
+}
+.rf-decision__body > div > section:first-child {
+	margin-top: 0.75rem;
+}

package/styles/runes/design-context.css

@@ -1,6 +1,5 @@
 /* Design Context — unified token card wrapper */
 .rf-design-context {
-	margin: 1.5rem 0;
 	border: 1px solid var(--rf-color-border, #e5e7eb);
 	border-radius: 0.75rem;
 	overflow: hidden;

package/styles/runes/details.css

@@ -2,7 +2,6 @@
 .rf-details {
 	border: 1px solid var(--rf-color-border);
 	border-radius: var(--rf-radius-md);
-	margin: 1.5rem 0;
 	overflow: hidden;
 }
 .rf-details__summary {

package/styles/runes/diagram.css

@@ -3,7 +3,6 @@
 	border: 1px solid var(--rf-color-border);
 	border-radius: var(--rf-radius-lg);
 	padding: 1.5rem;
-	margin: 1.5rem 0;
 	text-align: center;
 }
 .rf-diagram__title {

package/styles/runes/diff.css

@@ -2,7 +2,6 @@
 .rf-diff {
 	border: 1px solid var(--rf-color-border);
 	border-radius: var(--rf-radius-lg);
-	margin: 1.5rem 0;
 	overflow: hidden;
 	font-size: 0.875rem;
 }

package/styles/runes/embed.css

@@ -1,6 +1,5 @@
 /* Embed */
 .rf-embed {
-	margin: 1.5rem 0;
 	padding: 0;
 }
 .rf-embed__wrapper {

package/styles/runes/event.css

@@ -1,7 +1,4 @@
 /* Event */
-.rf-event {
-	margin: 1.5rem 0;
-}
 .rf-event__details {
 	display: flex;
 	flex-wrap: wrap;

package/styles/runes/faction.css

@@ -1,43 +1,12 @@
 /* Faction */
 .rf-faction {
-	margin: 1.5rem 0;
 	display: flex;
 	flex-direction: column;
 }
 
-/* Badge bar — surface strip */
-.rf-faction__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-faction__type-badge,
-.rf-faction__alignment-badge,
-.rf-faction__size-badge {
-	font-size: 0.8125rem;
-	font-weight: 500;
-	text-transform: capitalize;
-	color: var(--rf-color-muted);
-}
-.rf-faction__type-badge::before { content: 'Type: '; font-weight: 400; opacity: 0.65; }
-.rf-faction__alignment-badge::before { content: 'Alignment: '; font-weight: 400; opacity: 0.65; }
-.rf-faction__size-badge::before { content: 'Size: '; font-weight: 400; opacity: 0.65; }
-
-/* Scene image */
+/* Scene image — base styles deferred to shared [data-section="media"] in split.css */
 .rf-faction__scene {
-	border-radius: var(--rf-radius-lg);
-	overflow: hidden;
-}
-.rf-faction__scene img {
-	display: block;
-	width: 100%;
-	height: auto;
-	border-radius: var(--rf-radius-lg);
+	margin-bottom: var(--rf-spacing-md);
 }
 
 /* Content */
@@ -56,7 +25,6 @@
 	font-weight: 700;
 	margin-bottom: 0.5rem;
 	color: var(--rf-color-heading);
-	order: -1;
 }
 
 /* Faction Section */
@@ -64,9 +32,11 @@
 	padding: 0.75rem 0;
 	border-top: 1px solid var(--rf-color-border);
 }
-.rf-faction-section__header {
-	font-size: 1.125rem;
-	font-weight: 600;
+.rf-faction-section__name {
+	display: block;
+	font-size: 1.25rem;
+	font-weight: 700;
+	line-height: 1.3;
 	margin-bottom: 0.5rem;
 	color: var(--rf-color-heading);
 }
@@ -80,41 +50,102 @@
 .rf-faction[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-faction[data-layout="split"] > span[property="name"],
-.rf-faction[data-layout="split-reverse"] > span[property="name"] {
-	grid-column: 1 / -1;
+/* Split: badge + name + content left (col 1), scene right (col 2) */
+.rf-faction[data-layout="split"] > .rf-faction__badge {
+	grid-column: 1;
 	grid-row: 1;
 }
-.rf-faction[data-layout="split"] > .rf-faction__badge,
-.rf-faction[data-layout="split-reverse"] > .rf-faction__badge {
-	grid-column: 1 / -1;
+.rf-faction[data-layout="split"] > span[property="name"] {
+	grid-column: 1;
 	grid-row: 2;
 }
-/* Split: content left (col 1), scene right (col 2) */
 .rf-faction[data-layout="split"] > .rf-faction__content {
 	grid-column: 1;
 	grid-row: 3;
 }
 .rf-faction[data-layout="split"] > .rf-faction__scene {
+	grid-column: 2;
+	grid-row: 1 / 4;
+}
+/* Split-reverse: scene left (col 1), badge + name + content right (col 2) */
+.rf-faction[data-layout="split-reverse"] > .rf-faction__badge {
+	grid-column: 2;
+	grid-row: 1;
+}
+.rf-faction[data-layout="split-reverse"] > span[property="name"] {
+	grid-column: 2;
+	grid-row: 2;
+}
+.rf-faction[data-layout="split-reverse"] > .rf-faction__content {
 	grid-column: 2;
 	grid-row: 3;
 }
-/* Split-reverse: scene left (col 1), content right (col 2) — matches DOM order */
+.rf-faction[data-layout="split-reverse"] > .rf-faction__scene {
+	grid-column: 1;
+	grid-row: 1 / 4;
+	margin: 0;
+}
 /* Collapse to single column on small screens */
 @media (max-width: 640px) {
 	.rf-faction[data-layout="split"],
 	.rf-faction[data-layout="split-reverse"] {
 		grid-template-columns: 1fr;
 	}
+	.rf-faction[data-layout="split"] > .rf-faction__badge,
+	.rf-faction[data-layout="split"] > span[property="name"],
 	.rf-faction[data-layout="split"] > .rf-faction__content,
-	.rf-faction[data-layout="split"] > .rf-faction__scene {
+	.rf-faction[data-layout="split"] > .rf-faction__scene,
+	.rf-faction[data-layout="split-reverse"] > .rf-faction__badge,
+	.rf-faction[data-layout="split-reverse"] > span[property="name"],
+	.rf-faction[data-layout="split-reverse"] > .rf-faction__content,
+	.rf-faction[data-layout="split-reverse"] > .rf-faction__scene {
+		grid-column: auto;
+		grid-row: auto;
+	}
+	.rf-faction[data-layout="split"]:not([data-media-position="top"]) > .rf-faction__scene,
+	.rf-faction[data-layout="split-reverse"]:not([data-media-position="top"]) > .rf-faction__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-faction[data-collapse="sm"] > .rf-faction__badge,
+	.rf-faction[data-collapse="sm"] > span[property="name"],
+	.rf-faction[data-collapse="sm"] > .rf-faction__content,
+	.rf-faction[data-collapse="sm"] > .rf-faction__scene {
 		grid-column: auto;
 		grid-row: auto;
 	}
+	.rf-faction[data-collapse="sm"]:not([data-media-position="top"]) > .rf-faction__scene {
+		margin-bottom: var(--rf-spacing-md);
+	}
+}
+@media (max-width: 768px) {
+	.rf-faction[data-collapse="md"] > .rf-faction__badge,
+	.rf-faction[data-collapse="md"] > span[property="name"],
+	.rf-faction[data-collapse="md"] > .rf-faction__content,
+	.rf-faction[data-collapse="md"] > .rf-faction__scene {
+		grid-column: auto;
+		grid-row: auto;
+	}
+	.rf-faction[data-collapse="md"]:not([data-media-position="top"]) > .rf-faction__scene {
+		margin-bottom: var(--rf-spacing-md);
+	}
+}
+@media (max-width: 1024px) {
+	.rf-faction[data-collapse="lg"] > .rf-faction__badge,
+	.rf-faction[data-collapse="lg"] > span[property="name"],
+	.rf-faction[data-collapse="lg"] > .rf-faction__content,
+	.rf-faction[data-collapse="lg"] > .rf-faction__scene {
+		grid-column: auto;
+		grid-row: auto;
+	}
+	.rf-faction[data-collapse="lg"]:not([data-media-position="top"]) > .rf-faction__scene {
+		margin-bottom: var(--rf-spacing-md);
+	}
 }
 
 /* Split layout scene gets subtle depth */

package/styles/runes/feature.css

@@ -2,7 +2,10 @@
 .rf-feature {
 	padding: 2.5rem 0 2rem;
 }
-.rf-feature__header {
+.rf-feature__preamble {
+	flex-direction: column;
+	align-items: flex-start;
+	gap: 0.25rem;
 	margin-bottom: 1.5rem;
 }
 .rf-feature__eyebrow {
@@ -45,15 +48,15 @@
 .rf-feature h2 {
 	margin-bottom: 2rem;
 }
-.rf-feature[data-align="center"] .rf-feature__header,
+.rf-feature[data-align="center"] .rf-feature__preamble,
 .rf-feature[data-align="center"] h2 {
 	text-align: center;
 }
-.rf-feature[data-align="left"] .rf-feature__header,
+.rf-feature[data-align="left"] .rf-feature__preamble,
 .rf-feature[data-align="left"] h2 {
 	text-align: left;
 }
-.rf-feature[data-align="right"] .rf-feature__header,
+.rf-feature[data-align="right"] .rf-feature__preamble,
 .rf-feature[data-align="right"] h2 {
 	text-align: right;
 }
@@ -68,8 +71,8 @@
 .rf-feature[data-layout="split-reverse"] .rf-feature__content {
 	display: block;
 }
-.rf-feature[data-layout="split"] .rf-feature__header,
-.rf-feature[data-layout="split-reverse"] .rf-feature__header,
+.rf-feature[data-layout="split"] .rf-feature__preamble,
+.rf-feature[data-layout="split-reverse"] .rf-feature__preamble,
 .rf-feature[data-layout="split"] h2,
 .rf-feature[data-layout="split-reverse"] h2 {
 	text-align: left;
@@ -80,15 +83,13 @@
 }
 .rf-feature[data-layout="split"] .rf-feature__feature-item,
 .rf-feature[data-layout="split-reverse"] .rf-feature__feature-item {
-	border: none;
 	background: none;
 	padding: 0.75rem 0;
 }
 .rf-feature__feature-item {
 	padding: 1.75rem;
 	border-radius: var(--rf-radius-md);
-	border: 1px solid var(--rf-color-border);
-	background: var(--rf-color-bg);
+	background: var(--rf-color-surface);
 }
 .rf-feature__feature-item dt {
 	font-weight: 650;
@@ -120,7 +121,6 @@
 }
 .rf-feature--in-hero .rf-feature__feature-item {
 	background: transparent;
-	border-color: rgba(255, 255, 255, 0.15);
 }
 
 /* Context-aware: feature inside a grid — remove outer padding */

package/styles/runes/figure.css

@@ -1,7 +1,4 @@
 /* Figure */
-.rf-figure {
-	margin: 1.5rem 0;
-}
 .rf-figure img {
 	max-width: 100%;
 	height: auto;

package/styles/runes/form.css

@@ -1,6 +1,5 @@
 /* Form */
 .rf-form {
-	margin: 1.5rem 0;
 	display: flex;
 	flex-direction: column;
 	gap: 1.25rem;

package/styles/runes/gallery.css

@@ -1,6 +1,5 @@
 /* Gallery — Multi-image container with grid/carousel/masonry layout */
 .rf-gallery {
-	margin: 1.5rem 0;
 	position: relative;
 }
 

package/styles/runes/grid.css

@@ -1,7 +1,4 @@
 /* Grid */
-.rf-grid {
-	margin: 1.5rem 0;
-}
 .rf-grid [data-layout="grid"] {
 	display: grid;
 	grid-template-columns: var(--grid-ratio, repeat(auto-fit, minmax(250px, 1fr)));

package/styles/runes/hero.css

@@ -5,7 +5,10 @@
 	background-size: cover;
 	background-position: center;
 }
-.rf-hero__header {
+.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) */
@@ -56,7 +59,7 @@
 	gap: 0.75rem;
 	flex-wrap: wrap;
 }
-.rf-hero[data-align="center"] .rf-hero__header,
+.rf-hero[data-align="center"] .rf-hero__preamble,
 .rf-hero[data-align="center"] > h1,
 .rf-hero[data-align="center"] > p {
 	text-align: center;
@@ -65,19 +68,25 @@
 	margin: 0 auto;
 	justify-content: center;
 }
-.rf-hero[data-align="left"] .rf-hero__header,
+.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__header,
+.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;
 }

package/styles/runes/hint.css

@@ -4,16 +4,9 @@
 	--hint-bg: var(--rf-color-info-bg);
 	border-left: 3px solid var(--hint-color);
 	padding: 0.875rem 1.25rem;
-	margin: 1.5rem 0;
 	border-radius: 0 var(--rf-radius-md) var(--rf-radius-md) 0;
 	background: var(--hint-bg);
 }
-.rf-hint__header {
-	display: flex;
-	align-items: center;
-	gap: 0.5rem;
-	margin-bottom: 0.375rem;
-}
 .rf-hint__icon {
 	display: flex;
 	align-items: center;

package/styles/runes/howto.css

@@ -1,30 +1,14 @@
 /* HowTo — matches recipe design */
 
-/* Root: no border box, just flow spacing */
-.rf-howto {
-	margin: 1.5rem 0;
-}
-
-/* Meta bar — soft surface strip */
+/* Meta bar — extra bottom spacing beyond section header default */
 .rf-howto__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-howto__meta-item {
-	font-size: 0.8125rem;
-	color: var(--rf-color-muted);
-	font-weight: 400;
-}
 
 /* Tools/materials list — surfaced zone with primary markers */
 .rf-howto__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;
 	margin: 0 0 1.75rem;
@@ -72,6 +56,11 @@
 	border-radius: var(--rf-radius-full);
 }
 
+.rf-howto__content ol > li > p,
+.rf-howto__content ul > li > p {
+	margin: 0;
+}
+
 /* Tips — callout accent like hint */
 .rf-howto__content blockquote {
 	border-left: 2px solid var(--rf-color-primary);

package/styles/runes/itinerary.css

@@ -1,8 +1,6 @@
 /* Itinerary */
 .rf-itinerary {
 	margin: 2rem 0;
-	padding-left: 0.75rem;
-	padding-right: 0.75rem;
 }
 .rf-itinerary > header {
 	margin-bottom: 1.5rem;

package/styles/runes/juxtapose.css

@@ -0,0 +1,160 @@
+/* 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 ─── */
+.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: 0.75rem;
+	font-weight: 600;
+	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 img {
+	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';  /* ↔ */
+	font-size: 1rem;
+	color: var(--rf-color-muted);
+	line-height: 1;
+}
+
+.rf-juxtapose[data-orientation="horizontal"] .rf-juxtapose__divider-handle::before {
+	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.25rem;
+	padding: 0.25rem;
+	margin-bottom: 0.75rem;
+	background: var(--rf-color-surface);
+	border: 1px solid var(--rf-color-border);
+	border-radius: var(--rf-radius-md);
+	width: fit-content;
+}
+
+.rf-juxtapose__toggle-btn {
+	padding: 0.375rem 1rem;
+	border: none;
+	border-radius: var(--rf-radius-sm);
+	background: transparent;
+	color: var(--rf-color-muted);
+	font-size: 0.875rem;
+	font-weight: 500;
+	cursor: pointer;
+	transition: background 0.15s, color 0.15s;
+}
+
+.rf-juxtapose__toggle-btn:hover {
+	color: var(--rf-color-text);
+}
+
+.rf-juxtapose__toggle-btn--active {
+	background: var(--rf-color-bg, #fff);
+	color: var(--rf-color-text);
+	box-shadow: var(--rf-shadow-sm);
+}
+
+/* ─── Fade variant cursor hint ─── */
+.rf-juxtapose--fade .rf-juxtapose__panels {
+	cursor: pointer;
+}
+

package/styles/runes/lore.css

@@ -1,28 +1,8 @@
 /* Lore */
 .rf-lore {
-	margin: 1.5rem 0;
 	position: relative;
 }
 
-/* Badge bar — surface strip */
-.rf-lore__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-lore__category-badge {
-	font-size: 0.8125rem;
-	font-weight: 500;
-	text-transform: capitalize;
-	color: var(--rf-color-muted);
-}
-.rf-lore__category-badge::before { content: 'Category: '; font-weight: 400; opacity: 0.65; }
-
 /* Content */
 .rf-lore__content {
 	transition: filter 0.3s ease;

package/styles/runes/map.css

@@ -4,9 +4,14 @@
 	margin: 2rem 0;
 	border-radius: var(--rf-radius-lg, 0.75rem);
 	overflow: hidden;
-	border: 1px solid var(--rf-color-border);
 }
 
+/* Spacing variants */
+.rf-map--spacing-flush { margin: 0; }
+.rf-map--spacing-tight { margin: 0.5rem 0; }
+.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; }

package/styles/runes/mediatext.css

@@ -1,7 +1,4 @@
 /* MediaText */
-.rf-mediatext {
-	margin: 1.5rem 0;
-}
 
 /* Grid mode (default — no wrap) */
 .rf-mediatext:not([data-wrap="true"]) {