/*
 * stepenrodstva.ru — собственный лист стилей.
 *
 * ⛔ Ни Tailwind, ни Alpine, ни любой другой библиотеки с чужого CDN. Замер сети
 *    04.08.2026: страница, чей вид лежит на стороннем хосте, при его недоступности
 *    отдаёт голый HTML, а около 88 % посетителей приходят из России.
 *
 * ПАЛИТРА. Тёплая, один акцент. Сургучный бордо #8E2433 выбран замером по флоту
 * 09.08.2026: оранжевый, терракота, янтарь и зелень заняты соседями, полоса тёмного
 * тёплого красного свободна. Он же уходит в знак, манифест и og-карточки — палитра
 * живёт в пяти местах сразу, и перекрасить только CSS означает тёплый сайт с
 * фиолетовым превью в мессенджере.
 * ⛔ Синего, фиолетового и цианового здесь нет ни одного оттенка.
 *
 * ТЁМНОЙ ТЕМЫ НЕТ, и это решение, а не пропуск. Аудитория — взрослые люди, которые
 * разбираются с наследством и роднёй, а не молодая техническая. Правило сети:
 * недоведённая тёмная тема хуже отсутствующей. Поэтому `prefers-color-scheme` здесь
 * не читается вовсе — посетитель с тёмной системой получит ровно тот же светлый сайт,
 * контраст которого мерили.
 */

