/* Мобильная шапка сайта: меню — логотип — избранное, под ними поиск.
   ТЗ владельца от 15.08.2026.

   ★СКВОЗНОЙ КОМПОНЕНТ. Файл подключается в templates/template13 и
   template25 строкой `->css("/templates/gdz/css/header.css")` ПЕРЕД
   showCss(), поэтому попадает в общий пакет последним и перебивает
   style.min.css порядком, а не специфичностью. Отдельных размеров в
   шаблонах страниц нет и заводить их нельзя: шапка одна на весь сайт.

   ★БРЕЙКПОИНТ 1170, а не 767. ТЗ разрешает взять существующий, и он у
   сайта есть: мобильная раскладка шапки (сетка «меню-лого-избранное» и
   поиск под ней) описана в style.min.css как `@media (max-width:1170px)`.
   Возьми мы 767 — в диапазоне 768–1170 осталась бы старая шапка.

   ★ДЕСКТОП НЕ ТРОГАЕМ — за одним вынужденным исключением, см. §0 ниже.

   Шкала: 8 сверху + 44 строка + 12 + 48 поиск + 16 снизу = 128px.
*/

/* ==================================================================
   0. КНОПКА ПОИСКА — БАЗОВЫЕ ПРАВИЛА (все ширины)
   ------------------------------------------------------------------
   ★Единственный блок вне медиазапроса, и не по небрежности. Разметка
   сменилась на ВСЕХ ширинах: вместо `input[type=submit]` теперь
   `button` со вложенным SVG. Прежнее десктопное правило
       header form.search input[type=submit] { background: url(search.png) }
   после этого просто перестало совпадать, и на десктопе кнопка
   осталась голой — 16×23 чёрным. Здесь повторена её прежняя геометрия
   (45px справа во всю высоту поля), а иконка взята та же, что на
   телефоне: та же лупа, только векторная вместо размытого PNG.
   Мобильные значения перекрывают это ниже, в медиазапросе.
   ================================================================== */

.search-button {
    position: absolute;
    top: 0;
    right: 0;
    width: 45px;
    height: 100%;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: #b98512;
    cursor: pointer;
}

.search-button__icon {
    display: block;
    width: 22px;
    height: 22px;
    pointer-events: none;
}

/* ★Кнопка очистки на десктопе не появляется вовсе: ТЗ описывает её в
   мобильной части, а десктоп мы не трогаем. Базовое `none` перекрывается
   только внутри медиазапроса. */
.search-clear { display: none; }

@media (max-width: 1170px) {

/* ==================================================================
   1. КОНТЕЙНЕР
   ================================================================== */

/* ★Ось 16px — та же, что у контента страницы ответа. У шаблона было 15;
   расхождение в пиксель между шапкой и содержимым не видно глазом, но
   мешает считать сетку единой. */
header .middle > .container {
    padding-left: 16px;
    padding-right: 16px;
}

header {
    /* было 8: нижний отступ переезжает внутрь шапки, чтобы серая полоса
       страницы не складывалась с ним во второй большой промежуток */
    padding-bottom: 16px;
}

/* ★Верхняя строка ровно 44px, дальше 12 до поиска — отвечает за зазор
   ОДНА строка (row-gap), а не пара margin'ов у соседей. */
header .middle > .container > div {
    grid-template-columns: 44px 1fr 44px;
    grid-template-rows: 44px auto;
    row-gap: 12px;
    padding-top: 8px;
    align-items: center;
    /* ★Обязательно ноль. У сетки в style.min.css свой `margin-bottom: 8px`,
       и он складывался с нижним отступом шапки: под полем выходило 24
       вместо 16, а вся шапка — 137 вместо 128. Ровно то сложение
       отступов, от которого предостерегает ТЗ §9 и §15. */
    margin-bottom: 0;
    /* ★Черта снята. Она шла в 1px под полем поиска и точно по его
       ширине, но у поля скругление 12 — у самого низа контур уводит
       внутрь, и прямая линия торчала из-под закругления слева и
       справа. Разделителем она всё равно не работала: rgba(0,0,0,.06)
       на белом даёт 1.13:1, то есть видны были только эти кончики. */
    border-bottom: 0;
}

/* ==================================================================
   2. ИКОНКИ: единый набор
   ------------------------------------------------------------------
   Бургер, закладка и лупа рисуются одним языком: контур, толщина 2.25,
   круглые концы, цвет через currentColor. Растровой лупы больше нет —
   она была PNG 2022 года, растянутым на экране тройной плотности, и
   именно поэтому «светилась».
   ================================================================== */

header .middle .icon-btn,
header #bookmark-btn {
    width: 44px;
    height: 44px;
    display: grid;
    /* ★place-CONTENT, а не только place-items. У сетки из одного элемента
       дорожка получается шириной ровно с рисунок и по умолчанию прижата
       к началу; place-items центрирует значок ВНУТРИ этой дорожки, то
       есть не делает ничего. Пока это было незаметно: рамки у кнопки
       нет. Стало видно, когда вернули системную подсветку касания — она
       рисуется по коробке 44×44, и у бургера уходила вправо от значка
       на 18px при 1.5px слева. */
    place-content: center;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #1d1d1f;             /* основной тёмный сайта, 16.8:1 к белому */
    cursor: pointer;
    /* ★Было transparent — на iOS кнопка не подтверждала касание ничем:
       системная вспышка отключена, а :active там не работает без
       слушателя touch. Возвращаем системную подсветку. */
    -webkit-tap-highlight-color: rgba(52, 153, 168, .18);
    -webkit-user-select: none;
    user-select: none;
    transition: background-color 160ms ease;
}

