/* ==========================================================================
   rank-map.css — the rank legend (rank-scale.js renderRankLegend) and the map
   labels (map-labels.js), shared by ranking and comparison.
   ========================================================================== */

/* ---- rank legend: "1 [bar] N" ------------------------------------------- */
.map-legend { flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.rank-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.rank-legend-scale { display: inline-flex; align-items: center; gap: 10px; font-variant-numeric: tabular-nums; }
/* The outline keeps the pale middle of the bar distinct from the white card. */
.rank-legend-bar {
  display: flex; width: 200px; max-width: 40vw; height: 12px; border-radius: 6px; overflow: hidden;
  box-shadow: 0 0 0 1px #94a3b8;
}
.rank-legend-bar .rank-legend-step { flex: 1 1 0; }
.rank-legend-nodata { display: inline-flex; align-items: center; gap: 8px; }
.rank-legend-nodata .rank-legend-step { display: inline-block; width: 14px; height: 14px; border-radius: 4px; box-shadow: 0 0 0 1px #94a3b8; }

/* ---- map ---------------------------------------------------------------- */
/* maplibre-gl.css sets `font: 12px/20px "Helvetica Neue", Arial` on the map, so
   without this the labels and the scale paint in Arial, not the site's Lato. */
.maplibregl-map { font: inherit; }

/* Distance scale, bottom right (map-labels.js addMapScale). No box: the text and
   the bar (MapLibre's bottom and side borders) share one colour, black or white
   by what is under them, with a halo in the other — the same rule as the labels.
   MapLibre writes the unit ("km"); the text needs the 16px floor, up from 10px. */
.maplibregl-ctrl-scale {
  font-size: 1rem; line-height: 1.4; font-weight: 700; font-variant-numeric: tabular-nums;
  background: none; color: #000; border-color: currentColor;
  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff);
}
.maplibregl-ctrl-scale.on-dark { color: #fff; filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000); }

/* ---- map labels --------------------------------------------------------- */
.map-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.map-label-leaders { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-label-leaders .halo { stroke: #fff; stroke-width: 3.5; stroke-linecap: round; }
.map-label-leaders .line { stroke: #000; stroke-width: 1.25; stroke-linecap: round; }
/* Text straight on the map, no box. map-labels.js picks black or white from the
   fill under the label (each clears 4.5:1 there); the halo in the other colour
   keeps the edge readable where a label crosses a border. */
.map-label {
  position: absolute; left: 0; top: 0; white-space: nowrap; line-height: 1.2;
  font-size: 1rem; font-weight: 700; color: #000;
  text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #fff;
}
.map-label.on-dark { color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 3px rgba(0, 0, 0, .8); }