/* Chimera design system 0.20.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" на <html> (или системная тема);
   — отдельный блок: тот же 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.75rem;        --leading-meta: 1rem;      /* метаданные: даты, источники, подписи осей */

  /* Размеры */
  --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» с фавиконом не режется */
  --icon-sm: 0.875rem;          /* мелкие иконки в строке: стрелки ссылок, шевроны, галочки */
  --chart-gap: 0.125rem;         /* щель цвета фона между сегментами графика */
  --bar: 0.75rem;              /* толщина столбца и полосы — одна на всех графиках, вертикальных и горизонтальных; остаток ячейки — воздух */

  --hairline: 1px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-size: 320ms;        /* смена размера интерфейса: страница растёт одной картинкой */
  --dur-size-out: 64ms;     /* за это время уходит прежняя картинка: новая с первого кадра одна, двух копий текста нет */
}

/* Светлая тема «Griffin»: тот же тёплый тон, что у тёмной, светлый и сдвинутый к 40° —
   на 30° такой светлый серый читался розовым. Текст взят из тёмной темы,
   поэтому обе темы читаются как одна система. Текст держит ≥ 4.7:1 на всех поверхностях. */
:root, [data-theme="light"] {
  --canvas: #EFEDE9;        /* фон разговора, рейки, первого контакта */
  --paper: #F8F7F5;         /* фон документа справа */
  --field: #FBFAF9;         /* внутренность поля ввода */
  --wash: #E6E3DD;          /* наведение на кнопку или строку */
  --line: #E2DED7;          /* волосяные разделители, граница панелей */
  --line-control: #D0CABE;  /* обводка кнопок и поля ввода */
  --ink: #2A2623;           /* основной текст, заголовки */
  --ink-muted: #635D52;     /* подписи разделов, тихая кнопка */
  --ink-faint: #6E685C;     /* метаданные: даты, крошки, статусы */
  --accent: #2F4F8F;        /* ink blue — действие и выбор человека: отправка и основная кнопка, ссылки, включённое, текущий раздел, фокус.
                               Холодный противовес тёплым серым; ≥ 6.2:1 на всех поверхностях */
  --on-accent: #F8F7F5;     /* текст на заливке акцентом */
  --live: #2F6E58;          /* агент жив и работает: точки, события */
  --alert: #A3402C;         /* сбой: агент не смог прочитать источник */
  --chart-notable: #4A443D; /* графики: заметные находки — тёмная ступень */
  --chart-routine: #B4AB9E; /* графики: рутина — светлая ступень того же тона, 2.1:1 к paper */
  --mark-plate: transparent; /* плашка под фавиконом сайта: на светлом не нужна */
  --card: #FFFFFF;          /* заливка карточки находки (варианты с заливкой): белая плоскость на бумаге */
  --scrim: rgba(42, 38, 35, .36); /* затемнение страницы под модалкой — чернила на треть */
  --hover-row: #F3F1EE;     /* подложка находки при наведении: между бумагой и плиткой, чтобы плитка не пропадала */
  --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). В продукте теней нет */
  /* Рисунок находки без скриншота (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 на всех поверхностях. */
@media (prefers-color-scheme: dark) {
  /* грунт на самом <html> остаётся грунтом: этот блок сильнее его блоков (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: #D6D0C6;
    --accent: #A9BEF0; --on-accent: #2A2623; --live: #B8E3C9; --alert: #F8C0AE;
    --chart-notable: #E2DCD3; --chart-routine: #6F675D; --mark-plate: #F7F4EF; --card: #3A3531; --scrim: rgba(0, 0, 0, .55); --hover-row: #35302B;
    /* оттенок акцента: 22% акцента на тёмной бумаге — на 14%, как в светлой, он сливался с наведением */
    --accent-tint: #4B4B53;
    /* врезка на сайте: на тёмном тень темнее, но читается слабее — окно и так отделено от страницы цветом */
    --inset-lift: 0 0.125rem 0.375rem rgb(0 0 0 / .2), 0 0.5rem 1.5rem -0.75rem rgb(0 0 0 / .45);
    /* рисунок: лестница темнеет к глубине, а предмет светлый — на тёмном поле он светится, а не тонет */
    --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: #D6D0C6;
  --accent: #A9BEF0; --on-accent: #2A2623; --live: #B8E3C9; --alert: #F8C0AE;
  --chart-notable: #E2DCD3; --chart-routine: #6F675D; --mark-plate: #F7F4EF; --card: #3A3531; --scrim: rgba(0, 0, 0, .55); --hover-row: #35302B;
  --accent-tint: #4B4B53;
  --inset-lift: 0 0.125rem 0.375rem rgb(0 0 0 / .2), 0 0.5rem 1.5rem -0.75rem rgb(0 0 0 / .45);
  --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); --card: var(--ground);
  --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: #91A1C5;   /* 9.83 и 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;
  --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: #8C98B1;   /* 9.73 и 6.13 : 1; на пике свечения 7.37 и 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;
  --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: #A6A3A1;   /* 7.92 и 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; }
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-faint); }
.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; }
.ch-label { font: 500 var(--text-label)/var(--leading-label) var(--font-ui); color: var(--ink-muted); margin: 0; }
.ch-meta { font: 400 var(--text-meta)/var(--leading-meta) var(--font-data); color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.ch-meta--ink { color: var(--ink); }
code, .ch-code { font-family: var(--font-data); }
/* Ссылка внутри прозы интерфейса — заметки документа (fp-note), описания настройки, подсказки поля, значения в Details: голая <a>
   акцентом, кеглем и строкой самой прозы, подчёркнута под указателем. ch-link ставит свой кегль 14 и строчный блок, поэтому
   в строке 12 он крупнее слов вокруг и не переносится внутри себя; ch-link — для ссылки, которая стоит сама (Open, See all) */
:is(.fp-note, .fp-details dd, .ch-setting__desc, .ch-field__hint) a:not([class]) { color: var(--accent); text-decoration: none; }
:is(.fp-note, .fp-details dd, .ch-setting__desc, .ch-field__hint) 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-icon); height: var(--rail-icon); }
.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-icon)) / 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-icon)) / 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-icon)) / 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-icon)) / 2); text-align: left;
}
/* всё меню — вся рейка: клик и колесо в его пустотах не уходят на страницу под ним, колесо листает высокую рейку */
.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: 4px 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-faint) calc(var(--near, 1) * 100%), var(--canvas)); }
/* на подсветке ink-faint не держит контраст (RULES → Colour): домен аккаунта под указателем — 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-icon); height: 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); }
.ch-btn[aria-disabled="true"] { color: var(--ink-faint); cursor: default; }
.ch-btn[aria-disabled="true"]:hover { background: transparent; }
.ch-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

.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-faint); }
/* Ответ не принят: рамка красным, слова — под полем, как у поля формы */
.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-faint); }
.ch-composer__hint { text-align: right; margin-top: var(--space-2); }

/* ── Реплики ────────────────────────────────────────────── */
.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: 0.3125rem; height: 0.3125rem; 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); }
.ch-agent-status { display: inline-flex; align-items: center; gap: var(--space-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-2); }

.ch-mark { display: inline-block; vertical-align: baseline; width: 0.75rem; height: 0.75rem; flex: none; color: var(--ink); }
.ch-status { display: inline-flex; align-items: center; gap: var(--space-2); font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); white-space: nowrap; }
/* Статус, которому может не хватить строки («Confirmed by Scout · 11 findings from 4 competitors over 6 weeks», узкий столбец
   уровня), переносится по пробелам, знак — на первой строке */
.ch-status--wrap { white-space: normal; align-items: flex-start; }
.ch-status--wrap > .ch-mark { margin-top: calc((var(--leading-ui) - 0.75rem) / 2); }

.ch-list { list-style: none; margin: 0; padding: 0; border-top: var(--hairline) solid var(--line); }
.ch-list > li { border-bottom: var(--hairline) solid var(--line); }

.ch-evidence__item { display: grid; gap: var(--space-1); padding-block: var(--space-3) var(--space-4); font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); }

.ch-belief {
  width: 100%; display: grid; grid-template-columns: 0.75rem minmax(0, 1fr) auto; gap: var(--space-3); align-items: center;
  padding: var(--space-3) 0; border: 0; background: none; text-align: left; cursor: pointer;
  font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink);
}
.ch-belief:hover .ch-belief__title { text-decoration: underline; text-decoration-color: var(--line-control); text-underline-offset: 4px; }
.ch-belief[data-status="replaced"] .ch-belief__title { text-decoration: line-through; color: var(--ink-faint); }
.ch-belief[data-status="replaced"] .ch-mark { color: var(--ink-faint); }

/* ── Ссылка: тихое действие в тексте («Open», «See all beliefs», «Show earlier»). Ссылка-кнопка, которой тесно в строке,
      переносится от начала строки, как ссылка, а не по центру, как кнопка ── */
.ch-link {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 0; border: 0; background: none; cursor: pointer; text-decoration: none; text-align: left;
  font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink-muted);
}
.ch-link:hover { color: var(--ink); }
.ch-link .ch-icon { width: var(--icon-sm); height: var(--icon-sm); }
.ch-link[aria-disabled="true"] { color: var(--ink-faint); cursor: default; }

/* ── Кнопка с иконкой: иконка интерфейсного размера; раскрытое состояние — чернила и рамка, без заливки ── */
.ch-btn .ch-icon { width: 1.125rem; height: 1.125rem; }
.ch-btn .ch-icon.ch-disclosure__chev { width: var(--icon-sm); height: var(--icon-sm); }
.ch-btn[aria-expanded="true"] { color: var(--ink); }
.ch-btn--quiet[aria-expanded="true"] { border-color: var(--line-control); }
/* Квадратная кнопка с одной иконкой: стрелки и крестик в шапке модалки */
.ch-btn--icon { width: var(--control); padding: 0; }
.ch-btn:disabled, .ch-btn:disabled:hover { color: var(--ink-faint); background: transparent; cursor: default; }

/* ── Переключатель: квадратный, без заливки дорожки — заливка остаётся только у отправки ── */
.ch-switch {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0; border: 0; background: none; cursor: pointer;
  font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink-muted);
}
.ch-switch:hover { color: var(--ink); }
/* Выключенный переключатель: слово и дорожка тише, нажать нельзя */
.ch-switch:disabled, .ch-switch[aria-disabled="true"] { color: var(--ink-faint); cursor: default; }
.ch-switch:disabled .ch-switch__track, .ch-switch[aria-disabled="true"] .ch-switch__track { border-color: var(--line-control); }
.ch-switch:disabled .ch-switch__track::after, .ch-switch[aria-disabled="true"] .ch-switch__track::after { background: var(--line-control); }
.ch-switch__track {
  position: relative; width: 1.625rem; height: 0.875rem; flex: none;
  border: var(--hairline) solid var(--ink-faint); border-radius: var(--radius-sm);
  transition: border-color .15s;
}
.ch-switch__track::after {
  content: ""; position: absolute; top: 0.125rem; left: 0.125rem; width: 0.5rem; height: 0.5rem;
  border-radius: var(--radius-sm); background: var(--ink-faint);
  transition: transform .15s var(--ease), background-color .15s;
}
.ch-switch[aria-checked="true"] { color: var(--ink); }
.ch-switch[aria-checked="true"] .ch-switch__track { border-color: var(--ink); }
.ch-switch[aria-checked="true"] .ch-switch__track::after { transform: translateX(0.75rem); background: var(--ink); }

/* ── Поиск: в покое — иконка и подсказка, рамка появляется только при вводе ── */
.ch-search {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: var(--control); padding: 0 var(--space-3);
  border: var(--hairline) solid transparent; border-radius: var(--radius); color: var(--ink-faint);
}
.ch-search:hover { color: var(--ink-muted); }
.ch-search:has(.ch-search__input:disabled), .ch-search:has(.ch-search__input:disabled):hover { color: var(--ink-faint); cursor: default; }
.ch-search:focus-within { border-color: var(--ink-faint); background: var(--field); color: var(--ink-muted); }
.ch-search .ch-icon { width: 1.125rem; height: 1.125rem; }
.ch-search__input {
  width: 10.5rem; min-width: 0; border: 0; outline: 0; background: none; padding: 0;
  font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink);
}
.ch-search__input::placeholder { color: var(--ink-faint); opacity: 1; }
.ch-search__input::-webkit-search-cancel-button { display: none; }
/* Активный запрос — акцентом и в рамке, даже без фокуса: лента отфильтрована, и это видно; крестик сбрасывает запрос */
.ch-search:has(.ch-search__input:not(:placeholder-shown)) { border-color: var(--accent); color: var(--accent); }
.ch-search:has(.ch-search__input:not(:placeholder-shown)) .ch-search__input { color: var(--accent); }
.ch-search__clear {
  display: grid; place-items: center; width: 1.125rem; height: 1.125rem; margin-right: calc(var(--space-1) * -1);
  padding: 0; border: 0; border-radius: var(--radius-sm); background: none; color: inherit; cursor: pointer;
}
.ch-search__clear .ch-icon { width: var(--icon-sm); height: var(--icon-sm); }

/* ── Выпадающая панель и список вариантов: бумага и волосяная рамка, без тени ── */
.ch-pop { position: relative; display: inline-flex; }
.ch-menu {
  position: absolute; top: calc(100% + var(--space-1)); left: 0; z-index: 30;
  min-width: 12.5rem; max-height: min(26.25rem, 70vh); overflow: auto;
  padding: var(--space-2); display: grid; gap: var(--space-1);
  background: var(--paper); border: var(--hairline) solid var(--line-control); border-radius: var(--radius);
}
.ch-menu--end { left: auto; right: 0; }
/* Меню и панель, которые ставит у кнопки скрипт (а не .ch-pop): место задаёт он, слой — над модалкой.
   Место до края окна скрипт может назвать в --float-room: длинная панель (фильтр рабочего списка) не выше его */
.ch-menu--float { position: relative; top: auto; left: auto; z-index: 70; }
.ch-menu__group { padding: var(--space-2) var(--space-2) var(--space-1); }
.ch-menu__item {
  display: flex; align-items: center; gap: var(--space-2); width: 100%;
  min-height: 1.875rem; padding: 0 var(--space-2); border: 0; border-radius: var(--radius-sm);
  background: none; text-align: left; cursor: pointer;
  font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink);
}
.ch-menu__item:hover { background: var(--wash); }
.ch-menu__item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ch-menu__item .ch-icon { width: var(--icon-sm); height: var(--icon-sm); margin-left: auto; visibility: hidden; }
.ch-menu__item[aria-pressed="true"] .ch-icon { visibility: visible; }
/* Пункт-флажок и пункт-выбор меню, которое ставит скрипт (role=menuitemcheckbox / menuitemradio): отметка — та же галочка */
.ch-menu__item[aria-checked="true"] .ch-icon { visibility: visible; }
/* Пункт с пояснением: слово и под ним строка — что пункт сделает или почему он недоступен; панель с пояснениями не шире 320px */
.ch-menu__item:has(> .ch-menu__text) { align-items: flex-start; padding-block: var(--space-1); }
/* Отметка пункта с пояснением («Custom range…» и под ним выбранный период) — на строке слова, не над ней */
.ch-menu__item:has(> .ch-menu__text) > .ch-icon { margin-top: calc((var(--leading-ui) - var(--icon-sm)) / 2); }
.ch-menu__text { display: grid; gap: var(--space-1); min-width: 0; }
.ch-menu__note { font: 400 var(--text-meta)/var(--leading-meta) var(--font-ui); color: var(--ink-faint); white-space: normal; text-wrap: pretty; }
.ch-menu:has(.ch-menu__note) { width: max-content; max-width: 20rem; }
/* Недоступный пункт: слово тише, без подложки; в Tab-порядке он остаётся, чтобы его причину было слышно */
.ch-menu__item:is(:disabled, [aria-disabled="true"]) { color: var(--ink-faint); cursor: default; }
.ch-menu__item:is(:disabled, [aria-disabled="true"]):hover { background: none; }
/* Группа пунктов (role=group): тот же шаг, что между пунктами панели, — и там, где пункты стоят без панели вокруг
   (список палитры команд в теле окна) */
.ch-menu [role="group"], [role="group"]:has(> .ch-menu__item) { display: grid; gap: var(--space-1); }
.ch-menu__foot { display: flex; justify-content: flex-end; padding: var(--space-2) var(--space-2) var(--space-1); border-top: var(--hairline) solid var(--line); margin-top: var(--space-1); }

/* ── Флажок: рамка и галочка чернилами, без заливки ── */
.ch-check { display: flex; align-items: center; gap: var(--space-2); min-height: 1.875rem; padding: 0 var(--space-2); border-radius: var(--radius-sm); cursor: pointer; font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink); white-space: nowrap; }
.ch-check:hover { background: var(--wash); }
.ch-check:hover .ch-check__count { color: var(--ink-muted); }
.ch-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ch-check__box { width: 1rem; height: 1rem; flex: none; display: grid; place-items: center; border: var(--hairline) solid var(--ink-faint); border-radius: var(--radius-sm); color: var(--ink); }
.ch-check__box .ch-icon { width: var(--icon-sm); height: var(--icon-sm); visibility: hidden; }
.ch-check input:checked + .ch-check__box { border-color: var(--ink); }
.ch-check input:checked + .ch-check__box .ch-icon { visibility: visible; }
.ch-check input:focus-visible + .ch-check__box { outline: 2px solid var(--accent); outline-offset: 2px; }
.ch-check__count { margin-left: auto; padding-left: var(--space-4); }
/* Флажок с пояснением: слово и строка под ним, что флажок делает; длинные слова переносятся, рамка — на первой строке */
.ch-check:has(> .ch-check__text) { align-items: flex-start; padding-block: var(--space-1); white-space: normal; }
.ch-check:has(> .ch-check__text) .ch-check__box { margin-top: calc((var(--leading-ui) - 1rem) / 2); }
.ch-check__text { display: grid; gap: var(--space-1); min-width: 0; }
.ch-check__desc { font: 400 var(--text-meta)/var(--leading-meta) var(--font-ui); color: var(--ink-faint); }
.ch-check:hover .ch-check__desc { color: var(--ink-muted); }
.ch-check--wrap { white-space: normal; }
/* Выключенный флажок: слово и рамка тише, нажать нельзя — как выключенный переключатель */
.ch-check:has(input:disabled) { color: var(--ink-faint); cursor: not-allowed; }
.ch-check:has(input:disabled):hover { background: none; }
.ch-check:has(input:disabled):hover .ch-check__desc { color: var(--ink-faint); }
.ch-check input:disabled + .ch-check__box, .ch-check input:disabled:checked + .ch-check__box { border-color: var(--line-control); color: var(--ink-faint); }

/* ── Чип активного фильтра: снимается нажатием ── */
.ch-chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  height: 1.625rem; padding: 0 var(--space-1) 0 var(--space-2);
  border: var(--hairline) solid var(--line-control); border-radius: var(--radius);
  background: none; cursor: pointer; font: 400 var(--text-label)/var(--leading-label) var(--font-ui); color: var(--ink);
}
.ch-chip:hover { background: var(--wash); }
.ch-chip .ch-icon { width: var(--icon-sm); height: var(--icon-sm); color: var(--ink-muted); }

/* ── Значок сайта: его фавикон — единственный чужой цвет в интерфейсе вместе со скриншотами;
      без фавикона — монограмма рамкой, как аватар, без заливки ── */
.ch-tile {
  width: 1.125rem; height: 1.125rem; flex: none; display: inline-grid; place-items: center;
  border: var(--hairline) solid var(--line-control); border-radius: var(--radius-sm); color: var(--ink-muted);
  font: 500 var(--text-meta)/1 var(--font-ui); text-transform: uppercase;
}
.ch-tile--you { border-color: var(--ink); color: var(--ink); }
/* Фавикон на плашке: в тёмной теме тёмные значки не пропадают */
.ch-tile--icon { display: block; padding: 1px; border: 0; background: var(--mark-plate); object-fit: contain; }
/* Свой сайт — без рамки у значка, его выделяет подпись: полужирная, чернилами — в графике, фильтре и источнике карточки */
:is(.ch-bars__label, .ch-check, .ch-finding__src) > .ch-tile--you + span { font-weight: 500; color: var(--ink); }

/* ── Раскрывашка: «Based on 4 findings», свёрнутые убеждения, «Open» у находки ── */
.ch-disclosure > summary { list-style: none; cursor: pointer; }
.ch-disclosure > summary::-webkit-details-marker { display: none; }
.ch-disclosure__chev { width: var(--icon-sm); height: var(--icon-sm); transition: transform .15s var(--ease); }
.ch-disclosure[open] > summary .ch-disclosure__chev,
[aria-expanded="true"] > .ch-disclosure__chev { transform: rotate(180deg); }

/* ── Плитка Скаута: его вывод или совет голосом на плитке цвета холста. Подпись сверху — «Scout · …»,
      13, имя чернилами; под текстом могут стоять действия. Цвет холста здесь значит «говорит Скаут» ── */
.ch-plate { display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-6) var(--space-6); background: var(--canvas); border-radius: var(--radius); }
.ch-plate__by { margin: 0; font: 500 var(--text-label)/var(--leading-label) var(--font-ui); color: var(--ink-muted); }
.ch-plate__by b { font-weight: 500; color: var(--ink); }
.ch-plate > .ch-actions { margin-top: var(--space-2); }

/* ── Кликабельная строка или карточка: открывается кликом в любом месте. Наведение — подложка под всей строкой:
      выступает за колонку на поля карточки и лежит под текстом, ничего не сдвигается. Выбранная строка (aria-current) — с той же подложкой.
      --card — для карточки на своей подложке (доска убеждений): вместо заливки за краями темнеет рамка по её краю ── */
.ch-clickable { position: relative; isolation: isolate; cursor: pointer; }
.ch-clickable::before {
  content: ""; position: absolute; z-index: -1; inset: 0 calc(var(--card-pad) * -1);
  border-radius: var(--radius); background: var(--hover-row); opacity: 0; transition: opacity .12s;
}
.ch-clickable:hover::before, .ch-clickable[aria-current="true"]::before { opacity: 1; }
/* Карточка — свой слой (isolation: подложка лежит под её словами), и всё, что в ней, — внутри него: открытое меню «···» карточки
   уходило под следующую карточку, которая рисуется позже. Карточка, где что-то раскрыто (кнопка меню с aria-expanded), встаёт над
   соседями. Панель, которую ставит скрипт поверх страницы (ch-menu--float в портале), этого не требует */
.ch-clickable:has([aria-expanded="true"]) { z-index: 1; }
.ch-clickable--card::before { inset: 0; background: none; box-shadow: inset 0 0 0 var(--hairline) var(--line-control); }

/* ── Пустое состояние: одна фраза, что здесь будет, и при необходимости кнопка, которая это исправит.
      В списке ch-list линий вокруг нет ── */
.ch-empty { display: grid; gap: var(--space-3); justify-items: start; padding: var(--space-6) 0; }
.ch-empty > p { margin: 0; max-width: var(--measure); font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink-muted); }
.ch-list > li.ch-empty { border-bottom: 0; }
.ch-list:has(> .ch-empty:only-child) { border-top: 0; }

/* ── Лента находок: три плотности — строка рутины, карточка, крупная карточка; список — тот же ch-list ── */
.ch-day { display: flex; align-items: baseline; gap: var(--space-2); padding: var(--space-8) 0 var(--space-3); margin: 0; }
.ch-day:first-child { padding-top: 0; }

.ch-finding {
  display: grid; grid-template-columns: 1.125rem minmax(0, 1fr) auto; column-gap: var(--space-3);
  align-items: baseline; padding: var(--space-3) 0;
  font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink-muted);
}
.ch-finding > .ch-tile { align-self: start; margin-top: calc((var(--leading-ui) - 1.125rem) / 2); }
.ch-finding > .ch-mark { align-self: start; justify-self: center; margin-top: calc((var(--leading-ui) - 0.75rem) / 2); }
.ch-finding__site { color: var(--ink); font-weight: 500; }
.ch-finding__time { white-space: nowrap; }

