/* Shared volume controls for every music player. */
.player-volume { display: inline-flex; flex: 0 0 auto; align-items: center; }
.player-volume .volume-button, #sound-desk .player-volume .volume-button {
  display: grid; place-items: center; width: 30px; height: 30px; padding: 5px;
  border: 0; border-radius: 50%; background: transparent; color: var(--paper, #deddd3); cursor: pointer;
}
.volume-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.player-volume .volume-button:hover { background: #ffffff14; }
.volume-button:focus-visible { outline: 2px solid #86d8cc; outline-offset: 2px; }
.volume-popup {
  position: fixed; inset: auto; margin: 0; box-sizing: border-box; width: 48px; height: 140px;
  padding: 12px 10px; overflow: hidden; border: 1px solid #62665e; border-radius: 12px; background: #252927; color: #deddd3;
  box-shadow: 0 8px 24px #0005;
}
.volume-popup:popover-open { display: flex; align-items: center; justify-content: center; }
.player-volume .volume-popup input[type="range"] {
  writing-mode: vertical-lr; direction: rtl; appearance: auto; flex: none;
  width: 24px; min-width: 24px; height: 112px; margin: 0; padding: 0; border: 0;
  background: transparent; accent-color: #86d8cc; cursor: pointer; touch-action: none;
}
.audition .sound-preview { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 180px; }
.audition .sound-toggle { width: 26px; height: 26px; padding: 0; border-radius: 50%; }
.audition .sound-seek { flex: 1; width: 0; min-width: 24px; accent-color: #86d8cc; }
.audition .sound-time { font-size: 11px; white-space: nowrap; }
.audition .sound-preview audio { display: none; }