/**
 * [yss_alumni_directory_map] — a single card containing a map (left) and a
 * live alumni list (right), separate from .yss-alumni-map (the country-flow
 * map in alumni-map.css). Sits at the page's normal contained width (not
 * full-bleed), per the supplied reference design.
 */
.yss-alumni-directory-map {
	position: relative;
}

.yss-alumni-directory-map *,
.yss-alumni-directory-map *::before,
.yss-alumni-directory-map *::after {
	box-sizing: border-box;
}

.yss-alumni-directory-map__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 16px;
}

.yss-adm-stat {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	padding: 10px 18px;
	border-radius: var(--yss-radius-md, 12px);
	background: var(--yss-white, #fff);
	border: 1px solid var(--yss-border, #ECE0DF);
	font-size: 13px;
	color: var(--yss-gray, #6B7280);
}

.yss-adm-stat strong {
	font-size: 18px;
	font-weight: 800;
	color: var(--yss-ink, #101010);
}

.yss-alumni-directory-map__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
}

/* Shared "field" look for the search box, country select, and view-toggle
   pill — same height/radius/shadow/transition so the row reads as one
   consistent control group instead of three differently-styled widgets. */
.yss-alumni-directory-map__search,
.yss-alumni-directory-map__select,
.yss-alumni-directory-map__viewtoggle {
	height: 48px;
	border-radius: var(--yss-radius-pill, 999px);
	border: 1px solid var(--yss-border, #ECE0DF);
	background: var(--yss-white, #fff);
	box-shadow: 0 1px 2px rgba(16, 16, 16, 0.04);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Per the supplied reference: a small "recent search" clock glyph on the
   left, the actual search (magnifying-glass) glyph on the right — both
   decorative (filtering already happens live as you type; neither icon
   needs a click handler). */
.yss-alumni-directory-map__search {
	flex: 1 1 260px;
	font-size: 14px;
	color: var(--yss-ink, #101010);
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'%3E%3C/circle%3E%3Cpolyline points='12 7 12 12 15.5 14'%3E%3C/polyline%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
	background-repeat: no-repeat, no-repeat;
	background-position: 18px center, calc(100% - 18px) center;
}

/* input[type="search"] on the selector, not just the class: a global base
   style (input[type="date"], ...[type="search"], ...) sets padding:0.5rem
   1rem and border-radius:3px on this exact input type — an attribute
   selector has higher specificity than a plain class, so it was winning
   over both the shared pill-radius rule above and a plain-class padding
   override, leaving the search box's corners square while the select next
   to it correctly stayed pill-shaped (that global rule's `select` branch
   has no attribute, so it never out-specifies .yss-alumni-directory-map__select).
   Scoped to just padding/border-radius (not `flex`) so the mobile media
   query's plain-class `flex` override below still wins there. */
input[type="search"].yss-alumni-directory-map__search {
	padding: 0 44px;
	border-radius: var(--yss-radius-pill, 999px);
}

.yss-alumni-directory-map__search::placeholder {
	color: var(--yss-gray, #6B7280);
}

.yss-alumni-directory-map__search:hover,
.yss-alumni-directory-map__select:hover {
	border-color: var(--yss-red, #CE2027);
}

.yss-alumni-directory-map__search:focus,
.yss-alumni-directory-map__select:focus {
	outline: none;
	border-color: var(--yss-red, #CE2027);
	box-shadow: 0 0 0 3px rgba(206, 32, 39, 0.12);
}

.yss-alumni-directory-map__select {
	flex: 0 1 220px;
	padding: 0 20px;
	font-size: 14px;
	color: var(--yss-ink, #101010);
	cursor: pointer;
}

.yss-alumni-directory-map__viewtoggle {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	gap: 4px;
	padding: 4px;
	background: #F3F4F6;
	margin-left: auto;
}

.yss-alumni-directory-map__viewtoggle button {
	height: 100%;
	padding: 0 18px;
	border-radius: var(--yss-radius-pill, 999px);
	border: none;
	background: transparent;
	color: var(--yss-gray, #6B7280);
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.yss-alumni-directory-map__viewtoggle button:hover:not(.is-active) {
	color: var(--yss-ink, #101010);
}

.yss-alumni-directory-map__viewtoggle button.is-active {
	background: var(--yss-red, #CE2027);
	color: var(--yss-white, #fff);
	box-shadow: 0 2px 6px rgba(206, 32, 39, 0.35);
}

/* ---------------------------------------------------------------------
 * The map + list panel — one shared card, map on the left and a live
 * alumni list on the right, per the supplied reference design.
 * ------------------------------------------------------------------ */
.yss-alumni-directory-map__panel {
	display: flex;
	align-items: stretch;
	background: var(--yss-white, #fff);
	border: 1px solid var(--yss-border, #ECE0DF);
	border-radius: var(--yss-radius-lg, 20px);
	box-shadow: 0 4px 20px rgba(16, 16, 16, 0.06);
	overflow: hidden;
}

.yss-alumni-directory-map__panel-map {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}

.yss-alumni-directory-map__panel-list {
	flex: 0 0 320px;
	width: 320px;
	border-left: 1px solid var(--yss-border, #ECE0DF);
	padding: 20px;
	display: flex;
	flex-direction: column;
}

.yss-alumni-directory-map__chart {
	width: 100%;
	min-height: 520px;
	background: #F3F4F6;
}

.yss-alumni-directory-map__chart[data-state="loading"]::before,
.yss-alumni-directory-map__chart[data-state="error"]::before,
.yss-alumni-directory-map__chart[data-state="empty"]::before {
	content: attr(data-message);
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	min-height: 520px;
	padding: 24px;
	text-align: center;
	color: var(--yss-gray, #6B7280);
	font-size: 14px;
}

.yss-alumni-directory-map__empty {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(243, 244, 246, 0.92);
	color: var(--yss-gray, #6B7280);
	font-size: 14px;
	text-align: center;
	padding: 24px;
	pointer-events: none;
}

.yss-alumni-directory-map__empty[hidden] {
	display: none;
}

/* Floating "home base" badge over the map — a static overlay (not an
   amCharts bullet), roughly positioned over where the home country sits
   at the chart's default (HOME_ZOOM) view. It intentionally does not
   track panning/zooming — see its render function's comment in
   alumni-directory-map.js for why. */
.yss-alumni-directory-map__home-callout {
	position: absolute;
	top: 34%;
	left: 54%;
	transform: translate(-50%, -100%);
	z-index: 4;
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--yss-white, #fff);
	border-radius: var(--yss-radius-md, 12px);
	padding: 10px 14px;
	box-shadow: 0 6px 16px rgba(16, 16, 16, 0.18);
	pointer-events: none;
	white-space: nowrap;
}

.yss-alumni-directory-map__home-callout[hidden] {
	display: none;
}

.yss-alumni-directory-map__home-callout-icon {
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--yss-red, #CE2027);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--yss-white, #fff);
}

.yss-alumni-directory-map__home-callout-icon svg {
	width: 16px;
	height: 16px;
}

.yss-alumni-directory-map__home-callout-name {
	font-weight: 800;
	font-size: 13px;
	color: var(--yss-ink, #101010);
}

.yss-alumni-directory-map__home-callout-count {
	font-size: 12px;
	color: var(--yss-gray, #6B7280);
}

/* ---------------------------------------------------------------------
 * Per-alumnus map pin — an amCharts5 HTML bullet (see pinHTML() in
 * alumni-directory-map.js), not an SVG/canvas shape, so plain CSS applies
 * to it directly. Hover reveals the tooltip via CSS alone; click is
 * handled by a delegated listener on the chart element in the JS.
 * ------------------------------------------------------------------ */

/* amCharts5 wraps every HTML bullet in its own unstyled div (a direct
   child of its root's .am5-html-container) with an inline `overflow:auto`
   — harmless for a bullet that's just an image, but it silently clips our
   tooltip, which is deliberately positioned *outside* that div's own
   34x34 box (bottom: calc(100% + 8px)). Only `!important` beats an inline
   style from an external stylesheet, and this is the narrowest selector
   that reaches those wrapper divs without touching anything else on the
   page (they carry no class of their own to target directly). */
.am5-html-container > div {
	overflow: visible !important;
}
/* amCharts5's own HTML-bullet wrapper div only sets min-width/min-height
   (see pinHTML()'s comment in alumni-directory-map.js) — it does NOT
   constrain actual size, so this can't be width/height:100% or it
   inflates to the <img>'s natural size instead of a small circle. 34px
   here must stay equal to (PIN_RADIUS * 2) in the JS file. */
.yss-adm-pin {
	position: relative;
	width: 34px;
	height: 34px;
	cursor: pointer;
}

.yss-adm-pin__avatar {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	overflow: hidden;
	border: 2.5px solid var(--yss-white, #fff);
	box-shadow: 0 1px 4px rgba(16, 16, 16, 0.35);
	background: var(--yss-red, #CE2027);
	display: flex;
	align-items: center;
	justify-content: center;
}

.yss-adm-pin__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.yss-adm-pin__initials {
	color: var(--yss-white, #fff);
	font-size: 11px;
	font-weight: 800;
	font-family: inherit;
}

.yss-adm-pin__tooltip {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	min-width: 150px;
	max-width: 220px;
	background: var(--yss-red, #CE2027);
	border: 1px solid var(--yss-red-dark, #A11920);
	border-radius: var(--yss-radius-sm, 8px);
	padding: 8px 12px;
	opacity: 0;
	visibility: hidden;
	/* NOT pointer-events:none — the tooltip renders *outside* the 34x34
	   pin box (it sits above it), so a mouse moving from the pin toward
	   the tooltip to read it or click "Learn More" leaves the pin's own
	   hit box immediately. With pointer-events:none the browser hit-tests
	   straight through the tooltip to whatever's behind it (nothing),
	   :hover on .yss-adm-pin is lost, and the tooltip vanishes the instant
	   a viewer tries to interact with it. `visibility:hidden` already
	   makes the tooltip non-interactive while it's closed regardless of
	   this value, so there's no downside to leaving it interactive here. */
	pointer-events: auto;
	transition: opacity 0.15s ease;
	z-index: 5;
}

.yss-adm-pin:hover .yss-adm-pin__tooltip,
.yss-adm-pin:focus-within .yss-adm-pin__tooltip {
	opacity: 1;
	visibility: visible;
}

.yss-adm-pin__tooltip-name {
	font-weight: 800;
	font-size: 12px;
	color: var(--yss-white, #fff);
	margin-bottom: 2px;
}

.yss-adm-pin__tooltip-id,
.yss-adm-pin__tooltip-country {
	font-size: 11px;
	color: var(--yss-white, #fff);
	opacity: 0.85;
}

.yss-adm-pin__tooltip-id {
	margin-bottom: 2px;
}

.yss-adm-pin__tooltip-cta {
	display: inline-block;
	margin-top: 8px;
	padding: 4px 10px;
	border-radius: var(--yss-radius-pill, 999px);
	background: var(--yss-white, #fff);
	color: var(--yss-red, #CE2027);
	font-size: 10px;
	font-weight: 800;
}

/* ---------------------------------------------------------------------
 * By Country view — a classic teardrop map-pin marker with a bold count
 * in its circular head (see countryPinHTML() in alumni-directory-map.js),
 * per the follow-up ask for an actual pin/location icon rather than a
 * plain circle. Same HTML-bullet + CSS-hover-tooltip pattern as
 * .yss-adm-pin above; sizes are set inline per-pin by the JS
 * (bubbleRadius()), since they vary by that country's alumni count.
 *
 * The teardrop itself is the standard CSS trick: a square with three
 * rounded corners (border-radius: 50% 50% 50% 0) rotated -45deg, which
 * turns the one square corner into the pin's downward-pointing tip. The
 * count label is rotated back +45deg so it reads upright.
 * ------------------------------------------------------------------ */
.yss-adm-country-pin {
	position: relative;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

.yss-adm-country-pin__body {
	position: absolute;
	top: 45%;
	left: 50%;
	background: var(--yss-red, #CE2027);
	border: 2px solid var(--yss-white, #fff);
	border-radius: 50% 50% 50% 0;
	box-shadow: 0 2px 6px rgba(16, 16, 16, 0.35);
	transform: translate(-50%, -50%) rotate(-45deg);
}

.yss-adm-country-pin__count {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(45deg);
	color: var(--yss-white, #fff);
	font-weight: 800;
	font-size: 12px;
	font-family: inherit;
	white-space: nowrap;
}

.yss-adm-country-pin__tooltip {
	position: absolute;
	bottom: calc(100% + 4px);
	left: 50%;
	transform: translateX(-50%);
	min-width: 140px;
	background: var(--yss-ink, #101010);
	border-radius: var(--yss-radius-sm, 8px);
	padding: 8px 12px;
	opacity: 0;
	visibility: hidden;
	/* See the long comment on .yss-adm-pin__tooltip above — same reasoning:
	   this tooltip sits outside the pin's own box, so it must stay
	   interactive or hovering into it drops :hover on the pin and the
	   tooltip disappears before it can be read. */
	pointer-events: auto;
	transition: opacity 0.15s ease;
	z-index: 5;
	white-space: nowrap;
}

.yss-adm-country-pin:hover .yss-adm-country-pin__tooltip,
.yss-adm-country-pin:focus-within .yss-adm-country-pin__tooltip {
	opacity: 1;
	visibility: visible;
}

.yss-adm-country-pin__tooltip-name {
	font-weight: 800;
	font-size: 12px;
	color: var(--yss-white, #fff);
	margin-bottom: 2px;
}

.yss-adm-country-pin__tooltip-count {
	font-size: 11px;
	color: var(--yss-white, #fff);
	opacity: 0.85;
}

/* ---------------------------------------------------------------------
 * Alumni list below the map — plain rows, 10 per page (LIST_PER_PAGE in
 * the JS), filtered by the same search/country controls as the map.
 * ------------------------------------------------------------------ */
.yss-alumni-directory-map__list {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.yss-adm-list__row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--yss-border, #ECE0DF);
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}

.yss-adm-list__row:last-child {
	border-bottom: none;
}

.yss-adm-list__avatar {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--yss-red, #CE2027);
	display: flex;
	align-items: center;
	justify-content: center;
}

.yss-adm-list__avatar-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.yss-adm-list__avatar-initials {
	color: var(--yss-white, #fff);
	font-size: 13px;
	font-weight: 800;
}

.yss-adm-list__info {
	flex: 1 1 auto;
	min-width: 0;
}

.yss-adm-list__name {
	font-weight: 800;
	font-size: 13px;
	color: var(--yss-ink, #101010);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.yss-adm-list__meta {
	font-size: 11px;
	color: var(--yss-gray, #6B7280);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.yss-adm-list__chevron {
	flex: none;
	color: var(--yss-red, #CE2027);
	font-size: 16px;
	line-height: 1;
}

.yss-alumni-directory-map__viewall {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 16px;
	font-size: 13px;
	font-weight: 700;
	color: var(--yss-red, #CE2027);
	text-decoration: none;
}

.yss-alumni-directory-map__viewall:hover {
	text-decoration: underline;
}

.yss-alumni-directory-map__viewall[hidden] {
	display: none;
}

.yss-alumni-directory-map__pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin-top: 16px;
}

.yss-adm-pagination__page,
.yss-adm-pagination__nav {
	min-width: 36px;
	height: 36px;
	padding: 0 8px;
	border-radius: var(--yss-radius-pill, 999px);
	border: 1px solid var(--yss-border, #ECE0DF);
	background: var(--yss-white, #fff);
	color: var(--yss-ink, #101010);
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}

.yss-adm-pagination__page.is-active {
	background: var(--yss-red, #CE2027);
	border-color: var(--yss-red, #CE2027);
	color: var(--yss-white, #fff);
}

.yss-adm-pagination__nav:disabled {
	opacity: 0.4;
	cursor: default;
}

.yss-alumni-directory-map__pagination[hidden] {
	display: none;
}

@media (max-width: 900px) {
	.yss-alumni-directory-map__panel {
		flex-direction: column;
	}
	.yss-alumni-directory-map__panel-list {
		flex: 1 1 auto;
		width: 100%;
		border-left: none;
		border-top: 1px solid var(--yss-border, #ECE0DF);
	}
	.yss-alumni-directory-map__home-callout {
		left: 50%;
	}
}

@media (max-width: 767px) {
	.yss-alumni-directory-map__chart {
		min-height: 420px;
	}
	.yss-alumni-directory-map__chart[data-state="loading"]::before,
	.yss-alumni-directory-map__chart[data-state="error"]::before,
	.yss-alumni-directory-map__chart[data-state="empty"]::before {
		min-height: 420px;
	}
	.yss-alumni-directory-map__search,
	.yss-alumni-directory-map__select,
	.yss-alumni-directory-map__viewtoggle {
		flex: 1 1 100%;
		margin-left: 0;
	}
	.yss-alumni-directory-map__viewtoggle {
		justify-content: center;
	}
}