.ch-finding--card { grid-template-columns: var(--thumb-sm) minmax(0, 1fr); column-gap: var(--space-4); align-items: start; padding: var(--space-4) 0; }
/* Заливка — признак важности, а не фон. Три плотности на три уровня: major и critical — белая карточка со скриншотом
   на 28% крупнее обычного; заметные — на бумаге с разделителями; рутина — строкой.
   Заливка выступает за колонку на свои поля: текст внутри стоит по той же линии, что и у строк вокруг */
.ch-finding--major {
  grid-template-columns: var(--thumb-lg) minmax(0, 1fr);
  margin: var(--space-2) calc(var(--card-pad) * -1); padding: var(--card-pad);
  background: var(--card); border-radius: var(--radius); column-gap: var(--card-pad);
}
.ch-list > li.ch-finding--major { border-bottom-color: transparent; }
/* Подложка наведения у залитой карточки — по её краям: она уже выступает за колонку */
.ch-finding--major::before { inset: 0; }
/* Любая находка — и карточка, и строка рутины — кликабельна целиком (ch-clickable) и открывает модалку.
   При наведении заголовок без подчёркивания, «Open» подчёркивается, текст рутины темнеет */
.ch-finding[data-id]:hover .ch-finding__text { color: var(--ink); }
.ch-finding[data-id]:hover .ch-link[data-open] { text-decoration: underline; text-underline-offset: 4px; }
/* Текст строки рутины — кнопка: с клавиатуры она открывает ту же модалку */
.ch-finding__text { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
/* Текст карточки — по углам: заголовок и время сверху, источник и «Open» прижаты к низу скриншота.
   Каркас один у всех карточек, какой бы длины ни был заголовок, — сетка событий держится ровно.
   Заголовок уступает место времени: слово длиннее строки рвётся, а не выталкивает время за край телефона; время — одной строкой */
.ch-finding__body { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; align-self: stretch; }
.ch-finding__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.ch-finding__title { min-width: 0; margin: 0; font: 500 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink); text-wrap: pretty; overflow-wrap: anywhere; }
.ch-finding--major .ch-finding__title { font-size: var(--text-body); line-height: var(--leading-body); }
/* Важная карточка в узкой колонке (телефон: колонка до 400px): время уходит строкой под заголовок, и заголовок берёт всю
   колонку текста — на телефоне 360 при L 139px вместо 81 (в окне той же ширины с полосой прокрутки в 15px — 124), обычные
   слова («compliance», «Enterprise») больше не рвутся. Скриншот, заливка и знак важности — как были; заметная карточка и
   колонка шире не меняются: до 400 доходит только телефон (при S — окно до 448, при L — до 504), планшет и ноутбук — нет.
   Колонка — ближайший контейнер (рамка страницы fd или fp), а не окно.
   Русское длинное слово заголовка или источника («высокопроизводительные», «Позиционирование») в узкой колонке переносится
   по слогам с дефисом, а не рвётся на любой букве: hyphens по языку страницы (lang="ru" на <html>), и только слова от 12 букв —
   обычные («собственные», «зарплат») остаются целыми. Английские слова — как были: перенос по слогам рвал бы и обычные
   («requirem-ents»), а им хватает строки */
@container (max-width: 25rem) {
  .ch-finding--major .ch-finding__top { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
  :is(.ch-finding__title, .ch-finding__src):lang(ru) { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 12 4 4; }
}
/* Вывод Скаута — голосом, но мельче заголовка карточки: заголовок главнее */
.ch-finding__summary { max-width: var(--measure); font-size: var(--text-voice-sm); line-height: var(--leading-voice-sm); }
/* Защитный отступ описания от нижней строки — на ступень больше, чем от заголовка: плотный абзац иначе прилипает к источнику */
.ch-finding__summary { margin-bottom: var(--space-2); }
.ch-finding__summary p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* Вывод, который пишет шаблон кода, а не Скаут (находка реестра: фраза каталога), — без голоса, интерфейсным шрифтом на
   кегле ui (RULES → Type) */
.ch-finding__summary:not(.ch-voice) { font-size: var(--text-ui); line-height: var(--leading-ui); }
/* Источник и «Open» — в строку, пока помещаются; тесно (карточка на телефоне; важная при M и L наезжала «Open» на слова
   источника) — «Open» уходит строкой под источник, к началу строки, а источник не дробится рядом с ним на две-четыре строки */
.ch-finding__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1) var(--space-4); margin-top: auto; }
/* Значок сайта — у первой строки источника: слова, которым тесно и в своей строке (важная карточка на 360 при L), переносятся от начала
   своей строки, а знак не съезжает на середину двух строк. Слова встают на середину значка отступом сверху, поэтому строка
   в одну строку — та же, что была по центру */
.ch-finding__src { display: inline-flex; align-items: flex-start; gap: var(--space-2); min-width: 0; }
/* Слово длиннее строки («Позиционирование» на 360 при L) рвётся у края карточки, а не выходит за её заливку; по-русски в узкой
   колонке — по слогам, как заголовок */
.ch-finding__src > .ch-tile + * { margin-top: calc((1.125rem - var(--leading-meta)) / 2); min-width: 0; overflow-wrap: anywhere; }

/* Колонка скриншота тянется на высоту карточки: скриншоты одного размера, а важность стоит внизу колонки,
   на одной линии со строкой источника. Заголовок — вровень с верхом скриншота */
.ch-finding__shot { align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }

/* Важность — внизу колонки со скриншотом, на одной линии со строкой бренда и типа: видна при беглом просмотре и держит симметрию.
   Как статусы убеждений — монохромный значок и слово, без рамки и заливки, чтобы не походить на кнопку:
   △ Major — контурный треугольник, ▲ Critical — залитый */
.ch-severity { display: inline-flex; align-items: center; gap: var(--space-1); font: 500 var(--text-label)/var(--leading-label) var(--font-ui); color: var(--ink); }
.ch-finding__shot > .ch-severity { margin-top: auto; min-height: var(--leading-ui); }

.ch-thumb { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; border: var(--hairline) solid var(--line); border-radius: var(--radius-sm); background: var(--field); }
img.ch-thumb { object-fit: cover; object-position: top; }
/* Без скриншота в той же рамке — рисунок предмета находки (thumbs.js, предмет по таблице RULES.md). Объём — свой у рисунка,
   единственное исключение из «без объёма»: изометрия на тёплой лестнице из четырёх ступеней и один отмеченный предмет — то,
   о чём находка (тёмный в светлой теме, белый в тёмной). Классы ролей — буквальными селекторами, чтобы продукт видел их в chimera.css */
.ch-thumb .th-1 { fill: var(--drawing-1); }
.ch-thumb .th-2 { fill: var(--drawing-2); }
.ch-thumb .th-3 { fill: var(--drawing-3); }
.ch-thumb .th-4 { fill: var(--drawing-4); }
.ch-thumb .th-m1 { fill: var(--drawing-mark-1); }
.ch-thumb .th-m2 { fill: var(--drawing-mark-2); }
.ch-thumb .th-m3 { fill: var(--drawing-mark-3); }
.ch-thumb .th-line { fill: none; stroke: var(--drawing-4); stroke-linecap: round; stroke-linejoin: round; }
/* Off the plate (is-shelf): the figure alone on the canvas, for a page that shows drawings as objects on a shelf rather
   than tiles in a feed (a landing's "what it reads"). No frame and no fill; the svg's viewBox is the figure's own box
   (thumbs.json → boxes) and its size that box at --thumb-k px a unit, 1.4667 by default: a 160px tile's scale and a
   tenth more, since the plate's margins are gone; a page sets --thumb-k for a narrower column. Every box is 66 units
   tall, so a row of figures stands on one line, and each stands where its words start. On the light canvas the ramp
   starts a step darker (--drawing-canvas-*): the plate's lightest face is lighter than the canvas itself. */
.ch-thumb.is-shelf { --thumb-k: 1.4667; --thumb-u: 1rem; width: calc(var(--fw, 120) * var(--thumb-k) * var(--thumb-u) / 16); height: calc(var(--fh, 80) * var(--thumb-k) * var(--thumb-u) / 16); aspect-ratio: auto; border: 0; border-radius: 0; background: none; }
.ch-thumb.is-shelf .th-1 { fill: var(--drawing-canvas-1); }
.ch-thumb.is-shelf .th-2 { fill: var(--drawing-canvas-2); }
.ch-thumb.is-shelf .th-3 { fill: var(--drawing-canvas-3); }
.ch-thumb.is-shelf .th-4 { fill: var(--drawing-canvas-4); }
.ch-thumb.is-shelf .th-line { stroke: var(--drawing-canvas-4); }
/* The market's field under a site scene (iso.Scene.field, the site's set only): dots on the scene's ground at rest, the canvas's
   lightest tone on the plate and on the shelf alike. The wave — darker dots and the month by --d — is the page's own motion
   and stays out of the system; d-month is a group and takes no fill. Never under a finding's drawing. */
.ch-thumb .d-dot { fill: var(--drawing-canvas-1); }
/* Marked faces in the accent (is-accent): for the site, where the accent is the page's one colour beside ink, the subject's
   own faces take it — th-m1…3 from --drawing-mark-accent-*, the ramp and the line as they are; composes with is-shelf.
   Never in a feed, the dialog or a finding's page: there the mark says "this is the subject", in ink. */
.ch-thumb.is-accent .th-m1 { fill: var(--drawing-mark-accent-1); }
.ch-thumb.is-accent .th-m2 { fill: var(--drawing-mark-accent-2); }
.ch-thumb.is-accent .th-m3 { fill: var(--drawing-mark-accent-3); }

/* ── Чтение источника: OK — зелёная точка, как «агент работает»; Failing — красный знак, как сбой чтения.
      На странице конкурентов — у каждого сайта, на странице конкурента — у каждого источника ── */
.ch-ok { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink-muted); white-space: nowrap; }
.ch-failing { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--alert); font: 500 var(--text-ui)/var(--leading-ui) var(--font-ui); white-space: nowrap; }
.ch-failing .ch-icon { width: var(--icon-sm); height: var(--icon-sm); }
/* Сбой предложением: переносится, знак — на первой строке */
.ch-failing--wrap { white-space: normal; align-items: baseline; }
.ch-failing--wrap > .ch-icon { align-self: flex-start; margin-top: calc((var(--leading-ui) - var(--icon-sm)) / 2); }

/* ── Находка-опора: строка, как рутина в ленте — значок, заголовок, дата. Под утверждением в деле и под убеждением:
      без скриншотов и заливок, текст читается подряд, а находки лишь подпирают его ── */
.ch-ev { margin-top: var(--space-1); }
.ch-ev > li {
  display: grid; grid-template-columns: 1.125rem minmax(0, 1fr) auto; column-gap: var(--space-3); align-items: baseline;
  padding: var(--space-3) 0; font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink);
}
.ch-ev .ch-tile { align-self: start; margin-top: calc((var(--leading-ui) - 1.125rem) / 2); }
.ch-ev__text { display: grid; gap: var(--space-1); min-width: 0; overflow-wrap: anywhere; }
.ch-ev__text > a { color: inherit; text-decoration: none; }
.ch-ev__text > a:hover { text-decoration: underline; text-decoration-color: var(--line-control); text-underline-offset: 4px; }
/* Пояснение Скаута к находке — голосом, мельче её заголовка */
.ch-ev__sum { margin: 0; font: 400 var(--text-voice-sm)/var(--leading-voice-sm) var(--font-voice); color: var(--ink-muted); }
.ch-ev__tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); }
.ch-ev__when { white-space: nowrap; }

/* ── Строка списка со значком, двумя строками и действием в конце: значок сайта (или иконка 18) — у первой строки, имя чернилами,
      под ним что с ним — тише, за ними мета; действие — кнопка в рамке на строке имени (одна в строке — в рамке, RULES → Behaviour).
      Поправки словаря в плане видимости; строки из списка Скаута — те же, без действия. Ушедшее стоит на месте, тише, значок —
      вполовину, как в строке ушедшего в таблице ── */
.ch-row { display: grid; grid-template-columns: 1.125rem minmax(0, 1fr) auto; column-gap: var(--space-3); align-items: start; padding: var(--space-3) 0; }
.ch-row > :is(.ch-tile, .ch-icon) { margin-top: calc((var(--leading-ui) - 1.125rem) / 2); }
.ch-row > .ch-icon { color: var(--ink-muted); }
.ch-row > .ch-btn { margin-block: calc((var(--leading-ui) - var(--control)) / 2); }
.ch-row__text { display: grid; gap: var(--space-1); min-width: 0; overflow-wrap: anywhere; }
.ch-row__name { font: 500 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink); }
.ch-row__line { font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink-muted); }
.ch-row.is-gone :is(.ch-row__name, .ch-row__line) { color: var(--ink-faint); }

/* ── Ссылка наружу в строке и в таблице: текст чернилами, при наведении — тонкое подчёркивание, ↗ после последнего слова.
      Длинный адрес переносится по слешам (<wbr>) и дефисам, а внутри слова — только когда слово само не влезает в строку:
      break-word, а не anywhere, поэтому столбец таблицы не сжимается до буквы и не ломает адрес посреди слова.
      Последнее слово адреса (после последнего «/», «-» или «.») и ↗ — в ch-url__end: значок не уходит на строку один ── */
.ch-url { color: var(--ink); text-decoration: none; overflow-wrap: break-word; }
.ch-url__end { white-space: nowrap; }
.ch-url:hover { text-decoration: underline; text-decoration-color: var(--line-control); text-underline-offset: 4px; }
.ch-url .ch-icon { width: var(--icon-sm); height: var(--icon-sm); margin-left: var(--space-1); vertical-align: -0.125rem; color: var(--ink-muted); }

/* ── Чужой текст как его дали: ответ ассистента, ответ, снятый в приложении. Шапка — чей он, пометка метой («example answer,
      1 of 14») и факты (ch-facts); строка о том, что источник сделал до ответа (ch-quote__note: «Searched for “…”», его слова — в q,
      чернилами); сам текст — blockquote за волосяной линией слева, интерфейсным шрифтом и чернилами, без нашего выделения: кого
      он назвал, говорят факты, а не жирный. Не Literata — это не голос Химеры и не агента. Под текстом — сайты, на которые он
      сослался, ссылками наружу (ch-url). Несколько — стопкой ch-quotes на шаге 32 ── */
.ch-quotes { display: grid; gap: var(--space-8); }
.ch-quote { display: grid; gap: var(--space-3); margin: 0; }
.ch-quote__head { display: grid; gap: var(--space-1); }
.ch-quote__who { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); font: 500 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink); }
.ch-quote__who .ch-meta { font-weight: 400; }
.ch-quote__note { margin: 0; font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink-muted); text-wrap: pretty; overflow-wrap: anywhere; }
.ch-quote__note q { color: var(--ink); }
.ch-quote__text { display: grid; gap: var(--space-2); margin: 0; padding-left: var(--space-4); border-left: var(--hairline) solid var(--line); font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink); overflow-wrap: anywhere; }
.ch-quote__text p { margin: 0; }
.ch-quote__text :is(ul, ol) { margin: 0; padding-left: var(--space-6); display: grid; gap: var(--space-1); }
.ch-quote__text li::marker { color: var(--ink-faint); }
.ch-quote__cites { display: grid; gap: var(--space-1); }
.ch-quote__cites ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-1); font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); }

/* ── Графики: две ступени одного тона, щель --chart-gap цвета фона, волосяная сетка ── */
.ch-chart { display: grid; gap: var(--space-3); margin: 0; }
.ch-chart__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.ch-chart__title { display: grid; gap: var(--space-1); }
.ch-chart__title h2 { margin: 0; }
/* Заголовок графика читается сразу: 15/24 чернилами, как заголовок важной находки; подпись под ним остаётся мелкой */
.ch-chart__head h2 { font: 500 var(--text-body)/var(--leading-body) var(--font-ui); color: var(--ink); }
.ch-legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
.ch-legend span { display: inline-flex; align-items: center; gap: var(--space-2); }
.ch-legend i, .ch-tip i { width: 0.5rem; height: 0.5rem; border-radius: var(--radius-sm); display: inline-block; flex: none; }
.m-notable { fill: var(--chart-notable); background: var(--chart-notable); }
.m-routine { fill: var(--chart-routine); background: var(--chart-routine); }

.ch-chart__svg { display: block; width: 100%; overflow: visible; }
.ch-chart__svg text { font-family: var(--font-data); font-size: var(--text-meta); fill: var(--ink-faint); font-variant-numeric: tabular-nums; }
.ch-chart__svg .grid { stroke: var(--line); stroke-width: 1; shape-rendering: crispEdges; }
.ch-chart__svg .col { transition: opacity .12s; }
.ch-chart__svg.is-hovering .col:not(.is-active) { opacity: .4; }
/* Столбцы, которые нажимаются (--press): страница сужается до того, что столбец считает, — день, неделю или месяц.
   Каждый столбец — кнопка (g role=button), его зона — вся ячейка (col__hit, под столбцом). Наведение и фокус кладут под
   ячейку подложку строки (hover-row), как у кликабельной строки; фокус обводит ячейку кольцом акцента (col__ring, 2px с
   отступом 2px — его рисует сам svg: outline у элементов svg браузеры рисуют по-разному). Подсказка кончается действием
   (ch-tip__act). График без --press — прежняя картинка: без указателя, подложки и действия */
.ch-chart__svg--press .col { cursor: pointer; }
.ch-chart__svg--press .col:focus { outline: none; }
.ch-chart__svg--press .col__hit { fill: transparent; transition: fill .12s; }
.ch-chart__svg--press .col:is(:hover, .is-active) .col__hit { fill: var(--hover-row); }
.ch-chart__svg--press .col__ring { fill: none; stroke: transparent; stroke-width: 2px; pointer-events: none; }
.ch-chart__svg--press .col:focus-visible .col__ring { stroke: var(--accent); }

/* Полоса — доля дорожки (--share от 0 до 1, пишет скрипт); место под число справа — --bars-value: число, --wide — тысячи, --money — деньги */
.ch-bars { --bars-value: var(--space-8); list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); border-radius: var(--radius-sm); }
.ch-bars--wide { --bars-value: var(--space-12); }
.ch-bars--money { --bars-value: var(--space-18); }
.ch-bars__row { display: grid; grid-template-columns: var(--bars-label) minmax(0, 1fr); align-items: center; gap: var(--space-3); min-height: calc(var(--bar) * 2); }
.ch-bars__label { display: flex; align-items: center; gap: var(--space-2); min-width: 0; font: 400 var(--text-label)/var(--leading-label) var(--font-ui); color: var(--ink); }
.ch-bars__label span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-bars__track { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.ch-bars__bar { display: flex; gap: var(--chart-gap); width: calc((100% - var(--bars-value) - var(--space-2)) * var(--share, 0)); height: var(--bar); flex: none; }
.ch-bars__bar--tight { gap: 0; }
.ch-bars__bar > i { display: block; height: 100%; min-width: 0; }
.ch-bars__bar > i:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.ch-bars__value { color: var(--ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ch-bars.is-hovering .ch-bars__row:not(.is-active) .ch-bars__bar { opacity: .4; }

.ch-tip {
  position: fixed; z-index: 75; pointer-events: none; display: grid; gap: var(--space-1); min-width: 8.25rem;
  padding: var(--space-2) var(--space-3); background: var(--paper);
  border: var(--hairline) solid var(--line-control); border-radius: var(--radius);
}
.ch-tip__row { display: flex; align-items: center; gap: var(--space-2); }
.ch-tip__row b { margin-left: auto; padding-left: var(--space-4); font-weight: 400; color: var(--ink); font-variant-numeric: tabular-nums; }
/* Что сделает нажатие на столбец («Show March 2022») — последней строкой, за волосяной линией, акцентом, как ссылка */
.ch-tip__act { margin-top: var(--space-1); padding-top: var(--space-2); border-top: var(--hairline) solid var(--line); color: var(--accent); }

/* ── Таблица: строка 14/21 с волосяными линиями, подписи столбцов 13 тише и линия под ними потемнее.
      Первая ячейка может быть заголовком строки (th) — выглядит как обычная. Числа — ch-table__num, справа.
      Группа строк — ch-table__group: подпись группы со счётом. Сортировка — кнопка в th и aria-sort.
      Модификаторы: --hover подсвечивает строку, --sticky прилипает шапкой под шапку страницы,
      --fixed раскладывает столбцы по долям из colgroup и обрезает длинное многоточием.
      Та же таблица, скрытая от глаз, лежит под каждым графиком для экранных читалок ── */
.ch-table { width: 100%; border-collapse: collapse; font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink); font-variant-numeric: tabular-nums; }
.ch-table thead th {
  padding: var(--space-3) var(--space-4) var(--space-3) 0; border-bottom: var(--hairline) solid var(--line-control);
  text-align: left; vertical-align: bottom; font: 500 var(--text-label)/var(--leading-label) var(--font-ui); color: var(--ink-muted); white-space: nowrap;
}
.ch-table tbody th { font-weight: 400; text-align: left; }
.ch-table tbody th, .ch-table td { padding: var(--space-3) var(--space-4) var(--space-3) 0; border-bottom: var(--hairline) solid var(--line); vertical-align: middle; }
.ch-table :is(th, td):last-child { padding-right: 0; }
.ch-table :is(th, td).ch-table__num { padding-left: var(--space-4); padding-right: 0; text-align: right; white-space: nowrap; }
/* Число перед текстовым столбцом держит поле до него: «Captures» и «Seen» не слипаются (перед другим числом поле даёт оно само) */
.ch-table :is(th, td).ch-table__num:where(:has(+ :not(.ch-table__num))) { padding-right: var(--space-4); }
/* Слова вместо числа («Under 1 min», «Меньше минуты») переносятся между словами: число держит одну строку, фраза — нет,
   иначе она раздвигает столбец и таблица выходит за колонку телефона */
.ch-table__num .ch-table__words { white-space: normal; }
.ch-table .ch-table__words { font-variant-numeric: normal; }   /* words keep ordinary figures: the table's tabular ones, meant for numbers in a column, set "100 days" as "1 00 days" */
.ch-table tfoot td { border-top: var(--hairline) solid var(--line-control); border-bottom: 0; font-weight: 500; }
.ch-table .ch-table__group td { padding-top: var(--space-6); border-bottom-color: var(--line-control); font: 500 var(--text-label)/var(--leading-label) var(--font-ui); color: var(--ink-muted); }
.ch-table tbody tr:first-child.ch-table__group td { padding-top: var(--space-3); }
/* Статус в ячейке — блочный: у знака без базовой линии строка не вырастает на пиксель. Ширина — по слову: рамка фокуса и
   подсказка обводят слово, а не ячейку; в числовой колонке слово стоит у правого края, как число над ним */
.ch-table .ch-ok, .ch-table .ch-failing { display: flex; width: fit-content; }
.ch-table .ch-table__num :is(.ch-ok, .ch-failing) { margin-left: auto; }
/* Вторая строка ячейки (причина сбоя, что входит в строку) — под первой; нет данных — тире тише текста */
.ch-table__sub { display: block; margin-top: var(--space-1); }
.ch-table__none { color: var(--ink-faint); }
/* Строка того, чего уже нет (удалённый код, закрытая роль), стоит на месте, но тише: слова, ссылки и метаданные — ink-faint */
.ch-table tr.is-gone > :is(th, td), .ch-table tr.is-gone :is(a, .ch-meta, .ch-table__sub) { color: var(--ink-faint); }
/* Свой продукт или сайт — первой строкой, отделён от остальных линией потемнее (свой сайт у Competitors, Mellow в брендах видимости) */
.ch-table tr.ch-table__you > :is(th, td) { border-bottom-color: var(--line-control); }
/* Сайт или бренд в ячейке — значок и имя чернилами 500; вторая строка под ним — от края слов, а не значка. В строке ушедшего
   имя тише и обычным весом, значок — вполовину, как и вся строка */
.ch-table__site { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 500; color: var(--ink); }
.ch-table__site ~ .ch-table__sub { padding-left: calc(1.125rem + var(--space-2)); }
.ch-table tr.is-gone .ch-table__site { color: var(--ink-faint); font-weight: 400; }
.ch-table tr.is-gone .ch-tile, .ch-row.is-gone > .ch-tile { opacity: .5; }
/* Столбец, который в узкой колонке (контейнер до 480: телефон, крупный размер) уходит второй строкой в соседнюю ячейку: его подпись
   и ячейки — ch-table__wide, то же значение второй строкой соседней ячейки — ch-table__sub ch-table__narrow. Видно одно из двух,
   и читалка читает то, что видно: aria-hidden ни на одном нет */
.ch-table .ch-table__narrow { display: none; }
@container (max-width: 30rem) {
  .ch-table .ch-table__wide { display: none; }
  .ch-table .ch-table__narrow { display: block; }
}
/* Сортировка: подпись — кнопка; выбранный столбец — чернилами со стрелкой, по возрастанию стрелка вверх */
/* :is с числовым классом — чтобы перебить отступы ch-table__num: у сортируемой подписи поля даёт сама кнопка */
.ch-table thead :is(th.ch-table__num, th):has(> button) { padding: 0; }
.ch-table th > button {
  display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-3) var(--space-4) var(--space-3) 0;
  border: 0; background: none; cursor: pointer; font: inherit; color: inherit; white-space: nowrap;
}
.ch-table th.ch-table__num > button { padding: var(--space-3) 0 var(--space-3) var(--space-4); }
.ch-table th.ch-table__num:where(:has(+ :not(.ch-table__num))) > button { padding-right: var(--space-4); }
.ch-table th > button:hover, .ch-table th[aria-sort] > button { color: var(--ink); }
.ch-table th > button .ch-icon { width: var(--icon-sm); height: var(--icon-sm); }
.ch-table th[aria-sort="ascending"] > button .ch-icon { transform: rotate(180deg); }
/* Место стрелки держится и у столбца, по которому не сортируют: подпись не переносится и не сдвигается, когда по нему
   начинают сортировать, и шапка не растёт на строку. У числового столбца стрелка — перед подписью: подпись остаётся у
   правого края, над числами */
.ch-table th:not([aria-sort]) > button::after { content: ""; flex: none; width: var(--icon-sm); }
.ch-table th.ch-table__num > button .ch-icon, .ch-table th.ch-table__num:not([aria-sort]) > button::after { order: -1; }
.ch-table--hover tbody tr:hover > :is(th, td) { background: var(--hover-row); }
.ch-table--sticky thead th { position: sticky; top: var(--head-h, 8rem); z-index: 2; background: var(--paper); }
.ch-table--fixed { table-layout: fixed; }
.ch-table--fixed tbody th, .ch-table--fixed td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* В долях обрезается и то, что внутри ячейки: ссылка, слова, путь, вторая строка — каждое своим многоточием */
.ch-table--fixed :where(td, tbody th) > :where(a:not([class]), span:not([class]), code, .ch-url, .ch-table__sub) { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Кнопка в строке таблицы ниже обычной: строка не растёт из-за неё; кнопка с одной иконкой — квадратная */
.ch-table .ch-btn { height: 1.75rem; padding: 0 var(--space-3); }
.ch-table .ch-btn--icon { width: 1.75rem; padding: 0; }
/* Таблица шире своей колонки прокручивается в своей рамке, а не страница: рамка берёт ширину колонки и не растит её своей
   таблицей (contain), поле в 4px держит кольцо фокуса внутри рамки. Таблица с липкой шапкой (--sticky) в рамку не ставится */
.ch-table-wrap { position: relative; overflow-x: auto; contain: inline-size; margin: calc(var(--space-1) * -1); padding: var(--space-1); }

/* ── Вкладки: подпись и число; выбранная — чернилами с полосой акцента снизу, как текущий раздел в рейке ── */
.ch-tabs { display: flex; flex-wrap: wrap; gap: var(--space-6); border-bottom: var(--hairline) solid var(--line); }
/* Вкладка — кнопка списка вкладок или ссылка, когда вкладки — страницы (открываются в новой вкладке браузера); выбранная ссылка — aria-current */
.ch-tabs > :is(button, a) {
  position: relative; display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-4) 0 var(--space-3);
  border: 0; background: none; cursor: pointer; text-decoration: none; font: 500 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink-muted);
}
.ch-tabs > :is(button, a):hover, .ch-tabs > button[aria-selected="true"], .ch-tabs > a[aria-current="page"] { color: var(--ink); }
.ch-tabs > :is(button[aria-selected="true"], a[aria-current="page"])::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(var(--hairline) * -1); height: 0.125rem; background: var(--accent); }
/* Вкладки в пути: заготовка на месте подписи, полоса той же высоты, что с подписями */
.ch-tabs > .ch-skeleton { width: 4.5rem; margin-block: calc(var(--space-4) + (var(--leading-ui) - 0.75rem) / 2) calc(var(--space-3) + (var(--leading-ui) - 0.75rem) / 2); }
.ch-tabs .ch-meta { font-weight: 400; }
.ch-tabs .ch-failing { font-size: var(--text-label); }
/* На телефоне вкладки стоят теснее и одной строкой: не влезают (четыре вкладки досье с трёхзначным числом) — строка
   прокручивается в своей рамке, как широкая таблица, а страница вбок не едет. Перенос клал вкладку вторым рядом, и полоса
   выбранной оказывалась не на линии. В рамке полоса — над линией, кольцо фокуса — внутри вкладки, как у пункта меню */
