/* The music switch. Its own file because it is on two pages with two
   different stylesheets -- the front page and the terminal -- and it is
   written with literal colours rather than custom properties so it does not
   depend on which of them loaded.

   Bottom left: bottom centre belongs to .data-status, and the door's ways out
   run across the middle. Above the door (z 301), because the door is where
   you would reach for it, and it has to stay put once the door opens.

   Bars rather than a note glyph: the Chromium that renders our cards has no
   emoji font, and a mark that is a box on one surface is not a mark. These
   are four divs.
*/
.musicbtn {
  position: fixed; z-index: 301;
  left: max(14px, env(safe-area-inset-left));
  bottom: max(14px, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid #2A2A2E; background: rgba(8, 8, 8, 0.82);
  color: #8A94A6;
  font-family: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; line-height: 1;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: color .18s ease, border-color .18s ease, box-shadow .22s ease;
}
.musicbtn:hover { color: #E8ECF2; border-color: rgba(247, 147, 26, 0.45); }
.musicbtn:focus-visible { outline: 2px solid #F7931A; outline-offset: 3px; }
.musicbtn.is-on {
  color: #F7931A; border-color: rgba(247, 147, 26, 0.6);
  box-shadow: 0 0 18px rgba(247, 147, 26, 0.16);
}
.musicbtn-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; }
.musicbtn-bars i {
  /* Full height, scaled from the bottom: animating height laid the whole page
     out again every frame the music played; a scale does not. */
  display: block; width: 2px; border-radius: 1px;
  background: currentColor; height: 11px;
  transform-origin: 50% 100%; transform: scaleY(.36);
  transition: transform .2s ease;
}
/* at rest it reads as a level meter standing still, not a dead row of dots */
.musicbtn-bars i:nth-child(1) { transform: scaleY(.36); }
.musicbtn-bars i:nth-child(2) { transform: scaleY(.73); }
.musicbtn-bars i:nth-child(3) { transform: scaleY(.45); }
.musicbtn-bars i:nth-child(4) { transform: scaleY(.82); }
.musicbtn.is-on .musicbtn-bars i { animation: musiceq 1.15s ease-in-out infinite; }
.musicbtn.is-on .musicbtn-bars i:nth-child(2) { animation-delay: .19s; }
.musicbtn.is-on .musicbtn-bars i:nth-child(3) { animation-delay: .38s; }
.musicbtn.is-on .musicbtn-bars i:nth-child(4) { animation-delay: .08s; }
@keyframes musiceq {
  0%, 100% { transform: scaleY(.27); }
  50%      { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  .musicbtn.is-on .musicbtn-bars i { animation: none; transform: scaleY(.64); }
}
@media (max-width: 420px) {
  .musicbtn-tx { display: none; }
  .musicbtn { padding: 9px 11px; gap: 0; }
}