/* Импорт ростера из файла.

   Только токены из style.css — ни одного своего цвета: тема переключается там
   (body.dark переопределяет --bg, --ink и остальные), и захардкоженный #fff
   здесь означал бы белую таблицу на чёрном экране у того, кто выбрал тёмную. */

.imp-card { width: min(980px, 100%); }

.imp-body {
  padding: 16px;
  overflow-y: auto;
  font-size: var(--t-body, 14px);
  color: var(--ink);
}

.imp-lead { margin: 0 0 12px; color: var(--ink-soft); line-height: 1.5; }
.imp-busy { padding: 32px 0; text-align: center; color: var(--muted); }

/* ── шаг 1 ── */

.imp-drop {
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius, 8px);
  background: var(--surface-2);
  padding: 28px 16px;
  text-align: center;
  transition: border-color .12s, background .12s;
}
.imp-drop.over { border-color: var(--accent); background: var(--hover); }
.imp-drop-hint { margin-top: 10px; font-size: var(--t-small, 12px); color: var(--muted); }

.imp-help { margin-top: 16px; font-size: var(--t-small, 12px); color: var(--ink-soft); line-height: 1.6; }
.imp-help p { margin: 0 0 8px; }

/* Предупреждение, а не ошибка: файл прочитан, но прочитан с оговоркой — и
   оговорку должен проверить глазами человек. Отсюда и цвет рамки, а не текста:
   красный текст читается как «ничего не вышло». */
.imp-warn {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--rule-strong);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm, 6px);
  background: var(--surface-2);
  line-height: 1.5;
  font-size: var(--t-small, 12px);
}

/* ── шаг 2: предпросмотр ── */

.imp-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.imp-fact {
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-soft);
  font-size: var(--t-micro, 11px);
}

.imp-check { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; cursor: pointer; }

/* Таблица прокручивается сама, а не растягивает окно: колонок в чужом файле
   бывает тридцать, и половина из них не импортируется. */
.imp-table-wrap {
  overflow: auto;
  max-height: 46vh;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm, 6px);
}
.imp-table { border-collapse: collapse; width: max-content; min-width: 100%; font-size: var(--t-small, 12px); }
.imp-table th, .imp-table td {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 6px 8px;
  text-align: left;
  vertical-align: top;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.imp-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-2);
  white-space: normal;
}
.imp-col-name { font-weight: 600; margin-bottom: 6px; color: var(--ink); }
.imp-col-sel {
  width: 100%;
  min-width: 150px;
  padding: 4px 6px;
  font-family: inherit;
  font-size: var(--t-micro, 11px);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm, 6px);
}
.imp-rowno { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

.imp-more { margin-top: 8px; font-size: var(--t-micro, 11px); color: var(--muted); }
.imp-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.imp-err { margin-top: 8px; color: var(--danger); font-size: var(--t-small, 12px); }

/* ── шаг 3: отчёт ── */

.imp-done { text-align: center; padding: 12px 0 20px; }
.imp-done-num { font-family: var(--serif); font-size: var(--t-display, 32px); line-height: 1; }
.imp-done-txt { margin-top: 6px; color: var(--muted); font-size: var(--t-small, 12px); }

.imp-block { margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--rule); }
.imp-block h4 { margin: 0 0 6px; font-size: var(--t-h2, 16px); }
.imp-list { margin: 8px 0 0; padding: 0; list-style: none; max-height: 30vh; overflow-y: auto; }
.imp-list li {
  padding: 5px 0;
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-small, 12px);
  line-height: 1.45;
}
.imp-list li:last-child { border-bottom: none; }
.imp-list .imp-rowno { margin-right: 8px; }