/* Точка входа стилей: генератор страниц склеивает импорты в один файл в этом порядке. */
/* Шрифты проекта: Fira Sans (заголовки, навигация, интерфейс, подписи, цифры, таблицы) и Lora (длинные текстовые абзацы).
   Только используемые начертания и подмножества cyrillic и latin. Лицензия OFL-1.1, файлы лицензий рядом. */

@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/fira-sans-cyrillic-400-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/fira-sans-latin-400-normal.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: "Fira Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/fira-sans-cyrillic-600-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/fira-sans-latin-600-normal.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;
}

/* 700: заголовки карточек «Соглашения с РФ» (ТЗ 23.10). Тот же источник, что у 400 и 600: @fontsource/fira-sans 5.3.0. */
@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/fira-sans-cyrillic-700-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/fira-sans-latin-700-normal.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: 400;
  font-display: swap;
  src: url("../fonts/lora-cyrillic-400-normal.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.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;
}

/*
  Дизайн-токены проекта «Россия — Африка». Только custom properties.
  Описание и правила использования: docs/design.md.
  Компонентные стили пишутся в отдельных файлах src/styles/ и берут значения только отсюда.
  Точки перелома (в @media переменные не работают, значения те же везде):
  40rem (640), 48rem (768), 64rem (1024), 80rem (1280).
*/

:root {
  color-scheme: light;

  /* Нейтральная шкала, ч/б основа */
  --color-white: #fff;
  --color-grey-50: #f5f5f5;
  --color-grey-100: #ececec;
  --color-grey-200: #e4e4e4;
  --color-grey-300: #cfcfcf;
  --color-grey-500: #6e6e6e;
  --color-grey-600: #5c5c5c;
  --color-grey-900: #1f1e21;

  /* Акценты: цвета спецпроекта и логотипов партнеров (тема сайта summitafrica.ru, brand-color-1 и brand-color-3) */
  --color-navy: #093382;
  --color-navy-dark: #061f5c;
  --color-navy-tint: #e9eef8;
  --color-brick: #a71a1f;
  --color-brick-tint: #f9ecec;

  /* Смысловые роли */
  --color-bg: var(--color-white);
  --color-surface: var(--color-white);
  --color-surface-muted: var(--color-grey-50);
  --color-surface-hover: var(--color-grey-100);
  --color-surface-inverse: var(--color-grey-900);
  --color-text: var(--color-grey-900);
  --color-text-muted: var(--color-grey-600);
  --color-text-subtle: var(--color-grey-500);
  --color-text-inverse: var(--color-white);
  --color-text-inverse-muted: var(--color-grey-300);
  --color-accent: var(--color-navy);
  --color-accent-hover: var(--color-navy-dark);
  --color-accent-tint: var(--color-navy-tint);
  --color-accent-contrast: var(--color-white);
  --color-accent-secondary: var(--color-brick);
  --color-accent-secondary-tint: var(--color-brick-tint);
  --color-link: var(--color-navy);
  --color-link-hover: var(--color-navy-dark);
  --color-hairline: var(--color-grey-200);
  --color-control-border: var(--color-grey-500);
  --color-scrim: #1f1e2166;

  /* Состояния */
  --color-focus: var(--color-navy);
  --color-focus-inverse: var(--color-white);
  --color-status-info-text: var(--color-navy);
  --color-status-info-bg: var(--color-navy-tint);
  --color-status-success-text: #006300;
  --color-status-success-bg: #e8f4e8;
  --color-status-warning-text: #7a4d00;
  --color-status-warning-bg: #fff4dc;
  --color-status-error-text: var(--color-brick);
  --color-status-error-bg: var(--color-brick-tint);

  /* Статусы карточек «Соглашения с РФ»: цвет текста с референса Натальи Пушкиной 23.10, 18:03
     (среднее самых темных 2% пикселей надписи). Контраст на фоне карточки #f5f5f5: 9.20, 5.07, 4.67, 8.66. */
  --color-agreement-signed: #163b95;
  --color-agreement-force: #24782f;
  --color-agreement-none: #696e7c;
  --color-agreement-memo: #582d95;
  --color-disabled-text: #8a8a8a;
  --color-disabled-bg: var(--color-grey-50);

  /* Карта: нейтральная основа, выбранная страна */
  --map-fill: var(--color-grey-200);
  --map-outline-selected: var(--color-grey-900);
  --map-fill-neutral: var(--color-grey-100);
  --map-stroke: var(--color-white);

  /* Границы стран при избирательной окраске (наведение на строку списка или страну): заливки прозрачные, белая граница на белом фоне не видна; 5,1:1 к белому */
  --map-stroke-spot: var(--color-grey-500);
  --map-stroke-width: 1px;
  --map-outline-selected-width: 2px;

  /* Слои карты: категориальные цвета регионов и валютных зон (validate_palette.js, поверхность #fff, все пары: полоса светлоты и порог различимости PASS,
     CVD у пары красный/зеленый 6.9, поэтому красный и зеленый стоят в несоседних регионах и у каждого значения есть подпись в легенде, подсказке и карточке) */
  --map-region-north: var(--chart-series-1);
  --map-region-west: var(--chart-series-3);
  --map-region-central: var(--chart-series-2);
  --map-region-east: #9b7bd6;
  --map-region-southern: var(--chart-series-4);
  --map-zone-xof: var(--chart-series-1);
  --map-zone-xaf: var(--chart-series-2);
  --map-zone-cma: var(--chart-series-3);

  /* Слой «Соглашения с РФ» своих цветов не имеет: заливки берутся из --color-agreement-* (те же, что у статусов в карточках, design.md 7.18.12),
     «нет / нет сведений» на карте светло-серый --map-fill.
     Штриховка «подписано, не вступило» светлыми линиями поверх синей заливки. */
  --map-hatch-line: var(--color-white);
  --map-marker-fill: var(--color-grey-500);
  --map-marker-size: 0.5rem;
  --map-marker-ring: var(--color-white);
  --map-marker-hit: 2.75rem;

  /* Графики. Категориальные цвета прошли validate_palette.js (поверхность #fff, все пары):
     контраст и расстояние для нормального зрения в норме, у желтого и бирюзового
     контраст ниже 3:1, поэтому всегда есть подписи и таблица; CVD в зоне 6-8 у пары красный/бирюзовый,
     поэтому у каждого ряда своя форма маркера */
  --chart-series-1: #2457b5;
  --chart-series-2: #eda100;
  --chart-series-3: #1baf7a;
  --chart-series-4: #e34948;
  --chart-single: var(--chart-series-1);
  --chart-grid: var(--color-grey-100);
  --chart-axis: var(--color-grey-300);
  --chart-label: var(--color-grey-600);
  --chart-line-width: 2px;
  --chart-marker-size: 8px;
  --chart-bar-height: 0.75rem;
  --chart-bar-radius: 2px;
  --chart-gap: 2px;

  /* Шрифты */
  --font-sans: "Fira Sans", system-ui, -apple-system, "Segoe UI", "Arial", sans-serif;
  --font-serif: "Lora", "Georgia", "Times New Roman", serif;
  --font-heading: var(--font-sans);
  --font-text: var(--font-serif);
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-strong: 600;
  --weight-bold: 700;

  /* Шкала размеров текста (мобильные значения, крупные растут плавно) */
  --text-xs: 0.75rem;
  --text-s: 0.875rem;
  --text-m: 1rem;
  --text-l: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --text-3xl: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
  --text-stat: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-medium: 1.4;
  --leading-normal: 1.5;
  --tracking-tight: -0.01em;
  --measure: 68ch;

  /* Отступы, шаг 4 px */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-3h: 0.625rem;
  --space-4: 1rem;
  --space-4h: 1.25rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Сетка */
  --container-max: 80rem;
  --container-text: 45rem;
  --gutter: 1rem;
  --section-gap: 3rem;
  --grid-gap: 1rem;

  /*
    Шапка закреплена сверху на всех ширинах (до lg ТЗ 24.10 07:33, с lg ТЗ 26.10 13:18): высота строки вместе с нижней линией
    и отступ, который она занимает у верхнего края окна (с безопасной зоной). С lg шапка 76 px (16 + 44 + 16), без линии и безопасной зоны.
  */
  --site-header-height: 3.5rem;
  --site-header-offset: calc(var(--site-header-height) + env(safe-area-inset-top, 0px));

  /* Формы, размеры элементов управления */
  --control-height: 2.75rem;
  --control-height-s: 2rem;
  --radius-s: 2px;
  --radius-m: 4px;
  --radius-tip: 0.625rem;
  --radius-round: 999px;
  --focus-width: 2px;
  --focus-offset: 2px;
  --shadow-raised: 0 1px 12px 0 #1f1e2114;
  --shadow-popover: 0 8px 24px 0 #1f1e212e;

  /*
    Темная подсказка: тултип карты (map.css, .map__tip) и информационный popover шапки (site-header.css, .site-header__info)
    берут фон, цвет текста, отступ, размер и интерлиньяж отсюда, радиус --radius-tip, шрифт наследуется (--font-heading).
    Значения тултипа карты прежние (ТЗ 26.10 18:48, п. 4.1: те же параметры, без новой системы подсказок).
    Компактный размер 13 px только у текста popover на телефоне (п. 6).
  */
  --tip-bg: #1d2523;
  --tip-color: var(--color-text-inverse);
  --tip-padding: var(--space-4);
  --tip-font-size: var(--text-s);
  --tip-font-size-compact: 0.8125rem;
  --tip-leading: 1.4;

  /* Слои */
  --z-raised: 10;
  --z-section-nav: 100;
  --z-header: 200;
  --z-popover: 300;

  /* Движение */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
}

@media (min-width: 48rem) {
  :root {
    --gutter: 1.5rem;
    --section-gap: 4.5rem;
    --grid-gap: 1.5rem;
  }
}

@media (min-width: 64rem) {
  :root {
    --gutter: 2rem;
    --section-gap: 6rem;
    --grid-gap: 2rem;
    --site-header-height: 4.75rem;
    --site-header-offset: var(--site-header-height);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
  }
}

/* Сброс, типографика элементов, фокус, движение. Значения только из tokens.css. */

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

html {
  text-size-adjust: 100%;
  scroll-behavior: smooth;

  /*
    Якоря и фокус не прячутся под закрепленной шапкой: отступ на ее высоту (--site-header-offset: 56 px до lg, 76 px с lg).
    --anchor-offset переопределяет страница страны (лента разделов), с обратным знаком его берут элементы самой шапки.
  */
  --anchor-offset: calc(var(--site-header-offset) + var(--space-5));

  scroll-padding-block-start: var(--anchor-offset);
}

body {
  display: flex;
  min-block-size: 100vh;
  flex-direction: column;
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: var(--text-m);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  font-variant-numeric: lining-nums;
}

[hidden] {
  display: none !important;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-strong);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

h1 {
  font-size: var(--text-3xl);
}

h2 {
  font-size: var(--text-2xl);
}

h3 {
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
}

h4 {
  font-size: var(--text-l);
  line-height: var(--leading-snug);
}

p {
  margin: 0;
  text-wrap: pretty;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

dl,
dd,
figure,
blockquote {
  margin: 0;
}

fieldset {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

legend {
  padding: 0;
}

/*
  Ссылки без подчеркивания, подчеркивание при наведении и при фокусе с клавиатуры (Мария Землянская, 23.10).
  :where(a) весит как один класс: ссылки, у которых блок сам задает text-decoration (шапка, навигация, кнопки, теги), остаются как были.
*/
a {
  color: var(--color-link);
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

:where(a):focus-visible {
  text-decoration: underline;
}

@media (hover: hover) {
  a:hover {
    color: var(--color-link-hover);
    text-decoration-thickness: 2px;
  }

  :where(a):hover {
    text-decoration: underline;
  }
}

img,
svg {
  max-inline-size: 100%;
}

img {
  display: block;
  block-size: auto;
}

button,
input,
select,
textarea {
  margin: 0;
  color: inherit;
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: default;
}

table {
  border-collapse: collapse;
}

summary {
  cursor: pointer;
}

mark {
  background: transparent;
  color: inherit;
}

:focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Контейнеры и каркас страницы. */

/* До lg внизу экрана фиксированный таббар (site-nav.css, пункт 3.5rem + линия 1 px + безопасная зона): отступ, чтобы он не закрывал подвал. */
body {
  padding-block-end: calc(3.5rem + 1px + env(safe-area-inset-bottom, 0px));
}

.page {
  flex: 1 0 auto;
  padding-block: var(--space-4) var(--section-gap);
}

.container {
  inline-size: 100%;
  max-inline-size: var(--container-max);
  margin-inline: auto;

  /* Боковые безопасные зоны (вырез iPhone в горизонтальной ориентации, viewport-fit=cover). */
  padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px));
}

.container--text {
  max-inline-size: calc(var(--container-text) + 2 * var(--gutter));
}

.home {
  display: grid;
  gap: var(--space-5);
}

.home__title {
  max-inline-size: var(--measure);
  margin-block-end: var(--space-2);
}

@media (min-width: 48rem) {
  .page {
    padding-block: var(--space-6) var(--section-gap);
  }

  .home {
    gap: var(--space-7);
  }
}

/* Правки дизайнеров 23.10: главная в одну раскладку с 64rem. */
@media (min-width: 64rem) {
  body {
    padding-block-end: 0;
  }

  .page:has(> .home) {
    padding-block: var(--space-4h);
  }

  .home {
    row-gap: var(--space-4h);
  }
}
.icon {
  display: inline-block;
  flex: none;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  vertical-align: -0.2em;
}

.skip-link {
  position: absolute;
  z-index: var(--z-popover);
  inset-block-start: var(--space-2);
  inset-inline-start: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  font-weight: var(--weight-strong);
  transform: translateY(-200%);
}

.skip-link:focus-visible {
  outline-color: var(--color-focus-inverse);
  transform: translateY(0);
}

.button {
  display: inline-flex;
  min-block-size: var(--control-height);
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 0;
  border-radius: var(--radius-s);
  background: var(--color-surface-muted);
  color: var(--color-text);
  font-size: var(--text-m);
  font-weight: var(--weight-strong);
  line-height: var(--leading-snug);
  text-align: center;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

.button__icon {
  margin-inline-start: calc(-1 * var(--space-1));
}

@media (hover: hover) {
  .button:hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
    text-decoration: none;
  }
}

.button:disabled {
  background: var(--color-disabled-bg);
  color: var(--color-disabled-text);
}

.button--primary {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
}

.button--primary:visited {
  color: var(--color-accent-contrast);
}

@media (hover: hover) {
  .button--primary:hover {
    background: var(--color-accent-hover);
    color: var(--color-accent-contrast);
  }
}

.button--primary:disabled {
  background: var(--color-disabled-bg);
  color: var(--color-disabled-text);
}

.button--text {
  background: transparent;
  color: var(--color-link);
}

@media (hover: hover) {
  .button--text:hover {
    background: transparent;
    color: var(--color-link-hover);
    text-decoration: underline;
  }
}

.button--text:disabled {
  background: transparent;
  color: var(--color-disabled-text);
}

.button--icon {
  inline-size: var(--control-height);
  padding: 0;
  background: transparent;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.tag {
  display: inline-flex;
  min-block-size: var(--control-height-s);
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 0;
  border-radius: var(--radius-round);
  background: var(--color-surface-muted);
  color: var(--color-text);
  font-size: var(--text-s);
  line-height: var(--leading-snug);
  text-decoration: none;
}

a.tag {
  color: var(--color-link);
}

.tag--accent {
  background: var(--color-accent-tint);
  color: var(--color-accent);
}

@media (hover: hover) {
  a.tag:hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
    text-decoration: none;
  }
}

.tag__remove {
  display: inline-flex;
  inline-size: var(--control-height-s);
  block-size: var(--control-height-s);
  flex: none;
  align-items: center;
  justify-content: center;
  margin-block: calc(-1 * var(--space-1));
  margin-inline: calc(-1 * var(--space-2)) calc(-1 * var(--space-3));
  padding: 0;
  border: 0;
  border-radius: var(--radius-round);
  background: transparent;
  color: inherit;
}

.tag__remove .icon {
  inline-size: 1rem;
  block-size: 1rem;
}

@media (hover: hover) {
  .tag__remove:hover {
    background: var(--color-surface-hover);
  }
}

/*
  Разделы сайта, одна навигация на всех ширинах.
  До lg (64rem) фиксированный нижний таббар (ТЗ дизайнеров 23.10 16:41): четыре равных пункта, иконка сверху, подпись снизу,
  светлый фон, тонкая линия сверху, отступ под Home Indicator. Высота пункта 3.5rem; тот же размер учтен
  в нижнем отступе страницы (layout.css), чтобы таббар не закрывал подвал и последние элементы.
  С lg строка меню в шапке по центру (ТЗ 23.10 20:06): текст без иконок, текущий раздел синий с тонким подчеркиванием.
*/

.site-nav {
  position: fixed;
  z-index: var(--z-header);
  inset: auto 0 0;
  padding: 0 env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
  border-block-start: 1px solid var(--color-hairline);
  background: var(--color-bg);
}

.site-nav__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
}

