/*
 * Curated presentation and progressive fallback rules for Team Timeline.
 *
 * Layout and progress behavior derive from Raw Production
 * timeline-component-02; colors use the Reher Theme token layer.
 */

[data-team-timeline-root] [data-team-timeline-avatar-image][hidden] {
  display: none !important;
}

[data-team-timeline-root]
  [data-team-timeline-avatar][data-avatar-fallback-visible="true"]::before {
  content: attr(data-avatar-fallback);
  display: flex;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  background: var(--color-reher-surface);
  color: var(--color-reher-muted);
  font-size: 0.875rem;
}

[data-team-timeline-root] {
  --team-timeline-progress: 1;
  --team-timeline-progress-opacity: 1;
}

/* Before measurement, connect adjacent rows without relying on JavaScript. */
[data-team-timeline-root][data-team-timeline-geometry="pending"]
  [data-team-timeline-item] {
  position: relative;
}

[data-team-timeline-root][data-team-timeline-geometry="pending"]
  [data-team-timeline-item]:has(+ [data-team-timeline-item])::before {
  content: "";
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  width: 2px;
  height: calc(100% + 1rem);
  background: var(--color-reher-accent);
}

@media (min-width: 48rem) {
  [data-team-timeline-root][data-team-timeline-geometry="pending"]
    [data-team-timeline-item]:has(+ [data-team-timeline-item])::before {
    left: 50%;
    transform: translateX(-50%);
  }
}

[data-team-timeline-root] [data-team-timeline-progress] {
  height: var(--team-timeline-content-height, 100%);
  opacity: var(--team-timeline-progress-opacity);
  transform: scaleY(var(--team-timeline-progress));
}

[data-team-timeline-root] [data-team-timeline-item] [data-team-timeline-date] {
  background-color: color-mix(
    in oklab,
    var(--color-reher-accent) 10%,
    transparent
  );
  color: var(--color-reher-accent);
}

[data-team-timeline-root]
  [data-team-timeline-item]
  [data-team-timeline-dot]
  > span {
  background-color: var(--color-reher-surface);
}

[data-team-timeline-root]
  [data-team-timeline-item]
  [data-team-timeline-dot]
  > span
  > span {
  background-color: var(--color-reher-muted);
}

[data-team-timeline-root]
  [data-team-timeline-item][data-active]
  [data-team-timeline-date] {
  background-color: var(--color-reher-accent);
  color: var(--color-reher-accent-foreground, var(--color-reher-paper));
}

[data-team-timeline-root]
  [data-team-timeline-item][data-active]
  [data-team-timeline-dot]
  > span {
  background-color: color-mix(
    in oklab,
    var(--color-reher-accent) 10%,
    transparent
  );
}

[data-team-timeline-root]
  [data-team-timeline-item][data-active]
  [data-team-timeline-dot]
  > span
  > span {
  background-color: var(--color-reher-accent);
}

[data-team-timeline-root][data-team-timeline-static="true"]
  [data-team-timeline-progress] {
  opacity: 1 !important;
  transform: scaleY(1) !important;
}

@media (prefers-reduced-motion: reduce) {
  [data-team-timeline-root] [data-team-timeline-progress],
  [data-team-timeline-root] [data-team-timeline-date],
  [data-team-timeline-root] [data-team-timeline-dot] span {
    transition: none !important;
  }
}

/* The monochrome Reher mark follows the same dark-mode treatment as the header. */
.dark [data-team-timeline-support-key="team-start-rr-logo"] img {
  filter: invert(1);
}