/* TT Commons (локальные woff2 рядом в /fonts) */ /* ── ГЛОБАЛЬНЫЙ СЛОЙ СТИЛЯ (2026-08-15). Дисплей — Prata (один вес, как у ориентира, родная кириллица), интерфейс — Golos Text. Оба ВШИТЫ ЛОКАЛЬНО: демо открывается через file://, и с Google Fonts сериф там просто не появился бы. Подмножества только cyrillic+latin — остальные весят и не нужны. */ @font-face { font-family:'Prata'; src:url('../assets/prata-cyrillic.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family:'Prata'; src:url('../assets/prata-latin.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family:'Golos Text'; src:url('../assets/golos-cyrillic.woff2') format('woff2'); font-weight:400 600; font-style:normal; font-display:swap; unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family:'Golos Text'; src:url('../assets/golos-latin.woff2') format('woff2'); font-weight:400 600; font-style:normal; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family:'TT Commons'; src:url('../assets/TTCommons-Light.woff2') format('woff2'); font-weight:300; font-style:normal; font-display:swap; } @font-face { font-family:'TT Commons'; src:url('../assets/TTCommons-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:'TT Commons'; src:url('../assets/TTCommons-Medium.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; } @font-face { font-family:'TT Commons'; src:url('../assets/TTCommons-DemiBold.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; } @font-face { font-family:'TT Commons'; src:url('../assets/TTCommons-Bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; } @font-face { font-family:'TT Commons'; src:url('../assets/TTCommons-ExtraBold.woff2') format('woff2'); font-weight:800; font-style:normal; font-display:swap; } /* ══════════════════════════════════════════════════════════════ ДИЗАЙН-СИСТЕМА «ДВА СЧЁТА» — контракт токенов. Полные правила и «почему» — design/design-rules.md (их читает агент). Три закона: 1) Акцент один: кобальт var(--color-accent). Пара к нему: песок var(--color-accent-soft). Активное состояние везде = песок-заливка + кобальт-текст. 2) Радиусы: кнопки 9 · контролы 11 · карточки 16 · панели 22. Других нет. 3) Поверхности плоские: теней нет, глубина — хайрлайн var(--color-line-1). Цвет/размер в разметке — только var(--...), не хардкодом hex. ══════════════════════════════════════════════════════════════ */ :root { /* TOKENS:START — сгенерировано tools/tokens-sync.js из design/tokens.json, руками не править */ /* Цвет / Текст */ --color-text-primary: #1C1A15; --color-text-secondary: #534E42; --color-text-tertiary: #7E765D; /* третья ступень. Сюда же слился --c-expense (#9E978A): «расход» — не цвет, а серый, ΔE 4.3 */ --color-text-4: #9A9179; /* четвёртая ступень: подписи под подписями, неактивные пункты, оси графиков. Найдена аудитом 2026-07-31: 217 мест жили литералами в девяти вариантах */ --color-text-5: #B8AE98; /* пятая ступень, самая тихая: плейсхолдеры, выключенные контролы, сетка графика */ /* Цвет / Поверхности */ --color-background-page: #F9F8F3; --color-background-primary: #FCFCFC; --color-background-secondary: #F1EFE8; --color-background-rail: #F5F2ED; /* фон сайдбара — замер макета: ступень между page и secondary */ --color-background-tertiary: #EAE7DE; --color-background-hover: #F2F0E9; /* Цвет / Линии */ --color-border-secondary: transparent; /* НАМЕРЕННО прозрачный: держит место под рамку, не рисуя её. Для видимой линии брать --color-line-* */ --color-border-tertiary: transparent; /* НАМЕРЕННО прозрачный, см. --color-border-secondary */ --color-line-strong: #D6CBB6; /* граница при наведении: ступень ниже line-1 */ --color-background-selected: #E4E1D1; /* выбранная строка ленты — песочная, не серая */ --color-ink-soft: #33312C; /* ховер чернильной кнопки и граница НА чернилах */ --color-accent-dark: #003C90; /* ховер кобальта */ --color-positive-line: #CFE0BE; /* граница «травяной/мятной» пары */ --color-line-1: #D9D3C9; /* хайрлайн: первая линия лестницы. Раньше звался --glass-border, хотя стекла в плоском дизайне нет */ /* ⚠ ЗАТЕМНЕНИЕ ФОНА — ЧЕРНИЛА, А НЕ СИНЕВА (макет `.scrim`, 18.08.2026). Жило холодным синеватым литералом в пятнадцати местах, чужим песочной странице под ним: страница уходила в серо-синие сумерки, хотя синего в палитре нет вовсе. У макета затемнение замешано на тех же чернилах `--ink` (#1C1A15), что и текст. Литерал пропустила сводка палитры 31.07 — она собирала `#rrggbb`, а не `rgba()`. */ --color-scrim: rgba(28,26,21,.42); --color-line-2: #EFEDE6; /* разделитель под шапкой таблицы. Был литералом: CLAUDE.md прямо велел хардкодить, потому что border-secondary прозрачный */ --color-line-3: #F3F1EA; /* между строками таблиц; берётся через tok() в SVG */ /* Цвет / Акцент */ --color-accent: #0047AB; --color-accent-soft: #F5E6CA; --color-blue: #B7CCEC; /* Цвет / Семантика */ --color-positive: #3B6D11; --color-positive-soft: #EAF3DE; --color-negative: #A32D2D; --color-negative-soft: #FCEBEB; --color-warn: #854F0B; --color-warn-soft: #FAEEDA; --color-positive-mid: #97C459; /* средняя ступень «дохода»: заливки и точки «поступления», «закрыто». Не цвет графика — семантика */ --color-warn-mid: #D6A24A; /* средняя ступень «внимания»: заливки «списания», «не оплачено» */ --color-sand-deep: #E4D3AE; /* линейка и граница НА песке. Жил литералом в трёх местах (CARD_LOUD и две доски) */ /* Цвет / Лесенка диаграмм — замер макета 17.08.2026. ⚠ ЭТО РАЗВОРОТ ПРЕЖНЕГО РЕШЕНИЯ (31.07): тогда ранжированные полосы красили ОДНИМ тоном, потому что порядок уже показан длиной. Макет от 17.08 красит их лесенкой, и ранг №1 у него почти чёрный — так столбик читается как «вот этот», а не как «вот эти три». Прежняя лесенка (text-tertiary → text-5 → background-tertiary) шла в другую сторону, от среднего к светлому, и на песочном фоне все три ступени сливались в одно пятно. Направление: chart-3 — самый крупный, chart-1 — самый мелкий. */ --chart-1: #A39A85; --chart-2: #6B6455; --chart-3: #2B2924; --chart-rest: #CBC6BB; /* «Остальное»: у макета это chart-1 под opacity .55; здесь та же смесь, посчитанная по фону карточки — прозрачность в атрибутах SVG живёт отдельным свойством и разъезжается с DOM-полосами */ /* Форма / Радиусы */ --radius-chip: 6px; /* пилюля дельты («↑ +18%») — замер макета. Третья ступень заведена ОСОЗНАННО: на коробке высотой 21px радиус 10 даёт стадион, и пилюля перестаёт быть плашкой при числе, становясь кнопкой */ --radius: 10px; /* контролы — замер макета */ --radius-card: 16px; /* карточки: радиусов ДВА, у контролов и карточек разные */ /* единственный радиус в системе. Решение 2026-07-31: было четыре ступени (7/11/16/22) и 22 литеральных значения — стало одно */ --radius-full: 999px; /* круглое: аватары, точки, кружки. Это не ступень шкалы, а отдельное состояние «круг» */ /* Форма / Глубина */ --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --shadow-card: none; --shadow-accent: none; --focus-ring: 0 0 0 3px rgba(0,71,171,.14); --steep-shadow: 0 0 0 0.5px #E6E4DC; --steep-hairline: 1px solid rgba(23,25,28,.07); /* Ритм / Отступы ── ПОЛУСТУПЕНИ (2026-08-18) ──────────────────────────────────────────── Шкала была шестиступенчатой (4/8/12/16/24/32) и держалась ровно до тех пор, пока перенос макета не пошёл экран за экраном. Замер макета показал другое: в мелком диапазоне он живёт на СЕТКЕ ПО 2, и четыре его значения встречаются десятками раз — 6 (35 мест), 10 (50), 14 (19), 20 (32). Наши шесть ступеней их не выражают: ближайшая мимо на 2-4px, а это не «почти то же». На 20 против 16 гутер таблицы уезжает на 8px по ширине; на 14 против 16 шапка секции вырастает на 4px. Три переноса подряд обходились литералами с пометками — то есть шкала де-факто уже росла, просто молча. Полуступень пишется с `h` (half) и живёт МЕЖДУ соседями: 1h между 1 и 2. ⚠ Полуступени — для ПЕРЕНОСА, а не для новой вёрстки. Своё рисуем целыми ступенями; полуступень ставим, когда её велит замер макета. ⚠ 9 и 11 в шкалу НЕ вошли намеренно, хотя у макета встречаются (17 и 12 раз): это вертикальный ритм строк таблиц, подобранный под конкретную высоту ряда (шапка 40, ряд 60). Они остаются литералами на месте, с пометкой — округление до 10 и 12 двигает ряды на 2px каждый. */ --space-1: 4px; /* самый плотный: внутри чипа, между иконкой и текстом */ --space-1h: 6px; /* полуступень: шаг ряда фасетов, отбивка под заголовком группы */ --space-2: 8px; /* рабочий шаг: между строками списка, внутри кнопки по вертикали */ --space-2h: 10px; /* полуступень: отбивка точки-разделителя, паддинг тихой кнопки */ --space-3: 12px; /* между блоками внутри карточки */ --space-3h: 14px; /* полуступень: шапка секции по вертикали, отбивка ряда фасетов */ --space-4: 16px; /* паддинг карточки, между карточками */ --space-4h: 20px; /* полуступень: гутер таблицы-ленты по горизонтали */ --space-5: 24px; /* между секциями экрана */ --space-5h: 28px; /* полуступень: гутер окна операции (макет `.dw-body`) */ --space-6: 32px; /* крупный разрыв: между смысловыми зонами. Заведён, чтобы 30 и 32 не уезжали на 24 (сдвиг 6-8px виден) */ /* Шрифт / Кегли */ --fs-micro: 12px; --fs-note: 13.5px; --fs-base: 15px; /* Размер / Контролы */ --h-control: 42px; --card-ratio: 5 / 3; /* Пропорция плитки «Контроля» (.ctrl-card) — единственное место, где отношение ещё стоит: там ряд одинаковых плиток с фиксированными строками, форма и есть содержание. ⚠ Общего класса `.fm-tile` больше нет (удалён 16.08.2026, последним носителем была карточка проекта). Карточке с текстом и числами пропорцию не задавать — правило и замеры в design/design-rules.md, раздел «Высота». */ /* Движение / Кривые */ --ease-out-quart: cubic-bezier(.165,.84,.44,1); /* Токены движения (motion-design): ease-out — вход/выход, ease-in-out — морфинг на месте */ --ease-out-quint: cubic-bezier(.23,1,.32,1); --ease-in-out-cubic: cubic-bezier(.645,.045,.355,1); --ease-in-out-quart: cubic-bezier(.77,0,.175,1); --ease-out-quad: cubic-bezier(.25,.46,.45,.94); --ease-in-cubic: cubic-bezier(.55,.055,.675,.19); /* ease-in — только для того, что уходит с экрана насовсем (панель-вылет) */ /* Движение / Длительности */ --t-fast: 120ms cubic-bezier(.4,0,.2,1); --dur-1: 120ms; --dur-2: 180ms; --dur-3: 240ms; --dur-4: 300ms; --t-med: 200ms cubic-bezier(.4,0,.2,1); /* TOKENS:END */ } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body { font-family: 'Golos Text', 'TT Commons', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--color-background-page); color: var(--color-text-primary); -webkit-font-smoothing: antialiased; font-feature-settings: "cv11","ss01"; } #root { width: 100%; min-height: 100vh; background: var(--color-background-page); border-radius: 0; border: none; box-shadow: none; overflow-x: clip; /* клипуем горизонталь, но НЕ создаём контекст прокрутки по вертикали — иначе ломается sticky-сайдбар */ } /* Единое начертание ВСЕХ цифр в проекте — как в карточках-метрик Аналитики: лёгкий вес + разрядка. !important перебивает любые инлайновые жирные fontWeight/тесные letterSpacing. */ .num,[data-num]{ font-family:'Golos Text','TT Commons',system-ui,sans-serif; font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; font-weight:400 !important; } /* ── ПРАВИЛО (2026-07-23): НИКАКОГО БОЛДА. Единый вес по всему приложению. !important перебивает любые инлайновые fontWeight:500/600/700/800 и шорткат font:"700 …". Иерархия — размером и цветом, не жирностью. Хочешь акцент — не bold’ом. */ /* ⚠ `.fm-flyout` ПЕРЕЧИСЛЕН ОТДЕЛЬНО, И ЭТО НЕ ИЗБЫТОЧНОСТЬ. Вылет сайдбара рисуется ПОРТАЛОМ в `document.body` (иначе его перехватывала липкая колонка отчёта), то есть живёт ВНЕ `#root` — и все три сети ниже до него не доставали. Ровно поэтому в меню отчётов оказался полужирный, которого в приложении нет нигде. Появится второй портал — добавлять сюда же, все три строки. */ #root *, #root, .fm-flyout, .fm-flyout * { font-weight: 400 !important; } /* ── ПРАВИЛО (2026-08-10): НИКАКОЙ РАЗРЯДКИ. Межбуквенное расстояние везде одинаковое — то, которое задумал шрифт. Разогнанный трекинг на мелких подписях («С т а т ь я») — первый признак интерфейса, собранного нейросетью: живой дизайнер так не делает, а читаемость от этого только падает. Прямая просьба: «никогда не делай такие большие расстояния между буквами, это сразу нейронный флёр; везде одинаковое расстояние». Вычищено 195 инлайновых letterSpacing и 27 объявлений в CSS (в том числе .03em у всех чисел и −.02em у крупных заголовков: «одинаковое» значит и без сжатия тоже). !important нужен, потому что инлайн-стиль React иначе сильнее. Ставить letterSpacing в новом коде бессмысленно — правило перебьёт. Снять — только правкой этой строки. */ #root *, #root, .fm-flyout, .fm-flyout * { letter-spacing: normal !important; } /* ── ПРАВИЛО (2026-08-14): НИКАКИХ РУЧЕК РАСТЯГИВАНИЯ. Уголок в правом нижнем углу текстового поля (CSS `resize`, штриховка-грабber) отдаёт размер поля пользователю — и он немедленно расходится с соседними полями, ради которых заведены и шкала высот (37/64), и сетка. Прямая просьба Игоря: «убери, они должны быть нами зафиксированы». Высоту задаём мы; там, где текста бывает много, поле само растёт по содержимому (`AutoTextarea`), а не просит тянуть себя мышью. !important нужен, потому что инлайновый `resize:"none"` иначе сильнее. Ставить `resize` в новом коде бессмысленно — правило перебьёт. */ #root textarea { resize: none !important; } /* ── ПРАВИЛО (2026-08-10): НИКАКИХ ЗАСЕЧЕК. Инлайновый шорткат font:"600 15px SpaceGrotesk" задаёт семейство БЕЗ запасных — а у Space Grotesk нет кириллицы, поэтому «расходы 200 000 ₽» в панели «Завести как подрядчика» рисовалось Times: цифры своим шрифтом, слово — браузерным по умолчанию, то есть засечным. Сеть ниже делает это невозможным: !important перебивает инлайн-стиль, а [style*=…]/[font-family*=…] сохраняют Space Grotesk там, где он выбран намеренно (в т.ч. в SVG, где семейство приходит атрибутом). Засечное в приложении = баг. */ #root, #root *, .fm-flyout, .fm-flyout * { font-family:'Golos Text','TT Commons',system-ui,sans-serif !important; } /* ⚠ ДЫРКА В СЕТИ ДЛЯ ДИСПЛЕЯ. Сеть выше стоит с !important, поэтому серифный заголовок инлайном поставить НЕЛЬЗЯ — его надо разрешить здесь. Экраны переводим по одному: вешаем class="disp" (или data-disp) на заголовок экрана, заголовок карточки и сумму-героя. Prata существует в ОДНОМ начертании и разваливается мельче 24px — ниже 23px сериф не ставить, там работает Golos с табличными цифрами. */ /* ⚠ ДВОЙНОЙ АТРИБУТ ОБЯЗАТЕЛЕН. Правило цифр (#root [data-num]) объявлено НИЖЕ этого и при равной специфичности (0,1,0) побеждает — серифная сумма-герой откатывалась в Golos, хотя data-disp на ней стоял. [data-disp][data-num] даёт (0,2,0) и выигрывает независимо от порядка. Ставишь сериф на число — оба атрибута. */ #root [data-disp][data-num], #root [data-disp][data-num] *, #root .disp, #root [data-disp], #root .disp *, #root [data-disp] * { font-family:'Prata',Georgia,'Times New Roman',serif !important; } #root .num, #root [data-num], #root [style*="Space Grotesk"], #root [font-family*="Space Grotesk"] { font-family:'Golos Text','TT Commons',system-ui,sans-serif !important; } /* ⚠ СЛОВО ВНУТРИ СЕРИФНОГО ЧИСЛА. У макета единица измерения при герое набрана интерфейсным шрифтом: `.rw-v em`, `.bs-v em`, `.rn-hero em` — все с font-family:var(--ui). Сеть выше накрывает ПОТОМКОВ [data-disp], и выйти из-под неё инлайновым стилем нельзя (там !important), поэтому нужен класс. Почему не `data-num`: он тоже вернул бы Golos, но обещал бы, что внутри число, — а внутри слово «месяца». ⚠ Класс вешать на слово, а НЕ снимать data-disp с обёртки: обёртка задаёт строку (strut), и если её шрифт перестанет быть серифным, высота строки меняется на 3px, хотя видимый текст тот же. Проверено замером. ⚠ ТРИ СЕЛЕКТОРА, А НЕ ОДИН. Серифная сумма-герой несёт ОБА атрибута (`data-disp data-num`), и её потомки ловятся правилом `#root [data-disp][data-num] *` весом (1,2,0) — одинокий `#root .fm-ui` (1,1,0) ему проигрывает. Проверено вживую: слово оставалось серифным. */ #root .fm-ui, #root [data-disp] .fm-ui, #root [data-disp][data-num] .fm-ui { font-family:'Golos Text','TT Commons',system-ui,sans-serif !important; } /* ── БУМАГА МАКЕТА (2026-08-17). Корень «всё приходится подгонять». Замер: у макета `body{font:15px/1.5}`, у приложения — 16px и line-height:normal (≈1.2 у Golos). То есть КАЖДАЯ строка перенесённого блока садилась на 3–6px плотнее макетной, и это лечили поштучно, ставя lineHeight в каждом втором инлайн-стиле. Класс задаёт ту же бумагу, что у макета, один раз на страницу. Переносим страницу — вешаем ей `.fm-paper`; когда так оденутся все, правило поднимется в #root, а класс исчезнет. ⚠ Своего font-family здесь НЕТ: семейство держат сети выше (с !important), и вторая декларация тут ничего бы не решала, зато выглядела бы источником. */ .fm-paper{ font-size:15px; line-height:1.5; } /* Редизайн карточки подрядчика (двухколоночный view) — scoped через [data-contractor-page] */ [data-contractor-page] .fm-proj-inner{ height:100%; } [data-contractor-page] .fm-proj-inner.is-edit{ zoom:1; width:100%; } /* Полосы .con-scroll убраны 16.08.2026 — см. общее правило прокрутки ниже. */ [data-client-page] .fm-proj-inner{ height:100%; } /* Поля формы документа (дизайн «Форма документа»): мягкий акцентный фокус */ .doc-field{ transition:background-color .15s, border-color .15s, box-shadow .15s; } .doc-field:focus{ background:var(--color-background-primary); border-color:var(--color-blue) !important; box-shadow:var(--focus-ring); } select.doc-field:hover{ border-color:var(--color-text-5); } /* ── КАРКАС ФОРМЫ-СУЩНОСТИ (Э0): один вид у всех форм создания и правки ── Операция открывается ПАНЕЛЬЮ-ВЫЛЕТОМ от правого края (как карточка счёта в Аспро), а не окном по центру: список слева остаётся на месте, и видно, из какой строки пришёл. Тот же приём, что у разбора выписки (fm-drawer-in). Ширину задаёт --ef-w (её ставит EntityForm), а не инлайновый width: иначе медиа-запрос не смог бы растянуть панель на всю ширину узкого экрана. Сетка полей задаётся переменной --ef-cols. Поддерживаются span 1 и 2: span 3+ на узком экране вылезет из сетки (медиа-запросы жмут 4→2→1). */ .ef-scrim{ position:fixed; inset:0; background:var(--color-scrim); z-index:400; display:flex; align-items:stretch; justify-content:flex-end; animation:fm-fade-in var(--dur-3) ease both; } .ef-card{ width:var(--ef-w,620px); max-width:100%; height:100%; background:var(--color-background-primary); border-radius: var(--radius) 0 0 var(--radius); box-shadow:-30px 0 70px rgba(17,19,32,.24); display:flex; flex-direction:column; overflow:hidden; animation:fm-drawer-in var(--dur-4) var(--ease-out-quart) both; } /* Уход быстрее входа и на ease-in: панель уезжает совсем, мягко приземляться ей негде. */ .ef-scrim[data-closing="true"]{ animation:fm-fade-out var(--dur-2) ease both; } .ef-scrim[data-closing="true"] .ef-card{ animation:fm-drawer-out var(--dur-2) var(--ease-in-cubic) both; } @media (max-width:700px){ .ef-card{ width:100%; border-radius:0; } } @media (prefers-reduced-motion: reduce){ .ef-scrim, .ef-scrim .ef-card{ animation:none !important; } } .ef-head{ display:flex; align-items:center; gap: var(--space-2); padding: var(--space-4) var(--space-5) var(--space-4); border-bottom:1px solid var(--color-background-secondary); flex-shrink:0; } .ef-title{ font-size:17px; font-weight:800; color:var(--color-text-primary); } .ef-icon{ width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; border-radius: var(--radius); color:var(--color-text-tertiary); font-size:15px; line-height:1; cursor:pointer; font-family:inherit; transition:background 120ms, color 120ms; } .ef-icon:hover{ background:var(--color-background-hover); color:var(--color-text-secondary); } .ef-body{ padding: var(--space-4) var(--space-5) var(--space-5); overflow-y:auto; flex:1 1 auto; min-height:0; } .ef-foot{ display:flex; align-items:center; gap: var(--space-2); padding: var(--space-3) var(--space-5) var(--space-4); border-top:1px solid var(--color-background-secondary); flex-shrink:0; } .ef-grid{ display:grid; grid-template-columns:repeat(var(--ef-cols,4),minmax(0,1fr)); gap: var(--space-3) var(--space-4); } .ef-grid > *{ min-width:0; } .ef-lbl{ display:block; font-size:11.5px; font-weight:700; text-transform:none; color:var(--color-text-tertiary); margin-bottom: var(--space-1); } .ef-req{ color:var(--color-negative); margin-left:3px; } /* Тихая ссылка-действие внутри формы: раскрывает необязательный блок (график траншей, начисление). Форма по умолчанию короткая, сложное появляется по требованию. */ .ef-link{ display:inline-block; font:500 13px 'Inter'; color:var(--color-accent); cursor:pointer; background:none; border:none; padding:0; font-family:inherit; } .ef-link:hover{ text-decoration:underline; } .ef-link.mute{ color:var(--color-text-tertiary); } /* Строка графика траншей: дата · сумма · доля · крестик */ .ef-split{ display:grid; grid-template-columns:1fr 130px 58px 26px; gap: var(--space-2); align-items:center; padding: var(--space-1) 0; border-bottom:1px solid var(--color-background-secondary); } .ef-split.h{ font:700 10.5px 'Inter'; text-transform:none; color:var(--color-text-4); padding-bottom: var(--space-1); } .ef-split.f{ border-bottom:none; font:600 13px 'Inter'; color:var(--color-text-primary); padding-top: var(--space-2); } /* ── Таблица разбивки суммы (общая для всех окон операции) ──────────────── Претензия Игоря на первую версию: «выглядит по-убански» — ряд отдельных полей-коробок с рамками читается как форма, а не как таблица: границы полей спорят с границами строк, и глазу не за что вести взгляд по строке. Настоящая таблица: рамка снаружи, тонкие линии внутри, шапка на подложке, а поля ВНУТРИ ячеек лишены своих рамок и фона — ячейка и есть их граница. */ /* ⚠ РАМКА ТАБЛИЦЫ НЕ КЛИПАЕТ (13.08.2026). Было `overflow:hidden` ради скруглённых углов — и оно же срезало выпадашки «Кому» и «Статья» внутри ячеек: список имён вылезал за строку голым текстом без панели (скриншот Игоря «всплывающее окно сломано»). Углы теперь скругляет сама шапка (единственная строка с заливкой), а панели выпадашек выходят за рамку, как им и положено. */ .spl-wrap{ border:1px solid var(--color-line-1); border-radius: var(--radius); background:var(--color-background-primary); } .spl-row{ display:grid; align-items:stretch; border-bottom:1px solid var(--color-line-3); } .spl-row:last-child{ border-bottom:none; } .spl-row.h{ background:var(--color-background-secondary); border-bottom:1px solid var(--color-line-1); border-radius: var(--radius) var(--radius) 0 0; } /* ⚠ `nowrap` у подписей: колонки подрезаны под содержимое, и подпись в две строки («Дата / начисления») растит шапку и делает таблицу неряшливой. Не влезает подпись — это повод пересчитать ширину колонки, а не переносить слово. */ .spl-row.h > *{ font-family:'Inter', sans-serif; font-size:11.5px; color:var(--color-text-tertiary); padding: var(--space-2) var(--space-3); display:flex; align-items:center; white-space:nowrap; } /* `min-height:40` у КАЖДОЙ ячейки: сетка строки выровнена по верху, и ячейка ростом в галочку (колонка «Начислено») вставала выше соседних полей высотой 40. */ .spl-row > .c{ border-right:1px solid var(--color-line-3); min-width:0; display:flex; align-items:center; min-height:40px; } .spl-row > .c:last-child{ border-right:none; } .spl-row > .c.num{ justify-content:flex-end; } /* Поле внутри ячейки: рамка ячейки заменяет рамку поля. Высота строки одна — 40. */ /* ⚠ Триггер ArtSelect/DateField — БЕЗКЛАССОВЫЙ div внутри .fp-wrap с ИНЛАЙНОВОЙ рамкой (замер 12.08). Поэтому селектор идёт по структуре, а не по классу, и с !important — иначе инлайн-стиль компонента побеждает и в ячейке снова коробка. */ /* ⚠ `:not(.fp-pop)` — НЕ КОСМЕТИКА, А ПОЧИНКА ВЫПАДАШКИ (13.08.2026). Панель `.fp-pop` — такой же прямой ребёнок `.fp-wrap`, как и триггер, поэтому правило «сними рамку, фон и держи 40px» раздевало ЕЁ ТОЖЕ: список имён рисовался без фона, без тени и обрезанный по 40px — «поиск по имени кривой, всплывающее окно сломано». Селектор по структуре обязан исключать панель. */ .spl-row .c .fp-wrap > div:not(.fp-pop), .spl-row .c .ef-in, .spl-row .c .fp-trig{ border:0 !important; background:transparent !important; border-radius:0 !important; height:40px !important; min-height:40px !important; box-shadow:none !important; padding-left: var(--space-3); padding-right: var(--space-3); width:100%; } .spl-row .c .fp-wrap{ width:100%; } .spl-row .c > *:not(.fp-pop){ width:100%; } .spl-row .c.pad{ padding: 0 var(--space-3); } /* Галочка «Начислено»: у input[type=checkbox] есть СВОИ 3–4px внешнего поля от браузера — из-за них квадрат уезжал вправо. Стоит по ЦЕНТРУ колонки (просьба 13.08.2026): одинокий значок без подписи центрируется, как значок удаления в последней колонке, — по левому краю он читался бы как обрубок текста. Шапка «Начислено» отцентрована вместе с ним, иначе колонка косит. */ .spl-row .c.pad input[type=checkbox]{ margin:0; } /* Календарь в ячейке рисовать нечем: поле и так называется «Дата начисления», а иконка держала под себя 38px в колонке шириной 112. */ .spl-row .c .fp-trig .fp-car{ display:none; } /* Подвал таблицы — вне рамки: «Добавить строку» слева, итог справа. */ .spl-foot{ display:grid; align-items:center; margin-top: var(--space-2); } .spl-foot > *{ padding: 0 var(--space-3); } /* ⚠ СЕТКА ПОЛЕЙ ОКНА ОПЕРАЦИИ — ОДНА КОЛОНКА, И ЭТО НЕ ПЕРЕБИВАЕТСЯ (13.08.2026). Инлайновый grid-template-columns у React-разметки может быть перекрыт чем угодно с !important: дизайн-режимом, пользовательским стилем, расширением браузера. Полдня ушло на спор, где у меня рисовалась одна колонка, а у Игоря те же поля вставали парами — по скриншоту такое неотличимо от «код не тот». Раскладка формы слишком важна, чтобы зависеть от того, что кто-то когда-то навесил поверх. */ /* ⚠ СЕЛЕКТОР НАМЕРЕННО ПЕРЕУТЯЖЕЛЁН (13.08.2026). Замер у Игоря в шапке окна показал «сетки: 546px | 311.633px 218.367px»: к первому блоку правило применилось, ко второму — нет, то есть его перебивает что-то более специфичное с !important (пользовательский стиль, расширение браузера, остаток дизайн-режима). Обычный `.fm-op-form` (0,1,0) такому проигрывает, поэтому здесь `#root` + дубль класса (1,2,0) — выиграть у этого может только inline-стиль с !important, которого в React-разметке не бывает. Не «упрощать» обратно: за этим селектором полдня разбирательства, где на одном файле у двух людей разная раскладка. */ /* ⚠ Пробовали 13.08 увести форму в блочный поток (колонок бы не было в принципе, перебивать нечего) — и сразу потеряли ПОРЯДОК полей: он задан `order`, а тот работает только во flex/grid. Замер показал раскладку в две оси и порядок как в разметке, а не как просил Игорь. Поэтому grid остаётся, но селектор утроен — перебить его может только inline с !important. */ /* ⚠ ФОРМА — ДВЕ КОЛОНКИ, ПАРЫ ЗАДАНЫ ПОШТУЧНО (13.08.2026, порядок Игоря: «в паре сумма и дата начисления · ниже счёт и контрагент · ниже проект и статья · снизу одиноко назначение шириной в два блока»). Пары здесь не «по две подряд», а осмысленные: сколько и когда начислено, откуда и кому, куда записать. */ /* ⚠ ОДНА КОЛОНКА 556 (18.08.2026, перенос макета `.form`; Игорь: «надо как в макете»). Было два столбца с потолком 640 — правка 16.08 под «назначению платежа побольше места, пошире». Замер макета говорит другое: колонка ОДНА, ширина 556, а «пошире» достигается не вторым столбцом, а тем, что КАЖДОЕ поле занимает всю ширину формы. Двойной столбец ставил «Счёт и юрлицо» и «Контрагент» в один ряд — два ответа на разные вопросы бок о бок, — и каждому доставалось 314 вместо 556. Половинные поля (дата, сумма, дата начисления) остаются половинными: рядом с ними стоит отметка, и вместе они занимают ту же строку 556. ⚠ Число связано ещё с четырьмя: `--op-col` = (556 − 12) / 2 = 272, потолок `.fm-triage-body > *`, ширина трёх окон операции (макетные 620) и база `splitWide`. Правишь одно — правь все. */ div.fm-op-form.fm-op-form.fm-op-form, .fm-op-form{ display:grid !important; grid-template-columns:minmax(0,1fr) !important; max-width:556px !important; align-items:start !important; } /* ⚠ В ОДНОЙ КОЛОНКЕ КАЖДАЯ ЯЧЕЙКА ЗАНИМАЕТ ВСЮ СТРОКУ — ВКЛЮЧАЯ `span 2` (18.08.2026, регрессия одноколоночной формы; Игорь: «у нас уже было разбиение, ты его спрятал»). Пока форма была двухколоночной, восемь полей стояли с `EfField span={2}` — «График выплат», «Документы», «Кому платим», «Счёт», блоки налогового правила. `EfField` кладёт им инлайновый `grid-column:span 2`. В сетке ИЗ ОДНОЙ колонки `span 2` не «растягивает на всю ширину», а ЗАВОДИТ НЕЯВНУЮ ВТОРУЮ колонку: график траншей уезжал за правый край окна, а окно с `overflow:hidden` его срезало. Разбиение было на месте — его не было ВИДНО. Правило снимает инлайновый span у всех детей разом, а не у перечисленных: в одноколоночной сетке других вариантов не бывает, и следующее поле со `span` не повторит эту историю. */ .fm-op-form > *{ grid-column:1 / -1 !important; } /* ⚠ ПОДПИСЬ В ОКНЕ ОПЕРАЦИИ — ВТОРАЯ СТУПЕНЬ (макет `.f-l`, 18.08.2026). Общий `.ef-lbl` третьей ступенью верен для панели проекта — там у макета ровно она (`.pe-lbl` на `--ink-3`), — но в окне операции макет ставит вторую, и это не случайность: в панели подпись сопровождает значение, которое и так читается, а в окне разбора она единственное, что называет поле-факт без рамки. Правило «одна подпись на всё приложение» писалось против того, чтобы ТРИ ОКНА ОБ ОДНОЙ операции расходились между собой; здесь разница между окном и панелью осознанная, объявлена одним селектором и работает во всех трёх окнах разом. */ .fm-op-form .ef-lbl, .fm-op-lbl{ color:var(--color-text-secondary); } /* ⚠ ШИРИНА ПОЛЯ В ШИРОКОМ РЯДУ = ШИРИНЕ КОЛОНКИ (14.08.2026). Ряды «дата + отметка» и «сумма» занимают обе колонки, а поле внутри них держало 266px при колонке 272 — замер: правый край «Даты» 958, правый край «Счёта» под ней 964, отметка начиналась на 970 вместо 976. Шесть пикселей, но они ломают ровно то, ради чего сетка и заведена: вертикаль колонок. Считается из потолка формы: (556 − 12) / 2. */ :root{ --op-col: 272px; } /* ⚠ ЭТОТ КЛАСС — ЕДИНСТВЕННАЯ СЕТКА ВО ВСЕХ ТРЁХ ОКНАХ ОПЕРАЦИИ (14.08.2026): разбор, «Новая операция», правка строки. Раньше у каждого была своя (`EfGrid` с шагом 16/24, инлайновый `1fr 1fr`), и одна операция выглядела как три разные программы. Правишь шаг или число колонок — правишь сразу все три окна, других сеток у операции нет. Порядок полей — в `OP_ORD` рядом с `EfField`. ⚠ Прежний комментарий обещал «страховку» `.fm-op-form > * { grid-column:1/-1 }` — такого правила ЗДЕСЬ НЕТ и не должно быть: оно схлопывало форму в один столбец, а пары («счёт | контрагент», «проект | статья») заданы осознанно. ⚠ Класс `.fm-op-pair` удалён 14.08.2026 — он держал пару «дата + состояние», которой больше нет: отметка стоит внутри ряда даты. */ /* ⚠ Подпись СЛЕВА от поля пробовали 12.08 и откатили по прямому «нет-нет»: Игорю нужны просто параметры друг под другом, с именем НАД полем. Не заводить заново — вопрос закрыт. */ /* Поп-ап дня в календаре «Ближайшие списания» — перенесён из макета как есть. Операции показаны ПО ОТДЕЛЬНОСТИ: одна сумма за день не говорит, кому и за что. Появляется без задержки; радиусы концентричны (14 снаружи, отступ 12). width:max-content — чтобы ширина не зависела от того, у какого края экрана стоит поп-ап: иначе у правого края текст переносится сильнее и отступ до дня гуляет. */ .dpop { position:fixed; z-index:60; left:0; top:0; width:max-content; min-width:236px; max-width:308px; box-sizing:border-box; background:var(--color-background-primary); border:0.5px solid var(--color-background-tertiary); border-radius: var(--radius); padding: var(--space-3) var(--space-3) var(--space-3); box-shadow:0 2px 6px rgba(16,24,40,.07), 0 16px 38px rgba(16,24,40,.09); font-family:'Inter','TT Commons',system-ui,sans-serif; -webkit-font-smoothing:antialiased; pointer-events:none; opacity:0; transform:translateY(4px); transition-property:opacity, transform; transition-duration:90ms; transition-timing-function:cubic-bezier(.2,0,0,1); will-change:transform, opacity; } .dpop, .dpop * { font-weight:400; } .dpop.is-on { opacity:1; transform:none; } .dpop-arw { position:absolute; width:9px; height:9px; background:var(--color-background-primary); transform:rotate(45deg); } .dpop-h { display:flex; align-items:baseline; justify-content:space-between; gap: var(--space-3); font-size:12px; color:var(--color-text-4); white-space:nowrap; } .dpop-h b { font-size:13.5px; } .dpop-l { margin-top: var(--space-2); display:flex; flex-direction:column; gap: var(--space-2); } .dpop-r { display:flex; align-items:flex-start; gap: var(--space-2); font-size:13px; } .dpop-r i { width:7px; height:7px; border-radius: var(--radius); flex-shrink:0; margin-top: var(--space-1); } .dpop-r i.out { background:var(--color-warn-mid); } .dpop-r i.in { background:var(--color-positive-mid); } .dpop-n { flex:1; min-width:0; color:var(--color-text-primary); line-height:1.3; text-wrap:pretty; } .dpop-n em { display:block; font-style:normal; font-size:11.5px; color:var(--color-text-4); margin-top:2px; } .dpop-s { flex-shrink:0; color:var(--color-text-primary); } .dpop-more { font-size:12px; color:var(--color-text-4); padding-left: var(--space-4); } .dpop-f { margin-top: var(--space-3); padding-top: var(--space-2); border-top:1px solid var(--color-background-hover); font-size:11.5px; color:var(--color-text-4); line-height:1.45; text-wrap:pretty; white-space:normal; } @media (prefers-reduced-motion:reduce){ .dpop{ transition-duration:1ms; transform:none } } /* ⚠ 37px — ОДНА ВЫСОТА У ВСЕХ ПОЛЕЙ ФОРМЫ (2026-08-12). Комментарий ниже уже год обещал «37px = .ef-in и .fp-trig», но самому `.ef-in` правило так и не поставили: обычный ввод выходил 34.5px (кегль + паддинги), денежный — 35.5 (кегль 15), а выпадашка и поле-факт — ровно 37. В ряду «На какой счёт | От кого» стояли коробки 34.5 и 37, и форма выглядела собранной наспех. Высоту задаёт СЛОТ, а не содержимое: min-height + border-box. `textarea.ef-in` (min-height:64) специфичнее — не задет. */ .ef-in{ width:100%; box-sizing:border-box; min-height:37px; padding: var(--space-2) var(--space-3); font-size:13.5px; border:1px solid var(--color-line-1); border-radius: var(--radius); background:var(--color-background-primary); color:var(--color-text-primary); font-family:inherit; outline:none; transition:border-color 150ms, box-shadow 150ms; } .ef-in:hover{ border-color:var(--color-text-5); } .ef-in:focus{ border-color:var(--color-blue); box-shadow:var(--focus-ring); } select.ef-in{ cursor:pointer; } textarea.ef-in{ resize:none; min-height:64px; line-height:1.45; } /* ⚠ ФАКТ — ТАКОЕ ЖЕ ПОЛЕ, ЧТО И ВВОД (2026-08-11). Данные из выписки жили отдельной песочной колонкой слева, и одно и то же окно читалось как два разных экрана. Теперь факт стоит в общей сетке: та же коробка, что у .ef-in, но без рамки-приглашения и на песке — «это факт, а не поле для ввода». */ /* ⚠ ТА ЖЕ ВЫСОТА, ЧТО У ПОЛЯ ВВОДА (37px = .ef-in и .fp-trig). Иначе в одной строке сетки стоят коробки разной высоты и ряд «пляшет» — ровно это было видно на скриншоте 11.08.2026 («размеры у блоков у всех разные»). Уточнение (ИНН и т.п.) НЕ живёт внутри коробки — оно уезжает в .ef-hint под ней, иначе поле становится двухэтажным и снова выше соседа. */ /* ⚠ ПОДЛОЖКА ФАКТА — ТЁПЛАЯ СТУПЕНЬ, А НЕ ЦВЕТ СТРАНИЦЫ (макет `.f-ro` на `--warm-1`, 18.08.2026). Поле-факт заливалось цветом страницы: на песочной странице разница с белым полем ввода рядом — процент тона, её физически не видно, и «не правится» приходилось узнавать по замку. Ступень выше делает разницу читаемой сразу, а замок остаётся подтверждением, а не единственным признаком. */ .ef-ro{ width:100%; box-sizing:border-box; padding: var(--space-2) var(--space-3); font-size:13.5px; border:1px solid transparent; border-radius: var(--radius); background:var(--color-background-rail); color:var(--color-text-primary); min-height:37px; display:flex; align-items:center; gap: var(--space-2); } .ef-ro-v{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:19px; } .ef-ro[data-wrap="true"]{ align-items:flex-start; } .ef-ro[data-wrap="true"] .ef-ro-v{ white-space:pre-wrap; overflow:visible; text-overflow:clip; line-height:1.5; } .ef-ro-lock{ flex:none; color:var(--color-text-5); display:inline-flex; } .ef-ro[data-wrap="true"] .ef-ro-lock{ margin-top:2px; } .ef-hint{ font-size:11.5px; line-height:1.35; color:var(--color-text-tertiary); margin-top: var(--space-1); } .ef-err{ font-size:11.5px; line-height:1.4; color:var(--color-negative); margin-top: var(--space-1); } .ef-sec + .ef-sec{ margin-top: var(--space-4); padding-top: var(--space-4); border-top:1px solid var(--color-background-hover); } /* Заголовок секции темнее подписей полей — иначе два уровня читаются как один. */ .ef-sec-t{ font-size:12px; font-weight:700; text-transform:none; color:var(--color-text-secondary); margin-bottom: var(--space-3); } .ef-btn{ font-size:13px; font-weight:600; padding: var(--space-2) var(--space-4); border-radius: var(--radius); border:1px solid var(--color-line-1); background:var(--color-background-primary); color:var(--color-text-secondary); cursor:pointer; font-family:inherit; white-space:nowrap; transition:background 120ms, border-color 120ms; } .ef-btn:hover{ background:var(--color-background-page); border-color:var(--color-text-5); } .ef-btn-go{ border:none; background:var(--color-accent); color:var(--color-accent-soft); padding: var(--space-2) var(--space-4); } .ef-btn-go:hover{ background:var(--color-accent); border-color:transparent; } .ef-btn-go:disabled{ background:var(--color-line-1); color:var(--color-text-tertiary); cursor:default; } .ef-btn-go:disabled:hover{ background:var(--color-line-1); } /* ── ПОЛЯ-ВЫПАДАШКИ ФОРМЫ: статья и дата (2026-07-31) ────────────────────── Нативные select и input[type=date] рисует операционная система: чужой шрифт в списке, чужой календарь, серая стрелка — посреди формы это читается дырой в интерфейсе. Оба поля собраны на ОДНОМ каркасе: кнопка ростом с .ef-in плюс всплывающая панель под ней. Движение: приход 180мс ease-out-quart (быстрый старт = ощущение отклика, спокойное приземление), уход 140мс — закрытое хотят видеть закрытым сразу. Масштаб от .96, а не от нуля: из нуля панель читается синтетикой. */ .fp-wrap{ position:relative; } .fp-trig{ display:flex; align-items:center; gap: var(--space-2); width:100%; box-sizing:border-box; text-align:left; padding: var(--space-2) var(--space-3); min-height:37px; font-size:13.5px; font-family:inherit; color:var(--color-text-primary); background:var(--color-background-primary); border:1px solid var(--color-line-1); border-radius: var(--radius); cursor:pointer; transition:border-color 150ms ease, box-shadow 150ms ease; } .fp-trig:hover{ border-color:var(--color-text-5); } .fp-trig[data-open="true"]{ border-color:var(--color-blue); box-shadow:var(--focus-ring); } .fp-trig[data-empty="true"] .fp-val{ color:var(--color-text-4); } .fp-val{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .fp-sub{ flex:none; font-size:12px; color:var(--color-text-4); } .fp-car{ flex:none; color:var(--color-text-4); display:inline-flex; transition:transform var(--dur-2) var(--ease-out-quart); } .fp-trig[data-open="true"] .fp-car{ transform:rotate(180deg); } .fp-pop{ position:absolute; left:0; z-index:90; background:var(--color-background-primary); border:1px solid var(--color-line-1); border-radius: var(--radius); box-shadow:0 14px 32px -18px rgba(44,46,49,.34), 0 2px 8px -4px rgba(44,46,49,.12); transform-origin:top left; animation:fp-in var(--dur-2) var(--ease-out-quart) both; } .fp-pop[data-side="up"]{ transform-origin:bottom left; animation-name:fp-in-up; } .fp-pop[data-closing="true"]{ animation:fp-out 140ms var(--ease-in-cubic) both; } @keyframes fp-in { from{ opacity:0; transform:scale(.96) translateY(-6px) } to{ opacity:1; transform:none } } @keyframes fp-in-up { from{ opacity:0; transform:scale(.96) translateY(6px) } to{ opacity:1; transform:none } } @keyframes fp-out { from{ opacity:1; transform:none } to{ opacity:0; transform:scale(.985) translateY(-3px) } } .fp-search{ display:flex; align-items:center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-bottom:1px solid var(--color-background-secondary); } .fp-search input{ flex:1; min-width:0; border:0; outline:0; background:none; font-family:inherit; font-size:13.5px; color:var(--color-text-primary); } .fp-list{ max-height:252px; overflow-y:auto; padding: var(--space-1); } .fp-sec{ font-size:11px; color:var(--color-text-4); padding: var(--space-2) var(--space-2) var(--space-1); } .fp-item{ display:flex; align-items:center; gap: var(--space-2); padding: var(--space-2) var(--space-2); border-radius: var(--radius); cursor:pointer; font-size:13.5px; color:var(--color-text-primary); transition:background 120ms ease; } .fp-item[data-cur="true"]{ background:var(--color-background-hover); } .fp-item[data-on="true"]{ background:var(--color-accent-soft); color:var(--color-accent); } .fp-item.mute{ color:var(--color-text-tertiary); } /* Появление пунктов — только на открытии (атрибут снимается по таймеру): при наборе в поиске список обязан меняться мгновенно, иначе фильтр «залипает». */ .fp-pop[data-enter="true"] .fp-item{ animation:fp-item 240ms var(--ease-out-quart) both; animation-delay:calc(var(--i,0) * 16ms); } @keyframes fp-item{ from{ opacity:0; transform:translateY(-5px) } to{ opacity:1; transform:none } } /* Убрать пункт из СПРАВОЧНИКА (не из проекта) — тихий крестик у строки списка: громким он читался бы главным действием строки, а главное здесь — выбрать. */ .fp-del{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius: var(--radius); color:var(--color-text-4); opacity:.35; cursor:pointer; transition:opacity var(--t-fast), background var(--t-fast), color var(--t-fast); } .fp-item:hover .fp-del{ opacity:1; } .fp-del:hover{ background:var(--color-negative-soft); color:var(--color-negative); } .fp-none{ padding: var(--space-3) var(--space-3); font-size:13px; color:var(--color-text-tertiary); } .fp-new{ display:flex; align-items:center; gap: var(--space-2); margin: 0 var(--space-1) var(--space-1); padding: var(--space-2) var(--space-2); border-radius: var(--radius); border-top:1px solid var(--color-background-hover); cursor:pointer; font-size:13.5px; color:var(--color-text-secondary); transition:background 120ms ease, color 120ms ease; } .fp-new:hover{ background:var(--color-background-hover); color:var(--color-text-primary); } /* ── КАЛЕНДАРЬ ПОЛЯ ДАТЫ ─────────────────────────────────────────────────── */ .fcal{ padding: var(--space-3); width:258px; } .fcal-h{ display:flex; align-items:center; justify-content:space-between; gap: var(--space-1); margin-bottom: var(--space-1); } .fcal-m{ font-size:13.5px; color:var(--color-text-primary); } .fcal-nav{ width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; flex:none; border:0; background:transparent; border-radius: var(--radius); color:var(--color-text-tertiary); cursor:pointer; transition:background 120ms ease, color 120ms ease; } .fcal-nav:hover{ background:var(--color-background-secondary); color:var(--color-text-primary); } .fcal-wd{ display:grid; grid-template-columns:repeat(7,1fr); } .fcal-wd span{ text-align:center; font-size:10.5px; color:var(--color-text-4); padding: var(--space-1) 0; } /* Смена месяца — свап по тик-счётчику: сетка приезжает с той стороны, куда нажали. */ .fcal-g{ display:grid; grid-template-columns:repeat(7,1fr); animation:fcal-in 200ms var(--ease-out-quart) both; } .fcal-g[data-dir="-1"]{ animation-name:fcal-in-b; } @keyframes fcal-in { from{ opacity:0; transform:translateX(8px) } to{ opacity:1; transform:none } } @keyframes fcal-in-b{ from{ opacity:0; transform:translateX(-8px) } to{ opacity:1; transform:none } } .fcal-d{ height:32px; border:0; background:transparent; border-radius: var(--radius); cursor:pointer; font-family:inherit; font-size:13px; color:var(--color-text-primary); transition:background 120ms ease, color 120ms ease; } .fcal-d:hover, .fcal-d[data-cur="true"]{ background:var(--color-background-secondary); } .fcal-d[data-out="true"]{ color:var(--color-text-5); } .fcal-d[data-wknd="true"]{ color:var(--color-text-4); } .fcal-d[data-today="true"]{ box-shadow:inset 0 0 0 1px var(--color-line-1); } .fcal-d[data-on="true"]{ background:var(--color-accent-soft); color:var(--color-accent); } .fcal-f{ display:flex; gap: var(--space-1); margin-top: var(--space-2); padding-top: var(--space-2); border-top:1px solid var(--color-background-hover); } .fcal-f button{ flex:1; padding: var(--space-1) 0; font-family:inherit; font-size:12px; color:var(--color-text-secondary); background:var(--color-background-page); border:0; border-radius: var(--radius); cursor:pointer; white-space:nowrap; transition:background 120ms ease, color 120ms ease; } .fcal-f button:hover{ background:var(--color-background-secondary); color:var(--color-text-primary); } @media (prefers-reduced-motion:reduce){ .fp-pop, .fp-pop[data-enter="true"] .fp-item, .fcal-g{ animation:none !important; } .fp-car{ transition:none; } } @media (max-width:1000px){ .ef-grid[data-cols="4"], .ef-grid[data-cols="3"]{ --ef-cols:2; } } @media (max-width:620px){ .ef-grid{ --ef-cols:1; } .ef-grid > *{ grid-column:auto !important; } } /* ⚠ ТА ЖЕ СТРАХОВКА, ЧТО У `.fm-op-form`, И ПО ТОЙ ЖЕ ПРИЧИНЕ (18.08.2026). В сетке ИЗ ОДНОЙ колонки `span 2` не растягивает на всю ширину, а заводит неявную вторую: поле уезжает за край и пропадает под `overflow:hidden` — ровно так спрятался график траншей. Сейчас ни у одной `EfGrid cols={1}` детей со `span` нет (проверено обходом всех восьми сеток), но правило снимает саму возможность на будущее. */ .ef-grid[data-cols="1"] > *{ grid-column:auto !important; } /* ── РЕЖИМ ПРАВКИ ПАНЕЛИ: аккордеон секций (вариант Б, выбран 2026-07-19) ── Секции свёрнуты в строки со сводкой справа, открыта одна. Раскрытие — трюк grid-template-rows 0fr→1fr (как у OpCombo): высота анимируется без замеров. */ /* ⚠ Без overflow:hidden намеренно: он резал выпадашки «＋ Добавить» границей секции. Скругление держим на самой шапке и на нижней кромке тела. */ /* ⚠ ГЕОМЕТРИЯ СЕКЦИИ — ЗАМЕР МАКЕТА `.pe-acc` (18.08.2026). Свёрнутая секция без рамки не читалась коробкой: семь строк подряд на общем фоне выглядели списком, а не семью закрытыми ящиками. Радиус — КАРТОЧНЫЙ (16), а не контрольный (10): это карточка, и рядом с ней стоят карточки панели того же радиуса. ⚠ 14px по вертикали шапки — литерал: в шкале отступов между 12 и 16 ступени нет, а замер макета даёт ровно 14 (шапка 49 = 14+21+14). Ставить 16 «ради токена» значит поднять шапку на 4px и разойтись с макетом. */ .pe-acc{ background:var(--color-background-primary); border:1px solid var(--color-line-1); border-radius: var(--radius-card); margin-bottom: var(--space-2); } .pe-head{ display:flex; align-items:center; gap: var(--space-3); padding: var(--space-3h) var(--space-4); cursor:pointer; user-select:none; border-radius: var(--radius-card); transition:background 140ms; } .pe-acc.on .pe-head{ border-radius: var(--radius-card) var(--radius-card) 0 0; } /* Открытая шапка — тёплая ступень сайдбара (--warm-1 макета), а не цвет страницы: на песочной странице заливка страницей физически неразличима. */ .pe-head:hover{ background:var(--color-background-rail); } .pe-acc.on .pe-head{ background:var(--color-background-rail); } /* ⚠ Межстрочный ОБЯЗАН стоять в шорткате `font:`: без него шоткат сбрасывает унаследованные от `.fm-paper` 1.5 в normal, и строка шапки садится на 17 вместо 21. */ .pe-name{ font:700 14px/1.5 'Inter'; color:var(--color-text-primary); } .pe-sum{ font:400 13px/1.5 'Inter'; color:var(--color-text-tertiary); text-align:right; } .pe-sum.warn{ color:var(--color-negative); } .pe-car{ color:var(--color-text-tertiary); font-size:11px; flex:none; transition:transform 240ms var(--ease-out-quart); } .pe-acc.on .pe-car{ transform:rotate(180deg); } .pe-slot{ display:grid; grid-template-rows:0fr; transition:grid-template-rows 260ms var(--ease-out-quart); } .pe-acc.on .pe-slot{ grid-template-rows:1fr; } .pe-slot > div{ overflow:hidden; min-height:0; } .pe-body{ padding: var(--space-4) var(--space-4) var(--space-4); border-top:1px solid var(--color-line-1); } /* ⚠ ШАГ СЕТКИ ПОЛЕЙ В СЕКЦИИ — 12/12 (макет `.pe-grid`). Общий `.ef-grid` разводит колонки на 16: в двухколоночной секции это делало вертикальный шов шире горизонтального, и пара «Клиент | Статус» переставала читаться парой. */ .pe-body .ef-grid{ column-gap: var(--space-3); } /* Под-шапка группы внутри секции: название + счётчик + СВОЯ кнопка добавления */ .pe-bar{ display:flex; align-items:center; gap: var(--space-2); margin-bottom: var(--space-3); } .pe-bar-t{ font:700 12px/1.5 'Inter'; text-transform:none; color:var(--color-text-secondary); } .pe-bar-c{ font:400 12px/1.5 'Inter'; color:var(--color-text-tertiary); font-variant-numeric:tabular-nums; } /* ⚠ ПУНКТИР — ЭТО СМЫСЛ, А НЕ УКРАШЕНИЕ (макет `.pe-add`). Сплошная белая кнопка весила столько же, сколько «Готово» в шапке панели, — то есть обещала завершающее действие. Пунктир говорит другое: «здесь будет ещё одна строка». Высота 30, а не 36: это не поле формы, и вставать вровень с полями ей незачем. */ .pe-add{ display:inline-flex; align-items:center; gap: var(--space-1); font:400 13px 'Inter'; padding: 0 var(--space-2h); border-radius: var(--radius); border:1px dashed var(--color-line-1); background:transparent; color:var(--color-text-tertiary); cursor:pointer; font-family:inherit; white-space:nowrap; height:30px; transition:border-color 140ms, background 140ms, color 140ms, scale 120ms; } .pe-add:hover{ border-color:var(--color-line-strong); color:var(--color-text-secondary); } .pe-add:active{ scale:.96; } .pe-add .car{ font-size:9px; color:var(--color-text-tertiary); } .pe-menuwrap{ position:relative; } /* Выпадашка должна ЧИТАТЬСЯ как слой над таблицей. Плоская рамка сливалась со строками ниже — отсюда ощущение «месса». Глубина — слоями теней. */ .pe-menu{ position:absolute; top:calc(100% + 6px); right:0; min-width:212px; background:var(--color-background-primary); border-radius: var(--radius); padding: var(--space-1); z-index:30; box-shadow:0 0 0 1px rgba(44,46,49,.06), 0 2px 6px rgba(44,46,49,.05), 0 12px 28px rgba(44,46,49,.13); } .pe-menu .mh{ font:700 10.5px 'Inter'; text-transform:none; color:var(--color-text-tertiary); padding: var(--space-2) var(--space-2) var(--space-1); } .pe-mi{ display:block; width:100%; text-align:left; font:500 13.5px 'Inter'; padding: var(--space-2) var(--space-2); border-radius: var(--radius); border:none; background:none; color:var(--color-text-primary); cursor:pointer; font-family:inherit; } .pe-mi:hover{ background:var(--color-background-hover); } .pe-mi small{ display:block; font:400 11.5px 'Inter'; color:var(--color-text-tertiary); margin-top:1px; } .pe-msep{ height:1px; background:var(--color-background-tertiary); margin: var(--space-1) var(--space-2); } /* Строки-сущности внутри секции */ .pe-rows{ border-top:1px solid var(--color-background-tertiary); } /* ── ТАБЛИЦА ОПЕРАЦИЙ — КАРТОЧКА (макет `.mn`, 18.08.2026) ────────────────── Отдельным классом, а не правкой `.pe-rows`: в карточку у макета убрана ТОЛЬКО таблица денег. Строки подрядчиков, документов и сметы остаются простыми рядами с хайрлайном — они живут внутри своих группировок, и вторая рамка вокруг них дала бы карточку в карточке. ⚠ 11 по вертикали — литерал СОЗНАТЕЛЬНО, в шкалу он не вошёл: это ритм строки таблицы, подобранный под высоту ряда 60 (11+38+11). Округление до ближайшей ступени (10 или 12) двигает каждый ряд на 2px и всю таблицу на 10. */ .pe-rows.mn{ border:1px solid var(--color-line-1); border-radius: var(--radius-card); overflow:hidden; } .pe-rows.mn .pe-row{ padding: 11px var(--space-4); border-bottom:0; border-top:1px solid var(--color-line-1); font:400 14px/1.5 'Inter'; } .pe-rows.mn .pe-row.h{ background:var(--color-background-rail); border-top:0; border-bottom:1px solid var(--color-line-1); font:400 11.5px/1.5 'Inter'; color:var(--color-text-tertiary); } .pe-rows.mn .pe-row.h + .pe-row{ border-top:0; } .pe-rows.mn .pe-row.f{ background:var(--color-background-rail); padding-top:11px; border-top:1px solid var(--color-line-1); color:var(--color-text-primary); } /* Подзаголовок «Без даты» — не строка таблицы: линия над ним уже нарисована. */ .pe-rows.mn .pe-row.g{ padding: var(--space-3) var(--space-4) var(--space-1); } .pe-rows.mn .pe-row.g + .pe-row{ border-top:0; } .pe-row{ display:grid; align-items:center; gap: var(--space-3); padding: var(--space-3) 2px; border-bottom:1px solid var(--color-background-tertiary); font:400 13.5px 'Inter'; } .pe-row.h{ font:700 11px 'Inter'; text-transform:none; color:var(--color-text-tertiary); padding: var(--space-2) 2px; } .pe-row .r{ text-align:right; } /* Зона нажатия крестика — 40×40 через псевдоэлемент: видимый глиф 14px, но попадать в него мышью должно быть легко. */ .pe-x{ position:relative; color:var(--color-text-5); cursor:pointer; text-align:center; font-size:14px; line-height:1; transition:color 140ms, scale 120ms; } .pe-x::after{ content:""; position:absolute; left:50%; top:50%; width:40px; height:40px; transform:translate(-50%,-50%); } .pe-x:hover{ color:var(--color-negative); } .pe-x:active{ scale:.96; } /* РАСЧЁТНОЕ значение — НЕ поле. Раньше «Получено» и «Долг» были серыми боксами ровно той же геометрии, что инпуты, и читались как сломанные поля. */ .pe-ro{ font:700 15px 'Space Grotesk','Inter',sans-serif; font-variant-numeric:tabular-nums; color:var(--color-text-primary); padding: var(--space-2) 0; min-height:37px; display:flex; align-items:center; } .pe-ro.accent{ color:var(--color-accent); } .pe-ro.muted{ color:var(--color-text-tertiary); } /* Долг > 0 — единственное место в блоке «Деньги», где цвет значит «посмотри сюда». Раньше цветным было «Получено» (синий = ссылка), а долг шёл нейтральным. */ .pe-ro.warn{ color:var(--color-warn); } /* Денежное поле: те же цифры, что у расчётных значений рядом. Без этого бюджет читался как «число из формы» (499996) рядом с соседним «470 000». */ .ef-in.money{ font:700 15px 'Space Grotesk','Inter',sans-serif; font-variant-numeric:tabular-nums; } /* Оболочка поля для чужеродных контролов (статус, теги): снаружи это такое же поле, как инпут рядом, внутри — родной пикер. */ .pe-shell{ border:1px solid var(--color-line-1); border-radius: var(--radius); background:var(--color-background-primary); padding: var(--space-1) var(--space-2); min-height:37px; display:flex; align-items:center; gap: var(--space-2); flex-wrap:wrap; transition:border-color 140ms; } .pe-shell:hover{ border-color:var(--color-text-5); } /* `.txt` — оболочка, внутри которой не пикер с чипами, а СТРОКА (договор): у неё паддинг и кегль поля ввода, иначе текст в ней крупнее соседей по сетке. */ /* ⚠ 7px по вертикали — замер макета `.pe-in`, и это не придирка: строка Golos 13.5 с обычным межстрочным даёт 22, и при паддинге 8 коробка вырастает до 38 — на пиксель выше соседних полей той же сетки (поймано замером 18.08.2026). */ .pe-shell.txt{ padding: var(--space-1h) var(--space-3); font-size:13.5px; line-height:normal; } /* Раскрывающаяся строка подрядчика */ /* Подсветка была var(--color-background-page) — процент тона на белом, её физически не видно, и строка читалась как текст, а не как цель. Полоска слева говорит «сюда можно нажать». */ .pe-conrow{ cursor:pointer; } .pe-conrow:hover{ background:var(--color-background-hover); box-shadow:inset 2px 0 0 var(--color-line-1); } /* Итог под списком строк: те же колонки, без нижней границы, но плотнее строк. */ .pe-row.f{ border-bottom:none; padding-top: var(--space-3); color:var(--color-text-primary); font-weight:600; } /* Подзаголовок группы внутри таблицы («Без даты»): объясняет пустую колонку датой один раз, вместо прочерка в каждой строке. */ .pe-row.g{ border-bottom:none; padding: var(--space-3) 2px var(--space-1); font:700 10.5px 'Inter'; text-transform:none; color:var(--color-text-4); } /* Статус операции — ДВА слова на всё приложение: план и факт. Просрочка не отдельный статус, а красная дата у плана; «расчётный» не статус, а пунктир под суммой. Ширина фиксированная, иначе правый край колонки рвётся. */ .pe-chip{ display:inline-block; min-width:56px; text-align:center; font:600 11.5px 'Inter'; padding: 3px var(--space-2); border-radius: var(--radius); border:1px solid transparent; } /* Оба чипа были почти одной светлоты — боковым зрением «факт» и «план» не различались. */ .pe-chip.ok{ background:var(--color-positive-soft); color:var(--color-positive); } .pe-chip.plan{ background:var(--color-background-tertiary); color:var(--color-text-secondary); } .pe-conedit{ padding: var(--space-3) 2px var(--space-1); border-bottom:1px solid var(--color-background-tertiary); } /* Подсказки — без «сирот» на последней строке */ .ef-hint, .pe-empty{ text-wrap:pretty; } /* Композитный бокс суммы транша: комиссия банка — вторая строка ВНУТРИ бокса. ⚠ Не выносить её отдельным полем: этот вариант уже забраковали — рвёт сетку. */ .pe-amt{ border:1px solid var(--color-line-1); border-radius: var(--radius); overflow:hidden; background:var(--color-background-primary); transition:border-color 150ms; } .pe-amt:hover{ border-color:var(--color-text-5); } .pe-amt:focus-within{ border-color:var(--color-blue); box-shadow:var(--focus-ring); } .pe-amt input{ width:100%; border:none; background:transparent; outline:none; font-family:inherit; font-size:13.5px; padding: var(--space-2) var(--space-3); color:var(--color-text-primary); text-align:right; } .pe-amt .comm{ display:flex; align-items:center; border-top:1px dashed var(--color-line-1); background:var(--color-background-page); } .pe-amt .comm span.lbl{ font:700 9.5px 'Inter'; text-transform:none; color:var(--color-text-4); padding-left: var(--space-2); white-space:nowrap; } .pe-amt .comm input{ font-size:11.5px; padding: var(--space-1) var(--space-1); } /* Тихая ссылка «+ комиссия» — опция, а не поле: не должна весить как контрол */ .pe-quiet{ display:inline-block; margin-top: var(--space-1); font:400 11.5px 'Inter'; color:var(--color-text-4); cursor:pointer; transition:color 140ms; } .pe-quiet:hover{ color:var(--color-accent); } /* Стрелка «в карточку подрядчика» — тихая, но всегда видимая: по hover её бы не нашли */ .pe-go{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius: var(--radius); color:var(--color-text-4); cursor:pointer; transition:background var(--t-fast), color var(--t-fast); } .pe-go:hover{ background:var(--color-accent-soft); color:var(--color-accent); } .pe-warnrow{ display:flex; justify-content:space-between; align-items:center; gap: var(--space-2); flex-wrap:wrap; margin-top: var(--space-3); font:400 13px 'Inter'; color:var(--color-warn); } .pe-empty{ font:400 13px 'Inter'; color:var(--color-text-tertiary); padding: var(--space-4) 2px; text-align:center; border:1px dashed var(--color-line-1); border-radius: var(--radius); } /* статус-ссылка (выплачено/долг/получено/ожидается): подчёркивание выезжает слева направо при наведении на строку или слово */ .fm-statlink{ position:relative; display:inline-block; } .fm-statlink::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:1.5px; background:currentColor; border-radius: var(--radius); transform:scaleX(0); transform-origin:left center; transition:transform .3s cubic-bezier(.4,0,.2,1); } .fm-payrow:hover .fm-statlink::after, .fm-statlink:hover::after{ transform:scaleX(1); } /* Смета-модалка: чистые строки, редактирование по клику, грип/крестик на ховере */ .sm-irow{ border-bottom:1px solid var(--color-background-secondary); transition:background .1s; } .sm-irow:hover{ background:var(--color-background-page); } .sm-val{ transition:border-color .12s; } .sm-irow:hover .sm-val, .sm-taxrow:hover .sm-val{ border-bottom-color:var(--color-line-1) !important; } .sm-del{ opacity:0; transition:opacity .12s; } .sm-irow:hover .sm-del, .sm-sechd:hover .sm-del, .sm-taxrow:hover .sm-del{ opacity:1; } .sm-grip{ opacity:0; transition:opacity .12s; cursor:grab; } .sm-irow:hover .sm-grip, .sm-sechd:hover .sm-grip{ opacity:.5; } .sm-grip:hover{ opacity:.9 !important; } .sm-addlink{ border:0; background:none; padding:0; font:500 16px 'Inter'; color:var(--color-text-tertiary); cursor:pointer; transition:color .12s; } .sm-addlink:hover{ color:var(--color-text-primary); } /* Пульсация «в работе» удалена вместе с точками-маркерами (2026-08-11): пульсировать было нечему — сам пульс жил только на кружке 6px рядом со словом «в работе». */ button { font-family: inherit; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast); } /* Тактильный отклик на нажатие (принцип scale-on-press). transform уже в transition выше. :not(:disabled) — не «дёргать» неактивные; элементы с инлайн-transform (драг и т.п.) не затрагиваются. */ button:active:not(:disabled) { transform: scale(0.96); } /* Единый «календарный» округлый язык: все кнопки — пилюли/круги (как «Сохранить»/дни в date-picker). !important перебивает инлайновые radius-sm/md/lg. Инпуты/карточки (div) не затрагиваются. */ button { border-radius: var(--radius) !important; } input[type=number] { -moz-appearance: textfield; } input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Плейсхолдер обязан отличаться от значения. Правила не было вообще — цвет брал браузер, и на песочном поле подсказка «0» читалась как введённый ноль, а пример «Точка / частный займ» — как заполненное поле (см. скриншот экрана займов 2026-08-05). */ ::placeholder { color: var(--color-text-4); opacity: 1; } /* Системный outline не используем нигде — только общее кольцо (см. --focus-ring). Раньше здесь стоял `outline: 2px solid var(--color-accent)`: у select и полей форм он давал сплошную кобальтовую рамку, которая в песочном интерфейсе читалась как ошибка ввода, а не как «сюда попадут нажатия клавиш». */ button:focus, input:focus, select:focus, textarea:focus { outline: none; } button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* Форма реквизитов контрагента (ClientFormFields). Вся форма — ОДНА сетка: интервал между полями задаёт gap, своих вертикальных отступов у полей нет. Число колонок задано прямо, а не через auto-fill: форма живёт и в широкой модалке, и в узкой панели справа, а auto-fill считает колонки от ширины и давал бы в них разное число столбцов при одинаковом наборе полей. */ .cff-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-3); align-items:start; } @media (max-width: 560px) { .cff-grid { grid-template-columns: minmax(0,1fr); } } .btn-primary { background: var(--color-accent); color:var(--color-accent-soft); box-shadow:var(--shadow-accent); } .btn-primary:hover { filter:brightness(1.12); } /* анти-нейро: без подлёта и свечения — только тон */ .btn-primary:active { transform:translateY(0); filter:brightness(.98); } .fm-card { background:var(--color-background-primary); border:none; box-shadow:none; transition:transform var(--t-med); } .fm-card:hover { box-shadow:none; } .fm-card .fm-card { background: var(--color-background-secondary); } .btn-ghost { background:transparent; color:var(--color-text-secondary); border:0.5px solid var(--color-border-secondary); } .btn-ghost:hover { background:var(--color-background-secondary); color:var(--color-text-primary); } /* ⚠ !important обязателен: глобальное `button{border-radius:var(--radius) !important}` перебивает и класс, и инлайн. У пункта сайдбара радиус 8 (замер макета), у остальных контролов 10 — это разные роли, а не разнобой. */ /* Песочная панель: две колонки только пока цепочка помещается в левую одной строкой. Ниже 1300 складывается, и цепочка получает всю ширину. */ .fm-loud-grid{ grid-template-columns:minmax(0,2fr) minmax(0,1fr); } @media(max-width:1300px){ .fm-loud-grid{ grid-template-columns:1fr; gap:20px !important; } } /* ══ БЛОК «ХВАТИТ ЛИ ДЕНЕГ» — СВОИ КЛАССЫ, НИ С ЧЕМ НЕ ПЕРЕПЛЕТЁННЫЕ ══ Заведены после того, как попытка выразить связь «абзац по границе отдать» через общую сетку растянула колонки цепочки на всю ширину: текст участвовал в расчёте max-content. Правило: у этого блока собственные имена, и ничего общего с .card/.lrow/.step остальных экранов. */ .fm-chain{ display:flex; align-items:flex-end; gap:8px; flex-wrap:nowrap; } /* Интерлиньяж 1.5 — замер макета (.loud p: 14/21). Было 1.55: те же 14px, но строка на 0,7px выше, и абзац из двух строк вставал на 1,4px ниже. */ .fm-horizon-note{ font-size:14px; line-height:1.5; color:var(--color-text-secondary); margin-top:16px; max-width:58ch; } .nav-item { background: transparent; border-radius:8px !important; transition: background var(--t-fast), color var(--t-fast); } .nav-item:hover { background:var(--color-background-secondary) !important; color:var(--color-text-primary) !important; } .nav-item.is-active { background:var(--color-accent-soft) !important; color:var(--color-accent) !important; font-weight:600; } .nav-item:focus, .nav-item:focus-visible { outline: none !important; } .card { transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); } .card:hover { box-shadow:var(--shadow-sm); border-color:var(--color-border-secondary); } .card.is-selected { border-color:var(--color-accent); box-shadow:var(--shadow-sm); } /* ── КАРТОЧКА ПРОЕКТА НА КАНБАНЕ — перенос из макета (2026-08-16) ── Паспорт снят замером с `~/Desktop/dva-scheta-paddle.html`, а не подобран на глаз: рамка 1px --color-line-1, радиус карточки, паддинг 16, ховер — --color-line-strong, выбранная — кобальтовая рамка + кольцо 1px. Движение 800мс на цвет, как у .fm-cta; изинг НАШ (--ease-out-quart), кривую Paddle второй системой не заводим. ⚠ Классы `.card` и общий класс пропорции у карточки СНЯТЫ, и это не уборка, а два исправления: ① `.card:hover` красил рамку в --color-border-secondary, а он ПРОЗРАЧНЫЙ — рамка при наведении исчезала вместо того, чтобы набирать контраст; ② класс плитки держал пропорцию 5:3, из-за которой карточка «Запроса» (у неё нет ни полосы, ни пары «получено / бюджет») добирала пустотой высоту насыщенной. Высоту задаёт контент — правило «высота от контента, а не от пропорции». Полоса под главным числом может отсутствовать: кегли в ряду она не меняет. После этого класс пропорции остался без носителей и удалён совсем. */ .fm-pcard { background:var(--color-background-primary); border:1px solid var(--color-line-1); border-radius:var(--radius-card); padding:var(--space-4); cursor:pointer; transition:border-color 800ms var(--ease-out-quart), box-shadow 800ms var(--ease-out-quart), opacity 800ms var(--ease-out-quart); } .fm-pcard:hover { border-color:var(--color-line-strong); } .fm-pcard.is-selected { border-color:var(--color-accent); box-shadow:0 0 0 1px var(--color-accent); } .fm-pcard.is-off { opacity:.62; } /* ── ПЕСОЧНАЯ ПАНЕЛЬ НАД ДОСКОЙ («Проекты») — перенос из макета 16.08.2026 ── Единственный громкий блок экрана: доска под ней тихая. Две колонки — деньги доски слева, кому отдать справа; та же композиция, что у «Хватит ли денег». ⚠ Две колонки только пока цепочка «бюджет − получено = ждём» помещается в левую ОДНОЙ строкой (замер тот же, что на дашборде: ~1300px). Перенос строки делает «ждём» отдельным числом вместо итога ряда — уменьшаем кегль, а не рвём строку. */ .fm-board-loud { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap: var(--space-6); } @media (max-width:1300px) { .fm-board-loud { grid-template-columns:1fr; gap: var(--space-5); } } /* ⚠ ОТБИВКА ЦЕПОЧКИ ОТ ПОДПИСИ — 18, А НЕ 12 (правка 17.08.2026 по замечанию Игоря «расстояние в макете больше, чем у нас»). У макета это не одно значение, а СХЛОПНУВШАЯСЯ ПАРА: `.card-s{margin-bottom:18}` и `.chain{margin-top:14}` стоят в блочном потоке и дают max(18,14)=18. У нас подпись margin-bottom не несёт, поэтому 18 надо назвать здесь прямо — иначе цепочка, абзац под ней и кнопки поднимаются на 6px каждое. Копируя из макета отступ между соседями, всегда проверяй, не схлопываются ли там два: одно из значений в исходнике окажется меньше видимого. */ .fm-chain { display:flex; align-items:flex-end; gap: var(--space-2); flex-wrap:nowrap; margin-top:18px; } .fm-chain-s { min-width:0; } .fm-chain-k { font-size:13px; line-height:1.5; color:var(--color-text-secondary); white-space:nowrap; } .fm-chain-v { font-size:clamp(19px,1.85vw,26px); line-height:1.15; margin-top:2px; white-space:nowrap; } .fm-chain-s.is-fin .fm-chain-v { font-size:clamp(23px,2.2vw,31px); } /* Межстрочный у знака — 1.5, как у макета (`.chain .op` его не задаёт и берёт от body). Коробка знака от этого выше коробки числа, а ряд выровнен по низу, поэтому «−» и «=» встают ВЫШЕ середины цифр — на уровне их верхней трети. На 1.15 знак съезжал к середине и читался как часть числа, а не как арифметический шов между двумя величинами. */ .fm-chain-op { font-size:clamp(16px,1.55vw,22px); line-height:1.5; color:var(--color-text-tertiary); padding-bottom:6px; flex:none; } /* На узком экране знаки арифметики в столбик превращаются в россыпь чёрточек — порядок несут строки, а итог отбивается линейкой на песке. */ @media (max-width:760px) { .fm-chain { display:grid; grid-template-columns:1fr 1fr; gap: var(--space-3) var(--space-4); align-items:start; } .fm-chain-op { display:none; } .fm-chain-s.is-fin { grid-column:1 / -1; border-top:1px solid #E4D3AE; padding-top: var(--space-3); } } .pill { transition: background var(--t-fast), color var(--t-fast); } /* ── Экран «Кредиты и займы» ── Карточка займа была
: без наведения, без отклика на нажатие и недостижима с клавиатуры. Стала