.site-nav__link {
  display: flex;
  block-size: 3.5rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding-inline: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  text-decoration: none;
  white-space: nowrap;
}

.site-nav__icon {
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

.site-nav__link[aria-current="page"] {
  color: var(--color-accent);
  font-weight: var(--weight-strong);
}

.site-nav__label--full {
  display: none;
}

@media (hover: hover) {
  .site-nav__link:hover {
    color: var(--color-link);
  }
}

@media (min-width: 64rem) {
  .site-nav {
    position: static;
    display: flex;
    min-inline-size: 0;
    flex: 1 1 auto;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
  }

  /*
    Промежуток 48 px. С третьей целью в правой группе шапки (ТЗ 26.10 18:48) на 1024–1061 px меню в RU не помещалось между группами
    с промежутками 32 px, поэтому там промежуток сужается по ширине окна (на 1024 px 35 px), с 1062 px прежние 48 px.
  */
  .site-nav__list {
    display: flex;
    gap: clamp(var(--space-6), 33.33vw - 19.13rem, var(--space-7));
  }

  .site-nav__link {
    block-size: var(--control-height);
    flex-direction: row;
    padding: 0;
    color: var(--color-text);
    font-size: var(--text-s);
    line-height: var(--leading-normal);

    /* Строка меню в закрепленной шапке: фокус с клавиатуры не прокручивает страницу (см. site-header.css). */
    scroll-margin-block-start: calc(-1 * var(--anchor-offset));
  }

  .site-nav__icon,
  .site-nav__label--short {
    display: none;
  }

  .site-nav__label--full {
    display: inline;
  }

  .site-nav__link[aria-current="page"] {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.5em;
  }

  @media (hover: hover) {
    .site-nav__link:hover {
      text-decoration: underline;
      text-decoration-thickness: 2px;
      text-underline-offset: 0.5em;
    }
  }
}

/* Переключатель языка: одна ссылка на ту же страницу другого языка (в RU «EN», в EN «RU»), ТЗ 23.10 20:06 разд. 5. */

.lang-switch {
  display: flex;
  align-items: center;
}

/*
  До lg (ТЗ 24.10 07:33 разд. 5): 14 px, вес 500, цель 44 × 44 px. С lg как в шапке по референсу 23.10: вес 400.
  Цель 44 × 44 px на всех ширинах, как у лупы и «i» (ТЗ 26.10 18:48; с lg до 26.10 ширина была 40 px).
*/
.lang-switch__link {
  display: inline-flex;
  min-block-size: var(--control-height);
  min-inline-size: var(--control-height);
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: var(--text-s);
  font-weight: var(--weight-medium);
  text-decoration: none;

  /* В закрепленной шапке фокус не прокручивает страницу (см. site-header.css). */
  scroll-margin-block-start: calc(-1 * var(--anchor-offset));
}

@media (min-width: 64rem) {
  .lang-switch__link {
    font-weight: var(--weight-regular);
  }
}

@media (hover: hover) {
  .lang-switch__link:hover {
    color: var(--color-link);
    text-decoration: underline;
  }
}

/*
  Подвал по ТЗ Натальи Пушкиной 26.10 19:42 и визуальному референсу «Минималистичный футер «Ведомостей»» (design.md 7.2, 7.18.11).
  Три уровня, между ними тонкая линия:
  1) четыре колонки: «При поддержке» (логотип РЭЦ), «Проекты», «Мобильное приложение», «Социальные сети»;
  2) «Юридическая информация» и сведения сетевого издания; 3) строка правообладателя.
  Уровень 1: до md одна колонка, с md сетка 2 × 2, с lg четыре колонки в строку; между соседними колонками тонкая вертикальная линия.
  Заголовок и содержимое каждой колонки лежат в двух общих строках сетки (subgrid), поэтому заголовки одного ряда стоят на одной линии,
  а содержимое начинается на одном отступе под ними. Фон, шрифт, цвета, отступы и линии только из токенов, без карточек и теней.
*/

.site-footer {
  margin-block-start: var(--section-gap);
  background: var(--color-surface-muted);
}

.site-footer__inner {
  max-inline-size: var(--container-max);
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px));
}

.site-footer__level {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--space-5);
  padding-block: var(--space-5);
}

.site-footer__level + .site-footer__level {
  border-block-start: 1px solid var(--color-hairline);
}

/* Колонка занимает две строки сетки уровня: заголовок и содержимое. */
.site-footer__column {
  display: grid;
  min-inline-size: 0;
  grid-row: span 2;
  grid-template-rows: subgrid;
  align-content: start;
  row-gap: var(--space-3);
}

.site-footer__title {
  color: var(--color-text);
  font-size: var(--text-s);
  font-weight: var(--weight-strong);
  line-height: var(--leading-snug);
  letter-spacing: normal;
}

/* Составной логотип Группы РЭЦ (РЭЦ, ЭКСАР, Росэксимбанк) как есть: задается только высота, ширина по пропорции файла, по левому краю. */
.site-footer__logo {
  display: block;
  justify-self: start;
  inline-size: auto;
  max-inline-size: 100%;
  block-size: 3rem;
}

/* Проекты: обычные текстовые ссылки столбцом, цвет как у ссылок меню в шапке (текст, при наведении акцент); до lg цель 44 px. */
.site-footer__project-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.site-footer__project-link {
  display: inline-flex;
  min-block-size: var(--control-height);
  align-items: center;
  color: var(--color-text);
  font-size: var(--text-s);
  line-height: var(--leading-snug);
}

/*
  Магазины приложений: знак сервиса и название в тонкой рамке, одна высота у всех; до xl сетка 2 × 2 из колонок равной ширины
  (по самому широкому элементу), с xl четыре в строку. Знаки RuStore, AppGallery и Google Play в фирменных цветах (правила брендов
  не разрешают перекраску), знак Apple одноцветный цвета текста; при наведении меняются только цвет названия и рамки.
*/
.site-footer__apps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-self: start;
  gap: var(--space-2);
  inline-size: max-content;
  max-inline-size: 100%;
}

.site-footer__app-link {
  display: flex;
  min-block-size: var(--control-height);
  align-items: center;
  gap: var(--space-2);
  padding-inline: var(--space-3);
  border: 1px solid var(--color-grey-300);
  border-radius: var(--radius-m);
  color: var(--color-text);
  font-size: var(--text-s);
  line-height: var(--leading-snug);
  white-space: nowrap;
}

.site-footer__app-icon {
  flex: none;
  inline-size: 1rem;
  block-size: 1rem;
}

.site-footer__app-icon--mono {
  color: var(--color-text);
}

/* Соцсети: знак vedomosti.ru в тонком круге того же цвета, что рамки магазинов; цель 44 × 44 px, в строку с переносом. */
.site-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.site-footer__social-link {
  display: grid;
  inline-size: var(--control-height);
  block-size: var(--control-height);
  place-items: center;
  border-radius: var(--radius-round);
  color: var(--color-text);
}

.site-footer__social-circle,
.site-footer__social-icon {
  grid-area: 1 / 1;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  fill: currentcolor;
}

.site-footer__social-circle {
  color: var(--color-grey-300);
}

/* Знак MAX на vedomosti.ru вписан в круг меньшим размером (16 из 30 px), пропорция та же. */
.site-footer__social-icon--small {
  inline-size: 1.2rem;
  block-size: 1.2rem;
}

@media (hover: hover) {
  .site-footer__project-link:hover,
  .site-footer__social-link:hover {
    color: var(--color-link);
  }

  .site-footer__app-link:hover {
    border-color: var(--color-link);
    color: var(--color-link);
    text-decoration: none;
  }

  .site-footer__social-link:hover > .site-footer__social-circle {
    color: var(--color-link);
  }
}

/* Юридические сведения и строка правообладателя: 12 px, межстрочный 1.5, вторичный цвет (6:1 на фоне подвала). */
.site-footer__legal {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.site-footer__legal-text,
.site-footer__copyright {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  overflow-wrap: break-word;
}

/*
  Ссылки в сером тексте отличаются от него по яркости меньше чем в 3 раза, поэтому подчеркнуты всегда (WCAG 1.4.1),
  в отличие от общего правила ссылок без подчеркивания.
*/
.site-footer__legal-link {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

/* Подписи «Founder:… Phone:» на EN (ТЗ 28.10): 600 явно, иначе браузерный bold у b берет начертание Fira Sans 700. */
.site-footer__legal-label {
  font-weight: var(--weight-strong);
}

/* Номер телефона не переносится (символы как в ТЗ, без неразрывных пробелов). */
.site-footer__legal-link--tel {
  white-space: nowrap;
}

@media (hover: hover) {
  .site-footer__legal-link:hover {
    color: var(--color-link-hover);
  }
}

/* С md: уровень 1 сеткой 2 × 2 (перед правой колонкой ряда тонкая вертикальная линия), юридический уровень в две колонки без линии, как на референсе. */
@media (min-width: 48rem) {
  .site-footer__level {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0;
  }

  .site-footer__level--copyright {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-footer__column--support,
  .site-footer__column--apps,
  .site-footer__column--legal {
    padding-inline-end: var(--space-5);
  }

  .site-footer__column--projects,
  .site-footer__column--social {
    padding-inline-start: var(--space-5);
    border-inline-start: 1px solid var(--color-hairline);
  }

  .site-footer__column--outlet {
    padding-inline-start: var(--space-5);
  }

  .site-footer__logo {
    block-size: 3.5rem;
  }
}

/*
  С lg четыре колонки в строку: каждая не уже своего содержимого (ссылки и элементы не переносятся), свободное место делится поровну.
  Ссылки на проекты и магазины ниже (32 px, вторичные цели, раздел 6 design.md); ссылки проектов стоят вплотную,
  без промежутка (ответ Натальи Пушкиной 27.10), цель каждой 32 px, design.md 7.18.12.
*/
@media (min-width: 64rem) {
  .site-footer__level--main {
    grid-template-columns: repeat(4, minmax(max-content, 1fr));
  }

  .site-footer__column--apps {
    padding-inline-start: var(--space-5);
    border-inline-start: 1px solid var(--color-hairline);
  }

  .site-footer__column--projects {
    padding-inline-end: var(--space-5);
  }

  .site-footer__logo {
    block-size: 4.1875rem;
  }

  .site-footer__project-link,
  .site-footer__app-link {
    min-block-size: var(--control-height-s);
  }

  /*
    Магазины и соцсети на одной горизонтали (27.10): строка соцсетей это ссылки высотой --control-height (44 px) с кругом
    по центру, строка магазинов 32 px. Первая строка магазинов опущена на половину разницы, ее центр совпадает с центром кругов;
    размеры элементов и зазоры прежние.
  */
  .site-footer__apps {
    margin-block-start: calc((var(--control-height) - var(--control-height-s)) / 2);
  }
}

@media (min-width: 80rem) {
  .site-footer__apps {
    grid-template-columns: repeat(4, auto);
  }
}

/* Хлебные крошки над заголовком страницы: «Страны / Регион». Без плашек, рамок и иконок, серые, первый элемент чуть темнее. */

.breadcrumbs {
  margin-block-end: var(--space-2);
  font-size: var(--text-s);
  line-height: var(--leading-medium);
}

.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-disabled-text);
}

/* Разделитель «/» с одинаковыми отступами слева и справа. */
.breadcrumbs__item + .breadcrumbs__item::before {
  content: "/";
  margin-inline: var(--space-2);
}

.breadcrumbs__link {
  color: var(--color-text-muted);
}

@media (hover: hover) {
  .breadcrumbs__link:hover {
    color: var(--color-text);
  }
}

@media (min-width: 48rem) {
  .breadcrumbs {
    margin-block-end: var(--space-3);
  }
}

.page-head {
  display: grid;
  gap: var(--space-2);
  max-inline-size: var(--measure);
  margin-block-end: var(--space-4);
}

.page-head__title {
  font-size: var(--text-3xl);
}

.page-head__lead {
  font-family: var(--font-text);
  font-size: var(--text-m);
  line-height: var(--leading-normal);
}

.page-head__meta {
  color: var(--color-disabled-text);
  font-size: var(--text-s);
}

@media (min-width: 48rem) {
  .page-head {
    gap: var(--space-3);
    margin-block-end: var(--space-6);
  }

  .page-head__lead {
    font-size: var(--text-l);
  }
}

.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-end: var(--space-6);
}

