/* Booking app frame: a split-screen, no-scroll wizard over the shared
   Aspirean paper-and-sage system. The page itself never scrolls; each
   screen scrolls internally only when it must (short viewports). */

html, body { height: 100%; }
body { overflow: hidden; }

.skip-link {
  position: fixed; z-index: 120; top: 12px; left: 12px;
  padding: 10px 14px; background: var(--paper); color: var(--ink);
  border: 1px solid var(--sage); border-radius: 2px;
  transform: translateY(-180%);
}
.skip-link:focus { transform: none; }

.app-frame {
  display: grid; grid-template-columns: minmax(340px, 41%) minmax(0, 1fr);
  height: 100vh; height: 100dvh;
}

/* ---------- Fog rail ---------- */

.fog-rail { position: relative; overflow: hidden; background: var(--ink); }
.fog-rail__media, .fog-rail__scrim { position: absolute; inset: 0; }
.fog-rail__media img, .fog-rail__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%;
}
.fog-rail__scrim {
  background: linear-gradient(180deg, rgba(23,33,27,.7), rgba(23,33,27,.44) 42%, rgba(23,33,27,.84));
}

/* Ambient motion: two translucent mist layers slide across the still at
   different speeds and in opposite directions. Each layer is 200% wide and
   tiles its gradients at exactly half its own width, so translating one full
   tile (50%) loops without a seam. Every gradient stays fully inside its
   tile — a puff clipped at a tile edge would print a vertical seam each
   period. The still itself must NOT move: it is the video's first frame, and
   any transform on it would break the seamless video fade-in. */
