/* Один файл, лежит в проекте. Ни одного запроса на чужой домен:
   шрифты — своими файлами из assets/fonts, иконок-картинок нет, скриптов нет. */

/* ---------- шрифты ----------
   Заголовки — Lora, антиква с полноценной кириллицей; текст — Golos Text,
   русский гротеск. Оба под лицензией OFL, тексты лицензий рядом с файлами.
   Кириллица и латиница — отдельными файлами по unicode-range: браузер берёт
   латиницу только там, где она есть (коды МКБ, адрес сайта). Веса только те,
   что используются: у Lora 400, 600 и 700, у Golos 400–700. Курсива нет: на сайте
   он не используется, а синтетический курсив хуже прямого начертания.
   Имя файла сборка дополняет отпечатком (см. assets.js). */
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/lora-cyrillic-400-normal.d1f41090.woff2) format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/lora-latin-400-normal.ac079950.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/lora-cyrillic-600-normal.b3ba5dad.woff2) format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/lora-latin-600-normal.7bbfe9f3.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/lora-cyrillic-700-normal.f0550b4d.woff2) format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/lora-latin-700-normal.c05fd528.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/golos-text-cyrillic-400-normal.15a5cbad.woff2) format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/golos-text-latin-400-normal.c8246f55.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/golos-text-cyrillic-500-normal.22337b72.woff2) format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/golos-text-latin-500-normal.779e4658.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/golos-text-cyrillic-600-normal.1df9c46f.woff2) format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/golos-text-latin-600-normal.ecd56e7d.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/golos-text-cyrillic-700-normal.42db867d.woff2) format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/golos-text-latin-700-normal.1ac7742b.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- палитра ----------
   Тёплая бумага, тёмно-зелёный «моховой» акцент, карточки с тонкой рамкой
   и небольшим скруглением: справочник должен читаться как книга, а не как
   приложение. Тревога остаётся красноватой и на акцент не завязана:
   у неё свои переменные, иначе блок «сначала позвоните» стал бы того же
   цвета, что и ссылки, и перестал бы читаться как тревога. */
:root {
  --font-head: "Lora", Georgia, "Times New Roman", serif;
  --font-body: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --bg: #f6f3ec;
  --card: #fffdf8;
  --ink: #1f231f;
  --ink-2: #494d47;
  --ink-3: #676b64;
  --line: #e2ddd1;
  --accent: #2e6b53;
  --accent-d: #235744;
  --wash: #e9f1ea;
  --wash-line: #d0e1d5;
  --alarm-ink: #a63d2c;
  --alarm-bg: #fdf3f1;
  --alarm-line: #e0bdb4;
  --shadow: rgba(46, 107, 83, .09);
  --radius: 10px;
  --radius-s: 6px;
  /* Кегль текста. Все размеры шрифта на сайте считаются от него
     (calc(var(--text) * …)), а не от корневого rem: иначе от 1200,
     где текст 19 пикселей, меню, подвал и подписи оставались бы в 16-ти
     и читались как другой, мелкий шрифт. Ширины при этом остаются
     в rem — они от кегля не зависят. */
  --text: 1.0625rem;
  --measure: 38rem;
  --measure-wide: 38rem; /* ширина колонки текста на широком экране */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161815;
    --card: #1e211d;
    --ink: #e9e7e0;
    --ink-2: #bab8b0;
    --ink-3: #939189;
    --line: #34382f;
    --accent: #8fcbaf;
    --accent-d: #a8dcc4;
    --wash: #1c2823;
    --wash-line: #2c4036;
    --alarm-ink: #e0917f;
    --alarm-bg: #2a1f1c;
    --alarm-line: #5c3a32;
    --shadow: rgba(0, 0, 0, .5);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text);
  line-height: 1.62;
  overflow-wrap: break-word;
}

a { color: var(--accent-d); text-underline-offset: 2px; }
a:hover { text-decoration: none; }

/* Заголовки антиквой: у Lora нет полужирного 650, поэтому 600 — иначе
   браузер подобрал бы ближайший вес сам. Межбуквенный интервал не сжимаем:
   антикве это не идёт. */
h1, h2, h3 { font-family: var(--font-head); line-height: 1.2; font-weight: 600; }
h1 { font-size: calc(var(--text) * 1.75); margin: 0 0 .3rem; line-height: 1.18; }
h2 { font-size: calc(var(--text) * 1.2); margin: 2.2rem 0 .6rem; }
h3 { font-size: calc(var(--text) * 1.05); margin: 1.2rem 0 .4rem; }

p { margin: 0 0 .9rem; }

/* ---------- каркас ---------- */
.top {
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; align-items: center;
  justify-content: space-between;
  padding: .9rem 1.25rem; border-bottom: 1px solid var(--line);
  background: var(--card);
}
.brandbox { display: flex; flex-direction: column; gap: .1rem; }
.brand {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: calc(var(--text) * 1.35);
  letter-spacing: .01em;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.1;
}
/* Отдельная ссылка «На главную»: логотип как ссылка очевиден не всем. */
.homelink { font-size: calc(var(--text) * .85); color: var(--accent-d); }
/* Телефон неотложной помощи: на узком экране — своя строка под шапкой,
   от 1200 — справа, где раньше стояло поле поиска. Заметный, но не кричащий:
   красным здесь нельзя, красная плашка на сайте одна и означает другое.

   Подпись и столбик из двух номеров — два элемента в строке; ни один
   не рвётся внутри себя. Если вдвоём не помещаются, столбик уходит под
   подпись целиком, а не по слову. */
.topemergency {
  flex: 1 1 100%; order: 6;
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 .35em;
  margin: 0;
  font-size: calc(var(--text) * .75); font-weight: 600; line-height: 1.35;
  color: var(--ink);
}
.topemergency .l, .topemergency .n { white-space: nowrap; }
@media (min-width: 46rem) {
  /* Между строкой названия и строкой разделов, а не после неё. */
  .topemergency { order: 0; }
}

.topnav { display: flex; gap: .2rem 1rem; font-size: calc(var(--text) * .95); flex-wrap: wrap; align-items: center; }
.topnav a { color: var(--ink-2); text-decoration: none; padding: .3rem 0; }
.topnav a:hover, .topnav a[aria-current] { color: var(--accent-d); text-decoration: underline; }
/* Ссылки хаба в строке шапки не показываются: строка и без них длинная,
   а сами страницы открываются из хаба «О справочнике» и из подвала. */
