/* Project Kite: the booking calendar in the "Let's talk" section, built by assets/js/book.js.
   Laid out like the reference's embed: a card (240), the month (1fr) and the day's times (220), about 960 x 500.
   Under 900px it stacks: card, month, times; picking a time swaps the whole widget for the form.
   Colours, type and motion come from tokens.css only. The accent, wasabi, marks what the visitor chooses and does:
   the chosen day and the Confirm button (as every Book a call button on the page), focus rings and today's dot. Open
   days are --tile and controls' edges --edge, 3:1 on the panel.
   With data-cal, the card sits beside Cal.com's embed instead (the Cal.com section at the end). */

.book {
  box-sizing: border-box;
  width: 100%;
  max-width: 960px;
  margin-inline: auto;
  overflow: hidden;
  background: var(--surface); /* one tone step up from the page: the fill is the edge */
  border-radius: var(--radius);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-small);
  line-height: var(--lh-small);
  text-align: left;
}
.book *,
.book *::before,
.book *::after { box-sizing: border-box; }
.book [hidden] { display: none !important; }

/* Without JavaScript: the fallback line. */
.book__fallback { margin: 0; padding: 24px; font-size: var(--t-body); line-height: 24px; }
.book__fallback:not(:last-child) { padding-bottom: 0; }
.book__fallback a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.book__sr {
  position: absolute !important;
  width: 1px; /* taste-skill-ignore: visually hidden text for screen readers, not a rule */
  height: 1px; /* taste-skill-ignore: visually hidden text for screen readers, not a rule */
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.book__muted { color: var(--muted); font-weight: 400; }
.book__nowrap { white-space: nowrap; }
.book__icon {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Resets stay at one class of weight (:where), so every component rule below can override them. */
.book :where(h3),
.book :where(h4),
.book :where(p),
.book :where(ul) { margin: 0; }
.book :where(ul) { padding: 0; list-style: none; }

/* ---------- the three columns ---------- */

.book--ready {
  display: grid;
  grid-template-columns: 25% minmax(0, 1fr) 23%;
  grid-template-areas: "card cal times";
}
.book__card { grid-area: card; }
.book__cal { grid-area: cal; }
.book__times,
.book__form { grid-area: times; }

/* The month sets the height; the card and the times fill it and scroll inside, like the reference. */
.book__card,
.book__times,
.book__form { min-width: 0; contain: size; }

/* ---------- controls: hover and press ---------- */

.book :where(button) { margin: 0; font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
.book__day,
.book__slot,
.book__nav,
.book__fmt,
.book__back,
.book__submit {
  position: relative;
  isolation: isolate;
  cursor: pointer;
  transition: transform var(--d-press) var(--ease-out);
}
.book__day::before,
.book__slot::before,
.book__nav::before,
.book__fmt::before,
.book__back::before,
.book__submit::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--d-hover) var(--ease-out);
}
@media (hover: hover) {
  .book__day:hover::before,
  .book__slot:hover::before,
  .book__nav:not(:disabled):hover::before,
  .book__fmt:hover::before,
  .book__back:hover::before { opacity: 0.08; }
  .book__submit:hover::before { opacity: 0.12; }
  .book__zone:hover .book__chev { transform: translateY(1px); }
}
.book__day:active,
.book__nav:not(:disabled):active { transform: scale(0.96); }
.book__slot:active,
.book__fmt:active,
.book__back:active,
.book__submit:active { transform: scale(0.98); }

.book :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.book [tabindex="-1"]:focus { outline: none; }

/* ---------- card ---------- */

.book__card { display: flex; flex-direction: column; }

/* One still from the Rock and Rhythm campaign: the open-air show, full. 4:5 at the card's width (240 x 300) where the
   panel has the room, giving way to 140px tall before the words do; off where the card sits on top of the month
   (under 900px here, under a 1012px panel with Cal.com below), so the days come first on a phone. */
.book__strip {
  position: relative;
  flex: 0 1 300px;
  min-height: 140px;
  overflow: hidden;
  background: var(--bg);
}
.book__still {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 45%;
}

.book__info {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  min-height: 0;
  padding: 18px 24px 20px;
}
.book__title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: var(--track-h);
}
.book__desc {
  flex: 0 1 auto;
  min-height: 0;
  margin-top: 8px;
  overflow-y: auto;
  color: var(--ink);
  font-size: var(--t-body);
  line-height: 24px;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.book__desc p { max-width: 60ch; }
.book__desc--scroll { mask-image: linear-gradient(to bottom, var(--ink) calc(100% - 28px), transparent); } /* taste-skill-ignore: a fade mask on scrolling text, not a fill */

.book__meta { display: flex; flex-direction: column; gap: 4px; margin-top: auto; padding-top: 16px; }
.book__row { display: flex; align-items: center; gap: 10px; min-height: 32px; }
.book__zone { position: relative; display: inline-flex; align-items: center; min-width: 0; }
.book__select {
  -webkit-appearance: none;
  appearance: none;
  field-sizing: content;
  min-width: 0;
  max-width: 100%;
  min-height: 32px;
  margin: 0;
  padding: 0 22px 0 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-overflow: ellipsis;
  cursor: pointer;
}
.book__select option { background: var(--surface); color: var(--ink); }
.book__chev {
  position: absolute;
  right: 2px;
  top: calc(50% - 8px);
  pointer-events: none;
  transition: transform var(--d-hover) var(--ease-out);
}

/* ---------- calendar ---------- */

.book__cal {
  min-width: 0;
  padding: 20px 28px 24px;
  border-inline: 1px solid var(--line);
}
.book__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 36px;
}
.book__month,
.book__dayhead {
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 24px;
  white-space: nowrap;
}
.book__month strong,
.book__dayhead strong { font-weight: 700; }
.book__dayhead:focus { outline: none; }
.book__navs { display: flex; gap: 4px; }
.book__nav {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
}
.book__nav:disabled { color: var(--muted); opacity: 0.4; cursor: default; }

