/*
 * Engine UI layer: the shared modern look of every site (links without underlines, row lists, code chips,
 * sans headings, cards, tables, header/footer, buttons). Linked by layout.html.twig after engine.css and
 * engine-forms.css; sites theme it by overriding tokens only (--c-*, see engine.css).
 * Tokens used: --c-row-hover, --radius-xl, --shadow-card, --shadow-btn, --ease (defined in engine.css).
 * Motion is ≤ 150ms and switched off under prefers-reduced-motion; print keeps its own rules (engine.css @media print).
 */

/* ---------- Links ---------- */
/* Quiet by default: colour and weight carry the affordance; hover/focus add a soft background or a thin underline. */
a { text-decoration: none; }
a:hover { text-decoration: none; }

/* Links inside running text: thin translucent underline, solid on hover. */
:where(.text-page, .how, .faq, .notes, .callout, .lead, .content > p, .section > p, .card > p, .card > ul:not([class]), .card > ol:not([class])) a:not(.btn) {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
    text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
    transition: text-decoration-color var(--ease);
}
:where(.text-page, .how, .faq, .notes, .callout, .lead, .content > p, .section > p, .card > p, .card > ul:not([class]), .card > ol:not([class])) a:not(.btn):hover {
    text-decoration-color: currentColor;
}

