/* Mapy – style WorldMap (.wm), RegionMap (.rm) i panelu (.map-panel).
   Kolory zmieniasz zmiennymi CSS na kontenerze, np.:
     #map { --wm-land: #dfe6ee; --wm-selected: #e63946; --map-panel-width: 320px; }
   Dołączany automatycznie przez JS (opcja `css`) albo ręcznie: <link rel="stylesheet" href=".../src/maps.css"> */

/* ==========================================================================
   Mapa świata – zmienne
   ========================================================================== */

.wm {
  --wm-ocean: #eef4fa;
  --wm-sphere-stroke: #d3dfeb;
  --wm-land: #cfd8e3;
  --wm-land-hover: #a9bbd0;
  --wm-land-inactive: #e3e8ee;
  --wm-border: #ffffff;
  --wm-border-width: 0.6px;
  --wm-selected: #2f6fdb;
  --wm-selected-outline: #1b4fa8;
  --wm-hover-outline: #33475b;
  --wm-disputed-stroke: #8a99aa;
  --wm-dot: var(--wm-land);
  --wm-dot-stroke: #6b7f95;
  --wm-marker: #e63946;
  --wm-marker-stroke: #ffffff;
  --wm-tooltip-bg: rgba(24, 33, 45, 0.92);
  --wm-tooltip-fg: #ffffff;
  --wm-control-bg: #ffffff;
  --wm-control-fg: #24313f;
  --wm-control-border: #ccd6e0;
  --wm-font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --wm-transition: 120ms ease;
}

.wm[data-wm-theme='dark'] {
  --wm-ocean: #0f1722;
  --wm-sphere-stroke: #1d2a3a;
  --wm-land: #2b3a4d;
  --wm-land-hover: #43597a;
  --wm-land-inactive: #1c2633;
  --wm-border: #0f1722;
  --wm-selected: #4c8dff;
  --wm-selected-outline: #9cc0ff;
  --wm-hover-outline: #d5e2f2;
  --wm-disputed-stroke: #6a7b90;
  --wm-dot-stroke: #8fa3ba;
  --wm-tooltip-bg: rgba(235, 241, 248, 0.95);
  --wm-tooltip-fg: #101822;
  --wm-control-bg: #1b2533;
  --wm-control-fg: #dfe8f2;
  --wm-control-border: #2e3c4f;
}

@media (prefers-color-scheme: dark) {
  .wm[data-wm-theme='auto'] {
    --wm-ocean: #0f1722;
    --wm-sphere-stroke: #1d2a3a;
    --wm-land: #2b3a4d;
    --wm-land-hover: #43597a;
    --wm-land-inactive: #1c2633;
    --wm-border: #0f1722;
    --wm-selected: #4c8dff;
    --wm-selected-outline: #9cc0ff;
    --wm-hover-outline: #d5e2f2;
    --wm-disputed-stroke: #6a7b90;
    --wm-dot-stroke: #8fa3ba;
    --wm-tooltip-bg: rgba(235, 241, 248, 0.95);
    --wm-tooltip-fg: #101822;
    --wm-control-bg: #1b2533;
    --wm-control-fg: #dfe8f2;
    --wm-control-border: #2e3c4f;
  }
}

/* ==========================================================================
   Mapa regionów – zmienne
   ========================================================================== */

.rm {
  --rm-land: #f8f5e4;
  --rm-land-hover: #ece4c3;
  --rm-land-inactive: #f8f5e4;
  --rm-border: #c2bba3;
  --rm-border-width: 0.7px;
  --rm-outline: #5b8fc7;
  --rm-outline-width: 1.2px;
  --rm-frame: #cfc9b3;
  --rm-selected: #c8102e;
  --rm-selected-outline: #8c0b20;
  --rm-hover-outline: #6f6650;
  --rm-dot: var(--rm-land);
  --rm-dot-stroke: #8f876c;
  --rm-marker: #1d4f91;
  --rm-marker-stroke: #ffffff;
  --rm-tooltip-bg: rgba(24, 33, 45, 0.92);
  --rm-tooltip-fg: #ffffff;
  --rm-control-bg: #ffffff;
  --rm-control-fg: #24313f;
  --rm-control-border: #d6cfb8;
  --rm-font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --rm-transition: 120ms ease;
}

