/* ==========================================================================
   ROSALYX — APPLICATION SURFACES
   Accounts, plans, booking, cart and the admin dashboard.

   The glowing thread is the landing page's signature and stays there. These are
   working screens: the discipline here is spacing, hierarchy and legibility, not
   ornament. The one exception is the password strength meter, where the thread's
   own gradient is reused because it means the same thing in both places —
   something growing as it is fed.
   ========================================================================== */

/* --------------------------------------------------- 0. HIDDEN MEANS HIDDEN
   The browser's own rule for [hidden] is `display: none`, but it is a UA style
   with the same weight as a class selector — so any component that sets its own
   display (`.form-stack { display: flex }`) silently outranks it and the
   element stays on screen. That is exactly what made every pane of the auth
   dialog render at once. Author-level and !important so `hidden` is always
   obeyed, whatever a component declares. */

[hidden] { display: none !important; }

/* ------------------------------------------------------------- 1. TOASTS */

.toast-region {
  position: fixed;
  left: 50%;
  bottom: var(--gutter);
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  width: min(30rem, calc(100vw - 2 * var(--gutter)));
  transform: translateX(-50%);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  background-color: var(--olive);
  color: var(--bone);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-floating);
  font-size: var(--text-sm);
  line-height: 1.5;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(0.75rem);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-spring);
}
.toast-visible { opacity: 1; transform: none; }
.toast-error { background-color: var(--clay); }
.toast .icon { margin-top: 0.15rem; color: var(--ember); }
.toast-error .icon { color: var(--bone); }

/* -------------------------------------------------------- 2. NAV EXTRAS */

.nav-badge-wrap { position: relative; }

/* Cart count. Hidden entirely at zero — an empty badge is noise. */
.nav-badge {
  position: absolute;
  top: 0.35rem;
  right: 0.3rem;
  min-width: 1.15rem;
  height: 1.15rem;
  padding-inline: 0.25rem;
  display: none;
  place-items: center;
  border-radius: var(--radius-pill);
  background-color: var(--olive);
  color: var(--ember);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--travertine);
}
.nav-badge-visible { display: grid; }

/* Labelled companion to the profile icon. Sized down so it sits inside the
   navbar's rhythm rather than dominating the primary CTA. */
.nav-auth-btn {
  min-height: 2.5rem;
  padding-inline: var(--space-lg);
  font-size: var(--text-sm);
  white-space: nowrap;
  margin-left: var(--space-2xs);
}

/* Present in the markup for the mobile sheet, absent on desktop where the
   labelled button already sits in the action row. */
.nav-link-auth-mobile { display: none; }

.nav-menu-wrap { position: relative; }

/* Profile dropdown — floating plane. */
.nav-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: var(--z-floating);
  min-width: 14rem;
  padding: var(--space-xs);
  background-color: var(--surface-floating);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-floating);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.4rem);
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              visibility var(--dur-fast);
}
.nav-menu-open { opacity: 1; visibility: visible; transform: none; }

.nav-menu-head {
  padding: var(--space-sm) var(--space-md) var(--space-xs);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--space-xs);
}
.nav-menu-name { font-size: var(--text-sm); font-weight: 600; color: var(--text-accent); }
.nav-menu-email {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.nav-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  min-height: var(--tap-target);
  padding-inline: var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--text-primary);
  text-align: left;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.nav-menu-item:hover { background-color: rgba(53, 64, 36, 0.07); }
.nav-menu-item .icon { color: var(--text-secondary); }

/* Signing out is separated from navigation, so it is never a mis-tap. */
.nav-menu-divider {
  height: 1px;
  margin: var(--space-xs) var(--space-sm);
  background-color: var(--border-subtle);
}

/* --------------------------------------------------------- 3. THE MODAL */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--gutter);
  /* Strong enough to isolate the dialog; the blur says the page behind is
     out of reach rather than merely tinted. */
  background-color: rgba(28, 33, 21, 0.55);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base);
}
.modal-open { opacity: 1; visibility: visible; }

.modal {
  width: 100%;
  max-width: 34rem;
  max-height: min(90dvh, 48rem);
  overflow-y: auto;
  /* Vertical only. Nothing inside may ever be wider than the dialog, so a
     horizontal scrollbar can only mean a layout fault — hiding it here stops
     that fault reaching the visitor while the grids below prevent the cause. */
  overflow-x: hidden;
  padding: clamp(var(--space-lg), 4vw, var(--space-2xl));
  background-color: var(--surface-floating);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-floating);
  transform: translateY(0.75rem) scale(0.985);
  transition: transform var(--dur-base) var(--ease-spring);
}
/* Grid and flex children default to min-width:auto, which refuses to shrink
   below their content and pushes the container wider. This is the actual cure
   for horizontal overflow in the dialog. */
