/* ═══════════════════════════════════════════════════════════
   Booking flow — extends styles.css (tokens, .btn, .serif).
   Same system: hairline rules, 2px radii, accent only on the
   primary action / selected slot / readout figures, 48px targets.
   ═══════════════════════════════════════════════════════════ */

/* ── Tokens this file needs that styles.css no longer defines ──
   When scrollcraft became the site, styles.css was replaced and its
   :root lost nine custom properties this stylesheet still uses. A
   missing custom property is invalid at computed-value time, so those
   declarations were silently dropped in production: every entrance
   animation stopped running, and .book-title / .confirm-figure fell
   back to body size — the page's headline and the confirmed time were
   rendering at 1rem. Restored here, at the control's original values,
   scoped to the booking flow so the marketing pages are untouched.
   The type scale is the same 1.25 ratio as the --step-* values that
   survived (.711 · .8 · 1 · 1.25 · 1.563 · 1.953 · 2.441 · 3.052). */
:root {
  --s1:       .25rem;
  --s10:      7rem;
  --step-0:   1rem;
  --step-4:   2.441rem;
  --step-5:   3.052rem;
  --t-micro:  120ms;
  --t-bar:    420ms;
  --t-draw:   520ms;
  --t-enter:  520ms;
  /* The two small steps, floored at 15px for this page. styles.css sets
     them in rem, and this page's rem is the browser's 16px, so they
     computed to 11.4px and 12.8px: the email hint, the date line on the
     confirmation, the "keep this page" note and the footer were all
     under the 15px floor the clinic's clientele needs (AGENTS.md). max()
     keeps them scaling up with a reader's larger browser font and only
     stops them going below the floor. Scoped to the booking flow;
     the marketing pages are a separate pass. */
  --step--2:  max(.711rem, 15px);
  --step--1:  max(.8rem, 15px);
}

.book-body { min-height: 100vh; display: flex; flex-direction: column; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.book-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4);
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--rule);
}
/* The real lockup (mark + "ACTIVE RECOVERY CENTER"), same artwork the home
   page header uses. This was the .wordmark markup from pages.css — but this
   page never loads pages.css, so the 128px mark rendered at full size with
   the name falling underneath it as a bare underlined link. Height is pinned
   to the 48px tap target of the phone link opposite, so the header row is
   one height and the logo sits in proportion to it. */
.book-head__brand { display: inline-flex; align-items: center; text-decoration: none; min-width: 0; }
.book-head__brand img { height: 48px; width: auto; display: block; }
.book-head__brand:hover { opacity: .8; }
.book-head__tel { font-variant-numeric: tabular-nums; min-height: 48px; display: inline-flex; align-items: center; flex-shrink: 0; }

.book-wrap {
  width: 100%; max-width: 46rem; margin-inline: auto;
  padding: var(--s8) var(--s5) var(--s10);
  flex: 1;
}

.book-step-label {
  margin: 0 0 var(--s3);
  font-size: var(--step--1); letter-spacing: .14em; color: var(--ink-3);
}
.book-title { font-size: var(--step-4); line-height: 1.1; margin-bottom: var(--s3); }
.book-lede { color: var(--ink-2); margin: 0 0 var(--s6); }
.book-lede a { color: var(--ink); }

.book-loading, .book-noscript { color: var(--ink-2); }

/* ── Load sequence: the instrument coming online ─────────
   Same vocabulary as the hero: label → title → lede → panel, each a
   520ms entrance. The title rises without fading (it is the page's
   message; an element at opacity 0 has not been painted). */
.book-step-label { animation: bookRiseFade var(--t-enter) var(--ease-entrance) 60ms both; }
.book-title      { animation: bookRise     var(--t-enter) var(--ease-entrance) 120ms both; }
.book-lede       { animation: bookRiseFade var(--t-enter) var(--ease-entrance) 220ms both; }
#book-app        { animation: bookRiseFade var(--t-enter) var(--ease-entrance) 310ms both; }
@keyframes bookRise     { from { transform: translateY(14px); } to { transform: none; } }
@keyframes bookRiseFade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Step progress — a section-number rule that fills as the booking
   advances. The one accent line on the page chrome. */
