/*
 * ОФОРМЛЕНИЕ «СМЕСЕЙ» — экраны Смесей поверх оболочки ядра Farn (SMS-21 → SMS-77 → SMS-79).
 * Каркас (панель, шапка, тело, три темы) — у ядра: farn/obolochka/obolochka.css.
 *
 * ⭐ НАЧИНКА — У ЯДРА (SMS-79, 03.10; ядро 45, FRN-68): карточка · показатель · фильтр и чипы ·
 *    поле и форма · кнопки · статус-«таблетка» · таблица · пустое · лист печати — классы `f-n-*`
 *    и `f-tablica` блока НАЧИНКА obolochka.css. Своих правил начинки здесь НОЛЬ, это считает
 *    страж ядра (`python3 -m farn.obolochka templates static`: «свой класс начинки вне ядра 0 · мест 0»)
 *    и тест `sklad/tests_oformlenie.py`. Здесь — только то, чего у ядра нет: заголовки страницы,
 *    сообщения, страница «Как работает система» (схемы, шаги, показ слайдами), диалог действий.
 * ⛔ ШРИФТ — ТОЛЬКО ЯДРА (SMS-78 влит в SMS-79): имя шрифта — `var(--f-*)`, размер — ступенью
 *    `--fs-*` шкалы Ш-5. Размеров в px в файле ноль (страж: «шрифт литералом 0 · вне шкалы 0»).
 *    Решения Bob 03.10 14:2x: Р2 — слайды по шкале (≈ 28 px вместо 44 и 56), Р3 — px → ступень,
 *    Р4 — адрес экрана `var(--f-mono)`.
 *
 * ⛔ ЦВЕТА — ТОЛЬКО var(--…) ЯДРА (SMS-77, 02.10; так же, как ЭКК WSMK-252):
 *    --bg · --card · --tx · --mu · --acc · --acc2 · --ln, статусы 04 --st-*
 *    и для схем — тёмная колонка ядра --t-*. Производный цвет — color-mix из них, вписанного
 *    шестнадцатеричного цвета в файле НОЛЬ (и в комментариях: страж FRN-48 их не различает).
 *    Таблица «цвет Смесей → цвет ядра» — «smesi/ШАГИ — SMS-77 цвета и ядро 43 (02.10).md» §1.
 * ⭐ Контраст текста ≥ 4,5:1 в обеих колонках ядра (гайд §4.4) считает тест формулой WCAG по
 *    этому файлу и палитре ядра (sklad/tests_oformlenie.py), а не на глаз.
 * В шаблонах экранов прямых цветов — ноль, это проверяется тестом (гайд §4.1).
 */

