:root {
	--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-heading: "Segoe UI", system-ui, -apple-system, sans-serif;
	/* YPNE brand colors */
	--ypne-accent: #3a4c96;   /* primary accent (was #022746) */
	--ypne-accent-hover: #4d5fae;
	--ypne-yellow: #ffde59;   /* Summit 2026 / highlight color */
	--ypne-bg-tint: #cdd6ff;  /* site background tint, used for hover/active states */

	/* Placeholder-avatar palette for logoless members.
	   Kept away from the three "reserved" brand colors (dark blue accent,
	   yellow highlight, light-blue site-bg tint) — these are soft pastels
	   in the same family/mood as the brand but visually distinct from them,
	   so avatars never get mistaken for the accent, the Summit-2026 badge,
	   or the page background. Text colors are darker shades of the same
	   hue for contrast on the pastel background. */
	--ypne-avatar-1-bg: #f4d9e4; --ypne-avatar-1-fg: #9c4f6d; /* rose */
	--ypne-avatar-2-bg: #d8ece1; --ypne-avatar-2-fg: #3f7d63; /* sage green */
	--ypne-avatar-3-bg: #f6e3c9; --ypne-avatar-3-fg: #a8702e; /* apricot */
	--ypne-avatar-4-bg: #e3ddf2; --ypne-avatar-4-fg: #6d5aa6; /* lavender */
	--ypne-avatar-5-bg: #d9ecec; --ypne-avatar-5-fg: #3c7f7f; /* teal */
	--ypne-avatar-6-bg: #f2e0e9; --ypne-avatar-6-fg: #9c5687; /* orchid */
	--ypne-avatar-7-bg: #eaeccb; --ypne-avatar-7-fg: #7c8438; /* olive */
	--ypne-avatar-8-bg: #ddeaf6; --ypne-avatar-8-fg: #4472a1; /* sky (kept distinct from the site-bg tint) */
}
#ypne-wrap {
	position: relative; display: flex; height: 580px;
	border-radius: 30px 30px 30px 6px; overflow: hidden;
	border: 1px solid #e2e8f0; box-shadow: 0 4px 24px rgba(0,0,0,0.08);
	font-family: var(--font-sans);
}
#ypne-map {
	flex: 1; min-width: 0; height: 100%;
}
 
/* ── Sidebar ── */
#ypne-sidebar {
	width: 280px; flex-shrink: 0;
	display: flex;
	flex-direction: column;
    overflow: hidden;
	border-left: 1px solid #e2e8f0;
	background: #fff;
	transition: width 0.28s ease, opacity 0.28s ease;
}
#ypne-sidebar.collapsed {
	width: 0;
	opacity: 0;
	pointer-events: none;
	border-left: none;
}
#ypne-sidebar-header {
	background: var(--ypne-accent); padding: 14px 16px;
	flex-shrink: 0;
}
#ypne-sidebar-header h3 {
    font-family: var(--font-heading);
	font-size: 14px;
	font-weight: 700;
    color: #fff;
	margin: 0 0 2px;
	white-space: nowrap;
}
#ypne-count {
	font-size: 11px;
	color: rgba(255,255,255,0.75);
}
#ypne-search-wrap {
	padding: 10px 12px;
	border-bottom: 1px solid #e2e8f0;
	flex-shrink: 0;
}
#ypne-search {
    width: 100%;
	box-sizing: border-box;
	padding: 7px 10px;
    border: 1px solid #CBD5E0;
	border-radius: 8px;
	font-size: 13px;
    font-family: var(--font-sans);
	background: #F7FAFC;
	color: #2D3748;
	outline: none;
}
#ypne-search:focus {
	border-color: var(--ypne-accent);
	background: #fff; 
}
#ypne-list {
	flex: 1;
	overflow-y: auto;
}
 
.ypne-generation-header {
    padding: 5px 12px 4px;
	font-size: 10px;
	font-weight: 700;
    letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ypne-accent);
	flex-shrink: 0;
}
.ypne-item {
    padding: 8px 12px;
	border-bottom: 1px solid #F0F4FA;
    cursor: pointer;
	display: flex;
	align-items: center;
	gap: 9px;
	transition: background 0.12s;
}
.ypne-item:hover {
	background: var(--ypne-bg-tint);
}
.ypne-item.active {
	background: var(--ypne-bg-tint);
	border-left: 3px solid var(--ypne-accent);
	padding-left: 9px; 
}
.ypne-item-logo {
    width: 32px;
	height: 32px;
	flex-shrink: 0;
	border-radius: 5px;
    object-fit: contain;
	background: #f7f8fa;
	border: 1px solid #edf0f5;
	display: block;
}
.ypne-item-avatar {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	border-radius: 5px;
    display: flex;
	align-items: center;
	justify-content: center;
    font-size: 11px;
	font-weight: 700;
	font-family: inherit;
	letter-spacing: 0.02em;
}
.ypne-info {
	flex: 1; min-width: 0;
}
.ypne-name {
	font-size: 12px;
	font-weight: 500;
	color: #2D3748;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ypne-country {
	font-size: 11px;
	color: #718096;
	margin-top: 1px;
}
.ypne-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
}
 
