/* ============================================================================
   R31 «Рассвет» · БАЗА
   ----------------------------------------------------------------------------
   Reset, типографика, контейнеры, атмосфера, утилиты воздуха.
   Подключается вторым, сразу после токенов. Значения — только через var().
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  color: var(--ink-body);
  background: var(--bg);
  /* Атмосфера страницы: три мягких «облака» чистым CSS. Картинок нет —
     ноль запросов, ноль байт, живёт в PDF-рендере и на 320px. */
  background-image:
    radial-gradient(420px 300px at 8% -4%,  var(--grad-peach),    transparent 62%),
    radial-gradient(380px 280px at 96% 2%,  var(--grad-lavender), transparent 60%),
    radial-gradient(520px 300px at 50% 98%, var(--grad-amber),    transparent 64%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 900px) {
  body {
    background-image:
      radial-gradient(760px 520px at 12% -6%, var(--grad-peach),    transparent 62%),
      radial-gradient(680px 480px at 92% 4%,  var(--grad-lavender), transparent 60%),
      radial-gradient(1000px 520px at 55% 90%, var(--grad-amber),   transparent 64%);
  }
}

/* --- Заголовки ------------------------------------------------------------
   Дисплейная гарнитура и явный скачок кегля. Жирность НЕ используется как
   способ отличить заголовок от текста: в Unbounded есть только 500. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
  text-wrap: balance;
  margin: 0 0 var(--sp-4);
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--tracking-hero); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-head); margin-top: var(--sp-8); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-head); margin-top: var(--sp-6); }

p, li { margin: 0 0 var(--sp-3); text-wrap: pretty; }
ul, ol { padding-left: 22px; }
b, strong { font-weight: 600; color: var(--ink); }

a { color: var(--accent-strong); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-6) 0; }

/* --- Контейнеры -----------------------------------------------------------
   ⚠️ 1440 НЕ РАСТЯГИВАЕТ ТЕКСТ. Длина строки держится 60–70 знаков, лишняя
   ширина уходит в воздух и во вторую колонку, а не в километровые строки. */
.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--sp-8) var(--gutter) var(--sp-6);
}
.wrap--wide   { max-width: var(--container-wide); }
.wrap--narrow { max-width: var(--container-narrow); }
/* Оболочка для страниц с двумя колонками (главная, отчёт). На узком экране
   ничего не меняет: там ограничивает не max-width, а сам экран. */
.wrap--shell  { max-width: var(--container-shell); }

@media (min-width: 900px) { .wrap { padding-top: var(--sp-12); } }

/* --- Утилиты --------------------------------------------------------------
   Их ровно столько, сколько нужно: утилитарный фреймворк отклонён вместе
   с Tailwind (нет node-сборки), и подменять его россыпью классов не нужно. */
.lead     { font-size: var(--fs-lead); color: var(--ink-body); margin-bottom: var(--sp-6); }
.muted    { color: var(--ink-muted); font-size: var(--fs-meta); }
.eyebrow  { font-size: var(--fs-micro); letter-spacing: var(--tracking-caps);
            text-transform: uppercase; color: var(--ink-faint); font-weight: 500;
            margin: 0 0 var(--sp-2); }
.nowrap   { white-space: nowrap; }
.stack-6  { margin-top: var(--sp-6); }
.stack-8  { margin-top: var(--sp-8); }
.stack-12 { margin-top: var(--sp-12); }

/* Скрыто визуально, но читается скринридером */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Фокус ----------------------------------------------------------------
   ⚠️ Видимый фокус на ВСЁМ интерактивном (ТЗ-R31 §8 п. 2). :focus-visible
   не подавляется нигде: без него навигация с клавиатуры слепая. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
  border-radius: var(--sp-1);
}

/* --- Таблицы --------------------------------------------------------------
   Скролл-контейнер обязателен для всех таблиц SEO-страниц: горизонтальный
   скролл всей страницы на мобильном — прямой фактор риска МПК (§5.8). */
table { width: 100%; border-collapse: collapse; margin: var(--sp-4) 0; }
th { text-align: left; font-weight: 600; color: var(--ink); }
td, th { padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); vertical-align: top; }
td:first-child { color: var(--ink-muted); width: 42%; }

/* --- Движение -------------------------------------------------------------
   Переходы только на дешёвых свойствах и только 150–250 мс. Никаких
   JS-анимационных библиотек: их в проекте нет и не появится. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  body { background-attachment: scroll; }
}

/* --- Тяжёлое ниже первого экрана ------------------------------------------
   Браузер не считает раскладку того, что ещё не видно. Заметно на отчёте:
   восемь блоков по 900–1200 знаков и длинные SEO-таблицы. */
.defer-paint { content-visibility: auto; contain-intrinsic-size: auto 600px; }

/* --- Печать и PDF ---------------------------------------------------------
   ⚠️ Шаблон отчёта — основа будущей PDF-выгрузки (инвариант §10 п. 1).
   Атмосферу и стекло на печати убираем: они съедают тонер и не несут смысла. */
@media print {
  body { background: #fff; background-image: none; color: #000; }
  .c-cookie, .c-anchor-nav, .site-header, footer nav { display: none !important; }
  .c-card, .c-report-block { box-shadow: none; border: 1px solid var(--line-strong);
    break-inside: avoid; }
}