/* Единая шапка всех вкладок.

   Один источник правды: Jinja-страницы подключают файл ссылкой, а
   генератор «Обзора» (cyberpunk/generate_ozon_dashboard.py) встраивает
   его текст в <style> — тот дашборд собирается автономным файлом.
   Разметка тоже одна: templates/_topbar.html и та же вёрстка в генераторе.

   Правила .topbar* держим ТОЛЬКО здесь. Раньше они лежали в style.css,
   neon-theme.css и cyberpunk/themes/neon-grid.css — темы правили шапку
   каждая по-своему, и переход на вкладку Cyberpunk выглядел как переход
   на другой сайт. Цвета заданы литералами, а не через переменные темы,
   чтобы шапка не менялась вслед за палитрой конкретной страницы.

   Оформление — как в меню лендинга (landing_lab, вариант 11 «Затмение»):
   без плашек и скруглений, капитель с разрядкой, активная вкладка помечена
   тонкой чертой снизу. Разрядка здесь меньше лендинговой (.16em против
   .28em): пунктов всё равно больше, чем в меню витрины, и при лендинговой
   они не помещаются в строку. Шрифт тоже лендинговый — гротеск, а не общий
   для приложения моноширинный.

   Владельческие вкладки убраны в папку «Владелец» (tabs.py: menu) — стили
   выпадающего списка ниже, в разделе .topbar-folder. */

/* Весь файл — в слое `legacy`. Смысл: правило вне слоя бьёт правило внутри
   любого слоя, независимо от специфичности и порядка. Пока хоть один наш файл
   оставался вне слоёв, утилиты Tailwind проигрывали ему молча — выглядело бы
   как «Tailwind не работает».

   Внутри слоя всё как раньше: файлы соперничают между собой по прежним
   правилам, порядок подключения тот же. Меняется только одно — утилита теперь
   перебивает старый CSS, потому что слой `utilities` объявлен после `legacy`
   (порядок задан в ozon_margin/tailwind.css).

   Оборачивать надо ВСЕ файлы разом, включая cyberpunk/dashboard.css: он
   вклеивается внутрь собранного «Обзора», и оставшись единственным вне слоёв,
   начал бы выигрывать у всего приложения. */
@layer legacy {
.topbar {
  /* Шапка не участвует в перетекании страниц: у неё своё имя, значит свой
     слой снимка, и переход её не трогает вовсе (`@view-transition` —
     chrome-tokens.css). Без имени она попадает в общий снимок `root` и
     проявляется вместе со всей страницей — меню моргает на каждом переходе,
     хотя на обеих страницах оно одно и то же. Анимация ей снята ниже. */
  view-transition-name: topbar;
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: stretch;
  gap: 14px;
  /* Высота — из общего токена: от неё же отсчитывают место парковки липкие
     шапки таблиц (chrome-tokens.css). Разъедутся числа — шапка столбцов
     уедет под меню, и это заметят не сразу. */
  height: var(--topbar-h, 58px);
  padding: 0 18px;
  /* Боковой отступ имени папки. Пункты её списка берут его же — иначе
     «Итоги» стоят на пять пикселей правее «Анализа», под которым висят, и
     список читается как чужая плашка, а не как продолжение вкладки. На узких
     экранах отступ ужимается вместе с вкладками (медиазапросы внизу файла). */
  --folder-pad: 9px;
  /* Сколько курсор должен простоять на папке, прежде чем выпадет список.
     Закрывается он без задержки: увели мышь — убрали. */
  --folder-delay: .35s;
  /* Подложка непрозрачная и без нижней черты (--chrome-bg в
     chrome-tokens.css): прежняя полупрозрачная с размытием черту требовала —
     без неё прокрученное содержимое просвечивало сквозь меню. Непрозрачной
     граница не нужна: содержимое просто уходит под неё, а разделяет меню и
     страницу карточка заголовка (`.page-header` в style.css). */
  background: var(--chrome-bg);
  /* Размытие подложки при непрозрачном фоне ничего не размывает — оставлено
     ради побочного действия: оно делает шапку containing block для `fixed`,
     а на телефоне на этом стоит список папки вкладок (см. медиазапрос ниже,
     `.topbar-folder__menu`). Уберёшь — список уедет к низу экрана. */
  backdrop-filter: blur(14px);
  font-family: var(--font-module, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif);
}

.topbar-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--fs-base, 12.5px);
  font-weight: 900;
  letter-spacing: .3em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
}
.topbar-logo .dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 10px var(--blue);
}

