/* ============================================================================
   EdgeShift · components.css
   Готовые классы для кода приложения. Подключать после tokens.css.
   Ни одного hex — всё через var(--es-*). Разметку каждого компонента
   смотреть в DESIGN.md, раздел 7.
   ========================================================================== */

/* --- 1. Каркас страницы ---------------------------------------------------- */
.es-app { display: flex; min-height: 100vh; background: var(--es-bg); }

.es-rail {
  width: var(--es-rail); flex: none; align-self: stretch;
  display: flex; flex-direction: column;
  padding: var(--es-space-6) var(--es-space-4);
  background: var(--es-surface); border-right: var(--es-border-width) solid var(--es-border);
}
.es-rail__brand { display: flex; align-items: center; gap: 9px; padding: 0 var(--es-space-2) var(--es-space-6); }
.es-rail__mark {
  width: 24px; height: 24px; border-radius: var(--es-radius-ctl-sm);
  background: var(--es-accent); color: #fff; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600;
}
.es-rail__name { font: var(--es-text-h2); letter-spacing: var(--es-tracking-tight); }
.es-rail__nav { display: flex; flex-direction: column; gap: 1px; }
.es-rail__item {
  display: flex; align-items: center; gap: 9px;
  height: 32px; padding: 0 var(--es-space-3);
  border-radius: var(--es-radius-ctl-sm);
  font: var(--es-text-body); color: var(--es-text-2); text-decoration: none;
}
.es-rail__item:hover { background: var(--es-surface-3); color: var(--es-text); text-decoration: none; }
.es-rail__item[aria-current='page'] {
  background: var(--es-accent-soft); color: var(--es-accent); font-weight: 600;
}
.es-rail__icon { width: 14px; text-align: center; flex: none; }
.es-rail__alarm { /* точка тревоги: держит сигнал на любом экране */
  margin-left: auto; width: 6px; height: 6px; border-radius: 50%;
  background: var(--es-err); flex: none;
  animation: es-blink var(--es-blink-alarm) infinite;
}
.es-rail__foot {
  margin-top: auto; padding: var(--es-space-5) var(--es-space-2) 0;
  border-top: var(--es-border-width) solid var(--es-border);
  display: flex; align-items: center; gap: var(--es-space-3);
  font: var(--es-text-body); color: var(--es-text-2);
}

.es-main { flex: 1; min-width: 0; padding: var(--es-page-pad-y) var(--es-page-pad-x) 28px; }
.es-page-head { display: flex; align-items: flex-start; gap: var(--es-space-7); margin-bottom: var(--es-space-7); }
.es-page-title { margin: 0; font: var(--es-text-h1); letter-spacing: var(--es-tracking-tight); }
.es-page-sub { margin: 3px 0 0; font: var(--es-text-body); color: var(--es-text-3); max-width: 640px; }
.es-page-head__actions { display: flex; align-items: center; gap: var(--es-space-4); flex: none; }

/* «Данные живые» — вместо спиннера при автообновлении */
.es-live { display: flex; align-items: center; gap: 7px; font: var(--es-text-caption); color: var(--es-text-3); }
.es-live::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--es-ok); animation: es-blink var(--es-blink-live) infinite;
}

/* Мобильная полоса меню (ниже --es-bp-mobile) */
.es-topbar {
  display: none; align-items: center; gap: var(--es-space-3);
  padding: 9px var(--es-space-5);
  background: var(--es-surface); border-bottom: var(--es-border-width) solid var(--es-border);
}
.es-topbar__nav { display: flex; gap: 1px; overflow-x: auto; flex: 1; scrollbar-width: none; }
.es-topbar__item {
  font: var(--es-text-caption); padding: 5px 7px; border-radius: var(--es-radius-badge);
  color: var(--es-text-2); text-decoration: none; white-space: nowrap;
}
.es-topbar__item[aria-current='page'] { background: var(--es-accent-soft); color: var(--es-accent); font-weight: 600; }

