/* --- The tracklist: the back of the sleeve -------------------------------------------------- */

/* A reading measure, not the page width: a 700px leader says nothing a 400px one does
   not. The dotted leader is the row's only rule. */
.tracklist {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--measure-list);
}
.tracklist > li {
  display: flex;
  align-items: center;
  border-radius: var(--radius-md);
  transition: background-color var(--motion-fast) var(--ease);
}
.tracklist > li:hover { background: var(--surface-2); }
.track {
  display: flex;
  flex: 1;
  align-items: baseline;
  gap: var(--space-4);
  min-width: 0;
  min-height: 2.875rem;
  padding: .625rem var(--space-2) .625rem var(--space-3);
  background: none;
  border: 0;
  border-radius: var(--radius-md);
  color: var(--fg);
  text-align: left;
}
.track-no { flex: none; min-width: 2ch; text-align: right; color: var(--fg-muted); font-size: var(--text-sm); }
.track-main { flex: 0 1 auto; display: grid; min-width: 0; }
.track-title, .track-artist { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track-artist { color: var(--fg-muted); font-size: var(--meta); }
.track-leader {
  flex: 1 1 1.5rem;
  min-width: 1rem;
  border-bottom: 1px dotted rgba(255, 255, 255, .22);
  transform: translateY(-.3em);
}
.track-time { flex: none; color: var(--fg-muted); font-size: var(--text-sm); }

/* A disc's heading row (tracklist.js, albums of more than one disc): "Disc 2" in the
   chrome face, then the subtitle, which is tag text, in the content face. It is not a
   track, so it takes no hover ground. */
.tracklist > li.track-disc { display: block; padding: var(--space-5) var(--space-3) var(--space-2); }
.tracklist > li.track-disc:first-child { padding-top: 0; }
.tracklist > li.track-disc:hover { background: none; }
.track-disc h2 {
  margin: 0;
  color: var(--fg-muted);
  font: 600 var(--text-sm)/1.3 var(--font-chrome);
  letter-spacing: normal;
  /* The chrome face's space is narrow at this size: "Disc 1" read as "Disc1". */
  word-spacing: .12em;
}
.track-disc-sep, .track-disc-title { font-family: var(--font-ui); font-weight: 400; }
.track-disc-title { font-weight: 500; word-spacing: normal; }

/* The playing row looks as it does in the queue (rows.css): a soft brass ground, the
   brass mark, a brass number and title; aria-current says it to assistive tech. */
.tracklist > li.is-current { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
li.is-current .track-no { color: var(--accent); }
li.is-current .track-title { color: var(--accent); font-weight: 500; }

/* The row's star shows on hover and focus, and always once it is lit or on touch. */
.tracklist .star-btn { opacity: 0; transition: opacity var(--motion) var(--ease); }
.tracklist > li:hover .star-btn,
.tracklist .star-btn:focus-visible,
.tracklist .star-btn[aria-pressed="true"] { opacity: 1; }
@media (hover: none) { .tracklist .star-btn { opacity: 1; } }