/* Костромской краеведческий атлас — токены и базовые компоненты витрины.
   Значения перенесены дословно из утверждённых макетов work/design/src/:
   светлая тема — HomeMain.dc.html, тёмная — HomeDark.dc.html.
   Подбирать на глаз ничего нельзя: макет здесь спецификация. */

/* Шрифты подключает base.html отдельным <link> до этого файла (с preload
   четырёх критичных woff2). @import здесь запускал их на круг позже:
   браузер узнавал о fonts.css только после прихода atlas.css. */

:root {
  --bg: #FBFAF6;
  --surface: #fff;
  --surface-2: #F3F4F1;
  --ink: #16181A;
  --ink-2: #2C312E;
  --muted: #5B625E;
  --muted-2: #3D443F;
  /* Аудит доступности 1f: #8A918D давал 3,1:1 на --bg/--surface и 2,9:1 на
     --surface-2 (нужно ≥4,5:1). Тот же зеленовато-серый оттенок, но темнее —
     5,46:1 / 5,70:1 / 5,16:1 соответственно. Тёмную тему аудит не задел. */
  --faint: #626864;
  --line: #E4E6E2;
  --line-2: #EDEFED;
  --accent: #1F6F5C;
  --accent-hover: #14503F;
  --accent-soft: #F4F8F6;
  --accent-line: #C6DED3;
  --dots: #C7CDC8;

  /* Шесть формантов первой линии — легенда главной */
  --f-vma: #3F5C9A;
  --f-vksha: #B08A2E;
  --f-hta: #7A3F6B;
  --f-ingir: #2C7E8C;
  --f-bol: #B4552F;
  --s-shach: #1F6F5C;

  /* Подложка: она фон, а не карта. Тона уводятся к фону страницы,
     чтобы 277 цветных точек читались поверх, а не спорили с дорогами. */
  --map-bg: #F5F4EE;
  --map-land: #F2F1EA;
  --map-water: #DFE7EA;
  --map-label: #6E756F;
  --map-halo: #FBFAF6;

  --radius: 16px;
  --radius-sm: 12px;
  --shadow: 0 18px 44px rgba(22, 24, 26, 0.16);
  --shadow-sm: 0 10px 26px rgba(22, 24, 26, 0.12);

  --font-ui: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
}

:root[data-theme="dark"] {
  --bg: #12161A;
  --surface: #171C21;
  --surface-2: #1B2127;
  --ink: #E8EDEA;
  --ink-2: #C6CEC9;
  --muted: #C6CEC9;
  --muted-2: #B7C0BA;
  --faint: #7E8A83;
  --line: #2B333A;
  --line-2: #222930;
  --accent: #4FC0A3;
  --accent-hover: #7BD5BD;
  --accent-soft: #16241F;
  --accent-line: #2E8D75;
  --dots: #39434B;

  --f-vma: #7E9BE0;
  --f-vksha: #E0B347;
  --f-hta: #C58ABA;
  --f-ingir: #4FB8CC;
  --f-bol: #F0855C;
  --s-shach: #4FC0A3;

  --map-bg: #12161A;
  --map-land: #151A1F;
  --map-water: #1A242B;
  --map-label: #8F9A93;
  --map-halo: #12161A;

  --shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
  --shadow-sm: 0 10px 26px rgba(0, 0, 0, 0.4);
}

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

/* У body именно min-height: при height: 100% его блок остаётся ровно в экран,
   и sticky-шапка прилипает только внутри первого экрана, а дальше уезжает
   вверх вместе с содержимым. Страницы, которым нужен ровно экран (выдача,
   верстак), задают себе height: 100vh сами. */
/* Шапка липкая: без отступа прокрутки цель якоря (#form, #coords, раздел
   карточки) уезжает под неё, и читатель видит середину раздела вместо
   заголовка. Отступ = высота шапки + воздух; на телефоне шапка в два ряда. */
