/* Canonical Booked elevation. Mirrored by scripts/sync-elevation.mjs.
   Neutral shadows only: business colours, fonts, geometry and focus rings stay owned
   by the existing theme. Load after the application's component stylesheet. */
:root, .light {
  --booked-shadow-none: none;
  --booked-shadow-xs: 0 1px 3px rgb(0 0 0 / 4%);
  --booked-shadow-sm: 0 3px 8px rgb(0 0 0 / 6%), 0 1px 3px rgb(0 0 0 / 2.5%);
  --booked-shadow-md: 0 8px 24px rgb(0 0 0 / 7%), 0 2px 6px rgb(0 0 0 / 3%);
  --booked-shadow-lg: 0 14px 36px rgb(0 0 0 / 9%), 0 4px 12px rgb(0 0 0 / 4%);
  --booked-shadow-xl: 0 20px 48px rgb(0 0 0 / 12%), 0 6px 16px rgb(0 0 0 / 5%);
  --booked-elevation-duration: 180ms;
  --booked-hover-lift: 0 -1px;
  --shadow-sm: var(--booked-shadow-sm);
  --shadow: var(--booked-shadow-md);
  --shadow-lg: var(--booked-shadow-xl);
}
/* Explicit dark surfaces can opt in without changing a business's palette or
   treating an OS dark preference as permission to recolour light booking pages. */
.dark, [data-theme="dark"] {
  --booked-shadow-xs: 0 1px 3px rgb(0 0 0 / 14%);
  --booked-shadow-sm: 0 3px 8px rgb(0 0 0 / 20%), 0 1px 3px rgb(0 0 0 / 10%);
  --booked-shadow-md: 0 8px 24px rgb(0 0 0 / 24%), 0 2px 6px rgb(0 0 0 / 12%);
  --booked-shadow-lg: 0 14px 36px rgb(0 0 0 / 28%), 0 4px 12px rgb(0 0 0 / 14%);
  --booked-shadow-xl: 0 20px 48px rgb(0 0 0 / 32%), 0 6px 16px rgb(0 0 0 / 16%);
}

/* Level 2: shared workspace sections, bespoke directory/calendar cards, and
   standalone customer panels. Rows inside these surfaces remain flat. */
body :is(.card, .overview-metric, .upcoming-appointment-card,
  .directory-customer-card, .service-category, .day-column,
  .workspace-calendar, .confirmation-summary,
  .confirmation-payment-card, .confirmation-private-link) {
  box-shadow: var(--booked-shadow-sm);
}
body .bookings-page .upcoming-appointment-card {
  box-shadow: var(--booked-shadow-sm);
}
body .confirmation-refresh .confirmation-summary {
  box-shadow: var(--booked-shadow-md);
}
body :is(.selection, .ticket-selector, .booking-calendar,
  .notice, .error, .sync-banner, .workspace-notice, .admin-notice,
  .onboarding-summary, .admin-template, .appearance-preview) {
  box-shadow: var(--booked-shadow-xs);
}
body .treatment-selection .treatment-group > summary {
  box-shadow: var(--booked-shadow-xs);
}
/* Preserve surface hierarchy, including the deliberately transparent overview
   wrapper and the payment breakdown inside the confirmation card. */
body .overview-page .overview-upcoming,
body .card .card,
body .confirmation-refresh .confirmation-summary > .confirmation-payment-card,
body .card :is(.admin-notice, .notice, .onboarding-summary) {
  box-shadow: var(--booked-shadow-none);
}

/* Navigation surfaces get separation; individual navigation items retain their
   existing active indicators. Floating menus stay above the card hierarchy. */
body :is(.sidebar, .topbar) { box-shadow: var(--booked-shadow-xs); }
body :is(.management-options-panel, .toast) { box-shadow: var(--booked-shadow-lg); }
body .modal { box-shadow: var(--booked-shadow-xl); }

/* All native fields, dropdown triggers and buttons share the subtle control
   level. Exclude non-field inputs, policy disclosures and disabled controls.
   Native select menus remain OS-owned; their closed field receives elevation. */
body :where(button, [role="button"], [role="combobox"], summary, select, textarea,
  input:not([type="hidden"], [type="checkbox"], [type="radio"], [type="range"])):not(:disabled):not([aria-disabled="true"]):not(.unavailable):not(:focus-visible):not(:where(.booking-policy, .booking-policy *, .policy-copy *, .progress button, button[data-action="recover-booking"], .native-input-control input, .hours-time-control input)) {
  box-shadow: var(--booked-shadow-xs);
}
body :is(.native-input-control, .hours-time-control):not(:has(input:disabled)) {
  box-shadow: var(--booked-shadow-xs);
}
/* A single shadow belongs to the wrapper of the clipped native date/time field. */
body :is(.native-input-control, .hours-time-control) input:not(:focus-visible) {
  box-shadow: var(--booked-shadow-none);
}
body :is([role="listbox"], [role="menu"]) {
  box-shadow: var(--booked-shadow-lg);
}

