/*
 * BOOK(ED) functionality/usability pass — 2026-09-22.
 *
 * Loaded after every other stylesheet and scoped under #private-app so its
 * !important declarations win over the older competing picker rules in
 * booking-ux.css, mobile-ux.css, skeleton01.css and quiet-luxury.css.
 * Visual language (cream/gold, serif, lowercase) is unchanged; this file only
 * makes geometry, spacing and readability consistent.
 */

:root {
  --book-row: 60px;          /* one roller row */
  --book-rows: 3;            /* visible rows */
  --book-label: 40px;        /* in/out label strip */
  --book-marker: 46px;       /* gold selection marker, tight to the text */
}

/* #6 — horizontal overflow. `clip` contains stray overflow without creating a
   scroll container, so vertical scrolling, sticky UI and pinch-zoom still work.
   The oversized elements themselves are fixed below. */
html,
body {
  overflow-x: clip;
}
#private-app,
#private-app .flow,
#private-app .step {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* ---------- time picker ---------- */

#private-app .book-picker {
  display: grid !important;
  gap: 14px !important;
  margin-top: 6px !important;
  max-width: 100% !important;
  min-width: 0;
}
#private-app .picker-copy { text-align: left; min-width: 0; }
#private-app .picker-copy .picker-status {
  margin: 0 !important;
  min-height: 0 !important;
  color: var(--ql-ink-mid, #5e5851) !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
}

/* One geometry for both wheels: fixed rows, padding equal to one row so the
   first and last values can sit exactly on the marker. */
#private-app .book-picker .picker-rollers {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) !important;
  height: calc(var(--book-label) + var(--book-row) * var(--book-rows)) !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
#private-app .book-picker .picker-column {
  display: grid !important;
  grid-template-rows: var(--book-label) calc(var(--book-row) * var(--book-rows)) !important;
  height: auto !important;
  min-height: 0 !important;
  min-width: 0 !important;
  background: transparent !important;
  transition: opacity 140ms ease;
}
#private-app .book-picker .picker-label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: var(--book-label) !important;
  margin: 0 !important;
  background: transparent !important;
  color: var(--ql-gold-deep, #7a5418) !important;
  font-size: 15px !important;
  font-weight: 650 !important;
  letter-spacing: .2em !important;
  text-transform: lowercase !important;
  text-shadow: none !important;
}
#private-app .book-picker .picker-wheel {
  position: relative !important;
  height: calc(var(--book-row) * var(--book-rows)) !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: calc(var(--book-row) * (var(--book-rows) - 1) / 2) 0 !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scroll-snap-type: y mandatory !important;
  scrollbar-width: none !important;
  scrollbar-gutter: auto !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 70%, transparent 100%);
}
#private-app .book-picker .picker-wheel::-webkit-scrollbar { display: none; }
#private-app .book-picker .picker-value {
  display: grid !important;
  place-content: center !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: var(--book-row) !important;
  min-height: var(--book-row) !important;
  max-height: var(--book-row) !important;
  margin: 0 !important;
  padding: 0 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ql-ink, #1b1816) !important;
  font-family: var(--ql-font-serif, Georgia, serif) !important;
  /* Same font size selected or not: selection never changes row geometry. */
  font-size: clamp(22px, 6.6vw, 30px) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums;
  opacity: .34 !important;
  transform: none !important;
  scroll-snap-align: center !important;
  scroll-snap-stop: always !important;
  contain: layout paint;
  transition: opacity 120ms ease, transform 120ms ease;
  text-decoration: none !important;
}
#private-app .book-picker .picker-value > span { display: block; transform-origin: center; transition: transform 120ms ease; }
#private-app .book-picker .picker-value small {
  margin-top: 3px;
  color: var(--ql-gold-deep, #7a5418) !important;
  font-family: var(--font-sans, system-ui, sans-serif) !important;
  font-size: 11px !important;
  letter-spacing: .02em;
}
#private-app .book-picker .picker-value.selected {
  opacity: 1 !important;
  font-weight: 500 !important;
  text-shadow: none !important;
}
/* Emphasis by transform only (does not move the row or its snap point). */
#private-app .book-picker .picker-value.selected > span { transform: scale(1.12); }
#private-app .book-picker .picker-value.override-hidden { display: none !important; }
#private-app .book-picker .picker-placeholder { opacity: .18 !important; }

