/* ============================================================
   ИИ-ПЕРСОНЫ YAZME | ОБЩАЯ ШАПКА РАЗДЕЛА
   Файл: persona/assets/topbar.css

   Один файл на все страницы раздела: главную-витрину, каталог,
   а дальше и на всё остальное, что получит pnTopBar(). Пока эти
   правила лежали внутри browse.css, их пришлось бы держать в двух
   местах — и однажды поправить одно, забыв про второе.

   Ни одного нового цвета: всё построено на токенах раздела
   (persona/assets/tokens.css), поэтому шапка едет за темой сайта —
   и в янтарной, и в светлой «Cloud Dancer», и в «Полночи».

   Подключать ПЕРЕД страничным файлом:
     <link rel="stylesheet" href="/persona/assets/topbar.css">
     <link rel="stylesheet" href="/persona/assets/showcase.css">
   ============================================================ */

/* ШАПКА — СЕТКА, А НЕ РЯД С РАСПОРКОЙ                    (26.08.2026)
   ─────────────────────────────────────────────────────────────────
   Было: flex + .pvh-grow{flex:1}. На ноутбуке это давало пустую левую
   половину экрана и прижатую к правому краю кучу: кнопка, два кружка,
   поле поиска. Поиск — главное в этой шапке — оказывался в самом
   неудобном углу, а взгляд шёл от логотипа сразу за 1200 пикселей
   пустоты.

   Стало: три колонки. Слева логотип, В ЦЕНТРЕ ПОИСК, справа действия.
   Боковые колонки — по 1fr с минимумом в собственный контент: пока
   места хватает, они равны, поэтому поле стоит ровно по середине
   экрана, а не «примерно посередине». Не хватает — колонки сжимаются
   до содержимого, и первым уступает поле, а не кнопки.

   На телефоне (до 820px) сетка складывается в две строки: логотип и
   действия сверху, поиск во всю ширину под ними. Это дороже по высоте,
   но поле обязано быть видно с первого пикселя — в раздел приходят за
   конкретным именем. */
.pvh{
  position:sticky; top:0; z-index:45;
  display:grid; grid-template-columns:auto minmax(0,1fr);
  align-items:center; column-gap:var(--sp2); row-gap:var(--sp2);
  padding:var(--sp3) var(--sp4);
  background:var(--glass); backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border-bottom:1px solid var(--hair);
}
/* Телефонная раскладка: строка действий сверху, поиск — во всю ширину. */
.pvh-logo{ grid-column:1; grid-row:1; }
.pvh-acts{
  grid-column:2; grid-row:1; justify-self:end;
  display:flex; align-items:center; gap:var(--sp2); min-width:0;
}
.pvh-logo{
  display:flex; align-items:center; gap:8px; flex:none; text-decoration:none;
  font:800 16px/1 var(--f-display); letter-spacing:-.02em; color:var(--t1);
}
.pvh-logo i{
  width:26px; height:26px; border-radius:8px; background:var(--hero-grad);
  display:grid; place-items:center; font:800 14px/1 var(--f-display);
  color:var(--on-hero); font-style:normal;
}
.pvh-logo em{ font-style:normal; color:var(--hero); }
/* .pvh-grow из разметки убран — распорку заменила сетка. Правила для него
   здесь больше нет: в сетке flex:1 не значит ничего. */

.pvh-ib{
  position:relative; width:var(--ctl-vis); height:var(--ctl-vis); flex:none;
  border-radius:var(--r-full); display:grid; place-items:center;
  background:var(--s2); border:1px solid var(--hair); color:var(--t1);
  transition:background var(--d-micro) var(--e-out);
}
.pvh-ib:hover{ background:var(--s3); }
/* Хит-зона 44px по WCAG 2.2 при визуальном размере 36 — разницу
   добираем псевдоэлементом, как это сделано в ui.css раздела. */