.fog-rail__mist {
  position: absolute; top: 0; bottom: 0; left: 0; width: 200%;
  background-repeat: repeat-x; background-size: 50% 100%;
  pointer-events: none; will-change: transform;
  transition: opacity 1.2s ease;
}
.fog-rail__mist--a {
  background-image:
    radial-gradient(22% 30% at 26% 34%, rgba(246,245,238,.30), transparent 70%),
    radial-gradient(19% 24% at 62% 56%, rgba(246,245,238,.20), transparent 72%),
    radial-gradient(13% 18% at 84% 28%, rgba(246,245,238,.16), transparent 70%);
  animation: mist-drift 85s linear infinite;
}
.fog-rail__mist--b {
  background-image:
    radial-gradient(24% 34% at 40% 66%, rgba(246,245,238,.22), transparent 70%),
    radial-gradient(16% 22% at 76% 40%, rgba(246,245,238,.16), transparent 72%),
    radial-gradient(12% 16% at 12% 50%, rgba(246,245,238,.13), transparent 70%);
  animation:
    mist-drift 130s linear infinite reverse,
    mist-breathe 16s ease-in-out infinite alternate;
}
@keyframes mist-drift {
  from { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(-25%, -1.5%, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes mist-breathe {
  from { opacity: .55; }
  to   { opacity: 1; }
}

/* Real fog footage, injected by booking.js on wide viewports only (never on
   the mobile band, under reduced motion, or with Save-Data). It fades in over
   the still photo once actually playing; the CSS mist bows out with it so the
   two fog systems never run at once. */
.fog-rail__video { opacity: 0; transition: opacity 1.2s ease; }
.fog-rail.has-video .fog-rail__video { opacity: 1; }
.fog-rail.has-video .fog-rail__mist { animation: none; opacity: 0; }
.fog-rail__content {
  position: relative; height: 100%;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: var(--s-4); padding: clamp(26px, 3.5vw, 52px);
}
.fog-rail__brand { display: inline-block; align-self: flex-start; }
.fog-rail__brand img { display: block; width: clamp(150px, 13vw, 196px); height: auto; }
.fog-rail__brand:focus-visible { outline: 2px solid var(--sage-glow); outline-offset: 4px; }
.fog-rail__title { font-size: var(--step-3); color: var(--paper); margin: 10px 0 0; max-width: 13ch; }
.fog-rail__duration { color: var(--paper-soft); font-size: 0.9375rem; margin: 10px 0 0; }

.rail-summary { margin-top: var(--s-4); display: grid; }
.rail-summary:empty { display: none; margin: 0; }
.rail-summary__item {
  display: block; width: 100%; text-align: left; background: transparent;
  border: 0; border-top: 1px solid var(--rule-ink); border-radius: 0;
  padding: 12px 0; color: var(--paper); font-family: var(--sans); cursor: pointer;
}
.rail-summary__item:last-child { border-bottom: 1px solid var(--rule-ink); }
.rail-summary__item:disabled { cursor: default; }
.rail-summary__label {
  display: block; font-size: 0.64rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--sage-glow); margin-bottom: 4px;
}
.rail-summary__value { display: block; font-size: 0.9375rem; transition: color 0.2s ease; }
.rail-summary__item:not(:disabled):hover .rail-summary__value { color: var(--sage-glow); }
.rail-summary__item:focus-visible { outline: 2px solid var(--sage-glow); outline-offset: 3px; }

/* A freshly added selection rises into the rail while booking.js animates
   the panel's height, so the text above glides up instead of snapping. */
.rail-summary__item.is-new { animation: rail-item-in 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s backwards; }
@keyframes rail-item-in { from { opacity: 0; transform: translateY(12px); } }

.rail-step {
  margin-top: var(--s-3); color: var(--paper-soft);
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
}
.rail-step:empty { display: none; }

/* ---------- Stage and screen transitions ---------- */

.stage { position: relative; min-width: 0; background: var(--paper); overflow: hidden; }
.screens { position: absolute; inset: 0; }

/* Screens overlap absolutely; visibility flips after the fade so the
   outgoing screen stays visible while it drifts out. Screens before the
   active one rest to the left, after it to the right, which makes both
   directions of travel read correctly with one pair of classes. */
.screen {
  position: absolute; inset: 0; overflow-y: auto; display: flex;
  visibility: hidden; opacity: 0; transform: translateX(26px);
  transition: opacity 0.28s ease, transform 0.28s ease, visibility 0s linear 0.3s;
}
.screen.is-left { transform: translateX(-26px); }
.screen.is-active {
  visibility: visible; opacity: 1; transform: none;
  transition: opacity 0.3s ease 0.14s, transform 0.3s ease 0.14s, visibility 0s;
}
/* Top-anchored, not centered: content height changes as choices render
   (3 vs 4 times, 4- vs 6-row months), and re-centering would bounce the
   heading. Anchoring keeps every screen's heading on one stable line. */
.screen__inner {
  margin: 0 auto; width: 100%; max-width: 780px;
  padding: clamp(36px, 9vh, 96px) clamp(24px, 5vw, 72px) clamp(32px, 6vh, 72px);
}

.back-link {
  display: inline-block; background: none; border: 0; padding: 0 0 2px;
  margin: 0 0 var(--s-3); color: var(--ink-mid); font-family: var(--sans);
  font-size: 0.8125rem; letter-spacing: 0.06em; cursor: pointer;
  transition: color 0.2s ease;
}
.back-link:hover { color: var(--sage-deep); }
.back-link:focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; }

.screen__question { font-size: var(--step-3); margin: 0 0 var(--s-4); max-width: 22ch; }
.screen__question em { color: var(--sage-deep); font-style: italic; }
.screen__question:focus { outline: none; }
.screen__note {
  color: var(--ink-soft); font-size: 0.9375rem; max-width: 52ch;
  margin: calc(-1 * var(--s-3)) 0 var(--s-4);
}

/* ---------- Screen 1: meeting type ---------- */

.choice-rows { border-bottom: 1px solid var(--rule); }
.meeting-choice {
  position: relative; width: 100%; display: grid; grid-template-columns: 1fr auto;
  gap: 6px 28px; text-align: left; padding: 26px 4px 26px 0;
  border: 0; border-top: 1px solid var(--rule); border-radius: 0;
  background: transparent; color: var(--ink); cursor: pointer;
  font-family: var(--sans); transition: color 0.2s ease, background 0.2s ease;
}
.meeting-choice:hover { color: var(--sage-deep); }
.meeting-choice:focus-visible, .cal-day:focus-visible, .slot-button:focus-visible {
  outline: 2px solid var(--sage); outline-offset: 3px;
}
.meeting-choice[aria-pressed="true"] { background: rgba(91,158,116,0.08); }
.meeting-choice__title { font-family: var(--serif); font-size: 1.5rem; font-weight: 400; line-height: 1.2; }
.meeting-choice__copy { grid-column: 1; color: var(--ink-soft); font-size: 0.9063rem; line-height: 1.5; }
.meeting-choice__mark {
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sage-deep);
}
.meeting-choice[aria-pressed="true"] .meeting-choice__mark { font-size: 0; }
.meeting-choice[aria-pressed="true"] .meeting-choice__mark::before { font-size: 0.78rem; content: "✓ Selected"; }

