/* LRN Player (js/lrn-player.js): replaces the browser's default <audio controls>
   on every modern page. Theme variables only, so dark / midnight / light follow. */

audio.lrn-player-media { display: none !important; }

.lrn-player {
    --lp-accent: var(--lrn-accent-primary, var(--lrn-primary, #5ba3ff));
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 2.75rem;
    padding: .35rem .65rem .35rem .4rem;
    border: 1px solid var(--lrn-border-color, rgba(127, 127, 127, .25));
    border-radius: 999px;
    background: var(--lrn-bg-tertiary, rgba(127, 127, 127, .08));
    color: var(--lrn-text-secondary, inherit);
    font-variant-numeric: tabular-nums;
    user-select: none;
}

.lrn-player-btn {
    flex: 0 0 auto;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--lp-accent);
    color: #fff;
    cursor: pointer;
    font-size: .85rem;
    transition: transform .08s ease, filter .12s ease;
}
.lrn-player-btn:hover { filter: brightness(1.1); }
.lrn-player-btn:active { transform: scale(.94); }
.lrn-player-btn .fa-play { margin-left: .12rem; }  /* optical centring */
.lrn-player-btn:focus-visible,
.lrn-player-mute:focus-visible,
.lrn-player-bar:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 2px; }

.lrn-player-time { flex: 0 0 auto; font-size: .8rem; min-width: 2.4rem; text-align: center; color: var(--lrn-text-muted, inherit); }
.lrn-player-cur { color: var(--lrn-text-primary, inherit); }

.lrn-player-bar {
    position: relative;
    flex: 1 1 auto;
    height: 1.4rem;
    cursor: pointer;
    touch-action: none;
}
.lrn-player-bar::before,
.lrn-player-buf,
.lrn-player-fill {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    height: 4px;
    margin-top: -2px;
    border-radius: 4px;
}
.lrn-player-bar::before { right: 0; background: var(--lrn-border-color, rgba(127, 127, 127, .3)); }
.lrn-player-buf { width: 0; background: rgba(127, 127, 127, .35); }
.lrn-player-fill { width: 0; background: var(--lp-accent); }
.lrn-player-knob {
    position: absolute;
    top: 50%;
    left: 0;
    width: .8rem;
    height: .8rem;
    margin: -.4rem 0 0 -.4rem;
    border-radius: 50%;
    background: var(--lp-accent);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .15);
    transform: scale(0);
    transition: transform .12s ease;
}
.lrn-player:hover .lrn-player-knob,
.lrn-player.is-playing .lrn-player-knob,
.lrn-player-bar:focus-visible .lrn-player-knob { transform: scale(1); }

.lrn-player-mute {
    flex: 0 0 auto;
    border: 0;
    background: none;
    color: var(--lrn-text-muted, inherit);
    cursor: pointer;
    padding: .25rem;
    font-size: .85rem;
}
.lrn-player-mute:hover { color: var(--lrn-text-primary, inherit); }

.lrn-player.is-empty { opacity: .55; }
.lrn-player.is-empty .lrn-player-btn { cursor: default; filter: grayscale(.6); }
.lrn-player.is-loading .lrn-player-btn i::before { content: "\f110"; }   /* spinner glyph */
.lrn-player.is-loading .lrn-player-btn i { animation: lrn-player-spin 1s linear infinite; }
.lrn-player.is-error { border-color: var(--lrn-danger, #ff5f6d); }
.lrn-player.is-error .lrn-player-btn { background: var(--lrn-danger, #ff5f6d); }

@keyframes lrn-player-spin { to { transform: rotate(360deg); } }

@media (max-width: 480px) {
    .lrn-player { gap: .4rem; padding-right: .45rem; }
    .lrn-player-mute { display: none; }
}