/* Стенд конвертера реестров. Метафора — сверка бумажного реестра: бумага, чернила, линейка,
   маркер (решения модели — проверить), красный карандаш (ошибки), печать (действия). */
@font-face { font-family: "Golos Text"; src: url(GolosText-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Golos Text"; src: url(GolosText-Medium.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Golos Text"; src: url(GolosText-SemiBold.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "PT Mono"; src: url(PTMono-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --bumaga: #F1F3F2;
  --list: #FFFFFF;
  --chernila: #17202A;
  --grafit: #566170;
  --lineyka: #D3D9DD;
  --marker: #FFE45C;
  --karandash: #B3261E;
  --karandash-fon: #FBEDEC;
  --pechat: #3B2E9A;
  --pechat-fon: #ECEAF8;
  --mono: "PT Mono", ui-monospace, Menlo, monospace;
  --tekst: "Golos Text", system-ui, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }  /* иначе display у кнопок перебивает hidden («Показать ещё» не исчезала) */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bumaga); color: var(--chernila); font: 400 16px/1.5 var(--tekst); }
h1, h2, h3, p, ul, ol { margin: 0; }
button, input, select { font: inherit; color: inherit; }
a { color: var(--pechat); }
:focus-visible { outline: 3px solid var(--pechat); outline-offset: 2px; }
[tabindex="-1"]:focus { outline: none; }  /* программный фокус на заголовке — без рамки */
.skryto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.app { min-height: 100vh; display: flex; flex-direction: column; position: relative; }

/* ——— шапка и подвал ——— */
.shapka { display: flex; align-items: center; gap: 24px; padding: 14px 24px; background: var(--list); border-bottom: 1px solid var(--lineyka); }
.shapka__imya { font-weight: 600; text-decoration: none; color: var(--chernila); margin-right: auto; }
.shapka__imya span { font-family: var(--mono); font-weight: 400; color: var(--grafit); margin-left: 8px; }
.shapka a, .shapka button { font-size: 15px; }
.shapka__kto { color: var(--grafit); font-size: 15px; }
.podval { margin-top: auto; padding: 24px; color: var(--grafit); font-size: 14px; border-top: 1px solid var(--lineyka); }
.podval p { max-width: 62ch; }

/* ——— кнопки ——— */
.knopka { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 20px;
  border: 1px solid var(--pechat); border-radius: 6px; background: var(--pechat); color: #FFFFFF; font-weight: 500;
  text-decoration: none; cursor: pointer; }
.knopka:hover { background: #2E2380; }
.knopka--tihaya { background: var(--list); color: var(--pechat); }
.knopka--tihaya:hover { background: var(--pechat-fon); }
.knopka[aria-disabled="true"] { border-style: dashed; }
.knopka--opasno { border-color: var(--karandash); background: var(--list); color: var(--karandash); }
.knopka--opasno:hover { background: var(--karandash-fon); }
.ssylka--opasno { color: var(--karandash); justify-self: start; }
.ssylka { background: none; border: 0; padding: 0; color: var(--pechat); text-decoration: underline; cursor: pointer; min-height: 24px; }

/* ——— вход ——— */
.vhod { flex: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: center;
  max-width: 1080px; width: 100%; margin: 0 auto; padding: 48px 24px; }
.nadpis { font-family: var(--mono); color: var(--grafit); font-size: 14px; letter-spacing: .04em; }
.vhod h1 { font-size: 48px; line-height: 1.1; font-weight: 600; margin: 12px 0 20px; letter-spacing: -.01em; }
.vhod__o > p { color: var(--grafit); max-width: 46ch; font-size: 18px; }
.put { list-style: none; padding: 0; margin-top: 28px; display: grid; gap: 10px; counter-reset: put; }
.put li { counter-increment: put; display: flex; align-items: baseline; gap: 14px; font-weight: 500; }
.put li::before { content: counter(put); font-family: var(--mono); color: var(--pechat); font-size: 15px; inline-size: 24px; flex: none;
  border-bottom: 2px solid var(--pechat); text-align: center; }
.forma { background: var(--list); border: 1px solid var(--lineyka); border-radius: 10px; padding: 32px; display: grid; gap: 18px; }
.forma h2 { font-size: 24px; font-weight: 600; }
.pole { display: grid; gap: 6px; align-content: start; }
.pole > span { font-size: 15px; font-weight: 500; }
.pole small { color: var(--grafit); font-size: 14px; }
.vvod { inline-size: 100%; min-inline-size: 0; min-height: 44px; padding: 9px 12px; border: 1px solid #A9B3BB; border-radius: 6px; background: var(--list); }
.vvod:focus-visible { outline-offset: 0; }
.vvod--mono { font-family: var(--mono); }
.vvod[aria-invalid="true"] { border-color: var(--karandash); background: var(--karandash-fon); }
.oshibka { color: var(--karandash); font-size: 15px; }
.oshibka:empty { display: none; }
.ploshka-oshibki { max-width: 60ch; border: 1px solid var(--karandash); background: var(--karandash-fon); color: var(--karandash); border-radius: 8px; padding: 14px 18px; }

/* ——— страница ——— */
.stranica { width: 100%; max-width: 1180px; margin: 0 auto; padding: 32px 24px 48px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-content: start; }  /* колонка не растёт под ширину таблицы в свёрнутом блоке */
.stranica > h1 { font-size: 40px; line-height: 1.15; font-weight: 600; letter-spacing: -.01em; }
.nazad { font-size: 15px; justify-self: start; }
.zag-reestra { display: grid; gap: 10px; }
.zag-reestra h1 { font-size: 40px; line-height: 1.15; font-weight: 600; letter-spacing: -.01em; overflow-wrap: anywhere; }
.zag-reestra__meta { color: var(--grafit); font-family: var(--mono); font-size: 15px; display: flex; flex-wrap: wrap; gap: 4px 20px; }
.razdel { display: grid; gap: 14px; }
.razdel > h2 { scroll-margin-top: 16px; font-size: 22px; font-weight: 600; display: flex; align-items: baseline; gap: 12px; }
.razdel > h2 .schet { font-family: var(--mono); font-weight: 400; color: var(--grafit); font-size: 18px; }
.razdel > p { color: var(--grafit); max-width: 62ch; }

/* шаги обработки: Шаг 1 → 2 → 3, текущий — чернилами печати */
.shagi { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.shagi li { display: grid; gap: 2px; padding: 10px 2px 0; border-top: 3px solid var(--lineyka); color: var(--grafit); font-weight: 500; }
.shagi__nomer { font-family: var(--mono); font-size: 13px; font-weight: 400; letter-spacing: .04em; }
.shagi li.shagi__byl { border-top-color: #A9A1DF; }
.shagi li.shagi__tek { border-top-color: var(--pechat); color: var(--chernila); }
.shagi__tek .shagi__nomer { color: var(--pechat); }
.vvodnyj { font-size: 18px; max-width: 60ch; }

/* «Требуется ваше решение» — отдельной рамкой: здесь работа человека */
.razdel--reshenie { padding: 20px; border: 2px solid var(--pechat); border-radius: 12px; background: var(--pechat-fon); }
.razdel--reshenie > h2 { color: var(--pechat); }
.razdel--reshenie > p { color: var(--chernila); }

/* ——— загрузка и список ——— */
.zagruzka { display: grid; justify-items: center; gap: 8px; padding: 48px 24px; border: 2px dashed #A9B3BB; border-radius: 12px;
  background: var(--list); text-align: center; cursor: pointer; }
.zagruzka:hover, .zagruzka--nad { border-color: var(--pechat); background: var(--pechat-fon); }
.zagruzka:focus-within { outline: 3px solid var(--pechat); outline-offset: 2px; }
.zagruzka__glav { font-size: 22px; font-weight: 600; }
.zagruzka__glav u { color: var(--pechat); text-underline-offset: 4px; }
.zagruzka__pod { color: var(--grafit); font-family: var(--mono); font-size: 15px; }
.pamyatka { color: var(--grafit); font-size: 15px; max-width: 64ch; }
.spisok { list-style: none; padding: 0; background: var(--list); border: 1px solid var(--lineyka); border-radius: 10px; }
.spisok li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 20px; align-items: center; padding: 16px 20px;
  border-top: 1px solid var(--lineyka); }
.spisok li:first-child { border-top: 0; }
.spisok__imya { font-weight: 500; overflow-wrap: anywhere; text-decoration: none; color: var(--chernila); }
.spisok__imya:hover { color: var(--pechat); text-decoration: underline; }
.spisok__kogda { display: block; color: var(--grafit); font-family: var(--mono); font-size: 14px; font-weight: 400; }
.pusto { color: var(--grafit); padding: 8px 0; }

/* статус — пометка на полях реестра */
.status { font-family: var(--mono); font-size: 14px; padding: 3px 10px; border-radius: 4px; background: var(--bumaga); border: 1px solid var(--lineyka); white-space: nowrap; }
.status--proverka { background: var(--marker); border-color: #E6C629; }
.status--gotovo { background: var(--pechat-fon); border-color: #C9C3EE; color: var(--pechat); }
.status--oshibka { background: var(--karandash-fon); border-color: #EFC3BF; color: var(--karandash); }

/* ——— ожидание ——— */
.ozhidanie { background: var(--list); border: 1px solid var(--lineyka); border-radius: 10px; padding: 40px 32px; display: grid; gap: 14px; min-height: 280px; align-content: center; }
.ozhidanie h2 { font-size: 26px; font-weight: 600; }
.ozhidanie p { color: var(--grafit); max-width: 56ch; }
.hod { display: grid; gap: 10px; inline-size: min(480px, 100%); }
.hod__zag { font-size: 22px; font-weight: 600; }
.hod__chislo { font-family: var(--mono); font-size: 56px; line-height: 1; }
.hod__polosa { display: block; height: 10px; border-radius: 5px; background: var(--bumaga); border: 1px solid var(--lineyka); overflow: hidden; }
.hod__zapolnenie { display: block; height: 100%; background: var(--pechat); transform: scaleX(0); transform-origin: left; transition: transform .6s ease-out; }
.zagruzka--idet { border-style: solid; border-color: var(--pechat); background: var(--pechat-fon); pointer-events: none; }  /* второй файл поверх идущей загрузки не принимаем */
.zagruzka--idet .hod { justify-items: center; text-align: center; }
.zagruzka--idet .hod__polosa { inline-size: 100%; background: var(--list); }

/* ——— данные на весь файл ——— */
.cessiya { background: var(--list); border: 1px solid var(--lineyka); border-radius: 10px; padding: 24px; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 24px; }
/* подпись, поле и подсказка каждого поля — на общих строках сетки: поля в ряду стоят на одной линии при любой длине подписи */
.pole--cessiya { grid-row: span 3; grid-template-rows: subgrid; row-gap: 6px; align-content: stretch; }
.pole--cessiya > span:first-child { align-self: end; }
.pole__pod { display: grid; gap: 2px; align-content: start; }
.pole__pod small { color: var(--grafit); font-size: 14px; }

/* ——— строки сверки ——— */
.stroki { background: var(--list); border: 1px solid var(--lineyka); border-radius: 10px; }
.stroka { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 4px 24px; padding: 18px 20px; border-top: 1px solid var(--lineyka); }
.stroka:first-child { border-top: 0; }
.stroka__bukva { font-family: var(--mono); font-size: 28px; line-height: 1.1; color: var(--grafit); }
.stroka__podpis { display: block; margin-bottom: 4px; font-family: var(--tekst); font-size: 12px; line-height: 1.25; }
.stroka--vspyshka { background: #FFF8D6; outline: 2px solid var(--pechat); outline-offset: -2px; }  /* строка, к которой перешли по кнопке «показать» */
/* подпись — значение на общей сетке: название в реестре, примеры, сопоставление, сомнение, поле системы */
.stroka__dl { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 8px 16px; margin: 0; align-items: baseline; }
.stroka__dl dt { color: var(--grafit); font-size: 14px; }
.stroka__dl dd { margin: 0; min-inline-size: 0; overflow-wrap: anywhere; }
.stroka__dl dd:not(.stroka__vybor) { max-width: 62ch; }
.stroka__zag { font-weight: 500; }
.primery { font-family: var(--mono); font-size: 14px; color: var(--grafit); }
.stroka__predl span { font-weight: 500; }
.stroka__predl--net span { font-weight: 400; color: var(--grafit); }
.stroka--marker .stroka__predl span {
  /* сигнатура: предложение модели выделено маркером — его и проверяем */
  background: linear-gradient(100deg, #FFE45C00 0, #FFE45C 6px, #FFE45C calc(100% - 6px), #FFE45C00 100%);
  border-radius: 3px 10px 4px 12px; padding: 1px 6px; margin: 0 -6px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.somnenie { color: var(--karandash); }
dd.somnenie { display: grid; gap: 2px; font-size: 15px; max-width: 62ch; }
.stroka__vybor { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.stroka__vybor > select { flex: 1 1 280px; min-inline-size: 0; max-inline-size: 460px; }
.stroka__kak { display: flex; align-items: center; gap: 8px; flex: 0 1 260px; min-inline-size: 0; color: var(--grafit); font-size: 14px; }
.stroka__kak select { flex: 1; min-inline-size: 0; }

.svodka { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 15px; }
.svodka .ssylka, .itogo .ssylka { text-align: left; }  /* длинная ссылка в две строки — от левого края, а не по центру кнопки */
.svernuto { background: var(--list); border: 1px solid var(--lineyka); border-radius: 10px; }
.svernuto > summary { cursor: pointer; padding: 16px 20px; font-size: 18px; font-weight: 600; list-style-position: inside; }
.svernuto > summary .schet { font-family: var(--mono); font-weight: 400; color: var(--grafit); margin-left: 8px; }
.svernuto > summary small { display: block; font-size: 15px; font-weight: 400; color: var(--grafit); margin-top: 2px; }
.svernuto[open] > summary { border-bottom: 1px solid var(--lineyka); }
.svernuto .stroki { border: 0; border-radius: 0 0 10px 10px; }
.svernuto > :not(summary):not(.stroki) { margin: 14px 18px; }
.svernuto > p { max-width: 62ch; color: var(--grafit); }

.itogo { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  padding: 16px 20px; background: var(--list); border: 1px solid var(--lineyka); border-radius: 10px 10px 0 0; box-shadow: 0 -6px 16px #17202A14; }
.itogo p { color: var(--grafit); max-width: 56ch; }
.itogo b { color: var(--chernila); }

/* ——— результат ——— */
.itog { background: var(--list); border: 1px solid var(--lineyka); border-radius: 10px; padding: 28px; display: grid; gap: 20px; }
.itog__zag { font-size: 26px; font-weight: 600; }
.itog__tekst { color: var(--grafit); max-width: 62ch; }
.itog__ssylki { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 15px; }
.itog__chislo { font-size: 20px; color: var(--grafit); max-width: 56ch; }
.itog__chislo b { display: block; font-family: var(--mono); font-weight: 400; font-size: 64px; line-height: 1; color: var(--chernila); margin-bottom: 6px; }
.itog__knopki { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.fakty { list-style: none; padding: 0; display: grid; gap: 4px; color: var(--grafit); max-width: 64ch; }
.zamechaniya { list-style: none; padding: 0; background: var(--list); border: 1px solid var(--lineyka); border-radius: 10px; }
.zamechaniya li > span:first-child { max-width: 62ch; color: var(--karandash); }
.zamechaniya li > span:first-child::before { content: "✎ "; }
/* история разбора: первая строка пункта — дата и кто, не замечание */
.zamechaniya--nejtr li > span:first-child { color: var(--grafit); }
.zamechaniya--nejtr li > span:first-child::before { content: none; }
.zamechaniya li { padding: 14px 20px; border-top: 1px solid var(--lineyka); display: grid; gap: 4px; }
.zamechaniya li:first-child { border-top: 0; }
.zamechaniya .stroki-excel { font-family: var(--mono); font-size: 14px; color: var(--grafit); overflow-wrap: anywhere; }
/* поле шаблона с замечанием: заголовок, строки Excel, таблица ввода (как у кодов подразделений) */
.blok-ispr { display: grid; gap: 8px; justify-items: start; }
.blok-ispr + .blok-ispr { margin-top: 12px; }
.blok-ispr > h3 { font-size: 18px; font-weight: 600; color: var(--karandash); }
.blok-ispr > h3::before { content: "✎ "; }
.blok-ispr > p { max-width: 62ch; }
.blok-ispr > .stroki-excel { font-family: var(--mono); font-size: 14px; color: var(--grafit); overflow-wrap: anywhere; }
.blok-ispr > .tablica-obertka { justify-self: stretch; }
/* массовая подстановка 000-000 */
.nuli { display: grid; gap: 8px; justify-items: start; padding: 16px 18px; background: var(--list); border: 1px solid var(--lineyka); border-radius: 10px; }
.nuli > p { max-width: 62ch; color: var(--grafit); font-size: 15px; }
.nuli > p:empty { display: none; }

.tablica-obertka { overflow-x: auto; padding: 4px 10px; background: var(--list); border: 1px solid var(--lineyka); border-radius: 10px;
  background-image: linear-gradient(to left, #E6EAED, #FFFFFF00 14px); background-repeat: no-repeat; background-position: right; background-size: 14px 100%;
  background-attachment: local, scroll; }
.tablica { border-collapse: collapse; width: 100%; font-size: 15px; }
.tablica th { text-align: left; font-weight: 500; color: var(--grafit); font-size: 14px; padding: 12px 16px; border-bottom: 1px solid var(--lineyka); white-space: nowrap; }
.tablica td { padding: 10px 16px; border-top: 1px solid var(--lineyka); vertical-align: top; }
.tablica .mono { font-family: var(--mono); }
.tablica .vvod { min-width: 130px; }
.tihij { color: var(--grafit); font-size: 15px; }
.zag-rub { font-size: 28px; font-weight: 600; margin-top: 12px; }
.tr--izm td { background: var(--pechat-fon); }  /* столбец, который человек переложил */

/* ——— сводка по кейсу: сумма — то, что сотрудник называет по телефону; рядом то, что меняет разговор (признаки, просрочка);
   история — написала модель, значит, маркер ——— */
.zagruzka--nizkaya { padding: 28px 24px; }
.poisk { max-width: 280px; }
.spisok--kejsy li { grid-template-columns: minmax(0, 1fr) auto; }
.spisok__summa { font-family: var(--mono); font-size: 15px; }
.zag-kejsa h1 { font-size: 32px; }
.zag-kejsa .stadiya { font-family: var(--tekst); font-weight: 600; color: var(--chernila); }
.zag-kejsa .zag-reestra__meta { gap: 4px 10px; }
.zag-kejsa .zag-reestra__meta span + span::before { content: "· "; }
.kartochka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.k-oplate, .istoriya { background: var(--list); border: 1px solid var(--lineyka); border-radius: 10px; padding: 24px; display: grid; gap: 12px; }
.k-oplate { container-type: inline-size; }
.k-oplate > h2, .istoriya > h2 { font-size: 15px; font-weight: 500; color: var(--grafit); }
/* 14 знаков моноширинного (до 9 999 999,99 ₽) влезают в карточку на любой ширине */
.k-oplate__summa { font-family: var(--mono); font-size: min(56px, 11.5cqi); line-height: 1; letter-spacing: -.02em; overflow-wrap: anywhere; }
.rasklad { margin: 0; display: grid; }
.rasklad > div { display: flex; justify-content: space-between; gap: 16px; padding: 5px 0; border-top: 1px solid var(--lineyka); }
.rasklad dt { color: var(--grafit); font-size: 15px; }
.rasklad dd { margin: 0; font-family: var(--mono); font-size: 15px; white-space: nowrap; }
.rasklad__na { font-family: var(--mono); font-size: 13px; color: var(--grafit); }
.priznaki { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.priznaki li { display: grid; padding: 8px 14px; border: 1px solid #EFC3BF; border-radius: 6px; background: var(--karandash-fon); color: var(--karandash); font-size: 16px; }
.priznaki b { font-weight: 600; }
.priznaki span { font-family: var(--mono); font-size: 14px; }
.prosrocheno { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--lineyka); }
.prosrocheno h3 { font-size: 16px; font-weight: 600; color: var(--karandash); display: flex; gap: 8px; align-items: baseline; }
.prosrocheno h3::before { content: "✎"; }
.prosrocheno .schet { font-family: var(--mono); font-weight: 400; }
.prosrocheno ul { list-style: none; padding: 0; display: grid; gap: 4px; }
.srok { color: var(--karandash); font-weight: 500; }
.istoriya { border-left: 6px solid var(--marker); }
.istoriya--pusto { border-left-color: var(--lineyka); }
.istoriya__tekst { font-size: 18px; line-height: 1.55; max-width: 64ch; }
.istoriya__chto { font-size: 18px; line-height: 1.5; font-weight: 500; max-width: 64ch; padding-top: 12px; border-top: 1px solid var(--lineyka); }
.istoriya__otkuda { font-family: var(--mono); font-size: 14px; color: var(--grafit); }
.istoriya__ustarela { color: var(--chernila); background: var(--marker); justify-self: start; padding: 2px 8px; border-radius: 4px; font-size: 15px; }
.istoriya__zamechaniya { list-style: none; padding: 0; display: grid; gap: 2px; color: var(--karandash); font-size: 15px; }
.istoriya__zamechaniya li::before { content: "✎ "; }
.sostoyanie { margin: 0; background: var(--list); border: 1px solid var(--lineyka); border-radius: 10px; }
.sostoyanie > div { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 4px 20px; padding: 14px 20px; border-top: 1px solid var(--lineyka); }
.sostoyanie > div:first-child { border-top: 0; }
.sostoyanie dt { color: var(--grafit); font-size: 15px; }
.sostoyanie dd { margin: 0; min-inline-size: 0; overflow-wrap: anywhere; max-width: 62ch; }  /* 62ch — ~78 знаков кириллицы */
.sostoyanie dd small { display: block; margin-top: 2px; color: var(--grafit); font-size: 14px; }
.sostoyanie dd b { font-weight: 500; }
.primechanie { color: var(--grafit); font-size: 15px; max-width: 62ch; }

@media (max-width: 860px) {
  .kartochka { grid-template-columns: minmax(0, 1fr); }
  .sostoyanie > div { grid-template-columns: 170px minmax(0, 1fr); }
  .vhod { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 32px; }
  .vhod h1 { font-size: 40px; }
  .cessiya { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stroka { grid-template-columns: 52px minmax(0, 1fr); }
  .stroka__bukva { font-size: 22px; }
  .stroka__dl { grid-template-columns: 150px minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .shapka { flex-wrap: wrap; gap: 8px 16px; padding: 12px 16px; }
  .shapka__imya { flex-basis: 100%; }
  .stranica { padding: 24px 16px 40px; }
  .cessiya { grid-template-columns: minmax(0, 1fr); padding: 18px; }
  .stranica > h1, .zag-reestra h1 { font-size: 30px; }
  .forma { padding: 22px; }
  .spisok li { grid-template-columns: minmax(0, 1fr) auto; }
  .spisok li .knopka--opasno { grid-column: 1 / -1; justify-self: start; }
  .stroka { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .stroka__bukva { font-size: 18px; display: flex; align-items: baseline; gap: 8px; }
  .stroka__podpis { display: inline; margin: 0; }
  .shagi li { font-size: 14px; }
  .razdel--reshenie { padding: 14px; }
  .stroka__dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .stroka__dl dd + dt { margin-top: 8px; }
  .itog__chislo b { font-size: 48px; }
  .itogo { padding: 10px 16px; gap: 6px 12px; }
  .itogo p { font-size: 14px; }
  /* коды подразделений — карточками: поле «Код» не уезжает за край */
  .tablica--kody thead { display: none; }
  .tablica--kody tr { display: grid; gap: 8px; padding: 14px 12px; border-top: 1px solid var(--lineyka); }
  .tablica--kody tbody tr:first-child { border-top: 0; }
  .tablica--kody td { border: 0; padding: 0; }
  .tablica--kody td[data-podpis]::before { content: attr(data-podpis); }
  .tablica--kody .vvod { min-width: 0; }
  .podval { padding: 20px 16px; }
  .k-oplate, .istoriya { padding: 18px; }
  .zag-kejsa h1 { font-size: 30px; }
  .sostoyanie > div { grid-template-columns: minmax(0, 1fr); padding: 12px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .hod__zapolnenie { transition: none; }
}