/* Страничный слой: только то, что принадлежит странице целиком — фон, типографика
   документа и раскладки списков. Всё остальное живёт в стилях компонентов
   (ADR-0002 §2); значения — только из токенов (`tokens.css`). */

* { box-sizing: border-box; }

/* Код и терминал — ровно то, что набирать (linux-labs 175): JetBrains Mono по умолчанию склеивает `->>`, `<<-`,
   `<=>`, `!=`, `<=` в стрелки и знаки (лигатуры calt). Свойство наследуется, сокращение `font` в компонентах его
   не сбрасывает; своё `font-feature-settings` компоненту ставить нельзя — оно заменило бы это целиком. */
html { font-feature-settings: "calt" 0; }

html, /* Подвал прижат к низу и на короткой странице. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background: var(--color-bg-page);
  color: var(--color-ink-primary);
  font-family: var(--font-ui);
  font-size: var(--text-body);
  line-height: var(--leading-ui);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-accent-ink); text-decoration: none; text-underline-offset: 0.2em; }
a:hover { text-decoration: underline; }

/* Фокус с клавиатуры — двойное кольцо охрой на всём, что нажимается (DesignSystem §04). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--elevation-focus);
}
::selection { background: var(--color-accent-mark); }
/* «Перейти к содержимому»: первая остановка Tab, видна только в фокусе (WCAG 2.4.1). */
.skip-link {
  position: absolute;
  z-index: 100;
  top: var(--space-2);
  left: var(--space-2);
  display: inline-flex;
  align-items: center;
  min-height: var(--size-tap);
  padding: 0 var(--space-4);
  background: var(--color-ink-primary);
  color: var(--color-bg-page);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-control);
  transform: translateY(calc(-100% - var(--space-4)));
}
.skip-link:focus { transform: none; text-decoration: none; }
/* Цель прыжка получает фокус программно — кольцо вокруг всей страницы не нужно. */
.page:focus-visible { outline: none; box-shadow: none; }
/* Alpine прячет элемент до инициализации — без этого он мигает при загрузке. */
[x-cloak] { display: none !important; }
/* Атрибут hidden сильнее любого display у класса: иначе скрытые скриптом блоки видны. */
[hidden] { display: none !important; }
/* Текст только для экранного диктора: состояние, которое глазами видно по значку. */
.visually-hidden {
  position: absolute !important;
  width: var(--border-hairline);
  height: var(--border-hairline);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Заголовки страниц — Literata, интерфейс — Golos (Spec §02). */
h1, h2 { font-family: var(--font-read); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-display); }
h1 { font-size: var(--text-h2); line-height: var(--leading-tight); }
h2 { font-size: var(--text-title); line-height: var(--leading-tight); }
code, kbd, pre, samp { font-family: var(--font-mono); }
/* Клавиша-модификатор в подсказке — по платформе (theme-boot.js ставит data-platform до отрисовки, linux-labs 165). */
.kbd-mod::before { content: "Ctrl+"; }
:root[data-platform="mac"] .kbd-mod::before { content: "⌘"; }

img, pre, table { max-width: 100%; }

/* --- закреплённая шапка (README 10h, карточка 125) ---------------------
   `--sticky-top` — сколько сверху экрана закрыто закреплённым: шапка, а на странице с полосой
   статьи (layout-split--article) — ещё и полоса. От него отступают якоря и всё, что прилипает
   под шапкой (колонки, поле фильтра, полоса букв). Отступ задаётся только здесь и у раскладки,
   а не прокруткой документа (`scroll-padding`): иначе он сложился бы с `scroll-margin`. */
:root { --sticky-top: var(--size-header); }
[id] { scroll-margin-top: var(--sticky-top); }

/* --- каркас страницы ---------------------------------------------------- */
.page {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--size-page);
  margin: 0 auto;
  padding: var(--space-7) var(--gutter-wide);
}
/* Рабочее место (лаба, песочница, урок): поля 20 px на всех ширинах (Spec §03). */
.page--work { padding: var(--space-4) var(--gutter-work); }
/* Во всю ширину: полосы и колонки страницы рисует сам компонент (каталог, трек). */
.page--full { padding: 0; }
.page__hero h1 { margin-bottom: var(--space-3); font-size: var(--text-article); }
.page__lead { color: var(--color-ink-secondary); font-size: var(--text-title); max-width: var(--size-measure); }
.page__crumbs { color: var(--color-ink-secondary); font-size: var(--text-ui); margin-top: 0; }
.page__meta { color: var(--color-ink-secondary); font-size: var(--text-body); }
.page__head { border-bottom: var(--border-hairline) solid var(--color-border); padding-bottom: var(--space-3); margin-bottom: var(--space-4); }
.page__head h1 { margin-bottom: var(--space-2); }
.page__badges { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.page__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0 var(--space-6); }
.page__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--size-card-min), 1fr));
  gap: var(--space-4);
}
.page__list { list-style: none; padding: 0; margin: 0; }
.page__list li { padding: var(--space-1) 0; }
.page__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-6) 0;
  padding: var(--space-4);
  background: var(--color-bg-surface);
  border: var(--border-hairline) solid var(--color-border-strong);
  border-radius: var(--radius-card);
}
.page__quiz { display: flex; flex-direction: column; gap: var(--space-4); }
.page__lesson { margin-top: var(--space-4); }
/* Плеер ступени (Lesson v2 41, 43; linux-labslinux-labs 133): полоса курса и лента шагов — во всю ширину окна, поля
   и колонки рисуют сами компоненты. Шаг-чтение — колонка 660 по центру. */
