@refrakt-md/lumina 0.21.0 → 0.23.0

package/styles/runes/chart.css

@@ -1,50 +1,34 @@
-/* Chart */
+@layer skin {
+/* Chart — skin. The chart block, responsive SVG/container, legend flex, swatch box,
+ * and the sr-only rendered data table live in @refrakt-md/skeleton
+ * (styles/runes/chart.css). What remains is the --rf-chart-* theming contract, SVG
+ * paint, palette rotation, data-table chrome, and type. */
 .rf-chart {
-	/* ─── Theming contract (SPEC-083 / WORK-353) ───
-	 * Every paint + geometry value the renderer uses is one of these
-	 * `--rf-chart-*` properties; a theme overrides any of them (here, on a tint
-	 * scope, or inline) with no renderer or selector changes. A non-CSS provider
-	 * (canvas) reads the same props via getComputedStyle. */
-
-	/* Series palette — a dedicated categorical palette, deliberately distinct
-	 * from the semantic status tokens (those are reserved for sentiment mode). */
 	--rf-chart-series-1: #6366f1;
 	--rf-chart-series-2: #06b6d4;
 	--rf-chart-series-3: #22c55e;
 	--rf-chart-series-4: #f59e0b;
 	--rf-chart-series-5: #a855f7;
 	--rf-chart-series-6: #ec4899;
-
-	/* Geometry (layout values the renderer reads via getComputedStyle). */
-	--rf-chart-bar-ratio: 0.75;        /* bar width as a fraction of its slot */
-	--rf-chart-bar-thickness: 48px;    /* max bar width cap */
-	--rf-chart-bar-gap: 0.15;          /* slot fraction reserved as inter-group gap */
+	--rf-chart-bar-ratio: 0.75;
+	--rf-chart-bar-thickness: 48px;
+	--rf-chart-bar-gap: 0.15;
 	--rf-chart-bar-radius: 2px;
 	--rf-chart-point-radius: 4px;
 	--rf-chart-line-width: 2px;
-
-	/* Typography / grid (paint values applied by CSS below). */
 	--rf-chart-label-size: 12px;
 	--rf-chart-label-color: var(--rf-color-muted);
 	--rf-chart-grid-color: var(--rf-color-border);
 	--rf-chart-grid-width: 1px;
-
-	display: block;
 	border-radius: var(--rf-radius-lg);
 	padding: 1.5rem;
 	margin: 0;
 }
-
-/* ─── SVG paint — driven entirely by the contract (the renderer sets no inline
- * fill/stroke; it only tags elements with a class + data-series + optional
- * data-meta-sentiment). ─── */
 .rf-chart__axis { stroke: var(--rf-chart-grid-color); stroke-width: var(--rf-chart-grid-width); }
 .rf-chart__label { fill: var(--rf-chart-label-color); font-size: var(--rf-chart-label-size); }
 .rf-chart__bar { rx: var(--rf-chart-bar-radius); fill: var(--rf-chart-series-1); }
 .rf-chart__point { fill: var(--rf-chart-series-1); }
 .rf-chart__line { fill: none; stroke: var(--rf-chart-series-1); stroke-width: var(--rf-chart-line-width); }
-
-/* Series palette rotation (data-series 0 is the default above). */
 .rf-chart__bar[data-series="1"], .rf-chart__point[data-series="1"] { fill: var(--rf-chart-series-2); }
 .rf-chart__bar[data-series="2"], .rf-chart__point[data-series="2"] { fill: var(--rf-chart-series-3); }
 .rf-chart__bar[data-series="3"], .rf-chart__point[data-series="3"] { fill: var(--rf-chart-series-4); }
@@ -55,11 +39,6 @@
 .rf-chart__line[data-series="3"] { stroke: var(--rf-chart-series-4); }
 .rf-chart__line[data-series="4"] { stroke: var(--rf-chart-series-5); }
 .rf-chart__line[data-series="5"] { stroke: var(--rf-chart-series-6); }
-
-/* Sentiment colouring — a data cell carrying `data-meta-sentiment` overrides the
- * rotating palette with the semantic token (the roadmap chart renders green-done
- * / red-blocked with no per-chart config). After the palette so it wins at equal
- * specificity. */
 .rf-chart__bar[data-meta-sentiment="positive"], .rf-chart__point[data-meta-sentiment="positive"] { fill: var(--rf-color-success); }
 .rf-chart__bar[data-meta-sentiment="negative"], .rf-chart__point[data-meta-sentiment="negative"] { fill: var(--rf-color-danger); }
 .rf-chart__bar[data-meta-sentiment="caution"],  .rf-chart__point[data-meta-sentiment="caution"]  { fill: var(--rf-color-warning); }
@@ -68,17 +47,13 @@
 .rf-chart__line[data-meta-sentiment="negative"] { stroke: var(--rf-color-danger); }
 .rf-chart__line[data-meta-sentiment="caution"]  { stroke: var(--rf-color-warning); }
 .rf-chart__line[data-meta-sentiment="neutral"]  { stroke: var(--rf-color-muted); }
-
-/* Data table — the no-JS / screen-reader source of truth. Visible as the
- * fallback; visually-hidden (but kept for assistive tech) once rf-chart has
- * rendered the svg. */
 .rf-chart__data {
 	width: 100%;
 	border-collapse: collapse;
-	font-size: 0.875rem;
+	font-size: var(--rf-text-sm);
 }
 .rf-chart__data caption {
-	font-weight: 600;
+	font-weight: var(--rf-weight-semibold);
 	margin-bottom: 0.75rem;
 }
 .rf-chart__data th,
@@ -87,41 +62,22 @@
 	padding: 0.375rem 0.625rem;
 	text-align: left;
 }
