/* The header's music-and-sound control: a round speaker that opens a small panel below it,
   a vertical volume slider over a mute button. The speaker shows the muted glyph whenever
   nothing will be heard (muted, or the volume at zero). */
.sound-control { position: relative; display: flex; }
.sound-control[hidden] { display: none; }
.sound-toggle { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface-raised); color: var(--ink); cursor: pointer; }
.sound-toggle:hover,.sound-toggle[aria-expanded="true"] { background: var(--surface-soft); }
.sound-toggle svg,.sound-mute svg { grid-area: 1 / 1; width: 1.1rem; height: 1.1rem; }
.sound-toggle[data-muted] .sound-on,
.sound-toggle:not([data-muted]) .sound-off,
.sound-mute[aria-pressed="true"] .sound-on,
.sound-mute[aria-pressed="false"] .sound-off { display: none; }

.sound-panel { position: absolute; top: calc(100% + .6rem); left: 50%; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: .55rem; padding: .95rem .45rem .45rem; transform: translateX(-50%); border: 1px solid var(--line); border-radius: 2rem; background: var(--surface-raised); box-shadow: 0 12px 30px #08091f16; }
.sound-panel[hidden] { display: none; }
/* Vertical by writing mode (rtl puts the loud end at the top), the standard way a range
   input stands up; its colour follows the brand in both themes. */
.sound-volume { writing-mode: vertical-lr; direction: rtl; width: 1.5rem; height: 7rem; margin: 0; accent-color: var(--purple-brand); cursor: pointer; }
.sound-mute { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; padding: 0; border: 0; border-radius: 50%; background: var(--surface-soft); color: var(--ink); cursor: pointer; }
.sound-mute:hover { background: var(--surface-soft-hover); }
@media (prefers-reduced-motion: no-preference) {
  .sound-toggle,.sound-mute { transition: background-color .2s ease; }
  /* While the music is heard, the speaker's two waves breathe in turn: on air, quietly. */
  .sound-toggle[data-playing] .sound-wave { animation: sound-wave 1.8s ease-in-out infinite; }
  .sound-toggle[data-playing] .sound-wave + .sound-wave { animation-delay: .35s; }
}
@keyframes sound-wave { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
/* Phone sizes for the speaker live with the other header controls in navigation.css. */