/* Navigation, breadcrumbs, footer, tables: weight 500–600, soft background on hover. */
.site-nav a, .footer-links a, .breadcrumbs a, .table td a, .kv dd a { font-weight: 500; }
.site-nav a { color: var(--c-text); }
.site-nav a:hover, .site-nav a:focus-visible { color: var(--c-link); }
.table td a:not(.btn):hover, .kv dd a:not(.btn):hover { color: var(--c-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
/* A button inside a table cell stays a button: no link underline, no inline-link padding trick (engine.css .table td a). */
.table td a.btn, .kv dd a.btn { display: inline-flex; min-height: 46px; padding-block: 0; margin-block: 0; font-weight: 600; text-decoration: none; }
.table td a.btn:hover, .kv dd a.btn:hover { text-decoration: none; }
/* Compact button for table rows and dense lists; the hit area stays ≥ 44px through the min-height. */
.btn--sm { min-height: 44px; padding: 0 16px; font-size: var(--fs-sm); }
.footer-links a { color: var(--c-text); }
.footer-links a:hover { color: var(--c-link); }

/* ---------- Lists of links: rows ---------- */
/* .link-list (engine) and .code-list (okved/bik; not the phone .chips variant) share one row look.
   :is() takes the specificity of its heaviest argument, so the engine rows win over older site rules. */
:is(.link-list, .code-list:not(.chips)) { list-style: none; margin: 0 0 var(--s-4); padding: 0; }
:is(.link-list, .code-list:not(.chips)) > li {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--s-3);
    margin: 1px 0;
    padding: 0 calc(var(--s-3) + 20px) 0 var(--s-3);
    border: 0;
    border-radius: var(--radius);
    break-inside: avoid;
    transition: background-color var(--ease);
}
:is(.link-list, .code-list:not(.chips)) > li > a {
    flex: 1 1 14em;
    min-width: 0;
    min-height: 44px;
    padding: 11px 0;
    display: flex;
    align-items: baseline;
    gap: var(--s-3);
    overflow-wrap: anywhere;
    color: var(--c-text);
    font-weight: 500;
    text-decoration: none;
}
/* The whole row is the target: the link's box stretches over it. */
:is(.link-list, .code-list:not(.chips)) > li > a::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
:is(.link-list, .code-list:not(.chips)) > li > a:focus-visible { outline: none; }
:is(.link-list, .code-list:not(.chips)) > li:has(> a:focus-visible) { outline: 2px solid var(--c-focus); outline-offset: -2px; }
:is(.link-list, .code-list:not(.chips)) > li:hover,
:is(.link-list, .code-list:not(.chips)) > li:has(> a:focus-visible) { background: var(--c-accent-soft); }
:is(.link-list, .code-list:not(.chips)) > li:hover > a { color: var(--c-link); text-decoration: none; }
:is(.link-list, .code-list:not(.chips)) > li:hover .code-name { text-decoration: none; }
/* Thin chevron on the right, drawn with borders (no images). */
:is(.link-list, .code-list:not(.chips)) > li::after {
    content: "";
    position: absolute;
    right: var(--s-4);
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -4px;
    border-top: 1.5px solid var(--c-muted);
    border-right: 1.5px solid var(--c-muted);
    transform: rotate(45deg);
    opacity: .8;
    transition: transform var(--ease), opacity var(--ease);
    pointer-events: none;
}
:is(.link-list, .code-list:not(.chips)) > li:hover::after { opacity: 1; border-color: var(--c-link); transform: translateX(2px) rotate(45deg); }

/* Counters: quiet chips; on narrow rows they wrap under the name, right-aligned. */
:is(.link-list, .code-list:not(.chips)) :is(.count, .badge) {
    position: relative;
    flex: none;
    margin-left: auto;
    padding: 1px 9px;
    border: 0;
    border-radius: 999px;
    background: var(--c-surface-alt);
    color: var(--c-muted);
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.6;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
:is(.link-list, .code-list:not(.chips)) .count { margin-bottom: var(--s-2); }
:is(.link-list, .code-list:not(.chips)) > li:hover :is(.count, .badge) { background: var(--c-surface); }
.link-list--cols > li { margin-inline: 0; }

/* Code + name rows keep the name wrapping under itself. */
.code-list:not(.chips) > li > a { align-items: flex-start; }
.code-list:not(.chips) .code-name { min-width: 0; overflow-wrap: anywhere; color: inherit; }

@media (prefers-reduced-motion: reduce) {
    :is(.link-list, .code-list:not(.chips)) > li::after { transition: none; transform: rotate(45deg); }
}

/* Chip grids (phone): same quiet look. */
.chips a { color: var(--c-text); border-radius: var(--radius); transition: border-color var(--ease), background-color var(--ease); }
.chips a:hover { color: var(--c-link); }

/* ---------- Code chips ---------- */
/* A code (OKVED, BIK, ISO…) as a soft pill: accent text on a tinted background, tabular digits. .code-badge is the old name. */
.code-chip, .code-badge.code-badge, :is(.link-list, .code-list:not(.chips)) .code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    margin: 0 .35em 0 0;
    padding: .08em .6em;
    border: 1px solid color-mix(in srgb, var(--c-accent) 22%, transparent);
    border-radius: 999px;
    background: var(--c-accent-soft);
    color: var(--c-link);
    font-family: var(--font);
    font-size: .92em;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .01em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
:is(.link-list, .code-list:not(.chips)) .code { min-width: 4.25em; margin: 1px 0 0; font-size: var(--fs-sm); }
h1 .code-chip, h1 .code-badge.code-badge { font-size: .62em; vertical-align: .2em; margin-right: .5em; }

/* ---------- Typography ---------- */
h1, h2, h3 { font-weight: 700; text-wrap: balance; }
h1 { line-height: 1.15; letter-spacing: -.02em; }
h2 { line-height: 1.22; letter-spacing: -.015em; }
h3 { line-height: 1.28; letter-spacing: -.01em; }
.lead { color: var(--c-muted); line-height: 1.5; }
.stats dd, .result-main dd, .ref-value { font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.01em; }
.text-page, .notes { max-width: var(--measure); }
.text-page :is(p, li) { line-height: 1.65; }

/* ---------- Surfaces ---------- */
.card {
    padding: var(--s-4);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
}
/* The accent strip is a background (not an inset shadow): the dark theme sets --shadow-card to none, which would
   invalidate a «inset …, var(--shadow-card)» list and drop the strip together with it. */
.card--accent { background-image: linear-gradient(var(--c-accent), var(--c-accent)); background-size: 100% 3px; background-repeat: no-repeat; background-position: 0 0; }
@media (min-width: 480px) { .card { padding: var(--s-5); } }
@media (min-width: 640px) { .card { padding: var(--s-6) var(--s-6); } }

/* Tables */
.table-wrap { border-radius: var(--radius-xl); box-shadow: var(--shadow-card); }
.table th, .table td { padding: 12px var(--s-4); border-bottom-color: color-mix(in srgb, var(--c-border) 70%, transparent); }
.table thead th { background: var(--c-surface-alt); color: var(--c-muted); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .02em; border-bottom: 1px solid var(--c-border); }
.table tbody tr:nth-child(even) > :is(td, th) { background: color-mix(in srgb, var(--c-surface-alt) 38%, transparent); }
.table tbody tr:hover > :is(td, th) { background: var(--c-row-hover); }
.table tbody th { background: transparent; color: var(--c-text); font-weight: 600; font-size: inherit; letter-spacing: 0; }

/* ---------- Icons (Tabler sprite, @SeoEngine/_icons.svg.twig): on every page, so the shared layer ---------- */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
/* Category / page mark: the icon on a soft accent square. */
.cat-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: var(--radius); background: var(--c-accent-soft); color: var(--c-accent); }
.cat-icon .icon { width: 22px; height: 22px; }
/* Heading with an icon: the icon sits in its own left column (absolute), so every line of the text starts at the same x
   and a long word wraps inside the text column instead of widening the heading. */
.title-icon { position: relative; display: block; min-height: 36px; padding-left: 48px; }
.title-icon > .cat-icon { position: absolute; left: 0; top: calc((1.15em - 36px) / 2); }

/* ---------- Header ---------- */
.site-header { border-top: 0; border-bottom: 1px solid var(--c-border); box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset; }
.site-header .container { min-height: 64px; gap: var(--s-2) var(--s-4); }
.site-logo { font-family: var(--font); font-weight: 700; font-size: 1.1875rem; letter-spacing: -.02em; margin-right: var(--s-2); }
.site-logo:hover { color: var(--c-link); }
/* Site mark: accent rounded square with a Tabler glyph (engine.site.icon_glyph) or the icon_text letters; tokens, so dark theme follows. */
.site-logo__mark { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: var(--c-accent); color: var(--c-on-accent); font-size: .75rem; font-weight: 700; letter-spacing: 0; line-height: 1; }
.site-logo .site-logo__mark svg { width: 20px; height: 20px; color: inherit; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.site-nav { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.site-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--s-3);
    border-radius: var(--radius);
    font-size: var(--fs-sm);
    text-decoration: none;
    transition: background-color var(--ease), color var(--ease);
}
.site-nav a:hover { background: var(--c-row-hover); text-decoration: none; }
.site-nav a:is([aria-current], .is-active) { background: var(--c-accent-soft); color: var(--c-link); font-weight: 600; }

/* Phones: header = logo + theme button on the first row, the navigation as ONE horizontally scrolling row (no wrapping,
   no scrollbar; the right edge fades out as a hint), the search (only pages that have one) on its own row. */
@media (max-width: 639px) {
    .site-header .container { gap: 2px var(--s-3); min-height: 0; padding-top: 6px; padding-bottom: 6px; }
    .site-logo { flex: 1 1 0; min-width: 0; margin-right: 0; font-size: 1.0625rem; line-height: 1.15; }
    .site-logo__mark { width: 28px; height: 28px; border-radius: 7px; }
    .site-logo .site-logo__mark svg { width: 18px; height: 18px; }
    .site-header .theme-toggle { margin-left: 0; }
    .site-nav {
        flex: 1 1 100%;
        flex-wrap: nowrap;
        gap: 2px;
        margin: 0 calc(-1 * var(--gap));
        padding: 0 var(--gap);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }
    .site-nav::-webkit-scrollbar { display: none; }
    .site-nav a { flex: none; white-space: nowrap; }
}
/* Desktop: logo, navigation (left, next to the logo even when it is a single item), search and the theme button on one line. */
@media (min-width: 640px) {
    .header-search { flex: 0 1 300px; min-width: 200px; }
}
/* Theme switch (theme-toggle.js): 44x44 icon button. Its box is laid out from the first paint, so the header never changes
   height when the script runs: until data-ready (set by theme-toggle.js) the button is only invisible (visibility keeps
   the space; `hidden` would remove it and shift the navigation and the content, CLS). On phones it sits right of the
   logo (first row), from 640px at the far right of the header. The icon shows the CURRENT mode: auto / light / dark. */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    margin-left: auto;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: transparent;
    color: var(--c-text);
    box-shadow: none;
    cursor: pointer;
    transition: background-color var(--ease), color var(--ease);
    visibility: hidden;
}
.theme-toggle[data-ready] { visibility: visible; }
.theme-toggle:hover { background: var(--c-row-hover); }
/* The icon is an inline <svg> in the button (the markup carries the default one, theme-toggle.js swaps the paths per state):
   Tabler Icons v3.24.0 outline (MIT), stroke 1.75, painted with the text colour. */
