/* Служебные страницы в виде Hallmark: карта /karta, поиск /search, статистика /statistika.
   Токены, шапка и подвал — в hm-chrome.css, основа (поле, кнопки, большой поиск, строки, попапы карты) — в hm.css.
   Цвета только через токены: тёмная тема работает без отдельных правил. */

/* ================= /karta: заголовок с подводкой, карта во всю ширину контейнера, строка об источниках ================= */
.kmap { padding-top: var(--space-lg); }
.kmap__head { display: grid; gap: var(--space-md); margin-bottom: var(--space-lg); }
.kmap h1 { max-width: none; font-size: var(--text-display-s); letter-spacing: var(--tracking-tight); line-height: 1.08; }
@media (max-width: 39.99rem) { .kmap .lead { font-size: var(--text-md); } }
/* Высота задана заранее, чтобы страница не прыгала при загрузке. На телефоне карта не во весь экран:
   под ней видно продолжение страницы, а одним пальцем страница листается мимо карты (карта — двумя) */
#map { height: 30rem; height: clamp(22rem, 70vh, 40rem); height: clamp(22rem, 70svh, 40rem); background: var(--color-paper-2); border-top: var(--rule-heavy) solid var(--color-ink); }
@media (min-width: 40rem) { #map { height: clamp(26rem, 75vh, 56rem); height: clamp(26rem, 75svh, 56rem); } }
@media (min-width: 60rem) {
  .kmap { padding-top: var(--space-xl); }
  #map { height: 44rem; height: max(32rem, calc(100vh - 8rem)); height: max(32rem, calc(100svh - 8rem)); }
}
#map:fullscreen { border-top-width: 0; }
#map:-webkit-full-screen { border-top-width: 0; }
/* без скриптов карта не загрузится — пустую рамку не показываем */
html:not(.js) #map { display: none; }
.kmap__note { max-width: 72ch; margin-top: var(--space-md); color: var(--color-ink-2); font-family: var(--font-display); font-size: var(--text-sm); line-height: 1.5; }
/* зона нажатия ссылок — за счёт полей, строку они не раздвигают */
.kmap__note a { padding-block: 0.6em; color: var(--color-ink); text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; }
.kmap__note a:hover { color: var(--color-accent-text); }

/* ================= /search: большой поиск, подсказки крупным списком, результаты строками ================= */
.srch { padding-top: var(--space-lg); }
.srch h1 { max-width: none; font-size: var(--text-display-s); letter-spacing: var(--tracking-tight); line-height: 1.08; }
.srch .find { margin-top: var(--space-lg); }
.srch .find__row { position: relative; }
@media (min-width: 60rem) { .srch { padding-top: var(--space-2xl); } .srch .find { margin-top: var(--space-xl); } }
/* Подсказки: список сразу под полем, поверх кнопки и того, что ниже; листается внутри, высоту ставит скрипт */
.sac { position: absolute; left: 0; right: 0; top: calc(var(--control-h-l) + var(--space-2xs)); z-index: var(--z-dropdown); max-height: 60vh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: var(--color-paper); border: 2px solid var(--color-ink); box-shadow: 0 12px 34px rgba(0, 0, 0, .16); }
.sac__i { display: grid; align-content: center; gap: var(--space-3xs); min-height: 56px; padding: var(--space-sm) var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); color: var(--color-ink); font-family: var(--font-display); text-decoration: none; }
.sac__i:last-child { border-bottom: 0; }
.sac__i:hover, .sac__i.on { background: var(--color-paper-2); }
.sac__i.on { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.sac__l { min-width: 0; font-size: var(--text-md); font-weight: var(--label-weight); line-height: 1.3; overflow-wrap: anywhere; }
.sac__s { color: var(--color-muted); font-size: var(--text-xs); line-height: 1.3; }
.sac__empty { padding: var(--space-md); color: var(--color-ink-2); font-family: var(--font-display); font-size: var(--text-sm); line-height: 1.4; }
/* Результаты: число найденного, ниже строки с линейками */
.srch__cnt, .sres, .srch__empty { max-width: 48rem; }
.srch__cnt { margin-top: var(--space-xl); color: var(--color-ink-2); font: var(--label-weight) var(--text-sm)/1.3 var(--font-display); }
.srch__cnt .num { color: var(--color-ink); font-weight: 700; }
.sres { margin-top: var(--space-sm); }
.sres__a { display: grid; align-content: center; gap: var(--space-3xs); min-height: 64px; padding-block: var(--space-sm); color: var(--color-ink); text-decoration: none; }
.sres__l { min-width: 0; font: var(--label-weight) var(--text-lg)/1.3 var(--font-display); overflow-wrap: anywhere; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--color-rule-2); text-underline-offset: 0.2em; transition: text-decoration-color var(--dur-short) var(--ease-out); }
.sres__a:hover .sres__l { text-decoration-color: var(--color-accent); }
.sres__s { color: var(--color-ink-2); font: var(--label-weight) var(--text-sm)/1.3 var(--font-display); }
/* на компьютере подпись справа; длинному названию — вся ширина, подпись тогда уходит строкой ниже */
@media (min-width: 40rem) {
  .sres__a { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; align-content: center; column-gap: var(--space-lg); row-gap: var(--space-3xs); }
}
.srch__empty { margin-top: var(--space-xl); color: var(--color-ink); }

