/* Шрифты — свои, не из Google.

   Два довода, и оба весомые. Запрос к fonts.googleapis.com блокирует отрисовку:
   браузер не покажет ни буквы, пока не сходит на чужой домен, не получит CSS и
   только потом — сами файлы. И каждый посетитель при этом отдаёт свой IP Google,
   о чём его никто не спрашивал.

   unicode-range оставлен как у Google: браузер скачивает только тот алфавит,
   который на странице. Русскому читателю не приедет латышская диакритика, и
   наоборот. Кириллицы у Fraunces нет вовсе — заголовки на русском падают на
   системный шрифт, как и раньше.

   font-display: swap — текст виден сразу системным шрифтом и подменяется, когда
   файл придёт. Пустая страница в ожидании шрифта хуже смены начертания. */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/fonts/fraunces-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/fonts/fraunces-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/fraunces-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/fraunces-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-500-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

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

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 450;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-450-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 450;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-450-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 450;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-450-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-500-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-600-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ============================================================================
   Firmatlas — система стилей.

   Решение по §3 брифа: вариант B, единый тёмный.
   Бренд держится на ночной метафоре, разрыв на «тёмный атлас» и «светлые
   страницы данных» ломает её. Читаемость чисел вытянута не переходом в
   светлую тему, а лестницей поверхностей: страницы данных живут на --raised,
   таблицы получают --surface-2, контраст основного текста поднят до 12:1.
   Светлая тема существует как опция доступности (переключатель в шапке),
   но холст атласа в ней остаётся ночным: свет там несёт данные.

   Свет = величина. Янтарный только «это вы» и максимум шкалы (§2 брифа).
   ========================================================================= */

/* ---------- 1. Токены ---------- */

:root {
  color-scheme: dark;
  --radius: 0.5rem;
  --radius-sm: 0.375rem;
  --radius-lg: 0.75rem;

  /* поверхности: от дальней к ближней */
  --sky:       oklch(0.16 0.018 250);
  --surface:   oklch(0.21 0.020 250);
  --surface-2: oklch(0.235 0.021 250);
  --raised:    oklch(0.25 0.022 250);
  --border:    oklch(0.31 0.024 250);
  --border-2:  oklch(0.38 0.026 250);

  /* текст */
  --fg:       oklch(0.94 0.010 250);
  --fg-muted: oklch(0.72 0.020 250);
  --fg-dim:   oklch(0.56 0.022 250);

  /* смысловые */
  --you:       oklch(0.82 0.130 78);
  --you-soft:  oklch(0.82 0.130 78 / 0.12);
  --peer:      oklch(0.80 0.095 185);
  --peer-soft: oklch(0.80 0.095 185 / 0.12);
  --peer-deep: oklch(0.52 0.070 195);

  /* уровень доверия к адресу — всегда дублируется текстом */
  --conf-high:   var(--you);
  --conf-medium: var(--peer);
  --conf-low:    var(--fg-dim);

  /* шкала величины звезды */
  --chart-1: oklch(0.42 0.045 240);
  --chart-2: oklch(0.56 0.070 215);
  --chart-3: oklch(0.70 0.075 190);
  --chart-4: oklch(0.79 0.100 130);
  --chart-5: var(--you);

  --panel-blur: saturate(140%) blur(14px);
  --shadow-1: 0 1px 2px oklch(0.10 0.02 250 / .4);
  --shadow-2: 0 8px 30px oklch(0.08 0.02 250 / .5);
  --shadow-3: 0 24px 80px oklch(0.06 0.02 250 / .62);

  --ff-display: "Fraunces", Georgia, "Times New Roman", serif;
  --ff-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --hdr-h: 56px;
  --gut: clamp(16px, 3.2vw, 40px);
  --ftr-h: 34px;
  --maxw: 1200px;
  --ease: cubic-bezier(.32, .72, 0, 1);
}

/* Светлая тема — опция доступности для длинного чтения таблиц. */
/* Шапка на атласе прозрачна поверх карты; в светлой теме её тёмный текст лёг бы
   на тёмную карту — поэтому ей своя светлая подложка. Но без жёсткой нижней
   линии: раньше border-bottom резал экран пополам (светлая плита vs ночная
   карта). Теперь подложка сама вертикально плотнее вверху и растворяется книзу,
   а ниже шапки псевдоэлемент продолжает растворение в карту — карта «вытекает»
   из-под шапки, а не встык к ней. */
/* Атлас в светлой теме: шапка лежит ПРЯМО на тёмной ночной карте. Светлая
   матовая панель под ней всегда проигрывала по контрасту — тёмный текст
   навигации тонул в градиенте. Правильный приём для шапки над тёмным hero —
   не светлить фон, а светлить ТЕКСТ: светлый контент + тихий тёмный скрим
   (::after ниже). Поэтому на атласе шапка ведёт себя одинаково в обеих темах —
   прозрачная, светлый передний план. Токены переключаем на светлую схему, как
   у .atlas__center и .tally, лежащих на той же карте. */
:root[data-theme="light"] body.is-atlas .hdr {
  --fg:       oklch(0.96 0.008 250);
  --fg-muted: oklch(0.82 0.018 250);
  --fg-dim:   oklch(0.70 0.020 250);
  --border:   oklch(0.96 0.01 250 / 0.20);
  --border-2: oklch(0.96 0.01 250 / 0.30);
  background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom: none;
}
/* Логотип на карте — тоже светлый (в обычной шапке он тёмно-синий бренд-цвет,
   но на ночной карте не читается). */
:root[data-theme="light"] body.is-atlas .brand { color: var(--fg); }
/* Тёмная тема: шапка прозрачна поверх ночной карты, шва как такового нет, но
   у верхней кромки добавляем тихую виньетку — контент шапки читается над
   светящимися кластерами, и карта так же мягко «вытекает» из-под неё. */