/* ★Сдвиг влево на 9: после центрирования рисунок ушёл бы с оси 16 на
   26.5. Возвращаем его на ось, а коробка подсветки становится
   симметричной относительно значка. Тот же приём, что у закладки
   справа, только зеркальный. */
header .middle .icon-btn { grid-area: nav;  justify-self: start; margin-left: -9px; }

/* ★Закладка сдвинута на 13px правее своей ячейки. Считаем по РИСУНКУ,
   а не по кнопке: у бургера линии начинаются на 17.5, то есть в 1.5
   от оси 16, а у закладки фигура заканчивалась на 344.8 — в 14.2 от
   правой оси 359. Расхождение почти 13px, и глаз его ловит: слева
   значок стоит на оси, справа висит в воздухе. Зона нажатия остаётся
   44×44 и уходит в поле контейнера, до края экрана ещё 3px. */
header #bookmark-btn {
    grid-area: fav;
    justify-self: end;
    position: relative;
    margin-right: -13px;
}

header .middle .icon-btn:active,
header #bookmark-btn:active {
    background-color: rgba(51, 47, 58, .07);
}

header .middle .icon-btn:focus-visible,
header #bookmark-btn:focus-visible {
    outline: 2px solid #332f3a;
    outline-offset: -3px;
}

/* ★stroke задаём здесь, а не атрибутом в разметке: у `.icon` в
   style.min.css свой stroke, а CSS всегда сильнее презентационного
   атрибута. Через currentColor цвет иконки берётся из `color` кнопки —
   значит, состояния меняются одной строкой. */
header .middle .icon-btn .icon,
header #bookmark-btn .icon {
    display: block;
    pointer-events: none;
    stroke: currentColor;
    fill: none;
}

/* видимые размеры: бургер 26×22, закладка 22×26 — оптически равны */
header .middle .icon-btn .icon { width: 26px; height: 22px; }
header #bookmark-btn .icon     { width: 22px; height: 26px; }

/* ★Избранное «активно», когда в нём есть учебники: PHP печатает число
   только в этом случае, поэтому непустой счётчик и есть признак.
   `:has()` есть в Safari 15.4+ и Chrome 105+; где его нет, кнопка
   остаётся контурной, а кружок со счётчиком виден всё равно. */
header #bookmark-btn:has(.bookmarks--count:not(:empty)) .icon {
    fill: #ffd983;
}

/* Кружок со счётчиком. Красный взят на два шага темнее фирменного:
   белым по #ff4f4c выходит 3.24:1, а это мелкий текст — нужно 4.5. */
header #bookmark-btn .bookmarks--count {
    position: absolute;
    top: 2px;
    right: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: #d13a37;
    color: #fff;
    font: 700 11px/18px 'Fira Sans', sans-serif;
    text-align: center;
}