/* --- 2. Кнопки ------------------------------------------------------------- */
.es-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--es-space-3);
  height: var(--es-ctl); padding: 0 var(--es-space-6);
  border: var(--es-border-width) solid transparent; border-radius: var(--es-radius-ctl);
  font: var(--es-text-body-strong); cursor: pointer;
  transition: background var(--es-motion-fast) var(--es-ease), border-color var(--es-motion-fast) var(--es-ease);
}
.es-btn--primary { background: var(--es-accent); border-color: var(--es-accent); color: var(--es-on-accent); }
.es-btn--primary:hover { background: var(--es-accent-2); border-color: var(--es-accent-2); }

.es-btn--secondary { background: var(--es-surface); border-color: var(--es-border-2); color: var(--es-text); font-weight: 500; }
.es-btn--secondary:hover { background: var(--es-surface-3); border-color: var(--es-text-3); }

.es-btn--ghost { background: transparent; color: var(--es-text-2); font-weight: 500; }
.es-btn--ghost:hover { background: var(--es-surface-3); color: var(--es-text); }

/* Необратимое или массовое действие */
.es-btn--danger { background: var(--es-err); border-color: var(--es-err); color: var(--es-on-err); }
.es-btn--danger:hover { filter: brightness(1.08); }
.es-btn--danger:focus-visible { box-shadow: var(--es-focus-ring-danger); }

.es-btn--danger-quiet { background: transparent; color: var(--es-err); font-weight: 500; }
.es-btn--danger-quiet:hover { background: var(--es-err-soft); }
.es-btn--danger-outline { background: transparent; border-color: var(--es-err-line); color: var(--es-err); font-weight: 500; }
.es-btn--danger-outline:hover { background: var(--es-err-soft); }

.es-btn--sm { height: var(--es-ctl-sm); padding: 0 var(--es-space-4); border-radius: var(--es-radius-ctl-sm); font-size: 11.5px; }
.es-btn--block { width: 100%; }

/* Неактивная кнопка ОБЯЗАНА объяснять причину в title (см. DESIGN.md §9) */
.es-btn:disabled,
.es-btn[aria-disabled='true'] {
  background: var(--es-surface-3); border-color: var(--es-border);
  color: var(--es-text-3); cursor: not-allowed; filter: none;
}
.es-btn--loading { cursor: progress; opacity: .75; }
.es-btn__spinner {
  width: 11px; height: 11px; border-radius: 50%;
  border: 1.5px solid currentColor; border-top-color: transparent;
  animation: es-spin .7s linear infinite;
}

/* Переключатель из 2–3 значений: «Все» / «Только проблемы», тема */
.es-seg {
  display: inline-flex; padding: 2px; gap: 2px;
  background: var(--es-surface-3); border: var(--es-border-width) solid var(--es-border);
  border-radius: 9px;
}
.es-seg__btn {
  height: var(--es-ctl-sm); padding: 0 11px; border-radius: var(--es-radius-ctl-sm);
  border: var(--es-border-width) solid transparent; background: transparent;
  font: var(--es-text-caption); font-weight: 500; color: var(--es-text-3); cursor: pointer;
}
.es-seg__btn[aria-pressed='true'] {
  background: var(--es-surface); border-color: var(--es-border-2);
  color: var(--es-text); font-weight: 600; box-shadow: var(--es-shadow);
}

