/*    "Now playing / last played", parked in the same band as the ASCII
   turntable but pushed to the right edge, so the two read as one row without
   either one moving. Absolutely positioned against .footer-content for the
   same reason .deck-turntable is: the band is defined by clearing the
   .footer-top row above and the .footer-name wordmark below, and those are
   both viewport-relative.

   Injected by js/spotify-widget.js. Hidden by default and only un-hidden once
   /api/spotify has returned a usable payload — an unconfigured deployment or
   a failed request leaves it as it is here, invisible. */
.sp-widget {
  position: absolute;
  /* Matches .deck-turntable's own padding box, so the widget centres on the
     same band as the platter rather than on the whole footer. */
  top: 7rem;
  bottom: 15vw;
  right: clamp(1.5rem, 4vw, 3.5rem);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.55rem;
  width: clamp(140px, 15vw, 200px);
  pointer-events: none;
}

/* Beats .sp-widget's display:flex on specificity, so the `hidden` attribute
   set by the widget script actually hides it. */
.sp-widget[hidden] {
  display: none;
}

.sp-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.sp-art-link {
  display: block;
  width: clamp(84px, 9vw, 120px);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.03);
  pointer-events: auto;
}

.sp-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Long titles are the failure mode here — "Song Title (Deluxe Remastered
   2011 Edition)" would otherwise push the footer band open. min-width:0 is
   what lets the ellipsis engage inside the flex column. */
.sp-title,
.sp-artist {
  display: block;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sp-title {
  font-family: var(--font-text);
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--fg);
  text-decoration: none;
  pointer-events: auto;
  transition: opacity 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sp-title:hover,
.sp-title:focus-visible {
  opacity: 0.6;
}

.sp-artist {
  margin-top: -0.35rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* Three-bar level meter. Only present while something is actually playing. */
.sp-bars {
  display: none;
  align-items: flex-end;
  gap: 2px;
  height: 9px;
}

.sp-widget.sp-playing .sp-bars {
  display: flex;
}

.sp-bar {
  display: block;
  width: 2px;
  height: 3px;
  background: var(--accent);
}

@media (prefers-reduced-motion: no-preference) {
  .sp-widget.sp-playing .sp-bar {
    animation: sp-bounce 900ms ease-in-out infinite;
  }

  .sp-widget.sp-playing .sp-bar:nth-child(2) {
    animation-delay: 180ms;
  }

  .sp-widget.sp-playing .sp-bar:nth-child(3) {
    animation-delay: 360ms;
  }
}

@keyframes sp-bounce {
  0%, 100% {
    height: 3px;
  }
  50% {
    height: 9px;
  }
}

@media (max-width: 1024px) {
  .sp-widget {
    right: 1.5rem;
    width: clamp(130px, 20vw, 170px);
  }
}

/* Below 768 the footer stacks: the platter band ends at 58vh and the
   mail/date column sits at 60vh, so the widget drops underneath both,
   centred, still clear of the wordmark. */
@media (max-width: 768px) {
  .sp-widget {
    top: 70vh;
    right: auto;
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
    width: min(78vw, 240px);
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    gap: 0.45rem;
  }

  .sp-art-link {
    width: clamp(72px, 22vw, 96px);
  }
}