/* ============================================================
   ХАБ УЧЕБНИКА — мобильная вёрстка
   ------------------------------------------------------------
   ★Все правила ограничены корневым классом .book-page: файл
   подключается на всех страницах сайта (как header.css), и без
   этой оговорки он менял бы чужие разделы.

   ★Подключение — обычным <link> перед </head>, то есть ПОСЛЕ
   инлайнового блока стилей шаблона. Тогда наши правила выигрывают
   по порядку и наращивать специфичность не нужно. Через ->css()
   подключать нельзя: шаблон заворачивает showCss() в
   <noscript id="deferred-styles">, и страница перестраивается на
   глазах после отрисовки.

   ★Брейкпоинт 1170, а не 767: у сайта мобильная раскладка описана
   как @media (max-width: 1170px), и шапка уже переведена на неё.
   При 767 диапазон 768–1170 остался бы со старой вёрсткой.

   ★Значения взяты со страницы ответа (textpages.css), а не из ТЗ,
   там где они расходятся: та страница сдана и принята владельцем,
   она и есть образец. Расхождения помечены отдельно.
   ============================================================ */

/* ---------- 0. Шрифт заголовка ------------------------------
   ★Fira Sans объявлен в answer-render.css, а тот подключается ТОЛЬКО
   на страницах ответа — на хабе шрифта не было вовсе, и заголовок
   набирался шаблонным DINRoundPro. Отсюда и «не похоже на страницу
   ответа»: там дело не в кегле, а в гарнитуре.
   ★Файл тот же самый, урезанный: полная кириллица, латиница, цифры,
   типографика, стрелки, № и § — всё, что встречается в заголовках.
   ★swap, а не block: block прячет текст до трёх секунд, и первый
   экран хаба открывался бы без заголовка. */
@font-face {
    font-family: 'Fira Sans';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('/templates/gdz/fonts/FiraSans-Regular.subset.woff2') format('woff2');
}

@font-face {
    font-family: 'Fira Sans';
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url('/templates/gdz/fonts/FiraSans-Medium.subset.woff2') format('woff2');
}

@font-face {
    font-family: 'Fira Sans';
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    src: url('/templates/gdz/fonts/FiraSans-SemiBold.subset.woff2') format('woff2');
}

@font-face {
    font-family: 'Fira Sans';
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url('/templates/gdz/fonts/FiraSans-Bold.subset.woff2') format('woff2');
}

/* ---------- 1. Токены ---------------------------------------
   ★Имена не пересекаются с восемью переменными шаблона
   (--text, --accent, --sep-bg, --card-bg и т.д.): у них другие
   значения, и совпадение имени перекрасило бы весь сайт.
   ★Шкала отступов кратна 4. Типографика живёт своей шкалой. */
.book-page {
    --page-padding: 16px;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;

    --tap-target-min: 44px;
    --control-height: 52px;
    --section-header-height: 56px;

    --radius-small: 8px;
    --radius-control: 12px;
    --radius-section: 16px;
    --radius-card: 20px;

    /* ★Тёмный ОДИН. Прежде их было два — #46424b у заголовков и
       #332f3a у текста, — и вместе с #33333a карточки оценки они
       давали три почти одинаковых чёрных, которые не складывались в
       шкалу. Теперь #1d1d1f для всего тёмного и #515158 для подписей.
       Тёплые цвета внутри самого ответа не трогаем, они по подложке.
       ★Прежняя записка: #46424b — цвет заголовков сайта, им
       набран H1 и на странице ответа. #332f3a — тёмный крошек и
       подвала, им же набрана цифра активного номера (5.81:1). */
    --color-heading: #1d1d1f;
    --color-text: #1d1d1f;
    --color-text-secondary: #515158;

    --color-border: #ddd8cf;
    /* ★Контраст поднят до нормы (решение владельца 17.08). Было
       #42b7c8 (2.38:1) и #3aa9b8 (2.78:1) при норме 3:1 для границ
       элементов управления и крупного жирного текста. Стало 3.13 и
       3.35 — тот же оттенок, темнее на полтона.
       ★Те же значения внесены в textpages.css: полоска номеров
       страницы ответа и сетка номеров хаба обязаны совпадать. */
    --color-accent: #2f9fb0;        /* рамки номеров */
    --color-accent-ink: #3499a8;    /* цифра номера — как на странице ответа */
    --color-accent-fill: #4dbcc9;   /* заливка текущего номера */
    --color-accent-soft: #e8f7f9;
    --color-warm: #fff9ed;
    --color-warm-line: #ffd983;
    --color-divider: #f8dea3;
    --color-danger: #ff4f4c;

    --transition-fast: 180ms;
}

/* ---------- 1b. Следствия правки разметки — на всех ширинах ---
   ★Эти три правила НЕ в медиазапросе намеренно. Разметка сменилась
   сразу на всех ширинах, и без них десктоп получил бы видимый брак,
   а трогать десктоп в этом заходе нельзя. Здесь ровно возврат к
   прежнему виду, а не новая вёрстка. */

/* Подпись закладки переехала из CSS-свойства content в разметку —
   иначе она печаталась бы дважды. */
/* ★Специфичность подобрана под шаблонное правило
   `.items .item .item-top_links .add2bookmark:after` — с меньшей
   подпись печаталась дважды. */
.book-page.items .item .item-top_links .add2bookmark::after,
.book-page.items .item .item-top_links .add2bookmark::before {
    content: none;
}

/* Закладка стала <button> и принесла с собой рамку и фон браузера. */
.book-page .item-top_links button {
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

/* ★Подпись кнопки «показать полностью» теперь в разметке. Прежде её
   печатало свойство content словом «ещё»; вместе они читались бы как
   «Показать полностью ещё». */
.book-page .h1-more::after,
.book-page .h1-more::before { content: none; }

.book-page .h1-more {
    position: static;
    padding: 0;
    background: none;
    border: 0;
    color: var(--color-accent-ink, #3aa9b8);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

/* ★Кнопку показывает и прячет скрипт — инлайновым стилем, который
   сильнее любого нашего селектора. Поэтому здесь только внешний вид;
   условие показа живёт в скрипте (заходом по JS: сейчас он ошибочно
   считает заголовок обрезанным и на десктопе). */

/* ---------- 2. Общая ось ------------------------------------ */
@media (max-width: 1170px) {

    /* ★Ось 16px поднимаем у контейнера шаблона (у него 15px), а не
       у каждого блока: тогда крошки, карточка, поиск, разделы и
       рейтинг встают на одну линию сами. :has() нужен, чтобы не
       задеть остальные страницы сайта. */
    #main > .container:has(.book-page) {
        /* ★Значение числом, а не var(): токены объявлены на .book-page,
           а контейнер — его предок, переменная там ещё не видна и
           padding молча обнулился бы. */
        padding-left: 16px;
        padding-right: 16px;
    }

    /* ★У .padding__h свои 6% в диапазоне 476–768px. Из-за них на
       480px цепочка крошек уезжала вправо на 27px. Гасим — ось
       задаёт контейнер. */
    #main > .container:has(.book-page) .padding__h {
        padding-left: 0;
        padding-right: 0;
    }

    /* ★Безымянный div шаблона объявлен display:inline-block и
       подгоняется под самое широкое содержимое, поэтому широкий
       блок распирает не внутренний скроллер, а всю страницу. */
    #content .sidebar-block > div:has(.book-page) {
        max-width: 100%;
    }
}

/* ---------- 3. Разделители и ритм верха ---------------------- */
@media (max-width: 1170px) {

    /* ★Жёлтые линии над и под карточкой — это границы .item, а не
       <hr>. Толщина 1px: на странице ответа принята она. */
    .book-page .item.item__full {
        border-width: 1px 0;
        border-color: var(--color-divider);
        padding: var(--space-3) 0 var(--space-4);
        margin-bottom: 0;
    }

    /* от крошек до линии — 8, как на странице ответа */
    #main > .container:has(.book-page) .padding__h:has(.breadcrumbs) {
        margin-bottom: var(--space-2);
    }
}

/* ---------- 4. Карточка учебника ---------------------------- */
@media (max-width: 1170px) {

    /* ★Одна грид-сетка на весь верх: заголовок → действия →
       обложка с данными → описание. Раскладка не зависит от
       порядка в разметке, а порядок там свой: обложка обязана
       стоять перед заголовком, иначе на десктопе float её не
       обтечёт. */
    .book-page .item__full .item-desc {
        display: grid;
        /* ★Имена областей — те же cover / toc / intro, что у шаблона.
           Так шаблонные `grid-area: cover` остаются в силе: они
           объявлены с большей специфичностью, и переставить обложку
           своими grid-column/grid-row всё равно не вышло бы. */
        grid-template-columns: 96px minmax(0, 1fr);
        /* ★Три строки. Данные об учебнике и закладка лежат в одном
           элементе разметки (.item-meta) и делить их по строкам сетки
           не нужно: раньше они стояли в разных строках, обложка была
           растянута на обе, и грид раздавал ей лишнюю высоту — зазор
           «год → закладка» гулял от ширины экрана (27 на 390, 18 на
           360, 3 на 320). */
        grid-template-areas:
            'title title'
            'cover toc'
            'intro intro';
        column-gap: var(--space-4);
        row-gap: 0;
        align-items: start;
        padding-left: 0;
        background: none;
    }

    .book-page .page-title-wrap { grid-area: title; margin-bottom: 0; }

    /* правая колонка целиком: данные об учебнике плюс закладка */
    /* ★Специфичность выше базового `.book-page .item-meta { display:
       contents }` — то правило объявлено ниже по файлу и иначе
       выигрывало бы по порядку. */
    .book-page .item__full .item-meta {
        display: block;
        grid-area: toc;
        margin-top: 14px;
    }

    /* ★Отступ до закладки — обычные 8px внутри блока. Вместе с
       полулидингами строки года (2.4) и подписи (1.6) дают ровно 12
       между видимыми знаками, и это число не зависит ни от ширины
       экрана, ни от числа строк у авторов, ни от будущей строки
       «ФГОС»: замерено на 320/360/390/430 — везде 12.4. */
    .book-page.items .item .item-top_links {
        display: flex;
        margin: 8px 0 0;
        min-height: 0;
    }

    /* ★Коробки вокруг обложки и данных нет намеренно. Зону отделяют
       те же жёлтые линии, что на странице ответа: одна под крошками,
       вторая — после текста описания. Тёплый прямоугольник со своим
       скруглением спорил и с плашками разделов ниже, и со страницей
       ответа, где такого приёма нет вовсе. */
    .book-page.items .item.item__full .item-img {
        margin-top: 14px;      /* H1 → карточка, как на странице ответа */
        margin-bottom: 0;
    }

    .book-page.items .item.item__full .item-authors { margin: 0; }
}

/* Обложка: одна аккуратная поверхность вместо стопки листов */
@media (max-width: 1170px) {

    /* ★Прежде было два элемента с одинаковой тенью, сдвинутых на
       5px друг относительно друга, — отсюда «несколько наложенных
       листов». Оставляем одну поверхность. */
    .book-page .item.item__full .item-img {
        /* ★96, а не 112: при 112 высоту строки держала обложка (139px),
           и уплотнение меты уходило впустую. */
        width: 96px;
        left: 0;
        top: 0;
        float: none;
    }

    .book-page .item .item-img > div {
        padding-bottom: 124%;      /* доля обложки, чтобы не дёргалась вёрстка */
        border-radius: 3px;
        box-shadow: none;          /* второй слой тени — та самая «стопка листов» */
    }

    /* ★Подложка ровно та же, что на странице ответа, только в масштабе.
       Рецепт снят с хаба замером: картинка 121, белое поле вокруг 15
       (12.4% ширины), скругление 3px, мягкая тень. Здесь общая ширина
       112, значит картинка 90 и поле 11 — та же пропорция.
       ★Поле сделано border'ом, а не padding'ом: при box-sizing:
       border-box padding ужал бы картинку внутрь заданной ширины. */
    .book-page .item .item-img > div > div {
        left: 0;
        top: 0;
        border: 9px solid #fff;
        border-radius: 3px;
        background: #fff;
        box-shadow: 0 4px 12px rgba(194, 196, 201, .42);
    }
}

/* Данные об учебнике */
@media (max-width: 1170px) {
    /* ★Свёрнуто, как на странице ответа: там об этом сказано прямо —
       авторы и год дублируют H1 и на мобильном стоили 90px первого
       экрана. */
    .book-page .item.item__full .item-authors {
        font-size: 14px;
        line-height: 1.35;
        color: var(--color-text);
    }

    .book-page .item-authors > div + div { margin-top: var(--space-1); }

    .book-page .item-authors-label {
        color: var(--color-text-secondary);
    }

    .book-page .item-authors-value { color: var(--color-text); }
}

/* ---------- 5. Заголовок ------------------------------------ */
@media (max-width: 1170px) {

    /* ★Кегль 22, а не 24 из ТЗ: на странице ответа H1 набран 22, и
       хаб не должен оказаться крупнее.
       ★Обрезки в две строки нет намеренно. Кнопка «ещё» на хабе
       никогда не показывалась (display:none и ни строчки скрипта),
       то есть длинный заголовок молча резался без возможности его
       раскрыть. Полный заголовок в три строки лучше обрезанного в
       две без выхода. */
    /* ★Ноль снизу: расстояние до карточки задаёт она сама (14px у
       обложки), иначе отступы складываются и выходит 26. */
    .book-page .page-title-wrap {
        margin: 0;
        position: static;
    }

    /* ★Обрезка до трёх строк, а не до двух: при 22px в две строки не
       помещается даже обычный заголовок вроде «ГДЗ по русскому языку
       5 класс к учебнику Ладыженская, Баранов», и кнопка «показать
       полностью» вылезала бы почти на каждой странице. */
    /* ★Один в один со страницей ответа: та же гарнитура, кегль, цвет,
       межбуквенный интервал и высота строки. Значения не выведены
       заново, а перенесены из textpages.css §2. */
    /* ★text-wrap: BALANCE, а не pretty. Базовый стиль .page-title
       просит balance, и это правило его перебивало. Замер по 16
       реальным заголовкам базы на 320/343/368/393 (64 раскладки):
       строк одинаково (162), под обрезку в 3 строки уходит одинаково
       (4), переполнений нет ни там ни там, НО коротких хвостов
       (последняя строка уже 30% колонки) — 0 против 4 у pretty.
       ★Жалоба владельца 23.08 («ФГОС уехал на третью строку, а справа
       место») — это как раз pretty: на колонке 368 он давал
       64%/64%/36%, balance даёт 43%/59%/63% — строки растут, дыры
       внизу нет.
       ★pretty к тому же ведёт себя по-разному в движках: в Chromium
       он сироту вычищает, в Safari владельца — нет. balance
       поддержан обоими. */
    .book-page .page-title,
    .book-page h1.page-title {
        font: 700 22px/1.3 'Fira Sans', sans-serif;
        color: #1d1d1f;
        letter-spacing: .01em;
        margin: 0;
        text-wrap: balance;
        -webkit-line-clamp: var(--h1-lines, 3);
    }

    .book-page .page-title--long { --h1-lines: 3; }

    .book-page .item-title_mobile.open .page-title,
    .book-page .page-title-wrap.open .page-title {
        -webkit-line-clamp: unset;
    }
}

/* ---------- 6. Действия под заголовком ---------------------- */
@media (max-width: 1170px) {
    /* ★Ряд действий остался один — закладка. «Сообщить об ошибке» с
       хаба убрана: указывать ошибке здесь не на что, ответа ещё не
       видно (решение владельца 16.08). Отступ сверху задан выше, в
       блоке карточки, и повторять его здесь нельзя — обнулит. */
    .book-page.items .item .item-top_links,
    .book-page .item-top_links {
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        text-align: left;
        padding: 0;
    }

    /* ★Закладка — компактное вторичное действие, без рамки, фона и
       контейнера: контурная кнопка читалась как главное действие
       страницы, хотя это второстепенный переключатель.
       ★Зона нажатия 44px прозрачная — набрана внутренним отступом и
       погашена отрицательным полем, поэтому на ритм не влияет. */
    .book-page.items .item .item-top_links .add2bookmark {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        min-height: 0;
        height: auto;
        padding: 12px 0;
        margin: -12px 0;
        border: 0;
        background: none;
        color: var(--color-text-secondary);
        font-size: 16px;
        font-weight: 600;
        text-decoration: none;
    }

    /* ★Пропорция файла 17:20. Задавать 20×20 нельзя — значок
       растягивает по ширине на 17.6%, и он кажется крупным. */
    .book-page.items .item .item-top_links .add2bookmark .svg,
    .book-page.items .item .item-top_links .add2bookmark svg {
        width: 17px;
        height: 20px;
        margin: 0;
        flex: 0 0 auto;
    }

    .book-page.items .item .item-top_links .add2bookmark svg * {
        fill: var(--color-text-secondary);
    }

    /* состояние «в закладках»: цветом отмечен только значок */
    .book-page.items .item .item-top_links .add2bookmark.add2bookmark__delete svg * {
        fill: var(--color-accent);
    }

}

/* ---------- 7. Описание учебника ---------------------------- */
@media (max-width: 1170px) {
    .book-page .item.item__full .item-text {
        margin-top: var(--space-4);
        font-size: 17px;
        line-height: 1.45;
        color: var(--color-text-secondary);
    }

    /* ★Обрезка повешена на ИДЕНТИФИКАТОР, а не на класс
       item-text--long. Скрипт шаблона проверяет переполнение и, не
       найдя его, СНИМАЕТ этот класс — а высоту задавал именно он.
       Получается защёлка в одну сторону: класс снят → обрезки нет →
       переполнения нет никогда → описание раскрыто целиком, кнопка
       спрятана. На идентификаторе обрезка держится независимо.
       ★Ровно три строки: 1.45 × 3. Считать надо от строки АБЗАЦА —
       у шаблона на <p> внутри описания своя line-height: 20px, она не
       наследуется, и прежние calc(20px*3) были посчитаны от неё. */
    .book-page #book-intro {
        position: relative;
        overflow: hidden;
        max-height: 4.35em;
    }

    .book-page #book-intro p { line-height: 1.45; }

    .book-page #book-intro.open { max-height: none; }

    /* ★Размытие букв снято совсем: backdrop-filter делал последнюю
       строку похожей на дефект отрисовки. Остаётся лёгкий градиент. */
    .book-page #book-intro::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 10px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .75));
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        pointer-events: none;
    }

    .book-page #book-intro.open::after { display: none; }

    .book-page .item-text--long__toggle {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        color: var(--color-accent-ink);
        font-size: 16px;
        font-weight: 600;
        text-decoration: none;
        background: none;
        border: 0;
        cursor: pointer;
        /* зона нажатия 44px, погашенная полями */
        min-height: 0;
        padding: 12px 0;
        margin: -6px 0 -12px;
    }

    .book-page .item-text--long__toggle svg {
        width: 18px;
        height: 18px;
        position: relative;
        /* ★Опущена на 2.5px. align-items: center равняет коробки, а у
           кириллических прописных оптический центр ниже центра строки —
           без поправки стрелка казалась поднятой и оторванной. */
        top: 2.5px;
        /* ★Гасит пустоту ВНУТРИ значка: рисунок галочки занимает
           середину квадрата, по краям у него по четверти ширины. */
        margin-left: -4px;
        transition: transform var(--transition-fast) ease;
    }

    .book-page .open + .item-text--long__toggle svg { transform: rotate(180deg); }
}

