/* Дизайн-система AyanBI — ЕДИНСТВЕННЫЙ дом токенов и компонентов.
   Наряд: Платформа/Spec_Web_Design_2026-09-08.md §5 (этап Д-0), правило Р-08.09-6.

   ПОЧЕМУ ФАЙЛ, А НЕ <style> В ДВУХ СКЕЛЕТАХ. До 08.09.2026 палитра жила копией в
   templates/base.html и templates/storefront/base.html, а ещё четыре страницы
   (login, invite, error, partner) несли свои копии тех же шести цветов
   ЛИТЕРАЛАМИ, без переменных вовсе. Шесть домов у одной нормы — это шесть мест,
   где следующая правка цвета применится в пяти. Здесь дом один; скелеты его
   подключают и своих стилей не имеют. Судит гейт selfcheck.py --screens.

   ПЕЧАТЬ РАВНА ЭКРАНУ. Тема одна, светлая: у клиента документ дня уходит
   бухгалтеру и печатается, а автор у экрана и PDF ОДИН (Р-14.08-5, Р-07.09-7).
   Тёмного режима нет намеренно (ТЗ §7 п.13), prefers-color-scheme не слушаем.

   ЦВЕТ НЕ БЫВАЕТ ЕДИНСТВЕННЫМ НОСИТЕЛЕМ. У природы суммы и у состояния данных
   рядом с цветом всегда стоит СЛОВО: ч/б печать и дальтонизм не должны отнимать
   у клиента смысл (ТЗ §7 п.3).

   ЗАЧЕМ КИРИЛЛИЧЕСКИЕ ИМЕНА КЛАССОВ. Это разметка клиентского экрана, а не
   исполнительный синтаксис (Р-30.08-2 и Р-01.09-6 говорят о модулях, каталогах,
   ключах CLI и именах юнитов). Имена файлов и токенов путей — латиницей. */

/* ── 1. Шрифт ───────────────────────────────────────────────────────────────
   Onest, self-hosted (SIL OFL-1.1, static/fonts/LICENSE-Onest.txt) — шрифт AyanBI с
   09.10.2026 (Р-09.10-1). Google Fonts не подключаем (ТЗ §7 п.10, CSP font-src 'self').
   Подрезан под наш алфавит: латиница, русский и казахский (ә ғ қ ң ө ұ ү һ і), ₸, №,
   стрелки, кавычки; фичи kern и tnum. Два начертания по ~12 КБ — 400 и 700: третье не
   влезало в потолок главной витрины 100 КБ (test_d4_storefront). Вес 500–800 рисует 700. */