.modal .form-stack,
.modal .form-row,
.modal .field,
.modal .field-row,
.modal .password-field { min-width: 0; }
.modal .input { min-width: 0; max-width: 100%; }
.modal-open .modal { transform: none; }

.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.modal-title {
  font-size: var(--text-xl);
  font-weight: 500;
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 48;
}
.modal-subtitle {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-top: var(--space-2xs);
}
.modal-close {
  display: grid;
  place-items: center;
  width: var(--tap-target);
  height: var(--tap-target);
  margin: -0.5rem -0.5rem 0 0;
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  flex: none;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.modal-close:hover { background-color: rgba(53, 64, 36, 0.08); color: var(--text-accent); }

/* Segmented toggle between the two forms. */
.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xs);
  padding: var(--space-2xs);
  margin-bottom: var(--space-lg);
  background-color: rgba(53, 64, 36, 0.07);
  border-radius: var(--radius-pill);
}
.segmented-option {
  min-height: 2.5rem;
  padding-inline: var(--space-md);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.segmented-option[aria-selected='true'] {
  background-color: var(--surface-floating);
  color: var(--text-accent);
  box-shadow: var(--shadow-elevated);
}

/* ---------------------------------------------------------- 4. FORM KIT */

.form-stack { display: flex; flex-direction: column; gap: var(--space-md); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }

.field-hint {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: 1.5;
}

.field-error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-error);
  min-height: 1rem;
}

textarea.input {
  min-height: 7rem;
  border-radius: var(--radius-md);
  resize: vertical;
  line-height: var(--leading-normal);
}
select.input {
  border-radius: var(--radius-md);
  cursor: pointer;
  appearance: none;
  /* Chevron drawn as a background so no extra element is needed. */
  background-image: linear-gradient(45deg, transparent 50%, var(--sage-ink) 50%),
                    linear-gradient(135deg, var(--sage-ink) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 55%, calc(100% - 0.8rem) 55%;
  background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
  background-repeat: no-repeat;
  padding-right: var(--space-2xl);
}

/* ------------------------------------------------------ CUSTOM SELECT
   The highlight colour inside a native dropdown is painted by the operating
   system, not the page — there is no CSS that reliably turns that blue into
   olive across browsers. So the real <select> stays in the DOM as the source of
   truth and this listbox is drawn over it. Without JavaScript the native
   control simply remains, fully usable. */

.select { position: relative; }
.select-enhanced .select-native {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.select-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  width: 100%;
  min-height: 3.25rem;
  padding: var(--space-sm) var(--space-md) var(--space-sm) var(--space-lg);
  background-color: var(--surface-floating);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.select-button:hover { border-color: var(--border-strong); }
.select-button[aria-expanded='true'] {
  border-color: var(--olive);
  box-shadow: 0 0 0 3px rgba(53, 64, 36, 0.14);
}
.select-caret {
  flex: none;
  color: var(--text-secondary);
  transition: transform var(--dur-base) var(--ease-out);
}
.select-button[aria-expanded='true'] .select-caret { transform: rotate(180deg); }

.select-list {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  right: 0;
  z-index: var(--z-floating);
  max-height: 15rem;
  overflow-y: auto;
  padding: var(--space-2xs);
  background-color: var(--surface-floating);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-floating);
}

.select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: 2.5rem;
  padding: 0 var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
/* The point of the whole component: our own highlight, not the system's. */
.select-option:hover,
.select-option-active {
  background-color: rgba(53, 64, 36, 0.09);
  color: var(--text-accent);
}
.select-option[aria-selected='true'] {
  background-color: var(--olive);
  color: var(--ember);
  font-weight: 600;
}
.select-option[aria-selected='true'].select-option-active {
  background-color: var(--olive-soft);
  color: var(--ember);
}

/* Password field with the reveal control inside it. */
.password-field { position: relative; display: flex; }
.password-field .input { padding-right: 3.25rem; }
.password-toggle {
  position: absolute;
  top: 50%;
  right: 0.4rem;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.password-toggle:hover { color: var(--text-accent); background-color: rgba(53, 64, 36, 0.07); }

/* ------------------------------------------------ 5. PASSWORD CHECKLIST
   The one place the landing page's filament is reused. It means the same
   thing here: something growing stronger as it is fed. */

.strength {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  background-color: rgba(53, 64, 36, 0.045);
  border-radius: var(--radius-md);
}

.strength-meter {
  position: relative;
  height: 3px;
  border-radius: var(--radius-pill);
  background-color: rgba(53, 64, 36, 0.14);
  overflow: hidden;
}
.strength-meter-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--bronze), var(--amber) 45%, var(--honey) 75%, var(--ember));
  transition: width var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}
