/* ==========================================================================
   Woodside Psychotherapy — the booking application's PUBLIC CSS.

   Loaded after `assets/css/site.css` on every page carrying the mount from
   `_tools/app-mounts.cjs` (`bookingMount()`) and on `manage.php`, the client's
   own signed page. Every colour, radius and shadow below is one of site.css's
   own `:root` tokens — nothing is a new hex value. `.btn`, `.btn--primary`,
   `.btn--ghost`, `.advice-note` (+ `--warm`/`--cool`/`--warn`), `.small`,
   `.muted`, `.table`/`.table-wrap` and `.pill` are site.css's own and are
   reused as-is, not redefined here.

   SCOPE RULE (house rule, §32.4): an app form's rules are scoped under its own
   `[data-booking-mount]` or given their own class names, never a marketing
   component's (`.plan`, `.plan-flag`) — site.css draws those differently.
   ========================================================================== */

/* ============================================================== booking === */
.booking {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: 1.6rem;
  margin: 0 0 1.6rem;
}
@media (min-width: 640px) { .booking { padding: 2rem 2.2rem; } }

/* site.css (inherited) draws these steps as a four-column tiled bar; this
   form has three plain steps, so every property that bar sets is reset here
   (seen only in the marketing screenshot, 2026-10-01: three white tiles
   floating on a grey band). */
.booking-steps {
  display: flex; flex-wrap: wrap; gap: .6rem 1.6rem;
  list-style: none; margin: 0 0 1.6rem; padding: 0 0 1.2rem;
  background: none; border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0; overflow: visible;
  font-family: var(--sans);
}
.booking-step { display: flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .86rem; background: none; padding: 0; }
.booking-step-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--bone-2); color: var(--char); font-weight: 700; font-size: .78rem;
}
.booking-step-t { font-weight: 600; }

.booking-panel { display: block; }
.bk-lead { font-family: var(--sans); font-size: .95rem; color: var(--body); margin: 0 0 1.2rem; max-width: 46rem; }
.booking h3 { font-family: var(--serif); color: var(--ink); }

/* ================================================================ grid === */
.bk-grid {
  display: grid; grid-template-columns: 1fr; gap: 1rem;
  margin: 0 0 1.2rem;
}
@media (min-width: 640px) { .bk-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .bk-grid { grid-template-columns: repeat(3, 1fr); } }
.bk-field { display: flex; flex-direction: column; gap: .35rem; }
.bk-field--wide { grid-column: 1 / -1; }
.bk-field label { font-family: var(--sans); font-size: .84rem; font-weight: 600; color: var(--char); }
.bk-field input[type="text"], .bk-field input[type="email"], .bk-field input[type="tel"],
.bk-field input[type="date"], .bk-field input[type="time"], .bk-field select, .bk-field textarea {
  font: inherit; font-size: .95rem; padding: .6rem .7rem;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--paper); color: var(--body);
}
.bk-field textarea { min-height: 6.5rem; resize: vertical; }
.bk-field input:focus, .bk-field select:focus, .bk-field textarea:focus {
  outline: 2px solid var(--seal-dk); outline-offset: 1px;
}
.bk-field--day { max-width: 16rem; }
.bk-hint { font-family: var(--sans); font-size: .8rem; color: var(--muted); margin: 0; font-weight: 400; }
/* site.css gives EVERY input in a .bk-field the field's full width — right for
   a text box, wrong for a radio or a check box (house rule, §32.4 item 7). */
.bk-field input[type="radio"], .bk-field input[type="checkbox"] { width: auto; display: inline-block; flex: none; }

/* ------------------------------------------------ the two required boxes --- */
.bk-check-row {
  display: flex; align-items: flex-start; gap: .65rem;
  font-family: var(--sans); font-size: .9rem; color: var(--body);
  padding: .75rem .9rem; border: 1px solid var(--line-2); border-radius: var(--r);
  margin: 0 0 1rem; cursor: pointer; background: var(--paper);
}
.bk-check-row:has(input:checked) { border-color: var(--seal-dk); background: var(--seal-lt); }
.bk-check-row input { margin-top: .22rem; flex: none; width: auto; }

