:root {
  --bg: #eef1ec;
  --ink: #1c231d;
  --ink-soft: #55604f;
  --card-bg: rgba(255, 255, 255, 0.78);
  --card-border: rgba(28, 35, 29, 0.08);
  --card-shadow: 0 8px 32px rgba(20, 30, 20, 0.14), 0 1px 2px rgba(20, 30, 20, 0.08);
  --accent: #1f7a3f;
  --accent-soft: #e6f2e6;
  --line: rgba(28, 35, 29, 0.12);
  --county-line: #8a9a86;
  --region-line: #3f5a45;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10140f;
    --ink: #eef3ec;
    --ink-soft: #9fae98;
    --card-bg: rgba(24, 30, 22, 0.72);
    --card-border: rgba(255, 255, 255, 0.08);
    --card-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
    --accent: #5fd489;
    --accent-soft: rgba(95, 212, 137, 0.14);
    --line: rgba(255, 255, 255, 0.1);
    --county-line: #5a6b57;
    --region-line: #8fd39f;
  }
}

:root[data-theme="dark"] {
  --bg: #10140f;
  --ink: #eef3ec;
  --ink-soft: #9fae98;
  --card-bg: rgba(24, 30, 22, 0.72);
  --card-border: rgba(255, 255, 255, 0.08);
  --card-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
  --accent: #5fd489;
  --accent-soft: rgba(95, 212, 137, 0.14);
  --line: rgba(255, 255, 255, 0.1);
  --county-line: #5a6b57;
  --region-line: #8fd39f;
}
:root[data-theme="light"] {
  --bg: #eef1ec;
  --ink: #1c231d;
  --ink-soft: #55604f;
  --card-bg: rgba(255, 255, 255, 0.78);
  --card-border: rgba(28, 35, 29, 0.08);
  --card-shadow: 0 8px 32px rgba(20, 30, 20, 0.14), 0 1px 2px rgba(20, 30, 20, 0.08);
  --accent: #1f7a3f;
  --accent-soft: #e6f2e6;
  --line: rgba(28, 35, 29, 0.12);
  --county-line: #8a9a86;
  --region-line: #3f5a45;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
}

#map {
  position: absolute;
  inset: 0;
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

#app-title {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 5;
  pointer-events: none;
}
#app-title h1 {
  margin: 0;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.01em;
}
#app-title p {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--ink-soft);
}

#panel {
  position: absolute;
  top: 78px;
  left: 18px;
  z-index: 5;
  width: 268px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  padding: 16px 18px 18px;
}

.panel-block + .panel-block {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

#panel h2 {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

.segmented {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.segmented button {
  font-family: inherit;
  text-align: left;
  padding: 9px 11px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.segmented button:hover { background: var(--accent-soft); }
.segmented button.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  font-weight: 600;
}

/* Legends. Shared by both maps - the data map's panel and the results map's
   cards - so switching tabs in the optimizer does not switch visual language.
   Builders in map-style.js produce this markup. */
#legend { font-size: 12px; }
.legend-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin-bottom: 10px;      /* same as #panel h2, so the two titles line up */
}
.legend-scale {
  display: flex;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 6px;
}
.legend-scale span { flex: 1; }
.legend-rows { display: flex; flex-direction: column; gap: 5px; }
/* A caveat under a legend - what the symbol does *not* claim. */
.legend-note {
  margin-top: 6px;
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--ink-soft);
}
.legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 1.35;
}
.legend-swatch {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.legend-swatch.line { height: 3px; border-radius: 2px; box-shadow: none; }
/* The two unit warnings are the heaviest lines on the map, so they are the
   heaviest swatches here. */
.legend-swatch.line.thick { height: 6px; border-radius: 3px; }
/* A graduated symbol is a circle on the map, so it is a circle in the legend. */
.legend-swatch.circle { border-radius: 50%; }
.legend-swatch.text {
  background: none;
  box-shadow: none;
  width: 14px;
  font-weight: 700;
  font-size: 11.5px;
  text-align: center;
}
.legend-labels {
  display: flex;
  justify-content: space-between;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  padding: 5px 0;
  cursor: pointer;
  user-select: none;
}
.toggle input { accent-color: var(--accent); width: 15px; height: 15px; }
/* A choice that belongs to the layer above it, indented under its checkbox. */
.select-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 2px 0 8px 24px;
  font-size: 11.5px;
  color: var(--ink-soft);
}
.select-row.hidden { display: none; }
.select-row select {
  font-family: inherit;
  font-size: 12.5px;
  padding: 5px 8px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--card-bg);
  color: var(--ink);
}
#cluster-legend { margin: 0 0 8px 24px; }

