/* Калькулятор процентов в новом виде (redesign, ветка Дизайн 26.09.2026). Работает вместе с rd.css и rd-procenty.js.
   percent-calc.css и inputs-style.css сюда не подключаются: в первом глобальные button и input { width: 100% },
   они ломают шапку каркаса. Нужное из обоих (дробь, выпадающий список) повторено ниже в рамках #simple-calc. */

.rd #simple-calc { font-family: var(--f-ui); color: var(--ink); }
.rd #simple-calc .calculator { display: flex; flex-direction: column; gap: 20px; max-width: none; margin: 0; padding: 0; border: 0; background: none; }
.rd #simple-calc p { display: block; opacity: 1; margin: 0; }
.rd #simple-calc button { width: auto; margin: 0; font-family: var(--f-ui); }
.rd #simple-calc .label-text { display: block; margin: 0 0 8px; padding: 0; font: 500 11px/1.2 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); position: static; background: none; }
.rd #simple-calc .rd-label { display: block; margin: 0 0 8px; }

/* поля */
.rd #simple-calc input { box-sizing: border-box; width: 100%; height: 56px; margin: 0; padding: 0 18px; background: var(--tile); border: 1px solid var(--line); border-radius: 16px; font: 500 18px/1 var(--f-mono); color: var(--ink); text-align: left; box-shadow: none; }
.rd #simple-calc input:focus { outline: none; border-color: var(--accent); }
.rd #simple-calc input::placeholder { color: var(--mute); opacity: .7; font-family: var(--f-mono); }
.rd #simple-calc input[type="number"] { -moz-appearance: textfield; }
.rd #simple-calc input::-webkit-outer-spin-button, .rd #simple-calc input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* пример строкой */
.rd #simple-calc .pct-expr { position: relative; margin: 0; }
.rd #simple-calc .pct-expr__input { padding-right: 84px; font-size: 16px; }
.rd #simple-calc .pct-expr::after { content: "ENTER"; position: absolute; right: 14px; top: 38px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; font: 500 10px/1 var(--f-mono); letter-spacing: .08em; color: var(--mute); pointer-events: none; }
.rd #simple-calc .pct-expr__hint { min-height: 0; margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: var(--mute); }
.rd #simple-calc .pct-expr__hint:empty { display: none; }

/* режимы: чипы на широком экране, выпадающий список на телефоне */
.rd #simple-calc .rd-pct-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rd #simple-calc .rd-pct-chip { height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--pill); color: var(--ink); font: 500 14px/1 var(--f-ui); cursor: pointer; transition: background .15s, color .15s; }
.rd #simple-calc .rd-pct-chip:hover { background: var(--accent-soft); }
.rd #simple-calc .rd-pct-chip.is-active { background: var(--ink); color: #fff; }
.rd #simple-calc .rd-pct-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rd #simple-calc .rd-pct-mode-select { display: none; }

/* выпадающие списки (режим на телефоне и округление) */
.rd #simple-calc .custom-select { position: relative; margin: 0; width: auto; }
.rd #simple-calc .custom-select__selected { box-sizing: border-box; position: relative; height: 56px; padding: 0 44px 0 18px; background: var(--tile); border: 1px solid var(--line); border-radius: 16px; font: 500 15px/54px var(--f-ui); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.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; }
.rd #simple-calc .custom-select__options { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; padding: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 12px 32px rgba(0, 0, 0, .12); max-height: 320px; overflow: auto; }
.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 .rd-pct-row { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 16px; align-items: end; }
.rd #simple-calc .input-group { display: flex; align-items: flex-end; gap: 12px; margin: 0; }
.rd #simple-calc .rd-pct-field { flex: 1 1 0; min-width: 0; }
.rd #simple-calc .input-group .operator { flex: none; margin: 0; padding: 0 2px; height: 56px; font: 500 16px/56px var(--f-mono); color: var(--mute); white-space: nowrap; }

/* ошибка */
.rd #simple-calc .calc-error { margin: 0; padding: 12px 16px; font-size: 14px; line-height: 1.4; color: var(--bad); background: var(--bad-soft); border: 0; border-radius: 14px; }
.rd #simple-calc .calc-error[hidden] { display: none; }