/* --- 3. Статусные плашки, бейджи, итоги ------------------------------------ */
.es-pill {
  display: inline-flex; align-items: center; gap: var(--es-space-2);
  height: var(--es-pill); padding: 0 9px 0 7px;
  border-radius: var(--es-radius-pill); border: var(--es-border-width) solid;
  font-size: 11px; font-weight: 500; white-space: nowrap;
}
.es-pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.es-pill--in-dns  { color: var(--es-status-in-dns);  background: var(--es-status-in-dns-soft);  border-color: var(--es-status-in-dns-line); }
.es-pill--reserve { color: var(--es-status-reserve); background: var(--es-status-reserve-soft); border-color: var(--es-status-reserve-line); }
.es-pill--process { color: var(--es-status-creating); background: var(--es-status-creating-soft); border-color: var(--es-status-creating-line); }
.es-pill--retired { color: var(--es-status-retired); background: var(--es-status-retired-soft); border-color: var(--es-status-retired-line); }
.es-pill--alarm   { color: var(--es-status-alarm);   background: var(--es-status-alarm-soft);   border-color: var(--es-status-alarm-line); font-weight: 600; }
.es-pill--alarm::before,
.es-pill--process.es-pill--live::before { animation: es-blink var(--es-blink-alarm) infinite; }
/* На красной строке таблицы плашка тревоги встаёт на светлую поверхность */
.es-row--alarm .es-pill--alarm { background: var(--es-surface); }

/* Тип DNS-записи: A, AAAA, MX, TXT, CNAME */
.es-badge {
  display: inline-flex; align-items: center; height: var(--es-badge); padding: 0 5px;
  border-radius: 4px; border: var(--es-border-width) solid var(--es-border);
  background: var(--es-surface-3); color: var(--es-text-2);
  font-family: var(--es-font-mono); font-size: 10.5px;
}
/* IP-чип: значение записи, опубликованный адрес */
.es-ip {
  display: inline-flex; align-items: center; padding: 2px 6px;
  border-radius: var(--es-radius-badge); border: var(--es-border-width) solid var(--es-border);
  background: var(--es-surface-3); font: var(--es-text-mono);
}
/* Итог проверки утечек */
.es-verdict {
  display: inline-flex; align-items: center; height: var(--es-badge); padding: 0 var(--es-space-3);
  border-radius: var(--es-radius-badge); border: var(--es-border-width) solid;
  font-size: 10.5px; font-weight: 600;
}
.es-verdict--leak { color: var(--es-verdict-leak); background: var(--es-err-soft); border-color: var(--es-err-line); }
.es-verdict--warn { color: var(--es-verdict-warn); background: var(--es-warn-soft); border-color: var(--es-warn-line); }
.es-verdict--info { color: var(--es-verdict-info); background: var(--es-info-soft); border-color: var(--es-info-line); }
/* Уровень события журнала */
.es-level { display: inline-flex; align-items: center; gap: var(--es-space-2); font-size: 10.5px; font-weight: 600; }
.es-level::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.es-level--info  { color: var(--es-level-info); }
.es-level--warn  { color: var(--es-level-warn); }
.es-level--error { color: var(--es-level-error); }

/* Текстовые состояния: доступность и агент — словом, не только цветом */
.es-state--ok   { color: var(--es-ok); }
.es-state--bad  { color: var(--es-err); }
.es-state--idle { color: var(--es-text-3); }
/* Техническая причина по наведению */
.es-state--bad[title] { border-bottom: 1px dotted var(--es-err-line); cursor: help; }

/* --- 4. Карточки ----------------------------------------------------------- */
.es-card {
  background: var(--es-surface); border: var(--es-border-width) solid var(--es-border);
  border-radius: var(--es-radius-card); box-shadow: var(--es-shadow); overflow: hidden;
}
.es-card__head {
  display: flex; align-items: flex-start; gap: var(--es-space-5);
  padding: 13px var(--es-card-pad-x); border-bottom: var(--es-border-width) solid var(--es-border);
}
.es-card__title { font: var(--es-text-h2); }
.es-card__sub { font: var(--es-text-caption); color: var(--es-text-3); margin-top: 2px; }
.es-card__actions { display: flex; gap: var(--es-space-2); flex: none; }
.es-card__body { padding: var(--es-card-pad-y) var(--es-card-pad-x); }
.es-card__foot {
  padding: 11px var(--es-card-pad-x); border-top: var(--es-border-width) solid var(--es-border);
  background: var(--es-surface-2); font: var(--es-text-caption); color: var(--es-text-2);
}
.es-card--danger { border-color: var(--es-err-line); }
.es-card--danger > .es-card__head { background: var(--es-err-soft); border-bottom-color: var(--es-err-line); color: var(--es-err); }
.es-card--warn { border-color: var(--es-warn-line); }
.es-card--warn > .es-card__head { background: var(--es-warn-soft); border-bottom-color: var(--es-warn-line); color: var(--es-warn); }
.es-cards { display: grid; gap: var(--es-gap-card); }

