/* Shared track-list rows, used by both views/album (an album's tracks)
   and musicBar/MusicBar (the current queue, in its collapsible popup). */
.trackList {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.trackRow {
  display: grid;
  grid-template-columns: 28px 1fr auto auto;
  align-items: center;
  gap: 12px;
  background: var(--bg-header);
  border-radius: 8px;
  padding: 8px 12px;
}

.trackIndex { color: var(--muted); font-size: 13px; text-align: center; }
.trackName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trackDuration { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.trackRow button { flex-shrink: 0; padding: 6px 10px; font-size: 12px; }

@media (max-width: 600px) {
  .trackRow { grid-template-columns: 24px 1fr; }
  .trackRow .trackDuration, .trackRow button { grid-column: 2; justify-self: start; }
}