/* AUDIO-LISTEN-01: the /listen page. Loaded only there (AUDIO_PLAYER on). Colours are the site's tokens. */
[data-ls][hidden], .ls-text[hidden], .ls-resume[hidden], .ls-device[hidden], .ls-progress[hidden] { display: none; }
.ls-wrap { max-width: 44rem; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
.ls-h { margin: .25rem 0 .4rem; }
.ls-lede { margin: 0 0 1rem; color: var(--graphite); }
.ls-player { border: 1px solid var(--line); border-radius: 6px; padding: .75rem .9rem; background: var(--paper); }
.ls-pick { display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
.ls-pick label, .ls-follow label { display: inline-flex; align-items: center; gap: .4rem; min-width: 0; max-width: 100%; font-size: .95rem; }
.ls-pick select, .ls-follow select { min-height: 44px; min-width: 0; max-width: 100%; font: inherit; flex: 1 1 auto; }
.ls-pick label { flex: 1 1 15rem; }
.ls-buttons { display: flex; gap: .5rem; margin: .75rem 0 .5rem; }
.ls-btn { min-height: 44px; min-width: 44px; padding: 0 .8rem; font: inherit; cursor: pointer; }
.ls-main { min-width: 6rem; font-weight: 600; }
.ls-progress { display: flex; align-items: center; gap: .6rem; }
.ls-progress progress { flex: 1 1 auto; height: .6rem; }
.ls-pos, .ls-status, .ls-resume, .ls-credit, .ls-device, .ls-by { font-size: .85rem; color: var(--graphite); }
.ls-status { min-height: 1.2em; margin: .35rem 0 0; }
.ls-follow { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin: .6rem 0 0; }
.ls-text { margin: .75rem 0 0; padding: .6rem 0 0; border-top: 1px solid var(--line); }
.ls-ar { font-size: 1.6rem; line-height: 2; margin: 0 0 .4rem; }
.ls-tr { margin: 0 0 .25rem; }
.ls-credit { margin: .6rem 0 0; }
.ls-list { columns: 2 16rem; padding-left: 0; list-style: none; }   /* the number is in each line's text; no second number */
.ls-list li { break-inside: avoid; margin: .15rem 0; }
.ls-en { color: var(--graphite); font-size: .9rem; }
@media (max-width: 639.98px) { .ls-buttons .ls-btn { flex: 1 1 0; padding: 0 .4rem; } .ls-list { columns: 1; } }
/* LISTEN-LANGS-01: the reciters as a list of choices - each FULL name shows and wraps at every width (no menu box to cut it off);
   44 px tap rows. The follow-along's credit sits at its top, once; the verse text in its own direction (Urdu right to left). */
.ls-reciters { flex: 1 1 100%; margin: 0; padding: 0; border: 0; min-width: 0; }
.ls-reciters legend { padding: 0; margin: 0 0 .2rem; font-size: .95rem; }
.ls-rc { display: flex; align-items: center; gap: .5rem; min-height: 44px; font-size: .95rem; overflow-wrap: anywhere; cursor: pointer; }
.ls-rc input { flex: none; width: 1.1rem; height: 1.1rem; margin: 0; }
.ls-rc span { min-width: 0; }
.ls-text .ls-by { margin: 0 0 .15rem; }
.ls-text .ls-by + .ls-ar, .ls-text [data-ls-from] + .ls-ar { margin-top: .4rem; }
.ls-tr[dir="rtl"] { text-align: right; }
[data-ls-from][hidden] { display: none; }
/* LISTEN-LANGS-01, Anwar's word of 16 Oct 2026: the QuranEnc credit and version line, the closed Sources and the translator's note are
   the site's smallest text (--t-xs) in its muted ink (--ink-soft: 4.5:1 or better on the paper in both themes). The Arabic and the
   translation keep their sizes. The note is visually separate from the verse (the footnotes ruling of 2 Oct). */
.ls-small, .ls-small p, .ls-note .tr-note-h, .ls-note .tr-note-body { font-size: var(--t-xs); line-height: 1.45; color: var(--ink-soft); }
.ls-text .ls-by.ls-small { margin: 0 0 .1rem; }
.ls-note { margin: .5rem 0 0; padding: .35rem .6rem; border-left: 2px solid var(--line); }
.ls-note[hidden], [data-ls-by][hidden] { display: none; }
.ls-note .tr-note-h { margin: 0 0 .15rem; font-weight: 600; }
.au-src.ls-small { margin: .6rem 0 0; }
.au-src.ls-small > 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-src.ls-small p { margin: .2rem 0 0; overflow-wrap: anywhere; }
/* LISTEN-STANDALONE-01: the surah playing, marked in the list; the slim bar that keeps the player reachable while the list scrolls (fixed
   at the foot of the screen like the verse player's bar; 44 px targets; shown by the script only while a surah plays and the full player
   is out of view). */
.ls-mini { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem;
           padding: .35rem .75rem .45rem; background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 -2px 8px rgba(0,0,0,.06); }
.ls-mini[hidden] { display: none; }
.ls-mini-now { flex: 1 1 14rem; min-width: 0; min-height: 44px; padding: 0; border: 0; background: none; font: inherit; font-size: .9rem;
               text-align: left; color: var(--ink); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ls-mini-btns { display: flex; gap: .35rem; flex: 1 1 18rem; }
.ls-mini-btns .ls-btn { flex: 1 1 0; padding: 0 .4rem; font-size: .9rem; }
body.ls-has-mini { padding-bottom: 7.5rem; }
/* LISTEN-STANDALONE-01 r2 (Anwar, 16 Oct 2026). 1: the reciter and surah menus full width, so a desktop shows the full names. 2: the easy-read
   line between the Arabic and the translation, the reading pages' layer style (L-tl). 4: with scripts on the list's rows read as play rows
   - a small play mark, no underline; scripts off, they stay plain links. 5: on a phone the compact bar is one line of icons, each button
   keeping its spoken label. */
.ls-pick label.ls-full { flex: 1 1 100%; display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); align-items: center; gap: .4rem; }
.ls-pick label.ls-full select { width: 100%; min-width: 0; }   /* one grid: the Reciter and Surah boxes are the same width whatever their labels */
.ls-tl { margin: 0 0 .35rem; }
.ls-tl[hidden] { display: none; }
.ls-list.ls-playable a { text-decoration: none; color: var(--ink); }
.ls-list.ls-playable a::before { content: "\25B6"; display: inline-block; width: 1.1em; font-size: .7em; vertical-align: .1em; color: var(--ink-soft); }
.ls-list.ls-playable a:hover, .ls-list.ls-playable a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.ls-list.ls-playable a[aria-current="true"] { font-weight: 600; }
.ls-list.ls-playable a[aria-current="true"]::before { content: "\25B6"; color: var(--ink); }
.ls-mini-i { display: none; font-size: 1.15rem; line-height: 1; }
@media (max-width: 639.98px) {
  .ls-mini { flex-wrap: nowrap; gap: .4rem; padding: .3rem .5rem; }
  .ls-mini-now { flex: 1 1 auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .85rem; }
  .ls-mini-btns { flex: none; }
  .ls-mini-btns .ls-btn { flex: none; min-width: 44px; padding: 0 .6rem; }
  .ls-mini-i { display: inline; }
  .ls-mini-w { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
/* POLISH-01 (seat A1; Anwar's order of 17 Oct 2026, item 3): BELOW 640px THE CHOSEN RECITER'S NAME IS SHOWN WHOLE. A box under the menu
   wraps the name and is drawn as the browser draws the menus beside it (Field, FieldText, the menu's #767676 edge; the page keeps the
   light scheme in both themes, so these hold in dark too). The menu lies over it, transparent, so a tap still opens the native picker,
   and its focus draws the ring on the box. On a phone each label (Reciter, Surah) sits over its box rather than beside it, so the name
   has the card's full width. 640px and up the wrapper takes no box of its own (display: contents) and the name is not shown: the menu
   is exactly as before. */
.ls-rec { display: contents; }
.ls-rec-name { display: none; }
@media (max-width: 639.98px) {
  .ls-pick label.ls-full { grid-template-columns: minmax(0, 1fr); gap: .25rem; }   /* the label over its box, so a name has the full width */
  .ls-rec { display: block; position: relative; min-width: 0; }
  .ls-rec > select { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
  .ls-rec-name { display: block; box-sizing: border-box; min-height: 44px; padding: .55rem 1.8rem .55rem .25rem; line-height: 1.3;
    border: 1px solid #767676; border-radius: 4px; background: Field; color: FieldText; overflow-wrap: anywhere; position: relative; pointer-events: none; }
  .ls-rec-name::after { content: ""; position: absolute; right: .6rem; top: 50%; width: .38rem; height: .38rem; margin-top: -.3rem;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
  .ls-rec:focus-within .ls-rec-name { outline: 2px solid var(--rd-gold, Highlight); outline-offset: 2px; }
}
/* POLISH-01 (Anwar, 17 Oct 2026, the added item): AT 320 "PREVIOUS SURAH" WAS CUT ("Previou"). The three buttons share the row equally
   (flex: 1 1 0), and their 44px floor let a button shrink below its longest word. On a phone each button now keeps at least the width
   of its longest word (min-width: auto, the word's own width; every one is wider than 44px). Below 380px Play's own 6rem floor (.ls-main)
   gives way too, or the row would be wider than the card. While the equal share is wide enough, as from 390, the row is as before. */
@media (max-width: 639.98px) { .ls-buttons .ls-btn:not(.ls-main) { min-width: auto; } }
@media (max-width: 379.98px) { .ls-buttons .ls-btn.ls-main { min-width: auto; } }