/* tools/bulk.css — вкладки «Одним адресом / Списком» и панель массовой проверки (static/tools/bulk.js).
   Только токены base.css, обе темы (тёмная по умолчанию, светлая — html.light), touch ≥ 44px. */

/* ── вкладки ── */
.tool-tabs {
  display: flex; gap: var(--space-xl); margin: calc(-1 * var(--space-xs)) 0 var(--space-lg);
  border-bottom: 1px solid var(--border);
}
.tool-tab {
  min-height: 44px; padding: 0; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent;
  background: none; color: var(--text-dim); font: inherit; font-size: var(--fs-md); font-weight: 600;
  cursor: pointer; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.tool-tab:hover { color: var(--text); }
.tool-tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.tool-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[role="tabpanel"][hidden] { display: none; }

/* в режиме «Списком» одиночный результат и «Проверить в других инструментах» не показываем */
.tool-page.is-list-mode #tool-results,
.tool-page.is-list-mode #tool-cross { display: none !important; }

/* ── форма ── */
.bulk-panel [hidden] { display: none !important; }
.bulk-label { display: block; margin-bottom: var(--space-sm); font-size: var(--fs-sm); font-weight: 600; color: var(--text-dim); }
.bulk-textarea {
  display: block; width: 100%; min-height: 168px; resize: vertical;
  font-family: var(--font-body); font-size: var(--fs-sm); line-height: 1.5;
}
.bulk-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.bulk-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.bulk-counter, .bulk-quota { margin: var(--space-sm) 0 0; font-size: var(--fs-sm); color: var(--text-dim); }
.bulk-counter.is-warn { color: var(--yellow); }
.bulk-quota.is-empty { color: var(--red); }
.bulk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin-top: var(--space-lg); }
.bulk-submit, .bulk-file-btn { min-height: 44px; }
.bulk-file-btn { cursor: pointer; }
.bulk-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.bulk-file-input:focus-visible + .bulk-file-btn { outline: 2px solid var(--accent); outline-offset: 2px; }
.bulk-file-info { font-size: var(--fs-sm); color: var(--text-dim); overflow-wrap: anywhere; }
.bulk-hint, .bulk-consent { margin: var(--space-sm) 0 0; font-size: var(--fs-xs); color: var(--text-dim); }
.bulk-consent a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.bulk-captcha:empty { display: none; }

/* ── сообщения ── */
.bulk-alert {
  margin-top: var(--space-lg); padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-input);
  font-size: var(--fs-sm); color: var(--text);
}
.bulk-alert--warn { border-color: var(--yellow); background: var(--yellow-bg); }
.bulk-alert--info { background: var(--bg-surface); }
.bulk-alert-text { margin: 0; }
.bulk-alert-links { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin: var(--space-sm) 0 0; }
.bulk-link { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.bulk-link:focus-visible, .bulk-addr:focus-visible, .bulk-ext:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

/* ── ход проверки ── */
.bulk-run { margin-top: var(--space-xl); padding-top: var(--space-xl); border-top: 1px solid var(--border); }
.bulk-progress-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; }
.bulk-progress-text { margin: 0; font-weight: 600; color: var(--text); }
.bulk-cancel { min-height: 44px; }
.bulk-bar {
  display: block; width: 100%; height: 8px; margin-top: var(--space-sm); border: 0; border-radius: 9999px;
  background: var(--bg-input); overflow: hidden; -webkit-appearance: none; appearance: none;
}
.bulk-bar::-webkit-progress-bar { background: var(--bg-input); border-radius: 9999px; }
.bulk-bar::-webkit-progress-value { background: var(--accent); border-radius: 9999px; transition: width var(--dur-mid) var(--ease); }
.bulk-bar::-moz-progress-bar { background: var(--accent); border-radius: 9999px; }
.bulk-note { margin: var(--space-sm) 0 0; font-size: var(--fs-sm); color: var(--text-dim); }
.bulk-status {
  margin-top: var(--space-md); padding: var(--space-md) var(--space-lg); border-radius: var(--radius-sm);
  background: var(--yellow-bg); color: var(--text); font-size: var(--fs-sm);
}

