@asksable/site-connector 0.2.0 → 0.3.0

package/dist/styles.css

@@ -1,3 +1,22 @@
+/* Mobile-web hygiene scoped to the widget. Each rule is a known
+   iOS Safari / Android Chrome gotcha called out by the alvsr-mobile-
+   ui-review audit. -webkit-text-size-adjust stops iOS Safari from
+   auto-enlarging the widget's text in landscape; -webkit-tap-
+   highlight-color removes the default blue tap flash; touch-action:
+   manipulation kills the legacy 300ms double-tap delay on iOS so
+   buttons feel responsive. */
+.bw,
+.bw * {
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.bw button,
+.bw [role='button'],
+.bw a {
+  touch-action: manipulation;
+}
+
 .bw {
   /* Theme tokens — overridable per host site (color + font). */
   --bw-font: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
@@ -77,43 +96,6 @@
   animation: bw-shimmer 1.5s ease infinite;
 }
 
-.bw-skel--title {
-  width: min(340px, 70%);
-  height: 32px;
-}
-
-.bw-skel--text {
-  width: 48%;
-  height: 14px;
-  margin-top: 14px;
-}
-
-.bw-skel--text-lg {
-  width: min(520px, 85%);
-}
-
-.bw-skel--card {
-  width: 100%;
-  height: 56px;
-  margin-bottom: 10px;
-}
-
-.bw-skel--calendar {
-  width: 100%;
-  height: 300px;
-}
-
-.bw-skel--input {
-  width: 100%;
-  height: 40px;
-  margin-bottom: 12px;
-}
-
-.bw-skel--textarea {
-  width: 100%;
-  height: 92px;
-}
-
 .bw-skel--slot {
   /* Default mobile pill height: matches .bw-slot { padding: 12px 0;
      font-size: 13px } ≈ 44px. Desktop overrides this below to match
@@ -122,198 +104,6 @@
   border-radius: var(--bw-radius);
 }
 
-.bw-skel-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-  margin-top: 16px;
-}
-
-.bw-skel-slots {
-  margin-top: 8px;
-}
-
-.bw-skel-slots-grid {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 10px;
-}
-
-.bw-skel-mobile {
-  display: none;
-  padding: 0 24px 24px;
-}
-
-/* === Initial-load skeleton chrome ===
-   Each skeleton primitive mirrors a real widget element so the
-   chrome doesn't reflow when actual content arrives. */
-
-.bw-skel--label {
-  width: 110px;
-  height: 18px;
-  margin-bottom: 16px;
-  border-radius: var(--bw-radius-sm);
-}
-
-/* Service group spacing matches .bw-svc-group + .bw-svc-group rules */
-.bw-skel-svc-group {
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
-}
-
-.bw-skel-svc-group + .bw-skel-svc-group {
-  margin-top: 28px;
-}
-
-.bw-skel--svc-category {
-  width: 90px;
-  height: 14px;
-  border-radius: var(--bw-radius-sm);
-}
-
-/* Service row: 80x80 image + flex column with name/desc/meta lines.
-   Mirrors the rendered .bw-svc-row layout exactly. */
-.bw-skel-svc-row {
-  display: flex;
-  align-items: flex-start;
-  gap: 16px;
-  padding: 8px 0;
-}
-
-.bw-skel--svc-image {
-  flex-shrink: 0;
-  width: 80px;
-  height: 80px;
-  border-radius: var(--bw-radius-md);
-}
-
-.bw-skel-svc-info {
-  display: flex;
-  flex: 1;
-  min-width: 0;
-  flex-direction: column;
-  gap: 8px;
-  padding-top: 2px;
-}
-
-.bw-skel--svc-name {
-  width: 70%;
-  height: 16px;
-  border-radius: var(--bw-radius-sm);
-}
-
-.bw-skel--svc-desc {
-  width: 100%;
-  height: 14px;
-  border-radius: var(--bw-radius-sm);
-}
-
-.bw-skel--svc-meta {
-  width: 50%;
-  height: 14px;
-  margin-top: 4px;
-  border-radius: var(--bw-radius-sm);
-}
-
-/* Calendar card: month header row, 7-col day-of-week strip, 6-row
-   day grid (42 cells), timezone chip below. */
-.bw-skel-cal-card {
-  /* The real .bw-cal-card supplies its own padding/border/radius;
-     just lay the skeleton primitives inside it. */
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.bw-skel-cal-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  margin-bottom: 4px;
-}
-
-.bw-skel--cal-month {
-  width: 130px;
-  height: 22px;
-  border-radius: var(--bw-radius-sm);
-}
-
-.bw-skel-cal-navs {
-  display: flex;
-  gap: 8px;
-}
-
-.bw-skel--cal-nav {
-  width: 32px;
-  height: 32px;
-  border-radius: var(--bw-radius-pill);
-}
-
-.bw-skel-cal-dows {
-  display: grid;
-  grid-template-columns: repeat(7, 1fr);
-  gap: 4px;
-}
-
-.bw-skel--cal-dow {
-  height: 14px;
-  border-radius: var(--bw-radius-sm);
-}
-
-.bw-skel-cal-grid {
-  display: grid;
-  grid-template-columns: repeat(7, 1fr);
-  gap: 4px;
-}
-
-.bw-skel--cal-day {
-  height: 44px;
-  border-radius: var(--bw-radius-sm);
-}
-
-.bw-skel--cal-tz {
-  width: 140px;
-  height: 16px;
-  margin: 12px auto 0;
-  border-radius: var(--bw-radius-sm);
-}
-
-/* Slots column heading + pills. */
-.bw-skel--slots-heading {
-  width: 60%;
-  height: 18px;
-  margin-bottom: 16px;
-  border-radius: var(--bw-radius-sm);
-}
-
-/* Skeleton body uses the same grid as the real .bw-body so column
-   widths match without reflow. */
-.bw-skel-body {
-  display: grid;
-  grid-template-columns: 28% 1fr 22%;
-  gap: 32px;
-  padding: 32px 48px 48px;
-  align-items: start;
-}
-
-@media (max-width: 1024px) {
-  .bw-skel-body {
-    display: flex;
-    flex-direction: column;
-    padding: 16px 24px 24px;
-    gap: 24px;
-  }
-
-  /* On mobile only show the services column at first paint —
-     subsequent steps reveal as user advances. */
-  .bw-skel-body .bw-col--center,
-  .bw-skel-body .bw-col--right {
-    display: none;
-  }
-}
-
 .bw-loading,
 .bw-empty {
   display: flex;
@@ -394,6 +184,86 @@
   min-height: 0;
 }
 
+/* Mobile-only review column. Desktop uses bw-details-view for review,
+   so this col stays hidden at all desktop widths and only the mobile
+   media query opts it back in on step 4. */
+.bw-col--review {
+  display: none;
+}
+
+/* Review variant runs full-bleed inside its col: no card chrome (no
+   border, no rounded background), generous type. Sized for arm's-
+   length reading on phone — body 15px floor, total 17px, with a
+   thin hairline separating each group. */
+.bw-summary--review {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+
+.bw-summary--review .bw-summary-title {
+  margin-bottom: 4px;
+  font-size: 17px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+.bw-summary--review .bw-summary-rows {
+  gap: 12px;
+}
+
+.bw-summary--review .bw-summary-row {
+  font-size: 15px;
+  line-height: 1.5;
+}
+
+.bw-summary--review .bw-summary-total {
+  font-size: 17px;
+}
+
+.bw-summary-group {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.bw-summary-subhead {
+  display: block;
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: -0.005em;
+  color: var(--bw-text-muted);
+}
+
+.bw-summary-row--stack {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+}
+
+.bw-summary-row--stack .bw-summary-val {
+  text-align: left;
+  white-space: normal;
+}
+
+.bw-summary-notes {
+  margin: 0;
+  font-size: 15px;
+  line-height: 1.55;
+  color: var(--bw-text);
+  white-space: pre-wrap;
+}
+
+.bw-summary-rows--total {
+  padding-top: 16px;
+  border-top: 1px solid var(--bw-border);
+}
+
 .bw-step-1 {
   display: flex;
   flex-direction: column;
@@ -622,6 +492,22 @@
   background: var(--bw-hover);
 }
 
+/* Provider has no slots on the selected date. Visually muted, not
+   clickable, with an "Unavailable" subtitle under the name (rendered
+   inline via .bw-staff-option-desc). */
+.bw-staff-option.is-disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.bw-staff-option.is-disabled:hover {
+  background: transparent;
+}
+
+.bw-staff-option.is-disabled .bw-staff-option-desc {
+  color: var(--bw-muted);
+}
+
 /* When the picker is in expanded mode (full list visible), let it
    stretch to fill the column so the scroll list extends down to the
    bottom of the left column instead of capping at an arbitrary
@@ -984,10 +870,187 @@
   animation: bw-slots-fade-in 240ms cubic-bezier(0.16, 1, 0.3, 1) both;
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .bw-svc-selected,
-  .bw-svc-scroll,
-  .bw-provider-section {
+@media (prefers-reduced-motion: reduce) {
+  .bw-svc-selected,
+  .bw-svc-scroll,
+  .bw-provider-section {
+    animation: none;
+  }
+}
+
+/* Provider list — replaces the old dropdown so every option is
+   visible at a glance. Two layouts share the same DOM:
+     Desktop (>=1025px): vertical stack of horizontal rows
+       (avatar | name + desc) — reads like the old dropdown list.
+     Mobile (<=1024px): horizontal scrolling strip of square-ish
+       cards (avatar above name) so the row fits on a phone column.
+   Selection, hover, and disabled-state chrome is shared between
+   both layouts so the visual language matches the rest of the
+   widget. */
+.bw-staff-row {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 0;
+  margin: 0;
+  /* Desktop list shouldn't scroll horizontally; if the column is
+     ever taller than the card, the surrounding scroller handles
+     vertical overflow. */
+  max-height: 320px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+}
+
+.bw-staff-row::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.bw-staff-row::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.bw-staff-row::-webkit-scrollbar-thumb {
+  background: var(--bw-border);
+  border-radius: 3px;
+}
+
+.bw-staff-card {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 10px 12px;
+  border: 0;
+  border-radius: var(--bw-radius-sm);
+  background: transparent;
+  color: var(--bw-text);
+  cursor: pointer;
+  text-align: left;
+  transition:
+    background var(--bw-duration) var(--bw-ease),
+    color var(--bw-duration) var(--bw-ease);
+}
+
+.bw-staff-card:hover {
+  background: var(--bw-hover);
+}
+
+.bw-staff-card.is-active {
+  background: var(--bw-bg);
+  /* Inset shadow so the active state shows a crisp black ring
+     without shifting layout (default card has no border). */
+  box-shadow: inset 0 0 0 1.5px var(--bw-text);
+}
+
+.bw-staff-card.is-active:hover {
+  background: var(--bw-bg);
+}
+
+.bw-staff-card.is-disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.bw-staff-card.is-disabled:hover {
+  background: transparent;
+}
+
+.bw-staff-card-avatar {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 999px;
+  background: var(--bw-border-light);
+  color: var(--bw-text-secondary);
+  flex-shrink: 0;
+  overflow: hidden;
+}
+
+.bw-staff-card-avatar svg {
+  width: 16px;
+  height: 16px;
+}
+
+.bw-staff-card-avatar .bw-staff-initials {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--bw-text);
+}
+
+.bw-staff-card-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  flex: 1;
+}
+
+.bw-staff-card-name {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.25;
+  color: var(--bw-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bw-staff-card-desc {
+  font-size: 12px;
+  line-height: 1.25;
+  color: var(--bw-text-muted);
+}
+
+/* Mobile uses the same vertical list as desktop — no horizontal
+   scrolling chip strip. The single layout keeps the visual language
+   identical across breakpoints; if the list exceeds the card's
+   built-in 320px max-height, it scrolls vertically inside the
+   card. */
+
+/* Mobile step 2 stacks three frames in bw-col--center: the calendar
+   card (existing), the provider card, then the times card. Each
+   mobile-only card matches the calendar card chrome so the column
+   reads as one family. Hidden on desktop where each section has
+   its own column. */
+.bw-mobile-card,
+.bw-provider-section--mobile {
+  display: none;
+}
+
+@media (max-width: 1024px) {
+  .bw-mobile-card {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    margin-top: 16px;
+    padding: 20px 20px 24px;
+    border: 1px solid var(--bw-border);
+    border-radius: var(--bw-radius-lg);
+    background: var(--bw-bg);
+  }
+
+  /* Times card needs extra bottom breathing room so the slot pills
+     don't sit flush against the card border. */
+  .bw-mobile-card.bw-slots-mobile {
+    padding-bottom: 28px;
+  }
+
+  /* Label sits at the top of each mobile card. Its desktop margin
+     would double up with the parent's flex gap, so we zero it. */
+  .bw-mobile-card > .bw-label {
+    margin-bottom: 0;
+  }
+
+  /* The provider section uses .bw-mobile-card chrome — kill the
+     desktop bw-provider-section animation so it doesn't replay
+     when the section enters the mobile flow. */
+  .bw-mobile-card.bw-provider-section--mobile {
     animation: none;
   }
 }
@@ -1368,7 +1431,11 @@
 
 .bw-time-slots {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  /* 3-column grid on mobile so each pill gets more horizontal room
+     and longer locale time strings (e.g. "10:30 a. m.") don't crowd
+     each other. Desktop overrides this to 1fr further down to render
+     a vertical pill list. */
+  grid-template-columns: repeat(3, 1fr);
   gap: 10px;
   margin-top: 8px;
 }
@@ -1416,7 +1483,11 @@
 }
 
 .bw-slot {
-  padding: 12px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 12px 14px;
+  min-width: 0;
   border: 1px solid var(--bw-border);
   border-radius: var(--bw-radius);
   background: transparent;
@@ -1537,6 +1608,208 @@
   color: var(--bw-text-muted);
 }
 
+/* ===========================================================================
+   Custom IntakeSelect — replaces the native <select>. Trigger matches
+   the .bw-field input chrome (border, radius, padding, font). Menu sits
+   absolutely below, scrolls if taller than max-height, animates in.
+   =========================================================================== */
+.bw-select {
+  position: relative;
+  width: 100%;
+}
+
+.bw-select-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  width: 100%;
+  padding: 11px 14px 11px 16px;
+  border: 1px solid var(--bw-border);
+  border-radius: var(--bw-radius-md);
+  background: transparent;
+  color: var(--bw-text);
+  font-size: 13px;
+  font-family: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition:
+    border-color var(--bw-duration) var(--bw-ease),
+    box-shadow var(--bw-duration) var(--bw-ease);
+}
+
+.bw-select-trigger:hover {
+  border-color: var(--bw-text-secondary);
+}
+
+.bw-select-trigger:focus-visible,
+.bw-select-trigger.is-open {
+  outline: 0;
+  border-color: var(--bw-primary);
+  box-shadow: 0 0 0 3px rgba(15, 15, 15, 0.05);
+}
+
+.bw-select-value {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bw-select-value.is-placeholder {
+  color: var(--bw-text-muted);
+}
+
+.bw-select-chevron {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  color: var(--bw-text-secondary);
+  transition: transform var(--bw-duration) var(--bw-ease);
+}
+
+.bw-select-trigger.is-open .bw-select-chevron {
+  transform: rotate(180deg);
+}
+
+.bw-select-chevron svg {
+  width: 16px;
+  height: 16px;
+}
+
+.bw-select-menu {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  right: 0;
+  /* Sits above the widget's own footer (z-index up to 102 on mobile)
+     and any nearby chrome so flip-up + flip-down both render cleanly. */
+  z-index: 110;
+  /* Cap menu height to whichever is smaller — the 280px design max
+     or 60% of the viewport — so on short phones the dropdown never
+     dominates the screen and always leaves the trigger visible. */
+  max-height: min(280px, 60svh);
+  overflow-y: auto;
+  margin: 0;
+  padding: 6px;
+  list-style: none;
+  background: var(--bw-bg);
+  border: 1px solid var(--bw-border);
+  border-radius: var(--bw-radius-md);
+  box-shadow: var(--bw-shadow-lift);
+  /* 250ms ease-out-expo open animation per the widget's motion
+     spec. Scale + fade + 4px lift mirrors the popup-animation rule
+     used elsewhere in the Sable product. */
+  animation: bw-select-open 250ms cubic-bezier(0.16, 1, 0.3, 1) both;
+  outline: 0;
+  scrollbar-width: thin;
+  scrollbar-color: var(--bw-border) transparent;
+}
+
+@keyframes bw-select-open {
+  from {
+    opacity: 0;
+    transform: translateY(-4px) scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+/* Flip-up variant: when there's no room below the trigger (select
+   sits near the bottom of the widget AND the host page has a fixed
+   footer below it), the menu opens upward instead. Computed at open
+   time by IntakeSelect.computePlacement. */
+.bw-select-menu.is-above {
+  top: auto;
+  bottom: calc(100% + 6px);
+  animation-name: bw-select-open-above;
+}
+
+@keyframes bw-select-open-above {
+  from {
+    opacity: 0;
+    transform: translateY(4px) scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.bw-select-option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 9px 12px;
+  border-radius: var(--bw-radius-sm);
+  color: var(--bw-text);
+  font-size: 14px;
+  cursor: pointer;
+  user-select: none;
+  transition: background-color var(--bw-duration) var(--bw-ease);
+}
+
+.bw-select-option.is-focused {
+  background: var(--bw-hover);
+}
+
+.bw-select-option.is-active {
+  color: var(--bw-text);
+  font-weight: 500;
+}
+
+.bw-select-option-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bw-select-option-check {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  color: var(--bw-primary);
+}
+
+.bw-select-option-check svg {
+  width: 14px;
+  height: 14px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bw-select-menu {
+    animation: none;
+  }
+  .bw-select-chevron {
+    transition: none;
+  }
+}
+
+@media (max-width: 1024px) {
+  /* Match the bumped 16px input font on mobile so the dropdown sits
+     in the same visual family as the rest of the form fields. */
+  .bw-select-trigger {
+    font-size: 16px;
+    padding: 12px 14px 12px 16px;
+  }
+  .bw-select-option {
+    font-size: 16px;
+    padding: 12px;
+  }
+}
+
 .bw-field--notes {
   position: relative;
 }
@@ -1574,6 +1847,8 @@
 }
 
 .bw-required {
+  /* 4px gap between the label and the asterisk so they don't kiss. */
+  margin-left: 4px;
   color: var(--bw-error-text);
   font-weight: 400;
 }
@@ -1620,6 +1895,9 @@
   text-align: right;
   text-overflow: ellipsis;
   white-space: nowrap;
+  /* Hold countdown + price + date numerals all benefit from tabular
+     figures so they don't shift horizontally as digits change. */
+  font-variant-numeric: tabular-nums;
 }
 
 .bw-summary-total span:first-child,
@@ -1746,18 +2024,77 @@
 }
 
 .bw-confirm-btn:disabled,
-.bw-footer-next:disabled {
+.bw-confirm-btn.is-disabled,
+.bw-footer-next:disabled,
+.bw-footer-next.is-disabled {
   opacity: 0.35;
   cursor: default;
 }
 
 .bw-done {
   display: flex;
+  flex: 1;
   flex-direction: column;
   align-items: center;
+  justify-content: center;
   gap: 16px;
+  min-height: 80svh;
   padding: 80px 20px;
   text-align: center;
+  animation: bw-done-fade-in 480ms cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+.bw-done-icon,
+.bw-done-title,
+.bw-done-text,
+.bw-done > .bw-btn-primary {
+  animation: bw-done-stagger-in 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+.bw-done-icon {
+  animation-delay: 80ms;
+}
+
+.bw-done-title {
+  animation-delay: 180ms;
+}
+
+.bw-done-text {
+  animation-delay: 260ms;
+}
+
+.bw-done > .bw-btn-primary {
+  animation-delay: 360ms;
+}
+
+@keyframes bw-done-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes bw-done-stagger-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.985);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bw-done,
+  .bw-done-icon,
+  .bw-done-title,
+  .bw-done-text,
+  .bw-done > .bw-btn-primary {
+    animation: none;
+  }
 }
 
 .bw-done-icon {
@@ -1814,17 +2151,17 @@
 }
 
 @media (max-width: 1024px) {
-  /* Lock mobile widget to a fixed 90vh height so the frame doesn't
-     bounce between steps. Step 2 (calendar + slot list) is the
-     tallest natural step and fits at 90vh on typical phones; step 1
-     and step 3 fill the same height with the active col content at
-     top + footer pinned at bottom. The body becomes the scroll
-     container below — content longer than the body height (rare:
-     long service list on step 1, busy slot day on step 2) scrolls
-     internally instead of growing the widget. */
+  /* Lock the frame to a single height across all steps so the widget
+     doesn't bounce as the user moves between services / date / etc.
+     Sized to fit the tallest step (date + time) with a little
+     breathing room above and below. Body scrolls internally when a
+     step exceeds it. */
   .bw {
-    min-height: 90vh;
-    max-height: 90vh;
+    /* svh (small viewport height) doesn't jump when iOS Safari's URL
+       bar toggles, unlike vh which uses the largest possible height
+       and overflows when bars become visible. */
+    min-height: 82svh;
+    max-height: 82svh;
   }
 
   /* Lock header/footer in the column so they never shrink under
@@ -1842,34 +2179,23 @@
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
     overscroll-behavior: contain;
-    /* Soft fade at both edges of the scroll area so content reads as
-       scrollable past the header above and the footer below instead
-       of cut off. Padding inside the body keeps the first/last rows
-       from sitting right at the fade line. */
+    /* Top fade only; the bottom taper is rendered as a gradient
+       overlay above .bw-footer so content fades into the footer
+       edge, not into the body frame's own bottom. */
     -webkit-mask-image: linear-gradient(
       to bottom,
       transparent 0,
       #000 24px,
-      #000 calc(100% - 24px),
-      transparent 100%
+      #000 100%
     );
     mask-image: linear-gradient(
       to bottom,
       transparent 0,
       #000 24px,
-      #000 calc(100% - 24px),
-      transparent 100%
+      #000 100%
     );
   }
 
-  .bw-skel-desktop {
-    display: none;
-  }
-
-  .bw-skel-mobile {
-    display: block;
-  }
-
   .bw-mobile-header {
     display: block;
     position: relative;
@@ -1912,9 +2238,10 @@
     flex: 1 1 0;
     width: auto;
     min-width: 20px;
-    max-width: 28px;
-    height: 3px;
-    border-radius: 1.5px;
+    max-width: 32px;
+    /* Bumped from 3px to 4px for a stronger active-step signal. */
+    height: 4px;
+    border-radius: 2px;
     background: var(--bw-border);
     transition: background 200ms ease;
   }
@@ -1924,7 +2251,9 @@
   }
 
   .bw-title {
-    font-size: 24px;
+    /* iOS Title 1 = 28pt. Was 24px (no-man's land between Title 1
+       and Title 2). 28px gives better scale separation from body. */
+    font-size: 28px;
     letter-spacing: -0.5px;
   }
 
@@ -1948,7 +2277,7 @@
     flex-direction: column;
     flex: 1;
     min-height: 0;
-    padding: 0 24px;
+    padding: 0 24px 24px;
   }
 
   .bw-col {
@@ -1956,20 +2285,24 @@
   }
 
   /* Mobile 4-step flow:
-     Step 1: services (bw-col--left, bw-step-2 only — provider hidden)
-     Step 2: provider (bw-col--left, bw-step-1 only — services hidden)
-     Step 3: calendar + slots (bw-col--center)
-     Step 4: form (bw-col--right) */
+     Step 1: services (bw-col--left, bw-step-2 only)
+     Step 2: calendar + provider chips + slots (bw-col--center)
+     Step 3: form (bw-col--right, form fields visible)
+     Step 4: review (bw-col--review with the full summary card,
+     scrollable; footer only carries back + confirm buttons).
+     Provider lives inside bw-cal-card on mobile so the visual
+     order reads date → provider → time. The desktop dropdown in
+     bw-step-1 is hidden on mobile (we use chips here instead). */
   .bw-body[data-mobile-step="1"] .bw-col--left,
-  .bw-body[data-mobile-step="2"] .bw-col--left,
-  .bw-body[data-mobile-step="3"] .bw-col--center,
-  .bw-body[data-mobile-step="4"] .bw-col--right {
+  .bw-body[data-mobile-step="2"] .bw-col--center,
+  .bw-body[data-mobile-step="3"] .bw-col--right,
+  .bw-body[data-mobile-step="4"] .bw-col--review {
     display: flex;
     padding-top: 16px;
-    padding-bottom: 20px;
+    padding-bottom: 24px;
   }
 
-  .bw-body[data-mobile-step="4"] .bw-right-inner {
+  .bw-body[data-mobile-step="3"] .bw-right-inner {
     padding-bottom: 20px;
   }
 
@@ -1990,27 +2323,9 @@
     display: none;
   }
 
-  /* Step 2: provider only. Show bw-step-1 (which renders the
-     provider section conditional on selectedService — guaranteed
-     true at step 2). Hide bw-step-2 services + the desktop
-     service-picker stub inside bw-step-1. */
-  .bw-body[data-mobile-step="2"] .bw-step-1 {
-    display: flex;
-    flex: 0 0 auto;
-  }
-
-  .bw-body[data-mobile-step="2"] .bw-step-2 {
-    display: none;
-  }
-
-  .bw-body[data-mobile-step="2"] .bw-step-1 .bw-service-picker {
-    display: none;
-  }
-
-  .bw-body[data-mobile-step="2"] .bw-step-1 .bw-provider-section .bw-section-divider {
-    /* Mobile rhythm uses whitespace, not 1px lines */
-    display: none;
-  }
+  /* Desktop dropdown lives in bw-col--left's bw-step-1; we don't show
+     bw-col--left at all on mobile step 2, so this is implicitly
+     hidden. The chip strip below handles provider selection. */
 
   .bw-svc-scroll {
     display: none;
@@ -2102,25 +2417,38 @@
   }
 
   .bw-footer {
+    position: relative;
     display: flex;
     flex-direction: column;
     gap: 20px;
-    margin-top: auto;
-    padding: 16px 24px 34px;
+    /* .bw-footer is a sibling of .bw-content, not .bw-body, so the
+       frame-to-frame mobile gap has to live on the footer flex item.
+       Bottom padding uses env(safe-area-inset-bottom) so notched iOS
+       devices clear the home indicator naturally, while Touch ID
+       devices + Android don't waste 34px of space. Floors at 24px so
+       there's always real breathing room below the Confirm button.
+       Host site MUST include `viewport-fit=cover` in its viewport
+       meta for env(safe-area-inset-*) to be non-zero on iOS. */
+    margin-top: 16px;
+    padding: 16px 24px
+      max(24px, calc(env(safe-area-inset-bottom) + 16px));
     border-top: 1px solid var(--bw-border-light);
   }
 
-  .bw-footer-summary {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-    padding: 16px;
-    border: 1px solid var(--bw-border);
-    border-radius: var(--bw-radius);
-  }
-
-  .bw-footer-summary .bw-summary-title {
-    margin-bottom: 0;
+  /* Gradient overlay sits above the footer (in the 16px gap and a
+     touch into the body's frame above it) so scrolling content fades
+     into the footer edge instead of slicing or tapering inside the
+     body's own frame. */
+  .bw-footer::before {
+    content: '';
+    position: absolute;
+    inset: -32px 0 100%;
+    pointer-events: none;
+    background: linear-gradient(
+      to bottom,
+      rgba(255, 255, 255, 0) 0%,
+      var(--bw-bg) 100%
+    );
   }
 
   .bw-footer-btns {
@@ -2190,7 +2518,7 @@
   }
 
   .bw-body {
-    padding: 0 20px;
+    padding: 0 20px 24px;
   }
 
   .bw-footer {
@@ -2217,17 +2545,38 @@
 
   .bw-slot {
     min-height: 40px;
-    padding: 12px 0;
+    padding: 12px 12px;
     font-size: 12px;
   }
 
   .bw-field input,
   .bw-field textarea {
-    font-size: 14px;
+    /* 16px on mobile prevents iOS Safari's auto-zoom-on-focus,
+       which otherwise leaves the form stuck zoomed-in mid-flow. */
+    font-size: 16px;
+  }
+
+  .bw-field label {
+    /* Bumped from 12px to 13px so labels read clearly without
+       crowding the 16px input below them. */
+    font-size: 13px;
   }
 
   .bw-summary-row {
-    font-size: 12px;
+    font-size: 13px;
+  }
+
+  .bw-slot {
+    /* Time pills are a primary tap target — bump from 13px
+       (footnote-tier) to 15px (subheadline). 3-col mobile grid
+       still fits "10:30 a. m." comfortably at 15px. */
+    font-size: 15px;
+    padding: 13px 12px;
+  }
+
+  .bw-cal-weekdays span {
+    /* Day-of-week header bumped from 12px to 13px for readability. */
+    font-size: 13px;
   }
 }
 
@@ -2287,6 +2636,14 @@
 }
 
 @media (min-width: 1025px) {
+  /* Lock the desktop frame to a stable height so it doesn't snap to a
+     shorter fit-content size when the widget swaps into the success
+     view (.bw-done has less content than the normal flow). Picked to
+     comfortably fit the calendar + slots + form layout. */
+  .bw {
+    min-height: 720px;
+  }
+
   /* Desktop body grid: cols sit at the top of their cell instead of
      stretching to the row's max content height — the visual empty
      space below the cal-card and right-pane goes away. */
@@ -2334,13 +2691,28 @@
     max-height: var(--bw-cal-h, 480px);
   }
 
-  .bw-pane--slots {
+  .bw-pane--slots,
+  .bw-pane--details {
+    /* Lock both panes in the body's right column to the same max
+       height as the calendar so the body row's intrinsic height
+       doesn't change between viewState 'slots' and 'details'. Without
+       this, the form pane grows taller than the slots pane and
+       .bw-content's grid-stack cell jumps in height on step 2. */
     max-height: var(--bw-cal-h, 480px);
     overflow: hidden;
     display: flex;
     flex-direction: column;
   }
 
+  /* Sticky "Available times" heading on desktop. Lives as a sibling
+     of .bw-slots-desktop (the scroller) so it doesn't scroll with
+     the time pills. Sits flush at the top of the right column. */
+  .bw-pane--slots .bw-slots-heading--sticky {
+    flex: 0 0 auto;
+    margin-bottom: 4px;
+    padding-bottom: 8px;
+  }
+
   .bw-pane--slots .bw-slots-desktop {
     flex: 1;
     min-height: 0;
@@ -2361,9 +2733,16 @@
     );
     scrollbar-width: thin;
     scrollbar-color: var(--bw-border) transparent;
+    /* Reserve space for the scrollbar so it never overlays the
+       pills' right edge. Combined with the right padding below this
+       gives the bar its own lane regardless of whether content
+       overflows. */
+    scrollbar-gutter: stable;
     /* Padding so first/last pills sit inside the fade zone, matching
-       the services scroller pattern. */
+       the services scroller pattern. Right padding gives the pills
+       breathing room from the scrollbar lane. */
     padding-block: 12px 16px;
+    padding-right: 6px;
   }
 
   .bw-pane--slots .bw-slots-desktop::-webkit-scrollbar {
@@ -2432,8 +2811,11 @@
     display: none;
   }
 
+  /* Slots-mobile is now its own card frame on step 2 (combined with
+     .bw-mobile-card class). Override default display: none so the
+     card chrome shows; .bw-mobile-card already sets flex column. */
   .bw-slots-mobile {
-    display: contents;
+    display: flex;
   }
 
   /* Details view is desktop-only; mobile uses the existing step-4
@@ -2449,14 +2831,14 @@
      wrapper for steps 1/2 since col--left stays visible across
      them) so animations don't re-fire when the active col is shared
      between adjacent steps. */
-  /* 4-step flow: steps 1+2 both share .bw-col--left, so we target
-     the inner content (bw-step-2 for services, bw-step-1 for
-     provider) so each step transitions independently. Steps 3+4
-     have dedicated cols. */
-  .bw-body[data-mobile-step='1'] .bw-step-2,
-  .bw-body[data-mobile-step='2'] .bw-step-1,
-  .bw-body[data-mobile-step='3'] .bw-col--center,
-  .bw-body[data-mobile-step='4'] .bw-col--right {
+  /* 4-step flow. Step 1 shares bw-col--left with no other step.
+     Steps 3 + 4 both live in bw-col--right but differ in content,
+     so we re-fire the enter animation on data-mobile-step changes
+     between them. */
+  .bw-body[data-mobile-step='1'] .bw-col--left,
+  .bw-body[data-mobile-step='2'] .bw-col--center,
+  .bw-body[data-mobile-step='3'] .bw-col--right,
+  .bw-body[data-mobile-step='4'] .bw-col--review {
     animation: bw-mobile-step-in 250ms cubic-bezier(0.16, 1, 0.3, 1);
   }
 
@@ -2553,6 +2935,24 @@
     flex-direction: column;
     gap: 16px;
     padding-right: 8px;
+    /* Sticky so the booking summary stays alongside the form when
+       it gets long (e.g. paid services with payment block, or many
+       intake fields). `align-self: start` keeps the grid cell from
+       stretching to row height, which would block sticky behavior.
+       Host sites can override --bw-sticky-summary-top to clear a
+       fixed top nav — encomiendas' nav is 72px so a host override
+       to ~96px makes sense; the default 24px works for hosts with
+       no fixed nav. */
+    position: sticky;
+    top: var(--bw-sticky-summary-top, 24px);
+    align-self: start;
+    /* Cap height so very-tall summaries (long service description,
+       all reschedule rows visible) don't overflow the viewport;
+       internal scroll if needed. */
+    max-height: calc(100svh - var(--bw-sticky-summary-top, 24px) - 24px);
+    overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: var(--bw-border) transparent;
   }
 
   .bw-details-eyebrow {