/* The site player's sound (templates/player.php, $cil_volume; assets/volume.js): the speaker that mutes
   and unmutes, and the level beside it. Figma 14526-2 has no row for it, so it takes the player's own
   style: a bare 36px button like the bar's close, a level that is the progress slider at a smaller size
   (it fills from the reading start, player.css). In the docked bar it sits beside the speed; on a phone it
   is a row of its own under the controls of the full player. Loaded after player.css. */

.cil-pod-volume { display: flex; align-items: center; gap: 4px; }
.cil-splayer .cil-pod-volume__mute {
    flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
    background: none; color: var(--cil-black); cursor: pointer;
}
/* Pinned against the theme's green button:hover; the speaker's own motion is the hover. */
.cil-splayer .cil-pod-volume__mute:is(:hover, :focus-visible) { background: none; color: var(--cil-black); outline: none; }
.cil-splayer .cil-pod-volume__mute:focus-visible { outline: 2px solid var(--cil-blue-dark-1); outline-offset: 2px; }
/* The sound goes out towards the level, which follows it in the page's direction: in Hebrew and Arabic the
   speaker is mirrored so its waves face left, along the level (as the skip arrows are, player.css). */
.cil-pod-volume__icon { display: block; overflow: visible; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transform: scaleX(-1); }
.lang-to-css-ltr .cil-pod-volume__icon { transform: none; }
.cil-pod-volume__level { flex: none; }
.cil-splayer .cil-pod-volume--bar .cil-pod-volume__level { width: 88px; }
/* The level as a number: a fixed width ("100%") so the slider never shifts as it changes. */
.cil-pod-volume__value {
    flex: none; min-width: 4ch; font-size: 12px; line-height: 1; color: var(--cil-black);
    font-variant-numeric: tabular-nums; text-align: center;
}

/* The level in the speaker: two waves when high, the far one gone when low, a cross instead when muted. */
.cil-pod-volume__wave, .cil-pod-volume__cross { transform-box: fill-box; transition: opacity .2s ease, transform .3s var(--pod-out); }
.cil-pod-volume__wave { transform-origin: left center; }
.cil-pod-volume__cross { transform-origin: center; opacity: 0; transform: rotate(-90deg) scale(.4); }
.cil-pod-volume[data-level="low"] .cil-pod-volume__wave--far,
.cil-pod-volume[data-level="muted"] .cil-pod-volume__wave { opacity: 0; transform: scale(.5); }
.cil-pod-volume[data-level="muted"] .cil-pod-volume__cross { opacity: 1; transform: none; }

/* Pointed at: the sound goes out -- each wave in turn steps outward and back; muted, the cross turns a quarter. */
.cil-splayer .cil-pod-volume:not([data-level="muted"]) .cil-pod-volume__mute:is(:hover, :focus-visible) .cil-pod-volume__wave { animation: cil-pod-wave .9s var(--pod-out) infinite; }
.cil-splayer .cil-pod-volume:not([data-level="muted"]) .cil-pod-volume__mute:is(:hover, :focus-visible) .cil-pod-volume__wave--far { animation-delay: .15s; }
@keyframes cil-pod-wave { 0%, 100% { transform: none; } 45% { transform: translateX(1.5px); } }
.cil-splayer .cil-pod-volume[data-level="muted"] .cil-pod-volume__mute:is(:hover, :focus-visible) .cil-pod-volume__cross { transform: rotate(90deg); }

/* A device that sets loudness only with its own buttons: mute alone (volume.js). */
.cil-splayer.is-fixed-volume :is(.cil-pod-volume__level, .cil-pod-volume__value) { display: none; }

/* The phone's full player: centred under the controls; it goes with them when the file fails. */
.cil-pod-volume--full { justify-content: center; gap: 8px; }
.cil-splayer .cil-pod-volume--full .cil-pod-volume__level { width: 160px; }
.cil-splayer.is-failed .cil-pod-full > .cil-pod-volume { display: none; }

/* A narrower desktop: the level gives way first, so the bar's middle keeps its room; mute stays. */
@media (max-width: 1279px) {
    .cil-splayer .cil-pod-volume--bar :is(.cil-pod-volume__level, .cil-pod-volume__value) { display: none; }
}
/* The phone's compact bar has no room: sound is in the full player. */
@media (max-width: 640px) {
    .cil-pod-player .cil-pod-volume--bar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .cil-pod-volume__wave, .cil-pod-volume__cross { transition: opacity .2s ease; }
    .cil-splayer .cil-pod-volume__mute .cil-pod-volume__wave { animation: none !important; }
    .cil-splayer .cil-pod-volume[data-level="muted"] .cil-pod-volume__mute:is(:hover, :focus-visible) .cil-pod-volume__cross { transform: none; }
}