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

/* Параллелепипед по трём векторам: подпись над тройкой полей, группа на всю строку */
.rd #simple-calc .fields > .vec-group { grid-column: 1 / -1; margin: 0; }
.rd #simple-calc .vec-label { display: block; margin: 0 0 8px; font: 500 13px/1.35 var(--f-ui); color: var(--ink); }
.rd #simple-calc .vec-inputs { display: flex; gap: 8px; }
.rd #simple-calc .vec-inputs .vec-in { flex: 1 1 0; min-width: 0; padding: 0 10px; text-align: center; }

/* Пирамида: примеры и кнопки под результатом — чипами, как у площадей */
.rd #simple-calc :is(.pr-presets, .pr-actions) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; }
.rd #simple-calc .pr-actions { margin-top: 16px; }
.rd #simple-calc .pr-actions #copy-btn { margin-top: 0; }
.rd #simple-calc .pr-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 .pr-preset { 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 var(--f-ui); letter-spacing: 0; color: var(--ink); white-space: nowrap; cursor: pointer; transition: background .15s; }
.rd #simple-calc .pr-preset:hover { background: var(--accent-soft); }
.rd #simple-calc .pr-preset:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Пирамида: результат и ход решения. Литры после объёма переносятся: на узком экране длинный ответ иначе раздвигает страницу */
.rd #simple-calc .pr-approx { display: inline-block; margin-left: 8px; font: 400 13px/1.4 var(--f-ui); letter-spacing: 0; color: var(--mute); overflow-wrap: anywhere; }
.rd #simple-calc .pr-line { display: block; margin: 0 0 4px; overflow-wrap: anywhere; }
.rd #simple-calc :is(.pr-line, .pr-step) > span:first-child { font-weight: 600; }
.rd #simple-calc .pr-h { display: block; margin: 16px 0 6px; font: 600 14px/1.4 var(--f-ui); }
.rd #simple-calc .pr-h:first-child { margin-top: 0; }
.rd #simple-calc .pr-note { display: block; margin: 0 0 8px; color: var(--mute); }
.rd #simple-calc .pr-answer { display: block; margin: 12px 0 4px; padding: 10px 14px; border-radius: 12px; background: var(--accent-soft); }
.rd #simple-calc .pr-tiny { display: block; font-size: 12px; color: var(--mute); }
.rd #simple-calc .pr-svg-flat { display: block; width: 100%; max-width: 300px; height: auto; margin: 4px 0 10px; }

/* Цвета чертежей объёмов, которых нет у площадей: подсвеченная величина, две грани куба, светлая грань пирамиды */
.rd #simple-calc svg [fill="#bcd6f7"] { fill: color-mix(in srgb, var(--accent-mid) 60%, var(--accent-soft)); }
.rd #simple-calc svg [fill="#dbe7fb"] { fill: color-mix(in srgb, var(--accent-mid) 25%, var(--accent-soft)); }
.rd #simple-calc svg [fill="#cfe0fb"] { fill: color-mix(in srgb, var(--accent-mid) 45%, var(--accent-soft)); }
.rd #simple-calc svg [fill="#f7fafe"] { fill: var(--tile); }
.rd #simple-calc svg [stroke="#bcd6f7"] { stroke: var(--accent-mid); }

@media print {
    .rd #simple-calc :is(.pr-presets, .pr-actions) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .rd #simple-calc .pr-preset { transition: none; }
}