/* ---------- Screen 2: calendar + times ---------- */

.availability-status, .step-prompt { color: var(--ink-mid); font-size: 0.9063rem; margin-bottom: var(--s-3); }
.availability-status.is-notice { color: var(--sage-deep); }
.availability-status:empty, .step-prompt:empty { display: none; }

/* Both columns may shrink to zero-basis so narrow stages squeeze the grid
   instead of overflowing it; the calendar is a size container so its cells
   and type scale with the column, not the viewport. */
.when-grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 4vw, 60px); align-items: start;
}
.cal { min-width: 0; container-type: inline-size; }
.times { min-width: 0; }

.cal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.cal__label { margin: 0; font-family: var(--serif); font-size: 1.3rem; font-weight: 400; }
@supports (container-type: inline-size) {
  .cal__label { font-size: clamp(1.02rem, 5.4cqw, 1.3rem); }
}
.cal__nav { display: flex; gap: 6px; }
.cal__nav button {
  width: 34px; height: 34px; border: 1px solid var(--rule); border-radius: 2px;
  background: transparent; color: var(--ink); font-size: 1.05rem; line-height: 1;
  cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease;
}
.cal__nav button:hover:not(:disabled) { border-color: var(--sage-deep); color: var(--sage-deep); }
.cal__nav button:disabled { color: var(--ink-faint); cursor: default; }
.cal__nav button:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }

.cal__weekdays, .cal__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
@supports (container-type: inline-size) {
  .cal__weekdays, .cal__days { gap: clamp(2px, 0.8cqw, 4px); }
}
.cal__weekdays span {
  text-align: center; padding: 6px 0; font-size: 0.64rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mid);
}
/* Cells take their size purely from the column (aspect-ratio, no fixed
   minimum) so the grid stays square at any stage width instead of
   distorting when a fixed height outgrows a narrow column. */