/* ── сводка ── */
.bulk-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-md); margin-top: var(--space-lg); }
.bulk-metric { padding: var(--space-md) var(--space-lg); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card); }
.bulk-metric-value { font-family: var(--font-heading); font-size: calc(var(--fs-base) + 9px); font-weight: 700; color: var(--text); line-height: 1.2; }
.bulk-metric-label { margin-top: 2px; font-size: var(--fs-sm); color: var(--text-dim); }
.bulk-metric--ok200 .bulk-metric-value { color: var(--green); }
.bulk-metric--4xx .bulk-metric-value, .bulk-metric--5xx_none .bulk-metric-value, .bulk-metric--errors .bulk-metric-value { color: var(--red); }

/* ── фильтры, поиск, колонки ── */
.bulk-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-lg); }
.bulk-chips { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.bulk-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: 9999px; background: transparent; color: var(--text-dim);
  font: inherit; font-size: var(--fs-sm); cursor: pointer;
}
.bulk-chip:hover { color: var(--text); border-color: var(--border-hover); }
.bulk-chip[aria-pressed="true"] { border-color: var(--accent); color: var(--text); background: var(--bg-input); }
.bulk-chip:focus-visible, .bulk-sort:focus-visible, .bulk-page:focus-visible, .bulk-cols summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bulk-chip-count { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.bulk-chip[aria-pressed="true"] .bulk-chip-count { color: var(--text); }   /* на bg-input text-dim < 4.5 */
.bulk-tools { display: flex; align-items: center; gap: var(--space-sm); }
.bulk-search-input { min-height: 44px; width: 220px; }
.bulk-cols { position: relative; }
.bulk-cols summary { min-height: 44px; list-style: none; cursor: pointer; }
.bulk-cols summary::-webkit-details-marker { display: none; }
.bulk-cols-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: var(--z-dropdown); min-width: 240px;
  padding: var(--space-sm); border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-card); box-shadow: var(--shadow-md);
  max-height: min(60vh, 420px); overflow-y: auto; overscroll-behavior: contain;
}
/* Карточка ввода — свой слой (backdrop-filter): пока меню открыто, поднимаем её над блоками ниже */
.tool-input-card:has(.bulk-cols[open]) { position: relative; z-index: var(--z-dropdown); }
.bulk-col-opt { display: flex; align-items: center; gap: var(--space-sm); min-height: 44px; padding: 0 var(--space-sm); color: var(--text); font-size: var(--fs-sm); cursor: pointer; border-radius: var(--radius-xs); }
.bulk-col-opt:hover { background: var(--bg-card-hover); }
.bulk-col-opt input { width: 18px; height: 18px; accent-color: var(--accent); }

/* ── таблица ── */
.bulk-table-wrap { margin-top: var(--space-md); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.bulk-table-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bulk-table { font-size: var(--fs-sm); }
.bulk-table th { text-transform: none; letter-spacing: 0; }
.bulk-sort {
  min-height: 44px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit;
  text-align: left; cursor: pointer; white-space: nowrap;
}
.bulk-sort:hover { color: var(--text); }
.bulk-sort-mark { color: var(--accent); }
.bulk-td { white-space: nowrap; color: var(--text); }
.bulk-td.is-empty { color: var(--text-muted); }
.bulk-td--str, .bulk-td--chain { max-width: 320px; }
.bulk-text { display: block; overflow: hidden; text-overflow: ellipsis; }
.bulk-td--addr { max-width: 420px; }
.bulk-addr { color: var(--text); text-decoration: none; font-family: var(--font-body); font-size: var(--fs-xs); }
.bulk-addr:hover { color: var(--accent); text-decoration: underline; }
.bulk-ext { color: var(--text-dim); font-family: var(--font-body); font-size: var(--fs-xs); }
.bulk-ext:hover { color: var(--accent); }
.bulk-row-err { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--text-dim); white-space: normal; }
.bulk-td--reason { color: var(--text-dim); white-space: normal; }
.bulk-empty { padding: var(--space-xl); text-align: center; color: var(--text-dim); }
/* текст кода — var(--text) (AA в обеих темах), статус — фоном и рамкой */
.bulk-code {
  display: inline-block; min-width: 38px; padding: 0 7px; border: 1px solid transparent; border-radius: 4px;
  color: var(--text); font-weight: 700; text-align: center; font-variant-numeric: tabular-nums;
}
.bulk-code.is-2xx { background: var(--green-bg); border-color: var(--green); }
.bulk-code.is-3xx { background: var(--yellow-bg); border-color: var(--yellow); }
.bulk-code.is-4xx, .bulk-code.is-5xx { background: var(--red-bg); border-color: var(--red); }