body.is-atlas .hdr--over:not(.is-stuck)::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: calc(var(--hdr-h) + 56px); pointer-events: none; z-index: -1;
  background: linear-gradient(to bottom,
    color-mix(in oklab, #05070d 74%, transparent) 0%,
    color-mix(in oklab, #05070d 44%, transparent) 46%,
    transparent 100%);
}

/* Обычные страницы в светлой теме — бесшовная шапка: тот же тон, что и
   страница, без нижней границы. Фон непрозрачен (тот же --sky), поэтому при
   прокрутке контент чисто прячется под шапкой; blur не нужен — за шапкой
   ничего, кроме страницы того же цвета. Атлас сюда не попадает: там шапка
   лежит над тёмной картой и обрабатывается отдельно. */
:root[data-theme="light"] body:not(.is-atlas) .hdr {
  background: var(--sky);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom: none;
}

/* Атлас в светлой теме: карта остаётся ночным небом (звёзды светятся, а не
   чернеют), а обвязка — шапка, панель компании, виджеты нижнего ряда,
   подвал — светлая, как тёмная карта в Google Maps со светлым интерфейсом.
   Тёмную схему сохраняют только элементы, лежащие прямо на карте без
   своего фона: заголовок, итоги, линейка масштаба, атрибуция снимков.
   Иначе тёмный текст ложится на тёмную карту и не читается. */
:root[data-theme="light"] :is(.atlas__center, .tally, .scale, .atlas__attr) {
  --fg:       oklch(0.94 0.010 250);
  --fg-muted: oklch(0.72 0.020 250);
  --fg-dim:   oklch(0.60 0.022 250);
  --you:      oklch(0.82 0.130 78);
  --sky:      oklch(0.16 0.018 250);
  color: var(--fg);
}

/* Интерактивные виджеты, лежащие прямо на ночной карте — поле поиска,
   переключатель метрики, слайдер порога — в светлой теме были светлыми
   панелями с тёмным текстом: на карте это спорило с тёмным интерфейсом шапки
   и читалось как чужеродные яркие плашки. Приводим их к тому же языку, что и
   шапка: тёмное стекло + светлый текст. Компоненты UI-слоя используют
   семантические токены, поэтому достаточно переопределить токены на обёртках —
   поле, тумблер и слайдер переключаются сами. Янтарь остаётся акцентом
   (значение слайдера, активная метрика, фокус поля). */
:root[data-theme="light"] body.is-atlas :is(.search, .atlas__foot-l, .atlas__foot-r) {
  --fg:        oklch(0.95 0.010 250);
  --fg-muted:  oklch(0.80 0.018 250);
  --fg-dim:    oklch(0.68 0.020 250);
  --muted-foreground: oklch(0.80 0.018 250);
  --card:       oklch(0.20 0.020 250);
  --raised:     oklch(0.24 0.020 250);
  --background:  oklch(0.16 0.018 250);
  --border:     oklch(0.95 0.010 250 / 0.16);
  --border-2:   oklch(0.95 0.010 250 / 0.30);
  --primary:    oklch(0.82 0.130 78);
  --you:        oklch(0.82 0.130 78);
  --you-soft:   oklch(0.82 0.130 78 / 0.18);
  color: var(--fg);
}


:root[data-theme="light"] {
  /* Светлая тема — тёплая, песочно-янтарная (тон 78°, в тон акценту). Холодный серый спорил с янтарным
     акцентом продукта: два разных «温度» на одном экране читаются как
     несогласованность. Тёплый нейтральный фон (так делают Anthropic и
     Stripe) с янтарём согласован, а бирюзовый остаётся смысловым
     контрапунктом и от этого только выигрывает.

     Фон страницы песочный, карточки — тёплый белый поверх него: чистый
     белый фон с белыми же карточками лишает интерфейс глубины. Все цвета
     текста проверены на контраст к карточке: основной 15,7:1, вторичный
     6,5:1, приглушённый 4,8:1 — последним набраны моноширинные подписи
     в 10–11 пунктов, и он обязан проходить порог. */
  color-scheme: light;
  /* Фон — чистый тёплый off-white, а не песочный тауп: прежняя цветность 0.018
     при L 0.962 читалась как «серо-бежевый», а не «светлый». Подняли светлоту и
     срезали цветность вдвое — фон стал заметно светлее и чище, но остался
     тёплым (тон 80°) в тон акценту. Карточки по-прежнему на ступень выше фона
     (глубина держится лестницей поверхностей и границами), а тёмная карта
     контрастирует к светлому фону только сильнее. Порог 0.976↔0.996 между фоном
     и карточкой добирается видимой границей — так делают Stripe и Linear. */
  /* Чистый тёплый off-white: цветность срезана ~вдвое против прежней — тёплый
     оттенок остаётся (тон 80°, в тон акценту), но перестаёт читаться как
     серо-бежевая «грязь». Основную грязь давала цветность в границах (0.013):
     тонкие линии полей и таблиц набирались тёплым таупом на каждом крае —
     теперь они почти нейтральны. Лестница поверхностей сохранена
     (sky < surface-2 < surface < raised), глубина держится ею и границей. */
  --sky:       oklch(0.984 0.004 85);
  --surface:   oklch(0.998 0.002 85);
  --surface-2: oklch(0.992 0.003 85);
  --raised:    oklch(1 0 0);
  --border:    oklch(0.900 0.006 85);
  --border-2:  oklch(0.835 0.009 85);
  --fg:        oklch(0.25 0.009 75);
  --fg-muted:  oklch(0.48 0.011 75);
  --fg-dim:    oklch(0.55 0.010 75);
  --you:       oklch(0.56 0.145 58);
  --you-soft:  oklch(0.56 0.145 58 / 0.10);
  --peer:      oklch(0.50 0.085 195);
  --peer-soft: oklch(0.50 0.085 195 / 0.10);
  --peer-deep: oklch(0.40 0.060 200);
  --conf-high:   var(--you);
  --conf-medium: var(--peer);
  --conf-low:    var(--fg-dim);
  /* Тени мягкие, чуть тёплые, но почти нейтральные: прежняя цветность 0.02
     подкрашивала их таупом. */
  --shadow-1: 0 1px 2px oklch(0.50 0.010 75 / .09);
  --shadow-2: 0 6px 20px oklch(0.50 0.010 75 / .10);
  --shadow-3: 0 20px 60px oklch(0.48 0.010 75 / .13);
}

/* ---------- 2. База ---------- */

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

html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--sky);
  color: var(--fg);
  font: 450 15px/1.6 var(--ff-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
}

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--you); outline-offset: 2px; border-radius: 3px; }

.mono { font-family: var(--ff-mono); font-variant-numeric: tabular-nums; }
.skip {
  position: absolute; left: -999px; top: 8px; z-index: 200;
  background: var(--raised); border: 1px solid var(--border-2);
  padding: 10px 16px; border-radius: var(--radius);
}
.skip:focus { left: 12px; }

.ic { width: 18px; height: 18px; flex: none; }
.ic--sm { width: 15px; height: 15px; }
.ic--xs { width: 13px; height: 13px; }

/* Заголовки: антиква светлого начертания крупно — спокойный тон, не рекламный. */
h1, h2, h3, .display {
  font-family: var(--ff-display);
  font-weight: 300;
  letter-spacing: -0.018em;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(30px, 4.4vw, 52px); }
h2 { font-size: clamp(22px, 2.6vw, 30px); }
h3 { font-size: clamp(17px, 1.8vw, 20px); font-weight: 400; }

.kicker {
  font: 500 11px/1 var(--ff-mono);
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--fg-dim);
}
.lede { color: var(--fg-muted); font-size: clamp(15px, 1.5vw, 17px); max-width: 62ch; margin: 12px 0 0; }

/* ---------- 3. Раскладка ---------- */

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); }
.page-head { padding: clamp(40px, 7vw, 84px) 0 clamp(24px, 3vw, 36px); border-bottom: 1px solid var(--border); }
.section { padding: clamp(32px, 5vw, 56px) 0; }
main { min-height: 60vh; }
body:not(.is-atlas) main { padding-top: var(--hdr-h); }

.grid { display: grid; gap: 16px; }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ---------- 4. Шапка ---------- */

.hdr {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--hdr-h);
  background: color-mix(in oklab, var(--sky) 82%, transparent);
  backdrop-filter: var(--panel-blur);
  -webkit-backdrop-filter: var(--panel-blur);
  border-bottom: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
}
.hdr--over { background: transparent; border-bottom-color: transparent; transition: background .25s, border-color .25s; }
.hdr--over.is-stuck { background: color-mix(in oklab, var(--sky) 84%, transparent); border-bottom-color: color-mix(in oklab, var(--border) 70%, transparent); }
.hdr__in {
  height: 100%; padding-inline: var(--gut);
  display: flex; align-items: center; gap: 10px;
}

.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--fg); }
.brand__mark { width: 26px; height: 26px; flex: none; }
.brand__word { font-family: var(--ff-display); font-weight: 300; font-size: 19px; letter-spacing: .005em; }

.hdr__nav { display: flex; align-items: center; gap: 2px; margin-left: 12px; }

/* Шапка — сдержанная и токен-ориентированная (цвет корректен в обеих темах по
   построению): навигация — текстовые ссылки с тихим активным фоном (не «чипы»),
   утилиты — ghost-иконки, селектор страны — тихая бордюрная пилюля, один акцент
   (янтарная CTA). Все элементы одной высоты (32px) и одного радиуса. Активный
   фон задаётся подмешиванием --fg в прозрачность — работает и на светлом, и на
   тёмном без отдельных значений на тему. */
.hdr__link, .zone, .ui-icon-trigger, .hdr__cta {
  height: 32px; border-radius: var(--radius-sm-ui);
}