header #bookmark-btn .bookmarks--count:empty { display: none; }

/* ==================================================================
   3. ЛОГОТИП
   ------------------------------------------------------------------
   ★Строго по центру страницы, а не между кнопками: он лежит в средней
   колонке сетки, а боковые колонки одинаковые по 44px. Разная
   визуальная ширина бургера и закладки на положение не влияет.
   viewBox логотипа 212×68 — при ширине 120 высота 38, в 44 укладывается.
   ================================================================== */

header .logo {
    grid-area: logo;
    justify-self: center;
    width: 120px;
    height: 44px;
    background-size: contain;
    background-position: 50% 50%;
    border-radius: 8px;
    -webkit-tap-highlight-color: transparent;
}

header .logo:focus-visible {
    outline: 2px solid #332f3a;
    outline-offset: 2px;
}

/* ==================================================================
   4. ПОИСК
   ================================================================== */

header form.search {
    grid-area: search;
    position: relative;
    margin: 0;
}

header form.search input[type=text] {
    width: 100%;
    height: 48px;
    /* ★Тонкая светлая граница в обычном состоянии — требование ТЗ §11:
       поле не должно выглядеть уже выбранным. Опознаётся оно тёплой
       заливкой, лупой и подписью, а не рамкой. */
    border: 1px solid #f0c96f;
    border-radius: 12px;
    background: #fff9ed;
    /* справа место под кнопку 44px плюс её отступ */
    padding: 0 52px 0 16px;
    /* ★16px обязательны: при меньшем кегле Safari на айфоне увеличивает
       страницу при постановке курсора. */
    font-size: 16px;
    line-height: 1.3;
    color: #1d1d1f;
    box-shadow: none;
    appearance: none;
}

/* ★Фокус рисуем outline'ом, а не утолщением рамки: outline не занимает
   места, поэтому поле не меняет размер и соседи не сдвигаются (ТЗ §11).
   ★Смещение ОТРИЦАТЕЛЬНОЕ — кольцо ложится поверх рамки, а не снаружи.
   Так §11 выполняется буквально (кольцо 2px есть), но на экране это
   один аккуратный контур, а не два. Первая версия делала зазор в
   пиксель, и рамка с кольцом читались двойной обводкой — владелец
   поймал на телефоне; критерий приёмки §20.5 требует «заметная, но
   аккуратная». */
/* ★Цвет фокуса жёлтый — решение владельца 18.08.2026. Я предлагал
   бирюзовый #35859d (4.21:1) и получил отказ: медовая обводка при
   активации нравится больше, а фокус — состояние, которое владелец
   видит каждый день.
   ★Что при этом принято сознательно, чтобы через полгода это не
   выглядело недосмотром: #e5ab2c даёт 2.06:1 к белому, кольцо
   #d99e1f — 2.37:1, при норме 3:1 для границы активного поля. И этот
   фокус отличается по цвету от фокуса остальных элементов сайта, где
   стоит #35859d. Взять норму жёлтым нельзя: первый проходящий тон —
   #b3820c, а это уже горчичный, не медовый. */
header form.search input[type=text]:focus {
    border-color: #e5ab2c;
    outline: 2px solid #d99e1f;
    outline-offset: -1px;
}

/* Подпись видна, но слабее введённого текста: rgba(0,0,0,.55) даёт
   4.7:1 на фоне поля. Прежние .45 — 3.33:1, ниже нормы. */
header form.search input::placeholder { color: rgba(0, 0, 0, .55); }
header form.search input::-webkit-input-placeholder { color: rgba(0, 0, 0, .55); }

/* ==================================================================
   5. КНОПКА ПОИСКА
   ------------------------------------------------------------------
   Внутри поля справа. Цвет #b98512 — фирменный жёлтый, затемнённый до
   3.12:1 на фоне поля: светлый #ffd983 дал бы 1.2:1, то есть лупу было
   бы не видно.
   ★Скругление 10 при радиусе поля 12 — это не расхождение, а правило
   вложения: внутренний радиус равен внешнему минус отступ (2px).
   ================================================================== */

header form.search .search-button {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: #b98512;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 160ms ease, background-color 160ms ease, transform 100ms ease;
}

