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

/* Карточка калькулятора: старые рамки, тени и ширины сняты */
.rd #simple-calc .calculator { display: flex; flex-direction: column; gap: 20px; width: auto; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.rd #simple-calc p { opacity: 1; margin: 0; }

/* Форма слева, чертёж справа; чертёж держится на экране, пока листаешь длинную форму */
.rd #simple-calc .calc-layout { display: flex; align-items: flex-start; gap: 28px; margin: 0; padding: 0; }
.rd #simple-calc .calculator__form { display: flex; flex-direction: column; gap: 18px; flex: 1 1 auto; min-width: 0; width: auto; max-width: none; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
/* Колонка чертежа тянется на высоту формы, а плашка с фоном — только по рисунку: иначе у длинной формы под чертежом стоит пустая плашка */
.rd #simple-calc .calc-visual { box-sizing: border-box; flex: 0 0 272px; align-self: stretch; margin: 0; padding: 0; background: none; }
.rd #simple-calc .calc-visual > div { position: sticky; top: 16px; padding: 12px; border-radius: 18px; background: var(--tile); }
.rd #simple-calc .calc-visual svg { display: block; width: 100%; height: auto; max-height: 420px; }
/* Подписи чертежей заданы без шрифта: без замены браузер берёт Times */
.rd #simple-calc svg text { font-family: var(--f-mono); }

/* Подпись над выпадающим списком и над результатом */
.rd #simple-calc .label-text { display: block; position: static; margin: 0 0 8px; padding: 0; background: none; font: 400 11px/1.3 var(--f-mono); letter-spacing: 1px; text-transform: uppercase; color: var(--mute); }

/* Выпадающие списки на div */
.rd #simple-calc .custom-select { position: relative; width: auto; height: auto; min-height: 0; margin: 0; padding: 0; border: 0; background: none; }
.rd #simple-calc .custom-select__selected { box-sizing: border-box; position: relative; display: flex; align-items: center; min-height: 48px; height: auto; margin: 0; padding: 12px 44px 12px 16px; background: var(--tile); border: 1px solid var(--line); border-radius: 14px; font: 500 15px/1.35 var(--f-ui); color: var(--ink); cursor: pointer; }
.rd #simple-calc .custom-select__selected:hover { border-color: var(--accent-mid); }
.rd #simple-calc .custom-select.open .custom-select__selected { border-color: var(--accent); }
.rd #simple-calc .custom-select__selected::after { content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border: solid var(--ink); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); background: none; transition: transform .15s; }
.rd #simple-calc .custom-select.open .custom-select__selected::after { margin-top: -2px; transform: rotate(-135deg); }
.rd #simple-calc .custom-select__options { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; max-height: 360px; overflow-y: auto; box-sizing: border-box; padding: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 12px 32px rgba(13, 13, 13, .12); }
.rd #simple-calc .custom-select.open .custom-select__options { display: block; }
.rd #simple-calc .custom-select__option { padding: 10px 12px; border-radius: 10px; font: 400 14px/1.35 var(--f-ui); color: var(--ink); cursor: pointer; background: none; }
.rd #simple-calc .custom-select__option:hover, .rd #simple-calc .custom-select__option.selected { background: var(--accent-soft); }
/* Единицы и округление — в одну строку */
.rd #simple-calc .calc-params { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; padding: 0; }
.rd #simple-calc .calc-params > .custom-select { flex: 1 1 200px; min-width: 0; }