.hdr__link {
  display: inline-flex; align-items: center; padding: 0 12px;
  color: var(--fg-muted); font-size: 14px; font-weight: 500;
  transition: color .15s, background .15s;
}
.hdr__link:hover { color: var(--fg); background: color-mix(in oklab, var(--fg) 8%, transparent); }
.hdr__link.is-active { color: var(--fg); background: color-mix(in oklab, var(--fg) 10%, transparent); }

.hdr__right { display: flex; align-items: center; gap: 6px; margin-left: auto; }

/* Утилитарные триггеры (язык, тема) — ghost: оболочка своя, меню из UI-слоя. */
.ui-icon-trigger {
  display: inline-flex; align-items: center; gap: 5px; padding: 0 9px;
  border: 1px solid transparent; border-radius: var(--radius-sm-ui);
  background: transparent; color: var(--fg-dim); cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}
.ui-icon-trigger:hover { color: var(--fg); background: color-mix(in oklab, var(--fg) 8%, transparent); }
.ui-trigger__tag { font: 500 10.5px/1 var(--ff-mono); letter-spacing: .06em; }
.hdr__account-word { font-size: 13px; font-weight: 500; }
.hdr__burger { display: none; }

/* Селектор страны — та же ghost-стилистика, что у навигации и утилит: без
   отдельной рамки, тихий фон на наведении. */
.zone {
  display: inline-flex; align-items: center; gap: 7px; padding: 0 10px;
  border: 1px solid transparent; background: transparent;
  color: var(--fg-muted); font-size: 13px; cursor: pointer;
  transition: color .15s, background .15s;
}
.zone:hover { color: var(--fg); background: color-mix(in oklab, var(--fg) 8%, transparent); }
.zone__flag {
  width: 14px; height: 9px; border-radius: 1px; flex: none;
  background: linear-gradient(#9E3039 0 38%, #fff 38% 62%, #9E3039 62% 100%);
}

.kbd {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 7px; padding: 5px 8px 5px 10px;
  background: color-mix(in oklab, var(--surface) 78%, transparent);
  color: var(--fg-dim); font-size: 12.5px;
  transition: color .15s, border-color .15s;
}
.kbd:hover { color: var(--fg-muted); border-color: var(--border-2); }
kbd {
  font: 400 10.5px/1.5 var(--ff-mono); color: var(--fg-muted);
  background: var(--raised); border: 1px solid var(--border-2);
  border-radius: 4px; padding: 1px 5px;
}

.icon-btn-legacy {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  height: 30px; padding: 0 8px; border-radius: 7px;
  border: 1px solid transparent; background: transparent; color: var(--fg-dim);
  transition: color .15s, background .15s, border-color .15s;
}
.icon-btn:hover { color: var(--fg); background: color-mix(in oklab, var(--surface) 70%, transparent); border-color: var(--border); }
.icon-btn__tag { font: 500 10.5px/1 var(--ff-mono); letter-spacing: .06em; }
.icon-btn--ghost:hover { border-color: var(--border); }
.ic--theme-light { display: none; }
/* Логотип в светлой теме — насыщенно-синий, включая текст: на светлом фоне
   синий бренд читается ярче тёмно-серого и держит фирменный акцент. */
:root[data-theme="light"] .brand { color: oklch(0.42 0.21 262); }
:root[data-theme="light"] .brand__mark { filter: saturate(1.2); }

:root[data-theme="light"] .ic--theme-light { display: block; }
:root[data-theme="light"] .ic--theme-dark { display: none; }

/* ---------- 8. Подвал ---------- */


/* ---------- 10. Экран атласа ---------- */

body.is-atlas { overflow: hidden; }
.atlas { position: fixed; inset: 0; }
/* Жест над холстом принадлежит карте. Без `touch-action` браузер забирает
   щипок себе и увеличивает всю страницу вместе с шапкой и панелью, а карта
   остаётся прежней — на телефоне приблизить её было нельзя вовсе. */
.atlas__canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair;
  touch-action: none; }

/* Обвязка карты повторяет боковые поля шапки, и обе занимают всю ширину:
   их края сходятся, а содержимое не сжато в колонку посреди экрана. */
.atlas__ui {
  position: absolute; inset: 0; pointer-events: none;
  display: flex; flex-direction: column;
  padding: calc(var(--hdr-h) + 14px) var(--gut) 20px;
}
.atlas__ui > * { pointer-events: auto; }

/* Карта занимает верх экрана, заголовок с поиском — низ (границы карты
   продублированы в atlas.js — mapBox()). Разведение по вертикали, а не
   наложение: центрированный поверх карты заголовок ложится ровно на рижский
   кластер, и обе сущности перестают читаться. */