/* The marker spans both columns at one fixed position, so IN and OUT line up.
   Lines only, no fill, and tight to the text. */
#private-app .book-picker .picker-band {
  position: absolute !important;
  z-index: 4 !important;
  left: 6px !important;
  right: 6px !important;
  top: calc(var(--book-label) + var(--book-row) * (var(--book-rows) - 1) / 2 + (var(--book-row) - var(--book-marker)) / 2) !important;
  height: var(--book-marker) !important;
  transform: none !important;
  border: 0 !important;
  border-top: 1.5px solid var(--ql-gold, #c89b3c) !important;
  border-bottom: 1.5px solid var(--ql-gold, #c89b3c) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none !important;
}
#private-app .book-picker .picker-divider {
  background: var(--ql-border-subtle, rgba(27,24,22,.12)) !important;
  margin-top: var(--book-label);
}

/* #8 — structure stays put while OUT recalculates or times load. */
#private-app .book-picker .picker-rollers[data-checking="true"] .picker-column { opacity: .45; pointer-events: none; }
#private-app .book-picker .picker-rollers[data-checking="true"] .picker-band { opacity: .45; }
#private-app .book-picker .picker-column.is-recalculating { opacity: .4; }
#private-app .book-picker.is-submitting .picker-rollers { pointer-events: none; opacity: .7; }

/* Summary: fits the phone width instead of pushing the page sideways. */
#private-app .book-picker .picker-summary {
  min-width: 0 !important;
  margin: 2px 0 0 !important;
  padding: 4px 0 4px 14px !important;
  border-left: 2px solid var(--ql-gold, #c89b3c) !important;
}
#private-app .book-picker .picker-summary small {
  color: var(--ql-ink-mid, #5e5851) !important;
  font-size: 13px !important;
}
#private-app .book-picker .picker-summary strong {
  display: block;
  max-width: 100%;
  color: var(--ql-ink, #1b1816) !important;
  font-size: clamp(26px, 8.4vw, 44px) !important;
  line-height: 1.1 !important;
  letter-spacing: -.02em !important;
  overflow-wrap: anywhere;
  text-shadow: none !important;
}
#private-app .book-picker .picker-summary .picker-summary-ends {
  color: var(--ql-gold-deep, #7a5418) !important;
  font-size: 13px !important;
  font-weight: 600;
}
#private-app .book-picker .picker-limit {
  margin: -4px 0 0 !important;
  color: var(--ql-ink-mid, #5e5851) !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}
#private-app .book-picker .picker-limit:empty { display: none !important; }
#private-app .book-picker .picker-utilities:has(> .hidden:only-child) { display: none !important; }
#private-app .book-picker .sms-consent {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--ql-ink, #1b1816) !important;
  font-size: 15px !important;
}

/* Request action: comfortably reachable, clear disabled/busy states. */
#private-app .book-picker #picker-confirm {
  width: 100% !important;
  min-height: 60px !important;
  margin: 0 !important;
  margin-bottom: max(8px, env(safe-area-inset-bottom)) !important;
  transition: opacity 140ms ease, transform 100ms ease;
}
#private-app .book-picker #picker-confirm:disabled { opacity: .45 !important; cursor: not-allowed; }
#private-app .book-picker #picker-confirm[aria-busy="true"] { opacity: .8 !important; cursor: progress; }
#private-app .book-picker #picker-confirm:not(:disabled):active { transform: scale(.985); }

#private-app .book-picker .picker-feedback {
  margin: -4px 0 0 !important;
  color: var(--ql-ink, #1b1816);
  font-size: 15px;
  line-height: 1.4;
  text-align: center;
}
#private-app .book-picker .picker-feedback[data-tone="error"] { color: #9a2f22; }
#private-app .book-picker .picker-feedback[data-tone="warn"] { color: var(--ql-gold-deep, #7a5418); }

#private-app .book-picker .picker-retry {
  justify-self: start;
  min-height: 44px;
  padding: 8px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ql-gold, #c89b3c) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ql-gold-deep, #7a5418) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

/* #11 — step spacing on the time screen: no dead band between controls. */
#private-app #step-range.active {
  padding-top: 18px !important;
  padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important;
}
#private-app #step-range > h1 { margin: 0 0 10px !important; }
#private-app #step-range .book-location-context { overflow-wrap: anywhere; }

