/* ═══════════════════════════════════════════════════════════════════════════
   Choropleth map — контур областей України, заливка за неперервною
   інтенсивністю через color-mix() (керується inline --map-intensity, який
   встановлює choropleth-map.js). Геометрія — вендорений SVG (див. коментар
   у choropleth-map.js біля REGIONS); тут — лише стани й підказка.
   ═══════════════════════════════════════════════════════════════════════════ */

.choropleth-map__viewport {
  position: relative;
}

.choropleth-map__svg {
  display: block;
  width: 100%;
  height: auto;
  max-block-size: var(--uris-component-choropleth-map-max-block-size);
  margin-inline: auto;
}

.choropleth-map__region {
  fill: color-mix(in srgb, var(--uris-color-semantic-accent) var(--map-intensity, 0%), white);
  /* surface-active (gray-400), не surface і не border: біла обводка на білій
     заливці (інтенсивність 0%) робила області з нульовим значенням
     невидимими — контур країни губився (запит користувача 2026-07-23), а
     border (gray-300, #eef1f5) на білому теж майже нерозрізненний. Сіра межа
     тримає контур видимим на будь-якій інтенсивності, лишаючись світлішою за
     hover/active-обводку (semantic-text). */
  stroke: var(--uris-color-semantic-surface-active);
  stroke-width: var(--uris-component-choropleth-map-stroke-width);
  /* Регіони клікабельні (подія choropleth-map:select) — включно з --empty:
     регіон без даних теж можна додати у фільтр. */
  cursor: pointer;
  transition: fill var(--uris-duration-normal) var(--uris-ease-default),
              stroke-width var(--uris-duration-fast) var(--uris-ease-default);
}

.choropleth-map__region--empty {
  fill: var(--uris-color-semantic-surface-muted);
}

.choropleth-map__region:hover,
.choropleth-map__region.is-active {
  stroke: var(--uris-color-semantic-text);
  stroke-width: var(--uris-component-choropleth-map-stroke-width-active);
}

/* ── Підказка при наведенні ──────────────────────────────────────────────── */
.choropleth-map__tooltip {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: var(--uris-component-tooltip-z-index);
  display: flex;
  flex-direction: column;
  /* width:max-content + white-space:normal (не nowrap) — той самий приймом,
     що й у Tooltip (#комп. tooltip.css): коробка росте під короткий текст,
     а довгий переноситься всередині max-width замість візуального виходу
     за межі чорного фону (nowrap+max-width давали overflow:visible контенту
     ширшого за 240px — «текст виходить за чорну зону», знайдено користувачем
     на мапі екрана 2 з довгими підписами «Область: X тис. грн (середнє)»). */
  width: max-content;
  max-width: var(--uris-component-tooltip-max-width);
  padding: var(--uris-spacing-1) var(--uris-spacing-3);
  border-radius: var(--uris-radius-sm);
  background-color: var(--uris-color-semantic-text);
  color: var(--uris-color-semantic-surface);
  font-size: var(--uris-component-tooltip-font-size);
  line-height: var(--uris-text-xs-line);
  white-space: normal;
  pointer-events: none;
}

.choropleth-map__tooltip[hidden] { display: none; }

.choropleth-map__tooltip-title {
  font-weight: var(--uris-font-weight-medium);
}

/* ── Легенда: шкала інтенсивності мін→макс ───────────────────────────────── */
.choropleth-map__legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--uris-spacing-2);
  margin-block-start: var(--uris-spacing-4);
}

.choropleth-map__legend-label {
  font-variant-numeric: tabular-nums;
  font-size: var(--uris-text-xs-size);
  color: var(--uris-color-semantic-text-muted);
}

.choropleth-map__legend-scale {
  inline-size: 6rem;
  block-size: var(--uris-spacing-2);
  border-radius: var(--uris-radius-full);
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--uris-color-semantic-accent) var(--map-intensity-min, 15%), white),
    color-mix(in srgb, var(--uris-color-semantic-accent) 100%, white)
  );
}

/* ── Порожньо ────────────────────────────────────────────────────────────── */
/* Клас-модифікатор, не [hidden]: .empty{display:flex} (empty-state.css) переважає
   атрибут [hidden] у каскаді — перемикаємо видимість через 2-класовий селектор
   (той самий прийом, що й Donut/Bar chart). */
.choropleth-map__empty { flex: 1 1 auto; }
.choropleth-map:not(.choropleth-map--empty) .choropleth-map__empty { display: none; }
.choropleth-map--empty .choropleth-map__viewport,
.choropleth-map--empty .choropleth-map__legend { display: none; }

@media (prefers-reduced-motion: reduce) {
  .choropleth-map__region { transition: none; }
}

/* ── Зведення для скрінрідерів ──────────────────────────────────────────── */
/* Прихований список «область: значення», наповнює render() (SVG — aria-hidden,
   а дані мапи можуть не мати іншого подання на сторінці). Клас власний, не
   .uris-visually-hidden з utilities.css — компонент самодостатній. */
.choropleth-map__sr-summary {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}