/* Gap time (platform.js renderGapWindowPlan): opened from an appointment's
   details. The window opens on the appointment alone, drawn as the calendar
   draws it (the time the stylist works as tinted blocks, the gap as open
   white time between them, the stylist's rail down all of it), with the gap
   moved by dragging it and resized by its ends. "Add appointment" widens the
   window to Add booking's own fields, on the same white page; what is added
   is drawn in the gap beside the gap's handles and can be moved or resized
   there too. Cancel and Save sit in the bar under it all. */

/* ----------------------------------------------------------- the window --- */
body.pro-mode .business-team-drawer-layer.is-gap-window > .business-team-drawer:not(#rl) {
  display: flex !important;
  flex-direction: column !important;
  max-width: 500px !important;
  overflow: hidden !important;
  background: #fff !important;
  transition: max-width 420ms cubic-bezier(.22, 1, .36, 1) !important;
}
body.pro-mode .business-team-drawer-layer.is-gap-window.is-adding > .business-team-drawer:not(#rl) { max-width: 1120px !important; }
body.pro-mode .business-team-drawer-layer.is-gap-window .business-team-drawer-header:not(#rl) {
  display: grid !important;
  flex: none !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  column-gap: 12px !important;
  background: #fff !important;
}
body.pro-mode .business-team-drawer-layer.is-gap-window .business-team-drawer-body:not(#rl) {
  display: flex !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: #fff !important;
}

/* The plan keeps its width; the form takes the room the window grows by,
   so opening and closing it never reflows the plan. */
body.pro-mode .rl-gap-window { display: flex; flex: 1 1 auto; min-height: 0; width: 100%; }

/* The switch in the header: Add appointment. */
body.pro-mode .business-team-drawer-layer.is-gap-window .rl-gap-add-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 0 7px 0 15px;
  border: 1px solid #e1e7e4;
  border-radius: 999px;
  background: #fff;
  color: #26332e;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 200ms ease;
}
body.pro-mode .business-team-drawer-layer.is-gap-window .rl-gap-add-switch:hover { border-color: #b9d8c9; box-shadow: 0 4px 12px rgb(22 32 28 / 7%); }
body.pro-mode .business-team-drawer-layer.is-gap-window .rl-gap-add-switch > b { order: 1; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
body.pro-mode .business-team-drawer-layer.is-gap-window .rl-gap-add-switch > span { order: 2; flex: none; width: 40px; height: 24px; }
body.pro-mode .business-team-drawer-layer.is-gap-window .rl-gap-add-switch > span::after { top: 3px; left: 3px; width: 18px; height: 18px; }
body.pro-mode .business-team-drawer-layer.is-gap-window .rl-gap-add-switch > input:checked + span::after { transform: translateX(16px); }

/* ------------------------------------------------------------- the plan --- */
body.pro-mode .rl-gap-plan {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  box-sizing: border-box;
  width: 500px;
  max-width: 100%;
  min-height: 0;
  padding: 0 28px 88px;
  background: #fff;
}
body.pro-mode .rl-gap-plan-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 6px 0 16px; }
body.pro-mode .rl-gap-plan-head > div { display: grid; gap: 2px; min-width: 0; }
body.pro-mode .rl-gap-plan-head > div > span { color: #7d8783; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
body.pro-mode .rl-gap-plan-head strong { overflow: hidden; color: #1e2a25; font-size: 15px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
body.pro-mode .rl-gap-plan-head small { color: #66726d; font-size: 12.5px; font-variant-numeric: tabular-nums; }
body.pro-mode .rl-gap-plan-add {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: 0 12px 0 9px;
  border: 1px solid #dfe5e2;
  border-radius: 999px;
  color: #26332e;
  background: #fff;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, transform 200ms cubic-bezier(.34, 1.56, .64, 1);
}
body.pro-mode .rl-gap-plan-add:not(:disabled):hover { border-color: #9fd3bd; background: #eef8f3; }
body.pro-mode .rl-gap-plan-add:not(:disabled):active { transform: scale(.95); }
/* No time left for another gap: it rests. */
body.pro-mode .rl-gap-plan-add:disabled { color: #a3aca8; cursor: default; }
body.pro-mode .rl-gap-plan-add > svg { width: 14px; height: 14px; }

body.pro-mode .rl-gap-track {
  position: relative;
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: 62px minmax(0, 1fr);
  min-height: 280px;
  padding: 10px 0;
}
body.pro-mode .rl-gap-ticks { position: relative; margin: 0; padding: 0; list-style: none; }
body.pro-mode .rl-gap-ticks > li { position: absolute; top: var(--gap-top); left: 0; right: 0; transform: translateY(-50%); }
body.pro-mode .rl-gap-ticks time { color: #8a948f; font-size: 11.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* The calendar's hour lines across the time. */
body.pro-mode .rl-gap-ticks > li::after {
  position: absolute;
  top: 50%;
  left: 62px;
  width: calc(500px - 62px - 56px);
  border-top: 1px solid #eef1ef;
  content: "";
  pointer-events: none;
}

body.pro-mode .rl-gap-lane {
  position: relative;
  min-height: 0;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
/* The stylist's rail, down the whole appointment, gaps and all. */
body.pro-mode .rl-gap-rail {
  position: absolute;
  z-index: 4;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  border-radius: 999px;
  background: var(--stylist-color, #b5482d);
  pointer-events: none;
}
body.pro-mode .rl-gap-segments { position: absolute; inset: 0; pointer-events: none; }
/* The time the stylist works: the calendar's appointment block. */
body.pro-mode .rl-gap-segment {
  position: absolute;
  top: var(--gap-top);
  right: 0;
  left: 0;
  display: grid;
  align-content: start;
  gap: 1px;
  height: var(--gap-height);
  box-sizing: border-box;
  overflow: hidden;
  padding: 7px 10px 6px 14px;
  border: 1px solid color-mix(in srgb, var(--category-color, #7f8794) 42%, #fff);
  border-left: 0;
  border-radius: 8px;
  background: color-mix(in srgb, var(--category-color, #7f8794) 17%, #fff);
  box-shadow: 0 3px 10px rgb(38 53 72 / 6%);
}
/* The block with the customer's name sizes its lines to itself. */
body.pro-mode .rl-gap-segment.is-named { container-type: size; }
body.pro-mode .rl-gap-segment > strong { overflow: hidden; min-width: 0; color: #1e2a25; font-size: 13px; font-weight: 700; line-height: 17px; text-overflow: ellipsis; white-space: nowrap; }
body.pro-mode .rl-gap-segment > span { overflow: hidden; min-width: 0; color: #4f5d58; font-size: 12px; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; }
/* Too short for both lines: the name alone; for a line at all: nothing. */
@container (max-height: 44px) { body.pro-mode .rl-gap-segment > span { display: none; } }
@container (max-height: 28px) { body.pro-mode .rl-gap-segment > strong { display: none; } }

/* Another gap already open in the appointment: open time, a press edits it. */
body.pro-mode .rl-gap-released {
  position: absolute;
  z-index: 1;
  top: var(--gap-top);
  right: 0;
  left: 8px;
  height: var(--gap-height);
  box-sizing: border-box;
  border: 1px dashed transparent;
  border-radius: 8px;
  container-type: size;
  transition: border-color 160ms ease, background-color 160ms ease;
}
body.pro-mode .rl-gap-released:hover { border-color: #b5c3bd; background: rgb(31 138 91 / 4%); }
/* Added or moved and not saved yet: its dashed edge stays. */
body.pro-mode .rl-gap-released.is-pending { border-color: color-mix(in srgb, var(--stylist-color, #6b56a8) 32%, #fff); background: #fff; }
body.pro-mode .rl-gap-released-pick { position: absolute; inset: 0; padding: 0; border: 0; border-radius: inherit; background: transparent; cursor: pointer; }

/* × in a gap's top-right corner (two or more gaps): takes it out. */
body.pro-mode .rl-gap-remove {
  position: absolute;
  z-index: 8;
  top: 5px;
  right: 5px;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  padding: 0;
  border: 1px solid #e3e8e5;
  border-radius: 999px;
  background: #fff;
  color: #6f7a76;
  box-shadow: 0 1px 3px rgb(22 32 28 / 8%);
  cursor: pointer;
  opacity: .9;
  transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease, opacity 140ms ease, transform 140ms ease;
}
/* Not the phone layout's 44px buttons: the gap itself is the target. */
body.pro-mode .rl-gap-remove:not(#rl) { width: 22px; height: 22px; min-width: 0; min-height: 0; flex: none; }
body.pro-mode .rl-gap-remove > svg { width: 13px; height: 13px; }
body.pro-mode .rl-gap-remove:hover { border-color: #f0c7c0; background: #fff4f2; color: #c0392b; opacity: 1; }
body.pro-mode .rl-gap-remove:active { transform: scale(.92); }
body.pro-mode .rl-gap-remove:focus-visible { outline: 2px solid color-mix(in srgb, var(--stylist-color, #6b56a8) 60%, #fff); outline-offset: 1px; }
/* A short gap: the × sits on its middle, smaller. */
@container (max-height: 32px) {
  body.pro-mode .rl-gap-remove:not(#rl) { top: 50%; width: 18px; height: 18px; transform: translateY(-50%); }
  body.pro-mode .rl-gap-remove:active { transform: translateY(-50%) scale(.92); }
  body.pro-mode .rl-gap-remove > svg { width: 11px; height: 11px; }
}
/* With an appointment drawn in the gap (on its right), the × keeps to the
   gap's own left part. */
body.pro-mode .rl-gap-slot.has-fill > .rl-gap-remove { right: auto; left: calc(46% - 38px); }
body.pro-mode .rl-gap-slot.has-fill.can-remove .rl-gap-slot-copy { width: calc(46% - 50px); }
body.pro-mode .rl-gap-slot.can-remove:not(.has-fill) .rl-gap-slot-copy { padding: 0 32px; }
body.pro-mode .rl-gap-plan:is(.is-dragging, .is-dragging-entry) .rl-gap-remove { opacity: 0; pointer-events: none; }

/* The gap being edited: open white time, its ends to drag. */
body.pro-mode .rl-gap-slot {
  --gap-handle-x: 50%;
  position: absolute;
  z-index: 2;
  top: var(--gap-top);
  right: 0;
  left: 8px;
  display: grid;
  height: var(--gap-height);
  min-height: 14px;
  box-sizing: border-box;
  place-items: center;
  border: 1.5px dashed color-mix(in srgb, var(--stylist-color, #6b56a8) 45%, #fff);
  border-radius: 8px;
  background: #fff;
  container-type: size;
  cursor: grab;
  outline: none;
  touch-action: none;
  transition: top 180ms cubic-bezier(.22, 1, .36, 1), height 180ms cubic-bezier(.22, 1, .36, 1), border-color 180ms ease, box-shadow 200ms ease;
}
body.pro-mode .rl-gap-slot.is-new { animation: rl-gap-slot-in 320ms cubic-bezier(.34, 1.56, .64, 1); }
body.pro-mode .rl-gap-slot:hover { border-color: color-mix(in srgb, var(--stylist-color, #6b56a8) 70%, #fff); }
body.pro-mode .rl-gap-slot:focus-visible { border-style: solid; box-shadow: 0 0 0 4px color-mix(in srgb, var(--stylist-color, #6b56a8) 18%, transparent); }
body.pro-mode .rl-gap-plan.is-dragging .rl-gap-slot { transition: none; cursor: grabbing; border-style: solid; border-color: color-mix(in srgb, var(--stylist-color, #6b56a8) 75%, #fff); box-shadow: 0 10px 26px rgb(22 32 28 / 10%); }
body.pro-mode .rl-gap-plan:is(.is-dragging, .is-dragging-entry), body.pro-mode .rl-gap-plan:is(.is-dragging, .is-dragging-entry) * { cursor: grabbing !important; }
body.pro-mode .rl-gap-plan:is(.is-dragging-start, .is-dragging-end, .is-dragging-entry-start, .is-dragging-entry-end), body.pro-mode .rl-gap-plan:is(.is-dragging-start, .is-dragging-end, .is-dragging-entry-start, .is-dragging-entry-end) * { cursor: ns-resize !important; }
body.pro-mode .rl-gap-slot-copy { display: grid; justify-items: center; gap: 1px; overflow: hidden; max-width: 100%; padding: 0 18px; pointer-events: none; }
body.pro-mode .rl-gap-slot-copy strong { color: #26332e; font-size: 12.5px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
body.pro-mode .rl-gap-slot-copy small { color: #7d8783; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
/* Too short for both lines: the time alone. */
@container (max-height: 34px) { body.pro-mode .rl-gap-slot-copy small { display: none; } }
/* With an appointment in it, that sits on the right of the gap; the gap's
   time and its handles keep the left. */
body.pro-mode .rl-gap-slot.has-fill { --gap-handle-x: 21%; place-items: start start; }
body.pro-mode .rl-gap-slot.has-fill .rl-gap-slot-copy { justify-items: start; width: 42%; padding: 8px 0 0 12px; }
body.pro-mode .rl-gap-slot.has-fill .rl-gap-slot-copy strong { overflow: hidden; max-width: 100%; text-overflow: ellipsis; }
/* Its ends: the calendar's handles, always in sight here. */
body.pro-mode .rl-gap-slot > i {
  position: absolute;
  z-index: 7;
  left: var(--gap-handle-x);
  width: 38px;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--stylist-color, #6b56a8) 82%, #312847);
  box-shadow: 0 0 0 2px #fff;
  cursor: ns-resize;
  transform: translateX(-50%);
  transition: width 160ms ease;
}
body.pro-mode .rl-gap-slot > i::before { position: absolute; inset: -10px -16px; content: ""; }
body.pro-mode .rl-gap-slot > i.is-start { top: -2.5px; }
body.pro-mode .rl-gap-slot > i.is-end { bottom: -2.5px; }
body.pro-mode .rl-gap-slot > i:hover, body.pro-mode .rl-gap-plan.is-dragging-start .rl-gap-slot > i.is-start, body.pro-mode .rl-gap-plan.is-dragging-end .rl-gap-slot > i.is-end { width: 50px; }

/* What goes into the gap, drawn in it as a calendar block on the gap's right
   (the gap's handles stay free on the left): moved by dragging it, resized
   by its own ends. Red when it runs past the gap. */
body.pro-mode .rl-gap-fill {
  position: absolute;
  z-index: 6;
  top: var(--gap-top);
  right: 4px;
  left: 46%;
  display: grid;
  align-content: start;
  height: var(--gap-height);
  min-height: 18px;
  box-sizing: border-box;
  padding: 6px 10px 6px 12px;
  border: 1px solid #b9d4ef;
  border-left: 3px solid #2e7db0;
  border-radius: 8px;
  background: #e1eefb;
  box-shadow: 0 4px 14px rgb(22 32 28 / 10%);
  cursor: grab;
  touch-action: none;
  transition: top 200ms cubic-bezier(.22, 1, .36, 1), height 200ms cubic-bezier(.22, 1, .36, 1), border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
  animation: rl-gap-fill-in 260ms cubic-bezier(.22, 1, .36, 1);
}
body.pro-mode .rl-gap-fill:hover { box-shadow: 0 6px 18px rgb(22 32 28 / 14%); }
body.pro-mode .rl-gap-plan:is(.is-dragging, .is-dragging-entry) .rl-gap-fill { transition: none; }
body.pro-mode .rl-gap-plan.is-dragging-entry .rl-gap-fill { box-shadow: 0 12px 28px rgb(22 32 28 / 18%); }
body.pro-mode .rl-gap-fill.is-break { border-color: #edd58b; border-left-color: #c27c0e; background: #fff4d6; }
body.pro-mode .rl-gap-fill.is-other { border-color: #d6c8ec; border-left-color: #7655a1; background: #f1ebfa; }
body.pro-mode .rl-gap-fill.is-outside { border-color: #efb4bb; border-left-color: #c2414b; background: #fbe2e4; }
/* The customer, the service under it, then the time: each on its own line
   while the block has room for it. A line that does not fit goes to a
   column past the block's edge, so it is left out whole; a long name takes
   two lines before the rest. */
body.pro-mode .rl-gap-fill {
  display: flex;
  flex-flow: column wrap;
  align-content: flex-start;
  justify-content: flex-start;
  column-gap: 40px;
  row-gap: 1px;
  overflow: hidden;
}
body.pro-mode .rl-gap-fill > :is(strong, .rl-gap-fill-service, small) { flex: none; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; pointer-events: none; }
body.pro-mode .rl-gap-fill > strong { display: -webkit-box; overflow: hidden; color: #1e2a25; font-size: 12px; font-weight: 650; line-height: 15px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: break-word; }
body.pro-mode .rl-gap-fill > .rl-gap-fill-service { overflow: hidden; color: #44524c; font-size: 11.5px; font-weight: 500; line-height: 14px; text-overflow: ellipsis; white-space: nowrap; }
body.pro-mode .rl-gap-fill > .rl-gap-fill-service:empty { display: none; }
body.pro-mode .rl-gap-fill > small { overflow: hidden; color: #4f5d58; font-size: 11px; font-variant-numeric: tabular-nums; line-height: 14px; text-overflow: ellipsis; white-space: nowrap; }
body.pro-mode .rl-gap-fill > i {
  position: absolute;
  left: 50%;
  width: 30px;
  height: 4px;
  border-radius: 999px;
  background: #2e7db0;
  box-shadow: 0 0 0 2px #fff;
  cursor: ns-resize;
  opacity: .85;
  transform: translateX(-50%);
  transition: width 160ms ease, opacity 160ms ease;
}
body.pro-mode .rl-gap-fill.is-outside > i { background: #c2414b; }
body.pro-mode .rl-gap-fill.is-break > i { background: #c27c0e; }
body.pro-mode .rl-gap-fill.is-other > i { background: #7655a1; }
body.pro-mode .rl-gap-fill > i::before { position: absolute; inset: -9px -14px; content: ""; }
body.pro-mode .rl-gap-fill > i.is-start { top: -2px; }
body.pro-mode .rl-gap-fill > i.is-end { bottom: -2px; }
body.pro-mode .rl-gap-fill > i:hover, body.pro-mode .rl-gap-plan.is-dragging-entry-start .rl-gap-fill > i.is-start, body.pro-mode .rl-gap-plan.is-dragging-entry-end .rl-gap-fill > i.is-end { width: 42px; opacity: 1; }

/* ------------------------------------------------------ double booking --- */
/* The window opens on a double booking: the appointment pushed to the left
   half of the lane (it slides there as the window opens, or as Gap time is
   switched off), the new appointment on the right half, moved and resized
   there in five-minute steps. The appointment's rail runs only its own time. */
body.pro-mode .rl-gap-plan.is-double .rl-dbl-existing {
  position: absolute;
  inset: 0 calc(50% + 4px) 0 0;
  animation: rl-dbl-push 420ms cubic-bezier(.22, 1, .36, 1) both;
}
body.pro-mode .rl-gap-plan.is-double .rl-gap-rail { top: var(--gap-top); bottom: auto; height: var(--gap-height); }
body.pro-mode .rl-gap-plan.is-double .rl-gap-segment { padding-right: 8px; }
body.pro-mode .rl-gap-plan.is-double .rl-dbl-new {
  right: 0;
  left: calc(50% + 4px);
  min-height: 26px;
  border: 1px solid #b9d4ef;
  border-left: 3px solid var(--stylist-color, #2e7db0);
  background: color-mix(in srgb, var(--stylist-color, #2e7db0) 9%, #fff);
  animation: rl-dbl-new-in 420ms cubic-bezier(.22, 1, .36, 1) 80ms both;
}
body.pro-mode .rl-gap-plan.is-double .rl-dbl-new > i { background: var(--stylist-color, #2e7db0); }
/* Nothing chosen yet: a dashed outline of where it goes. */
body.pro-mode .rl-gap-plan.is-double .rl-dbl-new.is-placeholder { border-style: dashed; border-left-style: solid; background: #fff; box-shadow: none; }
body.pro-mode .rl-gap-plan.is-double .rl-dbl-new.is-placeholder > strong { color: #66726d; font-weight: 600; }
body.pro-mode .rl-gap-plan.is-double .rl-dbl-new.is-break { border-color: #edd58b; border-left-color: #c27c0e; background: #fff4d6; }
body.pro-mode .rl-gap-plan.is-double .rl-dbl-new.is-other { border-color: #d6c8ec; border-left-color: #7655a1; background: #f1ebfa; }
body.pro-mode .rl-gap-plan.is-double .rl-dbl-new.is-break > i { background: #c27c0e; }
body.pro-mode .rl-gap-plan.is-double .rl-dbl-new.is-other > i { background: #7655a1; }
body.pro-mode .rl-gap-plan.is-double .rl-gap-ticks > li::after { width: calc(500px - 62px - 56px); }
/* How much of it falls in the appointment. */
body.pro-mode .rl-dbl-overlap {
  flex: none;
  align-self: center;
  padding: 4px 10px;
  border-radius: 999px;
  color: #2c6e57;
  background: #e6f3ec;
  font-size: 12px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* The stylist's other appointments at that time, in a middle column; where
   two already run at once the new appointment's column is hatched (a
   stylist has at most two at once), and the new one turns red over it. */
body.pro-mode .rl-gap-plan.is-double .rl-gap-lane.has-others .rl-dbl-existing { inset: 0 calc(66.666% + 4px) 0 0; }
body.pro-mode .rl-gap-plan.is-double .rl-gap-lane.has-others .rl-dbl-new { left: calc(66.666% + 4px); }
body.pro-mode .rl-gap-plan.is-double .rl-dbl-others { position: absolute; top: 0; bottom: 0; left: calc(33.333% + 2px); right: calc(33.333% + 2px); pointer-events: none; animation: rl-dbl-new-in 420ms cubic-bezier(.22, 1, .36, 1) 40ms both; }
body.pro-mode .rl-gap-plan.is-double .rl-dbl-other {
  position: absolute;
  top: var(--gap-top);
  right: 0;
  left: 0;
  display: flex;
  flex-flow: column wrap;
  align-content: flex-start;
  height: var(--gap-height);
  min-height: 18px;
  box-sizing: border-box;
  padding: 6px 8px 6px 10px;
  overflow: hidden;
  column-gap: 40px;
  border: 1px solid #d8dfdc;
  border-left: 3px solid var(--category-color, #8a9691);
  border-radius: 8px;
  background: #f1f4f3;
}
body.pro-mode .rl-gap-plan.is-double .rl-dbl-other > * { flex: none; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.pro-mode .rl-gap-plan.is-double .rl-dbl-other > strong { color: #2f3b36; font-size: 12px; font-weight: 650; line-height: 15px; }
body.pro-mode .rl-gap-plan.is-double .rl-dbl-other > span { color: #55625d; font-size: 11px; line-height: 14px; }
body.pro-mode .rl-gap-plan.is-double .rl-dbl-other > small { color: #6c7974; font-size: 10.5px; font-variant-numeric: tabular-nums; line-height: 14px; }
body.pro-mode .rl-gap-plan.is-double .rl-dbl-full-zones { position: absolute; top: 0; bottom: 0; right: 0; left: calc(50% + 4px); z-index: 1; pointer-events: none; }
body.pro-mode .rl-gap-plan.is-double .rl-gap-lane.has-others .rl-dbl-full-zones { left: calc(66.666% + 4px); }
body.pro-mode .rl-gap-plan.is-double .rl-dbl-full {
  position: absolute;
  top: var(--gap-top);
  right: 0;
  left: 0;
  height: var(--gap-height);
  box-sizing: border-box;
  padding: 5px 8px;
  overflow: hidden;
  border: 1px dashed rgb(194 65 75 / 38%);
  border-radius: 8px;
  background: repeating-linear-gradient(135deg, rgb(194 65 75 / 9%) 0 6px, transparent 6px 12px);
}
body.pro-mode .rl-gap-plan.is-double .rl-dbl-full > b { display: block; overflow: hidden; color: #a5333d; font-size: 10.5px; font-weight: 650; line-height: 13px; overflow-wrap: break-word; }
body.pro-mode .rl-gap-plan.is-double .rl-dbl-new.is-full { border-color: #efb4bb; border-left-color: #c2414b; background: #fbe2e4; }
body.pro-mode .rl-gap-plan.is-double .rl-dbl-new.is-full > i { background: #c2414b; }
/* Gap time: where another appointment shares the time, no gap goes. */
body.pro-mode .rl-gap-lane > .rl-gap-shared {
  position: absolute;
  top: var(--gap-top);
  right: 0;
  left: 0;
  z-index: 2;
  height: var(--gap-height);
  box-sizing: border-box;
  padding: 4px 8px;
  overflow: hidden;
  border-radius: 6px;
  background: repeating-linear-gradient(135deg, rgb(194 65 75 / 8%) 0 6px, transparent 6px 12px);
  pointer-events: none;
}
body.pro-mode .rl-gap-lane > .rl-gap-shared > b { float: right; color: #a5333d; font-size: 10.5px; font-weight: 650; }
@keyframes rl-dbl-push { from { inset: 0 0 0 0; } }
@keyframes rl-dbl-new-in { from { opacity: 0; transform: translateX(14px); } }

/* ------------------------------------------------------------ the entry --- */
/* Add booking's fields on the same white page as the plan: no boxes, the
   sections parted by hairlines, a gutter between the two. */
body.pro-mode .rl-gap-entry {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  animation: rl-gap-entry-in 420ms cubic-bezier(.22, 1, .36, 1) 60ms both;
}
body.pro-mode .rl-gap-entry.is-leaving { animation: rl-gap-entry-out 300ms cubic-bezier(.4, 0, .2, 1) both; pointer-events: none; }
body.pro-mode .business-team-drawer-layer.is-gap-window .rl-gap-entry > .business-team-drawer-form:not(#rl) { gap: 0 !important; padding: 6px 32px 104px 12px !important; background: #fff !important; }
body.pro-mode .business-team-drawer-layer.is-gap-window .rl-gap-entry .business-calendar-entry-types:not(#rl) { margin: 0 0 18px !important; }
body.pro-mode .business-team-drawer-layer.is-gap-window .rl-gap-entry .rl-panel-card:not(#rl) {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
body.pro-mode .business-team-drawer-layer.is-gap-window .rl-gap-entry .rl-panel-card + .rl-panel-card:not(#rl),
body.pro-mode .business-team-drawer-layer.is-gap-window .rl-gap-entry .rl-panel-card + :is(.business-team-drawer-form-error, [data-manual-booking-warnings]):not(#rl) { margin-top: 20px !important; padding-top: 20px !important; border-top: 1px solid #eef1ef !important; }
/* While the window opens or closes the form keeps its width and is uncovered
   or covered, instead of squeezing. */
@media (min-width: 1100px) {
  body.pro-mode .rl-gap-entry > .business-team-drawer-form { min-width: 540px; }
}

/* The bar under it all, the whole width of the window whether the form is
   open or not: Cancel and Save. (Add booking's own bar is sticky inside its
   form; here it is pinned to the window.) */
body.pro-mode .business-team-drawer-layer.is-gap-window .business-team-drawer-footer:not(#rl) {
  position: absolute !important;
  z-index: 8 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: auto !important;
  min-height: 72px !important;
  margin: 0 !important;
  padding: 14px 24px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  border-top: 1px solid #edf0ee !important;
  background: #fff !important;
  box-shadow: 0 -8px 22px rgb(22 32 28 / 5%) !important;
}
body.pro-mode .business-team-drawer-layer.is-gap-window .business-team-drawer-footer:not(#rl) > .business-team-drawer-footer-actions { display: flex !important; gap: 8px !important; margin-left: auto !important; }

/* One window giving way to the next (handOverTeamDrawer): the dimming stays,
   the leaving window fades under the one coming up. */
body.pro-mode .business-team-drawer-layer.is-handing-over { z-index: 1209 !important; pointer-events: none !important; }
body.pro-mode .business-team-drawer-layer.is-handing-over > .business-team-drawer-backdrop { opacity: 0 !important; animation: none !important; transition: none !important; }
body.pro-mode .business-team-drawer-layer.is-handing-over > .business-team-drawer { animation: rl-drawer-hand-over 240ms cubic-bezier(.4, 0, .2, 1) both !important; }
body.pro-mode .business-team-drawer-layer.is-handed.is-opening > .business-team-drawer-backdrop { animation: none !important; }
@keyframes rl-drawer-hand-over { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.985); } }

@keyframes rl-gap-slot-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes rl-gap-fill-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* Opacity only: a transform on the form's column would make it the bar's
   frame, and the bar would travel with it. */
@keyframes rl-gap-entry-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rl-gap-entry-out { from { opacity: 1; } to { opacity: 0; } }

/* A narrow screen: the window is the screen, the form under the plan. */
@media (max-width: 860px) {
  body.pro-mode .business-team-drawer-layer.is-gap-window > .business-team-drawer:not(#rl),
  body.pro-mode .business-team-drawer-layer.is-gap-window.is-adding > .business-team-drawer:not(#rl) { max-width: none !important; }
  body.pro-mode .rl-gap-window { flex-direction: column; overflow-y: auto; }
  body.pro-mode .rl-gap-plan { width: 100%; padding: 0 16px 12px; }
  body.pro-mode .business-team-drawer-layer:not(.is-adding) .rl-gap-plan { padding-bottom: 88px; }
  body.pro-mode .rl-gap-track { height: 320px; flex: none; }
  body.pro-mode .rl-gap-ticks > li::after { width: calc(100vw - 62px - 40px); }
  body.pro-mode .rl-gap-entry { flex: none; overflow: visible; }
  body.pro-mode .business-team-drawer-layer.is-gap-window .rl-gap-entry > .business-team-drawer-form:not(#rl) { padding: 18px 16px 104px !important; border-top: 1px solid #eef1ef; }
}

@media (prefers-reduced-motion: reduce) {
  body.pro-mode :is(.rl-gap-slot, .rl-gap-fill, .rl-gap-plan-add, .rl-gap-slot > i, .rl-gap-fill > i, .rl-gap-entry, .rl-dbl-existing) { animation: none !important; transition: none !important; }
  body.pro-mode .business-team-drawer-layer.is-gap-window > .business-team-drawer:not(#rl) { transition: none !important; }
  body.pro-mode .business-team-drawer-layer.is-handing-over { display: none !important; }
}

/* Double booking: the stylist and the day are the appointment's own, shown
   with a lock (renderDoubleBookingStylist, renderWhenField lockDate). */
body.pro-mode .business-team-drawer-layer.is-gap-window .rl-locked-field { display: grid; gap: 7px; }
body.pro-mode .business-team-drawer-layer.is-gap-window .rl-locked-label { color: #5d6964; font-size: 13px; font-weight: 600; }
body.pro-mode .business-team-drawer-layer.is-gap-window .rl-locked-value {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 14px 8px 8px;
  border: 1px solid #e4e9e7;
  border-radius: 14px;
  background: #f7f9f8;
  color: #1f2b26;
}
body.pro-mode .business-team-drawer-layer.is-gap-window .rl-locked-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  overflow: hidden;
  border-radius: 999px;
  color: #fff;
  background: var(--stylist-color, #5b6b64);
  font-size: 12px;
  font-weight: 700;
}
body.pro-mode .business-team-drawer-layer.is-gap-window .rl-locked-avatar > img { width: 100%; height: 100%; object-fit: cover; }
body.pro-mode .business-team-drawer-layer.is-gap-window .rl-locked-copy { display: grid; flex: 1 1 auto; min-width: 0; gap: 1px; }
body.pro-mode .business-team-drawer-layer.is-gap-window .rl-locked-copy > strong { overflow: hidden; font-size: 14.5px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
body.pro-mode .business-team-drawer-layer.is-gap-window .rl-locked-copy > small { color: #75817c; font-size: 12px; }
body.pro-mode .business-team-drawer-layer.is-gap-window .rl-lock-icon { flex: none; width: 16px; height: 16px; color: #8a9691; }
body.pro-mode .business-team-drawer-layer.is-gap-window .rl-when-field.is-locked {
  grid-template-columns: 18px minmax(0, 1fr) 16px;
  cursor: default;
  border-color: #e4e9e7 !important;
  background: #f7f9f8 !important;
}
body.pro-mode .business-team-drawer-layer.is-gap-window .rl-when-field.is-locked:hover { border-color: #e4e9e7 !important; background: #f7f9f8 !important; }