/**
 * MP3 Player Styles
 */

/* Each playlist container starts empty and is filled by mp3-player.js only
   after its JSON loads. Without a reserved height that insertion pushes
   everything below it down - measured at CLS 0.32 on desktop, the single
   biggest thing dragging the Lighthouse score.
   Rendered height is exactly (chrome + tracks x row height) and is
   identical across all six playlists, so it can be reserved up front from
   the track count. The constants are rounded slightly UP on purpose:
   over-reserving costs a 1-3px sliver of whitespace and shifts nothing
   (min-height simply keeps the box that tall), whereas under-reserving
   lets the box grow on insert and puts the shift straight back.
   --tracks is set per container in the HTML and kept in sync with the
   JSON track counts automatically by dev_server.py. */
.playlist-slot {
  min-height: calc(216px + var(--tracks, 6) * 52.4px);
  /* Matches .mp3-player's own margin-bottom so the gap between slots is
     the same before and after they fill (the child's margin collapses
     through the container, so these don't stack). */
  margin-bottom: 2rem;
}

@media (max-width: 768px) {
  /* No reservation here: row heights vary with title wrapping so an exact
     figure isn't possible, and an inexact one would itself cause a shift.
     The players also sit below the fold at this width, so their insertion
     doesn't move anything actually on screen (mobile CLS already measures 0). */
  .playlist-slot {
    min-height: 0;
    margin-bottom: 0;
  }
}

.mp3-player {
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1.75rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-md);
}

.player-header {
  margin-bottom: 1.25rem;
}

.player-title {
  font-size: 1.5rem;
  margin-bottom: 0.25rem;
  color: var(--color-text-primary);
}

.player-description {
  color: var(--color-text-tertiary);
  font-size: 0.875rem;
  margin-bottom: 0;
}

.player-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.player-buttons {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.player-btn {
  background-color: var(--color-accent-primary);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  flex-shrink: 0;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}

.player-btn:hover {
  background-color: var(--color-accent-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.player-btn:active {
  transform: scale(0.95);
  box-shadow: var(--shadow-sm);
}

.volume-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.volume-control label {
  font-size: 1.2rem;
  cursor: pointer;
}

.volume-slider {
  width: 100px;
  height: 4px;
  background: var(--color-border);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  /* Without this the filled portion of the track renders in the browser's
     default blue, which clashes with the palette. */
  accent-color: var(--color-accent-primary);
}

.volume-slider::-webkit-slider-thumb {
  appearance: none;
  width: 16px;
  height: 16px;
  background: var(--color-accent-primary);
  border-radius: 50%;
  cursor: pointer;
}

.volume-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: var(--color-accent-primary);
  border-radius: 50%;
  border: none;
  cursor: pointer;
}

.player-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 200px;
}

.current-track {
  font-weight: 500;
  color: var(--color-text-primary);
  font-size: 0.95rem;
}

.time-info {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}

.player-progress {
  margin-bottom: 1rem;
}

.progress-bar {
  width: 100%;
  height: 6px;
  background-color: var(--color-border);
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
}

.progress-fill {
  height: 100%;
  background-color: var(--color-accent-primary);
  width: 0%;
  transition: width 0.1s linear;
}

.playlist-tracks {
  margin-top: 1rem;
}

.track-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.track-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
  border-bottom: 1px solid var(--color-border-light);
  border-left: 3px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.track-item:last-child {
  border-bottom-color: transparent;
}

.track-item:hover {
  background-color: var(--color-bg-tertiary);
}

.track-item.active {
  background-color: var(--color-accent-wash);
  border-left-color: var(--color-accent-primary);
}

.track-item.active .track-title {
  color: var(--color-accent-text);
  font-weight: 600;
}

.track-title {
  flex: 1;
  color: var(--color-text-primary);
  font-weight: 500;
}

.track-duration {
  color: var(--color-text-tertiary);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  min-width: 4rem;
  text-align: right;
}

/* Responsive */
@media (max-width: 768px) {
  .mp3-player {
    padding: 1rem;
  }

  .player-controls {
    /* Keep buttons on same row, allow other elements to wrap */
    flex-wrap: wrap;
    align-items: center;
  }

  .player-buttons {
    /* Ensure buttons stay together on same row */
    flex-shrink: 0;
    flex-wrap: nowrap;
  }

  .volume-control {
    margin-left: 0;
    width: 100%;
    order: 3;
  }

  .volume-slider {
    flex: 1;
  }

  .player-info {
    width: 100%;
    order: 2;
  }

  .track-item {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .track-title {
    flex-basis: 100%;
  }

  /* Not enough room to earn their keep at this width - track length and
     the seek/progress bar (time-info still shows elapsed/total time). */
  .track-duration,
  .player-progress {
    display: none;
  }
}

/* Extra compact screens */
@media (max-width: 480px) {
  .player-controls {
    gap: 0.75rem;
  }

  .player-buttons {
    gap: 0.5rem;
  }

  .player-btn {
    padding: 0.5rem 0.75rem;
    min-width: 40px;
  }
}