<button
  class="pp-live"
  type="button"
  aria-pressed="false"
  aria-label="Tune in to live broadcast"
  data-pp
>
  <span class="pp-live-dot" aria-hidden="true"></span>
  <span class="pp-live-text">
    <span class="pp-live-state">LIVE</span>
    <span class="pp-live-meta">2.4k listening</span>
  </span>
  <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true" class="pp-live-icon-svg">
    <path class="pp-live-icon" d="M8 5 L8 19 L19 12 Z" fill="currentColor" />
  </svg>
</button>

.pp-live {
  display: inline-grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 12px;
  background: linear-gradient(135deg, #1f1313 0%, #2a1414 100%);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 999px;
  color: #fecaca;
  cursor: pointer;
  font-family: system-ui, sans-serif;
  transition:
    background 0.3s,
    border-color 0.3s,
    transform 0.15s;
}
.pp-live:hover {
  border-color: rgba(239, 68, 68, 0.6);
  transform: translateY(-1px);
}
.pp-live:focus-visible {
  outline: 3px solid rgba(239, 68, 68, 0.4);
  outline-offset: 3px;
}
.pp-live[aria-pressed="true"] {
  background: linear-gradient(135deg, #7f1d1d 0%, #b91c1c 100%);
  color: white;
  border-color: #ef4444;
}
.pp-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
}
.pp-live[aria-pressed="true"] .pp-live-dot {
  background: #ef4444;
  animation: ppLivePing 1.4s ease-out infinite;
}
@keyframes ppLivePing {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6);
  }
  100% {
    box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
  }
}
.pp-live-text {
  display: grid;
  line-height: 1.1;
}
.pp-live-state {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
}
.pp-live-meta {
  font-size: 9.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.pp-live[aria-pressed="true"] .pp-live-state::before {
  content: "ON AIR";
}
.pp-live[aria-pressed="true"] .pp-live-state {
  font-size: 0;
}
.pp-live[aria-pressed="true"] .pp-live-state::before {
  font-size: 11px;
  letter-spacing: 0.18em;
}
.pp-live-icon {
  transition: d 0.3s cubic-bezier(0.5, 0, 0.3, 1.2);
}
.pp-live[aria-pressed="true"] .pp-live-icon {
  d: path("M7 5 H10 V19 H7 Z M14 5 H17 V19 H14 Z");
}

@media (prefers-reduced-motion: reduce) {
  .pp-live,
  .pp-live * {
    animation: none !important;
  }
}

// ── Drop this on every page where you render a play/pause button ──
// Toggles aria-pressed + aria-label on click. The CSS handles all visuals.
document.querySelectorAll('[data-pp]').forEach(function (btn) {
  btn.addEventListener('click', function () {
    var playing = btn.getAttribute('aria-pressed') === 'true';
    btn.setAttribute('aria-pressed', String(!playing));
    btn.setAttribute('aria-label', !playing ? 'Pause' : 'Play');
  });
});