/* human booking flow: fewer controls, clearer hierarchy */
#access-modal .access-panel { gap: 1.25rem; }
#access-modal .access-panel > p { margin: .2rem 0 .5rem; color: color-mix(in srgb, var(--color-text) 78%, transparent); font-size: .95rem; text-transform: lowercase; }
#access-modal .access-form { margin-top: .2rem; }

.first-time-intro { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: flex-end; justify-content: center; background: linear-gradient(180deg, color-mix(in srgb, var(--color-canvas) 8%, transparent), color-mix(in srgb, var(--color-canvas) 34%, transparent) 58%, color-mix(in srgb, var(--color-canvas) 62%, transparent)); backdrop-filter: blur(4px); }
.first-time-intro-card { width: min(100%, var(--sheet-max)); display: grid; gap: .9rem; padding: 1rem 1.15rem calc(1rem + env(safe-area-inset-bottom)); border: 1px solid var(--color-line-soft); border-bottom: 0; border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; background: var(--gradient-sheet), var(--color-surface); box-shadow: var(--shadow-sheet); animation: human-sheet-up .34s var(--ease-out) both; }
.first-time-intro-card::before { content: ""; width: 2.8rem; height: .28rem; justify-self: center; margin: -.1rem 0 .2rem; border-radius: var(--radius-pill); background: var(--color-sheet-handle); }
.first-time-intro-card p { margin: 0; color: color-mix(in srgb, var(--color-text) 82%, transparent); font-size: .95rem; line-height: 1.48; text-transform: lowercase; }
.first-time-intro-card .first-time-kicker { color: var(--color-text-strong); font-size: clamp(2.15rem,9vw,3.3rem); line-height: .95; letter-spacing: -.045em; }
#first-time-got-it { min-height: 3.55rem; margin-top: .1rem; border: 0; border-top: 1px solid var(--color-primary-line); border-bottom: 1px solid var(--color-primary-line-strong); background: var(--gradient-primary-action); color: var(--color-primary-strong); font: inherit; font-size: 1.2rem; font-weight: 600; text-transform: lowercase; }
body.intro-open { overflow: hidden; }
@keyframes human-sheet-up { from { transform: translateY(105%); opacity: .35; } to { transform: translateY(0); opacity: 1; } }

.app-header { position: sticky; }
.app-header #step-back { position: absolute; left: max(.25rem, env(safe-area-inset-left)); top: 50%; transform: translateY(-50%); }
.app-header .emblem-inside { margin-left: auto; pointer-events: none; }

#step-day > h1 { margin-bottom: .45rem; }
#step-day #notice { min-height: 1.15rem; margin-bottom: .35rem; opacity: .72; }
#step-day .now-launch-wrap { margin-block: .35rem .7rem; }
#step-day .now-chip { box-shadow: none !important; filter: none !important; }
#step-day .now-chip .electricity,
#step-day .now-chip .spark-layer { opacity: .32; }
#step-day .now-chip .now-label { letter-spacing: .1em; }
#step-day .now-caption { opacity: .62; }
.human-row-arrow { display: none !important; }
.choice-row { padding-right: .25rem; }
#day-list .choice-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
#day-list .choice-row > strong { min-width: 0; }
#day-list .choice-row > span { color: var(--color-text-muted); font-size: var(--type-xs); line-height: 1.15; text-align: right; white-space: nowrap; }

body.assembling-times #step-range,
body.assembling-times #step-time { visibility: hidden; }
#step-time #time-range-label { margin-bottom: .35rem; color: color-mix(in srgb, var(--color-text) 58%, transparent); font-size: .9rem; text-transform: lowercase; }
#step-time #time-date { margin: 0 0 1.2rem; font-size: clamp(2.9rem,12vw,4.8rem); text-transform: lowercase; }
#step-time #time-list { display:flex; flex-direction:column; margin-top:.5rem; }
.time-period-group { margin: 0 0 1.7rem; padding: 1rem 0 1.15rem; border-top: 1px solid var(--color-line-soft); }
.time-period-group[data-period="after midnight"] { order: 0; }
.time-period-group[data-period="before dawn"] { order: 1; }
.time-period-group[data-period="early morning"] { order: 2; }
.time-period-group[data-period="late morning"] { order: 3; }
.time-period-group[data-period="early afternoon"] { order: 4; }
.time-period-group[data-period="late afternoon"] { order: 5; }
.time-period-group[data-period="evening"] { order: 6; }
.time-period-group[data-period="late night"] { order: 7; }
.time-period-group:first-child { border-top-color: color-mix(in srgb, var(--color-primary) 22%, transparent); }
.time-period-group h2 { margin: 0 0 .8rem; color: color-mix(in srgb, var(--color-text) 76%, transparent); font-size: clamp(1.45rem,6.2vw,2rem); font-weight: 500; line-height: 1; letter-spacing: -.025em; text-transform: lowercase; }
.time-period-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:1rem; }
.time-period-grid .time-chip { min-height:5.25rem; font-size:clamp(1.7rem,7vw,2.15rem); }
#step-time #time-list[data-unified-times="true"] { display:flex !important; flex-direction:column; width:100%; }

