/* ============================================================================
   worldchart — мировые показатели по странам.

   Направление: лист атласа. Традиция та же, что у roschart — швейцарская
   типографика статистических сборников, где форма подчинена числу: строгая
   сетка, волосяные линейки вместо рамок и теней, цифры моноширинным с
   табличными знаками. Два сайта должны читаться как родня.

   Но лист атласа — не страница ежегодника, и личность у него своя:

   1. Бумага холодная. У roschart манила, тёплая и желтоватая, как у
      печатного сборника. Здесь бледный серо-зелёный тон картографической
      бумаги: на нём синяя краска карты не уходит в фон, а тёплая манила с
      синим спорила бы.
   2. Краски обвязки нет вовсе. У roschart один вермильон на акценты. Здесь
      интерактивное набирается тёмно-синими чернилами — они достаточно
      тёмные, чтобы читаться как чернила, а не как краска. Цвет на странице
      бывает только внутри графика, потому что цвет тут значит данные.
   3. Градусная сетка. Вертикальная волосяная линия слева от блока —
      отсылка к графической сетке карты. Это структура, а не украшение:
      линия показывает, где начинается колонка содержимого.

   Палитра графиков проверена валидатором скилла dataviz: четыре ряда
   расходятся во всех парах при протанопии и дейтеранопии, последовательная
   шкала карты — один тон, пять ступеней, светлый конец отделяется от
   бумаги. Тёмная тема набрана своими ступенями, а не инверсией светлой.

   Шрифты свои, не с чужого CDN: Golos Text сделан для государственных
   сервисов и хорошо держит кириллицу, IBM Plex Mono даёт цифрам ровность.
   ========================================================================= */

/* ------------------------------------------------------------------ шрифты */

@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/golos-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/golos-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+2000-206F, U+2122, U+2212;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/golos-500-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/golos-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+2000-206F, U+2122, U+2212;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/golos-600-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/golos-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+2000-206F, U+2122, U+2212;
}
@font-face {
  font-family: 'Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/plexmono-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/plexmono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+2000-206F, U+2122, U+2212;
}
@font-face {
  font-family: 'Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/plexmono-500-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/plexmono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+2000-206F, U+2122, U+2212;
}

/* ------------------------------------------------------------------- токены */

:root {
  color-scheme: light;

  /* Бумага картографическая: бледный серо-зелёный. Холоднее манилы
     roschart — на ней синяя краска карты остаётся синей. */
  --page:           #e8ece6;
  --surface-1:      #f7f9f5;
  --surface-2:      #dee3da;
  --text-primary:   #14181a;
  --text-secondary: #4d545a;
  --text-muted:     #646c72;
  --gridline:       #d5dbd2;
  --baseline:       #a9b1aa;
  --border:         #ccd3c9;
  --border-strong:  #b3bcb1;
  --control:        #7f887f;

  /* Чернила, а не краска: интерактивное тёмно-синее, темнее любого ряда
     на графике, поэтому с данными не спорит. */
  --accent:         #27406e;
  --accent-ink:     #182c52;
  --accent-soft:    #dde3ee;
  --ink-fill:       #14181a;
  --ink-fill-hover: #2d3338;
  --on-ink:         #f7f9f5;

  /* Категориальная палитра рядов. Четыре слота — столько расходится во всех
     парах при дальтонизме; пятая страна в сравнении идёт малыми кратными,
     а не пятым цветом. Порядок фиксированный, не перекрашивается фильтром. */
  /* Первые четыре расходятся во всех парах при дальтонизме — их хватает
     для сравнения нескольких стран. Слоты с пятого по десятый добавлены
     для графика с выборкой по всему рейтингу: там линий десять, и каждая
     подписана прямо у своего конца, поэтому цвет не остаётся единственным
     признаком. Порядок подобран так, чтобы соседние по слоту тона не
     сливались. */
  --series-1: #2c79d9;
  --series-2: #d87022;
  --series-3: #007a43;
  --series-4: #6331a0;
  --series-5: #c94b87;
  --series-6: #8b8c14;
  --series-7: #006f9d;
  --series-8: #953e32;
  --series-9: #009079;
  --series-10: #974391;
  --series-max: 10;

  /* Последовательная шкала карты: один тон, пять ступеней, светлый конец
     отделяется от бумаги. */
  --seq-1: #8ab5e6;
  --seq-2: #639adc;
  --seq-3: #3f7ecf;
  --seq-4: #2460b7;
  --seq-5: #1c458e;
  --seq-none: #dee3da;

  /* Расхождение: два полюса и серая середина, без тона в нуле. */
  --div-pos: #2460b7;
  --div-neg: #b1452a;
  --div-mid: #e3e7e0;

  /* Ритм: шаг 4px, всё кратно ему. */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;

  --radius:    6px;
  --radius-sm: 4px;

  --font: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Одна тень на весь сайт и только там, где элемент правда всплывает. */
  --shadow-pop: 0 10px 28px -12px rgba(18, 24, 20, 0.3);

  --measure: 66ch;
  --gutter: var(--s4);
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --page:           #141714;
    --surface-1:      #1b1f1c;
    --surface-2:      #262b26;
    --text-primary:   #e6e9e3;
    --text-secondary: #aeb4ac;
    --text-muted:     #868d85;
    --gridline:       #2d332e;
    --baseline:       #454c46;
    --border:         #2f352f;
    --border-strong:  #434a43;
    --control:        #7c847c;
    --accent:         #8fb0e8;
    --accent-ink:     #b3cbf2;
    --accent-soft:    #20283a;
    --ink-fill:       #e6e9e3;
    --ink-fill-hover: #c8cdc5;
    --on-ink:         #141714;
    --series-1: #4f93ec;
    --series-2: #d47027;
    --series-3: #229e66;
    --series-4: #764ab2;
    --series-5: #d15f93;
    --series-6: #97982f;
    --series-7: #0087b6;
    --series-8: #b95a4c;
    --series-9: #00a38c;
    --series-10: #a956a3;
    --seq-1: #245192;
    --seq-2: #316bbc;
    --seq-3: #4788dd;
    --seq-4: #6da7ed;
    --seq-5: #96c5fa;
    --seq-none: #262b26;
    --div-pos: #4788dd;
    --div-neg: #d4714f;
    --div-mid: #2a302a;
    --shadow-pop: 0 12px 32px -14px rgba(0, 0, 0, 0.7);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page:           #141714;
  --surface-1:      #1b1f1c;
  --surface-2:      #262b26;
  --text-primary:   #e6e9e3;
  --text-secondary: #aeb4ac;
  --text-muted:     #868d85;
  --gridline:       #2d332e;
  --baseline:       #454c46;
  --border:         #2f352f;
  --border-strong:  #434a43;
  --control:        #7c847c;
  --accent:         #8fb0e8;
  --accent-ink:     #b3cbf2;
  --accent-soft:    #20283a;
  --ink-fill:       #e6e9e3;
  --ink-fill-hover: #c8cdc5;
  --on-ink:         #141714;
  --series-1: #4f93ec;
  --series-2: #d47027;
  --series-3: #229e66;
  --series-4: #764ab2;
  --series-5: #d15f93;
  --series-6: #97982f;
  --series-7: #0087b6;
  --series-8: #b95a4c;
  --series-9: #00a38c;
  --series-10: #a956a3;
  --seq-1: #245192;
  --seq-2: #316bbc;
  --seq-3: #4788dd;
  --seq-4: #6da7ed;
  --seq-5: #96c5fa;
  --seq-none: #262b26;
  --div-pos: #4788dd;
  --div-neg: #d4714f;
  --div-mid: #2a302a;
  --shadow-pop: 0 12px 32px -14px rgba(0, 0, 0, 0.7);
}

