/*
 * Дизайн-система cribs.me, v2 (#40).
 *
 * Токены и компоненты — из макета Claude Design, сентябрь 2026
 * (docs/design/2026-09-redesign, блок «Основа», ветки 2a и 3a).
 * Один файл, без фреймворка и без JS. Основной читатель — с телефона,
 * три четверти входов идут сразу на страницу вопроса из поиска, поэтому
 * главное здесь — колонка текста, которую удобно читать с первой секунды.
 *
 * Порядок: шрифты → токены → сброс → база → компоненты → разделы страниц
 * → утилиты → экраны пошире.
 */

/* ─── Шрифты ─────────────────────────────────────────────────────────── */

/*
 * Source Serif 4 — заголовки, IBM Plex Sans — текст, IBM Plex Mono —
 * счётчики и подписи. Отдаём сами, а не с Google Fonts (#39, п. 9): сайт
 * не делает внешних запросов, кроме счётчиков. Файлы — @fontsource 5.3.0,
 * лицензия OFL-1.1 лежит рядом с ними.
 *
 * Каждое начертание разрезано на кириллицу и латиницу: браузер берёт
 * только нужный кусок по unicode-range. Латиница нужна почти всегда —
 * в ней цифры и пунктуация. swap: текст виден сразу системным шрифтом
 * и подменяется, когда файл пришёл.
 */

@font-face {
    font-family: "IBM Plex Sans";
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/ibm-plex-sans-cyrillic-400-normal.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "IBM Plex Sans";
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "IBM Plex Sans";
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/ibm-plex-sans-cyrillic-500-normal.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "IBM Plex Sans";
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "IBM Plex Sans";
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/ibm-plex-sans-cyrillic-600-normal.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "IBM Plex Sans";
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "IBM Plex Mono";
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/ibm-plex-mono-cyrillic-400-normal.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "IBM Plex Mono";
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "IBM Plex Mono";
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/ibm-plex-mono-cyrillic-500-normal.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "IBM Plex Mono";
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Source Serif 4";
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/source-serif-4-cyrillic-600-normal.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "Source Serif 4";
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/source-serif-4-latin-600-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Source Serif 4";
    font-style: italic;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/source-serif-4-cyrillic-600-italic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "Source Serif 4";
    font-style: italic;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/source-serif-4-latin-600-italic.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ─── Токены ─────────────────────────────────────────────────────────── */

/*
 * Одна подложка и белые карточки — без градиентов и вторых фонов.
 * Тёмной темы нет (#39, п. 3): сайт только светлый, как в макете.
 *
 * Серые — из макета, с одной поправкой ради WCAG AA. Второстепенный
 * #8894a4 даёт на белом 3,1:1, а на подложке 2,9:1 — мелкие счётчики
 * и крошки им не прочесть. Для текста он заменён на #687380 (4,8:1
 * и 4,6:1), а исходный остался только для значков, где нужен 3:1.
 */

:root {
    --bg: #f7f8fa;
    --surface: #ffffff;
    --surface-sunken: #f2f4f7;

    --ink: #17202b;
    --ink-body: #28323f;
    --ink-muted: #4a5766;
    --ink-faint: #687380;
    --ink-icon: #8894a4;

    /* Синий — ссылки и действия. Красный «пятёрки» — только знак
       и прогресс, не кнопки: иначе он перестаёт читаться как «пятёрка».
       Hex — для браузеров без oklch, точные значения ниже в @supports. */
    --action: #276ee1;
    --action-hover: #1a56b4;
    --mark: #cc323e;

    --line: #e4e8ee;
    --line-soft: #eceff4;
    --line-strong: #d9dee6;
    --slot: #eef1f5;
    --shadow-sticky: 0 -4px 16px rgb(23 32 43 / 0.06);

    --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
    --font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

    /* Текст ответа не мельче 16px: медиана ответа — 2681 символ. */
    --size-body: 1rem;
    --size-small: 0.9375rem;
    --size-tiny: 0.8125rem;
    --size-mono: 0.75rem;
    --leading: 1.6;

    /* Шаг сетки 4px, вертикальный ритм 8px. */
    --gap-3xs: 0.25rem;
    --gap-2xs: 0.5rem;
    --gap-xs: 0.75rem;
    --gap-s: 1rem;
    --gap-m: 1.5rem;
    --gap-l: 2rem;
    --gap-xl: 3rem;

    /* Радиусы: 10 — пилюли, 14 — поля и кнопки, 20 — карточки. */
    --radius-pill: 10px;
    --radius-control: 14px;
    --radius-card: 20px;

    /* Минимальная цель нажатия — 46px. */
    --tap: 46px;

    /* Контент 1180 (на 1440 это поля по 130), текст чтения до 680,
       мобильные поля 16. */
    --content-max: 73.75rem;
    --measure: 42.5rem;
    --page-pad: var(--gap-s);
}

@supports (color: oklch(0 0 0)) {
    :root {
        --action: oklch(0.56 0.19 260);
        --action-hover: oklch(0.47 0.17 260);
        --mark: oklch(0.56 0.19 22);
    }
}

/* ─── Сброс ──────────────────────────────────────────────────────────── */

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

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

ul, ol {
    padding: 0;
}

img {
    max-width: 100%;
    height: auto;
}

/* hidden сильнее display: у кнопок свой inline-flex. */
[hidden] {
    display: none !important;
}

/* ─── База ───────────────────────────────────────────────────────────── */

html {
    /* Никакого автоувеличения текста при повороте телефона. */
    -webkit-text-size-adjust: 100%;
}

body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--size-body);
    line-height: var(--leading);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Заголовки страниц — курсивный Source Serif, как в макетах 2011 года.
   Заголовок вопроса — прямой (.question-title). */
h1 {
    margin-bottom: var(--gap-s);
    color: var(--ink);
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 600;
    font-size: 1.75rem;
    line-height: 1.12;
    text-wrap: balance;
}

h2, h3 {
    color: var(--ink);
    font-weight: 600;
    line-height: 1.3;
    text-wrap: balance;
}

