@riverbankcms/sdk 0.96.0 → 0.99.0

package/dist/server/theme-bridge.mjs

@@ -831,15 +831,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: [
       {
@@ -1441,6 +1442,16 @@ var cardSystemSchema = z6.object({
   variants: z6.array(cardVariantSchema).min(1).max(3)
 });
 
+// ../theme-core/src/status/contextualColors.ts
+var STATUS_MUTED_COLOR_VAR = "--rb-status-muted-color";
+var DEFAULT_STATUS_MUTED_COLOR = "rgb(var(--tb-mutedText))";
+function statusMutedColorValue() {
+  return `var(${STATUS_MUTED_COLOR_VAR}, ${DEFAULT_STATUS_MUTED_COLOR})`;
+}
+function statusMutedColorDeclaration() {
+  return `color: ${statusMutedColorValue()};`;
+}
+
 // ../theme-core/src/cards/core.ts
 var CORNER_RADIUS_MAP3 = {
   square: "0",
@@ -7227,7 +7238,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;
@@ -7423,6 +7434,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);
 }
 `;
 }
@@ -7555,25 +7594,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);
 }
 `;
 }
@@ -7864,6 +7918,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);
 }
 `;
 }
@@ -11216,13 +11299,36 @@ var containerResponsiveThemeCss = `/*
  */
 
 /* =============================================================================
- * Shared: Registration Terminal State Icons
- * Used by event-registration and course-registration blocks.
+ * Shared: Registration Surface (issue 1174)
+ *
+ * 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.
  *
- * Layout rules only \u2014 block-specific colors are defined in each block's CSS
- * via scoped \`.rb-state-icon--{variant}\` rules.
+ * 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;
@@ -11238,6 +11344,273 @@ var containerResponsiveThemeCss = `/*
   height: 2rem;
 }
 
+/* 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: 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;
+}
+
+/* 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"], [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"], [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"], [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"], [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"], [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"], [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.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));
+}
+
+/* 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(--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"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-shell-line--lg {
+  width: min(26rem, 82%);
+}
+
+: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"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-shell-line--sm {
+  width: min(14rem, 52%);
+}
+
+: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)
@@ -11261,18 +11634,9 @@ var containerResponsiveThemeCss = `/*
   --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);
-  padding: clamp(1rem, 2vw, 1.5rem);
-  background: rgb(var(--tb-surface));
-  color: var(--er-on-surface);
-  transition: border-color var(--rb-block-transition) ease;
-  width: 100%;
-  max-width: 800px;
-  margin-inline: 0;
-}
+/* 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 {
@@ -11317,32 +11681,8 @@ var containerResponsiveThemeCss = `/*
   padding: 1rem;
 }
 
-:where(.theme-scope) :where([data-block="event-registration"]) .er-registration-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)
-  );
-}
-
-:where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__line--lg {
-  width: min(26rem, 82%);
-}
-
-:where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__line--md {
-  width: min(19rem, 68%);
-}
-
-:where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__line--sm {
-  width: min(14rem, 52%);
-}
-
-:where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__line--xs {
-  width: min(10rem, 42%);
-}
+/* 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;
@@ -11419,13 +11759,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 {
@@ -11631,7 +11966,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);
@@ -11787,16 +12122,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 {
@@ -11805,17 +12132,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;
@@ -11827,18 +12143,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;
@@ -12090,23 +12396,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 {
@@ -12154,78 +12445,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 {
@@ -14458,69 +14683,34 @@ 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%;
-}
-
-/* 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-stack--sm {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-stack--xs {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-/* Row layout */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-row {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-row--between {
-  justify-content: space-between;
-}
-
-/* Grid layout */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-grid {
-  display: grid;
-  gap: 0.75rem;
-}
-
-/* Center layout */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-center {
-  text-align: center;
-  padding: 2rem;
-}
-
-/* Typography */
+/* Typography helpers */
 :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-title {
   font-size: 1.5rem;
-  font-weight: 700;
+  font-weight: 600;
+  line-height: 1.3;
 }
 
 :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-subtitle {
-  font-size: 0.875rem;
-  font-weight: 500;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  line-height: 1.3;
 }
 
 :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-text {
@@ -14531,211 +14721,111 @@ var containerResponsiveThemeCss = `/*
   font-size: 0.75rem;
 }
 
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-text--muted {
-  opacity: var(--ab-text-muted-opacity, 0.6);
-}
-
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-text--faint {
-  opacity: var(--ab-text-faint-opacity, 0.4);
-}
-
-/* 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;
-  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-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));
-}
-
-/* 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;
-}
-
-: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)));
-}
-
-/* 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));
+/* Centered state (loading / terminal panels) */
+:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-center {
+  text-align: center;
+  padding: 2rem;
 }
 
-/* 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;
+/* 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;
 }
 
-: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));
+/* 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"]) .ab-alert--error {
-  background-color: var(--ab-error-bg, rgba(var(--tb-destructive, 220 38 38), 0.1));
+: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)));
 }
 
-: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) :where([data-block="appointment-booking"]) .ab-alert--info {
-  background-color: var(--ab-info-bg, rgba(var(--tb-info, 14 165 233), 0.1));
+: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)));
 }
 
-/* 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;
+: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)));
 }
 
-: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;
+/* 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.125rem;
 }
 
-: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;
+/* 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;
 }
 
-: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));
+: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;
 }
 
-/* Buttons */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-btn {
-  display: inline-flex;
+:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-time-pill {
   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)));
+  padding: 0.5rem 0.875rem;
+  min-width: 5.5rem;
   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;
-}
-
-: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="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="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="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="appointment-booking"]) .ab-btn--link {
-  background: transparent;
-  border: none;
-  padding: 0;
-  text-decoration: underline;
-}
-
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-btn--link:hover {
-  text-decoration: none;
-}
-
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* Actions row */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-actions {
-  display: flex;
-  gap: 0.75rem;
-  margin-top: 1.5rem;
+  text-align: center;
 }
 
-/* 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="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));
 }
 
-@keyframes ab-pulse {
-  0%, 100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.5;
-  }
+:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-pill-value {
+  font-size: 1.125rem;
+  font-weight: 600;
+  line-height: 1.2;
 }
 
-/* Field wrapper */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-field {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
+/* SSR shell skeleton (mirrors the hydrated layout to reduce hydration jump) */
+:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-shell {
+  min-height: 18rem;
 }
 
-/* Altcha wrapper */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-altcha {
-  margin-top: 1rem;
+: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;
 }
 
-/* Link button (inline text link) */
+/* Inline text-link button (e.g. "Load more dates") */
 :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;
@@ -14749,91 +14839,9 @@ var containerResponsiveThemeCss = `/*
   text-decoration: none;
 }
 
-/* =============================================================================
- * Form Block (fb-*)
- *
- * Uses:
- * - Tier 1 vars: --tb-border, --tb-surface, --tb-success, --tb-destructive
- * - Tier 2 vars: --rb-block-radius
- * - Tier 3 vars: --fb-success-*, --fb-error-*, --fb-empty-*
- *
- * Note: Form input styling (form-input, form-select, etc.) is handled by
- * the input CSS generator. These styles are for form container/state only.
- * ============================================================================= */
-
-/* Form container */
-:where(.theme-scope) :where([data-block="form"]) .fb-form {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-/* Two-column row (opt-in per field via schema layout) */
-:where(.theme-scope) :where([data-block="form"]) .fb-row-2 {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
-  gap: 1rem;
-}
-
-/* Field wrapper */
-:where(.theme-scope) :where([data-block="form"]) .fb-field {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-/* Fieldset (for radio groups) */
-:where(.theme-scope) :where([data-block="form"]) .fb-fieldset {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  border: none;
-  padding: 0;
-  margin: 0;
-}
-
-/* Inline field (checkbox, radio with label) */
-:where(.theme-scope) :where([data-block="form"]) .fb-inline {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-/* Success state */
-:where(.theme-scope) :where([data-block="form"]) .fb-success {
-  background-color: var(--fb-success-bg);
-  color: var(--fb-success-text);
-  border: 1px solid var(--fb-success-border);
-  border-radius: var(--rb-block-radius);
-  padding: 1rem;
-  font-size: 0.875rem;
-}
-
-/* Error banner */
-:where(.theme-scope) :where([data-block="form"]) .fb-error {
-  background-color: var(--fb-error-bg);
-  color: var(--fb-error-text);
-  border: 1px solid var(--fb-error-border);
-  border-radius: var(--rb-block-radius);
-  padding: 0.75rem;
-  font-size: 0.875rem;
-  margin-bottom: 0.5rem;
-}
-
-/* Empty state (no form data) */
-:where(.theme-scope) :where([data-block="form"]) .fb-empty {
-  background-color: var(--fb-empty-bg);
-  color: var(--fb-empty-text);
-  border: 1px dashed var(--fb-empty-border);
-  border-radius: var(--rb-block-radius);
-  padding: 1.5rem;
-  font-size: 0.875rem;
-  text-align: center;
-}
-
-/* Form actions (submit button container) */
-:where(.theme-scope) :where([data-block="form"]) .fb-actions {
-  margin-top: 0.5rem;
+/* Altcha wrapper */
+:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-altcha {
+  margin-top: 1rem;
 }
 
 /* =============================================================================
@@ -15091,6 +15099,93 @@ var containerResponsiveThemeCss = `/*
   color: var(--section-text-color, rgb(var(--tb-text)));
 }
 
+/* =============================================================================
+ * Form Block (fb-*)
+ *
+ * Uses:
+ * - Tier 1 vars: --tb-border, --tb-surface, --tb-success, --tb-destructive
+ * - Tier 2 vars: --rb-block-radius
+ * - Tier 3 vars: --fb-success-*, --fb-error-*, --fb-empty-*
+ *
+ * Note: Form input styling (form-input, form-select, etc.) is handled by
+ * the input CSS generator. These styles are for form container/state only.
+ * ============================================================================= */
+
+/* Form container */
+:where(.theme-scope) :where([data-block="form"]) .fb-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+/* Two-column row (opt-in per field via schema layout) */
+:where(.theme-scope) :where([data-block="form"]) .fb-row-2 {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
+  gap: 1rem;
+}
+
+/* Field wrapper */
+:where(.theme-scope) :where([data-block="form"]) .fb-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+/* Fieldset (for radio groups) */
+:where(.theme-scope) :where([data-block="form"]) .fb-fieldset {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+
+/* Inline field (checkbox, radio with label) */
+:where(.theme-scope) :where([data-block="form"]) .fb-inline {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+/* Success state */
+:where(.theme-scope) :where([data-block="form"]) .fb-success {
+  background-color: var(--fb-success-bg);
+  color: var(--fb-success-text);
+  border: 1px solid var(--fb-success-border);
+  border-radius: var(--rb-block-radius);
+  padding: 1rem;
+  font-size: 0.875rem;
+}
+
+/* Error banner */
+:where(.theme-scope) :where([data-block="form"]) .fb-error {
+  background-color: var(--fb-error-bg);
+  color: var(--fb-error-text);
+  border: 1px solid var(--fb-error-border);
+  border-radius: var(--rb-block-radius);
+  padding: 0.75rem;
+  font-size: 0.875rem;
+  margin-bottom: 0.5rem;
+}
+
+/* Empty state (no form data) */
+:where(.theme-scope) :where([data-block="form"]) .fb-empty {
+  background-color: var(--fb-empty-bg);
+  color: var(--fb-empty-text);
+  border: 1px dashed var(--fb-empty-border);
+  border-radius: var(--rb-block-radius);
+  padding: 1.5rem;
+  font-size: 0.875rem;
+  text-align: center;
+}
+
+/* Form actions (submit button container) */
+:where(.theme-scope) :where([data-block="form"]) .fb-actions {
+  margin-top: 0.5rem;
+}
+
 /* =============================================================================
  * Block-Level Override Utilities
  *
@@ -16707,14 +16802,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;
 }
 
@@ -17391,7 +17483,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);