/* ══════════════════════════════════════════════════════════════════════
   kvorium — оформление рабочего окна.

   Это инструмент для чтения и письма: длинные русские тексты, чужие
   цитаты, таблицы документов. Поэтому здесь спокойные цвета, крупный
   интервал и ограниченная длина строки, а не плотная панель управления.

   Цвет один, и он означает действие или наше место в проекте. Всё
   остальное приглушено: документ не должен пестреть.

   Здесь лежит устройство: размеры, отступы, скругления, поведение экранов.
   Сам цвет и шрифты живут в `theme.css`, который подключается следом и
   переопределяет только их. Значения ниже — запасные, на случай если тему
   отключить.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;

  /* Поверхности и текст */
  --bg-app: #f3f5f9;
  --surface: #ffffff;
  --surface-muted: #f7f9fc;
  --surface-sunken: #eef1f6;
  --text: #12213a;
  --text-secondary: #566079;
  --text-tertiary: #646d84;
  --border: #e3e8ef;
  --border-strong: #c7cfdc;

  /* Действие */
  --accent: #1b4fd8;
  --accent-hover: #163fae;
  --accent-press: #12358f;
  --accent-subtle: #eef3fe;
  --accent-border: #c2d3f8;

  /* Состояния */
  --positive: #1c6b45;
  --positive-subtle: #e9f4ed;
  --positive-border: #b5d7c3;
  --attention: #8a5a00;
  --attention-subtle: #fdf3dc;
  --attention-border: #e8cf95;
  --danger: #b32330;
  --danger-subtle: #fdecee;
  --danger-border: #f0b6bb;
  --focus: #1b4fd8;

  /* Боковая колонка проекта — тёмная. Она появляется только внутри проекта,
     и тёмный цвет говорит об этом раньше любой надписи: пока вы в проекте,
     слева стоит стена. Лист с документом при этом остаётся белым — читают
     на нём, а не на панели. */
  --rail-bg: #16233c;
  --rail-text: #c3cee1;
  --rail-text-strong: #ffffff;
  --rail-hover: rgb(255 255 255 / 8%);
  --rail-active: rgb(255 255 255 / 14%);
  --rail-border: rgb(255 255 255 / 12%);
  --rail-accent: #7fa6f0;

  /* Размеры */
  --header-min-height: 60px;
  --header-height: var(--header-min-height);
  --content-max: 1180px;
  /* Мера строки - как страница Word на A4 (около 95 знаков), а не 78:
     на широком экране текст обрывался на половине карточки, и правая
     половина пустовала (пользователь 21 сентября). Читаемость держат
     выключка по ширине и переносы, см. блок «Текст по ширине». */
  --measure: 96ch;

  /* Четыре высоты строки на всё окно. До 14 сентября 2026 их было
     четырнадцать, от 1 до 1,65: каждая новая карточка приносила свою.
     Заголовкам — плотно, интерфейсу — чуть свободнее, тексту — как книге,
     документу — с воздухом: цитаты и статьи закона читают медленно. */
  --leading-tight: 1.2;
  --leading-ui: 1.35;
  --leading-text: 1.5;
  --leading-doc: 1.6;

  /* Одна шкала на всё окно.

     До этого в файле жили 18 размеров шрифта, 8 насыщенностей и 17
     скруглений — не потому, что так задумано, а потому что каждый экран
     подбирал своё. Глазу это читается как шум: разница в один пиксель не
     говорит ничего, а мешает увидеть настоящую разницу.

     Пять размеров, две насыщенности, одно скругление. Иерархию держит
     размер, а не толщина: поэтому насыщенностей две, а не пять. */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 20px;
  --text-xl: 28px;

  --weight-normal: 400;
  --weight-strong: 600;

  --radius: 10px;

  /* Отступы переменными не заводятся: у них нет имён, которые что-то
     значат, — есть только лестница из восьми ступеней:

         4 · 8 · 12 · 16 · 20 · 24 · 32 · 48

     Было тридцать три разных длины — с 3, 5, 7, 13, 18, 26 и прочими
     числами, которые никто не выбирал. Между ступенями ничего нет: если
     кажется, что нужно 28, значит нужно 24 или 32.

     1px и 2px оставлены нарочно: это не отступы, а волосяные линии, они
     подпирают рамку, а не расставляют блоки. Отрицательные -1px у
     `.sr-only` и -4px под заголовком панели — приёмы, а не ступени. */

  /* Тень у карточки чуть заметнее плоской линии: на светлом фоне лист должен
     лежать, а не быть нарисованным. Больше её делать нельзя — от десятка
     висящих в воздухе карточек рябит. */
  --shadow-card: 0 1px 2px rgb(18 33 58 / 6%), 0 6px 16px -12px rgb(18 33 58 / 22%);
  --shadow-raised: 0 10px 28px -12px rgb(18 33 58 / 28%);
  --shadow-layer: 0 24px 60px -16px rgb(18 33 58 / 34%);

  /* Шрифты здесь — запасные, на случай если `theme.css` отключить. Живые
     лежат там: Golos Text для управления, Alegreya для чтения. Запасные —
     системные, то, чем набрана сама Windows: без них окно не останется без
     букв. */
  --font-ui: "Segoe UI Variable Text", "Segoe UI", system-ui, Arial, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, Arial, sans-serif;
  --font-document: Cambria, Constantia, Georgia, "Times New Roman", serif;

  font-family: var(--font-ui);
  /* Базовый размер — из той же шкалы. Всё, что размер себе не задаёт
     (абзац, цитата, надпись без класса), наследует его отсюда. */
  font-size: var(--text-base);
  line-height: var(--leading-text);
}

* {
  box-sizing: border-box;
}

/* Спрятанное должно быть спрятано. Собственный `display` у кнопок и панелей
   перебивал служебное правило браузера, и скрытая кнопка оставалась на экране —
   нажать её было можно, а делать она не делала ничего. */
[hidden] {
  display: none !important;
}

html {
  /* Ровно 1024 плюс полоса прокрутки давали горизонтальную прокрутку всего
     окна: на ноутбуке страница уезжала вбок на два сантиметра. */
  min-width: 960px;
  min-height: 720px;
  background: var(--bg-app);
}

body {
  min-width: 960px;
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Браузер сам набирает выделенное 700-м — это третья толщина, которую в
   окне никто не заказывал. Приводим к нашей. */
strong,
b {
  font-weight: var(--weight-strong);
}

::selection {
  color: var(--text);
  background: #d3e0fb;
}

button,
input,
select,
textarea {
  font: inherit;
}

/* Флажок и переключатель приходят от браузера с полями в 3px — мимо
   лестницы. Ставим свои, а к строке подравниваем сдвигом, а не полем. */
input[type="checkbox"],
input[type="radio"] {
  margin: 0 4px 0 0;
  vertical-align: -2px;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: var(--accent);
  text-underline-offset: 0.16em;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1000;
  padding: 8px 12px;
  color: #fff;
  background: var(--focus);
  text-decoration: none;
  border-radius: var(--radius);
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

/* ── Верхняя полоса ──────────────────────────────────────────────────── */

.global-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(200px, 360px);
  align-items: center;
  gap: 16px;
  min-height: var(--header-min-height);
  padding: 8px 24px 8px 20px;
  background: var(--surface);
  /* Линии снизу нет: у шапки и страницы разный цвет, и на нетронутой
     странице отделять нечего. Тень приходит, когда под шапку ушёл текст, —
     и говорит именно это. */
  box-shadow: none;
  transition: box-shadow 120ms ease;
}

.global-header.is-scrolled {
  box-shadow: var(--shadow-card);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-strong);
  /* Межбуквенное расстояние сохраняет читаемость короткого имени программы. */
  letter-spacing: 0.06em;
  text-decoration: none;
}

/* Значок в цветной плашке, а не голой картинкой на белом: иначе он выглядит
   потерянной иконкой файла, а не знаком программы. */
.brand img {
  display: block;
  padding: 4px;
  background: var(--rail-bg);
  border-radius: var(--radius);
}

/* ── Путь ────────────────────────────────────────────────────────────────
   «Проекты › Антифрод 3 › Закон › Вопросы». Единственная навигация окна с
   14 сентября 2026: ступень — ссылка, стрелка при ступени — то, что внутри.
   Служебный слой: мелко, спокойно и в одну строку — указатель, а не
   заголовок. */