.page-actions__print {
  margin-inline-start: calc((var(--control-height) - 1.25rem) / -2);
  color: var(--color-text-muted);
}

.page-actions .button--primary {
  font-weight: var(--weight-medium);
}

.page-head .page-actions {
  margin-block-end: 0;
}

/* Строка под шапкой: заголовок страницы слева, действия (сравнение, печать) справа. */

.page-bar {
  display: grid;
  gap: var(--space-4);
  margin-block-end: var(--space-4);
}

.page-bar .page-actions {
  margin-block-end: 0;
}

/* Одна небольшая кнопка (печать) остается справа от заголовка и на телефоне. */
.page-bar--inline {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-3);
  min-block-size: 5.75rem;
}

.page-bar--inline .page-head {
  margin-block-end: 0;
}

@media (min-width: 48rem) {
  .page-bar {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--space-5);
  }
}

.stat {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-3h);
  padding: var(--space-4);
  border-radius: var(--radius-m);
  background: var(--color-surface-muted);
}

.stat > .source-note {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-end: var(--space-3);
}

.stat__label {
  color: var(--color-text-muted);
  font-size: var(--text-s);
  line-height: var(--leading-snug);
}

.stat__value {
  font-size: var(--text-stat);
  font-weight: var(--weight-strong);
  line-height: var(--leading-tight);
  font-variant-numeric: lining-nums proportional-nums;
}

.stat__unit {
  color: var(--color-text-muted);
  font-size: var(--text-s);
  font-weight: var(--weight-regular);
}

.stat__period {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.stat__origin {
  margin-block-start: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.stat__note {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.stat__source {
  display: none;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.stat-grid {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 40rem) {
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .stat-grid {
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--grid-gap);
  }
}

/*
  Подсказка об источнике без скрипта.
  Разметка: .source-note > button.source-note__trigger[popovertarget] + span.source-note__popover[popover].
  Мышь: показ по :hover, клавиатура: по :focus-visible кнопки, касание и Enter: нативный popover.
  Авторский display перекрывает UA-правило [popover]:not(:popover-open) { display: none }.
*/

.source-note {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}

.source-note__trigger {
  display: inline-flex;
  inline-size: var(--control-height);
  block-size: var(--control-height);
  align-items: center;
  justify-content: center;
  margin: calc((1.25rem - var(--control-height)) / 2);
  padding: 0;
  border: 0;
  border-radius: var(--radius-round);
  background: transparent;
  color: var(--color-text-subtle);
  transition: color var(--duration-fast) var(--ease-out);
}

.source-note__trigger .icon {
  inline-size: 1rem;
  block-size: 1rem;
}

.source-note__trigger:focus-visible,
.source-note__trigger[aria-expanded="true"] {
  color: var(--color-accent);
}

@media (hover: hover) {
  .source-note__trigger:hover {
    color: var(--color-accent);
  }
}

/* До lg низ подсказки над нижним таббаром (site-nav.css: пункт 3.5rem, линия 1 px, безопасная зона), с lg таббара нет. */
.source-note__popover {
  position: fixed;
  z-index: var(--z-popover);
  inset: auto var(--gutter) calc(var(--space-4) + 3.5rem + 1px + env(safe-area-inset-bottom, 0px));
  inline-size: auto;
  block-size: auto;
  max-block-size: 60vh;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  overflow: auto;
  border: 0;
  border-radius: var(--radius-m);
  background: var(--color-surface-inverse);
  box-shadow: var(--shadow-popover);
  color: var(--color-text-inverse);
  font-family: var(--font-heading);
  font-size: var(--text-s);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  text-align: start;
  overflow-wrap: anywhere;
}

.source-note__popover:popover-open {
  display: block;
}

@media (min-width: 64rem) {
  .source-note__popover {
    inset-block-end: var(--space-4);
  }
}

.source-note__popover :focus-visible {
  outline-color: var(--color-focus-inverse);
}

.source-note__line {
  display: block;
}

.source-note__line + .source-note__line {
  margin-block-start: var(--space-1);
}

.source-note__term {
  color: var(--color-text-inverse-muted);
}

.source-note__link {
  color: var(--color-text-inverse);
}

@media (hover: hover) and (pointer: fine) {
  .source-note:hover .source-note__popover,
  .stat:hover .source-note__popover,
  .source-note:has(.source-note__trigger:focus-visible) .source-note__popover {
    display: block;
  }
}

@supports (anchor-scope: --source) {
  @media (min-width: 48rem) {
    .source-note {
      anchor-scope: --source;
    }

    .source-note__trigger {
      anchor-name: --source;
    }

    .source-note__popover {
      position-anchor: --source;
      position-area: block-end span-inline-end;
      position-try-fallbacks: flip-block, flip-inline;
      inset: auto;
      inline-size: max-content;
      max-inline-size: min(22rem, calc(100vw - 2 * var(--gutter)));

      /* Нижнее поле на высоту таббара: если под кнопкой места до таббара нет, подсказка переворачивается вверх. */
      margin: var(--space-1) 0 calc(var(--space-1) + 3.5rem + 1px + env(safe-area-inset-bottom, 0px));
    }
  }

  @media (min-width: 64rem) {
    .source-note__popover {
      margin: var(--space-1) 0;
    }
  }
}

/* Браузеры без popover (Safari и iOS до 17): подсказка скрыта и раскрывается по наведению и фокусу. */
@supports not selector(:popover-open) {
  .source-note__popover {
    display: none;
  }

  .source-note:hover .source-note__popover,
  .source-note:focus-within .source-note__popover {
    display: block;
  }
}

.data-table {
  inline-size: 100%;
  font-size: var(--text-s);
  font-variant-numeric: tabular-nums;
}

.data-table__caption {
  padding-block-end: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-s);
  text-align: start;
}

.data-table__head {
  padding: var(--space-2) var(--space-3);
  border-block-end: 1px solid var(--color-text-subtle);
  color: var(--color-text-muted);
  font-weight: var(--weight-strong);
  text-align: start;
  vertical-align: bottom;
}

.data-table__head--number,
.data-table__cell--number {
  text-align: end;
}

.data-table__row-head {
  padding: var(--space-3);
  border-block-end: 1px solid var(--color-hairline);
  font-weight: var(--weight-strong);
  text-align: start;
  vertical-align: top;
}

.data-table__cell {
  padding: var(--space-3);
  border-block-end: 1px solid var(--color-hairline);
  vertical-align: top;
}

/* Ячейка-заголовок строки (год в таблице сравнения): вес 600 явно, иначе браузерный bold у th берет начертание Fira Sans 700. */
.data-table__cell--head {
  font-weight: var(--weight-strong);
}

.disclosure {
  border-radius: var(--radius-m);
  background: var(--color-surface-muted);
}

.disclosure__summary {
  display: flex;
  min-block-size: var(--control-height);
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-4);
  list-style: none;
  font-weight: var(--weight-strong);
  line-height: var(--leading-snug);
}

.disclosure__summary::-webkit-details-marker {
  display: none;
}

.disclosure__summary::marker {
  content: "";
}

.disclosure__title {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.disclosure__icon {
  transition: transform var(--duration-base) var(--ease-out);
}

.disclosure[open] .disclosure__icon {
  transform: rotate(180deg);
}

.disclosure__body {
  padding: var(--space-1) var(--space-4) var(--space-4);
  overflow-x: auto;
}

@media (hover: hover) {
  .disclosure__summary:hover {
    background: var(--color-surface-hover);
    border-radius: var(--radius-m);
  }
}

/* Закрепленное меню разделов страны. Прилипает обертка .country-page__nav (см. country-page.css). */

.section-nav {
  background: var(--color-bg);
}

.section-nav__list {
  display: flex;
  gap: var(--space-1);
  padding-inline: var(--gutter);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.section-nav__list::-webkit-scrollbar {
  display: none;
}

.section-nav__item {
  flex: none;
  scroll-snap-align: start;
}

.section-nav__link {
  display: flex;
  min-block-size: var(--control-height);
  align-items: center;
  padding-inline: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-s);
  text-decoration: none;
  white-space: nowrap;
}

.section-nav__link--current {
  color: var(--color-accent);
  font-weight: var(--weight-strong);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}

.section-nav__link:focus-visible {
  text-decoration: underline;
}

@media (hover: hover) {
  .section-nav__link:hover {
    color: var(--color-link);
    text-decoration: underline;
  }
}

@media (min-width: 64rem) {
  .section-nav__list {
    flex-direction: column;
    gap: 0;
    padding-inline: 0;
    overflow: visible;
  }

  .section-nav__link {
    padding-inline: var(--space-3);
    border-inline-start: 2px solid var(--color-hairline);
    white-space: normal;
  }

  .section-nav__link--current {
    border-inline-start-color: var(--color-accent);
    text-decoration: none;
  }
}

.country-page__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

/* До lg лента разделов прилипает сразу под закрепленной шапкой (z-index ниже шапки). */
.country-page__nav {
  position: sticky;
  z-index: var(--z-section-nav);
  inset-block-start: var(--site-header-offset);
  margin-inline: calc(-1 * var(--gutter));
  box-shadow: var(--shadow-raised);
}

.country-page__content {
  min-inline-size: 0;
}

/* Переход по ленте разделов до lg: заголовок раздела встает под шапкой и лентой (высота ленты равна цели нажатия 44 px). */
html:has(.country-page__nav) {
  --anchor-offset: calc(var(--site-header-offset) + var(--control-height) + var(--space-5));
}

@media (min-width: 64rem) {
  .country-page__layout {
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: var(--space-7);
    align-items: start;
  }

  /* С lg меню разделов слева прилипает под закрепленной шапкой (76 px) с зазором 24 px; заголовок раздела после перехода встает так же. */
  .country-page__nav {
    inset-block-start: calc(var(--site-header-offset) + var(--space-5));
    margin-inline: 0;
    box-shadow: none;
  }

  /* С lg ленты нет, остается отступ под шапку: --site-header-offset (с lg высота закрепленной шапки, 76 px). */
  html:has(.country-page__nav) {
    --anchor-offset: calc(var(--site-header-offset) + var(--space-5));
  }
}

.country-block {
  margin-block-end: var(--space-7);
}

.country-block__title {
  margin-block-end: var(--space-3);
  font-size: var(--text-2xl);
}

.country-block__subtitle {
  margin-block: var(--space-6) var(--space-3);
}

/* Подзаголовок и кнопка источника в одну строку: кнопка сразу после текста. */
.country-block__subhead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-1);
  margin-block: var(--space-6) var(--space-3);
}

.country-block__subhead .country-block__subtitle {
  margin-block: 0;
}

.country-block__note {
  margin-block-end: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-s);
}

.country-block__empty {
  color: var(--color-text-muted);
}

.country-block__quote {
  max-inline-size: var(--measure);
  padding: var(--space-4);
  border-radius: var(--radius-m);
  background: var(--color-surface-muted);
  font-family: var(--font-text);
  font-size: var(--text-s);
}

.country-block > .chart,
.country-block > .stat-grid,
.country-block > .agreement-grid,
.country-block > .topic-list {
  margin-block-start: var(--space-4);
}

.country-block__columns {
  display: grid;
  gap: var(--space-5);
}

.country-block__column {
  min-inline-size: 0;
}

@media (min-width: 64rem) {
  .country-block {
    margin-block-end: var(--space-8);
  }
}

@media (min-width: 80rem) {
  .country-block__columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
  }
}

.prose {
  display: grid;
  max-inline-size: var(--measure);
  gap: var(--space-3);
  margin-block-end: var(--space-4);
  font-family: var(--font-text);
  font-weight: var(--weight-regular);
}

.prose__list {
  display: grid;
  gap: var(--space-2);
  padding-inline-start: var(--space-5);
  list-style: disc;
}

.prose__text,
.prose__item {
  line-height: var(--leading-normal);
}

.topic-list {
  display: grid;
  gap: var(--space-2);
}

.topic-list__item {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-m);
  background: var(--color-surface-muted);
}

@media (min-width: 48rem) {
  .topic-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 80rem) {
  .topic-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Список «термин — значение» страницы страны (валюта, отрасли, торговля, стимулы). Тонкая линия между строками, как в таблице. */

.fact-list {
  display: grid;
  margin-block-start: var(--space-4);
  border-block-start: 1px solid var(--color-hairline);
}

.fact-list__row {
  display: grid;
  gap: var(--space-1);
  padding-block: var(--space-3);
  border-block-end: 1px solid var(--color-hairline);
}

.fact-list__term {
  color: var(--color-text-muted);
  font-size: var(--text-s);
  line-height: var(--leading-snug);
}

.fact-list__value {
  min-inline-size: 0;
  overflow-wrap: anywhere;
  font-variant-numeric: lining-nums proportional-nums;
}

/* Плашки в строку с переносом (выгрузка Натальи Пушкиной 23.10, 17:07: «Тип меры» в «Стимулах»). */
.fact-list__value--tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.fact-list__period,
.fact-list__note {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.fact-list__period {
  margin-inline: var(--space-1) var(--space-2);
}

.fact-list__note {
  display: block;
  margin-block-start: var(--space-1);
}

@media (min-width: 48rem) {
  .fact-list__row {
    grid-template-columns: minmax(10rem, 15rem) minmax(0, 1fr);
    gap: var(--space-4);
  }
}

/* Государственные программы внутри значения fact-list. */

.program-list {
  display: grid;
  gap: var(--space-3);
}

.program-list__item {
  display: grid;
  gap: var(--space-1);
}

.program-list__name {
  line-height: var(--leading-snug);
}

.program-list__term,
.program-list__text {
  color: var(--color-text-muted);
  font-size: var(--text-s);
  line-height: var(--leading-snug);
}

/* Структура ВВП одной полосой: сектора подписаны в легенде значениями, цвет только помогает искать. */

.stack-chart {
  display: grid;
  gap: var(--space-3);
}

.stack-chart__track {
  display: block;
  inline-size: 100%;
  block-size: 1.5rem;
  border-radius: var(--radius-m);
}

.stack-chart__segment {
  stroke: var(--color-bg);
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
}

.stack-chart__segment--s1 {
  fill: var(--chart-series-1);
}

.stack-chart__segment--s2 {
  fill: var(--chart-series-2);
}

.stack-chart__segment--s3 {
  fill: var(--chart-series-3);
}

.stack-chart__segment--s4 {
  fill: var(--chart-series-4);
}

.stack-chart__segment--s5 {
  fill: var(--color-grey-500);
}

.stack-chart__legend {
  display: grid;
  gap: var(--space-2) var(--space-5);
}

.stack-chart__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--text-s);
}

