/* ============================================================================
   Росстат в графиках — оформление сайта.

   Направление: статистический ежегодник. Строгая сетка, волосяные линейки
   вместо рамок и теней, таблично выровненные цифры, одна краска-акцент. Это
   не выбранный наугад «современный вид», а традиция, в которой статистику
   печатают и читают: швейцарская типографика статистических сборников, где
   форма подчинена числу.

   Три следствия для всех правил ниже:
   1. Цвет — это информация. Единственный акцент интерфейса совпадает с
      первым цветом ряда на графиках: график здесь главный, и рамка вокруг
      него не должна спорить с ним другой краской.
   2. Линейка вместо коробки. Волосяная линия отделяет не хуже рамки и не
      дробит страницу на плитки.
   3. Цифра набирается моноширинным с табличными знаками, текст — гротеском.
      Числа в колонках обязаны стоять друг под другом.

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

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

@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 700;
  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+0131, U+0152-0153, U+02BB-02BC, 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+0131, U+0152-0153, 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+0131, U+0152-0153, U+2000-206F, U+2122, U+2212;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/golos-700-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: 700;
  font-display: swap;
  src: url('/assets/fonts/golos-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, 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+0131, U+0152-0153, 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+0131, U+0152-0153, U+2000-206F, U+2122, U+2212;
}

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

:root {
  color-scheme: light;

  /* Бумага статистического сборника: манила, чуть желтее белого. На ней
     колонка цифр не слепит, а тёплые чернила читаются мягче чёрного.
     Интерфейс здесь намеренно без цвета: краска на странице бывает только
     внутри графиков, потому что цвет тут значит данные. Единственная
     краска обвязки — вермильон, которым в печатных сборниках отмечали
     важное; он не встречается среди рядов и потому ни с чем не спорит. */
  --page:           #f0ebe0;
  --surface-1:      #faf7f0;
  --surface-2:      #e7e1d3;
  --text-primary:   #1a1712;
  --text-secondary: #57524a;
  --text-muted:     #6c6659;
  --gridline:       #ddd6c6;
  --baseline:       #b8b0a0;
  --border:         #d7cfbe;
  --border-strong:  #bdb4a1;
  --control:        #8a8375;
  --accent:         #b8402c;
  --accent-soft:    #f6e5e0;
  --accent-ink:     #96331f;
  /* Заливка кнопок — чернила, а не краска: главная кнопка не должна
     конкурировать по яркости с линией графика рядом. */
  --ink-fill:       #1a1712;
  --ink-fill-hover: #35302a;
  --on-ink:         #faf7f0;

  /* Категориальная палитра рядов. Проверена на различимость при дальтонизме;
     первый цвет он же акцент интерфейса. */
  --series-1: #1f6fd0;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #c2417f;
  --series-6: #008300;
  --series-7: #4a3aa7;
  --series-8: #00868c;
  --series-9: #8a5a2b;
  --series-10: #7b7f00;

  /* последовательная шкала (теплокарта): один тон, светлый→тёмный */
  --seq-100: #dbe8fa; --seq-200: #b0cdf3; --seq-300: #7fadea; --seq-400: #4a8be0;
  --seq-500: #2a6cc4; --seq-600: #1b4f95; --seq-700: #0f3466;

  --div-pos: #1f6fd0;
  --div-neg: #c0392b;
  --div-mid: #ece9e2;

  /* Ритм. Один шаг 4px, всё остальное кратно ему: расстояния на странице
     обязаны попадать в общую сетку, иначе блоки «плывут» относительно друг
     друга. */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;

  --radius:    8px;
  --radius-sm: 5px;

  --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 30px -12px rgba(20, 19, 15, 0.28);

  --measure: 68ch;   /* длина строки, при которой текст ещё читается */
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    /* Тёмная тема — не инверсия светлой, а тот же лист при другом свете:
       тёплый уголь вместо холодного графита, чтобы бумажный характер не
       пропадал. Заливка кнопок здесь наоборот светлая. */
    --page:           #151310;
    --surface-1:      #1e1b17;
    --surface-2:      #2a2620;
    --text-primary:   #efe9dd;
    --text-secondary: #b8b1a4;
    --text-muted:     #8f887b;
    --gridline:       #322d26;
    --baseline:       #4a443b;
    --border:         #332e27;
    --border-strong:  #4a443b;
    --control:        #756d5f;
    --accent:         #e8705a;
    --accent-soft:    #3a201a;
    --accent-ink:     #f08b76;
    --ink-fill:       #efe9dd;
    --ink-fill-hover: #ffffff;
    --on-ink:         #151310;

    --series-1: #58a0f0;
    --series-2: #f0793f;
    --series-3: #2bc48c;
    --series-4: #e0a52b;
    --series-5: #e276ac;
    --series-6: #34a534;
    --series-7: #9d8ef0;
    --series-8: #3fb8bf;
    --series-9: #c08a4e;
    --series-10: #b0b52e;

    --seq-100: #12304f; --seq-200: #1a4372; --seq-300: #235a99; --seq-400: #3376c2;
    --seq-500: #5194de; --seq-600: #7fb2ea; --seq-700: #b2d0f5;

    --div-pos: #58a0f0;
    --div-neg: #ef6a68;
    --div-mid: #2a2e34;

    --shadow-pop: 0 12px 34px -14px rgba(0, 0, 0, 0.75);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page:           #151310;
  --surface-1:      #1e1b17;
  --surface-2:      #2a2620;
  --text-primary:   #efe9dd;
  --text-secondary: #b8b1a4;
  --text-muted:     #8f887b;
  --gridline:       #322d26;
  --baseline:       #4a443b;
  --border:         #332e27;
  --border-strong:  #4a443b;
  --control:        #756d5f;
  --accent:         #e8705a;
  --accent-soft:    #3a201a;
  --accent-ink:     #f08b76;
  --ink-fill:       #efe9dd;
  --ink-fill-hover: #ffffff;
  --on-ink:         #151310;

  --series-1: #58a0f0;
  --series-2: #f0793f;
  --series-3: #2bc48c;
  --series-4: #e0a52b;
  --series-5: #e276ac;
  --series-6: #34a534;
  --series-7: #9d8ef0;
  --series-8: #3fb8bf;
  --series-9: #c08a4e;
  --series-10: #b0b52e;

  --seq-100: #12304f; --seq-200: #1a4372; --seq-300: #235a99; --seq-400: #3376c2;
  --seq-500: #5194de; --seq-600: #7fb2ea; --seq-700: #b2d0f5;

  --div-pos: #58a0f0;
  --div-neg: #ef6a68;
  --div-mid: #2a2e34;

  --shadow-pop: 0 12px 34px -14px rgba(0, 0, 0, 0.75);
}

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

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

