/* ==================================================================
   ШКАЛА ТЁМНЫХ: ДВА ЦВЕТА
   ------------------------------------------------------------------
   ★Было пять почти-чёрных (#1d1d1f, #332f3a, #33333a, #46424b) и
   четыре приглушённых (#515158, #77737c, #7b7780, #9a9aa0, #8a8a90).
   По отдельности каждый выглядел нормально, вместе они не складывались
   в шкалу: непонятно, что светлее по смыслу, а что просто светлее.
   ★Остаются два: #1d1d1f — заголовки и основной текст, #515158 —
   подписи. Тёплую пару внутри самого ответа (#4a4034 на бежевых
   плашках, #746c62 у подписи источника, #8a6d00 у ярлыка «устно») НЕ
   трогаем: это не оттенки чёрного, а акценты по тёплой подложке.
   ================================================================== */
/* Обвязка страницы ответа: шапка, карточка учебника, табы, номер,
   голосовалка, полоска номеров, слоты рекламы.

   Стили самого разбора приезжают отдельным файлом из build_viewer.py
   (см. site/extract_css.py) — здесь только то, чего во вьюере нет.

   ★СПЕЦИФИЧНОСТЬ. Все правила пишутся от #tx-answer. Шаблон сайта
   содержит `#content p { line-height: 20px }` со специфичностью (1,0,1);
   без ID он перебивает обвязку так же, как перебивал межстрочный интервал
   разбора (см. site/extract_css.py, п.3).

   ★MOBILE-FIRST. 90% трафика — телефоны. Базовые правила пишутся под
   375px, десктоп добавляется медиазапросом снизу.

   Значения взяты из макета: site/дизайн/Макет с двумя состояниями
   ответа-handoff/project/AnswerMobile.dc.html и AnswerDesktop.dc.html
*/

/* ==================================================================
   1. КАРКАС
   ================================================================== */

#tx-answer {
    /* На мобильном обвязка лежит на фоне страницы, ответ — на белой
       карточке. Правило: белая карточка = контент, ради которого пришли;
       серый фон = служебная обвязка. */
    padding: 11px 0 0;
}

/* ★Боковых полей здесь НЕТ. Их задаёт шаблонный `.container`, и
   собственные поля поверх него давали вторую ось: на ней стояли H1,
   номер упражнения и полоска номеров, тогда как крошки и карточки шли
   по оси контейнера. Один контейнер — одна ось. */
#tx-answer .tx-head {
    padding: 0 0 16px;     /* издания → жёлтая линия */
}

/* ★Ось мобильной страницы — 16px (ТЗ §2). Шаблонный `.container` даёт
   15px, и поднять его до 16 можно только здесь: собственные поля у
   #tx-answer завели бы вторую ось, а крошки остались бы на первой.
   Файл подключается ТОЛЬКО на страницах ответа, поэтому правило не
   расходится по сайту; на десктопе ось шаблона не трогаем вовсе. */
@media (max-width: 899px) {
    /* ★Селектор длинный не от любви к длинным селекторам. Контентный
       контейнер шаблона описан правилом `#main > .container` (1,1,0),
       и оно приезжает блоком <style> НИЖЕ наших ссылок: ни `.container`
       (0,1,0), ни `body .container` (0,1,1) его не перебивают — обе
       попытки я и проделал, прежде чем посмотреть на специфичность.
       `body #main > .container` — (1,1,1), выигрывает независимо от
       порядка файлов.
       ★Берём ИМЕННО контентный контейнер: шапка и подвал живут в своих
       и остаются на шаблонной оси — их ТЗ не касается. */
    body #main > .container { padding-left: 16px; padding-right: 16px; }
}

/* ==================================================================
   2. ТИПОГРАФИКА  —  H1 22 → номер 21 → тело ответа 19
   ------------------------------------------------------------------
   ★ЛЕСТНИЦА КЕГЛЕЙ, решение владельца от 14.08 после сравнения
   вариантов. Сверху вниз кегль убывает: заголовок страницы отвечает
   «где я», номер упражнения — «что я читаю», дальше тело ответа.
   ★Почему не как на хабе (18/700). Тело ответа — 19px, и хабовский
   заголовок оказался бы МЕЛЬЧЕ текста под собой. Опустить тело нельзя
   без пересборки всех ответов (кегль запечён, см. render_config.py), а
   пересборка ради 18px не окупается: замер показал минус 74px на
   странице в две тысячи. Поэтому заголовок опущен до 22 — вдвое ближе
   к хабу, чем прежние 25, и лестница при этом сходится.
   ★Цвет приведён к основному тёмному #1d1d1f — тому же, которым
   набран подзаголовок «Упражнение N» прямо под ним. Прежний #46424b
   давал 9.81:1 против 16.83 у подзаголовка, и главный заголовок
   выглядел бледнее второстепенного.
   ★Прежняя записка: цвет #46424b — хабовский, а не почти чёрный: два заголовка подряд
   («ГДЗ по русскому…» и «Упражнение 8») не должны быть одинаково
   чёрными, иначе непонятно, какой из них главный.
   ★Размеры в px, не в rem: rem здесь считается от 15px у html,
   и «1.15rem» читается как 17px — на этом уже обожглись.
   ================================================================== */


/* ★text-wrap: BALANCE, не pretty — заодно с заголовком хаба, см.
   разбор в book-page.css у .page-title. Коротко: pretty оставлял
   последнюю строку в 36% ширины при двух недозаполненных сверху и
   работал по-разному в Chromium и Safari. */
#tx-answer .tx-h1 {
    font: 700 22px/1.3 'Fira Sans', sans-serif;
    color: #1d1d1f;
    letter-spacing: .01em;
    margin: 0 0 14px;      /* H1 → учебник */
    text-wrap: balance;
}

/* --- шапка: заголовок, обложка, мета ------------------------------
   ★ОДИН DOM, две раскладки — через grid-области:
      мобильный   H1 сверху, под ним обложка 40px и название в строку;
      десктоп     обложка 92px слева, справа H1 и под ним мета.
   Так порядок блоков меняется без дублирования разметки.
   ★Карточка свёрнута намеренно: три автора, «Часть» и «Год издания»
   дублируют H1, а на мобильном стоили 90px первого экрана. */
#tx-answer .tx-headgrid {
    display: grid;
    /* 60px = обложка 48 плюс белая подложка по 6 с каждой стороны */
    grid-template-columns: 60px 1fr;
    grid-template-areas:
        "h1    h1"
        "cover meta";
    gap: 0 12px;
    /* ★По верхнему краю, а не по центру: на 320px метаданные занимают
       три строки, обложка — две, и центровка ставила её ниже названия
       учебника, будто она съехала. Верхний край общий у любых длин. */
    align-items: start;
    margin: 0 0 16px;      /* учебник → издания */
}

/* ★У ответа может быть ОДНА редакция — тогда ряда переключателей нет
   вовсе, и отбивку до жёлтой линии держит только `.tx-head`. Без этого
   правила 24px шапки складывались бы с 24px `.tx-head` в 48. */
#tx-answer .tx-headgrid:last-child { margin-bottom: 0; }

#tx-answer .tx-h1        { grid-area: h1; }
#tx-answer .tx-cover     { grid-area: cover; }
#tx-answer .tx-meta      { grid-area: meta; }

/* ★Обложка лежит НА ПОДЛОЖКЕ — так она сделана на хабе, и без подложки
   выглядела наклейкой: голая картинка с тёмной резкой тенью.
   Рецепт хаба снят замером: картинка 121×151, вокруг неё белое поле
   15px (то есть 12.4% ширины картинки), скругление 3px, мягкая тень
   0 5px 16px rgba(194,196,201,.38). Здесь картинка 48px, поэтому поле
   и тень пересчитаны в той же пропорции: 6px и 0 2px 6.4px.
   ★Поле сделано border'ом, а не padding'ом: `#tx-answer *` имеет
   box-sizing: border-box, и при padding картинка ужалась бы внутрь
   заданной ширины. */
