/* Tailwind handles most layout/typography via CDN. Only custom states live here. */

/* Tab buttons (admin nav) */
.tab-btn { color: rgb(120 113 108); }                 /* stone-500 */
.tab-btn:hover { background: rgb(245 245 244); }      /* stone-100 */
.tab-btn.active { background: rgb(28 25 23); color: white; }  /* stone-900 */

/* Drag-and-drop visual feedback */
#tab-tracks.drag-over #drop-hint {
  border-color: rgb(28 25 23);
  background: rgb(245 245 244);
  color: rgb(28 25 23);
}
.track-row.drag-over { outline: 2px solid rgb(28 25 23); outline-offset: -2px; }
.track-row.drag-over .version-drop {
  border-color: rgb(28 25 23);
  color: rgb(28 25 23);
  background: rgb(245 245 244);
}

/* WaveSurfer container should fill available width */
#waveform { min-height: 80px; }

/* Listener tracklist: numbers outside the tile, aligned to top */
#tracklist {
  list-style: none;
  counter-reset: track;
  padding-left: 1.75rem;
}
#tracklist > li {
  counter-increment: track;
  position: relative;
}
#tracklist > li::before {
  content: counter(track);
  position: absolute;
  left: -1.75rem;
  top: 0.6rem;
  width: 1.25rem;
  text-align: right;
  color: rgb(168 162 158);   /* stone-400 */
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
}

/* Loading state for waveform: dim while audio is buffering. */
.waveform-wrap.is-loading { opacity: .35; }
.waveform-wrap { min-height: 36px; }

/* Pencil shows only when the title block is hovered. */
.title-wrap .edit-pencil { opacity: 0; }
.title-wrap:hover .edit-pencil,
.title-wrap:focus-within .edit-pencil { opacity: 1; }

/* Admin track row drag-and-drop reorder indicators. */
#track-rows li.drag-above .card { box-shadow: 0 -2px 0 0 rgb(28 25 23); }
#track-rows li.drag-below .card { box-shadow: 0 2px 0 0 rgb(28 25 23); }

/* File-drop highlight on tracks tab + individual rows */
#tab-tracks.drag-file-over #drop-hint {
  border-color: rgb(28 25 23);
  background: rgb(245 245 244);
  color: rgb(28 25 23);
}
#track-rows li.drag-file-over .card {
  outline: 2px solid rgb(28 25 23);
  outline-offset: -2px;
}