header form.search .search-button__icon {
    display: block;
    width: 24px;
    height: 24px;
    pointer-events: none;
}

header form.search .search-button:hover {
    color: #9e700b;
    background-color: rgba(185, 133, 18, .07);
}

header form.search .search-button:active {
    color: #8c6207;
    background-color: rgba(185, 133, 18, .12);
    transform: translateY(1px);
}

header form.search .search-button:focus { outline: none; }

header form.search .search-button:focus-visible {
    outline: 2px solid #b98512;
    outline-offset: -3px;
}

/* ==================================================================
   6. КНОПКА ОЧИСТКИ
   ------------------------------------------------------------------
   ★Показом управляет CSS, а не скрипт. `:placeholder-shown` совпадает,
   пока поле пустое: как только человек начал печатать, плейсхолдер
   прячется, псевдокласс перестаёт совпадать — и крестик появляется.
   Скрипт нужен ровно на одно действие: очистить поле по нажатию.
   ★`type="reset"` вместо скрипта не годится: на странице результатов
   поле заполнено предыдущим запросом из `search_by_authors`, и reset
   вернул бы его, а не очистил.
   ★Своё место слева от лупы, не поверх неё (ТЗ §11): 2 + 44 = 46.
   ★Поле резервирует под крестик место ТОЛЬКО когда он показан — иначе
   плейсхолдер зря жался бы к середине.
   ★Цвет нейтральный, не золотой: золото у нас значит «искать», а
   очистка — служебное действие и спорить с основной кнопкой не должна.
   #6e6e76 даёт 4.8:1 на фоне поля.
   ================================================================== */

header form.search .search-clear {
    position: absolute;
    top: 2px;
    right: 46px;
    width: 44px;
    height: 44px;
    display: none;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: #6e6e76;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* ★Размер знака общий с крестиком поиска по номерам — 16. Было 20
   здесь и 14 на десктопе; см. раздел «ЕДИНЫЙ КРЕСТИК» в конце файла. */
header form.search .search-clear__icon {
    display: block;
    width: 16px;
    height: 16px;
    pointer-events: none;
}

/* ★Через `:has()` у формы, а НЕ соседним селектором от поля. Поле в
   разметке лежит не рядом с крестиком: плагин подсказок
   easy-autocomplete на лету оборачивает его в свой `div`, и
   `input ~ .search-clear` перестаёт совпадать. Проверять состояние
   приходится со стороны формы.
   ★Где `:has()` нет (Safari до 15.4, Chrome до 105) крестик просто не
   появится — по ТЗ это необязательный элемент, поле работает и без него. */
header form.search:has(input[type=text]:not(:placeholder-shown)) .search-clear {
    display: grid;
}

header form.search input[type=text]:not(:placeholder-shown) {
    padding-right: 96px;   /* 2 + 44 крестик + 44 лупа + 2 */
}

/* ★Плашка нажатия и кольцо фокуса переехали в раздел «ЕДИНЫЙ КРЕСТИК»
   в конце файла: они рисуются по псевдоэлементу-плашке и одинаковы на
   обоих порогах. */

/* ==================================================================
   6. СТЫК С КОНТЕНТОМ
   ------------------------------------------------------------------
   ★Общий зазор под шапкой остаётся прежним — 24px, — но меняется его
   состав: было 8 белого внутри шапки плюс 16 серого от страницы, стало
   16 белого плюс 8 серого. Так нижний отступ шапки принадлежит шапке, а
   серая полоса не превращается во второй промежуток (ТЗ §15).
   ================================================================== */

#main { padding-top: 8px; }

}

/* ==================================================================
   ПОДСКАЗКИ ПОИСКА ПО АВТОРУ
   ------------------------------------------------------------------
   ★Разметку строит плагин easyAutocomplete (шаблон в app.min.js), и
   она уже несёт всё нужное: обложку, авторов и название. Менять её не
   пришлось — правим только вид.
   ★Порядок строк переставлен ЧЕРЕЗ CSS (column-reverse), а не в
   разметке: человек ищет по автору, но ВЫБИРАЕТ учебник. Автор — это
   его собственный запрос, он его помнит; различает результаты класс,
   и он должен идти первым. В выдаче по «Ладыженская» первая строка
   у трёх позиций почти одинаковая, а различие было во второй.
   ★Обложка была спрятана правилом .eac_book-img{display:none}. Данные
   для неё сервер отдаёт всегда — проверено ответом /search/.
   ================================================================== */
