/*
 * straka.la audio narration player — minimal byline variant
 *
 * Sits inline in the dark post header, in the same row as the author
 * name. Replaces the old "10 min read" hint. Single clickable element:
 * play/pause icon + duration text. No scrub bar, no speed control, no
 * eyebrow. The audio file itself opens with a spoken title + author +
 * AI-narration disclosure, so the on-page UI can stay quiet.
 */

.audio-player {
  display: inline-flex;
  align-items: center;
  font-family: var(--fb);
}

.audio-player-toggle {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: transparent;
  border: 1px solid rgba(244, 239, 230, 0.18);
  border-radius: 999px;
  padding: .28rem .75rem .28rem .55rem;
  color: rgba(244, 239, 230, 0.55);
  font-family: var(--fb);
  font-size: .72rem;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
  font-variant-numeric: tabular-nums;
}
.audio-player-toggle:hover {
  color: var(--accent);
  border-color: rgba(193, 122, 62, 0.5);
}
.audio-player-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.audio-player-toggle.is-playing {
  color: var(--accent);
  border-color: rgba(193, 122, 62, 0.5);
}

.audio-player-icon {
  width: 11px;
  height: 11px;
  fill: currentColor;
  flex-shrink: 0;
}

.audio-player-time {
  letter-spacing: .02em;
}

/* When placed inside a cream/light surface (future use), the player
   adopts the dark palette instead. Detected via the `data-on-dark="false"`
   override on the container. The default markup is on dark headers, so
   no override needed there. */
.audio-player[data-on-dark="false"] .audio-player-toggle {
  border-color: rgba(26, 24, 20, 0.15);
  color: var(--muted);
}
.audio-player[data-on-dark="false"] .audio-player-toggle:hover,
.audio-player[data-on-dark="false"] .audio-player-toggle.is-playing {
  color: var(--accent);
  border-color: rgba(193, 122, 62, 0.5);
}

@media (max-width: 540px) {
  .audio-player-toggle {
    font-size: .68rem;
    padding: .26rem .65rem .26rem .5rem;
  }
}