/* Smooth entrance for tracking status */
#trackResult .card.status-card{
  opacity:0; transform: translateY(10px);
  animation: statusFade 420ms cubic-bezier(.2,.7,.2,1) forwards;
}
#trackResult .timeline-animated{
  opacity:0; transform: translateY(12px);
  animation: statusFade 480ms 80ms cubic-bezier(.2,.7,.2,1) forwards;
}
#trackResult .timeline-animated .step{
  opacity:0; transform: translateY(16px) scale(.98);
  animation: stepIn 520ms var(--delay, 0ms) cubic-bezier(.2,.7,.2,1) forwards;
}
#trackResult .timeline-animated .step .num{
  will-change: transform, opacity;
  animation: pop 520ms var(--delay, 0ms) cubic-bezier(.2,.7,.2,1) both;
}
@keyframes statusFade{ to { opacity:1; transform:none; } }
@keyframes stepIn{ to { opacity:1; transform: translateY(0) scale(1); } }
@keyframes pop{ 0%{ transform: scale(.7); opacity:0; } 100%{ transform: scale(1); opacity:1; } }


/* --- Status styling for steps --- */
#trackResult .timeline-animated .step.done .num,
#trackResult .step.done .num{ background: var(--brand); color:#fff; border:none; }
#trackResult .timeline-animated .step.todo .num,
#trackResult .step.todo .num{ background: transparent; color: var(--fg); border:2px solid var(--muted, rgba(255,255,255,.25)); }
:root.light #trackResult .step.todo .num{ border-color: rgba(0,0,0,.2); color:#0b1f16; }
#trackResult .step .num.hollow{ background: transparent; border:2px solid var(--muted, rgba(255,255,255,.25)); color: inherit; }
#trackResult .step .num.check{ font-size: 16px; line-height: 28px; }

#trackResult .step.active .num,
#trackResult .step .num.pulse{ position:relative; box-shadow: 0 0 0 0 rgba(10,164,81,.35); }
#trackResult .step .num.pulse::after{
  content:''; position:absolute; inset:-6px; border-radius:50%;
  box-shadow: 0 0 0 0 rgba(10,164,81,.35);
  animation: ring 1400ms ease-out infinite;
}
@keyframes ring{
  0% { box-shadow: 0 0 0 0 rgba(10,164,81,.35); }
  70% { box-shadow: 0 0 0 10px rgba(10,164,81,0); }
  100% { box-shadow: 0 0 0 0 rgba(10,164,81,0); }
}

#trackResult .step.done .box{ border:1px solid rgba(10,164,81,.35); }
#trackResult .step.active .box{ border:1px solid var(--brand); }
#trackResult .step.todo .box{ opacity:.9; }

/* FORCE OVERRIDES to beat generic .timeline .num */
#trackResult .timeline-animated .step.todo .num,
#trackResult .step.todo .num{ 
  background: transparent !important; 
  color: var(--fg) !important; 
  border:2px solid var(--muted, rgba(255,255,255,.25)) !important; 
}
:root.light #trackResult .step.todo .num{ border-color: rgba(0,0,0,.2) !important; color:#0b1f16 !important; }
#trackResult .step .num.hollow{ 
  background: transparent !important; 
  border:2px solid var(--muted, rgba(255,255,255,.25)) !important; 
  color: inherit !important; 
}
#trackResult .step.done .num{ background: var(--brand) !important; color:#fff !important; border:none !important; }