/* projects-map.css — the /projects map, on Google Maps instead of Leaflet.

   design.css is a vendor file and is not edited, so everything here either
   (a) undoes a Google default that would fight a rule design.css already has,
   or (b) re-homes a design.css rule onto the element Google actually builds.
   Nothing here restyles the pins or the popup's contents: `.map-popup`,
   `.map-popup-body`, `.map-popup-x`, `.map-controls` and `.map-ctl` still come
   from design.css, which is why projects-map.js reproduces that markup.

   `.gm-style*` are Google's own class names. There is no supported hook for
   restyling the InfoWindow's chrome — `headerDisabled` removes the title bar
   and close button, and that is as far as the options go — so the three rules
   that flatten the card wrapper have to name them. They are the long-standing
   names the whole ecosystem targets, and if Google ever renames them the
   failure is a padded white box around a card, not a broken map.

   Loaded after design.css, so it wins ties.
   See ORIGINAL-SITE-DEFECTS.md, "The /projects map is a real map". */

/* ---- the container ------------------------------------------------------ */

/* design.css gives `.service-map` its height, radius, border and soft-green
   background. Google paints its own background inside; these two only make sure
   the map inherits the page's type rather than Google's Roboto stack, and that
   the rounded corners actually clip the tiles. */
.service-map{font-family:inherit}
.service-map .gm-style,.service-map .gm-style *{font-family:inherit}

/* design.css sets `cursor:grab` on the container and `grabbing` while pressed,
   which was right for a canvas that handled its own dragging. Google sets a
   cursor per surface — a pointer over a marker, a crosshair while the pegman is
   down — and the container's rule would win over none of them but does win over
   the default arrow on the controls. Handing it back lets Google's own cursors
   through. */
.service-map,.service-map:active{cursor:default}
.service-map .gm-style [role="button"],.service-map .gm-style a{cursor:pointer}

/* ---- the popup ---------------------------------------------------------- */

/* `.map-popup` is the card itself now — projects-map.js emits it as the
   InfoWindow's content — so design.css's width, background, radius, shadow and
   dark-scheme colour all apply directly. Only the positioning half has to go:
   design.css positioned the card absolutely against the map container, and
   Google positions it now. `position:relative` rather than `static`, because
   `.map-popup-x` is absolutely positioned against it. */
.gm-style .map-popup{position:relative;top:auto;left:auto;transform:none;z-index:auto}
.gm-style .map-popup:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.gm-style .map-popup .btn{color:#fff}

/* Google's own InfoWindow chrome, flattened so the card above is the whole of
   what is drawn: no white plate behind it, no padding around it, no scroll box
   inside it and no tail below it. The original popup was a plain card with no
   arrow, which is what this restores. The `!important`s are on the three
   properties Google writes as inline styles on the same elements at runtime. */
.gm-style .gm-style-iw-c{padding:0!important;border-radius:var(--r-2);background:none;box-shadow:none;overflow:visible;max-width:none!important;max-height:none!important}
/* headerDisabled empties the header but still reserves its strip; without this
   the card carries 12px of white above the photograph. */
.gm-style .gm-style-iw-ch{display:none}
.gm-style .gm-style-iw-d{padding:0;overflow:visible!important;max-height:none!important}
.gm-style .gm-style-iw-tc{display:none}

/* ---- controls ----------------------------------------------------------- */

/* The page's three buttons are pushed into Google's RIGHT_BOTTOM control slot,
   where Google does the positioning, so design.css's absolute placement has to
   be handed back. The margin is Google's own control margin, so the cluster
   lines up with the pegman below it and the fullscreen button above. */
.map-controls-gm{position:static;top:auto;right:auto;margin:0 10px 10px 0}

/* ---- attribution -------------------------------------------------------- */

/* Google's terms require the logo and the attribution bar; neither is styled
   here beyond letting the site's own type through, which the rule at the top of
   this file already does. */

/* ---- dark scheme -------------------------------------------------------- */

/* The basemap swaps to the dark style array in projects-map.js; these are the
   bits of Google chrome that would otherwise stay light on top of it. The map
   type, fullscreen, pegman and scale controls are Google's own and keep their
   own light chrome deliberately — they are legible over both style arrays and
   over satellite imagery, which a darkened version would not be. design.css
   already darkens `.map-popup`, `.map-ctl` and `.service-map` itself. */
/* Unconditional since the dark theme became the default: theme-dark.css
   restates design.css's dark block for every visitor, so gating this on
   prefers-color-scheme would leave a white plate behind the popup on any
   machine set to light. */
.service-map .gm-style-iw-c{background:none}