/* ============================================================
   A.L.E.X. — КАПСУЛЫ НАВИГАЦИИ И ТЁПЛЫЕ АКЦЕНТЫ (круг 1275,
   доработка Г1 от 29.08.2026, разделы 2, 3, 5, 6, 7).

   ЗАЧЕМ. Меню владелец назвал «набором ломаных букв»: пункты
   переносились на две строки, языки висели строкой «RU · EN · 中文»,
   иконки были разного скругления. Здесь ритм: одна высота, один
   радиус, равные отступы, ни одного переноса.

   ПРАВИЛО ФАЙЛА — как у style2.css: ЦВЕТА ТОЛЬКО ТОКЕНАМИ. Свои
   значения объявлены ровно в §1; ниже по файлу — только var().

   ПОЧЕМУ ОТДЕЛЬНЫЙ ФАЙЛ, А НЕ ПРАВКА style2.css. Витрина живёт
   двумя слоями: 56 страниц собирает генератор (style2.css) и 22
   страницы старого слоя (style.css) он не трогает вовсе. Правка
   в style2.css оставила бы старый слой со старой шапкой — ровно
   та слепая зона, на которой спотыкались подвал (#1171) и меню
   (#1174). Этот файл подключается ОБОИМ слоям одной строкой
   реестра слоёв (build.py, SLOI_TEGI), поэтому капсулы приходят
   на всю витрину разом.

   ПРЕДОХРАНИТЕЛЬ ПО КОЛИЧЕСТВУ ОГНЯ (Г1 §7.1) — §7 этого файла.
   ============================================================ */

/* ---------- 1. Токены ---------- */

:root {
  --kap-h: 34px;                              /* высота капсулы */
  --kap-h-sm: 32px;
  --kap-r: 999px;                             /* радиус: капсула, не карточка */
  /* 12px, а не 13: замер круга 1275 показал, что при 13 полный ряд из семи
     капсул требует 678px против 675 доступных на 1280 — и «Ещё ▾» съедало
     последний пункт из-за трёх пикселей. Пара пикселей на пункт возвращает
     ряд целиком, и ниже 1150 «Ещё» включается уже по делу. */
  --kap-pad: 12px;
  --kap-line: rgba(92, 100, 112, .34);        /* спокойный кант */
  --kap-line-teplo: rgba(184, 134, 11, .62);  /* кант, который теплеет */
  --kap-zaliv: rgba(184, 134, 11, .10);       /* заливка активного пункта */
  --kap-ugol: #C25A16;                        /* тлеющий уголёк */
  --kap-ugol-yadro: #FFD08A;
}

[data-theme="dark"] {
  --kap-line: rgba(154, 165, 177, .30);
  --kap-line-teplo: rgba(212, 175, 55, .70);
  --kap-zaliv: rgba(212, 175, 55, .12);
  --kap-ugol: #E2701B;
  --kap-ugol-yadro: #FFE0A8;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --kap-line: rgba(154, 165, 177, .30);
    --kap-line-teplo: rgba(212, 175, 55, .70);
    --kap-zaliv: rgba(212, 175, 55, .12);
    --kap-ugol: #E2701B;
    --kap-ugol-yadro: #FFE0A8;
  }
}

/* ---------- 2. Шапка: пункты меню капсулами (Г1 §2.1–2.2) ----------

   ОДНА ВЫСОТА У ВСЕГО РЯДА. Пункт, иконка темы, кнопка пульта, капсула
   языка и залитая кнопка диагностики берут высоту из одной переменной —
   иначе «разнобой скруглений», который владелец и увидел.

   `white-space: nowrap` здесь — не косметика, а прямое требование 2.1:
   ни один пункт не переносится на две строки. Что не влезло в строку,
   уводит под капсулу «Ещё ▾» скрипт kapsuly.js, а не перенос. */

/* Ряд обязан УМЕТЬ СЖИМАТЬСЯ уже своей ширины — иначе шапка вылезет за
   контейнер вместо того, чтобы отдать лишний пункт под «Ещё ▾». По
   умолчанию флекс-элемент не сжимается ниже min-content (min-width:auto),
   и признак «не влезло» (scrollWidth > clientWidth) не наступал бы никогда:
   переполнялась бы шапка целиком, а ряд считал бы, что всё в порядке. */
.hdr-nav {
  gap: 6px;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
}

