@riverbankcms/sdk 0.98.0 → 0.99.0

package/dist/styles/index.css

@@ -3208,13 +3208,36 @@
 
 
 /* =============================================================================
- * Shared: Registration Terminal State Icons
- * Used by event-registration and course-registration blocks.
+ * Shared: Registration Surface (issue 1174)
  *
- * Layout rules only — block-specific colors are defined in each block's CSS
- * via scoped `.rb-state-icon--{variant}` rules.
+ * Wizard-surface primitives shared by the event-registration,
+ * course-registration and appointment-booking blocks: surface container,
+ * selectable option cards, step indicator, wizard actions row, on-surface
+ * text ramp, layout stacks, summary box and skeleton shell lines.
+ *
+ * Uses:
+ * - Tier 1 vars: --tb-* (from theme palette) as inline fallbacks
+ * - Tier 2 vars: --rb-block-radius, --rb-block-transition (from theme scope)
+ * - Shared vars: --rb-reg-* (mapped per block by the Tier 3 var generators;
+ *   canonical name list in blocks/registrationSurfaceVars.ts)
+ *
+ * Defaults intentionally match the event-registration (issue 1089) values; blocks
+ * that need to preserve a different look override in their own block CSS,
+ * which is imported after this file (cascade order is the override contract —
+ * all selectors here are zero-specificity `:where()`).
+ *
+ * Layout-only `.rb-state-icon` rules (formerly registration-shared.css) live
+ * here too; block CSS provides the `.rb-state-icon--{variant}` colors.
+ *
+ * Naming: component-like primitives follow the existing bare `rb-` shared
+ * precedent (`.rb-state-icon`, `.rb-tile`): `.rb-option-card`, `.rb-step-*`,
+ * `.rb-wizard-actions`, `.rb-on-surface`, `.rb-shell-*`. Container/layout
+ * pieces that would otherwise collide with the global `.rb-*` utility layer
+ * are namespaced `rb-reg-*` (`.rb-reg-surface`, `.rb-reg-stack`, ...). All of
+ * them are scoped to the three registration blocks either way.
  * ============================================================================= */
 
+/* Terminal state icon (layout only — colors are per-block) */
 :where(.theme-scope) .rb-state-icon {
   width: 4rem;
   height: 4rem;
@@ -3230,6 +3253,271 @@
   height: 2rem;
 }
 
