/* JiHee · trial slot picker (booking.js). The picker lives inside the trial form
   and the form's data-step decides which half shows:
   pick = days + times · details = the usual fields minus "when are you free"
   · done = confirmation only · ask (or no attribute) = the plain form. */
.book { grid-column: 1 / -1; display: grid; gap: .9rem; min-width: 0; }
.book:empty { display: none; }
.form[data-step="pick"] .field, .form[data-step="pick"] .form__row,
.form[data-step="done"] .field, .form[data-step="done"] .form__row .cta,
.form[data-step="details"] .field--when { display: none; }

.book__h { margin: 0; font: 500 .82rem/1.2 var(--sc-font-text); color: var(--sc-ink-soft); }

.book__days { display: flex; gap: .5rem; overflow-x: auto; padding: .15rem .1rem .5rem; margin-inline: -.1rem; scrollbar-width: thin; overscroll-behavior-x: contain; }
.book__day {
  flex: 0 0 auto; display: grid; justify-items: center; gap: .1rem; min-width: 4rem; padding: .6rem .5rem .55rem;
  background: transparent; border: 1px solid var(--hair); border-radius: 14px; color: var(--sc-ink); cursor: pointer;
  font-family: var(--sc-font-text); transition: background-color 140ms, border-color 140ms, color 140ms;
}
.book__dow, .book__mon { font-size: .72rem; font-weight: 500; color: var(--sc-ink-soft); }
.book__dom { font: 700 1.35rem/1.1 var(--sc-font-display); font-variant-numeric: tabular-nums; }
.book__day[aria-pressed="true"] { background: var(--sc-ink); border-color: var(--sc-ink); color: var(--paper); }
.book__day[aria-pressed="true"] .book__dow, .book__day[aria-pressed="true"] .book__mon { color: inherit; opacity: .7; }

.book__times { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.2rem, 1fr)); gap: .5rem; }
.book__time {
  padding: .7rem .5rem; background: transparent; border: 1px solid var(--hair); border-radius: 999px; cursor: pointer;
  font: 500 .95rem/1 var(--sc-font-text); font-variant-numeric: tabular-nums; color: var(--sc-ink);
  transition: background-color 140ms, border-color 140ms;
}
.book__time[aria-pressed="true"] { background: var(--sc-accent); border-color: var(--sc-accent); color: var(--sc-accent-ink); font-weight: 600; }
@media (hover: hover) {
  .book__day:not([aria-pressed="true"]):hover, .book__time:not([aria-pressed="true"]):hover { border-color: var(--sc-ink); }
}
.book__day:focus-visible, .book__time:focus-visible, .book__alt:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 2px; }

.book__tz, .book__note { margin: 0; font-size: .82rem; color: var(--sc-ink-soft); }
.book__note { color: var(--sc-ink); }
.book__row { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem 1.25rem; margin-top: .35rem; }
.book__row .cta:disabled { opacity: .4; pointer-events: none; box-shadow: none; }
.book__alt {
  background: none; border: 0; padding: 0; cursor: pointer; font: 500 .88rem/1.3 var(--sc-font-text); color: var(--sc-ink-soft);
  text-decoration: underline; text-decoration-color: var(--hair); text-underline-offset: .25em; text-align: left;
}
.book__alt:hover { color: var(--sc-ink); text-decoration-color: var(--sc-accent); }
.book__chosen { margin: 0; font: 600 clamp(1.05rem, 1.5vw, 1.3rem)/1.3 var(--sc-font-display); color: var(--sc-ink); }
.book__chosen .book__alt { margin-left: .5rem; font-weight: 500; }
.book__done { margin: 0; font: 800 clamp(2rem, 4vw, 3rem)/1 var(--sc-font-display); letter-spacing: -0.03em; }