/* ================= /statistika: подводка, четыре крупных числа, таблицы с полосами долей ================= */
.stat-top { padding-top: var(--space-lg); }
.stat-top h1 { max-width: 22ch; font-size: var(--text-display-m); letter-spacing: var(--tracking-tight); line-height: 1.05; }
.stat-top .lead { margin-top: var(--space-lg); }
@media (min-width: 60rem) { .stat-top { padding-top: var(--space-2xl); } }
/* Крупные числа гротеском, над каждым — тяжёлая линейка; на телефоне два в ряд, на компьютере четыре */
.figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); margin: var(--space-xl) 0 0; padding: 0; list-style: none; }
.figs > li { display: grid; align-content: start; gap: var(--space-xs); min-width: 0; padding-top: var(--space-md); border-top: var(--rule-heavy) solid var(--color-ink); }
.figs__n { color: var(--color-ink); font: var(--display-weight) var(--text-display-m)/0.95 var(--font-display); font-variant-numeric: lining-nums tabular-nums; letter-spacing: var(--tracking-tight); }
.figs__t { color: var(--color-ink-2); font: var(--label-weight) var(--text-lg)/1.3 var(--font-display); overflow-wrap: break-word; }
@media (min-width: 60rem) { .figs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.stat-sec { margin-top: var(--section-gap-s); }
/* Таблица: название и число, под названием — зелёная полоса доли (от самой большой строки).
   Две колонки, названия переносятся: на телефоне таблица не шире экрана */
.stat-tbl { width: 100%; max-width: 48rem; border-collapse: collapse; }
.stat-tbl th { padding: 0 0 var(--space-xs); border-bottom: var(--rule-hair) solid var(--color-rule-2); color: var(--color-muted); font-size: var(--text-sm); line-height: 1.3; text-align: left; vertical-align: bottom; }
.stat-tbl td { padding: var(--space-2xs) 0 0; border-bottom: var(--rule-hair) solid var(--color-rule); vertical-align: middle; }
.stat-tbl th:first-child, .stat-tbl td:first-child { padding-right: var(--space-md); }
.stat-tbl th:last-child, .stat-tbl td:last-child { text-align: right; }
.stat-tbl td:first-child::after { content: ""; display: block; inline-size: calc(var(--share, 0) * 100%); block-size: 4px; background: var(--color-accent); }
.stat__k { display: flex; align-items: center; min-height: 52px; color: var(--color-ink); font: var(--label-weight) var(--text-lg)/1.25 var(--font-display); overflow-wrap: anywhere; }
a.stat__k { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--color-rule-2); text-underline-offset: 0.2em; }
a.stat__k:hover { text-decoration-color: var(--color-accent); }
.stat-tbl td.num { color: var(--color-ink); font: var(--display-weight) var(--text-lg)/1.25 var(--font-display); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }

/* Данные и покрытие: текст основным кеглем, ссылки — зелёной линией; источник — подписью */
.stat-cov { max-width: 65ch; font-size: var(--text-md); line-height: 1.55; color: var(--color-ink-2); }
.stat-cov a { padding-block: 0.4em; color: var(--color-ink); text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; }
.stat-cov a:hover { color: var(--color-accent-text); }
.stat-note { max-width: 72ch; margin-top: var(--space-lg); color: var(--color-muted); font-family: var(--font-display); font-size: var(--text-xs); line-height: 1.45; }