/* Каркас портала: то, чего у Basecoat нет. В его CDN-сборке нет утилит Tailwind, а сброс
   браузерных стилей делает заголовки и абзацы безразмерными — поэтому раскладка (контейнер,
   отступы, плитки), типографика и шапка с подвалом заданы здесь. Цвета, скругление и шрифт
   берутся из переменных темы, своих значений тут нет. */

/* ── Раскладка ───────────────────────────────────────────────────────────── */

/* Подвал прижат к низу окна, пока страница короче экрана. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body > main {
  flex: 1 0 auto;
}

/* Поля страницы 24 px; на экране 1440 px таблицы идут во всю ширину. */
.site-container {
  width: 100%;
  max-width: 90rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.site-main {
  padding-block: 1rem 2rem;
}

.site-block {
  margin-top: 2rem;
}

/* Текст только для вспомогательных технологий: подпись группы переключателей, заголовок столбца кнопок. */
.site-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Шапка ───────────────────────────────────────────────────────────────── */

/* Тёмная полоса 48 px в обеих темах: название, разделы слева, переключатель темы справа. */
.site-header {
  background-color: var(--header);
  color: var(--header-foreground);
}

.site-header-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 3rem;
}

.site-brand {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Навигация: активный раздел — подложкой. Признак активного — aria-current="page", его же читают
   вспомогательные технологии. */
.site-nav {
  display: flex;
  gap: 0.25rem;
  margin-inline-end: auto;
}

.site-nav a {
  padding: 0.375rem 0.625rem;
  border-radius: var(--radius);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--header-muted);
}

.site-nav a:hover {
  color: var(--header-foreground);
}

.site-nav a[aria-current="page"] {
  background-color: var(--header-active);
  color: var(--header-foreground);
}

/* Правый край шапки: имя вошедшего, «Выйти» и переключатель темы. Отступ auto прижимает группу вправо и без
   навигации (на странице входа её нет). */
.site-header-end {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-inline-start: auto;
}

.site-user {
  font-size: 0.8125rem;
  color: var(--header-muted);
}

/* Кнопки шапки — «Выйти» и переключатель темы (32×32) — в цветах тёмной шапки. */
.site-header .site-logout .btn,
.site-header .btn.theme-toggle {
  border-color: var(--header-active);
  background-color: transparent;
  color: var(--header-foreground);
  box-shadow: none;
}

.site-header .site-logout .btn:hover,
.site-header .btn.theme-toggle:hover {
  background-color: var(--header-active);
  color: var(--header-foreground);
}

.theme-toggle svg {
  width: 1rem;
  height: 1rem;
}

/* ── Компоненты кита в цветах темы ───────────────────────────────────────── */

/* Секция — белый блок с рамкой на сером фоне страницы, скругление темы (6 px). */
.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: none;
}

/* Кнопка-контур — на фоне секции, рамка цвета полей. Наведение задано здесь же: правило без слоя
   перебивает и наведение кита. */
.btn[data-variant="outline"] {
  border-color: var(--input);
  background-color: var(--card);
  box-shadow: none;
}

.btn[data-variant="outline"]:hover {
  background-color: var(--secondary);
}

/* Плашки статусов: успех, предупреждение, «идёт» — акцентом, нейтральное — серым (ошибка — вариант кита
   destructive). */
.badge[data-variant="success"] {
  background-color: var(--success-soft);
  color: var(--success);
}

.badge[data-variant="warning"] {
  background-color: var(--warning-soft);
  color: var(--warning);
}

.badge[data-variant="info"] {
  background-color: var(--accent);
  color: var(--accent-foreground);
}

.badge[data-variant="muted"] {
  background-color: var(--muted);
  color: var(--muted-foreground);
}

/* ── Подвал ──────────────────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--border);
  color: var(--muted-foreground);
  font-size: 0.875rem;
}

.site-footer .site-container {
  padding-block: 1rem;
}

/* ── Типографика ─────────────────────────────────────────────────────────── */

.site-main h1 {
  font-size: 1.375rem;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.site-main h2 {
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 600;
}

/* Строка пояснения под заголовком страницы: мелко и приглушённо, текст во всю ширину контейнера
   (1392 px) не растягивается. */
.site-lead {
  margin-top: 0.125rem;
  max-width: 120ch;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--muted-foreground);
}

.site-meta {
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

/* Список с разделителями между пунктами. */
.site-list > li {
  padding-block: 0.75rem;
}

.site-list > li + li {
  border-top: 1px solid var(--border);
}

.site-list-title {
  font-weight: 600;
}

/* ── Плитки разделов на заглавной ────────────────────────────────────────── */

.site-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.5rem;
}

/* Плитка — карточка-ссылка фиксированной ширины, подсвечивается при наведении. */
.site-tile {
  flex: 1 1 18rem;
  max-width: 28rem;
  transition: border-color 0.1s ease-in-out;
}

.site-tile:hover {
  border-color: var(--primary);
}

/* ── Вход ────────────────────────────────────────────────────────────────── */

/* Страница входа: заголовок и одна секция 360 px по центру; поля 32 px, подписи 12 px — как в формах. */
.site-login {
  max-width: 22.5rem;
  margin: 3rem auto 0;
}

.card.site-login-form {
  gap: 1rem;
  margin-top: 1.5rem;
  padding: 1.25rem;
}

.site-login-form .field {
  gap: 0.375rem;
}

.site-login-form .field > label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted-foreground);
}

.site-login-form .field > input {
  height: 2rem;
  font-size: 0.8125rem;
}

/* Ошибка поля (пароль не подошёл): рамка destructive у поля, текст 12 px под полями. */
.site-login-form .field > input[aria-invalid="true"] {
  border-color: var(--destructive);
}

.site-login-form [role="alert"]:not(.alert) {
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--destructive);
}

/* Строка ссылок под кнопкой: «Забыли пароль?», «Вернуться ко входу». */
.site-login-note {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

/* ── Таблица состояния ───────────────────────────────────────────────────── */

/* Текст ошибки под бейджем: ячейки таблицы кита не переносят строки, ошибке перенос нужен. */
.site-error {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  white-space: normal;
  overflow-wrap: anywhere;
}

/* ── Эксперименты ────────────────────────────────────────────────────────── */

/* Рабочая область страницы с формой: форма и под ней последние запросы. */
.site-workspace {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 2rem;
}

/* Текст ошибки ввода: у поля и у группы переключателей. */
.site-workspace [role="alert"]:not(.alert) {
  font-size: 0.875rem;
  color: var(--destructive);
}

/* Частотность Wordstat в деталях запроса измерения (_WordstatResult): заголовок, число крупно, пояснения. */
.site-result {
  margin-top: 1.5rem;
}

.site-side-card > .site-result {
  margin-top: 0;
}

.site-result h3 {
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
}

.site-result > h3:first-child {
  margin-top: 0;
}

.site-figure {
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 600;
}

.site-result .site-raw {
  margin-top: 1.5rem;
}

.site-bullets {
  padding-left: 1.25rem;
  list-style: disc;
}

/* Ячейки таблицы кита не переносят строки; адресам и сниппетам перенос нужен. */
.site-cell-wrap {
  min-width: 14rem;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Столбец, прижатый к правому краю контейнера таблицы: виден без прокрутки, строки на узком экране
   уходят под него. Фон — как у страницы, при наведении на строку — как у строки кита. */
.table .site-cell-sticky {
  position: sticky;
  right: 0;
  background-color: var(--background);
}

.table tr:hover .site-cell-sticky {
  background-image: linear-gradient(
    color-mix(in oklab, var(--color-muted) 50%, transparent),
    color-mix(in oklab, var(--color-muted) 50%, transparent));
}

/* Заголовок страницы с действиями справа: список измерений («Новое измерение»), страница измерения
   («Повторить», «Изменить», «Остановить»). Заголовок сжимается и переносится сам, действия остаются справа; на
   узком экране (заголовку меньше 20 rem) действия уходят под него. */
.site-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
}

.site-page-head > :first-child {
  flex: 1 1 20rem;
  min-width: 0;
}

/* Кнопки действий одним рядом; форма «Повторить» в ряду не образует своего блока. */
.site-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
}

