/* ============================================================
   wuld.ink — audio player component
   Inline narration block. Streams MP3 from R2.
   Markup:
   <div class="audio-block" data-audio-key="essays/foo/section-1.mp3">
     <button class="audio-play" aria-label="Play narration">[icon]</button>
     <div class="audio-progress">
       <div class="audio-progress-bar"></div>
     </div>
     <span class="audio-time">0:00</span>
   </div>
   ============================================================ */

.audio-block {
  display: flex;
  align-items: center;
  gap: var(--s-3);

  margin-block: var(--s-4) var(--s-3);
  padding: var(--s-2) var(--s-3);

  background-color: var(--c-bg-elevated);
  border: var(--bw-base) solid var(--c-border);
  border-left: var(--bw-slab) solid var(--c-accent);

  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--c-fg-muted);

  max-width: var(--w-prose);
  user-select: none;
}

.audio-block[data-state="loading"] {
  opacity: 0.6;
}

.audio-block[data-state="error"] {
  border-left-color: var(--c-fg-dim);
  opacity: 0.5;
}

/* ---------- Play / pause button ---------- */
.audio-play {
  flex-shrink: 0;
  width: var(--s-6);   /* 32px */
  height: var(--s-6);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background-color: var(--c-accent);
  color: var(--c-bg);
  border: var(--bw-base) solid var(--c-accent);

  font-family: var(--font-mono);
  font-size: var(--t-sm);
  font-weight: 700;
  line-height: 1;

  transition:
    background-color var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
}

.audio-play:hover {
  background-color: var(--c-accent-hover);
  border-color: var(--c-accent-hover);
}

.audio-play:active {
  transform: translateY(1px);
}

.audio-play:focus-visible {
  outline: var(--bw-base) solid var(--c-focus);
  outline-offset: 2px;
}

/* play / pause glyphs via pseudo-content — toggled by [data-playing] */
.audio-play::before {
  content: "\25B6"; /* ▶ */
  display: inline-block;
  transform: translateX(1px); /* optical centering */
}

.audio-block[data-playing="true"] .audio-play::before {
  content: "\2759\2009\2759"; /* ❙ ❙ — two thin bars */
  transform: none;
  letter-spacing: -0.1em;
}

/* ---------- Progress bar ---------- */
.audio-progress {
  flex: 1;
  height: var(--bw-thick); /* 4px */
  background-color: var(--c-border);
  position: relative;
  cursor: pointer;
  min-width: 60px;
}

.audio-progress-bar {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 0;
  background-color: var(--c-accent);
  transition: width 100ms linear;
  pointer-events: none;
}

/* ---------- Time readout ---------- */
.audio-time {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  min-width: 4ch;
  text-align: right;
  letter-spacing: var(--ls-normal);
}