/* none v2 — публичный слой: лендинг, правовые, биржа и магазин, вики, вход,
   регистрация, jobs.none.kz, страницы ошибок.
   Подключается ПОСЛЕДНИМ, после app.css, public.css, site.css и накладок темы,
   вместе с v2/tokens.css. Источник — BRIEF.md §35–46 (Claude Design, 25.09.2026).

   ═══ ЧЕМ ЭТОТ МОСТ ОТЛИЧАЕТСЯ ОТ МОСТА КАБИНЕТА, И ЭТО ЗАМЕРЕНО ═══

   В кабинете цвет живёт в переменных: мост переписывает `--primary` на токен,
   и новый язык доходит до всех 988 кнопок разом.

   НА ВИТРИНЕ НЕ ТАК. Замер 25.09.2026:

     site.css                 17 переменных цвета, 98 литералов
     public.css                0 переменных,       68 литералов
     errors.css                0 переменных,       42 литерала
     noneerp-theme-public.css  0 переменных,       11 литералов
     ─────────────────────────────────────────────────────────────
     итого                    17 переменных,      219 литералов

   Литерал в правиле переменной не подчиняется. Мост, переписывающий одни
   переменные, покрыл бы 17 мест из 236 — и витрина осталась бы прежней,
   фиолетовой, при зелёном прогоне. Поэтому здесь ДВЕ части:

     1) переменные витрины → токены (даёт новый цвет всему, что их зовёт);
     2) ПРАВИЛА для базовых классов витрины — они перебивают литералы
        старых файлов, потому что этот файл подключён последним.

   Часть 2 нарочно ограничена общим: оболочка, кнопки, поля, карточки,
   секции. Устройство отдельных страниц (лендинг, биржа, вики) приходит
   из своих макетов и вносится по страницам, а не здесь.

   ПРАВИЛО ФАЙЛА: ни одного литерала цвета — только токены (BRIEF §10.1).
   Стережёт V2PublichnyySloyTest. */

/* ═══ 1. Переменные витрины → токены ════════════════════════════════════ */

[data-layer="public"] {
  /* Фиолетовый (#7367F0) и navy сходятся в один акцент — он единственный
     (BRIEF §1). Прежний лендинг различал их как «яркий» и «строгий». */
  --primary: var(--color-accent);
  --primary-hover: var(--color-accent-hover);
  --navy: var(--color-accent);
  --navy-deep: var(--color-accent-press);

  --text: var(--color-text);
  --text-2: var(--color-text-2);
  --text-3: var(--color-text-3);
  --muted: var(--color-text-3);

  --border: var(--color-line-strong);
  --border-soft: var(--color-line);
  --bg-soft: var(--color-surface-2);

  --danger: var(--color-danger);
  --warning: var(--color-warning);
  --success: var(--color-success);
  --success-d: var(--color-success);

  /* Текст НА акценте. Прежде это были два оттенка сиреневого на тёмном
     фоне подвала; в новом языке на акценте лежит один цвет. */
  --on-navy: var(--color-on-accent);
  --on-navy-dim: var(--color-on-accent);
  --lilac: var(--color-on-accent);

  /* Радиус в новом языке один (BRIEF §1). Прежние три — 6/10/12 — сходятся
     в него: разные скругления на соседних карточках читались как разные
     сущности, хотя означали только разный возраст кода. */
  --r: var(--radius);
  --r-lg: var(--radius);
  --r-xl: var(--radius);

  /* ═══ ВТОРОЕ СЕМЕЙСТВО, И БЕЗ НЕГО МОСТ ПОКРЫВАЛ ПОЛОВИНУ ═══

     На витрине живут ДВА набора классов. Первый — из `site.css`
     (`.section`, `.card`, `.site-header`), на нём лендинг и правовые.
     Второй — `.pub-*` из `public.css`: на нём «Возможности», «Партнёрство»,
     биржа, магазин и лоты. Употреблений `.pub-*` в разметке 91 при девяти
     разных именах, и `.pub-card` — самый частый класс витрины вообще (38).

     Красятся они не своими переменными, а переменными КАБИНЕТА из
     `app.css`. Замер по `public.css` и накладке:

       --text-muted 56 · --primary 42 · --border 37 · --surface 33
       --line 14 · --white 13 · --text-disabled 12 · --text 10
       --navy 8 · --warning 7 · --bg 7 · --field 6 · --accent 6

     Мост кабинета их переводит, но только под `[data-layer="cabinet"]` —
     на витрину это не распространяется. Значит без строк ниже пять страниц,
     включая две, которые владелец велел перенести дословно, остались бы в
     прежнем цвете, а кнопки и ссылки на них стали бы новыми.

     ПОЛУПЕРЕНЕСЁННАЯ СТРАНИЦА ХУЖЕ НЕПЕРЕНЕСЁННОЙ: старое выглядит
     решением, а смесь — поломкой. */
  --white: var(--color-surface);
  --bg: var(--color-bg-page);
  --bg-page: var(--color-bg-page);
  --surface: var(--color-surface);
  --field: var(--color-surface);
  --line: var(--color-line);
  --tint: var(--color-row-hover);

  --text-primary: var(--color-text);
  --text-muted: var(--color-text-2);
  --text-secondary: var(--color-text-2);
  --text-tertiary: var(--color-text-3);
  --text-disabled: var(--color-text-disabled);

  --accent: var(--color-accent);
  --primary-dark: var(--color-accent-hover);
  --primary-light: var(--color-accent-soft);
  --primary-bg: var(--color-accent-soft);

  --accent-light: var(--color-accent-soft);
  --success-light: var(--color-success-soft);
  --tint-strong: var(--color-accent-soft);

  /* Тёмная колонка входа. По BRIEF §35 она УПРАЗДНЕНА — но упразднить её
     значит переделать вход, а это отдельная работа. До тех пор колонка
     красится акцентом, и это не вкус: на ней белый текст
     (`rgba(255,255,255,.82)`), и светлый токен сделал бы его невидимым.
     Проверено чтением правила, а не догадкой. */
  --sidebar-bg: var(--color-accent);

  --danger-bg: var(--color-danger-soft);
  --success-bg: var(--color-success-soft);
  --warning-bg: var(--color-warning-soft);
  --info: var(--color-info);
  --info-bg: var(--color-info-soft);
}

/* ═══ 2. Базовые классы витрины ═════════════════════════════════════════ */

[data-layer="public"] body {
  background: var(--color-bg-page);
  color: var(--color-text);
  font: var(--type-body);
}

[data-layer="public"] .section { padding: var(--section-pad) 0; }

/* Чередования фонов у блоков нет (BRIEF §39): блок не ссылается на соседа
   ни текстом, ни вёрсткой. Разделяет их линия, а не смена фона. */
[data-layer="public"] .section + .section { border-top: 1px solid var(--color-line); }

