/* Music player with a waveform: templates/snippets/audio_player.html, static/js/pt-audio.js.
   The player always sits on Ink, in light and dark mode alike, so the amber
   bars read the same everywhere. */
.pt-audio {
    --pt-audio-progress: 0%;
    display: flex; flex-direction: column; gap: 1rem;
    padding: 1.25rem 1.25rem 1rem; border-radius: var(--pt-radius-lg, 16px);
    background: var(--pt-ink, #161616); color: #fff;
}
.pt-audio-wave {
    position: relative; height: 6.5rem; cursor: pointer; touch-action: none;
    border-radius: var(--pt-radius-sm, 8px);
}
.pt-audio-wave:focus-visible { outline: 2px solid var(--pt-accent, #FFC107); outline-offset: 4px; }
.pt-audio-wave svg { display: block; width: 100%; height: 100%; }
.pt-audio-wave rect { fill: rgba(255, 255, 255, .28); transition: fill .12s; }
.pt-audio-wave rect.is-played { fill: var(--pt-accent, #FFC107); }
.pt-audio-wave:hover rect:not(.is-played) { fill: rgba(255, 255, 255, .4); }

/* No peaks and the file could not be decoded: a progress line instead. */
.pt-audio.is-flat .pt-audio-wave { height: 2.5rem; }
.pt-audio.is-flat .pt-audio-wave::before,
.pt-audio.is-flat .pt-audio-wave::after {
    content: ""; position: absolute; left: 0; top: 50%; height: 6px; margin-top: -3px; border-radius: 3px;
}
.pt-audio.is-flat .pt-audio-wave::before { right: 0; background: rgba(255, 255, 255, .22); }
.pt-audio.is-flat .pt-audio-wave::after { width: var(--pt-audio-progress); background: var(--pt-accent, #FFC107); }
.pt-audio.is-loading .pt-audio-wave {
    background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.12), rgba(255,255,255,.04));
    background-size: 200% 100%; animation: pt-audio-shimmer 1.4s linear infinite;
}
@keyframes pt-audio-shimmer { to { background-position: -200% 0; } }

.pt-audio-bar { display: flex; align-items: center; gap: .9rem; }
.pt-audio-play {
    flex: none; width: 3rem; height: 3rem; border: 0; border-radius: 50%; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--pt-accent, #FFC107); color: var(--pt-ink, #161616); transition: transform .12s, background .12s;
}
.pt-audio-play:hover { background: var(--pt-accent-hover, #E0A800); transform: scale(1.05); }
.pt-audio-play:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.pt-audio-play .material-icons { font-size: 1.9rem; margin: 0; }
.pt-audio-time { font: 500 .875rem/1 var(--pt-font-mono, monospace); font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .78); }
.pt-audio-volume { margin: 0 0 0 auto; display: inline-flex; align-items: center; gap: .4rem; color: rgba(255, 255, 255, .7); }
.pt-audio-volume .material-icons { font-size: 1.25rem; }
.pt-audio-volume input { width: 6rem; accent-color: var(--pt-accent, #FFC107); }
@media (max-width: 480px) {
    .pt-audio { padding: 1rem .9rem .85rem; }
    .pt-audio-wave { height: 5rem; }
    .pt-audio-volume input { width: 4.5rem; }
}