/* Shared 30-minute consultation booking calendar (see static/booking.js).
 * Loaded by the form page after form.css and by the hosted report page,
 * both of which define the design tokens used here (--brand, --ink,
 * --ink-soft, --muted, --surface, --line, --error, --heading, --body). */

.booking {
  padding: 28px clamp(18px, 4vw, 34px) 30px;
  text-align: left;
}

.booking-kicker,
.booking .booking-kicker {
  margin: 0;
  font-family: var(--heading);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1.2px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--brand);
}

.booking h3 {
  margin: 7px 0 0;
  font-family: var(--heading);
  font-size: clamp(34px, 6vw, 46px);
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 0.98;
  text-transform: uppercase;
  color: var(--black);
}

.booking-intro,
.booking .booking-intro {
  margin: 12px 0 0;
  max-width: none;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-soft);
}

.booking-status,
.booking .booking-status {
  margin: 24px 0 0;
  min-height: 24px;
  font-size: 14px;
  color: var(--muted);
}

.booking-step {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

fieldset.booking-step {
  min-width: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
}

/* A fieldset draws its top border through the legend's middle, so the time
   step carries the separator on the legend instead (a floated legend fixes
   the line but leaves phantom horizontal overflow in Chromium). */
fieldset.booking-step { border-top: 0; padding-top: 0; }

fieldset.booking-step legend {
  width: 100%;
  border-top: 1px solid var(--line);
}

.booking-label,
.booking .booking-label,
.booking-step legend {
  margin: 0 0 12px;
  padding: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
}

.booking-step legend span {
  margin-left: 5px;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}

/* Match the breathing room above the date label after the time divider. */
fieldset.booking-step legend.booking-label { padding-top: 20px; }

.booking-time-status,
.booking .booking-time-status {
  margin: 0 0 12px;
  min-height: 0;
}

.booking-calendar {
  width: min(100%, 470px);
  margin-inline: auto;
}

.booking-calendar-header {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 8px;
  margin-bottom: 15px;
}

.booking-calendar-month,
.booking .booking-calendar-month {
  /* stays centered even when the single-month nav arrows are hidden */
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  color: var(--ink);
}

.booking-calendar-nav {
  width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-family: var(--body);
  font-size: 21px;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
}

.booking-calendar-nav:hover:not(:disabled) {
  background: color-mix(in srgb, var(--brand) 8%, var(--surface));
}

.booking-calendar-nav:disabled {
  color: color-mix(in srgb, var(--muted) 35%, var(--surface));
  cursor: default;
}

.booking-calendar-weekdays,
.booking-dates {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.booking-calendar-weekdays {
  margin-bottom: 5px;
}

.booking-calendar-weekdays span {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.4px;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  color: var(--muted);
}

.booking-calendar-blank,
.booking-calendar-day,
.booking-date {
  display: grid;
  place-items: center;
  justify-self: center;
  /* cells track the grid column so seven always fit; capped at the 44px
     touch-target size the wider layouts had */
  width: 100%;
  max-width: 44px;
  min-width: 0;
  min-height: 34px;
  aspect-ratio: 1;
  border-radius: 50%;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 500;
}

.booking-calendar-day {
  font-weight: 400;
  color: var(--muted);
  opacity: 0.32;
}

.booking-calendar-day.is-today {
  opacity: 0.62;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.booking-date {
  padding: 0;
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--brand) 7%, var(--surface));
  color: var(--ink);
  cursor: pointer;
}

.booking-date:hover {
  border-color: color-mix(in srgb, var(--brand) 62%, var(--surface));
  background: color-mix(in srgb, var(--brand) 12%, var(--surface));
}

.booking-date[aria-pressed="true"] {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}

.booking-date.is-today:not([aria-pressed="true"]) {
  box-shadow: inset 0 0 0 1px var(--brand);
}

.booking-time,
.booking-submit {
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: var(--body);
  cursor: pointer;
}

.booking-time[aria-pressed="true"] {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 8%, var(--surface));
  color: var(--ink);
}

.booking-times {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.booking-time {
  padding: 8px 5px;
  background: var(--surface);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
}

.booking-time:hover { border-color: #c9c9c2; }

.booking-calendar-nav:focus-visible,
.booking-date:focus-visible,
.booking-time:focus-visible,
.booking-submit:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

/* Standalone /book page: contact step revealed after a time is picked. */
.booking-contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.booking-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.booking-field-wide { grid-column: 1 / -1; }

.booking-field span {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
}

.booking-field input {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  font-family: var(--body);
  font-size: 16px;
  font-weight: 400;
  color: var(--ink);
}

.booking-field input:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

.booking-field.is-invalid input { border-color: var(--error); }

.booking-honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 420px) {
  .booking-contact-grid { grid-template-columns: minmax(0, 1fr); }
}

.booking-submit {
  width: 100%;
  margin-top: 22px;
  padding: 12px 20px;
  border-color: var(--brand);
  background: var(--brand);
  font-family: var(--heading);
  font-size: 23px;
  font-weight: 700;
  letter-spacing: 1.4px;
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
}

.booking-submit:disabled {
  border-color: var(--line);
  background: var(--line);
  color: var(--muted);
  cursor: not-allowed;
}

.booking-error,
.booking .booking-error {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--error);
}

.booking-empty,
.booking .booking-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 12px 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
}

.booking-success {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.booking-success-kicker,
.booking .booking-success-kicker {
  margin: 0;
  font-family: var(--heading);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 1.2px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--brand);
}

.booking-success-time,
.booking .booking-success-time {
  margin: 8px 0 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
}

.booking-success p:last-child,
.booking .booking-success p:last-child {
  margin: 8px 0 0;
  font-size: 14px;
}

@media (prefers-reduced-motion: no-preference) {
  .booking-date,
  .booking-time,
  .booking-submit {
    transition: border-color 120ms ease-out, background-color 120ms ease-out,
                color 120ms ease-out;
  }
}

@media (max-width: 560px) {
  .booking-times { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .booking-calendar { width: 100%; }
}