/* Booking flow demo: a self-playing scheduling widget (see part.js for the markup it builds and the timeline).
   Every size is in em on the card, so the whole card scales with its font-size: on desktop the font-size follows
   the box (the full three-column card is 62.5em = 1000px at 16px), below 640px of box width the columns stack (10px floor x 62.5em = 625px fits).
   Timeline steps add classes to the root: .bf-on-lines, -calendar, -hover, -select, -times, -slotHover, -split,
   -press, -merge, -sheen, -end. Everything below is a transition keyed on those classes. */

.bookflow {
  /* timing (measured on the source's 100 ms frames) */
  --bf-speed: 1;                                   /* multiplies every duration and step time by 1/speed */
  --bf-ease: cubic-bezier(.45, .05, .3, 1);        /* fitted to both widens and the split: slow in, long settle */
  --bf-lines-dur: 700ms;                           /* placeholder lines grow from dots */
  --bf-lines-ease: cubic-bezier(.25, .1, .25, 1);
  --bf-cal-dur: 1000ms;                            /* card widens, calendar slides in */
  --bf-hover-dur: 400ms;                           /* date / slot darken on hover */
  --bf-select-dur: 600ms;                          /* date fills with the gradient */
  --bf-times-dur: 800ms;                           /* card widens again, time column slides in */
  --bf-stagger: 40ms;                              /* between time slots arriving */
  --bf-split-dur: 650ms;                           /* slot splits into time + Book */
  --bf-press-dur: 400ms;                           /* Book darkens */
  --bf-merge-dur: 700ms;                           /* pair merges into the confirmed pill */
  --bf-sheen-dur: 300ms;                           /* light sweeps across the confirmed pill */
  --bf-fade-dur: 300ms;                            /* loop reset: card fades out and back in */
  /* geometry */
  --bf-size: 16px;                                 /* the card's largest font-size (desktop) */
  --bf-size-stacked: 15px;                         /* largest font-size when stacked */
  --bf-stack-below: 640px;                         /* documentation only: change the @container query below */
  --bf-host-w: 18.75em;
  --bf-cal-w: 26.25em;
  --bf-times-w: 17.5em;
  --bf-height: 31.25em;
  --bf-enter-x: 3em;                               /* entering columns slide in from this far right */
  --bf-enter-y: .75em;                             /* ...and this far down */
  --bf-gap: .375em;                                /* between the time pill and Book */
  --bf-grow-x: .95em;                              /* confirmed pill grows past the slot each side (238 -> 272px) */
  --bf-grow-y: .19em;                              /* ...and top/bottom (54 -> 60px) */
  --bf-radius: .5em;
  --bf-card-radius: 1em;
  /* colour (sampled from the source frames) */
  --bf-bg: #fff;
  --bf-line: #dde1e4;
  --bf-ink: #10243e;
  --bf-muted: #66768a;
  --bf-day-ink: #1f4f99;
  --bf-off: #b4bcc7;
  --bf-soft: #e5effb;                              /* available day, slot, placeholder line */
  --bf-hover: #c3dffe;
  --bf-book: #9abbfd;
  --bf-press: #7b96cb;
  --bf-done: linear-gradient(180deg, #9bbdfd, #9a9df9);   /* selected day + confirmed pill */
  --bf-done-ink: #fff;
  --bf-mark: #3b5bdb;
  --bf-avatar: linear-gradient(140deg, #fde3d2, #f4cfe0);
  --bf-avatar-ink: #7a4636;
  --bf-shadow: 0 1px 2px rgba(16, 36, 62, .06), 0 20px 48px -12px rgba(16, 36, 62, .16);

  container-type: inline-size;
  display: block;
}

.bf-card {
  box-sizing: border-box;
  font-size: clamp(10px, calc(100cqi / 62.5), var(--bf-size));
  display: flex;
  width: max-content;
  height: var(--bf-height);
  margin-inline: auto;
  position: relative;
  overflow: hidden;
  background: var(--bf-bg);
  color: var(--bf-ink);
  border-radius: var(--bf-card-radius);
  box-shadow: var(--bf-shadow);
  line-height: 1.25;
  text-align: left;
  transition: opacity calc(var(--bf-fade-dur) / var(--bf-speed)) ease;
}
.bookflow.bf-fading .bf-card { opacity: 0; }
.bf-card *, .bf-card *::before, .bf-card *::after { box-sizing: border-box; }
:where(.bf-card) :where(p, h3, ul, li) { margin: 0; padding: 0; list-style: none; font: inherit; }

.bf-col { flex: none; height: 100%; padding-top: 3.2em; }

/* --- host column ------------------------------------------------------------------------------------ */
.bf-host { width: var(--bf-host-w); padding-inline: 2.5em; }
.bf-brand { display: flex; align-items: center; gap: .55em; height: 1.75em; font-weight: 600; }
.bf-brand__mark { width: 1.35em; height: 1.35em; border-radius: .4em; background: var(--bf-mark); position: relative; }
.bf-brand__mark::after { content: ""; position: absolute; inset: .38em; border-radius: 50%; background: var(--bf-bg); }
.bf-brand__name { font-size: 1.15em; letter-spacing: -.01em; }
.bf-rule { position: relative; height: 1px; margin: 4em -2.5em 0; background: var(--bf-line); }
.bf-avatar {
  position: absolute; left: 2.5em; top: calc(.5px - 1.75em); width: 3.5em; height: 3.5em; border-radius: 50%;
  display: grid; place-items: center; background: var(--bf-avatar); color: var(--bf-avatar-ink);
  box-shadow: 0 0 0 .2em var(--bf-bg); font-weight: 600; font-size: 1em;
}
.bf-avatar span { font-size: 1.35em; }
.bf-who { margin-top: 3.6em; color: var(--bf-muted); font-size: .95em; }
.bf-title { margin-top: .2em; font-size: 1.5em; font-weight: 500; letter-spacing: -.015em; }
.bf-meta { margin-top: .9em; display: grid; gap: .45em; color: var(--bf-muted); }
.bf-meta li { display: flex; align-items: center; gap: .55em; font-size: .9em; }
.bf-meta svg { width: 1.2em; height: 1.2em; flex: none; }
.bf-lines { margin-top: 1.5em; display: grid; gap: .85em; justify-items: start; }
.bf-lines i {
  display: block; height: .7em; width: .7em; border-radius: 1em; background: var(--bf-soft);
  transition: width calc(var(--bf-lines-dur) / var(--bf-speed)) var(--bf-lines-ease);
}
.bookflow.bf-on-lines .bf-lines i { width: var(--w, 100%); }

/* --- the two columns that enter ------------------------------------------------------------------------ */
.bf-reveal { flex: none; width: 0; height: 100%; overflow: hidden; }
.bf-reveal--cal { transition: width calc(var(--bf-cal-dur) / var(--bf-speed)) var(--bf-ease); }
.bf-reveal--times { transition: width calc(var(--bf-times-dur) / var(--bf-speed)) var(--bf-ease); }
.bookflow.bf-on-calendar .bf-reveal--cal { width: var(--bf-cal-w); }
.bookflow.bf-on-times .bf-reveal--times { width: var(--bf-times-w); }
.bf-reveal > .bf-col {
  box-shadow: inset 1px 0 var(--bf-line);
  opacity: 0; transform: translate(var(--bf-enter-x), var(--bf-enter-y));
}
.bf-reveal--cal > .bf-col {
  transition: opacity calc(var(--bf-cal-dur) * .6 / var(--bf-speed)) ease,
              transform calc(var(--bf-cal-dur) / var(--bf-speed)) var(--bf-ease);
}
.bf-reveal--times > .bf-col {
  transition: opacity calc(var(--bf-times-dur) * .6 / var(--bf-speed)) ease,
              transform calc(var(--bf-times-dur) / var(--bf-speed)) var(--bf-ease);
}
.bookflow.bf-on-calendar .bf-reveal--cal > .bf-col,
.bookflow.bf-on-times .bf-reveal--times > .bf-col { opacity: 1; transform: none; }

.bf-head { height: 1.75em; display: flex; align-items: center; justify-content: center; }
.bf-head b { font-size: 1.5em; font-weight: 500; letter-spacing: -.015em; white-space: nowrap; }

/* --- calendar ----------------------------------------------------------------------------------------- */
.bf-cal { width: var(--bf-cal-w); }
.bf-nav { margin-top: 1.75em; height: 2.75em; display: flex; align-items: center; justify-content: center; gap: 1em; }
.bf-nav__btn { width: 2.75em; height: 2.75em; border-radius: 50%; background: var(--bf-soft); color: var(--bf-day-ink); display: grid; place-items: center; }
.bf-nav__btn svg { width: 1.1em; height: 1.1em; }
.bf-nav__month { font-size: 1.15em; font-weight: 500; min-width: 7.5em; text-align: center; white-space: nowrap; }
.bf-grid { --cell: 3.3em; --dot: 3em; margin: .9em auto 0; width: calc(var(--cell) * 7); display: grid; grid-template-columns: repeat(7, var(--cell)); }
.bf-dow { height: calc(1em / .72); display: grid; place-items: center; font-size: .72em; letter-spacing: .04em; color: var(--bf-muted); text-transform: uppercase; margin-bottom: calc(.4em / .72); }
.bf-cell { height: var(--cell); display: grid; place-items: center; }
.bf-day {
  width: var(--dot); height: var(--dot); border-radius: 50%; position: relative; display: grid; place-items: center;
  background: var(--bf-soft); color: var(--bf-day-ink); font-weight: 500;
  transition: background-color calc(var(--bf-hover-dur) / var(--bf-speed)) ease, color calc(var(--bf-select-dur) / var(--bf-speed)) ease;
}
.bf-day > span { position: relative; font-size: 1em; }
.bf-day::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--bf-done); opacity: 0;
  transition: opacity calc(var(--bf-select-dur) / var(--bf-speed)) ease;
}
.bf-day.is-off { background: none; color: var(--bf-off); font-weight: 400; }
.bookflow.bf-on-hover .bf-day.is-pick { background-color: var(--bf-hover); }
.bookflow.bf-on-select .bf-day.is-pick { color: var(--bf-done-ink); }
.bookflow.bf-on-select .bf-day.is-pick::before { opacity: 1; }