html { height: 100%; scroll-padding-top: 84px; }
@media (max-width: 720px) { html { scroll-padding-top: 108px; } }
body { min-height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Шапка закреплена, а браузер сам подкручивает скролл, когда высота
     содержимого над вьюпортом меняется. С sticky-шапкой эти две поправки
     ловят друг друга, и страница начинает дрожать сама по себе. */
  overflow-anchor: none;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

/* Аудит доступности 1f: фокус клавиатуры обязан быть виден везде, где его
   не даёт своя обводка компонента. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

h1, h2, h3 { font-family: var(--font-serif); font-weight: 600; margin: 0; line-height: 1.15; }

/* Skip-link: первый элемент body (base.html), уводит фокус к #main, минуя
   шапку и меню. Скрыт за левым краем экрана, по фокусу выезжает поверх
   шапки (та стоит на z-index: 50). */
.at-skip {
  position: absolute; top: 0; left: -999px; z-index: 60;
  background: var(--accent); color: var(--surface);
  padding: 10px 18px; border-radius: 0 0 10px 0;
  font-family: var(--font-ui); font-size: 14px; font-weight: 600;
}
.at-skip:focus { left: 0; }

/* Skip-link ставит фокус программно, не с клавиатуры: :focus-visible на
   #main тут не срабатывает и не нужен — рамка вокруг всей страницы лишняя. */
#main:focus { outline: none; }

/* Видно только скринридеру: элемент остаётся в DOM и в дереве доступности,
   но не занимает места и не рисуется. */
.at-sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* --- мелкие компоненты, перенесённые из макетов ------------------------- */

.at-cap {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 600;
}

.at-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.at-chip {
  display: inline-block;
  font-size: 12.5px;
  border-radius: 999px;
  padding: 5px 13px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: var(--surface);
  white-space: nowrap;
}

.at-chip--on {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.at-key { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted-2); }
.at-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

/* Ключ легенды — кнопка: клик гасит и зажигает свой цвет на карте (главная
   и выдача). Размеры выключенного ключа не меняются: иначе строка легенды
   пляшет при каждом переключении. */
button.at-key {
  border: 0; background: none; padding: 3px 2px; margin: 0;
  font-family: inherit; line-height: inherit; cursor: pointer;
}
button.at-key:hover { color: var(--ink); }
.at-key[aria-pressed="false"] { color: var(--muted); }
.at-key[aria-pressed="false"] .at-dot { opacity: 0.25; }

/* Чип «Снять все» / «Все» — та же кнопка легенды, но без цветного кружка:
   он гасит и зажигает разом все элементы имени. Отбит линией слева, чтобы
   не читался как ещё один цвет шкалы. Состояния aria-pressed у него нет —
   это действие, а не ключ. */
button.at-key--all { color: var(--accent); border-left: 1px solid var(--line); padding-left: 14px; }
button.at-key--all:hover { color: var(--accent-hover); }

/* Пустое значение — это состояние данных, а не отсутствие блока.
   Читатель обязан отличить «мы не знаем» от «мы не показали». */
.at-unset {
  color: var(--faint);
  font-style: italic;
  border-bottom: 1px dashed color-mix(in srgb, var(--faint) 55%, transparent);
}

/* Значение, которого ещё нет у самой витрины: имя автора, адреса соцсетей,
   юридическое лицо оператора. Отличается от .at-unset намеренно — то состояние
   данных свода («мы не знаем»), а это недоделка сайта, и видно её должно быть
   так, чтобы страницу не приняли за готовую. */
.at-todo {
  font-size: 0.92em;
  color: var(--faint);
  border: 1px dashed color-mix(in srgb, var(--faint) 55%, transparent);
  border-radius: 6px;
  padding: 1px 7px;
  white-space: nowrap;
}

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

.at-head {
  display: flex;
  align-items: center;
  gap: 26px;
  height: 68px;
  padding: 0 44px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  /* Меню доступно с любой глубины страницы. z-index выше контролов
     маплибре (у них 2): иначе на карточке места кнопки зума всплывают
     поверх шапки. */
  position: sticky;
  top: 0;
  z-index: 50;
}

.at-logo { display: flex; align-items: center; gap: 11px; flex-shrink: 0; color: var(--ink); }
.at-logo__mark {
  width: 28px; height: 28px; border-radius: 9px; background: #1F6F5C;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.at-logo__text { font-size: 15px; font-weight: 700; line-height: 1.2; }
.at-logo__text span { font-weight: 500; color: var(--muted); }

.at-nav { margin-left: auto; display: flex; align-items: center; gap: 24px; font-size: 14.5px; }
.at-nav a { color: var(--muted-2); }
.at-nav a:hover { color: var(--accent); }

/* Только значок 16 px в круге 32×32 — рамка та же, что у соседних чипов. */
.at-theme {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 32px; height: 32px; padding: 0;
  border: 1px solid var(--line); border-radius: 999px; background: transparent;
  color: var(--muted); cursor: pointer;
}
.at-theme__i { display: flex; }
.at-theme:hover { border-color: var(--accent); color: var(--accent); }

/* --- подсказки под строкой поиска --------------------------------------- */

/* Список рисует search.js (AtlasSuggest) — один и тот же и на главной,
   и в шапке страницы «Карта». Общие правила строк живут здесь; главная
   пока держит свою копию в home.html (значения те же) и перекрывает их —
   когда копия оттуда уйдёт, список останется собой. */
.at-search-wrap, .at-q-wrap { position: relative; }
.at-suggest {
  position: absolute; left: 0; right: 0; top: calc(100% - 1px); z-index: 5;
  background: var(--surface);
  border: 1.5px solid var(--accent); border-top: none;
  border-radius: 0 0 18px 18px;
  box-shadow: var(--shadow);
  padding: 6px 0 4px; text-align: left;
  max-height: min(58vh, 470px); overflow-y: auto; overscroll-behavior: contain;
}
.at-suggest[hidden] { display: none; }
.at-suggest__scale {
  padding: 8px 22px 8px; font-size: 12.5px; line-height: 1.45; color: var(--muted-2);
}
.sg-row {
  display: flex; align-items: baseline; gap: 12px;
  padding: 9px 22px; color: inherit; text-decoration: none;
}
/* Значок типа места (вода, поселение, угодье, рельеф, точка) — рисует
   search.js по подписи типа. Цвет берёт от строки, вес — от текста. */
.sg-row__icon { flex-shrink: 0; align-self: center; color: var(--faint); }
.sg-row:hover .sg-row__icon, .sg-row[aria-selected="true"] .sg-row__icon { color: var(--accent); }
/* Первая строка — дубль кнопки «Искать»: на главной уводит на карту,
   на самой карте запускает поиск на месте. */
.sg-row--all { justify-content: space-between; align-items: baseline;
               border-bottom: 1px solid var(--line-2); padding-bottom: 11px; margin-bottom: 4px; }
.sg-row--all .sg-row__name { font-family: var(--font-ui); font-size: 14.5px;
                             font-weight: 600; color: var(--accent); }
.sg-row__scale { font-size: 12.5px; color: var(--muted-2); text-align: right; }
.sg-row__name { font-family: var(--font-serif); font-size: 18px; color: var(--ink); }
.sg-row__meta { font-size: 12.5px; color: var(--muted); min-width: 0;
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-row__flags { margin-left: auto; display: flex; gap: 10px;
                 font-size: 12.5px; color: var(--faint); white-space: nowrap; }
.sg-row:hover, .sg-row[aria-selected="true"] { background: var(--accent-soft); }
/* Место соседней области видно, но карточки на этом поддомене нет
   (бриф § 2.12): строка не ссылка и подписана областью. */
.sg-row--off { cursor: default; }
.sg-row--off .sg-row__name { color: var(--muted-2); }
.at-suggest__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 6px; padding: 10px 22px 4px; border-top: 1px solid var(--line-2);
  font-size: 12.5px; color: var(--faint);
}

/* --- карта -------------------------------------------------------------- */

.at-map { position: relative; background: var(--map-bg); }
.at-map canvas { outline: none; }
/* Контур снят с canvas — маплибре рисует поверх него свои контролы, и рамка
   на самом холсте не читается. Фокус видно на контейнере целиком. */
.at-map:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Контролы маплибре: своей темы у них нет, поэтому приводим к токенам витрины.
   Без этого на тёмной карте висят три белых прямоугольника. */
/* Компактная атрибуция имеет свой селектор и свой фон — без него на тёмной
   теме остаётся светлая пилюля в углу карты. */
.maplibregl-ctrl-attrib,
.maplibregl-ctrl-attrib.maplibregl-compact,
.maplibregl-ctrl-attrib.maplibregl-compact-show {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--muted);
}
.maplibregl-ctrl-attrib a { color: var(--muted); }
.maplibregl-ctrl-attrib-button { filter: var(--ctrl-filter, none); }

.maplibregl-ctrl-scale {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border-color: var(--line);
  border-top-color: transparent;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 11px;
}

.maplibregl-ctrl-group {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: none;
}
.maplibregl-ctrl-group button + button { border-top-color: var(--line); }
.maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: var(--ctrl-filter, none); }
.maplibregl-ctrl-group button:not(:disabled):hover { background: var(--surface-2); }