.page--lesson { max-width: none; padding: 0; }
.page--reading > :not(.lab-head, .learning-step-strip) { width: min(100% - 2 * var(--space-6), var(--size-lesson-column)); margin-inline: auto; }
.page--lesson.page--reading > .learning-step-head { margin-top: var(--space-7); }

/* --- каталог компонентов (/dev/components/) ----------------------------- */
.catalog__item {
  margin: var(--space-7) 0;
  padding-top: var(--space-4);
  border-top: var(--border-hairline) solid var(--color-border);
}
.catalog__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.catalog__head h2 { margin: 0; font-family: var(--font-mono); font-size: var(--text-title); }
.catalog__doc {
  white-space: pre-wrap;
  color: var(--color-ink-secondary);
  font-size: var(--text-ui);
  font-family: var(--font-ui);
  margin: var(--space-3) 0;
}
.catalog__example { margin-top: var(--space-4); }
.catalog__example-title { margin: 0 0 var(--space-2); font-size: var(--text-ui); color: var(--color-ink-secondary); }
.catalog__themes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.catalog__theme {
  position: relative;
  padding: var(--space-5) var(--space-3) var(--space-3);
  background: var(--color-bg-page);
  color: var(--color-ink-primary);
  border: var(--border-hairline) dashed var(--color-border);
  border-radius: var(--radius-control);
}
.catalog__theme-label {
  position: absolute; top: var(--space-1); left: var(--space-3);
  color: var(--color-ink-secondary); font-size: var(--text-caption);
}

@media (max-width: 1280px) {
  .page { padding: var(--space-6) var(--gutter-work); }
  .page--full, .page--lesson { padding: 0; }   /* колонки во всю ширину рисует компонент — и на узких экранах */
}

/* Печать страницы (Ctrl+P, статья Вики и любая другая): только содержимое — без шапки,
   подвала, боковых колонок, панелей и кнопок. Тема при печати светлая (tokens.css).
   Лист шпаргалки печатает layout-print. */
@media print {
  .skip-link, .layout-topbar, .layout-footer, .layout-breadcrumbs, .layout-search-palette, .layout-feedback,
  .layout-loading, .layout-split__aside, .layout-wiki__nav, .learning-feedback-link, .learning-reading-mark,
  .ui-bookmark, .ui-copy-button, .ui-filter__field, .content-cheatsheet__print, .content-toc,
  .lab-head__tools, .lab-actions, .lab-workbench__tabs, .learning-step-strip { display: none !important; }
  html, body { display: block; min-height: 0; background: none; }
  .page, .page--work { max-width: none; padding: 0; }
  .layout-split { display: block; }
  :is(h1, h2, h3) { break-after: avoid; }
  :is(pre, table, figure, .ui-code-block) { break-inside: avoid; }
}

/* Поля ввода на телефоне и сенсорном экране — не мельче 16 px: иначе iOS увеличивает
   страницу при фокусе (linux-labs#67). Правило документа целиком: касается и полей, которые
   появятся позже; `html` впереди — сильнее кегля из стилей компонентов. */
@media (max-width: 600px), (pointer: coarse) {
  html :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="submit"], [type="button"]), select, textarea) {
    font-size: var(--text-field);
  }
}

@media (max-width: 600px) {
  .page { padding: var(--space-5) var(--gutter-phone); }
  .page--work { padding: 0 var(--gutter-phone); }
  .page--full, .page--lesson { padding: 0; }
  .page--reading > :not(.lab-head, .learning-step-strip) { width: calc(100% - 2 * var(--space-4)); }
  .page--lesson.page--reading > .learning-step-head { margin-top: var(--space-5); }
  .page__hero h1 { font-size: var(--text-display); }
  .page__lead { font-size: var(--text-body); }
  .page__grid { grid-template-columns: 1fr; }
  .page__cta { padding: var(--space-3); }
  .page__cta .ui-button { flex: 1 1 auto; }
  .catalog__themes { grid-template-columns: 1fr; }
}

/* ── Меньше движения (Motion 52a, принцип 5; WCAG 2.3.3) ─────────────────────────────────────────
   Общее правило для всех компонентов, поэтому — последним блоком. По просьбе системы смена
   происходит сразу: без сдвигов, масштаба, раскрытий по высоте и проявлений. Остаётся только смена
   цвета (цвет, фон, рамка) за motion-fast ease.out. Анимации — пульсы, лесенки, повторы — сразу
   встают в конечный кадр и без задержки. Плавная прокрутка — обычная.
   Исключения держат сами компоненты: задержку показа скелета (не раньше 300 мс — это не движение,
   а защита от мигания) — ui-skeleton; анимации скриптом (Web Animations) — проверкой matchMedia;
   положение «в покое» вместо сдвига при наведении (подъём карточки) — своим правилом. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke !important;
    transition-duration: var(--motion-fast) !important;
    transition-timing-function: var(--ease-out) !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  /* Псевдоэлементы, которых `*` не ловит. Раскрытие <details> (::details-content) и подложка
     диалога (::backdrop) — отдельными правилами: незнакомый браузеру псевдоэлемент выключил бы
     весь общий список. Переходы между страницами (View Transitions, плеер урока) — без анимации. */
  ::details-content {
    transition-property: color, background-color, border-color !important;
    transition-duration: var(--motion-fast) !important;
    transition-delay: 0s !important;
  }
  ::backdrop {
    animation-duration: 1ms !important;
    animation-delay: 0s !important;
    transition-property: background-color !important;
    transition-duration: var(--motion-fast) !important;
    transition-delay: 0s !important;
  }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}