#tx-answer .tx-cover {
    width: 60px;
    height: auto;
    border: 6px solid #fff;
    border-radius: 3px;
    background: #fff;
    box-shadow: 0 2px 6.4px rgba(194, 196, 201, .45);
}

#tx-answer .tx-meta {
    font: 16px/1.32 'Fira Sans', sans-serif;
    color: #515158;
    margin: 0;
}

#tx-answer .tx-meta__authors {
    display: block;
    font-size: 13px;
    line-height: 1.35;
    color: #515158;   /* было #9a9aa0 — 2.8:1, ниже нормы 4.5 */
}

/* ★Своя подсветка нажатия у всех кнопок страницы, системную гасим.
   На айфоне при нажатии и удержании Safari рисует поверх элемента свой
   серый прямоугольник со скруглением, и он НЕ совпадает с нашим: у
   кнопок скругление 12px и рамка в полтора пикселя, а подсветка кладётся
   по своей геометрии. Со стороны это выглядит так, будто рамка местами
   меняет толщину. Отклик у нас и так есть — фон и сдвиг на пиксель. */
#tx-answer .tx-tab,
#tx-answer .tx-arrow,
#tx-answer .tx-vote__btn,
#tx-answer .tx-vote__chip,
#tx-answer .tx-strip__num,
#tx-answer .tx-strip__all {
    -webkit-tap-highlight-color: transparent;
    /* ★И не выделяем подпись кнопки. Долгое нажатие на телефоне сейчас
       выделяет текст внутри кнопки и поднимает меню «Скопировать / Найти
       выбранное» — для кнопки это бессмыслица. Текст ответа при этом
       остаётся выделяемым: правило только на элементы управления. */
    -webkit-user-select: none;
    user-select: none;
}

/* ==================================================================
   3. ТАБЫ РЕДАКЦИЙ
   ------------------------------------------------------------------
   ★Активный — красный #ff4f4c, а НЕ синий: синий в разборе занят
   сносками, и два смысла одного цвета путают.

   ★ОДИН ПРОКРУЧИВАЕМЫЙ РЯД, а не сетка (ТЗ §5). Редакций бывает две,
   три и четыре — фиксированные колонки годятся только для двух, а на
   трёх начинают либо жать кнопки, либо рвать названия на две строки.
   Логика ряда:
      flex: 1 0 160px  — базовая ширина у всех одна (160px), свободное
                         место делится поровну, сжатия нет вовсе;
      min-width НЕ задаём — у флекс-элемента автоминимум равен ширине
                         содержимого, и длинное название раздвинет
                         кнопку вместо того, чтобы обрезаться.
   Отсюда само собой: две редакции на 375px заполняют строку целиком,
   три-четыре уезжают в прокрутку, следующая кнопка выглядывает справа
   и показывает, что ряд продолжается.

   ★Полоса прокрутки скрыта, но прокрутка нативная: `overflow-x: auto`
   + инерция iOS. `overflow-y: hidden` обязателен — при `auto` по одной
   оси браузер включает `auto` и по второй, и снизу появляется лишняя
   пустота.
   ★Выход за поля (`margin: 0 -16px` + `padding: 0 16px`) — чтобы ряд
   прокручивался от края до края экрана, а сами кнопки при этом стояли
   на общей оси 16px. `scroll-padding` держит ту же ось при привязке.
   ================================================================== */

#tx-answer .tx-tabs {
    display: flex;
    gap: 10px;
    margin: 0 -16px;
    padding: 0 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding: 0 16px;
}

#tx-answer .tx-tabs::-webkit-scrollbar { display: none; }

#tx-answer .tx-tab {
    appearance: none;
    /* ★База 160px, но не больше половины ряда за вычетом половины
       зазора. Без второй половины на 360px две кнопки не влезали ровно
       на два пикселя (2×160 + 10 = 330 против 328 доступных), и ряд
       начинал ездить на эти два пикселя — со стороны это читается не
       как «дальше есть ещё», а как поломка. Там, где не хватает
       по-настоящему (320px с длинными названиями, три-четыре
       редакции), автоминимум флекс-элемента держит ширину текста и
       прокрутка честно включается. */
    flex: 1 0 min(160px, calc(50% - 5px));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 14px;
    white-space: nowrap;
    text-align: center;
    scroll-snap-align: start;
    font: 15px/1.15 'Fira Sans', sans-serif;
    border-radius: 12px;
    /* ★Нейтральный серый, а не тёплый #ada596: тот на белом отдавал в
       оливковый, особенно рядом с коралловой заливкой выбранного
       издания. Роль цвета — «эта кнопка не выбрана», и нейтральный
       серый говорит это яснее любого оттенка. */
    border: 1.5px solid #a9a6a1;
    background: #fff;
    color: #515158;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s ease;
}

/* ★Без сдвига на пиксель, в отличие от остальных кнопок. У ряда стоит
   `overflow-y: hidden` (иначе прокрутка вбок добавляет пустоту снизу), и
   запас по высоте ровно нулевой: кнопка 46px в ряду 46px. Сдвиг вниз
   срезал нижнюю кромку рамки о край контейнера — владелец поймал это и
   в Safari, и в Chrome, потому что дело не в движке. Отклик оставляем
   фоном. */
#tx-answer .tx-tab:active {
    background: #f6f4f1;
}

/* У выбранного издания фон коралловый, и общий отклик его не перебивает
   (правило `.is-active` идёт ниже) — поэтому свой, на тон темнее. */
#tx-answer .tx-tab.is-active:active {
    background: #f03d3a;
    border-color: #f03d3a;
}

#tx-answer .tx-tab.is-active {
    font-weight: 600;
    background: #ff4f4c;
    border-color: #ff4f4c;
    color: #fff;
}

/* Клавиатура и вспомогательные технологии: у кнопок ряда своё кольцо —
   штатное браузерное на красной заливке почти не видно. */
#tx-answer .tx-tab:focus-visible {
    outline: 2px solid #1d1d1f;
    outline-offset: 2px;
}

/* Скрытые редакции остаются В РАЗМЕТКЕ: display:none индексируется,
   а вот догрузка по клику — нет. Отсюда и весь смысл затеи. */
#tx-answer .tx-pane { display: none; }
#tx-answer .tx-pane.is-active { display: block; }

/* ==================================================================
   4. НОМЕР + СТРЕЛКИ
   ------------------------------------------------------------------
   ★align-items: center и min-height 44px. НЕ flex-start: при одной
   строке заголовка под ним оставалось 15px пустоты, при двух —
   стрелки прижимались к верху. И не baseline: на одной строке стрелки
   садятся ниже центра. Проверено макетом 13.08.
   ★min-height обязателен: без него блок схлопывается до высоты текста
   и стрелки его распирают.
   ================================================================== */

#tx-answer .tx-numrow {
    display: flex;
    align-items: center;
    min-height: 44px;
    gap: 10px;
    /* ★8, а не 24: у плашки задания свой верхний отступ 14px, и он
       приходит из разбора. Внутрь ответа мы не лезем (см. §8c), значит
       на стыке считаем сумму — 8 + 14 даёт те самые 22–24 на экране. */
    margin: 0 0 8px;
}

#tx-answer .tx-num {
    flex: 1;
    min-width: 0;
    font: 700 21px/1.25 'Fira Sans', sans-serif;
    color: #1d1d1f;
    text-wrap: pretty;
}

/* Стрелки иконками, без подписей: «Все номера» текстом рядом уже не
   помещается (номер «Контрольные вопросы, с. 135» занимает 302px из
   347). Цель для пальца 48×48, даже если сама иконка 17px. */
