/* Общая шапка всех страниц: одна строка — слева логотип с меню, справа сезон,
   кошелёк и профиль. Пятюня со счётчиками отсюда уехала: её вид — в
   components.css, разметка — в js/highfive.js. */
.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: var(--s4);
  padding: var(--s4) 0 var(--s4);
}

.bar-left { display: flex; align-items: center; flex-wrap: nowrap; gap: var(--s6); }
.bar-right { display: flex; align-items: center; flex-wrap: nowrap; gap: var(--s4); }

.brand {
  font-size: var(--fs-b);
  font-weight: 600;
  letter-spacing: 0.26em;
  color: var(--text);
  text-decoration: none;
}

/**
 * Пункт шапки: рабочий — ссылка, неготовый — серый текст с меткой «скоро».
 * Размер как у основного текста страницы: мелкие пункты в 13px читались хуже
 * всего остального на экране.
 */
.tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--fs-b);
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

a.tab:hover { color: var(--text); }
.tab.is-on { color: var(--text); border-bottom-color: var(--accent); }
.tab.is-soon { cursor: default; user-select: none; }

.soon {
  padding: var(--s1) var(--s2);
  font-size: var(--fs-cap);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.tip {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 5;
  padding: var(--s2) var(--s3);
  font-size: var(--fs-cap);
  white-space: nowrap;
  color: var(--text);
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
}

.season { display: flex; align-items: baseline; gap: var(--s2); font-size: var(--fs-s); white-space: nowrap; }
.season-title { color: var(--muted); }
/* «· завершён» — только у закрытого сезона; открытый — одно «Сезон N» */
.season-left:empty { display: none; }
.season-left::before { content: '· '; color: var(--muted); }

/* Всплывающее сообщение (js/toast.js): под шапкой справа, поверх страницы —
   шапку не сдвигает. Правый край — по краю колонки .app (--wrap, поля --s6). */
.toast {
  position: fixed;
  top: 68px;
  right: max(var(--s4), calc((100vw - var(--wrap)) / 2 + var(--s6)));
  z-index: 40;
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  max-width: min(360px, calc(100vw - 32px));
  padding: var(--s3) var(--s3) var(--s3) var(--s4);
  font-size: var(--fs-b);
  line-height: 1.4;
  color: var(--text);
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-tile);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}
.toast.is-bad { border-color: var(--danger); }
.toast.is-hidden { display: none; }
.toast-close {
  flex: none;
  padding: 0;
  font: inherit;
  color: var(--muted);
  cursor: pointer;
  background: transparent;
  border: 0;
}
.toast-close:hover { color: var(--text); }

/* Узкий экран: одна строка остаётся, лишнее из меню слева уходит. */
@media (max-width: 900px) {
  .bar { gap: var(--s3); }
  .bar-left { gap: var(--s4); }
  .bar-right { gap: var(--s3); }
  .bar-left .tab.is-soon { display: none; }
  .season { display: none; }
}

/* ≤640px: логотип-ссылка — невидимая зона касания 44px через ::after */
@media (max-width: 640px) {
  a.brand { position: relative; }
  a.brand::after {
    content: '';
    position: absolute;
    top: min(0px, calc(50% - 22px));
    bottom: min(0px, calc(50% - 22px));
    left: min(0px, calc(50% - 22px));
    right: min(0px, calc(50% - 22px));
  }
}

/* --- Переключатель языка EN | RU (js/topbar.js langSwitch): в .bar-right
   слева от кошелька, на первом экране — слева от пилюли. Рамка 32px, внутри
   две кнопки; активная — акцент на 12%. --- */
.lang-sw {
  display: inline-flex;
  flex: none;
  align-items: stretch;
  height: 32px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
}

.lang-sw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  padding: 6px 10px;
  font: inherit;
  font-family: var(--font-num);
  font-size: var(--fs-s);
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: calc(var(--r-ctl) - 2px);
}
.lang-sw-btn:hover { color: var(--text); }
.lang-sw-btn:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }
.lang-sw-btn[aria-pressed="true"] {
  color: var(--accent);
  cursor: default;
  background: rgba(var(--accent-rgb), 0.12);
}
.lang-sw-btn:disabled { cursor: default; }

/* 901–1100px: шапка в одну строку с навигацией — переключатель плотнее, метка
   «скоро» у Swap уходит (плашка по клику остаётся); ≤1000 — и «Сезон N».
   Иначе правый блок с переключателем наезжает на навигацию. */
@media (max-width: 1100px) {
  .lang-sw-btn { padding: 6px var(--s1); }
  .nav-item .soon { display: none; }
}
@media (max-width: 1000px) {
  .season { display: none; }
}

/* ≤640px: кнопки — цель касания 44×44, рамка и подложка активной рисуются
   прежнего размера через ::before, отрицательный margin держит высоту шапки.
   Под сессией шапка здесь в две строки (layout.css: логотип, под ним Points,
   кошелёк, профиль) — переключатель встаёт справа в строку логотипа, иначе
   нижняя строка не влезает в 360px. На первом экране — в строке, как есть. */
@media (max-width: 640px) {
  .lang-sw {
    position: relative;
    height: auto;
    margin: calc(-1 * var(--s2)) 0;
    padding: 0 2px;
    border-color: transparent;
  }
  .lang-sw::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 32px;
    margin-top: -16px;
    border: 1px solid var(--line);
    border-radius: var(--r-ctl);
    pointer-events: none;
  }
  .lang-sw-btn {
    position: relative;
    min-width: 44px;
    min-height: 44px;
    padding: 0 var(--s1);
  }
  .lang-sw-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 26px;
    margin-top: -13px;
    border-radius: calc(var(--r-ctl) - 2px);
    pointer-events: none;
  }
  .lang-sw-btn[aria-pressed="true"] { background: transparent; }
  .lang-sw-btn[aria-pressed="true"]::before { background: rgba(var(--accent-rgb), 0.12); }
  .lang-sw-btn:focus-visible { outline: 0; }
  .lang-sw-btn:focus-visible::before { outline: 1px solid var(--accent); outline-offset: -1px; }

  .bar:not([data-page="gate"]) { position: relative; }
  /* центр — по строке логотипа: верхний отступ шапки + половина строки
     (--fs-b × line-height 1.45) − половина 46px переключателя */
  .bar:not([data-page="gate"]) .lang-sw {
    position: absolute;
    top: calc(var(--s4) + var(--fs-b) * 0.725 - 23px);
    right: 0;
    margin: 0;
  }
}