.book-progress {
  height: 2px; background: var(--rule); margin: 0 0 var(--s5);
  overflow: hidden;
}
.book-progress span {
  display: block; height: 100%; background: var(--accent);
  transform-origin: left center; transform: scaleX(0);
  transition: transform var(--t-bar) var(--ease-entrance);
}

/* ── Step transitions: a single restrained entrance ────── */
.book-step { animation: bookStep var(--t-enter) var(--ease-entrance) both; }
@keyframes bookStep { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
html.vt .book-step { animation: none; }  /* view transitions carry the swap instead */

/* Hairline rules draw themselves on arrival (the site's --line move). */
.book-step .slot-head { border-top: 0; position: relative; }
.book-step .slot-head::before {
  content: ''; position: absolute; inset: 0 auto auto 0; width: 100%; height: 1px;
  background: var(--rule); transform-origin: left center;
  animation: ruleDraw var(--t-draw) var(--ease-entrance) both;
}
.book-step .proto-why li { border-top: 0; position: relative; }
.book-step .proto-why li::before {
  content: ''; position: absolute; inset: 0 auto auto 0; width: 100%; height: 1px;
  background: var(--rule); transform-origin: left center;
  animation: ruleDraw var(--t-draw) var(--ease-entrance) both;
}
.book-step .proto-why li:nth-child(2)::before { animation-delay: 90ms; }
.book-step .proto-why li:nth-child(3)::before { animation-delay: 180ms; }
@keyframes ruleDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Skeleton slots while the schedule answers — quiet, not shimmery. */
.slot--ghost {
  border: 1px solid var(--rule); border-radius: 2px; min-height: 48px;
  background: var(--ground-2);
  animation: ghostPulse 1.4s var(--ease-state) infinite alternate;
}
.slot--ghost:nth-child(2n) { animation-delay: .2s; }
.slot--ghost:nth-child(3n) { animation-delay: .4s; }
@keyframes ghostPulse { from { opacity: .35; } to { opacity: .7; } }

/* Confirmation: the readout figure lifts as its rule draws under it. */
.confirm-figure { animation: bookRiseFade var(--t-enter) var(--ease-entrance) 120ms both; }
.confirm-under { border-top: 0; position: relative; }
.confirm-under::before {
  content: ''; position: absolute; inset: 0 auto auto 0; width: 100%; height: 1px;
  background: var(--rule); transform-origin: left center;
  animation: ruleDraw var(--t-draw) var(--ease-entrance) 220ms both;
}

@media (prefers-reduced-motion: reduce) {
  .book-step, .book-step-label, .book-title, .book-lede, #book-app,
  .confirm-figure { animation: none; }
  .book-step .slot-head::before, .book-step .proto-why li::before,
  .confirm-under::before { animation: none; transform: none; }
  .slot--ghost { animation: none; opacity: .5; }
  .book-progress span { transition: none; }
}

/* ── Therapy cards ─────────────────────────────────────── */
.svc-group-label {
  margin: var(--s6) 0 var(--s3);
  font-size: var(--step--2); letter-spacing: .16em; color: var(--ink-3);
  border-top: 1px solid var(--rule); padding-top: var(--s3);
}
.svc-group-label:first-of-type { margin-top: 0; border-top: 0; padding-top: 0; }

/* Same label styling as .svc-group-label, but an interactive
   disclosure control — full-width button so the whole row (not just
   the arrow) is clickable, min-height 48px for the 50+ tap target
   bar. The arrow is a CSS pseudo-element, same mechanism as the
   FAQ accordion's +/× marker on the main site (styles.css), so a
   collapse control looks and moves like the rest of ARC's system. */
.svc-group-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); min-height: 44px;
  margin: var(--s6) 0 var(--s3);
  padding-top: var(--s3); border-top: 1px solid var(--rule);
  background: none; border-left: 0; border-right: 0; border-bottom: 0;
  font: inherit; font-size: var(--step--2); letter-spacing: .16em; color: var(--ink-3);
  cursor: pointer; text-align: left;
  transition: color var(--t-micro) var(--ease-state);
}
.svc-group-toggle:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.svc-group-toggle:hover, .svc-group-toggle:focus-visible { color: var(--ink); }
.svc-group-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.svc-group-toggle::after {
  content: '›'; color: var(--accent); font-size: var(--step-1); line-height: 1; flex: none;
  transform: rotate(90deg); /* default = expanded = pointing down */
  transition: transform var(--t-small) var(--ease-state);
}
.svc-group-toggle.is-collapsed::after { transform: rotate(0deg); /* pointing right = collapsed */ }

