/* Sound switch (sound kit v1): the header button and its panel. Tokens only. */
.snd { position: relative; }
.snd-btn { font: var(--t-ui); display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 12px; background: var(--bg-card);
    border: 1px solid var(--border-color); border-radius: var(--radius); color: var(--text-primary); cursor: pointer; transition: border-color .2s; }
.snd-btn:hover, .snd-btn[aria-expanded="true"] { border-color: var(--neon-cyan); }
.snd-btn .ic { width: 16px; height: 16px; fill: currentColor; }
.snd-btn b { font-weight: 700; color: var(--text-meta); }
.snd-btn.is-on b { color: var(--neon-cyan); }
.snd-btn.is-on .ic { color: var(--neon-cyan); }
.snd-btn:not(.is-on) .ic-speaker, .snd-btn.is-on .ic-speaker-off { display: none; }
.snd-sw input:disabled + .snd-track { opacity: .6; }
.snd-btn:focus-visible, .snd-panel input:focus-visible { outline: 2px solid var(--neon-cyan); outline-offset: 2px; }
.snd-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 280px; padding: 14px 16px; display: grid; gap: 12px;
    background: var(--surface-raised); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: 0 12px 32px rgb(0 0 0 / .45); }
.snd-panel[hidden] { display: none; }
.snd-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; font: var(--t-ui); color: var(--text-body); }
.snd-row input[type="range"] { width: 120px; accent-color: var(--neon-cyan); }
.snd-main span:first-child { color: var(--text-strong); font-weight: 700; }
.snd-sw { position: relative; }
.snd-sw input { position: absolute; opacity: 0; width: 44px; height: 24px; right: 16px; margin: 0; cursor: pointer; }
.snd-track { position: relative; width: 44px; height: 24px; border-radius: 12px; background: var(--surface-sunken); border: 1px solid var(--border-strong); transition: background .15s; }
.snd-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink-300); transition: transform .15s, background .15s; }
.snd-sw input:checked + .snd-track { background: color-mix(in srgb, var(--neon-cyan) 35%, var(--surface-sunken)); border-color: var(--neon-cyan); }
.snd-sw input:checked + .snd-track::after { transform: translateX(20px); background: var(--neon-cyan); }
.snd-sw input:focus-visible + .snd-track { outline: 2px solid var(--neon-cyan); outline-offset: 2px; }
.snd.is-off .snd-row:not(.snd-main) { opacity: .5; }
.snd-note { font: var(--t-small, 12px/1.4 sans-serif); color: var(--text-meta); margin: 0; }
@media (prefers-reduced-motion: reduce) { .snd-track, .snd-track::after, .snd-btn { transition: none; } }
/* phone menu: the switch sits in the list and its panel opens in the flow, not floating */
.site-menu .snd { margin: 8px 0; }
.site-menu .snd-btn { width: 100%; justify-content: flex-start; min-height: 44px; }
.site-menu .snd-panel { position: static; width: auto; margin-top: 8px; box-shadow: none; }