/* #13 — day deck: featured card wraps date words, never characters. */
#private-app #day-list .day-featured strong { overflow-wrap: normal; word-break: normal; text-wrap: balance; }
#private-app #day-list { min-width: 0; }

/* #14 — location results in the house style. */
#private-app #place-autocomplete-mount.index-place-results {
  gap: 0 !important;
  padding: 2px 14px !important;
  border: 1px solid var(--ql-border-subtle, rgba(27,24,22,.12)) !important;
  border-radius: 16px !important;
  background: var(--ql-surface-raised, #fffdf9) !important;
  box-shadow: 0 12px 30px -24px rgba(27,24,22,.35) !important;
}
#private-app .index-place-result {
  display: block !important;
  width: 100% !important;
  min-height: 64px !important;
  margin: 0 !important;
  padding: 15px 4px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ql-border-subtle, rgba(27,24,22,.10)) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left !important;
}
#private-app .index-place-result:last-of-type { border-bottom: 0 !important; }
#private-app .index-place-result strong {
  display: block;
  color: var(--ql-ink, #1b1816) !important;
  font-family: var(--ql-font-serif, Georgia, serif) !important;
  font-size: 19px !important;
  font-weight: 500 !important;
  line-height: 1.28 !important;
}
#private-app .index-place-result small {
  display: block;
  margin-top: 5px;
  color: var(--ql-ink-mid, #5e5851) !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}
#private-app .index-place-result:active { background: rgba(200,155,60,.08) !important; }

/* #16 — readable status: toast text is always light on the ink pill. */
#toast .toast-card,
#toast .toast-card.error,
#toast #toast-message {
  color: #fff !important;
  -webkit-text-fill-color: #fff;
}
#toast .toast-card {
  background: var(--ql-ink, #1b1816) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}
#toast .toast-card.error { border-left: 3px solid #d9534f !important; }


/* Low-priority reconciliation — 2026-09-22. */
/* Keep iOS long-press menus off wheel chrome/helper copy, without making
   addresses or the booking summary impossible to copy. */
#private-app .book-picker .picker-wheel,
#private-app .book-picker .picker-label,
#private-app .book-picker .picker-limit,
#private-app .book-picker .picker-feedback {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none;
}
#private-app .book-picker .picker-summary {
  -webkit-user-select: text !important;
  user-select: text !important;
}

/* Keep the selected location readable at normal iPad distance without
   competing with the day/time heading. Casing follows the Release 1 lowercase
   rule below; the #step-day id here used to outrank it, so the day screen alone
   showed "421 Lakeview Dr" while every other screen was lowercase. */
#private-app .book-location-context,
#private-app #step-day .book-location-context {
  font-size: 15px !important;
  line-height: 1.45 !important;
}

/* Closeout owns the viewport until the PIN screen is established. A stale
   guest-state refresh must never punch through the seal/lock transition. */
html[data-book-closeout="locked"] #guest-booking-state {
  display: none !important;
}

@media (min-width: 700px) and (max-width: 1100px) {
  body:has(#step-options.active) #private-app .flow {
    width: min(calc(100% - 3rem), 48rem) !important;
  }
  #private-app #step-options #location-wrap {
    gap: 1.15rem !important;
  }
}

/* Scrolled content should never ghost through the sticky header. */
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #private-app .app-header {
  background: var(--ql-canvas, #f7f5f0) !important;
}

/* Release 2 — visual-viewport-owned mobile location geometry. */
/* Keep the ordinary page on a stable small viewport so Safari toolbar motion
   does not continually reflow the booking composition. Keyboard mode below
   switches to the measured visual viewport instead. */
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] body,
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #private-app {
  min-height: 100svh !important;
}
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #private-app .flow,
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #private-app .step {
  min-height: calc(100svh - 76px) !important;
}

/* Places always scrolls before it can disappear behind Safari chrome. JS writes
   --book-results-max from visualViewport bottom minus the list's live top. */
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #place-autocomplete-mount.index-place-results {
  box-sizing: border-box !important;
  max-height: var(--book-results-max, min(42svh, 22rem)) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

/* Keyboard-open layout has one geometry owner: --book-vvh from visualViewport.
   Hide only redundant context, keep the focused field fixed, and let results use
   the remaining pane rather than shrinking the whole card around every row.
   The card keeps its resting position and chrome so focus reads as the same
   card gaining results, not a different screen jumping into place. */
