/* ============================================================================
   /music/ — page-specific layout.
   Primitives (tokens, base, header, theme toggle, masthead) come from the
   shared kit (theme.css). This file styles the hero visualizer, the track
   index ("the index that plays"), and the transport bar.
   ============================================================================ */

.music .site-header {
  justify-content: flex-end;
}

/* Top-aligned column that scrolls; clears the fixed header. */
.music main {
  max-width: 680px;
  margin: 0 auto;
  padding: calc(var(--header-h) + 16px) 28px 48px;
}

.page {
  width: 100%;
}

/* ── Retro segmented equalizer ──
   A hi-fi style spectrum: columns of discrete segments that light bottom-up,
   with slowly-falling peak-hold caps. Opens the page above the track list. */
.viz {
  height: clamp(96px, 16vw, 140px);
  margin-bottom: clamp(1.25rem, 4vw, 2rem);
}

#viz-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ── Track index ── */
.tracks {
  list-style: none;
  border-top: 1px solid var(--border);
}

.tracks-loading {
  padding: 1rem 0.25rem;
  color: var(--text-faint);
  border-bottom: 1px solid var(--border);
}

.track {
  position: relative;
  border-bottom: 1px solid var(--border);
  transition: border-color 0.2s ease;
}

.track-row {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  width: 100%;
  padding: 0.85rem 0.25rem;
  text-align: left;
  color: var(--text);
}

/* Cover thumbnail (when the track has one). */
.track-cover {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}

/* Playback failure: warm the meta line briefly. */
.track.is-error .track-meta { color: var(--accent); }

/* Cue: play icon by default; equalizer when this row is playing. */
.track-cue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  color: var(--text-faint);
  transition: color 0.18s ease;
}

.track-cue svg { width: 22px; height: 22px; }
.track-cue .ic-pause,
.track-cue .track-eq { display: none; }

.track-main {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
  flex: 1;
}

.track-title {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: clamp(1.25rem, 3.5vw, 1.55rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--text-strong);
  transition: color 0.18s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Owner-only marker on a track that is not shared yet. Quiet by design: it is
   the normal state for a work in progress, not a warning. */
.track-badge {
  flex-shrink: 0;
  align-self: center;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0.1rem 0.4rem;
  line-height: 1.4;
  opacity: 0.75;
}

.track-meta {
  font-size: 0.85rem;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  margin-left: auto;
}

/* Hover on a not-playing row: warm cue + rule, like the home index. */
.track:not(.is-current) .track-row:hover .track-cue,
.track:not(.is-current) .track-row:focus-visible .track-cue { color: var(--accent); }
.track:not(.is-current) .track-row:hover { border-color: transparent; }
.track:not(.is-current):hover { border-bottom-color: var(--accent); }

/* Current track (selected): title + cue warm to gold. */
.track.is-current .track-title { color: var(--accent); }
.track.is-current .track-cue { color: var(--accent); }
.track.is-current { border-bottom-color: var(--accent); }

/* Playing vs paused icon swap within the current row. */
.track.is-current .track-cue .ic-play { display: none; }
.track.is-current.is-paused .track-cue .ic-play { display: block; }
.track.is-current.is-paused .track-cue .track-eq,
.track.is-current.is-paused .track-cue .ic-pause { display: none; }
.track.is-current.is-playing .track-cue .ic-play { display: none; }
.track.is-current.is-playing .track-cue .track-eq { display: inline-flex; }

/* Little equalizer "now playing" indicator. */
.track-eq {
  align-items: flex-end;
  gap: 2px;
  height: 16px;
}
.track-eq i {
  display: block;
  width: 3px;
  height: 40%;
  background: var(--accent);
  border-radius: 1px;
}
@media (prefers-reduced-motion: no-preference) {
  .track.is-playing .track-eq i { animation: eq 0.9s ease-in-out infinite; }
  .track.is-playing .track-eq i:nth-child(2) { animation-delay: 0.25s; }
  .track.is-playing .track-eq i:nth-child(3) { animation-delay: 0.5s; }
  @keyframes eq {
    0%, 100% { height: 30%; }
    50% { height: 100%; }
  }
}
.track-eq i:nth-child(1) { height: 55%; }
.track-eq i:nth-child(2) { height: 90%; }
.track-eq i:nth-child(3) { height: 45%; }

/* ── Scrub strip (current row only) ──
   Restart · elapsed · draggable seek bar · total. */
.track-scrub {
  display: none;
  align-items: center;
  gap: 0.6rem;
  padding: 0 0.25rem 1rem;
}

.track.is-current .track-scrub {
  display: flex;
}

.scrub-restart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 999px;
  color: var(--text-faint);
  transition: color 0.15s ease, background 0.15s ease;
}
.scrub-restart:hover { color: var(--accent); background: var(--surface); }
.scrub-restart svg { width: 16px; height: 16px; }

.scrub-time {
  font-size: 0.75rem;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* Seek slider — gold fill up to the playhead, draggable thumb. */
.scrub-bar {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right,
    var(--accent) 0%, var(--accent) var(--pct, 0%),
    var(--border) var(--pct, 0%), var(--border) 100%);
  cursor: pointer;
}
.scrub-bar::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
}
.scrub-bar::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
}