#tx-answer .tx-arrow {
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    /* ★Рамка серая #a9a6a1 — ровно та же, что у НЕвыбранного издания
       над строкой номера. Красной она быть перестала: красный на этой
       странице занят выбранным изданием, и стрелки повторяли его
       контуром — один цвет означал и «вы здесь», и «идите отсюда».
       ★Серый, а не бирюзовый: бирюзовый оставлен плашкам номеров.
       Стрелка — шаг на один номер, плашки — весь учебник; шаг не
       должен спорить по яркости с картой. Контраст рамки 2.43:1,
       знака — 3.35:1 (норма для значков управления 3:1).
       ★Цвет знака идёт через color, см. правило stroke ниже. */
    border: 1.5px solid #a9a6a1;
    border-radius: 12px;
    background: #fff;
    color: #3499a8;
    text-decoration: none;
    transition: background-color .15s ease;
}

#tx-answer .tx-arrow:active {
    transform: translateY(1px);
    /* та же подсветка нажатия, что у плашек номеров */
    background: #e8f7f9;
}

#tx-answer .tx-arrow:focus-visible {
    outline: 2px solid #35859d;
    outline-offset: 2px;
}

/* ★currentColor, а не свой цвет: иначе смена color у кнопки красит
   рамку и не красит знак — на этом я один раз уже споткнулся. */
#tx-answer .tx-arrow svg { stroke: currentColor; }

/* ==================================================================
   5. КАРТОЧКА ОТВЕТА
   ------------------------------------------------------------------
   ★Боковой padding 12px, не 26. Замер: с 26px строка была 291px и
   31 символ; 14px дали 15 строк, 12px — 14 строк. Дальше (10 и 8px)
   ширина растёт, а число строк НЕ меняется: перенос дискретен, лишние
   пиксели уходят в поле. 12px — точка, где польза кончается.
   ★На мобильном карточка идёт во всю ширину экрана: боковых границ
   нет, только верхняя и нижняя.
   ================================================================== */

/* ★Жёлтая линия #F8DEA3 — язык разделения ХАБА учебника: там ею
   обведена карточка `.item` и отбит блок рекомендаций. На мобильной
   странице ответа линий ДВЕ: под крошками (верх страницы) и над блоком
   «номер + ответ».
   ★Третьей — под ответом, перед оценкой — больше нет (ТЗ §9): карточка
   оценки имеет собственный фон и скругление, линия перед ней рисовала
   границу там, где её и так видно, и съедала отбивку.
   ★Толщина 1px, а не 3: на телефоне трёхпиксельная полоса во всю
   ширину читается как самостоятельная секция, а не как граница.

   ★ШКАЛА ВЕРТИКАЛЬНЫХ ИНТЕРВАЛОВ (ТЗ §15), одна на страницу:
      крошки → линия     16
      линия → H1         24
      H1 → учебник       20
      учебник → издания  24
      издания → линия    24
      линия → номер      24
      номер → плашка     24 + собственный отступ плашки
      плашка → ответ     задан внутри ответа, обвязке не подчиняется
      ответ → оценка     32 + собственный нижний отступ последнего блока
      оценка → номера    32
      номера → подвал    32
   За каждый интервал отвечает ОДИН блок обвязки: наши отступы между
   собой не складываются.

   ★На стыках с ответом складываются — и это осознанно. Внутренние
   отступы разбора выверены отдельно и правке не подлежат (см. §8c),
   поэтому на границе видно нашу отбивку ПЛЮС его собственную. Гасить
   его отступы снаружи мы пробовали 14.08 и откатили: обвязка не должна
   зависеть от того, чем именно начинается и заканчивается конкретный
   ответ (у одного это часть с нижним отступом 18px, у другого блок
   пояснений с 4px). */
#tx-answer {
    border-top: 1px solid #f8dea3;
    /* Отбивку «крошки → линия» держат сами крошки (см. §8b), поэтому
       здесь ноль: два отступа на один зазор — это уже не шкала. */
    margin-top: 0;
    /* ★12px, как на хабе (там 11). Прежние 24 отодвигали заголовок так,
       что линия зависала сама по себе, а первый экран рос. */
    padding-top: 12px;     /* линия → H1 */
}

#tx-answer .tx-card {
    border-top: 1px solid #f8dea3;
    border-bottom: 0;
    background: #fff;
    /* Снизу ноль: расстояние до карточки оценки задаёт она сама. */
    padding: 16px 0 0;
}

/* ★Ни границ, ни тени: карточку ответа теперь обводит жёлтая линия у
   `.tx-card`. Прежние серые 1px остались от решения, когда ответ
   отделялся серым, и шли на 60px выше и ниже жёлтых, да ещё во всю
   ширину экрана против 345px — выходили двойные разделители.
   Тень тоже бессмысленна: фон страницы #f9f7f7 против белого — шесть
   единиц, ронять на него тень не на что. */
#tx-answer .exercise {
    /* ★Ни собственных полей, ни выхода за контейнер: текст ответа стоит
       на той же оси 15px, что крошки, H1 и полоска номеров. Прежние
       `margin: 0 -30px` + `padding: 12px` давали ТРЕТЬЮ ось в 12px и
       ради 6px ширины строки ломали всю сетку страницы. */
    padding: 0;
    border-radius: 0;
    /* ★border:0 обязателен: `.exercise` обведена ещё и в answer-render.css
       (`border: 1px solid var(--line)` — карточка упражнения во вьюере).
       Там она уместна, здесь дублирует жёлтую линию карточки. */
    border: 0;
    box-shadow: none;
    margin: 0;
    /* Широкое содержимое не должно растягивать страницу */
    overflow-x: auto;
}

/* ==================================================================
   6. ОЦЕНКА ОТВЕТА  —  маскот и четыре состояния
   ------------------------------------------------------------------
   Состояния: ask → yes | no → sent. Все панели лежат в разметке,
   переключает их data-state, поэтому блок жив и до срабатывания JS.

   ★Утка 56px во ВСЕХ состояниях (решение владельца 14.08). 56 — тот
   потолок, при котором «утка + Ответ помог? + Да + Нет» ещё держится
   одной строкой на 375px; раз это потолок, он же и общий размер, а не
   «где-то крупнее, где-то мельче».
   ★width/height у картинки проставлены в разметке: без них блок
   дёргается в момент подгрузки, а это CLS на самом видном месте.
   ★Высота НЕ фиксирована: панели разной высоты по своей природе
   (одна строка против четырёх чипов). Ниже блока только полоска
   номеров, её сдвиг безобиден — в отличие от сдвига самого ответа.
   ================================================================== */

/* ★Две колонки, а не строка: у маскота своё место в сетке, а заголовок
   и причины лежат в правой колонке с ОДНИМ левым краем. До этого ряд
   причин выносился на всю ширину карточки — ширина решалась, но утка
   повисала над первым чипом, и три элемента читались по трём разным
   вертикальным осям. */
/* ★Оценка — отдельный компонент, а не строка в пустоте: своя подложка,
   внутренние поля 16px и постоянный зазор 12px между уткой и текстом.
   Раньше маленькая утка с короткой строкой висели посреди белого поля
   и не читались как блок. */
#tx-answer .tx-vote {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 16px;
    align-items: center;
    /* ★Подложка чуть глубже прежней #faf8f5. Кнопки «Да/Нет» стали
       белыми без рамки (см. ниже), и на #faf8f5 у них не было края
       вовсе — 1.06:1, форму держала одна тень. На #f2eee7 это 1.16:1:
       немного, но край уже читается, и тень работает не в одиночку. */
    background: #f2eee7;
    border-radius: 16px;
    padding: 16px;
    /* ★Своей линии у блока нет и жёлтой над ним больше тоже: карточка
       сама себе граница — фон и скругление. Отбивки держит она же,
       ответ и полоска номеров своих не добавляют. */
    margin: 24px 0;
}

#tx-answer .tx-vote__duck {
    width: 72px;
    height: 72px;
    flex: none;
    display: block;
}

