/* ============================================================================
   Mischbar / Mixbar — Archiv-Weltkarte (Globus)
   Geteilt von weltkarte.html und index.html. Rendering: assets/weltkarte.js
   ========================================================================== */

/* ---- Karten-Theme-Token ---- */
:root, :root[data-theme="light"]{
  --ocean:#E9E4D8; --country-inactive:#CFC8B9; --country-stroke:#BBB3A2; --grat:rgba(28,24,20,.06);
}
:root[data-theme="dark"]{
  --ocean:#14110D; --country-inactive:#393229; --country-stroke:#4A4339; --grat:rgba(244,241,234,.05);
}

/* ---- Map ---- */
.mb-map{position:relative}
.globe-shade{pointer-events:none; fill:url(#globeShade)}
.map-svg{display:block; width:100%; height:auto; background:transparent; touch-action:none; cursor:grab; filter:drop-shadow(0 10px 24px rgba(28,24,20,.14))}
[data-theme="dark"] .map-svg{filter:drop-shadow(0 10px 26px rgba(0,0,0,.5))}
.map-svg:active{cursor:grabbing}
.ocean{fill:var(--ocean); stroke:var(--country-stroke); stroke-width:.6}
.grat{fill:none; stroke:var(--grat); stroke-width:.5}
.country{fill:var(--country-inactive); stroke:var(--country-stroke); stroke-width:.4; vector-effect:non-scaling-stroke; transition:filter .2s}
.country.active{stroke:rgba(28,24,20,.28); stroke-width:.5; cursor:pointer}
[data-theme="dark"] .country.active{stroke:rgba(0,0,0,.4)}
.country.active.hover{filter:brightness(1.09) saturate(1.05)}
.country.active:focus-visible{outline:none; stroke:var(--ink); stroke-width:1.4}
.country.active.selected{stroke:var(--ink); stroke-width:1.8}
[data-theme="dark"] .country.active.selected{stroke:#F4F1EA}

.hist-region{fill-opacity:0; stroke-width:1.7; stroke-dasharray:2 4.5; stroke-linecap:round; vector-effect:non-scaling-stroke; cursor:pointer; transition:fill-opacity .2s}
.hist-region:hover, .hist-region.selected{fill-opacity:.15}
.hist-region:focus{outline:none}
.hist-region:focus-visible{fill-opacity:.15; stroke-width:2.6}
.hist-region.selected{stroke-width:2.6; stroke-dasharray:3 4}

/* tooltip */
.map-tip{position:absolute; transform:translate(-50%,-100%); background:var(--ink); color:#F4F1EA; padding:7px 11px; border-radius:8px; font-size:13px; pointer-events:none; white-space:nowrap; box-shadow:0 6px 18px rgba(0,0,0,.28); z-index:5}
[data-theme="dark"] .map-tip{background:var(--surface-2); color:var(--fg); border:1px solid var(--line-strong)}
.map-tip .code{font-family:var(--mono); font-size:11px; opacity:.7; margin-left:6px}
.map-tip .meta{font-family:var(--mono); font-size:11px; display:block; opacity:.82; margin-top:2px}

/* controls */
.map-controls{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:10px; padding:0 4px}
.map-controls .hint{font-family:var(--mono); font-size:11px; color:var(--fg-faint); margin-left:auto}
.maperr{padding:30px; text-align:center; color:var(--fg-muted)}