/* Přehrávač nahrávek misálu (misal-audio.js) — na celou šířku, stejný
   ve všech prohlížečích. Barvy jako tlačítka a záložky boxu mezizpěvu. */

/* Bez skriptu zůstává vestavěný přehrávač; i ten na celou šířku. */
.misal-obsah audio { width: 100%; }
.misal-obsah audio.misal-audio-native { display: none; }

.misal-audio {
    --misal-audio-accent: #8B111E;
    --misal-audio-line: #ccc;
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    margin: .25rem 0;
    font-family: inherit;
    font-size: .8rem;
    line-height: 1;
    user-select: none;
    -webkit-user-select: none;
}

.misal-audio-play {
    flex: none;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--misal-audio-line);
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: .75rem;
    line-height: 1;
    cursor: pointer;
}

.misal-audio-play:hover:not(:disabled),
.misal-audio.is-playing .misal-audio-play {
    border-color: var(--misal-audio-accent);
    color: var(--misal-audio-accent);
}

.misal-audio-play:disabled { cursor: default; opacity: .4; }

.misal-audio-time {
    flex: none;
    min-width: 2.6em;
    text-align: center;
    font-variant-numeric: tabular-nums;
    opacity: .75;
}

/* Posuvník: tenká linka s vyplněnou částí a kolečkem. Výška kvůli prstu. */
.misal-audio-track {
    position: relative;
    flex: 1 1 auto;
    height: 1.5rem;
    cursor: pointer;
    touch-action: none;
}

.misal-audio-track::before,
.misal-audio-fill {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    height: 3px;
    margin-top: -1.5px;
    border-radius: 2px;
}

.misal-audio-track::before { right: 0; background: var(--misal-audio-line); }
.misal-audio-fill { width: 0; background: var(--misal-audio-accent); }

.misal-audio-thumb {
    position: absolute;
    left: 0;
    top: 50%;
    width: .75rem;
    height: .75rem;
    margin: -.375rem 0 0 -.375rem;
    border-radius: 50%;
    background: var(--misal-audio-accent);
    transition: transform .1s;
}

.misal-audio-track:hover .misal-audio-thumb,
.misal-audio.is-seeking .misal-audio-thumb { transform: scale(1.25); }

.misal-audio-track:focus-visible { outline: 2px solid var(--misal-audio-accent); outline-offset: 2px; border-radius: 2px; }

.misal-audio.is-error .misal-audio-track,
.misal-audio.is-error .misal-audio-time:last-child { display: none; }
.misal-audio.is-error .misal-audio-time { text-align: left; }