/* ---------- 8. Рекомендуем также ----------------------------
   ★Гарнитура здесь Fira Sans — та же, что на странице ответа. Хаб
   переезжает на неё поблочно; шапка, меню и подвал остаются
   шаблонными, они сквозные.
   ★Карточка не должна быть выше обложки: раньше она перерастала её
   на 58px. Высота обложки 109, значит на текст ровно столько же:
   название до двух строк (40) + 4 + авторы до двух строк (38) + 4 +
   год (19). Обрезка многоточием, а не перенос: длинный список
   авторов иначе снова растянет карточку. */
@media (max-width: 1170px) {
    .book-page .associated { margin-top: var(--space-3); }

    /* ★20, а не 22: при 22 заголовок блока был ровно как H1 — тот же
       кегль, вес и цвет, — и страница теряла главный заголовок.
       Лестница хаба: H1 22 → заголовок блока 20 → номер 19 →
       описание 17 → мета 14. */
    .book-page .associated h2 {
        font-family: 'Fira Sans', sans-serif;
        font-size: 20px;
        font-weight: 700;
        line-height: 1.25;
        letter-spacing: .01em;
        color: var(--color-heading);
        margin: 0 0 var(--space-4);
    }

    .book-page .associated .row {
        display: flex;
        gap: var(--space-3);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin: 0;
        padding-bottom: var(--space-1);
    }

    .book-page .associated .row::-webkit-scrollbar { display: none; }

    .book-page .associated .item {
        flex: 0 0 304px;
        max-width: 304px;
        display: grid;
        grid-template-columns: 88px minmax(0, 1fr);
        column-gap: var(--space-4);
        align-items: start;
        scroll-snap-align: start;
        margin: 0;
        padding: var(--space-4);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-card);
        background: #fff;
    }

    .book-page .associated .row > .item:only-child {
        flex: 1 1 auto;
        max-width: none;
    }

    .book-page .associated .item .item-img {
        width: 88px;
        float: none;
        left: 0;
        top: 0;
        margin: 0;
    }

    /* ★Внутри карточки гарнитура шаблонная. На Fira Sans здесь только
       заголовок блока — решение владельца: крупные заголовки живут в
       Fira, мелкий текст остаётся в DINRoundPro, как в карточке
       учебника выше. */
    .book-page .associated .item .item-desc {
        width: auto;
        float: none;
        padding: 0;
    }

    .book-page .associated .item .item-desc > a {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        font-size: 16px;
        font-weight: 600;
        line-height: 1.25;
        color: var(--color-heading);
        margin-bottom: var(--space-1);
    }

    /* ★Строки «авторы:» в рекомендациях НЕТ В РАЗМЕТКЕ: 361.xsl получил
       параметр noAuthors, и 359-й зовёт карточку с ним (19.08). До этого
       блок печатался всегда и прятался здесь стилем — правило удалено
       как осиротевшее ИЗ-ЗА ЭТОЙ ЖЕ правки. История вопроса: фамилии
       переехали в ссылку, и полный список под ней стоял повтором,
       обрезанным клампом до половины (76px при видимых 38). */

    .book-page .associated .item .item-year {
        margin-top: var(--space-1);
        font-size: 14px;
        line-height: 1.35;
        color: var(--color-text-secondary);
    }

    /* ★Зона между жёлтыми линиями симметрична: 12 сверху и 12 снизу,
       как у карточки учебника. */
    .book-page .associated + hr {
        margin: var(--space-3) 0;
        height: 1px;
        background: var(--color-divider);
        border: 0;
    }
}

/* ---------- 9. Быстрый поиск -------------------------------- */
@media (max-width: 1170px) {
    /* ★Сверху было 24, снизу 16 — перевёрнутый ритм: поле визуально
       липло к разделителю над ним, хотя относится к разделам под ним.
       Теперь поровну. */
    .book-page .quick_answer_search {
        position: relative;
        /* 12, не 16 — единый шаг блока номеров (владелец 19.08);
           до плашки достаёт именно этот низ: между ними пустой
           js-banner, и margin-top .item-sections не суммируется */
        margin: 0 0 var(--space-3);
    }


    .book-page .quick_answer_search input[type="search"] {
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        height: var(--control-height);
        /* ★48 справа, а не 44: крестик отодвинут от края на 4 (см. ниже),
           и текст обязан разъехаться на столько же. */
        padding: 0 48px 0 var(--space-4);
        /* ★Рамка и фокус — ровно как у поиска в шапке: 1px #f0c96f по
           тёплому #fff9ed. Прежние 1.5px оставляли под кольцом
           полпикселя старого цвета (кольцо кладётся с отступом −1), и
           снизу это было особенно заметно. */
        border: 1px solid #f0c96f;
        border-radius: var(--radius-control);
        background: var(--color-warm);
        color: var(--color-text);
        font-size: 17px;
        line-height: var(--control-height);
    }

    /* ★WebKit рисует у type=search собственный крестик — рядом с
       нашим их было бы два. */
    .book-page .quick_answer_search input[type="search"]::-webkit-search-cancel-button,
    .book-page .quick_answer_search input[type="search"]::-webkit-search-decoration {
        -webkit-appearance: none;
        appearance: none;
        display: none;
    }

    /* подсказка тем же цветом, что в шапке */
    .book-page .quick_answer_search input::placeholder {
        color: rgba(0, 0, 0, .55);
    }

    /* ★Фокус — как в шапке: рамка темнеет, поверх неё кольцо той же
       тёплой гаммы. Бирюзовое кольцо на жёлтом поле читалось как
       чужое, да и полпикселя жёлтого из-под него оставалось видно.
       ★outline не занимает места, поэтому поле не «прыгает». */
    .book-page .quick_answer_search input[type="search"]:focus,
    .book-page .quick_answer_search input[type="search"]:focus-visible {
        /* ★Жёлтый, как у поиска в шапке: два поля на одной странице
           обязаны показывать фокус одинаково. Бирюзовый #35859d
           (4.21:1) предлагался и отклонён владельцем 18.08.2026 —
           см. записку в header.css: 2.06 и 2.37 при норме 3:1
           приняты сознательно. */
        border-color: #e5ab2c;
        outline: 2px solid #d99e1f;
        outline-offset: -1px;
    }

    /* ★Цвет и размер знака — общие с крестиком шапки: #6e6e76 вместо
       прежнего --color-text-secondary (#515158). См. раздел «ЕДИНЫЙ
       КРЕСТИК» в конце файла. */
    .book-page .quick-answer-clear {
        position: absolute;
        /* ★Не вплотную к краю. Плашка 36 в зоне 44 оставляет по 4 внутри
           кнопки, и при right:0 справа от неё было 4, а сверху и снизу
           8 ((52−36)/2) — плашка читалась прижатой к рамке поля.
           4 здесь дают ровно 8 со всех сторон. */
        right: 4px;
        top: 0;
        width: var(--tap-target-min);
        height: var(--control-height);
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        background: none;
        color: #6e6e76;
        cursor: pointer;
    }

    /* ★Показом крестика управляет CSS, а не скрипт: пока поле
       пустое, совпадает :placeholder-shown. Плагин подсказок
       easy-autocomplete это поле НЕ оборачивает (он привязан только
       к #search-input в шапке), поэтому соседний селектор работает. */
    .book-page .quick_answer_search input:placeholder-shown ~ .quick-answer-clear {
        display: none;
    }

    /* ★Подпись относится к полю, а не к разделам под ней. Было
       наоборот: 16 сверху и 8 снизу, и она читалась как заголовок
       следующего блока. Теперь 8 сверху, 20 снизу.
       ★Отрицательное поле сверху отнимает от отступа самого поля,
       чтобы не заводить второй источник одного и того же зазора. */
    /* ★Нижний зазор набран ВНУТРЕННИМ отступом, а не полем: где-то в
       шаблоне у этого элемента margin-bottom перебивается на 8px, и
       найти перебивающее правило перечислением стилей не вышло —
       браузер не отдаёт список правил для склеенного файла. Padding
       никем не оспаривается и даёт тот же зазор. */
    .book-page .quick-answer-status {
        margin: -8px 0 0;
        padding-bottom: 12px;
        color: var(--color-text-secondary);
        font-size: 15px;
        line-height: 1.4;
    }

    .book-page .quick-answer-status:empty { display: none; }

    /* ★Оформление пустого результата (сообщение, значок, «Показать все
       номера») ВЫНЕСЕНО из медиазапроса — раздел «ПУСТОЙ РЕЗУЛЬТАТ» в
       конце файла. Здесь оно доставало только до 1170, и на десктопе
       кнопка показывалась сырой: рамка 2px outset, фон #efefef, чёрный
       текст, а сообщение шло в строку вместо флекса. */
}

.book-page .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---------- 10. Аккордеоны ---------------------------------- */
@media (max-width: 1170px) {
    /* ★Единый шаг 12 по всему блоку номеров (решение владельца
       19.08.2026): до этого жили четыре шага вперемешку — 16 у поиска,
       8 у вложенных, 12 у сетки сверху и 24+8=32 после сетки. */
    .book-page .item-sections { margin-top: var(--space-3); }

    .book-page .item-section { margin: 0; }

    /* ★Отбивку между разделами держит НЕ соседний селектор
       `.item-section + .item-section`. Между разделами первого уровня
       XSL вставляет рекламный слот (`js-banner` 187), и соседство
       разрывается: на странице без аккордеона плашка следующего
       раздела вставала вплотную к последнему номеру предыдущего —
       зазор ровно 0, читалось как наезд.
       ★Поэтому отступ снизу задаёт сама сетка номеров: она есть у
       любого раздела с номерами, и никакой сосед на неё не влияет. */
    .book-page .item-section + .item-section { margin-top: var(--space-3); }

    /* ★РАЗДЕЛ ДЕРЖИТ НИЖНИЙ ОТСТУП САМ (два бага владельца на Канакиной,
       18.08). Отбивку под разделом по замыслу выше даёт сетка номеров,
       но аккордеон прячет её ВМЕСТЕ с отступом — и свёрнутое слипалось
       со следующей плашкой в ДВУХ местах: свёрнутая часть с плашкой
       следующей части, и свёрнутая ПОСЛЕДНЯЯ вложенная секция («Наши
       проекты») с плашкой следующей части — низ раскрытой части
       оказывался голым. На Ладыженской не проявлялось: там всё раскрыто
       по умолчанию.
       ★Часть держит 12 ВСЕГДА, не только свёрнутой: раскрытая часть,
       оканчивающаяся свёрнутой вложенной, иначе снова без низа. Двойных
       зазоров нет — соседние отступы схлопываются в больший, поэтому
       рядом с сеткой (24) эти 12 исчезают.
       ★Вложенным — единый шаг 12 (было 8; решение владельца 19.08),
       только свёрнутым: у раскрытых низ делает сетка.
       ★Перебор состояний после выравнивания: 12 между вложенными,
       12 у плашки части, 12 после раскрытых — нулевых стыков нет. */
    .book-page.book-accordion .item-sections > .item-section {
        margin-bottom: var(--space-3);
    }

    .book-page.book-accordion .item-section .item-section:not(.active) {
        margin-bottom: var(--space-3);
    }

    /* ★ЗАЗОР ПЕРЕД ПЛАШКОЙ БОЛЬШЕ, ЧЕМ ПОД НЕЙ (владелец 24.08).
       Было поровну — 12 сверху и 12 снизу, — и плашка висела ровно
       посередине между двумя сетками номеров, не принадлежа ни одной.
       Относится же она к тому, что ПОД ней. Стало 24 перед плашкой при
       12 под ней (низ даёт .item-answers margin-bottom).
       ★Ловушка 19.08 («намеренно неравные 12/24 вместе с margin-top
       вложенных давали 32») к этому рычагу НЕ относится: тогда крутили
       нижнее поле СЕТКИ, и оно складывалось с отступом раздела. Здесь
       меняется сам раздел — замер показал ровную укладку без удвоения:
       20 → 20, 24 → 24, 28 → 28. */
    .book-page.book-accordion .item-section .item-section {
        margin-top: var(--space-6);
    }

    /* ★Исключение: плашка СРАЗУ под плашкой родителя («Контрольные
       вопросы и задания» → «Часть 1»). Плиток между ними нет, и 24
       читались бы разреженно — оставляем прежние 12. */
    .book-page.book-accordion .item-section .item-section:first-child {
        margin-top: var(--space-3);
    }

    /* ★Вложенный раздел сдвигается ЦЕЛИКОМ — вместе со своими
       номерами (решение владельца 17.08: в больших учебниках сетка
       помогает быстрее находить нужную вложенность).
       ★Отступ на .item-section, а не на плашке: тогда плашка и её
       номера совпадают краями. Сдвиг накапливается по вложенности
       сам: второй уровень 24, третий 32.
       ★Цена, замеренная на живой странице: кнопка номера сужается —
       65.2 на первом уровне, 63.6 на втором, 62 на третьем (390px).
       Количество номеров в ряд при этом НЕ меняется ни на 320, ни на
       360, ни на 390 — проверено. С полоской номеров на странице
       ответа (65) точно совпадает только первый уровень. */
    .book-page.book-accordion .item-section .item-section {
        padding-left: var(--space-2);
    }

    /* Общий вид кнопки раздела */
    .book-page.book-accordion .item-section .item-section_name,
    .book-page .item-section .item-section_name {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: var(--control-height);
        margin: 0;
        padding: var(--space-3) 44px var(--space-3) var(--space-4);
        position: relative;
        border: 0;
        border-radius: var(--radius-control);
        background: var(--color-accent-soft);
        color: var(--color-text);
        /* ★Отдельными свойствами, а не сокращением `font: 700 18px/1.3 inherit`:
           в сокращении font семейство inherit недопустимо, браузер
           отбрасывает объявление целиком, и кегль остаётся
           унаследованным. На странице ответа на этом уже обожглись —
           четыре правила молча не работали. */
        font-size: 18px;
        font-weight: 700;
        line-height: 1.3;
        text-align: left;
        cursor: pointer;
        -webkit-user-select: none;
        user-select: none;
    }

    /* Первый уровень — издание или часть.
       ★ЦВЕТ ЗДЕСЬ НЕ ЗАДАЁМ, и это принципиально. Цвет плашки —
       настройка админки: по умолчанию голубая, а пипетка «Выделить
       раздел» красит её в тёплую (правило шаблона с !important).
       Пока я занимал тёплый под «первый уровень», пипетка на верхнем
       уровне не давала ничего — он и так был тёплым.
       ★За уровень отвечают высота, радиус, кегль и сдвиг. */
    /* ★Первый уровень — тёплый. Выбор не случайный: номера набраны
       бирюзовым по белому, и бирюзовая плашка прямо над ними сливается
       с рядом кнопок (видно на «Часть 2. Страницы»). Тёплый отделяет
       издание от содержимого и рифмуется с остальным тёплым на
       странице — полем поиска и жёлтыми линиями. */
    .book-page .item-sections > .item-section > .item-section_name {
        min-height: var(--section-header-height);
        border-radius: var(--radius-section);
        /* ★#fdf4e1 — тон плашки раздела ВНУТРИ ответа (решение владельца
           19.08: «как в плашке ответа»). Был --color-warm #fff9ed — чуть
           белее; владелец увидел два разных кремовых на соседних экранах.
           Ответный тон менять нельзя (запечён в картинки), сведение — в
           эту сторону. ★НЕ через --color-warm: переменную делит поле
           быстрого поиска, его не трогаем. */
        background: #fdf4e1;
        font-size: 20px;
    }

    /* Третий уровень — белый с тонкой рамкой */
    .book-page .item-section .item-section .item-section .item-section_name {
        background: #fff;
        border: 1px solid var(--color-border);
        font-size: 17px;
    }

    /* ★Пипетка «Выделить раздел» больше не влияет на вид (решение
       владельца 17.08): цвет плашки определяет только уровень
       вложенности. Шаблонное правило с !important, которое красило
       выделенный раздел в тёплый, снимается патчером —
       см. apply_bookpage.sh, шаг «снятие подсветки разделов». */

    /* Стрелка */
    .book-page.book-accordion .item-section > .item-section_name::after {
        right: var(--space-4);
        width: 20px;
        height: 20px;
        margin-top: -10px;
        transition: transform var(--transition-fast) ease;
    }

    .book-page.book-accordion .item-section.active > .item-section_name::after {
        transform: rotate(-180deg);
    }

    .book-page .item-section_name:focus-visible {
        outline: 2px solid #35859d;
        outline-offset: 2px;
    }
}