+/* Surface container */
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-reg-surface {
+  border-radius: var(--rb-reg-radius, var(--rb-block-radius, 1rem));
+  border: 1px solid var(--rb-reg-border, rgb(var(--tb-border, 226 232 240)));
+  padding: clamp(1rem, 2vw, 1.5rem);
+  background: var(--rb-reg-surface-bg, rgb(var(--tb-surface, 248 250 252)));
+  color: var(--rb-reg-on-surface, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42))));
+  transition: border-color var(--rb-block-transition, 150ms) ease;
+  width: 100%;
+  max-width: 800px;
+  margin-inline: 0;
+}
+
+/* Selectable option card */
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-option-card {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 1rem;
+  border: 1px solid var(--rb-reg-border, rgb(var(--tb-border, 226 232 240)));
+  border-radius: var(--rb-reg-radius, var(--rb-block-radius, 1rem));
+  background: var(--rb-reg-option-bg, transparent);
+  color: inherit;
+  cursor: pointer;
+  text-align: left;
+  transition: border-color var(--rb-block-transition, 150ms) ease,
+              background-color var(--rb-block-transition, 150ms) ease,
+              box-shadow var(--rb-block-transition, 150ms) ease;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-option-card:hover:not(:disabled):not([aria-disabled="true"]) {
+  border-color: var(--rb-reg-border-hover, rgba(var(--tb-primary, 17 24 39), 0.5));
+  box-shadow: var(--rb-reg-option-hover-shadow, 0 8px 18px rgba(var(--tb-shadow, 15 23 42), 0.08));
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-option-card:focus-visible {
+  outline: 2px solid var(--rb-reg-focus-ring, rgba(var(--tb-primary, 17 24 39), 0.3));
+  outline-offset: 2px;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-option-card--selected {
+  border-color: var(--rb-reg-border-selected, rgb(var(--tb-primary, 17 24 39)));
+  background-color: var(--rb-reg-bg-selected, rgba(var(--tb-primary, 17 24 39), 0.08));
+  box-shadow: 0 0 0 1px var(--rb-reg-border-selected, rgb(var(--tb-primary, 17 24 39)));
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-option-card--disabled {
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-option-card--disabled:hover {
+  border-color: var(--rb-reg-border, rgb(var(--tb-border, 226 232 240)));
+  box-shadow: none;
+}
+
+/* Check indicator */
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-option-check {
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: 50%;
+  background: var(--rb-reg-check-bg, rgb(var(--tb-primary, 17 24 39)));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-option-check svg {
+  width: 0.75rem;
+  height: 0.75rem;
+  color: var(--rb-reg-check-text, rgb(var(--tb-primaryText, var(--tb-primaryForeground, 255 255 255))));
+}
+
+/* Step indicator */
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-steps-nav {
+  margin-bottom: 1.5rem;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-steps {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-step {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-step-circle {
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75rem;
+  font-weight: 600;
+  background: var(--rb-reg-step-inactive, rgb(var(--tb-mutedText, 100 116 139)));
+  color: var(--rb-reg-step-text, rgb(var(--tb-primaryForeground, 255 255 255)));
+  transition: background-color var(--rb-block-transition, 150ms) ease;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-step-circle--active {
+  background: var(--rb-reg-step-active, rgb(var(--tb-primary, 17 24 39)));
+  color: var(--rb-reg-step-text-active, rgb(var(--tb-primaryText, var(--tb-primaryForeground, 255 255 255))));
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-step-circle--completed {
+  background: var(--rb-reg-step-completed, rgb(var(--tb-success, 22 163 74)));
+  color: var(--rb-reg-step-text-active, rgb(var(--tb-primaryText, var(--tb-primaryForeground, 255 255 255))));
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-step-check {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-step-connector {
+  width: 2rem;
+  height: 2px;
+  background: var(--rb-reg-step-connector, rgba(var(--tb-border, 226 232 240), 0.5));
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-step-label {
+  font-size: 0.75rem;
+  color: var(--rb-reg-on-surface, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42))));
+  display: none;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-step-label--active {
+  font-weight: 500;
+}
+
+@media (min-width: 640px) {
+  :where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-step-label {
+    display: inline;
+  }
+}
+
+/* Wizard actions row */
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-wizard-actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  margin-top: 1.5rem;
+}
+
+/* When there's only one action (no back button), push it to the right */
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-wizard-actions > :only-child {
+  margin-inline-start: auto;
+}
+
+/* On-surface text ramp */
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-on-surface {
+  color: var(--rb-reg-on-surface, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42))));
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-on-surface--muted {
+  color: var(--rb-reg-on-surface-muted, rgba(var(--tb-onSurface, var(--tb-text, 15 23 42)), 0.7));
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-on-surface--subtle {
+  color: var(--rb-reg-on-surface-subtle, rgba(var(--tb-onSurface, var(--tb-text, 15 23 42)), 0.6));
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-on-surface--faint {
+  color: var(--rb-reg-on-surface-faint, rgba(var(--tb-onSurface, var(--tb-text, 15 23 42)), 0.5));
+}
+
+/* Layout stacks */
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-reg-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-reg-stack--sm {
+  gap: 0.75rem;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-reg-row {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-reg-row--between {
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-reg-grid {
+  display: grid;
+  gap: 0.75rem;
+}
+
+/* Summary box */
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-reg-summary {
+  padding: 1rem;
+  border-radius: calc(var(--rb-reg-radius, var(--rb-block-radius, 1rem)) * 0.75);
+  border: 1px solid var(--rb-reg-summary-border, rgb(var(--tb-border, 226 232 240)));
+  background: var(--rb-reg-summary-bg, rgba(var(--tb-muted, 241 245 249), 0.42));
+}
+
+/* Skeleton shell lines */
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-shell-line {
+  height: 0.75rem;
+  border-radius: 9999px;
+  background: linear-gradient(
+    90deg,
+    var(--rb-reg-shell-line, rgba(var(--tb-mutedText, 100 116 139), 0.22)),
+    rgba(var(--tb-primary, 17 24 39), 0.12),
+    var(--rb-reg-shell-line, rgba(var(--tb-mutedText, 100 116 139), 0.22))
+  );
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-shell-line--lg {
+  width: min(26rem, 82%);
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-shell-line--md {
+  width: min(19rem, 68%);
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-shell-line--sm {
+  width: min(14rem, 52%);
+}
+
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-shell-line--xs {
+  width: min(10rem, 42%);
+}
+
+/* Skeleton block (rectangular placeholder, pulses) */
+:where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-shell-block {
+  height: 2.5rem;
+  width: 100%;
+  border-radius: var(--rb-reg-radius, var(--rb-block-radius, 1rem));
+  background: var(--rb-reg-shell-line, rgba(var(--tb-mutedText, 100 116 139), 0.22));
+  animation: rb-reg-pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes rb-reg-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-shell-block {
+    animation: none;
+  }
+}
+
 
 /* =============================================================================
  * Block: Event Registration (pilot #76)
@@ -3254,18 +3542,9 @@
   --er-on-surface-disabled-detail: rgba(var(--tb-onSurface, var(--tb-text)), 0.68);
 }
 
-/* Container */
-:where(.theme-scope) :where([data-block="event-registration"]) .er-container {
-  border-radius: var(--rb-block-radius);
-  border: 1px solid var(--er-border);
-  padding: clamp(1rem, 2vw, 1.5rem);
-  background: rgb(var(--tb-surface));
-  color: var(--er-on-surface);
-  transition: border-color var(--rb-block-transition) ease;
-  width: 100%;
-  max-width: 800px;
-  margin-inline: 0;
-}
+/* Container: styled by the shared .rb-reg-surface (registration-surface.css);
+   .er-container remains in markup as a hook and for the overlay/embedded
+   variants below. */
 
 /* SSR shell / required-island fallback */
 :where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell {
@@ -3310,32 +3589,8 @@
   padding: 1rem;
 }
 
-:where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__line {
-  height: 0.75rem;
-  border-radius: 9999px;
-  background: linear-gradient(
-    90deg,
-    var(--er-shell-line),
-    rgba(var(--tb-primary), 0.12),
-    var(--er-shell-line)
-  );
-}
-
-:where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__line--lg {
-  width: min(26rem, 82%);
-}
-
-:where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__line--md {
-  width: min(19rem, 68%);
-}
-
-:where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__line--sm {
-  width: min(14rem, 52%);
-}
-
-:where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__line--xs {
-  width: min(10rem, 42%);
-}
+/* Shell skeleton lines: styled by the shared .rb-shell-line family
+   (registration-surface.css); legacy classes remain in markup as hooks. */
 
 :where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__summary {
   align-items: center;
@@ -3412,13 +3667,8 @@
   color: var(--er-capacity-soldout-text);
 }
 
-/* Selected event summary */
-:where(.theme-scope) :where([data-block="event-registration"]) .er-event-summary {
-  padding: 1rem;
-  border-radius: calc(var(--rb-block-radius) * 0.75);
-  border: 1px solid var(--er-border);
-  background: var(--er-surface-muted);
-}
+/* Selected event summary: superseded by the shared .rb-reg-summary
+   (registration-surface.css); no markup emitted .er-event-summary anymore. */
 
 /* Ticket counter */
 :where(.theme-scope) :where([data-block="event-registration"]) .er-ticket-counter-group {
@@ -3622,7 +3872,7 @@
   opacity: 1;
 }
 
-/* State icon color variants (layout from registration-shared.css) */
+/* State icon color variants (layout from registration-surface.css) */
 :where(.theme-scope) :where([data-block="event-registration"]) .rb-state-icon--success {
   background: var(--er-success-bg);
   color: var(--er-success-text);
@@ -3778,16 +4028,8 @@
   text-align: center;
 }
 
-/* Layout */
-:where(.theme-scope) :where([data-block="event-registration"]) .er-stack {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-:where(.theme-scope) :where([data-block="event-registration"]) .er-stack--sm {
-  gap: 0.75rem;
-}
+/* Layout stacks/rows: styled by the shared .rb-reg-stack / .rb-reg-row
+   (registration-surface.css); legacy classes remain in markup as hooks. */
 
 /* Event/date selection rows */
 :where(.theme-scope) :where([data-block="event-registration"]) .er-event-grid {
@@ -3796,17 +4038,6 @@
   gap: 0;
 }
 
-:where(.theme-scope) :where([data-block="event-registration"]) .er-row {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-:where(.theme-scope) :where([data-block="event-registration"]) .er-row--between {
-  justify-content: space-between;
-  align-items: flex-start;
-}
-
 :where(.theme-scope) :where([data-block="event-registration"]) .er-center {
   text-align: center;
   padding: 2rem;
@@ -3818,18 +4049,8 @@
   margin-bottom: 1rem;
 }
 
-:where(.theme-scope) :where([data-block="event-registration"]) .er-actions {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 1rem;
-  margin-top: 1.5rem;
-}
-
-/* When there's only one button (no back), push to the right */
-:where(.theme-scope) :where([data-block="event-registration"]) .er-actions > :only-child {
-  margin-inline-start: auto;
-}
+/* Actions row: styled by the shared .rb-wizard-actions (registration-surface.css);
+   .er-actions remains in markup as a hook. */
 
 :where(.theme-scope) :where([data-block="event-registration"]) .er-button-with-spinner {
   display: inline-flex;
@@ -4081,23 +4302,8 @@
   color: var(--er-on-surface-faint);
 }
 
-/* Checkmark indicator */
-:where(.theme-scope) :where([data-block="event-registration"]) .er-check {
-  flex-shrink: 0;
-  width: 1.25rem;
-  height: 1.25rem;
-  border-radius: 50%;
-  background: var(--er-check-bg);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-:where(.theme-scope) :where([data-block="event-registration"]) .er-check svg {
-  width: 0.75rem;
-  height: 0.75rem;
-  color: var(--er-check-text);
-}
+/* Checkmark indicator: styled by the shared .rb-option-check
+   (registration-surface.css); .er-check remains in markup as a hook. */
 
 /* Payment summary */
 :where(.theme-scope) :where([data-block="event-registration"]) .er-payment-summary {
@@ -4143,76 +4349,12 @@
   margin-bottom: 1.5rem;
 }
 
-:where(.theme-scope) :where([data-block="event-registration"]) .er-steps {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-:where(.theme-scope) :where([data-block="event-registration"]) .er-step {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-:where(.theme-scope) :where([data-block="event-registration"]) .er-step-circle {
-  width: 1.75rem;
-  height: 1.75rem;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.75rem;
-  font-weight: 600;
-  background: var(--er-step-inactive);
-  color: var(--er-step-text);
-  transition: background-color var(--rb-block-transition) ease;
-}
-
-:where(.theme-scope) :where([data-block="event-registration"]) .er-step-circle--active {
-  background: var(--er-step-active);
-  color: var(--er-step-text-active);
-}
-
-:where(.theme-scope) :where([data-block="event-registration"]) .er-step-circle--completed {
-  background: var(--er-step-completed);
-  color: var(--er-step-text-active);
-}
-
-:where(.theme-scope) :where([data-block="event-registration"]) .er-step-check {
-  width: 0.75rem;
-  height: 0.75rem;
-}
-
-:where(.theme-scope) :where([data-block="event-registration"]) .er-step-connector {
-  width: 2rem;
-  height: 2px;
-  background: var(--er-step-connector);
-}
-
-:where(.theme-scope) :where([data-block="event-registration"]) .er-step-connector--completed {
-  background: var(--er-step-connector);
-}
-
-:where(.theme-scope) :where([data-block="event-registration"]) .er-step-label {
-  font-size: 0.75rem;
-  color: var(--er-on-surface);
-  display: none;
-}
-
-:where(.theme-scope) :where([data-block="event-registration"]) .er-step-label--active {
-  font-weight: 500;
-}
-
-@media (min-width: 640px) {
-  :where(.theme-scope) :where([data-block="event-registration"]) .er-step-label {
-    display: inline;
-  }
-}
+/* Step indicator internals: styled by the shared .rb-steps / .rb-step-*
+   family (registration-surface.css) via the --rb-reg-step-* mappings in the
+   event-registration var generator; er-* classes remain in markup as hooks.
+   Note: .er-steps-nav above is intentionally retained — 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 {
@@ -6436,69 +6578,34 @@
 
 /* =============================================================================
  * Block: Appointment Booking
+ *
+ * Structural styling comes from the shared registration-surface layer
+ * (registration-surface.css): surface container, option cards + check,
+ * step indicator, wizard actions, on-surface text ramp, stacks, summary box
+ * and skeleton shell. Colors flow through the --rb-reg-* contract, mapped
+ * from this block's --ab-* Tier 3 vars by its var generator.
+ *
+ * Inputs use the theme-generated form-* classes; feedback boxes use the
+ * theme-generated alert / alert-{tone} classes. Only genuinely
+ * booking-specific rules live here.
+ *
  * Uses:
- * - Tier 1 vars: --tb-border, --tb-text, --tb-primary (from theme palette)
- * - Tier 2 vars: --rb-block-radius, --rb-block-transition (from theme scope)
+ * - Tier 1 vars: --tb-* (from theme palette)
  * - Tier 3 vars: --ab-* (from appointment-booking var generator)
  * =============================================================================
  */
 
-/* Main container */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-container {
-  width: 100%;
-}
-
-/* Stack layout utilities */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-stack {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-stack--sm {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-stack--xs {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-/* Row layout */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-row {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-row--between {
-  justify-content: space-between;
-}
-
-/* Grid layout */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-grid {
-  display: grid;
-  gap: 0.75rem;
-}
-
-/* Center layout */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-center {
-  text-align: center;
-  padding: 2rem;
-}
-
-/* Typography */
+/* Typography helpers */
 :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-title {
   font-size: 1.5rem;
-  font-weight: 700;
+  font-weight: 600;
+  line-height: 1.3;
 }
 
 :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-subtitle {
-  font-size: 0.875rem;
-  font-weight: 500;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  line-height: 1.3;
 }
 
 :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-text {
@@ -6509,211 +6616,111 @@
   font-size: 0.75rem;
 }
 
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-text--muted {
-  opacity: var(--ab-text-muted-opacity, 0.6);
-}
-
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-text--faint {
-  opacity: var(--ab-text-faint-opacity, 0.4);
-}
-
-/* Selection cards (service, resource, time slot) */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-card {
-  position: relative;
-  padding: 1rem;
-  border: 2px solid var(--ab-card-border, rgb(var(--tb-border, 226 232 240)));
-  border-radius: var(--ab-card-radius, var(--rb-block-radius, 1rem));
-  text-align: left;
-  background: transparent;
-  cursor: pointer;
-  transition: border-color var(--rb-block-transition, 150ms) ease, background-color var(--rb-block-transition, 150ms) ease;
-}
-
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-card:hover {
-  border-color: var(--ab-card-border-hover, rgba(var(--tb-primary, 17 24 39), 0.5));
-}
-
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-card--selected {
-  border-color: var(--ab-card-border-selected, rgb(var(--tb-primary, 17 24 39)));
-  background-color: var(--ab-card-bg-selected, rgba(var(--tb-primary, 17 24 39), 0.05));
-}
-
-/* Checkmark indicator */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-check {
-  flex-shrink: 0;
-  width: 1.25rem;
-  height: 1.25rem;
-  border-radius: 50%;
-  background-color: var(--ab-check-bg, rgb(var(--tb-primary, 17 24 39)));
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-check svg {
-  width: 0.75rem;
-  height: 0.75rem;
-  color: var(--ab-check-text, rgb(var(--tb-background, 255 255 255)));
-}
-
-/* Info box (service summary) */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-info-box {
-  padding: 1rem;
-  border: 1px solid var(--ab-card-border, rgb(var(--tb-border, 226 232 240)));
-  border-radius: var(--ab-card-radius, var(--rb-block-radius, 1rem));
-  background-color: var(--ab-muted-bg, rgba(var(--tb-foreground, var(--tb-text, 15 23 42)), 0.05));
-}
-
-/* Alert states */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-alert {
-  padding: 0.75rem 1rem;
-  border-radius: var(--ab-card-radius, var(--rb-block-radius, 1rem));
-  font-size: 0.875rem;
-}
-
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-alert--success {
-  background-color: var(--ab-success-bg, rgba(var(--tb-success, 22 163 74), 0.1));
-  color: var(--ab-success-text, rgb(var(--tb-success, 22 163 74)));
-}
-
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-alert--error {
-  background-color: var(--ab-error-bg, rgba(var(--tb-destructive, 220 38 38), 0.1));
-  color: var(--ab-error-text, rgb(var(--tb-destructive, 220 38 38)));
-}
-
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-alert--warning {
-  background-color: var(--ab-warning-bg, rgba(var(--tb-warning, 245 158 11), 0.1));
-  color: var(--ab-warning-text, rgb(var(--tb-warning, 245 158 11)));
-}
-
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-alert--info {
-  background-color: var(--ab-info-bg, rgba(var(--tb-info, 14 165 233), 0.1));
-  color: var(--ab-info-text, rgb(var(--tb-info, 14 165 233)));
-}
-
-/* Form elements */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-label {
-  display: block;
-  font-size: 0.875rem;
-  font-weight: 500;
-  margin-bottom: 0.5rem;
-}
-
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-required {
-  color: var(--ab-error-text, rgb(var(--tb-destructive, 220 38 38)));
-  margin-left: 0.125rem;
-}
-
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-input,
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-select,
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-textarea {
-  width: 100%;
-  padding: 0.5rem 0.75rem;
-  border: 1px solid var(--ab-input-border, rgb(var(--tb-border, 226 232 240)));
-  border-radius: var(--ab-input-radius, var(--rb-input-radius, var(--radius-control, var(--rb-block-radius, 1rem))));
-  background: transparent;
-  font-size: 0.875rem;
-  transition: border-color var(--rb-block-transition, 150ms) ease, box-shadow var(--rb-block-transition, 150ms) ease;
-}
-
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-input:focus,
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-select:focus,
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-textarea:focus {
-  outline: none;
-  border-color: var(--ab-card-border-selected, rgb(var(--tb-primary, 17 24 39)));
-  box-shadow: 0 0 0 3px var(--ab-input-focus-ring, rgba(var(--tb-primary, 17 24 39), 0.3));
+/* Centered state (loading / terminal panels) */
+:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-center {
+  text-align: center;
+  padding: 2rem;
 }
 
-/* Buttons */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.5rem 1.5rem;
-  border-radius: var(--ab-button-radius, var(--rb-button-radius, var(--rb-block-radius, 1rem)));
-  font-size: 0.875rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background-color var(--rb-block-transition, 150ms) ease, border-color var(--rb-block-transition, 150ms) ease;
+/* Terminal state title (below the state icon) */
+:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-terminal-title {
+  margin: 0.75rem 0 0.5rem 0;
+  font-size: 1.125rem;
+  font-weight: 700;
 }
 
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-btn--primary {
-  flex: 1;
-  background-color: var(--ab-btn-primary-bg, rgb(var(--tb-primary, 17 24 39)));
-  color: var(--ab-btn-primary-text, rgb(var(--tb-primaryForeground, 255 255 255)));
-  border: none;
+/* State icon color variants (layout from registration-surface.css) */
+:where(.theme-scope) :where([data-block="appointment-booking"]) .rb-state-icon--success {
+  background: var(--ab-success-bg, rgba(var(--tb-success, 22 163 74), 0.1));
+  color: var(--ab-success-text, rgb(var(--tb-success, 22 163 74)));
 }
 
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-btn--primary:hover:not(:disabled) {
-  background-color: var(--ab-btn-primary-hover, rgba(var(--tb-primary, 17 24 39), 0.9));
+:where(.theme-scope) :where([data-block="appointment-booking"]) .rb-state-icon--error {
+  background: var(--ab-error-bg, rgba(var(--tb-destructive, 220 38 38), 0.1));
+  color: var(--ab-error-text, rgb(var(--tb-destructive, 220 38 38)));
 }
 
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-btn--secondary {
-  background: transparent;
-  border: 1px solid var(--ab-btn-secondary-border, rgb(var(--tb-border, 226 232 240)));
+:where(.theme-scope) :where([data-block="appointment-booking"]) .rb-state-icon--info {
+  background: var(--ab-info-bg, rgba(var(--tb-info, 14 165 233), 0.1));
+  color: var(--ab-info-text, rgb(var(--tb-info, 14 165 233)));
 }
 
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-btn--secondary:hover:not(:disabled) {
-  background-color: var(--ab-btn-secondary-hover, rgba(var(--tb-foreground, var(--tb-text, 15 23 42)), 0.05));
+:where(.theme-scope) :where([data-block="appointment-booking"]) .rb-state-icon--warning {
+  background: var(--ab-warning-bg, rgba(var(--tb-warning, 245 158 11), 0.1));
+  color: var(--ab-warning-text, rgb(var(--tb-warning, 245 158 11)));
 }
 
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-btn--link {
-  background: transparent;
-  border: none;
-  padding: 0;
-  text-decoration: underline;
+/* Payment option summary rows (label/value lines inside an option card) */
+:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-option-rows {
+  display: grid;
+  gap: 0.125rem;
 }
 
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-btn--link:hover {
-  text-decoration: none;
+/* Date/time pill grids (selection pills extend .rb-option-card) */
+:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-pill-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
 }
 
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
+:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-date-pill {
+  flex-direction: column;
+  align-items: center;
+  gap: 0.125rem;
+  padding: 0.5rem 0.875rem;
+  min-width: 4.25rem;
+  text-align: center;
 }
 
-/* Actions row */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-actions {
-  display: flex;
-  gap: 0.75rem;
-  margin-top: 1.5rem;
+:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-time-pill {
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem 0.875rem;
+  min-width: 5.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  text-align: center;
 }
 
-/* Skeleton loading */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-skeleton {
-  height: 2.5rem;
-  width: 100%;
-  background-color: var(--ab-muted-bg, rgba(var(--tb-foreground, var(--tb-text, 15 23 42)), 0.05));
-  border-radius: var(--ab-card-radius, var(--rb-block-radius, 1rem));
-  animation: ab-pulse 1.5s ease-in-out infinite;
+:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-pill-caption {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0;
+  line-height: 1.2;
+  text-transform: uppercase;
+  color: var(--rb-reg-on-surface-subtle, rgba(var(--tb-onSurface, var(--tb-text, 15 23 42)), 0.6));
 }
 
-@keyframes ab-pulse {
-  0%, 100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.5;
-  }
+:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-pill-value {
+  font-size: 1.125rem;
+  font-weight: 600;
+  line-height: 1.2;
 }
 
-/* Field wrapper */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-field {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
+/* SSR shell skeleton (mirrors the hydrated layout to reduce hydration jump) */
+:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-shell {
+  min-height: 18rem;
 }
 
-/* Altcha wrapper */
-:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-altcha {
-  margin-top: 1rem;
+:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-shell-button {
+  display: inline-flex;
+  min-height: 2.5rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: calc(var(--rb-reg-radius, var(--rb-block-radius, 1rem)) * 0.6);
+  background: rgb(var(--tb-primary, 17 24 39));
+  color: rgb(var(--tb-primaryText, var(--tb-primaryForeground, 255 255 255)));
+  padding: 0.625rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.2;
+  text-align: center;
+  white-space: nowrap;
 }
 
-/* Link button (inline text link) */
+/* Inline text-link button (e.g. "Load more dates") */
 :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-link {
   display: inline;
-  margin-left: 0.5rem;
   color: rgb(var(--tb-primary, 17 24 39));
   background: none;
   border: none;
@@ -6727,91 +6734,9 @@
   text-decoration: none;
 }
 
-/* =============================================================================
- * Form Block (fb-*)
- *
- * Uses:
- * - Tier 1 vars: --tb-border, --tb-surface, --tb-success, --tb-destructive
- * - Tier 2 vars: --rb-block-radius
- * - Tier 3 vars: --fb-success-*, --fb-error-*, --fb-empty-*
- *
- * Note: Form input styling (form-input, form-select, etc.) is handled by
- * the input CSS generator. These styles are for form container/state only.
- * ============================================================================= */
-
-/* Form container */
-:where(.theme-scope) :where([data-block="form"]) .fb-form {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-/* Two-column row (opt-in per field via schema layout) */
-:where(.theme-scope) :where([data-block="form"]) .fb-row-2 {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
-  gap: 1rem;
-}
-
-/* Field wrapper */
-:where(.theme-scope) :where([data-block="form"]) .fb-field {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-/* Fieldset (for radio groups) */
-:where(.theme-scope) :where([data-block="form"]) .fb-fieldset {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  border: none;
-  padding: 0;
-  margin: 0;
-}
-
-/* Inline field (checkbox, radio with label) */
-:where(.theme-scope) :where([data-block="form"]) .fb-inline {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-/* Success state */
-:where(.theme-scope) :where([data-block="form"]) .fb-success {
-  background-color: var(--fb-success-bg);
-  color: var(--fb-success-text);
-  border: 1px solid var(--fb-success-border);
-  border-radius: var(--rb-block-radius);
-  padding: 1rem;
-  font-size: 0.875rem;
-}
-
-/* Error banner */
-:where(.theme-scope) :where([data-block="form"]) .fb-error {
-  background-color: var(--fb-error-bg);
-  color: var(--fb-error-text);
-  border: 1px solid var(--fb-error-border);
-  border-radius: var(--rb-block-radius);
-  padding: 0.75rem;
-  font-size: 0.875rem;
-  margin-bottom: 0.5rem;
-}
-
-/* Empty state (no form data) */
-:where(.theme-scope) :where([data-block="form"]) .fb-empty {
-  background-color: var(--fb-empty-bg);
-  color: var(--fb-empty-text);
-  border: 1px dashed var(--fb-empty-border);
-  border-radius: var(--rb-block-radius);
-  padding: 1.5rem;
-  font-size: 0.875rem;
-  text-align: center;
-}
-
-/* Form actions (submit button container) */
-:where(.theme-scope) :where([data-block="form"]) .fb-actions {
-  margin-top: 0.5rem;
+/* Altcha wrapper */
+:where(.theme-scope) :where([data-block="appointment-booking"]) .ab-altcha {
+  margin-top: 1rem;
 }
 
 
@@ -7072,6 +6997,93 @@
   color: var(--section-text-color, rgb(var(--tb-text)));
 }
 
+/* =============================================================================
+ * Form Block (fb-*)
+ *
+ * Uses:
+ * - Tier 1 vars: --tb-border, --tb-surface, --tb-success, --tb-destructive
+ * - Tier 2 vars: --rb-block-radius
+ * - Tier 3 vars: --fb-success-*, --fb-error-*, --fb-empty-*
+ *
+ * Note: Form input styling (form-input, form-select, etc.) is handled by
+ * the input CSS generator. These styles are for form container/state only.
+ * ============================================================================= */
+
+/* Form container */
+:where(.theme-scope) :where([data-block="form"]) .fb-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+/* Two-column row (opt-in per field via schema layout) */
+:where(.theme-scope) :where([data-block="form"]) .fb-row-2 {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
+  gap: 1rem;
+}
+
+/* Field wrapper */
+:where(.theme-scope) :where([data-block="form"]) .fb-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+/* Fieldset (for radio groups) */
+:where(.theme-scope) :where([data-block="form"]) .fb-fieldset {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+
+/* Inline field (checkbox, radio with label) */
+:where(.theme-scope) :where([data-block="form"]) .fb-inline {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+/* Success state */
+:where(.theme-scope) :where([data-block="form"]) .fb-success {
+  background-color: var(--fb-success-bg);
+  color: var(--fb-success-text);
+  border: 1px solid var(--fb-success-border);
+  border-radius: var(--rb-block-radius);
+  padding: 1rem;
+  font-size: 0.875rem;
+}
+
+/* Error banner */
+:where(.theme-scope) :where([data-block="form"]) .fb-error {
+  background-color: var(--fb-error-bg);
+  color: var(--fb-error-text);
+  border: 1px solid var(--fb-error-border);
+  border-radius: var(--rb-block-radius);
+  padding: 0.75rem;
+  font-size: 0.875rem;
+  margin-bottom: 0.5rem;
+}
+
+/* Empty state (no form data) */
+:where(.theme-scope) :where([data-block="form"]) .fb-empty {
+  background-color: var(--fb-empty-bg);
+  color: var(--fb-empty-text);
+  border: 1px dashed var(--fb-empty-border);
+  border-radius: var(--rb-block-radius);
+  padding: 1.5rem;
+  font-size: 0.875rem;
+  text-align: center;
+}
+
+/* Form actions (submit button container) */
+:where(.theme-scope) :where([data-block="form"]) .fb-actions {
+  margin-top: 0.5rem;
+}
+
 /* =============================================================================
  * Block-Level Override Utilities
  *
@@ -8690,14 +8702,11 @@
   --cr-on-surface-hover-bg: rgba(var(--tb-onSurface, var(--tb-text)), 0.05);
 }
 
-/* Container */
+/* Container: base styling comes from the shared .rb-reg-surface
+   (registration-surface.css); these overrides preserve course
+   registration's pre-extraction look (fixed padding, centered). */
 :where(.theme-scope) :where([data-block="course-registration"]) .cr-container {
-  border-radius: var(--rb-block-radius);
-  border: 1px solid var(--cr-border);
   padding: 1.5rem;
-  background: rgb(var(--tb-surface));
-  color: var(--cr-on-surface);
-  max-width: 50rem; /* 800px */
   margin-inline: auto;
 }
 
@@ -9368,7 +9377,7 @@
   padding: 2rem 1rem;
 }
 
-/* State icon color variants (layout from registration-shared.css) */
+/* State icon color variants (layout from registration-surface.css) */
 :where(.theme-scope) :where([data-block="course-registration"]) .rb-state-icon--success {
   background: var(--cr-success-bg);
   color: var(--cr-success-text);