/* AudioControls — a Material 3 Expressive audio player built from standard elements only (no native
   controls, no vendor pseudo-elements), so it looks identical on every browser. Themable via the
   --ac-* custom properties (default to the page's --ncs-* / M3 fallbacks). */
.audio-controls {
  --ac-size: 2.5rem; /* play button (and any slotted action) diameter — they are cognates */
  --ac-progress: 0; /* 0–100, set by the controller; the slider reads it for smooth positioning */
  --ac-primary: var(--ncs-primary, #6750a4);
  --ac-on-primary: var(--ncs-on-primary, #ffffff);
  --ac-track-h: 16px; /* M3 XS track height */
  --ac-handle-h: 1.75rem; /* handle is taller than the track (the M3 look) */
  --ac-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
}

/* the <audio> is just the media engine - never rendered */
.ac-media {
  display: none;
}

/* play/pause — filled primary button whose shape morphs (squircle → circle) on play with a springy
   ease; the icon morphs play triangle ↔ pause bars (M3 Expressive shape morph) */
.ac-play {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ac-size);
  height: var(--ac-size);
  border: 0;
  border-radius: 32%;
  background: var(--ac-primary);
  color: var(--ac-on-primary);
  cursor: pointer;
  transition: border-radius 0.45s var(--ac-spring), filter 0.2s ease;
}

.audio-controls.is-playing .ac-play {
  border-radius: 50%;
}

.ac-play:hover {
  filter: brightness(0.95);
}

.ac-play:active {
  filter: brightness(0.9);
}

.ac-icon-play,
.ac-icon-pause {
  display: flex;
  width: 1.15rem;
  height: 1.15rem;
}

.ac-icon-play svg,
.ac-icon-pause svg {
  width: 100%;
  height: 100%;
}

.ac-icon-pause { display: none; }

.audio-controls.is-playing .ac-icon-play { display: none; }
.audio-controls.is-playing .ac-icon-pause { display: flex; }

.ac-slider {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: var(--ac-handle-h);
  cursor: pointer;
  touch-action: none;
}

.ac-track-active,
.ac-track-inactive {
  position: absolute;
  top: 50%;
  height: var(--ac-track-h);
  transform: translateY(-50%);
}

/* active (played) track: from the start to a 6dp gap before the handle (handle half-width 2 + gap 6 = 8px) */
.ac-track-active {
  left: 0;
  width: max(0px, calc(var(--ac-progress) * 1% - 8px));
  background: var(--ac-primary);
  border-radius: 8px 2px 2px 8px;
}

/* inactive (remaining) track: from a 6dp gap after the handle to the end */
.ac-track-inactive {
  left: min(100%, calc(var(--ac-progress) * 1% + 8px));
  right: 0;
  background: color-mix(in srgb, var(--ac-primary) 24%, transparent);
  border-radius: 2px 8px 8px 2px;
}

/* stop indicator at the far (max) end */
.ac-stop {
  position: absolute;
  top: 50%;
  right: 6px;
  width: 4px;
  height: 4px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: color-mix(in srgb, var(--ac-primary) 55%, transparent);
}

.ac-handle {
  position: absolute;
  top: 50%;
  left: calc(var(--ac-progress) * 1%);
  width: 4px;
  height: var(--ac-handle-h);
  transform: translate(-50%, -50%);
  border-radius: 2px;
  background: var(--ac-primary);
  transition: width 0.15s ease, height 0.15s var(--ac-spring);
}

/* the handle widens on press/selection */
.ac-slider:active .ac-handle,
.ac-slider:focus-visible .ac-handle {
  width: 6px;
}

.ac-slider:focus-visible {
  outline: none;
}

.ac-time {
  flex: 0 0 auto;
  font-size: var(--font-xs, 0.75rem);
  font-weight: 600;
  color: color-mix(in srgb, var(--text, #1d1b20) 65%, transparent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* a slotted trailing action (e.g. a discard/close button) is sized to match the play button */
.audio-controls .ac-action {
  flex: 0 0 auto;
  align-self: center;
  width: var(--ac-size);
  height: var(--ac-size);
  aspect-ratio: auto;
}

@media (prefers-reduced-motion: reduce) {
  .audio-controls .ac-play,
  .audio-controls .ac-handle {
    transition: none;
  }
}