/* оценка Google у числа (проверка скорости): точка цвета + текст для диктора; число — var(--text), AA в обеих темах */
.bulk-td--score, .bulk-td--ms, .bulk-td--cls { font-variant-numeric: tabular-nums; }
/* position: relative — подпись для диктора (.bulk-sr, absolute) остаётся внутри прокрутки таблицы, иначе на телефоне
   она растягивала страницу вбок */
.bulk-rate { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.bulk-rate::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); }
.bulk-rate.is-fast::before { background: var(--green); }
.bulk-rate.is-average::before { background: var(--yellow); }
.bulk-rate.is-slow::before { background: var(--red); }
.bulk-td--score .bulk-rate { font-weight: 700; }
.bulk-opts { margin-top: var(--space-md); }

/* ── страницы ── */
.bulk-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: var(--space-md); }
.bulk-page {
  min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius-xs);
  background: transparent; color: var(--text-dim); font: inherit; font-size: var(--fs-sm); cursor: pointer;
}
.bulk-page:hover { color: var(--text); border-color: var(--border-hover); }
.bulk-page.is-current { border-color: var(--accent); color: var(--text); background: var(--bg-input); }
.bulk-page-gap { color: var(--text-muted); padding: 0 4px; }

/* ── выгрузка и аудит ── */
.bulk-export { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-lg); }
.bulk-exp-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); }
.bulk-exp-label { font-size: var(--fs-sm); color: var(--text-dim); }
.bulk-exp-btn, .bulk-copy { min-height: 44px; text-decoration: none; }
.bulk-audit { margin-top: var(--space-xl); padding: var(--space-lg); border: 1px dashed var(--border-hover); border-radius: var(--radius-sm); }
.bulk-audit-btn { min-height: 44px; }
/* фаза B: «уточняется» (ИКС и Whois из медленной очереди), «скоро истекает», текст вместо значения */
.bulk-td--int, .bulk-td--date { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bulk-td.is-alert { color: var(--red); font-weight: 600; }
.bulk-text.is-note { color: var(--text-dim); white-space: normal; }
.bulk-wait { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--text-dim); font-size: var(--fs-xs); }
.bulk-wait::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--border-hover);
  border-top-color: var(--accent); animation: bulk-spin 0.9s linear infinite;
}
@keyframes bulk-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bulk-wait::before { animation: none; } }
.bulk-watch { margin-top: var(--space-xl); padding: var(--space-lg); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-surface); }
.bulk-watch-btn { min-height: 44px; }

/* ── диалог ── */
.bulk-dialog {
  /* margin: auto — base.css сбрасывает margin у всех элементов, без него диалог прилипает к углу */
  margin: auto; width: min(480px, calc(100vw - 32px)); padding: var(--space-xl); border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--bg-card); color: var(--text); box-shadow: var(--shadow-lg);
}
.bulk-dialog::backdrop { background: color-mix(in srgb, var(--bg) 70%, transparent); }
.bulk-dlg-title { margin: 0 0 var(--space-md); font-family: var(--font-heading); font-size: var(--fs-xl); }
.bulk-dlg-text { margin: 0 0 var(--space-sm); font-size: var(--fs-md); color: var(--text-dim); }
.bulk-dlg-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }
.bulk-dlg-actions .tool-btn { min-height: 44px; text-decoration: none; }

/* ── текстовый блок «Проверка списком» на странице ── */
.tool-bulk-about { margin: 0 0 var(--space-xl); }

@media (max-width: 767px) {
  .tool-tabs { gap: var(--space-lg); }
  .bulk-toolbar { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }  /* wrap растянул бы строку по ширине чипов */
  .bulk-chips { min-width: 0; max-width: 100%; }
  .bulk-chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .bulk-chip { flex: 0 0 auto; }
  .bulk-tools { width: 100%; }
  .bulk-search { flex: 1; }
  .bulk-search-input { width: 100%; }
  .bulk-actions > .tool-btn { flex: 1 1 auto; }
}