/* Иконки контролов — чёрные PNG/SVG: на тёмной теме инвертируем */
:root[data-theme="dark"] { --ctrl-filter: invert(1) brightness(0.85); }

/* Подсказка кооперативного жеста (прокрутка страницы идёт сквозь карту,
   зум — только с Ctrl/⌘). Своих токенов у неё нет, а стандартная чёрная
   пелена в витрине выглядит чужой. */
.maplibregl-cooperative-gesture-screen {
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  font-family: var(--font-ui);
  padding: 0;
}
.maplibregl-cooperative-gesture-screen .maplibregl-desktop-message,
.maplibregl-cooperative-gesture-screen .maplibregl-mobile-message {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  padding: 10px 16px;
  font-size: 13.5px;
}

.maplibregl-popup-content {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-ui);
  padding: 12px 15px;
}
.maplibregl-popup-tip { display: none; }

/* --- узкий экран: общее для всех страниц --------------------------------
   Раньше эти правила лежали в шаблоне главной, и на карточке шапка
   разъезжалась на 519 px при экране 375 — страница получала горизонтальный
   скролл. Место таким правилам здесь: шапка одна на все страницы. */
/* Подвал с атрибуцией — на каждой странице, включая карточки и форманты.
   Раньше список источников и лицензии жили только в макете, и собранная
   витрина не объявляла лицензионный режим нигде. */
