/* 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); }
[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);
}

/* Подвал на фоне страницы, а не на тёмном: тёмная подложка ушла вместе с
   двумя оттенками сиреневого на ней (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` слился бы с фоном — тот самый
   дефект между разметкой и стилями, которого прогон не видит по
   устройству. */
[data-layer="public"] .lang {
  display: flex;
  gap: 2px;
}

[data-layer="public"] .lang-b {
  height: 28px;
  padding: 0 8px;
  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"] {
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

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

   Стояло `--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); }

[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 1.2s infinite ease-in-out;
}

[data-layer="public"] .puzyr__pechataet span:nth-child(2) { animation-delay: .15s; }
[data-layer="public"] .puzyr__pechataet span:nth-child(3) { animation-delay: .3s; }

@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` сняты вместе с
   разметкой, которая их звала. */

/* ==========================================================================
   `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;
}

/* «ПАРТНЁРСТВО»: СТРОКА ДЕЙСТВИЯ В ДВЕРИ
   ==========================================================================

   Дверь — это `.tile` со ссылкой: метка кому, заголовок что, пояснение зачем.
   Четвёртой строки — «что вы сделаете дальше» — в наборе автора нет, а без неё
   дверь перестаёт обещать действие и превращается в ещё одну карточку.

   Класс наш и живёт здесь: `site.css` приходит от автора макета и обновляется
   заменой целиком. */

[data-layer="public"] .dver-hod {
  margin-top: var(--space-3);
  color: var(--color-accent);
  font: var(--type-label);
}

/* Вся дверь — ссылка, поэтому подчёркивание с неё снимается: подчёркнутый
   заголовок внутри карточки-ссылки читается как вторая, вложенная ссылка. */
[data-layer="public"] a.tile {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* ПУНКТЫ СПИСКА НА АКЦЕНТНОЙ КАРТОЧКЕ ТАРИФА — ДОСТРОЙКА ЧУЖОЙ ПАРЫ.

   Единственное место, где я правлю цвет текста, и потому с оговоркой.

   `site.css` сам красит на этой карточке заголовок, цену, приписку и
   примечание в светлое (`.sub-plan.accent h4/.price/.per/.note`), а
   `.sub-chto li` пропустил. При авторском `--text-2: #55515F` на тёмно-синем
   это давало 2.3, при нашем токене — 1.94: плохо было и до нас.

   ТО ЕСТЬ ЭТО НЕ НАША РЕГРЕССИЯ, а незакрытая пара «фон — текст» у автора,
   которую мы сделали чуть хуже. Чиним по его же образцу, тем же токеном
   «на акценте», а не своим цветом.

   Снимется, когда тарифы соберут по «Лендинг v2»: там эта карточка своя. */
[data-layer="public"] .sub-plan.accent .sub-chto li {
  color: var(--color-on-accent);
}
/* ТРИ МЕСТА, ГДЕ ТЕКСТ НАПИСАН ЦВЕТОМ ФОНА (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` была белой и читалась — то есть правка «по
   спецификации» сломала то, что работало. */
[data-layer="public"] .hero .link {
  color: var(--color-on-accent);
}

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

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

   Перекрашивается ПАРА «фон — текст» целиком, как учил случай с подвалом:
   поменять одну сторону значит получить тот же дефект зеркально. */
[data-layer="public"] #utechki .loss-card {
  background: var(--color-surface);
  border-color: var(--color-line);
}

[data-layer="public"] #utechki .loss-card .t {
  color: var(--color-text);
}

[data-layer="public"] #utechki .loss-card .s {
  color: var(--color-text-3);
}

[data-layer="public"] #utechki .loss-card hr {
  background: var(--color-line);
}

[data-layer="public"] #utechki .loss-card .link {
  color: var(--color-accent);
}

/* 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` считает пары по ОТРИСОВАННЫМ страницам
   и краснеет в обе стороны — и на непокрытое место, и на правило в
   пустоту. Понадобится завтра метка на первом экране — он назовёт
   селектор сам. */
