/* ============================================================
   Общая шапка Essence Music (#appbar) на всех экранах.
   Вкладки:        ● ИМЯ                      поиск  аватар  выход
   Вложенные:      ‹ НАЗВАНИЕ СТРАНИЦЫ        поиск  аватар  выход
   Уходит вверх при прокрутке вниз, возвращается при прокрутке вверх.
   Скрыта на «Профиле» и «Исполнителе»: там свои обложки с кнопкой назад.
   ============================================================ */
:root {
  --bar-h: 58px;
  --bar-full: calc(var(--bar-h) + env(safe-area-inset-top, 0px));
  --bar-vis: var(--bar-full);               /* текущая видимая высота, меняет appbar.js */
  --bar-ease: cubic-bezier(0.22, 0.68, 0, 1);
}

#appbar.home-header {
  margin: 0;
  height: var(--bar-full);
  padding: env(safe-area-inset-top, 0px) 16px 0;
  gap: 10px;
  background: rgba(7, 7, 8, 0.82);
  transition: transform 0.3s var(--bar-ease), border-color 0.2s, box-shadow 0.3s;
  will-change: transform;
}
@media (max-width: 480px) { #appbar.home-header { padding-left: 12px; padding-right: 12px; } }
#appbar.home-header.scrolled { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42); }
#appbar.is-away { transform: translateY(-100%); box-shadow: none; }

/* левая часть: имя на вкладках, «назад + название» на вложенных страницах */
#appbar #bar-back { order: 0; display: none; margin-left: -6px; color: var(--text); }
#appbar .username { order: 1; }
#appbar #bar-title {
  order: 1; display: none; flex: 1; min-width: 0; cursor: pointer;
  font-family: 'Unbounded', 'Onest', system-ui, sans-serif;
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#appbar.is-sub #bar-back { display: flex; }
#appbar.is-sub #bar-title { display: block; }
#appbar.is-sub .username { display: none; }
#appbar.is-sub #bar-title, #appbar:not(.is-sub) .username { animation: bar-in 0.26s var(--bar-ease) both; }
@keyframes bar-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }

/* на «Поиске» лупа не нужна */
#appbar.on-search #goto-search { display: none; }

/* выход в два касания: первое превращает иконку в «Выйти?» */
#appbar #logout-btn .lo-t { display: none; font-size: 12px; font-weight: 600; white-space: nowrap; }
#appbar #logout-btn.armed { width: auto; padding: 0 12px; gap: 6px; background: #e5484d; color: #fff; }
#appbar #logout-btn.armed .lo-t { display: inline; }

/* залипающее поле поиска опускается под шапку и поднимается вместе с ней */
#view-search .search-wrap { top: calc(var(--bar-vis) + 8px); transition: top 0.3s var(--bar-ease); }

/* отступы под шапкой */
#main-view .page:not(.page-flush) { padding-top: 8px; }
#main-view #view-home { padding-top: 0; }

/* «Моя музыка»: аватар и поиск теперь в общей шапке, остаётся заголовок */
#view-likes .lib-ava, #view-likes #lib-search { display: none; }
#view-likes .lib-head { margin-bottom: 14px; }

/* вложенные страницы: «назад» и заголовок переехали в шапку.
   Строка остаётся только если в ней есть кнопки действий (например «Обновить» в админке). */
.page > .view-head > .back-btn, .page > .view-head > .page-title { display: none; }
.page > .view-head { justify-content: flex-end; margin-bottom: 10px; }
.page > .view-head:not(:has(.btn:not(.hidden), .section-play:not(.hidden), .icon-btn:not(.back-btn))) { display: none; }

@media (prefers-reduced-motion: reduce) {
  #appbar.home-header, #view-search .search-wrap { transition: none; }
  #appbar.is-sub #bar-title, #appbar:not(.is-sub) .username { animation: none; }
}