/*
 * Общая шапка клиента. Разметку собирает `js/header.js`, здесь только вид.
 *
 * Состав — из прототипа (`Cabinet 01`: колокольчик со счётчиком, аватар с
 * именем и «▾») и из листа «Глобальная навигация» карты связей (пункты меню,
 * кнопки гостя, состав выпадающего меню аватара, бургер ниже 768px).
 */

/* Шапка выше содержимого на всех страницах: липкая сверху и с `z-index`
   над любым содержимым. Выше неё только шторка мобильного меню (60) —
   она и открывается из самой шапки. */
/*
 * ШАПКА СЖИМАЕТСЯ ЦЕЛИКОМ, А НЕ ТЕРЯЕТ ЧАСТИ ПО ОЧЕРЕДИ.
 *
 * Размеры внутри шапки заданы через `clamp()`. Обе границы — значения из
 * `tokens.css`, новое здесь только то, как размер идёт между ними: за
 * шириной окна. При сужении сначала соразмерно ужимаются поля, промежутки и
 * подписи, и лишь когда сжиматься дальше некуда, что-то уходит в шторку.
 *
 * Самое дорогое — боковые поля самой шапки. `--page-padding` это 64 пикселя
 * с каждой стороны: 128 пикселей ширины окна расходуются ещё до того, как в
 * строке появится хоть что-нибудь. На узком экране они и ужимаются сильнее
 * всего.
 *
 * Шкалы намеренно пологие: подписи меню идут от 14 до 12 пикселей, логотип —
 * от 18 до 16. Шапка должна становиться компактнее, а не мельче до
 * нечитаемости; нижние границы взяты из той же шкалы типографики, что и
 * остальной интерфейс.
 */
.site-header {
  --header-pad: clamp(var(--space-4), 4vw, var(--page-padding));
  --header-gap: clamp(var(--space-3), 1.6vw, var(--space-4));
  --header-nav-gap: clamp(var(--space-3), 1.8vw, var(--space-5));
  --header-text: clamp(var(--text-caption-size), 1.15vw, var(--text-body-s-size));
  --header-logo: clamp(var(--text-body-m-size), 1.7vw, var(--text-body-l-size));

  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  padding: var(--space-4) var(--header-pad);
  /* Высота задана до прихода разметки: без неё страница дёргалась бы,
     когда скрипт вставит содержимое шапки. */
  min-height: var(--space-8);
}

/* Логотип сжимается вместе со всем остальным — но только в шапке: в шторке
   он свой и от ширины окна не зависит. */
.site-header .logo {
  font-size: var(--header-logo);
}

/* Кнопка «Записаться» — единственная в строке, и её поля тоже идут за
   шириной: при `--button-padding-m` в 24 пикселя с каждой стороны она одна
   занимает больше, чем два пункта меню. */
.site-header__actions > .btn {
  padding-left: clamp(var(--space-3), 1.8vw, var(--space-5));
  padding-right: clamp(var(--space-3), 1.8vw, var(--space-5));
  font-size: var(--header-text);
}

/* Промежутки тоже идут за шириной окна — см. шкалы у `.site-header`. */
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--header-gap);
}

.site-header__left {
  display: flex;
  align-items: center;
  gap: var(--header-nav-gap);
  min-width: 0;
}

.site-nav {
  display: flex;
  gap: var(--header-nav-gap);
}

.site-nav a {
  font-size: var(--header-text);
  font-weight: var(--font-weight-medium);
  color: var(--neutral-200);
  white-space: nowrap;
}

.site-nav a:hover {
  color: var(--color-text-inverse);
}

/* Текущая страница: в прототипе она белая и полужирная. */
.site-nav a[aria-current='page'] {
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-bold);
}

.site-header__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--header-gap);
}

.site-header__link {
  font-size: var(--header-text);
  font-weight: var(--font-weight-medium);
  color: var(--neutral-200);
  white-space: nowrap;
}

.site-header__link:hover {
  color: var(--color-text-inverse);
}

/* ─── Колокольчик со счётчиком ───────────────────────────────────────────── */

.bell {
  position: relative;
  display: flex;
  align-items: center;
  color: var(--neutral-200);
  font-size: var(--text-body-l-size);
  line-height: 1;
}

