/*
 * 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 ЗДЕСЬ БОЛЬШЕ НЕ ОБЪЯВЛЯЕТСЯ (BN-37). У сетки ленты один владелец —
   styles/components.css, блок «ЛЕНТА-БЕНТО», где .grid, .bn-feed__grid и .grid-cards стоят
   одним правилом. Причина не косметическая: base.css по каскаду @import идёт ПОСЛЕ
   components.css, и своя копия `grid-template-columns` при равной весомости перебивала бы
   бенто — колонки считал бы auto-fill, а спаны приходили бы из контейнерных запросов, и
   плашка `span 4` на одной колонке уводила бы страницу в горизонтальную прокрутку. */

/* ── В-6: контраст, границ у карточек нет ─────────────────────────────
   БЕНТО (BN-37): в покое у плашки НЕТ ни ободка, ни тени — её от фона отделяет собственная
   заливка (белая, лёд-3, абрикос-3 или вторая поверхность, см. цикл 12 в components.css)
   и скругление 26px. Тень осталась только на наведении (components.css, блок движения):
   она сообщает «плашка живая», а не рисует границу. */
.card {
  border-radius: var(--r-bento);
  background: var(--surface);
  border: 0;
  color: var(--text);
}

/* Текст по умолчанию — var(--text)/var(--text-2) на var(--bg)/var(--surface).
   ЧТО ТУТ ПРАВДА, а что нет (замеры WCAG 2.1 по значениям tokens.css, светлая/тёмная):
     --text   на --surface 16.99/15.15, на --bg 16.15/16.25, на --surface-2 15.44/13.70 — ok;
     --text-2 на --surface 6.23/8.45, на --bg 5.72/9.06, на --surface-2 5.40/7.64 — ok;
                на плашках ленты --ice-3 5.26/7.05 и --apr-3 5.19/7.53 — тоже ok.
   Это ГЛАВНАЯ прибыль палитры P2 по доступности: на прежних токенах --text-2 на
   --surface-2 давал 4.36:1 и не дотягивал до порога, и components.css лечил это подменой
   токена в каждом втором правиле.
   ЧЕГО ПАЛИТРА НЕ ЧИНИТ И ЧТО НАЗВАНО ЧЕСТНО: --text-3 на --surface — 3.25/4.15, поэтому
   утилита .text-3 не годится ни одному тексту, который обязан читаться, и в
   components.css цветом --text-3 не красит ни одно правило. --ice-12 на --ice-9 — 4.05:1,
   поэтому заливка ступени 9 под ОБЫЧНЫЙ текст не идёт (кнопка взяла плашку --ink,
   18.50/14.72). Белый текст на ступени 9 и на градиенте запрещён вовсе (research:16,
   §Д-11 п.4) — сильнее макета, где он есть.
   Оговорка Р-54 (3:1 для крупного текста и UI-элементов) ОСТАЁТСЯ правилом, но реестр
   UI_ELEMENT после перехода на P2 ПУСТ: все три прежние записи сняты, потому что на новых
   токенах пары берут 4.5:1 честно. Разбор — в шапке tests/styles/contrast.test.js.
   Сторож: tests/styles/contrast.test.js. Обводки (.border, .glass-edge) — ≥3:1. */
.border {
  border: 1px solid var(--border);
}

/* ── Кольцо фокуса: ЧУЖОГО СИНЕГО НА САЙТЕ НЕТ ───────────────────────
   Находка круга 3 (кадры overlay-*-1280 и overlay-*-390): у крестика окна кейса видно
   ярко-СИНЕЕ кольцо, а синего в палитре P2 нет вовсе. Причина не в чужом правиле, а в
   ОТСУТСТВИИ своего: `.bn-overlay__close:focus-visible` менял только фон, кольца не
   назначал — и браузер рисовал СВОЁ, системное. Замер в chromium: computed outline у
   крестика был `auto 1px rgb(0,95,204)`. То же самое было у `.nav__link`, `.bn-nav__theme`
   и `.bn-feed__more` — они тоже показывают фокус одной заливкой.
   Правило-подстилка ниже закрывает ВЕСЬ класс разом, а не один крестик: свой `--focus-ring`
   на любом элементе, который получает фокус с клавиатуры. Там, где элемент уже несёт своё
   кольцо тенью (поля поиска и предложения кейса), правило не мешает: те правила гасят
   outline у себя сами (`outline: 0`) и бьют по весомости селектора.
   ЭТО НЕ ЛИНИЯ В СМЫСЛЕ В-4: outline не занимает места в потоке, не рисуется в покое и
   существует ровно на время фокуса с клавиатуры; В-4 запрещает границы как способ
   группировки, а не индикацию фокуса (её требует доступность).
   Замер --focus-ring к фонам, худшее из всех поверхностей: светлая --ice-10 3.16:1
   (на --apr-3), тёмная --ice-8 3.31:1 (на --ice-3) — порог обводки 3:1 взят в обеих темах.
   Сторож: tests/styles/contrast.test.js, блок «кольцо фокуса». */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ── В-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;
  }
}