/* ЦВЕТ БАЗОВЫМ ЭЛЕМЕНТАМ ЗДЕСЬ НЕ ЗАДАЁТСЯ, И ЭТО ИСПРАВЛЕНИЕ АВАРИИ.

   Стояло `h1 { color: var(--color-text) }`, то же у `h2` и `.lead`. На
   светлых секциях верно, а на ТЁМНЫХ это перебило белый цвет из `site.css`
   — и текст стал тёмным по тёмному.

   Замер контраста на отрисованном боевом лендинге: 17 нечитаемых элементов
   из 410 при минимуме 4.5. Заголовок первого экрана — 1.05, кнопка «Что
   внутри» — ровно 1.00, то есть написана цветом фона; «потрогайте
   песочницу» — 1.00, два H2 — по 1.05, заголовки колонок подвала — 1.07.

   ПЕРВОЕ ЧИСЛО БЫЛО 52, И ОНО НЕВЕРНО: мерка считала полупрозрачный фон
   непрозрачным. Карточка потерь лежит полупрозрачным белым поверх тёмного
   первого экрана — мерка читала «белый фон» под белым текстом и давала 1.00
   там, где глазами всё читается. Складывать фоны надо по альфе, как это
   делает браузер.

   ПОЧЕМУ НЕ СПИСОК ТЁМНЫХ СЕМЕЙСТВ С БЕЛЫМ ТЕКСТОМ. Такой список — ровно та
   рукописная опора, что устаревает молча: добавят тёмный блок, забудут
   строку, и всё повторится. А цвета в `site.css` для этих блоков УЖЕ верные
   — их не надо чинить, их надо не трогать.

   ГРАНИЦА СЛОЯ ОТСЮДА: мост правит ТОКЕНЫ и типографику, а не цвет базовых
   элементов. Где цвет уже задан автором макета и верен — молчим.

   Размер и начертание остаются: они не зависят от фона. */
[data-layer="public"] h1 { font: var(--type-hero); letter-spacing: var(--tracking-hero); }
[data-layer="public"] h2 { font: var(--type-section); }
[data-layer="public"] .lead { font: var(--type-lead); }

/* Правовые страницы и вики читаются строкой до 72 знаков (BRIEF §41, §42).
   Классы наши: `.doc-text` у правовых, `.wiki-body` у статьи справки. В
   макете они зовутся иначе, и первая редакция этого файла взяла имена
   ОТТУДА — правила целились в классы, которых у нас нет, и молча не делали
   ничего. Проверено перебором разметки, стережёт V2PublichnyySloyTest. */
[data-layer="public"] .doc-text,
[data-layer="public"] .wiki-body { font: var(--type-read); }

[data-layer="public"] .card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}

[data-layer="public"] .btn {
  min-height: var(--control-md);
  border-radius: var(--radius);
  font: var(--type-nav);
  font-weight: 600;
}

[data-layer="public"] .btn-primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}

[data-layer="public"] .btn-primary:hover { background: var(--color-accent-hover); }
[data-layer="public"] .btn-primary:active { background: var(--color-accent-press); }

/* Крупной кнопки (48, BRIEF §40) здесь НЕТ, и это не пропуск.
   На витрине такого класса не существует вовсе: есть `.btn-primary` (16),
   `.btn-sm` (5), `.btn-outline` (5), `.btn-white`, `.btn-ghost`. Правило под
   `.btn-lg` или `.btn-hero` целилось бы в пустоту и выглядело бы сделанным.
   Крупная кнопка придёт вместе с тем экраном, который её требует. */

/* Цели нажатия 44 и поля 16 — правило телефона, а не украшение: поле
   меньше 16px заставляет iOS приближать страницу при фокусе. */
[data-layer="public"] .form-control {
  min-height: var(--control-md);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
}

@media (max-width: 719px) {
  [data-layer="public"] .btn,
  [data-layer="public"] .form-control { min-height: var(--control-lg); font-size: 16px; }
}

/* Отметка фокуса — обводкой из токена, а не тенью.
   `--focus-ring` (тень) в токенах НЕТ: она живёт в мосте кабинета под старое
   имя. Подставить её здесь значило бы позвать необъявленную переменную —
   браузер выбросил бы объявление целиком и молча, и обход формы клавиатурой
   снова пошёл бы вслепую. Ровно это уже случилось у флажков (v1.96.98). */
[data-layer="public"] .form-control:focus,
[data-layer="public"] .form-control:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
  border-color: var(--color-accent);
}

/* Шапка липкая, высота из токена слоя (BRIEF §40). */
[data-layer="public"] .site-header {
  min-height: var(--public-nav-h);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-line);
}

/* 68 — ВСЯ ШАПКА, ВМЕСТЕ С ЛИНИЕЙ (§S14 п. 1, макет: `height:68px` при
   `box-sizing:border-box`). В `site.css` 68 стояло у внутренней полосы, и
   линия снизу добавляла пиксель: снимок мерил 69 на широком окне. */
[data-layer="public"] .site-header .wrap {
  height: calc(var(--public-nav-h) - 1px);
}

/* Подвал на фоне страницы, а не на тёмном: тёмная подложка ушла вместе с
   двумя оттенками сиреневого на ней (BRIEF §40). */
/* ПОДВАЛ СОБРАН ПО «ЛЕНДИНГ V2» — ОТКАТ СНЯТ (26.09.2026).

   Здесь стояла одна строка и при ней объяснение: подвал временно остаётся
   тёмным, потому что мост поменял фон и не поменял цвет ДЕТЕЙ — заголовки
   колонок, ссылки и реквизиты остались светлыми из `site.css`, девять
   элементов светлым по светлому. Условие снятия было названо там же:
   «строка снимется, когда подвал соберут по „Лендинг v2"».

   Подвал собран, условие наступило. Красится пара «фон — текст» ЦЕЛИКОМ: в
   `site.css` у подвала четырнадцать правил с зашитыми цветами
   (`--navy-deep`, `--on-navy-dim`, `#fff`, `#5E62A0`, `rgba(255,255,255,.1)`),
   и здесь перекрыто каждое. Это перечень не «светлых мест страницы»,
   которого я дважды не сумела составить, а правил ОДНОГО блока — он
   конечный и виден целиком:
   `grep -n "site-footer\|\.fcol\|legal-strip\|patent-strip" public/css/site.css`.

   Своих цифр не пишем: токены слоя совпадают с макетом дословно. Слой
   подключается ПОСЛЕ `site.css` (`layouts/public.blade.php`:94 и 109),
   поэтому перекрытие работает порядком, а не `!important`. */
[data-layer="public"] .site-footer {
  background: var(--color-bg-page);
  color: var(--color-text-3);
  border-top: 1px solid var(--color-line);
}

[data-layer="public"] .site-footer .about p,
[data-layer="public"] .site-footer .footer-kontakty div {
  color: var(--color-text-3);
}

[data-layer="public"] .site-footer .footer-kontakty a {
  color: var(--color-text-2);
}

/* Заголовок колонки: макет даёт 600 14/20 — это ровно `--type-h3`.
   `letter-spacing` гасится явно: в `site.css` у него .5px под прежний
   мелкий прописной заголовок, и без сброса буквы разъедутся. */
[data-layer="public"] .site-footer .fcol .h {
  color: var(--color-text);
  font: var(--type-h3);
  letter-spacing: 0;
}

/* Макет даёт ссылке подвала 400 14/22, ближайший токен слоя —
   `--type-body` 400 14/20. Беру токен: заводить новый ради двух пикселей
   межстрочного значит разводить шкалу. Отступление названо в приёмке. */
[data-layer="public"] .site-footer .fcol a {
  color: var(--color-text-2);
  font: var(--type-body);
}