.site-actions form {
  display: contents;
}

/* Подсказка кита — одна строка с обрезкой; длинный текст (ошибка, отметки времени) переносится. */
.site-tip-wrap[data-tooltip]::before {
  width: max-content;
  max-width: min(28rem, 80vw);
  white-space: normal;
  text-align: left;
}

/* В двух нижних строках таблицы подсказка раскрывается вверх от ячейки: по центру строки многострочная подсказка
   выступала бы под таблицу и была бы обрезана. */
.site-table tbody tr:nth-last-child(-n + 2) .site-tip-wrap[data-side="left"]::before {
  top: auto;
  bottom: 0;
  --tw-translate-y: 0;
}

/* ── Справка у заголовка ─────────────────────────────────────────────────── */

/* Кнопка «?» рядом с заголовком и окно с текстом под ней (_Help). Окно видно, пока на справке указатель или фокус:
   окно примыкает к кнопке без зазора, и указатель переходит на него, не закрывая; Tab на кнопке открывает его с
   клавиатуры. Esc ставит data-help-closed (site.js) — окно скрыто, пока указатель и фокус не уйдут со справки.
   Окно раскрывается вправо от кнопки, data-side="left" — влево; вниз, а при нехватке места внизу — вверх. */
.site-help {
  position: relative;
  display: inline-flex;
  flex: none;
}

.site-help-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--muted-foreground);
  cursor: help;
}

.site-help-button svg {
  width: 0.875rem;
  height: 0.875rem;
}

.site-help:is(:hover, :focus-within) .site-help-button {
  color: var(--foreground);
}

.site-help-button:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.site-help-pop {
  position: absolute;
  top: 100%;
  left: -0.25rem;
  z-index: 50;
  display: none;
  width: max-content;
  max-width: min(26rem, calc(100vw - 2rem));
  max-height: min(32rem, 70vh);
  overflow-y: auto;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--popover);
  color: var(--popover-foreground);
  box-shadow: var(--shadow-md);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  text-align: left;
  white-space: normal;
  cursor: auto;
}

.site-help[data-side="left"] .site-help-pop {
  right: -0.25rem;
  left: auto;
}

/* Ниже кнопки окну не хватает места, а выше его больше — окно раскрывается вверх (сторону выбирает site.js). */
.site-help[data-help-up] .site-help-pop {
  top: auto;
  bottom: 100%;
}

.site-help:is(:hover, :focus-within):not([data-help-closed]) .site-help-pop {
  display: block;
}

.site-help-pop > * + * {
  margin-top: 0.5rem;
}

.site-help-pop .site-help-pop-title {
  font-weight: 700;
}

.site-help-pop ul {
  padding-inline-start: 1.125rem;
  list-style: disc;
}

.site-help-pop li + li {
  margin-top: 0.375rem;
}

.site-help-pop li::marker {
  color: var(--muted-foreground);
}

.site-help-pop strong {
  font-weight: 600;
}

/* Заголовок страницы и справка «?» — в одну строку. */
.site-help-title {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

/* Карточка со справкой окно не обрезает: у секции кита overflow: hidden. */
.card.site-side-card:has(.site-help) {
  overflow: visible;
}

/* Правая колонка формы уходит под форму, и справка её карточек раскрывается вправо, как у блоков формы: влево у
   края окна места нет. */
@media (max-width: 62rem) {
  .site-new-side .site-help[data-side="left"] .site-help-pop {
    right: auto;
    left: -0.25rem;
  }
}

/* Таблица в секции прокручивается только по горизонтали: скрытая подсказка кита тоже занимает место, и без этого её
   выступ под таблицей давал бы контейнеру вертикальную полосу прокрутки. */
.site-table-card .table-container {
  overflow-y: hidden;
}

/* Текстовая ссылка: цвет ссылок темы (темнее акцента — читается мелким текстом), подчёркивание при
   наведении. */
.site-link {
  color: var(--link);
  text-underline-offset: 4px;
}

.site-link:hover {
  text-decoration-line: underline;
}

/* ── Измерения: форма создания ───────────────────────────────────────────── */

/* Форма слева, справа колонка 380 px — стоимость, проверка корпуса и «Создать измерение». Колонка липкая: форма
   длинная, а решение и его цена видны всё время. */
.site-workspace.site-new-workspace {
  gap: 1rem;
  margin-top: 1.25rem;
}

.site-new-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 23.75rem;
  gap: 1.25rem;
  align-items: start;
}

.site-new-main,
.site-new-side,
.site-new-check {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.site-new-side {
  position: sticky;
  top: 1rem;
}

/* Форма — одна секция, блоки строками: слева 190 px название блока и строка пояснения, справа поля. Секция не
   обрезает содержимое (у секции кита overflow: hidden): выпадающий список региона в нижнем блоке выходит за её
   нижний край. */
.card.site-new-form {
  gap: 0;
  padding: 0;
  overflow: visible;
}

.site-new-block {
  display: grid;
  grid-template-columns: 11.875rem minmax(0, 1fr);
  gap: 0.75rem 1.25rem;
  padding: 1.25rem;
  border-top: 1px solid var(--border);
}

.site-new-form > .site-new-block:first-child {
  border-top: 0;
}

/* Название блока и справка «?» — в одну строку, пояснение блока — под ними. */
.site-new-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.25rem;
}

.site-new-head h2 {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4;
}

.site-new-head > p {
  flex-basis: 100%;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--muted-foreground);
}

.site-new-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
}

/* Поля в ряд: подпись 12 px над полем, ошибка поля — под ним. */
.site-new-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.75rem;
}

.site-new-grid .field > label,
.site-new-label,
.site-group > legend,
.site-corpus-head > label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted-foreground);
}

.site-new-field {
  gap: 0.375rem;
}

.site-new-field-wide {
  align-self: stretch;
}

/* Поле кита занимает всю ширину — в ряду у каждого поля своя ширина по макету. */
.site-new-row > .site-new-field {
  width: auto;
}

.site-new-row > .site-new-field-short {
  width: 7.5rem;
}

.site-new-row > .site-new-field-region {
  width: 18.75rem;
}

.site-new-row > .site-new-field-model {
  width: 14.5rem;
}

.site-new-row > .site-new-field-money {
  width: 9.375rem;
}

.site-new-field-model > select {
  width: 100%;
}

/* Выбор сегментом в ряду полей: подпись над сегментом, как у поля. */
.site-new-choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Ошибка у короткого поля шире самого поля — поле раздвигается под неё, а не переносит её по слову. */
.site-new-row > .site-new-field-short:has([role="alert"]),
.site-new-row > .site-new-field-money:has([role="alert"]) {
  width: auto;
  max-width: 18rem;
}

.site-new-field-short:has([role="alert"]) :is(.site-unit, input),
.site-new-field-money:has([role="alert"]) .site-unit {
  width: 7.5rem;
}

/* Поля и списки 32 px, текст 13 px — как во всей форме. */
.site-new-grid :is(.field > input, .input:not([type="checkbox"], [type="radio"]), .field > select, .site-region > input) {
  height: 2rem;
  font-size: 0.8125rem;
}