/* Поля ввода. Подпись над полем без капители: в ней стороны a и A, углы γ и β, их нельзя поднимать в верхний регистр */
.rd #simple-calc .form-group { position: static; display: block; min-width: 0; width: auto; margin: 0; padding: 0; }
.rd #simple-calc .form-group label, .rd #simple-calc .calculator__label { position: static; display: block; transform: none; margin: 0 0 8px; padding: 0; background: none; font: 500 13px/1.35 var(--f-ui); letter-spacing: 0; text-transform: none; color: var(--ink); pointer-events: auto; }
.rd #simple-calc .calculator__input, .rd #simple-calc .input-group input { display: block; -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 100%; height: 48px; margin: 0; padding: 0 16px; background: var(--tile); border: 1px solid var(--line); border-radius: 14px; box-shadow: none; outline: none; font: 500 16px/46px var(--f-ui); color: var(--ink); text-align: left; }
.rd #simple-calc .calculator__input::placeholder, .rd #simple-calc .input-group input::placeholder { font-weight: 400; font-size: 15px; color: var(--mute); opacity: 1; }
.rd #simple-calc .calculator__input:focus, .rd #simple-calc .input-group input:focus { border-color: var(--accent); }
.rd #simple-calc input[type="number"] { -moz-appearance: textfield; }
.rd #simple-calc input[type="number"]::-webkit-inner-spin-button, .rd #simple-calc input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* Группы полей режима — по два в ряд. Скрипт прячет лишние группы через style.display и возвращает пустой строкой, поэтому здесь по умолчанию ничего не скрыто */
.rd #simple-calc :is(.fields, .form-group__wrapper, .ov-fields, .kn-fields, .okr-fields, .trap-fields, .chu-fields, .kv-coords) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; }
/* Одно поле в группе режима — на всю строку, а не половиной: у цилиндра так идут радиус, диаметр и длина окружности */
.rd #simple-calc :is(.fields, .form-group__wrapper, .ov-fields, .kn-fields, .okr-fields, .trap-fields, .chu-fields) > :only-child { grid-column: 1 / -1; }
.rd #simple-calc .chu-vertex, .rd #simple-calc .kv-hint { grid-column: 1 / -1; margin: 4px 0 -4px; font: 400 12px/1.45 var(--f-ui); color: var(--mute); }
.rd #simple-calc .kv-hint { margin: 0; font-size: 13px; }
/* Прямоугольник: два поля через знак умножения */
.rd #simple-calc .input-group { display: flex; align-items: center; gap: 12px; margin: 0; padding: 0; }
.rd #simple-calc .input-group input { flex: 1 1 0; min-width: 0; }
.rd #simple-calc .operator { flex: none; font: 500 20px/1 var(--f-ui); color: var(--mute); }
.rd #simple-calc .mode-hint { font: 400 13px/1.5 var(--f-ui); color: var(--mute); }

/* Ошибка ввода. Овал и конус возвращают блок пустой строкой в style.display, поэтому пустой блок прячется по :empty, а не по умолчанию */
.rd #simple-calc .calc-error, .rd #simple-calc .calc-err { display: block; margin: 0; padding: 12px 16px; border: 0; border-radius: 14px; background: var(--bad-soft); font: 500 14px/1.45 var(--f-ui); color: var(--bad); text-align: left; }
.rd #simple-calc .calc-error:empty, .rd #simple-calc .calc-err:empty { display: none; }
/* Квадрат прячет ошибку и историю атрибутом hidden, результат — классом hidden */
.rd #simple-calc .calc-error[hidden], .rd #simple-calc .kv-history[hidden] { display: none; }
.rd #simple-calc .hidden { display: none !important; }

/* Кнопки. В redesign.css у .button нулевой размер шрифта и прозрачность .5 при наведении */
.rd #simple-calc .calculator__buttons-container, .rd #simple-calc .btn-wrapper { display: flex; flex-wrap: wrap; gap: 8px; width: auto; margin: 4px 0 0; padding: 0; }
.rd #simple-calc :is(.calculator__buttons, .button, .action-button, .clear-button) { display: inline-flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box; width: auto; min-width: 0; max-width: none; height: 46px; margin: 0; padding: 0 24px; border: 0; border-radius: 999px; background: var(--pill); box-shadow: none; font: 500 14px/1.2 var(--f-ui); letter-spacing: 0; text-transform: none; color: var(--ink); white-space: nowrap; cursor: pointer; opacity: 1; transition: opacity .15s; }
.rd #simple-calc :is(.calculator__buttons, .button, .action-button, .clear-button):hover { opacity: .85; }
.rd #simple-calc :is(.calculator__buttons, .button, .action-button, .clear-button):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rd #simple-calc .black { padding: 0 28px; background: var(--ink); color: #fff; }