/* ---------------------------------------------------- the choice (radios) --- */
.bk-choice { border: 0; margin: 0 0 1.2rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
.bk-choice legend { font-family: var(--sans); font-size: .84rem; font-weight: 600; color: var(--char); padding: 0; margin: 0 0 .5rem; float: left; width: 100%; }
.bk-choice[hidden], .bk-check-row[hidden], .bk-lead[hidden] { display: none; }
.bk-radio { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--sans); font-size: .92rem; color: var(--body); cursor: pointer; }
.bk-radio input { width: auto; flex: none; }
.bk-choice.bk-field--wide { grid-column: 1 / -1; }

/* the crisis sentence under the button and in the confirmation: always legible, never a footnote */
.bk-crisis { font-family: var(--sans); color: var(--ink); margin: 0; max-width: 46rem; }
.bk-notes { margin: 1rem 0 0; }
.bk-notes p { margin: 0 0 .6rem; font-family: var(--sans); font-size: .9rem; }

/* --------------------------------------------------------------- diary --- */
.day-strip {
  display: flex; gap: .5rem; overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: .2rem .1rem .8rem; margin: 0 0 .6rem;
}
.day-chip {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: .15rem;
  min-width: 4.4rem; padding: .5rem .4rem; border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--paper); font-family: var(--sans); cursor: pointer; color: var(--char);
}
.day-chip-dow { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-lt); }
.day-chip-md { font-size: .88rem; font-weight: 700; color: var(--char); }
.day-chip-n { font-size: .72rem; color: var(--muted); }
.day-chip:hover:not(:disabled) { border-color: var(--seal-dk); }
.day-chip.is-on { border-color: var(--seal-dk); background: var(--seal-lt); }
.day-chip--none { opacity: .55; }
.day-chip:disabled { cursor: not-allowed; }

.slot-grid { margin: 0 0 1.2rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.slot-grid .avail-empty { flex: 1 1 100%; }
.avail-empty { font-family: var(--sans); font-size: .9rem; color: var(--muted); margin: 0; }
.slot {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: .1rem;
  font-family: var(--sans); font-size: .86rem; padding: .5rem .8rem;
  border: 1px solid var(--line-2); border-radius: var(--r); background: var(--paper); color: var(--char);
  cursor: pointer;
}
.slot-t { font-weight: 700; }
.slot-w { font-size: .74rem; color: var(--muted); }
.slot:hover { border-color: var(--seal-dk); color: var(--seal-dk); }
.slot.is-on { border-color: var(--ink); background: var(--ink); color: #fff; }
.slot.is-on .slot-w { color: var(--seal); }
.bk-alternatives { margin: .8rem 0; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

/* ------------------------------------------------------------ honeypot --- */
.bk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --------------------------------------------------------------- alert --- */
.bk-alert { font-family: var(--sans); font-size: .88rem; border-radius: var(--r); padding: .7rem .9rem; margin: 0 0 1rem; }
.bk-err { background: var(--signal-lt); color: var(--signal); border: 1px solid var(--signal); }

/* -------------------------------------------------------------- actions - */
.bk-actions { display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; }
.bk-note { margin: 0; }

/* ---------------------------------------------------------------- done --- */
.bk-done { padding: .4rem 0; }
.bk-done h3 { font-family: var(--serif); color: var(--ink); margin: 0 0 .4rem; }
.bk-ref { font-family: var(--sans); font-size: .82rem; letter-spacing: .04em; color: var(--muted-lt); text-transform: uppercase; margin: 0 0 .8rem; }
.bk-done p { margin: 0 0 .6rem; }
.bk-done .btn { margin: .3rem .6rem .3rem 0; }

/* ============================ the client's own page (manage.php) ===========
   The one signed, password-free page a client reaches from an e-mail link —
   it loads this file, not admin.css. */
.rate-table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: .88rem; }
.rate-table caption { text-align: left; caption-side: top; padding: 0 0 .5rem; }
.rate-table th, .rate-table td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.rate-table th { color: var(--muted-lt); font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; width: 9rem; }

/* the Good Faith Estimate page (manage.php?doc=estimate): a plain printable document */
.estimate { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.4rem 1.6rem; margin: 0 0 1.6rem; font-family: var(--sans); color: var(--body); }
.estimate h2 { font-family: var(--serif); color: var(--ink); margin: 0 0 .6rem; }
.estimate p { margin: 0 0 .7rem; }
@media print { .estimate { border: 0; padding: 0; } }