/* ==========================================================================
   Woodside Massage & Acupuncture — the booking application's PUBLIC CSS.

   Loaded after `assets/css/site.css` on every page carrying a mount from
   `_tools/app-mounts.cjs` (`bookingMount()`, `packageMount()`) or
   `app/mount.php` (`sessions.php`'s credit-mode mount). Every colour, radius
   and shadow below is one of site.css's own `:root` tokens (APP-BRIEF.md:
   "read them; do not add tokens there, and do not rely on a token name you
   have not seen there") — nothing is a new hex value. `.btn`, `.btn--primary`,
   `.btn--ghost`, `.advice-note` (+ `--warm`/`--cool`/`--warn`), `.small`,
   `.muted`, `.table`/`.table-wrap` and `.pill`/`.pill--brass` are site.css's
   own and are reused as-is, not redefined here.
   ========================================================================== */

/* ============================================================== 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; } }

.booking-steps {
  display: flex; flex-wrap: wrap; gap: .6rem 1.6rem;
  list-style: none; margin: 0 0 1.6rem; padding: 0 0 1.2rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--sans);
}
.booking-step { display: flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .86rem; }
.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; }

/* ================================================================ 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 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; }

/* -------------------------------------------------------------- who (L4) - */
.bk-radio-group { display: flex; flex-direction: column; gap: .6rem; }
.bk-radio {
  display: flex; align-items: flex-start; gap: .6rem;
  font-family: var(--sans); font-size: .9rem; color: var(--body);
  padding: .7rem .8rem; border: 1px solid var(--line); border-radius: var(--r);
  cursor: pointer;
}
.bk-radio:has(input:checked) { border-color: var(--seal-dk); background: var(--seal-lt); }
.bk-radio input { margin-top: .2rem; flex: none; }
/* 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: each "who is this for?" radio
   and each add-on check box took the row's whole width and squeezed its own
   label into one word per line beside it (found in the marketing screenshot
   of the live booking form, 2026-09-25 — no overflow and no contrast failure,
   so no gate could see it). Higher specificity than site.css's rule. */
.bk-field input[type="radio"], .bk-field input[type="checkbox"] { width: auto; display: inline-block; flex: none; }

/* ------------------------------------------------------------- add-ons --- */
.addon-list { display: grid; grid-template-columns: 1fr; gap: .6rem; }
@media (min-width: 640px) { .addon-list { grid-template-columns: repeat(2, 1fr); } }
.addon-row {
  display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap;
  padding: .6rem .75rem; border: 1px solid var(--line); border-radius: var(--r);
  font-family: var(--sans); font-size: .88rem; cursor: pointer;
}
.addon-row:has(input:checked) { border-color: var(--brass-dk); background: var(--brass-lt); }
.addon-row-name { font-weight: 600; color: var(--char); }
.addon-row-meta { color: var(--muted); font-size: .82rem; }

/* --------------------------------------------------------- running total - */
.running-total {
  display: flex; flex-wrap: wrap; gap: .3rem .5rem; align-items: baseline;
  background: var(--bone); border: 1px solid var(--line); border-radius: var(--r);
  padding: .8rem 1rem; margin: 0 0 .5rem; font-family: var(--sans); font-size: .92rem;
}
.running-total span { color: var(--muted); }
.running-total b { color: var(--brass-dk); font-family: var(--serif); font-size: 1.05rem; }

/* --------------------------------------------------------------- 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: 3.6rem; padding: .5rem .4rem; border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--paper); font-family: var(--sans); cursor: pointer;
}
.day-chip-dow { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-lt); }
.day-chip-date { font-size: .88rem; font-weight: 700; color: var(--char); }
.day-chip:hover:not(:disabled) { border-color: var(--seal-dk); }
.day-chip--active { border-color: var(--seal-dk); background: var(--seal-lt); }
.day-chip--closed, .day-chip--full { opacity: .45; }
.day-chip:disabled { cursor: not-allowed; }

.slot-grid { margin: 0 0 1.2rem; }
.avail-empty { font-family: var(--sans); font-size: .9rem; color: var(--muted); margin: 0; }
.slots { display: flex; flex-wrap: wrap; gap: .5rem; }
.slot {
  font-family: var(--sans); font-size: .86rem; padding: .5rem .8rem;
  border: 1px solid var(--line-2); border-radius: 999px; background: var(--paper); color: var(--char);
  cursor: pointer;
}
.slot:hover { border-color: var(--seal-dk); color: var(--seal-dk); }
.slot--active { border-color: var(--seal-dk); background: var(--ink); color: #fff; }
.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; }

/* =========================================================== packages === */
.plans { border: 0; padding: 0; margin: 0 0 1.4rem; display: grid; grid-template-columns: 1fr; gap: .8rem; }
@media (min-width: 640px) { .plans { grid-template-columns: repeat(2, 1fr); } }
.plans legend { font-family: var(--sans); font-size: .82rem; color: var(--muted-lt); padding: 0 0 .5rem; grid-column: 1 / -1; }
.plan {
  display: flex; flex-direction: column; gap: .3rem;
  border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 1.1rem 1.2rem;
  cursor: pointer; position: relative;
}
.plan:has(.bk-check:checked) { border-color: var(--seal-dk); box-shadow: 0 0 0 2px var(--seal-lt) inset; }
.plan-flag { font-family: var(--sans); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.plan-price { font-family: var(--serif); font-size: 1.15rem; color: var(--brass-dk); }
.plan-blurb { font-family: var(--sans); font-size: .84rem; color: var(--muted); }
.bk-check { position: absolute; top: 1rem; right: 1rem; }
/* THE MARKETING CARD'S .plan-flag LEAKED IN HERE (audit-live, 2026-09-25).
   site.css draws .plan-flag as a seal-coloured tag hung over a pricing
   card's top edge; the package form reuses the class names, so each choice's
   name became a tag straddling its box with this file's muted text on the
   seal (3.95:1), and the radio in the corner sat on the price's last word.
   In the form the name is a plain line of text in the card, and the card
   keeps a gutter for the radio. */
[data-package-form] .plan { padding-right: 2.9rem; }
[data-package-form] .plan-flag { position: static; background: none; padding: 0; border-radius: 0; font-weight: 600; }
[data-package-form] .plan-price { margin: 0; }

/* ====================================================== room-bound note = */
.room-bound-note { font-family: var(--sans); font-size: .84rem; color: var(--muted); margin: .6rem 0 0; }

/* ============================================ the client page (sessions.php) =
   `manage.php` and `sessions.php` — the two signed, password-free pages a
   client reaches from an e-mail link — load this file, not admin.css. */
.ledger-balance-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1rem; margin: 0 0 1.6rem;
}
.info-card {
  background: var(--bone); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.1rem 1.2rem; text-align: center;
}
.info-card h3 { font-family: var(--sans); font-size: .8rem; font-weight: 600; color: var(--muted); margin: 0 0 .3rem; text-transform: uppercase; letter-spacing: .03em; }
.ledger-balance-n { font-family: var(--serif); font-size: 2.1rem; color: var(--brass-dk); margin: 0; line-height: 1; }

.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); }
.rate-table th { color: var(--muted-lt); font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }

.avail-row {
  display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1rem 1.2rem; margin: 0 0 .9rem;
  background: var(--paper);
}
.avail-card-body h3 { font-family: var(--serif); color: var(--ink); margin: 0 0 .3rem; font-size: 1.05rem; }
.avail-card-body p { margin: 0 0 .3rem; }
.avail-row form { flex: none; }