/* Результат */
.rd #simple-calc .calculator__result, .rd #simple-calc .result { box-sizing: border-box; width: auto; margin: 0; padding: 28px; border: 0; border-radius: 20px; background: var(--tile); box-shadow: none; text-align: left; }
.rd #simple-calc .res-wrapper { margin: 0; padding: 0; border: 0; background: none; }
.rd #simple-calc :is(#res-main, .result-text, #result) { display: block; margin: 0; font: 600 32px/1.2 var(--f-ui); letter-spacing: -.3px; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.rd #simple-calc :is(#res-main, .result-text, #result) :is(sup, sub) { font-size: .6em; }
/* Выделенное число в строке результата: у <b> браузер ставит bolder, от 600 это 900 — рядом с Inter 600 он читается чужим шрифтом */
.rd #simple-calc :is(#res-main, .result-text, #result) :is(b, strong) { font-weight: 700; }
.rd #simple-calc #res-extra { margin: 12px 0 0; font: 400 14px/1.6 var(--f-ui); color: var(--ink); }
.rd #simple-calc #res-extra:empty { display: none; }
.rd #simple-calc :is(.krug-exact, .okr-exact, .chu-exact, .cp-approx) { display: inline-block; margin-left: 8px; font: 400 13px/1.4 var(--f-ui); letter-spacing: 0; color: var(--mute); white-space: nowrap; }
.rd #simple-calc :is(.ov-note, .cp-note) { font-weight: 400; color: var(--mute); }
.rd #simple-calc .kv-conv { margin: 8px 0 0; font: 400 14px/1.5 var(--f-ui); color: var(--mute); }
/* Строки «величина — значение» */
.rd #simple-calc :is(.ov-row, .okr-row, .chu-row, .kn-row, .trap-row) { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 8px 0; border-top: 1px solid var(--line); font: 400 14px/1.45 var(--f-ui); }
.rd #simple-calc :is(.ov-row, .okr-row, .chu-row, .kn-row, .trap-row):first-child { border-top: 0; padding-top: 0; }
.rd #simple-calc :is(.ov-row, .okr-row, .chu-row, .kn-row, .trap-row) > span { color: var(--mute); }
.rd #simple-calc :is(.ov-row, .okr-row, .chu-row, .kn-row, .trap-row) > b { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
/* Свойства квадрата — в две колонки, пока хватает ширины */
.rd #simple-calc .kv-props { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 24px; margin: 12px 0 0; }
.rd #simple-calc .kv-props > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.rd #simple-calc .kv-props dt { font: 400 13px/1.4 var(--f-ui); color: var(--mute); }
.rd #simple-calc .kv-props dd { margin: 0; font: 500 14px/1.4 var(--f-ui); white-space: nowrap; }

/* Ход решения */
.rd #simple-calc .formula-wrapper { margin: 16px 0 0; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: transparent; }
.rd #simple-calc #res-steps { font: 400 14px/1.6 var(--f-ui); color: var(--ink); overflow-wrap: anywhere; }
.rd #simple-calc .pr-step { display: block; margin: 0 0 8px; }
.rd #simple-calc .pr-step:last-child { margin-bottom: 0; }
.rd #simple-calc :is(.ov-step, .kn-step) { display: flex; align-items: flex-start; gap: 12px; padding: 5px 0; font: 400 14px/1.6 var(--f-ui); }
.rd #simple-calc :is(.ov-step__n, .kn-step__n) { flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--accent-soft); font: 500 11px/22px var(--f-mono); color: var(--accent); text-align: center; }
.rd #simple-calc .cp-line { display: block; margin: 0 0 4px; }
.rd #simple-calc .cp-step { margin: 0 0 8px; }
.rd #simple-calc :is(.cp-line, .cp-step) > span:first-child { font-weight: 600; }
.rd #simple-calc .cp-h { margin: 16px 0 6px; font: 600 14px/1.4 var(--f-ui); }
.rd #simple-calc .cp-answer { display: block; margin: 12px 0 4px; padding: 10px 14px; border-radius: 12px; background: var(--accent-soft); }
.rd #simple-calc .cp-tiny { font-size: 12px; color: var(--mute); }
.rd #simple-calc .cp-svg-flat { display: block; width: 100%; max-width: 300px; height: auto; margin: 4px 0 10px; }
.rd #simple-calc .chu-note { margin: 12px 0 0; padding: 10px 14px; border-left: 3px solid var(--accent); border-radius: 0 12px 12px 0; background: var(--card); font: 400 13px/1.55 var(--f-ui); }
/* Подробное решение квадрата под кнопкой */
.rd #simple-calc .calculator__details { margin: 16px 0 0; padding: 20px; border: 1px solid var(--line); border-radius: 16px; font: 400 14px/1.6 var(--f-ui); text-align: left; }
.rd #simple-calc .calculator__details ol { margin: 0; padding-left: 24px; list-style: decimal outside; }
.rd #simple-calc .calculator__details li { margin: 0 0 6px; }