/* Скрытое атрибутом hidden обязано исчезать.

   Браузер прячет такие элементы своим правилом [hidden]{display:none}, но оно
   из служебной таблицы стилей и проигрывает любому нашему display. Из-за
   этого поиск по регионам считал совпадения и писал «найдено: 3», а карточки
   оставались на месте: у .card стоит display:flex, и он побеждал. Правило
   общее и с !important — иначе следующий display в любом новом блоке снова
   тихо отключит скрытие, а сломается это в браузере, не в тестах. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--page);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  font-feature-settings: 'ss01' on;
  -webkit-font-smoothing: antialiased;
}

/* Цифры выравниваем таблично везде, где они стоят рядами: в шапке карточек,
   в таблицах, на осях. Пропорциональные цифры съезжают, и колонка чисел
   перестаёт читаться как колонка. */
.mono, .tile-value, .topic-now-val, table.data, table.post-table,
.card .facts, .site-head .meta, .crumbs, .tag {
  font-variant-numeric: tabular-nums;
}

/* Ссылка набрана чернилами и подчёркнута, а не выкрашена в синий: на
   странице, где цвет означает данные, синяя ссылка читается как ещё один
   ряд. Краска появляется только под курсором. */
a {
  color: var(--text-primary);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color .15s ease, text-decoration-color .15s ease;
}
a:hover { color: var(--accent-ink); text-decoration-color: var(--accent); }

h1, h2, h3, h4 {
  font-weight: 600;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
}

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

/* Видимая рамка фокуса обязательна: без неё сайтом нельзя пользоваться
   с клавиатуры, а прятать её ради «чистоты» — это про вид, а не про людей. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

::selection { background: var(--accent-soft); color: var(--text-primary); }

/* width обязателен. У флекс-элемента с margin:0 auto по поперечной оси
   ширина считается по содержимому, и полоса схлопывается. */
.wrap {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding-inline: var(--s5);
}

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

/* Шапка липкая и узкая: на странице набора человек листает длинную таблицу,
   и возможность уйти в поиск не должна требовать прокрутки наверх. */
.site-head {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--page) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border);
}
/* Раскладка строкой, а не сеткой: состав шапки меняется от страницы к
   странице — на главной вместо поиска стоит счётчик, на узком экране
   добавляется кнопка меню, — и колонки под каждый случай не подобрать.
   Название прижато влево, всё остальное уходит вправо одним рядом. */
.site-head > .wrap {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding-block: var(--s3);
}
/* Название сайта выглядит одинаково везде, но тегом остаётся h1 только на
   главной: на внутренних страницах главный заголовок принадлежит их
   содержимому. Поэтому правило написано на класс, а не на тег. */
.site-head .site-name {
  margin: 0 auto 0 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  white-space: nowrap;
}
.site-head .site-name a { color: var(--text-primary); text-decoration: none; }
.site-head .site-name a:hover { text-decoration: none; color: var(--accent-ink); }

/* Подзаголовок в шапке нужен только на первом экране: дальше он повторяет
   уже понятное и занимает высоту, которой на телефоне нет. */
.site-head > .wrap > p:not(.site-name) { display: none; }

.site-head .meta {
  min-width: 0;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Поиск в шапке. Узкий и тихий: это запасной вход в каталог, а не главный
   предмет на странице. */
.head-search { display: flex; flex: 0 1 320px; min-width: 0; }
.head-search input[type="search"],
.nav-search input[type="search"] {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  font: inherit;
  font-size: 14px;
  padding: 0 var(--s3);
  color: var(--text-primary);
  background: var(--surface-1);
  border: 1px solid var(--control);
  border-radius: var(--radius-sm);
  transition: border-color .15s ease;
}
.head-search input[type="search"]:hover,
.nav-search input[type="search"]:hover { border-color: var(--border-strong); }
.head-search input[type="search"]::placeholder,
.nav-search input[type="search"]::placeholder { color: var(--text-muted); }

.theme-toggle,
.nav-burger {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 var(--s3);
  font: inherit;
  font-size: 13px;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--control);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.theme-toggle:hover,
.nav-burger:hover { color: var(--text-primary); border-color: var(--border-strong); }

/* Кнопка меню появляется только на узком экране: на широком полоса разделов
   и так на виду, и прятать её за кнопкой значит прятать без нужды. */
.nav-burger { display: none; }

/* ------------------------------------------------------------------- меню */

/* Полоса разделов — вторая строка шапки. Подчёркивание вместо заливки:
   в сборниках раздел отмечают линейкой под словом, а не плашкой вокруг, и
   активный пункт тогда не спорит по весу с заголовком страницы. */
.site-nav { border-top: 1px solid var(--border); }
.nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-list a {
  display: block;
  padding: var(--s2) 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-secondary);
  text-decoration: none;
  /* Линейка нарисована всегда, но прозрачная: иначе при наведении пункт
     подпрыгивал бы на два пикселя вместе со всей строкой. */
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.nav-list a:hover { color: var(--text-primary); border-bottom-color: var(--border-strong); }
.nav-list a.is-current { color: var(--text-primary); border-bottom-color: var(--accent); }

/* Поиск внутри меню — замена строке из шапки на узком экране. */
.nav-search { display: none; position: relative; }
.nav-search input[type="search"] { width: 100%; }

@media (max-width: 720px) {
  /* На телефоне в верхней строке помещаются название и две кнопки; поиск
     переезжает внутрь меню, чтобы шапка осталась в одну строку. */
  .head-search { display: none; }
  .nav-burger { display: inline-flex; align-items: center; }
  .site-head > .wrap { gap: var(--s2); }
  .theme-toggle, .nav-burger { padding: 0 var(--s2); font-size: 12.5px; }
  /* На самых узких экранах (320 точек) название плюс две кнопки в строку уже
     не помещаются. Обрезаем название: кнопки нужнее, чем последние буквы
     заголовка, который и так стоит ссылкой на главную. */
  .site-head .site-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .site-head .meta { text-align: right; font-size: 11px; }

  /* Со скриптами меню раскрывается кнопкой. Без них кнопки нет, а список
     просто виден: навигация не должна зависеть от javascript. */
  .site-nav { display: none; }
  html.nav-open .site-nav,
  html:not(.js) .site-nav { display: block; }
  html:not(.js) .nav-burger { display: none; }

  .site-nav .wrap { padding-block: var(--s3) var(--s4); }
  .nav-search { display: block; margin-bottom: var(--s2); }
  .nav-list { display: block; }
  .nav-list li + li { border-top: 1px solid var(--border); }
  .nav-list a {
    display: flex;
    align-items: center;
    min-height: 44px;
    /* Полоска активного пункта встаёт на левый край линеек-разделителей,
       поэтому подписи отступают на её ширину и на воздух рядом с ней. */
    padding: var(--s2) var(--s3);
    font-size: 16px;
    border-bottom: 0;
    border-left: 2px solid transparent;
  }
  .nav-list a.is-current { border-left-color: var(--accent); }
}

main.wrap { padding-bottom: var(--s8); }

/* ---------------------------------------------------------------- фильтры */

/* Панель фильтров — рабочий инструмент каталога: она липнет под шапкой,
   потому что ею пользуются, пролистав список наполовину. */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  align-items: center;
  margin: var(--s5) 0 var(--s4);
  padding: var(--s3);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.filters input[type="search"], .filters select {
  font: inherit;
  font-size: 15px;
  min-height: 44px;
  padding: 0 var(--s3);
  color: var(--text-primary);
  background: var(--page);
  border: 1px solid var(--control);
  border-radius: var(--radius-sm);
}
.filters input[type="search"] {
  flex: 1 1 260px;
  min-width: 0;
}
.filters select { max-width: 240px; }
.filters button {
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  min-height: 44px;
  padding: 0 var(--s5);
  color: var(--on-ink);
  background: var(--ink-fill);
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .15s ease;
}
.filters button:hover { background: var(--ink-fill-hover); }
.filters .count {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-muted);
}