.strength-complete .strength-meter-fill {
  box-shadow: 0 0 6px var(--honey), 0 0 14px rgba(217, 164, 95, 0.6);
}

.strength-list { display: grid; gap: var(--space-2xs); }
.strength-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  transition: color var(--dur-base) var(--ease-out);
}
.strength-item-met { color: var(--text-accent); }

.strength-tick {
  display: grid;
  place-items: center;
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  color: transparent;
  transition: background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
.strength-item-met .strength-tick {
  background-color: var(--olive);
  border-color: var(--olive);
  color: var(--ember);
}
.strength-tick .icon { width: 0.7rem; height: 0.7rem; stroke-width: 2.6; }

.form-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-top: var(--space-xs);
}
.link-quiet {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--border-strong);
  transition: color var(--dur-fast) var(--ease-out);
}
.link-quiet:hover { color: var(--text-accent); }

.btn-block { width: 100%; }

/* -------------------------------------------------------- 6. PAGE HEADS */

.page-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-block: clamp(var(--space-xl), 5vw, var(--space-3xl)) var(--space-xl);
}
.page-title {
  font-size: var(--text-3xl);
  font-weight: 400;
  font-variation-settings: 'SOFT' 44, 'WONK' 1, 'opsz' 96;
}
.page-intro {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  max-width: var(--measure);
}

/* -------------------------------------------------- 6b. FEATURE CARD
   One large elevated surface: copy on the left, image on the right, stacking
   vertically on narrow screens with the picture first. */

.feature-card {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(var(--space-xl), 4vw, var(--space-3xl));
  align-items: center;
  padding: clamp(var(--space-lg), 3vw, var(--space-3xl));
  margin-bottom: var(--section);
  background-color: var(--surface-elevated);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated);
}

.feature-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  min-width: 0;
}

.feature-title {
  font-size: var(--text-2xl);
  font-weight: 500;
  line-height: 1.12;
  max-width: 20ch;
  margin-bottom: var(--space-2xs);
}

.feature-text {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  max-width: var(--measure);
}

.feature-points {
  display: grid;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-subtle);
  width: 100%;
}
.feature-points li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--text-primary);
}
.feature-points .icon { color: var(--olive); flex: none; }

.feature-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.feature-media {
  min-width: 0;
  aspect-ratio: 4 / 5;
  /* The arch again — the same motif as the landing page's card imagery. */
  border-radius: var(--radius-arch);
  overflow: hidden;
  background-color: var(--bone-deep);
}
.feature-media img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------- 6c. CONTACT LIST */

.contact-list { display: grid; gap: var(--space-xs); }

.contact-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  transition: background-color var(--dur-fast) var(--ease-out);
}
a.contact-row:hover { background-color: rgba(53, 64, 36, 0.06); }
.contact-row + .contact-row { border-top: 1px solid var(--border-subtle); border-radius: 0; }

.contact-icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border-radius: var(--radius-pill);
  background-color: rgba(53, 64, 36, 0.08);
  color: var(--olive);
}

.contact-detail { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.contact-label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.contact-value {
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--text-accent);
  overflow-wrap: anywhere;
}
.contact-note { font-size: var(--text-sm); color: var(--text-secondary); }

/* ---------------------------------------------------------- 7. PLAN GRID */

/* Exactly three per row on desktop, which also sets the card size — narrower
   cards read as a considered set rather than three billboards. */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(var(--space-md), 2vw, var(--space-lg));
  padding-bottom: var(--section);
}

.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--surface-elevated);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated);
  overflow: hidden;
  transition: box-shadow var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.plan-card:hover { box-shadow: var(--shadow-elevated-hover); transform: translateY(-3px); }