-.rf-chart[data-rendered] .rf-chart__data {
-	position: absolute;
-	width: 1px;
-	height: 1px;
-	padding: 0;
-	margin: -1px;
-	overflow: hidden;
-	clip: rect(0, 0, 0, 0);
-	white-space: nowrap;
-	border: 0;
-}
 .rf-chart__title {
-	font-weight: 600;
-	font-size: 1rem;
+	font-weight: var(--rf-weight-semibold);
+	font-size: var(--rf-text);
 	margin-bottom: 1rem;
 	text-align: center;
 }
-.rf-chart__container { width: 100%; }
-.rf-chart__svg { width: 100%; height: auto; }
 .rf-chart__legend {
-	display: flex;
-	justify-content: center;
 	gap: 1rem;
 	margin-top: 1rem;
 }
 .rf-chart__legend-item {
-	display: flex;
-	align-items: center;
 	gap: 0.375rem;
-	font-size: 0.8125rem;
+	font-size: var(--rf-text-sm);
 	color: var(--rf-color-muted);
 }
 .rf-chart__legend-color {
-	width: 12px;
-	height: 12px;
 	border-radius: 2px;
 	background: var(--rf-chart-series-1);
 }
@@ -130,3 +86,5 @@
 .rf-chart__legend-color[data-series="3"] { background: var(--rf-chart-series-4); }
 .rf-chart__legend-color[data-series="4"] { background: var(--rf-chart-series-5); }
 .rf-chart__legend-color[data-series="5"] { background: var(--rf-chart-series-6); }
+
+}

package/styles/runes/codegroup.css