:root {
    /* Поверхности */
    --holst:        #FAF7F4;   /* фон страницы */
    --list:         #FFFFFF;   /* карточка, прибор */
    --list-tenj:    #F4EEE8;   /* вложенная поверхность внутри прибора */
    --granica:      #E7DDD4;
    --granica-tvjordaja: #D6C7BA;

    /* Текст */
    --tekst:        #241C1A;   /* тёплый графит, не чёрный */
    --tekst-tihij:  #6B5D57;
    --tekst-slabyj: #90817A;

    /* Акцент */
    --akcent:       #8E2433;
    --akcent-temno: #6E1826;
    --akcent-svet:  #F6E9E9;
    --akcent-kraj:  #E3C9CC;

    /* Смысловые метки: кровное / свойство / духовное */
    --krov:         #8E2433;
    --krov-fon:     #F6E9E9;
    --svojstvo:     #7A5A2E;
    --svojstvo-fon: #F6EFE2;
    --duh:          #4E5B47;
    --duh-fon:      #EDF1EA;

    --radius:       10px;
    --radius-krup:  14px;
    --tenj-malaja:  0 1px 2px rgba(36, 28, 26, .06);
    --tenj-pribor:  0 1px 2px rgba(36, 28, 26, .06), 0 8px 24px rgba(36, 28, 26, .07);
    --tenj-podnjat: 0 2px 4px rgba(36, 28, 26, .08), 0 14px 34px rgba(36, 28, 26, .10);

    --shrift-tekst: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    /* 🔴 ЗАСЕЧЕК НЕТ НИ ОДНОЙ. До 10.08.2026 здесь стояла Georgia, и она уходила в
       заголовки, шапку, ответ прибора, подвал — восемь мест сразу. Владелец увидел
       это на экране: сайт читался как книжная вёрстка XIX века, а не как прибор.
       Стек СВОЙ у этого сайта (Optima/Candara — гуманистический гротеск, тёплые формы
       под родословную тему); одинаковый стек на пятнадцати сайтах — отпечаток сети.
       ⛔ Только системные шрифты: ничего не подгружается со стороны. */
    --shrift-zagolovok: "Optima", "Candara", "Gill Sans MT", "Segoe UI", sans-serif;

    /* Приём сайта: родословные линии. Цвет ветви и узла — один на все места, где
       мотив появляется (первый экран, плитки терминов, списки подвала). */
    --vetv:         #D9BFC2;
    --vetv-tihaja:  rgba(142, 36, 51, .10);

    --perehod: 180ms cubic-bezier(.2, .6, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

body {
    margin: 0;
    background: var(--holst);
    color: var(--tekst);
    font: 16px/1.65 var(--shrift-tekst);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* ⛔ Никаких горизонтальных переполнений: ширина считается по содержимому, а
       широкие таблицы прокручиваются внутри своей обёртки, а не рвут страницу. */
    overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--shrift-zagolovok); font-weight: 700; line-height: 1.22; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(1.5rem, 1.12rem + 1.9vw, 2.5rem); }
h2 { font-size: clamp(1.3rem, 1.08rem + 1.05vw, 1.75rem); margin-top: 0; }
h3 { font-size: 1.1rem; }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--akcent); text-decoration-color: var(--akcent-kraj); text-underline-offset: .18em; transition: color var(--perehod), text-decoration-color var(--perehod); }
a:hover { color: var(--akcent-temno); text-decoration-color: currentColor; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--akcent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Цели нажатия: минимум 40 px по высоте — рекомендация, на которую ссылается
   внешний аудит 09.08.2026. Порог был 24 px, и второстепенные кнопки садились
   на него: «Убрать последнее» 313×36, кнопка плашки cookies 34.
   ⚠️ Правило действует только там, где min-height вообще работает: у строчных
   ссылок внутри текста оно бездействует, и это верно — подчёркнутое слово в
   абзаце не должно раздвигать строку. Ширину не трогаем, она комфортна. */
a, button, summary, [role="button"], input[type="submit"] { min-height: 40px; }
/* ⛔ Два исключения, и оба проверены замером, а не рассуждением:
   `.skrytno` — визуально скрытая подпись для чтеца экрана: min-height побеждает
   height, и клипованная коробка выросла бы с 1 px до 40;
   `label` — подпись НАД полем, а не цель нажатия: цель здесь само поле (46 px),
   а подписи правило добавило бы по 16 px пустоты на каждое поле формы. */
.skrytno { min-height: 0; }

img, svg { max-width: 100%; height: auto; }

/* ── Каркас ──────────────────────────────────────────────────────────────── */
.okruzhenie { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.okruzhenie--uzkaja { max-width: 760px; }
.rodoslovnaja { flex: 1 0 auto; width: 100%; }
.strochka { padding: 40px 0; }
.strochka--pervaja { padding-top: 28px; }
.strochka--tihaja { background: linear-gradient(180deg, #F5F0EA 0%, var(--holst) 100%); }

/* ── ПРИЁМ САЙТА: РОДОСЛОВНЫЕ ЛИНИИ ──────────────────────────────────────────
 * Предмет сайта — древо: узлы (люди) и связи (рождения). Поэтому лицо сайта не
 * абстрактный градиент, а сама схема родства: на первом экране она лежит бледной
 * подложкой, а в плитках терминов и в списках подвала от неё остаются короткие
 * ветви с узлом. Один мотив в трёх местах читается как замысел, а не как украшение.
 *
 * ⚠️ Схема — инлайновый SVG в data-URI, а не файл: лишнего запроса нет, вес около
 *    0,6 КБ и лежит он в CSS, то есть в разметку страницы не добавляется ни байта.
 * ⚠️ Прозрачность .5 при цвете #8E2433 по холсту #FAF7F4 — замер контраста текста
 *    поверх не меняется: схема стоит НИЖЕ содержимого (z-index) и не заходит под
 *    сам прибор, только под заголовок и вводный абзац.
 * ⛔ Ничего не двигается: движение на первом экране конкурирует с прибором, ради
 *    которого сюда и пришли. */
.strochka--pervaja { position: relative; overflow: hidden; }
.strochka--pervaja::before {
    content: "";
    /* ⚠️ Схема стоит ЦЕЛИКОМ в поле зрения, а не «вылезает» за правый край: обрезанное
       древо на первом замере читалось не деревом, а случайными трубами. */
    position: absolute; top: -8px; right: 6px; width: 300px; height: 150px;
    pointer-events: none; z-index: 0; opacity: .3;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 150' fill='none' stroke='%238E2433' stroke-width='1.6'%3E%3Cpath d='M150 26v22M70 48h160M70 48v24M230 48v24M70 84v20M230 84v20M30 104h80M190 104h80M30 104v18M110 104v18M190 104v18M270 104v18'/%3E%3Cg fill='%238E2433' stroke='none'%3E%3Ccircle cx='150' cy='20' r='6'/%3E%3Ccircle cx='70' cy='78' r='5'/%3E%3Ccircle cx='230' cy='78' r='5'/%3E%3Ccircle cx='30' cy='128' r='4'/%3E%3Ccircle cx='110' cy='128' r='4'/%3E%3Ccircle cx='190' cy='128' r='4'/%3E%3Ccircle cx='270' cy='128' r='4'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
    /* Корень наверху сильнее, листья растворяются — иначе схема спорит с прибором,
       который начинается прямо под ней. */
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .45) 58%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .45) 58%, transparent 100%);
}
.strochka--pervaja > .okruzhenie { position: relative; z-index: 1; }
@media (max-width: 720px) {
    /* 🔴 На телефоне схема была ВДВОЕ крупнее и вылезала за правый край — на снимке 390
       это читалось не деревом, а каракулями поверх заголовка. Здесь она уходит в угол
       целиком: узкая полоса над заголовком, где текста нет. */
    .strochka--pervaja::before { width: 168px; height: 84px; top: -4px; right: 6px; opacity: .26; }
}

/* ── Шапка ───────────────────────────────────────────────────────────────── */
/* Имена-зацепки (`krona__perehod--menju`, `krona__menju-mob`, `krona--szhata`,
   `krona--otorvana`) заданы не вкусом: их читает `public/assets/js/karkas.js`.
 *
 * 🔴 ШАПКА НЕ ПРЯЧЕТСЯ, А СЖИМАЕТСЯ — правка 10.08.2026. Замер по флоту: десять сайтов
 * имели дословно одну конструкцию шапки (56 px, фиксированная, уезжает вверх при
 * прокрутке вниз) и отличались только транслитерацией имён классов. Здесь поведение
 * другое: шапка остаётся на месте всегда, а при прокрутке становится на 16 px ниже и
 * убирает вторую строку. Причина не только в разведении: на этом сайте посетитель
 * собирает цепочку и постоянно возвращается к меню разделов — уехавшая шапка означала
 * лишний жест вверх. Класса прежнего самоскрытия не осталось ни здесь, ни в скрипте:
 * мёртвый класс в CSS читается как рабочее поведение. Сторожит `ShapkaTest`. */
.krona {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    background: rgba(250, 247, 244, .93);
    backdrop-filter: saturate(150%) blur(10px);
    /* ⛔ Границы снизу нет: тонкая линия под шапкой делает интерфейс шаблонным.
       Край обозначается тенью, и только когда под шапкой есть прокрученное. */
    transition: transform 260ms cubic-bezier(.2, .6, .3, 1), box-shadow var(--perehod);
    will-change: transform;
}
.krona--otorvana { box-shadow: 0 1px 0 rgba(36, 28, 26, .07), 0 6px 20px rgba(36, 28, 26, .06); }
.krona__ryad {
    display: flex; align-items: center; gap: 16px; min-height: 62px;
    transition: min-height 220ms cubic-bezier(.2, .6, .3, 1);
}
/* Сжатие: вторая строка складывается, знак мельчает. Содержимое страницы при этом не
   двигается — шапка фиксированная, поэтому сдвига раскладки нет ни на кадр. */
.krona--szhata .krona__ryad { min-height: 46px; }
.krona--szhata .krona__podpis { max-height: 0; opacity: 0; }
.krona--szhata .krona__znak svg { width: 24px; height: 24px; }

.krona__znak { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; flex-shrink: 0; }
.krona__znak svg { display: block; width: 30px; height: 30px; flex-shrink: 0; transition: width var(--perehod), height var(--perehod); }
.krona__imja { font-family: var(--shrift-zagolovok); font-weight: 700; font-size: 1.05rem; line-height: 1.15; letter-spacing: -.01em; display: block; transition: color var(--perehod); }
.krona__znak:hover .krona__imja { color: var(--akcent); }
.krona__podpis { display: block; font-family: var(--shrift-tekst); font-weight: 400; font-size: .715rem; color: var(--tekst-tihij); letter-spacing: .005em; line-height: 1.3; max-height: 1.4em; overflow: hidden; transition: max-height var(--perehod), opacity var(--perehod); }

.krona__menju { display: flex; gap: 3px; margin-left: auto; align-items: center; }
.krona__punkt {
    display: inline-block; padding: 7px 12px; border-radius: 7px;
    text-decoration: none; color: var(--tekst-tihij); font-size: .93rem; font-weight: 500;
    white-space: nowrap;
    transition: background var(--perehod), color var(--perehod);
}
.krona__punkt:hover { background: var(--akcent-svet); color: var(--akcent-temno); }
.krona__punkt[aria-current="page"] { color: var(--akcent); background: var(--akcent-svet); font-weight: 600; }

.krona__perehod--menju {
    display: none; margin-left: auto; cursor: pointer;
    background: var(--list); border: 1px solid var(--granica-tvjordaja); border-radius: 8px;
    padding: 8px; color: var(--tekst); box-shadow: var(--tenj-malaja);
    transition: border-color var(--perehod), color var(--perehod);
}
.krona__perehod--menju:hover { border-color: var(--akcent); color: var(--akcent); }
.krona__perehod--menju svg { display: block; width: 20px; height: 20px; }

/* 🔴 Своё `svg { display:block }` сильнее браузерного [hidden] — на пяти сайтах сети
   из-за этого в шапке горели бургер И крест разом. Отсюда явный и общий запрет. */
[hidden] { display: none !important; }

.krona__menju-mob {
    display: none;
    border-top: 1px solid var(--granica);
    background: var(--list);
    box-shadow: 0 12px 28px rgba(36, 28, 26, .12);
    padding: 8px 0 14px;
}
.krona__menju-mob:not([hidden]) { display: block; }
.krona__menju-mob .krona__punkt { display: block; padding: 12px 14px; font-size: 1rem; border-radius: 8px; }

@media (max-width: 880px) {
    .krona__menju { display: none; }
    .krona__perehod--menju { display: block; }
}
@media (min-width: 881px) {
    /* ⛔ Панель не прячется `translate-x`: спрятанный вбок блок даёт горизонтальный
       скролл в Safari, браузер считает его ширину. На широком экране её просто нет. */
    .krona__menju-mob { display: none !important; }
}

/* Отступ под фиксированную шапку. Внутренние страницы отбивают ещё и крошки.
   ⚠️ Число равно НЕСЖАТОЙ высоте: сжимается шапка только после прокрутки, а отступ
   должен быть верен на первом кадре, иначе заголовок прыгает при загрузке. */
body { padding-top: 62px; }

/* ── Крошки: подача «tonkaya» — мельче, капсом, вплотную к h1 ─────────────── */
.vetv-puti { padding-top: 18px; }
.vetv-puti ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tekst-slabyj); }
.vetv-puti a { color: var(--tekst-tihij); text-decoration: none; }
.vetv-puti a:hover { color: var(--akcent); }
.vetv-puti li + li::before { content: "·"; margin-right: 6px; color: var(--granica-tvjordaja); }

