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

/* Группы полей, которые скрипт показывает и прячет через style.display: внутри свой шаг между полями */
.rd #simple-calc :is([id="grp-forward"], [id="grp-reverse"], [id="grp-mu"], [id="react-block"], [id="grp-react"], [id="adv-box"]) > * + * { margin-top: 18px; }
.rd #simple-calc [id="grp-forward"] > .tp-chips { margin-top: 12px; }
.rd #simple-calc .tp-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; }
/* Подпись списка ниже подписи поля: ряд «уклон + процент» выравниваем по низу; без поля процента список на всю строку */
.rd #simple-calc .form-group__wrapper:has(> .custom-select) { align-items: end; }
.rd #simple-calc .form-group__wrapper:has(> [id="grp-grade"][style*="none"]) > .custom-select { grid-column: 1 / -1; }

/* Подписи полей ввода — как подписи списков: на этой странице они стоят в одном ряду («Уклон дороги» и «Уклон, %»).
   Символ μ остаётся строчным: в верхнем регистре он превращается в «Μ», неотличимую от латинской M */
.rd #simple-calc .form-group label { font: 400 11px/1.3 var(--f-mono); letter-spacing: 1px; text-transform: uppercase; color: var(--mute); }
.rd #simple-calc .tp-sym { text-transform: none; }

/* Заголовок блока «Дополнительные параметры» */
.rd #simple-calc .tp-adv-title { margin: 0; padding: 18px 0 0; border-top: 1px solid var(--line); font: 600 15px/1.35 var(--f-ui); color: var(--ink); }

/* Ошибка: скрипт ставит display: block с текстом и none без него */
.rd #simple-calc .tp-error { display: none; 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 .tp-main-val { display: block; margin: 0; font: 600 28px/1.2 var(--f-ui); letter-spacing: -.3px; color: var(--ink); }
.rd #simple-calc .tp-main-sub { display: block; margin: 6px 0 0; font: 400 14px/1.5 var(--f-ui); letter-spacing: 0; color: var(--mute); }

/* Строки результата */
.rd #simple-calc .tp-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 0; padding: 8px 0; border-top: 1px solid var(--line); font: 400 14px/1.45 var(--f-ui); color: var(--ink); }
.rd #simple-calc .tp-row:first-child { border-top: 0; }
.rd #simple-calc .tp-row > span { flex: 1 1 auto; min-width: 0; color: var(--mute); }
.rd #simple-calc .tp-row > b { flex: 0 0 auto; font-weight: 600; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rd #simple-calc #res-steps sub { font-size: .7em; }

/* Полоса остановочного пути: реакция, задержка тормозов, торможение */
.rd #simple-calc [id="tp-visual"] { margin: 16px 0 0; }
.rd #simple-calc .tp-bar-svg { display: block; width: 100%; max-width: 360px; height: auto; aspect-ratio: 320 / 30; border-radius: 8px; overflow: hidden; }
.rd #simple-calc .tp-seg-react { fill: var(--accent-soft); }
.rd #simple-calc .tp-seg-lag { fill: var(--accent-mid); }
.rd #simple-calc .tp-seg-brake { fill: var(--accent); }
.rd #simple-calc .tp-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; font: 400 12px/1.4 var(--f-ui); color: var(--mute); }
.rd #simple-calc .tp-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.rd #simple-calc .tp-dot { display: inline-block; flex: none; box-sizing: border-box; width: 12px; height: 12px; border-radius: 3px; }
.rd #simple-calc i.tp-seg-react { border: 1px solid var(--accent-mid); background: var(--accent-soft); }
.rd #simple-calc i.tp-seg-lag { background: var(--accent-mid); }
.rd #simple-calc i.tp-seg-brake { background: var(--accent); }
.rd #simple-calc .tp-bar-note { margin: 8px 0 0; font: 400 13px/1.5 var(--f-ui); color: var(--mute); }

/* Таблица пути по скоростям внутри результата */
.rd #simple-calc [id="tp-table"] { margin: 16px 0 0; }
.rd #simple-calc .tp-table-title { margin: 0 0 8px; font: 600 14px/1.4 var(--f-ui); color: var(--ink); }
.rd #simple-calc [id="tp-table"] .table-scroll { margin: 0; border: 1px solid var(--line); border-radius: 16px; background: none; }
.rd #simple-calc .tp-speed-table { width: 100%; margin: 0; border-collapse: collapse; font: 400 14px/1.4 var(--f-ui); color: var(--ink); font-variant-numeric: tabular-nums; }
.rd #simple-calc .tp-speed-table :is(th, td) { padding: 9px 12px; border: 0; border-bottom: 1px solid var(--line); text-align: right; }
.rd #simple-calc .tp-speed-table :is(th, td):first-child { text-align: left; }
.rd #simple-calc .tp-speed-table thead th { background: none; font: 400 11px/1.3 var(--f-mono); letter-spacing: .5px; text-transform: uppercase; color: var(--mute); vertical-align: bottom; }
.rd #simple-calc .tp-speed-table tbody tr:last-child td { border-bottom: 0; }
.rd #simple-calc .tp-speed-table b { font-weight: 600; }

/* Кнопка «Скопировать результат» под таблицей */
.rd #simple-calc [id="copy-btn"] { margin: 16px 0 0; }

@media (max-width: 639px) {
    .rd #simple-calc .tp-main-val { font-size: 22px; }
    .rd #simple-calc .tp-row { gap: 12px; }
    .rd #simple-calc .tp-speed-table { font-size: 13px; }
    .rd #simple-calc .tp-speed-table :is(th, td) { padding: 8px 4px; }
    .rd #simple-calc .tp-speed-table :is(th, td):first-child { padding-left: 8px; }
    .rd #simple-calc .tp-speed-table :is(th, td):last-child { padding-right: 8px; }
    .rd #simple-calc .tp-speed-table thead th { font-size: 10px; letter-spacing: 0; }
}

@media print {
    .rd #simple-calc .tp-chips, .rd #simple-calc [id="copy-btn"] { display: none; }
}