/* The recording player - shared_components/audio_player.html. One figure per
   recording: the head names it (主讲 / 答疑 and the length), the browser's
   own controls play it, the row under it is the speed and the way back to
   where the listener was. Colours lean on the page's text colour so it sits
   on whichever paper it is put on. */
.audio-rec-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.audio-rec {
  margin: 0;
  padding: 0;
}

.audio-rec__head {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.92em;
  gap: 0 10px;
  margin-bottom: 6px;
}

.audio-rec__part {
  font-weight: 600;
}

.audio-rec__title {
  min-width: 0;
  opacity: 0.8;
  overflow-wrap: anywhere;
}

.audio-rec__length {
  font-variant-numeric: tabular-nums;
  margin-left: auto;
  opacity: 0.65;
}

.audio-rec__audio {
  display: block;
  width: 100%;
}

.audio-rec__tools {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.85em;
  gap: 4px;
  margin-top: 6px;
}

.audio-rec__label {
  margin-right: 4px;
  opacity: 0.65;
}

.audio-rec__rate {
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  opacity: 0.6;
  padding: 3px 9px;
}

.audio-rec__rate:hover,
.audio-rec__rate:focus-visible {
  opacity: 1;
}

.audio-rec__rate.is-on {
  background: #2f3a2f;
  border-color: #2f3a2f;
  color: #fff;
  opacity: 1;
}

@media (prefers-color-scheme: dark) {
  .audio-rec__rate.is-on {
    background: #e8e6df;
    border-color: #e8e6df;
    color: #1d1d1d;
  }
}

.audio-rec__resume {
  margin-left: auto;
}

.audio-rec__resume-link {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.audio-rec__error {
  font-size: 0.9em;
  margin: 6px 0 0;
  opacity: 0.8;
}