.hdr-nav a,
.hdr-eshe-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--kap-h);
  padding: 0 var(--kap-pad);
  border: 1px solid var(--kap-line);
  border-radius: var(--kap-r);
  background: transparent;
  color: var(--text-2, currentColor);
  font: inherit;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--t, 200ms), color var(--t, 200ms),
              background-color var(--t, 200ms), transform var(--t, 200ms);
}

.hdr-nav a:hover,
.hdr-nav a:focus-visible,
.hdr-eshe-btn:hover,
.hdr-eshe-btn:focus-visible {
  border-color: var(--kap-line-teplo);
  color: var(--text, currentColor);
  /* «Рамка мягко теплеет, лёгкое движение» (Г1 §2.2) — движение ровно на
     один пиксель: капсула приподнимается, а не прыгает. */
  transform: translateY(-1px);
}

/* Активный раздел — золото: заливка слабая, кант яркий (Г1 §2.2). */
.hdr-nav a[aria-current="page"] {
  border-color: var(--kap-line-teplo);
  background: var(--kap-zaliv);
  color: var(--text, currentColor);
}

/* ---------- 3. Иконки шапки в том же ритме (Г1 §2.4) ----------
   До круга «Aa» имела радиус карточки, а соседняя кнопка — свой:
   разнобой был виден именно рядом. Теперь один радиус и одна высота. */

.hdr-tools { gap: 6px; }

.hdr-tools .icon-btn {
  width: var(--kap-h);
  height: var(--kap-h);
  min-height: var(--kap-h);
  border-radius: var(--kap-r);
  border-color: var(--kap-line);
}
.hdr-tools .icon-btn:hover,
.hdr-tools .icon-btn:focus-visible { border-color: var(--kap-line-teplo); }

/* Единственная ЗАЛИТАЯ кнопка шапки — «Пройти диагностику» (Г1 §2.5).
   Остальное — рамки, чтобы глаз цеплялся ровно за одно действие. */
.hdr .btn--primary.btn--sm {
  min-height: var(--kap-h);
  padding: 0 18px;
  border-radius: var(--kap-r);
  font-size: 14px;
}

/* ---------- 4. Язык одной капсулой (Г1 §2.3) ----------
   Было: строка «RU · EN · 中文» — три ссылки, съедающие ширину на каждой
   странице. Стало: капсула текущего языка, остальные раскрываются кликом.
   Разметку строит kapsuly.js из той же исходной строки, поэтому старые
   ссылки остаются в HTML и работают без скрипта. */

.hdr-lang.kap-lang {
  position: relative;
  display: inline-flex;
  font-size: 14px;
  color: var(--text-2, currentColor);
}

.kap-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: var(--kap-h);
  padding: 0 12px;
  border: 1px solid var(--kap-line);
  border-radius: var(--kap-r);
  background: transparent;
  color: var(--text-2, currentColor);
  font: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--t, 200ms), color var(--t, 200ms);
}
.kap-lang-btn:hover,
.kap-lang-btn:focus-visible,
.kap-lang-btn[aria-expanded="true"] {
  border-color: var(--kap-line-teplo);
  color: var(--text, currentColor);
}
.kap-lang-btn .kap-ch { font-size: 10px; opacity: .8; }

/* Раскрытие языка и «Ещё» — один вид на двоих: это одна идиома. */
.kap-vypad {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 96;
  display: grid;
  gap: 2px;
  min-width: 132px;
  padding: 6px;
  border: 1px solid var(--kap-line);
  border-radius: var(--r-card, 16px);
  background: var(--surface, #12161B);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .30);
}
.kap-vypad[hidden] { display: none; }
.kap-vypad a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--r-ctl, 12px);
  color: var(--text-2, currentColor);
  font-size: 14px;
  white-space: nowrap;
  text-decoration: none;
}
.kap-vypad a:hover,
.kap-vypad a:focus-visible {
  background: var(--kap-zaliv);
  color: var(--text, currentColor);
}

.hdr-eshe { position: relative; display: inline-flex; }
.hdr-eshe[hidden] { display: none; }

/* ---------- 5. Кнопка пульта — она должна звать (Г1 §3.1) ----------

   Кнопка настроек чтения превращается в кнопку пульта: внутри неё живёт
   крошечный тлеющий уголёк и медленное дыхание свечения. Это ЕДИНСТВЕННОЕ
   место шапки, где что-то шевелится, — намёк, что там живое.

   Уголёк рисуется псевдоэлементом, а не картинкой и не канвасом: он должен
   стоить ноль запросов и ноль кадров, пока на него не смотрят. */

