/* Извлечено из brief/style.html — НЕ ПРАВИТЬ РУКАМИ.
Правка вносится в каркас и приезжает сюда сборкой (правило 19). */
/* ============================================================
ТОКЕНЫ
Выведены из: FORM.md (тёмная приборная панель, цвет несёт смысл)
и REFERENCES.md (Nomic Atlas — данные светятся на тёмном;
PostHog — поверхности разной глубины; Linear — один акцент,
иерархия весом шрифта, не обрамлением).
============================================================ */
:root{
/* Поверхности: четыре глубины, а не одна чёрная дыра (PostHog) */
--bg: #0A0C0F;
--surface: #101318;
--raised: #171B22;
--overlay: #1E232C;
--line: #242A34;
--line-soft: #1A1F27;
/* Текст: три уровня, дальше не дробим */
--text: #E7EBF2;
--text-dim: #98A2B2;
--text-mute: #626D7D;
/* Единственный акцент — состояние и действие, больше ничего (Linear) */
--accent: #5B9DFF;
--accent-dim: #2B4780;
--accent-bg: #14203A;
/* Смысловые цвета. Только точками, чипами и обводкой —
никогда заливкой больших площадей. */
--src-llm: #57E0C0; /* источник: про ЛЛМ */
--src-prof: #A78BFA; /* источник: проф. сообщество */
--src-company: #F0A85C; /* источник: компания */
--src-industry: #7C90A8; /* источник: индустрия */
/* Виды высказывания светлее и мягче типов источника и акцента: две шкалы
обязаны различаться на точке 7px и полоске 4px (UD-012). */
--say-news: #9CC4FF; /* высказывание: новость */
--say-case: #93E3AC; /* высказывание: кейс */
--say-opinion: #FFCE85; /* высказывание: мнение */
--ok: #6FD08C;
--warn: #E8A33D;
--bad: #F26B6B;
/* Ритм: шаг 4px. Строки плотные — 34px (Linear: 36px). */
--s0:2px; /* «слипшаяся группа»: только сегментированные ряды (UD-П1, гейт №0) */
--s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
--row:34px;
--graph-h:340px; /* граф-иллюстрация внутри документа */
--pane-h:620px; /* тело экрана: список или карта под шапкой (UD-011) */
--graph-tall:620px; /* граф как основной объект экрана (Obsidian/Graphistry) */
--r:6px; /* радиус: маленький, инструмент а не карточка */
--r-sm:4px;
--font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
--mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
}
/* ============================================================
ТИПОШКАЛА — шесть ступеней, дальше не дробим.
Иерархия держится на ВЕСЕ и ЦВЕТЕ, а не на размере.
============================================================ */
.t-display{ font-size:24px; line-height:30px; font-weight:600; letter-spacing:-.02em; }
.t-title { font-size:18px; line-height:24px; font-weight:600; letter-spacing:-.01em; }
.t-body { font-size:14px; line-height:21px; font-weight:400; }
.t-ui { font-size:13px; line-height:18px; font-weight:450; }
.t-meta { font-size:12px; line-height:16px; font-weight:450; color:var(--text-dim); }
.t-micro { font-size:11px; line-height:14px; font-weight:500; letter-spacing:.03em;
text-transform:uppercase; color:var(--text-mute); }
.num { font-family:var(--mono); font-size:12px; font-variant-numeric:tabular-nums; }
*{box-sizing:border-box}
body{
margin:0; background:var(--bg); color:var(--text);
font-family:var(--font); font-size:14px; line-height:21px;
-webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}
/* каркас страницы-документа */
.doc{max-width:1180px; margin:0 auto; padding:var(--s6) var(--s5) 96px}
.sec{margin:56px 0 0}
.sec > h2{
font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
color:var(--text-mute); margin:0 0 var(--s4);
padding-bottom:var(--s2); border-bottom:1px solid var(--line-soft);
}
.note{color:var(--text-dim); font-size:13px; line-height:20px; max-width:76ch; margin:0 0 var(--s4)}
/* ============================================================
КОМПОНЕНТЫ
============================================================ */
.btn{
height:28px; padding:0 var(--s3); border-radius:var(--r-sm);
background:var(--raised); color:var(--text); border:1px solid var(--line);
font:450 13px/1 var(--font); display:inline-flex; align-items:center; gap:6px; cursor:pointer;
}
.btn:not(:disabled):hover{background:var(--overlay); border-color:#2E3542}
/* Кнопка-переключатель обязана показывать, включена она или нет: иначе надпись
«Завести источник» одинакова и когда форма открыта, и когда закрыта, а
надпись обязана быть либо состоянием, либо действием (правило 35). */
.btn[data-on]{background:var(--accent-bg); border-color:var(--accent); color:#BAD5FF}
.btn-primary{background:var(--accent-bg); border-color:#28457A; color:#BAD5FF}
.btn-ghost{background:transparent; border-color:transparent; color:var(--text-dim)}
.btn-ghost:hover{background:var(--raised); color:var(--text)}
.field{
height:28px; width:260px; padding:0 var(--s3); border-radius:var(--r-sm);
background:var(--surface); border:1px solid var(--line); color:var(--text);
font:400 13px/1 var(--font);
}
.field::placeholder{color:var(--text-mute)}
.field:focus{outline:none; border-color:#33507F; background:var(--raised)}
/* Чип-фильтр: выключенный почти невидим, включённый светится */
.chip{
height:24px; padding:0 10px; border-radius:12px; display:inline-flex; align-items:center; gap:6px;
background:transparent; border:1px solid var(--line); color:var(--text-dim);
font:500 12px/1 var(--font); cursor:pointer;
}
.chip:hover{border-color:#2E3542; color:var(--text)}
.chip[data-on]{background:var(--accent-bg); border-color:#2C4980; color:#C3DAFF}
.dot{width:7px; height:7px; border-radius:50%; flex:none}
/* Бейдж типа — цвет только на точке и тексте, фон почти прозрачный */
.badge{
display:inline-flex; align-items:center; gap:6px; height:20px; padding:0 8px 0 6px;
border-radius:var(--r-sm); font:500 11px/1 var(--font);
background:#ffffff08; border:1px solid var(--line-soft);
}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:var(--s4)}
/* Плитка меры: крупное число + чем оно измерено. Ряд плиток — .kpis. */
.kpis{display:flex; gap:var(--s3); flex-wrap:wrap}
.kpi{flex:1; min-width:180px; background:var(--surface); border:1px solid var(--line);
border-radius:var(--r); padding:var(--s3) var(--s4);
display:flex; flex-direction:column; gap:var(--s1)}
.kpi b{font:600 24px/30px var(--font); letter-spacing:-.02em}
/* Столбики-мера: высота пропорциональна значению, ноль остаётся нулём —
минимальная высота «чтобы было видно» превращает 0 и 3 в одно и то же. */
.bars{display:flex; align-items:flex-end; gap:var(--s0); height:132px}
.bars > div{flex:1; display:flex; flex-direction:column; justify-content:flex-end;
align-items:center; gap:var(--s1); min-width:0}
.bars i{display:block; width:100%; background:var(--text-mute); border-radius:2px 2px 0 0}
.bars i[data-empty]{background:repeating-linear-gradient(45deg,#ffffff10 0 3px,transparent 3px 6px);
height:6px; border-bottom:1px dashed var(--line)}
.bars b{font:500 10px/12px var(--mono); color:var(--text-dim)}
.bars em{font:500 10px/12px var(--mono); color:var(--text-mute); font-style:normal}
/* Аватар — единственная «фотография» в интерфейсе */
.av{width:22px; height:22px; border-radius:50%; flex:none; object-fit:cover;
background:linear-gradient(135deg,#2A3140,#1A1F27); border:1px solid #ffffff14;
display:inline-flex; align-items:center; justify-content:center;
font:600 10px/1 var(--font); color:var(--text-dim)}
.av-lg{width:40px; height:40px; font-size:14px}
/* Таблица: строки 34px, нет вертикальных линий, разделитель почти невидим */
table.grid{width:100%; border-collapse:collapse}
.grid th{
text-align:left; font:600 11px/1 var(--font); letter-spacing:.06em; text-transform:uppercase;
color:var(--text-mute); padding:0 var(--s3) var(--s2); border-bottom:1px solid var(--line);
white-space:nowrap;
}
.grid td{height:var(--row); padding:0 var(--s3); border-bottom:1px solid var(--line-soft); vertical-align:middle}
.grid tr:hover td{background:#ffffff05}
.grid th.r{text-align:right}
.grid td.r{text-align:right; font-family:var(--mono); font-size:12px; font-variant-numeric:tabular-nums; color:var(--text-dim)}
.cellname{display:flex; align-items:center; gap:var(--s2); min-width:0}
.cellname b{font-weight:550; font-size:13px}
.at{font-family:var(--mono); font-size:11px; color:var(--text-mute)}
.trunc{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* Полоска-мера: доля высказываний по типу, без легенды и подписей */
.bar{display:flex; height:4px; width:72px; border-radius:2px; overflow:hidden; background:#ffffff0d}
.bar i{display:block; height:100%}
/* Экран целиком */
.screen{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--surface)}
.screen-top{
display:flex; align-items:center; gap:var(--s3); height:44px; padding:0 var(--s4);
background:var(--raised); border-bottom:1px solid var(--line);
}
.tabs{display:flex; gap:var(--s0); margin-left:auto}
.tab{height:26px; padding:0 10px; border-radius:var(--r-sm); display:inline-flex; align-items:center;
font:500 12px/1 var(--font); color:var(--text-dim); cursor:pointer;
background:transparent; border:0}
.tab:hover{color:var(--text)}
.tab[data-on]{background:var(--overlay); color:var(--text)}
.filters{display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap;
padding:var(--s3) var(--s4); border-bottom:1px solid var(--line-soft); background:var(--surface)}
.split{display:grid; grid-template-columns:1fr 340px}
/* Тело экрана: прокручивается, шапка таблицы липнет, внизу — охват (UD-011) */
.pane{display:flex; flex-direction:column; min-width:0}
.pane-body{overflow:auto; height:var(--pane-h)}
.pane-body .grid thead th{position:sticky; top:0; background:var(--surface); z-index:1}
.pane-foot{padding:var(--s2) var(--s4); border-top:1px solid var(--line-soft);
background:var(--surface); font-size:12px; line-height:16px; color:var(--text-dim)}
.split > .right{border-left:1px solid var(--line); background:var(--bg)}
.pad{padding:var(--s4)}
/* Граф: узлы светятся на тёмном (Atlas), цвет узла = тип */
.graph{position:relative; height:var(--graph-h); background:
radial-gradient(900px 340px at 38% 45%, #121824 0%, var(--bg) 70%);}
.graph svg{display:block; width:100%; height:100%}
/* Легенда — полоса под графом, в потоке. Оверлеем она закрывала собой те самые
узлы, которые объясняет; подписывается КАЖДЫЙ код, а не только цвет (UD-011). */
.mapfoot{display:flex; align-items:center; flex-wrap:wrap; gap:var(--s1) var(--s3);
padding:var(--s2) var(--s4); border-top:1px solid var(--line-soft);
background:var(--surface)}
.mapfoot span{display:inline-flex; align-items:center; gap:6px; height:20px;
font:500 11px/1 var(--font); color:var(--text-dim); white-space:nowrap}
.sw{display:flex; gap:var(--s3); flex-wrap:wrap}
.sw figure{margin:0; width:104px}
.sw .box{height:44px; border-radius:var(--r-sm); border:1px solid #ffffff12}
.sw figcaption{margin-top:6px; font:500 11px/14px var(--mono); color:var(--text-mute)}
ul.tight{margin:0; padding-left:18px; color:var(--text-dim); font-size:13px; line-height:22px}
ul.tight b{color:var(--text); font-weight:550}
/* ============================================================
ЭКРАН ПРОДУКТА — добавлено вердиктом владельца на гейте №4 (UD-015).
До этого каркас был документом-галереей: `.doc` шириной 1180, экраны
короткие и не прокручиваются. Панель занимает окно целиком, и семь её
компонентов жили локально — то есть следующий экран копировал бы их
из панели, а не отсюда. Это и есть «вторая правда», ради запрета
которой написано правило 19.
============================================================ */
/* Рама на весь вьюпорт. Тянется ФЛЕКСОМ, а не числами: `--pane-h` — высота
блока внутри документа, и на экране 900px она оставляет мёртвую полосу. */
body.ekran{margin:0; height:100vh; display:flex; padding:var(--s4)}
body.ekran .screen{flex:1; display:flex; flex-direction:column; min-height:0; max-width:none}
/* Строка грида по умолчанию растёт под содержимое и вылезает за раму.
minmax(0,1fr) запирает её высотой контейнера, min-height:0 у детей
разрешает прокрутку внутри вместо выпадения наружу. */
body.ekran .split{flex:1; min-height:0; grid-template-rows:minmax(0,1fr)}
body.ekran .split > *{min-height:0}
/* Тело — флекс-колонка: иначе карта внутри остаётся 340px из `--graph-h`. */
body.ekran .pane-body{height:auto; flex:1; min-height:0; display:flex; flex-direction:column}
body.ekran .pane-body > table.grid{flex:0 0 auto}
body.ekran .right.pad{overflow:auto}
body.ekran .who{height:auto}
body.ekran .mapfoot{flex:0 0 auto}
body.ekran .graph{flex:1; min-height:0; height:auto}
/* Выбранная строка: заливка и кант слева. НЕ transform (правило 26). */
.grid tr[data-on] td{background:var(--accent-bg)}
.grid tr[data-on] td:first-child{box-shadow:inset 2px 0 0 var(--accent)}
/* Ширины колонок: содержательной — вся свободная, служебным — по содержимому.
Магических чисел вроде max-width:230px больше нет. */
.grid td.rastyanut, .grid th.rastyanut{width:100%}
.grid td.tesno, .grid th.tesno{white-space:nowrap; width:1%}
/* Длинное имя ПЕРЕНОСИТСЯ, а не режется многоточием и не уносит вправо колонки:
обрезка прячет правый край целиком, а это потеря данных, а не вёрстка
(правило 32а). Цена переноса видна высотой строки. */
.cellname{flex-wrap:wrap; row-gap:0}
.grid .nm, .cellname .at, .cellname .net{white-space:normal}
.grid td:has(.cellname){height:auto; padding-top:var(--s1); padding-bottom:var(--s1)}
/* Дата не ломается посередине: «2026-» и «08-15» на разных строках — не дата. */
.grid .den, .say-item .t-meta, .grid .num{white-space:nowrap}
/* Причина переносится: без этого она уносит вправо всю таблицу. */
.grid td .t-meta{white-space:normal}
/* Факт о данных («без @ника», «сам источник») не должен читаться как значение:
курсив и не моноширинный, которым набраны настоящие @ники. */
.cellname .net{font-family:var(--font); font-style:italic; font-size:11px;
color:var(--text-mute); white-space:nowrap}
/* Правая панель: разбор выбранного. */
.who{display:flex; flex-direction:column; gap:var(--s3); overflow:auto}
.says{display:flex; flex-direction:column; gap:var(--s2)}
.say-item{display:flex; flex-direction:column; gap:var(--s1);
padding:var(--s2) var(--s3); background:var(--raised);
border:1px solid var(--line-soft); border-radius:var(--r-sm)}
/* Строка соседа РАСТЁТ, если содержимое не влезло в 340px: фиксированная
высота прятала правый край, а аудит считал это прокруткой по замыслу. */
.sos{min-height:var(--row); padding:var(--s1) var(--s3); background:var(--raised);
border:1px solid var(--line-soft); border-radius:var(--r-sm)}
/* Ряд «слева содержимое, справа число» — вместо инлайновых стилей по месту. */
.ryad{display:flex; align-items:center; flex-wrap:wrap; gap:var(--s1) var(--s2)}
/* «Справа» работает и в ряду фильтров. Раньше класс жил только внутри `.ryad`,
в `.filters` был инертен, кнопка «Сбросить» липла к последнему чипу — а два
пустых состояния прямым текстом посылали владельца «вправо в ряду фильтров»
(И16). Родня P-U2: каркасный класс вне своей области молча не работает. */
.ryad > .sprava, .filters > .sprava{margin-left:auto}
/* Суть высказывания переносится, а не режется: резать её значит терять то,
ради чего экран существует. На экране высказываний она же ведущая по весу —
иначе жирное имя автора перетягивает взгляд, и высказывание читается
как подпись к человеку. */
.say-sut{white-space:normal}
.grid td:has(.say-sut){height:auto; padding-top:var(--s2); padding-bottom:var(--s2)}
.grid.pro-sut .cellname b{font-weight:400; color:var(--text-dim)}
.grid.pro-sut .say-sut{font-weight:450}
/* Цитата целиком — то, ради чего продукт ведёт к исходнику (правило 14). */
.citata{white-space:pre-wrap; color:var(--text-dim); font-size:13px; line-height:20px;
border-left:2px solid var(--line); padding-left:var(--s3)}
/* Пустое состояние: причина словами, а не декоративная заглушка (обещание О9). */
.empty{display:flex; flex-direction:column; gap:var(--s2); padding:var(--s5) var(--s4)}
/* ============================================================
ВХОД И ФОРМА — добавлено на Э7 (публикация панели наружу).
До этого у продукта не было ни одного экрана без данных и ни одной формы:
источники заводились правкой файла. Оба компонента живут ЗДЕСЬ, а не в
панели, иначе следующий экран скопирует их из панели (правило 19, P-U2).
============================================================ */
/* Экран входа — единственный экран продукта, на котором данных нет вовсе.
Рама та же, что у остальных экранов: карточка по центру, больше ничего.
Ни приветствия, ни мастера — инструмент, а не витрина (отрезок 1). */
.vhod{flex:1; display:flex; align-items:center; justify-content:center}
.vhod-karta{
width:340px; background:var(--surface); border:1px solid var(--line);
border-radius:var(--r); padding:var(--s5);
display:flex; flex-direction:column; gap:var(--s4);
}
.vhod-karta .field{width:100%}
/* Ритм внутри шапки карточки задаёт gap, а не margin-top:6px: шести пикселей
нет в шкале --s0…--s6 (правило 22), а парный margin выбивает крайние
элементы из ритма (правило 23). */
.vhod-shapka{display:flex; flex-direction:column; gap:var(--s1)}
.vhod-karta .btn{width:100%; justify-content:center}
/* Отказ говорит ровно то, что известно, и ни слова о том, что подбирать.
Стоит ПОД кнопкой: над ней его появление опускало «Войти» на 17px, и цель
уезжала из-под курсора ровно тогда, когда по ней собираются нажать второй
раз. Резервировать место сверху нельзя — пустая полоса ломает ритм стека
(детектор ловит 16 против 50px), а ритм задаёт gap контейнера (правило 23). */
.vhod-otkaz{color:var(--bad); font:400 13px/1.4 var(--font); min-height:18px}
/* Скрытый отказ остаётся в потоке ПОСЛЕДНИМ элементом: высота карточки не
меняется, поэтому центрированная карточка не подпрыгивает, а ритм стека не
рвётся — между видимыми соседями по-прежнему один и тот же gap. */
.vhod-otkaz[hidden]{display:block; visibility:hidden}
/* Форма: подписанные ряды. Ритм задаёт gap контейнера — парных
margin-селекторов нет, иначе первый и последний ряд выпадают (правило 23). */
.forma{display:flex; flex-direction:column; gap:var(--s4)}
.forma-ryad{display:flex; flex-direction:column; gap:var(--s2)}
.forma-ryad .field{width:100%}
/* Выбор из закрытого набора — чипами: они показывают ВСЕ варианты сразу и
несут смысловой цвет. Выпадающий список прятал бы и то и другое. */
.forma-vybor{display:flex; gap:var(--s2); flex-wrap:wrap}
/* Кнопка без следствия обязана выглядеть как кнопка без следствия. */
.btn:disabled{opacity:.45; cursor:default}
/* Наведение действует только на ЖИВУЮ кнопку. Правило `.btn:disabled:hover`
со сбросом фона и канта имело специфичность (0,3,0) и перебивало
`.btn-primary`: кнопка «Заводим…» под курсором становилась прозрачным
текстом без рамки — обратная связь пропадала ровно тогда, когда нужна. */
/* Полоса фильтров одной высоты на всех входах: рама не прыгает при переключении. */
.filters{min-height:52px}
/* Длинная ссылка внутри цитаты не имеет пробелов и не переносится сама:
без этого одна строка текста уносит правый край панели за клиппер. */
.who, .citata, .say-item, .say-sut{overflow-wrap:anywhere}
/* Фикс под узкий вьюпорт живёт в его же медиа-запросе (правило 27). */
@media (max-width:1360px){
.grid td, .grid th{padding:0 var(--s2)}
}