.collection-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.collection-list a {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
  border: var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-primary);
  text-decoration: none;
}

.collection-list__id {
  font-family: var(--font-mono);
  font-size: var(--type-mono);
  overflow-wrap: anywhere;
}

.collection-list__added {
  color: var(--color-text-secondary);
  font-size: var(--type-caption);
}

.collection-back {
  justify-self: start;
}

/* Playlist metadata cards share the existing collection navigation. */
.collection-list a.collection-list__playlist {
  grid-template-columns: minmax(140px, 240px) minmax(0, 1fr);
  gap: var(--space-3);
}
.collection-list__cover {
  aspect-ratio: var(--media-ratio);
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.collection-list__cover img { width: 100%; height: 100%; object-fit: cover; }
.collection-list__info { display: grid; gap: var(--space-2); min-width: 0; }
.collection-list__title { font-size: var(--type-h3); overflow-wrap: anywhere; }
.collection-list__creator { display: flex; align-items: center; gap: var(--space-2); }
.collection-list__creator img { border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.collection-list__description {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  color: var(--color-text-secondary);
}
@media (max-width: 560px) {
  .collection-list a.collection-list__playlist { grid-template-columns: minmax(0, 1fr); }
}