.pvh-ib::after{ content:''; position:absolute; inset:-4px; }
.pvh-ib svg{ width:18px; height:18px; }
.pvh-ib b{
  position:absolute; top:-3px; right:-3px; min-width:18px; height:18px; padding:0 5px;
  border-radius:var(--r-full); background:var(--hero); color:var(--on-hero);
  font:700 11px/18px var(--f-ui); text-align:center; border:2px solid var(--s0);
}
/* УСТАНОВИТЬ ПРИЛОЖЕНИЕ — ТОЛЬКО ТЕЛЕФОН.
   Файл написан от телефона вверх (десктоп начинается с min-width:820px),
   поэтому кнопка видна здесь и скрывается в десктопном блоке ниже. На ПК
   она и не нужна: Chrome показывает свой значок установки прямо в адресной
   строке, а логика в yz_boot_client.php на ширине больше 768 системный
   диалог и не перехватывает.

   Два класса решают, показывать ли её: yz-standalone — страницу уже открыли
   КАК приложение, yz-pwa-installed — приложение стоит, но открыли в браузере.
   В обоих случаях предлагать установку незачем.

   КЛАССЫ СМОТРИМ НА <html>, А НЕ НА <body>, И ЭТО ГЛАВНОЕ ЗДЕСЬ. На body их
   вешал скрипт из низа страницы — то есть уже ПОСЛЕ того, как браузер нарисовал
   шапку. У человека с установленным приложением кнопка успевала вспыхнуть и
   только потом пропадала, при каждом обновлении. Теперь класс ставится в <head>
   (yz_pwa_head в includes/yz_boot_client.php), до первой отрисовки, а <body> в
   тот момент ещё не существует — отсюда html. */
.pvh-app{ display:none; }
html:not(.yz-standalone):not(.yz-pwa-installed) .pvh-app{
  display:grid; place-items:center;
  width:var(--ctl-vis); height:var(--ctl-vis); flex:none;
  border-radius:var(--r-full); background:var(--s2);
  border:1px solid var(--hair); color:var(--t1); cursor:pointer;
  transition:background var(--d-micro) var(--e-out);
}
.pvh-app:hover{ background:var(--s3); }
.pvh-app svg{ width:17px; height:17px; }

/* Страховка на случай, когда JavaScript до нас не доехал или localStorage
   недоступен (приватный режим, отключённые куки). Внутри установленного
   приложения этот запрос истинен всегда и без единой строчки кода — значит
   кнопка не покажется даже в самом плохом случае.
   !important здесь вынужденный: правило показа выше весит (0,3,1) из-за
   html:not():not(), а @media веса не добавляет — без !important эта строка
   проиграла бы. Тот же случай, что разобран в persona/inc/ui.php у
   #notif-dropdown.hidden. */
@media (display-mode: standalone){
  .pvh-app{ display:none!important; }
}

/* «Войти» для гостя. Намеренно не кружок: значка со смыслом «войти»,
   который читался бы однозначно, нет — прежняя стрелка в дверном проёме
   понималась как выход. Форма и высота те же, что у .pvh-make рядом, но
   цвет тихий: вход — второе действие, первое здесь «Собрать своего».
   Подпись не прячется ни на одной ширине: пять букв дешевле любого
   значка, а места они занимают меньше, чем кружок с иконкой. */
.pvh-in{
  display:inline-flex; align-items:center; flex:none;
  height:var(--ctl-vis); padding:0 14px; border-radius:var(--r-full);
  background:var(--s2); border:1px solid var(--hair); color:var(--t1);
  text-decoration:none; font:700 13px/1 var(--f-ui); white-space:nowrap;
  transition:background var(--d-micro) var(--e-out);
}
.pvh-in:hover{ background:var(--s3); }