.theme-toggle__icon {
    display: block;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}
@media (min-width: 640px) {
    .site-header .theme-toggle { order: 9; }
    .site-header .container:has(.header-search) .theme-toggle { margin-left: 0; }
}

/* Breadcrumbs */
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }

/* ---------- Footer ---------- */
.site-footer { padding: var(--s-6) 0; }
.site-footer .container { display: grid; gap: var(--s-2) var(--s-6); }
.site-footer .container > p { grid-column: 1 / -1; margin: 0; }
.footer-links { gap: 0 var(--s-4); margin: 0; }
.footer-links a { padding-inline: 0; color: var(--c-text); }
/* The copyright line is always the last row, set off by a thin rule; the trust links (engine-inserted «О проекте» …)
   stand in the same grid as the app's own link columns, right above it. */
.site-footer .container > p:last-child:not(:only-child) { margin-top: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--c-border); }
.footer-links a { display: inline-flex; align-items: center; }
@media (min-width: 768px) {
    .site-footer .container { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); align-items: start; }
    .footer-links { flex-direction: column; flex-wrap: nowrap; gap: 0; }
    .footer-links a { min-height: 40px; padding-block: 6px; }
    /* A long list of sections (stroy: 8) stands in two columns instead of one tall stack. */
    .footer-links:has(> a:nth-child(6)) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-column: span 2; column-gap: var(--s-4); }
}

