.timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.timeline__day {
  display: flex;
  flex-direction: column;
}

.timeline__heading {
  position: sticky;
  inset-block-start: var(
    --timeline-heading-inset,
    calc(var(--topbar-offset, var(--topbar-height)) + var(--space-sm))
  );
  inline-size: fit-content;
  max-inline-size: 100%;
  margin-inline: auto;
}

.timeline__label {
  display: block;
  padding-block: var(--space-2xs);
  padding-inline: var(--space-md);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-thick);
  line-height: var(--line-height-ui);
  text-decoration: none;
  transition:
    color var(--duration-state) var(--easing-state),
    translate var(--duration-state) var(--easing-state);
}

@media (hover: hover) {
  a.timeline__label:hover {
    color: var(--color-text);
  }
}

.timeline__rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding-block-start: var(--space-xs);
}

@media (width <= 48rem) {
  .timeline__heading {
    inset-block-start: var(--timeline-heading-inset, var(--space-sm));
  }
}

@media (forced-colors: active) {
  .timeline__label {
    border: var(--border-width) solid currentcolor;
  }
}