/* =============================================================================
   tour.css
   Page-scoped styles for /tour. Loaded after main.css, only from tour.html.
   Everything here is either a layout the shared sheet has no reason to carry,
   or a deliberate softening of the calendar so the cells read as typography
   rather than boxes, which is what the brief asks for on this page.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1  Progressive enhancement gate
   The scheduler is useless without fetch, so it stays out of the document flow
   until the head script has put .js on <html>. The <noscript> sentence carries
   the phone number and the email in its place.
----------------------------------------------------------------------------- */

.tour-panel {
  display: none;
}

.js .tour-panel {
  display: block;
}

.tour-fallback {
  max-width: 56ch;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hairline);
}

/* -----------------------------------------------------------------------------
   2  The two columns
   Calendar left, times and form right, a single hairline between them on
   desktop instead of two boxes.
----------------------------------------------------------------------------- */

.tour-grid {
  display: grid;
  gap: 2.5rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.tour-grid__cal {
  min-width: 0;
}

.tour-grid__book {
  min-width: 0;
  padding-top: 2rem;
  border-top: 1px solid var(--hairline);
}

@media (min-width: 900px) {
  .tour-grid {
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr);
    gap: 0 clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
  }

  .tour-grid__book {
    padding-top: 0;
    padding-left: clamp(2.5rem, 5vw, 4.5rem);
    border-top: 0;
    border-left: 1px solid var(--hairline);
  }
}

/* -----------------------------------------------------------------------------
   3  Calendar, softened
   main.css draws each day as a bordered linen tile. On this page the grid is
   meant to be hairlines and air, so the base cell loses its fill and its rule
   and keeps the border box only so the pine hover ring in main.css still has
   something to colour. The selected day, the brass dot and the disabled state
   all still come from main.css.
----------------------------------------------------------------------------- */

.cal__day {
  background: transparent;
  border-color: transparent;
}

.cal__day--open {
  font-weight: 600;
}

.cal__weekdays {
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--hairline);
}

.cal__grid {
  padding-top: 6px;
}

.cal__empty {
  margin-top: 1.25rem;
  max-width: 34ch;
  color: var(--muted);
  font-size: var(--t-small);
}

@media (max-width: 400px) {
  .cal__weekdays,
  .cal__grid {
    gap: 2px;
  }

  .cal__day {
    font-size: 0.875rem;
  }
}

/* -----------------------------------------------------------------------------
   4  Times and the notice line
----------------------------------------------------------------------------- */

.tour-dayline {
  max-width: 42ch;
  margin-bottom: 1rem;
}

.tour-dayline--empty {
  color: var(--muted);
}

/* The 409 recovery sentence. A plain line above the chips with a brass rule at
   its head, never a red box. */
.tour-notice {
  max-width: 46ch;
  margin-bottom: 1.25rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--brass);
  color: var(--ink);
}

#tour-slots:empty {
  display: none;
}

/* -----------------------------------------------------------------------------
   5  Form
----------------------------------------------------------------------------- */

.tour-form {
  margin-top: 2.25rem;
  padding-top: 2rem;
  border-top: 1px solid var(--hairline);
}

.tour-prefill {
  margin-bottom: 1.5rem;
}

.tour-submit {
  margin-top: 0.5rem;
}

.tour-error {
  margin-top: 1rem;
  max-width: 48ch;
}

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

/* -----------------------------------------------------------------------------
   6  Confirmation
   Replaces the whole panel in place. Cream ground, one brass rule, no box.
----------------------------------------------------------------------------- */

.tour-confirm {
  max-width: 62ch;
}

.tour-confirm h2 {
  margin-bottom: 1rem;
}

/* main.css flattens paragraph margins and lets .stack do the spacing. The
   confirmation is injected, so it carries its own rhythm. */
.tour-confirm > p + p {
  margin-top: 1.25rem;
}

.tour-confirm h2:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 4px;
}

.tour-confirm__when {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  line-height: 1.25;
  margin-bottom: 1.5rem;
}

.tour-confirm__where {
  margin-bottom: 1.5rem;
}

.tour-confirm__where p {
  margin: 0;
}

.tour-confirm dl {
  margin: 0;
}

.tour-confirm .btn-row {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--hairline);
}