/* Витрина данных: каталог `/data-maps` и страницы показателей.

   Цвета -- фирменные переменные из `styles.css` (`--brand*`), а не свои
   значения: раздел новый, и заводить ему собственную палитру значило бы
   развести его с остальным сайтом на первой же смене цвета. Здесь остаётся
   только то, что свойственно самому разделу: сетка карточек, полоски палитр,
   сегменты размеров.

   Отдельный файл, а не строки в styles.css: витрина -- страницы текста и
   ссылок, а styles.css собран вокруг карты и редактора. Смешивать их значит
   тащить на индексируемую страницу вес, которого ей не нужно. */

.dm-page {
  max-width: 60rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #1d2129;
  line-height: 1.55;
}

.dm-head { margin-bottom: 2rem; }

.dm-title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 2.1rem;
  margin: 0.6rem 0 0.4rem;
}

.dm-sub { margin: 0 0 1rem; color: #4a5560; }

.dm-crumbs { margin: 0.4rem 0 0; font-size: 0.9rem; color: #6b7680; }
.dm-crumbs a { color: var(--brand); text-decoration: none; }

.dm-search { position: relative; margin-top: 1rem; }

.dm-search input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  font-size: 1rem;
  border: 1px solid #cfd6dc;
  border-radius: 0.5rem;
}

.dm-hints {
  position: absolute;
  z-index: 5;
  left: 0; right: 0;
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
  background: #fff;
  border: 1px solid #cfd6dc;
  border-radius: 0.5rem;
  box-shadow: 0 6px 24px rgba(20, 30, 40, 0.12);
  max-height: 20rem;
  overflow-y: auto;
}

.dm-hints li { padding: 0.5rem 0.9rem; border-bottom: 1px solid #f0f3f5; }
.dm-hints li:last-child { border-bottom: 0; }
.dm-hints a { color: #1d2129; text-decoration: none; display: block; }
.dm-hints .dm-hint-note { color: #6b7680; font-size: 0.85rem; }
.dm-hints .dm-hint-group {
  display: inline-block;
  margin-top: 0.15rem;
  color: var(--brand);
  font-size: 0.8rem;
  text-decoration: underline;
}

.dm-branch { margin-top: 2.5rem; }

.dm-branch-title {
  font-size: 1.5rem;
  margin: 0 0 0.5rem;
  border-bottom: 2px solid #e6eaee;
  padding-bottom: 0.35rem;
}

.dm-theme { font-size: 1.05rem; margin: 1.4rem 0 0.5rem; color: var(--brand); }

.dm-count {
  font-weight: 400;
  font-size: 0.85rem;
  color: #6b7680;
  margin-left: 0.6rem;
}

.dm-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 0.6rem;
}

.dm-card {
  border: 1px solid #e2e7ec;
  border-radius: 0.5rem;
  padding: 0.7rem 0.85rem;
  background: #fbfcfd;
}

.dm-card a { color: #1d2129; text-decoration: none; font-weight: 600; }
.dm-card a:hover { color: var(--brand); }
.dm-card-note { display: block; font-size: 0.82rem; color: #6b7680; margin-top: 0.2rem; }

.dm-note { color: #6b7680; font-size: 0.9rem; }

@media (max-width: 640px) {
  .dm-title { font-size: 1.6rem; }
  .dm-cards { grid-template-columns: 1fr; }
}

/* --- Страница показателя ------------------------------------------------ */

.dm-page--metric { max-width: 64rem; }

.dm-hero { margin-bottom: 1.4rem; }

.dm-crumbs { display: flex; gap: 0.4rem; align-items: center; }
.dm-crumbs span { color: #c3ccd4; }

.dm-lead { margin: 0.2rem 0 0.8rem; color: #4a5560; font-size: 1.05rem; }

.dm-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; }

.dm-chips li {
  font-size: 0.82rem;
  color: var(--brand);
  background: var(--brand-tint);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
}

.dm-chips .dm-chip--src { background: var(--brand-tint); color: var(--brand-dark); }

/* Что именно выбрано в разрезе -- в шапке, рядом с единицей и годом: заголовок
   у страницы один на все товары, и без этой подписи карта хлеба читалась бы
   как карта бензина. */
.dm-chips .dm-chip--pick { background: #fdf3e3; color: #8a5a12; }

/* Карта -- главное на странице, поэтому у неё своя рамка и тень, а не общий
   бордюр карточек: взгляд должен упираться в неё первым. */
.dm-map {
  margin: 0 0 1.6rem;
  border-radius: 0.8rem;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(20, 40, 60, 0.12);
  background: #eef2f4;
}

/* Высота карты задана НА ЭЛЕМЕНТЕ (`templates/data_map.html`), а здесь только
   подстраховка и мобильный случай. Причина не в стиле, а в кэше: адрес файла
   версионируется вручную (`main.static_version.css`), и правка стилей без
   подъёма номера не доезжает до браузеров вовсе. Карта, у которой размер жил
   только тут, схлопывалась до умолчания iframe -- 300x150. */
.dm-map iframe { display: block; width: 100%; border: 0; }

.dm-card {
  border: 1px solid #e6ebef;
  border-radius: 0.8rem;
  padding: 1.1rem 1.3rem 1.3rem;
  margin-bottom: 1.2rem;
  background: #fff;
}

.dm-card h2 { font-size: 1.15rem; margin: 0 0 0.8rem; }

/* Три колонки вместо абзаца: «где больше» читают глазами, а не по строкам. */
.dm-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.8rem;
}

.dm-stat {
  border-left: 3px solid #d8e2e8;
  padding: 0.2rem 0 0.2rem 0.8rem;
}

.dm-stat--top { border-left-color: var(--brand-deep); }
.dm-stat--mid { border-left-color: var(--brand); }
.dm-stat--low { border-left-color: #cfd6dc; }

.dm-stat-label {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #7a848d;
  margin-bottom: 0.3rem;
}

.dm-stat-row { display: flex; justify-content: space-between; gap: 0.8rem; padding: 0.12rem 0; }
.dm-stat-row b { font-weight: 600; }
.dm-stat-row i { font-style: normal; color: var(--brand); white-space: nowrap; }

.dm-links { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.4rem 0 0.8rem; padding: 0; }

.dm-links a {
  display: inline-block;
  font-size: 0.88rem;
  color: var(--brand);
  border: 1px solid var(--brand-line);
  border-radius: 999px;
  padding: 0.25rem 0.8rem;
  text-decoration: none;
}

.dm-links a:hover { background: var(--brand-tint); }

/* --- Код для встраивания ------------------------------------------------ */

.dm-seg-box { display: flex; flex-direction: column; gap: 0.3rem; }
.dm-seg-box .dm-opt-label { margin: 0; }

.dm-embed-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.4rem;
  align-items: center;
  margin: 0.9rem 0 0.8rem;
}

/* Переключатель размеров -- сегментами, а не списком радиокнопок: три
   варианта рядом видно целиком, и выбор занимает одно движение. */
.dm-seg { display: inline-flex; border: 1px solid #cfd6dc; border-radius: 0.5rem; overflow: hidden; }
.dm-seg label { position: relative; }
.dm-seg input { position: absolute; opacity: 0; pointer-events: none; }

.dm-seg span {
  display: block;
  padding: 0.45rem 0.9rem;
  font-size: 0.9rem;
  cursor: pointer;
  border-right: 1px solid #e2e7ec;
  background: #fff;
  color: var(--brand);
  white-space: nowrap;
}

.dm-seg label:last-child span { border-right: 0; }
.dm-seg input:checked + span { background: var(--brand); color: #fff; }
.dm-seg input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: -2px; }

/* Галочки -- столбиком: в строку они выстраиваются вперемежку с сегментами
   размера и кегля, и глазу негде отделить «что показать» от «какого размера». */
.dm-switches {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex-basis: 100%;
}

.dm-switch { display: flex; align-items: center; gap: 0.45rem; font-size: 0.9rem; cursor: pointer; }

.dm-code { position: relative; }

.dm-code textarea {
  /* Ширина считается вместе с полями и рамкой: без этого 100 % плюс padding
     дают строку шире карточки, и поле вылезает за её край. */
  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem;
  line-height: 1.5;
  padding: 0.75rem 0.9rem;
  border: 1px solid #d7dee4;
  border-radius: 0.5rem;
  background: #f7f9fa;
  color: #2b3a45;
  resize: vertical;
}

.dm-code textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; }

.dm-btn {
  margin-top: 0.6rem;
  background: var(--brand);
  color: #fff;
  border: 0;
  border-radius: 0.45rem;
  padding: 0.55rem 1.2rem;
  font-size: 0.95rem;
  cursor: pointer;
}

.dm-btn:hover { background: var(--brand-dark); }
.dm-btn:active { transform: translateY(1px); }

.dm-embed-said { margin-left: 0.7rem; color: var(--brand); font-size: 0.9rem; }

@media (max-width: 640px) {
  .dm-map iframe { height: 24rem; }
  .dm-seg { width: 100%; }
  .dm-seg span { flex: 1; text-align: center; }
}

/* --- Выбор палитры ------------------------------------------------------ */

.dm-palettes { margin: 0.9rem 0 0.4rem; }

.dm-palettes > summary {
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--brand);
  padding: 0.3rem 0;
  list-style: revert;
}

.dm-palettes[open] > summary { margin-bottom: 0.5rem; }

.dm-pal-group { margin-bottom: 0.7rem; }

.dm-pal-kind {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #8b959d;
  margin-bottom: 0.3rem;
}

.dm-pal-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }

/* Палитра выбирается глазами: подпись подсказывает, а решает полоска цветов.
   Поэтому радиокнопка спрятана, а рамку рисует сама полоска. */
.dm-pal { position: relative; cursor: pointer; }
.dm-pal input { position: absolute; opacity: 0; pointer-events: none; }

.dm-pal-swatch {
  display: flex;
  width: 5.4rem;
  height: 1.1rem;
  border-radius: 0.25rem;
  overflow: hidden;
  border: 2px solid transparent;
  box-shadow: 0 0 0 1px #d7dee4;
}

.dm-pal-swatch i { flex: 1; }

.dm-pal input:checked + .dm-pal-swatch {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand);
}

.dm-pal input:focus-visible + .dm-pal-swatch { border-color: var(--brand-dark); }

.dm-pal-name {
  display: block;
  font-size: 0.72rem;
  color: #6b7680;
  max-width: 5.4rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Палитра, неразличимая при дальтонизме, помечена -- не запрещена, но названа. */
.dm-pal--unsafe .dm-pal-name::after { content: " ◍"; color: #b08a3a; }

/* --- Выбор наблюдения (год и разрезы) ----------------------------------- */

/* Предметный разрез -- строка ссылок над формой, а не пункт списка внутри
   неё. Вариант должен быть виден без раскрытия: читатель узнаёт о его
   существовании, ничего не нажимая. */
.dm-variants {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.6rem;
}

.dm-variants-label { font-size: 0.85rem; color: #6b7680; margin-right: 0.2rem; }

.dm-variant {
  font-size: 0.85rem;
  line-height: 1.2;
  color: var(--brand-dark);
  background: var(--brand-tint);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  text-decoration: none;
}

.dm-variant:hover, .dm-variant:focus-visible { border-color: var(--brand); }

/* Выбранное отличается заливкой, а не только рамкой: рамку на плашке рядом с
   такими же плашками глаз не ловит. */
.dm-variant--on {
  background: var(--brand);
  color: #fff;
  cursor: default;
}

/* Родственный показатель -- это переход на ДРУГУЮ карту, а не другое значение
   на этой. Заливка светлее и рамка видна, чтобы разница читалась до нажатия. */
.dm-variant--kin { background: transparent; border-color: #dfe6ea; }

.dm-variant--kin i { font-style: normal; color: #6b7680; font-size: 0.8em; }

/* Соседей много -- список с раскрытием. Плашками их не показать: имя
   показателя это в среднем 69 знаков, и пять таких плашек занимают абзац, а в
   половине групп их восемнадцать и больше. */
.dm-kin { position: relative; margin: 0 0 0.8rem; }

.dm-kin > summary {
  font-size: 0.85rem;
  color: var(--brand-dark);
  cursor: pointer;
  padding: 0.25rem 0;
}

.dm-kin > summary:hover { color: var(--brand); }

/* Раскрытое -- ОКНО ПОВЕРХ страницы, а не блок в её потоке. В потоке список
   из семидесяти девяти строк сдвигал бы карту вниз на пол-экрана, а каждый
   набранный знак дёргал бы её обратно: количество найденного меняется на
   каждую букву. Оформление и слой те же, что у подсказки поиска в каталоге
   (`.dm-hints`), -- это одно и то же по смыслу, и выглядеть должно одинаково. */
.dm-kin-panel {
  position: absolute;
  z-index: 5;
  left: 0;
  top: 100%;
  width: min(38rem, 92vw);
  margin-top: 0.25rem;
  padding: 0.6rem 0.9rem 0.7rem;
  background: #fff;
  border: 1px solid #cfd6dc;
  border-radius: 0.5rem;
  box-shadow: 0 6px 24px rgba(20, 30, 40, 0.12);
  /* Потолок высоты и своя прокрутка: без них окно уезжает за нижний край
     экрана, и последние строки недостижимы. */
  max-height: min(60vh, 26rem);
  overflow-y: auto;
}

.dm-kin-filter {
  display: block;
  width: 100%;
  margin: 0 0 0.5rem;
  padding: 0.35rem 0.6rem;
  font: inherit;
  font-size: 0.9rem;
  border: 1px solid #dfe6ea;
  border-radius: 6px;
}

.dm-kin-filter:focus-visible { outline: none; border-color: var(--brand); }

.dm-kin-empty { font-size: 0.85rem; color: #6b7680; margin: 0.3rem 0; }

/* В одну колонку, а не в две. Колонки помещали больше строк разом, но окно
   прокручивается по вертикали, а многоколоночная раскладка в нём переливается
   вбок: прокрутка перестаёт вести к концу списка. */
.dm-kin-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dm-kin-list li { margin: 0; }

.dm-kin-list a {
  display: block;
  font-size: 0.85rem;
  line-height: 1.3;
  padding: 0.3rem 0.4rem;
  border-radius: 4px;
  color: var(--brand-dark);
  text-decoration: none;
}

.dm-kin-list a:hover, .dm-kin-list a:focus-visible {
  background: var(--brand-tint);
}

.dm-kin-list i { font-style: normal; color: #6b7680; font-size: 0.85em; }

/* Стоит над картой: меняет саму карту, а не то, как её отдать. Настройки вида
   и код встраивания живут ниже, там их и ищут. */
.dm-picks {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.7rem 1rem;
  margin: 0 0 1rem;
  padding: 0.8rem 1rem;
  border: 1px solid #e6ebef;
  border-radius: 0.6rem;
  background: var(--brand-tint);
}

.dm-pick { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; }
.dm-pick > span { color: #6b7680; }
.dm-pick > span i { font-style: normal; color: #8b959d; }

.dm-pick select {
  min-width: 11rem;
  max-width: 22rem;
  padding: 0.4rem 0.5rem;
  font-size: 0.95rem;
  border: 1px solid #cfd6dc;
  border-radius: 0.4rem;
  background: #fff;
}

/* Высота одна на обе кнопки. Раньше «Показать» была `button`, а «Сбросить» --
   ссылкой, и высоту им задавали только поля: у ссылки не совпадали ни
   line-height, ни базовая строка, и рядом они стояли ступенькой. */
.dm-btn--slim {
  margin: 0;
  padding: 0 1rem;
  height: 2.25rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
}
/* «Сбросить» -- отмена выбора, а не второе действие вровень с «Показать»:
   тот же размер, но контурная, а не залитая. */
.dm-btn--ghost {
  background: #fff;
  color: var(--brand);
  /* Рамка съедает два пиксела высоты, поэтому она есть и у залитой кнопки --
     прозрачная. Иначе одинаковая `height` всё равно давала бы ступеньку. */
  border: 1px solid var(--brand-line);
  text-decoration: none;
}

.dm-btn { border: 1px solid transparent; }

.dm-btn--ghost:hover { background: var(--brand-tint); }

/* Чем отобрана карта -- парами «что: значение», а не абзацем: их читают
   глазами по вертикали, а не строкой. */
.dm-params {
  /* Отступ сверху -- не украшение: список параметров идёт следом за тремя
     колонками «где больше», и без зазора он читается как их четвёртая
     строка. */
  margin: 1.1rem 0 0.6rem;
  display: grid;
  gap: 0.25rem 1rem;
}
.dm-params div { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.dm-params dt { color: #7a848d; min-width: 7rem; font-size: 0.88rem; }
.dm-params dd { margin: 0; font-size: 0.92rem; }

.dm-picks-note { margin: 0 0 0.4rem; font-size: 0.85rem; color: #6b7680; }