html[data-skin="quiet-luxury-gold"][data-skeleton="01"][data-keyboard-open] body,
html[data-skin="quiet-luxury-gold"][data-skeleton="01"][data-keyboard-open] #private-app {
  height: var(--book-vvh, 100dvh) !important;
  min-height: var(--book-vvh, 100dvh) !important;
  overflow: hidden !important;
}
html[data-skin="quiet-luxury-gold"][data-skeleton="01"][data-keyboard-open] #private-app .flow {
  height: calc(var(--book-vvh, 100dvh) - 76px) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
html[data-skin="quiet-luxury-gold"][data-skeleton="01"][data-keyboard-open] #step-options.active {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 0 !important;
  gap: 8px !important;
  padding: 34px 0 max(8px, env(safe-area-inset-bottom)) !important;
  overflow: hidden !important;
  animation: none !important;
}
/* Secondary exits compete with results for the few rows above the keyboard
   and collide with Safari's accessory bar. They return when the keyboard closes. */
html[data-skin="quiet-luxury-gold"][data-skeleton="01"][data-keyboard-open] #step-options > #no-location-yet,
html[data-skin="quiet-luxury-gold"][data-skeleton="01"][data-keyboard-open] #step-options > .privacy-mini {
  display: none !important;
}
html[data-skin="quiet-luxury-gold"][data-skeleton="01"][data-keyboard-open] #step-options > .selected-time {
  display: none !important;
}
html[data-skin="quiet-luxury-gold"][data-skeleton="01"][data-keyboard-open] #step-options #location-wrap {
  /* Hug content (no dead-zone slab under one result) but keep the resting card
     chrome and inset so focusing the field doesn't jump. Shrinks when results
     need the room; the list scrolls inside. */
  display: flex !important;
  flex: 0 1 auto !important;
  flex-direction: column !important;
  min-height: 0 !important;
  gap: 16px !important;
  padding: 18px !important;
  overflow: hidden !important;
}
html[data-skin="quiet-luxury-gold"][data-skeleton="01"][data-keyboard-open] #step-options #location-wrap > h2 {
  flex: 0 0 auto !important;
  order: 0 !important;
  margin: 0 !important;
  font-size: clamp(24px, 7vw, 30px) !important;
}
html[data-skin="quiet-luxury-gold"][data-skeleton="01"][data-keyboard-open] #step-options #plain-location-fallback {
  flex: 0 0 auto !important;
  order: 1 !important;
  position: relative !important;
  z-index: 4 !important;
}
html[data-skin="quiet-luxury-gold"][data-skeleton="01"][data-keyboard-open] #step-options #place-search-shell {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  order: 2 !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}
html[data-skin="quiet-luxury-gold"][data-skeleton="01"][data-keyboard-open] #step-options .location-actions {
  display: none !important;
}
html[data-skin="quiet-luxury-gold"][data-skeleton="01"][data-keyboard-open] #place-autocomplete-mount.index-place-results {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: var(--book-results-max, 100%) !important;
  margin-top: 0 !important;
  overflow-y: auto !important;
  contain: layout paint !important;
  /* Rows size to their content; a fixed-height grid otherwise squeezes them
     to min-height and the city line runs into the divider. */
  grid-auto-rows: max-content !important;
}
html[data-skin="quiet-luxury-gold"][data-skeleton="01"][data-keyboard-open] #private-app .index-place-result {
  /* Compact rows while typing: more choices above the keyboard, still a 48px target. */
  min-height: 48px !important;
  padding: 9px 4px !important;
}
html[data-skin="quiet-luxury-gold"][data-skeleton="01"][data-keyboard-open] #private-app .index-place-result small {
  margin-top: 2px;
}
html[data-skin="quiet-luxury-gold"][data-skeleton="01"][data-keyboard-open] #place-search-status {
  flex: 0 0 auto !important;
  margin: 6px 0 0 !important;
}
html[data-skin="quiet-luxury-gold"][data-skeleton="01"][data-keyboard-open] #place-search-status:empty {
  display: none !important;
}


/* Release 3 — picker affordance and action hierarchy. */
/* Available neighboring times should read as choices, not disabled content.
   Loading/checking still dims the whole column, and placeholders remain faint. */