/* ---------- 11. Сетка номеров ------------------------------- */
@media (max-width: 1170px) {

    /* ★Grid вместо inline-block с фиксированными 61px: колонки
       считает браузер, ряд встаёт на общую ось.
       ★Зазор 8, а не 12: на 390px это даёт кнопку 65.2px — ровно
       ту, что в полоске номеров страницы ответа. */
    /* ★display задаём ОТДЕЛЬНО от геометрии, и это не стилистика.
       Свёрнутый раздел шаблон прячет правилом
       `.book-accordion .item-section > .item-answers { display: none }`.
       Пока здесь стояло безусловное `display: grid` с большей
       специфичностью, оно это правило перебивало — и вложенные разделы
       перестали сворачиваться вообще: номера оставались на экране.
       Работал только верхний уровень, потому что он скрывает соседние
       РАЗДЕЛЫ, а не свои номера. */
    .book-page .item-sections .item-answers {
        grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
        gap: var(--space-2);
        /* ★Единый шаг 12 (решение владельца 19.08; прежние «намеренно
           неравные» 12/24 вместе с margin-top вложенных давали 32).
           Низ 12 нужен только БЕЗ аккордеона: рекламный слот рвёт
           соседний селектор, и кроме сетки низ раздела дать некому. */
        margin: var(--space-3) 0 var(--space-3);
    }

    /* ★С аккордеоном низ сетки НУЛЕВОЙ: отступ даёт margin-top
       следующей секции (12). Маргины сетки и секции лежат по разные
       стороны .acc-body (display:grid) и НЕ схлопываются — ненулевой
       низ сетки складывался бы с шагом секции в 24. */
    .book-page.book-accordion .item-sections .item-answers {
        margin-bottom: 0;
    }

    /* ★Ритм хаба с ИЕРАРХИЕЙ (Тим, 25.08): «единый шаг 12» (решение
       владельца 19.08) делал шов между секциями равным внутреннему —
       плашка липла к чужим плиткам. Теперь: внутри секции как было,
       МЕЖДУ секциями верхнего уровня 24, поиск → первая плашка 20.
       Вложенных (Части КВ) не касается — у них свой шаг 12.
       ★Селектор «~», не «+»: между секциями XSL вставляет js-banner
       (слот 187), соседний «+» через него не матчится. */
    .book-page .item-sections > .item-section ~ .item-section {
        margin-top: 24px;
    }
    .book-page .quick_answer_search {
        margin-bottom: 20px;
    }

    /* хаб без аккордеона: сворачивать нечего, номера видны всегда */
    .book-page:not(.book-accordion) .item-sections .item-answers {
        display: grid;
    }

    /* ★с аккордеоном сетка безусловная: видимость решает СЕКЦИЯ через
       .acc-body (раздел 21), а не display самой сетки. Прежний путь
       `.item-section.active > .item-answers` умер вместе с прямым
       соседством — контент обёрнут в .acc-body>.acc-inner (359.xsl). */
    .book-page.book-accordion .acc-inner > .item-answers {
        display: grid;
    }

    .book-page .item-section a.item-answer {
        display: flex;
        align-items: center;
        justify-content: center;
        width: auto;
        height: var(--control-height);
        margin: 0;
        padding: 0 var(--space-2);
        border: 1.5px solid var(--color-accent);
        border-radius: var(--radius-control);
        background: #fff;
        color: var(--color-accent-ink);
        /* ★Отдельными свойствами, а не сокращением `font: 700 19px/1 inherit`:
           в сокращении font семейство inherit недопустимо, браузер
           отбрасывает объявление целиком, и кегль остаётся
           унаследованным. На странице ответа на этом уже обожглись —
           четыре правила молча не работали. */
        font-size: 19px;
        font-weight: 700;
        line-height: 1;
        text-decoration: none;
        overflow: hidden;
        /* ★Именно transform и background, а не all: transition: all
           на тысяче кнопок заставляет браузер следить за каждым
           свойством. */
        transition: background var(--transition-fast) ease,
                    color var(--transition-fast) ease;
    }

    /* ★Длинное обозначение — две колонки, кегль КАК У ВСЕХ (Тим, 25.08):
       span-2 плитка и на 320px даёт ~140px, худшая подпись «Задание №3»
       на 19px занимает 109px — замер. Прежние 16px мельчили без нужды.
       nowrap — перенос по дефису исключён (парно с десктопным блоком). */
    .book-page .item-section a.item-answer.lg {
        grid-column: span 2;
        white-space: nowrap;
    }

    /* ★Отклик на нажатие: фон плюс сдвиг на пиксель. Один фон
       #f2fbfc на белом почти не виден, а на телефоне это единственное
       подтверждение, что палец попал. Сдвиг взят у кнопок страницы
       ответа — там он уже принят.
       ★Класс is-pressed — тот же вид для показа состояния в
       просмотрщике: псевдокласс :active снаружи не включить. */
    .book-page .item-section a.item-answer:active,
    .book-page .item-section a.item-answer.is-pressed {
        background: #e8f7f9;
        transform: translateY(1px);
    }

    .book-page .item-section a.item-answer:focus-visible {
        outline: 2px solid #35859d;
        outline-offset: 2px;
    }

    /* ★Текущий номер: заливка фирменная, цифра тёмная. Белым по
       этому голубому выходило 2.25:1 при норме 4.5. Решение принято
       на странице ответа, здесь повторяем один в один.
       ★Внутреннего кольца здесь НЕТ, и это осознанный отказ от
       буквального чтения ТЗ §13 («не обозначать состояние только
       цветом»). Кольцо давало три контура подряд — внешняя рамка,
       белая внутренняя, заливка, — кнопка выглядела мельче и
       перегруженнее соседних, а главное: белая внутренняя обводка
       читается как фокус с клавиатуры, а не как выбранное состояние.
       Роли разведены иначе, и каждая опирается на свой признак:
         обычная      — белый фон, бирюзовые рамка и цифра;
         наведение    — светло-бирюзовая заливка;
         выбранная    — сплошная бирюзовая заливка, тёмная цифра;
         focus-visible — отдельное ВНЕШНЕЕ кольцо, только с клавиатуры.
       То есть у фокуса свой приём, не занятый ничем другим. */
    .book-page .item-section a.item-answer.current {
        background: var(--color-accent-fill);
        border-color: var(--color-accent-ink);
        color: var(--color-text);
    }
}

@media (hover: hover) and (max-width: 1170px) {
    .book-page .item-section a.item-answer:hover {
        background: var(--color-accent-soft);
        color: var(--color-text);
    }
}

/* ---------- 12. Оценка решебника ----------------------------
   ★Форма карточки взята со страницы ответа: та же подложка #f2eee7,
   то же скругление 16, отбивка 24. Своей линии и рамки у блока нет —
   карточка сама себе граница. Утки здесь не будет: на хабе оценивают
   решебник целиком, а не конкретный ответ.
   ★Звёзды — орган ввода. Средняя оценка живёт строкой под ними.
   ★Высота карточки только по содержимому: никаких min-height. Она
   была высокой не сама по себе — её растягивала кнопка «Поделиться»,
   которая теперь вынесена наружу.
   ============================================================ */
@media (max-width: 1170px) {
    .book-page .book-socials { margin: var(--space-6) 0 var(--space-7); }

    /* ★У контейнера .items шаблон держит собственный нижний отступ 30px.
       Вместе с нашими 32 до подвала получалось 62 — пустая полоса,
       которая читается как «блок не догрузился». */
    .book-page.items { padding-bottom: 0; }

    .book-page .book-rate {
        display: block;
        /* ★Снизу 14, а не 20. По коробкам было ровно 20/20, но глаз
           меряет буквы: сверху от края подложки до верха букв
           заголовка 24.1, снизу от низа букв нижней строки до края —
           29.8. Разницу в 5.7 даёт свободное место под базовой линией:
           у «4,8 из 5 · 1 374 оценки» вниз уходит только запятая
           (2.7px), а у заголовка «решебник» — хвост «р» (3.9px), и
           плюс разный полулидинг. */
        padding: var(--space-5) var(--space-5) 14px;
        /* 14px — ровно как у блока с уткой на этой ширине (16 у него
           только от 900px). */
        border-radius: 14px;
        text-align: center;
        background: #f2eee7;
        /* ★Гарнитура Fira Sans — как в карточке оценки на странице
           ответа. На шаблонном DINRoundPro то же начертание 500
           выглядит заметно легче, и две одинаковые по смыслу карточки
           читались по-разному. */
        font-family: 'Fira Sans', sans-serif;
        font-size: 16px;
    }

    .book-page .book-rate__title {
        /* 16 по знакам: 13.3 плюс полулидинг заголовка 2.7 */
        margin: 0 0 13px;
        font-size: 18px;
        font-weight: 500;
        line-height: 1.3;
        color: #1d1d1f;
    }

    /* ★Отрицательные поля со ВСЕХ сторон гасят «воздух» зоны нажатия:
       сама звезда 32, а кнопка 44, то есть по 6px пустоты сверху, снизу
       и по краям. Без поправки слева ряд не совпадал с заголовком, а
       сверху и снизу расстояния читались на 6–8px больше заданных:
       по коробкам было 16 и 12, по знакам — 24.7 и 20.
       ★Снизу отнимаем ещё полулидинг строки оценки (2), чтобы между
       звездой и текстом было ровно 12 по видимым знакам. */
    .book-page .book-rate__stars {
        display: flex;
        justify-content: center;
        /* ★nowrap плюс сжимаемые кнопки: на совсем узких экранах ряд
           сперва отдаёт пустое поле зоны нажатия и только теоретически
           дошёл бы до самих звёзд. Переносить ряд нельзя — пять звёзд
           «4+1» читаются как оценка 4. */
        flex-wrap: nowrap;
        /* Просвет между звёздами держит пустое поле кнопок: по 7px с
           каждой стороны, итого 14 по знакам. Собственный gap нулевой —
           иначе на 320px ряд подходил бы к краю вплотную. */
        gap: 0;
        margin: -7px 0 3px;
    }

    /* ★Размер звезды задаём стилями, а не атрибутом svg: атрибут один
       на обе ширины, а звезда на телефоне и на широком экране разная.
       30 вместо прежних 32 — по ТЗ, чтобы ряд стал компактнее. */
    .book-page .book-rate__shape { width: 30px; height: 30px; }

    /* 44×44 — зона нажатия по норме; сама звезда 30. Кнопка
       прозрачная: рамка и фон у пяти звёзд подряд превратили бы ряд
       в пять кнопок-плашек. */
    .book-page .book-rate__star {
        width: 44px;
        height: 44px;
        flex: 0 1 auto;
        min-width: 30px;   /* не мельче самой звезды */
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 0;
        border-radius: var(--radius-control);
        background: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    /* кольцо блика — по звезде, а не по кнопке */
    .book-page .book-rate__star.is-sparkling::after {
        width: 40px;
        height: 40px;
    }

    /* ★DIN, а не Fira, хотя карточка объявлена на Fira. Это была
       единственная строка на странице, где Fira опускалась ниже 18px.
       Замер: при одном начертании 400 Fira кладёт на 22% больше
       чернил на единицу длины строки, и на мелком кегле это читается
       как слипание. Заодно цифры «4,8» и «1 374» становятся такими
       же, как в плашках номеров прямо над карточкой. */
    .book-page .book-rate__foot > p {
        font-family: DINRoundPro, sans-serif;
    }

    .book-page .book-rate__avg {
        margin: 0;
        color: #515158;
        font-size: 16px;
        line-height: 1.4;
    }

    .book-page .book-rate__avg-value {
        color: var(--color-text);
        font-weight: 700;
    }

    /* ★Обе строки лежат в одной ячейке сетки друг на друге. Высота
       ячейки — по самой высокой из них, то есть постоянна: карточка до
       и после голосования одного роста, ничего не дёргается. Меняется
       только прозрачность, высота не анимируется вовсе. */
    .book-page .book-rate__foot {
        display: grid;
    }

    .book-page .book-rate__foot > * {
        grid-area: 1 / 1;
        transition: opacity 180ms ease;
    }

    .book-page .book-rate__avg.is-hidden { opacity: 0; }

    /* ★Цвет и начертание — как у «Спасибо! Отзыв записали»: серо-
       графитовый #515158, обычное 400. Зелёный ушёл — он читался как
       отдельный сигнал «успех», хотя подтверждение и так дают
       заполненные звёзды. Галочки нет по той же причине.
       ★Кегль 16 — из ТЗ (16–18). У образца на странице ответа он
       разный на двух ширинах: 14px на десктопе и 18px на мобильном —
       это её собственная давняя рассинхронизация, и подстраиваться
       под одну из половин смысла нет.
       ★Три класса в селекторе не для красоты: в склейке сайта живёт
       .book-rating_block > p:last-child {font-size:12px} — из-за
       псевдокласса он весит больше двух классов и молча ужимал
       сообщение до 12px. Третий класс перевешивает его без !important. */
    .book-page .book-rate .book-rate__thanks {
        margin: 0;
        color: #515158;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.4;
        opacity: 0;
    }

    .book-page .book-rate .book-rate__thanks.is-visible { opacity: 1; }

    .book-page .book-rate__badge { width: 20px; height: 20px; }

}

/* ============================================================
   11b. ОЦЕНКА РЕШЕБНИКА — широкий экран
   ★Значения из ТЗ владельца. Раньше на этой ширине карточка жила
   на стилях склейки и с новой разметкой рассыпалась: звёзды шли
   в ряд без просветов, а заголовок и строка оценки прижимались
   влево при центрованном ряде.
   ★Скругление 16 — как у блока с уткой на этой же ширине.
   ============================================================ */
@media (min-width: 1171px) {
    /* ★Полоса, не витрина (вариант 1, владелец 19.08, эталон — проба
       site/дизайн/хаб-десктоп-варианты.html): заголовок, звёзды и
       статистика В ОДНУ строку слева, высота ~84. Блок второстепенный,
       фон осветлён к подложке (#F2EEE7 -> #F4F1EB, смесь 35% с #f7f6f3).
       «Спасибо» встаёт на место статистики (механика say() как была):
       на полной ширине оно помещается рядом со звёздами, транзиентный
       возврат из пробы не понадобился. */
    .book-page .book-socials {
        display: block;
        margin: 20px 0 0;
    }

    .book-page .book-rate {
        display: flex;
        align-items: center;
        gap: 24px;
        padding: 20px 32px;
        border-radius: 16px;
        background: #f4f1eb;
        font-family: DinRoundPro, sans-serif;
        text-align: left;
    }

    .book-page .book-rate__title {
        margin: 0;
        font-family: 'Fira Sans', sans-serif;
        font-size: 20px;
        font-weight: 500;
        line-height: 1.2;
        color: #1d1d1f;
        white-space: nowrap;
    }

    /* зона нажатия 44x44 при звезде 34; видимый просвет ~12 */
    .book-page .book-rate__stars {
        display: flex;
        flex-wrap: nowrap;
        gap: 2px;
        margin: 0;
    }

    .book-page .book-rate__star {
        width: 44px;
        height: 44px;
        flex: 0 0 auto;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 0;
        border-radius: var(--radius-control);
        background: none;
        cursor: pointer;
        position: relative;
    }

    .book-page .book-rate__shape { width: 34px; height: 34px; }

    .book-page .book-rate__star.is-sparkling::after {
        width: 42px;
        height: 42px;
    }

    .book-page .book-rate__foot {
        display: grid;
        /* ★center обязателен: в ячейке лежат статистика И невидимое
           «Спасибо» (оно выше из-за бейджа), ячейка растёт по нему,
           и без выравнивания строка «4,8 · …» прижималась к верху —
           на 7.5px выше оси полосы (поймал владелец 19.08). */
        align-items: center;
        text-align: left;
    }

    /* «из 5» на полосе не печатаем — рядом стоят пять звёзд (решение
       владельца 19.08, эталон-проба); на мобильной карточке остаётся */
    .book-page .book-rate__of5 { display: none; }

    .book-page .book-rate__foot > * {
        grid-area: 1 / 1;
        transition: opacity 180ms ease;
    }

    .book-page .book-rate__avg.is-hidden { opacity: 0; }

    .book-page .book-rate__avg {
        margin: 0;
        color: #515158;
        font-size: 16px;
        line-height: 1.4;
        white-space: nowrap;
    }

    /* ★#content обязателен: инлайновый «#content p» шаблона (низ 15,
       межстрочный 20) бьёт классовую пару по специфичности — тот же
       агрессор, что ломал межстрочный разбора. Из-за его нижних 15px
       грид-ячейка росла, и строка «4,8 · …» стояла на 7.5px выше оси
       полосы (поймал владелец 19.08). Скоуп — только десктоп: мобильная
       карточка сдана с фактическими (чужими) значениями, не трогаем. */
    #content .book-rate__avg {
        margin: 0;
        line-height: 1.4;
    }

    .book-page .book-rate__avg-value {
        color: var(--color-text);
        font-size: 17px;
        font-weight: 700;
    }

    .book-page .book-rate .book-rate__thanks {
        margin: 0;
        color: #515158;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.4;
        opacity: 0;
        white-space: nowrap;
    }

    .book-page .book-rate .book-rate__thanks.is-visible { opacity: 1; }

    .book-page .book-rate__badge { width: 20px; height: 20px; }
}

/* ============================================================
   11c. ОЦЕНКА — оформление звёзд, общее для обеих ширин
   ★Цвета, наведение, нажатие и фокус лежали внутри мобильного
   медиазапроса. От 1171px они переставали действовать, и звёзды
   рисовались чёрными: у svg нет своей заливки, без правила берётся
   currentColor. Здесь остаётся только оформление; размеры звезды и
   кнопки по-прежнему задаются отдельно на каждой ширине.
   ============================================================ */
.book-page .book-rate__star { position: relative; }

.book-page .book-rate__star[disabled] { cursor: default; }

/* ★Контур пустой звезды #8d8579 вместо прежнего #b4ada2. На тёплой
   подложке светлый контур читался как «кнопки выключены»: 1.92:1 к
   фону — вдвое ниже нормы для границ элементов управления. Стало
   3.15:1, норма 3:1. */
.book-page .book-rate__shape {
    fill: #fff;
    stroke: #8d8579;
    stroke-width: 2;
    stroke-linejoin: round;
    transform-box: fill-box;
    transform-origin: center;
    transition: fill 140ms ease, stroke 140ms ease;
}

/* наведение и клавиатурная примерка — «сколько будет, если нажму» */
.book-page .book-rate__star.is-preview .book-rate__shape {
    fill: #ffe7a1;
    stroke: #e7ae18;
}

/* ★Заливка — полноценный жёлтый, обводка оранжевая. Разница между
   пустой и выбранной звездой теперь и по заливке (белое → жёлтое), и
   по контуру (серое → оранжевое), а не по одному контуру. */
.book-page .book-rate__star.is-filled .book-rate__shape {
    fill: #ffc400;
    stroke: #e08c00;
}

/* ★Выключка нижней строки — своим правилом: в склейке сайта живёт
   .book-rating_block p {text-align:left}, и наследованное от карточки
   центрирование ему проигрывало. Заголовок и звёзды вставали по
   центру, а строка оценки — по левому краю: карточка одновременно
   пыталась быть и центрованной, и левосторонней. */
.book-page .book-rate .book-rate__foot > p {
    text-align: center;
}

/* ★Галочка — та же, что в блоке с уткой на странице ответа: кольцо
   #4E9EB5, птичка #35859D. Своя, не текстовый символ: ✓ из шрифта
   в Fira Sans тонкий и на 16px почти не читается. */
.book-page .book-rate__badge {
    display: inline-grid;
    place-items: center;
    margin-right: 7px;
    vertical-align: -.28em;
}

.book-page .book-rate__badge svg { width: 100%; height: 100%; display: block; }

.book-page .book-rate__star.is-popping .book-rate__shape {
    animation: book-rate-pop 240ms cubic-bezier(.2, .9, .32, 1.35);
}

/* ★Блик у выбранной звезды: мягкое кольцо, которое расходится и
   гаснет. Отдельных фигур-искр в разметке нет намеренно — это
   пять лишних узлов на каждую звезду ради трети секунды. */
.book-page .book-rate__star.is-sparkling::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 2px solid #ffca28;
    animation: book-rate-spark 420ms ease-out forwards;
    pointer-events: none;
}

.book-page .book-rate__star:focus-visible {
    outline: 2px solid #35859d;
    outline-offset: 0;
}

/* ★Анимации объявлены вне медиазапроса: keyframes не наследуются из
   вложенных блоков. */
@keyframes book-rate-pop {
    0%   { transform: scale(1); }
    52%  { transform: scale(1.12); }
    100% { transform: scale(1); }
}

@keyframes book-rate-spark {
    0%   { opacity: .9; transform: scale(.55); }
    100% { opacity: 0;  transform: scale(1.35); }
}

@media (prefers-reduced-motion: reduce) {
    .book-page .book-rate__foot > * { transition: none; }
    .book-page .book-rate__shape { transition: none; }
    .book-page .book-rate__star.is-popping .book-rate__shape { animation: none; }
    .book-page .book-rate__star.is-sparkling::after { animation: none; opacity: 0; }
}

/* ---------- 13. Состояние поиска ----------------------------
   ★Правила шаблона показывали найденное через класс active — тот
   самый, которым пользуется аккордеон и кука состояния. Из-за этого
   после очистки поля учебник оставался свёрнутым целиком. Здесь
   раскрытие на время поиска живёт отдельным классом search-open, а
   active не участвует вовсе.

   ★Блок НЕ в медиазапросе: скрипт поиска работает на всех ширинах,
   и правила показа обязаны работать там же. Прежние шаблонные
   правила рассчитаны на active и вложенные разделы уже не
   раскрывают. Отличается только раскладка ряда номеров, она ниже. */

