/* Cassia Vitality home: the three-year timeline in #continuum (js/timeline.js builds the chart).
   First state: clinician visits only. Second state: with your Cassia Vitality team. */
.tl { max-width: 1100px; margin: 0 auto; }

.tl__legend {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px;
  margin: 0 0 18px; padding: 0; list-style: none;
  font-size: .875rem; line-height: 1.3; color: var(--ink-2);
}
.tl__key { display: inline-flex; align-items: center; gap: 8px; transition: opacity .6s ease .3s; }
.js .tl:not(.is-end) .tl__key--prep, .js .tl:not(.is-end) .tl__key--check { opacity: .35; }
.tl__sw { flex: none; display: inline-block; width: 18px; height: 18px; border-radius: 50%; }
.tl__sw--visit { width: 12px; height: 12px; margin: 3px; background: #9aa0a8; }
.tl__sw--prep {
  background:
    radial-gradient(circle closest-side, #5D6670 0 50%, #fff 51% 72%, transparent 74%),
    linear-gradient(135deg, #67a1ff, #cf7bdc 50%, #ff9980);
}
.tl__sw--check {
  width: 22px; border-radius: 0;
  background:
    radial-gradient(circle at 4px 12px, #2E73C8 0 2.6px, transparent 3px),
    radial-gradient(circle at 10px 5px, #E0A33B 0 2.6px, transparent 3px),
    radial-gradient(circle at 18px 10px, #2FA39A 0 2.6px, transparent 3px),
    radial-gradient(circle at 11px 15px, #D96A9E 0 2.2px, transparent 2.6px),
    radial-gradient(circle at 19px 16px, #A05CB0 0 2px, transparent 2.4px);
}

.tl__chart { position: relative; min-height: 157px; }
@media (min-width: 609px) { .tl__chart { min-height: 206px; } }
.tl__svg { display: block; width: 100%; height: auto; overflow: visible; }
.tl__svg text { font-family: var(--font); }

.tl__track { stroke: #d3d6db; stroke-width: 3; stroke-linecap: round; }
.tl__axis { stroke: var(--line-strong); stroke-width: 1.5; }
.tl__tick { stroke: var(--line-strong); stroke-width: 1; }
.tl__tick--year { stroke-width: 1.5; }
.tl__sep { stroke: #d3d6db; stroke-width: 1; stroke-dasharray: 2 4; }
.tl__year { fill: var(--ink-2); font-weight: 600; }

.tl__lab--a { fill: var(--ink-2); }
.tl__lab--b { fill: var(--ink); font-weight: 600; opacity: 0; }
.tl.is-end .tl__lab--a { opacity: 0; }
.tl.is-end .tl__lab--b { opacity: 1; }

.tl__m { opacity: 0; }
.tl.is-end .tl__m { opacity: .88; }

.tl__dot { fill: #9aa0a8; stroke: #fff; stroke-width: 2; }
.tl.is-end .tl__visit--keep .tl__dot { fill: #5D6670; }
.tl.is-end .tl__visit--drop { opacity: 0; }
.tl__ring { fill: none; stroke-width: 2.5; opacity: 0; transform: scale(.6); transform-box: fill-box; transform-origin: center; }
.tl.is-end .tl__ring { opacity: 1; transform: none; }
.tl__halo { fill: #fff; opacity: 0; }
.tl.is-end .tl__halo { opacity: 1; }

/* transitions run only while animating, so a reset to the first state is instant */
.tl.is-animated .tl__m { transition: opacity .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0s); }
.tl.is-animated .tl__visit--drop { transition: opacity .7s ease var(--d, 0s); }
.tl.is-animated .tl__dot { transition: fill .6s ease calc(var(--d, 0s) + .2s); }
.tl.is-animated .tl__ring {
  transition: opacity .7s ease calc(var(--d, 0s) + .2s), transform .7s cubic-bezier(.2, .7, .2, 1) calc(var(--d, 0s) + .2s);
}
.tl.is-animated .tl__halo { transition: opacity .7s ease calc(var(--d, 0s) + .2s); }
.tl.is-animated .tl__lab { transition: opacity .6s ease; }

.tl__cap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px;
  margin-top: 16px; font-size: .875rem; line-height: 1.45; color: var(--ink-3); text-align: center;
}
.tl__replay {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: #fff; color: var(--ink);
  font-size: .8125rem; font-weight: 600; cursor: pointer;
}
.tl__replay:hover { border-color: var(--action); color: var(--action); }
.tl__replay[hidden] { display: none; }
.tl__replay svg { width: 14px; height: 14px; }

/* without the script: the written description stands in for the chart */
.no-js .tl__legend, .no-js .tl__chart { display: none; }
.no-js .tl__desc.visually-hidden {
  position: static !important; width: auto; height: auto; margin: 0 auto; padding: 0; clip: auto;
  overflow: visible; white-space: normal; max-width: 640px; text-align: center; color: var(--ink-2);
}

@media (max-width: 559px) {
  .tl__legend { justify-content: flex-start; gap: 8px 18px; font-size: .8125rem; }
  .tl__cap { font-size: .8125rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tl *, .tl__key { transition: none !important; }
}