/* РАСКЛАДКИ ШАПКИ - ЗЕРКАЛО, А НЕ СВОЯ ВЕРСИЯ.

   Источник: design/v4/site-header/kit/ (4 файла). Собирает tools/adopt-header.php;
   правка руками теряется при следующем срезе и теряется молча.

   Отступления от побайтовой копии объявлены В КОДЕ ИНСТРУМЕНТА и печатаются отчётом
   прогона. Их 19, из них общих замен 8. */

/* ===== ls-bar-base.css ===== */
/* ШАПКА · основа. Подключается ПЕРВЫМ.
 *
 * Правила кита, унаследованные от подвала дословно:
 *   - условия только ДИАПАЗОННОЙ формой: ширина бумаги дробная (374.8, 636.8,
 *     960.8, 1376.8), и пара max-width/min-width оставляет щель, в которую
 *     раскладка падает молча;
 *   - контейнер ИМЕНОВАННЫЙ (ls): безымянный запрос подписался бы на ширину
 *     окна редактора и на кнопке "телефон" показал бы десктоп;
 *   - у каждого var() запасное значение, ОДНО НА ИМЯ во всех четырёх китах;
 *   - только логические свойства.
 *
 * Таблица "кто пишет" - в 02-TOKENS.md. Форма таблицы взята у подвала
 * (kit/ls-set.css:32-72) буквально.
 */

/* .ls-page - КОНТЕЙНЕР. Отдельный узел обязателен: элемент НЕ отвечает на
 * свой собственный контейнерный запрос, и объявление переменных на самом
 * контейнере узкой веткой не перекрывается вовсе - молча, без ошибки.
 * Найдено холстом, см. 03-CAVEATS №23. */
.ls-page {
  container-type: inline-size;
  container-name: ls;
  position: relative;            /* позиционирующий предок для семьи B */
  /* НЕЛЬЗЯ: transform, filter, contain - вырывают fixed и убивают закрепление */

  /* читатель 2 из трёх: якоря. ОДНО объявление на сайт. */
  scroll-padding-block-start: var(--ls-bar-h-min, 80px);
}

/* .ls-site - потомок контейнера: здесь живут формула, признак набора и
 * состояние прокрутки. Всё, что меняется веткой, объявляется ЗДЕСЬ. */
.ls-site {

  /* --- высота шапки: ОДИН хозяин, объявляется РОВНО ЗДЕСЬ --- */
  --ls-bar-hit: 44px;
  --ls-bar-item: 16px;
  --ls-bar-h:      calc(var(--ls-bar-pad-block, 18px) * 2
                   + max(var(--ls-bar-hit, 44px), var(--ls-bar-logo-max, 40px)));
  --ls-bar-h-min:  calc(var(--ls-bar-pad-block, 18px) * 2
                   + max(var(--ls-bar-hit, 44px), 40px));
  --ls-bar-h-full: calc(var(--ls-bar-h, 80px)
                   + var(--ls-bar-top-h, 0px)
                   + var(--ls-bar-ann-h, 0px)
                   + var(--ls-bar-nav-h, 0px));
  --ls-bar-solid-at: var(--ls-bar-h, 80px);
  --ls-bar-over: 1;

  /* --ls-vp - высота области просмотра. НУЖНА потому, что 100cqh при
   * container-type: inline-size НЕ ОПРЕДЕЛЁН: у контейнера нет block-размера,
   * и браузер молча берёт малый viewport - в редакторе первый экран считался
   * бы от окна редактора, а не от бумаги. Имя уже было в теме потребителем
   * БЕЗ ПИСАТЕЛЯ; здесь писатель назван: редактор печатает высоту бумаги,
   * опубликованная страница - 100dvh. */
  --ls-vp: 100dvh;
}