/* ★Селектор повторяет `.item-section a.item-answer` из блока сетки
   номеров: там есть имя тега, и без него правило скрытия проигрывало
   по специфичности — номера оставались видны все. */
.book-page.answer_search-active .item-section a.item-answer {
    display: none;
}

/* ★flex, как у плитки вне поиска: плитки — элементы сетки на обеих
   ширинах (моб. раздел 8, десктоп 22), и после margin:0 у плиток
   раздела 22 прежний inline-block слипался в сплошную полосу. */
.book-page.answer_search-active .item-section a.item-answer.search-active {
    display: flex;
}

.book-page.answer_search-active .item-sections > .item-section:not(.search-open) {
    display: none;
}

/* ★Пути обновлены под обёртку .acc-body>.acc-inner (359.xsl, 19.08).
   ★В режиме поиска обёрточная механика показа ВЫКЛЮЧАЕТСЯ (два
   !important ниже — осознанно: search-open секция может быть не .active,
   и правила раздела 21 прятали бы найденное), видимостью управляют
   прежние внутренние правила по новым путям. */
.book-page.answer_search-active .acc-body {
    display: block !important;
    grid-template-rows: 1fr !important;
}

.book-page.answer_search-active .acc-inner > .item-answers,
.book-page.answer_search-active .acc-inner > .item-section {
    display: none;
}

/* ★grid, не block: это и есть сетка номеров, геометрию дают разделы
   8 (моб.) и 22 (десктоп). Скрытые плитки в раскладке не участвуют —
   найденные ложатся в те же колонки без дыр. */
.book-page.answer_search-active .item-section.search-open > .acc-body > .acc-inner > .item-answers {
    display: grid;
}

.book-page.answer_search-active .item-section.search-open > .acc-body > .acc-inner > .item-section.search-open {
    display: block;
}

/* ★РЕГРЕССИЯ ПОИСКА (поймал владелец 20.08): здесь стояли мобильные
   правила `a.item-answer.search-active {display:flex}` и
   `.item-section.search-open > .item-answers {display:grid}`. Второе
   умерло 19.08 вместе с обёрткой .acc-body: путь стал не прямым, а
   греп `item-section\s*>` при переносе его НЕ поймал — между
   `.item-section` и `>` стоит `.search-open`. Контейнер оставался
   display:block, флекс-плитки на мобильном разворачивались во всю
   ширину, на десктопе inline-block слипался. Теперь оба правила живут
   выше БЕЗ медиазапроса (flex/grid верны на обеих ширинах); урок к
   списку ловушек: греп по `item-section\s*>` пропускает селекторы с
   классом у секции. */
@media (max-width: 1170px) {
    /* стрелка у раскрытого поиском раздела смотрит так же, как у
       раскрытого вручную */
    .book-page.answer_search-active .item-section.search-open > .item-section_name::after {
        transform: rotate(-180deg);
    }
}

/* ---------- 14. Загруженный ответ ---------------------------
   ★Механизм не трогаем: блок собирает app.js, разметка и порядок
   узлов те же. Здесь только внешний вид.
   ★Классы .item-answer_detail, .item-answer_imgs, .item-answer_file,
   .item-answer_btns, .item-answer_placeholder, .img-container и
   .preloader переименовывать нельзя — по ним работает вставка и
   сборка изображения. */
@media (max-width: 1170px) {

    .book-page .placeholder-answer:not(:empty) {
        display: block;
        margin-top: var(--space-6);
    }

    .book-page .item-answer_detail {
        margin: 0;
    }

    /* ★Разделитель 1px, как на странице ответа: у шаблона на все hr
       стоит жёлтая линия 3px, и в блоке ответа она читалась тяжелее
       всего остального на странице. */
    .book-page .item-answer_detail hr {
        height: 1px;
        margin: 0 0 var(--space-4);
        border: 0;
        background: var(--color-divider);
    }

    /* ★Ширина страницы не должна меняться при появлении ответа.
       Картинка приходит произвольного размера, а выше по дереву есть
       безымянный div шаблона с display:inline-block — он тянется по
       самому широкому содержимому и распирает не внутренний
       скроллер, а всю страницу. */
    .book-page .item-answer_imgs,
    .book-page .s-answer_container,
    .book-page .item-answer_placeholder {
        max-width: 100%;
    }

    .book-page .s-answer_container img,
    .book-page .s-answer_container canvas {
        max-width: 100%;
    }

    /* ★Зарезервированную высоту задаёт сам скрипт: padding-bottom в
       процентах от пропорции картинки. Ничего здесь не переопределяем,
       только расстояния между частями — иначе при загрузке страница
       дёргалась бы. */
    .book-page .item-answer_placeholder {
        margin: var(--space-3) 0;
    }

    /* ★Разделитель изданий и кнопки «Предыдущее/Следующее» ВЫНЕСЕНЫ
       из медиазапроса — раздел «СТАРЫЙ ОТВЕТ: ОБЩИЙ ВИД» в конце файла.
       Здесь они доставали только до 1170, и на десктопе оставался
       нетронутый старый вид: синяя лента заглавными и красные кнопки
       вразрядку (замер 24.08). */

}

/* ★На самых узких экранах в кнопку не влезает и номер соседа, и
   подпись: на 320px кнопка выходит 132px, а «130 ← Предыдущее» при
   16px требует около 174. Прячем номер, а не подпись: подпись несёт
   смысл, номер соседа — сведение справочное, и он всё равно виден на
   полосе номеров выше. Уменьшать кегль до нечитаемого ТЗ запрещает. */
@media (max-width: 360px) {
    .book-page .item-answer_btns .btn {
        padding: 0 var(--space-2);
        font-size: 15px;
    }

    .book-page .item-answer_btns .btn span { display: none; }
}

/* ---------- 15. Обёртка данных об учебнике -------------------
   ★Блок .item-meta появился в разметке, чтобы данные об учебнике и
   действия с ним были соседями внутри ОДНОГО элемента: в грид-сетке
   они стояли в разных строках, а обложка была растянута на обе, и
   грид раздавал ей лишнюю высоту — расстояние «год → закладка»
   получалось разным на разной ширине.
   ★По умолчанию обёртка прозрачная: display: contents означает
   «элемента как бы нет», его дети ведут себя ровно как раньше.
   Поэтому на всех страницах, кроме переработанной мобильной, ничего
   не меняется. */
.book-page .item-meta { display: contents; }

/* ★Десктоп: порядок в разметке изменился — действия теперь идут ПОСЛЕ
   авторов, а рисоваться должны, как и прежде, над карточкой. Возвращаем
   их на место абсолютным позиционированием, а освободившееся место
   компенсируем верхним отступом контейнера. Замер до правки: контейнер
   начинался на 295, заголовок на 327 — отсюда 32. */
@media (min-width: 1171px) {
    .book-page .item.item__full .item-desc {
        position: relative;
        padding-top: 32px;
    }

    .book-page .item.item__full .item-top_links {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin: 0;
    }
}

/* ==================================================================
   15. ПОДВАЛ — мобильная ширина
   ------------------------------------------------------------------
   ★Правила действуют на ВЕСЬ сайт, а не только на страницы учебника:
   подвал лежит вне .book-page и общий для всех страниц, включая
   страницу ответа. Согласовано с владельцем.
   ★Ни одного !important: склейка сайта отдаётся <style> в самой
   странице, а этот файл подключается после неё, поэтому при равной
   силе селектора выигрывает он. Там, где у склейки селектор сильнее
   (footer[data-was-processed], footer .column-right a), повторяем его
   один в один — этого достаточно.
   ★Градиента и скруглений в подвале нет и не было: фон сплошной
   #332f3a, border-radius нулевой по всей цепочке. Проверено обходом
   всех узлов подвала — убирать нечего.
   ================================================================== */
@media (max-width: 1170px) {
    /* --- порядок: сперва навигация, потом копирайт --------------- */
    footer .row {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* было 36 */
        padding-top: 24px;
    }

    /* ★Меняем порядок показа, а не разметки. Ссылки — единственное,
       что здесь ловит фокус, и их взаимный порядок не меняется,
       поэтому обход с клавиатуры остаётся прежним. */
    footer .column-right { order: 1; }
    footer .column-left  { order: 2; }

    /* шаблонные 15px между колонками заменяем своей отбивкой */
    footer .column + .column { margin-top: 0; }
    footer .column-left { margin-top: 6px; }   /* навигация → копирайт: те же 14 по буквам */
    footer .column-center { display: none; }

    /* --- ссылки -------------------------------------------------- */
    /* ★Зазор в ноль: коробки ссылок встают вплотную, но по буквам
       между ними остаётся 22 — это пустое поле зон нажатия, по 11
       сверху и снизу от строки. Меньше без урезания зоны 44×44 не
       выходит, см. записку. */
    footer .column-right {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    /* ★Обёртки ссылок делаем флексовыми. Ссылка — inline-flex, то есть
       строчный элемент: обёртка отводила ей строку и добавляла снизу
       место под выносные элементы. Оттуда и брались лишние 10px,
       которые не убирались ни gap, ни margin. */
    footer .column-right > div {
        margin: 0;
        display: flex;
        justify-content: center;
    }

    /* ★Цвет был rgba(255,255,255,.3) — на подложке #332f3a это даёт
       #706d75 и контраст 2.57:1 при норме 4.5. Сплошной #d1cdd6 даёт
       8.34:1. Прозрачность здесь вредна вдвойне: она маскирует
       реальный контраст, потому что в коде цвет выглядит белым. */
    footer .column-right a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: auto;
        /* ★Просвет между ссылками по буквам = «высота коробки минус
           строка»: коробки стоят вплотную, зазора между ними нет
           вовсе, и весь видимый разрыв — это пустое поле зон нажатия.
           Отсюда цепочка 44 → 24, 40 → 22, 32 → 14. Владелец просил
           уравнять с отбивкой до копирайта, то есть 14, — поэтому 32.
           Цель нажатия 95×32 и 234×32: минимум 24×24 перекрыт с
           запасом, отметка 44 из ТЗ — нет. Размен сознательный. */
        min-height: 32px;      /* было 36, потом 44, потом 40 */
        padding: 0 16px;
        /* ★Кегль и цвет — те же, что у копирайта. Ссылку от простого
           текста теперь отличает только подчёркивание, поэтому снимать
           его нельзя. Контраст 5.41:1 при норме 4.5 — держится. */
        font-size: 14px;
        line-height: 20px;
        color: #a9a5b0;
    }

    footer .column-right a:focus-visible {
        outline: 2px solid #ffd66b;
        outline-offset: 2px;
        border-radius: 6px;
    }

    /* --- копирайт ------------------------------------------------ */
    footer .column-left .copy,
    footer .column-left p {
        font-size: 14px;
        line-height: 20px;
        /* 5.41:1 — вторая строка была на тех же 2.57, что и ссылки */
        color: #a9a5b0;
    }

    footer .column-left .copy { margin-bottom: 0; }

    /* --- картинка и общая высота --------------------------------- */
    /* ★Стопка книг 262×137 уменьшена до 184 по ширине (-30%).
       ★Поле снизу — высота уменьшенного рисунка (96) плюс 20 на
       просвет до копирайта. На 8, как считалось сперва, книги вставали
       вплотную к строке.
       ★Прибавку env() трогать нельзя: это защита нижней области
       iPhone. Без неё тёмная подложка не достаёт до края экрана. */
    footer[data-was-processed] { background-size: 184px auto; }

    footer {
        padding-bottom: calc(116px + env(safe-area-inset-bottom, 0px));
    }
}

/* ==================================================================
   ПОДТВЕРЖДЕНИЕ КАСАНИЯ НА iOS
   ------------------------------------------------------------------
   ★В склейке сайта стоит * { -webkit-tap-highlight-color: transparent },
   то есть собственная вспышка Safari отключена у всего сразу. А наши
   правила :active на iOS не срабатывают вовсе: без единого слушателя
   touch движок их не включает. Вместе это давало ноль обратной связи
   на нажатие — человек на медленной связи жал второй раз, и второе
   нажатие уходило уже по новой странице.
   ★Возвращаем СИСТЕМНУЮ подсветку, а не оживляем :active слушателем.
   Safari рисует её только когда решил, что это тап, а не начало
   прокрутки, — значит плашки не мигают под пальцем при скролле.
   ★Оттенок тот же бирюзовый, что у нажатия плашек номеров.
   ================================================================== */

.book-page .item-answer,
.book-page .item-section_name,
.book-page .book-rate__star,
.book-page .quick-answer-clear,
.book-page .quick-answer-reset,
.book-page #h1More,
.book-page .add2bookmark,
footer .column-right a {
    -webkit-tap-highlight-color: rgba(52, 153, 168, .18);
}

/* ==================================================================
   16. СТАРЫЙ БЛОК ОТВЕТА — стрелки «назад / вперёд»
   ------------------------------------------------------------------
   ★Разметку строит шаблонная строка в Structure227.php, менять её не
   нужно: классы .item-answer_btns и .btn сохранены, тронуто только
   оформление. Расположение прежнее — «ответ → баннер → стрелки».
   ★Цвет ПОЛНОСТЬЮ бирюзовый: рамка #2f9fb0, знак и подпись #3499a8 —
   один в один плашки номеров. На новой странице ответа стрелкам
   пришлось дать серую рамку, потому что рядом стоит залитый красный
   таб выбранного издания и два ярких пятна спорили. Здесь этого таба
   нет — спорить не с чем, и стрелки говорят тем же языком, что и вся
   навигация по номерам.
   ★Красный #ff4f4c ушёл: на сайте он означает выбранное издание, а
   стрелки повторяли его контуром.
   ★Флоаты заменены флексом. Стороны сохранены один в один:
   «Предыдущее» слева, «Следующее» справа. Работает и когда одна из
   кнопок скрыта классом .hidden — соседний селектор .btn + .btn
   срабатывает по разметке, а не по видимости, поэтому одинокое
   «Следующее» по-прежнему уходит вправо.
   ================================================================== */
@media (max-width: 1170px) {
    .item-answer_btns {
        display: flex;
        align-items: center;
        gap: 12px;
        /* ★Перенос ряда — запасной выход для очень узких экранов. На 320
           двум подписям не хватает 12px, и без него ломалась подпись
           внутри кнопки: стрелка отрывалась от слова («Следующее» на
           одной строке, «→» на другой). Пусть лучше кнопки встанут
           друг под другом — это привычная мобильная раскладка. */
        flex-wrap: wrap;
        row-gap: 8px;
        margin-bottom: 20px;
    }

    /* ★clearfix::after во флексе перестаёт быть распоркой обтекания и
       становится обычным элементом ряда: gap отсчитывался и до него,
       и одинокая кнопка вставала на 12px левее правого края. Флоатов
       здесь больше нет — распорка не нужна. */
    .item-answer_btns::after { content: none; }

    .item-answer_btns .btn { float: none; }
    .item-answer_btns .btn + .btn { float: none; margin-left: auto; }

    .item-answer_btns .btn.btn__transparent {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        /* было 42 — ниже нормы зоны нажатия */
        min-height: 48px;
        /* 12, а не 16: на 320 подписи с полями 16 не помещались */
        padding: 0 12px;
        /* подпись не ломаем — стрелка должна остаться при слове */
        white-space: nowrap;
        border: 1.5px solid #2f9fb0;
        border-radius: 12px;
        background: #fff;
        color: #3499a8;
        font-family: 'Fira Sans', sans-serif;
        /* было 12px с разрядкой 2px — на таком кегле разрядка
           превращала подпись в набор букв */
        font-size: 16px;
        font-weight: 600;
        line-height: 1.2;
        letter-spacing: 0;
        text-transform: none;
        text-decoration: none;
        box-shadow: none;
        -webkit-tap-highlight-color: rgba(52, 153, 168, .18);
    }

    .item-answer_btns .btn.btn__transparent:active {
        background: #e8f7f9;
        transform: translateY(1px);
    }

    .item-answer_btns .btn.btn__transparent:focus-visible {
        outline: 2px solid #35859d;
        outline-offset: 2px;
    }
}

/* ==================================================================
   17. КРОШКИ — цвет (сведение тёмных, вариант Б)
   ------------------------------------------------------------------
   ★Правило действует на ВЕСЬ сайт, как и подвал выше: крошки лежат вне
   .book-page и одинаковы на хабе, списках, главной и старых страницах.
   Решение владельца 18.08.

   ★Что чинится. Сведение тёмных к двум (#1d1d1f текст, #515158 подписи)
   прошло по нашим файлам и крошек не коснулось: их красит склейка сайта
   (.breadcrumbs a → #332f3a), а текущую страницу — базовое `body, html`
   → #46424b. В одной строке пути стояло ТРИ тёмных; многоточие мы уже
   перевели на #1d1d1f в textpages.css, и оно спорило с соседями.

   ★Ролями, а не одним тоном: ссылки — текст (#1d1d1f), текущая страница
   не кликается и работает подписью «где я» (#515158). Прежнее
   соотношение сохраняется — текущая крошка и была светлее ссылок
   (#46424b против #332f3a), меняется только пара красок.

   ★СПЕЦИФИЧНОСТЬ С ЗАПАСОМ, и это не перестраховка: склейка сайта
   подключается в КОНЦЕ body, то есть НИЖЕ этого файла, и при равной
   силе выигрывает она. У неё `.breadcrumbs a` (0,1,1) — поэтому здесь
   `.breadcrumbs li a` (0,1,2). Проверено замером на обеих страницах.

   ★Не в медиазапросе: на десктопе те же три тёмных.
   ================================================================== */