#tooltip {
  position: absolute;
  z-index: 10;
  pointer-events: none;
  padding: 12px 14px;
  max-width: 280px;
  font-size: 12.5px;
  line-height: 1.5;
  transition: opacity 0.08s ease;
}
#tooltip.hidden { display: none; }
#tooltip h3 {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 700;
}
#tooltip .sub {
  color: var(--ink-soft);
  font-size: 11px;
  margin-bottom: 8px;
}
#tooltip table, #unit-detail-stats table { border-collapse: collapse; width: 100%; }
/* "holds the right" next to a share - a word, not a colour alone, so it reads
   the same for anyone who cannot tell the two greens apart. */
#tooltip .v .ok, #unit-detail-stats .v .ok {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #2f7a4a;
  font-weight: 700;
}
#tooltip td, #unit-detail-stats td { padding: 1.5px 0; }
/* The label may wrap, the number may not. It was the other way round, and in a
   280 px card that left "22.915.637 lei" broken across two lines while
   "Economii personal (unitate)" held one - which is the wrong way to spend the
   width: a label reads perfectly well over two lines and a number does not. */
#tooltip td.k, #unit-detail-stats td.k { color: var(--ink-soft); padding-right: 10px; }
#tooltip td.v, #unit-detail-stats td.v {
  text-align: right; font-variant-numeric: tabular-nums; font-weight: 600;
  white-space: nowrap;
}

/* Credit for CC BY-SA / ODbL data. Anchored to the map, below the panels, and
   deliberately not clickable-through: the two source links have to be reachable. */
#attribution {
  position: absolute;
  bottom: 8px;
  right: 12px;
  max-width: min(560px, calc(100vw - 40px));
  line-height: 1.5;
  z-index: 5;
  font-size: 10.5px;
  color: var(--ink-soft);
  background: var(--card-bg);
  padding: 4px 9px;
  border-radius: 8px;
  border: 1px solid var(--card-border);
}

/* --- Narrow screens: the panel stops covering the map -----------------------
   The panel is an overlay pinned to the left of the map, 268 px wide, and it used
   to widen to the full screen below 640 px - so on a phone the legend and the
   layer switches sat over almost the whole map, which is the one thing the page
   is for. Below 860 px the page stacks instead, exactly as the results map does
   in the optimizer: the map keeps a height of its own, the panel joins the flow
   under it, and the page scrolls.

   The same rules dress the embedded copy of this page (the "Hartă actuală" tab),
   where the frame is then sized to this content so that the page - not the frame
   - is what scrolls. That is also why the map's height here is a fixed number
   and not a share of the viewport: inside a frame sized to its content, a vh
   height would feed back into the height the frame is given. */
@media (max-width: 860px) {
  html, body { height: auto; overflow-x: hidden; overflow-y: auto; }
  #map { position: relative; height: 420px; }
  #panel {
    position: static; width: auto; max-height: none; overflow: visible;
    margin: 10px 12px 0; padding: 14px 16px 16px;
  }
  /* The title keeps its place over the map, as on the desktop. In the flow it
     would land *under* the map - it comes after it in the markup - and in the
     embedded copy it is hidden altogether. */
  #app-title { max-width: calc(100vw - 36px); }
  /* A card that follows the pointer is a card under the finger on a touch screen,
     and it is clipped by the edge the finger is near. Here it is a sheet at the
     bottom instead, and it takes taps so it can be dismissed - a phone has no
     "move the pointer away". (On the optimizer's own map the tooltip is not shown
     at all on a narrow screen: the tap opens the unit card, which carries the
     same numbers.) */
  #tooltip {
    position: fixed; left: 8px; right: 8px; bottom: 8px; top: auto;
    width: auto; max-width: none; max-height: 46vh; overflow-y: auto;
    pointer-events: auto;
  }
  #attribution {
    position: static; max-width: none; margin: 10px 12px 14px; text-align: left;
  }
}


#attribution a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; }
#attribution a:hover { color: var(--accent); }

/* Links between the three pages. On the map pages they sit under the title. */
.page-nav { display: flex; gap: 14px; margin-top: 8px; }
.page-nav a {
  font-size: 11.5px; font-weight: 650; color: var(--accent);
  text-decoration: none; border-bottom: 1px solid transparent;
}
.page-nav a:hover { border-bottom-color: var(--accent); }

/* Criterion (j) layer control, hidden unless the page was opened from Pro. */
.hidden { display: none !important; }
#language-legend { margin-top: 10px; }