h2 {
    font-size: 1.125rem;
    margin: var(--gap-l) 0 var(--gap-xs);
}

h3 {
    font-size: var(--size-body);
    margin: var(--gap-m) 0 var(--gap-2xs);
}

p {
    margin-bottom: var(--gap-s);
}

a {
    color: var(--action);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

a:hover {
    color: var(--action-hover);
}

:focus-visible {
    outline: 2px solid var(--action);
    outline-offset: 2px;
}

::placeholder {
    color: var(--ink-faint);
    opacity: 1;
}

/* ─── Каркас страницы ────────────────────────────────────────────────── */

/* Белого листа (.sheet) из волны 1 больше нет: в макете содержимое лежит
   прямо на подложке, белые — только карточки. Класс в разметке остался
   до переделки каркаса в #41. */
.page {
    width: 100%;
    max-width: calc(var(--content-max) + 2 * var(--page-pad));
    margin: 0 auto;
    padding: 0 var(--page-pad);
}

.content {
    flex: 1 0 auto;
    padding: var(--gap-m) 0 var(--gap-xl);
}

/* Колонка чтения: заголовки и текст не шире 680px. */
.prose {
    max-width: var(--measure);
}

/* ─── Статические страницы (#50) ─────────────────────────────────────── */

/* «О проекте»: две плитки с цифрами из базы, как в 1a. Число — крупно
   антиквой, подпись под ним; в разметке подпись — dt, поэтому порядок
   задаёт flex. */
.about__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.625rem;
    max-width: 26rem;
    margin: var(--gap-m) 0;
}

.about__stat {
    display: flex;
    flex-direction: column-reverse;
    padding: 0.875rem;
    border: 1px solid var(--line-soft);
    border-radius: 16px;
    background: var(--surface);
}

.about__stat-value {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1.625rem;
    font-weight: 600;
    line-height: 1.2;
}

.about__stat-label {
    color: var(--ink-muted);
    font-size: var(--size-tiny);
}

/* «Нужна помощь?» — на /about под чертой, на /contact — вся страница. */
.help {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-xs);
}

.about .help {
    padding-top: var(--gap-s);
    border-top: 1px solid var(--line-soft);
}

.help__title,
.help__text,
.help__address {
    margin: 0;
}

h2.help__title {
    font-size: 1.0625rem;
}

.help__text {
    color: var(--ink-muted);
}

.help__address {
    color: var(--ink-faint);
    font-family: var(--font-mono);
    font-size: var(--size-mono);
}

/* ─── Компоненты: кнопки ─────────────────────────────────────────────── */

/* Основная — «Читать», одна на экран; вторичная — всё остальное. */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-2xs);
    min-height: var(--tap);
    padding: 0 1.375rem;
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    font: inherit;
    font-size: var(--size-small);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
}

.button--primary {
    background: var(--action);
    color: #ffffff;
}

.button--primary:hover {
    background: var(--action-hover);
    color: #ffffff;
}

.button--secondary {
    border-color: var(--line-strong);
    background: var(--surface);
    color: var(--ink-body);
    font-weight: 500;
}

.button--secondary:hover {
    border-color: var(--ink-icon);
    color: var(--ink);
}

/* Квадратная — стрелка раскрытия и «↓ Файл» на карточке комплекта. */
.button--icon {
    width: var(--tap);
    padding: 0;
}

/* ─── Компоненты: поле ───────────────────────────────────────────────── */

/* 16px в поле — не только макет: мельче iOS увеличивает страницу
   при фокусе. */
.field {
    min-width: 0;
    height: var(--tap);
    padding: 0 0.875rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-control);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: var(--size-body);
}

.field:focus-visible {
    border-color: var(--action);
    outline-offset: 0;
}

/* ─── Компоненты: пилюля буквы ───────────────────────────────────────── */

.pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 var(--gap-3xs);
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    color: var(--ink-body);
    font-size: var(--size-small);
    line-height: 1;
    text-decoration: none;
}

.pill:hover {
    background: var(--line);
    color: var(--ink);
}

/* Текущая — тёмная, а не красная: красный — только знак и прогресс. */
.pill[aria-current="page"] {
    background: var(--ink);
    color: #ffffff;
}

/* ─── Компоненты: строка «название — счётчик» ────────────────────────── */

.row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--gap-xs);
    padding: var(--gap-xs) 0.875rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--surface);
    font-size: var(--size-small);
}

.count {
    flex: none;
    color: var(--ink-faint);
    font-family: var(--font-mono);
    font-size: var(--size-mono);
    font-variant-numeric: tabular-nums;
}

/* ─── Компоненты: карточка комплекта ─────────────────────────────────── */

.card {
    padding: 1.25rem 1.375rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--surface);
}

/* Раскрытая карточка обведена тёмным, остальные — светлым. */
.card--open {
    border-color: var(--ink);
}

.card__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
}

/* ─── Компоненты: полоса прогресса ───────────────────────────────────── */

.progress {
    height: 6px;
    border-radius: 99px;
    background: var(--line-soft);
    overflow: hidden;
}

.progress__bar {
    display: block;
    height: 100%;
    background: var(--mark);
}

/* ─── Компоненты: подпись над блоком ─────────────────────────────────── */