.hdr-tools .kmf-btn {
  position: relative;
  width: auto;
  min-width: var(--kap-h);
  padding: 0 12px 0 26px;
  font-size: 14px;
  letter-spacing: .02em;
  border-color: var(--kap-line-teplo);
}

.hdr-tools .kmf-btn::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%,
    var(--kap-ugol-yadro) 0%, var(--kap-ugol) 58%, transparent 100%);
  box-shadow: 0 0 6px 1px var(--kap-ugol);
  animation: kap-tlenie 3.4s ease-in-out infinite;
}

@keyframes kap-tlenie {
  0%, 100% { opacity: .55; transform: scale(.86); }
  46%      { opacity: 1;   transform: scale(1.12); }
}

/* Подсказка первого захода (Г1 §3.2): один раз, закрывается крестиком.
   Стоит рядом с числом, а не поверх него — цифра остаётся главной. */
.kap-podskazka {
  position: absolute;
  z-index: 40;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 260px;
  padding: 11px 12px 11px 14px;
  border: 1px solid var(--kap-line-teplo);
  border-radius: var(--r-card, 16px);
  background: var(--surface, #12161B);
  color: var(--text, currentColor);
  font-size: 14px;
  line-height: 1.4;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .34);
}
.kap-podskazka[hidden] { display: none; }
.kap-podskazka-x {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-2, currentColor);
  font: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.kap-podskazka-x:hover { color: var(--text, currentColor); }

/* ---------- 6. Подвал кнопками (Г1 §5) ----------

   Колонки Услуги · Инструменты · Компания · Документы сохранены — меняется
   только подача: строки-ссылки становятся капсулами того же семейства, что
   и меню. Кегль на пункт меньше, чем в шапке: подвал остаётся рабочим
   блоком, а не второй навигацией. */

.pdv-col li { margin: 0 0 6px; }

.pdv-col li > a,
.pdv-col li > span[aria-current] {
  display: inline-flex;
  align-items: center;
  min-height: var(--kap-h-sm);
  padding: 0 12px;
  border: 1px solid var(--kap-line);
  border-radius: var(--kap-r);
  font-size: 14px;
  line-height: 1.2;
  text-decoration: none;
  transition: border-color var(--t, 200ms), color var(--t, 200ms),
              background-color var(--t, 200ms);
}
.pdv-col li > a:hover,
.pdv-col li > a:focus-visible {
  border-color: var(--kap-line-teplo);
  background: var(--kap-zaliv);
  text-decoration: none;
}
.pdv-col li > span[aria-current] {
  border-color: var(--kap-line-teplo);
  background: var(--kap-zaliv);
}

/* Колонка в две подколонки: капсула не должна рваться между ними — и не
   должна рваться ВНУТРИ СЕБЯ.

   `podval.css` делит любую колонку от восьми строк на две подколонки жёстким
   `columns: 2`. У широкой колонки «Услуги» (536px) подколонка выходит 256px и
   всё влезает, а у «Компании» (268px) — 122px, и капсула «Как мы работаем»
   (нужно 130px) вставала в две строки: одна кнопка из 47 выбивалась из ритма
   (замер круга 1275). Меняем счёт на МИНИМАЛЬНУЮ ШИРИНУ: браузер сам берёт
   две подколонки там, где они помещаются, и одну там, где нет. */
@media (min-width: 900px) {
  .pdv-col--wide li { break-inside: avoid; }
  .pdv-col--wide ul { columns: 200px 2; column-gap: 24px; }
}

/* «Горящие» блоки подвала — ВЫБОРОЧНО (Г1 §5.2): только «Пакеты» и
   «О A.L.E.X.». Огонь здесь тлеющий контур, а не пламя: читаемость
   подвала важнее вау. Метку `data-ogon` ставит генератор подвала. */

.pdv-col li > a[data-ogon] {
  position: relative;
  border-color: var(--kap-line-teplo);
  color: var(--text, currentColor);
}
.pdv-col li > a[data-ogon]::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  border: 1px solid transparent;
  box-shadow: 0 0 0 0 var(--kap-ugol);
  animation: kap-tlenie-kant 4.2s ease-in-out infinite;
}
@keyframes kap-tlenie-kant {
  0%, 100% { box-shadow: 0 0 5px 0 rgba(226, 112, 27, .18); }
  50%      { box-shadow: 0 0 12px 1px rgba(226, 112, 27, .42); }
}