.rm[data-rm-theme='dark'] {
  --rm-land: #2b3a4d;
  --rm-land-hover: #3d5170;
  --rm-land-inactive: #233041;
  --rm-border: #4a5d75;
  --rm-outline: #7fb0e6;
  --rm-frame: #3a4a5e;
  --rm-selected: #ff4d5e;
  --rm-selected-outline: #ffb3bb;
  --rm-hover-outline: #d5e2f2;
  --rm-dot-stroke: #8fa3ba;
  --rm-marker: #9cc0ff;
  --rm-marker-stroke: #0f1722;
  --rm-tooltip-bg: rgba(235, 241, 248, 0.95);
  --rm-tooltip-fg: #101822;
  --rm-control-bg: #1b2533;
  --rm-control-fg: #dfe8f2;
  --rm-control-border: #2e3c4f;
}

@media (prefers-color-scheme: dark) {
  .rm[data-rm-theme='auto'] {
    --rm-land: #2b3a4d;
    --rm-land-hover: #3d5170;
    --rm-land-inactive: #233041;
    --rm-border: #4a5d75;
    --rm-outline: #7fb0e6;
    --rm-frame: #3a4a5e;
    --rm-selected: #ff4d5e;
    --rm-selected-outline: #ffb3bb;
    --rm-hover-outline: #d5e2f2;
    --rm-dot-stroke: #8fa3ba;
    --rm-marker: #9cc0ff;
    --rm-marker-stroke: #0f1722;
    --rm-tooltip-bg: rgba(235, 241, 248, 0.95);
    --rm-tooltip-fg: #101822;
    --rm-control-bg: #1b2533;
    --rm-control-fg: #dfe8f2;
    --rm-control-border: #2e3c4f;
  }
}

/* ==========================================================================
   Wspólne: obszar mapy, SVG, przybliżanie
   ========================================================================== */

.wm-root,
.rm-root {
  position: relative;
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-select: none;
}
.wm-root {
  aspect-ratio: var(--wm-aspect, 2 / 1);
  overflow: hidden;
  font-family: var(--wm-font);
}
.rm-root {
  aspect-ratio: var(--rm-aspect, 1 / 1);
  font-family: var(--rm-font);
}
.rm-root.rm-zoomable {
  overflow: hidden;
}

/* Kontener z ustaloną wysokością – mapa ją wypełnia (klasa dodawana automatycznie). */
.wm.wm-fixed-height > .wm-root,
.rm.rm-fixed-height > .rm-root {
  aspect-ratio: auto;
}

