/* Admin → TV timeline: one picture per video, side by side, width by length, red playhead. */
.tv-timeline {
  margin: 0 0 2rem;
}

.tv-timeline__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.tv-timeline__header h2 {
  margin: 0 0 0.5rem;
}

.tv-timeline__clock {
  font-variant-numeric: tabular-nums;
  color: var(--adm-red);
  font-weight: 600;
}

.tv-timeline__scroll {
  overflow-x: auto;
  background: #1b1d22;
  border-radius: var(--adm-radius);
  padding: 1.25rem 0.75rem 0.75rem;
}

.tv-timeline__track {
  position: relative;
  display: flex;
  gap: 3px;
  width: max-content;
}

.tv-timeline__clip {
  position: relative;
  flex: none;
  /* 1 px per second, never smaller than one picture */
  width: max(160px, calc(var(--seconds) * 1px));
  height: 90px;
  overflow: hidden;
  border-radius: 3px;
  background: #3a3f4b;
  outline: 2px solid transparent;
  outline-offset: -2px;
}

.tv-timeline__clip--on-air {
  outline-color: var(--adm-red);
}

.tv-timeline__picture {
  position: absolute;
  inset: 0;
  background-size: auto 100%;
  background-repeat: repeat-x;
}

.tv-timeline__title,
.tv-timeline__length {
  position: absolute;
  left: 0.4rem;
  max-width: calc(100% - 0.8rem);
  padding: 0.05rem 0.3rem;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 0.75rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tv-timeline__title {
  top: 0.35rem;
}

.tv-timeline__length {
  bottom: 0.35rem;
  font-variant-numeric: tabular-nums;
}

.tv-timeline__playhead {
  position: absolute;
  top: -0.9rem;
  bottom: -0.35rem;
  width: 2px;
  margin-left: -1px;
  background: #ff2d2d;
  pointer-events: none;
  z-index: 1;
}

.tv-timeline__playhead::before {
  content: "";
  position: absolute;
  top: 0;
  left: -5px;
  border: 6px solid transparent;
  border-top: 8px solid #ff2d2d;
}