.site-new-grid :is(input, select):user-invalid,
.site-new-grid :is(input, select)[aria-invalid="true"] {
  border-color: var(--destructive);
}

.site-new-grid [role="alert"]:not(.alert) {
  font-size: 0.75rem;
  line-height: 1.45;
}

.site-hint {
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--muted-foreground);
}

/* Предупреждение у поля формы: настройка искажает видимость, но создать измерение не мешает. Текст 12 px цветом
   предупреждения — как строки-предупреждения таблицы корпуса; пустое место не видно и промежутка не занимает. */
.site-form-warning:not(:has(p)) {
  display: none;
}

.site-form-warning p {
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--warning);
}

/* Единица внутри поля справа: «%», «₽». Стрелки числового поля спрятаны — они легли бы на единицу. */
.site-unit {
  position: relative;
}

.site-unit > input {
  width: 100%;
  padding-inline-end: 1.75rem;
  appearance: textfield;
}

.site-unit > input::-webkit-inner-spin-button,
.site-unit > input::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}

.site-unit > span {
  position: absolute;
  top: 50%;
  right: 0.625rem;
  translate: 0 -50%;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  pointer-events: none;
}

/* Сегмент в форме крупнее, чем в панели отбора; сегмент-поле («Веб-контекст») высотой с поле ввода. */
.site-new-form .site-segment > label {
  height: 1.875rem;
  padding-inline: 0.75rem;
  font-size: 0.8125rem;
}

.site-new-form .site-segment-field > label {
  height: 1.75rem;
}

/* Поля чужого режима, источника и весов не показываются: форма спрашивает только то, что
   нужно выбранному варианту. Значения остаются в форме, сервер берёт нужные. */
#measurement-form:has(#mode-budget:checked) [data-when="precision"],
#measurement-form:has(#mode-precision:checked) [data-when="budget"],
#measurement-form:has(#gen-source-search-api:checked) [data-when="responses-api"],
#measurement-form:has(#weights-given:checked) [data-when="wordstat"] {
  display: none;
}

/* Регион весов: без флажка видна строка с регионом измерения, с флажком — выбор своего региона. Скрытая
   половина остаётся в форме, сервер без флажка её не читает. */
#measurement-form:has(#weights-region-own:checked) [data-when-region="same"],
#measurement-form:has(#weights-region-own:not(:checked)) [data-when-region="own"] {
  display: none;
}

/* Сайты — таблица с ячейками ввода: поле без рамки, пока его не трогают, строки 31 px. Номер конкурента ставит
   счётчик строк: после добавления и удаления номера идут по порядку. */
.card.site-table-card.site-sites-card {
  align-self: stretch;
  margin-top: 0;
}

.site-table.site-sites-table td {
  height: 1.9375rem;
  padding: 0;
}

.site-sites-table td:nth-child(n + 3) {
  border-inline-start: 1px solid var(--border);
}

.site-new-grid .site-sites-table .input {
  width: 100%;
  height: 1.875rem;
  padding-inline: 0.625rem;
  border-color: transparent;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
}

.site-new-grid .site-sites-table .input:hover {
  border-color: var(--border);
}

.site-new-grid .site-sites-table .input:focus-visible {
  border-color: var(--ring);
}

.site-table.site-sites-table .site-sites-no,
.site-table.site-sites-table .site-sites-remove {
  width: 2.25rem;
  padding: 0;
  text-align: center;
}

.site-sites-no {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
}

.site-sites-no svg {
  width: 1rem;
  height: 1rem;
  color: var(--primary);
  vertical-align: middle;
}

#competitor-rows {
  counter-reset: competitor;
}

#competitor-rows > tr {
  counter-increment: competitor;
}

#competitor-rows .site-sites-no::before {
  content: counter(competitor);
}

/* Все строки удалены — пустая группа строк не рисует лишнюю линию. */
#competitor-rows:not(:has(.site-site-row)) {
  display: none;
}

.site-competitor-remove {
  color: var(--muted-foreground);
}

.site-competitor-remove:hover {
  color: var(--destructive);
}

.site-competitor-remove svg {
  width: 0.875rem;
  height: 0.875rem;
}

.site-sites-add {
  padding: 0.25rem 0.375rem;
  border-top: 1px solid var(--border);
}

.site-sites-add .btn {
  color: var(--link);
}

.site-sites-add .btn svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* Корпус: слева поле фраз с номерами строк и счётчиком, справа 280 px — чем считать вес фразы. */
.site-new-body.site-new-corpus {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 17.5rem;
  gap: 1.25rem;
  align-items: start;
}

