/* =========================================================
   ГЕНЕРАТОР SITEMAP.XML — стили рабочей области
   ========================================================= */

.sm-tool {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0 0 8px 0;
}

.sm-block {
  background: var(--color-surface);
  border: 1px solid rgba(43, 47, 51, 0.06);
  border-radius: var(--radius-lg);
  padding: 28px;
}

@media (max-width: 640px) {
  .sm-block { padding: 20px; }
}

/* =========================================================
   Переиспользуемые общие элементы (копии из htaccess-generator.css/
   og-generator.css — страница самодостаточна, без межфайловых
   зависимостей между инструментами)
   ========================================================= */

.hta-block-head {
  margin-bottom: 18px;
}

.hta-block-head h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  margin: 0 0 6px 0;
}

.hta-block-head h2 i {
  color: var(--color-accent-dark);
  font-size: 18px;
}

.hta-block-head p {
  font-size: 13.5px;
  color: var(--color-muted);
  margin: 0;
}

.hta-toggle-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  color: var(--color-text);
}

.hta-toggle-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin-top: 1px;
  cursor: pointer;
  accent-color: var(--color-accent);
}

.hta-info-block {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(29, 217, 122, 0.05);
  border-left: 3px solid var(--color-accent);
  border-radius: 6px;
  padding: 12px 16px;
}

.hta-info-block i {
  color: var(--color-accent-dark);
  font-size: 15px;
  margin-top: 2px;
  flex-shrink: 0;
}

.hta-info-block p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--color-text);
}

.hta-info-block.is-warning {
  background: rgba(232, 159, 66, 0.08);
  border-left-color: #e89f42;
}

.hta-info-block.is-warning i {
  color: #c9823f;
}

/* Сообщение «потеряна связь с сервером» и кнопка «Попробовать снова» шли встык:
   у блока не было отступа снизу */
.sm-blocked-block .hta-info-block { margin-bottom: 14px; }

.hta-actions-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.hta-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  background: var(--color-bg);
  border: 1.5px solid rgba(43, 47, 51, 0.08);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
}

.hta-action-btn:hover {
  border-color: rgba(29, 217, 122, 0.35);
  color: var(--color-accent-dark);
  background: rgba(29, 217, 122, 0.06);
}

.hta-action-btn.is-primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #06231a;
}

.hta-action-btn.is-primary:hover {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  color: #fff;
}

.hta-action-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.hta-footnote {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-muted);
  margin: 16px 0 0 0;
}

.hta-footnote i {
  color: var(--color-accent-dark);
  font-size: 14px;
}

.og-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 28px;
}

@media (max-width: 800px) {
  .og-compare-grid { grid-template-columns: 1fr; }
}

.og-compare-card {
  background: var(--color-surface);
  border: 1.5px solid rgba(43, 47, 51, 0.06);
  border-radius: var(--radius-lg);
  padding: 26px;
}

.og-compare-icon {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: var(--radius-sm);
  background: rgba(29, 217, 122, 0.12);
  color: var(--color-accent-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
}

.og-compare-card h3 {
  font-size: 18px;
  margin: 0 0 14px 0;
}

.og-compare-lead {
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.7;
  margin: 0 0 16px 0;
}

.og-compare-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* См. пояснение в og-generator.css: flex на пункте списка разваливает
   строку, если внутри есть inline-элементы вроде <code> */
.og-compare-list li {
  display: block;
  position: relative;
  padding-left: 22px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--color-text);
  overflow-wrap: break-word;
}

.og-compare-list i {
  position: absolute;
  left: 0;
  top: 3px;
  color: var(--color-accent-dark);
  font-size: 14px;
  line-height: 1.6;
}

/* nowrap здесь только вредил: короткое имя тега и так не разорвётся,
   а длинная конструкция вроде <IfModule ...> при нехватке места
   вылезала за карточку. break-word рвёт слово только если оно
   физически не помещается в строку */

/* =========================================================
   Форма запуска сканирования
   ========================================================= */

.sm-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}

.sm-field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-strong);
}

.sm-input {
  width: 100%;
  padding: 12px 16px;
  background: var(--color-bg);
  border: 1.5px solid rgba(43, 47, 51, 0.08);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 15px;
  color: var(--color-text-strong);
  outline: none;
  transition: border-color var(--transition-fast);
}

.sm-input:focus {
  border-color: var(--color-accent);
}