/* «ВЫ ЧИТАЛИ», «12 ТЕМ · УГОЛОВНОЕ ПРАВО» — моноширинные подписи. */
.label {
    color: var(--ink-faint);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ─── Компоненты: рекламные места ────────────────────────────────────── */

/*
 * Заполняются в волне 3 (#33), но высота фиксирована с самого начала:
 * если задать её потом, вместе с рекламой приедет сдвиг вёрстки.
 * Размеры — из макета: в чтении 358×110 на телефоне и 728×90 на
 * десктопе, в колонке 300×250.
 */
.ad-slot {
    margin: var(--gap-m) auto;
    border-radius: 16px;
    background: var(--slot);
    contain: layout size;
}

.ad-slot--leaderboard {
    max-width: 728px;
    min-height: 110px;
    height: 110px;
}

.ad-slot--inline {
    max-width: 300px;
    min-height: 250px;
    height: 250px;
}

/* ─── Шапка ──────────────────────────────────────────────────────────── */

/* На телефоне — знак и поиск в две строки (1a), на десктопе — в одну
   (3a). На внутренних страницах телефона шапки нет вовсе: её место
   занимает панель «←» (.has-back). */
.masthead {
    border-bottom: 1px solid var(--line-soft);
    background: var(--surface);
    padding: var(--gap-2xs) 0 0.875rem;
}

.has-back .masthead {
    display: none;
}

/*
 * Выравнивание по центру, а не по базовой линии: у знака, названия
 * и поля разный кегль и разная высота, и по базовой линии они
 * расходятся лесенкой.
 */
.masthead__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.875rem 2.5rem;
}

.masthead__logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    text-decoration: none;
}

.masthead__mark {
    display: grid;
    place-items: center;
    flex: none;
    width: 36px;
    height: 36px;
    border: 1px solid var(--line);
    border-radius: 11px;
    color: var(--mark);
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 600;
    font-size: 1.4375rem;
    line-height: 1;
}

.masthead__name {
    display: flex;
    flex-direction: column;
    font-size: var(--size-body);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.masthead__tagline {
    color: var(--ink-faint);
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: 0;
}

/* ─── Поиск ──────────────────────────────────────────────────────────── */

/* На телефоне поле занимает всю строку: делить её со знаком значит
   получить поле, в которое не видно, что вводишь. Лупа внутри поля —
   значок, а не кнопка. */
.search {
    position: relative;
    flex: 1 1 100%;
}

.search__icon {
    position: absolute;
    top: 50%;
    left: 14px;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    color: var(--ink-icon);
    pointer-events: none;
}

.search__input {
    width: 100%;
    height: 48px;
    padding-left: 2.625rem;
}

/* ─── Панель «←» ─────────────────────────────────────────────────────── */

/* Только телефон, только внутренние страницы (2a): вместо шапки —
   путь на уровень выше с подписью этого уровня. */
.backbar {
    background: var(--surface);
    border-bottom: 1px solid var(--line-soft);
    padding: var(--gap-2xs) 0 var(--gap-xs);
}

.backbar__link {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    color: var(--ink-faint);
    font-size: 0.875rem;
    text-decoration: none;
}

.backbar__link:hover {
    color: var(--action);
}

.backbar__arrow {
    display: grid;
    place-items: center;
    flex: none;
    width: var(--tap);
    height: var(--tap);
    border-radius: 12px;
    background: var(--surface-sunken);
    color: var(--ink-body);
    font-size: 1.125rem;
}

/* Название предмета бывает длинным — панель остаётся в одну строку. */
.backbar__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.backbar__inner {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
}

.backbar__link {
    flex: 0 1 auto;
    min-width: 0;
}

/* «5 / 12» — позиция в комплекте, в чтении (2a). */
.backbar__position {
    flex: 1 1 auto;
    color: var(--ink-faint);
    font-family: var(--font-mono);
    font-size: var(--size-mono);
    text-align: center;
}

/* ─── Избранное ──────────────────────────────────────────────────────── */

/*
 * Конец шапки: действия страницы и ссылка на избранное. На телефоне
 * (главная, 1a) — справа от знака, поиск уходит второй строкой;
 * на десктопе — справа от поиска.
 */
.masthead__end {
    display: flex;
    align-items: center;
    order: 1;
    gap: var(--gap-2xs);
    margin-left: auto;
}

.masthead .search {
    order: 2;
}

.masthead__favorites {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--surface-sunken);
    color: var(--ink-muted);
    font-size: 1.0625rem;
    text-decoration: none;
}

.masthead__favorites:hover {
    color: var(--action);
}

.masthead__favorites-label {
    display: none;
}

/* Там, где есть ☆ этой страницы, вторая звезда в шапке только путает
   (как в 3a на чтении). */
.masthead__end:has([data-favorite]) .masthead__favorites {
    display: none;
}

.backbar__actions {
    margin-left: auto;
}

.favorite-toggle[aria-pressed="true"] {
    color: var(--ink);
    font-weight: 600;
}

.favorites__note {
    color: var(--ink-muted);
}

.favorites__list {
    display: grid;
    gap: var(--gap-2xs);
    margin: var(--gap-s) 0 0;
    list-style: none;
}

.favorites__item {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    padding: var(--gap-2xs) var(--gap-2xs) var(--gap-2xs) 0.875rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--surface);
}

.favorites__link {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--ink);
    line-height: 1.35;
    text-decoration: none;
}

.favorites__link:hover {
    color: var(--action);
    text-decoration: underline;
}

.favorites__remove {
    flex: none;
    width: var(--tap);
    height: var(--tap);
    border: 0;
    border-radius: 12px;
    background: var(--surface-sunken);
    color: var(--ink-muted);
    font: inherit;
    cursor: pointer;
}

.favorites__remove:hover {
    color: var(--ink);
}

/* ─── Выдача поиска ──────────────────────────────────────────────────── */

/* Вопросы выдачи — компонент тем комплекта (.topics, #42), разметка
   и стили ниже, рядом с ним. Здесь — ширина, подсветка и пагинация.
   Колонка — по ширине чтения: выдержки на все 1180 читались бы
   строками по 150 знаков. */
.search-page {
    max-width: var(--measure);
}

/* Подсветка совпадений цветом и насыщенностью, а не жёлтым маркером. */
mark {
    background: transparent;
    color: var(--ink);
    font-weight: 600;
}

/* Кнопки, как навигация в чтении (#44): «Дальше» — основная. */
.pagination {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    margin-top: var(--gap-m);
}

.pagination__position {
    margin: 0 auto;
}

.pagination__position:first-child {
    margin-left: 0;
}

.pagination__position:last-child {
    margin-right: 0;
}

/* ─── Алфавит ────────────────────────────────────────────────────────── */