.topnav-wide .topnav-group { display: none; }

/* Меню на <details>: открывается без JavaScript. */
.topmenu { position: relative; }
.topmenu > summary {
  cursor: pointer;
  min-height: 44px;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  font-size: calc(var(--text) * .95);
  background: var(--card);
}
.topmenu[open] > summary { border-color: var(--accent); }
.topmenu .topnav-narrow {
  position: absolute; right: 0; z-index: 5;
  flex-direction: column; gap: 0; align-items: stretch;
  min-width: 16rem;
  margin-top: .4rem;
  padding: .3rem 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 6px 20px var(--shadow);
}
.topmenu .topnav-narrow a { padding: .6rem 1rem; min-height: 44px; display: flex; align-items: center; }
/* Ссылки хаба в выпадающем меню — отдельной группой, мельче и с отступом. */
.topnav-narrow .topnav-group {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--line);
  margin-top: .3rem; padding-top: .3rem;
}
.topnav-narrow .topnav-sub { font-size: calc(var(--text) * .88); color: var(--ink-3); padding-left: 1.6rem; }

/* Широкий экран показывает разделы строкой, узкий — только меню. */
.topnav-wide { display: none; }
@media (min-width: 46rem) {
  .topnav-wide { display: flex; }
  .topmenu { display: none; }
}

/* Ссылку «к содержанию» прячем обрезкой, а не выносом за левый край:
   элемент шириной 213px на позиции -9999px в части браузеров сам даёт
   горизонтальную прокрутку — ровно то, что мы чиним на телефоне. */
.skip {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip:focus {
  position: static;
  width: auto; height: auto;
  overflow: visible;
  clip-path: none;
  margin-right: 1rem;
}

main {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 1.8rem 1.25rem 3rem;
}
.page-ukazatel main { max-width: 62rem; }

/* ---------- колонки ----------
   Разметка одна на все ширины, отдельной версии для телефона нет.

   до 1200   — одна колонка, как было: 608 точек и 17 пикселей;
   1200–1500 — две: слева навигация, текст 760, правая колонка уходит под текст.
               Три колонки здесь не помещаются: 1280 и 1366 — самые частые
               разрешения ноутбуков, и на них колонка текста сжималась
               до 561 точки, то есть уже, чем на телефоне до всех правок;
   от 1500   — три колонки, крайние тянутся, средняя держит 760. */
.side { display: none; }
.rail { padding: 0 1.25rem; max-width: var(--measure); margin: 0 auto; }

@media (min-width: 1200px) {
  /* Ширину колонки и кегль меняем вместе. Растянуть колонку, не увеличив
     шрифт, значило бы получить около девяноста знаков в строке — читать тяжело.
     При 760 точках и 19 пикселях остаётся примерно восемьдесят. */
  :root { --measure-wide: 47.5rem; --text: 1.1875rem; }

  .layout {
    display: grid;
    grid-template-columns: 17.5rem minmax(0, var(--measure-wide));
    justify-content: center;
    gap: 0 2rem;
    align-items: start;
    padding: 0 1.5rem;
  }

  .side {
    display: block;
    position: sticky;
    top: 1.5rem;
    padding: 2rem 0;
  }
  .side-inner {
    max-width: 280px;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    gap: .6rem;
  }

  main { max-width: none; margin: 0; padding: 2rem 0 4rem; }
  .page-ukazatel main { max-width: none; }

  /* В две колонки правая идёт под текстом и по его ширине. */
  .rail { grid-column: 2; max-width: none; margin: 0; padding: 0 0 4rem; }
  .rail-inner { max-width: none; }

  /* Навигация живёт в левой колонке, в шапке она лишняя. */
  .topnav-wide, .topmenu { display: none; }

  /* Шапка встаёт на ту же сетку, что и страница: название над левым меню,
     поле поиска — по левому краю колонки текста, вровень с заголовком
     статьи, телефон неотложной помощи — по правому краю той же колонки.
     Поле и телефон делят одну ячейку: поле прижато к её левому краю
     и не шире 20rem, телефон — к правому. Подпись и столбик номеров
     занимают до 27rem даже самым широким шрифтом, и вместе с полем
     это меньше 47.5rem — не встречаются. Поэтому поле именно 20rem:
     при 24rem телефону не хватало места, и столбик уходил под подпись,
     а это уже не макет владельца. */
  .top {
    display: grid;
    grid-template-columns: 17.5rem minmax(0, var(--measure-wide));
    justify-content: center;
    gap: 0 2rem;
    align-items: center;
    padding: .9rem 1.5rem;
  }
  .brandbox { grid-column: 1; grid-row: 1; }
  .topsearch { grid-column: 2; grid-row: 1; justify-self: start; width: 100%; max-width: 21rem; }
  /* Прижат к правому краю; если подпись и столбик всё же встали в две
     строки (очень широкий шрифт), обе тоже прижаты к правому краю. */
  .topemergency { grid-column: 2; grid-row: 1; justify-self: end; justify-content: flex-end; }
}

@media (min-width: 1500px) {
  .layout {
    /* Крайние колонки тянутся, средняя ограничена: текст держит свою ширину,
       а пустых полей по краям экрана не остаётся. */
    grid-template-columns: minmax(15rem, 1fr) minmax(0, var(--measure-wide)) minmax(17rem, 1fr);
    justify-content: normal;
  }
  .rail { grid-column: 3; padding: 2rem 0 4rem; }
  .rail-inner { max-width: 320px; }
  /* На трёх колонках шапка повторяет сетку страницы: поле поиска
     у левого края колонки текста, телефон — у правого края страницы.
     Телефон тянется со второй колонки по третью, а не сидит в третьей:
     третья колонка при 1500 всего 314 точек, подписи и столбику в одну
     строку там тесно. */
  .top {
    grid-template-columns: minmax(15rem, 1fr) minmax(0, var(--measure-wide)) minmax(17rem, 1fr);
    justify-content: normal;
  }
  .topemergency { grid-column: 2 / 4; }
  .rail .block, .rail .refine, .rail .notsearched, .rail .insections, .rail .origin {
    margin-top: 0;
    margin-bottom: 2rem;
  }
  .rail .refine { border-top: 0; padding-top: 0; }
}

/* ---------- карточки левого меню ----------
   Четыре карточки: у каждой название и подпись, у первой — фигура,
   у второй — набросок оглавления, у хаба — пять ссылок на служебные
   страницы. Всё встроено в разметку, картинок нет. */
.nav-item {
  display: block;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .8rem .95rem;
  color: var(--ink);
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
}
a.nav-item:hover, a.nav-item:focus-visible, .hub-head:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 10px var(--shadow);
  text-decoration: none;
}
a.nav-item[aria-current] { border-color: var(--accent); }
.nav-item .t { display: block; font-weight: 600; font-size: calc(var(--text) * .95); line-height: 1.3; }
.nav-item .s { display: block; color: var(--ink-3); font-size: calc(var(--text) * .8); line-height: 1.4; margin-top: .15rem; }
.nav-primary { display: flex; gap: .75rem; align-items: center; }
.nav-primary .fig { flex: 0 0 40px; color: var(--accent); display: block; line-height: 0; }
.nav-plain { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.nav-plain .chev { color: var(--ink-3); font-size: calc(var(--text) * 1.1); }

/* Набросок оглавления: названия областей плашками. Это картинка словами,
   а не ссылки — вся карточка целиком одна ссылка на список. */
.zone-sketch { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .55rem; }
.zone-sketch span {
  font-size: calc(var(--text) * .72); line-height: 1.5;
  color: var(--accent-d); background: var(--wash);
  border-radius: 20px; padding: .1rem .55rem;
  white-space: nowrap;
}

/* Пометка «скоро» — у того, чего на сайте ещё нет. */

/* Хаб: заливка мягче, чем у карточек, внутри заголовок-ссылка и пять ссылок. */
.hub { background: var(--wash); border-color: var(--wash-line); padding: 0 0 .5rem; }
.hub-head {
  display: block;
  padding: .8rem .95rem .5rem;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius) var(--radius) 0 0;
}
.hub-head:hover .t { text-decoration: underline; }
.hub .sub { display: flex; flex-direction: column; padding: 0 .6rem 0 .95rem; }
.hub .sub a {
  display: flex; align-items: baseline;
  min-height: 44px;
  font-size: calc(var(--text) * .85); line-height: 1.3;
  color: var(--accent-d);
  text-decoration: none;
  padding: .3rem 0;
  border-top: 1px solid var(--wash-line);
}
.hub .sub a:first-child { border-top: 0; }
.hub .sub a::before { content: "— "; color: var(--ink-3); white-space: pre; }
.hub .sub a:hover, .hub .sub a[aria-current] { text-decoration: underline; }
.hub .sub a[aria-current] { color: var(--ink); }

