/* MUSIC — the note between the bell and the speaker (23 Sep).
   Same box as the bell (notify.css copies the speaker's 48x42). It does not
   wear .hbal--icon: mute.js takes the first one of those as the speaker.
   Off is a slash across the note, the same mark the speaker uses when the
   cues are muted, so the two read the same way and stay separate controls. */

.hbal--music{width:48px;padding:0;justify-content:center;position:relative;overflow:visible;cursor:pointer;flex:0 0 auto}
.hbal--music:hover{border-color:rgba(255,255,255,.6);box-shadow:none}
.hbal--music:active{border-color:var(--acc)}
.hbal--music:focus-visible{outline:3px solid #FDC107;outline-offset:2px}
/* the box is 48x42, the same as the speaker. One pixel above and below makes the finger target 44 without changing the row. */
.hbal--music::before{content:'';position:absolute;inset:-1px 0}
.music__slash{display:none}
.hbal--music[data-on="0"] .music__slash,
.mhead__music[data-on="0"] .music__slash{
  display:block;position:absolute;left:9px;right:9px;top:50%;height:2px;margin-top:-1px;
  border-radius:2px;background:#E8E8E8;transform:rotate(-36deg);pointer-events:none;z-index:1}

/* the phone header. The speaker is not up here (it is a Settings row), so the
   note sits against the bell, left of the balance. 40x34 like the bell, with
   a 44px finger target that stops short of its neighbours. */
.mhead__music{display:none}
@media (max-width:1023px){
  .mhead__music{position:relative;display:grid;place-items:center;width:40px;height:34px;border-radius:10px;
    background:#080808;border:1.5px solid rgba(255,255,255,.28);cursor:pointer;padding:0;color:#E8E8E8;flex-shrink:0}
  .mhead__music:active{border-color:var(--acc)}
  .mhead__music:focus-visible{outline:3px solid #FDC107;outline-offset:2px}
  .mhead__music::after{content:'';position:absolute;inset:-5px -2px}
  .mhead__bell ~ .mhead__music,.mhead__set ~ .mhead__music{margin-left:-4px}
  .mhead__music[data-on="0"] .music__slash{left:8px;right:8px}
}
@media (max-width:359px){
  .mhead__music{width:36px}
  .mhead__bell ~ .mhead__music,.mhead__set ~ .mhead__music{margin-left:-2px}
  .mhead__music::after{inset:-5px -4px}
}
@media (prefers-reduced-motion:reduce){
  .hbal--music,.mhead__music{transition:none}
}