/* ---------- 6б. ПОДВАЛ НА ТЕЛЕФОНЕ (круг 1282, Г1 §5А.1)

   Владелец по скринам 29.08: «подвал на мобиле — каша, вёрстка поехала».
   Разбор по строкам того же пункта:

   в) строка про безналичный расчёт заменена в генераторе на «работаем по
      всему миру» плюс строку тепла — здесь только их вид;
   г) реквизиты (юрлицо, ИНН, ОГРН, ссылка, Telegram, почта) шли сплошным
      полотном с подчёркнутыми кусками. Теперь это СПИСКИ: на телефоне по
      строке на величину с воздухом, на десктопе — снова одна строка через
      разделитель. Разметка одна, различается только раскладка;
   д) языки — одной капсулой с раскрытием (см. ниже).

   Правило файла (урок #894): модуль самостоятельный и работает на ОБОИХ
   слоях витрины — и на style2.css, и на старом style.css. Поэтому вид
   подвала живёт здесь, а не в двух таблицах слоёв по копии в каждой. */

.pdv-trust,
.pdv-cont {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: grid;
  gap: 6px;
}
.pdv-trust li,
.pdv-cont li { margin: 0; line-height: 1.5; }
.pdv-trust li[hidden],
.pdv-cont li[hidden] { display: none; }

/* Строка открытой двери — та же величина, что строка про оплату, но тоном
   ниже: это приглашение, а не условие. */
.pdv-dver { margin: 0 0 6px; }

@media (min-width: 760px) {
  /* На десктопе полотно читалось нормально — возвращаем строку с точками
     между величинами. `::before` вместо разделителя в разметке: тогда на
     телефоне точку не приходится прятать отдельным правилом. */
  .pdv-trust,
  .pdv-cont { display: flex; flex-wrap: wrap; gap: 0 6px; }
  .pdv-trust li + li::before,
  .pdv-cont li + li::before { content: "· "; color: var(--text-2, currentColor); }
}

/* ---------- 6в. РЕЗЕРВ ПОД ДВЕ ЛИПКИЕ ПОЛОСЫ (круг 1282, Г1 §5А.3)

   Владелец: «нижняя закреплённая панель перекрывает контент: заголовки на
   „О A.L.E.X.“ и подвал подрезаются».

   Резерв под липкую полосу действия был и раньше — `.mcta` держит распорку
   высотой `--mcta-h`, а `.pdv-bottom` добавляет её же отступом. Но полос
   внизу ДВЕ, а не одна: поверх стоит уведомление о cookie, и оно ПОДНИМАЕТ
   полосу действия на свою высоту (`html.cknote-on .mcta-bar`). То есть
   реально занято `--mcta-h + --cknote-h`, а зарезервировано только первое —
   ровно на высоту баннера контент и подрезался.

   Высоту баннера меряет сам модуль (`cookie-notice.js` кладёт `--cknote-h` на
   <html> по факту отрисовки), поэтому резерв верен и для двух строк текста,
   и для трёх. Правило живёт здесь, а не в двух таблицах слоёв: баннер стоит
   на ОБОИХ слоях витрины, а `--mcta-h` на старом слое просто не объявлена и
   честно берётся нулём. */
html.cknote-on .pdv-bottom {
  padding-bottom: calc(var(--cknote-h, 0px) + var(--mcta-h, 0px) + 20px
                       + env(safe-area-inset-bottom, 0px));
}

/* Языки подвала — ОДНОЙ капсулой с раскрытием, как в шапке (Г1 §5.4 и
   §5А.1д). Капсулу строит kapsuly.js из той же разметки; без скрипта
   читатель видит три ссылки подряд и все они работают. */
.pdv-lang { position: relative; display: inline-flex; }
.pdv-lang a,
.pdv-lang > span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  margin-right: 2px;
  border: 1px solid var(--kap-line);
  border-radius: var(--kap-r);
  font-size: 13px;
  text-decoration: none;
}
.pdv-lang a:hover { border-color: var(--kap-line-teplo); }

/* Собранная капсула: сам список раскрывается ВВЕРХ — он стоит в самом низу
   страницы, и выпадение вниз ушло бы за край экрана (в шапке правило
   обратное, поэтому здесь оно и переопределяется). */
