/**
 * Network Map Module
 *
 * Map block placed above the (sticky) filter bar on the Network archive.
 * Circle markers, no pulse. Popup label scrolls to the matching list card.
 * Cards outside the viewport are hidden; the scrolled-to card is highlighted.
 *
 * Uses the theme token system (--K-*, --S*, --A*, --TopBar).
 */


/*
——————————————————————————————————————————
MAP BLOCK
——————————————————————————————————————————
*/

.network-map-block                          { width: 100%; margin: 0; padding: 0; position: relative; }
.home .network-map-block                       { border-top: solid 1px var(--K-base-ink); }

.network-map                                { width: 100%; height: 60dvh; margin: 0; padding: 0; overflow: hidden; position: relative; touch-action: pan-y pinch-zoom; background-color: var(--K-muted); }
.network-map.is-error                       { display: flex; align-items: center; justify-content: center; height: 30dvh; padding: var(--S04); text-align: center; color: var(--K-base-ink); }

.network-map__count                         { margin: 0; padding: var(--S00) var(--S00); background-color: var(--K-base); color: var(--K-base-ink); position: absolute; left: 0; bottom: 0; z-index: 2; pointer-events: none; }


/*
——————————————————————————————————————————
MAP CONTROLS (zoom +/-)
——————————————————————————————————————————
*/

.network-map .mapboxgl-ctrl-bottom-right    { bottom: var(--S03) !important; right: var(--S03) !important; }
.network-map .mapboxgl-ctrl                 { margin: 0 !important; }
.network-map .mapboxgl-ctrl-group           { border-radius: 0 !important; box-shadow: none !important; background: var(--K-base) !important; border: solid 1px var(--K-base-ink); }
.network-map .mapboxgl-ctrl-group button    { width: 40px !important; height: 40px !important; background-color: var(--K-base) !important; cursor: pointer; transition: background-color var(--A01); }
.network-map .mapboxgl-ctrl-group button:hover { background-color: var(--K-accent) !important; }
.network-map .mapboxgl-ctrl-group button + button { border-top: solid 1px var(--K-base-ink) !important; }

.network-map .mapboxgl-ctrl-logo            { display: none !important; }
.network-map .mapboxgl-ctrl-attrib          { display: none !important; }


/*
——————————————————————————————————————————
MARKERS (circles, no pulse)
——————————————————————————————————————————
*/

.network-marker                             	{ cursor: pointer; line-height: 0; }

.network-marker__circle                     	{ display: block; width: 32px; height: 32px; margin: 0; padding: 0; background: var(--K-accent); border: 1px solid var(--K-base); border-radius: 50%; transition: transform var(--A01); }
.network-marker:hover .network-marker__circle 	{ transform: scale(1.25); }


/*
——————————————————————————————————————————
POPUP LABEL
——————————————————————————————————————————
*/

.network-popup-container .mapboxgl-popup-content { min-width: max-content; margin: 0; padding: 0 !important; background: var(--K-base) !important; border: solid 1px var(--K-base-ink); border-radius: 0 !important; box-shadow: none !important; display: flex; flex-direction: row; align-items: stretch; overflow: hidden; }
.network-popup-container .mapboxgl-popup-tip { display: none !important; }

.network-popup                              { display: flex; }
.network-popup__link                        { margin: 0; padding: var(--S00) var(--S02); border: 0; background: transparent; color: var(--K-base-ink); font: inherit; text-align: left; white-space: nowrap; cursor: pointer; transition: background-color var(--A01), color var(--A01); }
.network-popup__link:hover                  { background: var(--K-accent); color: var(--K-accent-ink); }

.network-popup-container .mapboxgl-popup-close-button { width: 32px; height: auto; margin: 0; padding: 0 !important; border: 0; border-left: solid 1px var(--K-base-ink); border-radius: 0 !important; color: var(--K-base-ink); cursor: pointer; transition: background-color var(--A01), color var(--A01); position: relative !important; }
.network-popup-container .mapboxgl-popup-close-button:hover { background: var(--K-accent); color: var(--K-accent-ink); }


/*
——————————————————————————————————————————
LIST ↔ MAP STATE
——————————————————————————————————————————
*/

/* Cards outside the current map viewport */
.list-row.is-out-of-bounds                  { display: none; }

/* Card scrolled to from a marker popup */
.list-row.is-targeted                       { animation: ds-network-target 4s ease; } /* 4s matches the JS timeout in network-map.js */
@keyframes ds-network-target                { 0%, 40% { background-color: var(--K-accent); color: var(--K-accent-ink); } 100% { background-color: var(--K-base); color: var(--K-base-ink); } }


/*
——————————————————————————————————————————
DATA MODE EXTRAS (homepage)
——————————————————————————————————————————
*/

/* Non-interactive popup label (no scroll target on the homepage) */
.network-popup__label                       { display: block; margin: 0; padding: var(--S00) var(--S02); white-space: nowrap; color: var(--K-base-ink); }

/* Button overlaid on the map → Network archive (inherits .bt-regular) */
.network-map__actions                       { position: absolute; left: var(--gap); bottom: var(--gap); z-index: 2; }