.plan-photo {
  aspect-ratio: 16 / 10;
  background-color: var(--bone-deep);
  overflow: hidden;
}
.plan-photo img { width: 100%; height: 100%; object-fit: cover; }
.plan-photo-empty {
  display: grid;
  place-items: center;
  height: 100%;
  background: linear-gradient(150deg, var(--travertine), var(--bone-deep));
  color: var(--sage-ink);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.plan-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex: 1 1 auto;
  padding: var(--space-lg);
}
.plan-name { font-size: var(--text-xl); font-weight: 500; }
.plan-description {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  flex: 1 1 auto;
}

.plan-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-subtle);
}
.plan-sessions {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.plan-price {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--text-accent);
  font-variation-settings: 'SOFT' 30, 'WONK' 0, 'opsz' 40;
  /* Lining, equal-width figures so prices align down the row. */
  font-variant-numeric: tabular-nums lining-nums;
}

.plan-action { padding: 0 var(--space-lg) var(--space-lg); }

/* Shown on a plan the admin has approved for this person. */
.plan-flag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  align-self: flex-start;
  padding: 0.2rem var(--space-sm);
  border-radius: var(--radius-pill);
  background-color: rgba(53, 64, 36, 0.09);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-accent);
}
.plan-flag-owned { background-color: var(--olive); color: var(--ember); }

.plan-note {
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--text-secondary);
  margin-top: var(--space-xs);
}

/* -------------------------------------------------------- 8. BOOKING UI */

.booking-banner {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-xl);
  background-color: var(--surface-elevated);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-elevated);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text-accent);
}
.booking-banner .icon { color: var(--amber); }

/* Three compact fields, centred as a group. Full-width selects made the page
   feel like a form to be filled in rather than a date to be chosen. */
.date-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 8.5rem));
  justify-content: center;
  gap: var(--space-md);
  max-width: 32rem;
  margin: 0 auto var(--space-xl);
}
.date-picker .field-label { text-align: center; }

.slot-panel {
  padding: clamp(var(--space-lg), 3vw, var(--space-2xl));
  background-color: var(--surface-elevated);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated);
}

.slot-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}
.slot-panel-date { font-size: var(--text-lg); font-weight: 500; color: var(--text-accent); }
.slot-panel-zone {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: var(--space-sm);
}

.slot {
  min-height: var(--tap-target);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background-color: var(--surface-floating);
  font-size: var(--text-sm);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.slot:hover { border-color: var(--olive); transform: translateY(-1px); }

.slot[aria-pressed='true'] {
  background-color: var(--olive);
  border-color: var(--olive);
  color: var(--ember);
}

/* Unavailable times stay visible so the shape of the day is still legible,
   but they are unmistakably out of reach and cannot be activated. */
.slot[aria-disabled='true'] {
  background-color: transparent;
  border-style: dashed;
  border-color: var(--border-subtle);
  color: var(--sage-ink);
  opacity: 0.45;
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.slot[aria-disabled='true']:hover { transform: none; border-color: var(--border-subtle); }

.slot-empty {
  padding: var(--space-xl) 0;
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--text-base);
}

.booking-confirm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-subtle);
}
.booking-choice { font-size: var(--text-base); color: var(--text-primary); }
.booking-choice strong { color: var(--text-accent); }

/* ------------------------------------------------------------- 9. TABLES */

.panel {
  padding: clamp(var(--space-lg), 3vw, var(--space-2xl));
  background-color: var(--surface-elevated);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated);
}
.panel + .panel { margin-top: var(--space-lg); }

.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}
.panel-title { font-size: var(--text-lg); font-weight: 500; }

.table-scroll { overflow-x: auto; }

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.table th {
  padding: var(--space-sm) var(--space-md) var(--space-sm) 0;
  border-bottom: 1px solid var(--border-strong);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
  text-align: left;
  white-space: nowrap;
}
.table td {
  padding: var(--space-md) var(--space-md) var(--space-md) 0;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}
.table tr:last-child td { border-bottom: none; }
.table-numeric { text-align: right; font-variant-numeric: tabular-nums; padding-right: 0; }
.table-name { font-weight: 600; color: var(--text-accent); }
.table-muted { color: var(--text-secondary); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 0.2rem var(--space-sm);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
}
.pill-good { background-color: rgba(53, 64, 36, 0.10); color: var(--text-accent); }
.pill-muted { background-color: rgba(53, 64, 36, 0.06); color: var(--text-secondary); }
.pill-warn { background-color: rgba(142, 78, 50, 0.12); color: var(--clay); }

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-2xl) 0;
  color: var(--text-secondary);
}
.empty-state-title { font-size: var(--text-lg); color: var(--text-accent); font-family: var(--font-display); }

