/*
 * «Налоговые калькуляторы» theme on top of engine.css (bundles/seoengine/engine.css): deep indigo accent
 * (okved uses navy #1e3a5f, the engine default is teal-blue #0b5d7a). Tokens + this site's components only.
 * Mobile first (320 px and up), no fixed widths; wide tables scroll inside .table-wrap, not the page.
 *
 * Contrast (WCAG AA ≥ 4.5:1):
 *   light — accent/link #3730a3 on #fff 9.9:1, on --c-bg #f5f7f9 9.3:1, on --c-accent-soft #eef0fb 8.8:1;
 *           white on accent 9.9:1; error #b42318 on #fff 6.6:1; muted #586473 on #eef0fb 5.3:1;
 *   dark  — accent #a5b4fc on #161d23 8.5:1, on #0f1418 9.3:1, on --c-accent-soft #1e2240 7.8:1;
 *           link #b4bffd on #161d23 9.6:1; #161a3d on accent 8.4:1; error #ff9b8f on #161d23 8.4:1.
 */
:root {
    --c-accent: #3730a3;
    --c-link: #3730a3;
    --c-focus: #3730a3;
    --c-accent-soft: #eef0fb;
    --c-on-accent: #fff;
    --c-error: #b42318;
}

@media (prefers-color-scheme: dark) {
    :root {
        --c-accent: #a5b4fc;
        --c-link: #b4bffd;
        --c-focus: #b4bffd;
        --c-accent-soft: #1e2240;
        --c-on-accent: #161a3d;
        --c-error: #ff9b8f;
    }
}

/* ---------- Header ---------- */
.site-nav { display: flex; flex-wrap: wrap; gap: 0 var(--s-4); margin-left: auto; }
.site-nav a { display: inline-block; min-height: 44px; padding: 11px 0; color: var(--c-text); text-decoration: none; font-size: var(--fs-sm); }
.site-nav a:hover { color: var(--c-link); text-decoration: underline; }

/* ---------- Home ---------- */
.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, .calc-card 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 p { margin: 0; color: var(--c-muted); }

.ref-cards { display: grid; gap: var(--s-4); margin: 0 0 var(--s-5); }
.ref-cards > .card { margin: 0; }
.ref-card dt a { display: inline-block; min-height: 44px; padding: 11px 0; font-weight: 600; }
.ref-card dd { margin: 0; color: var(--c-muted); }
.ref-value { display: block; font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; line-height: 1.2; color: var(--c-text); font-variant-numeric: tabular-nums lining-nums; }

/* ---------- 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 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; }
/* 16px keeps iOS from zooming into the field. */
.calc-form .field input, .calc-form .field select { width: 100%; max-width: 100%; font-size: max(1rem, 16px); }
.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.625rem; 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; }
.result-table { margin: var(--s-4) 0; }
.table caption { padding: var(--s-2) 0; text-align: left; font-weight: 600; caption-side: top; }
.table td, .result-table th[scope="row"] { font-variant-numeric: tabular-nums lining-nums; }
.result-table td { text-align: right; white-space: nowrap; }
.result-table tfoot th, .result-table tfoot td { font-weight: 700; border-top: 2px solid var(--c-border-strong); }
.caution { margin: 0 0 var(--s-4); font-size: var(--fs-sm); }
.caution p { margin: 0 0 var(--s-1); }
.badge--warn { background: var(--c-warn-soft); border: 1px solid var(--c-warn-border); color: var(--c-text); }

/* ---------- Key rate ---------- */
.key-rate-value { margin: 0; font-family: var(--font-display); font-size: 2.5rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums lining-nums; }
.key-rate-now p.muted { margin: var(--s-1) 0 0; }
.chart { margin: 0; }
.chart svg { display: block; width: 100%; height: auto; }
.chart-line { fill: none; stroke: var(--c-accent); stroke-width: 2; stroke-linejoin: round; }
.chart-grid { stroke: var(--c-border); stroke-width: 1; }
.chart-tick { stroke: var(--c-border-strong); stroke-width: 1; }
.chart-label { fill: var(--c-muted); font-family: var(--font); font-size: 13px; }
/* The SVG scales with the column: on narrow screens draw labels larger (in viewBox units) and keep every other year. */
@media (max-width: 559px) {
    .chart-label { font-size: 26px; }
    .chart-label--minor { display: none; }
}

/* ---------- How it is calculated, footer ---------- */
.how ol, .how ul { padding-left: 1.25rem; }
.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, .ref-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, .ref-cards, .calc-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .result-main dd { font-size: 2rem; }
}