/* Timeline tab deck. Rewritten from Calendly's homepage "Built for people whose work runs on meetings" deck.
   A row of step cards joined by small bridges; the active card is wide (384px) and the rest narrow (248px), the
   width moving over 500ms ease-in-out. Text is set at its final width and swaps on a held-then-snap ease. */

.ttd {
  --ttd-active: 384px;              /* active card width */
  --ttd-rest: 248px;                /* resting card width */
  --ttd-gap: 24px;                  /* space between cards = bridge width */
  --ttd-dur: 500ms;                 /* width change */
  --ttd-ease: ease-in-out;
  --ttd-shadow: 0 20px 48px -12px rgba(11, 53, 88, .16);
  --ttd-shadow-dur: 180ms;
  --ttd-radius: 48px;
  --ttd-pad: 32px;
  --ttd-text-active: 320px;         /* active copy is laid out at this width (active - 2 x pad) */
  --ttd-text-rest: 200px;           /* resting line width */
  --ttd-art-h: 260px;               /* picture area at the foot of each card */
  --ttd-swap-dur: 180ms;            /* text swap (part.js reads these four) */
  --ttd-swap-delay: 120ms;
  --ttd-swap-ease: cubic-bezier(1, 0, .03, 1.01);
  --ttd-swap-x: 60px;               /* resting line enters from this far right */
  --ttd-art-dur: 500ms;             /* picture crossfade + active picture slide (same --ttd-swap-x) */
  --ttd-art-ease: cubic-bezier(.42, 0, .58, 1);
  --ttd-interval: 8000ms;           /* auto-advance (part.js reads it) */
  --ttd-bridge-top: 48px;           /* bridge sits this far below the card tops */
  --ttd-bridge-h: 44.8px;
  --ttd-card-bg: #fff;
  --ttd-bridge: var(--ttd-card-bg);
  --ttd-ink: #071a31;
  --ttd-muted: #5f6d77;
  --ttd-focus: #006bff;
  --ttd-timer: rgba(11, 53, 88, .12);
  --ttd-timer-fill: rgba(11, 53, 88, .55);
  --ttd-title-font: 500 28px/1.2 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ttd-body-font: 400 14px/1.4 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  position: relative;
  width: 100%;
  min-width: 0;
  contain: inline-size;   /* the scaled-to-fit row must not widen its parent (grid/flex min-content) */
  color: var(--ttd-ink);
}

.ttd__frame { position: relative; transform-origin: 0 0; }
.ttd__row { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; }
.ttd.is-row .ttd__row { flex-direction: row; justify-content: center; align-items: stretch; gap: 0; }

/* card */
.ttd__card {
  position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  background: var(--ttd-card-bg); border-radius: var(--ttd-radius); corner-shape: squircle;
}
.ttd.is-row .ttd__card {
  flex: none; width: var(--ttd-rest);
  transition: width var(--ttd-dur) var(--ttd-ease), box-shadow var(--ttd-shadow-dur) var(--ttd-ease);
}
.ttd.is-row .ttd__card.is-active { width: var(--ttd-active); box-shadow: var(--ttd-shadow); }

.ttd__text { display: flex; flex-direction: column; gap: 12px; padding: var(--ttd-pad) var(--ttd-pad) 0; }
.ttd__title { margin: 0; font: var(--ttd-title-font); color: var(--ttd-ink); white-space: nowrap; }
.ttd__stack { display: grid; font: var(--ttd-body-font); color: var(--ttd-muted); }
.ttd__rest, .ttd__active { grid-area: 1 / 1; min-width: 0; }
.ttd__rest { margin: 0; display: none; }
.ttd__active > :first-child { margin-top: 0; }
.ttd__active > :last-child { margin-bottom: 0; }
.ttd__active p { margin: 0 0 16px; }
/* row mode: both layers sit in one grid cell at their final widths, so the card height never jumps and the
   copy is uncovered by the moving edge instead of re-wrapping */
.ttd.is-row .ttd__rest { display: block; width: var(--ttd-text-rest); }
.ttd.is-row .ttd__active { width: var(--ttd-text-active); }
.ttd.is-row .ttd__card:not(.is-active) .ttd__active,
.ttd.is-row .ttd__card.is-active .ttd__rest { opacity: 0; }