@media (max-width: 1170px) {
    .easy-autocomplete-container { margin-top: 8px; }

    /* панель — отдельный выпадающий блок, поэтому скругление на все
       четыре угла, а не только снизу */
    .easy-autocomplete-container ul {
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
    }

    /* ★Поля задаём вместе с селектором плагина: у его правила
       (.easy-autocomplete-container ul li) специфичность выше, и
       собственные поля позиции оно обнуляло. */
    /* ★Линия #ddd8cf — тот же серый, что у рамок карточек «Рекомендуем
       также». Прежний #eeeae3 давал 1.20:1 к белому и читался как
       выцветший; этот — 1.42:1, на треть плотнее.
       ★Жёлтую #f8dea3 (черту между блоками страницы) сюда не берём:
       она даёт 1.32, то есть заметнее почти не становится, зато
       уравнивает «границу разделов страницы» с «строкой списка» и
       сливается с медовой рамкой поля прямо над панелью. Сравнение
       смотрели рядом, решение владельца 18.08.2026. */
    .easy-autocomplete-container ul li {
        padding: 10px 16px;
        border-bottom: 1px solid #ddd8cf;
        -webkit-tap-highlight-color: rgba(52, 153, 168, .18);
    }

    .easy-autocomplete-container ul li:last-child { border-bottom: 0; }

    .easy-autocomplete-container ul li > div > .d-flex { gap: 12px; }

    /* обложка: показываем и уменьшаем до 40×48 */
    .easy-autocomplete-container .eac_book-img {
        display: block;
        flex: 0 0 40px;
        min-width: 40px;
        width: 40px;
        height: 48px;
        min-height: 0;
        margin: 0;
        border: 0;
        border-radius: 4px;
        overflow: hidden;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
        background: #f4f1ec;
    }

    .easy-autocomplete-container .eac_book-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* название вверх, авторы вниз */
    .easy-autocomplete-container ul li .d-flex > div:last-child {
        display: flex;
        flex-direction: column-reverse;
        min-width: 0;
    }

    .easy-autocomplete-container .eac_book-title {
        font-size: 16px;
        font-weight: 600;
        line-height: 1.3;
        color: #1d1d1f;
    }

    .easy-autocomplete-container .eac_book-authors {
        margin: 2px 0 0;
        font-size: 14px;
        line-height: 20px;
        font-weight: 400;
        color: #515158;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    /* совпавшая часть — её выделяет book-page.js */
    .easy-autocomplete-container .eac_book-authors b,
    .easy-autocomplete-container .eac_book-title b {
        font-weight: 700;
        color: #1d1d1f;
    }

    /* ★«Показать все результаты» перестаёт быть самым заметным пятном
       списка: было 12px/900 капителью на медовой заливке во всю
       ширину, при высоте 42 — ниже нормы зоны нажатия. */
    .easy-autocomplete-container ul li.eac_show-all {
        min-height: 48px;
        height: auto;
        padding: 0 16px;
        background: none;
        border-top: 1px solid #ddd8cf;
        border-bottom: 0;
        font-size: 15px;
        font-weight: 600;
        text-transform: none;
        color: #3499a8;
    }

    .easy-autocomplete-container ul li.eac_show-all > div { min-height: 48px; }
}

/* ==================================================================
   8. ДЕСКТОП ШАПКИ — перенос принятой пробы (владелец 22.08)
   ------------------------------------------------------------------
   Эталон — site/дизайн/шапка-десктоп-инъекция.html (итерации 20–22.08).
   Состав: плашка слогана = серый лист #f7f6f3; «Закладки» и «Войти»
   парой в верхней строке (иконки 16px, зазор 7, шрифт 14/600);
   поле поиска мобильного стиля, растянуто от лого до края; выпадашки
   навбара — белые панели r14; подсказки — мобильный формат.
   ★Кнопку #bookmark-btn в верхнюю строку переносит book-page.js по
   matchMedia: физический перенос в шаблоне сломал бы СДАННУЮ мобильную
   шапку (там кнопка — узел грид-раскладки .middle).
   ★Высота строки .middle НЕ ужимается — владелец откатил («сплюснуто»).
   ★Специфичность: склейка подключается НИЖЕ header.css — селекторам
   поля дан префикс body, выпадашкам — header (иначе при равной силе
   склейка побеждает порядком).
   ================================================================== */
@media (min-width: 1171px) {

    /* --- плашка слогана: серый лист, тот же, что под белыми плашками
       контента (решение владельца) --------------------------------- */
    header .top { background: #f7f6f3; }

    header .top .container {
        color: #515158;
        font-size: 14px;
    }

    /* «Войти» и «Выход»: тёмно-серый, подчёркивание только по наведению.
       ★Выход обязан идти этой же парой: скрипт кладёт «Закладки» ВНУТРЬ
       .account--link, а у ссылки выхода из старой склейки остаётся
       display:flex — она становится вторым блоком и уезжает на 42px
       ниже полосы, где её закрывает следующая строка шапки (владелец
       26.08: «кнопка полностью пропала»). */
    header .top .auth--trigger,
    header .top .account--link > a[href*="action=exit"] {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        color: #515158;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
    }

    header .top .auth--trigger:hover,
    header .top .account--link > a[href*="action=exit"]:hover {
        color: #1d1d1f;
        text-decoration: underline;
    }

    /* Аватар пользователя вместо иконки-человечка: тот же габарит 16px
       (в старой склейке он 42×42 — под прежнюю тёмную полосу). */
    header .top .account--link img {
        width: 16px;
        height: 16px;
        margin-right: 0;
    }

    /* --- иконки пары: стандарт «высота = кегль × ~1.15» → 16px ----- */
    .hdr-user-icon {
        display: inline-flex;
        width: 16px;
        height: 16px;
    }

    .hdr-user-icon svg {
        width: 100%;
        height: 100%;
        stroke: currentColor;
    }

    /* --- «Закладки» в верхней строке -------------------------------
       До JS-переноса кнопку в .middle прячем: иначе на первом кадре
       мигает старая красная кнопка в строке поиска. */
    header .middle #bookmark-btn { display: none; }

    header .top #bookmark-btn {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        width: auto;
        height: auto;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
        color: #515158;
        font-family: DinRoundPro, sans-serif;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0;
        text-transform: none;
        text-decoration: none;
        margin-right: 28px;
    }

    header .top #bookmark-btn:hover {
        color: #1d1d1f;
        text-decoration: underline;
        background: none;
    }

    header .top #bookmark-btn svg {
        width: 14px;      /* по пропорции viewBox 24×28 при высоте 16 */
        height: 16px;
        stroke: currentColor;
        margin: 0;        /* склейкин margin-right 12 у svg.icon
                             складывался с gap 7 → зазор 19 (проба) */
    }

    header .top .bookmarks--count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 17px;
        height: 17px;
        padding: 0 4px;
        border-radius: 9px;
        background: #d13a37;
        color: #fff;
        font-size: 11px;
        line-height: 1;
    }

    header .top .bookmarks--count:empty { display: none; }

    /* --- поле поиска: мобильный стиль, растянуто от лого до края ---
       (префикс body — запас против склейки, см. шапку раздела) ------ */
    body header .middle .container > div > form.search {
        flex: 1 1 auto;
        max-width: none;
        margin-left: 32px;   /* ★без них поле вставало ВПЛОТНУЮ к лого */
        margin-right: 0;
        height: 48px;        /* иначе инпут сидит в форме со смещением */
    }

    body header form.search input[type=text] {
        display: block;
        margin: 0;
        width: 100%;
        height: 48px;
        border: 1px solid #f0c96f;
        border-radius: 12px;
        background: #fff9ed;
        padding: 0 96px 0 16px;   /* справа лупа 44 + крестик 44 */
        font-size: 16px;
        line-height: 1.3;
        color: #1d1d1f;
        box-shadow: none;
    }

    body header form.search input[type=text]:focus {
        border-color: #e5ab2c;
        outline: 2px solid #d99e1f;
        outline-offset: -1px;
    }

    body header form.search input::placeholder { color: rgba(0, 0, 0, .55); }

    body header form.search .search-button {
        top: 2px;
        right: 2px;
        bottom: auto;
        width: 44px;
        height: 44px;
        border-radius: 10px;
        background: none;
    }

    /* крестик очистки: на десктопе был выключен вовсе; включаем тем же
       :has-условием, что на мобильном (соседний селектор не работает —
       поле обёрнуто плагином подсказок) */
    body header form.search:has(input[type=text]:not(:placeholder-shown)) .search-clear {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        right: 46px;
        width: 44px;
        height: 48px;
        padding: 0;
        border: 0;
        background: none;
        cursor: pointer;
        color: #6e6e76;   /* серый: чёрный крест спорил с лупой */
    }

    body header form.search .search-clear svg {
        width: 16px;      /* меньше лупы (22), зона нажатия 44×48 */
        height: 16px;
        stroke: currentColor;
    }

    /* --- выпадающие списки предметов: панель нового дизайна --------- */
    header #mainMenu li > ul {
        background: #fff;
        border: 0;
        border-radius: 14px;
        box-shadow: 0 8px 24px rgba(29, 29, 31, .16);
        padding: 8px;
        min-width: 210px;
        overflow: hidden;
        /* ★НЕ отрывать от навбара маргином: меню живёт на :hover, щель
           роняла бы его по дороге курсора */
    }

    header #mainMenu li > ul li {
        border: 0;
        margin: 0;
    }

    header #mainMenu li > ul li a {
        display: block;
        padding: 0 16px;
        border-radius: 10px;
        background: none;
        color: #1d1d1f;
        font-family: DinRoundPro, sans-serif;
        font-size: 16px;
        font-weight: 500;
        line-height: 44px;
        text-transform: none;
        letter-spacing: 0;
    }

    header #mainMenu li > ul li a:hover {
        background: #fdf4e1;
        color: #1d1d1f;
    }

    /* --- подсказки поиска: мобильный формат -------------------------
       ★ДУБЛЬ блока из @media (max-width:1170px) выше — менять
       СИНХРОННО (как пару полей поиска разделов 9/22 book-page.css). */
    .easy-autocomplete-container { margin-top: 8px; }

    .easy-autocomplete-container ul {
        border-radius: 12px;
        overflow: hidden;
        border: 0;
        box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
    }

    .easy-autocomplete-container ul li {
        padding: 10px 16px;
        border-bottom: 1px solid #ddd8cf;
    }

    .easy-autocomplete-container ul li:last-child { border-bottom: 0; }

    .easy-autocomplete-container ul li > div > .d-flex { gap: 12px; }

    .easy-autocomplete-container .eac_book-img {
        display: block;
        flex: 0 0 40px;
        min-width: 40px;
        width: 40px;
        height: 48px;
        min-height: 0;
        margin: 0;
        border: 0;
        border-radius: 4px;
        overflow: hidden;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
        background: #f4f1ec;
    }

    .easy-autocomplete-container .eac_book-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .easy-autocomplete-container ul li .d-flex > div:last-child {
        display: flex;
        flex-direction: column-reverse;
        min-width: 0;
    }

    .easy-autocomplete-container .eac_book-title {
        font-size: 16px;
        font-weight: 600;
        line-height: 1.3;
        color: #1d1d1f;
    }

    .easy-autocomplete-container .eac_book-authors {
        margin: 2px 0 0;
        font-size: 14px;
        line-height: 20px;
        font-weight: 400;
        color: #515158;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .easy-autocomplete-container .eac_book-authors b,
    .easy-autocomplete-container .eac_book-title b {
        font-weight: 700;
        color: #1d1d1f;
    }

    .easy-autocomplete-container ul li.eac_show-all {
        min-height: 48px;
        height: auto;
        padding: 0 16px;
        background: none;
        border-top: 1px solid #ddd8cf;
        border-bottom: 0;
        font-size: 15px;
        font-weight: 600;
        text-transform: none;
        color: #3499a8;
    }

    .easy-autocomplete-container ul li.eac_show-all > div { min-height: 48px; }
}