/* ---------- Buttons ---------- */
button, .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: 46px;
    padding: 0 22px;
    border-radius: 10px;
    box-shadow: var(--shadow-btn);
    font-size: var(--fs-base);
    font-weight: 600;
    transition: background-color var(--ease), border-color var(--ease), filter var(--ease), box-shadow var(--ease);
}
button:hover, .btn:hover { filter: brightness(1.1); }
button:active, .btn:active { filter: brightness(.94); box-shadow: none; }
button:disabled, .btn[aria-disabled="true"], .btn:disabled { opacity: .55; cursor: not-allowed; filter: none; box-shadow: none; }
/* Secondary: neutral surface with a border. Ghost: transparent, quiet. */
.btn--secondary { background: var(--c-surface); color: var(--c-text); border-color: var(--c-border-strong); }
.btn--secondary:hover { background: var(--c-row-hover); filter: none; }
.btn--ghost { background: transparent; color: var(--c-link); border-color: var(--c-border); box-shadow: none; }
.btn--ghost:hover { border-color: var(--c-accent); background: var(--c-accent-soft); filter: none; }
.btn--ghost:active { background: var(--c-accent-soft); filter: none; }

/* Pagination */
.pagination a, .pagination span { border-radius: var(--radius); font-weight: 500; transition: background-color var(--ease), border-color var(--ease); }
.pagination a:hover { background: var(--c-row-hover); border-color: var(--c-border-strong); }