/* ---------------------------------------------------------------- каталог */

.cards {
  display: grid;
  gap: var(--s3);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Карточка — не плитка с тенью, а поле в сетке: держится линейкой, при
   наведении набирает краску слева. Так ряд карточек читается как список
   показателей, а не как витрина. */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--s4);
  color: inherit;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .15s ease, background .15s ease;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .18s ease;
}
.card, .card:hover { text-decoration: none; }
.card:hover { border-color: var(--border-strong); }
.card:hover::before { transform: scaleY(1); }
.card h3 {
  margin: 0 0 var(--s2);
  font-size: 15.5px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -0.01em;
  /* Заголовкам сайта задан text-wrap: balance — он выравнивает длину строк и
     ради этого переносит слово, которое поместилось бы. На крупных заголовках
     это красиво, а в карточке выглядит ошибкой: строка обрывается, справа
     пустое место. Здесь перенос обычный, по ширине. */
  text-wrap: pretty;
}
.card .unit {
  margin: 0 0 var(--s3);
  font-size: 13px;
  color: var(--text-secondary);
}

/* Нижняя строка прижимается к низу карточки: у соседей в ряду метки и годы
   должны стоять на одной высоте, иначе ряд выглядит рваным. */
.card .facts {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  margin-top: auto;
  padding-top: var(--s3);
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-muted);
  border-top: 1px solid var(--gridline);
}
.card .facts-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s3);
  align-items: center;
}
.card .facts-row > * { white-space: nowrap; }

/* Что бы ни попало в строку периода, она остаётся одной строкой: диапазон
   «2013-01–2018-12» разорванным пополам читается как две ошибки. */
.card .facts-period {
  min-height: 1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.card .card-sub {
  margin: -2px 0 var(--s3);
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-secondary);
}

/* Карточка раздела: заголовок крупнее, счётчики отдельной строкой. */
.cards--sections { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.card--section h3 { font-size: 15px; }
.card--section .facts-period { color: var(--text-muted); }

/* удалённый набор в журнале: имя без ссылки — переходить уже некуда */
.gone { color: var(--text-muted); }

/* Метка вида данных. Не кнопка и не ссылка, поэтому набрана тихо: заглавные
   мелким моноширинным, как пометка на полях таблицы. */
.tag {
  display: inline-block;
  padding: 2px var(--s2);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--surface-2);
  border-radius: 3px;
}

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

/* Заголовок набора — то, ради чего открыли страницу. Крупно, с единицей
   измерения строкой ниже и служебными числами в самом низу. */
.ds-head { margin: var(--s5) 0 var(--s4); }
.ds-head h1 {
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  max-width: 24ch;
  max-width: min(100%, 40ch);
}
.ds-head .unit {
  margin: var(--s2) 0 0;
  font-size: 15px;
  color: var(--text-secondary);
}
.ds-head .facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s3);
  align-items: center;
  margin-top: var(--s3);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-muted);
}

/* Полотно графика. Это главный предмет на странице, поэтому оно единственное
   получает собственную поверхность во всю ширину колонки. */
.panel {
  position: relative;
  padding: var(--s5);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.panel + .panel { margin-top: var(--s4); }
/* Первым блоком страницы панель бывает на статьях, условиях и сводках. Свой
   отступ сверху ей нужен: у остальных страниц его дают хлебные крошки или
   заголовок, а панель начинается сразу рамкой и упирается в шапку. */
main.wrap > .panel:first-child { margin-top: var(--s5); }
.panel-title {
  margin: 0 0 var(--s3);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
}

@media (max-width: 640px) {
  .panel { padding: var(--s3); border-radius: 0; margin-inline: calc(var(--s5) * -1); border-inline: 0; }
}

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

.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 .empty     { color: var(--text-muted); }

.chart .line { stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.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 .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 .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 .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(--series-1); }
.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(--accent-ink); }

/* обёртка: широкая теплокарта скроллится сама, страница — никогда */
.chart-scroll { overflow-x: auto; overflow-y: hidden; }
.chart-scroll .chart--heat { width: auto; max-width: none; min-width: 100%; }

.chart-note { color: var(--text-muted); font-size: 12.5px; margin: var(--s3) 0 0; }
.chart-note.warn { color: var(--text-primary); }
.chart-note.warn strong { color: var(--div-neg); }

/* уровень, общий для всех рядов: показан один раз вместо повтора в подписях */
.chart-context {
  margin: 0 0 var(--s3);
  color: var(--text-secondary);
  font-size: 13.5px;
}
.chart-context strong { color: var(--text-primary); font-weight: 600; }

/* стопка областей */
.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 { fill: var(--series-5); }
.chart--area .s6 .area { fill: var(--series-6); }
.chart--area .s7 .area { fill: var(--series-7); }
.chart--area .s8 .area { fill: var(--series-8); }
.chart--area .s9 .area { fill: var(--series-9); }
.chart--area .s10 .area { fill: var(--series-10); }

/* вертикальные столбцы */
.chart--columns .bar { fill: var(--series-1); }
.chart--columns .col:hover .bar { fill: var(--accent-ink); }