/* ==================================================================
   ЕДИНЫЙ КРЕСТИК ОЧИСТКИ — общий вид и наведение
   ------------------------------------------------------------------
   Крестиков на сайте два: здесь, в поиске шапки, и в поиске по
   номерам на странице учебника (`book-page.css`, `.quick-answer-clear`).
   Замер до правки показал ЧЕТЫРЕ разных вида одной кнопки: знак 14 и
   20, толщина штриха 2.25 и 2, цвет #74747a / #6e6e76 / #515158 /
   чёрный, скругление 10 и 0. Раздел сводит их к одному.

   ★Правила БЕЗ медиазапроса — вид один на всех порогах. По порогам
   разъезжаются только положение и высота зоны нажатия: поле в шапке
   48, поле поиска по номерам 52.
   ★ДУБЛЬ этого раздела лежит в `book-page.css` (там второй крестик) —
   менять СИНХРОННО, иначе «в одном месте починили, в другом уехало».

   ★Плашка — ОТДЕЛЬНЫМ псевдоэлементом, а не фоном самой кнопки.
   Кнопка держит палец и повторяет высоту поля (44 / 48 / 52), а
   плашка обязана быть КВАДРАТНОЙ и одинаковой в обоих местах.
   ★36×36 при скруглении 8 — доля 22%. Снято ЗАМЕРОМ записи владельца:
   плашка 48px, дуга угла ~9.5px (20%), знак 16 из 48 (треть).
   ★Псевдоэлемент позиционирован абсолютно, поэтому знаку нужен
   `position: relative`: без него плашка легла бы ПОВЕРХ svg (потоковые
   потомки красятся раньше позиционированных).
   ================================================================== */