/* -------------------------------------------------------------------- основа */

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

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

body {
  margin: 0;
  /* Подвал прижат к низу окна. Без этого на короткой странице — а короткая у
     нас ровно одна, «страница не найдена», — подвал повисал посередине, и под
     ним до низа экрана тянулась полоса другого цвета в три с половиной сотни
     пикселей. Выглядело как оборванная вёрстка, и именно там, куда попадают,
     когда что-то не так. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--page);
  color: var(--text-primary);
  font-family: var(--font);
  /* 16px на телефоне — меньше нельзя, iOS начнёт приближать поля ввода */
  font-size: 16px;
  line-height: 1.55;
  font-feature-settings: 'kern' 1;
  text-rendering: optimizeLegibility;
}

/* Цифра всегда моноширинная с табличными знаками: в колонке числа обязаны
   стоять друг под другом, иначе таблицу нельзя читать сверху вниз. */
.num, td.num, th.num, .stat-value, .rank-value {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { color: var(--accent-ink); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }

@media (min-width: 48rem) {
  h1 { font-size: 2.1rem; }
  h2 { font-size: 1.45rem; }
}

p { margin: 0 0 var(--s4); max-width: var(--measure); }

/* Надстрочная метка раздела: капитель с разрядкой, как в сборниках */
.eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ------------------------------------------------------------------- сетка */

.wrap {
  width: 100%;
  max-width: 76rem;
  margin: 0 auto;
  padding-inline: var(--gutter);
}

@media (min-width: 48rem) { :root { --gutter: var(--s5); } }
@media (min-width: 64rem) { :root { --gutter: var(--s6); } }

/* Градусная сетка: волосяная вертикаль слева от блока. Появляется только
   там, где есть место — на телефоне она съедала бы колонку текста. */
.meridian { position: relative; }
@media (min-width: 64rem) {
  .meridian { padding-left: var(--s5); }
  .meridian::before {
    content: '';
    position: absolute;
    left: 0; top: 0.35em; bottom: 0.2em;
    border-left: 1px solid var(--border);
  }
}

/* ----------------------------------------------------------------- шапка */

.site-head {
  border-bottom: 1px solid var(--border);
  background: var(--surface-1);
}
.site-head__bar {
  display: flex;
  align-items: center;
  gap: var(--s4);
  min-height: 56px;
}
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s2);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  text-decoration: none;
  white-space: nowrap;
}
.brand__mark {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--accent);
  letter-spacing: 0;
}
.site-head__spacer { flex: 1; }

