/* ux-sound switch — in the rail, never over the content (After only: ux/sound.js creates it). */
.ux-sound{position:relative;display:inline-flex;align-items:center;gap:7px;align-self:flex-start;margin-top:22px;min-height:32px;padding:5px 9px;border:1px solid var(--ink,#20221f);background:var(--paper,#f4f1e8);color:var(--ink,#20221f);font:500 10px/1.2 Space,Arial,sans-serif;letter-spacing:.02em;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.ux-sound::after{content:"";position:absolute;inset:-6px -4px}/* >=44 px touch target */
.ux-sound i{width:7px;height:7px;border:1px solid currentColor;border-radius:50%}
.ux-sound[aria-pressed=true]{background:var(--ink,#20221f);color:var(--paper,#f4f1e8)}
.ux-sound[aria-pressed=true] i{background:var(--accent,#f86c39);border-color:var(--accent,#f86c39)}
.ux-sound:hover{border-color:var(--accent,#f86c39);box-shadow:0 0 0 1px var(--accent,#f86c39)}
.ux-sound:focus-visible{outline:3px solid var(--accent,#f86c39);outline-offset:3px}
/* phone: the sticky header is a 2-column grid; its logo row has an empty right cell */
@media(max-width:850px){.ux-sound{grid-column:2;grid-row:1;align-self:center;justify-self:end;margin:0}}
/* phone: the logo link stops at its text, so the logo row has a free cell for Max's service spot */
@media(max-width:850px){.ux-sound-on .rail-logo{justify-self:start}}