.ls-bar {
  position: sticky;
  inset-block-start: 0;
  z-index: 30;
  background: var(--ls-bar-plane, var(--ls-paper, #fff));
  color: var(--ls-ink, #1a1a18);
  /* при over=1 ноль; при over=0 минус высота - шапка ложится поверх экрана.
   * Одна запись, оба поведения. */
  margin-block-end: calc((var(--ls-bar-over, 1) - 1) * var(--ls-bar-h, 80px));
  padding-block-start: env(safe-area-inset-top, 0px);
}

.ls-bar__row {
  /* ЭТО узел, чью высоту описывает --ls-bar-h. Ряды вне него в закреплённую
   * высоту не входят - на этом стоит вся семья C. */
  padding-block: var(--ls-bar-pad-block, 18px);
  padding-inline: var(--ls-page-gut, 24px);
  box-shadow: inset 0 calc(-1 * var(--ls-bar-rule, 0px)) 0 var(--ls-line, #e2ded7);
}

/* 1600-1920: ЗАЛИВКА полосы во всю ширину окна (иначе обрубок), СОДЕРЖИМОЕ по
 * мере 1536. Правило проекта: шапка равна содержимому равна подвалу - иначе
 * меню уезжает к краю монитора, а заголовок под ним начинается на две сотни
 * точек правее. Мера 1536 - предел содержимого, а не порог раскладки. */
.ls-bar__in {
  max-inline-size: var(--section-max-width, 1536px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--ls-bar-gap, 24px);
}

.ls-bar__div {
  flex: 0 0 auto;
  inline-size: 1px;
  block-size: 24px;
  background: var(--ls-line, #e2ded7);
}
.ls-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* Читает ОБА имени, ровно как формула --ls-bar-h: иначе формула обещает
     max(44, предел), а коробка держится на 44, и высота набора с крупным
     знаком молча остаётся базовой. */
  min-block-size: max(var(--ls-bar-hit, 44px), var(--ls-bar-logo-max, 40px));
  min-inline-size: 0;
  color: inherit;
  text-decoration: none;
}
.ls-logo__pic { block-size: var(--ls-bar-logo-max, 40px); inline-size: auto; }
.ls-logo__txt {
  font-family: var(--ls-head-face, inherit);
  font-size: var(--ls-bar-name, 22px);
  /* 1.109 - минимальный интерлиньяж кириллицы без столкновения чернил.
   * У латиницы 0.969, у иврита 0.922: берём худший случай. */
  line-height: 1.109;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ls-menu { min-inline-size: 0; }
.ls-menu__list {
  margin: 0; padding: 0; list-style: none;
  display: flex; align-items: center;
  gap: var(--ls-bar-gap, 24px);
  min-inline-size: 0;
}

.ls-link, .ls-dd__btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-block-size: var(--ls-bar-hit, 44px);
  color: inherit; text-decoration: none;
  font-size: var(--ls-bar-item, 16px);
  line-height: 1.5; white-space: nowrap;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit;
}
.ls-link:hover, .ls-dd__btn:hover { text-decoration: underline; text-underline-offset: 4px; }
.ls-link:focus-visible, .ls-dd__btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Шеврон - РИСУНОК, не лигатура: рядом текст кеглем 16, глиф 22 перевесит. */
.ls-dd__chev {
  inline-size: 6px; block-size: 6px;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  rotate: 45deg; translate: 0 -2px;
}

.ls-barSoc { display: flex; align-items: center; gap: 8px; }
.ls-soc {
  inline-size: var(--ls-bar-hit, 44px);
  block-size: var(--ls-bar-hit, 44px);
  display: inline-flex; align-items: center; justify-content: center;
  color: inherit; text-decoration: none;
}
.ls-soc:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
/* Коробка глифа 22 при цели 44, поле 11. Число подвала, оба пакета на нём. */
.ls-soc__i { inline-size: 22px; block-size: 22px; fill: currentColor; }

/* ОТСТУПЛЕНИЕ: правило ЗАПЕРТО ОБЛАСТЬЮ ШАПКИ, А ФОРМУ ЕМУ ЗАДАЁТ ОБЩИЙ СВОД.
   `.ls-btn` у нас - класс кнопок всего сайта: им печатаются кнопки секций
   (site-render.php:990) и подвала. Голое корневое правило кита задало бы им
   фон и цвет - те свойства, которые PHP печатает инлайном от опоры полосы.
   Рост, поле и угол здесь СНЯТЫ: их даёт `.ls-btn.ls-btn` из `site-v2.css`,
   один набор на весь сайт. Замерено до правки: полоса 125x44 против 137x52
   у секций - расходились все пять величин. */
.ls-bar .ls-btn, .ls-sheet .ls-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ls-ink, #1a1a18);
  color: var(--ls-paper, #fff);
  text-decoration: none;
  font-size: var(--ls-cta-fs, 16px);
  line-height: 1.5; white-space: nowrap;
}
.ls-bar .ls-btn:focus-visible, .ls-sheet .ls-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.ls-burger {
  inline-size: var(--ls-bar-hit, 44px);
  block-size: var(--ls-bar-hit, 44px);
  display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: none; border: 0; padding: 0; color: inherit; cursor: pointer;
}
.ls-burger:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.ls-burger__i { inline-size: 20px; block-size: 2px; background: currentColor; }

/* Читатель 3 из трёх: приклеенные колонки. Разложенные 105 = 80 + 24:
 * зазор остаётся У ЧИТАТЕЛЯ, а не у шапки. */
.ls-stickyCol { inset-block-start: calc(var(--ls-bar-h, 80px) + 24px); }

/* ===== ls-bar-sets.css ===== */
/* ШАПКА · объявления десяти наборов. Подключается ВТОРЫМ.
 *
 * ВАЖНО: признак набора печатается на .ls-site, а НЕ на .ls-bar. Формула
 * --ls-bar-h и её слагаемые обязаны жить на одном узле, иначе сумма
 * вычисляется там, где слагаемых ещё нет - и на узком, и у семьи C высота
 * молча остаётся базовой. Найдено холстом, см. 03-CAVEATS №22.
 *
 * PHP печатает ПОТРЕБИТЕЛЯ с широким запасом; CSS объявляет узкое значение.
 * Инлайн бьёт таблицу стилей, поэтому разница между наборами живёт ТОЛЬКО
 * в объявлении. Запасное - одно на имя, см. 02-TOKENS.md.
 */

/* ============ СЕМЬЯ A · полоса ============ */

.ls-site--a1, .ls-site--a2, .ls-site--a3, .ls-site--a4 { --ls-bar-over: 1; }

.ls-site--a1 {
  --ls-bar-pad-block: clamp(12px, 1.25cqi, 18px);
  --ls-bar-logo-max: 40px;
  --ls-bar-name: 22px;
  --ls-bar-gap: clamp(16px, 1.67cqi, 24px);
  --ls-bar-align: flex-start;
}
.ls-site--a1 .ls-bar__cta { margin-inline-start: auto; }
.ls-site--a1[data-align="end"] .ls-menu { margin-inline-start: auto; }

/* A2 - СЕТКА, а не флекс: меню по центру ПОЛОСЫ, а не остатка строки.
 * Настройкой это не выражается - отсюда отдельный набор. */
.ls-site--a2 {
  --ls-bar-pad-block: clamp(12px, 1.25cqi, 18px);
  --ls-bar-logo-max: 40px;
  --ls-bar-name: 22px;
  --ls-bar-gap: clamp(16px, 1.67cqi, 24px);
}
.ls-site--a2 .ls-bar__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}
.ls-site--a2 .ls-bar__cta { justify-self: end; }

/* A3 - знак по центру, меню по сторонам. Предел знака 64: самая высокая
 * шапка семьи, закрепление ТРЕБУЕТ сжатия (потолок 96). */
.ls-site--a3 {
  --ls-bar-pad-block: clamp(12px, 1.25cqi, 18px);
  --ls-bar-logo-max: 64px;
  --ls-bar-name: 28px;
  --ls-bar-gap: clamp(16px, 1.67cqi, 24px);
}
.ls-site--a3 .ls-bar__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

/* A4 - плотная. Цель 44 при росте 30 добирается ::after: рост органа падает,
 * цель нажатия НЕ падает никогда. */
.ls-site--a4 {
  --ls-bar-pad-block: 12px;
  --ls-bar-logo-max: 44px;
  --ls-bar-name: 20px;
  --ls-bar-gap: clamp(12px, 1.25cqi, 18px);
  --ls-bar-item: 15px;
}
.ls-site--a4 .ls-link { min-block-size: 30px; position: relative; }
.ls-site--a4 .ls-link::after {
  content: ''; position: absolute;
  inset-block: -7px; inset-inline: 0;
}

/* ============ СЕМЬЯ B · слой ============ */

.ls-site--b1, .ls-site--b2, .ls-site--b3 {
  --ls-bar-over: 0;
  --ls-bar-plane: transparent;
  --ls-bar-rule: 0px;
}
/* Внутренняя страница: снимка нет - наложения нет. Признак печатает СЕРВЕР
 * по первой секции, и шапка становится плотной без скрипта. */
.ls-site--b1[data-inner], .ls-site--b2[data-inner], .ls-site--b3[data-inner] {
  --ls-bar-over: 1;
  --ls-bar-plane: var(--ls-paper, #fff);
  --ls-bar-rule: 1px;
}

.ls-site--b1 {
  --ls-bar-pad-block: clamp(12px, 1.25cqi, 18px);
  --ls-bar-logo-max: 40px;
  --ls-bar-veil-h: calc(var(--ls-bar-h, 80px) * 2.2);
}
/* Вуаль ВЕРТИКАЛЬНАЯ: 90deg не зеркалится в RTL - ловушка, формально
 * проходящая линтер. */
.ls-bar__veil {
  position: absolute; inset-block-start: 0; inset-inline: 0;
  block-size: var(--ls-bar-veil-h, 176px);
  background: linear-gradient(to bottom,
              rgb(0 0 0 / var(--ls-bar-veil, 0)), rgb(0 0 0 / 0));
  pointer-events: none;
}

.ls-site--b2 {
  --ls-bar-pad-block: clamp(12px, 1.25cqi, 18px);
  --ls-bar-logo-max: 40px;
  --ls-bar-plate-pad: clamp(12px, 1.11cqi, 16px);
  /* ОТСТУПЛЕНИЕ: угол плашки подчинён ступени скругления - кит держал
     жёсткие 22px, и на `Square` плашка оставалась круглой. Отступ не умножается:
     это другая ось. */
  --ls-bar-plate-radius: calc(calc(22px * var(--ls-r-k, 1)) + var(--ls-bar-plate-pad, 12px));
  --ls-bar-veil: 0;   /* ноль ЯВНО: две подложки сразу недопустимы */
}
.ls-site--b2 .ls-bar__group {
  display: flex; align-items: center;
  gap: var(--ls-bar-gap, 24px);
  /* Блочное поле 6 и НЕ течёт: иначе пилюля поднимет полосу, и высота шапки
   * станет зависеть от яркости снимка. */
  padding-block: 6px;
  padding-inline: var(--ls-bar-plate-pad, 12px);
  border-radius: var(--ls-bar-plate-radius, calc(34px * var(--ls-r-k,1)));
  background: rgb(from var(--ls-bar-plate-ink, #241f19) r g b / var(--ls-bar-plate, 0));
}

.ls-site--b3 {
  --ls-bar-pad-block: clamp(12px, 1.25cqi, 18px);
  --ls-bar-logo-max: 64px;
  --ls-bar-name: 28px;
}
.ls-site--b3 .ls-bar__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}
/* Единственное, что меняет прокрутка у B3: предел роста знака. Высота
 * пересчитывается формулой сама, все три читателя узнают об этом сами. */
.ls-site--b3[data-scrolled] {
  --ls-bar-logo-max: 40px;
  --ls-bar-name: 22px;
}

/* ============ СЕМЬЯ C · составная ============ */

.ls-site--c1, .ls-site--c2, .ls-site--c3 { --ls-bar-over: 1; }

/* C1 - верхний ряд ВНЕ .ls-bar__row, значит вне закреплённой высоты.
 * --ls-bar-h не меняется вовсе; покойная живёт в --ls-bar-h-full. */
.ls-site--c1 {
  --ls-bar-pad-block: clamp(12px, 1.25cqi, 18px);
  /* Роль плоскости печатает PHP по палитре; кит объявляет её ТОЖЕ - иначе при
     молчании PHP у потребителя нет ни одного писателя, и правило невалидно. */
  --ls-bar-top-plate: var(--ls-band, #eeebe3);
  --ls-bar-top-pad: 8px;
  --ls-bar-top-h: calc(var(--ls-bar-top-pad, 8px) * 2 + 32px);
  --ls-bar-solid-at: var(--ls-bar-top-h, 48px);
  --ls-bar-rule: 1px;
}
.ls-bar__top {
  padding-block: var(--ls-bar-top-pad, 8px);
  padding-inline: var(--ls-page-gut, 24px);
  background: var(--ls-bar-top-plate, var(--ls-band, #eeebe3));
  color: var(--ls-muted, #5d5a53);
  box-shadow: inset 0 -1px 0 var(--ls-line, #e2ded7);
}
.ls-bar__top .ls-link, .ls-bar__top .ls-soc {
  min-block-size: 32px; block-size: auto; position: relative;
}
/* Поле цели ЛИТЕРАЛОМ. Найдено проверкой 39: хол в style-after не резолвится,
 * и объявление выбрасывается молча. */
.ls-bar__top .ls-link::after { content: ''; position: absolute; inset-block: -6px; inset-inline: 0; }
.ls-bar__top .ls-soc { inline-size: 32px; block-size: 32px; }
.ls-bar__top .ls-soc::after { content: ''; position: absolute; inset: -6px; }

/* C2 - объявление вне закреплённой части. Закрытие меняет --ls-bar-ann-h,
 * и только его: закреплённая высота не пересчитывается на живой странице. */
.ls-site--c2 {
  --ls-bar-pad-block: clamp(12px, 1.25cqi, 18px);
  /* то же: писатель кита рядом с писателем PHP */
  --ls-bar-ann-plate: var(--ls-acc, #25523f);
  --ls-bar-ann-fs: clamp(14px, 1.11cqi, 16px);
  --ls-bar-ann-hit: 32px;
  --ls-bar-ann-pad: 6px;
  --ls-bar-ann-align: center;
  --ls-bar-ann-rows: 1;   /* писатель - РАСКЛАДКА: число строк выясняется
                             переносом, как у --ls-bar-nav-rows в C3 */
  /* Высота ВЫВОДИТСЯ, а не назначается: строка приходит от клиента, кириллица
     длиннее латиницы, кегль течёт. "auto" объявить нельзя - в calc() оно
     невалидно, а слагаемое без объявления это писатель "никто". */
  --ls-bar-ann-h: max(
      calc(var(--ls-bar-ann-pad, 6px) * 2 + var(--ls-bar-ann-hit, 32px)),
      calc(var(--ls-bar-ann-pad, 6px) * 2
           + var(--ls-bar-ann-rows, 1) * var(--ls-bar-ann-fs, 16px) * 1.45));
  --ls-bar-solid-at: var(--ls-bar-ann-h, 44px);
}
.ls-bar__ann {
  padding-block: var(--ls-bar-ann-pad, 6px);
  padding-inline: var(--ls-page-gut, 24px);
  background: var(--ls-bar-ann-plate, var(--ls-acc, #25523f));
  color: var(--ls-acc-on, #fff);
  font-size: var(--ls-bar-ann-fs, 16px);
  line-height: 1.45;
}
.ls-site--c2[data-ann-closed] { --ls-bar-ann-h: 0px; }   /* закрытие меняет ЭТО имя, и только его */
.ls-ann__x {
  position: relative;
  inline-size: var(--ls-bar-ann-hit, 32px);
  block-size: var(--ls-bar-ann-hit, 32px);
  background: none; border: 0; padding: 0; color: inherit; cursor: pointer;
}
.ls-ann__x::after { content: ''; position: absolute; inset: -6px; }

/* C3 - ряд меню вне закреплённой части. ЕДИНСТВЕННОЕ место пакета, где
 * flex-wrap разрешён: рост ряда не касается закреплённой высоты. */
.ls-site--c3 {
  --ls-bar-pad-block: clamp(12px, 1.25cqi, 18px);
  --ls-bar-name: 24px;
  --ls-bar-nav-pad: 4px;
  --ls-bar-nav-rows: 1;
  --ls-bar-nav-gap: clamp(20px, 2.08cqi, 30px);
  --ls-bar-nav-align: center;
  --ls-bar-nav-h: calc(var(--ls-bar-nav-pad, 4px) * 2
                  + var(--ls-bar-hit, 44px) * var(--ls-bar-nav-rows, 1)
                  + 4px * (var(--ls-bar-nav-rows, 1) - 1));
  --ls-bar-solid-at: var(--ls-bar-nav-h, 52px);
}
.ls-bar__nav {
  padding-block: var(--ls-bar-nav-pad, 4px);
  padding-inline: var(--ls-page-gut, 24px);
  box-shadow: inset 0 -1px 0 var(--ls-line, #e2ded7);
}
.ls-bar__nav .ls-menu__list {
  justify-content: var(--ls-bar-nav-align, center);
  gap: var(--ls-bar-nav-gap, 30px);
  flex-wrap: wrap;
  row-gap: 4px;
}
/* ОТСТУПЛЕНИЕ: прятание второго ряда снято решением владельца - пункты меню
   при прокрутке не исчезают. Набор C3 убран из реестра вёрстки, читателя у
   переменной больше нет. */

/* ===== ls-bar-states.css ===== */
/* ШАПКА · состояния. Подключается ТРЕТЬИМ. */

/* Порог: плоскость появляется, когда первый экран сдвинулся на свою шапку.
 * Возврат - 80% от порога: гистерезис против мигания на инерционной прокрутке.
 * При scrollTop=0 состояние ВСЕГДА покой - иначе шапка залипает плотной на
 * самом верху, и на скриншоте это не видно. */
.ls-bar {
  transition: background-color var(--ls-dur-med, 180ms) ease-out,
              box-shadow var(--ls-dur-med, 180ms) ease-out,
              color 140ms ease-out;
}
.ls-site[data-scrolled] {
  /* ОТСТУПЛЕНИЕ: плоскость здесь не называется - её возвращает маршрутизация
     из `--ls-bar-fill`, посчитанная под ВИД полосы. Названная бумага белила бы
     тёмную ленту при прокрутке. */
  --ls-bar-rule: 1px;
  --ls-bar-veil: 0;
  --ls-bar-plate: 0;
}
/* Высота меняется у трёх наборов, и все три меняют ВХОДНОЕ имя формулы,
 * а не высоту: у высоты трое читателей и не должно быть второго писателя. */
.ls-site--b3 .ls-bar, .ls-site--c1 .ls-bar,
.ls-site--c2 .ls-bar, .ls-site--c3 .ls-bar {
  transition: background-color var(--ls-dur-med, 180ms) ease-out,
              box-shadow var(--ls-dur-med, 180ms) ease-out;
}
.ls-bar__top, .ls-bar__ann, .ls-bar__nav {
  transition: block-size var(--ls-dur-med, 180ms) cubic-bezier(.22, 1, .36, 1),
              opacity var(--ls-dur-med, 180ms) ease-out;
}

/* --- выпадающее: РАСКРЫТИЕ, не menu и не dialog ---
 * role=menu снят: контракт требует стрелок, Home, End и забирает Tab, а
 * содержимое панели - ССЫЛКИ. aria-expanded несёт состояние, aria-haspopup
 * избыточен и не ставится. */
.ls-dd { position: relative; }
.ls-dd__menu {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
  margin: 0; padding: 8px 0; list-style: none;
  min-inline-size: 200px;
  max-inline-size: 288px;      /* предел ширины панели: их число, замер */
  background: var(--ls-paper, #fff);
  border-radius: var(--ls-radius-md, 12px);
  box-shadow: 0 8px 24px rgb(0 0 0 / .12);
  z-index: 30;
  /* Закрытая НЕ ФОКУСИРУЕМА. aria-hidden не лечит: он убирает из дерева
   * доступности, но не из табуляции. Лечит visibility с отложенным переходом. */
  visibility: hidden;
  opacity: 0;
  translate: 0 -4px;
  transition: opacity 140ms ease-out, translate 140ms ease-out,
              visibility 0s linear 140ms;
}
.ls-dd__btn[aria-expanded="true"] + .ls-dd__menu {
  visibility: visible; opacity: 1; translate: 0 0;
  transition-delay: 0s;
}
/* Переворот у края - СЕРВЕРНЫЙ: класс печатает PHP при разрешении адреса,
 * потому что знает порядок пунктов. Скрипт уточняет одним измерением.
 * Молчание скрипта не оставляет панель за краем. */
.ls-dd--flip .ls-dd__menu { inset-inline-start: auto; inset-inline-end: 0; }
/* Геометрический мост 12 точек под кнопкой вместо задержки закрытия. */
.ls-dd::after { content: ''; position: absolute; inset-inline: 0; inset-block-start: 100%; block-size: 12px; }
.ls-dd__it {
  display: flex; align-items: center;
  min-block-size: var(--ls-bar-hit, 44px);
  padding-inline: 16px;
  color: inherit; text-decoration: none;
  font-size: var(--ls-bar-item, 16px);
}
.ls-dd__it:hover { background: var(--ls-band, #eeebe3); }
.ls-dd__it:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }

/* --- полка: РАЗВОРОТ на весь экран ---
 * Не выезд сбоку: выезд требует направления, направление зеркалится в RTL,
 * и на этом уже спотыкались - кадры брали знак translateX без поворота. */
.ls-scrim {
  position: fixed; inset: 0; z-index: 29;
  background: rgb(0 0 0 / .4);
  visibility: hidden; opacity: 0;
  transition: opacity 240ms ease-out, visibility 0s linear 240ms;
}
.ls-sheet {
  display: grid; grid-template-rows: 0fr;
  overflow: hidden;
  background: var(--ls-paper, #fff);
  transition: grid-template-rows 240ms cubic-bezier(.22, 1, .36, 1),
              visibility 0s linear 240ms;
  visibility: hidden;
}
.ls-sheet[data-open] { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
.ls-scrim[data-open] { visibility: visible; opacity: 1; transition-delay: 0s; }
/* ОТСТУПЛЕНИЕ: автоминимум элемента грида не давал закрытой полке схлопнуться,
   и она занимала треть экрана телефона на каждом сайте (замерено 260px при `0fr`). */
.ls-sheet > * { min-block-size: 0; }
.ls-sheet__list { margin: 0; padding: 0; list-style: none; }
.ls-sheetRow {
  min-block-size: 52px;
  display: flex; align-items: center; justify-content: space-between;
  color: inherit; text-decoration: none;
  font-size: 22px; line-height: 1.2;
  box-shadow: inset 0 -1px 0 var(--ls-line, #e2ded7);
  background: none; border: 0; inline-size: 100%; cursor: pointer;
  font-family: inherit; text-align: start;
}
/* Подпункт равен пункту по цели, отличается ОТСТУПОМ. У них 24 против 45.7
 * у верхнего уровня - их второй дефект целей нажатия. */
.ls-sheetRow--sub { padding-inline-start: 25px; }
.ls-sheet__sub { margin: 0; padding: 0; list-style: none; display: none; }
.ls-sheet__acc [aria-expanded="true"] + .ls-sheet__sub { display: block; }
.ls-sheet__cta { min-block-size: 48px; inline-size: 100%; }
/* Блокировка прокрутки под открытой полкой - дефект 6. */
body[data-sheet-open] { overflow: hidden; }

/* --- prefers-reduced-motion ---
 * ЕДИНСТВЕННЫЙ разрешённый @media (правило 08: запрет касается запросов к
 * ШИРИНЕ ОКНА). Мгновенно, а не "покороче" - правило 05. */
@media (prefers-reduced-motion: reduce) {
  .ls-bar, .ls-bar__top, .ls-bar__ann, .ls-bar__nav,
  .ls-dd__menu, .ls-sheet, .ls-scrim {
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
  /* Стартовые scale и translate сбрасываются отдельно: при снятом переходе
   * панель залипает в стартовой позе. Решение уже рабочее в теме. */
  .ls-dd__menu { translate: 0 0; scale: 1; }
}

/* ===== ls-bar-narrow.css ===== */
/* ШАПКА · контейнерные ветки. Подключается ПОСЛЕДНИМ.
 *
 * Условия ДИАПАЗОННОЙ формой. Довод не теоретический: ширина бумаги дробная -
 * в замерах подвала 374.8, 636.8, 960.8, 1376.8. Пара max-width: 700px и
 * min-width: 701px оставляет щель: при бумаге 700.5 не срабатывает ни одна
 * ветка, и раскладка молча падает в базовое значение.
 *
 * Контейнер ИМЕНОВАННЫЙ: в редакторе сайт стоит на бумаге 390 внутри окна
 * 1440, и безымянный запрос подписался бы на ширину окна редактора - на
 * кнопке "телефон" показал бы десктоп. Для шапки это критичнее, чем для
 * секций: бургер, появившийся по медиазапросу, в редакторе не появится
 * вовсе, и человек будет править то, чего не видит.
 */

@container ls (width <= 700px) {
  /* Переменные объявляются на .ls-site - там, где стоит формула. На .ls-bar
     они не пересчитали бы сумму: она вычисляется выше по дереву. */
  .ls-site {
    --ls-bar-pad-block: 12px;
    --ls-bar-logo-max: 32px;
    --ls-bar-name: 20px;
    --ls-bar-gap: 12px;
    --ls-bar-ann-hit: 44px;    /* на узком рост уже равен цели */
    --ls-bar-top-h: 0px;         /* верхний ряд C1 уходит в полку целиком */
    --ls-bar-nav-h: 0px;         /* ряд меню C3 схлопнут: узкий вид семьи A */
  }
  /* Порядок в РАЗМЕТКЕ остаётся знак → меню → кнопки → бургер: порядок
   * фокуса и диктора разметочный. Визуальный порядок узкого вида - order. */
  .ls-burger { display: inline-flex; order: -2; }
  .ls-bar__div { order: -1; }
  .ls-menu { display: none; }
  .ls-barSoc { display: none; }        /* соцсети в полосе не остаются */
  .ls-bar__tel { display: none; }      /* телефон уходит в полку */
  /* ОТСТУПЛЕНИЕ: на узком кнопки в полосе нет - она в полке меню (`.ls-sheet__cta`). */
  .ls-bar__cta { display: none; }
  .ls-bar__top { display: none; }
  .ls-bar__nav { display: none; }
  .ls-bar__in { padding-inline: 0; }
  /* Безопасные зоны: у закреплённой шапки обязательно, иначе знак уедет
   * под вырез в ландшафте. */
  .ls-bar__row {
    padding-inline-start: max(var(--ls-page-gut, 24px), env(safe-area-inset-left, 0px));
    padding-inline-end: max(var(--ls-page-gut, 24px), env(safe-area-inset-right, 0px));
  }
  /* C3 на узком равен A1 ДО ПОДПИКСЕЛЯ: это одна вёрстка, а не похожая. */
  .ls-site--c3 { --ls-bar-name: 20px; }
  /* Кегль объявления и его поле: ряд многострочный, воздуха нужно больше. */
  .ls-bar__ann { padding-block: 8px; }
}

@container ls (width > 700px) {
  .ls-burger { display: none; }
  .ls-menu { display: block; }
  .ls-sheet, .ls-scrim { display: none; }
}

/* Порог 1040 НЕ наш: он уже стоит в теме, на нём снимается плавающий
 * сайдбар короткой колонки у показателей. Сдвинуть нельзя. */
@container ls (width >= 1040px) {
  .ls-site { --ls-bar-gap: clamp(16px, 1.67cqi, 24px); }
}

/* 1536 - МЕРА содержимого, а не порог: за ней полоса во всю бумагу
 * получает боковое поле, не равное --ls-page-gut. Правило проекта
 * "шапка равна содержимому равна подвалу" держится через max-inline-size
 * на .ls-bar__in, объявленный в базе. */