/* теплокарта: последовательная шкала, один тон светлый→тёмный */
.chart--heat .heat-row,
.chart--heat .heat-col { fill: var(--text-secondary); font-size: 11px; }
.chart--heat .heat-col { text-anchor: start; }
/* Общая приставка подписей, вынесенная из осей теплокарты наверх. */
.chart--heat .heat-note {
  fill: var(--text-muted);
  font-size: 11px;
  font-family: var(--font);
}
.chart--heat .cell { stroke: none; }
.chart--heat .cell.b0 { fill: var(--seq-100); }
.chart--heat .cell.b1 { fill: var(--seq-200); }
.chart--heat .cell.b2 { fill: var(--seq-300); }
.chart--heat .cell.b3 { fill: var(--seq-400); }
.chart--heat .cell.b4 { fill: var(--seq-500); }
.chart--heat .cell.b5 { fill: var(--seq-600); }
.chart--heat .cell.b6 { fill: var(--seq-700); }
.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 { fill: var(--series-1); }
.chart--donut .s2 .slice { fill: var(--series-2); }
.chart--donut .s3 .slice { fill: var(--series-3); }
.chart--donut .s4 .slice { fill: var(--series-4); }
.chart--donut .s5 .slice { fill: var(--series-5); }
.chart--donut .s6 .slice { fill: var(--series-6); }
.chart--donut .s1 .swatch { fill: var(--series-1); }
.chart--donut .s2 .swatch { fill: var(--series-2); }
.chart--donut .s3 .swatch { fill: var(--series-3); }
.chart--donut .s4 .swatch { fill: var(--series-4); }
.chart--donut .s5 .swatch { fill: var(--series-5); }
.chart--donut .s6 .swatch { fill: var(--series-6); }
.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--donut .slice:hover { opacity: .85; }

/* сетка мини-графиков */
.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--diverging .div-row:hover .bar { opacity: .8; }

/* slope */
.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 .slope-row:hover .slope-line { stroke-width: 3; }
.chart--slope .leader { stroke: var(--text-muted); stroke-width: 1; opacity: .55; }

/* подсказки внутри SVG: показываем, что текст обрезан */
.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; }

/* ---------------------------------------------------------------- легенда */

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  margin: var(--s4) 0 0;
  padding: var(--s3) 0 0;
  list-style: none;
  border-top: 1px solid var(--gridline);
}
.legend li {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: 13px;
  color: var(--text-secondary);
}
.legend .swatch { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.legend .s1 .swatch { background: var(--series-1); }
.legend .s2 .swatch { background: var(--series-2); }
.legend .s3 .swatch { background: var(--series-3); }
.legend .s4 .swatch { background: var(--series-4); }
.legend .s5 .swatch { background: var(--series-5); }
.legend .s6 .swatch { background: var(--series-6); }
.legend .s7 .swatch { background: var(--series-7); }
.legend .s8 .swatch { background: var(--series-8); }
.legend .s9 .swatch { background: var(--series-9); }
.legend .s10 .swatch { background: var(--series-10); }

.legend--ramp .ramp { display: inline-flex; gap: 0; margin-right: var(--s2); }
.legend--ramp .ramp i { width: 18px; height: 10px; display: block; }
.legend--ramp .ramp i.b0 { background: var(--seq-100); }
.legend--ramp .ramp i.b1 { background: var(--seq-200); }
.legend--ramp .ramp i.b2 { background: var(--seq-300); }
.legend--ramp .ramp i.b3 { background: var(--seq-400); }
.legend--ramp .ramp i.b4 { background: var(--seq-500); }
.legend--ramp .ramp i.b5 { background: var(--seq-600); }
.legend--ramp .ramp i.b6 { background: var(--seq-700); }

/* Легенда из одного пункта — это подпись к единственной линии, а не список. */
.legend--single { color: var(--text-secondary); border-top: 0; padding-top: 0; }

/* --------------------------------------------------------------- подсказка */

.tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--surface-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-pop);
  padding: var(--s2) var(--s3);
  font-size: 13px;
  min-width: 150px;
  z-index: 5;
  display: none;
}
.tooltip .t-period {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-muted);
  margin-bottom: var(--s2);
}
.tooltip ul { margin: 0; padding: 0; list-style: none; }
.tooltip li { display: flex; align-items: center; gap: var(--s2); white-space: nowrap; }
.tooltip .swatch { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.tooltip .t-val {
  margin-left: auto;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.tooltip .t-name {
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}

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

/* Таблица — обязательный запасной способ прочитать те же числа: график
   читается глазом, таблица читается точно. */
.table-wrap { overflow-x: auto; margin-top: var(--s2); }
table.data {
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 12.5px;
  min-width: 100%;
}
table.data th, table.data td {
  border-bottom: 1px solid var(--gridline);
  padding: var(--s2) var(--s3);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
table.data th:first-child, table.data td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  text-align: left;
  background: var(--surface-1);
  font-family: var(--font);
  font-variant-numeric: normal;
  max-width: 340px;
  overflow: hidden;
  text-overflow: ellipsis;
}
table.data thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-1);
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.03em;
}
table.data tbody tr:hover td { background: var(--surface-2); }
table.data .muted { color: var(--text-muted); font-size: 11.5px; font-weight: 400; }
table.data td:first-child { max-width: 420px; white-space: normal; }
table.data td.diff { color: var(--div-neg); font-weight: 500; }

/* В колонке «Последний период» лежит подпись столбца из исходной таблицы —
   она доходит до 123 знаков, и без переноса журнал уезжал за край экрана. */
table.data.changes td:nth-child(4),
table.data.changes th:nth-child(4) {
  white-space: normal;
  max-width: 260px;
  text-align: left;
}
table.data.changes td:nth-child(2) { text-align: left; }
table.data.changes td:first-child { max-width: 360px; }

details.table-block > summary {
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 14px;
  padding: var(--s1) 0;
}
details.table-block > summary:hover { color: var(--text-primary); }

.footnotes {
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid var(--gridline);
  color: var(--text-muted);
  font-size: 12.5px;
}
.footnotes p { margin: var(--s1) 0; }

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

/* ------------------------------------------------------------ листалка */

.pager {
  display: flex;
  gap: var(--s2);
  /* Отступ снизу такой же, как сверху: под кнопками перелистывания идёт
     следующий блок страницы (на журнале изменений — пояснение, как его
     читать), и без просвета он прилипал к кнопке «Дальше». */
  margin: var(--s6) 0;
  align-items: center;
}
.pager a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 var(--s4);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.pager a { text-decoration: none; }
.pager a:hover { border-color: var(--accent); color: var(--accent-ink); }

/* --------------------------------------------------------------- главная */

/* Первый экран — заявление, а не приветствие: что здесь лежит и в каком
   виде. Крупный набор с короткой мерой строки, чтобы читалось за раз. */
