/* ============================================================================
   MODERN TASTEMAKER — DEMO LIST STYLES (packs-demos program, lane P1)
   ----------------------------------------------------------------------------
   Styles ONLY what assets/demo-list.js adds inside existing .playlist
   boxes: group headers (.dl-head), the main-demo row emphasis
   (.dl-row-main) and the split-out duration element (.t-dur). Everything
   else — rows, waveforms, progress, the sheet, the cards — keeps its
   existing site.css / rev7.css styling untouched.

   Tokens per DESIGN-LANGUAGE.md (the single token source):
   navy #0B1526 (surface, inherited) · brand orange #B93A03 (the accent —
   the main demo is the one loud moment) · gold #C9A45C used ONLY as the
   hairline rule beside group labels (hairlines are gold's one legal job)
   · muted #B9C2CC secondary text · Oswald micro-labels at +letter-spacing.
   The bright playhead orange #E8622C is the player engine's own live
   dialect (its waveform paints played bars in it); the main-demo label
   borrows it so "the one to hear first" reads in the same voice as the
   player's progress. No new palette is introduced.
   ============================================================================ */

/* ---------- group headers ---------- */
.playlist .dl-head{
  display:flex;align-items:center;gap:10px;
  padding:13px 8px 5px;
  font-family:var(--font-label);
  font-size:.66rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted-light);
  user-select:none;
}
/* Gold is a hairline here, never text: the rule beside the label. */
.playlist .dl-head::after{
  content:"";flex:1 1 auto;min-width:16px;
  border-top:1px solid rgba(201,164,92,.30);
}
.playlist .dl-head:first-child{padding-top:5px}
.playlist .dl-head-label{flex:none}
.playlist .dl-head-tag{
  flex:none;font-size:.58rem;font-weight:500;letter-spacing:.18em;
  color:var(--muted-light);opacity:.65;text-transform:uppercase;
}
/* The main demo is the loud moment: orange label, no tag. */
.playlist .dl-head--main{color:#E8622C;padding-top:7px}

/* ---------- main demo row ---------- */
.playlist .track.dl-row-main{
  background:rgba(185,58,3,.10);
  box-shadow:inset 3px 0 0 #B93A03;
}
@media (hover:hover){
  .playlist .track.dl-row-main:hover{background:rgba(185,58,3,.17)}
}
.playlist .track.dl-row-main.active{background:var(--accent-soft)}

/* ---------- duration element ---------- */
/* In grouped boxes the row grid gains a duration column; .t-meta keeps
   BPM/key only (demo-list.js splits the duration text into .t-dur). */
.dl button.track{
  grid-template-columns:30px minmax(0,1fr) auto auto;
  grid-template-areas:"ic name type dur" "meta meta meta meta" "wave wave wave wave";
}
.dl button.track .t-dur{
  grid-area:dur;align-self:center;justify-self:end;
  font-size:.78rem;font-weight:600;letter-spacing:.03em;
  color:var(--muted-light);font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.dl button.track.dl-row-main .t-dur{color:var(--ink-light)}

/* ---------- card collapse parity ---------- */
/* Card playlists collapse to their HEAR IT head (site.css hides .track);
   group headers hide with their rows. Sheet playlists never collapse. */
.card .playlist:not(.open) .dl-head{display:none}

/* ---------- small screens ---------- */
@media (max-width:480px){
  .playlist .dl-head{letter-spacing:.18em;padding-top:11px}
  .playlist .dl-head-tag{display:none}
}