.stack-chart__swatch {
  flex: none;
  inline-size: 0.75rem;
  block-size: 0.75rem;
  align-self: center;
  border-radius: var(--radius-s);
}

.stack-chart__swatch--s1 {
  background: var(--chart-series-1);
}

.stack-chart__swatch--s2 {
  background: var(--chart-series-2);
}

.stack-chart__swatch--s3 {
  background: var(--chart-series-3);
}

.stack-chart__swatch--s4 {
  background: var(--chart-series-4);
}

.stack-chart__swatch--s5 {
  background: var(--color-grey-500);
}

.stack-chart__value {
  font-weight: var(--weight-strong);
  font-variant-numeric: lining-nums tabular-nums;
}

@media (min-width: 40rem) {
  .stack-chart__legend {
    grid-auto-flow: column;
    justify-content: start;
  }
}

/*
  Статус соглашения с РФ: обычный полужирный текст без плашки, цвет по смысловой категории.
  Один набор модификаторов на оба вида показа: компактный блок в карточке страны на карте (map-view__agreement-status)
  и подробные карточки страницы страны (agreement-card__status). Модификатор (tone) считает
  agreementStatus в src/widgets/shared/agreements.js; токены --color-agreement-* в tokens.css, контраст на #f5f5f5 не ниже 4,5:1.
*/
.agreement-status {
  font-weight: var(--weight-strong);
}

.agreement-status--force {
  color: var(--color-agreement-force);
}

.agreement-status--signed {
  color: var(--color-agreement-signed);
}

.agreement-status--memo {
  color: var(--color-agreement-memo);
}

.agreement-status--none {
  color: var(--color-agreement-none);
}

/* Соглашения с РФ: четыре карточки (защита инвестиций, налоги, визы, мирный атом) и список иных соглашений. */

/*
  ТЗ 23.10 (Наталья Пушкина, 18:03): заголовок, описание, статус внизу. Карточки ряда делят три строки сетки (subgrid),
  поэтому заголовки, описания и статусы одного ряда начинаются на одних линиях при любой длине текста,
  высота строки берется по самому высокому элементу ряда. Отступы у всех карточек одинаковые.
*/
.agreement-grid {
  display: grid;
  gap: var(--space-3);
}

.agreement-grid__item {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: var(--space-4);
}

.agreement-card {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: var(--space-4);
  padding: var(--space-5) var(--space-4);
  border-radius: var(--radius-m);
  background: var(--color-surface-muted);
}

.agreement-card__title {
  grid-row: 1;
  color: var(--color-text);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
}

.agreement-card__body {
  grid-row: 2;
  min-inline-size: 0;
}

/* Цвет статуса дает общий блок agreement-status (agreement-status.css), тот же, что в карточке страны на карте. */
.agreement-card__status {
  grid-row: 3;
  font-size: var(--text-s);
  font-weight: var(--weight-strong);
  line-height: var(--leading-medium);
}

.agreement-card__text,
.agreement-card__list {
  color: var(--color-text-muted);
  font-size: var(--text-m);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  overflow-wrap: anywhere;
}

.agreement-card__list {
  display: grid;
  gap: var(--space-1);
}

.agreement-list {
  display: grid;
}

.agreement-list__item {
  padding-block: var(--space-2);
  border-block-end: 1px solid var(--color-hairline);
  font-size: var(--text-s);
  line-height: var(--leading-snug);
}

@media (min-width: 40rem) {
  .agreement-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 80rem) {
  .agreement-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.rec-section {
  font-family: var(--font-text);
  font-weight: var(--weight-regular);
}

.rec-section__title {
  margin-block: var(--space-7) var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
}

.rec-section__text {
  margin-block-start: var(--space-4);
}

.rec-section__list {
  display: grid;
  gap: var(--space-3);
  margin-block-start: var(--space-4);
  padding-inline-start: var(--space-5);
  list-style: disc;
}

.rec-section .page-head__title {
  margin-block-end: var(--space-5);
}

/* Обертка графика (design.md 7.14) и общие элементы графика сравнения. */

.chart {
  max-inline-size: 100%;
  margin-block-end: var(--space-6);
}

.chart__title {
  font-size: var(--text-xl);
}

.chart__caption {
  margin-block: var(--space-1) var(--space-4);
  color: var(--chart-label);
  font-size: var(--text-s);
}

.chart__controls {
  margin-block-end: var(--space-4);
}

.chart__figure {
  margin-block-end: var(--space-4);
}

.chart__unit {
  margin-block-end: var(--space-1);
  color: var(--chart-label);
  font-size: var(--text-xs);
}

.chart__note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-block-start: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-s);
}

.chart__note .icon {
  inline-size: 1rem;
  block-size: 1rem;
  margin-block-start: 0.15rem;
}

.chart__table {
  margin-block-start: var(--space-3);
}

.chart--export .chart__figure--index {
  display: none;
}

.chart--export:has(.segmented__input--index:checked) .chart__figure--index {
  display: block;
}

.chart--export:has(.segmented__input--index:checked) .chart__figure--sum {
  display: none;
}

.chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-block-end: var(--space-3);
  font-size: var(--text-s);
}

.chart__legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.chart__frame {
  inline-size: 100%;
}

.chart__svg {
  display: block;
  max-inline-size: none;
  overflow: visible;
}

.chart__gridline {
  stroke: var(--chart-grid);
  stroke-width: 1;
}

.chart__gridline--base {
  stroke: var(--chart-axis);
}

.chart__tick {
  fill: var(--chart-label);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.chart__label {
  fill: var(--color-text);
  font-family: var(--font-heading);
  font-size: var(--text-s);
}

.chart__line {
  fill: none;
  stroke-width: var(--chart-line-width);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chart__line--s1 {
  stroke: var(--chart-series-1);
}

.chart__line--s2 {
  stroke: var(--chart-series-2);
}

.chart__line--s3 {
  stroke: var(--chart-series-3);
}

.chart__line--s4 {
  stroke: var(--chart-series-4);
}

.chart__point {
  stroke: var(--color-bg);
  stroke-width: var(--chart-gap);
}

.chart__point--s1,
.chart__mark--s1 {
  fill: var(--chart-series-1);
}

.chart__point--s2,
.chart__mark--s2 {
  fill: var(--chart-series-2);
}

.chart__point--s3,
.chart__mark--s3 {
  fill: var(--chart-series-3);
}

.chart__point--s4,
.chart__mark--s4 {
  fill: var(--chart-series-4);
}

.chart__mark {
  flex: none;
}

/* Горизонтальные столбцы страницы страны: общая шкала 0–100 %, один цвет. */

.bar-chart {
  display: grid;
  max-inline-size: 44rem;
  gap: var(--space-3);
}

.bar-chart__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-1) var(--space-3);
}

.bar-chart__label {
  grid-column: 1 / -1;
  font-size: var(--text-s);
  line-height: var(--leading-snug);
}

.bar-chart__track {
  inline-size: 100%;
  block-size: var(--chart-bar-height);
  background: var(--chart-grid);
}

.bar-chart__bar {
  fill: var(--chart-single);
}

.bar-chart__value {
  min-inline-size: 4rem;
  font-size: var(--text-s);
  font-weight: var(--weight-strong);
  font-variant-numeric: tabular-nums;
  text-align: end;
}

@media (min-width: 48rem) {
  .bar-chart__row {
    grid-template-columns: minmax(10rem, 16rem) minmax(0, 1fr) 4.5rem;
    gap: var(--space-4);
  }

  .bar-chart__label {
    grid-column: auto;
  }
}

/*
  Линия экспорта страницы страны: два SVG из генератора. Узкий (viewBox 360) до md, широкий (viewBox 760) с md на всю ширину колонки.
  Размер подписей задан в единицах viewBox (13,4) так, чтобы на экране он был не меньше 12 px: узкий график от 343 px шириной, широкий от 645 px; на 1440 подписи около 16 px.
*/

.line-chart {
  display: block;
  inline-size: 100%;
  block-size: auto;
  overflow: visible;
}

.line-chart--narrow {
  max-inline-size: 30rem;
}

.line-chart--wide {
  display: none;
}

@media (min-width: 48rem) {
  .line-chart--narrow {
    display: none;
  }

  .line-chart--wide {
    display: block;
  }
}

.line-chart__axis {
  stroke: var(--chart-axis);
  stroke-width: 1;
}

.line-chart__grid {
  stroke: var(--chart-grid);
  stroke-width: 1;
}

.line-chart__tick,
.line-chart__label {
  fill: var(--chart-label);
  font-family: var(--font-heading);
  font-size: 13.4px;
  font-variant-numeric: tabular-nums;
}

.line-chart__label {
  fill: var(--color-text);
}

.line-chart__line {
  fill: none;
  stroke: var(--chart-single);
  stroke-width: var(--chart-line-width);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.line-chart__marker {
  fill: var(--chart-single);
  stroke: var(--color-bg);
  stroke-width: var(--chart-gap);
}

.line-chart__hit {
  fill: transparent;
}

/* Переключатель на радио-кнопках: работает без скрипта. */

.segmented {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.segmented__input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.segmented__label {
  display: inline-flex;
  min-block-size: var(--control-height);
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-s);
  background: var(--color-surface-muted);
  cursor: pointer;
  font-size: var(--text-s);
  text-align: center;
}

.segmented__input:checked + .segmented__label {
  background: var(--color-accent-tint);
  color: var(--color-accent);
  font-weight: var(--weight-medium);
}

.segmented__input:checked + .segmented__label::before {
  content: "";
  inline-size: 0.3rem;
  block-size: 0.6rem;
  margin-block-end: 0.15rem;
  border: solid currentcolor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.segmented__input:focus-visible + .segmented__label {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}

@media (hover: hover) {
  .segmented__input:not(:checked) + .segmented__label:hover {
    background: var(--color-surface-hover);
  }
}

@media (min-width: 40rem) {
  .segmented__label {
    flex: 0 1 auto;
  }
}

.search {
  position: relative;
  max-inline-size: 40rem;
}

.search__form {
  position: relative;
  display: grid;
  gap: var(--space-2);
}

.search__label {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.search__field {
  position: relative;
  display: flex;
  align-items: center;
}

.search__icon {
  position: absolute;
  inset-inline-start: var(--space-4);
  color: var(--color-text-muted);
  pointer-events: none;
}

.search__input {
  inline-size: 100%;
  min-block-size: var(--control-height);
  min-inline-size: 0;
  flex: 1 1 auto;
  padding: 0 var(--space-3) 0 calc(var(--space-4) + 1.25rem + var(--space-3));
  border: 0;
  border-block-end: 1px solid var(--color-control-border);
  border-radius: var(--radius-s) 0 0 0;
  appearance: none;
  background: var(--color-surface-muted);
  color: var(--color-scrim);
  font-size: var(--text-m);
}

.search__input:focus-visible {
  outline-offset: calc(-1 * var(--focus-width));
}

.search__input:not(:placeholder-shown) {
  padding-inline-end: var(--control-height);
}

.search__input::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

.search__input::-webkit-search-cancel-button,
.search__input::-webkit-search-decoration {
  appearance: none;
}

.search__submit {
  display: inline-flex;
  flex: none;
  inline-size: var(--control-height);
  block-size: var(--control-height);
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  background: var(--color-accent);
  color: var(--color-accent-contrast);
}

@media (hover: hover) {
  .search__submit:hover {
    background: var(--color-accent-hover);
  }
}

.search__clear {
  position: absolute;
  inset-inline-end: var(--control-height);
  display: inline-flex;
  inline-size: var(--control-height);
  block-size: var(--control-height);
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
}

.search__status {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.search__panel {
  position: absolute;
  z-index: var(--z-popover);
  inset-block-start: 100%;
  inset-inline: 0;
  max-block-size: min(32rem, 70vh);
  margin-block-start: var(--space-1);
  padding-block: var(--space-2);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: var(--radius-m);
  background: var(--color-surface);
  box-shadow: var(--shadow-popover);
}

.search__group + .search__group {
  margin-block-start: var(--space-2);
}

.search__group-title {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-s);
  font-weight: var(--weight-strong);
}

.search__group-count {
  font-weight: var(--weight-regular);
}

.search__link {
  display: grid;
  min-block-size: var(--control-height);
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  color: var(--color-text);
  text-decoration: none;
}

@media (hover: hover) {
  .search__link:hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
    text-decoration: none;
  }
}

.search__link--active,
.search__link:active {
  background: var(--color-accent-tint);
}

.search__title {
  font-size: var(--text-m);
}

.search__mark {
  font-weight: var(--weight-strong);
}

.search__country {
  color: var(--color-text-muted);
  font-size: var(--text-s);
  font-weight: var(--weight-strong);
}

.search__reason {
  color: var(--color-text-muted);
  font-size: var(--text-s);
  line-height: var(--leading-snug);
  overflow-wrap: anywhere;
}

.search__empty {
  display: grid;
  justify-items: start;
  gap: var(--space-2);
  padding: var(--space-4);
}

.search__empty-title {
  font-weight: var(--weight-strong);
}

.search__empty-text {
  color: var(--color-text-muted);
  font-size: var(--text-s);
}

/* Правки дизайнеров 23.10: у поля поиска в шапке серая линия, кнопка с закруглением 2 px (с lg поле открывается лупой, site-header.css). */
@media (min-width: 64rem) {
  .search__input {
    border-block-end-color: var(--color-grey-300);
  }

  .search__submit {
    border-radius: var(--radius-s);
    background: var(--color-navy);
  }
}


/* Шапка после search.css: поле поиска в шапке (`search site-header__search`) перекрывает базовые свойства блока search. */
/*
  Шапка. До lg (64rem) компактная строка по ТЗ 24.10 07:33: логотип Ведомостей, тонкая линия, логотип ФУ, свободное место,
  лупа, язык. Высота 56 px с нижней линией, шапка закреплена сверху (sticky), не скрывается и не меняет размер при прокрутке.
  Меню разделов до lg это нижний таббар (site-nav.css), в шапке его нет.
  Правая группа по ТЗ 26.10 18:48: лупа, язык, «i» (информационный popover), промежутки вдвое меньше прежних.
  С lg одна строка по референсу дизайнеров 23.10 (20:06): логотипы через тонкую линию, меню по центру,
  тонкая линия, лупа, язык. Высота строки 76 px: 16 + 44 (цель нажатия) + 16. С lg шапка тоже закреплена (ТЗ 26.10 13:18),
  вид прежний: без линии и тени.
*/

.site-header {
  position: sticky;
  z-index: var(--z-header);
  inset-block-start: 0;
  padding-block-start: env(safe-area-inset-top, 0);
  border-block-end: 1px solid var(--color-hairline);
  background: var(--color-bg);
}

/* До lg строка высотой --site-header-height (56 px) вместе с нижней линией: цели нажатия 44 px по центру. */
.site-header__inner {
  display: flex;
  flex-wrap: nowrap;
  block-size: calc(var(--site-header-height) - 1px);
  align-items: center;
  gap: var(--space-2);
  max-inline-size: var(--container-max);
  margin-inline: auto;
  padding: 0 var(--gutter);
  padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px));
}