.atlas__center {
  flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
  align-items: center; text-align: center; gap: 16px; pointer-events: none;
  /* Подпись прижата к полю поиска: ряд снизу выше самого поля (его высоту
     задаёт правая колонка со слайдером), и при прежнем отступе между текстом
     и полем набегало полсотни пикселей — заголовок читался как отдельный
     этаж, а не как приглашение к поиску. */
  padding-bottom: clamp(4px, 1vh, 12px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}

/* В атласе заголовок мельче, чем на контентных страницах: он делит экран
   с картой, а не открывает страницу в одиночку. */
.atlas__center h1 { font-size: clamp(22px, 2.9vw, 36px); }
.atlas__center.is-away { opacity: 0; transform: translateY(16px); }
.atlas__center h1 { text-shadow: 0 0 44px var(--sky); }
.atlas__center h1 i { font-style: normal; color: var(--you); }

.search {
  pointer-events: auto; position: relative;
  width: 100%; justify-self: center;
}
/* Поле поиска атласа лежит на ночной карте в обеих темах — ему нужна
   контрастная сплошная граница, а не тихое металлическое кольцо (оно на
   тёмном фоне сливалось). Металл остаётся на элементах шапки. */
/* Поиск — главное действие продукта, и он обязан читаться как приглашение, а
   не как ещё один виджет: поле выше, граница плотнее, вокруг — мягкое кольцо
   покоя, отделяющее его от карты. Янтарь остаётся только на фокусе: постоянная
   янтарная обводка спорила бы с правилом «янтарный — это вы и максимум шкалы». */
.search input {
  width: 100%; height: 60px; padding: 0 18px 0 54px; border-radius: 14px;
  border: 1.5px solid color-mix(in oklab, var(--border-2) 85%, var(--fg));
  background: color-mix(in oklab, var(--raised) 96%, transparent);
  backdrop-filter: var(--panel-blur); -webkit-backdrop-filter: var(--panel-blur);
  outline: none; font-size: 17.5px; color: var(--fg);
  box-shadow: 0 0 0 6px color-mix(in oklab, var(--sky) 22%, transparent),
              0 10px 36px oklch(0.08 0.02 250 / .55);
  transition: border-color .2s, box-shadow .2s;
}
.search input:hover { border-color: color-mix(in oklab, var(--border-2) 55%, var(--fg)); }
.search input::placeholder { color: var(--fg-muted); }
.search input:focus {
  border-color: color-mix(in oklab, var(--you) 60%, transparent);
  box-shadow: 0 0 0 3px var(--you-soft), 0 8px 32px oklch(0.08 0.02 250 / .5);
}
.search .ic { position: absolute; left: 18px; top: 19px; width: 19px; height: 19px; color: var(--fg-muted); }
.search__list {
  position: absolute; inset: auto 0 calc(100% + 8px); text-align: left;
  background: var(--raised); border: 1px solid var(--border);
  border-radius: 9px; overflow: hidden; box-shadow: var(--shadow-2);
}
.search__it { display: flex; justify-content: space-between; gap: 12px; padding: 11px 16px; cursor: pointer; font-size: 14.5px; }
.search__it:hover, .search__it.is-on { background: var(--you-soft); }
.search__it small { color: var(--fg-dim); white-space: nowrap; font: 400 12px/1.5 var(--ff-mono); }

.atlas__foot {
  /* Боковые колонки — minmax(0, 1fr): обычный 1fr не сжимается уже своего
     содержимого, и поле поиска в центре выталкивало правую колонку за поле. */
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 520px) minmax(0, 1fr); align-items: end;
  /* Ряд — flex-элемент обвязки, а у flex-элементов min-width: auto: шире
     содержимого он не сожмётся и вылезет за правое поле. */
  min-width: 0; max-width: 100%;
  gap: 10px 16px; transition: opacity .4s;
}
.atlas__foot-l { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Переключатель метрики лежит на ночной карте — оставляем ему сплошную границу
   из UI-слоя (видна в обеих темах); металлическое кольцо на тёмном сливалось. */
/* Правая колонка: порог по обороту и итоги стоят друг под другом одной
   ширины и прижаты к тому же полю, что и правый край шапки. Разной ширины
   блоки один над другим читаются как сбой вёрстки. */
.atlas__foot-r {
  display: grid; gap: 10px; justify-self: end;
  /* Ширину задаёт ряд цифр — его естественная ширина; слайдер над ним
     растягивается до неё. Фиксированное число здесь либо оставляло воздух,
     либо не вмещало цифры, и они вылезали за поле. */
  width: max-content; max-width: 100%;
}
.atlas__foot-r > * { width: 100%; }
.atlas__foot-r [data-slot="slider"] { min-width: 0; }
/* Три равные колонки. Значение и подпись центрированы друг относительно
   друга — выключка по краям разводила «92,5 млрд €» и «совокупный оборот»
   в разные стороны, и пара переставала читаться как одно целое.

   При этом крайние пары прижаты к краям ряда: центрирование внутри колонки
   утапливало их на полсотни пикселей, и ряд цифр оказывался уже слайдера
   над ним. Каждая пара — блок по содержимому, поэтому внутренняя
   центровка и внешнее выравнивание не спорят друг с другом. */
.tally { display: flex; justify-content: space-between; gap: 22px; }
.tally > div { text-align: center; white-space: nowrap; }
/* Три числа — главное доказательство продукта: 95 458 компаний, 92,5 млрд €,
   744 970 занятых. Их цитируют и пересылают, поэтому они крупнее подписей и
   набраны основным цветом текста; подпись остаётся тихой, но уже различимой
   (была --fg-dim, сливалась с картой). */
.tally b { display: block; font-family: var(--ff-display); font-weight: 300;
           font-size: clamp(19px, 2.1vw, 26px); line-height: 1.2; color: var(--fg); }
.tally span { display: block; }
/* Подпись не переносится: «combined turnover» в две строки ломает ряд. */
.tally span { font: 400 10.5px/1.2 var(--ff-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--fg-muted); white-space: nowrap; }

.scale {
  position: absolute; left: var(--gut); top: calc(var(--hdr-h) + 18px); display: grid; gap: 6px;
  pointer-events: none; opacity: 0; transition: opacity .35s;
}
.scale.is-on { opacity: 1; }
.scale__lvl { font: 500 11px/1 var(--ff-mono); letter-spacing: .13em; text-transform: uppercase; color: var(--you); }
.scale__bar { width: 104px; height: 1px; background: var(--fg-muted); position: relative; }
.scale__bar::before, .scale__bar::after { content: ""; position: absolute; top: -3px; width: 1px; height: 7px; background: var(--fg-muted); }
.scale__bar::before { left: 0; }
.scale__bar::after { right: 0; }
.scale__len { font: 400 11.5px/1 var(--ff-mono); color: var(--fg-muted); }

/* Панель найденной компании: одна строка над нижним рядом. */
.isolation {
  display: flex; align-items: center; gap: 10px; align-self: flex-start;
  margin-bottom: 10px; padding: 5px 6px 5px 12px; border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--you) 40%, transparent);
  background: color-mix(in oklab, var(--surface) 84%, transparent);
  backdrop-filter: var(--panel-blur); -webkit-backdrop-filter: var(--panel-blur);
  font-size: 13px;
}
.isolation__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--you); flex: none; }
.isolation__hint { color: var(--fg-dim); font-size: 12px; }

.atlas__attr {
  position: absolute; right: var(--gut); bottom: 6px; margin: 0;
  font: 400 10.5px/1.4 var(--ff-mono); color: var(--fg-dim);
  text-shadow: 0 0 8px var(--sky); pointer-events: none;
}

.hovercard {
  position: fixed; pointer-events: none; z-index: 30; max-width: 264px; display: none;
  background: var(--raised); border: 1px solid var(--border);
  border-radius: 9px; padding: 10px 13px; font-size: 13px; line-height: 1.5;
  box-shadow: var(--shadow-2);
}
.hovercard b { display: block; font-weight: 500; margin-bottom: 2px; }
.hovercard > span { display: block; color: var(--fg-dim); font-size: 12px; }
.hovercard__meta em { font-style: normal; font-family: var(--ff-mono); color: var(--muted-foreground); }
.hovercard [data-slot="metric-row"] { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 4px 0; border: 0; }
.hovercard [data-slot="metric-value"] { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.hovercard__chip { font: 500 10.5px/1.3 var(--ff-mono); font-style: normal; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted-foreground); }
.hovercard__chip[data-dir="up"] { color: var(--peer); border-color: color-mix(in oklab, var(--peer) 45%, transparent); }
.hovercard__was { white-space: nowrap; font-family: var(--ff-mono); font-size: 11.5px; color: var(--muted-foreground); margin-top: 2px; }
.hovercard [data-slot="metric-row"] { display: flex; gap: 14px; padding: 2px 0; border: 0; font-size: 12.5px; }
.hovercard [data-slot="metric-value"] { margin-left: auto; }
.hovercard [data-slot="metric-row"] + [data-slot="metric-row"] { padding-top: 0; }



/* ---------- 11. Разрез в панели компании ---------- */

.legend { display: flex; gap: 16px; font-size: 11.5px; color: var(--fg-dim); margin: 14px 0 0; }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
/* Разрез: по ряду на показатель. Дорожка — логарифмическая шкала от ÷10
   до ×10 с медианой посередине; полоса от медианы к значению компании —
   единственное янтарное пятно. Числа справа, столбиком: компания над
   медианой, чтобы читались одним взглядом. */
.xsec { display: grid; gap: 8px; }
.xsec__row {
  display: grid; grid-template-columns: 84px 1fr 44px auto; align-items: center; gap: 12px;
  padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius, 8px);
  background: color-mix(in oklab, var(--card) 70%, transparent);
}
.xsec__label { font-size: 12.5px; color: var(--muted-foreground); }
.xsec__track { position: relative; height: 22px; }
.xsec__track::before {
  content: ""; position: absolute; inset: 50% 0 auto; height: 1px; background: var(--border-2, var(--border));
}
.xsec__median {
  position: absolute; left: 50%; top: 3px; bottom: 3px; width: 2px; margin-left: -1px;
  background: var(--peer); border-radius: 1px;
}
.xsec__bar {
  position: absolute; top: 6px; height: 10px; border-radius: 5px;
  background: color-mix(in oklab, var(--you) 55%, transparent);
  border: 1px solid color-mix(in oklab, var(--you) 80%, transparent);
}
.xsec__bar[data-clipped] { border-right-style: dashed; }
.xsec__bar[data-clipped][data-dir="down"] { border-right-style: solid; border-left-style: dashed; }
/* Кратность — своя колонка, а не бирка на конце полосы: на упоре в край
   бирка наезжала на числа. */
.xsec__ratio {
  justify-self: center; font: 500 10.5px/1 var(--ff-mono); padding: 3px 5px; border-radius: 4px;
  background: var(--card); border: 1px solid var(--border); color: var(--you); white-space: nowrap;
}
.xsec__ratio[data-dir="down"] { color: var(--peer); }
.xsec__vals { display: grid; text-align: right; font-family: var(--ff-mono); font-variant-numeric: tabular-nums; line-height: 1.25; }
.xsec__me { font-size: 12.5px; font-weight: 500; color: var(--foreground); }
.xsec__med { font-size: 11px; color: var(--peer); }
/* Заголовок шкалы — своей строкой над делениями: в колонке подписи он
   не помещается ни на одном языке и ломался в две строки поверх «÷10». */
