/* ============================================================
   Listen pill — 10x #3 (2026-05-11)
   Small visual: dot + speaker icon + duration label.
   Sits at top of hero, ahead of the H1.
   Plays the page's hero headline + lede via /api/tts.
   ============================================================ */

.dr-listen-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 10px;
  margin: 0 0 18px;
  background: transparent;
  border: 1px solid var(--ds-rule, #e8e1d2);
  border-radius: 999px;
  font-family: -apple-system, BlinkMacSystemFont, 'Inter var', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ds-ink-soft, #6a6555);
  cursor: pointer;
  user-select: none;
  transition: border-color 180ms ease, color 180ms ease, background-color 180ms ease;
}
.dr-listen-pill:hover {
  border-color: var(--ds-clay, #c9613f);
  color: var(--ds-ink, #14140e);
  background: rgba(201, 97, 63, 0.04);
}
.dr-listen-pill:focus-visible {
  outline: 2px solid var(--ds-clay, #c9613f);
  outline-offset: 3px;
}
.dr-listen-pill .dr-pill-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ds-clay, #c9613f);
  flex-shrink: 0;
}
.dr-listen-pill[data-state="playing"] .dr-pill-dot {
  animation: dr-pill-pulse 1.4s ease-in-out infinite;
}
.dr-listen-pill[data-state="loading"] .dr-pill-dot {
  animation: dr-pill-pulse 0.7s ease-in-out infinite;
}
@keyframes dr-pill-pulse {
  0%, 100% { transform: scale(1);   opacity: 1;   }
  50%      { transform: scale(1.6); opacity: 0.6; }
}
.dr-listen-pill .dr-pill-icon {
  width: 14px; height: 14px;
  flex-shrink: 0;
}
.dr-listen-pill .dr-pill-label {
  display: inline-block;
  line-height: 1.2;
}
.dr-listen-pill[data-state="playing"] .dr-pill-label::after {
  content: " · pause";
}
.dr-listen-pill[data-state="loading"] .dr-pill-label::after {
  content: " · loading";
}

[data-theme="dark"] .dr-listen-pill {
  border-color: var(--ds-rule, #2a2a25);
}

@media (prefers-reduced-motion: reduce) {
  .dr-listen-pill { transition: none; }
  .dr-listen-pill[data-state="playing"] .dr-pill-dot,
  .dr-listen-pill[data-state="loading"] .dr-pill-dot { animation: none; }
}