@riverbankcms/sdk 0.151.0 → 0.152.0

package/dist/styles/index.css

@@ -809,6 +809,13 @@
         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) +
@@ -1388,7 +1395,7 @@
   .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;
@@ -1882,12 +1889,12 @@
 
   :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 {
@@ -2364,7 +2371,7 @@
   :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;
@@ -3352,17 +3359,17 @@
 
   /* 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));
   }
 
@@ -3425,7 +3432,7 @@
  * 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
@@ -3448,6 +3455,13 @@
   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));
@@ -3484,18 +3498,18 @@
 }
 
 :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)));
 }
 
@@ -3527,76 +3541,45 @@
   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;
+  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-connector {
-  width: 2rem;
-  height: 2px;
-  background: var(--rb-reg-step-connector, rgba(var(--tb-border, 226 232 240), 0.5));
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="appointment-booking"]) .rb-progress__label {
+  font-weight: 700;
+  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-step-label {
-  font-size: 0.75rem;
-  color: var(--rb-reg-on-surface, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42))));
-  display: none;
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="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));
 }
 
-: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__track {
+  height: 4px;
+  border-radius: 4px;
+  background: rgb(var(--tb-onSurface, var(--tb-text, 15 23 42)) / 0.12);
+  overflow: hidden;
 }
 
-@media (min-width: 640px) {
-  :where(.theme-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__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 */
@@ -3613,21 +3596,26 @@
   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 */
@@ -3662,7 +3650,7 @@
   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 */
@@ -3671,9 +3659,9 @@
   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))
   );
 }
 
@@ -3698,7 +3686,7 @@
   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;
 }
 
@@ -3717,6 +3705,101 @@
   }
 }
 
+/* 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)
@@ -3732,17 +3815,14 @@
   --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);
@@ -3870,6 +3950,109 @@
   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'])
@@ -4073,63 +4256,31 @@
   }
 }
 
-/* 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);
@@ -4138,12 +4289,14 @@
 
 /* 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;
 }
 
@@ -4154,11 +4307,12 @@
 }
 
 /* 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)
@@ -4207,14 +4361,15 @@
 
 /* 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 {
@@ -4440,7 +4595,7 @@
   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;
 }
 
@@ -4545,7 +4700,7 @@
   :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)
@@ -4745,99 +4900,6 @@
   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';
-}
-
-@media (min-width: 768px) {
-  :where(.theme-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;
-}
-
-@media (min-width: 768px) {
-  :where(.theme-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'])
@@ -4898,15 +4960,6 @@
   border-top: 1px solid var(--er-border);
 }
 
-@media (min-width: 768px) {
-  :where(.theme-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 {
@@ -5228,8 +5281,8 @@
 :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));
 }
 
@@ -5313,12 +5366,40 @@
   :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;
 }
 
@@ -5338,7 +5419,7 @@
 }
 
 /* =============================================================================
- * Payment Tiles Grid
+ * Attendance mode tiles (in person / online)
  * =============================================================================
  */
 
@@ -5383,9 +5464,9 @@
 
 :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)
@@ -5396,89 +5477,6 @@
   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 {
@@ -5495,27 +5493,6 @@
   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]
@@ -5523,14 +5500,12 @@
  */
 
 :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)
@@ -5553,18 +5528,30 @@
 :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;
 }
 
@@ -5572,12 +5559,22 @@
   :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'])
@@ -5623,7 +5620,7 @@
   :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;
 }
 
@@ -5640,9 +5637,8 @@
 :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;
@@ -5664,19 +5660,25 @@
  */
 
 :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)
@@ -5688,6 +5690,15 @@
   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 {
@@ -5737,7 +5748,7 @@
   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;
@@ -5752,7 +5763,7 @@
   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 {
@@ -5764,7 +5775,7 @@
   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;
 }
 
@@ -5830,97 +5841,246 @@
 :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-teaser__tickets {
-  display: flex;
-  flex-direction: column;
-  gap: 0.375rem;
-  margin-top: 0.5rem;
-  padding-top: 0.625rem;
-  border-top: 1px solid var(--er-border);
+  .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__ticket {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 1rem;
-  font-size: 0.9375rem;
-  line-height: 1.35;
+  .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-teaser__ticket-name {
+  .er-booking-card__body {
+  flex: 1 1 16rem;
   min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .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-teaser__cta {
+  .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.45;
+  color: var(--rb-reg-on-surface-muted, rgb(var(--tb-text) / 0.75));
+}
+
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-booking-card__facts {
+  margin-top: 0.25rem;
+  font-weight: 600;
+  color: inherit;
+}
+
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .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)
@@ -5928,27 +6088,28 @@
   .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;
@@ -5958,18 +6119,201 @@
 :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)));
+}
+
+@media (max-width: 639px) {
+/* 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)
+    :where([data-block='event-registration'])
+    .er-booking-bar__info {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.125rem;
+}
+
+:where(.theme-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)
+    :where([data-block='event-registration'])
+    .er-booking-bar__meta {
+  max-width: 100%;
+  font-size: 0.8125rem;
+}
+
+:where(.theme-scope)
+    :where([data-block='event-registration'])
+    .er-booking-bar__divider {
+  margin-inline: 0.5rem;
+}
+
+:where(.theme-scope)
+    :where([data-block='event-registration'])
+    .er-booking-bar__progress {
+  flex-basis: auto;
+  width: 6rem;
+}
+
+:where(.theme-scope)
+    :where([data-block='event-registration'])
+    .er-booking-bar__status-text {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.125rem;
+}
+
+:where(.theme-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)
+    :where([data-block='event-registration'])
+    .er-booking-bar__status-text > .er-booking-bar__divider {
+  display: none;
+}
+
+:where(.theme-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)
@@ -5996,7 +6340,9 @@
   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. */
 }
 