/* ---------- подвал ----------
   Подвал повторяет сетку страницы. Отступы отданы обёртке .bottom-inner,
   а не самому подвалу: у main тоже max-width считается вместе с внутренним
   полем (box-sizing: border-box), и без этого левый край подвала не совпадал
   бы с левым краем текста даже на телефоне.

   Сам текст выравнивается по левому краю всегда, как и текст страницы. */
.bottom {
  border-top: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-2);
  font-size: calc(var(--text) * .87);
  line-height: 1.45;
  padding: 1.2rem 0 1.6rem;
  text-align: left;
}
.bottom-inner, .footbrand {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 1.25rem;
}
/* На телефоне колонки идут одна под другой в порядке разметки:
   имя сайта, владелец, обратная связь — с воздухом между ними. */
.footbrand + .bottom-inner { margin-top: .8rem; }
.footname { display: flex; align-items: center; gap: .5rem; color: var(--ink); }
.footname strong { font-family: var(--font-head); font-weight: 700; }
.footname .fig { color: var(--accent); line-height: 0; flex: none; }

/* Подвал служебный и короткий, поэтому строки идут плотно; воздух только
   между колонками, когда на телефоне они встают одна под другой. */
.bottom p { margin: 0 0 .35rem; }
.footcol > p:last-child { margin-bottom: 0; }
.bottom-inner .footcol + .footcol { margin-top: .8rem; }
.service h2 { font-size: calc(var(--text) * 1.1); margin-top: 1.8rem; }
.service h2:first-of-type { margin-top: 1.2rem; }

/* От 1200 подвал встаёт на ту же сетку, что и .layout, а обёртка попадает
   в колонку текста: левый край подвала и левый край статьи — одна линия.
   Внутри обёртки две равные колонки: владелец с поддержкой и обратная
   связь. */
@media (min-width: 1200px) {
  /* Колонки выровнены по середине, а не по верхнему краю: в первой три
     строки, в остальных по две, и с выравниванием по верху подвал читался
     как таблица с пустыми ячейками внизу. */
  .bottom {
    display: grid;
    grid-template-columns: 17.5rem minmax(0, var(--measure-wide));
    justify-content: center;
    gap: 0 2rem;
    align-items: center;
    padding: 1.6rem 1.5rem 2rem;
  }
  .bottom-inner {
    grid-column: 2;
    grid-row: 1;
    max-width: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 2rem;
    align-items: center;
  }
  .bottom-inner .footcol + .footcol { margin-top: 0; }
  .footbrand + .bottom-inner { margin-top: 0; }
  /* Колонка с фигурой встаёт под левое меню, по левому полю страницы. */
  .footbrand {
    grid-column: 1;
    grid-row: 1;
    max-width: none;
    margin: 0;
    padding: 0;
    width: 100%;
  }
}

/* От 1500 у страницы три колонки, и содержимое занимает вторую и третью.
   Подвал повторяет это: текст под текстом, служебная колонка под правой. */
@media (min-width: 1500px) {
  .bottom {
    grid-template-columns: minmax(15rem, 1fr) minmax(0, var(--measure-wide)) minmax(17rem, 1fr);
    justify-content: normal;
  }
  .bottom-inner {
    grid-column: 2 / 4;
    /* Левая колонка — под текстом страницы, правая — под правой колонкой;
       правая ограничена, иначе на очень широком мониторе короткие строки
       обратной связи растянулись бы через всю страницу. */
    grid-template-columns: minmax(0, var(--measure-wide)) minmax(15rem, 22rem);
  }
}

/* ---------- кнопка «Наверх» ----------
   Внизу справа, поверх страницы. Появляется скриптом (naverkh.js), когда
   человек ушёл вниз дальше полутора экранов; без скрипта остаётся скрытой.
   Правило [hidden] здесь своё: авторское display перебило бы браузерное. */