.site-corpus-input {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.site-corpus-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.site-corpus-head > label:first-child {
  flex: 1 1 auto;
}

.site-corpus-count {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Поле файла внутри кнопки: само поле не видно, но остаётся в порядке Tab, фокус рисует кнопка. */
.site-file-button {
  position: relative;
}

.site-file-button svg {
  width: 0.875rem;
  height: 0.875rem;
}

.site-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.site-file-button:has(.site-file-input:focus-visible) {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.site-corpus-file {
  font-size: 0.75rem;
}

.site-corpus-file[hidden] {
  display: none;
}

/* Поле фраз с номерами строк: номера и текст одной высоты строки, строки не переносятся — номер всегда напротив
   своей строки; при прокрутке поля номера прокручивает site.js. Столбец номеров лежит поверх отступа поля и
   высоту поля не задаёт: её задаёт само поле. */
.site-corpus-editor {
  position: relative;
  padding-inline-start: 3rem;
  border: 1px solid var(--input);
  border-radius: var(--radius);
  background-color: var(--card);
  overflow: hidden;
}

.site-corpus-editor:focus-within {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
}

.site-corpus-lines {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3rem;
  margin: 0;
  padding: 0.5rem 0.5rem 1.5rem 0.25rem;
  overflow: hidden;
  border-inline-end: 1px solid var(--border);
  background-color: var(--muted);
  color: var(--muted-foreground);
  font-family: inherit;
  font-size: 0.6875rem;
  line-height: 1.125rem;
  font-variant-numeric: tabular-nums;
  text-align: end;
  user-select: none;
}

.site-corpus {
  display: block;
  width: 100%;
  min-height: 16.75rem;
  padding: 0.5rem 0.75rem;
  border: 0;
  outline: 0;
  background-color: transparent;
  font-size: 0.75rem;
  line-height: 1.125rem;
  white-space: pre;
  overflow: auto;
  resize: vertical;
}

/* Таблица строк с причинами — только когда проверка нашла такие строки. */
.site-corpus-issues:not(:has(table)) {
  display: none;
}

.site-corpus-issues .card.site-table-card {
  margin-top: 0.25rem;
}

/* Таблица шириной с поле фраз: фраза и причина переносятся, а не уходят за край секции. */
.site-corpus-issues .site-cell-wrap {
  min-width: 0;
}

.site-corpus-issues tr[data-warning] > td:last-child {
  color: var(--warning);
}

.site-weights {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.site-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.site-group > legend {
  margin-bottom: 0.5rem;
  padding: 0;
}

/* Источник весов — варианты-карточки: щелчок по всей карточке, выбранная — рамкой акцента. */
.site-weight-cards {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.site-choice {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.8125rem;
  cursor: pointer;
}

.site-choice:hover {
  border-color: var(--muted-foreground);
}

.site-choice:has(input:checked) {
  border-color: var(--primary);
  background-color: var(--row-target);
}

.site-choice:has(input:focus-visible) {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.site-choice > input,
.site-check > input {
  flex: none;
  margin-top: 0.1875rem;
}

.site-choice-title {
  display: block;
  font-weight: 500;
}

.site-choice-note {
  display: block;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.site-check {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.45;
}

.site-region-same {
  font-size: 0.8125rem;
}

/* Правая колонка: заголовок карточки и пометка рядом, строки «подпись — значение» с линией между ними. */
.site-side-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
}

.site-quote .site-side-head .site-side-note {
  margin-inline-start: auto;
}

.site-quote-total {
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.site-rows {
  display: flex;
  flex-direction: column;
  font-size: 0.8125rem;
}

.site-rows > div {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 0.4375rem;
  border-top: 1px solid var(--border);
}

.site-rows dt {
  color: var(--muted-foreground);
}

.site-rows dd {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

.site-rows-note {
  margin-inline-start: 0.25rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

/* Строки «признак — значение» с пояснением («Как получен ответ»): название цветом текста, пояснение второй строкой
   12 px приглушённо, значение справа; несколько значений — столбиком. */
.site-rows.site-rows-explained dt {
  color: var(--foreground);
}

.site-rows-hint {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--muted-foreground);
}

.site-rows-explained dd {
  display: flex;
  flex-direction: column;
  flex: none;
  max-width: 50%;
  overflow-wrap: anywhere;
}

/* Таблица чувствительности нужна не всегда — она раскрывается ссылкой. */
.site-scale summary {
  font-size: 0.75rem;
  color: var(--link);
  cursor: pointer;
}

.site-scale > .card.site-table-card,
.site-scale > p {
  margin-top: 0.5rem;
}

.site-scale tr[data-selected] {
  font-weight: 600;
}

.site-new-check .site-side-card > .btn {
  width: 100%;
}

.site-create-bar {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Главная кнопка полосы — «Создать измерение», «Отправить запрос»: во всю ширину колонки, 40 px. */
.site-create-bar > .btn {
  width: 100%;
  height: 2.5rem;
}

.site-create-reason {
  font-size: 0.75rem;
  text-align: center;
  color: var(--muted-foreground);
}

/* ── Измерения: выбор региона ────────────────────────────────────────────── */

/* Поле во всю ширину своей колонки: названия регионов длинные («Ханты-Мансийский автономный округ»). */
.site-region {
  width: 100%;
  max-width: 34rem;
}

/* Справа в поле — номер выбранного региона, перед стрелкой списка. */
.site-region > input[role="combobox"] {
  padding-inline-end: 5rem;
}

.site-region-field-code {
  position: absolute;
  top: 50%;
  right: 2.25rem;
  translate: 0 -50%;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.site-region [data-popover] {
  width: 100%;
}

/* При поиске пункты, найденные по началу названия, идут первыми: порядок задаёт site.js свойством order,
   внутри одного ранга остаётся порядок дерева. */
.site-region [role="listbox"] {
  display: flex;
  flex-direction: column;
}

/* flex-shrink: 0 — в колонке с ограниченной высотой пункты Basecoat (overflow: hidden) иначе сжимаются,
   чтобы вместить весь список, и строки сплющиваются. baseline — название, серый родитель и номер разного
   кегля стоят на одной линии текста. */
.site-region [role="option"] {
  flex-shrink: 0;
  align-items: baseline;
  gap: 0.625rem;
}

/* Глубина в дереве — символами «-» перед названием, тише самого названия. Межбуквенный интервал разводит
   дефисы: в Manrope соседние дефисы сливаются в одну черту, и уровни не сосчитать. */
.site-region-depth {
  letter-spacing: 0.2em;
  color: var(--muted-foreground);
}

.site-region-name {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Родитель — подсказка, какой это из одноимённых регионов: тише названия и уступает ему место. */
.site-region-parent {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

/* Номер у правого края, цифры одной ширины — столбец номеров ровный. Место галочки выбранного пункта
   оставляет отступ пункта справа (Basecoat). */
.site-region-code {
  flex: none;
  margin-inline-start: auto;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted-foreground);
}

.site-region [role="option"].active .site-region-depth,
.site-region [role="option"].active .site-region-parent,
.site-region [role="option"].active .site-region-code {
  color: inherit;
}

/* Путь выбранного региона в дереве — по нему видно, что выбран тот самый регион. */
.site-region-path {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
}

.site-region-path[hidden] {
  display: none;
}

.site-region-own {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

@media (prefers-reduced-motion: reduce) {
  .site-region [data-popover] {
    transition: none;
  }
}

/* ── Списки: панель отбора и таблица в секциях ───────────────────────────── */

/* Панель отбора — секция в одну строку: поиск, чипы, сегмент, итог справа. На узком экране переносится. */
.card.site-toolbar {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: 1rem;
  padding: 0.5rem 0.625rem;
}

.site-toolbar fieldset {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.site-toolbar-end {
  margin-inline-start: auto;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

/* Поиск: иконка внутри поля слева. */
.site-search {
  position: relative;
  display: block;
  flex: 0 1 17.5rem;
}

.site-search > svg {
  position: absolute;
  top: 50%;
  left: 0.625rem;
  width: 0.875rem;
  height: 0.875rem;
  translate: 0 -50%;
  color: var(--muted-foreground);
  pointer-events: none;
}

.site-search > input {
  width: 100%;
  height: 1.875rem;
  padding-inline-start: 2rem;
  border-color: var(--input);
  background-color: var(--card);
  font-size: 0.8125rem;
}

/* Чипы и сегмент — радиокнопки внутри label: сама кнопка скрыта, но остаётся в порядке Tab и
   переключается стрелками; выбранный вариант красится по :has(input:checked), без скриптов. Где выбор — переход
   (таблица запросов), чипы и сегмент — ссылки, выбранная помечена aria-current. */
.site-chip > input,
.site-segment > label > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.site-chip:has(input:focus-visible),
.site-segment > label:has(input:focus-visible),
a.site-chip:focus-visible,
.site-segment > a:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* Фильтры-чипы: пилюли 26 px с рамкой поля; выбранный залит цветом текста. */
.site-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.site-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 1.625rem;
  padding-inline: 0.625rem;
  border: 1px solid var(--input);
  border-radius: 999px;
  font-size: 0.75rem;
  white-space: nowrap;
  cursor: pointer;
}

.site-chip:hover {
  border-color: var(--muted-foreground);
}

.site-chip:has(input:checked),
.site-chip[aria-current] {
  border-color: var(--foreground);
  background-color: var(--foreground);
  color: var(--card);
}

/* Сегмент: дорожка с отступом 2 px, выбранный вариант — фон секции, полужирный, лёгкая тень. */
.site-segment {
  display: inline-flex;
  padding: 2px;
  border-radius: var(--radius);
  background-color: var(--muted);
}

.site-segment > label,
.site-segment > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 1.625rem;
  padding-inline: 0.625rem;
  border-radius: calc(var(--radius) - 1px);
  font-size: 0.75rem;
  color: var(--muted-foreground);
  white-space: nowrap;
  cursor: pointer;
}

.site-segment > label:hover,
.site-segment > a:hover {
  color: var(--foreground);
}

.site-segment > label:has(input:checked),
.site-segment > a[aria-current] {
  background-color: var(--card);
  color: var(--foreground);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

/* Таблица в секции: секция без отступов, шапка таблицы на подложке, текст 13 px, пояснения 12 px. */
.card.site-table-card {
  gap: 0;
  margin-top: 1rem;
  padding: 0;
  overflow: hidden;
}

.table.site-table {
  font-size: 0.8125rem;
  line-height: 1.35;
}

.site-table thead tr {
  background-color: var(--muted);
}

.site-table tr {
  border-color: var(--border);
}

.site-table th {
  height: 2rem;
  padding-inline: 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted-foreground);
}

.site-table td {
  padding: 0.5rem 0.75rem;
}

/* Таблица с одной строкой текста в ячейке — строка 30 px. */
.site-table-compact td {
  padding-block: 0.3125rem;
}

/* Столбец, по которому отсортирована таблица, — цветом текста и стрелкой. */
.site-table th[aria-sort] {
  color: var(--foreground);
  font-weight: 600;
}

.site-table th[aria-sort] svg {
  display: inline;
  width: 0.875rem;
  height: 0.875rem;
  vertical-align: -0.1875rem;
}

/* Числа — цифрами одной ширины и по правому краю. */
.site-table .site-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.site-table .site-cell-sticky {
  background-color: var(--card);
}

.site-table th.site-cell-sticky {
  background-color: var(--muted);
}

/* Кнопки-иконки в строке — 28 px. */
.site-table .btn[data-size="icon-sm"] {
  width: 1.75rem;
  height: 1.75rem;
}

.site-table .btn[data-size="icon-sm"] svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* Пояснение под значением ячейки. */
.site-sub {
  margin-top: 0.125rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

/* Длинное пояснение (модель источника, текст ошибки) обрезается многоточием, целиком — в подсказке. */
.site-ellipsis {
  max-width: 13rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-cell-id {
  color: var(--muted-foreground);
}

/* Название измерения переносится по словам: не уже 14 rem (на узком экране таблица прокручивается, а не
   рвёт слова) и не шире 18 rem (на широком остальные столбцы видны без прокрутки). */
.site-table .site-cell-name {
  min-width: 14rem;
  white-space: normal;
}

.site-run-name {
  display: block;
  max-width: 18rem;
  font-weight: 600;
  overflow-wrap: break-word;
}

.site-run-name:hover {
  text-decoration-line: underline;
  text-underline-offset: 3px;
}

/* Доля от плана: число и полоска. Полоска — элемент progress: дорожка — подложка, заливка — цвет данных. */
.site-progress {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.site-bar {
  flex: none;
  width: 7rem;
  height: 6px;
  border: 0;
  border-radius: 3px;
  background-color: var(--muted);
  appearance: none;
  overflow: hidden;
}

.site-bar::-webkit-progress-bar {
  background-color: var(--muted);
}

.site-bar::-webkit-progress-value {
  background-color: var(--chart-1);
}

.site-bar::-moz-progress-bar {
  background-color: var(--chart-1);
}

/* Подвал таблицы: номер страницы слева, кнопки страниц справа. */
.site-table-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  min-height: 2.5rem;
  padding: 0.375rem 0.75rem;
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.site-table-foot .btn[data-size="icon-sm"] {
  width: 1.75rem;
  height: 1.75rem;
}

/* Сообщение вместо таблицы: пусто или ошибка чтения. */
.site-table-note {
  padding: 1.25rem 0.75rem;
}

/* ── Измерения: страница измерения ───────────────────────────────────────── */

/* Крошки над заголовком страницы. */
.site-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

/* Заголовок и плашки статуса в одну строку. */
.site-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  min-width: 0;
}

.site-title-badges {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
}

.site-title-note {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

/* Строка под заголовком: параметры измерения через пробелы. */
.site-run-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

/* Полоса показателей: шесть равных ячеек через вертикальные линии; в ячейке подпись, значение и под ним полоска
   или пояснение. */
.site-run-state .alert {
  margin-top: 1rem;
}

.card.site-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  margin-top: 1rem;
  padding: 0;
}

.site-strip > div {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
  padding: 0.875rem 1rem;
  border-inline-start: 1px solid var(--border);
}

.site-strip > div:first-child {
  border-inline-start: 0;
}

.site-strip dt {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.site-strip dd {
  font-size: 1.125rem;
  line-height: 1.3;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.site-strip-note {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--muted-foreground);
}

.site-strip-sub {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.site-strip-sub[data-good] {
  color: var(--success);
}

.site-strip .site-bar {
  width: 100%;
  height: 4px;
  border-radius: 2px;
}

/* Две колонки: данные слева, справка справа (360 px). Верх справки — на уровне первой таблицы слева, а не её
   заголовка: отступ равен высоте заголовка секции. */
.site-run-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22.5rem;
  gap: 1.25rem;
  align-items: start;
  margin-top: 1.5rem;
}

.site-run-main,
.site-run-summary {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
}

.site-run-side {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
  margin-top: 1.9375rem;
}

.site-run-section .card.site-table-card {
  margin-top: 0;
}

/* Заголовок секции над таблицей: название 15 px, рядом пояснение приглушённо. */
.site-table-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  margin-bottom: 0.625rem;
}

.site-main .site-heading {
  font-size: 0.9375rem;
  line-height: 1.4;
  font-weight: 700;
}

/* Строка целевого сайта: фон и жирный шрифт — её ищут глазами первой. */
tr[data-target] > td {
  background-color: var(--row-target);
  font-weight: 600;
}

.site-summary td {
  font-variant-numeric: tabular-nums;
}

.site-site-domain {
  margin-inline-start: 0.375rem;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--muted-foreground);
}

/* Плашка «целевой» — с рамкой акцента. */
.badge[data-variant="target"] {
  margin-inline-start: 0.375rem;
  border-color: var(--primary);
  background-color: transparent;
  color: var(--primary);
}

/* Доля: число справа и полоска 72×6; у целевого заливка — цвет целевого сайта, у остальных — цвет прочих. */
.site-table .site-share {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.site-share-value {
  display: inline-block;
  min-width: 3.5rem;
}

.site-bar-share {
  width: 4.5rem;
  margin-inline-start: 0.5rem;
  vertical-align: middle;
}

tr:not([data-target]) .site-bar-share::-webkit-progress-value {
  background-color: var(--chart-2);
}

tr:not([data-target]) .site-bar-share::-moz-progress-bar {
  background-color: var(--chart-2);
}

/* Нулевые строки конкурентов свёрнуты; флажок строки-сводки показывает их, стрелка поворачивается. */
.site-zero-row {
  display: none;
}

.site-table:has(.site-zero-toggle input:checked) .site-zero-row {
  display: table-row;
}

.site-table .site-zero-summary td {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  white-space: normal;
}

.site-zero-toggle {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  cursor: pointer;
}

.site-zero-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.site-zero-toggle svg {
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
  transition: rotate 0.15s ease-in-out;
}

.site-zero-toggle:has(input:checked) svg {
  rotate: 90deg;
}

.site-zero-toggle:has(input:focus-visible) {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* Интервал: полоска, оценка полужирно и границы по сайту приглушённо, без переносов. */
.site-table .site-interval {
  font-variant-numeric: tabular-nums;
}

.site-ibar {
  display: inline-block;
  margin-inline-end: 0.625rem;
  vertical-align: middle;
}

.site-ibar-track {
  fill: var(--border);
}

.site-ibar-family {
  fill: var(--chart-4);
}

.site-ibar-single {
  fill: var(--chart-3);
}

.site-ibar-estimate {
  fill: var(--foreground);
}

.site-interval strong {
  display: inline-block;
  min-width: 2.75rem;
  text-align: right;
  font-weight: 700;
}

.site-interval-bounds {
  margin-inline-start: 0.5rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

/* Столбец «Цель против конкурента»: оценка со знаком и «п.п.» шире доли, плашка вывода — после границ; на полоске
   разности посередине черта нуля. */
.site-diff strong {
  min-width: 4.25rem;
}

.site-diff .badge {
  margin-inline-start: 0.5rem;
}

.site-ibar-zero {
  fill: var(--muted-foreground);
}

/* Легенда полосок интервала — справа в заголовке секции. */
.site-legend {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  margin-inline-start: auto;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.site-legend-estimate,
.site-legend-single,
.site-legend-family {
  display: inline-block;
  flex: none;
}

.site-legend-estimate {
  width: 2px;
  height: 0.75rem;
  background-color: var(--foreground);
}

.site-legend-single,
.site-legend-family {
  width: 1.25rem;
  height: 0.375rem;
  margin-inline-start: 0.5rem;
  border-radius: 1px;
}

.site-legend-single {
  background-color: var(--chart-3);
}

.site-legend-family {
  background-color: var(--chart-4);
}

/* Запросы: заголовок, сегмент вида, чипы состояния и справа строки страницы с кнопками. */
.site-queries-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.625rem;
}

.site-queries-pager {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-inline-start: auto;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted-foreground);
}

.site-queries-pager .btn[data-size="icon-sm"] {
  width: 1.75rem;
  height: 1.75rem;
}

.site-table .site-cell-phrase {
  min-width: 14rem;
  white-space: normal;
}

/* Стрелка к деталям запроса. */
.site-row-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius);
  color: var(--link);
}

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

.site-row-link svg {
  width: 1rem;
  height: 1rem;
}

/* Справка справа: секции с заголовком 15 px и текстом 12 px. */
.card.site-side-card {
  gap: 0.625rem;
  padding: 0.875rem 1rem;
}

.site-side-card h3 {
  font-size: 0.9375rem;
  font-weight: 700;
}

.site-side-note {
  margin-inline-start: 0.375rem;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--muted-foreground);
}

.site-side-text {
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--muted-foreground);
}

/* Паспорт — список «ключ — значение» в две колонки. */
.site-pairs {
  display: grid;
  grid-template-columns: 6.75rem minmax(0, 1fr);
  gap: 0.3125rem 0.75rem;
  font-size: 0.75rem;
}

.site-pairs dt {
  color: var(--muted-foreground);
}

.site-pairs dd {
  overflow-wrap: anywhere;
}

/* Сайты: целевой с брендами первым, конкуренты — «название … домен». */
.site-sites {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  font-size: 0.75rem;
}

.site-sites li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.125rem 0.75rem;
  align-items: baseline;
}

.site-sites li[data-target] {
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.site-sites li[data-target] .site-sites-name {
  font-weight: 700;
}

.site-sites-domain {
  text-align: right;
  color: var(--muted-foreground);
  overflow-wrap: anywhere;
}

.site-sites-brands {
  grid-column: 1 / -1;
  color: var(--muted-foreground);
}

/* История статусов: время, статус полужирно, причина приглушённо. */
.site-history {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  font-size: 0.75rem;
}

.site-history li {
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 1fr);
  gap: 0.75rem;
}

.site-history time {
  font-variant-numeric: tabular-nums;
  color: var(--muted-foreground);
}

.site-history li > span {
  color: var(--muted-foreground);
}

.site-history strong {
  font-weight: 700;
  color: var(--foreground);
}

/* Исключённые фразы: заголовок с числом и «Показать» одной строкой, список раскрывается на месте. */
.site-side-details summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  list-style: none;
  cursor: pointer;
}

.site-side-details summary::-webkit-details-marker {
  display: none;
}

.site-side-details summary .site-link {
  font-size: 0.75rem;
}

.site-side-details [data-when-open],
.site-side-details[open] [data-when-closed] {
  display: none;
}

.site-side-details[open] [data-when-open] {
  display: inline;
}

.site-skipped {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 20rem;
  margin-top: 0.75rem;
  overflow: auto;
  font-size: 0.75rem;
}

.site-skipped li {
  display: flex;
  flex-direction: column;
}

/* Кривая сужения интервала целевого сайта. */
.site-chart svg {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 0.75rem;
}

.site-chart-axis {
  stroke: var(--border);
  stroke-width: 1;
}

.site-chart-label {
  fill: var(--muted-foreground);
  font-size: 11px;
}

.site-chart-ceiling {
  fill: none;
  stroke: var(--muted-foreground);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}

.site-chart-target {
  stroke: var(--success);
  stroke-width: 1.5;
}

.site-chart-point {
  fill: var(--primary);
}

/* Узкий экран: полоса показателей — по три ячейки, справка — под данными. */
@media (max-width: 75rem) {
  .card.site-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .site-strip > div:nth-child(3n + 1) {
    border-inline-start: 0;
  }

  .site-strip > div:nth-child(n + 4) {
    border-top: 1px solid var(--border);
  }
}

@media (max-width: 62rem) {
  .site-run-grid {
    grid-template-columns: 1fr;
  }

  .site-run-side {
    margin-top: 0;
  }
}

/* ── Измерения: детали запроса ───────────────────────────────────────────── */

/* Название измерения в крошках обрезается многоточием. */
.site-crumb-run {
  max-width: 28rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Полоса деталей — пять ячеек в один ряд и на узком экране. */
.card.site-strip.site-strip-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 75rem) {
  .site-strip-5 > div:nth-child(n + 2) {
    border-inline-start: 1px solid var(--border);
  }

  .site-strip-5 > div:nth-child(n + 4) {
    border-top: 0;
  }
}

/* Две колонки: ответ и ссылки слева, исходы и строка очереди справа (400 px). */
.site-query-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 25rem;
  gap: 1.25rem;
  align-items: start;
  margin-top: 1.25rem;
}

.site-query-side {
  margin-top: 0;
}

/* Ответ: текст с переносами из ответа, домены сайтов измерения — фоном интервала семейства. Ссылка на сырое тело
   стоит справа в заголовке секции, само тело раскрывается внизу секции. */
.card.site-raw-host {
  position: relative;
}

.site-answer-text {
  max-width: 80ch;
  font-size: 0.875rem;
  line-height: 1.6;
  white-space: pre-wrap;
}

.site-answer-text strong {
  font-weight: 700;
}

.site-query-grid .site-run-main > .card.site-table-card {
  margin-top: 0;
}

.site-mark {
  padding: 0 0.1875rem;
  border-radius: 3px;
  background-color: var(--chart-4);
  color: var(--foreground);
  font-weight: 600;
}

.site-raw-link > summary {
  position: absolute;
  top: 0.875rem;
  right: 1rem;
  font-size: 0.75rem;
  list-style: none;
  cursor: pointer;
}

.site-raw-link > summary::-webkit-details-marker {
  display: none;
}

p.site-raw-link {
  position: absolute;
  top: 0.875rem;
  right: 1rem;
}

.site-raw-link pre {
  margin-top: 0.75rem;
  max-height: 28rem;
  overflow: auto;
  padding: 0.75rem;
  border-radius: var(--radius);
  background-color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* В секции-таблице (выдача web) сырое тело — с отступами строк. */
.site-table-card .site-raw-link pre {
  margin: 0 1rem 1rem;
}

/* Заголовок секции-таблицы: отступы как у строк. */
.site-card-title {
  padding: 0.875rem 1rem 0.625rem;
}

/* Ссылки ответа: строка 34 px — номер, заголовок ссылкой и домен рядом, справа плашки. */
.site-links > li {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  min-height: 2.125rem;
  padding: 0.3125rem 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.8125rem;
}

.site-links-no {
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
}

.site-links-title {
  min-width: 0;
  overflow-wrap: anywhere;
}

.site-links-domain {
  margin-inline-start: 0.5rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.site-links-marks {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.25rem;
}

/* Подробный вид ссылок (страница результата эксперимента): под заголовком — полный адрес (у web — с датой изменения
   страницы) и сниппет. Строка выше 34 px, поэтому номер и плашки — по верху строки, а не по центру. */
.site-links.site-links-full > li {
  align-items: start;
  padding-block: 0.5rem;
}

.site-links-full .site-links-no,
.site-links-full .site-links-marks {
  padding-top: 0.0625rem;
}

.site-links-url {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  overflow-wrap: anywhere;
}

.site-links-snippet {
  display: block;
  margin-top: 0.25rem;
  max-width: 100ch;
  font-size: 0.75rem;
  line-height: 1.45;
}

/* Исходы по сайтам: строка 24 px, точки по столбцам, целевой — фоном целевой строки, совпавшие — полужирно. */
.site-outcomes {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
}

.site-outcomes th {
  padding: 0.25rem 0.375rem;
  border-bottom: 1px solid var(--border);
  font-weight: 400;
  color: var(--muted-foreground);
  text-align: center;
}

.site-outcomes th:first-child,
.site-outcomes td:first-child {
  text-align: left;
}

.site-outcomes td {
  height: 1.5rem;
  padding: 0 0.375rem;
  border-bottom: 1px solid var(--border);
  text-align: center;
  color: var(--muted-foreground);
}

.site-outcomes tr.site-outcome-hit td {
  font-weight: 700;
  color: var(--foreground);
}

.site-outcomes tr[data-target] > td {
  font-weight: 700;
}

.site-dot {
  display: inline-block;
  width: 0.4375rem;
  height: 0.4375rem;
  border: 1px solid var(--muted-foreground);
  border-radius: 50%;
  vertical-align: middle;
}

.site-dot-on {
  border-color: var(--foreground);
  background-color: var(--foreground);
}

.site-outcome-legend .site-dot {
  margin-inline-start: 0.25rem;
}

@media (max-width: 62rem) {
  .site-query-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Выезжающие панели ───────────────────────────────────────────────────── */

/* Строка крошек с кнопкой панели 26×26 перед ними. */
.site-crumbs-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.site-crumbs-row .site-crumbs {
  margin-bottom: 0;
}

.btn.site-drawer-button {
  width: 1.625rem;
  height: 1.625rem;
  min-width: 0;
  padding: 0;
}

.site-drawer-button svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* Панель — слева от шапки сайта до низа окна, 380 px; остальная страница затемнена, шапка — нет. Страница под
   открытой панелью не прокручивается, прокручивается список внутри. */
dialog.site-drawer {
  position: fixed;
  inset: 3rem auto 0 0;
  width: min(23.75rem, 100vw);
  max-width: none;
  height: auto;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-inline-end: 1px solid var(--border);
  background-color: var(--card);
  color: var(--foreground);
  box-shadow: var(--shadow-lg);
}

dialog.site-drawer::backdrop {
  top: 3rem;
  background-color: var(--scrim);
  opacity: 1;
}

html:has(dialog.site-drawer[open]) {
  overflow: hidden;
}

.site-drawer-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.site-drawer-head {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.875rem 1rem 0.625rem;
}

.site-drawer-head > h2,
.site-drawer-title {
  flex: 1 1 auto;
  min-width: 0;
}

.site-drawer-head > h2 {
  align-self: center;
}

.site-drawer-sub {
  overflow: hidden;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.site-drawer-filter {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0 0.75rem 0.625rem;
}

.site-drawer-filter fieldset {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.site-drawer-filter .site-search {
  flex: none;
}

/* Чипы в панели мельче, чем в панели отбора списка: пять чипов запросов помещаются в одну строку. */
.site-drawer-filter .site-chip {
  height: 1.5rem;
  padding-inline: 0.5rem;
  font-size: 0.6875rem;
}

/* Сегмент во всю ширину панели: варианты делят её поровну. */
.site-segment.site-segment-full {
  display: flex;
}

.site-segment-full > label {
  flex: 1 1 0;
  justify-content: center;
}

.site-drawer-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 0.75rem 0.75rem;
}

.site-drawer-note {
  padding: 1rem 0.25rem;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

.site-drawer-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-inline: 0.75rem;
  padding: 0.625rem 0.25rem;
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
}

.site-drawer-foot:empty {
  display: none;
}

/* Стрелка — в строку с текстом ссылки: иконки кит делает блочными. */
.site-drawer-foot .site-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
}

.site-drawer-foot svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* Карточки измерений: точка статуса, номер и статус, дата справа; название; источник, цель и стоимость. Текущее
   измерение — фоном строки целевого сайта. */
.site-drawer-cards,
.site-drawer-rows {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.site-drawer-card {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 0.8125rem;
  color: var(--foreground);
}

.site-drawer-card:hover,
a.site-drawer-row:hover {
  background-color: var(--muted);
}

.site-drawer-card[aria-current],
.site-drawer-row[aria-current] {
  border-color: var(--chart-3);
  background-color: var(--row-target);
}

.site-drawer-card-head {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.site-drawer-card-date {
  margin-inline-start: auto;
  font-variant-numeric: tabular-nums;
}

.site-drawer-card-name {
  line-height: 1.35;
}

.site-drawer-card[aria-current] .site-drawer-card-name,
.site-drawer-row[aria-current] {
  font-weight: 600;
}

.site-drawer-card-line {
  overflow: hidden;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Точка статуса — цвет плашки статуса. */
.site-status-dot {
  flex: none;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background-color: var(--muted-foreground);
}

.site-status-dot[data-variant="success"] {
  background-color: var(--success);
}

.site-status-dot[data-variant="info"] {
  background-color: var(--primary);
}

.site-status-dot[data-variant="destructive"] {
  background-color: var(--destructive);
}

/* Строки запросов 32 px: номер, фраза с многоточием (целиком — в подсказке), вес справа. */
.site-drawer-row {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: center;
  min-height: 2rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 0.8125rem;
  color: var(--foreground);
}

.site-drawer-row-no,
.site-drawer-row-weight {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
}

.site-drawer-row-phrase {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Форма нового измерения на узком экране: корпус и веса друг под другом, затем правая колонка уходит под форму,
   а полоса «Создать измерение» прижимается к низу окна — создание остаётся под рукой. */
@media (max-width: 75rem) {
  .site-new-body.site-new-corpus {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 62rem) {
  .site-new-grid {
    grid-template-columns: 1fr;
  }

  .site-new-side {
    position: static;
  }

  .site-create-bar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 20;
    padding: 0.75rem 1.5rem;
    border-top: 1px solid var(--border);
    background-color: var(--card);
  }

  body:has(.site-create-bar) {
    padding-bottom: 5.5rem;
  }
}

@media (max-width: 48rem) {
  .site-new-block {
    grid-template-columns: 1fr;
  }
}

/* ── Помощь ───────────────────────────────────────────────────────────────── */

/* Раздел «Помощь» (Pages/Help, макет _HelpLayout): меню страниц слева, текст справа. Компоненты дизайн-системы —
   HelpNav и HelpArticle. */
/* Две колонки: слева меню разделов 240 px, липкое — длинную страницу читают, а меню всегда под рукой; справа текст. */
.site-help-layout {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.site-help-nav {
  position: sticky;
  top: 1rem;
}

.card.site-help-nav {
  gap: 0;
  padding: 0.5rem;
}

.site-help-nav-title {
  padding: 0.25rem 0.625rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted-foreground);
}

.site-help-nav ol {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

/* Пункт меню — строка как в выезжающей панели: наведение — фон muted, текущая страница — фон row-target и рамка
   chart-3, полужирным. Рамка есть у каждого пункта (прозрачная), чтобы текущий не сдвигал соседей. */
.site-help-nav a {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.4375rem 0.625rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--foreground);
}

.site-help-nav a:hover {
  background-color: var(--muted);
}

.site-help-nav a[aria-current="page"] {
  border-color: var(--chart-3);
  background-color: var(--row-target);
  font-weight: 600;
}

.site-help-nav a:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.site-help-nav-no {
  flex: none;
  min-width: 1rem;
  font-weight: 400;
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
}

/* Разделы текущей страницы — под её пунктом, ссылками на свои заголовки: длинная страница читается кусками. */
.site-help-nav-sub {
  display: flex;
  flex-direction: column;
  margin: 0.125rem 0 0.375rem 1.5rem;
}

.site-help-nav .site-help-nav-sub a {
  padding-block: 0.25rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.site-help-nav .site-help-nav-sub a:hover {
  color: var(--foreground);
}

/* Текст страницы — одна секция, разделы внутри отделены линией, как блоки формы. Размер текста — как у текста ответа
   (14 px / 1,6): это чтение, а не таблица; строки абзацев не длиннее 80 знаков. */
/* Колонка текста не шире 56 rem: строки абзацев и так не длиннее 80 знаков, а таблицам в три столбца хватает места. */
.site-help-article {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
  max-width: 56rem;
}

.card.site-help-body {
  gap: 0;
  padding: 0;
}

.site-help-section {
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--border);
  font-size: 0.875rem;
  line-height: 1.6;
}

.site-help-section:first-child {
  border-top: 0;
}

.site-help-section > * + * {
  margin-top: 0.625rem;
}

.site-help-section h2 {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.4;
  scroll-margin-top: 1rem;
}

.site-help-section h3 {
  margin-top: 1.25rem;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4;
}

.site-help-section :is(p, li) {
  max-width: 80ch;
}

.site-help-section strong {
  font-weight: 600;
}

.site-help-section ul,
.site-help-section ol {
  padding-inline-start: 1.25rem;
}

.site-help-section ul {
  list-style: disc;
}

.site-help-section ol {
  list-style: decimal;
}

.site-help-section li + li {
  margin-top: 0.375rem;
}

.site-help-section li::marker {
  color: var(--muted-foreground);
}

/* Таблица в тексте — секция-таблица портала (DataTable) без своего отступа сверху: его задаёт раздел. */
.site-help-section > .card.site-table-card {
  margin-top: 0.75rem;
}

/* Ячейки — абзацы текста: переносятся (у кита — в одну строку) и начинаются от верхнего края. */
.site-help-section .site-table td {
  vertical-align: top;
  white-space: normal;
}

/* Вопрос FAQ — строка со стрелкой, ответ раскрывается под ней; стрелка поворачивается, как у свёрнутых строк сводки. */
.site-help-faq {
  border-top: 1px solid var(--border);
}

.site-help-faq:first-of-type {
  border-top: 0;
}

.site-help-section > .site-help-faq {
  margin-top: 0;
}

.site-help-faq summary {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding-block: 0.625rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.site-help-faq summary::-webkit-details-marker {
  display: none;
}

.site-help-faq summary svg {
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
  color: var(--muted-foreground);
  transition: rotate 0.15s ease-in-out;
  translate: 0 0.125rem;
}

.site-help-faq[open] summary svg {
  rotate: 90deg;
}

.site-help-faq summary:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.site-help-faq > p {
  max-width: 80ch;
  padding: 0 0 0.75rem 1.375rem;
}

/* Готовая фраза для клиента — абзац на подложке muted: её копируют как есть. */
.site-help-quote {
  max-width: 80ch;
  padding: 0.625rem 0.875rem;
  border-radius: var(--radius);
  background-color: var(--muted);
}

/* Памятка — флажки: отметки остаются только в браузере, никуда не отправляются. */
.site-help-checklist {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.site-help-checklist .site-check {
  font-size: 0.875rem;
  line-height: 1.6;
}

/* Шаги работы — номер в круге и текст: порядок важнее подробностей. */
.site-help-steps {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.site-help-section > .site-help-steps {
  padding-inline-start: 0;
  list-style: none;
}

.site-help-steps li {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  gap: 0.75rem;
  margin: 0;
}

.site-help-step-no {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  background-color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.site-help-steps p + p {
  margin-top: 0.25rem;
}

/* Переход к соседним страницам внизу — кнопки-контуры со стрелкой, как «‹ бросок №2» у деталей запроса. */
.site-help-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
}

.site-help-pager [rel="next"] {
  margin-inline-start: auto;
}

@media (prefers-reduced-motion: reduce) {
  .site-help-faq summary svg {
    transition: none;
  }
}

/* Узкий экран: меню над текстом, без липкости, пункты в две колонки. */
@media (max-width: 62rem) {
  .site-help-layout {
    grid-template-columns: 1fr;
  }

  .site-help-nav {
    position: static;
  }

  .site-help-nav > ol {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-help-nav .site-help-nav-sub {
    display: none;
  }
}

/* ── Компании, пользователи, аккаунт ─────────────────────────────────────── */

/* Страницы «Компании», «Пользователи» и «Аккаунт» собраны из формы блоками (FormBlock), таблицы в секции (DataTable) и
   карточек справа (SideCards); здесь — то, чего этим компонентам не хватало. */

/* Имя вошедшего в шапке — ссылка на «Аккаунт»: при наведении и на самой странице — цветом текста шапки. */
.site-account {
  border-radius: var(--radius);
}

.site-account:hover .site-user,
.site-account[aria-current="page"] .site-user {
  color: var(--header-foreground);
}

/* Таблица слева от карточек (страница «Компании»): верх таблицы на одной линии с первой карточкой справа. */
.site-new-grid > .card.site-table-card {
  margin-top: 0;
}

/* Действия строки таблицы текстом («Изменить», «Заблокировать») — 28 px и 12 px, как кнопки-иконки строк. */
.site-table .btn[data-size="sm"] {
  height: 1.75rem;
  padding-inline: 0.625rem;
  font-size: 0.75rem;
}

/* Название блока формы и пояснение — вверху блока, даже когда поля справа выше (блоки «Аккаунта»). */
.site-new-head {
  align-content: flex-start;
}

/* Имя, фамилия, компания и пароли в ряду — 300 px; список компании — во всю ширину поля. */
.site-new-row > .site-new-field-name {
  width: 18.75rem;
}

.site-new-field-name > select {
  width: 100%;
}

/* Ошибка у сегмента роли — как у поля: 12 px цветом ошибки. */
.site-new-choice > [role="alert"] {
  margin-top: 0.375rem;
  color: var(--destructive);
}

/* У роли «администратор» компании нет: поле прячет CSS, значение остаётся в форме, сервер его не читает. */
.site-new-form:has(#role-admin:checked) [data-when-role="client"] {
  display: none;
}

/* Строки блока «Почта» на странице «Аккаунт»: текущая почта и новая, ждущая подтверждения, с плашкой перед адресом. */
.site-account-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
}

/* Отбор пользователей по компании: подпись и список в одну строку панели, список — 30 px, как поиск. */
.site-toolbar-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.site-toolbar select.select {
  height: 1.875rem;
  font-size: 0.8125rem;
}

/* Ссылка из письма на экране (CopyLink): поле только для чтения во всю ширину и кнопка «Скопировать» справа. */
.site-copy {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  margin-top: 0.5rem;
}

.site-copy > input {
  flex: 1 1 auto;
  min-width: 0;
  height: 2rem;
  background-color: var(--card);
  font-size: 0.8125rem;
}