/* Compact native-like recording. Native UI uses system fonts (constants/fonts.ts). */
.reader-rail .sidebar-utility:has(#voice-search){margin-block:12px;padding:16px 12px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.reader-rail .sidebar-utility:has(#voice-search) .dialog-head{align-items:center;margin-bottom:14px}
.reader-rail .sidebar-utility:has(#voice-search) .dialog-head h2{font:600 17px/1.4 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:-.2px}
:is(#voice-search,#practice-capture){font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-width:0}
:is(#voice-search,#practice-capture) .voice-lead{margin:0 0 16px;font-size:15px;line-height:1.55;color:var(--ink)}
:is(#voice-search,#practice-capture) .voice-live{display:flex;align-items:center;gap:10px;min-width:0;margin-bottom:18px}
:is(#voice-search,#practice-capture) .voice-mic{display:flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border-radius:50%;color:var(--accent);background:var(--surface2)}
:is(#voice-search,#practice-capture) .voice-mic svg{width:24px;height:24px}
:is(#voice-search,#practice-capture) .voice-clock{min-width:0;flex:1}
:is(#voice-search,#practice-capture) :is(#voice-duration,#practice-recording-time){display:block;font-size:32px;line-height:1.2;font-weight:300;letter-spacing:-1px;font-variant-numeric:tabular-nums;color:var(--ink);direction:ltr}
:is(#voice-search,#practice-capture) :is(#voice-status,#practice-status){margin:4px 0 0;padding:0;border:0;border-radius:0;background:none;font-size:13px;line-height:1.5;font-weight:400;color:var(--muted)}
:is(#voice-search,#practice-capture) .voice-meter{display:flex;align-items:center;justify-content:center;gap:3px;flex:none;width:27px;height:32px;color:var(--accent)}
:is(#voice-search,#practice-capture) .voice-meter span{width:3px;height:3px;background:currentColor;border-radius:2px;transition:height .16s}
:is(#voice-search,#practice-capture) .voice-submit{width:100%;min-height:46px;padding:11px 12px;margin:0;border:0;font:600 14px/1.5 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;white-space:normal}
:is(#voice-search,#practice-capture) .voice-model-note{margin:12px 0 0;font-size:12px;line-height:1.55;color:var(--muted)}
:is(#voice-search,#practice-capture)[data-state=processing] .voice-mic,:is(#voice-search,#practice-capture)[data-state=processing] .voice-meter{color:var(--muted)}
:is(#voice-search,#practice-capture)[data-state=error] .voice-mic{color:#F09389}
@media(prefers-reduced-motion:reduce){:is(#voice-search,#practice-capture) .voice-meter span{transition:none}}

/* On phones, use the native-style temporary recording sheet, not a card hidden
   behind the full-width explanation. The underlying book grid remains untouched. */
@media(max-width:699px){
 dialog:has(#voice-search){position:fixed;inset:auto 12px max(12px,env(safe-area-inset-bottom));margin:0;width:calc(100% - 24px);max-width:none;max-height:calc(100dvh - 24px);padding:22px;border-radius:20px;border:1px solid var(--line);background:var(--surface)}
 dialog:has(#voice-search) .dialog-head{position:static;align-items:center;gap:12px;margin:0 0 16px;padding:0;background:none}
 dialog:has(#voice-search) .dialog-head h2{font:600 18px/1.4 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:-.2px}
 dialog:has(#voice-search) .dialog-head .icon-button{width:36px;height:36px;min-height:36px}
}

/* Different states: ordinary verse selection is blue; only the current spoken
   word uses the app's warm PAGE_SELECTION.word palette. No blanket ayah tint
   is applied to canonical Arabic inside the explanation. */
body.is-reading{--verse-selection-marker:rgba(37,65,143,.2);--native-word-marker:rgba(214,160,70,.5)}
body.is-reading:has(.reader-paper.tone-sepia){--native-word-marker:rgba(200,144,46,.5)}
body.is-reading:has(.reader-paper.tone-dark){--verse-selection-marker:rgba(157,178,245,.22);--native-word-marker:rgba(235,194,124,.45)}
body.is-reading #reader-content .glyph-verse.is-selected,body.is-reading #reader-content .glyph-verse.is-playing{background:var(--verse-selection-marker)}
body.is-reading #reader-content .glyph-verse:is(.is-playing,.is-selected):has(.qword.word-playing){background:transparent}
body.is-reading #verse-context .context-verse.current-verse .context-ref{border-color:#9DB2F5}
body.is-reading #reader-content .qword.word-playing,body.is-reading #verse-context .qword.word-playing{background:var(--native-word-marker);color:inherit;box-shadow:none;text-shadow:none}
body.is-reading .ayah.is-selected{background:var(--verse-selection-marker);box-shadow:none}