.path {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.path-step {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.path-link,
.path-here {
  display: inline-block;
  max-width: 28ch;
  padding: 5px 6px;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  text-overflow: ellipsis;
  border-radius: var(--radius);
}

.path-link:hover,
.path-link:focus-visible {
  color: var(--text);
  background: var(--surface-muted);
}

/* Место, где человек стоит сейчас, набрано плотнее остальных звеньев: путь
   читают справа налево, и начинают с него. */
.path-here {
  color: var(--text);
  font-weight: var(--weight-strong);
}

.path-sep {
  padding: 0 2px;
  color: var(--text-tertiary);
  user-select: none;
}

.path-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 26px;
  padding: 0;
  color: var(--text-tertiary);
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

.path-arrow:hover,
.path-arrow:focus-visible,
.path-arrow[aria-expanded="true"] {
  color: var(--text);
  background: var(--surface-muted);
}

.path-arrow svg {
  transition: transform 120ms ease;
}

.path-arrow[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* Список под стрелкой возникает от неё, а не появляется рывком посреди
   шапки: за 120 мс глаз успевает понять, откуда он взялся. */
.path-menu {
  /* Относительно окна, а не строки пути (работа 91): строка обрезает всё
     за своим краем, и список внутри неё не показывался. Место ставит окно
     по прямоугольнику стрелки. */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  min-width: 240px;
  max-width: 360px;
  max-height: min(60vh, 520px);
  margin: 0;
  padding: 6px;
  overflow: auto;
  list-style: none;
  white-space: normal;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-raised);
  transform-origin: top left;
  animation: menu-in 120ms ease-out;
}

.path-menu a {
  display: block;
  padding: 8px 12px;
  color: var(--text);
  font-size: var(--text-base);
  text-decoration: none;
  border-radius: var(--radius);
}

.path-menu a:hover,
.path-menu a:focus-visible {
  background: var(--surface-muted);
}

.path-menu a[aria-current="page"] {
  font-weight: var(--weight-strong);
  box-shadow: inset 3px 0 0 var(--accent);
}

.path-menu-note {
  padding: 8px 12px;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

.path-menu-after-divider {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}

@keyframes menu-in {
  from {
    opacity: 0;
    transform: scale(0.98);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.search-command {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
  padding: 0 8px 0 16px;
  color: var(--text-tertiary);
  text-align: left;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.search-command:hover {
  color: var(--text-secondary);
  background: var(--surface);
  border-color: var(--border-strong);
}

kbd {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 1px 8px;
  color: var(--text-tertiary);
  font-family: inherit;
  font-size: var(--text-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* ── Каркас ──────────────────────────────────────────────────────────── */

.workspace-shell {
  display: grid;
  grid-template-columns: 1fr;
  min-height: calc(100vh - var(--header-height));
}

/* ── Страница ────────────────────────────────────────────────────────── */

#mainContent {
  min-width: 0;
  padding: 32px 32px 48px;
}

.page {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
}

/* На широком окне страница шире: столбцы получают настоящую ширину. Строку
   текста держит --measure, а не край окна, — читаемость от этого не падает. */
@media (min-width: 1500px) {
  .page {
    max-width: 1440px;
  }
}

/* Заголовок страницы отделён от содержимого линией: без неё «Главная
   проекта» и первая карточка стоят одной кучей, и глазу не за что зацепиться
   при возврате к экрану. */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.page-heading {
  min-width: 0;
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

.breadcrumbs a {
  color: inherit;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-strong);
  line-height: var(--leading-tight);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h2 {
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-strong);
  line-height: var(--leading-ui);
  letter-spacing: -0.01em;
}

h3 {
  margin-bottom: 8px;
  font-size: var(--text-base);
  font-weight: var(--weight-strong);
}

.page-subtitle,
.section-copy,
.muted {
  color: var(--text-secondary);
}

/* Длинная строка не читается: глаз теряет начало следующей. */
.page-subtitle,
.section-copy,
.empty-copy,
.summary-value,
.continue-copy {
  max-width: var(--measure);
}

.page-subtitle {
  margin-bottom: 0;
  font-size: var(--text-base);
}

/* ── Кнопки ──────────────────────────────────────────────────────────── */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 16px;
  font-size: var(--text-base);
  font-weight: var(--weight-strong);
  line-height: var(--leading-tight);
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease,
    color 120ms ease, box-shadow 120ms ease;
}

.button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.button-primary {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 1px 2px rgb(18 33 58 / 12%);
}

.button-primary:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.button-primary:active:not(:disabled) {
  background: var(--accent-press);
  border-color: var(--accent-press);
  box-shadow: none;
}

.button-secondary {
  color: var(--text);
  background: var(--surface);
  border-color: var(--border-strong);
}

.button-secondary:hover:not(:disabled) {
  background: var(--surface-muted);
  border-color: var(--text-tertiary);
}

.button-quiet {
  color: var(--text-secondary);
  background: transparent;
  border-color: var(--border);
}

.button-quiet:hover:not(:disabled) {
  color: var(--text);
  background: var(--surface-muted);
  border-color: var(--border-strong);
}

.button-danger {
  color: var(--danger);
  background: var(--surface);
  border-color: var(--danger-border);
}

.button-danger:hover:not(:disabled) {
  color: #8f1923;
  background: var(--danger-subtle);
  border-color: var(--danger);
}

.button-secondary:active:not(:disabled),
.button-quiet:active:not(:disabled),
.button-danger:active:not(:disabled),
.icon-button:active,
.search-command:active {
  transform: translateY(1px);
}

.button-full {
  width: 100%;
  justify-content: center;
}

.icon-button {
  min-height: 36px;
  padding: 8px 12px;
  color: var(--text-tertiary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.icon-button:hover {
  color: var(--text);
  background: var(--surface-muted);
  border-color: var(--border);
}

/* ── Поля ────────────────────────────────────────────────────────────── */

.registry-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.field,
.registry-search,
.filter-select,
textarea {
  width: 100%;
  min-height: 38px;
  padding: 8px 12px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.field:hover,
.registry-search:hover,
.filter-select:hover,
textarea:hover {
  border-color: var(--text-tertiary);
}

.field:focus,
.registry-search:focus,
.filter-select:focus,
textarea:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

textarea {
  min-height: 96px;
  line-height: var(--leading-text);
  resize: vertical;
}

.registry-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 28px;
  margin-bottom: 12px;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

/* ── Таблицы ─────────────────────────────────────────────────────────── */

.table-wrap {
  overflow-x: auto;
  scrollbar-gutter: stable;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.registry-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.registry-table caption {
  padding: 16px 20px 8px;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  text-align: left;
}

.registry-table th,
.registry-table td {
  padding: 16px 20px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}

.registry-table th {
  position: sticky;
  top: var(--header-height);
  z-index: 1;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--surface-muted);
}

.registry-table th,
.registry-table time,
.row-meta,
.key-values,
.status {
  font-variant-numeric: tabular-nums;
}

.registry-table td {
  font-size: var(--text-base);
}

.registry-table tbody tr:last-child td {
  border-bottom: 0;
}

.registry-table tbody tr[data-href] {
  cursor: pointer;
  transition: background 120ms ease;
}

.registry-table tbody tr[data-href]:hover,
.registry-table tbody tr[data-href]:focus-within {
  background: var(--surface-muted);
}

/* Строка под курсором помечается полосой у левого края: на длинной таблице
   одной подсветки мало — глаз теряет, в какой строке он был. */
.registry-table tbody tr[data-href] td:first-child {
  box-shadow: inset 3px 0 0 transparent;
}

.registry-table tbody tr[data-href]:hover td:first-child,
.registry-table tbody tr[data-href]:focus-within td:first-child {
  box-shadow: inset 3px 0 0 var(--accent);
}

.row-link {
  color: var(--text);
  font-size: var(--text-base);
  font-weight: var(--weight-strong);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color 120ms ease;
}

.row-link:hover {
  color: var(--accent);
}

.row-meta {
  margin-top: 4px;
  /* Абзацу браузер сам ставит снизу отступ в один кегль. Здесь кегль
     мелкий, и снизу выходило 14px — мимо лестницы. */
  margin-bottom: 12px;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

/* ── Метки состояния ─────────────────────────────────────────────────── */

.status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  max-width: 100%;
  padding: 2px 12px;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  text-align: center;
  white-space: normal;
}

.status-positive {
  color: var(--positive);
  background: var(--positive-subtle);
  border-color: var(--positive-border);
}

.status-attention {
  color: var(--attention);
  background: var(--attention-subtle);
  border-color: var(--attention-border);
}

.status-danger {
  color: var(--danger);
  background: var(--danger-subtle);
  border-color: var(--danger-border);
}

.status-accent {
  color: var(--accent);
  background: var(--accent-subtle);
  border-color: var(--accent-border);
}

/* ── Главное действие проекта ────────────────────────────────────────── */

.continue-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 24px 24px 24px 24px;
  margin-bottom: 24px;
  overflow: hidden;
  background:
    linear-gradient(180deg, var(--accent-subtle) 0%, var(--surface) 62%);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

/* Полоса у края: главное дело на экране должно отличаться от соседней
   карточки раньше, чем человек прочитает её заголовок. */
.continue-panel::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--accent);
  content: "";
}

.continue-eyebrow {
  margin-bottom: 8px;
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.continue-title {
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-strong);
  letter-spacing: -0.01em;
}

.continue-copy {
  margin: 0;
  color: var(--text-secondary);
}

/* Полоса «Что требует вас» (работа 115, полоса): та же рамка, что у
   главного дела, но цвет внимания, а не акцента - это не приглашение
   продолжить, а то, без чего дело стоит. Строки - те же, что в ленте дня. */
.needs-strip {
  margin-bottom: 24px;
  padding: 20px 24px;
  background:
    linear-gradient(180deg, var(--attention-subtle) 0%, var(--surface) 56%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.needs-strip .continue-title {
  margin-bottom: 14px;
}

.needs-tail {
  margin: 12px 0 0;
}

/* Рассказ о проекте (работа 119): три строки над плитками - о чём закон,
   где он, о чём спорят. Подписи слева столбиком, как поля карточки, текст
   в меру строки. Без рамки: это не панель, а первые слова экрана. */
.story {
  display: grid;
  gap: 12px;
  margin-bottom: 28px;
}

.story-row {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
}

.story-label {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.story-text {
  max-width: 96ch;
  line-height: var(--leading-text);
}

.story-list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.story-ours {
  color: var(--text-secondary);
}

/* «О чём закон» подробнее (работа 136): вводная фраза, суть пунктами,
   оговорка серым. Пункты с точкой-маркером: это перечень, а не ссылки. */
.story-lead {
  margin: 0 0 6px;
}

.story-essence {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 1.1em;
  list-style: disc;
}

.story-essence li::marker {
  color: var(--text-tertiary);
}

.story-caveat {
  margin: 6px 0 0;
  color: var(--text-secondary);
}

.story-caveat-label {
  font-weight: var(--weight-strong);
}

/* «Коротко для начальника» (работа 140) - под текстом рассказа, в его
   столбце: кнопка про рассказ, а не про проект. */
.story-actions {
  margin-top: -4px;
}

.story-overdue {
  color: var(--danger);
}

@media (max-width: 640px) {
  .story-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
}

/* ── Разделы ─────────────────────────────────────────────────────────── */

.section {
  margin-top: 32px;
}

/* Заголовок раздела отделяется волосяной линией — иначе разделы на длинной
   странице различаются только жирностью строки, и глаз их не ловит. */
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.section-heading h2,
.section-heading p {
  margin-bottom: 0;
}

.plain-list {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.plain-list > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.plain-list > li:focus-within {
  background: var(--accent-subtle);
}

.plain-list > li:last-child {
  border-bottom: 0;
}

/* Шаг на главной: сверху — что от вас нужно, ниже — по какому поводу и
   зачем. Раньше первой строкой стоял объект, и список читался как отчёт. */
.step-list .step-copy {
  margin-top: 4px;
  max-width: var(--measure);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

/* Название части и её пометка в одной строке. Без промежутка «Готово»
   прилипало к названию и читалось одним словом. */
.setup-part-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}

/* Шаги донастройки и «как работать»: нумерованный список, где номер виден.
   Порядок здесь — не оформление, а смысл: принять нечего, пока не разобрано,
   и агента ставят до того, как ждать от него разбора. */
.setup-steps {
  margin: 12px 0 0;
  padding-left: 24px;
  max-width: var(--measure);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.setup-steps > li + li {
  margin-top: 8px;
}

/* «Как работать с программой» — то же, но шаг с заголовком и абзацем: этот
   список читают целиком, а не сверяются с ним по ходу настройки. */
.setup-steps-wide {
  color: var(--text);
  font-size: var(--text-base);
}

.setup-steps-wide > li + li {
  margin-top: 16px;
}

.setup-steps-wide .section-copy {
  margin-top: 4px;
}

/* Всё, что не требует решения сегодня, свёрнуто: главная — список шагов. */
.details-block {
  margin-top: 32px;
}

.details-block > summary {
  font-family: var(--font-ui);
  font-weight: var(--weight-strong);
  cursor: pointer;
}

.details-block > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.details-part {
  margin-top: 20px;
}

.details-part-title {
  margin-bottom: 12px;
  font-size: var(--text-base);
}

/* Дата слева, что случилось справа. Столбец даты сжимается: в узком правом
   поле жёсткие 160 точек оставляли на название сто с небольшим, и имя файла
   вылезало за край карточки. */
.activity-line {
  display: grid;
  grid-template-columns: minmax(0, 160px) minmax(0, 1fr);
  gap: 16px;
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

.activity-date {
  color: var(--text-tertiary);
}

/* ── Документы ───────────────────────────────────────────────────────── */

.document-list {
  display: grid;
  gap: 12px;
}

.document-row {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(300px, 1.5fr) 180px;
  gap: 20px;
  align-items: center;
  padding: 20px;
  color: inherit;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: border-color 120ms ease, box-shadow 120ms ease,
    transform 120ms ease;
}

.document-row:hover {
  border-color: var(--accent-border);
  box-shadow: var(--shadow-raised);
}

.document-row:focus-visible {
  border-color: var(--focus);
}

.document-title {
  color: var(--text);
  font-size: var(--text-base);
  font-weight: var(--weight-strong);
  text-decoration: none;
}

.revision-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
}

.revision-node {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 12px;
  font-size: var(--text-sm);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  white-space: nowrap;
}

.revision-node-current {
  color: var(--accent);
  font-weight: var(--weight-strong);
  background: var(--accent-subtle);
  border-color: var(--accent-border);
}

.revision-arrow {
  color: var(--text-tertiary);
}

/* ── Карточки и панели ───────────────────────────────────────────────── */

.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr);
  gap: 24px;
}

.panel {
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.panel + .panel {
  margin-top: 16px;
}

.key-values {
  display: grid;
  grid-template-columns: minmax(140px, 0.7fr) minmax(0, 1.4fr);
  gap: 12px 20px;
  margin: 0;
  font-size: var(--text-base);
}

.key-values dt {
  color: var(--text-tertiary);
}

.key-values dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.summary-value,
.review-statement,
.evidence,
.proposal {
  overflow-wrap: anywhere;
}

/* ── История ─────────────────────────────────────────────────────────── */

.timeline {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline::before {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 7px;
  width: 2px;
  content: "";
  background: var(--border);
}

.timeline > li {
  position: relative;
  padding: 0 0 20px 32px;
}

.timeline > li:last-child {
  padding-bottom: 0;
}

.timeline > li::before {
  position: absolute;
  top: 6px;
  left: 2px;
  width: 12px;
  height: 12px;
  content: "";
  background: var(--surface);
  border: 3px solid var(--border-strong);
  border-radius: 50%;
}

.timeline > li.is-current::before {
  border-color: var(--accent);
}

/* Месяц в ленте «Как шёл проект» — разделитель, а не событие: точки на линии
   у него быть не должно. */
.timeline > li.timeline-month {
  padding-top: 12px;
  padding-bottom: 8px;
}

.timeline > li.timeline-month::before {
  content: none;
}

.timeline-month-title {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--weight-strong);
  color: var(--text-secondary);
}

.timeline-body {
  margin: 8px 0 0;
  max-width: 70ch;
  color: var(--text-secondary);
}

.revision-card {
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.revision-card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  font-size: var(--text-base);
  font-weight: var(--weight-strong);
}

.comparison-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 16px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

.comparison-row:last-child {
  border-bottom: 0;
}

.tabs {
  display: flex;
  gap: 4px;
  padding-bottom: 1px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.tab {
  min-height: 38px;
  padding: 8px 12px;
  color: var(--text-secondary);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease;
}

.tab:hover {
  color: var(--text);
}

.tab[aria-selected="true"] {
  color: var(--accent);
  font-weight: var(--weight-strong);
  border-bottom-color: var(--accent);
}

/* ── Вопрос ──────────────────────────────────────────────────────────── */

/* Страница вопроса = карточка «Разбора» без складки (работа 116). */
.question-card {
  margin-top: 16px;
  padding: 16px 22px;
  background: var(--tile);
  border: 1px solid color-mix(in srgb, var(--border) 60%, var(--tile));
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.question-card > .card-body {
  padding: 0;
}

.question-card .card-rows {
  margin-top: 0;
}

.question-state {
  margin: 12px 0 0;
  color: var(--text-secondary);
}

.card-voices-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.card-voices-head > .card-label {
  margin: 0 0 8px;
}

/* Наша позиция у статьи законопроекта (работа 139) - открытой строкой над
   складкой «Кто что говорит». */
.bill-stand {
  margin: 0 0 6px;
  color: var(--text-primary);
}

.bill-stand-label {
  font-weight: var(--weight-strong);
}

/* «Кто с нами» (работа 138) - строкой над списком участников. */
.card-sides {
  margin: -2px 0 10px;
  font-weight: var(--weight-strong);
}

.summary-block {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.summary-block:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.summary-label {
  margin-bottom: 4px;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.summary-value {
  margin: 0;
  white-space: pre-wrap;
}

/* Суть вопроса разложена по предложениям: между ними нужен воздух, иначе
   абзацы снова сливаются в одну строку. */
.summary-value + .summary-value {
  margin-top: 8px;
}

.prose-lead {
  color: var(--text-secondary);
  font-weight: var(--weight-strong);
}

.author-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 26px;
  padding: 4px 12px;
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
}

/* ── Проверка разбора ────────────────────────────────────────────────── */

.review-progress {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.progress-track {
  flex: 1;
  height: 6px;
  overflow: hidden;
  background: var(--surface-sunken);
  border-radius: 999px;
}

.progress-value {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 200ms ease;
}

.review-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.8fr);
  gap: 24px;
}

.review-item {
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.review-item + .review-item {
  margin-top: 16px;
}

.review-item.is-active {
  border-color: var(--accent-border);
  box-shadow: inset 3px 0 0 var(--accent), var(--shadow-raised);
}

.review-item-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.review-statement {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-strong);
  line-height: var(--leading-ui);
  letter-spacing: -0.01em;
}

.revision-card-heading {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-ui);
}

.evidence {
  padding: 16px 16px;
  margin: 16px 0;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.evidence-label {
  margin-bottom: 8px;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.evidence ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.evidence li + li {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.proposal {
  padding: 16px 16px;
  margin: 16px 0;
  background: var(--accent-subtle);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius);
}

.review-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.application-panel {
  position: sticky;
  top: calc(var(--header-height) + 20px);
  align-self: start;
}

/* Список принятого не должен вырастать во весь экран: при трёх десятках
   выводов панель переставала помещаться, и кнопки уходили за край. */
.application-panel ul {
  max-height: 40vh;
  overflow-y: auto;
}

/* ── Пусто и ошибки ──────────────────────────────────────────────────── */

.empty-state,
.error-state {
  padding: 32px 32px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.empty-state h2,
.error-state h2 {
  margin-bottom: 8px;
}

.empty-copy {
  margin: 0 auto;
  color: var(--text-secondary);
}

.error-state {
  text-align: left;
  background: var(--danger-subtle);
  border-color: var(--danger-border);
}

.error-state .button {
  margin-top: 16px;
}

.error-state .button + .button {
  margin-left: 8px;
}

.empty-state .button {
  margin-top: 20px;
}

.inline-alert .button {
  margin-top: 8px;
  margin-left: 8px;
}

.inline-alert {
  padding: 12px 16px;
  margin-bottom: 16px;
  color: var(--danger);
  background: var(--danger-subtle);
  border: 1px solid var(--danger-border);
  border-radius: var(--radius);
}

.inline-alert-attention {
  color: var(--attention);
  background: var(--attention-subtle);
  border-color: var(--attention-border);
}

.inline-alert-neutral {
  color: var(--text);
  background: var(--accent-subtle);
  border-color: var(--accent-border);
}

.inline-alert-positive {
  color: var(--positive);
  background: var(--positive-subtle);
  border-color: var(--positive-border);
}

/* ── Загрузка ────────────────────────────────────────────────────────── */

.page-loading {
  display: grid;
  gap: 16px;
  max-width: 900px;
  padding-top: 20px;
}

.loading-bar {
  display: block;
  height: 52px;
  background: linear-gradient(90deg, #e8edf4 25%, #f4f7fa 50%, #e8edf4 75%);
  background-size: 200% 100%;
  border-radius: var(--radius);
  animation: loading 1.4s linear infinite;
}

.loading-bar-short {
  width: 62%;
}

@keyframes loading {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

/* ── Окна ────────────────────────────────────────────────────────────── */

dialog {
  padding: 0;
  color: var(--text);
  background: transparent;
  border: 0;
}

dialog::backdrop {
  background: rgb(18 33 58 / 46%);
  backdrop-filter: blur(1.5px);
}

/* Окно возникает, а не появляется рывком: 120 мс прозрачности и лёгкого
   роста. Настройка «меньше движения» гасит и это — общим правилом ниже. */
dialog[open] {
  animation: dialog-in 120ms ease-out;
}

@keyframes dialog-in {
  from {
    opacity: 0;
    transform: scale(0.98);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.command-dialog {
  width: min(820px, calc(100vw - 80px));
  max-height: calc(100vh - 32px);
  margin-top: min(90px, 8vh);
}

.material-dialog {
  width: min(720px, calc(100vw - 80px));
  max-height: calc(100vh - 32px);
}

.dialog-frame {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-layer);
}

.dialog-frame .page {
  padding: 4px;
}

.dialog-frame .page-header {
  margin-bottom: 12px;
}

.dialog-frame .page h1 {
  font-size: var(--text-lg);
}

.dialog-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid var(--border);
}

.dialog-search-row input {
  min-height: 46px;
  padding: 8px 12px;
  font-size: var(--text-base);
  border: 0;
  outline: 0;
}

.dialog-search-row input:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
  border-radius: var(--radius);
}

.search-scope {
  padding: 8px 24px;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  background: var(--surface-muted);
  border-bottom: 1px solid var(--border);
}

.command-results {
  max-height: min(620px, calc(100vh - 250px));
  padding: 12px;
  overflow-y: auto;
}

.command-group-title {
  margin: 0;
  padding: 12px 12px 4px;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Находки группами по видам (работа 125): «Вопросы 3», «Мнения 2»; имя
   проекта над ними - только поперёк проектов. */
.command-type-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 8px 0 0;
  padding: 10px 12px 2px;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
}

.command-type-count {
  color: var(--text-tertiary);
  font-weight: var(--weight-normal);
  font-variant-numeric: tabular-nums;
}

.command-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 12px 12px;
  color: var(--text);
  text-align: left;
  text-decoration: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
}

.command-result:hover,
.command-result:focus-visible {
  background: var(--accent-subtle);
  border-color: var(--accent-border);
}

.command-result-path,
.command-result-snippet {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.command-result mark {
  color: inherit;
  background: #ffe8a3;
  border-radius: var(--radius);
}

.material-frame {
  padding: 24px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}

.dialog-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}

.dialog-heading h2 {
  margin-bottom: 4px;
  font-size: var(--text-lg);
}

.dialog-heading p {
  margin: 0;
  color: var(--text-secondary);
}

.upload-zone {
  display: grid;
  place-items: center;
  min-height: 200px;
  padding: 24px;
  text-align: center;
  background: var(--surface-muted);
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

/* Поле подсвечивается, когда на него навели, тащат файл или пришли с
   клавиатуры. Просто открытое окно подсвечивать незачем: поле получает
   фокус программно, и зона выглядела нажатой всегда. */
.upload-zone:hover,
.upload-zone.is-dragging,
.upload-zone:has(input:focus-visible) {
  background: var(--accent-subtle);
  border-color: var(--accent);
}

.upload-zone:has(input:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.upload-zone input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.upload-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-strong);
}

.upload-copy {
  color: var(--text-secondary);
}

.material-progress {
  margin-top: 20px;
}

.panel > .button-full {
  margin-top: 16px;
}

.revision-card + .revision-card {
  margin-top: 12px;
}

.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 24px;
}

/* ── Журнал и уведомления ────────────────────────────────────────────── */

.activity-log {
  position: fixed;
  top: calc(var(--header-height) + 12px);
  right: 12px;
  z-index: 70;
  width: 390px;
  max-height: calc(100vh - var(--header-height) - 24px);
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-layer);
}

.activity-log-header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.toast-region {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 100;
  display: grid;
  gap: 8px;
  width: min(420px, calc(100vw - 40px));
}

.toast {
  padding: 12px 16px;
  color: #fff;
  background: #1c2a44;
  border-radius: var(--radius);
  box-shadow: var(--shadow-layer);
  animation: toast-in 120ms ease-out;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.toast-error {
  background: #7f1d26;
}

details > summary {
  min-height: 38px;
  padding: 8px 0;
  cursor: pointer;
}

details[open] > summary {
  margin-bottom: 12px;
}

/* ── Узкое окно ──────────────────────────────────────────────────────── */

@media (max-width: 1180px) {
  .global-header {
    grid-template-columns: auto minmax(0, 1fr) minmax(160px, 260px);
    gap: 12px;
    padding-right: 16px;
  }

  #mainContent {
    padding-right: 24px;
    padding-left: 24px;
  }

  .detail-grid,
  .review-layout {
    grid-template-columns: 1fr;
  }

  .document-row {
    grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.2fr);
    align-items: start;
  }

  /* В одну колонку панель применения оказывается под всем списком выводов,
     и до кнопки приходилось листать полсотни карточек. Прижимаем её к низу
     экрана: решение видно всегда, а состав применения остаётся под рукой. */
  .application-panel {
    position: sticky;
    top: auto;
    bottom: 0;
    align-self: end;
    z-index: 5;
  }

  /* Прижатая к низу панель лежит поверх карточек: без верхней границы и
     заметной тени она сливалась с ними и выглядела частью вывода. */
  .application-panel > .panel {
    /* Панель прижата к низу и лежит поверх карточек: выше трети экрана ей
       вырастать нельзя, иначе она закрывает то, что проверяют. */
    max-height: 38vh;
    overflow-y: auto;
    border-top: 2px solid var(--accent-border);
    border-radius: var(--radius) var(--radius) 0 0;
    box-shadow: 0 -12px 28px -10px rgb(18 33 58 / 30%);
  }

  .application-panel .section-copy {
    display: none;
  }

  .application-panel ul {
    max-height: 96px;
    overflow-y: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* «Меньше прозрачности» в настройках системы: затемнение под окном без
   размытия и плотнее — размытый фон для такого человека не фон, а шум. */
@media (prefers-reduced-transparency: reduce) {
  dialog::backdrop {
    background: rgb(18 33 58 / 62%);
    backdrop-filter: none;
  }
}

@media (forced-colors: active) {
  .status,
  .continue-panel,
  .path-menu a[aria-current="page"],
  .review-item.is-active {
    border: 1px solid CanvasText;
  }

  .button,
  .icon-button,
  .search-command,
  .upload-zone {
    border: 1px solid ButtonText;
  }

  .progress-value {
    background: Highlight;
  }

  .command-result mark {
    color: HighlightText;
    background: Highlight;
  }
}

/* ── Исходные файлы: открыть оригинал и прочитать текст ────────────── */

.artifact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.artifact-actions .row-meta {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.artifact-actions .button {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 4px 12px;
  font-size: var(--text-sm);
}

.artifact-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 120px;
}

.artifact-text-body {
  max-height: min(60vh, 640px);
  overflow: auto;
  padding: 20px 24px;
  /* Документ и читать надо как документ: моноширинный шрифт превращал письмо
     в распечатку с принтера. Переносы строк из документа сохраняем. */
  font-family: var(--font-document);
  font-size: var(--text-base);
  line-height: var(--leading-doc);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* ── Ход работы агента ─────────────────────────────────────────────── */

.agent-feed {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0;
}

.agent-feed:empty {
  display: none;
}

.agent-line {
  display: flex;
  align-items: center;
  gap: 12px;
}

.agent-line-title {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: var(--weight-strong);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-line-time {
  flex: 0 0 auto;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* «Агент работает» (работа 127) - не кольцо из рамки, а наш значок:
   искра дышит (агент думает), у сборки документа его строки прописываются
   одна за другой. Движение здесь сообщает «программа жива», поэтому оно
   бесконечное; в остальных местах значок двигается один раз. */
.agent-spinner {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--accent);
}

.agent-spinner-thinking {
  transform-origin: center;
  animation: icon-breathe 1.8s ease-in-out infinite;
}

@keyframes icon-breathe {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.14); opacity: 1; }
}

.agent-spinner-writing path:nth-child(n+3) {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: icon-write 1.6s var(--ease-out, ease-out) infinite;
}

.agent-spinner-writing path:nth-child(4) {
  animation-delay: 0.35s;
}

.agent-spinner-writing path:nth-child(5) {
  animation-delay: 0.7s;
}

@keyframes icon-write {
  0% { stroke-dashoffset: 1; }
  45%, 75% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

.agent-bar {
  height: 3px;
  overflow: hidden;
  background: var(--surface-sunken);
  border-radius: 999px;
}

.agent-bar span {
  display: block;
  width: 34%;
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  animation: agent-slide 1.6s ease-in-out infinite;
}

@keyframes agent-slide {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(320%); }
}

.agent-steps summary {
  cursor: pointer;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.agent-steps p {
  margin: 4px 0 0 16px;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.agent-feed-error {
  margin: 0;
  color: var(--danger);
  font-size: var(--text-sm);
}

@media (prefers-reduced-motion: reduce) {
  .agent-spinner,
  .agent-spinner path,
  .agent-bar span {
    animation: none;
  }
}

/* ── Повторяющийся блок внутри панели ───────────────────────────────── */

/* Четыре образца документов подряд читались одним полотном: одинаковые
   абзацы без границ, и глазу не за что зацепиться, чтобы понять, где
   кончается один и начинается другой. Рамка и заголовок делают из полотна
   список вещей. Тот же приём годится везде, где внутри панели повторяется
   однотипный блок. */
.card-block {
  padding: 16px 20px;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.card-block + .card-block {
  margin-top: 12px;
}

/* Заголовок такого блока — настоящий заголовок, а не мелкая подпись
   заглавными: по нему находят нужный образец, пробегая страницу глазами. */
.card-block-title {
  margin: 0 0 8px;
  font-size: var(--text-base);
  font-weight: var(--weight-strong);
  line-height: var(--leading-ui);
}

/* Между заголовком блока и его содержимым — своя мера: подписи идут
   вплотную, а органы управления отделены. */
.card-block .row-meta {
  max-width: var(--measure);
}

/* Имя файла — то, что человек сверяет глазами: «тот ли образец дошёл».
   В сплошной строке оно теряется среди слов, поэтому идёт на подложке. */
.file-name {
  padding: 1px 8px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--text);
  font-weight: var(--weight-strong);
  overflow-wrap: anywhere;
}

/* Кнопки просмотра идут сразу за строкой о файле: своя черта рвала бы
   описание пополам — черта здесь одна, перед органами управления. */
.card-block > .artifact-actions {
  margin-top: 12px;
  padding-top: 0;
  border-top: 0;
}

.card-block-controls {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.card-block-controls .review-actions {
  margin-top: 0;
}

/* Заголовок панели отделяется волосяной линией: до неё «Образцы
   документов» читались как ещё один жирный абзац среди прочих. */
.panel > h2 {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

/* Вводная строка панели стоит сразу под заголовком и не должна висеть
   оторванной от него. */
.panel > h2 + .panel-intro {
  margin-top: -4px;
  margin-bottom: 20px;
  max-width: var(--measure);
}

/* ── Настройка разбора документов ──────────────────────────────────── */

.settings-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 460px;
  margin-top: 16px;
}

.card-block .settings-field {
  margin-top: 0;
  max-width: 420px;
}

/* Выбор файла — такое же поле, как остальные: до этого он выглядел голой
   системной кнопкой посреди оформленных полей. */
.card-block input[type="file"] {
  width: 100%;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font: inherit;
  font-size: var(--text-sm);
}

.card-block input[type="file"]:disabled {
  color: var(--text-tertiary);
  background: var(--surface-sunken);
}

.settings-field select {
  width: 100%;
  min-height: 38px;
  padding: 8px 12px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}

.agent-feed-status {
  margin: 0 0 4px;
  font-weight: var(--weight-strong);
  color: var(--text);
}

.agent-feed-status::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 8px;
  vertical-align: middle;
  background: currentColor;
  border-radius: 50%;
  animation: agent-pulse 1.4s ease-in-out infinite;
}

@keyframes agent-pulse {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}

/* ── Очередь заданий ───────────────────────────────────────────────────────
   Разбор идёт в ядре, а не во вкладке: окно можно закрыть и заниматься
   другим. Полоса внизу показывает, что происходит, и даёт вернуться. */
.task-strip {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 90;
  width: min(520px, calc(100vw - 40px));
}

.task-strip-items {
  display: grid;
  gap: 8px;
}

.task-strip-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-raised);
}

.task-strip-text {
  flex: 1;
  min-width: 0;
}

.task-strip-item .task-strip-title {
  overflow: hidden;
  font-weight: var(--weight-strong);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-strip-item .task-strip-state {
  overflow: hidden;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.task-strip-item.is-done .task-strip-state {
  color: var(--positive);
  font-weight: var(--weight-strong);
}

.task-strip-item.is-failed .task-strip-state {
  color: var(--danger);
  font-weight: var(--weight-strong);
}

.task-strip-item .task-strip-time {
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.task-strip-item .button {
  min-height: 30px;
  padding: 4px 12px;
  font-size: var(--text-sm);
}

.task-strip-item.is-done {
  border-color: var(--accent-border);
  box-shadow: inset 3px 0 0 var(--accent), var(--shadow-raised);
}

.task-strip-item.is-failed {
  border-color: var(--danger-border);
  box-shadow: inset 3px 0 0 var(--danger), var(--shadow-raised);
}

/* Вставка обсуждения стоит рядом с загрузкой файла: это второй равноправный
   способ пополнить проект, а не кнопка среди прочих внизу окна. */
.material-or {
  margin: 12px 0 0;
  color: var(--text-secondary);
  font-size: var(--text-base);
}

.material-or .button {
  min-height: 30px;
  padding: 4px 12px;
  font-size: var(--text-sm);
}

/* Файлы законопроекта из СОЗД. Их бывает под сорок, поэтому список со своей
   прокруткой: иначе кнопка «взять в проект» уезжает за край окна. */
.sozd-files {
  max-height: 340px;
  margin-top: 12px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.sozd-file {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

.sozd-file:last-child {
  border-bottom: 0;
}

.sozd-file:hover {
  background: var(--surface);
}

.sozd-file input {
  margin-top: 4px;
  flex: none;
}

.sozd-file-title {
  display: block;
  max-width: var(--measure);
  font-weight: var(--weight-strong);
}

/* Что говорят снаружи. Записи из каналов — сплошной текст без заголовков, и
   без явных границ они сливаются в одно полотно. */
.monitor-posts {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

/* Лента записей. Строка, а не карточка: карточка стоила 299 точек на запись,
   строка стоит 165, а говорят они одно и то же. Разделяет записи одна линия —
   рамка вокруг каждой на двадцати записях становится решёткой. */
.monitor-rows {
  margin-top: 16px;
  border-top: 1px solid var(--border);
}

.monitor-row {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.monitor-row .monitor-body,
.monitor-row .long-text {
  margin: 4px 0 0;
}

/* Решения при строке, а не при карточке: кнопка в полный рост стоит треть
   строки, а нажимают её на одной записи из двадцати. Ростом 32 точки она
   остаётся кнопкой, но перестаёт быть главным, что видно в ленте. */
.monitor-row .review-actions {
  margin-top: 6px;
  gap: 8px;
}

.monitor-row .review-actions .button {
  min-height: 32px;
  padding: 4px 12px;
}

/* «Показать ещё» — под лентой, не в ней: это не запись. */
.monitor-stream > .button {
  margin-top: 12px;
}

.monitor-post-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: baseline;
}

.monitor-source {
  font-weight: var(--weight-strong);
  color: var(--text);
}

.monitor-forward {
  color: var(--text-secondary);
}

.monitor-body {
  max-width: var(--measure);
  margin: 12px 0 12px;
  white-space: pre-wrap;
}

/* Строка списка: слева имя, справа действия над ним. Так перечисляются и
   источники обхода, и участники совещания — список по смыслу один и тот же, и
   разъезжаться им ни к чему. */
.monitor-source-row,
.participant-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.monitor-source-row:last-child,
.participant-row:last-child {
  border-bottom: 0;
}

.monitor-add {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}

.monitor-add .input {
  min-width: 260px;
  flex: 1 1 260px;
}

/* Предложенные имена — не список, а набор кнопок: нажал и следишь. */
.monitor-suggested {
  margin-top: 8px;
}

/* Слова поиска — облако, а не список: их читают глазами целиком, чтобы
   увидеть, по чему программа ищет. Слово и крестик стоят вплотную и выглядят
   одной плашкой: два отдельных «кнопочных» прямоугольника читались бы как
   два разных действия над разными словами. */
.monitor-key-list {
  gap: 12px 12px;
  margin-top: 12px;
}

.monitor-key {
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-muted);
  overflow: hidden;
}

.monitor-key .button {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.monitor-key-word {
  padding-right: 8px;
}

.monitor-key-drop {
  padding-left: 8px;
  font-size: var(--text-base);
  line-height: var(--leading-tight);
  color: var(--text-secondary);
}

/* Приостановленное слово всё ещё в списке, но ничего не приносит: показать
   его наравне с работающими значило бы соврать. */
.monitor-key.is-off {
  opacity: 0.6;
}

.monitor-key-mark {
  padding: 0 4px;
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.monitor-key-input {
  min-width: 240px;
}

.monitor-speakers .row-meta {
  max-width: var(--measure);
}

.monitor-filters {
  margin-top: 16px;
}

.monitor-filters .is-current {
  font-weight: var(--weight-strong);
  text-decoration: underline;
}

/* Переключатель с подписью. Две кнопки посреди страницы человек не прочёл
   как выбор — он не понял, что они делают. Подпись слева говорит, чем
   управляют, а взятое положение видно по заливке. */
.picker {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 20px 0 12px;
}

.picker-label {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.picker-options {
  display: flex;
  gap: 8px;
  padding: 4px;
  background: var(--surface-sunken);
  border-radius: var(--radius);
}

.picker-options .is-current {
  font-weight: var(--weight-strong);
}

/* ── Карта спикеров ──────────────────────────────────────────────────── */

/* Названия вопросов длинные, и колонка вопроса — единственная, которой нужна
   ширина: имена спикеров короткие, а в клетке два слова. */
.speaker-map {
  min-width: 640px;
}

.speaker-map th[scope="row"] {
  width: 34%;
  font-weight: var(--weight-strong);
  background: transparent;
}

/* Имена в шапке — заглавными, как в остальных таблицах, они читаются стеной:
   «ВЯЧЕСЛАВ ВОЛОДИН, ПРЕДСЕДАТЕЛЬ ГОСУДАРСТВЕННОЙ ДУМЫ» глазом не берётся. */
.speaker-map th {
  font-size: var(--text-sm);
  letter-spacing: normal;
  text-transform: none;
}

.speaker-map td {
  vertical-align: middle;
}

/* Клетка — кнопка, и нажимается вся: попадать в мелкую ссылку внутри неё
   человеку не нужно. */
.map-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  width: 100%;
  padding: 8px 12px;
  text-align: left;
}

/* Клетка должна выглядеть нажимаемой. Плоской её принимали за подпись и
   не пробовали нажать — «кнопочки не кликабельны». */
.map-cell > span:first-child {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.map-cell:hover {
  background: var(--accent-subtle);
}

.map-cell.is-current {
  font-weight: var(--weight-strong);
  border-color: var(--border-strong);
  background: var(--accent-subtle);
}

/* Место, ради которого текст и открыли: замечание — это цитата из письма на
   тридцать страниц, и искать её глазами не нужно. */
.artifact-text-body mark {
  padding: 2px 0;
  background: var(--attention-subtle);
  box-shadow: 0 0 0 3px var(--attention-subtle);
}

/* ── Кто что сказал ──────────────────────────────────────────────────────
   Цитата здесь — главное. Она набрана как документ, а не как интерфейс:
   чужая речь и наши подписи не должны выглядеть одним голосом. */

.quote {
  max-width: var(--measure);
  margin: 12px 0 8px;
  padding: 12px 16px;
  color: var(--text);
  font-family: var(--font-document);
  font-size: var(--text-base);
  line-height: var(--leading-doc);
  white-space: pre-wrap;
  background: var(--surface-muted);
  border-left: 3px solid var(--border-strong);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chip-list > li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.quote-block {
  margin-top: 16px;
}

/* Текст со страницы показывается как есть, абзацами. Без переноса строк он
   уезжал за край окна, и проверить документ глазами было нельзя. */
pre.quote-block {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 320px;
  overflow-y: auto;
  font: inherit;
  color: var(--text-secondary);
}

.quote-block + .quote-block {
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* Как это разбиралось: попытки друг под другом, каждая отбита линией. */
.journal-attempt + .journal-attempt {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.journal-attempt h3 {
  margin: 16px 0 4px;
  font-size: var(--text-base);
}

.journal-file {
  margin-top: 4px;
}

/* Файл журнала показывается как есть: это запись работы, а не текст для
   чтения, и переносить в ней строки по-своему нельзя — собьётся смысл. */
pre.journal-body {
  margin: 8px 0 0;
  padding: 12px;
  max-height: 360px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: var(--text-sm);
  line-height: var(--leading-text);
  color: var(--text-secondary);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.voice-more {
  margin-top: 12px;
}

.voice-more > summary {
  color: var(--accent);
  font-size: var(--text-base);
  font-weight: var(--weight-strong);
  cursor: pointer;
}

/* Список внутри карточки не должен рисовать вторую рамку вокруг первой:
   достаточно линий между участниками. */
.panel > .plain-list {
  margin-top: 16px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.panel > .plain-list > li {
  display: block;
  padding: 20px 0;
}

.panel > .plain-list > li:first-child {
  padding-top: 4px;
}

.panel > .plain-list > li:focus-within {
  background: transparent;
}

.voice-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}

/* ── Свёрнутый блок ──────────────────────────────────────────────────────
   У одного участника бывает пятнадцать замечаний, и до следующего надо было
   прокрутить несколько экранов. Сверху перечень — из чего выбирать. */
.fold + .fold {
  margin-top: 12px;
}

.fold > summary {
  min-height: 44px;
}

.fold-title {
  font-size: var(--text-base);
  font-weight: var(--weight-strong);
  line-height: var(--leading-ui);
}

/* Имя участника в закрытом блоке — заголовок, а не подпись: по нему находят
   нужного, пробегая страницу глазами. */
.fold-title .author-chip {
  font-size: var(--text-base);
  font-weight: var(--weight-strong);
}

.fold-meta {
  display: block;
  margin-top: 4px;
  max-width: var(--measure);
  color: var(--text-secondary);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
}

.fold-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.fold-switch .button {
  min-height: 32px;
  padding: 4px 12px;
  font-size: var(--text-sm);
}

/* Первый блок внутри уже отбит открытой сводкой: второй отступ подряд
   выглядел бы разрывом. */
.fold-body > .summary-block:first-child,
.fold-body > .plain-list:first-child {
  margin-top: 0;
}

.voice-head .row-meta {
  margin-top: 0;
}

.voice > .summary-value {
  max-width: var(--measure);
}

.row-action {
  color: var(--accent);
}

.row-action:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

.quote-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: 8px;
}

.quote-foot > p {
  margin: 0;
}

.quote-foot .artifact-actions {
  margin: 0;
  padding: 0;
  border-top: 0;
}

.voices-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  padding: 16px 20px;
  margin-bottom: 4px;
}

.voices-bar .chip-list {
  flex: 1 1 auto;
}

.voices-checks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.voices-bar-note {
  flex: 1 0 100%;
  margin: 0;
}

/* ── Формы в окнах ───────────────────────────────────────────────────────
   Подпись поля и само поле — разной величины и веса: иначе строка «Наша
   позиция» читается как часть ответа. */

.dialog-frame label:not(.upload-zone) {
  display: block;
  margin-bottom: 20px;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
}

.dialog-frame label:not(.upload-zone) > .field,
.dialog-frame label:not(.upload-zone) > textarea,
.dialog-frame label:not(.upload-zone) > .filter-select {
  display: block;
  width: 100%;
  margin-top: 8px;
  color: var(--text);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
}

/* Многострочное поле объявлено на три строки, а по классу получало высоту
   однострочного: в него не помещалась и одна фраза. */
textarea.field {
  min-height: 96px;
}

/* ── Срез проекта ────────────────────────────────────────────────────── */

.snapshot {
  margin-bottom: 24px;
}

.snapshot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px 24px;
  margin: 0;
}

.snapshot-cell dt {
  margin-bottom: 4px;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.snapshot-cell dd {
  margin: 0;
  font-size: var(--text-base);
  font-variant-numeric: tabular-nums;
}

/* ── Участники ───────────────────────────────────────────────────────── */

.actor-card + .actor-card {
  margin-top: 16px;
}

.actor-wants {
  margin-top: 8px;
}

.actor-question + .actor-question {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

/* ── Два столбца на широком окне ─────────────────────────────────────── */

/* Окно ноутбука шире строки текста: в одну колонку главная проекта уходила
   на три экрана вниз, а правая половина окна пустовала. Слева дела, справа
   справочное. Меньше 1080 точек столбцы встают друг под друга сами. */
.page-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

@media (min-width: 1080px) {
  /* Левый столбец — колонка чтения: в ней и записка проекта, и чужие слова на
     карточке вопроса. При делении 1.3 к 1 в неё помещалось 57 знаков при окне
     1440 — меньше требуемых шестидесяти, и длинный абзац разбивался на
     двенадцать коротких строк. Справа лежит справочное: срез, сборка, история,
     — там строки короткие, и отданные ими точки читаются лучше слева. */
  .page-columns {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  }

  .page-columns-single {
    grid-template-columns: minmax(0, 1fr);
  }
}

.page-column {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

/* Внутри столбца отступы задаёт сам столбец: сверху у блоков они разные, и
   без этого столбцы разъезжаются по высоте. */
.page-column > * {
  margin-top: 0;
  margin-bottom: 0;
}

/* ── Три раздела проекта ─────────────────────────────────────────────── */

/* Плитки стоят в ряд и одинаковой высоты: человек выбирает сторону дела
   одним взглядом, а не читает три абзаца сверху вниз. На узком окне ряд
   распадается сам — переносить его руками нечем. */
/* Четыре плитки — два на два. В ряд по ширине окна они не встают, и
   четвёртая падала вниз одна; в квадрате все четыре одного размера. */
.area-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

@media (max-width: 640px) {
  .area-tiles {
    grid-template-columns: 1fr;
  }
}

.area-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 20px 16px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  color: inherit;
  text-decoration: none;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

/* Полоса поверху — своя у каждой из трёх сторон дела. Отличать разделы одним
   только словом можно, но глаз ловит цвет раньше, чем читает. */
.area-tile::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: var(--tile-accent, var(--accent));
  content: "";
}

.area-tile-law {
  --tile-accent: var(--accent);
}

.area-tile-public {
  --tile-accent: #8a5a00;
}

.area-tile-agenda {
  --tile-accent: var(--positive);
}

/* Четвёртый цвет — сливовый: не спорит ни с бирюзой закона, ни с охрой
   публичного поля, ни с зелёным ведения, и на бумаге держится так же. */
.area-tile-results {
  --tile-accent: #6d4c8a;
}

/* Плитка приподнимается, а не заливается цветом: заливка на трёх плитках
   подряд читается как «эта выбрана». */
.area-tile:hover,
.area-tile:focus-visible {
  transform: translateY(-1px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-raised);
}

.area-tile-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-strong);
  line-height: var(--leading-tight);
}

.area-tile-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin: 8px 0 2px;
}

/* Число крупно, слово под ним мелко: «4» и «документа» читаются одним
   взглядом, а «4 документа» одним кеглем приходится вычитывать. Цифры
   моноширинные, иначе соседние плитки прыгают по ширине. */
.area-tile-number {
  display: flex;
  flex-direction: column;
  line-height: var(--leading-tight);
}

.area-tile-value {
  color: var(--tile-accent, var(--accent));
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-strong);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.area-tile-word {
  color: var(--text-tertiary);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
}

/* Что нового — двумя-тремя строками между числами и «что внутри». Строка
   с делом для человека — охрой, как всё, что требует внимания. */
.area-tile-fresh {
  display: grid;
  gap: 2px;
  margin-top: 6px;
}

.area-tile-line {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text);
  font-size: var(--text-sm);
  line-height: var(--leading-ui);
  /* Название вопроса бывает на три строки; на плитке ему хватит двух —
     целиком оно в разделе, куда плитка и ведёт. */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.area-tile-line-warn {
  color: #8a5a00;
  font-weight: var(--weight-strong);
}

/* Что внутри — мелко и последней строкой: это подсказка, а не заголовок. */
.area-tile-inside {
  margin-top: 8px;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  line-height: var(--leading-ui);
}

/* Работа 99: «Закон» и «Публичное поле» - верхний ряд; «Результаты» -
   поперёк, в одну строку: заголовок, число, что нового. */
.area-tile.area-tile-results {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: max-content max-content minmax(0, 1fr);
  gap: 6px 28px;
  align-items: center;
  padding: 14px 20px 12px;
}

.area-tile-results .area-tile-numbers,
.area-tile-results .area-tile-fresh {
  margin: 0;
}

.area-tile-results .area-tile-fresh {
  gap: 0 16px;
  grid-auto-flow: column;
  justify-content: start;
}

@media (max-width: 640px) {
  .area-tile.area-tile-results {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .area-tile-results .area-tile-fresh {
    grid-auto-flow: row;
  }
}

/* «Ведение» строкой под плитками: сроки и встречи читаются, но не спорят
   с законом и мнениями. */
.area-strip {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  gap: 4px 16px;
  align-items: baseline;
  padding: 12px 20px;
  color: inherit;
  text-decoration: none;
  /* Работа 110: такая же белая плитка, как три над ней. Пунктирная рамка
     без подложки на сером терялась - «Ведение» не читалось как раздел. */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.area-strip:hover,
.area-strip:focus-visible {
  border-color: var(--border-strong);
}

.area-strip-head {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.area-strip-agenda {
  --tile-accent: var(--positive);
}

.area-strip-title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-strong);
}

.area-strip-text {
  flex: 1 1 240px;
  color: var(--text);
  font-size: var(--text-sm);
  line-height: var(--leading-ui);
}

.area-strip-text-warn {
  color: #8a5a00;
  font-weight: var(--weight-strong);
}

.area-strip-inside {
  flex-basis: 100%;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  line-height: var(--leading-ui);
}

/* Полоса над документами: занесли → разбирает агент → проверить → принято.
   Четыре клетки в ряд, горит та, где что-то есть. На узком окне — столбиком. */
.conveyor {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 20px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.conveyor-cell {
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 12px 16px 14px;
  border-right: 1px solid var(--border);
}

.conveyor-cell:last-child {
  border-right: 0;
}

.conveyor-cell-current {
  background: var(--accent-subtle);
}

.conveyor-step {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.conveyor-cell-current .conveyor-step {
  color: var(--accent);
}

.conveyor-title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-strong);
  line-height: var(--leading-tight);
}

.conveyor-line,
.conveyor-note {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-ui);
}

.conveyor .button {
  justify-self: start;
  margin-top: 4px;
}

@media (max-width: 720px) {
  .conveyor {
    grid-template-columns: 1fr;
  }

  .conveyor-cell {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .conveyor-cell:last-child {
    border-bottom: 0;
  }
}

.area-numbers {
  margin: 0 0 16px;
  font-size: var(--text-base);
  font-variant-numeric: tabular-nums;
}

/* Список переходов — карточками в два столбца.

   Строкой название и пояснение расходились по краям (`.plain-list > li` —
   сетка из двух колонок), и пояснение читалось как чужая колонка справа. А
   экран ноутбука широкий: одна колонка оставляла половину пустой. */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.card-grid > li {
  padding: 16px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

/* Карточка приподнимается под курсором, а не заливается цветом: залитая
   карточка среди белых читается как выбранная, а выбирать тут нечего. */
.card-grid > li:hover,
.card-grid > li:focus-within {
  transform: translateY(-1px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-raised);
}

.card-grid-link {
  font-size: var(--text-base);
  font-weight: var(--weight-strong);
}

.card-grid .row-meta {
  margin-top: 4px;
  max-width: var(--measure);
}

/* Сводка проекта: что в законе, кто где стоит, что мы сделали. Три блока
   подряд одной колонкой — их читают сверху вниз и вслух пересказывают.
   Свёрнута: развёрнутой она занимала восемь экранов прокрутки из двенадцати,
   и главная переставала быть списком дел. Сетка — на внутренней обёртке, а не
   на самом `details`: иначе строка-заголовок стала бы клеткой сетки и отъехала
   от содержимого на те же двадцать точек. */
.project-summary {
  margin-bottom: 20px;
}

.project-summary > div {
  display: grid;
  gap: 20px;
  margin-top: 20px;
}

/* Подпись «Что правится» внутри блока всегда идёт после чего-то: без
   верхнего отступа она прилипает к предыдущему абзацу и читается его
   продолжением, а не заголовком следующего куска. */
.project-summary .summary-block > .summary-label {
  margin-top: 20px;
}

/* Строка сводки — это абзац, а не «слева суть, справа состояние»: у неё две
   строки подряд, и обычная двухколоночная разметка списка развела бы подпись
   и сам текст по разным краям. */
.summary-points > li,
.summary-voices > li {
  display: block;
}

.summary-voices > li > * + * {
  margin-top: 4px;
}

/* Предупреждение — единственное место, где разбор говорит «осторожно».
   Полосой, а не цветом текста: цветной абзац читается хуже обычного. */
.summary-warning {
  border-left: 3px solid var(--accent);
}

/* «Откуда это» под каждой фразой. Строчка, а не заголовок: в обычной свёртке
   имя набрано крупным полужирным, и под каждым абзацем сводки это выглядело бы
   так, будто источник важнее самой фразы. */
.source-fold {
  margin-top: 8px;
}

.source-fold > summary {
  min-height: 32px;
}

.source-fold .fold-title {
  color: var(--accent);
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
}

/* Имя документа в свёрнутом виде стоит рядом со словами «Откуда это», а не
   строкой ниже: иначе закрытая свёртка занимает две строки под каждой фразой
   и список превращается в лестницу. */
.source-fold .fold-meta {
  display: inline;
  margin-top: 0;
  margin-left: 8px;
}

.source-fold .fold-body > * + * {
  margin-top: 8px;
}

/* Сводка в три уровня: строка тезиса, по щелчку — остаток и «откуда это»,
   внутри него — цитата. Вместо стандартного треугольника — своя стрелка
   цветом ссылки: тезис читается как текст, а не как пункт меню, и стрелка
   говорит, что он раскрывается. */
/* Тезис — строка списка, а не карточка: обычный отступ строки списка в 16px
   с двух сторон делал двенадцать тезисов в полтора экрана. */
.summary-points > li,
.summary-voices > li {
  padding-top: 6px;
  padding-bottom: 6px;
}

.thesis-line {
  display: block;
  max-width: var(--measure);
  padding-left: 18px;
  text-indent: -18px;
  font-size: var(--text-base);
  line-height: var(--leading-text);
}

/* Sources and quoted norms use the same quiet disclosure as question cards. */
.fold-head:has(.fold-disclosure) { display:flex; align-items:start; gap:8px; list-style:none; }
.fold-head:has(.fold-disclosure)::-webkit-details-marker { display:none; }
.fold-head .fold-disclosure { flex:none; width:16px; height:20px; color:var(--text-secondary); transform:rotate(-90deg); }
.fold[open] > .fold-head .fold-disclosure { transform:none; }
.fold-head:has(.fold-disclosure) .fold-meta { min-width:0; overflow-wrap:anywhere; }

summary.thesis-line {
  cursor: pointer;
  list-style: none;
}

summary.thesis-line::-webkit-details-marker {
  display: none;
}

/* Свёрнутый тезис — не длиннее двух строк: формулировки разбора идут по
   полсотни слов, и двенадцать таких подряд — два экрана сплошного текста.
   Обрыв с многоточием говорит, что дальше есть, а щелчок показывает всё. */
.thesis-fold:not([open]) > summary.thesis-line {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

summary.thesis-line::before {
  content: "›";
  display: inline-block;
  width: 18px;
  color: var(--accent);
  font-weight: var(--weight-strong);
  text-indent: 0;
  transition: transform 120ms ease;
}

.thesis-fold[open] > summary.thesis-line::before {
  transform: rotate(90deg);
}

summary.thesis-line:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.thesis-body {
  padding: 6px 0 4px 18px;
}

.thesis-body > * + * {
  margin-top: 8px;
}

.thesis-label {
  display: inline-block;
  margin: 0 8px 0 0;
}

.thesis-meta {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

/* Вход в сводку с главной: одна строка под плитками, не плитка. */
.summary-link {
  display: block;
  padding: 14px 18px;
  color: inherit;
  text-decoration: none;
}

.summary-link:hover,
.summary-link:focus-visible {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-raised);
}

.summary-link-title {
  font-family: var(--font-ui);
  font-weight: var(--weight-strong);
}

.summary-link-title::after {
  content: " →";
  color: var(--accent);
}

.summary-link-meta {
  display: block;
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

/* Изложение законопроекта: вступление абзацами, дальше тезисы номерами.
   Одним куском это не читают — каждое предложение стоит своим абзацем. */
.bill-summary {
  margin-top: 12px;
}

.bill-summary .summary-value {
  max-width: var(--measure);
}

/* Верх «Разбора» в стиле плиток (работа 71): сверху было «серо и безлико»,
   а плитки ниже — с выделениями. Шапка устроена как голова плитки: имя
   экрана мелкими прописными акцентом, название документа крупно чернилами;
   «О законопроекте» — белая плитка, выделения агента в ней — маркером. */
html[data-screen="project-bill-review"] .page-header {
  padding-bottom: 0;
  border-bottom: 0;
}

html[data-screen="project-bill-review"] .page-header h1 {
  margin-bottom: 4px;
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Название документа — заголовок экрана, второй гарнитурой (работа 72),
   как «Антифрод 3» на домашней проекта: на «Разборе» засечек не осталось,
   и он выпадал из программы. */
html[data-screen="project-bill-review"] .page-subtitle {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-strong);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
}

/* Складки «Разбора» (работа 84): «О документе», «Оговорка», «По существу»,
   «Правит», «Вопросы» и три нижние — складками по образцу видов на
   «Результатах» (работы 78–79), но каждая своего цвета: пользователь —
   «блоки, кроме вопросов, очень безликие». Цвета те же, что у разделов на
   главной, чтобы не заводить новых. Два класса в отборе: общий
   `.results-kind` ниже в файле задаёт сливовый всем видам, и одним классом
   его не перебить. */
.review-fold.review-fold-about,
.review-fold.review-fold-essence {
  --tile-accent: var(--accent);
}

.review-fold.review-fold-caveat {
  --tile-accent: #8a5a00;
}

.review-fold.review-fold-laws {
  --tile-accent: var(--positive);
}

.review-fold.review-fold-questions {
  --tile-accent: #6d4c8a;
}

.review-fold.review-fold-outside,
.review-fold.review-fold-rejected,
.review-fold.review-fold-untracked {
  --tile-accent: var(--text-tertiary);
}

/* «Публичное поле» плитками (работа 92): те же складки, цвета — по смыслу.
   Ждёт решения — цвет предупреждения, лента про ваши вопросы и карта —
   цвет раздела, остальное из ленты и настройка — серые. */
.review-fold.review-fold-monitor-waiting {
  --tile-accent: #8a5a00;
}

.review-fold.review-fold-monitor-topical,
.review-fold.review-fold-map,
.review-fold.review-fold-letters {
  --tile-accent: var(--accent);
}

.review-fold.review-fold-map-cell {
  --tile-accent: #6d4c8a;
}

.review-fold.review-fold-monitor-named,
.review-fold.review-fold-monitor-searched,
.review-fold.review-fold-monitor-rest,
.review-fold.review-fold-monitor-setup {
  --tile-accent: var(--text-tertiary);
}

/* «Ведение» плитками (работа 93): месяц, лента и этапы — цвет раздела,
   «Что впереди» — цвет предупреждения (это сроки), цель — сливовый, форма
   встречи — серая. */
.review-fold.review-fold-calendar,
.review-fold.review-fold-meetings,
.review-fold.review-fold-timeline,
.review-fold.review-fold-plan-stages {
  --tile-accent: var(--accent);
}

.review-fold.review-fold-ahead {
  --tile-accent: #8a5a00;
}

.review-fold.review-fold-plan-goal {
  --tile-accent: #6d4c8a;
}

.review-fold.review-fold-meeting-form {
  --tile-accent: var(--text-tertiary);
}

.review-fold.review-fold-calendar .results-kind-note,
.review-fold.review-fold-meetings .results-kind-note,
.review-fold.review-fold-ahead .results-kind-note,
.review-fold.review-fold-meeting-form .results-kind-note {
  white-space: normal;
}

.review-fold-body > .plan-stages {
  margin-bottom: 12px;
}

/* Складки «Закона» (работа 94): документы, участники, справочник. */
.review-fold.review-fold-documents,
.review-fold.review-fold-wiki-documents,
.review-fold.review-fold-wiki-questions {
  --tile-accent: var(--accent);
}

.review-fold.review-fold-documents-path,
.review-fold.review-fold-wiki-results {
  --tile-accent: #6d4c8a;
}

.review-fold.review-fold-documents-waiting,
.review-fold.review-fold-bill-loose,
.review-fold.review-fold-voices-unlinked {
  --tile-accent: #8a5a00;
}

.review-fold.review-fold-documents-removed {
  --tile-accent: var(--text-tertiary);
}

/* «Сводка» и настройки проекта (работа 95). */
.review-fold.review-fold-summary-bill,
.review-fold.review-fold-settings-card,
.review-fold.review-fold-settings-templates {
  --tile-accent: var(--accent);
}

.review-fold.review-fold-summary-sides,
.review-fold.review-fold-settings-model {
  --tile-accent: #6d4c8a;
}

.review-fold.review-fold-summary-made {
  --tile-accent: var(--positive);
}

.review-fold.review-fold-settings-archive {
  --tile-accent: var(--text-tertiary);
}

.review-fold.review-fold-summary-sides .results-kind-note,
.review-fold.review-fold-settings-model .results-kind-note,
.review-fold.review-fold-settings-templates .results-kind-note,
.review-fold.review-fold-settings-archive .results-kind-note {
  white-space: normal;
}

.review-fold-body > .summary-label {
  margin-top: 14px;
}

.review-fold-body > .summary-label:first-child,
.review-fold-body > .revision-card-title + .summary-label,
.review-fold-body > .row-meta + .summary-label {
  margin-top: 0;
}

/* Участник: цвет уголка по отношению к нашей позиции. */
.review-fold[data-relation="supportive"],
.review-fold[data-relation="partly_supportive"] {
  --tile-accent: var(--positive);
}

.review-fold[data-relation="opposed"] {
  --tile-accent: #8a5a00;
}

.review-fold[data-relation="unknown"],
.review-fold[data-relation="unclear"] {
  --tile-accent: var(--text-tertiary);
}

.review-fold.review-fold-documents-waiting .results-kind-note,
.review-fold.review-fold-bill-loose .results-kind-note,
.review-fold.review-fold-voices-unlinked .results-kind-note {
  white-space: normal;
}

/* Строки документов и карточки справочника внутри складки - на поле
   экрана, как плитки вопросов на «Разборе»: белым по белому их не видно. */
.review-fold-documents[open] > .review-fold-body,
.review-fold-wiki-documents[open] > .review-fold-body {
  margin: 14px -20px -16px;
  padding: 16px 20px 20px;
  background: var(--field);
  border-top: 1px solid var(--border);
}

.review-fold-body > .conveyor {
  margin-bottom: 0;
}

.review-fold-body > .summary-block + .summary-block,
.review-fold-body > .summary-block + .voice-more {
  margin-top: 14px;
}

.review-fold-body > .plan-goal-text {
  margin-bottom: 8px;
}

/* Внутри складки блоки — одним столбцом с линиями, не рамками в рамке. */
.review-fold-body > .panel,
.review-fold-body > article.panel {
  padding: 14px 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
}

.review-fold-body > .panel:first-child,
.review-fold-body > article.panel:first-child {
  padding-top: 0;
  border-top: 0;
}

.review-fold-body > .panel + .panel,
.review-fold-body > article.panel + article.panel {
  margin-top: 14px;
}

/* Пояснение у карты — в несколько строк: оно длиннее заголовка складки. */
.review-fold.review-fold-map .results-kind-note,
.review-fold.review-fold-monitor-waiting .results-kind-note {
  white-space: normal;
}

/* Строка «что внутри» — одной строкой с многоточием: начало вывода, не
   второй абзац. */
.review-fold .results-kind-note {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

details.review-fold[open] > .review-fold-body {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.review-fold-body > .summary-value,
.review-fold-body > .row-meta {
  max-width: var(--measure);
}

.review-fold-body > .summary-value + .summary-value {
  margin-top: 8px;
}

/* Плитки вопросов внутри складки — на поле экрана, а не белым по белому:
   тело складки выходит к краям плитки. */
.review-fold-questions[open] > .review-fold-body,
.review-fold-outside[open] > .review-fold-body,
.review-fold-rejected[open] > .review-fold-body,
.review-fold-untracked[open] > .review-fold-body {
  margin: 14px -20px -16px;
  padding: 16px 20px 20px;
  background: var(--field);
  border-top: 1px solid var(--border);
}

.review-fold-questions .theses-pending,
.review-fold-questions .thesis-switches {
  margin-bottom: 12px;
}

/* Выделения агента наверху — маркером; в залитой полосе — светлой
   подложкой; реквизиты законов без маркера. */
.review-fold-about strong,
.review-fold-caveat strong,
.essence-band strong {
  padding: 0 2px;
  color: inherit;
  font-weight: inherit;
  background: var(--marker);
  border-radius: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* «Правит» — строки, не плашки (работа 65): плашки в четыре столбца
   выходили разной величины, а строка на закон читается пунктом, как плитки
   ниже. Слева реквизиты и название, под ними статьи; справа действия. */
.law-lines {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.law-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 24px;
  align-items: baseline;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}

.law-line:first-child {
  padding-top: 4px;
  border-top: 0;
}

.law-name {
  color: var(--ink);
}

.law-name strong {
  font-variant-numeric: tabular-nums;
}

.law-where {
  grid-column: 1;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.law-actions {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  align-items: baseline;
  align-self: start;
  font-size: var(--text-sm);
}

/* «По существу» — нумерованная полоса, залитая акцентом, внизу карточки:
   как «Ключевые выводы» в докладе. Белым по цвету читается вывод, а не
   ещё один абзац. */
.essence-band {
  padding: 18px 22px;
  color: #fff;
  background: var(--accent);
  border-radius: var(--radius);
}

.essence-band .bill-theses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 32px;
  max-width: none;
  margin-top: 0;
}

.essence-band .bill-theses > li + li {
  margin-top: 0;
}

.essence-band .bill-theses > li::before {
  color: rgb(255 255 255 / 72%);
}

.essence-band strong {
  color: #fff;
  background: rgb(255 255 255 / 22%);
}

/* «Оговорка» — на светло-охряной подложке с полосой слева: это
   предупреждение о разборе, а не ещё один абзац о документе. */
.overview-caveat {
  max-width: var(--measure);
  padding: 12px 16px;
  color: var(--ink);
  background: color-mix(in srgb, #8a5a00 7%, var(--surface));
  border-left: 3px solid #8a5a00;
  border-radius: 0 var(--radius) var(--radius) 0;
}

@media (max-width: 900px) {
  .essence-band .bill-theses,
  .law-line {
    grid-template-columns: 1fr;
  }

  .law-actions {
    grid-column: 1;
    grid-row: auto;
  }
}

/* Тезисы. Номер вынесен на поле и набран цветом ссылки: по номерам человек
   потом ссылается вслух — «по третьему пункту у нас возражение». */
.bill-theses {
  max-width: var(--measure);
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: thesis;
}

.bill-theses > li {
  position: relative;
  padding-left: 32px;
  counter-increment: thesis;
}

.bill-theses > li + li {
  margin-top: 12px;
}

.bill-theses > li::before {
  content: counter(thesis) ".";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-strong);
}

/* Выделенное внутри изложения — сроки, пороги, стороны. Не ярче обычного
   полужирного: подчёркнутых слов в тезисе бывает четыре, и цветом они
   превратили бы абзац в вывеску. */
.bill-summary strong {
  font-weight: var(--weight-strong);
  color: var(--text);
}

/* ── Разговор с агентом ──────────────────────────────────────────────── */

/* Переписка, а не чат: ответ идёт минуту-три, и лента читается сверху вниз
   как почта. Поэтому — обычная колонка панелей, без пузырей и хвостиков. */
.chat-thread {
  margin-bottom: 20px;
}

.chat-turn + .chat-turn {
  margin-top: 16px;
}

.chat-role {
  margin-bottom: 8px;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.chat-question-text {
  max-width: var(--measure);
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--weight-strong);
  line-height: var(--leading-text);
}

.chat-answer {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* Ответ читают как документ, а не как интерфейс: то же начертание, что у
   цитат и текстов документов. */
.chat-answer-body {
  max-width: var(--measure);
  font-family: var(--font-document);
  font-size: var(--text-base);
  line-height: var(--leading-doc);
}

.chat-answer-body p {
  margin: 0 0 12px;
}

.chat-answer-body h3 {
  margin: 20px 0 8px;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
}

.chat-answer-body h3:first-child {
  margin-top: 0;
}

.chat-answer-list {
  margin: 0 0 12px;
  padding-left: 24px;
}

.chat-answer-list li {
  margin-bottom: 8px;
}

/* Кнопки под ответом (работа 120): в вопрос, в документы, скопировать -
   одной группой справа; «Сохранено: …» строкой под ними. */
.chat-answer-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chat-kept {
  margin: 8px 0 0;
}

.chat-answer-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

.chat-answer-waiting .chat-role {
  color: var(--accent);
}

.chat-turn-failed {
  border-left: 3px solid var(--danger-border);
}

/* Поле вопроса стоит внизу и не уезжает: разговор растёт вверх. */
.chat-composer {
  position: sticky;
  bottom: 16px;
  box-shadow: var(--shadow-raised);
}

textarea.chat-input {
  min-height: 76px;
  font-size: var(--text-base);
}

.chat-attachment {
  margin-top: 12px;
}

.chat-composer-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 12px;
}

/* Замечания об одном и том же — вместе. Группа читается как одна претензия,
   а не как пять: имя требования сверху, участники строкой, тексты внутри. */
.remark-group {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 16px 20px 8px;
  margin-bottom: 16px;
  background: var(--surface-muted);
}

.remark-group-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
}

.remark-group-title {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-ui);
}

/* Предложение агента. Пока человек не нажал «Объединить», в проекте не
   изменилось ничего — блок и должен выглядеть как предложение, а не как
   свершившееся. */
.grouping-proposal {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: 16px 20px 12px;
  margin-bottom: 16px;
}

.grouping-proposal-label {
  margin: 0 0 4px;
  font-size: var(--text-sm);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.grouping-choice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 8px 0;
  cursor: pointer;
}

.grouping-choice input {
  margin-top: 4px;
}

.grouping-choice-text {
  display: block;
  color: var(--text-secondary);
  line-height: var(--leading-text);
}

/* ── Задачи и сроки ──────────────────────────────────────────────────── */

.work-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.work-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.work-tile strong {
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
}

.work-tile span {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

/* Просроченное выделено цветом, а не только числом: на этот квадрат человек
   смотрит первым, и он должен отличаться от остальных сразу. */
.work-tile-alert {
  border-color: var(--border-strong);
  background: var(--accent-subtle);
}

.work-directions,
.work-filters {
  margin-bottom: 8px;
}

.work-filters .is-current {
  font-weight: var(--weight-strong);
  text-decoration: underline;
}

.work-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 16px;
  margin-bottom: 4px;
}

.work-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.work-label .summary-label {
  margin-bottom: 0;
}

.work-checkbox {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  align-self: end;
  padding-bottom: 8px;
}

.work-checkbox input {
  width: auto;
  min-height: 0;
}

/* Название и комментарий занимают всю ширину: «перезаключить договор с
   Консультантом» в колонку на двести точек не помещается. */
.work-form-grid > .work-label:first-child,
.work-wide {
  grid-column: 1 / -1;
}

.work-list > li {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.work-item-editing {
  grid-template-columns: minmax(0, 1fr);
}

/* Выполненное не прячется — но и не спорит за внимание с тем, что горит. */
.work-item-done {
  color: var(--text-secondary);
}

.work-row-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  min-width: 180px;
}

.work-row-side .filter-select {
  width: auto;
  min-width: 150px;
}

.work-proposals > li {
  grid-template-columns: minmax(0, 1fr);
}

.work-proposal-fields {
  display: grid;
  grid-template-columns: auto minmax(0, 2fr) 160px 180px;
  align-items: center;
  gap: 12px 12px;
}

.work-proposal-fields > p {
  grid-column: 1 / -1;
  margin: 0;
}

/* Узкое окно: поля предложенного дела встают в столбик, иначе поле названия
   сжимается до трёх букв. */
@media (max-width: 900px) {
  .work-proposal-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Справочник проекта. Карточка документа — не плитка: её читают строкой за
   строкой, поэтому колонка одна и ширина ограничена длиной строки. */
.wiki-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wiki-card {
  padding: 16px 20px;
}

.wiki-title {
  margin: 0 0 4px;
  font-size: var(--text-base);
  line-height: var(--leading-ui);
}

/* Первые строки документа. Приглушены: это подсказка «что это за файл», а не
   его содержание, и перетягивать взгляд с названия она не должна. */
/* Расшифровка записи: ход, сбой и первые реплики для сверки. */
.transcript-alert {
  margin: 8px 0 0;
  color: var(--danger);
  max-width: 68ch;
}

.transcript-preview {
  margin: 8px 0 0;
  padding-left: 12px;
  border-left: 3px solid var(--border);
  white-space: pre-wrap;
  font: inherit;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-text);
  max-width: 68ch;
}

.wiki-opening {
  margin: 8px 0 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-text);
  max-width: 68ch;
}

/* Оглавление свёрнуто: у законопроекта статей под сотню, и развёрнутыми они
   выталкивают за экран всё остальное. */
.wiki-outline {
  margin-top: 12px;
}

.wiki-outline > summary {
  cursor: pointer;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.wiki-outline .plain-list {
  margin-top: 8px;
}

.wiki-questions > li {
  grid-template-columns: minmax(0, 1fr);
}

/* Узкое окно: кнопка поиска сжимается до лупы и клавиши, путь остаётся —
   из двух строк в шапке важнее та, по которой можно уйти. */
@media (max-width: 1100px) {
  .global-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .search-command span {
    display: none;
  }
}

/* Совсем узкое окно: от названия программы остаётся значок. Разделы важнее —
   без них человек остаётся на странице без выхода наверх. */
@media (max-width: 900px) {
  .global-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .brand span {
    display: none;
  }
}

/* Календарь месяца. Обычная таблица без единой внешней библиотеки: неделя —
   строка, день — клетка, и читается это так же, как бумажный календарь на
   стене. Клетки одинаковой высоты нарочно: месяц, у которого одна неделя
   вдвое выше остальных, глазом уже не охватывается. */
.calendar-header {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}

.calendar-title {
  margin: 0;
  font-family: var(--font-display, inherit);
  font-size: var(--text-lg);
}

.calendar-month {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.calendar-month th {
  padding: 8px 12px;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  text-align: left;
  background: var(--surface-muted);
  border-bottom: 1px solid var(--border);
}

.calendar-cell {
  height: 96px;
  padding: 8px 8px;
  vertical-align: top;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}

.calendar-cell:first-child {
  border-left: 0;
}

/* Дни соседних месяцев не убраны: «в конце месяца надо успеть» чаще всего
   означает первые числа следующего, и обрывать неделю на 31-м бесчеловечно. */
.calendar-cell-other {
  background: var(--surface-sunken);
  color: var(--text-tertiary);
}

.calendar-cell-weekend .calendar-day-number {
  color: var(--text-tertiary);
}

.calendar-cell-today {
  background: var(--accent-subtle);
}

.calendar-day-number {
  font-weight: var(--weight-strong);
  font-size: var(--text-sm);
}

.calendar-today-mark {
  margin-left: 8px;
  color: var(--accent);
  font-size: var(--text-xs);
}

.calendar-entries {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.calendar-entry {
  font-size: var(--text-sm);
  line-height: var(--leading-ui);
}

.calendar-entry-link {
  display: block;
  padding: 2px 4px;
  border-radius: var(--radius);
  border-left: 3px solid var(--border-strong);
  background: var(--surface-muted);
  color: var(--text);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-entry-link:hover,
.calendar-entry-link:focus-visible {
  text-decoration: underline;
}

/* Встреча — единственное, что в этом календаре и живёт; сроки прочитаны в
   других местах, и цветом это должно быть видно без чтения подписи. */
.calendar-entry-meeting .calendar-entry-link {
  border-left-color: var(--accent);
  background: var(--accent-subtle);
}

.calendar-entry-question .calendar-entry-link {
  border-left-color: var(--positive-border);
  background: var(--positive-subtle);
}

.calendar-entry-sozd .calendar-entry-link {
  border-left-color: var(--attention-border);
  background: var(--attention-subtle);
}

.calendar-entry-overdue .calendar-entry-link {
  border-left-color: var(--danger);
  background: var(--danger-subtle);
  color: var(--danger);
}

.meeting-participant-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}

.meeting-list > li {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

/* Высказывания, вычитанные из расшифровки, стоят под своей встречей и
   отступом показывают, что относятся к ней, а не к списку вообще. */
.meeting-proposals {
  margin-top: 12px;
  padding-left: 12px;
  border-left: 2px solid var(--border);
  display: grid;
  gap: 8px;
}

/* Узкое окно: календарь всё равно должен оставаться месяцем. Клетки ужимаются
   по высоте, а не сворачиваются в список — список дней месяца читается уже
   как что-то другое. */
@media (max-width: 1100px) {
  .calendar-cell {
    height: 78px;
    padding: 4px 4px;
  }

  .calendar-entry {
    font-size: var(--text-xs);
  }
}

/* ── Знакомство при первом запуске ───────────────────────────────────── */

/* Полоса под шапкой: без агента разбор не пойдёт. Тонкая, во всю ширину и
   без кнопки закрытия — закрывать нечего, она гаснет сама, когда агент
   находится. */
.setup-alert {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 8px 24px;
  color: var(--attention);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  background: var(--attention-subtle);
  border-bottom: 1px solid var(--attention-border);
}

.setup-alert a {
  color: var(--attention);
  font-weight: var(--weight-strong);
  text-underline-offset: 0.2em;
}

/* Рассказ читают один раз и в один присест — поэтому он стоит по центру
   пустого окна, а не в общей колонке между другими разделами. */
.greeting-page {
  max-width: 860px;
}

.greeting {
  padding: 32px 32px 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-raised);
}

.greeting h1 {
  margin-bottom: 12px;
}

.greeting-eyebrow {
  margin-bottom: 12px;
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.greeting-body {
  margin-top: 24px;
}

.greeting-points {
  display: grid;
  gap: 20px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.greeting-points strong {
  display: block;
  margin-bottom: 4px;
  font-size: var(--text-base);
}

.greeting-points .section-copy {
  margin: 0;
}

/* Состояние агента на этом компьютере. Не «поставьте агента», а «его здесь
   нет» — общая инструкция читается как реклама и пропускается. */
.greeting-check {
  padding: 16px 16px;
  margin-bottom: 20px;
  background: var(--attention-subtle);
  border: 1px solid var(--attention-border);
  border-radius: var(--radius);
}

.greeting-check.is-ready {
  background: var(--positive-subtle);
  border-color: var(--positive-border);
}

.greeting-check strong {
  display: block;
  margin-bottom: 4px;
}

.greeting-check .section-copy {
  margin: 0;
}

.greeting-inline-actions {
  margin-top: 20px;
}

.greeting-dots {
  display: flex;
  gap: 8px;
  margin-top: 24px;
}

.greeting-dot {
  width: 7px;
  height: 7px;
  background: var(--border-strong);
  border-radius: 999px;
}

.greeting-dot.is-current {
  width: 22px;
  background: var(--accent);
}

.greeting-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.greeting-skip {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

/* ══════════════════════════════════════════════════════════════════════
   Выбор подписки

   Три варианта стоят карточками, а не тремя кнопками в ряд. Тремя кнопками
   это и было — и выбор между «личной» и «корпоративной» для того, кто видит
   программу впервые, выглядел выбором между двумя незнакомыми словами. На
   карточке под названием стоят три строки: кто платит, что нужно сделать,
   чем это грозит, — и решение принимается по ним, а не по названию.

   Блок один на два экрана: третий шаг знакомства и «Настройка программы».
   ══════════════════════════════════════════════════════════════════════ */

.access-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.access-choice {
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* Выбранный вариант помечен рамкой, а не заливкой во всю карточку: заливка
   на одной из трёх читается как «здесь ошибка», а не «здесь ваш выбор». */
.access-choice.is-chosen {
  border-color: var(--accent-border);
  box-shadow: inset 3px 0 0 var(--accent);
}

.access-choice .setup-part-head {
  margin-bottom: 4px;
}

/* Пояснения внутри блока — это текст, а не список предметов. С рамкой и тенью
   каждая строка читалась отдельной карточкой, и четыре фразы про доступ
   выглядели как четыре кнопки, которых нет. */
.access-choice > .plain-list,
.access-block > .plain-list {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.access-choice > .plain-list > li,
.access-block > .plain-list > li {
  display: block;
  padding: 4px 0;
  border-bottom: 0;
}

.access-choice .review-actions {
  margin-top: 12px;
}

.access-key {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.access-key .field {
  max-width: 420px;
}

/* ══════════════════════════════════════════════════════════════════════
   Лента дел на сегодня

   Строка ленты читается слева направо одним движением: когда — что —
   куда нажать. Срок стоит отдельной колонкой, а не внутри подписи: в
   подписи его приходится искать глазами, а он здесь главное.
   ══════════════════════════════════════════════════════════════════════ */

.today-band {
  margin-bottom: 24px;
}

.today-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.today-row {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius);
}

/* Цвет берёт только левый край. Залитая строка среди белых читается как
   выбранная, а выбирать здесь нечего — здесь делают. */
.today-row-danger {
  border-left-color: var(--danger);
}

.today-row-attention {
  border-left-color: var(--attention);
}

.today-when {
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  color: var(--text-secondary);
  /* Дни выстроены в столбик и сравниваются взглядом сверху вниз: цифры
     разной ширины сбивают этот столбик. */
  font-variant-numeric: tabular-nums;
}

.today-when-danger {
  color: var(--danger);
}

.today-when-attention {
  color: var(--attention);
}

.today-body {
  min-width: 0;
}

.today-title {
  font-size: var(--text-base);
  font-weight: var(--weight-strong);
}

.today-body .row-meta {
  margin-top: 4px;
  max-width: var(--measure);
}

.today-go {
  white-space: nowrap;
}

/* Узкое окно: колонки встают друг под друга. Срок остаётся сверху — он
   по-прежнему первое, что нужно прочитать. */
@media (max-width: 720px) {
  .today-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .today-go {
    justify-self: start;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   Значки

   Значок здесь — не картинка, а часть надписи: он берёт цвет текста,
   не сжимается, когда строка длинная, и садится на базовую линию, а не
   висит над ней. Отдельного цвета у значков нет нарочно — иначе экран
   становится ёлкой.
   ══════════════════════════════════════════════════════════════════════ */

.icon {
  flex: none;
  vertical-align: -0.15em;
}

/* Квадрат под значком делает из линии предмет. Цвет берётся от раздела,
   если он задан рядом (`--tile-accent`), иначе от акцента темы. */
.icon-badge {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: var(--tile-accent, var(--accent));
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.icon-badge-empty {
  width: 46px;
  height: 46px;
  margin-bottom: 16px;
  color: var(--text-tertiary);
  border-radius: var(--radius);
}

/* Плитка раздела: значок и название в одной строке, числа под ними. */
.area-tile-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Поле поиска в шапке: лупа слева, подсказка о клавишах справа. */
.search-command {
  justify-content: flex-start;
  gap: 8px;
}

.search-command kbd {
  margin-left: auto;
}

/* Значок в ленте «Как шёл проект»: он различает письмо, совещание и новую
   редакцию раньше, чем человек дочитает заголовок, но спорить с заголовком
   не должен — отсюда приглушённый цвет. */
.timeline-icon {
  margin-right: 8px;
  color: var(--text-tertiary);
}

.timeline-event .revision-card-title {
  display: flex;
  align-items: center;
}

/* Вид документа в списке: значок слева от названия. Он не заменяет подпись
   «Законопроект» — он даёт зацепку глазу, пока подпись ещё не прочитана. */
.document-main {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-width: 0;
}

.document-kind-icon {
  margin-top: 4px;
  color: var(--accent);
}

.kind-icon {
  color: var(--text-tertiary);
}

/* Первый экран: карточки проектов вместо таблицы.

   Таблица отвечала на вопрос «какие проекты есть». Открывают программу с
   другим вопросом — «где я остановился и что теперь», и на него отвечают
   числа и одно следующее действие, а не четыре столбца. */
.project-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.project-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  padding: 20px 20px 20px;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

/* Карточка приподнимается под курсором — тем же движением, что и плитки
   разделов: одинаковое поведение у всего, что нажимается. С работы 66 она
   и нажимается целиком, как плитка. */
.project-card.is-clickable {
  cursor: pointer;
}

.project-card:hover,
.project-card:focus-within {
  transform: translateY(-1px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-raised);
}

.project-card-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
}

.project-card-name {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-strong);
  line-height: var(--leading-tight);
}

.project-card-name .row-link {
  color: inherit;
}

.card-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  margin: 2px 0 0;
}

/* Число крупно, слово под ним мелко — как на плитках разделов. */
.card-number {
  display: flex;
  flex-direction: column;
  line-height: var(--leading-tight);
}

.card-number-value {
  color: var(--accent);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-strong);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.card-number-word {
  color: var(--text-tertiary);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
}

/* «Ждут вас» — единственное число на карточке, которое требует действия
   сегодня. Цвет внимания стоит ровно на нём и больше нигде. */
.card-number-waiting .card-number-value {
  color: var(--attention, #8a5a00);
}

.card-progress {
  display: block;
  overflow: hidden;
  height: 6px;
  background: var(--surface-muted);
  border-radius: 999px;
}

.card-progress-done {
  display: block;
  height: 100%;
  background: var(--positive);
  border-radius: inherit;
}

/* Следующий шаг прижат к низу: у карточек разной высоты он должен стоять на
   одной линии, иначе глаз ищет его заново в каждой. */
.project-card-next {
  margin: auto 0 0;
  padding-top: 4px;
}

/* Архивный проект виден, но не спорит с рабочими. */
.project-card.is-archived {
  background: var(--surface-muted);
}

.project-card.is-archived .project-card-name,
.project-card.is-archived .card-number-value {
  color: var(--text-secondary);
}

/* ── Хвост длинного текста ───────────────────────────────────────────────
   Отличается от свёрнутого блока (`.fold`) намеренно: тот прячет блок
   целиком и выглядит заголовком, а здесь начало текста уже прочитано и
   «читать целиком» — продолжение строки, а не новый раздел. */
.read-more > summary {
  min-height: 32px;
  padding: 8px 0 0;
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
}

.read-more > summary:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

.read-more[open] > summary {
  margin-bottom: 8px;
}

/* Раскрытый хвост отбит слева волосяной линией: видно, что это продолжение
   того же текста, а не следующий раздел страницы. */
.read-more-body {
  max-width: var(--measure);
  padding-left: 12px;
  border-left: 2px solid var(--border);
}

.read-more-body > .bill-theses {
  margin-top: 0;
}

.long-text {
  margin: 12px 0 12px;
}

.long-text .monitor-body {
  margin: 0;
}

/* Число-ссылка: тот же крупный счёт, но это вход туда, где он набрался. */
.card-number-link {
  text-decoration: none;
}

.card-number-link:hover .card-number-value,
.card-number-link:focus-visible .card-number-value {
  color: var(--accent-hover);
  text-decoration: underline;
}

.card-number-link:hover .card-number-word {
  color: var(--text-secondary);
}

.snapshot-cell .card-numbers {
  margin: 2px 0 0;
}

/* ── «Дальше» ────────────────────────────────────────────────────────────
   Одна строка под экраном: что теперь. Стоит на месте нижнего поля страницы,
   поэтому не отнимает высоту у содержимого и не спорит с ним за внимание. */
.next-step {
  grid-column: 1 / -1;
  padding: 0 32px 48px;
}

.next-step-card {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.next-step-label {
  color: var(--text-tertiary);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── График по неделям ───────────────────────────────────────────────────
   Двенадцать столбиков — три месяца: столько идёт обсуждение законопроекта
   до первого чтения. Число над столбиком показывается при наведении: иначе
   поверх графика встают двенадцать цифр, и он читается как таблица. */
.monitor-weeks {
  margin-bottom: 20px;
}

.week-bars {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 8px;
  align-items: end;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.week-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-tertiary);
  font-family: var(--font-ui);
  cursor: pointer;
}

.week-bar[disabled] {
  cursor: default;
}

.week-bar-count {
  min-height: 16px;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity 120ms ease;
}

.week-bar:hover .week-bar-count,
.week-bar:focus-visible .week-bar-count,
.week-bar.is-current .week-bar-count {
  opacity: 1;
}

/* Дорожка одной высоты у всех недель: без неё низкие столбики съезжают
   вверх и ряд перестаёт читаться как один график. Пустая неделя — пустая
   дорожка: место в ряду за ней остаётся. */
.week-bar-track {
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 84px;
  border-radius: var(--radius);
  background: var(--surface-muted);
}

.week-bar-column {
  width: 100%;
  border-radius: var(--radius);
  background: var(--accent);
  opacity: 0.55;
  transition: opacity 120ms ease;
}

.week-bar:hover .week-bar-column,
.week-bar:focus-visible .week-bar-column {
  opacity: 0.8;
}

.week-bar.is-current .week-bar-column {
  opacity: 1;
}

.week-bar.is-current .week-bar-track {
  box-shadow: inset 0 0 0 2px var(--accent);
}

.week-bar-label {
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.week-bar.is-current .week-bar-label {
  color: var(--accent);
}

@media (max-width: 860px) {
  /* На узком окне двенадцать дат встают друг на друга. Дата остаётся в
     подсказке, а ряд столбиков читается и без подписи под каждым. */
  .week-bar-label {
    font-size: var(--text-xs);
    letter-spacing: -0.2px;
  }

  .week-bar-track {
    height: 64px;
  }
}

/* ── «Почему так» ────────────────────────────────────────────────────────
   Оговорка, убранная под строку: почему нельзя иначе, что останется, чего
   программа не делает. Такое читают один раз, а место занимало всегда.
   Выглядит подписью, а не кнопкой: это не действие, и звать себя не должно. */
.why {
  margin: 8px 0 0;
  max-width: var(--measure);
}

.why > summary {
  display: inline-block;
  color: var(--text-tertiary);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  cursor: pointer;
  list-style: none;
}

.why > summary::-webkit-details-marker {
  display: none;
}

.why > summary::before {
  content: "?";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-right: 8px;
  border: 1px solid var(--border);
  border-radius: 50%;
  font-size: var(--text-xs);
  line-height: var(--leading-tight);
  vertical-align: -2px;
}

.why > summary:hover {
  color: var(--text-secondary);
}

.why[open] > summary {
  margin-bottom: 8px;
}

.why-body {
  margin: 0;
  padding-left: 12px;
  border-left: 2px solid var(--border);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-text);
}

.section-heading .why,
.page-heading .why {
  margin-top: 8px;
}

/* ── Перечень возможностей ───────────────────────────────────────────────
   Список названий, каждое раскрывается. Полосок между строками нет — только
   волосяная линия: двадцать две карточки подряд читались бы как двадцать два
   раздела, а это один список. */
.guide-skills {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.guide-skills > li + li {
  border-top: 1px solid var(--border);
}

.guide-skills > li > .fold {
  margin: 0;
}

.guide-skills .fold-head {
  padding: 12px 0;
}

.guide-skills .fold-body {
  padding-bottom: 12px;
}

/* ── Пачка файлов ────────────────────────────────────────────────────────
   Двадцать файлов, занесённых разом, — это список, а не карточки: человек
   пробегает его глазами и ищет строки, где что-то пошло не так. Поэтому имя
   слева, состояние справа, и цветом выделено только исключение. */
.batch-list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  max-height: 320px;
  overflow-y: auto;
}

.batch-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  font-size: var(--text-sm);
}

.batch-row:first-child {
  border-top: none;
}

.batch-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.batch-state {
  flex: 0 1 auto;
  color: var(--text-tertiary);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  text-align: right;
}

.batch-row.is-saved .batch-state,
.batch-row.is-done .batch-state {
  color: var(--positive);
}

.batch-row.is-running .batch-state {
  color: var(--text-secondary);
}

.batch-row.is-aside .batch-state,
.batch-row.is-skipped .batch-state {
  color: var(--attention);
}

/* Причина беды длиннее одной строки: обрезать её значит скрыть ровно то,
   ради чего человек в этот список и смотрит. */
.batch-row.is-failed .batch-state {
  color: var(--danger);
  flex: 1 1 50%;
  white-space: normal;
}

.batch-row.is-choice .filter-select {
  flex: 0 0 auto;
  max-width: 220px;
}

/* Строка редакции спрашивает лишнее — цепочку и версию. Кладём вопрос второй
   строкой той же строки списка: рядом с именем файла он не помещается, а
   отдельным разговором на каждый файл это перестанет быть списком. */
.batch-row.is-choice {
  flex-wrap: wrap;
}

.batch-chain {
  flex: 1 0 100%;
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.batch-chain > select {
  flex: 1 1 auto;
  min-width: 0;
}

.batch-version {
  flex: 0 0 170px;
}

@media (max-width: 720px) {
  .batch-chain {
    flex-wrap: wrap;
  }

  .batch-version {
    flex: 1 1 100%;
  }
}

/* ── Законопроект с полями ───────────────────────────────────────────── */

/* Одним столбцом (работа 129): норма, под ней - кто что о ней сказал.
   Правый столбец не читался, а юрист идёт по тексту сверху вниз. Строку
   держит --measure. */
.bill-article {
  max-width: var(--measure);
  padding: 24px 0;
  border-top: 1px solid var(--border);
}

.bill-head,
.bill-body {
  min-width: 0;
}

/* В тексте правки цветом только текст, который она ставит или убирает:
   новые слова - маркером, убираемые - красным. Слова формулы («дополнить»,
   «пункт 2 статьи 12») не выделяются: отмечено всё - не отмечено ничего
   (работа 131). */
.bill-new {
  padding: 0 1px;
  background: color-mix(in srgb, var(--accent) 11%, transparent);
  border-radius: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Новый текст целиком («следующего содержания») - блоком с чертой слева,
   без маркера (перепроверка 23 сентября): маркер на всём тексте закона
   читался как «всё подряд выделено». */
.bill-new-block {
  display: block;
  margin: 2px 0;
  padding-left: 12px;
  border-left: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
}

.bill-legend-block {
  padding-left: 6px;
  border-left: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
}

/* Убираемые слова - красным, без зачёркивания: зачёркнутое читается как
   «уже нет», а закон ещё не принят (работа 131). */
.bill-old {
  color: var(--danger);
}

.bill-item {
  font-weight: var(--weight-strong);
}

html:has(.bill-reading-page), body:has(.bill-reading-page) { min-width: 0; }
.bill-reading-toolbar, .bill-reading-modes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bill-reading-toolbar { justify-content: space-between; margin: 20px 0 12px; }
.bill-reading-modes .button[aria-pressed="true"] { color: var(--accent); background: var(--accent-subtle); border-color: var(--accent-border); }
.bill-reading-page:not([data-reading-mode="technical"]) :is(.bill-legend, .bill-technical-only) { display: none; }
.bill-reading-page:not([data-reading-mode="reading"]) :is(.bill-reading-state, .bill-reading-action) { display: none; }
.bill-focus { color: inherit; background: var(--marker, #fff2a8); font-weight: var(--weight-strong); box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* Важное по разбору (работа 132): цитаты карточек «Разбора», найденные
   программой в тексте, подчёркнуты; нажатие ведёт к вопросу. Без подложки:
   маркер занят новыми словами, красное - убираемыми. */
/* К чему подводит экран, не прячется под шапкой окна (пара разговора -
   когда к ней пришли из поиска, работа 125). */
[data-show-me],
.chat-turn {
  scroll-margin-top: 84px;
}

.bill-important {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--attention);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  border-radius: 2px;
}

a.bill-important:hover,
a.bill-important:focus-visible {
  background: var(--attention-subtle);
  text-decoration-color: var(--attention);
}

/* Редакции на полях (работа 133): текст слева, справа список редакций с
   отчётом по каждой. Список липнет к окну, чтобы при десяти редакциях не
   потеряться в прокрутке; на узком окне встаёт над текстом. */
.bill-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 36px;
  align-items: start;
}

.bill-column {
  min-width: 0;
}

.bill-aside {
  position: sticky;
  top: calc(var(--header-height) + env(safe-area-inset-top, 0px) + 16px);
  font-size: var(--text-sm);
}

.bill-aside-title {
  margin: 0 0 6px;
  font-size: var(--text-base);
  font-weight: var(--weight-strong);
}

.bill-edition {
  padding: 10px 0;
  border-top: 1px solid var(--border);
}

.bill-edition-shown {
  padding-left: 10px;
  box-shadow: inset 3px 0 0 var(--accent);
}

.bill-edition-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  column-gap: 8px;
}

/* Список редакций на полях - не плитка (перепроверка 23 сентября): у
   `.plain-list` рамка, тень и строка в две колонки, и в полосе 250px
   название, дата и отчёт налезали друг на друга. */
.bill-editions {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.bill-editions > .bill-edition {
  display: block;
  padding: 10px 0;
  border-bottom: 0;
}

.bill-editions > .bill-edition-shown {
  padding-left: 10px;
}

.bill-edition-title {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: var(--weight-strong);
}

.bill-edition-date {
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.bill-edition-report {
  margin: 2px 0 0;
}

.bill-edition-marks,
.bill-edition-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.bill-edition-actions .button-secondary {
  padding: 4px 10px;
  font-size: var(--text-sm);
}

.bill-editions-more {
  margin-top: 8px;
}

.bill-aside-note {
  margin: 12px 0 0;
}

/* Полоса «Показано: … против …» над текстом сравнения. */
.bill-diff-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
}

.bill-diff-text {
  margin: 0;
}

.bill-removed .bill-place {
  margin-top: 6px;
}

@media (max-width: 1100px) {
  .bill-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .bill-aside {
    position: static;
    order: -1;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
  }
}

.bill-legend {
  margin: 0 0 8px;
}

/* Под правкой - складка «В законе»: было и станет. Отступ и тонкая линия
   слева отделяют её от текста законопроекта; закрыта, пока не понадобилась. */
.bill-overlay {
  margin: -4px 0 12px 0;
  padding-left: 12px;
  border-left: 2px solid var(--border);
  font-size: var(--text-sm);
}

.bill-overlay > summary {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0;
  cursor: pointer;
  list-style: none;
  color: var(--text-secondary);
}

.bill-overlay > summary::-webkit-details-marker {
  display: none;
}

.bill-overlay[open] > summary {
  color: var(--text);
}

.bill-overlay[open] > summary .results-kind-chevron {
  transform: rotate(90deg);
}

.bill-overlay-label {
  flex: 1 1 auto;
  min-width: 0;
}

.bill-overlay > summary .status {
  flex: none;
  min-height: 20px;
  padding: 0 8px;
  font-size: var(--text-xs);
  font-weight: var(--weight-normal);
}

.bill-overlay-body {
  padding: 2px 0 6px calc(0.7em + 8px);
}

.bill-overlay-body p {
  margin: 0 0 8px;
  line-height: var(--leading-doc);
}

.bill-overlay-caption {
  margin: 6px 0 2px;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bill-overlay-note {
  color: var(--attention);
}

/* Под статьёй: одна складка «Кто что говорит», внутри группы. */
.bill-under {
  margin-top: 14px;
  font-size: var(--text-sm);
}

.bill-voices > summary {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--text-base);
  font-weight: var(--weight-strong);
}

.bill-voices > summary::-webkit-details-marker {
  display: none;
}

.bill-voices[open] > summary .results-kind-chevron {
  transform: rotate(90deg);
}

.bill-voices-body {
  padding-left: calc(0.7em + 8px);
}

.bill-voices-body .voice-list {
  padding-bottom: 8px;
}

.bill-article-title {
  margin: 0;
  font-size: var(--text-lg);
}

/* «Изменилась» стоит рядом с номером статьи, а не строкой ниже: замечания
   писались по прошлой редакции, и узнать об этом надо до того, как их
   прочитаешь. */
.bill-change {
  margin-left: 10px;
  vertical-align: 2px;
  font-size: var(--text-xs);
}

.bill-text {
  max-width: var(--measure);
}

.bill-text > p,
.bill-plain > p {
  margin: 0 0 10px;
  line-height: var(--leading-doc);
}

/* Записи об одном месте в законе - одной складкой: подпись места, справа
   счёт по видам. Закрыта, пока читающий не дошёл до этого места. */
.bill-place {
  border-top: 1px solid var(--border);
}

.bill-place:first-of-type {
  border-top: 0;
}

.bill-place > summary {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 0;
  cursor: pointer;
  list-style: none;
}

.bill-place > summary::-webkit-details-marker {
  display: none;
}

.bill-place-label {
  flex: 1 1 auto;
  min-width: 0;
}

.bill-place-count {
  flex: none;
  color: var(--text-secondary);
  font-size: var(--text-xs);
}

.bill-place[open] > summary .results-kind-chevron {
  transform: rotate(90deg);
}

.bill-place > .bill-notes {
  padding: 0 0 8px calc(0.7em + 8px);
}

.bill-margin-empty {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

/* Заметки на полях: без рамки и теней. Карточка рядом с текстом закона спорит
   с ним за внимание, а поле — это напоминание, а не запись в реестре. */
.bill-notes {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bill-notes > li {
  padding: 12px 0;
  border-top: 1px solid var(--border);
}

.bill-notes > li:first-child {
  border-top: 0;
}

.bill-notes .button {
  margin-top: 6px;
}

/* Тип записи стоит подписью перед именем, а не значком: «замечание» и «вывод
   разбора» — утверждения разной силы, и путать их нельзя. */
.bill-note-kind {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.bill-note-head {
  margin: 0;
}

.bill-note-text {
  margin: 4px 0 0;
  line-height: var(--leading-text);
}

.bill-pick-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  align-items: center;
}

.bill-pick {
  flex: 0 1 200px;
  min-width: 0;
}

/* Источник читается на всю ширину, ручной адрес выбирают после чтения. */
.bill-unplaced > li {
  display: block;
}

.bill-unplaced .bill-pick-row {
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: 12px;
}

.bill-unplaced .bill-pick-row .button {
  white-space: nowrap;
}

/* Узкое окно: поля встают под статью. Ужимать колонку чтения ради них нельзя —
   ради неё экран и сделан. */
/* ── Первый экран «Что делаем?» (работа 46) ─────────────────────────── */

/* Две кнопки-ответа и строки живых проектов. Полоса, а не карточка среди
   карточек: это первое, что человек видит утром, и оно должно отличаться от
   ленты дел ниже раньше, чем прочитано слово. */
.start-panel {
  position: relative;
  padding: 24px;
  margin-bottom: 32px;
  overflow: hidden;
  background:
    linear-gradient(180deg, var(--accent-subtle) 0%, var(--surface) 70%);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.start-panel::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--accent);
  content: "";
}

.start-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-bottom: 12px;
}

.start-or {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.start-continue {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.start-continue > li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
}

.start-continue > li:first-child {
  border-top: 0;
}

.start-project {
  font-size: var(--text-base);
  font-weight: var(--weight-strong);
}

.start-templates {
  margin-top: 12px;
}

/* Кнопка, которая выглядит словом в строке: «Завести: законопроект на
   рассмотрение · своя инициатива». Кнопка, а не ссылка, потому что адреса у
   неё нет — она открывает окно. */
.button-link {
  padding: 0;
  margin: 0;
  color: var(--accent);
  background: none;
  border: 0;
  border-radius: 2px;
  font: inherit;
  cursor: pointer;
}

.button-link:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

.button-link:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.start-quiet {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* ── «Где я» на главной проекта (работа 46) ─────────────────────────── */

.plan-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 20px 24px;
  margin-bottom: 24px;
  background: var(--surface);
  border: 1px solid var(--accent-border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

/* Старый проект без «сейчас» спрашивает, а не утверждает: цвет внимания,
   а не цвет программы. */
.plan-bar-ask {
  border-color: var(--attention-border);
  border-left-color: var(--attention);
}

.plan-bar-done {
  border-color: var(--positive-border);
  border-left-color: var(--positive);
}

.plan-bar-main {
  min-width: 0;
}

.plan-bar-eyebrow {
  margin-bottom: 4px;
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.plan-bar-ask .plan-bar-eyebrow {
  color: var(--attention);
}

.plan-bar-title {
  margin-bottom: 4px;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-strong);
  letter-spacing: -0.01em;
  line-height: var(--leading-tight);
}

.plan-bar-link {
  color: inherit;
}

.plan-bar-link:hover {
  color: var(--accent);
}

.plan-bar-copy {
  margin: 0;
  color: var(--text-secondary);
}

.plan-bar-or {
  margin-top: 8px;
}

.plan-bar-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

/* Этапы строкой: один щелчок — и этап стал «сейчас». */
.plan-bar-stages {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: plan-bar-stage;
}

.plan-bar-stage {
  counter-increment: plan-bar-stage;
}

.plan-bar-stage::before {
  margin-right: 6px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  content: counter(plan-bar-stage) ".";
}

.plan-bar-none {
  margin-bottom: 24px;
}

@media (max-width: 900px) {
  .plan-bar {
    grid-template-columns: minmax(0, 1fr);
  }

  .plan-bar-actions {
    justify-content: flex-start;
  }
}

/* ── Экран «План» (работа 46) ───────────────────────────────────────── */

.plan-goal {
  margin-bottom: 24px;
}

.plan-goal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}

.plan-goal-head h2 {
  margin: 0;
}

.plan-goal-text {
  margin: 0;
  max-width: var(--measure);
  white-space: pre-wrap;
}

.plan-stages {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.plan-stage {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 16px;
  padding: 16px 20px 16px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius);
}

.plan-stage + .plan-stage {
  margin-top: 8px;
}

/* Три состояния — три цвета левого края: пройден, сейчас, впереди. Залитой
   строки нет: залитая среди белых читается как выбранная. */
.plan-stage.is-done {
  border-left-color: var(--positive);
}

.plan-stage.is-now {
  border-left-color: var(--accent);
  border-color: var(--accent-border);
  box-shadow: var(--shadow-card);
}

.plan-stage.is-ahead .plan-stage-title {
  color: var(--text-secondary);
}

.plan-stage-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--text-secondary);
  background: var(--surface-muted);
  border-radius: 50%;
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  font-variant-numeric: tabular-nums;
}

.plan-stage.is-done .plan-stage-number {
  color: var(--positive);
  background: var(--positive-subtle);
}

.plan-stage.is-now .plan-stage-number {
  color: var(--surface);
  background: var(--accent);
}

.plan-stage-body {
  min-width: 0;
}

.plan-stage-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.plan-stage-title {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--weight-strong);
}

.plan-stage-body > .row-meta {
  margin-top: 4px;
}

.plan-stage-tools {
  margin-top: 8px;
}

.plan-stage-tools .review-actions {
  margin-top: 8px;
}

.plan-waits {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.plan-wait-list {
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}

.plan-wait {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 6px 0;
}

.plan-wait.is-answered .plan-wait-who {
  color: var(--text-secondary);
}

.plan-wait-who {
  font-weight: var(--weight-strong);
}

.plan-wait .review-actions {
  margin-top: 0;
}

.plan-foot {
  margin-top: 8px;
}

/* ── Образцы плана в «Управлении» (работа 46) ───────────────────────── */

.plan-templates {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.plan-template .fold-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.template-stages {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: template-stage;
}

.template-stages > li {
  counter-increment: template-stage;
}

.template-stages > li .row-link::before {
  margin-right: 8px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  content: counter(template-stage) ".";
}

.template-stages .review-actions {
  margin-top: 0;
}

/* ── Разбор тезисами с галочками (работа 53) ────────────────────────── */

/* Строка тезиса: слева текст в три уровня, справа две галочки. Галочки не
   уезжают под текст на узком окне — им хватает своего столбца. */
.thesis.thesis-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 20px;
  align-items: start;
}

.thesis-main {
  min-width: 0;
}

.thesis-marks {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 2px;
}

.thesis-mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  white-space: nowrap;
  cursor: pointer;
}

.thesis-mark input {
  margin: 0;
}

/* Тезис без галочки остаётся, но тише: серым, без ссылки на вопрос. */
.thesis-row.is-quiet .thesis-line {
  color: var(--text-secondary);
}

.thesis-row.is-rejected .thesis-line {
  color: var(--text-tertiary);
  text-decoration: line-through;
}

/* «Это неверно» — тихая ссылка внутри раскрытого тезиса, не кнопка. */
.thesis-quiet {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--text-sm);
  text-decoration: underline;
  cursor: pointer;
}

.thesis-quiet:hover,
.thesis-quiet:focus-visible {
  color: var(--accent);
}

.thesis-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  cursor: pointer;
}

.theses-tools {
  margin-top: 0;
}

/* Полоса сборки по отметкам (работа 122) - последняя на «Разборе» и
   прилипает к низу окна, пока список листают: галочку поставили - кнопки
   тут же, снизу. Прежняя полоса под шапкой (работа 59) с тремя «по
   отмеченным: 0» убрана. Фон - цвет страницы, сверху тонкая черта,
   чтобы карточки под ней не просвечивали и не сливались. */
.marks-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin: 24px -8px 0;
  padding: 10px 8px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
  background: var(--bg-app);
}

/* «Ближайшее» на «Ведении» (работа 124): строки те же, что в «Сегодня»
   (`.today-row`), раздел с отступом до списка экранов. */
.near-section {
  margin-bottom: 28px;
}

.near-empty {
  max-width: 96ch;
}

.marks-bar-count {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.marks-bar-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 640px) {
  .marks-bar {
    justify-content: flex-start;
  }
}

.area-links {
  margin: 0 0 12px;
}

/* «Результаты» плитками (работа 73): полоса «Собрать» вместо большого поля,
   собранное — плитками, как вопросы на «Разборе», с текстом документа
   внутри. */
/* Блоки по видам (работа 75): голова с числом и кнопкой «Собрать» справа;
   состояние — значком в углу плитки. */
.results-kind + .results-kind {
  margin-top: 28px;
}

.results-kind-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  margin-bottom: 10px;
}

.results-kind-head .summary-label {
  margin: 0;
}

.results-kind-count {
  color: var(--text-tertiary);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-strong);
}

.results-kind-head .button {
  margin-left: auto;
}

/* Вид свёрнут (работа 78): голова — summary с уголком, кнопка справа. */
details.results-kind > summary.results-kind-head {
  margin-bottom: 0;
  cursor: pointer;
  list-style: none;
}

details.results-kind[open] > summary.results-kind-head {
  margin-bottom: 10px;
}

summary.results-kind-head::-webkit-details-marker {
  display: none;
}

summary.results-kind-head:hover .summary-label {
  color: var(--text-secondary);
}

.results-kind-chevron {
  flex: none;
  display: inline-block;
  width: 0.7em;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  transition: transform 120ms ease;
}

.results-kind-chevron::before {
  content: "▸";
}

details.results-kind[open] > summary .results-kind-chevron {
  transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
  .results-kind-chevron {
    transition: none;
  }
}

/* Строка примет под названием плитки (работа 78): вопросы — чернилами. */
.result-marks-line {
  display: block;
  margin-top: 3px;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-tight);
  text-indent: 0;
}

.result-marks-line strong {
  color: var(--ink);
  font-weight: var(--weight-strong);
}

/* Вид с лицом (работа 79): голова вида — плитка по образцу разделов на
   главной: сливовая полоса поверху, значок, название заглавной гарнитурой,
   число цветом, под названием — что внутри. Цвет у всех видов один: семь
   цветов на одной странице — ярмарка, вид узнаётся по значку. */
.results-kind {
  --tile-accent: #6d4c8a;
  position: relative;
  padding: 18px 20px 16px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.results-kind.summary-block,
.results-kind.summary-block:last-child {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.results-kind::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: var(--tile-accent);
  content: "";
}

.results-kind + .results-kind {
  margin-top: 12px;
}

.results-kind-head,
details.results-kind[open] > summary.results-kind-head {
  align-items: center;
  gap: 8px 14px;
  margin-bottom: 0;
}

.results-kind-text {
  display: flex;
  flex: 1 1 200px;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.results-kind-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-strong);
  line-height: var(--leading-tight);
}

.results-kind-count {
  margin-left: 8px;
  color: var(--tile-accent);
  font-size: var(--text-xl);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.results-kind-note {
  margin: 0;
}

details.results-kind > summary.results-kind-head:hover .results-kind-title {
  color: var(--tile-accent);
}

/* Раскрытый список — внутри плитки, под чертой. */
details.results-kind[open] > .results-list {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

/* Почему «Проверено» погасла (работа 79): предупреждение с кнопкой внутри. */
/* Коротко и что затрагивает (работа 81). */
.result-brief,
.result-touches {
  margin: 0 0 0.6rem;
  max-width: var(--measure);
}

.result-brief strong,
.result-touches strong {
  font-weight: 600;
}

.result-stale {
  margin-bottom: 12px;
}

.result-stale a {
  color: inherit;
  text-decoration: underline;
}

.result-stale .review-actions {
  margin-top: 8px;
}

.result-stale .button {
  margin-top: 0;
  margin-left: 0;
}

/* Правка текста документа (работа 80): поле растёт с текстом, но не выше
   половины экрана — справка на двести строк прокручивается внутри поля,
   а кнопки «Сохранить» и «Отмена» остаются на виду. */
.material-frame textarea.field {
  max-height: 55vh;
  overflow: auto;
}

.result-state {
  display: inline-block;
  padding: 1px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  line-height: var(--leading-tight);
}

.result-state.is-new {
  color: var(--attention);
  background: var(--attention-subtle);
  border-color: var(--attention-border);
}

.result-state.is-stale {
  color: #fff;
  background: var(--attention);
}

.result-state.is-checked {
  color: var(--positive);
  background: var(--positive-subtle);
  border-color: var(--positive-border);
}

.result-state.is-past {
  color: var(--text-tertiary);
  border-color: var(--border);
}

.result-about {
  margin: 0 0 8px;
}

.result-card .result-title {
  font-weight: var(--weight-strong);
}

/* Цитаты для проверки (работа 76): в подсказке — ссылками на место в
   тексте; в окне — маркером с охряной чертой, текущая обведена; полоса
   переходов по номерам над текстом. */
.result-quotes .plain-list {
  margin-top: 6px;
}

.result-quotes .quote-link {
  color: inherit;
  font-size: inherit;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: var(--attention-border);
  text-underline-offset: 3px;
}

.quote-check-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 8px 0 10px;
}

.quote-check-strip .summary-label {
  margin: 0 6px 0 0;
}

.quote-check-jump {
  min-width: 2em;
  padding: 2px 8px;
  color: var(--attention);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  background: var(--attention-subtle);
  border: 1px solid var(--attention-border);
  border-radius: 999px;
  cursor: pointer;
}

.quote-check-jump:hover,
.quote-check-jump:focus-visible {
  background: var(--marker);
}

.quote-check-missing {
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

.artifact-text-body mark.quote-check {
  padding: 1px 0;
  background: var(--marker);
  border-bottom: 2px solid var(--attention);
  box-shadow: none;
}

.artifact-text-body mark.quote-check.is-current {
  outline: 2px solid var(--attention);
  outline-offset: 2px;
}

.result-tile-actions {
  align-items: center;
  margin-top: 12px;
}

.result-registry-link {
  margin-left: auto;
  font-size: var(--text-sm);
}

.results-removed {
  margin-top: 28px;
}

/* Окно перед сборкой (работа 74): вопросы проекта с галочками, «все» и
   «ни одного» ссылками, счётчик. Список не выше половины экрана — на
   «Антифроде 3» вопросов 65. */
.question-choice {
  margin-top: 12px;
}

.question-choice-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
}

.question-choice-head .summary-label {
  margin: 0 4px 0 0;
}

.link-button {
  padding: 0;
  color: var(--accent);
  font: inherit;
  font-size: var(--text-sm);
  background: none;
  border: 0;
  cursor: pointer;
}

.link-button:hover {
  text-decoration: underline;
}

.question-choice-count {
  margin: 0 0 0 auto;
}

.question-choice-list {
  display: grid;
  gap: 2px;
  max-height: min(44vh, 520px);
  margin-top: 6px;
  padding: 6px 0;
  overflow: auto;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, var(--tile));
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, var(--tile));
}

/* Строка вопроса — подпись к галочке, а не подпись к полю: общее правило
   `.dialog-frame label` делает подписи блоком с отступом снизу, здесь оно
   не годится. */
.dialog-frame label.question-choice-row {
  display: grid;
  grid-template-columns: auto 2.4em minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  margin: 0;
  padding: 3px 4px;
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
  line-height: var(--leading-tight);
  border-radius: 4px;
  cursor: pointer;
}

.publication-export-choices { display: grid; gap: 12px; }
.dialog-frame label.publication-export-label { display: grid; grid-template-columns: 20px minmax(0,1fr); align-items: start; gap: 12px; padding: 12px 0; margin: 0; font-weight: var(--weight-normal); }
.publication-export-label > input { margin: 4px 0 0; width: 16px; height: 16px; accent-color: var(--accent-base); }
.publication-export-choice { display: flex; align-items: flex-start; gap: 16px; border-bottom: 1px solid var(--border); padding-bottom: 12px; }
.publication-export-choice > label { flex: 1; min-width: 0; }
.publication-export-choice > a { flex-shrink: 0; padding-top: 12px; }
.publication-export-choice strong { overflow-wrap: anywhere; }
.publication-export-choice .row-meta { margin: 4px 0 0; }
.result-scope-nav { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.result-scope-nav a[aria-current="page"] { color: var(--accent-base); background: var(--surface-muted); font-weight: var(--weight-strong); }
.question-choice-row:hover {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.question-choice-number {
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: var(--weight-strong);
  text-align: right;
}

.assemble-ask label + label,
.assemble-ask .question-choice + label,
.assemble-ask .sample-choice + label {
  margin-top: 12px;
}

/* Письмо (работа 86): подписант — должность и фамилия рядом; ссылка на
   бланк под полями. */
.assemble-ask .letter-signer {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 8px 12px;
  margin-top: 12px;
}

.assemble-ask .letter-signer label + label {
  margin-top: 0;
}

.assemble-ask .letter-blank-note {
  margin: 8px 0 0;
}

.assemble-ask .letter-signer + .letter-blank-note + .question-choice,
.assemble-ask .letter-blank-note + .question-choice {
  margin-top: 12px;
}

.letterhead-grid {
  margin-top: 12px;
}

/* Столбцы таблицы по навыку (работа 143): форма видна до сборки. */
.assemble-ask .assemble-columns {
  margin: 12px 0;
}

.assemble-ask .assemble-columns .row-meta {
  margin: 4px 0 0;
}

/* «О компании» (работа 90): свободный текст под бланком, той же ширины. */
.company-facts-field {
  display: block;
  width: 100%;
  min-height: 9em;
  resize: vertical;
}

.assemble-ask .company-facts-note {
  margin: 12px 0 0;
}

.assemble-ask .company-facts-note + label {
  margin-top: 12px;
}

/* «По какому образцу» в окне сборки (работа 77): выбор, чем выйдет Word,
   и загрузка своего файла — под списком вопросов, тем же строем. */
.sample-choice {
  margin-top: 12px;
}

.sample-choice > .field {
  display: block;
  width: 100%;
  margin-top: 8px;
}

.sample-choice-style {
  margin: 6px 0 0;
}

.dialog-frame label.sample-upload {
  margin: 12px 0 6px;
}

.dialog-frame label.sample-upload > input[type="file"] {
  display: block;
  margin-top: 6px;
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
}

.theses-done {
  align-items: center;
}

.theses-rejected .thesis-row .thesis-marks {
  display: none;
}

@media (max-width: 720px) {
  .thesis.thesis-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .thesis-marks {
    flex-direction: row;
    gap: 16px;
    padding-left: 18px;
  }
}

/* ── Направление и исход у вопроса (работа 48) ───────────────────────── */

/* Отбор вопросов: слова состояния слева, список направлений справа. */
.question-filters {
  align-items: center;
}

.question-filters .button-link.is-current,
.outcome-chips .button-link.is-current {
  font-weight: var(--weight-strong);
  text-decoration: underline;
}

.question-filters-direction {
  margin-left: auto;
}

/* Направления на «Управлении»: имя и счёт слева, действия справа. */
.directions-list > li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
}

.directions-list .review-actions {
  margin-left: auto;
}

.outcome-chips {
  margin-bottom: 12px;
}

/* ── Закон с двух сторон (работа 135) ──────────────────────────────── */

/* Два вида одного закона - одна кнопка из двух половин, как переключатель
   вида в Finder или Word: выбранная половина белая и приподнята, другая
   сливается с подложкой. */
.law-lens {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0 0 16px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-sunken);
}

.law-lens-option {
  padding: 5px 14px;
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-ui);
  text-decoration: none;
}

.law-lens-option:hover {
  color: var(--text);
}

.law-lens-option.is-current {
  background: var(--surface);
  color: var(--text);
  font-weight: var(--weight-strong);
  box-shadow: 0 1px 2px rgb(18 33 58 / 14%);
}

.law-lens-option:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

/* ── Две редакции разборами (работа 49) ─────────────────────────────── */

/* Пара: прежняя редакция слева, новая справа, что стало — третьим столбцом. */
.pair-list > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 4px 20px;
  align-items: start;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}

.pair-list > li.pair-head {
  padding: 0 0 6px;
  border-top: 0;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.pair-cell {
  min-width: 0;
}

.pair-statement {
  margin: 0;
}

.pair-empty {
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

.pair-note {
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.pair-side {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 11em;
}

.pair-kind {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.pair-kind-changed,
.pair-kind-new {
  color: var(--accent);
  font-weight: var(--weight-strong);
}

.pair-kind-gone {
  color: var(--text-primary);
  font-weight: var(--weight-strong);
}

.pair-row.is-gone .pair-cell:first-child .pair-statement {
  color: var(--text-secondary);
  text-decoration: line-through;
}

.pair-row.is-quiet .pair-statement {
  color: var(--text-secondary);
}

.pair-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--text-sm);
}

/* Работа 96: пары по вопросам складками; шапка столбцов - над складками. */
p.pair-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 11em;
  gap: 4px 20px;
  margin: 12px 0 4px;
  padding: 0 20px;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.review-fold-body > .pair-list > li:first-child {
  padding-top: 0;
  border-top: 0;
}

.pair-demand {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.pair-demand-met {
  color: var(--positive);
  font-weight: var(--weight-strong);
}

.pair-demand-unmet {
  color: #8a5a00;
  font-weight: var(--weight-strong);
}

.review-fold[class*="review-fold-compare-q-"] {
  --tile-accent: var(--accent);
}

.review-fold.review-fold-compare-rest {
  --tile-accent: var(--text-tertiary);
}

@media (max-width: 720px) {
  p.pair-head {
    display: none;
  }
}

@media (max-width: 720px) {
  .pair-list > li {
    grid-template-columns: minmax(0, 1fr);
  }

  .pair-list > li.pair-head {
    display: none;
  }

  .pair-side {
    min-width: 0;
  }
}

/* ── Мнения на разборе (работа 54) ───────────────────────────────────── */

.thesis-switches {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}

/* Строка «против: … · хочет изменить: … · за: …» под тезисом. */
.opinion-line {
  margin: 4px 0 0;
}

.opinion-stance {
  font-weight: var(--weight-strong);
}

.opinion-stance-against {
  color: var(--danger);
}

.opinion-stance-amend {
  color: var(--accent);
}

.opinion-stance-for {
  color: var(--positive);
}

.opinion-stance-unclear {
  color: var(--text-secondary);
}

/* Имя участника — кнопка, раскрывающая сказанное; выглядит ссылкой. */
.opinion-name {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-primary);
  font: inherit;
  font-size: var(--text-sm);
  text-decoration: underline;
  cursor: pointer;
}

.opinion-name:hover,
.opinion-name:focus-visible,
.opinion-name[aria-expanded="true"] {
  color: var(--accent);
}

.opinion-detail {
  margin: 6px 0 4px;
  padding: 6px 12px;
  border-left: 2px solid var(--border);
}

.opinion-split {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 0.6rem 0;
}

.opinion-detail .section-copy {
  margin: 4px 0;
}

/* Папка писем: одно письмо — одна строка со счётом. */
.letter-list > li {
  padding: 12px 0;
  border-top: 1px solid var(--border);
}

.letter-list > li:first-child {
  border-top: 0;
}

.letter-name {
  margin: 0 0 2px;
  font-weight: var(--weight-strong);
}

/* ── Карточка вопроса на «Разборе» (работа 56) ───────────────────────── */

/* Галочки и кнопки живут внутри карточки — второго столбца у строки нет. */
.thesis.thesis-card {
  grid-template-columns: minmax(0, 1fr);
}

/* Непринятая карточка не прячется, а показывается тише. */
.thesis-card.is-pending .card-line {
  color: var(--text-tertiary);
}

/* Непринятая плитка тише целиком, и тезис тоже (работа 64). */
.thesis-card.is-pending .card-line .card-thesis {
  color: var(--text-tertiary);
}

.card-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

/* Значок у подписи раздела (работа 127) - цветом акцента, чтобы подпись
   прописными не тянула его в серый; у «Внимания» - охрой, как подпись. */
.card-label-icon {
  flex: 0 0 auto;
  color: var(--accent);
}

.card-warning > .card-label .card-label-icon {
  color: var(--attention);
}

.card-place {
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

/* Документы по вопросу на карточке (поправка 21 сентября): название
   ссылкой, под ним вид · дата · «Читать»; общие документы - тише. */
.card-result + .card-result {
  margin-top: 8px;
}

.card-result-title {
  margin: 0;
}

.card-result-shared {
  margin-top: 8px;
}

.card-members {
  margin-top: 8px;
  padding-left: 0;
}

.card-members > .thesis.thesis-row {
  padding-left: 0;
}

.card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.card-actions .button {
  min-height: 28px;
  padding-block: 2px;
}

.theses-pending {
  margin-bottom: 8px;
}

/* ── Плитки «Разбора» (работа 61) ────────────────────────────────────── */

/* «Разбор» стоит на светлом поле с белыми плитками (работа 64): пользователь
   о кремовой бумаге под сплошным чёрным текстом — «она мне прям сильно не
   нравится». Поле и поверхность подменяются на этом экране, остальные
   экраны — на прежней бумаге. Отметку ставит `setShell`. */
html[data-screen="project-bill-review"] {
  --bg-app: var(--field);
  --surface: var(--tile);
}

/* Плитка во всю ширину, по одной на положение. Сложенная — полоса: номер,
   «кого касается» мелкими прописными, тезис крупно, справа метки.
   Раскрытая — как слайд, в две колонки. Всё на одной странице. */
.cards-list {
  display: grid;
  gap: 12px;
}

.cards-list > .thesis.thesis-card {
  padding: 16px 22px;
  background: var(--tile);
  border: 1px solid color-mix(in srgb, var(--border) 60%, var(--tile));
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

summary.card-line,
.card-fold:not([open]) > summary.card-line {
  display: flex;
  align-items: baseline;
  gap: 14px;
  max-width: none;
  padding-left: 0;
  overflow: visible;
  text-indent: 0;
  -webkit-line-clamp: unset;
}

summary.card-line::before {
  flex: none;
}

/* Номер плитки — второй гарнитурой акцентом (работа 72), как цифры на
   плитках разделов. */
.card-number {
  flex: none;
  min-width: 1.6em;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: var(--weight-strong);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.card-head {
  flex: 1 1 auto;
  min-width: 0;
}

/* Три цвета со смыслом вместо одного чёрного (работа 64): «кого касается»
   — акцентом, тезис — чернилами, выделенное агентом в тезисе — акцентом. */
.card-who {
  display: block;
  margin-bottom: 2px;
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.card-thesis {
  display: block;
  color: var(--ink);
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
}

/* Выделения агента — маркером (работа 69, по эскизу): жёлтая подложка в
   тезисе и в строках плитки, вместо цвета. Зачин «На что обратить
   внимание» и имена в «Позиции» — просто жирные, это не выделения агента. */
.card-thesis strong,
.card-row-body strong {
  padding: 0 2px;
  color: inherit;
  font-weight: inherit;
  background: var(--marker);
  border-radius: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.card-row-body strong.caution-lead,
.card-row-body .row-meta strong {
  padding: 0;
  font-weight: var(--weight-strong);
  background: none;
}

/* Раскрытая плитка строками в два столбца (работы 69–70): слева, шире,
   чтение — метка слева от текста не шире 72 знаков; справа, у́же, вокруг
   вопроса — метка над текстом. Строка «Вопрос на обсуждение» — единственная
   залитая. */
.card-rows {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 0 40px;
  margin-top: 12px;
}

.card-col {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  align-content: start;
  min-width: 0;
}

.card-col-side {
  grid-template-columns: minmax(0, 1fr);
}

.card-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  column-gap: 20px;
  padding: 10px 0;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, var(--tile));
}

.card-col-side .card-row {
  row-gap: 4px;
}

.card-row > .card-label {
  margin: 0;
  padding-top: 3px;
}

.card-row-body {
  min-width: 0;
  max-width: var(--measure);
}

.card-row-body > * + * {
  margin-top: 8px;
}

.card-question {
  margin: 2px 0;
  padding: 12px 14px;
  color: #fff;
  background: var(--accent);
  border-top: 0;
  border-radius: var(--radius);
}

.card-question + .card-row {
  border-top: 0;
}

.card-question > .card-label {
  color: rgb(255 255 255 / 75%);
}

.card-question .section-copy {
  color: #fff;
  font-weight: 500;
}

.card-question strong {
  color: #fff;
  background: rgb(255 255 255 / 22%);
}

.card-warning > .card-label {
  color: var(--attention);
}

.card-warning .caution + .caution {
  margin-top: 10px;
}

.card-norm .card-place {
  color: var(--text-secondary);
  font-size: var(--text-md, 15px);
}

.card-norm-text {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.thesis-card .card-body .quote {
  background: transparent;
  border-left: 2px solid var(--border-strong);
}

.card-marks {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 12px;
  max-width: 40%;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.thesis-body.card-body {
  padding-left: 0;
}

@media (max-width: 900px) {
  .card-rows,
  .card-col,
  .card-row {
    grid-template-columns: 1fr;
    row-gap: 4px;
  }

  summary.card-line,
  .card-fold:not([open]) > summary.card-line {
    flex-wrap: wrap;
  }
}

/* Мнение, перенесённое программой с прежнего разбора (работа 57) */
.opinion-carried { font-style: italic; }

/* Работа 109: «Кто что говорит» на карточке - во всю ширину, по строке на
   участника. Кто и что хочет - в одной строке, суть под ней, дословное -
   складкой. */
.card-voices {
  margin-top: 8px;
  padding: 12px 0 4px;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, var(--tile));
}

.card-voices > .card-label {
  margin: 0 0 8px;
}

.voice-list {
  display: grid;
  gap: 12px;
}

/* Строка участника - абзацем: имя с датой, суть, дословное складкой.
   Список несёт `plain-list`, а `.plain-list > li` делает строку сеткой в
   два столбца - имя органа уходило в столбик шириной 99px, а «Читать
   целиком» под него (пользователь 21 сентября: «в очень узкий столбик»). */
.voice-list > li.voice {
  display: block;
  padding: 10px 14px;
  border-left: 3px solid var(--border-strong);
}

.voice-head {
  margin: 0 0 4px;
  font-size: var(--text-base);
}

.voice-when {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.voice-statement {
  margin: 0;
  max-width: var(--measure);
}

.voice-statement + .voice-statement {
  margin-top: 6px;
}

.voice-more-fold {
  margin-top: 6px;
}

.voice-more-fold > summary {
  min-height: 32px;
  padding: 4px 0;
}

.voice-more-fold .fold-title {
  font-weight: var(--weight-normal);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.voice-more-fold .fold-body > * + * {
  margin-top: 8px;
}

/* Работа 97: позиция органа во времени. Смена - охрой, как предупреждение:
   это событие, а не состояние. */
.map-cell-changed,
.map-speaker-changed,
.map-detail-changed,
.recent-position-changed,
.actor-changed .summary-label {
  color: var(--attention);
  font-weight: var(--weight-strong);
}
.map-cell.is-changed {
  box-shadow: inset 0 0 0 1px var(--attention);
}
.recent-positions > li.is-changed {
  border-left: 3px solid var(--attention);
  padding-left: 0.6rem;
}
.recent-position-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  align-items: baseline;
}
.review-fold.review-fold-public-recent {
  --tile-accent: #8a5a00;
}

/* Работа 98: панель «Новое на сайте Думы» на главной проекта. */
.sozd-news {
  border-left: 4px solid var(--attention);
}
.sozd-news-list {
  margin: 8px 0 0;
  padding-left: 1.2em;
}
.sozd-news-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}

/* Работа 101: разговор с агентом на главной проекта - под плитками.
   Работа 108: блок - складка, как остальное под плитками. */
.home-chat {
  margin-top: 28px;
}
.home-chat-title {
  margin: 0;
  font-size: var(--text-lg);
}
.home-chat-note {
  max-width: var(--measure);
  margin: 0 0 12px;
}

/* Работа 108: пара «вопрос - ответ» свёрнута до вопроса. Закрытая складка -
   одна строка вопроса с многоточием: по ней вопрос находят, пробегая
   разговор глазами; открытая показывает вопрос целиком. */
.chat-turn > summary {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  padding: 0;
}
/* Своя стрелка, а не маркер браузера: маркер стоит перед строчным текстом, а
   вопрос в одну строку - блок, и маркер уезжал на строку выше. */
.chat-turn > summary::before {
  content: "›";
  grid-row: 1 / span 2;
  color: var(--accent);
  font-weight: var(--weight-strong);
  transition: transform 120ms ease;
}
.chat-turn[open] > summary::before {
  transform: rotate(90deg);
}
.chat-turn > summary .fold-meta {
  grid-column: 2;
}
.chat-turn:not([open]) > summary .chat-question-text {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.chat-turn > summary .chat-question-text {
  max-width: none;
}
.chat-turn[open] > summary {
  margin-bottom: 16px;
}
.chat-attachment-note {
  margin: -8px 0 12px;
}
.home-chat-thread {
  margin-bottom: 12px;
}
/* Поле не липнет к низу, как на «Спросить агента»: на главной оно одно из
   многого, а не главное. */
.home-chat-composer {
  position: static;
  box-shadow: none;
}
.home-chat-composer textarea.chat-input {
  min-height: 56px;
}
.home-chat-composer .chat-composer-actions {
  justify-content: space-between;
}

/* Работа 102: предложения агента под ответом - кнопка и к ней строка,
   по каким вопросам и что учесть. */
.chat-actions {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}
.chat-actions .chat-role {
  margin-bottom: 0;
}
.chat-action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}
.chat-action-row .row-meta {
  max-width: var(--measure);
}

/* ══ Работа 111: белый лист ═══════════════════════════════════════════════
   Цвет и шрифты сменились в `theme.css`; здесь - то, что меняет устройство:
   разделы на главной проекта строками, поля раскрытой карточки вровень. */

/* Разделы проекта - строками с одной линией между ними, а не плитками
   два на два. Слева название со значком, справа числа, что нового и что
   внутри, у края стрелка. Порядок прежний: Закон, Публичное поле,
   Результаты, Ведение. */
.area-tiles {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-top: 1px solid var(--border);
}

.area-tile,
.area-tile.area-tile-results,
.area-strip {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 200px minmax(0, 1fr) 24px;
  gap: 4px 20px;
  align-items: start;
  padding: 18px 0 16px;
  overflow: visible;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  transform: none;
}

.area-tile::before {
  content: none;
}

.area-tile:hover,
.area-tile:focus-visible,
.area-strip:hover,
.area-strip:focus-visible {
  transform: none;
  border-color: var(--border);
  box-shadow: none;
  background: var(--surface-muted);
}

.area-tile:focus-visible,
.area-strip:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

/* Название занимает первый столбец на всю высоту строки. */
.area-tile-head,
.area-strip-head {
  grid-row: 1 / span 4;
  grid-column: 1;
  display: inline-flex;
  gap: 10px;
  align-items: center;
}

.area-tile-title,
.area-strip-title {
  font-size: 17px;
  letter-spacing: -0.01em;
}

.area-tile-numbers,
.area-tile-fresh,
.area-tile-inside,
.area-strip-text,
.area-strip-inside {
  grid-column: 2;
  margin: 0;
}

/* Число и слово в одну строку: «66 вопросов», не столбиком. */
.area-tile-numbers,
.area-tile-results .area-tile-numbers {
  gap: 2px 18px;
  margin: 0;
}

.area-tile-number {
  flex-direction: row;
  align-items: baseline;
  gap: 5px;
}

.area-tile-value {
  font-size: 17px;
}

.area-tile-word {
  font-size: var(--text-sm);
  color: var(--text);
}

.area-tile-fresh,
.area-tile-results .area-tile-fresh {
  grid-auto-flow: row;
  gap: 2px;
  margin-top: 2px;
}

.area-tile-line {
  color: var(--text-secondary);
}

.area-tile-inside,
.area-strip-inside {
  margin-top: 4px;
  flex-basis: auto;
  font-size: var(--text-xs);
}

.area-strip-text {
  flex: none;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* Стрелка у края - как у строки списка: строка ведёт внутрь. */
.area-tile::after,
.area-strip::after {
  grid-row: 1;
  grid-column: 3;
  color: var(--text-tertiary);
  font-size: 18px;
  line-height: var(--leading-tight);
  content: "›";
}

@media (max-width: 640px) {
  .area-tile,
  .area-tile.area-tile-results,
  .area-strip {
    grid-template-columns: minmax(0, 1fr) 24px;
  }

  .area-tile-head,
  .area-strip-head {
    grid-row: 1;
    grid-column: 1;
  }

  .area-tile-numbers,
  .area-tile-fresh,
  .area-tile-inside,
  .area-strip-text,
  .area-strip-inside {
    grid-column: 1;
  }
}

/* Поля раскрытой карточки - парами с общей линией. Пользователь на эскизе
   сразу зацепился глазом: «Что это значит» стояло не напротив «Где в
   тексте», «Чем обернётся» - чуть выше «Позиции». Столбцы теперь не два
   самостоятельных списка, а одна сетка: строка `--card-rows` задаётся
   карточкой, левые поля идут в первый столбец, правые - во второй, и
   линия над парой одна. */
.card-rows {
  grid-template-rows: repeat(var(--card-rows, 5), auto);
  grid-auto-flow: column;
  gap: 0 40px;
}

.card-col {
  display: contents;
}

.card-col-main .card-row {
  grid-column: 1;
  grid-template-columns: 180px minmax(0, 1fr);
}

.card-col-side .card-row {
  grid-column: 2;
  grid-template-columns: minmax(0, 1fr);
}

/* «Вопрос на обсуждение» - заливка тише: на белом листе сплошной
   бирюзовый блок среди тонких линий кричал. Метка и текст - акцентом. */
.card-question {
  color: var(--ink);
  background: var(--accent-subtle);
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, var(--tile));
}

.card-question > .card-label {
  color: var(--accent);
}

.card-question .section-copy {
  color: var(--ink);
}

@media (max-width: 720px) {
  .card-rows {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-flow: row;
  }

  .card-col-main .card-row,
  .card-col-side .card-row {
    grid-column: 1;
  }
}

/* ── Работа 113: «Документы» - опись проекта ─────────────────────────────
   Строка: дата, вид, название ссылкой, что ещё известно. Линия между
   строками, как у разделов на главной. */
.files-section {
  margin-top: 28px;
}

.files-title {
  margin: 0 0 6px;
  font-size: var(--text-lg);
}

.files-count {
  color: var(--text-tertiary);
  font-weight: var(--weight-normal);
  font-variant-numeric: tabular-nums;
}

.files-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border);
}

.file-row {
  display: grid;
  grid-template-columns: 150px 170px minmax(0, 1fr);
  gap: 2px 20px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.file-when {
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.file-kind {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.file-title {
  min-width: 0;
  color: var(--text);
  font-weight: var(--weight-strong);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.file-title:hover,
.file-title:focus-visible {
  color: var(--accent);
  text-decoration: underline;
}

.file-meta {
  grid-column: 3;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

.files-empty {
  margin: 8px 0 0;
}

@media (max-width: 720px) {
  .file-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .file-meta {
    grid-column: 1;
  }
}

/* ── Текст по ширине, как в Word (21 сентября) ───────────────────────────
   Пользователь: «хочется, чтобы текст на разных строках начинался и
   заканчивался в одном месте». Абзацы бегущего текста - выключка по ширине
   с переносами по-русски; последняя строка, как в Word, влево. Подписи,
   метки и строки сведений (`row-meta`) не трогаем: там выключка рвёт
   короткие строки. */
.section-copy,
.summary-value,
.voice-statement,
.review-statement,
.pair-statement,
.quote,
.monitor-body,
.bill-text,
.long-text,
.read-more-body,
.why-body,
.journal-text,
.plan-stage-body,
.timeline-body,
.today-body,
.artifact-text-body,
.fold-body > p:not(.row-meta),
.card-row-body > p:not(.row-meta),
.summary-panel-body > p:not(.row-meta),
.chat-answer-body p,
.chat-answer-body li {
  text-align: justify;
  text-align-last: left;
  hyphens: auto;
  hyphenate-limit-chars: 8 4 4;
}

/* Строки сведений (.row-meta) короткие: растянутые пробелы в них - дыры,
   поэтому они из выключки исключены и внутри складок и карточек. */

/* ── Движение значков (работа 127) ─────────────────────────────────────
   Значки те же, Lucide; двигаются только там, где движение что-то
   сообщает, и один раз. Прописывание штрихом работает через
   `pathLength='1'` у фигур (`icon(..., { draw: true })`): длина любого
   пути = 1, и stroke-dasharray не должен знать, какой значок рисует. */
:root {
  --ease-spring: cubic-bezier(0.2, 0.8, 0.2, 1.15);
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@keyframes icon-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@keyframes icon-rise {
  from { transform: translateY(6px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes icon-pop {
  from { transform: scale(0.7); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes icon-twinkle {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.25) rotate(15deg); }
}

@keyframes icon-nudge {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-9deg); }
  60% { transform: rotate(7deg); }
}

/* Карточка раскрылась: значки разделов прописываются друг за другом,
   содержимое подплывает снизу. Складка при закрытии перестаёт
   рисоваться, поэтому при каждом раскрытии движение идёт заново. */
.card-fold[open] .card-label-icon path,
.card-fold[open] .card-label-icon circle {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: icon-draw 0.55s var(--ease-out) both;
}

.card-fold[open] .card-col .card-row:nth-child(1) .card-label-icon * { animation-delay: 0.05s; }
.card-fold[open] .card-col .card-row:nth-child(2) .card-label-icon * { animation-delay: 0.13s; }
.card-fold[open] .card-col .card-row:nth-child(3) .card-label-icon * { animation-delay: 0.21s; }
.card-fold[open] .card-col .card-row:nth-child(4) .card-label-icon * { animation-delay: 0.29s; }
.card-fold[open] .card-col .card-row:nth-child(5) .card-label-icon * { animation-delay: 0.37s; }
.card-fold[open] .card-col-side .card-row:nth-child(1) .card-label-icon * { animation-delay: 0.09s; }
.card-fold[open] .card-col-side .card-row:nth-child(2) .card-label-icon * { animation-delay: 0.17s; }
.card-fold[open] .card-col-side .card-row:nth-child(3) .card-label-icon * { animation-delay: 0.25s; }
.card-fold[open] .card-voices .card-label-icon * { animation-delay: 0.33s; }

.card-fold[open] > .card-body {
  animation: icon-rise 0.35s var(--ease-out) both;
}

/* Плитка раздела отзывается на руку: значок приподнимается и
   наклоняется, пружиной на четверть секунды; сама плитка, как и раньше,
   чуть приподнимается. */
.area-tile .icon-badge .icon {
  transform-origin: 50% 60%;
  transition: transform 0.28s var(--ease-spring);
}

.area-tile:hover .icon-badge .icon,
.area-tile:focus-visible .icon-badge .icon {
  transform: translateY(-2px) rotate(-8deg) scale(1.1);
}

/* Метки состояния результата со значком; когда плитка приходит в список
   впервые за сеанс (`is-arriving`), метка появляется с движением:
   «новое» вспыхивает искрой дважды, «проверено» дорисовывает галочку,
   «основания изменились» коротко качает головой. Потом всё стоит. */
.result-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.result-state .icon {
  flex: 0 0 auto;
}

.result-card.is-arriving .card-line {
  animation: icon-rise 0.45s var(--ease-spring) both;
}

.result-card.is-arriving .result-state {
  animation: icon-pop 0.4s var(--ease-spring) 0.25s both;
}

.result-card.is-arriving .result-state.is-new .icon {
  transform-origin: center;
  animation: icon-twinkle 1.2s ease-in-out 0.6s 2;
}

.result-card.is-arriving .result-state.is-checked .icon path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: icon-draw 0.45s var(--ease-out) 0.5s both;
}

.result-card.is-arriving .result-state.is-stale .icon {
  transform-origin: 50% 80%;
  animation: icon-nudge 0.5s var(--ease-out) 0.7s 1;
}

/* Кто выключил анимацию в системе, видит те же значки без движения. */
@media (prefers-reduced-motion: reduce) {
  .card-fold[open] .card-label-icon path,
  .card-fold[open] .card-label-icon circle,
  .card-fold[open] > .card-body,
  .result-card.is-arriving .card-line,
  .result-card.is-arriving .result-state,
  .result-card.is-arriving .result-state .icon,
  .result-card.is-arriving .result-state .icon path,
  .results-row.is-arriving .result-state,
  .results-row.is-arriving .result-state .icon,
  .results-row.is-arriving .result-state .icon path {
    animation: none;
    stroke-dashoffset: 0;
  }

  .area-tile .icon-badge .icon {
    transition: none;
  }

  .area-tile:hover .icon-badge .icon,
  .area-tile:focus-visible .icon-badge .icon {
    transform: none;
  }
}

/* ══ Работа 141: модули ═══════════════════════════════════════════════════
   В «Настройке программы»: галочка, название и что внутри - строкой. */
.module-list > li {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.module-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 12px;
  align-items: start;
  cursor: pointer;
}

.module-row input {
  margin-top: 4px;
}

.module-row > span {
  display: grid;
  gap: 2px;
}

/* ══ Работа 144: свой навык ═══════════════════════════════════════════════
   В «Настройке программы» навык строкой: название, чей и какого вида, что
   это за документ; кнопки справа, на узком окне - под текстом. */
.skill-list > li {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.skill-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 16px;
  align-items: start;
}

.skill-row-text {
  display: grid;
  gap: 2px;
}

.skill-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.skill-broken {
  margin-top: 8px;
  color: var(--danger);
}

@media (max-width: 720px) {
  .skill-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .skill-row-actions {
    justify-content: flex-start;
  }
}

.skill-dialog {
  width: min(720px, calc(100vw - 32px));
}

.skill-sample-pick {
  display: grid;
  gap: 6px;
  justify-items: start;
  margin-bottom: 20px;
}

.skill-dialog-status:empty {
  display: none;
}

.skill-dialog-status.is-error {
  color: var(--danger);
}

.skill-dialog label > .row-meta {
  display: block;
  margin-top: 6px;
  font-weight: var(--weight-normal);
}

.skill-body-field {
  min-height: 14em;
  line-height: var(--leading-text);
}

/* ══ Работа 145: «Результаты» списком и чтением ══════════════════════════
   Вариант Г эскиза «Результаты без складок»: слева один список всех
   документов, справа выбранный документ целиком. Складок нет. Над списком
   поиск и виды кнопками со значком: вид узнают по значку, не читая. */

.results-page > .page-header {
  align-items: center;
}

/* «Собрать документ…» - кнопка и меню видов под ней. */
.results-collect {
  position: relative;
}

.results-collect-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.results-collect-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  display: grid;
  gap: 2px;
  width: min(360px, 86vw);
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-raised);
}

.results-collect-item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  width: 100%;
  padding: 8px 12px;
  color: var(--text);
  font: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.results-collect-item > .icon {
  margin-top: 2px;
  color: var(--accent);
}

.results-collect-item:hover,
.results-collect-item:focus-visible {
  background: var(--surface-muted);
}

.results-collect-item:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

.results-collect-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.results-collect-label {
  font-weight: var(--weight-strong);
  line-height: var(--leading-ui);
}

.results-collect-text .row-meta {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Поиск и виды над списком. */
.results-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin: 0 0 16px;
}

.results-search-box {
  position: relative;
  flex: 0 1 300px;
  min-width: 220px;
}

.results-search-box > .icon {
  position: absolute;
  top: 50%;
  left: 12px;
  color: var(--text-tertiary);
  transform: translateY(-50%);
  pointer-events: none;
}

.results-search-box .results-search {
  width: 100%;
  padding-left: 40px;
}

.results-chips {
  display: flex;
  flex: 1 1 360px;
  flex-wrap: wrap;
  gap: 8px;
}

.results-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 4px 12px;
  color: var(--text);
  font: inherit;
  font-size: var(--text-sm);
  line-height: var(--leading-ui);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  cursor: pointer;
}

.results-chip > .icon {
  color: var(--accent);
}

.results-chip-count {
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.results-chip:hover {
  background: var(--surface-muted);
}

.results-chip:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.results-chip[aria-pressed="true"] {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

.results-chip[aria-pressed="true"] > .icon,
.results-chip[aria-pressed="true"] .results-chip-count {
  color: rgb(255 255 255 / 82%);
}

.results-chip-dot {
  width: 8px;
  height: 8px;
  background: var(--attention);
  border-radius: 50%;
}

.results-chip-new[aria-pressed="true"] {
  background: var(--attention);
  border-color: var(--attention);
}

.results-chip-new[aria-pressed="true"] .results-chip-dot {
  background: #fff;
}

/* Две части: список прижат к верху окна и листается сам, документ -
   вместе со страницей. */
html[data-screen="project-results"], html[data-screen="project-results"] body { min-width: 0; }
.results-split {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: 0 32px;
  align-items: start;
  border-top: 1px solid var(--border);
}

/* Управление, вариант А: тот же список слева и рабочая область справа. */
html:has(.management-page), body:has(.management-page) { min-width: 0; }
.management-page { max-width: 1440px; }
.management-split {
  display: grid;
  grid-template-columns: 256px minmax(0, 1fr);
  border-top: 1px solid var(--border);
  align-items: start;
  min-height: 610px;
}
.management-rail {
  position: sticky;
  top: calc(var(--header-height) + 12px);
  padding: 10px 12px 24px 0;
  border-right: 1px solid var(--border);
  background: #f7f7f4;
  max-height: calc(100vh - var(--header-height) - 24px);
  overflow: auto;
}
.management-group {
  padding: 20px 14px 8px;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.management-nav-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}
.management-nav-row:hover:not(:disabled) { background: #efefeb; }
.management-nav-row.is-selected { background: #fff; border-color: var(--border); font-weight: var(--weight-strong); }
.management-nav-row:disabled { cursor: default; color: var(--text-tertiary); }
.management-nav-row:focus-visible { outline: 2px solid var(--accent-base); outline-offset: -2px; }
.management-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #e9f0ed;
  color: #426e5f;
}
.management-icon-access, .management-icon-skills { background: #eeeafa; color: #766092; }
.management-icon-samples, .management-icon-data { background: #eaf0f8; color: #567492; }
.management-icon-company, .management-icon-plans { background: #f4edde; color: #9b783a; }
.management-icon-appearance { background: #f7e9e7; color: #a56659; }
.management-later {
  display: inline-block;
  margin-left: auto;
  padding: 2px 5px;
  border-radius: 4px;
  background: #eaeae5;
  color: #72746c;
  font-size: var(--text-xs);
  white-space: nowrap;
}
.management-pane { min-width: 0; padding: 24px 0 32px 32px; }
.management-pane-head { display: flex; align-items: center; gap: 14px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
.management-pane-head > .management-icon { width: 46px; height: 46px; flex-basis: 46px; border-radius: 11px; }
.management-pane-head h2 { margin: 0 0 5px; font-size: var(--text-lg); }
.management-pane-head p { margin: 0; }
.management-content { padding-top: 24px; }
.management-content > .panel, .management-content > .section { border: 0; border-radius: 0; padding: 0; margin: 0; box-shadow: none; background: transparent; }
.management-content > .panel + .panel { border-top: 1px solid var(--border); margin-top: 32px; padding-top: 24px; }
.management-content .section-heading h2 { font-size: var(--text-base); }
.management-content .section-heading { margin-bottom: 20px; }
.management-content .module-list { border: 0; }
.management-content .module-list > li { padding: 15px 0; border-bottom: 1px solid var(--border); }
.management-content .module-list .module-row { align-items: start; gap: 14px; }
.management-content .module-list input[type="checkbox"] { margin-top: 4px; accent-color: var(--accent-base); }
.management-content .module-list .management-later { margin-left: 10px; vertical-align: 2px; }
.management-content .setup-part { box-shadow: none; border-radius: 0; border-width: 0 0 1px; padding-left: 0; padding-right: 0; }
.management-access > .work-label { max-width: 560px; }
.management-access-detail { margin: 12px 0 24px; }
.management-access-detail p { margin: 6px 0; }
.management-form-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; padding-top: 24px; border-top: 1px solid var(--border); }
.management-form-grid .field { width: 100%; }
.management-form-grid .row-meta { margin: 9px 0 16px; line-height: var(--leading-text); }
.management-footnote { border-top: 1px solid var(--border); margin-top: 24px; padding-top: 16px; color: var(--text-secondary); font-size: var(--text-xs); line-height: var(--leading-doc); }
.management-subtitle { font-size: var(--text-base); margin-top: 32px; }
.management-subheading { font-size: var(--text-base); margin: 0 0 8px; }
.management-path { padding: 14px 16px; border: 1px solid var(--border); border-radius: 6px; overflow-wrap: anywhere; background: #f7f7f4; }
.management-kind-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 0 20px; }
.management-kind-tabs button[aria-pressed="true"] { background: #e8f0ee; color: var(--accent-base); }
.management-content .card-block { border-radius: 0; border: 0; padding: 12px 0; background: transparent; }
.management-content .review-actions { flex-wrap: wrap; }

/* Внутренние формы «Управления» (работа 149). Та же белая поверхность,
   тонкие разделители и спокойные действия, что в чтении «Результатов». */
.management-content { --radius: 8px; }
.management-content .section-heading { padding-bottom: 0; border-bottom: 0; }
.management-content .section-heading p { max-width: var(--measure); }
.management-content .panel-intro { max-width: var(--measure); line-height: var(--leading-text); }
.management-content .summary-label,
.template-controls .summary-label {
  margin-bottom: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  line-height: var(--leading-text);
  letter-spacing: normal;
  text-transform: none;
}
.management-content .work-label { gap: 8px; min-width: 0; }
.management-content .work-form-grid { gap: 20px 24px; }
.management-content .review-actions { gap: 8px; margin-top: 20px; }
.management-content .plain-list .review-actions { margin-top: 0; }
.management-content .section-heading > .button { flex-shrink: 0; }
.management-content .button,
.template-sample .button,
body:has(.management-page) dialog .button {
  min-height: 38px;
  padding: 8px 14px;
  font-size: var(--text-sm);
  border-radius: 8px;
  box-shadow: none;
}
.management-content .button-quiet,
.template-sample .button-quiet { border-color: transparent; }
.management-content .button-quiet:hover:not(:disabled),
.template-sample .button-quiet:hover:not(:disabled) { background: var(--surface-muted); }
.management-content .module-list input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin: 3px 0 0;
  cursor: pointer;
}
.management-content .module-list input:disabled { cursor: not-allowed; }
.management-content .module-list label:has(input:disabled) { color: var(--text-tertiary); }
.management-content .skill-list > .skill-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; padding: 20px 0; }
.management-content .skill-row-actions { justify-content: flex-start; margin-top: 0; }
.management-content .skill-row-text { min-width: 0; }
.management-content .skill-row-text .row-meta { max-width: var(--measure); }
.management-content .plain-list > li { padding-left: 0; padding-right: 0; }
.management-content .plain-list { border-left: 0; border-right: 0; border-radius: 0; }
.management-content .management-path { background: var(--surface-muted); font-size: var(--text-sm); }

.management-project-picker { margin-bottom: 24px; }
.management-project-picker > .work-label { max-width: 560px; }
.management-project-picker > .row-meta { margin: 8px 0 0; }
.management-content .templates-panel > .panel-intro { margin: 0 0 8px; }
.templates-panel > .sr-only { padding: 0; border: 0; }
.management-kind-tabs { gap: 4px; padding: 8px 0 16px; border-bottom: 1px solid var(--border); }
.management-kind-tabs:empty { display: none; }
.management-kind-tabs .button { font-weight: var(--weight-strong); }
.management-kind-tabs button[aria-pressed="true"] { background: var(--accent-subtle); color: var(--accent); }
.template-sample { min-width: 0; padding: 24px 0 0; background: var(--surface); }
.template-sample + .template-sample { margin-top: 32px; border-top: 1px solid var(--border); }
.template-sample-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 20px; }
.template-sample-head h3 { margin: 0; }
.template-scope { color: var(--text-tertiary); font-size: var(--text-sm); }
.template-current { display: flex; gap: 14px; align-items: flex-start; }
.template-file-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
  width: 38px;
  height: 44px;
  color: var(--accent);
  background: var(--accent-subtle);
  border-radius: 8px;
}
.template-current-copy { min-width: 0; }
.template-current-title { margin: 4px 0; font-weight: var(--weight-strong); line-height: var(--leading-text); overflow-wrap: anywhere; }
.template-current-file { margin: 0; overflow-wrap: anywhere; }
.template-sample > .artifact-actions { margin: 12px 0 0; padding: 0; border: 0; }
.template-sample > .row-meta { max-width: var(--measure); margin: 12px 0; }
.template-controls { display: grid; gap: 20px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--border); }
.template-controls .settings-field { width: 100%; max-width: 560px; margin: 0; min-width: 0; }
.template-controls .review-actions { margin: 0; }

/* Родные поля сохраняют клавиатуру, проверку формы и выбор файлов ОС.
   Оформляем сам контрол и кнопку файла, а не подменяем их имитацией. */
:is(.management-content, .template-sample, body:has(.management-page) dialog) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) {
  max-width: 100%;
  min-width: 0;
  min-height: 40px;
  color: var(--text);
  background-color: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: var(--leading-text);
}
:is(.management-content, .template-sample, body:has(.management-page) dialog) input[type="file"] {
  display: block;
  width: 100%;
  padding: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  border: 0;
  border-radius: 0;
}
:is(.management-content, .template-sample, body:has(.management-page) dialog) input[type="file"]::file-selector-button {
  min-height: 40px;
  margin-right: 12px;
  padding: 8px 14px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  font: inherit;
  font-weight: var(--weight-strong);
  cursor: pointer;
}
:is(.management-content, .template-sample, body:has(.management-page) dialog) input[type="file"]:hover::file-selector-button { background: var(--surface-muted); }
:is(.management-content, .template-sample, body:has(.management-page) dialog) input[type="file"]:disabled::file-selector-button { opacity: 0.55; cursor: not-allowed; }

/* Новые WebView рисуют и сам раскрытый список в стиле приложения.
   В старых остаётся доступный системный select с теми же полями. */
@supports (appearance: base-select) {
  :is(.management-content, .template-sample, body:has(.management-page) dialog) select,
  :is(.management-content, .template-sample, body:has(.management-page) dialog) select::picker(select) { appearance: base-select; }
  :is(.management-content, .template-sample, body:has(.management-page) dialog) select { align-items: center; padding: 8px 12px; cursor: pointer; }
  body:has(.management-page) dialog .dialog-frame label > select:is(.field, .filter-select) { display: flex; }
  :is(.management-content, .template-sample, body:has(.management-page) dialog) select::picker-icon { color: var(--text-tertiary); }
  :is(.management-content, .template-sample, body:has(.management-page) dialog) select::picker(select) {
    padding: 6px;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-raised);
    font-family: var(--font-ui);
    font-size: var(--text-base);
    max-height: 320px;
    overflow-y: auto;
  }
  :is(.management-content, .template-sample, body:has(.management-page) dialog) option { padding: 10px 12px; border-radius: 6px; white-space: normal; overflow-wrap: anywhere; }
  :is(.management-content, .template-sample, body:has(.management-page) dialog) option:checked { color: var(--accent); background: var(--accent-subtle); font-weight: var(--weight-strong); }
  :is(.management-content, .template-sample, body:has(.management-page) dialog) option:hover { background: var(--surface-muted); }
}
body:has(.management-page) dialog::backdrop { background: rgb(28 28 26 / 28%); backdrop-filter: none; }
body:has(.management-page) dialog .dialog-frame { border-radius: 12px; }
body:has(.management-page) dialog .dialog-heading { padding-bottom: 16px; margin-bottom: 20px; border-bottom: 1px solid var(--border); }
body:has(.management-page) dialog .dialog-heading p { line-height: var(--leading-text); }
body:has(.management-page) dialog .dialog-actions { padding-top: 20px; border-top: 1px solid var(--border); gap: 8px; }

@media (max-width: 700px) {
  .template-sample-head { align-items: flex-start; flex-direction: column; }
  .management-content .work-form-grid { grid-template-columns: minmax(0, 1fr); }
  .management-content .skill-list > .skill-row { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .management-content .section-heading { flex-wrap: wrap; }
  body:has(.management-page) .material-dialog { width: calc(100vw - 24px); }
}
:root[data-look-list-tone="off"] .management-rail { background: transparent; }
:root[data-look-kind-color="off"] .management-icon { background: #f0f0ec; color: #62645c; }
@media (max-width: 1000px) {
  .management-split { grid-template-columns: 220px minmax(0, 1fr); }
  .management-pane { padding-left: 24px; }
  .management-form-grid { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
@media (max-width: 700px) {
  .management-split { display: block; }
  .management-rail { position: static; max-height: none; display: flex; overflow-x: auto; padding: 12px 0; border-right: 0; border-bottom: 1px solid var(--border); }
  .management-group { display: none; }
  .management-nav-row { width: auto; flex-shrink: 0; min-height: 42px; }
  .management-nav-row .management-icon { width: 26px; height: 26px; flex-basis: 26px; }
  .management-pane { padding: 24px 0; }
  .management-pane-head h2 { font-size: var(--text-lg); }
}
@media (prefers-contrast: more) {
  .management-later { color: #353831; border: 1px solid currentColor; }
  .management-nav-row.is-selected { border-color: var(--accent-base); }
}

.results-list-pane {
  position: sticky;
  top: calc(var(--header-height) + 16px);
  max-height: calc(100vh - var(--header-height) - 32px);
  padding: 8px 12px 16px 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-right: 1px solid var(--border);
}

.results-split.is-wide {
  grid-template-columns: minmax(0, 1fr);
}

.results-split.is-wide .results-list-pane {
  display: none;
}

/* Списки без рамки карточки (не `plain-list`): строка - сама кнопка. */
.results-rows,
.results-empty-kinds {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Столбец - по ширине панели, а не по самой длинной строке: вид с датой
   не переносится и иначе распирал бы список за край. */
.results-rows {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
}

.results-month {
  padding: 16px 12px 8px;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
  letter-spacing: 0.06em;
  line-height: var(--leading-ui);
  text-transform: uppercase;
}

.results-rows > .results-month:first-child {
  padding-top: 8px;
}

.results-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  width: 100%;
  min-width: 0;
  padding: 12px;
  color: var(--text);
  font: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.results-row:hover {
  background: var(--surface-muted);
}

.results-row:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

.results-row[aria-current="true"] {
  background: var(--accent-subtle);
}

.results-row.is-quiet {
  color: var(--text-secondary);
}

/* Вид с датой и метка - одной строкой: длинный вид обрезается, метка
   не уходит на свою строку и не удлиняет строку списка. */
.results-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  line-height: var(--leading-ui);
}

.results-row-kind {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.results-row-kind > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.results-row-kind > .results-row-day {
  flex: 0 0 auto;
  overflow: visible;
}

.results-row-top > .result-state {
  flex: 0 0 auto;
}

.results-row-kind > .icon {
  flex: 0 0 auto;
  color: var(--accent);
}

.results-row .result-state {
  font-size: var(--text-xs);
}

.result-state.is-bare {
  padding: 0;
  background: transparent;
  border-color: transparent;
}

.results-row-title {
  display: -webkit-box;
  overflow: hidden;
  font-weight: var(--weight-strong);
  line-height: var(--leading-tight);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.results-row-brief {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-ui);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.results-row .result-marks-line {
  font-size: var(--text-xs);
}

.results-found {
  color: inherit;
  background: var(--marker);
  border-radius: 2px;
}

.results-nothing {
  display: grid;
  gap: 12px;
  justify-items: start;
  padding: 16px 12px;
}

.results-more,
.results-list-pane .results-removed {
  padding: 16px 12px 0;
}

/* Документ справа: шапка, приметы, кнопки и текст шириной строки Word. */
.results-reader {
  min-width: 0;
  padding: 16px 0 48px;
  scroll-margin-top: calc(var(--header-height) + 16px);
}

.results-reader-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

.results-reader-kind {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-ui);
}

.results-reader-kind > .icon {
  color: var(--accent);
}

.results-reader-kind .result-state {
  font-size: var(--text-xs);
}

.results-reader-title {
  overflow-wrap: anywhere;
  max-width: var(--measure);
  margin: 12px 0 16px;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-strong);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.source-basis-frame { max-width: 52rem; }
.source-basis-frame .row-meta { overflow-wrap: anywhere; }

.results-reader-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  max-width: var(--measure);
}

.results-reader-body > .result-about,
.results-reader-body > .result-brief,
.results-reader-body > .result-touches {
  margin: 0;
}

.results-reader-text {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.results-reader-text .artifact-text-body {
  max-height: none;
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.results-reader-none {
  padding: 24px 0;
}

/* Проекта без документов: что можно собрать - строками. */
.results-empty {
  display: grid;
  gap: 16px;
}

.results-empty-kinds {
  border-top: 1px solid var(--border);
}

.results-empty-kind {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

.results-empty-text {
  display: grid;
  gap: 2px;
}

/* Строка приходит в список впервые за сеанс - метка с движением, как у
   плиток (работа 127). */
.results-row.is-arriving .result-state {
  animation: icon-pop 0.4s var(--ease-spring) 0.25s both;
}

.results-row.is-arriving .result-state.is-new .icon {
  transform-origin: center;
  animation: icon-twinkle 1.2s ease-in-out 0.6s 2;
}

.results-row.is-arriving .result-state.is-checked .icon path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: icon-draw 0.45s var(--ease-out) 0.5s both;
}

.results-row.is-arriving .result-state.is-stale .icon {
  transform-origin: 50% 80%;
  animation: icon-nudge 0.5s var(--ease-out) 0.7s 1;
}

/* Узкое окно: список над документом, не сбоку. */
@media (max-width: 1000px) {
  .results-split {
    grid-template-columns: minmax(0, 1fr);
  }

  .results-list-pane {
    position: static;
    max-height: 50vh;
    padding-right: 0;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
}

/* ══ Работа 146: документ справа ═════════════════════════════════════════
   Приметы ячейками со значками, все кнопки на виду, «Целиком | Главное» и
   текст по виду документа. Четыре выключателя в «Настройке программы»:
   по умолчанию всё включено, выключенное метится на корне страницы
   (`data-look-…="off"`), и правила ниже его гасят. */

/* Цвет вида: полутон под значок и чернила для значка и отметки. У
   остального - цвет программы. */
.results-row,
.results-chip,
.results-reader {
  --kind-bg: var(--accent-subtle);
  --kind-ink: var(--accent);
}

[data-tone="brief"] { --kind-bg: #e7eefb; --kind-ink: #2c5bb8; }
[data-tone="theses"] { --kind-bg: #efe9fa; --kind-ink: #6441b3; }
[data-tone="table"] { --kind-bg: #fbefd9; --kind-ink: #955a00; }
[data-tone="slides"] { --kind-bg: #fce8e2; --kind-ink: #b0452a; }
[data-tone="letter"] { --kind-bg: #e4f2e8; --kind-ink: #2d7443; }
[data-tone="status"] { --kind-bg: #e1f1f9; --kind-ink: #1b72a2; }

.kind-badge {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  color: var(--accent);
}

.results-row-kind > .kind-badge {
  overflow: visible;
}

:root:not([data-look-kind-color="off"]) .kind-badge {
  width: 24px;
  height: 24px;
  color: var(--kind-ink);
  background: var(--kind-bg);
  border-radius: 6px;
}

:root:not([data-look-kind-color="off"]) .results-reader-kind .kind-badge {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

:root:not([data-look-kind-color="off"]) .results-chip[data-tone] > .icon {
  color: var(--kind-ink);
}

:root:not([data-look-kind-color="off"]) .results-chip[data-tone][aria-pressed="true"] {
  color: var(--kind-ink);
  background: var(--kind-bg);
  border-color: color-mix(in srgb, var(--kind-ink) 40%, transparent);
}

:root:not([data-look-kind-color="off"]) .results-chip[data-tone][aria-pressed="true"] > .icon,
:root:not([data-look-kind-color="off"]) .results-chip[data-tone][aria-pressed="true"] .results-chip-count {
  color: var(--kind-ink);
}

/* Фон списка полутоном: список на сером, выбранный документ - белым
   листом, как тот, что открыт справа. */
:root:not([data-look-list-tone="off"]) .results-list-pane {
  margin-top: 16px;
  padding: 8px;
  background: var(--surface-muted);
  border-right: 0;
  border-radius: var(--radius);
}

:root:not([data-look-list-tone="off"]) .results-row:hover {
  background: rgb(28 28 26 / 4%);
}

:root:not([data-look-list-tone="off"]) .results-row[aria-current="true"] {
  background: var(--surface);
  box-shadow: 0 1px 2px rgb(28 28 26 / 8%), 0 0 0 1px var(--border);
}

:root:not([data-look-kind-color="off"]) .results-row[aria-current="true"] {
  background: var(--kind-bg);
}

:root:not([data-look-kind-color="off"]):not([data-look-list-tone="off"]) .results-row[aria-current="true"] {
  background: var(--surface);
  box-shadow: inset 3px 0 0 var(--kind-ink), 0 1px 2px rgb(28 28 26 / 8%), 0 0 0 1px var(--border);
}

/* Документ справа - контейнер: оглавление встаёт сбоку, только когда
   ему есть место рядом с текстом шириной строки Word. */
.results-reader {
  container: reader / inline-size;
}

/* Приметы: шесть ячеек в три столбца, линии между ними - тенью, чтобы
   пустое место в неполной строке не стало серым квадратом. */
.reader-cells {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.reader-cell {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-content: start;
  gap: 2px 12px;
  min-width: 0;
  padding: 12px 16px;
  color: var(--text);
  font: inherit;
  text-align: left;
  background: var(--surface);
  border: 0;
  border-radius: 0;
  box-shadow: 0 0 0 1px var(--border);
}

.reader-cell-icon {
  display: inline-flex;
  grid-row: 1 / span 3;
  margin-top: 2px;
  color: var(--accent);
}

:root:not([data-look-kind-color="off"]) .reader-cell-icon {
  color: var(--kind-ink);
}

.reader-cell-label {
  grid-column: 2;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
  line-height: var(--leading-ui);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.reader-cell-value {
  display: -webkit-box;
  grid-column: 2;
  overflow: hidden;
  font-size: var(--text-base);
  line-height: var(--leading-tight);
  overflow-wrap: anywhere;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.reader-cell-note {
  grid-column: 2;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  line-height: var(--leading-ui);
}

.reader-cell-more {
  display: inline-flex;
  grid-column: 3;
  grid-row: 1 / span 3;
  align-self: center;
  color: var(--accent);
}

.reader-cell[aria-expanded="true"] .reader-cell-more .icon {
  transform: rotate(180deg);
}

button.reader-cell {
  cursor: pointer;
}

button.reader-cell:hover {
  background: var(--surface-muted);
}

button.reader-cell[aria-expanded="true"] {
  background: var(--accent-subtle);
}

button.reader-cell:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

.reader-questions {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 24px;
  margin: 0;
  padding: 12px 16px 16px;
  list-style: none;
  background: var(--surface-muted);
  box-shadow: 0 0 0 1px var(--border);
  counter-reset: reader-question;
}

.reader-questions li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 4px;
  font-size: var(--text-sm);
  line-height: var(--leading-ui);
  counter-increment: reader-question;
}

.reader-questions li::before {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  line-height: var(--leading-text);
  content: counter(reader-question);
}

.reader-questions a {
  color: var(--accent);
  text-decoration: none;
}

.reader-questions a:hover {
  text-decoration: underline;
}

/* Кнопки: главная первой, тихие - справа и без рамки. */
.results-reader-body > .result-tile-actions {
  margin-top: 4px;
}

.result-tile-actions .button-secondary .icon {
  color: var(--accent);
}

.result-tile-quiet {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: auto;
}

.result-tile-quiet .button {
  min-height: 36px;
  padding: 6px 10px;
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
  border-color: transparent;
}

.result-tile-quiet .result-registry-link {
  margin-left: 0;
}

.result-tile-quiet .icon {
  color: var(--text-tertiary);
}

/* «Целиком | Главное», подсказка, что покажет, и подпись цветов. */
.reader-modebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.reader-segment {
  display: inline-flex;
  padding: 3px;
  background: var(--surface-sunken);
  border-radius: 9px;
}

.reader-segment button {
  padding: 4px 16px;
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--text-sm);
  line-height: var(--leading-ui);
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
}

.reader-segment button[aria-pressed="true"] {
  color: var(--text);
  font-weight: var(--weight-strong);
  background: var(--surface);
  box-shadow: 0 1px 2px rgb(28 28 26 / 12%);
}

.reader-segment button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.reader-hint {
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  line-height: var(--leading-ui);
}

.reader-hint-main,
.results-reader.is-main .reader-hint-full {
  display: none;
}

.results-reader.is-main .reader-hint-main {
  display: inline;
}

.reader-legend {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin-left: auto;
  font-size: var(--text-xs);
  line-height: var(--leading-ui);
}

:root[data-look-text-color="off"] .reader-legend {
  display: none;
}

.reader-modebar + .reader-main .results-reader-text {
  margin-top: 0;
  padding-top: 4px;
  border-top: 0;
}

.reader-toc {
  display: none;
}

/* Текст по виду. Сам текст - гарнитурой документа, служебное - окна. */
.reader-doc {
  color: var(--text);
  font-family: var(--font-document);
  font-size: var(--text-base);
  line-height: var(--leading-doc);
}

.reader-doc p,
.reader-doc .reader-list {
  margin: 0 0 12px;
  text-align: justify;
  text-align-last: left;
  hyphens: auto;
}

.reader-doc .reader-list {
  padding-left: 24px;
}

.reader-doc .reader-list li {
  margin-bottom: 8px;
}

.reader-doc strong {
  font-weight: var(--weight-strong);
}

.reader-h1 {
  margin: 32px 0 12px;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-strong);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  text-wrap: balance;
  scroll-margin-top: calc(var(--header-height) + 16px);
}

.reader-doc > .reader-h1:first-child {
  margin-top: 0;
}

.reader-h2 {
  margin: 20px 0 8px;
  color: var(--text-secondary);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
  line-height: var(--leading-ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.reader-doc .reader-lead-in {
  color: var(--text-secondary);
}

/* Первая фраза - главное. У справки и тезисов она выделена и в «Целиком»:
   по ним можно читать. «Главное» прячет всё остальное. */
.reader-doc-brief .lead,
.reader-doc-theses .lead,
.results-reader.is-main .reader-doc .lead {
  font-weight: var(--weight-strong);
}

.results-reader.is-main .reader-doc .rest,
.results-reader.is-main .reader-doc .reader-full-only {
  display: none;
}

.results-reader.is-main .reader-doc p,
.results-reader.is-main .reader-doc li {
  text-align: left;
}

.reader-callout {
  margin: 0 0 24px;
  padding: 16px 20px;
  background: var(--accent-subtle);
  border-radius: var(--radius);
}

.reader-callout-label,
.reader-tlabel,
.reader-answer-cols b {
  display: block;
  margin-bottom: 4px;
  color: var(--text-tertiary);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
  line-height: var(--leading-ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.reader-callout-label {
  color: var(--accent);
}

.reader-doc .reader-callout p {
  margin: 0;
  text-align: left;
}

.reader-callout.is-decide {
  background: var(--attention-subtle);
}

.reader-callout.is-decide .reader-callout-label {
  color: var(--attention);
}

.reader-cards,
.reader-answers,
.reader-checks {
  display: grid;
  gap: 12px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.reader-cards {
  counter-reset: reader-card;
}

.reader-cards > li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 4px 12px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  counter-increment: reader-card;
}

.reader-cards > li::before {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  background: var(--accent-subtle);
  border-radius: 50%;
  content: counter(reader-card);
}

.reader-card-title {
  align-self: center;
  font-weight: var(--weight-strong);
  line-height: var(--leading-text);
}

.reader-cards .reader-card-text,
.reader-cards .reader-card-source {
  grid-column: 2;
  margin: 0;
  text-align: left;
}

.reader-source {
  display: inline-block;
  margin-left: 6px;
  padding: 0 8px;
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  line-height: var(--leading-text);
  text-indent: 0;
  vertical-align: 1px;
  white-space: nowrap;
  background: var(--accent-subtle);
  border-radius: 999px;
}

.reader-card-source .reader-source {
  margin-left: 0;
}

.reader-answer {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.reader-answer-who {
  padding: 10px 16px;
  font-weight: var(--weight-strong);
  background: var(--surface-muted);
}

.reader-answer-cols,
.reader-tcols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.reader-answer-cols > div,
.reader-tcol {
  padding: 12px 16px;
}

.reader-answer-reply,
.reader-tcol.is-ours {
  background: var(--accent-subtle);
}

.reader-answer-reply b,
.reader-tcol.is-ours .reader-tlabel {
  color: var(--accent);
}

.reader-doc .reader-answer-cols p,
.reader-doc .reader-tcol p,
.reader-doc .reader-tmore p {
  margin: 0 0 8px;
  text-align: left;
}

.reader-tcols.is-single,
.results-reader.is-main .reader-tcols,
.results-reader.is-main .reader-answer-cols {
  grid-template-columns: minmax(0, 1fr);
}

.reader-checks li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
}

.reader-checks .icon {
  margin-top: 4px;
  color: var(--positive);
}

.reader-doc .reader-note {
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

.reader-doc .reader-table-title {
  margin-bottom: 20px;
  color: var(--text-secondary);
  text-align: left;
}

.reader-trow {
  margin: 0 0 20px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  scroll-margin-top: calc(var(--header-height) + 16px);
}

.reader-twhere {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding: 12px 16px;
  font-family: var(--font-ui);
  font-weight: var(--weight-strong);
  line-height: var(--leading-tight);
  background: var(--surface-muted);
}

.reader-tnum {
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.reader-tcols {
  border-top: 1px solid var(--border);
}

.reader-tmore {
  padding: 12px 16px 4px;
  border-top: 1px solid var(--border);
}

.reader-rows {
  display: grid;
  margin: 0 0 16px;
  border-top: 1px solid var(--border);
}

.reader-row {
  display: grid;
  grid-template-columns: minmax(140px, 32%) minmax(0, 1fr);
  gap: 16px;
  padding: 10px 0;
  line-height: var(--leading-text);
  border-bottom: 1px solid var(--border);
}

.reader-row-label {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  line-height: var(--leading-text);
}

.reader-slide {
  margin: 0 0 16px;
  padding: 20px 24px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: 0 6px 18px -14px rgb(28 28 26 / 35%);
  scroll-margin-top: calc(var(--header-height) + 16px);
}

.reader-slide-num {
  color: var(--text-tertiary);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.reader-slide-title {
  margin: 4px 0 12px;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-strong);
  line-height: var(--leading-tight);
  text-wrap: balance;
}

.reader-doc .reader-slide p {
  text-align: left;
}

.reader-sheet {
  max-width: 680px;
  padding: 40px 48px 48px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  box-shadow: 0 10px 28px -20px rgb(28 28 26 / 40%);
}

.reader-sheet .reader-letter-blank,
.reader-sheet .reader-letter-sign {
  color: var(--text-tertiary);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
}

.reader-sheet .reader-letter-blank {
  margin-bottom: 28px;
  text-align: right;
}

.reader-sheet .reader-letter-sign {
  margin: 28px 0 0;
  text-align: left;
}

.reader-sheet .reader-letter-subject {
  max-width: 20em;
  margin-bottom: 24px;
  font-weight: var(--weight-strong);
  line-height: var(--leading-text);
  text-align: left;
}

.reader-sheet .reader-letter-salute {
  margin-bottom: 16px;
  text-align: center;
}

.reader-sheet .reader-letter-body {
  text-indent: 1.25cm;
}

.reader-sheet .reader-letter-attach {
  margin-top: 20px;
  padding-left: 7.2em;
  text-align: left;
  text-indent: -7.2em;
}

.reader-bubble-wrap {
  display: grid;
  justify-items: start;
  gap: 12px;
}

.reader-bubble {
  max-width: 560px;
  padding: 14px 16px 4px;
  font-family: var(--font-ui);
  line-height: var(--leading-text);
  background: #eef3f7;
  border-radius: 16px 16px 16px 4px;
}

.reader-doc .reader-bubble p {
  margin: 0 0 10px;
  text-align: left;
  hyphens: manual;
}

.reader-bubble-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  color: var(--text-tertiary);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  line-height: var(--leading-ui);
}

.reader-bubble-meta .button .icon {
  color: var(--accent);
}

/* Цвет в тексте - как в «Разборе»: ведомства синим, рынок фиолетовым,
   наше предложение маркером, «против» красным, «поддержали» зелёным. */
.reader-doc .t-gov,
.reader-legend .t-gov {
  color: #2b4a9b;
}

.reader-doc .t-mkt,
.reader-legend .t-mkt {
  color: #6b45b5;
}

.reader-doc .t-ours,
.reader-legend .t-ours {
  padding: 0 2px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.reader-doc .t-against,
.reader-legend .t-against {
  color: var(--danger);
  font-weight: var(--weight-strong);
}

.reader-doc .t-for,
.reader-legend .t-for {
  color: var(--positive);
  font-weight: var(--weight-strong);
}

:root[data-look-text-color="off"] .reader-doc .t {
  padding: 0;
  color: inherit;
  font-weight: inherit;
  background: none;
}

/* Цитаты для проверки - той же меткой, что в тексте файла. */
.reader-doc mark.quote-check {
  color: inherit;
  background: var(--marker);
  border-bottom: 2px solid var(--attention);
}

.reader-doc mark.quote-check.is-current {
  outline: 2px solid var(--attention);
  outline-offset: 2px;
}

/* Оглавление сбоку - когда рядом с текстом есть место. */
.reader-toc-title {
  margin: 0 0 8px;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
  line-height: var(--leading-ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.reader-toc ol {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.reader-toc-link {
  display: block;
  width: 100%;
  padding: 4px 8px;
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--text-sm);
  line-height: var(--leading-tight);
  text-align: left;
  background: none;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.reader-toc-link:hover {
  color: var(--text);
  background: var(--surface-muted);
}

.reader-toc-link:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

@container reader (min-width: 1080px) {
  .results-reader-body:has(> .reader-main.has-toc) {
    max-width: calc(var(--measure) + 216px);
  }

  .results-reader-body:has(> .reader-main.has-toc) > :not(.reader-main) {
    max-width: var(--measure);
  }

  .reader-main.has-toc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 176px;
    gap: 40px;
    align-items: start;
  }

  .reader-main.has-toc > .reader-toc {
    position: sticky;
    top: calc(var(--header-height) + 16px);
    display: block;
    padding-top: 4px;
  }
}

/* Узкий документ: ячейки в два столбца, пары - друг под другом. */
@container reader (max-width: 640px) {
  .reader-cells {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reader-questions,
  .reader-answer-cols,
  .reader-tcols {
    grid-template-columns: minmax(0, 1fr);
  }

  .reader-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .reader-sheet {
    padding: 24px 20px;
  }

  .result-tile-quiet {
    margin-left: 0;
  }
}

/* Движение значков (как в работе 127): при смене документа значок вида
   выскакивает, значки примет прописываются друг за другом, текст
   подплывает; значок в строке списка приподнимается под мышью. Только
   если в системе движение не выключено и не выключено в настройке. */
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-look-motion="off"]) .results-reader.is-fresh .results-reader-kind .kind-badge {
    animation: icon-pop 0.4s var(--ease-spring) both;
  }

  :root:not([data-look-motion="off"]) .results-reader.is-fresh .results-reader-kind .kind-badge .icon *,
  :root:not([data-look-motion="off"]) .results-reader.is-fresh .reader-cell-icon .icon * {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: icon-draw 0.6s var(--ease-out) both;
  }

  :root:not([data-look-motion="off"]) .results-reader.is-fresh .reader-cell:nth-child(1) .reader-cell-icon .icon * { animation-delay: 0.1s; }
  :root:not([data-look-motion="off"]) .results-reader.is-fresh .reader-cell:nth-child(2) .reader-cell-icon .icon * { animation-delay: 0.17s; }
  :root:not([data-look-motion="off"]) .results-reader.is-fresh .reader-cell:nth-child(3) .reader-cell-icon .icon * { animation-delay: 0.24s; }
  :root:not([data-look-motion="off"]) .results-reader.is-fresh .reader-cell:nth-child(4) .reader-cell-icon .icon * { animation-delay: 0.31s; }
  :root:not([data-look-motion="off"]) .results-reader.is-fresh .reader-cell:nth-child(5) .reader-cell-icon .icon * { animation-delay: 0.38s; }
  :root:not([data-look-motion="off"]) .results-reader.is-fresh .reader-cell:nth-child(6) .reader-cell-icon .icon * { animation-delay: 0.45s; }

  :root:not([data-look-motion="off"]) .results-reader.is-fresh .reader-main {
    animation: icon-rise 0.4s var(--ease-out) 0.1s both;
  }

  :root:not([data-look-motion="off"]) .results-reader.is-fresh .results-reader-kind .result-state.is-new .icon {
    transform-origin: center;
    animation: icon-twinkle 1.1s ease-in-out 0.5s 2;
  }

  :root:not([data-look-motion="off"]) .results-row .kind-badge .icon,
  :root:not([data-look-motion="off"]) .result-tile-actions .button .icon {
    transition: transform 0.28s var(--ease-spring);
  }

  :root:not([data-look-motion="off"]) .results-row:hover .kind-badge .icon {
    transform: translateY(-2px) rotate(-8deg) scale(1.12);
  }

  :root:not([data-look-motion="off"]) .result-tile-actions .button:hover:not(:disabled) .icon {
    transform: scale(1.15);
  }

  :root:not([data-look-motion="off"]) .reader-cell-more .icon {
    transition: transform 0.2s var(--ease-out);
  }
}

/* «Движение значков» выключено в настройке - значки стоят во всей
   программе, как у того, кто выключил движение в системе (работа 127). */
:root[data-look-motion="off"] .card-fold[open] .card-label-icon path,
:root[data-look-motion="off"] .card-fold[open] .card-label-icon circle,
:root[data-look-motion="off"] .card-fold[open] > .card-body,
:root[data-look-motion="off"] .result-card.is-arriving .card-line,
:root[data-look-motion="off"] .result-card.is-arriving .result-state,
:root[data-look-motion="off"] .result-card.is-arriving .result-state .icon,
:root[data-look-motion="off"] .result-card.is-arriving .result-state .icon path,
:root[data-look-motion="off"] .results-row.is-arriving .result-state,
:root[data-look-motion="off"] .results-row.is-arriving .result-state .icon,
:root[data-look-motion="off"] .results-row.is-arriving .result-state .icon path {
  animation: none;
  stroke-dashoffset: 0;
}

:root[data-look-motion="off"] .area-tile .icon-badge .icon {
  transition: none;
}

:root[data-look-motion="off"] .area-tile:hover .icon-badge .icon,
:root[data-look-motion="off"] .area-tile:focus-visible .icon-badge .icon {
  transform: none;
}

/* A2: source-bound reading summaries on the first screen. */
.project-card-essence {font-size:16px;line-height:1.65;margin:0;color:var(--text);}
.project-card-fact {border-top:1px solid var(--border);padding-top:12px;}
.project-card-fact p,.project-card-materials p {margin:4px 0;line-height:1.5;}
.project-card-label {display:block;font-size:12px;color:var(--text-secondary);margin-bottom:4px;}
.project-card-fact.is-upcoming {border-left:3px solid var(--accent);padding-left:12px;}
.project-card-source {font-size:12px;}
.project-cards {grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));}
html[data-screen="projects"], html[data-screen="projects"] body,
html[data-screen="project-files"], html[data-screen="project-files"] body,
html[data-screen="project-document"], html[data-screen="project-document"] body {min-width:0;}

.bill-layer-page[data-grounds="false"] :is(.bill-under,.bill-unplaced,.bill-technical-only,.bill-legend) {display:none;}
.bill-layer-page[data-comparison="false"] :is(.bill-removed,.bill-diff-bar,.bill-change) {display:none;}
.bill-layer-page .bill-reading-state,.bill-layer-page .bill-reading-action {display:block !important;}
.bill-layer-page .bill-question-links {display:flex;flex-wrap:wrap;gap:8px 16px;font:var(--text-sm)/var(--leading-text) var(--font-ui);}
.bill-layer-page .bill-overlay-layer {margin:16px 0;border-left:2px solid var(--border);padding-left:16px;}
.bill-layer-page .bill-text ins {text-decoration:none;}

/* A5 editorial preparation uses a compact source list and a reading form. */
.preparation-progress {list-style:none;padding:0;margin:24px 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;border-block:1px solid var(--border);}
.preparation-progress li {padding:16px 0;display:grid;gap:8px;}
.preparation-progress span {color:var(--text-secondary);font-size:var(--text-sm);}
.preparation-layout {display:grid;grid-template-columns:280px minmax(0,1fr);gap:32px;}
.preparation-reader {max-width:900px;min-width:0;}
.preparation-material {padding:16px 0;border-top:1px solid var(--border);}
.preparation-field {display:grid;gap:8px;margin:16px 0;font-size:var(--text-sm);}
.preparation-field textarea {resize:vertical;line-height:var(--leading-text);min-height:110px;}
.preparation-actions {display:flex;flex-wrap:wrap;gap:12px;margin:24px 0;}
.preparation-event {border:1px solid var(--border);border-radius:8px;padding:16px;margin:16px 0;}
.publication-banner {display:flex;flex-wrap:wrap;gap:12px 24px;padding:12px 0;border-bottom:1px solid var(--border);font-size:var(--text-sm);color:var(--text-secondary);}
html:has(.project-preparation),body:has(.project-preparation) {min-width:0;}
@media(max-width:850px) {.preparation-layout{grid-template-columns:1fr;gap:24px;}.preparation-materials{max-height:300px;overflow:auto;}.preparation-progress{grid-template-columns:repeat(2,minmax(0,1fr));}}

.bill-layer-page[data-grounds="false"] details:has(.bill-unplaced) {display:none;}

.preparation-layout.is-empty { display: block; max-width: 860px; }

.review-question-dialog { min-width:0; }
.review-question-list { max-height:38vh; overflow:auto; }
.review-question-option { display:flex; gap:12px; align-items:flex-start; padding:12px 0; border-bottom:1px solid var(--border); font-size:var(--text-sm); line-height:var(--leading-text); }
.review-question-option input { flex:none; margin-top:4px; accent-color:var(--accent); }
.review-question-option span { min-width:0; overflow-wrap:anywhere; }
html:has(.review-page),body:has(.review-page) { min-width:0; }
.review-layout > div { min-width:0; }