/* ============================================================
   Two-step booking flow, plus the scheduler panel (test page).

   The form is our own markup, so its fields are styled by the
   shared .td-form / .td-field block in test-designs.css, the
   same one behind every other form on the site. Only what that
   block does not already cover lives here: the step chrome, the
   per-field error text, and the scheduler.

   The scheduler is still a cross-origin iframe and always will
   be, so nothing inside it can be styled. All we control is the
   room it is given, which is why the last panel takes the full
   panel width and why the gutters tighten on a phone.
   ============================================================ */

/* Backs the hidden property the script toggles. Panels are never switched with
   style.display, which is what keeps typed values intact across Back. */
.tk-step[hidden] { display: none !important; }

/* .td-form sets display:flex, which would otherwise beat the [hidden] default
   and leave an empty flex box behind once the scheduler takes over. */
.tk-booking__form[hidden] { display: none !important; }

.tk-step {
  /* The panel does its own field spacing. .td-form is a flex column with a
     gap, but its direct children are the panels, not the fields, so that gap
     spaces panel-to-panel and every field inside one would sit flush against
     the next. The [hidden] rule above still wins, on !important. */
  display: flex;
  flex-direction: column;
  gap: 16px;

  /* Each panel is scrolled to as it opens and the site header is sticky at
     72px, so without this the heading just focused lands underneath it. */
  scroll-margin-top: 88px;
}
/* The counter and heading are one unit, so the panel gap applies around the
   pair rather than between them. */
.tk-step__head { display: block; }
.tk-step .td-formhead { margin: 0; }
.tk-step .td-form__legal { margin: 0; }

/* ---------- step chrome ---------- */
.tk-step__count {
  margin: 0 0 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-arch-purple);
}

/* Focus is moved here as each panel opens, so the ring has to read as
   deliberate rather than as a stray outline on a heading. */
.tk-step__heading:focus-visible {
  outline: 3px solid rgba(81, 86, 219, 0.25);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}
.tk-step__heading:focus:not(:focus-visible) { outline: none; }

.tk-step__intro {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fg-secondary);
}

/* ---------- step navigation ---------- */
.tk-step__nav {
  display: flex;
  gap: 12px;
  align-items: stretch;
}
/* .td-form__submit is width:100% on its own, which two buttons in a row
   cannot both be. */
.tk-step__nav .td-form__submit { width: auto; flex: 1 1 auto; }

.tk-step__back {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 0 0 auto;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: var(--fw-semibold);
  color: var(--color-data-black);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  min-height: 48px;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}
.tk-step__back:hover { border-color: var(--border-strong); background: var(--bg-surface-2); }
.tk-step__back:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.tk-step__back-icon { display: inline-flex; }
.tk-step__back-icon svg { width: 14px; height: 14px; }

/* ---------- validation ---------- */
/* Both error paragraphs stay in the DOM permanently so their ids can be wired
   into aria-describedby up front; only the text ever changes. Collapsing them
   while empty is what stops a permanent gap under every field and an empty
   red box above the buttons. */
.td-field__error {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-error);
}
.td-field__error:empty { display: none; }
.tk-booking__error:empty { display: none; }
.tk-booking__error:focus { outline: none; }
.tk-booking__error:focus-visible {
  outline: 3px solid rgba(81, 86, 219, 0.25);
  outline-offset: 2px;
}

.td-field input[aria-invalid="true"],
.td-field textarea[aria-invalid="true"] { border-color: var(--color-error); }
.td-field input[aria-invalid="true"]:focus,
.td-field textarea[aria-invalid="true"]:focus {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px rgba(160, 32, 32, 0.18);
}

/* Shown only after a submission fails, so a lost connection does not also cost
   the meeting. */
.tk-step__rescue {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg-secondary);
}
.tk-step__rescue a { color: var(--color-arch-purple); }

/* ---------- the scheduler ---------- */
.tk-booking__calendar .meetings-iframe-container {
  min-height: 680px;
  width: 100%;
}
.tk-booking__calendar iframe { width: 100%; border: 0; }