/* Сворачиваемый блок внутри карточки */
.es-disclosure {
  width: 100%; display: flex; align-items: center; gap: var(--es-space-4);
  padding: 11px var(--es-card-pad-x); background: transparent;
  border: none; border-top: var(--es-border-width) solid var(--es-border);
  font: var(--es-text-body-strong); color: var(--es-text); text-align: left; cursor: pointer;
}
.es-disclosure:hover { background: var(--es-surface-2); }
.es-disclosure__chevron { width: 9px; font-size: 11px; color: var(--es-text-3); }
.es-disclosure__hint { margin-left: auto; font: var(--es-text-micro); color: var(--es-text-3); }

/* Пустое состояние: причина + следующий шаг */
.es-empty {
  padding: var(--es-space-8) var(--es-space-5); text-align: center;
  border: 1px dashed var(--es-border-2); border-radius: 9px;
}
.es-empty__title { font: var(--es-text-body); color: var(--es-text-2); }
.es-empty__hint { font: var(--es-text-caption); color: var(--es-text-3); margin-top: var(--es-space-1); }

/* Опасная зона */
.es-danger-zone {
  display: flex; align-items: center; gap: var(--es-space-6);
  padding: 13px var(--es-space-6); border: var(--es-border-width) solid var(--es-err-line); border-radius: 9px;
}
.es-danger-zone__title { font: var(--es-text-body-strong); color: var(--es-err); }
.es-danger-zone__text { font: var(--es-text-caption); color: var(--es-text-2); margin-top: 2px; }

