/*
 * Native <audio controls> elements site-wide on .redesign pages.
 *
 * The browser doesn't expose the inner controls for full custom styling
 * (each engine renders its own widget set), but we CAN brand the
 * outer chrome so the player sits cleanly on the page:
 *   - peach-tinted pill surface in WebKit / Blink
 *   - rounded corners + filter to nudge the timeline color toward brand
 *
 * Markup: any `<audio class="audio-player" controls>` picks up these
 * styles. The plain `<audio controls>` element also receives them via
 * the broader selector — they're additive, not destructive.
 */

.redesign audio,
.redesign .audio-player {
    width: 100%;
    height: 48px;
    border-radius: var(--radius-full);
    background: var(--brand-offwhite-peach);
    border: 1px solid var(--brand-border-peach);
    /* Soft tint so Chrome's stark white panel reads on-brand. */
    color-scheme: light;
}

/* Chromium / Edge — restyle the inner panel and timeline. */
.redesign audio::-webkit-media-controls-panel,
.redesign .audio-player::-webkit-media-controls-panel {
    background: var(--brand-offwhite-peach);
    border-radius: var(--radius-full);
}

.redesign audio::-webkit-media-controls-current-time-display,
.redesign audio::-webkit-media-controls-time-remaining-display,
.redesign .audio-player::-webkit-media-controls-current-time-display,
.redesign .audio-player::-webkit-media-controls-time-remaining-display {
    color: var(--text-heading);
    font-family: var(--font-body);
    font-size: 13px;
}

.redesign audio::-webkit-media-controls-play-button,
.redesign .audio-player::-webkit-media-controls-play-button {
    /* Tint the play/pause glyph toward dark slate. */
    filter: hue-rotate(180deg) saturate(0.6) brightness(0.85);
}

.redesign audio::-webkit-media-controls-mute-button,
.redesign .audio-player::-webkit-media-controls-mute-button {
    filter: hue-rotate(180deg) saturate(0.6) brightness(0.85);
}

/* Firefox doesn't expose pseudo-elements for the inner controls, so the
 * outer pill + border above is the styling we get. The native widget
 * itself remains FF's default. */

@supports (-moz-appearance: none) {
    .redesign audio,
    .redesign .audio-player {
        /* FF renders its own toolbar at ~40px tall — match it so the
         * outer pill doesn't clip the controls. */
        height: 40px;
    }
}

/* Slim variant (e.g. inside cards) — same look, smaller height. */
.redesign .audio-player--sm {
    height: 40px;
}