/* Timeline roadmap — green done · orange active · red blocked */
.timeline-page .chip {
  transition: box-shadow 0.25s, border-color 0.25s;
}

.timeline-page .chip.status-done {
  border-color: rgba(0, 245, 212, 0.55);
  background: rgba(8, 48, 42, 0.55);
  box-shadow: 0 0 12px rgba(0, 245, 212, 0.12);
}

.timeline-page .chip.status-done strong {
  color: #00f5d4;
}

.timeline-page .chip.status-active {
  border-color: rgba(255, 149, 0, 0.65);
  background: rgba(48, 28, 8, 0.55);
  box-shadow: 0 0 18px rgba(255, 149, 0, 0.28);
  animation: timeline-active-glow 2.4s ease-in-out infinite;
}

.timeline-page .chip.status-active strong {
  color: #ffb347;
}

@keyframes timeline-active-glow {
  0%, 100% { box-shadow: 0 0 14px rgba(255, 149, 0, 0.22); }
  50% { box-shadow: 0 0 22px rgba(255, 149, 0, 0.42); }
}

.timeline-page .chip.status-blocked {
  border-color: rgba(255, 42, 109, 0.7);
  background: rgba(48, 10, 28, 0.6);
  box-shadow: 0 0 14px rgba(255, 42, 109, 0.25);
}

.timeline-page .chip.status-blocked strong {
  color: #ff6b9d;
}

.timeline-page .chip.status-vision {
  border-color: rgba(157, 78, 221, 0.5);
  background: rgba(20, 12, 42, 0.85);
}

.timeline-page .chip.status-vision strong {
  color: #c77dff;
}

.timeline-page .chip.status-upcoming {
  border-color: rgba(139, 164, 196, 0.35);
  background: rgba(12, 18, 42, 0.9);
}

.timeline-page .legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  font-size: 0.72rem;
  color: var(--muted);
  margin-bottom: 1.5rem;
}

.timeline-page .legend span::before {
  content: "";
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 2px;
  margin-right: 0.35rem;
  vertical-align: middle;
}

.timeline-page .legend .l-done::before { background: #00f5d4; box-shadow: 0 0 6px #00f5d4; }
.timeline-page .legend .l-active::before { background: #ff9500; box-shadow: 0 0 6px #ff9500; }
.timeline-page .legend .l-blocked::before { background: #ff2a6d; box-shadow: 0 0 6px #ff2a6d; }
.timeline-page .legend .l-vision::before { background: #9d4edd; }

.timeline-mission-link {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.82rem;
  color: var(--teal);
}