.totop {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 30;
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 44px; padding: .5rem .95rem;
  background: var(--card); color: var(--accent-d);
  border: 1px solid var(--line); border-radius: 999px;
  box-shadow: 0 4px 16px var(--shadow);
  font-size: calc(var(--text) * .9); font-weight: 600; line-height: 1;
  text-decoration: none;
}
.totop[hidden] { display: none; }
.totop:hover, .totop:focus-visible { border-color: var(--accent); }
.totop svg { flex: none; }
@media (min-width: 1200px) {
  .totop { right: 1.5rem; bottom: 1.5rem; }
}

/* ---------- общие мелочи ---------- */
.note { color: var(--ink-3); font-size: calc(var(--text) * .88); margin: 0 0 .8rem; }
.muted { color: var(--ink-3); }
.lead { color: var(--ink-2); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ext { font-size: .85em; }
.tel { font-weight: 600; }

.icd {
  display: inline-block;
  font-size: calc(var(--text) * .82); color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* ---------- плашка на статье ---------- */
.plaque {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-s);
  background: var(--card);
  padding: .7rem .9rem;
  font-size: calc(var(--text) * .88); line-height: 1.5;
  color: var(--ink-2);
  margin-bottom: 1.6rem;
}

/* ---------- красная плашка: emergency ----------
   Заметнее справочной плашки и в цветах тревоги, не акцента: та же логика,
   что у блока «сначала позвоните» в уточнении. Появляется только у статей
   с emergency: true — иначе её перестают замечать. */
.emergency {
  background: var(--alarm-bg);
  border: 2px solid var(--alarm-ink);
  border-radius: var(--radius-s);
  padding: 1rem 1.1rem .4rem;
  margin: 0 0 1.2rem;
  font-size: calc(var(--text) * 1);
  line-height: 1.5;
}
.emergency-title {
  color: var(--alarm-ink);
  font-weight: 700;
  font-size: calc(var(--text) * 1.15);
  margin-bottom: .4rem;
}
.emergency p:last-child { margin-bottom: .6rem; }

/* ---------- подробная статья: detail ----------
   Ширина колонки задана снаружи (--measure), здесь только ритм: заголовок
   ближе к своему абзацу, чем к предыдущему; между абзацами — полный интервал. */
.detail { margin-top: 2.2rem; border-top: 1px solid var(--line); padding-top: .6rem; }
.detail h2 { font-size: calc(var(--text) * 1.15); margin: 1.7rem 0 .5rem; }
.detail h2:first-child { margin-top: .9rem; }
.detail p { margin: 0 0 1.05rem; line-height: 1.65; }

/* ---------- статья ---------- */
.condition .icd { margin-bottom: .8rem; }
.alt, .limits { font-size: calc(var(--text) * .92); color: var(--ink-2); margin: 0 0 .5rem; }
.alt span:first-child { color: var(--ink-3); }

dl.fields { margin: 1.6rem 0 0; }
dl.fields > div { margin: 0 0 1.15rem; }
dl.fields dt {
  font-size: calc(var(--text) * .78); text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-3); margin-bottom: .18rem;
}
dl.fields dd { margin: 0; }
dl.fields .urgent dd {
  border-left: 3px solid var(--alarm-line);
  background: var(--alarm-bg);
  padding: .5rem .75rem;
}
dl.fields.small dd { font-size: calc(var(--text) * .92); color: var(--ink-2); }

.insections { border-top: 1px solid var(--line); margin-top: 2rem; padding-top: .4rem; }
ul.links { list-style: none; padding: 0; margin: 0; }
ul.links li { padding: .25rem 0; border-bottom: 1px solid var(--line); }

.origin { border-top: 1px solid var(--line); margin-top: 2rem; padding-top: .4rem; }
ul.sources { margin: 0 0 1rem; padding-left: 1.1rem; font-size: calc(var(--text) * .92); }
.report { font-size: calc(var(--text) * .9); }
.report .note { display: block; margin-top: .2rem; }

/* ---------- раздел ---------- */
.crumbs { font-size: calc(var(--text) * .85); color: var(--ink-2); margin-bottom: .5rem; }

.block { margin-top: 2rem; }
.block h2 { margin-top: 0; }
/* Свёрнутый блок «редко, но важно» стоит последним и в закрытом виде спокоен:
   постоянный тревожный фон перестают замечать, и тогда он не сработает
   в настоящем случае. Подсветка появляется, только когда человек его раскрыл. */
details.block.rare {
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 0 1rem;
  margin-top: 2rem;
}
details.block.rare[open] {
  background: var(--alarm-bg);
  border-color: var(--alarm-line);
  padding-bottom: .3rem;
}
details.block.rare > summary {
  cursor: pointer;
  padding: .75rem 0;
  min-height: 44px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: .5rem;
}
details.block.rare > summary .sum { flex: 0 1 auto; }
details.block.rare > summary .count {
  color: var(--ink-3);
  font-size: calc(var(--text) * .82);
  font-variant-numeric: tabular-nums;
}
details.block.rare[open] > summary { border-bottom: 1px solid var(--alarm-line); }

ul.conditions { list-style: none; padding: 0; margin: 0; }
ul.conditions li {
  padding: .6rem 0;
  border-bottom: 1px solid var(--line);
}
ul.conditions li a { font-weight: 600; margin-right: .5rem; }
.gist { display: block; font-size: calc(var(--text) * .9); color: var(--ink-2); margin-top: .15rem; }

.notsearched {
  margin-top: 2.4rem; border-top: 1px solid var(--line); padding-top: .4rem;
}
.notsearched ul { padding-left: 1.1rem; }
.notsearched li { margin-bottom: .3rem; }
.nomatch { margin-top: 2rem; font-size: calc(var(--text) * .95); }

/* ---------- указатель ---------- */
.cols { columns: 2 15rem; column-gap: 2.2rem; margin-bottom: 2rem; }
.letter { break-inside: avoid; margin-bottom: 1rem; }
.letter h3 {
  margin: 0 0 .2rem; color: var(--accent-d);
  border-bottom: 1px solid var(--line);
}
ul.index { list-style: none; padding: 0; margin: 0; font-size: calc(var(--text) * .95); }
ul.index li { padding: .12rem 0; }
ul.index li.ref { color: var(--ink-3); }
.aka { display: block; font-size: calc(var(--text) * .82); color: var(--ink-3); }

/* ---------- главная ----------
   Одна карточка: заголовок, два коротких абзаца, две карточки-входа
   и строка предупреждения под ними. Полный текст предупреждения —
   на странице «О справочнике» и в подвале. */
