/*
 * Сброс и типографика. Только элементы, без классов —
 * классы живут в components.css.
 */

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

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

body {
    margin: 0;
    background: var(--bg-page);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading);
    -webkit-font-smoothing: antialiased;
}

/*
 * Заголовки.
 *
 * Крупный кегль требует тесной строки: полтора интервала на 28 пунктах
 * разваливает заголовок на отдельные слова. И буквы чуть плотнее — у
 * Монсеррата на больших размерах между ними много воздуха.
 */
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--space-3);
    line-height: var(--leading-tight);
    font-weight: var(--weight-bold);
    letter-spacing: -.01em;
    text-wrap: balance;
}

h1 { font-size: var(--size-page-title); }
h2 { font-size: var(--text-lg); letter-spacing: 0; }
h3 { font-size: var(--text-base); letter-spacing: 0; font-weight: var(--weight-semibold); }

p { margin: 0 0 var(--space-4); }

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover { text-decoration: underline; }

ul, ol { margin: 0 0 var(--space-4); padding-left: var(--space-6); }
li { margin-bottom: var(--space-1); }

small { font-size: var(--text-sm); color: var(--text-secondary); }

code, kbd, pre {
    font-family: var(--font-mono);
    font-size: .92em;
}

code {
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 5px;
}

pre {
    background: var(--bg-sunk);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-4);
    overflow-x: auto;
    margin: 0 0 var(--space-4);
}

pre code { background: none; border: 0; padding: 0; }

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

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

/* Фокус виден всегда — по нему работают с клавиатуры на уроке у доски. */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Детям с сенсорной чувствительностью анимации мешают. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Для читалок: видно только вспомогательной технике. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/*
 * Страница ошибки. Раньше эти правила лежали инлайновым <style> прямо в
 * ErrorHandler — работало, но требовало разрешить инлайновые стили
 * политике безопасности. Правила переехали сюда; страница ошибки и так
 * подключает этот файл.
 */
.error-page { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: var(--space-6); }
.error-page main { max-width: 70ch; }
.error-page .code {
    font-size: 64px;
    font-weight: var(--weight-bold);
    letter-spacing: -.03em;
    line-height: 1;
    margin: 0 0 var(--space-2);
    color: var(--text-muted);
}