/* Переключатель языка UPSA — один компонент на весь домен.

   Живёт по адресу /assets/css/lang.css и подключается всеми пятью частями
   (сайт, альманах, Helios, Radar, реестр): они на одном домене и на одной
   системе — navy #0B2050, жёлтый #FFD400, IBM Plex, прямые углы.

   Механика: в разметке остаются пять настоящих ссылок (языки живут на разных
   адресах — это SEO-механика, ломать её нельзя). Скрипт /assets/js/lang.js
   сворачивает их в выпадающий список; без скрипта остаётся рабочий ряд ссылок.

   Тему задаёт сайт: `ls--dark` для тёмных полотен (upsa.org.ua, Helios),
   по умолчанию светлая (альманах, радар, реестр). */

.ls {
  --ls-fg: #0B1526;
  --ls-muted: #5A6B85;
  --ls-line: #D8DEE9;
  --ls-line-strong: #AEB9CC;
  --ls-panel: #FFFFFF;
  --ls-hover: rgba(11, 32, 80, .05);
  --ls-accent: #FFD400;
  --ls-shadow: 0 10px 28px rgba(11, 21, 38, .16), 0 2px 6px rgba(11, 21, 38, .08);
  --ls-ring: rgba(11, 32, 80, .28);
  --ls-ease: cubic-bezier(.16, 1, .3, 1);   /* появление */
  --ls-ease-ui: cubic-bezier(.4, 0, .2, 1); /* состояния */

  position: relative;
  display: inline-flex;
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

.ls--dark {
  --ls-fg: #E8EEFA;
  --ls-muted: rgba(232, 238, 250, .62);
  --ls-line: rgba(232, 238, 250, .20);
  --ls-line-strong: rgba(232, 238, 250, .38);
  --ls-panel: #0C1526;
  --ls-hover: rgba(232, 238, 250, .08);
  --ls-shadow: 0 14px 34px rgba(2, 6, 15, .55), 0 2px 8px rgba(2, 6, 15, .4);
  --ls-ring: rgba(255, 212, 0, .55);
}

/* ---------- триггер ---------- */
.ls .ls__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 10px;
  font: 600 12px/1 "IBM Plex Sans", system-ui, sans-serif;
  letter-spacing: .06em;
  color: var(--ls-fg);
  background: transparent;
  border: 1px solid var(--ls-line);
  border-radius: 0;
  cursor: pointer;
  transition: border-color .2s var(--ls-ease-ui), background-color .2s var(--ls-ease-ui),
              color .2s var(--ls-ease-ui);
}
.ls .ls__btn:hover { border-color: var(--ls-line-strong); background: var(--ls-hover); }
.ls .ls__btn:focus-visible { outline: 2px solid var(--ls-ring); outline-offset: 2px; }
.ls[data-open="true"] .ls__btn { border-color: var(--ls-accent); }

.ls .ls__globe { flex: none; width: 14px; height: 14px; opacity: .72; }
.ls[data-open="true"] .ls__globe,
.ls .ls__btn:hover .ls__globe { opacity: 1; }

.ls .ls__code { font-variant-numeric: tabular-nums; text-transform: none; }

.ls .ls__caret {
  flex: none;
  width: 9px;
  height: 9px;
  margin-left: 1px;
  opacity: .6;
  transition: transform .2s var(--ls-ease-ui), opacity .2s var(--ls-ease-ui);
}
.ls[data-open="true"] .ls__caret { transform: rotate(180deg); opacity: 1; }

/* ---------- панель ---------- */
.ls .ls__panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  min-width: 184px;
  max-width: calc(100vw - 20px);
  padding: 4px;
  background: var(--ls-panel);
  border: 1px solid var(--ls-line-strong);
  box-shadow: var(--ls-shadow);

  /* появление: панель «раскрывается» сверху вниз и подъезжает */
  opacity: 0;
  transform: translateY(-6px);
  clip-path: inset(0 0 100% 0);
  pointer-events: none;
  transition: opacity .18s var(--ls-ease-ui),
              transform .22s var(--ls-ease),
              clip-path .26s var(--ls-ease);
}
/* Сторону раскрытия выбирает скрипт по месту кнопки в окне: у радара на
   телефоне переключатель уезжает в левую часть шапки, и панель, привязанная
   к правому краю, вылезала за экран (поймано 12.09.2026). */
.ls[data-side="left"] .ls__panel { right: auto; left: 0; }

.ls[data-open="true"] .ls__panel {
  opacity: 1;
  transform: translateY(0);
  clip-path: inset(0 0 0 0);
  pointer-events: auto;
}

.ls .ls__list { margin: 0; padding: 0; list-style: none; }

.ls .ls__item {
  display: grid;
  grid-template-columns: 26px 1fr 14px;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 0 10px;
  color: var(--ls-fg);
  text-decoration: none;
  /* появление пунктов волной — задержка выставляется скриптом */
  opacity: 0;
  translate: 0 6px;
  transition: background-color .16s var(--ls-ease-ui), opacity .2s var(--ls-ease-ui),
              translate .28s var(--ls-ease);
}
.ls[data-open="true"] .ls__item { opacity: 1; translate: 0 0; }
.ls .ls__item:hover, .ls__item:focus-visible { background: var(--ls-hover); }
.ls .ls__item:focus-visible { outline: 2px solid var(--ls-ring); outline-offset: -2px; }

.ls .ls__key {
  font: 600 11px/1 "IBM Plex Sans", system-ui, sans-serif;
  letter-spacing: .08em;
  color: var(--ls-muted);
  transition: color .16s var(--ls-ease-ui), transform .22s var(--ls-ease);
}
.ls .ls__item:hover .ls__key { color: var(--ls-fg); transform: translateX(2px); }

/* Названия языков пишутся так, как их пишет сам язык. Реестр и радар
   поднимают в шапке uppercase и трекинг — сюда это не пускаем. */
.ls .ls__name {
  font: 400 13px/1.2 "IBM Plex Sans", system-ui, sans-serif;
  text-transform: none;
  letter-spacing: 0;
}

.ls .ls__tick { width: 14px; height: 14px; opacity: 0; color: var(--ls-accent); }
.ls .ls__item[aria-current="true"] .ls__tick { opacity: 1; }
.ls .ls__item[aria-current="true"] .ls__key { color: var(--ls-fg); }
.ls .ls__item[aria-current="true"] .ls__name { font-weight: 600; }

/* ---------- узкие экраны: тач-цели 44 ---------- */
@media (max-width: 760px) {
  .ls .ls__btn { height: 44px; padding: 0 12px; }
  .ls .ls__item { min-height: 44px; }
  .ls .ls__panel { min-width: 200px; }
}

/* На узких панель всё равно растёт влево от кнопки: `left: 0` здесь уводил её
   за правый край экрана (поймано на 375px 12.09.2026). Держим правый край и
   ограничиваем ширину окном. */
@media (max-width: 380px) {
  .ls .ls__panel { min-width: 0; width: max(176px, min(200px, calc(100vw - 24px))); }
}

/* ---------- запрошенное спокойствие ---------- */
@media (prefers-reduced-motion: reduce) {
  .ls .ls__panel {
    transform: none;
    clip-path: none;
    transition: opacity .12s linear;
  }
  .ls .ls__item {
    translate: none;
    transition-delay: 0s !important;
    transition: background-color .12s linear, opacity .12s linear;
  }
  .ls .ls__caret { transition: opacity .12s linear; }
  .ls .ls__item:hover .ls__key { transform: none; }
}

/* Пока скрипт не отработал, ссылки остаются видимым рядом — без скачка вёрстки */
.ls:not([data-ready]) .ls__panel { position: static; opacity: 1; clip-path: none;
  transform: none; box-shadow: none; border: 0; padding: 0; background: transparent;
  pointer-events: auto; }
.ls:not([data-ready]) .ls__item { opacity: 1; translate: none; }
.ls:not([data-ready]) .ls__btn { display: none; }
.ls:not([data-ready]) .ls__list { display: flex; gap: 2px; }
.ls:not([data-ready]) .ls__tick { display: none; }
.ls:not([data-ready]) .ls__name { display: none; }