[data-layer="public"] .bg-navy .soon {
  color: var(--color-warning-on-dark);
  border-color: var(--color-warning-on-dark);
}

[data-layer="public"] .bg-navy .ai-point i.i-soon {
  color: var(--color-warning-on-dark);
}

[data-layer="public"] .calc-result .v {
  color: var(--color-warning-on-dark);
}

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

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

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

[data-layer="public"] .hero-demo {
  flex: 1;
  min-width: 0;
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}

[data-layer="public"] .hero-demo .hd-shapka {
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-line);
  background: var(--color-surface-2);
  color: var(--color-text-2);
  font: var(--type-label);
}

[data-layer="public"] .hero-demo .hd-stroki {
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-layer="public"] .hero-demo .hd-stroka {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: var(--space-0-5) var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-line);
}

[data-layer="public"] .hero-demo .hd-rabota {
  grid-column: 1;
  color: var(--color-text);
  font: var(--type-h3);
}

/* Объём занимает всю ширину под названием: в узкой карточке он иначе
   отжимает состояние и обрывается посреди числа. */
[data-layer="public"] .hero-demo .hd-obyom {
  grid-column: 1 / -1;
  color: var(--color-text-2);
  font: var(--type-caption);
  font-variant-numeric: tabular-nums;
}

/* Состояние — СЛОВОМ, цвет только второй носитель (BRIEF §1). Убери
   зелёный — «Принято» и «Не начато» по-прежнему различимы. */
[data-layer="public"] .hero-demo .hd-sost {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  text-align: right;
  color: var(--color-text-3);
  font: var(--type-label);
}

[data-layer="public"] .hero-demo .hd-sost--prinyato {
  color: var(--color-success);
}

[data-layer="public"] .hero-demo .hd-itog {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-accent-soft);
}

[data-layer="public"] .hero-demo .hd-itog__podpis {
  color: var(--color-text-2);
  font: var(--type-label);
}

[data-layer="public"] .hero-demo .hd-itog__summa {
  color: var(--color-accent);
  font: var(--type-h1);
  font-variant-numeric: tabular-nums;
}

/* На телефоне первый экран в одну колонку — показ идёт под текстом. */
@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: слева живой мини-экран, справа
   то, что о нём сказано. Вкладки идут над обоими столбцами — они
   переключают всё сразу, а не левую половину.

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

   Порог — тот же 760, что у всего публичного слоя (§P0): ниже него
   таблица заменяется карточками, и двух колонок там нет. */
@media (min-width: 760px) {
  [data-layer="public"] #look .rsw {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
  }

  [data-layer="public"] #look .rsw__tabs {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  [data-layer="public"] #look .rsw__frame {
    grid-column: 1;
    grid-row: 2;
  }

  /* В узком столбце строки идут одна под другой: рядом они сжались бы
     до переноса посреди слова. */
  [data-layer="public"] #look .rsw__foot {
    grid-column: 2;
    grid-row: 2;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  /* Три строки — одна под другой, и КАЖДАЯ ПЕРЕНОСИТСЯ.

     Под таблицей во всю ширину эти факты стояли в строку и не
     переносились (`white-space: nowrap`) — там это верно, строка
     короткая. В узком столбце то же правило выгнало текст за край
     окна: 1038 px при окне 1024, и вся страница поехала вбок.

     Поэтому здесь сняты оба свойства: и однострочность, и строчная
     раскладка. Заметно это только глазами — прогон ширину не считает. */
  [data-layer="public"] #look .rsw__count {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    white-space: normal;
  }

  [data-layer="public"] #look .look-snimok {
    grid-column: 1 / -1;
  }
}

[data-layer="public"] #look .look-snimok {
  margin: var(--space-6) 0 0;
}