.hero {
  margin: var(--s7) 0 var(--s6);
  padding-bottom: var(--s6);
  border-bottom: 1px solid var(--border);
}
.hero h2 {
  margin: 0 0 var(--s4);
  font-size: clamp(28px, 5vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  max-width: 18ch;
}
.hero p {
  margin: 0;
  max-width: var(--measure);
  font-size: 17px;
  color: var(--text-secondary);
}

/* Числа выгрузки — не «плитки метрик», а колонтитул статистического
   сборника: ряд чисел через волосяные линейки, набранный моноширинным. */
.tiles {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-top: var(--s6);
  border-top: 1px solid var(--border);
}
.tile {
  padding: var(--s4) var(--s4) var(--s4) 0;
  border-bottom: 1px solid var(--border);
}
.tile + .tile { padding-left: var(--s4); border-left: 1px solid var(--gridline); }
.tile-value {
  font-family: var(--mono);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.tile-label {
  margin-top: var(--s1);
  font-size: 12.5px;
  color: var(--text-muted);
}

@media (max-width: 560px) {
  .tile, .tile + .tile { padding-left: 0; border-left: 0; }
}

/* Вводный абзац раздела или сводки. Крупнее основного текста и короче по
   мере: он объясняет, что дальше, и должен прочитаться до прокрутки.
   Раньше правила у него не было вовсе, и он ничем не отличался от обычного
   абзаца — вводная роль пропадала. */
.lead {
  margin: 0 0 var(--s5);
  max-width: var(--measure);
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.section-title {
  margin: var(--s7) 0 var(--s4);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.home-nav { margin: var(--s5) 0 0; }
.home-search { display: flex; gap: var(--s2); }
.home-search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 16px;
  min-height: 52px;
  padding: 0 var(--s4);
  color: var(--text-primary);
  background: var(--surface-1);
  border: 1px solid var(--control);
  border-radius: var(--radius);
}
.home-search input[type="search"]::placeholder { color: var(--text-muted); }
.home-search button {
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  min-height: 52px;
  padding: 0 var(--s6);
  color: var(--on-ink);
  background: var(--ink-fill);
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .15s ease;
}
.home-search button:hover { background: var(--ink-fill-hover); }

/* Заголовок страницы списка: каталог, раздел, результаты поиска. По размеру
   он тише заголовка набора — на этих страницах главное сами карточки. */
.list-title {
  margin: var(--s5) 0 var(--s4);
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* ------------------------------------------------------------- регионы */

/* Главное число региона: крупно, единица рядом тише. */
.region-value { margin: 0 0 var(--s2); font-size: 15px; }
.region-value strong {
  font-family: var(--mono);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-right: var(--s2);
}
.region-note { margin: 0 0 var(--s4); max-width: var(--measure); color: var(--text-secondary); }

/* ------------------------------------------------------------- регионы */

/* Главное число региона: крупно, единица рядом тише. */
.region-value { margin: 0 0 var(--s2); font-size: 15px; }
.region-value strong {
  font-family: var(--mono);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-right: var(--s2);
}
.region-note {
  margin: 0 0 var(--s4);
  max-width: var(--measure);
  color: var(--text-secondary);
}
/* Плитка показателей региона: карточки поуже обычных, чтобы в ряд помещалось
   больше — показателей на регион до семи. */
.region-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

/* Соседние регионы отделены от плитки показателей: без отступа блок читался
   как продолжение той же таблицы. */
.region-neighbours { margin-top: var(--s6); }

/* Большее число в сравнении: подсветка, а не «победа» — у безработицы
   выигрывает меньшее, и решать это должен читатель. */
.compare td.win { font-weight: 600; color: var(--text-primary); }
.compare td.num { font-variant-numeric: tabular-nums; }
.compare td .muted { display: block; font-size: 12px; }

/* Подсказки-переходы внутри раздела регионов. */
.region-links { margin: var(--s3) 0 var(--s4); color: var(--text-secondary); font-size: 15px; }

/* Строка региона, из которого пришли: её ищут глазами первой. */
.rating tr.is-from > td { background: var(--accent-soft); font-weight: 600; }
.rating tr.is-from a { color: var(--accent-ink); }

/* Поле отбора регионов: оно же счётчик найденного. */
.region-filter {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: var(--s5) 0 var(--s4);
}
.region-filter input {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 520px;
  padding: 10px var(--s3);
  font: inherit;
  color: var(--text-primary);
  background: var(--surface-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}
.region-count {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}
.region-grid .region-value { margin: var(--s1) 0 var(--s2); }
.region-grid .region-value strong { font-size: 24px; }

/* ----------------------------------------------------- описание набора */

/* Написанный абзац о наборе: единственный связный текст на странице, где всё
   остальное — числа. Ширина по мере читаемости, а не по колонке таблицы. */
/* Описание над графиком — такая же карточка, как «Что показывает набор»:
   раньше оно шло голым абзацем в две трети ширины и выпадало из ряда. */
.ds-intro {
  margin: 0 0 var(--s4);
  padding: var(--s6) var(--s5);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.ds-intro p {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--text-secondary);
}
.ds-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  list-style: none;
  margin: var(--s3) 0 0;
  padding: 0;
}
.ds-tags a {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px;
  color: var(--text-secondary);
  text-decoration: none;
}
.ds-tags a:hover {
  border-color: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;
}

/* Текст для читалок: со страницы не убран, но и не показан. clip вместо
   display:none — скрытое display'ем содержимое читалка пропускает тоже. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------ правки значений */

.panel-note {
  margin: 0 0 var(--s3);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 62ch;
}
.revisions {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
}
.revisions li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s2) var(--s3);
  align-items: baseline;
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--border);
}
.rev-when {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-muted);
  white-space: nowrap;
}
.rev-what {
  font-size: 14.5px;
  color: var(--text-secondary);
  min-width: 0;
}
/* Числа моноширинные: «было → стало» читается как столбик, а не как текст. */
.rev-move {
  font-family: var(--mono);
  font-size: 13.5px;
  white-space: nowrap;
  color: var(--text-muted);
}
.rev-move strong { color: var(--text-primary); font-weight: 600; }
.rev-arrow { color: var(--accent); padding: 0 2px; }

@media (max-width: 640px) {
  /* На узком экране подпись ряда длинная — уводим её на свою строку, а дату
     и числа оставляем рядом. */
  .revisions li { grid-template-columns: auto auto; }
  .rev-what { grid-column: 1 / -1; order: 3; }
  .rev-move { margin-left: auto; }
}

/* Сколько раз показатель переиздавался. Метка не ссылка: карточка целиком
   ведёт на свежий выпуск, а список изданий лежит на его странице. */
.tag--editions {
  border-color: var(--accent-soft);
  background: var(--accent-soft);
  color: var(--accent-ink);
}

