/* ===========================================================================
   /book/ — page + calendar composition. Scoped under .mfte .te-book.
   Load AFTER te-system.css (book.html links it that way).

   Runs on the TE system tokens (--te-*). The form-field block near the bottom
   is lifted from te-contact.css on purpose: the two pages want identical
   inputs, and /book/ should not have to pull in the whole contact stylesheet
   to get them. If the field look changes, change it in both places.
   =========================================================================== */

/* ── 00  page ground ────────────────────────────────────────────────────── */

/* This page sits on white, not the TE chassis grey. --te-chassis is declared
   in two places in te-system.css — on `html:has(.mfte)` (which html/body/main
   inherit) and again on `.mfte` itself — so both have to be overridden, at
   higher specificity, for the whole ground to go white. Plates keep their
   hairline border so the calendar and form still read as panels. */
html:has(.te-book) { --te-chassis: #ffffff; }
.mfte.te-book { --te-chassis: #ffffff; }

/* ── 01  masthead ───────────────────────────────────────────────────────── */

.mfte .te-book__masthead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: 40px;
  align-items: start;
}

.mfte .te-book__title { margin: 10px 0 0; }
.mfte .te-book__lede { margin: 18px 0 0; max-width: 54ch; }
.mfte .mf-book-hero-accent { color: var(--te-accent); }

.mfte .te-book__spec { align-self: start; }

.mfte .te-book__meta { margin: 0; }
.mfte .te-book__meta-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--te-rule);
}
.mfte .te-book__meta-row:last-child { border-bottom: 0; padding-bottom: 0; }
.mfte .te-book__meta dt {
  font-family: var(--te-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: var(--te-fg-mute);
}
.mfte .te-book__meta dd { font-size: 0.9375rem; color: var(--te-fg); text-align: right; }

@media (max-width: 760px) {
  .mfte .te-book__masthead { grid-template-columns: 1fr; gap: 26px; }
}

/* ── 02  widget shell ───────────────────────────────────────────────────── */

.mfte .te-book__widget { margin-top: 26px; }

.mfte .te-book__state { animation: te-book-fade 0.2s ease; }
@keyframes te-book-fade { from { opacity: 0; } to { opacity: 1; } }

.mfte .te-book__loading,
.mfte .te-book__empty {
  font-family: var(--te-mono);
  font-size: 0.8125rem;
  color: var(--te-fg-mute);
  padding: 20px 0;
}

.mfte .te-book__step-title { margin: 0 0 20px; }

.mfte .te-book__tz {
  margin: 2px 0 12px;
  font-size: 0.75rem;
  color: var(--te-fg-mute);
}

/* ── calendar: month grid (left) + times (right) ───────────────────────── */

.mfte .te-book__cal {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}

@media (max-width: 720px) {
  .mfte .te-book__cal { grid-template-columns: 1fr; gap: 24px; }
}

/* month header */
.mfte .te-book__cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.mfte .te-book__cal-label {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--te-heading);
}
.mfte .te-book__cal-arrow {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--te-fg-soft);
  background: var(--te-module);
  border: 1px solid var(--te-plate-edge);
  border-radius: var(--te-r-control);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.mfte .te-book__cal-arrow:hover { border-color: var(--te-fg-mute); }
.mfte .te-book__cal-arrow:disabled { opacity: 0.32; cursor: default; }

/* weekday row + day grid share the 7-column track */
.mfte .te-book__cal-dow,
.mfte .te-book__cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}
.mfte .te-book__cal-dow {
  margin-bottom: 6px;
}
.mfte .te-book__cal-dow span {
  text-align: center;
  font-family: var(--te-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--te-fg-mute);
}

/* a day cell */
.mfte .te-book__day {
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  padding: 0;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  color: var(--te-fg);
  background: var(--te-module);
  border: 1px solid var(--te-plate-edge);
  border-radius: var(--te-r-control);
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}
.mfte .te-book__day:hover {
  border-color: var(--te-accent);
  box-shadow: 0 0 0 3px rgba(255, 136, 51, 0.16);
}
.mfte .te-book__day--blank {
  background: transparent;
  border-color: transparent;
  pointer-events: none;
}
.mfte .te-book__day--off {
  color: var(--te-fg-mute);
  background: transparent;
  border-color: transparent;
  cursor: default;
  opacity: 0.55;
}
.mfte .te-book__day--off:hover { border-color: transparent; box-shadow: none; }
.mfte .te-book__day--today { box-shadow: inset 0 0 0 1px var(--te-accent); }
.mfte .te-book__day--sel,
.mfte .te-book__day--sel:hover {
  background: var(--te-ink);
  color: var(--te-ink-fg);
  border-color: var(--te-ink);
  box-shadow: none;
}

/* ── times column ─────────────────────────────────────────────────────── */

