/* Shared recorded-audio player. Required by reference/audio-player.md. */
.audio-player.audio-player {
  display: block; background: transparent; color: #1a1a1a;
  border-radius: 0; padding: 10px 0; border-block: 1px solid #cfceca;
  margin: 2rem 0; max-width: 100%;
}
.audio-player.audio-player > [class^="audio-player__"] { color: #64645f; }
.audio-player.audio-player > audio { width: 100%; outline: revert; }
.mz-audio.mz-audio {
  --audio-ink: #1a1a1a; --audio-quiet: #64645f; --audio-rule: #cfceca;
  --audio-accent: var(--page-colour, #8b1a2b);
  display: block; position: relative; container-type: inline-size;
  background: transparent; color: var(--audio-ink); border-radius: 0;
  padding: 10px 0; border-block: 1px solid var(--audio-rule);
  margin: 2rem 0; width: 100%; max-width: 100%;
  font-family: var(--font, 'Sofia Sans', sans-serif); font-size: 16px; line-height: 1.5;
}
.voice-card__audio .mz-audio.mz-audio { margin: 12px 0 0; }
.mz-audio *, .mz-audio *::before, .mz-audio *::after { box-sizing: border-box; }
.mz-audio [hidden] { display: none !important; }
.mz-audio button, .mz-audio select { font: inherit; color: inherit; }
.mz-audio button { cursor: pointer; touch-action: manipulation; }
.mz-audio button:focus-visible, .mz-audio summary:focus-visible,
.mz-audio select:focus-visible, .mz-audio a:focus-visible, .mz-audio input:focus-visible {
  outline: 2px solid #8b1a2b; outline-offset: 3px;
}
.mz-audio__controls {
  display: grid; grid-template-columns: 116px minmax(60px, 1fr) auto 44px;
  gap: 16px; align-items: center; min-height: 44px;
}
.mz-audio .mz-audio__play {
  display: flex; align-items: center; gap: 12px; min-height: 44px;
  border: 0; border-radius: 0; background: transparent; padding: 0;
  text-align: left; font-size: 18px; font-weight: 500; letter-spacing: 0;
}
.mz-audio__play svg { width: 16px; height: 18px; flex: none; }
.mz-audio .mz-audio__play:hover { color: var(--audio-accent); }
.mz-audio__time { color: var(--audio-quiet); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mz-audio .mz-audio__seek {
  appearance: none; -webkit-appearance: none; display: block;
  width: 100%; height: 44px; margin: 0; padding: 0; border: 0;
  background: transparent; cursor: pointer; --progress: 0%;
}
.mz-audio__seek::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(to right, var(--audio-ink) var(--progress), var(--audio-rule) var(--progress)); }
.mz-audio__seek::-moz-range-track { height: 2px; background: var(--audio-rule); }
.mz-audio__seek::-moz-range-progress { height: 2px; background: var(--audio-ink); }
.mz-audio__seek::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 8px; height: 8px; border-radius: 50%; background: var(--audio-ink); margin-top: -3px; }
.mz-audio__seek::-moz-range-thumb { width: 8px; height: 8px; border: 0; border-radius: 50%; background: var(--audio-ink); }
.mz-audio__seek:disabled { cursor: default; }
.mz-audio__seek:disabled::-webkit-slider-thumb { background: var(--audio-quiet); }
.mz-audio__options { position: relative; border: 0; margin: 0; padding: 0; }
.mz-audio .mz-audio__options > summary {
  list-style: none; min-width: 44px; min-height: 44px; display: grid;
  place-items: center; cursor: pointer; font-size: 22px; line-height: 1;
  border: 0; padding: 0; color: inherit; background: transparent;
}
.mz-audio__options > summary::-webkit-details-marker { display: none; }
.mz-audio .mz-audio__options > summary::after { content: none; }
.mz-audio__menu {
  position: absolute; z-index: 10; right: 0; top: 49px; width: 245px;
  max-width: 80cqw; padding: 16px 20px; background: var(--paper, #f7f7f5);
  border: 1px solid var(--audio-rule); box-shadow: 0 8px 24px #0000000c;
  font-size: 14px; text-align: left;
}
.mz-audio__menu label { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; }
.mz-audio__menu select { background: transparent; border: 0; padding: 8px; }
.mz-audio .mz-audio__menu a { display: flex; align-items: center; min-height: 44px; margin: 0; padding: 0; border: 0; color: var(--audio-ink); font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
.mz-audio .mz-audio__credit { color: var(--audio-quiet); font-size: 13px; line-height: 1.5; margin: 12px 0 2px; overflow-wrap: anywhere; }
.mz-audio__extras { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.mz-audio .mz-audio__extras button { background: transparent; border: 0; border-radius: 0; min-width: 44px; min-height: 44px; font-size: 13px; padding: 0 8px; }
.mz-audio__extras svg { width: 18px; height: 18px; vertical-align: middle; margin-right: 4px; }
.mz-audio .mz-audio__extras .mz-audio__rate { margin-left: auto; font-variant-numeric: tabular-nums; }
.mz-audio .mz-audio__status { font-size: 13px; color: var(--audio-quiet); margin: 4px 0 0; }
.mz-audio .mz-audio__caption { font-size: 16px; line-height: 1.5; font-weight: 400; margin: 0 0 12px; color: var(--audio-ink); }
.mz-audio__status:empty { display: none; }
@container (max-width: 460px) {
  .mz-audio__controls { grid-template-columns: 1fr auto 44px; gap: 0 12px; }
  .mz-audio__play { grid-column: 1; grid-row: 1; }
  .mz-audio__time { grid-column: 2; grid-row: 1; }
  .mz-audio__options { grid-column: 3; grid-row: 1; }
  .mz-audio__seek { grid-column: 1 / -1; grid-row: 2; }
}
/* Older browsers without container queries use the safe compact arrangement. */
@supports not (container-type: inline-size) {
  .mz-audio__controls { grid-template-columns: 1fr auto 44px; gap: 0 12px; }
  .mz-audio__play { grid-column: 1; grid-row: 1; }
  .mz-audio__time { grid-column: 2; grid-row: 1; }
  .mz-audio__options { grid-column: 3; grid-row: 1; }
  .mz-audio__seek { grid-column: 1 / -1; grid-row: 2; }
  .mz-audio__menu { max-width: 245px; }
}