/* --------------------------------------------------------------- подсказки */

/* Выпадающий список под полем поиска. Ветки уточнений набраны как дерево из
   письма: чёрточка слева показывает, что это ответвление от запроса, а не
   отдельный результат. */
.suggest {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--surface-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
  padding: var(--s2) 0;
}
.suggest-group {
  padding: var(--s2) var(--s4) var(--s1);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.suggest-item {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  padding: var(--s2) var(--s4);
  color: var(--text-primary);
  text-decoration: none;
  font-size: 15px;
  line-height: 1.35;
}
.suggest-item:hover, .suggest-item.is-on {
  background: var(--surface-2);
  text-decoration: none;
}
.suggest-branch::before {
  content: "└─";
  font-family: var(--mono);
  font-size: 12px;
  color: var(--baseline);
}
.suggest-count {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ---------------------------------------------------------- сводка темы */

.topic-now {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s1) var(--s3);
  margin: var(--s2) 0 var(--s5);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--border);
}
.topic-now-val {
  font-family: var(--mono);
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.topic-now-cap { color: var(--text-muted); }
.topic-now-delta {
  padding: 2px var(--s2);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--surface-2);
  border-radius: 3px;
}

/* ------------------------------------------------------------- выпуски */

.releases {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  margin: 0 0 var(--s4);
}
.releases-label { font-size: 12.5px; color: var(--text-muted); }
.release {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 var(--s3);
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.release { text-decoration: none; }
.release:hover { border-color: var(--accent); color: var(--accent-ink); }
.release.is-on {
  background: var(--ink-fill);
  border-color: var(--ink-fill);
  color: var(--on-ink);
}

/* -------------------------------------------------------- смежные ряды */

.related { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.related li { display: flex; gap: var(--s2); align-items: baseline; font-size: 14px; }
.related .muted { color: var(--text-muted); font-size: 12.5px; }

.see-also { margin: 0; padding-left: var(--s5); }
.see-also li { margin: 0 0 var(--s2); }
.see-also .muted { color: var(--text-muted); font-size: 13px; margin-left: var(--s2); }

/* Описание набора: текст, выведенный из самих чисел. Читается после
   графика, поэтому набран спокойно и без выделений. */
/* Карточка идёт во всю ширину колонки, как остальные панели: узкая коробка
   посреди широких выглядела недоделанной. Читаемость строки при этом сохраняем
   ограничением на сам текст, а не на рамку. */
.about { padding-block: var(--s6); }
.about p { margin: 0 0 var(--s3); line-height: 1.65; }
.about p:last-child { margin-bottom: 0; }
.about .src { color: var(--text-muted); font-size: 13.5px; }

/* ------------------------------------------------------- хлебные крошки */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px var(--s2);
  margin: var(--s4) 0 0;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-muted);
}
.crumbs .sep { color: var(--baseline); }
.crumbs span:not(.sep) { color: var(--text-secondary); }

/* -------------------------------------------------------- код для вставки */

.chart-actions {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid var(--gridline);
}
.embed-copy {
  min-height: 36px;
  padding: 0 var(--s4);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color .15s ease, color .15s ease;
}
.embed-copy:hover { color: var(--text-primary); border-color: var(--accent); }
.embed-copy.done  { color: var(--series-3); border-color: var(--series-3); }
.embed-preview { font-family: var(--mono); font-size: 12px; color: var(--text-muted); }

/* ------------------------------------------------------------ спарклайны */

.spark { width: 100%; height: 36px; display: block; margin: var(--s1) 0 var(--s3); }

/* График в карточке прижат к низу, а не к заголовку.
   К низу карточки прижат блок с метками и периодом, а график шёл сразу за
   заголовком. У соседей по ряду заголовки разной высоты: где две строки, там
   график уезжал вверх, и в ряду из трёх карточек столбики стояли на трёх
   разных уровнях. Свободное место отдаём промежутку над графиком, тогда
   график и метки держатся низа вместе.
   :has нужен, чтобы не отнимать прижатие у карточек вовсе без графика. */
.card:has(.spark) .spark { margin-top: auto; }
.card:has(.spark) .facts { margin-top: 0; }
.spark path { stroke: var(--series-1); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.card:hover .spark path { stroke: var(--accent-ink); }

.spark--bars { height: 48px; }
.spark--bars rect { fill: var(--series-1); opacity: .5; }
.card:hover .spark--bars rect { fill: var(--accent); opacity: .72; }

/* ------------------------------------------------------------------ блог */

/* Мера строки около 68 знаков: лонгриды тут по восемь-девять тысяч знаков,
   и на широком экране строка во всю ширину читается заметно хуже. */
.post { max-width: 720px; }
.post h1 {
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin: 0 0 var(--s3);
}
.post h2 {
  font-size: 23px;
  line-height: 1.25;
  margin: var(--s7) 0 var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--gridline);
}
.post h3 { font-size: 18px; margin: var(--s6) 0 var(--s2); }
.post p, .post li { font-size: 17px; line-height: 1.7; }
.post p { margin: 0 0 var(--s4); }
.post ul, .post ol { margin: 0 0 var(--s4); padding-left: var(--s5); }
.post li { margin: 0 0 var(--s2); }
.post li::marker { color: var(--text-muted); }
.post blockquote {
  margin: 0 0 var(--s4);
  padding: 2px 0 2px var(--s4);
  border-left: 2px solid var(--accent);
  color: var(--text-secondary);
}
.post hr { border: 0; border-top: 1px solid var(--border); margin: var(--s6) 0; }
.post code {
  font-family: var(--mono);
  font-size: 14px;
  background: var(--surface-2);
  padding: 1px 5px;
  border-radius: 4px;
}
.post-back { margin: var(--s4) 0 var(--s3); font-size: 14px; }
.post-date { font-family: var(--mono); font-size: 12.5px; color: var(--text-muted); }