/* ---------- Print: none of the above decorates paper ---------- */
@media print {
    :is(.link-list, .code-list:not(.chips)) > li { padding: 0; margin: 0; border-bottom: 1px solid var(--c-border); border-radius: 0; }
    :is(.link-list, .code-list:not(.chips)) > li::after, :is(.link-list, .code-list:not(.chips)) > li > a::before { display: none; }
    .card, .table-wrap { box-shadow: none !important; }
    .code-chip, .code-badge.code-badge, :is(.link-list, .code-list:not(.chips)) .code { border-color: var(--c-border); background: none; color: inherit; }
    .site-footer .container { display: block; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}

/* ---------- Headings: never break a word in the middle unless it cannot fit at all ---------- */
h1, h2, h3, .site-logo { overflow-wrap: break-word; hyphens: manual; }
@media (max-width: 400px) { :root { --fs-h1: 1.625rem; --fs-h2: 1.25rem; } }
@media (max-width: 359px) { :root { --fs-h1: 1.5rem; } }

/* ---------- Result block (engine; calculators of every site) ---------- */
/* Order inside .result: h2 «Результат» → .result-main (the answer) → .print-actions (PDF / print / link) →
   disclaimers and cautions → details (.kv, tables) → .next-steps. */
.result { scroll-margin-top: var(--s-4); }
.result > h2 { margin-bottom: var(--s-3); }
.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 { margin-bottom: 2px; font-size: var(--fs-sm); color: var(--c-muted); }
.result-main dd { margin: 0; font-family: var(--font-display); font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem); font-weight: 700; line-height: 1.15; 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); }
/* Date line «Нормы действуют по состоянию на …» — a quiet callout, not grey fine print (YMYL). */
.norms-date { margin: 0 0 var(--s-4); }

/* «Что дальше»: 2–4 related tools right under the answer. */
.next-steps { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--c-border); }
.next-steps > h3 { margin: 0 0 var(--s-2); font-size: var(--fs-h3); }
.next-steps .link-list { margin: 0; }
@media (min-width: 640px) {
    .next-steps .link-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-4); }
}
@media print { .next-steps { display: none; } }

/* «Другие калькуляторы»: a two-column GRID (not CSS columns), so the columns start on one line whatever their length. */
@media (min-width: 768px) {
    .link-list--cols { columns: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-6); align-content: start; }
}

/* ---------- Tables ---------- */
/* Scroll inside the block; cells never break a word at an arbitrary letter (a squeezed column grows the table, the
   wrapper scrolls). Where the browser supports scroll-driven animations the scrolled edge fades (left after the first
   scroll, right until the end): a visible «there is more» hint with no JS. Tokens only, no colours of its own. */
