/* Kills the 1px tile seams that appear at fractional display scaling (125%/150%/175% Windows
   scaling or browser zoom). Loaded by every view that renders Leaflet tiles (the global map and the
   profile mini-map), and declares a `leaflet` dependency so it always wins the cascade over
   leaflet.css.

   THE BUG. When a tile boundary lands on a fractional device pixel, the boundary pixel is split
   between two antialiased tile edges with coverage a and b. Two things then go wrong, at DIFFERENT
   boundaries in the same view, because each boundary rounds its own way:

     * Composited normally, each edge blends with the backdrop independently, so the backdrop leaks
       through at (1-a)(1-b) -- a pale seam. This is Chromium bug 600120.
     * leaflet.css 1.9.4 works that around with `mix-blend-mode: plus-lighter`, which makes the two
       edges ADD back to full coverage. But wherever the edges instead OVERLAP, it adds two opaque
       edges together and draws a line BRIGHTER than either tile.

   So neither blend mode alone can win: measured over 10 reproduced configs, plus-lighter left 69
   seam lines and plain `normal` left 64. (Our 0.1.81 shipped `normal` alone and barely moved the
   needle -- it only changed the seams' character, which is exactly what the reporting user saw.)

   THE FIX is both halves together:
     1. `normal`  -- so overlapping edges are painted over, never added.
     2. a 2px overlap -- so coverage is >= 1 at every boundary and the backdrop can never leak.
   Each half alone is useless or harmful: the widely-copied "grow tiles to 256.5px" hack scores WORSE
   than doing nothing (265 seam lines) while plus-lighter is live to double-add the overlap.

   WHY 258 AND NOT 257: the overlap must be at least one DEVICE pixel. 1 CSS px is under one device
   px whenever the scale is below 1 (e.g. 75% browser zoom), where 257px still seams; 2 CSS px covers
   it. 256.5px is not enough at any fractional scale. Verified across scale x viewport width: clean at
   0.75-3.0 (only 50% browser zoom leaves a trace), including the reporter's 1.7656.

   WHY HARDCODING 256+2 IS SAFE: neither map.js nor profile.js sets `tileSize` or `detectRetina`, so
   Leaflet's 256 default always applies (a live tile's computed width is 256px).

   COST: drawing a 256px tile at 258px stretches its content 0.78%, so the basemap drifts from pin
   positions by up to 2 CSS px at a tile's far edge, resetting each tile. Confirmed by eye against a
   coastline crossing a boundary: the seam goes, and no jog appears. Imperceptible on a soft
   watercolour basemap whose pins are ~30px icons.

   Upstream is aware but has shipped nothing: Leaflet #3575, #6101, PR #9560 (unmerged). The SVG
   feComponentTransfer alpha-boost floated in openstreetmap/iD#10747 was tested here and rejected: it
   is clean through the fractional band but fails at DPR 2.5, and costs an inline <svg> plus a filter
   pass per tile. */
.leaflet-container img.leaflet-tile {
    mix-blend-mode: normal;
    /* !important: Leaflet sets width/height inline on every tile from its own tileSize. */
    width: 258px !important;
    height: 258px !important;
}