/* =============================================================================
   /inquire only. Loaded after main.css and by no other page.

   Everything here is either a thing main.css does not have (native radio chips,
   the growing brass progress segment, the sandboxed email frame, the result
   panel) or a small override of a shared component for this one page. No
   tokens are redefined; every colour comes from main.css.
============================================================================= */

/* -----------------------------------------------------------------------------
   Chips built on native radios

   main.css styles .chip for a <button aria-pressed>. Here a chip is a <label>
   tied to a real radio or checkbox, so the form posts and the keyboard works
   with no script at all. The control keeps its size and stays focusable; it is
   just painted out from under the label.
----------------------------------------------------------------------------- */

.chip-field {
  position: relative;
  display: inline-flex;
}

.chip-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  appearance: none;
  cursor: pointer;
}

.chip-field .chip {
  pointer-events: none;
}

.chip-input:hover + .chip {
  border-color: var(--pine);
}

.chip-input:checked + .chip {
  background: var(--pine);
  border-color: var(--pine);
  color: var(--on-dark);
}

.chip-input:focus-visible + .chip {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}

/* The month row is long. Let it breathe a little tighter than the others so
   twelve names still wrap into a calm block at 375px. */
.chip-group--months {
  gap: 0.5rem;
}

.chip-group--years,
.chip-group--flexible {
  margin-top: 0.75rem;
}

/* -----------------------------------------------------------------------------
   Progress line

   main.css draws the step words over a solid brass border. On this page the
   line is a hairline with a brass segment that grows as the visitor moves
   through the six steps, so the words are the labels and the line is the
   measure. Without JS the whole block is hidden, because every fieldset is on
   screen at once and a "current step" would be a lie.
----------------------------------------------------------------------------- */

.progress {
  display: none;
}

.js .progress {
  display: block;
}

.inquiry-form .progress-line {
  border-bottom: 0;
  padding-bottom: 0.85rem;
  margin-bottom: 0;
  gap: 0.35rem 1.15rem;
}

.inquiry-form .progress-line__step {
  color: var(--muted);
}

.inquiry-form .progress-line__step.is-done {
  color: var(--muted);
}

.inquiry-form .progress-line__step[aria-current="step"] {
  color: var(--ink);
}

.progress-track {
  position: relative;
  display: block;
  height: 1px;
  background: var(--hairline);
  margin-bottom: clamp(2rem, 4vw, 2.75rem);
}

.progress-track__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--brass);
  transition: width 0.35s var(--ease);
}

.inquiry-form[data-active-step="your-day"] .progress-track__fill { width: 16.6667%; }
.inquiry-form[data-active-step="guests"] .progress-track__fill { width: 33.3333%; }
.inquiry-form[data-active-step="when"] .progress-track__fill { width: 50%; }
.inquiry-form[data-active-step="budget"] .progress-track__fill { width: 66.6667%; }
.inquiry-form[data-active-step="found-us"] .progress-track__fill { width: 83.3333%; }
.inquiry-form[data-active-step="about-you"] .progress-track__fill { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .progress-track__fill {
    transition: none;
  }
}

/* -----------------------------------------------------------------------------
   Steps and navigation
----------------------------------------------------------------------------- */

.step[hidden] {
  display: none;
}

.step:focus {
  outline: none;
}

.step:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 6px;
}

.inquiry-form .step {
  margin-bottom: 0;
}

/* No JS: all six render stacked, so they need air between them. */
.step + .step {
  margin-top: clamp(2.25rem, 5vw, 3rem);
}

.js .step + .step {
  margin-top: 0;
}

.form-nav {
  margin-top: clamp(1.75rem, 4vw, 2.25rem);
  padding-top: clamp(1.5rem, 3vw, 1.75rem);
  border-top: 1px solid var(--hairline);
}

.form-nav__note {
  margin-top: 1rem;
}

.form-error {
  margin-bottom: 1rem;
  max-width: 52ch;
}

.form-error:empty {
  display: none;
}

/* A text link that is really a button, because it moves you inside a form
   rather than going anywhere. */
.link-button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-size: 0.9375rem;
}

.link-button[hidden] {
  display: none;
}

/* -----------------------------------------------------------------------------
   The result

   Replaces the form panel in place. Same brass top edge, same linen ground, so
   it reads as the same panel answering rather than a new box arriving.
----------------------------------------------------------------------------- */

.result[hidden] {
  display: none;
}

.result__head:focus {
  outline: none;
}

.result__summary {
  margin-top: 1.25rem;
}

.result__timing {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hairline);
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--ink);
  max-width: 46ch;
}

.result__inbox {
  margin-top: clamp(1.75rem, 4vw, 2.25rem);
}

.result__actions {
  margin-top: clamp(1.75rem, 4vw, 2.25rem);
}

/* Body paragraphs cap at 64ch sitewide. The simulation label is the lid of the
   inbox frame rather than a sentence to read, so it runs the full width of the
   frame it sits on. */
.result .inbox-frame__label {
  max-width: none;
}

/* The email arrives as a complete document with its own inline styles. It goes
   in a sandboxed iframe so none of that can reach the page, and the frame is
   sized to its content once so it never scrolls inside the panel. */
.inbox-frame__body--email {
  padding: 0;
}

.email-frame {
  display: block;
  width: 100%;
  min-height: 320px;
  border: 0;
  background: var(--cream);
}

/* Once the real height has been read off the email document, the placeholder
   minimum gets out of the way. */
.email-frame.is-sized {
  min-height: 0;
}