.svc-list { display: grid; gap: var(--s3); margin: 0; padding: 0; list-style: none; }
/* .svc-list's own `display: grid` (an author-stylesheet class rule)
   overrides the browser's default `[hidden] { display: none }` at
   equal specificity, since author styles always beat user-agent
   ones — the collapse toggle's plist.hidden = true would otherwise
   set the DOM property correctly while the list stayed visibly
   displayed. This rule's higher specificity (class + attribute)
   wins regardless of source order. */
.svc-list[hidden] { display: none; }
.svc-card {
  display: grid; grid-template-columns: 1fr auto;
  grid-template-areas: "name mins" "blurb mins";
  gap: var(--s2) var(--s4);
  align-items: center; text-align: left; width: 100%;
  background: var(--ground-2); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 2px;
  padding: var(--s4) var(--s5); min-height: 48px;
  font: inherit; cursor: pointer;
  transition: border-color var(--t-small) var(--ease-state), background var(--t-small) var(--ease-state);
}
.svc-card:hover { border-color: var(--ink-3); background: #16222E; }
.svc-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.svc-card__name { grid-area: name; justify-self: start; font-weight: 700; font-size: var(--step-1); }
.svc-card__blurb { grid-area: blurb; justify-self: start; color: var(--ink-2); font-size: var(--step--1); }
.svc-card__mins {
  grid-area: mins; text-align: right;
  font-variant-numeric: tabular-nums; color: var(--ink-3); font-size: var(--step--1);
  letter-spacing: .08em;
}
.svc-card__mins strong { display: block; color: var(--ink); font-size: var(--step-2); letter-spacing: 0; }

/* Protocol cards carry a price row the single-therapy cards do not, so
   the grid gains a third row only for them. Named area, not a bare
   third row: the single cards keep a two-row template and are
   untouched. */
.svc-card--proto { grid-template-areas: "name mins" "blurb mins" "price price"; }
.svc-card__price {
  grid-area: price; justify-self: start;
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s2) var(--s3);
  margin-top: var(--s1);
}
.svc-card__price strong { font-size: var(--step-1); font-variant-numeric: tabular-nums; }
/* The saving is the reason to book the chain as one visit, so it reads
   as a benefit rather than fine print — but stays quieter than the
   price itself. */