/*
 * 27 букв. На десктопе — строка под шапкой на каждой странице
 * (27 × 36 + отступы < 1180). На телефоне — только на главной и букве,
 * липкой лентой с горизонтальной прокруткой (1a); на остальных
 * страницах его место занимает «←».
 */
.alphabet-bar {
    display: none;
}

.alphabet-bar--mobile {
    display: block;
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--surface);
    border-bottom: 1px solid var(--line-soft);
    box-shadow: 0 4px 16px rgb(23 32 43 / 0.04);
}

.alphabet-bar .page {
    padding: 0;
}

.alphabet {
    display: flex;
    gap: 6px;
    list-style: none;
    overflow-x: auto;
    padding: var(--gap-2xs) var(--page-pad) 10px;
    scrollbar-width: none;
}

.alphabet::-webkit-scrollbar {
    display: none;
}

.alphabet li {
    flex: none;
}

/* На странице буквы лента должна открыться на текущей букве, а не
   на «А»: иначе «Я» уезжает за край. Скриптов нет, поэтому текущая
   буква — единственная точка привязки прокрутки, и браузер сам
   доводит до неё ленту при загрузке. proximity, а не mandatory:
   дальше ленту можно листать свободно. */
.alphabet-bar--mobile .alphabet {
    scroll-snap-type: x proximity;
}

.alphabet-bar--mobile [aria-current="page"] {
    scroll-snap-align: center;
    scroll-initial-target: nearest;
}

.alphabet-bar .pill {
    min-width: 34px;
    height: 34px;
    font-size: 0.875rem;
}

.alphabet__link {
    text-transform: uppercase;
}

/* ─── Хлебные крошки ─────────────────────────────────────────────────── */

.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-3xs) var(--gap-2xs);
    list-style: none;
    margin-bottom: var(--gap-2xs);
    color: var(--ink-faint);
    font-size: 0.875rem;
}

.breadcrumbs a {
    color: inherit;
    text-decoration: none;
}

.breadcrumbs a:hover {
    color: var(--action);
    text-decoration: underline;
}

/* На телефоне путь показывает «←», крошки там лишние (2a). */
.has-back .breadcrumbs {
    display: none;
}

.breadcrumbs__item:not(:last-child)::after {
    content: "/";
    margin-left: var(--gap-2xs);
}

/* ─── Списки каталога ────────────────────────────────────────────────── */

/* Строки «название — счётчик» через тонкую линию. На широком экране
   список раскладывается в колонки — так в 3a нарисованы главная (три)
   и буква (две). */
.catalogue {
    list-style: none;
    column-gap: 2.75rem;
}

.catalogue__item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--gap-xs);
    padding: var(--gap-2xs) 0;
    border-top: 1px solid var(--line-soft);
    font-size: var(--size-small);
    line-height: 1.35;
    break-inside: avoid;
}

/* Ссылки-строки в списках — тёмные, как в макете: синий там, где это
   действие или ссылка посреди текста. Иначе список из 200 предметов
   превращается в синюю стену подчёркиваний. */
.catalogue__item a,
.questions__item a {
    color: var(--ink);
    text-decoration: none;
}

.catalogue__item a:hover,
.questions__item a:hover {
    color: var(--action);
    text-decoration: underline;
}

.catalogue__count {
    flex: none;
    color: var(--ink-faint);
    font-family: var(--font-mono);
    font-size: var(--size-mono);
    font-variant-numeric: tabular-nums;
}

/* ─── Разделы и комплекты ────────────────────────────────────────────── */

.section {
    margin-top: var(--gap-l);
}

.section__title {
    margin: 0 0 var(--gap-xs);
    font-size: 1.0625rem;
}

/* Номер вопроса — моноширинный и приглушённый, как в макете: в комплекте
   медиана 36 вопросов, и порядок в нём осмысленный. */
.questions {
    margin: 0;
    padding-left: 2em;
    border-top: 1px solid var(--line-soft);
}

.questions__item {
    padding: 0.6875rem 0;
    border-bottom: 1px solid var(--surface-sunken);
    font-size: var(--size-small);
    line-height: 1.35;
}

.questions__item::marker {
    color: var(--ink-faint);
    font-family: var(--font-mono);
    font-size: var(--size-mono);
}

/* ─── Главная ────────────────────────────────────────────────────────── */

.home__meta {
    margin: 0 0 var(--gap-m);
}

/*
 * «Вы читали» (#49). 1a — одна карточка, последний комплект; 3a — три
 * в ряд. Карточка целиком ведёт к последнему вопросу: ссылка на названии
 * предмета растянута на всю карточку, ✕ лежит поверх неё.
 */
.recent {
    margin: 0 0 var(--gap-l);
}

.recent__title {
    margin: 0 0 var(--gap-xs);
    font-weight: 400;
}

.recent__list {
    display: grid;
    gap: var(--gap-s);
    margin: 0;
    padding: 0;
    list-style: none;
}

.recent__card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.875rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
}

.recent__card:nth-child(n + 2) {
    display: none;
}

.recent__head {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.recent__link {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--ink);
    font-size: var(--size-small);
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
}

.recent__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.recent__card:hover .recent__link {
    color: var(--action);
}

/* Цель нажатия 46px, но карточку она не раздувает. */
.recent__remove {
    position: relative;
    z-index: 1;
    flex: none;
    width: var(--tap);
    height: var(--tap);
    margin: -0.75rem -0.5rem -0.75rem -0.375rem;
    border: 0;
    border-radius: 12px;
    background: none;
    color: var(--ink-icon);
    font: inherit;
    font-size: var(--size-tiny);
    cursor: pointer;
}

.recent__remove:hover {
    background: var(--surface-sunken);
    color: var(--ink);
}

/* Вопросы бывают до 180 знаков — две строки, дальше многоточие. */
.recent__sub {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--ink-muted);
    font-size: var(--size-tiny);
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

/*
 * Указатель по буквам (#46). 1a (телефон): список, буквы-разделители
 * закреплены под лентой алфавита, как в телефонной книге. 3a: колонки
 * с курсивными буквами в цвете «пятёрки».
 *
 * --ribbon — высота липкой ленты алфавита: 8 + 34 + 10 и линия. Под неё
 * прячутся разделители и на неё же отступает переход по якорю из ленты.
 */