/* --- times -------------------------------------------------------------------------------------------- */
.bf-times { width: var(--bf-times-w); }
.bf-times__date { text-align: center; color: var(--bf-muted); font-size: .9em; margin-top: .1em; white-space: nowrap; }
.bf-slots { margin: 1.8em auto 0; width: 13.25em; display: grid; gap: .5em; }
.bf-slot {
  position: relative; height: 3em;
  opacity: 0; transform: translateX(2em);
  transition: opacity calc(var(--bf-times-dur) * .5 / var(--bf-speed)) ease calc(var(--i, 0) * var(--bf-stagger) / var(--bf-speed)),
              transform calc(var(--bf-times-dur) / var(--bf-speed)) var(--bf-ease) calc(var(--i, 0) * var(--bf-stagger) / var(--bf-speed));
}
.bookflow.bf-on-times .bf-slot { opacity: 1; transform: none; }
.bf-slot__time, .bf-slot__book {
  position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-radius: var(--bf-radius);
  display: grid; place-items: center; overflow: hidden; white-space: nowrap;
}
.bf-slot__time {
  background: var(--bf-soft); color: var(--bf-day-ink); font-weight: 500; font-size: 1em;
  transition: background-color calc(var(--bf-hover-dur) / var(--bf-speed)) ease,
              right calc(var(--bf-split-dur) / var(--bf-speed)) var(--bf-ease),
              left calc(var(--bf-merge-dur) / var(--bf-speed)) var(--bf-ease),
              opacity calc(var(--bf-merge-dur) * .7 / var(--bf-speed)) ease;
}
.bf-slot__book {
  left: 100%; z-index: 1; opacity: 0; background-color: var(--bf-hover); color: var(--bf-done-ink); font-weight: 500;
  transition: left calc(var(--bf-split-dur) / var(--bf-speed)) var(--bf-ease),
              opacity calc(var(--bf-split-dur) * .5 / var(--bf-speed)) ease,
              background-color calc(var(--bf-split-dur) / var(--bf-speed)) ease,
              right calc(var(--bf-merge-dur) / var(--bf-speed)) var(--bf-ease),
              top calc(var(--bf-merge-dur) / var(--bf-speed)) var(--bf-ease),
              bottom calc(var(--bf-merge-dur) / var(--bf-speed)) var(--bf-ease);
}
.bf-slot__book::before {   /* the confirmed gradient, faded in over the flat Book colour */
  content: ""; position: absolute; inset: 0; background: var(--bf-done); opacity: 0;
  transition: opacity calc(var(--bf-merge-dur) * .6 / var(--bf-speed)) ease;
}
.bf-slot__book::after {    /* the sheen */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform calc(var(--bf-sheen-dur) / var(--bf-speed)) cubic-bezier(.45, 0, .55, 1);
}
.bf-slot__label, .bf-slot__done { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; display: flex; align-items: center; gap: .45em; white-space: nowrap; }
.bf-slot__label { transition: opacity calc(var(--bf-merge-dur) * .4 / var(--bf-speed)) ease; }
.bf-slot__done { opacity: 0; transition: opacity calc(var(--bf-merge-dur) * .5 / var(--bf-speed)) ease calc(var(--bf-merge-dur) * .3 / var(--bf-speed)); }
.bf-slot__done svg { width: 1.15em; height: 1.15em; }

