/*
 * components/timeline.css — Operation timeline component (Session 5: UI Lab).
 *
 * Paired with templates/components/timeline.html. A vertical event log
 * with status-colored dots. Token-driven (D5).
 */

.timeline { list-style: none; margin: 0; padding: 0; }

.timeline__item {
  display: grid;
  grid-template-columns: 1rem 1fr;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  position: relative;
}

.timeline__item::before {
  content: "";
  position: absolute;
  left: 0.4rem;
  top: 1.4rem;
  bottom: -0.3rem;
  width: 2px;
  background: var(--color-border);
}
.timeline__item:last-child::before { display: none; }

.timeline__dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: var(--radius-pill);
  margin-top: 0.35rem;
  background: var(--color-neutral-fg);
  z-index: var(--z-base);
}

.timeline__item--success .timeline__dot { background: var(--color-success-fg); }
.timeline__item--danger .timeline__dot { background: var(--color-danger-fg); }
.timeline__item--warning .timeline__dot { background: var(--color-warn-fg); }
.timeline__item--info .timeline__dot { background: var(--color-info-fg); }

.timeline__body { display: flex; flex-direction: column; gap: 0.1rem; }
.timeline__title { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.timeline__desc { font-size: var(--fs-sm); color: var(--color-fg-muted); }
.timeline__when { font-size: var(--fs-xs); color: var(--color-fg-muted); font-variant-numeric: tabular-nums; }