/* Add booking (platform.js renderManualBookingModal + renderAddBookingCalendar):
   a window in the middle of the screen like a booking's details. The form is
   on the left; on the right the stylist's days, the chosen one in the middle
   with two either side, on the main calendar's time grid. The whole day fits
   (nothing scrolls up or down); the days scroll sideways and snap a day at a
   time. The new appointment is drawn in it to move, stretch and open gap time
   in. Cancel and Save sit in one bar across the foot of the window. */

body.pro-mode .business-team-drawer-layer:is(.is-add-booking, .is-gap-window) {
  --ab-ink: #1f2b26;
  --ab-muted: #66726d;
  --ab-faint: #8b9792;
  --ab-line: #e3e8e6;
  --ab-line-soft: #eef2f0;
  --ab-accent: #1f6b52;
  --ab-accent-deep: #174d3d;
  --ab-today: #2f9e6e;
  --ab-ease: cubic-bezier(.22, 1, .36, 1);
  --ab-spring: cubic-bezier(.22, 1.4, .36, 1);
}

/* ----------------------------------------------------------- the window --- */
body.pro-mode .business-team-drawer-layer.is-add-booking > .business-team-drawer:not(#rl) {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  max-width: 1380px !important;
  overflow: hidden !important;
  background: #fff !important;
}
body.pro-mode .business-team-drawer-layer.is-add-booking .business-team-drawer-header:not(#rl) {
  flex: none !important;
  padding: 18px 26px 14px !important;
  border-bottom: 1px solid var(--ab-line) !important;
  background: #fff !important;
}
body.pro-mode .business-team-drawer-layer.is-add-booking .business-team-drawer-body:not(#rl) {
  display: flex !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  background: #fff !important;
}

body.pro-mode .rl-ab {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: minmax(380px, 440px) minmax(0, 1fr);
  width: 100%;
  min-height: 0;
  padding-bottom: 65px;
}

/* The form scrolls on its own: one white column, each part under a small
   label with a thin line between them (no cards in cards). */