.breadcrumbs li a { color: #1d1d1f; }

/* Текущая страница — последнее звено, ссылкой не обёрнуто. */
.breadcrumbs li:last-child { color: #515158; }

/* ==================================================================
   18. СПИСКИ УЧЕБНИКОВ — /5-klass/ и /5-klass/russkiy/
   ------------------------------------------------------------------
   ★СКОУП: `#content:not(:has(.book-page)):has(.item)` — «страница, где
   перечень книг и нет учебника». Проверено отрисовками:

     страница ответа  .item нет            → мимо
     хаб учебника     есть .book-page      → мимо (там своя карточка
                                             и своя карусель рекомендаций)
     списки, поиск, закладки, главная      → попадают

   ★Сперва скоуп был `:has(.js-pagination-elements)` — по классу, который
   ставит пагинация. Он охватывал списки, поиск и закладки, но не главную;
   решением владельца карточка приведена к одному виду везде.
   ★Напрашивавшийся `.items:not(.book-page)` НЕ годится: на хабе таким же
   блоком собрано «Рекомендуем также» (`.book-page > .associated > .items`),
   и правки уехали бы на принятую страницу.

   ★Зачем. Списки собраны стилями 2022 года и рядом с хабом и страницей
   ответа читаются чужими. Замеры на 390:
      ось          крошки и заголовок 15, плита обложки 20, снимок 30
                   (на 480 — 42 / 27 / 57: карточки уезжают от заголовка)
      заголовок    18/700 DIN #46424b   против 22/700 Fira #1d1d1f
      тёмных       ЧЕТЫРЕ: #46424b заголовок, #332f3a название,
                   rgba(51,47,58,.8) подписи, #000 значение авторов
      разделитель  жёлтой линии нет вовсе
      отбивки      8 / 15 / 17 вместо шкалы 16 / 24 / 32
      нажатие      живы обложка и название, треть карточки мертва
   ================================================================== */

/* --- ПАЛИТРА: вне медиазапроса, на десктопе те же четыре тёмных ----
   ★Специфичность (1,1,0) — склейка сайта красит эти же узлы селектором
   `.items .item .item-desc` (0,3,0) и лежит НИЖЕ нашего файла. */
#content:not(:has(.book-page)):has(.item) .item-desc         { color: #515158; }
#content:not(:has(.book-page)):has(.item) .item-desc a       { color: #1d1d1f; }
/* правила окраски строки «авторы:» удалены 23.08 вместе с самой
   строкой (решение владельца; блок ушёл из 361.xsl) */
#content:not(:has(.book-page)):has(.item) .item-year          { color: #515158; }

@media (max-width: 1170px) {

    /* --- ось 16 -------------------------------------------------- */
    /* ★Одним движением: у сетки Bootstrap `.row` минус 15, у `.item`
       плюс 15 — они гасят друг друга, поэтому достаточно поднять поле
       контейнера, и содержимое карточки встаёт на ту же ось, что
       крошки и заголовок. */
    body #main > .container:not(:has(.book-page)):has(.item) {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* ★У обёртки свои 6% в диапазоне 476–768px — та же ловушка, что на
       странице ответа: на 480 цепочка и заголовок уезжали на 27px, а
       карточки оставались на месте. */
    #content:not(:has(.book-page)):has(.item) .padding__h {
        padding-left: 0;
        padding-right: 0;
    }

    /* ★Обложка сдвинута на 5px вправо и вниз (`left:5px; top:5px` в
       склейке) — из-за этого плита стояла на 20 при оси 15 и висела
       ниже первой строки названия. */
    #content:not(:has(.book-page)):has(.item) .item .item-img {
        left: 0;
        top: 0;
    }

    /* ★Вторая половина сдвиговой пары (23.08, поймал владелец на
       главной): внутренняя плита стояла на absolute(−5,−5) со СВОЕЙ
       тенью — двойной контур подложки, как когда-то на десктопе
       (лечение то же, «пара в ноль», раздел 22). Заодно видимая
       обложка встаёт на ось 16 и на честные 12 от заголовка группы —
       до этого висела на −5 от своей коробки. */
    #content:not(:has(.book-page)):has(.item) .item .item-img > div > div {
        left: 0;
        top: 0;
    }

    /* --- заголовок страницы -------------------------------------- */
    /* Тот же, что на хабе и на странице ответа. */
    /* ★Три разных узла на трёх страницах: у списков это `div.page-title`,
       у поиска и закладок — настоящий `h1`, у главной — `h1.h3`. Пока
       правило было написано на один `.page-title`, поиск оставался с
       заголовком 36px DIN при карточках уже новых. */
    #content:not(:has(.book-page)):has(.item) .page-title,
    #content:not(:has(.book-page)):has(.item) > .sidebar-block h1 {
        /* ★margin: 0 — заголовок теперь настоящий h1 (357.xsl), и склейка
           даёт ему нижние 15px, которых у прежнего div не было: карточки
           уезжали с 235.5 на 250.5. Отбивку держат обёртка mb-2 и .items,
           как и раньше. */
        margin: 0;
        font-family: 'Fira Sans', sans-serif;
        font-size: 22px;
        font-weight: 700;
        line-height: 1.25;
        color: #1d1d1f;
    }

    /* --- жёлтая линия и шкала интервалов ------------------------- */
    /* ★Линия — граница блока с заголовком, ровно как `#tx-answer` на
       странице ответа: 8 от крошек до линии, 12 от линии до заголовка. */
    /* ★Только там, где есть крошки: линия отбивает путь от содержимого.
       На главной крошек нет, и линия висела бы сама по себе. */
    #content:has(.breadcrumbs):not(:has(.book-page)):has(.item) .padding__h:has(> .items) {
        border-top: 1px solid #f8dea3;
        padding-top: 12px;
    }

    #content:not(:has(.book-page)):has(.item) .breadcrumbs { margin: 8px 0; }

    /* ★Заголовок → первая карточка = 24. Считается ДВУМЯ слагаемыми, и
       это вынужденно: у обёртки заголовка класс Bootstrap `.mb-2`, а он
       объявлен через `!important` (15px) — перебить его можно только
       своим `!important`, а в этом файле их нет ни одного. Поэтому
       недостающие 9 добавляем сверху у списка. Если Bootstrap на сайте
       однажды подменят, число разъедется — проверит самопроверка.
       ★ПОЛЕМ, а не отступом: соседние вертикальные отступы схлопываются,
       и `margin-top: 9` просто утонул бы в чужих 15 (проверено замером —
       зазор остался 15). Поле не схлопывается. */
    #content:has(#titleWrap):not(:has(.book-page)):has(.item) .items { padding-top: 9px; }

    /* последняя карточка → подвал */
    #content:not(:has(.book-page)):has(.item) .items { padding-bottom: 8px; }

    /* --- карточка ------------------------------------------------ */
    /* ★Флексом вместо флоатов: при плавающих колонках ширина текста
       задана процентом (58% минус поле 24), и уменьшить обложку, не
       пересчитывая проценты, нельзя. Стороны те же. */
    #content:not(:has(.book-page)):has(.item) .item {
        display: flex;
        align-items: flex-start;
        gap: 16px;
        position: relative;      /* держит растяжку зоны нажатия */
        margin-bottom: 24px;     /* было 17 */
    }

    /* ★Обложка 151 → 108. Размер выбран не на глаз: белое поле вокруг
       снимка у склейки ФИКСИРОВАННОЕ, 15px с каждой стороны (замер:
       плита 151.2 → снимок 121.2, плита 98 → 68, разница ровно 30). При
       плите 108 снимок выходит 78×100 — ровно та обложка учебника, что
       стоит на хабе (78×101). Один предмет в трёх местах получает три
       размера по убыванию роли: список 78 → хаб 78 → страница ответа 48.
       Высота карточки 181 → 130, страница «5 класс» короче на 550px. */
    #content:not(:has(.book-page)):has(.item) .item .item-img {
        float: none;
        flex: 0 0 108px;
        width: 108px;
    }

    #content:not(:has(.book-page)):has(.item) .item .item-desc {
        float: none;
        flex: 1 1 auto;
        width: auto;
        min-width: 0;            /* иначе длинная строка авторов распирает ряд */
        padding-left: 0;         /* просвет держит gap флекса */
    }

    /* ★Вся карточка — одна зона нажатия. Было две: обложка и название
       (185×38), а строка авторов и годы между ними — мёртвая полоса,
       по которой палец на телефоне попадает чаще всего. Растяжка
       псевдоэлементом, разметку не трогаем; обложка остаётся своей
       ссылкой на тот же адрес. */
    #content:not(:has(.book-page)):has(.item) .item .item-desc > a::after {
        content: '';
        position: absolute;
        inset: 0;
    }
}

/* ==================================================================
   18b. ПОДЗАГОЛОВКИ-ГРУППЫ ПО ПРЕДМЕТУ в списках (решение владельца 19.08)
   ------------------------------------------------------------------
   ★Печатает 357.xsl при смене предмета у соседних книг; на странице
   одного предмета их нет (дублировали бы H1).
   ★Вне медиазапроса: группы полезны на обеих ширинах. На десктопе
   .row — флекс, заголовку нужна вся строка (flex-basis 100%).
   ★Боковой отступ 15px — как у карточек (bootstrap-колонка их же
   ширины): текст встаёт на ту же ось.
   ★.row — флекс и на мобильной, отступы соседей НЕ схлопываются:
   8 сверху складывается с 24 нижними карточки в 32, 16 снизу — до
   первой карточки группы. Шкала 32/16.
   ================================================================== */

#content:not(:has(.book-page)) .subject-head {
    flex-basis: 100%;
    width: 100%;
    margin: 8px 0 16px;
    padding: 0 15px;
    font-family: 'Fira Sans', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: #1d1d1f;
}

/* первый заголовок: над ним не карточка, а заголовок страницы —
   свои 24 уже есть, добавка не нужна */
#content:not(:has(.book-page)) .subject-head:first-child { margin-top: 0; }

/* ★ДЕСКТОП списков: единственный h1 живёт в мобильной обёртке
   (см. 357.xsl — прежний h1.item-title_desktop удалён). Склейка прячет
   .item-title_mobile на широком экране — показываем и снимаем мобильное:
   кламп 2 строк, переносы, межбуквенный -.01em. Кнопка «ещё» сама не
   всплывёт: JS показывает её только когда заголовок реально обрезан, а
   без клампа он не обрезан никогда.
   ★Значения — замер прежнего десктопного h1 до правки: 900 36px DIN
   #332f3a, до карточек 30px. Проверено сравнением до/после: рамка
   заголовка и первая карточка совпали до пикселя. */
@media (min-width: 1171px) {
    #content:not(:has(.book-page)):has(.item) .item-title_mobile {
        display: block;
        overflow: visible;
        -webkit-line-clamp: unset;
        hyphens: none;
        letter-spacing: 0;
        margin-bottom: 30px;
    }

    /* ★Fira 28/700 вместо закреплённого DIN 36/900 — решение владельца
       20.08 (скрин /5-klass/angliyskiy/): «h1 на этих страницах сделать
       Fira как и на остальных». Кегль и тёмный — H1 хаба и ответа.
       ★Второй селектор — настоящий h1 ПОИСКА и ЗАКЛАДОК (не в
       .item-title_mobile): с плашкой 18в их десктоп получил новый вид,
       и DIN 36/900 на ней читался чужим — та же пара узлов, что в
       мобильном правиле раздела 18. */
    #content:not(:has(.book-page)):has(.item) .item-title_mobile .page-title,
    #content:has(.js-pagination-elements) > .sidebar-block h1 {
        font: 700 28px/1.2 'Fira Sans', sans-serif;
        color: #1d1d1f;
    }
}

/* ==================================================================
   18в. ДЕСКТОП СПИСКОВ — принятый вариант «Одна плашка» (владелец 20.08)
   ------------------------------------------------------------------
   Перенос принятой пробы дизайн/списки-десктоп-инъекция.html (режим
   bgplate). Серый лист #f7f6f3 + ОДНА белая плашка в языке карточки
   хаба (r14, тень) под весь список; карточки книг БЕЗ своих плашек
   (вариант «белые карточки» владелец отклонил: «перегружено»).
   ★СКОУП: #content:has(.js-pagination-elements) — списки, ПОИСК и
   ЗАКЛАДКИ, но НЕ главная (у неё нет пагинации; владелец просил
   главную разбирать отдельно, а скоуп пробы её бы перекрасил).
   ================================================================== */
@media (min-width: 1171px) {
    /* --- лист: тёплый серый, бежевый псевдофон колонки погашен ----- */
    #main > .container:has(.js-pagination-elements) { background: #f7f6f3; }

    .container:has(.js-pagination-elements) .sidebar-block::before {
        background: transparent;
    }

    /* --- плашка: второй .padding__h (в нём titleWrap + .items);
       крошки живут в СВОЁМ .padding__h и остаются на сером.
       Левый край — на оси крошек (100): родное поле 30 узла вынесено
       в маргин, внутренний отступ 24 как у карточки хаба, контент
       внутри на 124. Низ 60 — стык «последний блок → футер» хаба. --- */
    #content:has(.js-pagination-elements) .padding__h:has(> .items) {
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .07);
        margin: 0 30px 60px;
        padding: 24px 24px 0;
    }

    /* низ плашки держит margin последнего ряда карточек (40); свои 60
       у .items дали бы пустой белый хвост в сотню пикселей */
    #content:has(.js-pagination-elements) .items { padding-bottom: 0; }

    /* --- один контур подложки обложки: сдвиговая пара склейки в ноль
       (две одинаковые тени со сдвигом 5px читались двойным контуром —
       корень см. в пробе; приём раздела 22) -------------------------- */
    #content:has(.js-pagination-elements) .item .item-img {
        top: 0;
        left: 0;
    }

    #content:has(.js-pagination-elements) .item .item-img > div > div {
        top: 0;
        left: 0;
    }

    /* --- плита 147 → 108 (мобильные разделы: снимок 78, поле 15) +
       флекс вместо флоатов (ширины склейки в процентах): тексту
       ~226px вместо ~199 — пары фамилий и «… 5 класс» в одну строку -- */
    #content:has(.js-pagination-elements) .item {
        display: flex;
        gap: 16px;
        align-items: flex-start;
        position: relative;     /* якорь растянутой ссылки ниже: без
                                   него inset:0 растянулся бы до плашки */
    }

    #content:has(.js-pagination-elements) .item .item-img {
        float: none;
        flex: 0 0 108px;
        width: 108px;
        margin: 0;
    }

    #content:has(.js-pagination-elements) .item .item-desc {
        float: none;
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        padding-left: 0;
    }

    /* --- разгрузка текста: подчёркивание в ховер, вес 700 → 600 ----- */
    #content:has(.js-pagination-elements) .item .item-desc a.book-link {
        font-weight: 600;
        text-decoration: none;
    }

    /* --- вся карточка — зона нажатия + ховер-анимация: обложка мягко
       приподнимается, тень углубляется, название подчёркивается.
       ★Тени анимировать на ОБОИХ вложенных div: после гашения
       сдвиговой пары они на одной геометрии, один — тень двоилась бы */
    #content:has(.js-pagination-elements) .item .item-desc > a::after {
        content: '';
        position: absolute;
        inset: 0;
    }

    #content:has(.js-pagination-elements) .item .item-img {
        transition: transform 160ms ease;
    }

    #content:has(.js-pagination-elements) .item .item-img > div,
    #content:has(.js-pagination-elements) .item .item-img > div > div {
        transition: box-shadow 160ms ease;
    }

    #content:has(.js-pagination-elements) .item:hover .item-img {
        transform: translateY(-2px);
    }

    #content:has(.js-pagination-elements) .item:hover .item-img > div,
    #content:has(.js-pagination-elements) .item:hover .item-img > div > div {
        box-shadow: 0 8px 20px rgba(174, 176, 181, .5);
    }

    #content:has(.js-pagination-elements) .item:hover .item-desc a.book-link {
        text-decoration: underline;
    }

    @media (prefers-reduced-motion: reduce) {
        #content:has(.js-pagination-elements) .item .item-img,
        #content:has(.js-pagination-elements) .item .item-img > div,
        #content:has(.js-pagination-elements) .item .item-img > div > div {
            transition: none;
        }

        #content:has(.js-pagination-elements) .item:hover .item-img {
            transform: none;
        }
    }
}

/* ==================================================================
   19. КАРТОЧКА КНИГИ — текст ссылки (название / фамилии / тип · годы)
   ------------------------------------------------------------------
   ★Правила НЕ заперты скоупом списков, в отличие от раздела 18: новую
   разметку карточки строит общий шаблон 361.xsl, а его зовут пять мест
   (списки, «Рекомендуем также» на хабе, «Популярные решебники» на
   главной, поиск, закладки). Оставь эти правила у списков — на прочих
   четырёх серая строка набралась бы жирной ссылкой с подчёркиванием.
   Раскладка карточки при этом остаётся у списков своя (раздел 18).

   ★Ритм 8 / 4: серые сведения — один блок, отбитый от названия.
   Тип с годом и авторы оформлены одинаково, значит и отбиваться должны
   одинаково; было 3 сверху и 8.4 внутри.
   ★Зазор между серым и авторами держит НИЖНЕЕ ПОЛЕ ССЫЛКИ: у неё в
   склейке `margin-bottom: 8px`, а соседние вертикальные отступы
   схлопываются в больший — меньшее значение у блока авторов просто
   тонуло (проверено: 0 → 8.0, 4 → 8.0, 20 → 20.0).
   ★Ссылка блоком: инлайновой она добавляет снизу полулидинг строки, и
   отступы перестают значить написанное.
   ================================================================== */

#content .item .item-desc a.book-link {
    display: block;
    margin-bottom: 4px;     /* серые сведения → «авторы:» */
}

/* Фамилии своего оформления НЕ имеют: ссылка на карточке одна, и автор —
   такая же её часть, как название. Разное начертание внутри одной ссылки
   читалось бы как две разные ссылки. */

/* ★inline-block: подчёркивание ссылки наследуется потомками, и снять его
   у них нельзя — прерывает только новый блок форматирования. */
#content .item .item-desc .book-link__meta {
    display: inline-block;
    margin-top: 8px;        /* название → серые сведения */
    font-family: DINRoundPro, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    color: #515158;
    text-decoration: none;
}

/* ★Диапазон лет не рвать: в узкой карточке строка ломалась ВНУТРИ
   диапазона («Рабочая тетрадь · 2019–» / «2025») — браузер переносит
   после тире. Владелец 20.08: переносить диапазон целиком. Span ставит
   361.xsl; перенос уходит на пробел после «·», точка остаётся в конце
   первой строки (в начале второй она читалась бы хуже). */
#content .item .item-desc .book-link__years { white-space: nowrap; }

/* ==================================================================
   20. МОБИЛЬНОЕ МЕНЮ — полировка без смены вида (19.08)
   ------------------------------------------------------------------
   ★Само меню НЕ трогаем (решение владельца: нравится как есть — фон
   уже системный #332f3a, ховер кремовый, крестик красный). Здесь
   только поведение и зоны нажатия.
   ★Долг «49 элементов на #413e48» оказался ДЕСКТОПНЫМ выпадающим
   меню (#mainMenu ul ul) — уедет в десктопный заход.
   ================================================================== */

/* Замок прокрутки: класс вешает book-page.js, пока панель открыта.
   На обоих корнях — iOS слушает то html, то body. */
html.menu-open,
html.menu-open body {
    overflow: hidden;
}

/* ★Зона нажатия крестика 41 → 49 растяжкой, вид не меняется.
   Сосед у угла один — прозрачная растяжка ничего не перекрывает. */
.mobileMenu .close {
    position: absolute;   /* повтор боевого: без него inset не от чего */
}
.mobileMenu .close::after {
    content: '';
    position: absolute;
    inset: -4px;
}

/* ==================================================================
   21. АККОРДЕОН — механика показа и анимация (вариант B владельца, 19.08)
   ------------------------------------------------------------------
   ★Контент секции обёрнут сервером в .acc-body>.acc-inner (359.xsl).
   Обёртка рвёт склейковские `.item-section > .item-answers {display:
   none/block}` — их работу ЦЕЛИКОМ берёт база ниже. Проба обоих
   вариантов: _preview/accordion_motion.html; «как меню» отклонён —
   прокатка части в тысячи px.
   ★Части: высота мгновенно, содержимое проявляется 180мс. Класс
   acc-animate вешает book-page.js на .acc-inner ТОЙ части, которую
   трогали кликом (по aria-controls кнопки). ★Прежний гейт acted на
   <html> (первый клик где угодно) был ошибкой: правило совпадало
   разом у всех раскрытых секций, и тап по любой ссылке заставлял всю
   сетку номеров мерцать со сдвигом (запись владельца 19.08).
   ★Вложенные: честная плавная высота 250мс через grid-rows 0fr↔1fr.
   Порядок правил ВАЖЕН: вложенные ниже базы и специфичнее — grid
   побеждает базовый display:none.
   ★Поиск номера выключает эту механику (см. блок answer_search выше).
   ================================================================== */

