/* eco-country-map.css — S692J D-S692J-MAPS. Country-shape map used by the podcast page ("Where ECO Reflections
   is heard") and the Library ("Stories by place"). Theme tokens only; all colors live here (no inline styles). */
.ecm { position: relative; width: 100%; }
.ecm-svg { display: block; width: 100%; height: auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; }
.ecm-c { fill: var(--color-surface2); stroke: var(--color-border); stroke-width: .6; vector-effect: non-scaling-stroke; transition: fill .15s; }
.ecm-c.ecm-pick { cursor: pointer; }
.ecm-c.ecm-pick:hover { fill: var(--color-border); }
.ecm-c.ecm-on { fill: var(--brand-blue); stroke: var(--brand-ground); }
.ecm-c.ecm-on:hover { fill: var(--brand-green); }
.ecm-c.ecm-on-used { fill: var(--brand-green); }   /* reserved for a later "Used here" layer */
.ecm-c.ecm-hl, .ecm-dot.ecm-hl { fill: var(--brand-green); }
.ecm-c.ecm-sel, .ecm-dot.ecm-sel { fill: var(--brand-green); stroke: var(--brand-ground); stroke-width: 1.6; }
.ecm-c:focus, .ecm-dot:focus { outline: none; stroke: var(--color-accent-a); stroke-width: 2.2; }
.ecm-c:focus-visible, .ecm-dot:focus-visible { outline: none; stroke: var(--color-accent-a); stroke-width: 2.2; }
.ecm-dot { fill: var(--brand-blue); stroke: var(--brand-ground); stroke-width: 1; cursor: pointer; }
.ecm-lbl { font: 700 9px/1 Arial, sans-serif; fill: var(--brand-ground); text-anchor: middle; dominant-baseline: middle; pointer-events: none; letter-spacing: .02em; }
.ecm-lbl-dot { text-anchor: start; fill: var(--color-text); }
.ecm-layers { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 8px; }
.ecm-layer-btn { font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-mid); cursor: pointer; }
.ecm-layer-btn.is-on { background: var(--brand-blue); border-color: var(--brand-blue); color: var(--brand-ground); }

/* low / empty state: the outline stays, shading is held back, a friendly line sits over it */
.ecm.ecm-quiet .ecm-svg { opacity: .55; }
.ecm-note { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 86%; margin: 0; padding: 10px 16px;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px; font-size: 14px; font-weight: 700;
  color: var(--color-text); text-align: center; line-height: 1.4; }

/* text list of covered countries under each map (also the keyboard / screen reader equivalent) */
.ecm-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ecm-list li { margin: 0; }
.ecm-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); line-height: 1.3; }
button.ecm-chip { cursor: pointer; font-family: inherit; }
button.ecm-chip:hover, button.ecm-chip.is-on { border-color: var(--brand-blue); }
.ecm-chip b { font-weight: 800; color: var(--color-text-mid); letter-spacing: .03em; }
.ecm-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 600px) { .ecm-lbl { display: none; } }  /* too small to read on a phone; the list under the map carries the codes */
@media (prefers-reduced-motion: reduce) { .ecm-c { transition: none; } }

/* S693 D-S693-MAPZOOM: zoom controls and gesture handling */
.ecm-svg { touch-action: pan-y; cursor: default; }
.ecm-zoomed .ecm-svg { touch-action: none; cursor: grab; }
.ecm-zoomed .ecm-svg:active { cursor: grabbing; }
.ecm-zoom { position: absolute; right: 8px; bottom: 8px; display: flex; flex-direction: row; gap: 4px; z-index: 2; }
.ecm-zoom button { width: 30px; height: 30px; padding: 0; font: 700 18px/1 Arial, sans-serif; color: var(--color-text);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px; cursor: pointer; }
.ecm-zoom button:hover:not(:disabled), .ecm-zoom button:focus-visible { border-color: var(--brand-blue); color: var(--brand-blue); }
.ecm-zoom button:disabled { opacity: .4; cursor: default; }
.ecm-z2 .ecm-lbl { font-size: 5px; }
.ecm-z4 .ecm-lbl { font-size: 2.8px; }
.ecm-z8 .ecm-lbl { font-size: 1.5px; }
.ecm-dot { vector-effect: non-scaling-stroke; }