body.pro-mode .rl-ab-form {
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  scrollbar-width: thin;
}
body.pro-mode .rl-ab-form > form:not(#rl) {
  min-height: 100%;
  padding: 18px 18px 26px 22px !important;
  background: transparent !important;
}
body.pro-mode .rl-ab-form > form.rl-ab-booking:not(#rl) {
  display: block !important;
  padding: 4px 22px 30px 24px !important;
}
body.pro-mode .rl-ab-booking > .business-calendar-entry-types:not(#rl) { margin: 14px 0 2px !important; }
body.pro-mode .rl-ab-section {
  min-width: 0;
  padding: 18px 0;
  border-top: 1px solid var(--ab-line-soft);
}
body.pro-mode .rl-ab-booking > .rl-ab-section:first-of-type { border-top: 0; }
body.pro-mode .rl-ab-booking > :is(.business-team-drawer-form-error, [data-manual-booking-warnings]):not(#rl) { margin: 4px 0 18px !important; }
body.pro-mode .rl-ab-label:not(#rl),
body.pro-mode .rl-ab-section .business-field > label:not(#rl) {
  display: flex;
  align-items: center;
  gap: 3px;
  margin: 0 0 10px !important;
  color: var(--ab-ink) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
body.pro-mode .rl-ab-section .business-field:not(#rl) { display: block; margin: 0 !important; }
body.pro-mode .rl-ab-section .business-field + .business-field:not([hidden]):not(#rl) { margin-top: 12px !important; }
body.pro-mode .rl-ab-note { display: block; margin-top: 8px; color: var(--ab-muted); font-size: 12px; }
body.pro-mode .rl-ab-empty { margin: 0; color: var(--ab-muted); font-size: 13px; }
/* The guest's note is said once, small. */
body.pro-mode .rl-ab-customer .business-manual-customer-detail small:not(#rl) {
  display: block;
  margin: 6px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  color: var(--ab-faint) !important;
  background: none !important;
  box-shadow: none !important;
  font-size: 11.5px !important;
  line-height: 1.4;
}

/* -------------------------------------------- asked at Save: the review ---
   The same window over Save in the gap / double booking window. */
body.pro-mode .business-team-drawer-layer:is(.is-add-booking, .is-gap-window) .business-team-drawer-footer-actions { position: relative !important; }
body.pro-mode .rl-ab-review {
  position: absolute;
  z-index: 30;
  right: 0;
  bottom: calc(100% + 12px);
  width: min(340px, calc(100vw - 48px));
  padding: 12px 12px 10px 14px;
  border: 1px solid #eedcbd;
  border-radius: 14px;
  color: var(--ab-ink);
  background: #fff;
  box-shadow: 0 24px 52px -20px rgb(16 28 22 / 38%), 0 2px 8px rgb(16 28 22 / 8%);
  text-align: left;
  transform-origin: calc(100% - 50px) 100%;
  animation: ab-review-in 240ms var(--ab-spring) both;
}
body.pro-mode .rl-ab-review::after {
  position: absolute;
  right: 44px;
  bottom: -7px;
  width: 12px;
  height: 12px;
  border-right: 1px solid #eedcbd;
  border-bottom: 1px solid #eedcbd;
  background: #fff;
  content: "";
  transform: rotate(45deg);
}
body.pro-mode .rl-ab-review > header { display: flex; align-items: center; gap: 8px; }
body.pro-mode .rl-ab-review > header > span {
  display: grid;
  flex: none;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  color: #fff;
  background: #b8863b;
  font-size: 12px;
  font-weight: 700;
}
body.pro-mode .rl-ab-review > header > strong { font-size: 13.5px; font-weight: 680; }
body.pro-mode .rl-ab-review > ul { display: grid; gap: 4px; margin: 8px 0 10px; padding: 0 0 0 28px; list-style: none; }
body.pro-mode .rl-ab-review > ul > li { position: relative; color: #3c4944; font-size: 12.5px; line-height: 1.4; }
body.pro-mode .rl-ab-review > ul > li::before { position: absolute; top: .5em; left: -12px; width: 5px; height: 5px; border-radius: 999px; background: #b8863b; content: ""; }
body.pro-mode .rl-ab-review > ul > li.is-blocking::before { background: #b42318; }
body.pro-mode .rl-ab-review.is-blocking { border-color: #f0c9c4; }
body.pro-mode .rl-ab-review.is-blocking::after { border-color: #f0c9c4; }
body.pro-mode .rl-ab-review.is-blocking > header > span { background: #b42318; }
body.pro-mode .rl-ab-review-actions { display: flex; justify-content: flex-end; gap: 6px; }
body.pro-mode .rl-ab-review-actions > button:not(#rl) {
  min-height: 0 !important;
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--ab-line);
  border-radius: 999px;
  color: var(--ab-ink);
  background: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, transform 160ms var(--ab-ease);
}
body.pro-mode .rl-ab-review-actions > button:hover:not(#rl) { background: #f4f7f5; }
body.pro-mode .rl-ab-review-actions > .rl-ab-review-save:not(#rl) { border-color: var(--ab-accent); color: #fff; background: var(--ab-accent); }
body.pro-mode .rl-ab-review-actions > .rl-ab-review-save:hover:not(#rl) { background: var(--ab-accent-deep); }
body.pro-mode .rl-ab-review-actions > button:active:not(#rl) { transform: scale(.96); }
body.pro-mode .rl-ab-review-actions > button:focus-visible:not(#rl) { outline: 2px solid var(--ab-accent); outline-offset: 2px; }
@keyframes ab-review-in { from { opacity: 0; transform: translateY(6px) scale(.95); } to { opacity: 1; transform: none; } }
/* The same window over Save in "Modify appointment?" (a moved or modified
   appointment), at the right of its footer. */
body.pro-mode .business-booking-move-modal {
  --ab-ink: #1f2b26;
  --ab-line: #e3e8e6;
  --ab-accent: #1f6b52;
  --ab-accent-deep: #174d3d;
  --ab-ease: cubic-bezier(.22, 1, .36, 1);
  --ab-spring: cubic-bezier(.22, 1.4, .36, 1);
}
/* (Modify's own window keeps its footer sticky, which places the window
   just as well.) */
body.pro-mode .business-booking-move-modal:not(.is-editor-window) .business-booking-move-footer { position: relative; }
body.pro-mode .business-booking-move-footer > .rl-move-review { right: 0; z-index: 40; }


/* ---------------------------------------------------------- the stylist --- */
body.pro-mode .rl-ab-stylists { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0 -6px; }
body.pro-mode .rl-ab-stylist {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  width: 66px;
  padding: 6px 2px 7px;
  border-radius: 14px;
  cursor: pointer;
  transition: background-color 160ms ease;
}
body.pro-mode .rl-ab-stylist:hover { background: #f4f7f5; }
body.pro-mode .rl-ab-stylist > input:not(#rl) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
body.pro-mode .rl-ab-stylist-face {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-radius: 999px;
  color: color-mix(in srgb, var(--stylist-color, #4d6b60) 78%, black);
  background: color-mix(in srgb, var(--stylist-color, #4d6b60) 18%, white);
  box-shadow: 0 0 0 0 #fff, 0 0 0 0 var(--ab-accent);
  pointer-events: none;
  transition: box-shadow 220ms var(--ab-ease), transform 220ms var(--ab-spring), opacity 160ms ease;
}
body.pro-mode .rl-ab-stylist-face > img { width: 100%; height: 100%; object-fit: cover; }
body.pro-mode .rl-ab-stylist-face > b { font-size: 14px; font-weight: 700; letter-spacing: .02em; }
body.pro-mode .rl-ab-stylist-name {
  max-width: 100%;
  overflow: hidden;
  color: var(--ab-muted);
  font-size: 12px;
  font-weight: 550;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
  transition: color 160ms ease;
}
/* The chosen one sits in a ring that runs from purple to mint. */
body.pro-mode .rl-ab-stylist::before {
  position: absolute;
  top: 2px;
  left: 50%;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7c5cd6 0%, #5b8fe0 48%, #3fcfa8 100%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) scale(.82);
  transition: opacity 200ms ease, transform 320ms var(--ab-spring);
}
body.pro-mode .rl-ab-stylist.is-selected::before { opacity: 1; transform: translateX(-50%) scale(1); }
body.pro-mode .rl-ab-stylist-face { position: relative; z-index: 1; }
body.pro-mode .rl-ab-stylist.is-selected .rl-ab-stylist-face { box-shadow: 0 0 0 2.5px #fff; }
body.pro-mode .rl-ab-stylist.is-selected .rl-ab-stylist-name { color: var(--ab-ink); font-weight: 650; }
body.pro-mode .rl-ab-stylist:active .rl-ab-stylist-face { transform: scale(.94); }
body.pro-mode .rl-ab-stylist > input:focus-visible + .rl-ab-stylist-face { box-shadow: 0 0 0 2.5px #fff, 0 0 0 7px rgb(124 92 214 / 22%); }
body.pro-mode .rl-ab-stylist:is(.is-unassigned, .is-off):not(.is-selected) .rl-ab-stylist-face { opacity: .5; }
body.pro-mode .rl-ab-stylist-flag {
  position: absolute;
  top: 5px;
  right: 11px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #d9962f;
  box-shadow: 0 0 0 2px #fff;
  pointer-events: none;
}

/* --------------------------------------------------------- the services --- */
body.pro-mode .rl-ab-services:not(#rl) { position: relative; display: block; }
body.pro-mode .rl-ab-service-stack { position: relative; margin-bottom: 8px; }
body.pro-mode .rl-ab-service-stack.has-track { padding-right: 30px; }
body.pro-mode .rl-ab-service-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
body.pro-mode .rl-ab-service {
  position: relative;
  display: grid;
  grid-template-areas: "field remove" "meta remove";
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 6px;
  min-width: 0;
  padding: 5px 6px 8px 4px;
  border: 1px solid var(--ab-line);
  border-radius: 12px;
  background: #fff;
  transition: border-color 160ms ease, box-shadow 200ms ease;
}
body.pro-mode .rl-ab-service.is-several {
  grid-template-areas: "grip number field remove" "grip number meta remove";
  grid-template-columns: 14px 22px minmax(0, 1fr) auto;
  column-gap: 6px;
  padding-left: 2px;
}
body.pro-mode .rl-ab-service:hover { border-color: #d3dcd8; }
body.pro-mode .rl-ab-service:focus-within { border-color: #bcd6ca; box-shadow: 0 0 0 3px rgb(31 107 82 / 8%); }
body.pro-mode .rl-ab-service-grip:not(#rl) {
  grid-area: grip;
  display: grid;
  place-items: center;
  width: 14px;
  min-height: 0 !important;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  color: #a3aea9;
  background: transparent;
  cursor: grab;
  touch-action: none;
  user-select: none;
  transition: color 160ms ease, background-color 160ms ease;
}
body.pro-mode .rl-ab-service-grip svg:not(#rl) { width: 7px; height: 11px; fill: currentColor; }
body.pro-mode .rl-ab-service-grip:is(:hover, :focus-visible):not(#rl) { color: var(--ab-accent); background: #eef6f2; outline: none; }
body.pro-mode .rl-ab-service-number {
  grid-area: number;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  color: #fff;
  background: var(--seg);
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
body.pro-mode .rl-ab-service > .business-manual-service-select { grid-area: field; min-width: 0; }
body.pro-mode .rl-ab-service-meta:not(#rl) {
  grid-area: meta;
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
  min-width: 0;
  margin: 1px 0 0 !important;
  padding: 0 0 0 8px;
  color: var(--ab-muted);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}
body.pro-mode .rl-ab-service-meta > * + *::before { margin-right: 6px; color: #b7c1bc; content: "·"; }
body.pro-mode .rl-ab-service-meta > b { color: var(--ab-ink); font-weight: 600; }
body.pro-mode .rl-ab-service-meta > time { color: #3c4944; }
body.pro-mode .rl-ab-service-remove:not(#rl) {
  grid-area: remove;
  display: grid;
  place-items: center;
  width: 28px;
  min-height: 0 !important;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: #93a09a;
  background: transparent;
  cursor: pointer;
  transition: color 140ms ease, background-color 140ms ease;
}
body.pro-mode .rl-ab-service-remove > svg:not(#rl) { width: 15px; height: 15px; }
body.pro-mode .rl-ab-service-remove:is(:hover, :focus-visible):not(#rl) { color: #b33a2a; background: #fbecea; outline: none; }
body.pro-mode .rl-ab-service-list.is-reordering > .rl-ab-service:not(.is-dragging) { transition: transform 200ms var(--ab-ease); }
body.pro-mode .rl-ab-service-list.is-settling > .rl-ab-service { transition: none !important; }
body.pro-mode .rl-ab-service.is-dragging { z-index: 4; border-color: #9fd3bd; box-shadow: 0 14px 30px rgb(23 43 35 / 16%); transition: box-shadow 160ms ease !important; }
body.pro-mode .rl-ab-service.is-dragging .rl-ab-service-grip:not(#rl) { color: var(--ab-accent); cursor: grabbing; }

/* The service's field: in its card it reads as the service's name, and is
   a search the moment it is clicked. */
body.pro-mode .rl-ab-booking .business-manual-service-combobox:not(#rl) {
  position: relative;
  display: flex !important;
  align-items: center;
  gap: 4px;
  height: 40px;
  min-height: 40px !important;
  padding: 0 5px 0 0 !important;
  border: 1px solid var(--ab-line) !important;
  border-radius: 10px !important;
  color: var(--ab-ink) !important;
  background: #fff !important;
  box-shadow: none !important;
  cursor: text;
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}
body.pro-mode .rl-ab-booking .business-manual-service-combobox > input[data-manual-service-search]:not(#rl),
body.pro-mode .rl-ab-booking .business-manual-service-combobox > input[data-manual-service-search]:not(#rl):is(:hover, :focus, :focus-visible) {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  margin: 0 !important;
  padding: 0 4px 0 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: none !important;
  color: var(--ab-ink);
  background: transparent !important;
  box-shadow: none !important;
  font: inherit;
  font-size: 14px;
  text-overflow: ellipsis;
}
body.pro-mode .rl-ab-booking .business-manual-service-combobox > input::placeholder { color: var(--ab-faint); opacity: 1; }
body.pro-mode .rl-ab-booking .business-manual-service-combobox.has-selection > input::placeholder { color: #4a5651; }
body.pro-mode .rl-ab-booking .business-manual-service-combobox:hover:not(#rl) { border-color: #cbd6d1 !important; }
body.pro-mode .rl-ab-booking .business-manual-service-combobox:is(:focus-within, .is-open):not(#rl) { border-color: var(--ab-accent) !important; box-shadow: 0 0 0 3px rgb(31 107 82 / 14%) !important; }
body.pro-mode .rl-ab-booking .business-manual-service-combobox .prelook-select-chevron { transition: transform 200ms var(--ab-ease), color 160ms ease, background-color 160ms ease; }
body.pro-mode .rl-ab-booking .business-manual-service-combobox.is-open .prelook-select-chevron { color: #fff; background: var(--ab-accent); }
body.pro-mode .rl-ab-booking .business-manual-service-combobox.is-open .prelook-select-chevron svg { transform: rotate(180deg); }
/* In a service's card: no box of its own until it is pointed at. */
body.pro-mode .rl-ab-service .business-manual-service-combobox:not(#rl) { height: 34px; min-height: 34px !important; border-color: transparent !important; }
/* (Every state is named, or the field's own hover and focus rules, which
   weigh more, would move the words a few pixels.) */
body.pro-mode .rl-ab-service .business-manual-service-combobox > input[data-manual-service-search]:not(#rl),
body.pro-mode .rl-ab-service .business-manual-service-combobox > input[data-manual-service-search]:not(#rl):is(:hover, :focus, :focus-visible) { padding-left: 7px !important; font-weight: 600 !important; }
/* The service's name has no box around it, whatever it is doing: a light
   wash while pointed at, nothing else. */
body.pro-mode .rl-ab-service .business-manual-service-combobox:is(:hover, :focus-within, .is-open):not(#rl) { border-color: transparent !important; box-shadow: none !important; }
body.pro-mode .rl-ab-service .business-manual-service-combobox:hover:not(#rl) { background: #f5f8f6 !important; }
body.pro-mode .rl-ab-service .business-manual-service-combobox:is(:focus-within, .is-open):not(#rl) { background: transparent !important; }
body.pro-mode .rl-ab-service .business-manual-service-combobox:not(.is-open):not(:focus-within) .prelook-select-chevron { opacity: 0; transition: opacity 140ms ease; }
body.pro-mode .rl-ab-service:hover .business-manual-service-combobox .prelook-select-chevron { opacity: 1; }
body.pro-mode .rl-ab-booking .business-manual-service-menu { min-width: min(320px, 82vw); }

/* The search that adds a service: a quiet dashed field with a plus, solid
   once it is the only one (nothing chosen yet). */
body.pro-mode .rl-ab-picker .business-manual-service-combobox:not(#rl) { border-style: dashed !important; border-color: var(--color-accent-line, #cfe3d9) !important; background: #fbfdfc !important; }
body.pro-mode .rl-ab-services:not(.has-service) .rl-ab-picker .business-manual-service-combobox:not(#rl) { border-style: solid !important; border-color: var(--ab-line) !important; background: #fff !important; }
body.pro-mode .rl-ab-picker .business-manual-service-combobox:is(:hover, :focus-within, .is-open):not(#rl) { border-style: solid !important; background: #fff !important; }
body.pro-mode .rl-ab-picker-icon { display: grid; flex: none; place-items: center; width: 22px; height: 22px; margin-left: 9px; border-radius: 999px; color: var(--ab-accent); background: #e9f4ee; }
body.pro-mode .rl-ab-picker-icon > svg { width: 13px; height: 13px; }
body.pro-mode .rl-ab-picker .business-manual-service-combobox > input[data-manual-service-search]:not(#rl),
body.pro-mode .rl-ab-picker .business-manual-service-combobox > input[data-manual-service-search]:not(#rl):is(:hover, :focus, :focus-visible) { padding-left: 8px !important; }
body.pro-mode .rl-ab-services.is-full .rl-ab-picker { display: none; }

/* The services' line: each one's stretch in its colour and as long as its
   time, a handle where one ends and the next begins. */
body.pro-mode .rl-ab-track {
  position: absolute;
  top: 14px;
  right: 9px;
  bottom: 14px;
  width: 6px;
}
body.pro-mode .rl-ab-track-part {
  position: absolute;
  right: 0;
  left: 0;
  border-radius: 999px;
  background: var(--seg);
  box-shadow: 0 0 0 1.5px #fff;
  transition: top 220ms var(--ab-ease), height 220ms var(--ab-ease);
}
body.pro-mode .rl-ab-track-handle:not(#rl) {
  position: absolute;
  z-index: 2;
  left: 50%;
  display: grid;
  place-items: center;
  width: 22px;
  min-height: 0 !important;
  height: 22px;
  padding: 0;
  border: 2px solid var(--seg);
  border-radius: 50%;
  color: var(--seg);
  background: #fff;
  box-shadow: 0 2px 8px rgb(23 43 35 / 18%);
  cursor: row-resize;
  touch-action: none;
  transform: translate(-50%, -50%);
  transition: top 220ms var(--ab-ease), transform 220ms var(--ab-spring), box-shadow 200ms ease;
}
body.pro-mode .rl-ab-track-handle > i:not(#rl) { width: 8px; height: 2px; border-radius: 2px; background: currentColor; box-shadow: 0 -3.5px 0 currentColor, 0 3.5px 0 currentColor; }
body.pro-mode .rl-ab-track-handle:is(:hover, :focus-visible):not(#rl) { outline: none; box-shadow: 0 0 0 5px color-mix(in srgb, var(--seg) 20%, transparent), 0 2px 8px rgb(23 43 35 / 18%); transform: translate(-50%, -50%) scale(1.12); }
body.pro-mode .rl-ab-track-handle.is-dragging:not(#rl) { box-shadow: 0 0 0 6px color-mix(in srgb, var(--seg) 24%, transparent), 0 4px 12px rgb(23 43 35 / 22%); transform: translate(-50%, -50%) scale(1.18); }
body.pro-mode .rl-ab-track.is-dragging :is(.rl-ab-track-part, .rl-ab-track-handle):not(#rl) { transition: transform 220ms var(--ab-spring), box-shadow 200ms ease; }

/* One bar across the foot of the window (it stays where it is however far
   the form scrolls). */
body.pro-mode .business-team-drawer-layer.is-add-booking .business-team-drawer-footer:not(#rl) {
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 8 !important;
  margin: 0 !important;
}

/* ------------------------------------------------------------ the calendar --- */
body.pro-mode .rl-abc {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 14px 20px 16px 16px;
  border-left: 1px solid var(--ab-line);
  background: #fff;
}
body.pro-mode .rl-abc-head { position: relative; z-index: 12; display: flex; flex: none; align-items: center; justify-content: space-between; gap: 14px; padding: 0 0 0 52px; }
body.pro-mode .rl-abc-heading { display: flex; align-items: center; min-width: 0; }
body.pro-mode .rl-abc-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; min-width: 0; }

/* The start and end beside the month, each a list of times. */
body.pro-mode .rl-abc-times { position: relative; display: inline-flex; align-items: center; gap: 4px; }
body.pro-mode .rl-abc-time:not(#rl) {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 0 !important;
  height: 32px;
  padding: 0 7px 0 10px;
  border: 1px solid var(--ab-line);
  border-radius: 999px;
  color: var(--ab-ink);
  background: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 160ms ease;
}
body.pro-mode .rl-abc-time:hover:not(:disabled):not(#rl) { border-color: #b9d8c9; background: #f3faf6; }
body.pro-mode .rl-abc-time[aria-expanded="true"]:not(#rl) { border-color: var(--ab-accent); box-shadow: 0 0 0 3px rgb(31 107 82 / 14%); }
body.pro-mode .rl-abc-time:focus-visible:not(#rl) { outline: 2px solid var(--ab-accent); outline-offset: 1px; }
body.pro-mode .rl-abc-time:disabled:not(#rl) { color: var(--ab-faint); background: #fafbfa; cursor: default; }
body.pro-mode .rl-abc-times.is-empty .rl-abc-time:not(#rl) { color: var(--ab-faint); font-weight: 550; }
body.pro-mode .rl-abc-time-clock { width: 15px; height: 15px; color: var(--ab-muted); }
body.pro-mode .rl-abc-time-chevron { width: 15px; height: 15px; color: var(--ab-muted); transition: transform 220ms var(--ab-ease); }
body.pro-mode .rl-abc-time[aria-expanded="true"] .rl-abc-time-chevron { transform: rotate(180deg); }
body.pro-mode .rl-abc-time-dash { color: var(--ab-faint); font-size: 13px; }
body.pro-mode .rl-abc-time-list {
  position: absolute;
  z-index: 14;
  top: calc(100% + 6px);
  display: grid;
  width: 200px;
  max-height: 288px;
  padding: 5px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--ab-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 22px 48px -18px rgb(16 28 22 / 34%), 0 2px 6px rgb(16 28 22 / 6%);
  scrollbar-width: thin;
  transform-origin: 20px 0;
}
body.pro-mode .rl-abc-time-list[hidden] { display: none; }
body.pro-mode .rl-abc-time-option:not(#rl) {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-height: 0 !important;
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  color: var(--ab-ink);
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: left;
  cursor: pointer;
}
body.pro-mode .rl-abc-time-option > small { color: var(--ab-faint); font-size: 11.5px; }
body.pro-mode .rl-abc-time-option:is(:hover, :focus-visible):not(#rl) { background: #eef4f1; outline: none; }
body.pro-mode .rl-abc-time-option[aria-selected="true"]:not(#rl) { color: #fff; background: var(--ab-accent); font-weight: 650; }
body.pro-mode .rl-abc-time-option[aria-selected="true"] > small { color: rgb(255 255 255 / 78%); }

body.pro-mode .rl-abc-month:not(#rl) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 0 !important;
  margin: -3px 0 -3px -8px;
  padding: 3px 6px 3px 8px;
  border: 0;
  border-radius: 9px;
  color: var(--ab-ink);
  background: transparent;
  font: inherit;
  cursor: pointer;
  transition: background-color 160ms ease;
}
body.pro-mode .rl-abc-month:hover:not(#rl),
body.pro-mode .rl-abc-month[aria-expanded="true"]:not(#rl) { background: #eef4f1; }
body.pro-mode .rl-abc-month:focus-visible:not(#rl) { outline: 2px solid var(--ab-accent); outline-offset: 1px; }
body.pro-mode .rl-abc-month > strong:not(#rl) { font-size: 1.08rem; font-weight: 680; letter-spacing: -.01em; white-space: nowrap; }
body.pro-mode .rl-abc-month-chevron:not(#rl) { width: 17px; height: 17px; color: var(--ab-muted); transition: transform 260ms var(--ab-ease), color 160ms ease; }
body.pro-mode .rl-abc-month[aria-expanded="true"] .rl-abc-month-chevron:not(#rl) { color: var(--ab-accent); transform: rotate(180deg); }

/* The month, open under its name: pick a day. */
body.pro-mode .rl-abc-picker {
  position: absolute;
  top: calc(100% + 8px);
  left: 44px;
  width: 296px;
  padding: 12px 12px 10px;
  border: 1px solid var(--ab-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 22px 48px -18px rgb(16 28 22 / 34%), 0 2px 6px rgb(16 28 22 / 6%);
  transform-origin: 24px 0;
}
body.pro-mode .rl-abc-picker[hidden] { display: none; }
body.pro-mode .rl-abc-picker-head { display: grid; grid-template-columns: 32px 1fr 32px; align-items: center; margin-bottom: 8px; }
body.pro-mode .rl-abc-picker-head > strong { color: var(--ab-ink); font-size: 14px; font-weight: 680; text-align: center; }
body.pro-mode .rl-abc-picker-head > button:not(#rl) {
  display: grid;
  place-items: center;
  width: 32px;
  min-height: 0 !important;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: var(--ab-ink);
  background: transparent;
  cursor: pointer;
  transition: background-color 140ms ease, transform 160ms var(--ab-ease);
}
body.pro-mode .rl-abc-picker-head > button > svg:not(#rl) { width: 17px; height: 17px; }
body.pro-mode .rl-abc-picker-head > button:hover:not(#rl) { background: #eef4f1; }
body.pro-mode .rl-abc-picker-head > button:active:not(#rl) { transform: scale(.9); }
body.pro-mode .rl-abc-picker-head > button:focus-visible:not(#rl) { outline: 2px solid var(--ab-accent); outline-offset: 1px; }
body.pro-mode :is(.rl-abc-picker-weekdays, .rl-abc-picker-days) { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
body.pro-mode .rl-abc-picker-weekdays { margin-bottom: 2px; }
body.pro-mode .rl-abc-picker-weekdays > span { color: var(--ab-faint); font-size: 11px; font-weight: 650; line-height: 24px; text-align: center; }
body.pro-mode .rl-abc-picker-days { row-gap: 2px; }
body.pro-mode .rl-abc-pick:not(#rl) {
  display: grid;
  place-items: center;
  justify-self: center;
  width: 34px;
  min-height: 0 !important;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: var(--ab-ink);
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease, transform 160ms var(--ab-ease);
}
body.pro-mode .rl-abc-pick:hover:not(#rl) { background: #eef4f1; }
body.pro-mode .rl-abc-pick:active:not(#rl) { transform: scale(.9); }
body.pro-mode .rl-abc-pick:focus-visible:not(#rl) { outline: 2px solid var(--ab-accent); outline-offset: 1px; }
body.pro-mode .rl-abc-pick.is-outside:not(#rl) { color: #b7c1bc; }
body.pro-mode .rl-abc-pick.is-today:not(#rl) { color: var(--ab-accent); font-weight: 700; }
body.pro-mode .rl-abc-pick.is-selected:not(#rl) { color: #fff; background: var(--ab-accent); font-weight: 650; }
body.pro-mode .rl-abc-tools { display: flex; flex: none; align-items: center; gap: 8px; }
body.pro-mode .rl-abc-tools button:not(#rl) { min-height: 0 !important; font: inherit; cursor: pointer; }
body.pro-mode .rl-abc-gap-add:not(#rl),
body.pro-mode .rl-abc-today:not(#rl) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--ab-line);
  border-radius: 999px;
  color: var(--ab-ink);
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, box-shadow 200ms ease, transform 160ms var(--ab-ease);
}
body.pro-mode .rl-abc-gap-add:not(#rl) { padding-left: 10px; color: var(--ab-accent); }
body.pro-mode .rl-abc-gap-add > svg:not(#rl) { width: 16px; height: 16px; }
body.pro-mode .rl-abc-gap-add:hover:not(:disabled):not(#rl),
body.pro-mode .rl-abc-today:hover:not(#rl) { border-color: #b9d8c9; background: #f3faf6; box-shadow: 0 4px 12px rgb(22 32 28 / 7%); }
body.pro-mode .rl-abc-gap-add:active:not(:disabled):not(#rl),
body.pro-mode .rl-abc-today:active:not(#rl) { transform: scale(.96); }
body.pro-mode .rl-abc-gap-add:disabled:not(#rl) { color: #aab4b0; background: #fafbfa; cursor: default; }
body.pro-mode .rl-abc-arrows { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--ab-line); border-radius: 999px; }
body.pro-mode .rl-abc-arrows > button:not(#rl) {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: var(--ab-ink);
  background: transparent;
  transition: background-color 140ms ease, transform 160ms var(--ab-ease);
}
body.pro-mode .rl-abc-arrows > button > svg:not(#rl) { width: 17px; height: 17px; }
body.pro-mode .rl-abc-arrows > button:hover:not(#rl) { background: #eef4f1; }
body.pro-mode .rl-abc-arrows > button:active:not(#rl) { transform: scale(.9); }

/* The frame: hours on the left, days on the right. Every time on the page is
   placed from the hours shown (--abc-first, --abc-span, in minutes), so the
   whole day fits and a change of hours slides everything into place. */
body.pro-mode .rl-abc-frame {
  position: relative;
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: 52px minmax(0, 1fr);
  min-height: 0;
  margin-top: 10px;
}
body.pro-mode .rl-abc-axis { display: grid; grid-template-rows: 58px minmax(0, 1fr); min-height: 0; }
body.pro-mode .rl-abc-axis-body { position: relative; min-height: 0; clip-path: inset(-10px -20px -10px 0); }
/* The hours' labels ride on a track as tall as the (zoomed) hours, moved
   with the days' up-and-down scroll. */
body.pro-mode .rl-abc-axis-track {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: calc(100% * var(--abc-zoom, 1));
}
body.pro-mode .rl-abc.is-zoomed .rl-abc-axis-body { clip-path: inset(0 -20px 0 0); }
body.pro-mode .rl-abc-axis-track > time {
  position: absolute;
  right: 8px;
  top: calc((var(--abc-s) - var(--abc-first)) / var(--abc-span) * 100%);
  color: var(--ab-faint);
  font-size: 10.5px;
  font-weight: 550;
  letter-spacing: .02em;
  white-space: nowrap;
  transform: translateY(-50%);
  transition: top 420ms var(--ab-ease);
}

body.pro-mode .rl-abc-scroller {
  --abc-visible: 5;
  --abc-colw: calc(100cqw / var(--abc-visible));
  container-type: inline-size;
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overflow-anchor: none;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  touch-action: pan-x pan-y;
  border: 1px solid var(--ab-line);
  border-radius: 14px;
  background: #fff;
}
body.pro-mode .rl-abc-scroller::-webkit-scrollbar { display: none; }
body.pro-mode .rl-abc.is-dragging .rl-abc-scroller { scroll-snap-type: none; }
body.pro-mode .rl-abc-strip {
  display: grid;
  grid-template-rows: 57px minmax(0, 1fr);
  width: calc(var(--abc-count) * var(--abc-colw));
  height: calc(57px + (100% - 57px) * var(--abc-zoom, 1));
}
/* Zoomed in, the hours scroll up and down under the days' names. */
body.pro-mode .rl-abc.is-zoomed .rl-abc-scroller { overflow-y: auto; overscroll-behavior: contain; }

/* The days' names, chosen and today marked as the date picker marks them:
   the chosen day's number on a solid green circle, today's in green. */
body.pro-mode .rl-abc-heads { position: sticky; top: 0; z-index: 10; display: flex; border-bottom: 1px solid var(--ab-line); background: #fff; }
body.pro-mode .rl-abc-day-head:not(#rl) {
  position: relative;
  display: grid;
  flex: none;
  place-content: center;
  justify-items: center;
  gap: 3px;
  width: var(--abc-colw);
  min-height: 0 !important;
  height: 100%;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--ab-line-soft);
  color: var(--ab-muted);
  background: transparent;
  font: inherit;
  cursor: pointer;
}
body.pro-mode .rl-abc-day-head > small { font-size: 10.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; transition: color 200ms ease; }
body.pro-mode .rl-abc-day-head > strong {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  color: var(--ab-ink);
  font-size: 1rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  transition: color 200ms ease, background-color 220ms ease, transform 260ms var(--ab-spring);
}
body.pro-mode .rl-abc-day-head:hover > strong { background: #eef4f1; }
body.pro-mode .rl-abc-day-head.is-today > small,
body.pro-mode .rl-abc-day-head.is-today > strong { color: var(--ab-accent); font-weight: 700; }
body.pro-mode .rl-abc-day-head.is-selected > small { color: var(--ab-accent); }
body.pro-mode .rl-abc-day-head.is-selected > strong { color: #fff; background: var(--ab-accent); animation: abc-pick 320ms var(--ab-spring); }
@keyframes abc-pick { from { transform: scale(.82); } to { transform: none; } }

/* A day: its hours drawn on the time grid (hour lines, and the grid's own
   step between them), the time the stylist does not work hatched, what is
   booked in its own colours. */
body.pro-mode .rl-abc-grid { position: relative; display: flex; min-height: 0; }
body.pro-mode .rl-abc-day {
  position: relative;
  flex: none;
  width: var(--abc-colw);
  height: 100%;
  overflow: hidden;
  border-left: 1px solid var(--ab-line-soft);
  scroll-snap-align: start;
  background-image:
    linear-gradient(to bottom, #e3e9e6 1px, transparent 1px),
    linear-gradient(to bottom, #f2f5f3 1px, transparent 1px);
  background-size:
    100% calc(60 / var(--abc-span) * 100%),
    100% calc(var(--abc-step) / var(--abc-span) * 100%);
  transition: background-color 260ms ease;
}

body.pro-mode .rl-abc-day > * {
  position: absolute;
  top: calc((var(--abc-s) - var(--abc-first)) / var(--abc-span) * 100%);
  height: calc((var(--abc-e) - var(--abc-s)) / var(--abc-span) * 100%);
  transition: top 420ms var(--ab-ease), height 420ms var(--ab-ease);
}
/* Time off, shaded as the main calendar shades it: the stylist not working
   while the salon is open a quiet gray, the salon closed darker and hatched. */
body.pro-mode .rl-abc-off,
body.pro-mode .rl-abc-closed { right: 0; left: 0; box-sizing: border-box; }
body.pro-mode .rl-abc-off { border-block: 1px solid #d8dde3; background: #e7eaee; }
body.pro-mode .rl-abc-closed {
  border-block: 1px solid #b8c1cb;
  background: repeating-linear-gradient(-45deg, transparent 0 7px, rgb(62 76 88 / 9%) 7px 8px), #c7ced6;
}
body.pro-mode .rl-abc-day > .rl-abc-day-note {
  top: 10px;
  right: 6px;
  left: 6px;
  height: auto;
  overflow: hidden;
  color: #56646d;
  font-size: 11px;
  font-weight: 650;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}
body.pro-mode .rl-abc-day > .rl-abc-event {
  left: calc(3px + (100% - 6px) * var(--abc-lane) / var(--abc-lanes));
  width: calc((100% - 6px) / var(--abc-lanes) - 2px);
  transition: top 420ms var(--ab-ease), height 420ms var(--ab-ease), left 180ms var(--ab-ease), width 180ms var(--ab-ease), opacity 200ms ease;
  min-height: 6px;
  overflow: hidden;
  padding: 3px 6px 3px 8px;
  border: 1px solid color-mix(in srgb, var(--category-color, #8fa39b) 30%, white);
  border-radius: 7px;
  color: #26332e;
  background: color-mix(in srgb, var(--category-color, #8fa39b) 15%, white);
  box-shadow: inset 3px 0 0 var(--category-color, #8fa39b);
  font-size: 11px;
  line-height: 1.25;
}
body.pro-mode .rl-abc-event > b,
body.pro-mode .rl-abc-event > small { position: relative; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.pro-mode .rl-abc-event > b { font-weight: 650; }
body.pro-mode .rl-abc-event > small { color: #5d6964; font-size: 10.5px; }
body.pro-mode .rl-abc-event-free {
  position: absolute;
  right: 0;
  left: 0;
  top: var(--abc-a);
  height: calc(var(--abc-b) - var(--abc-a));
  background: repeating-linear-gradient(135deg, rgb(255 255 255 / 85%) 0 3px, transparent 3px 6px);
}
body.pro-mode .rl-abc-event:is(.is-break, .is-block) {
  border-color: #ddd3fa;
  color: #463a8a;
  background: #efeafd;
  box-shadow: none;
}
body.pro-mode .rl-abc-event.is-conflict {
  border-color: #e3826f;
  box-shadow: inset 3px 0 0 #d4543c, 0 0 0 2px rgb(212 84 60 / 22%);
  animation: abc-conflict 420ms ease-out;
}
body.pro-mode .rl-abc.is-dragging .rl-abc-event { opacity: .78; }
/* While more of the day comes into view everything keeps up at once. */
body.pro-mode .rl-abc.is-growing-hours :is(.rl-abc-day > *, .rl-abc-axis-track > time) { transition: none !important; }
body.pro-mode .rl-abc.is-entering .rl-abc-event { animation: abc-rise 560ms var(--ab-ease) both; animation-delay: calc(120ms + var(--abc-lane, 0) * 50ms); }
body.pro-mode .rl-abc-day.is-fresh > :is(.rl-abc-event, .rl-abc-off) { animation: abc-fade 280ms ease-out both; }
@keyframes abc-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes abc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes abc-conflict { 0%, 100% { transform: none; } 30% { transform: translateX(-2px); } 65% { transform: translateX(2px); } }

/* Now, on today: a red line with a beating dot. */
body.pro-mode .rl-abc-now {
  right: 0;
  left: 0;
  z-index: 3;
  height: 0 !important;
  border-top: 2px solid #e0533d;
  pointer-events: none;
}
body.pro-mode .rl-abc-now > i {
  position: absolute;
  top: -5px;
  left: -4px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #e0533d;
  box-shadow: 0 0 0 0 rgb(224 83 61 / 45%);
  animation: abc-now 2.2s ease-out infinite;
}
@keyframes abc-now { 0% { box-shadow: 0 0 0 0 rgb(224 83 61 / 45%); } 70%, 100% { box-shadow: 0 0 0 8px rgb(224 83 61 / 0%); } }

/* ------------------------------------------------- the new appointment --- */
body.pro-mode .rl-abc-draft,
body.pro-mode .rl-abc-place {
  position: absolute;
  top: calc((var(--abc-s) - var(--abc-first)) / var(--abc-span) * 100%);
  left: calc(var(--abc-col) * var(--abc-colw) + 4px + (var(--abc-colw) - 7px) * var(--abc-lane, 0) / var(--abc-lanes, 1));
  width: calc((var(--abc-colw) - 7px) / var(--abc-lanes, 1) - 2px);
  height: calc((var(--abc-e) - var(--abc-s)) / var(--abc-span) * 100%);
}
/* Its ring and glow are the "new" green whatever the service; the service's
   own colour tints the time inside it. */
body.pro-mode .rl-abc-draft {
  --abc-draft: var(--ab-today);
  z-index: 6;
  min-height: 16px;
  border-radius: 10px;
  outline: none;
  background: #fff;
  box-shadow:
    0 0 0 2px var(--abc-draft),
    0 0 0 6px color-mix(in srgb, var(--abc-draft) 16%, transparent),
    0 14px 28px -16px rgb(20 40 32 / 55%);
  cursor: grab;
  touch-action: none;
  user-select: none;
  transition:
    top 380ms var(--ab-ease),
    left 460ms var(--ab-ease),
    width 300ms var(--ab-ease),
    height 380ms var(--ab-ease),
    box-shadow 220ms ease,
    transform 220ms var(--ab-ease);
  animation: abc-draft-glow 2.8s ease-in-out infinite;
}
body.pro-mode .rl-abc-draft[hidden] { display: none; }
body.pro-mode .rl-abc-draft.is-still,
body.pro-mode .rl-abc-draft.is-still :is(.rl-abc-svc, .rl-abc-gap, .rl-abc-boundary) { transition: none !important; }
body.pro-mode .rl-abc-draft:focus-visible { box-shadow: 0 0 0 2px var(--abc-draft), 0 0 0 5px #fff, 0 0 0 7px var(--abc-draft); }
body.pro-mode .rl-abc-draft.is-readonly { cursor: default; animation: none; }
body.pro-mode .rl-abc-draft.is-lifted {
  z-index: 9;
  cursor: grabbing;
  transform: scale(1.025);
  box-shadow:
    0 0 0 2px var(--abc-draft),
    0 0 0 7px color-mix(in srgb, var(--abc-draft) 20%, transparent),
    0 26px 44px -18px rgb(20 40 32 / 60%);
  /* It follows the pointer at once, every way. */
  transition: box-shadow 160ms ease, transform 200ms var(--ab-ease);
  animation: none;
}
body.pro-mode .rl-abc-draft.is-lifted:is(.is-dragging-start, .is-dragging-end) { transform: none; cursor: ns-resize; }
@keyframes abc-draft-glow {
  0%, 100% { box-shadow: 0 0 0 2px var(--abc-draft), 0 0 0 5px color-mix(in srgb, var(--abc-draft) 12%, transparent), 0 14px 28px -16px rgb(20 40 32 / 55%); }
  50% { box-shadow: 0 0 0 2px var(--abc-draft), 0 0 0 8px color-mix(in srgb, var(--abc-draft) 20%, transparent), 0 14px 28px -16px rgb(20 40 32 / 55%); }
}

/* Inside it: the time the stylist works tinted in the service's colour, with
   a slow sheen across it; what a service leaves free hatched. */
body.pro-mode .rl-abc-draft-fill { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
body.pro-mode .rl-abc-draft-fill::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgb(255 255 255 / 55%) 50%, transparent 65%) 0 0 / 260% 100% no-repeat;
  content: "";
  animation: abc-sheen 3.6s ease-in-out infinite;
}
body.pro-mode .rl-abc-draft.is-lifted .rl-abc-draft-fill::after { animation: none; opacity: 0; }
@keyframes abc-sheen { 0%, 55% { background-position: 160% 0; } 100% { background-position: -60% 0; } }
body.pro-mode .rl-abc-draft-worked,
body.pro-mode .rl-abc-draft-free {
  position: absolute;
  right: 0;
  left: 0;
  top: var(--abc-a);
  height: calc(var(--abc-b) - var(--abc-a));
  transition: top 240ms var(--ab-ease), height 240ms var(--ab-ease);
}
body.pro-mode .rl-abc-draft-worked {
  background: linear-gradient(165deg, color-mix(in srgb, var(--category-color, var(--ab-today)) 36%, white), color-mix(in srgb, var(--category-color, var(--ab-today)) 20%, white));
}
body.pro-mode .rl-abc-draft.is-break .rl-abc-draft-worked,
body.pro-mode .rl-abc-draft.is-other .rl-abc-draft-worked { background: linear-gradient(165deg, #e2d9fc, #efeafd); }
body.pro-mode .rl-abc-draft.is-break,
body.pro-mode .rl-abc-draft.is-other { --abc-draft: #7d68d8; }
/* A service's own processing time (the stylist is free, nothing to drag):
   a quiet hatch in the service's colour; gaps are the green ones. */
body.pro-mode .rl-abc-draft-free { background: repeating-linear-gradient(135deg, #fff 0 4px, color-mix(in srgb, var(--category-color, #8fa39b) 16%, white) 4px 8px); }

/* Its words in whole lines, as many as its height holds: the customer (once
   chosen), the services, the time; shorter, the services and the time;
   shorter still, both on one line; then the services alone. A line is
   never cut through. */
body.pro-mode :is(.rl-abc-draft-copy, .rl-abc-svc-copy) {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 0;
  overflow: hidden;
  max-height: 100%;
  padding: 4px 8px 3px;
  color: var(--ab-ink);
  font-size: 11px;
  line-height: 14px;
  pointer-events: none;
}
body.pro-mode :is(.rl-abc-draft-copy, .rl-abc-svc-copy) > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.pro-mode :is(.rl-abc-draft-copy, .rl-abc-svc-copy) > strong { font-size: 12px; font-weight: 700; line-height: 15px; }
body.pro-mode :is(.rl-abc-draft-copy, .rl-abc-svc-copy) > strong:empty { display: none; }
body.pro-mode .rl-abc-draft-copy > small { color: #34413c; font-size: 11px; font-weight: 600; }
body.pro-mode :is(.rl-abc-draft-copy, .rl-abc-svc-copy) > time { color: #45524c; font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
body.pro-mode .rl-abc-draft { container: abc-draft / size; }
@container abc-draft (max-height: 49.9px) {
  body.pro-mode .rl-abc-draft-copy.has-sub > strong { display: none; }
}
@container abc-draft (max-height: 34.9px) {
  body.pro-mode .rl-abc-draft-copy { grid-template-columns: minmax(0, auto) auto; justify-content: start; column-gap: 6px; }
}
@container abc-draft (max-height: 20.9px) {
  body.pro-mode .rl-abc-draft-copy { align-content: center; height: 100%; padding: 0 8px; font-size: 10.5px; line-height: 12px; }
  body.pro-mode .rl-abc-draft-copy > time { display: none; }
}
@container abc-draft (max-height: 11.9px) {
  body.pro-mode .rl-abc-draft-copy { display: none; }
}

/* Several services: each on its own, in the colour of its number in the
   form, a hair apart; the appointment around them has no frame of its own. */
body.pro-mode .rl-abc-draft.is-blocks { background: transparent; box-shadow: none; animation: none; }
body.pro-mode .rl-abc-draft.is-blocks:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ab-accent); }
body.pro-mode .rl-abc-draft.is-blocks.is-lifted { box-shadow: none; }
body.pro-mode .rl-abc-svc {
  container: abc-svc / size;
  position: absolute;
  right: 0;
  left: 0;
  top: calc(var(--abc-a) + 1px);
  display: block;
  height: max(4px, calc(var(--abc-b) - var(--abc-a) - 2px));
  border: 1.5px solid var(--seg);
  border-radius: 9px;
  background: color-mix(in srgb, var(--seg) 16%, white);
  box-shadow: 0 12px 24px -18px rgb(20 40 32 / 55%);
  transition: top 240ms var(--ab-ease), height 240ms var(--ab-ease), box-shadow 200ms ease;
}
body.pro-mode .rl-abc-draft.is-lifted .rl-abc-svc { box-shadow: 0 0 0 4px color-mix(in srgb, var(--seg) 16%, transparent), 0 22px 36px -18px rgb(20 40 32 / 60%); }
body.pro-mode .rl-abc-draft:is(.is-lifted, .is-adjusting) .rl-abc-svc { transition: box-shadow 160ms ease; }
body.pro-mode .rl-abc-svc-fill { position: absolute; inset: 0; overflow: hidden; border-radius: 7.5px; pointer-events: none; }
body.pro-mode .rl-abc-svc-worked,
body.pro-mode .rl-abc-svc-free { position: absolute; right: 0; left: 0; top: var(--abc-a); height: calc(var(--abc-b) - var(--abc-a)); }
body.pro-mode .rl-abc-svc-worked { background: color-mix(in srgb, var(--seg) 16%, white); }
body.pro-mode .rl-abc-svc-free { background: repeating-linear-gradient(135deg, #fff 0 4px, color-mix(in srgb, var(--seg) 14%, white) 4px 8px); }
body.pro-mode .rl-abc-svc-name { display: flex; align-items: center; gap: 5px; color: #34413c; font-weight: 600; }
body.pro-mode .rl-abc-svc-name > b {
  display: grid;
  flex: none;
  place-items: center;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  color: #fff;
  background: var(--seg);
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1;
}
body.pro-mode .rl-abc-svc-name > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@container abc-svc (max-height: 49.9px) {
  body.pro-mode .rl-abc-svc-copy > strong { display: none; }
}
@container abc-svc (max-height: 34.9px) {
  body.pro-mode .rl-abc-svc-copy { grid-template-columns: minmax(0, auto) auto; justify-content: start; column-gap: 6px; }
}
@container abc-svc (max-height: 20.9px) {
  body.pro-mode .rl-abc-svc-copy { align-content: center; height: 100%; padding: 0 6px; font-size: 10.5px; line-height: 12px; }
  body.pro-mode .rl-abc-svc-copy > time { display: none; }
}
@container abc-svc (max-height: 11.9px) {
  body.pro-mode .rl-abc-svc-copy { display: none; }
}
/* New, so it glows: each service breathes in its own colour, a slow light
   passing over it. */
body.pro-mode .rl-abc-svc { animation: abc-svc-glow 2.8s ease-in-out infinite; }
body.pro-mode .rl-abc-svc-fill::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgb(255 255 255 / 60%) 50%, transparent 65%) 0 0 / 260% 100% no-repeat;
  content: "";
  pointer-events: none;
  animation: abc-sheen 3.6s ease-in-out infinite;
}
body.pro-mode .rl-abc-draft:is(.is-lifted, .is-adjusting, .is-readonly) .rl-abc-svc { animation: none; }
body.pro-mode .rl-abc-draft:is(.is-lifted, .is-adjusting) .rl-abc-svc-fill::after { opacity: 0; animation: none; }
@keyframes abc-svc-glow {
  0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--seg) 10%, transparent), 0 12px 24px -18px rgb(20 40 32 / 55%); }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--seg) 22%, transparent), 0 12px 24px -18px rgb(20 40 32 / 55%); }
}

/* Between two services: a handle to move time from one to the other. */
body.pro-mode .rl-abc-boundary {
  position: absolute;
  z-index: 4;
  right: 10px;
  left: 10px;
  top: var(--abc-a);
  height: 12px;
  cursor: row-resize;
  transform: translateY(-50%);
}
body.pro-mode .rl-abc-boundary::after {
  position: absolute;
  top: 2px;
  left: 50%;
  width: 26px;
  height: 8px;
  border: 1.5px solid var(--seg);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 6px rgb(20 40 32 / 18%);
  content: "";
  opacity: 0;
  transform: translateX(-50%) scale(.7);
  transition: opacity 160ms ease, transform 200ms var(--ab-spring);
}
body.pro-mode .rl-abc-draft:is(:hover, :focus-visible) .rl-abc-boundary::after,
body.pro-mode .rl-abc-boundary.is-dragging::after { opacity: 1; transform: translateX(-50%); }
body.pro-mode .rl-abc-boundary.is-dragging::after { transform: translateX(-50%) scale(1.15); }
body.pro-mode .rl-abc-draft.is-adjusting .rl-abc-svc { transition: none; }
body.pro-mode .rl-abc-draft.is-adjusting .rl-abc-chip { opacity: 1; transform: translate(-50%, 0); }

/* Its ends: a handle at the top and the bottom to stretch it. */
body.pro-mode .rl-abc-grip {
  position: absolute;
  z-index: 3;
  left: 50%;
  width: 34px;
  height: 12px;
  cursor: ns-resize;
  transform: translateX(-50%);
}
body.pro-mode .rl-abc-grip.is-start { top: -6px; }
body.pro-mode .rl-abc-grip.is-end { bottom: -6px; }
body.pro-mode .rl-abc-grip::after {
  position: absolute;
  top: 3px;
  left: 6px;
  width: 22px;
  height: 6px;
  border: 1.5px solid var(--abc-draft);
  border-radius: 999px;
  background: #fff;
  content: "";
  opacity: 0;
  transform: scale(.7);
  transition: opacity 160ms ease, transform 200ms var(--ab-spring);
}
body.pro-mode .rl-abc-draft:is(:hover, :focus-visible, .is-lifted) .rl-abc-grip::after { opacity: 1; transform: none; }

/* The time it is carried to, on a dark tag over it. */
body.pro-mode .rl-abc-chip {
  position: absolute;
  z-index: 5;
  bottom: calc(100% + 9px);
  left: 50%;
  padding: 5px 9px;
  border-radius: 8px;
  color: #fff;
  background: #16201c;
  box-shadow: 0 10px 22px -10px rgb(16 28 22 / 60%);
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity 140ms ease, transform 200ms var(--ab-ease);
}
body.pro-mode .rl-abc-chip:empty { display: none; }
body.pro-mode .rl-abc-draft.is-lifted .rl-abc-chip { opacity: 1; transform: translate(-50%, 0); }

/* Gap time: open time inside it, its ends dragged to size it. */
body.pro-mode .rl-abc-gap {
  --abc-gap-stripe: color-mix(in srgb, var(--abc-draft) 22%, white);
  container-type: size;
  position: absolute;
  z-index: 2;
  right: 0;
  left: 0;
  top: var(--abc-a);
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--abc-b) - var(--abc-a));
  min-height: 5px;
  border-top: 1.5px dashed var(--abc-draft);
  border-bottom: 1.5px dashed var(--abc-draft);
  outline: none;
  background: repeating-linear-gradient(135deg, #fff 0 4px, var(--abc-gap-stripe) 4px 8px);
  box-shadow: inset 3px 0 0 var(--abc-draft);
  cursor: grab;
  transition: top 240ms var(--ab-ease), height 240ms var(--ab-ease), background-color 160ms ease;
}
body.pro-mode .rl-abc-gap.is-dragging { --abc-gap-stripe: color-mix(in srgb, var(--abc-draft) 34%, white); cursor: grabbing; transition: none; }
body.pro-mode .rl-abc-gap:focus-visible { box-shadow: inset 0 0 0 2px var(--abc-draft); }
body.pro-mode .rl-abc-gap { animation: abc-gap-in 420ms var(--ab-spring) both; }
body.pro-mode .rl-abc-gap.is-dragging { animation: none; }
@keyframes abc-gap-in { from { opacity: 0; transform: scaleY(.3); } to { opacity: 1; transform: none; } }
body.pro-mode .rl-abc-gap > span {
  display: grid;
  justify-items: center;
  padding: 1px 6px;
  border-radius: 6px;
  color: var(--ab-ink);
  background: rgb(255 255 255 / 92%);
  box-shadow: 0 2px 6px rgb(20 40 32 / 12%);
  font-size: 10px;
  line-height: 1.2;
  pointer-events: none;
}
body.pro-mode .rl-abc-gap > span > b { font-weight: 650; font-variant-numeric: tabular-nums; }
body.pro-mode .rl-abc-gap > span > small { color: var(--ab-muted); font-size: 9.5px; }
body.pro-mode .rl-abc-gap > [data-abc-gap-grip] { position: absolute; right: 18px; left: 18px; height: 8px; cursor: ns-resize; }
body.pro-mode .rl-abc-gap > [data-abc-gap-grip="start"] { top: -5px; }
body.pro-mode .rl-abc-gap > [data-abc-gap-grip="end"] { bottom: -5px; }
/* × on each of the appointment's blocks (a service, or the whole time):
   it is taken off the calendar. */
body.pro-mode .rl-abc-block-remove:not(#rl) {
  position: absolute;
  z-index: 5;
  top: -8px;
  right: -8px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  min-height: 0 !important;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: #3b4843;
  box-shadow: 0 0 0 2px #fff, 0 2px 6px rgb(20 40 32 / 24%);
  cursor: pointer;
  transition: transform 180ms var(--ab-spring), background-color 140ms ease, opacity 140ms ease;
}
body.pro-mode .rl-abc-block-remove > svg:not(#rl) { width: 10px; height: 10px; }
body.pro-mode .rl-abc-block-remove:hover:not(#rl) { background: #c4412d; transform: scale(1.12); }
body.pro-mode .rl-abc-block-remove:focus-visible:not(#rl) { outline: 2px solid var(--ab-accent); outline-offset: 2px; }
body.pro-mode .rl-abc-draft:is(.is-lifted, .is-adjusting) .rl-abc-block-remove:not(#rl) { opacity: 0; pointer-events: none; }

/* ↺ on a block's top left when its service is not its own length: one
   press puts it back. */
body.pro-mode .rl-abc-block-restore:not(#rl) {
  position: absolute;
  z-index: 5;
  top: -8px;
  left: -8px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  min-height: 0 !important;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: var(--ab-accent);
  box-shadow: 0 0 0 2px #fff, 0 2px 6px rgb(20 40 32 / 24%);
  cursor: pointer;
  animation: abc-restore-in 300ms var(--ab-spring) both;
  transition: transform 180ms var(--ab-spring), background-color 140ms ease, opacity 140ms ease;
}
body.pro-mode .rl-abc-block-restore > svg:not(#rl) { width: 11px; height: 11px; }
body.pro-mode .rl-abc-block-restore:hover:not(#rl) { background: var(--ab-accent-deep); transform: rotate(-40deg) scale(1.12); }
body.pro-mode .rl-abc-block-restore:focus-visible:not(#rl) { outline: 2px solid var(--ab-accent); outline-offset: 2px; }
body.pro-mode .rl-abc-draft:is(.is-lifted, .is-adjusting) .rl-abc-block-restore:not(#rl) { opacity: 0; pointer-events: none; }
@keyframes abc-restore-in { from { opacity: 0; transform: scale(.4) rotate(90deg); } to { opacity: 1; transform: none; } }

/* × on its top right corner, always there: one press takes the gap out
   (a service's own processing time too: the stylist works it). */
body.pro-mode .rl-abc-gap-remove:not(#rl) {
  position: absolute;
  z-index: 3;
  top: -7px;
  right: -6px;
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  min-height: 0 !important;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: #3b4843;
  box-shadow: 0 0 0 2px #fff, 0 2px 6px rgb(20 40 32 / 22%);
  cursor: pointer;
  transition: transform 180ms var(--ab-spring), background-color 140ms ease;
}
body.pro-mode .rl-abc-gap-remove > svg:not(#rl) { width: 10px; height: 10px; }
body.pro-mode .rl-abc-gap-remove:hover:not(#rl) { background: #c4412d; transform: scale(1.12); }
body.pro-mode .rl-abc-gap-remove:focus-visible:not(#rl) { outline: 2px solid var(--ab-accent); outline-offset: 2px; }
body.pro-mode .rl-abc-draft.is-lifted .rl-abc-gap-remove:not(#rl) { opacity: 0; }
@container (max-height: 26px) {
  body.pro-mode .rl-abc-gap > span > small { display: none; }
}
@container (max-height: 15px) {
  body.pro-mode .rl-abc-gap > span { display: none; }
}

/* Where it was while it is carried, and the time a press draws. */
body.pro-mode .rl-abc-place {
  z-index: 5;
  display: none;
  overflow: hidden;
  padding: 4px 8px;
  border: 1.5px dashed var(--ab-today);
  border-radius: 10px;
  color: #17744f;
  background: rgb(47 158 110 / 9%);
  font-size: 11px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
body.pro-mode .rl-abc-place.is-on { display: block; animation: abc-fade 140ms ease-out both; }
body.pro-mode .rl-abc-place.is-ghost { z-index: 4; border-color: #a6b3ad; background: rgb(150 165 158 / 7%); }

/* ------------------------------------------------------------- narrower --- */
@media (max-width: 1180px) {
  body.pro-mode .rl-ab { grid-template-columns: minmax(340px, 380px) minmax(0, 1fr); }
  body.pro-mode .rl-abc-scroller { --abc-visible: 4; }
}
@media (max-width: 960px) {
  body.pro-mode .rl-ab { display: block; overflow-y: auto; overscroll-behavior: contain; }
  body.pro-mode .rl-ab-form { overflow: visible; }
  body.pro-mode .rl-abc { height: min(560px, 78vh); padding-bottom: 20px; border-top: 1px solid var(--ab-line); border-left: 0; }
  body.pro-mode .rl-abc-scroller { --abc-visible: 3; }
  body.pro-mode .rl-abc-head { flex-wrap: wrap; padding-left: 0; }
}
@media (max-width: 560px) {
  body.pro-mode .rl-abc-tools { flex-wrap: wrap; }
  body.pro-mode .rl-abc-gap-add > span:not(#rl) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  body.pro-mode .rl-abc *,
  body.pro-mode .rl-abc *::before,
  body.pro-mode .rl-abc *::after { animation: none !important; transition: none !important; }
}