.bookflow.bf-on-slotHover .bf-slot.is-pick .bf-slot__time { background-color: var(--bf-hover); }
.bookflow.bf-on-split .bf-slot.is-pick .bf-slot__time { right: calc(50% + var(--bf-gap) / 2); }
.bookflow.bf-on-split .bf-slot.is-pick .bf-slot__book { left: calc(50% + var(--bf-gap) / 2); opacity: 1; background-color: var(--bf-book); }
.bookflow.bf-on-press .bf-slot.is-pick .bf-slot__book { background-color: var(--bf-press); transition-duration: calc(var(--bf-press-dur) / var(--bf-speed)); }
.bookflow.bf-on-merge .bf-slot.is-pick .bf-slot__time { left: calc(var(--bf-grow-x) * -1); right: calc(100% - .5em); opacity: 0; }
.bookflow.bf-on-merge .bf-slot.is-pick .bf-slot__book {
  left: calc(var(--bf-grow-x) * -1); right: calc(var(--bf-grow-x) * -1);
  top: calc(var(--bf-grow-y) * -1); bottom: calc(var(--bf-grow-y) * -1);
  border-radius: calc(var(--bf-radius) * 1.1);
}
.bookflow.bf-on-merge .bf-slot.is-pick .bf-slot__book::before { opacity: 1; }
.bookflow.bf-on-merge .bf-slot.is-pick .bf-slot__label { opacity: 0; }
.bookflow.bf-on-merge .bf-slot.is-pick .bf-slot__done { opacity: 1; }
.bookflow.bf-on-sheen .bf-slot.is-pick .bf-slot__book::after { transform: translateX(100%); }
/* the merge step owns the Book transition list again (press only shortened its colour) */
.bookflow.bf-on-merge .bf-slot.is-pick .bf-slot__book { transition-duration:
  calc(var(--bf-split-dur) / var(--bf-speed)), calc(var(--bf-split-dur) * .5 / var(--bf-speed)), calc(var(--bf-press-dur) / var(--bf-speed)),
  calc(var(--bf-merge-dur) / var(--bf-speed)), calc(var(--bf-merge-dur) / var(--bf-speed)), calc(var(--bf-merge-dur) / var(--bf-speed)); }
