npm - @riverbankcms/sdk - Versions diffs - 0.98.0 → 0.99.0 - Mend

@riverbankcms/sdk 0.98.0 → 0.99.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (120) hide show

package/dist/server/components.mjs CHANGED Viewed

@@ -6654,6 +6654,79 @@ var TokenResolver = class {
   }
 };
+// ../theme-core/src/interactive/generateBaseCSS.ts
+var FONT_WEIGHT_MAP = {
+  regular: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700
+};
+function generateBaseInteractiveCSS(options) {
+  const {
+    typography,
+    padding,
+    borderRadius,
+    includeTransition = true,
+    includeFlexCenter = false,
+    borderWidth
+  } = options;
+  const rules = [];
+  if (typography.fontWeight !== void 0) {
+    const weight = typeof typography.fontWeight === "number" ? typography.fontWeight : FONT_WEIGHT_MAP[typography.fontWeight];
+    rules.push(`font-weight: ${weight};`);
+  }
+  if (typography.typography === "heading") {
+    rules.push(`font-family: var(--font-heading);`);
+    rules.push(`letter-spacing: var(--ls-heading);`);
+  } else if (typography.typography === "body") {
+    rules.push(`font-family: var(--font-body);`);
+  }
+  if (typography.italic) {
+    rules.push(`font-style: italic;`);
+  }
+  if (typography.textTransform && typography.textTransform !== "none") {
+    rules.push(`text-transform: ${typography.textTransform};`);
+  }
+  if (padding) {
+    if (borderWidth && borderWidth !== "0px") {
+      const paddingParts = padding.split(" ");
+      const verticalPadding = paddingParts[0] || "0.5rem";
+      const horizontalPadding = paddingParts[1] || paddingParts[0] || "1rem";
+      rules.push(`padding-top: calc(${verticalPadding} - ${borderWidth} - 1px);`);
+      rules.push(`padding-bottom: calc(${verticalPadding} - ${borderWidth} - 1px);`);
+      rules.push(`padding-left: calc(${horizontalPadding} - ${borderWidth});`);
+      rules.push(`padding-right: calc(${horizontalPadding} - ${borderWidth});`);
+    } else {
+      rules.push(`padding: ${padding};`);
+    }
+  }
+  if (borderRadius) {
+    rules.push(`border-radius: ${borderRadius};`);
+  }
+  if (includeTransition) {
+    rules.push(`transition: all 200ms ease;`);
+  }
+  if (includeFlexCenter) {
+    rules.push(`display: inline-flex;`);
+    rules.push(`align-items: center;`);
+    rules.push(`justify-content: center;`);
+    rules.push(`cursor: pointer;`);
+  }
+  return rules;
+}
+function generateInteractiveChildInheritanceCSS(selector) {
+  return `
+${selector} * {
+  font-family: inherit;
+  font-weight: inherit;
+  font-style: inherit;
+  letter-spacing: inherit;
+  text-transform: inherit;
+  color: inherit;
+}
+`;
+}
 // ../theme-core/src/buttons/effects/presets/background.ts
 var darkenBackgroundEffect = {
   id: "darken-background",
@@ -8148,7 +8221,9 @@ function resolveAliasSource(enabled) {
 function variantChunks(variant, global, themeSizes, themeId, tokens, theme) {
   const out = [];
   const variantId = parseButtonVariantIdForCss(variant.id);
-  out.push(variantBaseRule(variant, variantId, global, themeId, tokens, theme));
+  const selector = `:where([data-theme-scope="${themeId}"]) ${themeButtonSelector(variantId)}`;
+  out.push(variantBaseRule(variant, selector, global, tokens, theme));
+  out.push({ raw: generateInteractiveChildInheritanceCSS(selector) });
   const hoverBg = variantHoverBackgroundRule(variant, variantId, global, themeId, tokens);
   if (hoverBg) out.push(hoverBg);
   out.push(variantFocusVisibleRule(variantId, themeId));
@@ -8165,8 +8240,7 @@ function parseButtonVariantIdForCss(value) {
   }
   return variantId;
 }
-function variantBaseRule(variant, variantId, global, themeId, tokens, theme) {
-  const selector = `:where([data-theme-scope="${themeId}"]) ${themeButtonSelector(variantId)}`;
+function variantBaseRule(variant, selector, global, tokens, theme) {
   const decls = [];
   decls.push(["font-weight", String(global.fontWeight)]);
   decls.push(["font-family", resolveFontFamily(global)]);
@@ -8802,15 +8876,16 @@ var joyStamp = defineButtonPersonality({
       // 700, matching the mockup's chunky button labels.
       typography: "heading",
       fontWeight: 700,
+      fontSize: "text-lg",
       borderWidth: 2,
       hoverTransform: "none",
       hoverColor: "none"
     },
     sizes: {
-      sm: { padding: "0.625rem 1.25rem", fontSize: "text-sm" },
-      md: { padding: "0.875rem 1.75rem", fontSize: "text-base" },
-      lg: { padding: "1.125rem 2.25rem", fontSize: "text-lg" },
-      xl: { padding: "1.25rem 2.75rem", fontSize: "text-xl" }
+      sm: { padding: "0.625rem 1.25rem", fontSize: "text-base" },
+      md: { padding: "0.875rem 1.75rem", fontSize: "text-lg" },
+      lg: { padding: "1.125rem 2.25rem", fontSize: "text-xl" },
+      xl: { padding: "1.25rem 2.75rem", fontSize: "text-2xl" }
     },
     variants: [
       {
@@ -9388,6 +9463,20 @@ function generateDefaultCardSystem(theme) {
   };
 }
+// ../theme-core/src/status/contextualColors.ts
+var STATUS_MUTED_COLOR_VAR = "--rb-status-muted-color";
+var DEFAULT_STATUS_MUTED_COLOR = "rgb(var(--tb-mutedText))";
+var SURFACE_MUTED_STATUS_COLOR = "color-mix(in oklab, currentColor, transparent 18%)";
+function statusMutedColorValue() {
+  return `var(${STATUS_MUTED_COLOR_VAR}, ${DEFAULT_STATUS_MUTED_COLOR})`;
+}
+function statusMutedColorDeclaration() {
+  return `color: ${statusMutedColorValue()};`;
+}
+function contextualMutedStatusColorDeclaration(value) {
+  return `${STATUS_MUTED_COLOR_VAR}: ${value}`;
+}
 // ../theme-core/src/cards/generateCardCss.ts
 var PER_CORNER_RADIUS_MAP = {
   square: "0",
@@ -9461,6 +9550,7 @@ function generateVariantCSS(variant, themeId, tokens, theme) {
   if (variant.foregroundToken) {
     rules.push(`color: ${tokens.getColor(variant.foregroundToken)}`);
   }
+  rules.push(contextualMutedStatusColorDeclaration(SURFACE_MUTED_STATUS_COLOR));
   if (variant.accentEdge) {
     const side = ACCENT_EDGE_SIDE_MAP[variant.accentEdge.edge];
     const width = ACCENT_EDGE_WIDTH_MAP[variant.accentEdge.width];
@@ -9719,7 +9809,7 @@ var LABEL_FONT_SIZE_MAP = {
   base: "1rem"
   // 16px
 };
-var FONT_WEIGHT_MAP = {
+var FONT_WEIGHT_MAP2 = {
   regular: "400",
   medium: "500",
   semibold: "600",
@@ -40735,14 +40825,27 @@ function BookingFormSSR({
   return /* @__PURE__ */ jsxs15(
     "div",
     {
-      className: `booking-form-ssr ${className ?? ""}`.trim(),
+      className: `rb-reg-surface booking-form-ssr ${display.state === "missing" ? "" : "ab-shell "}${className ?? ""}`.trim(),
       ...getIslandRootProps("booking-form", blockId),
+      "aria-busy": display.state === "missing" ? void 0 : true,
+      "aria-label": display.state === "missing" ? void 0 : "Loading booking form",
+      role: display.state === "missing" ? void 0 : "status",
       children: [
         /* @__PURE__ */ jsx29(IslandPropsScript, { value: islandProps }),
-        /* @__PURE__ */ jsx29("div", { className: "booking-form-ssr__summary", children: display.state === "missing" ? /* @__PURE__ */ jsx29("p", { className: "booking-form-ssr__error", children: display.message }) : /* @__PURE__ */ jsxs15(Fragment3, { children: [
-          /* @__PURE__ */ jsx29("strong", { children: display.submitLabel }),
-          display.successMessage ? /* @__PURE__ */ jsx29("p", { className: "booking-form-ssr__success", children: display.successMessage }) : null
-        ] }) }),
+        display.state === "missing" ? /* @__PURE__ */ jsx29("div", { className: "alert alert-error", role: "alert", children: /* @__PURE__ */ jsx29("p", { className: "ab-text", children: display.message }) }) : /* @__PURE__ */ jsxs15(Fragment3, { children: [
+          /* @__PURE__ */ jsx29("span", { className: "rb-sr-only", children: "Loading booking form..." }),
+          /* @__PURE__ */ jsxs15("div", { className: "rb-reg-stack", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx29("div", { className: "rb-reg-summary", children: /* @__PURE__ */ jsxs15("div", { className: "rb-reg-stack rb-reg-stack--sm", children: [
+              /* @__PURE__ */ jsx29("div", { className: "rb-shell-line rb-shell-line--md" }),
+              /* @__PURE__ */ jsx29("div", { className: "rb-shell-line rb-shell-line--sm" })
+            ] }) }),
+            /* @__PURE__ */ jsxs15("div", { className: "rb-reg-stack rb-reg-stack--sm", children: [
+              /* @__PURE__ */ jsx29("div", { className: "rb-shell-line rb-shell-line--lg" }),
+              /* @__PURE__ */ jsx29("div", { className: "rb-shell-line rb-shell-line--xs" })
+            ] }),
+            /* @__PURE__ */ jsx29("div", { className: "rb-wizard-actions", children: /* @__PURE__ */ jsx29("div", { className: "ab-shell-button", children: display.submitLabel }) })
+          ] })
+        ] }),
         children
       ]
     }
@@ -43394,20 +43497,38 @@ function EventRegistrationShell({
     "div",
     {
       id: EVENT_REGISTRATION_ANCHOR_ID,
-      className: "er-container er-registration-shell",
+      className: "rb-reg-surface er-container er-registration-shell",
       "aria-busy": "true",
       role: "status",
       children: /* @__PURE__ */ jsxs38("div", { className: "er-payment-layout er-payment-layout--no-sidebar", children: [
         /* @__PURE__ */ jsxs38("div", { className: "er-payment-layout-main", children: [
-          /* @__PURE__ */ jsx54("div", { className: "er-steps-nav er-registration-shell__steps", "aria-hidden": "true", children: /* @__PURE__ */ jsx54("ol", { className: "er-steps", children: display.stepLabels.map((label, index) => {
+          /* @__PURE__ */ jsx54("div", { className: "rb-steps-nav er-steps-nav er-registration-shell__steps", "aria-hidden": "true", children: /* @__PURE__ */ jsx54("ol", { className: "rb-steps er-steps", children: display.stepLabels.map((label, index) => {
             const isActive = index === 0;
-            return /* @__PURE__ */ jsxs38("li", { className: "er-step", children: [
-              /* @__PURE__ */ jsx54("span", { className: cx("er-step-circle", isActive && "er-step-circle--active"), children: index + 1 }),
-              /* @__PURE__ */ jsx54("span", { className: cx("er-step-label", isActive && "er-step-label--active"), children: label }),
-              index < display.stepLabels.length - 1 ? /* @__PURE__ */ jsx54("span", { className: "er-step-connector" }) : null
+            return /* @__PURE__ */ jsxs38("li", { className: "rb-step er-step", children: [
+              /* @__PURE__ */ jsx54(
+                "span",
+                {
+                  className: cx(
+                    "rb-step-circle er-step-circle",
+                    isActive && "rb-step-circle--active er-step-circle--active"
+                  ),
+                  children: index + 1
+                }
+              ),
+              /* @__PURE__ */ jsx54(
+                "span",
+                {
+                  className: cx(
+                    "rb-step-label er-step-label",
+                    isActive && "rb-step-label--active er-step-label--active"
+                  ),
+                  children: label
+                }
+              ),
+              index < display.stepLabels.length - 1 ? /* @__PURE__ */ jsx54("span", { className: "rb-step-connector er-step-connector" }) : null
             ] }, label);
           }) }) }),
-          /* @__PURE__ */ jsxs38("div", { className: "er-stack", children: [
+          /* @__PURE__ */ jsxs38("div", { className: "rb-reg-stack er-stack", children: [
             /* @__PURE__ */ jsxs38("div", { children: [
               /* @__PURE__ */ jsx54("p", { className: "er-registration-shell__eyebrow", children: "Registration" }),
               /* @__PURE__ */ jsx54("h3", { className: "er-title er-registration-shell__title", children: display.titleText }),
@@ -43415,20 +43536,20 @@ function EventRegistrationShell({
             ] }),
             /* @__PURE__ */ jsxs38("div", { className: "er-event-grid er-registration-shell__cards", "aria-hidden": "true", children: [
               /* @__PURE__ */ jsxs38("div", { className: "er-event-card er-registration-shell__card", children: [
-                /* @__PURE__ */ jsx54("div", { className: "er-registration-shell__line er-registration-shell__line--lg" }),
-                /* @__PURE__ */ jsx54("div", { className: "er-registration-shell__line er-registration-shell__line--sm" })
+                /* @__PURE__ */ jsx54("div", { className: "rb-shell-line rb-shell-line--lg er-registration-shell__line er-registration-shell__line--lg" }),
+                /* @__PURE__ */ jsx54("div", { className: "rb-shell-line rb-shell-line--sm er-registration-shell__line er-registration-shell__line--sm" })
               ] }),
               /* @__PURE__ */ jsxs38("div", { className: "er-event-card er-registration-shell__card", children: [
-                /* @__PURE__ */ jsx54("div", { className: "er-registration-shell__line er-registration-shell__line--md" }),
-                /* @__PURE__ */ jsx54("div", { className: "er-registration-shell__line er-registration-shell__line--xs" })
+                /* @__PURE__ */ jsx54("div", { className: "rb-shell-line rb-shell-line--md er-registration-shell__line er-registration-shell__line--md" }),
+                /* @__PURE__ */ jsx54("div", { className: "rb-shell-line rb-shell-line--xs er-registration-shell__line er-registration-shell__line--xs" })
               ] })
             ] })
           ] })
         ] }),
         /* @__PURE__ */ jsx54("div", { className: "er-payment-layout-footer", children: /* @__PURE__ */ jsxs38("div", { className: "er-summary-bar er-registration-shell__summary", "aria-hidden": "true", children: [
           /* @__PURE__ */ jsxs38("div", { className: "er-summary-bar-info", children: [
-            /* @__PURE__ */ jsx54("div", { className: "er-registration-shell__line er-registration-shell__line--md" }),
-            /* @__PURE__ */ jsx54("div", { className: "er-registration-shell__line er-registration-shell__line--xs" })
+            /* @__PURE__ */ jsx54("div", { className: "rb-shell-line rb-shell-line--md er-registration-shell__line er-registration-shell__line--md" }),
+            /* @__PURE__ */ jsx54("div", { className: "rb-shell-line rb-shell-line--xs er-registration-shell__line er-registration-shell__line--xs" })
           ] }),
           /* @__PURE__ */ jsx54("div", { className: "er-registration-shell__button-placeholder", children: display.summaryButtonText })
         ] }) })
@@ -43447,6 +43568,7 @@ function FeedbackMessage({
   tone,
   children,
   className,
+  id,
   title,
   titleClassName,
   bodyClassName,
@@ -43458,6 +43580,7 @@ function FeedbackMessage({
   return /* @__PURE__ */ jsxs39(
     "div",
     {
+      id,
       className,
       "data-feedback-tone": tone,
       role,
@@ -45678,7 +45801,7 @@ function generateInputCss({
   const labelSelector = `${rootSelector} .form-label`;
   const labelRules = [];
   labelRules.push(`color: ${rgbColorValue(inputSystem.label.textColorToken)}`);
-  labelRules.push(`font-weight: ${FONT_WEIGHT_MAP[inputSystem.label.fontWeight]}`);
+  labelRules.push(`font-weight: ${FONT_WEIGHT_MAP2[inputSystem.label.fontWeight]}`);
   labelRules.push(`font-size: ${LABEL_FONT_SIZE_MAP[inputSystem.label.fontSize]}`);
   if (inputSystem.label.textTransform && inputSystem.label.textTransform !== "none") {
     labelRules.push(`text-transform: ${inputSystem.label.textTransform}`);
@@ -45919,67 +46042,6 @@ function generateDefaultInputSystem(theme) {
   };
 }
-// ../theme-core/src/interactive/generateBaseCSS.ts
-var FONT_WEIGHT_MAP2 = {
-  regular: 400,
-  medium: 500,
-  semibold: 600,
-  bold: 700
-};
-function generateBaseInteractiveCSS(options) {
-  const {
-    typography,
-    padding,
-    borderRadius,
-    includeTransition = true,
-    includeFlexCenter = false,
-    borderWidth
-  } = options;
-  const rules = [];
-  if (typography.fontWeight !== void 0) {
-    const weight = typeof typography.fontWeight === "number" ? typography.fontWeight : FONT_WEIGHT_MAP2[typography.fontWeight];
-    rules.push(`font-weight: ${weight};`);
-  }
-  if (typography.typography === "heading") {
-    rules.push(`font-family: var(--font-heading);`);
-    rules.push(`letter-spacing: var(--ls-heading);`);
-  } else if (typography.typography === "body") {
-    rules.push(`font-family: var(--font-body);`);
-  }
-  if (typography.italic) {
-    rules.push(`font-style: italic;`);
-  }
-  if (typography.textTransform && typography.textTransform !== "none") {
-    rules.push(`text-transform: ${typography.textTransform};`);
-  }
-  if (padding) {
-    if (borderWidth && borderWidth !== "0px") {
-      const paddingParts = padding.split(" ");
-      const verticalPadding = paddingParts[0] || "0.5rem";
-      const horizontalPadding = paddingParts[1] || paddingParts[0] || "1rem";
-      rules.push(`padding-top: calc(${verticalPadding} - ${borderWidth} - 1px);`);
-      rules.push(`padding-bottom: calc(${verticalPadding} - ${borderWidth} - 1px);`);
-      rules.push(`padding-left: calc(${horizontalPadding} - ${borderWidth});`);
-      rules.push(`padding-right: calc(${horizontalPadding} - ${borderWidth});`);
-    } else {
-      rules.push(`padding: ${padding};`);
-    }
-  }
-  if (borderRadius) {
-    rules.push(`border-radius: ${borderRadius};`);
-  }
-  if (includeTransition) {
-    rules.push(`transition: all 200ms ease;`);
-  }
-  if (includeFlexCenter) {
-    rules.push(`display: inline-flex;`);
-    rules.push(`align-items: center;`);
-    rules.push(`justify-content: center;`);
-    rules.push(`cursor: pointer;`);
-  }
-  return rules;
-}
 // ../theme-core/src/navigation/generateNavLinkCSS.ts
 function generateNavLinkCSS(options) {
   const { themeId, tokens, theme, style, className } = options;
@@ -46066,14 +46128,7 @@ ${activeSelector} {
 }
 `);
   }
-  cssChunks.push(`
-${selector} * {
-  font-family: inherit;
-  font-weight: inherit;
-  letter-spacing: inherit;
-  color: inherit;
-}
-`);
+  cssChunks.push(generateInteractiveChildInheritanceCSS(selector));
   return cssChunks.join("");
 }
 function buildTextContrastShadow(input) {
@@ -47370,7 +47425,7 @@ ${root} .status-error { color: rgb(var(--tb-destructive)); }
 ${root} .status-success { color: rgb(var(--tb-success)); }
 ${root} .status-warning { color: rgb(var(--tb-warning)); }
 ${root} .status-info { color: rgb(var(--tb-info)); }
-${root} .status-muted { color: rgb(var(--tb-mutedText)); }`);
+${root} .status-muted { ${statusMutedColorDeclaration()} }`);
   cssBlocks.push(`/* Alert containers */
 ${root} .alert {
   padding: 1rem;
@@ -47686,6 +47741,34 @@ ${root} {
   /* Order summary */
   --er-summary-bg: rgba(var(--tb-primary), 0.1);
   --er-summary-border: rgb(var(--tb-border));
+  /* Shared registration-surface mappings (issue 1174).
+     Route the shared --rb-reg-* contract through this block's documented
+     Tier 3 vars so existing --er-* overrides keep working unchanged. */
+  --rb-reg-radius: var(--er-radius);
+  --rb-reg-border: var(--er-border);
+  --rb-reg-border-hover: var(--er-border-hover);
+  --rb-reg-border-selected: var(--er-border-selected);
+  --rb-reg-bg-selected: var(--er-payment-bg-selected);
+  --rb-reg-option-bg: var(--er-control-bg);
+  --rb-reg-option-hover-shadow: 0 8px 18px rgba(var(--tb-shadow, 15 23 42), 0.08);
+  --rb-reg-surface-bg: rgb(var(--tb-surface));
+  --rb-reg-on-surface: var(--er-on-surface);
+  --rb-reg-on-surface-muted: var(--er-on-surface-muted);
+  --rb-reg-on-surface-subtle: var(--er-on-surface-subtle);
+  --rb-reg-on-surface-faint: var(--er-on-surface-faint);
+  --rb-reg-check-bg: var(--er-check-bg);
+  --rb-reg-check-text: var(--er-check-text);
+  --rb-reg-step-active: var(--er-step-active);
+  --rb-reg-step-completed: var(--er-step-completed);
+  --rb-reg-step-inactive: var(--er-step-inactive);
+  --rb-reg-step-text: var(--er-step-text);
+  --rb-reg-step-text-active: var(--er-step-text-active);
+  --rb-reg-step-connector: var(--er-step-connector);
+  --rb-reg-summary-bg: var(--er-surface-muted);
+  --rb-reg-summary-border: var(--er-border);
+  --rb-reg-focus-ring: var(--er-focus-ring);
+  --rb-reg-shell-line: var(--er-shell-line);
 }
 `;
 }
@@ -47818,25 +47901,40 @@ ${root} {
   --ab-info-bg: rgba(var(--tb-info), 0.1);
   --ab-info-text: rgb(var(--tb-info));
-  /* Loading/muted states */
+  /* Muted summary state */
   --ab-muted-bg: rgba(var(--tb-text), 0.05);
-  --ab-muted-text: rgba(var(--tb-text), 0.6);
-  --ab-spinner-color: rgb(var(--tb-primary));
-  /* Form elements */
-  --ab-input-border: rgb(var(--tb-border));
+  /* Focus ring used by shared registration-surface controls */
   --ab-input-focus-ring: rgba(var(--tb-primary), 0.3);
-  /* Buttons */
-  --ab-btn-primary-bg: rgb(var(--tb-primary));
-  --ab-btn-primary-text: rgb(var(--tb-background));
-  --ab-btn-primary-hover: rgba(var(--tb-primary), 0.9);
-  --ab-btn-secondary-border: rgb(var(--tb-border));
-  --ab-btn-secondary-hover: rgba(var(--tb-text), 0.05);
-  /* Text opacity levels */
-  --ab-text-muted-opacity: 0.6;
-  --ab-text-faint-opacity: 0.4;
+  /* Shared registration-surface mappings (issue 1174).
+     Route the shared --rb-reg-* contract through this block's Tier 3 vars
+     (palette tokens where no --ab-* var exists) so --ab-* overrides keep
+     working as the block adopts the shared classes. */
+  --rb-reg-radius: var(--ab-card-radius, var(--rb-block-radius));
+  --rb-reg-border: var(--ab-card-border);
+  --rb-reg-border-hover: var(--ab-card-border-hover);
+  --rb-reg-border-selected: var(--ab-card-border-selected);
+  --rb-reg-bg-selected: var(--ab-card-bg-selected);
+  --rb-reg-option-bg: transparent;
+  --rb-reg-option-hover-shadow: 0 8px 18px rgba(var(--tb-shadow, 15 23 42), 0.08);
+  --rb-reg-surface-bg: rgb(var(--tb-surface));
+  --rb-reg-on-surface: rgb(var(--tb-onSurface, var(--tb-text)));
+  --rb-reg-on-surface-muted: rgba(var(--tb-onSurface, var(--tb-text)), 0.7);
+  --rb-reg-on-surface-subtle: rgba(var(--tb-onSurface, var(--tb-text)), 0.6);
+  --rb-reg-on-surface-faint: rgba(var(--tb-onSurface, var(--tb-text)), 0.5);
+  --rb-reg-check-bg: var(--ab-check-bg);
+  --rb-reg-check-text: var(--ab-check-text);
+  --rb-reg-step-active: rgb(var(--tb-primary));
+  --rb-reg-step-completed: rgb(var(--tb-success));
+  --rb-reg-step-inactive: rgb(var(--tb-mutedText));
+  --rb-reg-step-text: rgb(255 255 255);
+  --rb-reg-step-text-active: rgb(var(--tb-primaryText, 255 255 255));
+  --rb-reg-step-connector: rgba(var(--tb-border), 0.5);
+  --rb-reg-summary-bg: var(--ab-muted-bg);
+  --rb-reg-summary-border: var(--ab-card-border);
+  --rb-reg-focus-ring: var(--ab-input-focus-ring);
+  --rb-reg-shell-line: rgba(var(--tb-mutedText, 100 116 139), 0.22);
 }
 `;
 }
@@ -48127,6 +48225,35 @@ ${root} {
   /* Summary */
   --cr-summary-bg: rgba(var(--tb-primary), 0.1);
   --cr-summary-border: rgb(var(--tb-border));
+  /* Shared registration-surface mappings (issue 1174).
+     Route the shared --rb-reg-* contract through this block's Tier 3 vars
+     (palette tokens where no --cr-* var exists) so existing --cr-* overrides
+     keep working unchanged. */
+  --rb-reg-radius: var(--rb-block-radius);
+  --rb-reg-border: var(--cr-border);
+  --rb-reg-border-hover: var(--cr-border-hover);
+  --rb-reg-border-selected: var(--cr-border-selected);
+  --rb-reg-bg-selected: var(--cr-payment-bg-selected);
+  --rb-reg-option-bg: rgb(var(--tb-background));
+  --rb-reg-option-hover-shadow: 0 8px 18px rgba(var(--tb-shadow, 15 23 42), 0.08);
+  --rb-reg-surface-bg: rgb(var(--tb-surface));
+  --rb-reg-on-surface: var(--cr-on-surface);
+  --rb-reg-on-surface-muted: rgba(var(--tb-onSurface, var(--tb-text)), 0.7);
+  --rb-reg-on-surface-subtle: rgba(var(--tb-onSurface, var(--tb-text)), 0.6);
+  --rb-reg-on-surface-faint: rgba(var(--tb-onSurface, var(--tb-text)), 0.5);
+  --rb-reg-check-bg: var(--cr-check-bg);
+  --rb-reg-check-text: var(--cr-check-text);
+  --rb-reg-step-active: var(--cr-step-active);
+  --rb-reg-step-completed: var(--cr-step-completed);
+  --rb-reg-step-inactive: var(--cr-step-inactive);
+  --rb-reg-step-text: var(--cr-step-text);
+  --rb-reg-step-text-active: var(--cr-step-text-active);
+  --rb-reg-step-connector: var(--cr-step-connector);
+  --rb-reg-summary-bg: var(--cr-summary-bg);
+  --rb-reg-summary-border: var(--cr-summary-border);
+  --rb-reg-focus-ring: var(--cr-focus-ring);
+  --rb-reg-shell-line: rgba(var(--tb-mutedText, 100 116 139), 0.22);
 }
 `;
 }
@@ -49406,6 +49533,8 @@ var MemoBlockSection = React6.memo(
           occurrenceContext: dataContext?.occurrenceContext ?? null,
           entrySubrouteContext: dataContext?.entrySubrouteContext ?? null,
           contentEntry: dataContext?.contentEntry ?? null,
+          pageSurface: dataContext?.pageSurface ?? null,
+          subject: dataContext?.subject ?? null,
           supabaseUrl: dataContext?.supabaseUrl,
           imageResolveContext: resolvedImageResolveContext,
           blockId: block.id ?? null,
@@ -49534,6 +49663,8 @@ var MemoBlockSection = React6.memo(
         occurrenceContext: dataContext?.occurrenceContext ?? null,
         entrySubrouteContext: dataContext?.entrySubrouteContext ?? null,
         contentEntry: dataContext?.contentEntry ?? null,
+        pageSurface: dataContext?.pageSurface ?? null,
+        subject: dataContext?.subject ?? null,
         supabaseUrl: dataContext?.supabaseUrl,
         imageResolveContext: resolvedImageResolveContext,
         blockId: block.id ?? null,
@@ -49561,7 +49692,9 @@ var MemoBlockSection = React6.memo(
             // Occurrence and content entry context for template pages
             occurrenceContext: dataContext?.occurrenceContext ?? null,
             entrySubrouteContext: dataContext?.entrySubrouteContext ?? null,
-            contentEntry: dataContext?.contentEntry ?? null
+            contentEntry: dataContext?.contentEntry ?? null,
+            pageSurface: dataContext?.pageSurface ?? null,
+            subject: dataContext?.subject ?? null
           }
         };
         const blockBindings = block.bindings;
@@ -52906,13 +53039,36 @@ var containerResponsiveThemeCss = `/*
  */
 /* =============================================================================
- * Shared: Registration Terminal State Icons
- * Used by event-registration and course-registration blocks.
+ * Shared: Registration Surface (issue 1174)
  *
- * Layout rules only \u2014 block-specific colors are defined in each block's CSS
- * via scoped \`.rb-state-icon--{variant}\` rules.
+ * Wizard-surface primitives shared by the event-registration,
+ * course-registration and appointment-booking blocks: surface container,
+ * selectable option cards, step indicator, wizard actions row, on-surface
+ * text ramp, layout stacks, summary box and skeleton shell lines.
+ *
+ * Uses:
+ * - Tier 1 vars: --tb-* (from theme palette) as inline fallbacks
+ * - Tier 2 vars: --rb-block-radius, --rb-block-transition (from theme scope)
+ * - Shared vars: --rb-reg-* (mapped per block by the Tier 3 var generators;
+ *   canonical name list in blocks/registrationSurfaceVars.ts)
+ *
+ * Defaults intentionally match the event-registration (issue 1089) values; blocks
+ * that need to preserve a different look override in their own block CSS,
+ * which is imported after this file (cascade order is the override contract \u2014
+ * all selectors here are zero-specificity \`:where()\`).
+ *
+ * Layout-only \`.rb-state-icon\` rules (formerly registration-shared.css) live
+ * here too; block CSS provides the \`.rb-state-icon--{variant}\` colors.
+ *
+ * Naming: component-like primitives follow the existing bare \`rb-\` shared
+ * precedent (\`.rb-state-icon\`, \`.rb-tile\`): \`.rb-option-card\`, \`.rb-step-*\`,
+ * \`.rb-wizard-actions\`, \`.rb-on-surface\`, \`.rb-shell-*\`. Container/layout
+ * pieces that would otherwise collide with the global \`.rb-*\` utility layer
+ * are namespaced \`rb-reg-*\` (\`.rb-reg-surface\`, \`.rb-reg-stack\`, ...). All of
+ * them are scoped to the three registration blocks either way.
  * ============================================================================= */
+/* Terminal state icon (layout only \u2014 colors are per-block) */
 :where(.theme-scope) .rb-state-icon {
   width: 4rem;
   height: 4rem;
@@ -52928,112 +53084,346 @@ var containerResponsiveThemeCss = `/*
   height: 2rem;
 }
-/* =============================================================================
- * Block: Event Registration (pilot #76)
- * Uses CSS vars: --er-* (Tier 3) and --rb-block-* (Tier 2)
- * =============================================================================
- */
-:where(.theme-scope) :where([data-block="event-registration"]) {
-  --rb-modal-overlay-bg: rgb(var(--tb-text, 0 0 0) / 0.6);
-  --rb-event-tile-bg: var(--er-event-card-bg);
-  --rb-event-tile-border: var(--er-border);
-  --rb-event-tile-border-width: var(--er-event-card-border-width);
-  --rb-event-tile-border-hover: var(--er-border-hover);
-  --rb-event-tile-border-selected: var(--er-border-selected);
-  --rb-event-tile-hover-opacity: var(--er-event-card-hover-opacity);
-  --rb-event-tile-bg-selected: rgba(var(--tb-primary), 0.1);
-  --er-on-surface: rgb(var(--tb-onSurface, var(--tb-text)));
-  --er-on-surface-muted: rgba(var(--tb-onSurface, var(--tb-text)), 0.7);
-  --er-on-surface-subtle: rgba(var(--tb-onSurface, var(--tb-text)), 0.6);
-  --er-on-surface-faint: rgba(var(--tb-onSurface, var(--tb-text)), 0.5);
-  --er-on-surface-disabled: rgba(var(--tb-onSurface, var(--tb-text)), 0.78);
-  --er-on-surface-disabled-detail: rgba(var(--tb-onSurface, var(--tb-text)), 0.68);
-}
-/* Container */
-:where(.theme-scope) :where([data-block="event-registration"]) .er-container {
-  border-radius: var(--rb-block-radius);
-  border: 1px solid var(--er-border);
+/* Surface container */
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-reg-surface {
+  border-radius: var(--rb-reg-radius, var(--rb-block-radius, 1rem));
+  border: 1px solid var(--rb-reg-border, rgb(var(--tb-border, 226 232 240)));
   padding: clamp(1rem, 2vw, 1.5rem);
-  background: rgb(var(--tb-surface));
-  color: var(--er-on-surface);
-  transition: border-color var(--rb-block-transition) ease;
+  background: var(--rb-reg-surface-bg, rgb(var(--tb-surface, 248 250 252)));
+  color: var(--rb-reg-on-surface, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42))));
+  transition: border-color var(--rb-block-transition, 150ms) ease;
   width: 100%;
   max-width: 800px;
   margin-inline: 0;
 }
-/* SSR shell / required-island fallback */
-:where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell {
-  min-height: 24rem;
+/* Selectable option card */
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-option-card {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 1rem;
+  border: 1px solid var(--rb-reg-border, rgb(var(--tb-border, 226 232 240)));
+  border-radius: var(--rb-reg-radius, var(--rb-block-radius, 1rem));
+  background: var(--rb-reg-option-bg, transparent);
+  color: inherit;
+  cursor: pointer;
+  text-align: left;
+  transition: border-color var(--rb-block-transition, 150ms) ease,
+              background-color var(--rb-block-transition, 150ms) ease,
+              box-shadow var(--rb-block-transition, 150ms) ease;
 }
-:where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__steps {
-  margin-bottom: 1.25rem;
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-option-card:hover:not(:disabled):not([aria-disabled="true"]) {
+  border-color: var(--rb-reg-border-hover, rgba(var(--tb-primary, 17 24 39), 0.5));
+  box-shadow: var(--rb-reg-option-hover-shadow, 0 8px 18px rgba(var(--tb-shadow, 15 23 42), 0.08));
 }
-:where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__eyebrow {
-  margin: 0 0 0.35rem;
-  color: var(--er-on-surface-subtle);
-  font-size: 0.75rem;
-  font-weight: 700;
-  letter-spacing: 0.04em;
-  line-height: 1.2;
-  text-transform: uppercase;
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-option-card:focus-visible {
+  outline: 2px solid var(--rb-reg-focus-ring, rgba(var(--tb-primary, 17 24 39), 0.3));
+  outline-offset: 2px;
 }
-:where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__title {
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-option-card--selected {
+  border-color: var(--rb-reg-border-selected, rgb(var(--tb-primary, 17 24 39)));
+  background-color: var(--rb-reg-bg-selected, rgba(var(--tb-primary, 17 24 39), 0.08));
+  box-shadow: 0 0 0 1px var(--rb-reg-border-selected, rgb(var(--tb-primary, 17 24 39)));
+}
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-option-card--disabled {
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-option-card--disabled:hover {
+  border-color: var(--rb-reg-border, rgb(var(--tb-border, 226 232 240)));
+  box-shadow: none;
+}
+/* Check indicator */
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-option-check {
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: 50%;
+  background: var(--rb-reg-check-bg, rgb(var(--tb-primary, 17 24 39)));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-option-check svg {
+  width: 0.75rem;
+  height: 0.75rem;
+  color: var(--rb-reg-check-text, rgb(var(--tb-primaryText, var(--tb-primaryForeground, 255 255 255))));
+}
+/* Step indicator */
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-steps-nav {
+  margin-bottom: 1.5rem;
+}
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-steps {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  list-style: none;
+  padding: 0;
   margin: 0;
 }
-:where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__copy {
-  margin: 0.35rem 0 0;
-  max-width: 36rem;
-  line-height: 1.45;
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-step {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
 }
-:where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__cards {
-  margin-top: 0.25rem;
-  overflow: hidden;
-  border: 1px solid var(--er-border);
-  border-radius: var(--rb-block-radius);
-  background: var(--er-control-bg);
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-step-circle {
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75rem;
+  font-weight: 600;
+  background: var(--rb-reg-step-inactive, rgb(var(--tb-mutedText, 100 116 139)));
+  color: var(--rb-reg-step-text, rgb(var(--tb-primaryForeground, 255 255 255)));
+  transition: background-color var(--rb-block-transition, 150ms) ease;
 }
-:where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__card {
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-step-circle--active {
+  background: var(--rb-reg-step-active, rgb(var(--tb-primary, 17 24 39)));
+  color: var(--rb-reg-step-text-active, rgb(var(--tb-primaryText, var(--tb-primaryForeground, 255 255 255))));
+}
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-step-circle--completed {
+  background: var(--rb-reg-step-completed, rgb(var(--tb-success, 22 163 74)));
+  color: var(--rb-reg-step-text-active, rgb(var(--tb-primaryText, var(--tb-primaryForeground, 255 255 255))));
+}
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-step-check {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-step-connector {
+  width: 2rem;
+  height: 2px;
+  background: var(--rb-reg-step-connector, rgba(var(--tb-border, 226 232 240), 0.5));
+}
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-step-label {
+  font-size: 0.75rem;
+  color: var(--rb-reg-on-surface, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42))));
+  display: none;
+}
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-step-label--active {
+  font-weight: 500;
+}
+@container rb-site (min-width: 640px) {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-step-label {
+    display: inline;
+  }
+}
+}
+/* Wizard actions row */
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-wizard-actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  margin-top: 1.5rem;
+}
+/* When there's only one action (no back button), push it to the right */
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-wizard-actions > :only-child {
+  margin-inline-start: auto;
+}
+/* On-surface text ramp */
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-on-surface {
+  color: var(--rb-reg-on-surface, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42))));
+}
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-on-surface--muted {
+  color: var(--rb-reg-on-surface-muted, rgba(var(--tb-onSurface, var(--tb-text, 15 23 42)), 0.7));
+}
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-on-surface--subtle {
+  color: var(--rb-reg-on-surface-subtle, rgba(var(--tb-onSurface, var(--tb-text, 15 23 42)), 0.6));
+}
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-on-surface--faint {
+  color: var(--rb-reg-on-surface-faint, rgba(var(--tb-onSurface, var(--tb-text, 15 23 42)), 0.5));
+}
+/* Layout stacks */
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-reg-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-reg-stack--sm {
+  gap: 0.75rem;
+}
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-reg-row {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-reg-row--between {
+  justify-content: space-between;
+  align-items: flex-start;
+}
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-reg-grid {
   display: grid;
-  gap: 0.5rem;
+  gap: 0.75rem;
+}
+/* Summary box */
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-reg-summary {
   padding: 1rem;
+  border-radius: calc(var(--rb-reg-radius, var(--rb-block-radius, 1rem)) * 0.75);
+  border: 1px solid var(--rb-reg-summary-border, rgb(var(--tb-border, 226 232 240)));
+  background: var(--rb-reg-summary-bg, rgba(var(--tb-muted, 241 245 249), 0.42));
 }
-:where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__line {
+/* Skeleton shell lines */
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-shell-line {
   height: 0.75rem;
   border-radius: 9999px;
   background: linear-gradient(
     90deg,
-    var(--er-shell-line),
-    rgba(var(--tb-primary), 0.12),
-    var(--er-shell-line)
+    var(--rb-reg-shell-line, rgba(var(--tb-mutedText, 100 116 139), 0.22)),
+    rgba(var(--tb-primary, 17 24 39), 0.12),
+    var(--rb-reg-shell-line, rgba(var(--tb-mutedText, 100 116 139), 0.22))
   );
 }
-:where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__line--lg {
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-shell-line--lg {
   width: min(26rem, 82%);
 }
-:where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__line--md {
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-shell-line--md {
   width: min(19rem, 68%);
 }
-:where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__line--sm {
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-shell-line--sm {
   width: min(14rem, 52%);
 }
-:where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__line--xs {
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-shell-line--xs {
   width: min(10rem, 42%);
 }
+/* Skeleton block (rectangular placeholder, pulses) */
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-shell-block {
+  height: 2.5rem;
+  width: 100%;
+  border-radius: var(--rb-reg-radius, var(--rb-block-radius, 1rem));
+  background: var(--rb-reg-shell-line, rgba(var(--tb-mutedText, 100 116 139), 0.22));
+  animation: rb-reg-pulse 1.5s ease-in-out infinite;
+}
+@keyframes rb-reg-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  :where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-shell-block {
+    animation: none;
+  }
+}
+/* =============================================================================
+ * Block: Event Registration (pilot #76)
+ * Uses CSS vars: --er-* (Tier 3) and --rb-block-* (Tier 2)
+ * =============================================================================
+ */
+:where(.theme-scope) :where([data-block="event-registration"]) {
+  --rb-modal-overlay-bg: rgb(var(--tb-text, 0 0 0) / 0.6);
+  --rb-event-tile-bg: var(--er-event-card-bg);
+  --rb-event-tile-border: var(--er-border);
+  --rb-event-tile-border-width: var(--er-event-card-border-width);
+  --rb-event-tile-border-hover: var(--er-border-hover);
+  --rb-event-tile-border-selected: var(--er-border-selected);
+  --rb-event-tile-hover-opacity: var(--er-event-card-hover-opacity);
+  --rb-event-tile-bg-selected: rgba(var(--tb-primary), 0.1);
+  --er-on-surface: rgb(var(--tb-onSurface, var(--tb-text)));
+  --er-on-surface-muted: rgba(var(--tb-onSurface, var(--tb-text)), 0.7);
+  --er-on-surface-subtle: rgba(var(--tb-onSurface, var(--tb-text)), 0.6);
+  --er-on-surface-faint: rgba(var(--tb-onSurface, var(--tb-text)), 0.5);
+  --er-on-surface-disabled: rgba(var(--tb-onSurface, var(--tb-text)), 0.78);
+  --er-on-surface-disabled-detail: rgba(var(--tb-onSurface, var(--tb-text)), 0.68);
+}
+/* Container: styled by the shared .rb-reg-surface (registration-surface.css);
+   .er-container remains in markup as a hook and for the overlay/embedded
+   variants below. */
+/* SSR shell / required-island fallback */
+:where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell {
+  min-height: 24rem;
+}
+:where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__steps {
+  margin-bottom: 1.25rem;
+}
+:where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__eyebrow {
+  margin: 0 0 0.35rem;
+  color: var(--er-on-surface-subtle);
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  line-height: 1.2;
+  text-transform: uppercase;
+}
+:where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__title {
+  margin: 0;
+}
+:where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__copy {
+  margin: 0.35rem 0 0;
+  max-width: 36rem;
+  line-height: 1.45;
+}
+:where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__cards {
+  margin-top: 0.25rem;
+  overflow: hidden;
+  border: 1px solid var(--er-border);
+  border-radius: var(--rb-block-radius);
+  background: var(--er-control-bg);
+}
+:where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__card {
+  display: grid;
+  gap: 0.5rem;
+  padding: 1rem;
+}
+/* Shell skeleton lines: styled by the shared .rb-shell-line family
+   (registration-surface.css); legacy classes remain in markup as hooks. */
 :where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__summary {
   align-items: center;
   border-radius: calc(var(--rb-block-radius) * 0.75);
@@ -53109,13 +53499,8 @@ var containerResponsiveThemeCss = `/*
   color: var(--er-capacity-soldout-text);
 }
-/* Selected event summary */
-:where(.theme-scope) :where([data-block="event-registration"]) .er-event-summary {
-  padding: 1rem;
-  border-radius: calc(var(--rb-block-radius) * 0.75);
-  border: 1px solid var(--er-border);
-  background: var(--er-surface-muted);
-}
+/* Selected event summary: superseded by the shared .rb-reg-summary
+   (registration-surface.css); no markup emitted .er-event-summary anymore. */
 /* Ticket counter */
 :where(.theme-scope) :where([data-block="event-registration"]) .er-ticket-counter-group {
@@ -53321,7 +53706,7 @@ var containerResponsiveThemeCss = `/*
   opacity: 1;
 }
-/* State icon color variants (layout from registration-shared.css) */
+/* State icon color variants (layout from registration-surface.css) */
 :where(.theme-scope) :where([data-block="event-registration"]) .rb-state-icon--success {
   background: var(--er-success-bg);
   color: var(--er-success-text);
@@ -53477,16 +53862,8 @@ var containerResponsiveThemeCss = `/*
   text-align: center;
 }
-/* Layout */
-:where(.theme-scope) :where([data-block="event-registration"]) .er-stack {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-:where(.theme-scope) :where([data-block="event-registration"]) .er-stack--sm {
-  gap: 0.75rem;
-}
+/* Layout stacks/rows: styled by the shared .rb-reg-stack / .rb-reg-row
+   (registration-surface.css); legacy classes remain in markup as hooks. */
 /* Event/date selection rows */
 :where(.theme-scope) :where([data-block="event-registration"]) .er-event-grid {
@@ -53495,17 +53872,6 @@ var containerResponsiveThemeCss = `/*
   gap: 0;
 }
-:where(.theme-scope) :where([data-block="event-registration"]) .er-row {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-:where(.theme-scope) :where([data-block="event-registration"]) .er-row--between {
-  justify-content: space-between;
-  align-items: flex-start;
-}
 :where(.theme-scope) :where([data-block="event-registration"]) .er-center {
   text-align: center;
   padding: 2rem;
@@ -53517,18 +53883,8 @@ var containerResponsiveThemeCss = `/*
   margin-bottom: 1rem;
 }
-:where(.theme-scope) :where([data-block="event-registration"]) .er-actions {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 1rem;
-  margin-top: 1.5rem;
-}
-/* When there's only one button (no back), push to the right */
-:where(.theme-scope) :where([data-block="event-registration"]) .er-actions > :only-child {
-  margin-inline-start: auto;
-}
+/* Actions row: styled by the shared .rb-wizard-actions (registration-surface.css);
+   .er-actions remains in markup as a hook. */
 :where(.theme-scope) :where([data-block="event-registration"]) .er-button-with-spinner {
   display: inline-flex;
@@ -53780,23 +54136,8 @@ var containerResponsiveThemeCss = `/*
   color: var(--er-on-surface-faint);
 }
-/* Checkmark indicator */
-:where(.theme-scope) :where([data-block="event-registration"]) .er-check {
-  flex-shrink: 0;
-  width: 1.25rem;
-  height: 1.25rem;
-  border-radius: 50%;
-  background: var(--er-check-bg);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-:where(.theme-scope) :where([data-block="event-registration"]) .er-check svg {
-  width: 0.75rem;
-  height: 0.75rem;
-  color: var(--er-check-text);
-}
+/* Checkmark indicator: styled by the shared .rb-option-check
+   (registration-surface.css); .er-check remains in markup as a hook. */
 /* Payment summary */
 :where(.theme-scope) :where([data-block="event-registration"]) .er-payment-summary {
@@ -53844,78 +54185,12 @@ var containerResponsiveThemeCss = `/*
   margin-bottom: 1.5rem;
 }
-:where(.theme-scope) :where([data-block="event-registration"]) .er-steps {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-:where(.theme-scope) :where([data-block="event-registration"]) .er-step {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-:where(.theme-scope) :where([data-block="event-registration"]) .er-step-circle {
-  width: 1.75rem;
-  height: 1.75rem;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.75rem;
-  font-weight: 600;
-  background: var(--er-step-inactive);
-  color: var(--er-step-text);
-  transition: background-color var(--rb-block-transition) ease;
-}
-:where(.theme-scope) :where([data-block="event-registration"]) .er-step-circle--active {
-  background: var(--er-step-active);
-  color: var(--er-step-text-active);
-}
-:where(.theme-scope) :where([data-block="event-registration"]) .er-step-circle--completed {
-  background: var(--er-step-completed);
-  color: var(--er-step-text-active);
-}
-:where(.theme-scope) :where([data-block="event-registration"]) .er-step-check {
-  width: 0.75rem;
-  height: 0.75rem;
-}
-:where(.theme-scope) :where([data-block="event-registration"]) .er-step-connector {
-  width: 2rem;
-  height: 2px;
-  background: var(--er-step-connector);
-}
-:where(.theme-scope) :where([data-block="event-registration"]) .er-step-connector--completed {
-  background: var(--er-step-connector);
-}
-:where(.theme-scope) :where([data-block="event-registration"]) .er-step-label {
-  font-size: 0.75rem;
-  color: var(--er-on-surface);
-  display: none;
-}
-:where(.theme-scope) :where([data-block="event-registration"]) .er-step-label--active {
-  font-weight: 500;
-}
-@container rb-site (min-width: 640px) {
-@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
-:where(.theme-scope) :where([data-block="event-registration"]) .er-step-label {
-    display: inline;
-  }
-}
-}
+/* Step indicator internals: styled by the shared .rb-steps / .rb-step-*
+   family (registration-surface.css) via the --rb-reg-step-* mappings in the
+   event-registration var generator; er-* classes remain in markup as hooks.
+   Note: .er-steps-nav above is intentionally retained \u2014 its source position
+   keeps the wizard's 1.5rem step margin winning over the SSR shell's
+   1.25rem .er-registration-shell__steps override. */
 /* Sticky order summary */
 :where(.theme-scope) :where([data-block="event-registration"]) .er-summary {
@@ -56148,295 +56423,420 @@ var containerResponsiveThemeCss = `/*
 /* =============================================================================
  * Block: Appointment Booking
+ *
+ * Structural styling comes from the shared registration-surface layer
+ * (registration-surface.css): surface container, option cards + check,
+ * step indicator, wizard actions, on-surface text ramp, stacks, summary box
+ * and skeleton shell. Colors flow through the --rb-reg-* contract, mapped
+ * from this block's --ab-* Tier 3 vars by its var generator.
+ *
+ * Inputs use the theme-generated form-* classes; feedback boxes use the
+ * theme-generated alert / alert-{tone} classes. Only genuinely
+ * booking-specific rules live here.
+ *
  * Uses:
- * - Tier 1 vars: --tb-border, --tb-text, --tb-primary (from theme palette)
- * - Tier 2 vars: --rb-block-radius, --rb-block-transition (from theme scope)
+ * - Tier 1 vars: --tb-* (from theme palette)
  * - Tier 3 vars: --ab-* (from appointment-booking var generator)
  * =============================================================================
  */
-/* Main container */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-container {
-  width: 100%;
+/* Typography helpers */
+:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-title {
+  font-size: 1.5rem;
+  font-weight: 600;
+  line-height: 1.3;
 }
-/* Stack layout utilities */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-stack {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
+:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-subtitle {
+  font-size: 0.9375rem;
+  font-weight: 600;
+  line-height: 1.3;
 }
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-stack--sm {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
+:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-text {
+  font-size: 0.875rem;
 }
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-stack--xs {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
+:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-text--sm {
+  font-size: 0.75rem;
 }
-/* Row layout */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-row {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
+/* Centered state (loading / terminal panels) */
+:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-center {
+  text-align: center;
+  padding: 2rem;
 }
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-row--between {
-  justify-content: space-between;
+/* Terminal state title (below the state icon) */
+:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-terminal-title {
+  margin: 0.75rem 0 0.5rem 0;
+  font-size: 1.125rem;
+  font-weight: 700;
+}
+/* State icon color variants (layout from registration-surface.css) */
+:where(.theme-scope) :where([data-block="appointment-booking"]) .rb-state-icon--success {
+  background: var(--ab-success-bg, rgba(var(--tb-success, 22 163 74), 0.1));
+  color: var(--ab-success-text, rgb(var(--tb-success, 22 163 74)));
+}
+:where(.theme-scope) :where([data-block="appointment-booking"]) .rb-state-icon--error {
+  background: var(--ab-error-bg, rgba(var(--tb-destructive, 220 38 38), 0.1));
+  color: var(--ab-error-text, rgb(var(--tb-destructive, 220 38 38)));
 }
-/* Grid layout */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-grid {
+:where(.theme-scope) :where([data-block="appointment-booking"]) .rb-state-icon--info {
+  background: var(--ab-info-bg, rgba(var(--tb-info, 14 165 233), 0.1));
+  color: var(--ab-info-text, rgb(var(--tb-info, 14 165 233)));
+}
+:where(.theme-scope) :where([data-block="appointment-booking"]) .rb-state-icon--warning {
+  background: var(--ab-warning-bg, rgba(var(--tb-warning, 245 158 11), 0.1));
+  color: var(--ab-warning-text, rgb(var(--tb-warning, 245 158 11)));
+}
+/* Payment option summary rows (label/value lines inside an option card) */
+:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-option-rows {
   display: grid;
-  gap: 0.75rem;
+  gap: 0.125rem;
 }
-/* Center layout */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-center {
-  text-align: center;
-  padding: 2rem;
+/* Date/time pill grids (selection pills extend .rb-option-card) */
+:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-pill-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
 }
-/* Typography */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-title {
-  font-size: 1.5rem;
-  font-weight: 700;
+:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-date-pill {
+  flex-direction: column;
+  align-items: center;
+  gap: 0.125rem;
+  padding: 0.5rem 0.875rem;
+  min-width: 4.25rem;
+  text-align: center;
 }
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-subtitle {
+:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-time-pill {
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem 0.875rem;
+  min-width: 5.5rem;
   font-size: 0.875rem;
   font-weight: 500;
+  text-align: center;
 }
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-text {
-  font-size: 0.875rem;
+:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-pill-caption {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0;
+  line-height: 1.2;
+  text-transform: uppercase;
+  color: var(--rb-reg-on-surface-subtle, rgba(var(--tb-onSurface, var(--tb-text, 15 23 42)), 0.6));
 }
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-text--sm {
-  font-size: 0.75rem;
+:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-pill-value {
+  font-size: 1.125rem;
+  font-weight: 600;
+  line-height: 1.2;
 }
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-text--muted {
-  opacity: var(--ab-text-muted-opacity, 0.6);
+/* SSR shell skeleton (mirrors the hydrated layout to reduce hydration jump) */
+:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-shell {
+  min-height: 18rem;
 }
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-text--faint {
-  opacity: var(--ab-text-faint-opacity, 0.4);
+:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-shell-button {
+  display: inline-flex;
+  min-height: 2.5rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: calc(var(--rb-reg-radius, var(--rb-block-radius, 1rem)) * 0.6);
+  background: rgb(var(--tb-primary, 17 24 39));
+  color: rgb(var(--tb-primaryText, var(--tb-primaryForeground, 255 255 255)));
+  padding: 0.625rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.2;
+  text-align: center;
+  white-space: nowrap;
 }
-/* Selection cards (service, resource, time slot) */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-card {
-  position: relative;
-  padding: 1rem;
-  border: 2px solid var(--ab-card-border, rgb(var(--tb-border, 226 232 240)));
-  border-radius: var(--ab-card-radius, var(--rb-block-radius, 1rem));
-  text-align: left;
-  background: transparent;
+/* Inline text-link button (e.g. "Load more dates") */
+:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-link {
+  display: inline;
+  color: rgb(var(--tb-primary, 17 24 39));
+  background: none;
+  border: none;
+  padding: 0;
+  font: inherit;
+  text-decoration: underline;
   cursor: pointer;
-  transition: border-color var(--rb-block-transition, 150ms) ease, background-color var(--rb-block-transition, 150ms) ease;
 }
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-card:hover {
-  border-color: var(--ab-card-border-hover, rgba(var(--tb-primary, 17 24 39), 0.5));
+:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-link:hover {
+  text-decoration: none;
 }
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-card--selected {
-  border-color: var(--ab-card-border-selected, rgb(var(--tb-primary, 17 24 39)));
-  background-color: var(--ab-card-bg-selected, rgba(var(--tb-primary, 17 24 39), 0.05));
+/* Altcha wrapper */
+:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-altcha {
+  margin-top: 1rem;
 }
-/* Checkmark indicator */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-check {
-  flex-shrink: 0;
-  width: 1.25rem;
-  height: 1.25rem;
-  border-radius: 50%;
-  background-color: var(--ab-check-bg, rgb(var(--tb-primary, 17 24 39)));
-  display: flex;
-  align-items: center;
-  justify-content: center;
+/* =============================================================================
+ * Shared: Inline Text Marks
+ * =============================================================================
+ */
+:where(.theme-scope) .rb-inline-text-accent,
+:where(.theme-scope) .rb-inline-text-highlight {
+  font: inherit;
+  letter-spacing: inherit;
+  text-transform: inherit;
 }
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-check svg {
-  width: 0.75rem;
-  height: 0.75rem;
-  color: var(--ab-check-text, rgb(var(--tb-background, 255 255 255)));
+:where(.theme-scope) .rb-inline-text-accent-accent {
+  color: rgb(var(--tb-accent));
 }
-/* Info box (service summary) */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-info-box {
-  padding: 1rem;
-  border: 1px solid var(--ab-card-border, rgb(var(--tb-border, 226 232 240)));
-  border-radius: var(--ab-card-radius, var(--rb-block-radius, 1rem));
-  background-color: var(--ab-muted-bg, rgba(var(--tb-foreground, var(--tb-text, 15 23 42)), 0.05));
+:where(.theme-scope) .rb-inline-text-accent-brand {
+  color: rgb(var(--tb-primary));
 }
-/* Alert states */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-alert {
-  padding: 0.75rem 1rem;
-  border-radius: var(--ab-card-radius, var(--rb-block-radius, 1rem));
-  font-size: 0.875rem;
+:where(.theme-scope) .rb-inline-text-accent-contrast {
+  color: var(--section-text-color, rgb(var(--tb-text)));
 }
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-alert--success {
-  background-color: var(--ab-success-bg, rgba(var(--tb-success, 22 163 74), 0.1));
-  color: var(--ab-success-text, rgb(var(--tb-success, 22 163 74)));
+:where(.theme-scope) .rb-inline-text-highlight {
+  border-radius: 0.22em;
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
+  padding: 0.02em 0.12em;
 }
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-alert--error {
-  background-color: var(--ab-error-bg, rgba(var(--tb-destructive, 220 38 38), 0.1));
-  color: var(--ab-error-text, rgb(var(--tb-destructive, 220 38 38)));
+:where(.theme-scope) .rb-inline-text-highlight-soft {
+  background: color-mix(in oklab, var(--section-text-color, rgb(var(--tb-text))) 14%, transparent);
 }
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-alert--warning {
-  background-color: var(--ab-warning-bg, rgba(var(--tb-warning, 245 158 11), 0.1));
-  color: var(--ab-warning-text, rgb(var(--tb-warning, 245 158 11)));
+:where(.theme-scope) .rb-inline-text-highlight-accent {
+  background: color-mix(in oklab, rgb(var(--tb-accent)) 28%, transparent);
 }
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-alert--info {
-  background-color: var(--ab-info-bg, rgba(var(--tb-info, 14 165 233), 0.1));
-  color: var(--ab-info-text, rgb(var(--tb-info, 14 165 233)));
+:where(.theme-scope) .rb-inline-text-highlight-brand {
+  background: color-mix(in oklab, rgb(var(--tb-primary)) 24%, transparent);
 }
-/* Form elements */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-label {
-  display: block;
-  font-size: 0.875rem;
-  font-weight: 500;
-  margin-bottom: 0.5rem;
+/* =============================================================================
+ * Block: Hero (Phase 2)
+ * Uses theme palette vars directly (no Tier 3 vars needed)
+ * =============================================================================
+ */
+/* Eyebrow - color only (typography via .rb-eyebrow) */
+:where(.theme-scope) :where([data-block="hero"]) .hero-eyebrow:not(.rb-eyebrow-treatment-accent) {
+  color: var(--section-text-color, rgb(var(--tb-text)));
 }
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-required {
-  color: var(--ab-error-text, rgb(var(--tb-destructive, 220 38 38)));
-  margin-left: 0.125rem;
+/* Subheadline - supporting text below headline */
+:where(.theme-scope) :where([data-block="hero"]) .hero-headline {
+  text-wrap: balance;
 }
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-input,
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-select,
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-textarea {
-  width: 100%;
-  padding: 0.5rem 0.75rem;
-  border: 1px solid var(--ab-input-border, rgb(var(--tb-border, 226 232 240)));
-  border-radius: var(--ab-input-radius, var(--rb-input-radius, var(--radius-control, var(--rb-block-radius, 1rem))));
-  background: transparent;
-  font-size: 0.875rem;
-  transition: border-color var(--rb-block-transition, 150ms) ease, box-shadow var(--rb-block-transition, 150ms) ease;
+:where(.theme-scope) :where([data-block="hero"]) .hero-subheadline {
+  font-size: 1.125rem;
+  color: var(--section-supporting-color, var(--section-text-color, rgb(var(--tb-text))));
 }
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-input:focus,
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-select:focus,
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-textarea:focus {
-  outline: none;
-  border-color: var(--ab-card-border-selected, rgb(var(--tb-primary, 17 24 39)));
-  box-shadow: 0 0 0 3px var(--ab-input-focus-ring, rgba(var(--tb-primary, 17 24 39), 0.3));
+@container rb-site (min-width: 640px) {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) :where([data-block="hero"]) .hero-subheadline {
+    font-size: 1.25rem;
+  }
+}
 }
-/* Buttons */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.5rem 1.5rem;
-  border-radius: var(--ab-button-radius, var(--rb-button-radius, var(--rb-block-radius, 1rem)));
-  font-size: 0.875rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background-color var(--rb-block-transition, 150ms) ease, border-color var(--rb-block-transition, 150ms) ease;
+/* Hero typography scales. These classes are emitted by Theme V2 hero looks. */
+:where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-quiet .hero-headline {
+  font-size: clamp(2rem, 4vw, 3rem);
+  line-height: 1.12;
 }
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-btn--primary {
-  flex: 1;
-  background-color: var(--ab-btn-primary-bg, rgb(var(--tb-primary, 17 24 39)));
-  color: var(--ab-btn-primary-text, rgb(var(--tb-primaryForeground, 255 255 255)));
-  border: none;
+:where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-quiet .hero-subheadline {
+  font-size: clamp(1rem, 1.2vw, 1.25rem);
+  line-height: 1.55;
 }
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-btn--primary:hover:not(:disabled) {
-  background-color: var(--ab-btn-primary-hover, rgba(var(--tb-primary, 17 24 39), 0.9));
+:where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-editorial .hero-headline {
+  font-size: clamp(2.75rem, 5.6vw, 4.75rem);
+  line-height: 1.06;
 }
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-btn--secondary {
-  background: transparent;
-  border: 1px solid var(--ab-btn-secondary-border, rgb(var(--tb-border, 226 232 240)));
+:where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-editorial .hero-subheadline {
+  font-size: clamp(1.0625rem, 1.4vw, 1.375rem);
+  line-height: 1.55;
 }
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-btn--secondary:hover:not(:disabled) {
-  background-color: var(--ab-btn-secondary-hover, rgba(var(--tb-foreground, var(--tb-text, 15 23 42)), 0.05));
+:where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-display .hero-headline {
+  font-size: clamp(3.5rem, 7.2vw, 6.25rem);
+  line-height: 1;
 }
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-btn--link {
-  background: transparent;
-  border: none;
-  padding: 0;
-  text-decoration: underline;
+:where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-display .hero-subheadline {
+  font-size: clamp(1.125rem, 1.5vw, 1.5rem);
+  line-height: 1.5;
 }
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-btn--link:hover {
-  text-decoration: none;
+:where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-poster .hero-headline {
+  font-size: clamp(4.25rem, 10vw, 8.5rem);
+  line-height: 0.94;
 }
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
+:where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-poster .hero-subheadline {
+  font-size: clamp(1.125rem, 1.4vw, 1.5rem);
+  line-height: 1.45;
 }
-/* Actions row */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-actions {
-  display: flex;
-  gap: 0.75rem;
-  margin-top: 1.5rem;
+:where(.theme-scope) :where([data-block="hero"]) .rb-hero-title-medium.rb-hero-typography-poster .hero-headline {
+  font-size: clamp(3.5rem, 7.5vw, 6.5rem);
 }
-/* Skeleton loading */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-skeleton {
-  height: 2.5rem;
-  width: 100%;
-  background-color: var(--ab-muted-bg, rgba(var(--tb-foreground, var(--tb-text, 15 23 42)), 0.05));
-  border-radius: var(--ab-card-radius, var(--rb-block-radius, 1rem));
-  animation: ab-pulse 1.5s ease-in-out infinite;
+:where(.theme-scope) :where([data-block="hero"]) .rb-hero-title-long.rb-hero-typography-poster .hero-headline,
+:where(.theme-scope) :where([data-block="hero"]) .rb-hero-title-long.rb-hero-typography-display .hero-headline {
+  font-size: clamp(3rem, 6vw, 5.25rem);
+  line-height: 1.02;
 }
-@keyframes ab-pulse {
-  0%, 100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.5;
+@container rb-site (max-width: 639px) {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-poster .hero-headline,
+  :where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-display .hero-headline,
+  :where(.theme-scope) :where([data-block="hero"]) .rb-hero-title-long.rb-hero-typography-poster .hero-headline,
+  :where(.theme-scope) :where([data-block="hero"]) .rb-hero-title-long.rb-hero-typography-display .hero-headline {
+    font-size: clamp(2.5rem, 11vw, 3.5rem);
+    line-height: 1.05;
   }
 }
+}
-/* Field wrapper */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-field {
+/* =============================================================================
+ * Shared: Heading Group (used by CTA, single-button, etc.)
+ * =============================================================================
+ */
+/* Eyebrow - color only (typography via .rb-eyebrow) */
+:where(.theme-scope) .heading-eyebrow:not(.rb-eyebrow-treatment-accent) {
+  color: rgb(var(--tb-mutedText));
+}
+/* =============================================================================
+ * Block: CTA (Phase 2)
+ * =============================================================================
+ */
+/* CTA content/body text */
+:where(.theme-scope) :where([data-block="cta-full"]) .cta-content {
+  color: var(--section-supporting-color, rgb(var(--tb-mutedText)));
+}
+/* CTA button row container */
+:where(.theme-scope) :where([data-block="cta-full"]) .cta-row {
   display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
+  flex-wrap: wrap;
 }
-/* Altcha wrapper */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-altcha {
-  margin-top: 1rem;
+/* =============================================================================
+ * Block: Body Text (content block, Phase 2)
+ *
+ * Style contract:
+ * - Variant styling is keyed off \`data-block-variant\` on the PageRenderer wrapper.
+ * - Prose sizing comes from \`rb-prose-*\` (theme-aware) in \`packages/blocks/src/theme/styles.css\`.
+ * =============================================================================
+ */
+/* Body copy rich text container */
+:where(.theme-scope) :where([data-block="body-text"]) .body-copy-container {
+  max-width: 48rem;
+  margin-left: 0;
+  margin-right: auto;
 }
-/* Link button (inline text link) */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-link {
-  display: inline;
-  margin-left: 0.5rem;
-  color: rgb(var(--tb-primary, 17 24 39));
-  background: none;
-  border: none;
-  padding: 0;
-  font: inherit;
-  text-decoration: underline;
-  cursor: pointer;
+:where(.theme-scope) :where([data-block="body-text"]) .body-copy-container.rb-items-center {
+  margin-left: auto;
+  margin-right: auto;
 }
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-link:hover {
-  text-decoration: none;
+/* Body copy rich text */
+:where(.theme-scope) :where([data-block="body-text"]) .body-copy-body {
+  color: inherit;
+}
+/* Ensure editing mode doesn't silently change typography inside ProseMirror */
+:where(.theme-scope) :where([data-block="body-text"]) .body-copy-body :where(.ProseMirror) {
+  font-size: inherit;
+  line-height: inherit;
+}
+/* Variant: Intro (centered, wider container, larger text, relaxed leading) */
+:where(.theme-scope) :where([data-block="body-text"][data-block-variant="intro"]) .body-copy-container {
+  max-width: 60rem;
+}
+:where(.theme-scope) :where([data-block="body-text"][data-block-variant="intro"]) .body-copy-body {
+  font-size: var(--rb-prose-lg-font-size);
+  line-height: var(--rb-prose-lg-line-height);
+}
+@container rb-site (min-width: 640px) {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) :where([data-block="body-text"][data-block-variant="intro"]) .body-copy-body {
+    font-size: var(--rb-prose-xl-sm-font-size);
+    line-height: var(--rb-prose-xl-sm-line-height);
+  }
+}
+}
+/* Variant: Narrow (left-aligned, shorter line length) */
+:where(.theme-scope) :where([data-block="body-text"][data-block-variant="narrow"]) .body-copy-container {
+  max-width: 34rem;
+  margin-left: 0;
+  margin-right: auto;
+}
+/* Override prose sizing via theme-aware vars (see styles.css) */
+:where(.theme-scope) :where([data-block="body-text"][data-block-variant="intro"]) {
+  /* Mobile-first: use rb-prose-lg sizing below 640px */
+  --rb-prose-lg-font-size: clamp(
+    calc(var(--fs-body, 16px) * 1.35),
+    calc(var(--fs-body, 16px) * 1.1 + 1.25vw),
+    calc(var(--fs-body, 16px) * 1.6)
+  );
+  --rb-prose-lg-line-height: calc(var(--lh-body, 1.65) + 0.2);
+  /* At >= 640px, rb-prose-xl-sm applies and becomes the dominant size */
+  --rb-prose-xl-sm-font-size: clamp(
+    calc(var(--fs-body, 16px) * 1.55),
+    calc(var(--fs-body, 16px) * 1.25 + 1.5vw),
+    calc(var(--fs-body, 16px) * 1.8)
+  );
+  --rb-prose-xl-sm-line-height: calc(var(--lh-body, 1.65) + 0.2);
+}
+/* =============================================================================
+ * Block: Form (formCopy fragment, Phase 2)
+ * =============================================================================
+ */
+/* Form title */
+:where(.theme-scope) :where([data-block="form"]) .form-copy-title {
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+/* Form intro text */
+:where(.theme-scope) :where([data-block="form"]) .form-copy-intro {
+  font-size: 1rem;
+  color: var(--section-text-color, rgb(var(--tb-text)));
 }
 /* =============================================================================
@@ -56526,261 +56926,6 @@ var containerResponsiveThemeCss = `/*
   margin-top: 0.5rem;
 }
-/* =============================================================================
- * Shared: Inline Text Marks
- * =============================================================================
- */
-:where(.theme-scope) .rb-inline-text-accent,
-:where(.theme-scope) .rb-inline-text-highlight {
-  font: inherit;
-  letter-spacing: inherit;
-  text-transform: inherit;
-}
-:where(.theme-scope) .rb-inline-text-accent-accent {
-  color: rgb(var(--tb-accent));
-}
-:where(.theme-scope) .rb-inline-text-accent-brand {
-  color: rgb(var(--tb-primary));
-}
-:where(.theme-scope) .rb-inline-text-accent-contrast {
-  color: var(--section-text-color, rgb(var(--tb-text)));
-}
-:where(.theme-scope) .rb-inline-text-highlight {
-  border-radius: 0.22em;
-  box-decoration-break: clone;
-  -webkit-box-decoration-break: clone;
-  padding: 0.02em 0.12em;
-}
-:where(.theme-scope) .rb-inline-text-highlight-soft {
-  background: color-mix(in oklab, var(--section-text-color, rgb(var(--tb-text))) 14%, transparent);
-}
-:where(.theme-scope) .rb-inline-text-highlight-accent {
-  background: color-mix(in oklab, rgb(var(--tb-accent)) 28%, transparent);
-}
-:where(.theme-scope) .rb-inline-text-highlight-brand {
-  background: color-mix(in oklab, rgb(var(--tb-primary)) 24%, transparent);
-}
-/* =============================================================================
- * Block: Hero (Phase 2)
- * Uses theme palette vars directly (no Tier 3 vars needed)
- * =============================================================================
- */
-/* Eyebrow - color only (typography via .rb-eyebrow) */
-:where(.theme-scope) :where([data-block="hero"]) .hero-eyebrow:not(.rb-eyebrow-treatment-accent) {
-  color: var(--section-text-color, rgb(var(--tb-text)));
-}
-/* Subheadline - supporting text below headline */
-:where(.theme-scope) :where([data-block="hero"]) .hero-headline {
-  text-wrap: balance;
-}
-:where(.theme-scope) :where([data-block="hero"]) .hero-subheadline {
-  font-size: 1.125rem;
-  color: var(--section-supporting-color, var(--section-text-color, rgb(var(--tb-text))));
-}
-@container rb-site (min-width: 640px) {
-@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
-:where(.theme-scope) :where([data-block="hero"]) .hero-subheadline {
-    font-size: 1.25rem;
-  }
-}
-}
-/* Hero typography scales. These classes are emitted by Theme V2 hero looks. */
-:where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-quiet .hero-headline {
-  font-size: clamp(2rem, 4vw, 3rem);
-  line-height: 1.12;
-}
-:where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-quiet .hero-subheadline {
-  font-size: clamp(1rem, 1.2vw, 1.25rem);
-  line-height: 1.55;
-}
-:where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-editorial .hero-headline {
-  font-size: clamp(2.75rem, 5.6vw, 4.75rem);
-  line-height: 1.06;
-}
-:where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-editorial .hero-subheadline {
-  font-size: clamp(1.0625rem, 1.4vw, 1.375rem);
-  line-height: 1.55;
-}
-:where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-display .hero-headline {
-  font-size: clamp(3.5rem, 7.2vw, 6.25rem);
-  line-height: 1;
-}
-:where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-display .hero-subheadline {
-  font-size: clamp(1.125rem, 1.5vw, 1.5rem);
-  line-height: 1.5;
-}
-:where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-poster .hero-headline {
-  font-size: clamp(4.25rem, 10vw, 8.5rem);
-  line-height: 0.94;
-}
-:where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-poster .hero-subheadline {
-  font-size: clamp(1.125rem, 1.4vw, 1.5rem);
-  line-height: 1.45;
-}
-:where(.theme-scope) :where([data-block="hero"]) .rb-hero-title-medium.rb-hero-typography-poster .hero-headline {
-  font-size: clamp(3.5rem, 7.5vw, 6.5rem);
-}
-:where(.theme-scope) :where([data-block="hero"]) .rb-hero-title-long.rb-hero-typography-poster .hero-headline,
-:where(.theme-scope) :where([data-block="hero"]) .rb-hero-title-long.rb-hero-typography-display .hero-headline {
-  font-size: clamp(3rem, 6vw, 5.25rem);
-  line-height: 1.02;
-}
-@container rb-site (max-width: 639px) {
-@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
-:where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-poster .hero-headline,
-  :where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-display .hero-headline,
-  :where(.theme-scope) :where([data-block="hero"]) .rb-hero-title-long.rb-hero-typography-poster .hero-headline,
-  :where(.theme-scope) :where([data-block="hero"]) .rb-hero-title-long.rb-hero-typography-display .hero-headline {
-    font-size: clamp(2.5rem, 11vw, 3.5rem);
-    line-height: 1.05;
-  }
-}
-}
-/* =============================================================================
- * Shared: Heading Group (used by CTA, single-button, etc.)
- * =============================================================================
- */
-/* Eyebrow - color only (typography via .rb-eyebrow) */
-:where(.theme-scope) .heading-eyebrow:not(.rb-eyebrow-treatment-accent) {
-  color: rgb(var(--tb-mutedText));
-}
-/* =============================================================================
- * Block: CTA (Phase 2)
- * =============================================================================
- */
-/* CTA content/body text */
-:where(.theme-scope) :where([data-block="cta-full"]) .cta-content {
-  color: var(--section-supporting-color, rgb(var(--tb-mutedText)));
-}
-/* CTA button row container */
-:where(.theme-scope) :where([data-block="cta-full"]) .cta-row {
-  display: flex;
-  flex-wrap: wrap;
-}
-/* =============================================================================
- * Block: Body Text (content block, Phase 2)
- *
- * Style contract:
- * - Variant styling is keyed off \`data-block-variant\` on the PageRenderer wrapper.
- * - Prose sizing comes from \`rb-prose-*\` (theme-aware) in \`packages/blocks/src/theme/styles.css\`.
- * =============================================================================
- */
-/* Body copy rich text container */
-:where(.theme-scope) :where([data-block="body-text"]) .body-copy-container {
-  max-width: 48rem;
-  margin-left: 0;
-  margin-right: auto;
-}
-:where(.theme-scope) :where([data-block="body-text"]) .body-copy-container.rb-items-center {
-  margin-left: auto;
-  margin-right: auto;
-}
-/* Body copy rich text */
-:where(.theme-scope) :where([data-block="body-text"]) .body-copy-body {
-  color: inherit;
-}
-/* Ensure editing mode doesn't silently change typography inside ProseMirror */
-:where(.theme-scope) :where([data-block="body-text"]) .body-copy-body :where(.ProseMirror) {
-  font-size: inherit;
-  line-height: inherit;
-}
-/* Variant: Intro (centered, wider container, larger text, relaxed leading) */
-:where(.theme-scope) :where([data-block="body-text"][data-block-variant="intro"]) .body-copy-container {
-  max-width: 60rem;
-}
-:where(.theme-scope) :where([data-block="body-text"][data-block-variant="intro"]) .body-copy-body {
-  font-size: var(--rb-prose-lg-font-size);
-  line-height: var(--rb-prose-lg-line-height);
-}
-@container rb-site (min-width: 640px) {
-@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
-:where(.theme-scope) :where([data-block="body-text"][data-block-variant="intro"]) .body-copy-body {
-    font-size: var(--rb-prose-xl-sm-font-size);
-    line-height: var(--rb-prose-xl-sm-line-height);
-  }
-}
-}
-/* Variant: Narrow (left-aligned, shorter line length) */
-:where(.theme-scope) :where([data-block="body-text"][data-block-variant="narrow"]) .body-copy-container {
-  max-width: 34rem;
-  margin-left: 0;
-  margin-right: auto;
-}
-/* Override prose sizing via theme-aware vars (see styles.css) */
-:where(.theme-scope) :where([data-block="body-text"][data-block-variant="intro"]) {
-  /* Mobile-first: use rb-prose-lg sizing below 640px */
-  --rb-prose-lg-font-size: clamp(
-    calc(var(--fs-body, 16px) * 1.35),
-    calc(var(--fs-body, 16px) * 1.1 + 1.25vw),
-    calc(var(--fs-body, 16px) * 1.6)
-  );
-  --rb-prose-lg-line-height: calc(var(--lh-body, 1.65) + 0.2);
-  /* At >= 640px, rb-prose-xl-sm applies and becomes the dominant size */
-  --rb-prose-xl-sm-font-size: clamp(
-    calc(var(--fs-body, 16px) * 1.55),
-    calc(var(--fs-body, 16px) * 1.25 + 1.5vw),
-    calc(var(--fs-body, 16px) * 1.8)
-  );
-  --rb-prose-xl-sm-line-height: calc(var(--lh-body, 1.65) + 0.2);
-}
-/* =============================================================================
- * Block: Form (formCopy fragment, Phase 2)
- * =============================================================================
- */
-/* Form title */
-:where(.theme-scope) :where([data-block="form"]) .form-copy-title {
-  font-size: 1.5rem;
-  font-weight: 600;
-}
-/* Form intro text */
-:where(.theme-scope) :where([data-block="form"]) .form-copy-intro {
-  font-size: 1rem;
-  color: var(--section-text-color, rgb(var(--tb-text)));
-}
 /* =============================================================================
  * Block-Level Override Utilities
  *
@@ -58397,14 +58542,11 @@ var containerResponsiveThemeCss = `/*
   --cr-on-surface-hover-bg: rgba(var(--tb-onSurface, var(--tb-text)), 0.05);
 }
-/* Container */
+/* Container: base styling comes from the shared .rb-reg-surface
+   (registration-surface.css); these overrides preserve course
+   registration's pre-extraction look (fixed padding, centered). */
 :where(.theme-scope) :where([data-block="course-registration"]) .cr-container {
-  border-radius: var(--rb-block-radius);
-  border: 1px solid var(--cr-border);
   padding: 1.5rem;
-  background: rgb(var(--tb-surface));
-  color: var(--cr-on-surface);
-  max-width: 50rem; /* 800px */
   margin-inline: auto;
 }
@@ -59081,7 +59223,7 @@ var containerResponsiveThemeCss = `/*
   padding: 2rem 1rem;
 }
-/* State icon color variants (layout from registration-shared.css) */
+/* State icon color variants (layout from registration-surface.css) */
 :where(.theme-scope) :where([data-block="course-registration"]) .rb-state-icon--success {
   background: var(--cr-success-bg);
   color: var(--cr-success-text);
@@ -61133,6 +61275,8 @@ function PageContent({
         occurrenceContext: dataContext?.occurrenceContext ?? null,
         entrySubrouteContext: dataContext?.entrySubrouteContext ?? null,
         contentEntry: dataContext?.contentEntry ?? null,
+        pageSurface: dataContext?.pageSurface ?? null,
+        subject: dataContext?.subject ?? null,
         editableRouteMetadataFieldIds: dataContext?.editableRouteMetadataFieldIds ?? null,
         previewStage: dataContext?.previewStage,
         supabaseUrl,
@@ -67443,6 +67587,14 @@ var ENDPOINT_DEFINITIONS = {
     responseKind: "json",
     errors: []
   },
+  adminResolveSiteBillingManualReview: {
+    path: "/admin/sites/{siteId}/billing/manual-reviews/{reviewId}/resolve",
+    method: "POST",
+    tags: ["admin", "site-{siteId}", "billing"],
+    auth: "admin",
+    responseKind: "json",
+    errors: []
+  },
   // Admin GSC/SEO endpoints
   adminGscVerifyStart: {
     path: "/admin/seo/gsc/properties/verify/start",