/*
 * audio-player：構造と動きだけ
 * 受ける変数：--part-audio-bar（波形の色）/ --part-audio-bar-played（再生済みの色）/ --part-audio-height（波形の高さ）
 *   --part-accent / --part-accent-fg（再生ボタン）/ --part-badge-bg / --part-badge-fg（デモの札）
 *   --part-radius / --part-fg / --part-muted / --part-bg / --part-line / --part-surface / --part-focus
 * JS が --part-audio-progress（0〜100%）を入れる
 */
.part-audio-player {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--part-line, #dcdcdc);
  border-radius: var(--part-radius, 8px);
  background: var(--part-bg, #fff);
  color: var(--part-fg, #222);
}

.part-audio-player__play {
  position: relative;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--part-accent, #333);
  color: var(--part-accent-fg, #fff);
  cursor: pointer;
  transition: transform 0.2s;
}

.part-audio-player__play::before,
.part-audio-player__play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
}

/* 再生の三角 */
.part-audio-player__play::before {
  width: 0;
  height: 0;
  margin: -8px 0 0 -5px;
  border-style: solid;
  border-width: 8px 0 8px 14px;
  border-color: transparent transparent transparent currentColor;
}

/* 一時停止の2本線 */
.part-audio-player.is-playing .part-audio-player__play::before {
  width: 4px;
  height: 16px;
  margin: -8px 0 0 -7px;
  border: 0;
  background: currentColor;
}

.part-audio-player.is-playing .part-audio-player__play::after {
  width: 4px;
  height: 16px;
  margin: -8px 0 0 3px;
  background: currentColor;
}

.part-audio-player__play:active {
  transform: scale(0.95);
}

.part-audio-player__play:focus-visible {
  outline: 2px solid var(--part-focus, #1a1a1a);
  outline-offset: 3px;
}

.part-audio-player__main {
  flex: 1 1 auto;
  min-width: 0;
}

.part-audio-player__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.part-audio-player__title {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.part-audio-player__badge {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--part-badge-bg, #eee);
  color: var(--part-badge-fg, #555);
  font-size: 0.72em;
  letter-spacing: 0.08em;
}

.part-audio-player__badge[hidden] {
  display: none;
}

.part-audio-player__time {
  margin-left: auto;
  color: var(--part-muted, #666);
  font-size: 0.82em;
  font-variant-numeric: tabular-nums;
}

.part-audio-player__wave {
  position: relative;
  height: var(--part-audio-height, 40px);
  margin-top: 8px;
  border-radius: 4px;
}

.part-audio-player__wave:focus-within {
  outline: 2px solid var(--part-focus, #1a1a1a);
  outline-offset: 3px;
}

.part-audio-player__bars {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 100%;
}

.part-audio-player__bars span {
  flex: 1 1 0;
  min-width: 1px;
  height: var(--h, 50%);
  border-radius: 2px;
  background: var(--part-audio-bar, #cfcfcf);
  transform-origin: 50% 50%;
  transition: background-color 0.15s;
}

.part-audio-player__bars span.is-played {
  background: var(--part-audio-bar-played, var(--part-accent, #333));
}

.part-audio-player.is-playing:not(.is-offscreen) .part-audio-player__bars span {
  animation: part-audio-bar 0.9s ease-in-out var(--d, 0s) infinite alternate;
}

@keyframes part-audio-bar {
  0% { transform: scaleY(0.55); }
  100% { transform: scaleY(1); }
}

/* つまみは波形の上に透明で重ね、波形そのものを押してシークできるようにする */
.part-audio-player__seek {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.part-audio-player__line {
  margin: 8px 0 0;
  color: var(--part-muted, #555);
  font-size: 0.92em;
  line-height: 1.7;
}

.part-audio-player__line[hidden] {
  display: none;
}

.part-audio-player[data-part-motion="reduce"] *,
.part-audio-player[data-part-motion="reduce"] *::before,
.part-audio-player[data-part-motion="reduce"] *::after {
  transition: none !important;
  animation: none !important;
}