@riverbankcms/sdk 0.98.0 → 0.99.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (120) hide show
  1. package/dist/{PreviewEditorSidebar-CG3SSJND.mjs → PreviewEditorSidebar-TPOKCCKY.mjs} +3 -3
  2. package/dist/{PreviewEditorUI-RHNGKAAU.mjs → PreviewEditorUI-Y347GLC2.mjs} +3 -3
  3. package/dist/SdkPreviewModeRuntime-OGTXRQ4M.mjs +8 -0
  4. package/dist/_dts/ai/src/contracts/proposals.d.ts +36 -36
  5. package/dist/_dts/api/src/billing.d.ts +2 -0
  6. package/dist/_dts/api/src/commercePortalEndpoints.d.ts +5 -1
  7. package/dist/_dts/api/src/endpoints.d.ts +8 -0
  8. package/dist/_dts/api/src/index.d.ts +1 -1
  9. package/dist/_dts/api/src/siteOperations.d.ts +65 -1
  10. package/dist/_dts/billing/src/site-arrangements.d.ts +151 -0
  11. package/dist/_dts/billing/src/subscriptions/store.d.ts +2 -0
  12. package/dist/_dts/block-form/src/widgets/RepeaterField/utils/resolveThumbnail.d.ts +2 -1
  13. package/dist/_dts/blocks/src/PageRenderer.d.ts +6 -0
  14. package/dist/_dts/blocks/src/system/runtime/components/booking/DatePicker.d.ts +6 -2
  15. package/dist/_dts/blocks/src/system/runtime/components/booking/SuccessMessage.d.ts +3 -1
  16. package/dist/_dts/blocks/src/system/runtime/components/booking/TimeSlotSelector.d.ts +10 -4
  17. package/dist/_dts/blocks/src/system/runtime/hooks/useHeadlessBookingFlow.state.d.ts +2 -2
  18. package/dist/_dts/blocks/src/system/runtime/nodes/booking-form.headless.state.d.ts +11 -0
  19. package/dist/_dts/blocks/src/system/runtime/nodes/event-registration/StepIndicator.d.ts +3 -1
  20. package/dist/_dts/blocks/src/system/runtime/shared/components/FeedbackMessage.d.ts +2 -1
  21. package/dist/_dts/blocks/src/system/runtime/{nodes/event-registration → shared/components}/SelectableOptionCard.d.ts +11 -2
  22. package/dist/_dts/blocks/src/system/runtime/shared/components/StepIndicator.d.ts +16 -5
  23. package/dist/_dts/blocks/src/system/runtime/shared/components/index.d.ts +2 -0
  24. package/dist/_dts/blocks/src/system/runtime/shared/index.d.ts +2 -2
  25. package/dist/_dts/blocks/src/utils/date-formatting.d.ts +17 -1
  26. package/dist/_dts/db/src/generated/supabase/database.types.d.ts +274 -30
  27. package/dist/_dts/sdk/src/__mocks__/next-cache.d.ts +1 -1
  28. package/dist/_dts/sdk/src/cli/commands/push.d.ts +13 -0
  29. package/dist/_dts/sdk/src/cli/merge-remote/entryMergeReport.d.ts +6 -18
  30. package/dist/_dts/sdk/src/cli/merge-remote/entrySnapshots.d.ts +2 -4
  31. package/dist/_dts/sdk/src/cli/merge-remote/pageMergeReport.d.ts +6 -18
  32. package/dist/_dts/sdk/src/cli/merge-remote/pageSnapshots.d.ts +2 -4
  33. package/dist/_dts/sdk/src/cli/merge-remote/sharedBaseSnapshots.d.ts +32 -0
  34. package/dist/_dts/sdk/src/cli/merge-remote/sharedMergePlan.d.ts +27 -0
  35. package/dist/_dts/sdk/src/cli/merge-remote/sharedMergeReport.d.ts +63 -0
  36. package/dist/_dts/sdk/src/client/index.d.ts +6 -0
  37. package/dist/_dts/sdk/src/data/prefetchBlockData.d.ts +6 -1
  38. package/dist/_dts/sdk/src/next/types.d.ts +19 -0
  39. package/dist/_dts/sdk/src/prebuild/loader.d.ts +8 -1
  40. package/dist/_dts/sdk/src/rendering/blocks-page-renderer.d.ts +2 -0
  41. package/dist/_dts/sdk/src/rendering/components/pageShared.d.ts +4 -0
  42. package/dist/_dts/sdk/src/rendering/helpers/loadContent.d.ts +6 -0
  43. package/dist/_dts/sdk/src/rendering/helpers/loadPage.d.ts +8 -0
  44. package/dist/_dts/sdk/src/rendering/index.d.ts +7 -7
  45. package/dist/_dts/sdk/src/rendering/overrides.d.ts +2 -0
  46. package/dist/_dts/sdk/src/routing/resolveRoute.d.ts +18 -0
  47. package/dist/_dts/sdk/src/test/apiClient.d.ts +17 -0
  48. package/dist/_dts/sdk/src/test/bunDom.setup.d.ts +1 -0
  49. package/dist/_dts/sdk/src/test/env.d.ts +4 -0
  50. package/dist/_dts/sdk/src/version.d.ts +1 -1
  51. package/dist/_dts/site-commands/src/commands.d.ts +3 -3
  52. package/dist/_dts/theme-core/src/generated/containerResponsiveThemeCss.d.ts +1 -1
  53. package/dist/_dts/theme-core/src/interactive/generateBaseCSS.d.ts +6 -0
  54. package/dist/_dts/theme-core/src/status/contextualColors.d.ts +6 -0
  55. package/dist/_dts/theme-core/src/status/index.d.ts +1 -0
  56. package/dist/{chunk-H24OU7WG.mjs → chunk-4HXF2QLH.mjs} +2 -2
  57. package/dist/{chunk-QPXE2OUZ.mjs → chunk-EMJIT3ZJ.mjs} +1 -1
  58. package/dist/{chunk-PKDPQHB5.mjs → chunk-PM7HGDHM.mjs} +2 -2
  59. package/dist/{chunk-DBRI3PQF.mjs → chunk-XO34WBBP.mjs} +1383 -1143
  60. package/dist/{chunk-6WDBXCPX.mjs → chunk-YGTTEVUM.mjs} +7 -7
  61. package/dist/{chunk-V2BYFSPW.mjs → chunk-YWTCCOSF.mjs} +8 -0
  62. package/dist/cli/index.mjs +1010 -921
  63. package/dist/client/{accordion-Q2BDNL53.mjs → accordion-QSUEYL4L.mjs} +2 -2
  64. package/dist/client/{bookingForm-ZMP4P7EK.mjs → bookingForm-QYGAHPDP.mjs} +364 -300
  65. package/dist/client/bookings.mjs +697 -411
  66. package/dist/client/{carousel-LW3UXPWO.mjs → carousel-SM2LEWAU.mjs} +3 -3
  67. package/dist/client/{cart-Z6D3KS6K.mjs → cart-3N3SFKNQ.mjs} +7 -7
  68. package/dist/client/{checkout-YMT2QJQM.mjs → checkout-YFAYPKPZ.mjs} +7 -7
  69. package/dist/client/{chunk-XNTHVZ25.mjs → chunk-5DLGREUB.mjs} +1 -1
  70. package/dist/client/{chunk-SK2BMD22.mjs → chunk-CLZ7NBSP.mjs} +147 -75
  71. package/dist/client/{chunk-R4XK3CKR.mjs → chunk-CYJ3MUFP.mjs} +6 -5
  72. package/dist/client/{chunk-JNE6UI6U.mjs → chunk-H3H3ODO7.mjs} +1 -1
  73. package/dist/client/{chunk-IEOECM7U.mjs → chunk-HPEQ4YWW.mjs} +28 -73
  74. package/dist/client/{chunk-PCHACQEB.mjs → chunk-IIUIKJ4K.mjs} +15 -7
  75. package/dist/client/{chunk-KDP7ZRZV.mjs → chunk-IOAHWAQG.mjs} +2 -0
  76. package/dist/client/{chunk-26ZBRXFR.mjs → chunk-JTKBF3W2.mjs} +3 -3
  77. package/dist/client/{chunk-OLAOAZEO.mjs → chunk-K7KTSACR.mjs} +1 -1
  78. package/dist/client/{chunk-ET2MDQQT.mjs → chunk-R32M5HFS.mjs} +6 -6
  79. package/dist/client/{chunk-DRRQ7QSL.mjs → chunk-WEVT46PX.mjs} +3 -3
  80. package/dist/client/{chunk-HBQEAOG4.mjs → chunk-ZU65LTI3.mjs} +1 -1
  81. package/dist/client/client.mjs +1875 -1581
  82. package/dist/client/{courseRegistration-DGKCMC77.mjs → courseRegistration-LYBE7VVK.mjs} +7 -7
  83. package/dist/client/{eventCalendar-74Z2NNFM.mjs → eventCalendar-FMTB75X6.mjs} +9 -9
  84. package/dist/client/{eventCombined-GK2ODOX2.mjs → eventCombined-E4LUCJXT.mjs} +9 -9
  85. package/dist/client/{eventDetails-MONAGT3N.mjs → eventDetails-GELSRR4Z.mjs} +9 -9
  86. package/dist/client/{eventListing-SKGAO6PS.mjs → eventListing-TB623B6R.mjs} +9 -9
  87. package/dist/client/{eventRegistration-6KISGXRD.mjs → eventRegistration-NRIKHXTI.mjs} +9 -9
  88. package/dist/client/{form-FXPRTXHI.mjs → form-Y4U4IAXE.mjs} +3 -3
  89. package/dist/client/{headerSection-7NAN5WNB.mjs → headerSection-QSOVV5P7.mjs} +3 -3
  90. package/dist/client/hooks.mjs +115 -21
  91. package/dist/client/{locationMap-UERN74U4.mjs → locationMap-QYCAHH7H.mjs} +3 -3
  92. package/dist/client/{newsletterForm-SGWXMJ7U.mjs → newsletterForm-NWHY5TBY.mjs} +3 -3
  93. package/dist/client/{productDetail-HN3HWZQZ.mjs → productDetail-FYDMU2CE.mjs} +7 -7
  94. package/dist/client/{productList-YT22Z5UR.mjs → productList-D76CGACQ.mjs} +7 -7
  95. package/dist/client/rendering/client.mjs +1209 -975
  96. package/dist/client/rendering/islands.mjs +19 -19
  97. package/dist/client/rendering.mjs +1952 -1638
  98. package/dist/client/{shop-TKEDNWUS.mjs → shop-SOUACT5N.mjs} +7 -7
  99. package/dist/preview-next/before-render.mjs +8 -0
  100. package/dist/preview-next/client/runtime.mjs +5 -5
  101. package/dist/preview-next/middleware.mjs +8 -0
  102. package/dist/{sdk-runtime-LWNYCQF2.mjs → sdk-runtime-XPVE3LBA.mjs} +6 -6
  103. package/dist/server/components.mjs +917 -765
  104. package/dist/server/config-validation.mjs +100 -19
  105. package/dist/server/config.mjs +100 -19
  106. package/dist/server/data.mjs +115 -21
  107. package/dist/server/index.mjs +59 -25
  108. package/dist/server/next.mjs +1017 -816
  109. package/dist/server/page-converter.mjs +92 -19
  110. package/dist/server/prebuild-loader.mjs +42 -23
  111. package/dist/server/prebuild.mjs +1 -1
  112. package/dist/server/rendering/server.mjs +932 -767
  113. package/dist/server/rendering.mjs +968 -776
  114. package/dist/server/routing.mjs +162 -36
  115. package/dist/server/server.mjs +156 -32
  116. package/dist/server/theme-bridge.mjs +597 -505
  117. package/dist/server/theme.mjs +5 -4
  118. package/dist/styles/index.css +499 -490
  119. package/package.json +6 -4
  120. package/dist/SdkPreviewModeRuntime-OV5PNJBB.mjs +0 -8
@@ -6651,6 +6651,79 @@ var TokenResolver = class {
6651
6651
  }
6652
6652
  };
6653
6653
 
6654
+ // ../theme-core/src/interactive/generateBaseCSS.ts
6655
+ var FONT_WEIGHT_MAP = {
6656
+ regular: 400,
6657
+ medium: 500,
6658
+ semibold: 600,
6659
+ bold: 700
6660
+ };
6661
+ function generateBaseInteractiveCSS(options) {
6662
+ const {
6663
+ typography,
6664
+ padding,
6665
+ borderRadius,
6666
+ includeTransition = true,
6667
+ includeFlexCenter = false,
6668
+ borderWidth
6669
+ } = options;
6670
+ const rules = [];
6671
+ if (typography.fontWeight !== void 0) {
6672
+ const weight = typeof typography.fontWeight === "number" ? typography.fontWeight : FONT_WEIGHT_MAP[typography.fontWeight];
6673
+ rules.push(`font-weight: ${weight};`);
6674
+ }
6675
+ if (typography.typography === "heading") {
6676
+ rules.push(`font-family: var(--font-heading);`);
6677
+ rules.push(`letter-spacing: var(--ls-heading);`);
6678
+ } else if (typography.typography === "body") {
6679
+ rules.push(`font-family: var(--font-body);`);
6680
+ }
6681
+ if (typography.italic) {
6682
+ rules.push(`font-style: italic;`);
6683
+ }
6684
+ if (typography.textTransform && typography.textTransform !== "none") {
6685
+ rules.push(`text-transform: ${typography.textTransform};`);
6686
+ }
6687
+ if (padding) {
6688
+ if (borderWidth && borderWidth !== "0px") {
6689
+ const paddingParts = padding.split(" ");
6690
+ const verticalPadding = paddingParts[0] || "0.5rem";
6691
+ const horizontalPadding = paddingParts[1] || paddingParts[0] || "1rem";
6692
+ rules.push(`padding-top: calc(${verticalPadding} - ${borderWidth} - 1px);`);
6693
+ rules.push(`padding-bottom: calc(${verticalPadding} - ${borderWidth} - 1px);`);
6694
+ rules.push(`padding-left: calc(${horizontalPadding} - ${borderWidth});`);
6695
+ rules.push(`padding-right: calc(${horizontalPadding} - ${borderWidth});`);
6696
+ } else {
6697
+ rules.push(`padding: ${padding};`);
6698
+ }
6699
+ }
6700
+ if (borderRadius) {
6701
+ rules.push(`border-radius: ${borderRadius};`);
6702
+ }
6703
+ if (includeTransition) {
6704
+ rules.push(`transition: all 200ms ease;`);
6705
+ }
6706
+ if (includeFlexCenter) {
6707
+ rules.push(`display: inline-flex;`);
6708
+ rules.push(`align-items: center;`);
6709
+ rules.push(`justify-content: center;`);
6710
+ rules.push(`cursor: pointer;`);
6711
+ }
6712
+ return rules;
6713
+ }
6714
+ function generateInteractiveChildInheritanceCSS(selector) {
6715
+ return `
6716
+ ${selector} * {
6717
+ font-family: inherit;
6718
+ font-weight: inherit;
6719
+ font-style: inherit;
6720
+ letter-spacing: inherit;
6721
+ text-transform: inherit;
6722
+ color: inherit;
6723
+ }
6724
+ `;
6725
+ }
6726
+
6654
6727
  // ../theme-core/src/buttons/effects/presets/background.ts
