/* Voting Atlas - Laendervergleich (Karte, Listen, Paar) */

/* Sequentielle Skala im UN-Blau (OKLCH-Helligkeit 0.80 -> 0.40 in gleichen Schritten),
   eigene Farbe fuer das gewaehlte Land; grau = zu wenige gemeinsame Abstimmungen */
:root {
  --bin-0: #9CC2EA; --bin-1: #76A9DE; --bin-2: #5590CC;
  --bin-3: #3678B8; --bin-4: #20609B; --bin-5: #124A7B;
  --map-nodata: #DCE3EB; --map-other: #EEF2F6; --map-pick: #C9D9EA;
  --sel-a: #E58A2E;
}
.bin-0 { fill: var(--bin-0); background: var(--bin-0); }
.bin-1 { fill: var(--bin-1); background: var(--bin-1); }
.bin-2 { fill: var(--bin-2); background: var(--bin-2); }
.bin-3 { fill: var(--bin-3); background: var(--bin-3); }
.bin-4 { fill: var(--bin-4); background: var(--bin-4); }
.bin-5 { fill: var(--bin-5); background: var(--bin-5); }
.nodata { fill: var(--map-nodata); background: var(--map-nodata); }
.sel-a { fill: var(--sel-a); background: var(--sel-a); }

/* ---------- Auswahl: Land, tauschen, Vergleichsland ---------- */
.pairpick { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pairpick .picker { flex: 1 1 260px; }
.swap {
  flex: none; width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  border: 1.5px solid var(--line); background: var(--surface); color: var(--muted);
  font-size: 17px; line-height: 1; transition: all .15s;
}
.swap:hover:not(:disabled) { border-color: var(--un); color: var(--un-deep); }
.swap:disabled { opacity: .4; cursor: default; }
.picker select:disabled { opacity: .55; cursor: default; }

.lede { color: var(--muted); margin: 6px 0 0; }

/* ---------- Karte ---------- */
.mapwrap { position: relative; margin: 6px 0 10px; }
.worldmap { display: block; width: 100%; height: auto; }
.worldmap .other { fill: var(--map-other); stroke: #fff; stroke-width: .5; }
.worldmap .shapes path { stroke: #fff; stroke-width: .5; cursor: pointer; transition: opacity .15s; }
.worldmap .shapes path.pick { fill: var(--map-pick); }
.worldmap .shapes path:hover { stroke: var(--ink); stroke-width: 1.2; }
.worldmap .shapes path.sel-a { cursor: default; }
.worldmap .dots circle { stroke: #fff; stroke-width: 1.2; cursor: pointer; }
.worldmap .dots circle.pick { fill: var(--map-pick); }
.worldmap .dots circle:hover, .worldmap .dots circle.sel-b { stroke: var(--ink); stroke-width: 1.6; }
.worldmap .outline { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; pointer-events: none; }

.maptip, .charttip {
  position: absolute; transform: translate(-50%, -100%); pointer-events: none; z-index: 2;
  background: var(--surface); color: var(--ink); border-radius: 10px; box-shadow: var(--shadow-hover);
  padding: 7px 11px; font-size: 13px; white-space: nowrap;
}
.maptip small, .charttip small { display: block; color: var(--muted); font-size: 12px; font-weight: 600; }

.maplegend { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 12.5px; color: var(--muted); margin-bottom: 18px; }
.maplegend .ltitle { font-weight: 800; color: var(--ink); }
.maplegend .lkey { display: inline-flex; align-items: center; gap: 6px; }
.maplegend .sw { width: 14px; height: 10px; border-radius: 3px; display: inline-block; }

/* ---------- Listen: am aehnlichsten / am wenigsten aehnlich ---------- */
.alists { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 28px; }
.alist { display: flex; flex-direction: column; gap: 2px; }
.alist.all { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
.arow, .tbar {
  display: grid; grid-template-columns: minmax(0, 1fr) 90px 42px; align-items: center; gap: 10px;
  border: 1.5px solid transparent; background: transparent; border-radius: 9px;
  padding: 6px 8px; cursor: pointer; text-align: left; color: var(--ink); font: inherit; transition: background .15s;
}
.arow:hover, .tbar:hover { background: var(--un-softer); }
.arow.on, .tbar.on { background: var(--un-soft); border-color: var(--un-soft); }
.aname { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.abar { height: 9px; border-radius: var(--r-pill); background: #F0F3F7; overflow: hidden; }
.abar i { display: block; height: 100%; border-radius: var(--r-pill); }
.apct { text-align: right; font-weight: 800; font-size: 13.5px; font-variant-numeric: tabular-nums; }

/* ---------- Paar ---------- */
.pairhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pairhead .and { color: var(--faint); font-weight: 600; }
.pairhead .close {
  flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  background: #F0F3F7; color: var(--muted); font-size: 20px; line-height: 1;
}
.pairhead .close:hover { background: var(--un-soft); color: var(--un-deep); }
.pair .scope { margin-top: 4px; }

.kpis { display: flex; gap: 12px; flex-wrap: wrap; margin: 4px 0 22px; }
.kpi { flex: 1 1 180px; background: var(--un-softer); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.kpi .v { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1.1; color: var(--un-deep); }
.kpi .l { font-weight: 800; font-size: 13.5px; }
.kpi .s { color: var(--muted); font-size: 12.5px; }

.yearchart { position: relative; margin-bottom: 22px; }
.yearchart svg { display: block; max-width: 100%; height: auto; }
.yearchart .grid { stroke: var(--line); stroke-width: 1; }
.yearchart .ylab { fill: var(--faint); font-size: 11px; text-anchor: end; font-family: var(--font-body); }
.yearchart .xlab { fill: var(--faint); font-size: 11px; text-anchor: middle; font-family: var(--font-body); }
.yearchart .line { fill: none; stroke: var(--un); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.yearchart .pt { fill: var(--un); }
.yearchart .cross { stroke: var(--faint); stroke-width: 1; stroke-dasharray: 3 3; }
.yearchart .mark { fill: var(--un); stroke: #fff; stroke-width: 2; }
.yearchart .hit { fill: transparent; }

.tlist { display: flex; flex-direction: column; gap: 2px; }
.tbar { grid-template-columns: minmax(0, 1fr) 120px 42px 44px; }
.tbar .tn { text-align: right; color: var(--faint); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tlist + .ghost { margin-top: 8px; }
#pair-topics { margin-bottom: 20px; }

.vrow.opp .votes2 { flex: none; display: flex; flex-direction: column; gap: 4px; width: 104px; }
.vrow.opp .vote { width: 100%; }
.vrow.opp .who { font-family: var(--font-mono); font-weight: 500; opacity: .8; }

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  .pairpick { flex-direction: column; align-items: stretch; gap: 8px; }
  .pairpick .picker { flex: none; }
  .swap { align-self: center; transform: rotate(90deg); }
  .alists, .alist.all { grid-template-columns: 1fr; }
  .arow { grid-template-columns: minmax(0, 1fr) 70px 40px; }
  .tbar { grid-template-columns: minmax(0, 1fr) 40px 40px; }
  .tbar .abar { grid-column: 1 / -1; grid-row: 2; }
  .kpi .v { font-size: 26px; }
  .vrow.opp .votes2 { flex-direction: row; width: auto; }
  .vrow.opp .vote { width: auto; }
  .worldmap .dots circle { r: 5; }
}