/* Focus-visible exclusions preserve the existing theme's keyboard focus rings. */
body :is(.button, .confirmation-pay, .confirmation-manage, .google-button):not(.ghost):not(:disabled):not([aria-disabled="true"]):not(:focus-visible) {
  box-shadow: var(--booked-shadow-sm);
}
body :is(.button.secondary, .button.upcoming-edit, .booking-start-over, .confirmation-copy,
  .icon-button, .directory-more, .slot, .slot-option, .date-option):not(:disabled):not([aria-disabled="true"]):not(.unavailable):not(:focus-visible) {
  box-shadow: var(--booked-shadow-xs);
}
body :is(.button, .confirmation-pay, .confirmation-manage, .google-button,
  .confirmation-copy, .booking-start-over, .admin-template) {
  transition: background-color var(--booked-elevation-duration) ease,
    border-color var(--booked-elevation-duration) ease,
    color var(--booked-elevation-duration) ease,
    filter var(--booked-elevation-duration) ease,
    transform 150ms ease,
    box-shadow var(--booked-elevation-duration) ease,
    translate var(--booked-elevation-duration) ease;
}
/* The separate translate property leaves existing transform animations intact.
   Touchscreens never acquire a sticky hover lift. */
@media (hover: hover) and (pointer: fine) {
  body .card.hover:not(:focus-visible):hover { box-shadow: var(--booked-shadow-md); }
  body :is(.button, .confirmation-pay, .confirmation-manage, .google-button):not(.ghost, .secondary, .upcoming-edit, .booking-start-over):not(:disabled):not([aria-disabled="true"]):not(:active):hover {
    translate: var(--booked-hover-lift);
  }
  body :is(.button, .confirmation-pay, .confirmation-manage, .google-button):not(.ghost, .secondary, .upcoming-edit, .booking-start-over):not(:disabled):not([aria-disabled="true"]):not(:focus-visible):not(:active):hover {
    box-shadow: var(--booked-shadow-md);
  }
  body :is(.button.secondary, .button.upcoming-edit, .confirmation-copy, .booking-start-over,
    .admin-template):not(:disabled):not([aria-disabled="true"]):not(:focus-visible):not(:active):hover {
    box-shadow: var(--booked-shadow-sm);
  }
}
body :is(.button, .confirmation-pay, .confirmation-manage, .google-button,
  .confirmation-copy, .booking-start-over, .admin-template):active {
  translate: none;
}
body :is(.button, .confirmation-pay, .confirmation-manage, .google-button,
  .confirmation-copy, .booking-start-over, .admin-template):not(:disabled):not([aria-disabled="true"]):not(:focus-visible):active {
  box-shadow: var(--booked-shadow-xs);
}
body :is(.button, .confirmation-pay, .confirmation-manage, .google-button,
  .confirmation-copy, .booking-start-over, .admin-template, .slot,
  .slot-option, .date-option, .icon-button, button, [role="button"],
  [role="combobox"], input, select, textarea):is(:disabled, [aria-disabled="true"], .unavailable) {
  box-shadow: var(--booked-shadow-none);
  translate: none;
}
/* Policies are deliberately flat, including any action or field inside them.
   Keep their existing focus rings and disclosure chevron animation. */
body .site-footer .booking-policy,
body .site-footer .booking-policy summary:not(:focus-visible),
body :is(.booking-policy, .policy-copy) :is(button, .button, input, select, textarea):not(:focus-visible) {
  box-shadow: var(--booked-shadow-none);
  translate: none;
}
@media (prefers-reduced-motion: reduce) {
  :root, .light, .dark, [data-theme="dark"] { --booked-hover-lift: none; }
  body :is(.button, .confirmation-pay, .confirmation-manage, .google-button,
    .confirmation-copy, .booking-start-over, .admin-template) {
    transition: none;
    translate: none;
  }
}
@media (forced-colors: active) {
  :root, .light, .dark, [data-theme="dark"] { --booked-shadow-xs: none; --booked-shadow-sm: none; --booked-shadow-md: none; --booked-shadow-lg: none; --booked-shadow-xl: none; }
}