/* Карточки рабочих мест (§S14, блок ролей). */
[data-layer="public"] .roli-mesto {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Имя места — мелко и приглушённо: в карточке главное не должность, а
   то, чем человек на ней занят. */
[data-layer="public"] .roli-mesto__kto {
  color: var(--color-text-3);
  font: var(--type-label);
  letter-spacing: .04em;
  text-transform: uppercase;
}

[data-layer="public"] .roli-mesto__h {
  margin: 0;
  color: var(--color-text);
  font: var(--type-h2);
}

[data-layer="public"] .roli-mesto__chto {
  margin: 0;
  color: var(--color-text-2);
  font: var(--type-body);
}

[data-layer="public"] .roli-itog {
  margin-top: var(--space-6);
}

/* ФОНЫ СЕКЦИЙ НЕ ЧЕРЕДУЮТСЯ, СЕКЦИИ РАЗДЕЛЯЕТ ЛИНИЯ (§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);
}

[data-layer="public"] .section.bg-navy {
  border-top: 0;
}

/* Метка состояния расширения (§S14 п. 11).

   «Скоро» берёт общий класс `.soon` — тот же, что у остальных
   несделанных мест витрины, и красится вместе с ними. Своя метка нужна
   только «Доступно»: зелёного бейджа на витрине не было. */
[data-layer="public"] .rash-metka {
  display: inline-block;
  margin-left: var(--space-2);
  vertical-align: middle;
}

[data-layer="public"] .rash-metka--est {
  padding: 2px var(--space-2);
  border: 1px solid var(--color-success);
  border-radius: var(--radius);
  color: var(--color-success);
  font: var(--type-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* КАРТОЧКИ РАСШИРЕНИЙ СТОЯТ НА ТЁМНОЙ ПОДЛОЖКЕ (`.pakety` — синий).

   Написала метку светлыми токенами и чуть не оставила её нечитаемой:
   `--color-success` (#1B7A4A) задан для белого фона, на синем это
   тёмное по тёмному. Поймал сторож `AmbrovyyNaTyomnomTest` — он считает
   пары «амбровое на тёмном» по отрисовке и покраснел на `.pakety .soon`
   в тот же прогон, когда метка появилась.

   Зелёную он не считает: его область — амбровый. Поэтому её перекрасила
   рядом, руками, и по тому же правилу — цвет из тёмной колонки. */
[data-layer="public"] .pakety .soon {
  color: var(--color-warning-on-dark);
  border-color: var(--color-warning-on-dark);
}

[data-layer="public"] .pakety .rash-metka--est {
  border-color: var(--color-success-on-dark);
  color: var(--color-success-on-dark);
}

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

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

   Поэтому свой вид: белая рамка и белый текст, заливка появляется при
   наведении. Ни одного своего числа — только токены. */
[data-layer="public"] .cta-knopki {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

[data-layer="public"] .btn-outline-white {
  border: 1px solid var(--color-on-accent);
  background: transparent;
  color: var(--color-on-accent);
}

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

/* ПОСЛЕДСТВИЕ СДВИГА НА ГРАФИКЕ — ЧИТАЕМЫМ КРАСНЫМ (§S14 п. 7).

   Авторский слой красит «+7 дн.» и «+1 015 000 ₸» числом `#EA5455`. На
   белом это 3,5:1 при норме 4,5 — и краснеет тут не украшение, а ЦЕНА
   ЗАДЕРЖКИ: то самое число, ради которого блок и сделан.

   `--color-danger` (#C42F37) даёт 5,5:1. Цвет назван BRIEF, своих чисел
   здесь нет. Проверено замером после правки. */
[data-layer="public"] .gnt__val.is-late {
  color: var(--color-danger);
}

/* РОЛИ НА «СРЕДНЕЙ» ШИРИНЕ — ПО ДВЕ (§S14 п. 2).

   «768: одна колонка в двухколоночных блоках; тарифы, CRM и роли — по
   2». Сетка `.grid-3` из авторского слоя схлопывается сразу в одну, и
   шесть карточек мест вытягивались в столбик на планшете — полстраницы
   пустого поля справа.

   Порог именно 760–1023: это «средне» из §S14 п. 2, третья точка
   перелома. В слое её до сих пор не было вовсе — см. отдельную находку
   про шкалу шрифта, там же названо расхождение с передачей дизайнера. */
@media (min-width: 760px) and (max-width: 1023.98px) {
  [data-layer="public"] .roli-mesta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}