@riverbankcms/sdk 0.151.0 → 0.152.0

package/dist/server/theme-bridge.mjs

@@ -10530,7 +10530,7 @@ const opaquePanels = [
 		}
 	},
 	{
-		selector: ":where([data-block='event-registration']) .er-booking-teaser",
+		selector: ":where([data-block='event-registration']) .er-booking-card",
 		paint: {
 			kind: "solid",
 			token: "surface"
@@ -10540,7 +10540,7 @@ const opaquePanels = [
 		selector: ":where([data-block='event-registration']) .er-booking-bar",
 		paint: {
 			kind: "solid",
-			token: "background"
+			token: "surface"
 		}
 	},
 	{
@@ -10554,7 +10554,7 @@ const opaquePanels = [
 		selector: ":where([data-block='event-registration']) .er-booking-overlay__panel",
 		paint: {
 			kind: "solid",
-			token: "background"
+			token: "surface"
 		}
 	},
 	{
@@ -18369,25 +18369,25 @@ ${root} .alert {
 
 ${root} .alert-error {
   border-color: rgb(var(--tb-destructive));
-  background-color: rgba(var(--tb-destructive), 0.1);
+  background-color: rgb(var(--tb-destructive) / 0.1);
   color: rgb(var(--tb-destructive));
 }
 
 ${root} .alert-success {
   border-color: rgb(var(--tb-success));
-  background-color: rgba(var(--tb-success), 0.1);
+  background-color: rgb(var(--tb-success) / 0.1);
   color: rgb(var(--tb-success));
 }
 
 ${root} .alert-warning {
   border-color: rgb(var(--tb-warning));
-  background-color: rgba(var(--tb-warning), 0.1);
+  background-color: rgb(var(--tb-warning) / 0.1);
   color: rgb(var(--tb-warning));
 }
 
 ${root} .alert-info {
   border-color: rgb(var(--tb-info));
-  background-color: rgba(var(--tb-info), 0.1);
+  background-color: rgb(var(--tb-info) / 0.1);
   color: rgb(var(--tb-info));
 }`);
 	cssBlocks.push(`/* Field-note feedback treatment */
@@ -18501,7 +18501,7 @@ ${root} .step-dot-active {
 }
 
 ${root} .step-dot-complete {
-  background-color: rgba(var(--tb-primary), 0.6);
+  background-color: rgb(var(--tb-primary) / 0.6);
 }`);
 	cssBlocks.push(`/* Step circles (numbered) */
 ${root} .step-circle {
@@ -18524,7 +18524,7 @@ ${root} .step-circle-active {
 }
 
 ${root} .step-circle-complete {
-  background-color: rgba(var(--tb-primary), 0.6);
+  background-color: rgb(var(--tb-primary) / 0.6);
   color: rgb(var(--tb-primaryForeground));
 }`);
 	cssBlocks.push(`/* Step connector */
@@ -18692,62 +18692,52 @@ ${`:where([data-theme-scope="${themeId}"]) :where([data-block="event-registratio
   --er-control-bg: rgb(var(--tb-background, var(--tb-surface)));
   --er-control-text: rgb(var(--tb-foreground, var(--tb-text)));
   --er-radius: var(--rb-block-radius);
-  --er-surface-muted: rgba(var(--tb-muted, 241 245 249), 0.42);
-  --er-shell-line: rgba(var(--tb-mutedText, 100 116 139), 0.22);
+  --er-surface-muted: rgb(var(--tb-muted, 241 245 249) / 0.42);
+  --er-shell-line: rgb(var(--tb-mutedText, 100 116 139) / 0.22);
 
   /* Step indicator */
   --er-step-active: rgb(var(--tb-primary));
-  --er-step-inactive: rgb(var(--tb-mutedText));
-  --er-step-completed: rgb(var(--tb-success));
-  --er-step-text: rgb(255 255 255);
-  --er-step-text-active: rgb(var(--tb-onPrimary, 255 255 255));
-  --er-step-connector: rgba(var(--tb-border), 0.5);
 
   /* Step title */
-  --er-step-title-size: 1.5rem;
+  --er-step-title-size: 1.75rem;
 
   /* State backgrounds with alpha */
-  --er-success-bg: rgba(var(--tb-success), 0.1);
-  --er-success-text: rgb(var(--tb-success));
-  --er-info-bg: rgba(var(--tb-primary), 0.1);
+  --er-info-bg: rgb(var(--tb-primary) / 0.1);
   --er-info-text: rgb(var(--tb-primary));
-  --er-error-bg: rgba(var(--tb-destructive, 239 68 68), 0.1);
+  --er-error-bg: rgb(var(--tb-destructive, 239 68 68) / 0.1);
   --er-error-text: rgb(var(--tb-destructive, 239 68 68));
-  --er-waitlist-bg: rgba(var(--tb-warning), 0.1);
+  --er-waitlist-bg: rgb(var(--tb-warning) / 0.1);
   --er-waitlist-text: rgb(var(--tb-warning));
 
   /* Capacity badges */
-  --er-capacity-available-bg: rgba(var(--tb-success), 0.1);
+  --er-capacity-available-bg: rgb(var(--tb-success) / 0.1);
   --er-capacity-available-text: rgb(var(--tb-success));
-  --er-capacity-low-bg: rgba(var(--tb-warning), 0.1);
+  --er-capacity-low-bg: rgb(var(--tb-warning) / 0.1);
   --er-capacity-low-text: rgb(var(--tb-warning));
-  --er-capacity-soldout-bg: rgba(var(--tb-destructive, 239 68 68), 0.1);
+  --er-capacity-soldout-bg: rgb(var(--tb-destructive, 239 68 68) / 0.1);
   --er-capacity-soldout-text: rgb(var(--tb-destructive, 239 68 68));
 
   /* Borders */
   --er-border: rgb(var(--tb-border));
-  --er-border-hover: rgba(var(--tb-primary), 0.5);
+  --er-border-hover: rgb(var(--tb-primary) / 0.5);
   --er-border-selected: rgb(var(--tb-primary));
   --er-border-error: rgb(var(--tb-destructive, 239 68 68));
 
   /* Input focus */
-  --er-focus-ring: rgba(var(--tb-primary), 0.3);
-
-  /* Required marker */
-  --er-required: rgb(var(--tb-destructive, 239 68 68));
+  --er-focus-ring: rgb(var(--tb-primary) / 0.3);
 
   /* Payment option cards */
   --er-payment-border: rgb(var(--tb-border));
-  --er-payment-border-hover: rgba(var(--tb-primary), 0.5);
+  --er-payment-border-hover: rgb(var(--tb-primary) / 0.5);
   --er-payment-border-selected: rgb(var(--tb-primary));
-  --er-payment-bg-selected: rgba(var(--tb-primary), 0.08);
+  --er-payment-bg-selected: rgb(var(--tb-primary) / 0.08);
 
   /* Checkmark indicator */
   --er-check-bg: rgb(var(--tb-primary));
   --er-check-text: rgb(var(--tb-onPrimary, 255 255 255));
 
   /* Order summary */
-  --er-summary-bg: rgba(var(--tb-primary), 0.1);
+  --er-summary-bg: rgb(var(--tb-primary) / 0.1);
   --er-summary-border: rgb(var(--tb-border));
 
   /* Shared registration-surface mappings (issue 1174).
@@ -18759,7 +18749,7 @@ ${`:where([data-theme-scope="${themeId}"]) :where([data-block="event-registratio
   --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-option-hover-shadow: 0 8px 18px rgb(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);
@@ -18768,11 +18758,6 @@ ${`:where([data-theme-scope="${themeId}"]) :where([data-block="event-registratio
   --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);
@@ -18819,13 +18804,13 @@ function generateEventCalendarVars({ themeId }) {
 	return `
 ${`:where([data-theme-scope="${themeId}"]) :where([data-block="event-calendar"])`} {
   /* Day cell states */
-  --ec-today-bg: rgba(var(--tb-primary), 0.05);
+  --ec-today-bg: rgb(var(--tb-primary) / 0.05);
   --ec-today-text: rgb(var(--tb-primary));
   --ec-other-month-opacity: 0.4;
 
   /* Event items - subtle style (legacy) */
-  --ec-event-bg: rgba(var(--tb-primary), 0.1);
-  --ec-event-hover-bg: rgba(var(--tb-primary), 0.2);
+  --ec-event-bg: rgb(var(--tb-primary) / 0.1);
+  --ec-event-hover-bg: rgb(var(--tb-primary) / 0.2);
 
   /* Event items - solid style (default) */
   --ec-event-solid-bg: rgb(var(--tb-primary));
@@ -18833,15 +18818,15 @@ ${`:where([data-theme-scope="${themeId}"]) :where([data-block="event-calendar"])
   --ec-event-solid-text: rgb(var(--tb-neutral-50, 255 255 255));
 
   /* Navigation */
-  --ec-nav-hover-bg: rgba(var(--tb-text), 0.1);
+  --ec-nav-hover-bg: rgb(var(--tb-text) / 0.1);
 
   /* Day headers */
-  --ec-header-bg: rgba(var(--tb-text), 0.05);
+  --ec-header-bg: rgb(var(--tb-text) / 0.05);
   --ec-header-opacity: 0.7;
 
   /* Borders */
   --ec-border: rgb(var(--tb-border));
-  --ec-border-subtle: rgba(var(--tb-border), 0.5);
+  --ec-border-subtle: rgb(var(--tb-border) / 0.5);
 
   /* Surface and text (for inputs/dropdowns) */
   --ec-surface: rgb(var(--tb-surface));
@@ -18910,29 +18895,27 @@ function generateAppointmentBookingVars({ themeId }) {
 ${`:where([data-theme-scope="${themeId}"]) :where([data-block="appointment-booking"])`} {
   /* Selection cards (service/resource/time) */
   --ab-card-border: rgb(var(--tb-border));
-  --ab-card-border-hover: rgba(var(--tb-primary), 0.5);
+  --ab-card-border-hover: rgb(var(--tb-primary) / 0.5);
   --ab-card-border-selected: rgb(var(--tb-primary));
-  --ab-card-bg-selected: rgba(var(--tb-primary), 0.05);
+  --ab-card-bg-selected: rgb(var(--tb-primary) / 0.05);
 
   /* Checkmark indicator */
   --ab-check-bg: rgb(var(--tb-primary));
   --ab-check-text: rgb(var(--tb-background));
 
   /* State backgrounds */
-  --ab-success-bg: rgba(var(--tb-success), 0.1);
-  --ab-success-text: rgb(var(--tb-success));
-  --ab-error-bg: rgba(var(--tb-destructive), 0.1);
+  --ab-error-bg: rgb(var(--tb-destructive) / 0.1);
   --ab-error-text: rgb(var(--tb-destructive));
-  --ab-warning-bg: rgba(var(--tb-warning), 0.1);
+  --ab-warning-bg: rgb(var(--tb-warning) / 0.1);
   --ab-warning-text: rgb(var(--tb-warning));
-  --ab-info-bg: rgba(var(--tb-info), 0.1);
+  --ab-info-bg: rgb(var(--tb-info) / 0.1);
   --ab-info-text: rgb(var(--tb-info));
 
   /* Muted summary state */
-  --ab-muted-bg: rgba(var(--tb-text), 0.05);
+  --ab-muted-bg: rgb(var(--tb-text) / 0.05);
 
   /* Focus ring used by shared registration-surface controls */
-  --ab-input-focus-ring: rgba(var(--tb-primary), 0.3);
+  --ab-input-focus-ring: rgb(var(--tb-primary) / 0.3);
 
   /* Shared registration-surface mappings (issue 1174).
      Route the shared --rb-reg-* contract through this block's Tier 3 vars
@@ -18944,24 +18927,19 @@ ${`:where([data-theme-scope="${themeId}"]) :where([data-block="appointment-booki
   --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-option-hover-shadow: 0 8px 18px rgb(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-on-surface-muted: rgb(var(--tb-onSurface, var(--tb-text)) / 0.7);
+  --rb-reg-on-surface-subtle: rgb(var(--tb-onSurface, var(--tb-text)) / 0.6);
+  --rb-reg-on-surface-faint: rgb(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-onPrimary, 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);
+  --rb-reg-shell-line: rgb(var(--tb-mutedText, 100 116 139) / 0.22);
 }
 `;
 }
@@ -18980,14 +18958,14 @@ function generateFormBlockVars({ themeId }) {
 	return `
 ${`:where([data-theme-scope="${themeId}"]) :where([data-block="form"])`} {
   /* Success state */
-  --fb-success-bg: rgba(var(--tb-success), 0.1);
+  --fb-success-bg: rgb(var(--tb-success) / 0.1);
   --fb-success-text: rgb(var(--tb-success));
-  --fb-success-border: rgba(var(--tb-success), 0.3);
+  --fb-success-border: rgb(var(--tb-success) / 0.3);
 
   /* Error state */
-  --fb-error-bg: rgba(var(--tb-destructive), 0.1);
+  --fb-error-bg: rgb(var(--tb-destructive) / 0.1);
   --fb-error-text: rgb(var(--tb-destructive));
-  --fb-error-border: rgba(var(--tb-destructive), 0.3);
+  --fb-error-border: rgb(var(--tb-destructive) / 0.3);
 
   /* Empty state */
   --fb-empty-bg: rgb(var(--tb-surface));
@@ -19048,23 +19026,23 @@ ${`:where([data-theme-scope="${themeId}"]) :where([data-block="customer-portal"]
   --rb-tab-opacity: 0.7;
 
   /* Badge - Success (active, confirmed) */
-  --cp-badge-success-bg: rgba(var(--tb-success), 0.1);
+  --cp-badge-success-bg: rgb(var(--tb-success) / 0.1);
   --cp-badge-success-text: rgb(var(--tb-success));
 
   /* Badge - Warning (paused, low credits, waitlist) */
-  --cp-badge-warning-bg: rgba(var(--tb-warning), 0.1);
+  --cp-badge-warning-bg: rgb(var(--tb-warning) / 0.1);
   --cp-badge-warning-text: rgb(var(--tb-warning));
 
   /* Badge - Error (canceled, expired, past_due) */
-  --cp-badge-error-bg: rgba(var(--tb-destructive), 0.1);
+  --cp-badge-error-bg: rgb(var(--tb-destructive) / 0.1);
   --cp-badge-error-text: rgb(var(--tb-destructive));
 
   /* Badge - Info (trialing, scheduled) */
-  --cp-badge-info-bg: rgba(var(--tb-primary), 0.1);
+  --cp-badge-info-bg: rgb(var(--tb-primary) / 0.1);
   --cp-badge-info-text: rgb(var(--tb-primary));
 
   /* Badge - Default (neutral states) */
-  --cp-badge-default-bg: rgba(var(--tb-mutedText), 0.1);
+  --cp-badge-default-bg: rgb(var(--tb-mutedText) / 0.1);
   --cp-badge-default-text: rgb(var(--tb-mutedText));
 
   /* Progress bar (for credit display) */
@@ -19076,10 +19054,10 @@ ${`:where([data-theme-scope="${themeId}"]) :where([data-block="customer-portal"]
   --cp-card-border: rgb(var(--tb-border));
 
   /* Alert/notification */
-  --cp-alert-success-bg: rgba(var(--tb-success), 0.1);
+  --cp-alert-success-bg: rgb(var(--tb-success) / 0.1);
   --cp-alert-success-text: rgb(var(--tb-success));
   --cp-alert-success-border: rgb(var(--tb-success));
-  --cp-alert-error-bg: rgba(var(--tb-destructive), 0.1);
+  --cp-alert-error-bg: rgb(var(--tb-destructive) / 0.1);
   --cp-alert-error-text: rgb(var(--tb-destructive));
   --cp-alert-error-border: rgb(var(--tb-destructive));
 
@@ -19176,7 +19154,7 @@ ${root} {
   --rb-testimonial-carousel-arrow-bg: rgb(var(--tb-secondary));
   --rb-testimonial-carousel-arrow-bg-hover: color-mix(in oklab, rgb(var(--tb-secondary)), rgb(var(--tb-text)) 14%);
   --rb-testimonial-carousel-arrow-color: rgb(var(--tb-onSecondary));
-  --rb-testimonial-carousel-arrow-border-color: rgba(var(--tb-onSecondary), 0.22);
+  --rb-testimonial-carousel-arrow-border-color: rgb(var(--tb-onSecondary) / 0.22);
   --rb-testimonial-carousel-arrow-size: 2.75rem;
   --rb-testimonial-carousel-arrow-icon-size: 1.25rem;
   --rb-testimonial-carousel-arrow-icon-stroke-width: 2.5;
@@ -20141,6 +20119,13 @@ const containerResponsiveThemeCss = `/*
         var(--site-overlay-opening-content-extra-pad, clamp(1rem, 2vw, 1.75rem))
     );
   }
+  /* Floating site overlays (a booking bar, a cookie banner, a sticky promo)
+     mark themselves [data-rb-site-overlay]. While a preview is in edit mode
+     (the preview shell sets the root attribute) they step aside, out of the
+     focus order too; switching back to viewing restores them as they were. */
+  :root[data-rb-preview-mode="edit"] [data-rb-site-overlay] {
+    display: none;
+  }
   .rb-preview-editor-offset {
     padding-bottom: calc(
       var(--builder-editor-chrome-offset, 0px) +
@@ -20726,7 +20711,7 @@ const containerResponsiveThemeCss = `/*
   .rb-spinner {
     --rb-spinner-size: 2rem;
     --rb-spinner-duration: 0.9s;
-    --rb-spinner-track-color: rgba(var(--tb-foreground), 0.15);
+    --rb-spinner-track-color: rgb(var(--tb-foreground) / 0.15);
 
     display: inline-flex;
     align-items: center;
@@ -21229,12 +21214,12 @@ const containerResponsiveThemeCss = `/*
 
   :where(.theme-scope) .rb-modal__close:hover {
     color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));
-    background: rgba(var(--tb-border), 0.2);
+    background: rgb(var(--tb-border) / 0.2);
   }
 
   :where(.theme-scope) .rb-modal__close:focus-visible {
     outline: none;
-    box-shadow: 0 0 0 3px rgba(var(--tb-primary), 0.15);
+    box-shadow: 0 0 0 3px rgb(var(--tb-primary) / 0.15);
   }
 
   :where(.theme-scope) .rb-modal__body {
@@ -21719,7 +21704,7 @@ const containerResponsiveThemeCss = `/*
   :where(.theme-scope) .rb-prose code {
     /* Inline code uses text color with surface background */
     color: inherit;
-    background-color: rgba(var(--tb-surface), 0.5);
+    background-color: rgb(var(--tb-surface) / 0.5);
     padding: 0.125rem 0.25rem;
     border-radius: 0.25rem;
     font-size: 0.875em;
@@ -22711,17 +22696,17 @@ const containerResponsiveThemeCss = `/*
 
   /* All badges use a subtle theme-aware style by default */
   :where(.theme-scope) .badge-status-available {
-    background-color: rgba(var(--tb-secondary), 0.15);
+    background-color: rgb(var(--tb-secondary) / 0.15);
     color: rgb(var(--tb-secondary-700, var(--tb-secondary)));
   }
 
   :where(.theme-scope) .badge-status-low {
-    background-color: rgba(var(--tb-accent), 0.15);
+    background-color: rgb(var(--tb-accent) / 0.15);
     color: rgb(var(--tb-accent-700, var(--tb-accent)));
   }
 
   :where(.theme-scope) .badge-status-sold-out {
-    background-color: rgba(var(--tb-text), 0.1);
+    background-color: rgb(var(--tb-text) / 0.1);
     color: rgb(var(--tb-mutedText));
   }
 
@@ -22790,7 +22775,7 @@ const containerResponsiveThemeCss = `/*
  * 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-*\`,
+ * precedent (\`.rb-state-icon\`, \`.rb-tile\`): \`.rb-option-card\`, \`.rb-progress*\`,
  * \`.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
@@ -22813,6 +22798,13 @@ const containerResponsiveThemeCss = `/*
   height: 2rem;
 }
 
+/* The success tick reads as a mark inside its disc, not a line drawing */
+:where(.theme-scope) .rb-state-icon--success svg {
+  width: 1.75rem;
+  height: 1.75rem;
+  stroke-width: 3;
+}
+
 /* Surface container */
 :where(.theme-scope) :where([data-block="event-registration"], [data-block="appointment-booking"]) .rb-reg-surface {
   border-radius: var(--rb-reg-radius, var(--rb-block-radius, 1rem));
@@ -22849,18 +22841,18 @@ const containerResponsiveThemeCss = `/*
 }
 
 :where(.theme-scope) :where([data-block="event-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));
+  border-color: var(--rb-reg-border-hover, rgb(var(--tb-primary, 17 24 39) / 0.5));
+  box-shadow: var(--rb-reg-option-hover-shadow, 0 8px 18px rgb(var(--tb-shadow, 15 23 42) / 0.08));
 }
 
 :where(.theme-scope) :where([data-block="event-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: 2px solid var(--rb-reg-focus-ring, rgb(var(--tb-primary, 17 24 39) / 0.3));
   outline-offset: 2px;
 }
 
 :where(.theme-scope) :where([data-block="event-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));
+  background-color: var(--rb-reg-bg-selected, rgb(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)));
 }
 
@@ -22892,78 +22884,45 @@ const containerResponsiveThemeCss = `/*
   color: var(--rb-reg-check-text, rgb(var(--tb-onPrimary, var(--tb-primaryForeground, 255 255 255))));
 }
 
-/* Step indicator */
-:where(.theme-scope) :where([data-block="event-registration"], [data-block="appointment-booking"]) .rb-steps-nav {
-  margin-bottom: 1.5rem;
-}
-
-:where(.theme-scope) :where([data-block="event-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="appointment-booking"]) .rb-step {
+/* Progress: the current step's label, "Step N of M" and a thin bar (issue 1581) */
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="appointment-booking"]) .rb-progress {
   display: flex;
-  align-items: center;
+  flex-direction: column;
   gap: 0.5rem;
+  margin-bottom: 1.5rem;
 }
 
-:where(.theme-scope) :where([data-block="event-registration"], [data-block="appointment-booking"]) .rb-step-circle {
-  width: 1.75rem;
-  height: 1.75rem;
-  border-radius: 50%;
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="appointment-booking"]) .rb-progress__head {
   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="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-onPrimary, var(--tb-primaryForeground, 255 255 255))));
-}
-
-:where(.theme-scope) :where([data-block="event-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-onPrimary, var(--tb-primaryForeground, 255 255 255))));
-}
-
-:where(.theme-scope) :where([data-block="event-registration"], [data-block="appointment-booking"]) .rb-step-check {
-  width: 0.75rem;
-  height: 0.75rem;
-}
-
-:where(.theme-scope) :where([data-block="event-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));
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 1rem;
+  font-size: 0.8125rem;
+  line-height: 1.3;
 }
 
-:where(.theme-scope) :where([data-block="event-registration"], [data-block="appointment-booking"]) .rb-step-label {
-  font-size: 0.75rem;
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="appointment-booking"]) .rb-progress__label {
+  font-weight: 700;
   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="appointment-booking"]) .rb-step-label--active {
-  font-weight: 500;
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="appointment-booking"]) .rb-progress__count {
+  margin-inline-start: auto;
+  color: var(--rb-reg-on-surface-muted, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42)) / 0.7));
 }
 
-@container rb-site (min-width: 640px) {
-@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
-:where(.theme-scope:is(*, :scope)) :where([data-block="event-registration"], [data-block="appointment-booking"]) .rb-step-label {
-    display: inline;
-  }
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="appointment-booking"]) .rb-progress__track {
+  height: 4px;
+  border-radius: 4px;
+  background: rgb(var(--tb-onSurface, var(--tb-text, 15 23 42)) / 0.12);
+  overflow: hidden;
 }
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="appointment-booking"]) .rb-progress__fill {
+  height: 100%;
+  border-radius: 4px;
+  background: var(--rb-reg-step-active, rgb(var(--tb-primary, 17 24 39)));
+  transition: width var(--rb-block-transition, 150ms) ease;
 }
 
 /* Wizard actions row */
@@ -22980,21 +22939,26 @@ const containerResponsiveThemeCss = `/*
   margin-inline-start: auto;
 }
 
+/* A footer with only Back keeps it bottom-left, like every other step */
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="appointment-booking"]) .rb-wizard-actions--back-only > :only-child {
+  margin-inline-start: 0;
+}
+
 /* On-surface text ramp */
 :where(.theme-scope) :where([data-block="event-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="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));
+  color: var(--rb-reg-on-surface-muted, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42)) / 0.7));
 }
 
 :where(.theme-scope) :where([data-block="event-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));
+  color: var(--rb-reg-on-surface-subtle, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42)) / 0.6));
 }
 
 :where(.theme-scope) :where([data-block="event-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));
+  color: var(--rb-reg-on-surface-faint, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42)) / 0.5));
 }
 
 /* Layout stacks */
@@ -23029,7 +22993,7 @@ const containerResponsiveThemeCss = `/*
   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));
+  background: var(--rb-reg-summary-bg, rgb(var(--tb-muted, 241 245 249) / 0.42));
 }
 
 /* Skeleton shell lines */
@@ -23038,9 +23002,9 @@ const containerResponsiveThemeCss = `/*
   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))
+    var(--rb-reg-shell-line, rgb(var(--tb-mutedText, 100 116 139) / 0.22)),
+    rgb(var(--tb-primary, 17 24 39) / 0.12),
+    var(--rb-reg-shell-line, rgb(var(--tb-mutedText, 100 116 139) / 0.22))
   );
 }
 
@@ -23065,7 +23029,7 @@ const containerResponsiveThemeCss = `/*
   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));
+  background: var(--rb-reg-shell-line, rgb(var(--tb-mutedText, 100 116 139) / 0.22));
   animation: rb-reg-pulse 1.5s ease-in-out infinite;
 }
 
@@ -23084,6 +23048,101 @@ const containerResponsiveThemeCss = `/*
   }
 }
 
+/* Payment choices (issue 1581): one full-width radio row per way to pay, the
+ * label and detail on the left, the price on the right. Shared by event and
+ * appointment booking (PaymentChoiceRows). */
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="appointment-booking"]) .rb-pay-choices {
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="appointment-booking"]) .rb-pay-choice {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.875rem;
+  padding: 1rem 1.125rem;
+  border: 1px solid var(--rb-reg-border, rgb(var(--tb-border)));
+  border-radius: var(--rb-reg-radius, var(--rb-block-radius, 1rem));
+  background: var(--rb-reg-option-bg, transparent);
+  color: var(--rb-surface-text-color, rgb(var(--tb-text)));
+  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="event-registration"], [data-block="appointment-booking"]) .rb-pay-choice:hover:not(.rb-pay-choice--disabled) {
+  border-color: var(--rb-reg-border-hover, rgb(var(--tb-primary) / 0.5));
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="appointment-booking"]) .rb-pay-choice:focus-within {
+  box-shadow: 0 0 0 3px rgb(var(--tb-primary) / 0.25);
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="appointment-booking"]) .rb-pay-choice--selected {
+  border-color: rgb(var(--tb-primary));
+  box-shadow: inset 0 0 0 1px rgb(var(--tb-primary));
+  background: rgb(var(--tb-primary) / 0.06);
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="appointment-booking"]) .rb-pay-choice--selected:focus-within {
+  box-shadow:
+    inset 0 0 0 1px rgb(var(--tb-primary)),
+    0 0 0 3px rgb(var(--tb-primary) / 0.25);
+}
+
+/* Disabled stays readable: a dashed edge and quieter text, with its reason */
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="appointment-booking"]) .rb-pay-choice--disabled {
+  border-style: dashed;
+  cursor: not-allowed;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="appointment-booking"]) .rb-pay-choice--disabled :is(.rb-pay-choice__label, .rb-pay-choice__detail, .rb-pay-choice__price) {
+  opacity: 0.65;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="appointment-booking"]) .rb-pay-choice__radio {
+  flex: 0 0 auto;
+  width: 1.25rem;
+  height: 1.25rem;
+  margin: 0.125rem 0 0;
+  accent-color: rgb(var(--tb-primary));
+  cursor: inherit;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="appointment-booking"]) .rb-pay-choice__body {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="appointment-booking"]) .rb-pay-choice__label {
+  font-weight: 700;
+  line-height: 1.35;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="appointment-booking"]) .rb-pay-choice__detail {
+  font-size: 0.875rem;
+  line-height: 1.4;
+  color: var(--rb-surface-supporting-color, rgb(var(--tb-text) / 0.7));
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="appointment-booking"]) .rb-pay-choice__reason {
+  font-size: 0.8125rem;
+  line-height: 1.4;
+  color: var(--rb-surface-text-color, rgb(var(--tb-text)));
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="appointment-booking"]) .rb-pay-choice__price {
+  flex: 0 0 auto;
+  font-weight: 700;
+  text-align: end;
+  white-space: nowrap;
+}
+
 /* =============================================================================
  * Block: Event Registration (pilot #76)
  * Uses CSS vars: --er-* (Tier 3) and --rb-block-* (Tier 2)
@@ -23098,17 +23157,14 @@ const containerResponsiveThemeCss = `/*
   --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);
+  --rb-event-tile-bg-selected: rgb(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-hover-bg: rgba(var(--tb-onSurface, var(--tb-text)), 0.05);
-  --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
-  );
+  --er-on-surface-muted: rgb(var(--tb-onSurface, var(--tb-text)) / 0.7);
+  --er-on-surface-subtle: rgb(var(--tb-onSurface, var(--tb-text)) / 0.6);
+  --er-on-surface-faint: rgb(var(--tb-onSurface, var(--tb-text)) / 0.5);
+  --er-on-surface-hover-bg: rgb(var(--tb-onSurface, var(--tb-text)) / 0.05);
+  --er-on-surface-disabled: rgb(var(--tb-onSurface, var(--tb-text)) / 0.78);
+  --er-on-surface-disabled-detail: rgb(var(--tb-onSurface, var(--tb-text)) / 0.68);
 }
 
 /* Container: styled by the shared .rb-reg-surface (registration-surface.css);
@@ -23236,6 +23292,109 @@ const containerResponsiveThemeCss = `/*
   opacity: 0.6;
 }
 
+/* Date step (issue 1581): one radio row per date, on the shared event tile */
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-date-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+}
+
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-date-list__month {
+  margin: 0.5rem 0 0;
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--rb-surface-supporting-color, var(--er-on-surface-muted));
+}
+
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-date-list__month:first-child {
+  margin-top: 0;
+}
+
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-event-card.er-date-option {
+  display: flex;
+  align-items: center;
+  gap: 0.875rem;
+  padding: 0.875rem 1rem;
+  color: var(--rb-surface-text-color, rgb(var(--tb-text)));
+}
+
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-date-option:focus-within {
+  box-shadow: 0 0 0 3px rgb(var(--tb-primary) / 0.25);
+}
+
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-date-option__radio {
+  flex: 0 0 auto;
+  width: 1.25rem;
+  height: 1.25rem;
+  margin: 0;
+  accent-color: rgb(var(--tb-primary));
+  cursor: pointer;
+}
+
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-date-option__main {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-date-option__date {
+  font-weight: 700;
+  line-height: 1.3;
+}
+
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-date-option__time {
+  font-size: 0.875rem;
+  color: var(--rb-surface-supporting-color, var(--er-on-surface-muted));
+}
+
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-date-option__places {
+  flex: 0 0 auto;
+  padding: 0.125rem 0.5rem;
+  border: 1px solid var(--er-border);
+  border-radius: 999px;
+  font-size: 0.75rem;
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+/* Full dates stay selectable (a guest can still reach recovery) but read as quiet */
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-date-option--full {
+  border-style: dashed;
+}
+
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-date-option--full
+  :is(.er-date-option__main, .er-date-option__places) {
+  opacity: 0.6;
+}
+
 /* Capacity badges */
 :where(.theme-scope)
   :where([data-block='event-registration'])
@@ -23441,63 +23600,31 @@ const containerResponsiveThemeCss = `/*
 }
 }
 
-/* Form inputs */
-:where(.theme-scope) :where([data-block='event-registration']) .er-input {
-  width: 100%;
-  min-height: 2.75rem;
-  padding: 0.625rem 0.75rem;
-  border-radius: calc(var(--rb-block-radius) * 0.5);
-  border: 1px solid var(--er-border);
-  background: var(--er-control-bg);
-  color: var(--er-control-text);
-  font: inherit;
-  line-height: 1.4;
-  transition:
-    border-color var(--rb-block-transition) ease,
-    background-color var(--rb-block-transition) ease,
-    box-shadow var(--rb-block-transition) ease;
-}
-
-:where(.theme-scope)
-  :where([data-block='event-registration'])
-  .er-input::placeholder {
-  color: var(--er-on-surface-faint);
-}
-
-:where(.theme-scope) :where([data-block='event-registration']) .er-input:focus {
-  outline: none;
-  border-color: var(--er-border-selected);
-  box-shadow: 0 0 0 3px var(--er-focus-ring);
-}
+/* Fields use the theme's own form-label / form-input / form-textarea
+   (theme-core/src/inputs/generateInputCss.ts), like the site's form block. */
 
 :where(.theme-scope)
   :where([data-block='event-registration'])
-  .er-input--error {
-  border-color: var(--er-border-error);
+  .er-label-optional {
+  font-weight: 400;
+  text-transform: none;
+  letter-spacing: normal;
+  color: var(--rb-surface-supporting-color, var(--er-on-surface-muted));
 }
 
 :where(.theme-scope)
   :where([data-block='event-registration'])
-  .er-input--error:focus {
-  box-shadow: 0 0 0 3px rgba(var(--tb-destructive), 0.2);
-}
-
-/* Form labels and errors */
-:where(.theme-scope) :where([data-block='event-registration']) .er-label {
-  display: block;
-  font-size: 0.875rem;
-  font-weight: 500;
-  margin-bottom: 0.25rem;
+  .er-field-hint {
+  margin: 0.375rem 0 0;
+  font-size: 0.8125rem;
+  line-height: 1.4;
+  color: var(--rb-surface-supporting-color, var(--er-on-surface-muted));
 }
 
 :where(.theme-scope) :where([data-block='event-registration']) .er-consent-check {
   margin-top: 0.75rem;
 }
 
-:where(.theme-scope) :where([data-block='event-registration']) .er-required {
-  color: var(--er-required);
-}
-
 :where(.theme-scope) :where([data-block='event-registration']) .er-error {
   font-size: 0.875rem;
   color: var(--er-error-text);
@@ -23506,12 +23633,14 @@ const containerResponsiveThemeCss = `/*
 
 /* Back button */
 :where(.theme-scope) :where([data-block='event-registration']) .er-back-btn {
-  font-size: 0.875rem;
-  opacity: 0.7;
+  font-size: 0.9375rem;
+  font-weight: 700;
+  opacity: 0.8;
   background: none;
   border: none;
   cursor: pointer;
-  padding: 0;
+  padding: 0 0.25rem;
+  min-height: 2.75rem;
   transition: opacity var(--rb-block-transition) ease;
 }
 
@@ -23522,11 +23651,12 @@ const containerResponsiveThemeCss = `/*
 }
 
 /* State icon color variants (layout from registration-surface.css) */
+/* Success: a solid primary disc with an on-primary tick (issue 1581) */
 :where(.theme-scope)
   :where([data-block='event-registration'])
   .rb-state-icon--success {
-  background: var(--er-success-bg);
-  color: var(--er-success-text);
+  background: rgb(var(--tb-primary));
+  color: rgb(var(--tb-onPrimary));
 }
 
 :where(.theme-scope)
@@ -23575,14 +23705,15 @@ const containerResponsiveThemeCss = `/*
 
 /* Typography */
 :where(.theme-scope) :where([data-block='event-registration']) .er-title {
-  font-size: var(--er-step-title-size, 1.5rem);
-  font-weight: 600;
-  line-height: 1.3;
-}
+  font-family: var(--font-heading, inherit);
+  font-size: var(--er-step-title-size, 1.75rem);
+  line-height: 1.15;
+}
 
+/* Confirmation and error titles: never smaller than a step's heading */
 :where(.theme-scope) :where([data-block='event-registration']) .er-title--lg {
-  font-size: 1.25rem;
-  line-height: 1.75rem;
+  font-size: calc(var(--er-step-title-size, 1.75rem) * 1.15);
+  line-height: 1.1;
 }
 
 :where(.theme-scope) :where([data-block='event-registration']) .er-text {
@@ -23808,7 +23939,7 @@ const containerResponsiveThemeCss = `/*
   padding: 1.25rem;
   border: 1px solid var(--er-border);
   border-radius: var(--rb-block-radius);
-  background: rgba(var(--tb-surface), 0.5);
+  background: rgb(var(--tb-surface) / 0.5);
   text-align: center;
 }
 
@@ -23913,7 +24044,7 @@ const containerResponsiveThemeCss = `/*
   :where([data-block='event-registration'])
   .er-payment-option:hover {
   border-color: var(--er-payment-border-hover);
-  box-shadow: 0 8px 18px rgba(var(--tb-shadow, 15 23 42), 0.08);
+  box-shadow: 0 8px 18px rgb(var(--tb-shadow, 15 23 42) / 0.08);
 }
 
 :where(.theme-scope)
@@ -24113,103 +24244,6 @@ const containerResponsiveThemeCss = `/*
   color: var(--er-on-surface);
 }
 
-/* Two-column layout (Desktop: sidebar, Mobile: stacked) */
-:where(.theme-scope) :where([data-block='event-registration']) .er-layout {
-  display: grid;
-  gap: 1.5rem;
-  /* Mobile: single column, summary at top */
-  grid-template-columns: 1fr;
-  grid-template-areas:
-    'summary'
-    'main';
-}
-
-@container rb-site (min-width: 768px) {
-@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
-:where(.theme-scope:is(*, :scope)) :where([data-block='event-registration']) .er-layout {
-    /* Desktop: main + sidebar */
-    grid-template-columns: 1fr 300px;
-    grid-template-areas: 'main summary';
-  }
-}
-}
-
-:where(.theme-scope) :where([data-block='event-registration']) .er-layout-main {
-  grid-area: main;
-}
-
-/* OrderSummary positions via grid area */
-:where(.theme-scope)
-  :where([data-block='event-registration'])
-  .er-layout
-  > .er-summary {
-  grid-area: summary;
-}
-
-/* Step indicator */
-:where(.theme-scope) :where([data-block='event-registration']) .er-steps-nav {
-  margin-bottom: 1.5rem;
-}
-
-/* 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 — 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 {
-  padding: 1.25rem;
-  background: var(--er-summary-bg);
-  border: 1px solid var(--er-summary-border);
-  border-radius: var(--rb-block-radius);
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  min-height: 140px;
-}
-
-@container rb-site (min-width: 768px) {
-@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
-:where(.theme-scope:is(*, :scope)) :where([data-block='event-registration']) .er-summary {
-    position: sticky;
-    top: 1rem;
-  }
-}
-}
-
-:where(.theme-scope)
-  :where([data-block='event-registration'])
-  .er-summary-event {
-  font-weight: 600;
-  margin-bottom: 0.25rem;
-}
-
-:where(.theme-scope)
-  :where([data-block='event-registration'])
-  .er-summary-date {
-  font-size: 0.875rem;
-  color: rgba(var(--tb-text), 0.7);
-}
-
-:where(.theme-scope)
-  :where([data-block='event-registration'])
-  .er-summary-tickets {
-  font-size: 0.875rem;
-  margin-top: 0.75rem;
-}
-
-:where(.theme-scope)
-  :where([data-block='event-registration'])
-  .er-summary-price {
-  font-size: 1.25rem;
-  font-weight: 700;
-  margin-top: 0.5rem;
-}
-
 /* Guest details section */
 :where(.theme-scope)
   :where([data-block='event-registration'])
@@ -24270,17 +24304,6 @@ const containerResponsiveThemeCss = `/*
   border-top: 1px solid var(--er-border);
 }
 
-@container rb-site (min-width: 768px) {
-@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
-:where(.theme-scope:is(*, :scope))
-    :where([data-block='event-registration'])
-    .er-guest-card {
-    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
-    column-gap: 1rem;
-    align-items: start;
-  }
-}
-}
 
 /* Shake animation for validation errors */
 @keyframes er-shake {
@@ -24604,8 +24627,8 @@ const containerResponsiveThemeCss = `/*
 :where(.theme-scope)
   :where([data-block='event-registration'])
   .er-notice--info {
-  background-color: rgba(var(--tb-primary-100), 0.5);
-  border: 1px solid rgba(var(--tb-primary-300), 0.5);
+  background-color: rgb(var(--tb-primary-100) / 0.5);
+  border: 1px solid rgb(var(--tb-primary-300) / 0.5);
   color: rgb(var(--tb-primary-800));
 }
 
@@ -24691,12 +24714,40 @@ const containerResponsiveThemeCss = `/*
   :where([data-block='event-registration'])
   .er-payment-layout-main {
   grid-area: main;
+  /* A column, so an optional sign-in line can settle at the foot of the step. */
+  display: flex;
+  flex-direction: column;
+}
+
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-payment-layout-main
+  > * {
+  flex-shrink: 0;
+}
+
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-payment-layout-main
+  > .er-portal-auth[data-placement='before'] {
+  margin-bottom: 1.5rem;
+}
+
+/* The optional sign-in line: pinned to the foot of the step behind a hairline,
+   and never closer than 1.5rem to the step's content. */
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-payment-layout-main
+  > .er-portal-auth[data-placement='after'] {
+  margin-top: auto;
+  padding-top: 1rem;
+  border-top: 1px solid var(--er-border);
 }
 
 :where(.theme-scope)
   :where([data-block='event-registration'])
   .er-payment-layout-main
