/* Shared, component-scoped styles for app/views/components/audio-player.php. */
.audio-player {
  width: 100%;
  max-width: 42rem;
  margin-top: 1.5rem;
  padding: 1rem;
  border: 1px solid rgb(180 83 9 / 0.25);
  border-radius: 0.75rem;
  background: rgb(255 251 235 / 0.92);
  box-shadow: 0 4px 12px rgb(120 53 15 / 0.1);
  color: #451a03;
}

.audio-player__header, .audio-player__controls, .audio-player__volume-label { display: flex; align-items: center; }
.audio-player__header { justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; }
.audio-player__title { font-weight: 600; }
.audio-player__download { font-size: 0.875rem; text-decoration: underline; }
.audio-player__controls { gap: 0.75rem; min-width: 0; }
.audio-player__toggle { min-width: 5.25rem; padding: 0.5rem 0.75rem; border-radius: 0.5rem; background: #b45309; color: #fff; font-weight: 600; }
.audio-player__toggle:hover { background: #92400e; }
.audio-player__toggle:focus-visible, .audio-player input:focus-visible, .audio-player__download:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 2px; }
.audio-player__toggle:disabled { cursor: not-allowed; opacity: 0.55; }
.audio-player__time { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-size: 0.875rem; white-space: nowrap; }
.audio-player__range-label { flex: 1 1 auto; min-width: 3rem; }
.audio-player__range { width: 100%; accent-color: #b45309; }
.audio-player__volume-label { flex: 0 1 8rem; gap: 0.25rem; min-width: 4rem; }
.audio-player__volume { width: 100%; accent-color: #b45309; }
.audio-player__error { margin-top: 0.75rem; color: #b91c1c; font-size: 0.875rem; }
.audio-player--error { border-color: #dc2626; }

@media (max-width: 30rem) {
  .audio-player__controls { display: grid; grid-template-columns: auto minmax(0, 1fr); }
  .audio-player__time { grid-column: 1 / -1; grid-row: 2; }
  .audio-player__range-label { grid-column: 2; }
  .audio-player__volume-label { grid-column: 1 / -1; grid-row: 3; max-width: 10rem; }
}