.table-wrap { max-width: 100%; overscroll-behavior-x: contain; scrollbar-width: thin; box-shadow: none; }
.table :is(th, td) { overflow-wrap: normal; word-break: normal; hyphens: manual; }
/* Number columns (class="num" on th and td): right-aligned, tabular figures, the figures never wrap. */
.table :is(th, td).num { text-align: right; font-variant-numeric: tabular-nums lining-nums; }
.table td.num { white-space: nowrap; }
/* Header cells may wrap between words (a long header must not stretch its column and squeeze the others into letter-high text). */
.table thead th { white-space: normal; }
@property --tw-l { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --tw-r { syntax: "<length>"; inherits: false; initial-value: 0px; }
@keyframes tw-fade-l { from { --tw-l: 0px; } to { --tw-l: 28px; } }
@keyframes tw-fade-r { from { --tw-r: 28px; } to { --tw-r: 0px; } }
@supports (animation-timeline: scroll()) {
    .table-wrap {
        animation: tw-fade-l linear both, tw-fade-r linear both;
        animation-timeline: scroll(self inline), scroll(self inline);
        animation-range: 0% 40px, calc(100% - 40px) 100%;
        -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--tw-l), #000 calc(100% - var(--tw-r)), transparent);
        mask-image: linear-gradient(to right, transparent, #000 var(--tw-l), #000 calc(100% - var(--tw-r)), transparent);
    }
}
@media print { .table-wrap { -webkit-mask-image: none; mask-image: none; animation: none; } }

/* ---------- Scroll rows with an edge fade (phones) ---------- */
/* The header navigation, the breadcrumbs and the «popular» chips are ONE scrolling row on a phone. The same fade as the
   tables (--tw-l / --tw-r, scroll-driven where supported): the right edge fades while there is more to the right, the
   left edge after the first scroll. Browsers without scroll-driven animations keep a constant right fade. */
@media (max-width: 639px) {
    .site-nav, .breadcrumbs ol, .popular ul {
        --tw-l: 0px;
        --tw-r: 28px;
        -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--tw-l), #000 calc(100% - var(--tw-r)), transparent);
        mask-image: linear-gradient(to right, transparent, #000 var(--tw-l), #000 calc(100% - var(--tw-r)), transparent);
    }
    /* Breadcrumbs: one line, the last (current) item is scrolled into view by a tiny script in the layout. */
    .breadcrumbs ol {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        margin: var(--s-1) calc(-1 * var(--gap)) 0;
        padding: 0 32px 0 var(--gap);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }
    .breadcrumbs ol::-webkit-scrollbar { display: none; }
    .breadcrumbs li { flex: none; white-space: nowrap; }
}
@supports (animation-timeline: scroll()) {
    @media (max-width: 639px) {
        .site-nav, .breadcrumbs ol, .popular ul {
            --tw-r: 0px;
            animation: tw-fade-l linear both, tw-fade-r linear both;
            animation-timeline: scroll(self inline), scroll(self inline);
            animation-range: 0% 40px, calc(100% - 40px) 100%;
        }
    }
}
@media print { .site-nav, .breadcrumbs ol, .popular ul { -webkit-mask-image: none; mask-image: none; animation: none; } }

/* ---------- Key-value list: two columns on a phone ---------- */
.kv__item { flex-basis: 150px; }
.kv__item--wide { flex-basis: 100%; }


/* ---------- Folding groups of a form (details.form-fold, stroy constructors): chevron shows it opens ---------- */
.form-fold > summary { list-style: none; position: relative; padding-right: var(--s-6); }
.form-fold > summary::-webkit-details-marker { display: none; }
.form-fold > summary::after {
    content: "";
    position: absolute;
    right: var(--s-2);
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -6px;
    border-right: 2px solid var(--c-muted);
    border-bottom: 2px solid var(--c-muted);
    transform: rotate(45deg);
    transition: transform var(--ease);
}
.form-fold[open] > summary::after { margin-top: -2px; transform: rotate(-135deg); }
@media print { .form-fold > summary::after { display: none; } }

/* Result whose h2 IS the answer («Отпускные: 12 345 ₽», kalendar): a small «Результат» label above, the answer set large. */
.result__label { margin: 0 0 var(--s-1); font-size: var(--fs-sm); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--c-muted); }
.result__label + h2 { margin-top: 0; font-size: clamp(1.375rem, 1.05rem + 1.6vw, 1.875rem); line-height: 1.2; }

/* A «Как считается» that is a single text block: its h2 became the (closed) accordion summary — keep the h2 size. */
.how .collapsible--solo .collapsible__title { font-size: var(--fs-h2); letter-spacing: -.015em; }
.how .collapsible--solo { border-bottom: 1px solid var(--c-border); }

/* ---------- Text pages: text card + side panel (templates/_text_layout.html.twig) ---------- */
/* Phones: one column; the table of contents is a closed <details> above the text. From 960px: the text card (line
   ≈ 66ch) and a sticky panel with the contents and the site documents; the <details> is hidden then. */