#private-app .book-picker .picker-value {
  opacity: .62 !important;
  color: var(--ql-ink-mid, #5e5851) !important;
}
#private-app .book-picker .picker-value.selected {
  opacity: 1 !important;
  color: var(--ql-ink, #1b1816) !important;
  font-weight: 600 !important;
}
#private-app .book-picker button.picker-value:disabled,
#private-app .book-picker .picker-placeholder {
  opacity: .24 !important;
  color: var(--ql-ink-muted, #8e877d) !important;
}
#private-app .book-picker .picker-band {
  border-top-color: var(--ql-gold-deep, #956824) !important;
  border-bottom-color: var(--ql-gold-deep, #956824) !important;
}

/* The rollers are the visible source of truth. Keep the duplicate text summary
   alive only as an aria-live announcement for assistive technology. */
#private-app .book-picker .picker-summary {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* State is communicated by material + border + text, not low opacity alone. */
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #private-app .primary-action,
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #private-app .location-confirm-button,
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #private-app .flow-continue,
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #private-app .note-actions .gold-word {
  border-color: var(--ql-ink, #1b1816) !important;
  background: var(--ql-ink, #1b1816) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  opacity: 1 !important;
  font-weight: 650 !important;
}
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #private-app .primary-action:disabled,
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #private-app .location-confirm-button:disabled,
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #private-app .flow-continue:disabled,
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #private-app .note-actions .gold-word:disabled {
  border-color: var(--ql-border-strong, #d5cdc0) !important;
  background: var(--ql-border-subtle, #ece8de) !important;
  color: var(--ql-ink-mid, #5e5851) !important;
  -webkit-text-fill-color: var(--ql-ink-mid, #5e5851) !important;
  opacity: 1 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #private-app .primary-action[aria-busy="true"],
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #private-app .location-confirm-button[aria-busy="true"] {
  border-color: var(--ql-gold-deep, #956824) !important;
  background: var(--ql-gold-deep, #956824) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  opacity: 1 !important;
  cursor: progress !important;
}

/* picker-confirm had older ID-heavy rules; repeat its exact selector so the
   explicit state materials above are not defeated by specificity. */
#private-app .book-picker #picker-confirm:disabled {
  border-color: var(--ql-border-strong, #d5cdc0) !important;
  background: var(--ql-border-subtle, #ece8de) !important;
  color: var(--ql-ink-mid, #5e5851) !important;
  -webkit-text-fill-color: var(--ql-ink-mid, #5e5851) !important;
  opacity: 1 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}
#private-app .book-picker #picker-confirm[aria-busy="true"] {
  border-color: var(--ql-gold-deep, #956824) !important;
  background: var(--ql-gold-deep, #956824) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  opacity: 1 !important;
  cursor: progress !important;
}

html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #private-app .request-management-actions .request-modify {
  border-color: var(--ql-border-strong, #d5cdc0) !important;
  background: var(--ql-surface-raised, #fff) !important;
  color: var(--ql-ink, #1b1816) !important;
  font-weight: 650 !important;
}


/* Finish-line pending receipt: field-level edits, text-only destructive cancel. */
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #guest-booking-state .guest-state-details {
  overflow: hidden !important;
  margin: 4px 0 0 !important;
  border: 1px solid var(--ql-border, #ded7ca) !important;
  border-radius: 14px !important;
  background: var(--ql-surface-raised, #fff) !important;
  box-shadow: var(--ql-shadow-card, 0 12px 28px rgba(27,24,22,.08)) !important;
}
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #guest-booking-state .guest-state-detail-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  min-height: 84px !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid var(--ql-border, #ded7ca) !important;
}
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #guest-booking-state .guest-state-detail-row:last-child {
  border-bottom: 0 !important;
}
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #guest-booking-state .guest-state-detail-row > span {
  display: grid !important;
  gap: 6px !important;
  min-width: 0 !important;
}
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #guest-booking-state .guest-state-detail-row small {
  color: var(--ql-ink-mid, #655f58) !important;
  font-size: 10px !important;
  font-weight: 650 !important;
  letter-spacing: .18em !important;
  text-transform: lowercase !important;
}
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #guest-booking-state .guest-state-detail-row strong {
  color: var(--ql-ink, #1b1816) !important;
  font-family: var(--ql-font-serif) !important;
  font-size: clamp(23px, 6vw, 31px) !important;
  font-weight: 400 !important;
  line-height: 1.08 !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #guest-booking-state .guest-state-pencil {
  /* Raw pencil visually; the 46px box remains only as an invisible tap target. */
  flex: 0 0 46px !important;
  width: 46px !important;
  height: 46px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ql-gold-deep, #956824) !important;
  font-size: 22px !important;
  line-height: 1 !important;
  box-shadow: none !important;
  transform: scaleX(-1) !important;
  -webkit-tap-highlight-color: transparent !important;
}
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #guest-booking-state .guest-state-cancel-text,
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] .request-management-actions .request-cancel {
  display: block !important;
  width: auto !important;
  min-height: 44px !important;
  margin: 10px auto 0 !important;
  padding: 8px 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #8f1f1f !important;
  -webkit-text-fill-color: #8f1f1f !important;
  box-shadow: none !important;
  font-family: var(--ql-font-serif) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

/* Cancellation is optimistic in presentation, but the backend still has to confirm
   before the emblem seal closes the session. */
.cancel-complete-overlay {
  position: fixed;
  z-index: 6000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(28, 27, 25, .52);
  opacity: 0;
  pointer-events: none;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  transition: opacity 180ms ease;
}
.cancel-complete-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.cancel-complete-panel {
  width: min(calc(100vw - 48px), 390px);
  padding: 42px 26px 30px;
  border: 1px solid rgba(149,104,36,.14);
  border-radius: 24px;
  background: rgba(255,253,249,.98);
  box-shadow: 0 24px 70px rgba(27,24,22,.22);
  text-align: center;
  transition: opacity 240ms ease, transform 320ms cubic-bezier(.16,1,.3,1), filter 240ms ease;
}
.cancel-complete-check {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  margin: 0 auto 18px;
  border: 1px solid #c98e25;
  border-radius: 50%;
  color: #b77d19;
  font: 400 34px/1 var(--ql-font-serif, serif);
}
.cancel-complete-panel h1 {
  margin: 0;
  color: var(--ql-ink, #1b1816);
  font-family: var(--ql-font-serif, serif);
  font-size: clamp(44px, 12vw, 60px);
  font-weight: 400;
  line-height: 1;
}
.cancel-complete-panel p {
  margin: 18px 0 24px;
  color: var(--ql-ink-mid, #655f58);
  font-family: var(--ql-font-serif, serif);
  font-size: 18px;
  line-height: 1.35;
}
.cancel-complete-panel span {
  display: block;
  color: var(--ql-ink-mid, #655f58);
  font-size: 11px;
  letter-spacing: .34em;
  text-transform: lowercase;
}
.cancel-complete-overlay.is-closing .cancel-complete-panel {
  opacity: .12;
  transform: scale(.985);
  filter: blur(4px);
}
@media (prefers-reduced-motion: reduce) {
  .cancel-complete-overlay,
  .cancel-complete-panel { transition: none !important; }
}


/* Locked-screen invariant: the code gate must never be blank.
   Successful-access/closeout animations are transient, but iOS can preserve
   those classes across a logout, cancellation, backgrounding, or bfcache
   restore. When body.locked owns the screen, it always wins. */
body.locked #access-modal.hidden {
  display: grid !important;
}
body.locked #access-modal.access-success-fading .access-panel > p,
body.locked #access-modal.access-success-fading #access-form,
body.locked #access-modal.emblem-building .access-panel > p,
body.locked #access-modal.emblem-building #access-form {
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  transform: none !important;
  pointer-events: auto !important;
}
body.locked #access-modal.emblem-building .access-panel > p {
  display: block !important;
}
body.locked #access-modal.emblem-building #access-form {
  display: grid !important;
}


/* Pending receipt controls — 2026-09-25.
   Pencil controls are flipped left. Done replaces the old cancel position;
   destructive cancel sits lower and intentionally smaller. */
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #guest-booking-state .guest-state-detail-row {
  justify-content: flex-start !important;
}
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #guest-booking-state .guest-state-detail-row > span {
  flex: 1 1 auto !important;
}
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #guest-booking-state .guest-state-pencil {
  order: -1 !important;
  flex: 0 0 46px !important;
}
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #guest-booking-state .guest-state-pending-actions {
  display: grid !important;
  width: 100% !important;
  margin-top: 4px !important;
}
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #guest-booking-state .guest-state-sms {
  display: grid !important;
  gap: 4px !important;
  margin: 2px 0 8px !important;
  color: var(--ql-ink, #1b1816) !important;
  font-family: var(--ql-font-sans) !important;
  font-size: 15px !important;
}
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #guest-booking-state .guest-state-sms > span {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 44px !important;
}
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #guest-booking-state .guest-state-sms input {
  width: 17px !important;
  height: 17px !important;
  margin: 0 !important;
  accent-color: var(--ql-gold, #c89b3c);
}
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #guest-booking-state .guest-state-sms small {
  min-height: 16px;
  color: var(--ql-ink-mid, #5e5851) !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
}

html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #guest-booking-state .guest-state-note-toggle {
  justify-self: start !important;
  min-height: 40px !important;
  padding: 6px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(149,104,36,.38) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ql-gold-deep, #956824) !important;
  font-family: var(--ql-font-sans) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #guest-booking-state .guest-state-note-editor {
  display: grid;
  gap: 10px;
  margin: 8px 0 14px;
}
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #guest-booking-state .guest-state-note-editor[hidden] {
  display: none !important;
}
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #guest-booking-state .guest-state-note-editor textarea {
  width: 100% !important;
  min-height: 92px !important;
  padding: 12px 14px !important;
  resize: vertical;
}
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #guest-booking-state .guest-state-note-save {
  justify-self: end !important;
  min-height: 40px !important;
  padding: 8px 14px !important;
  border: 1px solid var(--ql-border-strong, #d5cdc0) !important;
  border-radius: 10px !important;
  background: var(--ql-surface-raised, #fff) !important;
  color: var(--ql-ink, #1b1816) !important;
  font-size: 14px !important;
  font-weight: 650 !important;
}
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #guest-booking-state .guest-state-done {
  width: 100% !important;
  min-height: 52px !important;
  margin-top: 12px !important;
  padding: 13px 20px !important;
  border: 1px solid var(--ql-border-strong, #d5cdc0) !important;
  border-radius: 12px !important;
  background: var(--ql-surface-raised, #fff) !important;
  color: var(--ql-ink, #1b1816) !important;
  font-family: var(--ql-font-sans) !important;
  font-size: 16px !important;
  font-weight: 650 !important;
  box-shadow: var(--ql-shadow-subtle, 0 8px 20px rgba(27,24,22,.06)) !important;
}
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #guest-booking-state .guest-state-cancel-text {
  min-height: 34px !important;
  margin: 22px auto 0 !important;
  padding: 5px 8px !important;
  font-family: var(--ql-font-sans) !important;
  font-size: 13px !important;
  font-weight: 550 !important;
  letter-spacing: .01em !important;
}


html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #guest-booking-state .guest-state-detail-row {
  justify-content: space-between !important;
}
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #guest-booking-state .guest-state-detail-row > span {
  flex: 1 1 auto !important;
}
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #guest-booking-state .guest-state-pencil {
  order: initial !important;
  margin-left: auto !important;
  transform: scaleX(-1) !important;
  transform-origin: center !important;
}
/* The flow under the receipt is stale (last picker step). Keep it hidden
   through the seal so Done never flashes "what time?" before the lock. */
html[data-book-closeout="sealing"] #private-app .flow {
  visibility: hidden !important;
  pointer-events: none !important;
}
html[data-book-closeout="sealing"] #guest-booking-state {
  display: block !important;
  opacity: 0 !important;
  filter: blur(4px) !important;
  pointer-events: none !important;
  transition: opacity 340ms ease, filter 340ms ease !important;
  will-change: opacity, filter;
}


