/**
 * Network Map Module
 *
 * Map placed above the Network listing. Circle markers (no pulse); the popup
 * label scrolls to the matching card. Cards outside the viewport are hidden;
 * markers filtered out by the list filters are shown translucent and inert.
 *
 * Loaded only when the page's map toggle is on. Uses the theme tokens
 * (--K00/--K01/--KY00, --S*, --A*).
 */


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

/* Spacing between map, toolbar, count and list comes from the flex `gap` on
   .block-network, so no margin here. */
.network-map-block									{ width: 100%; margin: 0; padding: 0; position: relative; }

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


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

.network-map .mapboxgl-ctrl-bottom-right			{ bottom: 0 !important; right: 0 !important; }
.network-map .mapboxgl-ctrl							{ margin: 0 !important; }
.network-map .mapboxgl-ctrl-group					{ border-radius: 0 !important; box-shadow: none !important; background: var(--K00) !important; }
.network-map .mapboxgl-ctrl-group button			{ width: var(--S04) !important; height: var(--S04) !important; background-color: var(--K00) !important; border-radius: 0; border:  none !important;  cursor: pointer; transition: background-color var(--A01); }
.network-map .mapboxgl-ctrl-group button:hover		{ background-color: var(--KY00) !important; }

/* Replace Mapbox's default +/- icons */
.network-map .mapboxgl-ctrl-group .mapboxgl-ctrl-icon			{ background: none !important; position: relative; }

.network-map .mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon::before,
.network-map .mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon::after,
.network-map .mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon::before	{ content: ''; position: absolute; top: 50%; left: 50%; width: 60%; height: 1px; background-color: var(--K01); transform: translate(-50%, -50%); }

/* Zoom-in adds the vertical bar → plus. */
.network-map .mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon::after	{ transform: translate(-50%, -50%) rotate(90deg); }

.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(--KY00); border: none; border-radius: 50%; transition: transform var(--A01), opacity var(--A01); }
.network-marker:hover .network-marker__circle		{ transform: scale(1.25); }

/* Filtered out by the list filters: kept for geographic context, but muted and
   non-interactive (bounds tests and the count ignore these). */
.network-marker.is-inert							{ cursor: default; pointer-events: none; }
.network-marker.is-inert .network-marker__circle	{ opacity: 0.50; transform: none; }


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

.network-popup-container .mapboxgl-popup-content		{ min-width: max-content; margin: 0; padding: 0 !important; background: var(--K00) !important; border: solid 1px var(--K01); 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(--SXS) var(--S00); border: 0; background: transparent; color: var(--K01); font: inherit; text-align: left; white-space: nowrap; cursor: pointer; transition: background-color var(--A01), color var(--A01); }
.network-popup__link:hover							{ background: var(--KY00); color: var(--K01); }

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


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

/* Card whose marker is outside the current map viewport. Composes with the
   native [hidden] used by the list filters: a card shows only when neither is set. */
.block-network__item.is-out-of-bounds				{ display: none; }

/* Card scrolled to from a marker popup. */
.block-network__item.is-targeted					{ animation: ds-network-target 5s ease; } /* matches the JS timeout in network-map.js */
@keyframes ds-network-target						{ 0%, 40% { background-color: var(--KY00); } 100% { background-color: transparent; } }

@media (prefers-reduced-motion: reduce) {
	.block-network__item.is-targeted				{ animation: none; }
}