/* Навигация: на телефоне ящик, с планшета строка */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* палец требует 44px */
  min-width: 44px; min-height: 44px;
  margin-right: calc(var(--s2) * -1);
  background: none;
  border: 0;
  color: var(--text-primary);
  cursor: pointer;
  font: inherit;
}
.nav {
  display: none;
  padding-bottom: var(--s3);
}
.nav[data-open="1"] { display: block; }
.nav__list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}
.nav__list a {
  display: block;
  padding: var(--s3) var(--s2);
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.nav__list a:hover { background: var(--surface-2); color: var(--text-primary); }
.nav__list a[aria-current="page"] { color: var(--text-primary); font-weight: 500; }

@media (min-width: 48rem) {
  .nav-toggle { display: none; }
  .nav { display: block !important; padding: 0; }
  .nav__list { flex-direction: row; gap: var(--s4); align-items: center; }
  .nav__list a { padding: var(--s2) 0; }
  .nav__list a:hover { background: none; text-decoration: underline; }
}

.theme-toggle {
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  font: inherit; font-size: 0.85rem;
}
.theme-toggle:hover { border-color: var(--border-strong); color: var(--text-primary); }

/* --------------------------------------------------------------- страница */

main { padding-block: var(--s5) var(--s8); }
.stack > * + * { margin-top: var(--s5); }
.stack-tight > * + * { margin-top: var(--s3); }

.crumbs {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: var(--s3);
}
.crumbs a { color: var(--text-secondary); }
.crumbs span + span::before { content: ' / '; color: var(--baseline); }

.page-head { margin-bottom: var(--s5); }
.page-head h1 { margin-bottom: var(--s2); }
.page-head__sub {
  color: var(--text-secondary);
  font-size: 0.95rem;
  max-width: var(--measure);
}

/* Линейка-разделитель раздела, с подписью слева */
.rule {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: var(--s6) 0 var(--s4);
  border-top: 1px solid var(--border-strong);
  padding-top: var(--s3);
}
/* Заголовок не сжимался вовсе, и на узком экране строка вылезала за край:
   «Показатели со свежими данными» плюс «доведены до 2025 года» не влезают в
   390 пикселей, и подпись уезжала на 27 пикселей вправо. Разрешаем и
   заголовку переноситься, и подписи уходить на свою строку — что из двух
   выберет браузер, зависит от длины, и оба варианта читаются. */
.rule { flex-wrap: wrap; }
.rule h2 { flex: 1 1 auto; min-width: 0; }
.rule__note {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* --------------------------------------------------- плашки опорных чисел */

/* Опорное число — не график. Когда ответ это одна величина, её и надо
   показать крупно, а не рисовать вокруг неё диаграмму. */
.stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (min-width: 30rem) { .stats { grid-template-columns: 1fr 1fr; } }
@media (min-width: 60rem) { .stats--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 60rem) { .stats--3 { grid-template-columns: repeat(3, 1fr); } }

.stat {
  background: var(--surface-1);
  padding: var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}
.stat__label {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.3;
}
.stat-value {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
@media (min-width: 48rem) { .stat-value { font-size: 1.75rem; } }
.stat__unit {
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-muted);
}
.stat__note { font-size: 0.78rem; color: var(--text-secondary); }

/* Герой-число страницы показателя: одно, крупное, с годом */
.hero-figure {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s3);
  margin-bottom: var(--s2);
}
.hero-figure__value {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 2.6rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
}
@media (min-width: 48rem) { .hero-figure__value { font-size: 3.4rem; } }
.hero-figure__unit { color: var(--text-secondary); font-size: 1rem; }
.hero-figure__year {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Изменение: направление несёт знак и слово, не только цвет */
.delta { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 0.85rem; }
.delta--up   { color: var(--div-pos); }
.delta--down { color: var(--div-neg); }
.delta--flat { color: var(--text-muted); }

/* ------------------------------------------------------------------ график */

figure.chart {
  margin: 0;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s4);
}
figure.chart > svg { display: block; width: 100%; height: auto; }
figure.chart figcaption {
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--gridline);
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Легенда: при двух и более рядах есть всегда, опознание не только цветом */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  margin-bottom: var(--s3);
  font-size: 0.85rem;
}
.legend__item { display: inline-flex; align-items: center; gap: var(--s2); }
.legend__swatch {
  width: 12px; height: 12px;
  flex: 0 0 auto;
  border-radius: 2px;
  /* кольцо цвета бумаги: на пересечении марок край остаётся виден */
  box-shadow: 0 0 0 2px var(--surface-1);
}
.legend__label { color: var(--text-secondary); }

/* --------------------------------------------------------------- таблицы */

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-1);
  /* широкая таблица прокручивается внутри себя, страница — никогда */
  -webkit-overflow-scrolling: touch;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
caption {
  text-align: left;
  padding: var(--s3) var(--s4);
  font-size: 0.8rem;
  color: var(--text-muted);
  border-bottom: 1px solid var(--gridline);
}
th, td {
  padding: var(--s2) var(--s4);
  text-align: left;
  border-bottom: 1px solid var(--gridline);
  white-space: nowrap;
}
thead th {
  position: sticky; top: 0;
  background: var(--surface-1);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-strong);
}
td.num, th.num { text-align: right; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--surface-2); }
td.name { white-space: normal; min-width: 12rem; }

/* ------------------------------------------------------- мировой рейтинг */

/* Рейтинг: задача цвета здесь — величина, а не опознание, поэтому полоса
   одного тона, а не палитра по регионам. Регион остаётся подписью. */
.rank-list { list-style: none; margin: 0; padding: 0; }
.rank-row {
  display: grid;
  grid-template-columns: 2.5rem 1fr auto;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--gridline);
}
.rank-row:last-child { border-bottom: 0; }
.rank-row--self {
  background: var(--accent-soft);
  margin-inline: calc(var(--s3) * -1);
  padding-inline: var(--s3);
  border-radius: var(--radius-sm);
}
.rank-place {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: right;
}
.rank-name { min-width: 0; }
.rank-name a { color: var(--text-primary); text-decoration: none; }
.rank-name a:hover { text-decoration: underline; }
.rank-region { display: block; font-size: 0.75rem; color: var(--text-muted); }
.rank-right {
  display: flex; align-items: center; gap: var(--s3);
  justify-self: end;
}
.rank-bar {
  display: none;
  width: clamp(4rem, 18vw, 12rem);
  height: 10px;
  background: var(--surface-2);
  border-radius: 2px;
  overflow: hidden;
}
@media (min-width: 36rem) { .rank-bar { display: block; } }
.rank-bar__fill {
  display: block; height: 100%;
  background: var(--seq-3);
  /* скруглён только конец данных, прижатый к нулю край — прямой */
  border-radius: 0 2px 2px 0;
}
.rank-value { font-size: 0.9rem; min-width: 5.5rem; text-align: right; }

