/* Слой совместимости для страниц, перенесённых со старого каркаса.

   Старые страницы написаны на своих классах (.card, .btn, .chip, .err, .eyebrow,
   .scr-h1) и своих переменных (--ink, --mut, --line2, --glass, --acc). В новом
   дизайне таких имён нет, поэтому без этого файла страница приезжает без стилей.

   Здесь те же имена выражены через токены дизайнера: разметку страниц трогать не
   нужно, а выглядят они как остальной сайт и одинаково переключаются в светлую тему.
   Файл без @layer: нелоенное правило выигрывает у слоёв app.css без !important. */

.compat {
  /* старые имена переменных → токены v3 */
  --ink: var(--text);
  --ink2: var(--text-2);
  --ink3: var(--text-muted);
  --txt: var(--text);
  --mut: var(--text-2);
  --dim: var(--text-muted);
  --line: var(--border);
  --line2: var(--border);
  --card: var(--surface);
  --card2: var(--raised);
  --card3: var(--raised);
  --glass: var(--surface);
  --glass2: var(--raised);
  --acc: var(--accent);
  --a1: var(--accent);
  --accent-lo: var(--accent-bg);
  --accent-line: var(--accent);
  --accent-hi: var(--accent);
  --gold: var(--accent);
  --grad: var(--accent);
  --warn: var(--warning);
  --ok: var(--success);
  --red: var(--error);
  --radius: var(--r-xl);
  --shadow: var(--shadow-1);
  --mono: var(--font-mono);
  color: var(--text);
}

/* ── карточки и типографика ── */
.compat .card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 20px 22px;
}
.compat .eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 700;
  color: var(--text-2);
  margin-bottom: 9px;
}
.compat .scr-h1 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  margin: 0 0 8px;
  color: var(--text);
}
.compat .scr-sub { font-size: var(--fs-base); color: var(--text-2); margin: 0 0 22px; max-width: 640px; }
.compat .sec-h { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 800; letter-spacing: -.02em; }
.compat .muted { color: var(--text-2); }
.compat .dim { color: var(--text-muted); }
.compat h1, .compat h2, .compat h3, .compat h4 { font-family: var(--font-display); letter-spacing: -.02em; }
.compat a { color: var(--accent); }

/* ── кнопки: те же имена, вид из системы дизайнера ── */
.compat .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--accent); color: var(--accent-contrast);
  padding: 0 var(--sp-4); min-height: 44px; border-radius: var(--r-lg); border: 1px solid transparent;
  font: 600 var(--fs-base)/1 var(--font-sans); text-decoration: none; cursor: pointer;
  transition: background var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.compat .btn:hover { background: var(--accent-hover); color: var(--accent-contrast); }
.compat .btn:active { transform: translateY(1px); }
.compat .btn.ghost {
  background: var(--surface); border-color: var(--border-strong); color: var(--text);
}
.compat .btn.ghost:hover { background: var(--raised); }
.compat .btn.sm { min-height: 36px; padding: 0 var(--sp-3); font-size: var(--fs-sm); }

/* ── мелкие компоненты ── */
.compat .chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm); color: var(--text-2);
  border: 1px solid var(--border); background: var(--raised);
  padding: 7px 13px; border-radius: var(--r-pill); text-decoration: none;
}
.compat a.chip:hover { color: var(--text); border-color: var(--border-strong); }
.compat .badge {
  font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  padding: 3px 10px; border-radius: var(--r-sm); border: 1px solid var(--border); color: var(--text-2);
}
.compat .badge.pro { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); }
.compat .err {
  background: color-mix(in oklab, var(--error) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--error) 45%, transparent);
  color: var(--error); padding: 11px 14px; border-radius: var(--r-lg); margin: 6px 0;
}
.compat .note {
  background: var(--raised); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 12px 14px; font-size: var(--fs-sm); color: var(--text-2);
}
.compat code, .compat pre {
  font-family: var(--font-mono); background: var(--code-bg); color: var(--code-text);
  border: 1px solid var(--border); border-radius: var(--r); }
.compat code { padding: 1px 6px; font-size: .92em; }
.compat pre { padding: 12px 14px; overflow-x: auto; }
.compat pre code { border: 0; padding: 0; background: none; }
.compat input, .compat textarea, .compat select {
  font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--r-lg); padding: 11px 13px;
}
.compat input:focus, .compat textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.compat table { width: 100%; border-collapse: collapse; }
.compat th, .compat td { border-bottom: 1px solid var(--border); padding: 10px 12px; text-align: left; }
.compat th { color: var(--text-muted); font-size: var(--fs-sm); font-weight: 700; }

/* Таблицы в перенесённых страницах могут быть шире колонки: прокручиваем их
   внутри себя, чтобы страница не ехала вбок на телефоне. */
.compat .table-wrap { overflow-x: auto; }

/* Списки: в каркасе v3 маркеры сброшены глобально, а перенесённые страницы
   рассчитывают на обычные точки и цифры — без них перечисления читаются как
   сплошной текст с отступом. */
.compat ul { list-style: disc; padding-left: 1.35em; margin: 10px 0; }
.compat ol { list-style: decimal; padding-left: 1.5em; margin: 10px 0; }
.compat li { margin: 6px 0; line-height: 1.6; }
.compat li::marker { color: var(--text-muted); }
/* Служебные списки-раскладки маркеры не получают. */
.compat .chips, .compat .btn-row, .compat nav ul, .compat .tabs { list-style: none; padding-left: 0; }

/* Перенесённые страницы держали свою узкую колонку (например 920px) — рядом с широким
   контейнером дизайнера справа оставалось пустое поле. Отдаём им всю ширину контейнера,
   ограничение оставляем только тексту, чтобы строка не растягивалась до нечитаемой. */
.compat > div[style*="max-width"],
.compat > div[class*="wrap"],
.compat > .mr2, .compat > .ms-wrap, .compat > .grt-wrap,
.compat > .nw-wrap, .compat > .rf-wrap, .compat > .bs-wrap { max-width: none !important; }
.compat p, .compat li { max-width: 78ch; }

/* Таблицы админки рассчитывали на правила старого каркаса (article.doc table):
   прокрутка внутри себя, выравнивание по центру строки, нормальные отступы.
   В новом каркасе таких правил нет — ячейки наезжали друг на друга. Возвращаем. */
.compat article.doc table { display: block; overflow-x: auto; max-width: 100%; border-collapse: collapse; }
.compat article.doc th, .compat article.doc td {
  padding: 9px 11px; border-bottom: 1px solid var(--border);
  vertical-align: middle; overflow-wrap: normal; word-break: normal;
}
.compat article.doc th { white-space: nowrap; color: var(--text-muted); font-weight: 700; font-size: var(--fs-sm); }
.compat article.doc tr:hover td { background: var(--raised); }
/* Кнопки внутри таблиц компактнее: иначе строка раздувается по высоте. */
.compat article.doc td .btn { min-height: 34px; padding: 0 12px; font-size: var(--fs-sm); }