/* база показа: любая секция аккордеона */
.book-page.book-accordion .item-section > .acc-body { display: none; }
.book-page.book-accordion .item-section.active > .acc-body { display: block; }

/* части: проявление содержимого — только у части, которую трогали */
.book-page.book-accordion .item-sections > .item-section.active > .acc-body > .acc-inner.acc-animate {
    animation: accFadeIn .18s ease-out;
}

@keyframes accFadeIn {
    from { opacity: 0; transform: translateY(6px); }
}

/* вложенные: плавная высота */
.book-page.book-accordion .item-section .item-section > .acc-body {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows .25s ease;
}

.book-page.book-accordion .item-section .item-section:not(.active) > .acc-body {
    display: grid;
    grid-template-rows: 0fr;
}

.book-page.book-accordion .item-section .item-section > .acc-body > .acc-inner {
    overflow: hidden;
    min-height: 0;
}

@media (prefers-reduced-motion: reduce) {
    .book-page .acc-body { transition: none; }
    .book-page .acc-inner { animation: none; }
}

/* ==================================================================
   22. ДЕСКТОП ХАБА — «карточки на сером» (вариант 1, владелец 19.08)
   ------------------------------------------------------------------
   Эталон вида — проба site/дизайн/хаб-десктоп-варианты.html, вариант 1.
   Принцип (записан в ТЗ страницы ответа 13.08): белая карточка =
   контент, ради которого пришли; серый фон = служебная обвязка.
   Карточки: учебник и номера (белые, r14, тень), оценка — полоса 11b.
   Рекомендации — на сером, малыми белыми карточками с тенью.
   ★Разделитель не дублировать: между карточками — фон и воздух;
   линия ОДНА (внутри карточки учебника, по буквам 16/16); жёлтые
   3px на десктопе сняты.
   ★Шрифты по мобильной карте: Fira только в H1/H2; плашки, плитки,
   поле, мета — DIN.
   ★Единый шаг 16 между соседями внутри карточки номеров.
   ================================================================== */
@media (min-width: 1171px) {
    /* --- подложка: тёплый серый вместо белого листа ---------------
       :has — приём уже в проекте (скоуп пагинации). Красится только
       контейнер страниц учебника. ★#main обязателен: белый задаёт
       склейкин «#main > .container», без ID наше правило проигрывает
       по специфичности. */
    #main > .container:has(.book-page) { background: #f7f6f3; }

    /* ★склейка красит правую (баннерную) колонку СВОИМ бежем через
       псевдоэлемент .sidebar-block:before (#f6f3ee 320px) — на сером
       листе это третий фон без причины (поймал владелец 19.08;
       зонды elementsFromPoint псевдоэлементы не видят). Гасим. */
    .container:has(.book-page) .sidebar-block::before { background: transparent; }

    /* --- карточка 1: учебник --------------------------------------- */
    .book-page .item.item__full {
        border: 0;                      /* снять жёлтые линии 3px */
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .07);
        /* низ 19, не 24: по буквам до последней строки те же 24,
           что у верха до коробки обложки (полулидинг 16px ~5) */
        padding: 24px 24px 19px;
        margin: 0 0 20px;
    }

    /* раздел 14 ставил действия абсолютом над карточкой и давал
       компенсацию 32 — в карточке действия живут В ПОТОКЕ под метой.
       ★СЕТКА вместо склейкиного float: при заголовке в 3 строки
       (Канакина) текстовый стек перерастал обложку, обтекание
       кончалось и «В закладки» падала влево под обложку. В сетке
       высота заголовка на раскладку не влияет. item-meta стоит с
       display:contents (раздел 14) — авторы и действия сами становятся
       элементами сетки. */
    .book-page .item.item__full .item-desc {
        padding-top: 0;
        display: grid;
        grid-template-columns: 124px minmax(0, 1fr);
        column-gap: 24px;
    }

    .book-page .item.item__full .item-desc > .item-img {
        grid-column: 1;
        grid-row: 1 / span 3;   /* обложка против заголовка, меты и действий */
        /* ★НЕ stretch: при длинном H1 (3 строки, Канакина) белая
           подложка растягивалась дефолтным align-items вниз пустым
           полем — выглядела «раздувшимся баннером» */
        align-self: start;
    }

    .book-page .item.item__full .page-title-wrap,
    .book-page .item.item__full .item-authors,
    .book-page .item.item__full .item-top_links {
        grid-column: 2;
    }

    .book-page .item.item__full .item-text {
        grid-column: 1 / -1;    /* описание и линия — на всю карточку */
    }

    /* обложка — размер принятой пробы: подложка 124 (внутри 106 +
       белая рамка 2x9). Боевой размер (~180) распирал карточку.
       ★margin/padding в ноль: склейка сдвигала обложку на +5 сверху и
       слева и тянула ~16 снизу — от этого линия отъезжала от шапки
       на 34 вместо пробных ~16 (вычитка владельца 19.08). */
    .book-page .item.item__full .item-img {
        width: 124px;
        /* зазор до текста даёт column-gap сетки (24) */
        margin: 0;
        padding: 0;
    }

    .book-page .item.item__full .item-img img {
        width: 106px;
        height: auto;
    }

    /* белая рамка подложки 9, как на мобильном и в пробе:
       склейка на десктопе даёт 15, и картинка ужималась до 94 */
    /* div без border-style правило не меняет — задеваем только рамку */
    .book-page .item.item__full .item-img div,
    .book-page .associated .item .item-img div {
        border-width: 9px;
    }

    /* ★сдвиговая пара склейки (relative +5/+5 на .item-img и
       absolute -5/-5 на рамке) при рамке 9 давала НЕРАВНОМЕРНЫЕ поля
       вокруг картинки: сверху/слева 4, снизу/справа 14 (вычитка
       владельца 19.08). Обнуляем обе половины — рамка ровная,
       позиции подложек не меняются (сдвиги взаимно гасились). */
    .book-page .item.item__full .item-img,
    .book-page .associated .item .item-img {
        top: 0;
        left: 0;
    }

    .book-page .item.item__full .item-img > div > div,
    .book-page .associated .item .item-img > div > div {
        top: 0;
        left: 0;
    }

    .book-page .item.item__full .item-top_links {
        position: static;
        margin: 12px 0 0;   /* воздух мета -> действия, из пробы */
        /* ★flex с центровкой: block-контейнер ровнял два inline-flex
           по базовым линиям их ПЕРВЫХ детей — svg разной высоты
           (13x15 флажок, 15x15 «!»), и подписи вставали на разных
           уровнях (вычитка владельца 19.08) */
        display: flex;
        align-items: center;
        gap: 20px;          /* после width:auto бокс кнопки = буквы, зазор честный */
    }

    /* склейка даёт авторам маргины — в СЕТКЕ они не схлопываются с
       соседними (низ 20 складывался с 12 действий, верх ~10 с 12
       заголовка -> 22 вместо 12 на Канакиной). Оба в ноль: стыки
       держат заголовок (margin-bottom 12) и действия (margin-top 12). */
    .book-page .item.item__full .item-authors { margin: 0; }

    /* «В закладки»: слева под метой (склейка ставила text-align:right),
       серая #515158 вместо бирюзы, размеры из принятой пробы —
       кегль 14, флажок 13x15 */
    .book-page .item.item__full .item-top_links { text-align: left; }

    .book-page .item.item__full .item-top_links__button {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        /* склейка даёт кнопке ЖЁСТКУЮ ширину (185 на Канакиной) — 87px
           пустоты справа от букв раздували зазор до соседнего действия */
        width: auto;
        padding: 0;
        border: 0;
        background: none;
        color: #515158;
        font-family: DinRoundPro, sans-serif;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
    }

    .book-page .item.item__full .item-top_links__button .bookmark-label {
        color: #515158;
    }

    .book-page .item.item__full .item-top_links__button svg {
        width: 13px;
        height: 15px;
        flex: 0 0 13px;
    }

    .book-page .item.item__full .item-top_links__button svg path {
        fill: #515158;
    }

    /* «Сообщить об ошибке» — пара к закладке: тот же серый, тот же
       ритм; зазор между действиями 20 (из пробы) */
    .book-page .item.item__full .item-top_links__link.error-report {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: #515158;
        font-family: DinRoundPro, sans-serif;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
    }

    .book-page .item.item__full .error-report svg path,
    .book-page .item.item__full .error-report svg rect,
    .book-page .item.item__full .error-report svg circle {
        fill: #515158;
    }

    /* H1: Fira 28/700 вместо DIN 36/900 */
    .book-page .items .item.item__full h1,
    .book-page .item.item__full .page-title {
        font-family: 'Fira Sans', sans-serif;
        font-size: 28px;
        font-weight: 700;
        line-height: 1.2;
        margin-bottom: 12px;   /* H1 -> мета, как в пробе */
        /* ★balance был только в мобильном блоке (max-1170), и на десктопе
           заголовок переносился обычным wrap: «ГДЗ по математике 3 класс
           Моро часть 1, 2» роняло одинокую «2» вниз (владелец 26.08).
           Замер по 40 реальным заголовкам базы в этой колонке (534px, 28px):
           строк одинаково — 86 и 86, а коротких хвостов (<25% колонки)
           9 против 0. Правило то же, что принято на мобильном 23.08. */
        text-wrap: balance;
    }

    /* описание: под шапкой на всю ширину карточки, строка не длиннее
       ~75 знаков; над ним — единственная линия карточки. Поля линии
       по БУКВАМ 16/16 (по коробкам 13/9 — полулидинг 16px-текста). */
    .book-page .item.item__full .item-text {
        /* ★линия — на ВСЮ ширину карточки (вопрос владельца 19.08):
           max-width здесь обрезал бы и её, поэтому мера строки 620
           задана ниже на абзацах */
        margin-top: 18px;      /* 14 + 4: тень обложки съедает зазор,
                                  визуально линия прижималась */
        padding-top: 9px;      /* под линией текст: по буквам ~16 */
        border-top: 1px solid #f8dea3;
    }

    .book-page .item.item__full .item-text p {
        /* ★на всю ширину карточки, край в край с линией: пробные 620
           не доходили до края на 62px и читались ошибкой выравнивания,
           а не мерой строки (владелец 19.08, длинное описание
           Виленкина). Полная ширина 682 = ~77 знаков — верх нормы. */
        font-size: 16px;
        line-height: 1.6;
        color: rgba(51, 47, 58, .8);   /* цвет описания боевого */
    }

    /* жёлтый HR склейки между рекомендациями и номерами */
    .book-page.items hr,
    .book-page .items > hr,
    .items.book-page > hr { display: none; }

    /* --- рекомендации: обвязка на сером ---------------------------- */
    .book-page .associated { margin: 0 0 20px; }

    .book-page .associated .h2_small {
        font-family: 'Fira Sans', sans-serif;
        font-size: 22px;
        font-weight: 700;
        color: #1d1d1f;
        margin: 0 0 12px;
    }

    .book-page .associated .items .row {
        display: flex;
        gap: 20px;
        margin: 0;
    }

    /* склейкин «.associated .items{margin-bottom:-30px}» компенсировал
       низы старых колонок; с флексом он вытекал из блока и накладывал
       карточку номеров на рекомендации (стык 20 превращался в -10) */
    .book-page .associated .items { margin-bottom: 0; }

    /* малые белые карточки с тенью (образец — «Дополнительные
       материалы» Skysmart): тот же язык, что большие карточки, тише
       за счёт размера. ★Ширина ЖЁСТКАЯ — половина ряда, «как если бы
       их было две» (владелец 19.08): одиночная рекомендация не должна
       растягиваться во всю колонку (Виленкин). */
    .book-page .associated .items .row { flex-wrap: wrap; }

    .book-page .associated .items .row .item {
        position: relative;            /* для растянутой ссылки */
        flex: 0 0 calc(50% - 10px);
        width: auto;
        max-width: none;
        margin: 0;
        padding: 14px 16px;
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .07);
        display: flex;
        gap: 14px;
        align-items: flex-start;
        transition: box-shadow 120ms ease;
    }

    .book-page .associated .items .row .item:hover {
        box-shadow: 0 3px 10px rgba(0, 0, 0, .12);
    }

    /* ★колонка обложки ФИКСИРОВАННАЯ: склейка даёт ей процент от
       карточки, и на хабе с ОДНОЙ рекомендацией (карточка во всю
       колонку) обложку растягивало до 257px с мылом (Виленкин).
       Бокс 88 = картинка 70 + белая рамка 2x9, как в пробе;
       margin в ноль — склейка сдвигала на +5. */
    .book-page .associated .item .item-img {
        flex: 0 0 88px;
        width: 88px;
        margin: 0;
        padding: 0;
    }

    .book-page .associated .item .item-img img {
        width: 100%;
        height: auto;
    }

    /* паддинг склейки у текста раздувал зазор обложка->текст до 41
       при пробных 14 (его даёт gap карточки) */
    .book-page .associated .item .item-desc {
        margin: 0;
        padding: 0;
    }

    .book-page .associated .item .item-desc a {
        font-weight: 600;
        font-size: 15px;
        line-height: 1.35;
        color: #1d1d1f;
        text-decoration: none;
    }

    /* вся карточка — ссылка: растягиваем ссылку названия
       псевдоэлементом, разметку не трогаем (вложенные <a> запрещены) */
    .book-page .associated .item .item-desc a::after {
        content: '';
        position: absolute;
        inset: 0;
    }

    .book-page .associated .items .row .item:hover .item-desc a {
        text-decoration: underline;
    }

    /* --- карточка 2: номера (поиск + аккордеон + сетки) ------------ */
    .book-page .item-sections {
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .07);
        padding: 24px;
        margin: 0 0 20px;
    }

    /* --- поле поиска: как на мобильном (значения раздела 9;
           там они в @media max-1170 и до десктопа не доставали —
           здесь дубль, менять СИНХРОННО) ---------------------------- */
    .book-page .quick_answer_search {
        position: relative;
        margin: 0 0 16px;
    }

    .book-page .quick_answer_search input[type="search"] {
        display: block;
        width: 100%;
        height: var(--control-height);
        padding: 0 48px 0 16px;   /* дубль: 44 крестик + 4 отступ от края */
        border: 1px solid #f0c96f;
        border-radius: var(--radius-control);
        background: var(--color-warm);
        color: var(--color-text);
        font-family: DinRoundPro, sans-serif;
        font-size: 17px;
        line-height: var(--control-height);
        -webkit-appearance: none;
        appearance: none;
    }

    .book-page .quick_answer_search input[type="search"]::-webkit-search-cancel-button,
    .book-page .quick_answer_search input[type="search"]::-webkit-search-decoration {
        -webkit-appearance: none;
        appearance: none;
        display: none;
    }

    .book-page .quick_answer_search input::placeholder { color: rgba(0, 0, 0, .55); }

    .book-page .quick_answer_search input[type="search"]:focus,
    .book-page .quick_answer_search input[type="search"]:focus-visible {
        border-color: #e5ab2c;
        outline: 2px solid #d99e1f;
        outline-offset: -1px;
    }

    /* ★`color` здесь РАНЬШЕ НЕ СТОЯЛ вовсе: мобильное правило заперто
       в @media max-1170 и до десктопа не доставало, поэтому знак
       наследовал чёрный по умолчанию кнопки. Замер: rgb(0,0,0). */
    .book-page .quick-answer-clear {
        position: absolute;
        /* ★Не вплотную к краю. Плашка 36 в зоне 44 оставляет по 4 внутри
           кнопки, и при right:0 справа от неё было 4, а сверху и снизу
           8 ((52−36)/2) — плашка читалась прижатой к рамке поля.
           4 здесь дают ровно 8 со всех сторон. */
        right: 4px;
        top: 0;
        width: var(--tap-target-min);
        height: var(--control-height);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 0;
        background: none;
        color: #6e6e76;
        cursor: pointer;
    }

    .book-page .quick_answer_search input:placeholder-shown ~ .quick-answer-clear {
        display: none;
    }

    /* ★Ритм подписи (поймал владелец 22.08): «Найдено: 22 номера»
       висела посередине (16 до поля / 15 до секции), а относится к
       ПОЛЮ. Приём мобильного раздела 9: обёртка поля даёт 16, минус
       восемь → к полю 8; низ 15 — склейкин #content p (по id его не
       перебить классом), паддинг-добор 1px даёт 16 вниз. Итог 8/16. */
    .book-page .quick-answer-status {
        font-size: 15px;
        color: #515158;
        margin: -8px 0 0;
        padding-bottom: 1px;
    }

    .book-page .quick-answer-status:empty { display: none; }

    /* --- аккордеон: сброс склейки + единый шаг 16 ------------------- */
    .book-page .item-section {
        margin: 0;
        padding-left: 0;
    }

    .book-page .item-section + .item-section { margin-top: 16px; }

    /* ступень вложенности 16 (на мобильном 8 — там теснее)
       ★margin-top 24, а не 16: зазор ПЕРЕД плашкой больше, чем под ней
       (владелец 24.08) — разбор и замер в мобильном разделе выше. */
    .book-page .item-section .item-section {
        margin-left: 16px;
        margin-top: 24px;
        padding-left: 0;
    }

    /* ★То же исключение, что на мобильном: плашка сразу под плашкой
       родителя остаётся на прежних 16. */
    .book-page .item-section .item-section:first-child {
        margin-top: 16px;
    }

    /* низ секций держат сами секции: сетка в аккордеоне низа не даёт
       (маргины через .acc-body не схлопываются — см. раздел 10).
       ★ЧАСТЬ держит низ 16 САМА: между частями XSL вставляет пустой
       баннерный слот, он рвёт «+»-соседство, и без своего低 низа плитки
       конца части слипались с плашкой следующей (Канакина, тот же
       класс бага, что ловили на мобильном 18.08). Вложенным низ не
       нужен: их сосед достижим для «+».
       ★БЕЗ скоупа book-accordion (поймал владелец 20.08 на Ваулиной):
       у книги с accordion=0 баннерный слот рвёт «+» точно так же, а
       этого правила не было — плитки упирались в следующую плашку
       (зазор 0). Аккордеонным значение то же, регрессии нет. */
    .book-page .item-sections > .item-section { margin-bottom: 16px; }
    .book-page.book-accordion .item-section .item-section:not(.active) { margin-bottom: 0; }

    /* --- плашки: два тона, DIN, тёмный шеврон ----------------------- */
    .book-page .item-section .item-section_name {
        display: flex;
        align-items: center;
        width: 100%;
        margin: 0;
        padding: 12px 48px 12px 20px;
        position: relative;
        border: 0;                      /* артефакт: браузерный outset */
        border-radius: 16px;
        background: #fdf4e1;            /* уровень 1: крем (издание) */
        color: #1d1d1f;
        font-family: DinRoundPro, sans-serif;
        font-size: 22px;
        font-weight: 700;
        line-height: 1.2;
        min-height: 64px;
        text-align: left;
        cursor: pointer;
        -webkit-user-select: none;
        user-select: none;
    }

    .book-page .item-section .item-section .item-section_name {
        background: #e8f7f9;            /* уровень 2: голубой */
        border-radius: 12px;
        min-height: 56px;
        font-size: 20px;
    }

    .book-page .item-section .item-section .item-section .item-section_name {
        background: #fff;               /* уровень 3: белый с рамкой */
        border: 1px solid var(--color-border);
        border-radius: 10px;
        min-height: 48px;
        font-size: 18px;
    }

    /* шеврон тёмный (arrow-down.svg, #1D1D1B) — закрывает пункт
       «стрелки старого блока на десктопе остались красными»
       ★ТОЛЬКО аккордеонным книгам (поймал владелец 20.08 на Ваулиной,
       accordion=0): клики вешает app.min.js на .book-accordion, и у
       прочих книг стрелка обещала сворачивание, которого нет. */
    .book-page.book-accordion .item-section > .item-section_name::after {
        content: '';
        position: absolute;
        right: 16px;
        top: 50%;
        width: 20px;
        height: 20px;
        margin-top: -10px;
        background: url(/templates/gdz/img/arrow-down.svg) 50% 50% / contain no-repeat;
        transition: transform 200ms ease;
    }

    .book-page .item-section.active > .item-section_name::after {
        transform: rotate(-180deg);
    }

    .book-page .item-section_name:focus-visible {
        outline: 2px solid #35859d;
        outline-offset: 2px;
    }

    /* у неаккордеонной книги плашка не кликается — палец-курсор врал бы
       (та же Ваулина); общее правило выше оставляем аккордеонным */
    .book-page:not(.book-accordion) .item-section .item-section_name {
        cursor: default;
        -webkit-user-select: text;
        user-select: text;
    }

    /* --- сетка номеров: 10 равных колонок, форма мобильная ---------- */
    /* геометрия отдельно от display — display решает механика
       раздела 21 (acc-body), как на мобильном */
    .book-page .item-sections .item-answers {
        grid-template-columns: repeat(10, 1fr);
        gap: 8px;
        margin: 16px 0 0;
    }

    /* ★Ритм хаба с иерархией (Тим, 25.08), парно мобильному блоку:
       внутри секции 16 (сетка выше), МЕЖДУ секциями 32,
       поиск → первая плашка 24. */
    .book-page .item-sections > .item-section ~ .item-section {
        margin-top: 32px;
    }
    .book-page .quick_answer_search {
        margin-bottom: 24px;
    }

    .book-page:not(.book-accordion) .item-sections .item-answers { display: grid; }
    .book-page.book-accordion .acc-inner > .item-answers { display: grid; }

    .book-page .item-sections a.item-answer {
        display: flex;
        align-items: center;
        justify-content: center;
        width: auto;
        height: 44px;
        margin: 0;
        padding: 0 8px;
        border: 1.5px solid #2f9fb0;
        border-radius: 12px;
        background: #fff;
        color: #3499a8;                 /* 19/700 — AA крупного жирного */
        font-family: DinRoundPro, sans-serif;
        font-size: 19px;
        font-weight: 700;
        line-height: 1;
        text-decoration: none;
        overflow: hidden;
        transition: background 150ms ease;
    }

    .book-page .item-sections a.item-answer:hover { background: #e8f7f9; }

    /* ★Длинное обозначение (класс lg из 359.xsl: >4 знаков) — две
       колонки и мельче кегль. ПАРНОЕ правило мобильного блока (там
       .item-section a.item-answer.lg): при переносе плиток на десктоп
       его забыли — «10-11», «Задание №3» и прочие сложные подписи
       жались в одну колонку 61px/19px и рвались по дефису с обрезкой
       (ловушка «дубли блоков менять ВСЕ», поймал Тим на 4кл/Иванов).
       nowrap — чтобы перенос по дефису был невозможен в принципе. */
    /* ★Кегль НЕ мельчим: в 130px span-2 худшая подпись «Задание №3»
       на 19px занимает 109px — замер 25.08. Мобильная пара выровнена
       так же (там span-2 ещё шире, ~140px). */
    .book-page .item-sections a.item-answer.lg {
        grid-column: span 2;
        white-space: nowrap;
    }
}