/* ------------------------------------------------------- сетки и карточки */

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s3);
}
@media (min-width: 36rem) { .grid--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 48rem) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 62rem) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* Карточки держит линейка, а не тень: плитки с тенями дробят страницу */
.card {
  display: block;
  padding: var(--s4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-1);
  color: inherit;
  text-decoration: none;
}
a.card:hover { border-color: var(--border-strong); }
.card__title { display: block; font-weight: 500; margin-bottom: var(--s1); }
.card__meta { display: block; font-size: 0.8rem; color: var(--text-muted); }

/* Список ссылок в колонках — каталог показателей раздела */
.link-cols { columns: 1; column-gap: var(--s6); }
@media (min-width: 40rem) { .link-cols { columns: 2; } }
@media (min-width: 62rem) { .link-cols { columns: 3; } }
.link-cols ul { list-style: none; margin: 0; padding: 0; }
.link-cols li { break-inside: avoid; padding: var(--s1) 0; }
.link-cols a { color: var(--text-primary); text-decoration: none; }
.link-cols a:hover { text-decoration: underline; color: var(--accent); }

/* --------------------------------------------------------------- элементы */

.search { display: flex; gap: var(--s2); max-width: 34rem; }
.search input {
  flex: 1;
  min-height: 44px;
  padding: var(--s2) var(--s3);
  font: inherit;
  font-size: 16px;
  color: var(--text-primary);
  background: var(--surface-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}
.search input::placeholder { color: var(--text-muted); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--s2) var(--s4);
  font: inherit;
  font-weight: 500;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--ink-fill);
  color: var(--on-ink);
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: var(--ink-fill-hover); color: var(--on-ink); }
.btn--quiet {
  background: none;
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.btn--quiet:hover { background: var(--surface-2); color: var(--text-primary); }

/* Быстрые пресеты и фильтры — одной строкой над содержимым */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip {
  display: inline-flex; align-items: center;
  min-height: 36px;
  padding: var(--s1) var(--s3);
  font-size: 0.85rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-1);
  color: var(--text-secondary);
  text-decoration: none;
}
.chip:hover { border-color: var(--border-strong); color: var(--text-primary); }
.chip[aria-current="true"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* Пометка о качестве данных: сайт не должен врать про свежесть */
.flag {
  display: inline-block;
  padding: 1px var(--s2);
  font-size: 0.72rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  background: var(--surface-2);
  white-space: nowrap;
}

.note {
  padding: var(--s3) var(--s4);
  border-left: 2px solid var(--border-strong);
  background: var(--surface-1);
  font-size: 0.88rem;
  color: var(--text-secondary);
}
.note p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ подвал */

/* Содержимое растягивается, подвал — нет: так подвал оказывается внизу и на
   короткой странице, и на длинной. */
main { flex: 1 0 auto; }
.site-foot { flex: 0 0 auto; }
.site-foot {
  margin-top: var(--s8);
  padding-block: var(--s5);
  border-top: 1px solid var(--border);
  background: var(--surface-1);
  font-size: 0.85rem;
  color: var(--text-muted);
}
.site-foot a { color: var(--text-secondary); }
.site-foot__hint { color: var(--text-muted); font-size: 0.85em; }

/* Форма сообщения об ошибке. Узкая нарочно: широкое поле ввода просит
   длинного текста, а нам нужны две фразы по делу. */
.report { max-width: 34rem; display: grid; gap: var(--s2); }
.report__label { font-size: 0.9rem; color: var(--text-secondary); }
.report__text, .report__input {
  width: 100%; box-sizing: border-box;
  font: inherit; font-size: 1rem;
  color: var(--text-primary); background: var(--surface-1);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: var(--s2) var(--s3);
}
.report__text { resize: vertical; min-height: 7rem; }
.report__text:focus, .report__input:focus {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.report .btn { justify-self: start; }
/* Ловушка не должна быть видна человеку и не должна попадать под табуляцию.
   `display:none` не годится: часть программ его распознаёт и поле пропускает. */
.report__trap { position: absolute; left: -9999px; width: 1px; height: 1px;
                overflow: hidden; }
.report__actions { display: flex; align-items: center; gap: var(--s3); margin: 0; }
.report__msg { font-size: 0.9rem; color: var(--text-secondary); }

/* Окошко сообщения об ошибке. Ширина по тексту, а не во весь экран: форма
   из трёх полей, растянутая на монитор, выглядит анкетой. */
.report-dialog {
  width: min(34rem, calc(100vw - 2rem));
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--page);
  color: var(--text-primary);
  padding: var(--s5);
}
.report-dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
.report-dialog h2 { margin: 0 0 var(--s2); }
.report-dialog__lead { margin: 0 0 var(--s4); color: var(--text-secondary); }
.report-dialog__close { float: right; margin: calc(var(--s3) * -1) calc(var(--s3) * -1) 0 0; }
.report-dialog__close button {
  border: 0; background: none; cursor: pointer; padding: var(--s2);
  font-size: 1.4rem; line-height: 1; color: var(--text-muted);
}
.report-dialog__close button:hover { color: var(--text-primary); }
.site-foot__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s4);
}
@media (min-width: 48rem) { .site-foot__cols { grid-template-columns: repeat(3, 1fr); } }