@@ -1,21 +1,22 @@
-/* Code Group
+@layer skin {
+/* Code Group — skin.
  *
  * Chrome (the wrapper + topbar + tabs) uses `--rf-color-surface` so it
  * reads against the page in both light and dark modes. The code areas
- * themselves inherit `--rf-color-code-bg` from the global `pre` rule, so
- * code stays on its own background even when the surrounding chrome
- * flips with the page mode. */
+ * themselves inherit `--rf-color-code-bg` from the global `pre` rule.
+ *
+ * The wrapper clip, topbar flex, list reset, the scrollable tab strip, and the
+ * tab flex live in @refrakt-md/skeleton (styles/runes/codegroup.css). The pre/code
+ * rules stay here in skin: they deliberately override elements/code.css by source
+ * order (the `data-overflow="wrap"` reset especially). */
 .rf-codegroup {
 	border: 1px solid var(--rf-color-border);
-	overflow: hidden;
 	background: var(--rf-color-surface);
 	color: var(--rf-color-text);
 	box-shadow: var(--rf-shadow-md);
 	padding: 0;
 }
 .rf-codegroup__topbar {
-	display: flex;
-	align-items: center;
 	gap: 0.375rem;
 	padding: 0.75rem 1rem;
 	background: transparent;
@@ -24,9 +25,7 @@
 }
 /* Window chrome — three traffic-light dots painted as gradients on one
  * pseudo-element. The element reserves real width (three 10px dots, 1rem
- * apart) so the flex row spaces the title clear of the dots — box-shadow
- * dots take no layout space and overlapped the title. Pure decoration, so
- * it lives entirely in CSS (no markup). */
+ * apart) so the flex row spaces the title clear of the dots. Pure decoration. */
 .rf-codegroup__topbar::before {
 	content: '';
 	flex: 0 0 auto;
@@ -42,26 +41,21 @@
 /* Filename title — the topbar bar's lone `code` field. */
 .rf-codegroup__topbar [data-meta-type="code"] {
 	margin-left: 0.5rem;
-	font-size: 0.8rem;
+	font-size: var(--rf-text-xs);
 	font-weight: normal;
 	color: var(--rf-color-muted);
 }
 .rf-codegroup ul {
-	list-style: none;
 	padding: 0;
 	margin: 0;
 }
 .rf-codegroup__tabs {
-	display: flex;
 	background: transparent;
 	border-bottom: 1px solid var(--rf-color-border);
-	overflow-x: auto;
-	overflow-y: hidden;
 }
 .rf-codegroup__tab {
-	flex: 0 0 auto;
 	padding: 0.5rem 1rem;
-	font-size: 0.8rem;
+	font-size: var(--rf-text-xs);
 	font-family: var(--rf-font-mono);
 	color: var(--rf-color-muted);
 	background: none;
@@ -95,7 +89,7 @@
 }
 .rf-codegroup code {
 	font-family: var(--rf-font-mono);
-	font-size: 0.85rem;
+	font-size: var(--rf-text-sm);
 }
 /* Overflow modes */
 .rf-codegroup[data-overflow="wrap"] pre {
@@ -104,14 +98,10 @@
 	overflow-x: hidden;
 }
 /* WORK-304 — the standalone codeblock CSS at `elements/code.css`
- * sets `display: grid; min-width: max-content` on `pre code` so
- * row tints + line numbers extend across the horizontal scroll
- * region. That sizing actively prevents wrapping (the code track
- * is locked at max-content). Inside `overflow="wrap"` codegroups
- * we WANT wrapping, so revert the code element back to a plain
- * block with no min-width constraint. Lines stay block-flow so
- * Shiki's `<span class="line">` children wrap with the pre's
- * `white-space: pre-wrap`. */
+ * sets `display: grid; min-width: max-content` on `pre code`. Inside
+ * `overflow="wrap"` codegroups we WANT wrapping, so revert the code element
+ * back to a plain block with no min-width constraint. This must stay skin —
+ * it overrides elements/code.css (also skin) by source order + specificity. */
 .rf-codegroup[data-overflow="wrap"] pre code {
 	display: block;
 	min-width: 0;
@@ -119,3 +109,5 @@
 .rf-codegroup[data-overflow="hide"] pre {
 	overflow-x: hidden;
 }
+
+}

package/styles/runes/collection.css

@@ -1,166 +1,89 @@
-/* Collection — list / grid / table / cards of registry entities (SPEC-070).
- *
- * The block is layout-agnostic; the `data-layout` attribute on the wrapper
- * selects the arrangement. Built-in items carry `.rf-collection__card` /
- * `__item`; a body template emits its own markup inside `.rf-collection__item`.
- */
-
+@layer skin {
+/* Collection — skin. The list/grid arrangement, card flex column, and block-item
+ * display reset live in @refrakt-md/skeleton (styles/runes/collection.css). */
 .rf-collection {
 	margin: var(--rf-spacing-md) 0;
 }
-
-/* Preamble — rendered above items only when the query is non-empty, so a
- * heading/intro can live inside the rune and vanish with an empty section. */
 .rf-collection__preamble > :first-child { margin-top: 0; }
-
-/* Empty state — shown in place of items when the query yields nothing. */
 .rf-collection__empty {
 	color: var(--rf-color-muted);
 	font-size: 0.9375em;
 }
-
 .rf-collection__items {
-	display: flex;
-	flex-direction: column;
 	gap: var(--rf-spacing-sm);
 }
-
-/* grid arranges items into responsive columns; list stays a stacked flow.
- * Item chrome (a card box, bare row, …) comes from the item, not the layout. */
 .rf-collection[data-layout='grid'] .rf-collection__items {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
 	gap: var(--rf-spacing-md);
-	align-items: stretch;
-}
-
-/* Uniform heights per row: grid stretches each item to the tallest in its row;
- * a body-template item then lets its card fill that stretched height. */
-.rf-collection[data-layout='grid'] .rf-collection__item {
-	display: flex;
 }
-.rf-collection[data-layout='grid'] .rf-collection__item > * {
-	flex: 1;
-	min-width: 0;
-}
-
-/* Grouped grid: the grid belongs to each group (its items are the cells), not
- * to __items — whose children are the group blocks (heading groups) or the
- * accordion wrapper. Left on __items, each group becomes a single cell, i.e. a
- * column per group. So when __items holds groups it stacks them, and each
- * group becomes the grid instead, with the group title spanning every column. */
 .rf-collection[data-layout='grid'] .rf-collection__items:has(.rf-collection__group),
 .rf-collection[data-layout='grid'] .rf-collection__items:has(.rf-accordion) {
-	display: flex;
-	flex-direction: column;
 	gap: var(--rf-spacing-md);
 }
 .rf-collection[data-layout='grid'] .rf-collection__group {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
 	gap: var(--rf-spacing-md);
-	align-items: stretch;
 }
-.rf-collection[data-layout='grid'] .rf-collection__group-title {
-	grid-column: 1 / -1;
-}
-
-.rf-collection__item {
-	min-width: 0;
-}
-
 .rf-collection__card {
-	display: flex;
-	flex-direction: column;
 	gap: var(--rf-spacing-xs);
 	padding: var(--rf-spacing-md);
 	border: 1px solid var(--rf-color-border);
 	border-radius: var(--rf-radius-md);
 	background: var(--rf-color-surface);
 }
-
 .rf-collection__card:hover {
 	background: var(--rf-color-surface-hover);
 }
-
 .rf-collection__title {
-	font-weight: 600;
+	font-weight: var(--rf-weight-semibold);
 	color: var(--rf-color-text);
 	text-decoration: none;
 }
-
 .rf-collection__title:hover {
 	color: var(--rf-color-primary);
 }
-
 .rf-collection__field {
 	font-size: 0.875em;
 	color: var(--rf-color-muted);
 }
-
-/* grouping */
 .rf-collection__group {
 	margin-top: var(--rf-spacing-md);
-	display: flex;
-	flex-direction: column;
 	/* Tight default for short item rows (the built-in title link, no body). */
 	gap: var(--rf-spacing-xs);
 }
-/* Modestly roomier when items carry a body template (block content — a card,
- * callout, list, …), so they don't collide. Body-template items are marked
- * `data-block` by the resolver; the built-in inline title rows are not.
- * Mirrors the rf-relationships rule. */
 .rf-collection__group:has(.rf-collection__item[data-block]) {
 	gap: var(--rf-spacing-sm);
 }
-
-/* Block-content item — let the body template (card / callout / etc.) fill the
- * container instead of shrink-fitting. No-op in grid mode (items there are
- * already `display: flex` with `flex: 1` on the child). Trim the outer margins
- * of the template's first/last block so the group `gap` controls inter-item
- * spacing — works for any block content, not a wrapper element. */
-.rf-collection__item[data-block] {
-	display: block;
-}
 .rf-collection__item[data-block] > :first-child {
 	margin-top: 0;
 }
 .rf-collection__item[data-block] > :last-child {
 	margin-bottom: 0;
 }
-
 .rf-collection__group-title {
 	margin: 0 0 var(--rf-spacing-sm);
 	font-size: 0.875em;
 	text-transform: uppercase;
-	letter-spacing: 0.05em;
+	letter-spacing: var(--rf-tracking-wider);
 	color: var(--rf-color-muted);
 }
-
 /* table layout */
 .rf-collection__table {
 	width: 100%;
 	border-collapse: collapse;
 }
-
 .rf-collection__table th,
 .rf-collection__table td {
 	padding: var(--rf-spacing-sm);
 	text-align: left;
 	border-bottom: 1px solid var(--rf-color-border);
 }
-
 .rf-collection__table th {
 	font-size: 0.875em;
 	text-transform: uppercase;
-	letter-spacing: 0.05em;
+	letter-spacing: var(--rf-tracking-wider);
 	color: var(--rf-color-muted);
 }
-
-/* Heading-template cells (`layout="table"` body) wrap their content as
- * markdown paragraphs, which pick up the global `p { margin-bottom: 1rem }`
- * and leave dead space inside each row. Drop it inside the table — table
- * cells don't want paragraph spacing. */
 .rf-collection__table td p {
 	margin: 0;
 }
+
+}

package/styles/runes/compare.css

@@ -1,30 +1,18 @@
+@layer skin {
 /* Compare */
 .rf-compare {
 	border: 1px solid var(--rf-color-border);
 	border-radius: var(--rf-radius-md);
-	overflow: hidden;
 }
 .rf-compare__header {
 	padding: 0.5rem 1rem;
 	font-family: var(--rf-font-sans);
-	font-size: 0.75rem;
-	font-weight: 600;
+	font-size: var(--rf-text-xs);
+	font-weight: var(--rf-weight-semibold);
 	color: var(--rf-color-muted);
 	background: var(--rf-color-surface);
 	border-bottom: 1px solid var(--rf-color-border);
 }
-.rf-compare--side-by-side .rf-compare__panels {
-	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-}
-.rf-compare--stacked .rf-compare__panels {
-	display: flex;
-	flex-direction: column;
-}
-.rf-compare [data-panel] {
-	min-width: 0;
-	overflow: auto;
-}
 .rf-compare--side-by-side [data-panel] + [data-panel] {
 	border-left: 1px solid var(--rf-color-border);
 }
@@ -32,12 +20,11 @@
 	border-top: 1px solid var(--rf-color-border);
 }
 .rf-compare [data-label] {
-	display: block;
 	padding: 0.5rem 1rem;
-	font-size: 0.75rem;
-	font-weight: 600;
+	font-size: var(--rf-text-xs);
+	font-weight: var(--rf-weight-semibold);
 	text-transform: uppercase;
-	letter-spacing: 0.05em;
+	letter-spacing: var(--rf-tracking-wider);
 	color: var(--rf-color-muted);
 	background: var(--rf-color-surface);
 	border-bottom: 1px solid var(--rf-color-border);
@@ -50,3 +37,5 @@
 	border: none;
 	border-radius: 0;
 }
+
+}