@font-face {
  font-family: "Onest AyanBI";
  src: url("/static/fonts/Onest-Regular-subset.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Onest AyanBI";
  src: url("/static/fonts/Onest-Bold-subset.woff2") format("woff2");
  font-weight: 500 800; font-style: normal; font-display: swap;
}

/* ── 2. Токены ──────────────────────────────────────────────────────────── */
:root {
  /* Фирменная палитра AyanBI с 09.10.2026 (Р-09.10-1): глубокий зелёный и коралловый
     сигнал знака; прежняя «бумага» с бронзовым акцентом снята. Роли токенов не менялись.
     Палитра — ТЗ §5.1. Здесь ЕЁ ДОМ: значения живут тут, ТЗ на них
     ссылается. Контраст каждого текстового токена к --фон и к --бумага судит
     `selfcheck.py --screens`, порог 4.5:1.

     ЗАМЕР 08.09.2026, из-за которого два значения ТЗ отличаются от напечатанных
     в нём: --вопрос #b7791f давал 3,46:1 на фоне, --неизвестно #9a9a9a — 2,67:1
     при пороге 4,5, объявленном тем же §5.1. Ярлык «под вопросом» — это текст,
     который клиент обязан прочесть, и на телефоне при солнце он не читался.
     Взяты ближайшие тона, проходящие порог: 4,65 и 4,77. Остальные девять токенов
     ТЗ прошли как есть. */
  --фон:        #f4f6f3;   /* страница */
  --бумага:     #ffffff;   /* карточка, документ */
  --чернила:    #10201c;   /* текст */
  --серый:      #4b5d58;   /* подписи, вторичный текст */
  --линия:      #d3dcd8;   /* границы, разделители */
  /* Углублён 24.09 (Г-1): #8a6d3b давал 3,92 на подложке. */
  --акцент:     #0e3b34;   /* бренд, кнопки, ссылки, активные чипы */

  /* Четыре природы суммы + два состояния пустоты. Природа НИКОГДА не
     передаётся одним цветом: рядом стоит ярлык словом (см. .природа). */
  --потеря:     #a3291f;   /* подтверждённая потеря, «срочно» */
  --вопрос:     #8a5a00;   /* под вопросом (ТЗ #b7791f — 3,46:1, замер 08.09) */
  --оценка:     #3f5b8c;   /* оценка, плашка демо */
  --оборот:     #2f6b4f;   /* оборот к проверке, «чисто» */
  --неизвестно: #5c6461;   /* не считалось, данных нет (ТЗ #9a9a9a — 2,67:1) */

  /* Ред. 5 (ТЗ §10.1): подложка вердикта и витрины, тинты природ; пары судит --screens. */
  --подложка:        #dcebe5;
  --потеря-фон:      #fcebe8;
  --вопрос-фон:      #fdf2d9;
  --оценка-фон:      #edf1f9;
  --оборот-фон:      #e7f3ec;
  --неизвестно-фон:  #eef0ef;

  /* Прежнее имя --тревога оставлено АДРЕСОМ на --потеря: на него смотрят
     шаблоны, написанные до Д-0. Второго значения у него нет. */
  --тревога:    var(--потеря);

  /* Сигнал знака — коралловая черта «=». Только формы и графика; для текста и
     кнопки с белым текстом — --signal-text (коралл под белым даёт 3,4:1). */
  --signal:      #e4573d;
  --signal-text: #b8402a;

  /* Типографика — ТЗ §5.2 и §10.1 п.5. Шкала закрыта: 12·14·16·20·28·36·40·56. */
  --шрифт: "Onest AyanBI", -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  --кегль-подпись: .75rem;   /* 12 */
  --кегль-мелкий:  .875rem;  /* 14 — основной на телефоне */
  --кегль-текст:   1rem;     /* 16 — основной на десктопе, текст находки */
  --кегль-вердикт: 1.25rem;  /* 20 — вердикт, заголовок карточки */
  --кегль-экран:   1.75rem;  /* 28 — заголовок экрана */
  --кегль-число:   2.25rem;  /* 36 — ОДНО число на экране, не больше одного */
  --кегль-крупно:  2.5rem;   /* 40 */
  --кегль-витрина: 3.5rem;   /* 56 */
  --межстрочный: 1.45;
  --ширина-текста: 70ch;

  /* Ритм и форма */
  --шаг: .5rem;
  --поле: 1rem;
  --скругление: 10px;
  --скругление-мелкое: 6px;
  --полоса: 52rem;         /* колонка кабинета */
  --полоса-широкая: 54rem; /* колонка витрины */
  --колонка-меню: 11rem;   /* левая колонка разделов на десктопе, ТЗ §4.1 */
  /* КОЛОНКА ВСТАЁТ С 64rem = 1024 px (23.09.2026, ревизия М-721 §4). Прежние 66rem
     выбраны арифметикой 12 + 2 + 52 и промахнулись ровно на самый частый размер —
     планшет и окно браузера вполэкрана ноутбука получали телефонный кабинет.
     Граница медиа-запроса пишется ЧИСЛОМ (переменные в @media не работают): 64rem
     стоит в ayanbi.css и cabinet.css, и сдвигать её — в обоих местах. */
  --каркас: 64rem;
  --каркас-широкий: 78rem; /* с 80rem (1280 px): лист дня не зажат в 800 px */
  --палец: 44px;           /* минимум для касания, ТЗ §5.5 */
}

/* ── 3. Основа ──────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--шрифт);
  font-size: var(--кегль-мелкий);
  line-height: var(--межстрочный);
  font-variant-numeric: tabular-nums;
  color: var(--чернила);
  background: var(--фон);
}
@media (min-width: 48rem) {
 body { font-size: var(--кегль-текст); }}

/* Полоса витрины: ширину задавали, а ЦЕНТРОВКУ и боковые поля — нет. Внутри tailnet
   это было незаметно (смотрели с широкого экрана и не придирались), а первый же выход
   наружу 12.09 показал текст, прилипший к левому краю без единого пикселя отступа.
   `margin-inline: auto` центрует полосу, `padding-inline` держит поле на узком экране,
   где max-width уже не работает. Найдено словом Игоря при открытии ayanbi.kz. */
body.витрина header, body.витрина main, body.витрина footer {
  max-width: var(--полоса-широкая);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

header { border-bottom: 1px solid var(--линия); padding-top: .75rem; padding-bottom: .5rem; }
main   { padding-bottom: 3rem; }
footer { border-top: 1px solid var(--линия); padding-top: .75rem;
         color: var(--серый); font-size: var(--кегль-подпись); }
footer a { color: var(--серый); }

a { color: var(--акцент); }
p { margin: .4rem 0; max-width: var(--ширина-текста); }
p.лид { font-size: var(--кегль-текст); }

h1 { font-size: var(--кегль-вердикт); font-weight: 600; margin: 1rem 0 .25rem; line-height: 1.3; }
h2 { font-size: var(--кегль-текст);   font-weight: 600; margin: 1.5rem 0 .5rem; }
h3 { font-size: var(--кегль-мелкий);  font-weight: 600; margin: 1.1rem 0 .3rem; }
@media (min-width: 48rem) {

  h1 { font-size: var(--кегль-экран); }
  h2 { font-size: var(--кегль-вердикт); }
  h3 { font-size: var(--кегль-текст); }}

main > h1:first-child { margin-top: 1.2rem; }

/* ── 4. Шапка, меню, крошки ─────────────────────────────────────────────── */
.шапка { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; min-height: 56px; }
.лого { font-weight: 600; color: var(--чернила); text-decoration: none;
        font-size: var(--кегль-текст); display: flex; align-items: center; gap: .4rem; }
.лого svg { width: 1.3rem; height: 1.3rem; }

nav.меню { display: flex; gap: .9rem; flex-wrap: wrap; flex: 1; }
nav.меню a { color: var(--серый); text-decoration: none; font-size: var(--кегль-мелкий); }
nav.меню a.активен, nav.меню a.активна {
  color: var(--чернила); border-bottom: 2px solid var(--акцент);
}

.человек { margin-left: auto; color: var(--серый); font-size: var(--кегль-подпись);
           white-space: nowrap; display: flex; align-items: center; gap: .6rem; }
.колокол .значок { width: 1.35rem; height: 1.35rem; color: var(--чернила); }
.человек a, header a { color: var(--серый); text-decoration: none; }
.крошки .назад { margin-right: .5rem; }
/* Нижняя панель перекрывает низ содержимого — отдаём ей высоту пальца. */
body:not(.витрина) main { padding-bottom: calc(3rem + var(--палец)); }

@media (min-width: 64rem) {

  aside.боковое nav.меню { flex-direction: column; gap: .55rem; }
  aside.боковое nav.меню a.активен, aside.боковое nav.меню a.активна {
    border-bottom: 0; border-left: 2px solid var(--акцент); padding-left: .5rem;
    margin-left: -.7rem;
  }
  body:not(.витрина) main { padding-bottom: 3rem; }}


/* У витрины своя шапка: пунктов четыре, они в одну строку помещаются на любой
   ширине, и ни колонки, ни нижней панели ей не нужно. Замер 08.09: общее правило
   кабинета оставило её телефонную шапку вообще без навигации и без «Входа».

   ПРАВКА Д-4 (09.09.2026, по снимку 360 px): пунктов на витрине СЕМЬ, а не четыре, и
   на телефоне они переносились в три строки ВОКРУГ логотипа — знак сервиса оказывался
   в середине меню. Разводим на две строки: имя сверху, разделы под ним одной лентой с
   горизонтальной прокруткой. Бургера здесь по-прежнему нет: у незнакомого человека,
   пришедшего с телефона, разделы должны быть видны, а не спрятаны за значок. */
@media (max-width: 40rem) {

  body.витрина .шапка { flex-direction: column; align-items: flex-start; gap: .35rem; }
  body.витрина nav.меню { gap: .6rem; font-size: var(--кегль-подпись);
                          flex-wrap: nowrap; overflow-x: auto; max-width: 100%;
                          padding-bottom: .2rem; }
  body.витрина nav.меню a { white-space: nowrap; }

  /* ЦЕЛЬ ПАЛЬЦА В ШАПКЕ И ПОДВАЛЕ (М-721, замер 13.09.2026). Норма §5.5 — 44 px,
     замер живой витрины на 375 px давал 24 px у разделов и 16 px у ссылок подвала.
     Высоту берём отступами, а не кеглем: кегль подписи выбран Д-0 и не пересматривается. */
  body.витрина nav.меню a,
  body.витрина footer a { display: inline-flex; align-items: center;
                          min-height: var(--палец); }

  /* «Вход» — правый край ВЕРХНЕЙ строки, над лентой разделов: у витрины шапка на
     телефоне колоночная, и без этого он лёг бы третьей строкой под лентой. */
  body.витрина .шапка { position: relative; }
  body.витрина .шапка .человек { position: absolute; top: 0; right: 0;
                                 margin-left: 0; min-height: var(--палец); }}



/* ── 4а. Переключатель языка ─────────────────────────────────────────────────
   Дом разметки — `templates/base.html`, правый край шапки. До 13.09.2026 у класса
   `.языки` не было НИ ОДНОГО правила ни здесь, ни в `cabinet.css`: три ссылки
   печатались голым текстом между аватаром и словом «выйти» — то есть переключатель
   существовал, но глазом не находился (замер М-721). Рисуем сегментом: активный код
   держит подложку, соседние — цвет подписи; цель пальца 44 px, как у колокольчика. */
.языки { display: inline-flex; align-items: stretch; border: 1px solid var(--линия);
         border-radius: var(--скругление-мелкое); overflow: hidden; }
.языки a { display: inline-flex; align-items: center; padding: 0 .5rem;
           min-height: var(--палец); font-size: var(--кегль-подпись);
           color: var(--серый); text-decoration: none; letter-spacing: .02em; }
.языки a + a { border-left: 1px solid var(--линия); }
.языки a.активен { background: var(--бумага); color: var(--чернила); font-weight: 600; }

/* ── 5. Карточка и текстовые классы ─────────────────────────────────────── */
.строка, .карточка {
  border: 1px solid var(--линия); border-radius: var(--скругление);
  background: var(--бумага); padding: .75rem .9rem; margin: .6rem 0;
}
.строка a { color: var(--чернила); }
.строка.главный, .строка.акцент { border-color: var(--акцент); }
.строка.срочно { border-color: var(--потеря); border-left-width: 4px; }
.строка.прокрутка { overflow-x: auto; }

.тихо     { color: var(--серый); font-size: var(--кегль-мелкий); }
.подпись  { color: var(--серый); font-size: var(--кегль-подпись);
            text-transform: uppercase; letter-spacing: .04em; }
/* Подпись стоит НАД своим значением, а не впритык к нему. 09.09 на боевом экране
   профиля читалось «входigor.nam.plh@gmail.com»: два инлайновых span подряд, между
   ними ни пробела, ни переноса. Блочной делается ЗНАЧЕНИЕ после подписи, а не сама
   подпись: в сводках она законно стоит в строку с числом («сюжетов показано 3»), и
   блок там разорвал бы фразу. */
.подпись + .значение { display: block; margin-top: .15rem; }
/* НЕ `nowrap`. Снимок 360 px от 08.09 поймал обрезанную строку находки: класс
   пришёл из base.html, где им мерили короткие величины, а сегодня им же печатается
   «что нашли» — предложение в 60 знаков. Неразрывность нужна ЧИСЛУ, и у числа для
   этого есть `.деньги`. */
.значение { font-size: var(--кегль-текст); overflow-wrap: anywhere; }
.значение.как-есть { white-space: pre-wrap; }
.значение.одной-строкой { white-space: nowrap; }
.деньги   { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Сумма ПОКАЗАТЕЛЯ (выручка, оборот по дням и разрезам) — не находка: природы у неё нет,
   ярлык природы ей не нужен, вид тот же, что у `.деньги`. */
.amount   { white-space: nowrap; font-variant-numeric: tabular-nums; }
.тревога  { color: var(--потеря); }
.цена     { font-size: var(--кегль-вердикт); white-space: nowrap; }
.было     { color: var(--серый); text-decoration: line-through; font-size: var(--кегль-мелкий); }

.метка { display: inline-block; font-size: var(--кегль-подпись); padding: .1rem .45rem;
         border-radius: var(--скругление-мелкое); border: 1px solid var(--линия);
         color: var(--серый); }
.метка.высокий { color: var(--потеря); border-color: var(--потеря); }
.метка.акцент  { color: var(--акцент); border-color: var(--акцент); }

/* ── 6. Ярлык природы суммы — ТЗ §5.3 ───────────────────────────────────────
   Компонент стоит СЛЕВА от суммы и всегда несёт текст. Суммы разных природ
   не складываются и не стоят в одной колонке (Р-04.09-2, README_фронт п.2). */
.природа {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: var(--кегль-подпись); line-height: 1.3; white-space: nowrap;
  padding: .1rem .45rem; border-radius: var(--скругление-мелкое);
  border: 1px solid currentColor; color: var(--неизвестно);
}
.природа::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%;
                   background: currentColor; flex: none; }
.природа--потеря { color: var(--потеря); }
.природа--вопрос { color: var(--вопрос); }
.природа--оценка { color: var(--оценка); }
.природа--оборот { color: var(--оборот); }
/* «Назвать нельзя» — не природа суммы, а её отсутствие с причиной (Р-01.08-137). */
.природа--нет    { color: var(--неизвестно); font-style: normal; }
/* СЛУЖЕБНЫЕ КВАЛИФИКАТОРЫ (Д-5): «начислено», «к выплате», «выплачено», «сторно» —
   это не природа НАХОДКИ, а вид платежа, и своего цвета у них нет намеренно: правило
   выше уже красит `.природа` нейтральным, а четыре новых цвета в палитре означали бы,
   что деньги партнёра стоят в одном ряду с ущербом клиента. Классы перечислены, чтобы
   следующий читатель видел закрытый список, а не гадал, опечатка это или замысел. */
.природа--начислено, .природа--к-выплате,
.природа--выплачено, .природа--сторно { color: var(--неизвестно); }

/* ── 7. Состояние данных — ТЗ §5.4, шесть значений ────────────────────────── */
/* ФРАЗА ПЕРЕНОСИТСЯ, ЗНАК ОСТАЁТСЯ ПРИ ПЕРВОЙ СТРОКЕ (14.09.2026, М-743).
   `white-space: nowrap` был верен, пока класс носил ЯРЛЫК в два слова («закрыт чисто»,
   «данных нет»). Сегодня тем же классом печатается ЦЕЛАЯ ФРАЗА: срез дня («Данные
   получены к 14.09.2026 17:10 Asia/Almaty, часть дня ещё в зале — итог дня будет позже»)
   и каждая строка входов («выписка Kaspi (расчётный): ждёт пакета — приходит пачкой по
   рабочим дням…»). Неразрывная строка растянула СТРАНИЦУ: замер по снимку боевого
   дашборда Giardino 14.09 — около 1 010 CSS-пикселей при экране 430, содержимое прижато
   в левую треть, хвост фразы обрезан и вбок не доезжает. Знак состояния держится при
   первой строке `margin-top` вместо вертикального центрирования: у многострочной фразы
   «по центру» увело бы квадрат на середину абзаца. */
.состояние {
  display: inline-flex; align-items: flex-start; gap: .35rem;
  font-size: var(--кегль-подпись); color: var(--серый);
}
.состояние::before { content: ""; width: .55rem; height: .55rem; border-radius: 2px;
                     background: currentColor; flex: none; margin-top: .35em; }
.состояние--закрыт-чисто   { color: var(--оборот); }
.состояние--закрыт-находки { color: var(--акцент); }
.состояние--не-окончательный { color: var(--вопрос); }
.состояние--не-считался    { color: var(--неизвестно); }
.состояние--данных-нет     { color: var(--неизвестно); }
.состояние--контроль-не-пройден { color: var(--потеря); }
.пусто.чисто { border-style: solid; border-color: var(--оборот); }
/* Результат действия виден там, где действие сделано. */
.строка.чисто-принято { border-color: var(--оборот); border-left-width: 4px; }

/* ── 9. Кнопки, чипы, формы ─────────────────────────────────────────────── */
/* 44 px — требование ПАЛЬЦА (ТЗ §5.5), и оно про телефон. На десктопе такая кнопка
   выглядит грузной и наползает на соседний текст — названо в бою 09.09. Мышь целится
   точнее пальца, поэтому там высота меньше, а отступ сверху обязателен: кнопка внутри
   карточки шла впритык к строке над собой. */
/* БЕЛОЙ КНОПКИ НА БЕЛОМ НЕТ (слово Игоря 01.10.2026: «все кнопки должны быть цветными»).
   Обычная кнопка — заливка подложки бренда с рамкой и текстом акцента; главная — сплошной
   акцент; тихая — та же подложка, только меньше. Кнопка читается кнопкой по цвету, а не
   по тонкой серой рамке, которую на телефоне не видно. */
a.кнопка, button, input[type="submit"] {
  font: inherit; font-weight: 500; padding: .45rem .9rem; min-height: 38px;
  margin-top: .6rem; border: 1px solid var(--акцент); border-radius: 8px;
  background: var(--подложка); color: var(--акцент);
  text-decoration: none; cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center;
}
a.кнопка:hover, button:hover, input[type="submit"]:hover { filter: brightness(.95); }
a.кнопка.главная, button.главная, button.основная, input[type="submit"] {
  background: var(--акцент); border-color: var(--акцент); color: var(--бумага);
}
button.тихо    { border-color: transparent; background: var(--подложка); color: var(--акцент);
                 min-height: auto; padding: .2rem .5rem; }
button.исход   { margin: .2rem .3rem .2rem 0; }
@media (max-width: 48rem) {

  a.кнопка, button, input[type="submit"] { min-height: var(--палец); }}

.кнопки { display: flex; gap: .6rem; flex-wrap: wrap; margin: 1rem 0; }

/* Галочка согласия: квадрат слева, текст рядом и в нормальном регистре. Без этого
   `label` был блочным, чекбокс уезжал на свою строку, а строки липли друг к другу. */
label.галочка { display: flex; align-items: flex-start; gap: .5rem; margin-top: .5rem;
                font-size: var(--кегль-мелкий); color: var(--чернила);
                text-transform: none; letter-spacing: 0; }
label.галочка input { margin: .15rem 0 0; flex: none; }
.строка form, .карточка form { margin-top: .8rem; }
.кнопки--разметка { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
@media (min-width: 48rem) {
 .кнопки--разметка { grid-template-columns: repeat(3, max-content); }}


label { display: block; font-size: var(--кегль-подпись); color: var(--серый); margin-top: .9rem; }
input, select, textarea {
  font: inherit; padding: .5rem .6rem; border: 1px solid var(--линия);
  border-radius: 8px; background: var(--бумага); color: var(--чернила);
}
/* ПОЛЕ ВСТАЁТ ПОД СВОЕЙ ПОДПИСЬЮ, А НЕ РЯДОМ С НЕЙ. Формы кабинета написаны как
   `<label>Имя <input></label>`: подпись и поле лежат в одном элементе, и пока поле
   было `inline`, они делили строку — на боевом это читалось «Имя[igor.nam...]», а
   кнопка под ними казалась наползающей. Ширина ограничена: поле во всю колонку на
   десктопе обещает длинный ввод там, где ждут двадцать знаков. */
label > input:not([type="checkbox"]):not([type="radio"]),
label > select, label > textarea {
  display: block; width: 100%; max-width: 24rem; margin-top: .25rem;
}
label.галочка > input { display: inline-block; width: auto; max-width: none; }
input[type="checkbox"], input[type="radio"] { width: auto; min-height: auto; margin-top: 0; }

.отказ { border: 1px solid var(--потеря); color: var(--потеря); border-radius: 8px;
         padding: .6rem .8rem; margin: .8rem 0; font-size: var(--кегль-мелкий); }

/* ── 10. Таблица и её мобильная форма ───────────────────────────────────── */
table { width: 100%; border-collapse: collapse; }
td, th { text-align: left; padding: .45rem .4rem; border-bottom: 1px solid var(--линия);
         font-size: var(--кегль-мелкий); vertical-align: top; }
th { font-weight: 600; color: var(--серый); font-size: var(--кегль-подпись);
     text-transform: uppercase; letter-spacing: .04em; }

dl.величины { margin: 0; }
dl.величины dt { margin-top: .8rem; color: var(--серый); font-size: var(--кегль-подпись); }
dl.величины dd { margin: .1rem 0 0; }

ul.области { list-style: none; padding: 0; margin: .5rem 0; }
ul.области li { border-bottom: 1px solid var(--линия); padding: .4rem 0; }

/* ── 13а. Витрина: значки областей, живой фрагмент листа, пакеты (ТЗ §3.1, Д-4) ──
   Значок берёт цвет у текста и стоит РЯДОМ с именем области, а не вместо него:
   носитель смысла — слово, значок только помогает найти строку глазами. */
.область-строка { display: flex; align-items: center; gap: .6rem; }
.область-строка .значок { width: 1.25rem; height: 1.25rem; flex: none; color: var(--акцент); }

/* Живой фрагмент листа дня из демо. Рамка та же, что у карточки кабинета: посетитель
   видит продукт, а не его пересказ версткой витрины. */
.фрагмент { margin: 1rem 0; }
.фрагмент > .строка:last-of-type { border-style: dashed; }



/* ── 13б. Витрина ред. 5 (ТЗ §10.2, Г-5) ── */
/* Не «во всю ширину окна»: calc(50% - 50vw) растянул живую витрину вбок (24.09). */
body.витрина .герой { background: var(--подложка); border-radius: 24px;
                      margin: 1rem 0; padding: 1.5rem;
                      display: grid; gap: 1.5rem; align-items: center; }
body.витрина .герой h1 { font-size: var(--кегль-экран); line-height: 1.12; margin-top: 0; }
body.витрина .герой .фрагмент { margin: 0; border: 0; border-radius: 18px; }
@media (min-width: 56rem) {
  body.витрина .герой--с-фрагментом { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  body.витрина .герой {
                        padding: 2.5rem; }
  body.витрина .герой h1 { font-size: var(--кегль-крупно); }}

ul.области-витрины { list-style: none; padding: 0; margin: .8rem 0; display: grid;
                     gap: var(--шаг); grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
.область-витрины { border: 1px solid var(--линия); border-radius: 16px; background: var(--бумага);
                   padding: .9rem; display: flex; flex-direction: column; gap: .6rem;
                   font-weight: 600; }
.область-витрины .значок { width: 2.4rem; height: 2.4rem; padding: .45rem; border-radius: 12px;
                           background: var(--подложка); color: var(--акцент); }

.читатели { display: grid; gap: var(--шаг); margin: .8rem 0;
            grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.читатель { border-radius: 16px; padding: 1rem; border-top: 4px solid var(--линия);
            background: var(--бумага); }
.читатель strong { display: block; margin-bottom: .3rem; font-size: var(--кегль-текст); }
.читатель--вопрос { border-top-color: var(--вопрос); background: var(--вопрос-фон); }
.читатель--оценка { border-top-color: var(--оценка); background: var(--оценка-фон); }
.читатель--акцент { border-top-color: var(--акцент); background: var(--подложка); }

/* ── 13в. Главная ред. 6 (29.09.2026, прототип Глеба): строка доверия, случай, призыв ── */
.hero-eyebrow { color: var(--акцент); font-size: var(--кегль-мелкий); font-weight: 600;
                letter-spacing: .02em; margin: 0 0 .5rem; }
.report-head { margin: 0 0 .4rem; font-size: var(--кегль-мелкий); }
ul.trust-strip { list-style: none; padding: 0; margin: 1rem 0 1.5rem; display: grid;
                 gap: var(--шаг); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
ul.trust-strip li { border-left: 3px solid var(--акцент); padding: .35rem .75rem;
                    font-size: var(--кегль-мелкий); font-weight: 600; }
.cta-band { background: var(--подложка); border-radius: 24px; padding: 1.5rem; margin: 2rem 0 1rem;
            text-align: center; }
.cta-band h2 { margin-top: 0; font-size: var(--кегль-экран); }
.cta-band .кнопки { justify-content: center; }

/* ── 13г. Страницы витрины в стилистике главной (29.09.2026, слово Игоря) ──
   Шапка страницы на подложке, смысл — карточками, шаги — номерами, внизу — полоса призыва.
   Один дом частей — `templates/storefront/parts.html`. */
.page-hero { background: var(--подложка); border-radius: 24px; padding: 1.5rem; margin: 1rem 0 1.5rem; }
.page-hero h1 { font-size: var(--кегль-экран); line-height: 1.15; margin: 0 0 .5rem; }
.page-hero .лид { margin: 0; max-width: 46rem; }
@media (min-width: 56rem) {
  .page-hero { padding: 2.5rem; }
  .page-hero h1 { font-size: var(--кегль-крупно); }}

/* ── 13д. Витрина в фирменном стиле (М-845 этап 2, макет 09.10, Р-09.10-1) ──
   Первый экран, шапки страниц и полоса призыва — на глубоком зелёном с белым текстом;
   главное действие — сигнальным цветом, второе — белой кнопкой. Фрагмент отчёта в
   первом экране остаётся белой карточкой: это «как выглядит лист», а не оформление. */
body.витрина .герой, .page-hero, .cta-band { background: var(--акцент); color: var(--бумага); }
body.витрина .герой h1, .page-hero h1, .cta-band h2 { color: var(--бумага); }
body.витрина .герой-текст .тихо, .page-hero .лид, .cta-band p { color: var(--бумага); opacity: .9; }
body.витрина .герой .фрагмент { color: var(--чернила); }
.hero-eyebrow { color: var(--бумага); display: inline-flex; align-items: center; gap: .5rem; }
.hero-eyebrow::before { content: ""; width: 1.6rem; height: 4px; border-radius: 2px; background: var(--signal); }
body.витрина .герой a.кнопка.главная, .cta-band a.кнопка.главная, .page-hero a.кнопка.главная {
  background: var(--signal-text); border-color: var(--signal-text); color: var(--бумага); }
body.витрина .герой-текст a.кнопка:not(.главная), .cta-band a.кнопка:not(.главная),
.page-hero a.кнопка:not(.главная) { background: var(--бумага); border-color: var(--бумага); color: var(--акцент); }
ul.trust-strip li { border-left-color: var(--signal); }
/* Макет витрины: шапка и первый экран — ОДНА зелёная полоса во всю ширину окна (тень
   тянет фон за колонку, `clip-path` режет её по высоте); ссылки шапки белые. */
body.витрина header { border-bottom: 0; background: var(--акцент);
  box-shadow: 0 0 0 100vmax var(--акцент); clip-path: inset(0 -100vmax); padding-bottom: .9rem; }
body.витрина header .лого, body.витрина header nav.меню a, body.витрина header .человек a { color: var(--бумага); }
body.витрина header .человек a { font-weight: 700; }
body.витрина header .языки { border-color: rgba(255,255,255,.35); }
body.витрина header .языки a { color: var(--бумага); }
body.витрина header .языки a + a { border-left-color: rgba(255,255,255,.35); }
body.витрина header .языки a.активен { background: var(--бумага); color: var(--акцент); }
body.витрина .герой, body.витрина .page-hero { border-radius: 0; margin-top: 0;
  box-shadow: 0 0 0 100vmax var(--акцент); clip-path: inset(0 -100vmax); }
body.витрина .герой-текст a.кнопка:not(.главная), .page-hero a.кнопка:not(.главная) {
  background: transparent; color: var(--бумага); border-color: rgba(255,255,255,.7); }
body.витрина nav.меню a.активна { border-bottom-color: var(--signal); }

.card-grid { display: grid; gap: 1rem; margin: 1rem 0;
             grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.info-card { border: 1px solid var(--линия); border-radius: 18px; background: var(--бумага);
             padding: 1.25rem; margin: 1rem 0; }
.card-grid > .info-card { margin: 0; }
.info-card h2 { margin-top: 0; }
.info-card > :last-child { margin-bottom: 0; }
.info-card--accent { background: var(--подложка); border-color: transparent; }
.step-grid { display: grid; gap: 1rem; margin: 1rem 0 1.5rem;
             grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.step-card { border: 1px solid var(--линия); border-radius: 18px; background: var(--бумага);
             padding: 1.25rem; display: flex; flex-direction: column; gap: .5rem; }
.step-card h3 { margin: .25rem 0 0; font-size: var(--кегль-текст); }
.step-card p { margin: 0; }
.step-number { width: 2.4rem; height: 2.4rem; border-radius: 50%; display: inline-flex;
               align-items: center; justify-content: center; background: var(--подложка);
               color: var(--акцент); font-weight: 600; }
a.doc-card { border: 1px solid var(--линия); border-radius: 18px; background: var(--бумага);
             padding: 1.25rem; display: flex; flex-direction: column; gap: .4rem;
             color: var(--чернила); text-decoration: none; }
a.doc-card:hover { border-color: var(--акцент); }
body.витрина ul.area-tiles { display: grid; gap: var(--шаг);
                             grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
body.витрина ul.area-tiles li { border: 1px solid var(--линия); border-radius: 16px;
                                background: var(--бумага); padding: .9rem; font-weight: 600; }
ul.service-cards { list-style: none; padding: 0; display: grid; gap: .6rem; }
ul.service-cards > li { border: 1px solid var(--линия); border-radius: 14px; background: var(--бумага);
                        padding: .9rem 1rem; }
form.form-card { border: 1px solid var(--линия); border-radius: 18px; background: var(--бумага);
                 padding: 1.25rem; max-width: 40rem; }
.reading-card { border: 1px solid var(--линия); border-radius: 18px; background: var(--бумага);
                padding: 1.5rem; max-width: 48rem; }

.две-колонки { display: grid; gap: 1.5rem; }
@media (min-width: 48rem) {
  .две-колонки { grid-template-columns: repeat(2, minmax(0, 1fr)); }}

/* Пакеты — равными карточками; рамки «выбрано» нет ни у одного (24.09). */
.пакеты-сетка { display: grid; gap: var(--шаг); margin: .8rem 0;
                grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.пакет-карточка { border: 1px solid var(--линия); border-radius: 18px; background: var(--бумага);
                  padding: 1.1rem; display: flex; flex-direction: column; gap: .4rem; }
.пакет-карточка h3 { margin: 0; }
.пакет-карточка p { margin: 0; }
.пакет-состав { flex: 1; }
.цена-крупно { font-size: var(--кегль-экран); font-weight: 600; white-space: nowrap; }
a.кнопка.во-всю-ширину { width: 100%; min-height: var(--палец); font-weight: 600; }

/* ── 13в. Строка находки ред. 5 (Г-4) — карточкой; общая для кабинета и витрины ── */
.находка { border: 1px solid var(--линия); border-radius: 16px; background: var(--бумага);
           padding: .9rem 1rem; margin: .7rem 0; display: flex; flex-direction: column;
           gap: .5rem; }
.находка-шапка { display: flex; align-items: center; justify-content: space-between;
                 gap: .5rem; color: var(--серый); font-size: var(--кегль-подпись); }
.находка-область { display: inline-flex; align-items: center; gap: .45rem; }
.находка-область .значок { width: 1.6rem; height: 1.6rem; padding: .3rem;
                           border-radius: 50%; background: var(--подложка);
                           color: var(--акцент); }
.находка-текст { font-size: var(--кегль-текст); font-weight: 600; line-height: 1.35; }
.находка-текст a { color: var(--чернила); text-decoration: none; }
.находка-деньги { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.находка-деньги .деньги { font-size: var(--кегль-вердикт); font-weight: 600; }
.находка-низ { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
               color: var(--серый); font-size: var(--кегль-подпись); }
.пипсы { display: inline-flex; gap: 3px; }
.пипсы span { width: .85rem; height: .35rem; border-radius: 3px; background: var(--линия); }
.пипсы span.нет { background: var(--линия); }
.пипсы span.да { background: var(--акцент); }
.пипсы--давно span.да { background: var(--вопрос); }
.метка.высокий, .метка.средний, .метка.низкий { border: 0; font-weight: 600;
                                                text-transform: uppercase; letter-spacing: .04em; }
.метка.высокий { background: var(--потеря-фон); }
.метка.средний { background: var(--вопрос-фон); color: var(--вопрос); }
.метка.низкий  { background: var(--неизвестно-фон); color: var(--неизвестно); }


ul.перечень-услуг { list-style: none; padding: 0; margin: .6rem 0; }
ul.перечень-услуг li { border-bottom: 1px solid var(--линия); padding: .5rem 0; }
.пузырь.ответ { margin-right: auto; }
.пузырь .подпись { display: block; }
.пузырь .метка { margin-top: .4rem; }
.человек-шапка .значок { width: 1.1rem; height: 1.1rem; flex: none;
                         color: var(--серый); align-self: center; }
.ось { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.ось > .подпись { flex: 0 0 5.5rem; }
.ось > .чипы { margin: 0; flex: 1 1 12rem; }
.ось .чип { font-size: var(--кегль-подпись); }
details.доступ { margin: .6rem 0 0; }
details.доступ > summary { cursor: pointer; color: var(--акцент);
                           font-size: var(--кегль-мелкий); }
details.доступ fieldset { border: 1px solid var(--линия);
                          border-radius: var(--скругление); margin: .6rem 0; }
@media (max-width: 30rem) {

  .ось { display: block; }
  .ось > .подпись { display: block; }}


/* ── 10д. Тариф: карточка пакета и счета списком — §4.6, Д-5; довод — `subscription.html`. */
.карточка.пакет { border-color: var(--акцент); }
ul.счета { list-style: none; padding: 0; margin: .6rem 0; display: grid; gap: .5rem; }
ul.счета > li { border-bottom: 1px solid var(--линия); padding: .4rem 0; }
ul.счета > li.карточка { border: 1px solid var(--линия);
                         border-radius: var(--скругление); padding: .6rem .8rem; }

/* ── 11. Аккордеон «Происхождение числа» ────────────────────────────────── */
details.происхождение { margin: .8rem 0 0; }
/* НЕ `display: flex`. Снимок 360 px от 09.09 (Д-1) поймал: у свёрнутого блока пропал
   треугольник раскрытия — `flex` снимает маркер `summary`, и «Происхождение числа»
   выглядело подписью, а «Висит давно» — пустой карточкой. Аккордеон, не показывающий,
   что он аккордеон, прячет содержимое ровно так же, как его отсутствие. `list-item`
   маркер возвращает; высота пальца держится `min-height` и отступами. */
details.происхождение summary { cursor: pointer; color: var(--акцент);
                                font-size: var(--кегль-мелкий); min-height: var(--палец);
                                display: list-item; padding: .5rem 0; }
details.происхождение[open] summary { margin-bottom: .4rem; }
.зона > h2 .час { font-weight: 400; font-size: var(--кегль-подпись); color: var(--серый); }
.плитка .подпись { display: block; }
.плитка .значение { font-size: var(--кегль-вердикт); font-weight: 600; }

/* Лист дня на десктопе: якоря слева липко, содержимое справа (ТЗ §4.3). */
@media (min-width: 64rem) {

  .лист { display: grid; grid-template-columns: 14rem 1fr; gap: 2rem; align-items: start; }
  .лист > .якоря { position: sticky; top: 1rem; }
  .лист > .якоря .чипы { flex-direction: column; align-items: flex-start; }}


/* ── 15. Графики — серверный SVG, Р-07.09-7 ────────────────────────────────
   JS-библиотек нет. Значения печатаются текстом рядом с картинкой, поэтому
   ни hover, ни подсказок здесь нет и быть не должно: то, что видно мышью,
   не видно на бумаге и не читается скринридером (ТЗ §5.6 и §7 п.7). */
svg.график { display: block; width: 100%; height: auto; max-width: 100%; }
svg.график text { font-family: var(--шрифт); font-size: 11px; fill: var(--серый); }
.график--потеря { color: var(--потеря); }
.график--вопрос { color: var(--вопрос); }
.график--оценка { color: var(--оценка); }
.график--оборот { color: var(--оборот); }
.график--неизвестно { color: var(--неизвестно); }
.график--акцент { color: var(--акцент); }
/* Ось и разлиновка картинки — та же линия, что у границ карточек: у графика
   нет своей палитры, он берёт роли общей (Д-3, 09.09.2026). */
.график--линия { color: var(--линия); }
.заливка { fill: currentColor; }
/* Кольцо и пончик несут stroke-width атрибутом (PDF без CSS) — класс его не бьёт. */
.обводка { fill: none; stroke: currentColor; }
.обводка:not([stroke-width]) { stroke-width: 1.5; }
.график--чернила { color: var(--чернила); }
svg.график text.клетка-число { fill: var(--бумага); font-size: 11px; }
svg.график text.клетка-пустая { fill: var(--серый); font-size: 11px; }
svg.график text.фигура-число { font-size: 30px; font-weight: 600; fill: var(--чернила); }

/* ── 15а. Знак и линейные иконки ──────────────────────────────────────────
   Ни одного #-цвета в шаблонах: цвет знака и иконок приходит из токенов через
   CSS, а не литералом в атрибуте `fill`. Литерал в разметке — второй дом цвета,
   и первая же смена акцента применилась бы везде, кроме логотипа. */
.знак { color: var(--акцент); }
/* Знак AyanBI (Р-09.10-1): кольцо и нижняя черта — акцент, верхняя сдвинутая черта —
   сигнал. Файлы знака для всего вне кабинета — static/brand/. */
.знак .mark-ring, .знак .mark-bar, .знак .mark-signal { fill: none; stroke-linecap: round; }
.знак .mark-ring { stroke: currentColor; stroke-width: 9; }
.знак .mark-bar { stroke: currentColor; stroke-width: 11; }
.знак .mark-signal { stroke: var(--signal); stroke-width: 11; }
.значок { fill: none; stroke: currentColor; stroke-width: 2;
          stroke-linecap: round; stroke-linejoin: round; }
.pwa-баннер .шаг { flex: 1 1 12rem; max-width: 16rem; }
.pwa-баннер .шаг .подпись { display: block; margin-top: .25rem; text-transform: none;
                           letter-spacing: 0; font-size: var(--кегль-мелкий); color: var(--чернила); }
svg.рисунок .линия { fill: none; stroke: var(--линия); stroke-width: 2;
                     stroke-linecap: round; }

/* ── 17. Движение — ТЗ §5.8 ─────────────────────────────────────────────── */
.плашка, details.происхождение, .pwa-баннер { transition: opacity 150ms, transform 150ms; }
@media (prefers-reduced-motion: reduce) {

  * { transition: none !important; animation: none !important; }}


/* ── 18. Печать: экран и PDF — один автор ───────────────────────────────── */
@media print {
  body { background: var(--бумага); font-size: 11pt; }
  header nav, details.бургер, .панель-низ, .кнопки, .чипы, .pwa-баннер { display: none !important; }
  .строка, .карточка, .плитка { break-inside: avoid; page-break-inside: avoid; }
  details, details.свёртка { display: block; }
  details > *:not(summary) { display: block !important; }
  a { color: var(--чернила); text-decoration: none; }
}
/* ДЕМО: НЕАКТИВНАЯ КНОПКА И ПОДСКАЗКА ПО НАЖАТИЮ (01.10.2026, слово Игоря). Кнопка не
   `disabled`: такая молчит на нажатие, и посетитель не понимает, почему ничего не
   происходит. Она приглушена и по нажатию объясняет, что сделать сначала. */
button.неактивна { opacity: .45; cursor: not-allowed; }
.подсказка-фон { position: fixed; inset: 0; background: rgba(26, 26, 26, .45);
  display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 50; }
.подсказка-окно { background: var(--бумага); color: var(--чернила); max-width: 420px;
  width: 100%; border-radius: 12px; padding: 20px; box-shadow: 0 8px 32px rgba(0, 0, 0, .2); }
.подсказка-окно p { margin: 0 0 16px; line-height: 1.45; }

/* Video guide on the guide screen (02.10.2026). */
.guide-video { width: 100%; max-width: 960px; border-radius: 12px; background: var(--чернила); }

/* «14 дней бесплатно» — первым в первом экране витрины (ред. 8 прайса, 10.10.2026). */
.hero-free { display: table; margin: 0 0 .9rem; padding: .35rem .9rem; border-radius: 999px;
  background: var(--signal-text); color: var(--бумага); font-weight: 700; font-size: var(--кегль-текст); }
/* Знак в зелёной шапке витрины — в инверсии: кольцо и нижняя черта белые. */
body.витрина header .знак { color: var(--бумага); }
body.витрина header .лого svg { width: 1.6rem; height: 1.6rem; }
/* Витрина ред. 7 (#70): «чего не видно в отчётах» — список-якорь, «отработка» — четыре шага. */
.unseen, .loop { margin: 2rem 0; }
ul.unseen-list { list-style: none; padding: 0; display: grid; gap: .5rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
ul.unseen-list li { background: var(--бумага); border: 1px solid var(--линия); border-left: 3px solid var(--signal);
  border-radius: var(--скругление-мелкое); padding: .6rem .8rem; }
ol.loop-steps { list-style: none; counter-reset: loop; padding: 0; display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
ol.loop-steps li { counter-increment: loop; background: var(--подложка); border-radius: var(--скругление);
  padding: .8rem .9rem; }
ol.loop-steps li::before { content: counter(loop); display: inline-grid; place-items: center; width: 1.6rem;
  height: 1.6rem; margin-right: .4rem; border-radius: 999px; background: var(--акцент); color: var(--бумага);
  font-weight: 700; }
ol.loop-steps li strong { display: block; margin: .3rem 0 .2rem; }
/* Подхук первого экрана (#70): «Не за месяц — вчера…» — крупнее лида, на зелёном. */
body.витрина .герой-текст .hero-sub { font-size: 1.15rem; font-weight: 600; color: var(--бумага); margin: .2rem 0 .8rem; }
/* Подписи ступеней воронки задач (#67): крупнее общих 11px — картинка на телефоне ужимается. */
svg.график text.funnel-label { font-size: 17px; fill: var(--чернила); }
/* «Как отрабатывается повод» (#67): кадры кабинета полосой, листается вбок внутри себя. */
.walkthrough { margin: 2rem 0; }
.walkthrough-strip { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .6rem; }
.walkthrough-frame { flex: 0 0 92%; margin: 0; scroll-snap-align: start; background: var(--бумага);
  border: 1px solid var(--линия); border-radius: var(--скругление); padding: .6rem; display: grid; gap: .5rem; align-content: start; }
.walkthrough-frame--phone { flex-basis: min(16rem, 60%); }
.walkthrough-frame img { width: 100%; height: auto; border-radius: var(--скругление-мелкое); display: block; }
.walkthrough-frame figcaption { font-size: var(--кегль-мелкий); line-height: 1.4; }
.walkthrough-n { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 999px;
  background: var(--акцент); color: var(--бумага); font-weight: 700; margin-right: .3rem; }