/* ═══ Токены ═══════════════════════════════════════════════════════════════ Наши имена — псевдонимы токенов @panacea/ui. Сотни вхождений var(--своё) ниже по файлу не менялись: алиас разрешается в момент применения, поэтому тему переключает сам системный токен. ПОЧЕМУ ЗДЕСЬ ПОЧТИ НЕТ ТЁМНОГО БЛОКА. Переопределить алиас в тёмной теме — значит приколотить его к одному значению и сломать переключение: системный токен уже переключается сам (у системы все 89 цветовых продублированы в :root, в @media и в [data-theme='dark']). Тёмный блок нужен только тем переменным, для которых системного токена НЕТ. Таких три, они ниже. Соответствия по ролям и замеры «до/после» — docs/ds-tokens-plan.md. */ :root { /* поверхности */ --bg: var(--pnc-bg-surface); --panel: var(--pnc-bg-primary); /* границы */ --border: var(--pnc-border-default); --border-strong: var(--pnc-border-input); /* текст */ --text: var(--pnc-text-primary); --muted: var(--pnc-text-secondary); /* бренд. Именно brand-TEXT, а не brand-primary: переменная стоит и в color:, и в border-color:, и в background:, а brand-primary как цвет текста даёт в тёмной теме 4.36 при пороге 4.5. brand-text проходит обе роли. */ --accent: var(--pnc-brand-text); --accent-weak: var(--pnc-status-info-bg); --primary: var(--pnc-brand-primary); /* статусы */ --new: var(--pnc-status-accent-text); --new-weak: var(--pnc-status-accent-bg); --danger: var(--pnc-status-danger-text); --green: var(--pnc-status-success-text); --yellow: var(--pnc-status-warn-text); /* размеры */ --shadow: var(--pnc-shadow-md); --radius: var(--pnc-radius-lg); /* ── Без системного токена: своя пара значений на обе темы ────────────── Осталось два случая из трёх — тост переехал на .pnc-toast целиком. 1. Ховер строки NEW: у status-accent нет слота bg-hover (заявка B3). */ --new-weak-hover: #f8e1c8; /* 2. Категориальный тёплый: «непрямой конкурент». Не status-accent — тот закреплён за оценочным «требует внимания». Заявка B4. */ --cat-warm-bg: #fdf1e0; --cat-warm-border: #e6a850; --cat-warm-text: #8a5300; } @media (prefers-color-scheme: dark) { /* Guard :not([data-theme='light']) обязателен: без него явный выбор светлой темы не вернёт эти переменные в светлые значения. */ :root:not([data-theme='light']) { --new-weak-hover: #3b2c19; --cat-warm-bg: #332512; --cat-warm-border: #a9752c; --cat-warm-text: #f0b45f; } } :root[data-theme='dark'] { --new-weak-hover: #3b2c19; --cat-warm-bg: #332512; --cat-warm-border: #a9752c; --cat-warm-text: #f0b45f; } * { box-sizing: border-box; } html, body { margin: 0; } body { /* Гарнитура системы. Токен --pnc-font-primary приходит из @panacea/ui; запасной стек на случай, если стиль системы не подключился. */ font-family: var(--pnc-font-primary, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif); background: var(--bg); color: var(--text); font-size: var(--pnc-font-13); line-height: 1.45; } /* Форм-контролы не наследуют гарнитуру от body — им её задаёт браузер (на macOS Arial). Из-за этого в интерфейсе жили два шрифта: 491 элемент из 2243 рендерился в Arial. Одна строка убирает разнобой; замеры «до/после» — в docs/ds-connect.md. */ button, input, select, textarea { font-family: inherit; } /* ── Каркас: рельса слева, приложение справа ────────────────────────────── min-width: 0 на колонке контента обязателен. Без него флекс-элемент не сжимается ниже ширины содержимого, и таблица в 3300px не прокручивается внутри себя, а распирает страницу вбок вместе с рельсой. */ .app-shell { display: flex; align-items: flex-start; height: 100vh; overflow: hidden; } /* Прокручивается КОЛОНКА КОНТЕНТА, а не страница целиком. Пока прокручивалась страница, под карточкой оставалась полоса фона, и она ехала вместе с содержимым; рельса при этом стоит на месте (sticky, высота в экран), и её подвал с выбором темы оказывался под этой полосой. Выглядело так, будто переключатель темы прячется. Так же устроен каркас у продукта-донора: у системы для этого есть готовый класс .pnc-h-100 (height: 100vh; overflow: hidden; колонка). Здесь то же самое своими двумя строками — оболочке нужен ещё flex-ряд под рельсу. */ .app-main { flex: 1 1 auto; min-width: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; } /* Тема в подвале рельсы. Показ оставлен системному __wide — своё правило с display перебило бы его специфичностью и вывалило блок из свёрнутой рельсы. Здесь только отступы. */ .theme-box { padding: 4px 2px 8px; } .theme-box__label { display: block; margin-bottom: 4px; color: var(--muted); } /* ── Topbar ── Шапка и вкладки липнут одним контейнером: раньше каждая полоса знала высоту соседа числом и на узком экране они наезжали друг на друга. */ /* Шапка держится наверху структурой, а не `sticky`: она первый элемент колонки, а прокрутка живёт ниже. */ .appbar { flex: 0 0 auto; z-index: var(--pnc-z-floating); background: var(--panel); border-bottom: 1px solid var(--border); } .topbar { padding: 10px 18px; } /* Шапка страницы системы кладёт всё в одну строку; у нас в неё складывается название, четыре счётчика и профиль — разрешаем перенос. */ .topbar .pnc-page-header__row { flex-wrap: wrap; } .subtitle { color: var(--muted); font-size: var(--pnc-font-11); } .counters { display: flex; gap: 16px; margin-left: 6px; } .counters .c { text-align: center; } .counters .c b { display: block; font-size: var(--pnc-font-16); color: var(--accent); } /* Подпись счётчика — роль «метка» системы (.pnc-label): кегль, интервал и капитель приходят оттуда, у нас остаётся только цвет. */ .counters .c span { color: var(--muted); } /* ── Buttons ── Своей системы кнопок больше нет: вид, размеры и все состояния даёт .pnc-btn. Соответствие ролей — в комментарии к BTN_ROLE в app.js. */ /* ── Tabs ── Вид даёт .pnc-tabs__item, раскладку полосы — .pnc-tabs--static (вариант без прокрутки и без индикатора-подчёркивания на JS). Своего здесь остались только раскладка полосы: система даёт вид пункта, а строку из пунктов собирает потребитель (её флекс-контейнер .pnc-tabs__list живёт внутри прокручиваемого .pnc-tabs__viewport, который здесь не нужен). */ .tabs { display: flex; flex-wrap: wrap; gap: 2px 4px; padding: 0 18px; } .badge { background: var(--pnc-status-accent-bg); color: var(--pnc-status-accent-text); border-radius: 10px; padding: 0 6px; font-size: var(--pnc-font-11); } .badge:empty { display: none; } /* ── Panels ── */ /* Раздел — это подложка с отступами; белую карточку внутри рисует .pnc-card. Раздел занимает всю оставшуюся высоту и прокручивает СЕБЯ: страница целиком не прокручивается, иначе под карточкой едет полоса фона. */ .panel { display: none; padding: 16px 18px 40px; } .panel.active { display: block; flex: 1 1 auto; min-height: 0; overflow-y: auto; } /* Раздел с таблицей — особый: прокрутку забирает сама таблица, а не раздел. ЗАЧЕМ. Раньше высота таблицы считалась от окна числом (`max-height: calc(100vh - 240px)`). Число это угадано, и угадано неточно: снизу оставалась полоса в полсотни пикселей, а таблица резалась посередине строки. На сервере, где строки «NEW» залиты янтарным, обрезанная строка читалась как непонятная жёлтая полоса вдоль всего низа. Теперь высоты никто не предполагает: раздел и карточка — колонки, а таблица забирает остаток. Шапка таблицы остаётся липкой — она липнет к своему прокручиваемому контейнеру, то есть к .table-wrap. */ .panel--fill.active { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; } .panel__card { flex: 1 1 auto; min-height: 0; /* Карточка доходит до нижнего края окна: нижние отступ, рамка и скругление сняты, чтобы под таблицей не оставалось ни полосы фона, ни обрезка карточки. Данные идут до самого низа. */ padding-bottom: 0; border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } /* ── Filters ── Панель фильтров целиком из системы (.pnc-filter-bar + __fields + __divider + __checkboxField). Нашего здесь три вещи: ширина поля поиска, блок действий справа и вид нативного на экране больше нет: над каждым стоит надстройка из классов системы (.pnc-select + .pnc-portal-dropdown), сам элемент спрятан и остаётся источником истины. Ширина списка в полосе фильтров — раскладка, и она наша. */ .filters__select { min-width: 150px; } .muted { color: var(--muted); } /* ── Table ── */ /* Растяжка на остаток колонки работает только внутри .panel--fill. Панели, ещё не переведённые на неё (реестр, рынок, сегменты), держат высоту от окна: без потолка реестр в две тысячи строк распирает страницу, и окно видимых строк остаётся без своего контейнера прокрутки. */ .panel:not(.panel--fill) .table-wrap { max-height: calc(100vh - 240px); min-height: 320px; } .table-wrap { /* Ограничиваем высоту областью экрана: горизонтальная полоса прокрутки всегда под рукой, а не в самом низу длинной таблицы. Шапка таблицы липкая, поэтому заголовки видны всегда. */ overflow: auto; /* Высота — остаток колонки, а не число от окна. Числом она угадывалась неточно и оставляла полосу под таблицей. */ flex: 1 1 auto; min-height: 200px; /* Своей рамки и заливки НЕТ: обёртка лежит внутри белой карточки, и рамка на рамке даёт две обводки одна в другой. У донора таблица в карточке без собственной обводки. */ background: transparent; /* Прокрутка ОСТАНАВЛИВАЕТСЯ НА ЦЕЛОЙ СТРОКЕ. Без этого нижняя строка всегда обрезана краем области. Ячейки выровнены по верху (иначе длинные описания читались бы вразнобой), поэтому у высокой строки низ пустой — и обрезанная строка выглядит не как «строка продолжается ниже», а как посторонняя тёмная полоса поверх данных. Подсвечивается она вместе со строкой, потому что это и есть строка, но понять это по виду нельзя. `mandatory`, а не `proximity`: при `proximity` браузер прилипает, только если ближайшая граница совсем рядом, и на строках высотой 120px он чаще не срабатывал вовсе — обрезанная строка возвращалась. Строки заведомо ниже области прокрутки, поэтому `mandatory` здесь безопасен: заблокировать прокрутку он не может. */ scroll-snap-type: y mandatory; /* Полоса прокрутки — ТОНКАЯ и без своей заливки. Раньше она была 12px с тёмной дорожкой и рамкой у ползунка. У нижнего края окна такая полоса читается не как полоса прокрутки, а как непонятная тёмная строка, наложенная поверх данных: под ней край последней строки таблицы, и вместе они выглядят как одна лишняя полоса. Именно так её и описали. Убрать совсем нельзя: таблица шириной 2900px в окно не помещается, и без полосы не видно, что вправо есть ещё столбцы. Но занимать она должна 8px и не иметь собственного фона. */ scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; overscroll-behavior-x: contain; } .table-wrap::-webkit-scrollbar { height: 8px; width: 8px; } .table-wrap::-webkit-scrollbar-track { background: transparent; } .table-wrap::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; } .table-wrap::-webkit-scrollbar-thumb:hover { background: var(--accent); } table { border-collapse: collapse; width: 100%; } /* Вид таблицы даёт система: .pnc-table, -head-row, -head-row-cell, -body-row, -body-row-cell. Классы проставляются одним проходом dsTable() в app.js — см. комментарий там. ЧТО ОТСЮДА УШЛО И ПОЧЕМУ. Заголовки были капсом 11px со своим межбуквенным интервалом. Ни донор, ни система заголовки таблиц капсом не набирают, и это единственное расхождение, которое показывал замер: система задаёт text-transform: none, наше правило на голом теге его перебивало. Ровно тот же капс нашёлся у первого потребителя, и тоже чтением CSS, а не из отчёта. Осталось своё: липкость шапки (у системы она есть, но у нас над таблицей ещё липнет шапка приложения — нужен свой слой), перенос по словам и выравнивание по верху. Строка таблицы у системы 64px — для таблицы на 19 колонок это слишком, поэтому плотность задаётся ТОКЕНОМ на обёртке, а не правилами компонента. */ .table-wrap { --pnc-table-row-height: var(--pnc-control-h-md); } thead th { position: sticky; top: 0; white-space: nowrap; z-index: var(--pnc-z-sticky-header); } tbody td { vertical-align: top; max-width: 320px; padding-top: 7px; padding-bottom: 7px; } /* Строка прилипает НИЖНИМ краем: область прокрутки заканчивается ровно на границе строк, а не посреди пустого низа высокой строки. Селектор на своих таблицах, а не на классе системы. */ #grid tbody tr, #companies-table tbody tr { scroll-snap-align: end; } tbody tr:hover { background: var(--accent-weak); } tbody tr.is-new { background: var(--new-weak); } tbody tr.is-new:hover { background: var(--new-weak-hover); } /* Редактируемая ячейка кликабельна целиком: пустая тоже принимает клик в любом месте (min-height + display:block, иначе кликабельна только тонкая строка сверху) */ td.editable { cursor: text; min-height: 2.2em; } td.editable:empty::before { content: ""; display: inline-block; min-height: 1.2em; } td.editable:hover { outline: 1px dashed var(--border-strong); } td.editable:focus { outline: 2px solid var(--accent); background: var(--panel); } td.col-company { font-weight: 600; min-width: 130px; } td.col-product { min-width: 180px; font-weight: 500; } td.col-desc { font-size: var(--pnc-font-12); color: var(--muted); } /* Длинный текст: свёрнут до 6 строк с затуханием, разворачивается кнопкой «ещё» */ .desc-wrap { position: relative; } .desc-box { white-space: pre-line; display: block; overflow: hidden; } .desc-box.collapsed { max-height: 7.6em; } .desc-box.collapsed::after { content: ""; position: absolute; left: 0; right: 0; bottom: 1.4em; height: 2.2em; background: linear-gradient(transparent, var(--panel)); pointer-events: none; } tbody tr:hover .desc-box.collapsed::after { background: linear-gradient(transparent, var(--accent-weak)); } tbody tr.is-new .desc-box.collapsed::after { background: linear-gradient(transparent, var(--new-weak)); } .desc-box:focus { outline: none; } .desc-more { display: inline-block; margin-top: 2px; font-size: var(--pnc-font-11); color: var(--accent); background: none; border: none; padding: 0; cursor: pointer; position: relative; z-index: var(--pnc-z-sticky-bg); } .desc-more:hover { text-decoration: underline; } /* ── Контролы в ячейке таблицы ───────────────────────────────────────────── Селект системы рассчитан на форму: он тянется на всю ширину родителя и всегда рисует рамку. В таблице с автораскладкой это дало три колонки «да/нет/н/д» по 196px каждая, а 270 обведённых коробок превратили таблицу в сетку. Поэтому в ячейке он ужат по содержимому и рамку показывает только под курсором и в фокусе — ровно так же вёл себя нативный — нативный до перехода на паттерн select-no-react — и высота многострочного поля: у системы она задаётся строками через props React-компонента, которых у нас нет. */ .field select { width: 100%; min-height: 36px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: var(--pnc-radius-md); background: var(--panel); color: var(--text); font-size: var(--pnc-font-13); } .field textarea { min-height: 84px; resize: vertical; overflow: hidden; } .mode-list { display: flex; flex-direction: column; gap: 6px; } .mode-list label { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; } .mode-list label:hover { border-color: var(--accent); } .mode-list .desc { font-size: var(--pnc-font-11); color: var(--muted); } /* ── Статусы, флаги, история ── */ .col-flags { white-space: nowrap; } .warn { color: var(--new); margin-left: 4px; cursor: help; } tbody tr.is-off td.col-company, tbody tr.is-off td.col-product { text-decoration: line-through; opacity: .7; } select.status-off { color: var(--danger); } .col-verified { color: var(--muted); font-size: var(--pnc-font-11); white-space: nowrap; } .counters .c:last-child b { color: var(--new); } /* Таблица истории — классы системы через dsTable(); своё только выравнивание по верху: строки тут разной высоты. */ .hist-table td { vertical-align: top; } /* ── Теги категорий/подкатегорий ── */ .tags-cell { display: flex; flex-wrap: wrap; gap: 3px; cursor: pointer; min-width: 150px; max-width: 260px; } /* Пустая ячейка-«добавить»: заметный контур вместо блёклого текста */ .cell-add { display: inline-flex; align-items: center; gap: 2px; padding: 2px 9px 2px 6px; border: 1px dashed var(--accent); border-radius: 10px; color: var(--accent); font-size: var(--pnc-font-11); background: var(--accent-weak); white-space: nowrap; } .cell-add .pnc-icon { width: 12px; height: 12px; } .cell-add:hover { background: var(--accent); color: var(--pnc-text-inverse); } .tag-chip b { font-weight: 600; } /* Группа тегов — компактная карточка системы (.pnc-card--s). */ .tag-group-title { font-weight: 600; margin-bottom: 6px; color: var(--accent); } .tag-opt { display: flex; align-items: center; gap: 6px; padding: 2px 0; font-size: var(--pnc-font-13); cursor: pointer; } .chk-row { display: flex; flex-wrap: wrap; gap: 4px 16px; } .chk-row .tag-opt { flex: 0 0 auto; } .aud-chip { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: var(--pnc-font-11); white-space: nowrap; border: 1px solid var(--border-strong); color: var(--muted); } /* ── Сортировка и липкие колонки ── */ thead th.sortable { cursor: pointer; user-select: none; } thead th.sortable:hover { color: var(--accent); } thead th.sortable::after { content: " ⇅"; opacity: .35; font-size: var(--pnc-font-10); } thead th.sort-asc::after { content: " ↑"; opacity: 1; color: var(--accent); } thead th.sort-desc::after { content: " ↓"; opacity: 1; color: var(--accent); } /* Первые колонки (компания/продукт) не уезжают при горизонтальной прокрутке */ td.col-company, th.col-company-h { position: sticky; left: 0; z-index: var(--pnc-z-sticky-bg); background: var(--panel); } tbody tr:hover td.col-company { background: var(--accent-weak); } tbody tr.is-new td.col-company { background: var(--new-weak); } thead th.col-company-h { z-index: var(--pnc-z-sticky-summary); } /* ── Карта конкуренции ── */ .comp-cell { display: flex; flex-wrap: wrap; gap: 3px; cursor: pointer; min-width: 60px; } /* Метка пересечения с нашим продуктом. Вид даёт .pnc-pill--danger/--warn. */ .map-meta .comp-badge { font-size: var(--pnc-font-11); margin-right: 6px; } /* Строка редактора привязок — та же компактная карточка. */ .comp-edit-title { font-weight: 600; margin-bottom: 6px; } .map-card { margin-bottom: 14px; } .map-card h3 { margin: 0 0 4px; } .map-meta { margin-bottom: 10px; } .map-table td { vertical-align: top; } .map-table td:first-child { width: 78px; } /* ── Login ────────────────────────────────────────────────────────────────── Экран собран по рецепту дизайн-системы (patterns/login.md). Поля, кнопка и плашка ошибки — компоненты системы (.pnc-text-field / .pnc-btn / .pnc-disclaimer); раскладка ниже — наша, но целиком на токенах --pnc-*: у входа своя композиция, и система страниц не поставляет. Это первый экран проекта на палитре системы. Здесь НЕТ наших переменных (--panel, --accent и т.п.) — они приедут на шаге токенов, а вход уже живёт на системных ролях. */ /* От экрана входа осталось три правила: где стоит лок-ап и как сложена форма. Центрирование, небо, карточка и заголовки приехали из системы в 0.7.0; было около сорока строк. Лок-ап прижимается к углу СВОИМ правилом, и это не мелочь: .pnc-auth — флекс-СТРОКА, и без этого лок-ап встаёт сбоку от карточки, а не над экраном. Система так и задумала — где ему стоять, решает продукт, — но узнать это можно только собрав. */ .login__brand { position: absolute; top: var(--pnc-space-9); left: var(--pnc-space-9); } .login__form { display: flex; flex-direction: column; gap: var(--pnc-space-5); text-align: left; } .login__hint { font-size: var(--pnc-font-xs); color: var(--pnc-text-secondary); text-align: right; margin: 0; } /* ── Toast ── */ /* ── Карта конкуренции: заголовки, ширины, различие «перенесённое / своё» ── */ .map-table td:nth-child(1) { width: 110px; } .map-table td:nth-child(2) { width: 170px; } .map-table td:nth-child(3) { width: 260px; } .map-table td:nth-child(4) { width: auto; } /* Ячейки с данными из других вкладок — визуально «только чтение» */ /* Нередактируемая ячейка. Заливка ФОНОМ СТРАНИЦЫ (var(--bg)) читалась как дыра в таблице: в тёмной теме это самая тёмная поверхность из трёх, и столбец выглядел вырезанным. Теперь та же роль, но плёнкой — тот же цвет, разбавленный прозрачностью, поэтому новый цвет не заводится. Первое объявление — запасное для браузеров без color-mix. */ .cell-readonly { background: var(--bg); color: var(--muted); cursor: default; } .cell-readonly { background: color-mix(in srgb, var(--bg) 40%, transparent); } tbody tr:hover .cell-readonly { background: color-mix(in srgb, var(--bg) 40%, transparent); } /* ── Роль «только просмотр»: прячем действия изменения ── */ body.role-viewer .rowact button:not([title*="История"]), body.role-viewer #btn-add-competitor, body.role-viewer #btn-add-user, body.role-viewer #btn-add-product-global, body.role-viewer #btn-add-column, body.role-viewer #btn-mark-all, body.role-viewer #btn-search { display: none; } body.role-viewer td.editable, body.role-viewer .desc-box { cursor: default; } /* Таблица пользователей */ #users-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); } #users-table th { position: static; } /* ── Баннер режима «только просмотр» (идёт обновление поиском) ── */ .banner { background: var(--new-weak); color: var(--text); border-bottom: 2px solid var(--new); padding: 8px 18px; font-size: var(--pnc-font-13); position: sticky; top: 0; z-index: var(--pnc-z-page-overlay); } body.readonly-mode .rowact button:not([title*="История"]), body.readonly-mode #btn-add-competitor, body.readonly-mode #btn-add-product-global, body.readonly-mode #btn-add-column, body.readonly-mode #btn-mark-all, body.readonly-mode #btn-search, body.readonly-mode #btn-add-user { display: none; } /* Пустые редактируемые ячейки: подсказка «можно вписать» + вся площадь кликабельна */ .cell-edit { display: block; width: 100%; min-height: 2.4em; cursor: text; white-space: pre-line; } .cell-edit:empty::before { content: "＋ вписать"; color: var(--muted); opacity: .55; font-size: var(--pnc-font-11); } .cell-edit:focus { outline: none; } .cell-edit:focus:empty::before { content: ""; } td:has(> .cell-edit) { padding: 4px 8px; } /* ── Регуляторный блок: статус + номер документа ── */ .regdoc { display: flex; flex-direction: column; gap: 2px; min-width: 92px; } .regdoc-no { font-size: var(--pnc-font-10); color: var(--muted); min-height: 1.3em; cursor: text; } .regdoc-no:empty::before { content: "№…"; opacity: .45; } .regdoc-no:focus { outline: 1px solid var(--accent); } /* ── Сводка конкуренции на вкладке «Компании» (вычисляется, не редактируется) ── */ .rel-line { display: flex; gap: 6px; align-items: baseline; margin-bottom: 3px; } /* Пилюля типа конкуренции: вид даёт .pnc-pill, семейство подставляет relPill() в app.js. Здесь только сжатие под плотную таблицу — кегль берётся ступенью системы, а не литералом. ЧТО ОСТАЛОСЬ ПРОДУКТОВЫМ И ПОЧЕМУ. Три типа из четырёх легли на семейства один в один: прямой → danger, партнёр → success, не конкурент → default. Четвёртый, «непрямой», НЕ ложится: оранжевое семейство status-accent система закрепила за ОЦЕНОЧНЫМ «требует внимания», а здесь оранжевый категориальный — непрямой конкурент не хуже прямого, он другой. Тёплой неоценочной роли в системе нет: все три нейтральных семейства (navy, blue, pink) холодные. Заявка B4, первый случай, ждёт третьего продукта. Раньше все четыре цвета были литералами rgba и в тёмной теме не менялись вовсе. Осталось одно значение, и у него есть тёмная пара. */ .rel-chip { flex: none; font-size: var(--pnc-font-11); padding: 2px 8px; } .rel-indirect { background: var(--cat-warm-bg); border-color: var(--cat-warm-border); color: var(--cat-warm-text); } .rel-names { font-size: var(--pnc-font-11); color: var(--muted); } /* ── Наши продукты: строка признаков для сравнения с конкурентами ── */ .ours-flags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; } .ours-flag { font-size: var(--pnc-font-11); padding: 2px 8px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); } .ours-flag.muted { opacity: .55; } /* Ячейка «Конкуренция»: тип текстом + привязки к нашим продуктам */ .comp-cell { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } .comp-cell .rel-chip { font-weight: 600; } /* ── Рынок ── Раскладка и предметное — как и везде в этом файле; вид приходит классами системы. Своего здесь ровно столько, сколько нужно, чтобы разложить плитки, рычажки и матрицу: компонентов «плитка показателя», «шкала интенсивности» и «числовое поле с единицей» в @panacea/ui нет (заявки E1–E4 в ds-requests.md). */ /* Плитки итога. Не .pnc-card: карточка внутри карточки даёт двойную рамку и двойной отступ, а это ряд значений, а не самостоятельные разделы. */ .market-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; } .mtile { background: var(--bg); border-radius: var(--pnc-radius-lg); padding: 12px 14px; } .mtile--wide { grid-column: 1 / -1; } .mtile__label { color: var(--muted); font-size: var(--pnc-font-12); margin-bottom: 4px; } .mtile__value { font-size: var(--pnc-font-24); font-weight: 600; } .mtile__row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; } /* Рычажки. Числовое поле вместо ползунка: в системе нет, а тройка пресетов закрывает ровно ту потребность, ради которой он был бы нужен. */ .levers { background: var(--bg); border-radius: var(--pnc-radius-lg); padding: 12px 14px; margin-bottom: 16px; } /* Заголовок без нижнего отступа: раскрытие само отодвигает содержимое (.pnc-expandable--open даёт margin-top), а в свёрнутом виде отступ оставлял в блоке пустую полосу. */ .levers__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } /* Колоночная вёрстка, а не сетка: в группах разное число рычажков (от двух до пяти), и в сетке две короткие колонки оставляли под собой пустоту в половину блока. Колонки сами разносят группы так, чтобы низ выходил ровным. */ .levers__grid { columns: 300px 2; column-gap: 24px; } .levers__group { break-inside: avoid; margin-bottom: 14px; } .levers__group:last-child { margin-bottom: 0; } .levers__groupLabel { color: var(--muted); font-size: var(--pnc-font-11); text-transform: uppercase; letter-spacing: var(--pnc-tracking-wide, .5px); margin-bottom: 6px; } .lever { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; max-width: 460px; } .lever:last-child { margin-bottom: 0; } .lever__label { flex: 1; font-size: var(--pnc-font-12); color: var(--text); } .lever__field { width: 96px; flex: none; } /* Знак «цифра не подтверждена». Не пилюля: она забрала бы полстроки в ряду, где важна сама цифра, а не её статус. */ .lever__flag { width: 16px; text-align: center; color: var(--danger); font-size: var(--pnc-font-12); font-weight: 600; cursor: help; } /* Матрица. Первая колонка липкая — иначе при семи сегментах непонятно, чья строка. Цветовой шкалы нет намеренно: роли «интенсивность» в системе нет, а hex в проекте запрещён, поэтому вес показывает полоса заполнения. */ /* Первая колонка не должна съедать треть ширины: названия продуктов длинные, а место нужно сегментам. Переносится по словам. */ .matrix .matrix__rowhead { max-width: 240px; white-space: normal; position: sticky; left: 0; z-index: var(--pnc-z-sticky-bg); background: var(--panel); min-width: 190px; } .matrix__cell { cursor: pointer; min-width: 120px; vertical-align: top; } /* Без правки в клетке 120 пикселей не нужны: там остаётся число и полоса. Ширина столбца — главный расход места на шестнадцати сегментах. */ .matrix--compact .matrix__cell { min-width: 76px; } .matrix--bare .matrix__cell { min-width: 56px; } .matrix__cell:hover { background: var(--pnc-table-row-hover); } .matrix__cell--empty { cursor: pointer; } .matrix__cell--total { background: var(--bg); font-weight: 600; } .matrix__value { font-size: var(--pnc-font-16); font-weight: 600; } .matrix__bar { height: 6px; margin: 4px 0; } .matrix__tags { display: flex; flex-wrap: wrap; gap: 3px; } .matrix__total .matrix__rowhead { background: var(--bg); font-weight: 600; } /* Числовые колонки справочника сегментов. */ .num { text-align: right; font-variant-numeric: tabular-nums; } /* ── Одностраничник рынка (/market/report) ── Печатная страница: одна колонка A4, всё на токенах системы. Тёмной темы нет намеренно — data-theme="light" на корне, страница живёт ради печати. */ .report { background: var(--bg); } .report__page { max-width: 1000px; margin: 0 auto; padding: 28px 32px; background: var(--panel); min-height: 100vh; } .report__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; } .report__sub { color: var(--muted); font-size: var(--pnc-font-12); margin-top: 6px; } .report__brand { flex: none; } .report__funnel { display: flex; align-items: stretch; gap: 10px; margin: 18px 0; } .report__stage { flex: 1; border: 1px solid var(--border); border-radius: var(--pnc-radius-lg); padding: 14px 16px; } .report__stage--som { border-color: var(--accent); background: var(--accent-weak); } .report__stageArrow { align-self: center; color: var(--muted); font-size: var(--pnc-font-20); } .report__stageLabel { color: var(--muted); font-size: var(--pnc-font-11); text-transform: uppercase; letter-spacing: var(--pnc-tracking-wide, .5px); } .report__stageValue { font-size: var(--pnc-font-24); font-weight: 600; margin: 6px 0 4px; } .report__stageNote { color: var(--muted); font-size: var(--pnc-font-12); } .report__callout { border-left: 3px solid var(--accent); padding: 8px 14px; margin: 14px 0; font-size: var(--pnc-font-13); } .report__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .report__h { margin: 18px 0 8px; } .report__table { width: 100%; border-collapse: collapse; font-size: var(--pnc-font-12); } .report__table th { text-align: left; color: var(--muted); font-weight: 500; border-bottom: 1px solid var(--border); padding: 4px 8px 4px 0; } .report__table td { border-bottom: 1px solid var(--border); padding: 5px 8px 5px 0; vertical-align: top; } .report__table .num, .report__table th.num { text-align: right; font-variant-numeric: tabular-nums; } .report__tag { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: var(--pnc-radius-full); border: 1px solid var(--border); color: var(--muted); font-size: var(--pnc-font-10); vertical-align: middle; } .report__tag--ok { border-color: var(--green); color: var(--green); } .report__fact { color: var(--muted); } .report__params { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--pnc-font-12); } /* Неподтверждённое допущение подчёркивается точками — в печати это видно, в отличие от цвета, который принтер может съесть. */ .report__param--low { text-decoration: underline dotted; text-underline-offset: 3px; } .report__note { color: var(--muted); font-size: var(--pnc-font-12); margin-top: 8px; } .report__foot { margin-top: 22px; padding-top: 10px; border-top: 1px solid var(--border); color: var(--muted); font-size: var(--pnc-font-11); } @media print { .report__page { max-width: none; padding: 0; min-height: 0; } .report__stage, .report__table td, .report__table th { break-inside: avoid; } } /* Факт перед прогнозом на одностраничнике: разговор начинается с того, что уже есть. Акцентная рамка — та же, что у SOM, чтобы читалось как «две опоры». */ .report__fact { display: flex; gap: 10px; margin: 16px 0 4px; } .report__fact > div { flex: 1; border: 1px solid var(--accent); border-radius: var(--pnc-radius-lg); background: var(--accent-weak); padding: 12px 16px; } .report__factLabel { color: var(--muted); font-size: var(--pnc-font-11); text-transform: uppercase; letter-spacing: var(--pnc-tracking-wide, .5px); } .report__factValue { font-size: var(--pnc-font-20); font-weight: 600; margin: 4px 0; } /* Интерес правится прямо в клетке матрицы: селект узкий, чтобы не растягивал колонку — контрол системы иначе тянется на всю ширину родителя. */ /* Интерес в клетке. Подпись начинается там же, где число: у контрола системы свой левый отступ, и без этого столбик значений выглядел рваным. */ .matrix__fit { --pnc-component-min-width: 104px; max-width: 132px; } .matrix__fit .pnc-select__trigger { padding-left: 0; } /* Уровень интереса — полосой слева у клетки. Цвет читается строем, не заставляя вчитываться в подпись в каждой из полусотни клеток. */ .matrix__cell--fit-high { box-shadow: inset 3px 0 0 var(--green); } .matrix__cell--fit-medium { box-shadow: inset 3px 0 0 var(--accent); } .matrix__cell--fit-low { box-shadow: inset 3px 0 0 var(--yellow); } .levers__toggle { padding: 0; } /* ── Рынок: панель управления, саммари, фильтры матрицы ── Панель липкая: при прокрутке длинной матрицы «SOM это или TAM, организации или рубли» должно оставаться перед глазами, иначе числа теряют единицы. */ /* Панель управления липнет под шапкой. Она отдельная карточка, а не блок внутри основной: у .pnc-card системы overflow: hidden, и sticky внутри не работает. */ /* top: 0, а НЕ высота шапки. `position: sticky` отсчитывается от ближайшего предка с прокруткой, а это .panel.active (у неё overflow-y: auto) — прокручивается не страница, а сама вкладка. Верх этого контейнера уже находится под шапкой, поэтому прибавлять её высоту второй раз нельзя: карточка съезжала вниз на 98px внутри своего слота и наезжала на саммари TAM/SAM/SOM, пряча его под собой. */ .market__controlsCard { position: sticky; top: 0; z-index: var(--pnc-z-sticky-header); margin-bottom: 10px; } .market__year { display: flex; align-items: center; gap: 6px; } .market__yearField { width: 84px; } /* Саммари: факт → TAM → SAM → SOM одной строкой. */ .market-summary { display: flex; align-items: stretch; gap: 8px; margin: 14px 0 10px; flex-wrap: wrap; } .mstage { flex: 1 1 180px; border: 1px solid var(--border); border-radius: var(--pnc-radius-lg); padding: 10px 14px; } .mstage--fact { border-color: var(--green); } .mstage--som { border-color: var(--accent); background: var(--accent-weak); } .mstage__label { color: var(--muted); font-size: var(--pnc-font-11); text-transform: uppercase; letter-spacing: var(--pnc-tracking-wide, .5px); } .mstage__value { font-size: var(--pnc-font-20); font-weight: 600; margin: 4px 0 2px; } .mstage__note { color: var(--muted); font-size: var(--pnc-font-12); } .mstage__arrow { align-self: center; color: var(--muted); flex: none; } .mnotes__pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; } .mnotes__text { font-size: var(--pnc-font-12); margin-bottom: 4px; } /* Фильтры матрицы — выпадающие списки с галочками. Чипами шестнадцать сегментов занимали три строки над таблицей и сами становились шумом. */ .matrix-filters { margin: 12px 0 8px; } .mfilter { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .mfilter__label { color: var(--muted); font-size: var(--pnc-font-11); flex: none; text-transform: uppercase; letter-spacing: var(--pnc-tracking-wide, .5px); } /* Список висит на body: обе карточки экрана с overflow: hidden обрезали бы его. */ .mfilter__menu { position: fixed; } .mfilter__all { justify-content: center; color: var(--accent); } /* Скрытая кнопка сброса: у .pnc-text-button свой display, и одного атрибута hidden ему мало. */ .mfilter [hidden] { display: none; } /* Пояснение по наведению. Оболочка наша — у .pnc-tooltip системы нет position, в React её ставит портал; сама карточка внутри системная, без правок. */ .hint-mark { display: inline-block; vertical-align: -2px; margin-left: 4px; color: var(--muted); cursor: help; } .hint-mark:hover, .hint-mark:focus-visible { color: var(--accent); } .hint-pop { position: fixed; z-index: var(--pnc-z-portal); } /* Правка чисел прямо в клетке. */ .matrix__inline { display: flex; flex-wrap: wrap; gap: 2px 8px; margin-top: 4px; } .matrix__field { display: inline-flex; align-items: baseline; gap: 2px; font-size: var(--pnc-font-11); } .matrix__fieldLabel { color: var(--muted); } .matrix__fieldValue { min-width: 22px; border-bottom: 1px dashed var(--border-strong); color: var(--text); } .matrix__fieldValue:focus { outline: none; border-bottom-color: var(--accent); } /* Ряд множественных фильтров реестра. */ .orgfilters { display: inline-flex; gap: 6px; flex-wrap: wrap; } /* Сортировка по заголовку. Заголовок остаётся заголовком: кнопка внутри без своей рамки и фона, видно её только по стрелке и подчёркиванию. */ .th--sortable { padding: 0 !important; } .th__sort { display: flex; align-items: center; gap: 4px; width: 100%; padding: 6px 8px; border: none; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; } .th__sort:hover { color: var(--accent); } .th__arrow { color: var(--accent); } /* Раскладка таблицы реестра — фиксированная. При автоматической браузер меряет содержимое ВСЕХ строк заново на каждую правку ячейки: на тысяче строк это 85 мс на нажатие клавиши, и набор текста превращался в череду подвисаний. Ширины приходят colgroup из описания колонок. */ #orgs-table { table-layout: fixed; } #orgs-table td, #orgs-table th { overflow: hidden; text-overflow: ellipsis; } /* Строки одинаковой высоты: на них держится расчёт распорок при отрисовке только видимого окна. Перенос включается лишь у ячейки, которую правят. */ #orgs-table td { white-space: nowrap; } /* Строки одной высоты — на этом стоит расчёт распорок при отрисовке окна. Заметки из выгрузки многострочные, и без фиксированной высоты строка вырастала до пятисот пикселей. Три строки видно, остальное — по наведению. */ #orgs-table tbody tr:not(.orgs-spacer) { height: 54px; } .orgs-note .cell-edit { white-space: pre-line; /* переносы из выгрузки видны */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; /* Межстрочный и потолок заданы числом, а не «сколько получится»: три строки обязаны уместиться в строку таблицы, иначе высоты снова разъедутся. */ line-height: 15px; max-height: 45px; } /* Пока в ячейке правят — показываем целиком, иначе не увидеть, что стираешь. */ .orgs-note .cell-edit:focus { display: block; overflow: auto; max-height: 46px; } /* Прикидка в ячейке: число приглушено и подписано. Пустая колонка «Врачей» ни о чём не говорила — врачей выяснили у 111 организаций из 2290. */ .cell-est { color: var(--muted); } .cell-est .cell-edit { display: inline; } .cell-est__mark { margin-left: 5px; font-size: var(--pnc-font-11); color: var(--muted); opacity: .75; } #orgs-table td.editable:focus-within, #orgs-table .cell-edit:focus { white-space: normal; overflow-wrap: anywhere; } .orgs-spacer td { padding: 0 !important; border: none !important; } /* В режиме карточки с экрана уходит всё, что относится к списку целиком: сводные плитки — вход в список, а не в запись, и высоту рабочей области они отнимают зря. Возвращаются при закрытии карточки. */ .panel--record #orgs-summary-card { display: none; } /* Освободившуюся высоту забирают оба столбца, а не только карточка: запас в базовом правиле рассчитан на плитки, которых в этом режиме нет. */ .panel--record .split__list .table-wrap { max-height: calc(100vh - 200px); } /* ── Список и карточка: общий приём проекта (docs/UI_PATTERNS.md) ── Два столбца одного экрана, а не всплывающий слой. Список слева остаётся видимым и рабочим — в нём выбирают следующую запись, не закрывая текущую. Разделитель между столбцами несёт круглую кнопку: она сворачивает список, когда работают с одной записью и нужна вся ширина. */ .split { display: flex; align-items: stretch; gap: 0; min-height: 0; } .split__list { flex: 1 1 auto; min-width: 0; } .split__detail { flex: 0 0 46%; min-width: 0; margin-left: 12px; max-height: calc(100vh - var(--appbar-h, 0px) - 32px); overflow: auto; } .split--open .split__list { flex: 1 1 54%; } /* Свёрнутый список не прячется совсем: остаётся полоса с кнопкой, иначе непонятно, куда он делся и чем его вернуть. */ .split--collapsed .split__list { display: none; } .split--collapsed .split__detail { flex: 1 1 auto; } .split__divider { position: relative; flex: 0 0 1px; margin: 0 0 0 12px; background: var(--border); } .split__toggle { position: absolute; top: 50%; left: 50%; z-index: var(--pnc-z-sticky-bg); transform: translate(-50%, -50%); width: 22px; height: 22px; padding: 0; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 999px; background: var(--pnc-bg-raised); color: var(--muted); font-size: var(--pnc-font-12); line-height: 1; cursor: pointer; } .split__toggle:hover { color: var(--accent); border-color: var(--accent); } /* Шапка карточки: имя с меткой слева, шаг по списку и закрытие справа. */ .orgcard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--border); } .orgcard__name { min-width: 0; font-size: var(--pnc-font-16); } .orgcard__meta { margin-left: 8px; color: var(--muted); font-size: var(--pnc-font-12); } .orgcard__nav { display: flex; align-items: center; gap: 4px; flex: none; } /* Счётчик между стрелками отвечает на «где я сейчас»: без него шаг вслепую. */ .orgpanel__pos { color: var(--muted); font-size: var(--pnc-font-11); white-space: nowrap; } .orgpanel__prev .pnc-icon { transform: rotate(90deg); } .orgpanel__next .pnc-icon { transform: rotate(-90deg); } .orgcard__nav .pnc-btn:disabled { opacity: .35; } .orgcard__pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; } .orgcard__block { margin-bottom: 16px; } .orgcard__title { margin: 0 0 8px; font-size: var(--pnc-font-11); font-weight: 600; text-transform: uppercase; letter-spacing: var(--pnc-tracking-wide, .5px); color: var(--muted); } /* Поля в ряд по несколько — узкие рядом, широкие через всю строку. */ .orgcard__grid { display: grid; align-items: end; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 12px; align-items: start; } .orgcard__field { min-width: 0; } .orgcard__label { display: block; margin-bottom: 4px; color: var(--muted); font-size: var(--pnc-font-11); text-transform: uppercase; letter-spacing: var(--pnc-tracking-wide, .5px); } .orgcard__field .pnc-text-field, .orgcard__field .pnc-select { width: 100%; max-width: none; min-width: 0; } .orgcard__field--wide { grid-column: 1 / -1; } .orgcard__hint { margin-top: 3px; color: var(--muted); font-size: var(--pnc-font-11); grid-column: 1 / -1; } /* Факт — то, что пришло из источника и здесь не правится. */ /* Значение, которое не правится: тот же ряд, что у поля, но без рамки ввода. */ .orgcard__shown { min-height: 22px; color: var(--text); overflow-wrap: anywhere; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } /* Прикидка — не факт: приглушённое значение и пилюля с честностью оценки. Отдельный вид нужен затем, чтобы через неделю было видно, где выясненное, а где выведенное из бенчмарков. */ .orgcard__field--guess .orgcard__shown { color: var(--muted); } /* Метка профиля с крестиком. Крестик — часть пилюли, а не кнопка рядом: рядом он отрывался на вторую строку при переносе. */ .orgcard__tag { display: inline-flex; align-items: center; gap: 4px; } .orgcard__tag-x { border: none; background: none; padding: 0; cursor: pointer; color: inherit; font-size: var(--pnc-font-13); line-height: 1; } .orgcard__tag-x:hover { color: var(--danger); } /* Раздел продукта: не ещё одна группа полей об организации, а отдельный разговор, и таких подряд несколько. Рамка отделяет их друг от друга. */ .orgcard__product { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 12px 4px; } .orgcard__product--live { border-color: var(--green); } /* Неприменимо: разговора по продукту нет, раздел приглушён. Не спрятан — спрятанный читался бы как «забыли», а это осознанное решение человека. */ .orgcard__product--na { opacity: .62; } .orgcard__product-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; } .orgcard__product-head .orgcard__title { margin: 0; } /* Этап — селектом в заголовке раздела: одно место и на показ, и на правку. */ .orgcard__product-stage { display: flex; align-items: center; gap: 4px; margin-left: auto; } .orgcard__product-stage .pnc-select { min-width: 150px; } /* Примечание из CRM — фраза, а не значение: абзацем под полями. */ .orgcard__product-note { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--border); font-size: var(--pnc-font-12); } /* Значение, которое пока прикинуто, а не выяснено. */ .is-guess { color: var(--muted); font-style: italic; } /* Пометка «оценка» у подписи поля: мельче самой подписи, иначе перекрикивает её. */ .orgcard__label .pnc-pill { margin-left: 6px; padding: 0 5px; font-size: 9px; line-height: 14px; height: 14px; text-transform: none; letter-spacing: 0; vertical-align: 1px; } /* Юрлица одной строкой: основное, следом остальные. */ .orgcard__entities { display: block; } .orgcard__entities .muted { display: block; margin-top: 2px; font-size: var(--pnc-font-11); } /* Выручка по годам — узкие колонки: год и сумма коротки, источник терпит перенос. */ .orgcard__table td:first-child, .orgcard__table th:first-child { width: 70px; } .orgcard__table td:nth-child(2), .orgcard__table th:nth-child(2) { width: 90px; } .orgcard__table td:last-child, .orgcard__table th:last-child { width: 40px; } /* Пояснение ко всему блоку — под заголовком, до полей. */ .orgcard__note { margin: -4px 0 8px; color: var(--muted); font-size: var(--pnc-font-11); } .orgcard__tags { display: flex; flex-wrap: wrap; gap: 4px; } .orgcard__link { color: var(--accent); } .orgcard__site { text-decoration: none; } /* Подтаблица повторяющихся строк — как «Пункты» в образце. */ .orgcard__table { width: 100%; font-size: var(--pnc-font-12); /* Три строки выручки занимали по 64 пикселя — высоту строки большой таблицы. Плотность в карточке своя: здесь читают три числа, а не список. Меняем РУЧКУ САМОЙ СИСТЕМЫ, а не давим её своим padding. */ --pnc-table-row-height: 30px; } /* Название — то, по чему открывают карточку. Клик по строке делает то же, но название должно выглядеть нажимаемым, иначе о нём не догадаться. */ .orgs-name__link { color: var(--accent); cursor: pointer; } .orgs-name__link:hover { text-decoration: underline; } #orgs-body tr { cursor: pointer; } #orgs-body tr .cell-edit { cursor: text; } #orgs-body tr .cell-pick { cursor: pointer; } /* Открытая строка подсвечена: иначе, промотав список, не найти, чья карточка. */ .row--open > td { background: var(--accent-weak); } /* Плитки над реестром. Не украшение, а вход в работу: каждая — фильтр, и по ним видно, чего в реестре не хватает, а не только сколько его. */ .regsummary { display: flex; gap: 8px; flex-wrap: wrap; } .regtile { flex: 1 1 150px; text-align: left; cursor: pointer; font: inherit; border: 1px solid var(--border); border-radius: var(--pnc-radius-lg); background: transparent; color: var(--text); padding: 10px 14px; } .regtile:hover { border-color: var(--border-strong); } .regtile--on { border-color: var(--accent); background: var(--accent-weak); } .regtile--ok { border-left: 3px solid var(--green); } .regtile--warn { border-left: 3px solid var(--yellow); } .regtile__label { color: var(--muted); font-size: var(--pnc-font-11); text-transform: uppercase; letter-spacing: var(--pnc-tracking-wide, .5px); } .regtile__value { font-size: var(--pnc-font-20); font-weight: 600; margin: 4px 0 2px; } .regtile__note { color: var(--muted); font-size: var(--pnc-font-12); } /* Ячейка-выбор до первого нажатия — просто подпись. Селект рождается по клику: надстройка системы оборачивает каждый в четыре узла и вешает наблюдателя, а на двух с половиной тысячах строк их выходило девять тысяч. */ .cell-pick { cursor: pointer; } .cell-pick:hover { color: var(--accent); } /* Полоса группы в списке сегментов: тот же порядок, что у столбцов матрицы. */ .segband td { background: var(--bg); color: var(--muted); font-size: var(--pnc-font-11); text-transform: uppercase; letter-spacing: var(--pnc-tracking-wide, .5px); padding: 6px 8px; } /* Полосы групп в шапке матрицы. Клик по полосе сворачивает группу в один столбец с итогом: шестнадцать одинаковых столбцов не помещаются на экран и не дают увидеть, что частные сети и госзакупки — разные разговоры. */ .matrix__group { border-bottom: 2px solid var(--accent); padding: 0 !important; } .matrix__group--closed { border-bottom-color: var(--border-strong); } .matrix__groupBtn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 4px 8px; border: none; background: transparent; color: inherit; font: inherit; cursor: pointer; white-space: nowrap; } .matrix__groupBtn:hover { color: var(--accent); } .matrix__groupCount { color: var(--muted); font-size: var(--pnc-font-11); } /* Пометки клетки — одна строка вместо пяти пилюль: пилюли переносились на три ряда и делали клетку выше самой таблицы. */ .matrix__marks { display: flex; flex-wrap: wrap; gap: 2px 8px; margin-top: 3px; font-size: var(--pnc-font-11); color: var(--muted); } .matrix__mark--ok { color: var(--green); } .matrix__mark--warn { color: var(--yellow); } .matrix__mark--danger { color: var(--danger); } /* Низкое доверие — пунктир под числом, а не пилюля: сейчас оно у каждой клетки, и пилюля на каждой перестаёт что-либо значить. */ .matrix__value--soft { border-bottom: 1px dotted var(--muted); display: inline-block; cursor: help; } .mfilter__select--icon { width: auto; min-width: 0; max-width: none; } /* Значок живёт внутри подписи: у .pnc-select__trigger сетка в две колонки, и третий ребёнок уезжал на вторую строку — кнопка становилась двухэтажной. */ .mfilter__select--icon .pnc-select__value { display: flex; align-items: center; gap: 6px; } .mfilter__caption { white-space: nowrap; } .mfilter__icon { flex: none; color: var(--muted); } #tab-market .table-wrap { max-height: calc(100vh - 420px); min-height: 380px; } /* ── Наши продукты: список и паспорт (ours.js) ────────────────────────────── */ .ours-list__hint { margin: 0; } .ours-list__name { display: block; } .ours-list__tagline { color: var(--muted); font-size: var(--pnc-font-12); } #ours-table tbody tr { cursor: pointer; } .panel--record .ours-list__hint { display: none; } .passport__toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 12px 0 4px; } .passport__count { color: var(--muted); font-size: var(--pnc-font-12); } /* Заголовок группы «Возможности · тип»: где кончается общее и начинается своё */ .passport__group { margin: 20px 0 0; color: var(--muted); font-size: var(--pnc-font-11); text-transform: uppercase; letter-spacing: .05em; } .passport__section { margin-top: 12px; } .passport__title { display: flex; align-items: baseline; gap: 8px; margin: 0 0 4px; font-size: var(--pnc-font-14); } .passport__title-count { color: var(--muted); font-size: var(--pnc-font-11); font-weight: 400; } /* Строка параметра: вопрос · статус · ответ. Статус отдельной колонкой — по нему глаз пробегает раздел сверху вниз, не читая ответы. */ .passport__row { display: grid; grid-template-columns: minmax(140px, 28%) 96px 1fr; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border); } .passport__name { font-weight: 600; min-width: 0; } .passport__status { min-width: 0; } .passport__value { min-width: 0; overflow-wrap: anywhere; } .passport__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; color: var(--muted); font-size: var(--pnc-font-11); } .passport__placeholder { color: var(--muted); font-style: italic; } .passport__caveat { margin-top: 4px; color: var(--muted); font-size: var(--pnc-font-12); } .passport__note { margin-top: 6px; font-size: var(--pnc-font-12); } .passport__row--empty .passport__name { color: var(--muted); font-weight: 400; } @media (max-width: 900px) { .passport__row { grid-template-columns: 1fr auto; } .passport__value { grid-column: 1 / -1; } }