/* 0.7.2: gedeelde tijdlijn met gemeten headerhoogte per categorie. */
.planner-v3.timeline-active {
  --timeline-row-height: 46px;
  position: relative;
  padding-left: 64px;
  align-items: start;
}

.planning-time-axis {
  position: absolute;
  top: 0;
  left: 0;
  width: 58px;
  height: calc((var(--timeline-minutes) * var(--timeline-row-height)) + var(--timeline-origin));
  color: var(--muted);
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.planning-time-marker {
  position: absolute;
  top: calc(var(--timeline-origin) + (var(--minute-index) * var(--timeline-row-height)));
  left: 0;
  width: 54px;
  height: var(--timeline-row-height);
  padding-top: 3px;
  border-top: 1px solid var(--line);
  text-align: right;
}

.planner-v3.timeline-active .course-v3 {
  overflow: visible;
}

.planner-v3.timeline-active .group-list {
  position: relative;
  min-height: calc((var(--timeline-minutes) * var(--timeline-row-height)) + var(--timeline-header-reserve));
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--timeline-row-height) - 1px),
    color-mix(in srgb, var(--line) 55%, transparent) calc(var(--timeline-row-height) - 1px),
    color-mix(in srgb, var(--line) 55%, transparent) var(--timeline-row-height)
  );
  background-position: 0 var(--timeline-header-reserve);
}

.planner-v3.timeline-active .plan-group.timeline-positioned {
  position: absolute;
  top: calc(var(--timeline-header-reserve) + (var(--group-start) * var(--timeline-row-height)) - var(--group-header-height));
  left: 0;
  right: 0;
  height: calc(var(--group-header-height) + (var(--group-span) * var(--timeline-row-height)));
  margin: 0;
  overflow: visible;
}

.planner-v3.timeline-active .plan-group.timeline-positioned h3 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  min-height: var(--group-header-height);
  z-index: 2;
}

.planner-v3.timeline-active .plan-group.timeline-positioned .participant-list {
  position: absolute;
  top: var(--group-header-height);
  left: 0;
  right: 0;
  height: calc(var(--group-span) * var(--timeline-row-height));
}

.planner-v3.timeline-active .plan-group.timeline-positioned .plan-person {
  position: absolute;
  top: calc(var(--person-minute) * var(--timeline-row-height));
  left: 0;
  right: 0;
  min-height: var(--timeline-row-height);
  max-height: var(--timeline-row-height);
  overflow: hidden;
  background: color-mix(in srgb, var(--panel) 90%, var(--cat));
}

.planner-v3.timeline-active .plan-group.timeline-positioned .timeline-no-time {
  display: none;
}

.planner-v3.timeline-active .timeline-unplanned {
  display: none;
}

@media (max-width: 900px) {
  .planner-v3.timeline-active {
    padding-left: 58px;
  }
}