@@ -6006,36 +6352,70 @@
   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;
 }
@@ -6057,24 +6437,88 @@
 :where(.theme-scope)
   :where([data-block='event-registration'])
   .er-container--overlay
-  .er-payment-layout {
-  flex: 1 1 auto;
-  min-height: 0;
-  height: 100%;
-  gap: 0;
-  grid-template-rows: minmax(0, 1fr) auto;
-  grid-template-areas:
-    'main'
-    'footer';
+  .er-payment-layout {
+  flex: 1 1 auto;
+  min-height: 0;
+  height: 100%;
+  gap: 0;
+  grid-template-rows: minmax(0, 1fr) auto;
+  grid-template-areas:
+    'main'
+    'footer';
+}
+
+:where(.theme-scope)
+  :where([data-block='event-registration'])
+  .er-container--overlay
+  .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-payment-layout-main {
-  min-height: 0;
-  overflow: auto;
-  padding: 1rem;
+  .er-summary-bar[data-step='select-event']
+  .er-summary-bar-schedule {
+  display: inline;
+  color: inherit;
 }
 
 :where(.theme-scope)
@@ -6084,9 +6528,9 @@
   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)
@@ -6108,14 +6552,14 @@
     .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)
     :where([data-block='event-registration'])
     .er-container--overlay
     .er-payment-layout-main {
-    padding: 1.25rem;
+    padding: 1.5rem;
   }
 
   :where(.theme-scope)
@@ -6126,6 +6570,123 @@
   }
 }
 
+/* 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. */
+@media (min-width: 1024px) {
+  :where(.theme-scope)
+    :where([data-block='event-registration'].event-registration--embedded)
+    .er-container {
+    display: flex;
+    max-height: calc(100dvh - 9rem);
+    min-height: 0;
+  }
+
+  :where(.theme-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)
+    :where([data-block='event-registration'].event-registration--embedded)
+    .er-payment-layout-main {
+    min-height: 0;
+    overflow: auto;
+    padding-bottom: 1rem;
+  }
+
+  :where(.theme-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)
+    :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)
+    :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'])
@@ -6201,8 +6762,8 @@
   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);
 }
 
@@ -6250,201 +6811,6 @@
 }
 
 /* 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;
-}
 
 
 /* =============================================================================
@@ -6674,7 +7040,7 @@
 :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)
@@ -6748,7 +7114,7 @@
 :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)
@@ -6821,7 +7187,7 @@
   :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)
@@ -6938,7 +7304,7 @@
 :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);
 }
 
@@ -7385,7 +7751,7 @@
   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;
@@ -7399,7 +7765,7 @@
 :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);
 }
 
@@ -7549,7 +7915,7 @@
    * 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);
@@ -7563,7 +7929,7 @@
 :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 */
@@ -7836,8 +8202,8 @@
   :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)
@@ -7880,24 +8246,24 @@
    * 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);
 }
 
@@ -8176,7 +8542,7 @@
   :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)
@@ -8420,23 +8786,24 @@
 }
 
 /* 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)));
 }
 
@@ -8478,7 +8845,7 @@
   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 {
@@ -9097,11 +9464,11 @@
   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,
@@ -9118,8 +9485,8 @@
 
 :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 {
@@ -9168,10 +9535,10 @@
 }
 
 :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));
@@ -9187,7 +9554,7 @@
 }
 
 :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"] {
@@ -9196,7 +9563,7 @@
 
 :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);
 }
 
 
@@ -9235,7 +9602,7 @@
 
 /* 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);
@@ -9503,7 +9870,7 @@
 
 /* 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);
@@ -9555,12 +9922,12 @@
 }
 
 :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));
 }
 
@@ -10059,7 +10426,7 @@
 
 :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)
@@ -10900,17 +11267,17 @@
 
 :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) {
@@ -11223,7 +11590,7 @@
 
 :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));
 }
@@ -11494,7 +11861,7 @@
  * 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;
 }
@@ -11502,33 +11869,33 @@
 :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 {
@@ -11600,7 +11967,7 @@
 }
 
 :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 {
@@ -12009,23 +12376,23 @@
 }
 
 :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));
 }
 
@@ -12141,7 +12508,7 @@
 :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 {
@@ -12921,7 +13288,7 @@
   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)
@@ -13162,13 +13529,13 @@
 :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);
 }