/* Harris Taylor - booking-panel.css

   The Booking System panel, in two places: a picture of it on the services
   page, played by js/pages/services.js, and the live demo on /workflows/,
   driven by js/booking-demo.js. One look for both, so the preview and the
   thing you can try are plainly the same tool.

   Framed like the other demos: surface, hairline border, 24px corners, a
   thin rule under the head. Everything that moves does it with opacity or
   transform. Every part of the booking is laid out from the start and keeps
   its place, so nothing around it shifts: a picked day or time is a layer
   fading in over it, the name and email fill fixed boxes, and the
   confirmation is a card fading in over the whole panel.

   The panel sizes itself from its own width, not the screen's, since it
   sits in a half column on one page and a full or half one on the other:
   the week of seven days, then five, then one day with arrows. */

.sv-cal {
  container: cal / inline-size;
  background: var(--surface-2);
  border: 1px solid var(--hairline-strong);
  border-radius: 24px;
  overflow: hidden;
}

.sv-cal__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 32px;
  border-bottom: 1px solid var(--hairline);
  font-size: var(--t-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-meta);
}

/* Each run starts by fading the body out while it resets. */
.sv-cal__body {
  position: relative;
  padding: 32px;
  transition: opacity .3s var(--ease);
}
.sv-cal__body.is-fading { opacity: 0; }

.sv-cal__label {
  margin: 0 0 12px;
  font-size: var(--t-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-meta);
}
.sv-cal__label ~ .sv-cal__label { margin-top: 28px; }

/* ---- days ---- */
.sv-cal__week {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
}

.sv-cal__day {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 16px;
  border: 1px solid var(--hairline);
  border-radius: 16px;
}
.sv-cal__day[data-free="0"] { opacity: .4; }

.sv-cal__dow {
  font-size: 12px;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-meta);
}

.sv-cal__date {
  font-size: 28px;
  font-weight: var(--wt-light);
  line-height: 1.1;
  color: var(--paper-0);
  font-variant-numeric: tabular-nums;
}

.sv-cal__free {
  font-size: 13px;
  color: var(--fg-quiet);
}

/* The picked day: a ring over the cell, as the booking demo rings it. */
.sv-cal__on {
  position: absolute;
  inset: -1px;
  border: 1.5px solid #E8E8EA;
  border-radius: inherit;
  background: rgba(232, 232, 234, .06);
  opacity: 0;
  transform: scale(.97);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  pointer-events: none;
}
.is-on > .sv-cal__on { opacity: 1; transform: none; }

/* Phones: one day at a time, stepped through with the arrows. */
.sv-cal__switch { display: none; }

.sv-cal__one-text {
  display: grid;
  gap: 4px;
  transition: opacity .15s var(--ease);
}
.sv-cal__one-text.is-swapping { opacity: 0; }

.sv-cal__arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--hairline-strong);
  border-radius: 50%;
  color: var(--fg-quiet);
  transition: transform .15s var(--ease);
}

/* ---- times: dimmed until a day is picked ---- */
.sv-cal__times {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  opacity: .35;
  transition: opacity .3s var(--ease);
}
.sv-cal__times.is-ready { opacity: 1; }

.sv-cal__time {
  position: relative;
  min-height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-pill);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}
/* A day with fewer times leaves its spare slots in place, unseen. */
.sv-cal__time.is-none { opacity: 0; }

/* The picked time: the booking demo's white pill, a layer fading in. */
.sv-cal__pick {
  position: absolute;
  inset: -1px;
  display: grid;
  place-items: center;
  border-radius: inherit;
  background: #E8E8EA;
  color: var(--ink-0);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.sv-cal__time.is-on .sv-cal__pick { opacity: 1; }

/* ---- details ---- */
/* Name and email side by side, Book under them on the right: room for the
   whole email address at every width down to phones, which stack all three. */
.sv-cal__form {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 12px;
}

.sv-cal__field {
  min-height: 56px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  border: 1px solid var(--hairline-strong);
  border-radius: 12px;
  font-size: 16px;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
}
.sv-cal__field:empty::before {
  content: attr(data-placeholder);
  color: var(--fg-meta);
}

.sv-cal__book {
  grid-column: 1 / -1;
  justify-self: end;
  display: grid;
  place-items: center;
  min-height: 56px;
  padding: 0 32px;
  border-radius: var(--r-pill);
  background: #E8E8EA;
  color: var(--ink-0);
  font-size: 15px;
  font-weight: var(--wt-medium);
  transition: transform .15s var(--ease);
}

.sv-cal__book.is-press,
.sv-cal__arrow.is-press { transform: scale(.94); }

/* The live demo's real Book button hovers like the site's solid buttons: a
   dark fill wipes up from the bottom and the label turns light. The
   services page preview is a span, so it keeps still. */
button.sv-cal__book {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid currentColor;
  cursor: pointer;
  transition: color .4s var(--ht-ease), transform .15s var(--ease);
}
button.sv-cal__book::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bg);
  transform: translateY(101%);
  transition: transform .5s var(--ht-ease);
}
button.sv-cal__book:hover { color: var(--paper-0); }
button.sv-cal__book:hover::before { transform: translateY(0); }

