/* ============================================================ PTW HUB · ver-2 · общая дизайн-система (один файл на все страницы) Шрифты (self-hosted WOFF2, без Google Fonts - Иран), 6 языков: EN/RU/ES=Inter · FA=Vazirmatn · AR=Readex Pro · ZH=Noto Sans SC (+системный CJK-стек). ANSI Z535: красный = опасность/ошибка (НЕ CTA), зелёный = go/подписано, янтарь = warning. Язык интерфейса проекта = русский; англ. сокращения (LEL, H2S, LOTO, JSA, SIMOPS, QR, PDF, PWA) позже станут фарси. Только дефис, не длинное тире. ============================================================ */ /* FOUC-шторка: пока инлайн-скрипт (i18n-noflash) выставил язык returning-посетителя, тело скрыто до перевода - убирает «вспышку русского». Снимается в setLang() после translateBody, либо failsafe-таймером (1.5с) при сбое JS -> тело не останется скрытым. Первый визит НЕ прячем. */ html[data-i18n-cloak] body{ visibility:hidden; } /* ============ ШРИФТЫ 6 ЯЗЫКОВ - self-hosted WOFF2, без CDN (Иран-safe). Выбор из deep-research: 06-reference/fonts-decision.md. EN/RU=Inter · FA=Vazirmatn · AR=Readex Pro (нативный арабский, НЕ Vazirmatn: у того нет locl - рисует арабский персидскими формами букв/цифр). unicode-range разводит скрипты, чтобы каждый язык тянул только свой файл; выбор Vazirmatn vs Readex для арабского диапазона решает порядок в --font-fa / --font-ar. ============ */ @font-face{font-family:"Inter";src:url("fonts/inter-var-latin.woff2") format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0020-007E,U+00A0-00FF,U+2010-2027,U+2030-205E,U+20AC,U+2122} @font-face{font-family:"Inter";src:url("fonts/inter-var-cyrillic.woff2") format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0400-04FF,U+0500-052F,U+2116,U+2DE0-2DFF,U+20BD} @font-face{font-family:"Vazirmatn";src:url("fonts/vazirmatn-var-arabic.woff2") format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+06F0-06F9} @font-face{font-family:"Readex Pro";src:url("fonts/readex-pro-var-arabic.woff2") format("woff2");font-weight:160 700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200D} /* ============ +2 ЯЗЫКА (06.07.2026, deep-research 04-standards/07-fonts/fonts-es-zh-v1.html): es-419 + zh-Hans. es (испанский, латам, LTR): отдельный шрифт НЕ нужен - весь испанский (ñ á é í ó ú ü ¿ ¡ ª º) в Latin-1 U+00A0-00FF, УЖЕ объявлен в Inter latin выше и глифы в файле есть (проверено fontTools). 0 доп. файлов, es готов. ⚠ Latin Extended-A/B (U+0100-024F: ā/š/ż/ș/ț для редких латам-имён) в inter-var-latin.woff2 ФИЗИЧЕСКИ НЕТ (0 из 336 глифов, проверено). Поэтому диапазон в unicode-range НЕ добавляли: объявить диапазон без глифов = no-op (символ уйдёт по стеку на system-ui). Нужны Ext-A/B -> пере-сабсетить inter-var-latin с этими глифами. zh (китайский, упрощённая письменность, для ЗАРУБЕЖНЫХ EPC: CNPC/CPECC/Sinopec/PowerChina): нужен CJK-шрифт. Стратегия слоёв: системный CJK-стек ПЕРВЫМ (PingFang SC/YaHei = 0 байт на устройствах подрядчиков) -> Noto Sans SC (OFL, VF, self-host-гарантия) -> sans-serif. Грузит ТОЛЬКО под lang="zh" (см. --font-zh + роутинг). ✅ ЗАВЕНДОРЕНО 09.07.2026: fonts/noto-sans-sc-subset.woff2 - ОДИН вариативный файл (wght 100-900, как Inter/ Vazirmatn/Readex), сабсет pyftsubset ровно под 1034 CJK-глифа, реально используемых в i18n-*.js (не по слепому частотнику 3500, а по факту контента: 100% покрытие проверено fontTools) -> 273 KB, грузится лишь под lang="zh". Пере-сабсет при добавлении новых иероглифов: python3 -m fontTools.subset NotoSansSC[wght].ttf --text-file= --flavor=woff2. До вендоринга zh падал на системный CJK-стек; теперь есть и self-host-гарантия. */ @font-face{font-family:"Noto Sans SC";src:url("fonts/noto-sans-sc-subset.woff2") format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+4E00-9FFF,U+3400-4DBF,U+3000-303F,U+FF00-FFEF,U+2000-206F} :root{ /* ═══ СЛОЙ 1: primitive --ref-* (сырьё; 3-слойная архитектура M3/Carbon из DS-спеки 3-REZULTAT, значения = ЖИВАЯ палитра ZNV после ре-скина 03.07, не navy/teal из спеки - та писалась раньше). Hex живёт ТОЛЬКО здесь; semantic/component-слои ниже - только var(). ═══ */ --ref-green-900:#083f15; --ref-green-700:#0a561b; --ref-green-600:#0d6b23; --ref-green-500:#11882f; --ref-green-ink:#1f6b4c; --ref-green-100:#d4ecdb; --ref-green-050:#e7f5eb; /* статус-тинты «сочнее» 03.07 (просьба Рустема): фоны насыщеннее, рамки плотнее, чернила глубже; AA пересчитан */ --ref-teal-500:#2f8f6f; --ref-teal-100:#abdcc4; --ref-teal-050:#e1f3e9; --ref-amber-500:#d99a1f; --ref-amber-ink:#8a5e06; --ref-amber-900:#3a2a05; --ref-amber-100:#ecca82; --ref-amber-050:#fdf0d0; --ref-red-500:#c0492f; --ref-red-ink:#b03a21; --ref-red-100:#eeab9d; --ref-red-050:#fce4df; --ref-navy-500:#1e3a8a; --ref-navy-950:#0f1b33; --ref-navy-100:#ccd9f4; --ref-navy-050:#e9eefb; --ref-gray-900:#1c1a1a; --ref-gray-600:#4d4843; --ref-gray-400:#726f69; --ref-gray-200:#e6e4dc; --ref-gray-100:#efeadf; --ref-gray-075:#f5f4ed; --ref-gray-050:#faf9f4; --ref-cream:#fbeecc; --ref-rail:#f8f8f3; --ref-white:#ffffff; /* тёмные поверхности: футер/цитаты (navy) и настенный bigscreen-режим дашборда */ --ref-foot-ink:#c7d2e4; --ref-foot-muted:#9fb0c9; --ref-foot-line:#24344f; --ref-foot-chip:#1a2842; --ref-wall-bg:#13203a; --ref-wall-line:#243a5e; --ref-wall-hover:#1a2c4d; --ref-wall-ink:#b9c8e3; --ref-mint-300:#7fe3bd; --ref-darkgreen-950:#16302a; --ref-teal-300:#53b492; /* подсветка кода (JSON-инспектор, quote): ключ/строка/число на тёмном */ --ref-code-key:#7fb2ff; --ref-code-str:#8fe0b8; --ref-code-num:#ffd479; /* ТЁМНАЯ ТЕМА (вариант B 03.07.2026): тёплый тёмно-нейтральный ramp + светлые ZNV-зелёные. База - НЕ navy из старого блока app-settings (тот писался до ре-скина), а тёплая нейтраль в тон светлой палитре; ядро значений унаследовано от тёмного рельса (#211e1b/#2f2a26/#9a958c). Все пары текст/фон прошли AA-гейт скриптом (contrast_check, 03.07): 34/34 >= 4.5 (текст) / 3.0 (графика). */ --ref-dark-950:#121010; --ref-dark-900:#171412; --ref-dark-870:#1a1715; --ref-dark-850:#1c1a17; --ref-dark-800:#211e1b; --ref-dark-750:#262220; --ref-dark-700:#2f2a26; --ref-dark-600:#3a3530; --ref-sand-050:#f0ece4; --ref-sand-100:#ece7e1; --ref-sand-300:#c8c1b6; --ref-sand-400:#bdb6ac; --ref-sand-500:#9a958c; --ref-green-400:#3fae6a; --ref-green-300:#8fe6ac; --ref-green-200:#a9efc0; --ref-green-dim:#1d2f24; --ref-green-dim2:#26402f; --ref-teal-300d:#6dcdab; --ref-teal-200:#8fdfc0; --ref-teal-dim:#14281c; --ref-teal-dl:#1e4a34; --ref-amber-400:#fbbf24; --ref-amber-300:#e9c46a; --ref-amber-dim:#2a2410; --ref-amber-dl:#4d431a; --ref-red-400:#ed5454; --ref-red-300:#ff9d8a; --ref-red-dim:#2a1615; --ref-red-dl:#5a2b28; --ref-navy-300:#8ab1ff; --ref-navy-dim:#1a2740; --ref-navy-dl:#22314f; /* high-contrast темы (light-hc/dark-hc, ориентир VS Code): нейтрали и усиленные статусы */ --ref-black:#000000; --ref-hc-paper:#0a0a0a; --ref-hc-surface:#0d0d0d; --ref-hc-surface2:#050505; --ref-hc-line:#6a6a6a; --ref-hc-line2:#484848; --ref-hc-soft:#e6e6e6; --ref-hc-muted:#c4c4c4; --ref-hcl-soft:#1f2937; --ref-hcl-muted:#333f4d; --ref-hcl-line:#8a97a6; --ref-hcl-line2:#b3bec9; --ref-green-150:#b8f2cd; --ref-green-110:#d3f8e0; --ref-green-hcdim:#0e2417; --ref-green-hcdim2:#153623; --ref-mint-250:#9df5c1; --ref-green-hcbg:#06210f; --ref-green-hcln:#12502e; --ref-amber-250:#ffd24a; --ref-amber-hcbg:#211c05; --ref-amber-hcln:#5a4d10; --ref-red-250:#ff7676; --ref-red-hcbg:#210f0e; --ref-red-hcln:#5a201d; --ref-teal-700:#1c6b48; --ref-amber-700:#9e6700; --ref-red-700:#801202; --ref-navy-250:#9ec1ff; --ref-olive-700:#5a7a12; /* оливково-лаймовый: полоса риска 5-9, белый на нём 4.97:1 */ /* роль-акцент «админ» (плитки прав app-settings) + прочие одиночные роли */ --ref-purple-600:#6b3fb5; --ref-purple-300:#c9b3f2; --ref-purple-100:#d9ccf3; --ref-purple-050:#efe9fb; --ref-purple-dim:#241b33; --ref-purple-dl:#3f2f5c; --ref-gold-500:#dba800; --ref-gold-700:#a37f00; /* золото луны: 700 на светлой шапке (3.2:1, WCAG 1.4.11), 500 в тёмных */ --ref-gray-300:#cbc7bd; --ref-gray-450:#66625c; /* ═══ СЛОЙ 2: semantic ═══ */ /* safety-токены ANSI Z535 - смысл фиксирован, не менять. База = ГРАФИКА (точки, рамки, заливки) */ --danger:var(--ref-red-500); --danger-bg:var(--ref-red-050); --danger-line:var(--ref-red-100); --warn:var(--ref-amber-500); --warn-bg:var(--ref-amber-050); --warn-line:var(--ref-amber-100); --go:var(--ref-teal-500); --go-bg:var(--ref-teal-050); --go-line:var(--ref-teal-100); --info:var(--ref-navy-500); --info-bg:var(--ref-navy-050); --info-line:var(--ref-navy-100); /* статус-ЧЕРНИЛА - мелкий ТЕКСТ статуса на тинте/белом (AA пересчитан по «сочной» палитре 03.07: go-ink 5.57:1 на go-bg · warn-ink 5.04:1 на warn-bg · danger-ink 4.98:1 на danger-bg; на белом все >=5.15). Базовые --go/--warn/--danger мелким текстом НЕ класть - они проходят только как графика (3:1) */ --go-ink:var(--ref-green-ink); --warn-ink:var(--ref-amber-ink); --danger-ink:var(--ref-red-ink); --go-strong:var(--ref-green-ink); /* заливка под белый текст (тост, шаг done): белый на ней 6.43:1 */ --risk-mid:var(--ref-olive-700); --risk-warn-fill:var(--ref-amber-700); /* заливки полос риска 5-9 / 10-16 под белый: 4.97 / 4.78 (константы, темами не переопределяются) */ --on-warn:var(--ref-amber-900); /* текст на янтарной заливке: 5.68:1 */ --ink-inv:var(--ref-white); /* текст/иконки на тёмной или цветной заливке */ /* тёмные поверхности light-темы: футер site-foot, .quote, тёмные слайды/терминальные узлы */ --foot-hd:var(--ref-white); --foot-ink:var(--ref-foot-ink); --foot-muted:var(--ref-foot-muted); --foot-line:var(--ref-foot-line); --foot-chip:var(--ref-foot-chip); --foot-accent:var(--ref-mint-300); /* мятный акцент на тёмном (eyebrow, ok-статус, имена файлов) */ --dark-go-bg:var(--ref-darkgreen-950); /* go-поверхность на тёмном (терминал воронки, «подписано» на стене) */ --deco-teal:var(--ref-teal-500); --deco-teal-2:var(--ref-teal-300); /* декор-градиенты презентации, НЕ статус */ --code-key:var(--ref-code-key); --code-str:var(--ref-code-str); --code-num:var(--ref-code-num); /* настенный bigscreen-режим дашборда */ --wall-bg:var(--ref-wall-bg); --wall-line:var(--ref-wall-line); --wall-hover:var(--ref-wall-hover); --wall-ink:var(--ref-wall-ink); /* брендовая палитра - перенос с znvostok.com (тёплая нейтраль + бренд-зелёный ZNV). AA: #0d6b23=6.7:1 на белом (ссылки/акценты-текст). CTA-заливка затемнена #139634->#11882f 03.07: белый текст был 3.86:1 (провал WCAG 1.4.3), стал 4.58:1; глазу шаг неотличим */ --primary:var(--ref-green-600); --primary-700:var(--ref-green-700); --primary-900:var(--ref-green-900); --primary-50:var(--ref-green-050); --primary-100:var(--ref-green-100); --accent:var(--ref-green-600); --accent-700:var(--ref-green-700); --accent-50:var(--ref-green-050); --cta:var(--ref-green-500); --cta-700:var(--ref-green-600); /* ЕДИНЫЙ «ОБОДОК» активного пункта навигации (segmented-control-состояние, референс - ZN Vostok). Один визуальный язык на весь проект: зелёный inset-ring + светлый фон + зелёный текст. Применяется к .rail a.on (меню), .site-links a.on (меню сайта), .lang-seg.is-active (языки), .toggle button[aria-pressed=true] (сегмент-тоглы). Правишь эффект - правь ЗДЕСЬ, разъезжаться не даёт. */ --nav-ring:inset 0 0 0 1.5px var(--accent); --nav-fill:var(--primary-50); --nav-ink:var(--primary); /* нейтраль ZNV: text-primary, тёплые серые/границы. --muted затемнён #73706a->#726f69 03.07: на --bg-deep было 4.48:1 (провал WCAG на app-фоне), стало 4.54:1; на белом 5.01:1 */ --ink:var(--ref-gray-900); --soft:var(--ref-gray-600); --muted:var(--ref-gray-400); --line:var(--ref-gray-200); --line-2:var(--ref-gray-100); /* поверхности ZNV: bg-app, surface-2, шапка surface-header (кремовая) */ --paper:var(--ref-white); --bg:var(--ref-gray-050); --bg-deep:var(--ref-gray-075); --bg-rail:var(--ref-navy-950); --surface-header:var(--ref-cream); /* surface-пара: фон контролов/вложенных плоскостей. В светлой = paper/bg-deep, тёмные темы переопределяют - страницы пишут var(--surface) вместо хардкод-#fff, и тёмная красит их сама */ --surface:var(--ref-white); --surface-2:var(--ref-gray-075); /* БРЕНД-ЗАЛИВКА под белый текст (кнопки/аватар/CTA-полоса/номер шага). ОТДЕЛЕНА от --primary: в тёмной теме --primary светлеет (текст-акцент), а заливка под белый текст обязана остаться тёмно-зелёной (иначе белое на светло-зелёном - провал AA). Заливки константы во всех темах. */ --brand-fill:var(--ref-green-600); --brand-fill-2:var(--ref-green-500); --brand-fill-hover:var(--ref-green-700); /* одиночные роли поверхностей, чтобы тема красила их токеном, а не костылём-селектором */ --toast-bg:var(--ink); /* тост: тёмная плашка в светлой, серая в тёмной */ --sw-track:var(--ref-gray-300); /* трек выключенного switch */ --veil:rgba(250,249,244,.86); /* полупрозрачная подложка site-nav (blur) */ --skel-sheen:rgba(255,255,255,.65); /* блик skeleton-shimmer */ --admin-ink:var(--ref-purple-600); --admin-bg:var(--ref-purple-050); --admin-line:var(--ref-purple-100); --code-bg:var(--ref-navy-950); --code-ink:var(--ref-foot-ink); /* JSON-pre/инспектор */ --moon:var(--ref-gold-700); /* золото луны (тёмное на креме, яркое в тёмных темах) */ --hover-tint:rgba(13,107,35,.07); /* подсветка ховера луны/языков на шапке */ --muted-on-tint:var(--ref-gray-450); /* подписи на статус-тинтах: --muted на «сочных» тинтах v3 давал 4.1-4.4 */ color-scheme:light; /* нативные контролы/скроллбары следуют теме */ /* СВЕТЛЫЙ нейтральный рельс приложения (канон отчётов Рустема: светлый сайдбар). Уход от тёмного navy. Текст/бордеры тёмные для AA. Тёмные темы держат тёмно-нейтральный рельс (правило ниже). Футер site-foot и journey остаются на --bg-rail */ --rail-bg:var(--ref-rail); --rail-line:var(--ref-gray-200); --rail-group:var(--muted); --rail-ink:var(--ink); --rail-hover:var(--ref-gray-100); --rail-muted:var(--muted); --rail-foot:var(--muted); /* Порядок стеков = канон fonts-decision. Нативный RTL-шрифт ПЕРВЫЙ (Vazirmatn для fa, Readex для ar), Inter дальше. Роутинг детерминирован unicode-range: латиница/кириллица (RBAC, числа) -> Inter (у Vazirmatn/Readex этих глифов нет), арабский диапазон -> нативный шрифт. Ключевое: в --font-ar Vazirmatn НЕ ставим fallback'ом - если Readex не загрузится, арабский уйдёт на СИСТЕМНЫЙ арабский (Noto/Tahoma, верные арабские формы), а не на персидский Vazirmatn (тот без locl рисует арабский персидскими буквами - главная ловушка, ради которой Readex и выбирали). */ --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-fa: "Vazirmatn", "Inter", Tahoma, "Segoe UI", sans-serif; --font-mono: ui-monospace, Menlo, Consolas, monospace; --shadow-sm: 0 1px 2px rgba(16,32,28,.05), 0 1px 3px rgba(16,32,28,.06); --shadow-md: 0 4px 14px rgba(28,26,26,.07), 0 2px 6px rgba(28,26,26,.05); --shadow-lg: 0 18px 50px rgba(28,26,26,.10), 0 6px 18px rgba(28,26,26,.06); --radius:14px; --radius-sm:10px; --rail-w:248px; --topbar-h:60px; /* --- STEP-0 (план 01.07): spacing-шкала (4/8/12/16/24/32/40/48) - лечит «переделки 10 раз» --- */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:40px; --space-8:48px; /* type-шкала (rem) */ --fs-0:.72rem; --fs-1:.78rem; --fs-2:.86rem; --fs-3:.92rem; --fs-4:1rem; --fs-5:1.15rem; --fs-6:1.6rem; /* per-script шрифты + RTL line-height (AR line-height>=1.5, ~+20% размер держим токеном --ar-scale) */ --font-lat: var(--font-ui); --font-ar: "Readex Pro", "Inter", "Noto Sans Arabic", Tahoma, "Segoe UI", sans-serif; /* zh (упрощённый CJK): системный CJK-стек ПЕРВЫМ (0 байт на устройствах подрядчиков) -> Noto Sans SC (self-host-гарантия, ⚠ ещё не завендорен) -> Inter/sans-serif. Применяется только под lang="zh". */ --font-zh: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Noto Sans SC", "Inter", sans-serif; --line-rtl:1.6; --ar-scale:1.18; /* наборы цифр - справочно; фактическая локализация через Intl в JS, НЕ через CSS: FA U+06F0-06F9 (۰۱۲۳۴۵۶۷۸۹) · AR U+0660-0669 (٠١٢٣٤٥٦٧٨٩) */ /* motion (DS-MOTION спеки: Carbon productive + M3; потолок системы 260ms - анимация ОЗНАЧАЕТ смену данных/состояния, не декор; только opacity/transform/color/box-shadow) */ --dur-instant:0ms; --dur-micro:90ms; --dur-fast:130ms; --dur-base:180ms; --dur-moderate:220ms; --dur-overlay:260ms; --ease-standard:cubic-bezier(.2,0,.38,.9); /* базовое движение (hover, тост, rail) */ --ease-entrance:cubic-bezier(0,0,.38,.9); /* появление (модалка, тост, строка) */ --ease-exit:cubic-bezier(.2,0,1,.9); /* исчезновение */ --ease-emphasized:cubic-bezier(.2,0,0,1); /* редкий значимый момент; CSS-эквивалент M3 (одиночный безье) */ --ease-spring:linear(0,.6 10%,1.18 30%,1.04 48%,.99 64%,1.003 82%,1); /* пружина без JS (канон анимаций 2126) */ /* --- ДОМЕННАЯ ПАЛИТРА ИКОНОК РОЛЕЙ (цвет = смысл, не радуга): 8 семей, ANSI Z535 соблюдён - красный только пожар/спасение, жёлтый электрика/изоляция, зелёный безопасность/CTA. Используется карточками ролей в app-settings (var(--dom-*)); --dom-on = иконка на залитой плашке. --- */ --dom-admin:#4a5568; --dom-safety:var(--primary); --dom-fire:#c0392b; --dom-measure:#0f7a77; --dom-elec:#9a6800; --dom-lift:#c05a12; --dom-rad:#8e2fa0; --dom-ops:#2456ad; --dom-on:#ffffff; } /* ============================================================ ТЕМЫ (4 шт: light = :root, light-hc, dark, dark-hc; ориентир VS Code). Принцип: тема = ПЕРЕОПРЕДЕЛЕНИЕ semantic-токенов, компоненты не трогаем - 47-селекторный костыль перекраски из app-settings снят (03.07). Активация: data-theme на (no-flash скрипт в каждой страницы, ключ ptwhub_settings_theme_v1; без сохранённого выбора уважается prefers-color-scheme). Вся секция под @media screen: ПЕЧАТЬ (наряд/PDF) всегда светлая, не инвертируется. ============================================================ */ @media screen{ /* плавная смена темы (reduced-motion глушится глобальным правилом ниже) */ html{transition:background-color var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard)} body,.card,.note,.tw,.modal,.topbar,.rail,.chip,.btn-ghost,select,input,textarea,details{transition:background-color var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard)} /* Светлая контрастная (яркое солнце на площадке): чернее текст, жёстче границы */ html[data-theme="light-hc"]{ --ink:var(--ref-black); --soft:var(--ref-hcl-soft); --muted:var(--ref-hcl-muted); --line:var(--ref-hcl-line); --line-2:var(--ref-hcl-line2); --primary:var(--ref-green-700); --primary-700:var(--ref-green-900); --accent:var(--ref-green-700); --accent-700:var(--ref-green-900); --go:var(--ref-teal-700); --warn:var(--ref-amber-700); --danger:var(--ref-red-700); /* warn-заливка затемнена до amber-700 ради 3:1 графики на белом - значит ТЕКСТ на ней должен быть светлым: белый на #9e6700 = 4.78:1 (AA). Базовый тёмный --on-warn на этой заливке давал 2.90 (бейдж Timeliness/cellbtn/btn-warn/ph-btn). .toast.warn держит свою amber-500-заливку и явный тёмный текст - на него это переопределение не влияет. */ --on-warn:var(--ref-white); } /* Тёмная (тёплая нейтраль + ZNV-зелёный; AA-гейт 34/34 03.07) */ html[data-theme="dark"]{ --bg:var(--ref-dark-900); --bg-deep:var(--ref-dark-950); --paper:var(--ref-dark-800); --surface:var(--ref-dark-750); --surface-2:var(--ref-dark-870); --line:var(--ref-dark-600); --line-2:var(--ref-dark-700); --ink:var(--ref-sand-050); --soft:var(--ref-sand-300); --muted:var(--ref-sand-500); --primary:var(--ref-green-300); --primary-700:var(--ref-green-200); --primary-900:var(--ref-green-110); --primary-50:var(--ref-green-dim); --primary-100:var(--ref-green-dim2); --accent:var(--ref-green-400); --accent-700:var(--ref-green-300); --accent-50:var(--ref-green-dim); --go:var(--ref-teal-300d); --go-bg:var(--ref-teal-dim); --go-line:var(--ref-teal-dl); --go-ink:var(--ref-teal-200); --warn:var(--ref-amber-400); --warn-bg:var(--ref-amber-dim); --warn-line:var(--ref-amber-dl); --warn-ink:var(--ref-amber-300); --danger:var(--ref-red-400); --danger-bg:var(--ref-red-dim); --danger-line:var(--ref-red-dl); --danger-ink:var(--ref-red-300); --info:var(--ref-navy-300); --info-bg:var(--ref-navy-dim); --info-line:var(--ref-navy-dl); /* доменные цвета ролей - светлее для тёмного фона (тот же смысл, читаемость AA на --paper тёмном) */ --dom-admin:#9fb0c4; --dom-safety:var(--primary); --dom-fire:#ef8a7a; --dom-measure:#4fc3bf; --dom-elec:#e3b74a; --dom-lift:#ef9a5e; --dom-rad:#d78ae0; --dom-ops:#7ea6ee; --dom-on:#10201a; --surface-header:var(--ref-dark-800); --rail-bg:var(--ref-dark-850); --rail-line:var(--ref-dark-700); --rail-hover:var(--ref-dark-700); --bg-rail:var(--ref-dark-950); --foot-line:var(--ref-dark-700); --foot-chip:var(--ref-dark-800); --foot-ink:var(--ref-sand-300); --foot-muted:var(--ref-sand-500); --toast-bg:var(--ref-dark-600); --sw-track:var(--ref-dark-600); --moon:var(--ref-gold-500); --hover-tint:rgba(255,255,255,.06); --muted-on-tint:var(--ref-sand-500); --veil:rgba(23,20,18,.86); --skel-sheen:rgba(255,255,255,.07); --admin-ink:var(--ref-purple-300); --admin-bg:var(--ref-purple-dim); --admin-line:var(--ref-purple-dl); color-scheme:dark; } /* Тёмная контрастная (ночная смена): максимум контраста */ html[data-theme="dark-hc"]{ --bg:var(--ref-black); --bg-deep:var(--ref-black); --paper:var(--ref-hc-paper); --surface:var(--ref-hc-surface); --surface-2:var(--ref-hc-surface2); --line:var(--ref-hc-line); --line-2:var(--ref-hc-line2); --ink:var(--ref-white); --soft:var(--ref-hc-soft); --muted:var(--ref-hc-muted); --primary:var(--ref-green-150); --primary-700:var(--ref-green-110); --primary-900:var(--ref-green-110); --primary-50:var(--ref-green-hcdim); --primary-100:var(--ref-green-hcdim2); --accent:var(--ref-green-300); --accent-700:var(--ref-green-150); --accent-50:var(--ref-green-hcdim); --go:var(--ref-mint-250); --go-bg:var(--ref-green-hcbg); --go-line:var(--ref-green-hcln); --go-ink:var(--ref-mint-250); --warn:var(--ref-amber-250); --warn-bg:var(--ref-amber-hcbg); --warn-line:var(--ref-amber-hcln); --warn-ink:var(--ref-amber-250); --danger:var(--ref-red-250); --danger-bg:var(--ref-red-hcbg); --danger-line:var(--ref-red-hcln); --danger-ink:var(--ref-red-250); --info:var(--ref-navy-250); --info-bg:var(--ref-navy-dim); --info-line:var(--ref-navy-dl); --surface-header:var(--ref-hc-paper); --rail-bg:var(--ref-black); --rail-line:var(--ref-hc-line2); --rail-hover:var(--ref-hc-surface); --bg-rail:var(--ref-black); --foot-line:var(--ref-hc-line2); --foot-chip:var(--ref-hc-paper); --foot-ink:var(--ref-hc-soft); --foot-muted:var(--ref-hc-muted); --toast-bg:var(--ref-hc-surface); --sw-track:var(--ref-hc-line2); --moon:var(--ref-gold-500); --hover-tint:rgba(255,255,255,.08); --muted-on-tint:var(--ref-hc-muted); --veil:rgba(0,0,0,.9); --skel-sheen:rgba(255,255,255,.07); --admin-ink:var(--ref-purple-100); --admin-bg:var(--ref-purple-dim); --admin-line:var(--ref-purple-dl); color-scheme:dark; } /* точечные исключения тёмных тем (всё остальное красят токены) */ html[data-theme^="dark"] input[type="checkbox"], html[data-theme^="dark"] input[type="radio"]{accent-color:var(--accent)} } /* конец @media screen (темы) */ *{box-sizing:border-box} html{scroll-behavior:smooth} /* reduced-motion (DS-MOTION §4): НЕ «убить всё» - гасим перемещение/масштаб (вестибулярные триггеры), а цвет/opacity-фидбэк (фокус, статус) оставляем почти мгновенным (WCAG 2.3.3, MDN prefers-reduced-motion) */ @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important; transition-duration:.01ms !important;scroll-behavior:auto !important} .btn:hover,.card-hover:hover,.tier:hover{transform:none !important} } body{margin:0;font-family:var(--font-ui);color:var(--ink);background:var(--bg);line-height:1.55; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} h1,h2,h3,h4{line-height:1.16;margin:0 0 .4em;letter-spacing:-.02em} h1{font-size:clamp(2rem,4.4vw,3.4rem);font-weight:800} h2{font-size:clamp(1.45rem,2.7vw,2.15rem);font-weight:800} h3{font-size:1.15rem;font-weight:700} h4{font-size:1rem;font-weight:700} p{margin:0 0 1rem} a{color:var(--primary);text-decoration:none} a:hover{text-decoration:underline} img{max-width:100%} .wrap{max-width:1200px;margin:0 auto;padding:0 24px} .wrap-wide{max-width:1360px;margin:0 auto;padding:0 24px} .fa{font-family:var(--font-fa);direction:rtl;unicode-bidi:isolate;line-height:var(--line-rtl)} .ar{font-family:var(--font-ar);direction:rtl;unicode-bidi:isolate;line-height:1.75} /* ШРИФТ ПО ЯЗЫКУ УЗЛА (:lang) - наследуется на ВСЁ поддерево. Любой будущий виджет, буллет, динамически вставленный текст в fa/ar-контексте сам берёт верный шрифт по умолчанию, без per-элемент классов. Правило на body -> наследование (слабейший приоритет), поэтому прямой шрифт компонента (mono-код, курсив-подпись) НЕ затирается. AR и FA делят Unicode-блок U+0600-06FF и различимы только по lang, не по кодпоинту - потому выбор шрифта = по языку, а не по символу. Кегль RTL ~+18% (--ar-scale) держим на корне: rem-размеры растут пропорционально. Интерлиньяж AR 1.75, FA 1.6. */ html[lang="fa"],html[lang="ar"]{font-size:calc(100% * var(--ar-scale))} body:lang(fa){font-family:var(--font-fa);line-height:var(--line-rtl)} body:lang(ar){font-family:var(--font-ar);line-height:1.75} body:lang(zh){font-family:var(--font-zh)} /* zh: только шрифт, БЕЗ --ar-scale (CJK читаем в латинском кегле, LTR) */ /* Явный островок другого языка внутри страницы (напр. AR-имя в RU-интерфейсе). :where() обнуляет специфичность правила до 0,0,0 -> прямой шрифт компонента (mono-код .kbd/.quote, курсив-подпись .sig-mark) НЕ затирается, а обычный текст островка шрифт получает. */ :where([lang="fa"]:not(body)){font-family:var(--font-fa)} :where([lang="ar"]:not(body)){font-family:var(--font-ar)} :where([lang="zh"]:not(body)){font-family:var(--font-zh)} .eyebrow{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:.7rem} .lead{font-size:1.16rem;color:var(--soft);max-width:62ch} .muted{color:var(--muted)} .center{text-align:center} :focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px} .skip{position:absolute;inset-inline-start:12px;top:-100px;background:var(--brand-fill);color:var(--ink-inv);padding:.6rem 1rem;border-radius:8px;z-index:200} .skip:focus{top:12px} .hidden{display:none !important} /* ===== кнопки ===== */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:700;font-size:.97rem; padding:.78rem 1.35rem;border-radius:10px;border:1.5px solid transparent;cursor:pointer;min-height:44px; transition:transform var(--dur-micro) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);font-family:inherit;line-height:1;text-decoration:none} .btn:hover{text-decoration:none;transform:translateY(-1px)} .btn:active{transform:translateY(0)} .btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none} .btn-cta{background:var(--cta);color:var(--ink-inv);box-shadow:0 2px 8px rgba(47,143,111,.3)} .btn-cta:hover{background:var(--cta-700);color:var(--ink-inv)} .btn-primary{background:var(--brand-fill);color:var(--ink-inv)} .btn-primary:hover{background:var(--brand-fill-hover);color:var(--ink-inv)} .btn-ghost{background:var(--paper);color:var(--primary);border-color:var(--line)} .btn-ghost:hover{border-color:var(--primary);background:var(--primary-50)} .btn-danger{background:var(--ref-red-500);color:var(--ink-inv)} /* заливка-константа: белый на ней AA во всех темах */ .btn-warn{background:var(--warn);color:var(--on-warn)} .btn-sm{padding:.5rem .9rem;min-height:36px;font-size:.86rem} .btn-lg{padding:.95rem 1.7rem;min-height:52px;font-size:1.05rem} .btn-block{width:100%} .btn-row{display:flex;flex-wrap:wrap;gap:12px} /* ===== бейджи ===== */ .badge{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.04em;padding:.16rem .5rem;border-radius:6px;text-transform:uppercase} .badge-mvp{background:var(--go-bg);color:var(--go-ink)} .badge-v2{background:var(--primary-50);color:var(--primary)} .badge-later{background:var(--bg-deep);color:var(--muted)} .chip{display:inline-flex;align-items:center;gap:.4rem;background:var(--paper);border:1px solid var(--line);border-radius:999px; padding:.4rem .8rem;font-size:.84rem;font-weight:600;color:var(--soft);box-shadow:var(--shadow-sm)} .pill{display:inline-flex;align-items:center;gap:.35rem;font-size:.74rem;font-weight:800;border-radius:999px;padding:.22rem .6rem} .pill-go{color:var(--go-ink);background:var(--go-bg);border:1px solid var(--go-line)} .pill-warn{color:var(--warn-ink);background:var(--warn-bg);border:1px solid var(--warn-line)} .pill-danger{color:var(--danger-ink);background:var(--danger-bg);border:1px solid var(--danger-line)} .pill-info{color:var(--primary);background:var(--primary-50);border:1px solid var(--primary-100)} .pill-muted{color:var(--muted);background:var(--bg-deep);border:1px solid var(--line)} /* провенанс-ссылка */ .src{display:inline-flex;align-items:center;gap:.25rem;font-size:.72rem;font-weight:600;color:var(--muted); background:var(--bg-deep);border:1px solid var(--line);border-radius:999px;padding:.12rem .5rem;white-space:nowrap;line-height:1.4} .src:hover{color:var(--primary);border-color:var(--accent);text-decoration:none} .src .arr{font-size:.66rem} /* ===== карточки ===== */ .card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-sm)} .card-hover{transition:box-shadow var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard),background-color var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard)} .card-hover:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)} .grid{display:grid;gap:20px} .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} .gauto{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))} @media (max-width:960px){.g2,.g3,.g4{grid-template-columns:1fr}} /* note / callout */ .note{border:1px solid var(--line);border-inline-start:4px solid var(--accent);background:var(--paper);border-radius:12px;padding:14px 18px;margin:14px 0;font-size:.94rem;color:var(--soft)} .note b{color:var(--ink)} .note-go{border-left-color:var(--go);background:var(--go-bg)} .note-warn{border-left-color:var(--warn);background:var(--warn-bg)} .note-danger{border-left-color:var(--danger);background:var(--danger-bg)} .note-info{border-left-color:var(--primary);background:var(--primary-50)} /* ============================================================ МАРКЕТИНГОВЫЙ ХЕДЕР / ФУТЕР (инжектится app.js) ============================================================ */ .site-nav{position:sticky;top:0;z-index:60;background:var(--veil);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} .site-nav-inner{display:flex;align-items:center;gap:16px;height:66px} .logo{display:flex;align-items:center;gap:.55rem;font-weight:800;font-size:1.18rem;color:var(--ink);letter-spacing:-.02em} .logo:hover{text-decoration:none} .logo .mark{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--brand-fill),var(--brand-fill-2)); display:grid;place-items:center;color:var(--ink-inv);font-size:1rem;box-shadow:var(--shadow-sm);font-weight:800} .site-links{display:flex;gap:4px;margin-inline-start:14px} .site-links a{color:var(--soft);font-weight:600;font-size:.93rem;padding:.5rem .7rem;border-radius:8px} .site-links a:hover{color:var(--primary);background:var(--nav-fill);box-shadow:var(--nav-ring);text-decoration:none} .site-links a.on{color:var(--nav-ink);background:var(--nav-fill);box-shadow:var(--nav-ring);font-weight:700} .site-right{margin-inline-start:auto;display:flex;align-items:center;gap:10px} .lang-btn{font-size:.85rem;font-weight:700;color:var(--soft);border:1px solid var(--line);background:var(--paper);border-radius:8px;padding:.4rem .6rem;cursor:pointer;min-height:36px} .lang-btn:hover{border-color:var(--accent);color:var(--primary)} /* Переключатель языка «как на znvostok» (скрин Рустема 03.07.2026): БЕЗ белого короба - луна и языки лежат прямо на кремовом топбаре #fbeecc, активный обведён зелёной скруглённой рамкой (НЕ сплошная заливка), неактивные - голый флаг+код. «Белое-на-жёлтом» убрано в корне: белой плашки-пилюли больше нет. Порядок сегментов задаёт app.js LANG_SEGS (EN·FA·AR·RU). */ .langsw{display:inline-flex;direction:ltr;gap:6px;background:transparent;border:0;border-radius:0;overflow:visible;box-shadow:none} .lang-seg{background:transparent;color:var(--soft);font-family:var(--font-ui);font-weight:800;font-size:.8rem;line-height:1;letter-spacing:.02em; padding:.32rem .5rem;min-height:32px;border:0;border-radius:9px;cursor:pointer;transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard)} .lang-seg:hover{color:var(--accent);background:var(--hover-tint)} .lang-seg.is-active{background:var(--nav-fill);color:var(--nav-ink);box-shadow:var(--nav-ring)} .lang-seg.is-active:hover{background:var(--primary-100)} .lang-seg:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .lang-seg[lang="fa"]{font-family:var(--font-fa)} .lang-seg[lang="ar"]{font-family:var(--font-ar)} /* флажок (inline-SVG) + код языка внутри сегмента */ .lang-seg{display:inline-flex;align-items:center;justify-content:center;gap:6px} .lang-seg .flag{width:18px;height:12.6px;border-radius:3px;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.16);display:block} .lang-code{font-family:var(--font-ui);font-weight:800} /* панель язык-бар: полумесяц-заглушка слева + переключатель; порядок всегда LTR (луна слева и в RTL) */ .langbar{display:inline-flex;align-items:center;gap:10px;direction:ltr} /* луна/солнце переключателя темы - БЕЗ рамки и фона, золотой знак на шапке (решение 03.07) */ .theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:9px;background:transparent;color:var(--moon);cursor:pointer;box-shadow:none;transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard)} .theme-toggle svg{width:19px;height:19px;display:block} .theme-toggle svg path{fill:none;stroke:currentColor;stroke-width:1.3;stroke-linejoin:round} .theme-toggle:hover{color:var(--accent);background:var(--hover-tint)} .theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px} body.bigscreen .theme-toggle{background:var(--wall-bg);border-color:var(--wall-line);color:var(--wall-ink)} body.bigscreen .theme-toggle:hover{background:var(--wall-hover);color:var(--ink-inv)} /* в тёмном настенном режиме переключатель тоже тёмный */ body.bigscreen .langsw{background:var(--wall-bg);border-color:var(--wall-line)} body.bigscreen .lang-seg{color:var(--wall-ink);border-inline-start-color:var(--wall-line)} body.bigscreen .lang-seg:hover{background:var(--wall-hover);color:var(--ink-inv)} body.bigscreen .lang-seg.is-active{color:var(--ink)} @media (max-width:980px){.site-links{display:none}.site-right .btn-ghost{display:none}} footer.site-foot{background:var(--bg-rail);color:var(--foot-ink);padding:54px 0 28px;margin-top:24px} .foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px;margin-bottom:32px} @media (max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}} .foot-grid h4{color:var(--foot-hd);font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:1rem} .foot-grid a{color:var(--foot-ink);display:block;font-size:.9rem;margin-bottom:.55rem} .foot-grid a:hover{color:var(--foot-hd)} .foot-brand .logo{color:var(--foot-hd);margin-bottom:.8rem} .foot-brand p{font-size:.88rem;color:var(--foot-muted);max-width:36ch} .foot-bottom{border-top:1px solid var(--foot-line);padding-top:20px;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;font-size:.8rem;color:var(--foot-muted)} .foot-prov{display:flex;flex-wrap:wrap;gap:8px} .foot-prov a{font-size:.74rem;color:var(--foot-muted);background:var(--foot-chip);border:1px solid var(--foot-line);border-radius:999px;padding:.2rem .55rem} .foot-prov a:hover{color:var(--foot-hd);border-color:var(--accent)} /* ===== секции маркетинга ===== */ section{padding:64px 0} .section-head{max-width:66ch;margin:0 auto 38px;text-align:center} .section-head .lead{margin-left:auto;margin-right:auto} .hero{position:relative;overflow:hidden;background: radial-gradient(900px 420px at 85% -8%, rgba(13,148,136,.12), transparent 60%), radial-gradient(760px 500px at 6% 110%, rgba(30,58,138,.10), transparent 62%), linear-gradient(180deg,var(--paper), var(--bg));padding:0} .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center;padding:72px 0 60px} @media (max-width:980px){.hero-grid{grid-template-columns:1fr;gap:36px;padding:46px 0 40px}} .hero h1 .hl{background:linear-gradient(120deg,var(--primary),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent} .hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin:1.4rem 0 1rem} .hero-note{font-size:.86rem;color:var(--muted);display:flex;align-items:center;gap:.4rem} /* stat / KPI плитки (общие) */ .stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px} .stat{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-sm)} .stat .v{font-size:1.9rem;font-weight:800;letter-spacing:-.02em;line-height:1} .stat .k{font-size:.8rem;color:var(--muted);margin-top:.3rem;font-weight:600} .stat.go .v{color:var(--go)} .stat.danger .v{color:var(--danger)} .stat.warn .v{color:var(--warn)} .stat.blue .v{color:var(--primary)} .stat.teal .v{color:var(--accent)} /* ============================================================ ПРИЛОЖЕНИЕ (app-shell): рельс + топбар + main body.app[data-active="..."] · #rail и #topbar инжектит app.js ============================================================ */ body.app{background:var(--bg-deep)} .rail{position:fixed;top:0;inset-inline-start:0;bottom:0;width:var(--rail-w);background:var(--rail-bg);color:var(--rail-ink); border-inline-end:1px solid var(--rail-line); display:flex;flex-direction:column;z-index:50;overflow-y:auto} .rail-brand{display:flex;align-items:center;gap:.55rem;height:var(--topbar-h);padding:0 18px;color:var(--rail-ink);font-weight:800;font-size:1.12rem} .rail-brand .mark{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--brand-fill),var(--brand-fill-2));display:grid;place-items:center;color:var(--ink-inv);font-weight:800} .rail-group{padding:14px 12px 4px;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--rail-group);font-weight:800} .rail a{display:flex;align-items:center;gap:.7rem;padding:.6rem .8rem;margin:2px 8px;border-radius:9px;color:var(--rail-ink);font-size:.92rem;font-weight:600} .rail a:hover{background:var(--nav-fill);box-shadow:var(--nav-ring);color:var(--rail-ink);text-decoration:none} .rail a.on{background:var(--nav-fill);box-shadow:var(--nav-ring);color:var(--nav-ink);font-weight:800} .rail a .ic{width:22px;text-align:center;flex:none;display:flex;align-items:center;justify-content:center} .rail a .ic .lu-ic{width:19px;height:19px;display:block} .rail a .rb{margin-inline-start:auto;font-size:.6rem;font-weight:800;background:var(--rail-hover);color:var(--rail-muted);border-radius:999px;padding:.08rem .4rem} .rail a.on .rb{background:var(--primary-100);color:var(--primary)} /* «Мобильное приложение» - отдельный ВЫДЕЛЕННЫЙ пункт под «Системой»: не модуль, а полевой клиент. Отделён отступом сверху + пунктирной акцент-рамкой, чтобы читался как особая сущность, а не строка меню. */ .rail a.rail-hl{margin-top:14px;border:1px dashed var(--accent);background:var(--primary-50);color:var(--nav-ink);font-weight:800} .rail a.rail-hl:hover{background:var(--primary-100);box-shadow:var(--nav-ring);border-style:solid} .rail a.rail-hl.on{background:var(--primary-100);box-shadow:var(--nav-ring);border-style:solid} .rail a.rail-hl .rb{background:var(--brand-fill);color:var(--ink-inv)} .rail-foot{margin-top:auto;padding:14px 16px;border-top:1px solid var(--rail-line);font-size:.78rem;color:var(--rail-foot)} .rail-foot a{color:var(--rail-muted);display:inline} /* ═══ МЕНЮ ОБЯЗАНО ВЛЕЗАТЬ В ОКНО (18.07.2026, жалоба Рустема) ═══ Симптом: наводишь курсор на левое меню, крутишь колесо вверх - едет не страница, а само меню; пока не докрутишь его до самого верха, страница стоит. Причина не в поломке: меню фиксировано на всю высоту и имеет свою прокрутку, а его содержимое - 841 пиксель при 15 пунктах. Как только окно ниже (Safari с панелью вкладок на 13-дюймовом ноутбуке), меню забирает колесо себе - браузер отдаёт прокрутку наружу только после упора. Лечение по причине, а не обход: на невысоких окнах меню ужимается и влезает целиком - тогда своей прокрутки у него нет вовсе и колесо всегда достаётся странице. На большом экране вид прежний, ничего не меняется. Замер: 841 → 731 → 625 пикселей по ступеням. */ @media (max-height:880px){ .rail a{padding:.42rem .8rem;margin:1px 8px} .rail-group{padding:10px 12px 3px} .rail-brand{height:52px} .rail-foot{padding:10px 16px} .rail a.rail-hl{margin-top:9px} } @media (max-height:780px){ .rail a{padding:.3rem .8rem;font-size:.88rem} .rail a .ic .lu-ic{width:17px;height:17px} .rail-group{padding:8px 12px 2px;font-size:.64rem} .rail-brand{height:46px;font-size:1.02rem} .rail-foot{padding:8px 16px;font-size:.74rem} } @media (max-height:700px){ .rail a{padding:.24rem .8rem;margin:0 8px} .rail-group{padding:6px 12px 2px} .rail-brand{height:42px} .rail-foot{padding:6px 16px;font-size:.72rem} .rail a.rail-hl{margin-top:6px} } /* Тёмные темы держат рельс тёмно-нейтральным - это делают ТОКЕНЫ тем-блоков (--rail-bg/--rail-line/ --rail-hover переопределены, --rail-ink/--rail-muted следуют за --ink/--muted). Прежний блок прямых hex-правил здесь снят 03.07 (консолидация тёмной, план 2026-07-03-dark-tema). */ .appwrap{margin-inline-start:var(--rail-w);min-height:100vh;display:flex;flex-direction:column} .topbar{position:sticky;top:0;z-index:40;height:var(--topbar-h);background:var(--surface-header);border-bottom:1px solid var(--line); display:flex;align-items:center;gap:14px;padding:0 22px} .topbar .crumbs{font-size:.92rem;color:var(--soft);font-weight:600} .topbar .crumbs b{color:var(--ink)} .topbar .search{flex:1;max-width:420px} .topbar .search input{width:100%;border:1px solid var(--line);border-radius:9px;padding:.5rem .8rem;font-size:.9rem;font-family:inherit;min-height:38px;background:var(--paper);color:var(--ink)} .topbar-right{margin-inline-start:auto;display:flex;align-items:center;gap:12px} .jalclock{font-size:.82rem;color:var(--soft);text-align:end;line-height:1.2} .jalclock .fa,.jalclock .ar{color:var(--primary);font-weight:700} .jalclock .greg-sub{color:var(--muted);font-weight:400} /* Гамбургер (☰) - только мобильный: на десктопе рельс всегда виден, кнопка не нужна и мешает (v2.1) */ #railToggle{display:none} @media (max-width:1000px){#railToggle{display:inline-flex;align-items:center;justify-content:center}} /* Колокольчик уведомлений (DS-HEADER, styleguide: .hd-iconbtn 38×38 + .hd-dot). Белая кнопка на кремовой шапке, красная точка непрочитанного (--danger). Touch 38px >= 24 (WCAG 2.2 AA). dir-aware. */ /* Колокол = один стиль с луной (.theme-toggle): голый на шапке, без короба/рамки, 32/19px, hover как у луны (--hover-tint). Красная точка непрочитанного - её граница = цвет шапки, «вырезает» её. */ .topbar-bell{position:relative;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex:none;padding:0;border:0;border-radius:9px;background:transparent;cursor:pointer;box-shadow:none;transition:background var(--dur-fast) var(--ease-standard)} .topbar-bell svg{width:19px;height:19px;display:block} .topbar-bell:hover{background:var(--hover-tint)} .topbar-bell:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .topbar-bell .bell-dot{position:absolute;top:5px;inset-inline-end:5px;width:7px;height:7px;border-radius:50%;background:var(--danger);border:1.5px solid var(--surface-header)} body.bigscreen .topbar-bell{background:var(--wall-bg)} body.bigscreen .topbar-bell:hover{background:var(--wall-hover)} .avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--brand-fill),var(--brand-fill-2));color:var(--ink-inv);display:grid;place-items:center;font-weight:800;font-size:.85rem;flex:none} .avatar .avatar-ini{font-size:.78rem;font-weight:800;letter-spacing:.02em;line-height:1} button.avatar{border:none;cursor:pointer;font-size:1.05rem;font-family:inherit;padding:0} button.avatar:hover{box-shadow:0 0 0 3px var(--primary-50)} button.avatar:focus-visible{outline:3px solid var(--accent);outline-offset:2px} /* Чип текущего пользователя (демо-персона): имя + роль слева от кругляка. Имя переводится (roleAvatarHtml). На узких экранах (<=1000px) текст скрыт - остаётся только кругляк, чтобы не переполнять шапку. */ .avatar-user{display:inline-flex;align-items:center;gap:9px;border:none;background:transparent;cursor:pointer;font-family:inherit;padding:2px 4px;border-radius:12px} .avatar-user:hover{background:var(--hover-tint)} .avatar-user:focus-visible{outline:3px solid var(--accent);outline-offset:2px} .avatar-user .au-txt{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;text-align:end;line-height:1.18;min-width:0} .avatar-user .au-name{font-weight:800;font-size:.82rem;color:var(--ink);white-space:nowrap} .avatar-user .au-role{font-weight:600;font-size:.7rem;color:var(--muted);white-space:nowrap} .avatar-user:hover .avatar{box-shadow:0 0 0 3px var(--primary-50)} @media (max-width:1000px){.avatar-user .au-txt{display:none}} /* меню выбора роли (Фаза 5, RBAC-демо) - рендерится в общей модалке openModal */ .rolepick-list{display:flex;flex-direction:column;gap:8px;max-height:52vh;overflow:auto} .rolepick{display:flex;align-items:center;gap:11px;width:100%;text-align:start;background:var(--paper);border:1px solid var(--line); border-radius:11px;padding:10px 12px;cursor:pointer;font-family:inherit;transition:box-shadow var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard)} .rolepick:hover{border-color:var(--primary);box-shadow:var(--shadow-sm)} .rolepick.on{border-color:var(--accent);background:var(--accent-50)} .rolepick .rp-ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-size:1.15rem;flex:none;background:var(--bg-deep)} .rolepick .rp-main{display:flex;flex-direction:column;gap:4px;min-width:0} .rolepick .rp-name{font-weight:700;color:var(--ink);font-size:.92rem} .rolepick .rp-acts{display:flex;flex-wrap:wrap;gap:4px} .rolepick .rp-chip{font-size:.7rem;padding:.14rem .5rem} /* было 9px inline - нечитаемо, особенно fa/ar «قراءة فقط» */ .appmain{flex:1;padding:26px 26px 60px} .appmain .page-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px;margin-bottom:22px} .appmain .page-head h1{font-size:1.6rem;margin:0} .appmain .page-head .sub{color:var(--muted);font-size:.92rem} .appmain .page-head .ph-right{margin-inline-start:auto;display:flex;gap:10px;flex-wrap:wrap} @media (max-width:1000px){ .rail{transform:translateX(-100%);transition:transform var(--dur-moderate) var(--ease-standard)} [dir="rtl"] .rail{transform:translateX(100%)} /* drawer выезжает справа в RTL (transform logical-свойствами не покрывается) */ body.app.rail-open .rail{transform:none;box-shadow:var(--shadow-lg)} .appwrap{margin-inline-start:0} } /* ===== таблицы (реестр и сравнения) ===== */ .tw{width:100%;max-width:100%;border-collapse:separate;border-spacing:0;background:var(--paper);border:1px solid var(--line); border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm);table-layout:fixed} .tw caption{caption-side:top;text-align:start;font-size:.85rem;color:var(--muted);padding:0 0 10px} .tw th,.tw td{padding:12px 13px;text-align:start;vertical-align:top;border-bottom:1px solid var(--line);font-size:.87rem;word-wrap:break-word;overflow-wrap:break-word} .tw thead th{background:linear-gradient(180deg,var(--paper),var(--bg-deep));font-weight:800;color:var(--ink);font-size:.8rem;position:sticky;top:var(--topbar-h);z-index:2} .tw thead th.us{background:linear-gradient(180deg,var(--primary-50),var(--primary-100));color:var(--primary);border-bottom:2px solid var(--primary)} .tw tbody th{font-weight:700;color:var(--ink);background:var(--paper)} .tw td.us-col{background:var(--primary-50)} .tw tbody tr.clickable{cursor:pointer} .tw tbody tr.clickable:hover{background:var(--primary-50)} .tw tr:last-child th,.tw tr:last-child td{border-bottom:none} .cell-y{color:var(--go-ink);font-weight:700}.cell-n{color:var(--danger-ink);font-weight:700}.cell-p{color:var(--warn-ink);font-weight:700} .mini{display:block;font-size:.74rem;color:var(--muted);font-weight:400;margin-top:2px} @media (max-width:1000px){.tw thead th{top:0}} /* статусные точки/бейджи реестра */ .st{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:700;border-radius:999px;padding:.2rem .6rem;white-space:nowrap} .st .dot{width:8px;height:8px;border-radius:50%} .st-active{color:var(--go-ink);background:var(--go-bg)} .st-active .dot{background:var(--go)} .st-draft{color:var(--muted);background:var(--bg-deep)} .st-draft .dot{background:var(--muted)} .st-review{color:var(--primary);background:var(--primary-50)} .st-review .dot{background:var(--primary)} .st-wait{color:var(--warn-ink);background:var(--warn-bg)} .st-wait .dot{background:var(--warn)} .st-expired,.st-rejected,.st-suspended{color:var(--danger-ink);background:var(--danger-bg)} .st-expired .dot,.st-rejected .dot,.st-suspended .dot{background:var(--danger)} .st-closed{color:var(--soft);background:var(--bg-deep)} .st-closed .dot{background:var(--soft)} /* ===== форма наряда ===== */ .form-section{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;margin-bottom:18px;box-shadow:var(--shadow-sm)} .form-section > h3{display:flex;align-items:center;gap:.5rem;margin-bottom:.3rem} .form-section .fs-sub{color:var(--muted);font-size:.85rem;margin:0 0 1rem} .field{margin-bottom:14px} .field label{display:block;font-size:.82rem;font-weight:700;color:var(--soft);margin-bottom:.3rem} .field .req{color:var(--danger)} .field input,.field select,.field textarea{width:100%;border:1px solid var(--line);border-radius:9px;padding:.6rem .75rem;font-size:.92rem;font-family:inherit;min-height:42px;background:var(--paper)} .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent)} .field textarea{min-height:84px;resize:vertical} .field .hint{font-size:.76rem;color:var(--muted);margin-top:.25rem} .field-row{display:grid;grid-template-columns:repeat(2,1fr);gap:14px} @media (max-width:680px){.field-row{grid-template-columns:1fr}} .check{display:flex;align-items:flex-start;gap:.6rem;padding:.5rem 0;font-size:.9rem} .check input{width:20px;height:20px;margin-top:2px;flex:none} /* газ-ячейки */ .gas-row{display:flex;gap:8px;flex-wrap:wrap} .gas-cell{flex:1;min-width:78px;text-align:center;border:1px solid var(--line);border-radius:10px;padding:8px 4px;background:var(--paper)} .gas-cell.ok{border-color:var(--go-line);background:var(--go-bg)} .gas-cell.bad{border-color:var(--danger-line);background:var(--danger-bg)} .gas-n{font-size:.72rem;color:var(--muted);font-weight:700} .gas-cell.ok .gas-n,.gas-cell.bad .gas-n,.gas-cell.ok .gas-u,.gas-cell.bad .gas-u{color:var(--muted-on-tint)} .gas-v{font-size:1.05rem;font-weight:800;color:var(--ink)} .gas-cell.bad .gas-v{color:var(--danger-ink)} .gas-u{font-size:.66rem;color:var(--muted)} .gas-flag{font-size:.66rem;font-weight:800;margin-top:2px} .gas-cell.ok .gas-flag{color:var(--go-ink)} .gas-cell.bad .gas-flag{color:var(--danger-ink)} /* ===== степпер жизненного цикла ===== */ .stepper{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px} .step{flex:1;min-width:120px;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:10px 12px;position:relative;font-size:.82rem} .step .sn{display:inline-flex;width:22px;height:22px;border-radius:50%;background:var(--bg-deep);color:var(--soft);font-weight:800;font-size:.74rem;align-items:center;justify-content:center;margin-inline-end:.4rem} .step.done{border-color:var(--go-line);background:var(--go-bg)} .step.done .sn{background:var(--go-strong);color:var(--ink-inv)} .step.active{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-50)} .step.active .sn{background:var(--brand-fill);color:var(--ink-inv)} .step.blocked{border-color:var(--danger-line);background:var(--danger-bg)} .step.blocked .sn{background:var(--ref-red-500);color:var(--ink-inv)} .step.blocked .st-meta{color:var(--danger-ink);font-weight:700} .step .st-name{font-weight:700;color:var(--ink)} .step .st-meta{display:block;color:var(--muted);font-size:.72rem;margin-top:2px} .step.done .st-meta{color:var(--muted-on-tint)} /* подписи */ .sig-list{display:flex;flex-direction:column;gap:10px} .sig-item{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--paper)} .sig-item.signed{border-color:var(--go-line);background:var(--go-bg)} .sig-item.signed .sig-meta{color:var(--muted-on-tint)} .sig-role{font-weight:700;font-size:.88rem} .sig-meta{font-size:.76rem;color:var(--muted)} .sig-mark{margin-inline-start:auto;font-family:"Brush Script MT",cursive;font-size:1.3rem;color:var(--primary)} .sig-wait{margin-inline-start:auto;font-size:.76rem;color:var(--muted)} /* QR (декоративный плейсхолдер - в проде реальный генератор) */ /* QR пришпилен к ref-токенам НАМЕРЕННО: сканируемый код всегда тёмный-на-светлом, тема его НЕ инвертирует (инвертированный QR половина сканеров не читает) */ .qr{width:120px;height:120px;border-radius:8px;background: conic-gradient(from 0deg,var(--ref-gray-900) 0 25%,var(--ref-white) 0 50%,var(--ref-gray-900) 0 75%,var(--ref-white) 0) 0 0/20px 20px, linear-gradient(var(--ref-gray-900),var(--ref-gray-900)) center/56% 56% no-repeat; border:6px solid var(--ref-white);box-shadow:inset 0 0 0 1px var(--line);position:relative} .qr::after{content:"";position:absolute;inset:32% 32%;background:var(--ref-white);border-radius:3px} .qr.sm{width:64px;height:64px;border-width:4px;background-size:12px 12px} /* ===== тарифы ===== */ .pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch} @media (max-width:920px){.pricing-grid{grid-template-columns:1fr;max-width:460px;margin:0 auto}} .tier{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:28px 24px;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);position:relative;transition:box-shadow var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard),background-color var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard)} .tier:hover{box-shadow:var(--shadow-md)} .tier.featured{border:2px solid var(--accent);box-shadow:var(--shadow-lg)} .tier-flag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--brand-fill);color:var(--ink-inv);font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:.28rem .8rem;border-radius:999px;white-space:nowrap} .tier h3{font-size:1.3rem;margin-bottom:.2rem} .tier .who{font-size:.85rem;color:var(--muted);min-height:2.6em;margin-bottom:1rem} .tier .price{display:flex;align-items:baseline;gap:.3rem} .tier .cur{font-size:1.3rem;font-weight:800}.tier .amt{font-size:2.5rem;font-weight:800;letter-spacing:-.03em}.tier .per{font-size:.9rem;color:var(--muted);font-weight:600} .tier .strike{font-size:.92rem;color:var(--muted);text-decoration:line-through;margin-top:.2rem} .tier .save{display:inline-block;font-size:.78rem;font-weight:800;color:var(--go-ink);background:var(--go-bg);border:1px solid var(--go-line);border-radius:999px;padding:.2rem .6rem;margin:.4rem 0 .2rem} .tier .anchor{font-size:.76rem;color:var(--accent);font-weight:700;margin:.6rem 0 1.1rem} .tier .btn{width:100%;margin-bottom:1.2rem} .tier ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem} .tier li{font-size:.88rem;color:var(--soft);display:flex;align-items:flex-start;gap:.5rem} .tier li .ck{color:var(--go);font-weight:800;flex:none} .tier li.muted .ck{color:var(--muted)} .toggle{display:inline-flex;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:4px;box-shadow:var(--shadow-sm)} .toggle button{border:none;background:transparent;font-family:inherit;font-weight:700;font-size:.88rem;color:var(--soft);padding:.5rem 1rem;border-radius:999px;cursor:pointer;min-height:38px;transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard)} .toggle button[aria-pressed="true"]{background:var(--nav-fill);box-shadow:var(--nav-ring);color:var(--nav-ink)} .toggle.teal button[aria-pressed="true"]{background:var(--nav-fill);box-shadow:var(--nav-ring);color:var(--nav-ink)} .save-pill{font-size:.74rem;font-weight:800;color:var(--go-ink);background:var(--go-bg);border:1px solid var(--go-line);border-radius:999px;padding:.25rem .6rem} /* ===== FAQ / аккордеон ===== */ .faq-grid{max-width:840px;margin:0 auto;display:flex;flex-direction:column;gap:12px} .faq{background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-sm);overflow:hidden} .faq summary{cursor:pointer;list-style:none;padding:18px 20px;font-weight:700;font-size:1rem;color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:44px} .faq summary::-webkit-details-marker{display:none} .faq summary:hover{color:var(--primary)} .faq summary .chev{transition:transform var(--dur-base) var(--ease-standard);color:var(--accent);font-size:1.1rem;flex:none} .faq[open] summary .chev{transform:rotate(180deg)} .faq .ans{padding:0 20px 18px;color:var(--soft);font-size:.94rem} .faq .ans p:last-child{margin-bottom:0} /* CTA-полоса (бренд-заливка константа: белый текст AA во всех темах) */ .cta-band{background:linear-gradient(135deg,var(--brand-fill),var(--brand-fill-2));color:var(--ink-inv);border-radius:22px;padding:48px 40px;text-align:center;box-shadow:var(--shadow-lg);position:relative;overflow:hidden} .cta-band h2{color:var(--ink-inv)}.cta-band p{color:var(--ink-inv);max-width:56ch;margin:0 auto 1.4rem} /* константа: заливка полосы не флипается, чернила тоже (белый: 4.58+ на обоих концах градиента) */ .cta-band .btn-cta{background:var(--paper);color:var(--primary)}.cta-band .btn-cta:hover{background:var(--primary-50);color:var(--primary-700)} /* ===== модалка ===== */ .modal-bg{position:fixed;inset:0;background:rgba(15,27,51,.55);backdrop-filter:blur(3px);z-index:300;display:none;align-items:center;justify-content:center;padding:20px} .modal-bg.open{display:flex} .modal{background:var(--paper);border-radius:16px;max-width:560px;width:100%;max-height:90vh;overflow:auto;box-shadow:var(--shadow-lg)} .modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line)} .modal-head h3{margin:0} .modal-x{border:none;background:var(--bg-deep);border-radius:8px;width:34px;height:34px;cursor:pointer;font-size:1.1rem;color:var(--soft)} .modal-body{padding:20px 22px} .modal-foot{padding:14px 22px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px} /* ===== тосты ===== */ .toast-wrap{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:400;display:flex;flex-direction:column;gap:10px;align-items:center} .toast{background:var(--toast-bg);color:var(--ref-white);padding:.7rem 1.1rem;border-radius:10px;box-shadow:var(--shadow-lg);font-size:.9rem;font-weight:600;max-width:90vw;animation:toastin var(--dur-moderate) var(--ease-entrance)} /* цветные тосты - заливки-константы (белый/тёмный текст на них AA в любой теме) */ .toast.go{background:var(--go-strong)}.toast.danger{background:var(--ref-red-500)}.toast.warn{background:var(--ref-amber-500);color:var(--ref-amber-900)}.toast.info{background:var(--brand-fill)} @keyframes toastin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* ===== телефон-рамка (mobile.html) ===== */ .phone{width:360px;max-width:100%;height:740px;background:var(--bg-rail);border-radius:38px;padding:12px;box-shadow:var(--shadow-lg);position:relative;flex:none} .phone .screen{background:var(--bg);border-radius:28px;height:100%;overflow:hidden;position:relative;display:flex;flex-direction:column} .phone .notch{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:120px;height:22px;background:var(--bg-rail);border-radius:0 0 14px 14px;z-index:5} .ph-status{height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;font-size:.72rem;color:var(--soft);font-weight:700;background:var(--paper);border-bottom:1px solid var(--line)} .ph-body{flex:1;overflow-y:auto;padding:14px} .ph-tabbar{display:flex;border-top:1px solid var(--line);background:var(--paper)} .ph-tab{flex:1;border:none;background:transparent;padding:.5rem;font-family:inherit;font-size:.66rem;color:var(--muted);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px} .ph-tab .ic{font-size:1.2rem} .ph-tab.on{color:var(--accent);font-weight:800} .ph-tab .badge-n{background:var(--ref-red-500);color:var(--ink-inv);border-radius:999px;font-size:.6rem;padding:0 .3rem;position:absolute} /* служебное */ .kbd{font-family:var(--font-mono);font-size:.8rem;background:var(--bg-deep);border:1px solid var(--line);border-radius:6px;padding:.1rem .4rem} .quote{font-family:var(--font-mono);font-size:.82rem;background:var(--bg-rail);color:var(--foot-ink);border-radius:12px;padding:14px 16px;overflow:auto;white-space:pre;line-height:1.5} .divider{height:1px;background:var(--line);margin:24px 0;border:none} .tag{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:700} /* каркас зеркалится logical-свойствами (.rail inset-inline-start, .appwrap margin-inline-start) - патчи [dir=rtl] удалены (план 01.07, STEP-2) */ /* ============================================================ v3 ДВИЖОК: help «?», хлебные крошки, индикатор стадии, язык ============================================================ */ /* знак вопроса на виджете (фичи 20,22,24,29) */ .help-q{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%; border:1.5px solid var(--primary-100);background:var(--primary-50);color:var(--primary); font-weight:800;font-size:.74rem;line-height:1;cursor:pointer;flex:none;padding:0; font-family:inherit;transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard);vertical-align:middle;margin-inline-start:.35rem} .help-q:hover{background:var(--brand-fill);color:var(--ink-inv);border-color:var(--brand-fill);transform:scale(1.08)} .help-q:focus-visible{outline:3px solid var(--accent);outline-offset:2px} h3 .help-q,h4 .help-q,.form-section>h3 .help-q{margin-top:-2px} /* хлебные крошки (фича 19) - всегда видно «где я» */ .crumbline{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;font-size:.82rem;color:var(--muted);margin-bottom:12px} .crumbline a{color:var(--soft);font-weight:600} .crumbline a:hover{color:var(--primary)} .crumbline .sep{color:var(--line);font-weight:700} .crumbline span[aria-current]{color:var(--ink);font-weight:700} [dir="rtl"] .crumbline{direction:rtl} /* индикатор стадии «где я» (фича 17) - компактный, элегантный */ .stagerail{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0 0 18px;padding:0; background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:8px;box-shadow:var(--shadow-sm)} .sr-step{display:flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:700;color:var(--muted); padding:.3rem .6rem;border-radius:8px;white-space:nowrap} .sr-step .sr-n{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%; background:var(--bg-deep);color:var(--soft);font-size:.66rem;font-weight:800;flex:none} .sr-step.done{color:var(--go-ink)} .sr-step.done .sr-n{background:var(--go-strong);color:var(--ink-inv)} .sr-step.now{color:var(--primary);background:var(--primary-50)} .sr-step.now .sr-n{background:var(--brand-fill);color:var(--ink-inv)} .sr-step.blocked{color:var(--danger-ink);background:var(--danger-bg)} .sr-step.blocked .sr-n{background:var(--ref-red-500);color:var(--ink-inv)} .sr-step.todo{color:var(--muted)} @media (max-width:680px){.sr-step .sr-l{display:none}.sr-step{padding:.3rem}} /* кнопка языка: активный язык выделен */ .lang-btn b{color:var(--primary)} .lang-btn .fa{font-family:var(--font-fa)} .lang-btn .ar{font-family:var(--font-ar)} /* «для Рустема» - пояснительный блок маркетинговых решений (фича 34) */ .forr{border:1.5px dashed var(--accent);background:var(--accent-50);border-radius:12px;padding:14px 16px 14px 44px;margin:14px 0;position:relative;font-size:.92rem;color:var(--soft)} .forr::before{content:"для Рустема";position:absolute;top:-10px;left:14px;background:var(--brand-fill);color:var(--ink-inv);font-size:.68rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:.14rem .5rem;border-radius:6px} .forr::after{content:"👤";position:absolute;left:14px;top:16px;font-size:1.1rem} .forr b{color:var(--ink)} /* раздел app-help (Ответы на вопросы) */ .help-card{scroll-margin-top:calc(var(--topbar-h) + 16px)} .help-toc{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 22px} .help-toc a{font-size:.84rem;font-weight:600;color:var(--soft);background:var(--paper);border:1px solid var(--line); border-radius:999px;padding:.35rem .8rem} .help-toc a:hover{border-color:var(--accent);color:var(--primary);text-decoration:none} /* ============================================================ СОСТОЯНИЯ ВИДЖЕТОВ (STEP-5, план 01.07): empty(none/allClear/noResults), skeleton, error, offline. Один источник, ваниль, RTL-safe. Цвет ANSI Z535 всегда дублируется иконкой+текстом (дальтонизм оператора). ============================================================ */ .state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-2); padding:var(--space-6) var(--space-4);color:var(--soft)} .state .st-ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:1.5rem;background:var(--bg-deep)} .state .st-title{font-weight:800;color:var(--ink);font-size:var(--fs-3)} .state .st-sub{font-size:var(--fs-2);color:var(--muted);max-width:42ch} .state.allclear .st-ic{background:var(--go-bg);color:var(--go)} /* штатная тишина - зелёная галочка, БЕЗ CTA */ .state.allclear .st-title{color:var(--go-ink)} .state.none .st-ic{background:var(--primary-50);color:var(--primary)} /* пусто вообще (новая площадка) - нейтрально + CTA */ .state.error .st-ic{background:var(--danger-bg);color:var(--danger)} .state.error .st-title{color:var(--danger-ink)} .state.offline .st-ic{background:var(--warn-bg);color:var(--warn-ink)} /* skeleton-shimmer (не спиннер - меньше CLS, лучше для слабого иранского канала) */ .skel{position:relative;overflow:hidden;background:var(--bg-deep);border-radius:8px} .skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%); background:linear-gradient(90deg,transparent,var(--skel-sheen),transparent);animation:shim 1.3s infinite} .skel-line{height:12px;margin:8px 0;border-radius:6px} [dir="rtl"] .skel::after{animation-direction:reverse} @keyframes shim{100%{transform:translateX(100%)}} @media (prefers-reduced-motion: reduce){.skel::after{animation:none}} /* индикатор связи в топбаре (STEP-3bis) - виден на всех экранах, язык действия, 3 состояния */ .conn{display:inline-flex;align-items:center;gap:.35rem;font-size:var(--fs-1);font-weight:700; border-radius:999px;padding:.2rem .55rem;white-space:nowrap;border:1px solid transparent} .conn .cdot{width:8px;height:8px;border-radius:50%;flex:none} .conn.online{color:var(--go-ink);background:var(--go-bg);border-color:var(--go-line)} .conn.online .cdot{background:var(--go);box-shadow:0 0 0 0 rgba(47,143,111,.5);animation:cpulse 2.4s ease-out infinite} .conn.offline{color:var(--danger-ink);background:var(--danger-bg);border-color:var(--danger-line)} .conn.offline .cdot{background:var(--danger)} @keyframes cpulse{70%{box-shadow:0 0 0 6px rgba(47,143,111,0)}100%{box-shadow:0 0 0 0 rgba(47,143,111,0)}} @media (prefers-reduced-motion: reduce){.conn.online .cdot{animation:none}} /* ревизия/часть - бейдж в топбаре, клик открывает подробный статус (модалка) */ .build-tag{display:inline-flex;align-items:center;min-height:24px;font-size:var(--fs-0);font-weight:700; border-radius:999px;padding:.2rem .6rem;white-space:nowrap;border:1px solid var(--primary-100); background:var(--primary-50);color:var(--primary-700);cursor:pointer} .build-tag:hover,.build-tag:focus-visible{background:var(--primary-100);outline:2px solid var(--primary);outline-offset:1px} /* спарклайн (inline SVG polyline, ваниль, Iran-safe - без Chart.js/ECharts) */ .spark{display:inline-block;vertical-align:middle;line-height:0} .spark svg{overflow:visible} /* ============================================================ СИСТЕМА СПИСКОВ (Фаза 4 плана 03.07): один идиом на весь проект. Обобщение .tier li/.ck. Маркер = РОЛЬ, не декор: галочка go-ink «есть/включено», точка accent - нейтральное перечисление, крест danger-ink - «нет/минус» (сравнения). RTL-safe: логический отступ, маркер в inline-start. Цвет маркера дублируется ФОРМОЙ (✓/·/✕) - ISA-101/дальтонизм, смысл не только в цвете. ============================================================ */ .dl{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-direction:column;gap:.55rem} .dl li{font-size:.92rem;color:var(--soft);display:flex;align-items:flex-start;gap:.55rem} .dl li::before{font-weight:800;flex:none;line-height:1.45} .dl-check li::before{content:"✓";color:var(--go-ink)} .dl-dot li::before{content:"•";color:var(--accent)} .dl-x li::before{content:"✕";color:var(--danger-ink)} .dl li.off{color:var(--muted)} .dl li.off::before{content:"✕";color:var(--muted)} .dl b{color:var(--ink)} /* ============================================================ ПЕЧАТЬ (наряд/PDF): каркас приложения не печатается, наряд - светлый (тем-блоки выше под @media screen). .print-only раскрывается здесь. ============================================================ */ @media print{ .rail,.topbar,.site-nav,footer.site-foot,.toast-wrap,.modal-bg,#railToggle,.skip{display:none !important} .appwrap{margin-inline-start:0} .appmain{padding:0} .print-only{display:block} }