/* Пикер любимых артистов (#sheet-artists, features/artist-picker.js). Полноэкранная
   шторка: скроллимый грид кружков + закреплённый низ с «Готово». Drag выключен —
   это шаг выбора, не сворачиваемая панель. Подключается перед responsive.css. */

.apick { --drag: 0; }
.apick .sheet__body { display: flex; flex-direction: column; }
.apick__sub { padding: 0 18px 12px; font-size: 13px; font-weight: 500; color: var(--t3); }

.apick__grid {
  flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 10px;
  padding: 4px 16px 16px;
}
.apick__card { display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; }
.apick__art {
  position: relative; width: 92px; max-width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; background: var(--surface-2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  transition: transform var(--dur-press) var(--ease), box-shadow 0.2s var(--ease);
}
.apick__art img { width: 100%; height: 100%; object-fit: cover; }
.apick__ini { font-size: 30px; font-weight: 800; color: var(--t3); }
.apick__check {
  position: absolute; inset: 0; display: grid; place-items: center; color: var(--on-accent);
  background: color-mix(in srgb, var(--accent) 62%, transparent);
  opacity: 0; transform: scale(0.6);
  transition: opacity 0.18s var(--ease), transform 0.28s var(--ease-cine);
}
.apick__card--on .apick__art { box-shadow: 0 0 0 3px var(--accent); transform: scale(0.94); }
.apick__card--on .apick__check { opacity: 1; transform: scale(1); }
.apick__name { font-size: 12px; font-weight: 700; text-align: center; line-height: 1.15; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.apick__card--new { animation: apick-rise 0.42s var(--ease-cine) both; }
@keyframes apick-rise { from { opacity: 0; transform: translateY(10px) scale(0.9); } }
@media (prefers-reduced-motion: reduce) {
  .apick__card--new { animation: none; }
  .apick__art, .apick__check { transition: opacity 0.15s var(--ease); }
}

.apick__foot { padding: 12px 16px calc(var(--safe-b) + 14px); background: linear-gradient(180deg, transparent, var(--bg) 42%); }
.apick__done {
  width: 100%; height: 52px; border-radius: var(--pill); border: 0; cursor: pointer;
  background: var(--accent); color: var(--on-accent); font-size: 16px; font-weight: 800;
  box-shadow: 0 10px 24px -10px var(--accent-glow);
  transition: transform var(--dur-press) var(--ease), opacity 0.2s var(--ease);
}
.apick__done:active { transform: scale(0.98); }
.apick__done:disabled { opacity: 0.4; box-shadow: none; cursor: default; }

@media (min-width: 1024px) { .apick__grid { grid-template-columns: repeat(5, 1fr); } .apick__art { width: 110px; } }