.timeline{
  width:100%; height:100%; box-sizing:border-box; display:flex; flex-direction:column;
  justify-content:center; padding:32px 40px;
}
.timeline[data-color="blue"]{ --timeline-accent:var(--md-color-blue-500); --timeline-accent-soft:var(--md-color-blue-100); }
.timeline[data-color="teal"]{ --timeline-accent:var(--md-color-teal-700); --timeline-accent-soft:var(--md-color-teal-100); }
.timeline[data-color="pink"]{ --timeline-accent:var(--md-color-pink-600); --timeline-accent-soft:var(--md-color-pink-100); }
.timeline-steps{ display:flex; align-items:flex-start; width:100%; }
.timeline-step{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:10px; }
.timeline-step-text{ order:3; font-family:var(--font-sans); font-weight:var(--font-weight-light); font-size:var(--md-typography-font-size-500); line-height:26px; color:var(--md-neutral-foreground-3-rest); text-align:center; outline:none; width:100%; }
.timeline-node-row{ order:2; display:flex; align-items:center; width:100%; }
.timeline-step-label{ order:1; font-family:var(--font-display); font-weight:var(--font-weight-bold); font-size:var(--md-typography-font-size-600); line-height:30px; color:var(--md-neutral-foreground-1-rest); text-align:center; outline:none; max-width:100%; }
.timeline-step-label.hidden{ visibility:hidden; }
.timeline-line{ flex:1; height:0; border-top:2px dashed var(--md-neutral-stroke-1-rest); }
.timeline-line.filled{ border-top-style:solid; border-top-color:var(--timeline-accent); }
.timeline-line-none{ visibility:hidden; }
.timeline-dot{
  flex-shrink:0; position:relative; width:20px; height:20px; border-radius:50%; margin:0 2px;
  display:flex; align-items:center; justify-content:center; box-sizing:border-box;
  background:var(--md-neutral-stroke-1-rest); color:var(--md-color-grey-white); font-size:var(--md-typography-font-size-100);
}
.timeline-step[data-status="in-progress"] .timeline-dot{ background:var(--slide-surface); border:2px solid var(--timeline-accent); }
.timeline-step[data-status="done"] .timeline-dot{ background:var(--timeline-accent); }
.timeline-dot-halo{ position:absolute; inset:-8px; border-radius:50%; background:var(--timeline-accent-soft); z-index:-1; opacity:0; }
.timeline-step[data-status="in-progress"] .timeline-dot-halo{ opacity:1; }
.timeline-step.pw-revealed{ animation:timeline-step-reveal .4s ease both; }
@keyframes timeline-step-reveal{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }
.timeline-step.pw-revealed .timeline-line.filled{ animation:timeline-line-fill .5s ease both; }
@keyframes timeline-line-fill{ from{ border-top-style:dashed; border-top-color:var(--md-neutral-stroke-1-rest); } to{ border-top-style:solid; border-top-color:var(--timeline-accent); } }
.timeline-step.pw-revealed[data-status="in-progress"] .timeline-dot-halo{ animation:timeline-halo-pulse 2.4s ease-in-out infinite; }
@keyframes timeline-halo-pulse{ 0%,100%{ transform:scale(1); opacity:0.55; } 50%{ transform:scale(1.35); opacity:1; } }
.timeline-row-status{
  font-family:var(--font-sans); font-size:13px; color:var(--md-neutral-foreground-1-rest); flex-shrink:0;
  border:1px solid var(--ui-border); border-radius:8px; padding:7px 9px; outline:none;
  background:var(--md-color-grey-white); cursor:pointer; width:126px;
}
.timeline-row-status:focus{ border-color:var(--ui-accent); }