/**
 * @file
 * Interactive transcript component.
 *
 * Boxed by default; the video page unboxes it (video-page.css) so it sits
 * like the plain transcript, the transcription component.
 */

.rn-transcript {
  margin: 40px 0;
  padding: 30px;
  border: 1px solid #b4b2b2;
  border-left-width: 3px;
  border-radius: 5px;
}

.rn-transcript__title {
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 600;
  color: #000;
}

/* Positioned so a line's offsetTop is measured from the panel. */
.rn-transcript__panel {
  position: relative;
  max-height: 360px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.rn-transcript__paragraph + .rn-transcript__paragraph {
  margin-top: 12px;
}

.rn-transcript__line {
  display: flex;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 5px 8px;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 3px;
  background: transparent;
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: #000;
  text-align: left;
  cursor: pointer;
}

.rn-transcript__line:hover,
.rn-transcript__line:focus-visible {
  background: #f2f4f6;
}

.rn-transcript__line:focus-visible {
  outline: 2px solid #1585fe;
  outline-offset: -2px;
}

.rn-transcript__line.is-active {
  border-left-color: #1585fe;
  background: #e8f3ff;
}

.rn-transcript__time {
  flex: 0 0 auto;
  min-width: 3.2em;
  color: #5a6570;
  font-variant-numeric: tabular-nums;
}

.rn-transcript__text {
  flex: 1 1 auto;
  min-width: 0;
}

/* No player to drive: a list to read, not to click. */
.rn-transcript.is-static .rn-transcript__line {
  cursor: default;
}

.rn-transcript.is-static .rn-transcript__line:hover {
  background: transparent;
}

@media (max-width: 575px) {
  .rn-transcript {
    padding: 20px 14px;
  }
}