/* кнопки */
.rd #simple-calc .btn-wrapper { display: flex; gap: 12px; margin: 0; }
.rd #simple-calc .calculator__buttons { height: 56px; padding: 0 28px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: 500 15px/1 var(--f-ui); cursor: pointer; transition: opacity .15s; }
.rd #simple-calc .calculator__buttons.black { flex: 1 1 auto; max-width: 320px; background: var(--ink); border-color: var(--ink); color: #fff; }
.rd #simple-calc .calculator__buttons:hover { opacity: .85; }

/* результат */
.rd #simple-calc .result { margin: 4px 0 0; padding: 28px; background: var(--tile); border-radius: 22px; text-align: left; }
.rd #simple-calc .rd-pct-res__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rd #simple-calc .rd-pct-res__head .rd-label { margin: 0; }
.rd #simple-calc .pct-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }
.rd #simple-calc .pct-btn { height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--pill); color: var(--ink); font: 500 13px/1 var(--f-ui); cursor: pointer; transition: background .15s, color .15s; }
.rd #simple-calc .pct-btn:hover { background: var(--accent-soft); }
.rd #simple-calc .pct-btn.is-copied { background: var(--ink); color: #fff; }
.rd #simple-calc .pct-btn.is-failed { color: var(--bad); background: var(--bad-soft); }
.rd #simple-calc .res-wrapper { margin: 18px 0 0; padding: 0; background: none; }
.rd #simple-calc .result-text { font: 500 64px/1.05 var(--f-mono); letter-spacing: -2px; color: var(--ink); word-break: break-word; }
.rd #simple-calc .rd-pct-caption { margin: 8px 0 0; font-size: 15px; color: var(--mute); }
.rd #simple-calc .rd-pct-caption:empty { display: none; }

.rd #simple-calc .rd-pct-bar { margin: 20px 0 0; }
.rd #simple-calc .rd-pct-bar[hidden] { display: none; }
.rd #simple-calc .rd-pct-bar__track { height: 12px; border-radius: 999px; background: var(--pill); overflow: hidden; }
.rd #simple-calc .rd-pct-bar__fill { height: 100%; min-width: 4px; border-radius: 999px; background: var(--accent); transition: width .3s; }
.rd #simple-calc .rd-pct-bar__legend { display: flex; justify-content: space-between; gap: 12px; margin: 8px 0 0; font: 500 12px/1.4 var(--f-mono); color: var(--mute); }
.rd #simple-calc .rd-pct-bar__legend span:first-child { color: var(--accent); }
.rd #simple-calc .rd-pct-bar__legend span:last-child { text-align: right; }

.rd #simple-calc .result-extra { margin: 16px 0 0; }
.rd #simple-calc .result-extra:empty { display: none; }
.rd #simple-calc .result-extra__row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.rd #simple-calc .result-extra__row b { font-family: var(--f-mono); font-weight: 500; }
.rd #simple-calc .result-extra__row:last-child { border-bottom: 0; }

/* решение по шагам */
.rd #simple-calc .formula-wrapper { margin: 24px 0 0; padding: 20px 0 0; border-top: 1px solid var(--line); }
/* при ошибке ввода шагов нет: пустой блок «Решение по шагам» не показываем */
.rd #simple-calc .formula-wrapper:has(.resultDetails:empty) { display: none; }
.rd #simple-calc .rd-pct-steps__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.rd #simple-calc .rd-pct-steps__head .rd-label { margin: 0; }
.rd #simple-calc .formula { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin: 0; font: 500 18px/1.2 var(--f-mono); color: var(--ink); }
.rd #simple-calc .formula span { display: inline-block; margin: 0; }
.rd #simple-calc .fraction { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; text-align: center; font-size: .9em; }
.rd #simple-calc .fraction .numerator { display: block; padding: 0 4px 2px; border-bottom: 1.5px solid currentColor; }
.rd #simple-calc .fraction .denominator { display: block; padding: 2px 4px 0; }
.rd #simple-calc .resultDetails { display: flex; flex-direction: column; gap: 16px; margin: 20px 0 0; }
.rd #simple-calc .resultDetails > p { font-size: 15px; }
.rd #simple-calc .formula-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; font: 500 17px/1.3 var(--f-mono); }
.rd #simple-calc .rd-step { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; align-items: start; }
.rd #simple-calc .rd-step__num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; font: 600 13px/1 var(--f-ui); }
.rd #simple-calc .rd-step__text { margin: 3px 0 0; font: 500 15px/1.4 var(--f-ui); }
.rd #simple-calc .rd-step__text strong { font-weight: 500; }
.rd #simple-calc .rd-step .formula-line:last-child { font-weight: 600; }