/* ---- confirmation: a card over the whole body ---- */
.sv-cal__done {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 32px;
  text-align: center;
  background: var(--surface-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity .4s var(--ease),
    transform .4s var(--ease),
    visibility 0s linear .4s;
}
.sv-cal__done.is-shown {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

/* Three layers, read in order: a big "Booked.", the day and time it is
   for, then, under a hairline, what happens next in quieter type. */
.sv-cal__done-title {
  margin: 0;
  font-size: clamp(40px, 5vw, 64px);
  font-weight: var(--wt-light);
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--paper-0);
}

.sv-cal__done-when {
  margin: 0;
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: var(--wt-light);
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

.sv-cal__done-msg {
  max-width: 34em;
  margin: 8px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--hairline-strong);
  font-size: 16px;
  font-weight: var(--wt-light);
  line-height: 1.7;
  color: var(--fg-quiet);
}

/* ---- the visitor's pointer ---- */
.sv-cal__cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transition: transform .7s var(--ease), opacity .3s var(--ease);
}
.sv-cal__cursor.is-shown { opacity: 1; }

.sv-cal__pointer {
  display: block;
  transform-origin: 4px 3px;
  transition: transform .15s var(--ease);
}
.sv-cal__cursor.is-press .sv-cal__pointer { transform: scale(.82); }

/* The finished booking, still. The script does not play it either; this
   covers the setting being changed while the page is open. */
@media (prefers-reduced-motion: reduce) {
  .sv-cal__body,
  .sv-cal__on,
  .sv-cal__one-text,
  .sv-cal__arrow,
  .sv-cal__times,
  .sv-cal__pick,
  .sv-cal__book,
  .sv-cal__done,
  .sv-cal__pointer { transition: none; }
  .sv-cal__cursor { display: none; }
}

/* ---- the live demo: real buttons and fields ----
   Reset to the look above. :where keeps these weaker than the classes, so
   each part's own border, padding and fill still apply. */
:where(.sv-cal) button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
}

.sv-cal button[disabled] { cursor: default; }
.sv-cal button.sv-cal__day:not([disabled]):hover { border-color: var(--hairline-strong); }
.sv-cal button.sv-cal__time:not([disabled]):hover { border-color: var(--fg-meta); }

.sv-cal button:focus-visible,
.sv-cal input:focus-visible {
  outline: 2px solid #E8E8EA;
  outline-offset: 2px;
}

input.sv-cal__field {
  width: 100%;
  background: none;
  font: inherit;
  font-size: 16px;
  color: var(--fg);
}
input.sv-cal__field::placeholder { color: var(--fg-meta); }
input.sv-cal__field:focus { border-color: var(--fg-meta); }

.sv-cal .vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.sv-cal__error {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 13px;
  font-weight: var(--wt-light);
  color: rgba(245, 100, 100, 0.85);
}

.sv-cal__again {
  margin-top: 8px;
  padding: 8px 0;
  font-size: 14px;
  color: var(--fg-quiet);
  text-decoration: underline;
  text-underline-offset: .2em;
}
.sv-cal__again:hover { color: var(--paper-0); }

/* ---- fitting the panel's own width ---- */

/* Under 720px wide: the week a little tighter. */
@container cal (max-width: 719px) {
  .sv-cal__week { gap: 8px; }
  .sv-cal__day { padding: 14px 12px; }
  .sv-cal__date { font-size: 24px; }
}

/* Under 540px: name, email and Book one under another, full width. */
@container cal (max-width: 539px) {
  .sv-cal__form { grid-template-columns: minmax(0, 1fr); }
  .sv-cal__book { justify-self: stretch; }
}

/* Under 520px: five days across. */
@container cal (max-width: 519px) {
  .sv-cal__week { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .sv-cal__week > :nth-child(n + 6) { display: none; }
}

/* Under 420px: one day at a time with the arrows, times two across. */
@container cal (max-width: 419px) {
  .sv-cal__head { padding: 16px 20px; }
  .sv-cal__body { padding: 20px; }
  .sv-cal__week { display: none; }
  .sv-cal__switch {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 12px;
  }
  .sv-cal__one { text-align: center; }
  .sv-cal__one-text { justify-items: center; }
  .sv-cal__times { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The live demo below desktop: Book takes the full width */
@media (max-width: 1023px) {
  [data-bookdemo] button.sv-cal__book { justify-self: stretch; }
}

/* The live demo on a phone: four days across rather than one with arrows */
@container cal (max-width: 419px) {
  [data-bookdemo] .sv-cal__week {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }
  [data-bookdemo] .sv-cal__week > :nth-child(n + 5) { display: none; }
  [data-bookdemo] .sv-cal__switch { display: none; }
  [data-bookdemo] .sv-cal__day { padding: 12px 4px; }
  [data-bookdemo] .sv-cal__date { font-size: 20px; }
}