/* ==========================================================================
   Меню языка (lang.js) — общее для главной, кабинета, мини-аппа и страниц
   документов. Цвета берутся из переменных страницы (--surface, --ink…).

   Кнопка шапки показывает код языка и стрелку; по нажатию под ней выезжает
   список. Список стоит в <body> (position: fixed), поэтому шапки с
   размытием и обрезкой ему не мешают. Один вид для главной, кабинета и мини-аппа. */
.lang-toggle { gap: 0.3rem; }
.lang-globe { flex: none; }
.lang-caret { flex: none; opacity: 0.75; transition: transform var(--dur-2) var(--ease); }
.lang-toggle[aria-expanded='true'] { --b-bg: var(--bg-soft); color: var(--ink); }
.lang-toggle[aria-expanded='true'] .lang-caret { transform: rotate(180deg); }

.lang-pop {
  position: fixed; z-index: 120; top: 0; left: 0;
  display: grid; gap: 2px;
  min-width: 12.5rem; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow-y: auto;
  padding: 0.4rem;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: var(--r-lg);
  /* фон сплошной: стекло с размытием в Safari (а значит, и в Telegram на iPhone) просвечивало — текст страницы читался сквозь меню */
  background: var(--surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 26px 60px -26px rgba(10, 6, 30, 0.6), 0 4px 14px -6px rgba(10, 6, 30, 0.28);
  font-family: var(--font);
  opacity: 0; pointer-events: none;
  transform: translateY(-10px) scale(0.96); transform-origin: var(--lang-ox, 100%) 0;
  transition: opacity 0.16s ease, transform 0.24s var(--ease);
}
.lang-pop.is-up { transform: translateY(10px) scale(0.96); transform-origin: var(--lang-ox, 100%) 100%; }
.lang-pop.is-open { opacity: 1; pointer-events: auto; transform: none; }

.lang-opt {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.25rem;
  width: 100%; min-height: 44px; padding: 0.45rem 0.8rem;
  border: 0; border-radius: var(--r-md); background: none;
  color: var(--ink-2); font: inherit; font-size: var(--t-sm); font-weight: 500; line-height: 1.2; text-align: left;
  cursor: pointer;
  /* пункты выезжают следом за списком, каждый чуть позже предыдущего */
  opacity: 0; transform: translateY(-6px);
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), opacity 0.2s ease, transform 0.26s var(--ease);
}
.lang-pop.is-up .lang-opt { transform: translateY(6px); }
.lang-pop.is-open .lang-opt { opacity: 1; transform: none; }
.lang-pop.is-open .lang-opt:nth-child(2) { transition-delay: 0s, 0s, 0.02s, 0.02s; }
.lang-pop.is-open .lang-opt:nth-child(3) { transition-delay: 0s, 0s, 0.04s, 0.04s; }
.lang-pop.is-open .lang-opt:nth-child(4) { transition-delay: 0s, 0s, 0.06s, 0.06s; }
.lang-pop.is-open .lang-opt:nth-child(5) { transition-delay: 0s, 0s, 0.08s, 0.08s; }
.lang-pop.is-open .lang-opt:nth-child(6) { transition-delay: 0s, 0s, 0.1s, 0.1s; }
.lang-pop.is-open .lang-opt:nth-child(7) { transition-delay: 0s, 0s, 0.12s, 0.12s; }
.lang-pop.is-open .lang-opt:nth-child(8) { transition-delay: 0s, 0s, 0.14s, 0.14s; }
.lang-opt:hover, .lang-opt:focus-visible { background: color-mix(in srgb, var(--ink) 9%, transparent); color: var(--ink); }
.lang-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.lang-opt[aria-checked='true'] { color: var(--ink); font-weight: 600; }
.lang-opt-c { display: inline-flex; align-items: center; justify-content: flex-end; min-width: 1.6rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; color: var(--ink-3); }
.lang-opt[aria-checked='true'] .lang-opt-c { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .lang-pop, .lang-pop.is-up, .lang-opt, .lang-pop.is-up .lang-opt { transform: none; transition: opacity 0.12s ease; }
  .lang-pop.is-open .lang-opt { transition-delay: 0s; }
  .lang-caret { transition: none; }
}