.book__grid { margin-top: 16px; }
.book__weeks { display: grid; row-gap: 8px; margin-top: 8px; }
.book__week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 56px));
  column-gap: 8px;
  justify-content: space-between;
}
.book__wd {
  color: var(--muted);
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
}
.book__cell {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  font-variant-numeric: tabular-nums;
}
.book__cell--plain { color: var(--muted); }
.book__day {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--tile);
  color: var(--ink);
  font-weight: 700;
}
.book__day[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.book__dot {
  position: absolute;
  left: calc(50% - 2px);
  bottom: 18%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
}
.book__day[aria-pressed="true"] .book__dot { background: var(--accent-ink); }

/* ---------- times ---------- */

.book__times { display: flex; flex-direction: column; }
.book__times > .book__head { margin: 20px 20px 12px; }
.book__fmts {
  display: inline-flex;
  flex: none;
  padding: 2px;
  border: 1px solid var(--edge); /* taste-skill-ignore: the edge of a two-way switch, a form control */
  border-radius: 8px;
}
.book__fmt {
  min-width: 36px;
  height: 26px;
  padding: 0 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-weight: 500;
}
.book__fmt[aria-pressed="true"] { background: var(--tile); color: var(--ink); }

.book__slots {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  padding: 4px 20px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.book__slot {
  width: 100%;
  height: 36px;
  padding: 0 8px;
  border: 1px solid var(--edge); /* taste-skill-ignore: a time button, a form control */
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.book__none { color: var(--muted); }

/* ---------- form ---------- */

.book__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 20px 16px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.book__form:not([hidden]) { animation: book-in var(--d-menu) var(--ease-out); }
@keyframes book-in { from { opacity: 0; transform: translateY(6px); } }

.book__back {
  display: inline-flex;
  flex: none;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  margin-left: -8px;
  padding: 0 10px 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-weight: 500;
}
.book__summary { font-size: var(--t-body); font-weight: 600; line-height: 22px; }
.book__summary:focus { outline: none; }
.book__field { display: flex; flex-direction: column; gap: 4px; }
.book__label { color: var(--muted); }
.book__optional { opacity: 0.75; }
.book__input {
  width: 100%;
  min-height: 36px;
  margin: 0;
  padding: 6px 10px;
  border: 1px solid var(--edge); /* taste-skill-ignore: a text field's edge */
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 22px;
}
.book__input--area { min-height: 58px; resize: vertical; }
.book__input[aria-invalid="true"] { border-color: var(--ink); }
.book__error { display: flex; gap: 6px; color: var(--ink); }
.book__error .book__icon { margin-top: 2px; }
.book__submit {
  flex: none;
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}
.book__hint { margin-top: -4px; color: var(--muted); }
.book__wa {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  min-height: 32px;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.book__status:empty { display: none; }

/* ---------- under 900px: card, month, times ---------- */

@media (width < 900px) {
  .book--ready {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "card" "cal" "times";
  }
  .book__strip { display: none; }
  .book__card,
  .book__times,
  .book__form { contain: none; }
  .book__info { padding: 16px 24px 20px; }
  .book__desc { overflow: visible; }
  .book__meta { gap: 0; padding-top: 10px; }
  .book__row { min-height: 44px; }
  .book__select { min-height: 44px; }

  .book__cal { border-inline: 0; border-block: 1px solid var(--line); }
  .book__week { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  /* Stacked, the empty sixth row would only push the times down. */
  .book__week[aria-hidden="true"] { display: none; }
  .book__nav { width: 44px; height: 44px; }

  .book__times > .book__head { margin: 20px 24px 12px; }
  .book__fmts { padding: 0; }
  .book__fmt { min-width: 48px; height: 44px; border-radius: 7px; }
  .book__slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    padding: 4px 24px 24px;
    overflow: visible;
  }
  .book__slot { height: 44px; }

  /* The form takes the whole widget. */
  .book[data-view="form"] .book__card,
  .book[data-view="form"] .book__cal { display: none; }
  .book__form { gap: 14px; padding: 16px 24px 24px; overflow: visible; }
  .book__form > * { max-width: 520px; }
  .book__back { min-height: 44px; }
  .book__field { gap: 6px; }
  .book__input { min-height: 44px; padding: 10px 12px; }
  .book__input--area { min-height: 92px; }
  .book__submit { min-height: 48px; }
  .book__wa { min-height: 44px; }
}

/* Tablets: the chosen time on the left, the fields on the right, so the form fills the panel. */
@media (600px <= width < 900px) {
  .book__form {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-content: start;
    column-gap: 32px;
  }
  .book__form > * { grid-column: 2; max-width: none; }
  .book__form > .book__back { grid-column: 1 / -1; grid-row: 1; justify-self: start; }
  .book__form > .book__summary { grid-column: 1; grid-row: 2; align-self: start; }
  .book__form > .book__wa { justify-self: start; }
}

/* Phones: tighter edges and gaps, so seven days still give 44px squares at 390. */
@media (width < 480px) {
  .book__info { padding: 14px 16px 16px; }
  .book__cal { padding: 16px 12px 16px; }
  .book__cal > .book__head { padding-left: 4px; }
  .book__week { column-gap: 2px; }
  .book__weeks { row-gap: 2px; }
  .book__times > .book__head { margin: 16px 16px 12px; }
  .book__slots { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); padding: 4px 16px 16px; }
  .book__form { padding: 12px 16px 20px; }
  .book :focus-visible { outline-offset: 1px; }
}

/* Touch: every control is at least 44px tall (the 12h/24h switch: 38px buttons + 2px padding + 1px edge, twice). */
@media (pointer: coarse) {
  .book__fmt { height: 38px; min-width: 44px; }
  .book__nav { width: 44px; height: 44px; }
  .book__slot { height: 44px; }
  .book__select, .book__back, .book__input, .book__submit { min-height: 44px; }
}

/* ---------- Cal.com (data-cal): Kite's card beside Cal.com's month and times ---------- */
/* One panel: the card and the embed share .book's surface and corners (--radius), split by one --line hairline, the
   colour Cal.com's own dividers get too. The embed has no border or ground of its own (book.js, calTheme), so its
   booker reads as part of the panel. Cal.com lays its month and times side by side only in a frame 769px or wider, so
   the card sits beside the embed when the panel is at least 240 + 772 = 1012px wide; narrower, the card goes on top. */

.book--cal {
  max-width: 1024px;
  container: book / inline-size;
}
.book__shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "card" "embed";
}
.book--cal .book__card { grid-area: card; contain: none; }

.book__embed {
  --embed-h: 570px; /* Cal.com's month and times, with the "Cal.com" line it sets under them on a free plan */
  position: relative;
  grid-area: embed;
  min-width: 0;
  min-height: var(--embed-h); /* the room is held while it loads, so nothing below jumps */
  border-top: 1px solid var(--line);
  container: embed / inline-size;
}
.book--cal[data-cal-state="ready"] .book__embed { min-height: 0; }
@container book (width < 1012px) {
  .book--cal .book__strip { display: none; } /* the card on top: the days come first */
}
@container book (width < 769px) {
  /* Cal.com's phone layout: the month alone until a day is picked, always six rows of square days, so 6/7 of its
     width plus 88px of header and padding (measured at 350 and 700 wide), plus the 1px line above it */
  .book__embed { --embed-h: calc(89px + 100cqw * 6 / 7); }
}
@container book (width >= 1012px) {
  .book__shell { grid-template-columns: 240px minmax(0, 1fr); grid-template-areas: "card embed"; }
  .book--cal .book__card { contain: size; } /* the embed sets the height; the card's words scroll inside it */
  .book__embed { border-top: 0; border-left: 1px solid var(--line); }
}

/* The frame stays see-through (and inert, book.js) until Cal.com has drawn its month and times, then fades in over
   the outline. Not visibility: hidden, as browsers stop drawing a hidden frame, and Cal.com would open its first day
   only once shown. */
.book__frame {
  opacity: 0;
  transition: opacity var(--d-hover) var(--ease-exit);
}
.book--cal[data-cal-state="ready"] .book__frame {
  opacity: 1;
  transition: opacity var(--d-menu) var(--ease-out);
}
.book__wait {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transition: opacity var(--d-hover) var(--ease-exit);
}
.book--cal[data-cal-state="ready"] .book__wait { opacity: 0; pointer-events: none; }

/* The outline: Cal.com's booker at rest, in flat shapes with no shimmer. A 480px month beside a 240px column of
   times, as the booker draws them, or the month alone under 769px. Kite's days, Sunday to Thursday, are filled. */
.book__ghost { display: flex; justify-content: center; }
.book__ghost-cal { flex: 0 1 480px; min-width: 0; padding: 18px 20px 12px; }
.book__ghost-head { color: var(--muted); line-height: 24px; }
.book__ghost-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  margin-top: 58px;
}
.book__ghost-grid i { aspect-ratio: 1; border-radius: 8px; background: var(--surface-2); opacity: 0.55; }
.book__ghost-grid i:nth-child(7n + 6),
.book__ghost-grid i:nth-child(7n),
.book__ghost-grid i:nth-child(n + 36) { background: none; }
.book__ghost-times {
  display: flex;
  flex: 0 0 240px;
  flex-direction: column;
  gap: 8px;
  padding: 52px 20px 0;
  border-left: 1px solid var(--line);
}
.book__ghost-times i { height: 36px; border: 1px solid var(--line); border-radius: 10px; }
@container embed (width < 769px) {
  .book__ghost-cal { flex-basis: 100%; }
  .book__ghost-grid { margin-top: 68px; } /* the phone layout rules off its weekday row: 10px lower */
  .book__ghost-times { display: none; }
}

:root.is-still .book--cal :is(.book__frame, .book__wait) { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .book *,
  .book *::before,
  .book *::after { transition: none !important; animation: none !important; }
  .book :active { transform: none !important; }
}