[data-layer="public"] .site-footer .fcol a:hover {
  color: var(--color-text);
  text-decoration: underline;
}

[data-layer="public"] .site-footer .fcol a.on,
[data-layer="public"] .site-footer .fcol .phone {
  color: var(--color-text);
}

[data-layer="public"] .site-footer .legal-strip,
[data-layer="public"] .site-footer .patent-strip {
  border-top: 1px solid var(--color-line);
}

[data-layer="public"] .site-footer .legal-strip .h,
[data-layer="public"] .site-footer .patent-strip {
  color: var(--color-text-3);
}

[data-layer="public"] .site-footer .legal-strip .v {
  color: var(--color-text-2);
}

/* ПЕРЕКЛЮЧАТЕЛЬ ЯЗЫКА (макет, строки 28 и 224).

   Идёт вместе с перекраской, а не следом: на прежней тёмной подложке
   невыбранный язык цветом `--color-text-2` слился бы с фоном — тот самый
   дефект между разметкой и стилями, которого прогон не видит по
   устройству. */
/* Витрина v3 (макет 31.10, Z-339): переключатель — рамкой, выбранный язык — тёмной клеткой. */
[data-layer="public"] .lang {
  display: flex;
  gap: 0;
  padding: 3px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}

[data-layer="public"] .lang-b {
  height: 22px;
  padding: 0 9px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-text-2);
  font: var(--type-label);
  cursor: pointer;
}

[data-layer="public"] .lang-b[aria-pressed="true"],
[data-layer="public"] .lang-b[aria-current="true"] {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

/* «Вход» в шапке — словом, без рамки (макет v3): рядом одна кнопка «Демо». */
[data-layer="public"] .header-cta .btn-tekst {
  border: 0;
  background: none;
  color: var(--color-accent);
  font-weight: 500;
  font-size: 14px;
  padding: 0 6px;
}

/* НЕАКТИВНЫЙ ЯЗЫК — ВТОРИЧНЫЙ ТЕКСТ, А НЕ ВЫКЛЮЧЕННЫЙ ЭЛЕМЕНТ.

   Стояло `--color-text-disabled`: по смыслу верно — кнопка недоступна, —
   но замер дал 2,51:1 при норме 4,5. Человек это слово ЧИТАЕТ: оно
   говорит ему, что казахский будет.

   Признак недоступности при этом не теряется, и это главное: его несут
   `aria-disabled` для читалки и пометка «скоро» для глаза. По BRIEF §1
   цвет и не должен быть единственным носителем смысла — здесь он
   третий, а не единственный. */
[data-layer="public"] .lang-b[aria-disabled="true"] {
  color: var(--color-text-3);
  cursor: default;
}

[data-layer="public"] .lang-b .soon {
  margin-left: 4px;
  font-size: 10px;
}

/* Правила `.pub-roli` и `.pub-card--svoy` убраны 26.09.2026: «Возможности»
   переехали на набор макета, и красить стало нечего. Их замена — в конце
   файла, там же и причина, по которой подсветка осталась рамкой. */

/* ССЫЛКИ МОСТ НЕ КРАСИТ — по тому же доводу, что и заголовки.

   Стояло `a { color: var(--color-accent) }` на весь слой. На тёмных блоках
   это давало контраст 1.00: «потрогайте песочницу», «Все возможности —
   списком», «Посчитать на своих числах» были написаны цветом фона.

   Первая починка сузила правило до ссылок без класса внутри `.section` —
   и не помогла: тёмные блоки тоже секции, ссылка в них тоже без класса.
   То есть я во второй раз попыталась перечислить светлые места вместо
   того, чтобы не трогать чужое.

   Цвет ссылок в `site.css` задан автором и верен на обоих фонах. Акцент
   придёт к ним, когда страницы соберут по макету, — вместе с разметкой, а
   не поверх неё. Слой остаётся тем, чем должен быть: токены и типографика. */
/* ═══ 3. Чат-пузырь витрины (BRIEF §44) ═════════════════════════════════ */

[data-layer="public"] .puzyr {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 70;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

[data-layer="public"] .puzyr__knopka {
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--radius);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font: var(--type-nav);
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-float);
}

[data-layer="public"] .puzyr__knopka:hover { background: var(--color-accent-hover); }

/* Маскот noneAI вместо «Спросить» (владелец 09.10.2026): подпись слева, голова
   справа; кнопка — светлая поверхность, чтобы каска и лицо читались. */
[data-layer="public"] .puzyr__knopka.puzyr__knopka--maskot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 6px 6px 16px;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-line-strong);
  text-align: left;
}
[data-layer="public"] .puzyr__knopka.puzyr__knopka--maskot:hover { background: var(--color-surface); border-color: var(--color-accent); }
[data-layer="public"] .puzyr__maskot-podpis { display: flex; flex-direction: column; gap: 2px; max-width: 230px; }
[data-layer="public"] .puzyr__maskot-imya { font-weight: 700; color: var(--color-accent); }
[data-layer="public"] .puzyr__maskot-tekst { font-weight: 500; font-size: 13px; line-height: 18px; color: var(--color-text-2); }
[data-layer="public"] .puzyr__maskot { border-radius: var(--radius); }

[data-layer="public"] .puzyr__panel {
  display: flex;
  flex-direction: column;
  width: 380px;
  max-width: calc(100vw - 32px);
  height: 560px;
  max-height: calc(100vh - 96px);
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-modal);
  overflow: hidden;
}

[data-layer="public"] .puzyr__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: 0 16px;
  border-bottom: 1px solid var(--color-line);
}