/* история */
.rd #simple-calc .history { margin: 0; padding: 20px 24px; background: var(--tile); border-radius: 22px; }
.rd #simple-calc .historyList { list-style: none; margin: 0 0 12px; padding: 0; }
.rd #simple-calc .historyList li { position: relative; margin: 0; padding: 10px 36px 10px 0; border-bottom: 1px solid var(--line); }
.rd #simple-calc .historyList li::before { content: none; }
.rd #simple-calc .historyList li:last-child { border-bottom: 0; }
.rd #simple-calc .pct-history-item { display: block; width: 100%; padding: 0; background: none; border: 0; text-align: left; font: 400 15px/1.5 var(--f-ui); color: var(--ink); cursor: pointer; }
.rd #simple-calc .pct-history-item:hover { color: var(--accent); }
.rd #simple-calc .pct-delete { position: absolute; top: 8px; right: 0; padding: 4px; line-height: 0; background: none; border: 0; border-radius: 8px; color: var(--mute); cursor: pointer; }
.rd #simple-calc .pct-delete:hover { color: var(--bad); background: var(--bad-soft); }

.rd .pct-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ===== готовые ответы ===== */
.rd .rd-answers { padding: 0 var(--gut) 24px; min-width: 0; }
.rd .rd-answers h2 { font: 700 30px/1.2 var(--f-ui); letter-spacing: -.4px; margin: 0 0 12px; padding: 0; }
.rd .rd-answers > p { display: block; max-width: 760px; margin: 0 0 20px; font: 400 16px/1.55 var(--f-text); color: var(--ink); opacity: 1; }
.rd .rd-answers__card { background: var(--card); border-radius: 24px; padding: 8px; }
.rd .rd-answers .table-scroll { overflow-x: auto; border-radius: 18px; }
.rd .rd-answers .pct-grid { display: table; border-collapse: collapse; width: 100%; min-width: 760px; background: var(--tile); font-size: 14px; }
.rd .rd-answers .pct-grid th, .rd .rd-answers .pct-grid td { padding: 12px 14px; border: 0; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; font: 500 14px/1.2 var(--f-mono); }
.rd .rd-answers .pct-grid thead th { background: var(--pill); font: 500 12px/1.2 var(--f-mono); color: var(--mute); }
.rd .rd-answers .pct-grid thead th:first-child { text-align: left; }
.rd .rd-answers .pct-grid tbody th { text-align: left; color: var(--ink); background: transparent; }
.rd .rd-answers .pct-grid tbody tr:hover { background: var(--accent-soft); }
.rd .rd-answers .pct-grid a { color: var(--ink); text-decoration: none; border-bottom: 1px dashed var(--accent-mid); }
.rd .rd-answers .pct-grid a:hover, .rd .rd-answers .pct-grid a:focus { color: var(--accent); border-bottom-color: var(--accent); }
.rd .rd-answers p.pct-grid-note { display: none; }
.rd .rd-answers p.rd-answers__more { margin: 16px 0 0; font-size: 15px; color: var(--mute); }