.pdv-lang.kap-lang .kap-vypad {
  top: auto;
  bottom: calc(100% + 8px);
  right: 0;
}
/* Внутри собранной капсулы ссылки перестают быть отдельными капсулами:
   они уже строки выпадающего списка. */
.pdv-lang.kap-lang .kap-vypad a {
  min-height: 0;
  margin-right: 0;
  border: 0;
  border-radius: var(--r-ctl, 12px);
}

/* ---------- 7. ПРЕДОХРАНИТЕЛЬ ПО КОЛИЧЕСТВУ ОГНЯ (Г1 §7.1) ----------

   На одном экране одновременно не больше ДВУХ живых огненных элементов, и
   приоритет всегда у главного — пламени «300+» в хиро. Пока главный огонь
   в поле зрения, подвальные угольки и линия манифеста ПРИГЛУШАЮТСЯ, а не
   гаснут: сайт остаётся премиум-техно, а не ёлкой.

   Класс `ogon-glavnyy-viden` ставит на <html> наблюдатель в kapsuly.js —
   ровно тогда, когда хиро действительно в кадре. Если скрипт не отработал,
   правило не применится, и мы получим спокойный вариант по умолчанию —
   деградация в сторону тишины, а не в сторону ёлки. */

html.ogon-glavnyy-viden .pdv-col li > a[data-ogon]::after,
html.ogon-glavnyy-viden .mnf-ramka::after { opacity: .34; }

/* ---------- 8. Огненная линия по контуру рамки-манифеста (Г1 §6) ----------

   ТОНКО И ДОРОГО: по золотой рамке бежит живой огонёк, как тлеющий фитиль.
   Не пламя, не факел — светящийся отрезок, идущий по периметру.

   Техника — конический градиент в маске рамки. Почему не border-image и не
   канвас: border-image не умеет анимировать положение, а канвас ради одной
   линии тянул бы за собой цикл кадров на странице, где больше ничего не
   движется. Здесь движение отдано композитору (`@property` + один угол),
   и оно не трогает ни макет, ни отрисовку текста. */

@property --mnf-ugol {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.mnf-ramka { position: relative; }

.mnf-ramka::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--mnf-ugol),
    transparent 0deg,
    transparent 300deg,
    rgba(226, 112, 27, .35) 328deg,
    var(--kap-ugol-yadro) 348deg,
    rgba(226, 112, 27, .35) 356deg,
    transparent 360deg);
  /* Маска «только кант»: заливка вычитается, остаётся линия в 1px. */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box exclude,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box exclude,
    linear-gradient(#000 0 0);
  animation: mnf-fitil 9s linear infinite;
  transition: opacity var(--t, 200ms);
}

/* Текст рамки лежит ВЫШЕ линии: читаемость не страдает ни на кадре.

   КРУГ 1282, ПОЧИНКА (Г1 §5А.2). Первая редакция правила была
   `.mnf-ramka > * { position: relative; z-index: 1 }` — и она молча сломала
   вёрстку манифеста на телефоне, ровно то, на что владелец прислал скрин.

   Механика поломки. Локап «A.L.E.X.» и позывной «Ask. Listen. Evolve. X.»
   сидят НА КАНТЕ рамки и держатся `position: absolute; left: 50%`. Правило
   выше весит 0-1-1 (класс + комбинатор) и перебивает их собственное 0-1-0 —
   абсолютные подписи стали относительными, а `left: 50%` из средства
   центровки превратилось в СДВИГ ВПРАВО на половину ширины рамки. Отсюда и
   съехавшая плашка, и позывной, уехавший за правый край.

   Тем же весом пришибло и мобильное правило `@media (max-width: 460px)
   { .mnf-pozyvnoy { position: static } }`, которым позывной уводился внутрь
   рамки отдельной строкой: оно тоже 0-1-0 и тоже проиграло.

   ПОЧИНКА. Позиция навязывается только тем детям, у которых её нет, —
   тексту. Подписи на канте позиционированы сами и в навязывании не
   нуждаются: `z-index` на абсолютном элементе работает и без него. */
.mnf-ramka > *:not(.mnf-lokap):not(.mnf-pozyvnoy) { position: relative; }
.mnf-ramka > * { z-index: 1; }

@keyframes mnf-fitil {
  to { --mnf-ugol: 360deg; }
}

/* Браузер без @property (старый Safari) конический градиент не анимирует —
   и остаётся статичная золотая искра на канте. Это ровно тот же кадр, что
   и в reduce-motion: деградация в премиальную статику, а не в пустоту. */