/* ------------------------------------------------------------------
   «Сообщить об ошибке» — только ДЕСКТОПНЫЙ хаб (владелец 19.08:
   мобильный хаб сдан и остаётся с одной закладкой; вход в форму на
   мобильном — чип «Есть ошибка» на странице ответа). Разметка в XSL
   общая — на мобильном прячем. */
@media (max-width: 1170px) {
    .book-page .item-top_links__link.error-report { display: none; }
}

/* ==================================================================
   23. ФОН САЙТА — плоский крем + фирменные иллюстрации
   ------------------------------------------------------------------
   ★ОБЩЕСАЙТОВОЕ, как подвал (раздел 15): решение владельца 19.08 —
   подложка одинаковая на всех страницах. Вместо текстуры bg.jpg
   (лежит на HTML) и дудлов bg-back.png — ровный тёплый цвет и два
   приглушённых 3D-пятна (утка-учёный слева, книга справа), макет
   владельца. Пятна ПЕРЕКРЫВАЮТ штатные .back::before/::after
   склейки: у них готовая логика показа по ширинам и привязка к
   ЦЕНТРУ (отступ от середины), а не к краям окна.
   ★Приглушение ЗАПЕЧЕНО в webp (альфа 0.16/0.20 на цвете фона,
   исходники в site/дизайн/, скрипт пересборки в коммите): правкой
   opacity их не «включить». Вес пары — 8 КБ. */
html,
body {
    background: #f7f2ea;
}

/* утка слева: за пределами контейнера 1170 (585 от центра) + воздух */
.back::before {
    content: '';
    background: url(/templates/gdz/img/bg-duck.webp?v=2) 0 0 / contain no-repeat;
    right: 50%;
    margin-right: 615px;
    /* ★.back начинается от ВЕРХА страницы, под шапкой сайта (~160):
       при top 140 макушка утки пряталась под хедером («утка улетела»,
       владелец 19.08). 280 = ниже шапки, на уровне карточки учебника —
       как в мокапе. */
    top: 280px;
    width: 200px;
    height: 294px;
}

/* книга справа, ниже первого экрана */
.back::after {
    content: '';
    background: url(/templates/gdz/img/bg-book.webp?v=2) 0 0 / contain no-repeat;
    left: 50%;
    right: auto;
    margin-left: 615px;
    margin-right: 0;
    top: 720px;
    width: 260px;
    height: 210px;
}

/* ==================================================================
   24. РАДИУС КОНТЕЙНЕРА — низ 14, верх прямой (владелец 20.08)
   ------------------------------------------------------------------
   ★Склейка даёт main>.container радиус 5px на все углы — вне новой
   шкалы радиусов (3/12/14/16): у самой крупной формы страницы угол
   выходил жёстче вложенных карточек (14). Решение владельца: 14 везде
   (хаб, ответ, списки — правило общесайтовое, контейнер один).
   ★ВЕРХ НЕ КРУГЛИТЬ: лист примыкает к тёмному навбару классов —
   это стык двух полос, а не свободный край; радиус там резал
   кремовую выемку, читавшуюся дефектом. Скругление остаётся на
   свободном крае — над футером.
   ★С 900px (десктопная раскладка ответа начинается там); ниже
   остаётся склейкин 5 — мобильный вид не трогаем без решения.
   ★ТЕНЬ: склейкина `0 7px 24px` выползала из-под навбара на 17px
   вверх (blur 24 − offset 7) — мягкий градиент у верхних углов
   читался «маленьким скруглением», хотя радиус там 0 (владелец
   20.08 поймал после снятия радиуса). Пересборка 0 12px 24px −12px:
   вверх выход ровно 0 (24 − 12 − 12), снизу прежние 24, цвет тот же. */
@media (min-width: 900px) {
    #main > .container {
        border-radius: 0 0 14px 14px;
        box-shadow: 0 12px 24px -12px rgba(194, 196, 201, .38);
    }
}

/* возврат с формы ошибок к решебнику (слот наполняет 388.xsl) */
.err-back {
    display: inline-block;
    margin-top: 12px;
    color: #35859d;
    font-weight: 600;
    text-decoration: none;
}

.err-back:hover { text-decoration: underline; }

/* ==================================================================
   ЕДИНЫЙ КРЕСТИК ОЧИСТКИ — общий вид и наведение
   ------------------------------------------------------------------
   ★ДУБЛЬ раздела «ЕДИНЫЙ КРЕСТИК» из `header.css` (там второй крестик,
   в поиске шапки) — менять СИНХРОННО. Значения и обоснования полностью
   описаны там; здесь только повтор под свой селектор.
   Коротко: плашка 36×36 со скруглением 8 отдельным псевдоэлементом,
   знак 16 при штрихе 2, цвет #6e6e76 → #1d1d1f на наведении, переход
   100ms. Всё снято замером записи владельца.
   ★Без медиазапроса: вид один на всех порогах, по порогам расходятся
   только положение и высота зоны нажатия.
   ================================================================== */

.book-page .quick-answer-clear::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 36px;
    height: 36px;
    margin: -18px 0 0 -18px;
    border-radius: 8px;
    background-color: transparent;
    transition: background-color 100ms ease;
}

.book-page .quick-answer-clear svg {
    position: relative;
    width: 16px;
    height: 16px;
}

.book-page .quick-answer-clear svg path {
    stroke-width: 2;
    transition: stroke 100ms ease;
}

@media (hover: hover) {
    .book-page .quick-answer-clear:hover::before {
        background-color: rgba(51, 47, 58, .07);
    }

    .book-page .quick-answer-clear:hover svg path { stroke: #1d1d1f; }
}

.book-page .quick-answer-clear:active::before {
    background-color: rgba(51, 47, 58, .12);
}

/* ★Кольцо фокуса — по плашке, а не по зоне нажатия 44×52. Цвет
   бирюзовый: на этой странице фокус показывают им (см. плашки номеров
   и «Показать все номера»), в шапке — своим серым. */
.book-page .quick-answer-clear:focus-visible { outline: none; }

.book-page .quick-answer-clear:focus-visible::before {
    outline: 2px solid #35859d;
    outline-offset: 2px;
}

/* ==================================================================
   ПУСТОЙ РЕЗУЛЬТАТ ПОИСКА ПО НОМЕРАМ — сообщение и «Показать все номера»
   ------------------------------------------------------------------
   ★БЕЗ медиазапроса. Раньше весь блок лежал в @media (max-width: 1170px)
   и до десктопа не доставал: `.is-empty` оставался `display: block`,
   значок и текст шли в строку, а кнопка рисовалась СЫРОЙ — рамка
   2px outset, фон #efefef, чёрный текст (замер на стенде). Ровно тот же
   механизм, что сделал крестик очистки чёрным на десктопе.
   ★Ничего порогового здесь нет — только вид, поэтому дубля не заводим.
   ================================================================== */

/* ★Пустой результат — строкой под полем, без плашки. С тёплым
   фоном и рамкой сообщение читалось как ВТОРОЕ поле ввода: та же
   ширина, тот же фон, почти то же скругление.
   ★Цвет спокойный красно-коричневый (5.8:1), а не сигнальный
   красный: это не ошибка заполнения, а ответ поиска. */
.book-page .quick-answer-status.is-empty {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
    padding-bottom: 12px;
    border: 0;
    background: none;
    color: #8a5a3c;
    font-size: 16px;
    line-height: 1.4;
}

/* ★По центру ПЕРВОЙ строки текста: строка 20, значок 18, значит
   ровно 1px сверху. По верхнему краю он смотрелся приподнятым. */
.book-page .quick-answer-status__icon {
    flex: 0 0 auto;
    margin-top: 1px;
}

.book-page .quick-answer-status__text {
    flex: 1 1 auto;
    min-width: 0;
}

/* ★Действие с новой строки, вровень с текстом: 18 значка + 8 зазор. */
.book-page .quick-answer-reset {
    flex: 0 0 100%;
    /* ★12 между строками по буквам. Было 17: складывались зазор
       контейнера (8) и внутренний отступ кнопки (8) минус поле.
       Отступ слева 26 = значок 18 плюс зазор 8 — подпись стоит
       вровень с началом текста сообщения. */
    margin: -9px 0 0 26px;
    padding: 8px 0;
    border: 0;
    background: none;
    color: var(--color-accent-ink);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.book-page .quick-answer-reset:focus-visible {
    outline: 2px solid #35859d;
    outline-offset: 2px;
    border-radius: var(--radius-small);
}

/* ============================================================
   25. МОБИЛЬНАЯ ГЛАВНАЯ (структура 88; принята 23.08 по макету
   site/дизайн/главная-моб-варианты.html, кадр 3)
   ------------------------------------------------------------
   Скоуп страницы — #content:has(#gdz-cat): каталог печатает только
   главная (template20). Разметка единая на обе ширины: на десктопе
   каталог и группы классов СКРЫТЫ до отдельного десктопного захода,
   на мобильной скрыты селекты «Поиск ГДЗ».
   ★.gm-seg в серверной разметке стоит с hidden и БЕЗ ARIA — роли
   вешает book-page.js (homeTabs) после старта. Правило
   [hidden] { display:none } обязано стоять ПОСЛЕ display:flex —
   при равной специфичности побеждает порядок.
   ============================================================ */

/* ------------------------------------------------------------
   25д. ДЕСКТОП ГЛАВНОЙ (принят 23.08 по пробе
   site/дизайн/главная-десктоп-инъекция.html, версия «Матрица»)
   ------------------------------------------------------------
   Переключателя на десктопе НЕТ (классовый разрез = навбар шапки):
   .gm-seg и панель классов скрыты, предметная панель показана
   принудительно ([hidden]{display:block} — homeTabs честно вешает
   hidden, десктоп его перекрывает). Матрица: имя 200 (иконка 28 +
   8 + текст, замер «Окружающий мир» 161) + 11 колонок 1fr, цифра в
   колонке СВОЕГО класса через data-n (инлайн grid-column сломал бы
   мобильную сетку). Композиция: серый лист, плита из двух padding__h
   (14 14 0 0 / 0 0 14 14, шов 0 — маргины детей глушатся паддингами
   на границе), ритм 24/24/24/12. Лестница 32/24/19/16.
   ------------------------------------------------------------ */
@media (min-width: 1171px) {
    #main > .container:has(#gdz-cat) { background: #f7f6f3; }
    /* селекты «Поиск ГДЗ» на десктопе тоже не показываются (ТЗ):
       каталог = матрица; без правила они вставали МЕЖДУ половинами
       плиты и рвали шов на 632px (поймано замером при накате) */
    #content:has(#gdz-cat) .search-block.js-ajax_search { display: none; }
    #main > .container:has(#gdz-cat) .sidebar-block::before {
        background: transparent;
    }

    #content:has(#gdz-cat) .padding__h {
        background: #fff;
        margin: 0 20px 0;
        padding: 24px 24px 24px;
        border-radius: 14px 14px 0 0;
    }
    #content:has(#gdz-cat) .padding__h:has(> .items) {
        margin: 0 20px 60px;
        padding: 0 24px 24px;
        border-radius: 0 0 14px 14px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .07);
    }
    #content:has(#gdz-cat) .items.mt { margin-top: 0; }
    #content:has(#gdz-cat) .items { padding-bottom: 0; }

    #content:has(#gdz-cat) h1.h3 {
        margin: 0 0 24px;
        font: 700 32px/1.2 'Fira Sans', sans-serif;
        color: #1d1d1f;
    }

    #gdz-cat { display: block; margin: 0; }
    #gdz-cat .gm-seg { display: none; }
    #gdz-cat #gm-cls { display: none; }
    #gdz-cat #gm-subj[hidden] { display: block; }

    #gdz-cat .gm-subjects {
        display: block;
        margin: 0; padding: 0; list-style: none;
    }
    #gdz-cat .gm-subjects > li {
        display: grid;
        grid-template-columns: 200px repeat(11, 1fr);
        align-items: center;
        margin: 0; padding: 4px 0;
        list-style: none;
        border-bottom: 1px solid #f0ece4;
    }
    #gdz-cat .gm-subjects > li:last-child { border-bottom: 0; }
    #gdz-cat .gm-subj-name {
        grid-column: 1;
        display: flex; align-items: center; gap: 8px;
        margin: 0;
        font: 500 19px/1.3 'Fira Sans', sans-serif;
        color: #1d1d1f;
    }
    #gdz-cat .gm-subj-name svg { width: 28px; height: 28px; flex: none; }

    #gdz-cat .gm-subjects .gm-tiles,
    #gdz-cat .gm-subjects .gm-tiles li { display: contents; }
    #gdz-cat .gm-subjects .gm-tiles a {
        justify-self: center;
        display: flex; align-items: center; justify-content: center;
        min-width: 44px; height: 44px;
        border: 0; border-radius: 10px;
        background: transparent; color: #2f9fb0; text-decoration: none;
        font: 700 19px/1 DinRoundPro, 'Fira Sans', sans-serif;
    }
    #gdz-cat .gm-subjects .gm-tiles a:hover {
        background: #ECF8FA; color: #1d1d1f;
    }
    #gdz-cat .gm-subjects .gm-tiles a:focus { outline: none; }
    #gdz-cat .gm-subjects .gm-tiles a:focus-visible {
        outline: 2px solid #35859d; outline-offset: 2px;
    }
    /* колонка = номер класса + 1 */
    #gdz-cat .gm-subjects .gm-tiles a[data-n="1"] { grid-column: 2; }
    #gdz-cat .gm-subjects .gm-tiles a[data-n="2"] { grid-column: 3; }
    #gdz-cat .gm-subjects .gm-tiles a[data-n="3"] { grid-column: 4; }
    #gdz-cat .gm-subjects .gm-tiles a[data-n="4"] { grid-column: 5; }
    #gdz-cat .gm-subjects .gm-tiles a[data-n="5"] { grid-column: 6; }
    #gdz-cat .gm-subjects .gm-tiles a[data-n="6"] { grid-column: 7; }
    #gdz-cat .gm-subjects .gm-tiles a[data-n="7"] { grid-column: 8; }
    #gdz-cat .gm-subjects .gm-tiles a[data-n="8"] { grid-column: 9; }
    #gdz-cat .gm-subjects .gm-tiles a[data-n="9"] { grid-column: 10; }
    #gdz-cat .gm-subjects .gm-tiles a[data-n="10"] { grid-column: 11; }
    #gdz-cat .gm-subjects .gm-tiles a[data-n="11"] { grid-column: 12; }

    #content:has(#gdz-cat) .items .section_title {
        height: auto; margin: 0; text-align: left;
        border-top: 1px solid #f8dea3; padding: 12px 0 0;
        font: 700 24px/1.25 'Fira Sans', sans-serif;
    }
    #content:has(#gdz-cat) .items .section_title::before { display: none; }
    #content:has(#gdz-cat) .items .section_title span {
        background: none; border: 0; padding: 0;
        height: auto; line-height: 1.25; white-space: normal;
        text-transform: none; text-align: left;
        font: 700 24px/1.25 'Fira Sans', sans-serif;
        color: #1d1d1f;
    }
    #content:has(#gdz-cat) .items .section_title span::before,
    #content:has(#gdz-cat) .items .section_title span::after { display: none; }

    #content .gm-pop-cls {
        display: block;
        flex-basis: 100%; width: 100%;
        box-sizing: border-box;
        margin: 20px 0 12px; padding: 0 15px;
        font: 600 16px/1.3 'Fira Sans', sans-serif;
        color: #1d1d1f;
    }
    #content .gm-pop-cls a { color: #1d1d1f; text-decoration: none; font: inherit; }
    #content .gm-pop-cls span {
        color: #2f9fb0; margin-left: 4px;
        font: 900 15px/1 DinRoundPro, 'Fira Sans', sans-serif;
    }

    /* --- карточки книг главной: вид принятых списков --- */
    #content:has(#gdz-cat) .item {
        display: flex; gap: 14px;
        position: relative;
        height: auto; margin-bottom: 24px;
    }
    #content:has(#gdz-cat) .item .item-img,
    #content:has(#gdz-cat) .item .item-img > div > div {
        top: 0; left: 0;
    }
    #content:has(#gdz-cat) .item .item-img {
        flex: 0 0 auto; float: none;
        width: 108px; height: 130px;
        transition: transform 160ms ease;
    }
    #content:has(#gdz-cat) .item .item-img > div {
        width: 108px; height: 130px;
        padding: 0; border-radius: 3px;
        box-shadow: 0 5px 16px rgba(194, 196, 201, .38);
        background: #fff;
    }
    #content:has(#gdz-cat) .item .item-img > div > div {
        position: absolute;
        inset: 0;
        display: flex; align-items: center; justify-content: center;
        border-radius: 3px;
        box-shadow: 0 5px 16px rgba(194, 196, 201, .38);
        background: #fff;
    }
    #content:has(#gdz-cat) .item .item-img img {
        width: 78px; height: 100px; object-fit: contain;
        margin: 0;
    }
    #content:has(#gdz-cat) .item .item-desc {
        float: none; width: auto; flex: 1 1 auto;
        padding: 0;
    }
    #content:has(#gdz-cat) .item .item-desc a.book-link {
        font: 600 16px/1.35 DinRoundPro, 'Fira Sans', sans-serif;
        color: #1d1d1f; text-decoration: none;
        display: block;
    }
    #content:has(#gdz-cat) .item .item-desc > a::after {
        content: '';
        position: absolute;
        inset: 0;
    }
    #content:has(#gdz-cat) .item:hover .item-img { transform: translateY(-2px); }
    #content:has(#gdz-cat) .item:hover .item-desc a.book-link { text-decoration: underline; }

    #content:has(#gdz-cat) .gm-about {
        margin: 0;
        border-top: 1px solid #f8dea3;
        padding: 12px 0 0;
    }
    #content:has(#gdz-cat) .gm-about p {
        font: 400 15px/1.6 'Fira Sans', sans-serif;
        color: #515158;
        margin: 0 0 12px;
    }
    #content:has(#gdz-cat) .gm-about p:last-child { margin-bottom: 0; }
}

