/* ==========================================================================
   Таблица данных SEO-анализа
   ==========================================================================
   У остальных инструментов таблица одна и свёрстана под свои колонки жёсткой
   сеткой. Здесь таблиц шестнадцать, состав колонок у каждой свой, и заранее
   их не разложить - поэтому обычная <table> на всю ширину, с липкой шапкой
   и сортировкой по щелчку.

   Числа выравниваются вправо и моноширинными цифрами: колонку из 122 429
   и 15 045 иначе невозможно сравнить глазами, а сравнение - единственное,
   зачем в эту таблицу смотрят. */
/* Таблица SEO шире прочих: колонок бывает под двадцать, и часть из них
   человек называет сам - «LT_посетитель обратился в чат» это одна колонка.
   Поэтому таблица прокручивается ВНУТРИ своей области.

   Живая ошибка, из-за которой это написано: без внутренней прокрутки таблица
   распирала страницу целиком, и горизонтальная полоса появлялась у всего
   экрана. Прокрутив её вправо, человек терял из виду и вкладки, и панель
   прогона - а колонка, ради которой он прокручивал, всё равно упиралась
   в правую панель. */
/* Отдельного правила прокрутки здесь больше нет: обе оси включены у всех
   областей сразу (.scroller). Минимум у таблицы SEO не в пикселях, а
   по содержимому: колонок бывает под двадцать, часть из них человек
   называет сам, и осмысленного числа тут не назначить. */
.dtable { width: 100%; min-width: max-content; border-collapse: collapse; font-size: 12.5px; }
.dtable th {
  position: sticky; top: 0; z-index: 1;
  padding: 8px 12px; text-align: left; white-space: nowrap;
  background: var(--surface); border-bottom: 1px solid var(--line-strong);
  color: var(--text-2); font-weight: 600; cursor: pointer; user-select: none;
}
.dtable th:hover { color: var(--accent); }
.dtable th.sorted { color: var(--accent); }
.dtable th .dir { margin-left: 4px; font-size: 9px; opacity: .8; }
.dtable td { padding: 8px 12px; border-bottom: 1px solid var(--line); }
.dtable th.num, .dtable td.num { text-align: right; font-variant-numeric: tabular-nums; }
.dtable tbody tr:hover td { background: var(--surface-2); }
/* Итоговая строка выделяется весом, а не цветом: цвет читался бы как оценка,
   а инструмент ничего не оценивает. */
.dtable tr.total td { font-weight: 600; background: var(--surface-2); }
/* Итог липнет к низу области прокрутки: на длинной таблице он иначе виден
   только тому, кто долистал до конца, - а нужен он как раз по дороге. */
.dtable tfoot td {
  position: sticky; bottom: 0; z-index: 1;
  border-top: 1px solid var(--line-strong);
}
.dtable td.c-total-label { white-space: nowrap; color: var(--text-2); }
.dtable td.wide { max-width: 460px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Программный код поля (crm_fields): моноширинный, чтобы отличаться
   от человекочитаемого названия в соседней колонке той же таблицы. */
.dtable td.code {
  font-family: var(--font-mono);
  font-size: 11.5px; color: var(--text-2);
}
.dtable th.center, .dtable td.center { text-align: center; }

/* Оговорки в правой колонке. Без этого правила список попадал в колонку
   шириной 16px, которую .notice отводит под значок, и текст переносился
   по одному слову - так это и выглядело в первой версии. */
.notice-text ul { margin: 6px 0 0; padding-left: 16px; }
.notice-text li { margin-bottom: 5px; line-height: 1.45; }
.notice-text li:last-child { margin-bottom: 0; }


/* ==========================================================================
   Секция «Свойства клиента» (SEO) - отличается от остальных секций
   настройки: её значения сохраняются в конфиг и живут дольше одного
   запуска. Раньше решалось отдельным компонентом `.form-group`/`.group-head`
   (своя рамка и шапка на каждый блок), потом - модификатором у `.step__body`
   (общий `.steps`/`.step` для всех 9 инструментов); теперь SEO переведена на
   `.card.sect` (эталон, components-v3.css) - модификатор остался тем же,
   просто цепляется прямо к карточке, своего `__body` у неё больше нет. -->
.step--project { border-left: 3px solid var(--accent-soft); padding-left: var(--sp-4); }