/* Approved player design, release 1.5. Scoped to the Quran recitation dock. */
.player-dock { left:0; right:0; width:min(700px,calc(100% - 32px)); margin-inline:auto; padding:18px 24px 16px; transform:none; border:1px solid var(--line); border-radius:24px; background:var(--card); box-shadow:0 18px 60px var(--shadow); backdrop-filter:none; text-rendering:optimizeLegibility; }
.player-dock svg { shape-rendering:geometricPrecision; }
.player-dock .surah-progress { top:-1px; left:24px; right:24px; height:2px; opacity:1; background:color-mix(in srgb,var(--text) 8%,transparent); }
.player-dock .surah-progress span { background:var(--gold); }
.player-dock .compact-dock-row { grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); min-height:62px; }
.player-dock .dock-position { display:flex; align-items:center; gap:10px; justify-self:start; }
.player-dock .dock-ayah { width:36px; height:36px; border:1px solid var(--line); border-radius:11px; font-size:15px; font-weight:500; font-variant-numeric:tabular-nums; }
.player-dock .dock-label { color:var(--muted); font-size:10px; letter-spacing:.13em; text-transform:uppercase; }
.player-dock .dock-actions { justify-self:center; gap:16px; }
.player-dock button { border-radius:50%; transition:background .2s,color .2s,transform .2s; }
.player-dock .dock-actions .skip-button { width:44px; height:44px; color:var(--gold); }
.player-dock .skip-button svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.player-dock .dock-actions .play-button { width:54px; height:54px; background:var(--gold); color:var(--page); box-shadow:0 3px 16px color-mix(in srgb,var(--shadow) 30%,transparent); }
.player-dock .play-button svg { width:23px; height:23px; fill:currentColor; stroke:none; }
.player-dock .dock-tools { justify-self:end; gap:4px; }
.player-dock .dock-tools button { width:44px; height:44px; }
.player-dock .dock-tools svg { width:22px; height:22px; stroke-width:1.65; }
.player-dock button:hover { background:color-mix(in srgb,var(--gold) 10%,transparent); }
.player-dock .play-button:hover { background:color-mix(in srgb,var(--gold) 88%,var(--text)); color:var(--page); }
.player-dock button:active { transform:scale(.95); }
.player-dock button:focus-visible,.player-dock input:focus-visible { outline:2px solid var(--gold); outline-offset:4px; border-radius:50%; }
.player-dock .timeline { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:14px; margin-top:10px; color:var(--muted); font-size:10px; font-variant-numeric:tabular-nums; }
.player-dock .timeline input { appearance:none; -webkit-appearance:none; height:24px; background:transparent; min-width:0; }
.player-dock .timeline input::-webkit-slider-runnable-track { height:3px; border-radius:3px; background:linear-gradient(to right,var(--gold) var(--seek,0%),color-mix(in srgb,var(--text) 8%,transparent) var(--seek,0%)); }
.player-dock .timeline input::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:10px; height:10px; border-radius:50%; margin-top:-3.5px; background:var(--gold); }
.player-dock .timeline input::-moz-range-track { height:3px; background:color-mix(in srgb,var(--text) 8%,transparent); }
.player-dock .timeline input::-moz-range-progress { height:3px; background:var(--gold); }
.player-dock .timeline input::-moz-range-thumb { width:10px; height:10px; border:0; border-radius:50%; background:var(--gold); }
.player-page { padding-bottom:180px; }
@media(max-width:520px) {
 .player-dock { padding:14px 12px 12px; border-radius:21px; bottom:max(18px,calc(env(safe-area-inset-bottom) + 10px)); }
 .player-dock .surah-progress { left:20px; right:20px; }
 .player-dock .compact-dock-row { min-height:56px; }
 .player-dock .dock-label { display:none; }
 .player-dock .dock-ayah { width:30px; height:30px; border-radius:9px; font-size:13px; }
 .player-dock .dock-actions { gap:2px; }
 .player-dock .dock-actions .skip-button { width:40px; height:44px; }
 .player-dock .dock-actions .play-button { width:48px; height:48px; }
 .player-dock .dock-tools { gap:0; }
 .player-dock .dock-tools button { width:36px; height:44px; }
 .player-dock .dock-tools svg { width:19px; height:19px; }
 .player-dock .timeline { gap:10px; margin:6px 4px 0; }
}
@media(prefers-reduced-motion:reduce) { .player-dock button { transition:none; } }