.xsec__ruler {
  display: grid; grid-template-columns: 84px 1fr 44px auto; gap: 4px 12px; padding: 0 12px; margin-top: 2px;
  grid-template-areas: "t t t t" ". s . .";
}
.xsec__ruler-title { grid-area: t; font: 500 9px/1.2 var(--ff-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-dim); }
.xsec__scale { grid-area: s; }
.xsec__scale { position: relative; height: 18px; font: 400 9.5px/1 var(--ff-mono); color: var(--fg-dim); }
.xsec__scale span { position: absolute; top: 4px; transform: translateX(-50%); }
.xsec__scale span[data-major] { color: var(--muted-foreground); }

/* ---------- 12. Карточки и таблицы (страницы данных) ---------- */

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px; transition: border-color .15s, background .15s;
}
a.card:hover { border-color: var(--border-2); background: var(--surface-2); }
.card__t { font-size: 15px; font-weight: 500; margin: 0 0 4px; }
.card__m { display: block; font: 400 12px/1.6 var(--ff-mono); color: var(--fg-dim); }
.card__row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 4px 0; }
.card__row span { color: var(--fg-dim); }

.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }

/* KPI-карточки страницы компании: значение, изменение к прошлому году и
   две колонки «было — стало» — единственный ряд во времени в данных. */
.kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi {
  position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px 18px 18px; min-height: 118px;
}
.kpi__k { font: 500 10.5px/1.4 var(--ff-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-dim); display: flex; gap: 8px; align-items: center; margin: 0; }
.kpi__v { font-family: var(--ff-display); font-weight: 300; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.1; margin: 10px 0 0; font-variant-numeric: tabular-nums; }
.kpi__d { font-size: 12px; color: var(--muted-foreground); margin: 8px 0 0; }
.kpi__d b { color: var(--foreground); font-weight: 500; font-family: var(--ff-mono); }
.kpi__chip { display: inline-block; padding: 2px 7px; border-radius: 999px; font: 500 11px/1.3 var(--ff-mono); border: 1px solid var(--border); color: var(--foreground); }
.kpi__d[data-dir="up"] .kpi__chip { color: var(--peer); border-color: color-mix(in oklab, var(--peer) 45%, transparent); }
.kpi__bars { position: absolute; right: 16px; bottom: 14px; height: 34px; display: flex; align-items: flex-end; gap: 4px; }
.kpi__bar { display: block; width: 10px; border-radius: 3px 3px 0 0; background: var(--you); min-height: 2px; }
.kpi__bar--prev { background: color-mix(in oklab, var(--you) 35%, transparent); }

/* Положение среди соседей: заливка до перцентиля, точка — компания. */
.pos { display: grid; gap: 10px; }
.pos__row { display: grid; grid-template-columns: 84px 1fr auto; align-items: center; gap: 12px; }
.pos__label { font-size: 12.5px; color: var(--muted-foreground); }
.pos__track { position: relative; height: 8px; border-radius: 4px; background: var(--muted); }
.pos__fill { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: color-mix(in oklab, var(--you) 45%, transparent); }
.pos__dot { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--you); border: 2px solid var(--card); box-shadow: 0 0 0 1px color-mix(in oklab, var(--you) 60%, transparent); }
.pos__val { font: 500 11.5px/1 var(--ff-mono); color: var(--foreground); white-space: nowrap; }
.stat__k { font: 500 10.5px/1 var(--ff-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-dim); }
.stat__v { font-family: var(--ff-display); font-weight: 300; font-size: clamp(22px, 2.6vw, 30px); margin-top: 8px; }
.stat__n { font-size: 12px; color: var(--fg-dim); margin-top: 4px; }

.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.count { margin-left: auto; font: 400 12px/1 var(--ff-mono); color: var(--fg-dim); }

/* Гистограмма распределения по размерам — простые столбики, без библиотеки. */
.bars { display: grid; gap: 8px; }
.bars__r { display: grid; grid-template-columns: 96px 1fr 46px; align-items: center; gap: 12px; font-size: 12.5px; }
.bars__l { color: var(--fg-dim); font-family: var(--ff-mono); }
.bars__t { height: 10px; border-radius: 3px; background: var(--peer-deep); min-width: 2px; }
.bars__n { text-align: right; font-family: var(--ff-mono); color: var(--fg-muted); }

/* ---------- 14. Текстовые страницы ---------- */

.prose { max-width: 68ch; }
.prose h2 { margin: 40px 0 10px; padding-top: 22px; border-top: 1px solid var(--border); }
.prose h3 { margin: 26px 0 8px; }
.prose p, .prose li { color: var(--fg-muted); }
.prose p { margin: 10px 0; }
.prose ul, .prose ol { padding-left: 1.35em; margin: 10px 0; }
.prose li { margin: 5px 0; }
.prose li::marker { color: var(--peer-deep); }
.prose a { color: var(--peer); text-decoration: underline; text-underline-offset: 2px; }
.prose code { font: 400 .88em/1 var(--ff-mono); background: var(--raised); border-radius: 4px; padding: 1px 5px; }
.prose strong { color: var(--fg); font-weight: 500; }

/* ---------- 15. Адаптив (§9 брифа: 1280 / 768 / 375) ---------- */

@media (max-width: 1279px) {
  .hdr__account-word { display: none; }
  /* Ширина панели — только для планшета. Без нижней границы это правило
     доставало и до телефона, а `app.css` грузится после `ui.css`: боковая
     панель в 60 % ширины перебивала нижнюю шторку, и карточка компании
     вставала поверх карты, оставляя справа полоску с картой и подвалом.
     Одинаковая специфичность, порядок файлов решает — и решал неверно. */
  @media (min-width: 768px) {
    [data-slot="sheet-panel"] { width: min(60vw, 560px); }
  }
  .hdr__nav { margin-left: 8px; }
  .kbd__label { display: none; }
}

@media (max-width: 900px) {
  .hdr__nav, .hdr__cta { display: none; }
  .hdr__burger { display: inline-flex; }
  .ftr__in { grid-template-columns: 1fr 1fr; }
  .ftr__brand { grid-column: 1 / -1; }
}

/* Нижняя панель атласа: три колонки (поиск + метрики + слайдер/цифры) не
   помещаются на планшете портрет (768) — стекаем её в одну колонку заметно
   раньше телефона. minmax(0, …), а не 1fr: у 1fr минимум трека = min-content
   самого широкого ребёнка (слайдер/ряд цифр с nowrap), и колонка вылезала за
   экран; здесь трек не превышает контейнер, дети обязаны в него уместиться. */
@media (max-width: 860px) {
  .atlas__foot { grid-template-columns: minmax(0, 1fr); }
  .atlas__foot-l, .search, .atlas__foot-r { min-width: 0; }
  .search { order: -1; width: 100%; }
  /* foot-r сам grid: без явной колонки его неявный трек тоже раздувался до
     min-content ребёнка. minmax(0, …) держит его в пределах бокса. */
  .atlas__foot-r { width: 100%; justify-self: stretch; grid-template-columns: minmax(0, 1fr); }
  .tally { width: 100%; gap: 10px; }
  .tally > div { min-width: 0; }
}