.bookflow.bf-on-merge .bf-slot.is-pick { z-index: 2; }

/* --- jumping to a state (seek / reset / reduced motion): no transitions while classes change ------------ */
.bookflow.bf-instant, .bookflow.bf-instant *, .bookflow.bf-instant *::before, .bookflow.bf-instant *::after { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .bookflow *, .bookflow *::before, .bookflow *::after { transition: none !important; }
}

/* --- narrow boxes: the columns stack and the card grows taller instead of wider ------------------------- */
@container (max-width: 639px) {
  .bf-card {
    --bf-grow-x: .25em; --bf-grow-y: .12em; --bf-enter-x: 0em; --bf-enter-y: 1em;
    font-size: clamp(12px, calc(100cqi / 25), var(--bf-size-stacked));
    flex-direction: column; width: 100%; max-width: 30em; height: auto;
  }
  .bf-col { width: auto; height: auto; padding: 1.2em 1.25em 1.3em; }
  .bf-host { padding-inline: 1.25em; }
  .bf-rule { margin: 2.6em -1.25em 0; }
  .bf-avatar { left: 1.25em; top: calc(.5px - 1.5em); width: 3em; height: 3em; }
  .bf-who { margin-top: 2.1em; }
  .bf-title { font-size: 1.35em; }
  .bf-meta { display: flex; flex-wrap: wrap; gap: .45em 1.2em; margin-top: .7em; }
  .bf-lines { margin-top: 1em; gap: .6em; }
  .bf-lines i { height: .6em; }
  .bf-lines i:nth-child(n + 3) { display: none; }
  .bf-reveal { width: auto !important; height: auto; display: grid; grid-template-rows: 0fr; }
  .bf-reveal--cal { transition: grid-template-rows calc(var(--bf-cal-dur) / var(--bf-speed)) var(--bf-ease); }
  .bf-reveal--times { transition: grid-template-rows calc(var(--bf-times-dur) / var(--bf-speed)) var(--bf-ease); }
  .bookflow.bf-on-calendar .bf-reveal--cal, .bookflow.bf-on-times .bf-reveal--times { grid-template-rows: 1fr; }
  .bf-reveal > .bf-col { min-height: 0; overflow: hidden; box-shadow: inset 0 1px var(--bf-line); }
  .bf-head { height: 1.5em; }
  .bf-head b { font-size: 1.2em; }
  .bf-nav { margin-top: .6em; height: 2.1em; }
  .bf-nav__btn { width: 2.1em; height: 2.1em; }
  .bf-grid { --cell: 2.7em; --dot: 2.4em; margin-top: .5em; }
  .bf-dow { margin-bottom: calc(.2em / .72); }
  .bf-times { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: .5em; }
  .bf-times .bf-head { height: auto; }
  .bf-times__date { margin-top: 0; font-size: 1.05em; }
  .bf-slots { flex: 0 0 100%; width: 100%; grid-template-columns: 1fr 1fr; margin-top: .9em; }
  .bf-slot { height: 2.6em; transform: translateY(.75em); font-size: .9em; }
}