/* ★Высота правой колонки зарезервирована ЗАРАНЕЕ — под самое высокое
   из состояний (вопрос + ряд кнопок 48px). Иначе после нажатия «Да»
   карточка схлопывалась бы до одной строки и полоска номеров прыгала
   бы вверх ровно в тот момент, когда человек смотрит на утку.
   Состояние «нет» с четырьмя причинами выше — там рост осознанный:
   на экране появляется новый выбор, а не подменяется старый. */
#tx-answer .tx-vote__body {
    flex: 1;
    /* без этого длинный чип распирает колонку и ряд не переносится */
    min-width: 0;
    min-height: 84px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: min-height .22s ease;
}

/* ★Единственное состояние, которое в 84px не влезает: четыре причины
   сеткой 2×2. Высота задана явно и МЕНЯЕТСЯ ПЛАВНО — иначе карточка
   подскакивает на полсотни пикселей, утаскивая за собой полоску
   номеров. Значение с запасом: если подпись чипа переносится на две
   строки, блок просто станет выше — min-height на то и минимум. */
#tx-answer .tx-vote[data-state="no"] .tx-vote__body { min-height: 136px; }

/* --- панели --- */
#tx-answer .tx-vote__pane { display: none; }

#tx-answer .tx-vote[data-state="ask"]  .tx-vote__pane--ask,
#tx-answer .tx-vote[data-state="yes"]  .tx-vote__pane--yes,
#tx-answer .tx-vote[data-state="no"]   .tx-vote__pane--no,
#tx-answer .tx-vote[data-state="sent"] .tx-vote__pane--sent {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    /* Смена состояния — не мгновенная подмена: панель проявляется.
       Двигать при этом нечего, высота уже зарезервирована. */
    animation: tx-pane-in .18s ease-out both;
}

/* ★Вопрос и кнопки — В ДВЕ СТРОКИ, а не в одну (ТЗ §10). Строкой
   «утка + вопрос + Да + Нет» блок читался как панель инструментов, а
   не как обращение к читателю; на 320px он к тому же упирался в край. */
#tx-answer .tx-vote[data-state="ask"] .tx-vote__pane--ask {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;             /* вопрос → кнопки */
}

#tx-answer .tx-vote__q {
    font-size: 18px;
    font-weight: 500;
    color: #1d1d1f;
}

/* Кнопки «Да / Нет» — блочные (flex ради центровки), поэтому им нужен
   свой flex-контейнер, иначе встают друг под друга. */
#tx-answer .tx-vote__btns {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ★ЗАЛИВНЫЕ, а не контурные — и это про иерархию, а не про красоту.
   Голосование нужно нам, а не читателю; полоска номеров нужна ему.
   Пока обе пары кнопок были контурными, одного размера и одной
   толщины, они читались как равные, причём серо-коричневая рамка по
   светлоте перебивала голубую — второстепенное громче главного.
   Теперь внизу страницы контурный элемент один: номера. Туда и идёт
   взгляд.
   ★Рамка оставлена прозрачной, а не убрана: полтора пикселя участвуют
   в размере (box-sizing: border-box), и без них кнопка подросла бы
   на 3px и разъехалась с остальными по высоте. */
#tx-answer .tx-vote__btn {
    appearance: none;
    min-height: 48px;
    min-width: 86px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border: 1.5px solid transparent;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(60, 50, 35, .12);
    transition: box-shadow .15s ease;
    /* ★Отдельными свойствами, а не сокращением `font`. Здесь стояло
       `font: 600 14px/1 inherit`, и это НЕВАЛИДНАЯ запись: в сокращении
       на месте семейства `inherit` не допускается, поэтому браузер
       отбрасывал объявление целиком. Кнопки все эти месяцы набирались
       унаследованными 15px обычного начертания — ровно тем «выглядит
       неактивной», из-за которого их и попросили переделать (ТЗ §10).
       Та же ловушка была у подписи «Перейти к номеру» и у кнопки
       «Все номера учебника»; в `.tx-vote__chip` ниже она ЖИВА — чипы
       ТЗ не касается, чинить их надо заходом по десктопу. */
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    color: #1d1d1f;
    cursor: pointer;
}

/* Наведение (проба hover-ab, принято Тимом 25.08: Т1+С1+В1).
   Табы и стрелки — бирюзовый tint, язык плашек номеров; активный таб
   hover не получает, он уже выбран. «Да/Нет» — подъём тенью: кнопка
   остаётся белой, край к подложке держится 1.16:1 (прежний hover
   #f7f4ef тонул в подложке #f2eee7 — 1.05:1).
   ★Только при настоящем указателе: без (hover:hover) подсветка
   залипает на тачах после тапа. */
@media (hover: hover) {
    #tx-answer .tx-tab:not(.is-active):hover { background: #e8f7f9; }
    #tx-answer .tx-arrow:hover { background: #e8f7f9; }
    #tx-answer .tx-vote__btn:hover { box-shadow: 0 3px 8px rgba(60, 50, 35, .18); }
}

#tx-answer .tx-vote__btn:active {
    transform: translateY(1px);
    background: #efebe4;
    box-shadow: none;
}

#tx-answer .tx-vote__btn:focus-visible,
#tx-answer .tx-vote__chip:focus-visible {
    outline: 2px solid #35859d;
    outline-offset: 2px;
}

@keyframes tx-pane-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* --- причины --- */
#tx-answer .tx-vote[data-state="no"] .tx-vote__pane--no {
    display: block;
}

#tx-answer .tx-vote[data-state="no"] .tx-vote__q {
    display: block;
    margin-bottom: 8px;
}

/* ★Сетка 2×2, а не свободный перенос. В колонке рядом с уткой 247px, и
   четыре чипа в один ряд туда не помещаются при любом раскладе. Ровные
   две пары читаются собраннее рваного переноса, а колонки одинаковой
   ширины держат общий левый край с заголовком.
   ★align-items: stretch — чипы в строке одной высоты, даже если текст
   в одном из них переносится. */
#tx-answer .tx-vote__reasons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* ★1fr по рядам: «В решении ошибка» не влезает в 121px колонки и
       переносится на две строки. Без выравнивания рядов первая пара
       выходит 50px, вторая 38 — сетка сразу читается как случайная.
       Так все четыре плашки одинаковые. */
    grid-auto-rows: 1fr;
    gap: 6px;
}

#tx-answer .tx-vote__chip {
    appearance: none;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    padding: 0 11px;
    border: 1.5px solid #a9a6a1;   /* тот же нейтральный серый, что у изданий */
    border-radius: 12px;
    background: #fff;
    font: 500 13px/1 inherit;
    color: #515158;
    cursor: pointer;
    /* «Другое» — ссылка на форму ошибок, но выглядеть должна как чип */
    text-decoration: none;
    justify-content: center;
    text-align: center;
    line-height: 1.2;
    padding-top: 6px;
    padding-bottom: 6px;
}

/* Мобильная подпись по умолчанию; десктопная включается ниже */
#tx-answer .tx-vote__full { display: none; }

#tx-answer .tx-vote__chip:active {
    transform: translateY(1px);
    background: #f6f4f1;
}

/* --- бейдж «записали» --- */
#tx-answer .tx-vote__badge {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-left: 7px;
    vertical-align: -.34em;
    opacity: 0;
    transform: scale(.84);
    animation: tx-badge-pop .34s cubic-bezier(.2, .86, .28, 1.28) .15s forwards;
}

#tx-answer .tx-vote__badge svg { width: 100%; height: 100%; display: block; }

#tx-answer .tx-vote__check {
    stroke-dasharray: 22;
    stroke-dashoffset: 22;
    animation: tx-check-draw .22s ease-out .29s forwards;
}