header form.search .search-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;
}

header form.search .search-clear svg { position: relative; }

/* ★Толщина штриха правится ИЗ CSS, а не в разметке: в шапке в атрибуте
   стоит 2.25, в поиске по номерам — 2. Правило на `path` перебивает
   презентационный атрибут, и обе разметки трогать не нужно.
   ★Цвет знака задан на `path`, а НЕ на кнопке. Через `color` не выйдет:
   десктопное правило `body header form.search:has(…) .search-clear`
   весит больше любого разумного селектора с `:hover`, и наведение
   молча проигрывало бы ему. Свойство на другом элементе этого спора
   не ведёт. */
header form.search .search-clear svg path {
    stroke-width: 2;
    transition: stroke 100ms ease;
}

/* ★Наведение: плашка проявляется, знак темнеет до основного цвета
   текста. 100ms — по замеру записи владельца: заливка появлялась за
   30–50 мс и гасла за 70–100. Это «щелчок», а не плавное затухание.
   ★Только там, где наведение вообще есть: на тач-экране :hover
   залипает после тапа, и плашка осталась бы висеть до следующего. */
@media (hover: hover) {
    header form.search .search-clear:hover::before {
        background-color: rgba(51, 47, 58, .07);
    }

    header form.search .search-clear:hover svg path { stroke: #1d1d1f; }
}

/* ★Нажатие — та же плашка, плотнее. На мобильном это ЕДИНСТВЕННОЕ её
   появление: постоянный квадрат рядом с лупой читался бы как вторая
   кнопка, а служебная очистка спорить с поиском не должна. */
header form.search .search-clear:active::before {
    background-color: rgba(51, 47, 58, .12);
}

/* ★Кольцо фокуса — по плашке, а не по зоне нажатия: обводить
   прямоугольник 44×48 вокруг квадрата 36×36 значит показывать не ту
   фигуру, которую человек видит. */
header form.search .search-clear:focus-visible { outline: none; }

header form.search .search-clear:focus-visible::before {
    outline: 2px solid #6e6e76;
    outline-offset: 2px;
}


/* ★Футер, левая колонка (Тим, 25.08): «Все права защищены.» должна
   стоять на одном уровне с «Политикой конфиденциальности» справа.
   Шаг правой колонки 26px, строка © ≈18px → низ 8px (было 30).
   Селектор с .column-left: правило живёт в компиляте шаблона,
   который подключается ПОСЛЕ этого файла — равная специфичность
   проиграла бы по порядку. */
footer .column-left .copy { margin-bottom: 8px; }