.hello {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.5rem 1.4rem 1.2rem;
}
.hello h1 { font-size: calc(var(--text) * 1.75); margin-bottom: .5rem; }
.hello h1 .tagline { font-weight: 400; color: var(--ink-2); }
.hello .lead { margin-bottom: .4rem; max-width: 60ch; }

.cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .9rem;
  margin: 1.2rem 0 .9rem;
}
@media (max-width: 34rem) { .cards { grid-template-columns: 1fr; } }
.card {
  display: flex; gap: .85rem; align-items: flex-start;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.05rem;
  color: var(--ink);
  text-decoration: none;
  min-height: 44px;
  transition: border-color .15s, box-shadow .15s;
}
.card:hover, .card:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 3px 14px var(--shadow);
  text-decoration: none;
}
.card .icon { flex: 0 0 auto; color: var(--accent); line-height: 0; }
.card .icon-figury { display: flex; gap: .3rem; align-items: flex-end; }
.card .icon-figury img { display: block; height: 58px; width: auto; }
.card .ct { display: block; font-family: var(--font-head); font-weight: 600; font-size: calc(var(--text) * 1.02); line-height: 1.3; }
.card .cs { display: block; color: var(--ink-3); font-size: calc(var(--text) * .85); line-height: 1.4; margin-top: .2rem; }
.card:hover .ct { text-decoration: underline; text-underline-offset: 3px; }

/* Строка предупреждения под карточками: спокойная, отделена линией. */
.hello-note {
  font-size: calc(var(--text) * .85); color: var(--ink-3);
  margin: 0; padding-top: .8rem;
  border-top: 1px solid var(--line);
}

/* Перечни: тире вместо маркера, как в исходном тексте предупреждения. */
ul.dashed { list-style: none; padding-left: .2rem; margin: 0 0 .9rem; }
ul.dashed li { padding-left: 1.1rem; text-indent: -1.1rem; margin-bottom: .3rem; }
ul.dashed li::before { content: "— "; }
.cta { margin: 1.2rem 0 .4rem; }
.button {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: .6rem 1.2rem;
  border-radius: var(--radius-s);
  min-height: 44px;
  line-height: 1.9;
}
.button:hover { background: var(--accent-d); }
/* Счётчики — одна мелкая строка. Крупные цифры обещали витрину,
   а это всего лишь справка об объёме. */
.counts {
  font-size: calc(var(--text) * .85);
  color: var(--ink-3);
  margin: .2rem 0 .55rem;
}

/* ---------- хаб на странице «О справочнике» ---------- */
.hubnav {
  display: flex; flex-direction: column;
  background: var(--wash);
  border: 1px solid var(--wash-line);
  border-radius: var(--radius);
  padding: .3rem 1rem;
  margin: .8rem 0 1.6rem;
}
.hubnav a {
  display: flex; align-items: baseline;
  min-height: 44px;
  padding: .35rem 0;
  border-top: 1px solid var(--wash-line);
  text-decoration: none;
  color: var(--accent-d);
}
.hubnav a:first-child { border-top: 0; }
.hubnav a::before { content: "— "; color: var(--ink-3); white-space: pre; }
.hubnav a:hover { text-decoration: underline; }
.hubnav a[aria-current] { color: var(--ink); font-weight: 600; }

/* ---------- области ---------- */
.zonelist .count {
  display: inline-block;
  font-size: calc(var(--text) * .82); color: var(--ink-3);
  margin-left: .4rem;
}
.subzone { margin: 1.1rem 0 0; }
.subzone h3 { margin: 0 0 .1rem; }
.subzone .note { margin-bottom: .35rem; }
.zone .block { margin-top: 2.2rem; }
.zone .block > .note { margin-top: -.3rem; }

/* ---------- поиск ---------- */
.poisk { margin: 1.2rem 0 1.8rem; }
.poisk-label {
  display: block;
  font-size: calc(var(--text) * .82); color: var(--ink-3);
  margin-bottom: .25rem;
}
.poisk-input {
  width: 100%;
  min-height: 44px;
  padding: .5rem .7rem;
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
}
.poisk-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.poisk-status { font-size: calc(var(--text) * .85); color: var(--ink-3); margin: .4rem 0 0; min-height: 1.2em; }
.poisk-empty {
  border-left: 3px solid var(--line);
  padding: .1rem 0 .1rem .8rem;
  margin-top: .8rem;
  font-size: calc(var(--text) * .92);
}
.poisk-empty p { margin-bottom: .4rem; }

/* ---------- поиск в шапке ---------- */
/* Слот скрыт в разметке и раскрывается скриптом. Без JavaScript внутри
   остаётся видимой обычная ссылка на указатель, поэтому скрывать сам слот
   нельзя — прячется только то, что скрипт заменил. */
