/* Копия docs/design/kit/tokens.css от 22.10.2026 (erpSystem). Источник — кит: правки — там, сюда копировать заново. */
/* =====================================================================
Food Zavod ERP · дизайн-кит «графит и бордо» · tokens.css
Источник правды: docs/design/graphite-bordeaux.md (ТЗ 22.10.2026).
Общий для оболочки, «Завода», HR и «Каталога». Только светлая тема.
ШРИФТ. Montserrat 400/600 подключается в ДО этого файла
(так сказано в ТЗ; @import не используем — он задерживает отрисовку):
Наборы cyrillic + cyrillic-ext дают все буквы казахского алфавита
(ә ғ қ ң ө ұ ү һ і) — браузер подгружает их сам по unicode-range.
ПРАВИЛА ФАЙЛА.
- Цвета в правилах компонентов — только var(--…). HEX есть только
в блоках :root (определение токенов).
- Теней, градиентов, анимаций нет. Глубина — рамка 1 px var(--border).
- Все классы с префиксом fz- (у сервисов уже есть .btn, .card, .table —
не пересекаемся). Префикс fzb- — строка модулей оболочки, это другое.
- Состояния для эталонной страницы и тестов: .is-hover, .is-focus,
.is-error, .is-selected, .is-disabled — те же правила, что и у
:hover / :focus / :disabled.
- Иконки: icons.svg (Tabler outline). Толщина линии — --icon-stroke
(1.75 по умолчанию, 2 внутри кнопок).
- Решения заказчика 22.10 (после кита) — раздел 2 и пометки «решение 22.10»;
сводка — в kit.html, раздел «Решения после кита».
===================================================================== */
/* ---------- 1. Токены ТЗ — дословно (раздел «CSS-переменные») ---------- */
:root {
/* База */
--bg-page: #F4F3F1;
--bg-card: #FFFFFF;
--border: #E4E1DD;
--text-primary: #22252A;
--text-secondary: #6B6E73;
--text-placeholder: #A6A39F;
/* Графит */
--graphite: #22252A;
--graphite-hover: #34383E;
--graphite-raised: #2E3238;
--graphite-line: #3A3E44;
--text-on-dark: #FFFFFF;
--text-on-dark-secondary: #9A9DA2;
--text-on-dark-muted: #C9C6C2;
/* Акценты */
--bordeaux: #7A1F24;
--bordeaux-soft: #F7EDED;
--gold: #B8873A;
/* Статусы */
--danger: #D64545; --danger-bg: #FBEAEA;
--success: #2E7D5B; --success-bg: #E6F2EC;
--warning: #C98A1A; --warning-bg: #FBF1DE;
--info: #3E6A9E; --info-bg: #E8EFF7;
/* Неактивное */
--disabled-bg: #EDEBE8;
--disabled-text: #A6A39F;
/* Форма */
--radius-card: 16px;
--radius-tile: 12px;
--radius-control: 10px;
--border-width: 1px;
--space-1: 4px; --space-2: 8px; --space-3: 12px;
--space-4: 16px; --space-5: 20px; --space-6: 24px;
/* Шрифт */
--font: "Montserrat", -apple-system, "Segoe UI", Roboto, sans-serif;
--fw-regular: 400;
--fw-semibold: 600;
}
/* ---------- 2. Дополнения по решениям заказчика 22.10.2026 (после кита) ----------
«Читаемость важнее буквы ТЗ». Новых оттенков нет: #BF3A3A — из ТЗ (бывшее
наведение опасной кнопки), пелена — графит ТЗ с прозрачностью 0.4. */
:root {
--danger-text: #BF3A3A; /* красный текст (ошибка под полем и т. п.), всегда с иконкой; фон опасной кнопки. 5.41:1 на белом */
--overlay: rgba(34, 37, 42, .4); /* пелена под окном/панелью = --graphite с прозрачностью 0.4 */
--fs-display: 40px; /* крупные цифры табло мониторов цехов (не экраны модулей) */
}
/* ---------- 3. Основа страницы ---------- */
.fz-page {
margin: 0;
background: var(--bg-page);
color: var(--text-primary);
font-family: var(--font);
font-weight: var(--fw-regular);
font-size: 15px; line-height: 22px;
overflow-wrap: break-word; /* длинное переносится, не наезжает */
-webkit-text-size-adjust: 100%;
}
.fz-page *, .fz-page *::before, .fz-page *::after { box-sizing: border-box; }
/* Фокус с клавиатуры — 1.5 px бордо (как рамка поля в фокусе); на графите — белый. */
.fz-page :focus-visible { outline: 1.5px solid var(--bordeaux); outline-offset: 2px; }
.fz-page .fz-hero :focus-visible { outline-color: var(--text-on-dark); }
/* ---------- 4. Типографика (таблица ТЗ; регистр как в предложении) ---------- */
.fz-h1 { margin: 0; font: var(--fw-semibold) 22px/28px var(--font); color: var(--text-primary); }
.fz-h2 { margin: 0; font: var(--fw-semibold) 18px/24px var(--font); color: var(--text-primary); }
.fz-name { margin: 0; font: var(--fw-semibold) 18px/24px var(--font); }
.fz-platform { margin: 0; font: var(--fw-semibold) 16px/22px var(--font); color: var(--text-primary); }
.fz-card-title { margin: 0; font: var(--fw-semibold) 15px/20px var(--font); color: var(--text-primary); }
.fz-text { margin: 0; font: var(--fw-regular) 15px/22px var(--font); }
.fz-secondary { margin: 0; font: var(--fw-regular) 13px/18px var(--font); color: var(--text-secondary); }
.fz-caption { margin: 0; font: var(--fw-regular) 12px/16px var(--font); }
.fz-badge-text { font: var(--fw-semibold) 11px/14px var(--font); }
/* Табло мониторов цехов: крупные цифры, видно издалека. Только для киоска. */
.fz-display { margin: 0; font: var(--fw-semibold) var(--fs-display)/1.2 var(--font); font-variant-numeric: tabular-nums; }
.fz-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* ---------- 5. Иконки ---------- */
.fz-ic { --icon-stroke: 1.75; display: inline-block; flex: none; width: 24px; height: 24px; vertical-align: middle; }
.fz-ic--22 { width: 22px; height: 22px; }
.fz-ic--18 { width: 18px; height: 18px; }
.fz-ic--40 { width: 40px; height: 40px; }
/* ---------- 6. Кнопки (5 типов) ----------
Основная 48 px, вторичная 40 px (ТЗ). Зона нажатия ≥ 44 px: у 40-пиксельной
кнопки невидимый ::after добавляет по 2 px сверху и снизу. Не больше одной
основной кнопки на экране. */
.fz-btn {
--icon-stroke: 2;
position: relative;
display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
min-height: 48px; padding: 0 var(--space-4);
border: var(--border-width) solid transparent; border-radius: var(--radius-control);
background: transparent; color: var(--text-primary);
font: var(--fw-semibold) 15px/20px var(--font);
text-align: center; text-decoration: none; cursor: pointer;
}
.fz-btn .fz-ic { --icon-stroke: 2; width: 18px; height: 18px; }
.fz-btn--block { display: flex; width: 100%; }
.fz-btn--primary { background: var(--graphite); color: var(--text-on-dark); }
.fz-btn--primary:hover, .fz-btn--primary:active, .fz-btn--primary.is-hover { background: var(--graphite-hover); }
.fz-btn--secondary { min-height: 40px; background: var(--bg-card); color: var(--text-primary); border-color: var(--border); }
.fz-btn--secondary::after { content: ""; position: absolute; inset: -3px -1px; }
.fz-btn--secondary:hover, .fz-btn--secondary:active, .fz-btn--secondary.is-hover { background: var(--bg-page); }
.fz-btn--text { min-height: 44px; padding: 0; background: transparent; color: var(--bordeaux); }
.fz-btn--text:hover, .fz-btn--text:active, .fz-btn--text.is-hover { text-decoration: underline; }
/* Опасная: фон --danger-text (#BF3A3A, белый текст 5.41:1). Наведение без нового цвета — подчёркивание. */
.fz-btn--danger { background: var(--danger-text); color: var(--text-on-dark); }
.fz-btn--danger:hover, .fz-btn--danger:active, .fz-btn--danger.is-hover { text-decoration: underline; text-underline-offset: 3px; }
/* Неактивная — для любого типа. */
.fz-btn:disabled, .fz-btn.is-disabled, .fz-btn[aria-disabled="true"] {
background: var(--disabled-bg); color: var(--disabled-text); border-color: transparent;
text-decoration: none; cursor: not-allowed;
}
.fz-btn--text:disabled, .fz-btn--text.is-disabled, .fz-btn--text[aria-disabled="true"] { background: transparent; }
/* Кнопка-иконка без подложки (выход, закрыть): 44 × 44, иконка 22, вторичный цвет. */
.fz-iconbtn {
display: inline-grid; place-items: center; flex: none;
width: 44px; height: 44px; padding: 0; border: 0; background: transparent;
color: var(--text-secondary); cursor: pointer; text-decoration: none;
}
.fz-iconbtn .fz-ic { width: 22px; height: 22px; }
.fz-iconbtn { border-radius: var(--radius-control); }
.fz-iconbtn:hover, .fz-iconbtn.is-hover { background: var(--bg-page); color: var(--text-primary); }
/* ---------- 7. Поле ввода ---------- */
.fz-field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.fz-label { font: var(--fw-regular) 13px/18px var(--font); color: var(--text-secondary); }
.fz-input {
width: 100%; height: 44px; padding: 0 var(--space-3);
background: var(--bg-card); color: var(--text-primary);
border: var(--border-width) solid var(--border); border-radius: var(--radius-control);
font: var(--fw-regular) 15px/22px var(--font);
outline: none; -webkit-appearance: none; appearance: none;
}
.fz-input::placeholder { color: var(--text-placeholder); opacity: 1; }
/* Фокус — рамка 1.5 px бордо; отступ уменьшен на 0.5 px, чтобы текст не прыгал. */
.fz-input:focus, .fz-input.is-focus {
border-width: 1.5px; border-color: var(--bordeaux); padding: 0 calc(var(--space-3) - 0.5px);
}
.fz-field.is-error .fz-input, .fz-input[aria-invalid="true"] { border-color: var(--danger); }
.fz-input:disabled { background: var(--disabled-bg); color: var(--disabled-text); }
/* Текст ошибки — --danger-text (5.41:1) и всегда с иконкой; рамка поля — --danger. */
.fz-error { display: flex; align-items: flex-start; gap: var(--space-1);
font: var(--fw-regular) 13px/18px var(--font); color: var(--danger-text); }
.fz-error .fz-ic { width: 18px; height: 18px; }
/* ---------- 8. Бейдж-счётчик и статус-метки ---------- */
/* Счётчик: золото, цифра графитом 11/600, высота 18, капсула. При нуле скрыт:
сервер отдаёт пустой элемент или hidden. */
.fz-count {
display: inline-flex; align-items: center; justify-content: center;
min-width: 18px; height: 18px; padding: 0 var(--space-1);
border-radius: 999px; background: var(--gold); color: var(--text-primary);
font: var(--fw-semibold) 11px/14px var(--font); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.fz-count:empty, .fz-count[hidden] { display: none; }
/* В правом верхнем углу кнопки/иконки (родитель — position: relative). */
.fz-count--corner { position: absolute; top: calc(-1 * var(--space-1)); right: calc(-1 * var(--space-1)); }
/* Статус-метка (решение 22.10): подложка статуса, текст --text-primary (13+:1),
слева иконка 16 px в цвете статуса. 12/600, скругление 6, высота 24.
Иконки: danger — i-alert-circle, success — i-circle-check, warning — i-alert-triangle,
info — i-info-circle, neutral («Черновик») — i-dot. */
.fz-status {
display: inline-flex; align-items: center; gap: var(--space-1); padding: 3px 7px; /* + рамка 1 px = 4/8 */
border: var(--border-width) solid transparent; border-radius: 6px;
color: var(--text-primary); font: var(--fw-semibold) 12px/16px var(--font); white-space: nowrap;
}
.fz-status .fz-ic { width: 16px; height: 16px; }
.fz-status--danger { background: var(--danger-bg); } .fz-status--danger .fz-ic { color: var(--danger); }
.fz-status--success { background: var(--success-bg); } .fz-status--success .fz-ic { color: var(--success); }
.fz-status--warning { background: var(--warning-bg); } .fz-status--warning .fz-ic { color: var(--warning); }
.fz-status--info { background: var(--info-bg); } .fz-status--info .fz-ic { color: var(--info); }
/* Нейтральный («Черновик», «Прочее»): фон страницы, вторичный текст, рамка. */
.fz-status--neutral { background: var(--bg-page); border-color: var(--border); color: var(--text-secondary); }
.fz-status--neutral .fz-ic { color: var(--text-secondary); }
/* ---------- 9. Карточка ---------- */
.fz-card {
position: relative; min-width: 0;
background: var(--bg-card); border: var(--border-width) solid var(--border);
border-radius: var(--radius-card); padding: var(--space-4);
}
.fz-stack { display: flex; flex-direction: column; gap: var(--space-3); } /* между карточками 12 */
/* ---------- 10. Плитки модулей ---------- */
.fz-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
@media (min-width: 768px) { .fz-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .fz-tiles { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.fz-tile {
position: relative; min-width: 0; min-height: 44px;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2);
padding: var(--space-3) 0; /* по бокам 0: подписи Montserrat широкие, каждый пиксель на счету */
background: var(--bg-card); border: var(--border-width) solid var(--border); border-radius: var(--radius-tile);
color: var(--text-primary); text-decoration: none; text-align: center;
}
.fz-tile:hover, .fz-tile.is-hover { border-color: var(--text-secondary); }
.fz-tile > .fz-ic { color: var(--bordeaux); }
.fz-tile-ic { position: relative; display: inline-grid; color: var(--bordeaux); }
.fz-tile-label { max-width: 100%; font: var(--fw-regular) 12px/16px var(--font); color: var(--text-primary); white-space: nowrap; }
/* Длинные названия (решение 22.10): на телефоне — сокращение, полное — в title плитки
и для читалки экрана; с 768 px — полное.
…
ДиспетчерскаяДиспетч. */
.fz-tile-short { display: inline; }
.fz-tile-full { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 768px) {
.fz-tile-short { display: none; }
.fz-tile-full { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
}
/* Прочие подписи: не помещается в 12 px — 11 px (класс ставит скрипт, см. kit.html), не обрезаем. */
.fz-tile-label.is-fit { font-size: 11px; }
/* ---------- 11. Таблица ---------- */
.fz-table-wrap { overflow-x: auto; background: var(--bg-card);
border: var(--border-width) solid var(--border); border-radius: var(--radius-card); }
.fz-table { width: 100%; border-collapse: separate; border-spacing: 0; font: var(--fw-regular) 15px/22px var(--font); }
.fz-table th {
padding: var(--space-3) var(--space-4); text-align: left; vertical-align: middle;
background: var(--bg-page); color: var(--text-secondary);
font: var(--fw-semibold) 13px/18px var(--font);
border-bottom: var(--border-width) solid var(--border);
}
.fz-table td {
height: 48px; padding: var(--space-3) var(--space-4); vertical-align: middle;
background: var(--bg-card); color: var(--text-primary);
border-bottom: var(--border-width) solid var(--border);
}
.fz-table tbody tr:last-child td { border-bottom: 0; }
.fz-table tbody tr:hover td, .fz-table tbody tr.is-hover td { background: var(--bg-page); }
.fz-table tr.is-selected td, .fz-table tr[aria-selected="true"] td { background: var(--bordeaux-soft); }
/* В выбранной строке вторичный текст — основным (решение 22.10: #6B6E73 на #F7EDED = 4.46). */
.fz-table tr.is-selected .fz-secondary, .fz-table tr[aria-selected="true"] .fz-secondary { color: var(--text-primary); }
.fz-table tr.is-selected td:first-child, .fz-table tr[aria-selected="true"] td:first-child { position: relative; }
.fz-table tr.is-selected td:first-child::before, .fz-table tr[aria-selected="true"] td:first-child::before {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--bordeaux);
}
/* ---------- 12. Тост ---------- */
.fz-toast {
display: flex; align-items: flex-start; gap: var(--space-3);
padding: var(--space-4); background: var(--bg-card);
border: var(--border-width) solid var(--border); border-radius: var(--radius-card);
color: var(--text-primary); font: var(--fw-regular) 15px/22px var(--font);
}
.fz-toast > .fz-ic { margin-top: -1px; }
.fz-toast--success > .fz-ic { color: var(--success); }
.fz-toast--danger > .fz-ic { color: var(--danger); }
.fz-toast--warning > .fz-ic { color: var(--warning); }
.fz-toast--info > .fz-ic { color: var(--info); }
/* Место для тостов внизу экрана; исчезают через 4 с (скрипт сервиса). */
.fz-toasts { position: fixed; left: var(--space-4); right: var(--space-4); bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
z-index: 60; display: flex; flex-direction: column; gap: var(--space-2); pointer-events: none; }
.fz-toasts > * { pointer-events: auto; }
/* ---------- 12a. Пелена, переключатель, колонка доски (решения 22.10) ---------- */
.fz-overlay { position: fixed; inset: 0; z-index: 70; background: var(--overlay); }
/* Переключатель: выкл. — белая дорожка с рамкой --text-secondary и такой же ручкой;
вкл. — графит и белая ручка. Дорожка 40 × 24, зона нажатия 44 (через label). */
.fz-switch { position: relative; display: inline-flex; align-items: center; min-height: 44px; gap: var(--space-3); cursor: pointer; }
.fz-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.fz-switch-track { position: relative; flex: none; width: 40px; height: 24px; border-radius: 999px;
background: var(--bg-card); border: var(--border-width) solid var(--text-secondary); }
.fz-switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
border-radius: 50%; background: var(--text-secondary); }
.fz-switch input:checked + .fz-switch-track { background: var(--graphite); border-color: var(--graphite); }
.fz-switch input:checked + .fz-switch-track::after { left: 19px; background: var(--text-on-dark); }
.fz-switch input:focus-visible + .fz-switch-track { outline: 1.5px solid var(--bordeaux); outline-offset: 2px; }
.fz-switch input:disabled + .fz-switch-track { background: var(--disabled-bg); border-color: var(--disabled-bg); }
.fz-switch input:disabled + .fz-switch-track::after { background: var(--disabled-text); }
/* Колонка доски (канбан): фон страницы + рамка, чтобы не сливалась с фоном. */
.fz-board-col { background: var(--bg-page); border: var(--border-width) solid var(--border);
border-radius: var(--radius-card); padding: var(--space-3); }
/* ---------- 13. Пусто ---------- */
.fz-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
padding: var(--space-6) var(--space-4); text-align: center; }
.fz-empty > .fz-ic { width: 40px; height: 40px; color: var(--text-on-dark-muted); }
.fz-empty-title { margin: 0; font: var(--fw-semibold) 15px/20px var(--font); color: var(--text-primary); }
.fz-empty-text { margin: 0; font: var(--fw-regular) 13px/18px var(--font); color: var(--text-secondary); }
.fz-empty .fz-btn { margin-top: var(--space-2); }
/* ---------- 14. Скелет (загрузка) — серые плашки по форме контента, без крутилок ---------- */
.fz-skel { display: block; background: var(--disabled-bg); border-radius: 6px; }
.fz-skel--line { height: 12px; }
.fz-skel--title { height: 16px; }
.fz-skel--circle { border-radius: 50%; }
.fz-skel--tile { border-radius: var(--radius-tile); }
.fz-skel--card { border-radius: var(--radius-card); }
/* ---------- 15. Верхняя строка: знак «ERP», название, выход ---------- */
.fz-topbar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.fz-mark {
position: relative; flex: none; overflow: hidden;
display: grid; place-items: center; width: 40px; height: 40px; padding-bottom: 3px;
border-radius: var(--radius-control); background: var(--graphite); color: var(--text-on-dark);
font: var(--fw-semibold) 12px/1 var(--font); text-decoration: none;
}
.fz-mark::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--bordeaux); }
.fz-brand { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; color: var(--text-primary); text-decoration: none; }
.fz-brand-name { font: var(--fw-semibold) 16px/22px var(--font); color: var(--text-primary); }
.fz-brand-sub { font: var(--fw-regular) 13px/18px var(--font); color: var(--text-secondary); }
/* ---------- 16. Шапка-приветствие ----------
Раскладка зависит от ширины самой шапки (container query), а не экрана:
узкая — человек, разделитель, быстрые действия друг под другом (ТЗ);
широкая (≥ 720 px) — как сейчас на компьютере: человек слева, действия справа. */
.fz-hero {
container-type: inline-size;
display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: var(--space-6);
background: var(--graphite); color: var(--text-on-dark); border-radius: var(--radius-card); padding: var(--space-5);
}
.fz-hero > * { grid-column: 1 / -1; }
.fz-hero-id { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.fz-hero-t { display: flex; flex-direction: column; min-width: 0; }
.fz-hero-hi { font: var(--fw-regular) 13px/18px var(--font); color: var(--text-on-dark-secondary); }
.fz-hero-name { font: var(--fw-semibold) 18px/24px var(--font); color: var(--text-on-dark); margin: 0; }
.fz-hero-meta { font: var(--fw-regular) 13px/18px var(--font); color: var(--text-on-dark-secondary); }
.fz-hero-line { height: 1px; margin: var(--space-4) 0; background: var(--graphite-line); border: 0; }
.fz-avatar {
position: relative; flex: none; overflow: hidden;
display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
background: var(--bordeaux); color: var(--text-on-dark);
font: var(--fw-semibold) 18px/24px var(--font); text-decoration: none;
}
.fz-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Быстрые действия: квадраты 44, скругление 12, белая иконка 22, подпись 12. */
.fz-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.fz-q {
display: flex; flex-direction: column; align-items: center; gap: var(--space-2); min-width: 0;
padding: 0; border: 0; background: transparent; cursor: pointer; text-decoration: none; text-align: center;
color: var(--text-on-dark-muted); font: var(--fw-regular) 12px/16px var(--font);
}
.fz-q-ic {
position: relative; display: grid; place-items: center; width: 44px; height: 44px;
border-radius: var(--radius-tile); background: var(--graphite-raised); color: var(--text-on-dark);
}
.fz-q-ic .fz-ic { width: 22px; height: 22px; }
.fz-q:hover .fz-q-ic, .fz-q.is-hover .fz-q-ic { background: var(--graphite-hover); }
@container (min-width: 720px) {
.fz-hero > * { grid-column: auto; }
.fz-hero-line { align-self: stretch; width: 1px; height: auto; margin: 0; }
.fz-quick { grid-template-columns: repeat(4, 72px); }
}
/* ---------- 17. Карточка «Профиль почти готов» ----------
Узкая: кольцо и текст, под ними основная кнопка во всю ширину (ТЗ).
Широкая (≥ 560 px) — как сейчас: кнопка справа в той же строке. */
.fz-steps {
container-type: inline-size;
display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3);
}
.fz-steps-t { grid-column: 2 / -1; display: flex; flex-direction: column; min-width: 0; padding-right: var(--space-6); }
.fz-steps > .fz-btn { grid-column: 1 / -1; }
.fz-steps-close { position: absolute; top: var(--space-1); right: var(--space-1); }
.fz-ring { position: relative; display: grid; place-items: center; width: 40px; height: 40px; }
.fz-ring svg { position: absolute; inset: 0; width: 40px; height: 40px; transform: rotate(-90deg); }
.fz-ring-track { fill: none; stroke: var(--border); stroke-width: 4; }
.fz-ring-fill { fill: none; stroke: var(--bordeaux); stroke-width: 4; }
.fz-ring-t { position: relative; font: var(--fw-semibold) 11px/14px var(--font); color: var(--text-primary); }
@container (min-width: 560px) {
.fz-steps-t { grid-column: 2; }
.fz-steps > .fz-btn { grid-column: 3; width: auto; margin-right: calc(var(--space-6) + var(--space-2)); } /* место под крестик 44 */
}
/* ---------- 18. Таб-бар ----------
Телефон (< 768): фиксирован внизу, белый, рамка сверху. Компьютер (≥ 768):
сверху, в строке с названием, как сейчас (решение заказчика 22.10).
Активная — иконка и подпись бордо + черта 2 × 20 под подписью. */
.fz-tabbar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
display: flex; align-items: stretch;
padding-bottom: env(safe-area-inset-bottom);
background: var(--bg-card); border-top: var(--border-width) solid var(--border);
}
.fz-tab {
position: relative; flex: 1 1 0; min-width: 0; min-height: 44px;
display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
padding: var(--space-2) 0 var(--space-1);
color: var(--text-secondary); text-decoration: none; text-align: center;
font: var(--fw-regular) 12px/16px var(--font);
}
.fz-tab-ic { position: relative; display: inline-grid; }
.fz-tab::after { content: ""; width: 20px; height: 2px; background: transparent; }
.fz-tab:hover, .fz-tab.is-hover { background: var(--bg-page); }
.fz-tab.is-on, .fz-tab[aria-current="page"] { color: var(--bordeaux); }
.fz-tab.is-on::after, .fz-tab[aria-current="page"]::after { background: var(--bordeaux); }
.fz-has-tabbar { padding-bottom: calc(62px + env(safe-area-inset-bottom)); } /* 8+24+4+16+4+2+4 */
@media (min-width: 768px) {
.fz-tabbar { position: static; z-index: auto; flex: 0 1 auto; padding-bottom: 0;
background: transparent; border-top: 0; }
.fz-tab { flex: none; min-width: 88px; padding: var(--space-2) var(--space-3) var(--space-1); }
.fz-has-tabbar { padding-bottom: 0; }
.fz-topbar > .fz-tabbar { margin-left: auto; }
}
/* Статичный показ таб-бара в потоке (эталонная страница, документация). */
.fz-tabbar.is-static { position: static; padding-bottom: 0; }