/* مشغّل الفويس بالموجات (مشترك بين الدليل واللوحة). الألوان: --sw-on (اللون الأساسي) و --sw-off و --sw-ink */
.sw{--sw-on:var(--accent,#0955f9);--sw-off:color-mix(in srgb,currentColor 22%,transparent);--sw-ink:#fff;--p:0;display:flex;align-items:center;gap:12px;min-width:0;user-select:none;-webkit-user-select:none}
.sw__play{position:relative;flex:none;display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:999px;background:var(--sw-on);color:var(--sw-ink);cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.12),0 4px 12px color-mix(in srgb,var(--sw-on) 30%,transparent);transition:transform .15s cubic-bezier(.2,.8,.2,1)}
.sw__play:active{transform:scale(.93)}
.sw__play svg{width:18px;height:18px;fill:currentColor;overflow:visible}
.sw__play svg>*{transform-origin:12px 12px;transition:opacity .18s,transform .22s cubic-bezier(.2,.8,.2,1)}
.sw-i-pause{opacity:0;transform:scale(.6)}
.sw.is-playing .sw-i-play{opacity:0;transform:scale(.6) rotate(-30deg)}
.sw.is-playing .sw-i-pause{opacity:1;transform:none}
.sw__spin{position:absolute;inset:-3px;border-radius:999px;opacity:0;background:conic-gradient(from 0deg,transparent 0 62%,var(--sw-on) 100%);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px));transition:opacity .2s;pointer-events:none}
.sw.is-loading .sw__spin{opacity:1;animation:sw-spin .8s linear infinite}
@keyframes sw-spin{to{transform:rotate(360deg)}}
.sw__track{position:relative;flex:1;min-width:0;height:34px;cursor:pointer;touch-action:none;border-radius:6px}
.sw__track:focus-visible{outline:2px solid var(--sw-on);outline-offset:3px}
.sw__bars{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;gap:2px;pointer-events:none}
.sw__bars i{flex:0 1 3px;min-width:1.5px;height:var(--h);min-height:3px;border-radius:99px;background:var(--sw-off);transition:height .12s ease-out}
.sw__bars--on i{background:var(--sw-on)}
/* التقدّم: يملى من بداية السطر (يمين بالعربي) */
.sw__bars--on{clip-path:inset(0 calc((1 - var(--p)) * 100%) 0 0)}
[dir=rtl] .sw__bars--on{clip-path:inset(0 0 0 calc((1 - var(--p)) * 100%))}
.sw__head{position:absolute;top:50%;left:calc(var(--p) * 100%);width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:999px;background:var(--sw-on);box-shadow:0 0 0 2.5px var(--sw-bg,#fff),0 1px 4px rgba(0,0,0,.25);opacity:0;transform:scale(.4);transition:opacity .15s,transform .2s cubic-bezier(.2,.8,.2,1);pointer-events:none}
[dir=rtl] .sw__head{left:auto;right:calc(var(--p) * 100%);margin:-5.5px -5.5px 0 0}
.sw.is-playing .sw__head,.sw.is-scrubbing .sw__head,.sw__track:hover .sw__head,.sw__track:focus-visible .sw__head{opacity:1;transform:none}
.sw.is-scrubbing .sw__head{transform:scale(1.25)}
.sw__meta{flex:none;display:grid;justify-items:center;gap:3px;min-width:38px}
.sw__time{font-size:12px;font-variant-numeric:tabular-nums;color:inherit;opacity:.65;line-height:1;direction:ltr;white-space:nowrap}
.sw.is-error .sw__time{color:#d92d33;opacity:1;font-size:11px}
.sw__rate{min-width:30px;height:20px;padding:0 6px;border:0;border-radius:999px;background:var(--sw-off);color:inherit;font:inherit;font-size:10.5px;font-weight:700;font-variant-numeric:tabular-nums;cursor:pointer;direction:ltr;opacity:.75;transition:background .15s,color .15s,opacity .15s}
.sw.is-fast .sw__rate{background:var(--sw-on);color:var(--sw-ink);opacity:1}
.sw--compact{gap:9px}
.sw--compact .sw__play{width:32px;height:32px;box-shadow:none}
.sw--compact .sw__play svg{width:14px;height:14px}
.sw--compact .sw__track{height:26px}
.sw--compact .sw__meta{min-width:32px}
@media (prefers-reduced-motion:reduce){.sw *{transition:none!important;animation:none!important}}