.wm-svg,
.rm-svg {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.rm-svg {
  overflow: visible;
}
.rm-zoomable .rm-svg {
  overflow: hidden;
}
.wm-svg:focus,
.rm-svg:focus {
  outline: none;
}
/* Przeciąganie mapy: przeglądarka nie przewija strony palcem nad mapą. */
.wm-svg.wm-pannable,
.rm-svg.rm-pannable {
  touch-action: none;
  cursor: grab;
}
/* Samo szczypanie: jeden palec nadal przewija stronę. */
.wm-svg.wm-pinchable:not(.wm-pannable),
.rm-svg.rm-pinchable:not(.rm-pannable) {
  touch-action: pan-x pan-y;
}
.wm-svg.wm-dragging,
.rm-svg.rm-dragging {
  cursor: grabbing;
}

.wm-layer-base,
.wm-layer-lines,
.wm-layer-highlight,
.rm-layer-base,
.rm-layer-lines,
.rm-layer-highlight {
  pointer-events: none;
}

.wm-link:focus,
.rm-link:focus {
  outline: none;
}

/* ==========================================================================
   Mapa świata – elementy
   ========================================================================== */

.wm-sphere {
  fill: var(--wm-ocean);
  stroke: var(--wm-sphere-stroke);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

.wm-country {
  fill: var(--wm-fill, var(--wm-land));
  stroke: var(--wm-border);
  stroke-width: var(--wm-border-width);
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: fill var(--wm-transition), filter var(--wm-transition);
}
.wm-country.wm-interactive {
  cursor: pointer;
}
.wm-country.wm-inactive {
  fill: var(--wm-fill, var(--wm-land-inactive));
}
.wm-country.wm-disputed {
  stroke: var(--wm-disputed-stroke);
  stroke-dasharray: 2 2;
}
.wm-country:focus {
  outline: none;
}
.wm-country.wm-hover:not([data-fill]) {
  fill: var(--wm-land-hover);
}
.wm-country.wm-hover[data-fill],
.wm-dot.wm-hover[data-fill] {
  filter: brightness(1.12) saturate(1.1);
}
/* Zaznaczenie wygrywa z hoverem i z kolorem z setColors(). */
.wm .wm-country.wm-selected,
.wm .wm-dot.wm-selected {
  fill: var(--wm-selected);
  filter: none;
}

.wm-hl {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
}
.wm-hl-hover {
  stroke: var(--wm-hover-outline);
  stroke-width: 1.2px;
}
.wm-hl-selected {
  stroke: var(--wm-selected-outline);
  stroke-width: 1.6px;
}

.wm-dot {
  fill: var(--wm-fill, var(--wm-dot));
  stroke: var(--wm-dot-stroke);
  stroke-width: 0.8px;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  transition: opacity var(--wm-transition);
}
.wm-dot.wm-inactive {
  cursor: default;
}
.wm-dot.wm-hover:not([data-fill]):not(.wm-selected) {
  fill: var(--wm-land-hover);
}
.wm-dot.wm-hover {
  stroke: var(--wm-hover-outline);
  stroke-width: 1.4px;
}
.wm-dot.wm-dot-hidden {
  opacity: 0;
  pointer-events: none;
}

.wm-marker circle {
  fill: var(--wm-marker);
  stroke: var(--wm-marker-stroke);
  stroke-width: 1.2px;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
}

/* ==========================================================================
   Mapa regionów – elementy
   ========================================================================== */

.rm-frame {
  fill: none;
  stroke: var(--rm-frame);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

.rm-region {
  fill: var(--rm-fill, var(--rm-land));
  fill-rule: evenodd;
  stroke: none;
  transition: fill var(--rm-transition), filter var(--rm-transition);
}
.rm-region.rm-interactive {
  cursor: pointer;
}
.rm-region.rm-inactive {
  fill: var(--rm-fill, var(--rm-land-inactive));
}
.rm-region:focus {
  outline: none;
}
.rm-region.rm-hover:not([data-fill]) {
  fill: var(--rm-land-hover);
}
.rm-region.rm-hover[data-fill],
.rm-dot.rm-hover[data-fill] {
  filter: brightness(1.12) saturate(1.1);
}
/* Zaznaczenie wygrywa z hoverem i z kolorem z setColors(). */
.rm .rm-region.rm-selected,
.rm .rm-dot.rm-selected {
  fill: var(--rm-selected);
  filter: none;
}

.rm-borders {
  fill: none;
  stroke: var(--rm-border);
  stroke-width: var(--rm-border-width);
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.rm-outline {
  fill: none;
  stroke: var(--rm-outline);
  stroke-width: var(--rm-outline-width);
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.rm-hl {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
}
.rm-hl-hover {
  stroke: var(--rm-hover-outline);
  stroke-width: 1.2px;
}
.rm-hl-selected {
  stroke: var(--rm-selected-outline);
  stroke-width: 1.4px;
}

.rm-dot {
  fill: var(--rm-fill, var(--rm-dot));
  stroke: var(--rm-dot-stroke);
  stroke-width: 0.8px;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  transition: opacity var(--rm-transition);
}
.rm-dot.rm-inactive {
  cursor: default;
}
.rm-dot.rm-hover:not([data-fill]):not(.rm-selected) {
  fill: var(--rm-land-hover);
}
.rm-dot.rm-hover {
  stroke: var(--rm-hover-outline);
  stroke-width: 1.4px;
}
.rm-dot.rm-dot-hidden {
  opacity: 0;
  pointer-events: none;
}

.rm-marker circle {
  fill: var(--rm-marker);
  stroke: var(--rm-marker-stroke);
  stroke-width: 1.2px;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
}

/* ==========================================================================
   Dymek i przyciski
   ========================================================================== */

.wm-tooltip,
.rm-tooltip {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  max-width: 280px;
  padding: 5px 9px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.35;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.wm-tooltip {
  background: var(--wm-tooltip-bg);
  color: var(--wm-tooltip-fg);
}
.rm-tooltip {
  background: var(--rm-tooltip-bg);
  color: var(--rm-tooltip-fg);
}
.wm-tooltip[hidden],
.rm-tooltip[hidden] {
  display: none;
}

.wm-controls,
.rm-controls {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wm-btn,
.rm-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 6px;
  font: 600 18px/1 var(--wm-font, system-ui, sans-serif);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.wm-btn {
  border: 1px solid var(--wm-control-border);
  background: var(--wm-control-bg);
  color: var(--wm-control-fg);
}
.rm-btn {
  border: 1px solid var(--rm-control-border);
  background: var(--rm-control-bg);
  color: var(--rm-control-fg);
}
.wm-btn:hover,
.rm-btn:hover {
  filter: brightness(0.96);
}
.wm-btn:focus-visible {
  outline: 2px solid var(--wm-selected);
  outline-offset: 1px;
}
.rm-btn:focus-visible {
  outline: 2px solid var(--rm-selected);
  outline-offset: 1px;
}

/* ==========================================================================
   Panel z opisem (opcja `panel`)
   ========================================================================== */

.wm,
.rm {
  --map-panel-width: 280px;
  --map-panel-gap: 16px;
  --map-panel-bg: #ffffff;
  --map-panel-fg: #1d2733;
  --map-panel-muted: #66768a;
  --map-panel-border: #e2e8f0;
  --map-panel-radius: 10px;
  --map-panel-accent: var(--wm-selected, #2f6fdb);
}
.rm {
  --map-panel-accent: var(--rm-selected);
}
.wm[data-wm-theme='dark'],
.rm[data-rm-theme='dark'] {
  --map-panel-bg: #121b27;
  --map-panel-fg: #e3ebf5;
  --map-panel-muted: #8d9db1;
  --map-panel-border: #223044;
}
@media (prefers-color-scheme: dark) {
  .wm[data-wm-theme='auto'],
  .rm[data-rm-theme='auto'] {
    --map-panel-bg: #121b27;
    --map-panel-fg: #e3ebf5;
    --map-panel-muted: #8d9db1;
    --map-panel-border: #223044;
  }
}

/* Układ: mapa i panel obok siebie; w wąskim kontenerze panel spada pod mapę. */
.map-with-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--map-panel-gap);
}
.map-with-panel > .wm-root,
.map-with-panel > .rm-root {
  flex: 999 1 420px;
  min-width: 0;
}
.map-with-panel > .map-panel {
  flex: 1 1 var(--map-panel-width);
  min-width: 0;
}
.map-with-panel[data-map-panel='left'] > .map-panel {
  order: -1;
}
.map-with-panel[data-map-panel='bottom'] > .map-panel {
  flex-basis: 100%;
}
.wm-fixed-height.map-with-panel > .wm-root,
.rm-fixed-height.map-with-panel > .rm-root {
  height: 100%;
}
.wm-fixed-height.map-with-panel > .map-panel,
.rm-fixed-height.map-with-panel > .map-panel {
  max-height: 100%;
  overflow: auto;
}

.map-panel {
  box-sizing: border-box;
  padding: 14px 16px;
  border: 1px solid var(--map-panel-border);
  border-radius: var(--map-panel-radius);
  background: var(--map-panel-bg);
  color: var(--map-panel-fg);
  font: 14px/1.5 var(--wm-font, var(--rm-font, system-ui, sans-serif));
  user-select: text;
  -webkit-user-select: text;
}
.map-panel[data-position='overlay'] {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  width: min(var(--map-panel-width), calc(100% - 20px));
  max-height: calc(100% - 20px);
  overflow: auto;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.map-panel[data-position='overlay'].map-panel-empty {
  display: none;
}

/* Domyślna karta – działa też w panelu wskazanym przez `panel: { element }`. */
.map-panel-title {
  margin: 0 0 6px;
  font-size: 1.25em;
  font-weight: 600;
  line-height: 1.25;
}
.map-panel-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 12px;
  margin: 8px 0 0;
}
.map-panel-meta dt {
  color: var(--map-panel-muted, #66768a);
}
.map-panel-meta dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.map-panel-link {
  display: inline-block;
  margin-top: 12px;
  color: var(--map-panel-accent, #2f6fdb);
  font-weight: 600;
  text-decoration: none;
}
.map-panel-link::after {
  content: ' →';
}
.map-panel-link:hover {
  text-decoration: underline;
}
.map-panel-hint {
  margin: 0;
  color: var(--map-panel-muted, #66768a);
}

@media (prefers-reduced-motion: reduce) {
  .wm {
    --wm-transition: 0ms;
  }
  .rm {
    --rm-transition: 0ms;
  }
}