/* Time screen: the chosen day is real context, not a label. Match the
   location line above it (15px) instead of the 11px tracked eyebrow. */
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #private-app #step-range #range-date {
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  line-height: 1.45 !important;
}

/* Release 1 — BOOK(ED) copy is visually lowercase throughout the guest flow. */
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #private-app .step,
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #private-app .step * {
  text-transform: lowercase !important;
}

/* A day decision should never look ignored while its verified window opens. */
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #day-list [data-book-opening-day="1"] {
  opacity: 1 !important;
  border-color: var(--ql-gold-deep, #956824) !important;
  cursor: wait;
}


/* Release 2 — inline pending-field editor shell. */
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #guest-booking-state .guest-state-detail-row.is-editing {
  align-items: flex-start !important;
}
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #guest-booking-state .guest-state-inline-editor {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 10px;
}
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #guest-booking-state .guest-state-inline-editor[hidden] {
  display: none !important;
}
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #guest-booking-state .guest-state-pencil[aria-expanded="true"] {
  transform: scaleX(-1) rotate(-8deg) !important;
}


/* Release 2 — inline pending editors live inside the receipt rows. */
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #guest-booking-state .guest-state-detail-row {
  flex-wrap: wrap !important;
}
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #guest-booking-state .guest-state-inline-editor {
  flex: 1 0 100% !important;
  width: 100% !important;
  margin-top: 2px !important;
  padding-top: 10px !important;
  border-top: 1px solid var(--ql-border, #ded7ca) !important;
}
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #guest-booking-state .guest-state-inline-control {
  display: grid !important;
  gap: 10px !important;
}
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #guest-booking-state .guest-state-inline-input {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 48px !important;
  padding: 8px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ql-gold-deep, #956824) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ql-ink, #1b1816) !important;
  font: inherit !important;
  font-size: 19px !important;
  outline: 0 !important;
  box-shadow: none !important;
  text-transform: lowercase !important;
}
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #guest-booking-state .guest-state-inline-label {
  display: grid !important;
  gap: 6px !important;
  color: var(--ql-ink-mid, #655f58) !important;
  font-size: 10px !important;
  font-weight: 650 !important;
  letter-spacing: .16em !important;
  text-transform: lowercase !important;
}
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #guest-booking-state .guest-state-inline-days {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #guest-booking-state .guest-state-inline-day {
  min-height: 44px !important;
  padding: 9px 10px !important;
  border: 1px solid var(--ql-border, #ded7ca) !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--ql-ink, #1b1816) !important;
  font: inherit !important;
  font-size: 14px !important;
  text-transform: lowercase !important;
}
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #guest-booking-state .guest-state-inline-day[aria-pressed="true"] {
  border-color: var(--ql-gold-deep, #956824) !important;
  background: color-mix(in srgb, var(--ql-gold-deep, #956824) 8%, transparent) !important;
}
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #guest-booking-state .guest-state-inline-actions {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-top: 12px !important;
}
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #guest-booking-state .guest-state-inline-actions button {
  min-height: 42px !important;
  padding: 8px 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ql-gold-deep, #956824) !important;
  font: inherit !important;
  font-weight: 650 !important;
  text-transform: lowercase !important;
}
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #guest-booking-state .guest-state-inline-actions [data-inline-close] {
  color: var(--ql-ink-mid, #655f58) !important;
  font-weight: 500 !important;
}
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #guest-booking-state .guest-state-inline-error {
  margin: 8px 0 0 !important;
  color: #8f1f1f !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  text-transform: lowercase !important;
}