/* Примеры, копирование, ссылка, сохранение — чипами */
.rd #simple-calc :is(.ov-presets, .kn-presets, .okr-presets, .trap-presets, .chu-presets, .cp-presets, .rz-chips, .cp-actions, .kv-actions) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; }
.rd #simple-calc :is(.cp-actions, .kv-actions) { margin-top: 16px; }
.rd #simple-calc :is(.ov-presets__label, .kn-presets__label, .okr-presets__label, .trap-presets__label, .chu-presets__label, .cp-presets__label) { flex: 0 0 100%; margin: 0 0 2px; font: 400 11px/1.3 var(--f-mono); letter-spacing: 1px; text-transform: uppercase; color: var(--mute); }
.rd #simple-calc :is(.ov-preset, .kn-preset, .okr-preset, .trap-preset, .chu-preset, .cp-preset, .rz-chip, .kv-small, .calculator__details-button) { display: inline-flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box; width: auto; min-width: 0; max-width: none; height: 38px; margin: 0; padding: 0 16px; border: 0; border-radius: 999px; background: var(--pill); box-shadow: none; font: 500 13px/1.2 var(--f-ui); letter-spacing: 0; text-transform: none; color: var(--ink); white-space: nowrap; cursor: pointer; opacity: 1; transition: background-color .15s; }
.rd #simple-calc :is(.ov-preset, .kn-preset, .okr-preset, .trap-preset, .chu-preset, .cp-preset, .rz-chip, .kv-small, .calculator__details-button):hover { background: var(--accent-soft); opacity: 1; }
.rd #simple-calc :is(.ov-preset, .kn-preset, .okr-preset, .trap-preset, .chu-preset, .cp-preset, .rz-chip, .kv-small, .calculator__details-button):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rd #simple-calc :is(.ov-preset, .kn-preset, .okr-preset, .trap-preset, .chu-preset, .cp-preset).selected, .rd #simple-calc .is-copied, .rd #simple-calc .is-copied:hover { background: var(--ink); color: #fff; }
.rd #simple-calc #copy-btn { margin-top: 16px; }
.rd #simple-calc .cp-actions #copy-btn { margin-top: 0; }

/* История расчётов квадрата */
.rd #simple-calc .kv-history { margin: 0; padding: 20px; border-radius: 20px; background: var(--tile); }
.rd #simple-calc .kv-history ul { margin: 0 0 12px; padding: 0; list-style: none; }
.rd #simple-calc .kv-history li { position: relative; margin: 0; padding: 0 44px 0 0; border-bottom: 1px solid var(--line); }
.rd #simple-calc .kv-history li::before { display: none; }
.rd #simple-calc .kv-history-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; width: 100%; margin: 0; padding: 10px 0; border: 0; background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.rd #simple-calc .kv-history-item:hover .kv-history-area { text-decoration: underline; text-decoration-color: var(--accent-mid); text-underline-offset: 2px; }
.rd #simple-calc .kv-history-area { font: 600 14px/1.4 var(--f-ui); }
.rd #simple-calc .kv-history-mode { font: 400 12px/1.4 var(--f-ui); color: var(--mute); }
.rd #simple-calc .kv-delete { position: absolute; top: 7px; right: 0; margin: 0; padding: 2px 9px; border: 0; border-radius: 999px; background: none; font: 400 18px/1.2 var(--f-ui); color: var(--mute); cursor: pointer; }
.rd #simple-calc .kv-delete:hover { background: var(--bad-soft); color: var(--bad); }

