/*
 * Beat News — база: reset, типографика, стекло/сквиркл, правила В-4/В-5/В-6/В-7
 * (canon/Design_Tokens_BeatNews.md §3), выключение движения по prefers-reduced-motion.
 * Требует styles/tokens.css, подключённого раньше (переменные --bg, --text, --r-s…--r-xl).
 * Без принудительных переопределений спецификации нигде в файле (гейт tests/layout.test.js).
 */

/* Оформление компонентов (BN-8) — отдельным файлом, подключение отсюда через @import.
   ПОЧЕМУ ИМЕННО ТАК, честно: не потому, что «layout-guard не пустил бы <link>» — пустил
   бы, он сверяет собранные страницы С САМОЙ build/layout.html, и добавленный туда <link>
   разошёлся бы только с прошлой сборкой, а не с раскладкой. Настоящая причина одна:
   build/** лежит ВНЕ зоны BN-8 (капсула BC-11), а styles/** — внутри, поэтому подключение
   пришлось завести из уже существующего файла стилей.
   ЦЕНА, которую это стоит и которую надо снять при первой же правке build/layout.html:
     - лишний round-trip: браузер узнаёт про components.css только после загрузки base.css
       (при <link> оба качались бы параллельно);
     - файл не виден в styleHrefs() — гейт layout-guard рапортует «стилей 2», хотя их 3,
       и третий никем из гейтов по подключению не сторожится.
   Порядок: @import по правилам CSS стоит до любых правил, поэтому правила components.css
   идут ПЕРЕД правилами этого файла — они не спорят за одни объявления. */
@import url('./components.css');

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

html, body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
}

ul[role='list'], ol[role='list'] { list-style: none; padding: 0; margin: 0; }

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

body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
}

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }

button { cursor: pointer; background: none; border: 0; }

a { color: inherit; text-decoration-skip-ink: auto; }

/* ── Типографика ───────────────────────────────────────────────────── */
/* В-5: без брейкпоинтов по ширине — плавный размер шрифта 15–16px через clamp(),
   не media-query по width. */
body {
  font-family: var(--body);
  font-size: clamp(15px, 14.5px + 0.2vw, 16px);
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
}

h1 { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); }
h2 { font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); }
h3 { font-size: 1.125rem; }

p { color: var(--text); }

small, .text-2 { color: var(--text-2); }
.text-3 { color: var(--text-3); }

/* ── Стекло (шапка/нижняя панель) ──────────────────────────────────── */
.glass {
  background: var(--glass);
  border: 1px solid var(--glass-edge);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .glass {
    backdrop-filter: blur(11px) saturate(1.4);
    -webkit-backdrop-filter: blur(11px) saturate(1.4);
  }
}

/* Фолбэк (Safari без backdrop-filter, старые движки): просто полупрозрачный фон, без размытия. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background: var(--surface);
    opacity: .96;
  }
}

/* ── Сквиркл (В-7: непрерывная кривизна, суперэллипс) ─────────────── */
.squircle {
  border-radius: var(--r-l);
}

@supports (corner-shape: superellipse(2)) {
  .squircle {
    corner-shape: superellipse(2);
  }
}

.squircle-s { border-radius: var(--r-s); }
.squircle-m { border-radius: var(--r-m); }
.squircle-l { border-radius: var(--r-l); }
.squircle-xl { border-radius: var(--r-xl); }

@supports (corner-shape: superellipse(2)) {
  .squircle-s { corner-shape: superellipse(2); }
  .squircle-m { corner-shape: superellipse(2); }
  .squircle-l { corner-shape: superellipse(2); }
  .squircle-xl { corner-shape: superellipse(2); }
}

/* ── В-4: группировка отступом и фоном, без линий ─────────────────
   Единственная допустимая линия — кромка стекла (.glass border выше).
   Разделитель блоков кейса .divider-case СНЯТ вместе с прежней семьёй
   .case__* и .quote (BC-20, BN-17): блоки кейса разделены отступом и фоном
   панели (.bn-case__block), а не линией. Группы — фоном/отступом. */
.group {
  background: var(--surface-2);
  border: 0;
  padding: 1.25rem;
}

.group + .group { margin-top: 1rem; }

/* ── В-5: без брейкпоинтов по ширине — auto-fill/minmax ───────────── */
.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1rem;
}

.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}

/* Мобильная раскладка — та же вёрстка в одну колонку по сжатию контейнера,
   не медиа-брейкпоинт: minmax(260px,1fr) естественно даёт 1 колонку на узком экране. */

/* ── В-6: контраст, границ у карточек нет — тень ──────────────────── */
.card {
  background: var(--surface);
  border: 0;
  box-shadow: var(--shadow);
  color: var(--text);
}

/* Текст по умолчанию — var(--text)/var(--text-2) на var(--bg)/var(--surface).
   ЧТО ТУТ ПРАВДА, а что нет (замеры WCAG 2.1 по значениям tokens.css, светлая/тёмная):
     --text  на --surface 16.83/13.00, на --bg 15.46/14.14, на --surface-2 14.27/11.82 — ok;
     --text-2 на --surface 5.15/5.96 и на --bg 4.73/6.48 — ok, НО на --surface-2 4.36/5.42:
       в светлой теме мелкому тексту уже НЕ ХВАТАЕТ (порог 4.5).
   То есть «все пары §1 подобраны на ≥4.5:1» — неверно, и раньше здесь так и было
   написано. Не проходят В-6 и другие пары самих токенов: --text-3 на любом фоне
   (2.77…4.02), --on-accent на --accent (4.28/3.13 — это ОСНОВНАЯ КНОПКА), --accent как
   цвет мелкого текста (максимум 4.28 в светлой теме), --ai как цвет мелкого текста
   (максимум 4.26 в светлой теме).
   Правка значений — это правка канона эскизов ред.3 (Design_Tokens §1), поэтому
   components.css лечит доступным ему способом: выбором токена и размером текста,
   а неустранимое решено владельцем оговоркой к В-6 (Р-54, BN-14): 4.5:1 для основного
   текста, 3:1 для крупного текста и UI-элементов (кнопки, эйбрау — реестр UI_ELEMENT).
   Сторож: tests/styles/contrast.test.js. Обводки (.border, .glass-edge) — ≥3:1. */
.border {
  border: 1px solid var(--border);
}

/* ── В-7: концентричные радиусы (внутренний = внешний − отступ) ──── */
/* Пример: обложка (18) внутри карточки (18) без отступа; кнопка (14) в панели (24) с отступом 10. */
.card .squircle-inset {
  border-radius: calc(var(--r-l) - 0px);
}

.panel-xl { border-radius: var(--r-xl); padding: 10px; }
.panel-xl .btn-m { border-radius: var(--r-m); }

/* ── Движение: только именованные свойства, .12–.15s ──────────────── */
.motion-fast { transition-duration: var(--dur-fast); }
.motion-base { transition-duration: var(--dur-base); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms;
    animation-iteration-count: 1;
    transition-duration: .001ms;
    scroll-behavior: auto;
  }
}