@refrakt-md/lumina 0.8.5 → 0.9.0

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

@@ -1,9 +1,5 @@
 /* Juxtapose — interactive comparison between two panels */
 
-.rf-juxtapose {
-	margin: 1.5rem 0;
-}
-
 /* ─── Variant modifiers (for static/no-JS layout) ─── */
 .rf-juxtapose--slider,
 .rf-juxtapose--auto,

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/mediatext.css

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

package/styles/runes/milestone.css

@@ -0,0 +1,106 @@
+/* Milestone */
+.rf-milestone__target-badge {
+	margin-left: auto;
+}
+.rf-milestone__body {
+	font-size: 0.925rem;
+	line-height: 1.65;
+}
+.rf-milestone__body > header {
+	margin-bottom: 0.75rem;
+}
+.rf-milestone__body > header h1,
+.rf-milestone__body > header h2,
+.rf-milestone__body > header h3 {
+	margin-top: 0;
+}
+.rf-milestone__body ul {
+	padding-left: 1.5rem;
+}
+
+/* Auto-backlog */
+.rf-milestone__backlog {
+	margin-top: 1.25rem;
+	padding-top: 1rem;
+	border-top: 1px solid var(--rf-color-border);
+}
+.rf-milestone__backlog-group {
+	margin-bottom: 1rem;
+}
+.rf-milestone__backlog-group-label {
+	font-size: 0.75rem;
+	font-weight: 700;
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+	color: var(--rf-color-muted);
+	margin: 0 0 0.375rem;
+}
+
+/* Backlog tabs */
+.rf-milestone__tabs {
+	display: flex;
+	border-bottom: 1px solid var(--rf-color-border);
+	overflow-x: auto;
+	overflow-y: hidden;
+	-webkit-overflow-scrolling: touch;
+	margin-bottom: 0;
+}
+.rf-milestone__tab {
+	flex: 0 0 auto;
+	padding: 0.5rem 1rem;
+	font-size: 0.8125rem;
+	font-weight: 500;
+	color: var(--rf-color-muted);
+	background: none;
+	border: none;
+	border-bottom: 2px solid transparent;
+	cursor: pointer;
+	transition: color 200ms ease, border-color 200ms ease;
+	white-space: nowrap;
+	font-family: inherit;
+}
+.rf-milestone__tab:hover {
+	color: var(--rf-color-text);
+}
+.rf-milestone__tab--active {
+	color: var(--rf-color-primary);
+	border-bottom-color: var(--rf-color-primary);
+	font-weight: 600;
+}
+.rf-milestone__panels {
+	padding: 0;
+	margin: 0;
+}
+.rf-milestone__panel {
+	padding-top: 0.75rem;
+}
+
+/* Aggregate progress */
+.rf-milestone__progress {
+	display: flex;
+	align-items: center;
+	gap: 0.625rem;
+	margin-bottom: 1rem;
+}
+.rf-milestone__progress-label {
+	font-size: 0.75rem;
+	font-weight: 600;
+	color: var(--rf-color-muted);
+	white-space: nowrap;
+}
+.rf-milestone__progress-bar {
+	flex: 1;
+	height: 0.375rem;
+	border-radius: var(--rf-radius-sm);
+	background: var(--rf-color-surface-active);
+	overflow: hidden;
+}
+.rf-milestone__progress-bar::after {
+	content: '';
+	display: block;
+	height: 100%;
+	width: var(--rf-progress, 0%);
+	background: var(--rf-color-success);
+	border-radius: var(--rf-radius-sm);
+	transition: width 0.3s ease;
+}

package/styles/runes/mockup.css

@@ -10,7 +10,6 @@
 	display: block;
 	width: 100%;
 	container-type: inline-size;
-	margin: 1.5rem 0;
 	background-color: transparent;
 }
 

package/styles/runes/organization.css

@@ -1,7 +1,4 @@
 /* Organization */
-.rf-organization {
-	margin: 1.5rem 0;
-}
 .rf-organization__type {
 	font-size: 0.75rem;
 	font-weight: 400;

package/styles/runes/palette.css

@@ -1,7 +1,4 @@
 /* Palette — color swatch grid */
-.rf-palette {
-	margin: 1.5rem 0;
-}
 .rf-palette__title {
 	font-size: 1.125rem;
 	font-weight: 600;

package/styles/runes/plan-activity.css

@@ -0,0 +1,87 @@
+/* Plan Activity */
+.rf-plan-activity__list {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+}
+.rf-plan-activity__entry {
+	display: flex;
+	align-items: baseline;
+	gap: 0.5rem;
+	padding: 0.25rem 0.5rem;
+	border-radius: var(--rf-radius-sm);
+	font-size: 0.8125rem;
+}
+.rf-plan-activity__entry:nth-child(odd) {
+	background: var(--rf-color-surface);
+}
+.rf-plan-activity__date {
+	font-family: var(--rf-font-mono);
+	font-size: 0.75rem;
+	color: var(--rf-color-muted);
+	white-space: nowrap;
+}
+.rf-plan-activity__type {
+	font-size: 0.75rem;
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+	color: var(--rf-color-muted);
+	min-width: 4rem;
+}
+.rf-plan-activity__id {
+	font-family: var(--rf-font-mono);
+	font-size: 0.75rem;
+	color: var(--rf-color-primary);
+	white-space: nowrap;
+}
+.rf-plan-activity__status {
+	font-size: 0.75rem;
+	padding: 0.0625rem 0.375rem;
+	border-radius: var(--rf-radius-sm);
+	white-space: nowrap;
+}
+
+/* Status badge colors */
+.rf-plan-activity__status[data-status="done"],
+.rf-plan-activity__status[data-status="fixed"],
+.rf-plan-activity__status[data-status="accepted"] {
+	color: var(--rf-color-success);
+	background: var(--rf-color-success-bg);
+}
+.rf-plan-activity__status[data-status="in-progress"],
+.rf-plan-activity__status[data-status="confirmed"],
+.rf-plan-activity__status[data-status="review"] {
+	color: var(--rf-color-warning);
+	background: var(--rf-color-warning-bg);
+}
+.rf-plan-activity__status[data-status="ready"],
+.rf-plan-activity__status[data-status="reported"],
+.rf-plan-activity__status[data-status="proposed"] {
+	color: var(--rf-color-info);
+	background: var(--rf-color-info-bg);
+}
+.rf-plan-activity__status[data-status="blocked"] {
+	color: var(--rf-color-danger);
+	background: var(--rf-color-danger-bg);
+}
+.rf-plan-activity__status[data-status="draft"] {
+	color: var(--rf-color-muted);
+	background: var(--rf-color-surface-active);
+}
+.rf-plan-activity__title {
+	color: var(--rf-color-text);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.rf-plan-activity__link {
+	display: flex;
+	align-items: baseline;
+	gap: 0.5rem;
+	color: inherit;
+	text-decoration: none;
+	width: 100%;
+}
+.rf-plan-activity__link:hover .rf-plan-activity__title {
+	color: var(--rf-color-primary);
+}