#step-options .selected-time { margin-bottom: .35rem; }
#step-options #location-wrap { display: flex; flex-direction: column; gap: 1rem; }
#step-options #location-wrap > h2 { margin: 0; font-size: clamp(2.15rem, 8vw, 3.25rem); line-height: 1.05; letter-spacing: -.045em; text-transform: lowercase; }
#step-options .plain-location-fallback { order: 1; }
#step-options .place-search-shell { order: 2; display: flex; flex-direction: column; gap: .85rem; }
#step-options .selected-place-card { order: 3; }
#step-options .location-confirm-button { order: 4; }
#step-options #place-autocomplete-mount { order: 1; }
#step-options #place-search-status { order: 2; }
#step-options .location-actions { order: 3; display: flex; }
#step-options .human-place-status:empty { display: none; }
#step-options #place-autocomplete-mount:empty { display: none; min-height: 0; }
#step-options .selected-place-card { margin-top: .25rem; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#step-options .selected-place-card:focus-visible { outline: 1px solid color-mix(in srgb, var(--color-primary-strong) 68%, transparent); outline-offset: 4px; }
#step-options .human-no-location { margin: var(--space-4) auto 0; align-self: center; width: auto; min-height: var(--tap-min); padding: .55rem .85rem; border: 0; background: transparent; box-shadow: none; color: color-mix(in srgb, var(--color-text) 82%, transparent); font-size: .95rem; font-weight: 400; line-height: 1.2; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--color-text) 28%, transparent); text-underline-offset: .22em; text-transform: lowercase; }
#step-options .human-no-location:active { color: color-mix(in srgb, var(--color-text) 72%, transparent); background: transparent; }
#step-options #use-current-location { text-transform: lowercase; }
#step-options gmp-place-autocomplete { width: 100%; }
/* visualViewport already excludes the software keyboard. Do not add the
   keyboard height back as page padding or Safari exposes a beige dead zone. */
html[data-keyboard-open] .flow { padding-bottom: 0; }
html[data-keyboard-open] #step-options { min-height: auto; }

.note-actions .note-primary-exit { margin-left: auto; margin-right: auto; min-width: 9rem; border-top: 1px solid var(--color-primary-line); border-bottom-color: var(--color-primary-line-strong); color: var(--color-primary-strong); font-size: 1.08rem; }

/* Interaction integrity belongs to the shared visual system, not runtime JS. */
#step-time #time-list:not([data-nightlife-accordion]):not([data-unified-times]) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-4);
  row-gap: 0;
}

body:has(#step-options.active) #step-back {
  position: fixed !important;
  left: max(.45rem, env(safe-area-inset-left)) !important;
  top: max(.55rem, env(safe-area-inset-top)) !important;
  transform: none !important;
  z-index: 1400 !important;
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-canvas) 82%, transparent) !important;
}

#toast.toast {
  z-index: 2200 !important;
  filter: none !important;
  -webkit-filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#toast .toast-card {
  filter: none !important;
  -webkit-filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
}


body.guest-booking-state-open .flow {
  visibility: hidden !important;
  pointer-events: none !important;
}

#guest-booking-state {
  position: fixed;
  inset: var(--header-height) 0 0;
  z-index: 900;
  overflow: auto;
  background: var(--gradient-canvas), var(--color-canvas);
  padding: clamp(1.3rem, 5vw, 2.2rem) max(1rem, env(safe-area-inset-left)) calc(2rem + env(safe-area-inset-bottom));
}

#guest-booking-state .guest-state-inner {
  width: min(100%, 32rem);
  margin: 0 auto;
  display: grid;
  align-content: start;
  gap: var(--space-4);
  min-height: calc(100svh - 7rem);
}

#guest-booking-state .guest-state-kicker {
  margin: 1rem 0 0;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
  font-size: .82rem;
  font-weight: var(--font-semibold);
  letter-spacing: .08em;
  text-transform: uppercase;
}

#guest-booking-state h1 {
  margin: .15rem 0 .2rem;
  color: var(--color-text-strong);
  font-size: clamp(3rem, 13vw, 5rem);
  font-weight: var(--font-medium);
  line-height: .92;
  letter-spacing: -.05em;
  text-transform: lowercase;
}

#guest-booking-state .guest-state-when {
  margin: 0;
  padding: .9rem 0;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  color: var(--color-primary-strong);
  font-size: clamp(1.45rem, 6vw, 2rem);
  font-weight: var(--font-medium);
  text-transform: lowercase;
}

#guest-booking-state .guest-state-copy {
  margin: 0;
  color: color-mix(in srgb, var(--color-text) 68%, transparent);
  font-size: .98rem;
  line-height: var(--leading-body);
  text-transform: lowercase;
}