[data-layer="public"] .puzyr__zakryt {
  border: 0;
  background: transparent;
  color: var(--color-text-2);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

[data-layer="public"] .puzyr__lenta {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

[data-layer="public"] .puzyr__podskazki {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

[data-layer="public"] .puzyr__replika {
  max-width: 85%;
  padding: 8px 12px;
  border-radius: var(--radius);
  background: var(--color-surface-2);
  color: var(--color-text);
  font: var(--type-body);
  white-space: pre-wrap;
}

/* Своя реплика — акцентом и справа: человек различает их положением, а не
   только цветом. Цветом одним нельзя — на монохромном экране и при
   дальтонизме разница исчезает. */
[data-layer="public"] .puzyr__replika--moya {
  align-self: flex-end;
  background: var(--color-accent);
  color: var(--color-on-accent);
}

[data-layer="public"] .puzyr__pechataet {
  display: flex;
  gap: 4px;
  align-items: center;
  width: 48px;
}

[data-layer="public"] .puzyr__pechataet span {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-round);
  background: var(--color-text-3);
  animation: puzyr-tochka var(--dur-cikl) infinite ease-in-out;
}

[data-layer="public"] .puzyr__pechataet span:nth-child(2) { animation-delay: calc(var(--dur-cikl) / 8); }
[data-layer="public"] .puzyr__pechataet span:nth-child(3) { animation-delay: calc(var(--dur-cikl) / 4); }

@keyframes puzyr-tochka {
  0%, 60%, 100% { opacity: .35; }
  30% { opacity: 1; }
}

/* Кто просил меньше движения — тому точки не пляшут, а просто стоят.
   Три неподвижные точки всё равно означают «идёт ответ». */
@media (prefers-reduced-motion: reduce) {
  [data-layer="public"] .puzyr__pechataet span { animation: none; opacity: .6; }
}

[data-layer="public"] .puzyr__vhod,
[data-layer="public"] .puzyr__lid {
  padding: 16px;
  border-top: 1px solid var(--color-line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

[data-layer="public"] .puzyr__vvod {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 12px 16px;
  border-top: 1px solid var(--color-line);
}

[data-layer="public"] .puzyr__vvod textarea {
  resize: none;
  overflow-y: auto;
}

[data-layer="public"] .puzyr__oshibka { color: var(--color-danger); }

[data-layer="public"] .puzyr__soglasie {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

/* Ловушка для роботов: уводится за край, но НЕ скрывается display:none и не
   получает aria-hidden в стиле — робот читает CSS и обходит очевидное. */
[data-layer="public"] .puzyr__lovushka {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
}

/* На телефоне пузырь во весь экран: панель 380 в 360 не влезает, а
   уменьшать её значит делать разговор нечитаемым (BRIEF §44). */
@media (max-width: 719px) {
  [data-layer="public"] .puzyr {
    right: 12px;
    bottom: 12px;
  }

  [data-layer="public"] .puzyr__panel {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    border-radius: 0;
  }
}

/* «Возможности» (S15) живут на своём листе css/v2/vozmozhnosti-s15.css
   (К4, 26.09.2026): прежние `.roli-vybor` и `.tile--svoy` сняты вместе с
   разметкой, которая их звала. */

/* ==========================================================================
   БИРЖА S17 — СПИСКИ И КАРТОЧКИ ПО МАКЕТУ «Биржа и магазин» (27.09.2026)
   ==========================================================================

   Владелец 27.09: «доведи до макета», шапка сайта — общая, её не трогаем.
   Четыре страницы: `/tenders`, `/tenders/{slug}`, `/shop`, `/shop/{slug}`.
   Классы `mk-*` — свои, новые: старые `lot-card`, `lots-filter`, `pub-doc`
   несли правила двух прежних слоёв (моноширинная мета, карточки с тенью), и
   перебивать их по одному значило бы воевать с тем, что уже не нужно.

   Размеры шрифта — из макета (h1 40/48, заголовок карточки 30/38, строка лота
   17/26…): в шкале токенов таких ступеней нет, а макет обязателен со всеми
   размерами. Цвета, отступы, радиусы — только токенами. */

/* --- Голова: «Биржа» и вкладки ------------------------------------------ */

/* Белая подложка во всю ширину под контентом (макет); шапка и подвал — свои. */
[data-layer="public"] .mk-fon {
  background: var(--color-surface);
}

[data-layer="public"] .mk-stranica {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

[data-layer="public"] .mk-head {
  margin-bottom: var(--space-6);
}

[data-layer="public"] .mk-h1 {
  margin: 0 0 var(--space-6);
  color: var(--color-text);
  font: var(--type-section);
  letter-spacing: -0.01em;
}

[data-layer="public"] .mk-schyot {
  margin-left: auto;
  color: var(--color-text-3);
  font: var(--type-body);
  font-variant-numeric: tabular-nums;
}

/* --- Список лотов: строки с линией, две колонки -------------------------- */

/* Макет: `minmax(0,1fr) max-content`, зазор 8 × 32 — слева суть, справа срок.
   `minmax(0,1fr)`, а не `1fr`: длинное название кабельной линии (SPEC,
   приёмка п. 5) иначе распирает колонку и выталкивает срок за край. */
/* Вся строка — ссылка (макет): `::after` названия растянут на строку. */
[data-layer="public"] .mk-tochka {
  color: var(--color-text-3);
}

/* «осталось N дн.» — `--color-warning` (#935700, ≈5:1 на белом), а не
   `--warning` старого слоя (#ff9f43, ≈2:1): SPEC требует и цвета, и
   читаемости. */

/* --- Карточка лота и товара: две колонки, справа липкое --------------- */

[data-layer="public"] .mk-nazad {
  display: inline-block;
  margin-bottom: var(--space-6);
  color: var(--color-text-2);
  font: 500 14px/20px var(--font);
  text-decoration: none;
}

[data-layer="public"] .mk-nazad:hover {
  color: var(--color-text);
}

/* SPEC: `1.6fr minmax(300px,1fr)`, зазор 40; уже 1024 — одна колонка. */
[data-layer="public"] .mk-kartochka {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr);
  gap: 40px;
  align-items: start;
}

[data-layer="public"] .mk-kartochka__osnova {
  min-width: 0;
}

[data-layer="public"] .mk-kartochka__storona {
  position: sticky;
  top: 88px;
}

@media (max-width: 1023.98px) {
  [data-layer="public"] .mk-kartochka {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-layer="public"] .mk-kartochka__storona {
    position: static;
  }
}

[data-layer="public"] .mk-h2 {
  margin: 0 0 var(--space-6);
  color: var(--color-text);
  font: 600 30px/38px var(--font);
  overflow-wrap: anywhere;
}

[data-layer="public"] .mk-h3 {
  margin: var(--space-8) 0 var(--space-3);
  color: var(--color-text);
  font: 600 18px/26px var(--font);
}

[data-layer="public"] .mk-opisanie {
  margin: 0 0 var(--space-6);
  color: var(--color-text-2);
  font: 400 15px/24px var(--font);
}

/* Пары «подпись · значение» по две (телефон — по одной), линия сверху. */
[data-layer="public"] .mk-pary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-8);
  margin: 0;
}

[data-layer="public"] .mk-pary > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-line);
}

[data-layer="public"] .mk-pary dt {
  color: var(--color-text-3);
  font: 500 13px/20px var(--font);
}

[data-layer="public"] .mk-pary dd {
  margin: 0;
  color: var(--color-text);
  font: 500 15px/24px var(--font);
  font-variant-numeric: tabular-nums;
}

[data-layer="public"] .mk-sostav {
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  overflow: hidden;
}

[data-layer="public"] .mk-sostav__stroka {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-line);
  font: 400 15px/24px var(--font);
}

[data-layer="public"] .mk-sostav__stroka:last-child {
  border-bottom: 0;
}

[data-layer="public"] .mk-sostav__obyom {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

[data-layer="public"] .mk-trebovaniya {
  margin: 0;
  padding-left: 20px;
  font: 400 15px/26px var(--font);
}

/* Блок входа справа — на мягкой подложке. */
[data-layer="public"] .mk-vhod {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface-2);
}

[data-layer="public"] .mk-vhod__zagolovok {
  margin: 0;
  color: var(--color-text);
  font: 600 16px/24px var(--font);
}

[data-layer="public"] .mk-vhod__tekst {
  margin: 0;
  color: var(--color-text-2);
  font: 400 14px/22px var(--font);
}

[data-layer="public"] .mk-vhod__knopka {
  justify-content: center;
  width: 100%;
}

[data-layer="public"] .mk-vhod__ssylka {
  align-self: center;
  color: var(--color-text);
  font: 600 14px/20px var(--font);
}