html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #guest-booking-state .guest-state-inline-results {
  display: grid !important;
  gap: 0 !important;
}
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #guest-booking-state .guest-state-inline-result {
  width: 100% !important;
  padding: 10px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ql-border, #ded7ca) !important;
  background: transparent !important;
  color: var(--ql-ink, #1b1816) !important;
  text-align: left !important;
  box-shadow: none !important;
  text-transform: lowercase !important;
}
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #guest-booking-state .guest-state-inline-result strong,
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #guest-booking-state .guest-state-inline-result small {
  display: block !important;
  font-family: var(--ql-font-sans, system-ui, sans-serif) !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  text-transform: lowercase !important;
}
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #guest-booking-state .guest-state-inline-result strong {
  font-size: 17px !important;
  letter-spacing: 0 !important;
  overflow-wrap: normal !important;
}
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #guest-booking-state .guest-state-inline-result small {
  margin-top: 2px !important;
  color: var(--ql-ink-mid, #655f58) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
}


html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #guest-booking-state .guest-state-inline-dependent {
  grid-column: 1 / -1 !important;
  margin-top: 2px !important;
}
html[data-skin="quiet-luxury-gold"][data-skeleton="01"] #guest-booking-state .guest-state-inline-select {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 46px !important;
  padding: 8px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ql-gold-deep, #956824) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ql-ink, #1b1816) !important;
  font: inherit !important;
  font-size: 17px !important;
  outline: 0 !important;
  box-shadow: none !important;
  text-transform: lowercase !important;
}