.tk-step__fallback-link {
  display: inline-flex;
  align-items: center;
  margin-top: 12px;
  font-weight: var(--fw-semibold);
  color: var(--color-arch-purple);
}

/* ---------- the panel gives the scheduler its room ---------- */
/* A 30-minute picker in a 500px column is cramped and the iframe clips, so
   once the scheduler is showing the copy column is dropped and the card runs
   the full inner width. */
.tk-booking--scheduling .tk-booking__copy { display: none; }

/* The width is capped on the track, not on the card. Centring the card with
   margin: 0 auto instead would stop it stretching, because auto margins
   disable a grid item's default stretch, and it collapsed to its content
   width of about 494px, which is the clipping this rule exists to prevent. */
.td-ctaA__inner.tk-booking--scheduling {
  grid-template-columns: minmax(0, 960px);
  justify-content: center;
}

/* The demo modal is 520px, which suits a form and starves a calendar. It only
   widens once the scheduler is showing, so the form itself keeps the narrower
   measure it reads better at. */
.tk-demo__dialog.tk-booking--scheduling { max-width: 900px; }

@media (max-width: 900px) {
  /* A lower floor than the desktop one. HubSpot's script measures the
     scheduler and sets the iframe's own height, and this is a min-height, so
     the container still grows to whatever the stacked mobile layout needs.
     Reserving a full viewport here instead just left dead space under the
     calendar once the real height came back. */
  .tk-booking__calendar .meetings-iframe-container { min-height: 615px; }

  /* The panel's comfortable reading gutters are too generous for a calendar.
     At 375px they leave the scheduler 269px, and HubSpot stamps a 312px
     min-width on the iframe, so it hangs out over the card's right edge. The
     gutters are pulled in while the scheduler is showing, which is the only
     time this column holds something that cannot reflow. The form panels and
     every other page using .td-ctaA are untouched. */
  .td-ctaA__inner.tk-booking--scheduling { padding-left: 12px; padding-right: 12px; }
  .tk-booking--scheduling .tk-booking__card { padding: 16px 12px; }

  /* Belt and braces for phones narrower than about 340px, where even the
     tightened gutters leave less than HubSpot's 312px. An author !important
     outranks their inline style. The meetings page is responsive well below
     312px, so holding the iframe to the container costs nothing and is far
     better than letting it spill outside the card. */
  .tk-booking__calendar iframe { min-width: 0 !important; }
}