.svc-card__save {
  color: var(--ok, #3FB27F); font-size: var(--step--1); font-weight: 600;
}

.svc-consult {
  border-top: 1px solid var(--rule); margin-top: var(--s5); padding-top: var(--s5);
  color: var(--ink-2);
}
.svc-consult a { color: var(--ink); }

/* ── Step headings breathe before what follows ─────────── */
.book-step h2 { margin: 0 0 var(--s4); }

/* ── Protocol rationale (time step) ────────────────────── */
.proto-blurb { margin-bottom: var(--s4); }
.proto-why {
  list-style: none; margin: 0 0 var(--s6); padding: 0;
  counter-reset: step;
}
.proto-why li {
  display: grid; gap: var(--s1);
  border-top: 1px solid var(--rule); padding: var(--s3) 0;
}
.proto-why__name {
  font-size: var(--step--2); letter-spacing: .14em; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.proto-why__name::before {
  counter-increment: step; content: counter(step) '  ·  ';
  color: var(--ink-3);
}
.proto-why__line { color: var(--ink-2); font-size: var(--step--1); }

/* ── Day strip + slot grid ─────────────────────────────── */
.day-strip {
  display: flex; gap: var(--s2); overflow-x: auto; padding-bottom: var(--s2);
  margin-bottom: var(--s5); scrollbar-width: thin;
}
.day-chip {
  flex: 0 0 auto; min-width: 76px; min-height: 64px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: none; border: 1px solid var(--rule); border-radius: 2px;
  color: var(--ink-2); font: inherit; cursor: pointer; padding: var(--s2) var(--s3);
}
.day-chip small { font-size: var(--step--2); letter-spacing: .12em; color: var(--ink-3); }
.day-chip strong { font-size: var(--step-1); font-variant-numeric: tabular-nums; color: inherit; }
.day-chip { position: relative; }
.day-chip:hover { border-color: var(--ink-3); color: var(--ink); }
.day-chip[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); background: var(--ground-2); }
.day-chip[aria-pressed="true"]::after {
  content: ''; position: absolute; left: -1px; right: -1px; bottom: -1px; height: 2px;
  background: var(--accent); transform-origin: left center;
  animation: ruleDraw var(--t-bar) var(--ease-entrance) both;
}
@media (prefers-reduced-motion: reduce) {
  .day-chip[aria-pressed="true"]::after { animation: none; }
}
.day-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.slot-head {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid var(--rule); padding-top: var(--s3); margin-bottom: var(--s4);
}
.slot-head__label { font-size: var(--step--1); letter-spacing: .14em; color: var(--ink-3); }
.slot-period {
  margin: var(--s5) 0 var(--s3);
  font-size: var(--step--2); letter-spacing: .16em; color: var(--ink-3);
}
.slot-period:first-of-type { margin-top: 0; }
.slot-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: var(--s2);
}
.slot {
  min-height: 48px; border: 1px solid var(--rule); border-radius: 2px;
  background: none; color: var(--ink); font: inherit; cursor: pointer;
  font-variant-numeric: tabular-nums; font-size: var(--step-0);
}
.slot:hover { border-color: var(--ink-3); }
.slot[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--ground); font-weight: 700; }
.slot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.slot-empty { color: var(--ink-2); }

/* ── Upsell ────────────────────────────────────────────── */
.addon-list { display: grid; gap: var(--s3); list-style: none; margin: 0 0 var(--s5); padding: 0; }
.addon {
  display: grid; grid-template-columns: auto 1fr;
  grid-template-areas: "check name" "check meta";
  gap: var(--s1) var(--s4); align-items: center;
  text-align: left; width: 100%;
  background: var(--ground-2); border: 1px solid var(--rule); border-radius: 2px;
  color: var(--ink); font: inherit; cursor: pointer;
  padding: var(--s4) var(--s5); min-height: 48px;
  transition: border-color var(--t-small) var(--ease-state);
}
.addon:hover { border-color: var(--ink-3); }
.addon[aria-pressed="true"] { border-color: var(--accent); }
.addon[aria-pressed="true"] .addon__check { background: var(--accent); border-color: var(--accent); color: var(--ground); }
.addon:disabled { opacity: .45; cursor: not-allowed; }
.addon:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.addon__name { grid-area: name; font-weight: 700; justify-self: start; }
.addon__meta { grid-area: meta; justify-self: start; color: var(--ink-2); font-size: var(--step--1); font-variant-numeric: tabular-nums; }
.addon__check {
  grid-area: check; width: 28px; height: 28px; border: 1px solid var(--ink-3); border-radius: 2px;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.addon-note { color: var(--ink-3); font-size: var(--step--1); margin: calc(-1 * var(--s3)) 0 var(--s5); }

/* ── Forms ─────────────────────────────────────────────── */
.book-form { display: grid; gap: var(--s4); }
.book-field { display: grid; gap: var(--s2); }
.book-field label { font-weight: 700; }
.book-field .hint { color: var(--ink-3); font-size: var(--step--1); font-weight: 400; }
.book-field input, .book-field textarea {
  background: var(--ground-2); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 2px;
  font: inherit; padding: var(--s3) var(--s4); min-height: 48px; width: 100%;
}
.book-field input:focus-visible, .book-field textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}

/* ── Already paid (plan / prepaid package) ── */
.paid, .paid-via { border: 1px solid var(--rule); border-radius: 2px; margin: 0; padding: var(--s4); display: grid; gap: var(--s2); min-width: 0; }
.paid legend, .paid-via legend { font-weight: 700; padding: 0 var(--s2); }
.paid-via { border-style: dashed; margin-top: var(--s2); }
.paid-via[hidden] { display: none; }
.paid__hint { margin: 0 0 var(--s2); color: var(--ink-2); }
/* The whole row is the target, 48px tall, with a box big enough to see
   without hunting for it — the audience is 50+. */