/*
  Логотипы и линия в одном флекс-ряду по центру. Видимая графика обоих файлов занимает почти всю высоту картинки
  (поля меньше 1,5 %), поэтому центры картинок совпадают с центрами графики и сдвиг не нужен.
  ФУ в 1,5 раза выше Ведомостей, как в шапке с lg (28 и 42 px); высоты растут с шириной окна: 16 и 24 px, 18 и 27 px с 409 px.
  Уже 362 px логотипы пропорционально меньше (ТЗ 24.10 п. 8 и 26.10 18:48: цели лупы, языка и «i» не меньше 44 × 44, при нехватке
  ширины уменьшаются логотипы и промежутки): вторая граница min() это остаток строки после полей 2 × 16 px, промежутка 8 px между
  группами, правой группы 136 px, линии и отступов у нее, поделенный на ширину логотипов EN (они шире RU) на 1 px высоты;
  на 320 px 12,2 и 18,3 px. С 362 px вторая граница больше первой и размеры прежние.
*/
.site-header__logos {
  display: flex;
  min-inline-size: 0;
  flex: 0 1 auto;
  align-items: center;
  gap: clamp(var(--space-2), 2.5vw, var(--space-3));
}

.site-header__logo-link {
  display: block;
  flex: none;
}

/*
  Фокус на ссылке и кнопке закрепленной шапки не прокручивает страницу: без этого браузер выводит их
  ниже отступа прокрутки --anchor-offset (base.css), хотя они и так видны. Действует на всех ширинах, шапка закреплена везде.
*/
.site-header__logo-link,
.site-header__search-toggle,
.site-header__info-toggle {
  scroll-margin-block-start: calc(-1 * var(--anchor-offset));
}

.site-header__logo {
  display: block;
  inline-size: auto;
  max-inline-size: none;
}

.site-header__logo--vedomosti {
  block-size: min(clamp(1rem, 4.4vw, 1.125rem), 9.305vw - 1.1rem);
}

.site-header__logo--partner {
  block-size: min(clamp(1.5rem, 6.6vw, 1.6875rem), 13.958vw - 1.65rem);
}

/* Тонкая вертикальная линия между логотипами на всех ширинах; линия перед лупой только в однострочной шапке с lg. */
.site-header__divider {
  display: block;
  flex: none;
  inline-size: 1px;
  block-size: 1.5rem;
  background: var(--color-hairline);
}

.site-header__tools > .site-header__divider {
  display: none;
}

/*
  Правая группа (ТЗ 26.10 18:48, п. 2): лупа, язык, «i» в одном флекс-ряду по центру, цели одной высоты 44 px,
  промежуток 2 px (вдвое меньше прежних 4 px). Цели 44 × 44 px на всех ширинах; на узких экранах уменьшаются логотипы (см. выше).
*/
.site-header__tools {
  display: flex;
  flex: none;
  align-items: center;
  gap: calc(var(--space-1) / 2);
  margin-inline-start: auto;
}

/* Лупа и «i»: контурные иконки из спрайта одного размера и цвета, без фона, рамки и подписи. «i» это иконка info подсказок источника. */
.site-header__search-toggle,
.site-header__info-toggle {
  display: inline-flex;
  inline-size: var(--control-height);
  block-size: var(--control-height);
  flex: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--color-text);
}

.site-header__search-toggle .icon,
.site-header__info-toggle .icon {
  inline-size: 1.375rem;
  block-size: 1.375rem;
}

@media (hover: hover) {
  .site-header__search-toggle:hover,
  .site-header__info-toggle:hover {
    color: var(--color-link);
  }
}

/*
  Поле поиска (точка монтирования `search site-header__search`, атрибут popover) открывается лупой.
  До lg это компактная панель во всю ширину сразу под закрепленной шапкой: position: fixed от верхнего края окна
  на высоту шапки, поэтому она не закрывает логотипы и язык и не двигает страницу при открытии и закрытии.
  Внутри прежнее поле шапки; список результатов привязан к форме и открывается под полем.
*/
.site-header__search {
  position: fixed;
  display: block;
  inset: var(--site-header-offset) 0 auto;
  inline-size: auto;
  block-size: auto;
  min-inline-size: 0;
  max-inline-size: none;
  margin: 0;
  padding: var(--space-2) max(var(--gutter), env(safe-area-inset-right, 0px)) var(--space-2) max(var(--gutter), env(safe-area-inset-left, 0px));
  overflow: visible;
  border: 0;
  border-block-end: 1px solid var(--color-hairline);
  background: var(--color-bg);
  color: inherit;
}

.site-header__search:not(:popover-open) {
  display: none;
}

.site-header__search .search__form {
  position: relative;
}

.site-header__search .search__panel {
  inset-inline: 0;
}

/*
  Однострочная шапка (референс 2006_natalya_header_referens, 1280 px): Ведомости 28 px и Финансовый университет 42 px
  по нижней линии, линии 1 × 28 px с отступом 16 px, меню по центру между логотипами и лупой, лупа 24 px, язык.
  Группа логотипов высотой с логотип Ведомостей стоит по центру строки, логотип ФУ выступает вверх, как в референсе.
*/
@media (min-width: 64rem) {
  /* Шапка остается sticky с прежним слоем (ТЗ 26.10 13:18); снимаются только нижняя линия и верхняя безопасная зона. */
  .site-header {
    padding-block-start: 0;
    border-block-end: 0;
  }

  .site-header__inner {
    position: static;
    block-size: auto;
    flex-wrap: nowrap;
    gap: var(--space-6);
    padding-block: var(--space-4);
  }

  .site-header__logos {
    flex: none;
    block-size: 1.75rem;
    align-items: flex-end;
    gap: var(--space-4);
  }

  .site-header__logo--vedomosti {
    block-size: 1.75rem;
  }

  .site-header__logo--partner {
    block-size: 2.625rem;
  }

  .site-header__divider {
    display: block;
    block-size: 1.75rem;
  }

  /* Промежуток между целями 10 px (было 20 px); от линии до лупы по-прежнему 24 px. */
  .site-header__tools {
    flex: none;
    gap: var(--space-3h);
    margin-inline-start: 0;
  }

  .site-header__tools > .site-header__divider {
    display: block;
    margin-inline-end: calc(var(--space-5) - var(--space-3h));
  }

  .site-header__search-toggle .icon,
  .site-header__info-toggle .icon {
    inline-size: 1.5rem;
    block-size: 1.5rem;
  }
}

/*
  Поиск под иконкой с lg (Мария Землянская 23.10 18:21, ТЗ 20:06 разд. 4): лупа открывает поле нативным popover
  под кнопкой, выровненным по ее правому краю (Esc и нажатие вне поля закрывают, фокус возвращается на лупу).
  Поле в прежнем оформлении шапки (7.18): серое поле 272 px с серой нижней линией и синяя кнопка со стрелкой, без подложки и тени.
  Шапка закреплена (ТЗ 26.10 13:18), поэтому поле position: fixed и стоит под лупой у верхнего края окна при любой прокрутке.
  Положение задано от краев окна, а не через anchor positioning: привязанное к лупе поле в верхнем слое браузер при автофокусе
  считал стоящим в начале документа и прокручивал к нему страницу (на 360 px). Отступы те же, что давала привязка:
  верх на высоте лупы (поле шапки 16 + 44 px) плюс 8 px, правый край по правому краю лупы: край контейнера шапки, цели «i» и языка
  по 44 px и два промежутка по 10 px (с ТЗ 26.10 18:48 лупа первая в правой группе).
*/
@media (min-width: 64rem) {
  .site-header__search {
    position: fixed;
    inset: calc(var(--space-4) + var(--control-height)) calc(max(0px, (100% - var(--container-max)) / 2) + max(var(--gutter), env(safe-area-inset-right, 0px)) + 2 * var(--control-height) + 2 * var(--space-3h)) auto auto;
    margin-block-start: var(--space-2);
    padding: 0;
    border: 0;
    background: transparent;
  }

  .site-header__search .search__input {
    inline-size: 272px;
    flex: none;
  }

  .site-header__search .search__panel {
    inset-inline: auto 0;
    inline-size: min(34rem, 90vw);
  }
}

/*
  Информационный popover «В подготовке спецпроекта принимали участие» (ТЗ Натальи Пушкиной 26.10 18:48).
  Нативный popover (auto) у кнопки «i»: открывается и закрывается нажатием, закрывается нажатием вне блока и Esc; открытие закрывает
  поле поиска и наоборот. Оформление тултипа карты (п. 4.1): фон, цвет, отступ, радиус и интерлиньяж из токенов --tip-* и --radius-tip,
  без тени, рамки и стрелки. Лежит в верхнем слое (position: fixed): высоту шапки не меняет, ничего не сдвигает, при прокрутке
  стоит под закрепленной шапкой. До md во всю ширину окна с полями --gutter, на 8 px ниже шапки; с md под «i»
  по правому краю правой группы, ширина по содержимому до 34rem (544 px). Высота ограничена окном (до lg над нижним таббаром), дальше прокрутка.
*/
.site-header__info {
  position: fixed;
  inset: calc(var(--site-header-offset) + var(--space-2)) max(var(--gutter), env(safe-area-inset-right, 0px)) auto max(var(--gutter), env(safe-area-inset-left, 0px));
  inline-size: auto;
  block-size: auto;
  max-block-size: calc(100dvh - var(--site-header-offset) - var(--space-2) - 3.5rem - 1px - env(safe-area-inset-bottom, 0px) - var(--space-4));
  margin: 0;
  padding: var(--tip-padding);
  overflow: auto;
  overscroll-behavior: contain;
  border: 0;
  border-radius: var(--radius-tip);
  background: var(--tip-bg);
  color: var(--tip-color);
  font-size: var(--tip-font-size-compact);
  line-height: var(--tip-leading);
  text-align: start;
}

/*
  Иерархия (ТЗ дизайнера 28.10): заголовок крупнее и жирнее (вес как у названия страны в тултипе карты), подзаголовки трех блоков
  полужирные размера текста блока, списки и перечисления обычного веса. Между блоками --space-4, от заголовка до первого блока
  --space-3, от подзаголовка до содержимого --space-1. Шаг строк в списке и в абзацах один (--tip-leading), между пунктами без зазора.
*/
.site-header__info-title {
  margin-block-end: var(--space-3);
  font-size: var(--text-m);
  font-weight: var(--weight-strong);
  line-height: var(--leading-snug);
}

.site-header__info-groups {
  display: grid;
  gap: var(--space-4);
}

/* text-wrap: pretty убирает висячее последнее слово в длинных подзаголовках и перечислениях. */
.site-header__info-group {
  display: grid;
  gap: var(--space-1);
  text-wrap: pretty;
}

.site-header__info-heading {
  font-weight: var(--weight-strong);
  line-height: var(--leading-snug);
}

/* Тире вместо круглого маркера на общей вертикали; перенесенная строка начинается под текстом, а не под тире. */
.site-header__info-item {
  position: relative;
  padding-inline-start: 1.375em;
}

.site-header__info-item::before {
  position: absolute;
  inset-inline-start: 0;
  content: "—" / "";
}

@media (min-width: 48rem) {
  .site-header__info {
    inset-inline: auto max(var(--gutter), env(safe-area-inset-right, 0px));
    inline-size: max-content;
    max-inline-size: min(34rem, 100% - 2 * var(--gutter));
    font-size: var(--tip-font-size);
  }

  .site-header__info-title {
    font-size: var(--text-l);
  }
}

/* С lg шапка 76 px без линии: блок сразу под ней (на 16 px ниже цели «i»), правый край по краю контейнера шапки, таббара нет. */
@media (min-width: 64rem) {
  .site-header__info {
    inset-block-start: var(--site-header-offset);
    inset-inline-end: calc(max(0px, (100% - var(--container-max)) / 2) + max(var(--gutter), env(safe-area-inset-right, 0px)));
    max-block-size: calc(100dvh - var(--site-header-offset) - var(--space-4));
  }
}

@media (forced-colors: active) {
  .site-header__info {
    border: 1px solid CanvasText;
  }
}

/*
  Браузеры без popover (Safari и iOS до 17): лупа не работает, поэтому поле стоит в потоке отдельным рядом, как до 24.10.
  Кнопка «i» и ее блок без popover не работают и скрыты.
  Шапка с полем выше 56 px, поэтому она не закрепляется, а отступы под нее (--site-header-offset) обнулены.
*/
@supports not selector(:popover-open) {
  :root {
    --site-header-offset: 0px;
  }

  .site-header {
    position: static;
  }

  .site-header__inner {
    flex-wrap: wrap;
    block-size: auto;
    padding-block: var(--space-2);
  }

  .site-header__search-toggle,
  .site-header__info-toggle,
  .site-header__info {
    display: none;
  }

  .site-header__search {
    position: relative;
    display: block;
    flex: 1 1 100%;
    inset: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }

  @media (min-width: 64rem) {
    .site-header__inner {
      padding-block: var(--space-4);
    }
  }
}

/* Карта Африки. Нейтральная основа; цвет страны задает выбранный слой виджета (регион, соглашения с РФ, валютная зона), design.md 7.13. */

.map {
  --map-pad: 1.75rem;
  --map-pad-end: 3.5rem;

  position: relative;
  max-inline-size: calc(80vh * 1012 / 937 + var(--map-pad) + var(--map-pad-end));
}

/* До 30rem подпись «Кабо-Верде» выходит левее карты в поле страницы (--gutter), поэтому обрезка выключена; шире карта обрезает выступающие зоны нажатия. */
@media (min-width: 30rem) {
  .map {
    --map-pad: 1.25rem;
    --map-pad-end: 4rem;

    overflow: clip;
  }
}

@media (min-width: 48rem) {
  .map {
    --map-pad-end: 1.25rem;
  }
}

.map__svg {
  display: block;
  inline-size: calc(100% - var(--map-pad) - var(--map-pad-end));
  max-inline-size: none;
  block-size: auto;
  margin-inline: var(--map-pad) var(--map-pad-end);
}

.map__country {
  color: var(--map-tone, var(--map-fill));
  fill: var(--map-tone, var(--map-fill));
  stroke: var(--map-stroke);
  stroke-width: var(--map-stroke-width);
  vector-effect: non-scaling-stroke;
}

