/* Calendar density is independent of the working-hours editor. The measured
   hour height in platform.js remains the source of truth for event geometry. */
body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page > .business-schedule-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  min-height: 72px !important;
  gap: 12px !important;
  padding: 12px 24px !important;
  border-bottom: 0;
}
body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page-header .business-schedule-title-row {
  min-width: 0;
  gap: 0;
}
body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page-header .rl-subtabs {
  min-width: 0;
  margin: 0;
}
body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page-header .rl-subtabs [role="tab"] {
  min-height: 44px !important;
  padding: 10px 2px !important;
  font-weight: 600 !important;
}
body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page-header .rl-subtabs [role="tab"]::after {
  bottom: 0;
}
body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page > .business-page-header.business-schedule-page-header .business-header-actions {
  align-self: center;
  flex: 0 0 auto;
  width: auto;
  margin: 0;
}
body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page-header .business-header-actions > button {
  min-height: 34px;
  padding: 6px 12px;
  font-size: 12px;
}

/* Both modes share one page origin, header, and control strip. */
body.pro-mode .dashboard-shell .dashboard-content:has(.business-schedule-page) {
  padding: 0 0 0 var(--dashboard-rail-width);
}
body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page {
  --calendar-time-axis-width: 48px;
  --calendar-day-header-height: 42px;
  --calendar-staff-column-width: 160px;
  --calendar-week-day-width: 88px;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
}
body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page .business-schedule-mode-stage {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
/* Working-hours editors retain their own card treatment below the shared top. */
body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page[data-schedule-mode="hours"] .business-calendar-surface {
  width: calc(100% - 48px);
  margin-inline: 24px;
}
body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page[data-schedule-mode="hours"] .business-schedule-configuration {
  margin: 18px 24px 32px;
}
body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page .business-calendar-toolbar {
  position: relative;
  z-index: 2;
  --calendar-control-height: 36px;
  flex: 0 0 auto;
  grid-template-columns: max-content max-content minmax(180px, 1fr) minmax(170px, 220px);
  gap: 8px;
  padding: 0 24px 12px;
  border-radius: 0;
  background: transparent;
}
/* Contain sticky grid headers below the toolbar's date picker. A child's
   z-index cannot escape its parent's stacking context. */
.business-schedule-page .business-calendar-surface {
  position: relative;
  isolation: isolate;
}
.business-calendar-scroll-controls {
  position: absolute;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  overflow: hidden;
}
body.pro-mode .business-calendar-scroll-arrow {
  position: absolute;
  top: 5px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  min-height: 0;
  padding: 0;
  border: 1px solid var(--pro-ui-line);
  border-radius: 50%;
  color: var(--pro-ui-accent-ink);
  background: #fff;
  box-shadow: 0 2px 8px #173e3020;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  cursor: pointer;
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms, background-color 160ms ease;
}
.business-calendar-scroll-arrow[data-direction="-1"] { left: calc(var(--calendar-time-axis-width, 48px) + 6px); }
.business-calendar-scroll-arrow[data-direction="1"] { right: calc(var(--calendar-scrollbar-width, 0px) + 6px); }
body.pro-mode .business-calendar-scroll-arrow[aria-hidden="true"] { opacity: 0; visibility: hidden; pointer-events: none; transform: scale(.85); }
body.pro-mode .business-calendar-scroll-arrow:hover { background: var(--pro-ui-accent-soft); }
.business-calendar-scroll-arrow svg { width: 17px; height: 17px; }
body.pro-mode .business-calendar-scroll-arrow:focus-visible { outline: 2px solid var(--pro-ui-accent-ink); outline-offset: 2px; }
body.pro-mode .dashboard-shell .dashboard-content .business-calendar-today {
  height: var(--calendar-control-height);
  min-height: 0;
  padding: 0 14px;
  border: 1px solid var(--pro-ui-accent-ink);
  border-radius: 9px;
  background: var(--pro-ui-accent-ink);
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 550;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease;
}
body.pro-mode .dashboard-shell .dashboard-content .business-calendar-today:hover { background: #174d3d; border-color: #174d3d; }
.business-calendar-today:focus-visible { outline: 2px solid var(--pro-ui-accent-ink); outline-offset: 2px; }
.business-calendar-selection-empty {
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: 240px;
  padding: 32px 24px;
  color: var(--pro-ui-ink);
  text-align: center;
}
.business-calendar-selection-empty p { margin: 8px 0 0; color: var(--pro-ui-muted); }
body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page .business-calendar-toolbar.has-interval-control {
  grid-template-columns: max-content max-content minmax(180px, 1fr) minmax(170px, 220px) 96px;
}
body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page .business-calendar-toolbar > * {
  grid-area: auto;
  min-width: 0;
}
body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page .business-calendar-view-switch {
  --calendar-segment-width: calc((184px - (var(--calendar-view-count) - 1) * 2px) / var(--calendar-view-count));
}
body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page .business-calendar-toolbar .prelook-select-trigger {
  min-height: var(--calendar-control-height) !important;
  padding-block: 0;
  font-size: 12px;
}
body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page .business-calendar-period-navigation {
  grid-column: 3;
  grid-template-columns: 32px minmax(0, 1fr) 32px;
}
body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page .business-calendar-today { grid-column: 1; }
body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page :is(.business-calendar-professional-control, .business-calendar-own-schedule) { grid-column: 4; }
body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page .business-calendar-interval-control { grid-column: 5; }
body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page .business-calendar-period-trigger {
  font-size: 13px;
}
body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page .business-schedule-mode-stage > :is(.business-booking-calendar-key, .business-working-hours-legend) {
  flex: 0 0 auto;
  margin: 0;
  padding: 0 24px 12px;
}
/* Group headings already identify each stylist and their calendar color. */
body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page:has(.business-week-staff-board) .business-booking-calendar-key .is-stylist {
  display: none;
}
body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page[data-schedule-mode="bookings"] .business-calendar-surface {
  min-height: 0;
  width: calc(100% - 20px);
  margin: 0 10px 10px;
  border: 1px solid var(--pro-ui-line) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page[data-schedule-mode="bookings"] {
  height: 100dvh;
}
body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page[data-schedule-mode="bookings"] .business-schedule-mode-stage,
body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page[data-schedule-mode="bookings"] .business-calendar-surface {
  flex: 1 1 0;
}
body.pro-mode .dashboard-shell .dashboard-content .business-calendar-surface[data-calendar-mode="bookings"] :is(.business-day-staff-calendar, .business-week-calendar) {
  height: 100%;
}
body.pro-mode .dashboard-shell .dashboard-content .business-calendar-surface.is-calendar-bootstrap > [inert] {
  height: 100%;
  min-height: 0;
}
body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page[data-schedule-mode="bookings"] .business-calendar-surface[data-calendar-mode="bookings"] [data-business-calendar-timeline-scroll] {
  height: 100%;
  max-height: none;
  scrollbar-color: #bfd1c9 #f7faf9;
}

/* A smaller gutter and staff row free room without changing time coordinates. */
body.pro-mode .dashboard-shell .dashboard-content .business-calendar-surface[data-calendar-mode="bookings"] .business-day-staff-board {
  grid-template-columns: var(--calendar-time-axis-width) minmax(calc(var(--staff-count) * var(--calendar-staff-column-width)), 1fr);
  min-width: calc(var(--calendar-time-axis-width) + var(--staff-count) * var(--calendar-staff-column-width));
}
body.pro-mode .dashboard-shell .dashboard-content .business-calendar-surface[data-calendar-mode="bookings"] :is(.business-day-staff-headers, .business-day-staff-columns) {
  grid-template-columns: repeat(var(--staff-count), minmax(var(--calendar-staff-column-width), 1fr));
}
body.pro-mode .dashboard-shell .dashboard-content .business-calendar-surface[data-calendar-mode="bookings"] .business-day-staff-header {
  gap: 7px;
  padding: 4px 9px;
}
body.pro-mode .dashboard-shell .dashboard-content .business-calendar-surface[data-calendar-mode="bookings"] .business-day-staff-header > :is(img, span) {
  width: 26px;
  height: 26px;
}
body.pro-mode .dashboard-shell .dashboard-content .business-calendar-surface[data-calendar-mode="bookings"] .business-day-staff-header > div { gap: 0; }
body.pro-mode .dashboard-shell .dashboard-content .business-calendar-surface[data-calendar-mode="bookings"] .business-day-staff-header strong { font-size: 12px; line-height: 16px; }
body.pro-mode .dashboard-shell .dashboard-content .business-calendar-surface[data-calendar-mode="bookings"] .business-day-staff-header small { font-size: 10px; line-height: 14px; }
/* Narrow-card text rules must not hide the appointment's resize control. */
body.pro-mode .dashboard-shell .dashboard-content .business-calendar-surface[data-calendar-mode="bookings"] .business-booking-event > .business-calendar-event-resize-handle {
  display: block;
}
body.pro-mode .dashboard-shell .dashboard-content .business-calendar-surface[data-calendar-mode="bookings"] :is(.business-day-staff-time-axis, .business-week-time-axis) > time {
  padding-right: 5px;
  font-size: 10px;
  white-space: nowrap;
}
body.pro-mode .dashboard-shell .dashboard-content .business-calendar-surface[data-calendar-mode="bookings"] .business-week-timeline-desktop:not(.is-grouped-stylists) {
  grid-template-columns: var(--calendar-time-axis-width) minmax(672px, 1fr);
  grid-template-rows: 36px auto;
}
body.pro-mode .dashboard-shell .dashboard-content .business-calendar-surface[data-calendar-mode="bookings"] .business-week-timeline-desktop:not(.is-grouped-stylists) > header {
  grid-template-columns: var(--calendar-time-axis-width) repeat(7, minmax(96px, 1fr));
  min-width: calc(var(--calendar-time-axis-width) + 672px);
  min-height: 36px;
}
body.pro-mode .dashboard-shell .dashboard-content .business-calendar-surface[data-calendar-mode="bookings"] .business-week-timeline-desktop:not(.is-grouped-stylists) .business-week-day-columns {
  grid-template-columns: repeat(7, minmax(96px, 1fr));
  min-width: 672px;
}

/* Each stylist owns a complete seven-day group. All three grid rows use the
   same tracks, inside one scroll container, so headers cannot drift. */
body.pro-mode .dashboard-shell .dashboard-content .business-calendar-surface[data-calendar-mode="bookings"] .business-week-timeline-desktop.is-grouped-stylists {
  display: block;
  width: 100%;
  min-width: 0;
}
.business-week-staff-board {
  --calendar-week-staff-header-height: 42px;
  --calendar-week-dates-height: 30px;
  display: grid;
  grid-template-columns: var(--calendar-time-axis-width) minmax(calc(var(--week-column-count) * var(--calendar-week-day-width)), 1fr);
  grid-template-rows: var(--calendar-week-staff-header-height) var(--calendar-week-dates-height) var(--week-height);
  grid-template-areas: "corner staff" "corner days" "axis columns";
  width: 100%;
  min-width: calc(var(--calendar-time-axis-width) + var(--week-column-count) * var(--calendar-week-day-width));
  background: #fff;
}
.business-week-staff-corner {
  grid-area: corner;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 45;
  display: grid;
  place-items: end center;
  padding-bottom: 9px;
  border-right: 1px solid var(--pro-ui-line);
  border-bottom: 1px solid var(--pro-ui-line);
  color: var(--pro-ui-muted);
  background: #fafcfb;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}
.business-week-staff-headers,
.business-week-staff-days {
  position: sticky;
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(var(--week-column-count), minmax(0, 1fr));
  background: #fafcfb;
}
.business-week-staff-headers { grid-area: staff; top: 0; }
.business-week-staff-days { grid-area: days; top: var(--calendar-week-staff-header-height); }
.business-week-staff-header {
  grid-column: span 7;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  gap: 8px;
  padding: 5px 12px;
  border-right: 1px solid #cedbd5;
  border-bottom: 1px solid var(--pro-ui-line);
  color: var(--pro-ui-ink);
  font-size: 12px;
}
.business-week-staff-header > :is(img, span) {
  display: grid;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  place-items: center;
  border-radius: 50%;
  color: var(--stylist-color, var(--pro-ui-accent-ink));
  background: var(--stylist-soft, var(--pro-ui-accent-soft));
  object-fit: cover;
}
.business-week-staff-header strong { font-size: 12px; font-weight: 600; }
.business-week-staff-days > .business-week-date-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  gap: 5px;
  margin: 0;
  padding: 3px;
  border: 0;
  border-right: 1px solid var(--pro-ui-line);
  border-bottom: 1px solid var(--pro-ui-line);
  border-radius: 0;
  background: #fafcfb;
  color: var(--pro-ui-muted);
  font: inherit;
  font-size: 11px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.business-week-staff-days > .business-week-date-button strong { color: var(--pro-ui-ink); font-size: 12px; font-weight: 600; }
.business-week-staff-days > .business-week-date-button.today { background: var(--pro-ui-accent-soft); box-shadow: inset 0 -2px #9ed4c2; }
.business-week-staff-days > .business-week-date-button:hover { background: var(--pro-ui-accent-soft); color: var(--pro-ui-accent-ink); }
.business-week-staff-days > .business-week-date-button:focus-visible { outline: 2px solid var(--pro-ui-accent-ink); outline-offset: -3px; }
.business-week-staff-days > .business-week-date-button:nth-child(7n) { border-right-color: #bdcfc5; }
body.pro-mode .dashboard-shell .dashboard-content .business-calendar-surface[data-calendar-mode="bookings"] .business-week-staff-board > .business-week-time-axis {
  grid-area: axis;
  z-index: 30;
  height: var(--week-height);
}
body.pro-mode .dashboard-shell .dashboard-content .business-calendar-surface[data-calendar-mode="bookings"] .business-week-staff-board > .business-week-day-columns {
  grid-area: columns;
  grid-template-columns: repeat(var(--week-column-count), minmax(0, 1fr));
  width: 100%;
  min-width: 0;
  max-width: none;
}
.business-week-staff-board > .business-week-day-columns > section:nth-child(7n) { border-right-color: #bdcfc5; }

@media (min-width: 761px) and (max-width: 1000px) {
  body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page .business-calendar-toolbar,
  body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page .business-calendar-toolbar.has-interval-control {
    grid-template-columns: max-content max-content minmax(0, 1fr) 100px;
  }
  body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page .business-calendar-period-navigation { grid-area: 1 / 3 / auto / -1; }
  body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page :is(.business-calendar-professional-control, .business-calendar-own-schedule) { grid-area: 2 / 1 / auto / 4; }
  body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page .business-calendar-interval-control { grid-area: 2 / 4; }
  body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page .business-calendar-toolbar:not(.has-interval-control) :is(.business-calendar-professional-control, .business-calendar-own-schedule) { grid-area: 2 / 1 / auto / -1; }
}
@media (max-width: 760px) {
  body.pro-mode .dashboard-shell .dashboard-content:has(.business-schedule-page) { padding: 0; }
  body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page > .business-schedule-page-header { padding: 12px 16px !important; }
  body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page > .business-page-header.business-schedule-page-header .business-header-actions > button { flex: 0 0 auto; width: auto; min-height: 44px; padding: 7px 10px; }
  body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page-header .rl-subtabs [role="tablist"] { gap: 14px !important; }
  body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page-header .rl-subtabs [role="tab"] { min-height: 44px !important; padding-block: 8px !important; font-size: 13px !important; }
  body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page[data-schedule-mode="bookings"] { height: calc(100dvh - var(--dashboard-dock-clearance, 108px) - env(safe-area-inset-bottom)); min-height: 430px; }
  body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page .business-calendar-toolbar,
  body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page .business-calendar-toolbar.has-interval-control {
    --calendar-control-height: 44px;
    grid-template-columns: 76px minmax(0, 1fr) 100px;
    gap: 6px;
    padding: 0 16px 12px;
  }
  body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page .business-calendar-view-switch { grid-area: 1 / 2 / auto / -1; --calendar-segment-width: calc((100% - 4px - (var(--calendar-view-count) - 1) * 2px) / var(--calendar-view-count)); }
  body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page .business-calendar-today { grid-area: 1 / 1; }
  body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page .business-calendar-toolbar:not(.has-interval-control) .business-calendar-view-switch { grid-column: 2 / -1; }
  body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page .business-calendar-interval-control { grid-area: 3 / 3; }
  body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page .business-calendar-period-navigation { grid-area: 2 / 1 / auto / -1; grid-template-columns: 44px minmax(0, 1fr) 44px; }
  body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page :is(.business-calendar-professional-control, .business-calendar-own-schedule) { grid-area: 3 / 1 / auto / 3; }
  body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page .business-calendar-toolbar:not(.has-interval-control) :is(.business-calendar-professional-control, .business-calendar-own-schedule) { grid-area: 3 / 1 / auto / -1; }
  body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page .business-calendar-view-switch > button { min-height: 0; }
  body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page .business-calendar-period-button { min-width: 0; min-height: 0; }
  .business-week-staff-board { --calendar-week-dates-height: 36px; }
  body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page .business-schedule-mode-stage > :is(.business-booking-calendar-key, .business-working-hours-legend) { padding-inline: 16px; }
  body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page[data-schedule-mode="hours"] .business-calendar-surface { width: calc(100% - 32px); margin-inline: 16px; }
  body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page[data-schedule-mode="hours"] .business-schedule-configuration { margin-inline: 16px; }
  body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page[data-schedule-mode="hours"] { padding-bottom: var(--dashboard-dock-clearance, 108px); }
}
@media (max-width: 480px) {
  body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page > .business-schedule-page-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 44px 44px;
    gap: 8px !important;
  }
  body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page > .business-page-header.business-schedule-page-header .business-header-actions {
    grid-area: 2 / 1;
    justify-self: end;
  }
}
@media (prefers-reduced-motion: reduce) {
  .business-week-staff-days > .business-week-date-button,
  body.pro-mode .business-calendar-scroll-arrow { transition: none; }
}

/* Availability reads from white working time to gray time off to darker,
   hatched salon closures. The semantic bands keep their existing geometry. */
body.pro-mode .dashboard-shell .dashboard-content .business-calendar-surface[data-calendar-mode="bookings"] :is(.business-day-staff-grid, .business-week-day, .business-week-day-column, .business-day-timeline-grid) { background-color: #fff; }
body.pro-mode .dashboard-shell .dashboard-content .business-calendar-surface[data-calendar-mode="bookings"] .business-calendar-past-time-shade { background: transparent; }
body.pro-mode .dashboard-shell .dashboard-content .business-calendar-surface[data-calendar-mode="bookings"] .business-booking-closure-band.is-stylist-not-working { background: #e7eaee; border-color: #d8dde3; }
body.pro-mode .dashboard-shell .dashboard-content .business-calendar-surface[data-calendar-mode="bookings"] .business-booking-closure-band.is-salon-closed {
  background: repeating-linear-gradient(-45deg, transparent 0 7px, rgb(62 76 88 / 9%) 7px 8px), #c7ced6;
  border-color: #b8c1cb;
}

/* One uninterrupted sequence of weeks, with a bounded, recycled month window. */
body.pro-mode .dashboard-shell .dashboard-content .business-calendar-surface[data-calendar-view="month"] { min-height: 0; overflow: hidden; }
body.pro-mode .dashboard-shell .dashboard-content .business-calendar-surface[data-calendar-mode="hours"][data-calendar-view="month"] { height: min(720px, 70dvh); flex: 0 0 auto; }
.business-calendar-month-scroll { position: relative; height: 100%; overflow: auto; overscroll-behavior: contain; overflow-anchor: none; scrollbar-color: #bfd1c9 #f7faf9; }
.business-calendar-month-weekdays { position: sticky; top: 0; z-index: 4; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); min-height: 34px; background: #f7f8f7; border-bottom: 1px solid var(--pro-ui-line); }
.business-calendar-month-weekdays > span { padding: 9px 6px; color: var(--pro-ui-muted); font-size: 11px; font-weight: 600; text-align: center; }
.business-calendar-month-stream { display: flex; flex-direction: column; }
body.pro-mode .dashboard-shell .dashboard-content .business-calendar-month-stream .business-month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; border: 0; border-radius: 0; min-width: 0; }
body.pro-mode .dashboard-shell .dashboard-content .business-calendar-month-stream .business-month-grid > section {
  height: 128px; min-height: 128px; margin: 0; padding: 10px; border: 0; border-right: 1px solid #dce2e5; border-bottom: 1px solid #dce2e5; border-radius: 0;
  background: #fff; color: var(--pro-ui-ink); opacity: 1;
  transition: background-color 240ms ease, color 240ms ease;
}
body.pro-mode .dashboard-shell .dashboard-content .business-calendar-month-stream .business-month-grid > section.muted { background: #e1e5e9; color: #707984; }
body.pro-mode .dashboard-shell .dashboard-content .business-calendar-month-stream .business-month-grid > section > header { min-height: 22px; margin-bottom: 8px; }
.business-calendar-month-stream .business-month-grid > section > header strong { font-size: 12px; }
.business-calendar-month-stream .business-month-grid > section.is-today > header strong { padding: 3px 6px; border-radius: 6px; background: var(--pro-ui-accent-ink); color: #fff; }
.business-calendar-month-stream .business-month-stylist-summary { max-height: 78px; overflow-y: auto; overscroll-behavior: auto; }
body.pro-mode .dashboard-shell .dashboard-content .business-calendar-month-stream .business-month-grid > section:focus-visible { outline: 2px solid var(--pro-ui-accent-ink); outline-offset: -3px; }
@media (max-width: 760px) {
  body.pro-mode .dashboard-shell .dashboard-content .business-calendar-month-stream .business-month-grid > section { height: 112px; min-height: 112px; padding: 5px; }
  .business-calendar-month-stream .business-month-grid > section > header strong { font-size: 10px; }
  .business-calendar-month-stream .business-month-stylist-summary { max-height: 70px; }
  body.pro-mode .dashboard-shell .dashboard-content .business-calendar-surface[data-calendar-mode="hours"][data-calendar-view="month"] .business-calendar-month-weekdays,
  body.pro-mode .dashboard-shell .dashboard-content .business-calendar-surface[data-calendar-mode="hours"][data-calendar-view="month"] .business-calendar-month-stream { min-width: 840px; }
}
@media (prefers-reduced-motion: reduce) {
  body.pro-mode .dashboard-shell .dashboard-content .business-calendar-month-stream .business-month-grid > section { transition: none; }
}
/* Empty days need no repeated labels or empty count badges. On a phone the
   date/count opens the day, where each appointment has room for its details. */
.business-calendar-month-stream .business-month-empty,
.business-calendar-month-stream .business-month-grid > section > header > span:empty { display: none; }
body.pro-mode .dashboard-shell .dashboard-content .business-calendar-month-stream .business-month-stylist-bookings { font-size: 11px; }
@media (max-width: 600px) {
  body.pro-mode .dashboard-shell .dashboard-content .business-calendar-month-stream .business-month-grid > section > header { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
  body.pro-mode .dashboard-shell .dashboard-content .business-calendar-month-stream .business-month-grid > section > header > span:not(:empty) { display: grid; place-items: center; min-width: 22px; height: 22px; font-size: 11px; }
  .business-calendar-surface[data-calendar-mode="bookings"] .business-calendar-month-stream .business-month-stylist-summary { display: none; }
}
/* Pointer feedback follows the pointer without an entrance delay. */
.business-calendar-hover-time { animation: none !important; transition: none !important; }

body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page .business-calendar-toolbar.has-interval-control { grid-template-columns: max-content max-content minmax(160px, 1fr) minmax(150px, 220px) 96px 88px; }
body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page .business-calendar-zoom-control { position: relative; grid-column: 6; min-width: 0; }
body.pro-mode .dashboard-shell .dashboard-content .business-calendar-zoom-trigger {
  display: flex; align-items: center; justify-content: space-between; width: 100%; height: var(--calendar-control-height); min-height: 0;
  gap: 8px; padding: 0 10px; border: 1px solid var(--pro-ui-line); border-radius: 9px; background: #fff; color: var(--pro-ui-ink); font: inherit; font-size: 12px; cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease;
}
.business-calendar-zoom-trigger > span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 7px; background: #f0f5f3; color: var(--pro-ui-muted); }
.business-calendar-zoom-trigger[aria-expanded="true"] { border-color: var(--pro-ui-accent-ink); }
.business-calendar-zoom-trigger:focus-visible { outline: 2px solid var(--pro-ui-accent-ink); outline-offset: 2px; }
.business-calendar-zoom-panel { position: absolute; z-index: 90; right: 0; top: calc(100% + 8px); width: 212px; padding: 10px 12px; border: 1px solid var(--pro-ui-line); border-radius: 12px; background: #fff; box-shadow: 0 12px 32px #142b2220; animation: calendar-zoom-open 160ms ease-out; }
.business-calendar-zoom-panel[hidden] { display: none; }
.business-calendar-zoom-panel > label { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.business-calendar-zoom-panel > div { display: flex; align-items: center; gap: 12px; color: var(--pro-ui-muted); }
body.pro-mode .dashboard-shell .dashboard-content .business-calendar-zoom-panel input[type="range"] { appearance: none; width: 100%; min-width: 0; height: 28px; min-height: 0; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; cursor: default; touch-action: none; }
.business-calendar-zoom-panel input::-webkit-slider-runnable-track { height: 5px; border-radius: 5px; background: #c9ddd4; }
.business-calendar-zoom-panel input::-webkit-slider-thumb { appearance: none; width: 20px; height: 20px; margin-top: -7.5px; border: 3px solid #fff; border-radius: 50%; background: var(--pro-ui-accent-ink); box-shadow: 0 1px 5px #16473150; }
.business-calendar-zoom-panel input::-moz-range-track { height: 5px; border-radius: 5px; background: #c9ddd4; }
.business-calendar-zoom-panel input::-moz-range-thumb { width: 16px; height: 16px; border: 3px solid #fff; border-radius: 50%; background: var(--pro-ui-accent-ink); }
.business-calendar-zoom-panel input:focus-visible { outline: 2px solid var(--pro-ui-accent-ink); outline-offset: 4px; border-radius: 8px; }
@keyframes calendar-zoom-open { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }

/* One current-time marker spans every day/stylist in the visible week. */
.business-calendar-surface[data-calendar-mode="bookings"][data-calendar-view="week"] .business-week-day-columns { position: relative; }
.business-calendar-surface[data-calendar-mode="bookings"][data-calendar-view="week"] [data-business-calendar-temporal-host] > .business-calendar-now-line { display: none; }
.business-calendar-now-line.is-week-wide { left: 0; right: 0; width: 100%; }
.business-calendar-now-line.is-week-wide time { position: sticky; left: 6px; }
@media (min-width: 761px) and (max-width: 1000px) {
  body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page .business-calendar-toolbar.has-interval-control { grid-template-columns: max-content max-content minmax(0, 1fr) 96px 88px; }
  body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page .business-calendar-zoom-control { grid-area: 2 / 5; }
}
@media (max-width: 760px) {
  body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page .business-calendar-toolbar.has-interval-control { grid-template-columns: 76px minmax(0, 1fr) 96px 76px; }
  body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page .business-calendar-zoom-control { grid-area: 3 / 4; }
  body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page .business-calendar-toolbar.has-interval-control .business-calendar-interval-control { grid-area: 3 / 3; }
}
@media (prefers-reduced-motion: reduce) { .business-calendar-zoom-panel { animation: none; } }
body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page .business-calendar-interval-control .prelook-select-trigger { padding-inline: 8px; gap: 4px; }

/* Pointer feedback follows the current interval immediately, independently of
   the layout animations used for dates, zoom, and appointment changes. */
body.pro-mode .business-calendar-surface [data-business-booking-slot] {
  transition: none !important;
}
body.pro-mode .business-calendar-hover-time {
  top: 0;
  transform: translateY(var(--calendar-hover-offset, 0));
  contain: layout style;
  transition: none !important;
  animation: none !important;
}
/* Names and services take priority over redundant times. Wrap between words;
   an unusually long unbroken word can wrap only when it cannot fit the lane. */
body.pro-mode .dashboard-shell .dashboard-content .business-calendar-surface[data-calendar-mode="bookings"] .business-week-event .business-booking-event-summary {
  display: flex !important;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 3px;
  text-align: left;
}
body.pro-mode .dashboard-shell .dashboard-content .business-calendar-surface[data-calendar-mode="bookings"] .business-week-event :is(.business-booking-event-summary > strong, .business-booking-event-service),
body.pro-mode .dashboard-shell .dashboard-content .business-calendar-surface[data-calendar-mode="bookings"] .business-week-block > strong {
  display: block !important;
  white-space: normal !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere;
  word-break: normal !important;
  -webkit-line-clamp: unset !important;
  max-height: none;
  line-height: 1.25;
  flex: none;
}
body.pro-mode .dashboard-shell .dashboard-content .business-calendar-surface[data-calendar-mode="bookings"] .business-week-event .business-booking-event-summary > strong {
  font-size: 11px;
}
body.pro-mode .dashboard-shell .dashboard-content .business-calendar-surface[data-calendar-mode="bookings"] .business-week-event .business-booking-event-service {
  font-size: 10px;
  color: #465565;
}
body.pro-mode .dashboard-shell .dashboard-content .business-calendar-surface[data-calendar-mode="bookings"] .business-week-event :is(.business-calendar-event-time, .business-booking-event-status) {
  display: none !important;
}
body.pro-mode .business-calendar-zoom-panel input[type="range"]:focus:not(:focus-visible) {
  outline: none !important;
}

body.pro-mode .dashboard-shell .dashboard-content .business-calendar-surface[data-calendar-mode="bookings"] .business-week-event:not(.has-booking-gap),
body.pro-mode .dashboard-shell .dashboard-content .business-calendar-surface[data-calendar-mode="bookings"] .business-booking-occupied-segment {
  padding-inline: 5px;
}

/* Appointment blocks read their status from the fill; the stylist keeps the left rail.
   Green: confirmed and completed. Blue: booked. Red: no-show. Yellow: running late. */
body.pro-mode .dashboard-shell .dashboard-content .business-calendar-surface[data-calendar-mode="bookings"] .business-week-event.business-booking-event.status-booked:not(.has-booking-gap),
body.pro-mode .dashboard-shell .dashboard-content .business-calendar-surface[data-calendar-mode="bookings"] .business-booking-event.status-booked .business-booking-occupied-segment {
  background: #e1eefb;
  border-top-color: #b9d4ef; border-right-color: #b9d4ef; border-bottom-color: #b9d4ef;
}
body.pro-mode .dashboard-shell .dashboard-content .business-calendar-surface[data-calendar-mode="bookings"] .business-week-event.business-booking-event.status-confirmed:not(.has-booking-gap),
body.pro-mode .dashboard-shell .dashboard-content .business-calendar-surface[data-calendar-mode="bookings"] .business-booking-event.status-confirmed .business-booking-occupied-segment {
  background: #dff4e9;
  border-top-color: #afdfc7; border-right-color: #afdfc7; border-bottom-color: #afdfc7;
}
/* Done: a quiet gray, apart from Confirmed's green. */
body.pro-mode .dashboard-shell .dashboard-content .business-calendar-surface[data-calendar-mode="bookings"] .business-week-event.business-booking-event.status-completed:not(.has-booking-gap),
body.pro-mode .dashboard-shell .dashboard-content .business-calendar-surface[data-calendar-mode="bookings"] .business-booking-event.status-completed .business-booking-occupied-segment {
  background: #eceef1;
  border-top-color: #cfd4da; border-right-color: #cfd4da; border-bottom-color: #cfd4da;
}
body.pro-mode .dashboard-shell .dashboard-content .business-calendar-surface[data-calendar-mode="bookings"] .business-week-event.business-booking-event.status-no_show:not(.has-booking-gap),
body.pro-mode .dashboard-shell .dashboard-content .business-calendar-surface[data-calendar-mode="bookings"] .business-booking-event.status-no_show .business-booking-occupied-segment {
  background: #fbe2e4;
  border-top-color: #efb4bb; border-right-color: #efb4bb; border-bottom-color: #efb4bb;
}
body.pro-mode .dashboard-shell .dashboard-content .business-calendar-surface[data-calendar-mode="bookings"] .business-week-event.business-booking-event.is-late:not(.has-booking-gap),
body.pro-mode .dashboard-shell .dashboard-content .business-calendar-surface[data-calendar-mode="bookings"] .business-booking-event.is-late .business-booking-occupied-segment {
  background: #fff0c2;
  border-top-color: #edd58b; border-right-color: #edd58b; border-bottom-color: #edd58b;
}

/* An appointment wears its service's category colour (Services); its status
   is the shape in its bottom right corner, Late and changes left of it. */
body.pro-mode .dashboard-shell .dashboard-content .business-calendar-surface[data-calendar-mode="bookings"] .business-week-event.business-booking-event.has-category-color:not(.has-booking-gap),
body.pro-mode .dashboard-shell .dashboard-content .business-calendar-surface[data-calendar-mode="bookings"] .business-booking-event.has-category-color .business-booking-occupied-segment {
  background: color-mix(in srgb, var(--category-color) 17%, #fff);
  border-top-color: color-mix(in srgb, var(--category-color) 42%, #fff);
  border-right-color: color-mix(in srgb, var(--category-color) 42%, #fff);
  border-bottom-color: color-mix(in srgb, var(--category-color) 42%, #fff);
}

/* A status change (booked to confirmed) fades the fill over slowly, while
   the card sends out a ring in its new colour (animateCalendarEventChanges).
   The rest repeats the cards' own transitions. */
body.pro-mode .dashboard-shell .dashboard-content .business-calendar-surface[data-calendar-mode="bookings"] .business-week-event.business-booking-event {
  transition:
    top 170ms cubic-bezier(0.22, 1, 0.36, 1),
    left 170ms cubic-bezier(0.22, 1, 0.36, 1),
    width 170ms cubic-bezier(0.22, 1, 0.36, 1),
    height 170ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 140ms ease,
    transform 170ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 170ms ease,
    background-color 1800ms cubic-bezier(.4,0,.2,1),
    border-color 1800ms cubic-bezier(.4,0,.2,1);
}
body.pro-mode .dashboard-shell .dashboard-content .business-calendar-surface[data-calendar-mode="bookings"] .business-booking-event .business-booking-occupied-segment {
  transition: background-color 1800ms cubic-bezier(.4,0,.2,1), border-color 1800ms cubic-bezier(.4,0,.2,1);
}

/* Month days the salon is closed say so beside the date. */
body.pro-mode .dashboard-shell .dashboard-content .business-calendar-month-stream .business-month-grid > section > header { display: flex; align-items: center; gap: 6px; }
body.pro-mode .dashboard-shell .dashboard-content .business-calendar-month-stream .business-month-grid > section > header > span:not(:empty) { order: 2; margin-left: auto; }
body.pro-mode .dashboard-shell .dashboard-content .business-calendar-month-stream .business-month-closed-flag { order: 1; min-width: 0; overflow: hidden; color: #c62828; font-size: 10px; font-style: normal; font-weight: 700; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
body.pro-mode .dashboard-shell .dashboard-content .business-calendar-month-stream .business-month-grid > section.muted .business-month-closed-flag { color: #d2807a; }
@media (max-width: 600px) {
  body.pro-mode .dashboard-shell .dashboard-content .business-calendar-month-stream .business-month-grid > section > header > span:not(:empty) { margin-left: 0; }
}

/* Drag a stylist header sideways to reorder the columns. Vertical touch still scrolls. */
body.pro-mode .dashboard-shell .dashboard-content .business-calendar-surface[data-calendar-mode="bookings"] :is(.business-day-staff-header, .business-week-staff-header)[data-calendar-stylist-header] {
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
body.pro-mode .dashboard-shell .dashboard-content .business-calendar-surface[data-calendar-mode="bookings"] :is(.business-day-staff-header, .business-week-staff-header)[data-calendar-stylist-header] > img { pointer-events: none; }
.business-calendar-surface.is-reordering-staff,
.business-calendar-surface.is-reordering-staff [data-calendar-stylist-header] { cursor: grabbing; }
.business-calendar-surface.is-reordering-staff :is(.business-day-staff-headers, .business-week-staff-headers, .business-week-staff-days, .business-day-staff-columns, .business-week-day-columns) > :not(.is-dragging-staff) {
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.business-calendar-surface :is(.business-day-staff-header, .business-week-staff-header).is-dragging-staff {
  position: relative;
  z-index: 45;
  background: #fff;
  box-shadow: 0 10px 24px rgba(22, 32, 28, 0.18);
}
.business-calendar-surface :is(.business-day-staff-columns, .business-week-day-columns, .business-week-staff-days) > .is-dragging-staff {
  position: relative;
  z-index: 2;
  box-shadow: 0 0 0 1px rgba(22, 32, 28, 0.08), 0 12px 28px rgba(22, 32, 28, 0.14);
}
.business-calendar-staff-ghosts { position: absolute; inset: 0; z-index: 70; overflow: hidden; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .business-calendar-surface.is-reordering-staff * { transition: none !important; }
}



/* Opening hours: every change glides, except under a thumb being dragged. */
body.pro-mode .dashboard-shell .business-routine-week-grid .business-hours-selection,
body.pro-mode .dashboard-shell .business-routine-week-grid .business-hours-salon-boundary,
body.pro-mode .dashboard-shell .business-routine-week-grid .business-hours-salon-break,
body.pro-mode .dashboard-shell .business-routine-week-grid .business-break-track-segment {
  transition:
    top 200ms cubic-bezier(0.22, 1, 0.36, 1),
    left 200ms cubic-bezier(0.22, 1, 0.36, 1),
    width 200ms cubic-bezier(0.22, 1, 0.36, 1),
    height 200ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    opacity 200ms ease;
}
body.pro-mode .dashboard-shell .business-schedule-configuration .business-hours-handle-time {
  transition: top 200ms cubic-bezier(0.22, 1, 0.36, 1), opacity 140ms ease;
}
body.pro-mode .dashboard-shell .business-routine-week-grid .business-hours-track:has(input[type="range"]:active) :is(.business-hours-selection, .business-break-track-segment, .business-hours-handle-time) { transition: none; }
body.pro-mode .dashboard-shell .business-routine-week-grid .business-hours-day { transition: background-color 240ms ease, opacity 240ms ease; }
body.pro-mode .dashboard-shell .business-routine-week-grid .business-hours-day :is(.business-hours-track, .business-hours-meta, .business-hours-breaks) { transition: opacity 240ms ease; }
body.pro-mode .dashboard-shell .business-routine-week-grid .business-hours-track { transition: border-color 200ms ease, background-color 200ms ease; }
body.pro-mode .dashboard-shell .business-routine-week-grid .business-hours-track:focus-within { border-color: #9ccdb9; }

/* Breaks: a card with a time pair, arriving and leaving with motion. */
body.pro-mode .dashboard-shell .business-routine-week-grid .business-hours-breaks { gap: 6px; }
body.pro-mode .dashboard-shell .business-routine-week-grid .business-hours-break {
  gap: 5px;
  max-height: 240px;
  padding: 7px 8px 8px;
  border-color: #dde6e2;
  border-radius: 9px;
  background: #fbfdfc;
  box-shadow: 0 1px 2px rgb(23 43 42 / 4%);
  transition: border-color 160ms ease, box-shadow 160ms ease, opacity 200ms ease, transform 200ms ease, max-height 240ms ease, padding 240ms ease, margin 240ms ease;
}
body.pro-mode .dashboard-shell .business-routine-week-grid .business-hours-break:focus-within { border-color: #9ccdb9; box-shadow: 0 0 0 3px rgb(131 189 169 / 14%); }
body.pro-mode .dashboard-shell .business-hours-break-heading > strong { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
body.pro-mode .dashboard-shell .business-hours-break-heading > strong::before { width: 7px; height: 7px; border-radius: 2px; background: #6951ad; content: ""; }
body.pro-mode .dashboard-shell .business-routine-week-grid .business-hours-break .business-break-remove { transition: color 140ms ease, background-color 140ms ease; }
body.pro-mode .dashboard-shell .business-hours-break.is-entering { animation: business-break-in 260ms cubic-bezier(0.22, 1, 0.36, 1); }
body.pro-mode .dashboard-shell .business-break-track-item.is-entering .business-break-track-segment { animation: business-break-segment-in 260ms cubic-bezier(0.22, 1, 0.36, 1); transform-origin: center; }
body.pro-mode .dashboard-shell .business-hours-break.is-leaving {
  overflow: hidden;
  max-height: 0;
  margin: -6px 0 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-color: transparent;
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  pointer-events: none;
}
body.pro-mode .dashboard-shell .business-break-track-item.is-leaving { opacity: 0; transition: opacity 180ms ease; }
body.pro-mode .dashboard-shell .business-hours-meta > .business-add-break { transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease; }
body.pro-mode .dashboard-shell .business-hours-meta > .business-add-break:hover:not(:disabled) { background: var(--pro-ui-accent, #ccebdc); }
body.pro-mode .dashboard-shell .business-hours-meta > .business-add-break:active:not(:disabled) { transform: scale(0.97); }
body.pro-mode .dashboard-shell .business-hours-meta > .business-add-break:disabled { opacity: 0.5; }
@keyframes business-break-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
@keyframes business-break-segment-in {
  from { opacity: 0; transform: scaleY(0.6); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.pro-mode .dashboard-shell .business-routine-week-grid :is(.business-hours-selection, .business-hours-salon-boundary, .business-hours-salon-break, .business-break-track-segment, .business-hours-day, .business-hours-break),
  body.pro-mode .dashboard-shell .business-hours-break.is-entering,
  body.pro-mode .dashboard-shell .business-break-track-item.is-entering .business-break-track-segment { transition: none; animation: none; }
}



/* Opening hours as a week list: one row per day with a switch, the times
   typed part by part, a slim rail that still drags, and breaks as chips. */
body.pro-mode .dashboard-shell .business-schedule-configuration .business-weekly-hours.business-routine-week-grid {
  --hours-day-column: 168px;
  --hours-row-gap: 18px;
  --hours-row-padding: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: 0;
  border: 1px solid var(--pro-ui-line, #dce7e3);
  border-radius: 14px;
  background: #fff;
  overflow: visible;
}
body.pro-mode .dashboard-shell .business-schedule-configuration .business-routine-week-grid > .business-hours-scale {
  position: relative;
  width: auto;
  height: 24px;
  margin: 0 var(--hours-row-padding) 0 calc(var(--hours-day-column) + var(--hours-row-gap) + var(--hours-row-padding));
  color: var(--pro-ui-muted, #697e76);
  font-size: 10px;
  font-weight: 500;
  pointer-events: none;
}
body.pro-mode .dashboard-shell .business-schedule-configuration .business-routine-week-grid > .business-hours-scale span { bottom: 5px; }
body.pro-mode .dashboard-shell .business-schedule-configuration .business-routine-week-grid > .business-hours-day {
  grid-template-columns: var(--hours-day-column) minmax(0, 1fr);
  grid-template-rows: auto;
  align-items: center;
  gap: var(--hours-row-gap);
  min-width: 0;
  padding: 12px var(--hours-row-padding);
  border-top: 1px solid var(--pro-ui-line, #dce7e3);
  border-left: 0;
  background: #fff;
  overflow: visible;
  transition: background-color 220ms ease;
}
body.pro-mode .dashboard-shell .business-schedule-configuration .business-routine-week-grid > .business-hours-day.is-closed { background: #fafcfb; }
body.pro-mode .dashboard-shell .business-schedule-configuration .business-routine-week-grid > .business-hours-day.is-salon-closed {
  background: repeating-linear-gradient(-45deg, rgba(83, 75, 88, 0.035) 0 8px, rgba(83, 75, 88, 0.09) 8px 9px), #f4f3f4;
}
body.pro-mode .dashboard-shell .business-schedule-configuration .business-routine-week-grid > .business-hours-day.is-stylist-off { background: #fffaf1; }
body.pro-mode .dashboard-shell .business-schedule-configuration .business-hours-day-label { display: block; min-height: 0; }
body.pro-mode .dashboard-shell .business-schedule-configuration .business-hours-day-title {
  display: grid;
  gap: 7px;
  justify-items: start;
}
body.pro-mode .dashboard-shell .business-schedule-configuration .business-hours-day-title > strong { color: var(--pro-ui-ink, #233832); font-size: 13px; font-weight: 600; }
body.pro-mode .dashboard-shell .business-schedule-configuration .business-hours-day-label small { color: var(--pro-ui-muted, #697e76); font-size: 11px; }
body.pro-mode .dashboard-shell .business-schedule-configuration .business-weekday-short { display: none; }
/* The switch: on and green while the day is open. */
body.pro-mode .dashboard-shell .business-schedule-configuration .business-closed-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  min-width: 0;
  min-height: 22px;
  padding: 0;
  color: var(--pro-ui-muted, #697e76);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
body.pro-mode .dashboard-shell .business-schedule-configuration .business-closed-toggle > input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
body.pro-mode .dashboard-shell .business-schedule-configuration .business-closed-toggle > input:disabled { cursor: not-allowed; }
body.pro-mode .dashboard-shell .business-schedule-configuration .business-closed-toggle-track {
  position: relative;
  flex: 0 0 32px;
  width: 32px;
  height: 18px;
  border-radius: 999px;
  background: var(--pro-ui-accent-ink, #286b56);
  transition: background-color 180ms ease;
}
body.pro-mode .dashboard-shell .business-schedule-configuration .business-closed-toggle-track::after {
  position: absolute;
  top: 2px;
  left: 16px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgb(23 43 42 / 25%);
  content: "";
  transition: left 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
body.pro-mode .dashboard-shell .business-schedule-configuration .business-closed-toggle:has(> input:checked) .business-closed-toggle-track { background: #c3cdc8; }
body.pro-mode .dashboard-shell .business-schedule-configuration .business-closed-toggle:has(> input:checked) .business-closed-toggle-track::after { left: 2px; }
body.pro-mode .dashboard-shell .business-schedule-configuration .business-closed-toggle:has(> input:focus-visible) .business-closed-toggle-track { outline: 2px solid #83bda9; outline-offset: 2px; }
body.pro-mode .dashboard-shell .business-schedule-configuration .business-closed-toggle:has(> input:disabled) { opacity: 0.6; }
body.pro-mode .dashboard-shell .business-schedule-configuration .business-closed-toggle-state > .is-closed,
body.pro-mode .dashboard-shell .business-schedule-configuration .business-closed-toggle:has(> input:checked) .business-closed-toggle-state > .is-open { display: none; }
body.pro-mode .dashboard-shell .business-schedule-configuration .business-closed-toggle:has(> input:checked) .business-closed-toggle-state > .is-closed { display: inline; }
body.pro-mode .dashboard-shell .business-schedule-configuration .business-closed-toggle:not(:has(> input:checked)) .business-closed-toggle-state { color: var(--pro-ui-accent-ink, #286b56); }
/* The editor: typed times and the add-break on one line, the rail below, chips last. */
body.pro-mode .dashboard-shell .business-schedule-configuration .business-hours-editor { display: grid; gap: 8px; min-width: 0; align-content: center; }
body.pro-mode .dashboard-shell .business-schedule-configuration .business-hours-meta.business-hours-times {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
body.pro-mode .dashboard-shell .business-schedule-configuration .business-hours-times-dash { color: var(--pro-ui-muted, #697e76); font-size: 13px; }
body.pro-mode .dashboard-shell .business-schedule-configuration .business-hours-meta.business-hours-times > .business-add-break { margin-left: auto; min-height: 28px; padding: 3px 9px; border-radius: 999px; }
body.pro-mode .dashboard-shell .business-schedule-configuration .business-hours-meta output[data-business-hours-output] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
/* The rail: a slim bar the day sits on, with its ends still draggable. */
body.pro-mode .dashboard-shell .business-schedule-configuration .business-hours-track { position: relative; height: 30px; min-height: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; }
body.pro-mode .dashboard-shell .business-schedule-configuration .business-hours-rail { top: 0; right: 0; bottom: auto; left: 0; width: auto; height: 30px; overflow: visible; border: 0; background: transparent; transform: none; }
body.pro-mode .dashboard-shell .business-schedule-configuration .business-hours-rail::before {
  top: 11px;
  right: 0;
  left: 0;
  width: auto;
  height: 8px;
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), rgba(97, 86, 106, 0.16) calc(25% - 1px), rgba(97, 86, 106, 0.16) 25%), #e9efec;
}
body.pro-mode .dashboard-shell .business-schedule-configuration .business-hours-selection {
  top: 11px;
  right: auto;
  bottom: auto;
  left: var(--hours-start);
  width: calc(var(--hours-end) - var(--hours-start));
  height: 8px;
  min-height: 0;
  border: 0;
  border-radius: 999px;
  background: var(--pro-ui-accent-ink, #286b56);
  box-shadow: none;
}
body.pro-mode .dashboard-shell .business-schedule-configuration .business-routine-week-grid.is-stylist-routine .business-hours-selection { background: #6f55b5; }
body.pro-mode .dashboard-shell .business-schedule-configuration .business-routine-week-grid > .business-hours-day.is-stylist-off .business-hours-selection { background: #b2a38f; }
body.pro-mode .dashboard-shell .business-schedule-configuration .business-routine-week-grid > .business-hours-day.is-salon-closed .business-hours-selection { background: #aaa4ad; }
body.pro-mode .dashboard-shell .business-schedule-configuration .business-hours-selection::before,
body.pro-mode .dashboard-shell .business-schedule-configuration .business-hours-selection::after {
  position: absolute;
  top: 50%;
  z-index: 5;
  width: 16px;
  height: 16px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: inherit;
  box-shadow: 0 1px 4px rgb(23 43 42 / 25%);
  content: "";
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: transform 140ms ease;
}
body.pro-mode .dashboard-shell .business-schedule-configuration .business-hours-selection::before { left: 0; }
body.pro-mode .dashboard-shell .business-schedule-configuration .business-hours-selection::after { left: 100%; }
body.pro-mode .dashboard-shell .business-schedule-configuration .business-hours-selection-label { display: none !important; }
body.pro-mode .dashboard-shell .business-schedule-configuration .business-hours-track:has(> input[data-business-hours-range="start"]:active) .business-hours-selection::before,
body.pro-mode .dashboard-shell .business-schedule-configuration .business-hours-track:has(> input[data-business-hours-range="end"]:active) .business-hours-selection::after { transform: translate(-50%, -50%) scale(1.2); }
body.pro-mode .dashboard-shell .business-schedule-configuration .business-hours-track > input[type="range"] {
  top: 0;
  left: 0;
  width: 100%;
  height: 30px;
  min-height: 0;
  transform: none;
}
body.pro-mode .dashboard-shell .business-schedule-configuration .business-hours-track input[type="range"]::-webkit-slider-runnable-track { height: 8px; }
body.pro-mode .dashboard-shell .business-schedule-configuration .business-hours-track input[type="range"]::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  margin-top: -7px;
  border: 0;
  background: transparent;
  box-shadow: none;
}
body.pro-mode .dashboard-shell .business-schedule-configuration .business-hours-track input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 0;
  background: transparent;
  box-shadow: none;
}
body.pro-mode .dashboard-shell .business-schedule-configuration .business-hours-track:has(> input[data-business-hours-range="start"]:focus-visible) .business-hours-selection::before,
body.pro-mode .dashboard-shell .business-schedule-configuration .business-hours-track:has(> input[data-business-hours-range="end"]:focus-visible) .business-hours-selection::after { outline: 2px solid #83bda9; outline-offset: 2px; }
body.pro-mode .dashboard-shell .business-schedule-configuration .business-hours-handle-time { top: -24px; left: 50%; transform: translateX(-50%); }
body.pro-mode .dashboard-shell .business-schedule-configuration .business-hours-handle-time.is-start { left: clamp(40px, var(--hours-start), calc(100% - 40px)); }
body.pro-mode .dashboard-shell .business-schedule-configuration .business-hours-handle-time.is-end { left: clamp(40px, var(--hours-end), calc(100% - 40px)); }
body.pro-mode .dashboard-shell .business-schedule-configuration .business-hours-salon-boundary {
  position: absolute;
  top: 11px;
  left: var(--salon-hours-start);
  z-index: 0;
  width: calc(var(--salon-hours-end) - var(--salon-hours-start));
  height: 8px;
  border: 1px dashed rgba(42, 146, 117, 0.55);
  border-radius: 999px;
  background: rgba(215, 242, 233, 0.6);
  pointer-events: none;
}
body.pro-mode .dashboard-shell .business-schedule-configuration .business-hours-salon-break {
  position: absolute;
  top: 11px;
  left: var(--salon-break-start);
  z-index: 2;
  width: calc(var(--salon-break-end) - var(--salon-break-start));
  height: 8px;
  border-radius: 999px;
  background: rgba(83, 74, 90, 0.22);
  pointer-events: none;
}
/* A break on the rail is a violet bar over the hours: a dot at each end to
   drag, and a body that moves whole. */
body.pro-mode .dashboard-shell .business-schedule-configuration .business-break-track-segment {
  top: 11px;
  height: 8px;
  overflow: visible;
  border: 0;
  border-radius: 999px;
  color: transparent;
  background: #6951ad;
  box-shadow: 0 0 0 2px #fff;
  font-size: 0;
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
}
body.pro-mode .dashboard-shell .business-schedule-configuration .business-break-track-segment::before,
body.pro-mode .dashboard-shell .business-schedule-configuration .business-break-track-segment::after {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #6951ad;
  box-shadow: 0 1px 3px rgb(47 34 72 / 30%);
  content: "";
  transform: translate(-50%, -50%);
  pointer-events: none;
}
body.pro-mode .dashboard-shell .business-schedule-configuration .business-break-track-segment::before { left: 0; }
body.pro-mode .dashboard-shell .business-schedule-configuration .business-break-track-segment::after { left: 100%; }
body.pro-mode .dashboard-shell .business-schedule-configuration .business-break-track-item.is-moving .business-break-track-segment { cursor: grabbing; transition: none; box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgb(105 81 173 / 18%); }
body.pro-mode .dashboard-shell .business-schedule-configuration .business-break-track-item:has(input:focus-visible) .business-break-track-segment { box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgb(105 81 173 / 22%); }
body.pro-mode .dashboard-shell .business-schedule-configuration .business-break-track-item.is-moving .business-break-handle-label { opacity: 1; }
body.pro-mode .dashboard-shell .business-schedule-configuration .business-break-track-item input[type="range"] { top: 0; height: 30px; min-height: 0; }
body.pro-mode .dashboard-shell .business-schedule-configuration .business-break-track-item input[type="range"]::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -5px; border: 0; background: transparent; box-shadow: none; }
body.pro-mode .dashboard-shell .business-schedule-configuration .business-break-track-item input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border: 0; background: transparent; box-shadow: none; }
body.pro-mode .dashboard-shell .business-schedule-configuration .business-break-track-item input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 0; }
body.pro-mode .dashboard-shell .business-schedule-configuration .business-break-track-item input[type="range"]:focus-visible::-moz-range-thumb { outline: 0; }
body.pro-mode .dashboard-shell .business-schedule-configuration .business-break-handle-label { top: -24px; }
/* Break chips: one soft pill, its times plain text until a part is edited. */
body.pro-mode .dashboard-shell .business-schedule-configuration .business-hours-breaks { display: flex; flex-wrap: wrap; gap: 6px; }
body.pro-mode .dashboard-shell .business-schedule-configuration .business-hours-breaks:empty { display: none; }
body.pro-mode .dashboard-shell .business-schedule-configuration .business-routine-week-grid .business-hours-break {
  display: inline-flex;
  grid-template-columns: none;
  grid-template-rows: none;
  align-items: center;
  gap: 0;
  height: 28px;
  max-width: 340px;
  max-height: none;
  margin: 0;
  padding: 0 3px 0 11px;
  border: 0;
  border-radius: 999px;
  color: #4a3f6b;
  background: #f1edfa;
  box-shadow: none;
  transition: background-color 160ms ease, opacity 200ms ease, transform 200ms ease, max-width 220ms ease, padding 220ms ease, margin 220ms ease;
}
body.pro-mode .dashboard-shell .business-schedule-configuration .business-routine-week-grid .business-hours-break:focus-within { background: #ebe5f8; box-shadow: none; }
body.pro-mode .dashboard-shell .business-schedule-configuration .business-hours-break-heading { display: inline-flex; align-items: center; min-height: 0; margin-right: 7px; }
body.pro-mode .dashboard-shell .business-schedule-configuration .business-hours-break-heading > strong { display: inline-flex; align-items: center; gap: 5px; color: #6a5c93; font-size: 11px; font-weight: 600; line-height: 1; }
body.pro-mode .dashboard-shell .business-schedule-configuration .business-hours-break-heading > strong::before { width: 6px; height: 6px; border-radius: 50%; background: #7a63c4; content: ""; }
body.pro-mode .dashboard-shell .business-schedule-configuration .business-hours-break-time-fields { display: inline-flex; align-items: center; gap: 0; grid-template-columns: none; }
body.pro-mode .dashboard-shell .business-schedule-configuration .business-hours-break-separator { display: inline; margin: 0 3px; color: #9a90b8; font-size: 11px; line-height: 1; }
/* The page's icon-button ring is !important; the chip's × is bare until hovered. */
body.pro-mode .dashboard-shell .business-schedule-configuration .business-routine-week-grid .business-hours-break .business-break-remove { width: 22px; min-width: 22px !important; height: 22px; min-height: 22px !important; margin-left: 4px; padding: 0; border: 0 !important; border-radius: 50%; color: #7a6fa0; background: transparent !important; box-shadow: none; }
body.pro-mode .dashboard-shell .business-schedule-configuration .business-routine-week-grid .business-hours-break .business-break-remove:hover { color: #a24242; background: #fff !important; }
@media (pointer: coarse) {
  body.pro-mode .dashboard-shell .business-schedule-configuration .business-routine-week-grid .business-hours-break .business-break-remove { width: 30px; min-width: 30px !important; height: 30px; min-height: 30px !important; }
}
/* A removed chip folds shut so its neighbours slide into place. */
body.pro-mode .dashboard-shell .business-schedule-configuration .business-hours-break.is-leaving { max-width: 0; max-height: none; margin: 0 -6px 0 0 !important; padding: 0 !important; opacity: 0; overflow: hidden; transform: scale(0.92); }
/* Closed rows keep the switch live and quiet the rest. */
body.pro-mode .dashboard-shell .business-schedule-configuration .business-hours-day.is-closed :is(.business-hours-track, .business-hours-meta, .business-hours-breaks) { opacity: 0.4; pointer-events: none; }
body.pro-mode .dashboard-shell .business-schedule-configuration .business-hours-day.is-closed .business-hours-meta > .business-add-break { opacity: 0.6; }
@media (max-width: 760px) {
  body.pro-mode .dashboard-shell .business-schedule-configuration .business-routine-week-grid > .business-hours-scale { display: none; }
  body.pro-mode .dashboard-shell .business-schedule-configuration .business-routine-week-grid > .business-hours-day { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  body.pro-mode .dashboard-shell .business-schedule-configuration .business-hours-day-title { grid-auto-flow: column; align-items: center; justify-content: space-between; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  body.pro-mode .dashboard-shell .business-schedule-configuration :is(.business-closed-toggle-track, .business-closed-toggle-track::after, .business-hours-selection::before, .business-hours-selection::after) { transition: none; }
}


/* ── Working hours board ──────────────────────────────────────────────────
   One row per actor, one column per day. A cell is a shift chip: the hours
   as text with a thin span under them drawn against the salon's own day, so
   a short day or a late start shows at a glance. A chip opens a card beside
   it; the board itself never changes shape to edit. */
body.pro-mode .dashboard-shell .hours-board {
  --hours-board-actor: 200px;
  --hours-board-columns: var(--hours-board-actor) repeat(7, minmax(0, 1fr));
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  overflow: auto;
  border: 1px solid var(--pro-ui-line, #dce7e3);
  border-radius: 16px;
  background: #fff;
}
body.pro-mode .dashboard-shell .hours-board-head,
body.pro-mode .dashboard-shell .hours-board-row {
  display: grid;
  grid-template-columns: var(--hours-board-columns);
  min-width: 760px;
}
body.pro-mode .dashboard-shell .hours-board-head {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #fff;
  border-bottom: 1px solid var(--pro-ui-line, #dce7e3);
}
body.pro-mode .dashboard-shell .hours-board-corner { padding: 12px 16px; }
body.pro-mode .dashboard-shell .hours-board-day {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 3px;
  padding: 11px 6px 9px;
  color: var(--pro-ui-muted, #697e76);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
body.pro-mode .dashboard-shell .hours-board-day > strong {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  color: var(--pro-ui-ink, #233832);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}
body.pro-mode .dashboard-shell .hours-board-day.is-today > strong { color: #fff; background: var(--pro-ui-accent-ink, #286b56); }
body.pro-mode .dashboard-shell .hours-board-day.is-closed-day { color: #b2acb8; }
body.pro-mode .dashboard-shell .hours-board-day.is-closed-day:not(.is-today) > strong { color: #8c8692; }
body.pro-mode .dashboard-shell .hours-board-row { border-top: 1px solid #edf1ef; }
body.pro-mode .dashboard-shell .hours-board-row:first-of-type { border-top: 0; }
body.pro-mode .dashboard-shell .hours-board-row.is-salon { background: #f6fbf8; }
body.pro-mode .dashboard-shell .hours-board-actor {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 9px 14px;
}
body.pro-mode .dashboard-shell .hours-board-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  overflow: hidden;
  border-radius: 50%;
  color: var(--pro-ui-accent-ink, #286b56);
  background: #edf3f0;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--stylist-color, transparent) 35%, transparent);
}
body.pro-mode .dashboard-shell .hours-board-avatar > img { width: 100%; height: 100%; object-fit: cover; }
body.pro-mode .dashboard-shell .hours-board-avatar > svg { width: 17px; height: 17px; }
body.pro-mode .dashboard-shell .hours-board-actor-text { display: grid; gap: 2px; min-width: 0; }
body.pro-mode .dashboard-shell .hours-board-actor-text > strong {
  overflow: hidden;
  color: var(--pro-ui-ink, #233832);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}
body.pro-mode .dashboard-shell .hours-board-actor-text > small {
  overflow: hidden;
  color: var(--pro-ui-muted, #697e76);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}
body.pro-mode .dashboard-shell .hours-board-slot {
  display: grid;
  align-items: center;
  min-width: 0;
  padding: 6px 5px;
  border-left: 1px solid #edf1ef;
}
body.pro-mode .dashboard-shell .hours-board-slot.is-closed-day {
  background: repeating-linear-gradient(-45deg, rgba(83, 75, 88, 0.035) 0 6px, rgba(83, 75, 88, 0.085) 6px 7px);
}
body.pro-mode .dashboard-shell .hours-cell { container-type: inline-size; position: relative; display: grid; min-width: 0; }

/* The chip. */
body.pro-mode .dashboard-shell .hours-shift {
  position: relative;
  display: grid;
  gap: 6px;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  margin: 0;
  padding: 8px 10px 7px;
  border: 0;
  border-radius: 12px;
  color: color-mix(in srgb, var(--stylist-color, #2f946c) 78%, #1f2a27);
  background: color-mix(in srgb, var(--stylist-soft, #e4f3ec) 72%, #fff);
  box-shadow: inset 0 0 0 1px transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
  transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, color 160ms ease;
}
body.pro-mode .dashboard-shell .hours-shift.is-salon { color: #1f5a47; background: #e2f3ea; }
body.pro-mode .dashboard-shell .hours-shift:hover:not(:disabled) {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--stylist-color, #2f946c) 38%, #fff);
  transform: translateY(-1px);
}
body.pro-mode .dashboard-shell .hours-shift:focus-visible { outline: 0; box-shadow: 0 0 0 2px #fff, 0 0 0 4px color-mix(in srgb, var(--stylist-color, #2f946c) 60%, #fff); }
body.pro-mode .dashboard-shell .hours-shift.is-editing,
body.pro-mode .dashboard-shell .hours-shift.is-editing:hover {
  transform: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--stylist-color, #2f946c) 55%, #fff), 0 8px 20px rgb(23 43 42 / 12%);
}
body.pro-mode .dashboard-shell .hours-shift:disabled { cursor: default; }
body.pro-mode .dashboard-shell .hours-shift-time {
  display: block;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
body.pro-mode .dashboard-shell .hours-shift-span {
  display: block;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--stylist-color, #2f946c) 14%, #fff);
}
body.pro-mode .dashboard-shell .hours-shift-span > i {
  display: block;
  width: calc(var(--to, 100%) - var(--from, 0%));
  height: 100%;
  margin-left: var(--from, 0%);
  border-radius: inherit;
  background: color-mix(in srgb, var(--stylist-color, #2f946c) 72%, #fff);
  transition: margin-left 240ms cubic-bezier(0.22, 1, 0.36, 1), width 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
body.pro-mode .dashboard-shell .hours-shift.is-salon .hours-shift-span { background: rgb(47 148 108 / 16%); }
body.pro-mode .dashboard-shell .hours-shift.is-salon .hours-shift-span > i { background: #2f946c; }
/* A date that differs from the routine wears a dot. */
body.pro-mode .dashboard-shell .hours-shift.is-custom::after {
  position: absolute;
  top: 6px;
  right: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--stylist-color, #2f946c) 85%, #1f2a27);
  content: "";
  opacity: 0.8;
}
/* Off days are quiet, and offer hours on hover. */
body.pro-mode .dashboard-shell .hours-shift.is-off {
  color: #a39daa;
  background: transparent;
  font-weight: 600;
  outline: 1px dashed transparent;
  outline-offset: -1px;
}
body.pro-mode .dashboard-shell .hours-shift.is-off .hours-shift-span { display: none; }
body.pro-mode .dashboard-shell .hours-shift.is-off::after { display: none; }
body.pro-mode .dashboard-shell .hours-shift.is-off:hover:not(:disabled) {
  color: var(--pro-ui-ink, #233832);
  background: #f5f7f6;
  box-shadow: none;
  outline-color: #c6d0cb;
}
body.pro-mode .dashboard-shell .hours-shift.is-salon.is-off {
  color: #8c8692;
  background: #fafafb;
  outline-color: #d9d4de;
}
body.pro-mode .dashboard-shell .hours-shift.is-off:disabled { color: #b6b0bc; }
@container (max-width: 132px) {
  body.pro-mode .dashboard-shell .hours-shift { padding: 7px 6px 6px; font-size: 12px; }
  body.pro-mode .dashboard-shell .hours-shift-time { white-space: normal; }
}
/* Saving is a dot on the chip's corner; only a failure brings words. */
body.pro-mode .dashboard-shell .hours-cell > .hours-cell-status {
  position: absolute;
  top: 6px;
  left: 7px;
  right: auto;
  bottom: auto;
  z-index: 3;
  width: 6px;
  height: 6px;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  color: transparent;
  background: var(--pro-ui-muted, #697e76);
  font-size: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, background-color 160ms ease;
}
body.pro-mode .dashboard-shell .hours-cell > .hours-cell-status > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
body.pro-mode .dashboard-shell .hours-cell[data-save-state="saving"] > .hours-cell-status { opacity: 1; animation: hours-dot-pulse 900ms ease-in-out infinite; }
body.pro-mode .dashboard-shell .hours-cell[data-save-state="saved"] > .hours-cell-status { background: #2f946c; animation: hours-dot-done 2.2s ease forwards; }
body.pro-mode .dashboard-shell .hours-cell.has-save-error > .hours-cell-status {
  top: auto;
  left: 4px;
  right: 4px;
  bottom: 3px;
  width: auto;
  height: auto;
  padding: 2px 6px;
  border-radius: 6px;
  color: #a24242;
  background: rgb(255 255 255 / 94%);
  box-shadow: 0 1px 4px rgb(23 43 42 / 12%);
  font-size: 10px;
  font-weight: 650;
  opacity: 1;
  animation: none;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
body.pro-mode .dashboard-shell .hours-cell.has-save-error > .hours-cell-status > span { position: static; width: auto; height: auto; min-width: 0; overflow: hidden; clip-path: none; white-space: nowrap; text-overflow: ellipsis; }
body.pro-mode .dashboard-shell .hours-cell.has-save-error > .hours-cell-status button { min-height: 18px; padding: 0 5px; font-size: inherit; }
@keyframes hours-dot-pulse {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.3); }
}
@keyframes hours-dot-done {
  0%, 70% { opacity: 1; }
  100% { opacity: 0; }
}

/* ── The shift editor: a card beside the chip ───────────────────────────── */
.hours-editor-layer { position: fixed; inset: 0; z-index: 140; pointer-events: none; }
body.pro-mode .hours-editor {
  position: fixed;
  z-index: 1;
  width: 304px;
  max-width: calc(100vw - 24px);
  padding: 12px 14px 12px;
  border: 1px solid var(--pro-ui-line, #dce7e3);
  border-radius: 14px;
  color: var(--pro-ui-ink, #233832);
  background: #fff;
  box-shadow: 0 18px 44px rgb(23 43 42 / 16%), 0 2px 6px rgb(23 43 42 / 6%);
  font-size: 12px;
  pointer-events: auto;
  animation: hours-editor-in 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
body.pro-mode .hours-editor::before {
  position: absolute;
  top: -6px;
  left: var(--hours-editor-arrow, 50%);
  width: 10px;
  height: 10px;
  border-top: 1px solid var(--pro-ui-line, #dce7e3);
  border-left: 1px solid var(--pro-ui-line, #dce7e3);
  background: #fff;
  content: "";
  transform: translateX(-50%) rotate(45deg);
}
body.pro-mode .hours-editor.is-above::before { top: auto; bottom: -6px; transform: translateX(-50%) rotate(225deg); }
body.pro-mode .hours-editor.is-leaving { animation: hours-editor-out 120ms ease forwards; pointer-events: none; }
body.pro-mode .hours-editor-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
body.pro-mode .hours-editor-head strong { display: block; font-size: 13px; font-weight: 650; line-height: 1.25; }
body.pro-mode .hours-editor-head span { display: block; margin-top: 1px; color: var(--pro-ui-muted, #697e76); font-size: 11.5px; }
body.pro-mode .hours-editor-close {
  display: grid;
  place-items: center;
  flex: 0 0 26px;
  width: 26px;
  min-width: 26px;
  height: 26px;
  min-height: 26px;
  margin: -3px -4px 0 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--pro-ui-muted, #697e76);
  background: transparent;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease;
}
body.pro-mode .hours-editor-close:hover { color: var(--pro-ui-ink, #233832); background: #eef2f0; }
body.pro-mode .hours-editor-close svg { width: 14px; height: 14px; }
body.pro-mode .hours-editor-times { display: flex; align-items: flex-end; gap: 8px; }
body.pro-mode .hours-editor-field { display: grid; flex: 1; gap: 4px; min-width: 0; }
body.pro-mode .hours-editor-field > span { color: var(--pro-ui-muted, #697e76); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
body.pro-mode .hours-editor-dash { padding-bottom: 11px; color: var(--pro-ui-muted, #697e76); font-size: 13px; }
body.pro-mode .hours-editor-note {
  display: block;
  margin-top: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  color: #8f3645;
  background: #fff0ef;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
}
body.pro-mode .hours-editor-note[hidden] { display: none; }
body.pro-mode .hours-editor-off-note { margin: 0 0 2px; color: var(--pro-ui-muted, #697e76); font-size: 12px; line-height: 1.4; }
body.pro-mode .hours-editor-presets { display: grid; gap: 6px; margin-top: 10px; }
body.pro-mode .hours-editor-presets[hidden] { display: none; }
body.pro-mode .hours-editor-preset {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 34px;
  margin: 0;
  padding: 6px 10px;
  border: 1px solid var(--pro-ui-line, #dce7e3);
  border-radius: 9px;
  color: var(--pro-ui-ink, #233832);
  background: #fbfdfc;
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease;
}
body.pro-mode .hours-editor-preset > span { color: var(--pro-ui-muted, #697e76); font-weight: 600; }
body.pro-mode .hours-editor-preset > strong { font-weight: 650; font-variant-numeric: tabular-nums; }
body.pro-mode .hours-editor-preset:hover { border-color: #9ccdb9; background: #f1f8f4; }
body.pro-mode .hours-editor-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #edf1ef;
}
body.pro-mode .hours-editor-off {
  min-height: 30px;
  margin: 0;
  padding: 4px 11px;
  border: 1px solid #e6d9d9;
  border-radius: 999px;
  color: #a24242;
  background: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease;
}
body.pro-mode .hours-editor-off:hover { background: #fff0ef; }
body.pro-mode .hours-editor-off.is-on { color: var(--pro-ui-accent-ink, #286b56); border-color: #bddbcd; }
body.pro-mode .hours-editor-off.is-on:hover { background: var(--pro-ui-accent-soft, #edf7f2); }
body.pro-mode .hours-editor-status { color: var(--pro-ui-muted, #697e76); font-size: 11px; font-weight: 600; transition: color 160ms ease; }
body.pro-mode .hours-editor-status[data-state="saved"] { color: var(--pro-ui-accent-ink, #286b56); }
body.pro-mode .hours-editor-status[data-state="error"] { color: #a24242; }
body.pro-mode .hours-editor-status[data-state="saving"] { opacity: 0.7; }
@keyframes hours-editor-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
@keyframes hours-editor-out {
  to { opacity: 0; transform: translateY(-2px) scale(0.98); }
}

/* ── Whose regular hours: pills under the panel's title ─────────────────── */
body.pro-mode .dashboard-shell .hours-routine-head > div > p { margin: 3px 0 0; color: var(--pro-ui-muted, #697e76); font-size: 12px; line-height: 1.4; }
body.pro-mode .dashboard-shell .hours-routine-targets { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
body.pro-mode .dashboard-shell .hours-routine-target {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px !important;
  margin: 0;
  padding: 4px 12px 4px 5px;
  border: 1px solid var(--pro-ui-line, #dce7e3) !important;
  border-radius: 999px;
  color: var(--pro-ui-ink, #233832);
  background: #fff !important;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}
body.pro-mode .dashboard-shell .hours-routine-target:hover { border-color: #b9d8ca !important; background: #f4faf7 !important; }
body.pro-mode .dashboard-shell .hours-routine-target.is-active { color: #fff; border-color: var(--pro-ui-accent-ink, #286b56) !important; background: var(--pro-ui-accent-ink, #286b56) !important; }
body.pro-mode .dashboard-shell .hours-routine-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  overflow: hidden;
  border-radius: 50%;
  color: var(--pro-ui-accent-ink, #286b56);
  background: #edf3f0;
}
body.pro-mode .dashboard-shell .hours-routine-avatar > img { width: 100%; height: 100%; object-fit: cover; }
body.pro-mode .dashboard-shell .hours-routine-avatar > svg { width: 13px; height: 13px; }
body.pro-mode .dashboard-shell .hours-routine-target.is-active .hours-routine-avatar.is-salon { color: #fff; background: rgb(255 255 255 / 22%); }
@media (prefers-reduced-motion: reduce) {
  body.pro-mode .dashboard-shell .hours-cell > .hours-cell-status,
  body.pro-mode .hours-editor,
  body.pro-mode .dashboard-shell .hours-shift-span > i { animation: none !important; transition: none !important; }
}

/* ── Time field: one input that reads like the time, with a list to pick
   (`:not(#…)` lifts these over the app-wide input rules, several of which
   are !important with long selectors).
   from. Lives in the board's editor card (outside the dashboard shell), in
   the regular-hours rows, and inside break chips. ─────────────────────── */
body.pro-mode .time-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  width: 112px;
  min-width: 0;
  vertical-align: middle;
}
body.pro-mode .time-picker > .time-picker-input:not(#time-picker-none) {
  width: 100%;
  min-width: 0 !important;
  height: 34px;
  min-height: 0 !important;
  margin: 0;
  padding: 0 26px 0 11px;
  border: 1px solid #d4dfda !important;
  border-radius: 9px !important;
  color: var(--pro-ui-ink, #233832) !important;
  background: #fff !important;
  box-shadow: none !important;
  font: inherit;
  font-size: 13px !important;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  line-height: 1;
  text-align: left;
  cursor: pointer;
  outline: none !important;
  caret-color: var(--pro-ui-accent-ink, #286b56);
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}
body.pro-mode .time-picker > .time-picker-input:not(#time-picker-none):hover:not(:disabled) { border-color: #a9c4b8 !important; }
body.pro-mode .time-picker > .time-picker-input:not(#time-picker-none):focus,
body.pro-mode .time-picker.is-open > .time-picker-input {
  border-color: var(--pro-ui-accent-ink, #286b56) !important;
  box-shadow: 0 0 0 3px rgb(40 107 86 / 14%) !important;
  cursor: text;
}
body.pro-mode .time-picker.is-invalid > .time-picker-input { border-color: #d08181 !important; box-shadow: 0 0 0 3px rgb(194 84 84 / 12%) !important; }
body.pro-mode .time-picker > .time-picker-input:not(#time-picker-none):disabled { color: var(--pro-ui-muted, #697e76) !important; background: #f6f8f7 !important; cursor: default; }
body.pro-mode .time-picker-caret {
  position: absolute;
  top: 50%;
  right: 9px;
  width: 11px;
  height: 11px;
  color: var(--pro-ui-muted, #697e76);
  pointer-events: none;
  transform: translateY(-50%);
  transition: transform 160ms ease, color 140ms ease;
}
body.pro-mode .time-picker.is-open > .time-picker-caret { color: var(--pro-ui-accent-ink, #286b56); transform: translateY(-50%) rotate(180deg); }
body.pro-mode .time-picker:has(> .time-picker-input:disabled) > .time-picker-caret { opacity: 0.4; }
@media (pointer: coarse) {
  body.pro-mode .time-picker > .time-picker-input:not(#time-picker-none) { height: 40px; font-size: 16px !important; }
}
/* The list of times. */
body.pro-mode .time-picker-list {
  position: fixed;
  overflow-x: hidden;
  z-index: 160;
  max-height: 260px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px;
  border: 1px solid var(--pro-ui-line, #dce7e3);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 16px 40px rgb(23 43 42 / 16%), 0 2px 6px rgb(23 43 42 / 6%);
  scrollbar-width: thin;
  animation: time-picker-list-in 140ms cubic-bezier(0.22, 1, 0.36, 1);
}
body.pro-mode .time-picker-list[hidden] { display: none; }
body.pro-mode .time-picker-option {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--pro-ui-ink, #233832);
  font-size: 13px;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
body.pro-mode .time-picker-option:hover,
body.pro-mode .time-picker-option.is-active { background: #eef6f2; }
body.pro-mode .time-picker-option.is-selected { color: var(--pro-ui-accent-ink, #286b56); font-weight: 700; }
body.pro-mode .time-picker-option.is-selected > span::after { margin-left: 6px; content: "✓"; font-size: 11px; }
@keyframes time-picker-list-in {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.pro-mode .time-picker-list,
  body.pro-mode .time-picker-caret { animation: none; transition: none; }
}
/* In the editor card the fields fill their column. */
body.pro-mode .hours-editor-field > .time-picker { width: 100%; }
body.pro-mode .hours-editor-field > .time-picker > .time-picker-input:not(#time-picker-none) { height: 38px; font-size: 14px !important; }
/* In a break chip the times read as text until hovered or opened. */
body.pro-mode .dashboard-shell .business-schedule-configuration .business-hours-break .time-picker { width: 76px; }
body.pro-mode .dashboard-shell .business-schedule-configuration .business-hours-break .time-picker > .time-picker-input:not(#time-picker-none) {
  height: 24px;
  padding: 0 6px;
  border-color: transparent !important;
  border-radius: 6px !important;
  color: #3e3360 !important;
  background: transparent !important;
  font-size: 12px !important;
  text-align: center;
}
body.pro-mode .dashboard-shell .business-schedule-configuration .business-hours-break .time-picker > .time-picker-input:not(#time-picker-none):hover:not(:disabled) { border-color: #cfc5ea !important; background: #fff !important; }
body.pro-mode .dashboard-shell .business-schedule-configuration .business-hours-break .time-picker > .time-picker-input:not(#time-picker-none):focus,
body.pro-mode .dashboard-shell .business-schedule-configuration .business-hours-break .time-picker.is-open > .time-picker-input { border-color: #8f7bd0 !important; background: #fff !important; box-shadow: 0 0 0 3px rgb(105 81 173 / 14%) !important; }
body.pro-mode .dashboard-shell .business-schedule-configuration .business-hours-break .time-picker-caret { display: none; }

/* Public holidays show in full; the Working hours page already scrolls. */
body.pro-mode .dashboard-shell .dashboard-content .business-holiday-list {
  max-height: none !important;
  overflow: visible !important;
}

/* The pointer highlight is one element per column of hour cells (see
   calendarHoverIndicatorFor); it is moved, never re-added, so it keeps up
   with the pointer. Its offset is measured from the top of the column. */
body.pro-mode .business-calendar-hover-time.is-column-highlight {
  top: 0;
  will-change: transform;
}
body.pro-mode .business-calendar-hover-time.is-column-highlight[hidden] { display: none; }

/* A saved or newly made appointment lands with a soft ring that blooms and
   fades (markCalendarBookingSaved). Opacity and transform only, so the
   calendar never re-lays out for it. */
body.pro-mode .business-calendar-booking.is-just-saved:not(.has-booking-gap)::after,
body.pro-mode .business-calendar-booking.is-just-saved .business-booking-occupied-segment::after {
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  box-shadow:
    0 0 0 2px rgb(124 92 255 / 62%),
    0 8px 22px rgb(124 92 255 / 26%);
  content: "";
  pointer-events: none;
  animation: business-calendar-saved-bloom 1000ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes business-calendar-saved-bloom {
  0% { opacity: 0; transform: scale(0.97); }
  22% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.035); }
}

@media (prefers-reduced-motion: reduce) {
  body.pro-mode .business-calendar-booking.is-just-saved:not(.has-booking-gap)::after,
  body.pro-mode .business-calendar-booking.is-just-saved .business-booking-occupied-segment::after {
    animation: none;
    opacity: 0;
  }
}

/* While a move of an appointment or a break is saving (bookingSavePending,
   calendarBlockSaving) a short light bounces back and forth along its foot.
   It can't be picked up meanwhile. */
body.pro-mode :is(.business-calendar-booking, .business-calendar-block).is-saving:not(.has-booking-gap)::before {
  position: absolute;
  right: 8px;
  bottom: 3px;
  left: 8px;
  z-index: 4;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgb(124 92 255 / 85%), transparent) 0 0 / 42% 100% no-repeat, rgb(124 92 255 / 12%);
  content: "";
  pointer-events: none;
  animation: business-calendar-saving 720ms cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}

@keyframes business-calendar-saving {
  from { background-position: 0% 0, 0 0; }
  to { background-position: 100% 0, 0 0; }
}

/* Saved: a check mark at the card's foot, on the left (clear of the corner
   marks on the right), for two seconds (markCalendarBookingSaveChecked). The
   card can be moved again after it. */
body.pro-mode :is(.business-calendar-booking, .business-calendar-block).is-saved-check:not(.has-booking-gap)::before {
  position: absolute;
  right: auto;
  left: 6px;
  bottom: 4px;
  z-index: 4;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #1f9d6b;
  box-shadow: 0 0 0 2px #fff, 0 2px 6px rgb(31 157 107 / 35%);
  color: #fff;
  content: "✓";
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  pointer-events: none;
  animation: business-calendar-saved-check 2000ms ease both;
}

@keyframes business-calendar-saved-check {
  0% { opacity: 0; transform: scale(0.4) rotate(-25deg); }
  12% { opacity: 1; transform: scale(1.2) rotate(0deg); }
  22% { transform: scale(1); }
  85% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.85); }
}

/* On top of everything on the card. */
body.pro-mode :is(.business-calendar-booking, .business-calendar-block).is-saved-check.has-corner-marks:not(.has-booking-gap)::before {
  z-index: 7;
}

/* Saving or just saved: the card is not picked up. */
body.pro-mode :is(.business-calendar-booking, .business-calendar-block).is-saving { cursor: progress; }
body.pro-mode :is(.business-calendar-booking, .business-calendar-block).is-saved-check { cursor: default; }

/* A card leaving the calendar pops out where it was. */
body.pro-mode .is-calendar-leaving { z-index: 30 !important; pointer-events: none !important; }

@media (prefers-reduced-motion: reduce) {
  body.pro-mode :is(.business-calendar-booking, .business-calendar-block).is-saving:not(.has-booking-gap)::before { animation: none; background-position: 50% 0, 0 0; }
  body.pro-mode :is(.business-calendar-booking, .business-calendar-block).is-saved-check:not(.has-booking-gap)::before { animation: none; }
}

/* The services of one appointment are joined along their left rails
   (renderCalendarServiceLinks): a bar in the stylist's colour runs from one
   card's foot to the next one's head, tucked under both. */
:is(.business-calendar-event-field, .business-day-booking-layer) > .business-calendar-service-link {
  position: absolute;
  top: var(--link-top, 0px);
  left: calc(var(--event-left, 0%) + 3px + var(--event-gap-rail-inset, 0px));
  z-index: 0;
  width: 5px;
  height: var(--link-height, 0px);
  border-radius: 3px;
  background: var(--stylist-color, #6b56a8);
  pointer-events: none;
  transition: opacity 160ms ease;
}
:is(.business-calendar-event-field, .business-day-booking-layer) > .business-calendar-service-link.is-calendar-drag-source {
  opacity: 0.3;
}


/* Switching Bookings and Working hours is a plain cross-fade: a surface this
   large sliding sideways read as the page shaking. */
body.pro-mode .dashboard-shell .dashboard-content .business-schedule-mode-stage[data-rl-view-direction] {
  --rl-view-enter-x: 0px;
  --rl-view-exit-x: 0px;
}
body.pro-mode .dashboard-shell .dashboard-content .business-schedule-mode-stage.is-entering {
  transform: none;
}

/* A card's corner marks: how many times it was modified (yellow, "+" past
   nine) and L for late (orange), in its bottom right corner. They pop in,
   and bounce with a rolling number when it changes (animateCalendarBadges). */
body.pro-mode .business-calendar-surface .business-booking-event.has-corner-marks:not(.business-week-event) { position: relative; }
body.pro-mode .business-calendar-surface .business-booking-event .business-calendar-event-marks {
  position: absolute;
  z-index: 5;
  right: 3px;
  bottom: 3px;
  display: flex;
  gap: 2px;
  pointer-events: none;
}
body.pro-mode .business-calendar-surface .business-calendar-event-mark {
  display: grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  overflow: hidden;
  border-radius: 999px;
  box-sizing: border-box;
  box-shadow: 0 1px 3px rgb(60 40 0 / 22%), 0 0 0 1.5px #fff;
  font-size: 9.5px;
  font-weight: 800;
  font-style: normal;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
body.pro-mode .business-calendar-surface .business-calendar-event-mark > span { display: block; }
body.pro-mode .business-calendar-surface .business-calendar-event-mark.is-modified {
  color: #5b4300;
  background: linear-gradient(180deg, #ffe46e, #f5c518);
}
body.pro-mode .business-calendar-surface .business-calendar-event-mark.is-late {
  color: #fff;
  background: linear-gradient(180deg, #ff9d4d, #ec6a1c);
}

/* A status's shape: ○ booked, ● confirmed, ◐ in progress, ■ done,
   ▲ no-show, ✕ cancelled, ◇ anything else, each in its own colour. On a
   card it sits on a white disc, last of the corner marks. */
body.pro-mode .rl-status-shape {
  --rl-status-color: #7655a1;
  display: inline-grid;
  flex: none;
  width: 16px;
  height: 16px;
  place-items: center;
  border-radius: 50%;
  color: var(--rl-status-color);
  font-style: normal;
}
body.pro-mode .rl-status-shape > svg { width: 11px; height: 11px; overflow: visible; fill: currentColor; stroke: currentColor; stroke-width: 0; }
body.pro-mode .rl-status-shape.is-triangle > svg { stroke-width: 1; }
body.pro-mode .rl-status-shape.status-booked { --rl-status-color: #2e7db0; }
body.pro-mode .rl-status-shape.status-confirmed { --rl-status-color: #1f8a5b; }
body.pro-mode .rl-status-shape:is(.status-checked_in, .status-in_progress) { --rl-status-color: #c27c0e; }
body.pro-mode .rl-status-shape:is(.status-completed, .status-review) { --rl-status-color: #4f5d66; }
body.pro-mode .rl-status-shape.status-no_show { --rl-status-color: #c2414b; }
body.pro-mode .rl-status-shape:is(.status-cancelled, .status-canceled, .status-declined) { --rl-status-color: #7d8783; }
body.pro-mode .business-calendar-surface .business-calendar-event-marks { align-items: center; }
body.pro-mode .business-calendar-surface .business-calendar-event-marks > .rl-status-shape {
  background: #fff;
  box-shadow: 0 1px 3px rgb(23 43 35 / 22%), 0 0 0 1.5px #fff;
}
body.pro-mode .business-calendar-surface .is-calendar-event-micro .business-calendar-event-marks > :is(.rl-status-shape, .business-calendar-event-mark) { transform: scale(.82); transform-origin: 100% 100%; }
/* In an appointment's details: the status beside its shape, then each mark
   the card carries beside what it means. */
body.pro-mode .business-calendar-event-tooltip .rl-tooltip-status > dd { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
body.pro-mode .business-calendar-event-tooltip .rl-tooltip-status-value,
body.pro-mode .business-calendar-event-tooltip .rl-tooltip-mark { display: inline-flex; align-items: center; gap: 6px; }
body.pro-mode .business-calendar-event-tooltip .rl-tooltip-status-value > .rl-status-shape { width: 14px; height: 14px; }
body.pro-mode .business-calendar-event-tooltip .rl-tooltip-mark { color: #5f6b66; font-size: .92em; }
body.pro-mode .business-calendar-event-tooltip .rl-tooltip-mark > .business-calendar-event-mark { flex: none; }

/* Cards lift a little under the pointer. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  body.pro-mode .dashboard-shell .dashboard-content .business-calendar-surface[data-calendar-mode="bookings"] .business-week-event.business-booking-event:not(.is-calendar-dragging, .is-calendar-drag-source, .is-calendar-resizing, .is-saving):hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgb(44 37 57 / 13%), 0 1px 3px rgb(44 37 57 / 8%);
    z-index: 6;
  }
}

/* Each stylist's week is outlined in their colour: the top and sides of
   their name, then the sides of their days, all the way down. */
body.pro-mode .business-week-staff-headers > .business-week-staff-header {
  border-right-color: transparent;
  border-radius: 10px 10px 0 0;
  box-shadow: inset 0 2px 0 var(--stylist-color), inset 2px 0 0 var(--stylist-color), inset -2px 0 0 var(--stylist-color);
}
body.pro-mode .business-week-staff-days > :is(.is-stylist-start, .is-stylist-end) { position: relative; }
body.pro-mode .business-week-staff-days > :is(.is-stylist-start, .is-stylist-end)::after {
  position: absolute;
  top: 0;
  bottom: -1px;
  width: 2px;
  background: var(--stylist-color);
  content: "";
  pointer-events: none;
}
body.pro-mode .business-week-staff-days > .is-stylist-start::after { left: 0; }
body.pro-mode .business-week-staff-days > .is-stylist-end::after { right: 0; }
body.pro-mode .business-week-staff-days > .is-stylist-end { border-right-color: transparent; }
body.pro-mode .business-week-day-columns > .business-week-day-column:has(> .business-week-stylist-edge) { position: relative; }
body.pro-mode .business-week-stylist-edge {
  position: absolute;
  z-index: 25;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--stylist-color);
  pointer-events: none;
}
body.pro-mode .business-week-stylist-edge.is-start { left: 0; }
body.pro-mode .business-week-stylist-edge.is-end { right: 0; }
/* Day view: each stylist outlined the same way, their name and their day. */
body.pro-mode .dashboard-shell .dashboard-content .business-day-staff-headers > .business-day-staff-header {
  border-radius: 10px 10px 0 0;
  box-shadow: inset 0 2px 0 var(--stylist-color), inset 2px 0 0 var(--stylist-color), inset -2px 0 0 var(--stylist-color);
}
body.pro-mode .business-day-staff-columns > .business-day-staff-column { position: relative; }

/* Each stylist's picture is ringed in their colour (always). */
body.pro-mode .dashboard-shell .dashboard-content :is(.business-week-staff-header, .business-day-staff-header) > :is(img, span) {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--stylist-color);
}

/* What the calendar draws, switched in its settings: marks shrink away and
   spring back; stylist outlines retract up and draw back down. */
body.pro-mode .business-calendar-surface .business-calendar-event-mark {
  transition: transform 300ms cubic-bezier(.34, 1.56, .64, 1), opacity 200ms ease, min-width 240ms ease, padding 240ms ease, margin 240ms ease;
}
body.pro-mode .business-schedule-page[data-calendar-hide-late] .business-calendar-surface .business-calendar-event-mark.is-late,
body.pro-mode .business-schedule-page[data-calendar-hide-modified] .business-calendar-surface .business-calendar-event-mark.is-modified {
  min-width: 0;
  width: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  transform: scale(0) rotate(-30deg);
}
body.pro-mode .business-week-stylist-edge {
  transform-origin: top;
  transition: transform 420ms cubic-bezier(.22, 1, .36, 1), opacity 260ms ease;
}
body.pro-mode .business-schedule-page[data-calendar-hide-stylist-borders] .business-week-stylist-edge { opacity: 0; transform: scaleY(0); }
body.pro-mode .business-week-staff-days > :is(.is-stylist-start, .is-stylist-end)::after { transition: opacity 260ms ease; }
body.pro-mode .business-schedule-page[data-calendar-hide-stylist-borders] .business-week-staff-days > :is(.is-stylist-start, .is-stylist-end)::after { opacity: 0; }
body.pro-mode .business-week-staff-headers > .business-week-staff-header,
body.pro-mode .dashboard-shell .dashboard-content .business-day-staff-headers > .business-day-staff-header { transition: box-shadow 320ms ease; }
body.pro-mode .business-schedule-page[data-calendar-hide-stylist-borders] .business-week-staff-headers > .business-week-staff-header,
body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page[data-calendar-hide-stylist-borders] .business-day-staff-headers > .business-day-staff-header {
  box-shadow: inset 0 0 0 transparent, inset 0 0 0 transparent, inset 0 0 0 transparent;
}

/* The gear and its settings, in mint. */
body.pro-mode .business-calendar-settings-control {
  --rl-mint: #3ec79a;
  --rl-mint-deep: #1d9a70;
  --rl-mint-ink: #08422f;
  --rl-mint-soft: #e9f9f2;
  --rl-mint-line: #cdeee0;
}
body.pro-mode .dashboard-shell .dashboard-content .business-calendar-toolbar > .business-calendar-settings-control {
  position: relative;
  justify-self: end;
}
body.pro-mode .business-calendar-settings-trigger {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  padding: 0;
  border: 1px solid #d5e9e0;
  border-radius: 12px;
  color: #2f5446;
  background: #fff;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
body.pro-mode .business-calendar-settings-trigger svg { width: 20px; height: 20px; transition: transform 520ms cubic-bezier(.34, 1.56, .64, 1); }
body.pro-mode .business-calendar-settings-trigger:hover { border-color: #9fe0c6; color: var(--rl-mint-deep); background: var(--rl-mint-soft); }
body.pro-mode .business-calendar-settings-trigger:hover svg { transform: rotate(35deg); }
body.pro-mode .business-calendar-settings-control.is-open .business-calendar-settings-trigger {
  border-color: var(--rl-mint-deep);
  color: var(--rl-mint-ink);
  background: var(--rl-mint);
  box-shadow: 0 6px 16px rgb(29 154 112 / 30%);
}
body.pro-mode .business-calendar-settings-control.is-open .business-calendar-settings-trigger svg { transform: rotate(120deg); }
body.pro-mode .business-calendar-settings-panel {
  position: absolute;
  z-index: 80;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  gap: 4px;
  width: min(340px, calc(100vw - 32px));
  padding: 12px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 22px 48px rgb(16 72 52 / 16%), 0 0 0 1px var(--rl-mint-line);
  background-image: linear-gradient(180deg, var(--rl-mint-soft), #fff 72px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(.94);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity 170ms ease, transform 220ms cubic-bezier(.4, 0, .2, 1), visibility 0s linear 220ms;
}
body.pro-mode .business-calendar-settings-control.is-open > .business-calendar-settings-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition: opacity 200ms ease, transform 380ms cubic-bezier(.34, 1.45, .64, 1), visibility 0s;
}
body.pro-mode .business-calendar-settings-panel > section {
  display: grid;
  gap: 8px;
  padding: 10px 6px;
  border-top: 1px solid #e6f4ee;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 160ms ease, transform 200ms ease;
}
body.pro-mode .business-calendar-settings-panel > section:first-of-type { border-top: 0; }
body.pro-mode .business-calendar-settings-control.is-open .business-calendar-settings-panel > section { opacity: 1; transform: none; transition: opacity 260ms ease, transform 360ms cubic-bezier(.22, 1, .36, 1); }
body.pro-mode .business-calendar-settings-control.is-open .business-calendar-settings-panel > section:nth-of-type(2) { transition-delay: 40ms; }
body.pro-mode .business-calendar-settings-control.is-open .business-calendar-settings-panel > section:nth-of-type(3) { transition-delay: 80ms; }
body.pro-mode .business-calendar-settings-control.is-open .business-calendar-settings-panel > section:nth-of-type(4) { transition-delay: 120ms; }
body.pro-mode .business-calendar-settings-control:is([data-calendar-view="month"], [data-schedule-mode="hours"]) .is-time-setting { display: none; }
body.pro-mode .business-calendar-settings-control:is([data-calendar-view="month"], [data-schedule-mode="hours"]) .business-calendar-settings-panel > section:not(.is-time-setting):first-of-type,
body.pro-mode .business-calendar-settings-control:is([data-calendar-view="month"], [data-schedule-mode="hours"]) .business-calendar-settings-panel > .is-time-setting + .is-time-setting + section { border-top: 0; }
body.pro-mode .business-calendar-settings-panel h3 { margin: 0; color: #4f7d6c; font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
body.pro-mode .business-calendar-settings-panel h3 label { color: inherit; font: inherit; }
body.pro-mode .business-calendar-settings-panel section > small { color: #6f8a80; font-size: .72rem; }
/* Choices: the interval and the default view. */
body.pro-mode :is(.rl-calendar-interval-choices, .rl-calendar-default-view) { display: grid; gap: 6px; }
body.pro-mode .rl-calendar-interval-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.pro-mode .rl-calendar-default-view { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.pro-mode :is(.rl-calendar-interval-choices, .rl-calendar-default-view) > button {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 8px;
  border: 1px solid #d5e9e0;
  border-radius: 10px;
  color: #2f5446;
  background: #fff;
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 200ms ease, color 200ms ease, transform 240ms cubic-bezier(.34, 1.56, .64, 1), box-shadow 200ms ease;
}
body.pro-mode :is(.rl-calendar-interval-choices, .rl-calendar-default-view) > button:hover { border-color: #9fe0c6; background: var(--rl-mint-soft); transform: translateY(-1px); }
body.pro-mode :is(.rl-calendar-interval-choices, .rl-calendar-default-view) > button:active { transform: scale(.96); }
body.pro-mode :is(.rl-calendar-interval-choices, .rl-calendar-default-view) > button[aria-checked="true"] {
  border-color: var(--rl-mint-deep);
  color: var(--rl-mint-ink);
  background: var(--rl-mint);
  box-shadow: 0 4px 12px rgb(29 154 112 / 28%);
}
body.pro-mode .rl-calendar-default-view > button svg { width: 0; height: 14px; opacity: 0; transform: scale(0); transition: width 220ms ease, opacity 200ms ease, transform 320ms cubic-bezier(.34, 1.56, .64, 1); }
body.pro-mode .rl-calendar-default-view > button[aria-checked="true"] svg { width: 14px; opacity: 1; transform: none; }
body.pro-mode .rl-calendar-zoom { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; color: #4f7d6c; }
body.pro-mode .rl-calendar-zoom input { width: 100%; accent-color: var(--rl-mint-deep); }
/* Checkboxes. */
body.pro-mode .rl-calendar-setting-check {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  margin: 0;
  padding: 8px;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 160ms ease;
}
body.pro-mode .rl-calendar-setting-check:hover { background: var(--rl-mint-soft); }
body.pro-mode .rl-calendar-setting-check > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
body.pro-mode .rl-calendar-setting-box {
  position: relative;
  width: 20px;
  height: 20px;
  border: 1.5px solid #b5d9c9;
  border-radius: 6px;
  background: #fff;
  transition: background-color 200ms ease, border-color 200ms ease;
}
body.pro-mode .rl-calendar-setting-box::after {
  position: absolute;
  top: 2px;
  left: 6px;
  width: 5px;
  height: 10px;
  border-right: 2px solid var(--rl-mint-ink);
  border-bottom: 2px solid var(--rl-mint-ink);
  content: "";
  transform: rotate(45deg) scale(0);
  transition: transform 280ms cubic-bezier(.34, 1.56, .64, 1);
}
body.pro-mode .rl-calendar-setting-check > input:checked + .rl-calendar-setting-box { border-color: var(--rl-mint-deep); background: var(--rl-mint); animation: rl-calendar-check-pop 360ms cubic-bezier(.34, 1.56, .64, 1); }
body.pro-mode .rl-calendar-setting-check > input:checked + .rl-calendar-setting-box::after { transform: rotate(45deg) scale(1); }
body.pro-mode .rl-calendar-setting-check > input:not(:checked) + .rl-calendar-setting-box { animation: rl-calendar-uncheck 260ms ease; }
body.pro-mode .rl-calendar-setting-check > input:focus-visible + .rl-calendar-setting-box { box-shadow: 0 0 0 3px rgb(29 154 112 / 28%); }
@keyframes rl-calendar-check-pop { 0% { transform: scale(.7); } 55% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes rl-calendar-uncheck { 0% { transform: scale(.85); } 100% { transform: scale(1); } }
body.pro-mode .rl-calendar-setting-copy { display: grid; gap: 1px; min-width: 0; }
body.pro-mode .rl-calendar-setting-copy strong { color: #1f3a30; font-size: .84rem; font-weight: 600; }
body.pro-mode .rl-calendar-setting-copy small { color: #6f8a80; font-size: .72rem; }
@media (prefers-reduced-motion: reduce) {
  body.pro-mode :is(.business-calendar-settings-panel, .business-calendar-settings-panel > section, .rl-calendar-setting-box, .rl-calendar-setting-box::after, .business-calendar-settings-trigger svg) { transition: none !important; animation: none !important; }
}
/* The gear takes the slot the time interval had, at every width. */
body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page .business-calendar-toolbar.has-settings-control {
  grid-template-columns: max-content max-content minmax(180px, 1fr) minmax(170px, 220px) 44px;
}
body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page .business-calendar-toolbar.has-settings-control > .business-calendar-settings-control { grid-area: 1 / 5; }
@media (min-width: 761px) and (max-width: 1000px) {
  body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page .business-calendar-toolbar.has-settings-control { grid-template-columns: max-content max-content minmax(0, 1fr) 44px; }
  body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page .business-calendar-toolbar.has-settings-control .business-calendar-period-navigation { grid-area: 1 / 3; }
  body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page .business-calendar-toolbar.has-settings-control :is(.business-calendar-professional-control, .business-calendar-own-schedule) { grid-area: 2 / 1 / auto / -1; }
  body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page .business-calendar-toolbar.has-settings-control > .business-calendar-settings-control { grid-area: 1 / 4; }
}
@media (max-width: 760px) {
  body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page .business-calendar-toolbar.has-settings-control { grid-template-columns: 76px minmax(0, 1fr) 44px; }
  body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page .business-calendar-toolbar.has-settings-control :is(.business-calendar-professional-control, .business-calendar-own-schedule) { grid-area: 3 / 1 / auto / 3; }
  body.pro-mode .dashboard-shell .dashboard-content .business-schedule-page .business-calendar-toolbar.has-settings-control > .business-calendar-settings-control { grid-area: 3 / 3; }
}

/* Other time (Unavailable, Lunch, Meeting…) looks exactly like a break:
   the same beige, border and lettering, apart from Done's gray and from
   every appointment status. */
body.pro-mode :is(.business-calendar-block, .business-month-block-marker).is-calendar-type-other,
body.pro-mode .business-week-timeline-desktop .business-week-event.business-week-block.is-calendar-type-other,
body.pro-mode .business-day-booking-layer .business-week-event.business-week-block.is-calendar-type-other,
body.pro-mode .business-day-staff-grid .business-calendar-event-field > .business-day-event.business-week-block.is-calendar-type-other {
  --calendar-block-background: #f8f1e4;
  --calendar-block-text: #735e36;
  --booking-status-color: #b08a49;
  border-top-color: #dfcfb2;
  border-right-color: #dfcfb2;
  border-bottom-color: #dfcfb2;
  background: #f8f1e4;
  color: #735e36;
}
body.pro-mode .business-booking-calendar-key .is-calendar-other > i {
  border-color: #dfcfb2;
  background: #f8f1e4;
}
body.pro-mode :is(.business-calendar-drag-preview, .business-calendar-move-preview).is-calendar-type-other {
  background: #f8f1e4;
}

/* Other time's labels: a row of chips in the block's beige, the salon's
   own with a remove button, and a box that opens for a new one. */
body.pro-mode .rl-block-labels { display: grid; gap: 8px; }
body.pro-mode .rl-block-label-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
body.pro-mode .rl-block-label-list { display: contents; }
body.pro-mode .rl-block-label {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid #e6dcc8;
  border-radius: 999px;
  background: #fff;
  transition: border-color 180ms ease, background-color 220ms ease, box-shadow 220ms ease, transform 260ms cubic-bezier(.34, 1.56, .64, 1), opacity 200ms ease;
}
body.pro-mode .rl-block-label:hover { border-color: #d8c39b; transform: translateY(-1px); }
body.pro-mode .rl-block-label > button {
  min-height: 34px;
  margin: 0;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  color: #4a3f2a;
  background: transparent;
  font: inherit;
  font-size: .84rem;
  font-weight: 600;
  cursor: pointer;
}
body.pro-mode .rl-block-label.is-custom > button[role="radio"] { padding-right: 6px; }
body.pro-mode .rl-block-label > .rl-block-label-remove {
  display: grid;
  width: 28px;
  place-items: center;
  padding: 0 8px 0 0;
  color: #9a8a6a;
  font-size: 1rem;
  line-height: 1;
  transition: color 160ms ease, transform 200ms ease;
}
body.pro-mode .rl-block-label > .rl-block-label-remove:hover { color: #b42318; transform: scale(1.2); }
body.pro-mode .rl-block-label:has(> [role="radio"][aria-checked="true"]) {
  border-color: #b08a49;
  background: #f8f1e4;
  box-shadow: 0 4px 12px rgb(123 104 211 / 22%);
  animation: rl-block-label-pick 380ms cubic-bezier(.34, 1.56, .64, 1);
}
body.pro-mode .rl-block-label > [role="radio"][aria-checked="true"] { color: #735e36; }
body.pro-mode .rl-block-label > [role="radio"]::before {
  display: inline-block;
  width: 0;
  height: 7px;
  margin-right: 0;
  border-radius: 50%;
  background: #b08a49;
  content: "";
  vertical-align: 1px;
  transform: scale(0);
  transition: width 220ms ease, margin-right 220ms ease, transform 320ms cubic-bezier(.34, 1.56, .64, 1);
}
body.pro-mode .rl-block-label > [role="radio"][aria-checked="true"]::before { width: 7px; margin-right: 7px; transform: scale(1); }
body.pro-mode .rl-block-label > button:focus-visible { outline: 2px solid #b08a49; outline-offset: 2px; }
body.pro-mode .rl-block-label.is-new { animation: rl-block-label-in 460ms cubic-bezier(.34, 1.56, .64, 1); }
body.pro-mode .rl-block-label.is-leaving { opacity: 0; transform: scale(.6); pointer-events: none; }
body.pro-mode .rl-block-label-new-toggle {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  border: 1px dashed #d8c39b;
  border-radius: 999px;
  color: #735e36;
  background: transparent;
  font: inherit;
  font-size: .84rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 200ms ease, transform 240ms cubic-bezier(.34, 1.56, .64, 1);
}
body.pro-mode .rl-block-label-new-toggle:hover { border-color: #b08a49; background: #f6f3fe; transform: translateY(-1px); }
body.pro-mode .rl-block-label-new-toggle > span { display: inline-block; font-size: 1.05rem; line-height: 1; transition: transform 320ms cubic-bezier(.34, 1.56, .64, 1); }
body.pro-mode .rl-block-labels.is-adding .rl-block-label-new-toggle { border-style: solid; border-color: #b08a49; background: #f8f1e4; }
body.pro-mode .rl-block-labels.is-adding .rl-block-label-new-toggle > span { transform: rotate(45deg); }
body.pro-mode .rl-block-label-new {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 280ms cubic-bezier(.22, 1, .36, 1), opacity 200ms ease;
}
body.pro-mode .rl-block-labels.is-adding .rl-block-label-new { grid-template-rows: 1fr; opacity: 1; }
body.pro-mode .rl-block-label-new > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  min-height: 0;
  overflow: hidden;
  transform: translateY(-6px);
  transition: transform 320ms cubic-bezier(.34, 1.45, .64, 1);
}
body.pro-mode .rl-block-labels.is-adding .rl-block-label-new > div { padding: 2px; transform: none; }
body.pro-mode .rl-block-label-new input { min-width: 0; }
@keyframes rl-block-label-pick { 0% { transform: scale(.92); } 55% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes rl-block-label-in { 0% { opacity: 0; transform: scale(.4); } 60% { opacity: 1; transform: scale(1.1); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  body.pro-mode :is(.rl-block-label, .rl-block-label > [role="radio"]::before, .rl-block-label-new, .rl-block-label-new > div, .rl-block-label-new-toggle > span) { transition: none !important; animation: none !important; }
}

/* The appointment editor ("Modify appointment?"): when, who and the
   services, each a card that settles in after the last; rows pop in when
   added, fold to a struck-through line when removed, and every value that
   changes pops (animatePopChanges). */
body.pro-mode .rl-move-editor { display: grid; gap: 10px; margin: 2px 0; }
body.pro-mode .rl-move-editor-group {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 8px 14px;
  align-items: start;
  padding: 14px 16px;
  border: 1px solid #e3e8e6;
  border-radius: 16px;
  background: #fff;
  animation: rl-move-editor-in 460ms cubic-bezier(.22, 1, .36, 1) both;
}
body.pro-mode .rl-move-editor-group:nth-child(2) { animation-delay: 60ms; }
body.pro-mode .rl-move-editor-group:nth-child(3) { animation-delay: 120ms; }
body.pro-mode .rl-move-editor-label {
  padding-top: 24px;
  color: #6b7a74;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
body.pro-mode .rl-move-editor-group.is-services .rl-move-editor-label { padding-top: 10px; }
body.pro-mode .rl-move-editor-fields { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; min-width: 0; }
body.pro-mode .rl-move-editor-field { display: grid; flex: 1 1 128px; gap: 4px; min-width: 112px; margin: 0; }
body.pro-mode .rl-move-editor-field.is-date { flex-basis: 160px; }
body.pro-mode .rl-move-editor-field.is-wide { flex: 2 1 220px; }
body.pro-mode .rl-move-editor-field > span { color: #5f6b66; font-size: .74rem; font-weight: 600; }
body.pro-mode .rl-move-editor-field :is(input, select):not(#none) {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid #d9e1dd;
  border-radius: 11px;
  color: #1f2b26;
  background: #fff;
  font: inherit;
  font-size: .9rem;
  transition: border-color 160ms ease, box-shadow 200ms ease, background-color 200ms ease;
}
body.pro-mode .rl-move-editor-field :is(input, select):not(#none):focus {
  border-color: #1f6b52;
  outline: none;
  box-shadow: 0 0 0 3px rgb(31 107 82 / 16%);
}
body.pro-mode .rl-move-editor-field.is-derived input:not(#none) { color: #55635d; background: #f4f7f6; }
body.pro-mode .rl-move-editor-field.is-readonly { align-content: start; }
body.pro-mode .rl-move-editor-field.is-readonly strong { color: #1f2b26; font-size: .92rem; }
body.pro-mode .rl-move-editor-field.is-readonly small { color: #7b8782; font-size: .74rem; }
body.pro-mode .rl-move-editor-services { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
body.pro-mode .rl-move-editor-service {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #e3e8e6;
  border-radius: 13px;
  background: #fafcfb;
  transition: background-color 260ms ease, border-color 260ms ease, opacity 300ms ease, transform 300ms cubic-bezier(.22, 1, .36, 1);
}
body.pro-mode .rl-move-editor-service select:not(#none) {
  min-width: 0;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #1f2b26;
  background: transparent;
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease;
}
body.pro-mode .rl-move-editor-service select:not(#none):hover,
body.pro-mode .rl-move-editor-service select:not(#none):focus { border-color: #cfe3d9; background: #fff; outline: none; }
body.pro-mode .rl-move-editor-service time { color: #5f6b66; font-size: .8rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
body.pro-mode .rl-move-editor-number {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #1f6b52;
  font-size: .72rem;
  font-weight: 800;
  transition: transform 300ms cubic-bezier(.34, 1.56, .64, 1), background-color 200ms ease;
}
body.pro-mode .rl-move-editor-number.is-segment-1 { background: #2f7fb8; }
body.pro-mode .rl-move-editor-number.is-segment-2 { background: #b26a1d; }
body.pro-mode .rl-move-editor-number.is-segment-3 { background: #7a5bc4; }
body.pro-mode .rl-move-editor-service.is-changed { border-color: #b9dfcd; background: #f0faf5; }
body.pro-mode .rl-move-editor-service.is-new {
  border-color: #9fd3bd;
  background: #effaf4;
  animation: rl-move-row-in 520ms cubic-bezier(.34, 1.45, .64, 1) both;
}
body.pro-mode .rl-move-editor-service.is-removed {
  border-style: dashed;
  background: #f7f7f7;
  opacity: .62;
}
body.pro-mode .rl-move-editor-service.is-removed select:not(#none) { text-decoration: line-through; cursor: default; }
body.pro-mode .rl-move-editor-service.is-removed .rl-move-editor-number { background: #a3aaa7; transform: scale(.82); }
body.pro-mode .rl-move-editor-row-actions { display: inline-flex; align-items: center; gap: 6px; }
body.pro-mode .rl-move-editor-chip {
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid #d9e1dd;
  border-radius: 999px;
  color: #2f5446;
  background: #fff;
  font: inherit;
  font-size: .76rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 220ms cubic-bezier(.34, 1.56, .64, 1), border-color 160ms ease, background-color 160ms ease;
}
body.pro-mode .rl-move-editor-chip:hover:not(:disabled) { border-color: #9fd3bd; background: #eef8f3; transform: translateY(-1px); }
body.pro-mode .rl-move-editor-chip:disabled { opacity: .5; cursor: not-allowed; }
body.pro-mode .rl-move-editor-chip.is-undo { border-color: #1f6b52; color: #1f6b52; }
body.pro-mode .rl-move-editor-remove {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  color: #8a948f;
  background: transparent;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease, transform 260ms cubic-bezier(.34, 1.56, .64, 1);
}
body.pro-mode .rl-move-editor-remove:hover { color: #b42318; background: #fdecea; transform: rotate(90deg) scale(1.08); }
body.pro-mode .rl-move-editor-label-stack { display: grid; justify-items: start; align-content: start; gap: 10px; padding-top: 10px; }
body.pro-mode .rl-move-editor-label-stack > .rl-move-editor-label { padding-top: 0; }
body.pro-mode .rl-move-editor-add {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  padding: 0;
  border: 1.5px dashed #9fd3bd;
  border-radius: 50%;
  color: #1f6b52;
  background: #fff;
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 240ms ease, transform 320ms cubic-bezier(.34, 1.56, .64, 1);
}
body.pro-mode .rl-move-editor-add > svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; transition: transform 380ms cubic-bezier(.34, 1.56, .64, 1); }
body.pro-mode .rl-move-editor-add:hover:not(:disabled),
body.pro-mode .rl-move-editor-add:focus-visible {
  border-style: solid;
  border-color: #1f6b52;
  color: #fff;
  background: #1f6b52;
  box-shadow: 0 6px 16px rgb(31 107 82 / 24%);
  transform: scale(1.06);
}
body.pro-mode .rl-move-editor-add:hover:not(:disabled) > svg { transform: rotate(90deg); }
body.pro-mode .rl-move-editor-add:active:not(:disabled) { transform: scale(.92); }
body.pro-mode .rl-move-editor-add:disabled { opacity: .45; cursor: not-allowed; }
body.pro-mode .rl-move-editor-group.is-services > :not(.rl-move-editor-label-stack) { grid-column: 2; }
body.pro-mode .business-booking-move-confirmation .rl-booking-changes > li { animation: rl-change-in 380ms cubic-bezier(.22, 1, .36, 1) both; }
/* The late mark in the details: a toggle, amber while on. */
body.pro-mode .business-booking-late-action { transition: background-color 220ms ease, border-color 220ms ease, color 220ms ease, box-shadow 260ms ease, transform 220ms cubic-bezier(.34, 1.56, .64, 1); }
body.pro-mode .business-booking-late-action.is-on { border-color: #f0b429 !important; color: #7a4b00 !important; background: #fff7e0 !important; box-shadow: 0 0 0 3px rgb(240 180 41 / 16%); }
@keyframes rl-move-editor-in { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: none; } }
@keyframes rl-move-row-in { 0% { opacity: 0; transform: translateY(-6px) scale(.96); } 60% { opacity: 1; transform: scale(1.015); } 100% { transform: none; } }
@keyframes rl-change-in { 0% { opacity: 0; transform: translateX(-8px); } 100% { opacity: 1; transform: none; } }
@media (max-width: 640px) {
  body.pro-mode .rl-move-editor-group { grid-template-columns: minmax(0, 1fr); }
  body.pro-mode .rl-move-editor-label { padding-top: 0; }
  body.pro-mode .rl-move-editor-group.is-services > :not(.rl-move-editor-label-stack) { grid-column: 1; }
  body.pro-mode .rl-move-editor-label-stack { display: flex; align-items: center; justify-content: space-between; width: 100%; padding-top: 0; }
  body.pro-mode .rl-date-pick-panel { width: min(300px, calc(100vw - 72px)); }
  body.pro-mode .rl-move-editor-service { grid-template-columns: 24px minmax(0, 1fr) auto; }
  body.pro-mode .rl-move-editor-service time { grid-column: 2; grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) {
  body.pro-mode :is(.rl-move-editor-group, .rl-move-editor-service, .rl-booking-changes > li, .business-booking-late-action, .rl-date-pick-panel, .rl-date-pick-days, .rl-date-pick-day, .rl-copy-button, .rl-copy-button svg, .business-calendar-event-tooltip, .business-modal, .business-modal-backdrop) { animation: none !important; transition: none !important; }
}

/* The editor's own pickers. Times, the customer and the stylist use the
   app's dropdown (business/dropdowns.js), with a search box for times and
   customers; the date opens a month under its field that fades and settles
   in and out (renderBookingEditorDatePicker). */
body.pro-mode .rl-move-editor-group.is-when { position: relative; z-index: 3; }
body.pro-mode .rl-move-editor-field.is-time { flex: 1 1 124px; }
body.pro-mode .rl-move-editor-field .prelook-select-shell { width: 100%; }
body.pro-mode .rl-move-editor-field .prelook-select-trigger { min-height: 42px; border-radius: 11px; font-variant-numeric: tabular-nums; }
body.pro-mode .rl-move-editor-field.is-derived .prelook-select-trigger:disabled { color: #55635d; background: #f4f7f6; opacity: 1; cursor: default; }
body.pro-mode .rl-date-pick { position: relative; }
body.pro-mode .rl-date-pick-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 0 12px 0 13px;
  border: 1px solid #d9e1dd;
  border-radius: 11px;
  color: #1f2b26;
  background: #fff;
  font: inherit;
  font-size: .9rem;
  font-weight: 550;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 220ms ease, background-color 200ms ease;
}
body.pro-mode .rl-date-pick-trigger > svg { flex: none; width: 17px; height: 17px; fill: none; stroke: #5f6b66; stroke-width: 1.8; stroke-linecap: round; transition: stroke 160ms ease, transform 320ms cubic-bezier(.34, 1.56, .64, 1); }
body.pro-mode .rl-date-pick-trigger:hover { border-color: #a9c4b8; }
body.pro-mode .rl-date-pick.is-open .rl-date-pick-trigger,
body.pro-mode .rl-date-pick-trigger:focus-visible { border-color: #1f6b52; outline: none; box-shadow: 0 0 0 3px rgb(31 107 82 / 16%); }
body.pro-mode .rl-date-pick.is-open .rl-date-pick-trigger > svg { stroke: #1f6b52; transform: scale(1.08); }
body.pro-mode .rl-date-pick-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  width: 292px;
  padding: 12px 12px 10px;
  border: 1px solid #dfe7e3;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 60px rgb(23 43 42 / 18%), 0 4px 12px rgb(23 43 42 / 7%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px) scale(.97);
  transform-origin: 24px top;
  transition: opacity 170ms ease, transform 240ms cubic-bezier(.4, 0, .2, 1), visibility 0s linear 240ms;
}
body.pro-mode .rl-date-pick.is-open .rl-date-pick-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity 200ms ease, transform 340ms cubic-bezier(.22, 1, .36, 1), visibility 0s;
}
body.pro-mode .rl-date-pick-panel > header { display: grid; grid-template-columns: 30px minmax(0, 1fr) 30px; align-items: center; margin-bottom: 8px; }
body.pro-mode .rl-date-pick-panel > header > strong { color: #1f2b26; font-size: .9rem; font-weight: 700; text-align: center; }
body.pro-mode .rl-date-pick-nav {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #2f5446;
  background: transparent;
  cursor: pointer;
  transition: background-color 160ms ease, transform 220ms cubic-bezier(.34, 1.56, .64, 1);
}
body.pro-mode .rl-date-pick-nav > svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
body.pro-mode .rl-date-pick-nav:hover { background: #eef8f3; }
body.pro-mode .rl-date-pick-nav:active { transform: scale(.88); }
body.pro-mode :is(.rl-date-pick-weekdays, .rl-date-pick-days) { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
body.pro-mode .rl-date-pick-weekdays > i { padding: 4px 0 6px; color: #8a948f; font-size: .7rem; font-style: normal; font-weight: 700; text-align: center; }
body.pro-mode .rl-date-pick-days.is-from-right { animation: rl-date-days-right 280ms cubic-bezier(.22, 1, .36, 1) both; }
body.pro-mode .rl-date-pick-days.is-from-left { animation: rl-date-days-left 280ms cubic-bezier(.22, 1, .36, 1) both; }
body.pro-mode .rl-date-pick-day {
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  color: #1f2b26;
  background: transparent;
  font: inherit;
  font-size: .84rem;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, transform 220ms cubic-bezier(.34, 1.56, .64, 1);
}
body.pro-mode .rl-date-pick-day:hover { background: #eef8f3; }
body.pro-mode .rl-date-pick-day:active { transform: scale(.9); }
body.pro-mode .rl-date-pick-day.is-outside { color: #b3bcb8; }
body.pro-mode .rl-date-pick-day.is-today { box-shadow: inset 0 0 0 1.5px #9fd3bd; }
body.pro-mode .rl-date-pick-day.is-selected { color: #fff; background: #1f6b52; box-shadow: 0 4px 12px rgb(31 107 82 / 28%); animation: rl-date-day-pop 320ms cubic-bezier(.34, 1.56, .64, 1); }
body.pro-mode .rl-date-pick-panel > footer { display: flex; justify-content: flex-end; margin-top: 6px; }
body.pro-mode .rl-date-pick-today {
  min-height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  color: #1f6b52;
  background: transparent;
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 160ms ease;
}
body.pro-mode .rl-date-pick-today:hover { background: #eef8f3; }
@keyframes rl-date-days-right { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes rl-date-days-left { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes rl-date-day-pop { 0% { transform: scale(.8); } 60% { transform: scale(1.08); } 100% { transform: none; } }

/* Every dialog comes in and goes out softly: the backdrop fades and the
   dialog rises in, then sinks and fades away (releaseClosingModalLayers keeps
   a closing dialog on screen for this). */
body.pro-mode .business-modal-layer > .business-modal-backdrop { animation: rl-backdrop-in 240ms ease both; }
body.pro-mode .business-modal-layer > .business-modal { animation: rl-dialog-in 360ms cubic-bezier(.22, 1, .36, 1) both; }
body.pro-mode .business-modal-layer.is-leaving { pointer-events: none; }
body.pro-mode .business-modal-layer.is-leaving > .business-modal-backdrop { animation: rl-backdrop-out 340ms cubic-bezier(.4, 0, .2, 1) var(--rl-leave-delay, 0ms) both; }
body.pro-mode .business-modal-layer.is-leaving > .business-modal { animation: rl-dialog-out 320ms cubic-bezier(.4, 0, .2, 1) var(--rl-leave-delay, 0ms) both; will-change: opacity, transform; }
/* A leaving dialog is re-attached above the page (releaseClosingModalLayers):
   everything in it stays exactly as it was, rather than playing its own
   entrance again. */
body.pro-mode .business-modal-layer.is-leaving > .business-modal *,
body.pro-mode .business-modal-layer.is-leaving > .business-modal *::before,
body.pro-mode .business-modal-layer.is-leaving > .business-modal *::after { animation: none !important; transition: none !important; }
@keyframes rl-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rl-backdrop-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes rl-dialog-in { from { opacity: 0; transform: translateY(14px) scale(.975); } to { opacity: 1; transform: none; } }
@keyframes rl-dialog-out { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(8px) scale(.965); } }

/* Booking details: the manage bar is the buttons alone, close to the foot. */
body.pro-mode .business-team-drawer .business-calendar-booking-drawer-content.is-refined > .business-calendar-booking-actions {
  gap: 0 !important;
  padding: 10px 26px 12px !important;
}
body.pro-mode .business-team-drawer .business-calendar-booking-actions .business-booking-actions > button {
  min-height: 36px !important;
}

/* The appointment hover card (bookingEventTooltip): a header in the
   stylist's colour (white text on a dark one) with the booking code, and a
   copy button on every line. It is read and copied from, so the pointer is
   the ordinary arrow, not the card's grab hand. */
body.pro-mode .business-calendar-event-tooltip[data-schedule-tooltip-open],
body.pro-mode .business-calendar-event-tooltip[data-schedule-tooltip-open] * { cursor: default !important; }
body.pro-mode .business-calendar-event-tooltip[data-schedule-tooltip-open] {
  width: min(320px, calc(100vw - 24px));
  border-radius: 14px;
  animation: rl-tooltip-in 200ms cubic-bezier(.22, 1, .36, 1) both;
}
body.pro-mode .business-calendar-event-tooltip[data-schedule-tooltip-open] > .rl-tooltip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 8px 8px 8px 14px;
  border: 0;
  color: #1f2b26;
  background: var(--tooltip-head, var(--stylist-color, #edf7f2));
}
body.pro-mode .business-calendar-event-tooltip[data-schedule-tooltip-open][data-head-tone="dark"] > .rl-tooltip-head { color: #fff; }
body.pro-mode .business-calendar-event-tooltip[data-schedule-tooltip-open] > .rl-tooltip-head > strong {
  min-width: 0;
  padding: 0;
  border: 0;
  color: inherit;
  background: none;
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.3;
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
}
body.pro-mode .business-calendar-event-tooltip > .rl-tooltip-head > .rl-tooltip-code {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 1px;
  color: inherit;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .03em;
  font-variant-numeric: tabular-nums;
  opacity: .9;
}
body.pro-mode .business-calendar-event-tooltip[data-schedule-tooltip-open] > .rl-tooltip-head > .rl-tooltip-code > span { color: inherit; font: inherit; }
body.pro-mode .business-calendar-event-tooltip[data-schedule-tooltip-open] dd { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
body.pro-mode .business-calendar-event-tooltip[data-schedule-tooltip-open] dd > span { min-width: 0; }
body.pro-mode .business-calendar-event-tooltip .rl-copy-button {
  display: inline-grid;
  flex: none;
  width: 26px;
  height: 26px;
  place-items: center;
  margin: -4px -6px -4px 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  color: #6b7a74;
  background: transparent;
  opacity: .5;
  cursor: pointer !important;
  transition: opacity 160ms ease, color 160ms ease, background-color 160ms ease, transform 220ms cubic-bezier(.34, 1.56, .64, 1);
}
body.pro-mode .business-calendar-event-tooltip .rl-copy-button > svg {
  grid-area: 1 / 1;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity 180ms ease, transform 320ms cubic-bezier(.34, 1.56, .64, 1);
  pointer-events: none;
}
body.pro-mode .business-calendar-event-tooltip .rl-copy-button > .rl-copy-done { opacity: 0; transform: scale(.4); stroke-width: 2.4; }
body.pro-mode .business-calendar-event-tooltip :is(dl > div:hover, .rl-tooltip-head:hover) .rl-copy-button { opacity: .85; }
body.pro-mode .business-calendar-event-tooltip .rl-copy-button:hover,
body.pro-mode .business-calendar-event-tooltip .rl-copy-button:focus-visible { opacity: 1; color: #1f6b52; background: rgb(31 107 82 / 10%); }
body.pro-mode .business-calendar-event-tooltip .rl-copy-button:active { transform: scale(.86); }
body.pro-mode .business-calendar-event-tooltip .rl-copy-button.is-copied { opacity: 1; color: #1f8a5b; }
body.pro-mode .business-calendar-event-tooltip .rl-copy-button.is-copied > .rl-copy-icon { opacity: 0; transform: scale(.4) rotate(-25deg); }
body.pro-mode .business-calendar-event-tooltip .rl-copy-button.is-copied > .rl-copy-done { opacity: 1; transform: none; }
body.pro-mode .business-calendar-event-tooltip .rl-tooltip-head .rl-copy-button { color: inherit; opacity: .75; }
body.pro-mode .business-calendar-event-tooltip[data-head-tone="dark"] .rl-tooltip-head .rl-copy-button:is(:hover, :focus-visible, .is-copied) { color: #fff; background: rgb(255 255 255 / 18%); }
body.pro-mode .business-calendar-event-tooltip:not([data-head-tone="dark"]) .rl-tooltip-head .rl-copy-button:is(:hover, :focus-visible) { color: #1f2b26; background: rgb(0 0 0 / 7%); }
@keyframes rl-tooltip-in { from { opacity: 0; translate: 0 4px; } to { opacity: 1; translate: 0 0; } }

/* Round buttons in the editor are true circles: no button rule elsewhere
   may stretch them (a min-height or min-width, padding, a flex grow). */
body.pro-mode .business-modal :is(.rl-move-editor-add, .rl-move-editor-remove) {
  box-sizing: border-box !important;
  flex: none !important;
  aspect-ratio: 1 / 1;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  border-radius: 50% !important;
}
body.pro-mode .business-modal .rl-move-editor-add { width: 36px !important; height: 36px !important; max-width: 36px; max-height: 36px; }
body.pro-mode .business-modal .rl-move-editor-remove { width: 30px !important; height: 30px !important; max-width: 30px; max-height: 30px; }
body.pro-mode .business-modal .rl-move-editor-remove > span { display: block; line-height: 1; transform: translateY(-1px); }

/* Booking details: one kind of button. Every action is the same quiet
   button; its meaning shows as a tint under the pointer (green for what the
   appointment becomes, amber for a no-show or late), and colour stays only
   on a toggle that is on (Late) and on the two ends: Modify, first, in
   green, and Cancel, last, in red. */
body.pro-mode .business-team-drawer .business-calendar-booking-actions .business-booking-actions > button:not([disabled]) {
  border: 1px solid #dfe5e2 !important;
  color: #26332e !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgb(22 32 28 / 4%) !important;
  font-weight: 600 !important;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 220ms ease, transform 200ms cubic-bezier(.34, 1.56, .64, 1) !important;
}
body.pro-mode .business-team-drawer .business-calendar-booking-actions .business-booking-actions > button:not([disabled]):active { transform: scale(.96); }
body.pro-mode .business-team-drawer .business-calendar-booking-actions .business-booking-actions > button[data-business-action="booking-transition"]:is([data-status="confirmed"], [data-status="booked"], [data-status="completed"], [data-status="checked_in"], [data-status="in_progress"]):not([disabled]):hover,
body.pro-mode .business-team-drawer .business-calendar-booking-actions .business-booking-actions > button[data-business-action="respond-booking-approval"]:not([disabled]):hover {
  border-color: #9fd3bd !important;
  color: #1f6b52 !important;
  background: #eef8f3 !important;
}
body.pro-mode .business-team-drawer .business-calendar-booking-actions .business-booking-actions > button[data-business-action="booking-transition"][data-status="declined"]:not([disabled]):hover,
body.pro-mode .business-team-drawer .business-calendar-booking-actions .business-booking-actions > button[data-business-action="request-booking-approval-decline"]:not([disabled]):hover {
  border-color: #e6b8bc !important;
  color: #a1323d !important;
  background: #fdf1f2 !important;
}
body.pro-mode .business-team-drawer .business-calendar-booking-actions .business-booking-actions > button:is([data-business-action="booking-transition"][data-status="no_show"], .business-booking-late-action):not([disabled]):hover {
  border-color: #ecd49a !important;
  color: #7a5308 !important;
  background: #fdf7e6 !important;
}
body.pro-mode .business-team-drawer .business-calendar-booking-actions .business-booking-actions > button.business-booking-late-action.is-on:not([disabled]) {
  border-color: #e9a91e !important;
  color: #5c3b00 !important;
  background: #fbd677 !important;
  box-shadow: 0 2px 8px rgb(233 169 30 / 28%) !important;
}
/* Modify leads, in green; Cancel sits at the far end, in red. */
body.pro-mode .business-team-drawer .business-calendar-booking-actions .business-booking-actions > button[data-business-action="booking-focus-modify"]:not([disabled]) {
  border-color: #9fd3bd !important;
  color: #1f6b52 !important;
  background: #e6f5ee !important;
}
body.pro-mode .business-team-drawer .business-calendar-booking-actions .business-booking-actions > button[data-business-action="booking-focus-modify"]:not([disabled]):hover {
  border-color: #1f6b52 !important;
  color: #fff !important;
  background: #1f6b52 !important;
}
body.pro-mode .business-team-drawer .business-calendar-booking-actions .business-booking-actions > button[data-business-action="booking-transition"][data-status="cancelled"]:not([disabled]) {
  margin-left: auto !important;
  border-color: #f0b9bf !important;
  color: #b42318 !important;
  background: #fdeef0 !important;
}
body.pro-mode .business-team-drawer .business-calendar-booking-actions .business-booking-actions > button[data-business-action="booking-transition"][data-status="cancelled"]:not([disabled]):hover {
  border-color: #b42318 !important;
  color: #fff !important;
  background: #b42318 !important;
}

/* Customer details, to read (renderClientEditor view): the stylists the
   customer belongs to, the appointment summary, the identity, the notes,
   then history and what is to come. Modify opens the editor. */
body.pro-mode .business-crm-client-view { display: grid; gap: 14px; }
/* The parts above the history keep the history's side margins (22px) and
   start the same distance below the header. */
body.pro-mode .business-crm-client-view > :is(.rl-crm-stylists, .business-crm-customer-summary, .business-crm-identity-card, .rl-crm-notes) { margin-inline: 22px; }
body.pro-mode .business-crm-client-view > :first-child { margin-top: 18px; }
body.pro-mode .business-crm-client-view > .business-crm-customer-bookings { margin-top: 4px; }
body.pro-mode .business-crm-client-view > :is(section, .business-crm-customer-bookings) { animation: rl-move-editor-in 420ms cubic-bezier(.22, 1, .36, 1) both; }
body.pro-mode .business-crm-client-view > :nth-child(2) { animation-delay: 40ms; }
body.pro-mode .business-crm-client-view > :nth-child(3) { animation-delay: 80ms; }
body.pro-mode .business-crm-client-view > :nth-child(4) { animation-delay: 120ms; }
body.pro-mode .business-crm-client-view > :nth-child(5) { animation-delay: 160ms; }
body.pro-mode .rl-crm-stylists { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid #e3e8e6; border-radius: 14px; background: #fafcfb; }
body.pro-mode .rl-crm-stylists > span { color: #6b7a74; font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
body.pro-mode .rl-crm-stylists > div { display: flex; flex-wrap: wrap; gap: 8px; }
body.pro-mode .rl-crm-stylist {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 3px 12px 3px 3px;
  border: 1px solid #dfe7e3;
  border-radius: 999px;
  color: #1f2b26;
  background: #fff;
  font-size: .84rem;
  font-weight: 600;
}
body.pro-mode .rl-crm-stylist > img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
body.pro-mode .rl-crm-stylist.is-unassigned { padding: 3px 12px; color: #7b8782; font-weight: 550; }
body.pro-mode .rl-crm-notes { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid #e3e8e6; border-radius: 14px; background: #fff; scroll-margin: 90px; }
body.pro-mode .rl-crm-notes > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
body.pro-mode .rl-crm-notes > header > h3 { margin: 0; color: #1f2b26; font-size: .95rem; }
/* Each note its own card (sticky-note yellow), so what someone wrote stands
   apart from the panel's own words; edit and delete on the card. */
body.pro-mode .rl-crm-notes > header > h3 { display: inline-flex; align-items: center; gap: 7px; }
body.pro-mode .rl-crm-note-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; color: #8b6b14; background: #fbefc6; font-size: .7rem; font-weight: 700; }
body.pro-mode .rl-crm-note-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
body.pro-mode .rl-crm-note { margin: 0; color: #3a3220; font-size: .9rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
body.pro-mode .rl-crm-note-item > footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 26px; }
body.pro-mode .rl-crm-note-actions { display: inline-flex; gap: 4px; margin-right: -6px; opacity: .72; transition: opacity 160ms ease; }
body.pro-mode .rl-crm-note-item:hover .rl-crm-note-actions, body.pro-mode .rl-crm-note-actions:focus-within { opacity: 1; }
body.pro-mode .rl-crm-note-action { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 999px; color: #6f6245; background: transparent; cursor: pointer; transition: background-color 160ms ease, color 160ms ease; }
body.pro-mode .rl-crm-note-action > svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
body.pro-mode .rl-crm-note-action:hover { color: #3a3220; background: rgb(139 107 20 / 12%); }
body.pro-mode .rl-crm-note-action.is-danger:hover { color: #b42318; background: #fde8e6; }
body.pro-mode .rl-crm-note-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px dashed #e8d6a0; }
body.pro-mode .rl-crm-note-confirm > span { margin-right: auto; color: #3a3220; font-size: .84rem; font-weight: 600; }
body.pro-mode .rl-crm-note-item.is-editing { padding: 0; border: 0; background: transparent; }
body.pro-mode .rl-crm-note-composer { display: grid; gap: 8px; padding: 10px; border: 1px solid #e8d6a0; border-radius: 12px; background: #fff8e2; }
body.pro-mode .rl-crm-note-composer > textarea { box-sizing: border-box; width: 100%; min-height: 84px; padding: 9px 11px; border: 1px solid #e6d7a8; border-radius: 9px; color: #2b2618; background: #fffdf5; font: inherit; font-size: .9rem; line-height: 1.5; resize: vertical; }
body.pro-mode .rl-crm-note-composer > textarea:focus { border-color: #c9a227; outline: 2px solid rgb(201 162 39 / 22%); outline-offset: 1px; }
body.pro-mode .rl-crm-note-composer > footer { display: flex; justify-content: flex-end; gap: 8px; }
body.pro-mode .rl-crm-note-empty { margin: 0; color: #8a948f; font-size: .88rem; font-style: italic; }
body.pro-mode .rl-crm-private { display: grid; gap: 8px; margin: 4px 0 0; padding-top: 10px; border-top: 1px solid #edf1ef; }
body.pro-mode .rl-crm-private > div { display: grid; gap: 2px; }
body.pro-mode .rl-crm-private dt { color: #6b7a74; font-size: .72rem; font-weight: 600; }
body.pro-mode .rl-crm-private dd { margin: 0; color: #1f2b26; font-size: .86rem; white-space: pre-wrap; }

/* Modify customer: the same cards as Modify appointment. */
body.pro-mode .business-modal.rl-crm-edit-modal { width: min(760px, 100%); }
body.pro-mode .rl-crm-edit-form { display: grid; gap: 12px; }
body.pro-mode .rl-crm-edit-form > :is(section, .business-crm-data-editor, .business-crm-identity-card) { animation: rl-move-editor-in 420ms cubic-bezier(.22, 1, .36, 1) both; }
body.pro-mode .rl-crm-edit-section { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid #e3e8e6; border-radius: 16px; background: #fff; }
body.pro-mode .rl-crm-edit-section > header > h3 { margin: 0; color: #1f2b26; font-size: .95rem; }
body.pro-mode .rl-crm-edit-section > header > p { margin: 3px 0 0; color: #6b7a74; font-size: .78rem; }
body.pro-mode .rl-crm-assign-picker { margin: 0; padding: 0; border: 0; }
body.pro-mode .rl-crm-assign-picker > div { display: flex; flex-wrap: wrap; gap: 8px; }
body.pro-mode .rl-crm-assign-choice {
  position: relative;
  border: 1.5px solid #e3e8e6 !important;
  background: #fff !important;
  cursor: pointer;
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 220ms ease, transform 220ms cubic-bezier(.34, 1.56, .64, 1);
}
body.pro-mode .rl-crm-assign-choice:hover { border-color: #9fd3bd !important; transform: translateY(-1px); }
body.pro-mode .rl-crm-assign-choice:has(input:checked) {
  border-color: #1f6b52 !important;
  background: #eef8f3 !important;
  box-shadow: 0 4px 12px rgb(31 107 82 / 12%);
}
body.pro-mode .rl-crm-assign-choice > .rl-picker-check {
  position: absolute;
  top: -6px;
  right: -6px;
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #1f6b52;
  box-shadow: 0 0 0 2px #fff;
  font-size: 10px;
  font-style: normal;
  opacity: 0;
  transform: scale(.4);
  transition: opacity 180ms ease, transform 260ms cubic-bezier(.34, 1.56, .64, 1);
}
body.pro-mode .rl-crm-assign-choice > .rl-picker-check::before { content: "✓"; font-weight: 800; }
body.pro-mode .rl-crm-assign-choice:has(input:checked) > .rl-picker-check { opacity: 1; transform: none; }
body.pro-mode .rl-crm-assign-choice > input { position: absolute; opacity: 0; pointer-events: none; }
body.pro-mode .rl-crm-assign-choice.is-locked { cursor: default; }
body.pro-mode .rl-crm-assign-choice.is-locked:hover { transform: none; }
body.pro-mode .rl-crm-assign-choice small { display: block; color: #7b8782; font-size: .7rem; font-weight: 500; }
body.pro-mode .rl-crm-assign-warning { margin: 0; padding: 8px 10px; border-radius: 10px; color: #8a4b00; background: #fff6e0; font-size: .78rem; animation: rl-change-in 320ms cubic-bezier(.22, 1, .36, 1) both; }
body.pro-mode .rl-crm-assign-warning[hidden] { display: none; }
body.pro-mode .rl-crm-edit-footer {
  position: sticky;
  bottom: -20px;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: 4px -20px -20px;
  padding: 12px 20px;
  border-top: 1px solid #e3e8e6;
  background: rgb(255 255 255 / 96%);
  backdrop-filter: blur(6px);
}

/* Booking details: the customer's notes, read, under the appointment's own,
   each a note card; the arrow at the top right opens the customer at their
   notes. */
body.pro-mode .business-calendar-booking-modification.is-customer-note > .rl-booking-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
body.pro-mode .rl-booking-customer-note-open { display: inline-grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; margin: -4px -4px -4px 0; padding: 0; border: 1px solid #dfe5e2; border-radius: 999px; color: #1f6b52; background: #fff; font: inherit; cursor: pointer; transition: border-color 180ms ease, background-color 180ms ease, transform 200ms cubic-bezier(.34, 1.56, .64, 1); }
body.pro-mode .rl-booking-customer-note-open > i { font-style: normal; font-size: .95rem; line-height: 1; transition: transform 220ms cubic-bezier(.34, 1.56, .64, 1); }
body.pro-mode .rl-booking-customer-note-open:hover { border-color: #9fd3bd; background: #f1faf5; }
body.pro-mode .rl-booking-customer-note-open:hover > i { transform: translateX(2px); }
body.pro-mode .rl-booking-customer-note-open:active { transform: scale(.94); }
body.pro-mode .rl-booking-customer-notes { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
body.pro-mode :is(.rl-booking-customer-note, .rl-crm-note-item) { display: grid; gap: 6px; padding: 11px 14px; border: 1px solid #efe1b4; border-radius: 12px; color: #3a3220; background: #fff8e2; }
body.pro-mode .rl-booking-customer-note > p { margin: 0; font-size: .9rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
body.pro-mode :is(.rl-booking-customer-note, .rl-crm-note-item) small { color: #8b7a4c; font-size: .72rem; }
body.pro-mode .rl-booking-customer-note-empty { margin: 0; color: #8a948f; font-size: .86rem; font-style: italic; }
@media (prefers-reduced-motion: reduce) {
  body.pro-mode :is(.business-crm-client-view > *, .rl-crm-edit-form > *, .rl-crm-assign-warning) { animation: none !important; }
}

/* Every panel that opens from the right ends in the same bar: white, a
   hairline above it, 22px in from the sides, and the same pill buttons, 40px
   tall. The main action is last, on the right, with what closes or goes back
   just before it; a delete, an archive, Back or a save state sits on the
   left (booking details: Modify on the left, Cancel on the right). */
body.pro-mode :is(
  .business-team-drawer .business-team-drawer-footer,
  .business-service-inspector > form > .business-service-inspector-footer,
  .business-team-drawer .business-calendar-booking-drawer-content.is-refined > .business-calendar-booking-actions
) {
  box-sizing: border-box;
  min-height: 64px;
  padding: 12px 22px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  border-top: 1px solid #e3e8e6 !important;
  background: #fff !important;
  box-shadow: 0 -4px 16px rgb(25 57 46 / 4%) !important;
  backdrop-filter: none !important;
}
body.pro-mode :is(
  .business-team-drawer .business-team-drawer-footer,
  .business-service-inspector > form > .business-service-inspector-footer,
  .business-team-drawer .business-calendar-booking-actions .business-booking-actions
) button:not(.icon-button):not(.business-switch),
body.pro-mode .business-team-drawer .communication-form-footer > button {
  min-height: 40px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
}
body.pro-mode .business-team-drawer .business-team-drawer-footer :is(.business-team-drawer-footer-actions, .business-team-drawer-footer-danger) > button,
body.pro-mode .business-service-inspector > form > .business-service-inspector-footer button:not(.icon-button) { min-width: 84px !important; }
body.pro-mode .business-team-drawer .business-team-drawer-footer-actions { gap: 8px !important; }
/* One height for every bar (12 + 40 + 12 and its hairline): the button
   groups inside take only their buttons' height. */
body.pro-mode :is(
  .business-team-drawer .business-team-drawer-footer,
  .business-service-inspector > form > .business-service-inspector-footer,
  .business-team-drawer .business-calendar-booking-drawer-content.is-refined > .business-calendar-booking-actions
) { min-height: 65px !important; }
body.pro-mode :is(
  .business-team-drawer .business-team-drawer-footer,
  .business-service-inspector > form > .business-service-inspector-footer
) > div { min-height: 0 !important; }
@media (max-width: 560px) {
  body.pro-mode :is(
    .business-team-drawer .business-team-drawer-footer,
    .business-service-inspector > form > .business-service-inspector-footer,
    .business-team-drawer .business-calendar-booking-drawer-content.is-refined > .business-calendar-booking-actions
  ) { padding-inline: 16px !important; }
}

/* "Save your changes?" over a panel or a dialog being left (unsavedGuard):
   above every dialog, the same dialog as the service editor's. */
body.pro-mode .business-modal-layer.rl-unsaved-layer { z-index: 1300; }

/* Customer details: a large window in the middle of the screen (90% of it,
   the rest a margin all round), opening and closing like a dialog. Profile,
   Appointments and Status & groups are tabs under the name. */
body.pro-mode .business-team-drawer-layer.is-centered { place-items: center !important; grid-template-rows: minmax(0, 1fr) !important; padding: 5vh 5vw !important; }
body.pro-mode .business-team-drawer-layer.is-centered > .business-team-drawer {
  width: 100% !important;
  max-width: 1480px !important;
  height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 18px !important;
  box-shadow: 0 30px 80px rgb(16 28 22 / 22%) !important;
}
body.pro-mode .business-team-drawer-layer.is-centered.is-opening > .business-team-drawer { animation: rl-dialog-in 380ms cubic-bezier(.22, 1, .36, 1) both !important; }
body.pro-mode .business-team-drawer-layer.is-centered.is-closing > .business-team-drawer { animation: rl-dialog-out 230ms cubic-bezier(.4, 0, .2, 1) both !important; }
body.pro-mode .business-team-drawer-layer.is-centered .business-team-drawer-header { align-items: center; gap: 14px; padding: 20px 28px 12px !important; border-bottom: 0 !important; }
body.pro-mode .business-team-drawer-layer.is-centered .business-team-drawer-header h2 { font-size: 1.35rem; }
body.pro-mode .business-team-drawer-header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
body.pro-mode .business-team-drawer-layer.is-centered .business-team-drawer-header-actions .rl-crm-dialog-modify { min-height: 38px; padding: 0 18px; border-radius: 999px; font-size: 13.5px; font-weight: 600; }
body.pro-mode .rl-crm-dialog-avatar { display: inline-grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 999px; color: #fff; background: #c8532f; font-size: 1.05rem; font-weight: 650; }
body.pro-mode .business-team-drawer-layer.is-centered .business-team-drawer-body { padding: 0 !important; }
body.pro-mode .business-crm-client-view.is-tabbed { display: block; }
body.pro-mode .business-crm-client-view.is-tabbed > * { margin: 0; animation: none; }
body.pro-mode .rl-crm-tabs { position: sticky; top: 0; z-index: 6; display: flex; gap: 26px; padding: 0 28px; border-bottom: 1px solid #e3e8e6; background: #fff; }
body.pro-mode .rl-crm-tabs > button { position: relative; padding: 12px 0 11px; border: 0; color: #66726d; background: none; font: inherit; font-size: .92rem; font-weight: 550; cursor: pointer; transition: color 160ms ease; }
body.pro-mode .rl-crm-tabs > button::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; border-radius: 2px; background: #1f2b26; content: ""; transform: scaleX(0); transition: transform 220ms cubic-bezier(.22, 1, .36, 1); }
body.pro-mode .rl-crm-tabs > button:hover { color: #1f2b26; }
body.pro-mode .rl-crm-tabs > button.is-active { color: #1f2b26; }
body.pro-mode .rl-crm-tabs > button.is-active::after { transform: scaleX(1); }
body.pro-mode .rl-crm-tab-panel { padding: 22px 28px 32px; }
/* A window in tabs: the header and the tab names stay where they are; only
   what is under the tabs scrolls, and a scroll past either end stops there
   instead of pulling the tabs away from the header. */
body.pro-mode .business-team-drawer-layer.is-centered.is-tabbed > .business-team-drawer { display: flex !important; flex-direction: column !important; overflow: hidden !important; }
body.pro-mode .business-team-drawer-layer.is-centered.is-tabbed .business-team-drawer-header { flex: none !important; }
body.pro-mode .business-team-drawer-layer.is-centered.is-tabbed .business-team-drawer-body { display: flex !important; flex: 1 1 auto !important; flex-direction: column !important; min-height: 0 !important; overflow: hidden !important; overscroll-behavior: none; }
body.pro-mode .business-team-drawer-layer.is-centered.is-tabbed .business-team-drawer-body > :is(.business-crm-client-view.is-tabbed, .business-booking-settings-form.is-tabbed) { display: flex !important; flex: 1 1 auto !important; flex-direction: column !important; gap: 0 !important; min-height: 0 !important; }
body.pro-mode .business-team-drawer-layer.is-centered.is-tabbed .rl-crm-tabs { position: relative; top: auto; flex: none; }
/* Positioned, so a hidden control placed absolutely inside it stays inside
   it too: otherwise it hangs below the window and focus scrolls the window. */
body.pro-mode .business-team-drawer-layer.is-centered.is-tabbed [data-drawer-scroller] { position: relative; flex: 1 1 auto !important; min-height: 0 !important; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
body.pro-mode .business-team-drawer-layer.is-centered.is-tabbed .rl-crm-appt-table thead th { top: -22px; }
body.pro-mode .business-team-drawer-layer.is-centered.is-tabbed .business-booking-settings-footer { position: relative !important; flex: none !important; }
body.pro-mode .rl-crm-profile { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 18px; align-items: start; }
body.pro-mode .rl-crm-profile-main, body.pro-mode .rl-crm-profile-side { display: grid; gap: 16px; min-width: 0; }
body.pro-mode .rl-crm-profile :is(.rl-crm-stylists, .business-crm-customer-summary, .business-crm-identity-card, .rl-crm-notes) { margin: 0 !important; }
body.pro-mode .rl-crm-status-tab { max-width: 760px; }
body.pro-mode .rl-crm-status-section { display: grid; gap: 14px; padding: 18px 20px; border: 1px solid #e3e8e6; border-radius: 14px; background: #fff; }
body.pro-mode .rl-crm-status-section > header > h3 { margin: 0; color: #1f2b26; font-size: 1rem; }
body.pro-mode .rl-crm-status-section > header > p { margin: 4px 0 0; color: #7b8782; font-size: .8rem; }

/* Appointments: one table, to come above the line, past below it. */
body.pro-mode .rl-crm-appointments { border: 1px solid #e3e8e6; border-radius: 12px; background: #fff; }
body.pro-mode .rl-crm-appt-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .88rem; }
body.pro-mode .rl-crm-appt-table thead th { position: sticky; top: 45px; z-index: 3; padding: 12px 16px; border-bottom: 1px solid #e3e8e6; color: #1f2b26; background: #f6f8f7; font-weight: 600; text-align: left; white-space: nowrap; }
body.pro-mode .rl-crm-appt-table thead th:first-child { border-top-left-radius: 12px; }
body.pro-mode .rl-crm-appt-table thead th:last-child { border-top-right-radius: 12px; }
body.pro-mode .rl-crm-appt-table td { padding: 8px 16px; border-bottom: 1px solid #eef1ef; color: #2b3632; vertical-align: middle; }
body.pro-mode .rl-crm-appt-row { cursor: pointer; transition: background-color 140ms ease; }
body.pro-mode .rl-crm-appt-row:hover { background: #f6faf8; }
body.pro-mode .rl-crm-appt-row.is-past td { color: #56625d; }
body.pro-mode .rl-crm-appt-date { white-space: nowrap; }
body.pro-mode .rl-crm-appt-date > small { margin-left: 8px; color: #7b8782; font-size: .82rem; }
body.pro-mode .rl-crm-appt-price { font-variant-numeric: tabular-nums; white-space: nowrap; }
body.pro-mode .rl-crm-appt-table .rl-crm-appt-divider td { height: 0; padding: 0 !important; border-top: 1px solid #1f2b26 !important; border-bottom: 1px solid #1f2b26 !important; background: #1f2b26; }
body.pro-mode .rl-crm-appt-empty td { padding: 28px 16px; color: #7b8782; text-align: center; }
body.pro-mode .rl-crm-appt-more { position: relative; width: 52px; text-align: right; }
body.pro-mode .rl-crm-appt-menu-button { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 999px; color: #3c4844; background: transparent; cursor: pointer; transition: background-color 140ms ease; }
body.pro-mode .rl-crm-appt-menu-button > svg { width: 16px; height: 16px; fill: currentColor; }
body.pro-mode .rl-crm-appt-menu-button:hover, body.pro-mode .rl-crm-appt-menu-button[aria-expanded="true"] { background: #e9efec; }
body.pro-mode .rl-crm-appt-menu { position: absolute; top: calc(100% - 8px); right: 14px; z-index: 8; display: grid; min-width: 190px; padding: 6px; border: 1px solid #e3e8e6; border-radius: 12px; background: #fff; box-shadow: 0 14px 34px rgb(16 28 22 / 16%); text-align: left; animation: rl-dialog-in 180ms cubic-bezier(.22, 1, .36, 1) both; }
body.pro-mode .rl-crm-appt-menu > button { padding: 9px 12px; border: 0; border-radius: 8px; color: #1f2b26; background: none; font: inherit; font-size: .88rem; text-align: left; cursor: pointer; }
body.pro-mode .rl-crm-appt-menu > button:hover { background: #f1f5f3; }
body.pro-mode .rl-crm-appt-pager { position: sticky; bottom: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 10px 16px; border-top: 1px solid #e3e8e6; border-radius: 0 0 12px 12px; background: #f9fbfa; }
body.pro-mode .rl-crm-page-nav { display: inline-flex; align-items: center; gap: 4px; }
body.pro-mode .rl-crm-page-button { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border: 0; border-radius: 999px; color: #3c4844; background: none; font: inherit; font-size: .86rem; cursor: pointer; }
body.pro-mode .rl-crm-page-button:hover:not(:disabled) { background: #e9efec; }
body.pro-mode .rl-crm-page-button.is-current { color: #fff; background: #1f2b26; }
body.pro-mode .rl-crm-page-button:disabled { color: #b8c1bd; cursor: default; }
body.pro-mode .rl-crm-page-gap { color: #8a948f; }
body.pro-mode .rl-crm-page-size { display: inline-flex; align-items: center; gap: 8px; color: #3c4844; font-size: .86rem; }
body.pro-mode .rl-crm-page-size > select { min-height: 34px; padding: 0 28px 0 10px; border: 1px solid #dfe5e2; border-radius: 8px; background-color: #fff; font: inherit; }
@media (max-width: 1000px) {
  body.pro-mode .rl-crm-profile { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  body.pro-mode .business-team-drawer-layer.is-centered { padding: 0 !important; }
  body.pro-mode .business-team-drawer-layer.is-centered > .business-team-drawer { border-radius: 0 !important; }
  body.pro-mode .rl-crm-tabs { gap: 18px; padding: 0 16px; overflow-x: auto; }
  body.pro-mode .rl-crm-tab-panel { padding: 16px; }
  body.pro-mode .business-team-drawer-layer.is-centered.is-tabbed .rl-crm-appt-table thead th { top: -16px; }
  body.pro-mode .rl-crm-appointments { overflow-x: auto; }
}
body.pro-mode .rl-crm-note-item.is-pending small { color: #a08a4f; font-style: italic; }
body.pro-mode .rl-crm-note-item { overflow: hidden; }
/* Small controls keep their own size (the base button/select rule makes
   every one 44px tall, which stretched each appointment row). */
body.pro-mode :is(.rl-crm-appt-menu-button, .rl-crm-page-button, .rl-crm-appt-menu > button, .rl-crm-note-action, .rl-booking-customer-note-open) { min-height: 0; }
body.pro-mode .rl-crm-page-size > select { min-height: 34px; height: 34px; }
body.pro-mode .rl-crm-page-size > span { white-space: nowrap; }

/* Booking details: a large window in the middle of the screen like a
   customer's, everything on one page (two columns on a wide screen). Opened
   from a customer's window it sits over it, a little smaller, with that
   window still and dimmed behind it. */
body.pro-mode .rl-booking-columns { display: grid; gap: 18px; align-items: start; }
body.pro-mode .rl-booking-column { display: grid; gap: 18px; align-content: start; min-width: 0; }
@media (min-width: 1100px) {
  body.pro-mode .business-team-drawer-layer.is-centered .rl-booking-columns { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}
body.pro-mode .business-team-drawer-layer.is-centered .business-calendar-booking-drawer-content.is-refined { padding: 20px 28px 0; }
body.pro-mode .business-team-drawer-layer.is-centered .business-calendar-booking-drawer-content.is-refined > .business-calendar-booking-actions { margin-inline: -28px !important; }
body.pro-mode .business-team-drawer-layer.is-centered.is-stacked { padding: 9vh 9vw !important; }
body.pro-mode .business-team-drawer-layer.is-stacked > .business-team-drawer-backdrop { background: rgb(17 26 22 / 28%) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
body.pro-mode .business-team-drawer-layer.is-parent-snapshot { z-index: 1205 !important; pointer-events: none !important; }
body.pro-mode .business-team-drawer-layer.is-parent-snapshot > .business-team-drawer,
body.pro-mode .business-team-drawer-layer.is-parent-snapshot > .business-team-drawer-backdrop { animation: none !important; }
@media (max-width: 760px) {
  body.pro-mode .business-team-drawer-layer.is-centered.is-stacked { padding: 0 !important; }
  body.pro-mode .business-team-drawer-layer.is-centered .business-calendar-booking-drawer-content.is-refined { padding: 16px 16px 0; }
  body.pro-mode .business-team-drawer-layer.is-centered .business-calendar-booking-drawer-content.is-refined > .business-calendar-booking-actions { margin-inline: -16px !important; }
}

/* The appointment a link was about (booking details → Calendar) shines for
   two seconds: a golden ring that glows twice and fades. Its card is drawn
   again on renders, which continue the same animation part-way
   (--rl-spotlight-delay). */
body.pro-mode .business-calendar-booking.is-spotlight { z-index: 9 !important; animation: rl-booking-spotlight 2000ms cubic-bezier(.4, 0, .2, 1) var(--rl-spotlight-delay, 0ms) both; }
@keyframes rl-booking-spotlight {
  0% { box-shadow: 0 0 0 0 rgb(245 183 49 / 0%), 0 0 0 0 rgb(245 183 49 / 0%); }
  14% { box-shadow: 0 0 0 3px rgb(245 183 49 / 100%), 0 0 24px 8px rgb(245 183 49 / 60%); }
  40% { box-shadow: 0 0 0 3px rgb(245 183 49 / 80%), 0 0 10px 2px rgb(245 183 49 / 25%); }
  62% { box-shadow: 0 0 0 3px rgb(245 183 49 / 100%), 0 0 24px 8px rgb(245 183 49 / 60%); }
  100% { box-shadow: 0 0 0 0 rgb(245 183 49 / 0%), 0 0 0 0 rgb(245 183 49 / 0%); }
}
@media (prefers-reduced-motion: reduce) {
  body.pro-mode .business-calendar-booking.is-spotlight { animation: none; box-shadow: 0 0 0 3px rgb(245 183 49 / 90%); }
}

/* The override confirmed: amber turns green. */
body.pro-mode .business-manual-review-card { transition: background-color 280ms ease, border-color 280ms ease; }
body.pro-mode .business-manual-review-card > header > span { transition: background-color 280ms ease, transform 320ms cubic-bezier(.34, 1.56, .64, 1); }
body.pro-mode .business-manual-review-card.is-confirmed { border-color: #a9d9bf !important; background: #eef8f2 !important; }
body.pro-mode .business-manual-review-card.is-confirmed > header > span { position: relative; color: transparent; background: #1f9d6b !important; transform: rotate(360deg); }
body.pro-mode .business-manual-review-card.is-confirmed > header > span::after { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; content: "✓"; font-size: .85rem; font-weight: 700; }
body.pro-mode .business-manual-review-card.is-confirmed .business-manual-review-confirm { border-color: #a9d9bf; background: #fff; }
body.pro-mode .business-manual-review-card.is-confirmed .business-manual-review-confirm input { accent-color: #1f9d6b; }

/* Modify appointment: a window the size of booking details. The change on
   the left (when, who, services), what it comes to on the right (the
   summary, the override, telling the customer, the note), Save at the foot.
   A dragged move's dialog keeps its single column (the wrappers vanish). */
body.pro-mode .rl-move-columns, body.pro-mode .rl-move-column { display: contents; }
body.pro-mode .business-modal.business-booking-move-modal.is-editor-window {
  display: flex;
  flex-direction: column;
  width: min(1480px, 90vw) !important;
  max-width: none !important;
  height: 90vh;
  max-height: 90vh !important;
  padding: 0 !important;
  overflow: hidden;
  border-radius: 18px;
}
body.pro-mode .business-booking-move-modal.is-editor-window > header { flex: 0 0 auto; padding: 22px 28px 12px; }
body.pro-mode .business-booking-move-modal.is-editor-window > form { display: flex !important; flex: 1 1 auto; flex-direction: column; min-height: 0; padding: 4px 28px 0 !important; overflow: auto; gap: 0 !important; }
body.pro-mode .business-booking-move-modal.is-editor-window .rl-move-columns { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 24px; align-items: start; padding-bottom: 22px; }
body.pro-mode .business-booking-move-modal.is-editor-window .rl-move-column { display: grid; gap: 18px; align-content: start; min-width: 0; }
body.pro-mode .business-booking-move-modal.is-editor-window .rl-move-column.is-summary { position: sticky; top: 0; }
body.pro-mode .business-booking-move-modal.is-editor-window .business-booking-move-footer { position: sticky; bottom: 0; z-index: 3; margin: auto -28px 0 !important; padding: 12px 28px !important; border-top: 1px solid #e3e8e6; background: #fff; }
body.pro-mode .business-booking-move-modal .rl-move-columns[inert] { opacity: .72; transition: opacity 200ms ease; }
@media (max-width: 1000px) {
  body.pro-mode .business-booking-move-modal.is-editor-window .rl-move-columns { grid-template-columns: minmax(0, 1fr); }
  body.pro-mode .business-booking-move-modal.is-editor-window .rl-move-column.is-summary { position: static; }
}
@media (max-width: 760px) {
  body.pro-mode .business-modal.business-booking-move-modal.is-editor-window { width: 100vw !important; height: 100dvh; max-height: 100dvh !important; border-radius: 0; }
  body.pro-mode .business-booking-move-modal.is-editor-window > form { padding: 4px 16px 0 !important; }
  body.pro-mode .business-booking-move-modal.is-editor-window .business-booking-move-footer { margin-inline: -16px !important; padding-inline: 16px !important; }
}
/* Save: a spinner while it saves, a green check once saved. */
body.pro-mode .business-booking-move-footer .solid-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background-color 220ms ease, border-color 220ms ease; }
body.pro-mode .rl-button-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid rgb(255 255 255 / 38%); border-top-color: #fff; border-radius: 50%; animation: rl-button-spin 700ms linear infinite; }
body.pro-mode .business-booking-move-footer .solid-button.is-saved { border-color: #1f9d6b !important; color: #fff !important; background: #1f9d6b !important; opacity: 1 !important; }
body.pro-mode .rl-button-check { display: inline-grid; place-items: center; font-style: normal; animation: rl-button-check-in 360ms cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes rl-button-spin { to { transform: rotate(360deg); } }
@keyframes rl-button-check-in { from { opacity: 0; transform: scale(.4) rotate(-30deg); } to { opacity: 1; transform: none; } }

/* Modification history: each change on its own, easy to read. */
body.pro-mode .rl-history-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
body.pro-mode .rl-history-entry { position: relative; display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 12px; }
body.pro-mode .rl-history-entry:not(:last-child)::before { position: absolute; top: 18px; bottom: -18px; left: 6px; width: 2px; border-radius: 2px; background: #e6e2ef; content: ""; }
body.pro-mode .rl-history-dot { width: 14px; height: 14px; margin-top: 3px; border: 3px solid #fff; border-radius: 50%; background: #b8b0cc; box-shadow: 0 0 0 1px #d9d3e6; }
body.pro-mode .rl-history-entry.is-latest .rl-history-dot { background: #6b4fa0; box-shadow: 0 0 0 1px #6b4fa0; }
body.pro-mode .rl-history-entry > article { display: grid; gap: 10px; min-width: 0; padding: 14px 16px; border: 1px solid #e6e2ef; border-radius: 12px; background: #fff; }
body.pro-mode .rl-history-entry > article > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
body.pro-mode .rl-history-entry > article > header strong { display: block; color: #1f2b26; font-size: .95rem; }
body.pro-mode .rl-history-entry > article > header small { display: block; margin-top: 2px; color: #6f7a76; font-size: .78rem; }
body.pro-mode .rl-history-latest { flex: 0 0 auto; padding: 3px 9px; border-radius: 999px; color: #5a3f8c; background: #efe9f8; font-size: .7rem; font-weight: 700; }
body.pro-mode :is(.rl-history-note, .rl-history-reason) { display: grid; gap: 3px; margin: 0; padding: 9px 12px; border-radius: 9px; color: #2b3632; font-size: .88rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
body.pro-mode .rl-history-note { border: 1px solid #efe1b4; background: #fff8e2; }
body.pro-mode .rl-history-reason { background: #f4f2f8; }
body.pro-mode :is(.rl-history-note, .rl-history-reason) > span { color: #7c6a3a; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
body.pro-mode .rl-history-reason > span { color: #6b5d8a; }
body.pro-mode .rl-history-changes { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
body.pro-mode .rl-history-changes > li { display: grid; gap: 4px; padding: 9px 0; border-top: 1px solid #f0edf5; }
body.pro-mode .rl-history-changes > li:first-child { border-top: 0; padding-top: 2px; }
body.pro-mode .rl-history-label { color: #4f5b57; font-size: .78rem; font-weight: 600; }
body.pro-mode .rl-history-diff { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: .88rem; }
body.pro-mode .rl-history-diff s { color: #8a948f; text-decoration-color: rgb(138 148 143 / 70%); }
body.pro-mode .rl-history-diff i { color: #9aa39f; font-style: normal; }
body.pro-mode .rl-history-diff b { color: #1f6b52; font-weight: 650; }
body.pro-mode .business-booking-modification-history.rl-history { padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }

/* Modify's services. Every row shares the list's columns, so each service's
   dropdown is the same width whatever the row holds (a Break apart chip, ×,
   nothing). A grip drags a row into a new order. One line runs down beside
   all the services, each one's stretch in its colour and as long as its
   time, with a handle where one ends and the next begins. */
body.pro-mode .rl-move-editor-services {
  grid-template-columns: auto auto minmax(0, 1fr) auto auto 28px auto;
  column-gap: 10px;
  row-gap: 8px;
}
body.pro-mode .rl-move-editor-services > .rl-move-editor-service {
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  column-gap: 10px;
  padding-left: 6px;
}
body.pro-mode .rl-move-editor-service > select:not(#none) { width: 100%; }
body.pro-mode .business-modal :is(.rl-move-editor-grip, .rl-move-editor-handle) {
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
body.pro-mode .business-modal .rl-move-editor-grip {
  display: grid;
  width: 18px;
  height: 32px;
  place-items: center;
  border-radius: 7px;
  color: #a3aea9;
  cursor: grab;
  transition: color 160ms ease, background-color 160ms ease;
}
body.pro-mode .rl-move-editor-grip svg { width: 8px; height: 12px; fill: currentColor; }
body.pro-mode .business-modal .rl-move-editor-grip:not(.is-empty):hover,
body.pro-mode .business-modal .rl-move-editor-grip:focus-visible { color: #1f6b52; background: #eef6f2; outline: none; }
body.pro-mode .rl-move-editor-services.is-reordering > .rl-move-editor-service:not(.is-dragging) { transition: transform 200ms cubic-bezier(.22, 1, .36, 1); }
body.pro-mode .rl-move-editor-services.is-settling > .rl-move-editor-service { transition: none !important; }
body.pro-mode .rl-move-editor-service.is-dragging {
  position: relative;
  z-index: 4;
  border-color: #9fd3bd;
  background: #fff;
  box-shadow: 0 14px 30px rgb(23 43 35 / 16%);
  transition: box-shadow 160ms ease !important;
}
body.pro-mode .rl-move-editor-service.is-dragging .rl-move-editor-grip { color: #1f6b52; cursor: grabbing; }
body.pro-mode .rl-move-editor-when { display: grid; justify-items: end; gap: 1px; }
body.pro-mode .rl-move-editor-when small { color: #8a948f; font-size: .72rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* The services' colours, as in the time cards and booking details. */
body.pro-mode :is(.rl-move-editor-track-part, .rl-move-editor-handle) { --rl-segment: #7655a1; }
body.pro-mode :is(.rl-move-editor-track-part, .rl-move-editor-handle).is-segment-1 { --rl-segment: #2f946c; }
body.pro-mode :is(.rl-move-editor-track-part, .rl-move-editor-handle).is-segment-2 { --rl-segment: #2e83b8; }
body.pro-mode :is(.rl-move-editor-track-part, .rl-move-editor-handle).is-segment-3 { --rl-segment: #b8863b; }
body.pro-mode .rl-move-editor-number.is-segment-0 { background: #7655a1; }
body.pro-mode .rl-move-editor-number.is-segment-1 { background: #2f946c; }
body.pro-mode .rl-move-editor-number.is-segment-2 { background: #2e83b8; }
body.pro-mode .rl-move-editor-number.is-segment-3 { background: #b8863b; }
body.pro-mode .rl-move-editor-service.is-removed .rl-move-editor-number { background: #a3aaa7; }
/* The line: over the rows' column for it, from the first service to the last. */
body.pro-mode .rl-move-editor-services > .rl-move-editor-track-host {
  position: relative;
  z-index: 3;
  grid-column: 6;
  min-height: 0;
  list-style: none;
  pointer-events: none;
}
body.pro-mode .rl-move-editor-track {
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 50%;
  width: 6px;
  transform: translateX(-50%);
  pointer-events: auto;
}
body.pro-mode .rl-move-editor-track-part {
  position: absolute;
  left: 0;
  right: 0;
  border-radius: 999px;
  background: var(--rl-segment);
  box-shadow: 0 0 0 1.5px #fff;
  transition: top 220ms cubic-bezier(.22, 1, .36, 1), height 220ms cubic-bezier(.22, 1, .36, 1);
}
body.pro-mode .business-modal .rl-move-editor-handle {
  position: absolute;
  left: 50%;
  z-index: 2;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 2px solid var(--rl-segment);
  border-radius: 50%;
  color: var(--rl-segment);
  background: #fff;
  box-shadow: 0 2px 8px rgb(23 43 35 / 18%);
  transform: translate(-50%, -50%);
  cursor: row-resize;
  transition: top 220ms cubic-bezier(.22, 1, .36, 1), transform 220ms cubic-bezier(.34, 1.56, .64, 1), box-shadow 200ms ease;
}
body.pro-mode .rl-move-editor-handle > i {
  width: 8px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  box-shadow: 0 -3.5px 0 currentColor, 0 3.5px 0 currentColor;
}
body.pro-mode .business-modal .rl-move-editor-handle:is(:hover, :focus-visible) {
  outline: none;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--rl-segment) 20%, transparent), 0 2px 8px rgb(23 43 35 / 18%);
  transform: translate(-50%, -50%) scale(1.12);
}
body.pro-mode .business-modal .rl-move-editor-handle.is-dragging {
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--rl-segment) 24%, transparent), 0 4px 12px rgb(23 43 35 / 22%);
  transform: translate(-50%, -50%) scale(1.18);
}
/* While a handle moves, everything follows the pointer at once. */
body.pro-mode .rl-move-editor-track.is-adjusting :is(.rl-move-editor-track-part, .rl-move-editor-handle) { transition: transform 220ms cubic-bezier(.34, 1.56, .64, 1), box-shadow 200ms ease; }
/* Where the handle is now, beside it. */
body.pro-mode .rl-move-editor-handle:is(.is-dragging, :focus-visible)::after {
  position: absolute;
  top: 50%;
  left: calc(100% + 8px);
  padding: 3px 8px;
  border-radius: 999px;
  color: #fff;
  background: var(--rl-segment);
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
  transform: translateY(-50%);
  content: attr(data-time);
  pointer-events: none;
}
body.rl-move-editor-resizing,
body.rl-move-editor-resizing * { cursor: row-resize !important; -webkit-user-select: none; user-select: none; }
@media (max-width: 640px) {
  body.pro-mode .rl-move-editor-services { grid-template-columns: 18px 24px minmax(0, 1fr) auto 0 24px auto; column-gap: 8px; }
  body.pro-mode .rl-move-editor-services > .rl-move-editor-service { grid-template-rows: auto auto; column-gap: 8px; }
  body.pro-mode .rl-move-editor-service > .rl-move-editor-grip { grid-column: 1; grid-row: 1 / span 2; }
  body.pro-mode .rl-move-editor-service > .rl-move-editor-number { grid-column: 2; grid-row: 1 / span 2; }
  body.pro-mode .rl-move-editor-service > select { grid-column: 3; grid-row: 1; }
  body.pro-mode .rl-move-editor-service > .rl-move-editor-when { grid-column: 3; grid-row: 2; justify-items: start; padding-left: 10px; }
  body.pro-mode .rl-move-editor-service > .rl-move-editor-price { grid-column: 4; grid-row: 1 / span 2; }
  body.pro-mode .rl-move-editor-service > .rl-move-editor-track-slot { grid-column: 6; grid-row: 1 / span 2; }
  body.pro-mode .rl-move-editor-service > .rl-move-editor-row-actions { grid-column: 7; grid-row: 1 / span 2; }
}
@media (prefers-reduced-motion: reduce) {
  body.pro-mode :is(.rl-move-editor-track-part, .rl-move-editor-handle, .rl-move-editor-grip) { transition: none !important; }
}
/* Modify's summary: an unchanged line reads the same on both sides, quietly. */
body.pro-mode .rl-booking-changes > li.is-same .rl-booking-change-values > span { color: #4f5b57; }
body.pro-mode .rl-booking-changes > li.is-same .rl-booking-change-values > i { color: #b7bfbb; }
body.pro-mode .rl-booking-changes > li.is-same .rl-booking-change-values > strong { color: #4f5b57; background: transparent; font-weight: 600; }
body.pro-mode .rl-history-count { margin: 0 0 10px; color: #6f7a76; font-size: .78rem; font-weight: 700; letter-spacing: .02em; }
/* A multi-service appointment carries its marks once, on its last service:
   the earlier services' cards show no saving or saved mark of their own. */
body.pro-mode .business-calendar-booking.is-earlier-service:is(.is-saving, .is-saved-check)::before { content: none !important; }

/* Each service's price: plain text, edited where it is, no box around it. */
body.pro-mode .rl-move-editor-price {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  width: 78px;
  padding: 0;
  border: 0;
  color: #5f6b66;
  background: none;
  font-size: .9rem;
  cursor: text;
}
body.pro-mode .business-modal .rl-move-editor-price > input:not(#none),
body.pro-mode .business-modal .rl-move-editor-price > input:not(#none):focus,
body.pro-mode .business-modal .rl-move-editor-price > input:not(#none):hover {
  width: 100%;
  min-width: 0;
  min-height: 0 !important;
  height: auto;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: none !important;
  color: #1f2b26;
  background: transparent !important;
  box-shadow: none !important;
  font: inherit;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-align: left;
  caret-color: #1f6b52;
}
body.pro-mode .rl-move-editor-price.is-changed > input:not(#none) { color: #1f6b52; }
body.pro-mode .rl-move-editor-price > input:disabled { color: #8a948f; cursor: default; }
body.pro-mode .rl-move-editor-service.is-removed .rl-move-editor-price > input { text-decoration: line-through; }
/* A row's price reads as something to change: a dotted line under it and a
   pencil beside it, a light wash under the pointer, a ring while typing. */
body.pro-mode .rl-move-editor-price { width: auto; min-width: 88px; align-items: center; gap: 2px; padding: 5px 7px 5px 8px; border-radius: 9px; transition: background-color 160ms ease, box-shadow 180ms ease; }
body.pro-mode .business-modal .rl-move-editor-price > input:not(#none) { flex: 1 1 auto; width: 6ch; }
body.pro-mode .business-modal .rl-move-editor-price:not(.is-locked) > input:not(#none):not(:focus) {
  background-image: linear-gradient(90deg, #a9b8b1 55%, transparent 0) !important;
  background-position: 0 100% !important;
  background-repeat: repeat-x !important;
  background-size: 5px 1px !important;
}
body.pro-mode .rl-move-editor-price:not(.is-locked):hover { background: #f1f6f4; }
body.pro-mode .rl-move-editor-price:not(.is-locked):focus-within { background: #fff; box-shadow: inset 0 0 0 1.5px #1f6b52, 0 0 0 4px rgb(31 107 82 / 12%); }
body.pro-mode .rl-move-editor-price .rl-price-pencil { flex: none; width: 12px; height: 12px; margin-left: 3px; color: #a3aea9; }
body.pro-mode .rl-move-editor-price:hover .rl-price-pencil { color: #1f6b52; transform: rotate(-12deg); }
body.pro-mode .rl-move-editor-price:focus-within .rl-price-pencil { opacity: 0; }
body.pro-mode .rl-move-editor-price.is-elsewhere { min-width: 0; width: 0; padding: 0; }
body.pro-mode .rl-price-pencil { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: color 160ms ease, opacity 160ms ease, transform 260ms cubic-bezier(.34, 1.56, .64, 1); }

/* One service: its price as a card between Who and Services. A big figure
   to type over, a step down and up either side, and beside it what it was
   booked at, how far the new price is from that, and Reset. */
body.pro-mode .rl-move-editor-group.is-price { animation-delay: 90ms; }
body.pro-mode .rl-move-editor-group.is-price > .rl-move-editor-label { padding-top: 21px; }
body.pro-mode .rl-price-editor { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; min-width: 0; }
body.pro-mode .rl-price-dial {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border: 1px solid #d9e1dd;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff, #f6f9f8);
  box-shadow: 0 1px 2px rgb(16 28 22 / 6%);
  transition: border-color 180ms ease, box-shadow 220ms ease;
}
body.pro-mode .rl-price-dial:hover { border-color: #b9d8ca; }
body.pro-mode .rl-price-dial:focus-within { border-color: #1f6b52; box-shadow: 0 0 0 4px rgb(31 107 82 / 14%); }
body.pro-mode .rl-price-editor.is-changed .rl-price-dial { border-color: #9fd3bd; }
body.pro-mode .business-modal .rl-price-step {
  display: grid;
  flex: none;
  width: 40px;
  height: 40px;
  min-width: 0 !important;
  min-height: 0 !important;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #1f2b26;
  background: #edf2f0;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, transform 260ms cubic-bezier(.34, 1.56, .64, 1), box-shadow 200ms ease;
}
body.pro-mode .rl-price-step > svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
body.pro-mode .business-modal .rl-price-step:hover:not(:disabled),
body.pro-mode .business-modal .rl-price-step:focus-visible { color: #fff; background: #1f6b52; box-shadow: 0 6px 14px rgb(31 107 82 / 26%); outline: none; transform: scale(1.06); }
body.pro-mode .business-modal .rl-price-step:active:not(:disabled) { transform: scale(.88); }
body.pro-mode .business-modal .rl-price-step:disabled { opacity: .4; cursor: not-allowed; }
body.pro-mode .rl-price-figure { position: relative; display: inline-flex; align-items: baseline; gap: 2px; margin: 0; padding: 0 10px; color: #1f2b26; cursor: text; }
body.pro-mode .rl-price-currency { color: #6b7a74; font-size: 1.05rem; font-weight: 650; }
body.pro-mode .business-modal .rl-price-figure > input:not(#none),
body.pro-mode .business-modal .rl-price-figure > input:not(#none):focus,
body.pro-mode .business-modal .rl-price-figure > input:not(#none):hover {
  width: auto;
  min-width: 3ch;
  min-height: 0 !important;
  height: auto;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: none !important;
  color: inherit;
  background: transparent !important;
  box-shadow: none !important;
  font: inherit;
  font-size: 1.7rem !important;
  font-weight: 750 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.015em;
  line-height: 1.1;
  text-align: center;
  caret-color: #1f6b52;
  field-sizing: content;
}
body.pro-mode .rl-price-editor.is-changed .rl-price-figure { color: #1f6b52; }
body.pro-mode .rl-price-figure .rl-price-pencil { align-self: center; width: 15px; height: 15px; margin-left: 4px; color: #9aa6a1; }
body.pro-mode .rl-price-figure:hover .rl-price-pencil { color: #1f6b52; transform: rotate(-12deg); }
body.pro-mode .rl-price-figure:focus-within .rl-price-pencil { opacity: 0; }
body.pro-mode .rl-price-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
body.pro-mode .rl-price-booked { color: #7b8782; font-size: .82rem; }
body.pro-mode .rl-price-delta { padding: 3px 9px; border-radius: 999px; font-size: .78rem; font-weight: 750; font-variant-numeric: tabular-nums; }
body.pro-mode .rl-price-delta.is-up { color: #1f6b52; background: #e3f3ec; }
body.pro-mode .rl-price-delta.is-down { color: #8a5a00; background: #fff1d2; }
body.pro-mode .business-modal .rl-price-reset {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 0 !important;
  padding: 4px 8px;
  border: 0;
  border-radius: 999px;
  color: #1f6b52;
  background: none;
  font: inherit;
  font-size: .8rem;
  font-weight: 650;
  cursor: pointer;
  transition: background-color 160ms ease;
}
body.pro-mode .rl-price-reset > svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 320ms cubic-bezier(.34, 1.56, .64, 1); }
body.pro-mode .business-modal .rl-price-reset:hover { background: #eef6f2; }
body.pro-mode .business-modal .rl-price-reset:hover > svg { transform: rotate(-150deg); }

/* + sits under the last service, in the middle. */
body.pro-mode .rl-move-editor-add-row { display: flex; justify-content: center; padding-top: 2px; }
@media (prefers-reduced-motion: reduce) {
  body.pro-mode :is(.rl-price-step, .rl-price-pencil, .rl-price-reset > svg) { transition: none !important; }
}

/* × at the right end of every row, wherever the row's other button is. */
body.pro-mode .rl-move-editor-row-actions { justify-content: flex-end; }
/* Break apart: a line opens where the appointment breaks, the services after
   it step aside, then leave as their own appointment. */
body.pro-mode .rl-move-editor-services > .rl-move-editor-split-line {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  list-style: none;
}
body.pro-mode .rl-move-editor-split-line > span {
  display: inline-flex;
  flex: 1;
  align-items: center;
  gap: 10px;
  color: #1f6b52;
  font-size: .76rem;
  font-weight: 700;
  white-space: nowrap;
}
body.pro-mode .rl-move-editor-split-line > span::before,
body.pro-mode .rl-move-editor-split-line > span::after {
  flex: 1;
  height: 0;
  border-top: 2px dashed #9fd3bd;
  transform-origin: center;
  animation: rl-split-line-open 420ms cubic-bezier(.22, 1, .36, 1) both;
  content: "";
}
body.pro-mode .rl-move-editor-split-line svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2;
  animation: rl-split-snip 600ms cubic-bezier(.34, 1.56, .64, 1) both;
}
body.pro-mode .rl-move-editor-service.is-splitting-away {
  border-style: dashed;
  border-color: #9fd3bd;
  background: #f3faf6;
  animation: rl-split-away 420ms cubic-bezier(.22, 1, .36, 1) both;
}
body.pro-mode .rl-move-editor-service.is-splitting-away.is-leaving { animation: rl-split-leave 480ms cubic-bezier(.55, 0, .45, 1) forwards; }
@keyframes rl-split-line-open { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@keyframes rl-split-snip { 0% { transform: scale(.4) rotate(-40deg); opacity: 0; } 60% { transform: scale(1.15) rotate(8deg); opacity: 1; } 100% { transform: none; } }
@keyframes rl-split-away { from { transform: none; } to { transform: translate(10px, 4px); } }
@keyframes rl-split-leave { from { transform: translate(10px, 4px); opacity: 1; } to { transform: translate(64px, 4px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  body.pro-mode :is(.rl-move-editor-split-line > span::before, .rl-move-editor-split-line > span::after, .rl-move-editor-split-line svg, .rl-move-editor-service.is-splitting-away) { animation: none !important; }
}
/* The summary says plainly what is added and removed. */
body.pro-mode .rl-booking-changes > li.is-added .rl-booking-change-values > strong { color: #1f6b52; background: #e3f5ec; }
body.pro-mode .rl-booking-changes > li.is-added .rl-booking-change-values > em,
body.pro-mode .rl-booking-changes > li.is-removed .rl-booking-change-values > em {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
}
body.pro-mode .rl-booking-changes > li.is-added .rl-booking-change-values > em { color: #1f6b52; background: #eef8f3; }
body.pro-mode .rl-booking-changes > li.is-removed .rl-booking-change-values > em { color: #9b2c22; background: #fdecea; }
/* History: a service added or removed reads as such. */
body.pro-mode .rl-history-changes > li.is-added .rl-history-label { color: #1f6b52; }
body.pro-mode .rl-history-changes > li.is-added .rl-history-diff b { padding: 2px 8px; border-radius: 7px; background: #e3f5ec; }
body.pro-mode .rl-history-changes > li.is-removed .rl-history-label { color: #9b2c22; }

/* Break apart: scissors beside ×, its name on hover and to readers. */
body.pro-mode .business-modal .rl-move-editor-chip.is-split {
  display: grid;
  width: 30px;
  min-width: 0 !important;
  height: 30px;
  min-height: 0 !important;
  place-items: center;
  padding: 0;
}
body.pro-mode .rl-move-editor-chip.is-split svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 2; }
body.pro-mode .rl-move-editor-chip.is-split .rl-move-editor-split-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Booking settings: a large window like the customer's, in two tabs, each
   in two columns; Save stays at the foot. */
body.pro-mode .business-team-drawer-layer.is-centered[data-team-drawer="booking-settings"] .business-booking-settings-form.is-tabbed { display: flex; flex-direction: column; min-height: 100%; gap: 0; padding: 0 !important; }
body.pro-mode .rl-settings-panel { flex: 1 0 auto; padding: 22px 28px 28px; }
body.pro-mode .rl-settings-panel[hidden] { display: none !important; }
body.pro-mode .rl-settings-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
body.pro-mode .rl-settings-column { display: grid; gap: 18px; align-content: start; min-width: 0; }
body.pro-mode .rl-settings-column > .business-booking-configuration-stack { display: grid; gap: 18px; }
body.pro-mode .business-team-drawer-layer.is-centered[data-team-drawer="booking-settings"] .business-booking-settings-footer {
  position: sticky;
  bottom: 0;
  z-index: 6;
  margin: 0 !important;
  border-top: 1px solid #e3e8e6;
  background: #fff;
}
@media (max-width: 1080px) {
  body.pro-mode .rl-settings-columns { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  body.pro-mode .rl-settings-panel { padding: 16px; }
}
/* Confirmations: per stylist, one control with three places (Everyone,
   Returning only, Confirm each) whose thumb slides to the choice in its
   colour; a row above sets every stylist; the cancel time folds open. */
body.pro-mode .rl-confirm-block { display: grid; gap: 8px; }
body.pro-mode .rl-confirm-block + .rl-confirm-block { margin-top: 14px; padding-top: 16px; border-top: 1px solid #eef1ef; }
body.pro-mode .rl-confirm-block > strong { color: #1f2b26; font-size: .95rem; }
body.pro-mode .rl-confirm-stylists { display: grid; gap: 8px; margin: 2px 0 0; padding: 0; list-style: none; }
body.pro-mode .rl-confirm-stylists > li {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 10px 12px;
  border: 1px solid #e6ebe8;
  border-radius: 14px;
  background: #fbfcfb;
  transition: border-color 220ms ease, background-color 220ms ease;
}
body.pro-mode .rl-confirm-stylists > li.is-mode-all { border-color: #b9dfcd; background: #f0faf5; }
body.pro-mode .rl-confirm-stylists > li.is-mode-returning { border-color: #c4dcec; background: #f2f8fc; }
body.pro-mode .rl-confirm-avatar { display: grid; width: 36px; height: 36px; place-items: center; overflow: hidden; border-radius: 50%; color: #fff; background: #7655a1; font-weight: 700; }
body.pro-mode .rl-confirm-avatar img { width: 100%; height: 100%; object-fit: cover; }
body.pro-mode .rl-confirm-name { display: grid; gap: 2px; min-width: 0; }
body.pro-mode .rl-confirm-name b { overflow: hidden; color: #1f2b26; font-size: .92rem; text-overflow: ellipsis; white-space: nowrap; }
body.pro-mode .rl-confirm-name small { color: #6f7a76; font-size: .76rem; line-height: 1.3; }
body.pro-mode .rl-confirm-stylists > li.is-mode-all .rl-confirm-name small { color: #1f6b52; }
body.pro-mode .rl-confirm-stylists > li.is-mode-returning .rl-confirm-name small { color: #23648f; }
body.pro-mode .rl-confirm-modes {
  --rl-confirm-color: #5f6b66;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 312px;
  max-width: 100%;
  padding: 3px;
  border-radius: 999px;
  background: #edf1ef;
  box-shadow: inset 0 1px 2px rgb(16 28 22 / 8%);
}
body.pro-mode .rl-confirm-modes[data-mode="all"] { --rl-confirm-color: #1f6b52; }
body.pro-mode .rl-confirm-modes[data-mode="returning"] { --rl-confirm-color: #2e7db0; }
body.pro-mode .rl-confirm-thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc((100% - 6px) / 3);
  border-radius: 999px;
  background: var(--rl-confirm-color);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--rl-confirm-color) 34%, transparent);
  transition: transform 340ms cubic-bezier(.34, 1.36, .64, 1), background-color 240ms ease, box-shadow 240ms ease, opacity 200ms ease;
}
body.pro-mode .rl-confirm-modes[data-mode="returning"] .rl-confirm-thumb { transform: translateX(100%); }
body.pro-mode .rl-confirm-modes[data-mode="none"] .rl-confirm-thumb { transform: translateX(200%); }
body.pro-mode .rl-confirm-modes[data-mode=""] .rl-confirm-thumb { opacity: 0; }
body.pro-mode .rl-confirm-mode { position: relative; z-index: 1; display: grid; margin: 0; cursor: pointer; }
body.pro-mode .rl-confirm-mode > input { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; }
body.pro-mode .rl-confirm-mode > span {
  display: grid;
  min-height: 32px;
  place-items: center;
  padding: 0 8px;
  border-radius: 999px;
  color: #4f5b57;
  font-size: .78rem;
  font-weight: 650;
  text-align: center;
  white-space: nowrap;
  transition: color 200ms ease;
}
body.pro-mode .rl-confirm-mode:hover > span { color: #1f2b26; }
body.pro-mode .rl-confirm-mode > input:focus-visible + span { outline: 2px solid var(--rl-confirm-color); outline-offset: 1px; }
body.pro-mode .rl-confirm-modes[data-mode="all"] .rl-confirm-mode.is-all > span,
body.pro-mode .rl-confirm-modes[data-mode="returning"] .rl-confirm-mode.is-returning > span,
body.pro-mode .rl-confirm-modes[data-mode="none"] .rl-confirm-mode.is-none > span { color: #fff; }
body.pro-mode .rl-confirm-every { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 2px; padding: 8px 10px 8px 14px; border: 1px dashed #d6dfdb; border-radius: 14px; }
body.pro-mode .rl-confirm-every > span { color: #4f5b57; font-size: .82rem; font-weight: 650; }
@media (max-width: 560px) {
  body.pro-mode .rl-confirm-stylists > li { grid-template-columns: 36px minmax(0, 1fr); }
  body.pro-mode .rl-confirm-stylists > li > .rl-confirm-modes { grid-column: 1 / -1; width: 100%; }
  body.pro-mode .rl-confirm-every > .rl-confirm-modes { width: 100%; }
}
body.pro-mode .rl-confirm-reveal .business-stylist-assignment-reveal-inner { display: grid; gap: 6px; }
body.pro-mode .rl-confirm-hours { display: grid; gap: 6px; max-width: 320px; }
body.pro-mode .rl-confirm-hours > span { color: #4f5b57; font-size: .82rem; font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  body.pro-mode :is(.rl-confirm-stylists > li, .rl-confirm-thumb, .rl-confirm-mode > span) { transition: none !important; }
}