/*
 * Map annotations — the DOM half of assets/js/map-annotations.js: distance
 * badges, area names and icons. Loaded on the front end wherever a map
 * carries annotations, and in the editor so the preview matches.
 *
 * Mapbox writes its projection `transform` onto the marker element itself,
 * so anything of ours that animates or rotates lives on the inner element.
 */
.eekad-ann {
	/* Mapbox sets pointer-events inline on every marker; the reader's map is
	   never meant to be clicked through these. The editor re-enables icons. */
	pointer-events: none !important;
	direction: rtl;
	unicode-bidi: plaintext;
	--ann: #CDFE64;
	--ann-ink: #0E1012;
}
.eekad-ann.is-lime   { --ann: #CDFE64; --ann-ink: #0E1012; }
.eekad-ann.is-red    { --ann: #D13636; --ann-ink: #FFFFFF; }
.eekad-ann.is-indigo { --ann: #5050D1; --ann-ink: #FFFFFF; }
.eekad-ann.is-white  { --ann: #F4F7F8; --ann-ink: #0E1012; }
.eekad-ann.is-silver { --ann: #ABB7B6; --ann-ink: #0E1012; }

.eekad-ann__in {
	animation: eekad-ann-in 0.35s ease both;
}
@keyframes eekad-ann-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.eekad-ann__in { animation: none; }
}

.eekad-ann__text {
	display: block;
	font-family: var(--font-sans, "itf Somaya Arabic", system-ui, sans-serif);
	font-size: 13px;
	/* Discrete weight — see the DM Mono overlay note on .eekad-map-label. */
	font-weight: 500;
	line-height: 1.35;
	white-space: nowrap;
}

/* Badge: the figure on a line or a ring. Filled in the annotation's own
   colour so the number reads as part of the thing it measures. */
.eekad-ann--badge .eekad-ann__in {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3px 8px;
	background: var(--ann);
	color: var(--ann-ink);
	box-shadow: 0 1px 6px rgba(9, 11, 13, 0.45);
}
.eekad-ann--badge.is-circle .eekad-ann__in {
	min-width: 58px;
	min-height: 58px;
	padding: 6px;
	border-radius: 50%;
	text-align: center;
}
.eekad-ann--badge.is-circle .eekad-ann__text {
	white-space: normal;
	max-width: 7ch;
}
.eekad-ann--badge.is-triangle .eekad-ann__in {
	min-width: 132px;
	min-height: 66px;
	padding: 30px 22px 6px;
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
	box-shadow: none;
	filter: drop-shadow(0 1px 4px rgba(9, 11, 13, 0.45));
}

/* An area's name: text on the map, like the story's own place labels. */
.eekad-ann--name .eekad-ann__text {
	font-size: 14px;
	color: #F4F7F8;
	max-width: 16ch;
	white-space: normal;
	text-align: center;
	text-shadow:
		0 0 3px rgba(9, 11, 13, 0.95),
		0 0 7px rgba(9, 11, 13, 0.85),
		0 1px 2px rgba(9, 11, 13, 0.9);
}

/* Icon: a dark chip carrying a glyph in the annotation's colour, name below.
   The chip, not the glyph, keeps it legible on satellite imagery. */
.eekad-ann--icon .eekad-ann__in {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}
.eekad-ann__glyph {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: rgba(14, 16, 18, 0.86);
	border: 1.5px solid var(--ann);
	color: var(--ann);
	box-shadow: 0 1px 6px rgba(9, 11, 13, 0.5);
}
.eekad-ann__glyph svg {
	width: 22px;
	height: 22px;
	display: block;
}
.eekad-ann--icon .eekad-ann__text {
	position: absolute;
	top: 100%;
	margin-top: 4px;
	color: #F4F7F8;
	text-shadow:
		0 0 3px rgba(9, 11, 13, 0.95),
		0 0 7px rgba(9, 11, 13, 0.85);
}
.eekad-ann--icon .eekad-ann__in {
	position: relative;
}