/* ------------------------------------------------------------ доступность */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link {
  position: absolute;
  left: var(--s3); top: var(--s3);
  transform: translateY(-200%);
  z-index: 10;
  padding: var(--s2) var(--s3);
  background: var(--ink-fill);
  color: var(--on-ink);
  border-radius: var(--radius-sm);
}
.skip-link:focus { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .site-head, .site-foot, .nav, .theme-toggle, .chips { display: none; }
  body { background: #fff; color: #000; }
  figure.chart, .table-scroll { border-color: #999; }
}

/* ================================================================= график
   Разметку рисует Chart.php, оформление живёт здесь: цвета берутся из
   переменных, поэтому тёмная тема — это другой набор ступеней, а не
   инверсия светлой.

   Правило `.hover-col { fill: transparent }` обязательно: слой наведения
   это прямоугольники поверх графика, и без явной заливки браузер красит их
   чёрным — график целиком уходит под чёрные полосы.
   ========================================================================= */

svg.chart { width: 100%; height: auto; display: block; overflow: visible; }

.chart .grid line    { stroke: var(--gridline); stroke-width: 1; }
.chart .baseline     { stroke: var(--baseline); stroke-width: 1; }
.chart .tick         { fill: var(--text-muted); font-size: 12px;
                       font-family: var(--mono); font-variant-numeric: tabular-nums; }
.chart .direct-label { fill: var(--text-secondary); font-size: 12px; }

/* Опорные события: год, о котором читатель и так помнит. Черта нарочно
   бледнее сетки значений и пунктирная — это фон, по которому читают линии,
   а не ещё один ряд данных. Подпись строчными и мелкая по той же причине. */
.chart .mark         { stroke: var(--gridline); stroke-width: 1;
                       stroke-dasharray: 3 4; }
.chart .mark-label   { fill: var(--text-muted); font-size: 11px; }
.chart .empty        { color: var(--text-muted); }

/* Марка тонкая: линия 2px, точка не меньше 8px с кольцом цвета бумаги —
   на пересечении рядов край остаётся виден. */
.chart .line { stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; fill: none; }
.chart .dot  { stroke: var(--surface-1); stroke-width: 2; }

.chart .s1 .line, .chart .s1 .dot { stroke: var(--series-1); }
.chart .s2 .line, .chart .s2 .dot { stroke: var(--series-2); }
.chart .s3 .line, .chart .s3 .dot { stroke: var(--series-3); }
.chart .s4 .line, .chart .s4 .dot { stroke: var(--series-4); }
.chart .s1 .dot { fill: var(--series-1); }
.chart .s2 .dot { fill: var(--series-2); }
.chart .s3 .dot { fill: var(--series-3); }
.chart .s4 .dot { fill: var(--series-4); }
.chart .s5 .line, .chart .s5 .dot { stroke: var(--series-5); }
.chart .s6 .line, .chart .s6 .dot { stroke: var(--series-6); }
.chart .s7 .line, .chart .s7 .dot { stroke: var(--series-7); }
.chart .s8 .line, .chart .s8 .dot { stroke: var(--series-8); }
.chart .s9 .line, .chart .s9 .dot { stroke: var(--series-9); }
.chart .s10 .line, .chart .s10 .dot { stroke: var(--series-10); }
.chart .s5 .dot { fill: var(--series-5); }
.chart .s6 .dot { fill: var(--series-6); }
.chart .s7 .dot { fill: var(--series-7); }
.chart .s8 .dot { fill: var(--series-8); }
.chart .s9 .dot { fill: var(--series-9); }
.chart .s10 .dot { fill: var(--series-10); }


.chart .hover-col { fill: transparent; }
.chart .crosshair { stroke: var(--baseline); stroke-width: 1; stroke-dasharray: 3 3; }
.chart .marker    { stroke: var(--surface-1); stroke-width: 2; }

.chart .bar       { fill: var(--seq-3); }
.chart .bar-label { fill: var(--text-secondary); font-size: 12.5px; }
.chart .bar-value { fill: var(--text-secondary); font-size: 12.5px;
                    font-family: var(--mono); font-variant-numeric: tabular-nums; }
.chart .bar-row:hover .bar { fill: var(--seq-5); }

.chart--columns .bar { fill: var(--seq-3); }
.chart--columns .col:hover .bar { fill: var(--seq-5); }

/* стопка областей: между заливками зазор цвета бумаги, иначе границы слипаются */
.chart--area .area      { stroke: none; }
.chart--area .area-edge { stroke: var(--surface-1); stroke-width: 2; }
.chart--area .s1 .area { fill: var(--series-1); }
.chart--area .s2 .area { fill: var(--series-2); }
.chart--area .s3 .area { fill: var(--series-3); }
.chart--area .s4 .area { fill: var(--series-4); }
.chart--area .s5 .area, .chart--area .s6 .area, .chart--area .s7 .area,
.chart--area .s8 .area, .chart--area .s9 .area, .chart--area .s10 .area { fill: var(--control); }

/* теплокарта: один тон, пять ступеней */
.chart--heat .heat-col { fill: var(--text-secondary); font-size: 11px; }
.chart--heat .heat-row { fill: var(--text-secondary); font-size: 12px; }
.chart--heat .cell     { stroke: none; }
.chart--heat .cell.b0  { fill: var(--seq-1); }
.chart--heat .cell.b1  { fill: var(--seq-2); }
.chart--heat .cell.b2  { fill: var(--seq-3); }
.chart--heat .cell.b3  { fill: var(--seq-4); }
.chart--heat .cell.b4  { fill: var(--seq-5); }
.chart--heat .cell.b5  { fill: var(--seq-5); }
.chart--heat .cell.b6  { fill: var(--seq-5); }
.chart--heat .cell:hover { stroke: var(--text-primary); stroke-width: 1.5; }

.chart--donut .slice { stroke: var(--surface-1); stroke-width: 2; }
.chart--donut .s1 .slice, .chart--donut .s1 .swatch { fill: var(--series-1); }
.chart--donut .s2 .slice, .chart--donut .s2 .swatch { fill: var(--series-2); }
.chart--donut .s3 .slice, .chart--donut .s3 .swatch { fill: var(--series-3); }
.chart--donut .s4 .slice, .chart--donut .s4 .swatch { fill: var(--series-4); }
.chart--donut .s5 .slice, .chart--donut .s6 .slice { fill: var(--control); }
.chart--donut .key-label   { fill: var(--text-primary); font-size: 14px; }
.chart--donut .key-value   { fill: var(--text-muted); font-size: 12.5px;
                             font-family: var(--mono); font-variant-numeric: tabular-nums; }
.chart--donut .donut-total { fill: var(--text-secondary); font-size: 20px;
                             font-family: var(--mono); font-variant-numeric: tabular-nums; }

.chart--multiples .cell-title { fill: var(--text-secondary); font-size: 12px; }
.chart--multiples .cell-base  { stroke: var(--gridline); stroke-width: 1; }
.chart--multiples .line       { stroke-width: 1.75; stroke-linejoin: round; }

/* полосы отклонения: два полюса и серая середина, без тона в нуле */
.chart--diverging .bar.pos  { fill: var(--div-pos); }
.chart--diverging .bar.neg  { fill: var(--div-neg); }
.chart--diverging .midline  { stroke: var(--baseline); stroke-width: 1.5; }
.chart--diverging .axis-note{ fill: var(--text-muted); font-size: 12px; }

.chart--slope .slope-axis  { stroke: var(--gridline); stroke-width: 1; }
.chart--slope .axis-note   { fill: var(--text-secondary); font-size: 13px; font-weight: 600; }
.chart--slope .slope-label { fill: var(--text-secondary); font-size: 12px;
                             font-family: var(--mono); font-variant-numeric: tabular-nums; }
.chart--slope .slope-line  { stroke-width: 1.5; opacity: .45; }
.chart--slope .named .slope-line { stroke-width: 2.5; opacity: 1; }
.chart--slope .slope-dot   { opacity: .45; stroke: var(--surface-1); stroke-width: 1.5; }
.chart--slope .named .slope-dot { opacity: 1; }
.chart--slope .pos .slope-line, .chart--slope .pos .slope-dot { stroke: var(--div-pos); fill: var(--div-pos); }
.chart--slope .neg .slope-line, .chart--slope .neg .slope-dot { stroke: var(--div-neg); fill: var(--div-neg); }
.chart--slope .leader { stroke: var(--text-muted); stroke-width: 1; opacity: .55; }

.spark { stroke: var(--series-1); stroke-width: 1.5; fill: none; }
.spark--bars rect { fill: var(--seq-3); }

.chart text title { pointer-events: none; }
.chart .cell-title, .chart .bar-label, .chart .heat-row,
.chart .heat-col, .chart .slope-label, .chart .key-label { cursor: help; }

/* Точечный график рейтинга: дорожка во всю ширину, величину несёт положение
   точки, а не длина. Дорожка одинаковая у всех строк намеренно — иначе глаз
   начнёт читать её длину как величину. */
.chart--dots .dot-track { stroke: var(--gridline); stroke-width: 1; }
.chart--dots .rank-dot  { fill: var(--seq-4); stroke: var(--surface-1); stroke-width: 2; }
.chart--dots .dot-row:hover .rank-dot { fill: var(--seq-5); }

/* Дорожка с точкой в списке рейтинга: положение вместо длины. Ставится там,
   где значения жмутся в узкий коридор и полоса от нуля неинформативна. */
.rank-track {
  display: none;
  position: relative;
  width: clamp(4rem, 18vw, 12rem);
  height: 12px;
}
@media (min-width: 36rem) { .rank-track { display: block; } }
.rank-track::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: var(--gridline);
}
.rank-track__dot {
  position: absolute;
  top: 50%;
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--seq-4);
  box-shadow: 0 0 0 2px var(--surface-1);
}