/* --- 5. Таблица ------------------------------------------------------------ */
.es-table-wrap { overflow-x: auto; }
.es-table { font: var(--es-text-body); }
.es-table thead tr { background: var(--es-surface-2); border-bottom: var(--es-border-width) solid var(--es-border); }
.es-table th {
  text-align: left; padding: 7px var(--es-space-4);
  font-size: var(--es-table-head-size); font-weight: var(--es-table-head-weight);
  text-transform: var(--es-table-head-transform); letter-spacing: var(--es-table-head-spacing);
  color: var(--es-text-3); white-space: nowrap;
}
.es-table th:first-child, .es-table td:first-child { padding-left: var(--es-card-pad-x); }
.es-table th:last-child,  .es-table td:last-child  { padding-right: var(--es-card-pad-x); }
.es-table td { padding: 0 var(--es-space-4); height: var(--es-row); }
.es-table tbody tr { border-bottom: var(--es-border-width) solid var(--es-border); }
.es-table tbody tr:last-child { border-bottom: none; }
.es-table .es-num, .es-table [data-es-num] { text-align: right; font-variant-numeric: var(--es-numeric); }
.es-table .es-mono { font: var(--es-text-mono); }
/* Длинное имя не ломает сетку — обрезаем и даём полное в title */
.es-truncate { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Списанный фронт: выведен из игры, но данные видны */
.es-row--muted { opacity: var(--es-muted-opacity); }
/* Тревожная строка: подложка + полоса слева */
.es-row--alarm { background: var(--es-err-soft); }
.es-row--alarm > td:first-child { border-left: var(--es-alarm-bar-width) solid var(--es-err); }
.es-row-actions { display: inline-flex; gap: var(--es-space-1); justify-content: flex-end; white-space: nowrap; }
/* Приглушённая подложка под скрытым origin — виден только внутри панели */
.es-cell--secret {
  background: var(--es-surface-2); color: var(--es-text-3);
  border-left: var(--es-border-width) solid var(--es-border);
  border-right: var(--es-border-width) solid var(--es-border);
}

/* --- 6. Показатели, пары «ключ — значение», лента событий ------------------ */
.es-metrics {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: var(--es-surface); border: var(--es-border-width) solid var(--es-border);
  border-radius: var(--es-radius-card); box-shadow: var(--es-shadow);
}
.es-metric { padding: var(--es-card-pad-y) var(--es-card-pad-x); border-right: var(--es-border-width) solid var(--es-border); }
.es-metric:last-child { border-right: none; }
.es-metric__value { font: var(--es-text-metric); letter-spacing: var(--es-tracking-metric); font-variant-numeric: var(--es-numeric); }
.es-metric__label { font: var(--es-text-body); font-weight: 500; margin-top: 2px; }
.es-metric__hint { font: var(--es-text-micro); color: var(--es-text-3); margin-top: 1px; }
.es-metric--muted .es-metric__value { color: var(--es-text-3); }
.es-metric--alarm .es-metric__value,
.es-metric--alarm .es-metric__hint { color: var(--es-err); }

.es-chip-metric {
  display: inline-flex; align-items: baseline; gap: var(--es-space-3);
  padding: 7px var(--es-space-5); background: var(--es-surface);
  border: var(--es-border-width) solid var(--es-border); border-radius: var(--es-radius-ctl);
}
.es-chip-metric__value { font-size: 15px; font-weight: 600; font-variant-numeric: var(--es-numeric); }
.es-chip-metric__label { font: var(--es-text-caption); color: var(--es-text-3); }

.es-kv { display: flex; justify-content: space-between; gap: var(--es-space-8); padding: 9px 0; font: var(--es-text-body); }
.es-kv + .es-kv { border-top: var(--es-border-width) solid var(--es-border); }
.es-kv__key { color: var(--es-text-3); flex: none; }
.es-kv__val { text-align: right; }

.es-feed__item { display: flex; gap: 9px; padding: 9px 0; font: var(--es-text-body); }
.es-feed__item + .es-feed__item { border-top: var(--es-border-width) solid var(--es-border); }
.es-feed__dot { width: 6px; height: 6px; border-radius: 50%; margin-top: 5px; flex: none; }
.es-feed__dot--info { background: var(--es-level-info); }
.es-feed__dot--warn { background: var(--es-level-warn); }
.es-feed__dot--error { background: var(--es-level-error); }
.es-feed__text { color: var(--es-text-2); text-wrap: pretty; }
.es-feed__meta { font: var(--es-text-micro); color: var(--es-text-3); margin-top: 2px; }

/* --- 7. Поля и формы ------------------------------------------------------- */
.es-form-grid { display: grid; gap: var(--es-gap-field); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.es-field { display: flex; flex-direction: column; gap: 5px; }
.es-label { font: var(--es-text-caption); font-weight: 500; color: var(--es-text-2); }
.es-input, .es-select {
  width: 100%; height: var(--es-ctl); padding: 0 var(--es-space-4);
  border: var(--es-border-width) solid var(--es-border-2); border-radius: var(--es-radius-ctl);
  background: var(--es-surface); color: var(--es-text); font: var(--es-text-body); outline: none;
}
.es-select { padding: 0 var(--es-space-3); }
.es-input:focus, .es-select:focus { border-color: var(--es-accent); box-shadow: var(--es-focus-ring); }
.es-input--mono { font: var(--es-text-mono); }
.es-input--num { font-variant-numeric: var(--es-numeric); }
.es-input--invalid { border-color: var(--es-err-line); }
.es-help { font: var(--es-text-micro); color: var(--es-text-3); text-wrap: pretty; }
.es-check { display: flex; gap: 9px; align-items: flex-start; cursor: pointer; font: var(--es-text-body); color: var(--es-text-2); }
.es-check input { width: 15px; height: 15px; margin: 1px 0 0; accent-color: var(--es-accent); cursor: pointer; flex: none; }
.es-inline-form { display: flex; gap: var(--es-space-3); align-items: flex-end; }

/* Секрет: токен, ключ, команда — поле только для чтения + «Копировать» */
.es-copy { display: flex; gap: var(--es-space-3); align-items: center; }
.es-copy__value {
  flex: 1; min-width: 0; height: var(--es-ctl); padding: 0 var(--es-space-4);
  display: flex; align-items: center; border-radius: var(--es-radius-ctl);
  background: var(--es-surface-2); border: var(--es-border-width) solid var(--es-border);
  font: var(--es-text-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.es-copy__value--console { background: var(--es-code-bg); color: var(--es-code-text); font-size: 11.5px; }
.es-copy__btn { flex: none; min-width: 104px; } /* ширина фиксирована: «Копировать» → «Скопировано» не дёргает вёрстку */

/* --- 8. Уведомления, тревога, модалка -------------------------------------- */
.es-flash {
  display: flex; align-items: center; gap: var(--es-space-4);
  padding: var(--es-space-4) var(--es-space-6); border-radius: 9px;
  border: var(--es-border-width) solid; font: var(--es-text-body); font-weight: 500;
}
.es-flash::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.es-flash--ok   { color: var(--es-ok);   background: var(--es-ok-soft);   border-color: var(--es-ok-line); }
.es-flash--warn { color: var(--es-warn); background: var(--es-warn-soft); border-color: var(--es-warn-line); align-items: flex-start; }
.es-flash--err  { color: var(--es-err);  background: var(--es-err-soft);  border-color: var(--es-err-line); }
.es-flash__reason { display: block; margin-top: 7px; font: var(--es-text-mono); font-size: 11.5px; opacity: .9; }

/* Полоса тревоги над контентом — вариант A. Всегда несёт действие. */
.es-alarm-bar {
  display: flex; align-items: center; gap: var(--es-space-5);
  padding: 11px var(--es-space-6); border-radius: 9px;
  background: var(--es-err); border: var(--es-border-width) solid var(--es-err); color: var(--es-on-err);
}
.es-alarm-bar::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none;
  animation: es-blink var(--es-blink-urgent) infinite;
}
.es-alarm-bar__text { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; }
.es-alarm-bar__meta { font: var(--es-text-caption); opacity: .8; }
.es-alarm-bar__btn { /* инверсия: белая кнопка на красном */
  height: var(--es-ctl-sm); padding: 0 var(--es-space-5); flex: none;
  border-radius: var(--es-radius-ctl-sm); border: var(--es-border-width) solid var(--es-on-err);
  background: var(--es-on-err); color: var(--es-err); font-size: 11.5px; font-weight: 600; cursor: pointer;
}
.es-alarm-bar__btn:hover { filter: brightness(.95); }

/* Тревога на экране самого фронта — вариант C, тихий */
.es-alarm-inline {
  display: flex; align-items: center; gap: 9px; padding: 9px 13px; border-radius: 9px;
  background: var(--es-err-soft); border: var(--es-border-width) solid var(--es-err-line);
}
.es-alarm-inline__value { font: var(--es-text-body-strong); color: var(--es-err); }

.es-modal-overlay {
  position: fixed; inset: 0; z-index: var(--es-z-modal);
  display: flex; align-items: center; justify-content: center; padding: var(--es-space-9);
  background: var(--es-overlay);
}
.es-modal {
  width: 100%; max-width: 440px; padding: 18px;
  background: var(--es-surface); border: var(--es-border-width) solid var(--es-border);
  border-radius: var(--es-radius-modal); box-shadow: var(--es-shadow-modal);
}
.es-modal__title { font-size: 14px; font-weight: 600; margin-bottom: var(--es-space-2); }
.es-modal__text { margin: 0 0 var(--es-space-7); font: var(--es-text-body); color: var(--es-text-2); text-wrap: pretty; }
.es-modal__actions { display: flex; gap: var(--es-space-3); justify-content: flex-end; }

/* --- 9. Журнал установки, примеры API, прогресс, спарклайн ----------------- */
.es-console {
  padding: var(--es-space-5) var(--es-space-6); border-radius: 9px;
  background: var(--es-code-bg); color: var(--es-code-text);
  font: var(--es-text-mono-sm); max-height: 230px; overflow: auto;
}
.es-console__time { color: var(--es-code-dim); }
.es-console__cursor {
  display: inline-block; width: 8px; height: 14px; vertical-align: -2px;
  background: var(--es-code-text); opacity: .6; animation: es-blink 1s steps(1) infinite;
}
.es-progress { height: 5px; border-radius: var(--es-radius-pill); background: var(--es-surface-3); overflow: hidden; }
.es-progress__bar { height: 100%; border-radius: var(--es-radius-pill); background: var(--es-accent); }
.es-spark { display: flex; align-items: flex-end; gap: 2px; height: 36px; }
.es-spark__bar { flex: 1; border-radius: 2px 2px 0 0; background: var(--es-accent-line); }
.es-spark__bar--mid { background: var(--es-accent); }
.es-spark__bar--over { background: var(--es-err); } /* выше порога */

/* --- 11. Серверы сайтов ------------------------------------------------------ */
/* Состояние сервера и сайта — та же форма .es-pill, другие смыслы */
.es-pill--server-ok      { color: var(--es-server-ok); background: var(--es-ok-soft); border-color: var(--es-ok-line); }
.es-pill--server-problem { color: var(--es-server-problem); background: var(--es-err-soft); border-color: var(--es-err-line); font-weight: 600; }
.es-pill--server-waiting { color: var(--es-server-waiting); background: var(--es-surface-3); border-color: var(--es-border); }
.es-pill--server-command { color: var(--es-server-command); background: var(--es-warn-soft); border-color: var(--es-warn-line); }
.es-pill--server-command::before { animation: es-blink var(--es-blink-alarm) infinite; }

/* Строка результата проверки: метка фиксированной ширины + текст */
.es-check-row { display: flex; gap: var(--es-space-4); padding: 5px 0; font: var(--es-text-body); }
.es-check-row__text { color: var(--es-text-2); text-wrap: pretty; }
.es-check-group {
  font-size: var(--es-table-head-size); text-transform: uppercase;
  letter-spacing: var(--es-table-head-spacing); color: var(--es-text-3);
  padding: var(--es-space-4) 0 var(--es-space-2);
}
.es-tag { /* уровень проверки — всегда словом, никогда иконкой */
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--es-badge); min-width: var(--es-tag-min-width); padding: 0 var(--es-space-3);
  border-radius: var(--es-radius-badge); border: var(--es-border-width) solid;
  font-size: 10px; font-weight: 600; letter-spacing: .03em; flex: none;
}
.es-tag--ok    { color: var(--es-ok);   background: var(--es-ok-soft);   border-color: var(--es-ok-line); }
.es-tag--info  { color: var(--es-info); background: var(--es-info-soft); border-color: var(--es-info-line); }
.es-tag--warn  { color: var(--es-warn); background: var(--es-warn-soft); border-color: var(--es-warn-line); }
.es-tag--error { color: var(--es-err);  background: var(--es-err-soft);  border-color: var(--es-err-line); }

/* Блок текущей команды с живым журналом */
.es-command { border: var(--es-border-width) solid var(--es-warn-line); border-radius: 9px; overflow: hidden; }
.es-command__head {
  display: flex; align-items: center; gap: var(--es-space-4);
  padding: var(--es-space-4) 13px; background: var(--es-warn-soft);
  border-bottom: var(--es-border-width) solid var(--es-warn-line); color: var(--es-warn);
}
.es-command__head::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none;
  animation: es-blink var(--es-blink-alarm) infinite;
}
.es-command__title { flex: 1; min-width: 0; font: var(--es-text-body-strong); }
.es-command__meta { font: var(--es-text-micro); flex: none; }
.es-command__log { /* шаги с «==>», подробности — приглушённым с отступом */
  background: var(--es-code-bg); color: var(--es-code-text);
  padding: var(--es-space-5) var(--es-space-6); font: var(--es-text-mono-sm);
  max-height: 210px; overflow: auto; white-space: pre;
}
.es-command--done { border-color: var(--es-ok-line); }
.es-command--done .es-command__head { background: var(--es-ok-soft); border-bottom-color: var(--es-ok-line); color: var(--es-ok); }
.es-command--failed { border-color: var(--es-err-line); }
.es-command--failed .es-command__head { background: var(--es-err-soft); border-bottom-color: var(--es-err-line); color: var(--es-err); }
.es-command--done .es-command__head::before,
.es-command--failed .es-command__head::before { animation: none; }

/* Выбор режима агента: решение о безопасности — две карточки-варианта */
.es-mode { display: grid; gap: var(--es-gap-card); grid-template-columns: 1fr 1fr; }
.es-mode__option {
  display: flex; gap: var(--es-space-4); align-items: flex-start; cursor: pointer;
  padding: var(--es-space-6) var(--es-card-pad-x); border-radius: var(--es-radius-card);
  background: var(--es-surface); border: var(--es-border-width) solid var(--es-border);
}
.es-mode__option:has(input:checked) { border-color: var(--es-accent); box-shadow: 0 0 0 3px var(--es-accent-line); }
.es-mode__option input { width: 15px; height: 15px; margin: 2px 0 0; accent-color: var(--es-accent); cursor: pointer; flex: none; }
.es-mode__title { font: var(--es-text-h3); }
.es-mode__text { display: block; font: var(--es-text-caption); color: var(--es-text-2); margin-top: var(--es-space-1); text-wrap: pretty; }
@media (max-width: 720px) { .es-mode { grid-template-columns: 1fr; } }

/* --- 12. Мобильная раскладка (< --es-bp-mobile) ---------------------------- */
@media (max-width: 720px) {
  .es-rail { display: none; }
  .es-topbar { display: flex; }
  .es-app { flex-direction: column; }
  .es-main { padding: var(--es-space-6) var(--es-space-5) 18px; }
  .es-page-title { font-size: 17px; }
  .es-metrics { grid-auto-flow: row; grid-template-columns: 1fr 1fr; border: none; background: none; box-shadow: none; gap: var(--es-space-3); }
  .es-metric {
    border: var(--es-border-width) solid var(--es-border); border-radius: 9px;
    background: var(--es-surface); padding: var(--es-space-4) var(--es-space-5);
  }
  .es-metric__value { font: var(--es-text-metric-sm); }
  .es-input, .es-select { height: var(--es-ctl-touch); font-size: 13px; }
  .es-btn { height: 36px; }
  .es-btn--sm { height: var(--es-ctl-touch-sm); }
  .es-row-actions .es-btn { flex: 1; }
  /* Таблица → карточки. Колонки с data-es-optional скрываются. */
  .es-table [data-es-optional] { display: none; }
  .es-table--cards, .es-table--cards tbody, .es-table--cards tr, .es-table--cards td { display: block; width: auto; }
  .es-table--cards thead { display: none; }
  .es-table--cards tr { padding: 11px var(--es-space-5); border-bottom: var(--es-border-width) solid var(--es-border); }
  .es-table--cards td { height: auto; padding: 0; }
  .es-table--cards .es-row--alarm { border-left: var(--es-alarm-bar-width) solid var(--es-err); }
  .es-table--cards .es-row-actions { display: flex; margin-top: 9px; gap: var(--es-space-2); }
}