/* AUDIO-PLAYER-01 r2: the recitation bar (one slim row, shown only while playing) and the verse playing. Loaded only where
   AUDIO_PLAYER is on. Colours are the site's tokens. */
/* HIDDEN MEANS HIDDEN: .va-btn sets display:inline-flex (style.css), which beats the hidden attribute; without this a Play button
   would show with scripting off (the gate's P4 found it). The rule is stronger than .va-btn and changes nothing else. */
[data-au-js][hidden], .au-bar[hidden], .au-btn[hidden], .au-credit-full[hidden] { display: none; }
.au-bar { position: sticky; bottom: 0; z-index: 20; margin: 1rem 0 0; padding: .25rem .75rem .3rem;
          background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 -2px 8px rgba(0,0,0,.06); }
.au-row { display: flex; flex-wrap: nowrap; align-items: center; gap: .5rem; min-height: 44px; }
.au-row select { flex: 1 1 0; min-width: 0; max-width: 22rem; min-height: 44px; font: inherit; font-size: .9rem; text-overflow: ellipsis; }
.au-btn { flex: none; min-height: 44px; min-width: 44px; padding: 0 .7rem; font: inherit; font-size: .9rem; cursor: pointer; }
.au-status { flex: none;   /* the status is never truncated; the menu gives way (r2: it may truncate) */
              font-size: .85rem; color: var(--graphite); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* LISTEN-LANGS-01 (Anwar, 16 Oct 2026): the recitation's credit, once, in a closed "Sources" under the row, in the site's smallest text
   (--t-xs) and its muted ink (--ink-soft: 4.5:1 or better on the paper in both themes); it wraps when opened. */
.au-src { margin: .1rem 0 0; font-size: var(--t-xs); line-height: 1.4; color: var(--ink-soft); }
.au-src > summary { cursor: pointer; min-height: 24px; display: list-item; width: max-content; max-width: 100%; }   /* list-item keeps the disclosure marker (flex removed it: the phone shots read "Sources" as plain text) */
.au-credit { margin: .15rem 0 .1rem; overflow-wrap: anywhere; }
[data-au-on] { outline: 2px solid var(--madder); outline-offset: 6px; border-radius: 4px; }
/* ONE ROW AT 390 (r2 item 3): with Play added, the verse page's row (2:255 · Copy verse · Share · ▶ Play) needed 324.8 px of 324;
   the buttons of a row that carries Play are 5 px narrower each side below 640 px. Tap targets stay 44 px tall. Main's rows, and
   every row on a page without the player, are untouched (this file loads only with AUDIO_PLAYER on). */
@media (max-width: 639.98px) { .au-bar { padding: .2rem .5rem .25rem; } .au-row { gap: .35rem; } .au-btn { padding: 0 .55rem; }
  .va:has([data-au-play]) .va-btn { padding-left: .2rem; padding-right: .2rem; } }
/* NARROW (board option A, 15 Oct 2026): below 360 px Play shows "▶" alone so the row stays ONE line at 320 (rule 8 measures 320; the
   verse page's row is 254 px there and the four labels needed 281). The word stays in the text and the spoken label, visually hidden
   only; the button keeps its 44 px height and body-size font. Its width is the glyph and the row's padding (~24 px, WCAG 2.2's
   24 px minimum target). THIS IS BELOW THE SITE'S 44 x 44 px (style.css .va-btn min-width:44px), for Play alone and below 360 px only: on
   the verse page the row is 254 px at 320 (main 16 px + plate 16 px each side) and 2:255 + Copy verse + Share + a 44 px Play is 268. */
@media (max-width: 359.98px) { .va .va-btn.va-play { min-width: 24px; padding-left: .2rem; padding-right: .2rem; }
  .va-play .va-play-w { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } }