/* ПЕРЕКЛЮЧАТЕЛЬ ЯЗЫКА — ОДИН НА ТРИ САЙТА (09-09).
   Почему отдельный файл: у вики, таблицы и folio три разных стиля (wiki.css / base.css /
   folio.css), а переключатель обязан выглядеть и вести себя одинаково — это одна экосистема,
   и человек переходит между сайтами с той же куки языка. Одно описание, один кэшируемый файл.

   Почему <details>, а не свой дропдаун на JS: он открывается сверху вниз, по умолчанию свёрнут
   и показывает ТОЛЬКО текущий язык (как селект валюты), работает без единого байта скрипта и на
   телефоне тоже. Внутри лежат НАСТОЯЩИЕ ссылки <a> — краулер видит языковые версии, а не кнопку.
   Цвета берём из переменных темы каждого сайта, поэтому файл не навязывает свою палитру. */
.langsw { position: relative; display: inline-block; }
.langsw > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 9px; border-radius: 8px;
  font: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
  color: var(--text, #e8eef7);
  background: var(--panel2, var(--panel, rgba(255,255,255,.05)));
  border: 1px solid var(--hair, rgba(255,255,255,.10));
}
.langsw > summary::-webkit-details-marker { display: none; }
.langsw > summary::marker { content: ""; }
.langsw > summary:hover { border-color: var(--accent, #4da3ff); }
.langsw > summary .car {
  width: 0; height: 0; margin-left: 1px;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; opacity: .65;
}
.langsw[open] > summary .car { transform: rotate(180deg); }
.langsw-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 1200;
  min-width: 168px; padding: 6px;
  border-radius: 10px;
  background: var(--popup, var(--panel, #131a24));
  border: 1px solid var(--hair, rgba(255,255,255,.12));
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.langsw-menu a {
  display: flex; align-items: baseline; gap: 8px;
  padding: 7px 9px; border-radius: 7px;
  color: var(--text, #e8eef7); text-decoration: none;
  font-size: 13px; white-space: nowrap;
}
.langsw-menu a b { font-weight: 700; min-width: 24px; }
.langsw-menu a span { color: var(--muted, #8fa0b5); font-size: 12.5px; }
.langsw-menu a:hover { background: var(--hover, rgba(255,255,255,.07)); }
.langsw-menu a.on { background: var(--accent, #4da3ff); color: #06121f; }
.langsw-menu a.on span { color: rgba(6,18,31,.7); }
/* узкий экран: меню прижимается к правому краю и не уезжает за вьюпорт */
@media (max-width: 520px) { .langsw-menu { right: -4px; min-width: 150px; } }