/* На телефоне SVG сжимается вместе с подписями: при ширине экрана 390px
   двенадцатипиксельная подпись превращается в четыре пикселя и не читается.
   Поэтому график не ужимается ниже разумного, а прокручивается внутри себя.
   Страница при этом горизонтально не едет — прокрутка живёт в обёртке. */
.chart-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
@media (max-width: 40rem) {
  .chart-scroll > svg.chart { min-width: 34rem; }
  /* Подписи внутри SVG заданы в единицах системы координат, поэтому на узком
     экране их поднимаем — вместе с масштабом они дают ту же кегль. */
  .chart .tick, .chart .bar-value { font-size: 15px; }
  .chart .bar-label, .chart .direct-label { font-size: 15.5px; }
}
@media (max-width: 40rem) {
  /* Подсказка нужна: обрезанный справа график иначе выглядит сломанным. */
  figure.chart figcaption::after { content: ' График прокручивается вбок.'; }
}

/* Постраничная навигация. Номера — ссылки, а не кнопки: поисковый робот
   кнопок не нажимает, и без ссылок вторая сотня стран в индекс не попадёт. */
.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--border);
}
.pager__num, .pager__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px; min-height: 44px;
  padding: 0 var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
  color: var(--text-secondary);
  text-decoration: none;
}
.pager__step { font-family: var(--font); }
.pager__num:hover, .pager__step:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.pager__num--now {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 500;
}
.pager__gap { color: var(--text-muted); padding-inline: var(--s1); }

