@riverbankcms/sdk 0.130.0 → 0.130.2

package/dist/server/theme-bridge.mjs

@@ -3283,6 +3283,26 @@ function presetCategory(recipe) {
 //#region ../theme-core/src/cards/types.ts
 const cardVariantRoleValues = ["default", "alternative"];
 const boxlessCardVariantValue = "none";
+const openCardRoleValue = "open";
+/**
+* The roles a site style implements with an actual card variant. `none` is
+* deliberately absent: it is a role value only, never a variant.
+*/
+const surfaceCardRoleValues = [...cardVariantRoleValues, openCardRoleValue];
+/**
+* The closed card-role vocabulary Looks and blocks address cards by — this is
+* `BoxStylesCardVariant` widened with `open`, not a parallel enum.
+*
+* - `none`        — no site-style card surface; the block's own composition and
+*                   the author's own card fields govern the item. This is *not*
+*                   a promise of visible boxlessness: a block whose base class
+*                   draws a border still draws one. It says the Look is not
+*                   asking the site style for a card.
+* - `open`        — boxless but marked (a rule or accent edge, no enclosing box)
+* - `default`     — the site's quiet everyday card
+* - `alternative` — the statement card carrying the site's personality
+*/
+const cardRoleValues = [...surfaceCardRoleValues, boxlessCardVariantValue];
 const cardSpacingSchema = z.enum([
 	"none",
 	"compact",
@@ -3291,6 +3311,17 @@ const cardSpacingSchema = z.enum([
 	"comfortable",
 	"spacious"
 ]);
+/** Per-axis padding, for boxless cards whose inline padding differs from block. */
+const cardSpacingAxesSchema = z.object({
+	block: cardSpacingSchema,
+	inline: cardSpacingSchema
+});
+/**
+* A card's content padding: one value for both axes, or one per axis. Two
+* fields would let a variant say both and leave the reader to guess, so this is
+* a union — the legacy `spacingAxes` key is lifted into it on parse.
+*/
+const cardSpacingValueSchema = z.union([cardSpacingSchema, cardSpacingAxesSchema]);
 const gradientDirectionSchema = z.enum([
 	"to-r",
 	"to-l",
@@ -3302,7 +3333,26 @@ const gradientDirectionSchema = z.enum([
 	"to-bl"
 ]);
 z.enum(cardVariantRoleValues);
-const boxStylesCardVariantSchema = z.enum([...cardVariantRoleValues, boxlessCardVariantValue]);
+const surfaceCardRoleSchema = z.enum(surfaceCardRoleValues);
+const cardRoleSchema = z.enum(cardRoleValues);
+/**
+* Historical name for the role vocabulary as it reaches box styles. Widened to
+* the full `CardRole` set — old values keep parsing, `open` now parses too.
+*/
+const boxStylesCardVariantSchema = cardRoleSchema;
+const PRIORITY_ROLE_INFERENCE = {
+	1: "default",
+	2: "alternative"
+};
+/**
+* Role inference for legacy card systems authored before variants carried a
+* `role`. Priority 1 is the everyday card, priority 2 the statement card —
+* which is how variants are surfaced today. `open` is never inferred: a site
+* style has to opt into it.
+*/
+function inferCardVariantRoleFromPriority(priority) {
+	return PRIORITY_ROLE_INFERENCE[priority] ?? null;
+}
 const cardBackgroundSchema = z.discriminatedUnion("type", [
 	z.object({
 		type: z.literal("solid"),
@@ -3328,17 +3378,19 @@ const cardCornerValueSchema = z.enum([
 	"pill",
 	"expressive"
 ]);
+const cardEdgeSchema = z.enum([
+	"left",
+	"top",
+	"right",
+	"bottom"
+]);
 /**
-* A single accented card edge (e.g. a left accent bar). When set, it replaces
-* the full `border` so the card reads as edge-accented rather than outlined.
+* Legacy single accented card edge (e.g. a left accent bar). Persisted and
+* curated data may still carry it; it lifts into a one-element `decorations`
+* list at the parse boundary and has no representation after that.
 */
 const cardAccentEdgeSchema = z.object({
-	edge: z.enum([
-		"left",
-		"top",
-		"right",
-		"bottom"
-	]),
+	edge: cardEdgeSchema,
 	colorToken: themeColorTokenSchema,
 	width: z.enum([
 		"thin",
@@ -3347,13 +3399,43 @@ const cardAccentEdgeSchema = z.object({
 		"heavy"
 	])
 });
+/** `hairline` (1px) is the widening the boxless `open` role needs. */
+const cardEdgeRuleWidthSchema = z.enum([
+	"hairline",
+	"thin",
+	"medium",
+	"thick",
+	"heavy"
+]);
+const cardEdgeRuleLengthSchema = z.enum(["full", "short"]);
+const cardEdgeRuleAlignSchema = z.enum([
+	"start",
+	"center",
+	"end"
+]);
+/**
+* Decorations are edge rules today. The alias exists so the list can grow into
+* a discriminated union without every call site changing.
+*/
+const cardDecorationSchema = z.object({
+	edge: cardEdgeSchema,
+	colorToken: themeColorTokenSchema,
+	width: cardEdgeRuleWidthSchema,
+	/** Defaults to `full`. */
+	length: cardEdgeRuleLengthSchema.optional(),
+	/** Where a `short` rule sits along its edge. Defaults to `start`. */
+	align: cardEdgeRuleAlignSchema.optional(),
+	/** Opacity applied to `colorToken`, 0–1. Scoped here, not on the token. */
+	alpha: z.number().min(0).max(1).optional()
+});
+const cardDecorationsSchema = z.array(cardDecorationSchema).max(2);
 const cardCornerRadiiSchema = z.object({
 	topLeft: cardCornerValueSchema.optional(),
 	topRight: cardCornerValueSchema.optional(),
 	bottomLeft: cardCornerValueSchema.optional(),
 	bottomRight: cardCornerValueSchema.optional()
 });
-const cardVariantSchema = z.object({
+const cardVariantInputSchema = z.object({
 	id: z.string(),
 	name: z.string().min(1).max(20),
 	enabled: z.boolean(),
@@ -3362,8 +3444,10 @@ const cardVariantSchema = z.object({
 		z.literal(2),
 		z.literal(3)
 	]),
+	role: surfaceCardRoleSchema.optional(),
 	background: cardBackgroundSchema,
-	spacing: cardSpacingSchema,
+	spacing: cardSpacingValueSchema,
+	spacingAxes: cardSpacingAxesSchema.optional(),
 	foregroundToken: themeColorTokenSchema.optional(),
 	shadow: z.object({
 		elevation: z.enum([
@@ -3387,9 +3471,188 @@ const cardVariantSchema = z.object({
 	]).optional(),
 	cornerRadii: cardCornerRadiiSchema.optional(),
 	border: cardBorderSchema.optional(),
+	decorations: cardDecorationsSchema.optional(),
 	accentEdge: cardAccentEdgeSchema.optional()
 });
-const cardSystemSchema = z.object({ variants: z.array(cardVariantSchema).min(1).max(3) });
+/**
+* Lift a legacy `accentEdge` into the decoration list. The old emitter reset
+* `border: 0` implicitly whenever an accent edge was present; conversion drops
+* the border instead, so the output is unchanged and the data says so.
+*/
+function normalizeLegacyAccentEdge(variant) {
+	const { accentEdge, ...rest } = normalizeLegacySpacingAxes(variant);
+	if (!accentEdge) return rest;
+	const { border: _droppedByAccentEdgeReset, ...withoutBorder } = rest;
+	return {
+		...withoutBorder,
+		decorations: [{
+			...accentEdge,
+			length: "full"
+		}]
+	};
+}
+/**
+* Lift a legacy `spacingAxes` into `spacing`. It always won over the flat value
+* when both were set, so the lift preserves the emitted padding exactly.
+*/
+function normalizeLegacySpacingAxes(variant) {
+	const { spacingAxes, ...rest } = variant;
+	return spacingAxes ? {
+		...rest,
+		spacing: spacingAxes
+	} : variant;
+}
+function validateSingleDecorationSource(variant, ctx) {
+	if (!variant.accentEdge || !variant.decorations) return;
+	ctx.addIssue({
+		code: "custom",
+		path: ["decorations"],
+		message: "A card variant carries either the legacy `accentEdge` or `decorations`, never both."
+	});
+}
+const cardVariantSchema = cardVariantInputSchema.superRefine(validateSingleDecorationSource).transform(normalizeLegacyAccentEdge);
+/**
+* Fill in roles for legacy systems whose variants declare none. Inference is
+* collision-tolerant on purpose: first claimant wins and a later variant that
+* would infer a taken role simply gets no role. Legacy data is not obliged to
+* be well-formed, and a card system that fails to parse takes the whole theme
+* down with it.
+*/
+function withInferredRoles(variants) {
+	const claimed = new Set(variants.flatMap((variant) => variant.role ? [variant.role] : []));
+	return variants.map((variant) => {
+		if (variant.role) return variant;
+		const inferred = inferCardVariantRoleFromPriority(variant.priority);
+		if (!inferred || claimed.has(inferred)) return variant;
+		claimed.add(inferred);
+		return {
+			...variant,
+			role: inferred
+		};
+	});
+}
+/**
+* Only *declared* roles are validated — a site style saying "these two
+* variants are both the default card" is an authoring error worth rejecting.
+*/
+function validateUniqueDeclaredCardVariantRoles(system, ctx) {
+	const declared = /* @__PURE__ */ new Set();
+	system.variants.forEach((variant, index) => {
+		const role = variant.role;
+		if (!role) return;
+		if (declared.has(role)) {
+			ctx.addIssue({
+				code: "custom",
+				path: [
+					"variants",
+					index,
+					"role"
+				],
+				message: `Card role "${role}" is already implemented by another variant.`
+			});
+			return;
+		}
+		declared.add(role);
+	});
+}
+const cardSystemSchema = z.object({ variants: z.array(cardVariantSchema).min(1).max(3) }).superRefine(validateUniqueDeclaredCardVariantRoles).transform((system) => ({ variants: withInferredRoles(system.variants) }));
+//#endregion
+//#region ../theme-core/src/cards/decorations.ts
+const CARD_EDGE_RULE_WIDTH_MAP = {
+	hairline: "1px",
+	thin: "2px",
+	medium: "3px",
+	thick: "4px",
+	heavy: "5px"
+};
+const CARD_EDGE_BORDER_PROPERTY_MAP = {
+	left: "border-left",
+	top: "border-top",
+	right: "border-right",
+	bottom: "border-bottom"
+};
+/**
+* The one short-rule length in the corpus (the editorial-rule accent). A fixed
+* constant keeps `length: 'short'` a semantic choice rather than a free number.
+*/
+const SHORT_CARD_EDGE_RULE_LENGTH = "2.75rem";
+function isFullLength(rule) {
+	return (rule.length ?? "full") === "full";
+}
+/** Apply a decoration's optional alpha to its resolved colour. */
+function cardDecorationColor(rule, resolveColor) {
+	const color = resolveColor(rule.colorToken);
+	if (rule.alpha === void 0 || rule.alpha >= 1) return color;
+	return `color-mix(in oklab, ${color}, transparent ${Math.round((1 - rule.alpha) * 100)}%)`;
+}
+/**
+* Container border declarations for a variant's border and its full-length
+* edge rules. The two are independent: a card may be outlined *and* carry an
+* accent edge. A variant with edge rules and no border still zeroes the box so
+* only the decorated sides draw.
+*/
+function cardBorderDeclarations(borderDeclaration, decorations, resolveColor) {
+	const fullLengthRules = (decorations ?? []).filter(isFullLength);
+	const declarations = [];
+	if (borderDeclaration) declarations.push(borderDeclaration);
+	else if (fullLengthRules.length > 0) declarations.push("border: 0");
+	for (const rule of fullLengthRules) {
+		const side = CARD_EDGE_BORDER_PROPERTY_MAP[rule.edge];
+		const width = CARD_EDGE_RULE_WIDTH_MAP[rule.width];
+		declarations.push(`${side}: ${width} solid ${cardDecorationColor(rule, resolveColor)}`);
+	}
+	return declarations;
+}
+function horizontalAlignDeclarations(align) {
+	switch (align ?? "start") {
+		case "start": return ["left: 0"];
+		case "center": return ["left: 50%", "transform: translateX(-50%)"];
+		case "end": return ["right: 0"];
+	}
+}
+function verticalAlignDeclarations(align) {
+	switch (align ?? "start") {
+		case "start": return ["top: 0"];
+		case "center": return ["top: 50%", "transform: translateY(-50%)"];
+		case "end": return ["bottom: 0"];
+	}
+}
+function shortEdgeRuleDeclarations(rule, resolveColor) {
+	const thickness = CARD_EDGE_RULE_WIDTH_MAP[rule.width];
+	const isHorizontal = rule.edge === "top" || rule.edge === "bottom";
+	return [
+		"content: \"\"",
+		"position: absolute",
+		`${rule.edge}: 0`,
+		...isHorizontal ? horizontalAlignDeclarations(rule.align) : verticalAlignDeclarations(rule.align),
+		`width: ${isHorizontal ? SHORT_CARD_EDGE_RULE_LENGTH : thickness}`,
+		`height: ${isHorizontal ? thickness : SHORT_CARD_EDGE_RULE_LENGTH}`,
+		`background: ${cardDecorationColor(rule, resolveColor)}`
+	];
+}
+/**
+* The pseudo-elements a card container can lend to short edge rules. A short
+* rule cannot be a border, so it is drawn on `::before` / `::after` against the
+* container (which always sets `position: relative`) — and a card has exactly
+* two of those.
+*/
+const CARD_DECORATION_PSEUDOS = ["::before", "::after"];
+/**
+* Complete pseudo-element rules for a variant's short edge rules.
+*
+* `cardDecorationsSchema` caps the list at two, which makes the two pseudos
+* sufficient for anything that parsed. The dependency-free core types carry a
+* plain array with no such cap, so short rules past the second are dropped
+* here rather than silently overwriting `::after`.
+*/
+function cardDecorationPseudoRules(containerSelectors, decorations, resolveColor) {
+	const shortRules = (decorations ?? []).filter((rule) => !isFullLength(rule));
+	return CARD_DECORATION_PSEUDOS.flatMap((pseudo, index) => {
+		const rule = shortRules[index];
+		if (!rule) return [];
+		return [`${containerSelectors.map((containerSelector) => `${containerSelector}${pseudo}`).join(",\n")} {\n  ${shortEdgeRuleDeclarations(rule, resolveColor).join(";\n  ")};\n}`];
+	});
+}
 //#endregion
 //#region ../theme-core/src/cards/core.ts
 /**
@@ -3398,6 +3661,10 @@ const cardSystemSchema = z.object({ variants: z.array(cardVariantSchema).min(1).
 * Pure functions for generating card CSS without requiring the full Theme type.
 * Used by both the full CMS theme system and the SDK theme bridge.
 */
+/** Core colours are always emitted as raw token references. */
+function coreColor(token) {
+	return `rgb(var(--tb-${token}))`;
+}
 const CORNER_RADIUS_MAP$2 = {
 	square: "0",
 	soft: "0.5rem",
@@ -3417,25 +3684,29 @@ const PER_CORNER_RADIUS_MAP = {
 	pill: "1.5rem",
 	expressive: "calc(var(--rb-block-radius) * 3)"
 };
-const ACCENT_EDGE_WIDTH_MAP = {
-	thin: "2px",
-	medium: "3px",
-	thick: "4px",
-	heavy: "5px"
-};
-const ACCENT_EDGE_SIDE_MAP = {
-	left: "border-left",
-	top: "border-top",
-	right: "border-right",
-	bottom: "border-bottom"
-};
+/**
+* The radius one corner resolves to: the variant's own override when it has
+* one, otherwise the global corners setting. Container geometry and the media
+* hook's top corners both go through here, so a variant that squares itself
+* cannot end up with rounded media.
+*/
+function resolveCornerCss(value, fallback) {
+	return value ? PER_CORNER_RADIUS_MAP[value] : CORNER_RADIUS_MAP$2[fallback];
+}
+/**
+* The media hook's top corners, resolved from the same geometry the container
+* used. A variant that overrides its corners (the `open` card is square)
+* therefore cannot leave its media rounded by the global setting.
+*/
+function mediaCornerRules(cornerRadii, fallback) {
+	return [`border-top-left-radius: ${resolveCornerCss(cornerRadii?.topLeft, fallback)}`, `border-top-right-radius: ${resolveCornerCss(cornerRadii?.topRight, fallback)}`];
+}
 /**
 * Resolve a `border-radius` shorthand from per-corner overrides, filling any
 * unspecified corner from the global corners setting.
 */
 function resolveCornerRadiiCss(cornerRadii, fallback) {
-	const fallbackValue = CORNER_RADIUS_MAP$2[fallback];
-	const at = (value) => value ? PER_CORNER_RADIUS_MAP[value] : fallbackValue;
+	const at = (value) => resolveCornerCss(value, fallback);
 	return `${at(cornerRadii.topLeft)} ${at(cornerRadii.topRight)} ${at(cornerRadii.bottomRight)} ${at(cornerRadii.bottomLeft)}`;
 }
 const GRADIENT_DIRECTION_MAP = {
@@ -3473,70 +3744,96 @@ const SPACING_MAP = {
 * @param settings - Global card settings
 * @returns CSS string
 */
-function generateCardCoreCss(scopeId, variants, settings) {
+function generateCardCoreCss(scopeId, variants, settings, scope = "all") {
 	const cssChunks = [];
 	for (const variant of variants) {
-		const css = generateVariantCss$1(scopeId, variant, settings);
-		cssChunks.push(css);
+		if (cardVariantClasses(variant, scope).length === 0) continue;
+		cssChunks.push(generateVariantCss$1(scopeId, variant, settings, scope));
 	}
 	return cssChunks.join("\n\n");
 }
 /**
-* Generate CSS for a single card variant
-*
-* Selectors use :where() for zero specificity, allowing site styles to override easily.
+* A variant's background and, when it owns one, the complete foreground
+* contract that goes with it. Opaque cards are surface providers; transparent
+* variants inherit the nearest outer surface atomically and declare nothing.
 */
-function generateVariantCss$1(scopeId, variant, settings) {
-	const containerSelector = `:where([data-theme-scope="${scopeId}"]) .card-${variant.id}`;
-	const mediaSelector = `${containerSelector} .card-media`;
-	const contentSelector = `${containerSelector} .card-content`;
-	const containerRules = [];
-	let ownsBackground = false;
-	if (variant.background === "solid" && variant.backgroundToken) {
-		containerRules.push(`background: rgb(var(--tb-${variant.backgroundToken}))`);
-		ownsBackground = true;
-	} else if (variant.background === "gradient" && variant.gradientFromToken && variant.gradientToToken) {
+function cardSurfaceDeclarations(variant) {
+	if (variant.background === "solid" && variant.backgroundToken) return [`background: rgb(var(--tb-${variant.backgroundToken}))`, ...surfaceForegroundDeclarations({ text: `rgb(var(--tb-${variant.foregroundToken ?? "text"}))` })];
+	if (variant.background === "gradient" && variant.gradientFromToken && variant.gradientToToken) {
 		const fromColor = `rgb(var(--tb-${variant.gradientFromToken}))`;
 		const toColor = `rgb(var(--tb-${variant.gradientToToken}))`;
-		const direction = GRADIENT_DIRECTION_MAP[variant.gradientDirection ?? "to-r"];
-		containerRules.push(`background: linear-gradient(${direction}, ${fromColor}, ${toColor})`);
-		ownsBackground = true;
-	} else containerRules.push("background: transparent");
-	if (ownsBackground) {
-		const foreground = `rgb(var(--tb-${variant.foregroundToken ?? "text"}))`;
-		containerRules.push(...surfaceForegroundDeclarations({ text: foreground }));
-	}
-	if (variant.accentEdge) {
-		const side = ACCENT_EDGE_SIDE_MAP[variant.accentEdge.edge];
-		const width = ACCENT_EDGE_WIDTH_MAP[variant.accentEdge.width];
-		containerRules.push("border: 0");
-		containerRules.push(`${side}: ${width} solid rgb(var(--tb-${variant.accentEdge.colorToken}))`);
-	} else {
-		const borderWidth = variant.borderWidth ? BORDER_WIDTH_MAP$2[variant.borderWidth] : variant.borderToken ? BORDER_WIDTH_MAP$2[settings.borderWidth] : "0";
-		if (variant.borderToken && borderWidth !== "0") containerRules.push(`border: ${borderWidth} solid rgb(var(--tb-${variant.borderToken}))`);
+		return [`background: linear-gradient(${GRADIENT_DIRECTION_MAP[variant.gradientDirection ?? "to-r"]}, ${fromColor}, ${toColor})`, ...surfaceForegroundDeclarations({ text: `rgb(var(--tb-${variant.foregroundToken ?? "text"}))` })];
 	}
+	return ["background: transparent"];
+}
+/**
+* Generate CSS for a single card variant
+*
+* Selectors use :where() for zero specificity, allowing site styles to override easily.
+*/
+function generateVariantCss$1(scopeId, variant, settings, scope = "all") {
+	const containerSelectors = cardVariantClasses(variant, scope).map((cardClass) => `:where([data-theme-scope="${scopeId}"]) .${cardClass}`);
+	const containerSelector = containerSelectors.join(",\n");
+	const mediaSelector = containerSelectors.map((selector) => `${selector} .card-media`).join(",\n");
+	const contentSelector = containerSelectors.map((selector) => `${selector} .card-content`).join(",\n");
+	const fallbackBackgroundSelector = containerSelectors.map((selector) => `${selector} > .rb-bg-surface`).join(",\n");
+	const containerRules = [...cardSurfaceDeclarations(variant)];
+	const decorations = variant.decorations;
+	const borderWidth = variant.borderWidth ? BORDER_WIDTH_MAP$2[variant.borderWidth] : variant.borderToken ? BORDER_WIDTH_MAP$2[settings.borderWidth] : "0";
+	const border = variant.borderToken && borderWidth !== "0" ? `border: ${borderWidth} solid ${coreColor(variant.borderToken)}` : null;
+	containerRules.push(...cardBorderDeclarations(border, decorations, coreColor));
 	containerRules.push(`border-radius: ${variant.cornerRadii ? resolveCornerRadiiCss(variant.cornerRadii, settings.corners) : CORNER_RADIUS_MAP$2[settings.corners]}`);
-	if (settings.shadow !== "none") containerRules.push(`box-shadow: ${SHADOW_VALUES$2[settings.shadow]}`);
+	if (settings.shadow !== "none" && !variant.suppressShadow) containerRules.push(`box-shadow: ${SHADOW_VALUES$2[settings.shadow]}`);
 	containerRules.push("display: flex");
 	containerRules.push("flex-direction: column");
 	containerRules.push("position: relative");
 	containerRules.push("overflow: visible");
-	const mediaRadius = CORNER_RADIUS_MAP$2[settings.corners];
-	const mediaRules = [`border-top-left-radius: ${mediaRadius}`, `border-top-right-radius: ${mediaRadius}`];
+	const mediaRules = mediaCornerRules(variant.cornerRadii, settings.corners);
 	const contentRules = [`padding: ${SPACING_MAP[variant.spacing]}`];
 	return [
 		`${containerSelector} {\n  ${containerRules.join(";\n  ")};\n}`,
+		...cardDecorationPseudoRules(containerSelectors, decorations, coreColor),
+		`${fallbackBackgroundSelector} {\n  background: transparent;\n}`,
 		`${mediaSelector} {\n  ${mediaRules.join(";\n  ")};\n}`,
 		`${contentSelector} {\n  ${contentRules.join(";\n  ")};\n}`
 	].join("\n\n");
 }
+/** Every class a variant's rule is addressed by, within a scope. */
+function cardVariantClasses(variant, scope = "all") {
+	const roleAliases = variant.role ? [`card-role-${variant.role}`] : [];
+	if (scope === "role-aliases") return roleAliases;
+	const named = [`card-${variant.id}`, ...(variant.legacyIds ?? []).map((legacyId) => `card-${legacyId}`)];
+	if (scope === "named") return named;
+	return [
+		`card-${variant.id}`,
+		...roleAliases,
+		...named.slice(1)
+	];
+}
 /**
-* Get default card variants for SDK usage.
+* The default card variants for SDK/bridge themes — one per surface-backed
+* role, so a bridge theme implements the same card contract a site style does
+* and compiled `_cardStyles.role` renders on it.
+*
+* Two of the pre-role trio survive as legacy ids: `.card-elevated` is the
+* `alternative` card under its old name, and both were the same surface before
+* the rename. `outlined` is different — a fully bordered box is not what the
+* `open` role means (boxless but marked), so it keeps its own variant and its
+* own declarations as a *compatibility class only*. It carries no role, which
+* means:
+*
+* - `.card-outlined` renders exactly what it always did;
+* - `role: 'open'` renders the boxless marked card on a bridge theme, the same
+*   thing it renders under a site style;
+* - naming `outlined` in `components.cards.variants` enables the compatibility
+*   class and nothing else — it does not publish `.card-role-open`, because
+*   selecting a legacy name is not a claim on a semantic role.
 */
 function getDefaultCardVariants() {
 	return [
 		{
 			id: "default",
+			role: "default",
 			background: "solid",
 			backgroundToken: "surface",
 			spacing: "comfortable",
@@ -3544,11 +3841,38 @@ function getDefaultCardVariants() {
 			borderWidth: "thin"
 		},
 		{
-			id: "elevated",
+			id: "alternative",
+			role: "alternative",
+			legacyIds: ["elevated"],
 			background: "solid",
 			backgroundToken: "surface",
 			spacing: "comfortable"
 		},
+		{
+			id: "open",
+			role: "open",
+			background: "transparent",
+			spacing: "comfortable",
+			suppressShadow: true,
+			cornerRadii: {
+				topLeft: "square",
+				topRight: "square",
+				bottomLeft: "square",
+				bottomRight: "square"
+			},
+			decorations: [{
+				edge: "top",
+				colorToken: "border",
+				width: "hairline",
+				length: "full"
+			}, {
+				edge: "top",
+				colorToken: "primary",
+				width: "thick",
+				length: "short",
+				align: "start"
+			}]
+		},
 		{
 			id: "outlined",
 			background: "transparent",
@@ -4424,6 +4748,58 @@ new Set(themeV2NormalEditorRawStyleFieldNames);
 [...themeV2RuntimeStyleFieldNames, ...themeV2BlockSpecificRawStyleFieldNames];
 const pageDesignEditorBackgroundOverrideOwner = "page-design-editor";
 const siteChromeBackgroundOverrideOwner = "site-chrome-editor";
+//#endregion
+//#region ../theme-core/src/header/legacyHeaderVariant.ts
+/**
+* The header variants the system actually renders.
+*
+* Each one has a layout row in the site-header block and a paint target in
+* `paintTargets.ts`. This is the canonical list: the block transform's variant
+* class allowlist and the AI theme generator's enum both derive from it, so
+* they cannot drift.
+*/
+const headerVariantValues = [
+	"classic",
+	"centered",
+	"floating"
+];
+z.enum(headerVariantValues);
+/**
+* Header variant spellings that were once authorable but no longer name a
+* layout of their own, and the variant they read as now.
+*
+* `transparent` was an overlay header with no CSS of its own: everything it
+* did (transparent root background, overlay content flow) is what `floating`
+* already does, and it had zero persisted usage in production or locally when
+* it was retired. It survives here as a one-boundary alias so a theme authored
+* against the old vocabulary still parses.
+*
+* This matters because the theme schema is strict and has no per-field
+* `.catch()`: an out-of-enum variant fails `themeSchema.safeParse` for the
+* *whole* theme, which silently swaps the site's theme for
+* `modernMinimalTheme`. Aliasing here keeps that from happening.
+*/
+const legacyHeaderVariants = { transparent: "floating" };
+const legacyHeaderVariantValues = Object.keys(legacyHeaderVariants);
+/**
+* The header variant boundary for themes that go through `themeSchema`:
+* canonical variants pass through, legacy spellings normalize to the variant
+* they meant, everything else fails the parse.
+*
+* Deliberately an enum plus a transform rather than a `z.preprocess`, so the
+* schema's *input* type stays an accurate union (the legacy spelling is still
+* accepted on the wire) instead of widening to `unknown`. `SdkThemeWire` in
+* `@riverbankcms/api` is `z.input<typeof themeSchema>`, so a widened input here
+* would leak straight into a public type.
+*
+* Not every read of a persisted theme goes through the schema:
+* `resolveRuntimeTheme` in
+* `apps/dashboard/src/server/services/sites/runtimeSiteResponse.ts` returns the
+* raw database JSON asserted as `Theme` with no parse, so a theme still
+* carrying a legacy spelling reaches the theme editor un-aliased. That gap
+* predates this alias and is harmless while persisted usage is zero.
+*/
+const headerVariantWithLegacyAliasSchema = z.enum([...headerVariantValues, ...legacyHeaderVariantValues]).transform((value) => value in legacyHeaderVariants ? legacyHeaderVariants[value] : value);
 const BREAKPOINT_LG = 1024;
 const BREAKPOINT_XL = 1280;
 const BREAKPOINT_LG_DOWN = BREAKPOINT_LG - 1;
@@ -4740,14 +5116,7 @@ const cardStylesOverrideSchema = z.object({
 	spacing: semanticSpacingSchema.nullable().optional(),
 	raised: z.boolean().nullable().optional(),
 	rounded: boxRoundedSchema.nullable().optional(),
-	treatment: z.enum([
-		"accent-quote",
-		"editorial-rule",
-		"soft-panel",
-		"editorial-serif-quote",
-		"editorial-open",
-		"color-blocked"
-	]).nullable().optional(),
+	role: cardRoleSchema.nullable().optional(),
 	cardVariant: boxStylesCardVariantSchema.nullable().optional()
 });
 const blockStyleOverridesSchema = z.object({
@@ -4853,30 +5222,6 @@ const motion = z.object({
 	]).nullable()
 });
 z.object({ shape: corners });
-z.object({
-	elevation: z.enum([
-		"none",
-		"low",
-		"medium",
-		"high"
-	]),
-	border: z.enum([
-		"none",
-		"subtle",
-		"defined"
-	]),
-	shape: corners,
-	headerStyle: z.enum([
-		"plain",
-		"accentBar",
-		"subtleBg"
-	]).nullable(),
-	mediaTreatment: z.enum([
-		"square",
-		"rounded",
-		"bleed"
-	]).nullable()
-});
 const inputStyle = z.object({
 	shape: corners,
 	border: z.enum([
@@ -4891,12 +5236,6 @@ const inputStyle = z.object({
 	]),
 	label: z.enum(["inside", "above"])
 });
-const headerVariant = z.enum([
-	"classic",
-	"centered",
-	"transparent",
-	"floating"
-]);
 const headerPositioning = z.enum([
 	"static",
 	"sticky",
@@ -5040,7 +5379,7 @@ const headerBackgroundSchema = z.object({
 	textColor: tokenOrCssColorValueSchema.nullable().optional()
 });
 const headerSchema = z.object({
-	variant: headerVariant,
+	variant: headerVariantWithLegacyAliasSchema,
 	positioning: headerPositioning,
 	shrinkOnScroll: z.boolean(),
 	maxWidth: headerMaxWidth,
@@ -6970,14 +7309,15 @@ const softEarthAccordionSystem = {
 /**
 * Reusable card systems for curated site styles.
 *
-* generateCardCss emits a `.card-{id}` class per enabled variant. The
-* intended convention (block-level role selection is wired in a follow-up) is
-* a role pair:
+* generateCardCss emits a `.card-{id}` class per enabled variant, plus stable
+* `.card-role-{role}` aliases resolved through the fallback chain. Each variant
+* declares which role it implements:
 *   - `default`     — the quiet, everyday card (most blocks, most of the time)
 *   - `alternative` — the prominent "statement" card for sections that pop
-* A card-heavy site style may add a third; the schema allows up to three
-* variants. The planned fallback when a block references a missing variant is
-* `alternative`, then `default`.
+*   - `open`        — boxless but marked; falls back to the generated baseline
+* The schema allows three variants, one per role. A block asking for a role a
+* site style does not define falls back per `resolveCardRole`: `alternative` →
+* `default` → generated baseline.
 *
 * Keep `default` close to the generated baseline so shared consumers (event
 * cards, testimonials) stay stable; put the personality in `alternative`.
@@ -6993,6 +7333,7 @@ const southWestCardSystem = { variants: [{
 	name: "Default",
 	enabled: true,
 	priority: 1,
+	role: "default",
 	background: {
 		type: "solid",
 		colorToken: "surface"
@@ -7010,6 +7351,7 @@ const southWestCardSystem = { variants: [{
 	name: "Statement",
 	enabled: true,
 	priority: 2,
+	role: "alternative",
 	background: {
 		type: "solid",
 		colorToken: "primary-700"
@@ -7021,11 +7363,12 @@ const southWestCardSystem = { variants: [{
 		softness: null,
 		position: "bottom"
 	},
-	accentEdge: {
+	decorations: [{
 		edge: "left",
 		colorToken: "secondary",
-		width: "heavy"
-	},
+		width: "heavy",
+		length: "full"
+	}],
 	cornerRadii: {
 		topLeft: "square",
 		topRight: "expressive",
@@ -7038,6 +7381,7 @@ const clarityZenCardSystem = { variants: [{
 	name: "Default",
 	enabled: true,
 	priority: 1,
+	role: "default",
 	background: {
 		type: "solid",
 		colorToken: "surface"
@@ -7055,6 +7399,7 @@ const clarityZenCardSystem = { variants: [{
 	name: "Statement",
 	enabled: true,
 	priority: 2,
+	role: "alternative",
 	background: {
 		type: "solid",
 		colorToken: "surfaceAlt"
@@ -7069,6 +7414,117 @@ const clarityZenCardSystem = { variants: [{
 	}
 }] };
 /**
+* Grounded Practice: the first site style to own the `open` role.
+*
+* `default` and `alternative` restate the generated baseline this style's token
+* recipes already produce (soft corners, flat surface card, tinted statement
+* card, hairline border) so nothing that renders today moves — declaring a card
+* system means the `.card-{id}` classes must keep existing for event and
+* offering cards.
+*
+* `open` is the change, and it is the one place this style deliberately
+* diverges from `boxlessOpenCardVariant` (the generated baseline's
+* hairline-plus-short-accent marking). Grounded Practice takes Luna's
+* therapy-page card literally
+* (`apps/dashboard/scripts/design-bakeoff/results/studies/anna-raven-yoga-20260713-115605Z/revisions/005/index.html`,
+* `.fit__card`: `padding: 1.6rem 1.45rem 1.75rem; border-top: 2px solid
+* var(--ochre); background: rgba(242,243,235,.72)`):
+*
+* - one **full-length 2px** rule in the style's ochre `accent` (`#c69a3c` —
+*   the mockup's `--ochre`); `width: 'thin'` is the 2px step in
+*   `CARD_EDGE_RULE_WIDTH_MAP`. No hairline underneath and no short marker:
+*   the single rule *is* the marking.
+* - a light solid fill. Card backgrounds take no alpha, so the token that
+*   reads like the mockup's translucent pale tint is `surfaceAlt`
+*   (`#f2ecdb`), which sits one step lighter than the `muted` band the
+*   Look now paints — the same lift Luna gets from `rgba(242,243,235,.72)`
+*   over `--ground-2`.
+* - comfortable spacing on both axes. The baseline keeps `inline: 'none'`
+*   so a boxless card stays flush with the section; a filled card needs its
+*   padding back or the text touches the fill's edge.
+*
+* The baseline `boxlessOpenCardVariant` is unchanged — this divergence is
+* grounded-practice's alone. See
+* `.project/plans/1297-card-role-contract-site-styles-own-card-surfaces/decisions.md`
+* §0.7 and "Phase 2.4".
+*/
+const groundedPracticeCardSystem = { variants: [
+	{
+		id: "default",
+		name: "Default",
+		enabled: true,
+		priority: 1,
+		role: "default",
+		background: {
+			type: "solid",
+			colorToken: "surface"
+		},
+		foregroundToken: "text",
+		spacing: "comfortable",
+		corners: "soft",
+		shadow: {
+			elevation: "none",
+			softness: null,
+			position: "bottom"
+		},
+		border: {
+			widthClass: "border",
+			colorToken: "border"
+		}
+	},
+	{
+		id: "alternative",
+		name: "Statement",
+		enabled: true,
+		priority: 2,
+		role: "alternative",
+		background: {
+			type: "solid",
+			colorToken: "surfaceAlt"
+		},
+		foregroundToken: "text",
+		spacing: "comfortable",
+		corners: "soft",
+		shadow: {
+			elevation: "low",
+			softness: null,
+			position: "bottom"
+		},
+		border: {
+			widthClass: "border",
+			colorToken: "border"
+		}
+	},
+	{
+		id: "open",
+		name: "Open",
+		enabled: true,
+		priority: 3,
+		role: "open",
+		background: {
+			type: "solid",
+			colorToken: "surfaceAlt"
+		},
+		foregroundToken: "text",
+		spacing: {
+			block: "comfortable",
+			inline: "comfortable"
+		},
+		corners: "square",
+		shadow: {
+			elevation: "none",
+			softness: null,
+			position: "bottom"
+		},
+		decorations: [{
+			edge: "top",
+			colorToken: "accent",
+			width: "thin",
+			length: "full"
+		}]
+	}
+] };
+/**
 * Original Joy: warm, flat, generously rounded cards on the dark clay ground.
 * `default` is a quiet brown surface card with cream text; `alternative` is a
 * burnt-orange statement card for sections that should pop. Both flat (the
@@ -7080,6 +7536,7 @@ const originalJoyCardSystem = { variants: [{
 	name: "Default",
 	enabled: true,
 	priority: 1,
+	role: "default",
 	background: {
 		type: "solid",
 		colorToken: "surface"
@@ -7097,6 +7554,7 @@ const originalJoyCardSystem = { variants: [{
 	name: "Statement",
 	enabled: true,
 	priority: 2,
+	role: "alternative",
 	background: {
 		type: "solid",
 		colorToken: "primary"
@@ -7721,16 +8179,7 @@ const generatedDesignOptionCatalog = {
 		"hero-image"
 	],
 	contentFrames: generatedContentFrames,
-	itemSurfaces: [
-		"none",
-		"default",
-		"flat",
-		"outlined",
-		"raised",
-		"inset",
-		"editorial",
-		"color-blocked"
-	],
+	cardRoles: cardRoleValues,
 	transitions: [
 		"none",
 		"soft-fade-short",
@@ -7747,7 +8196,7 @@ const userDesignOptionCatalog = {
 	source: "user",
 	sectionSurfaces: generatedDesignOptionCatalog.sectionSurfaces,
 	contentFrames: userContentFrames,
-	itemSurfaces: generatedDesignOptionCatalog.itemSurfaces,
+	cardRoles: generatedDesignOptionCatalog.cardRoles,
 	transitions: [
 		...generatedDesignOptionCatalog.transitions,
 		"soft-fade-expansive",
@@ -7763,7 +8212,7 @@ const userDesignOptionCatalog = {
 	emphases: generatedDesignOptionCatalog.emphases,
 	detachedCustom: false
 };
-userDesignOptionCatalog.sectionSurfaces, userDesignOptionCatalog.contentFrames, userDesignOptionCatalog.itemSurfaces, userDesignOptionCatalog.transitions, userDesignOptionCatalog.emphases;
+userDesignOptionCatalog.sectionSurfaces, userDesignOptionCatalog.contentFrames, userDesignOptionCatalog.cardRoles, userDesignOptionCatalog.transitions, userDesignOptionCatalog.emphases;
 //#endregion
 //#region ../theme-core/src/site-styles/siteStyleTypography.ts
 const modernSansTypography = {
@@ -8218,6 +8667,8 @@ function defaultTypographyForRecipe(recipe) {
 		case "classic-serif": return classicSerifTypography;
 	}
 }
+//#endregion
+//#region ../theme-core/src/site-styles/designState.ts
 const designResolutionPolicySchema = z.enum([
 	"generated",
 	"user",
@@ -8226,108 +8677,6 @@ const designResolutionPolicySchema = z.enum([
 ]);
 const runtimeStyleFieldNameSchema = z.enum(themeV2RuntimeStyleFieldNames);
 const nonEmptyRuntimeStyleFieldNamesSchema = z.array(runtimeStyleFieldNameSchema).min(1).transform((fields) => [fields[0], ...fields.slice(1)]);
-const heroLegibilityStrategySchema = z.enum([
-	"none",
-	"scrim-gradient",
-	"solid-panel"
-]);
-const heroCompositionIntentSchema = z.enum(["center", "bottom-left"]);
-const heroTypographyScaleIntentSchema = z.enum([
-	"quiet",
-	"editorial",
-	"display",
-	"poster"
-]);
-const sectionHeightIntentSchema = z.enum([
-	"default",
-	"banner",
-	"hero",
-	"immersive"
-]);
-const imageSurfaceTreatmentIntensitySchema = z.enum([
-	"soft",
-	"balanced",
-	"strong"
-]);
-const imageSurfaceMotionSchema = z.enum(["static", "fixed-frame"]);
-const imageSurfaceTreatmentSchema = z.discriminatedUnion("kind", [
-	z.object({ kind: z.literal("none") }).strict(),
-	z.object({
-		kind: z.literal("brand-scrim"),
-		token: z.enum([
-			"primary",
-			"secondary",
-			"accent"
-		]),
-		intensity: imageSurfaceTreatmentIntensitySchema.optional()
-	}).strict(),
-	z.object({
-		kind: z.literal("brand-wash"),
-		token: z.enum([
-			"primary",
-			"secondary",
-			"accent"
-		]),
-		intensity: imageSurfaceTreatmentIntensitySchema.optional()
-	}).strict(),
-	z.object({
-		kind: z.literal("neutral-scrim"),
-		intensity: imageSurfaceTreatmentIntensitySchema.optional()
-	}).strict(),
-	z.object({
-		kind: z.literal("neutral-wash"),
-		intensity: imageSurfaceTreatmentIntensitySchema.optional()
-	}).strict(),
-	z.object({
-		kind: z.literal("solid-panel"),
-		intensity: imageSurfaceTreatmentIntensitySchema.optional()
-	}).strict()
-]);
-const testimonialCardTreatmentSchema = z.enum(["default", "accent-quote"]);
-const tileTreatmentSchema = z.enum(tileTreatmentValues);
-const eventListTreatmentSchema = z.enum(eventListTreatmentValues);
-const eyebrowTreatmentSchema = z.enum(eyebrowTreatmentValues);
-function uniqueNonEmpty(values) {
-	const uniqueValues = [...new Set(values)];
-	const firstValue = uniqueValues[0];
-	if (!firstValue) throw new Error("Expected at least one Theme V2 design state option.");
-	return [firstValue, ...uniqueValues.slice(1)];
-}
-const userPanelTreatments = uniqueNonEmpty(userDesignOptionCatalog.contentFrames.filter((frame) => frame.kind === "panel").map((frame) => frame.treatment));
-const userFlushTreatments = uniqueNonEmpty(userDesignOptionCatalog.contentFrames.filter((frame) => frame.kind === "flush-panel").map((frame) => frame.treatment));
-const userFlushBleeds = uniqueNonEmpty(userDesignOptionCatalog.contentFrames.filter((frame) => frame.kind === "flush-panel").map((frame) => frame.bleed));
-const contentFrameIntentSchema = z.discriminatedUnion("kind", [
-	z.object({ kind: z.literal("plain") }).strict(),
-	z.object({
-		kind: z.literal("panel"),
-		treatment: z.enum(userPanelTreatments)
-	}).strict(),
-	z.object({
-		kind: z.literal("flush-panel"),
-		treatment: z.enum(userFlushTreatments),
-		bleed: z.enum(userFlushBleeds)
-	}).strict()
-]);
-const blockDesignPlanSchema = z.object({
-	blockId: z.string().min(1).transform(asDesignBlockId),
-	blockKind: z.string().min(1),
-	purpose: z.string().min(1),
-	sectionSurface: z.enum(userDesignOptionCatalog.sectionSurfaces),
-	contentFrame: contentFrameIntentSchema,
-	itemSurface: z.enum(userDesignOptionCatalog.itemSurfaces),
-	transitionAfter: z.enum(userDesignOptionCatalog.transitions),
-	emphasis: z.enum(userDesignOptionCatalog.emphases),
-	sectionHeight: sectionHeightIntentSchema.optional(),
-	heroLegibility: heroLegibilityStrategySchema.optional(),
-	heroComposition: heroCompositionIntentSchema.optional(),
-	heroTypographyScale: heroTypographyScaleIntentSchema.optional(),
-	imageSurfaceTreatment: imageSurfaceTreatmentSchema.optional(),
-	imageSurfaceMotion: imageSurfaceMotionSchema.optional(),
-	testimonialCardTreatment: testimonialCardTreatmentSchema.optional(),
-	tileTreatment: tileTreatmentSchema.optional(),
-	eventListTreatment: eventListTreatmentSchema.optional(),
-	eyebrowTreatment: eyebrowTreatmentSchema.optional()
-}).strict();
 const styleAuthoritySchema = z.discriminatedUnion("kind", [
 	z.object({
 		kind: z.literal("theme-v2"),
@@ -8346,22 +8695,12 @@ const styleAuthoritySchema = z.discriminatedUnion("kind", [
 		reason: z.literal("detached-custom-runtime-fields")
 	}).strict()
 ]);
-const blockRuntimeStyleAuthoritySchema = z.object({
+z.object({
 	unit: z.literal("block-runtime-fields"),
 	blockId: z.string().min(1).transform(asDesignBlockId),
 	fields: nonEmptyRuntimeStyleFieldNamesSchema,
 	authority: styleAuthoritySchema
 }).strict();
-z.object({
-	schemaVersion: z.literal(1),
-	siteStyleId: z.string().min(1).transform(asSiteStyleId),
-	templateId: z.string().min(1).transform(asDesignSystemTemplateId),
-	templateVersion: z.number().int().nonnegative(),
-	resolverVersion: z.number().int().nonnegative(),
-	rhythmPresetId: z.string().min(1),
-	blocks: z.array(blockDesignPlanSchema),
-	styleAuthorities: z.array(blockRuntimeStyleAuthoritySchema)
-}).strict();
 //#endregion
 //#region ../theme-core/src/site-styles/sectionTransitions.ts
 function boundaryRuntimeMetrics(family, size, heightExpression) {
@@ -8488,61 +8827,7 @@ const defaultComponentRuntimeRules = defineComponentRuntimeRules({
 		spacing: "none",
 		rounded: "none",
 		raised: false
-	} },
-	itemSurfaces: {
-		none: null,
-		default: {
-			spacing: "medium",
-			rounded: "lg",
-			raised: false
-		},
-		flat: {
-			spacing: "medium",
-			rounded: "lg",
-			raised: false
-		},
-		outlined: {
-			spacing: "medium",
-			rounded: "lg",
-			raised: false,
-			border: {
-				enabled: true,
-				width: "1",
-				colorToken: "border"
-			}
-		},
-		raised: {
-			spacing: "medium",
-			rounded: "xl",
-			raised: true
-		},
-		inset: {
-			treatment: "soft-panel",
-			spacing: "comfortable",
-			rounded: "xl",
-			raised: false,
-			border: { enabled: false },
-			background: {
-				type: "color",
-				color: "surfaceAlt",
-				textColor: "text"
-			}
-		},
-		editorial: {
-			treatment: "editorial-rule",
-			spacing: "none",
-			rounded: "none",
-			raised: false,
-			border: { enabled: false }
-		},
-		"color-blocked": {
-			treatment: "color-blocked",
-			spacing: "spacious",
-			rounded: "2xl",
-			raised: false,
-			border: { enabled: false }
-		}
-	}
+	} }
 });
 function uniformSectionForeground(token) {
 	return {
@@ -8608,36 +8893,7 @@ function componentRuntimeRulesForTokenRecipes(recipes) {
 				rounded: recipes.radius === "square" ? "none" : cornerTreatment
 			}
 		},
-		flushFrames: defaultComponentRuntimeRules.flushFrames,
-		itemSurfaces: {
-			none: null,
-			default: {
-				...defaultComponentRuntimeRules.itemSurfaces.default,
-				rounded: cornerTreatment
-			},
-			flat: {
-				...defaultComponentRuntimeRules.itemSurfaces.flat,
-				rounded: cornerTreatment
-			},
-			outlined: {
-				...defaultComponentRuntimeRules.itemSurfaces.outlined,
-				rounded: cornerTreatment
-			},
-			raised: {
-				...defaultComponentRuntimeRules.itemSurfaces.raised,
-				rounded: cornerTreatment,
-				raised
-			},
-			inset: {
-				...defaultComponentRuntimeRules.itemSurfaces.inset,
-				rounded: cornerTreatment
-			},
-			editorial: defaultComponentRuntimeRules.itemSurfaces.editorial,
-			"color-blocked": {
-				...defaultComponentRuntimeRules.itemSurfaces["color-blocked"],
-				rounded: cornerTreatment
-			}
-		}
+		flushFrames: defaultComponentRuntimeRules.flushFrames
 	});
 }
 const kirtanOrnateDesignRuntimeRules = defineDesignRuntimeRules({
@@ -9087,7 +9343,6 @@ function defineCuratedSiteStyle(input) {
 			compositionBudget: input.compositionBudget,
 			supportedSectionSurfaces: generatedDesignOptionCatalog.sectionSurfaces,
 			supportedContentFrames: input.supportedContentFrames ?? generatedContentFrameKinds,
-			supportedItemSurfaces: input.supportedItemSurfaces ?? generatedDesignOptionCatalog.itemSurfaces,
 			supportedTransitions: generatedDesignOptionCatalog.transitions
 		},
 		headingDecoration: input.headingDecoration ?? noHeadingDecoration,
@@ -10168,6 +10423,7 @@ const curatedSiteStyles = [
 		name: "Grounded Practice",
 		themeOverrides: {
 			accordions: editorialDividedAccordionSystem,
+			cards: groundedPracticeCardSystem,
 			testimonialQuote: serifDisplayQuote
 		},
 		description: "Quiet, grounded editorial design for practitioner-led services, recurring classes, and thoughtful one-to-one work.",
@@ -10222,7 +10478,8 @@ const curatedSiteStyles = [
 			"feature-cards-soft-panels",
 			"events-lined-panel",
 			"testimonials-non-carded",
-			"faq-base-accordion"
+			"faq-base-accordion",
+			"booking-brand-band"
 		],
 		recommendedFooterLookIds: ["footer-links-quiet"],
 		buttonStyleChoices: [
@@ -10265,6 +10522,7 @@ const CORNER_MAP = {
 * Creates scoped CSS classes for:
 * - .status-error, .status-success, .status-warning, .status-info, .status-muted (text colors)
 * - .alert, .alert-error, .alert-success, .alert-warning, .alert-info (styled containers)
+* - .feedback-note, .feedback-note-* (the "field-note" feedback treatment)
 * - .required-marker (required field indicator)
 * - .button-link (text-styled button)
 *
@@ -10311,6 +10569,47 @@ ${root} .alert-info {
   background-color: rgba(var(--tb-info), 0.1);
   color: rgb(var(--tb-info));
 }`);
+	cssBlocks.push(`/* Field-note feedback treatment */
+${root} .feedback-note {
+  --tb-feedback-note-rule: currentColor;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  column-gap: 0.6875rem;
+  margin-top: 0.875rem;
+  font-size: 0.875rem;
+  /* Deliberately looser than .rb-caption's 1.25rem: validation notes wrap. */
+  line-height: 1.5;
+  color: ${surfaceForegroundValue("text")};
+}
+
+${root} .feedback-note::before {
+  content: '';
+  grid-column: 1;
+  grid-row: 1;
+  align-self: start;
+  width: 1.375rem;
+  height: 2px;
+  margin-top: 0.62em;
+  background-color: var(--tb-feedback-note-rule);
+}
+
+${root} .feedback-note > * {
+  grid-column: 2;
+  margin: 0;
+}
+
+${root} .feedback-note p {
+  margin: 0;
+}
+
+${root} .feedback-note p + p {
+  margin-top: 0.25rem;
+}
+
+${root} .feedback-note[data-feedback-tone="error"] { --tb-feedback-note-rule: rgb(var(--tb-accent)); }
+${root} .feedback-note[data-feedback-tone="warning"] { --tb-feedback-note-rule: rgb(var(--tb-warning)); }
+${root} .feedback-note[data-feedback-tone="success"] { --tb-feedback-note-rule: rgb(var(--tb-success)); }
+${root} .feedback-note[data-feedback-tone="info"] { --tb-feedback-note-rule: rgb(var(--tb-info)); }`);
 	cssBlocks.push(`/* Required field indicator */
 ${root} .required-marker {
   color: rgb(var(--tb-destructive));
@@ -14122,7 +14421,7 @@ const containerResponsiveThemeCss = `/*
     overflow-anchor: none;
   }
 
-  /* Base padding for horizontal variants (classic, transparent) */
+  /* Base padding for horizontal variants (classic) */
   :where(.theme-scope) .rb-header-layout {
     padding-top: 1rem;
     padding-bottom: 1rem;
@@ -14683,6 +14982,127 @@ const containerResponsiveThemeCss = `/*
   margin-inline: 0;
 }
 
+/* The panel paints its own opaque surface, so it also has to break the button
+ * colour contract it inherits. An enclosing section that sits on a brand band
+ * publishes \`--rb-action-*\` variables resolved against *that* band — on Anna's
+ * therapy page a ghost primary: transparent background, white label. Those
+ * variables inherit, so without this reset a Continue button inside the light
+ * form panel renders white-on-white and only appears on hover.
+ *
+ * Resetting to \`initial\` sends each button back to the generated fallback in
+ * its own rule (\`var(--rb-action-…, rgb(var(--tb-primary)))\`), which is the
+ * theme's standard button resolved against a normal surface — correct here,
+ * because this panel *is* a normal surface.
+ *
+ * Mirrors \`contextualButtonSurfaceResetStyles()\` in theme-core/buttons; the
+ * pairing is pinned by registration-surface-action-reset.test.ts. */
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-reg-surface {
+  --rb-action-primary-base-background-color: initial;
+  --rb-action-primary-base-background-image: initial;
+  --rb-action-primary-base-color: initial;
+  --rb-action-primary-hover-background-color: initial;
+  --rb-action-primary-hover-background-image: initial;
+  --rb-action-primary-hover-color: initial;
+  --rb-action-primary-focus-background-color: initial;
+  --rb-action-primary-focus-background-image: initial;
+  --rb-action-primary-focus-color: initial;
+  --rb-action-primary-active-background-color: initial;
+  --rb-action-primary-active-background-image: initial;
+  --rb-action-primary-active-color: initial;
+  --rb-action-primary-disabled-background-color: initial;
+  --rb-action-primary-disabled-background-image: initial;
+  --rb-action-primary-disabled-color: initial;
+  --rb-action-primary-base-outline: initial;
+  --rb-action-primary-base-outline-offset: initial;
+  --rb-action-primary-focus-outline: initial;
+  --rb-action-primary-focus-outline-offset: initial;
+  --rb-action-primary-focus-box-shadow: initial;
+
+  --rb-action-secondary-base-background-color: initial;
+  --rb-action-secondary-base-background-image: initial;
+  --rb-action-secondary-base-color: initial;
+  --rb-action-secondary-hover-background-color: initial;
+  --rb-action-secondary-hover-background-image: initial;
+  --rb-action-secondary-hover-color: initial;
+  --rb-action-secondary-focus-background-color: initial;
+  --rb-action-secondary-focus-background-image: initial;
+  --rb-action-secondary-focus-color: initial;
+  --rb-action-secondary-active-background-color: initial;
+  --rb-action-secondary-active-background-image: initial;
+  --rb-action-secondary-active-color: initial;
+  --rb-action-secondary-disabled-background-color: initial;
+  --rb-action-secondary-disabled-background-image: initial;
+  --rb-action-secondary-disabled-color: initial;
+  --rb-action-secondary-base-outline: initial;
+  --rb-action-secondary-base-outline-offset: initial;
+  --rb-action-secondary-focus-outline: initial;
+  --rb-action-secondary-focus-outline-offset: initial;
+  --rb-action-secondary-focus-box-shadow: initial;
+
+  --rb-action-outline-base-background-color: initial;
+  --rb-action-outline-base-background-image: initial;
+  --rb-action-outline-base-color: initial;
+  --rb-action-outline-hover-background-color: initial;
+  --rb-action-outline-hover-background-image: initial;
+  --rb-action-outline-hover-color: initial;
+  --rb-action-outline-focus-background-color: initial;
+  --rb-action-outline-focus-background-image: initial;
+  --rb-action-outline-focus-color: initial;
+  --rb-action-outline-active-background-color: initial;
+  --rb-action-outline-active-background-image: initial;
+  --rb-action-outline-active-color: initial;
+  --rb-action-outline-disabled-background-color: initial;
+  --rb-action-outline-disabled-background-image: initial;
+  --rb-action-outline-disabled-color: initial;
+  --rb-action-outline-base-outline: initial;
+  --rb-action-outline-base-outline-offset: initial;
+  --rb-action-outline-focus-outline: initial;
+  --rb-action-outline-focus-outline-offset: initial;
+  --rb-action-outline-focus-box-shadow: initial;
+
+  --rb-action-ghost-base-background-color: initial;
+  --rb-action-ghost-base-background-image: initial;
+  --rb-action-ghost-base-color: initial;
+  --rb-action-ghost-hover-background-color: initial;
+  --rb-action-ghost-hover-background-image: initial;
+  --rb-action-ghost-hover-color: initial;
+  --rb-action-ghost-focus-background-color: initial;
+  --rb-action-ghost-focus-background-image: initial;
+  --rb-action-ghost-focus-color: initial;
+  --rb-action-ghost-active-background-color: initial;
+  --rb-action-ghost-active-background-image: initial;
+  --rb-action-ghost-active-color: initial;
+  --rb-action-ghost-disabled-background-color: initial;
+  --rb-action-ghost-disabled-background-image: initial;
+  --rb-action-ghost-disabled-color: initial;
+  --rb-action-ghost-base-outline: initial;
+  --rb-action-ghost-base-outline-offset: initial;
+  --rb-action-ghost-focus-outline: initial;
+  --rb-action-ghost-focus-outline-offset: initial;
+  --rb-action-ghost-focus-box-shadow: initial;
+
+  --rb-action-accent-base-background-color: initial;
+  --rb-action-accent-base-background-image: initial;
+  --rb-action-accent-base-color: initial;
+  --rb-action-accent-hover-background-color: initial;
+  --rb-action-accent-hover-background-image: initial;
+  --rb-action-accent-hover-color: initial;
+  --rb-action-accent-focus-background-color: initial;
+  --rb-action-accent-focus-background-image: initial;
+  --rb-action-accent-focus-color: initial;
+  --rb-action-accent-active-background-color: initial;
+  --rb-action-accent-active-background-image: initial;
+  --rb-action-accent-active-color: initial;
+  --rb-action-accent-disabled-background-color: initial;
+  --rb-action-accent-disabled-background-image: initial;
+  --rb-action-accent-disabled-color: initial;
+  --rb-action-accent-base-outline: initial;
+  --rb-action-accent-base-outline-offset: initial;
+  --rb-action-accent-focus-outline: initial;
+  --rb-action-accent-focus-outline-offset: initial;
+  --rb-action-accent-focus-box-shadow: initial;
+}
+
 /* Selectable option card */
 :where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-option-card {
   position: relative;
@@ -20348,13 +20768,6 @@ const containerResponsiveThemeCss = `/*
   border-radius: var(--rb-block-radius);
 }
 
-:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonial-card.rb-card-treatment-accent-quote {
-  border: 0;
-  border-left: 5px solid rgb(var(--tb-secondary));
-  border-radius: 0 calc(var(--rb-block-radius) * 3) 0 0;
-  color: rgb(var(--tb-primaryForeground));
-}
-
 :where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonial-quote {
   display: var(--rb-testimonial-quote-display, block);
   font-family: var(--rb-testimonial-quote-font, inherit);
@@ -20365,54 +20778,6 @@ const containerResponsiveThemeCss = `/*
   color: var(--rb-testimonial-quote-color, rgb(var(--tb-primary)));
 }
 
-:where(.theme-scope) :where([data-block="testimonials"]) .rb-card-treatment-accent-quote .rb-testimonial-quote {
-  color: rgb(var(--tb-secondary));
-  font-size: calc(var(--rb-testimonial-quote-size) * 1.25);
-  opacity: 1;
-}
-
-/* Open editorial testimonial card: boxless, with a hairline rule before the
- * attribution, an accent ring on the avatar, and comfortable prose. The quote
- * mark itself is owned by the site-style quote treatment (see the
- * --rb-testimonial-quote-* vars), not by these rules.
- *
- * \`editorial-open\` is the current non-carded look; \`editorial-serif-quote\` is
- * retained for content saved before the decomposition. */
-:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonial-card.rb-card-treatment-editorial-open,
-:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonial-card.rb-card-treatment-editorial-serif-quote {
-  background: transparent;
-  border: 0;
-  border-radius: 0;
-  padding: 0.25rem clamp(0.5rem, 1.5vw, 1.5rem);
-}
-
-/* styledCard always renders an inner white rb-bg-surface fill layer; a boxless
- * card must clear it so the section band shows through (otherwise: white box). */
-:where(.theme-scope) :where([data-block="testimonials"]) .rb-card-treatment-editorial-open > .rb-bg-surface,
-:where(.theme-scope) :where([data-block="testimonials"]) .rb-card-treatment-editorial-serif-quote > .rb-bg-surface {
-  background: transparent;
-}
-
-:where(.theme-scope) :where([data-block="testimonials"]) .rb-card-treatment-editorial-open .rb-prose,
-:where(.theme-scope) :where([data-block="testimonials"]) .rb-card-treatment-editorial-serif-quote .rb-prose {
-  font-size: 1.0625rem;
-  line-height: 1.7;
-}
-
-:where(.theme-scope) :where([data-block="testimonials"]) .rb-card-treatment-editorial-open .rb-testimonial-attribution,
-:where(.theme-scope) :where([data-block="testimonials"]) .rb-card-treatment-editorial-serif-quote .rb-testimonial-attribution {
-  margin-top: 1.25rem;
-  padding-top: 1.25rem;
-  border-top: 1px solid rgba(var(--tb-border), 0.75);
-}
-
-:where(.theme-scope) :where([data-block="testimonials"]) .rb-card-treatment-editorial-open .rb-testimonial-avatar,
-:where(.theme-scope) :where([data-block="testimonials"]) .rb-card-treatment-editorial-serif-quote .rb-testimonial-avatar {
-  box-shadow:
-    0 0 0 2px rgb(var(--tb-surface)),
-    0 0 0 4px rgba(var(--tb-primary), 0.3);
-}
-
 
 /* Split grid: title column + cards. On desktop the title takes one quarter and
  * the cards fill the remaining three quarters (so title + 3 cards each read as
@@ -22871,287 +23236,6 @@ const containerResponsiveThemeCss = `/*
   display: none;
 }
 
-/* =============================================================================
- * Shared: Card treatments
- *
- * Visual treatments referenced from \`_cardStyles.treatment\` (see
- * cardStylesOverrideSchema). Class names are emitted by the boxStyles
- * transform in @riverbankcms/blocks.
- *
- * Also contains feature-card media/padding behaviour shared by all looks:
- * - card images bleed to the card edges (flush photo tops)
- * - card-level padding replaces the content stack's fallback padding so the
- *   two never stack up
- * ============================================================================= */
-
-/* --- Feature card media + padding behaviour (all looks) -------------------- */
-
-/*
- * When a look gives the card real padding (rb-container-pad-*), the image
- * bleeds to the card edges and the inner content stack drops its fallback
- * padding so insets don't double up.
- */
-:where(.theme-scope) .rb-feature-card[class*="rb-container-pad-"]:not(.rb-container-pad-none) > .rb-feature-card-media-frame {
-  width: calc(100% + 2 * var(--rb-card-pad, 0rem));
-  max-width: none;
-  margin: calc(-1 * var(--rb-card-pad, 0rem)) calc(-1 * var(--rb-card-pad, 0rem)) 0;
-}
-
-:where(.theme-scope) .rb-feature-card[class*="rb-container-pad-"]:not(.rb-container-pad-none) > .rb-feature-card-media-frame + .rb-feature-card-content {
-  margin-top: 1.4rem;
-}
-
-:where(.theme-scope) .rb-feature-card[class*="rb-container-pad-"]:not(.rb-container-pad-none) > .rb-feature-card-content {
-  padding: 0;
-}
-
-/* --- Soft panel ------------------------------------------------------------ */
-
-:where(.theme-scope) .rb-card-treatment-soft-panel {
-  transition: transform 250ms ease, box-shadow 250ms ease;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  :where(.theme-scope) .rb-card-treatment-soft-panel:hover {
-    transform: translateY(-3px);
-    box-shadow: 0 0.875rem 1.875rem rgba(var(--tb-shadow, 0 0 0), 0.1);
-  }
-}
-
-:where(.theme-scope) .rb-card-treatment-soft-panel .cta-row .button-ghost {
-  padding-inline: 0;
-}
-
-/* --- Editorial rule --------------------------------------------------------- */
-
-/*
- * Boxless open column: no background, no border box, a short brand rule
- * sitting on a full-width hairline at the top of the column.
- */
-:where(.theme-scope) .rb-card-treatment-editorial-rule {
-  margin-top: 1rem;
-  border-top: 1px solid
-    color-mix(in oklab, rgb(var(--tb-border, 229 231 235)), transparent 25%);
-}
-
-:where(.theme-scope) .rb-card-treatment-editorial-rule > .rb-bg-surface {
-  background: transparent;
-}
-
-:where(.theme-scope) .rb-card-treatment-editorial-rule::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 2.75rem;
-  height: 2px;
-  background: rgb(var(--tb-primary, 0 0 0));
-}
-
-:where(.theme-scope) .rb-card-treatment-editorial-rule > .rb-feature-card-media-frame {
-  margin-top: 1.6rem;
-  border-radius: calc(var(--rb-block-radius, 0.75rem) * 0.5);
-}
-
-:where(.theme-scope) .rb-feature-card > .rb-bg-surface,
-:where(.theme-scope) .rb-feature-card > .rb-feature-card-media-frame {
-  border-start-start-radius: inherit;
-  border-start-end-radius: inherit;
-}
-
-/* --- Editorial diptych + pathways ----------------------------------------- */
-
-:where(.theme-scope) .rb-feature-cards-heading--editorial {
-  margin-inline: 0;
-  text-align: left;
-}
-
-:where(.theme-scope) .rb-feature-cards-eyebrow {
-  margin: 0;
-  color: rgb(var(--tb-accent));
-  font-size: 0.72rem;
-  font-weight: 600;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
-}
-
-:where(.theme-scope) .rb-feature-cards-grid--editorial-diptych {
-  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
-  align-items: stretch;
-}
-
-:where(.theme-scope) .rb-feature-cards-grid--editorial-pathways {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  align-items: start;
-}
-
-:where(.theme-scope) .rb-feature-cards-grid:is(
-  .rb-feature-cards-grid--editorial-diptych,
-  .rb-feature-cards-grid--editorial-pathways
-) .rb-feature-card {
-  border: 0;
-  box-shadow: none;
-  height: auto;
-  min-width: 0;
-}
-
-:where(.theme-scope) .rb-feature-cards-grid:is(
-  .rb-feature-cards-grid--editorial-diptych,
-  .rb-feature-cards-grid--editorial-pathways
-) .rb-feature-card[data-surface-role="open"] > .rb-bg-surface {
-  background: transparent;
-}
-
-:where(.theme-scope) .rb-feature-cards-grid:is(
-  .rb-feature-cards-grid--editorial-diptych,
-  .rb-feature-cards-grid--editorial-pathways
-) .rb-feature-card[data-surface-role="open"] > .rb-feature-card-content {
-  padding-inline: 0;
-}
-
-:where(.theme-scope) .rb-feature-cards-grid--editorial-pathways .rb-feature-card > .rb-bg-surface {
-  background: transparent;
-}
-
-:where(.theme-scope) .rb-feature-cards-grid--editorial-pathways .rb-feature-card > .rb-feature-card-content {
-  padding-inline: 0;
-}
-
-:where(.theme-scope) .rb-feature-cards-grid--editorial-diptych .rb-feature-card[data-surface-role="panel"] {
-  color: rgb(var(--tb-onPrimary));
-  --rb-surface-text-color: rgb(var(--tb-onPrimary));
-  --rb-surface-heading-color: rgb(var(--tb-onPrimary));
-  --rb-surface-link-color: rgb(var(--tb-onPrimary));
-  --rb-surface-supporting-color: color-mix(in oklab, rgb(var(--tb-onPrimary)), transparent 18%);
-}
-
-:where(.theme-scope) .rb-feature-cards-grid--editorial-diptych .rb-feature-card[data-surface-role="panel"] > .rb-bg-surface {
-  background: rgb(var(--tb-primary));
-  border-radius: inherit;
-}
-
-:where(.theme-scope) .rb-feature-cards-grid--editorial-diptych .rb-feature-card[data-surface-role="panel"] > .rb-feature-card-media-frame {
-  width: calc(100% - 2.5rem);
-  margin: 1.25rem 1.25rem 0;
-  border-radius: calc(var(--rb-block-radius, 0.75rem) * 0.55);
-}
-
-:where(.theme-scope) .rb-feature-cards-grid--editorial-pathways .rb-feature-card-content {
-  padding-top: 1.35rem;
-}
-
-@container rb-site (min-width: 768px) {
-@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
-:where(.theme-scope) .rb-feature-cards-grid--editorial-diptych .rb-feature-card[data-surface-role="panel"] {
-    margin-top: clamp(2rem, 5vw, 4.5rem);
-  }
-
-  :where(.theme-scope) .rb-feature-cards-grid--editorial-pathways .rb-feature-card + .rb-feature-card {
-    border-left: 1px solid color-mix(in oklab, currentColor, transparent 82%);
-    padding-left: clamp(1.5rem, 4vw, 4rem);
-  }
-}
-}
-
-@container rb-site (max-width: 767px) {
-@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
-:where(.theme-scope) .rb-feature-cards-grid:is(
-    .rb-feature-cards-grid--editorial-diptych,
-    .rb-feature-cards-grid--editorial-pathways
-  ) {
-    grid-template-columns: minmax(0, 1fr);
-  }
-}
-}
-
-:where(.theme-scope) .rb-card-treatment-editorial-rule > .rb-feature-card-content {
-  padding: 1.6rem 0 0.25rem;
-}
-
-:where(.theme-scope) .rb-card-treatment-editorial-rule .cta-row .button-ghost {
-  padding-inline: 0;
-}
-
-/* --- Colour-blocked --------------------------------------------------------- */
-
-/*
- * Bold, flat cards that each take a different palette colour by position,
- * cycled across the grid, with a staggered vertical offset on wider screens.
- * The background layer (\`.rb-bg-surface\`) is recoloured per card; the card's
- * text colour is set to the matching on-colour so content stays readable.
- */
-:where(.theme-scope) .rb-card-treatment-color-blocked {
-  box-shadow: none;
-}
-
-/* Per-card colour cycle. The \`on*\` colours are always derived by the palette
- * (expandPalette emits onSurface/onSecondary/onPrimary), so no fallback. */
-:where(.theme-scope) .rb-card-treatment-color-blocked:nth-child(3n + 1) > .rb-bg-surface {
-  background: rgb(var(--tb-surface));
-}
-:where(.theme-scope) .rb-card-treatment-color-blocked:nth-child(3n + 1) {
-  background: rgb(var(--tb-surface));
-  color: rgb(var(--tb-onSurface));
-  --rb-surface-text-color: rgb(var(--tb-onSurface));
-  --rb-surface-heading-color: rgb(var(--tb-onSurface));
-  --rb-surface-link-color: rgb(var(--tb-onSurface));
-  --rb-surface-supporting-color: rgb(var(--tb-onSurface));
-}
-
-:where(.theme-scope) .rb-card-treatment-color-blocked:nth-child(3n + 2) > .rb-bg-surface {
-  background: rgb(var(--tb-secondary));
-}
-:where(.theme-scope) .rb-card-treatment-color-blocked:nth-child(3n + 2) {
-  background: rgb(var(--tb-secondary));
-  color: rgb(var(--tb-onSecondary));
-  --rb-surface-text-color: rgb(var(--tb-onSecondary));
-  --rb-surface-heading-color: rgb(var(--tb-onSecondary));
-  --rb-surface-link-color: rgb(var(--tb-onSecondary));
-  --rb-surface-supporting-color: rgb(var(--tb-onSecondary));
-}
-
-:where(.theme-scope) .rb-card-treatment-color-blocked:nth-child(3n + 3) > .rb-bg-surface {
-  background: rgb(var(--tb-primary));
-}
-:where(.theme-scope) .rb-card-treatment-color-blocked:nth-child(3n + 3) {
-  background: rgb(var(--tb-primary));
-  color: rgb(var(--tb-onPrimary));
-  --rb-surface-text-color: rgb(var(--tb-onPrimary));
-  --rb-surface-heading-color: rgb(var(--tb-onPrimary));
-  --rb-surface-link-color: rgb(var(--tb-onPrimary));
-  --rb-surface-supporting-color: rgb(var(--tb-onPrimary));
-}
-
-/* Keep the intended visual hierarchy; the body color itself now resolves via
- * the nearest surface provider instead of requiring an inline override. */
-:where(.theme-scope) .rb-card-treatment-color-blocked .rb-feature-card-body {
-  opacity: 0.9;
-}
-
-/* The number marker defaults to the brand accent, which collides with the
- * primary-coloured card in the cycle. On colour-blocked cards use the card's
- * own on-colour (the palette guarantees it's legible on that background) and a
- * faint tint of it for the badge, so the number always contrasts. */
-:where(.theme-scope) .rb-card-treatment-color-blocked .rb-feature-card-number-zone {
-  color: inherit;
-  background-color: color-mix(in oklab, currentColor, transparent 88%);
-}
-
-/* Staggered offset: drop the middle column on wider screens. Scoped to a 3-up
- * grid (\`.rb-grid-cols-3\`) so 2-/4-column grids don't get a misaligned stagger;
- * the colour cycle still reads as a diagonal at any column count. */
-@container rb-site (min-width: 768px) {
-@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
-:where(.theme-scope) .rb-grid-cols-3 .rb-card-treatment-color-blocked:nth-child(3n + 2) {
-    margin-top: 2.75rem;
-    /* Override the card's \`h-full\` so the grid's stretch shrinks the card by the
-     * margin (a genuinely shorter card) instead of keeping full height and
-     * overflowing the section, which clips the rounded bottom corners. */
-    height: auto;
-  }
-}
-}
-
 :where(.theme-scope) [data-block="intro"][data-block-composition="portrait-bio"][data-block-variant="media-copy"] .rb-intro-media-wrap {
   max-width: min(100%, 24rem);
   margin-inline: auto;
@@ -23661,8 +23745,9 @@ const containerResponsiveThemeCss = `/*
   border-radius: var(--rb-block-radius, 0.75rem);
 }
 
-/* Framed programme: a close-set family of inset cards on a semantic depth
- * section. The itemSurface recipe supplies each complete surface provider. */
+/* Framed programme: a close-set family of cards on a semantic depth section.
+ * The Look asks for the \`alternative\` card role; the site style's card system
+ * supplies the surface. */
 :where(.theme-scope)
   [data-block="feature-cards"][data-block-composition="framed-programme"]
   .rb-feature-cards-grid {
@@ -23695,6 +23780,135 @@ const containerResponsiveThemeCss = `/*
 }
 }
 
+/* --- Feature card media + padding behaviour (all looks) -------------------- */
+
+:where(.theme-scope) .rb-feature-card[class*="rb-container-pad-"]:not(.rb-container-pad-none) > .rb-feature-card-media-frame {
+  width: calc(100% + 2 * var(--rb-card-pad, 0rem));
+  max-width: none;
+  margin: calc(-1 * var(--rb-card-pad, 0rem)) calc(-1 * var(--rb-card-pad, 0rem)) 0;
+}
+
+:where(.theme-scope) .rb-feature-card[class*="rb-container-pad-"]:not(.rb-container-pad-none) > .rb-feature-card-media-frame + .rb-feature-card-content {
+  margin-top: 1.4rem;
+}
+
+:where(.theme-scope) .rb-feature-card[class*="rb-container-pad-"]:not(.rb-container-pad-none) > .rb-feature-card-content {
+  padding: 0;
+}
+
+:where(.theme-scope) .rb-feature-card > .rb-bg-surface,
+:where(.theme-scope) .rb-feature-card > .rb-feature-card-media-frame {
+  border-start-start-radius: inherit;
+  border-start-end-radius: inherit;
+}
+
+/* --- Editorial diptych + pathways ----------------------------------------- */
+
+:where(.theme-scope) .rb-feature-cards-heading--editorial {
+  margin-inline: 0;
+  text-align: left;
+}
+
+:where(.theme-scope) .rb-feature-cards-eyebrow {
+  margin: 0;
+  color: rgb(var(--tb-accent));
+  font-size: 0.72rem;
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+:where(.theme-scope) .rb-feature-cards-grid--editorial-diptych {
+  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
+  align-items: stretch;
+}
+
+:where(.theme-scope) .rb-feature-cards-grid--editorial-pathways {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  align-items: start;
+}
+
+:where(.theme-scope) .rb-feature-cards-grid:is(
+  .rb-feature-cards-grid--editorial-diptych,
+  .rb-feature-cards-grid--editorial-pathways
+) .rb-feature-card {
+  border: 0;
+  box-shadow: none;
+  height: auto;
+  min-width: 0;
+}
+
+:where(.theme-scope) .rb-feature-cards-grid:is(
+  .rb-feature-cards-grid--editorial-diptych,
+  .rb-feature-cards-grid--editorial-pathways
+) .rb-feature-card[data-surface-role="open"] > .rb-bg-surface {
+  background: transparent;
+}
+
+:where(.theme-scope) .rb-feature-cards-grid:is(
+  .rb-feature-cards-grid--editorial-diptych,
+  .rb-feature-cards-grid--editorial-pathways
+) .rb-feature-card[data-surface-role="open"] > .rb-feature-card-content {
+  padding-inline: 0;
+}
+
+:where(.theme-scope) .rb-feature-cards-grid--editorial-pathways .rb-feature-card > .rb-bg-surface {
+  background: transparent;
+}
+
+:where(.theme-scope) .rb-feature-cards-grid--editorial-pathways .rb-feature-card > .rb-feature-card-content {
+  padding-inline: 0;
+}
+
+/* Diptych filled panel: a composition over the \`alternative\` role's surface.
+   The 18% supporting alpha is accepted CSS-side — see issue 1297 mapping-table. */
+:where(.theme-scope) .rb-feature-cards-grid--editorial-diptych .rb-feature-card[data-surface-role="panel"] {
+  color: rgb(var(--tb-onPrimary));
+  --rb-surface-text-color: rgb(var(--tb-onPrimary));
+  --rb-surface-heading-color: rgb(var(--tb-onPrimary));
+  --rb-surface-link-color: rgb(var(--tb-onPrimary));
+  --rb-surface-supporting-color: color-mix(in oklab, rgb(var(--tb-onPrimary)), transparent 18%);
+}
+
+:where(.theme-scope) .rb-feature-cards-grid--editorial-diptych .rb-feature-card[data-surface-role="panel"] > .rb-bg-surface {
+  background: rgb(var(--tb-primary));
+  border-radius: inherit;
+}
+
+:where(.theme-scope) .rb-feature-cards-grid--editorial-diptych .rb-feature-card[data-surface-role="panel"] > .rb-feature-card-media-frame {
+  width: calc(100% - 2.5rem);
+  margin: 1.25rem 1.25rem 0;
+  border-radius: calc(var(--rb-block-radius, 0.75rem) * 0.55);
+}
+
+:where(.theme-scope) .rb-feature-cards-grid--editorial-pathways .rb-feature-card-content {
+  padding-top: 1.35rem;
+}
+
+@container rb-site (min-width: 768px) {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) .rb-feature-cards-grid--editorial-diptych .rb-feature-card[data-surface-role="panel"] {
+    margin-top: clamp(2rem, 5vw, 4.5rem);
+  }
+
+  :where(.theme-scope) .rb-feature-cards-grid--editorial-pathways .rb-feature-card + .rb-feature-card {
+    border-left: 1px solid color-mix(in oklab, currentColor, transparent 82%);
+    padding-left: clamp(1.5rem, 4vw, 4rem);
+  }
+}
+}
+
+@container rb-site (max-width: 767px) {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) .rb-feature-cards-grid:is(
+    .rb-feature-cards-grid--editorial-diptych,
+    .rb-feature-cards-grid--editorial-pathways
+  ) {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+}
+
 /* =============================================================================
  * Offerings Preview composition Looks promoted from the Fran André treatment
  * study. The outer section surface remains independently configurable. These
@@ -24086,6 +24300,51 @@ const containerResponsiveThemeCss = `/*
     .rb-testimonials-fe-col {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
+}
+
+/* Open-editorial testimonials composition, selected by a Look
+ * (\`composition: { kind: 'testimonials', treatment: 'open-editorial' }\`).
+ *
+ * Two jobs. First, *boxless*: \`styledCard\` always renders an opaque
+ * \`.rb-bg-surface\` fill layer, so a testimonial with no card role has to clear
+ * it or it paints a white box on the section band (the same shape
+ * feature-card-compositions.css uses for \`[data-surface-role="open"]\`).
+ * Second, the composition proper: a hairline before the attribution, an accent
+ * ring on the avatar, comfortable prose.
+ *
+ * What is *not* here: whether the testimonial sits in a card (the Look's
+ * \`cardRole\`), how that card looks (the site style's card system), or the quote
+ * mark (the site style's quote treatment, via the --rb-testimonial-quote-* vars
+ * in testimonials.css).
+ *
+ * The block attribute is deliberately outside \`:where()\` so these rules outrank
+ * the card's own utility classes, matching the Look-keyed rules above. */
+:where(.theme-scope) [data-block="testimonials"][data-block-composition="open-editorial"] .rb-testimonial-card {
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  padding: 0.25rem clamp(0.5rem, 1.5vw, 1.5rem);
+}
+
+:where(.theme-scope) [data-block="testimonials"][data-block-composition="open-editorial"] .rb-testimonial-card > .rb-bg-surface {
+  background: transparent;
+}
+
+:where(.theme-scope) [data-block="testimonials"][data-block-composition="open-editorial"] .rb-prose {
+  font-size: 1.0625rem;
+  line-height: 1.7;
+}
+
+:where(.theme-scope) [data-block="testimonials"][data-block-composition="open-editorial"] .rb-testimonial-attribution {
+  margin-top: 1.25rem;
+  padding-top: 1.25rem;
+  border-top: 1px solid rgba(var(--tb-border), 0.75);
+}
+
+:where(.theme-scope) [data-block="testimonials"][data-block-composition="open-editorial"] .rb-testimonial-avatar {
+  box-shadow:
+    0 0 0 2px rgb(var(--tb-surface)),
+    0 0 0 4px rgba(var(--tb-primary), 0.3);
 }`;
 //#endregion
 //#region ../theme-core/src/ThemeScopeCore.tsx
@@ -24580,6 +24839,8 @@ const themeBridgeConfigSchema = z.object({
 		])).optional() })]).optional(),
 		cards: z.union([z.boolean(), z.object({ variants: z.array(z.enum([
 			"default",
+			"alternative",
+			"open",
 			"elevated",
 			"outlined"
 		])).optional() })]).optional(),
@@ -24619,6 +24880,10 @@ const TOKEN_ALIASES = [
 	{
 		source: "destructive",
 		target: "error"
+	},
+	{
+		source: "accent",
+		target: "info"
 	}
 ];
 function hexToRgbChannels(hex) {
@@ -24647,7 +24912,7 @@ function buildThemeBridgeRuntime(config) {
 		themeId,
 		cssVars,
 		buttonCss: shouldGenerateComponent(config.components?.buttons) ? generateButtonsCss(config, corners, shadows) : void 0,
-		cardCss: shouldGenerateComponent(config.components?.cards) ? generateCardsCss(config, corners, shadows) : void 0,
+		cardCss: generateCardsCss(config, corners, shadows),
 		inputCss: shouldGenerateComponent(config.components?.inputs) ? generateInputsCss(corners, shadows) : void 0,
 		statusCss: generateStatusCss({
 			themeId,
@@ -24928,18 +25193,32 @@ function generateButtonsCss(config, corners, shadows) {
 	const tokens = resolveBridgeTokens(config.tokens);
 	return generateButtonCoreCss("sdk", variants, settings, buildBridgeButtonPalette(tokens));
 }
+/**
+* Bridge card CSS, in two halves with different opt-in rules.
+*
+* The `.card-role-*` aliases always emit, from the full default variant set:
+* they are the card contract compiled content renders against, so a consumer
+* who never mentions `components.cards` still gets a working card surface.
+* The named `.card-{id}` classes (and the legacy ids beside them) are a
+* catalogue an SDK site addresses by hand, so they stay opt-in and keep
+* honouring a `variants` allow-list.
+*/
 function generateCardsCss(config, corners, shadows) {
-	let variants = getDefaultCardVariants();
+	const allVariants = getDefaultCardVariants();
 	const cardConfig = config.components?.cards;
-	if (cardConfig !== void 0 && cardConfig !== true && cardConfig !== false && cardConfig.variants) {
-		const requestedIds = new Set(cardConfig.variants);
-		variants = variants.filter((variant) => requestedIds.has(variant.id));
-	}
-	return generateCardCoreCss("sdk", variants, {
+	const settings = {
 		corners,
 		shadow: shadows,
 		borderWidth: "thin"
-	});
+	};
+	const roleAliasCss = generateCardCoreCss("sdk", allVariants, settings, "role-aliases");
+	if (cardConfig === void 0 || cardConfig === false) return roleAliasCss;
+	let namedVariants = allVariants;
+	if (cardConfig !== true && cardConfig.variants) {
+		const requested = new Set(cardConfig.variants);
+		namedVariants = allVariants.filter((variant) => requested.has(variant.id) || variant.role !== void 0 && requested.has(variant.role) || (variant.legacyIds ?? []).some((legacyId) => requested.has(legacyId)));
+	}
+	return [roleAliasCss, generateCardCoreCss("sdk", namedVariants, settings, "named")].filter(Boolean).join("\n\n");
 }
 function generateInputsCss(corners, shadows) {
 	return generateInputCoreCss("sdk", {