/* =========================================================
   pages-flows.css

   The page-specific rules for the four flow pages: /book,
   /booking-confirmed, /faq and /contact. Linked from those pages only,
   after main.css, and it adds nothing to a page that does not need it.

   Everything here is either a class book.js generates at runtime, which
   main.css cannot know about ahead of time, or the native details and
   summary elements the FAQ is built from. No new color: every value is
   a token from main.css.

   The rule that governs the look: nothing is a card. A day, a time, a
   question and a preview are all ruled rows on the ground the section
   already carries. The selected state is a 3px ink rail down the left
   edge, the way a bookkeeper marks the line they are working on. Never
   a filled pill.
   ========================================================= */

/* =========================================================
   1. The booking flow, /book
   ========================================================= */
.book{ margin-top: var(--s6); max-width: 40rem; }

.book-noscript,
.book-offline{
  margin: 0 0 var(--s4);
  padding-left: var(--s4);
  border-left: 3px solid var(--copper);
  color: var(--text);
  max-width: var(--measure);
}
.book-offline[hidden]{ display: none; }

.book-status{
  margin: 0 0 var(--s5);
  font-size: var(--fs-small);
  color: var(--text-fine);
  line-height: 1.55;
  min-height: 1.55em;
  max-width: var(--measure);
}

.book-step{ margin-bottom: var(--s7); }
.book-step[hidden]{ display: none; }

/* data-state stays at "loading" until book.js has real days to show, and
   it never leaves it on a page with no JavaScript at all. Either way an
   empty day list with its two dead stepper buttons is furniture with
   nothing behind it, so it does not appear until it means something. The
   noscript block and the status line carry the phone number instead. */
.book[data-state="loading"] #book-when{ display: none; }
.book-step-title{
  font-size: var(--fs-h3);
  margin: 0 0 var(--s4);
}

/* The week stepper: two quiet buttons and the range between them. */
.book-weeks{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding-bottom: var(--s3);
}
.book-week-label{
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-variation-settings: "opsz" 18, "SOFT" 40;
  color: var(--text);
  text-align: center;
}
.book-week-prev,
.book-week-next{
  min-height: 44px;
  padding: 10px 16px;
  font-size: var(--fs-small);
}
.book-week-prev[disabled],
.book-week-next[disabled]{
  opacity: .38;
  cursor: default;
}

/* Days and times: ruled rows, not tiles. */
.book-days,
.book-time-list{
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.book-day-item,
.book-time-item{ margin: 0; }

.book-day,
.book-time{
  display: flex;
  width: 100%;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 52px;
  padding: var(--s4) var(--s4) var(--s4) var(--s4);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-left: 3px solid transparent;
  border-radius: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, padding-left .2s var(--ease-out);
}
.book-day:hover,
.book-time:hover{
  border-bottom-color: var(--rule-brass);
  background: var(--ghost-wash);
}
.book-day.is-selected,
.book-time.is-selected{
  border-left-color: var(--ink);
  padding-left: var(--s5);
  background: var(--ghost-wash);
}

.book-day-date{
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-variation-settings: "opsz" 18, "SOFT" 40;
  color: var(--heading);
}
.book-day-count{
  font-size: var(--fs-fine);
  color: var(--text-fine);
  white-space: nowrap;
}
.book-day-empty{
  margin: 0;
  padding: var(--s5) 0;
  border-bottom: 1px solid var(--rule);
  color: var(--text-fine);
  font-size: var(--fs-small);
}

.book-time time{
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-variation-settings: "opsz" 18, "SOFT" 40;
  font-variant-numeric: tabular-nums;
}

/* The form. The design system owns the inputs; these rules are the
   spacing and the labels around them. */
.book-form{ margin-top: var(--s6); }
.book-form[hidden]{ display: none; }

.book-chosen{
  margin: 0 0 var(--s5);
  padding-left: var(--s4);
  border-left: 3px solid var(--brass);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-variation-settings: "opsz" 22, "SOFT" 50;
  color: var(--heading);
}

.book-mode,
.book-fields{
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0 0 var(--s6);
  padding: var(--s5) 0 0;
}
.book-mode legend,
.book-fields legend{
  padding: 0;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text-fine);
  margin-bottom: var(--s3);
}
.book-mode{ display: block; }
.book-mode-option{
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 44px;
  cursor: pointer;
}
.book-mode-option input{
  width: 18px;
  height: 18px;
  accent-color: var(--ink);
  margin: 0;
  flex: none;
}

.book-field{
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text-fine);
  margin-bottom: 6px;
}
.book-input{ margin-bottom: var(--s4); }
.book-help{
  display: block;
  font-size: var(--fs-fine);
  color: var(--text-fine);
  margin: calc(var(--s4) * -1 + 2px) 0 var(--s4);
}

/* The honeypot is off-screen, never display: none, because some
   autofill agents skip a hidden field and a real visitor would then
   look like a bot. */
.book-hp{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.book-error{
  margin: 0 0 var(--s4);
  padding-left: var(--s4);
  border-left: 3px solid var(--copper);
  color: var(--copper);
}
.book-error[hidden]{ display: none; }

.book-next-slot{
  display: inline-block;
  margin-top: var(--s3);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--brass);
  border-radius: 0;
  padding: 2px 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
}
.book-next-slot:hover{ color: var(--link); border-bottom-color: var(--link); }

.book-consent{
  margin: var(--s4) 0 0;
  font-size: var(--fs-fine);
  color: var(--text-fine);
  max-width: var(--measure);
}