@media (max-width: 760px) {
  .ch-tabs { flex-wrap: nowrap; column-gap: var(--space-4); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .ch-tabs::-webkit-scrollbar { display: none; }
  .ch-tabs > * { flex: none; }
  .ch-tabs > :is(button[aria-selected="true"], a[aria-current="page"])::after { bottom: 0; }
  .ch-tabs > :is(button, a):focus-visible { outline-offset: -2px; }
}

/* ── Крупные числа: число 24/32 и подпись под ним, между числами — волосяные линии ── */
/* Числа переносятся рядами: между рядами — та же линия, у начала ряда линии нет. Каждое число несёт линию сверху и слева;
   сетка сдвинута влево на поле числа и срезана по краю колонки, так что первое в ряду стоит по краю текста, а его левая линия
   уходит за срез. Четыре числа, которым тесно в ряд, встают два на два, а не три и одно */
.ch-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); min-width: 0;
  margin: 0 0 0 calc(var(--space-4) * -1); border-bottom: var(--hairline) solid var(--line); clip-path: inset(0 0 0 var(--space-4));
}
.ch-kpis:has(> div:nth-child(4):last-child) { grid-template-columns: repeat(auto-fit, minmax(clamp(10rem, (40rem - 100%) * 999, 50%), 1fr)); }
/* Пять — в ряд от 800px колонки, уже — три и два, а не четыре и одно */
.ch-kpis:has(> div:nth-child(5):last-child) { grid-template-columns: repeat(auto-fit, minmax(clamp(10rem, (50rem - 100%) * 999, 33.33%), 1fr)); }
.ch-kpis > div { display: grid; gap: var(--space-1); align-content: start; margin-left: calc(var(--hairline) * -1); padding: var(--space-4); border-top: var(--hairline) solid var(--line); border-left: var(--hairline) solid var(--line); }
.ch-kpis dd { margin: 0; font: 500 var(--text-title)/var(--leading-title) var(--font-ui); color: var(--ink); font-variant-numeric: tabular-nums; }
.ch-kpis dt { order: 2; font: 400 var(--text-label)/var(--leading-label) var(--font-ui); color: var(--ink-muted); }
/* Значение, которое не одно число: слова вместо числа, пока его нет (ch-kpis__words: «needs 15 more answers», «recounting saved
   answers») — ступенью body и тише, а не крупно; части без общего числа (ch-kpis__parts: после смены модели у каждой части свой
   диапазон, счёт и период) — строками ui, число полужирным, период метой под ним. Факты о значении — метой под подписью
   (ch-kpis__facts; каждый целым — ch-facts) */
.ch-kpis dd.ch-kpis__words { font: 400 var(--text-body)/var(--leading-body) var(--font-ui); color: var(--ink-muted); }
.ch-kpis dd.ch-kpis__parts { display: grid; gap: var(--space-1); font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink); }
.ch-kpis__parts b { font-weight: 500; font-variant-numeric: tabular-nums; }
.ch-kpis__parts .ch-meta { display: block; }
.ch-kpis dd.ch-kpis__facts { order: 3; font: 400 var(--text-meta)/var(--leading-meta) var(--font-data); color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* ── Список чисел: подпись слева, число справа; рамки строк — от ch-list ── */
.ch-stats > li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding: var(--space-2) 0; font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink-muted); }
.ch-stats b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ── Акцент ink blue: действие и выбор человека — отправка и основная кнопка (одна на экран), ссылки,
      включённые переключатели и фильтры, текущий раздел, фокус, свой сайт на графике.
      Зелёный «агент работает» и красный «сбой» остаются за своими смыслами; важность находок — без цвета ── */
.ch-btn--primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.ch-btn--primary:hover { background: color-mix(in srgb, var(--accent) 85%, var(--ink)); }
/* Недоступная основная (disabled или aria-disabled, не занятая) — как недоступная на грунте: без заливки, обводка --line-control,
   слово --ink-faint; наведение ничего не меняет. Оба способа выглядят одинаково; занятая остаётся с заливкой (правило ниже) */
.ch-btn--primary:is(:disabled, [aria-disabled="true"]):not([aria-busy="true"]), .ch-btn--primary:is(:disabled, [aria-disabled="true"]):not([aria-busy="true"]):hover { background: transparent; border-color: var(--line-control); color: var(--ink-faint); cursor: default; }
.ch-link { color: var(--accent); }
.ch-link:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.ch-switch[aria-checked="true"] .ch-switch__track { border-color: var(--accent); }
.ch-switch[aria-checked="true"] .ch-switch__track::after { background: var(--accent); }
.ch-check input:checked + .ch-check__box { border-color: var(--accent); color: var(--accent); }
.ch-menu__item:is([aria-pressed="true"], [aria-checked="true"]) .ch-icon { color: var(--accent); }
.ch-rail__item[aria-current="page"]::before { background: var(--accent); }
.ch-bars__row:has(.ch-tile--you) .m-notable { background: var(--accent); }
.ch-bars__row:has(.ch-tile--you) .m-routine { background: color-mix(in srgb, var(--accent) 40%, var(--paper)); }

/* ── Модалка: бумага с волосяной рамкой поверх затемнения, без тени. Шапка и подвал на месте, середина прокручивается.
      Высота — по видимой части окна (dvh): на телефоне подвал с кнопками не уходит под панели браузера ── */
.ch-modal {
  width: var(--modal); max-width: none; max-height: calc(100vh - 2 * var(--space-8)); max-height: calc(100dvh - 2 * var(--space-8));
  padding: 0; border: var(--hairline) solid var(--line-control); border-radius: var(--radius);
  background: var(--paper); color: var(--ink); overflow: hidden;
}
.ch-modal::backdrop { background: var(--scrim); }
html:has(.ch-modal[open]) { overflow: hidden; }
.ch-modal__box { display: flex; flex-direction: column; max-height: calc(100vh - 2 * var(--space-8)); max-height: calc(100dvh - 2 * var(--space-8)); }
.ch-modal__head { display: grid; gap: var(--space-3); padding: var(--modal-pad) var(--modal-pad) var(--space-4); border-bottom: var(--hairline) solid var(--line); }
.ch-modal__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-6); }
.ch-modal__tools { display: flex; align-items: center; gap: var(--space-1); flex: none; }
.ch-modal__tools .ch-meta { margin-right: var(--space-2); white-space: nowrap; }
.ch-modal__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
/* Части тела модалки — баннер, абзац, таблица, примечание — стоят с шагом 16 (у подтверждения — 12), а не вплотную.
   Тело — один столбец шириной в окно: таблица, которая не переносится, или длинное слово его не раздвигают и не уводят
   слова рядом за край окна (на телефоне очередь Add competitors раздвигала его на 12–60px); шире окна — своя рамка ch-table-wrap */
.ch-modal__body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: var(--modal-pad); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-content: start; }
.ch-modal__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--modal-pad); border-top: var(--hairline) solid var(--line); }
/* Подвал из одних действий — они у правого края, без пустышки слева */
.ch-modal__foot > .ch-actions:only-child { margin-left: auto; }
/* На телефоне заголовку окна не тесно рядом с инструментами: длинный заголовок встаёт под них во всю ширину (wrap-reverse),
   короткий остаётся с ними в строке; заголовок — ступенью heading, подвал переносит кнопки рядами */
@media (max-width: 760px) {
  .ch-modal__top { flex-wrap: wrap-reverse; align-items: center; row-gap: var(--space-2); }
  .ch-modal__tools { margin-left: auto; }
  .ch-modal .ch-title { font-size: var(--text-heading); line-height: var(--leading-heading); }
  .ch-modal__foot { flex-wrap: wrap; row-gap: var(--space-2); }
}
/* Модалка, которая сменила содержимое на месте (шаг по ленте, пришла деталь), меняет размер плавно, а не прыжком: скрипт
   ставит прежний размер, класс is-resizing и новый размер; рамка растёт или сужается от центра, коробка заполняет её —
   подвал едет вместе с краем, середина на время не прокручивается. В конце скрипт снимает класс и размеры */
.ch-modal.is-resizing { transition: width .24s var(--ease), height .24s var(--ease); }
.ch-modal.is-resizing > .ch-modal__box { height: 100%; }
.ch-modal.is-resizing .ch-modal__body { overflow: hidden; }
/* Модалка приходит так же, когда её ставит скрипт поверх ch-scrim, а не <dialog open> */
.ch-modal[open] .ch-modal__box, .ch-scrim > .ch-modal > .ch-modal__box { animation: ch-arrive .25s var(--ease) both; }

/* ── Поле формы: подпись 13 над полем, подсказка или ошибка под ним. Поле — как композер: фон поля, волосяная рамка,
      в фокусе рамка темнее. Ошибка — рамка и текст красным со знаком: красный в системе значит «что-то не так» ── */
.ch-field { display: grid; gap: var(--space-1); min-width: 0; }
.ch-field__label { font: 500 var(--text-label)/var(--leading-label) var(--font-ui); color: var(--ink-muted); }
/* «Optional» у необязательного поля — в подписи после пробела, тише неё; отступ — сам пробел, читалка слышит два слова */
.ch-field__optional { font-weight: 400; color: var(--ink-faint); }
.ch-field__hint { font: 400 var(--text-meta)/var(--leading-meta) var(--font-ui); color: var(--ink-faint); }
/* Ошибка в несколько строк (отказ адреса в Add competitors — два-три предложения) переносится от начала строки, знак — у первой
   строки, а не посередине абзаца; ошибка в одну строку стоит, как стояла: знак по середине её строки. Адрес без пробелов в ней
   (личная ссылка deel.com/invite/a8F3kQ9…) рвётся у края, а не выталкивает форму за край окна на телефоне: слова ошибки — текст
   без своей обёртки, и только overflow-wrap: anywhere сжимает их наименьшую ширину */
.ch-field__error { display: inline-flex; align-items: flex-start; gap: var(--space-1); min-width: 0; font: 500 var(--text-meta)/var(--leading-meta) var(--font-ui); color: var(--alert); overflow-wrap: anywhere; }
.ch-field__error .ch-icon { flex: none; width: var(--icon-sm); height: var(--icon-sm); margin-top: calc((var(--leading-meta) - var(--icon-sm)) / 2); }
.ch-input, .ch-textarea, .ch-select > select {
  width: 100%; min-height: var(--control); padding: 0 var(--space-3);
  background: var(--field); border: var(--hairline) solid var(--line-control); border-radius: var(--radius);
  font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink); transition: border-color .15s;
}
.ch-input::placeholder, .ch-textarea::placeholder { color: var(--ink-faint); opacity: 1; }
.ch-input:hover, .ch-textarea:hover, .ch-select > select:hover { border-color: var(--ink-faint); }
.ch-input:focus, .ch-textarea:focus, .ch-select > select:focus { outline: none; border-color: var(--ink-muted); }
.ch-input:focus-visible, .ch-textarea:focus-visible, .ch-select > select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ch-textarea { min-height: 5.5rem; padding: var(--space-2) var(--space-3); resize: vertical; }
/* Выбор длиннее поля (узкая форма на телефоне) кончается многоточием до стрелки, а не режется под ней */
.ch-select { position: relative; display: grid; }
.ch-select > select { appearance: none; padding-right: var(--space-8); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-select > .ch-icon { position: absolute; right: var(--space-3); top: 50%; width: var(--icon-sm); height: var(--icon-sm); transform: translateY(-50%); color: var(--ink-muted); pointer-events: none; }
[aria-invalid="true"].ch-input, [aria-invalid="true"].ch-textarea, .ch-select > select[aria-invalid="true"] { border-color: var(--alert); }
.ch-input:disabled, .ch-textarea:disabled, .ch-select > select:disabled { background: transparent; color: var(--ink-faint); cursor: not-allowed; }
/* Поле в рамке с тем, что внутри: знак и единица по краям числа ($ … USD), тихая кнопка в конце (Show, Copy).
   Рамка, наведение, фокус и ошибка — как у поля; само поле внутри без рамки и тянется */
.ch-affix {
  display: flex; align-items: center; gap: var(--space-2); min-height: var(--control); padding: 0 var(--space-3);
  background: var(--field); border: var(--hairline) solid var(--line-control); border-radius: var(--radius); transition: border-color .15s;
}
.ch-affix:hover { border-color: var(--ink-faint); }
.ch-affix:focus-within { border-color: var(--ink-muted); }
.ch-affix:has(.ch-input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
.ch-affix:has(.ch-input[aria-invalid="true"]) { border-color: var(--alert); }
.ch-affix:has(.ch-input:disabled) { background: transparent; }
.ch-affix > .ch-input, .ch-affix > .ch-input:is(:hover, :focus, :focus-visible) { flex: 1; width: auto; min-width: 0; min-height: calc(var(--control) - 2 * var(--hairline)); padding: 0; border: 0; outline: none; background: none; }
.ch-affix__unit { flex: none; font: 400 var(--text-meta)/var(--leading-meta) var(--font-data); color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.ch-affix--num > .ch-input { text-align: right; font-variant-numeric: tabular-nums; }
.ch-affix > .ch-btn { flex: none; align-self: stretch; min-height: 0; margin: 0.125rem calc(0.125rem - var(--space-3)) 0.125rem 0; padding: 0 var(--space-3); font-size: var(--text-label); }
/* Группа полей в строку: подписи сверху, поля по одной линии, кнопка — вровень с полями, даже когда под полем появилась ошибка */
.ch-fields { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, auto); align-items: start; gap: var(--space-3); }
.ch-fields > .ch-btn { margin-top: calc(var(--leading-label) + var(--space-1)); }
/* --grow: поле тянется рядом с кнопками, от 240px; где тесно, кнопки уходят строкой ниже, поля встают одно под другим */
.ch-fields--grow { display: flex; flex-wrap: wrap; }
.ch-fields--grow > .ch-field { flex: 1 1 15rem; }
.ch-fieldset { display: grid; gap: var(--space-1); margin: 0; padding: 0; border: 0; }
.ch-fieldset > legend { padding: 0; margin-bottom: var(--space-1); font: 500 var(--text-label)/var(--leading-label) var(--font-ui); color: var(--ink-muted); }

/* Выбор одного из нескольких: круглая отметка, выбранная — акцентом, как выбранный фильтр */
.ch-radio { display: flex; align-items: center; gap: var(--space-2); min-height: 1.875rem; cursor: pointer; font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink); }
.ch-radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ch-radio__dot { position: relative; width: 1rem; height: 1rem; flex: none; border: var(--hairline) solid var(--ink-faint); border-radius: var(--radius-full); }
.ch-radio input:checked + .ch-radio__dot { border-color: var(--accent); }
.ch-radio input:checked + .ch-radio__dot::after { content: ""; position: absolute; inset: 0.1875rem; border-radius: var(--radius-full); background: var(--accent); }
.ch-radio input:focus-visible + .ch-radio__dot { outline: 2px solid var(--accent); outline-offset: 2px; }
.ch-radio input:disabled + .ch-radio__dot, .ch-radio:has(input:disabled) { opacity: .5; cursor: not-allowed; }
/* Выбор с пояснением: слово и строка под ним — чем вариант отличается от соседних (совпадения реестра в Add a company: номер,
   дата регистрации, адрес). Длинное слово переносится у края, а не раздвигает окно; точка — у первой строки слова, как рамка
   у флажка с пояснением. Недоступный вариант стоит на месте, словом тише, а не полупрозрачным целиком: его строка говорит,
   почему его не выбрать («Already one of Multiplier’s companies»), и должна читаться */
.ch-radio:has(> .ch-radio__text) { align-items: flex-start; padding-block: var(--space-1); }
.ch-radio:has(> .ch-radio__text) .ch-radio__dot { margin-top: calc((var(--leading-ui) - 1rem) / 2); }
.ch-radio__text { display: grid; gap: var(--space-1); min-width: 0; overflow-wrap: anywhere; }
.ch-radio__desc { font: 400 var(--text-meta)/var(--leading-meta) var(--font-ui); color: var(--ink-faint); }
.ch-radio:has(> .ch-radio__text):has(input:disabled) { opacity: 1; color: var(--ink-faint); }
.ch-radio:has(> .ch-radio__text) input:disabled + .ch-radio__dot { opacity: 1; border-color: var(--line-control); }
/* Ошибка группы (радиокнопки, флажки стран) — словами под её вариантами, последней в fieldset, на шаге группы; группа связана
   с ней aria-describedby и помечена aria-invalid (ChimeraUI.invalid(fieldset, '…')). Варианты не краснеют: какую группу
   поправить, говорят слова под ней */

/* Поле файла: кнопка в рамке выбирает файл — это label вокруг скрытого input type=file, так что фокус, Enter, подпись и ошибка
   у самого поля; рядом — что подходит («PNG or JPG») или имя выбранного файла метой и тихая кнопка Remove. Ошибка — под полем,
   как у любого поля: рамка кнопки красным, слова — ch-field__error, связанные с input */
.ch-file { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); min-width: 0; }
.ch-file__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ch-file > .ch-btn:has(> .ch-file__input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.ch-file > .ch-btn:has(> .ch-file__input[aria-invalid="true"]) { border-color: var(--alert); }
.ch-file__name { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; overflow-wrap: anywhere; }

/* ── Кнопка необратимого действия: красным словом и рамкой, без заливки. Основной остаётся одна кнопка на экран ── */
.ch-btn--danger { color: var(--alert); border-color: color-mix(in srgb, var(--alert) 45%, transparent); }
.ch-btn--danger:hover { background: color-mix(in srgb, var(--alert) 10%, var(--paper)); }
/* Недоступная (disabled или aria-disabled, не занятая) красную рамку теряет — как недоступная контурная: обводка --line-control,
   слово --ink-faint, наведение ничего не меняет. Занятая — как была */
.ch-btn--danger:is(:disabled, [aria-disabled="true"]):not([aria-busy="true"]), .ch-btn--danger:is(:disabled, [aria-disabled="true"]):not([aria-busy="true"]):hover { background: transparent; border-color: var(--line-control); color: var(--ink-faint); cursor: default; }
/* Кнопка, которая ждёт ответа: крутилка вместо иконки, нажать ещё раз нельзя */
.ch-btn[aria-busy="true"] { color: var(--ink-muted); cursor: progress; }
/* Основная кнопка в ожидании остаётся основной: заливка и рамка акцентом, слово и крутилка — цветом на акценте, как у отправки;
   наведение заливку не меняет и не снимает — нажать ещё раз нельзя. Сильнее недоступной (:disabled, aria-disabled):
   busy() ставит disabled, продукт — aria-disabled */
.ch-btn--primary[aria-busy="true"], .ch-btn--primary[aria-busy="true"]:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); cursor: progress; }
.ch-btn--primary[aria-busy="true"] .ch-spinner { border-color: color-mix(in srgb, var(--on-accent) 35%, transparent); border-top-color: var(--on-accent); }