@media (min-width: 1171px) and (prefers-reduced-motion: reduce) {
    #content:has(#gdz-cat) .item .item-img { transition: none; }
    #content:has(#gdz-cat) .item:hover .item-img { transform: none; }
}

@media (max-width: 1170px) {
    /* селекты на мобильной главной не показываются */
    #content:has(#gdz-cat) .search-block.js-ajax_search { display: none; }

    /* ★12 сверху: H1 липнул к делителю зоны «шапка/контент» (поймал
       владелец 23.08); 12 = норматив «линия -> H1» остальных страниц */
    #content:has(#gdz-cat) h1.h3 {
        margin: 12px 0 16px;
        font: 700 22px/1.3 'Fira Sans', sans-serif;
        color: #1d1d1f;
    }

    /* --- переключатель: безрамочный заливной сегмент-контрол.
       Контурный конфликтовал с контурными плитками (1px против
       1.5px) — решение жанром, прецедент «Да/Нет» в оценке --- */
    #gdz-cat .gm-seg {
        display: flex; height: 48px; padding: 2px;
        margin: 0 0 16px;
        background: #f2eee7; border-radius: 12px;
    }
    #gdz-cat .gm-seg[hidden] { display: none; }
    #gdz-cat .gm-seg button {
        flex: 1; border: 0; border-radius: 10px;
        background: transparent; color: #515158;
        cursor: pointer;
        font: 600 16px/1 'Fira Sans', sans-serif;
    }
    /* актив: заливка + ТЁМНЫЙ текст (паттерн активного номера
       полоски; бирюза на #ECF8FA давала 3.55:1 при норме 4.5) */
    #gdz-cat .gm-seg button.on {
        background: #ECF8FA; color: #1d1d1f;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .10);
    }

    #gdz-cat .gm-panel[hidden] { display: none; }

    /* --- плитки классов: ГРИД даёт равномерные строки (6+5 на 390
       вместо рваного автопереноса 7+4 — правка владельца 23.08) --- */
    #gdz-cat .gm-tiles {
        display: grid;
        grid-template-columns: repeat(6, 44px);
        gap: 8px;
        margin: 0; padding: 0; list-style: none;
    }
    #gdz-cat .gm-tiles a {
        display: flex; align-items: center; justify-content: center;
        width: 44px; height: 44px;
        border: 1.5px solid #42b7c8; border-radius: 12px;
        background: #fff; color: #2f9fb0; text-decoration: none;
        font: 900 18px/1 DinRoundPro, 'Fira Sans', sans-serif;
    }

    /* --- предметный разрез --- */
    /* иконки — десктопный элемент; мобильный каталог принят без них */
    #gdz-cat .gm-subj-name svg { display: none; }
    #gdz-cat .gm-subjects { margin: 0; padding: 0; list-style: none; }
    #gdz-cat .gm-subjects > li { margin: 0 0 24px; }
    #gdz-cat .gm-subjects > li:last-child { margin-bottom: 0; }
    #gdz-cat .gm-subj-name {
        margin: 0 0 8px;
        font: 700 16px/1.3 'Fira Sans', sans-serif;
        color: #1d1d1f;
    }

    /* --- «Популярные решебники»: тихая секция на ступень ниже H1
       (18 против 22) + жёлтая линия 1px (норматив принятой мобильной
       системы; стык 24 до линии / 12 после — правки владельца) --- */
    /* .mt склейки давал items свои 25 сверху и съедал стык 24 —
       гасим, стык держит margin самой секции */
    #content:has(#gdz-cat) .items.mt { margin-top: 0; }
    /* ★font и на САМОМ h2: склейка даёт h2 кегль 30, и 18px-спан
       выравнивался по базовой линии 30px-строки (+14 сверху) */
    #content:has(#gdz-cat) .items .section_title {
        height: auto; margin: 24px 0 0; text-align: left;
        border-top: 1px solid #f8dea3; padding-top: 12px;
        font: 700 18px/1.3 'Fira Sans', sans-serif;
    }
    #content:has(#gdz-cat) .items .section_title::before { display: none; }
    /* ★text-align НА САМОМ span обязателен: поздняя инлайн-склейка
       шаблона центрует текст правилом на span и растягивает его на
       всю ширину — left на родителе-h2 этого не перекрывает (замер
       врал, потому что мерил h2; скриншоты показывали правду) */
    #content:has(#gdz-cat) .items .section_title span {
        background: none; border: 0; padding: 0;
        height: auto; line-height: 1.3; white-space: normal;
        text-transform: none; text-align: left;
        font: 700 18px/1.3 'Fira Sans', sans-serif;
        color: #1d1d1f;
    }
    #content:has(#gdz-cat) .items .section_title span::before,
    #content:has(#gdz-cat) .items .section_title span::after { display: none; }

    /* группы «2 класс ›» в ряду карточек: ряд bootstrap живёт на −15,
       заголовку нужны свои 15, чтобы встать на ось карточек */
    /* ★#content обязателен: заголовкам h3 склейка задаёт маргины
       ID-селектором, класс в одиночку перебивался (top становился 0) */
    #content .gm-pop-cls {
        flex-basis: 100%; width: 100%;
        box-sizing: border-box;
        margin: 16px 0 12px; padding: 0 15px;
        font: 600 16px/1.3 'Fira Sans', sans-serif;
        color: #1d1d1f;
    }
    #content .gm-pop-cls a { color: #1d1d1f; text-decoration: none; font: inherit; }
    #content .gm-pop-cls span {
        color: #2f9fb0; margin-left: 4px;
        font: 900 15px/1 DinRoundPro, 'Fira Sans', sans-serif;
    }

    /* --- текст о сайте: «тихая сноска» (23.08) ------------------
       Секционный паттерн тот же, что у «Популярных»: 24 до линии
       1px, 12 после; кегль 15/1.6, цвет подписей #515158 (было
       #46424b из старой палитры); низ 32 — текст упирался в подвал
       (склейкины 60 у .items при этом гасим, они давали 56 сверху) */
    #content:has(#gdz-cat) .items { padding-bottom: 0; }
    /* верхний margin 0: свои 24 приносит последняя карточка */
    #content:has(#gdz-cat) .gm-about {
        margin: 0;
        border-top: 1px solid #f8dea3;
        padding: 12px 0 32px;
    }
    #content:has(#gdz-cat) .gm-about p {
        font: 400 15px/1.6 'Fira Sans', sans-serif;
        color: #515158;
        margin: 0 0 12px;
    }
    #content:has(#gdz-cat) .gm-about p:last-child { margin-bottom: 0; }
}

/* на 320 шесть колонок плиток не влезают (304 > 288) — 4+4+3 */
@media (max-width: 355px) {
    #gdz-cat .gm-tiles { grid-template-columns: repeat(4, 44px); }
}


/* ==================================================================
   СТАРЫЙ ОТВЕТ: ОБЩИЙ ВИД РАЗДЕЛИТЕЛЯ И КНОПОК
   ------------------------------------------------------------------
   Старая схема ответа (картинки через аякс) живёт на учебниках с
   text_pages = 0 — их большинство. Раздел БЕЗ медиазапроса: вид один
   на всех порогах.

   ★Почему вынесено. Августовская переделка лежала в
   @media (max-width: 1170px) и до десктопа не доезжала. Замер 24.08:
   на десктопе разделитель оставался синей лентой #6c85e1 белым
   ЗАГЛАВНЫМИ весом 900 без скругления, а кнопки — красным контуром
   2px #ff4f4c, 12px/900, ЗАГЛАВНЫМИ с разрядкой 2px. Третий случай
   этого класса дефекта за день (см. крестик очистки и «Показать все
   номера»), поэтому дубля не заводим — только общий раздел.
   ================================================================== */

/* ★Хвосты старой ленты. Сама лента набрана тремя псевдоэлементами:
   у .section_title — золотая черта #f8dea3 во всю ширину, у span —
   две картинки bg-title.png 43×43 по краям («уголки» ленты). Меняя
   заливку, их обязательно гасить, иначе от ленты остаются обрывки.
   ★На мобильном они уже были погашены; правило теперь общее. */
.book-page .item-answer_detail .section_title::before,
.book-page .item-answer_detail .section_title span::before,
.book-page .item-answer_detail .section_title span::after {
    display: none;
}

/* ★Разделитель между изданиями. Был синим #6c85e1 во всю ширину,
   кегль 26 — единственное пятно этого цвета на странице.
   ★Сначала я привёл его к тёплой плашке разделов — и ошибся:
   внутри ответа заголовки заданий ЗАПЕЧЕНЫ в картинку на таком же
   тёплом фоне #fdf4e1, и два тёплых пятна подряд читались как один
   ряд. Подбирал цвет на хабе, где такой плашке ничто не мешает, а
   живёт разделитель здесь.
   ★Красный #ff4f4c (цвет выбранного издания) прожил сутки: владелец
   попользовался сайтом как читатель — «красные разделители сильно
   раздражают». Заменён на язык АКТИВНОГО номера: заливка #4dbcc9 +
   тёмный #1d1d1f (утверждено владельцем 15.08 для полоски номеров;
   контраст 7.5 против 3.3 у красного с белым). Смысл тот же —
   «текущее/действующее издание», кнопкой не выглядит: кнопки на
   сайте контурные, а не заливные.
   ★По иерархии разделитель обязан быть заметнее запечённых плашек
   заданий — заливка вес держит, тонкая подпись на черте проигрывала.
   Сравнение трёх кандидатов: _preview/old_divider_ab.html. */
.book-page .item-answer_detail .section_title {
    height: auto;
    margin: var(--space-6) 0 var(--space-4);
    text-align: left;
}

.book-page .item-answer_detail .section_title span {
    display: block;
    height: auto;
    /* ★Крупнее (проба divider-ab3, вариант 1, Тим 25.08): 18px и
       паддинг 16×18 — разделитель перестал быть самой мелкой плашкой
       колонки. До этого 16px на var(--space-3) var(--space-4). */
    padding: 16px 18px;
    border: 0;
    /* ★Светло-фиолетовый (Тим, 25.08). История: вариант 4 (голубой
       #e8f7f9 + бирюзовая черта, владелец 24.08 по old_divider_ab2)
       после перестройки хаба 25.08 слился с плашками секций — у тех
       #e1f9fd, тот же тон, светимость 1.00:1. Разводим ТОНОМ, как это
       делают кремовые плашки заданий: лаванда против циана.
       Замеры: текст на #f0ebfa 14.4:1; черта #7c5fc0 4.9:1 на белом
       и 4.2:1 на подложке (норма графики 3:1). Прежние доводы в силе:
       бледная заливка + черта-держатель, не кнопка. */
    border-left: 4px solid #7c5fc0;
    border-radius: 4px 10px 10px 4px;
    background: #f0ebfa;
    color: #1d1d1f;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    text-transform: none;
    text-align: left;
    white-space: normal;
}

/* ★Десктоп — вариант 3 пробы divider-ab3 (Тим, 25.08): тёмный
   фиолетовый, белый текст 5.7:1; черта не нужна — вес держит сама
   заливка, радиус выравнивается в 10. ТОЛЬКО за порогом 1171:
   яркую заливку на мобильном владелец отклонял ещё 19.08
   («на мобильной очень яркие», #4dbcc9) — там остаётся лаванда. */
@media (min-width: 1171px) {
    .book-page .item-answer_detail .section_title span {
        border-left: 0;
        border-radius: 10px;
        background: #6f56b8;
        color: #fff;
    }
}

/* Кнопки «Предыдущее» и «Следующее» */
.book-page .item-answer_btns {
    display: flex;
    gap: var(--space-3);
    margin: var(--space-6) 0 0;
}

/* ★float у шаблона заменён на flex: при одной доступной кнопке
   (первый и последний номер учебника) она занимает всю ширину, а
   не половину с дырой рядом.
   ★Клирфикс шаблона (::after{display:table}) во flex становится
   АНОНИМНЫМ третьим элементом и съедает один gap — правая кнопка
   не доходила до края на 12px (поймал Тим; зазор слева 0, справа 12).
   Гасим content'ом: псевдоэлементы зондами не ловятся, только замером
   краёв. */
.book-page .item-answer_btns::after { content: none; }

.book-page .item-answer_btns .btn {
    flex: 1 1 0;
    float: none;
    min-width: 0;
    height: var(--control-height);
    transition: background-color .15s ease;
    padding: 0 var(--space-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    /* ★ВАРИАНТ 4, выбран владельцем 24.08 по пробе old_btns_ab.html.
       Рамка была коралловая #ff8f8c с обоснованием «связывает кнопки
       со стрелками страницы ответа». ЗАМЕР 24.08: на новой странице
       ответа .tx-arrow — серая рамка #a9a6a1 и бирюзовый значок,
       коралла там давно нет. Довод протух, цветов в кнопке было три.
       Теперь рамка и номер одного бирюзового рода, подпись тёмная.
       ★Тот же #2f9fb0 уже стоит у .btn.btn__transparent в разделе 16 —
       кнопки описаны ДВАЖДЫ, и теперь оба описания согласованы. */
    border: 1.5px solid #2f9fb0;
    border-radius: var(--radius-control);
    background: #fff;
    /* ★Прежде было 12px/900 в верхнем регистре с межбуквенным
       интервалом 2px — подпись читалась как надпись на кнопке
       лифта. Кегль обычный, регистр обычный.
       ★Цвет текста тёмный, а не коралловый: коралл на белом даёт
       3.4:1 при норме 4.5 для текста. Рамка коралловая остаётся —
       к ней норма другая, и она связывает кнопки со стрелками
       страницы ответа. */
    color: var(--color-text);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.book-page .item-answer_btns .btn.hidden { display: none; }

/* номер соседнего ответа скрипт кладёт в span */
.book-page .item-answer_btns .btn span {
    display: inline;
    font-weight: 700;
    color: var(--color-accent-ink);
}

/* ★Розовая подсветка нажатия ушла вместе с коралловой рамкой. */
/* ★Ховер навигации (Тим, 25.08): бледный тинт #f2fbfc — язык кнопки
   «Все номера» (та же контурная бирюзовая); :active ниже остаётся
   глубже (#e8f7f9) — градация «навёл светлее, нажал темнее».
   Только (hover:hover) — на тачах не залипает. */
@media (hover: hover) {
    .book-page .item-answer_btns .btn:hover { background: #f2fbfc; }
}

.book-page .item-answer_btns .btn:active { background: #e8f7f9; }

.book-page .item-answer_btns .btn:focus-visible {
    outline: 2px solid #35859d;
    outline-offset: 2px;
}

/* Кнопка скачивания, если ответ отдаётся файлом */
.book-page .item-answer_link .btn {
    height: var(--control-height);
    margin-bottom: var(--space-4);
    border-radius: var(--radius-control);
    border: 0;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
}


/* ==================================================================
   БАННЕРЫ В СТАРОМ ОТВЕТЕ — отступ сверху и вынос в край
   ------------------------------------------------------------------
   ★Замер 24.08 достоверными заглушками (обёртка .b-mobile/.b-desktop,
   подпись «Реклама», настоящая геометрия): у баннера сверху был ЗАЗОР 0,
   снизу 24. Он подпирал вплотную и решение, и кнопки — рекламный блок
   читался как часть ответа. Так во всех четырёх местах и на обеих
   ширинах. Даём симметричные 24.
   ★Пустой .js-banner скрыт правилом сайта (display:none), поэтому
   отступ у него ничего не занимает: на страницах без рекламы ритм
   прежний.
   ★Вынос: правило сайта .items .js-banner тянет баннер за колонку на
   15px в каждую сторону, а поле страницы у нас 16 — оставалась полоска
   в 1px по краям. Доводим до 16, чтобы баннер шёл ровно в край.
   ================================================================== */

.book-page .item-answer_detail .js-banner { margin-top: var(--space-6); }

.book-page .item-answer_detail .js-banner:first-child { margin-top: 0; }

@media (max-width: 1170px) {
    .book-page .item-answer_detail .js-banner {
        margin-left: calc(var(--page-padding) * -1);
        margin-right: calc(var(--page-padding) * -1);
    }
}