.topsearch { flex: 1 1 100%; order: 5; position: relative; }
.poisk-fallback { font-size: calc(var(--text) * .95); color: var(--ink-2); }
.poisk-top-box { position: relative; }
.poisk-top-label {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.poisk-top-input {
  width: 100%;
  min-height: 44px;
  padding: .5rem .7rem;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
}
.poisk-top-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Выпадающий список ложится поверх страницы, а не раздвигает её:
   иначе при каждом нажатии клавиши текст под шапкой прыгает вниз. */
.poisk-out {
  position: absolute; z-index: 20; left: 0; right: 0;
  margin: .3rem 0 0; padding: .25rem 0;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  box-shadow: 0 6px 20px var(--shadow);
  max-height: 60vh; overflow-y: auto;
}
.poisk-out li { margin: 0; }
.poisk-out a {
  display: flex; align-items: baseline; justify-content: space-between; gap: .8rem;
  min-height: 44px;
  padding: .5rem .8rem;
  color: var(--ink);
  text-decoration: none;
}
.poisk-out a:hover, .poisk-out a:focus { background: var(--bg); outline: none; }
.poisk-out .kind { font-size: calc(var(--text) * .78); color: var(--ink-3); flex: none; }
.poisk-top-status { font-size: calc(var(--text) * .8); color: var(--ink-3); margin: .3rem 0 0; }

@media (min-width: 46rem) {
  /* На широком экране поле встаёт в строку шапки между названием и разделами
     и не растягивается на всю ширину: строка поиска длиной в экран читается
     как поле для текста, а не для одного слова. Ширина та же, что и от 1200,
     20rem — подсказка в поле подобрана под неё. */
  .topsearch { flex: 1 1 14rem; max-width: 21rem; order: 0; }
}

/* ---------- уточнение ---------- */
.refine {
  margin-top: 2.4rem;
  border-top: 1px solid var(--line);
  padding-top: 1.2rem;
}
.refine h2 { margin-top: .6rem; font-size: calc(var(--text) * 1.15); }
.refine h3 { font-size: calc(var(--text) * 1); }

.choices { display: flex; flex-direction: column; gap: .5rem; margin: .8rem 0; }
.choices button {
  text-align: left;
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: .65rem .85rem;
  min-height: 44px;
  cursor: pointer;
}
.choices button:hover { border-color: var(--accent); }
.choices button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.choices button.muted { color: var(--ink-3); }

.refine .age { max-width: 8rem; }

.refine [data-act="copy"],
.refine [data-act="restart"] {
  font: inherit;
  padding: .5rem .9rem;
  min-height: 44px;
  border-radius: var(--radius-s);
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  margin-right: .5rem;
}

.tell { margin-top: 2rem; border-top: 1px solid var(--line); padding-top: .4rem; }
.tell pre {
  /* pre-wrap переносит по пробелам, anywhere — внутри длинного слова.
     Без второго сводка уезжала бы вбок на узком экране. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-width: 100%;
  font: inherit;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: .8rem .9rem;
  margin: 0 0 .8rem;
}

/* Тревога заметна, но появляется редко — постоянный тревожный фон
   перестают замечать, и тогда он не сработает в настоящем случае.
   Цвет у неё свой, не акцентный: тревога не должна выглядеть как ссылка. */
.alarm {
  margin-top: 1.6rem;
  background: var(--alarm-bg);
  border: 1px solid var(--alarm-line);
  border-left: 4px solid var(--alarm-ink);
  border-radius: var(--radius-s);
  padding: 1rem 1.1rem .6rem;
}
.alarm h2 { margin-top: 0; color: var(--alarm-ink); }
.alarm ul { padding-left: 1.1rem; }
.alarm li { margin-bottom: .4rem; }
.alarm .phone {
  font-size: calc(var(--text) * 1.5);
  font-weight: 700;
  letter-spacing: .04em;
  margin: .6rem 0;
}

/* ---------- вход «на модели» ----------
   Цвета только из переменных: блок должен быть чистым, а не белым.
   Литеральный #fff светился белым прямоугольником посреди тёмной страницы.
   Слева фигура-заглушка и слово о том, чего ждать; справа — тот же вход
   в оглавление словами, целиком одна ссылка. */
.fork {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}
.fork-half { padding: 1.4rem 1.25rem; min-height: 15rem; }
/* Разделительная линия: между колонками на широком экране,
   между строками — когда половины встают друг под друга. */
.fork-half + .fork-half { border-left: 1px solid var(--line); }
@media (max-width: 34rem) {
  .fork { grid-template-columns: 1fr; }
  .fork-half { min-height: 0; }
  .fork-half + .fork-half { border-left: 0; border-top: 1px solid var(--line); }
}
.fork h2 { margin: 0 0 .4rem; font-size: calc(var(--text) * 1.1); color: var(--ink); }
.fork-note { color: var(--ink-3); font-size: calc(var(--text) * .88); margin: 0 0 .6rem; }
.fork-on { display: block; text-decoration: none; background: var(--card); color: var(--ink); }
.fork-on:hover { background: var(--wash); }
.fork-on h2 { text-decoration: underline; text-underline-offset: 3px; color: var(--accent-d); }
.fork-on .zone-sketch span { font-size: calc(var(--text) * .8); }

/* ---------- простые страницы ---------- */
.plain ul.big { padding-left: 1.1rem; }
.plain ul.big li { margin-bottom: .45rem; }
.alarmish h1 { color: var(--alarm-ink); }

/* ---------- фигура тела, /vybor/ ----------
   Переключатели пола, вида и зоны — переключатели формы, спрятанные с экрана,
   но не от клавиатуры и читалки; подписи к ним выглядят кнопками и зонами.
   Что показано и что подсвечено, решают стили по :checked — без JavaScript.
   Кадры, которых не видно, браузер не грузит: у картинок loading="lazy". */
.figura { margin: 1.5rem 0 2rem; }
.figura-radio { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; }
/* Первый экран: две фигуры одной высоты, мужская слева, женская справа,
   каждая — подпись к своему переключателю; фон страницы, без карточки. */
.figura-dve { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; align-items: end; justify-items: center; max-width: 30rem; margin: 0 auto; }
.figura-vybor {
  display: flex; flex-direction: column; align-items: center; padding: .6rem .6rem 0;
  border: 1px solid transparent; border-radius: var(--radius); color: var(--ink); cursor: pointer;
}
.figura-vybor:hover { border-color: var(--accent); }
.figura-vybor img { display: block; height: 15rem; width: auto; }
@media (max-width: 480px) { .figura-vybor img { height: 12rem; } }
.figura-vybor span { display: flex; align-items: center; justify-content: center; min-height: 44px; font-size: calc(var(--text) * .92); line-height: 1.2; }
.figura-vybor:hover span { text-decoration: underline; text-underline-offset: 3px; color: var(--accent-d); }
#figura-m:focus-visible ~ .figura-dve label[for="figura-m"],
#figura-f:focus-visible ~ .figura-dve label[for="figura-f"] { outline: 2px solid var(--accent); outline-offset: 2px; }
.figura-pick { grid-column: 1 / -1; text-align: center; color: var(--ink-3); font-size: calc(var(--text) * .92); margin: .8rem 0 0; }
#figura-m:checked ~ .figura-dve, #figura-f:checked ~ .figura-dve { display: none; }
.figura-knopki { display: none; flex-wrap: wrap; justify-content: center; align-items: center; gap: .6rem 1.5rem; margin: 0 0 1rem; }
#figura-m:checked ~ .figura-knopki, #figura-f:checked ~ .figura-knopki { display: flex; }
.figura-knopki > span { display: inline-flex; gap: .4rem; }
.figura-knopki label {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--ink); cursor: pointer;
  font-size: calc(var(--text) * .92); line-height: 1.2;
}
.figura-knopki label:hover { border-color: var(--accent); }
#figura-front:checked ~ .figura-knopki label[for="figura-front"],
#figura-back:checked ~ .figura-knopki label[for="figura-back"] {
  border-color: var(--accent); background: var(--wash); color: var(--accent-d); font-weight: 600;
}
#figura-front:focus-visible ~ .figura-knopki label[for="figura-front"],
#figura-back:focus-visible ~ .figura-knopki label[for="figura-back"],
#figura-obe:focus-visible ~ .figura-knopki label[for="figura-obe"] { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Фокус на переключателе пола виден всегда: в состоянии «обе» — рамка
   вокруг двух фигур, у раскрытой фигуры — вокруг кадра (стрелки меняют фигуру). */