-  > .er-portal-auth {
+  > :has(+ .er-portal-auth[data-placement='after']) {
   margin-bottom: 1.5rem;
 }
 
@@ -24716,7 +24767,7 @@ const containerResponsiveThemeCss = `/*
 }
 
 /* =============================================================================
- * Payment Tiles Grid
+ * Attendance mode tiles (in person / online)
  * =============================================================================
  */
 
@@ -24761,9 +24812,9 @@ const containerResponsiveThemeCss = `/*
 
 :where(.theme-scope)
   :where([data-block='event-registration'])
-  .er-payment-tile:hover:not([aria-disabled='true']) {
+  .er-payment-tile:hover {
   border-color: var(--er-payment-border-hover);
-  box-shadow: 0 8px 18px rgba(var(--tb-shadow, 15 23 42), 0.08);
+  box-shadow: 0 8px 18px rgb(var(--tb-shadow, 15 23 42) / 0.08);
 }
 
 :where(.theme-scope)
@@ -24774,89 +24825,6 @@ const containerResponsiveThemeCss = `/*
   box-shadow: 0 0 0 1px var(--er-payment-border-selected);
 }
 
-:where(.theme-scope)
-  :where([data-block='event-registration'])
-  .er-payment-tile--disabled {
-  cursor: not-allowed;
-}
-
-:where(.theme-scope)
-  :where([data-block='event-registration'])
-  .er-payment-tile--disabled
-  > :not(.er-payment-tooltip) {
-  opacity: 0.5;
-}
-
-:where(.theme-scope)
-  :where([data-block='event-registration'])
-  .er-payment-tile--disabled.er-payment-tile--selected {
-  border-color: var(--er-payment-border);
-  background-color: transparent;
-}
-
-:where(.theme-scope)
-  :where([data-block='event-registration'])
-  .er-payment-tile--disabled:hover {
-  border-color: var(--er-payment-border);
-}
-
-/* Tooltip styling for disabled payment tiles */
-:where(.theme-scope)
-  :where([data-block='event-registration'])
-  .er-payment-tile[aria-disabled='true'] {
-  position: relative;
-}
-
-:where(.theme-scope)
-  :where([data-block='event-registration'])
-  .er-payment-tooltip {
-  display: none;
-  position: absolute;
-  bottom: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  margin-bottom: 0.5rem;
-  padding: 0.5rem 0.75rem;
-  background: rgb(var(--tb-text));
-  color: rgb(var(--tb-background));
-  font-size: 0.8125rem;
-  font-weight: 500;
-  border-radius: calc(var(--rb-block-radius) * 0.5);
-  white-space: normal;
-  max-width: 16rem;
-  line-height: 1.35;
-  text-align: center;
-  box-shadow: 0 8px 20px rgba(var(--tb-shadow), 0.28);
-  z-index: 10;
-}
-
-:where(.theme-scope)
-  :where([data-block='event-registration'])
-  .er-payment-tile--disabled:hover
-  .er-payment-tooltip {
-  display: block;
-}
-
-:where(.theme-scope)
-  :where([data-block='event-registration'])
-  .er-payment-tile-icon {
-  font-size: 1.5rem;
-  line-height: 1;
-  /* SVG icon sizing */
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-:where(.theme-scope)
-  :where([data-block='event-registration'])
-  .er-payment-tile-icon
-  svg {
-  width: 24px;
-  height: 24px;
-  color: currentColor;
-}
-
 :where(.theme-scope)
   :where([data-block='event-registration'])
   .er-payment-tile-label {
@@ -24873,27 +24841,6 @@ const containerResponsiveThemeCss = `/*
   line-height: 1.25;
 }
 
-:where(.theme-scope)
-  :where([data-block='event-registration'])
-  .er-payment-tile-check {
-  position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
-}
-
-/* Upsell tiles have a subtle indicator */
-:where(.theme-scope)
-  :where([data-block='event-registration'])
-  .er-payment-tile--upsell {
-  border-style: dashed;
-}
-
-:where(.theme-scope)
-  :where([data-block='event-registration'])
-  .er-payment-tile--upsell.er-payment-tile--selected {
-  border-style: solid;
-}
-
 /* =============================================================================
  * Order Summary Bar (horizontal, in footer)
  * Layout: [Title + meta on left] [Price on right]
@@ -24901,14 +24848,12 @@ const containerResponsiveThemeCss = `/*
  */
 
 :where(.theme-scope) :where([data-block='event-registration']) .er-summary-bar {
+  /* One row under the footer's hairline: what's booked, then the total
+     (issue 1581). */
   display: flex;
   justify-content: space-between;
-  align-items: flex-start;
+  align-items: baseline;
   gap: 1rem;
-  padding: 0.875rem 1rem;
-  background: var(--er-surface-muted);
-  border: 1px solid var(--er-summary-border);
-  border-radius: calc(var(--rb-block-radius) * 0.75);
 }
 
 :where(.theme-scope)
@@ -24931,18 +24876,30 @@ const containerResponsiveThemeCss = `/*
 :where(.theme-scope)
   :where([data-block='event-registration'])
   .er-summary-bar-meta {
-  font-size: 0.8125rem;
-  color: rgba(var(--tb-text), 0.7);
+  font-size: 0.9375rem;
   line-height: 1.35;
 }
 
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-summary-bar-meta
+  > span
+  + span::before {
+  content: ' · ';
+}
+
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-summary-bar-schedule {
+  color: var(--rb-surface-supporting-color, rgb(var(--tb-text) / 0.7));
+}
+
 :where(.theme-scope)
   :where([data-block='event-registration'])
   .er-summary-bar-price {
-  font-size: 1rem;
+  font-size: 1.125rem;
   font-weight: 700;
   flex-shrink: 0;
-  display: block;
   text-align: right;
 }
 
@@ -24950,12 +24907,22 @@ const containerResponsiveThemeCss = `/*
   :where([data-block='event-registration'])
   .er-summary-bar-pricing {
   display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 0.125rem;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  align-items: baseline;
+  column-gap: 0.5rem;
+  row-gap: 0.125rem;
   text-align: right;
 }
 
+/* Notes under the total take their own line */
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-summary-bar-pricing
+  > div {
+  flex-basis: 100%;
+}
+
 /* Product section in summary bar (for pass/membership selection) */
 :where(.theme-scope)
   :where([data-block='event-registration'])
@@ -25001,7 +24968,7 @@ const containerResponsiveThemeCss = `/*
   :where([data-block='event-registration'])
   .er-summary-bar-product-detail {
   font-size: 0.8125rem;
-  color: rgba(var(--tb-text), 0.6);
+  color: rgb(var(--tb-text) / 0.6);
   margin-top: 0.125rem;
 }
 
@@ -25018,9 +24985,8 @@ const containerResponsiveThemeCss = `/*
 :where(.theme-scope)
   :where([data-block='event-registration'])
   .er-summary-bar-price--struck {
-  display: block;
   text-decoration: line-through;
-  color: rgba(var(--tb-text), 0.5);
+  color: rgb(var(--tb-text) / 0.5);
   font-size: 0.9375rem;
   font-weight: 500;
   text-align: right;
@@ -25042,19 +25008,25 @@ const containerResponsiveThemeCss = `/*
  */
 
 :where(.theme-scope) :where([data-block='event-registration']) .er-portal-auth {
-  padding: 1.25rem;
-  background: rgba(var(--tb-surface), 0.5);
-  border: 1px solid var(--er-border);
-  border-radius: var(--rb-block-radius);
-  color: var(--er-on-surface);
+  /* The surface the panel paints publishes its own foreground; --tb-onSurface
+     can be a different (near-black) colour from the site's text. */
+  color: var(--rb-surface-text-color, rgb(var(--tb-text)));
+  font-size: 0.9375rem;
+  line-height: 1.5;
 }
 
 :where(.theme-scope)
   :where([data-block='event-registration'])
   .er-portal-auth-title {
   font-weight: 600;
-  font-size: 1rem;
-  margin: 0 0 0.5rem 0;
+  margin: 0 0 0.25rem 0;
+}
+
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-portal-auth[data-placement='after']
+  .er-portal-auth-title {
+  margin: 0;
 }
 
 :where(.theme-scope)
@@ -25066,6 +25038,15 @@ const containerResponsiveThemeCss = `/*
   line-height: 1.4;
 }
 
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-portal-auth
+  .er-portal-auth-text {
+  color: inherit;
+  margin: 0;
+  line-height: inherit;
+}
+
 :where(.theme-scope)
   :where([data-block='event-registration'])
   .er-portal-auth-link {
@@ -25115,7 +25096,7 @@ const containerResponsiveThemeCss = `/*
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(var(--tb-scrim), 0.5);
+  background: var(--rb-modal-overlay-bg);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -25130,7 +25111,7 @@ const containerResponsiveThemeCss = `/*
   max-width: 400px;
   width: 100%;
   position: relative;
-  box-shadow: 0 10px 25px rgba(var(--tb-shadow), 0.2);
+  box-shadow: 0 10px 25px rgb(var(--tb-shadow) / 0.2);
 }
 
 :where(.theme-scope) :where([data-block='event-registration']) .er-modal-close {
@@ -25142,7 +25123,7 @@ const containerResponsiveThemeCss = `/*
   font-size: 1.5rem;
   line-height: 1;
   cursor: pointer;
-  color: rgba(var(--tb-text), 0.5);
+  color: rgb(var(--tb-text) / 0.5);
   padding: 0.25rem;
 }
 
@@ -25208,97 +25189,246 @@ const containerResponsiveThemeCss = `/*
 :where(.theme-scope)
   :where([data-block='event-registration'])
   .er-modal-btn--secondary:hover {
-  background: rgba(var(--tb-text), 0.05);
+  background: rgb(var(--tb-text) / 0.05);
 }
 
-/* In-flow booking teaser (sits at the block's position in the page) */
+/* Booking card: in the page where the editor placed the block (issue 1581) */
 :where(.theme-scope)
   :where([data-block='event-registration'])
-  .er-booking-teaser {
+  .er-booking-card {
   display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem 1.5rem;
-  padding: 1.25rem 1.5rem;
+  flex-direction: column;
+  gap: 1.125rem;
+  padding: 1.5rem 1.75rem;
   border: 1px solid var(--er-border);
-  border-radius: var(--rb-block-radius);
-  background: var(--er-event-card-bg);
+  border-radius: calc(var(--rb-block-radius) * 1.25);
+  background: rgb(var(--tb-surface));
   /* Foreground and button context: theme-core/src/blocks/opaquePanels.ts. */
 }
 
 :where(.theme-scope)
   :where([data-block='event-registration'])
-  .er-booking-teaser__info {
+  .er-booking-card__row {
   display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  min-width: 0;
+  align-items: center;
+  gap: 1.25rem 1.75rem;
+  flex-wrap: wrap;
 }
 
 :where(.theme-scope)
   :where([data-block='event-registration'])
-  .er-booking-teaser__title {
-  font-size: 1.0625rem;
-  font-weight: 700;
-  line-height: 1.2;
+  .er-booking-card__tile {
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.125rem;
+  width: 4.25rem;
+  height: 4.75rem;
+  border-radius: var(--rb-block-radius);
+  background: rgb(var(--tb-primary));
+  color: rgb(var(--tb-onPrimary, var(--tb-primaryForeground)));
 }
 
 :where(.theme-scope)
   :where([data-block='event-registration'])
-  .er-booking-teaser__meta {
-  font-size: 0.9375rem;
-  line-height: 1.3;
-  opacity: 0.75;
+  .er-booking-card__tile-month {
+  font-size: 0.75rem;
+  font-weight: 800;
+  letter-spacing: 0.1em;
+}
+
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-booking-card__tile-day {
+  font-family: var(--font-heading, inherit);
+  font-size: 2rem;
+  line-height: 1;
 }
 
 :where(.theme-scope)
   :where([data-block='event-registration'])
-  .er-booking-teaser__tickets {
+  .er-booking-card__badge {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 999px;
+  background: rgb(var(--tb-primary));
+  color: rgb(var(--tb-onPrimary, var(--tb-primaryForeground)));
+}
+
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-booking-card__body {
+  flex: 1 1 16rem;
+  min-width: 0;
   display: flex;
   flex-direction: column;
-  gap: 0.375rem;
-  margin-top: 0.5rem;
-  padding-top: 0.625rem;
-  border-top: 1px solid var(--er-border);
+  gap: 0.25rem;
 }
 
 :where(.theme-scope)
   :where([data-block='event-registration'])
-  .er-booking-teaser__ticket {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 1rem;
+  .er-booking-card__when {
+  margin: 0;
+  font-size: 1.125rem;
+  font-weight: 700;
+  line-height: 1.3;
+}
+
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-booking-card__venue,
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-booking-card__facts {
+  margin: 0;
   font-size: 0.9375rem;
-  line-height: 1.35;
+  line-height: 1.45;
+  color: var(--rb-reg-on-surface-muted, rgb(var(--tb-text) / 0.75));
 }
 
 :where(.theme-scope)
   :where([data-block='event-registration'])
-  .er-booking-teaser__ticket-name {
-  min-width: 0;
+  .er-booking-card__facts {
+  margin-top: 0.25rem;
+  font-weight: 600;
+  color: inherit;
 }
 
 :where(.theme-scope)
   :where([data-block='event-registration'])
-  .er-booking-teaser__cta {
+  .er-booking-card__cta {
   flex: 0 0 auto;
 }
 
-/* Fixed, full-width sticky booking bar (content-agnostic; sits above page flow) */
-:where(.theme-scope) :where([data-block='event-registration']) .er-booking-bar {
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-booking-card__dates {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.625rem;
+  padding-top: 1.125rem;
+  border-top: 1px solid var(--er-border);
+}
+
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-booking-card__dates-label {
+  margin-right: 0.375rem;
+  font-size: 0.8125rem;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--rb-reg-on-surface-muted, rgb(var(--tb-text) / 0.75));
+}
+
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-booking-card__date {
+  min-height: 2.75rem;
+  padding: 0 1rem;
+  border: 1px solid var(--er-border);
+  border-radius: 999px;
+  background: var(--er-control-bg);
+  color: inherit;
+  font: inherit;
+  font-size: 0.875rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition: border-color var(--rb-block-transition) ease;
+}
+
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-booking-card__date:hover {
+  border-color: rgb(var(--tb-primary));
+}
+
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-booking-card__date[data-full] {
+  border-style: dashed;
+  background: transparent;
+  color: var(--rb-reg-on-surface-muted, rgb(var(--tb-text) / 0.75));
+}
+
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-booking-card__more {
+  font-size: 0.875rem;
+  color: var(--rb-reg-on-surface-muted, rgb(var(--tb-text) / 0.75));
+}
+
+/* Booking bar: fixed to the bottom once the visitor is past the first screen.
+   It stays mounted and slides: the card pushes it down in step as it rises
+   from the bottom of the screen (--er-bar-push, set per frame), and it slides
+   back up when the visitor scrolls past the card (issue 1581). */
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-booking-bar {
   position: fixed;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 12000;
-  padding: 0.75rem max(1rem, env(safe-area-inset-right))
-    max(0.75rem, env(safe-area-inset-bottom))
+  padding: 0.625rem max(1rem, env(safe-area-inset-right))
+    max(0.625rem, env(safe-area-inset-bottom))
     max(1rem, env(safe-area-inset-left));
-  background: rgb(var(--tb-background));
+  background: rgb(var(--tb-surface));
   border-top: 1px solid var(--er-border);
-  box-shadow: 0 -10px 30px rgba(var(--tb-shadow), 0.16);
+  box-shadow: 0 -8px 28px rgb(var(--tb-shadow) / 0.14);
+  /* Set per frame on the element while the card pushes the bar off. */
+  --er-bar-push: 0px;
+  transform: translateY(var(--er-bar-push));
+  transition:
+    transform 220ms ease,
+    visibility 0s linear 0s;
+  /* Foreground and button context: theme-core/src/blocks/opaquePanels.ts. */
+}
+
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-booking-bar[data-state='hidden'] {
+  transform: translateY(calc(100% + 1.75rem));
+  visibility: hidden;
+  transition:
+    transform 220ms ease,
+    visibility 0s linear 220ms;
+}
+
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-booking-bar[data-pushing='true'] {
+  /* Following the card frame by frame: no easing to lag behind. */
+  transition: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+    .er-booking-bar {
+    transform: none;
+    transition:
+      opacity 150ms ease,
+      visibility 0s linear 0s;
+}
+
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+    .er-booking-bar[data-state='hidden'] {
+    transform: none;
+    opacity: 0;
+    transition:
+      opacity 150ms ease,
+      visibility 0s linear 150ms;
+}
+
 }
 
 :where(.theme-scope)
@@ -25306,27 +25436,28 @@ const containerResponsiveThemeCss = `/*
   .er-booking-bar__inner {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
+  gap: 0.75rem 1.5rem;
   width: 100%;
-  max-width: 72rem;
+  max-width: 77rem;
+  min-height: 2.75rem;
   margin-inline: auto;
 }
 
 :where(.theme-scope)
   :where([data-block='event-registration'])
   .er-booking-bar__info {
+  flex: 1 1 auto;
   display: flex;
-  flex-direction: column;
-  gap: 0.125rem;
+  align-items: center;
+  gap: 0.25rem 0.875rem;
   min-width: 0;
 }
 
 :where(.theme-scope)
   :where([data-block='event-registration'])
   .er-booking-bar__title {
-  font-size: 0.95rem;
-  font-weight: 700;
+  font-family: var(--font-heading, inherit);
+  font-size: 1.25rem;
   line-height: 1.2;
   white-space: nowrap;
   overflow: hidden;
@@ -25336,18 +25467,202 @@ const containerResponsiveThemeCss = `/*
 :where(.theme-scope)
   :where([data-block='event-registration'])
   .er-booking-bar__meta {
-  font-size: 0.8125rem;
-  line-height: 1.25;
-  opacity: 0.75;
+  display: block;
+  min-width: 0;
+  font-size: 0.9375rem;
+  line-height: 1.3;
+  color: var(--rb-surface-supporting-color, rgb(var(--tb-text) / 0.75));
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
+/* Facts are set apart by a thin muted rule rather than a dot (issue 1581) */
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-booking-bar__divider {
+  display: inline-block;
+  width: 0;
+  height: 0.875em;
+  margin-inline: 0.75rem;
+  border-left: 1px solid var(--er-border);
+  vertical-align: -0.0625em;
+}
+
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-booking-bar__fact--price {
+  font-weight: 600;
+  color: var(--rb-surface-text-color, rgb(var(--tb-text)));
+}
+
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-booking-bar[data-entry='inProgress'] .er-booking-bar__meta {
+  font-weight: 600;
+  color: rgb(var(--tb-primary));
+}
+
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-booking-bar__progress {
+  flex: 0 0 7.5rem;
+  height: 4px;
+  border-radius: 4px;
+  background: rgb(var(--tb-text) / 0.12);
+  overflow: hidden;
+}
+
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-booking-bar__progress-fill {
+  display: block;
+  height: 100%;
+  border-radius: 4px;
+  background: rgb(var(--tb-primary));
+}
+
 :where(.theme-scope)
   :where([data-block='event-registration'])
   .er-booking-bar__cta {
   flex: 0 0 auto;
+  white-space: nowrap;
+}
+
+/* Booked or waitlisted: one quiet status line; the whole bar leads back to the card */
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-booking-bar__status {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  width: 100%;
+  min-width: 0;
+  min-height: 2.75rem;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 0.9375rem;
+  line-height: 1.3;
+  text-align: start;
+  cursor: pointer;
+}
+
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-booking-bar__status:focus-visible {
+  outline: 2px solid rgb(var(--tb-primary));
+  outline-offset: 4px;
+  border-radius: 4px;
+}
+
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-booking-bar__check {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.375rem;
+  height: 1.375rem;
+  border-radius: 999px;
+  background: rgb(var(--tb-primary));
+  color: rgb(var(--tb-onPrimary));
+}
+
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-booking-bar__status-text {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  white-space: nowrap;
+}
+
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-booking-bar__status-title {
+  flex: 0 0 auto;
+  font-weight: 700;
+  color: var(--rb-surface-text-color, rgb(var(--tb-text)));
+}
+
+@container rb-site (max-width: 639px) {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+/* Phones: the title or status on the first line, the facts smaller and
+   quieter below it, beside a compact button (issue 1581). */
+:where(.theme-scope:is(*, :scope))
+    :where([data-block='event-registration'])
+    .er-booking-bar__info {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.125rem;
+}
+
+:where(.theme-scope:is(*, :scope))
+    :where([data-block='event-registration'])
+    .er-booking-bar__title {
+  max-width: 100%;
+  font-family: inherit;
+  font-size: 0.9375rem;
+  font-weight: 700;
+  line-height: 1.25;
+}
+
+:where(.theme-scope:is(*, :scope))
+    :where([data-block='event-registration'])
+    .er-booking-bar__meta {
+  max-width: 100%;
+  font-size: 0.8125rem;
+}
+
+:where(.theme-scope:is(*, :scope))
+    :where([data-block='event-registration'])
+    .er-booking-bar__divider {
+  margin-inline: 0.5rem;
+}
+
+:where(.theme-scope:is(*, :scope))
+    :where([data-block='event-registration'])
+    .er-booking-bar__progress {
+  flex-basis: auto;
+  width: 6rem;
+}
+
+:where(.theme-scope:is(*, :scope))
+    :where([data-block='event-registration'])
+    .er-booking-bar__status-text {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.125rem;
+}
+
+:where(.theme-scope:is(*, :scope))
+    :where([data-block='event-registration'])
+    .er-booking-overlay__header {
+  row-gap: 0.625rem;
+  padding: 0.875rem 1rem 0.75rem;
+}
+
+/* The status and its facts are on separate lines: no rule between them */
+:where(.theme-scope:is(*, :scope))
+    :where([data-block='event-registration'])
+    .er-booking-bar__status-text > .er-booking-bar__divider {
+  display: none;
+}
+
+:where(.theme-scope:is(*, :scope))
+    :where([data-block='event-registration'])
+    .er-booking-bar
+    .er-booking-bar__inner
+    > .er-booking-bar__cta {
+  min-height: 2.5rem;
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+}
+}
 }
 
 :where(.theme-scope)
@@ -25374,7 +25689,9 @@ const containerResponsiveThemeCss = `/*
   height: 100dvh;
   min-height: 0;
   overflow: hidden;
-  background: rgb(var(--tb-background));
+  /* Surface, like the card, the bar and the system page's column, and what
+     the embedded Stripe checkout is branded with (checkoutBranding.ts). */
+  background: rgb(var(--tb-surface));
   /* Foreground and button context: theme-core/src/blocks/opaquePanels.ts. */
 }
 
@@ -25384,36 +25701,70 @@ const containerResponsiveThemeCss = `/*
   flex: 0 0 auto;
   z-index: 2;
   display: flex;
-  align-items: center;
+  flex-wrap: wrap;
+  align-items: flex-start;
   justify-content: space-between;
-  gap: 1rem;
-  padding: 1rem;
-  background: rgb(var(--tb-background));
+  gap: 0.875rem 1rem;
+  padding: 1.125rem 1.25rem 1rem;
+  background: rgb(var(--tb-surface));
   border-bottom: 1px solid var(--er-border);
 }
 
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-booking-overlay__progress {
+  /* Pinned under the title, so the step stays in view while the step scrolls
+     (issue 1581). It takes the header's full width, on its own row. */
+  flex: 1 0 100%;
+}
+
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-booking-overlay__progress
+  .rb-progress {
+  margin-bottom: 0;
+}
+
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-booking-overlay__heading {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  min-width: 0;
+}
+
 :where(.theme-scope)
   :where([data-block='event-registration'])
   .er-booking-overlay__title {
   margin: 0;
-  font-size: 1rem;
-  line-height: 1.25;
-  font-weight: 700;
+  font-family: var(--font-heading, inherit);
+  font-size: 1.5rem;
+  line-height: 1.15;
+}
+
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-booking-overlay__subtitle {
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.4;
+  color: var(--rb-reg-on-surface-muted, rgb(var(--tb-text) / 0.75));
 }
 
 :where(.theme-scope)
   :where([data-block='event-registration'])
   .er-booking-overlay__close {
-  width: 2rem;
-  height: 2rem;
+  flex: 0 0 auto;
+  width: 2.75rem;
+  height: 2.75rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border: 1px solid var(--er-border);
   border-radius: 999px;
   background: transparent;
-  color: rgb(var(--tb-text));
-  font-size: 1.25rem;
+  color: inherit;
   line-height: 1;
   cursor: pointer;
 }
@@ -25449,10 +25800,74 @@ const containerResponsiveThemeCss = `/*
 :where(.theme-scope)
   :where([data-block='event-registration'])
   .er-container--overlay
-  .er-payment-layout-main {
-  min-height: 0;
-  overflow: auto;
-  padding: 1rem;
+  .er-payment-layout-main {
+  min-height: 0;
+  overflow: auto;
+  padding: 1.25rem;
+}
+
+/* Processing, confirmation and error take the whole panel (issue 1581) */
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-container--overlay
+  .er-whole-screen {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-container--overlay
+  .er-whole-screen__body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+  padding: 1.5rem 1.25rem;
+}
+
+/* The confirmation's one action sits where the steps' Continue does: pinned
+   and full width in the panel, flowing under the content in the aside. */
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-whole-screen__footer {
+  margin-top: 1.5rem;
+}
+
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-container--overlay
+  .er-whole-screen__footer {
+  margin-top: 0;
+}
+
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-container--overlay
+  .er-whole-screen__footer
+  .er-whole-screen__action {
+  width: 100%;
+  justify-content: center;
+}
+
+/* The header already names the event and its date, so the footer summary
+   drops its title and schedule; the discount keeps just its name. */
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-container--overlay
+  :is(.er-summary-bar-event, .er-summary-bar-schedule, .er-summary-bar-discount-detail) {
+  display: none;
+}
+
+/* On the date step the chosen date is the news, so it stays. */
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-container--overlay
+  .er-summary-bar[data-step='select-event']
+  .er-summary-bar-schedule {
+  display: inline;
+  color: inherit;
 }
 
 :where(.theme-scope)
@@ -25462,9 +25877,9 @@ const containerResponsiveThemeCss = `/*
   position: relative;
   z-index: 3;
   padding: 0.875rem 1rem max(0.875rem, env(safe-area-inset-bottom));
-  background: rgb(var(--tb-background));
+  background: rgb(var(--tb-surface));
   border-top: 1px solid var(--er-border);
-  box-shadow: 0 -12px 26px rgba(var(--tb-shadow), 0.12);
+  box-shadow: 0 -12px 26px rgb(var(--tb-shadow) / 0.12);
 }
 
 :where(.theme-scope)
@@ -25487,14 +25902,14 @@ const containerResponsiveThemeCss = `/*
     .er-booking-overlay__panel {
     width: min(32rem, 100vw);
     min-height: 100%;
-    box-shadow: -16px 0 40px rgba(var(--tb-shadow), 0.22);
+    box-shadow: -16px 0 40px rgb(var(--tb-shadow) / 0.22);
   }
 
   :where(.theme-scope:is(*, :scope))
     :where([data-block='event-registration'])
     .er-container--overlay
     .er-payment-layout-main {
-    padding: 1.25rem;
+    padding: 1.5rem;
   }
 
   :where(.theme-scope:is(*, :scope))
@@ -25506,6 +25921,125 @@ const containerResponsiveThemeCss = `/*
 }
 }
 
+/* The system event page hosts the same panel in its sticky column (issue 1581):
+   from 1024px the steps scroll inside it and the footer stays pinned. */
+@container rb-site (min-width: 1024px) {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope:is(*, :scope))
+    :where([data-block='event-registration'].event-registration--embedded)
+    .er-container {
+    display: flex;
+    max-height: calc(100dvh - 9rem);
+    min-height: 0;
+  }
+
+  :where(.theme-scope:is(*, :scope))
+    :where([data-block='event-registration'].event-registration--embedded)
+    .er-payment-layout {
+    flex: 1 1 auto;
+    min-height: 0;
+    gap: 0;
+    grid-template-rows: minmax(0, 1fr) auto;
+    grid-template-areas:
+      'main'
+      'footer';
+  }
+
+  :where(.theme-scope:is(*, :scope))
+    :where([data-block='event-registration'].event-registration--embedded)
+    .er-payment-layout-main {
+    min-height: 0;
+    overflow: auto;
+    padding-bottom: 1rem;
+  }
+
+  :where(.theme-scope:is(*, :scope))
+    :where([data-block='event-registration'].event-registration--embedded)
+    .er-payment-layout-footer {
+    padding-top: 0.875rem;
+    border-top: 1px solid var(--er-border);
+  }
+
+  :where(.theme-scope:is(*, :scope))
+    :where([data-block='event-registration'].event-registration--embedded)
+    .er-whole-screen {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+  }
+
+  :where(.theme-scope:is(*, :scope))
+    :where([data-block='event-registration'].event-registration--embedded)
+    .er-whole-screen__body {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: auto;
+  }
+}
+}
+
+/* Confirmation summary: only the facts known for certain */
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-confirmation-summary {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin: 1.5rem 0 0;
+  padding: 1.125rem 1.25rem;
+  border: 1px solid var(--er-border);
+  border-radius: var(--rb-block-radius);
+  font-size: 0.9375rem;
+}
+
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-confirmation-summary__row {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-confirmation-summary__row dt {
+  color: var(--rb-reg-on-surface-muted, rgb(var(--tb-text) / 0.75));
+}
+
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-confirmation-summary__row dd {
+  margin: 0;
+  font-weight: 700;
+  text-align: end;
+}
+
+/* Why passes and memberships are greyed out for more than one place */
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-entitlement-note {
+  margin: 0;
+  padding-top: 0.75rem;
+  border-top: 1px solid var(--er-border);
+  font-size: 0.875rem;
+  color: var(--rb-reg-on-surface-muted, rgb(var(--tb-text) / 0.75));
+}
+
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-entitlement-note__action {
+  padding: 0;
+  border: 0;
+  background: none;
+  color: rgb(var(--tb-primary));
+  font: inherit;
+  font-weight: 700;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  cursor: pointer;
+}
+
 /* Magic Link Form */
 :where(.theme-scope)
   :where([data-block='event-registration'])
@@ -25581,8 +26115,8 @@ const containerResponsiveThemeCss = `/*
   align-items: flex-start;
   gap: 0.75rem;
   padding: 1rem 1.25rem;
-  background: rgba(var(--tb-primary-100), 0.4);
-  border: 1px solid rgba(var(--tb-primary-300), 0.4);
+  background: rgb(var(--tb-primary-100) / 0.4);
+  border: 1px solid rgb(var(--tb-primary-300) / 0.4);
   border-radius: var(--rb-block-radius);
 }
 
@@ -25630,201 +26164,6 @@ const containerResponsiveThemeCss = `/*
 }
 
 /* Selection cards for pass holders */
-:where(.theme-scope)
-  :where([data-block='event-registration'])
-  .er-booking-mode-cards {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 1rem;
-}
-
-:where(.theme-scope)
-  :where([data-block='event-registration'])
-  .er-booking-mode-card {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 1.25rem 1rem;
-  border: 2px solid var(--er-payment-border);
-  border-radius: var(--rb-block-radius);
-  background: transparent;
-  cursor: pointer;
-  text-align: center;
-  position: relative;
-  transition:
-    border-color var(--rb-block-transition) ease,
-    background-color var(--rb-block-transition) ease;
-}
-
-:where(.theme-scope)
-  :where([data-block='event-registration'])
-  .er-booking-mode-card:hover:not([aria-disabled='true']) {
-  border-color: var(--er-payment-border-hover);
-}
-
-:where(.theme-scope)
-  :where([data-block='event-registration'])
-  .er-booking-mode-card--selected {
-  border-color: var(--er-payment-border-selected);
-  background-color: var(--er-payment-bg-selected);
-}
-
-:where(.theme-scope)
-  :where([data-block='event-registration'])
-  .er-booking-mode-card--disabled {
-  opacity: 1;
-  cursor: not-allowed;
-  border-color: var(--er-payment-border);
-  background: transparent;
-}
-
-:where(.theme-scope)
-  :where([data-block='event-registration'])
-  .er-booking-mode-card--disabled.er-booking-mode-card--selected {
-  border-color: var(--er-payment-border);
-  background: transparent;
-}
-
-:where(.theme-scope)
-  :where([data-block='event-registration'])
-  .er-booking-mode-card--disabled
-  > :not(.er-booking-mode-tooltip) {
-  opacity: 0.55;
-}
-
-:where(.theme-scope)
-  :where([data-block='event-registration'])
-  .er-booking-mode-card--disabled:hover {
-  border-color: var(--er-payment-border);
-}
-
-:where(.theme-scope)
-  :where([data-block='event-registration'])
-  .er-booking-mode-card--disabled
-  .er-booking-mode-card-icon,
-:where(.theme-scope)
-  :where([data-block='event-registration'])
-  .er-booking-mode-card--disabled
-  .er-booking-mode-card-label {
-  color: var(--er-on-surface-disabled);
-}
-
-:where(.theme-scope)
-  :where([data-block='event-registration'])
-  .er-booking-mode-card--disabled
-  .er-booking-mode-card-detail {
-  color: var(--er-on-surface-disabled-detail);
-}
-
-:where(.theme-scope)
-  :where([data-block='event-registration'])
-  .er-booking-mode-card-icon {
-  font-size: 1.75rem;
-  line-height: 1;
-  /* SVG icon sizing */
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-:where(.theme-scope)
-  :where([data-block='event-registration'])
-  .er-booking-mode-card-icon
-  svg {
-  width: 24px;
-  height: 24px;
-  color: currentColor;
-}
-
-:where(.theme-scope)
-  :where([data-block='event-registration'])
-  .er-booking-mode-card-label {
-  font-weight: 600;
-  font-size: 1rem;
-  line-height: 1.3;
-}
-
-:where(.theme-scope)
-  :where([data-block='event-registration'])
-  .er-booking-mode-card-detail {
-  font-size: 0.875rem;
-  color: var(--er-on-surface-subtle);
-  line-height: 1.3;
-}
-
-:where(.theme-scope)
-  :where([data-block='event-registration'])
-  .er-booking-mode-card-check {
-  position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
-}
-
-/* Alternative link in booking mode */
-:where(.theme-scope)
-  :where([data-block='event-registration'])
-  .er-booking-mode-alt {
-  margin-top: 1rem;
-  text-align: center;
-}
-
-:where(.theme-scope)
-  :where([data-block='event-registration'])
-  .er-booking-mode-alt-link {
-  background: none;
-  border: none;
-  padding: 0;
-  font-size: 0.9375rem;
-  color: rgb(var(--tb-primary));
-  cursor: pointer;
-  text-decoration: underline;
-  text-underline-offset: 2px;
-}
-
-:where(.theme-scope)
-  :where([data-block='event-registration'])
-  .er-booking-mode-alt-link:hover {
-  text-decoration: none;
-}
-
-/* Tooltip styling for disabled options */
-:where(.theme-scope)
-  :where([data-block='event-registration'])
-  .er-booking-mode-card[aria-disabled='true'] {
-  position: relative;
-}
-
-/* Tooltip appears on hover for disabled cards */
-:where(.theme-scope)
-  :where([data-block='event-registration'])
-  .er-booking-mode-tooltip {
-  display: none;
-  position: absolute;
-  bottom: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  margin-bottom: 0.5rem;
-  padding: 0.5rem 0.75rem;
-  background: rgb(var(--tb-text));
-  color: rgb(var(--tb-background));
-  font-size: 0.8125rem;
-  font-weight: 500;
-  border-radius: calc(var(--rb-block-radius) * 0.5);
-  white-space: normal;
-  max-width: 16rem;
-  line-height: 1.35;
-  text-align: center;
-  box-shadow: 0 8px 20px rgba(var(--tb-shadow), 0.28);
-  z-index: 10;
-}
-
-:where(.theme-scope)
-  :where([data-block='event-registration'])
-  .er-booking-mode-card--disabled:hover
-  .er-booking-mode-tooltip {
-  display: block;
-}
 
 /* =============================================================================
  * Block: Event Calendar
@@ -26053,7 +26392,7 @@ const containerResponsiveThemeCss = `/*
 :where(.theme-scope)
   :where([data-block='event-calendar'])
   .event-calendar-more:hover {
-  background-color: rgba(var(--tb-primary), 0.1);
+  background-color: rgb(var(--tb-primary) / 0.1);
 }
 
 :where(.theme-scope)
@@ -26127,7 +26466,7 @@ const containerResponsiveThemeCss = `/*
 :where(.theme-scope)
   :where([data-block='event-calendar'])
   .event-category-btn:hover:not(:disabled) {
-  border-color: rgba(var(--tb-primary), 0.5);
+  border-color: rgb(var(--tb-primary) / 0.5);
 }
 
 :where(.theme-scope)
@@ -26200,7 +26539,7 @@ const containerResponsiveThemeCss = `/*
   :where([data-block='event-calendar'])
   .event-calendar-view-btn:hover {
   opacity: 1;
-  border-color: rgba(var(--tb-primary), 0.5);
+  border-color: rgb(var(--tb-primary) / 0.5);
 }
 
 :where(.theme-scope)
@@ -26317,7 +26656,7 @@ const containerResponsiveThemeCss = `/*
 :where(.theme-scope)
   :where([data-block='event-calendar'])
   .event-agenda-card:hover {
-  border-color: rgba(var(--tb-primary), 0.5);
+  border-color: rgb(var(--tb-primary) / 0.5);
   background-color: var(--ec-event-bg);
 }
 
@@ -26766,7 +27105,7 @@ const containerResponsiveThemeCss = `/*
   border-left-width: 4px;
   border-radius: calc(var(--rb-block-radius) / 1.5);
   background-color: var(--ec-surface);
-  box-shadow: 0 1px 2px rgba(var(--tb-text), 0.08);
+  box-shadow: 0 1px 2px rgb(var(--tb-text) / 0.08);
   cursor: pointer;
   font: inherit;
   text-align: left;
@@ -26780,7 +27119,7 @@ const containerResponsiveThemeCss = `/*
 :where(.theme-scope)
   :where([data-block='event-calendar'])
   .event-timetable-event:hover {
-  box-shadow: 0 4px 12px rgba(var(--tb-text), 0.12);
+  box-shadow: 0 4px 12px rgb(var(--tb-text) / 0.12);
   transform: translateY(-1px);
 }
 
@@ -26932,7 +27271,7 @@ const containerResponsiveThemeCss = `/*
    * available -> secondary, filling -> accent, waitlist -> muted text. */
   --ec-status-available: rgb(var(--tb-secondary));
   --ec-status-filling: rgb(var(--tb-accent));
-  --ec-status-waitlist: rgba(var(--tb-text), 0.4);
+  --ec-status-waitlist: rgb(var(--tb-text) / 0.4);
   --event-week-board-cols: 7;
 
   border: 1px solid var(--ec-border);
@@ -26946,7 +27285,7 @@ const containerResponsiveThemeCss = `/*
 :where(.theme-scope)
   :where([data-block='event-calendar'])
   .event-week-board[data-elevated] {
-  box-shadow: 0 14px 34px -24px rgba(var(--tb-text), 0.35);
+  box-shadow: 0 14px 34px -24px rgb(var(--tb-text) / 0.35);
 }
 
 /* Top bar: authored title + week navigation + legend */
@@ -27219,8 +27558,8 @@ const containerResponsiveThemeCss = `/*
   :where([data-block='event-calendar'])
   .event-week-board-card:hover {
   transform: translateY(-2px);
-  box-shadow: 0 6px 16px -8px rgba(var(--tb-text), 0.28);
-  border-color: rgba(var(--tb-primary), 0.4);
+  box-shadow: 0 6px 16px -8px rgb(var(--tb-text) / 0.28);
+  border-color: rgb(var(--tb-primary) / 0.4);
 }
 
 :where(.theme-scope)
@@ -27263,24 +27602,24 @@ const containerResponsiveThemeCss = `/*
    * Filling -> amber and waitlist -> muted outline are handled by the
    * data-status overrides below. */
   border: 1px solid var(--ec-border);
-  background-color: rgba(var(--tb-text), 0.06);
-  color: rgba(var(--tb-text), 0.62);
+  background-color: rgb(var(--tb-text) / 0.06);
+  color: rgb(var(--tb-text) / 0.62);
   border-color: var(--ec-border);
 }
 
 :where(.theme-scope)
   :where([data-block='event-calendar'])
   .event-week-board-card-pill[data-status='filling'] {
-  background-color: rgba(var(--tb-accent), 0.14);
+  background-color: rgb(var(--tb-accent) / 0.14);
   color: var(--ec-status-filling);
-  border-color: rgba(var(--tb-accent), 0.32);
+  border-color: rgb(var(--tb-accent) / 0.32);
 }
 
 :where(.theme-scope)
   :where([data-block='event-calendar'])
   .event-week-board-card-pill[data-status='waitlist'] {
   background-color: transparent;
-  color: rgba(var(--tb-text), 0.6);
+  color: rgb(var(--tb-text) / 0.6);
   border-color: var(--ec-border);
 }
 
@@ -27565,7 +27904,7 @@ const containerResponsiveThemeCss = `/*
   :where([data-block='event-calendar'])
   .ec-modal-close:hover {
   opacity: 1;
-  background-color: rgba(var(--tb-text), 0.1);
+  background-color: rgb(var(--tb-text) / 0.1);
 }
 
 :where(.theme-scope)
@@ -27808,23 +28147,24 @@ const containerResponsiveThemeCss = `/*
 }
 
 /* State icon color variants (layout from registration-surface.css) */
+/* Success: a solid primary disc with an on-primary tick (issue 1581) */
 :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)));
+  background: rgb(var(--tb-primary, 37 99 235));
+  color: rgb(var(--tb-onPrimary, 255 255 255));
 }
 
 :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));
+  background: var(--ab-error-bg, rgb(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"]) .rb-state-icon--info {
-  background: var(--ab-info-bg, rgba(var(--tb-info, 14 165 233), 0.1));
+  background: var(--ab-info-bg, rgb(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));
+  background: var(--ab-warning-bg, rgb(var(--tb-warning, 245 158 11) / 0.1));
   color: var(--ab-warning-text, rgb(var(--tb-warning, 245 158 11)));
 }
 
@@ -27866,7 +28206,7 @@ const containerResponsiveThemeCss = `/*
   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));
+  color: var(--rb-reg-on-surface-subtle, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42)) / 0.6));
 }
 
 :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-pill-value {
@@ -28483,11 +28823,11 @@ const containerResponsiveThemeCss = `/*
   height: 2.5rem;
   width: 2.5rem;
   border-radius: 9999px;
-  border: 1px solid rgba(var(--tb-border, 229 231 235), 0.35);
-  background-color: rgba(var(--tb-surface, 248 250 252), 0.9);
+  border: 1px solid rgb(var(--tb-border, 229 231 235) / 0.35);
+  background-color: rgb(var(--tb-surface, 248 250 252) / 0.9);
   color: rgb(var(--tb-text, 17 24 39));
-  box-shadow: 0 4px 6px -1px rgba(var(--tb-shadow), 0.1),
-    0 2px 4px -2px rgba(var(--tb-shadow), 0.1);
+  box-shadow: 0 4px 6px -1px rgb(var(--tb-shadow) / 0.1),
+    0 2px 4px -2px rgb(var(--tb-shadow) / 0.1);
   cursor: pointer;
   transform: translateY(-50%);
   transition: background-color 0.2s ease, box-shadow 0.2s ease,
@@ -28504,8 +28844,8 @@ const containerResponsiveThemeCss = `/*
 
 :where(.theme-scope) .carousel-root .carousel-nav-btn:hover {
   background-color: rgb(var(--tb-surface, 248 250 252));
-  box-shadow: 0 10px 15px -3px rgba(var(--tb-shadow), 0.1),
-    0 4px 6px -4px rgba(var(--tb-shadow), 0.1);
+  box-shadow: 0 10px 15px -3px rgb(var(--tb-shadow) / 0.1),
+    0 4px 6px -4px rgb(var(--tb-shadow) / 0.1);
 }
 
 :where(.theme-scope) .carousel-root .carousel-nav-btn:disabled {
@@ -28554,10 +28894,10 @@ const containerResponsiveThemeCss = `/*
 }
 
 :where(.theme-scope) .carousel-root.rb-carousel-dots-overlay .carousel-dot {
-  background-color: rgba(var(--tb-surface, 248 250 252), 0.55);
+  background-color: rgb(var(--tb-surface, 248 250 252) / 0.55);
 }
 :where(.theme-scope) .carousel-root.rb-carousel-dots-overlay .carousel-dot:hover {
-  background-color: rgba(var(--tb-surface, 248 250 252), 0.75);
+  background-color: rgb(var(--tb-surface, 248 250 252) / 0.75);
 }
 :where(.theme-scope) .carousel-root.rb-carousel-dots-overlay .carousel-dot[data-active="true"] {
   background-color: rgb(var(--tb-text, 17 24 39));
@@ -28573,7 +28913,7 @@ const containerResponsiveThemeCss = `/*
 }
 
 :where(.theme-scope) .carousel-root .carousel-dot:hover {
-  background-color: rgba(var(--tb-text, 17 24 39), 0.3);
+  background-color: rgb(var(--tb-text, 17 24 39) / 0.3);
 }
 
 :where(.theme-scope) .carousel-root .carousel-dot[data-active="true"] {
@@ -28582,7 +28922,7 @@ const containerResponsiveThemeCss = `/*
 
 :where(.theme-scope) .carousel-root .carousel-dot:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 3px rgba(var(--tb-primary, 59 130 246), 0.35);
+  box-shadow: 0 0 0 3px rgb(var(--tb-primary, 59 130 246) / 0.35);
 }
 
 /* =============================================================================
@@ -28619,7 +28959,7 @@ const containerResponsiveThemeCss = `/*
 
 /* Error display */
 :where(.theme-scope) .shop__error {
-  background-color: rgba(var(--tb-destructive), 0.1);
+  background-color: rgb(var(--tb-destructive) / 0.1);
   color: rgb(var(--tb-destructive));
   padding: 0.75rem 1rem;
   border-radius: var(--shop-control-radius);
@@ -28891,7 +29231,7 @@ const containerResponsiveThemeCss = `/*
 
 /* Modal error */
 :where(.theme-scope) .shop__modal-error {
-  background-color: rgba(var(--tb-destructive), 0.1);
+  background-color: rgb(var(--tb-destructive) / 0.1);
   color: rgb(var(--tb-destructive));
   padding: 0.625rem 0.75rem;
   border-radius: var(--shop-control-radius);
@@ -28943,12 +29283,12 @@ const containerResponsiveThemeCss = `/*
 }
 
 :where(.theme-scope) :where([data-block="shop"]) .rb-state-icon--success {
-  background: rgba(var(--tb-success), 0.12);
+  background: rgb(var(--tb-success) / 0.12);
   color: rgb(var(--tb-success));
 }
 
 :where(.theme-scope) :where([data-block="shop"]) .rb-state-icon--warning {
-  background: rgba(var(--tb-warning), 0.12);
+  background: rgb(var(--tb-warning) / 0.12);
   color: rgb(var(--tb-warning));
 }
 
@@ -29450,7 +29790,7 @@ const containerResponsiveThemeCss = `/*
 
 :where(.theme-scope) :where([data-block="customer-portal"]) .cp-table thead th {
   text-align: left;
-  background: rgba(var(--tb-border), 0.2);
+  background: rgb(var(--tb-border) / 0.2);
 }
 
 :where(.theme-scope)
@@ -30291,17 +30631,17 @@ const containerResponsiveThemeCss = `/*
 
 :where(.theme-scope) :where(.rb-tile--interactive, .er-event-card):focus-visible {
   outline: none;
-  box-shadow: 0 0 0 3px rgba(var(--tb-primary), 0.25);
+  box-shadow: 0 0 0 3px rgb(var(--tb-primary) / 0.25);
 }
 
 :where(.theme-scope) :where(.rb-tile--interactive, .er-event-card):hover:not(:disabled) {
-  border-color: var(--rb-tile-border-hover, var(--rb-event-tile-border-hover, rgba(var(--tb-primary), 0.5)));
+  border-color: var(--rb-tile-border-hover, var(--rb-event-tile-border-hover, rgb(var(--tb-primary) / 0.5)));
   opacity: var(--rb-tile-hover-opacity, var(--rb-event-tile-hover-opacity, var(--rb-tile-opacity, var(--rb-event-tile-opacity, 1))));
 }
 
 :where(.theme-scope) :where(.rb-tile--selected, .er-event-card--selected) {
   border-color: var(--rb-tile-border-selected, var(--rb-event-tile-border-selected, rgb(var(--tb-primary))));
-  background: var(--rb-tile-bg-selected, var(--rb-event-tile-bg-selected, rgba(var(--tb-primary), 0.1)));
+  background: var(--rb-tile-bg-selected, var(--rb-event-tile-bg-selected, rgb(var(--tb-primary) / 0.1)));
 }
 
 :where(.theme-scope) :where(.rb-tile--disabled, .er-event-card--disabled) {
@@ -30615,7 +30955,7 @@ const containerResponsiveThemeCss = `/*
 
 :where(.theme-scope) .newsletter-success .fb-success {
   padding: 1rem 1.5rem;
-  background-color: rgba(var(--tb-success, 34 197 94), 0.1);
+  background-color: rgb(var(--tb-success, 34 197 94) / 0.1);
   border-radius: var(--radius-md, 0.5rem);
   color: rgb(var(--tb-text));
 }
@@ -30887,7 +31227,7 @@ const containerResponsiveThemeCss = `/*
  * context (theme-core/src/blocks/opaquePanels.ts) hold on any section. */
 :where(.theme-scope) .feedback-callout {
   background: rgb(var(--tb-surface, 248 250 252));
-  border-color: rgba(var(--tb-border, 226 232 240), 0.72);
+  border-color: rgb(var(--tb-border, 226 232 240) / 0.72);
   --rb-feedback-callout-bg-opacity: 0.1;
   --rb-feedback-callout-border-opacity: 0.24;
 }
@@ -30895,33 +31235,33 @@ const containerResponsiveThemeCss = `/*
 :where(.theme-scope) .feedback-callout[data-feedback-tone="info"] {
   --rb-feedback-callout-bg-opacity: 0.08;
   background:
-    linear-gradient(rgba(var(--tb-primary, 37 99 235), var(--rb-feedback-callout-bg-opacity)), rgba(var(--tb-primary, 37 99 235), var(--rb-feedback-callout-bg-opacity))),
+    linear-gradient(rgb(var(--tb-primary, 37 99 235) / var(--rb-feedback-callout-bg-opacity)), rgb(var(--tb-primary, 37 99 235) / var(--rb-feedback-callout-bg-opacity))),
     rgb(var(--tb-surface, 248 250 252));
-  border-color: rgba(var(--tb-primary, 37 99 235), var(--rb-feedback-callout-border-opacity));
+  border-color: rgb(var(--tb-primary, 37 99 235) / var(--rb-feedback-callout-border-opacity));
 }
 
 :where(.theme-scope) .feedback-callout[data-feedback-tone="success"] {
   background:
-    linear-gradient(rgba(var(--tb-success, 34 197 94), var(--rb-feedback-callout-bg-opacity)), rgba(var(--tb-success, 34 197 94), var(--rb-feedback-callout-bg-opacity))),
+    linear-gradient(rgb(var(--tb-success, 34 197 94) / var(--rb-feedback-callout-bg-opacity)), rgb(var(--tb-success, 34 197 94) / var(--rb-feedback-callout-bg-opacity))),
     rgb(var(--tb-surface, 248 250 252));
-  border-color: rgba(var(--tb-success, 34 197 94), var(--rb-feedback-callout-border-opacity));
+  border-color: rgb(var(--tb-success, 34 197 94) / var(--rb-feedback-callout-border-opacity));
 }
 
 :where(.theme-scope) .feedback-callout[data-feedback-tone="warning"] {
   --rb-feedback-callout-bg-opacity: 0.12;
   --rb-feedback-callout-border-opacity: 0.28;
   background:
-    linear-gradient(rgba(var(--tb-warning, 245 158 11), var(--rb-feedback-callout-bg-opacity)), rgba(var(--tb-warning, 245 158 11), var(--rb-feedback-callout-bg-opacity))),
+    linear-gradient(rgb(var(--tb-warning, 245 158 11) / var(--rb-feedback-callout-bg-opacity)), rgb(var(--tb-warning, 245 158 11) / var(--rb-feedback-callout-bg-opacity))),
     rgb(var(--tb-surface, 248 250 252));
-  border-color: rgba(var(--tb-warning, 245 158 11), var(--rb-feedback-callout-border-opacity));
+  border-color: rgb(var(--tb-warning, 245 158 11) / var(--rb-feedback-callout-border-opacity));
 }
 
 :where(.theme-scope) .feedback-callout[data-feedback-tone="error"] {
   --rb-feedback-callout-border-opacity: 0.26;
   background:
-    linear-gradient(rgba(var(--tb-destructive, 239 68 68), var(--rb-feedback-callout-bg-opacity)), rgba(var(--tb-destructive, 239 68 68), var(--rb-feedback-callout-bg-opacity))),
+    linear-gradient(rgb(var(--tb-destructive, 239 68 68) / var(--rb-feedback-callout-bg-opacity)), rgb(var(--tb-destructive, 239 68 68) / var(--rb-feedback-callout-bg-opacity))),
     rgb(var(--tb-surface, 248 250 252));
-  border-color: rgba(var(--tb-destructive, 239 68 68), var(--rb-feedback-callout-border-opacity));
+  border-color: rgb(var(--tb-destructive, 239 68 68) / var(--rb-feedback-callout-border-opacity));
 }
 
 :where(.theme-scope) .feedback-callout__title {
@@ -30992,7 +31332,7 @@ const containerResponsiveThemeCss = `/*
 }
 
 :where(.theme-scope) .event-compact-row:hover {
-  background-color: rgba(var(--tb-primary, 0 0 0), 0.035);
+  background-color: rgb(var(--tb-primary, 0 0 0) / 0.035);
 }
 
 :where(.theme-scope) .event-compact-row-date {
@@ -31400,23 +31740,23 @@ const containerResponsiveThemeCss = `/*
 }
 
 :where(.theme-scope) [data-block="gifting"] .gifting-feedback[data-feedback-tone="success"] {
-  border-color: rgba(var(--tb-success, 34 197 94), 0.3);
+  border-color: rgb(var(--tb-success, 34 197 94) / 0.3);
   background:
-    linear-gradient(rgba(var(--tb-success, 34 197 94), 0.1), rgba(var(--tb-success, 34 197 94), 0.1)),
+    linear-gradient(rgb(var(--tb-success, 34 197 94) / 0.1), rgb(var(--tb-success, 34 197 94) / 0.1)),
     rgb(var(--tb-surface, 255 255 255));
 }
 
 :where(.theme-scope) [data-block="gifting"] .gifting-feedback[data-feedback-tone="warning"] {
-  border-color: rgba(var(--tb-warning, 245 158 11), 0.35);
+  border-color: rgb(var(--tb-warning, 245 158 11) / 0.35);
   background:
-    linear-gradient(rgba(var(--tb-warning, 245 158 11), 0.12), rgba(var(--tb-warning, 245 158 11), 0.12)),
+    linear-gradient(rgb(var(--tb-warning, 245 158 11) / 0.12), rgb(var(--tb-warning, 245 158 11) / 0.12)),
     rgb(var(--tb-surface, 255 255 255));
 }
 
 :where(.theme-scope) [data-block="gifting"] .gifting-feedback[data-feedback-tone="error"] {
-  border-color: rgba(var(--tb-destructive, 239 68 68), 0.3);
+  border-color: rgb(var(--tb-destructive, 239 68 68) / 0.3);
   background:
-    linear-gradient(rgba(var(--tb-destructive, 239 68 68), 0.1), rgba(var(--tb-destructive, 239 68 68), 0.1)),
+    linear-gradient(rgb(var(--tb-destructive, 239 68 68) / 0.1), rgb(var(--tb-destructive, 239 68 68) / 0.1)),
     rgb(var(--tb-surface, 255 255 255));
 }
 
@@ -31530,7 +31870,7 @@ const containerResponsiveThemeCss = `/*
 :where(.theme-scope) .rb-feature-card-icon-zone--utility-badge {
   background-color: rgb(var(--tb-surface));
   border: 1px solid rgb(var(--tb-border));
-  box-shadow: 0 1px 2px rgba(var(--tb-shadow), 0.08);
+  box-shadow: 0 1px 2px rgb(var(--tb-shadow) / 0.08);
 }
 
 :where(.theme-scope) .rb-feature-card-icon {
@@ -32319,7 +32659,7 @@ const containerResponsiveThemeCss = `/*
   grid-template-columns: minmax(5.5rem, 0.65fr) minmax(0, 1.35fr);
   gap: 1rem;
   padding-block: 0.6rem;
-  border-top: 1px solid rgba(var(--tb-border), 0.72);
+  border-top: 1px solid rgb(var(--tb-border) / 0.72);
 }
 
 :where(.theme-scope)
@@ -32559,13 +32899,13 @@ const containerResponsiveThemeCss = `/*
 :where(.theme-scope) [data-block="testimonials"][data-block-composition="open-editorial"] .rb-testimonial-attribution {
   margin-top: 1.25rem;
   padding-top: 1.25rem;
-  border-top: 1px solid rgba(var(--tb-border), 0.75);
+  border-top: 1px solid rgb(var(--tb-border) / 0.75);
 }
 
 :where(.theme-scope) [data-block="testimonials"][data-block-composition="open-editorial"] .rb-testimonial-avatar {
   box-shadow:
     0 0 0 2px rgb(var(--tb-surface)),
-    0 0 0 4px rgba(var(--tb-primary), 0.3);
+    0 0 0 4px rgb(var(--tb-primary) / 0.3);
 }
 
 /* =============================================================================