/* ── Прибор: определитель родства ────────────────────────────────────────── */
.rd-pribor {
    background: var(--list);
    border: 1px solid var(--granica);
    border-radius: var(--radius-krup);
    box-shadow: var(--tenj-pribor);
    overflow: hidden;
}
.rd-pribor__chast { padding: 20px 22px; }
.rd-pribor__chast + .rd-pribor__chast { border-top: 1px solid var(--granica); }

/* 🔴 ДВЕ КОЛОНКИ НА ШИРОКОМ ЭКРАНЕ — не украшение, а исправление замеренного дефекта.
   В первой версии прибор был в один столбец, и на 1280 получалось ровно то, что
   визуальная планка запрещает пунктом 3: левая колонка и пустая правая треть. Хуже
   того, ответ уезжал под пять групп кнопок и на первый экран не попадал вовсе —
   то есть первый экран не отдавал пользу. Механизм слева, ответ справа: обе половины
   заняты делом, и ответ виден сразу. Порядок в разметке при этом остаётся 1-2-3, и
   на телефоне номера шагов не врут. */
@media (min-width: 900px) {
    .rd-pribor { display: grid; grid-template-columns: 1.02fr 1fr; grid-template-rows: auto 1fr; }
    .rd-pribor__chast--cep   { grid-column: 1; grid-row: 1; }
    .rd-pribor__chast--shagi { grid-column: 1; grid-row: 2; border-top: 1px solid var(--granica); }
    .rd-pribor > .rd-otvet {
        grid-column: 2; grid-row: 1 / 3;
        border-top: none; border-left: 1px solid var(--granica);
        align-self: stretch;
    }
}

