/* =================================================================================================
   Shared map popup chrome (task 2356) — the ONE implementation of what a MapLibre popup looks like
   on every WX map page. Loaded by /map, /map/doppler, /forecast, /radar/bom/*, /radar/3d/*,
   /radar/coverage, /observations/map, /rewind, the rainfall project maps, the radar path-attenuation
   page, the tropical storm and 1999 hailstorm pages, the smoke map, and the radar_admin bright-band
   and beam-blockage tools.

   It is its own small stylesheet rather than a block inside map_shared.css because most of those
   pages do not load map_shared.css (51 KB of /map sidebar chrome) and should not have to just to get
   a consistent popup.

   Opt in at the Popup constructor:
       new maplibregl.Popup({ className: 'wx-map-popup wx-map-popup-observation' })
   MapLibre splits className on spaces onto the OUTER .maplibregl-popup container, beside the anchor
   classes, so a modifier reaches the tip and the close button as well as the body.

   A layer varies ONE thing — --wx-popup-accent — plus, for a one-line hover label, the -label size
   modifier. Nothing else is per-page, which is the whole point of the file.

   Deliberately sets no background or color on the content: light comes from maplibre-gl.css and dark
   from the :root.dark block at the bottom of this file, both by inheritance. Setting a colour on the
   wrapper pins the popup to one theme (the rule the wx-map skill records).

   The constructor's maxWidth option lands as an INLINE style on the outer container and beats any
   stylesheet rule on .maplibregl-popup, so the narrow-screen clamp has to live on the CONTENT to bite.
   That clamp also needs box-sizing: border-box — maplibre-gl.css leaves the content box at
   content-box, so `max-width: calc(100vw - 36px)` measured only the text and the 12 + 34 px padding
   plus the 4 px accent were added on top: a popup rendered 334 px wide inside a 320 px phone.
   ================================================================================================= */
