/* ============================================================================
   X.SUP UI-kit — МЕЖМОДУЛЬНЫЙ НАВБАР.
   Единственный экземпляр. До 10.08.2026 жил пятью инлайновыми копиями в
   base.html каждого модуля (в X.Stock — пятью копиями внутри одного модуля,
   по одной на страницу) и уже успел разъехаться: z-index 40 в X.CRM против
   200 в X.Content. Здесь он один, и цвета взяты из токенов, а не продублированы
   руками (в копиях был #F4F4F3 вместо --surface-2 #F3F2EE — «почти тот же»).

   Все стили под префиксом .xsup-nav — на стили модуля не влияют.
   Разметка — xsup-nav.html, её тоже держим в одном месте.
   ============================================================================ */

/* z-index: 40 по лестнице DESIGN_SYSTEM §1.4 — выше топбара (20) и поиска (15),
   но НИЖЕ модалок (100+), чтобы навбар не налезал на оверлеи.
   Модуль со своей лестницей обязан привести её к канону, а не двигать навбар. */
.xsup-nav {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: stretch;
  height: var(--h-xsup-nav); box-sizing: border-box;
  padding: 0 var(--sp-3);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  font-size: var(--fs-base);
  white-space: nowrap; overflow-x: auto;
  scrollbar-width: none;
}
.xsup-nav::-webkit-scrollbar { display: none; }

.xsup-nav .xsup-nav-tab {
  display: flex; align-items: center;
  padding: 0 var(--sp-4);
  color: var(--text-dim); text-decoration: none; font-weight: 500;
  border-bottom: 2px solid transparent;
  transition: background 120ms ease, color 120ms ease;
}
.xsup-nav .xsup-nav-tab:hover { background: var(--surface-2); color: var(--text); }
.xsup-nav .xsup-nav-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }

@media (max-width: 480px) {
  .xsup-nav { padding: 0 var(--sp-1); }
  .xsup-nav .xsup-nav-tab { padding: 0 var(--sp-2h); }
}

/* Липкие элементы модуля встают ПОД навбар. Смещения считаются от
   --h-xsup-nav через calc() — руками px в top не писать, иначе изменение
   высоты полосы молча разъедется со смещениями зависящих элементов.
   Свои липкие полосы модуль объявляет у себя, отсчитывая от этой переменной. */
body.has-xsup-nav .xsup-sticky-top { top: var(--h-xsup-nav); }