/* ── Баннер: сообщение о состоянии страницы — знак, текст, действия. Сплошная заливка тоном, текст и кнопки — цветом бумаги,
      как у тоста: пропустить нельзя. Обычный — чернилами; --alert — красный: что-то не работает и это меняет то, что вы видите ниже ── */
.ch-banner {
  --tone: var(--ink);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: var(--space-3); align-items: start;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius);
  background: var(--tone); border: var(--hairline) solid var(--tone); color: var(--paper);
  font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui);
}
.ch-banner--alert { --tone: var(--alert); }
.ch-banner > .ch-icon { width: 1.125rem; height: 1.125rem; margin-top: calc((var(--leading-ui) - 1.125rem) / 2); color: inherit; }
.ch-banner__text { margin: 0; }
.ch-banner__text b { font-weight: 500; }
.ch-banner__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); grid-column: 2; margin-top: var(--space-2); }
/* Кнопки и ссылки на заливке — цветом бумаги: контурная кнопка, подчёркнутая ссылка, крестик */
.ch-banner .ch-btn, .ch-banner .ch-btn:hover, .ch-banner .ch-btn:disabled, .ch-banner .ch-btn[aria-busy="true"] { color: inherit; }
.ch-banner .ch-btn:not(.ch-btn--icon) { background: transparent; border-color: color-mix(in srgb, var(--paper) 60%, transparent); }
.ch-banner .ch-btn:not(.ch-btn--icon):hover { background: color-mix(in srgb, var(--paper) 14%, transparent); }
.ch-banner .ch-btn:disabled { opacity: .7; }
.ch-banner .ch-spinner { border-color: color-mix(in srgb, var(--paper) 35%, transparent); border-top-color: currentColor; }
.ch-banner .ch-link, .ch-banner .ch-link:hover { color: inherit; text-decoration: underline; text-underline-offset: 4px; }
.ch-banner > .ch-btn--icon { grid-column: 3; grid-row: 1; width: 1.5rem; min-height: 1.5rem; margin: calc((var(--leading-ui) - 1.5rem) / 2) calc(var(--space-2) * -1) 0 0; opacity: .75; }
.ch-banner > .ch-btn--icon:hover { opacity: 1; }
.ch-banner :focus-visible { outline-color: var(--paper); }

/* ── Тост: короткое подтверждение сделанного внизу экрана, чернилами по бумаге наоборот; «Undo» — подчёркнутым словом.
      Уходит сам через несколько секунд; с действием — живёт дольше; о сбое — красный (--alert, ниже) и стоит до крестика.
      Стопка — во всю ширину окна без полей по 16px, тост — по центру шириной по словам: на телефоне он берёт всю строку,
      а не половину окна ── */
.ch-toasts { position: fixed; left: var(--space-4); right: var(--space-4); bottom: var(--space-6); z-index: 80; display: grid; gap: var(--space-2); justify-items: center; pointer-events: none; }
.ch-toast {
  display: flex; align-items: center; gap: var(--space-4); max-width: min(35rem, 100%); min-height: 2.5rem; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  background: var(--ink); color: var(--paper); border-radius: var(--radius); font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui);
  pointer-events: auto; animation: ch-arrive .25s var(--ease) both;
}
/* Действие тоста — кнопка: слово не переносится, переносятся слова сообщения */
.ch-toast__action { flex: none; white-space: nowrap; padding: 0 var(--space-2); border: 0; background: none; cursor: pointer; font: 500 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--paper); text-decoration: underline; text-underline-offset: 4px; }
/* Крестик держит свою ширину: длинный тост сжимал его до 14px. Тост из двух фраз с действием (заголовок и описание — «2 pages
   added to Deel’s sources. Scout reads them now…» и «Open Deel’s sources») в узкой стопке (телефон, до 480px): слова — первой
   строкой во всю ширину, с тем же полем справа, что слева; действие и крестик — строкой под ними, слово действия — от края
   слов, крестик — в конце строки. Порядок на экране — порядок разметки и Tab: слова, действие, крестик. Короткий тост
   («Marked as noise · Undo») и любой тост на широком экране стоят, как стояли */
.ch-toasts { container-type: inline-size; }
@container (max-width: 30rem) {
  .ch-toast:has(> :first-child > b):has(> .ch-toast__action) { flex-wrap: wrap; row-gap: var(--space-1); }
  .ch-toast:has(> :first-child > b):has(> .ch-toast__action) > :first-child { flex: 1 0 100%; padding-right: var(--space-2); }
  .ch-toast:has(> :first-child > b) > .ch-toast__action { margin-left: calc(var(--space-2) * -1); }
  .ch-toast:has(> :first-child > b) > .ch-toast__action + .ch-toast__close { margin-left: auto; }
}
.ch-toast__close { display: grid; place-items: center; flex: none; width: 1.5rem; height: 1.5rem; padding: 0; border: 0; border-radius: var(--radius-sm); background: none; color: var(--paper); opacity: .7; cursor: pointer; }
.ch-toast__close:hover { opacity: 1; }
.ch-toast__close .ch-icon { width: var(--icon-sm); height: var(--icon-sm); }
.ch-toast :focus-visible { outline-color: var(--paper); }

/* Тост о сбое (--alert): то, что не вышло, — заливкой сбоя, как баннер о сбое, и знаком сбоя i-alert перед словами, 18px, как
   у баннера, в 12px от слов («The finding wasn’t put back in Kleos’s entities. Chimera couldn’t reach the server…»). Слова,
   действие и крестик — цветом бумаги, как у любого тоста; стоит, пока его не закроют. Знак, действие и крестик держатся первой
   строки слов, а не середины абзаца: строка тоста стоит по верху, слова и действие опущены на половину разницы своей строки
   с крестиком, знак — на половину своей; тост в одну строку стоит, как тост без знака. Класс — только вместе со знаком:
   красного тоста без знака нет */
.ch-toast--alert { align-items: flex-start; background: var(--alert); }
.ch-toast--alert > .ch-icon { width: 1.125rem; height: 1.125rem; margin: calc((1.5rem - 1.125rem) / 2) calc(var(--space-3) - var(--space-4)) 0 0; }
.ch-toast--alert > :not(.ch-icon, .ch-toast__close) { margin-top: calc((1.5rem - var(--leading-ui)) / 2); }
/* Тост о сбое из двух фраз с действием на телефоне — как любой: слова — первой строкой, за знаком, до конца строки; действие
   и крестик — строкой под ними, слово действия — от края слов, а не от знака, крестик — в конце строки */
@container (max-width: 30rem) {
  .ch-toast--alert:has(> .ch-icon + * > b):has(> .ch-toast__action) { flex-wrap: wrap; row-gap: var(--space-1); }
  .ch-toast--alert:has(> .ch-icon + * > b):has(> .ch-toast__action) > .ch-icon + * { flex: 1 0 calc(100% - 1.125rem - var(--space-3)); padding-right: var(--space-2); }
  .ch-toast--alert:has(> .ch-icon + * > b) > .ch-toast__action { margin-left: calc(1.125rem + var(--space-3) - var(--space-2)); }
  .ch-toast--alert:has(> .ch-icon + * > b) > .ch-toast__action + .ch-toast__close { margin-left: auto; }
}

/* ── Диалог подтверждения: та же модалка, узкая; вопрос, что случится, и два ответа — отменить и сделать ── */
.ch-modal--confirm { width: min(92vw, 27.5rem); }
/* Модалка с формой: строка чтения шириной, шапка и подвал как у большой; заголовок — на ступень ниже заголовка страницы, как у подтверждения;
   абзацы тела — тише полей */
.ch-modal--form { width: min(92vw, var(--measure)); }
.ch-modal--form .ch-title { font-size: var(--text-heading); line-height: var(--leading-heading); }
.ch-modal--form .ch-modal__body > p:not([class]) { margin: 0; max-width: var(--measure); font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink-muted); }
.ch-modal--confirm .ch-modal__head { border-bottom: 0; padding-bottom: 0; }
.ch-modal--confirm .ch-modal__body { gap: var(--space-3); padding-top: var(--space-3); color: var(--ink-muted); font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); }
.ch-modal--confirm .ch-modal__foot { justify-content: flex-end; border-top: 0; padding-top: 0; }
.ch-modal--confirm .ch-title { font-size: var(--text-heading); line-height: var(--leading-heading); }
.ch-modal--confirm .ch-modal__body p { margin: 0; max-width: var(--measure); }
/* Что действие закроет — строками под фразой (вопросы дела, которые закроет архив): слова людей интерфейсным шрифтом и чернилами,
   как строка списка на странице, не больше двух строк, дальше многоточие; слова целиком остаются в разметке. Строки — не ссылки:
   диалог решает, а не уводит. Больше трёх — первые три, а за списком строка меты «and N more» */
.ch-modal__list > li { padding: var(--space-3) 0; }
.ch-modal__item { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink); text-wrap: pretty; }

/* ── Загрузка: крутилка — когда ждём секунды; полоса — когда известна доля; заготовка — пока не пришёл текст.
      Полоса работы Скаута — зелёная, как «агент работает»; остальное — чернилами ── */
.ch-spinner { display: inline-block; width: 1rem; height: 1rem; flex: none; border: 1.5px solid var(--line-control); border-top-color: var(--ink-muted); border-radius: var(--radius-full); animation: ch-spin .8s linear infinite; }
.ch-progress { height: 0.25rem; overflow: hidden; border-radius: var(--radius-full); background: var(--line); }
.ch-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--ink); transition: width .3s var(--ease); }
.ch-progress--live > span { background: var(--live); }
.ch-progress--busy > span { width: 30%; animation: ch-slide 1.4s var(--ease) infinite; }
.ch-skeleton { display: block; height: 0.75rem; border-radius: var(--radius-sm); background: var(--wash); animation: ch-pulse 1.8s ease-in-out infinite; }
.ch-skeleton--title { height: 1rem; }
.ch-skeleton--tile { width: 1.125rem; height: 1.125rem; }
/* Заготовка раздела, пока он в пути: заголовок и строки стопкой; ширины строк задаёт страница */
.ch-skeletons { display: grid; gap: var(--space-3); align-content: start; }

/* ── Подсказка: подпись к кнопке-иконке по наведению и фокусу, чернилами по бумаге наоборот.
      Ставится атрибутом data-tip; data-tip-pos="bottom" — под кнопкой, если сверху не хватает места; "bottom-end" — под ней по правому краю ── */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 0.375rem); z-index: 40;
  padding: 0.125rem var(--space-2); border-radius: var(--radius-sm); background: var(--ink); color: var(--paper);
  font: 400 var(--text-meta)/var(--leading-meta) var(--font-ui); white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translate(-50%, 0.125rem); transition: opacity .12s, transform .12s;
}
[data-tip][data-tip-pos="bottom"]::after { top: calc(100% + 0.375rem); bottom: auto; transform: translate(-50%, -0.125rem); }
/* bottom-end — у кнопки в конце строки, у края страницы («···» в шапке документа): подсказка встаёт под ней по правому краю
   и не выходит за окно — иначе страница прокручивалась бы вбок даже со скрытой подсказкой */
[data-tip][data-tip-pos="bottom-end"]::after { top: calc(100% + 0.375rem); bottom: auto; left: auto; right: 0; transform: translateY(-0.125rem); }
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); transition-delay: .3s; }
[data-tip][data-tip-pos="bottom-end"]:is(:hover, :focus-visible)::after { transform: none; }
/* Та же подсказка элементом — когда её ставит скрипт (длинная подпись, подпись в меню или модалке) */
.ch-tooltip { z-index: 75; max-width: 20rem; padding: 0.125rem var(--space-2); border-radius: var(--radius-sm); background: var(--ink); color: var(--paper); font: 400 var(--text-meta)/var(--leading-meta) var(--font-ui); }

/* ── Меню действий «···»: та же панель, что у фильтров; разделитель отделяет необратимое, оно — красным словом ── */
.ch-menu__sep { height: var(--hairline); margin: var(--space-1) 0; border: 0; background: var(--line); }
.ch-menu__item--danger { color: var(--alert); }
.ch-menu[role="menu"] { min-width: 13.75rem; }

/* ── Выбор одного из двух-трёх: слова тихими кнопками, выбранное — акцентом, как включённый фильтр. Без рамки и подложки:
      вид списка (List · Board), размер интерфейса (S · M · L), тема. Группа кнопок с aria-pressed — или радиогруппа
      (role=radiogroup, кнопки role=radio с aria-checked): стрелки ходят по вариантам и сразу выбирают (ui.js) ── */
.ch-segmented { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); }
.ch-segmented > .ch-btn:is([aria-pressed="true"], [aria-checked="true"]) { color: var(--accent); }

/* ── Строка настройки: имя и что настройка делает сейчас — слева, управление — в конце строки, на первой строке имени.
      Имя — подпись управления (label for), описание — его aria-describedby; описание меняется вместе с настройкой.
      Строки лежат в ch-list ch-settings; в узком списке выбор словами и поле уходят под текст, переключатель остаётся справа ── */
.ch-settings { container-type: inline-size; }
.ch-setting { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-8); row-gap: var(--space-3); align-items: start; padding: var(--space-4) 0; }
.ch-setting__text { display: grid; gap: var(--space-1); min-width: 0; }
.ch-setting__name { justify-self: start; font: 500 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink); }
.ch-setting__desc { margin: 0; max-width: var(--measure); font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink-muted); text-wrap: pretty; }
.ch-setting__control { display: flex; align-items: center; justify-content: flex-end; min-height: var(--leading-ui); }
/* Кнопка и выбор словами стоят по центру первой строки имени и не раздвигают строку */
.ch-setting__control > :is(.ch-btn, .ch-segmented) { margin-block: calc((var(--leading-ui) - var(--control)) / 2); }
/* Слова тихих кнопок кончаются у края строки, как переключатель: поле кнопки выходит за край */
.ch-setting__control > .ch-segmented { margin-inline-end: calc(var(--space-3) * -1); }
/* Поле (список, поле с поиском) — под текстом, как поле формы под подписью: справа от абзаца ему тесно */
.ch-setting:has(> .ch-setting__control > :is(.ch-select, .ch-combobox)) { grid-template-columns: minmax(0, 1fr); }
.ch-setting__control:has(> :is(.ch-select, .ch-combobox)) { justify-content: flex-start; }
.ch-setting__control > :is(.ch-select, .ch-combobox) { width: min(100%, 20rem); }
@container (max-width: 30rem) {
  .ch-setting:has(> .ch-setting__control > .ch-segmented) { grid-template-columns: minmax(0, 1fr); }
  .ch-setting__control:has(> .ch-segmented) { justify-content: flex-start; }
  .ch-setting__control > .ch-segmented { margin-block: 0; margin-inline: calc(var(--space-3) * -1) 0; }
}

/* ── Поле с выбором из длинного списка (часовой пояс, находка для дела): поле ввода ищет, под ним — варианты той же панелью,
      что у меню. Стрелки двигают выделение (aria-activedescendant), Enter выбирает, Esc и уход фокуса возвращают прежнее значение.
      Выбранный вариант — галочкой акцентом; пояснение варианта (смещение пояса, дата) — мелко справа ── */
.ch-combobox { position: relative; display: grid; }
.ch-combobox > .ch-input { padding-right: var(--space-8); text-overflow: ellipsis; }
.ch-combobox > .ch-icon { position: absolute; right: var(--space-3); top: calc(var(--control) / 2); width: var(--icon-sm); height: var(--icon-sm); transform: translateY(-50%); color: var(--ink-muted); pointer-events: none; }
.ch-combobox > .ch-menu { right: 0; min-width: 17.5rem; max-height: 20rem; }
.ch-menu__item.is-active { background: var(--wash); }
.ch-menu__item[aria-selected="true"] .ch-icon { visibility: visible; color: var(--accent); }
.ch-menu__desc { margin-left: auto; padding-left: var(--space-4); font: 400 var(--text-meta)/var(--leading-meta) var(--font-data); color: var(--ink-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ch-menu__desc + .ch-icon { margin-left: var(--space-2); }
/* На подложке наведения — тише не бывает: ink-faint на wash не читается */
.ch-menu__item:is(:hover, .is-active) :is(.ch-menu__desc, .ch-menu__note) { color: var(--ink-muted); }
.ch-menu__item:is(:disabled, [aria-disabled="true"]):hover .ch-menu__note { color: var(--ink-faint); }
/* Имя варианта переносится: длинный пояс в одно слово не раздвигает панель вбок */
.ch-menu__label { min-width: 0; overflow-wrap: anywhere; }
.ch-menu[role="listbox"] { overflow-x: hidden; }
/* Варианты в панели, которую ставит скрипт: высота — как у ch-combobox, ширина — поля, её задаёт скрипт */
.ch-menu--float[role="listbox"] { max-height: 20rem; }
.ch-menu__empty { margin: 0; padding: var(--space-1) var(--space-2); font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink-muted); }

/* ── Свой период: поля «From» и «To» и календарь под ними — в панели у той же кнопки, что открывает меню периода: бумага
      с рамкой меню (ch-menu; в продукте — ch-menu--float от поповера, в прототипе — ch-pop), голова ch-menu__group,
      подвал ch-menu__foot с «Cancel» и основной кнопкой, которая называет действие. Форма в списке пунктов меню не живёт:
      стрелки и поиск по буквам меню мешали бы вводу. Дату вводят словами («Mar 1, 2022», «1 мар. 2022», 2022-03-01) или
      выбирают в календаре; поле, которое заполнит следующий выбор, — в рамке темнее (is-picking). Ошибки — словами под
      обоими полями во всю ширину, у каждого поля своя строка (aria-describedby), рамка поля — красным.
      Ширина — 320, на телефоне — окно без полей слоя; высота — не больше места до края окна (--float-room) ── */
.ch-range { width: min(20rem, calc(100vw - 2 * var(--space-4))); max-height: var(--float-room, none); }
.ch-range__body { display: grid; gap: var(--space-3); padding: var(--space-1) var(--space-2) var(--space-2); }
.ch-range__fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-3); row-gap: var(--space-1); }
.ch-range__fields > .ch-field__error { grid-column: 1 / -1; }
.ch-range .ch-field.is-picking > .ch-input:not([aria-invalid="true"]) { border-color: var(--ink-muted); }

/* ── Календарь: месяц и год — списками, так годы назад — два выбора, а не десятки нажатий; стрелки — соседние месяцы.
      Неделя — строка таблицы (role=grid), недель всегда шесть, пустые — в конце. Дни — тихие кнопки; сегодня — в рамке; дни после сегодня тише и не нажимаются.
      Концы выбранного — заливкой акцентом (выбор человека, как включённая радиокнопка), дни между ними — его оттенком,
      полосой без щелей, скруглённой у концов и у краёв недели. Клавиатура: стрелки — день и неделя, Home и End — начало
      и конец недели, PageUp и PageDown — месяц, с Shift — год; Enter и пробел выбирают ── */
.ch-cal { display: grid; gap: var(--space-2); }
.ch-cal__head { display: flex; align-items: center; gap: var(--space-1); }
.ch-cal__month { flex: 1 1 0; min-width: 0; }
.ch-cal__year { flex: none; }
.ch-cal__head .ch-select > select { padding-left: var(--space-2); padding-right: calc(var(--space-2) + var(--icon-sm) + var(--space-1)); }
.ch-cal__head .ch-select > .ch-icon { right: var(--space-2); }
.ch-cal__grid { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0 var(--space-1); margin-block: calc(var(--space-1) * -1); }
.ch-cal__grid th { padding: 0; font: 400 var(--text-meta)/var(--leading-meta) var(--font-ui); color: var(--ink-faint); text-align: center; }
/* Сетка — всегда шесть недель; пустая неделя держит высоту дня, так что панель не меняет высоту с месяцем */
.ch-cal__grid td { padding: 0; height: var(--control); }
.ch-cal__day {
  display: grid; place-items: center; width: 100%; height: var(--control); padding: 0;
  border: var(--hairline) solid transparent; border-radius: var(--radius); background: none; cursor: pointer;
  font: 400 var(--text-ui)/1 var(--font-ui); color: var(--ink); font-variant-numeric: tabular-nums;
}
.ch-cal__day:hover { background: var(--wash); }
.ch-cal__day[aria-current="date"] { border-color: var(--line-control); font-weight: 500; }
.ch-cal__day:disabled, .ch-cal__day:disabled:hover { color: var(--ink-faint); background: none; cursor: default; }
.ch-cal__grid td.is-in { background: var(--accent-tint); }
.ch-cal__grid td:is(.is-in:first-child, .is-start) { border-start-start-radius: var(--radius); border-end-start-radius: var(--radius); }
.ch-cal__grid td:is(.is-in:last-child, .is-end) { border-start-end-radius: var(--radius); border-end-end-radius: var(--radius); }
.ch-cal__grid td:is(.is-start, .is-end) > .ch-cal__day { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.ch-cal__grid td:is(.is-start, .is-end) > .ch-cal__day:hover { background: color-mix(in srgb, var(--accent) 85%, var(--ink)); }

/* ── Грунты — вне продукта (data-ground, tokens.css): сайт и лендинги, карточка для соцсетей и слайд, шапка письма Химеры
      о себе. Блок на грунте сам берёт его фон и чернила — поле от края до края, не карточка и не панель. Золото (--highlight)
      отмечает в вещи не больше двух вещей, и различаются они формой: то, на чём она держится (цифра вместе с частью
      рисунка, которую она заполняет, и одной подписью или отметкой шкалы; один предмет графика; одно повторяемое слово —
      это слова и рисунок страницы, а не компонент), и её одно действие — основная кнопка, золотая
      со словами цветом грунта, или ссылка-действие, подчёркнутая золотом. Основная кнопка одна на экран — и золотое действие
      одно. Любая другая ссылка — бумагой, подчёркнутая цветом обводки: на поле ссылку цветом не отличить ── */
:is([data-ground="band"], [data-ground="poster"], [data-ground="statement"]) { background: var(--ground); color: var(--ink); }
/* Золотая кнопка: наведение — золото на 55% в бумагу (слова 11.48 / 13.57 / 11.45 : 1), нажатие — на 85% в грунт
   (7.38 / 8.57 / 7.41 : 1); фокус — кольцо бумагой, как на всём грунте */
:is([data-ground="band"], [data-ground="poster"], [data-ground="statement"]) .ch-btn--primary { background: var(--highlight); border-color: var(--highlight); color: var(--on-highlight); }
:is([data-ground="band"], [data-ground="poster"], [data-ground="statement"]) .ch-btn--primary:not(:disabled, [aria-disabled="true"], [aria-busy="true"]):hover { background: color-mix(in srgb, var(--highlight) 55%, var(--ink)); border-color: color-mix(in srgb, var(--highlight) 55%, var(--ink)); }
:is([data-ground="band"], [data-ground="poster"], [data-ground="statement"]) .ch-btn--primary:not(:disabled, [aria-disabled="true"], [aria-busy="true"]):active { background: color-mix(in srgb, var(--highlight) 85%, var(--ground)); border-color: color-mix(in srgb, var(--highlight) 85%, var(--ground)); }
/* Недоступная или придержанная золотая кнопка золото теряет: золото — действие, которое можно сделать сейчас. Она — как
   недоступная кнопка продукта: без заливки, слова --ink-faint, обводка --line-control. Занятая (aria-busy) остаётся золотой —
   действие идёт, — но не отвечает указателю */
:is([data-ground="band"], [data-ground="poster"], [data-ground="statement"]) .ch-btn--primary:is(:disabled, [aria-disabled="true"]), :is([data-ground="band"], [data-ground="poster"], [data-ground="statement"]) .ch-btn--primary:is(:disabled, [aria-disabled="true"]):hover { background: transparent; border-color: var(--line-control); color: var(--ink-faint); cursor: default; }
/* Занятая золотая остаётся золотой и тогда, когда она ещё и недоступна (busy() ставит disabled); слово и крутилка — цветом грунта */
:is([data-ground="band"], [data-ground="poster"], [data-ground="statement"]) .ch-btn--primary[aria-busy="true"], :is([data-ground="band"], [data-ground="poster"], [data-ground="statement"]) .ch-btn--primary[aria-busy="true"]:hover { background: var(--highlight); border-color: var(--highlight); color: var(--on-highlight); cursor: progress; }
:is([data-ground="band"], [data-ground="poster"], [data-ground="statement"]) .ch-btn--primary[aria-busy="true"] .ch-spinner { border-color: color-mix(in srgb, var(--on-highlight) 35%, transparent); border-top-color: var(--on-highlight); }
:is([data-ground="band"], [data-ground="poster"], [data-ground="statement"]) .ch-link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-control); text-underline-offset: 4px; }
:is([data-ground="band"], [data-ground="poster"], [data-ground="statement"]) .ch-link:hover { color: var(--ink); text-decoration-color: currentColor; }
/* Недоступная ссылка — без черты: черта на грунте говорит «нажми» */
:is([data-ground="band"], [data-ground="poster"], [data-ground="statement"]) .ch-link[aria-disabled="true"], :is([data-ground="band"], [data-ground="poster"], [data-ground="statement"]) .ch-link[aria-disabled="true"]:hover { color: var(--ink-faint); text-decoration: none; }
/* Ссылка-действие вещи: слова бумагой, черта золотом в 2px; под указателем черта — бумагой. Её стрелка — бумагой, как слова:
   значок золота не берёт. Вне грунта класс ничего не меняет — это обычная ch-link */