.sm-options-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  background: var(--color-bg);
  border-radius: var(--radius-md);
  margin-bottom: 18px;
}

/* Капча — компактный ряд: вопрос + маленькое поле для числа */
.sm-captcha-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.sm-captcha-label {
  font-size: 13.5px;
  color: var(--color-text);
  font-weight: 500;
}

.sm-captcha-input {
  width: 80px;
  text-align: center;
  padding: 10px;
}

.sm-error {
  display: none;
  font-size: 13.5px;
  color: #c94747;
  background: rgba(232, 93, 93, 0.06);
  border: 1px solid rgba(232, 93, 93, 0.2);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 16px;
}

.sm-error.is-visible {
  display: block;
}

/* =========================================================
   Блок прогресса сканирования
   ========================================================= */

.sm-spin {
  display: inline-block;
  animation: sm-spin-rotate 1.4s linear infinite;
}

@keyframes sm-spin-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.sm-progress-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

@media (max-width: 560px) {
  .sm-progress-stats { grid-template-columns: 1fr; gap: 10px; }
}

.sm-progress-stat {
  text-align: center;
  padding: 16px 12px;
  background: var(--color-bg);
  border-radius: var(--radius-md);
}

.sm-progress-stat strong {
  display: block;
  font-size: 26px;
  font-weight: 700;
  color: var(--color-text-strong);
  font-family: var(--font-display);
  margin-bottom: 4px;
  /* Плавная смена чисел — не дёргается резко при обновлении */
  transition: color var(--transition-fast);
}

.sm-progress-stat span {
  font-size: 12px;
  color: var(--color-muted);
}

.sm-progress-bar-track {
  width: 100%;
  height: 8px;
  background: var(--color-bg);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 14px;
}

.sm-progress-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-dark));
  border-radius: 999px;
  /* Плавное "перетекание" ширины — ключевое требование к ощущению
     процесса как живого, а не дёргающегося рывками */
  transition: width 0.5s ease-out;
}

.sm-progress-hint {
  font-size: 13px;
  color: var(--color-muted);
  margin: 0;
  text-align: center;
}

/* Ловушка для ботов: поле есть в разметке, но человек его не видит и не заполняет */
.sm-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.sm-result-note {
  margin: 10px 0 0 0;
  font-size: 13.5px;
  color: var(--color-muted);
}

/* =========================================================
   Блок результата
   ========================================================= */

.sm-icon-success {
  color: var(--color-accent-dark);
}
/* =========================================================
   Иконка сравнительной карточки: отступ был инлайновым,
   переношу в стили — разметка не должна нести оформление
   ========================================================= */

.og-compare-card > .og-compare-icon {
  margin-bottom: 14px;
}

/* =========================================================
   ПРИМЕР ФАЙЛА SITEMAP.XML
   ========================================================= */

.sm-code {
  margin: 0 0 20px 0;
  padding: 20px 22px;
  background: var(--color-text-strong);
  border-radius: var(--radius-md);
  overflow-x: auto;
}

.sm-code pre {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.75;
  color: #e8ecef;
  white-space: pre;
}

/* Короткая вставка кода внутри плитки: светлая, в тон плитки, с воздухом сверху и снизу */
.sm-snippet {
  margin: 14px 0 16px 0;
  padding: 14px 18px;
  background: rgba(43, 47, 51, 0.05);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-text-strong);
  white-space: pre;
  overflow-x: auto;
}

