/*
 * «Калькулятор ремонта» theme on top of engine.css (bundles/seoengine/engine.css).
 * Engine tokens are overridden for the warm orange-brown accent; the rest are this site's own
 * components (calculator form, result block, category grids). Mobile first, no fixed widths.
 *
 * Contrast (WCAG AA): light accent #9c4a14 on #fff 6.2:1, on --c-bg 5.7:1, white on accent 6.2:1;
 * dark accent #e8a06a on #161d23 7.9:1; error #b42318 on #fff 6.5:1, dark #ff9b8f on #161d23 8.3:1.
 */
:root {
    --c-accent: #9c4a14;
    --c-link: #9c4a14;
    --c-focus: #9c4a14;
    --c-accent-soft: #f8ede4;
    --c-error: #b42318;
}

@media (prefers-color-scheme: dark) {
    :root {
        --c-accent: #e8a06a;
        --c-link: #f0b386;
        --c-focus: #f0b386;
        --c-accent-soft: #33241a;
        --c-on-accent: #2a1405;
        --c-error: #ff9b8f;
    }
}

/* ---------- Home and category grids ---------- */
.calc-groups, .calc-cards { display: grid; gap: var(--s-4); margin-bottom: var(--s-5); }
.calc-groups > .card, .calc-cards > .card { margin-bottom: 0; }
.calc-group h2 { font-size: var(--fs-h3); }
/* Heading links get a 44px hit area without changing the line box. */
.calc-group h2 a, .calc-card h2 a { display: inline-block; padding-block: 12px; margin-block: -12px; color: var(--c-text); text-decoration: none; }
.calc-group h2 a:hover, .calc-card h2 a:hover { color: var(--c-link); text-decoration: underline; }
.calc-group .link-list { margin-bottom: 0; }
.calc-group .link-list li:last-child { border-bottom: 0; }
.calc-card h2 { font-size: var(--fs-h3); }
.calc-card p { margin: 0; color: var(--c-muted); }

/* ---------- Calculator form ---------- */
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--s-4); }
.form-section { min-width: 0; margin: 0 0 var(--s-2); padding: var(--s-4) 0 0; border: 0; border-top: 1px solid var(--c-border); }
.form-section:first-child, .calc-form > .callout + .form-section { padding-top: 0; border-top: 0; }
.form-section[hidden] { display: none; }
.form-section legend { float: left; width: 100%; margin: 0 0 var(--s-3); padding: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); }
.form-section legend + * { clear: both; }
.calc-form .field { min-width: 0; }
.calc-form .field input, .calc-form .field select { width: 100%; max-width: 100%; }
.calc-form .field label .unit { font-weight: 400; color: var(--c-muted); }
.calc-form .field label .optional { font-weight: 400; color: var(--c-muted); font-size: var(--fs-xs); }
.field-error { margin: var(--s-1) 0 0; font-size: var(--fs-sm); font-weight: 600; color: var(--c-error); }
.field--error input, .field--error select { border-color: var(--c-error); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-2); }
.form-actions button { min-width: 10rem; }

/* ---------- Result ---------- */
.result { scroll-margin-top: var(--s-4); }
.result-main { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: var(--s-4); margin: 0 0 var(--s-4); }
.result-main dt { font-size: var(--fs-sm); color: var(--c-muted); }
.result-main dd { margin: 0; font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums lining-nums; overflow-wrap: anywhere; }
.result-main dd .unit { font-family: var(--font); font-size: var(--fs-base); font-weight: 600; color: var(--c-muted); }
.result .kv { margin-bottom: var(--s-3); }
.result p.small { margin: var(--s-2) 0 0; }

/* ---------- How it is calculated ---------- */
.how .table-wrap { max-width: 32rem; }

/* ---------- Footer ---------- */
.site-footer .disclaimer { color: var(--c-text); }

/* ---------- Wider screens ---------- */
@media (min-width: 560px) {
    .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .calc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 640px) {
    .calc-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
    .form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .calc-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .result-main dd { font-size: 2rem; }
}