feat(audio-player): settings popover + autoplay-on-open (plan §4)

Header gear (beside the keyboard icon) opens a 'Player settings'
popover — one option row today, structured for more: 'Autoplay on
open', a role=switch toggle persisted to localStorage audio_autoplay
('1'/'0', default off) via the normalizeAutoplay one-source helper.

maybeAutoplay() runs strictly AFTER restorePosition resolves: the
?loc=audio:<seconds> deep link keeps winning on position; the setting
only decides whether playback starts. A browser autoplay-policy
rejection (or any play() failure) is swallowed silently — the user
just taps play; the unhandled-rejection trap in init would otherwise
shout 'REJ:' into the title. settingsOpen joins closeTopSurface, so
Esc closes the panel with the other surfaces.

Unit: normalizeAutoplay tests. Live: 13 Playwright checks — default
off stays paused, toggle + persistence, reload autoplays with no
gesture, deep link lands at 600s global while autoplay starts, off
stays paused, and a stubbed NotAllowedError proves the silent
swallow; probe user created and deleted.

templates/audio_reader.templ

@@ -88,6 +88,54 @@ templ AudioReader(user User, metadata ReaderMetadata) {
 							<path d="M6 8h.01M10 8h.01M14 8h.01M18 8h.01M6 12h.01M10 12h.01M14 12h.01M18 12h.01M8 16h8"></path>
 						</svg>
 					</button>
+					<div class="relative" @click.outside="settingsOpen = false">
+						<button
+							type="button"
+							@click="settingsOpen = !settingsOpen"
+							class="rounded-full p-2 hover:bg-surface-hover transition-colors"
+							:class="settingsOpen ? 'opacity-100' : 'opacity-90'"
+							style="color: var(--text-primary); border: 1px solid var(--border); background-color: color-mix(in srgb, var(--bg-secondary) 80%, transparent);"
+							aria-label="Player settings"
+							title="Settings"
+						>
+							<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+								<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"></path>
+								<circle cx="12" cy="12" r="3"></circle>
+							</svg>
+						</button>
+						<div
+							x-show="settingsOpen"
+							x-cloak
+							x-transition
+							class="absolute right-0 top-full mt-2 w-72 rounded-xl shadow-2xl p-3 z-50"
+							style="background-color: var(--bg-secondary); border: 1px solid var(--border);"
+						>
+							<div class="flex items-center justify-between mb-2 px-1">
+								<span class="text-sm font-semibold" style="color: var(--text-primary);">Player settings</span>
+								<button type="button" @click="settingsOpen = false" class="rounded-full p-1.5 hover:bg-surface-hover" style="color: var(--text-secondary);" aria-label="Close settings">
+									<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+										<path d="M18 6 6 18"></path>
+										<path d="m6 6 12 12"></path>
+									</svg>
+								</button>
+							</div>
+							<!-- Option rows: autoplay first, panel structured for more -->
+							<div class="flex items-center justify-between gap-3 px-1 py-2 rounded-lg">
+								<span class="text-sm" style="color: var(--text-secondary);">Autoplay on open</span>
+								<button
+									type="button"
+									role="switch"
+									:aria-checked="autoplayOn ? 'true' : 'false'"
+									@click="toggleAutoplay()"
+									class="relative h-5 w-9 rounded-full transition-colors shrink-0"
+									:style="autoplayOn ? 'background-color: var(--accent);' : 'background-color: var(--surface-hover); border: 1px solid var(--border);'"
+									aria-label="Autoplay on open"
+								>
+									<span class="absolute top-0.5 left-0.5 h-4 w-4 rounded-full transition-transform" :class="autoplayOn ? 'translate-x-4' : ''" style="background-color: var(--text-primary);"></span>
+								</button>
+							</div>
+						</div>
+					</div>
 				</span>
 			</div>