:is([data-ground="band"], [data-ground="poster"], [data-ground="statement"]) .ch-link--action { font-weight: 500; text-decoration-color: var(--highlight); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
:is([data-ground="band"], [data-ground="poster"], [data-ground="statement"]) .ch-link--action:hover { text-decoration-color: var(--ink); }
:is([data-ground="band"], [data-ground="poster"], [data-ground="statement"]) .ch-link--action .ch-icon { color: var(--ink); }
/* Свой сайт на графике — один предмет графика: на грунте золотом, а не акцентом (акцент здесь — бумага). Его называет и
   подпись — ch-tile--you и имя полужирным; золото — второй знак, по светлоте оно близко к chart-notable */
:is([data-ground="band"], [data-ground="poster"], [data-ground="statement"]) .ch-bars__row:has(.ch-tile--you) .m-notable { background: var(--highlight); }
:is([data-ground="band"], [data-ground="poster"], [data-ground="statement"]) .ch-bars__row:has(.ch-tile--you) .m-routine { background: color-mix(in srgb, var(--highlight) 40%, var(--ground)); }
/* Свечение за главной цифрой — только на poster: блок, что держит цифру (или сам плакат, где цифра в его середине), берёт
   ch-glow; эллипс светлее грунта синего (--glow) уходит в грунт. Единственный градиент вне графиков; на band и statement,
   как и где-либо ещё, класс ничего не рисует */
[data-ground="poster"].ch-glow, [data-ground="poster"] .ch-glow { background-image: radial-gradient(ellipse 60% 55% at 50% 52%, var(--glow) 0%, transparent 70%); }

/* ── Движение ───────────────────────────────────────────── */
@keyframes ch-pulse { 50% { opacity: .3; } }
@keyframes ch-arrive { from { opacity: 0; transform: translateY(0.375rem); } }
@keyframes ch-spin { to { transform: rotate(360deg); } }
@keyframes ch-slide { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
.ch-arrive { animation: ch-arrive .45s var(--ease) both; }
/* Реплика, которая ещё не пришла: место занято, чтобы разговор не прыгал */
[data-step].is-hidden { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ═══ digest.css ═══ */
/* Дайджест: рейка | разговор на всю ширину по центру холста. Повторяющееся — в components.css. */

/* Липкое поле ответа не должно закрывать элемент в фокусе и новую реплику; высоту поля со статусом считает digest.js */
html:has(.dg) { height: auto; min-height: 100%; }
html:has(.dg__ask) { scroll-padding-bottom: calc(var(--ask-h, 6.25rem) + var(--space-4)); }
html:has(.dg) body { height: auto; min-height: 100%; }

/* Колонка разговора: digest по центру, между ходами — space-8, внутри хода — space-4 */
.dg { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dg__thread, .dg__ask { width: min(100% - 2 * var(--space-8), var(--digest)); margin-inline: auto; }
.dg__thread { flex: 1; display: grid; align-content: start; gap: var(--space-8); padding-block: var(--space-12) var(--space-8); }
.dg__turn { display: grid; gap: var(--space-4); }
.dg__turn > .ch-actions { margin-top: var(--space-2); }

/* Ответ Химере прилипает к низу экрана */
.dg__ask { position: sticky; bottom: 0; z-index: 5; display: grid; gap: var(--space-2); padding: var(--space-4) 0 var(--space-6); background: var(--canvas); }

/* Убеждения в рассказе: строка-раскрывашка в ритме ch-belief; формулировка, опоры и переход к документу внутри */
.dg-belief { padding: var(--space-4) 0; display: grid; gap: var(--space-2); }
.dg-belief > summary { display: grid; grid-template-columns: 0.75rem minmax(0, 1fr) auto; column-gap: var(--space-3); row-gap: var(--space-1); align-items: baseline; }
.dg-belief > summary .ch-mark { align-self: start; margin-top: calc((var(--leading-ui) - 0.75rem) / 2); }
.dg-belief__title { font: 500 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink); }
.dg-belief > summary:hover .dg-belief__title { text-decoration: underline; text-decoration-color: var(--line-control); text-underline-offset: 4px; }
.dg-belief[data-status="replaced"] .dg-belief__title { text-decoration: line-through; color: var(--ink-faint); }
.dg-belief__side { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink-muted); }
.dg-belief > summary .dg-belief__meta { grid-column: 2 / -1; }
.dg-belief__body { display: grid; gap: var(--space-3); padding-left: calc(0.75rem + var(--space-3)); padding-top: var(--space-1); }
.dg-belief__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-6); }
.dg-belief__evidence { width: 100%; }
.dg-belief__evidence .ch-list, .dg-belief__evidence > .ch-failing { margin-top: var(--space-2); }
/* Находка против убеждения — под словами Скаута, до «Based on» и «Open»: факт, который оспорили, или подтверждение, которое Скаут снял */
.dg-belief__against { display: grid; gap: var(--space-2); }

/* ═══ findings.css ═══ */
/* Страница находок: рейка | лента и сводка на бумаге. Повторяющееся — в components.css. */

/* Липкие шапка и поле вопроса не должны закрывать элемент в фокусе */
html:has(.fd) { height: auto; min-height: 100%; scroll-padding-top: calc(var(--head-h, 8rem) + var(--space-2)); }
html:has(.fd__ask) { scroll-padding-bottom: calc(var(--composer) + var(--space-18)); }
html:has(.fd) body { height: auto; min-height: 100%; background: var(--paper); }

/* Все ширины — доли: поля страницы, колонки и щель между ними растут и сжимаются вместе с окном */
.fd { flex: 1; min-width: 0; background: var(--paper); padding: 0 var(--page-pad); container-type: inline-size; }
.fd > * { max-width: var(--page); margin-inline: auto; }

/* Шапка прилипает: фильтры всегда под рукой */
.fd__head {
  position: sticky; top: 0; z-index: 10;
  display: grid; gap: var(--space-4);
  padding: var(--space-8) 0 var(--space-3);
  background: var(--paper); border-bottom: var(--hairline) solid var(--line);
}
/* Отрицательные поля по краям выравнивают первый переключатель и шеврон периода с краями шапки;
   между соседями везде 24px: поле одного + поле или отступ другого */
.fd__toolbar { display: flex; flex-wrap: wrap; align-items: center; row-gap: var(--space-2); margin-inline: calc(var(--space-3) * -1); }
.fd__toolbar > .ch-switch { margin-inline: var(--space-3); }
.fd__toolbar-end { margin-left: auto; }
/* Вкладки раздела (страницы одного раздела: Overview, Questions, App check, Plan у видимости) в шапке рабочего списка — те же, что
   под шапкой документа (fp__head, затем ch-tabs, как у конкурента): под заголовком через 24, за волосяной линией, подпись — в 16
   под ней, своя линия снизу; инструменты — за ними. Переходя со страницы-документа раздела на его рабочий список, вкладки
   выглядят одними, а не вторыми, теснее и без линии */
.fd__head > .ch-tabs { margin-top: var(--space-2); border-top: var(--hairline) solid var(--line); }
.fd__count:not(:empty)::before { content: "· "; }
/* Выбранные фильтры — как активный поиск: кнопка и счётчик акцентом, отфильтрованную ленту не пропустить */
.ch-btn:has(.fd__count:not(:empty)), .fd__count:not(:empty) { color: var(--accent); }
.fd__chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
/* Высота — не больше места до края окна, если его называет скрипт, который ставит панель (--float-room): на телефоне шапка
   уходит со страницей, кнопка стоит ниже, и подвал с «Clear filters» иначе открывался бы за краем экрана */
.fd__filter { width: max-content; max-width: calc(100vw - 2 * var(--space-4)); max-height: min(37.5rem, calc(100vh - 10rem), var(--float-room, 100vh)); }
/* Группы фильтра — каждая своей высоты: короткая (Sites) не растягивает строки длинной (Types) до общей высоты колонки */
.fd__filter-cols { display: grid; grid-template-columns: max-content max-content; column-gap: var(--space-6); align-items: start; }
/* Подвал длинной панели фильтра — всегда на виду: «Clear filters» не уезжает за список */
.fd__filter > .ch-menu__foot { position: sticky; bottom: calc(var(--space-2) * -1); background: var(--paper); }

/* Две колонки с общей верхней линией: лента чуть шире статистики (11 : 10), чтобы карточкам находок было свободнее */
.fd__cols { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 10fr); column-gap: var(--cols-gap); align-items: start; padding-top: var(--space-6); }
.fd__feed { min-width: 0; display: grid; align-content: start; }
.fd__aside { display: grid; gap: var(--space-12); padding: 0 0 var(--space-18); min-width: 0; }
.fd__chart-foot { display: grid; gap: var(--space-2); justify-items: start; }

.fd__more { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) 0 0; margin: 0; }
.fd__note { margin: 0; font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink-muted); }
.fd__note { padding-top: var(--space-2); }

/* Вопрос Химере прилипает к низу ленты */
.fd__ask { position: sticky; bottom: 0; z-index: 5; display: grid; gap: var(--space-2); margin-top: var(--space-8); padding: var(--space-4) 0 var(--space-6); background: var(--paper); }

/* Находка, отмеченная как шум, остаётся в ленте приглушённой */
.ch-finding.is-noise { opacity: .45; }

/* ── Модалка находки: слева что изменилось и почему это важно, справа скриншот страницы; на узком окне скриншот сверху ── */
.fd-modal__site { display: inline-flex; align-items: center; gap: var(--space-2); font: 500 var(--text-ui)/var(--leading-ui) var(--font-ui); }
.fd-modal__date { margin-left: auto; }
/* Окно со скриншотом шире общего (1232 против 1120): тексту колонка вровень со скриншотом, а скриншот не теряет ширины */
.ch-modal:has(.fd-modal:not(.fd-modal--text)) { --modal: min(92vw, 77rem); }
/* Окно одних слов (без скриншота, рутина) — по их колонке: строка чтения и поля окна по 20 (нижний предел --modal-pad),
   без пустой полосы справа */
.ch-modal:has(.fd-modal--text) { --modal: min(92vw, calc(var(--measure) + 2.5rem)); }
.fd-modal { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--cols-gap); align-items: start; }
.fd-modal__text { display: grid; gap: var(--space-6); }
.fd-modal__counts { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; font: 400 var(--text-label)/var(--leading-label) var(--font-ui); color: var(--ink-muted); }
.fd-modal__counts .ch-meta { margin-top: var(--space-1); }
/* Счётчики сразу под прозой — на шаг ближе к ней */
.ch-voice + .fd-modal__counts { margin-top: calc(var(--space-2) * -1); }
.fd-modal__shot { margin: 0; display: grid; gap: var(--space-2); }
.fd-modal__shot figcaption { display: flex; justify-content: space-between; gap: var(--space-4); }
/* Когда снято — одной строкой у правого края; подпись без снимка — одна причина словами — переносится */
.fd-modal__shot figcaption > :last-child:not(:first-child) { flex: none; white-space: nowrap; }
.fd-modal__shot figcaption > span { text-wrap: pretty; }
.fd-modal a { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.fd-modal a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-control); text-underline-offset: 4px; }
/* Рутина — без скриншота: одна колонка шириной в строку чтения */
.fd-modal--text { grid-template-columns: minmax(0, var(--measure)); }
@media (max-width: 760px) {
  .fd-modal { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-6); }
  .fd-modal__shot { order: -1; }
}

/* Узкие ноутбуки: равным колонкам тесно, лента забирает долю у статистики (3 : 2); совсем узко — одна колонка.
   Считаем по ширине бумаги, а не окна, поэтому раскрытая рейка тоже учитывается */
@container (max-width: 62.5rem) {
  .fd__cols { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}
@container (max-width: 52.5rem) {
  .fd__cols { grid-template-columns: minmax(0, 1fr); }
  .fd__aside { max-width: var(--measure); padding-top: var(--space-4); }
}
@media (max-width: 760px) {
  .fd__toolbar-end { margin-left: 0; }
  /* На телефоне шапка с фильтрами уходит вместе со страницей: прилипшая, она занимала бы треть экрана над лентой.
     Наверху остаётся только полоса приложения — под неё и прилипает шапка таблицы, и не прячется элемент в фокусе */
  .fd__head { position: static; }
  html:has(.fd) { scroll-padding-top: calc(var(--topbar) + var(--space-2)); }
  .fd .ch-table--sticky thead th { top: var(--topbar); }
  /* Фильтр в одну колонку: две колонки шире телефона, а панель не прокручивается вбок */
  .fd__filter-cols { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-2); }
}

/* Событие убеждения в ленте: что насчитало правило Скаута — строкой под заголовком, столбец времени держит только час */
.fd-fact__basis { display: block; margin-top: var(--space-1); }

/* ═══ finding.css ═══ */
/* Страница находки: рейка | документ на бумаге. Слева — что изменилось и что это значит для продукта, справа — скриншот и подробности.
   Повторяющееся — в components.css. */

html:has(.fp) { height: auto; min-height: 100%; }
html:has(.fp) body { height: auto; min-height: 100%; background: var(--paper); }

/* Ширины — доли окна с пределами, как на ленте находок */
.fp { flex: 1; min-width: 0; padding: var(--space-8) var(--page-pad) var(--space-18); container-type: inline-size; }
.fp > * { max-width: var(--page); margin-inline: auto; }

.fp__head { display: grid; gap: var(--space-3); padding-bottom: var(--space-6); border-bottom: var(--hairline) solid var(--line); }
.fp__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-8); }
.fp__top .ch-actions { flex: none; flex-wrap: nowrap; }
.fp__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.fp__site { display: inline-flex; align-items: center; gap: var(--space-2); font: 500 var(--text-ui)/var(--leading-ui) var(--font-ui); }

.fp__cols { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 10fr); column-gap: var(--cols-gap); align-items: start; padding-top: var(--space-8); }
/* Текст — в строку чтения, даже если колонка шире */
.fp__main { display: grid; gap: var(--space-12); min-width: 0; }
.fp__main > * { max-width: var(--measure); }
.fp__side { display: grid; gap: var(--space-8); min-width: 0; }
/* Часть, которой можно шире строки чтения, — широкая таблица, пара графиков; в широком разделе слова остаются в строке чтения */
.fp__main > .fp-wide { max-width: none; }
.fp__main > .fp-section.fp-wide > * { max-width: var(--measure); }
.fp__main > .fp-section.fp-wide > :is(h2, .fp-wide, .ch-table-wrap) { max-width: none; }

/* Разделы: заголовок 18/28 чернилами — крупнее голоса под ним; пояснения — тише, интерфейсным шрифтом */
/* Один столбец во всю ширину раздела: ни таблица, которая не переносится, ни длинное слово не раздвигают раздел и слова рядом
   с собой (столбец auto брал ширину самой широкой части — досье Deel 09.10 растянуло прочтение Scout на 1405px) */
.fp-section { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.fp-section > h2 { margin: 0; font: 500 var(--text-heading)/var(--leading-heading) var(--font-ui); color: var(--ink); }
.fp-section .ch-day { padding: 0; }
/* Пустота — весь текст раздела: стоит под заголовком на его шаге, без своих полей */
.fp-section > .ch-empty { padding-block: 0; }
.fp-sub { margin: 0; font: 500 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink); }
.fp-note { margin: 0; font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink-muted); }
/* Число, которое отвечает на вопрос раздела (оценка Scout — диапазон): одно в своей строке, размером заголовка раздела, единица —
   тише; факты о нём — строкой меты под ним (p.ch-meta.ch-facts из components.css), каждый факт целиком и с точкой после себя:
   строка не начинается с «·», факт длиннее строки (длинное имя рекламодателя на телефоне) переносится внутри себя. За ним —
   рассуждение, потом доказательства */
.fp-figure { display: grid; gap: var(--space-1); margin: 0 0 var(--space-2); }
.fp-figure__value { margin: 0; font: 400 var(--text-heading)/var(--leading-heading) var(--font-ui); color: var(--ink-muted); }
.fp-figure__value b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Изменения по страницам сайта: путь мелко над абзацами */
.fp-page { display: grid; gap: var(--space-2); }
.fp-page + .fp-page { margin-top: var(--space-4); }

/* Дифф текста — без цвета: зелёный и красный в системе заняты. Удалённое зачёркнуто и приглушено, добавленное — чернилами */
.fp-diff > li { display: grid; grid-template-columns: 1rem minmax(0, 1fr); column-gap: var(--space-2); padding: var(--space-2) 0; font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink); }
.fp-diff__op { color: var(--ink-faint); text-align: center; }
.fp-diff > li[data-op="-"] .fp-diff__text { color: var(--ink-faint); text-decoration: line-through; }

/* Счётчики Скаута — как в модалке */
.fp-counts { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; font: 400 var(--text-label)/var(--leading-label) var(--font-ui); color: var(--ink-muted); }
.fp-counts .ch-meta { margin-top: var(--space-1); }

/* Ход работы: время, кто, что сделал, сколько стоило */
.fp-activity > li {
  display: grid; grid-template-columns: max-content var(--icon-sm) minmax(0, 1fr) max-content; align-items: baseline; column-gap: var(--space-3);
  padding: var(--space-2) 0; font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink);
}
.fp-activity .ch-icon { width: var(--icon-sm); height: var(--icon-sm); align-self: center; color: var(--ink-muted); }
/* Ссылка в словах строки («Filed in Deel: payroll in Japan») — строчная, как в Details: переносится вместе со словами */
.fp-activity .ch-link { display: inline; }
.fp-spend b { font-weight: 500; color: var(--ink); }

/* Справа: скриншот страницы после изменения и подробности */
.fp-shot { margin: 0; display: grid; gap: var(--space-2); }
.fp-shot figcaption { text-wrap: pretty; }
.fp-details { margin: 0; }
.fp-details > div { display: grid; grid-template-columns: minmax(6rem, 30%) minmax(0, 1fr); column-gap: var(--space-4); padding: var(--space-3) 0; border-bottom: var(--hairline) solid var(--line); font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); }
.fp-details dt { color: var(--ink-muted); }
.fp-details dd { margin: 0; min-width: 0; color: var(--ink); overflow-wrap: anywhere; }
.fp-details .ch-link { display: inline; }
/* Вторая строка значения — между какими днями, заметка к факту: под ним, метой */
.fp-details__sub { display: block; margin-top: var(--space-1); }
.fp-details .ch-link .ch-icon { vertical-align: -0.125rem; margin-left: var(--space-1); }
.fp-nowrap { white-space: nowrap; }
.fp-cases { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* Чип дела — одной строкой: длинное имя режет многоточие, чип не шире строки; дело в архиве — словом после имени */
.fp-case {
  display: inline-flex; align-items: center; gap: var(--space-2); max-width: 100%; height: 1.625rem; padding: 0 var(--space-1) 0 var(--space-2);
  border: var(--hairline) solid var(--line-control); border-radius: var(--radius); font: 400 var(--text-label)/var(--leading-label) var(--font-ui); color: var(--ink);
}
.fp-case > :is(a, span:not([class])) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-case > .ch-meta { flex: none; }
.fp-case > .ch-icon { width: var(--icon-sm); height: var(--icon-sm); color: var(--ink-muted); }
.fp-case > .ch-tile { width: var(--icon-sm); height: var(--icon-sm); }
.fp-case > a { color: inherit; text-decoration: none; }
.fp-case > a:hover { text-decoration: underline; text-decoration-color: var(--line-control); text-underline-offset: 4px; }
.fp-case button { flex: none; display: grid; place-items: center; width: 1.125rem; height: 1.125rem; padding: 0; border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink-muted); cursor: pointer; }
.fp-case button:hover { color: var(--ink); }
.fp-case button .ch-icon { width: var(--icon-sm); height: var(--icon-sm); }

/* История компании на странице находки реестра: перемена, о которой есть находка, — ссылкой чернилами, как изменение в ленте
   конкурента; рутина и то, что старше года, — тише */
.fp-history__finding { color: var(--ink); text-decoration: none; }
.fp-history__finding:hover { text-decoration: underline; text-decoration-color: var(--line-control); text-underline-offset: 4px; }
.fp-history__routine { color: var(--ink-muted); }

/* Узкое окно: одна колонка, скриншот и подробности — над текстом */
@container (max-width: 52.5rem) {
  .fp__cols { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-12); }
  .fp__side { order: -1; max-width: var(--measure); }
  /* Документ, где ведёт текст (настройки, расходы, агент, вопрос): сторона — после него, порядок чтения тот же, что на широком */
  .fp--main-first .fp__side { order: 0; }
}
/* Телефон: кнопки уходят под заголовок и переносятся рядом, если обе в строку не встают (крупный размер, русские слова) */
@media (max-width: 760px) {
  .fp__top { flex-direction: column; gap: var(--space-4); }
  .fp__top .ch-actions { flex-wrap: wrap; }
}

/* ═══ cases.css ═══ */
/* Страница дел. Каркас — из findings.css: липкая шапка с фильтрами, лента и сводка в две колонки, панель прототипа.
   Здесь — только то, чего у находок нет: шапка с «New case», дело в ленте, пояснение справа. */

.cs-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }

/* Лента дел начинается сразу под линией шапки — своя верхняя линия списка была бы второй */
.cs-list { border-top: 0; }

/* Дело: значок | название и дата, вывод Скаута, внизу последняя находка или кто сдвинулся — и «Open».
   Без заливки и цвета бренда: цвет в ленте дают только фавиконы. Как находка, дело кликабельно целиком (ch-clickable) */
.cs-case { display: grid; grid-template-columns: 1.125rem minmax(0, 1fr); column-gap: var(--space-3); padding: var(--space-4) 0; }
.cs-case:hover .cs-case__open { text-decoration: underline; text-underline-offset: 4px; }
/* Значок — по первой строке названия: фавикон конкурента или «люди» у дела по рынку */
.cs-case > .ch-tile, .cs-case > .ch-icon { margin-top: calc((var(--leading-body) - 1.125rem) / 2); }
.cs-case > .ch-icon { width: 1.125rem; height: 1.125rem; color: var(--ink-muted); }