.letter-index {
    --ribbon: 53px;
}

.letter-group {
    scroll-margin-top: var(--ribbon);
}

.letter-group__head {
    position: sticky;
    top: var(--ribbon);
    z-index: 1;
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0;
    padding: 0.875rem 0 var(--gap-2xs);
    background: var(--bg);
    font-size: inherit;
    font-weight: 400;
    break-after: avoid;
}

.letter-group__letter {
    color: var(--mark);
    font-family: var(--font-serif);
    font-size: 1.375rem;
    font-style: italic;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
}

.letter-group__letter:hover {
    text-decoration: underline;
}

/* Колонки — у всего указателя, а не у каждой буквы. */
.letter-index .catalogue {
    columns: 1;
}

.letter-index .catalogue__item {
    padding: 0.8125rem 0;
    font-size: var(--size-body);
    line-height: 1.3;
}

/* ─── Страница буквы ─────────────────────────────────────────────────── */

/* Заголовок — перечень предметов, как на живом сайте: он длиннее
   обычного, и кегль у него меньше. */
.letter-page__title {
    font-size: 1.5rem;
    line-height: 1.18;
}

.letter-page__meta {
    margin: 0 0 var(--gap-m);
}

/* «Не нашли предмет?» — подсказка с полем поиска. */
.hint {
    padding: 1.25rem;
    border-radius: 18px;
}

.hint__title {
    margin: 0 0 var(--gap-2xs);
    font-size: var(--size-body);
}

.hint__text {
    margin: 0 0 var(--gap-xs);
    color: var(--ink-muted);
    font-size: var(--size-small);
    line-height: 1.6;
}

/* ─── Две колонки ────────────────────────────────────────────────────── */

/* 3a: содержимое и закреплённая колонка справа — действия, реклама 300×250,
   смежные предметы. До 64rem — одна колонка, правая уходит вниз. */
/* minmax(0, 1fr), а не auto: иначе колонка растягивается под самое длинное
   неразрывное содержимое (название следующего вопроса в нижней панели)
   и страница уезжает за край телефона. */
.split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gap-m);
}

.split__aside {
    display: grid;
    align-content: start;
    gap: var(--gap-s);
}

/* Рекламы в колонке на телефоне макет не предусматривает. */
.split__aside .ad-slot {
    display: none;
}

/* ─── Страница предмета ──────────────────────────────────────────────── */

.predmet-page__meta {
    margin: 0 0 var(--gap-2xs);
}

.predmet-page__hint {
    margin: 0 0 var(--gap-m);
    color: var(--ink-faint);
    font-size: var(--size-tiny);
    line-height: 1.45;
}

/* Поле поиска вне шапки: у предмета без комплектов (#43) и на 404 (#51). */
.predmet-page__empty .search,
.not-found .search {
    margin-top: var(--gap-s);
}

.not-found .search + p {
    margin-top: var(--gap-s);
}

.complect-cards {
    display: grid;
    gap: 0.875rem;
}

/*
 * Карточка комплекта: два действия разного веса — «Читать» ведёт
 * на страницу комплекта, стрелка раскрывает вопросы здесь же. Раскрытие
 * на <details>: без JS, и ссылки на все вопросы всегда есть в HTML.
 *
 * Стрелка — это <summary>, а он обязан жить внутри <details>, то есть
 * под строкой с «Читать». В эту строку он поднят позиционированием:
 * место под него зарезервировано, а сдвиг вверх — высота кнопки плюс
 * зазор, обе величины фиксированы.
 */
.complect-card {
    --card-gap: var(--gap-xs);
    display: grid;
    gap: var(--card-gap);
    padding: var(--gap-s);
}

.complect-card:has(.complect-card__list[open]) {
    border-color: var(--ink);
}

.complect-card__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--card-gap) var(--gap-xs);
}

.complect-card__title {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    font-size: 1.0625rem;
}

.complect-card__count {
    padding-top: 3px;
}

.complect-card__preview {
    display: grid;
    flex: 1 1 100%;
    gap: 5px;
    list-style: none;
    color: var(--ink-muted);
    font-size: 0.875rem;
    line-height: 1.4;
}