package/styles/runes/comparison.css

@@ -1,39 +1,26 @@
-/* Comparison */
+@layer skin {
+/* Comparison — skin. The grid passthroughs, scroll/sticky geometry, cards grid,
+ * card flex + badge positioning, and metadata hiding live in @refrakt-md/skeleton
+ * (styles/runes/comparison.css). */
 .rf-comparison {
 	margin: 2rem 0;
 }
-.rf-comparison__grid {
-	display: contents;
-}
-.rf-comparison-column__body,
-.rf-comparison-row__body {
-	display: contents;
-}
 .rf-comparison__title {
 	text-align: center;
 	margin: 0 0 1.5rem;
-	font-size: 1.5rem;
-	font-weight: 700;
+	font-size: var(--rf-text-2xl);
+	font-weight: var(--rf-weight-bold);
 	color: var(--rf-color-text);
 }
-.rf-comparison > meta,
-.rf-comparison > span[property] { display: none; }
 /* Table layout */
 .rf-comparison__table-wrapper {
-	overflow-x: auto;
-	-webkit-overflow-scrolling: touch;
 	margin: 0 -1rem;
 	padding: 0 1rem;
 }
 .rf-comparison__table {
 	width: 100%;
 	border-collapse: collapse;
-	font-size: 0.9375rem;
-}
-.rf-comparison__table thead {
-	position: sticky;
-	top: 0;
-	z-index: 1;
+	font-size: var(--rf-text);
 }
 .rf-comparison__table th,
 .rf-comparison__table td {
@@ -43,8 +30,8 @@
 }
 .rf-comparison__table thead th {
 	background: var(--rf-color-bg);
-	font-weight: 700;
-	font-size: 1rem;
+	font-weight: var(--rf-weight-bold);
+	font-size: var(--rf-text);
 	color: var(--rf-color-text);
 	border-bottom: 2px solid var(--rf-color-border);
 	vertical-align: bottom;
@@ -54,20 +41,18 @@
 	border-bottom-color: var(--rf-color-primary);
 }
 .rf-comparison__recommended-badge {
-	display: block;
-	font-size: 0.6875rem;
-	font-weight: 600;
+	font-size: var(--rf-text-xs);
+	font-weight: var(--rf-weight-semibold);
 	text-transform: uppercase;
-	letter-spacing: 0.05em;
+	letter-spacing: var(--rf-tracking-wider);
 	color: var(--rf-color-primary);
 	margin-top: 0.25rem;
 }
 .rf-comparison__label-col {
-	width: 1%;
 	white-space: nowrap;
 }
 .rf-comparison__row-label {
-	font-weight: 600;
+	font-weight: var(--rf-weight-semibold);
 	color: var(--rf-color-text);
 	white-space: nowrap;
 	background: var(--rf-color-bg);
@@ -79,8 +64,7 @@
 .rf-comparison__cell--highlighted {
 	background: color-mix(in srgb, var(--rf-color-primary) 3%, transparent);
 }
-.rf-comparison__cell p { margin: 0; font-size: 0.875rem; }
-.rf-comparison__cell strong { display: none; }
+.rf-comparison__cell p { margin: 0; font-size: var(--rf-text-sm); }
 .rf-comparison__cell em {
 	font-style: italic;
 	color: var(--rf-color-muted);
@@ -90,8 +74,8 @@
 }
 /* Row icons */
 .rf-comparison__row-icon {
-	font-weight: 700;
-	font-size: 1.125rem;
+	font-weight: var(--rf-weight-bold);
+	font-size: var(--rf-text-lg);
 }
 .rf-comparison__row-icon--check {
 	color: var(--rf-color-success);
@@ -110,28 +94,23 @@
 }
 /* Callout badge */
 .rf-comparison__callout-badge {
-	display: inline-block;
 	background: color-mix(in srgb, var(--rf-color-primary) 10%, transparent);
 	color: var(--rf-color-primary);
-	font-size: 0.75rem;
-	font-weight: 600;
+	font-size: var(--rf-text-xs);
+	font-weight: var(--rf-weight-semibold);
 	padding: 0.125rem 0.5rem;
 	border-radius: 999px;
 }
 .rf-comparison__callout-badge p { margin: 0; font-size: inherit; }
 /* Cards layout */
 .rf-comparison__cards {
-	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
 	gap: 1.5rem;
-	align-items: start;
 }
 .rf-comparison-card {
 	border: 1px solid var(--rf-color-border);
 	border-radius: var(--rf-radius-md);
 	padding: 1.5rem;
 	background: var(--rf-color-bg);
-	position: relative;
 	transition: box-shadow 200ms ease, transform 200ms ease;
 }
 .rf-comparison-card:hover {
@@ -143,43 +122,36 @@
 	transform: scale(1.02);
 }
 .rf-comparison-card__badge {
-	position: absolute;
-	top: -0.625rem;
-	left: 50%;
-	transform: translateX(-50%);
 	background: var(--rf-color-primary);
 	color: white;
-	font-size: 0.6875rem;
-	font-weight: 700;
+	font-size: var(--rf-text-xs);
+	font-weight: var(--rf-weight-bold);
 	text-transform: uppercase;
-	letter-spacing: 0.05em;
+	letter-spacing: var(--rf-tracking-wider);
 	padding: 0.125rem 0.75rem;
 	border-radius: 999px;
 	white-space: nowrap;
 }
 .rf-comparison-card__name {
 	margin: 0 0 1rem;
-	font-size: 1.125rem;
-	font-weight: 700;
+	font-size: var(--rf-text-lg);
+	font-weight: var(--rf-weight-bold);
 	color: var(--rf-color-text);
 }
 .rf-comparison-card__rows {
-	list-style: none;
 	padding: 0;
 	margin: 0;
 }
 .rf-comparison-card__row {
 	padding: 0.5rem 0;
-	font-size: 0.875rem;
+	font-size: var(--rf-text-sm);
 	color: var(--rf-color-muted);
 	border-bottom: 1px solid var(--rf-color-border);
-	display: flex;
-	align-items: baseline;
 	gap: 0.5rem;
 }
 .rf-comparison-card__row:last-child { border-bottom: none; }
 .rf-comparison-card__row strong { color: var(--rf-color-text); white-space: nowrap; }
-.rf-comparison-card__row p { margin: 0; display: inline; }
+.rf-comparison-card__row p { margin: 0; }
 .rf-comparison-card__row--negative { opacity: 0.7; }
 .rf-comparison-card__row--callout {
 	border-bottom: none;
@@ -188,7 +160,7 @@
 /* Verdict */
 .rf-comparison__verdict {
 	text-align: center;
-	font-size: 0.9375rem;
+	font-size: var(--rf-text);
 	color: var(--rf-color-muted);
 	font-style: italic;
 	margin: 1.5rem auto 0;
@@ -203,9 +175,10 @@
 .rf-comparison-row { padding: 0.25rem 0; }
 /* Responsive */
 @media (max-width: 640px) {
-	.rf-comparison__cards { grid-template-columns: 1fr; }
 	.rf-comparison-card--highlighted { transform: none; }
-	.rf-comparison__table { font-size: 0.8125rem; }
+	.rf-comparison__table { font-size: var(--rf-text-sm); }
 	.rf-comparison__table th,
 	.rf-comparison__table td { padding: 0.5rem 0.625rem; }
 }
+
+}