.cs-case__body { display: grid; gap: var(--space-2); min-width: 0; }
.cs-case__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
/* Название дела короткое, поэтому на ступень крупнее заголовка находки: оно держит всю карточку */
.cs-case__title { margin: 0; font: 500 var(--text-body)/var(--leading-body) var(--font-ui); color: var(--ink); text-wrap: pretty; }
.cs-case__when { white-space: nowrap; }
/* Вывод Скаута — голосом, мельче названия, целиком: это его текущее прочтение дела, обрезать нельзя */
.cs-case__brief { max-width: var(--measure); font-size: var(--text-voice-sm); line-height: var(--leading-voice-sm); margin-bottom: var(--space-2); }

/* Низ: слева последняя находка или кто сдвинулся, справа «Open» по нижней строке */
.cs-case__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); }
.cs-case__foot > div { display: grid; gap: var(--space-1); min-width: 0; }
.cs-case__latest { font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink-muted); }
a.cs-case__latest { text-decoration: none; }
a.cs-case__latest:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-control); text-underline-offset: 4px; }
.cs-case__open { flex: none; }

/* Кто сдвинулся по рынку — по порядку: значок, имя, дата */
.cs-movers { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0; padding: 0; list-style: none; }
.cs-movers > li { display: inline-flex; align-items: center; gap: var(--space-2); font: 400 var(--text-label)/var(--leading-label) var(--font-ui); color: var(--ink); white-space: nowrap; }
.cs-movers .ch-tile { width: 1rem; height: 1rem; }

/* Как устроены дела — пояснение интерфейсным шрифтом, тише графиков; числа под ним */
.cs-how { gap: var(--space-3); }
.cs-how > p { margin: 0; max-width: var(--measure); font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink-muted); }
.cs-how > .ch-stats { margin-top: var(--space-3); }

/* ═══ case.css ═══ */
/* Страница дела. Каркас документа — из finding.css: шапка с крошками и действиями, две колонки, разделы 18/28, подробности.
   Здесь — бриф по утверждениям, находки под ними, кто сдвинулся и вопрос Скауту. */

.cp-col { display: grid; min-width: 0; }

/* Утверждение брифа — голосом Скаута; число находок под ним раскрывает их списком прямо под абзацем */
.cp-claims { display: grid; gap: var(--space-6); }
.cp-claim { display: grid; gap: var(--space-2); }
.cp-claim > .ch-link { justify-self: start; }
.cp-claim > .ch-voice--quiet { color: var(--ink-muted); }

/* «Show all» в списке всех находок дела — под последней строкой */
.cp-more { display: flex; align-items: center; gap: var(--space-4); padding-top: var(--space-3); margin: 0; }

/* Справа: кто сдвинулся по порядку — имя слева, дата справа */
.cp-movers > li { display: grid; grid-template-columns: 1.125rem minmax(0, 1fr) auto; column-gap: var(--space-3); align-items: center; padding: var(--space-2) 0; font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink); }
.cp-movers .ch-meta { white-space: nowrap; }

/* Списки стороны, где строка — ссылка на страницу (убеждения, вопросы Скауту): строка интерфейсным шрифтом, заголовок
   строки подчёркивается тонкой линией при наведении */
.cp-beliefs > li > a, .cp-asked > li > a { display: grid; column-gap: var(--space-3); padding: var(--space-3) 0; font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink); text-decoration: none; }
.cp-beliefs > li > a:hover > span:nth-child(2), .cp-asked > li > a:hover > .cp-asked__title { text-decoration: underline; text-decoration-color: var(--line-control); text-underline-offset: 4px; }

/* Убеждения, которые питает дело: знак статуса, формулировка и под ней статус словом с датой; строка ведёт к убеждению.
   Статус — под формулировкой, а не справа: у факта он говорит, кто подтвердил, а у подтверждения Скаута ещё и что насчитало
   правило («confirmed by Scout since Oct 22 · 63 findings from 12 competitors over 3 months») — в столбце стороны справа ему тесно */
.cp-beliefs > li > a { grid-template-columns: 0.75rem minmax(0, 1fr); row-gap: var(--space-1); align-items: baseline; }
.cp-beliefs .ch-mark { align-self: start; margin-top: calc((var(--leading-ui) - 0.75rem) / 2); }
.cp-beliefs .ch-meta { grid-column: 2; }
.cp-beliefs > li[data-status="replaced"] > a > span:nth-child(2) { text-decoration: line-through; color: var(--ink-faint); }
.cp-beliefs > li[data-status="replaced"] .ch-mark { color: var(--ink-faint); }

/* Вопросы Скауту: строка ведёт на страницу вопроса — слова человека строкой списка (ui 14, как убеждения рядом; body 15 — в разговоре),
   под ними мета рядом фактов (ch-metarow): кто и когда спросил, сколько раз ответил Скаут и статус словами страницы вопроса.
   Факты переносятся между собой; внутри себя — только факт длиннее строки.
   Слова вопроса — не больше двух строк, дальше многоточие, на любой ширине: обрезка только видимая, слова целиком остаются
   в разметке (имя ссылки для читалки), целиком вопрос — на его странице */
.cp-asked > li > a { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-1); }
.cp-asked__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-wrap: pretty; }

/* Вопрос Скауту прилипает к низу колонки брифа; элемент в фокусе не уходит под него (--ask-h — высота поля со статусом, если её меряет скрипт).
   У дела в архиве поля нет (hidden) — и запаса под ним нет */
html:has(.cp-ask:not([hidden])) { scroll-padding-bottom: calc(var(--ask-h, calc(var(--composer) + var(--leading-meta) + var(--space-12))) + var(--space-4)); }
.cp-ask { position: sticky; bottom: 0; z-index: 5; display: grid; gap: var(--space-2); max-width: var(--measure); margin-top: var(--space-12); padding: var(--space-4) 0 var(--space-6); background: var(--paper); }

/* Подпись «Scout» в строке над брифом и значок дела по рынку в шапке */
.cp-by b { font-weight: 500; color: var(--ink); }
.fp__site > .ch-icon { width: 1.125rem; height: 1.125rem; color: var(--ink-muted); }

/* ═══ beliefs.css ═══ */
/* Убеждения Скаута: список с подробностями и доска по статусам. Каркас — из findings.css: липкая шапка с фильтрами, панель прототипа.
   Статус — монохромный знак и слово, как везде: ○ гипотеза, ◐ подтверждено, ● подтверждено вами, ⊘ заменено. Цвета статусам не даём. */

/* Переключатель вида «List · Board» — общий выбор словами (ch-segmented) */

/* «Worth acting on» — совет Скаута: знак и слово чернилами, как важность находки */
.bl-act { display: inline-flex; align-items: center; gap: var(--space-1); font: 500 var(--text-label)/var(--leading-label) var(--font-ui); color: var(--ink); white-space: nowrap; }
.bl-act .ch-icon { width: var(--icon-sm); height: var(--icon-sm); }

/* ── Список: убеждения | выбранное целиком ── */
.bl-split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: var(--cols-gap); align-items: start; padding: var(--space-6) 0 var(--space-18); }
.bl-list { min-width: 0; }
.bl-item > button {
  width: 100%; display: grid; grid-template-columns: 0.75rem minmax(0, 1fr); column-gap: var(--space-3); row-gap: var(--space-1);
  padding: var(--space-3) 0; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; color: inherit;
}
.bl-item .ch-mark { margin-top: calc((var(--leading-ui) - 0.75rem) / 2); }
.bl-item__title { font: 500 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink); text-wrap: pretty; }
.bl-item__meta { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); }
/* Строка кликабельна целиком (ch-clickable); выбранная отмечена ещё и полосой акцента слева, как текущий раздел в рейке */
.bl-item[aria-current="true"]::after {
  content: ""; position: absolute; top: var(--space-2); bottom: var(--space-2); left: calc(var(--card-pad) * -1);
  width: 0.125rem; border-radius: 1px; background: var(--accent);
}

/* Выбранное убеждение — документ, как страница находки; прилипает под шапкой и прокручивается сам */
.bl-doc {
  position: sticky; top: calc(var(--head-h, 8rem) + var(--space-6));
  max-height: calc(100vh - var(--head-h, 8rem) - var(--space-12)); overflow: auto; overscroll-behavior: contain;
  display: grid; gap: var(--space-8); align-content: start; min-width: 0; padding-bottom: var(--space-6);
}
.bl-doc > * { max-width: var(--measure); }
.bl-doc__head { display: grid; gap: var(--space-4); padding-bottom: var(--space-6); border-bottom: var(--hairline) solid var(--line); max-width: none; }
.bl-doc__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-6); }
.bl-doc__top .ch-status { flex: none; }
/* Заголовок убеждения — на ступень ниже заголовка страницы: над ним уже стоит «What Scout believes» 24/32.
   Шкала документа: убеждение 18, голос Скаута 16, подписи разделов 13 */
.bl-doc__title { margin: 0; font: 500 var(--text-heading)/var(--leading-heading) var(--font-ui); color: var(--ink); text-wrap: pretty; }
/* Факты одной строкой: кто, когда записано, сколько держится, позиция, на чём стоит. Каждый факт шириной в свои слова,
   остаток строки делится между ними поровну: промежутки между фактами равны, короткий («Settled») не стоит в пустоте,
   имена конкурентов не ломаются по одному. Не помещается — факт целиком уходит на следующую строку, а не переносит
   свои слова («6 findings, / 4 cases»); одному факту шире строки (длинный список конкурентов на телефоне) — перенос внутри */
.bl-facts { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); margin: 0; }
.bl-facts > div { flex: 1 1 auto; display: grid; gap: var(--space-1); min-width: 0; }
.bl-facts dt { font: 400 var(--text-meta)/var(--leading-meta) var(--font-ui); color: var(--ink-faint); }
.bl-facts dd { margin: 0; font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink); }
.bl-sites { display: inline-flex; align-items: center; gap: var(--space-1); }
.bl-facts .bl-sites > span:not(.ch-tile) { margin-left: var(--space-1); }
.bl-nowrap { white-space: nowrap; }
.bl-sites .ch-tile { width: 1rem; height: 1rem; }

/* Разделы — подписями 13, как «Scout · what it means for you» на плитке: подпись тише текста под ней */
.bl-section { display: grid; gap: var(--space-2); }
.bl-label { margin: 0; font: 500 var(--text-label)/var(--leading-label) var(--font-ui); color: var(--ink-muted); }
.bl-label b { font-weight: 500; color: var(--ink); }
.bl-note { margin: 0; font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink-muted); }
.bl-note a:not([class]) { color: inherit; text-decoration: underline; text-decoration-color: var(--line-control); text-underline-offset: 4px; }
/* «What it means for you» — общая плитка Скаута (ch-plate), как «Scout · for your product» у находки */
.bl-cases > li > a { display: grid; grid-template-columns: 1.125rem minmax(0, 1fr) auto; column-gap: var(--space-3); align-items: center; padding: var(--space-3) 0; font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink); text-decoration: none; }
.bl-cases > li > a > .ch-icon { width: 1.125rem; height: 1.125rem; color: var(--ink-muted); }
.bl-cases > li > a:hover > span:nth-child(2) { text-decoration: underline; text-decoration-color: var(--line-control); text-underline-offset: 4px; }

/* ── Доска: три колонки по зрелости; в последней — решённые: подтверждённые вами и заменённые.
      Статус — дорожка цвета холста, убеждения на ней — карточки цвета бумаги: карточку отделяет контраст двух токенов, без тени ── */
.bl-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--cols-gap); align-items: start; padding: var(--space-6) 0 var(--space-18); }
.bl-col { display: grid; gap: var(--space-6); min-width: 0; }
.bl-group { display: grid; padding: var(--space-4) var(--space-3) var(--space-3); background: var(--canvas); border-radius: var(--radius); }
.bl-group__head { display: grid; gap: var(--space-1); padding: 0 var(--space-1) var(--space-4); }
.bl-group__name { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin: 0; font: 500 var(--text-body)/var(--leading-body) var(--font-ui); color: var(--ink); }
.bl-group__name > span:first-child { display: inline-flex; align-items: center; gap: var(--space-2); }
/* Подгруппа внутри дорожки: «Worth acting on» наверху подтверждённых — совет сказан подписью, на карточках не повторяется */
.bl-sub { padding: var(--space-4) var(--space-1) var(--space-2); }
.bl-group__head + .bl-sub { padding-top: 0; }
/* Карточки — без волосяных линий списка, с зазором 8px */
.bl-board .ch-list { display: grid; gap: var(--space-2); border-top: 0; }
.bl-board .ch-list > li { border-bottom: 0; }
.bl-group > .bl-note { padding-inline: var(--space-1); }

/* Карточка: кто, сколько и когда; заголовок. Кликабельна целиком (ch-clickable--card): открывает убеждение в списке,
   при наведении темнеет рамка по её краю */
.bl-card { display: grid; gap: var(--space-1); padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--paper); }
.bl-card__top, .bl-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-width: 0; }
.bl-card__top .bl-sites { min-width: 0; }
.bl-card__top .bl-sites > .ch-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-left: var(--space-1); }
.bl-card__title { margin: 0; }
.bl-card__title > button { padding: 0; border: 0; background: none; text-align: left; cursor: pointer; font: 500 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink); text-wrap: pretty; }
.bl-card__when { flex: none; }
.bl-card__foot { margin-top: var(--space-1); }

/* Узко: список над выбранным не помещается рядом — выбранное сверху, без прилипания; доска — в одну колонку */
@container (max-width: 52.5rem) {
  .bl-split { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-12); }
  .bl-doc { position: static; max-height: none; overflow: visible; order: -1; }
  .bl-board { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-12); }
}

/* Заменённое убеждение остаётся в списках и на доске зачёркнутым и тихим — видна история (RULES → Marks) */
.bl-item[data-status="replaced"] .bl-item__title,
.bl-card[data-status="replaced"] .bl-card__title > button,
.bl-doc[data-status="replaced"] .bl-doc__title { text-decoration: line-through; color: var(--ink-faint); }
.bl-item[data-status="replaced"] .ch-mark, .bl-card[data-status="replaced"] .ch-mark { color: var(--ink-faint); }

/* «Why it is a fact» у подтверждения Скаута: что насчитало правило — словами интерфейса, не голосом: это счёт кода, а не
   рассуждение Скаута (рассуждение — Literata в «What Scout sees» над ним) */
.bl-rule { margin: 0; font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink); text-wrap: pretty; }

/* ═══ competitors.css ═══ */
/* Конкуренты: таблица наблюдения. Каркас — из findings.css: липкая шапка с фильтрами, панель прототипа.
   Цвет в таблице — только фавиконы, акцент у ссылок и своего сайта на полосе, красный — у сайтов, которые Скаут не может прочитать */

/* «Add competitors» стоит у заголовка, пока рядом есть место; тесно (телефон, размер L) — уходит строкой ниже, под счёт,
   а не сжимается в две строки и не выталкивает шапку за край окна */
.cm-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-4) var(--space-6); }
.cm-head > .ch-btn { flex: none; }
.cm-head__title { display: grid; gap: var(--space-1); }
.cm-head__title .ch-meta { margin: 0; font-size: var(--text-ui); line-height: var(--leading-ui); color: var(--ink-muted); }
.cm-head__title .ch-failing { margin-left: var(--space-1); }

.cm-wrap { padding: var(--space-6) 0 var(--space-18); }
/* Таблица — общая ch-table (сортировка, липкая шапка, доли столбцов, подсветка строки); здесь — только своё */
/* Ширины — доли таблицы, а не по содержимому: так у каждого столбца запас под самое длинное значение и нет пустот.
   Самые длинные: «Papaya Global», «usemultiplier.com», «Failing», «Oct 22 · Legal & partners»; полосе находок — больше всех.
   «Pages watched» с местом стрелки сортировки помещается в свою долю одной строкой */
.cm-c-site { width: 15%; }
.cm-c-domain { width: 14%; }
.cm-c-status { width: 9%; }
.cm-c-last { width: 17%; }
.cm-c-findings { width: 18%; }
.cm-c-cases { width: 9%; }
.cm-c-beliefs { width: 7%; }
.cm-c-pages { width: 11%; }
/* Подпись столбца, которой тесно в своей доле («Pages watched» на узком ноутбуке), переносится, а не режется и не выходит за таблицу */
.cm-table thead th, .cm-table thead th > button { white-space: normal; }
/* Свой сайт закреплён сверху и отделён от конкурентов линией потемнее — строка ch-table__you */

/* Конкурент: фавикон и имя; домен — своим столбцом, тише, ведёт на сайт */
.cm-site { display: flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.cm-site__name { font-weight: 500; color: var(--ink); text-decoration: none; }
.cm-site__name:hover { text-decoration: underline; text-decoration-color: var(--line-control); text-underline-offset: 4px; }
.cm-domain { color: var(--ink-muted); text-decoration: none; white-space: nowrap; }
.cm-domain:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-control); text-underline-offset: 4px; }

/* Последнее изменение: дата чернилами, тип тише; ведёт на находку, если она есть в ленте */
.cm-last { color: var(--ink); text-decoration: none; white-space: nowrap; }
.cm-last span { color: var(--ink-muted); }
a.cm-last:hover { text-decoration: underline; text-decoration-color: var(--line-control); text-underline-offset: 4px; }

/* Находки за 30 дней — полоса из двух ступеней, как «Who moved most» на Findings, и число; ведёт в ленту по этому сайту */
.cm-findings { display: flex; align-items: center; gap: var(--space-3); color: var(--ink); text-decoration: none; }
/* Дорожка занимает весь столбец за вычетом числа: самая длинная полоса — во всю ширину, пустот справа нет */
.cm-findings__bar { display: flex; gap: var(--chart-gap); height: var(--bar); flex: 1; min-width: 0; }
.cm-findings > span:last-child { flex: none; min-width: 3ch; text-align: right; }
.cm-findings__bar > span { display: flex; gap: var(--chart-gap); height: 100%; min-width: 0; }
.cm-findings__bar i { display: block; height: 100%; min-width: 0; }
.cm-findings__bar .cm-tight { gap: 0; }
.cm-findings__bar i:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
a.cm-findings:hover span:last-child, a.cm-count:hover { text-decoration: underline; text-underline-offset: 4px; }
.ch-table__you .cm-findings__bar .m-notable { background: var(--accent); }
.ch-table__you .cm-findings__bar .m-routine { background: color-mix(in srgb, var(--accent) 40%, var(--paper)); }
/* Дела и убеждения — числа-ссылки акцентом, как ссылки везде */
.cm-count { color: var(--accent); text-decoration: none; }


/* Узко: таблица прокручивается вбок, а не сжимается; полоса находок короче */
@container (max-width: 60rem) {
  .cm-wrap { overflow-x: auto; }
  .cm-table { min-width: 47.5rem; }
  .cm-table thead th { position: static; }
}

/* ── Окно Add competitors (CHI-1431): форма системы над затемнением. Здесь — только своё: ряд адреса и строки под ним
      (отказ, удержанный Ask Scout) — столбцом с шагом 4, как подсказка под полем; очередь — список, а не таблица: «почему» —
      предложение, а строки предложений — список (RULES), как кандидаты онбординга. Строка: значок; имя (малое поле или слова:
      Your site, имя конкурента у страницы); «убрать» — в конце строки имени; под именем — адрес, который Scout будет читать,
      и почему, во всю ширину до края строки, под «убрать» тоже. В разметке «убрать» — последним: читалка слышит имя, адрес и
      почему, потом кнопку. Почему из подсказки Scout — его голосом, как у кандидатов онбординга; «Added by you…» и строка
      своего сайта — слова системы ── */
/* Один столбец во всю ширину окна: отказ с длинной личной ссылкой не раздвигает форму за край диалога на телефоне */
.cm-add { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
.cm-queue > li { display: grid; grid-template-columns: 1.125rem minmax(0, 1fr) auto; column-gap: var(--space-3); row-gap: var(--space-1); align-items: start; padding: var(--space-3) 0; }
.cm-queue > li > .ch-meta, .cm-queue__why { grid-column: 2 / -1; }
.cm-queue > li > .ch-btn { grid-column: 3; grid-row: 1; }
.cm-queue__name { font-weight: 500; color: var(--ink); }
.cm-queue__why { margin: 0; max-width: var(--measure); color: var(--ink-muted); text-wrap: pretty; }
.cm-queue__why--scout { font: 400 var(--text-voice-sm)/var(--leading-voice-sm) var(--font-voice); }
/* Строка имени — высотой с «убрать», словами (Your site, имя конкурента у страницы) или малым полем: значок, имя и кнопка —
   по её середине. Кнопка не выступает за строку имени на адрес под ней, и строки слов и строки с полем идут одним шагом */
.cm-queue > li > .ch-tile { margin-top: calc((var(--control) - 1.125rem) / 2); }
.cm-queue__name { align-self: center; }

/* ═══ competitor.css ═══ */
/* Досье конкурента. Каркас документа — из finding.css: шапка с крошками и действием, две колонки, разделы 18/28, подробности.
   Здесь — вкладки, лента изменений, найм, таблицы юр. лиц, источников и страниц. Цвет — только фавиконы, акцент у ссылок и выбора,
   красный — у источников, которые Скаут не может прочитать */

.co-title { display: inline-flex; align-items: center; gap: var(--space-3); }
.co-title .ch-tile { width: 1.5rem; height: 1.5rem; }
.co-head .fp__meta a { color: var(--accent); text-decoration: none; }
.co-head .fp__meta a:hover { text-decoration: underline; text-underline-offset: 4px; }

.co-panel { padding-top: var(--space-8); outline: none; }
.co-panel > .fp__cols { padding-top: 0; }
.co-stack { display: grid; gap: var(--space-12); }
.co-stack > * { max-width: var(--measure); }
.co-stack > .fp-wide { max-width: none; }

/* Подпись над разделом и пояснение под ним — тише текста */
.co-intro { margin: 0; max-width: var(--measure); font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink-muted); }
.co-more { margin: 0; padding-top: var(--space-3); }

/* ── Обзор: убеждения о конкуренте — строка на убеждение: знак, заголовок, вывод Скаута голосом, статус и совет ── */
.co-beliefs > li > a {
  display: grid; grid-template-columns: 0.75rem minmax(0, 1fr); column-gap: var(--space-3); row-gap: var(--space-1);
  padding: var(--space-3) 0; color: inherit; text-decoration: none;
}
.co-beliefs .ch-mark { margin-top: calc((var(--leading-ui) - 0.75rem) / 2); }
.co-beliefs__title { font: 500 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink); }
.co-beliefs > li > a:hover .co-beliefs__title { text-decoration: underline; text-decoration-color: var(--line-control); text-underline-offset: 4px; }
/* Заменённое убеждение остаётся в списке зачёркнутым и тихим, как во всех списках убеждений */
.co-beliefs > li[data-status="replaced"] .co-beliefs__title { text-decoration: line-through; color: var(--ink-faint); }
.co-beliefs > li[data-status="replaced"] .ch-mark { color: var(--ink-faint); }
.co-beliefs__sum { grid-column: 2; margin: 0; font: 400 var(--text-voice-sm)/var(--leading-voice-sm) var(--font-voice); color: var(--ink-muted); }
.co-beliefs__meta { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); }
.co-act { display: inline-flex; align-items: center; gap: var(--space-1); font: 500 var(--text-label)/var(--leading-label) var(--font-ui); color: var(--ink); }
.co-act .ch-icon { width: var(--icon-sm); height: var(--icon-sm); }

/* Дела конкурента — строками, а не чипами: имя без повторов «Gusto:» и без фавиконов у каждого */
.co-cases > li > a { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) 0; color: var(--ink); text-decoration: none; font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); }
.co-cases > li > a:hover span:first-child { text-decoration: underline; text-decoration-color: var(--line-control); text-underline-offset: 4px; }
.co-links { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
.co-links a { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--accent); text-decoration: none; }
.co-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.co-links .ch-icon { width: var(--icon-sm); height: var(--icon-sm); }

