/* =============================================================================
 *  Map decorations — scale bar, north arrow, coordinate readout.
 *  Paired with custom/js/map/common/map-decor.js.
 *
 *  ⚠ This file is DELIBERATELY self-sufficient. The `--bm-*` design tokens are
 *  declared on `.leaflet-container` by custom/css/map/main.css, but that file is
 *  linked per-page and 11 templates load the map SCRIPTS without it
 *  (contact, pdf-to-ags, report, summaryOngoing, sectionPlot pages…). With a
 *  token undefined, `color-mix(in srgb, var(--bm-panel) 88%, transparent)` is
 *  invalid at computed-value time and the declaration is dropped entirely —
 *  the same failure mode that renders Highcharts black in styled mode when
 *  highcharts.css is missing. Every var() below therefore carries an explicit
 *  fallback matching main.css's light theme, so the decoration is styled on
 *  every map whether or not main.css is present.
 *
 *  main.css remains the source of truth for the token VALUES; when it is loaded
 *  its `.dark-version .leaflet-container` block wins on specificity and the
 *  decoration follows the app theme for free.
 * ========================================================================== */

/* ---- bottom-right stack ----
   Scale bar and coordinate readout share this corner and stack vertically.
   Leaflet appends controls in registration order, and map-decor.js adds the
   scale first, so the readout sits above it. */
.leaflet-bottom.leaflet-right .leaflet-control-scale{margin:0 12px 10px 0}

/* ---- scale bar ----
   main.css already themes `.leaflet-control-scale-line`; these rules restate it
   with fallbacks for the pages that lack main.css. */
.leaflet-control-scale-line{
  background:var(--bm-panel,#ffffff);
  color:var(--bm-ink,#344767);
  border:1px solid var(--bm-line,rgba(0,0,0,0.12));
  border-top:none;
  border-radius:0 0 4px 4px;
  font-size:.68rem;font-weight:600;
  font-variant-numeric:tabular-nums;
  text-shadow:none;
  line-height:1.35;padding:1px 7px;
}

/* ---- coordinate readout ----
   Same `.bm-coords` class main.css already styles, repeated here with
   fallbacks so the standalone map pages get it too. */
.bm-coords{
  background:var(--bm-panel,#ffffff);
  color:var(--bm-soft,#7b809a);
  border:1px solid var(--bm-line,rgba(0,0,0,0.12));
  border-radius:7px;padding:3px 9px;
  font-size:.68rem;font-weight:600;
  box-shadow:var(--bm-shadow,0 4px 16px rgba(0,0,0,0.14));
  font-variant-numeric:tabular-nums;
  margin:0 12px 6px 0!important;
}

/* ---- north arrow (.bm-north) ----
   Passive decor, top-left: the right stack is full of interactive controls and
   the bottom corners now hold the legend (left) and scale + readout (right).

   The mark is the SAME glyph the 3D viewer draws (see
   page/3d/includes/compass.html): one flat `fill-rule:evenodd` path — a dart
   with its west flank carved hollow — under an "N". A report that pairs a site
   plan with a 3D screenshot should not show two different north arrows.

   No background panel, by request. That removes the one thing guaranteeing
   contrast, so it is supplied by the FILTER rather than by outlining the glyph:
   a tight light halo lifts it off dark water and imagery, a soft dark shadow
   lifts it off pale desert. Stroking the path instead is what made the previous
   arrow read as fussy — at 26px a 2.2px outline is a third of the needle. */
.bm-north{
  background:none;border:0;box-shadow:none;
  margin:10px 0 0 10px!important;
  line-height:0;pointer-events:none;
  filter:drop-shadow(0 0 1.5px rgba(255,255,255,.95)) drop-shadow(0 1px 2px rgba(0,0,0,.45));
}
.bm-north svg{display:block;overflow:visible}
.bm-north .bm-north-arrow{fill:var(--bm-ink,#344767)}
.bm-north .bm-north-n{
  fill:var(--bm-ink,#344767);
  font-size:46px;font-weight:700;font-family:inherit;letter-spacing:.02em;
}
/* In dark mode the "ink" token is near-white, so a white halo would vanish into
   the glyph — flip the halo dark and keep the same contrast relationship.
   Scoped to .dark-version, which is how the whole map surface already switches
   theme. ⚠ The fill fallbacks are restated here too: 11 templates load the map
   scripts WITHOUT map/main.css, where `--bm-ink` is declared, and those pages
   would otherwise pair the light-theme navy fallback with the dark halo. */
.dark-version .bm-north{filter:drop-shadow(0 0 1.5px rgba(0,0,0,.9)) drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.dark-version .bm-north .bm-north-arrow{fill:var(--bm-ink,#e9ecef)}
.dark-version .bm-north .bm-north-n{fill:var(--bm-ink,#e9ecef)}

/* ---- size policy ----
   Reuses the container-size classes BoreholeMap._initCompactMode() maintains
   with a ResizeObserver rather than measuring anything again. Thumbnail maps
   (dashboard / report / profile) keep the scale bar — the one decoration that
   still means something at that size — and drop the rest. Standalone maps that
   never set these classes simply always show everything. */
.bm-compact .bm-north{margin:8px 0 0 8px!important}
.bm-compact .bm-north svg{width:21px;height:26px}
.bm-mini .bm-north{display:none}