.map--animated .map__country {
  transition: fill var(--duration-fast) var(--ease-out);
}

/* Возврат цветов после наведения без анимации смены слоя (markSpot в mapdom.js). */
.map--instant .map__country {
  transition: none;
}

.map__country--neutral {
  fill: var(--map-fill-neutral);
  pointer-events: none;
}

.map__country--region-north,
.map__marker--region-north,
.map-view__swatch--region-north {
  --map-tone: var(--map-region-north);
}

.map__country--region-west,
.map__marker--region-west,
.map-view__swatch--region-west {
  --map-tone: var(--map-region-west);
}

.map__country--region-central,
.map__marker--region-central,
.map-view__swatch--region-central {
  --map-tone: var(--map-region-central);
}

.map__country--region-east,
.map__marker--region-east,
.map-view__swatch--region-east {
  --map-tone: var(--map-region-east);
}

.map__country--region-southern,
.map__marker--region-southern,
.map-view__swatch--region-southern {
  --map-tone: var(--map-region-southern);
}

.map__country--zone-xof,
.map__marker--zone-xof,
.map-view__swatch--zone-xof {
  --map-tone: var(--map-zone-xof);
}

.map__country--zone-xaf,
.map__marker--zone-xaf,
.map-view__swatch--zone-xaf {
  --map-tone: var(--map-zone-xaf);
}

.map__country--zone-cma,
.map__marker--zone-cma,
.map-view__swatch--zone-cma {
  --map-tone: var(--map-zone-cma);
}

/*
  Слой «Соглашения с РФ»: модификатор agreement-{tone}, tone считает agreementStatus (src/widgets/shared/agreements.js),
  та же таблица и те же токены --color-agreement-*, что у статусов в карточках (agreement-status.css), design.md 7.18.12;
  исключение только у «нет / нет сведений»: на карте светло-серый --map-fill (ниже).
*/
.map__country--agreement-force,
.map__marker--agreement-force,
.map-view__swatch--agreement-force {
  --map-tone: var(--color-agreement-force);
}

.map__country--agreement-signed,
.map__marker--agreement-signed,
.map-view__swatch--agreement-signed {
  --map-tone: var(--color-agreement-signed);
}

.map__country--agreement-memo,
.map__marker--agreement-memo,
.map-view__swatch--agreement-memo {
  --map-tone: var(--color-agreement-memo);
}

/*
  «Нет / нет сведений» на карте как до 27.10 (решение заказчика, design.md 7.18.12): контур и квадрат легенды светло-серые --map-fill,
  точка острова серая --map-marker-fill (светло-серая точка с белым кольцом на белом море не видна). По смыслу тот же серый статус,
  что и --color-agreement-none в карточках, но темный серый занимал большую часть карты и почти не отличался по светлоте от зеленого.
*/
.map__country--agreement-none,
.map-view__swatch--agreement-none {
  --map-tone: var(--map-fill);
}

.map__marker--agreement-none {
  --map-tone: var(--map-marker-fill);
}

.map__link:focus-visible {
  outline: none;
}

.map__link:focus-visible .map__country {
  stroke: var(--map-outline-selected);
  stroke-width: var(--map-outline-selected-width);
}

.map__country--selected,
.map__country--selected:hover {
  stroke: var(--map-outline-selected);
  stroke-width: var(--map-outline-selected-width);
}

.map__country--island {
  fill: none;
  stroke: none;
  pointer-events: none;
}

.map__hatch {
  pointer-events: none;
}

.map__hover,
.map__selection {
  pointer-events: none;
}

.map__hover-line,
.map__selection-line {
  fill: none;
  stroke: var(--map-outline-selected);
  stroke-width: var(--map-outline-selected-width);
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/*
  Избирательная окраска при наведении (design.md 7.18.4): мышь на строке списка или на стране карты, класс map--spot ставит виджет.
  Цвет слоя остается только у наведенной страны (map__country--spot, map__marker--spot), у остальных заливка прозрачная, границы всех стран серые той же толщины.
  Только точный указатель с наведением; без перехода, масштаба и теней. В режиме принудительных цветов карта и так без заливок, правило не нужно.
*/
@media (hover: hover) and (pointer: fine) and (forced-colors: none) {
  .map--spot .map__country {
    transition: none;
  }

  .map--spot .map__country:not(.map__country--island) {
    stroke: var(--map-stroke-spot);
  }

  .map--spot .map__country:not(.map__country--spot, .map__country--island),
  .map--spot .map__hatch-path:not(.map__hatch-path--spot) {
    fill: transparent;
  }

  /* Точки островов: у остальных точка прозрачная с серым кольцом той же толщины 1 px; кольцо выбранной точки остается. */
  .map--spot .map__marker:not(.map__marker--spot)::before {
    background: transparent;
  }

  .map--spot .map__marker:not(.map__marker--spot, .map__marker--selected)::before {
    box-shadow: 0 0 0 1px var(--map-stroke-spot);
  }
}

.map__hatch-line {
  stroke: var(--map-hatch-line);
  stroke-width: 3;
}

.map__markers {
  position: absolute;
  inset: 0 var(--map-pad-end) 0 var(--map-pad);
  pointer-events: none;
}

.map__marker {
  position: absolute;
  z-index: var(--z-raised);
  display: block;
  inline-size: min(var(--map-marker-hit), var(--map-marker-cap, 100%));
  aspect-ratio: 1;
  border-radius: var(--radius-round);
  pointer-events: auto;
  transform: translate(-50%, -50%);
}

.map__marker--bdi,
.map__marker--rwa {
  --map-marker-cap: 3.1%;
}

.map__marker--gmb,
.map__marker--gnb {
  --map-marker-cap: 2.7%;
}

.map__marker--sle {
  --map-marker-cap: 5.5%;
}

.map__marker--cpv {
  --map-marker-cap: 13%;
}

.map__marker--com,
.map__marker--mus,
.map__marker--syc {
  --map-marker-cap: 15%;
}

.map__marker--gnq,
.map__marker--stp {
  --map-marker-cap: 4.7%;
}

.map__marker--lso,
.map__marker--swz {
  --map-marker-cap: 3.9%;
}

.map__marker::before {
  content: "";
  display: none;
  position: absolute;
  inset: 50% auto auto 50%;
  inline-size: var(--map-marker-size);
  block-size: var(--map-marker-size);
  border-radius: var(--radius-round);
  background: var(--map-tone, var(--map-marker-fill));
  box-shadow: 0 0 0 1px var(--map-marker-ring);
  transform: translate(-50%, -50%);
  transition: transform var(--duration-fast) var(--ease-out);
}

.map__marker--cpv::before,
.map__marker--stp::before,
.map__marker--com::before,
.map__marker--syc::before,
.map__marker--mus::before {
  display: block;
}

/* Точка острова «подписано, не вступило»: та же штриховка, что у контура и в легенде. */
.map__marker--agreement-signed::before {
  background: repeating-linear-gradient(45deg, var(--map-tone) 0 3px, var(--map-hatch-line) 3px 4px);
}

@media (hover: hover) {
  .map__marker:hover::before,
  .map__marker--hover::before {
    transform: translate(-50%, -50%) scale(1.3);
  }
}

.map__marker--selected::before {
  box-shadow: 0 0 0 2px var(--map-marker-ring), 0 0 0 4px var(--map-outline-selected);
}

.map__label {
  position: absolute;
  inset: 50% auto auto 50%;
  inline-size: max-content;
  max-inline-size: 7rem;
  color: var(--color-text-muted);
  font-size: 0.625rem;
  line-height: var(--leading-snug);
  pointer-events: none;
  text-shadow: 0 0 2px var(--color-white), 0 0 3px var(--color-white);
  white-space: nowrap;
}

/*
  Подписи островов не касаются суши и друг друга. Телефон до 30rem: шрифт 10 px, слева поле шире (--map-pad), чтобы «Кабо-Верде» встало в одну строку
  над точкой левее побережья; «Коморы» справа от точки между Сейшелами и Маврикием; «Сан-Томе и Принсипи» одна строка слева.
*/
.map__label--stp {
  transform: translate(calc(-100% - 0.5rem), -50%);
}

.map__label--cpv {
  text-align: end;
  transform: translate(calc(-100% + 0.875rem), calc(-100% - 0.375rem));
}

.map__label--com {
  transform: translate(1.125rem, calc(-50% - clamp(0px, (100vw - 20rem) / 8, 0.3125rem)));
}

.map__label--syc,
.map__label--mus {
  transform: translate(0.375rem, -50%);
}

@media (min-width: 30rem) {
  .map__label {
    font-size: 0.6875rem;
  }

  .map__label--stp {
    max-inline-size: 4rem;
    text-align: end;
    text-wrap: balance;
    transform: translate(calc(-100% + 0.5rem), 0.375rem);
    white-space: normal;
  }

  .map__label--cpv {
    inline-size: min-content;
    text-align: center;
    transform: translate(-65%, 0.5rem);
    white-space: normal;
  }

  .map__label--com {
    transform: translate(-0.5rem, calc(-100% - 0.375rem));
  }
}

@media (min-width: 48rem) {
  .map__label {
    font-size: var(--text-xs);
  }

  .map__label--stp {
    max-inline-size: 5.5rem;
    transform: translate(calc(-100% - 0.5rem), -50%);
  }

  .map__label--syc,
  .map__label--mus {
    text-align: end;
    transform: translate(calc(-100% + 0.5rem), 0.5rem);
  }
}

/* На широкой карте «Кабо-Верде» в одну строку над точкой, не выходя за левый край карты и не касаясь суши. */
@media (min-width: 64rem) {
  .map__label--cpv {
    inline-size: max-content;
    transform: translate(-33%, calc(-100% - 0.75rem));
    white-space: nowrap;
  }
}

.map__tip {
  position: absolute;
  z-index: calc(var(--z-raised) + 1);
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: max-content;
  max-inline-size: min(18rem, 100%);
  padding: var(--tip-padding);
  border-radius: var(--radius-tip);
  background: var(--tip-bg);
  color: var(--tip-color);
  font-size: var(--tip-font-size);
  line-height: var(--tip-leading);
  pointer-events: none;
}

.map__tip-title {
  font-weight: var(--weight-strong);
}

.map__tip-region {
  font-weight: var(--weight-regular);
}

@media (forced-colors: active) {
  .map__country {
    stroke: CanvasText;
    fill: Canvas;
  }

  .map__country--selected {
    stroke: Highlight;
    stroke-width: 3px;
  }

  .map__marker::before {
    background: CanvasText;
    box-shadow: none;
  }

  .map__marker--selected::before {
    box-shadow: 0 0 0 3px Highlight;
  }

  .map__tip {
    border: 1px solid CanvasText;
  }
}

/*
  Правки дизайнеров 23.10: карта 700 × 634 px, три островные точки сдвинуты. С 64rem те же доли от ширины контейнера главной (1216 px), с 80rem ровно в пикселях.
  Рамка SVG 700 × 634 шире пропорций viewBox 1012 × 937, поэтому рисунок вписан по высоте и стоит по центру рамки (поля по 7,6 px слева и справа).
  Слой маркеров повторяет сам рисунок, а не рамку: иначе проценты из markers.json считались бы от другой ширины и точки уезжали со своих стран.
  Сдвиги CPV, COM, STP из выгрузки (left 27, 566, 260 px) заданы в макете от левого края рамки SVG; в слое маркеров из них вычитается поле рисунка.
*/
@media (min-width: 64rem) {
  /* Рамка SVG со сдвигом --map-pad выходит за карту на 20 px, и обрезка срезала бы край рисунка с Маврикием и Сейшелами (их точки стоят на островах). Справа от карты промежуток колонок, за край страницы ничего не выходит. */
  .map {
    overflow: visible;
  }

  .map__svg {
    inline-size: 57.5658cqw;
    block-size: 52.1382cqw;
  }

  .map__markers {
    --map-art-inset: calc((57.5658cqw - 52.1382cqw * 1012 / 937) / 2);

    inset: 0 auto auto calc(var(--map-pad) + var(--map-art-inset));
    inline-size: calc(52.1382cqw * 1012 / 937);
    block-size: 52.1382cqw;
  }

  .map .map__marker--cpv {
    left: calc(57.5658cqw * 27 / 700 - var(--map-art-inset));
  }

  .map .map__marker--com {
    left: calc(57.5658cqw * 566 / 700 - var(--map-art-inset));
  }

  .map .map__marker--stp {
    left: calc(57.5658cqw * 260 / 700 - var(--map-art-inset));
  }
}

@media (min-width: 80rem) {
  .map__svg {
    inline-size: 700px;
    block-size: 634px;
  }

  .map__markers {
    --map-art-inset: calc((700px - 634px * 1012 / 937) / 2);

    inline-size: calc(634px * 1012 / 937);
    block-size: 634px;
  }

  .map .map__marker--cpv {
    inline-size: 45px;
    left: calc(27px - var(--map-art-inset));
  }

  .map .map__marker--com {
    left: calc(566px - var(--map-art-inset));
  }

  .map .map__marker--stp {
    left: calc(260px - var(--map-art-inset));
  }
}

/* Главная: карта со слоями и правая колонка (список стран или карточка выбранной страны). */

.map-view {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

.map-view__map,
.map-view__side {
  min-inline-size: 0;
}

.map-view__bar {
  display: grid;
  gap: var(--space-2);
  margin-block-end: var(--space-3);
}

.map-view__choice-label {
  color: var(--color-text-muted);
  font-size: var(--text-s);
}

.map-view__layers {
  display: flex;
  gap: var(--space-1);
}

.map-view__layer {
  display: inline-flex;
  min-block-size: var(--control-height);
  min-inline-size: 0;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-2);
  white-space: nowrap;
  border: 0;
  border-radius: var(--radius-s);
  background: var(--color-surface-muted);
  font-size: var(--text-s);
  text-align: center;
}

.map-view__layer[aria-pressed="true"] {
  background: var(--color-accent-tint);
  color: var(--color-accent);
  font-weight: var(--weight-strong);
}

.map-view__check {
  inline-size: 1rem;
  block-size: 1rem;
}

@media (hover: hover) {
  .map-view__layer[aria-pressed="false"]:hover {
    background: var(--color-surface-hover);
  }
}

.map-view__choice {
  display: grid;
  max-inline-size: 22rem;
  gap: var(--space-1);
}

.map-view__select {
  min-block-size: var(--control-height);
  inline-size: 100%;
  padding: 0 var(--space-3);
  border: 0;
  border-block-end: 1px solid var(--color-control-border);
  border-radius: var(--radius-s) var(--radius-s) 0 0;
  background: var(--color-surface-muted);
}

.map-view__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-status-error-text);
}