.rd-shag { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.rd-nomer {
    flex-shrink: 0;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--akcent); color: #fff;
    font-size: .82rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--shrift-tekst);
}
.rd-shag__tekst { font-weight: 600; font-size: .97rem; }
.rd-shag__tekst small { display: block; font-weight: 400; font-size: .84rem; color: var(--tekst-tihij); }

/* Собранная цепочка */
.rd-cep { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 40px; }
.rd-cep__zveno {
    display: inline-flex; align-items: center;
    padding: 6px 11px; border-radius: 999px;
    background: var(--list-tenj); border: 1px solid var(--granica);
    font-size: .93rem; font-weight: 500;
}
.rd-cep__zveno--ya { background: var(--akcent); border-color: var(--akcent); color: #fff; font-weight: 600; }
.rd-cep__strelka { color: var(--tekst-slabyj); font-size: .9rem; }
.rd-cep__pusto { color: var(--tekst-slabyj); font-size: .93rem; }
.rd-cep__pometa { display: inline-block; margin-left: 4px; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tekst-slabyj); }

.rd-upravlenie { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* Кнопки-звенья */
.rd-gruppa + .rd-gruppa { margin-top: 12px; }
.rd-gruppa__imja { font-family: var(--shrift-tekst); font-size: .74rem; letter-spacing: .09em; text-transform: uppercase; color: var(--tekst-slabyj); margin: 0 0 7px; font-weight: 600; }
.rd-knopki { display: flex; flex-wrap: wrap; gap: 8px; }
.rd-knopka {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 42px; padding: 9px 16px;
    background: var(--list); color: var(--tekst);
    border: 1px solid var(--granica-tvjordaja); border-radius: 9px;
    font: 500 .96rem/1.2 var(--shrift-tekst);
    text-decoration: none; cursor: pointer;
    box-shadow: var(--tenj-malaja);
    transition: border-color var(--perehod), background var(--perehod), transform var(--perehod), box-shadow var(--perehod), color var(--perehod);
}
.rd-knopka:hover { border-color: var(--akcent); color: var(--akcent-temno); background: var(--akcent-svet); }
.rd-knopka:active { transform: translateY(1px); box-shadow: none; }
.rd-knopka--tihaja { background: transparent; box-shadow: none; border-color: var(--granica); color: var(--tekst-tihij); font-size: .9rem; min-height: 40px; padding: 9px 13px; }
.rd-knopka--tihaja:hover { color: var(--akcent-temno); }
.rd-knopka[aria-disabled="true"], .rd-knopka:disabled {
    opacity: .45; cursor: not-allowed; box-shadow: none; background: var(--list-tenj);
}
.rd-knopka[aria-disabled="true"]:hover { border-color: var(--granica-tvjordaja); color: var(--tekst); background: var(--list-tenj); }

/* Группы звеньев в два столбца на широком экране: иначе левая колонка вытягивается
   вдвое выше правой и прибор выглядит несбалансированным.
   🔴 БЛОК СТОИТ ЗДЕСЬ, А НЕ ВЫШЕ С ОСТАЛЬНОЙ РАСКЛАДКОЙ ПРИБОРА, и это не вкус.
   Сначала он лежал в общем `@media` до определения `.rd-knopki` — специфичность у
   правил одинаковая, и базовое `display: flex`, объявленное НИЖЕ, молча побеждало.
   В исходнике всё выглядело верно; увидеть это можно было только замером
   `getComputedStyle` в браузере, который и показал `display: flex` вместо `grid`. */
@media (min-width: 900px) {
    .rd-knopki { display: grid; grid-template-columns: 1fr 1fr; }
    .rd-knopki > * { width: 100%; }
}

/* Ответ */
.rd-otvet { background: var(--list-tenj); }
.rd-otvet__termin {
    font-family: var(--shrift-zagolovok);
    font-size: clamp(1.8rem, 1.3rem + 2.4vw, 2.9rem);
    line-height: 1.1; font-weight: 700; color: var(--akcent);
    margin: 0 0 4px; letter-spacing: -.015em;
}
.rd-otvet__termin--net { color: var(--tekst-tihij); font-size: clamp(1.25rem, 1.05rem + 1vw, 1.6rem); }
.rd-otvet__sinonim { font-size: .95rem; color: var(--tekst-tihij); margin: 0 0 12px; }
.rd-otvet__opisanie { font-size: .95rem; color: var(--tekst-tihij); margin: 0 0 14px; }

.rd-metki { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.rd-metka {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px; border-radius: 999px;
    font-size: .82rem; font-weight: 600; letter-spacing: .01em;
    border: 1px solid transparent;
}
.rd-metka--krov     { background: var(--krov-fon);     color: var(--krov);     border-color: var(--akcent-kraj); }
.rd-metka--svojstvo { background: var(--svojstvo-fon); color: var(--svojstvo); border-color: #E4D5B8; }
.rd-metka--duh      { background: var(--duh-fon);      color: var(--duh);      border-color: #D3DCCD; }

.rd-fakty { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin: 0 0 4px; }
.rd-fakt {
    background: var(--list); border: 1px solid var(--granica);
    border-radius: var(--radius); padding: 13px 15px;
    box-shadow: var(--tenj-malaja);
}
.rd-fakt__imja { font-size: .73rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tekst-slabyj); font-weight: 600; margin: 0 0 4px; }
.rd-fakt__znachenie { font-family: var(--shrift-zagolovok); font-size: 1.28rem; font-weight: 700; line-height: 1.2; margin: 0; }
.rd-fakt__znachenie small { font-family: var(--shrift-tekst); font-size: .82rem; font-weight: 400; color: var(--tekst-tihij); display: block; margin-top: 3px; line-height: 1.45; }
.rd-fakt--glavnyj { border-color: var(--akcent-kraj); background: var(--akcent-svet); }
.rd-fakt--glavnyj .rd-fakt__znachenie { color: var(--akcent); }

.rd-pometa {
    margin-top: 14px; padding: 12px 14px;
    background: var(--list); border: 1px solid var(--granica);
    border-left: 3px solid var(--akcent);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: .92rem; color: var(--tekst-tihij);
}
.rd-pometa strong { color: var(--tekst); }

.rd-podelitsja { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; }
.rd-podelitsja__polje {
    flex: 1 1 220px; min-width: 0;
    font: 400 .85rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
    padding: 8px 11px; border: 1px solid var(--granica-tvjordaja); border-radius: 8px;
    background: var(--list); color: var(--tekst-tihij);
}

/* ── Общие карточки и списки ─────────────────────────────────────────────── */
.kartochka {
    background: var(--list); border: 1px solid var(--granica);
    border-radius: var(--radius-krup); padding: 20px 22px;
    box-shadow: var(--tenj-pribor);
}
.setka { display: grid; gap: 14px; }
.setka--2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.setka--3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.plitka {
    display: block; text-decoration: none; color: inherit;
    background: var(--list); border: 1px solid var(--granica);
    border-radius: var(--radius); padding: 15px 17px;
    box-shadow: var(--tenj-malaja);
    transition: border-color var(--perehod), box-shadow var(--perehod), transform var(--perehod);
}
a.plitka:hover { border-color: var(--akcent-kraj); box-shadow: var(--tenj-podnjat); transform: translateY(-2px); }
a.plitka:active { transform: none; box-shadow: var(--tenj-malaja); }
/* Ветвь у термина — тот же мотив, что и на первом экране: узел и линия к нему.
   Отступ слева задан вместе с ветвью, поэтому текст не наезжает на узел. */
.plitka__slovo {
    font-family: var(--shrift-zagolovok); font-size: 1.16rem; font-weight: 700;
    margin: 0 0 3px; color: var(--akcent);
    position: relative; padding-left: 17px;
}
.plitka__slovo::before {
    content: ""; position: absolute; left: 0; top: .66em;
    width: 12px; height: 1px; background: var(--vetv);
}
.plitka__slovo::after {
    content: ""; position: absolute; left: 0; top: calc(.66em - 2.5px);
    width: 6px; height: 6px; border-radius: 50%; background: var(--vetv);
    transition: background var(--perehod);
}
a.plitka:hover .plitka__slovo::after { background: var(--akcent); }
.plitka__kto { font-size: .92rem; color: var(--tekst-tihij); margin: 0; }
.plitka__chislo { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tekst-slabyj); margin: 7px 0 0; }

/* Таблицы: прокрутка внутри себя, страницу не рвут */
.shema-obvod { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--granica); border-radius: var(--radius); background: var(--list); box-shadow: var(--tenj-malaja); }
table { border-collapse: collapse; width: 100%; min-width: 480px; font-size: .94rem; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--granica); vertical-align: top; }
thead th { background: var(--list-tenj); font-size: .76rem; letter-spacing: .07em; text-transform: uppercase; color: var(--tekst-tihij); font-weight: 700; white-space: nowrap; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: #FCF9F6; }
td strong { color: var(--akcent); }
.tablica__chislo { font-family: var(--shrift-zagolovok); font-weight: 700; font-size: 1.05rem; }

/* Вопросы и ответы — раскрываются, а не лежат простынёй */
.tolkovanie {
    background: var(--list); border: 1px solid var(--granica);
    border-radius: var(--radius); margin-bottom: 8px; box-shadow: var(--tenj-malaja);
    transition: border-color var(--perehod);
}
.tolkovanie[open] { border-color: var(--akcent-kraj); }
.tolkovanie summary {
    cursor: pointer; padding: 13px 44px 13px 16px; position: relative;
    font-weight: 600; font-size: .98rem; list-style: none;
    transition: color var(--perehod);
}
.tolkovanie summary::-webkit-details-marker { display: none; }
.tolkovanie summary:hover { color: var(--akcent); }
.tolkovanie summary::after {
    content: ""; position: absolute; right: 17px; top: 50%;
    width: 9px; height: 9px; margin-top: -6px;
    border-right: 2px solid var(--akcent); border-bottom: 2px solid var(--akcent);
    transform: rotate(45deg); transition: transform var(--perehod);
}
.tolkovanie[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.tolkovanie__otvet { padding: 0 16px 15px; font-size: .95rem; color: var(--tekst-tihij); }
.tolkovanie__otvet p:not(:last-child) { margin-bottom: .7em; }

/* Вводный текст и мелкие детали */
.vvedenie { font-size: 1.08rem; color: var(--tekst-tihij); max-width: 62ch; }
.zametka { font-size: .88rem; color: var(--tekst-slabyj); }
.istochnik { font-size: .84rem; color: var(--tekst-slabyj); border-top: 1px solid var(--granica); padding-top: 12px; margin-top: 18px; }

/* Предупреждение о смысле слова — для терминов с шумным кластером */
.utochnenie {
    background: var(--akcent-svet); border: 1px solid var(--akcent-kraj);
    border-radius: var(--radius); padding: 14px 16px; margin: 0 0 20px;
    font-size: .96rem;
}
.utochnenie strong { color: var(--akcent-temno); }

/* ── Подвал ──────────────────────────────────────────────────────────────── */
/* 🔴 ПОДЧЁРКИВАНИЯ В ПОДВАЛЕ — РЕШЕНИЕ, А НЕ УМОЛЧАНИЕ (10.08.2026).
 * Владелец: «зачем эти подчёркивания? футер это очень важный элемент». Разбор по флоту
 * показал причину у соседей: у подвала не было НИ ОДНОГО правила про text-decoration,
 * и ссылки оставались подчёркнутыми по умолчанию браузера. Здесь `none` стоял, но
 * подчёркивание возвращалось при наведении — то есть решение было половинчатым.
 * Теперь так:
 *   • пункты СПИСКОВ разделов — навигация, не текст: подчёркивания нет ни в покое, ни
 *     при наведении; отклик даёт узел ветви (мотив сайта) и цвет;
 *   • ссылки в сплошном тексте (почта, нижняя строка) подчёркнуты ВСЕГДА: там линия
 *     единственное, что отличает ссылку от слова рядом. ⛔ Глушить её нельзя. */
.korni { background: #2A211E; color: #D9CEC7; margin-top: 56px; padding: 40px 0 26px; }
.korni a { color: #E8DAD3; text-decoration: none; transition: color var(--perehod); }
.korni a:hover { color: #fff; }
/* ⚠️ Селектор с тегом: `.korni a` — это (0,1,1), и одного класса ему не перебить.
   На первом снимке подчёркивание у почты просто не появилось, хотя правило стояло. */
.korni a.korni__pochta, .korni__niz a {
    text-decoration: underline;
    text-decoration-color: rgba(232, 218, 211, .38);
    text-underline-offset: .2em;
    transition: color var(--perehod), text-decoration-color var(--perehod);
}
.korni a.korni__pochta:hover, .korni__niz a:hover { text-decoration-color: #fff; }
.korni__verh { display: grid; gap: 30px; grid-template-columns: minmax(240px, 1.3fr) 2fr; }
.korni__brend svg { width: 34px; height: 34px; display: block; margin-bottom: 10px; }
.korni__imja { font-family: var(--shrift-zagolovok); font-size: 1.25rem; font-weight: 700; color: #fff; margin: 0 0 8px; }
.korni__opisanie { font-size: .92rem; color: #B5A79F; max-width: 42ch; margin: 0 0 14px; }
.korni__gruppy { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }
/* Иерархия: заголовок столбца мельче пунктов и приглушён — он подпись к группе, а не
   такая же ссылка. До правки они весили одинаково, и столбец читался лентой. */
.korni__zagolovok { font-family: var(--shrift-tekst); font-size: .71rem; letter-spacing: .11em; text-transform: uppercase; color: #96867E; font-weight: 700; margin: 0 0 11px; padding-bottom: 8px; border-bottom: 1px solid #3B2E2A; }
.korni__spisok { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: .95rem; }
/* Тот же мотив, что на первом экране и в плитках: ветвь с узлом. В подвале он ещё и
   работает — отбивает пункты друг от друга без подчёркивания. */
.korni__spisok li { position: relative; padding-left: 15px; }
.korni__spisok li::before {
    content: ""; position: absolute; left: 0; top: .72em;
    width: 8px; height: 1px; background: #5C4842;
    transition: background var(--perehod), width var(--perehod);
}
.korni__spisok li:hover::before { background: var(--akcent-kraj); width: 11px; }
.korni__niz { border-top: 1px solid #40332E; margin-top: 30px; padding-top: 18px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: .85rem; color: #8F817A; }
.korni__pochta { color: #E8DAD3; }

@media (max-width: 760px) {
    .korni__verh { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 520px) {
    /* На 390 два столбца разной длины ложились «лесенкой»: третья группа уезжала под
       первую, и порядок разделов переставал читаться. Один столбец — один порядок. */
    .korni__gruppy { grid-template-columns: 1fr; gap: 20px; }
}

/* ── Плашка о cookies ────────────────────────────────────────────────────── */
/* 🔴 Замер сети: по флоту плашка занимала 14–22 % экрана 390×844 при норме 10 %.
   Лечится двумя вещами — короткий текст и кнопка В СТРОКЕ. Тексту обязателен
   min-width: 0, иначе flex не даёт ему сжаться и кнопка уезжает на свою строку. */
.soglasie-cookies {
    position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60;
    display: flex; align-items: center; gap: 12px;
    max-width: 720px; margin: 0 auto;
    padding: 10px 14px;
    background: var(--list); border: 1px solid var(--granica-tvjordaja);
    border-radius: var(--radius); box-shadow: var(--tenj-podnjat);
    font-size: .86rem; line-height: 1.4;
}
.soglasie-cookies__tekst { min-width: 0; flex: 1 1 auto; color: var(--tekst-tihij); }
.soglasie-cookies__knopka {
    flex-shrink: 0; min-height: 40px; padding: 10px 15px;
    background: var(--akcent); color: #fff; border: none; border-radius: 8px;
    font: 600 .88rem var(--shrift-tekst); cursor: pointer;
    transition: background var(--perehod);
}
.soglasie-cookies__knopka:hover { background: var(--akcent-temno); }
.soglasie-cookies[hidden] { display: none !important; }

/* ── Форма обратной связи ────────────────────────────────────────────────── */
.forma { display: grid; gap: 14px; }
.forma__polje { display: grid; gap: 5px; }
.forma__metka { font-size: .88rem; font-weight: 600; }
.forma input[type="text"], .forma input[type="email"], .forma textarea {
    width: 100%; padding: 10px 13px; font: 400 .97rem var(--shrift-tekst);
    color: var(--tekst); background: var(--list);
    border: 1px solid var(--granica-tvjordaja); border-radius: 9px;
    transition: border-color var(--perehod), box-shadow var(--perehod);
}
.forma input:focus, .forma textarea:focus {
    outline: none; border-color: var(--akcent);
    box-shadow: 0 0 0 3px var(--akcent-svet);
}
.forma textarea { min-height: 130px; resize: vertical; }
.forma__lovushka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.forma__otpravit {
    justify-self: start; min-height: 46px; padding: 12px 26px;
    background: var(--akcent); color: #fff; border: none; border-radius: 9px;
    font: 700 1rem var(--shrift-tekst); cursor: pointer;
    box-shadow: 0 2px 10px rgba(142, 36, 51, .22);
    transition: background var(--perehod), transform var(--perehod), box-shadow var(--perehod);
}
.forma__otpravit:hover { background: var(--akcent-temno); box-shadow: 0 4px 16px rgba(142, 36, 51, .28); }
.forma__otpravit:active { transform: translateY(1px); box-shadow: none; }
.forma__otpravit:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; background: var(--tekst-slabyj); }
.forma__itog { font-size: .93rem; padding: 11px 14px; border-radius: 9px; }
.forma__itog--horosho { background: var(--duh-fon); color: var(--duh); border: 1px solid #D3DCCD; }
.forma__itog--ploho   { background: var(--akcent-svet); color: var(--akcent-temno); border: 1px solid var(--akcent-kraj); }

/* ── Мелочи ──────────────────────────────────────────────────────────────── */
.skrytno { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.stopka > * + * { margin-top: 18px; }
.stopka-krup > * + * { margin-top: 34px; }

@media (max-width: 560px) {
    /* ⚠️ Верх на телефоне мерится не «на глаз», а точкой, где начинается прибор.
       До этой правки заголовок в три строки и вводный абзац в три отодвигали
       цепочку на 620 px из 844 — прибор почти за сгибом. */
    .strochka--pervaja { padding-top: 18px; }
    .vvedenie { font-size: 1rem; }
    h1 { margin-bottom: .35em; }
    .rd-pribor__chast { padding: 16px 15px; }
    .kartochka { padding: 17px 16px; }
    .okruzhenie { padding: 0 15px; }
    .strochka { padding: 30px 0; }
    /* Ряд кнопок на 320 px — третья по частоте причина горизонтального скролла. */
    .rd-knopka { flex: 1 1 auto; min-width: 0; }
}