.bell:hover {
  color: var(--color-text-inverse);
}

/* `display: flex` ниже перебивает атрибут `hidden`, и счётчик без цифры
   оставался красной точкой «непрочитанных ноль». Порядок правил важен. */
.bell__count[hidden] {
  display: none;
}

.bell__count {
  position: absolute;
  top: calc(-1 * var(--space-2));
  right: calc(-1 * var(--space-2));
  min-width: var(--space-4);
  height: var(--space-4);
  padding: 0 var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--color-error);
  color: var(--color-text-inverse);
  font-size: var(--text-caption-size);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─── Аватар и его меню ──────────────────────────────────────────────────── */

.account {
  position: relative;
}

.account__button {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  color: var(--color-text-inverse);
  cursor: pointer;
}

.account__avatar {
  width: var(--space-6);
  height: var(--space-6);
  border-radius: var(--radius-pill);
  background: var(--neutral-600);
  color: var(--color-text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-body-s-size);
  font-weight: var(--font-weight-bold);
  flex: 0 0 auto;
}

/*
 * Имя вошедшего не раздвигает шапку: длинное обрезается многоточием.
 *
 * Без ограничения ширина шапки зависела от того, как человека зовут. Замер:
 * «Олег» начинал теснить соседей на 1002 точках, «Артем Ковалев» — на 1074,
 * «Константин Иванов-Петров» — на 1160, то есть на обычном ноутбуке. Дефект,
 * который проявляется у одних пользователей и не проявляется у других, —
 * худший вид дефекта: он не воспроизводится у того, кто его чинит.
 */
.account__name {
  font-size: var(--header-text);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account__caret {
  font-size: var(--text-caption-size);
  color: var(--neutral-300);
}

.account__menu {
  position: absolute;
  top: calc(100% + var(--space-3));
  right: 0;
  z-index: 30;
  min-width: 200px;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-2) 0;
  display: flex;
  flex-direction: column;
}

.account__menu[hidden] {
  display: none;
}

.account__menu a,
.account__menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: var(--space-3) var(--space-4);
  font-family: inherit;
  font-size: var(--text-body-s-size);
  color: var(--color-text-primary);
  cursor: pointer;
}

.account__menu a:hover,
.account__menu button:hover {
  background: var(--button-ghost-bg-hover);
}

.account__sep {
  height: var(--border-width);
  background: var(--color-border);
  margin: var(--space-2) 0;
}

/* ─── Бургер и шторка ────────────────────────────────────────────────────── */

.burger {
  display: none;
  background: none;
  border: none;
  padding: 0;
  font-size: var(--text-h4-size);
  line-height: 1;
  color: var(--color-text-inverse);
  cursor: pointer;
}

/* Шторка перекрывает и шапку: её собственная строка с логотипом и крестиком
   иначе оказалась бы под шапкой, и закрыть меню было бы нечем. */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  padding: var(--space-5) var(--page-padding);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.drawer[hidden] {
  display: none;
}

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.drawer__close {
  background: none;
  border: none;
  padding: 0;
  font-size: var(--text-h4-size);
  line-height: 1;
  color: var(--color-text-inverse);
  cursor: pointer;
}

.drawer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.drawer__links a {
  font-size: var(--text-body-l-size);
  font-weight: var(--font-weight-medium);
  color: var(--neutral-200);
}

.drawer__links a[aria-current='page'] {
  color: var(--color-text-inverse);
}

/* ─── Заглушка на время ответа `GET /api/auth/me` ────────────────────────── */

.site-header .skeleton {
  background: var(--neutral-700);
}

.skeleton--account {
  width: var(--space-9);
  height: var(--space-5);
  border-radius: var(--radius-pill);
}

/* ─── Меню в шторке на любой ширине ──────────────────────────────────────── */

/* Так сделан лендинг: пять якорных пунктов в строке шапки спорят с логотипом
   и «Записаться». Пункты уезжают в шторку, бургер появляется на любой
   ширине; вход и «Записаться» остаются в строке. */
.site-header--menu-in-burger .site-nav {
  display: none;
}

.site-header--menu-in-burger .burger {
  display: block;
}