/* ===== статья ===== */
.rd .rd-article__body .rd-examples { background: var(--tile); border-radius: 16px; padding: 18px 22px; margin: 0 0 20px; }
.rd .rd-article__body .rd-examples .rd-label { margin: 0 0 10px; }
.rd .rd-article__body .rd-examples ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.rd .rd-article__body .rd-examples li { margin: 0; padding: 0; list-style: none; font: 400 15px/1.55 var(--f-mono); }
.rd .rd-article__body .rd-examples li::before, .rd .rd-article__body .rd-examples li::marker { content: none; }
.rd .rd-article__body .rd-examples strong { color: var(--accent); font-weight: 600; }
.rd .rd-article__body p.rd-note { background: var(--accent-soft); border-radius: 14px; padding: 16px 20px; font-weight: 600; }
.rd .rd-article__body .pct-table td:last-child { font-family: var(--f-mono); white-space: nowrap; }

/* шпаргалка справа */
.rd .rd-pct-cheat { gap: 12px; }
.rd .rd-pct-cheat .rd-label { margin: 0; }
.rd .rd-pct-cheat__item { display: flex; flex-direction: column; gap: 4px; background: var(--tile); border-radius: 16px; padding: 14px 16px; }
.rd .rd-pct-cheat__f { font: 600 16px/1.3 var(--f-mono); color: var(--ink); }
.rd .rd-pct-cheat__t { font: 400 13px/1.3 var(--f-ui); color: var(--mute); }
.rd .rd-pct-cheat__e { font: 400 13px/1.3 var(--f-mono); color: var(--ink); }
.rd .rd-pct-cheat__e b { color: var(--accent); font-weight: 600; }
.rd .rd-pct-cheat .rd-btn { margin-top: 4px; }

@media (max-width: 1024px) {
    .rd #simple-calc .rd-pct-row { grid-template-columns: minmax(0, 1fr); }
}

/* ===== телефон ===== */
@media (max-width: 639px) {
    .rd #simple-calc .calculator { gap: 16px; }
    .rd #simple-calc .rd-pct-modes { display: none; }
    .rd #simple-calc .rd-pct-mode-select { display: block; }
    .rd #simple-calc input { height: 52px; font-size: 17px; padding: 0 14px; }
    .rd #simple-calc .pct-expr__input { font-size: 15px; padding-right: 14px; }
    .rd #simple-calc .pct-expr::after { display: none; }
    .rd #simple-calc .custom-select__selected { height: 52px; line-height: 50px; }
    .rd #simple-calc .input-group { gap: 8px; }
    .rd #simple-calc .input-group .operator { height: 52px; line-height: 52px; font-size: 14px; }
    .rd #simple-calc .btn-wrapper .calculator__buttons { height: 52px; padding: 0 20px; }
    .rd #simple-calc .calculator__buttons.black { max-width: none; }
    .rd #simple-calc .result { padding: 20px 16px; border-radius: 18px; }
    .rd #simple-calc .rd-pct-res__head { flex-direction: column; align-items: stretch; }
    .rd #simple-calc .pct-actions { flex-direction: column; }
    .rd #simple-calc .pct-btn { width: 100%; }
    .rd #simple-calc .result-text { font-size: 48px; letter-spacing: -1.5px; }
    .rd #simple-calc .rd-pct-bar__legend { flex-direction: column; gap: 2px; }
    .rd #simple-calc .rd-pct-bar__legend span:last-child { text-align: left; }
    .rd #simple-calc .rd-pct-steps__head { flex-direction: column; align-items: flex-start; }
    .rd #simple-calc .formula { justify-content: flex-start; font-size: 16px; }
    .rd #simple-calc .formula-line { font-size: 15px; }
    .rd #simple-calc .history { padding: 16px; border-radius: 18px; }

    .rd .rd-answers { padding: 0 16px 16px; }
    .rd .rd-answers h2 { font-size: 24px; }
    .rd .rd-answers__card { padding: 4px; border-radius: 20px; }
    .rd .rd-answers .pct-grid { min-width: 640px; }
    .rd .rd-answers .pct-grid th, .rd .rd-answers .pct-grid td { padding: 10px; font-size: 13px; }
    .rd .rd-answers p.pct-grid-note { display: block; margin: 8px 8px 4px; font-size: 12px; color: var(--mute); }
    .rd .rd-article__body .rd-examples { padding: 14px 16px; }
    .rd .rd-article__body .rd-examples li { font-size: 14px; }
}