.post-figure { margin: var(--s6) 0; }
.post-figure img {
  width: 100%;
  height: auto;
  display: block;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.post-figure figcaption {
  margin-top: var(--s2);
  color: var(--text-muted);
  font-size: 13px;
}

.post-cover {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  margin: 0 0 var(--s5);
}

.table-scroll { overflow-x: auto; margin: 0 0 var(--s5); }
table.post-table {
  border-collapse: collapse;
  width: 100%;
  font-family: var(--mono);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
table.post-table th, table.post-table td {
  padding: var(--s2) var(--s3);
  text-align: left;
  border-bottom: 1px solid var(--gridline);
  white-space: nowrap;
}
table.post-table th {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.post-list { list-style: none; margin: var(--s5) 0 0; padding: 0; }
.post-list li { padding: var(--s5) 0; border-top: 1px solid var(--border); }
.post-list p { margin: var(--s2) 0 0; color: var(--text-secondary); font-size: 15px; }
.post-link { text-decoration-color: transparent; font-size: 19px; font-weight: 600; letter-spacing: -0.015em; }

.post-list li.has-cover {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--s1) var(--s4);
  align-items: start;
}
.post-list li.has-cover .post-thumb { grid-row: 1 / span 3; }
.post-thumb img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  display: block;
}
@media (max-width: 640px) {
  .post-list li.has-cover { grid-template-columns: 1fr; }
  .post-list li.has-cover .post-thumb { grid-row: auto; max-width: 320px; }
}

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

.site-foot {
  margin-top: var(--s8);
  border-top: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-muted);
  font-size: 13px;
}
/* Две колонки: слева про сайт, справа служебное. Одной строкой во всю
   ширину описание наезжало на ссылки под ним. */
.site-foot .wrap {
  padding-block: var(--s6);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 260px);
  gap: var(--s5) var(--s8);
  align-items: start;
}
.site-foot p { margin: 0 0 var(--s2); line-height: 1.6; max-width: var(--measure); }
.site-foot p:last-child { margin-bottom: 0; }
.site-foot a { color: var(--text-secondary); text-decoration-color: transparent; }
.site-foot a:hover { color: var(--accent-ink); text-decoration-color: var(--accent); }

.site-foot .foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid var(--gridline);
}
.site-foot .foot-links a { color: var(--text-primary); }

.site-foot .foot-source {
  padding-left: var(--s5);
  border-left: 1px solid var(--border);
  line-height: 1.6;
}

@media (max-width: 860px) {
  .site-foot .wrap { grid-template-columns: 1fr; gap: var(--s4); }
  .site-foot .foot-source {
    padding: var(--s3) 0 0;
    border-left: 0;
    border-top: 1px solid var(--border);
  }
}

/* --------------------------------------------------- сообщение об ошибке */

/* Обратная связь внизу страницы набора: тихая, но названная действием.
   Строчкой в тексте это читалось как примечание, мимо которого проходят. */
.report-link {
  margin: var(--s6) 0 0;
  padding-top: var(--s4);
  border-top: 1px solid var(--border);
  font-size: 14px;
  color: var(--text-secondary);
}
.report-link p { margin: 0 0 var(--s3); max-width: var(--measure); }
.report-button {
  display: inline-block;
  min-height: 40px;
  padding: 9px var(--s4);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  background: var(--surface-1);
  border: 1px solid var(--control);
  border-radius: var(--radius-sm);
  transition: border-color .15s ease, background .15s ease;
}
.report-button:hover {
  text-decoration: none;
  border-color: var(--border-strong);
  background: var(--surface-2);
}

.report-hint { display: inline-block; margin-left: var(--s3); color: var(--text-muted); }
.report-hint kbd {
  font-family: var(--mono);
  font-size: 12px;
  padding: 1px 5px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--surface-2);
}
.report-dialog .hint { margin: calc(var(--s2) * -1) 0 var(--s3); font-size: 13px;
                       color: var(--text-muted); }

.report-form { max-width: var(--measure); margin-top: var(--s4); }
.report-form label { font-size: 14px; color: var(--text-secondary); }
.report-form textarea,
.report-form input[type="email"],
.report-form select {
  width: 100%;
  margin-top: var(--s1);
  font: inherit;
  font-size: 15px;
  padding: var(--s2) var(--s3);
  color: var(--text-primary);
  background: var(--surface-1);
  border: 1px solid var(--control);
  border-radius: var(--radius-sm);
}
.report-form textarea { resize: vertical; min-height: 8em; }
.report-form button {
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  min-height: 44px;
  padding: 0 var(--s5);
  color: var(--on-ink);
  background: var(--ink-fill);
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}
.report-form button:hover { background: var(--ink-fill-hover); }

/* Окошко. Своё оформление минимально: браузер сам центрирует <dialog> и
   рисует подложку, нам остаётся ширина, отступы и та же бумага, что вокруг. */