.map-view__legend {
  display: grid;
  gap: var(--space-2);
  margin-block-start: var(--space-3);
}

.map-view__legend-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  font-size: var(--text-s);
}

.map-view__legend-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  white-space: nowrap;
}

.map-view__swatch {
  inline-size: 1rem;
  block-size: 1rem;
  flex: none;
  margin-block-start: 0.125rem;
  background: var(--map-tone, var(--map-fill));
}

.map-view__swatch--agreement-signed {
  background: repeating-linear-gradient(45deg, var(--map-tone) 0 3px, var(--map-hatch-line) 3px 4px);
}

.map-view__card {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
}

.map-view__back {
  min-block-size: var(--control-height-s);
  margin-inline-start: calc(-1 * var(--space-4));
}

.map-view__back-icon {
  transform: rotate(180deg);
}

.map-view__card-title {
  font-size: var(--text-2xl);
}

.map-view__card-title:focus-visible {
  outline-offset: var(--space-1);
}

.map-view__card-meta {
  color: var(--color-text-muted);
  font-size: var(--text-s);
}

.map-view__actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  inline-size: 100%;
  gap: var(--space-2);
}

.map-view__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  inline-size: 100%;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-m);
  background: var(--color-surface-muted);
}

.map-view__fact {
  display: grid;
  align-content: start;
  gap: 2px;
}

.map-view__fact-term {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
}

.map-view__fact-value {
  font-size: var(--text-s);
  font-weight: var(--weight-strong);
  line-height: var(--leading-snug);
}

.map-view__fact-note {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
}

/*
  Компактный блок «Соглашения с РФ» (ТЗ Натальи Пушкиной 26.10 13:49, docs/design.md 7.18.7).
  Весь блок одна ссылка на общий раздел #agreements страницы страны; внутри только текст.
  Плитка как у показателей выше. Раскладка по ширине самого блока (container queries), а не экрана:
  узко список в одну колонку, затем две колонки, широко четыре. Название и статус категории делят
  две строки сетки (subgrid), поэтому в ряду статусы начинаются на одной линии.
  Наведение по общему правилу ссылок (6, 7.18.2): подчеркивание заголовка, фон и цвета статусов не меняются
  (фон наведения --color-surface-hover опустил бы серый статус ниже 4,5:1).
*/
.map-view__agreements {
  display: grid;
  gap: var(--space-3);
  inline-size: 100%;
  margin-block-start: var(--space-1);
  padding: var(--space-4);
  border-radius: var(--radius-m);
  background: var(--color-surface-muted);
  color: var(--color-text);
  container: map-agreements / inline-size;
}

.map-view__agreements:focus-visible {
  text-decoration: none;
}

.map-view__agreements-title {
  color: var(--color-text);
  font-size: var(--text-m);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.map-view__agreements:focus-visible .map-view__agreements-title {
  text-decoration: underline;
}

.map-view__agreements-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3) var(--space-4);
}

.map-view__agreement {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  row-gap: 2px;
}

.map-view__agreement-name {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
}

.map-view__agreement-status {
  font-size: var(--text-s);
  line-height: var(--leading-snug);
  overflow-wrap: break-word;
}

@media (hover: hover) {
  .map-view__agreements:hover {
    color: var(--color-text);
    text-decoration: none;
  }

  .map-view__agreements:hover .map-view__agreements-title {
    text-decoration: underline;
  }
}

@container map-agreements (min-width: 19rem) {
  .map-view__agreements-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container map-agreements (min-width: 40rem) {
  .map-view__agreements-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .map-view {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-6);
    align-items: stretch;
  }

  .map-view__side {
    padding-inline-end: var(--space-2);
    overflow-y: auto;
    overscroll-behavior: contain;
    contain: size;
  }

  /* Карточка выше карты и не прокручивается внутри колонки: прокрутка остается только у списка стран. */
  .map-view__side:has(.map-view__card) {
    padding-inline-end: 0;
    overflow-y: visible;
    contain: none;
  }
}

/* Правки дизайнеров 23.10 (Figma «Promo», макет 1280 px): колонка карты 700 px выступает в промежуток 110 px, список стран 460 px. С 64rem те же доли от ширины контейнера (1216 px), с 80rem ровно в пикселях. */
@media (min-width: 64rem) {
  .map-view {
    column-gap: 9.0461cqw;
    container-type: inline-size;
  }

  .map-view__map {
    inline-size: 57.5658cqw;
  }

  .map-view__side {
    inline-size: 37.8289cqw;
    max-inline-size: 100%;
  }

  .map-view__legend-list {
    column-gap: var(--space-6);
  }
}

@media (min-width: 80rem) {
  .map-view {
    column-gap: 110px;
  }

  .map-view__map {
    inline-size: 700px;
  }

  .map-view__side {
    inline-size: 460px;
  }
}

/* Страница «Страны»: фильтры и сортируемая таблица. Без скрипта таблица полная, с ним добавляются сортировка, поиск, счетчик. */

.country-table__controls {
  display: grid;
  gap: var(--space-3);
  margin-block-end: var(--space-4);
}

.country-table__field {
  display: grid;
  gap: var(--space-1);
}

.country-table__label {
  color: var(--color-text-muted);
  font-size: var(--text-s);
}

.country-table__search {
  color: var(--color-scrim);
}

.country-table__search,
.country-table__select {
  inline-size: 100%;
  min-block-size: var(--control-height);
  padding: 0 var(--space-3);
  border: 0;
  border-block-end: 1px solid var(--color-control-border);
  border-radius: var(--radius-s) var(--radius-s) 0 0;
  background: var(--color-surface-muted);
}

.country-table__search::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

.country-table__toggle {
  justify-self: start;
}

.country-table__badge {
  display: inline-flex;
  min-inline-size: 1.25rem;
  block-size: 1.25rem;
  align-items: center;
  justify-content: center;
  padding-inline: var(--space-1);
  border-radius: var(--radius-round);
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  font-size: var(--text-xs);
  line-height: 1;
}

.country-table__filters {
  display: none;
  gap: var(--space-3);
}

.country-table__filters--open {
  display: grid;
}

.country-table__regions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.country-table__regions .country-table__label {
  inline-size: 100%;
  margin-block: var(--space-1);
}

.country-table__chip {
  position: relative;
  display: inline-flex;
}

.country-table__chip-input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.country-table__chip-label {
  display: inline-flex;
  min-block-size: var(--control-height-s);
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-round);
  background: var(--color-surface-muted);
  cursor: pointer;
  font-size: var(--text-s);
}

.country-table__chip-input:checked + .country-table__chip-label {
  background: var(--color-accent-tint);
  color: var(--color-accent);
  font-weight: var(--weight-medium);
}

.country-table__chip-input:checked + .country-table__chip-label::before {
  content: "";
  inline-size: 0.3rem;
  block-size: 0.6rem;
  margin-block-end: 0.15rem;
  border: solid currentcolor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.country-table__chip-input:focus-visible + .country-table__chip-label {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}

@media (hover: hover) {
  .country-table__chip-input:not(:checked) + .country-table__chip-label:hover {
    background: var(--color-surface-hover);
  }
}

.country-table__reset {
  justify-self: start;
  margin-inline-start: calc(-1 * var(--space-4));
}

.country-table__count {
  margin-block-end: var(--space-3);
  font-size: var(--text-l);
  font-weight: var(--weight-strong);
}

.country-table__empty {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
  padding: var(--space-5);
  border-radius: var(--radius-m);
  background: var(--color-surface-muted);
}

.country-table__empty-title {
  font-size: var(--text-xl);
  font-weight: var(--weight-strong);
}

.country-table__empty-text {
  color: var(--color-text-muted);
}

.country-table__table .data-table__caption {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.country-table__scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;

  /* Тень у правого края, пока справа есть непоказанные столбцы: накладка "local" закрывает ее у конца прокрутки. */
  background:
    linear-gradient(to left, var(--color-bg) 30%, transparent) right center / 2.5rem 100% no-repeat local,
    radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / 22%), transparent) right center / 0.875rem 100% no-repeat scroll;
}

.country-table__table {
  min-inline-size: 44rem;
  border-collapse: separate;
  border-spacing: 0;
}

.country-table__head {
  padding: var(--space-2) var(--space-3);
  vertical-align: top;
}

.country-table__head:first-child,
.country-table__cell--name {
  position: sticky;
  z-index: 1;
  inset-inline-start: 0;
  background: var(--color-bg);
}

.country-table__sort {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: var(--space-1) 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-weight: inherit;
  text-align: start;
  white-space: nowrap;
}

.data-table__head--number .country-table__sort {
  align-items: flex-end;
  text-align: end;
}

.country-table__sort:focus:not(:focus-visible) {
  outline: none;
}

.country-table__head-title {
  color: var(--color-text);
  font-weight: var(--weight-strong);
}

.country-table__head-sub {
  inline-size: 8.5rem;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  white-space: normal;
}

.country-table__head[aria-sort="ascending"] .country-table__head-title::after {
  content: " \2191";
}

.country-table__head[aria-sort="descending"] .country-table__head-title::after {
  content: " \2193";
}

@media (hover: hover) {
  .country-table__sort:hover .country-table__head-title {
    color: var(--color-link);
    text-decoration: underline;
  }
}

.country-table__cell {
  padding: var(--space-3);
  white-space: nowrap;
  border-block-end: 1px solid var(--color-hairline);
  vertical-align: top;
  font-size: var(--text-s);
  font-variant-numeric: tabular-nums;
}

.country-table__cell--name {
  inline-size: 9rem;
  min-inline-size: 9rem;
  white-space: normal;
  font-weight: var(--weight-strong);
  text-align: start;
}

.country-table__cell--region,
.country-table__head--region {
  display: none;
}

.country-table__region {
  display: block;
  margin-block-start: 2px;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
}

.country-table__cell--number {
  text-align: end;
}

.country-table__link {
  color: var(--color-text);
  text-decoration: none;
}

.country-table__link:focus-visible {
  text-decoration: underline;
}

@media (hover: hover) {
  .country-table__link:hover {
    color: var(--color-link);
    text-decoration: underline;
  }
}

.country-table__note {
  display: block;
  margin-inline-start: auto;
  white-space: nowrap;
  color: var(--color-status-warning-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
}

@media (min-width: 48rem) {
  .country-table__table {
    min-inline-size: 60rem;
  }

  .country-table__head {
    vertical-align: bottom;
  }

  .country-table__cell--name {
    inline-size: auto;
    white-space: nowrap;
  }

  .country-table__head-sub {
    inline-size: auto;
    white-space: nowrap;
  }

  .country-table__cell--region,
  .country-table__head--region {
    display: table-cell;
  }

  .country-table__region {
    display: none;
  }

  .country-table__controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4h) var(--space-4);
  }

  .country-table__toggle {
    display: none;
  }

  .country-table__filters {
    display: contents;
  }

  .country-table__field--search {
    grid-column: 1 / -1;
  }

  .country-table__regions {
    grid-column: 1 / -1;
  }

  .country-table__reset {
    grid-column: 1;
  }
}

.country-list {
  display: grid;
}

.country-list__item {
  display: flex;
  min-block-size: var(--control-height);
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
  padding-block: var(--space-3);
  border-block-end: 1px solid var(--color-hairline);
}

.country-list__link {
  color: var(--color-text);
  font-weight: var(--weight-strong);
  text-decoration: none;
}

.country-list__link:focus-visible {
  text-decoration: underline;
}

@media (hover: hover) {
  .country-list__link:hover {
    color: var(--color-link);
    text-decoration: underline;
  }
}

.country-list__region {
  color: var(--color-text-muted);
  font-size: var(--text-s);
}


/* Сравнение стран: панель выбора (страны, список, приглушение), состояния, действия. design.md 7.18.13. */

.compare__noscript {
  max-inline-size: var(--measure);
}

.compare__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-inline-size: 0;
  gap: var(--space-6);
}

/* Панель управления: слева выбранные страны и список, справа «Приглушить совпадающие значения». Высота по содержимому. */
.compare__picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-inline-size: 0;
  gap: var(--space-3) var(--space-5);
}

.compare__choice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-inline-size: 0;
  max-inline-size: 100%;
  gap: var(--space-2);
}

.compare__selected {
  min-inline-size: 0;
}

.compare__tag {
  padding-block: 0;
}

.compare__tag-link {
  color: var(--color-text);
  font-weight: var(--weight-regular);
  text-decoration: none;
}

.compare__tag-link:focus-visible {
  text-decoration: underline;
}

@media (hover: hover) {
  .compare__tag-link:hover {
    color: var(--color-link);
    text-decoration: underline;
  }
}

.compare__select {
  min-block-size: var(--control-height);
  inline-size: min(100%, 20rem);
  padding: 0 var(--space-3);
  border: 0;
  border-block-end: 1px solid var(--color-control-border);
  border-radius: var(--radius-s) var(--radius-s) 0 0;
  background: var(--color-surface-muted);
  color: var(--color-scrim);
}

.compare__select:disabled {
  color: var(--color-disabled-text);
}

.compare__dim {
  display: inline-flex;
  min-block-size: var(--control-height);
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-s);
  line-height: var(--leading-snug);
}

.compare__dim-input {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  flex: none;
  margin: 0;
  accent-color: var(--color-accent);
}

/* Подпись списка есть для программ чтения экрана, на экране ее роль играет подсказка внутри списка. */
.compare__label,
.compare__live {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.compare__empty {
  display: grid;
  max-inline-size: var(--measure);
  gap: var(--space-2);
  padding: var(--space-5);
  border-radius: var(--radius-m);
  background: var(--color-surface-muted);
}

.compare__empty-text {
  color: var(--color-text-muted);
  text-align: center;
}

.compare__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-muted);
}

.compare__status--error {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-m);
  background: var(--color-status-error-bg);
  color: var(--color-status-error-text);
  font-weight: var(--weight-strong);
}

.compare__chart {
  display: flex;
  flex-direction: column;
  gap: var(--space-3h);
  margin-block-end: 0;
}

@media (min-width: 48rem) {
  .compare__dim {
    margin-inline-start: auto;
  }
}

