/* Chimera design system 0.96.0 — built from chimera/*.css by scripts/build.py; do not edit.
Written in rem: html[data-size="m" | "l"] grows the whole interface (size.css). */
/* ═══ tokens.css ═══ */
/* Химера — токены. Единственный источник значений: компоненты берут цвета, шрифты и размеры только отсюда.
Палитры работают на двух уровнях:
— вся страница: data-theme="light|dark" на (или системная тема);
— отдельный блок: тот же data-theme="light|dark" на любом элементе.
Внутри такого блока все цвета берутся из его палитры — так собираются смешанные экраны. */
:root {
/* Шрифты: голос Химеры — антиква, всё остальное — гротеск. Данные (даты, метки, пути, оси графиков) — тем же Onest,
мельче и тише по цвету; моноширинный не сочетался с Onest */
/* --font-literata и --font-onest ставит продукт, когда подключает файлы шрифтов сам (next/font); без них — семейства с Google Fonts */
--font-voice: var(--font-literata, "Literata"), Georgia, "Times New Roman", serif;
--font-ui: var(--font-onest, "Onest"), "Helvetica Neue", Arial, sans-serif;
--font-data: var(--font-ui);
/* Отступы */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-12: 3rem;
--space-18: 4.5rem;
/* Скругления: минимальные, круг только у точек-сигналов */
--radius-sm: 2px; /* кольцо фокуса, мелкие метки */
--radius: 4px; /* кнопки, поле ввода, кнопка отправки */
--radius-full: 999px; /* только точки */
/* Шкала шрифтов: один размер голоса на всех экранах */
--text-greeting: 1.375rem; --leading-greeting: 1.9375rem; /* приветствие на первом экране */
--text-voice: 1rem; --leading-voice: 1.625rem; /* голос Химеры: чат и проза документа */
--text-voice-sm: 0.875rem; --leading-voice-sm: 1.375rem; /* голос в карточке находки: мельче её заголовка */
--text-title: 1.5rem; --leading-title: 2rem; /* заголовок документа */
--text-heading: 1.125rem; --leading-heading: 1.75rem; /* заголовок раздела документа: крупнее прозы под ним */
--text-body: 0.9375rem; --leading-body: 1.5rem; /* реплики человека, поле ввода */
--text-ui: 0.875rem; --leading-ui: 1.3125rem; /* кнопки, списки, доказательства */
--text-label: 0.8125rem; --leading-label: 1.125rem; /* подписи разделов */
--text-meta: 0.8125rem; --leading-meta: 1.125rem; /* метаданные: даты, источники, подписи осей. 13 — пол всего текста (владелец, 2026-11-04);
ступенью label по размеру, но обычным весом и шрифтом данных */
/* Размеры */
--rail: 4.5rem;
--rail-item: 2.75rem; /* зона нажатия пункта рейки */
--rail-icon: 1.5rem; /* иконки рейки */
--rail-logo: 1.5rem; /* знак Chimera: того же размера, что иконки, в той же колонке */
--rail-logo-gap: 2rem; /* защитный отступ знака от меню */
--rail-open: 13.5rem; /* рейка с подписями */
--rail-fade: 4.5rem; /* за открытой рейкой, открытой близостью, грунт растворяется в цвет страницы */
--chat: clamp(22.5rem, 32vw, 40rem); /* треть экрана, как на макете; строка голоса не длиннее ~80 знаков */
--measure: 40rem; /* колонка разговора на всю ширину */
--digest: 50rem; /* колонка дайджеста: шире разговора, чтобы на больших экранах не было узкой полосы */
--doc: 65rem; /* предельная ширина документа справа */
--control: 2.125rem;
--composer: 3.25rem;
--topbar: 3.25rem; /* полоса узкого окна: кнопка меню и знак */
--send: 2rem;
--page: 95rem; /* предельная ширина рабочей страницы, по центру экрана */
/* Ширины рабочей страницы — доли контейнера, у каждой есть нижний и верхний предел */
--page-pad: clamp(1.5rem, 3.33%, 4rem); /* поля страницы: 48px при окне 1440 */
--cols-gap: clamp(2rem, 5%, 6rem); /* между лентой и сводкой: 72px при полной ширине страницы */
--card-pad: clamp(0.75rem, 2.4%, 1.25rem); /* поля карточки с заливкой — доля ширины ленты */
/* Скриншот заметной находки: высотой ровно в заголовок из двух строк и строку источника
(2 × 21 + 8 + 21 = 71px), ширина — по пропорции 3 : 2. Считается от шрифта, а не от колонки: карточка рассчитана на перенос */
--thumb-sm: calc((var(--leading-ui) * 3 + var(--space-2)) * 3 / 2);
--thumb-lg: calc(var(--thumb-sm) * 1.28); /* скриншот важной находки там же: на 28% крупнее заметной, не больше */
--modal: min(92vw, 70rem); /* ширина модалки — доля окна с пределом */
--modal-pad: clamp(1.25rem, 2.5%, 2rem); /* поля модалки — доля её ширины */
--bars-label: clamp(7.5rem, 30%, 11rem); /* подписи горизонтального графика — доля ширины графика; «Papaya Global» с фавиконом не режется */
--sections: clamp(11rem, 16%, 14.5rem); /* список разделов документа (ch-sections в fp--sections) — доля колонки с пределами */
/* Сигнальная точка (ch-dot: агент работает, источник читается, новое с прошлого раза; владелец, 2026-11-10: в 5 её почти не было
видно, особенно на дне пульса) — 8, крупнее строчной буквы меты, мельче иконки */
--dot: 0.5rem;
--icon-sm: 0.875rem; /* мелкие иконки в строке: стрелки ссылок, шевроны, галочки */
--chart-gap: 0.125rem; /* щель цвета фона между сегментами графика */
--bar: 0.75rem; /* толщина столбца и полосы — одна на всех графиках, вертикальных и горизонтальных; остаток ячейки — воздух */
--ev-shot: 4.5rem; /* снимок или рисунок у строки опоры в документе убеждения (ch-ev--shots), 3 : 2 — 48 высотой */
--hairline: 1px;
--ease: cubic-bezier(.2, .7, .2, 1);
--dur-size: 320ms; /* смена размера интерфейса: страница растёт одной картинкой */
--dur-size-out: 64ms; /* за это время уходит прежняя картинка: новая с первого кадра одна, двух копий текста нет */
}
/* Светлая тема «Griffin»: тот же тёплый тон, что у тёмной, светлый и сдвинутый к 40° —
на 30° такой светлый серый читался розовым. Текст взят из тёмной темы,
поэтому обе темы читаются как одна система. Текст держит ≥ 4.7:1 на всех поверхностях.
Серый один (владелец, 2026-11-04: «море серого текста»): ink-muted. ink-faint больше не ступень — имя оставлено псевдонимом
со значением ink-muted в каждой теме и на каждом грунте, чтобы ничего не сломалось; ни одна таблица стилей его не берёт. */
:root, [data-theme="light"] {
--canvas: #EFEDE9; /* фон разговора, рейки, первого контакта */
--paper: #F8F7F5; /* фон документа справа */
--field: #FBFAF9; /* внутренность поля ввода */
--wash: #E6E3DD; /* наведение на кнопку или строку */
--line: #E2DED7; /* волосяные разделители, граница панелей */
--line-control: #D0CABE; /* обводка кнопок и поля ввода */
--ink: #2A2623; /* основной текст, заголовки */
--ink-muted: #635D52; /* единственный серый: подписи разделов, тихая кнопка, метаданные — даты, крошки, статусы */
--ink-faint: #635D52; /* псевдоним ink-muted (владелец, 2026-11-04: один серый) — своей ступени нет, в стилях не используется */
--ink-gone: #6E685C; /* то, чего уже нет: строка удалённого и ушедшего, заменённое убеждение. Своё значение: в светлой — ступень
под ink-muted, где стоял прежний ink-faint (5.2 : 1 на бумаге, 4.7 на холсте); в тёмной ink-muted почти чернила,
и ушедшему нужна ступень дальше: #A9A298 — 5.5 : 1 на бумаге и 4.9 на холсте. Не на wash и не на feed-plate-hover (4.52 : 1) */
--accent: #2F4F8F; /* ink blue — действие и выбор человека: отправка и основная кнопка, ссылки, включённое, текущий раздел, фокус.
Холодный противовес тёплым серым; ≥ 6.2:1 на всех поверхностях */
--on-accent: #F8F7F5; /* текст на заливке акцентом */
--live: #2F6E58; /* агент жив и работает: точки, события */
--alert: #A3402C; /* сбой: агент не смог прочитать источник */
--belief-confirmed: #4F7A23; /* статус убеждения ● факт: свой оливковый зелёный, не --live — тот значит «агент работает»; оттенок 132° против 168°
у --live (OKLCH L .529, C .126). Знак 12px, не текст: 4.7 : 1 на бумаге (владелец, 3 ноября 2026) */
--belief-supported: #5D733F; /* статус ◐ подкреплено: ступень между фактом и гипотезой — 60% --belief-confirmed и 40% прежнего серого #6E685C
в OKLab, 4.9 : 1. Гипотеза ○ — --ink-muted: про неё ещё мало что известно */
--chart-notable: #4A443D; /* графики: заметные находки — тёмная ступень */
--chart-routine: #B4AB9E; /* графики: рутина — светлая ступень того же тона, 2.1:1 к paper */
/* График находок по уровню — три ступени одного тона (RULES → Colour, Charts): важные и критичные — тёмная ступень,
заметные — средняя, рутина — светлая, по 2.06 : 1 между соседями. Важность цвета не получает: это ступень тона графика */
--chart-major: #4A443D; /* важные и критичные: тёмная ступень, значение chart-notable */
--chart-mid: #7B736A; /* заметные под ними: средняя ступень, 2.06 : 1 к тёмной и к светлой */
--mark-plate: transparent; /* плашка под фавиконом сайта: на светлом не нужна */
/* Поднятый слой (ch-raised; владелец, 2026-11-07, сужен 2026-11-08) — «объект, вставленный в поток»: убеждение в разговоре,
фигура в ответе, карточка на доске. Заливка говорит о слое, а не о важности. Что стоит на своём постоянном месте страницы —
фигуры в колонке, рейке, разделе — лежит на бумаге без подложки (владелец, 2026-11-08: светлая панель графиков рядом
с плашками ленты читалась другим материалом — «что тут главное и почему такая очевидная разница»).
Значение — от грунта. На бумаге — тон плашки ленты (= feed-plate, ступень под бумагой, 1.05 : 1): вставка на бумажной
странице и находки — один материал; ink-muted 5.79, ink-gone 4.91, ссылка 7.07. Сейчас ни один экран не ставит вставку
на бумагу: разговор, плашка агента и дорожка доски — холст. На холсте — полшага от холста к бумаге (1.06 : 1;
владелец, 2026-11-08: значение бумаги, 1.09, читалось слишком белым; ниже поля ввода 1.12, чтобы вставка не спорила с полем ответа); холст объявляет его вместе со своими волоском, наведением,
заготовкой и пульсом (ch-app--canvas, bl-group в components.css; плашка агента — своя поверхность --plate) */
--raised: #F3F1EE;
--raised-canvas: #F5F4F1;
--raised-line: #E2DED7; /* волосок внутри поднятого: в светлой — тот же line (1.19 на поднятом бумаги) */
--raised-canvas-line: #E2DED7; /* то же на холсте: 1.22 к листу */
--raised-gone: #6E685C; /* ушедшее внутри поднятого: в светлой — тот же ink-gone (4.91 на поднятом бумаги; под наведением 4.52 — ушедшему туда нельзя, как на плашке) */
--raised-hover: #EBE8E3; /* наведение на строку внутри поднятого на бумаге: = feed-plate-hover, 1.08 к нему, ink-muted 5.34 */
--raised-canvas-hover: #EEECE8; /* то же на холсте: 1.07 к листу, ink-muted 5.53 */
--raised-wash: #E2DED7; /* наведение кнопки внутри поднятого на бумаге: 1.19 к нему, как wash к бумаге (1.20) */
--raised-canvas-wash: #E6E3DD; /* то же на холсте, и заготовка там: тот же wash, 1.16 к листу */
--raised-skeleton: #C4BCAF; /* заготовка внутри поднятого на бумаге — skeleton-plate, как на плашке ленты того же тона: 1.67 : 1 и мелкий пульс (ch-pulse-plate) */
/* Тег важности (ch-severity; владелец, 2026-11-07): залит тёмной ступенью графиков (chart-major) — той же, что Major и critical на графиках находок по уровню.
Слова и значок — бумагой, 8.98 : 1; в тёмной — светлая ступень с чернилами светлой темы, 11.01 : 1 */
--severity: #4A443D;
--on-severity: #F8F7F5;
--scrim: rgba(42, 38, 35, .36); /* затемнение страницы под модалкой — чернила на треть */
--hover-row: #F3F1EE; /* подложка находки при наведении: между бумагой и плиткой, чтобы плитка не пропадала */
/* Плашка ленты находок (ch-list--feed; владелец, 3 ноября 2026, CHI-1584): под серией рутины дня и под каждой заметной находкой.
Ступень под бумагой (1.05 : 1). С 2026-11-07 на своей плашке лежит и важная находка: её выделяют размер и залитый тег, а не белая карточка.
Значение то же, что у hover-row, но смысл свой: плашка лежит всегда, подложка наведения — только под указателем.
Метаданные (ink-muted) на ней — 5.79 : 1, плитка скриншота (field и волосок line) светлее неё — 1.08 и 1.19 */
--feed-plate: #F3F1EE;
/* Наведение и выбор на плашке: ступень глубже (1.08 к плашке), по её краям. Метаданные (ink-muted) здесь — 5.34 : 1; ссылка — 6.52;
ink-gone — 4.52 : 1, ниже 4.7 темы, поэтому ушедшему сюда нельзя */
--feed-plate-hover: #EBE8E3;
/* Плашка, где говорит агент (ch-plate; владелец, 2026-11-10): на бумаге — белая, ступень над ней (1.07 : 1), чтобы слово
Chimera не читалось ещё одной находкой рядом с плашками ленты (тон холста был в полушаге от них). Волосок — вполовину тише
line (1.13 : 1 к плашке): край, а не рамка */
--plate: #FFFFFF;
--plate-line: #F1EFEB;
/* Полоса заготовки на плашках ленты (ch-skeleton в ch-list--feed): wash на плашке почти не виден (1.14 : 1, под указателем 1.05).
1.67 : 1 к плашке, 1.54 к наведению — у важной, на той же плашке, так же; на дне пульса (.65) — 1.38 и 1.31 */
--skeleton-plate: #C4BCAF;
--accent-tint: #DCDFE7; /* оттенок акцента: дни между концами выбранного периода в календаре, 14% акцента на бумаге */
--inset-lift: 0 0.125rem 0.375rem rgb(20 20 19 / .05), 0 0.5rem 1.5rem -0.75rem rgb(20 20 19 / .14); /* врезка на сайте: окно продукта или чужого приложения, поставленное в страницу картинкой, — тонкая тень у края и мягкая под окном (владелец, 2 ноября 2026) */
/* Панель, которая плавает над страницей (меню, фильтр, список вариантов, свой период, подсказка), отрывается от неё одной мягкой тенью
(владелец, 3 ноября 2026): у края — волосок плотнее, под панелью — размытая, без сдвига вбок. Больше теней в продукте нет */
--float-lift: 0 1px 0.1875rem rgb(20 20 19 / .08), 0 0.5rem 1.5rem -0.25rem rgb(20 20 19 / .16);
/* Рисунок находки без скриншота (thumbs.js в .ch-thumb): объём — свой у рисунка, интерфейс остаётся плоским.
Тёплая лестница из четырёх ступеней — 1 самая светлая плоскость, 4 самая глубокая грань и тонкая линия;
и один отмеченный предмет — то, о чём находка: верх, левая и правая грани; тёмный здесь, белый в тёмной теме */
--drawing-1: #F2EFEA;
--drawing-2: #E3DED6;
--drawing-3: #CBC3B6;
--drawing-4: #9C9385;
--drawing-mark-1: #5A534C;
--drawing-mark-2: #3D3833;
--drawing-mark-3: #2A2623;
/* Рисунок без плиты, на холсте (.ch-thumb.is-shelf): лестница на ступень темнее — самая светлая плоскость рисунка
светлее самого холста, и без плиты верхние грани пропадали бы; отмеченный предмет тот же */
--drawing-canvas-1: #E3DED6;
--drawing-canvas-2: #CBC3B6;
--drawing-canvas-3: #9C9385;
--drawing-canvas-4: #5A534C;
/* Отмеченные грани в акценте (.ch-thumb.is-accent) — для сайта, где акцент — единственный цвет страницы кроме чернил.
Считано, не подобрано: OKLCH на оттенке и хроме --accent (262.7°, C .112, хрома в границах гаммы) при светлоте
лестницы отметки, L .447 / .344 / .272, — так рисунок держит глубину. Лестница и линия остаются тёплыми */
--drawing-mark-accent-1: #325292;
--drawing-mark-accent-2: #173572;
--drawing-mark-accent-3: #05215C;
color-scheme: light;
}
/* Тёмная тема: тёплый тёмный #38332E (оттенок 30°, светлота 20%).
Документ и поле ввода на ступень глубже, наведение и линии светлее. Текст держит ≥ 6.4:1 на всех поверхностях; ушедшее (ink-gone) — 4.9–5.5 : 1,
как ушедшее светлой. ink-faint — псевдоним ink-muted и здесь. */
@media (prefers-color-scheme: dark) {
/* грунт на самом остаётся грунтом: этот блок сильнее его блоков (0,2,0 против 0,1,0) и перекрасил бы его в тёплое */
:root:not([data-theme="light"], [data-ground="band"], [data-ground="poster"], [data-ground="statement"]) {
--canvas: #38332E; --paper: #302B27; --field: #2A2623; --wash: #46403A;
--line: #4C453E; --line-control: #6D635A;
--ink: #F7F4EF; --ink-muted: #E2DCD3; --ink-faint: #E2DCD3; --ink-gone: #A9A298;
--accent: #A9BEF0; --on-accent: #2A2623; --live: #B8E3C9; --alert: #F8C0AE;
/* статусы убеждений (CHI-1730): факт — оливковый на ступень темнее тёмного --live и на 43° желтее (L .84 C .12 H 115 против
L .878 H 158; прежний стоял той же светлоты в 33° от него и читался зелёным агента, ΔE OKLab .053 — теперь .096,
больше светлой пары, .087); подкреплено — 60% факта и 40% ink-muted, как в светлой. 8.75 и 9.36 : 1 на бумаге */
--belief-confirmed: #C8D475; --belief-supported: #D2D89D;
--chart-notable: #E2DCD3; --chart-routine: #6F675D; --chart-major: #E2DCD3; --chart-mid: #A29A91; --mark-plate: #F7F4EF; --scrim: rgba(0, 0, 0, .55); --hover-row: #35302B;
/* поднятый: на бумаге — тон плашки ленты (1.06 : 1 под бумагой), как в светлой, и её же волосок (line, 1.57), наведение (1.09)
и заготовка (skeleton-plate #46403A, 1.45; ink-muted 10.87, ушедшее 6.59 и под наведением 7.19); на холсте — ступенью светлее
(1.15 : 1; #3A3531 на холсте — 1.03, слился бы), внутри свои волосок (line пропадал бы, 1.15; здесь 1.35), ушедшее (ink-gone на #423C37 — 4.30,
здесь 4.83), наведение и заготовка (wash #46403A на поднятом холста — 1.06, здесь 1.23) */
--raised: #2B2723; --raised-canvas: #423C37; --raised-line: #4C453E; --raised-canvas-line: #574F48; --raised-gone: #B3ACA2; --raised-hover: #24201D; --raised-canvas-hover: #4A443F; --raised-wash: #46403A; --raised-canvas-wash: #504943; --raised-skeleton: #46403A; --severity: #E2DCD3; --on-severity: #2A2623;
/* плашка ленты — как в светлой: ступень под бумагой (1.06 : 1); прежняя карточка важной (#3A3531, её токена больше нет) стояла над ней (1.16 к бумаге, 1.22 к плашке);
в значении hover-row (#35302B, светлее бумаги) плашка стояла бы в 1.08 от карточки важной и сливалась с ней. Плитка скриншота (field) на плашке
почти того же тона — её рамку держит волосок line, 1.57 : 1. Наведение — ещё на ступень глубже (1.09), а не светлее,
как hover-row: светлая подложка поднимала бы заметную плашку к карточке важной. ink-muted на них — 10.87 и 11.86 : 1 */
--feed-plate: #2B2723; --feed-plate-hover: #24201D;
/* плашка агента — тон холста, ступень над бумагой (1.12 : 1); волосок — посередине между line и плашкой */
--plate: #38332E; --plate-line: #423C36;
/* полоса заготовки на плашке — значение wash, как была: 1.45 : 1 к плашке, 1.58 к наведению; на дне пульса (.65) — 1.26 и 1.33 */
--skeleton-plate: #46403A;
/* оттенок акцента: 22% акцента на тёмной бумаге — на 14%, как в светлой, он сливался с наведением */
--accent-tint: #4B4B53;
/* золото вне продукта: на тёмном оно читается — 8.07 : 1 на холсте, 9.04 на бумаге; в светлой теме его нет (1.45 : 1) */
--highlight: #EBCC8F;
/* врезка на сайте: на тёмном тень темнее, но читается слабее — окно и так отделено от страницы цветом */
--inset-lift: 0 0.125rem 0.375rem rgb(0 0 0 / .2), 0 0.5rem 1.5rem -0.75rem rgb(0 0 0 / .45);
/* плавающая панель: на тёмном тень нужна темнее и плотнее — светлая тень там не видна, а слабая чёрная тонет в тёмной бумаге */
--float-lift: 0 0.125rem 0.25rem rgb(0 0 0 / .32), 0 0.75rem 2rem -0.25rem rgb(0 0 0 / .6);
/* рисунок: лестница темнеет к глубине, а предмет светлый — на тёмном поле он светится, а не тонет */
--drawing-1: #8A8177; --drawing-2: #6F675E; --drawing-3: #585049; --drawing-4: #463F39;
--drawing-mark-1: #FFFFFF; --drawing-mark-2: #F1ECE4; --drawing-mark-3: #DCD5CA;
/* на тёмном холсте лестница и так отстоит от него: на холсте те же ступени */
--drawing-canvas-1: #8A8177; --drawing-canvas-2: #6F675E; --drawing-canvas-3: #585049; --drawing-canvas-4: #463F39;
/* отметка в акценте: оттенок и хрома тёмного --accent (267°, C .075) при L .92 / .803 / .70 — верх светло-синий,
не белый, левая грань — сам акцент */
--drawing-mark-accent-1: #D9E5FE; --drawing-mark-accent-2: #A9BEF0; --drawing-mark-accent-3: #899ECE;
color-scheme: dark;
}
}
/* Грунты (data-ground, ниже) — вне продукта; берут роли тёмной темы отсюда же, а свои — в своих блоках */
[data-theme="dark"],
[data-ground="band"], [data-ground="poster"], [data-ground="statement"] {
--canvas: #38332E; --paper: #302B27; --field: #2A2623; --wash: #46403A;
--line: #4C453E; --line-control: #6D635A;
--ink: #F7F4EF; --ink-muted: #E2DCD3; --ink-faint: #E2DCD3; --ink-gone: #A9A298;
--accent: #A9BEF0; --on-accent: #2A2623; --live: #B8E3C9; --alert: #F8C0AE;
--belief-confirmed: #C8D475; --belief-supported: #D2D89D;
--chart-notable: #E2DCD3; --chart-routine: #6F675D; --chart-major: #E2DCD3; --chart-mid: #A29A91; --mark-plate: #F7F4EF; --scrim: rgba(0, 0, 0, .55); --hover-row: #35302B;
--raised: #2B2723; --raised-canvas: #423C37; --raised-line: #4C453E; --raised-canvas-line: #574F48; --raised-gone: #B3ACA2; --raised-hover: #24201D; --raised-canvas-hover: #4A443F; --raised-wash: #46403A; --raised-canvas-wash: #504943; --raised-skeleton: #46403A; --severity: #E2DCD3; --on-severity: #2A2623;
--feed-plate: #2B2723; --feed-plate-hover: #24201D; --skeleton-plate: #46403A;
--plate: #38332E; --plate-line: #423C36;
--accent-tint: #4B4B53;
--highlight: #EBCC8F;
--inset-lift: 0 0.125rem 0.375rem rgb(0 0 0 / .2), 0 0.5rem 1.5rem -0.75rem rgb(0 0 0 / .45);
--float-lift: 0 0.125rem 0.25rem rgb(0 0 0 / .32), 0 0.75rem 2rem -0.25rem rgb(0 0 0 / .6);
--drawing-1: #8A8177; --drawing-2: #6F675E; --drawing-3: #585049; --drawing-4: #463F39;
--drawing-mark-1: #FFFFFF; --drawing-mark-2: #F1ECE4; --drawing-mark-3: #DCD5CA;
--drawing-canvas-1: #8A8177; --drawing-canvas-2: #6F675E; --drawing-canvas-3: #585049; --drawing-canvas-4: #463F39;
--drawing-mark-accent-1: #D9E5FE; --drawing-mark-accent-2: #A9BEF0; --drawing-mark-accent-3: #899ECE;
color-scheme: dark;
}
/* Грунты — поле вне продукта (RULES, Colour): сайт и лендинги, карточка для соцсетей и слайд, шапка письма Химеры о себе
(лист ожидания, новости). Никогда в продукте: ни экран, ни диалог, ни панель, ни карточка, ни график, ни письмо с находками
или дайджест. Грунт тёмный в обеих темах: роли тёмной темы он берёт из её блока выше, а здесь переворачивает то, что меняет поле.
Селекторы называют ровно три значения — голого [data-ground] нет. Акцент на грунте — бумага: кольцо фокуса, фокус поля,
ссылка — бумагой с подчёркиванием; золото приходит только туда, где компонент называет --highlight, — по наследству оно
никуда не попадает */
[data-ground="band"], [data-ground="poster"], [data-ground="statement"] {
--ink: #F8F7F5; /* --paper светлой темы: 14.05 / 16.61 / 14.01 : 1 на трёх грунтах */
--canvas: var(--ground); --paper: var(--ground); --plate: var(--ground); --plate-line: var(--ground); --raised: var(--ground); --raised-canvas: var(--ground); --raised-wash: var(--wash); --raised-canvas-wash: var(--wash); --raised-hover: var(--hover-row); --raised-canvas-hover: var(--hover-row); --raised-skeleton: var(--wash);
--accent: var(--ink); /* кольцо фокуса и фокус поля; выбора на грунте нет — переключатели, флажки, вкладки стоят на бумаге */
--on-accent: var(--ground);
--highlight: #EBCC8F; /* песочное золото: то одно, на чём держится вещь, и её одно действие. 9.72 / 11.49 / 9.69 : 1; на бумаге 1.45 : 1 — там его нет */
--on-highlight: var(--ground); /* слова на золотой кнопке — цветом грунта */
color-scheme: dark;
}
/* band — блок среди других блоков страницы (раздел сайта, шапка письма): оттенок акцента при светлоте чернил (L .274),
так он весит, как строка текста рядом с белыми разделами. Тёплые роли тёмной темы на синем читались бурыми — они перевёрнуты */
[data-ground="band"] {
--ground: #102452;
--ink-muted: #C3D1F2; --ink-faint: #C3D1F2; /* 9.83 : 1; ink-faint — псевдоним ink-muted */
--ink-gone: #91A1C5; /* ушедшего на грунте нет; если встанет — прежней ступенью серого грунта, 5.81 : 1 */
--line: #42547F; --line-control: #66779F; /* 2.01 и 3.37 : 1: поле на грунте стоит одной обводкой */
--field: #23355F; --wash: #304269; --hover-row: #1E315C; --accent-tint: #435276;
--chart-notable: #C3D1F2; --chart-routine: #4D6291; --chart-major: #C3D1F2; --chart-mid: #8294BD;
--drawing-1: #6A7AA2; --drawing-2: #54668F; --drawing-3: #42547F; --drawing-4: #30436F;
--drawing-mark-1: #D9E5FE; --drawing-mark-2: #A9BEF0; --drawing-mark-3: #899ECE;
--drawing-canvas-1: var(--drawing-1); --drawing-canvas-2: var(--drawing-2); --drawing-canvas-3: var(--drawing-3); --drawing-canvas-4: var(--drawing-4);
--drawing-mark-accent-1: var(--drawing-mark-1); --drawing-mark-accent-2: var(--drawing-mark-2); --drawing-mark-accent-3: var(--drawing-mark-3);
}
/* poster — грунт и есть вся вещь (плакат, карточка для соцсетей, слайд): на ступень глубже (L .210), рядом нет ничего,
что задало бы ему вес. Только здесь — одно свечение за главной цифрой (ch-glow): светлее грунта синий, в него грунт */
[data-ground="poster"] {
--ground: #0C1730;
--ink-muted: #B4C0DA; --ink-faint: #B4C0DA; /* 9.73 : 1, на пике свечения 7.37; ink-faint — псевдоним ink-muted */
--ink-gone: #8C98B1; /* ушедшее, если встанет: 6.13 : 1, на пике свечения 4.64 */
--line: #3B4660; --line-control: #717C96; /* 1.89 и 4.26 : 1; на пике свечения обводка поля 3.22 */
--field: #1F2940; --wash: #2D364C; --hover-row: #1A243C; --accent-tint: #40485B;
--chart-notable: #B4C0DA; --chart-routine: #4B5A7D; --chart-major: #B4C0DA; --chart-mid: #7A88A7;
--glow: #1B2D57;
--drawing-1: #606C85; --drawing-2: #4C5771; --drawing-3: #3B4660; --drawing-4: #2A354F;
--drawing-mark-1: #D9E5FE; --drawing-mark-2: #A9BEF0; --drawing-mark-3: #899ECE;
--drawing-canvas-1: var(--drawing-1); --drawing-canvas-2: var(--drawing-2); --drawing-canvas-3: var(--drawing-3); --drawing-canvas-4: var(--drawing-4);
--drawing-mark-accent-1: var(--drawing-mark-1); --drawing-mark-accent-2: var(--drawing-mark-2); --drawing-mark-accent-3: var(--drawing-mark-3);
}
/* statement — высказывание крупным шрифтом, где синее поле спорило бы со словами: --ink светлой темы, нового значения нет.
Тёплые ступени тёмной темы остаются; поле тёмной темы и есть этот цвет — оно переворачивается */
[data-ground="statement"] {
--ground: #2A2623;
--ink-muted: #BEBCBA; --ink-faint: #BEBCBA; /* 7.92 : 1; ink-faint — псевдоним ink-muted */
--ink-gone: #A6A3A1; /* ушедшее, если встанет: 5.98 : 1 */
--line-control: #878482; /* 4.04 : 1 */
--field: #3A3734; --accent-tint: #575451;
--drawing-mark-accent-1: var(--drawing-mark-1); --drawing-mark-accent-2: var(--drawing-mark-2); --drawing-mark-accent-3: var(--drawing-mark-3);
}
/* ═══ components.css ═══ */
/* Химера — примитивы. Классы ch-*, значения только из tokens.css. */
/* Основа страницы: этого хватает продукту без других стилей. Полоса прокрутки держит место всегда — замок прокрутки
под модалкой не сдвигает страницу; длинное слово без пробелов переносится, а не раздвигает колонку */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-gutter: stable; }
/* Полоса прокрутки — тонкая и видна только во время прокрутки (владелец, 2026-11-03: «нигде, кроме прокрутки»). Где система
держит полосы на виду (Windows, macOS «всегда показывать», мышь), полоса прозрачна, пока рамка стоит; рамка, которая
прокручивается, получает от скрипта data-scrolling, и бегунок цветом обводки показывается до секунды покоя (scrollbars.js,
у продукта — свой скрипт). У страницы атрибут стоит на : полоса окна берёт цвет у корня. Место полоса держит и
прозрачной: страница не сдвигается, когда бегунок появляется. Свойства на каждом элементе, а не по наследству:
scrollbar-width не наследуется, а цвет наследовался бы уже посчитанным, и блок со своей палитрой (data-theme) получил бы
бегунок чужой темы. Рамка, которая прячет полосу (рейка, вкладки на телефоне), сильнее этого правила */
* { scrollbar-width: thin; scrollbar-color: transparent transparent; }
[data-scrolling] { scrollbar-color: var(--line-control) transparent; }
html, body { min-height: 100%; }
body {
margin: 0;
background: var(--canvas);
color: var(--ink);
font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui);
overflow-wrap: break-word;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
p { margin: 0; }
b, strong { font-weight: 500; }
[hidden] { display: none !important; }
.ch-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Блок со своей палитрой: текст берёт цвет из неё, а не наследует от родителя */
[data-theme] { color: var(--ink); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }
/* Иконка и знак стоят в строке, как svg без сброса: сброс продукта (svg — блоком) не роняет ↗ на свою строку */
.ch-icon { display: inline-block; vertical-align: baseline; width: 1.125rem; height: 1.125rem; flex: none; }
/* Контейнер, который фокусирует скрипт (диалог, панель, шторка), кольца не получает: кольцо — у того, что внутри */
:is(.ch-modal, .ch-menu--float, .ch-drawer):focus { outline: none; }
/* ── Типографика ─────────────────────────────────────────── */
/* Ссылка внутри голоса и примечаний — тонкое подчёркивание цветом обводки, ниже на 4px: текст читается подряд, ссылка видна */
.ch-voice a:not([class]) { color: inherit; text-decoration: underline; text-decoration-color: var(--line-control); text-underline-offset: 4px; }
.ch-voice a:not([class]):hover { text-decoration-color: currentColor; }
.ch-voice { font-family: var(--font-voice); font-size: var(--text-voice); line-height: var(--leading-voice); display: grid; gap: var(--space-3); text-wrap: pretty; }
/* Список в голосе — с маркерами тише текста; пункты в шаг строки, как абзацы списка */
.ch-voice :is(ul, ol) { margin: 0; padding-left: var(--space-6); display: grid; gap: var(--space-1); }
.ch-voice ul { list-style: disc; }
.ch-voice ol { list-style: decimal; }
.ch-voice li::marker { color: var(--ink-muted); }
.ch-voice--xl { font-size: var(--text-greeting); line-height: var(--leading-greeting); letter-spacing: -0.005em; }
.ch-title { font: 500 var(--text-title)/var(--leading-title) var(--font-ui); letter-spacing: -0.01em; margin: 0; text-wrap: pretty; }
/* Подпись раздела — капитель чернилами: серая 13/500 тонула над текстом голосом 16 (владелец, 2026-11-08: «Что
произошло» и «Почему это важно» в окне находки не было видно). Прописные — оформлением, слова в разметке остаются как пишутся: экранный диктор читает их словами */
.ch-label { font: 500 var(--text-label)/var(--leading-label) var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); margin: 0; }
.ch-meta { font: 400 var(--text-meta)/var(--leading-meta) var(--font-data); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.ch-meta--ink { color: var(--ink); }
code, .ch-code { font-family: var(--font-data); }
/* Ссылка внутри прозы интерфейса — заметки документа (fp-note, у убеждения — bl-note: «Scout is watching … until …»),
описания настройки, подсказки поля, значения в Details, подпись раздела досье (co-intro: «Chimera can’t read Klue’s list of
subprocessors…», CHI-1740): голая акцентом, кеглем и строкой самой прозы, подчёркнута под
указателем. ch-link ставит свой кегль 14 и строчный блок, поэтому в строке 12 он крупнее слов вокруг и не переносится внутри
себя; ch-link — для ссылки, которая стоит сама (Open, See all) */
:is(.fp-note, .bl-note, .fp-details dd, .ch-setting__desc, .ch-field__hint, .co-intro) a:not([class]) { color: var(--accent); text-decoration: none; }
:is(.fp-note, .bl-note, .fp-details dd, .ch-setting__desc, .ch-field__hint, .co-intro) a:not([class]):hover { text-decoration: underline; text-underline-offset: 4px; }
/* Факты одной строкой меты («7 of 14 · searched the web in 9 of 14 · claude-haiku-5-5»): каждый — span со своей « ·» через
неразрывный пробел, целым куском, пока помещается в строку; факт длиннее строки переносится внутри себя, и строка не начинается
с точки. Под числом раздела, в строке списка, под числом ch-kpis, во второй строке ячейки — один класс */
.ch-facts > span { display: inline-block; max-width: 100%; }
/* ── Каркас приложения: рейка | страница. Страница на бумаге отделена от рейки волосяной линией;
страница на холсте (дайджест, разговор) — без линии: холст на холсте ── */
.ch-app { display: flex; min-height: 100vh; }
.ch-app > .ch-rail { border-right: var(--hairline) solid var(--line); }
.ch-app--canvas > .ch-rail { border-right: 0; }
/* Колонка страницы, когда над рамкой стоит что-то от приложения (баннер лимита, паузы): рамка страницы — её ребёнок */
.ch-app__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ch-app__banner { padding: var(--space-4) var(--page-pad) 0; }
.ch-app__banner > * { max-width: var(--page); margin-inline: auto; }
/* ── Узкое окно: рейка уходит в шторку, сверху — полоса с кнопкой меню и знаком. Шторка — та же рейка с подписями
у левого края поверх затемнения; закрывается крестиком, Esc и кликом мимо ── */
.ch-topbar { display: none; }
.ch-topbar__brand { display: inline-flex; align-items: center; gap: var(--space-2); font: 500 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink); text-decoration: none; }
.ch-topbar__brand .ch-icon { width: var(--rail-logo); height: var(--rail-logo); }
@media (max-width: 760px) {
.ch-app { flex-direction: column; }
.ch-app > .ch-rail { display: none; }
.ch-topbar {
position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--space-2);
height: var(--topbar); padding: 0 var(--space-3); background: var(--canvas); border-bottom: var(--hairline) solid var(--line);
}
}
.ch-drawer { position: fixed; inset: 0 auto 0 0; z-index: 55; width: min(17.5rem, 86vw); display: flex; animation: ch-drawer-in .25s var(--ease) both; }
.ch-drawer > .ch-rail { flex: 1; height: 100%; overflow-y: auto; }
.ch-drawer__close { position: absolute; top: var(--space-4); right: var(--space-3); }
@keyframes ch-drawer-in { from { transform: translateX(-100%); } }
/* ── Слой под оверлеем, который ставит скрипт (диалог, шторка): затемнение на всё окно; модалка — по центру, длинная прокручивается ── */
.ch-scrim { position: fixed; inset: 0; z-index: 50; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; overflow-y: auto; padding: var(--space-8) var(--space-4); background: var(--scrim); }
.ch-scrim > .ch-modal { position: relative; margin: auto; max-width: 100%; }
/* ── Рейка ───────────────────────────────────────────────── */
.ch-rail {
width: var(--rail); flex: none;
display: flex; flex-direction: column; align-items: center;
padding-block: var(--space-4);
background: var(--canvas);
}
.ch-rail__logo { width: var(--rail-item); height: var(--rail-item); display: grid; place-items: center; color: var(--ink); margin-bottom: var(--rail-logo-gap); }
.ch-rail__logo .ch-icon { width: var(--rail-logo); height: var(--rail-logo); }
.ch-rail__nav { display: grid; gap: var(--space-2); }
.ch-rail__foot { margin-top: auto; }
.ch-rail .ch-rail__item .ch-icon { width: var(--rail-glyph); height: var(--rail-glyph); }
.ch-rail__item {
position: relative; width: var(--rail-item); height: var(--rail-item);
display: grid; place-items: center;
border: 0; background: none; color: var(--ink-muted); cursor: pointer;
border-radius: var(--radius);
}
.ch-rail__item:hover { color: var(--ink); background: var(--wash); }
.ch-rail__item[aria-current="page"] { color: var(--ink); }
.ch-rail__item[aria-current="page"]::before {
content: ""; position: absolute; left: calc((var(--rail) - var(--rail-item)) / -2); top: 0.6875rem; bottom: 0.6875rem;
width: 0.0938rem; background: var(--ink);
}
.ch-rail__item[data-badge]::after {
content: ""; position: absolute; top: 0.4375rem; right: 0.4375rem;
width: 0.375rem; height: 0.375rem; border-radius: var(--radius-full); background: var(--live);
}
.ch-rail__item.is-new { animation: ch-arrive .5s var(--ease) both; }
a.ch-rail__item, a.ch-rail__logo { text-decoration: none; }
/* Рейка с подписями: та же колонка иконок, рядом появляются названия. Иконки не сдвигаются. */
.ch-rail { transition: width .2s var(--ease); }
.ch-rail--sticky { position: sticky; top: 0; height: 100vh; overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: none; }
.ch-rail__label, .ch-rail__group, .ch-rail__brand { display: none; }
.ch-rail__brand { font: 500 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink); }
.ch-rail__section { margin-top: var(--space-6); display: grid; gap: var(--space-2); }
.ch-rail__group { padding-left: calc((var(--rail-item) - var(--rail-glyph)) / 2); }
.ch-rail--open { width: var(--rail-open); align-items: stretch; padding-inline: calc((var(--rail) - var(--rail-item)) / 2); }
.ch-rail--open .ch-rail__label, .ch-rail--open .ch-rail__group, .ch-rail--open .ch-rail__brand { display: block; }
.ch-rail--open .ch-rail__item, .ch-rail--open .ch-rail__logo {
width: 100%; display: flex; align-items: center; gap: var(--space-3);
padding: 0 calc((var(--rail-item) - var(--rail-glyph)) / 2);
}
.ch-rail--open .ch-rail__label { color: inherit; white-space: nowrap; }
.ch-rail__account {
display: flex; align-items: center; gap: var(--space-3); width: var(--rail-item); height: var(--rail-item);
justify-content: center; border: 0; background: none; padding: 0; cursor: pointer; border-radius: var(--radius); color: var(--ink);
}
.ch-rail__account:hover { background: var(--wash); }
.ch-rail--open .ch-rail__account { width: 100%; justify-content: flex-start; padding: 0 calc((var(--rail-item) - var(--rail-glyph)) / 2); text-align: left; }
.ch-rail__account .ch-rail__label { display: none; min-width: 0; }
.ch-rail--open .ch-rail__account .ch-rail__label { display: grid; flex: 1; }
.ch-rail__account .ch-rail__label > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-rail__account > .ch-icon { width: var(--icon-sm); height: var(--icon-sm); display: none; color: var(--ink-muted); }
.ch-rail--open .ch-rail__account > .ch-icon { display: block; }
/* Рейка, открытая близостью (data-near; решение владельца 2026-11-01). Закрытая рейка называет пункты, пока указатель на ней
или в зоне рядом шириной с рейку (не дальше начала содержимого рядом — data-rail-edge): та же рейка на время шире, над
страницей, и её грунт, слова и строка под указателем — один слой, без линии между рейкой и словами; справа грунт
растворяется в цвет страницы (--rail-fade). С самой рейки видно всё меню (data-near="all"), и оно держится, пока указатель
над открытым меню; из зоны — слова у указателя (data-near="zone"): ближнее целиком, дальние гаснут почти до нуля по --near,
которое скрипт ставит пункту (1 — целиком). Строка под указателем — пункт с data-nearest. Нажимается только то, что видно
целиком: всё меню — его пункты, слова у указателя — строка под указателем; под остальным грунтом страница сохраняет свои
клики и прокрутку. Иконки и точка у иконки не сдвигаются: подпись группы не показывается. Фокус с клавиатуры открывает
всё меню. Скрипт — proto.js в прототипе. */
.ch-rail[data-near] {
--rail-solid: calc(var(--rail-open) - 1.5rem);
z-index: 40; pointer-events: none;
min-width: calc(var(--rail-open) + var(--rail-fade));
margin-right: calc(var(--rail) - var(--rail-open) - var(--rail-fade));
align-items: flex-start; padding-inline: calc((var(--rail) - var(--rail-item)) / 2);
/* грунт — фон самой рейки, поэтому он не уезжает, когда высокая рейка прокручена: сплошной за словами, затем цвет
страницы по плавной кривой, а не по прямой */
background: linear-gradient(to right,
var(--canvas) var(--rail-solid),
color-mix(in oklab, var(--canvas) 92%, transparent) calc(var(--rail-solid) + (100% - var(--rail-solid)) / 6),
color-mix(in oklab, var(--canvas) 75%, transparent) calc(var(--rail-solid) + (100% - var(--rail-solid)) / 3),
color-mix(in oklab, var(--canvas) 50%, transparent) calc(var(--rail-solid) + (100% - var(--rail-solid)) / 2),
color-mix(in oklab, var(--canvas) 25%, transparent) calc(var(--rail-solid) + (100% - var(--rail-solid)) * 2 / 3),
color-mix(in oklab, var(--canvas) 8%, transparent) calc(var(--rail-solid) + (100% - var(--rail-solid)) * 5 / 6),
transparent 100%) no-repeat;
}
/* слова у указателя стоят над страницей: колесо над строкой листает страницу, а не останавливается в рейке */
.ch-rail[data-near="zone"] { overscroll-behavior: auto; }
.ch-rail[data-near]:not(.ch-rail--sticky) { position: relative; }
.ch-app > .ch-rail[data-near] { border-right-color: transparent; }
/* у закрытой рейки на бумаге её линия забирает пиксель у колонки иконок: открытая держит иконки на том же месте */
.ch-app:not(.ch-app--canvas) > .ch-rail[data-near] { padding-left: calc((var(--rail) - var(--hairline) - var(--rail-item)) / 2); }
.ch-rail[data-near] :is(.ch-rail__item, .ch-rail__account) {
width: calc(var(--rail-open) - var(--rail) + var(--rail-item));
display: flex; align-items: center; justify-content: flex-start; gap: var(--space-3);
padding: 0 calc((var(--rail-item) - var(--rail-glyph)) / 2); text-align: left;
}
/* Слово пункта и его иконка — на одной базовой линии, а не на центрах двух боксов (владелец, 2026-11-08: при M и L слова
стояли несимметрично относительно иконок). Базовая линия текста встаёт на целый пиксель экрана, иконка — по-своему; при S
пункты стоят на целых пикселях, а при M и L (46.75 на пункт, 8.5 зазор) — на дробных, разных у каждого пункта, и слово
прыгало относительно иконки на пиксель то вверх, то вниз. Поэтому низ иконки привязан к базовой линии слова на целое число
пикселей экрана (--rail-drop; 0.3325 em — середина между ascent 970 и descent 305 у Onest: столько от центра строки до
её базовой линии), и сама иконка целая (--rail-glyph: 24 / 26 / 27 при плотности 1): они встают на пиксели вместе.
Иконка — в той же точке, что при центрировании: строка пункта — бокс иконки, отступ сверху — её поле. Шаг округления —
пиксель экрана (--rail-px): при масштабе 125% или 150% целый CSS-пиксель — не целый пиксель экрана; иная плотность
(масштаб браузера) берёт CSS-пиксель, как раньше. Без round() (Chrome до 125) — те же места без округления.
Знак с именем (ch-rail__logo) центрирован, как был: по базовой линии его строка выше иконки, и в рейке, которая не
помещается в окно, он не сжимался бы до знака */
.ch-rail {
--rail-px: 1px;
--rail-glyph: var(--rail-icon);
--rail-drop: calc(var(--rail-glyph) / 2 - 0.3325 * var(--text-ui));
}
@media (resolution: 1.25dppx) { .ch-rail { --rail-px: 0.8px; } }
@media (resolution: 1.5dppx) { .ch-rail { --rail-px: 0.666667px; } }
@media (resolution: 1.75dppx) { .ch-rail { --rail-px: 0.571429px; } }
@media (resolution: 2dppx) { .ch-rail { --rail-px: 0.5px; } }
@media (resolution: 2.25dppx) { .ch-rail { --rail-px: 0.444444px; } }
@media (resolution: 2.5dppx) { .ch-rail { --rail-px: 0.4px; } }
@media (resolution: 3dppx) { .ch-rail { --rail-px: 0.333333px; } }
@supports (width: round(1px, 1px)) {
.ch-rail {
--rail-glyph: round(var(--rail-icon), var(--rail-px));
--rail-drop: round(calc(var(--rail-glyph) / 2 - 0.3325 * var(--text-ui)), var(--rail-px));
}
}
:is(.ch-rail--open, .ch-rail[data-near]) .ch-rail__item {
align-items: baseline; padding-top: calc((var(--rail-item) - var(--rail-glyph)) / 2 - var(--rail-drop));
}
:is(.ch-rail--open, .ch-rail[data-near]) .ch-rail__item > .ch-icon { position: relative; top: var(--rail-drop); }
/* Строка под указателем выше пункта на 8 и сдвинута на 4 (растут с размером), а её прозрачная кромка — 4px (линия, не растёт):
поле сверху добирает разницу, и строка, став ближайшей, не сдвигается (при M и L — на 0.25 и 0.5) */
.ch-rail { --rail-near-border: 4px; }
.ch-rail[data-near] .ch-rail__item[data-nearest] {
padding-top: calc((var(--rail-item) - var(--rail-glyph)) / 2 - var(--rail-drop) + 0.25rem - var(--rail-near-border));
}
/* Знак в открытой рейке — своего размера (--rail-logo), а не целой иконки: стоит в колонке иконок, как в закрытой */
.ch-rail--open .ch-rail__logo { padding-inline: calc((var(--rail-item) - var(--rail-logo)) / 2); }
/* всё меню — вся рейка: клик и колесо в его пустотах не уходят на страницу под ним, колесо листает высокую рейку */
.ch-rail[data-near="all"],
.ch-rail[data-near] .ch-rail__logo,
.ch-rail[data-near="all"] :is(.ch-rail__nav, .ch-rail__section, .ch-rail__foot, .ch-rail__item, .ch-rail__account),
.ch-rail[data-near] [data-nearest] { pointer-events: auto; }
.ch-rail[data-near] :is(.ch-rail__item, .ch-rail__account):not([data-nearest]):hover { background: none; }
/* Строка под указателем: от иконки до конца, её конец растворяется вместе с грунтом. Она подсвечена до половины зазора
к соседу, и клик там попадает в неё: прозрачная кромка по 4px сверху и снизу, раскладка не меняется */
.ch-rail[data-near] [data-nearest] {
color: var(--ink); background: linear-gradient(to right, var(--wash) calc(100% - 3.5rem), transparent) padding-box;
height: calc(var(--rail-item) + 0.5rem); margin-block: -0.25rem; border-block: var(--rail-near-border) solid transparent;
position: relative; z-index: 1; /* у пунктов внизу без зазора её кромка ложится на соседа: клик идёт в подсвеченный */
}
.ch-rail[data-near] .ch-rail__item[data-badge]::after { right: auto; left: calc(var(--rail-item) - 0.8125rem); }
.ch-rail[data-near] .ch-rail__label {
display: block; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
color: color-mix(in oklab, currentColor calc(var(--near, 1) * 100%), var(--canvas));
opacity: min(1, calc(var(--near, 1) * 4));
transition: opacity .12s linear;
}
@starting-style { .ch-rail[data-near] .ch-rail__label { opacity: 0; } }
.ch-rail[data-near] .ch-rail__account .ch-rail__label { display: grid; }
.ch-rail[data-near] .ch-rail__account .ch-meta { color: color-mix(in oklab, var(--ink-muted) calc(var(--near, 1) * 100%), var(--canvas)); }
/* домен аккаунта под указателем — ink-muted целиком, без растворения в холст */
.ch-rail[data-near] .ch-rail__account[data-nearest] .ch-meta { color: var(--ink-muted); }
/* Рядом с рейкой на том же грунте — разговор слева (сводка): пока меню открыто, его слова отступают, и меню читается поверх */
[data-rail-recede] { transition: opacity .16s var(--ease); }
body:has(.ch-rail[data-near]) [data-rail-recede] { opacity: .2; }
.ch-avatar {
width: var(--rail-glyph, var(--rail-icon)); height: var(--rail-glyph, var(--rail-icon)); flex: none; display: grid; place-items: center;
border: var(--hairline) solid var(--line-control); border-radius: var(--radius);
font: 500 var(--text-meta)/1 var(--font-ui); color: var(--ink);
}
/* ── Кнопки ─────────────────────────────────────────────── */
.ch-btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
min-height: var(--control); padding: 0 var(--space-3);
font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink);
background: transparent; border: var(--hairline) solid var(--line-control); border-radius: var(--radius);
white-space: nowrap; cursor: pointer; transition: background-color .15s, border-color .15s;
}
a.ch-btn { text-decoration: none; }
.ch-btn:hover { background: var(--wash); }
.ch-btn--quiet { border-color: transparent; color: var(--ink-muted); }
.ch-btn--quiet:hover { background: transparent; color: var(--ink); }
/* Недоступное (disabled, aria-disabled) — своё отличие, видное без наведения: при одном сером тихая кнопка в покое уже ink-muted,
и недоступная выглядела бы так же. Слова недоступного — ink-muted на 55% к своему фону (свет ≈ 2.4 : 1, тёмная ≈ 4 : 1; WCAG
недоступные элементы от контраста освобождает). Одна запись во всех правилах ниже; строка под словом — почему нельзя — остаётся
ink-muted и читается. color-mix от var(--ink-muted) на месте — так и на грунте берётся его серый */
.ch-btn[aria-disabled="true"] { color: color-mix(in srgb, var(--ink-muted) 55%, transparent); cursor: default; }
.ch-btn[aria-disabled="true"]:hover { background: transparent; }
.ch-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
/* Кнопка длиннее всего ряда (CHI-1769: «Начать следить за 2 конкурентами и вашим сайтом» на телефоне 390 при L — 419 px, страница
ехала вбок) встаёт во всю ширину ряда и переносит подпись по пробелам, по центру и ровными строками; пока подпись помещается,
кнопка та же, что была: ряд переносит кнопки целиком раньше, чем кнопка — свои слова. Не сжимается рядом с соседями (flex-shrink 0),
так что в ряду без переноса (действия плашки) ничего не меняется */
.ch-actions > .ch-btn { flex-shrink: 0; max-width: 100%; padding-block: var(--space-1); white-space: normal; text-align: center; text-wrap: balance; }
.ch-send {
width: var(--send); height: var(--send); flex: none;
display: grid; place-items: center;
border: 0; border-radius: var(--radius);
background: var(--accent); color: var(--on-accent); cursor: pointer;
transition: opacity .15s;
}
.ch-send .ch-icon { width: 1rem; height: 1rem; }
.ch-send:disabled { opacity: .35; cursor: default; }
.ch-send[aria-busy="true"] { opacity: .6; cursor: progress; }
/* Крутилка на заливке акцентом — цветом текста на акценте, как в баннере */
.ch-send .ch-spinner { border-color: color-mix(in srgb, var(--on-accent) 35%, transparent); border-top-color: var(--on-accent); }
/* ── Поле ввода ─────────────────────────────────────────── */
.ch-composer {
display: flex; align-items: center; gap: var(--space-3);
min-height: var(--composer);
padding: 0 calc((var(--composer) - var(--send)) / 2 - 1px) 0 var(--space-4);
background: var(--field);
border: var(--hairline) solid var(--line-control); border-radius: var(--radius);
transition: border-color .15s;
}
.ch-composer:focus-within { border-color: var(--ink-muted); }
/* Ответ не принят: рамка красным, слова — под полем, как у поля формы */
.ch-composer:has([aria-invalid="true"]) { border-color: var(--alert); }
.ch-composer + .ch-field__error { margin-top: var(--space-2); }
.ch-composer__input {
flex: 1; min-width: 0; border: 0; outline: 0; background: none;
font: 400 var(--text-body)/var(--leading-body) var(--font-ui); color: var(--ink);
}
.ch-composer__input::placeholder { color: var(--ink-muted); }
.ch-composer__hint { text-align: right; margin-top: var(--space-2); }
/* Поле, чьему действию ещё нет бэкенда (владелец, 2026-11-03): disabled у поля и у кнопки. Рамка остаётся — это всё ещё поле, —
заливки нет, слова — как у недоступного (ink-muted на 55%), указатель ничего не меняет; кнопка теряет заливку, как недоступная основная. Под полем — строка
ch-composer__note: когда или где это можно сделать (поле ссылается на неё aria-describedby) */
.ch-composer:has(.ch-composer__input:disabled) { background: transparent; cursor: default; }
.ch-composer__input:disabled, .ch-composer__input:disabled::placeholder { color: color-mix(in srgb, var(--ink-muted) 55%, transparent); cursor: default; }
.ch-composer:has(.ch-composer__input:disabled) .ch-send:disabled { opacity: 1; background: transparent; color: color-mix(in srgb, var(--ink-muted) 55%, transparent); border: var(--hairline) solid var(--line-control); }
.ch-composer__note { margin-top: var(--space-2); }
/* Разговор уходит под липкое поле (владелец, 2026-11-03). Полоса поля (dg__ask, cp-ask) липнет к низу на своём грунте
(--ask-ground: canvas у дайджеста, paper у дела). Пока под ней есть разговор (data-more у полосы — ставит скрипт), над её
верхним краем слой ch-ask-more: слова растворяются в грунт полосы на space-12 — градиент грунта, не тень, по той же плавной
кривой, что у рейки, — и ниже, сплошным грунтом высотой с кнопку, по центру стоит тихая кнопка со стрелкой вниз: к концу
разговора. Поле она не закрывает: между ней и полем — верхний отступ полосы. В конце разговора слоя не видно и кнопки нет
(visibility: hidden — из порядка Tab она уходит). Нажимается только кнопка: под раствором страница кликается как была */
.ch-ask-more {
position: absolute; left: 0; right: 0; bottom: 100%;
height: calc(var(--space-12) + var(--control));
display: flex; align-items: flex-end; justify-content: center;
pointer-events: none;
background: linear-gradient(to bottom,
transparent,
color-mix(in oklab, var(--ask-ground, var(--paper)) 8%, transparent) calc(var(--space-12) / 6),
color-mix(in oklab, var(--ask-ground, var(--paper)) 25%, transparent) calc(var(--space-12) / 3),
color-mix(in oklab, var(--ask-ground, var(--paper)) 50%, transparent) calc(var(--space-12) / 2),
color-mix(in oklab, var(--ask-ground, var(--paper)) 75%, transparent) calc(var(--space-12) * 2 / 3),
color-mix(in oklab, var(--ask-ground, var(--paper)) 92%, transparent) calc(var(--space-12) * 5 / 6),
var(--ask-ground, var(--paper)) var(--space-12));
opacity: 0; visibility: hidden;
transition: opacity .16s var(--ease), visibility 0s linear .16s;
}
[data-more] > .ch-ask-more { opacity: 1; visibility: visible; transition: opacity .16s var(--ease); }
.ch-ask-more > .ch-btn { pointer-events: auto; }
/* Конец разговора, на который кнопка переводит фокус: контейнер, сфокусированный скриптом, без кольца */
[data-ask-end]:focus { outline: none; }
/* ── Реплики ────────────────────────────────────────────── */
.ch-user { display: grid; gap: var(--space-1); }
.ch-user__text { font: 400 var(--text-body)/var(--leading-body) var(--font-ui); }
.ch-event { display: flex; align-items: center; gap: var(--space-2); }
.ch-event::after { content: ""; flex: 1; height: var(--hairline); background: var(--line); margin-left: var(--space-2); }
.ch-dot { width: var(--dot); height: var(--dot); border-radius: var(--radius-full); background: var(--live); flex: none; }
.ch-dot--pulse { animation: ch-pulse 1.8s ease-in-out infinite; }
/* «Новое с прошлого раза» — точка тише текста, не зелёная: зелёный значит «агент работает» */
.ch-dot--new { background: var(--ink-muted); }
/* Точка стоит против первой строки своих слов, по её середине (владелец, 2026-11-10: строка в две строки ставила точку между ними,
так не делают): начало строки, а не центр; 1lh — высота строки самой метки */
.ch-agent-status { display: inline-flex; align-items: flex-start; gap: var(--space-2); }
.ch-agent-status > .ch-dot { margin-top: calc((1lh - var(--dot)) / 2); }
/* ── Документ ───────────────────────────────────────────── */
.ch-crumbs { display: flex; gap: var(--space-2); }
.ch-crumbs a { color: inherit; text-decoration: none; }
.ch-crumbs a:hover { color: var(--ink); }
.ch-doc-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-8); align-items: baseline; }
.ch-metarow { display: flex; flex-wrap: wrap; column-gap: var(--space-6); row-gap: var(--space-1); }
.ch-rule { height: var(--hairline); background: var(--line); border: 0; margin: 0; }
.ch-section { display: grid; gap: var(--space-3); } /* 12 под капителью подписи: при 8 строка прописных липла к тексту */
.ch-mark { display: inline-block; vertical-align: baseline; width: 0.75rem; height: 0.75rem; flex: none; color: var(--ink); }
/* Статус убеждения — в цвете своей уверенности: чем полнее знак, тем ближе к оливковому (владелец, 3 ноября 2026). Гипотеза ○ и
заменённое ⊘ — --ink-muted (единственный серый), подкреплённое ◐ — ступень между, факт ● — --belief-confirmed. Модификатор называет статус, потому что
CSS не видит, на какой символ спрайта ссылается