/* ------------------------------------------------------------- 10. TABS */

.tabs {
  display: flex;
  gap: var(--space-2xs);
  margin-bottom: var(--space-xl);
  border-bottom: 1px solid var(--border-subtle);
  overflow-x: auto;
}
.tab {
  position: relative;
  min-height: var(--tap-target);
  padding: 0 var(--space-lg);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.tab:hover { color: var(--text-accent); }
.tab[aria-selected='true'] { color: var(--text-accent); font-weight: 600; }
.tab[aria-selected='true']::after {
  content: '';
  position: absolute;
  left: var(--space-md);
  right: var(--space-md);
  bottom: -1px;
  height: 2px;
  border-radius: var(--radius-pill);
  background-color: var(--olive);
}

.definition-list { display: grid; gap: var(--space-lg); }
.definition-term {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-2xs);
}
.definition-value { font-size: var(--text-lg); color: var(--text-primary); overflow-wrap: anywhere; }

/* -------------------------------------------------------------- 11. CART */

.cart-layout {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: clamp(var(--space-lg), 3vw, var(--space-2xl));
  align-items: start;
  padding-bottom: var(--section);
}

.cart-row {
  display: grid;
  grid-template-columns: 5.5rem 1fr auto;
  gap: var(--space-lg);
  align-items: center;
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--border-subtle);
}
.cart-row:last-child { border-bottom: none; }

.cart-thumb {
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background-color: var(--bone-deep);
}
.cart-thumb img { width: 100%; height: 100%; object-fit: cover; }

.cart-name { font-size: var(--text-base); font-weight: 600; color: var(--text-accent); }
.cart-sessions { font-size: var(--text-xs); color: var(--text-secondary); margin-top: 0.15rem; }

.cart-side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-sm); }
.cart-price { font-size: var(--text-base); font-weight: 600; font-variant-numeric: tabular-nums; }

.btn-remove {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 2.25rem;
  padding-inline: var(--space-sm);
  margin-right: calc(var(--space-sm) * -1);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.btn-remove:hover { color: var(--clay); background-color: rgba(142, 78, 50, 0.08); }

.summary { position: sticky; top: 6rem; }
.summary-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.summary-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding-top: var(--space-md);
  margin-top: var(--space-sm);
  border-top: 1px solid var(--border-strong);
}
.summary-total-label { font-size: var(--text-base); font-weight: 600; color: var(--text-accent); }
.summary-total-value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--text-accent);
  font-variant-numeric: tabular-nums lining-nums;
  font-variation-settings: 'SOFT' 30, 'WONK' 0, 'opsz' 60;
}
.summary-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  margin-top: var(--space-md);
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--text-secondary);
}
.summary-note .icon { flex: none; margin-top: 0.1rem; }

/* -------------------------------------------------------- 12. ADMIN SHELL */

.admin-shell {
  display: grid;
  grid-template-columns: 15rem 1fr;
  gap: clamp(var(--space-lg), 3vw, var(--space-2xl));
  align-items: start;
  padding-block: var(--space-xl) var(--section);
}

.admin-nav {
  position: sticky;
  top: 6rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-md);
  background-color: var(--surface-elevated);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated);
}
.admin-nav-label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-secondary);
  padding: var(--space-xs) var(--space-md);
}
.admin-nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: var(--tap-target);
  padding-inline: var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.admin-nav-link:hover { background-color: rgba(53, 64, 36, 0.07); }
.admin-nav-link-active { background-color: var(--olive); color: var(--bone); }
.admin-nav-link .icon { color: currentColor; opacity: 0.75; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.stat {
  padding: var(--space-lg);
  background-color: var(--surface-elevated);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-elevated);
}
.stat-label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-xs);
}
.stat-value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  color: var(--text-accent);
  font-variant-numeric: tabular-nums lining-nums;
  font-variation-settings: 'SOFT' 30, 'WONK' 0, 'opsz' 60;
}

/* Flash messages after a save or delete. */
.flash {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-lg);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.flash-success {
  background-color: rgba(53, 64, 36, 0.10);
  color: var(--text-accent);
  border: 1px solid rgba(53, 64, 36, 0.18);
}
.flash-error {
  background-color: rgba(142, 78, 50, 0.10);
  color: var(--clay);
  border: 1px solid rgba(142, 78, 50, 0.22);
}
.flash .icon { flex: none; margin-top: 0.1rem; }