.cal-day {
  aspect-ratio: 1 / 1; min-height: 0; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 2px; background: transparent;
  color: var(--ink-faint); font-family: var(--sans); font-size: 0.9375rem;
}
@supports (container-type: inline-size) {
  .cal-day { font-size: clamp(0.72rem, 4.5cqw, 0.9375rem); }
}
.cal-day.is-open {
  color: var(--ink); border-color: var(--rule); cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.cal-day.is-open:hover { border-color: var(--sage-deep); }
.cal-day[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.cal-day.is-outside { visibility: hidden; }

.times .field-select { max-width: none; margin-bottom: var(--s-3); }
.field select {
  width: 100%; appearance: none; font-family: var(--sans); font-size: 1rem;
  color: var(--ink); background: transparent;
  border: 0; border-bottom: 1px solid var(--rule); border-radius: 0;
  padding: 10px 34px 10px 2px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-mid) 50%), linear-gradient(135deg, var(--ink-mid) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 8px) 50%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.field select:focus-visible { outline: none; border-color: var(--sage-deep); box-shadow: 0 1px 0 var(--sage-deep); }

.slot-list { display: grid; grid-template-columns: 1fr; gap: 10px; }
.slot-button {
  min-height: 66px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  padding: 12px 16px; border: 1px solid var(--rule); border-radius: 2px;
  background: transparent; color: var(--ink); text-align: left; cursor: pointer;
  font-family: var(--sans); transition: border-color 0.2s ease, background 0.2s ease;
}
.slot-button:hover { border-color: var(--sage-deep); }
.slot-button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.slot-button__local { font-size: 0.9375rem; }
.slot-button__pacific { font-size: 0.75rem; color: var(--ink-mid); margin-top: 3px; }
.slot-button[aria-pressed="true"] .slot-button__pacific { color: var(--paper-soft); }

/* ---------- Screen 3: details ---------- */

.booking-form { display: grid; gap: 22px; max-width: 640px; }
.booking-form .field { gap: 5px; }
.field-error, .form-error { min-height: 0; margin: 0; font-size: 0.8125rem; color: #8a352f; }
.field-error:empty, .form-error:empty { display: none; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #8a352f; }
.bot-field, .bot-field-wrap {
  position: absolute !important; left: -9999px !important; top: auto !important;
  width: 1px !important; height: 1px !important; overflow: hidden !important;
  opacity: 0 !important; border: 0 !important; padding: 0 !important;
}
.captcha-wrap { min-height: 78px; }
.captcha-wrap:empty { min-height: 0; }
.reschedule-submit { margin-top: var(--s-4); }

/* ---------- Screen 4: result ---------- */

.result-panel { padding-top: var(--s-3); border-top: 2px solid var(--sage); font-family: var(--sans); font-size: 1rem; }
.result-panel:empty { display: none; }
.result-panel h2 { font-family: var(--serif); font-weight: 300; font-size: var(--step-3); margin: var(--s-3) 0; outline: none; }
.result-panel p { max-width: 62ch; color: var(--ink-soft); }
.result-panel .result-summary {
  color: var(--ink); font-size: 1.05rem;
  border-bottom: 1px solid var(--rule); padding: 0 0 18px; margin: 0 0 24px;
}
.result-panel a { color: var(--sage-deep); }
.fallback-links { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 22px; }

/* ---------- Small screens: fog collapses to a slim header band ---------- */

@media (max-width: 899px) {
  .app-frame { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .fog-rail__content { height: auto; padding: 16px var(--gutter) 14px; gap: 8px; justify-content: flex-start; }
  .fog-rail .eyebrow { display: none; }
  .fog-rail__brand img { width: 124px; }
  .fog-rail__title { font-size: 1.3rem; max-width: none; margin: 0; }
  .fog-rail__duration { margin: 2px 0 0; font-size: 0.8125rem; }
  .rail-summary { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 2px 18px; }
  .rail-summary:empty { display: none; }
  .rail-summary__item, .rail-summary__item:last-child { border: 0; padding: 2px 0; width: auto; }
  .rail-summary__label { display: none; }
  .rail-summary__value { font-size: 0.8125rem; border-bottom: 1px solid var(--rule-ink); padding-bottom: 1px; }
  .rail-step { display: none; }
  .screen__inner { margin: 0 auto; padding: 26px var(--gutter) 44px; }
  .when-grid { grid-template-columns: 1fr; gap: var(--s-4); }
}

@media (max-width: 620px) {
  .meeting-choice { grid-template-columns: 1fr; padding-right: 12px; }
  .meeting-choice__mark { grid-column: 1; grid-row: auto; margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .screen, .screen.is-active { transition: none; }
  .cal-day.is-open, .cal__nav button, .slot-button, .meeting-choice,
  .back-link, .rail-summary__value { transition: none; }
  .rail-summary__item.is-new { animation: none; }
  .fog-rail__mist { animation: none; }
}