/* Имя класса нарочно длинное: в place.html уже есть свой .at-foot —
   подвал карточки с пермалинком, и общий подвал сайта не имеет права
   натягивать на него свои рамки и отступы. */
.at-sitefoot { border-top: 1px solid var(--line); background: var(--surface); margin-top: 40px; }
.at-sitefoot__in { width: min(1180px, calc(100% - 88px)); margin: 0 auto;
               padding: 28px 0 20px; display: grid; gap: 20px 56px;
               grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); }
.at-sitefoot__col { min-width: 0; }
.at-sitefoot__about { margin: 11px 0 0; max-width: 52ch; font-size: 13.5px;
                      line-height: 1.65; color: var(--muted); }
.at-sitefoot__more { margin: 11px 0 0; font-size: 13.5px; }
.at-sitefoot__who { margin: 7px 0 0; font-size: 13px; color: var(--faint); }
.at-sitefoot__nav { list-style: none; margin: 11px 0 0; padding: 0;
                    font-size: 13.5px; line-height: 1.9; color: var(--muted); }
/* Класс пережил старый подвал: им набраны оговорки на страницах «Данные»
   и карточке источника. */
.at-sitefoot__hint { margin: 11px 0 0; max-width: 640px; font-size: 13px; line-height: 1.6; color: var(--faint); }
/* Строка правообладателей — не украшение: атрибуция обязательна на каждой
   странице (CLAUDE.md, «Право и публичность»), сворачивать можно, убирать нет. */
