/*
 * @polymodal-studio/audio-player: default theme.
 *
 * Theming API: set any --pm-* custom property on :root, on a wrapper, or on .pm-player itself.
 * Every selector here is wrapped in :where(), so it has zero specificity and any rule in your
 * own stylesheet wins without !important. See README, "Theming", for the full token table.
 *
 * The --_pm-* properties are internal: each one reads the public token, falling back to the
 * default theme. Don't set them directly.
 */

:where(.pm-player) {
  --_pm-bg: var(--pm-bg, #f8f5ee);
  --_pm-fg: var(--pm-fg, #26231f);
  --_pm-fg-muted: var(--pm-fg-muted, #58514a);
  --_pm-border: var(--pm-border, #d6cdbe);
  --_pm-border-width: var(--pm-border-width, 1px);
  --_pm-radius: var(--pm-radius, 10px);
  --_pm-radius-small: var(--pm-radius-small, 4px);
  --_pm-shadow: var(--pm-shadow, none);
  --_pm-padding: var(--pm-padding, 1.5rem);
  --_pm-gap: var(--pm-gap, 1.5rem);

  --_pm-accent: var(--pm-accent, #5b3a29);
  --_pm-on-accent: var(--pm-on-accent, #f8f5ee);
  --_pm-accent-hover: var(--pm-accent-hover, #26231f);
  --_pm-play-size: var(--pm-play-size, 3.5rem);
  --_pm-focus-ring: var(--pm-focus-ring, #26231f);
  --_pm-focus-width: var(--pm-focus-width, 3px);
  --_pm-error: var(--pm-error, #a12f22);

  --_pm-wave-played: var(--pm-wave-played, #8a5a12);
  --_pm-wave-unplayed: var(--pm-wave-unplayed, #5b3a29);
  --_pm-wave-height: var(--pm-wave-height, 2.75rem);
  --_pm-bar-width: var(--pm-bar-width, 4px);

  --_pm-heading-fg: var(--pm-heading-fg, #5b3a29);
  --_pm-speaker-fg: var(--pm-speaker-fg, var(--_pm-fg));
  --_pm-line-active-bg: var(--pm-line-active-bg, #ebd9b8);
  --_pm-line-active-fg: var(--pm-line-active-fg, var(--_pm-accent));
  --_pm-line-hover-bg: var(--pm-line-hover-bg, #efe7d8);
  --_pm-transcript-max-height: var(--pm-transcript-max-height, 15rem);

  --_pm-text-size: var(--pm-text-size, 1rem);
  --_pm-line-height: var(--pm-line-height, 1.5);
  --_pm-small-size: var(--pm-small-size, 0.875rem);
  --_pm-title-size: var(--pm-title-size, 1.0625rem);
  --_pm-title-weight: var(--pm-title-weight, 700);

  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--_pm-gap);
  padding: var(--_pm-padding);
  background: var(--_pm-bg);
  color: var(--_pm-fg);
  border: var(--_pm-border-width) solid var(--_pm-border);
  border-radius: var(--_pm-radius);
  box-shadow: var(--_pm-shadow);
  /* Unset tokens are invalid at computed-value time, so the player inherits the page's font. */
  font-family: var(--pm-font-body);
  font-size: var(--_pm-text-size);
  line-height: var(--_pm-line-height);
}

:where(.pm-player *, .pm-player *::before, .pm-player *::after) {
  box-sizing: inherit;
}

/* ---- Layout: transcript beside the controls when there's room, below when there isn't ---- */

:where(.pm-player__main) {
  flex: 1 1 16rem;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

:where(.pm-player__transcript) {
  flex: 1.2 1 18rem;
  min-width: 0;
}

:where(.pm-player--stacked) {
  flex-direction: column;
  align-items: stretch;
}

:where(.pm-player--stacked > *) {
  flex: none;
}

/* ---- Play button ---- */

:where(.pm-player__play) {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: var(--_pm-play-size);
  height: var(--_pm-play-size);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--_pm-accent);
  color: var(--_pm-on-accent);
  cursor: pointer;
  transition: background-color 0.15s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

:where(.pm-player__play:hover) {
  background: var(--_pm-accent-hover);
}

:where(.pm-player__play[hidden]) {
  display: none;
}

:where(.pm-player__icon) {
  grid-area: 1 / 1;
  width: 45%;
  height: 45%;
}

:where(.pm-player__icon--pause, .pm-player--playing .pm-player__icon--play) {
  visibility: hidden;
}

:where(.pm-player--playing .pm-player__icon--pause) {
  visibility: visible;
}

:where(.pm-player--loading .pm-player__play) {
  animation: pm-player-pulse 1s ease-in-out infinite alternate;
}

@keyframes pm-player-pulse {
  to {
    opacity: 0.6;
  }
}

/* ---- Meta, title, speakers ---- */

:where(.pm-player__body) {
  flex: 1;
  min-width: 0;
}

:where(.pm-player__meta, .pm-player__speakers, .pm-player__time) {
  margin: 0;
  color: var(--_pm-fg-muted);
  font-size: var(--_pm-small-size);
}

:where(.pm-player__title) {
  margin: 0.125rem 0 0.125rem;
  color: var(--_pm-fg);
  font-family: var(--pm-font-heading);
  font-size: var(--_pm-title-size);
  font-weight: var(--_pm-title-weight);
  line-height: 1.3;
}

/* ---- Waveform ---- */

:where(.pm-player__wave) {
  container-type: inline-size;
  position: relative;
  height: var(--_pm-wave-height);
  margin-top: 0.5rem;
  border-radius: var(--_pm-radius-small);
  /* Let vertical swipes scroll the page; horizontal drags seek. */
  touch-action: pan-y;
}

:where(.pm-player--enhanced .pm-player__wave) {
  cursor: pointer;
}

:where(.pm-player__wave-svg) {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

:where(.pm-player__bar) {
  stroke: var(--_pm-wave-unplayed);
  stroke-linecap: round;
  stroke-width: var(--_pm-bar-width);
  /* Bars never get wider than 60% of their slot, so narrow players don't merge them. */
  stroke-width: min(var(--_pm-bar-width), 100cqi / var(--pm-bars, 64) * 0.6);
  vector-effect: non-scaling-stroke;
  transition: stroke 0.15s;
}

:where(.pm-player__bar--played) {
  stroke: var(--_pm-wave-played);
}

:where(.pm-player__time) {
  margin-top: 0.25rem;
  font-family: var(--pm-font-mono);
  font-variant-numeric: tabular-nums;
}

/* Native controls: shown only without JavaScript. */
:where(.pm-player__audio) {
  display: block;
  width: 100%;
  margin-top: 1rem;
}

:where(.pm-player__status) {
  margin: 0.5rem 0 0;
  color: var(--_pm-error);
  font-size: var(--_pm-small-size);
}

:where(.pm-player__status:empty) {
  display: none;
}

/* ---- Transcript ---- */

:where(.pm-player__transcript-heading) {
  margin: 0 0 0.5rem;
  color: var(--_pm-heading-fg);
  font-family: var(--pm-font-heading);
  font-size: var(--_pm-small-size);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}

:where(.pm-player__lines) {
  position: relative;
  max-height: var(--_pm-transcript-max-height);
  margin: 0;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  border-radius: var(--_pm-radius-small);
}

:where(.pm-player__line) {
  margin: 0;
  padding: 0.25rem 0.5rem;
  border-radius: var(--_pm-radius-small);
  transition: background-color 0.15s;
}

:where(.pm-player__line + .pm-player__line) {
  margin-top: 0.25rem;
}

:where(.pm-player--line-seek .pm-player__line) {
  cursor: pointer;
}

:where(.pm-player--line-seek .pm-player__line:hover) {
  background: var(--_pm-line-hover-bg);
}

:where(.pm-player__line--active, .pm-player--line-seek .pm-player__line--active:hover) {
  background: var(--_pm-line-active-bg);
  color: var(--_pm-line-active-fg);
}

:where(.pm-player__speaker) {
  color: var(--_pm-speaker-fg);
  font-weight: 700;
}

/* ---- Focus: one visible ring for everything interactive ---- */

:where(.pm-player) :where(button, audio, [tabindex]):focus-visible {
  outline: var(--_pm-focus-width) solid var(--_pm-focus-ring);
  outline-offset: 2px;
}

/* Inside the scrolling transcript an outer ring would be clipped. */
:where(.pm-player__lines) :where(.pm-player__line):focus-visible,
:where(.pm-player__lines:focus-visible) {
  outline-offset: calc(var(--_pm-focus-width) * -1);
}

/* ---- Preferences and media ---- */

@media (prefers-reduced-motion: reduce) {
  :where(.pm-player, .pm-player *) {
    transition: none;
    animation: none;
  }
}

@media (forced-colors: active) {
  :where(.pm-player__bar) {
    stroke: CanvasText;
  }
  :where(.pm-player__bar--played) {
    stroke: Highlight;
  }
  :where(.pm-player__line--active) {
    outline: 2px solid Highlight;
  }
}

@media print {
  :where(.pm-player__play, .pm-player__wave, .pm-player__time, .pm-player__audio) {
    display: none;
  }
  :where(.pm-player__lines) {
    max-height: none;
    overflow: visible;
  }
}