/* music-widget v2 styles (tokens-72v2.css only)
   Nav-capsule grammar: glass pill, hairline border, backdrop blur.
   Separates on both dusk hero and straw/paper body sections. */

.m72-widget{
  position:fixed;
  right:calc(20px + env(safe-area-inset-right,0px));
  bottom:calc(24px + env(safe-area-inset-bottom,0px));
  z-index:60;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 18px;
  border:1px solid var(--m72-ink-mute);
  border-radius:var(--m72-radius-pill);
  background:rgba(21,21,21,0.72);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  backdrop-filter:blur(14px) saturate(1.4);
  color:var(--m72-paper);
  font:600 var(--m72-label)/1 "Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:0.02em;
  cursor:default;
  user-select:none;
  box-shadow:0 8px 24px rgba(0,0,0,0.12);
  transition:transform 160ms ease,opacity 160ms ease;
}
.m72-widget[hidden]{display:none}

/* play button: sky-blue accent icon */
.m72-widget-play{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  padding:0;
  border:1px solid rgba(253,255,254,0.18);
  border-radius:50%;
  background:transparent;
  color:var(--m72-sky);
  cursor:pointer;
  flex-shrink:0;
  transition:background 140ms ease;
}
.m72-widget-play:hover{
  background:rgba(253,255,254,0.1);
}
.m72-widget-play:focus-visible{
  outline:2px solid var(--m72-sky);
  outline-offset:2px;
}
.m72-widget-play svg{
  width:14px;
  height:14px;
  fill:currentColor;
}

/* track label */
.m72-widget-label{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:180px;
}

/* equalizer bars: sky accent */
.m72-eq{
  display:inline-flex;
  align-items:flex-end;
  gap:2px;
  height:14px;
  flex-shrink:0;
}
.m72-eq-bar{
  width:3px;
  background:var(--m72-sky);
  border-radius:1px;
}
.m72-eq-bar:nth-child(1){height:40%}
.m72-eq-bar:nth-child(2){height:100%}
.m72-eq-bar:nth-child(3){height:55%}

.m72-widget.is-playing .m72-eq-bar{
  animation:m72-eq-bounce 0.85s ease-in-out infinite;
}
.m72-widget.is-playing .m72-eq-bar:nth-child(2){animation-delay:0.15s}
.m72-widget.is-playing .m72-eq-bar:nth-child(3){animation-delay:0.3s}

@keyframes m72-eq-bounce{
  0%,100%{transform:scaleY(0.35)}
  50%{transform:scaleY(1)}
}

/* spotify link slot */
.m72-widget-spotify{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border:1px solid rgba(253,255,254,0.18);
  border-radius:var(--m72-radius-pill);
  background:transparent;
  color:var(--m72-paper);
  font:600 11px/1 "Archivo",sans-serif;
  letter-spacing:0.04em;
  text-decoration:none;
  text-transform:uppercase;
  white-space:nowrap;
  transition:background 140ms ease;
}
.m72-widget-spotify:hover{
  background:rgba(253,255,254,0.1);
}
.m72-widget-spotify[hidden]{display:none}

/* ---- mobile: collapse to round button, clear of map attribution ---- */
@media(max-width:600px){
  .m72-widget{
    padding:0;
    width:48px;
    height:48px;
    justify-content:center;
    gap:0;
    bottom:calc(28px + env(safe-area-inset-bottom,0px));
  }
  .m72-widget .m72-widget-label,
  .m72-widget .m72-widget-spotify,
  .m72-widget .m72-eq{
    display:none;
  }
  .m72-widget.is-expanded{
    width:auto;
    padding:10px 18px;
    gap:10px;
  }
  .m72-widget.is-expanded .m72-widget-label{display:block}
  .m72-widget.is-expanded .m72-eq{display:inline-flex}
  .m72-widget.is-expanded .m72-widget-spotify:not([hidden]){display:inline-flex}
}

/* ---- reduced motion ---- */
@media(prefers-reduced-motion:reduce){
  .m72-widget.is-playing .m72-eq-bar{
    animation:none !important;
  }
}