/* ── Лента изменений: время | что | тип | уровень. Рутина тише, важное — знаком и словом; записи самого Скаута — с его подписью ── */
.co-day { display: flex; align-items: baseline; gap: var(--space-2); margin: 0; padding: var(--space-8) 0 var(--space-3); }
.co-day:first-child { padding-top: 0; }
.co-changes > li {
  display: grid; grid-template-columns: 3rem minmax(0, 1fr) 8.25rem 7rem; column-gap: var(--space-4); align-items: baseline;
  padding: var(--space-3) 0; font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink);
}
.co-changes > li[data-lv="routine"] .co-change__text { color: var(--ink-muted); }
.co-change__text > a { color: inherit; text-decoration: none; }
.co-change__text > a:hover { text-decoration: underline; text-decoration-color: var(--line-control); text-underline-offset: 4px; }
/* «1 text change», «from page history» — одним куском: подпись переносится за текст целиком, а не по слову */
.co-change__text .ch-meta { margin-left: var(--space-2); white-space: nowrap; }
.co-change__scout b { font-weight: 500; }
.co-change__scout a { color: var(--accent); text-decoration: none; }
.co-change__scout a:hover { text-decoration: underline; text-underline-offset: 4px; }
.co-change__note { display: block; margin-top: var(--space-1); color: var(--ink-muted); }
.co-change__type { color: var(--ink-muted); }
.co-change__level { display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap; }
.co-changes .ch-status { font-size: var(--text-label); color: var(--ink-muted); }
/* Слово силы, которому тесно в столбце уровня («Confirmed by Scout», «Confirmed by a colleague»), переносится по пробелам,
   знак — на первой строке: ch-status--wrap из components.css (RULES → Space and layout) */
.co-change__level:has(.ch-status) { white-space: normal; }
.co-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-6); margin-bottom: var(--space-6); }

/* ── Компания: найм — три числа, направления и страны полосами, открытые руководящие роли ── */
.co-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--cols-gap); align-items: start; }
.co-pair .ch-bars__row { grid-template-columns: minmax(7.5rem, 45%) minmax(0, 1fr); }
.co-roles > li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); }
.co-roles a { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--ink); text-decoration: none; }
.co-roles a:hover { text-decoration: underline; text-decoration-color: var(--line-control); text-underline-offset: 4px; }
.co-roles a .ch-icon { width: var(--icon-sm); height: var(--icon-sm); color: var(--ink-muted); }
.co-roles .ch-meta { white-space: nowrap; }

.co-muted { color: var(--ink-muted); }
/* Страница под наблюдением — «Watched» акцентом, без рамки */
.ch-table .ch-btn[aria-pressed="true"] { color: var(--accent); border-color: transparent; }

/* Добавить источник: форма из общих полей раскрывается по кнопке, а не висит над списком; узко — поля одно под другим */
.co-add { grid-template-columns: 9.375rem minmax(0, 1fr) 7.5rem auto; max-width: var(--measure); }
.co-sections { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }

/* Узко: колонки — в одну, ленту изменений — без столбца типа */
@container (max-width: 52.5rem) {
  .co-pair { grid-template-columns: minmax(0, 1fr); }
  .co-changes > li { grid-template-columns: 3rem minmax(0, 1fr) 6.5rem; }
  .co-change__type { display: none; }
}
/* На телефоне: форма источника — поля одно под другим; лента изменений — время | что, важность под текстом,
   пустой столбец уровня у рутины не съедает строку */
@container (max-width: 35rem) {
  .co-add { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); }
  .co-add > .ch-btn { justify-self: start; margin-top: 0; }
  .co-changes > li { grid-template-columns: 3rem minmax(0, 1fr); }
  .co-change__level { grid-column: 2; }
  .co-change__level:empty { display: none; }
}

/* Вкладки, числа, таблицы и плитка Скаута — общие (ch-tabs, ch-kpis, ch-table, ch-plate) */

/* Чтение источников в шапке и в «At a glance» — кнопка-ссылка на вкладку Watching. Слова, которым тесно (телефон, «10 sources,
   1 without a document»), переносятся по пробелам от начала строки, а не раздвигают страницу; точка или знак — на первой строке,
   там же, где стоял по центру одной строки (flex-start, не baseline: строка остаётся той же высоты) */
.co-reading { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: inherit; text-align: left; }
.co-reading:hover > span { text-decoration: underline; text-underline-offset: 4px; }
.co-reading .ch-ok, .co-reading .ch-failing { font-size: var(--text-label); line-height: var(--leading-ui); white-space: normal; align-items: flex-start; }
/* Источник есть, но не прочитан (первое чтение библиотеки рекламы, библиотека просит её не читать) и сбоев нет: словами, тише,
   без зелёной точки — «13 sources, 1 not read yet», а не «all read» */
.co-wait { font-size: var(--text-label); line-height: var(--leading-ui); color: var(--ink-muted); }
.co-reading .ch-ok > .ch-dot { margin-top: calc((var(--leading-ui) - 0.3125rem) / 2); }
.co-reading .ch-failing > .ch-icon { margin-top: calc((var(--leading-ui) - var(--icon-sm)) / 2); }

/* Компактная лента в обзоре: дата | что; тип и важность — второй строкой, чтобы текст не зажимало столбцами.
   Столбец даты общий для всех строк (subgrid, текст строк начинается на одной линии): короткая дата («Oct 22») держит 52,
   длинная («Between September 12 and October 18», «By 3 September») раздвигает его до 96 и дальше переносится по словам.
   Столбец не уже самого длинного неразрывного куска даты («12 September» с неразрывным пробелом), поэтому слово не рвётся
   посередине («Sept / ember», «Octob / er» в 52). Пол в 52 — блок нулевой высоты в самой дате, а не min-width: min-width
   заменил бы автоматический минимум ячейки (её самый длинный кусок), и кусок длиннее 96 снова рвался бы */
.co-changes--compact { display: grid; grid-template-columns: fit-content(6rem) minmax(0, 1fr); column-gap: var(--space-4); }
.co-changes--compact > li { grid-column: 1 / -1; grid-template-columns: 3.25rem minmax(0, 1fr); grid-template-columns: subgrid; }
.co-changes--compact > li > .ch-meta:first-child::after { content: ""; display: block; width: 3.25rem; }
.co-change__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); margin-top: var(--space-1); }

/* Подразделы внутри раздела: заголовок 15/24 чернилами, как у графиков */
.co-hiring { display: grid; gap: var(--space-6); }
.co-sub { display: grid; gap: var(--space-3); margin: 0; }
.co-sub > h3 { margin: 0; font: 500 var(--text-body)/var(--leading-body) var(--font-ui); color: var(--ink); }
.co-stack > .fp-section.fp-wide > * { max-width: var(--measure); }
.co-stack > .fp-section.fp-wide > :is(h2, .fp-wide, .ch-table-wrap) { max-width: none; }
.co-change__meta .ch-meta { margin-left: 0; }

/* В таблицах досье бывают двухстрочные ячейки (сбой и причина) — строки выравниваются по первой строке текста;
   короткие факты (вид, частота, даты, кто добавил) не переносятся */
.co-panel .ch-table tbody th, .co-panel .ch-table td { vertical-align: baseline; }
.co-panel .ch-table td.co-muted { white-space: nowrap; }

/* ── Реклама (вкладка Ads): данные библиотеки рекламы Microsoft, без голоса Скаута. Картина — число объявлений числом раздела
      (fp-figure), языки и соперники полосами (co-pair, как найм; у соперника — значок компании, ваш — акцентом), страницы
      таблицей. Без картины ответ — фраза, как у найма (co-intro), факты мелко под ней (ch-facts), оговорка; ещё не
      смотрел и первое чтение — пустое состояние (ch-empty). Языки страницы в таблице — тише адреса и переносятся по словам:
      столбец не раздвигает таблицу на телефоне ── */
.co-langs { color: var(--ink-muted); }
/* Полосы языков и соперников — на шаг дальше от ссылки в библиотеку: ссылка закрывает шапку картины, как у найма */
.co-panel .fp-figure ~ .co-pair { margin-top: var(--space-3); }
/* Ссылка в библиотеку — слова одним куском, ↗ — после последнего слова, как у адреса (ch-url), а не у края строки */
.co-out > span > .ch-url__end > .ch-icon { margin-left: var(--space-1); vertical-align: -0.125rem; }
/* Два совета Скаута подряд на Watching (список вакансий и рекламодатель) — одной стопкой, а не двумя разделами */
.co-stack > .ch-plate + .ch-plate { margin-top: calc(var(--space-4) - var(--space-12)); }
/* Узкая колонка (телефон): языки — второй строкой под адресом, столбец уходит; иначе «English, German, French» стоит
   в три строки и строка таблицы вырастает втрое */
.co-langs-sub { display: none; }
@container (max-width: 35rem) {
  .co-ad-pages .co-langs { display: none; }
  .co-ad-pages .co-langs-sub { display: block; }
}

/* ── Компания → Apps: строка на приложение — имя, что с ним сейчас (темп версий, давно без версий, почему Scout его не
      заводит; «не может найти в магазине» — красным словами), факты мелко: магазины, версия и день, кто завёл. Каждый факт —
      целым куском, строка не начинается с точки. Действие — в конце строки, на строке имени, как управление строки настройки;
      на телефоне — под словами. Остановленное стоит на месте, тише ── */
.co-apps > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-6); row-gap: var(--space-2); align-items: start; padding: var(--space-3) 0; }
/* Слова строки — одним столбцом во всю её ширину, как у строк-опор (ch-ev__text): имя без пробелов рвётся у края, а не выталкивает
   страницу вбок на телефоне. Факты — ch-facts: целым куском, пока помещаются в строку; факт длиннее строки (длинный номер версии
   Android) переносится внутри себя, и строка всё так же не начинается с точки */
.co-app__text { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1); min-width: 0; overflow-wrap: anywhere; }
.co-app__name { font: 500 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink); }
.co-app__state { font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink-muted); text-wrap: pretty; }
.co-apps .ch-actions > .ch-btn { margin-block: calc((var(--leading-ui) - var(--control)) / 2); }
/* Одна кнопка в ряду — с рамкой (Stop watching, Watch again); тихая — только вторая, Not relevant рядом с Watch: её слово
   кончается у края строки, как текст над ним, поле кнопки выходит за край */
.co-apps .ch-actions > .ch-btn--quiet:last-child { margin-inline-end: calc(var(--space-3) * -1); }
.co-apps > li.is-gone :is(.co-app__name, .co-app__state, .ch-meta) { color: var(--ink-faint); }
@container (max-width: 35rem) {
  .co-apps > li { grid-template-columns: minmax(0, 1fr); }
  .co-apps .ch-actions > .ch-btn { margin-block: 0; }
  .co-apps .ch-actions > .ch-btn--quiet:last-child { margin-inline-end: 0; }
}

/* ── Компания → Companies in registries (продукт: ADR-0107). Строка компании и строка вопроса — та же строка, что у приложения
      (co-apps): имя, что с компанией сейчас, как Скаут её связал, факты мелко, действие в конце строки имени. Имя — ссылка наружу
      на страницу реестра (ch-url); перемена-находка — ссылкой на находку, чернилами, как изменение в ленте конкурента. История
      подач раскрывается таблицей под фактами; на телефоне «Declared» уходит второй строкой под перемену. Меню строки «···» —
      на строке имени и на телефоне: одна иконка под словами читалась бы подписью. Компания, которой кабинет сказал «нет», и
      закрытая в реестре стоят на месте тихими, ссылки — тоже ── */
.co-company__more { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1); margin-top: calc(var(--space-1) * -1); }
.co-company__more > p { margin: 0; justify-self: start; }
.co-app__state > a { color: var(--ink); text-decoration: none; }
.co-app__state > a:hover { text-decoration: underline; text-decoration-color: var(--line-control); text-underline-offset: 4px; }
.co-apps > li.is-gone :is(.ch-url, .ch-url .ch-icon, .co-app__state > a) { color: var(--ink-faint); }
.co-apps .ch-actions > .ch-pop > .ch-btn { margin-block: calc((var(--leading-ui) - var(--control)) / 2); }
.co-history { display: grid; gap: var(--space-2); margin-top: var(--space-1); overflow-wrap: normal; }
.co-history a { color: var(--ink); text-decoration: none; }
.co-history a:hover { text-decoration: underline; text-decoration-color: var(--line-control); text-underline-offset: 4px; }
.co-history__sub { display: none; }
@container (max-width: 35rem) {
  .co-companies > li:has(> .ch-actions > .ch-pop) { grid-template-columns: minmax(0, 1fr) auto; }
  .co-history .co-history__filed { display: none; }
  .co-history__sub { display: block; }
}
/* Окно Add a company: реестр — поле короче названия, оба растут в строке; узко — одно под другим, как поля Add competitors */
.co-find { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
.co-find .co-find__registry { flex: 1 1 10rem; }
.co-find .ch-field:not(.co-find__registry) { flex: 3 1 15rem; }

/* ═══ signin.css ═══ */
/* Вход: слева — холст с тем, что даёт Химера, справа — форма на бумаге. Та же пара, что рейка | документ в приложении.
   Поля, кнопки, баннер — общие из components.css; здесь — раскладка и строка пароля */

html:has(.si), html:has(.si) body { height: auto; min-height: 100%; }
html:has(.si) body { background: var(--paper); }
.si { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; }

/* ── Слева: знак, обещание и пример утра, внизу — что делает агент ── */
.si__brand {
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-12);
  padding: var(--space-8) clamp(var(--space-8), 5vw, var(--space-18)) var(--space-12); background: var(--canvas); border-right: var(--hairline) solid var(--line);
}
.si__logo { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--space-3); color: var(--ink); text-decoration: none; font: 500 var(--text-body)/var(--leading-body) var(--font-ui); }
.si__logo .ch-icon { width: var(--rail-logo); height: var(--rail-logo); }
.si__pitch { display: grid; gap: var(--space-8); max-width: 30rem; }
.si__tagline { margin: 0; font: 500 var(--text-title)/var(--leading-title) var(--font-ui); letter-spacing: -0.01em; color: var(--ink); }
.si__sample { display: grid; gap: var(--space-3); margin: 0; }
.si__sample .ch-meta b { font-weight: 500; color: var(--ink); }
.si__beliefs { margin-top: var(--space-2); }
.si__beliefs > li { display: grid; grid-template-columns: 0.75rem minmax(0, 1fr) auto; column-gap: var(--space-3); align-items: center; padding: var(--space-3) 0; font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink); }
.si__about { margin: 0; max-width: 26.25rem; font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink-muted); }

/* ── Справа: форма по центру, шириной в одну колонку полей ── */
.si__main { display: grid; place-items: center; padding: var(--space-12) var(--page-pad); }
.si__panel { width: min(100%, 22.5rem); display: grid; gap: var(--space-6); }
.si__head { display: grid; gap: var(--space-2); }
.si__head .ch-title:focus { outline: none; }
.si__lead { margin: 0; font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink-muted); }
.si__lead b { font-weight: 500; color: var(--ink); }
.si__back { justify-self: start; }
.si__back .ch-icon { width: var(--icon-sm); height: var(--icon-sm); }
.si__form { display: grid; gap: var(--space-4); }
.si__submit { width: 100%; margin-top: var(--space-2); }

/* Подпись пароля и «Forgot password?» — в одну строку */
.si__label-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.si__label-row .ch-link { font-size: var(--text-label); line-height: var(--leading-label); }
/* «Show» внутри поля пароля — тихой кнопкой в рамке поля (ch-affix): «Показать» и «Скрыть» не ложатся на пароль */

.si__or { display: flex; align-items: center; gap: var(--space-3); font: 400 var(--text-label)/var(--leading-label) var(--font-ui); color: var(--ink-faint); }
.si__or::before, .si__or::after { content: ""; flex: 1; height: var(--hairline); background: var(--line); }
.si__google { width: 100%; }
.si__google svg { width: 1.125rem; height: 1.125rem; flex: none; }
.si__foot { margin: 0; font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink-muted); }
.si__foot .ch-link { display: inline; white-space: nowrap; }

/* Узко: холст — полосой сверху со знаком и обещанием, форма — под ней; полоса по содержимому, остаток экрана — форме */
@media (max-width: 840px) {
  .si { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .si__brand { gap: var(--space-6); padding-bottom: var(--space-8); border-right: 0; border-bottom: var(--hairline) solid var(--line); }
  .si__sample, .si__about { display: none; }
  .si__main { place-items: start center; padding-top: var(--space-8); }
}

/* ═══ scout.css ═══ */
/* Страница агента: Скаут и Media Buyer. Каркас документа — из finding.css: шапка с действием и метой, две колонки 11 : 10,
   разделы 18/28, подробности. Плитка, где говорит Скаут, числа, баннер и пустота — общие.
   Здесь — что агенту можно: область, что он в ней делает и его уровень словом */

/* Область: имя и что агент делает — слева, уровень — справа словом, под ним что он значит; строки в ch-list */
.sc-areas > li { display: grid; grid-template-columns: minmax(0, 1fr) max-content; column-gap: var(--space-8); row-gap: var(--space-3); padding: var(--space-4) 0; }
.sc-area { display: grid; gap: var(--space-1); min-width: 0; }
.sc-area > h3 { margin: 0; font: 500 var(--text-body)/var(--leading-body) var(--font-ui); color: var(--ink); }
.sc-area > p { margin: 0; max-width: var(--measure); font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink-muted); text-wrap: pretty; }
/* Уровень — слово чернилами, как статус убеждения: без рамки и заливки, чтобы не походить на кнопку */
.sc-level { display: grid; justify-items: end; align-content: start; gap: var(--space-1); margin: 0; padding-top: calc((var(--leading-body) - var(--leading-ui)) / 2); text-align: right; }
.sc-level > b { font: 500 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink); }

/* Что держит уровень и где исполняются изменения — короткие пары под описанием области */
.sc-facts { margin: var(--space-2) 0 0; max-width: var(--measure); }
.sc-facts > div { display: grid; grid-template-columns: minmax(7.5rem, 40%) minmax(0, 1fr); column-gap: var(--space-4); padding: var(--space-2) 0; border-top: var(--hairline) solid var(--line); font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); }
.sc-facts dt { color: var(--ink-muted); }
.sc-facts dd { display: grid; gap: var(--space-1); margin: 0; color: var(--ink); }
/* Пояснение к значению — тише него, тем же размером */
.sc-facts__note { color: var(--ink-muted); }

/* Закрытый раздел: только пустота, без колонок */
.sc-closed { padding-top: var(--space-4); }

/* Узко: уровень — под описанием, слева */
@container (max-width: 35rem) {
  .sc-areas > li { grid-template-columns: minmax(0, 1fr); }
  .sc-level { justify-items: start; text-align: left; padding-top: 0; grid-auto-flow: column; justify-content: start; align-items: baseline; gap: var(--space-2); }
}

/* ═══ usage.css ═══ */
/* Расходы. Каркас документа — из finding.css: шапка, две колонки 11 : 10, разделы 18/28. Числа, таблица (вторая строка, тире),
   полосы, графики, баннер и модалка с формой — общие. Здесь — строка лимита, удержанная кнопка, столбцы по дням и заготовка загрузки */

/* Лимит: подпись и сумма в строку, под ними полоса — доля лимита чернилами, без цвета тревоги: что будет у лимита, говорят слова */
.us-limit { display: grid; gap: var(--space-2); }
.us-limit__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink); }
.us-limit__row b { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.us-limit .ch-progress { margin-top: var(--space-1); }
.us-limit__line { margin: var(--space-1) 0 0; max-width: var(--measure); font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink-muted); }
/* «Ask for more» и причина рядом, пока запрос у команды: кнопка удержана, слова говорят почему */
.us-ask-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-top: var(--space-2); }
.us-ask-row__why { font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink-muted); }

/* Подпись под графиком — что учитывается */
.us-foot { margin: 0; }

/* Заготовка загрузки (ch-skeletons): на месте графика — одна полоса его высоты */
.us-skel__chart { height: 10.75rem; }

/* Из чего общая сумма — ИИ Скаута и проверки видимости, двумя фактами метой (ch-facts): под полосой лимита или под числами без лимита */
.us-kpis { display: grid; gap: var(--space-2); }

/* Проверки видимости: ссылки пояснения (fp-note) — общим правилом ссылок в прозе интерфейса; имя ассистента не сжимается до слова */
.us-vis tbody th { min-width: 9rem; }

/* ═══ settings.css ═══ */
/* Настройки. Каркас документа — из finding.css: шапка, две колонки 11 : 10, разделы 18/28.
   Строка настройки, выбор словами и поле с поиском — общие (ch-setting, ch-segmented, ch-combobox).
   Здесь — подзаголовок шапки, форма продукта и заготовка загрузки. Сторона на узком — после текста (fp--main-first) */

/* Подзаголовок шапки — что это за страница, одной строкой тише заголовка */
.st-lead { margin: 0; max-width: var(--measure); font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink-muted); }

/* Форма продукта: поля одно под другим, Save — под последним */
.st-form { display: grid; gap: var(--space-4); }
.st-form > .ch-actions { margin-top: var(--space-2); }
.st-form .ch-textarea { min-height: 4.5rem; }

/* Справа — разделы со строками настроек; первая строка — сразу под описанием раздела */
.st .fp__side .fp-section { gap: var(--space-2); }

/* Заготовка, пока настройки в пути (ch-skeletons): строки настроек — полосами с линией под каждой */
.st-skel__row { display: grid; gap: var(--space-2); padding-block: var(--space-3); border-bottom: var(--hairline) solid var(--line); }

/* ═══ question.css ═══ */
/* Вопрос к делу. Каркас документа — из finding.css: крошки, заголовок с действиями, мета, две колонки 11 : 10, разделы 18/28.
   Реплики, событие, статус агента, находки-опоры и пустота — общие (ch-user, ch-event, ch-agent-status, ch-ev, ch-empty).
   Здесь — ритм разговора, ответ Скаута подписью и голосом, строка убеждения справа */

/* Разговор: между репликами — воздух, как между ходами дайджеста; находки под ответом — сразу под его словами */
.qn-thread { display: grid; gap: var(--space-8); max-width: var(--measure); }
.qn-turn { display: grid; gap: var(--space-2); }
.qn-turn > .ch-ev { margin-top: var(--space-2); }
.qn-turn > .ch-link { justify-self: start; margin-top: var(--space-1); }
/* Ответ Скаута — подпись «Scout · answered: not yet» над его голосом, без плитки: в разговоре автора называет подпись */
.qn-turn > .ch-plate__by .ch-meta { font-weight: 400; }
/* Строка ожидания — на месте будущего ответа */
.qn-wait { margin: 0; }

/* Справа: убеждение, которое Скаут держит по вопросу, — строкой, как убеждения дела */
.qn-beliefs > li > a { display: grid; grid-template-columns: 0.75rem minmax(0, 1fr); column-gap: var(--space-3); row-gap: var(--space-1); padding: var(--space-3) 0; color: var(--ink); text-decoration: none; font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); }
.qn-beliefs .ch-mark { margin-top: calc((var(--leading-ui) - 0.75rem) / 2); }
.qn-beliefs .ch-meta { grid-column: 2; }
.qn-beliefs > li > a:hover > span:nth-child(2) { text-decoration: underline; text-decoration-color: var(--line-control); text-underline-offset: 4px; }

/* Заготовка загрузки (ch-skeletons): реплики — в строку чтения, между ними воздух */
.qn-skel { max-width: var(--measure); }
.qn-skel + .qn-skel { margin-top: var(--space-6); }

/* ═══ not-found.css ═══ */
/* Страницы нет или она не загрузилась (not-found.html, error.html). Каркас документа — из finding.css: шапка с крошками и заголовком.
   Под шапкой — общая пустота: одна фраза и действие, которое ведёт туда, где искать, или пробует ещё раз */

.nf__empty { padding-top: var(--space-8); }

