/* The sound control (src/sound.js), shared by the roost and the paint tool;
   each page places #sound itself. PerzKit tokens. */
.sound { position: relative; display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: var(--perz-surface); border: 2px solid var(--perz-border); box-shadow: 0 4px 0 var(--perz-outline); }
.sound button { all: unset; box-sizing: border-box; cursor: pointer; display: grid; place-items: center; color: var(--perz-text); border-radius: 999px; }
.sound button:focus-visible { outline: var(--perz-control-focus-width) solid var(--perz-text); outline-offset: 2px; }
.sound .sound-toggle { width: 36px; height: 36px; }
.sound .sound-toggle.muted { color: var(--perz-text-secondary); }
.sound .sound-more { width: 22px; height: 36px; color: var(--perz-text-secondary); }
.sound svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sound .sound-more svg { width: 14px; height: 14px; }
.sound-pop { position: absolute; left: 0; bottom: calc(100% + 10px); padding: 12px 16px; width: 200px; box-shadow: 0 var(--perz-effect-panel-depth) 0 var(--perz-outline); }
.sound-pop[hidden] { display: none; }
.sound-pop label { display: grid; gap: 6px; font-size: 14px; }
.sound-pop input { width: 100%; accent-color: var(--perz-blue-rim); }