#guest-booking-state .guest-state-action {
  justify-self: start;
  margin-top: .6rem;
  min-height: var(--control-min);
  padding: .5rem 0;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-primary-strong) 55%, transparent);
  background: transparent;
  color: var(--color-primary-strong);
  font: var(--font-semibold) 1.15rem var(--font-sans);
  text-transform: lowercase;
  cursor: pointer;
}

#guest-booking-state .guest-state-item + .guest-state-item {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-line-soft);
}


/* Hero day + compact six-day grid */
#day-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: .85rem;
  width: 100%;
  margin-top: .75rem;
  padding: .1rem 0 .85rem;
  overflow: visible;
}
#day-list .day-featured {
  width: 100%;
  min-height: 12.25rem;
  padding: 1.3rem 1.2rem;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: end;
  text-align: left;
  border: 1px solid var(--color-primary-line);
  border-radius: calc(var(--radius-card) + .2rem);
  background:
    radial-gradient(circle at 88% 18%, color-mix(in srgb,var(--color-primary) 12%,transparent), transparent 34%),
    linear-gradient(155deg, color-mix(in srgb,var(--color-text-strong) 4%,transparent), color-mix(in srgb,var(--color-primary) 5%,transparent));
  box-shadow: var(--shadow-card);
}
#day-list .day-featured-copy {
  display: grid;
  gap: .45rem;
  text-align: left;
  white-space: normal;
}
#day-list .day-featured-kicker {
  color: var(--color-primary-strong);
  font-size: .72rem;
  font-weight: 650;
  letter-spacing: .14em;
  text-transform: uppercase;
}
#day-list .day-featured strong {
  max-width: 12ch;
  color: var(--color-text-strong);
  font-size: clamp(2rem, 9vw, 3.2rem);
  font-weight: 500;
  line-height: .95;
  letter-spacing: -.045em;
}
#day-list .day-featured-status {
  color: var(--color-text-muted);
  font-size: .82rem;
  text-transform: lowercase;
}
#day-list .day-featured > b {
  align-self: end;
  color: var(--color-primary-strong);
  font-size: 1.35rem;
  font-weight: 400;
}
#day-list .day-mini-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: .65rem;
}
#day-list .day-mini {
  min-width: 0;
  min-height: 5.5rem;
  padding: .75rem .7rem;
  display: grid;
  grid-template-columns: 1fr;
  align-content: space-between;
  text-align: left;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: color-mix(in srgb,var(--color-canvas) 94%,var(--color-primary) 6%);
}
#day-list .day-mini span {
  display: grid;
  gap: .3rem;
  text-align: left;
  white-space: normal;
}
#day-list .day-mini strong {
  font-size: 1rem;
  line-height: 1;
}
#day-list .day-mini small {
  margin: 0;
  color: var(--color-text-muted);
  font-size: .68rem;
  line-height: 1.2;
}
#day-list .day-mini.unavailable {
  opacity: .42;
}
#day-list .day-mini:active,
#day-list .day-mini:focus-visible {
  border-color: var(--color-primary-line-strong);
  background: var(--color-primary-faint);
}
#day-list .now-choice {
  width: 100%;
  min-height: 3.75rem;
  padding: .7rem .9rem;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  border: 0;
  border-top: 1px solid var(--color-line-soft);
  border-bottom: 1px solid var(--color-line-soft);
  border-radius: 0;
  background: transparent;
}
#day-list .now-choice span {
  display: grid;
  gap: .2rem;
  text-align: left;
}


#step-host .selected-time strong,
#step-options .selected-time strong {
  font-size: clamp(1.45rem, 4.5vw, 2.2rem);
  line-height: 1.1;
  letter-spacing: -.025em;
}

@media (min-width: 700px) {
  .flow { width: min(calc(100% - 4rem), 44rem); }
  .step h1 { font-size: clamp(2.65rem, 6vw, 3.5rem); }
  #step-day { width: min(calc(100vw - 4rem), 68rem); margin-left: 50%; transform: translateX(-50%); }
  #day-list .day-featured { min-height: 14rem; }
  #day-list .day-mini-grid { gap: .75rem; }
  #step-options #location-wrap > h2 { font-size: clamp(2.2rem, 5vw, 3rem); }
  .emblem-inside { width: 48px; height: 48px; }
}

@media (min-width: 1000px) {
  #step-day { width: min(calc(100vw - 7rem), 76rem); }
  #day-list .day-featured { min-height: 15rem; }
}


/* Quiet progress cue: the location screen itself recedes while reachability resolves. */
body.book-location-checking #step-options.active {
  opacity: .82;
  transform: scale(.998);
  filter: none;
  pointer-events: none;
  transition: opacity 160ms ease, transform 180ms cubic-bezier(.16,1,.3,1);
}