.at-sitefoot__legal { width: min(1180px, calc(100% - 88px)); margin: 0 auto;
                      padding: 12px 0 24px; border-top: 1px solid var(--line-2);
                      display: flex; flex-wrap: wrap; gap: 6px 20px;
                      justify-content: space-between;
                      font-size: 12px; line-height: 1.55; color: var(--faint); }

/* --- компоненты разделов (Данные, Истории, верстак, аппарат записи) --- */

/* Свёрнутый блок. Пришёл на смену тумблеру «строгий режим» (бриф 04.09.2026
   § 2.7): аппарат записи, строгая таблица фиксаций и сырые строки источников
   лежат в разметке всегда и разворачиваются на месте, а не глобальной
   настройкой, о которой читатель не знает. */
.at-fold { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.at-fold > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 20px; cursor: pointer; list-style: none; }
.at-fold > summary::-webkit-details-marker { display: none; }
.at-fold > summary::after { content: "＋"; font-size: 14px; line-height: 1; color: var(--faint); }
.at-fold[open] > summary::after { content: "−"; }
.at-fold > summary:hover { color: var(--ink); }
.at-fold__in { padding: 0 20px 18px; }

/* Кнопка копирования у постоянной ссылки и формулы цитирования: работает
   вместе с /static/js/copy.js, без скрипта просто ничего не делает. */
.at-copy { margin-left: 10px; border: 1px solid var(--line); background: var(--surface);
  color: var(--muted); font-family: var(--font-ui); font-size: 12px;
  padding: 3px 9px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.at-copy:hover { color: var(--ink); border-color: var(--ink-2); }

.at-tabs { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-2); border-radius: 999px; }
.at-tab { padding: 6px 14px; border-radius: 999px; font-size: 13.5px; color: var(--muted); border: 0; background: none; cursor: pointer; }
.at-tab--on { background: var(--surface); color: var(--ink); font-weight: 500; box-shadow: var(--shadow-sm); }
.at-tab--off { cursor: default; opacity: .55; }