/* Plain-language explainer above anything a non-technical owner might pause at. */
.help-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-lg);
  background-color: rgba(53, 64, 36, 0.05);
  border-left: 2px solid var(--amber);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text-secondary);
}
.help-note .icon { flex: none; margin-top: 0.15rem; color: var(--amber); }

.toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}
.toolbar .input { min-height: 2.75rem; }
.toolbar-grow { flex: 1 1 14rem; }

/* Unlock switch in the customers table. */
.switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
  min-height: var(--tap-target);
}
.switch-track {
  position: relative;
  width: 2.75rem;
  height: 1.6rem;
  flex: none;
  border-radius: var(--radius-pill);
  background-color: rgba(53, 64, 36, 0.20);
  transition: background-color var(--dur-base) var(--ease-out);
}
.switch-track::after {
  content: '';
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background-color: var(--surface-floating);
  box-shadow: var(--shadow-elevated);
  transition: transform var(--dur-base) var(--ease-spring);
}
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch input:checked + .switch-track { background-color: var(--olive); }
.switch input:checked + .switch-track::after { transform: translateX(1.15rem); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--olive); outline-offset: 3px; }
.switch-label { font-size: var(--text-sm); color: var(--text-primary); }

.customer-card {
  padding: var(--space-lg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.customer-card + .customer-card { margin-top: var(--space-md); }
.customer-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}
.customer-name { font-size: var(--text-base); font-weight: 600; color: var(--text-accent); }
.customer-email { font-size: var(--text-sm); color: var(--text-secondary); overflow-wrap: anywhere; }
.customer-plans { display: grid; gap: var(--space-xs); }
.customer-plan-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-xs) 0;
  border-top: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}

/* Admin availability grid — reuses the slot look with a status colour. */
.admin-slot {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background-color: var(--surface-floating);
}
.admin-slot-time { font-size: var(--text-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.admin-slot-who { font-size: var(--text-xs); color: var(--text-secondary); overflow-wrap: anywhere; }
.admin-slot-actions { display: flex; gap: var(--space-2xs); margin-top: var(--space-2xs); }
.admin-slot-blocked { opacity: 0.6; border-style: dashed; }
.admin-slot-booked { border-color: var(--olive); background-color: rgba(53, 64, 36, 0.07); }

.btn-tiny {
  min-height: 2rem;
  padding-inline: var(--space-sm);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-secondary);
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.btn-tiny:hover { color: var(--text-accent); border-color: var(--olive); }
.btn-tiny-danger:hover { color: var(--clay); border-color: var(--clay); background-color: rgba(142, 78, 50, 0.07); }

.inline-form { display: inline-flex; }

/* ------------------------------------------------------- 13. RESPONSIVE */

@media (max-width: 60rem) {
  /* Two up on tablets, one on phones — see below. */
  .plan-grid { grid-template-columns: repeat(2, 1fr); }

  /* Stacked, the picture leads and the copy follows. */
  .feature-card { grid-template-columns: 1fr; gap: var(--space-xl); }
  .feature-media { order: -1; aspect-ratio: 3 / 2; }

  .cart-layout { grid-template-columns: 1fr; }
  .summary { position: static; }

  .admin-shell { grid-template-columns: 1fr; }
  .admin-nav {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    overflow-x: auto;
  }
  .admin-nav-label { display: none; }
}

@media (max-width: 48rem) {
  /* Paired fields stack on phones. Two password inputs side by side at 375px
     would be about five characters wide each, which is worse than the extra
     scroll. */
  .form-row { grid-template-columns: 1fr; }
  .plan-grid { grid-template-columns: 1fr; }

  /* The three date fields stay in a row — they are short and belong together —
     but shrink to share the width. */
  .date-picker { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }

  /* The labelled auth button gives way to the icon; it reappears inside the
     mobile menu sheet where there is room for words. */
  .nav-auth-btn { display: none; }
  .nav-links-open .nav-link-auth-mobile { display: block; }

  .cart-row { grid-template-columns: 4rem 1fr; }
  .cart-side { grid-column: 1 / -1; align-items: flex-start; }

  .modal { max-height: 92dvh; }

  /* The dropdown becomes a bottom sheet where a hover menu makes no sense. */
  .nav-menu {
    position: fixed;
    top: auto;
    right: var(--gutter);
    bottom: var(--gutter);
    left: var(--gutter);
    min-width: 0;
  }
}