/* Chapter bar (static/js/chapter-bar.js): its own file because the public
   pages (community, shared files and folders) load it without app.css. */

/* ─── Chapter bar (static/js/chapter-bar.js) ─────────────────────────────
   The episode player: its own controls in a row (the browser's <audio
   controls> are only the no-script fallback), then the timeline cut at the
   chapters — one segment per chapter, the gaps are the chapter starts (as in
   the Hopp player). Each segment is a button with a taller hit area than the
   6px bar it draws; the track reads the outline token (3:1 against the
   surface), the played part and the play button the main action's colour. */
.chapter-bar { display: flex; flex-direction: column; gap: 4px; }
.chapter-bar[hidden] { display: none; }
.chapter-bar-controls { display: flex; align-items: center; gap: 4px; min-width: 0; }
.chapter-bar-btn { display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 36px; height: 36px; margin: 0; padding: 0; border: 0; border-radius: 50%;
    background: transparent; color: var(--sc-on-surface); font: inherit; font-size: 0.85rem;
    font-variant-numeric: tabular-nums; cursor: pointer; }
.chapter-bar-btn .icon { width: 22px; height: 22px; }
.chapter-bar-btn[hidden] { display: none; }
a.chapter-bar-btn { text-decoration: none; }
.chapter-bar-btn:hover { background: var(--sc-surface-variant); }
.chapter-bar-btn:focus-visible { outline: 2px solid var(--sc-primary); outline-offset: 1px; }
.chapter-bar-play { width: 40px; height: 40px; margin-right: 2px;
    background: var(--sc-primary); color: var(--sc-on-primary); }
.chapter-bar-play:hover { background: var(--sc-primary); filter: brightness(1.08); }
.chapter-bar-play .icon { width: 26px; height: 26px; }
.chapter-bar-speed { width: auto; min-width: 44px; padding: 0 8px; border-radius: var(--sc-radius-pill); }
.chapter-bar-head { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: baseline; gap: 2px 8px;
    margin-left: 6px; font-size: 0.88rem; min-width: 0; }
.chapter-bar-title { font-weight: 700; color: var(--sc-on-surface); min-width: 0; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chapter-bar-title:empty, .chapter-bar-count:empty { display: none; }
.chapter-bar-count { color: var(--sc-on-surface-variant); white-space: nowrap; }
.chapter-bar-time { margin-left: auto; color: var(--sc-on-surface-variant); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chapter-bar-track { display: flex; gap: 3px; align-items: center; }
.chapter-bar-seg { position: relative; flex: 1 1 0; min-width: 4px; height: 20px; margin: 0; padding: 0;
    border: 0; background: transparent; cursor: pointer; }
.chapter-bar-seg::before,
.chapter-bar-fill { position: absolute; left: 0; top: 7px; height: 6px; border-radius: 3px; }
.chapter-bar-seg::before { content: ''; right: 0; background: var(--sc-outline); }
.chapter-bar-fill { width: 0; background: var(--sc-primary); }
.chapter-bar-seg:hover::before { background: var(--sc-on-surface-variant); }
.chapter-bar-seg:focus-visible { outline: 2px solid var(--sc-primary); outline-offset: 1px; border-radius: 4px; }
/* Narrow screens: the chapter line goes above the buttons instead of being
   squeezed between them; the speed and mute move to the right edge. */
@media (max-width: 480px) {
    .chapter-bar-controls { flex-wrap: wrap; }
    .chapter-bar-head { order: -1; flex-basis: 100%; margin: 0 0 2px; flex-wrap: nowrap; }
    .chapter-bar-speed { margin-left: auto; }
}