@media (max-width: 759.98px) {
  [data-layer="public"] .mk-h2 {
    font: 600 24px/32px var(--font);
  }

  [data-layer="public"] .mk-pary {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* SPEC §2: 4 → 3 (< 1024) → 2 (< 760). `minmax(0, 1fr)`: длинное название
   двери иначе растягивает свою колонку. */
[data-layer="public"] .mk-goods {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

@media (max-width: 1023.98px) {
  [data-layer="public"] .mk-goods {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 759.98px) {
  [data-layer="public"] .mk-goods {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }
}

/* Карточка товара — рамкой, вся карточка ссылка (растянутый `::after`). */
[data-layer="public"] .mk-tovar {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
}

[data-layer="public"] .mk-tovar:hover {
  border-color: var(--color-line-strong);
}

[data-layer="public"] .mk-tovar__foto,
[data-layer="public"] .mk-foto {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-surface-2);
}

[data-layer="public"] .mk-foto {
  margin-bottom: var(--space-6);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}

[data-layer="public"] .mk-tovar__foto img,
[data-layer="public"] .mk-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

[data-layer="public"] .mk-tovar__zaglushka {
  width: 100%;
  height: 100%;
}

[data-layer="public"] .mk-tovar__telo {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
}

[data-layer="public"] .mk-tovar__kategoriya {
  color: var(--color-text-3);
  font: 500 12px/16px var(--font);
}

[data-layer="public"] .mk-tovar__nazvanie {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font: 600 15px/22px var(--font);
  overflow-wrap: anywhere;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

[data-layer="public"] .mk-tovar__nazvanie a {
  color: var(--color-text);
  text-decoration: none;
}

[data-layer="public"] .mk-tovar__nazvanie a::after {
  content: "";
  position: absolute;
  inset: 0;
}

[data-layer="public"] .mk-tovar__cena {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin: auto 0 0;
}

[data-layer="public"] .mk-tovar__ot {
  color: var(--color-text-2);
  font: 500 13px/20px var(--font);
}

[data-layer="public"] .mk-tovar__summa {
  color: var(--color-text);
  font: 600 17px/24px var(--font);
  font-variant-numeric: tabular-nums;
}

[data-layer="public"] .mk-tovar__po-zaprosu {
  color: var(--color-text-3);
  font: 500 14px/20px var(--font);
}

[data-layer="public"] .mk-tovar__meta {
  margin: 0;
  color: var(--color-text-2);
  font: 400 13px/20px var(--font);
}

/* --- Карточка товара: предложения продавцов ------------------------------ */

[data-layer="public"] .mk-edinica {
  margin: 0 0 var(--space-4);
  color: var(--color-text-3);
  font: 400 13px/20px var(--font);
}

[data-layer="public"] .mk-predlozheniya__golova {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

[data-layer="public"] .mk-predlozheniya__golova .mk-h3 {
  margin: 0;
}

/* Сортировка — сегментом: две половины одной кнопки. */
[data-layer="public"] .mk-segment {
  display: inline-flex;
  margin-bottom: var(--space-3);
  border: var(--border-control);
  border-radius: var(--radius);
  overflow: hidden;
}

[data-layer="public"] .mk-segment__knopka {
  padding: 6px var(--space-3);
  color: var(--color-text);
  font: 600 13px/20px var(--font);
  text-decoration: none;
}

[data-layer="public"] .mk-segment__knopka[aria-current="true"] {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

[data-layer="public"] .mk-predlozheniya__spisok {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: var(--space-3);
}

/* Строка предложения — карточкой: цена и единица сверху, под ними
   «Продавец · вид · город · наличие», внизу кнопка во всю ширину. Перенос с
   переносом строки: без раскладки кнопка «Войти и заказать» наезжала на
   текст (95f5c1f), и это нашлось снимком, а не прогоном. */
[data-layer="public"] .mk-predlozhenie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: 14px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
}

[data-layer="public"] .mk-predlozhenie--pervoe {
  border-color: var(--color-accent);
}

[data-layer="public"] .mk-predlozhenie__cena {
  flex: 1;
  color: var(--color-text);
  font: 600 18px/26px var(--font);
  font-variant-numeric: tabular-nums;
}

[data-layer="public"] .mk-predlozhenie__edinica {
  color: var(--color-text-3);
  font: 400 13px/20px var(--font);
}

[data-layer="public"] .mk-predlozhenie__meta {
  display: flex;
  flex-basis: 100%;
  flex-wrap: wrap;
  gap: 4px var(--space-2);
  color: var(--color-text-2);
  font: 400 13px/20px var(--font);
}

[data-layer="public"] .mk-nalichie--est {
  color: var(--color-success);
  font-weight: 600;
}

[data-layer="public"] .mk-predlozhenie__knopka {
  flex-basis: 100%;
  justify-content: center;
}

/* Вторичная кнопка — рамкой (макет): кнопка слоя без рамки на белой карточке
   читалась как надпись, а не как действие. */
[data-layer="public"] .mk-predlozhenie__knopka:not(.btn-primary) {
  border: var(--border-control);
}

/* ==========================================================================
   `hidden` СИЛЬНЕЕ ЛЮБОЙ РАСКЛАДКИ
   ==========================================================================

   ПОВОД — ЖИВОЙ ДЕФЕКТ, НАЙДЕННЫЙ ГЛАЗАМИ 26.09.2026. Панель чат-пузыря
   несёт в разметке атрибут `hidden`, а правило выше давало ей
   `display: flex`. Любое АВТОРСКОЕ правило с `display` бьёт браузерное
   `[hidden] { display: none }` — оно из таблицы агента пользователя и
   проигрывает всему. В итоге панель разговора стояла раскрытой на КАЖДОЙ
   публичной странице и закрывала правую треть первого экрана: лендинг,
   правовые, вики, биржа.

   ПОЧЕМУ СБРОС НА ВЕСЬ СЛОЙ, А НЕ У ПАНЕЛИ. Порода общая: любое наше
   правило с `display` у любого элемента, который где-то прячут атрибутом,
   даст ровно то же — молча и на всех страницах сразу. Точечная починка
   закрыла бы один случай и оставила механизм.

   ПОЧЕМУ `!important`. `hidden` — это СОСТОЯНИЕ вещи, а не её вид:
   элемент объявлен отсутствующим для всех, включая чтение с экрана.
   Раскладка не вправе такое перебивать, и единственный способ сказать это
   в CSS — снять вопрос о весе правил.

   ЧЕГО ЭТОТ СБРОС НЕ ЛОВИТ: прятание классом (`.скрыт`) и `display`,
   выставленный скриптом прямо в стиле элемента. Там побеждает тот же
   порядок, и сторожа на это у нас нет.

   Прогон такого не видит по устройству: PHPUnit читает разметку, а не
   отрисовку, и `hidden` в исходнике на месте. Сторож в
   V2PublichnyySloyTest проверяет, что сброс НАПИСАН, — это слабее, чем
   «панель закрыта», и граница названа там же. */
[data-layer="public"] [hidden] {
  display: none !important;
}

/* Двери «Партнёрства» переехали в свой лист (css/v2/partnyorstvo-s16.css, §S16). */

/* ТРИ МЕСТА, ГДЕ ТЕКСТ НАПИСАН ЦВЕТОМ ФОНА (26.09.2026).

   Все три внесены моими же правками этого дня, все найдены отрисовкой, а
   не прогоном: PHPUnit цвета не считает, и 22/22 с 46/46 об этом молчали.

   Общая причина у всех — НЕ ЦВЕТ, А МЕСТО. Элемент переехал под другой
   фон либо получил класс, сделанный для другого фона. Цвет при этом никто
   не трогал. */

/* 1. ССЫЛКА «ПОСЧИТАТЬ» НА ТЁМНОМ ПЕРВОМ ЭКРАНЕ, k = 1,00.

   §S14 просит здесь ссылку вместо второй кнопки; я поставила `.link` —
   класс для СВЕТЛЫХ блоков. На тёмном герое он дал `rgb(19,23,71)` на
   `rgb(19,23,71)`: цвет текста и фона совпали буква в букву.

   Прежняя кнопка `btn-ghost-w` была белой и читалась — то есть правка «по
   спецификации» сломала то, что работало. */

/* 2. КАРТОЧКА ПОТЕРЬ ПЕРЕЕХАЛА В СВЕТЛЫЙ БЛОК, k = 1,07.

   Она нарисована под тёмную подложку: фон `rgba(255,255,255,.06)`, текст
   `--on-navy`. На первом экране это работало. В «Утечках» под ней светлый
   фон страницы — и белый текст стал белым по светлому.

   Перекрашивается ПАРА «фон — текст» целиком, как учил случай с подвалом:
   поменять одну сторону значит получить тот же дефект зеркально. */

/* 3. `.patent` В ПОДВАЛЕ, k = 1,07, НА ВСЕХ ТРЁХ СТРАНИЦАХ.

   Пятнадцатое правило подвала, не попавшее в перекрытые четырнадцать.

   ПОЧЕМУ ПРОПУСТИЛА — важнее самой правки. Перебор я вела образцом
   `site-footer|\.fcol|legal-strip|patent-strip`, а селектор здесь
   `.patent` — БЕЗ имени блока. Правило принадлежит подвалу, но по имени
   об этом не говорит, и перебор по именам блока его не видел.

   Урок: перебирая правила блока, искать не по именам-префиксам, а по
   ВХОЖДЕНИЮ в блок — либо сверять число найденного с числом правил,
   которые реально красят этот кусок разметки. */
[data-layer="public"] .site-footer .patent {
  background: var(--color-surface-2);
  color: var(--color-text-2);
}

/* АМБРОВЫЙ НА ТЁМНЫХ ПОДЛОЖКАХ (27.09.2026).

   Замер: значки «скоро» 1,93, подписи «скоро» 2,90, сумма расчёта 2,90 —
   все `rgb(147,87,0)` на тёмном. Норма 4,5.

   ПРИЧИНА НЕ В ЦВЕТЕ, А В ТОМ, ЧТО ТОКЕН ОДИН НА ДВЕ ПОДЛОЖКИ. В авторском
   слое амбровый — яркий `#FF9F43`, и метка «скоро» рассчитана на него: там
   же в `site.css` записано «тёмный блок, поэтому метка берёт тот же цвет
   предупреждения — на навигационно-синем он читается». Мост v2 подставил
   `--color-warning` = #935700 — тёмный янтарь из BRIEF, который задан для
   СВЕТЛОЙ темы и на белом даёт ≈5:1. На тёмном он тонет.

   Оба цвета верны, каждый для своего фона. Поэтому не замена токена, а
   ВТОРОЙ токен — и он не выдуман: BRIEF §1 называет для тёмной колонки
   `#E6AE52`, то же значение уже стоит у нас в `tokens.css` под
   `[data-theme="dark"]`. Витрина всегда светлая (§P0), но внутри неё есть
   тёмные секции — светлой колонки для них мало.

   ПРАВИЛО ПО ПОДЛОЖКЕ, А НЕ ПО ЭЛЕМЕНТУ. Красить `.soon` целиком нельзя:
   та же метка стоит на СВЕТЛОМ — у неактивного «Қаз» в шапке и в подвале
   (подвал у нас перекрашен светлым выше по файлу) и на «Возможностях» у
   несделанных пунктов. Там тёмный янтарь верен.

   ЗДЕСЬ РОВНО ТРИ ПРАВИЛА, И ЭТО НЕ СКРОМНОСТЬ. Сперва их было семь: я
   выписала тёмные подложки по памяти — `hero`, `card-navy`,
   `calc-result .soon` — и все они оказались пустыми. `.soon` не стоит ни
   на первом экране, ни в тёмной карточке; разметки под четырьмя
   правилами нет вовсе.

   Пустое правило хуже отсутствующего: оно выглядит сделанной работой и
   молчит, когда разметка появится. Поэтому не «на всякий случай», а
   сторож: `AmbrovyyNaTyomnomTest` считает пары по ОТРИСОВАННЫМ страницам
   и краснеет в обе стороны — и на непокрытое место, и на правило в
   пустоту. Понадобится завтра метка на первом экране — он назовёт
   селектор сам. */
/* Итог калькулятора — на `--accent-soft`, а не на тёмно-синем (§S14,
   `calc`: «Справа итог на --accent-soft», 27.09.2026). Пара «фон — текст»
   перекрашена целиком: у `.calc-result` в `site.css` зашиты светлые цвета
   детей под тёмную подложку. Янтарь с тёмной колонки здесь больше не нужен:
   подложка светлая, и число идёт основным цветом текста. */

/* ЖИВОЙ ПОКАЗ ПЕРВОГО ЭКРАНА (§S14, 27.09.2026).

   Карточка СВЕТЛАЯ на тёмном первом экране — как мини-экран системы,
   который человек увидит после покупки. Это же снимает вопрос амбрового
   на тёмном: внутри карточки подложка светлая, и токены берутся обычные.

   Зазор колонок 48 по §S14 (было 64 от автора). Своих чисел нет:
   `--space-12` объявлен ровно сорока восемью. */
[data-layer="public"] .hero .wrap {
  gap: var(--space-12);
}

/* Объём занимает всю ширину под названием: в узкой карточке он иначе
   отжимает состояние и обрывается посреди числа. */

/* Состояние — СЛОВОМ, цвет только второй носитель (BRIEF §1). Убери
   зелёный — «Принято» и «Не начато» по-прежнему различимы. */

/* На телефоне первый экран в одну колонку — показ идёт под текстом. */
@media (max-width: 759.98px) {
  [data-layer="public"] .hero .wrap {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-8);
  }
}

/* «КАК ЭТО ВЫГЛЯДИТ»: СЕТКА `look` §S14 (27.09.2026).

   Спецификация даёт здесь 1.15fr / 1fr: слева живой мини-экран, справа
   то, что о нём сказано. Вкладки идут над обоими столбцами — они
   переключают всё сразу, а не левую половину.

   РАСКЛАДКА СДЕЛАНА СТИЛЯМИ, А РАЗМЕТКА НЕ ТРОНУТА. Частичка таблицы
   продуктовая: те же классы, что у реестров кабинета, и переносить в
   ней узлы ради двух колонок значило бы развести витрину с продуктом
   ради оформления.

   Порог — 1024, «широко» (§S14 п. 2: `look` — 1.15fr / 1fr → 1). До
   27.09.2026 стоял 760, и на средней ширине таблица жалась в левые 60 %,
   а п. 18 приёмки («768: двухколоночные блоки в одну колонку») не
   выполнялся. Найдено снимком 768. */

/* Карточки рабочих мест (§S14, блок ролей). */

/* ФОНЫ СЕКЦИЙ НЕ ЧЕРЕДУЮТСЯ, СЕКЦИИ РАЗДЕЛЯЕТ ЛИНИЯ (§S14 п. 2 и 20).

   Было зебрами: `calc` светлый → `ks` обычный → `roles` светлый, и
   дальше `plans` → `faq` → `comp` так же. Подложка `bg-soft` пришла из
   авторского слоя v1 и ЗАМЕНЯЛА СОБОЙ разделитель — другого не было.

   Поэтому снять её одну было нельзя: секции слиплись бы в одно полотно.
   §S14 п. 2 называет разделитель прямо — линия `--line` сверху у каждой
   секции, кроме первого экрана.

   ТЁМНЫЕ БЛОКИ ЛИНИЮ НЕ НОСЯТ. Светлая черта поверх навигационно-синего
   читается как шов, а не как граница: тёмный блок и так отделён собой.
   Первый экран — не `.section` вовсе, его исключать не нужно. */
[data-layer="public"] .section {
  border-top: 1px solid var(--color-line);
}

/* ВТОРАЯ КНОПКА ФИНАЛЬНОГО БЛОКА (§S14, приёмка п. 15).

   Блок тёмный (`.cta` — навигационно-синий), и вторичная кнопка здесь не
   может взять обычный `.btn-outline`: он объявлен через `--border` и
   `--text` светлой темы и на синем не читается. Это та же беда, из-за
   которой сегодня заводили амбровый для тёмных подложек.

   Поэтому свой вид: белая рамка и белый текст, заливка появляется при
   наведении. Ни одного своего числа — только токены. */

/* ФОНЫ БЕЛЫЕ ВСЕ, И ПЕРВЫЙ ЭКРАН ТОЖЕ (§S14 п. 20 и §6, 27.09.2026).

   После 0d1a15f9 чередования светлых подложек не стало, но три блока
   остались навигационно-синими: первый экран, ассистент и финал. В макете
   «Лендинг v2» у каждой секции `background:#fff` — тёмных нет ни одной, и
   пункт приёмки «фоны не чередуются» при трёх тёмных полосах на странице
   не выполнен, а только назван выполненным.

   Перекрашивается ПАРА «фон — текст» целиком, по уроку подвала: у этих
   блоков в `site.css` зашиты светлые цвета детей (`--on-navy`,
   `--on-navy-dim`, `#E4E5F5`, `#fff`, `--lilac`), и каждое из них
   перекрыто здесь. Круги-подсветки (`::before`) сняты: на белом они
   читаются грязным пятном. Свои числа не пишутся — только токены. */
[data-layer="public"] .hero,
[data-layer="public"] .ai,
[data-layer="public"] .cta {
  background: var(--color-surface);
  color: var(--color-text);
}

[data-layer="public"] .hero::before,
[data-layer="public"] .ai::before {
  content: none;
}

[data-layer="public"] .hero .sub { color: var(--color-text-2); max-width: 580px; }

[data-layer="public"] .hero .link { color: var(--color-accent); font-weight: 600; }

/* Финал — обычная секция с линией сверху, как у остальных (§S14 п. 2):
   по центру, основная и вторичная кнопки. */
[data-layer="public"] .cta {
  border-top: 1px solid var(--color-line);
  padding: var(--section-pad) 0;
}

[data-layer="public"] .cta h2 { color: var(--color-text); }
[data-layer="public"] .cta p { color: var(--color-text-2); max-width: 560px; margin-left: auto; margin-right: auto; }

/* АССИСТЕНТ ПО МАКЕТУ: слева метка, заголовок, абзац; справа диалог в
   рамке. Вопрос — основным цветом, ответ — на второй поверхности. */
[data-layer="public"] .ai .wrap { gap: var(--space-12); align-items: center; }
[data-layer="public"] .ai h2 { margin: var(--space-4) 0; color: var(--color-text); }
[data-layer="public"] .ai .lead { margin: 0; color: var(--color-text-2); }

/* Что умеет noneAI (13.10): три группы по четыре (ответ Claude Design 13.10, Е) — на широком экране
   колонками, на телефоне одна под другой; в группе список с галочкой акцентом. */

/* СЕКЦИИ ЛЕНДИНГА — НА БЕЛОМ, А НЕ НА ФОНЕ СТРАНИЦЫ (§S14 §6).

   Фон `body` в слое — `--color-bg-page`, секции прозрачные, и лендинг
   целиком лежал на сером; в макете у каждой секции белый. Опора —
   `data-lending` на обёртке блоков в `landing.blade.php`: `.section`
   общий у всей витрины, и у S16 свои подложки. */
[data-layer="public"] [data-lending] > * {
  background: var(--color-surface);
}

/* ЧАСТЫЕ ВОПРОСЫ ПО МАКЕТУ: список линиями, а не карточками; ширина 860;
   вопрос слева, знак «+»/«−» справа (§S14 п. 3, `faq`). */

/* `app.css` рисует у любого `details > summary` треугольник через
   `::before` — у вопросов макета его нет, знак стоит справа. */

/* ТАРИФЫ ПО МАКЕТУ (§S14, `plans`, 27.09.2026).

   Всё на белом: тёмная подложка дополнений и расширений (`.pakety`) снята
   вместе с разметкой, а с ней — её перекраски «на тёмном». Свои классы
   `tar-*`, `dop-*`, `rash-*`: у старых `.plan`/`.pak` в `site.css` зашиты
   цвета и отступы, и спорить с ними правилами дороже, чем не звать их. */

/* Годовой — единственная карточка с рамкой 2 px `--accent` (§S14 §6). */

/* У несделанного галочки нет: знак ✓ рядом со «скоро» спорит сам с собой. */

/* `.sub-chto` остаётся опорой сторожа «что даёт — только платным»; её
   старые отступы и цвета из `site.css` здесь сняты. */

/* Дополнения — строки списка без своей рамки (владелец 04.11.2026: «эту обводку убери»): карточка «Дополнения»
   вокруг уже есть, вторая рамка внутри неё лишняя. */

/* Расширения — две карточки с подвалом цены. */

/* Набор дополнений на регистрации переехал в слой входа (vhod-s20.css, .vh-nabor). */

/* БЛОК КОМПАНЬОНА ПО МАКЕТУ (§S14, `comp`): форма во всю правую колонку,
   согласие под телефоном, благодарность плашкой успеха на месте формы. */

/* «CRM», «БИРЖА», «КС» ПО МАКЕТУ (§S14, 27.09.2026). */

/* ДВЕ ДВЕРИ ПО МАКЕТУ (§S14, `try`). */

/* КНОПКА МЕНЮ 44 × 44 (§S14 `pub-header`: «кнопка 44»). Была 30 — меньше
   мишени пальца. Размер — токен `--touch`. */
[data-layer="public"] .burger {
  min-width: var(--touch);
  min-height: var(--touch);
  justify-content: center;
  align-items: center;
}

/* S23: подпись под «noneAI» в голове пузыря. */
[data-layer="public"] .puzyr__podpis { display: block; font-size: 12px; color: var(--color-text-3); font-weight: 400; }

/* «У каждого своя система» по эталону: одна плитка, ячейки через линию 1 px. */

/* «Деньги теряются молча» по эталону: заголовок и половины «Сейчас» / «В none». */

/* «Как это выглядит»: вкладки ролей, мини-экран и тезисы.
   Ролей двенадцать (владелец 29.09.2026) — вкладки переносятся на следующую
   строку чипами, а не уезжают вбок: прокрутку вбок на телефоне не находят,
   и роль за краем экрана для человека не существует.
   Форма — та же, что у чипов ролей на «Возможностях» (`.voz-chip`):
   прямоугольник со скруглением `--radius`. `--radius-round` (50 %) — только
   для кругов: на прямоугольной кнопке он даёт овал (владелец 29.09.2026:
   «почему такой формы? не квадраты? Нигде такое не делай»). */

/* КАЛЬКУЛЯТОР ПО ЭТАЛОНУ «Лендинг v2» (29.09.2026): три поля с единицей
   внутри рамки слева, итог на --accent-soft справа — месяц крупно, год ниже. */

/* ШАПКА НА ТЕЛЕФОНЕ (владелец 29.09.2026: «убери кнопку попробовать, лого
   слишком маленький, бургер не видно»). Три поломки, все от слоя v2:
   — бургер 44 × 44 с `align-items: center` в колонке сжимал свои три линии
     до нулевой ширины: кнопка на месте, а рисовать нечего;
   — «Попробовать» выросла до 48 и вытеснила знак: логотип сжимался в ноль;
   — знак без `flex: none` уступал место первым.
   «Попробовать» и «Вход» на телефоне живут в шторке меню (knopkiTelefona). */
[data-layer="public"] .burger span { width: 20px; flex: none; }
@media (max-width: 900px) {
  [data-layer="public"] .site-header .header-cta { display: none; }
  [data-layer="public"] .site-header .logo { flex: none; }
  [data-layer="public"] .site-header .logo img { height: 26px; width: auto; }
  [data-layer="public"] .site-header .lang { margin-left: auto; }
}

/* Пока открыт лист меню телефона, пузыря «Спросить» нет (владелец 29.09.2026:
   «видно, даже когда меню открыто»). Лист — во весь экран поверх страницы, а
   пузырь стоял поверх листа и закрывал его нижние кнопки. */
body:has(.mobile-menu.open) .puzyr { display: none; }
/* ПУЗЫРЬ ОТКРЫТ — КНОПКИ «СПРОСИТЬ» НЕТ (владелец 29.09.2026: «при раскрытии
   ведь должна скрыться»). Панель уже открыта, а кнопка над ней звала открыть её
   ещё раз; закрыть — крестик. Признак — aria-expanded, его ставит puzyr.js. */
[data-layer="public"] .puzyr__knopka[aria-expanded="true"] { display: none; }

/* НА ТЕЛЕФОНЕ «СОГЛАСЕН, СПРОСИТЬ» ВИДНА СРАЗУ (владелец 29.09.2026: «кнопка
   показывается только после скролла вниз»). 100vh на телефоне включает место
   под адресной строкой и панелью браузера — низ панели с кнопкой уходил под
   них. dvh — видимая высота; лента сжимается, блок согласия с кнопкой — нет. */
@media (max-width: 719px) {
  [data-layer="public"] .puzyr__panel { height: 100vh; height: 100dvh; }
}
[data-layer="public"] .puzyr__lenta { min-height: 0; }
[data-layer="public"] .puzyr__vhod,
[data-layer="public"] .puzyr__vvod,
[data-layer="public"] .puzyr__lid { flex-shrink: 0; }

/* ПОЛЕ ВОПРОСА В ПУЗЫРЕ — ВИДНО, ЧТО ПИШЕШЬ (владелец 29.09.2026: «на пузыре
   в мобайле это не удобно, пользователь должен нормально видеть, что пишет»).
   Поле не тянулось — узкое, фиксированная высота .form-control резала вторую
   строку, появлялась полоса прокрутки. Теперь поле берёт всю ширину рядом с
   кнопкой, от 44 px и растёт по тексту (до пяти строк считает puzyr.js); 16 px —
   иначе телефон увеличивает страницу при фокусе. */
[data-layer="public"] .puzyr__vvod textarea.form-control {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  height: auto;
  padding: 10px 12px;
  font-size: 16px;
  line-height: 22px;
  overflow-y: hidden;
}

/* ВВОД КАК В МЕССЕНДЖЕРЕ (владелец 29.09.2026: «кнопку самолётик, поле на всю ширину
   и побольше в высоту, кнопка — в правом нижнем углу поля»). Поле от двух строк и
   растёт до пяти (puzyr.js); справа внизу у поля — место под круглую кнопку, текст
   под неё не заходит. */
[data-layer="public"] .puzyr__vvod { display: block; padding: 10px 12px; }
[data-layer="public"] .puzyr__pole { position: relative; }
[data-layer="public"] .puzyr__vvod .puzyr__pole textarea.form-control {
  display: block;
  width: 100%;
  min-height: 64px;
  padding: 10px 56px 10px 12px;
}
[data-layer="public"] .puzyr__samolet {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius);
  background: var(--color-accent);
  color: var(--color-on-accent);
  cursor: pointer;
}
[data-layer="public"] .puzyr__samolet:hover { background: var(--color-accent-hover); }
[data-layer="public"] .puzyr__samolet:disabled { opacity: .5; cursor: default; }

/* Баннер согласия на счётчики (Z-187, владелец 15.10.2026). Внизу экрана, не перекрывает страницу целиком
   и не мешает читать: текст слева, две кнопки равного веса справа (выбор без подталкивания — согласие
   должно быть свободным). Пузырь чата (z-index 70) остаётся поверх. */
[data-layer="public"] .schetchiki {
  position: fixed; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); z-index: 65;
  display: flex; align-items: center; gap: var(--space-4);
  max-width: 960px; margin: 0 auto; padding: var(--space-4);
  background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-line); border-radius: var(--radius); box-shadow: var(--shadow-float);
}
[data-layer="public"] .schetchiki[hidden] { display: none; }
[data-layer="public"] .schetchiki__tekst { margin: 0; flex: 1; font: var(--type-body); }
[data-layer="public"] .schetchiki__tekst a { color: var(--color-accent); }
[data-layer="public"] .schetchiki__knopki { display: flex; gap: var(--space-2); flex-shrink: 0; }
@media (max-width: 719px) {
  [data-layer="public"] .schetchiki { flex-direction: column; align-items: stretch; left: var(--space-2); right: var(--space-2); bottom: var(--space-2); }
  [data-layer="public"] .schetchiki__knopki { flex-direction: column; }
}

/* ЦЕЛИ НАЖАТИЯ НА ТЕЛЕФОНЕ (Z-875, лист 5 макета Claude Design 08.11.2026): «Рус / Қаз» были 40 × 22, логотип 52 × 26,
   телефон, почта и правовые ссылки подвала — 15–16 px высотой. На узком экране — 44 px по высоте; ссылки подвала —
   строкой с вертикальным полем, текст и порядок прежние. */
@media (max-width: 759.98px) {
  [data-layer="public"] .lang-b { min-height: var(--touch, 44px); min-width: var(--touch, 44px); display: inline-flex; align-items: center; justify-content: center; }
  [data-layer="public"] .site-header .logo { min-height: var(--touch, 44px); display: inline-flex; align-items: center; }
  [data-layer="public"] .site-footer a { display: inline-flex; align-items: center; min-height: var(--touch, 44px); }
}