/* Вкладок много, а справа ещё кнопки: список ужимается, но никогда не
   переносит шапку на вторую строку.

   Прокрутки здесь больше нет, и вернуть её нельзя: любой overflow, кроме
   visible, срезает выпадающие папки (.topbar-folder__menu) — меню оказалось
   бы обрезано по нижнему краю шапки. Место на узких экранах отыгрывается
   медиазапросом внизу файла: у вкладок ужимаются отступы и разрядка. Ровно
   ради этого вкладки и собраны в папки — прокрученная вкладка не находится
   нигде, а список из тринадцати штук в строку не помещался.

   visible написан явно, а не просто «свойства нет»: в «Обзор» вклеена копия
   этого файла, снятая при сборке дашборда, и в ней прокрутка ещё живёт.
   Убранное свойство её не отменяет — отменяет только написанное. */
.topbar-nav {
  display: flex;
  align-items: stretch;
  flex: 0 1 auto;
  gap: 0;
  min-width: 0;
  overflow: visible;
}

.topbar-tab {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 9px;
  /* Запасное значение — не украшение: шапку вклеивают в страницы без
     style.css (дашборд «Обзор»), и без него вкладки набирались кеглем body. */
  font-size: var(--fs-xs, 11px);
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--dim);
  text-decoration: none;
  cursor: pointer;
  transition: color .2s;
  /* Дашборд «Обзор» раньше рисовал активную вкладку отдельной плашкой.
     Его встроенные стили всё ещё находятся выше общего файла, поэтому
     сбрасываем материал ссылки явно, а не надеемся на отсутствие правил. */
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* Черта под активной вкладкой заменяет прежнюю плашку: в лендинге у пунктов
   меню нет фона, и рамка вокруг одного из них сразу выдаёт «интерфейс». */
.topbar-tab::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 16px;
  height: 1px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s var(--ease-out, ease), opacity .2s;
}
/* Ссылка сохраняет фокус после перехода на другую страницу. Общая рамка
   :focus-visible из style.css тогда оставляла постоянный квадрат вокруг
   «Анализа». В меню клавиатурный фокус обозначаем той же нижней линией:
   ориентир остаётся, но второй вид активного состояния не появляется.

   Белым фокус не красим: белый в этой шапке значит «вы здесь», и вкладка,
   на которую только что нажали, оставалась подсвеченной уже на следующей
   странице — активными выглядели две сразу. Мышиный фокус не показываем
   вовсе. Активную вкладку эти правила не трогают: она исключена явно,
   иначе перебила бы её белый цвет.

   Клавиатурный фокус рисуем ПУНКТИРОМ, а не сплошной линией вполсилы.
   Сплошная линия здесь занята: ею помечена открытая вкладка. Фокус
   переживает переход «назад» — браузер возвращает его той ссылке, по
   которой ушли, — и вкладка, на которой всего лишь стоит фокус, получала
   тот же знак, что и открытая. На экране это читалось как «выбраны две».
   Пунктир держит ориентир для клавиатуры и при этом ни на что не
   претендует: линия сплошная — вы здесь, линия рваная — сюда смотрит
   клавиатура. */
