/* =============================================================
   Lyrisk Diktion — Audio Player
   Standalone, framework-free. Swiss / Müller-Brockmann styling.

   Drop-in usage:
     <link rel="stylesheet" href="lyrisk-audio-player.css">
     <script defer src="lyrisk-audio-player.js"></script>

     <div class="lk-player"
          data-src="https://example.com/lesson.mp3"
          data-label="Inspelad uppläsning"></div>

   All visual tokens are scoped to .lk-player and fall back to the
   host theme's variables if present (--ink, --paper, --red, etc.),
   so it inherits the Lyrisk look automatically but also works alone.
   ============================================================= */

.lk-player {
  /* Tokens — inherit from theme if defined, else use these defaults */
  --lk-paper:  var(--paper, #efece4);
  --lk-ink:    var(--ink, #0a0a0a);
  --lk-red:    var(--red, #d8261c);
  --lk-mute:   var(--mute, #8a8780);
  --lk-mute-2: var(--mute-2, #c9c4b8);
  --lk-mono:   var(--mono, "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace);
  --lk-sans:   var(--sans, "Helvetica Neue", Helvetica, Arial, sans-serif);

  --lk-btn: 56px;        /* play-button size */
  --lk-wave-h: 56px;     /* waveform height  */

  display: grid;
  /* Shrinkable tracks: the waveform (col 2) can collapse to 0 and the meta
     (col 3) to its label's min-content, so the player never outgrows a narrow
     table cell on desktop — where the viewport-based @media collapse below
     can't fire — and force the table wider than its column. */
  grid-template-columns: var(--lk-btn) minmax(0, 1fr) minmax(min-content, 200px);
  align-items: center;
  gap: 24px;
  padding: 24px 0;
  border-top: 4px solid var(--lk-ink);
  border-bottom: 1px solid var(--lk-ink);
  color: var(--lk-ink);
  font-family: var(--lk-sans);
  box-sizing: border-box;
}
.lk-player *, .lk-player *::before, .lk-player *::after { box-sizing: border-box; }

/* ---- Play / pause button ---- */
.lk-player__btn {
  width: var(--lk-btn);
  height: var(--lk-btn);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--lk-ink);
  color: var(--lk-paper);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background 120ms ease;
  -webkit-appearance: none;
  appearance: none;
}
.lk-player__btn:hover { background: var(--lk-ink); }
.lk-player.is-playing .lk-player__btn { background: var(--lk-red); }
.lk-player__btn:focus-visible { outline: 2px solid var(--lk-red); outline-offset: 3px; }

.lk-player__btn svg { display: block; fill: currentColor; }

/* Animated "playing" bars (shown only while playing) */
.lk-player__btn-bars {
  display: none;
  gap: 2px;
  align-items: center;
  height: calc(var(--lk-btn) * 0.4);
}
.lk-player.is-playing .lk-player__btn-bars { display: flex; }
.lk-player.is-playing .lk-player__icon { display: none; }
.lk-player__btn-bars span {
  width: 2px;
  height: 100%;
  background: var(--lk-paper);
  transform-origin: center;
  animation: lk-bar 0.6s ease-in-out infinite;
}
.lk-player__btn-bars span:nth-child(2) { animation-duration: 0.7s; }
.lk-player__btn-bars span:nth-child(3) { animation-duration: 0.8s; }
@keyframes lk-bar { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }

/* ---- Waveform ---- */
.lk-player__wave {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: end;
  gap: 2px;
  height: var(--lk-wave-h);
  width: 100%;
  min-width: 0;        /* let the 1fr track shrink inside narrow cells */
  cursor: pointer;
}
.lk-player__wave-bar {
  background: var(--lk-mute-2);
  transition: height 90ms linear, background 120ms ease;
  min-height: 2px;
}
.lk-player__wave-bar.is-played { background: var(--lk-ink); }
.lk-player.is-playing .lk-player__wave-bar.is-head { background: var(--lk-red); }

/* ---- Time / meta readout ---- */
.lk-player__meta { text-align: right; }
.lk-player__label {
  font-family: var(--lk-mono);
  font-size: 11px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lk-mute);
}

/* ---- Responsive: collapse meta below the bar on narrow screens ---- */
@media (max-width: 640px) {
  .lk-player {
    --lk-btn: 44px;
    --lk-wave-h: 40px;
    grid-template-columns: var(--lk-btn) 1fr;
    gap: 16px;
  }
  .lk-player__meta {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    text-align: left;
    border-top: 1px solid var(--lk-ink);
    padding-top: 12px;
    margin-top: 4px;
  }
}

/* Reduced motion — keep it still */
@media (prefers-reduced-motion: reduce) {
  .lk-player__btn-bars span { animation: none; }
  .lk-player__wave-bar { transition: background 120ms ease; }
}