/* timeline-axis.css — axis of the timeline block, Dots and Cards views
   (spec docs/superpowers/specs/2026-09-30-timeline-cards-design.md §7b):
   green line (--status-green) with an arrowhead on the right, a dark green dot +
   label per date (--color-primary),
   faint dashed guides from each dot through the rows / cards. Today keeps its
   accent colour. Split out of timeline.css (300-line cap). */

.timeline-axis {
  position: relative;
  height: 3px;
  background: var(--status-green);   /* §7b amended 2026-09-30: the light primary token is nearly white in the light theme */
  margin: 60px 0 60px 0;
}
.timeline-axis::after {   /* arrowhead at the right end */
  content: '';
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  border-left: 11px solid var(--status-green);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
.timeline-axis-label {
  position: absolute;
  top: -22px;
  transform: translateX(-50%);
  font-size: 11px;
  color: var(--color-primary);
  white-space: nowrap;
}
.timeline-axis-label:not(.timeline-axis-today)::after {   /* dot on the line under the label */
  content: '';
  position: absolute;
  left: 50%;
  top: 19px;   /* label top is 22px above the axis; 22 + 1.5 (half line) - 4.5 (half dot) */
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: var(--color-primary);
}
.timeline-axis-today {
  color: var(--color-accent);
  font-weight: 600;
}

/* Rows / cards wrapper: the guide layer reaches up through the axis's 60px
   bottom margin to the line, and down to the last row (bottom: 0). */
.timeline-body {
  position: relative;
}
.timeline-guides {
  position: absolute;
  top: -60px;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;   /* behind the dots, cards and arrows (z 2-4), painted before them */
  pointer-events: none;
}
.timeline-container.has-tracks .timeline-guides {
  left: var(--tl-track-gutter);
}
.timeline-guides > span {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1px dashed var(--color-primary);
  opacity: 0.3;
}