@keyframes tx-badge-pop {
    0%   { opacity: 0; transform: scale(.84); }
    72%  { opacity: 1; transform: scale(1.06); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes tx-check-draw { to { stroke-dashoffset: 0; } }

/* --- запасная ссылка --- */
/* Видна только пока JS не подхватил блок: со скриптом причина уходит
   чипом, без скрипта — остаётся обычная форма. */
#tx-answer .tx-vote__fallback {
    font-size: 13px;
    color: #515158;   /* было #8a8a90 — 3.5:1 */
    align-self: center;
    /* ★Во всю ширину карточки, а не в колонку утки: без скрипта ссылка
       оказывалась под маскотом вторым рядом первой колонки и читалась
       как его подпись. Со скриптом блок скрыт, поэтому на вид страницы
       правило не влияет — только на случай, когда JS не отработал. */
    grid-column: 1 / -1;
}

#tx-answer .tx-vote.is-live .tx-vote__fallback { display: none; }

@media (prefers-reduced-motion: reduce) {
    #tx-answer .tx-vote__badge {
        opacity: 1;
        transform: none;
        animation: none;
    }
    #tx-answer .tx-vote__check {
        stroke-dashoffset: 0;
        animation: none;
    }
    #tx-answer .tx-vote[data-state] .tx-vote__pane { animation: none; }
    #tx-answer .tx-vote__body { transition: none; }
}

/* ==================================================================
   7. ПОЛОСКА СОСЕДНИХ НОМЕРОВ
   ------------------------------------------------------------------
   Бирюзовый #42b7c8 — тот же, которым на хабе набраны ссылки на
   ответы. Со страницы сейчас ведут ВСЕГО ДВЕ ссылки на другие ответы;
   полоска даёт десяток — самая дешёвая перелинковка при 65 658
   будущих URL.
   ================================================================== */

#tx-answer .tx-strip {
    background: #fff;
    padding: 0 0 32px;     /* навигация → подвал (ТЗ §15) */
}

/* ★Не подпись мелким серым, а полноценный заголовок раздела (ТЗ §11):
   13px/600 в цвете #6e6e76 читались как выключенная кнопка над рядом
   активных. 18px/500 почти чёрным — это уже обращение. */
#tx-answer .tx-strip__title {
    /* отдельными свойствами — см. ловушку с `font: … inherit` в §6 */
    font-weight: 500;
    font-size: 18px;
    line-height: 1.3;
    color: #1d1d1f;
    margin: 0 0 12px;      /* надпись → ряд номеров */
}

#tx-answer .tx-strip__grid {
    display: grid;
    gap: 8px;
}

/* ★Полоска номеров набрана DIN, хотя вся остальная страница — Fira.
   Это не исключение из правила, а само правило: полоска и сетка
   номеров на хабе — ОДИН и тот же орган навигации, и переносить его
   между страницами он должен, не меняя облика. На хабе плашка —
   DIN 19/700, здесь была Fira 19/700: одна и та же кнопка в двух
   шрифтах, и цифры в ней разной формы.
   ★Правило страницы при этом не ломается: Fira остаётся у всего, что
   ЧИТАЮТ, DIN — у того, что просматривают. Полоска обведена рамками
   и читается как отдельный блок управления, а не как текст. */
#tx-answer .tx-strip__num,
#tx-answer .tx-strip__all {
    font-family: DINRoundPro, sans-serif;
}

#tx-answer .tx-strip__num {
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    /* ★Цвет прямо хабовский: на хабе номера набраны #42b7c8. Наш
       прежний #7fd0d9 давал 1.76:1 — бледнее, чем на сайте.
       ★Толщина 1.5, а не хабовские 2: решение владельца. Кнопки у нас
       крупнее хабовских (52px против 35), и двухпиксельная рамка на них
       читается тяжелее, чем та же двойка на мелких. */
/* ★Контраст поднят до нормы (решение владельца 17.08). Было
   #3aa9b8 на белом — 2.78:1, и #42b7c8 — 2.38:1 при норме 3:1 для
   крупного жирного текста и для границ элементов управления. Стало
   3.35 и 3.13. Оттенок тот же, темнее на полтона: на глаз почти
   неразличимо, но на солнце и на тусклом экране цифра перестаёт
   выцветать первой.
   ★Меняется В ДВУХ файлах разом — здесь и в book-page.css: полоска
   номеров страницы ответа и сетка номеров хаба обязаны совпадать. */
    border: 1.5px solid #2f9fb0;
    border-radius: 12px;
    background: #fff;
    color: #3499a8;
    /* ★DIN — та же плашка, что на хабе. Семейство задаём здесь, в
       сокращении: сокращение font сбрасывает font-family, и отдельное
       правило выше оно бы перебило. */
    font: 700 19px/1 DINRoundPro, sans-serif;
    text-decoration: none;
}

/* ★Дальние соседи (дальше ±2 от текущего) живут в разметке ради
   десктопного ряда «8 плиток + Все номера» (решение владельца 19.08);
   на мобильном скрыты — там принятые пять плиток. Инлайновые колонки
   грида сервер пишет по числу БЛИЖНИХ плиток (textpages.php), иначе
   пять видимых плиток легли бы в восемь узких колонок.
   ★Правило обязано стоять ПОСЛЕ базового .tx-strip__num: у того
   display: flex при равной специфичности, побеждает порядок. */
#tx-answer .tx-strip__num--far { display: none; }

#tx-answer .tx-strip__num:active {
    transform: translateY(1px);
    background: #f2fbfc;
}

#tx-answer .tx-strip__num:focus-visible,
#tx-answer .tx-strip__all:focus-visible {
    outline: 2px solid #35859d;
    outline-offset: 2px;
}

/* ★Текущий номер: заливка фирменная, цифра ТЁМНАЯ, граница из той же
   голубой гаммы. Три решения, и у каждого своя причина.

   ★Цифра тёмная, а не белая (решение владельца 15.08, отменяет ТЗ §12).
   Белым по #4dbcc9 выходило 2.25:1 при норме 4.5:1 для текста. Чинить
   можно было двумя путями: затемнить заливку до ~#26808d и оставить
   белый, либо оставить заливку и затемнить цифру. Взяли второе:
   фирменный голубой остаётся тем же, что в рамках соседних номеров —
   весь ряд держится на одном цвете, меняется только заливка. При первом
   пути активный номер уезжал в другой оттенок, и рядом с соседями
   получалось два разных голубых.

   ★#1d1d1f — основной тёмный сайта, 7.5:1 к заливке. Не из семьи
   заливки, и это осознанно: номер связывается с текстовой частью
   страницы, а не с голубым.
   ★Прежний #332f3a давал 5.81 — тоже выше нормы 4.5, менялся не ради
   читаемости, а ради единой шкалы: после сведения тёмных к двум он
   оставался единственным третьим. Пробовали цвет H1 #46424b, он
   просился по смыслу, но даёт 4.37 — мимо нормы на полшага.

   ★Граница #3aa9b8 — оттенок той же заливки. Прежний #2c7fb8 был синим
   из другой палитры и читался третьим цветом поверх голубой кнопки;
   владелец поймал это на десктопе. Теперь одинаково везде. */
#tx-answer .tx-strip__num.is-current {
    background: #4dbcc9;
    border-color: #2f9fb0;
    color: #1d1d1f;
}

/* Вторичная кнопка: тот же голубой род, но на шаг светлее номеров —
   она ведёт со страницы, а не по соседним номерам. */
#tx-answer .tx-strip__all {
    margin: 10px 0 0;      /* сетка номеров → «все номера»: внутри блока */
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #5cc3ce;
    border-radius: 12px;
    background: #fff;
    /* тот же затемнённый бирюзовый, что у номеров */
    color: #3499a8;
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    text-decoration: none;
}

/* ==================================================================
   8. СЛОТЫ РЕКЛАМЫ
   ------------------------------------------------------------------
   ★min-height задан ЗАРАНЕЕ у каждого слота. Баннеры приезжают
   клиентским запросом на /banners/; без резерва места контент прыгает
   при подгрузке, а это прямой удар по CLS и, значит, по ранжированию.
   ★Правило по высоте ответа (пороги пересчитаны 13.08):
      до 1000px    — только нижний горизонтальный 320×100
      1000–1850px  — + верхний 320×100, нижний 300×250
      больше 1850  — + внутренний 300×250
   ★Нижняя закреплённая плашка в расчёт входит (+167px к каждому порогу),
   но её выдаёт код партнёра, вставленный в body, — наша разметка её
   не рисует и не должна.
   Узкое место — не длинные ответы, а СРЕДНИЕ: у них мало контента при
   уже полном наборе.
   ================================================================== */

