/* ============================================================================
 * base.css - Reset + базовые элементы на токенах.
 * Подключать ПОСЛЕ tokens.css и skins.css, ПЕРЕД компонентами.
 * Содержит: modern reset, типографику, layout-хелперы, focus-visible, .btn.
 * ========================================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--s-4)); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-base);
  color: var(--text);
  background-color: var(--bg);
  background-image: var(--ambient);            /* амбиентное свечение по углам */
  background-attachment: fixed;
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

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: none; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
a { color: var(--brand); text-decoration-color: color-mix(in srgb, var(--brand) 40%, transparent); text-underline-offset: 2px; }
a:hover { text-decoration-color: var(--brand); }
ul, ol { padding-left: var(--s-5); }
hr { border: none; border-top: var(--hairline); margin-block: var(--s-6); }
::selection { background: var(--brand-soft); color: var(--text); }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--font-display); line-height: var(--lh-tight); font-weight: var(--fw-bold); color: var(--text); hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; text-wrap: balance; }
h1 { font-size: var(--t-h1); letter-spacing: -0.015em; }
h2 { font-size: var(--t-h2); letter-spacing: -0.01em; line-height: var(--lh-snug); }
h3 { font-size: var(--t-h3); line-height: var(--lh-snug); }
h4 { font-size: var(--t-h4); font-weight: var(--fw-semi); }
small { font-size: var(--t-small); }
code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.9em; }

.eyebrow { font-size: var(--t-tiny); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mute); font-weight: var(--fw-semi); }
.lede { font-size: var(--t-h4); line-height: var(--lh-loose); color: var(--text-dim); }
.muted { color: var(--text-mute); }

/* ---------- Ритм прозы ----------
 * ЗАЧЕМ ЭТОТ БЛОК. Сброс обнуляет отступы у заголовков и абзацев, а компоненты
 * (карточки, врезки, FAQ) свои отступы задают сами. В итоге ОБЫЧНАЯ страница из
 * h2 и абзацев выходила слипшейся: заголовок прижимался к предыдущему тексту
 * вплотную, и разделов на странице не было видно вовсе. Замер 03.09.2026 на
 * pokerspro.ru глазами по снимку; возвращено в комплект тем же днём.
 *
 * Правила намеренно слабые по весу (только элементы) и списки берутся лишь
 * БЕЗ КЛАССА: любой компонент с классом перебивает их своим правилом. */
main p { margin-block: 0 var(--s-4); }
main ul:not([class]), main ol:not([class]) { margin-block: 0 var(--s-4); }
main ul:not([class]) li + li, main ol:not([class]) li + li { margin-top: var(--s-2); }
main section h2 { margin-block: var(--s-7) var(--s-4); }
main section h3 { margin-block: var(--s-5) var(--s-3); }
main section h2:first-child, main section h3:first-child { margin-top: 0; }
main section h2 + p, main section h3 + p { margin-top: 0; }

/* ---------- Layout helpers ---------- */
.container       { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--wide { max-width: var(--container-wide); }
.container--prose{ max-width: var(--container-prose); }
.section         { padding-block: var(--s-8); }
.section--tight  { padding-block: var(--s-6); }
.section--alt    { background: var(--bg-2); }
.section--deep   { background: var(--bg-3); }
.stack > * + *   { margin-top: var(--s-4); }
.cluster         { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

/* ---------- Focus-visible (a11y) ---------- */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-soft); }
:focus:not(:focus-visible) { outline: none; }

/* Skip link */
.skip-link { position: absolute; left: var(--s-3); top: -120%; z-index: var(--z-toast); background: var(--surface); color: var(--text); padding: var(--s-2) var(--s-4); border-radius: var(--r-md); box-shadow: var(--shadow-pop); }
.skip-link:focus { top: var(--s-3); }

