/* ════════════════════════════════════════════════════════════════════
   data_explorer.css — rules specific to this widget.

   Loads after chart-base.css and may override it. Shared by the English and
   German copies of the page, so edit once and both languages follow.
════════════════════════════════════════════════════════════════════ */

:root {
  --font: Arial, sans-serif;
  --font-serif: Arial, sans-serif;
  --black: #1a1a1a;
  --mid: #6b6b6b;
  --light: #e8e8e8;
  --border: #d0d0d0;
  --bg: #f6f1e7;
  --blue: #3a6dc5;
  --blue-dark: #1a3e8a;
  --tab-active: #3a6dc5;
  --mil: #3a5da8;
  --fin: #6a9bd8;
  --hum: #a8c4e8;

  /* ── DATA VIEW: left/right cell spacing ──────────────────
     Edit --tbl-pad-x-normal for windowed mode and
     --tbl-pad-x-fullscreen for fullscreen mode independently.
     (See .explorer-wrap:fullscreen override below.) */
  --tbl-pad-x-normal: 0.85rem;
  --tbl-pad-x-fullscreen: 0.85rem;
  --tbl-pad-x: var(--tbl-pad-x-normal);
}
html, body { font-family: var(--font); font-size: 14px; background: #f6f1e7; color: var(--black); line-height: 1.5; margin: 0; padding: 0; }
/* ── SCALE CONTAINER ───────────────────────────────────────
   Reserves exactly as much vertical space as the scaled-down
   explorer needs, so the page doesn't leave a gap or clip it. */
.explorer-scale-container {
  width: 100%;
  max-width: 1288px;
  margin: 0 auto;
  overflow: hidden;
  /* Safety: whatever shows through the rounded corner cut-outs is site beige. */
  background: #f6f1e7;
}
/* ── OUTER WRAPPER ───────────────────────────────────────
   Fixed pixel size always — never reflows internally. JS scales
   this whole box up or down (transform: scale) to match the
   available width, exactly like a raster image would resize,
   instead of letting its contents reflow/wrap. */
.explorer-wrap {
  display: flex;
  width: 1155px;
  height: 730px;
  border: 1px solid #ddd6c8;
  border-radius: 6px;
  overflow: hidden;
  background: #f6f1e7;
  /* No drop shadow here: the card fills the whole iframe viewport, so the
     shadow had nowhere to fall and only smudged grey into the rounded
     corner cut-outs. The shadow now lives on the <iframe> in en_index.html. */
  transform-origin: top left;
  outline: none;
}
/* ── FLUID (STANDALONE) MODE ──────────────────────────────
   Only when the page is opened directly in its own window/tab
   (html.fluid, set below — never inside the index page's iframe).
   Embedded, the explorer keeps its fixed 1155×730 aspect and is
   uniformly scaled to the iframe width, exactly as before.

   Standalone, the widget instead fills the whole window in BOTH
   axes, like every other chart page: the horizontal scale still
   comes from the width (so text/geometry never distort), while
   .explorer-wrap's own height is set in JS to whatever, once
   scaled, exactly covers the window height. The internal flex
   layout then reflows vertically (map/globe/line/bar/table panels
   are all flex:1), so no letterboxing above or below. */
html.fluid, html.fluid body { height: 100%; }
html.fluid .explorer-scale-container {
  max-width: none;
  height: 100%;
  margin: 0;
}
/* ── LEFT PANEL ─────────────────────────────────────────── */
.left-panel {
  width: 200px;
  flex-shrink: 0;
  border-right: 1px solid #ddd6c8;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #f6f1e7;
}
.left-header {
  padding: 0.7rem 0.9rem 0.6rem;
  border-bottom: 1px solid #ddd6c8;
  background: #f6f1e7;
  height: 90px;
  box-sizing: border-box;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.left-header h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #174abb;
  margin-bottom: 0;
  line-height: 1.2;
}
.left-header p {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--black);
  line-height: 1.5;
}
/* search box */
.left-search {
  padding: 0.6rem 0.9rem 0.5rem;
  border-bottom: 1px solid #ddd6c8;
  background: #f6f1e7;
}
.left-search-box {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.3rem 0.5rem;
  background: #f6f1e7;
}
.left-search-box svg { width: 12px; height: 12px; color: #aaa; flex-shrink: 0; }
.left-search-box input {
  border: none; background: transparent;
  font-family: var(--font); font-size: 0.75rem; color: var(--black);
  outline: none; width: 100%;
}
.left-search-box input::placeholder { color: #bbb; }
/* sort row */
.left-sort {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.7rem;
  border-bottom: 1px solid #ddd6c8;
  font-size: 0.85rem;
  color: var(--mid);
  background: #f6f1e7;
}
.left-sort label { white-space: nowrap; }
.sort-custom {
  position: relative;
  flex: 1;
}
.sort-custom-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 0.3rem;
  font-family: var(--font); font-size: 0.85rem;
  border: 1px solid var(--border); border-radius: 3px;
  padding: 0 0.4rem 0 0.45rem;
  height: 26px;
  background: #f6f1e7; color: var(--black);
  cursor: pointer; white-space: nowrap;
  transition: background 0.1s;
}
.sort-custom-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 3px); left: 0;
  min-width: 100%;
  background: #f6f1e7;
  border: 1px solid var(--border);
  border-radius: 3px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  z-index: 100;
  overflow: hidden;
}
.sort-custom-option {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.3rem 0.6rem;
  font-family: var(--font); font-size: 0.82rem;
  color: var(--black); cursor: pointer;
  white-space: nowrap;
  transition: background 0.1s;
}
.sort-dir-btn {
  width: 26px; height: 26px; border-radius: 3px; border: 1px solid var(--border);
  background: #f6f1e7; cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; color: var(--mid); flex-shrink: 0;
}
.sort-dir-btn:hover { background: var(--light); }
/* country list */
.left-list {
  flex: 1;
  overflow-y: auto;
  background: #f6f1e7;
}
.country-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.9rem;
  font-size: 0.87rem;
  cursor: pointer;
  transition: background 0.08s;
}
.country-item:hover { background: #ede8de; }
.country-item.selected {
  font-weight: 500;
  color: #ff6b00;
}
.country-item input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 13px; height: 13px; flex-shrink: 0; cursor: pointer;
  border: 1.5px solid #b0a898; border-radius: 2px;
  background: #f6f1e7;
  transition: border-color 0.1s;
}
.country-item input[type="checkbox"]:checked {
  border-color: #ff6b00;
  background: #ff6b00;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'%3E%3Cpath d='M2.5 6.5l3 3 5-5' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-size: 100% 100%;
}
.country-item span { line-height: 1.3; }
.aggregate-divider {
  height: 1px;
  background-image: repeating-linear-gradient(to right, #b0a898 0, #b0a898 1.5px, transparent 1.5px, transparent 5px);
  margin: 0.3rem 0.9rem 0.35rem;
}
.aggregate-toggle .agg-caret {
  flex-shrink: 0;
  opacity: 0.55;
  transition: transform 0.15s;
}
.aggregate-toggle.open .agg-caret { transform: rotate(180deg); }
/* clear button */
.left-clear {
  border-top: 1px solid #ddd6c8;
  background: #f6f1e7;
  padding: 0.5rem 0.9rem;
  font-size: 0.9rem;
  display: flex;
  justify-content: space-between;
}
.left-clear span {
  color: var(--blue);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
}
.left-clear span:hover { text-decoration: underline; }
/* ── RIGHT PANEL ─────────────────────────────────────────── */
.right-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  background: #f6f1e7;
}
/* metric selector bar (aligns with left-header) */
.map-metric-bar {
  padding: 0.55rem 1.1rem 0.45rem;
  border-bottom: 1px solid #ddd6c8;
  position: relative;
  flex-shrink: 0;
  background: #f6f1e7;
  display: flex;
  align-items: center;
  gap: 0;
}
.map-metric-label {
  font-size: 0.7rem;
  color: var(--mid);
  margin-right: 0.55rem;
  white-space: nowrap;
  font-weight: 500;
}
.map-metric-toggle {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
}
.map-metric-toggle button {
  padding: 0.22rem 0.7rem;
  font-family: var(--font);
  font-size: 0.72rem;
  background: #f6f1e7;
  color: var(--mid);
  border: none;
  cursor: pointer;
  border-right: 1px solid var(--border);
  transition: background 0.1s, color 0.1s;
  white-space: nowrap;
}
.map-metric-toggle button:last-child { border-right: none; }
.map-metric-toggle button.active {
  background: var(--black);
  color: #fff;
  font-weight: 500;
}
.map-metric-toggle button:not(.active):hover { background: #ede8de; color: var(--black); }
/* Kiel logo top-right of chart header */
.kiel-logo {
  position: absolute;
  top: 17px; right: 17px; bottom: 17px;
  line-height: 0;
  z-index: 1;
  display: flex;
  align-items: center;
}
.kiel-logo img { height: 56px; width: auto; display: block; }
/* chart title area */
.chart-header {
  padding: 0.45rem 1.1rem 0.6rem;
  padding-right: 160px;
  border-bottom: 1px solid #ddd6c8;
  position: relative;
  flex-shrink: 0;
  background: #f6f1e7;
  min-height: 90px;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.chart-title {
  font-family: var(--font-serif);
  font-size: 1.78rem;
  font-weight: 700;
  line-height: 1.25;
  color: #174abb;
  margin-bottom: 0rem;
}
.chart-subtitle {
  font-size: 0.9rem;
  color: var(--black);
  line-height: 1.5;
  max-width: 780px;
}
/* ── TAB BAR ──────────────────────────────────────────── */
.tab-bar {
  display: flex;
  align-items: center;
  padding: 0 1.1rem;
  border-bottom: 1px solid #ddd6c8;
  gap: 0;
  flex-shrink: 0;
  background: #f6f1e7;
}
.tab-btn {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.65rem 1rem;
  font-size: 0.92rem; font-family: var(--font); font-weight: 400;
  color: var(--mid);
  background: none; border: none; border-bottom: 2.5px solid transparent;
  cursor: pointer; white-space: nowrap;
  margin-bottom: -1px;
  transition: color 0.1s;
}
.tab-btn:hover { color: var(--black); }
.tab-btn.active { color: var(--black); font-weight: 500; border-bottom-color: var(--tab-active); }
.tab-btn svg { width: 16px; height: 16px; }
/* ── PANEL COMMON ─────────────────────────────────────── */
.panel { display: none; flex: 1; flex-direction: column; overflow: hidden; min-height: 0; background: #f6f1e7; }
.panel.active { display: flex; }
.tbl-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; }
.data-table {
  width: 100%; border-collapse: collapse;
  font-size: 0.78rem; font-family: var(--font);
}
.data-table th {
  padding: 0.45rem var(--tbl-pad-x);
  text-align: left; font-weight: 500; font-size: 0.72rem; color: var(--mid);
  border-bottom: 1px solid var(--border);
  white-space: nowrap; cursor: pointer; user-select: none;
}
.data-table th:hover { color: var(--black); }
.data-table td {
  padding: 0.38rem var(--tbl-pad-x);
  border-bottom: 1px solid #ddd6c8;
  color: var(--black);
}
.data-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table tr.highlighted td { background: #f7cfae; }
/* ── MAP PANEL ────────────────────────────────────────── */
#panel-map { background: #f6f1e7; position: relative; flex-direction: column; overflow: hidden; min-height: 0; }
.map-svg-wrap { flex: 1; min-height: 0; position: relative; overflow: hidden; background: #f6f1e7; }
#choropleth-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; background: #f6f2e8; }
/* all world countries default cream — JS overrides with data colors */
.choro-bg    { fill: url(#hatch); stroke: #9a9590; stroke-width: 0.4px; }
.choro-country { stroke: #9a9590; stroke-width: 0.6px; cursor: pointer; transition: opacity .12s; }
.choro-country:hover { opacity: 0.78; }
.globe-country { cursor: pointer; transition: filter .12s; }
.globe-country:hover { filter: brightness(0.96); }
.map-legend {
  flex-shrink: 0;
  display: flex; align-items: flex-start; gap: 0.5rem;
  padding: 0.35rem 1.1rem 0.4rem;
  font-size: 0.75rem; color: var(--mid);
  background: #f6f1e7;
}
.legend-nodata-swatch {
  width: 30px; height: 13px; flex-shrink: 0; margin-top: 0;
  background-color: #f6f2e8;
  background-image: radial-gradient(circle, #d8d3cb 0.5px, transparent 0.5px);
  background-size: 6px 6px; border: 1px solid #d0ccc4;
}
#legend-canvas { height: 13px; flex: 1; }
.legend-ticks {
  display: flex; justify-content: space-between;
  font-size: 0.75rem; color: #777; background: #f6f1e7;
}
/* map tooltip */
#map-tooltip {
  position: fixed; pointer-events: none;
  background: #f6f1e7; border: 1px solid #ccc; border-radius: 4px;
  padding: 0.6rem 0.9rem; font-family: var(--font); font-size: 0.8rem;
  line-height: 1.5; box-shadow: 0 4px 14px rgba(0,0,0,0.13);
  width: 270px; display: none; z-index: 2000;
}
#map-tooltip .tt-name { font-weight: 600; font-size: 1.196rem; margin-bottom: 0.0rem; }
#map-tooltip .tt-val { font-size: 1.15rem; font-weight: 600; margin-bottom: 0.0rem; line-height: 1.1; }
/* timeline */
.timeline-bar {
  flex-shrink: 0; display: flex; align-items: center; gap: 0.65rem;
  padding: 0.45rem 1.1rem; border-top: 1px solid #ddd6c8;
  font-size: 0.75rem; color: var(--mid);
}
.play-btn {
  width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid #999; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.play-btn:hover { border-color: var(--black); }
.play-btn svg { width: 8px; height: 8px; }
.tl-track {
  flex: 1; position: relative; height: 3px; background: #ddd;
  border-radius: 2px; cursor: pointer;
}
.tl-fill { position: absolute; left: 0; top: 0; height: 100%; background: #888; border-radius: 2px; pointer-events: none; }
.tl-thumb {
  position: absolute; top: 50%; transform: translate(-50%,-50%);
  width: 9px; height: 9px; border-radius: 50%;
  background: #333; cursor: grab; box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.tl-thumb-left {
  position: absolute; top: 50%; left: 0; transform: translate(-50%,-50%);
  width: 9px; height: 9px; border-radius: 50%;
  background: #333; cursor: grab; box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.tl-year { font-size: 0.7rem; color: var(--mid); flex-shrink: 0; }
.tl-tick-label {
  position: absolute; top: 5px;
  transform: translateX(-50%);
  font-family: Arial, sans-serif; font-size: 0.75rem;
  color: #999; pointer-events: none; white-space: nowrap;
}
/* ── LINE PANEL ──────────────────────────────────────── */
.line-controls {
  flex-shrink: 0; padding: 0.55rem;
  background: #f6f2e8;
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.72rem; color: var(--mid);
}
.line-controls select {
  font-family: var(--font); font-size: 0.72rem;
  border: 1px solid var(--border); border-radius: 3px;
  padding: 0.22rem 0.45rem; background: #f6f1e7; color: var(--black);
}
.line-chart-wrap { flex: 1; padding: 3rem 0rem 0.4rem; overflow: hidden; }
.legend-item { display: flex; align-items: center; gap: 0.3rem; }
/* ── BAR PANEL ───────────────────────────────────────── */
/* scrollbar-gutter keeps clientWidth identical with and without the scrollbar — renderBar
   measures the width while the SVG is empty, so a scrollbar appearing afterwards would
   otherwise leave the SVG a few px too wide and clip the value labels on the right. */
.bar-chart-wrap { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 0 1.1rem; scrollbar-gutter: stable; }
.bar-chart-wrap::-webkit-scrollbar { width: 5px; }
.bar-chart-wrap::-webkit-scrollbar-thumb { background: #ddd; border-radius: 3px; }
#bar-svg { display: block; }
/* ── BOTTOM FOOTER ───────────────────────────────────── */
.chart-footer {
  flex-shrink: 0;
  padding: 0.5rem 1.1rem;
  border-top: 1px solid #ddd6c8;
  font-size: 0.75rem;
  background: #f6f1e7;
  color: var(--mid);
  line-height: 1.6;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}
.chart-footer a { text-decoration: underline; text-underline-offset: 2px; }
.footer-icons {
  display: flex; align-items: center; gap: 0.35rem; flex-shrink: 0;
}
.footer-icon-btn:hover { background: var(--light); color: var(--black); }
/* fullscreen */
.chart-footer-left { flex: 1; }
.explorer-wrap:-webkit-full-screen { max-width: 100%; margin: 0; height: 100vh; font-size: 24.25px; zoom: 1.0965375; --tbl-pad-x: var(--tbl-pad-x-fullscreen); }
.explorer-wrap:fullscreen { max-width: 100%; margin: 0; height: 100vh; font-size: 24.25px; zoom: 1.0965375; --tbl-pad-x: var(--tbl-pad-x-fullscreen); }
.explorer-wrap:-webkit-full-screen .map-svg-wrap { max-height: calc(100vw * 420 / 960); }
.explorer-wrap:fullscreen .map-svg-wrap { max-height: calc(100vw * 420 / 960); }
.explorer-wrap:-webkit-full-screen #globe-wrap { max-height: calc(100vw * 420 / 960); }
.explorer-wrap:fullscreen #globe-wrap { max-height: calc(100vw * 420 / 960); }
.explorer-wrap:-webkit-full-screen .line-chart-wrap { padding-left: 4vw; padding-right: 4vw; }
.explorer-wrap:fullscreen .line-chart-wrap { padding-left: 4vw; padding-right: 4vw; }
/* ── Download Modal ── */
#dl-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.18); z-index: 3000;
}
#dl-overlay.open { display: block; }
#dl-modal {
  display: none; position: fixed; z-index: 3001;
  left: 50%; top: 50%; transform: translate(-50%,-50%);
  background: #f6f1e7; border: 1px solid #ddd6c8;
  border-radius: 6px; box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  width: 420px; max-width: calc(100vw - 2rem);
  padding: 1.1rem 1.3rem 0.9rem;
  font-family: var(--font);
}
#dl-modal.open { display: block; }
#dl-question {
  font-size: 1.15rem; font-weight: 700;
  color: #ff6b00; margin-bottom: 0.85rem;
  line-height: 1.3;
}
.dl-option {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.55rem 0.7rem; border-radius: 4px;
  cursor: pointer; transition: background 0.1s;
  border: 1px solid transparent;
}
.dl-option:hover { background: #ede8de; border-color: #ddd6c8; }
.dl-option svg { width: 22px; height: 22px; flex-shrink: 0; }
.dl-option-title { font-size: 0.82rem; font-weight: 600; color: var(--black); }
.dl-option-sub { font-size: 0.72rem; color: var(--mid); margin-top: 0.1rem; }
#dl-close {
  position: absolute; top: 0.9rem; right: 0.9rem; z-index: 1;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--border); background: #f6f1e7;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--mid); transition: background 0.1s;
}
#dl-close:hover { background: var(--light); color: var(--black); }
#dl-close svg { width: 13px; height: 13px; }
#info-close:hover { background: var(--light); color: var(--black); }
#info-body h4 {
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: #194aba;
  margin: 1.4rem 0 0.5rem;
}
#info-body h4:first-child { margin-top: 0; }
#info-body ul { margin: 0 0 0.7rem; padding-left: 1.2rem; }
#info-body li { margin-bottom: 0.3rem; }
/* region headers and divider */
.region-header {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px 4px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: #888;
  cursor: pointer; user-select: none;
}
.region-header:not(:first-child) { margin-top: 6px; }
.region-header input[type="checkbox"] { flex-shrink: 0; cursor: pointer; }
.region-divider {
  height: 1px; background: #ddd6c8;
  margin: 8px 10px 6px;
}
/* scrollbar styling */
.tbl-scroll::-webkit-scrollbar, .left-list::-webkit-scrollbar { width: 5px; }
.tbl-scroll::-webkit-scrollbar-thumb, .left-list::-webkit-scrollbar-thumb { background: #ddd; border-radius: 3px; }
/* ── VIEW TOGGLE (Map / Globe) ───────────────────────── */
.view-toggle-wrap {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.view-toggle-label {
  font-size: 0.65rem;
  color: var(--mid);
  white-space: nowrap;
}
.view-toggle {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
}
.view-toggle button {
  padding: 0.24rem 0.72rem;
  font-family: Arial, sans-serif;
  font-size: 0.95rem;
  background: #f6f1e7;
  color: var(--mid);
  border: none;
  border-right: 1px solid var(--border);
  cursor: pointer;
  display: flex; align-items: center; gap: 0.25rem;
  transition: background 0.1s, color 0.1s;
  white-space: nowrap;
}
.view-toggle button:last-child { border-right: none; }
.view-toggle button.active { background: var(--blue); color: #fff; font-weight: 500; }
.view-toggle button:not(.active):hover { background: #ede8de; color: var(--black); }
.view-toggle button svg { width: 14px; height: 14px; }
#view-btn-globe { padding-left: 0.44rem; padding-right: 0.44rem; }
/* Globe container */
#globe-wrap {
  display: none;
  flex: 1;
  position: relative;
  background: #f6f2e8;
  overflow: hidden;
  cursor: grab;
  min-height: 0;
}
#globe-wrap.active { display: flex; align-items: center; justify-content: center; }
#globe-wrap.dragging { cursor: grabbing; }
#globe-svg { display: block; max-width: 100%; max-height: 100%; }
/* zoom controls for map and globe */
.map-zoom-controls {
  position: absolute;
  top: calc(0.55rem + 32px + 0.55rem + 4px); right: 0.55rem;
  display: flex; flex-direction: column; gap: 2px;
  z-index: 10;
}
.map-zoom-btn {
  width: 24px; height: 24px;
  border: 1px solid var(--border); border-radius: 3px;
  background: rgba(246,241,231,0.9); color: var(--mid);
  font-size: 15px; line-height: 24px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  padding: 0; text-align: center;
  font-family: Arial, sans-serif;
  transition: background 0.1s;
}
.map-zoom-btn:hover { background: #ede8de; color: var(--black); }


/* ── GERMAN-ONLY ADJUSTMENTS ──────────────────────────────────────────
   German labels are longer than their English equivalents, so the sidebar
   controls need a slightly smaller type size and the clear-row needs to wrap
   rather than collide. Previously these were divergent values baked into
   de_data_explorer.html; keyed off <html lang="de"> they can share one file. */
html[lang="de"] .left-sort,
html[lang="de"] .sort-custom-btn { font-size: 0.767rem; }

html[lang="de"] .left-clear { align-items: flex-start; gap: 0.6rem; }
html[lang="de"] .left-clear > span:last-child { text-align: right; }