/* С lg панель в две колонки: страны и список переносятся внутри левой, приглушение всегда справа по центру. */
@media (min-width: 64rem) {
  .compare__picker {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/* Таблица сравнения (design.md 7.9): первый столбец закреплен при горизонтальной прокрутке. */

.compare-table__scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.compare-table {
  --compare-row-head: 8rem;
  --compare-column: 11rem;
  --compare-columns: 2;

  inline-size: 100%;
  min-inline-size: calc(var(--compare-row-head) + var(--compare-columns) * var(--compare-column));
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-s);
  font-variant-numeric: tabular-nums;
}

/* Ширина таблицы по числу выбранных стран: без пустых столбцов под невыбранные. Одна страна помещается в экран без прокрутки. */
.compare-table--n1 {
  --compare-columns: 1;

  min-inline-size: 0;
}

.compare-table--n3 {
  --compare-columns: 3;
}

.compare-table--n4 {
  --compare-columns: 4;
}

.compare-table__caption {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.compare-table__corner,
.compare-table__row-head {
  position: sticky;
  z-index: 1;
  inset-inline-start: 0;
  inline-size: var(--compare-row-head);
  min-inline-size: var(--compare-row-head);
  max-inline-size: var(--compare-row-head);
  background: var(--color-bg);
  text-align: start;
}

.compare-table__corner {
  padding: var(--space-3) var(--space-3) var(--space-3) 0;
  border-block-end: 1px solid var(--color-text-subtle);
  color: var(--color-text-muted);
  font-weight: var(--weight-strong);
  vertical-align: bottom;
}

.compare-table__row-head {
  padding: var(--space-3) var(--space-3) var(--space-3) 0;
  border-block-end: 1px solid var(--color-hairline);
  font-weight: var(--weight-regular);
  vertical-align: top;
}

.compare-table__label {
  display: block;
  font-weight: var(--weight-strong);
  line-height: var(--leading-snug);
  overflow-wrap: anywhere;
}

.compare-table__period {
  display: block;
  margin-block-start: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.compare-table__country {
  min-inline-size: var(--compare-column);
  padding: var(--space-3);
  border-block-end: 1px solid var(--color-text-subtle);
  text-align: start;
  vertical-align: bottom;
}

.compare-table__country-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.compare-table__country-link {
  flex: 1 1 auto;
  color: var(--color-text);
  font-size: var(--text-m);
  font-weight: var(--weight-strong);
  text-decoration: none;
}

@media (hover: hover) {
  .compare-table__country-link:hover {
    color: var(--color-link);
    text-decoration: underline;
  }
}

.compare-table__group {
  padding: 0;
  background: var(--color-surface-muted);
  text-align: start;
}

.compare-table__group-title {
  position: sticky;
  inset-inline-start: 0;
  display: inline-block;
  padding: var(--space-3) var(--space-3) var(--space-3) 0;
  font-size: var(--text-m);
  font-weight: var(--weight-strong);
}

.compare-table__cell {
  position: relative;
  min-inline-size: var(--compare-column);
  padding: var(--space-3) var(--space-6) var(--space-3) var(--space-3);
  border-block-end: 1px solid var(--color-hairline);
  vertical-align: top;
}

/* Кнопка 44 px шире значка на 12 px с каждой стороны: отступ --space-3 держит ее внутри ячейки, иначе последний столбец
   выступает за таблицу на 8 px и у обертки появляется лишняя горизонтальная прокрутка. */
.compare-table__cell > .source-note {
  position: absolute;
  inset-block-start: var(--space-2);
  inset-inline-end: var(--space-3);
}

.compare-table__value {
  display: block;
  font-size: var(--text-m);
  font-weight: var(--weight-strong);
}

/* Режим «Приглушить совпадающие значения»: меняется только цвет текста значения, без opacity, начертания и размеров. */
.compare-table__value--match,
.compare-table__share-label--match,
.compare-table__item--match {
  color: var(--color-text-muted);
}

.compare-table__missing {
  color: var(--color-text-muted);
}

.compare-table__note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  margin-block-start: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
}

.compare-table__note .icon {
  inline-size: 0.875rem;
  block-size: 0.875rem;
  margin-block-start: 0.05rem;
}

.compare-table__note--warn,
.compare-table__row-head .compare-table__note {
  color: var(--color-status-warning-text);
}

.compare-table__shares {
  display: grid;
  gap: var(--space-3);
}

.compare-table__share-label {
  display: block;
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  overflow-wrap: anywhere;
}

.compare-table__share .compare-table__value {
  font-size: var(--text-s);
}

.compare-table__list {
  display: grid;
  gap: var(--space-2);
}

.compare-table__item {
  line-height: var(--leading-snug);
  overflow-wrap: anywhere;
}

.compare-table__sublist {
  display: grid;
  gap: var(--space-1);
  margin-block-start: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.compare-table__more-text {
  margin-block-start: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
}

@supports (animation-timeline: scroll()) {
  @keyframes compare-table-edge {
    from {
      box-shadow: none;
    }

    to {
      box-shadow: var(--shadow-raised);
    }
  }

  .compare-table__corner,
  .compare-table__row-head {
    animation: compare-table-edge linear both;
    animation-range: 0 1.5rem;
    animation-timeline: scroll(nearest inline);
  }
}

@media (min-width: 64rem) {
  .compare-table {
    --compare-row-head: 14rem;
  }

  .compare-table__country,
  .compare-table__cell {
    min-inline-size: 0;
  }
}

/* Столбцы в ячейках сравнения: шкала общая для строки, цвет по месту страны в выборе. */

.compare-bar {
  display: block;
  inline-size: 100%;
  block-size: var(--chart-bar-height);
  margin-block: var(--space-1);
}

.compare-bar__track {
  fill: var(--chart-grid);
}

.compare-bar__fill--s1 {
  fill: var(--chart-series-1);
}

.compare-bar__fill--s2 {
  fill: var(--chart-series-2);
}

.compare-bar__fill--s3 {
  fill: var(--chart-series-3);
}

.compare-bar__fill--s4 {
  fill: var(--chart-series-4);
}

/* Единый вид выпадающих списков (Edge, Safari, iPhone): без системной стрелки, высота --control-height, своя стрелка справа. */

.country-table__select,
.map-view__select,
.compare__select {
  max-inline-size: 100%;
  min-block-size: var(--control-height);
  padding-inline-end: calc(var(--space-3) + 1.5rem);
  overflow: hidden;
  appearance: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c5c5c' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right var(--space-2) center / 1.25rem 1.25rem no-repeat,
    var(--color-surface-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
  Уведомление о cookie (ТЗ заказчика, design.md 7.18.5): текст со ссылками и одна кнопка «Согласен» (button button--primary).
  Закреплено у нижнего края окна: до lg непосредственно над нижним таббаром (site-nav.css: пункт 3.5rem, линия 1 px, безопасная зона),
  с lg у самого края. Белый фон и тонкая линия сверху, как у таббара; без тени, затемнения и анимаций.
  До md текст над кнопкой, кнопка справа; с md текст слева, кнопка справа в одну строку.
  Слой --z-header: ниже подсказки источника (--z-popover), поэтому раскрытая подсказка ложится поверх баннера.
  Нижний отступ странице не добавляется (ТЗ этого не требует): до нажатия баннер может закрывать низ подвала.
*/

.cookie-notice {
  position: fixed;
  z-index: var(--z-header);
  inset: auto 0 calc(3.5rem + 1px + env(safe-area-inset-bottom, 0px));
  border-block-start: 1px solid var(--color-hairline);
  background: var(--color-bg);
}

.cookie-notice__inner {
  display: flex;
  max-inline-size: var(--container-max);
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  margin-inline: auto;
  padding-block: var(--space-3);
  padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px));
}

/* Высота текста ограничена: при крупном тексте или низком окне он прокручивается, а не обрезается. Поле на кольцо фокуса ссылок. */
.cookie-notice__text {
  align-self: stretch;
  max-block-size: 30vh;
  margin: calc(-1 * var(--space-1));
  padding: var(--space-1);
  overflow-y: auto;
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
}

.cookie-notice__button {
  flex: none;
}

@media (min-width: 48rem) {
  .cookie-notice__inner {
    flex-direction: row;
    align-items: center;
    gap: var(--space-5);
  }

  .cookie-notice__text {
    min-inline-size: 0;
    flex: 1 1 auto;
    font-size: var(--text-s);
  }
}

@media (min-width: 64rem) {
  .cookie-notice {
    inset-block-end: 0;
  }

  .cookie-notice__inner {
    padding-block-end: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  }
}

/* Счетчики (LiveInternet, Яндекс Метрика): изображения-хиты вне видимой области, не display:none, чтобы они загружались. */
.counters__pixel {
  position: absolute;
  left: -9999px;
}

.counters__img {
  border: 0;
}

/* Печать (design.md раздел 9): страна и сравнение без навигации и управляющих элементов, с источниками. */

@media print {
  @page {
    size: a4;
    margin: 15mm;
  }

  html {
    font-size: 11pt;
  }

  body {
    display: block;
    padding-block-end: 0;
    background: #fff;
    color: #000;
  }

  .source-note,
  .compare-table__cell > .source-note {
    position: static;
    display: block;
    margin-block-start: var(--space-1);
  }

  .skip-link,
  .site-header__search-toggle,
  .site-nav,
  .lang-switch,
  .page-actions,
  .country-page__nav,
  .source-note__trigger,
  .stat > .source-note,
  .button,
  .search,
  .map-view__bar,
  .country-table__controls,
  .segmented,
  .compare__picker,
  .compare__live,
  .tag__remove,
  .map-view__actions,
  .cookie-notice {
    display: none !important;
  }

  .site-header {
    position: static;
    border-block-end: 0;
  }

  .site-header__inner,
  .site-footer__inner {
    padding-inline: 0;
  }

  .site-footer {
    margin-block-start: var(--space-6);
    background: transparent;
  }

  .page {
    padding-block: var(--space-4);
  }

  .container {
    max-inline-size: none;
    padding-inline: 0;
  }

  .country-page__layout {
    display: block;
  }

  .stat,
  .disclosure,
  .agreement-card,
  .topic-list__item,
  .map-view__facts {
    border-radius: 0;
    background: transparent;
  }

  .stat,
  .map-view__facts {
    border-block-start: 0.5pt solid #000;
  }

  .stat__source {
    display: block;
  }

  .source-note__popover {
    position: static;
    display: block;
    inline-size: auto;
    max-inline-size: none;
    max-block-size: none;
    margin: 0;
    padding: 0;
    overflow: visible;
    background: transparent;
    box-shadow: none;
    color: #000;
    font-size: var(--text-xs);
  }

  .source-note__line--period {
    display: none;
  }

  .source-note__term,
  .source-note__link {
    color: #000;
  }

  .stat,
  .chart,
  .disclosure,
  .agreement-card,
  .fact-list__row,
  .compare-table tr {
    break-inside: avoid;
  }

  h1,
  h2,
  h3,
  h4,
  .chart__caption,
  .country-block__note {
    break-after: avoid;
  }

  .country-block {
    margin-block-end: var(--space-5);
  }

  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .topic-list {
    grid-template-columns: repeat(2, 1fr);
  }

  thead {
    display: table-header-group;
  }

  a {
    color: #000;
    text-decoration: none;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: var(--text-xs);
    overflow-wrap: anywhere;
  }

  .map,
  .map-view__legend {
    display: none;
  }

  .compare-table__scroll {
    overflow: visible;
  }

  /* Таблица стран целиком на странице: без минимальной ширины и закрепленного столбца, с переносами в заголовках и ячейках. */
  .country-table__scroll {
    overflow: visible;
    background: none;
  }

  .country-table__table {
    inline-size: 100%;
    min-inline-size: 0;
    font-size: 7.5pt;
  }

  .country-table__head,
  .country-table__cell {
    padding: var(--space-1) var(--space-2);
  }

  .country-table__head:first-child,
  .country-table__cell--name {
    position: static;
    inline-size: auto;
    min-inline-size: 0;
    background: transparent;
    white-space: normal;
  }

  .country-table__cell {
    white-space: normal;
  }

  .country-table__sort {
    white-space: normal;
  }

  .country-table__head-sub {
    inline-size: auto;
    white-space: normal;
  }

  .country-table__row {
    break-inside: avoid;
  }

  .compare-table {
    font-size: 8pt;
  }

  .compare-table__corner,
  .compare-table__row-head,
  .compare-table__group-title {
    position: static;
    inline-size: 22%;
    min-inline-size: 0;
    max-inline-size: none;
    animation: none;
  }

  .compare-table__country,
  .compare-table__cell {
    min-inline-size: 0;
    padding-inline-end: var(--space-2);
  }

  .compare-table__group {
    background: transparent;
    border-block-end: 0.5pt solid #000;
  }

  .compare-bar__track {
    fill: #ddd;
  }

  .compare-bar__fill--s1,
  .compare-bar__fill--s2,
  .compare-bar__fill--s3,
  .compare-bar__fill--s4,
  .bar-chart__bar,
  .line-chart__marker {
    fill: #000;
  }

  .compare-bar__fill--s2 {
    fill: #555;
  }

  .compare-bar__fill--s3 {
    fill: #888;
  }

  .compare-bar__fill--s4 {
    fill: #333;
  }

  .chart__line--s1,
  .chart__line--s2,
  .chart__line--s3,
  .chart__line--s4,
  .line-chart__line {
    stroke: #000;
  }

  .chart__line--s2 {
    stroke-dasharray: 6 3;
  }

  .chart__line--s3 {
    stroke-dasharray: 2 3;
  }

  .chart__line--s4 {
    stroke-dasharray: 8 3 2 3;
  }

  .chart__point--s1,
  .chart__point--s2,
  .chart__point--s3,
  .chart__point--s4,
  .chart__mark--s1,
  .chart__mark--s2,
  .chart__mark--s3,
  .chart__mark--s4 {
    fill: #000;
  }
}

.map__marker--bdi {
  left: 66.11%;
  top: 57.42%;
}

.map__marker--com {
  left: 83.31%;
  top: 68.22%;
}

.map__marker--cpv {
  left: 0.78%;
  top: 29.02%;
}

.map__marker--dji {
  left: 82.26%;
  top: 35.14%;
}

.map__marker--gmb {
  left: 8.70%;
  top: 32.12%;
}

.map__marker--gnb {
  left: 11.56%;
  top: 34.58%;
}

.map__marker--gnq {
  left: 41.71%;
  top: 49.64%;
}

.map__marker--lso {
  left: 63.47%;
  top: 92.48%;
}

.map__marker--mus {
  left: 99.11%;
  top: 81.09%;
}

.map__marker--rwa {
  left: 67.00%;
  top: 53.90%;
}

.map__marker--sle {
  left: 13.98%;
  top: 39.32%;
}

.map__marker--stp {
  left: 36.77%;
  top: 51.49%;
}

.map__marker--swz {
  left: 67.51%;
  top: 88.50%;
}

.map__marker--syc {
  left: 98.71%;
  top: 58.44%;
}

.map__marker--tgo {
  left: 29.81%;
  top: 39.79%;
}