/* ── Legend & Filter ── */
.legend {
	padding: 8px 10px;
	background: #fff;
	border-top: 1px solid #e2e8f0;
    display: flex;
	gap: 8px;
	flex-wrap: wrap;
	font-size: 11px;
	color: #4A5568;
    align-items: center;
	flex-shrink: 0;
}
.legend-item {
	display: flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
}
.legend-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	flex-shrink: 0;
}
.ypne-filter-bar {
	padding: 6px 10px;
	background: #F7FAFC;
	border-top: 1px solid #e2e8f0;
    display: flex;
	gap: 6px;
	flex-wrap: wrap;
	flex-shrink: 0;
}
.ypne-filter-btn {
    font-size: 11px;
	font-family: var(--font-sans);
	padding: 3px 10px;
    border-radius: 100px;
	border: 1.5px solid #CBD5E0;
	background: #fff;
    color: #718096;
	cursor: pointer;
	font-weight: 500;
	white-space: nowrap;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    -webkit-appearance: none;
	outline: none;
}
.ypne-filter-btn.active {
	background: var(--ypne-accent);
	border-color: var(--ypne-accent);
	color: #fff;
}
.ypne-filter-btn:hover:not(.active) {
	border-color: var(--ypne-accent);
	background: var(--ypne-accent);
	color: #fff;
}
 
/* ── Toggle Button ── */
#ypne-toggle-btn {
	position: absolute;
	top: 12px;
	right: 292px;
	z-index: 10;
    width: 34px;
	height: 34px;
	border-radius: 8px;
    background: var(--ypne-accent);
	border: none;
	cursor: pointer;
    display: flex;
	align-items: center;
	justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18); transition: right 0.28s ease;
}
#ypne-toggle-btn:hover {
	background: var(--ypne-accent-hover);
}
#ypne-toggle-btn span {
    position: absolute;
	left: 50%;
	height: 2px;
	background: #fff;
    border-radius: 2px;
	transition: all 0.28s ease;
}
/* Sidebar closed → 3 bars */
#ypne-toggle-btn span:nth-child(1) {
	width: 14px;
	top: 11px;
	transform: translateX(-50%);
}
#ypne-toggle-btn span:nth-child(2) { 
	width: 14px; 
	top: 17px; 
	transform: translateX(-50%); 
}
#ypne-toggle-btn span:nth-child(3) { 
	width: 14px; 
	top: 23px; 
	transform: translateX(-50%);
}
/* Sidebar open → arrow pointing right > */
#ypne-toggle-btn.open span:nth-child(1) { 
	width: 10px; 
	top: 17px; 
	transform: translateX(-3px) rotate(45deg);  
	transform-origin: right center; 
}
#ypne-toggle-btn.open span:nth-child(2) { 
	width: 16px; 
	top: 17px; 
	transform: translateX(-50%); 
	opacity: 1; 
}
#ypne-toggle-btn.open span:nth-child(3) { 
	width: 10px; 
	top: 17px; 
	transform: translateX(-3px) rotate(-45deg); 
	transform-origin: right center; 
}
 
/* ── Zoom (native NavigationControl) ── */
.maplibregl-ctrl-group {
    margin-top: 30px !important; 
	margin-left: 30px !important;
    border-radius: 6px !important; 
	overflow: hidden !important;
    border: 1px solid #CBD5E0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10) !important;
    background: #fff !important;
  }
.maplibregl-ctrl-group button {
    width: 32px !important;
	height: 32px !important;
    background: #fff !important; 
	border: none !important;
    border-radius: 0 !important; 
	cursor: pointer !important;
    display: flex !important; 
	align-items: center !important; 
	justify-content: center !important;
}
.maplibregl-ctrl-group button + button { 
	border-top: 1px solid #CBD5E0 !important; 
}
.maplibregl-ctrl-group button:hover { 
	background: #cdd6ff !important;
}
 
/* ── Attribution ── */
.maplibregl-ctrl-attrib {
    font-size: 10px !important; 
	background: rgba(255,255,255,0.85) !important;
    padding: 2px 6px !important; 
	border-radius: 4px 0 0 0 !important;
  }
.maplibregl-ctrl-attrib a { 
	  color: var(--ypne-accent) !important; 
}
 
  /* ── Marker ── */
.ypne-marker {
	width: 30px; 
	height: 30px;
	/* No `position` here — ever. MapLibre positions this exact element
	   itself via an inline `transform: translate(...)`, and giving it its
	   own `position` (even `relative`) creates a new containing block
	   that throws off MapLibre v5's marker layout math under the globe
	   projection: every marker after the first drifted by a constant
	   +30px (one marker-height) in Y per index — verified by removing
	   this one declaration and nothing else. */
    display: flex; 
	align-items: center; 
	justify-content: center;
    cursor: pointer !important;
  }