.sm-code .sm-tag { color: #7fd8a8; }
.sm-code .sm-val { color: #f0d59a; }
.sm-code .sm-com { color: #8fa3ab; }

/* =========================================================
   ТАБЛИЦЫ СПРАВОЧНОГО ХАРАКТЕРА (теги, форматы, CMS)
   ========================================================= */

.sm-table-wrap {
  margin: 0 0 20px 0;
  background: var(--color-surface);
  border: 1px solid rgba(43, 47, 51, 0.06);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.sm-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.sm-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
}

.sm-table th,
.sm-table td {
  padding: 13px 22px;
  text-align: left;
  font-size: 13.5px;
  line-height: 1.65;
  border-bottom: 1px solid rgba(43, 47, 51, 0.06);
}

.sm-table thead th {
  font-weight: 600;
  font-size: 12.5px;
  color: var(--color-muted);
  background: var(--color-bg);
  white-space: nowrap;
}

.sm-table tbody tr:last-child th,
.sm-table tbody tr:last-child td { border-bottom: none; }

.sm-table tbody th {
  font-weight: 600;
  color: var(--color-text-strong);
  width: 26%;
}

.sm-table td { color: var(--color-text); }

.sm-table .is-yes { color: var(--color-accent-dark); font-weight: 600; }
.sm-table .is-no { color: var(--color-muted); }

/* =========================================================
   ШАГИ «ЧТО ДЕЛАТЬ С ГОТОВЫМ ФАЙЛОМ»
   ========================================================= */

.sm-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 28px;
}

@media (max-width: 980px) {
  .sm-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .sm-steps { grid-template-columns: minmax(0, 1fr); }
}

.sm-step {
  background: var(--color-surface);
  border: 1px solid rgba(43, 47, 51, 0.06);
  border-radius: var(--radius-md);
  padding: 24px;
}

.sm-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--color-text-strong);
  color: #fff;
  font-family: var(--font-display);
  font-size: 15px;
  margin-bottom: 14px;
}

.sm-step h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-strong);
  margin: 0 0 8px 0;
}

.sm-step p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text);
  margin: 0;
}

.sm-step p + p { margin-top: 8px; }

/* Сноска об источниках */
.sm-source-note {
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--color-muted);
  margin: 18px 0 0 0;
}

/* =========================================================
   ТЕКСТ ВНУТРИ SEO-СЕКЦИЙ
   Без этих правил абзацы и подзаголовки, лежащие прямо в
   .tool-seo, наследуют размеры Bootstrap и выбиваются из
   типографической шкалы сайта
   ========================================================= */

.tool-seo > p {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--color-text);
  margin: 0 0 18px 0;
}

.tool-seo > p strong { color: var(--color-text-strong); }

.tool-seo > h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text-strong);
  margin: 30px 0 12px 0;
}

.tool-seo > h3 + p { margin-bottom: 18px; }

/* =========================================================
   ИСПРАВЛЕНИЯ ОТСТУПОВ И ФОНОВ

   1. Шапка таблиц была залита var(--color-bg) — это ровно цвет
      фона страницы. Внутри белой карточки первая строка читалась
      как дыра. Делаем графитовой, как в справочной таблице
      транслита: контраст очевидный, стиль сайта сохранён.
   2. Последний элемент секции не должен тащить нижний отступ
      наружу — расстояние между секциями задаёт сама секция.
   3. Сноска об источниках прилипала к сетке карточек: правило
      .tool-seo > p специфичнее .sm-source-note и перебивало
      его margin-top. Задаём отступ через тот же уровень.
   ========================================================= */

.sm-table thead th {
  background: var(--color-text-strong);
  color: #fff;
  border-bottom: none;
}

.sm-table thead th:first-child { border-top-left-radius: 0; }

/* Строки тела таблицы — на белой подложке карточки, чередование
   не нужно: разделителей достаточно, а полосы спорили бы с шапкой */
.sm-table tbody tr:first-child th,
.sm-table tbody tr:first-child td {
  padding-top: 15px;
}

/* Нижний отступ последнего элемента секции обнуляем: иначе он
   складывается с расстоянием между секциями непредсказуемо */
.tool-seo > *:last-child { margin-bottom: 0; }

/* Врезка после сетки шагов слипалась с ней вплотную */
.sm-steps + .hta-info-block,
.sm-table-wrap + .hta-info-block,
.tool-seo-grid + .hta-info-block { margin-top: 24px; }

/* Сноска об источниках — отбиваем от предыдущего блока */
.tool-seo > .sm-source-note { margin: 24px 0 0 0; }

/* Сетка сравнения выравнивается по тому же отступу от заголовка
   секции, что и сетка карточек (28px), — раньше было 22 против 28 */
.tool-seo > .og-compare-grid { margin: 28px 0 0 0; }

/* Сетка сравнения и сетка плиток ниже визуально одинаковы, но
   расстояние между ними было 28px против 20px между рядами самих
   плиток — ряды выглядели неравномерно. Причина двойная: собственный
   нижний отступ сетки сравнения и margin-top: 28px у .tool-seo-grid.
   Приводим стык к тому же шагу, что и gap сетки плиток */
.og-compare-grid { margin-bottom: 0; }
.og-compare-grid + .tool-seo-grid { margin-top: 20px; }