/* ============================================================
   Essence Music: слой доводки интерфейса. Подключается последним.
   Каждый блок закрывает проблему, найденную замерами (audit.py, perf.py).
   Вид экранов не меняется, кроме мест, где в комментарии сказано иначе.
   ============================================================ */

:root {
  color-scheme: dark;                 /* родные полосы прокрутки, выпадающие списки и поля ввода тоже тёмные */
  --muted2: #8b8b94;                  /* было #63636b: на карточках контраст был 3,0, теперь 5,2 (норма 4,5) */
}
html { scroll-padding-top: calc(var(--bar-full, 58px) + 8px); }   /* поле в фокусе не прячется под шапкой */

/* ---------- 1. Боковой вылет ---------- */
/* Полосы «на всю ширину» посчитаны под поля 16px, а на телефоне поля 12px, поэтому каждая торчала на 4px */
@media (max-width: 480px) {
  .hero { margin-left: -12px; margin-right: -12px; }
  .lib-cols, .st-tabs, .lib-sheet { margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; }
  .lib-bars { margin-left: -12px; margin-right: -12px; }
}
/* Длинное название альбома раздувало карточку, и страница «Альбомы» становилась шире экрана в 2,7 раза */
.album-card > * { min-width: 0; max-width: 100%; }
.album-card-name { align-self: stretch; }
/* Страховка: что бы ни вылезло в будущем, страница не поедет вбок. clip, в отличие от hidden, не ломает sticky */
@supports (overflow: clip) { #main-view { overflow-x: clip; } }

/* ---------- 2. Зона нажатия не меньше 44px ----------
   Видимая кнопка прежняя, нажимаемая область вокруг неё шире (так сделано в iOS и Android) */
.home-header .icon-btn, .home-header .avatar, .hero-settings, .section-play, .list-more,
.track .btn.heart, .track .btn.menu-btn, .track .btn.danger { position: relative; }
.home-header .icon-btn::after, .home-header .avatar::after,
.track .btn.heart::after, .track .btn.menu-btn::after, .track .btn.danger::after { content: ''; position: absolute; inset: -4px; }
.hero-settings::after { content: ''; position: absolute; inset: -14px -10px; }
.section-play::after { content: ''; position: absolute; inset: -9px -6px; }
.list-more::after { content: ''; position: absolute; inset: -8px -6px; }
/* кнопка выбора файлов в загрузке: чуть выше, раньше 36px */
.dz-pick { min-height: 40px; }
/* ползунок лимита в «Пати»: тянуть можно за полосу высотой 40px, а не 6px; сама полоса осталась тонкой */
.pt-range { height: 40px; background: transparent; border-radius: 0; cursor: pointer; }
.pt-range::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, #fff var(--p, 17%), #2c2c32 var(--p, 17%)); }
.pt-range::-moz-range-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, #fff var(--p, 17%), #2c2c32 var(--p, 17%)); }
.pt-range::-webkit-slider-thumb { margin-top: -8px; }
.pt-range:focus-visible { outline: 0; }
.pt-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.14), 0 0 0 7px #fff; }
.pt-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 7px #fff; }

/* ---------- 3. Нижнее меню ---------- */
/* «Моя музыка» переносилась на вторую строку у выбранной вкладки и на узких экранах */
.nav-btn span { white-space: nowrap; font-size: clamp(10px, 3.05vw, 12px); }

/* ---------- 4. Быстрые длинные списки ----------
   Строки за экраном не раскладываются и не рисуются, пока до них не докрутят.
   auto в contain-intrinsic-size запоминает настоящую высоту после первого показа */
/* Только там, где списки длинные: поиск, исполнители, альбомы. На «Моей музыке» это замедляло первый кадр
   (A/B-замер: 395 мс без правила и 1110 мс с ним), поэтому там строки показываются как обычно */
#view-search .track, #view-search .collection-row, #view-artists .collection-row { content-visibility: auto; contain-intrinsic-size: auto 68px; }
.album-grid .album-card { content-visibility: auto; contain-intrinsic-size: auto 232px; }

/* ---------- 5. Админка ---------- */
/* Раньше плитки и блоки были пустыми, потом данные выдвигали всё вниз на 590px (сдвиг вёрстки 0,56 при норме до 0,1).
   Теперь место занято сразу: плитки-заглушки ставит polish.js, а у пустых блоков ниже задана высота */
@keyframes pl-shimmer { to { background-position: -200% 0; } }
.pl-sk, #admin-server:empty, #admin-storage:empty, #admin-apps:empty {
  background: linear-gradient(100deg, var(--card) 30%, #1f1f24 50%, var(--card) 70%) 0 0 / 200% 100%;
  animation: pl-shimmer 1.6s linear infinite;
}
.pl-sk > * { visibility: hidden; }
.pl-sk-row { height: 18px; margin: 5px 0; border-radius: 6px; background: #1f1f24; }
.pl-sk-row > * { visibility: hidden; }
#admin-server:empty { min-height: 364px; }
#admin-storage:empty { min-height: 192px; }
#admin-apps:empty { min-height: 76px; }
#view-admin:has(#admin-error:not(.hidden)) :is(.pl-sk, #admin-server:empty, #admin-storage:empty, #admin-apps:empty) { display: none; }
/* пользователи на телефоне: карточка в два ряда вместо четырёх (было 216px на человека) */
@media (max-width: 560px) {
  .users-table tr {
    display: grid; grid-template-columns: 1.6fr 1fr 1fr; column-gap: 8px; row-gap: 2px;
    padding: 10px 12px; margin-bottom: 8px;
    content-visibility: auto; contain-intrinsic-size: auto 92px;
  }
  .users-table td { padding: 0; min-width: 0; }
  .users-table td[data-label="Имя"] { grid-column: 1 / -1; margin-bottom: 4px; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
  .users-table td::before { font-size: 11px; margin-bottom: 0; }
}

/* ---------- 6. Клавиатура и системные настройки ---------- */
/* единый видимый фокус там, где свой не задан (:where даёт нулевую специфичность, поэтому существующие правила главнее) */
:where(button, a[href], [role="button"], input, select, textarea, summary):focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* «меньше движения» в настройках системы: анимации сводятся к конечному кадру */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}