/*
 * На широком экране шторка остаётся тем же листом во весь экран, но её
 * содержимое держится сетки страницы: растянутые на 1400 точек ссылка и
 * кнопка «Записаться» выглядели бы случайностью, а не меню.
 */
@media (min-width: 769px) {
  .drawer {
    padding: var(--space-5) max(var(--page-padding), calc((100vw - var(--container-max-width)) / 2));
    gap: var(--space-6);
  }

  .drawer__links {
    gap: var(--space-4);
  }

  .drawer__links a {
    font-size: var(--text-h4-size);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-inverse);
  }

  .drawer__links a:hover {
    color: var(--neutral-200);
  }

  .drawer .btn {
    align-self: flex-start;
  }
}

/* ─── Узкий экран ────────────────────────────────────────────────────────── */

/*
 * ШАПКА УСТУПАЕТ МЕСТО ПО ОЧЕРЕДИ, И ПОДПИСИ МЕНЮ УХОДЯТ ПОСЛЕДНИМИ.
 *
 * Строка шапки не переносится и не сжимается: у пунктов `white-space: nowrap`,
 * у блока действий `flex: 0 0 auto`. Когда места перестаёт хватать, что-то
 * обязано уйти, и важен порядок — уходить должно наименее нужное.
 *
 * Замерено, с какой ширины окна всё помещается в строку (у вошедшего это
 * логотип, пять пунктов, колокольчик, аватар с именем и «Записаться»):
 *
 *   как было, без правок           — с 1144
 *   с уменьшенными отступами       — с 1072
 *   с плавными размерами (clamp)   — с 840
 *
 * Плавные размеры и дали главное: шапка сжимается целиком, и до 840 точек из
 * неё вообще ничего не уходит. Ниже уже нечем сжиматься, и границ две.
 *
 * На 960 уходит ИМЯ рядом с аватаром: сам аватар остаётся кнопкой, и меню
 * под ним никуда не девается — там и «Мои записи», и «Профиль», и «Выйти».
 * Имя это подпись, а пункты меню — навигация, и меняться местами в очереди
 * на вылет они не должны. На 860 в шторку уходит само меню.
 *
 * Обе границы лежат с запасом: на 840 содержимому нужно 770 при доступных
 * 777, то есть впритык, поэтому меню убирается раньше — на 860.
 *
 * Пороги здесь переставлялись дважды, и оба раза по одной причине: они
 * ставились круглым числом, а не по замеру. Сперва меню пряталось на 1120,
 * и на 1000 точках в строке оставалась половина пустого места при исчезнувших
 * подписях. Порог обязан стоять там, где содержимое действительно перестаёт
 * помещаться.
 *
 * Ничего при этом не пропадает: в шторке лежат ТЕ ЖЕ пункты, включая «Мои
 * записи» и «Профиль», — `fillDrawer()` перезаполняет её, когда становится
 * известно, что человек вошёл. Меняется раскладка, а не состав.
 */
@media (max-width: 960px) {
  .account__name,
  .account__caret {
    display: none;
  }
}

@media (max-width: 860px) {
  .site-nav {
    display: none;
  }

  .burger {
    display: block;
  }
}

/* Лист глобальной навигации: ниже 768px в строке остаются логотип и «Войти». */
@media (max-width: 768px) {
  /* «Зарегистрироваться» и «Записаться» переезжают в шторку: в строке шапки
     они не помещаются и наезжают на логотип. Логотип и «Войти» остаются на
     месте — это вход, и прятать его за бургер незачем. Меню и имя сюда
     больше не входят: они уехали выше, на 960 и 1120. */
  .site-header__link,
  .site-header__actions > .btn {
    display: none;
  }

  .site-header__link:first-of-type {
    display: inline;
  }

  .site-header__actions {
    gap: var(--space-5);
  }

  /*
   * Колокольчик, аватар и бургер — по 20–32 точки: попасть пальцем трудно.
   * Область нажатия растягивается до 44 псевдоэлементом — сами значки при
   * этом не двигаются, и счётчик у колокольчика остаётся на своём месте.
   */
  .burger,
  .bell,
  .account__button {
    position: relative;
  }

  .burger::after,
  .bell::after,
  .account__button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }

  /* Меню аватара шире экрана быть не может. */
  .account__menu {
    max-width: calc(100vw - 2 * var(--page-padding));
  }
}