/* Выбор языка «Сетка кодов» (выбор Ильи 22.10; прототип site/app/_/lang ?lv=2). Разметка LangSwitch.astro.
   Кнопка = код текущего языка + шеврон (Iconly «Arrow - Right 2», повёрнут), высота как у «Меню».
   Сетка до 4 в ряд (--cols = min(4, BUILT)): код Geologica 20/500, под ним название на этом языке 13 px (CD).
   Стекло той же системы, что шапка: тинт + blur 16 saturate 1.7 + блики кромки; светлое над светлой секцией,
   тёмное над тёмной, в меню и в подвале. Света нет: он здесь ничего не объясняет.
   Меню < 1024: кнопки нет, сетка открыта в подвале меню (зоны ≥ 56 px). Подвал (.lp-up): список открывается вверх. */
.lp { position: relative; }
.lp-btn { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 0 10px 0 12px; border: 0; border-radius: 999px;
  background: none; color: var(--fg); font: inherit; letter-spacing: 0; cursor: pointer; transition: background-color 200ms ease; }
.lp-ar { display: grid; place-items: center; opacity: 0.7; transform: rotate(90deg); transition: transform 200ms var(--ease-out); }
.lp-ar svg { display: block; }
.lp.open .lp-ar { transform: rotate(-90deg); }
.lp-up .lp-ar { transform: rotate(-90deg); } .lp-up.open .lp-ar { transform: rotate(90deg); }
.hd .lp-btn:active, .hd .lp.open .lp-btn { background: var(--hd-active); }
@media (hover: hover) { .hd .lp-btn:hover { background: var(--hd-active); } }
.mx .lp-btn, .site-footer .lp-btn { color: #fff; }
.mx .lp.open .lp-btn, .site-footer .lp.open .lp-btn { background: rgb(255 255 255 / 0.1); }
@media (hover: hover) { .mx .lp-btn:hover, .site-footer .lp-btn:hover { background: rgb(255 255 255 / 0.1); } }
@media (min-width: 1024px) { .hd .lp-btn, .mx .lp-btn { height: clamp(40px, 2.5vw, 48px); } }

/* ---------- всплывающая сетка: стекло ---------- */
.lp-pop { position: absolute; z-index: 60; top: calc(100% + 8px); right: 0; display: none; width: max-content; padding: 6px; border-radius: 20px;
  transform-origin: 100% 0; color: #000; --lp-2: #4A5260; --lp-hover: rgb(0 0 0 / 0.05); --lp-cur: var(--link);
  background: rgb(255 255 255 / 0.9); -webkit-backdrop-filter: blur(16px) saturate(1.7); backdrop-filter: blur(16px) saturate(1.7);
  box-shadow: inset 0 1.5px 0.5px -0.5px rgb(255 255 255 / 0.95), inset 0 -1.5px 0.5px -0.5px rgb(255 255 255 / 0.8),
    0 0 0 0.5px rgb(0 0 0 / 0.08), 0 16px 40px -16px rgb(0 0 0 / 0.28); }
html[data-hero="dark"] .hd .lp-pop, .mx .lp-pop, .site-footer .lp-pop { color: #fff; --lp-2: #CACDD2; --lp-hover: rgb(255 255 255 / 0.08); --lp-cur: var(--sky);
  background: rgb(10 10 12 / 0.84);
  box-shadow: inset 0 1.5px 0.5px -0.5px rgb(255 255 255 / 0.3), inset 0 14px 14px -14px rgb(255 255 255 / 0.06),
    inset 0 -1.5px 0.5px -0.5px rgb(255 255 255 / 0.07), 0 0 0 0.5px rgb(255 255 255 / 0.08), 0 16px 40px -16px rgb(0 0 0 / 0.7); }
.lp-up .lp-pop { top: auto; bottom: calc(100% + 8px); transform-origin: 100% 100%; }
.lp.open .lp-pop { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .lp.open .lp-pop { animation: lp-in 180ms cubic-bezier(0.23, 1, 0.32, 1); }
  @keyframes lp-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }
  .lp-up.open .lp-pop { animation-name: lp-in-up; }
  @keyframes lp-in-up { from { opacity: 0; transform: translateY(4px) scale(0.98); } }
}
.lp-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(76px, auto)); gap: 2px; }
.lp-i { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; min-height: 64px; padding: 8px 10px;
  border-radius: 12px; color: inherit; text-decoration: none; transition: background-color 160ms ease; }
.lp-c { order: -1; font: 500 20px/1 var(--display); letter-spacing: -0.02em; color: inherit; }
.lp-n { font: 400 13px/1.2 var(--font); letter-spacing: -0.005em; color: var(--lp-2); white-space: nowrap; }
a.lp-i:focus-visible { outline: 2px solid var(--lp-cur); outline-offset: -2px; }
@media (hover: hover) { a.lp-i:hover { background: var(--lp-hover); } }
.lp-i[aria-current] { cursor: default; }
.lp-i[aria-current] :is(.lp-c, .lp-n) { color: var(--lp-cur); }

/* ---------- подвал на телефоне: язык под ссылками слева — сетка открывается от левого края ---------- */
@media (max-width: 767px) { .site-footer .lp-pop { right: auto; left: 0; transform-origin: 0 100%; } .site-footer .lp { margin-left: -12px; } }

/* ---------- меню < 1024: сетка открыта, в сетке меню, пальцем ---------- */
@media (max-width: 1023px) {
  .mx .lp { display: block; width: auto; margin: 0 -10px; justify-self: stretch; } /* подвал меню justify-items: start */
  .mx .lp-btn { display: none; }
  .mx .lp-pop { position: static; display: block; width: auto; padding: 0; border-radius: 0; background: none; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none; animation: none !important; }
  .mx .lp-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mx .lp-i { min-height: 56px; }
}