#tx-answer .tx-ad {
    margin: 14px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

#tx-answer .tx-ad--h {              /* горизонтальный 320×100 */
    width: 320px;
    min-height: 100px;
}

#tx-answer .tx-ad--rect {           /* прямоугольник 300×250 */
    width: 300px;
    min-height: 250px;
}

#tx-answer .tx-ad--top { margin: 0 auto 16px; }

#tx-answer .tx-ad--side {           /* боковой 300×600, только десктоп */
    display: none;
    width: 300px;
    min-height: 600px;
    margin: 0;
}

/* ★Внутренний баннер — врезка в потоке разбора.
   Отбивки заметно больше обычных (24px против 14): баннер стоит между
   абзацами одного ответа, и без воздуха он читается как продолжение
   текста. Линии сверху и снизу говорят «это не часть разбора» без
   надписи — маркировку ставит сама рекламная система. */
#tx-answer .tx-ad--inside {
    margin: 24px auto;
    padding: 16px 0;
    border-top: 1px solid #ecebe8;
    border-bottom: 1px solid #ecebe8;
}

/* На мобильном правой колонки нет вовсе */
#tx-answer .tx-side { display: none; }

/* ==================================================================
   8b. ХЛЕБНЫЕ КРОШКИ НА СТРАНИЦЕ ОТВЕТА
   ------------------------------------------------------------------
   ★Единственные правила в файле БЕЗ префикса `#tx-answer` — и это
   намеренно: крошки шаблон рисует выше нашего <article>, достать их
   изнутри области нельзя. Ограничение здесь другое: сам файл
   подключается только на страницах ответа, поэтому на хабах и в
   остальном сайте эти правила не существуют.

   ★Задача. Пятизвенная цепочка не влезает в 345px: у упражнения ей
   нужно 408px, у контрольных вопросов — 556. Перенос на вторую строку
   ломает саму идею пути, поэтому середина сворачивается в «…», а
   слишком длинное имя текущей страницы обрезается многоточием.
   ★Разметка при этом остаётся полной (пять позиций schema.org):
   крошки в выдаче Google строит из неё, а не из видимого текста.
   ================================================================== */

.breadcrumbs {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    /* ★Возвращаем 4px, которые съел flex. У шаблонного разделителя
       margin `0 2px 0 6px`, и симметричным он выглядел только потому,
       что справа добавлялся пробел между <li> из разметки: 6 слева
       против 2+4 справа. В flex-контейнере такие пробелы схлопываются,
       и слэш поехал вправо — замер на хабе показал ровно эти 4px. */
    gap: 4px;
}

/* ★li тоже flex — по той же причине: между `</a>` и `<meta>`/`</li>`
   XSL оставляет перенос строки, и он выводится пробелом 3.5px перед
   разделителем. Внутри flex-контейнера пробельные узлы не отображаются. */
.breadcrumbs li {
    flex: none;
    display: flex;
    align-items: baseline;
}

/* ★Ссылка — inline-flex, чтобы схлопнуть пробелы ВНУТРИ неё. XSL выводит
   `<a>` с отступами (`indent="yes"` в шапке шаблона), переносы строк
   становятся пробелом в 3.5px: подчёркивание тянулось за последнюю
   букву, и до разделителя выходило 9.5px против 6px с другой стороны.
   В flex-контейнере такие пробельные узлы не отображаются. */
.breadcrumbs li a { display: inline-flex; }

/* Текущая страница ужимается первой и получает многоточие: у контрольных
   вопросов её имя само по себе 251px из 345. */
.breadcrumbs li:last-child {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ★Кегль многоточия — как у ссылок крошек (14px). Без этого span
   наследует 15px от <li>, знак выходит крупнее соседей и вокруг него
   появляется лишний воздух: замер показал 17px до слэша против 13px
   у обычных звеньев. */
.breadcrumbs .crumb-dots {
    font-size: 14px;
    color: #1d1d1f;   /* был #332f3a — тот же третий тёмный */
}

/* ★Селекторы с `.breadcrumbs` впереди — иначе не работает: у шаблона
   есть `.breadcrumbs li { display: inline }` со специфичностью (0,1,1),
   и голый `.crumb-mid` (0,1,0) ему проигрывает. Ровно та же ловушка,
   что с межстрочным интервалом разбора. */
.breadcrumbs .crumb-dots { display: none; }

@media (max-width: 899px) {
    .breadcrumbs .crumb-mid  { display: none; }
    .breadcrumbs .crumb-dots { display: inline; }

    /* ★Крошки стоят ПОСЕРЕДИНЕ полосы: 8px до верхнего края белого
       блока и 8px до жёлтой линии — ровно так они набраны на хабе.
       Ноль у `#tx-answer` сверху, чтобы отбивку держал один блок.
       Раньше линию окружали 24px сверху и 24 снизу, и она читалась не
       как граница разделов, а как отдельная секция ни о чём. */
    .breadcrumbs { margin: 8px 0; }

    /* ★Крошки лежат в шаблонной обёртке `.padding__h`, а у неё СВОИ
       боковые поля: 6% в промежутке 476–768px и ноль ниже 475px.
       Из-за этого на 320–430 цепочка случайно совпадала с нашей осью, а
       на 480 уезжала вправо на 27px — то есть ось расходилась ровно на
       одной из контрольных ширин. Гасим поля обёртки: за ось на
       странице ответа отвечает только контейнер. */
    #content .padding__h { padding-left: 0; padding-right: 0; }
}

/* ==================================================================
   8c. МОБИЛЬНАЯ ЧАСТЬ ЧУЖИХ БЛОКОВ
   ------------------------------------------------------------------
   ★ВНУТРЬ ОТВЕТА НЕ ЛЕЗЕМ. Плашка части, абзацы, пояснения и всё
   расстояние между ними приезжают из answer-render.css — это
   порождённый файл, а его отступы и ритм выверены отдельно и заранее
   (решение владельца 14.08). Отсюда правило: обвязка подстраивается
   под ответ, а не наоборот. Единственный допустимый повод вернуться
   сюда — общее изменение кегля ответа, и тогда всё внутреннее
   уменьшается ПРОПОРЦИОНАЛЬНО и в самом порождающем файле, а не
   заплаткой здесь.

   Осталось только то, что к ответу отношения не имеет: подвал сайта.
   ================================================================== */

/* ★ПОЧИНКА, а не оформление — поэтому вне медиазапроса и вопреки
   правилу «внутрь ответа не лезем».

   Слайды презентации объявлены в answer-render.css как
   `aspect-ratio: 16 / 9`, а текста в них больше, чем в такую высоту
   помещается: замер на 320px показал превышение от 12 до 230px. Ширина
   при этом НЕ задана, и дальше движки расходятся. Chrome растягивает
   элемент по контейнеру и высоту берёт из содержимого. WebKit (Safari
   на айфоне) в этом случае выводит ШИРИНУ из высоты по той же
   пропорции — и слайды получают 309, 507, 697px, каждый свою.

   Дальше срабатывает вторая половина ловушки: наш `<article>` лежит в
   безымянном `div` шаблона с `display: inline-block`, а такой блок
   подгоняется под самое широкое содержимое. Поэтому распирает не
   внутренний скроллер, а всю страницу — на записи владельца уезжает
   даже строка «Упражнение 132».

   `width: 100%` делает ширину определённой, и пропорции остаётся только
   высота. В Chrome правило не меняет ничего: там слайд и так во всю
   ширину. */
#tx-answer .slide { width: 100%; }

/* ★Черта в фонетическом разборе («3 б., 4 зв.») — это `<hr>`, а у
   шаблона сайта есть своё правило на ВСЕ `hr`:
       hr { border: 0; background: #f8dea3; height: 3px; }
   то есть жёлтая полоса в 3px — тот самый декоративный разделитель.
   Разбор рисует поверх неё чёрную рамку сверху, но фон и высоту не
   гасит, и на экране выходят две линии: чёрная и жёлтая под ней.
   Гасим лишнее, оставляя школьную черту. */
#tx-answer .ph-divider,
#tx-answer .phonetic-divider {
    background: none;
    height: 0;
}

