/* ---------- экраны деталей: альбом и артист ---------- */

.dhero {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 4px var(--gutter) 20px; text-align: center;
}
.dhero .cover { width: min(220px, 56vw); height: auto; aspect-ratio: 1 / 1; border-radius: var(--r-card); box-shadow: var(--shadow-2); }
/* Радиус повторён намеренно: detail.css идёт после covers.css и правило
   .dhero .cover иначе перебивает круглую форму аватара. */
.dhero--artist .cover { width: min(168px, 44vw); border-radius: 50%; box-shadow: var(--shadow-1); }

/* Трекинг идёт за кеглем: крупный заголовок иначе рассыпается на буквы. */
.dhero__title {
  font-size: 22px; font-weight: 800; line-height: 1.18; letter-spacing: -0.02em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dhero--artist .dhero__title { font-size: 26px; letter-spacing: -0.025em; }

/* Имя артиста в шапке альбома — вход на его экран, поэтому оно обязано
   выглядеть нажимаемым, а не подписью. */
.dhero__artist {
  padding: 6px 14px; border-radius: var(--pill);
  font-size: 13px; font-weight: 700; color: var(--accent-soft); background: var(--accent-tint);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.dhero__artist:active { background: var(--accent-tint); transform: scale(0.97); }
.dhero__meta { font-size: 12px; font-weight: 500; letter-spacing: 0.01em; color: var(--t3); }

.dhero__actions { display: flex; gap: 8px; padding: 0 var(--gutter) var(--gap-sec); }
.ghostbtn:disabled { opacity: 0.4; }

/* Нумерованный трек-лист альбома */
.tracklist--num .trackrow { gap: 14px; padding-left: 12px; }
.trackrow__num {
  flex: none; width: 22px; text-align: center;
  font-size: 13px; font-weight: 500; color: var(--t3); font-variant-numeric: tabular-nums;
}
.trackrow--on .trackrow__num { color: var(--accent-soft); }
.trackrow__dur { flex: none; font-size: 11px; font-weight: 500; color: var(--t3); font-variant-numeric: tabular-nums; }

/* ---------- история поиска ---------- */

.histlist { display: flex; flex-direction: column; gap: 2px; padding: 0 calc(var(--gutter) - 8px); }
.histrow { display: flex; align-items: center; border-radius: var(--r-card); transition: background var(--dur) var(--ease); }
.histrow:active { background: var(--wash); }
.histrow__go {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--gap-el);
  padding: 12px 8px; text-align: left; font-size: 15px; font-weight: 500;
}
.histrow__go span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.histrow__del { flex: none; display: flex; padding: 12px 12px; color: var(--t4); transition: color var(--dur) var(--ease); }
.histrow__del:active { color: var(--t1); }

/* ---------- скелетоны ---------- */

/* Пока едет сеть, экран показывает форму будущего списка, а не пустоту:
   так видно, что данные придут, и куда именно. Пульс — базовое «дыхание»,
   поверх бежит мягкий блик (::after, только transform — компоновщику дёшево);
   под prefers-reduced-motion блик гасится (см. responsive.css). */
.skel { position: relative; overflow: hidden; background: var(--surface-2); border-radius: var(--r-sm); animation: skel-pulse 1.6s var(--ease) infinite; }
.skel::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent); animation: skel-shimmer 1.2s var(--ease) infinite; }
.skel--row { height: 52px; margin: 2px calc(var(--gutter) - 8px); border-radius: var(--r-card); }
@keyframes skel-pulse { 50% { opacity: 0.7; } }
@keyframes skel-shimmer { to { transform: translateX(100%); } }

/* Контент проявляется поверх скелетона мягким кроссфейдом, а не резкой заменой. */
.fadein { animation: fade var(--dur-slow, 320ms) var(--ease); }