/* Блок связного текста.
   Мера строки ограничена намеренно: строка в сто с лишним знаков читается
   плохо, глаз теряет начало следующей. Но узкая колонка, прижатая к левому
   краю под таблицей во всю ширину, выглядит недоделкой.
   Поэтому на широком экране текст идёт в две колонки: ширину страницы
   занимает, а строка остаётся читаемой. Это же решение в наборных
   справочниках и статистических сборниках. */
.prose { max-width: var(--measure); margin-block: var(--s5); }
.prose p { margin-bottom: var(--s3); }
.prose p:last-child { margin-bottom: 0; }

@media (min-width: 60rem) {
  .prose {
    max-width: none;
    columns: 2;
    column-gap: var(--s8);
  }
  /* Абзац не должен разрываться между колонками: половина мысли внизу одной,
     половина вверху другой — читать невозможно. */
  .prose p { break-inside: avoid; margin-bottom: var(--s4); }
}
/* Одиночный абзац в две колонки не ставим: получится обрывок в полстраницы. */
.prose--single { columns: 1 !important; max-width: var(--measure) !important; }

/* Раскрывающийся блок про методику. Закрыт по умолчанию: человеку с запросом
   «ВВП Германии» методика не нужна, а тому, кто дочитал, — нужна. */
.method { margin-block: var(--s4); }
.method > summary {
  cursor: pointer;
  padding: var(--s2) 0;
  font-weight: 500;
  color: var(--text-secondary);
}
.method > summary:hover { color: var(--text-primary); }
.method .note { margin-top: var(--s2); }
.note--src { color: var(--text-muted); font-size: 0.85rem; }

/* Поиск внутри страницы: тот же элемент, что на главной, но в строку
   с кнопкой сброса. */
.search--inline { max-width: 40rem; margin-bottom: var(--s4); flex-wrap: wrap; }

/* Разбор — связный текст, а не справка: строка чуть шире, между абзацами
   больше воздуха, в одну колонку. Две колонки годятся для трёх предложений
   под таблицей, но не для статьи на четыре абзаца. */
.prose--article { columns: 1 !important; max-width: 42rem !important; font-size: 1.05rem; }
.prose--article p { margin-bottom: var(--s4); }
.post-meta { font-size: 0.85rem; color: var(--text-muted); }

/* ============================================================== подсказка
   Показывает значения всех рядов за тот год, над которым мышь. Единственное
   место на сайте, где элемент по-настоящему всплывает над страницей, — здесь
   тень уместна, потому что подсказка перекрывает график. */