/* The booked state. */
.book-done{ margin-top: var(--s5); }
.book-done[hidden]{ display: none; }
.book-done-title{ font-size: var(--fs-h3); margin-bottom: var(--s4); }
.book-done-when{
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-variation-settings: "opsz" 24, "SOFT" 50;
  color: var(--heading);
  margin-bottom: var(--s2);
}
.book-done-how{ color: var(--text-soft); }
.book-done-ref{
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid var(--rule);
  font-size: var(--fs-small);
  color: var(--text-fine);
}
.book-reference{
  font-family: var(--font-display);
  font-size: 1.375rem;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  color: var(--heading);
  margin-left: var(--s2);
}

.book-preview{ margin-top: var(--s6); }
.book-preview[hidden]{ display: none; }
.book-preview-title{ font-size: 1.0625rem; margin-bottom: var(--s2); }
.book-preview-note{
  font-size: var(--fs-fine);
  color: var(--text-fine);
  font-style: italic;
  max-width: var(--measure);
}
.book-preview-text,
.guide-preview{
  margin: var(--s4) 0 0;
  padding: 0 0 0 var(--s4);
  border-left: 2px solid var(--rule-brass);
  font-family: var(--font-body);
  font-size: var(--fs-fine);
  line-height: 1.7;
  color: var(--text-soft);
  white-space: pre-wrap;
  overflow-wrap: break-word;
  max-width: var(--measure);
}

/* =========================================================
   2. The confirmation lookup, /booking-confirmed
   ========================================================= */
.confirm{ max-width: 34rem; }

.confirm-noscript{
  margin: 0 0 var(--s5);
  padding-left: var(--s4);
  border-left: 3px solid var(--copper);
}

.confirm-form{ display: grid; gap: 6px; }
.confirm-field{
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text-fine);
}
.confirm-input{ margin-bottom: var(--s4); }
.confirm-submit{ justify-self: start; }

.confirm-status{
  margin: var(--s4) 0 0;
  font-size: var(--fs-small);
  color: var(--text-fine);
  min-height: 1.5em;
}
.confirm-error{
  margin: var(--s3) 0 0;
  padding-left: var(--s4);
  border-left: 3px solid var(--copper);
  color: var(--copper);
}
.confirm-error[hidden]{ display: none; }

.confirm-panel{
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--rule-brass);
}
.confirm-panel[hidden]{ display: none; }
.confirm-panel-title{ font-size: var(--fs-h3); margin-bottom: var(--s3); }
.confirm-when{
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-variation-settings: "opsz" 24, "SOFT" 50;
  color: var(--heading);
}
.confirm-facts{ margin: var(--s5) 0 0; }
.confirm-fact-label{
  font-size: var(--fs-fine);
  font-weight: 600;
  color: var(--text-fine);
  padding-top: var(--s3);
  border-top: 1px solid var(--rule);
}
.confirm-fact-value{
  margin: 0 0 var(--s3);
  padding-bottom: var(--s3);
  color: var(--text);
  overflow-wrap: break-word;
}

/* =========================================================
   3. The questions, /faq
   Native details and summary, so the page needs no JavaScript at all
   and still opens, closes, prints and finds-in-page correctly.
   ========================================================= */
.faq-list > li{ border-bottom: 1px solid var(--rule); }

.faq-q{
  display: flex;
  align-items: baseline;
  gap: var(--s4);
  padding: var(--s5) 0;
  cursor: pointer;
  list-style: none;
  border-left: 3px solid transparent;
  transition: border-color .2s ease, padding-left .2s var(--ease-out);
}
.faq-q::-webkit-details-marker{ display: none; }
.faq-q:focus-visible{
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
.faq-q-text{
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  font-variation-settings: "opsz" 34, "SOFT" 60;
  line-height: 1.25;
  color: var(--heading);
  flex: 1 1 auto;
}
/* The marker is a hairline that turns from a plus into a minus. It is
   decoration: the summary's own open state is what a screen reader
   announces. */
.faq-q::after{
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: .4em;
  background:
    linear-gradient(var(--brass), var(--brass)) center / 14px 1px no-repeat,
    linear-gradient(var(--brass), var(--brass)) center / 1px 14px no-repeat;
  transition: transform .25s var(--ease-out), background-size .25s var(--ease-out);
}
.faq-item[open] .faq-q::after{
  background:
    linear-gradient(var(--brass), var(--brass)) center / 14px 1px no-repeat,
    linear-gradient(var(--brass), var(--brass)) center / 1px 0 no-repeat;
}
.faq-item[open] .faq-q{ border-left-color: var(--ink); padding-left: var(--s4); }

.faq-a{
  padding: 0 0 var(--s6);
  max-width: var(--measure);
  color: var(--text-soft);
}
.faq-item[open] .faq-a{ padding-left: var(--s4); }
.faq-a p{ margin-bottom: var(--s4); }
.faq-a p:last-child{ margin-bottom: 0; }

@media (max-width: 600px){
  .faq-q-text{ font-size: 1.125rem; }
}

/* =========================================================
   4. The guide captures, /resources
   Three small forms inside a ruled list. The email and the button sit
   on one line where there is room and stack where there is not.
   ========================================================= */
.guide-form{
  margin-top: var(--s4);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s3);
  align-items: end;
  max-width: 30rem;
}
.guide-form .form-note,
.guide-form .guide-preview{ grid-column: 1 / -1; }
.guide-form .form-note{ min-height: 0; }

/* An empty status line reserves height it does not need yet, which
   leaves a visible hole under a submit button. It takes its space back
   the moment it has something to say. */
.guide-form .form-note:empty,
#contact-form .form-note:empty{ display: none; }
.guide-preview[hidden]{ display: none; }

@media (max-width: 600px){
  .guide-form{ grid-template-columns: 1fr; align-items: stretch; }
}