/* Linear progress tracker (tracker.js). Uses the page's --brand and --accent, so it's white-label. */
.kt-track { --kt-h: 12px; position: relative; container-type: inline-size; isolation: isolate; }
/* soft aura in the card, centered on "you are here" */
.kt-track::before {
  content: ""; position: absolute; inset: -20px -20px -14px; border-radius: 20px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42% 60% at var(--kt-g, 50%) 62%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 72%),
    radial-gradient(70% 90% at 0% 100%, color-mix(in srgb, var(--brand) 9%, transparent), transparent 70%);
  animation: kt-breathe 5s ease-in-out infinite;
}
@keyframes kt-breathe { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
.kt-eyebrow { display: flex; align-items: center; gap: .45rem; margin: 0 0 .25rem; font-size: .88rem; font-weight: 600; color: var(--brand); }
.kt-live { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: kt-live 2.2s ease-out infinite; }
@keyframes kt-live { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 65%, transparent); } 80%, 100% { box-shadow: 0 0 0 8px transparent; } }
.kt-headline { margin: 0 0 1.15rem; font-size: clamp(1.4rem, 5.2vw, 1.85rem); font-weight: 700; line-height: 1.15; letter-spacing: -.028em; }
.kt-human { margin: 0 0 1.35rem; font-size: .93rem; color: var(--muted, #6e6e73); }
.kt-bar { position: relative; height: var(--kt-h); margin: 0 2px; }
/* light under-glow beneath the filled part */
.kt-bar::before {
  content: ""; position: absolute; left: 0; top: 4px; height: var(--kt-h); width: var(--kt-p, 0%); border-radius: 99px; pointer-events: none;
  background: linear-gradient(90deg, var(--brand), var(--accent)); filter: blur(10px); opacity: .45;
  transition: width 1.5s cubic-bezier(.22, .8, .2, 1);
}
.kt-base, .kt-fill { position: absolute; inset: 0; border-radius: 99px; -webkit-mask-image: var(--kt-mask); mask-image: var(--kt-mask); }
.kt-base { background: color-mix(in srgb, var(--brand) 9%, #e9e6e1); }
.kt-fill {
  overflow: hidden;
  background: linear-gradient(90deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 50%, var(--accent)) 62%, var(--accent) 100%);
  transition: clip-path 1.5s cubic-bezier(.22, .8, .2, 1);
}
.kt-fill::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 38%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .42), transparent);
  transform: translateX(-120%); animation: kt-sheen 4.2s ease-in-out 1.8s infinite;
}
@keyframes kt-sheen { 0% { transform: translateX(-120%); } 55%, 100% { transform: translateX(270%); } }
.kt-knob {
  position: absolute; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%;
  background: #fff; border: 4px solid var(--brand); pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2), 0 0 0 6px color-mix(in srgb, var(--accent) 24%, transparent);
  transition: left 1.5s cubic-bezier(.22, .8, .2, 1);
}
.kt-knob::after { content: ""; position: absolute; inset: -11px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); animation: kt-ring 2.6s ease-out infinite; }
@keyframes kt-ring { 0% { transform: scale(.55); opacity: .9; } 100% { transform: scale(1.45); opacity: 0; } }
.kt-knob.is-done { background: var(--accent); border-color: #fff; }
.kt-hits { position: absolute; inset: -14px 0; display: flex; gap: 3px; }
.kt-hit { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; border-radius: 8px; min-width: 0; }
.kt-hit:hover { background: color-mix(in srgb, var(--brand) 7%, transparent); }
.kt-hit:focus-visible { outline: 2px solid var(--brand); outline-offset: 0; }
.kt-labels { position: relative; height: 1.5rem; margin-top: .75rem; font-size: .8rem; }
.kt-here { position: absolute; top: 0; transform: translateX(-50%); font-weight: 700; color: var(--brand); white-space: nowrap; }
.kt-here.l { transform: translateX(-6px); } .kt-here.r { transform: translateX(calc(-100% + 6px)); }
.kt-phases { display: none; }
.kt-ends { display: flex; justify-content: space-between; font-size: .75rem; color: var(--muted, #6e6e73); }
@container (min-width: 560px) {
  .kt-here, .kt-ends { display: none; }
  .kt-phases { display: block; position: absolute; inset: 0; }
  .kt-phase { position: absolute; top: 0; text-align: center; padding: 0 2px; color: var(--muted, #6e6e73); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .kt-phase.is-done { color: var(--text, var(--ink, #1d1d1f)); }
  .kt-phase.is-cur { color: var(--brand); font-weight: 700; }
}
.kt-mini { --kt-h: 8px; }
.kt-mini::before { display: none; }
.kt-mini .kt-bar::before { filter: blur(6px); opacity: .3; top: 3px; }
.kt-mini .kt-knob { width: 16px; height: 16px; margin: -8px 0 0 -8px; border-width: 3px; box-shadow: 0 1px 4px rgba(0, 0, 0, .2), 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.kt-mini .kt-knob::after { display: none; }
@media (prefers-reduced-motion: reduce) {
  .kt-fill, .kt-knob { transition: none; }
  .kt-fill::after, .kt-knob::after, .kt-live, .kt-track::before { animation: none; }
  .kt-bar::before { transition: none; }
}

/* ---------- full-size tracker: glossy tube, phase tabs, status strip ---------- */
.kt-track:not(.kt-mini) { --kt-h: 20px; }
.kt-track:not(.kt-mini) .kt-base {
  background: linear-gradient(180deg, rgba(0,0,0,.07), rgba(255,255,255,.6) 75%), color-mix(in srgb, var(--brand) 9%, #e3e5ea);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.2);
}
.kt-track:not(.kt-mini) .kt-fill {
  background:
    linear-gradient(180deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,.06) 40%, rgba(0,0,0,.12) 100%),
    linear-gradient(90deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 50%, var(--accent)) 62%, var(--accent) 100%);
}
.kt-track:not(.kt-mini) .kt-knob { width: 32px; height: 32px; margin: -16px 0 0 -16px; border-width: 5px; }
.kt-tabs { position: relative; height: 34px; margin: 0 2px 10px; }
.kt-tab { position: absolute; bottom: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; padding: 0 2px; }
.kt-tab-top { display: flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; font-size: .78rem; font-weight: 600; color: var(--muted, #6e6e73); }
.kt-tab-n { width: 19px; height: 19px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: .68rem; font-weight: 700; background: #eceef1; color: var(--muted, #6e6e73); }
.kt-tab-name { display: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kt-tab-line { display: block; width: 100%; height: 4px; border-radius: 99px; background: #e3e5ea; }
.kt-tab.is-done .kt-tab-n { background: var(--brand); color: var(--brand-ink, #fff); }
.kt-tab.is-done .kt-tab-line { background: var(--brand); }
.kt-tab.is-done .kt-tab-top { color: var(--text, var(--ink, #1d1d1f)); }
.kt-tab.is-cur .kt-tab-n { background: var(--accent); color: var(--accent-ink, #14181a); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); }
.kt-tab.is-cur .kt-tab-line { background: linear-gradient(90deg, var(--brand), var(--accent)); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 65%, transparent); }
.kt-tab.is-cur .kt-tab-top { color: var(--brand); }
@container (min-width: 560px) {
  .kt-tab.kt-roomy .kt-tab-name { display: inline; }
  .kt-tab.is-cur:not(.kt-roomy) { overflow: visible; }
  .kt-tab.is-cur:not(.kt-roomy) .kt-tab-name { display: inline; overflow: visible; }
  .kt-tab.is-cur:not(.kt-roomy) .kt-tab-top { max-width: none; }
  .kt-tab.kt-first.is-cur:not(.kt-roomy) { align-items: flex-start; }
  .kt-tab.kt-last.is-cur:not(.kt-roomy) { align-items: flex-end; }
}
.kt-status { display: flex; gap: .65rem; align-items: flex-start; margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid color-mix(in srgb, var(--brand) 10%, #e6e7eb); }
.kt-status p { margin: 0; font-size: .9rem; line-height: 1.45; color: var(--muted, #6e6e73); }
.kt-status b { color: var(--text, var(--ink, #1d1d1f)); font-weight: 700; }
.kt-check { width: 22px; height: 22px; flex: none; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: var(--brand-ink, #fff); font-size: .72rem; font-weight: 700; }