/* Visually-hidden but screen-reader available */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Buttons (примитив, наследуется CTA-блоками) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--tap-min); padding: 0 var(--s-5);
  font-family: var(--font-body); font-weight: var(--fw-semi); font-size: var(--t-small);
  line-height: 1; text-decoration: none; white-space: nowrap;
  border-radius: var(--r-pill); border: 1px solid transparent;
  transition: transform var(--dur-quick) var(--ease), background var(--dur-quick) var(--ease), box-shadow var(--dur-quick) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background-color: var(--brand); background-image: var(--grad-brand); color: var(--on-brand); box-shadow: var(--shadow-glow), 0 1px 2px rgba(0,0,0,.18); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 46px -10px color-mix(in srgb, var(--brand) 55%, transparent), 0 6px 16px -6px rgba(0,0,0,.28); }
.btn--ghost { background: var(--brand-soft); color: var(--brand); }
.btn--ghost:hover { background: color-mix(in srgb, var(--brand) 20%, transparent); }
.btn--outline { background: transparent; color: var(--text); border-color: var(--rule-strong); }
.btn--outline:hover { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.btn--lg { min-height: 52px; padding: 0 var(--s-6); font-size: var(--t-body); }
.btn--sm { min-height: 36px; padding: 0 var(--s-4); font-size: var(--t-tiny); }
.btn--block { display: flex; width: 100%; }

/* ---------- Surface primitive (карточки наследуют) ---------- */
.surface { background-color: var(--surface); background-image: var(--surface-grad); border: var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow-card); }

/* Стекло (frosted) - утилита для оверлеев/панелей/sticky-баров */
.glass { background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); box-shadow: var(--shadow-card); }

/* ==========================================================================
   РАСКЛАДОЧНЫЕ КЛАССЫ ИЗ ДВИЖКА ПИЛОТА - ДОБАВЛЕНЫ 20.08.2026 ПРИ СБОРКЕ ЗАГОТОВКИ

   Почему добавлены, а не слиты. У фабрики было ДВА base.css: этот (библиотека владельца,
   50 правил) и движковый у пилота (43 правила). Общих селекторов 27, и у 24 из них
   РАЗНЫЕ тела: .btn, .container, .lede, .section, .skip-link и другие. Слить их
   конкатенацией значило бы отдать победу тому файлу, что подключён вторым, и молча
   изменить внешний вид всех живых страниц пилота.

   Поэтому базой взят файл владельца целиком: под него написаны все 159 блоков, и он
   опирается на токены, которые в наборе есть. Ниже дописано ровно то, чего у него нет,
   а страницам нужно, - и переменные здесь те же, проверено поимённо.

   Пилота это не касается: у него остаётся его собственный base.css. Заготовка - для
   НОВЫХ сайтов.
   ========================================================================== */

.center { text-align: center; }

/* Проза не сужается вложенными ограничителями ширины: ширину задаёт контейнер. */
.prose > * { max-width: none; }

/* Таблица, которая не ломает страницу на телефоне: широкая прокручивается внутри себя. */
.table-wrap {
  /* contain:paint - ПОЧИНКА, А НЕ УКРАШЕНИЕ. ЗАМЕР 02.09.2026 (play-mines.click):
   * приёмка намерила горизонтальную прокрутку 202px при ширине 360, хотя обёртка
   * была исправна - ширина 328, clientWidth 326, scrollWidth 557, overflow-x:auto,
   * и таблица в ней визуально честно скроллилась. Переполнение прокрутки
   * скролл-контейнера протекало наружу мимо клипа. Перебор на живой странице:
   * display:flow-root, width:100%, min-width:0 и даже overflow:hidden не помогли,
   * помогло только contain:paint - documentElement.scrollWidth стал равен окну. */
  contain: paint;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: var(--hairline);
  border-radius: var(--r-md);
  margin-block: var(--s-4);
}
.table-wrap table { width: 100%; border-collapse: collapse; min-width: 32rem; }
.table-wrap th,
.table-wrap td {
  padding: var(--s-3);
  text-align: left;
  border-bottom: 1px solid var(--rule-strong);
}
.table-wrap th {
  background: var(--surface-3);
  color: var(--text);
  font-weight: var(--fw-semi);
  font-size: var(--t-small);
}
.table-wrap td { color: var(--text-dim); }