/* ═══ onboarding.css ═══ */
/* Первый запуск: рейка | разговор на холсте, как первый контакт и знакомство (screens.css), но своими классами onb-*:
   приветствие по центру экрана, дальше лента реплик в колонку чтения. Реплики, поле ввода, флажки, поля, выбор и баннер — общие */

html:has(.onb), html:has(.onb) body { min-height: 100%; }
/* Липкое поле ответа после запуска не закрывает последнюю реплику; до запуска поля внизу нет — и места под него нет */
html:has(.onb__ask:not([hidden])) { scroll-padding-bottom: calc(var(--composer) + var(--leading-meta) + var(--space-12)); }
.onb { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* Приветствие: колонка по центру экрана, чуть выше середины */
.onb__intro { flex: 1; display: grid; place-items: center; padding: var(--space-12) var(--space-8); }
.onb__intro-col { width: min(100%, var(--measure)); display: grid; gap: var(--space-8); margin-top: -6vh; }

/* Разговор: колонка чтения по центру холста; между ходами — space-8, внутри хода — space-4 */
.onb__thread { flex: 1; width: min(100% - 2 * var(--space-8), var(--measure)); margin-inline: auto; padding-block: var(--space-12) var(--space-12); display: grid; align-content: start; gap: var(--space-8); }
.onb-turn { display: grid; gap: var(--space-4); }
.onb-turn > .ch-actions { margin-top: var(--space-2); }
.onb-turn .ch-agent-status { margin: 0; }

/* Имя продукта: ссылка «Rename» открывает поле на месте строки */
.onb-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); margin: 0; font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink-muted); }
.onb-name b { font-weight: 500; color: var(--ink); }

/* Предложенные конкуренты — строками с флажком: имя и домен, ниже — почему, голосом Химеры, мельче имени.
   Флажок и рамка — общие (ch-check); строка выше обычной: текст в две строки, без подложки при наведении */
.onb-cands { margin: 0; }
.onb-cand.ch-check {
  display: grid; grid-template-columns: 1rem 1.125rem minmax(0, 1fr); column-gap: var(--space-3); row-gap: var(--space-1); align-items: start;
  min-height: 0; padding: var(--space-3) 0; border-radius: 0; white-space: normal;
}
.onb-cand.ch-check:hover { background: none; }
.onb-cand .ch-check__box { margin-top: calc((var(--leading-ui) - 1rem) / 2); }
.onb-cand .ch-tile { margin-top: calc((var(--leading-ui) - 1.125rem) / 2); }
.onb-cand__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); min-width: 0; }
.onb-cand__name { font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.onb-cand__why { grid-column: 3; margin: 0; max-width: var(--measure); font: 400 var(--text-voice-sm)/var(--leading-voice-sm) var(--font-voice); color: var(--ink-muted); text-wrap: pretty; }
.onb-cand:has(input:disabled) { cursor: not-allowed; }
/* Выбор после запуска — история: отмеченные остаются отмеченными акцентом */
.onb-cand input:disabled:checked + .ch-check__box { border-color: var(--accent); color: var(--accent); }
.onb-cand:has(input:disabled:not(:checked)) > :not(.ch-check__box) { opacity: .5; }

/* Сколько выбрано и что это значит — строкой под списком */
.onb-summary { margin: 0; font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink-muted); }
.onb-langs { display: flex; flex-wrap: wrap; gap: 0 var(--space-6); }

/* После запуска поле ответа Химере прилипает к низу, как на знакомстве */
.onb__ask { position: sticky; bottom: 0; z-index: 5; width: min(100% - 2 * var(--space-8), var(--measure)); margin-inline: auto; display: grid; gap: var(--space-2); padding: var(--space-4) 0 var(--space-6); background: var(--canvas); }

@media (max-width: 760px) {
  .onb__intro { padding: var(--space-8) var(--space-4); }
  .onb__thread, .onb__ask { width: min(100% - 2 * var(--space-4), var(--measure)); }
}

/* ═══ visibility.css ═══ */
/* Видимость — обзор. Каркас документа — из finding.css: шапка, мета, две колонки 11 : 10, разделы 18/28; под шапкой — вкладки
   раздела (ch-tabs ссылками). Числа и их слова, части и факты (ch-kpis__words, __parts, __facts), выбор словами (ch-segmented),
   таблица со своей строкой первой, сайтом в ячейке и столбцом, который на узком уходит второй строкой (ch-table__you, __site,
   __wide, __narrow), факты строкой (ch-facts), полосы, баннер и пустота — общие. Здесь — своё: подписи под числами, строка
   канала, ширина заметок под брендом, правила счёта. Голоса агента нет: всё на странице — результат функции. Цвет — только
   фавиконы и акцент у выбора и своего сайта на полосе */

.vo-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-12); padding-top: var(--space-8); }
.vo-panel > .fp__cols { padding-top: 0; }
/* Оговорка раздела — один раз на странице: общая заметка документа (fp-note) со ссылкой в словах, строкой чтения */
.vo-panel > .fp-note { max-width: var(--measure); }

/* ── Mellow по четырём каналам (ch-kpis): диапазон числом 24/32, под ним канал подписью и факты — счёт «k of n», поиск, доля
      голоса вторым рядом. Без числа — мало ответов, пересчёт — словами (ch-kpis__words); после смены модели — части без общего
      числа (ch-kpis__parts). Под числами: подпись способа — метой, как подпись у цифры; предложения о цифрах — общей заметкой
      документа (fp-note) ── */
.vo-notes { display: grid; gap: var(--space-1); margin-top: var(--space-3); }
.vo-notes > * { max-width: var(--measure); }
.vo-note { margin: 0; font: 400 var(--text-meta)/var(--leading-meta) var(--font-ui); color: var(--ink-faint); text-wrap: pretty; }

/* ── Канал на выбор: ассистент и страна — двумя выборами словами (по два варианта в каждом), под ними подпись канала и факты.
      Выбор ведёт и таблицу брендов, и сайты: стоит над обеими колонками ── */
.vo-pick { display: grid; gap: var(--space-3); }
.vo-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-8); margin-inline: calc(var(--space-3) * -1); }
.vo-channel { display: grid; gap: var(--space-1); }
.vo-channel__caption { margin: 0; font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink); }
/* Части канала после смены версии движка: у каждой свои факты и покрытие, шаг между частями — как между строками разговора */
.vo-part { display: grid; gap: var(--space-1); }
.vo-part + .vo-part { margin-top: var(--space-2); }

/* ── Бренды: своя строка первой (ch-table__you); имя — со значком (ch-table__site), под ним — что о цифре надо знать (вопросы,
      которые называют бренд, мягкая доля, добавлен, не отслеживается). Счёт и диапазон — числами справа; доля голоса — вторым
      рядом под диапазоном; в узкой колонке счёт уходит второй строкой под диапазон (ch-table__wide, ch-table__narrow). Ушедший
      бренд стоит на месте, тише ── */
.vo-brands :is(tbody th, td) { vertical-align: baseline; }
/* Что о цифре надо знать — под именем, не шире 44 знаков, чтобы числа стояли рядом с именем */
.vo-brands tbody th .ch-table__sub { max-width: 44ch; text-wrap: pretty; }
.vo-brands td.vo-wait { color: var(--ink-muted); text-align: right; white-space: normal; }
.vo-foot { display: grid; gap: var(--space-1); margin-top: var(--space-3); }

/* ── Сайты: полосы счёта ответов (описательно, не доля); свой сайт — последней строкой, отступом от остальных, полоса — акцентом ── */
.vo-sites .ch-bars__row.vo-sites__you { margin-top: var(--space-3); }

/* ── Как я считаю: правила строками, интерфейсным шрифтом, тише текста ── */
.vo-rules > li { padding: var(--space-2) 0; font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink-muted); text-wrap: pretty; }

/* Заготовка, пока обзор в пути (ch-skeletons): строки числа — полосами высотой с число */
.vo-skel__kpi { height: 2rem; }

/* ═══ visibility-questions.css ═══ */
/* Вопросы видимости. Каркас — из findings.css (fd): липкая шапка с заголовком, вкладками раздела (те же, что под шапкой документа
   у Обзора, Plan и App check: fd__head > ch-tabs) и инструментами, лента и сводка 11 : 10. Фильтр, поиск, выбор словами, таблица,
   меню «···» кликабельной карточки (ch-clickable поднимает карточку с открытым меню), факты строкой (ch-facts), ошибка группы
   стран (ChimeraUI.invalid у fieldset), форма в модалке и пустота — общие. Здесь — своё: шапка с «Add question», карточка вопроса
   (текст человека, тема и страны, счёт одного вопроса по ассистентам), таблица на всю ширину страницы и форма вопроса. Голоса
   агента нет; цвет — только акцент у выбора и ссылок */

/* «Add question» стоит у заголовка, пока рядом есть место; тесно — уходит строкой ниже (как «Add competitors») */
.vl-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-4) var(--space-6); }
.vl-head > .ch-btn { flex: none; }
.vl-head__title { display: grid; gap: var(--space-1); }
.vl-head__title .ch-meta { margin: 0; font-size: var(--text-ui); line-height: var(--leading-ui); color: var(--ink-muted); }

/* ── Карточка вопроса: текст — слова человека (body), под ним номер, тема и страны метой, пометка «называет конкурента», затем
      по ассистенту выбранной страны — назвали ли Mellow и кого чаще всех, счёт одного вопроса. Кликабельна целиком, «···» — свои ── */
.vl-list { border-top: 0; }
.vl-q { display: grid; gap: var(--space-2); padding: var(--space-4) 0; }
.vl-q__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
/* Длинный вопрос — до трёх строк с многоточием; слова целиком остаются в разметке и стоят полностью на странице вопроса */
.vl-q__text {
  min-width: 0; margin: 0; font: 400 var(--text-body)/var(--leading-body) var(--font-ui); color: var(--ink); text-decoration: none; text-wrap: pretty;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.vl-q:hover .vl-q__text { text-decoration: underline; text-decoration-color: var(--line-control); text-underline-offset: 4px; }
/* «···» — на строке первой строки текста, поле кнопки выходит за край колонки, как у тихой кнопки в конце строки */
.vl-q__top > .ch-pop { flex: none; margin: calc((var(--leading-body) - var(--control)) / 2) calc(var(--space-2) * -1) 0 0; }
.vl-q__note { margin: 0; font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink-muted); text-wrap: pretty; }
.vl-q__counts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-1) var(--space-4); margin: var(--space-1) 0 0; font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); }
.vl-q__counts dt { color: var(--ink-muted); }
.vl-q__counts dd { margin: 0; min-width: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.vl-q__counts .vl-none { color: var(--ink-muted); }
/* Выведенный или исправленный вопрос стоит в списке, тише: его ответы хранятся */
.vl-q.is-gone :is(.vl-q__text, .vl-q__counts dd, .vl-q__counts dt) { color: var(--ink-faint); }
.vl-group { margin: 0; padding: var(--space-8) 0 var(--space-2); }

/* ── Таблица: на всю ширину страницы, сводка уходит под неё; вопрос — до двух строк, под ним номер и пометки ── */
.vl.is-table .vl-cols { grid-template-columns: minmax(0, 1fr); }
.vl.is-table .fd__aside { max-width: var(--measure); padding-top: var(--space-8); }
.vl-table { min-width: 45rem; }
.vl-table :is(tbody th, td) { vertical-align: baseline; }
.vl-table thead th[colspan] { padding-bottom: var(--space-1); border-bottom-color: var(--line); }
.vl-table tbody th { width: 46%; }
.vl-table .vl-q__text { -webkit-line-clamp: 2; font-size: var(--text-ui); line-height: var(--leading-ui); }
.vl-table tbody tr:hover .vl-q__text { text-decoration: underline; text-decoration-color: var(--line-control); text-underline-offset: 4px; }
.vl-table tbody tr { cursor: pointer; }
.vl-table td { white-space: nowrap; }
.vl-table tr.is-gone :is(th, td, a) { color: var(--ink-faint); }
.vl-table .ch-table__sub { white-space: normal; text-wrap: pretty; }
/* Что о вопросе надо знать (называет конкурента, на паузе, выведен) — своей строкой интерфейсным текстом, как на карточке, а не метой */
.vl-table .vl-note { font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink-muted); }

/* ── Сводка справа: строки чисел и как считается вопрос — заметками документа (fp-note), строкой чтения ── */
.vl-how > .fp-note { max-width: var(--measure); text-wrap: pretty; }

/* ── Форма вопроса: поля одно под другим; что вопрос называет — строкой под полем, сразу при вводе ── */
.vl-form { display: grid; gap: var(--space-4); }
.vl-countries { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin-inline: calc(var(--space-2) * -1); }
.vl-names { margin: 0; font: 400 var(--text-meta)/var(--leading-meta) var(--font-ui); color: var(--ink-muted); }

@container (max-width: 30rem) {
  .vl-q__counts { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .vl-q__counts dd + dt { margin-top: var(--space-2); }
}

/* ═══ visibility-question.css ═══ */
/* Вопрос видимости. Каркас документа — из finding.css: крошки, заголовок с действиями, мета, две колонки 11 : 10, разделы 18/28,
   подробности справа. Таблица со своей строкой первой, сайтом в ячейке и столбцом, который на узком уходит второй строкой
   (ch-table__you, __site, __wide, __narrow), пример ответа ассистента — чужой текст как его дали (ch-quote), факты строкой
   (ch-facts), ссылка наружу, меню и пустота — общие. Здесь — своё: полный текст длинного вопроса, ячейки «ещё нет ответов»
   и «диапазон — от 5 ответов». Голоса агента нет: Literata здесь не стоит — это слова ассистента, не Химеры */

.vq-full { margin: 0; font: 400 var(--text-body)/var(--leading-body) var(--font-ui); color: var(--ink); overflow-wrap: anywhere; }

/* ── Счёт одного вопроса: по каналу — назвали ли Mellow, сырой диапазон, сколько раз искал; в узкой колонке диапазон — второй
      строкой под счётом, с подписью «one question». Кого называют ответы — свой продукт первой строкой ── */
.vq-counts :is(tbody th, td), .vq-brands :is(tbody th, td) { vertical-align: baseline; }
.vq-brands thead th.ch-table__num { white-space: normal; }
.vq-counts td.vq-wait, .vq-brands td.vq-wait { color: var(--ink-muted); }
/* Меньше 5 ответов: вместо диапазона — с какого числа ответов он появится, тише числа */
.vq-few { color: var(--ink-muted); }
.vq-foot { display: grid; gap: var(--space-1); }

/* ═══ visibility-plan.css ═══ */
/* План замера видимости — настройки раздела, как Settings. Каркас документа — из finding.css: шапка, вкладки раздела, две
   колонки 11 : 10, разделы 18/28, подробности (fp-details), число раздела (fp-figure). Строка настройки, выбор словами, поля
   с единицей, список чисел, баннер и подтверждение — общие (ch-setting, ch-segmented, ch-affix, ch-stats, ch-banner, ch-modal--confirm);
   ссылки в пояснениях, описаниях и подробностях — общим правилом ссылок в прозе интерфейса; модель, сверка условий и источник под
   ассистентом — фактами (ch-facts); строки поправок словаря и списка Скаута — строками списка (ch-row), монограмма сайта без
   фавикона — ch-tile. Здесь — форма плана с оценкой и заготовка загрузки. Сторона на узком — после текста (fp--main-first) */

/* Таблица подробностей под строками ассистентов: без второй линии сверху */
.vp-assistants + .vp-details { margin-top: calc(var(--space-3) * -1); }
.vp-assistants + .vp-details > div:first-child { border-top: 0; }

/* Форма плана: выбор, оценка, лимиты, Save — сверху вниз на шаге 16 */
.vp-form { display: grid; gap: var(--space-4); }
.vp-form > .ch-actions { margin-top: var(--space-2); }
.vp-form > .ch-settings > .ch-setting:first-child { padding-top: var(--space-3); }
/* Оценка до сохранения: подпись, деньги числом раздела, точность и сдвиг — двумя строками, пояснение */
.vp-estimate { display: grid; gap: var(--space-2); }
.vp-estimate > .fp-figure { margin-bottom: 0; }
.vp-estimate > .fp-note { margin-top: var(--space-1); }
.vp-limits__note { margin-top: calc(var(--space-2) * -1); }

/* Справа: числа месяца — под строкой переключателя, без второй линии сверху */
.vp .fp__side .fp-section { gap: var(--space-2); }
.ch-settings + .vp-stats--month { border-top: 0; }

/* Форма поправки: подпись, поля в строку (на узком — одно под другим), форма имени, кнопка */
.vp-add { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.vp-add > .fp-sub { margin-bottom: calc(var(--space-1) * -1); }
.vp-add__why { max-width: var(--measure); }
.vp-scout__title { margin-top: var(--space-6); }

/* Заготовка, пока план в пути (ch-skeletons): строки полосами с линией под каждой */
.vp-skel__row { display: grid; gap: var(--space-2); padding-block: var(--space-3); border-bottom: var(--hairline) solid var(--line); }

/* ═══ visibility-app.css ═══ */
/* Сверка с приложениями. Каркас документа — из finding.css: шапка, вкладки раздела, две колонки 11 : 10, разделы 18/28, число
   раздела (fp-figure). Таблица с группами строк, поля, радиокнопки и ошибка их группы (ChimeraUI.invalid у fieldset), поле файла
   (ch-file), поле с поиском, факты строкой (ch-facts), пустота — общие. Здесь — строки снятых ответов, свёрнутый месяц, радиокнопки
   в строку и пары полей. Сторона на узком — после текста (fp--main-first): ведёт итог, форма — за ним */

/* Итог: таблица пар по месяцам; число и счёт под ним — справа, как суммы */
.va-table tbody th { white-space: nowrap; }
.va-result__note { margin-top: var(--space-1); }

/* Снятые ответы по месяцам: подпись месяца со счётом, строки списка; прошлый месяц свёрнут под кнопкой */
.va-month { display: grid; gap: var(--space-2); }
.va-month + .va-month { margin-top: var(--space-6); }
.va-month__head { display: flex; align-items: baseline; gap: var(--space-2); }
.va-month__toggle { justify-self: start; }
.va-answer { display: grid; gap: var(--space-1); padding: var(--space-3) 0; }
/* Слова вопроса — ссылка на его страницу: чернилами, подчёркивание при наведении, как заголовок-ссылка */
.va-answer__q { font: 500 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink); text-decoration: none; text-wrap: pretty; overflow-wrap: anywhere; }
.va-answer__q:hover { text-decoration: underline; text-decoration-color: var(--line-control); text-underline-offset: 4px; }
.va-answer__how { margin: 0; font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink-muted); }

/* Форма записи: поля сверху вниз на шаге 16; пары полей — в строку, где им хватает места */
.va-form { display: grid; gap: var(--space-4); }
.va-form > .ch-actions { margin-top: var(--space-2); }
.va-text { min-height: 9rem; }
/* Радиокнопки группы — в строку, переносятся рядами */
.va-radios { display: flex; flex-wrap: wrap; gap: 0 var(--space-6); }
/* Пара «день и время»: время — узкое поле рядом с днём */
.va-when > .ch-field:last-child { flex: 0 1 10.5rem; }
.va-when > .ch-field:first-child { flex: 1 1 12.5rem; }


/* ═══ size.css ═══ */
/* Interface size S · M · L — the person's choice, kept per browser (cookie `chimera-size` in the product).
   Sources are written in px, the sizes at S; the build writes dist/ in rem, so one number on <html> grows
   type, spacing, controls, rows and the page's caps together. S has no attribute. Lines, corners and the
   window's media queries stay in px. Prototype pages load the px sources, where this file has no effect. */
html[data-size="m"] { font-size: 106.25%; } /* 17px */
html[data-size="l"] { font-size: 112.5%; }  /* 18px */

/* A change of size is one picture (the product's size setting): while html[data-size-change] is on, the page's picture
   grows about the switch that was pressed (--size-change-origin) by --size-change-scale, the root's size after over
   before; the rail and the narrow top bar pass as themselves, so the zoom does not throw them off the window's edge, and
   the rail's foot apart from the rail, since it is kept at the window's bottom while the rest of the rail hangs from its top.
   Nothing transitions on its own meanwhile, so the page the script measures is the one it ends in. */
html[data-size-change], html[data-size-change] *, html[data-size-change] *::before, html[data-size-change] *::after { transition: none !important; }
html[data-size-change]::view-transition-group(root),
html[data-size-change]::view-transition-image-pair(root),
html[data-size-change]::view-transition-old(root),
html[data-size-change]::view-transition-new(root) { animation-duration: var(--dur-size); animation-timing-function: var(--ease); }
html[data-size-change]::view-transition-image-pair(root) { animation-name: ch-size-change; transform-origin: var(--size-change-origin, 50% 0); }
html[data-size-change]::view-transition-new(root) { transform: scale(calc(1 / var(--size-change-scale, 1))); transform-origin: var(--size-change-origin, 50% 0); }
@keyframes ch-size-change { to { transform: scale(var(--size-change-scale, 1)); } }
html[data-size-change] .ch-rail { view-transition-name: ch-rail; }
/* the foot's box reaches the rail's edge, where the current item's bar stands, so its picture holds the bar; what is in it stays put */
html[data-size-change] .ch-rail__foot {
  view-transition-name: ch-rail-foot;
  margin-left: calc((var(--rail) - var(--rail-item)) / -2); padding-left: calc((var(--rail) - var(--rail-item)) / 2);
}
html[data-size-change] .ch-topbar { view-transition-name: ch-topbar; }
html[data-size-change]::view-transition-group(ch-rail),
html[data-size-change]::view-transition-image-pair(ch-rail),
html[data-size-change]::view-transition-old(ch-rail),
html[data-size-change]::view-transition-new(ch-rail),
html[data-size-change]::view-transition-group(ch-rail-foot),
html[data-size-change]::view-transition-image-pair(ch-rail-foot),
html[data-size-change]::view-transition-old(ch-rail-foot),
html[data-size-change]::view-transition-new(ch-rail-foot),
html[data-size-change]::view-transition-group(ch-topbar),
html[data-size-change]::view-transition-image-pair(ch-topbar),
html[data-size-change]::view-transition-old(ch-topbar),
html[data-size-change]::view-transition-new(ch-topbar) { animation-duration: var(--dur-size); animation-timing-function: var(--ease); }
/* Only the new picture grows: it stands alone from the first frame, drawn plainly over the old one, and the old one is gone
   within --dur-size-out. Below the width of --page the page at L is not the page at S made larger (its columns are shares
   of the frame and its lines wrap anew; at 1024 the two columns become one), so a cross-fade drew two copies of every
   heading and line, up to 150px apart at 1440. The old picture shows only where the new one has not yet grown over the
   window (S → L), and only at first. */
html[data-size-change]::view-transition-old(root),
html[data-size-change]::view-transition-old(ch-rail),
html[data-size-change]::view-transition-old(ch-rail-foot),
html[data-size-change]::view-transition-old(ch-topbar) { animation-name: ch-size-out; animation-duration: var(--dur-size-out); mix-blend-mode: normal; }
html[data-size-change]::view-transition-new(root),
html[data-size-change]::view-transition-new(ch-rail),
html[data-size-change]::view-transition-new(ch-rail-foot),
html[data-size-change]::view-transition-new(ch-topbar) { animation-name: none; mix-blend-mode: normal; }
@keyframes ch-size-out { to { opacity: 0; } }
/* The rail's new picture grows from its top and is short of the window's bottom until it has grown (S → L); its column
   keeps the rail's colour meanwhile */
html[data-size-change]::view-transition-group(ch-rail) { background: var(--canvas); }
/* `:root`, not `html`: a `*` argument adds nothing to a selector's weight, and these must outrank the named rules above */
@media (prefers-reduced-motion: reduce) {
  :root[data-size-change]::view-transition-group(*),
  :root[data-size-change]::view-transition-image-pair(*),
  :root[data-size-change]::view-transition-old(*),
  :root[data-size-change]::view-transition-new(*) { animation: none; }
  :root[data-size-change]::view-transition-new(root) { transform: none; }
}