/* Разборы о дробях в новом виде: запись дробей, тренажёр с числителем и знаменателем, рисунки со своим примером, решения под клик, таблица ответов */
/* Файл подключается после rd-ss.css и раньше rd.css, поэтому селекторы начинаются с html body.rd: иначе общие правила статьи перебивают здешние */

/* Дробь столбиком: числитель над чертой, слэш скрыт от глаз, но копируется */
html body.rd .fr { position: relative; display: inline-flex; flex-direction: column; align-items: center; vertical-align: .59em; margin: 0 .16em; font-family: var(--f-mono); font-size: .84em; font-weight: 500; line-height: 1; font-feature-settings: "tnum"; }
/* Черта во всю ширину дроби: у знаменателя «4 · 2» она не должна обрываться над одной цифрой */
html body.rd .fr__n { align-self: stretch; padding: 0 .24em; border-bottom: 1.4px solid currentColor; text-align: center; }
html body.rd .fr__d { align-self: stretch; padding: 0 .24em; text-align: center; }
html body.rd .fr__s { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
html body.rd .fr--tight { margin-right: -.14em; }
html body.rd .fr b { font-weight: 600; }
html body.rd .mx { display: inline-flex; align-items: center; }
html body.rd .mx__w { margin-right: .14em; font-family: var(--f-mono); font-size: .95em; font-weight: 500; }
html body.rd :is(p, li, dd, td, th, figcaption, .res):has(.fr) { line-height: 1.9; }

/* Формула с дробями крупнее, чем в системах счисления: дробь в ней набрана мельче строки */
html body.rd .formula { font-size: 24px; line-height: 2.1; }
html body.rd .formula .fr { font-size: .78em; }
html body.rd .formula .op { padding: 0 .18em; }
html body.rd .steps .res:has(.fr) { padding: 6px 12px; font-size: 17px; line-height: 1.9; }
html body.rd .steps .res .fr { font-size: .9em; }
html body.rd .formula--plain { margin: 16px 0; padding: 4px 0; background: none; border-radius: 0; font-size: clamp(17px, 2.2vw, 22px); text-align: left; }

/* Первый экран: переход к калькуляторам */
html body.rd .dd-cta .rd-label { margin: 0; }
html body.rd .dd-cta__h { margin: 0; font: 700 32px/1.15 var(--f-ui); letter-spacing: -.5px; color: var(--ink); }
html body.rd .dd-cta__h em { font-style: normal; color: var(--accent); }
html body.rd .dd-cta__p { margin: 0; font: 400 16px/1.55 var(--f-text); color: var(--mute); }
html body.rd .dd-cta__btn { align-self: flex-start; }
html body.rd .dd-cta__hint { margin: 0; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--mute); }

/* Текст разбора */
html body.rd .dd-c { text-align: center; }
html body.rd .dd-ul { margin: 16px 0 24px; padding-left: 20px; }
html body.rd .dd-ul li { margin: 0 0 8px; }
html body.rd .dd-ul li::marker { color: var(--accent); }

/* Таблица ответов: в заголовках дроби, поэтому без капители */
html body.rd .dd-tbl th, html body.rd .dd-tbl td { text-align: center; white-space: nowrap; }
html body.rd .dd-tbl th { font: 500 14px/1.3 var(--f-mono); letter-spacing: 0; text-transform: none; color: var(--ink); }
html body.rd .dd-tbl tbody th { font-weight: 600; }
html body.rd .dd-tbl td { font-family: var(--f-mono); }
html body.rd .dd-tbl .fr { font-size: .9em; }

/* Поля ответа: целая часть и дробь из двух полей */
html body.rd .finp input { width: 58px; height: 44px; box-sizing: border-box; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--card); font: 600 18px/1 var(--f-mono); color: var(--ink); text-align: center; -webkit-appearance: none; appearance: none; outline: none; }
html body.rd .finp input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
html body.rd .finp input.inp--ok { border-color: var(--good); color: var(--good); }
html body.rd .finp input.inp--no { border-color: var(--bad); }
html body.rd .finp__stack { display: flex; flex-direction: column; align-items: center; gap: 4px; }
html body.rd .finp__bar { display: block; width: 58px; height: 2px; border-radius: 1px; background: var(--ink); }
html body.rd .finp__bar--ok { background: var(--good); }
html body.rd #panelTask .finp__w { margin-top: 27px; }
html body.rd .opnd__row { display: flex; align-items: center; gap: 8px; }
html body.rd .opnd__sign { align-self: center; padding-top: 22px; font: 600 24px/1 var(--f-ui); color: var(--accent); }

/* Рисунки со своим примером */
/* Карточка рисунка — flex-колонка с align-items: flex-start, без stretch блок с рисунком ужимается до 300px */
html body.rd .figure > div[id$="Box"], html body.rd .figure > .ray { align-self: stretch; }
/* У рисунка с полями картинка идёт первой и на телефоне: старое правило .howto figure на ширине до 767px переворачивает колонку */
html body.rd .figure:has(> .ray) { flex-direction: column; }
html body.rd .figure > div[id$="Box"] svg { display: block; width: 100%; height: auto; }
/* Подписи рисунков заданы шрифтом IBM Plex Mono, которого в макете нет; без замены браузер берёт Courier */
html body.rd .figure > div[id$="Box"] text { font-family: var(--f-mono); }
html body.rd .ray { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
html body.rd .ray[hidden] { display: none; }
html body.rd .ray__hint { margin: 0 0 14px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--mute); }
html body.rd .ray__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 24px; }
html body.rd .ray__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
html body.rd .ray input.finp__w { width: 72px; }
html body.rd .ray__out { min-height: 1.75em; margin: 16px 0 0; font: 400 16px/1.75 var(--f-text); color: var(--ink); }