.report-dialog {
  width: min(30rem, calc(100vw - 2rem));
  padding: var(--s5);
  color: var(--text-primary);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
}
.report-dialog::backdrop { background: rgba(20, 19, 15, 0.45); }
.report-dialog h2 { margin: 0 0 var(--s2); font-size: 20px; letter-spacing: -0.01em; }
.report-dialog .lead { margin: 0 0 var(--s4); font-size: 14px; color: var(--text-secondary); }
.report-dialog .report-form { margin-top: 0; }
.report-close { float: right; margin: calc(var(--s2) * -1) calc(var(--s2) * -1) 0 0; }
.report-close button {
  min-width: 32px;
  min-height: 32px;
  font-size: 20px;
  line-height: 1;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.report-close button:hover { color: var(--text-primary); }
.report-actions { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.report-msg { font-size: 13px; color: var(--text-secondary); }

/* Ловушка для роботов: человеку её не видно и не поймать табуляцией. */
.report-form .trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ------------------------------------------------- документация и ключ API */

/* Примеры запросов и ответов. Строки в них длинные и переносить их нельзя:
   перенесённая команда curl перестаёт быть командой, которую можно скопировать
   и выполнить. Поэтому блок прокручивается вбок сам, а страница — нет. */
.apidoc pre, .apikey pre {
  margin: 0 0 var(--s4);
  padding: var(--s3) var(--s4);
  overflow-x: auto;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.apidoc pre code, .apikey pre code {
  padding: 0;
  background: none;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre;
}
.apidoc .lead { font-size: 17px; color: var(--text-secondary); }
.apidoc h2 { margin-top: var(--s7); scroll-margin-top: var(--s6); }
.apidoc h3 { margin-top: var(--s6); scroll-margin-top: var(--s6); }

.apidoc-toc {
  margin: var(--s5) 0 var(--s6);
  padding: var(--s4) var(--s5);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
}
.apidoc-toc p { margin: 0 0 var(--s2); }
.apidoc-toc ol { margin: 0; padding-left: var(--s5); }
.apidoc-toc ul { margin: var(--s1) 0 var(--s2); }
.apidoc-toc li { margin: 0 0 var(--s1); }
.apidoc-toc code { font-size: 13px; }

/* Таблицы параметров узкие по смыслу: первая колонка — имя, вторая — текст.
   Общий стиль table.data режет первую колонку по ширине, здесь это мешает. */
.apidoc-table { margin-bottom: var(--s5); }
.apidoc-table td:first-child { white-space: nowrap; width: 1%; }
.apidoc-table td { white-space: normal; }

/* Выданный ключ. Он показывается один раз, поэтому строку видно издалека и
   выделяется она целиком одним движением. */
.apikey-value {
  padding: var(--s3) var(--s4);
  background: var(--surface-2);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  overflow-x: auto;
}
.apikey-value code {
  font-size: 16px;
  background: none;
  padding: 0;
  user-select: all;
}
.apikey-facts { margin: 0 0 var(--s5); display: grid; gap: var(--s1) var(--s4);
                grid-template-columns: max-content 1fr; font-size: 15px; }
.apikey-facts dt { color: var(--text-secondary); }
.apikey-facts dd { margin: 0; }

.apikey-form { max-width: var(--measure); margin: var(--s4) 0 var(--s6); }
.apikey-form label { display: block; font-size: 14px; color: var(--text-secondary); }
.apikey-form input[type="email"],
.apikey-form input[type="text"] {
  width: 100%;
  margin-top: var(--s1);
  font: inherit;
  font-size: 16px;      /* меньше 16 — и айфон приближает страницу на фокусе */
  padding: var(--s2) var(--s3);
  color: var(--text-primary);
  background: var(--surface-1);
  border: 1px solid var(--control);
  border-radius: var(--radius-sm);
}
.apikey-form .hint { display: block; margin-top: var(--s1); font-size: 13px;
                     color: var(--text-muted); }
.apikey-form button {
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  min-height: 44px;
  padding: 0 var(--s5);
  color: var(--on-ink);
  background: var(--ink-fill);
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}
.apikey-form button:hover { background: var(--ink-fill-hover); }
/* Текущий режим — кнопка выключена: нажимать её незачем, и по виду это
   должно быть понятно до нажатия. */
.apikey-form button[disabled] {
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  cursor: default;
}
.apikey-form button[disabled]:hover { background: var(--surface-2); }
.apikey-form button.danger {
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--control);
}
.apikey-form button.danger:hover { color: var(--div-neg); border-color: var(--div-neg); }
.apikey-actions { display: flex; gap: var(--s3); flex-wrap: wrap; }
.apikey-foot { font-size: 14px; color: var(--text-secondary); }
/* Сводка владельца — не статья: ширину текста ей навязывать незачем, там
   таблицы на пять колонок. Узкие таблицы ставим в два столбца, широкие
   прокручиваем вбок внутри своей обёртки, чтобы страница не ездила целиком. */
/* Страницы API шире статьи: в кабинете таблица на пять колонок, в
   документации примеры запросов, которые незачем ломать переносом. */
.apidoc, .apikey { max-width: 900px; }
/* Сводка владельца — во всю ширину; правило стоит ПОСЛЕ .apidoc намеренно,
   иначе 900 пикселей от документации перебьют его. */
.panel-wide { max-width: none; }
.table-scroll { overflow-x: auto; margin-bottom: var(--s5); }
.panel-cols {
  display: grid;
  gap: 0 var(--s6);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: start;
}
.panel-cols h3 { margin-top: 0; }
.hint-list { margin: calc(var(--s3) * -1) 0 var(--s5); font-size: 14px;
             color: var(--text-secondary); }

.apikey-who { display: flex; align-items: baseline; gap: var(--s3);
              margin: 0 0 var(--s5); color: var(--text-secondary); }
.inline-form { display: inline; margin: 0; }
/* Действие внутри таблицы: кнопка по смыслу, ссылка по виду — строка не
   должна разъезжаться от прямоугольника с заливкой. */
button.linkish {
  font: inherit;
  font-size: 14px;
  padding: 0;
  min-height: 0;
  color: var(--text-secondary);
  background: none;
  border: 0;
  text-decoration: underline;
  cursor: pointer;
}
button.linkish:hover { color: var(--text-primary); background: none; }
.apikey-form input[type="password"] {
  width: 100%;
  margin-top: var(--s1);
  font: inherit;
  font-size: 16px;
  padding: var(--s2) var(--s3);
  color: var(--text-primary);
  background: var(--surface-1);
  border: 1px solid var(--control);
  border-radius: var(--radius-sm);
}
.apikey-form .trap { position: absolute; left: -9999px; width: 1px; height: 1px;
                     overflow: hidden; }

.form-error, .form-notice {
  margin: 0 0 var(--s4);
  padding: var(--s3) var(--s4);
  border-radius: var(--radius-sm);
  font-size: 15px;
}
.form-error  { background: var(--surface-2); border-left: 3px solid var(--div-neg); }
.form-notice { background: var(--surface-2); border-left: 3px solid var(--accent); }

/* ------------------------------------------------------------- мелкий экран */

@media (max-width: 640px) {
  .wrap { padding-inline: var(--s4); }
  .filters .count { margin-left: 0; width: 100%; }
  .filters select { max-width: none; flex: 1 1 140px; }
  .hero { margin-top: var(--s5); padding-bottom: var(--s5); }
  .cards { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------- меньше движения */

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

/* ------------------------------------------------------------------ печать */

/* Страницу набора печатают и вкладывают в отчёты: убираем интерфейс,
   оставляем заголовок, график и таблицу. */
@media print {
  .site-head, .site-foot, .filters, .pager, .chart-actions, .theme-toggle { display: none; }
  body { background: #fff; color: #000; }
  .panel { border: 0; padding: 0; }
  .wrap { max-width: none; padding: 0; }
}

/* --------------------------------------------------- журнал изменений

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

   Теперь лента: название крупно, под ним одной строкой — что произошло,
   когда и в каком разделе. Никаких выделений: если всё важно, то ничего
   не важно. */
.changes-feed {
  list-style: none;
  margin: var(--s4) 0;
  padding: 0;
  border-top: 1px solid var(--border);
}
.changes-feed li {
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--border);
}
.changes-name {
  display: block;
  font-size: 16px;
  line-height: 1.35;
  color: var(--link);
  text-decoration: none;
}
.changes-name:hover { text-decoration: underline; }
.changes-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s3);
  margin-top: 4px;
  font-size: 13.5px;
  color: var(--text-secondary);
}
.changes-what { color: var(--text-secondary); }
.changes-when {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Сводка по выгрузкам: дата и одна фраза, без трёх колонок с числами. */
.uploads {
  list-style: none;
  margin: 0;
  padding: 0;
}
.uploads li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s2) var(--s3);
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.uploads li:last-child { border-bottom: 0; }
.uploads-when {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-muted);
  white-space: nowrap;
}
.uploads-what { font-size: 14.5px; }

/* История одной таблицы. */
.changelog {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
}
.changelog li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s2) var(--s3);
  align-items: baseline;
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--border);
}
.changelog-when {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-muted);
  white-space: nowrap;
}
.changelog-what { font-size: 14.5px; color: var(--text-secondary); }