/* Host positions this compact strip near its existing toolbar. No page/verse styles. */
.direct-ayah-listen { box-sizing: border-box; max-inline-size: min(32rem, calc(100vw - 1.5rem)); padding: .8rem 1rem; border: 1px solid var(--line, #d5cbb8); border-radius: 1rem; background: var(--paper, #fffdf7); color: var(--ink, #273b36); box-shadow: 0 .4rem 1.5rem #0002; font: inherit; }
.direct-ayah-listen[hidden], .direct-ayah-listen [hidden] { display: none !important; }
.direct-ayah-title, .direct-ayah-status { margin: 0 0 .5rem; line-height: 1.6; }
.direct-ayah-title { font-weight: 700; font-size: calc(.9rem * var(--ui-text-scale,1)); }
.direct-ayah-status { font-size: calc(.9rem * var(--ui-text-scale,1)); }
.direct-ayah-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.direct-ayah-actions button { font: inherit; min-block-size: 2.75rem; padding: .4rem .8rem; border: 1px solid currentColor; border-radius: .65rem; background: transparent; color: inherit; cursor: pointer; }
.direct-ayah-actions button:focus-visible, .ayah-reciter-settings select:focus-visible { outline: 3px solid var(--accent, #547566); outline-offset: 3px; }
.ayah-reciter-settings label { display: grid; gap: .45rem; }
.ayah-reciter-settings select { inline-size: 100%; min-block-size: 2.75rem; padding: .35rem; font: inherit; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: .5rem; }
.ayah-reciter-settings .fine { font-size: calc(.85rem * var(--ui-text-scale,1)); line-height: 1.7; }
/* Reader-owned position; keeps the approved page size and scroll geometry. */
#direct-ayah-root{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--visual-bottom,0px) + env(safe-area-inset-bottom) + 78px);width:min(480px,calc(100% - 24px));z-index:16;padding:8px 12px}
.reading #direct-ayah-root{bottom:calc(var(--visual-bottom,0px) + env(safe-area-inset-bottom) + 8px)}
#direct-ayah-root .direct-ayah-title{font-size:calc(11px * var(--ui-text-scale,1));font-weight:400;margin:0}
#direct-ayah-root .direct-ayah-status{font-size:calc(11px * var(--ui-text-scale,1));margin:0}
#direct-ayah-root .direct-ayah-actions{justify-content:flex-end;gap:6px}
#direct-ayah-root .direct-ayah-actions button{font-size:calc(12px * var(--ui-text-scale,1));min-width:44px;padding:4px 10px}