@media (max-width: 899px) {

    /* ★Страховка от той же беды в будущем: безымянная обёртка шаблона —
       `inline-block`, то есть подгоняется под содержимое. Любой широкий
       элемент внутри ответа снова растащит страницу. `max-width: 100%`
       не даёт ей вырасти шире контейнера; широкое содержимое после
       этого остаётся внутри своего скроллера (`.exercise`).
       Только мобильная: на десктопе рядом стоит вторая колонка
       шаблона, и трогать её раскладку мы не будем. */
    #content .sidebar-block > div { max-width: 100%; }

    /* ★ЕДИНСТВЕННОЕ исключение — хвост. У последнего блока разбора свой
       нижний отступ (18px у части, 4px у блока пояснений), и он ни к
       чему не ведёт: ответ на нём кончился. Из-за него расстояние до
       карточки оценки плавало от номера к номеру — 50px на упр.8 и
       36px на упр.46. Гасим только его; ритм ВНУТРИ ответа — между
       абзацами, плашкой и пояснениями — не трогаем.
       ★Гасить нужно на двух уровнях: у `.exercise` стоит
       `overflow-x: auto`, это отдельный контекст форматирования, и
       отступ последнего блока наружу не выносится, а складывается. */
    #tx-answer .ex-body > :last-child { margin-bottom: 0; }
    #tx-answer .ex-body > :last-child > :last-child { margin-bottom: 0; }

    /* ★Нижняя безопасная область iPhone — в самом подвале (ТЗ §13).
       175px — шаблонный отступ под картинку со стопкой книг; прибавка
       уходит ПОД неё, поэтому рисунок не сдвигается, а тёмная подложка
       достаёт до нижнего края экрана. */
    footer { padding-bottom: calc(175px + env(safe-area-inset-bottom)); }
}

/* ==================================================================
   9. ДЕСКТОП
   ------------------------------------------------------------------
   ★Обвязка здесь СОБИРАЕТСЯ В КАРТОЧКУ, в отличие от мобильного.
   Инвариант один: белая карточка = контент, ради которого пришли.
   На 375px две белые карточки подряд дают сплошное белое поле без
   контраста; на 1280px места хватает, чтобы обе читались как объекты.
   ★Шапка в две колонки: обложка слева, H1 и мета справа, табы под
   блоком во всю ширину. Замер: до ответа 393px вместо 616.
   ★Табы выносить под блок обязательно — в правой колонке они
   оставляли под обложкой пустоту 84px. И НЕ увеличивать обложку ради
   этой пустоты: при 128px H1 переносится на 4 строки и блок растёт.
   ================================================================== */