.tooltip {
  position: absolute;
  z-index: 5;
  display: none;
  min-width: 11rem;
  max-width: 22rem;
  padding: var(--s2) var(--s3);
  background: var(--surface-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-pop);
  font-size: 0.82rem;
  /* Подсказка следует за мышью и сама события не ловит: иначе она заслоняла
     бы тот самый столбец, который её вызвал, и мигала бы. */
  pointer-events: none;
}
.tooltip .t-period {
  margin-bottom: var(--s2);
  padding-bottom: var(--s1);
  border-bottom: 1px solid var(--gridline);
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--text-muted);
}
.tooltip ul { margin: 0; padding: 0; list-style: none; }
.tooltip li {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 1px 0;
  white-space: nowrap;
}
.tooltip .swatch {
  width: 9px; height: 9px;
  flex: none;
  border-radius: 2px;
}
.tooltip .t-name {
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
}
.tooltip .t-val {
  margin-left: auto;
  padding-left: var(--s3);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.tooltip .swatch.s1  { background: var(--series-1); }
.tooltip .swatch.s2  { background: var(--series-2); }
.tooltip .swatch.s3  { background: var(--series-3); }
.tooltip .swatch.s4  { background: var(--series-4); }
.tooltip .swatch.s5  { background: var(--series-5); }
.tooltip .swatch.s6  { background: var(--series-6); }
.tooltip .swatch.s7  { background: var(--series-7); }
.tooltip .swatch.s8  { background: var(--series-8); }
.tooltip .swatch.s9  { background: var(--series-9); }
.tooltip .swatch.s10 { background: var(--series-10); }

/* Точка на линии под курсором: кольцо цвета бумаги, чтобы она читалась и
   там, где линии пересекаются. */
.chart .marker { stroke: var(--surface-1); stroke-width: 2; }
.chart .marker.s1  { fill: var(--series-1); }
.chart .marker.s2  { fill: var(--series-2); }
.chart .marker.s3  { fill: var(--series-3); }
.chart .marker.s4  { fill: var(--series-4); }
.chart .marker.s5  { fill: var(--series-5); }
.chart .marker.s6  { fill: var(--series-6); }
.chart .marker.s7  { fill: var(--series-7); }
.chart .marker.s8  { fill: var(--series-8); }
.chart .marker.s9  { fill: var(--series-9); }
.chart .marker.s10 { fill: var(--series-10); }

/* Слой наведения должен ловить мышь — иначе подсказка не появится. */
.chart .hover-col { fill: transparent; pointer-events: all; }

/* Прямой ответ на странице поиска. Выделен рамкой посильнее обычной карточки:
   это не «ещё один результат», а ответ на заданный вопрос. */
.card--direct {
  border-color: var(--accent);
  background: var(--accent-soft);
  margin-bottom: var(--s5);
}
.card--direct .card__title { font-size: 1.15rem; margin-block: var(--s1); }
.card--direct .eyebrow { color: var(--accent-ink); }

/* ----------------------------------------------------------------- карта */
/* Карта мира по показателю. Цвета — та же последовательная шкала, что у
   остальной графики: один тон, пять ступеней, проверена на различимость при
   дальтонизме. Ступени считаются по квантилям (см. lib/WorldMap.php), потому
   что при равных долях от минимума до максимума вся карта, кроме двух стран,
   красится одним цветом. */
.map-figure { margin: 2rem 0; }
.map-scroll { overflow-x: auto; }
.map { display: block; width: 100%; height: auto; min-width: 30rem; }
.map__none { fill: var(--seq-none); stroke: var(--page); stroke-width: 0.4; }
.map__c { stroke: var(--page); stroke-width: 0.4; transition: opacity .12s; }
.map__c--0 { fill: var(--seq-1); }
.map__c--1 { fill: var(--seq-2); }
.map__c--2 { fill: var(--seq-3); }
.map__c--3 { fill: var(--seq-4); }
.map__c--4 { fill: var(--seq-5); }
/* Наведение подсвечивает страну обводкой чернилами: менять заливку нельзя —
   цвет заливки здесь несёт значение. */
.map a:hover .map__c,
.map a:focus .map__c { stroke: var(--ink-fill); stroke-width: 1.2; }
.map a:focus { outline: none; }

.map-legend {
  display: flex; flex-wrap: wrap; gap: .35rem 1.1rem;
  margin-top: .7rem; font-size: .82rem; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.map-legend__item { display: inline-flex; align-items: center; gap: .35rem; }
.map-legend__swatch {
  width: .95rem; height: .95rem; border-radius: 2px; display: inline-block;
  border: 1px solid rgba(0,0,0,.08);
}
/* У контура на карте цвет задаётся заливкой SVG, у квадратика в легенде —
   фоном. Один и тот же класс для обоих не работает, поэтому фон прописан
   отдельно — иначе легенда выходит из пустых рамок. */
.map-legend__swatch.map__c--0 { background: var(--seq-1); }
.map-legend__swatch.map__c--1 { background: var(--seq-2); }
.map-legend__swatch.map__c--2 { background: var(--seq-3); }
.map-legend__swatch.map__c--3 { background: var(--seq-4); }
.map-legend__swatch.map__c--4 { background: var(--seq-5); }
.map-legend__swatch.map__none { background: var(--seq-none); }

/* Строка выбранной страны. Стоит над картой, а не всплывает над курсором:
   всплывающая подсказка закрывает соседние страны — то есть ровно то, с чем
   человек сравнивает. */
.map-readout {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .9rem;
  min-height: 1.9rem; margin-bottom: .5rem;
  font-variant-numeric: tabular-nums;
}
.map-readout strong { font-size: 1.05rem; }
.map-readout__val { color: var(--accent); font-weight: 500; }
.map-readout__rank, .map-readout__hint { color: var(--text-muted); font-size: .88rem; }
.map-readout__go { color: var(--text-muted); font-size: .82rem; }

/* Выбранная страна обводится чернилами поверх остальных: заливку менять
   нельзя, она несёт значение. */
.map a.is-picked .map__c { stroke: var(--ink-fill); stroke-width: 1.4; }
.map a.is-picked { outline: none; }
.map.is-dragging { cursor: grabbing; }
.map { cursor: grab; touch-action: pan-y; }

.map-tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  margin-top: .5rem; font-size: .85rem;
}
.map-tools button {
  font: inherit; line-height: 1; padding: .35rem .6rem; cursor: pointer;
  color: var(--text-primary); background: var(--surface-1);
  border: 1px solid var(--border); border-radius: 3px;
}
.map-tools button:hover { border-color: var(--border-strong); }
.map-tools__note { color: var(--text-muted); margin-left: auto; }

/* ------------------------------------------------------------ встраивание */
/* Блок «вставить к себе» свёрнут: он нужен одному читателю из сотни, а место
   занимал бы у всех. Раскрытым он показывает код текстом, а не одной кнопкой,
   — часть людей копирует выделением, и на телефоне это единственный способ. */
.embed { margin: var(--s4) 0; font-size: .92rem; }
.embed > summary {
  cursor: pointer; color: var(--text-muted);
  padding: .3rem 0; list-style-position: inside;
}
.embed > summary:hover { color: var(--text-primary); }
.embed__note { color: var(--text-muted); margin: .4rem 0 .5rem; }
.embed__code {
  margin: 0 0 .6rem; padding: .6rem .7rem; overflow-x: auto;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .82rem; line-height: 1.5; white-space: pre-wrap; word-break: break-all;
}
.embed__acts { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.btn--small { min-height: 36px; padding: .35rem .8rem; font-size: .9rem; }

/* ---------------------------------------------------------- оглавление страницы */
/* Страница страны — четырнадцать разделов и сто килобайт. Без оглавления её
   листают вслепую. Липким на десктопе не делаем: оно отъедает высоту у
   графиков, а до нужного раздела и так один прыжок. */
.toc {
  display: flex; flex-wrap: wrap; gap: .35rem .6rem; align-items: baseline;
  margin: var(--s4) 0; padding: .6rem .7rem;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-size: .92rem;
}
.toc__label { color: var(--text-muted); }
.toc a { text-decoration: none; border-bottom: 1px solid var(--border-strong); }
.toc a:hover { border-bottom-color: currentColor; }
/* Заголовок не должен прятаться под верхний край при переходе по якорю. */
.rule h2[id] { scroll-margin-top: .8rem; }

/* ------------------------------------------------------- панель распространения */
/* Одна строка под графиком: ссылка, картинка, файл, код рамки. Кнопки
   спокойные — это не призыв к действию, а инструмент для тех, кому нужно. */
.share {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin: var(--s4) 0 0;
}
.share__label { color: var(--text-muted); font-size: .92rem; margin-right: .2rem; }
.share + .embed { margin-top: .6rem; }