@media (max-width: 767px) {
  :root { --hdr-h: 52px; }
  .zone span:not(.zone__flag) { display: none; }
  /* На телефоне ряд цифр ужимается: числа мельче, подписи ещё мельче — иначе
     три nowrap-пары не помещаются в ~343 px. На планшете панель уже во всю
     ширину, там шринк не нужен. */
  .tally b { font-size: 16px; }
  .tally span { font-size: 8.5px; letter-spacing: .02em; }
  /* Подписи переносятся по словам. Мельче их делать уже некуда, а `nowrap`
     на «COMBINED TURNOVER» разносил ряд шире экрана: на айфоне первая
     колонка уезжала за левый край и читалась как «OMPANIES». Две строки
     подписи занимают место по вертикали, которого там достаточно. */
  .tally { gap: 8px; }
  .tally > div { white-space: normal; }
  .tally span { white-space: normal; text-wrap: balance; }
  .ftr__in { grid-template-columns: 1fr; }
  .ftr__bar { flex-direction: column; align-items: flex-start; }
  /* Селектор по слоту — иначе правило проигрывает по специфичности
     [data-slot="table-head"], и липкая шапка на телефоне наезжает на первую
     строку внутри карточки с горизонтальной прокруткой. */
  [data-slot="table-head"] { position: static; }
}

/* ---------- 16. Уважение к prefers-reduced-motion (§7 брифа) ---------- */

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

@media print {
  .hdr, .ftr, [data-slot="dialog"], [data-slot="sheet-panel"], .atlas { display: none !important; }
  body { background: #fff; color: #000; }
}


/* ---------- Выбор NACE в рейтинге: сетка чипов ---------- */
.nacepick { position: relative; }
.nacepick__btn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font: inherit; }
.nacepick__btn b { font-weight: 500; color: var(--foreground); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nacepick__pop {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: min(560px, 92vw); max-height: 60vh;
  display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px;
  background: var(--popover); box-shadow: 0 18px 48px rgba(0,0,0,.45);
}
/* display: flex выше перебивал атрибут hidden — меню не закрывалось. */
.nacepick__head { display: flex; gap: 8px; padding: 10px; border-bottom: 1px solid var(--border); }
.nacepick__q { flex: 1; font: inherit; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--card); color: var(--foreground); }
.nacepick__all { font: inherit; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--card); color: var(--foreground); cursor: pointer; }
.nacepick__list { overflow-y: auto; padding: 6px 10px 12px; }
.nacepick__group { padding: 8px 0 4px; border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent); }
.nacepick__div { display: block; width: 100%; text-align: left; font: inherit; font-size: 12.5px; color: var(--muted-foreground); background: none; border: 0; padding: 4px 4px; border-radius: 6px; cursor: pointer; }
.nacepick__div b { font: 500 12px/1 var(--ff-mono); color: var(--foreground); margin-right: 6px; }
.nacepick__div:hover, .nacepick__div.is-on { background: var(--muted); color: var(--foreground); }
.nacepick__codes { display: flex; flex-wrap: wrap; gap: 3px; padding: 3px 4px 6px; }
.nacepick__code {
  font: 500 11px/1 var(--ff-mono); padding: 4px 7px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--border); background: var(--card); color: var(--muted-foreground);
}
.nacepick__code:hover { color: var(--foreground); border-color: var(--border-2, var(--border)); }
.nacepick__code.is-on { color: var(--primary); border-color: color-mix(in oklab, var(--primary) 50%, transparent); background: var(--you-soft); }


/* ---------- Подвал: одна строка ---------- */
.ftr { border-top: 1px solid var(--border); margin-top: 48px; }
/* На атласе карта занимает экран целиком: подвал закрепляется у нижнего
   края поверх неё, а нижний ряд поднимается на его высоту. Границы карты
   считаются от прямоугольника этого ряда (atlas.js: computeMapBox),
   поэтому карта подстраивается сама. */