:root {
    /* акцент (бывший синий Смесей) — производные от --acc2 */
    --mb-akcent-svet: color-mix(in srgb, var(--acc2) 12%, var(--card));
    --mb-akcent-tekst: color-mix(in srgb, var(--acc2) 80%, var(--tx));
    --mb-akcent-temn: color-mix(in srgb, var(--acc2) 85%, var(--tx));

    /* ── ЧЕРНИЛА И ЗОЛОТО: палитра СХЕМ. Единственное место, где живут их цвета.
       Схемы рисуются кодом (`obzor/shemy/`), и в самом коде прямых цветов ноль —
       он подставляет эти имена. Поэтому перекрасить все девятнадцать схем можно
       здесь, а тест «прямых цветов на странице 0» остаётся выполнимым.
       Схема намеренно тёмная в любой теме: это иллюстрация, и читатель обязан видеть
       границу между «рассказано» и «нарисовано». Поэтому — тёмная колонка ядра --t-*,
       а не --bg/--tx темы (SMS-77). */
    --mb-shema-fon: var(--t-bg);
    --mb-shema-karta: var(--t-card);
    --mb-shema-karta-2: color-mix(in srgb, var(--t-card) 50%, var(--t-ln));
    --mb-shema-obvodka: var(--t-ln);
    --mb-shema-tekst: var(--t-tx);
    --mb-shema-tekst-2: var(--t-mu);
    --mb-shema-tusklyy: color-mix(in srgb, var(--t-mu) 60%, var(--t-bg));
    --mb-shema-zoloto: var(--t-acc);
    --mb-shema-zoloto-yar: color-mix(in srgb, var(--t-acc) 60%, var(--t-tx));
    --mb-shema-zoloto-temn: color-mix(in srgb, var(--t-acc) 60%, var(--t-bg));
    --mb-shema-stal: var(--t-acc2);
    --mb-shema-terrakota: color-mix(in srgb, var(--st-late) 50%, var(--t-tx));
    --mb-shema-zal-zavod: color-mix(in srgb, var(--t-acc) 10%, var(--t-bg));
    --mb-shema-zal-sistema: color-mix(in srgb, var(--t-acc2) 10%, var(--t-bg));
    --mb-shema-zal-ishod: var(--t-card);
    --mb-shema-zal-net: color-mix(in srgb, var(--st-late) 12%, var(--t-bg));

    --mb-radius-kartochka: 16px;
    --mb-radius-knopka: 12px;
    --mb-radius-chip: 999px;
    --mb-radius-pole: 10px;
    --mb-otstup: 20px;
    --mb-shirina: 1200px;
    --mb-ten: 0 1px 2px rgba(18, 38, 58, .04), 0 8px 24px rgba(18, 38, 58, .06);
}

* { box-sizing: border-box; }

body {
    /* Шрифт, его размер, фон и цвет текста — у ядра (`body.f-telo`, SMS-79).
       ⛔ Ширина 390px без горизонтальной прокрутки (гайд §4.3): у клиента склад и
       продажи — люди с телефоном в руке. Прокручивается ТАБЛИЦА внутри своей
       рамки, а не страница целиком. */
    overflow-x: hidden;
}

a { color: var(--acc2); }
a:hover { color: var(--mb-akcent-temn); }

.mb-obolochka {
    /* ⭐ Ширина ограничена, но центрируется теперь ВНУТРИ правой колонки, а не по
       странице: слева стоит панель модулей, и центрирование по окну уводило бы
       содержимое вправо тем сильнее, чем шире монитор. */
    max-width: var(--mb-shirina);
    margin: 0 auto;
    padding: var(--mb-otstup) 16px 48px;
    flex: 1;
    min-width: 0;
}

/* ─── шапка, боковая панель, «скоро», пометка доступа и бургер ─────────────
   ⭐ SMS-76 з3: всё это — у ядра Farn (выпуск 40, `farn/obolochka/obolochka.css`):
   `f-shapka` · `f-panel` · `f-punkt-skoro` + `f-skoro` · `f-bejdzh` · `f-burger`.
   Своих правил у Смесей нет (правило двух). Кнопки языка и выхода — кнопки ядра. */

.mb-yazyki { display: flex; gap: 4px; }

/* ─── заголовки ─────────────────────────────────────────────────────────── */
.mb-nadzagolovok {
    text-transform: uppercase; font-size: var(--fs-melkiy); letter-spacing: .08em;
    color: var(--acc2); font-weight: 700; margin: 0 0 4px;
}
/* Заголовок СТРАНИЦЫ (h1). Заголовок карточки — `.f-n-kart > h2` ядра (SMS-79, Bob 03.10 «1 — а»). */
.mb-zagolovok { font-size: var(--fs-zag-bolshoy); font-weight: 700; margin: 0 0 4px; }
.mb-podpis { color: var(--mu); margin: 0 0 var(--mb-otstup); }

/* ─── вход (SMS-85, ВН-283 п.9–11) ─────────────────────────────────────────
   Замер 06.10 (WebKit, 1200 px): поле 898 px = форме, карточка 928 px, зазор заголовка до карточки 4 px.
   Колонка входа — 360 px: поле не шире формы, заголовок отделён тем же отступом, что карточки. */
.mb-vhod { max-width: 360px; }
.mb-vhod .mb-zagolovok { margin-bottom: 12px; }