.complect-card__preview li {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.complect-card:has(.complect-card__list[open]) .complect-card__preview {
    display: none;
}

.complect-card__read {
    flex: 0 0 calc(100% - var(--tap) - var(--gap-2xs));
}

.complect-card__read--solo {
    flex-basis: 100%;
}

.complect-card__list {
    position: relative;
}

/* Свёрнутый <details> — это один поднятый <summary>: зазор перед ним
   в сетке карточки не нужен. */
.complect-card__list:not([open]) {
    margin-top: calc(-1 * var(--card-gap));
}

.complect-card__toggle {
    position: absolute;
    top: calc(-1 * var(--tap));
    right: 0;
    list-style: none;
    font-size: 1.0625rem;
}

.complect-card__list[open] > .complect-card__toggle {
    top: calc(-1 * (var(--tap) + var(--card-gap)));
    border-color: var(--ink);
    background: var(--ink);
    color: #ffffff;
}

.complect-card__toggle::-webkit-details-marker {
    display: none;
}

.complect-card__arrow::before {
    content: "↓";
}

.complect-card__list[open] .complect-card__arrow::before {
    content: "↑";
}

.complect-card__list .questions__item {
    break-inside: avoid;
}

/* Смежные предметы — в колонке одним столбцом, как бы широко ни было. */
.siblings {
    padding: 1.25rem;
    border-radius: 18px;
}

.siblings__title {
    margin: 0 0 var(--gap-2xs);
    font-size: var(--size-body);
}

.siblings .catalogue {
    columns: 1;
}

/* ─── Страница комплекта ─────────────────────────────────────────────── */

/*
 * 2a (телефон): действия под заголовком, темы списком, форматы в конце —
 * туда ведёт «↓ Файл». 3a (от 64rem): темы слева, справа закреплённая
 * колонка — «Читать с первой темы», форматы, реклама 300×250.
 */
.complect-page__meta {
    margin: 0 0 var(--gap-s);
}

.complect-page__actions {
    display: flex;
    gap: var(--gap-2xs);
    margin-bottom: var(--gap-m);
}

.complect-page__actions .button--primary {
    flex: 1 1 auto;
}

.complect-page__panel {
    display: grid;
    gap: 0.875rem;
    padding: 1.25rem;
    border-color: var(--line-strong);
    border-radius: 18px;
}

/* На телефоне «Читать» уже стоит под заголовком. */
.complect-page__read {
    display: none;
}

/* Темы: номер, вопрос, начало ответа. Нумерация счётчиком — с ведущим
   нулём, как в макете; role="list" в разметке возвращает списку
   семантику, которую Safari снимает вместе с list-style. */
.topics {
    margin: 0;
    padding: var(--gap-2xs) var(--gap-s) var(--gap-xs);
    list-style: none;
    counter-reset: topic;
}

.topics__item {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    column-gap: var(--gap-xs);
    padding: var(--gap-s) 0;
    border-bottom: 1px solid var(--line-soft);
    counter-increment: topic;
}

.topics__item:last-child {
    border-bottom: 0;
}

.topics__item::before {
    content: counter(topic, decimal-leading-zero);
    grid-row: span 2;
    padding-top: 3px;
    color: var(--ink-faint);
    font-family: var(--font-mono);
    font-size: var(--size-mono);
}

.topics__link {
    color: var(--ink);
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;
}

.topics__link:hover {
    color: var(--action);
    text-decoration: underline;
}

.topics__lead {
    grid-column: 2;
    margin: var(--gap-3xs) 0 0;
    color: var(--ink-faint);
    font-size: var(--size-tiny);
    line-height: 1.5;
}

/* Выдача поиска (#51): те же темы, но без номеров — порядок в выдаче
   это вес совпадения, а не место в комплекте. Под выдержкой — предмет. */
.topics--plain .topics__item {
    grid-template-columns: minmax(0, 1fr);
}

.topics--plain .topics__item::before {
    content: none;
}

.topics--plain .topics__lead,
.topics__source {
    grid-column: 1;
}

.topics__source {
    margin: var(--gap-2xs) 0 0;
    color: var(--ink-faint);
    font-family: var(--font-mono);
    font-size: var(--size-mono);
}

/* ─── Форматы комплекта ──────────────────────────────────────────────── */

/* Вся строка — ссылка: формат, пояснение, размер. */
.formats__title {
    margin: 0 0 6px;
    font-weight: 400;
}

.formats__list {
    list-style: none;
}

.formats__item {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    min-height: var(--tap);
    padding: 0.6875rem 0;
    border-top: 1px solid var(--line-soft);
    color: var(--ink-muted);
    text-decoration: none;
}

.formats__item:hover .formats__name {
    color: var(--action);
    text-decoration: underline;
}

.formats__name {
    flex: none;
    width: 2.75rem;
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-weight: 500;
}

.formats__note {
    flex: 1 1 auto;
    font-size: var(--size-tiny);
    line-height: 1.4;
}

.formats__size {
    flex: none;
    color: var(--ink-faint);
    font-family: var(--font-mono);
    font-size: var(--size-mono);
}

/* ─── Вопрос и ответ ─────────────────────────────────────────────────── */

.question-title {
    font-style: normal;
    font-size: 1.625rem;
    line-height: 1.2;
}

/* Вопрос длиннее 150 знаков (#52): мельче, чтобы ответ начинался
   на первом экране, а не через экран заголовка. */
.question-title--long {
    font-size: 1.25rem;
    line-height: 1.3;
}

.answer {
    max-width: var(--measure);
    color: var(--ink-body);
    font-size: calc(var(--size-body) * var(--font-scale, 1));
    overflow-wrap: break-word;
}

.answer p {
    margin-bottom: var(--gap-s);
}

.answer table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: var(--size-small);
}

.answer td,
.answer th {
    border: 1px solid var(--line);
    padding: var(--gap-3xs) var(--gap-2xs);
}

/* ─── Чтение ─────────────────────────────────────────────────────────── */

/*
 * 2a (телефон): комплект подписан над заголовком, реклама 358×110 между
 * заголовком и текстом, липкая нижняя панель со следующим вопросом.
 * 3a (от 64rem): текст до 680px, справа закреплённое оглавление, панель
 * «← предыдущий / следующий →» стоит под текстом.
 */
.reader__context {
    margin: 0 0 var(--gap-2xs);
    color: var(--ink-faint);
    font-size: var(--size-tiny);
}

.reader__context a {
    color: inherit;
    text-decoration: none;
}

/* Шаги «Аа»: скрипт в <head> ставит data-font до отрисовки. */
:root[data-font="1"] {
    --font-scale: 1.125;
}

:root[data-font="2"] {
    --font-scale: 1.25;
}

/*
 * Навигация по комплекту. На телефоне — липкая к нижней кромке, во всю
 * ширину: «←» квадратом, следующий вопрос — основной кнопкой. sticky,
 * а не fixed: панель не накрывает подвал и уходит вместе со статьёй.
 * Тень — единственное место, где она разрешена: под липкими панелями.
 */
.reader-nav {
    position: sticky;
    bottom: 0;
    z-index: 1;
    display: flex;
    gap: var(--gap-2xs);
    margin: var(--gap-m) calc(-1 * var(--page-pad)) 0;
    padding: var(--gap-xs) var(--page-pad) 1.125rem;
    border-top: 1px solid var(--line-soft);
    background: var(--surface);
    box-shadow: var(--shadow-sticky);
}

.reader-nav .button {
    min-height: 48px;
}

.reader-nav__prev {
    flex: none;
    width: 48px;
    padding: 0;
}

/* На телефоне у «←» подпись только для чтения с экрана. */
.reader-nav__prev .reader-nav__title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.reader-nav__next {
    flex: 1 1 auto;
    min-width: 0;
}