@media (min-width: 900px) {

    /* ★НЕ делаем свой двухколоночный грид. У шаблона сайта СВОЙ сайдбар:
       контентная колонка ограничена 790px, справа отдельная колонка, где
       баннер уже стоит. Я сперва выстроил здесь grid 620+300 — он в 790px
       не влез и схлопнулся. Проверять чужую разметку до того, как строить
       свою поверх неё. */

    /* ★ДЕСКТОП ПРИНЯТ ВЛАДЕЛЬЦЕМ 19.08 по пробе
       _preview/answer-desktop.html: система десктопного хаба
       (book-page.css раздел 22) — тёплый серый лист, белые карточки,
       жёлтые линии 3px сняты (границы дают карточки и воздух).
       ★Лист красится с 900, а не с 1171 как на хабе: раскладка ответа
       становится десктопной уже здесь, и белые карточки без листа
       сливались бы с фоном. #main обязателен — белый задаёт склейкин
       «#main > .container», без ID наше правило проигрывает. */
    #main > .container:has(#tx-answer) { background: #f7f6f3; }

    /* бежевый псевдофон баннерной колонки склейки — третий фон без
       причины на сером листе (тот же приём, что на хабе) */
    .container:has(#tx-answer) .sidebar-block::before { background: transparent; }

    /* ★Верхний отступ в ноль: стык «крошки → карточка» держит
       margin-bottom 20 самих крошек — ровно как на хабе. */
    #tx-answer {
        padding: 0 0 34px;
        border-top: 0;
        margin-top: 0;
    }

    /* Ширина строки: при 19px и колонке 790px в строке ~83 символа —
       заметно выше комфортных 45–75. Ограничиваем сам текст, а не блок,
       чтобы карточки остались во всю ширину колонки. */
    #tx-answer .ex-body { max-width: 640px; }

    #tx-answer .tx-head {
        background: #fff;
        border-radius: 14px;
        padding: 24px;
        margin: 0 0 20px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .07);
    }

    /* H1 28/700 — кегль H1 хаба.
       ★Низ 12 — возврат к исходному ритму (25.08): поджатие 12→7
       делалось под ТРЁХстрочный H1 варианта Б, чтобы мета не выходила
       за контур обложки; короткий H1 варианта В занимает две строки,
       и причина поджатия исчезла. */
    #tx-answer .tx-h1 {
        font-size: 28px;
        line-height: 1.2;
        font-weight: 700;
        color: #1d1d1f;
        margin: 0 0 12px;
    }

    /* обложка слева, справа H1 и под ним мета — та же разметка,
       другие grid-области.
       ★grid-template-rows auto 1fr обязателен (фикс 25.08): обложка
       124px растянута на обе строки, и при коротком H1 варианта В её
       лишняя высота раздавалась в строку H1 — зазор H1→мета раздувался
       до 25–34px и плавал от состава меты. С 1fr весь излишек уходит
       во вторую строку, ПОД мету, и зазор всегда равен маргину H1. */
    #tx-answer .tx-headgrid {
        grid-template-columns: 124px 1fr;
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "cover h1"
            "cover meta";
        gap: 0 24px;
        align-items: start;
        margin: 0;
    }

    /* ★Обложка ровно хабовская (правка владельца 19.08): карточка
       учебника на хабе и шапка ответа — один узел. Плита 124 =
       снимок 106 + белая рамка 9, тень и скругление хаба.
       Проверено: H1 при этом остаётся в 3 строки (страх ТЗ про
       4 строки при широкой обложке не сбылся — держат 28px и
       неразрывные пробелы). */
    #tx-answer .tx-cover {
        box-sizing: border-box;
        width: 124px;
        border: 9px solid #fff;
        border-radius: 3px;
        background: #fff;
        box-shadow: 0 5px 16px rgba(194, 196, 201, .38);
    }
    #tx-answer .tx-meta  { font-size: 15px; align-self: start; }
    #tx-answer .tx-meta__authors { font-size: 13px; line-height: 1.32; }

    /* ★Табы под блоком шапки, во всю ширину: они относятся ко всей
       странице, а не к учебнику, и в правой колонке оставляли под
       обложкой пустоту 84px.
       ★Прокручиваемый ряд — мера мобильная: в колонке 746px четыре
       редакции стоят по своей ширине и никуда не едут. */
    /* Табы под шапкой с воздухом 20 (правка владельца 19.08),
       вид — принятый мобильный ряд; прокрутка не нужна, стоят по
       своей ширине. */
    #tx-answer .tx-tabs {
        margin: 20px 0 0;
        padding: 0;
        gap: 8px;
        overflow: visible;
        scroll-snap-type: none;
    }

    #tx-answer .tx-tab {
        flex: 0 0 auto;
        min-height: 46px;
        padding: 0 14px;
        border-width: 1.5px;
        border-color: #a9a6a1;
        border-radius: 12px;
        font-size: 15px;
    }

    #tx-answer .tx-card {
        background: #fff;
        border-radius: 14px;
        padding: 24px;
        border-bottom: 0;
        border-top: 0;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .07);
    }

    /* Номер и стрелки: прежние 44px и отбивка 12px до ответа. */
    #tx-answer .tx-numrow { min-height: 44px; gap: 8px; margin: 0 0 12px; }
    #tx-answer .tx-num    { font-size: 22px; }
    /* Стрелки как на мобильном (18.08): серая рамка, бирюзовый знак —
       красные ушли; 44px под курсор оставлены. */
    #tx-answer .tx-arrow  {
        width: 44px;
        height: 44px;
        border-width: 1.5px;
        border-color: #a9a6a1;
        border-radius: 12px;
        color: #3499a8;
    }

    #tx-answer .tx-arrow:active { background: #f6f4f1; }
    #tx-answer .tx-arrow:focus-visible { outline-color: #35859d; }

    #tx-answer .exercise {
        margin: 0;
        border: 0;
        box-shadow: none;
        padding: 0;
    }

    /* ★Оценка на десктопе остаётся строкой: утка 56px, вопрос 14px и
       кнопки в один ряд. Перекомпоновка в две строки (ТЗ §10) нужна
       там, где ширины не хватает, — на 790px её хватает с запасом. */
    /* Оценка — полоса в тоне полосы оценки хаба (11b): #f4f1eb, r16;
       с уткой 56 и полями 14 высота выходит те же ~84px, что у хаба.
       Стыки блоков — шаг 20, как между карточками хаба. */
    #tx-answer .tx-vote {
        grid-template-columns: 56px 1fr;
        gap: 12px;
        min-height: 61px;
        background: #f4f1eb;
        border-radius: 16px;
        margin: 20px 0;
        padding: 14px 20px;
    }

    #tx-answer .tx-vote__duck { width: 56px; height: 56px; }

    #tx-answer .tx-vote__body,
    #tx-answer .tx-vote[data-state="no"] .tx-vote__body {
        min-height: 0;
        display: block;
        transition: none;
    }

    #tx-answer .tx-vote[data-state="ask"] .tx-vote__pane--ask {
        flex-direction: row;
        align-items: center;
        gap: 9px;
    }

    #tx-answer .tx-vote__q    { font-size: 16px; font-weight: 500; color: #1d1d1f; }
    #tx-answer .tx-vote__btns { gap: 9px; }

    /* ★Состояние «нет» — в ТУ ЖЕ строку: вопрос и чипы рядом, высота
       полосы не меняется вовсе — ничего не прыгает (владелец 20.08:
       при ответе «Нет» полоска номеров скакала на 9px). Замер на 1280:
       вопрос ~185 + чипы ~415 + зазоры = ~620 из 682 доступных.
       На 900–1170 колонка уже: wrap базы переносит чипы вниз — там
       рост остаётся (редкая ширина, осознанно). */
    #tx-answer .tx-vote[data-state="no"] .tx-vote__q {
        margin: 0;
        flex: 0 0 auto;
    }
    /* база даёт панели причин display:block (мобильная двухстрочность) —
       здесь строка */
    #tx-answer .tx-vote[data-state="no"] .tx-vote__pane--no {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px;
    }

    /* Кнопки — принятый мобильный вид (белые с тенью), кегль 15/600:
       замороженные 15px/400 из-за невалидного `font: … inherit` (§6)
       закрыты этим заходом (проба принята 19.08). */
    #tx-answer .tx-vote__btn {
        min-height: 44px;
        min-width: 86px;
        border-width: 1.5px;
        border-color: transparent;
        border-radius: 12px;
        box-shadow: 0 1px 2px rgba(60, 50, 35, .12);
        font-size: 15px;
        font-weight: 600;
        line-height: 1;
        color: #1d1d1f;
    }

    /* чипы причин — мобильная рамка; кегль задуманных 13/500
       (тот самый «живой остаток» невалидного сокращения в §6) */
    #tx-answer .tx-vote__chip {
        border-width: 1.5px;
        border-color: #a9a6a1;
        border-radius: 12px;
        font-size: 13px;
        font-weight: 500;
    }

    /* Полоска — обвязка на сером, карточки нет (решение владельца
       19.08). Заголовок строкой, под ним ОДИН ряд во всю колонку:
       восемь плиток-соседей (дальние даёт --far, см. базовые правила)
       и «Все номера» последним элементом — кнопка тянется до края.
       ★Кнопка в разметке стоит ПОСЛЕ ряда — в строку её кладёт
       flex-wrap самой полоски, разметку не трогаем (мобильной
       нужна кнопка отдельной строкой). */
    #tx-answer .tx-strip {
        background: transparent;
        border-radius: 0;
        margin-top: 28px;
        padding: 0;
        box-shadow: none;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    /* заголовок секции на сером — как «Рекомендуем также» на хабе */
    #tx-answer .tx-strip__title {
        flex: 1 0 100%;
        margin: 0 0 12px;
        font-family: 'Fira Sans', sans-serif;
        font-size: 20px;
        font-weight: 700;
        line-height: 1.2;
        color: #1d1d1f;
    }

    /* ряд флексом: инлайновый грид PHP (колонки по мобильным плиткам)
       при display:flex не действует. wrap — страховка узкой колонки
       900–1170: на 1280 не срабатывает (568px из 790 свободных). */
    #tx-answer .tx-strip__grid {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        flex: 0 0 auto;
    }

    /* плитка ровно хабовская 64×44 (один орган навигации) */
    #tx-answer .tx-strip__num   {
        width: 64px;
        height: 44px;
        border-width: 1.5px;
        border-radius: 12px;
        font-size: 19px;
    }

    #tx-answer .tx-strip__num--far { display: flex; }
    #tx-answer .tx-strip__num:hover { background: #e8f7f9; }
    #tx-answer .tx-strip__num.is-current:hover { background: #4dbcc9; }

    /* ★Прежний синий #2c7fb8 у текущего номера убран и на десктопе:
       он был третьим цветом на голубой кнопке. Граница берётся из
       общего правила — оттенок собственной заливки. */
    #tx-answer .tx-strip__all   {
        height: 44px;
        flex: 1 1 auto;
        min-width: 0;
        white-space: nowrap;
        margin: 0 0 0 8px;
        border-width: 1.5px;
        border-radius: 12px;
        font-size: 16px;
        font-weight: 600;
        line-height: 1;
    }

    #tx-answer .tx-strip__all:hover { background: #f2fbfc; }

    /* Баннеры: верхний и нижний остаются в потоке. Боковой 300×600 живёт
       в сайдбаре ШАБЛОНА, свой слот здесь не нужен. */
    #tx-answer .tx-side,
    #tx-answer .tx-ad--side { display: none; }

    /* ★Внутренний баннер — тоже мобильная мера. На десктопе справа уже
       стоит 300×600, который виден всю прокрутку; врезка посреди текста
       поверх него — перебор по плотности при том же доходе. */
    #tx-answer .tx-ad--inside { display: none; }

    /* ★Причины: на 746px четыре плашки идут в строку по своему тексту
       (468px из 746). Сетка 2×2 нужна была только там, где колонка
       узкая; растягивать плашки до 367px незачем. */
    #tx-answer .tx-vote__reasons {
        grid-template-columns: repeat(4, max-content);
        grid-auto-rows: auto;
    }

    #tx-answer .tx-vote__short { display: none; }
    #tx-answer .tx-vote__full  { display: inline; }
}

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

#tx-answer .tx-arrow,
#tx-answer .tx-strip__num,
#tx-answer .tx-strip__all,
#tx-answer .tx-tab,
#tx-answer .tx-vote__btn,
#tx-answer .tx-vote__chip {
    -webkit-tap-highlight-color: rgba(52, 153, 168, .18);
}