/* ─── карточки подряд ───────────────────────────────────────────────────────
   ⚠ У `f-n-kart` ядра 45 отступа снизу нет (образец FRN-68 ставит его атрибутом style),
   а у Смесей карточки идут столбцом. Отступ — прежний `--mb-otstup`. Находка Контуру:
   отступ между карточками — место ядра (SMS-79 О4). */
.mb-obolochka .f-n-kart { margin-bottom: var(--mb-otstup); }
/* Подзаголовок внутри формы карточки (4 места: ввод долгов, документ, отгрузка ×2) —
   тот же вид, что `.f-n-kart > h2` ядра: у ядра правило только для прямого ребёнка. */
.f-n-kart .f-n-forma > h2 { font: 700 var(--fs-krupnyy)/1.25 var(--f-zag); margin: 6px 0 0; }

/* ─── таблица и текст ───────────────────────────────────────────────────── */
/* ⭐ Витринную вёрстку сайта мы НЕ берём (гайд §0): рабочее место — это плотная
   таблица со строками, а не карусель картинок. Таблица — `f-tablica` ядра. */

/* ─── обзор системы (страница «Как работает система») ───────────────────── */
/* ⭐ Классы живут ЗДЕСЬ, как и всё остальное оформление: в шаблоне обзора
   прямых цветов ноль, это проверяется тем же тестом, что и у остальных экранов. */
.mb-obzor__protsess { margin-bottom: var(--mb-otstup); }
.mb-obzor__nomer {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: var(--mb-radius-chip);
    background: var(--acc2); color: var(--card);
    font-weight: 700; font-size: var(--fs-tekst); margin-right: 8px;
}
.mb-obzor__imya { font-size: var(--fs-zag); font-weight: 700; margin: 0 0 2px; }
.mb-obzor__modul { color: var(--mu); font-size: var(--fs-sluzh); margin: 0 0 12px; }
.mb-obzor__grani { display: grid; gap: 14px; }
.mb-obzor__gran { border-left: 3px solid var(--ln); padding-left: 12px; }
.mb-obzor__gran--zavod { border-left-color: var(--mu); }
.mb-obzor__gran--sistema { border-left-color: var(--acc2); }
.mb-obzor__gran--ishod { border-left-color: var(--st-done); }
.mb-obzor__gran--net { border-left-color: var(--st-wait); }
.mb-obzor__zaglavie {
    text-transform: uppercase; font-size: var(--fs-melkiy); letter-spacing: .08em;
    font-weight: 700; color: var(--mu); margin: 0 0 4px;
}
.mb-obzor__spisok { margin: 6px 0 0; padding-left: 18px; }
.mb-obzor__spisok li { margin-bottom: 6px; }
.mb-obzor__vnimanie {
    background: var(--mb-akcent-svet); border-radius: var(--mb-radius-pole);
    padding: 10px 12px; margin-top: 10px;
}
.mb-obzor__reshenie { border: 2px solid var(--acc2); }
.mb-obzor__reshenie-vopros { margin: 6px 0 12px; }
.mb-obzor__otvet-est {
    background: var(--mb-akcent-svet); border-radius: var(--mb-radius-pole);
    padding: 10px 12px; margin-bottom: 10px;
}

@media (max-width: 720px) {
    .mb-zagolovok { font-size: var(--fs-zag); }
    .mb-obolochka { max-width: none; }
}

/* ─── печатная ведомость инвентаризации (SMS-12) ───────────────────────────
   Лист — `f-n-list` ядра (SMS-79). ⛔ Печать делает БРАУЗЕР, а не наш код: ни iframe
   (в Readdle/WKWebView `srcdoc` не рисуется вовсе), ни скрипта. Всё, что нужно, —
   убрать с листа то, чего на бумаге не бывает: шапку, панель модулей и кнопки. */
.mb-pechat-tolko { display: none; }