body.is-atlas .ftr {
  position: fixed; inset: auto 0 0 0; z-index: 20; margin-top: 0;
  background: color-mix(in oklab, var(--bg) 82%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
body.is-atlas .atlas__ui { padding-bottom: calc(var(--ftr-h) + 16px); }
.ftr__in {
  display: flex; align-items: center; justify-content: flex-start;
  min-height: var(--ftr-h); padding: 8px var(--gut);
  font: 400 12px/1.4 var(--ff-mono); color: var(--fg-dim);
}


.rankings__more { display: flex; justify-content: center; margin-top: 16px; }

/* Разбивка налогов и квартальная история на странице компании. */
.taxb {
  display: grid; gap: 1px;
  grid-template-columns: 1fr; max-width: 460px;
  background: var(--border); border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden;
}
.taxb__row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; padding: 11px 16px; background: var(--card);
}
.taxb__row[data-total] { background: var(--raised); font-weight: 600; }
.taxb__k { color: var(--muted-foreground); font-size: 13px; }
.taxb__row[data-total] .taxb__k { color: var(--foreground); }
.taxb__v { font-variant-numeric: tabular-nums; font-size: 14px; }
.taxh { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 560px; }
.taxh th { color: var(--muted-foreground); font-weight: 500; padding: 8px 12px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
.taxh td { padding: 8px 12px; border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.taxh tbody tr:first-child td { font-weight: 600; }

/* Финансовое здоровье и риск-сигналы (страница компании).
   Красный из атласа не используется. Риск-панель несёт вывод словом и
   именованными сигналами; «палитра здоровья» — только маленькой точкой рядом
   с текстом, никогда на карте и не заливкой. --health-risk — единственный
   судящий тон (приглушённый терракот), появляется лишь здесь. */
:root {
  --health-ok:   var(--peer);
  --health-warn: var(--you);
  --health-risk: oklch(0.62 0.135 32);
}
.taxb__v[data-dir="up"]   { color: var(--peer); }
.taxb__v[data-dir="down"] { color: var(--health-risk); }
.risk { display: flex; align-items: center; gap: 9px; }
.risk__dot { width: 11px; height: 11px; border-radius: 999px; flex: none; background: var(--fg-muted); }
.risk[data-level="ok"]   .risk__dot { background: var(--health-ok); }
.risk[data-level="warn"] .risk__dot { background: var(--health-warn); }
.risk[data-level="risk"] .risk__dot { background: var(--health-risk); }
.risk__level { font-size: 15px; }
.risk__signals { display: flex; flex-direction: column; gap: 8px; }
.risk__sig {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; color: var(--foreground);
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card);
}
.risk__sig i { width: 7px; height: 7px; border-radius: 999px; flex: none; background: var(--health-warn); }
.risk__sig[data-level="risk"] i { background: var(--health-risk); }
.risk__sig[data-level="warn"] i { background: var(--health-warn); }
[data-slot="metric-value"][data-dir="up"]   { color: var(--peer); }
[data-slot="metric-value"][data-dir="down"] { color: var(--health-risk); }

/* Страница поддержки: кнопки сумм (Stripe Payment Links). */
.support__tiers { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.support__tier {
  min-width: 84px; justify-content: center; text-align: center;
  font-variant-numeric: tabular-nums; font-size: 15px;
}
.support__tier--custom { min-width: auto; }
.support__tier[data-soon] {
  display: inline-flex; align-items: center; padding: 8px 16px;
  border: 1px dashed var(--border-2); border-radius: var(--radius-sm);
  color: var(--fg-muted); background: transparent; cursor: not-allowed;
}
.support__iban { margin-top: 16px; font-size: 13.5px; color: var(--fg-muted); }
.support__iban .mono { color: var(--foreground); margin-left: 6px; }

/* ---------- Вход и профиль ---------- */

/* Одна колонка в 420px: страница входа — это одно действие, и всё, что шире,
   заставляет глаз искать, куда смотреть. */
/* Вход.

   Страница устроена иначе, чем остальные, и это осознанно. На прочих человек
   читает — там нужны широкий контейнер, шапка с линией и воздух. Здесь он
   делает одно короткое дело, и всё, что не помогает его сделать, мешает:
   заголовок во всю ширину, вторая колонка, список доводов. Осталась одна
   узкая колонка по центру экрана — так устроены страницы входа у Resend,
   Linear и Vercel, и не из моды: короткая задача не должна занимать полтора
   экрана.

   Карточки с тенью здесь нет намеренно. На тёмном поле рамка вокруг формы
   читалась бы как ещё одна коробка среди коробок; достаточно того, что
   колонка узкая и стоит по центру пустого поля. */
.auth-screen {
  display: grid;
  place-items: center;
  /* Высота экрана минус шапка: колонка стоит в его середине, а не вверху.
     dvh, а не vh, — иначе на телефоне панель браузера съедает низ. */
  min-height: calc(100dvh - var(--hdr-h) - 120px);
  padding: clamp(24px, 6vh, 64px) var(--gut);
}
.auth { width: 100%; max-width: 384px; }

/* Заголовок и подпись — по центру, дальше всё по левому краю: центрировать
   поля и подписи значит заставлять глаз искать начало каждой строки. */
.auth__head { text-align: center; margin-bottom: 28px; }
.auth__head h1 { margin: 0 0 8px; font-size: clamp(26px, 3.4vw, 30px); line-height: 1.15; }
.auth__head p { margin: 0; color: var(--fg-muted); font-size: 14.5px; line-height: 1.5; }

.auth__passkey { display: grid; gap: 8px; }
.auth__passkey > [data-slot="button"],
.auth__form > [data-slot="button"] { width: 100%; }
.auth__hint {
  margin: 2px 0 0; font-size: 12.5px; line-height: 1.45;
  color: var(--fg-dim); text-align: center;
}
.auth__form { display: grid; gap: 12px; }

/* Разделитель «или»: линия сквозь строку, чтобы запасной путь читался
   равноправным, а не сноской. */
.auth__or {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0; color: var(--fg-dim); font-size: 13px;
}
.auth__or::before, .auth__or::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}
.auth__result {
  margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--raised); font-size: 14.5px;
}
.auth__result[data-state="error"] { border-color: color-mix(in oklab, var(--you) 40%, var(--border)); }

/* Зачем аккаунт — одной фразой, мелко и тихо. Три пункта с маркерами
   занимали полтораста пикселей ради того, что читается одним предложением. */
.auth__why {
  margin: 28px 0 0; padding-top: 18px; border-top: 1px solid var(--border);
  color: var(--fg-dim); font-size: 13px; line-height: 1.55;
}

/* Виджет проверки на робота приходит чужой вёрсткой в фиксированных
   пикселях; своей строки ему достаточно, растягивать его нельзя. */
.cf-turnstile { min-height: 65px; }

/* Профиль: обычная страница сайта — здесь читают, а не делают одно дело.
   Меру держит текст, а не блок целиком: линия под шапкой должна идти во всю
   страницу, как на остальных. */
.account__guest .lede { max-width: 46ch; }
.account__guest [data-slot="button"] { margin-top: 24px; }
.account { max-width: 720px; }

.account__block { margin-top: 36px; }
.account__block--quiet { opacity: .85; }
.taxb__note { margin-top: 10px; max-width: 70ch; font-size: 13px; }

/* Ряд по годам. Величину несёт длина полосы, а не цвет: раскраска
   «зелёное — хорошо» судит там, где продукт сравнивает, и путает — меньше
   активов не значит хуже. Янтарный достаётся только наибольшему значению
   столбца, по общему правилу акцента. */
.yearly { width: 100%; margin-top: 12px; font-variant-numeric: tabular-nums; }
.yearly th { font-size: 12px; font-weight: 500; color: var(--fg-muted); text-align: right; }
.yearly th:first-child { text-align: left; }
.yearly td { vertical-align: middle; padding: 9px 10px; }
.yearly__y { font-family: var(--ff-mono); color: var(--fg-muted); }
.yearly__v { text-align: right; min-width: 110px; }
.yearly__n { text-align: right; font-variant-numeric: tabular-nums; }
.yearly__num { display: block; font-size: 14px; }
.yearly__dash { color: var(--fg-dim); }
.yearly__bar { display: block; height: 3px; margin-top: 5px; border-radius: 2px;
  background: color-mix(in oklab, var(--fg) 8%, transparent); }
.yearly__bar i { display: block; height: 100%; border-radius: 2px;
  background: color-mix(in oklab, var(--fg) 34%, transparent); }
/* Убыток — направление, а не «мало»: полоса та же, оттенок приглушён. */
.yearly__bar i[data-dir="down"] { background: color-mix(in oklab, var(--fg) 18%, transparent); }
.yearly__v[data-peak] .yearly__bar i { background: var(--you); }
.yearly__v[data-peak] .yearly__num { color: var(--fg); font-weight: 600; }

/* Своя компания — первое и единственное действие на пустой странице, поэтому
   поле крупнее обычного и стоит одно. */
.account__own { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 16px; }
.own__name { font-size: 20px; font-weight: 600; margin: 0; }
.own__caveat { margin-top: 10px; max-width: 60ch; }
.own__digest { display: flex; align-items: center; gap: 9px; margin-top: 14px;
  font-size: 14px; cursor: pointer; }
.own__digest input { width: 16px; height: 16px; accent-color: var(--primary); }

/* Подсказки поиска — список выбора, а не перечисление: маркеры и отступы
   списка делали из вариантов текст, по которому непонятно, что нажимать. */
/* Список найденного всплывает над содержимым, а не раздвигает его: страница
   под полем дёргалась на каждую букву, и человек читал прыгающий текст. */
.own__found { list-style: none; margin: 6px 0 0; padding: 0; max-width: 520px;
  position: absolute; z-index: 40; left: 0; right: 0; max-height: 320px; overflow: auto;
  border: 1px solid var(--line); border-radius: var(--radius-sm-ui);
  background: var(--popover); box-shadow: var(--shadow-3); }
.account__own-field { position: relative; max-width: 520px; }
.own__found li + li { border-top: 1px solid var(--line); }
.own__found [data-slot="button"] { width: 100%; justify-content: flex-start;
  border-radius: 0; height: auto; padding: 10px 12px; text-align: left; }
.own__found b { font-weight: 600; }
.own__found [data-active] { background: color-mix(in oklab, var(--fg) 10%, transparent); }
.own__found small { color: var(--fg-dim); margin-left: 8px; }
.own__found .account__empty { padding: 10px 12px; margin: 0; }

/* Инструменты разработчика: одна свёрнутая крышка вместо половины страницы.
   Маркер `details` подменяется своим, чтобы стрелка смотрела как остальные
   значки интерфейса, а не как у списка файлов. */
.account__dev > summary { cursor: pointer; list-style: none; display: flex;
  flex-direction: column; gap: 2px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--radius-sm-ui);
  background: var(--card); transition: border-color .15s; }
.account__dev > summary::-webkit-details-marker { display: none; }
.account__dev > summary:hover { border-color: color-mix(in oklab, var(--fg) 22%, transparent); }
.account__dev > summary:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.account__dev-title { font-weight: 600; }
.account__dev-title::after { content: " ▸"; color: var(--fg-dim); }
.account__dev[open] .account__dev-title::after { content: " ▾"; }
.account__dev-body > .account__block:first-child { margin-top: 20px; }

.account__note { margin: 4px 0 14px; color: var(--fg-muted); font-size: 14px; }
.account__row { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; }
.account__empty { color: var(--fg-dim); font-size: 14px; }
.account__item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  margin-bottom: 8px; flex-wrap: wrap;
}
.account__item small { display: block; color: var(--fg-dim); font-size: 12.5px; margin-top: 2px; }
.account__item code { font: 400 13px/1.4 var(--ff-mono); margin-right: 8px; }

/* Закрытое состояние истории: число слева, приглашение войти справа. Не
   размытый текст-приманка, а честная строка — содержание есть, показываем
   после входа. Размытие выглядело бы попыткой подразнить. */
.hist__locked {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin-top: 8px; padding: 14px 16px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--raised);
}
.hist__locked b { font-size: 15px; font-variant-numeric: tabular-nums; }

