/**
 * [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;
	/* Side-by-side layout: the map alone sets the panel's height. The list
	   gets no intrinsic height (contain: size), stretches to the map's
	   height and scrolls when longer. Before, a list taller than the 640px
	   map (wrapped mission names, or "View All" with 10 rows) grew the
	   panel and left white space under the map. */
	contain: size;
	overflow-y: auto;
	scrollbar-width: thin;
}

/* Inside that fixed-height column the list, pagination and "View All"
   must keep their natural height and scroll, not shrink to fit. */
.yss-alumni-directory-map__panel-list > * {
	flex-shrink: 0;
}

.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;
}

/* "Home base" badge (Malaysia · N Alumni): an amCharts HTML bullet at the
   home country's coordinates (homeCalloutHTML() in alumni-directory-map.js),
   so it follows pans, zooms and the Globe switch. The bullet itself is a
   1px box on the point; .yss-adm-home-pin lifts the badge above it, clear
   of the alumni photo pins, with a small pointer underneath. It used to be
   a static overlay at top:34%/left:54%, which sat over southern China /
   Vietnam and never moved. */
.yss-adm-home-pin {
	position: absolute;
	left: 0;
	bottom: 26px;
	transform: translateX(-50%);
	pointer-events: none;
}

.yss-alumni-directory-map__home-callout {
	position: relative;
	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);
	white-space: nowrap;
}

.yss-alumni-directory-map__home-callout::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -6px;
	width: 12px;
	height: 12px;
	margin-left: -6px;
	background: var(--yss-white, #fff);
	transform: rotate(45deg);
}

/* Every country with alumni gets a badge. layoutCountryBadges() (JS) flips
   one below its point (pointer on top) when the spot above collides with
   another badge, and hides it (--hidden) when both spots collide. */
.yss-adm-home-pin--hidden {
	visibility: hidden;
}

.yss-adm-home-pin--below {
	top: 26px;
	bottom: auto;
}

.yss-adm-home-pin--below .yss-alumni-directory-map__home-callout::after {
	top: -6px;
	bottom: auto;
}

/* Side placements (layoutCountryBadges() fallbacks after above/below):
   vertically centred on the point, 22px to its right or left, pointer on
   the facing edge. */
.yss-adm-home-pin--right,
.yss-adm-home-pin--left {
	top: 0;
	bottom: auto;
	transform: translateY(-50%);
}

.yss-adm-home-pin--right {
	left: 22px;
}

.yss-adm-home-pin--left {
	left: auto;
	right: 22px;
}

.yss-adm-home-pin--right .yss-alumni-directory-map__home-callout::after,
.yss-adm-home-pin--left .yss-alumni-directory-map__home-callout::after {
	top: 50%;
	bottom: auto;
	margin: -6px 0 0;
}

.yss-adm-home-pin--right .yss-alumni-directory-map__home-callout::after {
	left: -6px;
}

.yss-adm-home-pin--left .yss-alumni-directory-map__home-callout::after {
	left: auto;
	right: -6px;
}

/* Phones: the chart is ~320px wide, so countries sit close together on
   screen. A compact one-line badge ("Vietnam · 1 Alumnus", ~30px tall)
   leaves room for neighbours instead of hiding them. */
@media (max-width: 767px) {
	.yss-adm-home-pin {
		bottom: 20px;
	}

	.yss-adm-home-pin--below {
		top: 20px;
		bottom: auto;
	}

	.yss-adm-home-pin--right {
		left: 16px;
	}

	.yss-adm-home-pin--left {
		right: 16px;
	}

	.yss-alumni-directory-map__home-callout {
		gap: 6px;
		padding: 5px 10px 5px 6px;
		border-radius: 999px;
	}

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

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

	.yss-alumni-directory-map__home-callout br {
		display: none;
	}

	.yss-alumni-directory-map__home-callout-name {
		font-size: 12px;
	}

	.yss-alumni-directory-map__home-callout-count {
		font-size: 11px;
	}

	.yss-alumni-directory-map__home-callout-count::before {
		content: "· ";
	}

	.yss-alumni-directory-map__home-callout::after {
		width: 8px;
		height: 8px;
		bottom: -4px;
		margin-left: -4px;
	}

	.yss-adm-home-pin--below .yss-alumni-directory-map__home-callout::after {
		top: -4px;
	}

	.yss-adm-home-pin--right .yss-alumni-directory-map__home-callout::after,
	.yss-adm-home-pin--left .yss-alumni-directory-map__home-callout::after {
		margin: -4px 0 0;
	}

	.yss-adm-home-pin--right .yss-alumni-directory-map__home-callout::after {
		left: -4px;
	}

	.yss-adm-home-pin--left .yss-alumni-directory-map__home-callout::after {
		right: -4px;
	}
}

.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;
}

/* Plain text rows: name, Alumni No., Mission. No photo, no link (the map
   pins link to each profile). Long mission names wrap rather than being
   cut off with an ellipsis. */
.yss-adm-list__row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--yss-border, #ECE0DF);
	color: inherit;
}

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

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

.yss-adm-list__name {
	margin-bottom: 6px;
	font-weight: 800;
	font-size: 14px;
	line-height: 1.35;
	color: var(--yss-ink, #101010);
}

/* Label / value pairs: a fixed label column (small grey caps) so every
   value starts at the same x, and long mission names wrap under their own
   value, not back under the label. */
.yss-adm-list__meta {
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr);
	column-gap: 8px;
	align-items: baseline;
	font-size: 12px;
	line-height: 1.45;
}

.yss-adm-list__meta + .yss-adm-list__meta {
	margin-top: 3px;
}

.yss-adm-list__label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--yss-gray-light, #A3A3A3);
}

.yss-adm-list__value {
	color: var(--yss-gray, #4B5563);
}

.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;
}

/* Side-by-side layout: the list column scrolls inside the map's height, so
   keep "View All Alumni" pinned to the column's bottom edge where it is
   always visible (the -20px offsets the column's own 20px padding). */
@media (min-width: 901px) {
	.yss-alumni-directory-map__viewall {
		position: sticky;
		bottom: -20px;
		align-self: stretch;
		margin: 8px -20px -20px;
		padding: 14px 20px;
		border-top: 1px solid var(--yss-border, #ECE0DF);
		background: var(--yss-white, #fff);
	}
}

.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);
		/* Stacked under the map: full natural height again, no inner scroll. */
		contain: none;
		overflow-y: visible;
	}
}

@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;
	}
}