.topbar-tab:focus,
.topbar-tab:focus-visible { outline: none !important; }
.topbar-tab:not(.active):focus:not(:focus-visible) {
  color: var(--dim);
  text-shadow: none;
}
/* html[data-kbd] ставит topbar.js после первого Tab на этой странице. Без
   него метки нет вовсе: браузер возвращает фокус той вкладке, по которой
   ушли, и на «Калькуляторе» подсвеченным оставался «Анализ» — сам фокус
   при этом настоящий, поэтому :focus-visible его честно ловил. Ждём
   клавишу — тогда подсветка достаётся тому, кто и правда идёт табом. */
html[data-kbd] .topbar-tab:not(.active):focus-visible {
  color: var(--text);
  text-shadow: none;
}
html[data-kbd] .topbar-tab:not(.active):focus-visible::after {
  transform: scaleX(1);
  opacity: .75;
  background: repeating-linear-gradient(90deg, var(--blue) 0 3px, transparent 3px 7px);
}
.topbar-tab:hover { color: #fff; }
.topbar-tab.active {
  color: #fff;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.topbar-tab.active::after { transform: scaleX(1); opacity: 1; }

/* ── Папки (tabs.py: menu) ───────────────────────────────────────────────
   Мышью раскрываются по наведению, но только после настоящего движения на
   этой странице (`html[data-pointer]` ставит topbar.js). Поэтому курсор,
   оставшийся неподвижным после перехода, не раскрывает случайный раздел.
   Нажатие на треугольник остаётся для касания и клавиатуры.

   Имя папки со своей страницей — ссылка и ведёт куда вело; треугольник рядом
   отдельной кнопкой, чтобы список открывался и там, где наведения нет вовсе
   (палец, клавиатура). */
.topbar-folder {
  position: relative;
  display: flex;
  align-items: stretch;
}
/* Кнопка папки набрана как вкладка: разница между «разделом» и «папкой» — в
   треугольнике, а не в другом кегле. */
.topbar-folder__btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 var(--folder-pad, 9px);
  font: inherit;
  font-size: var(--fs-xs, 11px);
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--dim);
  cursor: pointer;
  /* Папка «Анализа» — ссылка, а не кнопка (её имя ведёт в «Итоги»), и обе
     набраны здесь одним правилом: разница между ними в разметке, а не в виде. */
  text-decoration: none;
  transition: color .2s;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.topbar-folder__btn:focus,
.topbar-folder__btn:focus-visible { outline: none !important; }
/* Кегль в em от кнопки давал 8,8px — единственное место в шапке ниже пола.
   Треугольник маленький сам по себе, ему хватает своего размера без множителя.

   У папки со своей страницей треугольник — отдельная кнопка рядом с именем
   (это она открывает список), у папки без страницы он остался внутри имени.
   Набраны одинаково: разница в разметке, а не в виде. */
.topbar-folder__caret {
  display: flex;
  align-items: center;
  padding: 0 var(--folder-pad, 9px) 0 4px;
  margin-left: calc(-1 * var(--folder-pad, 9px));
  font: inherit;
  font-size: var(--fs-xs, 11px);
  line-height: 1;
  /* Тот же тон, что у имени, а не `inherit`. Отдельная кнопка наследовала
     цвет от `.topbar-folder`, а тот — от шапки, и треугольник у папки со
     своей страницей всегда горел полным `--text`, пока имя рядом было
     приглушено. У «Владельца» треугольник внутри кнопки и потому выглядел
     иначе, чем у соседей: одна разметка светлее другой без всякой причины. */
  color: var(--dim);
  cursor: pointer;
  transition: transform .2s, color .2s;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.topbar-folder__caret--inline { display: inline; padding: 0; }
/* Имя и треугольник — одна цель для глаза: наведение на любую половину
   подсвечивает обе.

   Фокус тут под `html[data-kbd]`, как и всё остальное в этом файле, и это не
   перестраховка. Браузер возвращает фокус той ссылке, по которой ушли со
   страницы, — и папка, открытая последней, светилась белым на каждой
   следующей вкладке, будто на ней курсор. «Анализ» подсвечивался, когда
   человек стоял в «Моих товарах».

   Правило раскрытия списка ниже этот флаг уже требовало, а правило цвета —
   нет, и потому меню не открывалось, а имя всё равно горело. Условие у них
   обязано быть одно: это один и тот же вопрос — «человек сейчас работает
   клавиатурой или браузер вернул фокус сам». Проверяется тестом
   `tests/test_margin_topbar_focus.py`. */
.topbar-folder:hover .topbar-folder__btn,
.topbar-folder:hover .topbar-folder__caret,
html[data-kbd] .topbar-folder:focus-within .topbar-folder__btn,
html[data-kbd] .topbar-folder:focus-within .topbar-folder__caret { color: #fff; }
html[data-pointer] .topbar-folder:hover .topbar-folder__caret,
html[data-kbd] .topbar-folder:focus-within .topbar-folder__caret,
.topbar-folder.is-open .topbar-folder__caret { transform: translateY(1px); }
/* Открытая внутри вкладка красит саму папку белым: иначе, уйдя в «Стенд»,
   в шапке не видно ни одного активного пункта — «вы здесь» пропадало. */
.topbar-folder.active .topbar-folder__btn,
.topbar-folder.active .topbar-folder__caret { color: #fff; }
/* И ставит ту же черту, что у обычной вкладки. Без неё «вы здесь» в шапке
   выглядело по-разному в зависимости от того, лежит вкладка в папке или нет:
   на «Ленте» под именем черта, на «Рекламе» — только белый цвет, а черта
   появлялась лишь внутри раскрытого списка. Одно состояние — один знак.

   Черта на самой папке, а не на её имени: у папки со своей страницей имя и
   треугольник — два отдельных элемента, и черта под одним именем обрывалась
   бы перед треугольником. Отступы те же, что у вкладки (9px по краям), —
   папка набрана как вкладка, и подчёркивание обязано попадать в тот же ряд. */
.topbar-folder::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 16px;
  height: 1px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s var(--ease-out, ease), opacity .2s;
}
.topbar-folder.active::after { transform: scaleX(1); }

.topbar-folder__menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  /* Ширина одна на все папки, а не по длине самого длинного пункта внутри.
     Иначе «Анализ» открывался на 84 пикселя, «Реклама» на 101, «Товары» на
     115, «Владелец» на 144 — четыре разных меню в одной шапке, и это видно
     сразу, стоит открыть два подряд. `max()` оставляет прежний пол: у папки
     шире 176 пикселей список по-прежнему не уже её самой. */
  min-width: max(100%, 176px);
  /* Сверху отступа нет: список — продолжение плиты, и первый пункт начинается
     сразу под кромкой. Шесть пикселей воздуха там читались как пропуск между
     вкладкой и её разделами. */
  padding: 0 0 4px;
  /* Продолжение шапки, а не отдельная плашка: тот же тон (--chrome-bg), общая
     с меню верхняя кромка и тень вниз. Раньше список был угольно-чёрным
     прямоугольником в рамке со всех сторон и читался как чужое окно,
     прилетевшее поверх страницы. Непрозрачность обязательна: список падает на
     таблицы и фильтры, и сквозь него читались чужие подписи. */
  background: var(--chrome-bg);
  border: 1px solid rgba(255, 255, 255, .07);
  border-top: 0;
  border-radius: 0 0 var(--r-sm, 10px) var(--r-sm, 10px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .18s var(--ease-out, ease), transform .18s var(--ease-out, ease), visibility .18s;
}
/* Наведение доступно лишь после реального движения мыши. Клавиатурный фокус
   — лишь после Tab на этой странице; восстановленный браузером фокус флага
   `data-kbd` не получает. `.is-open` обслуживает клик и касание. */
html[data-pointer] .topbar-folder:hover .topbar-folder__menu,
html[data-kbd] .topbar-folder:focus-within .topbar-folder__menu,
.topbar-folder.is-open .topbar-folder__menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: .14s;
}
/* Внутри списка вкладка идёт строкой, а не пунктом строки: подчёркивание
   снизу здесь читалось бы как черта между соседями, поэтому метка «вы
   здесь» переезжает влево — та же линия, повёрнутая на бок. */
.topbar-folder__menu .topbar-tab {
  padding: 7px 18px 7px var(--folder-pad, 9px);
  justify-content: flex-start;
}
.topbar-folder__menu .topbar-tab::after {
  left: 0;
  right: auto;
  top: 6px;
  bottom: 6px;
  width: 2px;
  height: auto;
}
.topbar-folder__menu .topbar-tab:hover { background: rgba(255, 255, 255, .05) !important; }

/* Кнопки в правом блоке не сжимаются: иначе на ноутбучной ширине они молча
   уезжали за край — выглядело так, будто их вообще нет. Сам блок сжиматься
   умеет, и первым место отдаёт не список вкладок, а справочные плашки: период
   на «Анализе» шире кнопки «Обновить», и из-за него меню обрезалось на одной
   вкладке иначе, чем на соседней. Данные важнее вида ровно до тех пор, пока
   их можно прочитать целиком; урезанный период дочитывается на самой
   странице, а исчезнувшая вкладка не находится нигде. */
.topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  /* Сжимается заметно охотнее списка вкладок: единственное, что здесь тянется,
     — адрес аккаунта, и лишние знаки в нём дешевле наехавших друг на друга
     вкладок. Без веса flex делил нехватку по ширине блоков, то есть отбирал
     у вкладок даже тогда, когда хватило бы урезать адрес. */
  flex: 0 30 auto;
  min-width: 0;
}
.topbar-right > * { flex: none; }

/* Аккаунт: кружок с буквой и адрес рядом.

   Почта раньше стояла обычной `.topbar-period` и пропадала первой — уже на
   ноутбучной ширине шапка переставала отвечать, под кем вошли: кнопка «Выйти»
   у владельца и у клиента одна и та же. Теперь исчезает только текст, и то
   ступенями (медиазапросы внизу файла), а кружок остаётся на любой ширине.

   Оттенок приходит из разметки переменной --ava-h (auth.py: account_badge) —
   он посчитан из адреса, поэтому у аккаунта постоянный. Насыщенность и
   светлота фиксированы: при любом оттенке тёмная буква на кружке читается. */
.topbar-user {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: 0 1 auto;
  min-width: 0;
}
.topbar-user__ava {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: hsl(var(--ava-h, 190) 62% 60%);
  color: var(--on-accent);
  font-size: var(--fs-xs, 11px);
  font-weight: 800;
  letter-spacing: 0;
}
/* Логина нет вовсе — кружок без цвета аккаунта: это режим, а не человек. */
.topbar-user.is-anon .topbar-user__ava {
  background: none;
  border: 1px solid rgba(255, 255, 255, .22);
  color: var(--dim);
  font-weight: 700;
}
.topbar-user__mail {
  min-width: 0;
  font-size: var(--fs-xs, 11px);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-user__dom { color: var(--faint); }

/* Кружок — вход в «Настройки» (templates/_topbar.html), а не подпись: страница
   про свою учётку, и место ей под аккаунтом, а не в ряду вкладок с данными.
   Раз нажимается — должно отзываться: кольцо у кружка и адрес светлее. Цвет
   тот же, что у активной вкладки, — чтобы «где я» читалось одинаково в обеих
   половинах шапки. */
.topbar-user {
  color: inherit;
  text-decoration: none;
  border-radius: 999px;
  transition: opacity .15s;
}
.topbar-user__ava { transition: box-shadow .15s; }
.topbar-user:hover .topbar-user__ava { box-shadow: 0 0 0 2px rgba(34, 211, 238, .45); }
.topbar-user:hover .topbar-user__mail { color: var(--text); }
.topbar-user:hover .topbar-user__dom { color: var(--dim); }
.topbar-user.active .topbar-user__ava { box-shadow: 0 0 0 2px var(--blue); }
.topbar-user.active .topbar-user__mail { color: #fff; }
/* Метка фокуса — по той же договорённости, что у вкладок: только после первой
   клавиши (html[data-kbd] ставит topbar.js), иначе кольцо доставалось бы и
   тому, кто просто кликнул мышью. */
.topbar-user:focus,
.topbar-user:focus-visible { outline: none !important; }
html[data-kbd] .topbar-user:focus-visible .topbar-user__ava {
  box-shadow: 0 0 0 2px var(--blue), 0 0 0 4px rgba(34, 211, 238, .3);
}

/* Справочные плашки в лендинге тоже без фона и рамок — просто мелкая
   капитель. Здесь это период отчёта: он сообщает, а не нажимается. */
.topbar-period {
  flex: 0 1 auto;
  min-width: 0;
  font-size: var(--fs-xs, 11px);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Правое действие — как «Подключить →» в лендинге: прямые углы, без заливки. */
.topbar .btn {
  padding: 7px 13px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 0;
  background: none;
  font-family: inherit;
  font-size: var(--fs-xs, 11px);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #fff;
  box-shadow: none;
}
.topbar .btn:hover {
  border-color: var(--blue);
  background: none;
  color: var(--blue);
}

/* Тумблер «смотрю как клиент». Во включённом состоянии заметный — иначе легко
   забыть, что смотришь урезанную витрину, и решить, что данные пропали. */
.topbar-asclient {
  padding: 6px 11px;
  border: 1px solid rgba(255, 255, 255, .18);
  font-size: var(--fs-xs, 11px);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
  text-decoration: none;
}
.topbar-asclient:hover { color: #fff; border-color: rgba(34, 211, 238, .6); }
.topbar-asclient.on {
  color: var(--on-accent);
  background: #f5b64a;
  border-color: #f5b64a;
  font-weight: 800;
}

/* Режим записи экрана владельца: не меняет данные, только скрывает на экране
   названия товаров и артикулы. */
.topbar-privacy {
  padding: 6px 11px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: transparent;
  color: var(--dim);
  font: inherit;
  font-size: var(--fs-xs, 11px);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
.topbar-privacy:hover { color: #fff; border-color: rgba(34, 211, 238, .6); }
.topbar-privacy.on { color: var(--on-accent); background: var(--blue); border-color: var(--blue); font-weight: 800; }

/* Знак и подпись у владельческих кнопок — отдельными узлами: на узкой шапке
   уходит подпись, знак остаётся (медиазапрос 1520 внизу файла). Разрядка у
   знака снята — с ней он отъезжал от рамки на полбуквы вправо. */
.topbar-glyph { letter-spacing: 0; }
.topbar-word { margin-left: .5em; }

/* «Лог» — не вкладка, а служебная ссылка рядом с ними: технические надписи
   (обрывы связи, ход фоновых загрузок) переехали туда с «Анализа». Точка
   молчит, пока всё собралось. Гори она всегда — её перестали бы замечать за
   неделю, и первый настоящий отказ прошёл бы мимо. */
.topbar-log {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-xs, 11px);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
  text-decoration: none;
}
.topbar-log:hover,
.topbar-log.active { color: #fff; }
.topbar-log__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(232, 237, 245, .2);
  flex: none;
}
.topbar-log.is-error { color: #ff8ba0; }
.topbar-log.is-error .topbar-log__dot {
  background: #f43f5e;
  box-shadow: 0 0 0 3px rgba(251, 113, 133, .18);
}
.topbar-log.is-warn { color: #f6c667; }
.topbar-log.is-warn .topbar-log__dot {
  background: var(--amber);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, .18);
}
.topbar-log.is-busy .topbar-log__dot {
  background: var(--blue);
  animation: topbar-log-pulse 1.6s ease-in-out infinite;
}
@keyframes topbar-log-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .25; }
}
@media (prefers-reduced-motion: reduce) {
  .topbar-log.is-busy .topbar-log__dot { animation: none; }
}

/* Порядок жертв при нехватке ширины. Сначала уходят справочные плашки —
   период и «без логина · владелец»: они ничего не делают, только сообщают.
   Потом ужимается разрядка вкладок. Кнопки и тумблер остаются. Пороги
   подняты вместе с переходом на капитель: вкладки прописными шире, чем
   строчными, и на ноутбучной ширине список начинал резаться на полуслове —
   «WB П…» вместо «WB Порог Акций». Отступы кнопки папки идут за вкладками:
   разъедутся — папка встанет в ряду шире соседей и будет читаться как что-то
   отдельное. Внутри выпадающего списка ужимать нечего, там своя ширина. */
@media (max-width: 1700px) {
  .topbar-period { display: none; }
  /* Домен у всех клиентов один и тот же чаще, чем имя, — и уходит первым.
     Аккаунт при этом остаётся читаемым: «ivanov» опознаётся не хуже, чем
     «ivanov@gmail.com», а целиком адрес всегда есть в подсказке. */
  .topbar-user__dom { display: none; }
}

@media (max-width: 1520px) {
  .topbar { --folder-pad: 7px; }
  .topbar-tab,
  .topbar-folder__btn { padding: 0 7px; letter-spacing: .07em; }
  .topbar-tab::after { left: 7px; right: 7px; }
  /* Подписи владельческих кнопок уступают место аккаунту: тумблер узнаётся по
     знаку и по заливке включённого состояния, кружок аккаунта сам по себе —
     нет, а вопрос «под кем я вошёл» на ноутбуке стоит острее, чем название
     тумблера. Обе кнопки владельческие: у клиента этих 260 пикселей и не было,
     он на такой ширине видит адрес целиком. Названия остаются в подсказках. */
  .topbar-word { display: none; }
  .topbar-asclient,
  .topbar-privacy { padding: 6px 8px; }
}

/* Ниже ~1360 разрядкой уже ничего не спасти: капитель шире строчных примерно
   на четверть. Ужимаем до предела — дальше держаться помогают папки, из-за
   которых пунктов в ряду вдвое меньше прежнего. */
@media (max-width: 1360px) {
  .topbar { --folder-pad: 6px; }
  .topbar-tab,
  .topbar-folder__btn { padding: 0 6px; font-size: var(--fs-xs, 11px); letter-spacing: .04em; }
  .topbar-tab::after { left: 6px; right: 6px; }
  /* Правая группа поджимается — так вкладкам возвращается часть пикселей,
     которые у них забрала ссылка «Лог». */
  .topbar-right { gap: 10px; }
}

@media (max-width: 1120px) {
  .topbar { padding: 0 12px; gap: 8px; }
  /* Последний рубеж списка. Прокрутки, которая раньше прятала лишнее, больше
     нет — вкладка, вылезшая за край, заедет под правые кнопки, и заметить это
     некому. Отдаём остатки отступов и разрядки. */
  .topbar { --folder-pad: 4px; }
  .topbar-tab,
  .topbar-folder__btn { padding: 0 4px; letter-spacing: .02em; }
  .topbar-tab::after { left: 4px; right: 4px; }
  .topbar .btn { padding: 7px 8px; }
  .topbar-asclient { padding: 4px 7px; }
  /* Слово «Лог» уступает место вкладкам последним — здесь шапка и так ужата
     до предела. Точка остаётся: сигналом всё это время была она, слово рядом
     с ней — подпись. Название не пропадает совсем, оно в title ссылки. */
  .topbar-log { font-size: 0; gap: 0; padding-left: 4px; }
  /* У владельца на этой ширине место кончилось: у него на шесть вкладок больше
     и два своих тумблера, адрес отсюда идёт уже обрезком в пару букв. Остаётся
     кружок — цвет и буква посчитаны из адреса, сам адрес в подсказке; пропасть
     совсем он не может, иначе «Выйти» снова станет единственным следом того,
     кто вошёл. У клиента шапка вдвое свободнее, и адрес он видит и здесь —
     отбирать у него то, что помещается, незачем. Признак владельца — кнопка
     записи экрана: она рисуется только ему (templates/_topbar.html). */
  .topbar:has(.topbar-privacy) .topbar-user { gap: 0; }
  .topbar:has(.topbar-privacy) .topbar-user__mail { display: none; }
}

/* Ширина телефона: адрес убран у всех — на этой полосе он вытеснял бы вкладки
   даже у клиента. Кружок остаётся и здесь. */
@media (max-width: 820px) {
  .topbar-user { gap: 0; }
  .topbar-user__mail { display: none; }

  /* Здесь отступов уже не осталось, и «последний рубеж» выше проигран: при
     390px замер даёт семь пар наложений — «Мои товары» лежит под значком
     пользователя на 30px, «Остатки» под кружком аккаунта на 22px, пункт папки
     под соседней вкладкой на 83px. Наложение хуже прокрутки: прокрутка прячет
     и даёт достать, наложение прячет и путает. Возвращаем ленте прокрутку. */
  /* Логотип, кнопки и семь вкладок в одну строку 390px не помещаются никак:
     отдать всё сжатие ленте — оставить ей 73px, то есть полторы вкладки;
     отдать правому блоку — вытолкнуть кружок аккаунта за экран. Поэтому на
     телефоне шапка в два ряда: сверху логотип и кнопки, под ними лента
     вкладок во всю ширину. Высота шапки — токен, от неё отсчитывают место
     парковки липкие шапки таблиц, поэтому она тут же и пересчитана. */
  .topbar {
    flex-wrap: wrap;
    height: auto;
    align-items: center;
    padding-bottom: 0;
  }
  .topbar-logo { order: 1; }
  .topbar-right { order: 2; margin-left: auto; flex: 0 0 auto; }
  .topbar-nav {
    order: 3;
    flex: 1 0 100%;
    height: 40px;
    margin: 0 -12px;
    padding: 0 12px;
    overflow-x: auto;
    scrollbar-width: none;
    /* Правый край растворяется — видно, что лента продолжается. */
    mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
  }
  .topbar-nav::-webkit-scrollbar { display: none; }
  .topbar-tab, .topbar-folder { flex: 0 0 auto; }
  .topbar-log { font-size: 0; gap: 0; }

  /* Список папки обязан пережить обрезку прокруткой. Он берёт за точку отсчёта
     саму шапку: у неё backdrop-filter, а это containing block для fixed —
     значит список считается от шапки, но лентой уже не режется. */
  .topbar-folder__menu {
    position: fixed;
    top: 100%;
    left: 8px;
    right: 8px;
    min-width: 0;
  }
}

/* ─── Отдача и наведение в шапке ─────────────────────────────────
   Те же два правила, что и на страницах (см. хвост style.css), но шапка
   вклеивается в «Обзор» отдельным файлом и своей копии не имеет — иначе на
   одной вкладке кнопки отвечали бы на нажатие, а на другой нет. */
.topbar .btn,
.topbar-privacy,
.topbar-asclient,
.topbar-folder__btn {
  transition: color .2s, background .2s, border-color .2s,
    transform .16s cubic-bezier(.23, 1, .32, 1);
}
.topbar .btn:active,
.topbar-privacy:active,
.topbar-asclient:active,
.topbar-folder__btn:active {
  transform: scale(.97);
}
/* Вкладке прожатие не нужно: это ссылка, а не кнопка, и переход сам по себе
   служит ответом. Зато нужен мгновенный отклик цветом — он уже есть выше. */

@media (hover: none), (pointer: coarse) {
  .topbar .btn:hover,
  .topbar-privacy:hover,
  .topbar-asclient:hover {
    transform: none;
  }
}


/* Шапка стоит на месте: её снимок не проявляется и не уезжает, а сразу
   показывает новый. Оба состояния всё равно одинаковы — переход по вкладкам
   и периодам меню не меняет, разве что подчёркивание активной. */
::view-transition-old(topbar),
::view-transition-new(topbar) { animation: none; mix-blend-mode: normal; }
}