@media (max-width: 480px) {
  /* Stacked rather than side by side, in DOM order, so the focus order still
     matches what is on screen. The primary action sits at the bottom, nearest
     the thumb. */
  .tk-step__nav { flex-direction: column; }
  .tk-step__nav .td-form__submit,
  .tk-step__back { width: 100%; flex: 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .tk-step, .tk-step * { animation: none !important; transition: none !important; }
}

/* ============================================================
   Custom calendar (staging prototype).

   Replaces HubSpot's scheduler iframe with our own picker, fed
   by inc/booking-proxy.php. Everything here is the shared design
   system: the same field border, radius, focus ring and purple
   as the form above it, which is the whole point of owning it.
   ============================================================ */
.tk-cal { display: flex; flex-direction: column; gap: 18px; }

.tk-cal__loading {
  margin: 0;
  padding: 28px 0;
  font-size: 14.5px;
  color: var(--fg-secondary);
  text-align: center;
}
.tk-cal__loading a { color: var(--color-arch-purple); font-weight: var(--fw-semibold); }

/* ---------- the day strip ---------- */
/* Scrolls sideways rather than wrapping: a fortnight of days in a grid
   pushes the times below the fold on a laptop. */
.tk-cal__days {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.tk-cal__day {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 62px;
  padding: 10px 8px;
  font-family: var(--font-sans);
  background: var(--color-draft-white);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}
.tk-cal__day:hover { border-color: var(--border-strong); }
.tk-cal__day:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.tk-cal__dow { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-tertiary); }
.tk-cal__dom { font-size: 18px; font-weight: var(--fw-semibold); color: var(--color-data-black); line-height: 1.2; }
.tk-cal__mon { font-size: 11px; color: var(--fg-tertiary); }

.tk-cal__day[aria-pressed="true"] {
  background: var(--color-arch-purple);
  border-color: var(--color-arch-purple);
}
.tk-cal__day[aria-pressed="true"] .tk-cal__dom,
.tk-cal__day[aria-pressed="true"] .tk-cal__dow,
.tk-cal__day[aria-pressed="true"] .tk-cal__mon { color: var(--color-draft-white); }

/* ---------- the times ---------- */
.tk-cal__times { display: flex; flex-direction: column; gap: 12px; }
.tk-cal__tz { margin: 0; font-size: 12.5px; color: var(--fg-tertiary); }

.tk-cal__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 8px;
}
.tk-cal__slot {
  -webkit-appearance: none;
  appearance: none;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: var(--fw-semibold);
  color: var(--color-arch-purple);
  background: var(--color-draft-white);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 11px 8px;
  min-height: 44px;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
.tk-cal__slot:hover { border-color: var(--color-arch-purple); background: var(--purple-50); }
.tk-cal__slot:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.tk-cal__slot[aria-pressed="true"] {
  background: var(--color-arch-purple);
  border-color: var(--color-arch-purple);
  color: var(--color-draft-white);
}

.tk-cal__confirm { margin-top: 2px; }
.tk-cal__confirm-btn { width: 100%; }

.tk-booking__calerror:empty { display: none; }
.tk-booking__calerror:focus { outline: none; }

/* ---------- panel 4, the confirmation ---------- */
/* Possible only because we own the booking request. With HubSpot's iframe
   there is no signal that a booking happened. */
.tk-done { text-align: center; padding: 8px 4px 4px; }
.tk-done__icon {
  width: 52px; height: 52px; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--state-success-bg);
  color: var(--color-success, var(--state-success-fg));
}
.tk-done__icon svg { width: 26px; height: 26px; }
.tk-done__when {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: var(--fw-semibold);
  color: var(--color-data-black);
}
.tk-done__text { margin: 0 0 8px; font-size: 15px; line-height: 1.55; color: var(--fg-secondary); }
.tk-done__text--soft { font-size: 13px; color: var(--fg-tertiary); }

@media (max-width: 480px) {
  .tk-cal__grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
}

/* ---------- who you are meeting ---------- */
/* Pulled from HubSpot with the slots, so it follows whoever the meeting link
   points at rather than being a hardcoded face. */
.tk-cal__who {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 2px;
}
.tk-cal__avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  object-fit: cover;
  background: var(--purple-50);
  flex: 0 0 auto;
}
.tk-cal__whotext { display: flex; flex-direction: column; line-height: 1.3; }
.tk-cal__whoname { font-size: 15px; font-weight: var(--fw-semibold); color: var(--color-data-black); }
.tk-cal__whorole { font-size: 12.5px; color: var(--fg-tertiary); }

/* The hand-off to HubSpot's scheduler shares the error element but is not an
   error, and red for "here is your calendar" reads as a failure. */
.tk-booking__calerror.is-note {
  background: var(--purple-50);
  color: var(--color-data-black);
}

/* ---------- hand-off, while the booking cannot complete here ---------- */
/* One panel, not a second calendar. Two schedulers stacked made people choose
   a time twice, which is worse than either on its own. */
.tk-handoff { text-align: center; padding: 20px 4px 4px; }
.tk-handoff__when {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: var(--fw-semibold);
  color: var(--color-data-black);
}
.tk-handoff__text {
  margin: 0 auto 18px;
  max-width: 46ch;
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg-secondary);
}
.tk-handoff__link { width: auto; text-decoration: none; display: inline-flex; }

/* ---------- the card's CTA title ---------- */
/* Restores the bold line each page's form card used to carry. It sits above
   the panels so it does not move as the steps change, which also means the
   per-step headings have to step down a level rather than compete with it. */
.tk-booking__title {
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--color-data-black);
}
.tk-step .td-formhead.tk-step__heading {
  font-size: 15px;
  color: var(--fg-secondary);
  font-weight: var(--fw-semibold);
}

@media (max-width: 480px) {
  .tk-booking__title { font-size: 20px; margin-bottom: 14px; }
}