/* ═══ СХЕМЫ И ШАГИ (страница «Как работает система») ═════════════════════════ */
/* Схема — рисунок в тексте, а не украшение: у неё своя рамка и своя подпись. */
.mb-shema {
    margin: 16px 0 0; padding: 12px;
    background: var(--mb-shema-fon);
    border-radius: var(--mb-radius-kartochka);
    overflow-x: auto;
}
.mb-shema svg { display: block; min-width: 720px; }
.mb-shema__podpis {
    margin-top: 10px; font-size: var(--fs-melkiy); letter-spacing: .08em;
    text-transform: uppercase; color: var(--mb-shema-tekst-2);
}
.mb-obzor__ustroystvo { margin-bottom: var(--mb-otstup); }

/* Шаги и развилки приложения — под своим процессом. Таблица — `f-tablica` ядра. */
.mb-shagi { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--ln); }
.mb-shagi__nomer { white-space: nowrap; color: var(--mu); }
/* Адрес экрана — текстом: это адрес, а не ссылка (часть шагов работает только формой,
   и ссылка на них выглядела бы рабочей, не будучи ею). Шрифт — моноширинный ЯДРА
   (Р4: в ядре 45 это шрифт Дел — своего имени шрифта у Смесей нет). */
.mb-shagi__adres {
    font-family: var(--f-mono);
    font-size: var(--fs-melkiy); white-space: nowrap;
}
.mb-shagi__razvilki li { margin-bottom: 8px; }

/* ═══ ПОКАЗ СЛАЙДАМИ (SMS-55) ════════════════════════════════════════════════
   Режим НАДСТРАИВАЕТСЯ над страницей, а не заменяет её: без класса на <body>
   всё ниже не значит ничего, и страница остаётся ровно сегодняшней. Классы
   ставит скрипт страницы; `base.html` не тронут ни одной строкой.
   ⭐ Р2 (Bob 03.10): заголовок и число слайда — по шкале ядра, ступень
   `--fs-zag-bolshoy` (≈ 28 px; было 44 и 56): ступени выше в шкале нет. */

/* Пульт показа спрятан, пока скрипт не отозвался: кнопка, которая ничего не
   делает, хуже отсутствующей. */
.mb-rezhim {
    display: none; gap: 8px; flex-wrap: wrap; align-items: center;
    margin-bottom: var(--mb-otstup);
}
.mb-est-skript .mb-rezhim { display: flex; }
.mb-rezhim__razdel { width: 1px; height: 20px; background: var(--ln); }
.mb-slaydy .mb-rezhim {
    position: fixed; top: 10px; right: 12px; z-index: 30; margin: 0;
    padding: 6px; background: var(--card);
    border: 1px solid var(--ln);
    border-radius: var(--mb-radius-knopka); box-shadow: var(--mb-ten);
}

/* Обычный режим: обёртка слайда не меняет НИЧЕГО. */
.mb-slaydy { background: var(--bg); }
/* ⚠ SMS-76 з3: шапка, панель и бургер — ядра (`f-*`). Печать ядро с выпуска 41 прячет
   само, а режима слайдов у ядра нет — поэтому правило слайдов остаётся здесь (з4). */
.mb-slaydy .f-shapka, .mb-slaydy .f-panel, .mb-slaydy .f-burger,
.mb-slaydy .mb-obolochka > .f-n-soob { display: none; }
.mb-slaydy .mb-obolochka { max-width: none; padding: 56px 24px 96px; }
.mb-slaydy .mb-slayd { display: none; }
.mb-slaydy .mb-slayd--tekushchiy {
    display: block; max-width: var(--mb-shirina); margin: 0 auto;
    /* Один экран — одна мысль. Не влезло — прокручивается САМА карточка, а не
       страница: счётчик и стрелки обязаны остаться на месте. */
    max-height: calc(100vh - 152px); overflow-y: auto;
}
/* Черта перед именем раздела — приём снятого образца подачи. */
.mb-slaydy .mb-slayd--tekushchiy h2::before {
    content: ""; display: block; width: 56px; height: 3px;
    background: var(--acc); margin-bottom: 10px;
}
.mb-slaydy .mb-shema svg { min-width: 0; width: 100%; }