/* Чертежи: скрипты рисуют синим и голубым, здесь те же линии в палитре сайта. Правка по атрибутам, скрипты не тронуты */
.rd #simple-calc svg [fill="#1f6fe5"] { fill: var(--accent); }
.rd #simple-calc svg [stroke="#1f6fe5"] { stroke: var(--accent); }
.rd #simple-calc svg [fill="#0a3d91"] { fill: var(--ink); }
.rd #simple-calc svg [stroke="#0a3d91"] { stroke: var(--ink); }
.rd #simple-calc svg [fill="#9bb4d6"] { fill: var(--accent-mid); }
.rd #simple-calc svg [stroke="#9bb4d6"] { stroke: var(--accent-mid); }
.rd #simple-calc svg [fill="#eaf2fd"] { fill: var(--accent-soft); }
.rd #simple-calc svg [stroke="#eaf2fd"] { stroke: var(--accent-soft); }
.rd #simple-calc svg :is([fill="#fff"], [fill="#ffffff"]) { fill: var(--tile); }
.rd #simple-calc svg :is([stroke="#fff"], [stroke="#ffffff"]) { stroke: var(--tile); }
.rd #simple-calc svg [stroke="#eef2f7"] { stroke: var(--line); }
/* Овал и конус рисуют фигуру классами, без них фигура залилась бы чёрным */
.rd #simple-calc :is(.ov-shape, .kn-shape) { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.5; }
.rd #simple-calc :is(.ov-axis, .kn-axis) { fill: none; stroke: var(--mute); stroke-width: 1; stroke-dasharray: 4 3; }
.rd #simple-calc .kn-base { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 3 3; }
/* Размер подписи в единицах рисунка: овал и конус нарисованы в поле 300 точек и ужимаются до колонки, 11 превращались в 9px */
.rd #simple-calc :is(.ov-label, .kn-label) { fill: var(--ink); font: 400 14px var(--f-mono); }

/* Статья: формулы строкой по центру, как в разборах */
html body.rd .formula { margin: 24px 0; padding: 20px 24px; border-radius: 16px; background: var(--tile); font: 500 18px/1.7 var(--f-mono); color: var(--ink); text-align: center; overflow-x: auto; }
/* Широкие таблицы листаются вбок внутри своей рамки */
html body.rd :is(.table-scroll, .kv-table-wrap) { margin: 24px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
html body.rd :is(.table-scroll, .kv-table-wrap) > table { margin: 0; }
html body.rd .kv-table { min-width: 520px; }
/* Рисунок сектора и сегмента в статье о круге */
/* Картинка в тексте статьи круга шириной 640px: прежнее правило .howto img из общего стиля в новом макете не подключено */
html body.rd .rd-article__body > img { display: block; max-width: 100%; height: auto; margin: 24px 0; border-radius: 14px; }
html body.rd .krug-figure { margin: 28px 0; padding: 0; }
html body.rd .krug-figure svg { display: block; width: 100%; max-width: 460px; height: auto; margin: 0 auto; }
html body.rd .krug-figure figcaption { margin: 10px 0 0; font: 400 13px/1.5 var(--f-ui); color: var(--mute); text-align: center; }
html body.rd .krug-figure .k-fill { fill: var(--tile); }
html body.rd .krug-figure .k-fill2 { fill: var(--accent-soft); }
html body.rd .krug-figure .k-line { fill: none; stroke: var(--ink); stroke-width: 1.5; }
html body.rd .krug-figure .k-dash { stroke-dasharray: 4 3; }
html body.rd .krug-figure text { fill: var(--ink); font: 400 11px var(--f-mono); }

/* Вводный абзац под заголовком у овала и конуса */
.rd .rd-geo-lead { margin: 0; max-width: 760px; font: 400 17px/1.5 var(--f-text); color: var(--mute); }

/* Источники в боковой колонке статьи */
.rd .rda-src h2.rd-label { margin: 0; padding: 0; border: 0; font: 400 11px/1.4 var(--f-mono); letter-spacing: 1px; text-transform: uppercase; color: var(--mute); scroll-margin-top: 16px; }
.rd .rda-src__lead { margin: 0; font: 400 13px/1.5 var(--f-ui); color: var(--mute); }
.rd .rda-src__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rd .rda-src__list li { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 12px 0; border-bottom: 1px solid var(--line); }
.rd .rda-src__list li:first-child { padding-top: 0; }
.rd .rda-src__list li:last-child { padding-bottom: 0; border-bottom: 0; }
.rd .rda-src__list li::before { display: none; }
.rd .rda-src__list b { font: 600 14px/1.35 var(--f-ui); color: var(--ink); }
.rd .rda-src__list span { font: 400 13px/1.45 var(--f-ui); color: var(--mute); }
.rd .rda-src__list a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent-mid); text-underline-offset: 2px; }
.rd .rda-src__note { margin: 0; font: 400 13px/1.5 var(--f-ui); color: var(--mute); }

