/* Timeline — organism for the v2 DS 5-stage horizontal step timeline.
 *
 * Created in U2 (issue #502) per CLAUDE.md §2 R4 (per-component CSS).
 * Verbatim move from components.css — no rule body changed. The
 * `StageTimelineComponent` Ruby wrapper is deferred to v3 per the
 * origin brainstorm; this file ships the styles ahead of its first
 * consumer (PR2 U4 landing page demo). */

/* ─── timeline (5 stages) ─── */
.lc-timeline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  position: relative;
}
.lc-timeline__step {
  position: relative;
  padding: var(--sp-4) var(--sp-3);
  text-align: left;
  border-top: 2px solid var(--color-rule);
}
.lc-timeline__step::before {
  content: "";
  position: absolute;
  top: -7px; left: 0;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--color-paper);
  border: 2px solid var(--color-rule-strong);
}
.lc-timeline__step--done {
  border-top-color: var(--color-primary);
}
.lc-timeline__step--done::before {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.lc-timeline__step--active {
  border-top-color: var(--color-primary);
}
.lc-timeline__step--active::before {
  background: var(--color-paper);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-soft);
}
.lc-timeline__num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-13);
  color: var(--color-ink-muted);
}
.lc-timeline__step--done .lc-timeline__num,
.lc-timeline__step--active .lc-timeline__num { color: var(--color-primary); }
.lc-timeline__label {
  display: block;
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  color: var(--color-ink);
  margin-top: 2px;
}
.lc-timeline__date {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--color-ink-muted);
  margin-top: 2px;
}