.ypne-pin-backing {
	/* White plate behind the star for contrast: without it, brand-colored
	   stars (especially the yellow Summit-2026 tag) nearly disappear
	   against the light basemap. This is a real sibling element, not a
	   ::before on .ypne-pin — pairing `position: relative` + `mask-image`
	   + `::before` on the same element triggers a Chromium rendering bug
	   that paints the whole thing solid white instead of star-color +
	   backing (confirmed in isolation, with no MapLibre involved at all:
	   removing just the `position: relative` from the masked element, or
	   moving the backing to its own sibling div like this, both fix it).
	   Sits absolutely inside the marker box (no position:relative needed
	   on .ypne-marker itself, see above) alongside .ypne-pin as its own
	   plain, unmasked layer. */
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 1px 4px rgba(0,0,0,0.28), 0 0 0 1px rgba(0,0,0,0.08);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ypne-pin {
	position: absolute;
	inset: 5px;
	/* Single big star, isolated from big-star.svg, used as a mask so
	   `background` (set per-marker via inline style, see
	   members-map.js) paints the star in the marker's tag color.
	   Deliberately has no `position: relative` of its own and no
	   pseudo-element attached to it — see .ypne-pin-backing above for
	   why. */
	-webkit-mask-image: var(--ypne-star-url);
	mask-image: var(--ypne-star-url);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
    transition: transform 0.15s ease;
    pointer-events: none;
}
.ypne-marker:hover .ypne-pin-backing { 
	transform: scale(1.25); 
	box-shadow: 0 2px 6px rgba(0,0,0,0.32), 0 0 0 1px rgba(0,0,0,0.1);
}
.ypne-marker.active .ypne-pin-backing { 
	transform: scale(1.45); 
	box-shadow: 0 3px 8px rgba(0,0,0,0.36), 0 0 0 1px rgba(0,0,0,0.12);
}
.ypne-marker:hover .ypne-pin { 
	transform: scale(1.25); 
}
.ypne-marker.active .ypne-pin { 
	transform: scale(1.45); 
}
 
/* ── Popups ── */
.maplibregl-popup {
	z-index: 200 !important;
}
.maplibregl-popup-content {
    padding: 0 !important; 
	border-radius: 12px !important; 
	overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.14) !important;
    width: 210px !important; 
	font-family: var(--font-sans);
  }
.maplibregl-popup-tip { 
	border-top-color: #fff !important; 
}
.maplibregl-popup-close-button { 
	color: var(--ypne-bg-tint) !important; 
	font-size: 18px; 
	padding: 4px 8px; 
	line-height: 1; 
	z-index: 201 !important; 
}
.maplibregl-popup-close-button:hover { 
	color: var(--ypne-yellow) !important; 
	background: transparent; 
}
.ypne-popup-header { 
	background: var(--ypne-accent); 
	padding: 10px 13px 8px; 
}
.ypne-popup-header h4 { 
	font-family: var(--font-heading);
	font-size: 13px;
	font-weight: 700; 
	color: #fff;
	margin: 0 0 2px;
}
.ypne-popup-header p { 
	font-size: 11px; 
	color: rgba(255,255,255,0.75); 
	margin: 0; 
}
.ypne-popup-body {
	padding: 9px 13px 11px;
	background: #fff;
}
.ypne-popup-logo {
	width: 100%;
	max-height: 60px;
	object-fit: contain;
	border-radius: 6px;
	margin-bottom: 7px;
	display: block;
}
.ypne-popup-row { 
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	margin-bottom: 4px;
	gap: 8px;
}
.ypne-popup-row span:first-child { 
	color: #718096;
	flex-shrink: 0;
}
.ypne-popup-row span:last-child {
	font-weight: 500; 
	color: #2D3748;
	text-align: right;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ypne-popup-row a {
	color: var(--ypne-accent);
	text-decoration: none;
}
.ypne-popup-row a:hover {
	text-decoration: underline;
}
.ypne-badge { 
	display: block;
	width: fit-content;
	margin: 6px auto 0;
	padding: 3px 9px;
	border-radius: 100px;
	font-size: 11px;
	font-weight: 700;
	text-align: center;
	/* Background/text color set per-tag via inline style in JS
	   (popupHTML): yellow for "Summit 2026", accent-blue for
	   "Network-Partner" — see TAG_COLOR in members-map.js.
	   Fallback below covers any tag without an explicit color. */
	background: var(--ypne-yellow);
	color: var(--ypne-accent);
}
 
@media (max-width: 600px) {
    #ypne-wrap { 
		height: 480px;
		border-radius: 16px 16px 16px 4px;
	}
    #ypne-sidebar {
		width: 240px;
	}
    #ypne-toggle-btn {
		right: 252px;
	}
}