/* Пять уровней тренажёра 5 и 6 класса не входят в строку телефона: вкладки переносятся, а не растягивают страницу вбок */
html body.rd .trainer__tabs:has(> .trainer__tab:nth-child(3)) { align-self: stretch; flex-wrap: wrap; border-radius: 22px; }
html body.rd .trainer__tabs:has(> .trainer__tab:nth-child(3)) .trainer__tab { flex: 1 1 auto; }
/* Тренажёр 5 и 6 класса: скрипт прячет лишние поля атрибутом hidden, а в макете у форм и кнопок задан display: flex */
html body.rd .trainer__form[hidden], html body.rd .trainer__btns[hidden], html body.rd .finp[hidden] { display: none; }
html body.rd #ansCmp { margin-bottom: 6px; }
html body.rd .finp input.finp__i { width: 96px; }
/* Кнопки «меньше / равны / больше»: скрипт отмечает нажатую aria-pressed, после проверки дописывает is-right или is-wrong */
html body.rd .btn--cmp[aria-pressed="true"] { background: var(--ink); color: #fff; opacity: 1; }
html body.rd .btn--cmp.is-right, html body.rd .btn--cmp.is-right:hover { background: var(--good); color: #fff; opacity: 1; }
html body.rd .btn--cmp.is-wrong, html body.rd .btn--cmp.is-wrong:hover { background: var(--bad); color: #fff; opacity: 1; }
html body.rd .mx--neg .mx__w { margin-right: .02em; }

/* Решение задачи под клик: строка с «+», как вопросы FAQ */
html body.rd .sol { margin: 12px 0 28px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
html body.rd .sol summary { position: relative; padding: 14px 40px 14px 0; list-style: none; cursor: pointer; font: 500 12px/1.3 var(--f-mono); letter-spacing: 1px; text-transform: uppercase; color: var(--accent); }
html body.rd .sol summary::-webkit-details-marker { display: none; }
html body.rd .sol summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font: 400 22px/1 var(--f-mono); transition: transform .3s; }
html body.rd .sol[open] summary::after { transform: translateY(-50%) rotate(45deg); }
html body.rd .sol summary:hover { color: var(--ink); }
html body.rd .sol summary .sol__h, html body.rd .sol[open] summary .sol__s { display: none; }
html body.rd .sol[open] summary .sol__h { display: inline; }
html body.rd .sol__b { padding-bottom: 16px; }
html body.rd .sol__b .steps { margin: 0; }
html body.rd .sol__b > p { margin: 0 0 12px; }
html body.rd .sol__b > p:last-child { margin-bottom: 0; }

/* Врезка с пояснением */
html body.rd .tip { margin: 20px 0; padding: 14px 18px; border-left: 3px solid var(--accent); border-radius: 0 12px 12px 0; background: var(--tile); font: 400 15px/1.6 var(--f-text); color: var(--ink); }
html body.rd .tip b { font-weight: 600; }

/* Сложение и вычитание десятичных столбиком: разряды под разрядами, черта итога — рамкой */
html body.rd .stolb { display: flex; justify-content: center; margin: 24px 0; }
html body.rd .stolb pre { display: inline-block; margin: 0; padding: 18px 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); font: 500 17px/1.6 var(--f-mono); color: var(--ink); text-align: right; white-space: pre; }
html body.rd .stolb__l { display: block; margin-top: 4px; padding-top: 6px; border-top: 1.5px solid var(--ink); font-weight: 600; }

/* Вводная строка под подписью карточки «Ещё по дробям» */
html body.rd .ss-more__lede { margin: 0 0 4px; font: 400 13px/1.45 var(--f-ui); color: var(--mute); }
html body.rd .ss-more__lede + .more__i { border-top: 0; }

/* Ответы на вопросы: подпись над ответом берётся из data-tag, в разметку вопросов она не попадает */
html body.rd .dd-tag { display: block; }
html body.rd .dd-tag::before { content: attr(data-tag); display: block; margin: 0 0 8px; font: 500 11px/1.3 var(--f-mono); letter-spacing: 1px; text-transform: uppercase; color: var(--accent); }

@media (max-width: 639px) {
    html body.rd .formula { font-size: 19px; }
    html body.rd .dd-cta__h { font-size: 26px; }
    html body.rd .dd-cta__btn { align-self: stretch; justify-content: center; }
    html body.rd .finp input { width: 50px; height: 42px; font-size: 17px; }
    html body.rd .finp__bar { width: 50px; }
    html body.rd #panelTask .finp__w { margin-top: 26px; }
    html body.rd .ray__row { gap: 18px; }
    html body.rd .ray__btns { width: 100%; }
    html body.rd .finp input.finp__i { width: 88px; }
    html body.rd .stolb pre { padding: 14px 16px; font-size: 15.5px; }
}

/* Печать таблицы ответов: лист белый, даже если в окне печати включён фон; без отступа в пиксель поле страницы срезает правую рамку таблицы */
@media print {
    html body.rd.printing { background: #fff; }
    html body.rd.printing > #printSheet { padding: 0 1px; }
}

@media (prefers-reduced-motion: reduce) {
    html body.rd .sol summary::after { transition: none; }
}