/* Нижняя панель и оглавление существуют только со скриптом: он их и строит. */
.mb-navigatsiya {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    display: none; gap: 10px; justify-content: center; align-items: center;
    padding: 10px; background: var(--card);
    border-top: 1px solid var(--ln);
}
.mb-slaydy .mb-navigatsiya { display: flex; }
.mb-navigatsiya__schetchik { min-width: 120px; }
.mb-oglavlenie {
    position: fixed; left: 50%; transform: translateX(-50%); bottom: 64px;
    z-index: 31; display: flex; flex-direction: column; gap: 4px;
    max-width: 92vw; max-height: 60vh; overflow-y: auto; padding: 10px;
    background: var(--card); border: 1px solid var(--ln);
    border-radius: var(--mb-radius-kartochka); box-shadow: var(--mb-ten);
}
.mb-oglavlenie[hidden] { display: none; }
.mb-oglavlenie__punkt {
    text-align: left; border: 0; background: none; color: var(--tx);
    font: inherit; padding: 6px 8px; cursor: pointer;
    border-radius: var(--mb-radius-pole);
}
.mb-oglavlenie__punkt:hover { background: var(--mb-akcent-svet); }

/* «Коротко» прячет ЛИСТЫ ПРИЛОЖЕНИЯ — и только их. */
.mb-kratko .mb-tolko-podrobno { display: none; }

@media (max-width: 720px) {
    .mb-slaydy .mb-obolochka { padding: 56px 12px 96px; }
    /* на узком экране заголовок страницы — ступень `--fs-zag`, а слайд держит крупную */
    .mb-slaydy .mb-zagolovok { font-size: var(--fs-zag-bolshoy); }
    .mb-slaydy .mb-slayd--tekushchiy { max-height: calc(100vh - 168px); }
}

@media print {
    /* Шапку, панель и бургер ядра (`f-*`) прячет при печати само ядро (выпуск 41, FRN-59);
       здесь — только своё (SMS-76 з4).
       ⭐ Р1 (Bob 03.10 «а — прятать всегда»): кнопки ядра `f-n-kn` на бумагу не идут — как
       прежде `.mb-knopka`. Ядро 45 кнопки при печати не прячет; находка Контуру: место — ядро. */
    .mb-bez-pechati, .f-n-kn, .mb-obolochka > .f-n-soob { display: none !important; }
    .f-glavnoe { padding: 0; }
    .mb-pechat-tolko { display: block; }
    .mb-obolochka { max-width: none; padding: 0; }
    .f-n-kart { border: 0; padding: 0; }
    .f-n-prokrutka { overflow-x: visible; }
    /* SMS-85 / SMS-83: широкая таблица «Остатки» — альбомный лист и «не печатать» берёт ядро (`f-n-albom`, `f-n-bez-pechati`). */
    .f-tablica th, .f-tablica td { font-size: var(--fs-melkiy); }
    .f-tablica tbody tr { page-break-inside: avoid; }
    /* Схема не разрывается между страницами и печатается целиком: бумажная
       форма страницы — замена печатному документу, который она отменяет. */
    .mb-shema { page-break-inside: avoid; }
    .mb-shema svg { min-width: 0; width: 100%; }
    body { background: var(--card); }
    /* Режим на печать не влияет: слайды раскрываются подряд, «Коротко» не
       обрезает документ, пульт и панель не печатаются. */
    .mb-rezhim, .mb-navigatsiya, .mb-oglavlenie { display: none !important; }
    .mb-slaydy .mb-slayd, .mb-slayd {
        display: block !important; max-height: none !important;
        overflow: visible !important;
    }
    .mb-kratko .mb-tolko-podrobno { display: block !important; }
    .mb-slaydy .mb-obolochka { padding: 0; }
    .mb-slaydy { background: var(--card); }
}