/* Ссылки в ответах на вопросы: общие стили блока их не выделяют, и у круга «Длина окружности, объём цилиндра» читались как простой текст */
html body.rd .faq .dropdown__content a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent-mid); text-underline-offset: 2px; }
html body.rd .faq .dropdown__content a:hover { color: var(--accent); }

/* Калькулятор делит строку с боковой колонкой, поэтому чертёж раскладывается по ширине карточки, а не экрана: на экране 1025px форме оставалось 146px */
.rd #simple-calc .calculator { container-type: inline-size; }
@container (max-width: 699px) {
    .rd #simple-calc .calc-visual { flex-basis: 200px; }
}
@container (max-width: 539px) {
    /* Чертёж над формой, небольшой: в узкой карточке он подсказка, а не главный экран */
    .rd #simple-calc .calc-layout { flex-direction: column; align-items: stretch; gap: 16px; }
    .rd #simple-calc .calc-visual { order: -1; flex: none; align-self: center; width: 64%; max-width: 240px; }
    .rd #simple-calc .calc-visual > div { position: static; padding: 8px; }
    .rd #simple-calc .calc-visual svg { max-height: 260px; }
}

@media (max-width: 639px) {
    .rd #simple-calc .calculator { gap: 16px; }
    .rd #simple-calc .custom-select__selected { padding: 12px 40px 12px 14px; font-size: 14px; }
    .rd #simple-calc .custom-select__options { max-height: 300px; }
    .rd #simple-calc :is(.fields, .form-group__wrapper, .ov-fields, .kn-fields, .okr-fields, .trap-fields, .chu-fields) { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .rd #simple-calc .kv-coords { gap: 12px; }
    .rd #simple-calc .calculator__buttons-container, .rd #simple-calc .btn-wrapper { flex-direction: column; }
    .rd #simple-calc :is(.calculator__buttons-container, .btn-wrapper) > :is(.calculator__buttons, .button, .action-button, .clear-button) { width: 100%; }
    .rd #simple-calc .kv-actions { flex-direction: column; align-items: stretch; }
    .rd #simple-calc .kv-actions > * { width: 100%; }
    .rd #simple-calc .calculator__result, .rd #simple-calc .result { padding: 18px 16px; }
    .rd #simple-calc :is(#res-main, .result-text, #result) { font-size: 26px; }
    .rd #simple-calc .formula-wrapper, .rd #simple-calc .calculator__details { padding: 16px; }
    .rd #simple-calc .kv-history { padding: 16px; }
    html body.rd .formula { padding: 16px; font-size: 15px; text-align: left; }
    .rd .rd-geo-lead { font-size: 16px; }
}

@media print {
    .rd #simple-calc .calc-visual > div { position: static; }
    .rd #simple-calc :is(.ov-presets, .kn-presets, .okr-presets, .trap-presets, .chu-presets, .cp-presets, .rz-chips, .cp-actions, .kv-actions, .calculator__buttons-container, .btn-wrapper) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .rd #simple-calc .custom-select__selected::after, .rd #simple-calc :is(.calculator__buttons, .button, .action-button, .clear-button, .rz-chip) { transition: none; }
}