.mfte .te-book__times-label {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--te-heading);
}

.mfte .te-book__slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  margin-top: 4px;
  max-height: 340px;
  overflow-y: auto;
}

@media (max-width: 720px) {
  .mfte .te-book__slots { max-height: none; }
}

.mfte .te-book__slot {
  padding: 12px 10px;
  font-size: 0.9375rem;
  color: var(--te-fg);
  background: var(--te-plate);
  border: 1px solid var(--te-plate-edge);
  border-radius: var(--te-r-control);
  cursor: pointer;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.06s ease;
}
.mfte .te-book__slot:hover {
  border-color: var(--te-accent);
  box-shadow: 0 0 0 3px rgba(255, 136, 51, 0.16);
}
.mfte .te-book__slot:active { transform: translateY(1px); }

/* ── details step ──────────────────────────────────────────────────────── */

.mfte .te-book__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  font-family: var(--te-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--te-fg-mute);
  background: none;
  border: 0;
  cursor: pointer;
}
.mfte .te-book__back:hover { color: var(--te-accent); }

.mfte .te-book__chosen {
  display: inline-block;
  margin: 0 0 22px;
  padding: 10px 14px;
  font-size: 0.9375rem;
  color: var(--te-fg);
  background: var(--te-module);
  border: 1px solid var(--te-plate-edge);
  border-left: 3px solid var(--te-accent);
  border-radius: var(--te-r-control);
}

.mfte .te-book__form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 22px;
}

.mfte .te-book__opt { color: var(--te-fg-mute); font-weight: 400; text-transform: none; letter-spacing: 0; }

.mfte .te-book__submit { margin-top: 4px; }

.mfte .te-book__status {
  margin: 14px 0 0;
  font-size: 0.875rem;
  color: #c1121f;
}

.mfte .te-book__privacy,
.mfte .te-book__tz,
.mfte .te-book__fallback { font-family: var(--te-mono); }

.mfte .te-book__privacy {
  margin: 16px 0 0;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--te-fg-mute);
}

/* ── error + done ──────────────────────────────────────────────────────── */

.mfte .te-book__error-text {
  margin: 0 0 18px;
  font-size: 1rem;
  color: var(--te-fg);
}
.mfte .te-book__fallback { margin: 16px 0 0; font-size: 0.75rem; color: var(--te-fg-mute); }
.mfte .te-book__fallback a,
.mfte .te-book__error-text a { color: var(--te-accent-dim); }

.mfte .te-book__done-mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin: 0 0 16px;
  font-size: 1.25rem;
  color: #fff;
  background: #2f8a4e;
  border-radius: 50%;
}

.mfte .te-book__confirm { margin: 0 0 18px; }
.mfte .te-book__confirm-line {
  display: flex;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--te-rule);
  font-size: 0.9375rem;
}
.mfte .te-book__confirm-line:last-child { border-bottom: 0; }
.mfte .te-book__confirm-line span {
  min-width: 56px;
  font-family: var(--te-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: var(--te-fg-mute);
  padding-top: 3px;
}
.mfte .te-book__confirm-line a { color: var(--te-accent-dim); word-break: break-all; }

.mfte .te-book__done-note {
  margin: 0;
  max-width: 52ch;
  font-size: 0.9375rem;
  color: var(--te-fg-soft);
}

/* ── form fields (mirror of te-contact.css) ────────────────────────────── */

.mfte .te-book .te-field { display: flex; flex-direction: column; gap: 7px; }
.mfte .te-book .te-field--full { grid-column: 1 / -1; }

.mfte .te-book .te-field label {
  font-family: var(--te-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: var(--te-fg-mute);
}
.mfte .te-book .te-field label span[aria-hidden="true"] { color: var(--te-accent); }

.mfte .te-book .te-field input,
.mfte .te-book .te-field textarea {
  width: 100%;
  padding: 13px 14px;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--te-fg);
  background: var(--te-recess);
  border: 1px solid var(--te-plate-edge);
  border-radius: var(--te-r-control);
  box-shadow: inset 0 2px 4px rgba(20, 24, 29, 0.07);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none;
          appearance: none;
}

.mfte .te-book .te-field textarea { resize: vertical; min-height: 92px; }

.mfte .te-book .te-field input::placeholder,
.mfte .te-book .te-field textarea::placeholder { color: #5c636a; opacity: 1; }

.mfte .te-book .te-field input:focus,
.mfte .te-book .te-field textarea:focus {
  outline: none;
  border-color: var(--te-accent);
  box-shadow: inset 0 2px 4px rgba(20, 24, 29, 0.07),
              0 0 0 3px rgba(255, 136, 51, 0.24);
}

/* Turnstile widget spacing inside the form. */
.mfte .te-book .mf-turnstile { margin: 4px 0 18px; }