#figura-obe:focus-visible ~ .figura-dve,
#figura-m:focus-visible ~ .figura-kadry, #figura-f:focus-visible ~ .figura-kadry { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 12px; }
.figura-kadry { position: relative; max-width: 26rem; margin: 0 auto; }
.kadr { display: none; position: relative; }
.kadr img { display: block; width: 100%; height: auto; }
#figura-m:checked ~ #figura-front:checked ~ .figura-kadry .kadr-m-front,
#figura-m:checked ~ #figura-back:checked ~ .figura-kadry .kadr-m-back,
#figura-f:checked ~ #figura-front:checked ~ .figura-kadry .kadr-f-front,
#figura-f:checked ~ #figura-back:checked ~ .figura-kadry .kadr-f-back { display: block; }
/* Переключатели зон: в обороте только зоны показанного кадра — стрелки
   с клавиатуры ходят по ним и не забредают в скрытые кадры. */
.figura-zona { display: none; }
#figura-m:checked ~ #figura-front:checked ~ .figura-zona[id^="z-m-front-"],
#figura-m:checked ~ #figura-back:checked ~ .figura-zona[id^="z-m-back-"],
#figura-f:checked ~ #figura-front:checked ~ .figura-zona[id^="z-f-front-"],
#figura-f:checked ~ #figura-back:checked ~ .figura-zona[id^="z-f-back-"] { display: block; }
/* Зона на кадре — «прожектор». Обёртка .zona на весь кадр, внутри:
   svg с путём контура в defs (clipPath в долях бокса); label — область
   нажатия, обрезанная контуром; .sloy-obv > .sloy — тот же кадр, обрезанный
   тем же контуром, виден у выбранной зоны поверх погашенного кадра;
   обводка — тень вокруг обрезанного слоя: ложится по краю видимой зоны,
   то есть по коже и по линии разреза, а не по опорному многоугольнику,
   который у рук и ног захватывает воздух; .podpis — название у центроида.
   Выбор (переключатель зоны :checked) включает всё через переменные --z-*,
   которые ставят правила по зонам в конце файла. Наведение показывает
   слой с обводкой и подпись; пока у кадра есть выбранная зона, слой
   наведённой чужой зоны гасится вместе с кадром — наведение не спорит
   с выбором, остаётся только обводка. */
.zona { position: absolute; inset: 0; pointer-events: none; }
.zona svg { position: absolute; width: 0; height: 0; }
.zona .uchastok { position: absolute; inset: 0; display: block; cursor: pointer; pointer-events: auto; }
.zona .sloy-obv {
  position: absolute; inset: 0; display: var(--z-sloy, none); pointer-events: none;
  filter: drop-shadow(1.5px 0 0 var(--accent)) drop-shadow(-1.5px 0 0 var(--accent)) drop-shadow(0 1.5px 0 var(--accent)) drop-shadow(0 -1.5px 0 var(--accent));
}
.zona .sloy { position: absolute; inset: 0; background: var(--kadr) 0 0 / 100% 100% no-repeat; }
.zona:hover .sloy-obv { display: block; }
.zona .podpis {
  position: absolute; left: calc(var(--cx) * 100%); top: calc(var(--cy) * 100%); transform: translate(-50%, -50%);
  padding: .15rem .6rem; border-radius: 6px; white-space: nowrap;
  background: var(--ink); color: var(--bg);
  font-size: calc(var(--text) * .8); line-height: 1.5;
  opacity: var(--z-podpis, 0); pointer-events: none; z-index: 2;
}
.zona:hover .podpis { opacity: 1; }
/* Гашение: пока у показанного кадра есть выбранная зона, сам кадр темнеет
   и сереет, живой остаётся только слой зоны. */
.figura-zona[id^="z-m-front-"]:checked ~ .figura-kadry .kadr-m-front > img,
.figura-zona[id^="z-m-back-"]:checked ~ .figura-kadry .kadr-m-back > img,
.figura-zona[id^="z-f-front-"]:checked ~ .figura-kadry .kadr-f-front > img,
.figura-zona[id^="z-f-back-"]:checked ~ .figura-kadry .kadr-f-back > img,
.figura-zona[id^="z-m-front-"]:checked ~ .figura-kadry .kadr-m-front .sloy,
.figura-zona[id^="z-m-back-"]:checked ~ .figura-kadry .kadr-m-back .sloy,
.figura-zona[id^="z-f-front-"]:checked ~ .figura-kadry .kadr-f-front .sloy,
.figura-zona[id^="z-f-back-"]:checked ~ .figura-kadry .kadr-f-back .sloy { filter: var(--z-zhivoy, brightness(.72) saturate(.55)); }
/* Второе нажатие: кнопка «Далее — …» под фигурой. Видна только для выбранной
   зоны и только пока показан её кадр; иначе подсказка. На телефоне липнет
   к низу окна, если фигура выше экрана. */
.figura-dalee { position: sticky; bottom: .5rem; max-width: 26rem; margin: .75rem auto 0; padding: .25rem 0; background: var(--bg); }
.figura-podskazka { display: flex; align-items: center; justify-content: center; min-height: 44px; margin: 0; text-align: center; color: var(--ink-3); font-size: calc(var(--text) * .92); }
.figura-knopka {
  display: none; align-items: center; justify-content: center; width: 100%; min-height: 44px; padding: .5rem 1rem;
  background: var(--accent); color: var(--card); border-radius: var(--radius-s); text-decoration: none; font-weight: 600;
}
.figura-knopka:hover, .figura-knopka:focus-visible { background: var(--accent-d); color: var(--card); text-decoration: none; }
#figura-obe:checked ~ .figura-dalee { display: none; }
.page-vybor .zonelist { margin-top: .5rem; }
/* Правила по зонам. Сгенерированы из слоя якорей (anatomy.json) — по одному
   переключателю на зону каждого кадра; при смене набора зон перегенерировать:
   см. zonesOf() в src/site/pages/vybor.js и contoursOf() в src/site/figura.js. */