/* История изменений. Дата слева узкой колонкой, поле — подписью, значения —
   зачёркнутое прежнее и новое: так строка читается одним движением глаза и
   не требует заголовков столбцов. */
.hist__list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; }
.hist__row {
  display: grid; grid-template-columns: 92px 128px minmax(0, 1fr);
  gap: 10px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.hist__row:last-child { border-bottom: 0; }
.hist__date { color: var(--fg-dim); font: 400 12.5px/1.5 var(--ff-mono); }
.hist__field { color: var(--fg-muted); }
.hist__vals { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.hist__vals s { color: var(--fg-dim); text-decoration-thickness: 1px; }
.hist__vals i { color: var(--fg-dim); font-style: normal; }
.hist__vals b { font-weight: 600; word-break: break-word; }

/* Стена счётчика. Не пустая заглушка с замком: человек должен увидеть, что
   за ней, и чем открывается. Поэтому здесь текст и кнопка, а не значок
   «нельзя» — отказ, который ничего не объясняет, читается как поломка. */
.meter {
  display: grid; gap: 10px; justify-items: start;
  margin: 6px 0; padding: 18px 20px;
  border: 1px solid var(--border); border-radius: var(--radius-lg-ui);
  background: var(--surface);
}
.meter { grid-column: 1 / -1; }
.meter--short {
  grid-template-columns: 1fr auto; align-items: center; justify-items: start; gap: 16px;
}
.meter__t { margin: 0; font-weight: 600; font-size: 15px; }
.meter__p { margin: 0; max-width: 62ch; color: var(--fg-muted); font-size: 14px; line-height: 1.55; }
/* Список договоров — это <ol>; маркер у строки со стеной ни к чему. */
.hist__list > li:has(.meter) { list-style: none; }

/* Годы договоров. Полоса отвечает на единственный вопрос — больше или
   меньше прошлого года, — а точное число стоит рядом: график, по которому
   приходится угадывать величину, хуже таблицы. */
.deal-years { margin-top: 22px; display: grid; gap: 8px; }
.deal-year {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) 96px;
  gap: 12px; align-items: center; font-size: 13.5px;
}
.deal-year__n { color: var(--fg-dim); font: 400 12.5px/1.5 var(--ff-mono); }
.deal-year__bar { height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.deal-year__bar i {
  display: block; height: 100%; border-radius: 999px;
  background: color-mix(in oklab, var(--you) 55%, var(--surface-2));
}
.deal-year__v { text-align: right; font: 500 13px/1.5 var(--ff-mono); }

/* Государственные договоры. Своя раскладка, а не история изменений: там
   короткое «было → стало» в узкой колонке, здесь длинное название закупки и
   имя заказчика на всю ширину. Сумма справа и в одну строку — по ней взгляд
   идёт вниз по столбцу, сравнивая договоры между собой. */
.deal__row {
  display: grid; grid-template-columns: 104px minmax(0, 1fr) 132px;
  gap: 16px; align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.deal__row:last-child { border-bottom: 0; }
.deal__when { color: var(--fg-dim); font: 400 12.5px/1.5 var(--ff-mono); }
.deal__what { min-width: 0; }
.deal__what b { font-weight: 600; }
.deal__what span { color: var(--fg-muted); }
.deal__val { text-align: right; font: 500 14px/1.5 var(--ff-mono); white-space: nowrap; }

@media (max-width: 720px) {
  /* Сумма уходит под название: резать название закупки нельзя — по нему и
     понятно, что покупали. */
  .deal__row { grid-template-columns: 96px minmax(0, 1fr); gap: 10px; }
  .deal__val { grid-column: 2; text-align: left; }
}

/* На телефоне три колонки не помещаются: дата с полем уходят в строку-шапку,
   значения — под ними. Сжимать колонки значило бы резать адреса. */
@media (max-width: 560px) {
  .hist__row { grid-template-columns: 92px minmax(0, 1fr); }
  .hist__vals { grid-column: 1 / -1; }
}

/* «Оборот не заявлен» стоит на месте крупной цифры. Тот же кегль разорвал бы
   плашку: это фраза, а не число, и читается она строкой, а не взглядом. */
.kpi__v--none {
  font-size: clamp(15px, 1.6vw, 19px); line-height: 1.3;
  color: var(--fg-muted); font-variant-numeric: normal;
}

/* Шаги до первого запроса. Выполненный шаг гаснет, а не исчезает: человек
   должен видеть пройденный путь, иначе список кажется бесконечным. */
.start__list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.start__list li { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.start__mark {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  border: 1.5px solid var(--border-2); background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
}
.start__list li[data-done] { color: var(--fg-muted); }
.start__list li[data-done] .start__mark {
  border-color: color-mix(in oklab, var(--you) 70%, transparent);
  background: color-mix(in oklab, var(--you) 22%, transparent);
}
.start__list li[data-done] .start__mark::after {
  content: "✓"; font-size: 11px; line-height: 1; color: var(--you);
}

/* Примеры кода: вкладки без рамок, активная — подчёркнута. Рамка вокруг
   каждой вкладки на тёмной карте создаёт частокол линий. */
.use__tabs { display: flex; gap: 4px; margin: 14px 0 0; flex-wrap: wrap; }
.use__tabs button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  padding: 8px 12px; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  color: var(--fg-muted); font: inherit; font-size: 14px;
  border-bottom: 2px solid transparent;
}
.use__tabs button[aria-selected="true"] {
  color: var(--fg); border-bottom-color: var(--you);
}
.use__pane { position: relative; }
.use__pane pre {
  margin: 0; padding: 14px 16px; overflow-x: auto;
  border: 1px solid var(--border); border-radius: 0 var(--radius-sm) var(--radius-sm);
  background: var(--raised); font: 400 13px/1.6 var(--ff-mono);
  white-space: pre; tab-size: 2;
}
.use__pane [data-use-copy] { position: absolute; top: 10px; right: 10px; }

/* Секрет ключа: моноширинный, с переносом — его копируют целиком, и обрезка
   здесь означала бы потерянный ключ, который уже нельзя показать снова. */
.account__secret { margin-top: 14px; display: grid; gap: 10px; }
.account__secret code {
  font: 400 13px/1.5 var(--ff-mono); word-break: break-all;
  padding: 12px 14px; border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  background: var(--raised);
}

/* Раздел закупок. Фильтры — одной строкой над лентой: предмет закупки слева,
   поиск справа и шире, потому что в него пишут длинное. На телефоне встают
   друг под друга: сжимать поле поиска до трёх слов бессмысленно. */
.tender-filters { display: grid; grid-template-columns: minmax(220px, 320px) 1fr; gap: 16px; align-items: end; }
.tender-filters__field { display: grid; gap: 6px; min-width: 0; }
.tender-filters__label { color: var(--fg-muted); font: 400 12.5px/1.4 var(--ff-mono); letter-spacing: .02em; }
.tender-filters select, .tender-filters input { width: 100%; }
.tender-more { display: flex; justify-content: center; padding: 20px 0 4px; }

/* Поставщик — ссылка на его страницу: из ленты закупок человек уходит
   смотреть, кто это и что у него ещё. Предмет закупки словами, код — в
   подсказке: «45233» не говорит ничего, «Дорожные работы» говорит. */
.deal__winner { font-weight: 500; }
.deal__cpv { color: var(--fg-dim); font-size: 12.5px; margin-left: 10px; }

@media (max-width: 720px) {
  .tender-filters { grid-template-columns: 1fr; gap: 12px; }
}

/* Заголовок раздела внутри страницы тендеров: страница одна, разделов на ней
   два — открытые конкурсы и заключённые договоры, — и глаз должен отличать
   их с первого взгляда, не читая. */
.tender-section__title { font: 400 22px/1.3 var(--ff-display); margin: 0 0 6px; }