.wx-map-popup { --wx-popup-accent: var(--brand-blue, #2563EB); }
.wx-map-popup .maplibregl-popup-content { box-sizing: border-box; padding: 10px 12px; border-radius: 6px; border-left: 4px solid var(--wx-popup-accent); box-shadow: 0 2px 10px rgba(0,0,0,0.18); font: 13px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; max-width: calc(100vw - 36px); }
.wx-map-popup .wx-popup-title { font-weight: 600; font-size: 13px; line-height: 1.3; margin: 0 0 3px 0; color: var(--wx-popup-accent); }
.wx-map-popup .wx-popup-badge { display: inline-block; padding: 2px 6px; border-radius: 3px; font-weight: 600; font-size: 11px; margin-bottom: 4px; }
.wx-map-popup .wx-popup-meta { color: var(--fg-muted, #6B7280); font-size: 12px; }

/* Two title classes predate the shared block and carry their own markup in files whose HTML is built
   in several places (.rp-popup-title = the rainfall project location + subcatchment cards in
   radar_sequence.js; .gauge-popup-name = Weather Rewind's gauge, obs, river and warning cards).
   Aliasing them here makes a popup title the same colour on every map without rewriting that markup. */
.wx-map-popup .rp-popup-title, .wx-map-popup .gauge-popup-name { color: var(--wx-popup-accent); }

/* One-line hover labels ("Canberra Radar"). The same card with less of it — a label with no close
   button and nothing under the title should not carry a full card's padding. Must follow the base
   rule: same specificity, so source order decides. */
.wx-map-popup-label .maplibregl-popup-content { padding: 6px 9px; }
.wx-map-popup-label .wx-popup-title { margin: 0; }

/* Close button: MapLibre's default carries no width, height or padding at all, so the tap target is
   whatever the × glyph happens to occupy. Sized here for a thumb; the body reserves room for it only
   when one exists, so a hover popup carries no dead space down its right edge. */
.wx-map-popup .maplibregl-popup-content:has(.maplibregl-popup-close-button) { padding-right: 34px; }
.wx-map-popup .maplibregl-popup-close-button { top: 5px; right: 5px; width: 28px; height: 28px; padding: 0; line-height: 26px; font-size: 18px; border-radius: 4px; color: var(--fg-muted, #6B7280); }
.wx-map-popup .maplibregl-popup-close-button:hover { background: rgba(0,0,0,0.06); color: var(--fg-text, #1A202C); }

/* Sensor links in the observation click popup. .observation-location-sensors is also styled in
   observations_map.css for /observations/map; these are the rules every OTHER page needs, since
   without them the links render as browser-default underlined blue. */
.wx-map-popup .observation-location-sensors { margin-top: 6px; border-top: 1px solid rgba(128,128,128,0.25); padding-top: 4px; }
.wx-map-popup .observation-location-sensors a { display: block; padding: 6px 0; font-size: 12px; color: var(--link, #2563EB); text-decoration: none; }
.wx-map-popup .observation-location-sensors a:hover { text-decoration: underline; }

/* Per-layer accent — the ONLY thing a layer overrides. FIVE accents cover twenty-three popups,
   because related layers share one: an observation is an observation whether it is on /map,
   /observations/map or Weather Rewind.
     radar        a radar site marker, and the radar-derived subcatchment rainfall estimate
     observation  any station or gauge — AWS, DPIRD, rain gauge, river gauge
     warning      any hazard — BoM warnings, lightning strikes, satellite fire hotspots
     cyclone      cyclone track points
     ground       the terrain / ground-height readout
   Dark-mode pairs are lifted for contrast against --bg-card (#161B22), the way _tokens.css lifts
   --brand-blue. */
.wx-map-popup-radar       { --wx-popup-accent: #2563EB; }
.wx-map-popup-observation { --wx-popup-accent: #0D9488; }
.wx-map-popup-warning     { --wx-popup-accent: #D97706; }
.wx-map-popup-cyclone     { --wx-popup-accent: #7C3AED; }
.wx-map-popup-ground      { --wx-popup-accent: #78716C; }
:root.dark .wx-map-popup-radar       { --wx-popup-accent: #58A6FF; }
:root.dark .wx-map-popup-observation { --wx-popup-accent: #2DD4BF; }
:root.dark .wx-map-popup-warning     { --wx-popup-accent: #FBBF24; }
:root.dark .wx-map-popup-cyclone     { --wx-popup-accent: #A78BFA; }
:root.dark .wx-map-popup-ground      { --wx-popup-accent: #D6D3D1; }

/* -------------------------------------------------------------------------------------------------
   Dark mode. ONE copy: this block was near-identically triplicated in map.css, observations_map.css
   and radar.css, which is how /rewind, /radar/coverage, the rainfall project maps and the smoke map
   ended up with no dark popup at all. Left UNSCOPED (not under .wx-map-popup) so a popup created by
   vendored code — the video-export plugin — keeps behaving exactly as it does today.

   Eight tip variants because each anchor position colours a different border-*-color on the same
   .maplibregl-popup-tip element.
   ------------------------------------------------------------------------------------------------- */
:root.dark .maplibregl-popup-content { background: var(--bg-card); color: var(--fg-text); }
:root.dark .maplibregl-popup-content a { color: var(--link); }
:root.dark .maplibregl-popup-close-button { color: var(--fg-text); }
:root.dark .wx-map-popup .maplibregl-popup-close-button:hover { background: rgba(255,255,255,0.10); }
:root.dark .maplibregl-popup-anchor-top .maplibregl-popup-tip,
:root.dark .maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
:root.dark .maplibregl-popup-anchor-top-right .maplibregl-popup-tip { border-bottom-color: var(--bg-card); }
:root.dark .maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
:root.dark .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
:root.dark .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { border-top-color: var(--bg-card); }
:root.dark .maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--bg-card); }
:root.dark .maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--bg-card); }