/* ---------- 9. Просьба о покое (Г1 §7.3) ----------
   Везде статичные премиальные кадры вместо анимаций: уголёк кнопки, кант
   подвала и фитиль рамки замирают в своей красивой фазе. */

@media (prefers-reduced-motion: reduce) {
  .hdr-tools .kmf-btn::before,
  .pdv-col li > a[data-ogon]::after,
  .mnf-ramka::after { animation: none; }
  .hdr-tools .kmf-btn::before { opacity: .9; transform: scale(1); }
  .pdv-col li > a[data-ogon]::after { box-shadow: 0 0 8px 0 rgba(226, 112, 27, .30); }
  .hdr-nav a, .hdr-eshe-btn { transition: none; }
  .hdr-nav a:hover, .hdr-eshe-btn:hover { transform: none; }
}

html[data-kmf-motion="less"] .hdr-tools .kmf-btn::before,
html[data-kmf-motion="less"] .pdv-col li > a[data-ogon]::after,
html[data-kmf-motion="less"] .mnf-ramka::after { animation: none; }
html[data-kmf-motion="less"] .hdr-tools .kmf-btn::before { opacity: .9; transform: scale(1); }
html[data-kmf-motion="less"] .pdv-col li > a[data-ogon]::after {
  box-shadow: 0 0 8px 0 rgba(226, 112, 27, .30);
}

/* ---------- 10. Мобиль (Г1 §2.7 и §14) ----------
   На узком экране меню живёт гамбургером, и внутри шторки те же капсулы —
   идиома одна на оба размера. Пункты шторки становятся в ряд с переносом
   ряда (не текста), поэтому «ломаных букв» не бывает и здесь. */

