/* 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 speed sits faint in the head, and the row under
   it appears only to offer 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;
}

/* The speed: a faint figure in the middle of the head row (the two auto
   margins split the space between the name and the length) naming the current
   speed, the five choices dropping down under it when it is opened. */
.audio-rec__speed {
  margin-left: auto;
  position: relative;
}

.audio-rec__speed-menu {
  left: 50%;
  transform: translateX(-50%);
}

.audio-rec__speed[hidden] {
  display: none;
}

.audio-rec__speed-now {
  cursor: pointer;
  font-size: 0.85em;
  font-variant-numeric: tabular-nums;
  list-style: none;
  opacity: 0.45;
  white-space: nowrap;
  user-select: none;
}

.audio-rec__speed-now::-webkit-details-marker {
  display: none;
}

.audio-rec__speed-now:hover,
.audio-rec__speed-now:focus-visible,
.audio-rec__speed[open] .audio-rec__speed-now {
  opacity: 0.9;
}

.audio-rec__speed-menu {
  align-items: center;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  box-shadow: 0 8px 20px -8px rgba(40, 30, 10, 0.4);
  display: flex;
  font-size: 0.92rem;
  gap: 6px;
  padding: 6px;
  position: absolute;
  top: calc(100% + 6px);
  z-index: 3;
}

/* Opened, the choices are for a finger, not a mouse: each one a full pill. */
.audio-rec__speed-menu .audio-rec__rate {
  min-height: 32px;
  min-width: 44px;
  padding: 6px 10px;
}

@media (prefers-color-scheme: dark) {
  .audio-rec__speed-menu {
    background: #2a2a28;
    border-color: rgba(255, 255, 255, 0.14);
  }
}

.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;
}