.at-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.at-table th { text-align: left; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint);
  padding: 10px 10px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.at-table td { padding: 9px 10px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.at-table .at-table--num, .at-table th.at-table--num { text-align: right; font-variant-numeric: tabular-nums; }
.at-table tr.at-table__total td { border-top: 2px solid var(--ink); font-weight: 600; }
.at-table th[data-sort] { cursor: pointer; }
.at-table th[data-sort="asc"]::after { content: " ↑"; }
.at-table th[data-sort="desc"]::after { content: " ↓"; }
.at-z { color: var(--dots); font-weight: 400; }

/* Валидатор палитры (dataviz, scripts/validate_palette.js, 22.08.2026), легенда
   LEGEND_FORMANTS f-vma/f-vksha/f-hta/f-ingir/f-bol/s-shach:
   light (surface #FBFAF6) — FAIL: chroma floor у f-ingir 0.080 и s-shach 0.082 (порог 0.10,
     читаются серыми); CVD adjacent WARN — s-shach↔f-bol ΔE 6.1 (protan, зона 6.0–8.0);
     lightness band PASS, normal-vision floor PASS (мин. ΔE 18.7), contrast vs surface PASS.
   dark (surface #12161A, --bg тёмной темы) — FAIL: lightness band у всех 6 (L 0.695–0.788,
     порог 0.48–0.67); chroma floor у f-hta 0.096 и f-ingir 0.100; CVD adjacent FAIL —
     f-ingir↔f-hta ΔE 2.8 (deutan, ниже пола 6.0); normal-vision floor PASS (мин. ΔE 17.2),
     contrast vs surface PASS.
   Палитра уже на карте и в легенде — не меняется. Вторичное кодирование обязательно:
   у полосок подпись слева и число справа всегда (не только при наведении), у таблиц — текст. */
/* полоски: тонкие, 4px скругление, число всегда подписано (dataviz) */
.at-bars { display: grid; gap: 7px; }
.at-bar { display: grid; grid-template-columns: 110px 1fr 56px; align-items: center; gap: 10px; font-size: 13.5px; }
.at-bar__lbl { color: var(--muted-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-bar__track { height: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.at-bar__fill { height: 100%; border-radius: 4px; background: var(--accent); }
.at-bar__n { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); }

.at-state { border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: 18px 20px; color: var(--muted); font-size: 14px; }
.at-badge { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; }
.at-badge--draft { background: #FBF8F1; border: 1px solid #E8DFCF; color: #8A6D1F; }
:root[data-theme="dark"] .at-badge--draft { background: #2A2618; border-color: #5A4D2A; color: #D9B65C; }

/* Песочная карточка — из макета SourceMatveev: условия источника и предупреждение
   верстака выделены из соседних карточек, потому что это не счёт, а оговорка.
   Цвет берётся от форманта -вкша, оба тона есть в обеих темах. */
.at-card--sand { background: color-mix(in srgb, var(--f-vksha) 8%, var(--surface));
                 border-color: color-mix(in srgb, var(--f-vksha) 32%, var(--line)); }

/* --- страницы-документы: «О проекте» и юридические ---------------------- */
/* Узкая колонка, как у /help/: документ читается подряд, разрезов и таблиц
   в нём нет. Стили общие, а не постраничные, — страниц четыре и текст у них
   набран одинаково. */
.at-legal { width: min(760px, calc(100% - 88px)); margin: 0 auto; padding: 26px 0 64px; }
.at-legal h1 { font-size: 46px; line-height: 1.05; margin-bottom: 14px; }
.at-legal__eff { margin: 0 0 26px; font-size: 13.5px; color: var(--faint); }
.at-legal__text { font-size: 16px; line-height: 1.7; color: var(--ink-2); }
.at-legal__text p { margin: 0 0 16px; }
.at-legal__text h2 { font-family: var(--font-serif); font-size: 25px; line-height: 1.2;
                     color: var(--ink); margin: 34px 0 12px; }
.at-legal__text ul { margin: 0 0 16px; padding-left: 20px; }
.at-legal__text li { margin-bottom: 6px; }
.at-legal__text a { border-bottom: 1px solid var(--accent-line); }
.at-legal__text code { font-family: var(--font-ui); font-size: 0.92em; color: var(--ink); }
/* Формулы атрибуции набраны в тексте цитатой: их копируют целиком, поэтому
   они отделены плашкой, а не курсивом. Боковой полосы нет — плашки витрины
   держатся на рамке и фоне. */
.at-legal__text blockquote {
  margin: 0 0 16px; padding: 14px 18px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 15px; color: var(--muted-2);
}
.at-legal__text blockquote p:last-child { margin-bottom: 0; }

/* Уведомление о cookie: полоса внизу экрана, поверх содержимого и выше
   sticky-шапки (та на z-index: 50) — на короткой странице банер не должен
   теряться под ней. Ниже skip-link (z-index: 60 тоже, но тот виден только
   по фокусу и с плашкой не пересекается). Прячется целиком через hidden —
   выбор одноразовый, анимация ни к чему. */
.at-consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px 16px;
  padding: 14px 20px;
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  font-size: 13.5px; color: var(--muted-2);
}
/* Атрибут hidden проигрывает display:flex класса: без этого правила плашка
   видна всегда, а скрипт лишь переключает атрибут (найдено 05.09). */
.at-consent[hidden] { display: none; }
.at-consent__text { margin: 0; flex: 1 1 320px; min-width: 0; }
.at-consent__text a { border-bottom: 1px solid var(--accent-line); }
.at-consent__actions { display: flex; gap: 10px; flex-shrink: 0; }
.at-consent__btn {
  font-family: var(--font-ui); font-size: 13px; font-weight: 600;
  border-radius: 999px; padding: 8px 18px; cursor: pointer; white-space: nowrap;
}
.at-consent__btn--yes { border: none; background: var(--accent); color: var(--surface); }
.at-consent__btn--yes:hover { background: var(--accent-hover); }
/* «Без статистики» — второстепенная кнопка, вид как у .at-chip. */
.at-consent__btn--no { border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-weight: 500; }
.at-consent__btn--no:hover { color: var(--ink); border-color: var(--ink-2); }

@media (max-width: 720px) {
  .at-legal { width: calc(100% - 32px); }
  .at-legal h1 { font-size: 34px; }

  .at-head { height: auto; min-height: 56px; padding: 6px 14px 8px; gap: 2px 12px;
             flex-wrap: wrap; }
  .at-logo__text { font-size: 11px; line-height: 1.25; }
  .at-logo__mark { width: 24px; height: 24px; border-radius: 8px; }

  /* Меню — одна строка под логотипом. Раньше оно разъезжалось на два этажа
     и забирало треть экрана до карты. В строку встают четыре читательских
     пункта и тема; верстак с телефона убран: на этой ширине он не работает.
     На десктопе он остаётся. */
  .at-nav { flex-wrap: nowrap; justify-content: flex-end; gap: 6px; font-size: 13px; }
  .at-nav a { display: inline-flex; align-items: center; font-size: 13px;
              line-height: 1.2; padding: 6px; white-space: nowrap; }
  .at-nav a[href="/research/"] { display: none; }

  /* Тумблер темы — тач-цель 44 px: значок тот же, растёт только кнопка.
     Круг вокруг значка снят: в однострочном меню он отнимал место
     у пунктов, а тач-цель остаётся прозрачной областью. */
  .at-theme { width: 44px; height: 44px; border-color: transparent; background: none; }
  .at-theme:hover { border-color: transparent; }

  /* Полоски разделов на узком экране: колонки ужимаем. */
  .at-bar { grid-template-columns: 84px 1fr 48px; }

  /* Подвал на телефоне — одной колонкой: три колонки на 390 px дают
     столбики в два слова. */
  .at-sitefoot__in { width: calc(100% - 32px); grid-template-columns: 1fr;
                     gap: 22px; padding: 22px 0 18px; }
  .at-sitefoot__legal { width: calc(100% - 32px); padding: 12px 0 22px; }

  /* Плашка cookie на телефоне — текст и кнопки в столбик: в строку
     они не помещаются рядом с полем поиска внизу экрана главной. */
  .at-consent { flex-direction: column; align-items: stretch; padding: 14px 16px; }
  /* flex-basis 320px текста в колонке стал бы высотой: сбрасываем. */
  .at-consent__text { flex: 0 0 auto; }
  .at-consent__actions { width: 100%; }
  .at-consent__btn { flex: 1 1 0; text-align: center; }

  /* Ничто не имеет права выпирать за экран: горизонтальный скролл на
     странице — всегда дефект, а не особенность содержимого.
     clip, а не hidden: hidden на html делает корень скролл-контейнером,
     вертикальная прокрутка уезжает в body, и ломаются sticky, якоря и
     100vh. Пока главная была в один экран, это не всплывало. */
  html, body { overflow-x: clip; }
}

/* На бумаге раскрывающегося тумблера нет: свёрнутые блоки (аппарат, источники
   записи, строгая таблица) печатаются раскрытыми, значок «+» не печатается. */
@media print {
  .at-fold__in { display: block !important; }
  .at-fold > summary::after { content: none; }
}

@media(max-width:720px){.at-nav{flex-wrap:wrap!important;justify-content:flex-start!important;max-width:100%;width:100%;gap:4px 6px!important}.at-nav a{min-height:44px}.at-nav a[href="/research/"]{display:inline-flex!important}}