.pvh-make{
  display:inline-flex; align-items:center; gap:7px; flex:none;
  height:var(--ctl-vis); padding:0 15px 0 11px; border-radius:var(--r-full);
  background:var(--hero); color:var(--on-hero); text-decoration:none;
  font:700 13px/1 var(--f-ui); box-shadow:var(--sh-hero);
  transition:background var(--d-micro) var(--e-out), transform var(--d-micro) var(--e-spring);
}
.pvh-make:hover{ background:var(--hero-hi); transform:translateY(-1px); }
.pvh-make svg{ width:17px; height:17px; }
/* Подпись у кнопки прячется раньше, чем раньше (было 980).
   Причина в новой сетке: правая колонка с подписью весит ~270px, и в
   полосе 980-1150 она перевешивает левую с логотипом — поле поиска
   переставало стоять по центру и уезжало вправо. Ниже 1150 от кнопки
   остаётся кружок с плюсом, колонки уравниваются, центр держится. */
@media (max-width:1150px){
  .pvh-make span{ display:none; }
  .pvh-make{ padding:0; width:var(--ctl-vis); justify-content:center; }
}

.pvh-find{
  grid-column:1 / -1; grid-row:2;
  width:100%; display:flex; align-items:center; gap:var(--sp3);
  height:44px; padding:0 6px 0 var(--sp4); border-radius:var(--r-full);
  background:var(--s1); border:1px solid var(--hair);
  transition:border-color var(--d-micro) var(--e-out), background var(--d-micro) var(--e-out);
}
.pvh-find:focus-within{ border-color:var(--hero-line); background:var(--s2); }
.pvh-find > svg{ width:18px; height:18px; flex:none; color:var(--t3); }
.pvh-find input{
  flex:1; min-width:0; background:none; border:0; outline:0;
  color:var(--t1); font:500 var(--fs-body)/1 var(--f-ui);
}
.pvh-find input::placeholder{ color:var(--t3); }
.pvh-find input::-webkit-search-cancel-button{ display:none; }
.pvh-clr{
  width:32px; height:32px; flex:none; border-radius:var(--r-full);
  display:none; place-items:center; color:var(--t2); background:none; border:0; cursor:pointer;
}
.pvh-clr svg{ width:14px; height:14px; }
.pvh-find.has .pvh-clr{ display:grid; }
.pvh-clr:hover{ background:var(--s3); color:var(--t1); }
/* ---------- десктоп: три колонки в одну строку ---------- */
@media (min-width:820px){
  /* На десктопе установка не предлагается — см. комментарий у .pvh-app.
     Селектор с тем же весом, что и правило показа выше, иначе не перебьёт:
     @media собственного веса не добавляет. */
  html:not(.yz-standalone):not(.yz-pwa-installed) .pvh-app{ display:none; }

  .pvh{
    grid-template-columns:minmax(max-content,1fr) minmax(0,520px) minmax(max-content,1fr);
    column-gap:var(--sp4); row-gap:0;
  }
  .pvh-logo{ grid-column:1; grid-row:1; justify-self:start; }
  /* Поиск в средней колонке. justify-self:center нужен на случай, когда
     колонка шире 520px не бывает — поле не растягивается сверх меры и
     остаётся ровно по центру. */
  .pvh-find{
    grid-column:2; grid-row:1;
    width:100%; max-width:520px; justify-self:center; margin:0; height:40px;
  }
  .pvh-acts{ grid-column:3; grid-row:1; justify-self:end; }

  /* Страница без поиска (pnTopBar(['search' => false])). Средняя колонка
     задана максимумом в 520px и вырастет до него даже пустой — получилась
     бы дыра в полэкрана. Поэтому на такой шапке колонок снова две. */
  .pvh.pvh--nofind{ grid-template-columns:auto minmax(0,1fr); }
  .pvh.pvh--nofind .pvh-acts{ grid-column:2; }
}

.pvh a:focus-visible, .pvh button:focus-visible{
  outline:var(--focus-w) solid var(--focus); outline-offset:var(--focus-off);
}

/* Класса для скринридера здесь нет намеренно: .pv-sr уже объявлен
   в ui.css, а ui.css подключает pnHead() на каждой странице раздела. */

@media (prefers-reduced-motion:reduce){
  .pvh-make, .pvh-ib, .pvh-in, .pvh-app{ transition:none; }
}