/* picture area: resting art, the active background glow, the active art */
.ttd__art { position: relative; flex: none; margin-top: auto; overflow: hidden; aspect-ratio: 342 / 231.562; }
.ttd.is-row .ttd__art { aspect-ratio: auto; height: var(--ttd-art-h); }
.ttd__art-rest, .ttd__art-glow, .ttd__art-active { position: absolute; inset: 0; }
.ttd__art-glow { opacity: 0; }
.ttd__art-rest { display: none; }
.ttd.is-row .ttd__art-rest { display: block; }
.ttd.is-row .ttd__art-active { right: auto; width: var(--ttd-active); }  /* laid out at the open width */
.ttd.is-row .ttd__art-glow { transition: opacity var(--ttd-art-dur) var(--ttd-art-ease); }
.ttd.is-row .ttd__card:not(.is-active) .ttd__art-active,
.ttd.is-row .ttd__card.is-active .ttd__art-rest { opacity: 0; }
.ttd .ttd__card.is-active .ttd__art-glow,
.ttd:not(.is-row) .ttd__art-glow { opacity: 1; }

/* bridges between cards (inserted by part.js) */
.ttd__bridge { flex: none; display: block; width: 27px; height: 27px; margin: -16px 0 -16px 32px; align-self: flex-start; position: relative; z-index: 1; }
.ttd__bridge::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 27px; height: 50.4px; background: var(--ttd-bridge);
  transform: translateY(-50%) rotate(-90deg); transform-origin: 50% 50%; margin-top: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16' preserveAspectRatio='none'%3E%3Cpath d='M0 0Q1 6 5 6T10 0V16Q9 10 5 10T0 16Z'/%3E%3C/svg%3E") 0 0 / 100% 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16' preserveAspectRatio='none'%3E%3Cpath d='M0 0Q1 6 5 6T10 0V16Q9 10 5 10T0 16Z'/%3E%3C/svg%3E") 0 0 / 100% 100%;
}
.ttd.is-row .ttd__bridge { width: var(--ttd-gap); height: auto; margin: 0; padding-top: var(--ttd-bridge-top); }
.ttd.is-row .ttd__bridge::before { position: static; display: block; width: 100%; height: var(--ttd-bridge-h); transform: none; }

/* tabs: a transparent layer of real tab buttons laid exactly over the cards (pointer goes through to the cards) */
.ttd__tabs { display: none; }
.ttd.is-row .ttd__tabs {
  position: absolute; inset: 0; z-index: 2; display: flex; justify-content: center; align-items: stretch;
  gap: var(--ttd-gap); pointer-events: none;
}
.ttd__tab {
  flex: none; width: var(--ttd-rest); margin: 0; padding: 0; border: 0; background: transparent; color: transparent;
  border-radius: var(--ttd-radius); outline: none;
  transition: width var(--ttd-dur) var(--ttd-ease);
}
.ttd__tab[aria-selected="true"] { width: var(--ttd-active); }
.ttd__tab:focus-visible { outline: 2px solid var(--ttd-focus); outline-offset: 3px; }
.ttd__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* optional visible timer (data-ttd-progress="true"): a hairline at the card foot fills over one interval */
.ttd__timer { display: none; }
.ttd.has-progress.is-row .ttd__timer {
  display: block; position: absolute; z-index: 1; left: var(--ttd-radius); right: var(--ttd-radius); bottom: 14px;
  height: 3px; border-radius: 3px; background: var(--ttd-timer); overflow: hidden; opacity: 0;
  transition: opacity .3s;
}
.ttd__timer::after { content: ""; position: absolute; inset: 0; background: var(--ttd-timer-fill); transform: scaleX(0); transform-origin: 0 50%; }
.ttd.has-progress.is-timing .ttd__card.is-active .ttd__timer { opacity: 1; }
.ttd.has-progress.is-timing .ttd__card.is-active .ttd__timer.is-run::after { animation: ttd-fill var(--ttd-interval) linear forwards; }
@keyframes ttd-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* stacked (below data-ttd-min): every card shows its full copy and picture, art below the copy */
.ttd:not(.is-row) .ttd__card { border-radius: calc(var(--ttd-radius) * .75); }
.ttd:not(.is-row) .ttd__text { padding-bottom: 24px; }
.ttd:not(.is-row) .ttd__art { max-height: var(--ttd-art-stacked-max, 300px); width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .ttd.is-row .ttd__card, .ttd__tab, .ttd.is-row .ttd__art-glow { transition: none; }
}