/* выбранная зона: слой-прожектор с обводкой живой, подпись (у отражённых копий — обе) */
#z-m-front-head:checked ~ .figura-kadry .zona[data-z="m-front-head"],
#z-m-front-neck:checked ~ .figura-kadry .zona[data-z="m-front-neck"],
#z-m-front-chest:checked ~ .figura-kadry .zona[data-z="m-front-chest"],
#z-m-front-abd:checked ~ .figura-kadry .zona[data-z="m-front-abd"],
#z-m-front-arm:checked ~ .figura-kadry .zona[data-z="m-front-arm"],
#z-m-front-leg:checked ~ .figura-kadry .zona[data-z="m-front-leg"],
#z-m-front-pelv:checked ~ .figura-kadry .zona[data-z="m-front-pelv"],
#z-m-back-head-back:checked ~ .figura-kadry .zona[data-z="m-back-head-back"],
#z-m-back-neck-back:checked ~ .figura-kadry .zona[data-z="m-back-neck-back"],
#z-m-back-back:checked ~ .figura-kadry .zona[data-z="m-back-back"],
#z-m-back-pelv-back:checked ~ .figura-kadry .zona[data-z="m-back-pelv-back"],
#z-f-front-head:checked ~ .figura-kadry .zona[data-z="f-front-head"],
#z-f-front-neck:checked ~ .figura-kadry .zona[data-z="f-front-neck"],
#z-f-front-chest:checked ~ .figura-kadry .zona[data-z="f-front-chest"],
#z-f-front-abd:checked ~ .figura-kadry .zona[data-z="f-front-abd"],
#z-f-front-arm:checked ~ .figura-kadry .zona[data-z="f-front-arm"],
#z-f-front-leg:checked ~ .figura-kadry .zona[data-z="f-front-leg"],
#z-f-front-pelv:checked ~ .figura-kadry .zona[data-z="f-front-pelv"],
#z-f-back-head-back:checked ~ .figura-kadry .zona[data-z="f-back-head-back"],
#z-f-back-neck-back:checked ~ .figura-kadry .zona[data-z="f-back-neck-back"],
#z-f-back-back:checked ~ .figura-kadry .zona[data-z="f-back-back"],
#z-f-back-pelv-back:checked ~ .figura-kadry .zona[data-z="f-back-pelv-back"] { --z-sloy: block; --z-zhivoy: none; --z-podpis: 1; }
/* кнопка «Далее» выбранной зоны — пока показан её кадр */
#figura-m:checked ~ #figura-front:checked ~ #z-m-front-head:checked ~ .figura-dalee a[data-z="m-front-head"],
#figura-m:checked ~ #figura-front:checked ~ #z-m-front-neck:checked ~ .figura-dalee a[data-z="m-front-neck"],
#figura-m:checked ~ #figura-front:checked ~ #z-m-front-chest:checked ~ .figura-dalee a[data-z="m-front-chest"],
#figura-m:checked ~ #figura-front:checked ~ #z-m-front-abd:checked ~ .figura-dalee a[data-z="m-front-abd"],
#figura-m:checked ~ #figura-front:checked ~ #z-m-front-arm:checked ~ .figura-dalee a[data-z="m-front-arm"],
#figura-m:checked ~ #figura-front:checked ~ #z-m-front-leg:checked ~ .figura-dalee a[data-z="m-front-leg"],
#figura-m:checked ~ #figura-front:checked ~ #z-m-front-pelv:checked ~ .figura-dalee a[data-z="m-front-pelv"],
#figura-m:checked ~ #figura-back:checked ~ #z-m-back-head-back:checked ~ .figura-dalee a[data-z="m-back-head-back"],
#figura-m:checked ~ #figura-back:checked ~ #z-m-back-neck-back:checked ~ .figura-dalee a[data-z="m-back-neck-back"],
#figura-m:checked ~ #figura-back:checked ~ #z-m-back-back:checked ~ .figura-dalee a[data-z="m-back-back"],
#figura-m:checked ~ #figura-back:checked ~ #z-m-back-pelv-back:checked ~ .figura-dalee a[data-z="m-back-pelv-back"],
#figura-f:checked ~ #figura-front:checked ~ #z-f-front-head:checked ~ .figura-dalee a[data-z="f-front-head"],
#figura-f:checked ~ #figura-front:checked ~ #z-f-front-neck:checked ~ .figura-dalee a[data-z="f-front-neck"],
#figura-f:checked ~ #figura-front:checked ~ #z-f-front-chest:checked ~ .figura-dalee a[data-z="f-front-chest"],
#figura-f:checked ~ #figura-front:checked ~ #z-f-front-abd:checked ~ .figura-dalee a[data-z="f-front-abd"],
#figura-f:checked ~ #figura-front:checked ~ #z-f-front-arm:checked ~ .figura-dalee a[data-z="f-front-arm"],
#figura-f:checked ~ #figura-front:checked ~ #z-f-front-leg:checked ~ .figura-dalee a[data-z="f-front-leg"],
#figura-f:checked ~ #figura-front:checked ~ #z-f-front-pelv:checked ~ .figura-dalee a[data-z="f-front-pelv"],
#figura-f:checked ~ #figura-back:checked ~ #z-f-back-head-back:checked ~ .figura-dalee a[data-z="f-back-head-back"],
#figura-f:checked ~ #figura-back:checked ~ #z-f-back-neck-back:checked ~ .figura-dalee a[data-z="f-back-neck-back"],
#figura-f:checked ~ #figura-back:checked ~ #z-f-back-back:checked ~ .figura-dalee a[data-z="f-back-back"],
#figura-f:checked ~ #figura-back:checked ~ #z-f-back-pelv-back:checked ~ .figura-dalee a[data-z="f-back-pelv-back"] { display: flex; }
/* подсказка прячется, когда у показанного кадра есть выбранная зона */
#figura-m:checked ~ #figura-front:checked ~ .figura-zona[id^="z-m-front-"]:checked ~ .figura-dalee .figura-podskazka,
#figura-m:checked ~ #figura-back:checked ~ .figura-zona[id^="z-m-back-"]:checked ~ .figura-dalee .figura-podskazka,
#figura-f:checked ~ #figura-front:checked ~ .figura-zona[id^="z-f-front-"]:checked ~ .figura-dalee .figura-podskazka,
#figura-f:checked ~ #figura-back:checked ~ .figura-zona[id^="z-f-back-"]:checked ~ .figura-dalee .figura-podskazka { display: none; }