.paid-row { display: flex; align-items: center; gap: var(--s3); min-height: 48px; cursor: pointer; }
.paid-row input { width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--accent); }
.paid-row input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Summary readouts (the reading motif carries the visit) ── */
.visit-summary { list-style: none; margin: 0 0 var(--s5); padding: 0; }
.visit-summary li {
  display: flex; justify-content: space-between; gap: var(--s4);
  border-top: 1px solid var(--rule); padding: var(--s3) 0;
}
.visit-summary li:last-child { border-bottom: 1px solid var(--rule); }
.visit-summary .t { font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; }

.confirm-figure {
  font-size: var(--step-5); font-weight: 800; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums; color: var(--accent); line-height: 1;
  margin: var(--s2) 0 0;
}
.confirm-under {
  border-top: 1px solid var(--rule); margin-top: var(--s3); padding-top: var(--s3);
  font-size: var(--step--1); letter-spacing: .14em; color: var(--ink-3);
}

/* ── Actions / notices ─────────────────────────────────── */
.book-actions { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin-top: var(--s6); }
.btn--quiet {
  background: none; color: var(--ink); border: 1px solid var(--rule);
}
.btn--quiet:hover { background: rgba(237,242,247,.06); border-color: var(--ink-3); }
.book-back {
  background: none; border: 0; color: var(--ink-3); font: inherit; cursor: pointer;
  min-height: 48px; padding: 0 var(--s2); text-decoration: underline; text-underline-offset: 3px;
}
.book-back:hover { color: var(--ink); }

.book-error {
  border: 1px solid var(--rule); border-left: 3px solid var(--accent);
  background: var(--ground-2); border-radius: 2px;
  padding: var(--s4) var(--s5); margin: var(--s4) 0; color: var(--ink);
}
.book-alert {
  border: 1px solid var(--rule); border-left: 3px solid var(--accent);
  background: var(--ground-2); border-radius: 2px;
  padding: var(--s4) var(--s5); margin: 0 0 var(--s5); color: var(--ink);
  display: block;
}
.book-alert strong { display: block; font-weight: 700; }
.book-alert span { color: var(--ink-2); }
.demo-note { color: var(--ink-3); font-size: var(--step--1); margin-top: var(--s5); }

.book-foot {
  border-top: 1px solid var(--rule); padding: var(--s5); text-align: center;
  color: var(--ink-3); font-size: var(--step--1);
}
.book-foot a { color: var(--ink-2); }
.book-foot__note { margin-top: var(--s2); }
.book-foot p { margin: 0; }

@media (max-width: 480px) {
  .book-wrap { padding-top: var(--s6); }
  .slot-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
  .book-head { padding-inline: var(--s4); }
}

/* First-visit pitch and around-visit add-on. Header wordmark rules
   live above and stay at 34px — do not shrink them here.

   Double-class so this beats `.svc-card { min-height: 48px }` and the
   two-row catalog grid (`name/blurb` × `mins`). Flex, not grid: a
   named-area leftover will not invent a second row for "Free".
   Padding is tight on purpose — the 48px target is what stretched
   three identical boxes down the first-timer screen. */
.trial-screen .svc-list { gap: var(--s1); }
.svc-card.svc-card--trial {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2) var(--s3);
  padding: 0.35rem 0.75rem;
  min-height: 0;
  grid-template-areas: none;
  grid-template-columns: none;
}
.svc-card--trial .svc-card__lead {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: var(--s3);
  min-width: 0;
}
.svc-card--trial .svc-card__name {
  font-size: var(--step-0);
  grid-area: auto;
}
.svc-card--trial .svc-card__mins-inline {
  flex: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}
.trial-free { color: var(--accent); font-weight: 700; white-space: nowrap; }
.anchor-visit {
  font-size: var(--step-0); color: var(--ink); margin: 0 0 var(--s5);
}
.slot--rec {
  border-color: var(--accent);
  font-weight: 700;
}

/* Whether the confirmation email went. Its own paragraph, spaced from
   the address and payment line under it, so "check your inbox" is not
   read as part of the directions. */
.confirm-email { margin: 0 0 var(--s4); }