.reader-nav__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.related {
    margin-top: var(--gap-l);
}

/* Оглавление комплекта: только десктоп (3a). */
.toc {
    display: none;
}

.toc__title {
    margin: 0 0 var(--gap-2xs);
}

/* Текущая тема — единственная точка привязки прокрутки: при загрузке
   список сам доводится до неё, дальше листается свободно. */
.toc__list {
    min-height: 0;
    overflow-y: auto;
    list-style: none;
    scroll-snap-type: y proximity;
}

.toc__link {
    display: flex;
    gap: var(--gap-xs);
    padding: 0.625rem 0.75rem;
    border-top: 1px solid var(--line);
    color: var(--ink);
    font-size: 0.875rem;
    line-height: 1.35;
    text-decoration: none;
}

.toc__link:hover {
    color: var(--action);
}

.toc__number {
    flex: none;
    color: var(--ink-faint);
    font-family: var(--font-mono);
    font-size: var(--size-mono);
}

/* Текущая — белая плашка с меткой «пятёрки» слева. */
.toc__link[aria-current="page"] {
    position: relative;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    font-weight: 600;
    scroll-snap-align: center;
    scroll-initial-target: nearest;
}

.toc__link[aria-current="page"]::before {
    content: "";
    position: absolute;
    top: 0.6875rem;
    bottom: 0.6875rem;
    left: 0;
    width: 3px;
    border-radius: 99px;
    background: var(--mark);
}

.toc__link[aria-current="page"] .toc__number {
    color: var(--mark);
}

li:has(> .toc__link[aria-current="page"]) + li .toc__link {
    border-top-color: transparent;
}

/* ─── Действия чтения ────────────────────────────────────────────────── */

/* «Аа» и «↓ Файл»: на телефоне — квадратами в панели «←», на десктопе —
   с подписью в шапке. */
.reader-actions {
    display: flex;
    flex: none;
    gap: var(--gap-3xs);
}

.reader-actions__button {
    display: inline-grid;
    place-items: center;
    min-width: 44px;
    height: 44px;
    padding: 0 var(--gap-xs);
    border: 0;
    border-radius: 12px;
    background: var(--surface-sunken);
    color: var(--ink-body);
    font: inherit;
    font-size: 0.875rem;
    text-decoration: none;
    cursor: pointer;
}

.reader-actions__label {
    display: none;
}

/* Браузер без popover: вместо кнопки шторки — ссылка на форматы
   на странице комплекта. */
.reader-actions__file-link {
    display: none;
}

@supports not selector(:popover-open) {
    .reader-actions__file {
        display: none;
    }

    .reader-actions__file-link {
        display: inline-grid;
    }
}

/* ─── Шторка форматов ────────────────────────────────────────────────── */

/* popover: на телефоне — нижняя шторка поверх затемнения (2a),
   на десктопе — панель по центру. */
.files-sheet {
    inset: auto 0 0 0;
    width: 100%;
    max-width: none;
    max-height: 90vh;
    margin: 0;
    padding: 1.125rem var(--gap-s) 1.375rem;
    border: 0;
    border-radius: 24px 24px 0 0;
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 -8px 32px rgb(23 32 43 / 0.12);
}

.files-sheet::backdrop {
    background: rgb(23 32 43 / 0.5);
}

.files-sheet__handle {
    width: 44px;
    height: 4px;
    margin: 0 auto var(--gap-xs);
    border-radius: 99px;
    background: var(--line);
}

.files-sheet__title {
    margin: 0;
    font-size: 1.1875rem;
}

.files-sheet__sub {
    margin: var(--gap-3xs) 0 var(--gap-xs);
    color: var(--ink-faint);
    font-size: 0.875rem;
}

.files-sheet__close {
    width: 100%;
    margin-top: var(--gap-xs);
    background: var(--surface-sunken);
    color: var(--ink-body);
    font-weight: 500;
}

/* ─── Подвал ─────────────────────────────────────────────────────────── */

.colophon {
    flex-shrink: 0;
    border-top: 1px solid var(--line-soft);
    background: var(--surface);
    padding: 0.875rem 0 1.25rem;
    color: var(--ink-faint);
    font-size: 0.8125rem;
}

.colophon__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--gap-2xs) var(--gap-m);
}

.colophon__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-2xs) var(--gap-m);
    list-style: none;
}

.colophon a {
    color: inherit;
    text-decoration: none;
}

.colophon a:hover {
    color: var(--action);
    text-decoration: underline;
}

/* ─── Утилиты ────────────────────────────────────────────────────────── */

.muted {
    color: var(--ink-muted);
}

/* top и left обязательны. Без них элемент стоит в «статической» позиции,
   а внутри колонок CSS (указатель на главной и букве) Safari считает её
   так, будто колонок нет: две сотни подписей «комплектов:» уезжали вниз
   и растягивали страницу на пару экранов под подвалом. Chrome этого
   не делает, поэтому баг заметили только в Safari. */
