/* Экран «Моя музыка» (Мне нравится): плитка коллекции + UI скачивания в оффлайн.
   Модель Я.Музыки — крупный вход сверху, дышащий список ниже. Токены и глубина —
   как у остального интерфейса (тёмная лестница поверхностей + один синий акцент).
   Порядок подключения: до responsive.css. */

/* ---------- плитка коллекции «Мне нравится» ---------- */

/* Хиро коллекции = «шапка плейлиста» (Apple Music/Я.Музыка): крупная обложка по
   центру, название под ней, ряд действий ниже. Без карточки-коробки — читается как
   заголовок коллекции, а не как ещё один прямоугольник. Обложка — коллаж 4 обложек
   или тактичная марка-сердце (не градиентный блоб). Порядок apple-design §12. */
.libhero {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 14px; margin: 4px var(--gutter) 22px; padding: 8px 0 2px;
  animation: lib-rise 0.5s var(--ease) both;   /* материализуется, а не вспыхивает */
}
@keyframes lib-rise { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .libhero { animation: none; } }

.libhero__art {
  flex: none; width: 168px; height: 168px; border-radius: 22px; overflow: hidden;
  display: grid; place-items: center;
  background: radial-gradient(120% 120% at 30% 22%, var(--accent-tint), var(--surface-2) 72%);
  box-shadow: 0 22px 46px -20px rgba(0, 0, 0, 0.72), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.libhero__heart { color: var(--accent-soft); opacity: 0.95; }
.libhero__heart .ic { width: 58px; height: 58px; }
/* Коллаж 2×2 из первых обложек — «живая» обложка вместо марки. */
.libhero__art--collage {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line-soft), 0 22px 46px -20px rgba(0, 0, 0, 0.72);
}
.libhero__tile { overflow: hidden; }
.libhero__tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

.libhero__info { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.libhero__name { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.libhero__meta { font-size: 13px; font-weight: 600; color: var(--t3); font-variant-numeric: tabular-nums; }
/* Ряд действий по центру под названием. flex-wrap — страховка под крупный шрифт. */
.libhero__actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 2px; }

/* Десктоп — обложка крупнее, как настоящая шапка плейлиста. */
@media (min-width: 1024px) {
  .libhero__art { width: 200px; height: 200px; }
  .libhero__name { font-size: 30px; }
}

/* Акцентная пилюля «Слушать» — главное действие коллекции. */
.playpill {
  display: inline-flex; align-items: center; gap: 7px;
  height: 40px; padding: 0 20px 0 16px; border-radius: var(--pill);
  background: var(--accent); color: var(--on-accent);
  font-size: 14px; font-weight: 700; letter-spacing: -0.01em;
  box-shadow: 0 8px 18px -8px var(--accent-glow);
  transition: transform var(--dur-press) var(--ease), background var(--dur) var(--ease);
}
.playpill:active { transform: scale(0.96); }
.playpill .ic { width: 15px; height: 15px; }

/* Вторичные круглые действия: перемешать, скачать, удалить скачанное. */
.iconbtn2 {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; border-radius: var(--pill);
  background: var(--surface-2); color: var(--t1);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur-press) var(--ease);
}
.iconbtn2:active { background: var(--surface-3); transform: scale(0.94); }
/* Состояние скачивания на иконке #dl-btn (id — чтобы не тащить лишний класс). */
#dl-btn[data-state="done"] { color: var(--accent); }
#dl-btn[data-state="running"] { color: var(--accent-soft); }

/* ---------- служебное скачивания (тонко, под плиткой) ---------- */

.dlbar { display: flex; flex-direction: column; gap: 8px; margin: -6px var(--gutter) 16px; }
.dlprog { height: 4px; border-radius: var(--pill); background: var(--surface-2); overflow: hidden; }
.dlprog > i {
  display: block; height: 100%; width: 0; border-radius: var(--pill);
  background: linear-gradient(90deg, var(--accent), var(--accent-hi));
  transition: width 0.28s var(--ease);   /* геометрия ширины — из JS (контракт №5) */
}
.dlmeta { font-size: 11.5px; font-weight: 500; color: var(--t4); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .dlprog > i { transition: none; } }

@media (hover: hover) {
  .playpill:hover { background: var(--accent-hi); }
  .iconbtn2:hover { background: var(--surface-3); }
}