6655
6728
  var darkenBackgroundEffect = {
6656
6729
  id: "darken-background",
@@ -8145,7 +8218,9 @@ function resolveAliasSource(enabled) {
8145
8218
  function variantChunks(variant, global, themeSizes, themeId, tokens, theme) {
8146
8219
  const out = [];
8147
8220
  const variantId = parseButtonVariantIdForCss(variant.id);
8148
- out.push(variantBaseRule(variant, variantId, global, themeId, tokens, theme));
8221
+ const selector = `:where([data-theme-scope="${themeId}"]) ${themeButtonSelector(variantId)}`;
8222
+ out.push(variantBaseRule(variant, selector, global, tokens, theme));
8223
+ out.push({ raw: generateInteractiveChildInheritanceCSS(selector) });
8149
8224
  const hoverBg = variantHoverBackgroundRule(variant, variantId, global, themeId, tokens);
8150
8225
  if (hoverBg) out.push(hoverBg);
8151
8226
  out.push(variantFocusVisibleRule(variantId, themeId));
@@ -8162,8 +8237,7 @@ function parseButtonVariantIdForCss(value) {
8162
8237
  }
8163
8238
  return variantId;
8164
8239
  }
8165
- function variantBaseRule(variant, variantId, global, themeId, tokens, theme) {
8166
- const selector = `:where([data-theme-scope="${themeId}"]) ${themeButtonSelector(variantId)}`;
8240
+ function variantBaseRule(variant, selector, global, tokens, theme) {
8167
8241
  const decls = [];
8168
8242
  decls.push(["font-weight", String(global.fontWeight)]);
8169
8243
  decls.push(["font-family", resolveFontFamily(global)]);
@@ -8799,15 +8873,16 @@ var joyStamp = defineButtonPersonality({
8799
8873
  // 700, matching the mockup's chunky button labels.
8800
8874
  typography: "heading",
8801
8875
  fontWeight: 700,
8876
+ fontSize: "text-lg",
8802
8877
  borderWidth: 2,
8803
8878
  hoverTransform: "none",
8804
8879
  hoverColor: "none"
8805
8880
  },
8806
8881
  sizes: {
8807
- sm: { padding: "0.625rem 1.25rem", fontSize: "text-sm" },
8808
- md: { padding: "0.875rem 1.75rem", fontSize: "text-base" },
8809
- lg: { padding: "1.125rem 2.25rem", fontSize: "text-lg" },
8810
- xl: { padding: "1.25rem 2.75rem", fontSize: "text-xl" }
8882
+ sm: { padding: "0.625rem 1.25rem", fontSize: "text-base" },
8883
+ md: { padding: "0.875rem 1.75rem", fontSize: "text-lg" },
8884
+ lg: { padding: "1.125rem 2.25rem", fontSize: "text-xl" },
8885
+ xl: { padding: "1.25rem 2.75rem", fontSize: "text-2xl" }
8811
8886
  },
8812
8887
  variants: [
8813
8888
  {
@@ -9385,6 +9460,20 @@ function generateDefaultCardSystem(theme) {
9385
9460
  };
9386
9461
  }
9387
9462
 
9463
+ // ../theme-core/src/status/contextualColors.ts
9464
+ var STATUS_MUTED_COLOR_VAR = "--rb-status-muted-color";
9465
+ var DEFAULT_STATUS_MUTED_COLOR = "rgb(var(--tb-mutedText))";
9466
+ var SURFACE_MUTED_STATUS_COLOR = "color-mix(in oklab, currentColor, transparent 18%)";
9467
+ function statusMutedColorValue() {
9468
+ return `var(${STATUS_MUTED_COLOR_VAR}, ${DEFAULT_STATUS_MUTED_COLOR})`;
9469
+ }
9470
+ function statusMutedColorDeclaration() {
9471
+ return `color: ${statusMutedColorValue()};`;
9472
+ }
9473
+ function contextualMutedStatusColorDeclaration(value) {
9474
+ return `${STATUS_MUTED_COLOR_VAR}: ${value}`;
9475
+ }
9476
+
9388
9477
  // ../theme-core/src/cards/generateCardCss.ts
9389
9478
  var PER_CORNER_RADIUS_MAP = {
9390
9479
  square: "0",
@@ -9458,6 +9547,7 @@ function generateVariantCSS(variant, themeId, tokens, theme) {
9458
9547
  if (variant.foregroundToken) {
9459
9548
  rules.push(`color: ${tokens.getColor(variant.foregroundToken)}`);
9460
9549
  }
9550
+ rules.push(contextualMutedStatusColorDeclaration(SURFACE_MUTED_STATUS_COLOR));
9461
9551
  if (variant.accentEdge) {
9462
9552
  const side = ACCENT_EDGE_SIDE_MAP[variant.accentEdge.edge];
9463
9553
  const width = ACCENT_EDGE_WIDTH_MAP[variant.accentEdge.width];
@@ -9716,7 +9806,7 @@ var LABEL_FONT_SIZE_MAP = {
9716
9806
  base: "1rem"
9717
9807
  // 16px
9718
9808
  };
9719
- var FONT_WEIGHT_MAP = {
9809
+ var FONT_WEIGHT_MAP2 = {
9720
9810
  regular: "400",
9721
9811
  medium: "500",
9722
9812
  semibold: "600",
@@ -40869,14 +40959,27 @@ function BookingFormSSR({
40869
40959
  return /* @__PURE__ */ jsxs15(
40870
40960
  "div",
40871
40961
  {
40872
- className: `booking-form-ssr ${className ?? ""}`.trim(),
40962
+ className: `rb-reg-surface booking-form-ssr ${display.state === "missing" ? "" : "ab-shell "}${className ?? ""}`.trim(),
40873
40963
  ...getIslandRootProps("booking-form", blockId),
40964
+ "aria-busy": display.state === "missing" ? void 0 : true,
40965
+ "aria-label": display.state === "missing" ? void 0 : "Loading booking form",
40966
+ role: display.state === "missing" ? void 0 : "status",
40874
40967
  children: [
40875
40968
  /* @__PURE__ */ jsx29(IslandPropsScript, { value: islandProps }),
40876
- /* @__PURE__ */ jsx29("div", { className: "booking-form-ssr__summary", children: display.state === "missing" ? /* @__PURE__ */ jsx29("p", { className: "booking-form-ssr__error", children: display.message }) : /* @__PURE__ */ jsxs15(Fragment3, { children: [
40877
- /* @__PURE__ */ jsx29("strong", { children: display.submitLabel }),
40878
- display.successMessage ? /* @__PURE__ */ jsx29("p", { className: "booking-form-ssr__success", children: display.successMessage }) : null
40879
- ] }) }),
40969
+ display.state === "missing" ? /* @__PURE__ */ jsx29("div", { className: "alert alert-error", role: "alert", children: /* @__PURE__ */ jsx29("p", { className: "ab-text", children: display.message }) }) : /* @__PURE__ */ jsxs15(Fragment3, { children: [
40970
+ /* @__PURE__ */ jsx29("span", { className: "rb-sr-only", children: "Loading booking form..." }),
40971
+ /* @__PURE__ */ jsxs15("div", { className: "rb-reg-stack", "aria-hidden": "true", children: [
40972
+ /* @__PURE__ */ jsx29("div", { className: "rb-reg-summary", children: /* @__PURE__ */ jsxs15("div", { className: "rb-reg-stack rb-reg-stack--sm", children: [
40973
+ /* @__PURE__ */ jsx29("div", { className: "rb-shell-line rb-shell-line--md" }),
40974
+ /* @__PURE__ */ jsx29("div", { className: "rb-shell-line rb-shell-line--sm" })
40975
+ ] }) }),
40976
+ /* @__PURE__ */ jsxs15("div", { className: "rb-reg-stack rb-reg-stack--sm", children: [
40977
+ /* @__PURE__ */ jsx29("div", { className: "rb-shell-line rb-shell-line--lg" }),
40978
+ /* @__PURE__ */ jsx29("div", { className: "rb-shell-line rb-shell-line--xs" })
40979
+ ] }),
40980
+ /* @__PURE__ */ jsx29("div", { className: "rb-wizard-actions", children: /* @__PURE__ */ jsx29("div", { className: "ab-shell-button", children: display.submitLabel }) })
40981
+ ] })
40982
+ ] }),
40880
40983
  children
40881
40984
  ]
40882
40985
  }
@@ -43528,20 +43631,38 @@ function EventRegistrationShell({
43528
43631
  "div",
43529
43632
  {
43530
43633
  id: EVENT_REGISTRATION_ANCHOR_ID,
43531
- className: "er-container er-registration-shell",
43634
+ className: "rb-reg-surface er-container er-registration-shell",
43532
43635
  "aria-busy": "true",
43533
43636
  role: "status",
43534
43637
  children: /* @__PURE__ */ jsxs38("div", { className: "er-payment-layout er-payment-layout--no-sidebar", children: [
43535
43638
  /* @__PURE__ */ jsxs38("div", { className: "er-payment-layout-main", children: [
43536
- /* @__PURE__ */ jsx54("div", { className: "er-steps-nav er-registration-shell__steps", "aria-hidden": "true", children: /* @__PURE__ */ jsx54("ol", { className: "er-steps", children: display.stepLabels.map((label, index) => {
43639
+ /* @__PURE__ */ jsx54("div", { className: "rb-steps-nav er-steps-nav er-registration-shell__steps", "aria-hidden": "true", children: /* @__PURE__ */ jsx54("ol", { className: "rb-steps er-steps", children: display.stepLabels.map((label, index) => {
43537
43640
  const isActive = index === 0;
43538
- return /* @__PURE__ */ jsxs38("li", { className: "er-step", children: [
43539
- /* @__PURE__ */ jsx54("span", { className: cx("er-step-circle", isActive && "er-step-circle--active"), children: index + 1 }),
43540
- /* @__PURE__ */ jsx54("span", { className: cx("er-step-label", isActive && "er-step-label--active"), children: label }),
43541
- index < display.stepLabels.length - 1 ? /* @__PURE__ */ jsx54("span", { className: "er-step-connector" }) : null
43641
+ return /* @__PURE__ */ jsxs38("li", { className: "rb-step er-step", children: [
43642
+ /* @__PURE__ */ jsx54(
43643
+ "span",
43644
+ {
43645
+ className: cx(
43646
+ "rb-step-circle er-step-circle",
43647
+ isActive && "rb-step-circle--active er-step-circle--active"
43648
+ ),
43649
+ children: index + 1
43650
+ }
43651
+ ),
43652
+ /* @__PURE__ */ jsx54(
43653
+ "span",
43654
+ {
43655
+ className: cx(
43656
+ "rb-step-label er-step-label",
43657
+ isActive && "rb-step-label--active er-step-label--active"
43658
+ ),
43659
+ children: label
43660
+ }
43661
+ ),
43662
+ index < display.stepLabels.length - 1 ? /* @__PURE__ */ jsx54("span", { className: "rb-step-connector er-step-connector" }) : null
43542
43663
  ] }, label);
43543
43664
  }) }) }),
43544
- /* @__PURE__ */ jsxs38("div", { className: "er-stack", children: [
43665
+ /* @__PURE__ */ jsxs38("div", { className: "rb-reg-stack er-stack", children: [
43545
43666
  /* @__PURE__ */ jsxs38("div", { children: [
43546
43667
  /* @__PURE__ */ jsx54("p", { className: "er-registration-shell__eyebrow", children: "Registration" }),
43547
43668
  /* @__PURE__ */ jsx54("h3", { className: "er-title er-registration-shell__title", children: display.titleText }),
@@ -43549,20 +43670,20 @@ function EventRegistrationShell({
43549
43670
  ] }),
43550
43671
  /* @__PURE__ */ jsxs38("div", { className: "er-event-grid er-registration-shell__cards", "aria-hidden": "true", children: [
43551
43672
  /* @__PURE__ */ jsxs38("div", { className: "er-event-card er-registration-shell__card", children: [
43552
- /* @__PURE__ */ jsx54("div", { className: "er-registration-shell__line er-registration-shell__line--lg" }),
43553
- /* @__PURE__ */ jsx54("div", { className: "er-registration-shell__line er-registration-shell__line--sm" })
43673
+ /* @__PURE__ */ jsx54("div", { className: "rb-shell-line rb-shell-line--lg er-registration-shell__line er-registration-shell__line--lg" }),
43674
+ /* @__PURE__ */ jsx54("div", { className: "rb-shell-line rb-shell-line--sm er-registration-shell__line er-registration-shell__line--sm" })
43554
43675
  ] }),
43555
43676
  /* @__PURE__ */ jsxs38("div", { className: "er-event-card er-registration-shell__card", children: [
43556
- /* @__PURE__ */ jsx54("div", { className: "er-registration-shell__line er-registration-shell__line--md" }),
43557
- /* @__PURE__ */ jsx54("div", { className: "er-registration-shell__line er-registration-shell__line--xs" })
43677
+ /* @__PURE__ */ jsx54("div", { className: "rb-shell-line rb-shell-line--md er-registration-shell__line er-registration-shell__line--md" }),
43678
+ /* @__PURE__ */ jsx54("div", { className: "rb-shell-line rb-shell-line--xs er-registration-shell__line er-registration-shell__line--xs" })
43558
43679
  ] })
43559
43680
  ] })
43560
43681
  ] })
43561
43682
  ] }),
43562
43683
  /* @__PURE__ */ jsx54("div", { className: "er-payment-layout-footer", children: /* @__PURE__ */ jsxs38("div", { className: "er-summary-bar er-registration-shell__summary", "aria-hidden": "true", children: [
43563
43684
  /* @__PURE__ */ jsxs38("div", { className: "er-summary-bar-info", children: [
43564
- /* @__PURE__ */ jsx54("div", { className: "er-registration-shell__line er-registration-shell__line--md" }),
43565
- /* @__PURE__ */ jsx54("div", { className: "er-registration-shell__line er-registration-shell__line--xs" })
43685
+ /* @__PURE__ */ jsx54("div", { className: "rb-shell-line rb-shell-line--md er-registration-shell__line er-registration-shell__line--md" }),
43686
+ /* @__PURE__ */ jsx54("div", { className: "rb-shell-line rb-shell-line--xs er-registration-shell__line er-registration-shell__line--xs" })
43566
43687
  ] }),
43567
43688
  /* @__PURE__ */ jsx54("div", { className: "er-registration-shell__button-placeholder", children: display.summaryButtonText })
43568
43689
  ] }) })
@@ -43581,6 +43702,7 @@ function FeedbackMessage({
43581
43702
  tone,
43582
43703
  children,
43583
43704
  className,
43705
+ id,
43584
43706
  title,
43585
43707
  titleClassName,
43586
43708
  bodyClassName,
@@ -43592,6 +43714,7 @@ function FeedbackMessage({
43592
43714
  return /* @__PURE__ */ jsxs39(
43593
43715
  "div",
43594
43716
  {
43717
+ id,
43595
43718
  className,
43596
43719
  "data-feedback-tone": tone,
43597
43720
  role,
@@ -45812,7 +45935,7 @@ function generateInputCss({
45812
45935
  const labelSelector = `${rootSelector} .form-label`;
45813
45936
  const labelRules = [];
45814
45937
  labelRules.push(`color: ${rgbColorValue(inputSystem.label.textColorToken)}`);
45815
- labelRules.push(`font-weight: ${FONT_WEIGHT_MAP[inputSystem.label.fontWeight]}`);
45938
+ labelRules.push(`font-weight: ${FONT_WEIGHT_MAP2[inputSystem.label.fontWeight]}`);
45816
45939
  labelRules.push(`font-size: ${LABEL_FONT_SIZE_MAP[inputSystem.label.fontSize]}`);
45817
45940
  if (inputSystem.label.textTransform && inputSystem.label.textTransform !== "none") {
45818
45941
  labelRules.push(`text-transform: ${inputSystem.label.textTransform}`);
@@ -46053,67 +46176,6 @@ function generateDefaultInputSystem(theme) {
46053
46176
  };
46054
46177
  }
46055
46178
 
46056
- // ../theme-core/src/interactive/generateBaseCSS.ts
46057
- var FONT_WEIGHT_MAP2 = {
46058
- regular: 400,
46059
- medium: 500,
46060
- semibold: 600,
46061
- bold: 700
46062
- };
46063
- function generateBaseInteractiveCSS(options) {
46064
- const {
46065
- typography,
46066
- padding,
46067
- borderRadius,
46068
- includeTransition = true,
46069
- includeFlexCenter = false,
46070
- borderWidth
46071
- } = options;
46072
- const rules = [];
46073
- if (typography.fontWeight !== void 0) {
46074
- const weight = typeof typography.fontWeight === "number" ? typography.fontWeight : FONT_WEIGHT_MAP2[typography.fontWeight];
46075
- rules.push(`font-weight: ${weight};`);
46076
- }
46077
- if (typography.typography === "heading") {
46078
- rules.push(`font-family: var(--font-heading);`);
46079
- rules.push(`letter-spacing: var(--ls-heading);`);
46080
- } else if (typography.typography === "body") {
46081
- rules.push(`font-family: var(--font-body);`);
46082
- }
46083
- if (typography.italic) {
46084
- rules.push(`font-style: italic;`);
46085
- }
46086
- if (typography.textTransform && typography.textTransform !== "none") {
46087
- rules.push(`text-transform: ${typography.textTransform};`);
46088
- }
46089
- if (padding) {
46090
- if (borderWidth && borderWidth !== "0px") {
46091
- const paddingParts = padding.split(" ");
46092
- const verticalPadding = paddingParts[0] || "0.5rem";
46093
- const horizontalPadding = paddingParts[1] || paddingParts[0] || "1rem";
46094
- rules.push(`padding-top: calc(${verticalPadding} - ${borderWidth} - 1px);`);
46095
- rules.push(`padding-bottom: calc(${verticalPadding} - ${borderWidth} - 1px);`);
46096
- rules.push(`padding-left: calc(${horizontalPadding} - ${borderWidth});`);
46097
- rules.push(`padding-right: calc(${horizontalPadding} - ${borderWidth});`);
46098
- } else {
46099
- rules.push(`padding: ${padding};`);
46100
- }
46101
- }
46102
- if (borderRadius) {
46103
- rules.push(`border-radius: ${borderRadius};`);
46104
- }
46105
- if (includeTransition) {
46106
- rules.push(`transition: all 200ms ease;`);
46107
- }
46108
- if (includeFlexCenter) {
46109
- rules.push(`display: inline-flex;`);
46110
- rules.push(`align-items: center;`);
46111
- rules.push(`justify-content: center;`);
46112
- rules.push(`cursor: pointer;`);
46113
- }
46114
- return rules;
46115
- }
46116
-
46117
46179
  // ../theme-core/src/navigation/generateNavLinkCSS.ts
46118
46180
  function generateNavLinkCSS(options) {
46119
46181
  const { themeId, tokens, theme, style, className } = options;
@@ -46200,14 +46262,7 @@ ${activeSelector} {
46200
46262
  }
46201
46263
  `);
46202
46264
  }
46203
- cssChunks.push(`
46204
- ${selector} * {
46205
- font-family: inherit;
46206
- font-weight: inherit;
46207
- letter-spacing: inherit;
46208
- color: inherit;
46209
- }
46210
- `);
46265
+ cssChunks.push(generateInteractiveChildInheritanceCSS(selector));
46211
46266
  return cssChunks.join("");
46212
46267
  }
46213
46268
  function buildTextContrastShadow(input) {
@@ -47504,7 +47559,7 @@ ${root} .status-error { color: rgb(var(--tb-destructive)); }
47504
47559
  ${root} .status-success { color: rgb(var(--tb-success)); }
47505
47560
  ${root} .status-warning { color: rgb(var(--tb-warning)); }
47506
47561
  ${root} .status-info { color: rgb(var(--tb-info)); }
47507
- ${root} .status-muted { color: rgb(var(--tb-mutedText)); }`);
47562
+ ${root} .status-muted { ${statusMutedColorDeclaration()} }`);
47508
47563
  cssBlocks.push(`/* Alert containers */
47509
47564
  ${root} .alert {
47510
47565
  padding: 1rem;
@@ -47820,6 +47875,34 @@ ${root} {
47820
47875
  /* Order summary */
47821
47876
  --er-summary-bg: rgba(var(--tb-primary), 0.1);
47822
47877
  --er-summary-border: rgb(var(--tb-border));
47878
+
47879
+ /* Shared registration-surface mappings (issue 1174).
47880
+ Route the shared --rb-reg-* contract through this block's documented
47881
+ Tier 3 vars so existing --er-* overrides keep working unchanged. */
47882
+ --rb-reg-radius: var(--er-radius);
47883
+ --rb-reg-border: var(--er-border);
47884
+ --rb-reg-border-hover: var(--er-border-hover);
47885
+ --rb-reg-border-selected: var(--er-border-selected);
47886
+ --rb-reg-bg-selected: var(--er-payment-bg-selected);
47887
+ --rb-reg-option-bg: var(--er-control-bg);
47888
+ --rb-reg-option-hover-shadow: 0 8px 18px rgba(var(--tb-shadow, 15 23 42), 0.08);
47889
+ --rb-reg-surface-bg: rgb(var(--tb-surface));
47890
+ --rb-reg-on-surface: var(--er-on-surface);
47891
+ --rb-reg-on-surface-muted: var(--er-on-surface-muted);
47892
+ --rb-reg-on-surface-subtle: var(--er-on-surface-subtle);
47893
+ --rb-reg-on-surface-faint: var(--er-on-surface-faint);
47894
+ --rb-reg-check-bg: var(--er-check-bg);
47895
+ --rb-reg-check-text: var(--er-check-text);
47896
+ --rb-reg-step-active: var(--er-step-active);
47897
+ --rb-reg-step-completed: var(--er-step-completed);
47898
+ --rb-reg-step-inactive: var(--er-step-inactive);
47899
+ --rb-reg-step-text: var(--er-step-text);
47900
+ --rb-reg-step-text-active: var(--er-step-text-active);
47901
+ --rb-reg-step-connector: var(--er-step-connector);
47902
+ --rb-reg-summary-bg: var(--er-surface-muted);
47903
+ --rb-reg-summary-border: var(--er-border);
47904
+ --rb-reg-focus-ring: var(--er-focus-ring);
47905
+ --rb-reg-shell-line: var(--er-shell-line);
47823
47906
  }
47824
47907
  `;
47825
47908
  }
@@ -47952,25 +48035,40 @@ ${root} {
47952
48035
  --ab-info-bg: rgba(var(--tb-info), 0.1);
47953
48036
  --ab-info-text: rgb(var(--tb-info));
47954
48037
 
47955
- /* Loading/muted states */
48038
+ /* Muted summary state */
47956
48039
  --ab-muted-bg: rgba(var(--tb-text), 0.05);
47957
- --ab-muted-text: rgba(var(--tb-text), 0.6);
47958
- --ab-spinner-color: rgb(var(--tb-primary));
47959
48040
 
47960
- /* Form elements */
47961
- --ab-input-border: rgb(var(--tb-border));
48041
+ /* Focus ring used by shared registration-surface controls */
47962
48042
  --ab-input-focus-ring: rgba(var(--tb-primary), 0.3);
47963
48043
 
47964
- /* Buttons */
47965
- --ab-btn-primary-bg: rgb(var(--tb-primary));
47966
- --ab-btn-primary-text: rgb(var(--tb-background));
47967
- --ab-btn-primary-hover: rgba(var(--tb-primary), 0.9);
47968
- --ab-btn-secondary-border: rgb(var(--tb-border));
47969
- --ab-btn-secondary-hover: rgba(var(--tb-text), 0.05);
47970
-
47971
- /* Text opacity levels */
47972
- --ab-text-muted-opacity: 0.6;
47973
- --ab-text-faint-opacity: 0.4;
48044
+ /* Shared registration-surface mappings (issue 1174).
48045
+ Route the shared --rb-reg-* contract through this block's Tier 3 vars
48046
+ (palette tokens where no --ab-* var exists) so --ab-* overrides keep
48047
+ working as the block adopts the shared classes. */
48048
+ --rb-reg-radius: var(--ab-card-radius, var(--rb-block-radius));
48049
+ --rb-reg-border: var(--ab-card-border);
48050
+ --rb-reg-border-hover: var(--ab-card-border-hover);
48051
+ --rb-reg-border-selected: var(--ab-card-border-selected);
48052
+ --rb-reg-bg-selected: var(--ab-card-bg-selected);
48053
+ --rb-reg-option-bg: transparent;
48054
+ --rb-reg-option-hover-shadow: 0 8px 18px rgba(var(--tb-shadow, 15 23 42), 0.08);
48055
+ --rb-reg-surface-bg: rgb(var(--tb-surface));
48056
+ --rb-reg-on-surface: rgb(var(--tb-onSurface, var(--tb-text)));
48057
+ --rb-reg-on-surface-muted: rgba(var(--tb-onSurface, var(--tb-text)), 0.7);
48058
+ --rb-reg-on-surface-subtle: rgba(var(--tb-onSurface, var(--tb-text)), 0.6);
48059
+ --rb-reg-on-surface-faint: rgba(var(--tb-onSurface, var(--tb-text)), 0.5);
48060
+ --rb-reg-check-bg: var(--ab-check-bg);
48061
+ --rb-reg-check-text: var(--ab-check-text);
48062
+ --rb-reg-step-active: rgb(var(--tb-primary));
48063
+ --rb-reg-step-completed: rgb(var(--tb-success));
48064
+ --rb-reg-step-inactive: rgb(var(--tb-mutedText));
48065
+ --rb-reg-step-text: rgb(255 255 255);
48066
+ --rb-reg-step-text-active: rgb(var(--tb-primaryText, 255 255 255));
48067
+ --rb-reg-step-connector: rgba(var(--tb-border), 0.5);
48068
+ --rb-reg-summary-bg: var(--ab-muted-bg);
48069
+ --rb-reg-summary-border: var(--ab-card-border);
48070
+ --rb-reg-focus-ring: var(--ab-input-focus-ring);
48071
+ --rb-reg-shell-line: rgba(var(--tb-mutedText, 100 116 139), 0.22);
47974
48072
  }
47975
48073
  `;
47976
48074
  }
@@ -48261,6 +48359,35 @@ ${root} {
48261
48359
  /* Summary */
48262
48360
  --cr-summary-bg: rgba(var(--tb-primary), 0.1);
48263
48361
  --cr-summary-border: rgb(var(--tb-border));
48362
+
48363
+ /* Shared registration-surface mappings (issue 1174).
48364
+ Route the shared --rb-reg-* contract through this block's Tier 3 vars
48365
+ (palette tokens where no --cr-* var exists) so existing --cr-* overrides
48366
+ keep working unchanged. */
48367
+ --rb-reg-radius: var(--rb-block-radius);
48368
+ --rb-reg-border: var(--cr-border);
48369
+ --rb-reg-border-hover: var(--cr-border-hover);
48370
+ --rb-reg-border-selected: var(--cr-border-selected);
48371
+ --rb-reg-bg-selected: var(--cr-payment-bg-selected);
48372
+ --rb-reg-option-bg: rgb(var(--tb-background));
48373
+ --rb-reg-option-hover-shadow: 0 8px 18px rgba(var(--tb-shadow, 15 23 42), 0.08);
48374
+ --rb-reg-surface-bg: rgb(var(--tb-surface));
48375
+ --rb-reg-on-surface: var(--cr-on-surface);
48376
+ --rb-reg-on-surface-muted: rgba(var(--tb-onSurface, var(--tb-text)), 0.7);
48377
+ --rb-reg-on-surface-subtle: rgba(var(--tb-onSurface, var(--tb-text)), 0.6);
48378
+ --rb-reg-on-surface-faint: rgba(var(--tb-onSurface, var(--tb-text)), 0.5);
48379
+ --rb-reg-check-bg: var(--cr-check-bg);
48380
+ --rb-reg-check-text: var(--cr-check-text);
48381
+ --rb-reg-step-active: var(--cr-step-active);
48382
+ --rb-reg-step-completed: var(--cr-step-completed);
48383
+ --rb-reg-step-inactive: var(--cr-step-inactive);
48384
+ --rb-reg-step-text: var(--cr-step-text);
48385
+ --rb-reg-step-text-active: var(--cr-step-text-active);
48386
+ --rb-reg-step-connector: var(--cr-step-connector);
48387
+ --rb-reg-summary-bg: var(--cr-summary-bg);
48388
+ --rb-reg-summary-border: var(--cr-summary-border);
48389
+ --rb-reg-focus-ring: var(--cr-focus-ring);
48390
+ --rb-reg-shell-line: rgba(var(--tb-mutedText, 100 116 139), 0.22);
48264
48391
  }
48265
48392
  `;
48266
48393
  }
@@ -49540,6 +49667,8 @@ var MemoBlockSection = React6.memo(
49540
49667
  occurrenceContext: dataContext?.occurrenceContext ?? null,
49541
49668
  entrySubrouteContext: dataContext?.entrySubrouteContext ?? null,
49542
49669
  contentEntry: dataContext?.contentEntry ?? null,
49670
+ pageSurface: dataContext?.pageSurface ?? null,
49671
+ subject: dataContext?.subject ?? null,
49543
49672
  supabaseUrl: dataContext?.supabaseUrl,
49544
49673
  imageResolveContext: resolvedImageResolveContext,
49545
49674
  blockId: block.id ?? null,
@@ -49668,6 +49797,8 @@ var MemoBlockSection = React6.memo(
49668
49797
  occurrenceContext: dataContext?.occurrenceContext ?? null,
49669
49798
  entrySubrouteContext: dataContext?.entrySubrouteContext ?? null,
49670
49799
  contentEntry: dataContext?.contentEntry ?? null,
49800
+ pageSurface: dataContext?.pageSurface ?? null,
49801
+ subject: dataContext?.subject ?? null,
49671
49802
  supabaseUrl: dataContext?.supabaseUrl,
49672
49803
  imageResolveContext: resolvedImageResolveContext,
49673
49804
  blockId: block.id ?? null,
@@ -49695,7 +49826,9 @@ var MemoBlockSection = React6.memo(
49695
49826
  // Occurrence and content entry context for template pages
49696
49827
  occurrenceContext: dataContext?.occurrenceContext ?? null,
49697
49828
  entrySubrouteContext: dataContext?.entrySubrouteContext ?? null,
49698
- contentEntry: dataContext?.contentEntry ?? null
49829
+ contentEntry: dataContext?.contentEntry ?? null,
49830
+ pageSurface: dataContext?.pageSurface ?? null,
49831
+ subject: dataContext?.subject ?? null
49699
49832
  }
49700
49833
  };
49701
49834
  const blockBindings = block.bindings;
@@ -53040,13 +53173,36 @@ var containerResponsiveThemeCss = `/*
53040
53173
  */
53041
53174
 
53042
53175
  /* =============================================================================
53043
- * Shared: Registration Terminal State Icons
53044
- * Used by event-registration and course-registration blocks.
53176
+ * Shared: Registration Surface (issue 1174)
53045
53177
  *
53046
- * Layout rules only \u2014 block-specific colors are defined in each block's CSS
53047
- * via scoped \`.rb-state-icon--{variant}\` rules.
53178
+ * Wizard-surface primitives shared by the event-registration,
53179
+ * course-registration and appointment-booking blocks: surface container,
53180
+ * selectable option cards, step indicator, wizard actions row, on-surface
53181
+ * text ramp, layout stacks, summary box and skeleton shell lines.
53182
+ *
53183
+ * Uses:
53184
+ * - Tier 1 vars: --tb-* (from theme palette) as inline fallbacks
53185
+ * - Tier 2 vars: --rb-block-radius, --rb-block-transition (from theme scope)
53186
+ * - Shared vars: --rb-reg-* (mapped per block by the Tier 3 var generators;
53187
+ * canonical name list in blocks/registrationSurfaceVars.ts)
53188
+ *
53189
+ * Defaults intentionally match the event-registration (issue 1089) values; blocks
53190
+ * that need to preserve a different look override in their own block CSS,
53191
+ * which is imported after this file (cascade order is the override contract \u2014
53192
+ * all selectors here are zero-specificity \`:where()\`).
53193
+ *
53194
+ * Layout-only \`.rb-state-icon\` rules (formerly registration-shared.css) live
53195
+ * here too; block CSS provides the \`.rb-state-icon--{variant}\` colors.
53196
+ *
53197
+ * Naming: component-like primitives follow the existing bare \`rb-\` shared
53198
+ * precedent (\`.rb-state-icon\`, \`.rb-tile\`): \`.rb-option-card\`, \`.rb-step-*\`,
53199
+ * \`.rb-wizard-actions\`, \`.rb-on-surface\`, \`.rb-shell-*\`. Container/layout
53200
+ * pieces that would otherwise collide with the global \`.rb-*\` utility layer
53201
+ * are namespaced \`rb-reg-*\` (\`.rb-reg-surface\`, \`.rb-reg-stack\`, ...). All of
53202
+ * them are scoped to the three registration blocks either way.
53048
53203
  * ============================================================================= */
53049
53204
 
53205
+ /* Terminal state icon (layout only \u2014 colors are per-block) */
53050
53206
  :where(.theme-scope) .rb-state-icon {
53051
53207
  width: 4rem;
53052
53208
  height: 4rem;
@@ -53062,112 +53218,346 @@ var containerResponsiveThemeCss = `/*
53062
53218
  height: 2rem;
53063
53219
  }
53064
53220
 
53065
- /* =============================================================================
53066
- * Block: Event Registration (pilot #76)
53067
- * Uses CSS vars: --er-* (Tier 3) and --rb-block-* (Tier 2)
53068
- * =============================================================================
53069
- */
53070
-
53071
- :where(.theme-scope) :where([data-block="event-registration"]) {
53072
- --rb-modal-overlay-bg: rgb(var(--tb-text, 0 0 0) / 0.6);
53073
- --rb-event-tile-bg: var(--er-event-card-bg);
53074
- --rb-event-tile-border: var(--er-border);
53075
- --rb-event-tile-border-width: var(--er-event-card-border-width);
53076
- --rb-event-tile-border-hover: var(--er-border-hover);
53077
- --rb-event-tile-border-selected: var(--er-border-selected);
53078
- --rb-event-tile-hover-opacity: var(--er-event-card-hover-opacity);
53079
- --rb-event-tile-bg-selected: rgba(var(--tb-primary), 0.1);
53080
- --er-on-surface: rgb(var(--tb-onSurface, var(--tb-text)));
53081
- --er-on-surface-muted: rgba(var(--tb-onSurface, var(--tb-text)), 0.7);
53082
- --er-on-surface-subtle: rgba(var(--tb-onSurface, var(--tb-text)), 0.6);
53083
- --er-on-surface-faint: rgba(var(--tb-onSurface, var(--tb-text)), 0.5);
53084
- --er-on-surface-disabled: rgba(var(--tb-onSurface, var(--tb-text)), 0.78);
53085
- --er-on-surface-disabled-detail: rgba(var(--tb-onSurface, var(--tb-text)), 0.68);
53086
- }
53087
-
53088
- /* Container */
53089
- :where(.theme-scope) :where([data-block="event-registration"]) .er-container {
53090
- border-radius: var(--rb-block-radius);
53091
- border: 1px solid var(--er-border);
53221
+ /* Surface container */
53222
+ :where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-reg-surface {
53223
+ border-radius: var(--rb-reg-radius, var(--rb-block-radius, 1rem));
53224
+ border: 1px solid var(--rb-reg-border, rgb(var(--tb-border, 226 232 240)));
53092
53225
  padding: clamp(1rem, 2vw, 1.5rem);
53093
- background: rgb(var(--tb-surface));
53094
- color: var(--er-on-surface);
53095
- transition: border-color var(--rb-block-transition) ease;
53226
+ background: var(--rb-reg-surface-bg, rgb(var(--tb-surface, 248 250 252)));
53227
+ color: var(--rb-reg-on-surface, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42))));
53228
+ transition: border-color var(--rb-block-transition, 150ms) ease;
53096
53229
  width: 100%;
53097
53230
  max-width: 800px;
53098
53231
  margin-inline: 0;
53099
53232
  }
53100
53233
 
53101
- /* SSR shell / required-island fallback */
53102
- :where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell {
53103
- min-height: 24rem;
53234
+ /* Selectable option card */
53235
+ :where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-option-card {
53236
+ position: relative;
53237
+ display: flex;
53238
+ align-items: flex-start;
53239
+ gap: 0.75rem;
53240
+ padding: 1rem;
53241
+ border: 1px solid var(--rb-reg-border, rgb(var(--tb-border, 226 232 240)));
53242
+ border-radius: var(--rb-reg-radius, var(--rb-block-radius, 1rem));
53243
+ background: var(--rb-reg-option-bg, transparent);
53244
+ color: inherit;
53245
+ cursor: pointer;
53246
+ text-align: left;
53247
+ transition: border-color var(--rb-block-transition, 150ms) ease,
53248
+ background-color var(--rb-block-transition, 150ms) ease,
53249
+ box-shadow var(--rb-block-transition, 150ms) ease;
53104
53250
  }
53105
53251
 
53106
- :where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__steps {
53107
- margin-bottom: 1.25rem;
53252
+ :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"]) {
53253
+ border-color: var(--rb-reg-border-hover, rgba(var(--tb-primary, 17 24 39), 0.5));
53254
+ box-shadow: var(--rb-reg-option-hover-shadow, 0 8px 18px rgba(var(--tb-shadow, 15 23 42), 0.08));
53108
53255
  }
53109
53256
 
53110
- :where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__eyebrow {
53111
- margin: 0 0 0.35rem;
53112
- color: var(--er-on-surface-subtle);
53113
- font-size: 0.75rem;
53114
- font-weight: 700;
53115
- letter-spacing: 0.04em;
53116
- line-height: 1.2;
53117
- text-transform: uppercase;
53257
+ :where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-option-card:focus-visible {
53258
+ outline: 2px solid var(--rb-reg-focus-ring, rgba(var(--tb-primary, 17 24 39), 0.3));
53259
+ outline-offset: 2px;
53118
53260
  }
53119
53261
 
53120
- :where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__title {
53262
+ :where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-option-card--selected {
53263
+ border-color: var(--rb-reg-border-selected, rgb(var(--tb-primary, 17 24 39)));
53264
+ background-color: var(--rb-reg-bg-selected, rgba(var(--tb-primary, 17 24 39), 0.08));
53265
+ box-shadow: 0 0 0 1px var(--rb-reg-border-selected, rgb(var(--tb-primary, 17 24 39)));
53266
+ }
53267
+
53268
+ :where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-option-card--disabled {
53269
+ cursor: not-allowed;
53270
+ opacity: 0.7;
53271
+ }
53272
+
53273
+ :where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-option-card--disabled:hover {
53274
+ border-color: var(--rb-reg-border, rgb(var(--tb-border, 226 232 240)));
53275
+ box-shadow: none;
53276
+ }
53277
+
53278
+ /* Check indicator */
53279
+ :where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-option-check {
53280
+ flex-shrink: 0;
53281
+ width: 1.25rem;
53282
+ height: 1.25rem;
53283
+ border-radius: 50%;
53284
+ background: var(--rb-reg-check-bg, rgb(var(--tb-primary, 17 24 39)));
53285
+ display: flex;
53286
+ align-items: center;
53287
+ justify-content: center;
53288
+ }
53289
+
53290
+ :where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-option-check svg {
53291
+ width: 0.75rem;
53292
+ height: 0.75rem;
53293
+ color: var(--rb-reg-check-text, rgb(var(--tb-primaryText, var(--tb-primaryForeground, 255 255 255))));
53294
+ }
53295
+
53296
+ /* Step indicator */
53297
+ :where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-steps-nav {
53298
+ margin-bottom: 1.5rem;
53299
+ }
53300
+
53301
+ :where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-steps {
53302
+ display: flex;
53303
+ align-items: center;
53304
+ justify-content: center;
53305
+ gap: 0.5rem;
53306
+ list-style: none;
53307
+ padding: 0;
53121
53308
  margin: 0;
53122
53309
  }
53123
53310
 
53124
- :where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__copy {
53125
- margin: 0.35rem 0 0;
53126
- max-width: 36rem;
53127
- line-height: 1.45;
53311
+ :where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-step {
53312
+ display: flex;
53313
+ align-items: center;
53314
+ gap: 0.5rem;
53128
53315
  }
53129
53316
 
53130
- :where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__cards {
53131
- margin-top: 0.25rem;
53132
- overflow: hidden;
53133
- border: 1px solid var(--er-border);
53134
- border-radius: var(--rb-block-radius);
53135
- background: var(--er-control-bg);
53317
+ :where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-step-circle {
53318
+ width: 1.75rem;
53319
+ height: 1.75rem;
53320
+ border-radius: 50%;
53321
+ display: flex;
53322
+ align-items: center;
53323
+ justify-content: center;
53324
+ font-size: 0.75rem;
53325
+ font-weight: 600;
53326
+ background: var(--rb-reg-step-inactive, rgb(var(--tb-mutedText, 100 116 139)));
53327
+ color: var(--rb-reg-step-text, rgb(var(--tb-primaryForeground, 255 255 255)));
53328
+ transition: background-color var(--rb-block-transition, 150ms) ease;
53136
53329
  }
53137
53330
 
53138
- :where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__card {
53331
+ :where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-step-circle--active {
53332
+ background: var(--rb-reg-step-active, rgb(var(--tb-primary, 17 24 39)));
53333
+ color: var(--rb-reg-step-text-active, rgb(var(--tb-primaryText, var(--tb-primaryForeground, 255 255 255))));
53334
+ }
53335
+
53336
+ :where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-step-circle--completed {
53337
+ background: var(--rb-reg-step-completed, rgb(var(--tb-success, 22 163 74)));
53338
+ color: var(--rb-reg-step-text-active, rgb(var(--tb-primaryText, var(--tb-primaryForeground, 255 255 255))));
53339
+ }
53340
+
53341
+ :where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-step-check {
53342
+ width: 0.75rem;
53343
+ height: 0.75rem;
53344
+ }
53345
+
53346
+ :where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-step-connector {
53347
+ width: 2rem;
53348
+ height: 2px;
53349
+ background: var(--rb-reg-step-connector, rgba(var(--tb-border, 226 232 240), 0.5));
53350
+ }
53351
+
53352
+ :where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-step-label {
53353
+ font-size: 0.75rem;
53354
+ color: var(--rb-reg-on-surface, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42))));
53355
+ display: none;
53356
+ }
53357
+
53358
+ :where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-step-label--active {
53359
+ font-weight: 500;
53360
+ }
53361
+
53362
+ @container rb-site (min-width: 640px) {
53363
+ @scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
53364
+ :where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-step-label {
53365
+ display: inline;
53366
+ }
53367
+ }
53368
+ }
53369
+
53370
+ /* Wizard actions row */
53371
+ :where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-wizard-actions {
53372
+ display: flex;
53373
+ justify-content: space-between;
53374
+ align-items: center;
53375
+ gap: 1rem;
53376
+ margin-top: 1.5rem;
53377
+ }
53378
+
53379
+ /* When there's only one action (no back button), push it to the right */
53380
+ :where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-wizard-actions > :only-child {
53381
+ margin-inline-start: auto;
53382
+ }
53383
+
53384
+ /* On-surface text ramp */
53385
+ :where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-on-surface {
53386
+ color: var(--rb-reg-on-surface, rgb(var(--tb-onSurface, var(--tb-text, 15 23 42))));
53387
+ }
53388
+
53389
+ :where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-on-surface--muted {
53390
+ color: var(--rb-reg-on-surface-muted, rgba(var(--tb-onSurface, var(--tb-text, 15 23 42)), 0.7));
53391
+ }
53392
+
53393
+ :where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-on-surface--subtle {
53394
+ color: var(--rb-reg-on-surface-subtle, rgba(var(--tb-onSurface, var(--tb-text, 15 23 42)), 0.6));
53395
+ }
53396
+
53397
+ :where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-on-surface--faint {
53398
+ color: var(--rb-reg-on-surface-faint, rgba(var(--tb-onSurface, var(--tb-text, 15 23 42)), 0.5));
53399
+ }
53400
+
53401
+ /* Layout stacks */
53402
+ :where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-reg-stack {
53403
+ display: flex;
53404
+ flex-direction: column;
53405
+ gap: 1rem;
53406
+ }
53407
+
53408
+ :where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-reg-stack--sm {
53409
+ gap: 0.75rem;
53410
+ }
53411
+
53412
+ :where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-reg-row {
53413
+ display: flex;
53414
+ align-items: center;
53415
+ gap: 1rem;
53416
+ }
53417
+
53418
+ :where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-reg-row--between {
53419
+ justify-content: space-between;
53420
+ align-items: flex-start;
53421
+ }
53422
+
53423
+ :where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-reg-grid {
53139
53424
  display: grid;
53140
- gap: 0.5rem;
53425
+ gap: 0.75rem;
53426
+ }
53427
+
53428
+ /* Summary box */
53429
+ :where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-reg-summary {
53141
53430
  padding: 1rem;
53431
+ border-radius: calc(var(--rb-reg-radius, var(--rb-block-radius, 1rem)) * 0.75);
53432
+ border: 1px solid var(--rb-reg-summary-border, rgb(var(--tb-border, 226 232 240)));
53433
+ background: var(--rb-reg-summary-bg, rgba(var(--tb-muted, 241 245 249), 0.42));
53142
53434
  }
53143
53435
 
53144
- :where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__line {
53436
+ /* Skeleton shell lines */
53437
+ :where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-shell-line {
53145
53438
  height: 0.75rem;
53146
53439
  border-radius: 9999px;
53147
53440
  background: linear-gradient(
53148
53441
  90deg,
53149
- var(--er-shell-line),
53150
- rgba(var(--tb-primary), 0.12),
53151
- var(--er-shell-line)
53442
+ var(--rb-reg-shell-line, rgba(var(--tb-mutedText, 100 116 139), 0.22)),
53443
+ rgba(var(--tb-primary, 17 24 39), 0.12),
53444
+ var(--rb-reg-shell-line, rgba(var(--tb-mutedText, 100 116 139), 0.22))
53152
53445
  );
53153
53446
  }
53154
53447
 
53155
- :where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__line--lg {
53448
+ :where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-shell-line--lg {
53156
53449
  width: min(26rem, 82%);
53157
53450
  }
53158
53451
 
53159
- :where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__line--md {
53452
+ :where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-shell-line--md {
53160
53453
  width: min(19rem, 68%);
53161
53454
  }
53162
53455
 
53163
- :where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__line--sm {
53456
+ :where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-shell-line--sm {
53164
53457
  width: min(14rem, 52%);
53165
53458
  }
53166
53459
 
53167
- :where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__line--xs {
53460
+ :where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-shell-line--xs {
53168
53461
  width: min(10rem, 42%);
53169
53462
  }
53170
53463
 
53464
+ /* Skeleton block (rectangular placeholder, pulses) */
53465
+ :where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-shell-block {
53466
+ height: 2.5rem;
53467
+ width: 100%;
53468
+ border-radius: var(--rb-reg-radius, var(--rb-block-radius, 1rem));
53469
+ background: var(--rb-reg-shell-line, rgba(var(--tb-mutedText, 100 116 139), 0.22));
53470
+ animation: rb-reg-pulse 1.5s ease-in-out infinite;
53471
+ }
53472
+
53473
+ @keyframes rb-reg-pulse {
53474
+ 0%, 100% {
53475
+ opacity: 1;
53476
+ }
53477
+ 50% {
53478
+ opacity: 0.5;
53479
+ }
53480
+ }
53481
+
53482
+ @media (prefers-reduced-motion: reduce) {
53483
+ :where(.theme-scope) :where([data-block="event-registration"], [data-block="course-registration"], [data-block="appointment-booking"]) .rb-shell-block {
53484
+ animation: none;
53485
+ }
53486
+ }
53487
+
53488
+ /* =============================================================================
53489
+ * Block: Event Registration (pilot #76)
53490
+ * Uses CSS vars: --er-* (Tier 3) and --rb-block-* (Tier 2)
53491
+ * =============================================================================
53492
+ */
53493
+
53494
+ :where(.theme-scope) :where([data-block="event-registration"]) {
53495
+ --rb-modal-overlay-bg: rgb(var(--tb-text, 0 0 0) / 0.6);
53496
+ --rb-event-tile-bg: var(--er-event-card-bg);
53497
+ --rb-event-tile-border: var(--er-border);
53498
+ --rb-event-tile-border-width: var(--er-event-card-border-width);
53499
+ --rb-event-tile-border-hover: var(--er-border-hover);
53500
+ --rb-event-tile-border-selected: var(--er-border-selected);
53501
+ --rb-event-tile-hover-opacity: var(--er-event-card-hover-opacity);
53502
+ --rb-event-tile-bg-selected: rgba(var(--tb-primary), 0.1);
53503
+ --er-on-surface: rgb(var(--tb-onSurface, var(--tb-text)));
53504
+ --er-on-surface-muted: rgba(var(--tb-onSurface, var(--tb-text)), 0.7);
53505
+ --er-on-surface-subtle: rgba(var(--tb-onSurface, var(--tb-text)), 0.6);
53506
+ --er-on-surface-faint: rgba(var(--tb-onSurface, var(--tb-text)), 0.5);
53507
+ --er-on-surface-disabled: rgba(var(--tb-onSurface, var(--tb-text)), 0.78);
53508
+ --er-on-surface-disabled-detail: rgba(var(--tb-onSurface, var(--tb-text)), 0.68);
53509
+ }
53510
+
53511
+ /* Container: styled by the shared .rb-reg-surface (registration-surface.css);
53512
+ .er-container remains in markup as a hook and for the overlay/embedded
53513
+ variants below. */
53514
+
53515
+ /* SSR shell / required-island fallback */
53516
+ :where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell {
53517
+ min-height: 24rem;
53518
+ }
53519
+
53520
+ :where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__steps {
53521
+ margin-bottom: 1.25rem;
53522
+ }
53523
+
53524
+ :where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__eyebrow {
53525
+ margin: 0 0 0.35rem;
53526
+ color: var(--er-on-surface-subtle);
53527
+ font-size: 0.75rem;
53528
+ font-weight: 700;
53529
+ letter-spacing: 0.04em;
53530
+ line-height: 1.2;
53531
+ text-transform: uppercase;
53532
+ }
53533
+
53534
+ :where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__title {
53535
+ margin: 0;
53536
+ }
53537
+
53538
+ :where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__copy {
53539
+ margin: 0.35rem 0 0;
53540
+ max-width: 36rem;
53541
+ line-height: 1.45;
53542
+ }
53543
+
53544
+ :where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__cards {
53545
+ margin-top: 0.25rem;
53546
+ overflow: hidden;
53547
+ border: 1px solid var(--er-border);
53548
+ border-radius: var(--rb-block-radius);
53549
+ background: var(--er-control-bg);
53550
+ }
53551
+
53552
+ :where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__card {
53553
+ display: grid;
53554
+ gap: 0.5rem;
53555
+ padding: 1rem;
53556
+ }
53557
+
53558
+ /* Shell skeleton lines: styled by the shared .rb-shell-line family
53559
+ (registration-surface.css); legacy classes remain in markup as hooks. */
53560
+
53171
53561
  :where(.theme-scope) :where([data-block="event-registration"]) .er-registration-shell__summary {
53172
53562
  align-items: center;
53173
53563
  border-radius: calc(var(--rb-block-radius) * 0.75);
@@ -53243,13 +53633,8 @@ var containerResponsiveThemeCss = `/*
53243
53633
  color: var(--er-capacity-soldout-text);
53244
53634
  }
53245
53635
 
53246
- /* Selected event summary */
53247
- :where(.theme-scope) :where([data-block="event-registration"]) .er-event-summary {
53248
- padding: 1rem;
53249
- border-radius: calc(var(--rb-block-radius) * 0.75);
53250
- border: 1px solid var(--er-border);
53251
- background: var(--er-surface-muted);
53252
- }
53636
+ /* Selected event summary: superseded by the shared .rb-reg-summary
53637
+ (registration-surface.css); no markup emitted .er-event-summary anymore. */
53253
53638
 
53254
53639
  /* Ticket counter */
53255
53640
  :where(.theme-scope) :where([data-block="event-registration"]) .er-ticket-counter-group {
@@ -53455,7 +53840,7 @@ var containerResponsiveThemeCss = `/*
53455
53840
  opacity: 1;
53456
53841
  }
53457
53842
 
53458
- /* State icon color variants (layout from registration-shared.css) */
53843
+ /* State icon color variants (layout from registration-surface.css) */
53459
53844
  :where(.theme-scope) :where([data-block="event-registration"]) .rb-state-icon--success {
53460
53845
  background: var(--er-success-bg);
53461
53846
  color: var(--er-success-text);
@@ -53611,16 +53996,8 @@ var containerResponsiveThemeCss = `/*
53611
53996
  text-align: center;
53612
53997
  }
53613
53998
 
53614
- /* Layout */
53615
- :where(.theme-scope) :where([data-block="event-registration"]) .er-stack {
53616
- display: flex;
53617
- flex-direction: column;
53618
- gap: 1rem;
53619
- }
53620
-
53621
- :where(.theme-scope) :where([data-block="event-registration"]) .er-stack--sm {
53622
- gap: 0.75rem;
53623
- }
53999
+ /* Layout stacks/rows: styled by the shared .rb-reg-stack / .rb-reg-row
54000
+ (registration-surface.css); legacy classes remain in markup as hooks. */
53624
54001
 
53625
54002
  /* Event/date selection rows */
53626
54003
  :where(.theme-scope) :where([data-block="event-registration"]) .er-event-grid {
@@ -53629,17 +54006,6 @@ var containerResponsiveThemeCss = `/*
53629
54006
  gap: 0;
53630
54007
  }
53631
54008
 
53632
- :where(.theme-scope) :where([data-block="event-registration"]) .er-row {
53633
- display: flex;
53634
- align-items: center;
53635
- gap: 1rem;
53636
- }
53637
-
53638
- :where(.theme-scope) :where([data-block="event-registration"]) .er-row--between {
53639
- justify-content: space-between;
53640
- align-items: flex-start;
53641
- }
53642
-
53643
54009
  :where(.theme-scope) :where([data-block="event-registration"]) .er-center {
53644
54010
  text-align: center;
53645
54011
  padding: 2rem;
@@ -53651,18 +54017,8 @@ var containerResponsiveThemeCss = `/*
53651
54017
  margin-bottom: 1rem;
53652
54018
  }
53653
54019
 
53654
- :where(.theme-scope) :where([data-block="event-registration"]) .er-actions {
53655
- display: flex;
53656
- justify-content: space-between;
53657
- align-items: center;
53658
- gap: 1rem;
53659
- margin-top: 1.5rem;
53660
- }
53661
-
53662
- /* When there's only one button (no back), push to the right */
53663
- :where(.theme-scope) :where([data-block="event-registration"]) .er-actions > :only-child {
53664
- margin-inline-start: auto;
53665
- }
54020
+ /* Actions row: styled by the shared .rb-wizard-actions (registration-surface.css);
54021
+ .er-actions remains in markup as a hook. */
53666
54022
 
53667
54023
  :where(.theme-scope) :where([data-block="event-registration"]) .er-button-with-spinner {
53668
54024
  display: inline-flex;
@@ -53914,23 +54270,8 @@ var containerResponsiveThemeCss = `/*
53914
54270
  color: var(--er-on-surface-faint);
53915
54271
  }
53916
54272
 
53917
- /* Checkmark indicator */
53918
- :where(.theme-scope) :where([data-block="event-registration"]) .er-check {
53919
- flex-shrink: 0;
53920
- width: 1.25rem;
53921
- height: 1.25rem;
53922
- border-radius: 50%;
53923
- background: var(--er-check-bg);
53924
- display: flex;
53925
- align-items: center;
53926
- justify-content: center;
53927
- }
53928
-
53929
- :where(.theme-scope) :where([data-block="event-registration"]) .er-check svg {
53930
- width: 0.75rem;
53931
- height: 0.75rem;
53932
- color: var(--er-check-text);
53933
- }
54273
+ /* Checkmark indicator: styled by the shared .rb-option-check
54274
+ (registration-surface.css); .er-check remains in markup as a hook. */
53934
54275
 
53935
54276
  /* Payment summary */
53936
54277
  :where(.theme-scope) :where([data-block="event-registration"]) .er-payment-summary {
@@ -53978,78 +54319,12 @@ var containerResponsiveThemeCss = `/*
53978
54319
  margin-bottom: 1.5rem;
53979
54320
  }
53980
54321
 
53981
- :where(.theme-scope) :where([data-block="event-registration"]) .er-steps {
53982
- display: flex;
53983
- align-items: center;
53984
- justify-content: center;
53985
- gap: 0.5rem;
53986
- list-style: none;
53987
- padding: 0;
53988
- margin: 0;
53989
- }
53990
-
53991
- :where(.theme-scope) :where([data-block="event-registration"]) .er-step {
53992
- display: flex;
53993
- align-items: center;
53994
- gap: 0.5rem;
53995
- }
53996
-
53997
- :where(.theme-scope) :where([data-block="event-registration"]) .er-step-circle {
53998
- width: 1.75rem;
53999
- height: 1.75rem;
54000
- border-radius: 50%;
54001
- display: flex;
54002
- align-items: center;
54003
- justify-content: center;
54004
- font-size: 0.75rem;
54005
- font-weight: 600;
54006
- background: var(--er-step-inactive);
54007
- color: var(--er-step-text);
54008
- transition: background-color var(--rb-block-transition) ease;
54009
- }
54010
-
54011
- :where(.theme-scope) :where([data-block="event-registration"]) .er-step-circle--active {
54012
- background: var(--er-step-active);
54013
- color: var(--er-step-text-active);
54014
- }
54015
-
54016
- :where(.theme-scope) :where([data-block="event-registration"]) .er-step-circle--completed {
54017
- background: var(--er-step-completed);
54018
- color: var(--er-step-text-active);
54019
- }
54020
-
54021
- :where(.theme-scope) :where([data-block="event-registration"]) .er-step-check {
54022
- width: 0.75rem;
54023
- height: 0.75rem;
54024
- }
54025
-
54026
- :where(.theme-scope) :where([data-block="event-registration"]) .er-step-connector {
54027
- width: 2rem;
54028
- height: 2px;
54029
- background: var(--er-step-connector);
54030
- }
54031
-
54032
- :where(.theme-scope) :where([data-block="event-registration"]) .er-step-connector--completed {
54033
- background: var(--er-step-connector);
54034
- }
54035
-
54036
- :where(.theme-scope) :where([data-block="event-registration"]) .er-step-label {
54037
- font-size: 0.75rem;
54038
- color: var(--er-on-surface);
54039
- display: none;
54040
- }
54041
-
54042
- :where(.theme-scope) :where([data-block="event-registration"]) .er-step-label--active {
54043
- font-weight: 500;
54044
- }
54045
-
54046
- @container rb-site (min-width: 640px) {
54047
- @scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
54048
- :where(.theme-scope) :where([data-block="event-registration"]) .er-step-label {
54049
- display: inline;
54050
- }
54051
- }
54052
- }
54322
+ /* Step indicator internals: styled by the shared .rb-steps / .rb-step-*
54323
+ family (registration-surface.css) via the --rb-reg-step-* mappings in the
54324
+ event-registration var generator; er-* classes remain in markup as hooks.
54325
+ Note: .er-steps-nav above is intentionally retained \u2014 its source position
54326
+ keeps the wizard's 1.5rem step margin winning over the SSR shell's
54327
+ 1.25rem .er-registration-shell__steps override. */
54053
54328
 
54054
54329
  /* Sticky order summary */
54055
54330
  :where(.theme-scope) :where([data-block="event-registration"]) .er-summary {
@@ -56282,295 +56557,420 @@ var containerResponsiveThemeCss = `/*
56282
56557
 
56283
56558
  /* =============================================================================
56284
56559
  * Block: Appointment Booking
56560
+ *
56561
+ * Structural styling comes from the shared registration-surface layer
56562
+ * (registration-surface.css): surface container, option cards + check,
56563
+ * step indicator, wizard actions, on-surface text ramp, stacks, summary box
56564
+ * and skeleton shell. Colors flow through the --rb-reg-* contract, mapped
56565
+ * from this block's --ab-* Tier 3 vars by its var generator.
56566
+ *
56567
+ * Inputs use the theme-generated form-* classes; feedback boxes use the
56568
+ * theme-generated alert / alert-{tone} classes. Only genuinely
56569
+ * booking-specific rules live here.
56570
+ *
56285
56571
  * Uses:
56286
- * - Tier 1 vars: --tb-border, --tb-text, --tb-primary (from theme palette)
56287
- * - Tier 2 vars: --rb-block-radius, --rb-block-transition (from theme scope)
56572
+ * - Tier 1 vars: --tb-* (from theme palette)
56288
56573
  * - Tier 3 vars: --ab-* (from appointment-booking var generator)
56289
56574
  * =============================================================================
56290
56575
  */
56291
56576
 
56292
- /* Main container */
56293
- :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-container {
56294
- width: 100%;
56577
+ /* Typography helpers */
56578
+ :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-title {
56579
+ font-size: 1.5rem;
56580
+ font-weight: 600;
56581
+ line-height: 1.3;
56295
56582
  }
56296
56583
 
56297
- /* Stack layout utilities */
56298
- :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-stack {
56299
- display: flex;
56300
- flex-direction: column;
56301
- gap: 1.5rem;
56584
+ :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-subtitle {
56585
+ font-size: 0.9375rem;
56586
+ font-weight: 600;
56587
+ line-height: 1.3;
56302
56588
  }
56303
56589
 
56304
- :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-stack--sm {
56305
- display: flex;
56306
- flex-direction: column;
56307
- gap: 0.75rem;
56590
+ :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-text {
56591
+ font-size: 0.875rem;
56308
56592
  }
56309
56593
 
56310
- :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-stack--xs {
56311
- display: flex;
56312
- flex-direction: column;
56313
- gap: 0.5rem;
56594
+ :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-text--sm {
56595
+ font-size: 0.75rem;
56314
56596
  }
56315
56597
 
56316
- /* Row layout */
56317
- :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-row {
56318
- display: flex;
56319
- align-items: center;
56320
- gap: 0.75rem;
56598
+ /* Centered state (loading / terminal panels) */
56599
+ :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-center {
56600
+ text-align: center;
56601
+ padding: 2rem;
56321
56602
  }
56322
56603
 
56323
- :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-row--between {
56324
- justify-content: space-between;
56604
+ /* Terminal state title (below the state icon) */
56605
+ :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-terminal-title {
56606
+ margin: 0.75rem 0 0.5rem 0;
56607
+ font-size: 1.125rem;
56608
+ font-weight: 700;
56609
+ }
56610
+
56611
+ /* State icon color variants (layout from registration-surface.css) */
56612
+ :where(.theme-scope) :where([data-block="appointment-booking"]) .rb-state-icon--success {
56613
+ background: var(--ab-success-bg, rgba(var(--tb-success, 22 163 74), 0.1));
56614
+ color: var(--ab-success-text, rgb(var(--tb-success, 22 163 74)));
56615
+ }
56616
+
56617
+ :where(.theme-scope) :where([data-block="appointment-booking"]) .rb-state-icon--error {
56618
+ background: var(--ab-error-bg, rgba(var(--tb-destructive, 220 38 38), 0.1));
56619
+ color: var(--ab-error-text, rgb(var(--tb-destructive, 220 38 38)));
56325
56620
  }
56326
56621
 
56327
- /* Grid layout */
56328
- :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-grid {
56622
+ :where(.theme-scope) :where([data-block="appointment-booking"]) .rb-state-icon--info {
56623
+ background: var(--ab-info-bg, rgba(var(--tb-info, 14 165 233), 0.1));
56624
+ color: var(--ab-info-text, rgb(var(--tb-info, 14 165 233)));
56625
+ }
56626
+
56627
+ :where(.theme-scope) :where([data-block="appointment-booking"]) .rb-state-icon--warning {
56628
+ background: var(--ab-warning-bg, rgba(var(--tb-warning, 245 158 11), 0.1));
56629
+ color: var(--ab-warning-text, rgb(var(--tb-warning, 245 158 11)));
56630
+ }
56631
+
56632
+ /* Payment option summary rows (label/value lines inside an option card) */
56633
+ :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-option-rows {
56329
56634
  display: grid;
56330
- gap: 0.75rem;
56635
+ gap: 0.125rem;
56331
56636
  }
56332
56637
 
56333
- /* Center layout */
56334
- :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-center {
56335
- text-align: center;
56336
- padding: 2rem;
56638
+ /* Date/time pill grids (selection pills extend .rb-option-card) */
56639
+ :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-pill-grid {
56640
+ display: flex;
56641
+ flex-wrap: wrap;
56642
+ gap: 0.5rem;
56337
56643
  }
56338
56644
 
56339
- /* Typography */
56340
- :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-title {
56341
- font-size: 1.5rem;
56342
- font-weight: 700;
56645
+ :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-date-pill {
56646
+ flex-direction: column;
56647
+ align-items: center;
56648
+ gap: 0.125rem;
56649
+ padding: 0.5rem 0.875rem;
56650
+ min-width: 4.25rem;
56651
+ text-align: center;
56343
56652
  }
56344
56653
 
56345
- :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-subtitle {
56654
+ :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-time-pill {
56655
+ align-items: center;
56656
+ justify-content: center;
56657
+ padding: 0.5rem 0.875rem;
56658
+ min-width: 5.5rem;
56346
56659
  font-size: 0.875rem;
56347
56660
  font-weight: 500;
56661
+ text-align: center;
56348
56662
  }
56349
56663
 
56350
- :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-text {
56351
- font-size: 0.875rem;
56664
+ :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-pill-caption {
56665
+ font-size: 0.6875rem;
56666
+ font-weight: 600;
56667
+ letter-spacing: 0;
56668
+ line-height: 1.2;
56669
+ text-transform: uppercase;
56670
+ color: var(--rb-reg-on-surface-subtle, rgba(var(--tb-onSurface, var(--tb-text, 15 23 42)), 0.6));
56352
56671
  }
56353
56672
 
56354
- :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-text--sm {
56355
- font-size: 0.75rem;
56673
+ :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-pill-value {
56674
+ font-size: 1.125rem;
56675
+ font-weight: 600;
56676
+ line-height: 1.2;
56356
56677
  }
56357
56678
 
56358
- :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-text--muted {
56359
- opacity: var(--ab-text-muted-opacity, 0.6);
56679
+ /* SSR shell skeleton (mirrors the hydrated layout to reduce hydration jump) */
56680
+ :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-shell {
56681
+ min-height: 18rem;
56360
56682
  }
56361
56683
 
56362
- :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-text--faint {
56363
- opacity: var(--ab-text-faint-opacity, 0.4);
56684
+ :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-shell-button {
56685
+ display: inline-flex;
56686
+ min-height: 2.5rem;
56687
+ align-items: center;
56688
+ justify-content: center;
56689
+ border-radius: calc(var(--rb-reg-radius, var(--rb-block-radius, 1rem)) * 0.6);
56690
+ background: rgb(var(--tb-primary, 17 24 39));
56691
+ color: rgb(var(--tb-primaryText, var(--tb-primaryForeground, 255 255 255)));
56692
+ padding: 0.625rem 1rem;
56693
+ font-size: 0.875rem;
56694
+ font-weight: 600;
56695
+ line-height: 1.2;
56696
+ text-align: center;
56697
+ white-space: nowrap;
56364
56698
  }
56365
56699
 
56366
- /* Selection cards (service, resource, time slot) */
56367
- :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-card {
56368
- position: relative;
56369
- padding: 1rem;
56370
- border: 2px solid var(--ab-card-border, rgb(var(--tb-border, 226 232 240)));
56371
- border-radius: var(--ab-card-radius, var(--rb-block-radius, 1rem));
56372
- text-align: left;
56373
- background: transparent;
56700
+ /* Inline text-link button (e.g. "Load more dates") */
56701
+ :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-link {
56702
+ display: inline;
56703
+ color: rgb(var(--tb-primary, 17 24 39));
56704
+ background: none;
56705
+ border: none;
56706
+ padding: 0;
56707
+ font: inherit;
56708
+ text-decoration: underline;
56374
56709
  cursor: pointer;
56375
- transition: border-color var(--rb-block-transition, 150ms) ease, background-color var(--rb-block-transition, 150ms) ease;
56376
56710
  }
56377
56711
 
56378
- :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-card:hover {
56379
- border-color: var(--ab-card-border-hover, rgba(var(--tb-primary, 17 24 39), 0.5));
56712
+ :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-link:hover {
56713
+ text-decoration: none;
56380
56714
  }
56381
56715
 
56382
- :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-card--selected {
56383
- border-color: var(--ab-card-border-selected, rgb(var(--tb-primary, 17 24 39)));
56384
- background-color: var(--ab-card-bg-selected, rgba(var(--tb-primary, 17 24 39), 0.05));
56716
+ /* Altcha wrapper */
56717
+ :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-altcha {
56718
+ margin-top: 1rem;
56385
56719
  }
56386
56720
 
56387
- /* Checkmark indicator */
56388
- :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-check {
56389
- flex-shrink: 0;
56390
- width: 1.25rem;
56391
- height: 1.25rem;
56392
- border-radius: 50%;
56393
- background-color: var(--ab-check-bg, rgb(var(--tb-primary, 17 24 39)));
56394
- display: flex;
56395
- align-items: center;
56396
- justify-content: center;
56721
+ /* =============================================================================
56722
+ * Shared: Inline Text Marks
56723
+ * =============================================================================
56724
+ */
56725
+
56726
+ :where(.theme-scope) .rb-inline-text-accent,
56727
+ :where(.theme-scope) .rb-inline-text-highlight {
56728
+ font: inherit;
56729
+ letter-spacing: inherit;
56730
+ text-transform: inherit;
56397
56731
  }
56398
56732
 
56399
- :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-check svg {
56400
- width: 0.75rem;
56401
- height: 0.75rem;
56402
- color: var(--ab-check-text, rgb(var(--tb-background, 255 255 255)));
56733
+ :where(.theme-scope) .rb-inline-text-accent-accent {
56734
+ color: rgb(var(--tb-accent));
56403
56735
  }
56404
56736
 
56405
- /* Info box (service summary) */
56406
- :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-info-box {
56407
- padding: 1rem;
56408
- border: 1px solid var(--ab-card-border, rgb(var(--tb-border, 226 232 240)));
56409
- border-radius: var(--ab-card-radius, var(--rb-block-radius, 1rem));
56410
- background-color: var(--ab-muted-bg, rgba(var(--tb-foreground, var(--tb-text, 15 23 42)), 0.05));
56737
+ :where(.theme-scope) .rb-inline-text-accent-brand {
56738
+ color: rgb(var(--tb-primary));
56411
56739
  }
56412
56740
 
56413
- /* Alert states */
56414
- :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-alert {
56415
- padding: 0.75rem 1rem;
56416
- border-radius: var(--ab-card-radius, var(--rb-block-radius, 1rem));
56417
- font-size: 0.875rem;
56741
+ :where(.theme-scope) .rb-inline-text-accent-contrast {
56742
+ color: var(--section-text-color, rgb(var(--tb-text)));
56418
56743
  }
56419
56744
 
56420
- :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-alert--success {
56421
- background-color: var(--ab-success-bg, rgba(var(--tb-success, 22 163 74), 0.1));
56422
- color: var(--ab-success-text, rgb(var(--tb-success, 22 163 74)));
56745
+ :where(.theme-scope) .rb-inline-text-highlight {
56746
+ border-radius: 0.22em;
56747
+ box-decoration-break: clone;
56748
+ -webkit-box-decoration-break: clone;
56749
+ padding: 0.02em 0.12em;
56423
56750
  }
56424
56751
 
56425
- :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-alert--error {
56426
- background-color: var(--ab-error-bg, rgba(var(--tb-destructive, 220 38 38), 0.1));
56427
- color: var(--ab-error-text, rgb(var(--tb-destructive, 220 38 38)));
56752
+ :where(.theme-scope) .rb-inline-text-highlight-soft {
56753
+ background: color-mix(in oklab, var(--section-text-color, rgb(var(--tb-text))) 14%, transparent);
56428
56754
  }
56429
56755
 
56430
- :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-alert--warning {
56431
- background-color: var(--ab-warning-bg, rgba(var(--tb-warning, 245 158 11), 0.1));
56432
- color: var(--ab-warning-text, rgb(var(--tb-warning, 245 158 11)));
56756
+ :where(.theme-scope) .rb-inline-text-highlight-accent {
56757
+ background: color-mix(in oklab, rgb(var(--tb-accent)) 28%, transparent);
56433
56758
  }
56434
56759
 
56435
- :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-alert--info {
56436
- background-color: var(--ab-info-bg, rgba(var(--tb-info, 14 165 233), 0.1));
56437
- color: var(--ab-info-text, rgb(var(--tb-info, 14 165 233)));
56760
+ :where(.theme-scope) .rb-inline-text-highlight-brand {
56761
+ background: color-mix(in oklab, rgb(var(--tb-primary)) 24%, transparent);
56438
56762
  }
56439
56763
 
56440
- /* Form elements */
56441
- :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-label {
56442
- display: block;
56443
- font-size: 0.875rem;
56444
- font-weight: 500;
56445
- margin-bottom: 0.5rem;
56764
+ /* =============================================================================
56765
+ * Block: Hero (Phase 2)
56766
+ * Uses theme palette vars directly (no Tier 3 vars needed)
56767
+ * =============================================================================
56768
+ */
56769
+
56770
+ /* Eyebrow - color only (typography via .rb-eyebrow) */
56771
+ :where(.theme-scope) :where([data-block="hero"]) .hero-eyebrow:not(.rb-eyebrow-treatment-accent) {
56772
+ color: var(--section-text-color, rgb(var(--tb-text)));
56446
56773
  }
56447
56774
 
56448
- :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-required {
56449
- color: var(--ab-error-text, rgb(var(--tb-destructive, 220 38 38)));
56450
- margin-left: 0.125rem;
56775
+ /* Subheadline - supporting text below headline */
56776
+ :where(.theme-scope) :where([data-block="hero"]) .hero-headline {
56777
+ text-wrap: balance;
56451
56778
  }
56452
56779
 
56453
- :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-input,
56454
- :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-select,
56455
- :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-textarea {
56456
- width: 100%;
56457
- padding: 0.5rem 0.75rem;
56458
- border: 1px solid var(--ab-input-border, rgb(var(--tb-border, 226 232 240)));
56459
- border-radius: var(--ab-input-radius, var(--rb-input-radius, var(--radius-control, var(--rb-block-radius, 1rem))));
56460
- background: transparent;
56461
- font-size: 0.875rem;
56462
- transition: border-color var(--rb-block-transition, 150ms) ease, box-shadow var(--rb-block-transition, 150ms) ease;
56780
+ :where(.theme-scope) :where([data-block="hero"]) .hero-subheadline {
56781
+ font-size: 1.125rem;
56782
+ color: var(--section-supporting-color, var(--section-text-color, rgb(var(--tb-text))));
56463
56783
  }
56464
56784
 
56465
- :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-input:focus,
56466
- :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-select:focus,
56467
- :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-textarea:focus {
56468
- outline: none;
56469
- border-color: var(--ab-card-border-selected, rgb(var(--tb-primary, 17 24 39)));
56470
- box-shadow: 0 0 0 3px var(--ab-input-focus-ring, rgba(var(--tb-primary, 17 24 39), 0.3));
56785
+ @container rb-site (min-width: 640px) {
56786
+ @scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
56787
+ :where(.theme-scope) :where([data-block="hero"]) .hero-subheadline {
56788
+ font-size: 1.25rem;
56789
+ }
56790
+ }
56471
56791
  }
56472
56792
 
56473
- /* Buttons */
56474
- :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-btn {
56475
- display: inline-flex;
56476
- align-items: center;
56477
- justify-content: center;
56478
- padding: 0.5rem 1.5rem;
56479
- border-radius: var(--ab-button-radius, var(--rb-button-radius, var(--rb-block-radius, 1rem)));
56480
- font-size: 0.875rem;
56481
- font-weight: 500;
56482
- cursor: pointer;
56483
- transition: background-color var(--rb-block-transition, 150ms) ease, border-color var(--rb-block-transition, 150ms) ease;
56793
+ /* Hero typography scales. These classes are emitted by Theme V2 hero looks. */
56794
+ :where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-quiet .hero-headline {
56795
+ font-size: clamp(2rem, 4vw, 3rem);
56796
+ line-height: 1.12;
56484
56797
  }
56485
56798
 
56486
- :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-btn--primary {
56487
- flex: 1;
56488
- background-color: var(--ab-btn-primary-bg, rgb(var(--tb-primary, 17 24 39)));
56489
- color: var(--ab-btn-primary-text, rgb(var(--tb-primaryForeground, 255 255 255)));
56490
- border: none;
56799
+ :where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-quiet .hero-subheadline {
56800
+ font-size: clamp(1rem, 1.2vw, 1.25rem);
56801
+ line-height: 1.55;
56491
56802
  }
56492
56803
 
56493
- :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-btn--primary:hover:not(:disabled) {
56494
- background-color: var(--ab-btn-primary-hover, rgba(var(--tb-primary, 17 24 39), 0.9));
56804
+ :where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-editorial .hero-headline {
56805
+ font-size: clamp(2.75rem, 5.6vw, 4.75rem);
56806
+ line-height: 1.06;
56495
56807
  }
56496
56808
 
56497
- :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-btn--secondary {
56498
- background: transparent;
56499
- border: 1px solid var(--ab-btn-secondary-border, rgb(var(--tb-border, 226 232 240)));
56809
+ :where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-editorial .hero-subheadline {
56810
+ font-size: clamp(1.0625rem, 1.4vw, 1.375rem);
56811
+ line-height: 1.55;
56500
56812
  }
56501
56813
 
56502
- :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-btn--secondary:hover:not(:disabled) {
56503
- background-color: var(--ab-btn-secondary-hover, rgba(var(--tb-foreground, var(--tb-text, 15 23 42)), 0.05));
56814
+ :where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-display .hero-headline {
56815
+ font-size: clamp(3.5rem, 7.2vw, 6.25rem);
56816
+ line-height: 1;
56504
56817
  }
56505
56818
 
56506
- :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-btn--link {
56507
- background: transparent;
56508
- border: none;
56509
- padding: 0;
56510
- text-decoration: underline;
56819
+ :where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-display .hero-subheadline {
56820
+ font-size: clamp(1.125rem, 1.5vw, 1.5rem);
56821
+ line-height: 1.5;
56511
56822
  }
56512
56823
 
56513
- :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-btn--link:hover {
56514
- text-decoration: none;
56824
+ :where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-poster .hero-headline {
56825
+ font-size: clamp(4.25rem, 10vw, 8.5rem);
56826
+ line-height: 0.94;
56515
56827
  }
56516
56828
 
56517
- :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-btn:disabled {
56518
- opacity: 0.5;
56519
- cursor: not-allowed;
56829
+ :where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-poster .hero-subheadline {
56830
+ font-size: clamp(1.125rem, 1.4vw, 1.5rem);
56831
+ line-height: 1.45;
56520
56832
  }
56521
56833
 
56522
- /* Actions row */
56523
- :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-actions {
56524
- display: flex;
56525
- gap: 0.75rem;
56526
- margin-top: 1.5rem;
56834
+ :where(.theme-scope) :where([data-block="hero"]) .rb-hero-title-medium.rb-hero-typography-poster .hero-headline {
56835
+ font-size: clamp(3.5rem, 7.5vw, 6.5rem);
56527
56836
  }
56528
56837
 
56529
- /* Skeleton loading */
56530
- :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-skeleton {
56531
- height: 2.5rem;
56532
- width: 100%;
56533
- background-color: var(--ab-muted-bg, rgba(var(--tb-foreground, var(--tb-text, 15 23 42)), 0.05));
56534
- border-radius: var(--ab-card-radius, var(--rb-block-radius, 1rem));
56535
- animation: ab-pulse 1.5s ease-in-out infinite;
56838
+ :where(.theme-scope) :where([data-block="hero"]) .rb-hero-title-long.rb-hero-typography-poster .hero-headline,
56839
+ :where(.theme-scope) :where([data-block="hero"]) .rb-hero-title-long.rb-hero-typography-display .hero-headline {
56840
+ font-size: clamp(3rem, 6vw, 5.25rem);
56841
+ line-height: 1.02;
56536
56842
  }
56537
56843
 
56538
- @keyframes ab-pulse {
56539
- 0%, 100% {
56540
- opacity: 1;
56541
- }
56542
- 50% {
56543
- opacity: 0.5;
56844
+ @container rb-site (max-width: 639px) {
56845
+ @scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
56846
+ :where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-poster .hero-headline,
56847
+ :where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-display .hero-headline,
56848
+ :where(.theme-scope) :where([data-block="hero"]) .rb-hero-title-long.rb-hero-typography-poster .hero-headline,
56849
+ :where(.theme-scope) :where([data-block="hero"]) .rb-hero-title-long.rb-hero-typography-display .hero-headline {
56850
+ font-size: clamp(2.5rem, 11vw, 3.5rem);
56851
+ line-height: 1.05;
56544
56852
  }
56545
56853
  }
56854
+ }
56546
56855
 
56547
- /* Field wrapper */
56548
- :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-field {
56856
+ /* =============================================================================
56857
+ * Shared: Heading Group (used by CTA, single-button, etc.)
56858
+ * =============================================================================
56859
+ */
56860
+
56861
+ /* Eyebrow - color only (typography via .rb-eyebrow) */
56862
+ :where(.theme-scope) .heading-eyebrow:not(.rb-eyebrow-treatment-accent) {
56863
+ color: rgb(var(--tb-mutedText));
56864
+ }
56865
+
56866
+ /* =============================================================================
56867
+ * Block: CTA (Phase 2)
56868
+ * =============================================================================
56869
+ */
56870
+
56871
+ /* CTA content/body text */
56872
+ :where(.theme-scope) :where([data-block="cta-full"]) .cta-content {
56873
+ color: var(--section-supporting-color, rgb(var(--tb-mutedText)));
56874
+ }
56875
+
56876
+ /* CTA button row container */
56877
+ :where(.theme-scope) :where([data-block="cta-full"]) .cta-row {
56549
56878
  display: flex;
56550
- flex-direction: column;
56551
- gap: 0.5rem;
56879
+ flex-wrap: wrap;
56552
56880
  }
56553
56881
 
56554
- /* Altcha wrapper */
56555
- :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-altcha {
56556
- margin-top: 1rem;
56882
+ /* =============================================================================
56883
+ * Block: Body Text (content block, Phase 2)
56884
+ *
56885
+ * Style contract:
56886
+ * - Variant styling is keyed off \`data-block-variant\` on the PageRenderer wrapper.
56887
+ * - Prose sizing comes from \`rb-prose-*\` (theme-aware) in \`packages/blocks/src/theme/styles.css\`.
56888
+ * =============================================================================
56889
+ */
56890
+
56891
+ /* Body copy rich text container */
56892
+ :where(.theme-scope) :where([data-block="body-text"]) .body-copy-container {
56893
+ max-width: 48rem;
56894
+ margin-left: 0;
56895
+ margin-right: auto;
56557
56896
  }
56558
56897
 
56559
- /* Link button (inline text link) */
56560
- :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-link {
56561
- display: inline;
56562
- margin-left: 0.5rem;
56563
- color: rgb(var(--tb-primary, 17 24 39));
56564
- background: none;
56565
- border: none;
56566
- padding: 0;
56567
- font: inherit;
56568
- text-decoration: underline;
56569
- cursor: pointer;
56898
+ :where(.theme-scope) :where([data-block="body-text"]) .body-copy-container.rb-items-center {
56899
+ margin-left: auto;
56900
+ margin-right: auto;
56570
56901
  }
56571
56902
 
56572
- :where(.theme-scope) :where([data-block="appointment-booking"]) .ab-link:hover {
56573
- text-decoration: none;
56903
+ /* Body copy rich text */
56904
+ :where(.theme-scope) :where([data-block="body-text"]) .body-copy-body {
56905
+ color: inherit;
56906
+ }
56907
+
56908
+ /* Ensure editing mode doesn't silently change typography inside ProseMirror */
56909
+ :where(.theme-scope) :where([data-block="body-text"]) .body-copy-body :where(.ProseMirror) {
56910
+ font-size: inherit;
56911
+ line-height: inherit;
56912
+ }
56913
+
56914
+ /* Variant: Intro (centered, wider container, larger text, relaxed leading) */
56915
+ :where(.theme-scope) :where([data-block="body-text"][data-block-variant="intro"]) .body-copy-container {
56916
+ max-width: 60rem;
56917
+ }
56918
+
56919
+ :where(.theme-scope) :where([data-block="body-text"][data-block-variant="intro"]) .body-copy-body {
56920
+ font-size: var(--rb-prose-lg-font-size);
56921
+ line-height: var(--rb-prose-lg-line-height);
56922
+ }
56923
+
56924
+ @container rb-site (min-width: 640px) {
56925
+ @scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
56926
+ :where(.theme-scope) :where([data-block="body-text"][data-block-variant="intro"]) .body-copy-body {
56927
+ font-size: var(--rb-prose-xl-sm-font-size);
56928
+ line-height: var(--rb-prose-xl-sm-line-height);
56929
+ }
56930
+ }
56931
+ }
56932
+
56933
+ /* Variant: Narrow (left-aligned, shorter line length) */
56934
+ :where(.theme-scope) :where([data-block="body-text"][data-block-variant="narrow"]) .body-copy-container {
56935
+ max-width: 34rem;
56936
+ margin-left: 0;
56937
+ margin-right: auto;
56938
+ }
56939
+
56940
+ /* Override prose sizing via theme-aware vars (see styles.css) */
56941
+ :where(.theme-scope) :where([data-block="body-text"][data-block-variant="intro"]) {
56942
+ /* Mobile-first: use rb-prose-lg sizing below 640px */
56943
+ --rb-prose-lg-font-size: clamp(
56944
+ calc(var(--fs-body, 16px) * 1.35),
56945
+ calc(var(--fs-body, 16px) * 1.1 + 1.25vw),
56946
+ calc(var(--fs-body, 16px) * 1.6)
56947
+ );
56948
+ --rb-prose-lg-line-height: calc(var(--lh-body, 1.65) + 0.2);
56949
+
56950
+ /* At >= 640px, rb-prose-xl-sm applies and becomes the dominant size */
56951
+ --rb-prose-xl-sm-font-size: clamp(
56952
+ calc(var(--fs-body, 16px) * 1.55),
56953
+ calc(var(--fs-body, 16px) * 1.25 + 1.5vw),
56954
+ calc(var(--fs-body, 16px) * 1.8)
56955
+ );
56956
+ --rb-prose-xl-sm-line-height: calc(var(--lh-body, 1.65) + 0.2);
56957
+ }
56958
+
56959
+ /* =============================================================================
56960
+ * Block: Form (formCopy fragment, Phase 2)
56961
+ * =============================================================================
56962
+ */
56963
+
56964
+ /* Form title */
56965
+ :where(.theme-scope) :where([data-block="form"]) .form-copy-title {
56966
+ font-size: 1.5rem;
56967
+ font-weight: 600;
56968
+ }
56969
+
56970
+ /* Form intro text */
56971
+ :where(.theme-scope) :where([data-block="form"]) .form-copy-intro {
56972
+ font-size: 1rem;
56973
+ color: var(--section-text-color, rgb(var(--tb-text)));
56574
56974
  }
56575
56975
 
56576
56976
  /* =============================================================================
@@ -56660,261 +57060,6 @@ var containerResponsiveThemeCss = `/*
56660
57060
  margin-top: 0.5rem;
56661
57061
  }
56662
57062
 
56663
- /* =============================================================================
56664
- * Shared: Inline Text Marks
56665
- * =============================================================================
56666
- */
56667
-
56668
- :where(.theme-scope) .rb-inline-text-accent,
56669
- :where(.theme-scope) .rb-inline-text-highlight {
56670
- font: inherit;
56671
- letter-spacing: inherit;
56672
- text-transform: inherit;
56673
- }
56674
-
56675
- :where(.theme-scope) .rb-inline-text-accent-accent {
56676
- color: rgb(var(--tb-accent));
56677
- }
56678
-
56679
- :where(.theme-scope) .rb-inline-text-accent-brand {
56680
- color: rgb(var(--tb-primary));
56681
- }
56682
-
56683
- :where(.theme-scope) .rb-inline-text-accent-contrast {
56684
- color: var(--section-text-color, rgb(var(--tb-text)));
56685
- }
56686
-
56687
- :where(.theme-scope) .rb-inline-text-highlight {
56688
- border-radius: 0.22em;
56689
- box-decoration-break: clone;
56690
- -webkit-box-decoration-break: clone;
56691
- padding: 0.02em 0.12em;
56692
- }
56693
-
56694
- :where(.theme-scope) .rb-inline-text-highlight-soft {
56695
- background: color-mix(in oklab, var(--section-text-color, rgb(var(--tb-text))) 14%, transparent);
56696
- }
56697
-
56698
- :where(.theme-scope) .rb-inline-text-highlight-accent {
56699
- background: color-mix(in oklab, rgb(var(--tb-accent)) 28%, transparent);
56700
- }
56701
-
56702
- :where(.theme-scope) .rb-inline-text-highlight-brand {
56703
- background: color-mix(in oklab, rgb(var(--tb-primary)) 24%, transparent);
56704
- }
56705
-
56706
- /* =============================================================================
56707
- * Block: Hero (Phase 2)
56708
- * Uses theme palette vars directly (no Tier 3 vars needed)
56709
- * =============================================================================
56710
- */
56711
-
56712
- /* Eyebrow - color only (typography via .rb-eyebrow) */
56713
- :where(.theme-scope) :where([data-block="hero"]) .hero-eyebrow:not(.rb-eyebrow-treatment-accent) {
56714
- color: var(--section-text-color, rgb(var(--tb-text)));
56715
- }
56716
-
56717
- /* Subheadline - supporting text below headline */
56718
- :where(.theme-scope) :where([data-block="hero"]) .hero-headline {
56719
- text-wrap: balance;
56720
- }
56721
-
56722
- :where(.theme-scope) :where([data-block="hero"]) .hero-subheadline {
56723
- font-size: 1.125rem;
56724
- color: var(--section-supporting-color, var(--section-text-color, rgb(var(--tb-text))));
56725
- }
56726
-
56727
- @container rb-site (min-width: 640px) {
56728
- @scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
56729
- :where(.theme-scope) :where([data-block="hero"]) .hero-subheadline {
56730
- font-size: 1.25rem;
56731
- }
56732
- }
56733
- }
56734
-
56735
- /* Hero typography scales. These classes are emitted by Theme V2 hero looks. */
56736
- :where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-quiet .hero-headline {
56737
- font-size: clamp(2rem, 4vw, 3rem);
56738
- line-height: 1.12;
56739
- }
56740
-
56741
- :where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-quiet .hero-subheadline {
56742
- font-size: clamp(1rem, 1.2vw, 1.25rem);
56743
- line-height: 1.55;
56744
- }
56745
-
56746
- :where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-editorial .hero-headline {
56747
- font-size: clamp(2.75rem, 5.6vw, 4.75rem);
56748
- line-height: 1.06;
56749
- }
56750
-
56751
- :where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-editorial .hero-subheadline {
56752
- font-size: clamp(1.0625rem, 1.4vw, 1.375rem);
56753
- line-height: 1.55;
56754
- }
56755
-
56756
- :where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-display .hero-headline {
56757
- font-size: clamp(3.5rem, 7.2vw, 6.25rem);
56758
- line-height: 1;
56759
- }
56760
-
56761
- :where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-display .hero-subheadline {
56762
- font-size: clamp(1.125rem, 1.5vw, 1.5rem);
56763
- line-height: 1.5;
56764
- }
56765
-
56766
- :where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-poster .hero-headline {
56767
- font-size: clamp(4.25rem, 10vw, 8.5rem);
56768
- line-height: 0.94;
56769
- }
56770
-
56771
- :where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-poster .hero-subheadline {
56772
- font-size: clamp(1.125rem, 1.4vw, 1.5rem);
56773
- line-height: 1.45;
56774
- }
56775
-
56776
- :where(.theme-scope) :where([data-block="hero"]) .rb-hero-title-medium.rb-hero-typography-poster .hero-headline {
56777
- font-size: clamp(3.5rem, 7.5vw, 6.5rem);
56778
- }
56779
-
56780
- :where(.theme-scope) :where([data-block="hero"]) .rb-hero-title-long.rb-hero-typography-poster .hero-headline,
56781
- :where(.theme-scope) :where([data-block="hero"]) .rb-hero-title-long.rb-hero-typography-display .hero-headline {
56782
- font-size: clamp(3rem, 6vw, 5.25rem);
56783
- line-height: 1.02;
56784
- }
56785
-
56786
- @container rb-site (max-width: 639px) {
56787
- @scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
56788
- :where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-poster .hero-headline,
56789
- :where(.theme-scope) :where([data-block="hero"]) .rb-hero-typography-display .hero-headline,
56790
- :where(.theme-scope) :where([data-block="hero"]) .rb-hero-title-long.rb-hero-typography-poster .hero-headline,
56791
- :where(.theme-scope) :where([data-block="hero"]) .rb-hero-title-long.rb-hero-typography-display .hero-headline {
56792
- font-size: clamp(2.5rem, 11vw, 3.5rem);
56793
- line-height: 1.05;
56794
- }
56795
- }
56796
- }
56797
-
56798
- /* =============================================================================
56799
- * Shared: Heading Group (used by CTA, single-button, etc.)
56800
- * =============================================================================
56801
- */
56802
-
56803
- /* Eyebrow - color only (typography via .rb-eyebrow) */
56804
- :where(.theme-scope) .heading-eyebrow:not(.rb-eyebrow-treatment-accent) {
56805
- color: rgb(var(--tb-mutedText));
56806
- }
56807
-
56808
- /* =============================================================================
56809
- * Block: CTA (Phase 2)
56810
- * =============================================================================
56811
- */
56812
-
56813
- /* CTA content/body text */
56814
- :where(.theme-scope) :where([data-block="cta-full"]) .cta-content {
56815
- color: var(--section-supporting-color, rgb(var(--tb-mutedText)));
56816
- }
56817
-
56818
- /* CTA button row container */
56819
- :where(.theme-scope) :where([data-block="cta-full"]) .cta-row {
56820
- display: flex;
56821
- flex-wrap: wrap;
56822
- }
56823
-
56824
- /* =============================================================================
56825
- * Block: Body Text (content block, Phase 2)
56826
- *
56827
- * Style contract:
56828
- * - Variant styling is keyed off \`data-block-variant\` on the PageRenderer wrapper.
56829
- * - Prose sizing comes from \`rb-prose-*\` (theme-aware) in \`packages/blocks/src/theme/styles.css\`.
56830
- * =============================================================================
56831
- */
56832
-
56833
- /* Body copy rich text container */
56834
- :where(.theme-scope) :where([data-block="body-text"]) .body-copy-container {
56835
- max-width: 48rem;
56836
- margin-left: 0;
56837
- margin-right: auto;
56838
- }
56839
-
56840
- :where(.theme-scope) :where([data-block="body-text"]) .body-copy-container.rb-items-center {
56841
- margin-left: auto;
56842
- margin-right: auto;
56843
- }
56844
-
56845
- /* Body copy rich text */
56846
- :where(.theme-scope) :where([data-block="body-text"]) .body-copy-body {
56847
- color: inherit;
56848
- }
56849
-
56850
- /* Ensure editing mode doesn't silently change typography inside ProseMirror */
56851
- :where(.theme-scope) :where([data-block="body-text"]) .body-copy-body :where(.ProseMirror) {
56852
- font-size: inherit;
56853
- line-height: inherit;
56854
- }
56855
-
56856
- /* Variant: Intro (centered, wider container, larger text, relaxed leading) */
56857
- :where(.theme-scope) :where([data-block="body-text"][data-block-variant="intro"]) .body-copy-container {
56858
- max-width: 60rem;
56859
- }
56860
-
56861
- :where(.theme-scope) :where([data-block="body-text"][data-block-variant="intro"]) .body-copy-body {
56862
- font-size: var(--rb-prose-lg-font-size);
56863
- line-height: var(--rb-prose-lg-line-height);
56864
- }
56865
-
56866
- @container rb-site (min-width: 640px) {
56867
- @scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
56868
- :where(.theme-scope) :where([data-block="body-text"][data-block-variant="intro"]) .body-copy-body {
56869
- font-size: var(--rb-prose-xl-sm-font-size);
56870
- line-height: var(--rb-prose-xl-sm-line-height);
56871
- }
56872
- }
56873
- }
56874
-
56875
- /* Variant: Narrow (left-aligned, shorter line length) */
56876
- :where(.theme-scope) :where([data-block="body-text"][data-block-variant="narrow"]) .body-copy-container {
56877
- max-width: 34rem;
56878
- margin-left: 0;
56879
- margin-right: auto;
56880
- }
56881
-
56882
- /* Override prose sizing via theme-aware vars (see styles.css) */
56883
- :where(.theme-scope) :where([data-block="body-text"][data-block-variant="intro"]) {
56884
- /* Mobile-first: use rb-prose-lg sizing below 640px */
56885
- --rb-prose-lg-font-size: clamp(
56886
- calc(var(--fs-body, 16px) * 1.35),
56887
- calc(var(--fs-body, 16px) * 1.1 + 1.25vw),
56888
- calc(var(--fs-body, 16px) * 1.6)
56889
- );
56890
- --rb-prose-lg-line-height: calc(var(--lh-body, 1.65) + 0.2);
56891
-
56892
- /* At >= 640px, rb-prose-xl-sm applies and becomes the dominant size */
56893
- --rb-prose-xl-sm-font-size: clamp(
56894
- calc(var(--fs-body, 16px) * 1.55),
56895
- calc(var(--fs-body, 16px) * 1.25 + 1.5vw),
56896
- calc(var(--fs-body, 16px) * 1.8)
56897
- );
56898
- --rb-prose-xl-sm-line-height: calc(var(--lh-body, 1.65) + 0.2);
56899
- }
56900
-
56901
- /* =============================================================================
56902
- * Block: Form (formCopy fragment, Phase 2)
56903
- * =============================================================================
56904
- */
56905
-
56906
- /* Form title */
56907
- :where(.theme-scope) :where([data-block="form"]) .form-copy-title {
56908
- font-size: 1.5rem;
56909
- font-weight: 600;
56910
- }
56911
-
56912
- /* Form intro text */
56913
- :where(.theme-scope) :where([data-block="form"]) .form-copy-intro {
56914
- font-size: 1rem;
56915
- color: var(--section-text-color, rgb(var(--tb-text)));
56916
- }
56917
-
56918
57063
  /* =============================================================================
56919
57064
  * Block-Level Override Utilities
56920
57065
  *
@@ -58531,14 +58676,11 @@ var containerResponsiveThemeCss = `/*
58531
58676
  --cr-on-surface-hover-bg: rgba(var(--tb-onSurface, var(--tb-text)), 0.05);
58532
58677
  }
58533
58678
 
58534
- /* Container */
58679
+ /* Container: base styling comes from the shared .rb-reg-surface
58680
+ (registration-surface.css); these overrides preserve course
58681
+ registration's pre-extraction look (fixed padding, centered). */
58535
58682
  :where(.theme-scope) :where([data-block="course-registration"]) .cr-container {
58536
- border-radius: var(--rb-block-radius);
58537
- border: 1px solid var(--cr-border);
58538
58683
  padding: 1.5rem;
58539
- background: rgb(var(--tb-surface));
58540
- color: var(--cr-on-surface);
58541
- max-width: 50rem; /* 800px */
58542
58684
  margin-inline: auto;
58543
58685
  }
58544
58686
 
@@ -59215,7 +59357,7 @@ var containerResponsiveThemeCss = `/*
59215
59357
  padding: 2rem 1rem;
59216
59358
  }
59217
59359
 
59218
- /* State icon color variants (layout from registration-shared.css) */
59360
+ /* State icon color variants (layout from registration-surface.css) */
59219
59361
  :where(.theme-scope) :where([data-block="course-registration"]) .rb-state-icon--success {
59220
59362
  background: var(--cr-success-bg);
59221
59363
  color: var(--cr-success-text);
@@ -61260,6 +61402,8 @@ function PageContent({
61260
61402
  occurrenceContext: dataContext?.occurrenceContext ?? null,
61261
61403
  entrySubrouteContext: dataContext?.entrySubrouteContext ?? null,
61262
61404
  contentEntry: dataContext?.contentEntry ?? null,
61405
+ pageSurface: dataContext?.pageSurface ?? null,
61406
+ subject: dataContext?.subject ?? null,
61263
61407
  editableRouteMetadataFieldIds: dataContext?.editableRouteMetadataFieldIds ?? null,
61264
61408
  previewStage: dataContext?.previewStage,
61265
61409
  supabaseUrl,
@@ -67914,6 +68058,14 @@ var ENDPOINT_DEFINITIONS = {
67914
68058
  responseKind: "json",
67915
68059
  errors: []
67916
68060
  },
68061
+ adminResolveSiteBillingManualReview: {
68062
+ path: "/admin/sites/{siteId}/billing/manual-reviews/{reviewId}/resolve",
68063
+ method: "POST",
68064
+ tags: ["admin", "site-{siteId}", "billing"],
68065
+ auth: "admin",
68066
+ responseKind: "json",
68067
+ errors: []
68068
+ },
67917
68069
  // Admin GSC/SEO endpoints
67918
68070
  adminGscVerifyStart: {
67919
68071
  path: "/admin/seo/gsc/properties/verify/start",
@@ -70098,6 +70250,10 @@ var MultiPageUpdateResponse = z76.object({
70098
70250
  function isSupportedLoaderEndpoint2(endpoint) {
70099
70251
  return SUPPORTED_LOADER_ENDPOINTS.includes(endpoint);
70100
70252
  }
70253
+ var defaultPrefetchBlockDataDeps = {
70254
+ prefetchBlockDataCore: prefetchBlockData,
70255
+ normalizeLoaderParams
70256
+ };
70101
70257
  var ENTRY_REF_KEYS = [
70102
70258
  "identifier",
70103
70259
  "entryIdentifier",
@@ -70360,18 +70516,27 @@ async function getPublicWeeklySlotAvailability({ client, params }) {
70360
70516
  });
70361
70517
  }
70362
70518
  async function prefetchBlockData2(page, context, client, options) {
70519
+ return prefetchBlockDataWithDeps(
70520
+ defaultPrefetchBlockDataDeps,
70521
+ page,
70522
+ context,
70523
+ client,
70524
+ options
70525
+ );
70526
+ }
70527
+ async function prefetchBlockDataWithDeps(deps, page, context, client, options) {
70363
70528
  const { customBlocks } = options ?? {};
70364
70529
  const customBlockMap = new Map(
70365
70530
  (customBlocks ?? []).map((block) => [block.id, block])
70366
70531
  );
70367
- return prefetchBlockData(page, context, {
70532
+ return deps.prefetchBlockDataCore(page, context, {
70368
70533
  apiClient: async ({ endpoint, params }) => {
70369
70534
  if (!isSupportedLoaderEndpoint2(endpoint)) {
70370
70535
  throw new Error(
70371
70536
  `Unsupported loader endpoint: ${endpoint}. SDK only supports: ${SUPPORTED_LOADER_ENDPOINTS.join(", ")}`
70372
70537
  );
70373
70538
  }
70374
- const resolvedParams = normalizeLoaderParams(endpoint, params, context);
70539
+ const resolvedParams = deps.normalizeLoaderParams(endpoint, params, context);
70375
70540
  return await loaderAdapters[endpoint]({ client, params: resolvedParams });
70376
70541
  },
70377
70542
  isValidEndpoint: isSupportedLoaderEndpoint2,