.text-layout { display: grid; gap: var(--s-4); align-items: start; }
.text-layout > .card { margin: 0; }
.text-layout > .text-page { max-width: none; min-width: 0; }
.text-layout .text-page :is(h2, h3)[id] { scroll-margin-top: var(--s-4); }
.text-aside { display: none; }
.text-toc-mobile { padding: 0; }
.text-toc-mobile > summary { display: flex; align-items: center; min-height: 48px; padding: 0 var(--s-4); font-weight: 600; cursor: pointer; }
.text-toc-mobile[open] > summary { border-bottom: 1px solid var(--c-border); }
.text-toc-mobile > .text-nav { padding: var(--s-2) var(--s-2) var(--s-3); }
.text-aside__title { margin: 0 0 var(--s-2); padding: 0 var(--s-3); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--c-muted); }
.text-nav { list-style: none; margin: 0; padding: 0; }
.text-nav > li { margin: 1px 0; padding: 0; }
.text-nav a {
    display: flex; align-items: center;
    min-height: 44px; padding: 8px var(--s-3);
    border-radius: var(--radius);
    color: var(--c-text); font-size: var(--fs-sm); font-weight: 500; line-height: 1.35;
    overflow-wrap: anywhere; text-decoration: none;
    transition: background-color var(--ease), color var(--ease);
}
.text-nav a:hover { background: var(--c-row-hover); color: var(--c-link); }
.text-nav a[aria-current] { background: var(--c-accent-soft); color: var(--c-accent); font-weight: 600; }
@media (min-width: 960px) {
    .text-layout:not(.text-layout--single) { grid-template-columns: minmax(0, 1fr) 280px; gap: var(--s-5); }
    .text-toc-mobile { display: none; }
    .text-aside { display: block; position: sticky; top: var(--s-4); padding: var(--s-4) var(--s-3); }
    .text-aside > nav + nav { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--c-border); }
}
@media print {
    .text-aside, .text-toc-mobile { display: none !important; }
    .text-layout { display: block; }
}

/* ---------- Cookie and analytics notice ----------
   Shown while the visitor has not decided (localStorage consent.analytics, consent.js); the footer link
   «Настройки cookie» reopens it. Fixed at the bottom: nothing shifts on first paint. Phones: a bar on the bottom edge,
   two equal 44px buttons side by side. From 640px: a card in the bottom-left corner (the «up» button is bottom-right).
   While shown, the footer gets bottom room so the page can be scrolled clear of it. Tokens only: no dark copies needed. */
.cookie-notice {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 100;
    display: grid; gap: var(--s-2);
    padding: var(--s-3) var(--gap);
    border-top: 1px solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-text);
    box-shadow: var(--shadow-pop);
    font-size: var(--fs-sm);
    line-height: 1.4;
}
.cookie-notice[hidden] { display: none; }
.cookie-notice:focus { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.cookie-notice p { margin: 0; }
.cookie-notice__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.cookie-notice__btn {
    min-height: 44px;
    padding: 0 var(--s-3);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius);
    background: var(--c-surface);
    color: var(--c-text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.cookie-notice__btn:hover { background: var(--c-row-hover); }
.cookie-notice__btn:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
body:has(.cookie-notice:not([hidden])) .site-footer { padding-bottom: calc(var(--s-6) + 150px); }
body:has(.cookie-notice:not([hidden])) .scroll-top { bottom: 170px; }
@media (min-width: 640px) {
    .cookie-notice {
        left: var(--s-4); right: auto; bottom: var(--s-4);
        max-width: 440px;
        border: 1px solid var(--c-border);
        border-radius: var(--radius-lg);
    }
    body:has(.cookie-notice:not([hidden])) .site-footer { padding-bottom: calc(var(--s-6) + 130px); }
    body:has(.cookie-notice:not([hidden])) .scroll-top { bottom: 16px; }
}