.visually-hidden {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ─── Экраны пошире ──────────────────────────────────────────────────── */

@media (min-width: 48rem) {
    :root {
        --page-pad: var(--gap-m);
    }

    h1 {
        font-size: 2.375rem;
        line-height: 1.1;
    }

    .question-title {
        line-height: 1.15;
    }

    /* Шапка и алфавит на десктопе — одна белая полоса, линия под ней
       одна: у алфавита. */
    .masthead,
    .has-back .masthead {
        display: block;
        padding: 1.375rem 0 0;
        border-bottom: 0;
    }

    .masthead__inner {
        flex-wrap: nowrap;
    }

    .masthead__logo {
        gap: 12px;
    }

    .masthead__mark {
        width: 46px;
        height: 46px;
        border-radius: 13px;
        font-size: 1.8125rem;
    }

    .masthead__name {
        font-size: 1.1875rem;
    }

    .masthead__tagline {
        font-size: 0.75rem;
    }

    .search {
        flex: 1 1 auto;
        max-width: 620px;
    }

    .search__icon {
        left: 16px;
    }

    .search__input {
        height: 50px;
        padding-left: 2.75rem;
    }

    .backbar {
        display: none;
    }

    .alphabet-bar,
    .alphabet-bar--mobile {
        display: block;
        position: static;
        background: var(--surface);
        border-bottom: 1px solid var(--line-soft);
        box-shadow: none;
    }

    .alphabet-bar .page {
        padding: 0 var(--page-pad);
    }

    .alphabet {
        flex-wrap: wrap;
        overflow: visible;
        padding: 1.25rem 0 var(--gap-s);
    }

    .alphabet-bar .pill {
        min-width: 2.25rem;
        height: 2.25rem;
        font-size: var(--size-small);
    }

    .has-back .breadcrumbs {
        display: flex;
    }

    .colophon {
        padding: 1.25rem 0;
        font-size: 0.875rem;
    }

    .catalogue {
        columns: 2;
    }

    .ad-slot--leaderboard {
        min-height: 90px;
        height: 90px;
    }
}

/* Текст ответа на десктопе — 17/1.7 (#44). */
@media (min-width: 64rem) {
    .catalogue--dense {
        columns: 3;
    }

    .answer {
        font-size: calc(1.0625rem * var(--font-scale, 1));
        line-height: 1.7;
    }

    .complect-page__actions {
        display: none;
    }

    .split {
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: 2.5rem;
        align-items: start;
    }

    .split__aside {
        position: sticky;
        top: var(--gap-s);
    }

    .split__aside .ad-slot {
        display: block;
        margin: 0;
    }

    .complect-page__read {
        display: flex;
    }

    /* 3a: карточка — одна строка «название · число тем · Читать · стрелка»,
       первых трёх вопросов нет, раскрытый список — в два столбца. */
    .complect-card {
        --card-gap: var(--gap-s);
        padding: 1.25rem 1.375rem;
    }

    .complect-card__row {
        flex-wrap: nowrap;
        align-items: center;
    }

    .complect-card__title {
        font-size: 1.25rem;
    }

    .complect-card__count {
        padding-top: 0;
    }

    .complect-card__preview {
        display: none;
    }

    .complect-card__read {
        flex: none;
        margin-right: calc(var(--tap) + var(--gap-2xs));
        padding: 0 1.5rem;
    }

    .complect-card__read--solo {
        margin-right: 0;
    }

    .complect-card__list .questions {
        columns: 2;
        column-gap: 2rem;
    }

    .topics {
        padding: var(--gap-2xs) 1.5rem var(--gap-xs);
    }

    .topics__link {
        font-size: 1.0625rem;
    }

    .topics__lead {
        font-size: 0.875rem;
        line-height: 1.55;
    }
}

/* Чтение: подпись комплекта — только телефону, на десктопе есть крошки;
   действия — в шапке, с подписью. */
@media (min-width: 48rem) {
    .reader__context {
        display: none;
    }

    .masthead .reader-actions {
        gap: var(--gap-2xs);
        margin-left: auto;
    }

    .reader-actions__button {
        height: 42px;
        padding: 0 var(--gap-s);
        border: 1px solid var(--line);
        background: var(--surface);
    }

    .reader-actions__label {
        display: inline;
    }

    .files-sheet {
        inset: 0;
        width: min(30rem, calc(100% - 2rem));
        height: fit-content;
        margin: auto;
        padding: 1.5rem;
        border-radius: var(--radius-card);
    }

    .files-sheet__handle {
        display: none;
    }
}

/* Избранное в шапке десктопа: подписью справа от поиска (3a). */
@media (min-width: 48rem) {
    .masthead__end,
    .masthead .search {
        order: 0;
    }

    .masthead__favorites {
        display: inline-flex;
        width: auto;
        height: auto;
        background: none;
        font-size: var(--size-small);
    }

    .masthead__favorites-label {
        display: inline;
    }
}

/* Указатель на главной: от 48rem лента не липкая, разделители — обычные
   заголовки колонок; от 64rem колонок три. */
/* «Вы читали»: на планшете две карточки — три в 768 не помещаются
   даже с коротким предметом; от 64rem три, как в 3a. */
@media (min-width: 48rem) {
    .recent__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .recent__card,
    .recent__card:nth-child(2) {
        display: flex;
        padding: var(--gap-s);
    }

    .recent__link {
        font-size: var(--size-body);
    }

    .letter-index {
        --ribbon: 0px;
        columns: 2;
        column-gap: 2.75rem;
    }

    .letter-group__head {
        position: static;
        padding: 1.375rem 0 var(--gap-3xs);
        background: none;
    }

    .letter-group:first-child .letter-group__head {
        padding-top: 0;
    }

    .letter-group__letter {
        font-size: 1.5rem;
    }

    .letter-page__title {
        font-size: 2rem;
    }

    .letter-index .catalogue__item {
        padding: var(--gap-2xs) 0;
        font-size: var(--size-small);
        line-height: 1.35;
    }
}

/* 3a: оглавление справа, навигация под текстом. */
@media (min-width: 64rem) {
    .recent__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .recent__card:nth-child(3) {
        display: flex;
    }

    .letter-index {
        columns: 3;
    }

    .reader {
        gap: 3.75rem;
    }

    .reader-nav {
        position: static;
        margin: var(--gap-l) 0 0;
        padding: 1.25rem 0 0;
        max-width: var(--measure);
        background: none;
        box-shadow: none;
    }

    .reader-nav .button {
        min-height: 50px;
        font-size: var(--size-small);
    }

    .reader-nav__prev,
    .reader-nav__next {
        flex: 0 1 auto;
        width: auto;
        max-width: 50%;
        padding: 0 1.25rem;
    }

    .reader-nav__prev .reader-nav__title {
        position: static;
        width: auto;
        height: auto;
        clip-path: none;
    }

    .toc {
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - 2rem);
        padding: 1.25rem;
        border: 1px solid var(--line-soft);
        border-radius: 18px;
        background: var(--surface-sunken);
    }
}