/* ============================================================================ САНТАН — рабочий контур. Надстройка над app.css (подключать ПОСЛЕ него). Палитру не переопределяем: --red --ink --grey --line --sunken живут в app.css. ── ГЛАВНОЕ РЕШЕНИЕ: «воздух против плотности» ─────────────────────────────── Витрина santan-grad.ru воздушная, а конструктор смотрит в таблицу деталей по восемь часов. Компромисс «слегка сжать всё» портит и то и другое: витринность пропадает, а в таблицу всё равно влезает мало. Поэтому не компромисс, а ЗОНИРОВАНИЕ. Страница делится на две зоны с разными правилами, граница видима, внутри зоны правило не нарушается: ЗОНА ВОЗДУХА — шапка, навигация, заголовки, конвейер этапов, пустые состояния, зона решения (карточка предлагаемого действия). Тут наследуется масштаб app.css: h1 32px, отступы 24–44px, строка 1.6, круглые кнопки. Человек сюда смотрит секундами, ему нужна ориентация, а не вместимость. ЗОНА ДАННЫХ — класс .s-dense (таблицы, сметы, списки деталей и карт). Строка 36px, ячейка 8/12px, кегль 13.5px, строка 1.35, табличные цифры. Тут человек живёт часами, ему нужна вместимость: на 1080p влезает ~22 строки вместо ~12. Правило одной фразой: ВОЗДУХ ОРИЕНТИРУЕТ, ПЛОТНОСТЬ РАБОТАЕТ. Ни один элемент не берёт «немного от обоих». Если элемент внутри .s-dense — он играет по плотным правилам целиком, включая кнопки и чипы. Плотность зоны данных переключается на : компакт для стола конструктора, large для цехового монитора и мишени 44px. ── КОНТРАСТ (посчитан, не на глаз; формула WCAG 2.1) ─────────────────────── Фирменный #ee3d48 на белом даёт 3,89:1 — как ЦВЕТ ТЕКСТА мелким кеглем не проходит (нужно 4.5). Решение: разделить роли, а не менять бренд. #ee3d48 остаётся заливкой, полосой, рамкой, подчёркиванием — там норма 3:1 (WCAG 1.4.11 Non-text Contrast), 3,89 проходит с запасом. текстом красного цвета работает --red-text #c2262f: 5,81 на белом, 5,09 на --red-soft, 5,24 на --sunken. белое НА #ee3d48 — те же 3,89, поэтому крупная плашка допустима только от 17px полужирного (норма крупного текста 3:1); мелкая белая надпись кладётся на --red-text (5,81), не на фирменный. Так же разведены серый, зелёный и амбер — см. блок токенов ниже. ========================================================================== */ :root{ /* ── текстовые двойники акцентов: только для мелкого текста ── */ --red-text:#c2262f; /* 5.81 бел · 5.09 red-soft · 5.24 sunken */ --grey-text:#5c6169; /* 6.23 бел · 5.61 sunken. --grey 3.26 — текстом нельзя */ --ok-text:#146239; /* 7.41 бел · 6.60 ok-soft */ --warn-text:#8a5200; /* 6.39 бел · 5.81 warn-soft */ --info:#0b5cab; /* 6.70 бел · 6.04 sunken */ --info-soft:#eaf1fb; --blocked:#6b3fa0; /* блокировка НЕ красная: красный уже занят ошибкой */ --blocked-soft:#f3effa; /* ── зона данных ── */ --row-h:36px; --cell-px:12px; --cell-py:8px; --dense-fs:13.5px; --dense-lh:1.35; --ctl-h:32px; --tap-min:32px; --stripe:#fafbfc; --radius:6px; --radius-sm:4px; --dur:160ms; --ease:cubic-bezier(.2,0,.2,1); --focus:0 0 0 2px #fff,0 0 0 4px var(--ink); } :root[data-density='compact']{--row-h:30px;--cell-py:4px;--cell-px:8px;--dense-fs:13px;--ctl-h:28px} :root[data-density='large']{--row-h:48px;--cell-py:12px;--cell-px:16px;--dense-fs:15px;--ctl-h:44px;--tap-min:44px} /* Фокус виден всегда и везде. Снимать outline без замены запрещено. */ .s :focus-visible,.s-dense :focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--radius-sm)} .s-skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:99} .s-skip:focus{left:8px;top:8px;color:#fff} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} /* ============================================================================ 1. ЗОНА ВОЗДУХА — обвязка страницы ========================================================================== */ .s-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px; flex-wrap:wrap;margin:0 0 20px} .s-head-t{flex:1 1 420px} .s-kick{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--grey-text); font-weight:500;margin-bottom:8px} .s-h1{font-size:30px;font-weight:600;letter-spacing:-.025em;margin:0 0 6px;line-height:1.15} .s-sub{color:var(--grey-text);font-size:14.5px;margin:0;max-width:76ch} .s-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center} /* Граница между зонами: воздух заканчивается, начинается работа. */ .s-zone{border-top:1px solid var(--line);margin-top:32px;padding-top:20px} .s-zone-t{font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--grey-text); font-weight:500;margin:0 0 12px;display:flex;align-items:center;gap:10px;justify-content:space-between} /* ============================================================================ 2. КОНВЕЙЕР ЭТАПОВ — смысловой центр экрана заказа Ворота оплаты делят 35,5 ч на 11,75 ч до и 23,75 ч после (см. КОНТРАКТ). Это не «шаг №4», а развилка маршрута, поэтому она нарисована как створка поперёк ленты, а не как ещё один кружок в ряду. Состояние НИКОГДА не только цветом: у каждого этапа значок + слово статуса, у заблокированного вдобавок штриховая рамка, у пропущенного — зачёркнутое имя. ========================================================================== */ .s-pipe{display:flex;align-items:stretch;gap:0;overflow-x:auto;padding:2px 0 10px; margin:8px 0 4px;scrollbar-width:thin} .s-step{flex:1 1 0;min-width:132px;position:relative;padding:12px 14px 12px 16px; background:var(--surface);border:1px solid var(--line);border-left:0; display:flex;flex-direction:column;gap:5px;color:inherit;transition:background var(--dur) var(--ease)} .s-step:first-child{border-left:1px solid var(--line)} a.s-step:hover{background:var(--sunken)} .s-step-n{font-family:var(--mono);font-size:11px;color:var(--grey-text);letter-spacing:.02em} .s-step-name{font-size:13.5px;font-weight:500;line-height:1.3} .s-step-st{font-size:11.5px;display:flex;align-items:center;gap:5px;line-height:1.3} .s-step-ic{width:14px;text-align:center;font-weight:700;flex-shrink:0} .s-step:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--line)} .s-step--done:before{background:var(--ok)} .s-step--done .s-step-st{color:var(--ok-text)} .s-step--cur{background:var(--sunken);box-shadow:inset 0 0 0 1px var(--ink)} .s-step--cur:before{background:var(--ink)} .s-step--cur .s-step-name{font-weight:600} .s-step--cur .s-step-st{color:var(--ink)} .s-step--wait:before{background:var(--line)} .s-step--wait .s-step-name,.s-step--wait .s-step-st{color:var(--grey-text)} .s-step--blocked{border-style:dashed;border-color:var(--blocked);background:var(--blocked-soft)} .s-step--blocked:before{background:var(--blocked)} .s-step--blocked .s-step-st{color:var(--blocked)} .s-step--skip{background:repeating-linear-gradient(135deg,#fff 0 6px,var(--sunken) 6px 12px)} .s-step--skip .s-step-name{text-decoration:line-through;color:var(--grey-text)} .s-step--skip .s-step-st{color:var(--grey-text)} .s-step--skip:before{background:var(--grey)} /* Ворота: створка поперёк ленты. Красный тут — заливка и рамка (норма 3:1). */ .s-gate{flex:0 0 auto;min-width:158px;padding:12px 16px;position:relative; border:2px solid var(--red);background:var(--red-soft); display:flex;flex-direction:column;gap:5px;justify-content:center} .s-gate-k{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase; color:var(--red-text);font-weight:600} .s-gate-t{font-size:13.5px;font-weight:600;line-height:1.25;color:var(--ink)} .s-gate-st{font-size:11.5px;color:var(--red-text);display:flex;align-items:center;gap:5px} .s-gate--open{border-color:var(--ok);background:var(--ok-soft)} .s-gate--open .s-gate-k,.s-gate--open .s-gate-st{color:var(--ok-text)} .s-pipe-legend{font-size:12px;color:var(--grey-text);margin:2px 0 0;line-height:1.55} /* ============================================================================ 3. ЗОНА ДАННЫХ — плотная таблица ========================================================================== */ .s-dense{font-size:var(--dense-fs);line-height:var(--dense-lh)} .s-tw{border:1px solid var(--line);background:var(--surface);overflow:auto; max-height:var(--table-max,72vh);position:relative} table.s-tbl{width:100%;border-collapse:separate;border-spacing:0; font-size:var(--dense-fs);line-height:var(--dense-lh);font-variant-numeric:tabular-nums lining-nums} table.s-tbl th{position:sticky;top:0;z-index:3;background:var(--sunken);text-align:left; font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--grey-text); padding:var(--cell-py) var(--cell-px);white-space:nowrap; box-shadow:inset 0 -1px 0 var(--line),inset 0 1px 0 var(--line)} table.s-tbl th.s-n,table.s-tbl td.s-n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} table.s-tbl td{padding:var(--cell-py) var(--cell-px);border-bottom:1px solid var(--line-soft); height:var(--row-h);vertical-align:middle} table.s-tbl tbody tr:nth-child(even) td{background:var(--stripe)} table.s-tbl tbody tr:hover td{background:var(--sunken)} table.s-tbl tbody tr[aria-selected="true"] td{background:var(--info-soft); box-shadow:inset 2px 0 0 var(--info)} table.s-tbl tbody tr.s-row-warn td{background:var(--warn-soft)} table.s-tbl tbody tr.s-row-warn td:first-child{box-shadow:inset 2px 0 0 var(--warn-text)} table.s-tbl tbody tr:focus-within td{background:var(--sunken)} table.s-tbl td.s-code{font-family:var(--mono);font-size:.92em} /* Липкая первая колонка — позиция детали не должна уезжать при 24 колонках. */ table.s-tbl.s-tbl--pin td:first-child,table.s-tbl.s-tbl--pin th:first-child{ position:sticky;left:0;z-index:2;background:var(--surface)} table.s-tbl.s-tbl--pin th:first-child{z-index:4} /* Итог прилипает снизу: сумма всегда на виду. */ table.s-tbl tfoot td{position:sticky;bottom:0;background:var(--sunken);font-weight:600; border-top:1px solid var(--ink);box-shadow:inset 0 1px 0 var(--line)} .s-tbl-cap{display:flex;justify-content:space-between;align-items:center;gap:12px; flex-wrap:wrap;margin:0 0 8px;font-size:12.5px;color:var(--grey-text)} /* ============================================================================ 4. ПОКАЗАТЕЛИ, ПОЛОСЫ ЗАПОЛНЕНИЯ, УРОВНИ ПРЕДУПРЕЖДЕНИЙ КИМ в файле и фактический выход хранятся раздельно — карточка показателя умеет вторую строку сравнения, чтобы их не смешивали в одно число. ========================================================================== */ .s-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(184px,1fr));gap:1px; background:var(--line);border:1px solid var(--line);margin:12px 0} .s-kpi{background:var(--surface);padding:16px 18px;display:flex;flex-direction:column;gap:5px} .s-kpi-k{font-size:12px;color:var(--grey-text)} .s-kpi-v{font-size:26px;font-weight:600;letter-spacing:-.03em;line-height:1.05; font-variant-numeric:tabular-nums} .s-kpi-note{font-size:11.5px;color:var(--grey-text);line-height:1.45} .s-kpi--warn .s-kpi-v{color:var(--warn-text)} .s-kpi--bad .s-kpi-v{color:var(--red-text)} .s-kpi--ok .s-kpi-v{color:var(--ok-text)} /* Полоса заполнения: значение продублировано числом — полоса одна ничего не доказывает ни дальтонику, ни принтеру. */ .s-bar{display:block;margin:6px 0 0} .s-bar-track{height:6px;background:var(--sunken);border:1px solid var(--line);overflow:hidden} .s-bar-fill{height:100%;background:var(--ok);transition:width var(--dur) var(--ease)} .s-bar--warn .s-bar-fill{background:var(--warn)} .s-bar--bad .s-bar-fill{background:var(--red)} .s-bar-l{display:flex;justify-content:space-between;font-size:11.5px;color:var(--grey-text); margin-top:4px;font-variant-numeric:tabular-nums} /* Уровни предупреждения: слово + значок + полоса слева, не только оттенок. */ .s-warn{display:flex;gap:10px;align-items:flex-start;padding:11px 14px;margin:10px 0; font-size:13.5px;line-height:1.5;border-left:3px solid var(--grey);background:var(--sunken)} .s-warn-ic{font-weight:700;flex-shrink:0;line-height:1.4} .s-warn b{display:block;font-weight:600;margin-bottom:2px} .s-warn--info{border-left-color:var(--info);background:var(--info-soft);color:var(--ink)} .s-warn--ok{border-left-color:var(--ok);background:var(--ok-soft);color:var(--ok-text)} .s-warn--warn{border-left-color:var(--warn-text);background:var(--warn-soft);color:var(--warn-text)} .s-warn--bad{border-left-color:var(--red);background:var(--red-soft);color:var(--red-text)} /* ============================================================================ 5. КНОПКИ, ПОЛЯ, ЧИПЫ Круглые кнопки — язык сайта, сохраняем. Но в .s-dense мишень 32px, не 48. ========================================================================== */ .s-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px; min-height:38px;padding:0 20px;border-radius:99px;border:1px solid transparent; font-family:inherit;font-size:14px;font-weight:500;cursor:pointer;text-decoration:none; transition:background var(--dur) var(--ease),color var(--dur) var(--ease);white-space:nowrap} .s-btn--primary{background:var(--ink);color:#fff} .s-btn--primary:hover{background:var(--red);color:#fff} .s-btn--secondary{background:var(--surface);color:var(--ink);border-color:var(--line)} .s-btn--secondary:hover{background:var(--sunken);color:var(--ink)} /* Опасное — заливка --red-text (белое на нём 5,81), а не фирменный #ee3d48: на нём белая надпись даёт только 3,89. */ .s-btn--danger{background:var(--red-text);color:#fff} .s-btn--danger:hover{background:#a71f27;color:#fff} .s-btn--ghost{background:transparent;color:var(--ink);border-color:transparent;padding:0 10px} .s-btn--ghost:hover{background:var(--sunken)} .s-btn[disabled],.s-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;pointer-events:none} .s-btn--sm,.s-dense .s-btn{min-height:var(--ctl-h);padding:0 14px;font-size:13px} .s-btn-busy{display:inline-block;width:11px;height:11px;border:2px solid currentColor; border-right-color:transparent;border-radius:50%;animation:s-spin .7s linear infinite} @keyframes s-spin{to{transform:rotate(360deg)}} /* Метка ВСЕГДА видима и над полем; плейсхолдер меткой не работает. */ .s-field{display:block;margin:0 0 16px;max-width:52ch} .s-field-l{display:block;font-size:12.5px;color:var(--grey-text);margin-bottom:5px;font-weight:500} .s-field-l .s-req{color:var(--red-text);margin-left:3px} .s-input,.s-select,.s-textarea{display:block;width:100%;min-height:var(--ctl-h); padding:7px 11px;font-family:inherit;font-size:14px;color:var(--ink);background:var(--surface); border:1px solid var(--line);border-radius:var(--radius-sm)} .s-textarea{min-height:90px;line-height:1.5;resize:vertical} .s-input:focus,.s-select:focus,.s-textarea:focus{outline:none;border-color:var(--ink); box-shadow:var(--focus)} .s-help{font-size:12px;color:var(--grey-text);margin-top:5px;line-height:1.45} /* Ошибка рядом с полем, а не общим списком сверху. Рамка + значок + текст. */ .s-field--err .s-input,.s-field--err .s-select,.s-field--err .s-textarea{border-color:var(--red-text)} .s-err{font-size:12.5px;color:var(--red-text);margin-top:5px;display:flex;gap:5px;align-items:flex-start} .s-form-row{display:flex;gap:16px;flex-wrap:wrap} .s-form-row .s-field{flex:1 1 220px} .s-chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:500; padding:3px 10px;border-radius:99px;line-height:1.55;white-space:nowrap; border:1px solid transparent} .s-chip-ic{font-weight:700} .s-chip--done{background:var(--ok-soft);color:var(--ok-text);border-color:#c9e6d6} .s-chip--cur{background:var(--ink);color:#fff} .s-chip--wait{background:var(--sunken);color:var(--grey-text);border-color:var(--line)} .s-chip--info{background:var(--info-soft);color:var(--info);border-color:#cfe0f5} .s-chip--warn{background:var(--warn-soft);color:var(--warn-text);border-color:#f0dfbb} .s-chip--bad{background:var(--red-soft);color:var(--red-text);border-color:#f7cdd0} .s-chip--blocked{background:var(--blocked-soft);color:var(--blocked);border-style:dashed; border-color:var(--blocked)} .s-chip--skip{background:var(--sunken);color:var(--grey-text);border-color:var(--line); text-decoration:line-through} /* ============================================================================ 6. КОПИЛОТ Лента диалога, зона перетаскивания, карточка распознанного файла и карточка предлагаемого действия. Предложение модели НЕ применяется само: подтверждение человеком — отдельная кнопка (иначе догадка уедет в смету и в закупку). ========================================================================== */ .s-copilot{display:flex;flex-direction:column;gap:12px;border:1px solid var(--line); background:var(--surface);min-height:280px} .s-chat{display:flex;flex-direction:column;gap:12px;padding:16px 18px;overflow-y:auto; max-height:var(--chat-max,54vh)} .s-msg{max-width:64ch;font-size:14px;line-height:1.55} .s-msg-who{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-text); margin-bottom:4px;font-weight:500} .s-msg-body{padding:11px 14px;border-radius:var(--radius);background:var(--sunken)} .s-msg--me{align-self:flex-end;text-align:left} .s-msg--me .s-msg-body{background:var(--ink);color:#fff} .s-msg--me .s-msg-who{text-align:right} .s-msg--sys .s-msg-body{background:var(--info-soft);color:var(--ink); border-left:3px solid var(--info)} .s-msg-time{font-size:11px;color:var(--grey-text);margin-top:4px} .s-chat-form{display:flex;gap:8px;align-items:flex-end;padding:12px 18px 16px; border-top:1px solid var(--line)} .s-chat-form .s-textarea{min-height:44px;margin:0} .s-drop{border:2px dashed var(--line);background:var(--stripe);border-radius:var(--radius); padding:26px 20px;text-align:center;transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease)} .s-drop:hover,.s-drop.is-over,.s-drop:focus-within{border-color:var(--info);background:var(--info-soft)} .s-drop-t{font-size:14.5px;font-weight:500;margin-bottom:4px} .s-drop-h{font-size:12.5px;color:var(--grey-text);line-height:1.5} .s-file{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line); background:var(--surface);padding:12px 14px;border-radius:var(--radius);margin:8px 0} .s-file-ic{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.04em; padding:3px 7px;background:var(--sunken);color:var(--ink-2);border-radius:var(--radius-sm); flex-shrink:0;text-transform:uppercase} .s-file-b{flex:1;min-width:0} .s-file-n{font-size:13.5px;font-weight:500;word-break:break-all;line-height:1.35} .s-file-m{font-size:12px;color:var(--grey-text);margin-top:3px} .s-file--err{border-color:var(--red-text);background:var(--red-soft)} /* Предложение копилота: рамка + ярлык «предлагает», действие всегда явное. */ .s-prop{border:1px solid var(--info);background:var(--info-soft);border-radius:var(--radius); padding:14px 16px;margin:10px 0} .s-prop-k{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--info); font-weight:600;margin-bottom:6px} .s-prop-t{font-size:14.5px;font-weight:600;line-height:1.35;margin-bottom:5px} .s-prop-w{font-size:13px;color:var(--ink-2);line-height:1.55;margin-bottom:10px;max-width:78ch} .s-prop-why{font-size:12px;color:var(--grey-text);margin-bottom:10px} .s-prop-a{display:flex;gap:8px;flex-wrap:wrap;align-items:center} /* ============================================================================ 7. ПУСТЫЕ СОСТОЯНИЯ И ЗАГРУЗКА Пустое состояние всегда с действием: «нет данных» — это тупик. Загрузка — скелет формы будущего контента, не спиннер: не прыгает вёрстка. ========================================================================== */ .s-empty{border:1px dashed var(--line);background:var(--stripe);padding:40px 28px; text-align:center;border-radius:var(--radius);margin:12px 0} .s-empty-t{font-size:16px;font-weight:600;margin:0 0 6px} .s-empty-w{font-size:13.5px;color:var(--grey-text);max-width:58ch;margin:0 auto 16px;line-height:1.6} .s-empty--tight{padding:22px 18px} .s-skel{background:linear-gradient(90deg,var(--sunken) 25%,var(--line-soft) 37%,var(--sunken) 63%); background-size:400% 100%;animation:s-shim 1.4s ease-in-out infinite;border-radius:var(--radius-sm); height:12px;margin:8px 0} @keyframes s-shim{0%{background-position:100% 0}100%{background-position:0 0}} .s-skel-row{height:var(--row-h);margin:0;border-bottom:1px solid var(--line-soft);border-radius:0} .s-loading{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--grey-text); padding:12px 0} /* ============================================================================ 8. ПЕЧАТЬ Клиент печатает: расход материалов в двух экземплярах, сопроводители по участкам, упаковочная на утверждение. Печать — режим системы, не «версия». Чёрно-белое без фонов (цветной картридж не гарантирован), шапка документа повторяется на каждом листе, строки не рвутся. ========================================================================== */ @media print{ @page{size:A4;margin:12mm 10mm} html,body{background:#fff!important;color:#000!important;font-size:10.5pt;line-height:1.35} .topbar,.s-actions,.s-skip,.s-copilot,.s-drop,.s-chat-form,.s-btn,.s-empty, .s-skel,.s-loading,.no-print{display:none!important} .wrap{max-width:none;padding:0;margin:0} a{color:#000!important;text-decoration:none} a[href^="http"]:after{content:" (" attr(href) ")";font-size:8pt;color:#444} .s-print-head{display:block!important;position:running(shapka)} thead{display:table-header-group} /* шапка таблицы на каждом листе */ tfoot{display:table-footer-group} tr,.s-kpi,.s-step,.s-file,.s-prop,.s-warn{break-inside:avoid;page-break-inside:avoid} h1,h2,.s-h1,.s-zone-t{break-after:avoid} .s-break{break-before:page;page-break-before:always} .s-tw{max-height:none;overflow:visible;border:0} table.s-tbl{font-size:9.5pt} table.s-tbl th{position:static;background:#fff!important;color:#000!important; border-bottom:1pt solid #000;box-shadow:none} table.s-tbl td{border-bottom:.5pt solid #999;height:auto;padding:3pt 4pt} table.s-tbl tbody tr:nth-child(even) td,table.s-tbl tbody tr:hover td, table.s-tbl tbody tr[aria-selected="true"] td{background:#fff!important;box-shadow:none} table.s-tbl tfoot td{position:static;background:#fff!important;border-top:1pt solid #000; box-shadow:none} /* Состояния на бумаге читаются значком и словом — цвета уже нет. */ .s-chip,.s-step,.s-gate{border:.5pt solid #000!important;background:#fff!important; color:#000!important} .s-gate{border-width:1.5pt!important} .s-step--skip{background:#fff!important} .s-bar-track{border:.5pt solid #000} .s-bar-fill{background:#000!important} .s-kpis{background:#fff;border:.5pt solid #000;gap:0} .s-kpi{border-right:.5pt solid #000} .s-warn{border-left:1.5pt solid #000!important;background:#fff!important;color:#000!important} } .s-print-head{display:none} .s-print-only{display:none} @media print{.s-print-only{display:block}} /* ============================================================================ 9. АДАПТИВ Таблица прокручивается внутри своей обёртки; страница по горизонтали — нет. ========================================================================== */ @media (max-width:900px){ .s-h1{font-size:24px} .s-pipe{gap:0} .s-step,.s-gate{min-width:118px} .s-form-row{flex-direction:column;gap:0} .s-kpis{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))} } @media (prefers-contrast:more){ :root{--line:#b8b8b8;--grey-text:#3d434c;--stripe:#f0f1f3} .s-step,.s-kpi,.s-file{border-color:#8a8f96} }