/* =========================================
   Custom Audio Player - Full Stylesheet
   ========================================= */

/* ---- Layout / Meta ---- */
.cap {
  display: grid;
  gap: .5rem;
  font-family: inherit;
}

.cap__meta {
  font-weight: 600;
  display: flex;
  align-items: baseline;
  gap: .25rem;
}
.cap__genre { opacity: .8; }
.cap__sep   { opacity: .5; }
.cap__title {}

/* ---- Controls Row ---- */
.cap__controls {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .75rem;
  align-items: center;
}

/* ---- Play / Pause ---- */
.cap__play {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  background: #f2f3f5;
  line-height: 40px;
  text-align: center;
  font-size: 16px;
}
.cap__play::before { content: "▶"; }
.cap__play.is-playing::before { content: "⏸"; }

/* ---- Progress group ---- */
.cap__progress {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .5rem;
  align-items: center;
}
.cap__time {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cap__slash { opacity: .6; }

/* =========================================
   Seekbar (stable cross-browser)
   ========================================= */

/* 基本：薄いグレーのレールに、濃いグレー(#555)が伸びる */
.cap__seek {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  outline: none;

  /* Chrome/Safari は input 自体の背景で進捗を描く */
  background: linear-gradient(#555 0 0) no-repeat #ccc;
  background-size: var(--value, 0%) 100%; /* JSで更新 */
}

/* --- WebKit (Chrome / Safari) --- */
.cap__seek::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  height: 4px;
  background: transparent;      /* ダブり防止 */
  border-radius: 2px;
}
.cap__seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 0;                     /* 非表示（要素は残す） */
  height: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* --- Firefox --- */
.cap__seek::-moz-range-track {
  height: 4px;
  background: #ccc;             /* ベース */
  border-radius: 2px;
}
.cap__seek::-moz-range-progress {
  height: 4px;
  background: #555;             /* 進捗（濃いグレー） */
  border-radius: 2px;
}
.cap__seek::-moz-range-thumb {
  width: 0;                     /* 非表示（要素は残す） */
  height: 0;
  background: transparent;
  border: none;
}

/* ---- Volume ---- */
.cap__volume {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.cap__mute {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
  line-height: 32px;
  text-align: center;
}
.cap__mute::before { content: "🔊"; }
.cap.is-muted .cap__mute { opacity: .7; }
.cap.is-muted .cap__mute::before { content: "🔇"; }

.cap__volbars {
  list-style: none;
  display: inline-flex;
  gap: 4px;
  padding: 0;
  margin: 0;
}
.cap__volbar {
  width: 6px;
  height: 18px;
  background: #e4e7eb;
  border-radius: 2px;
  outline: none;
}
.cap__volbar.is-on { background: #111; }
.cap__volbar:focus-visible {
  box-shadow: 0 0 0 2px rgba(0,0,0,.2);
  border-radius: 3px;
}

/* ---- Focus / A11y helpers ---- */
.cap__play:focus-visible,
.cap__mute:focus-visible {
  outline: 2px solid rgba(0,0,0,.25);
  outline-offset: 2px;
}

/* ---- Small screens tweak ---- */
@media (max-width: 480px) {
  .cap__controls { grid-template-columns: auto 1fr; grid-auto-flow: row; }
  .cap__volume   { justify-self: start; }
}

/* iOSではハードウェア音量依存にしてUIを隠す */
@supports (-webkit-touch-callout: none) {
  .cap__volbars { display: none; }
}