@media (max-width: 899px) {
  .drawer nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }
  .drawer nav a {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid var(--kap-line);
    border-bottom: 1px solid var(--kap-line);
    border-radius: var(--kap-r);
    font-size: 15px;
    white-space: nowrap;
  }
  .drawer nav a[aria-current="page"] {
    border-color: var(--kap-line-teplo);
    background: var(--kap-zaliv);
  }
  /* Выбор языка в шторке — той же капсулой (сводный фикс витрины его тоже
     просит; строится kapsuly.js, здесь только вид). */
  .drawer .kap-lang-drawer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
  }
  /* ТОЛЬКО ПРЯМЫЕ ДЕТИ (круг 1282). Без `>` правило ловило и вложенные
     `span` — значок «☀» внутри кнопки темы и её подпись получали каждый свою
     капсулу, и кнопка выходила капсулой в капсуле (видно на кадре меню). */
  .drawer .kap-lang-drawer > a,
  .drawer .kap-lang-drawer > span {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--kap-line);
    border-radius: var(--kap-r);
    font-size: 14px;
    text-decoration: none;
  }
  .drawer .kap-lang-drawer > span {
    border-color: var(--kap-line-teplo);
    background: var(--kap-zaliv);
  }
  /* Кнопка темы в шторке (круг 1282, §2А.4) — того же роста, что капсулы
     языка, но с подписью: значок «☀» без слова на телефоне читается как
     украшение, а не как переключатель. */
  .drawer .kap-tema-drawer {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--kap-line);
    border-radius: var(--kap-r);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
  }
  .drawer .kap-tema-drawer:hover { border-color: var(--kap-line-teplo); }
  .kap-tema-podpis { white-space: nowrap; }
  /* Подвал на телефоне: капсулы в ряд, а не столбиком в 40 строк. */
  .pdv-col details ul { display: flex; flex-wrap: wrap; gap: 6px; }
  .pdv-col li { margin: 0; }

  /* ---------- 10а. МЕНЮ В ЗОНЕ БОЛЬШОГО ПАЛЬЦА (круг 1282, Г1 §2А)

     Владелец: «нижние две трети экрана пустые, а это самая удобная зона для
     большого пальца». Правило простое и целиком держится одной строкой —
     `margin-top: auto` у нижнего блока: шторка это флекс-колонка во весь
     экран, и авто-отступ сверху прижимает всё содержимое к низу, оставляя
     наверху только знак и крестик (§2А.2).

     Порядок снизу вверх — обратный важности жеста: под самым пальцем кнопка
     действия и пункты, выше контакты, ещё выше живая строка и тепло. */

  .drw-niz {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 8px;
  }
  /* Группы пунктов с мелкими подписями (§2А.3): воздух между группами делает
     из списка карту разделов, а не перечень. */
  .drw-gruppa { display: flex; flex-wrap: wrap; gap: 8px; }
  .drw-zag {
    flex: 0 0 100%;
    margin: 6px 0 2px;
    font-size: 12px;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--text-2, currentColor);
  }
  .drw-nav { display: flex; flex-direction: column; gap: 2px; }
  .drw-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid var(--kap-line);
    border-radius: var(--kap-r);
    font-size: 15px;
    white-space: nowrap;
    text-decoration: none;
  }
  .drw-nav a[aria-current="page"] {
    border-color: var(--kap-line-teplo);
    background: var(--kap-zaliv);
  }

  /* Быстрые контакты плашками (§2А.5а) — самый частый жест на телефоне. */
  .drw-plashki { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .drw-plashka {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-height: 56px;
    padding: 8px 14px;
    border: 1px solid var(--kap-line);
    border-radius: var(--r-card, 16px);
    text-decoration: none;
  }
  .drw-plashka-imya { font-size: 12px; color: var(--text-2, currentColor);
    letter-spacing: .06em; text-transform: uppercase; }
  .drw-plashka-znach { font-size: 14px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }

  /* Живая строка цеха (§2А.5б). Точка перед ней — тот же «живой» знак, что
     в блоке L; дышит медленно, чтобы не спорить с огнём на главной. */
  .drw-zhivo {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-2, currentColor);
  }
  .drw-zhivo[hidden] { display: none; }
  .drw-zhivo::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--kap-ugol, #E2701B);
    animation: drw-pulc 3.4s ease-in-out infinite;
  }
  @keyframes drw-pulc { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

  .drw-ideya {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 16px;
    border: 1px dashed var(--kap-line-teplo);
    border-radius: var(--r-ctl, 12px);
    font-size: 15px;
    text-decoration: none;
  }
  .drw-teplo {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text-2, currentColor);
  }

  /* Тлеющий знак «A» (§2А.5д): тихий огонёк, не пламя. Предохранитель огня
     (§7.1) его не касается — на экране шторки главного огня нет вовсе. */
  .drw-znak {
    align-self: center;
    margin-top: 2px;
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    color: var(--kap-ugol, #E2701B);
    opacity: .5;
    animation: drw-tlenie 5.2s ease-in-out infinite;
  }
  @keyframes drw-tlenie {
    0%, 100% { opacity: .34; text-shadow: 0 0 6px rgba(226, 112, 27, .20); }
    50%      { opacity: .62; text-shadow: 0 0 16px rgba(226, 112, 27, .45); }
  }

  /* Фон меню — приглушённая атмосфера (§2А.6), а не чёрная дыра. Звёздная
     пыль рисуется двумя радиальными градиентами по углам: ни картинки, ни
     канваса — меню не должно стоить ни одного запроса. Контраст текста
     замеряется, поэтому пятна слабые и уведены к краям, а не под текст. */
  .drawer {
    background-image:
      radial-gradient(120% 70% at 12% 4%, var(--drw-pyl-1) 0%, transparent 62%),
      radial-gradient(100% 60% at 92% 96%, var(--drw-pyl-2) 0%, transparent 66%);
  }
}

:root {
  --drw-pyl-1: rgba(212, 175, 55, .10);
  --drw-pyl-2: rgba(226, 112, 27, .09);
}
[data-theme="light"] {
  --drw-pyl-1: rgba(184, 134, 11, .10);
  --drw-pyl-2: rgba(198, 96, 18, .08);
}

/* Покой читателя сильнее украшений: тлеющий знак и живая точка замирают. */
@media (prefers-reduced-motion: reduce) {
  .drw-znak, .drw-zhivo::before { animation: none; }
}
html[data-kmf-motion="less"] .drw-znak,
html[data-kmf-motion="less"] .drw-zhivo::before { animation: none; }

/* ---------- 11. Старый слой (22 страницы на style.css) ----------
   У них своя шапка `nav.nav`, и токенов style2 у них нет. Капсулу даём
   тем же кантом, но на своих значениях: старый слой всегда тёмный. */

header .nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--kap-h-sm);
  padding: 0 12px;
  border: 1px solid rgba(154, 165, 177, .30);
  border-radius: var(--kap-r);
  font-size: 14px;
  white-space: nowrap;
  text-decoration: none;
}
header .nav a:hover { border-color: rgba(212, 175, 55, .70); }