/* =========================================================================
   Melissa Kampers World Signal — front-end styles
   A wide, low world-map strip: dot-matrix continents, neon news markers,
   pure-CSS tooltips. No JavaScript anywhere in this plugin.

   Default appearance is the always-dark "control room" panel — neon
   belongs on near-black, also when the site itself is in light mode.
   The `mkws--auto` variant follows the active theme instead.
   ========================================================================= */

.mkws {
	/* Dark panel tokens (default appearance). */
	--mkws-bg: radial-gradient(120% 180% at 18% -20%, rgba(141, 164, 255, 0.12), transparent 55%),
		radial-gradient(90% 140% at 88% -10%, rgba(52, 216, 197, 0.08), transparent 55%),
		linear-gradient(180deg, #0c101c 0%, #0a0d16 100%);
	--mkws-land: rgba(146, 163, 214, 0.34);
	--mkws-text: #e8ebf2;
	--mkws-muted: #8d97ab;
	--mkws-border: rgba(141, 164, 255, 0.16);
	--mkws-tip-bg: #11141d;
	--mkws-tip-border: #2b3142;
	--mkws-focus: #8da4ff;

	--mkws-ai: #34d8c5;
	--mkws-politics: #8da4ff;
	--mkws-breaking: #ff8095;

	position: relative;
	border: 1px solid var(--mkws-border);
	border-radius: 18px;
	background: var(--mkws-bg);
	color: var(--mkws-text);
	overflow: visible; /* Tooltips may breathe over the edge slightly. */
	font-family: inherit;
	margin: 1.5em auto;
	/* The panel never runs wider than the theme's grid: full-bleed
	   placements stay a panel, not a wall-to-wall band — and the map
	   keeps a sane height-to-width ratio. */
	max-width: 76rem;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 18px 48px rgba(5, 8, 18, 0.35);
}

/* Breathing room when auto-placed below the header. */
.mkws-wrap {
	padding: 0 clamp(1rem, 3vw, 1.5rem);
}

/* Follow-the-theme variant: paper panel in light mode. */
.mkws--auto {
	--mkws-bg: linear-gradient(180deg, #ffffff 0%, #faf9f6 100%);
	--mkws-land: rgba(86, 93, 105, 0.3);
	--mkws-text: #1d2027;
	--mkws-muted: #565d69;
	--mkws-border: #e0ddd4;
	--mkws-tip-bg: #ffffff;
	--mkws-tip-border: #dcdfe6;
	--mkws-focus: #2742e0;
	--mkws-ai: #0b7b86;
	--mkws-politics: #2742e0;
	--mkws-breaking: #b3173d;
	box-shadow: 0 1px 2px rgba(22, 23, 28, 0.04), 0 12px 32px rgba(22, 23, 28, 0.07);
}

[data-theme="dark"] .mkws--auto {
	--mkws-bg: radial-gradient(120% 180% at 18% -20%, rgba(141, 164, 255, 0.12), transparent 55%),
		linear-gradient(180deg, #0c101c 0%, #0a0d16 100%);
	--mkws-land: rgba(146, 163, 214, 0.34);
	--mkws-text: #e8ebf2;
	--mkws-muted: #8d97ab;
	--mkws-border: rgba(141, 164, 255, 0.16);
	--mkws-tip-bg: #11141d;
	--mkws-tip-border: #2b3142;
	--mkws-focus: #8da4ff;
	--mkws-ai: #34d8c5;
	--mkws-politics: #8da4ff;
	--mkws-breaking: #ff8095;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .mkws--auto {
		--mkws-bg: radial-gradient(120% 180% at 18% -20%, rgba(141, 164, 255, 0.12), transparent 55%),
			linear-gradient(180deg, #0c101c 0%, #0a0d16 100%);
		--mkws-land: rgba(146, 163, 214, 0.34);
		--mkws-text: #e8ebf2;
		--mkws-muted: #8d97ab;
		--mkws-border: rgba(141, 164, 255, 0.16);
		--mkws-tip-bg: #11141d;
		--mkws-tip-border: #2b3142;
		--mkws-focus: #8da4ff;
		--mkws-ai: #34d8c5;
		--mkws-politics: #8da4ff;
		--mkws-breaking: #ff8095;
	}
}

/* Header row ---------------------------------------------------------------- */
.mkws__head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	padding: 0.8rem 1.25rem 0.2rem;
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.mkws__brand {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-weight: 700;
	color: var(--mkws-text);
}

.mkws__brand-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--mkws-ai);
	box-shadow: 0 0 8px var(--mkws-ai);
}

.mkws__legend {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.3rem 1rem;
	color: var(--mkws-muted);
	font-weight: 600;
}

.mkws__legend-item {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.mkws__legend-item::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
}

.mkws__legend-item--ai::before { background: var(--mkws-ai); box-shadow: 0 0 6px var(--mkws-ai); }
.mkws__legend-item--politics::before { background: var(--mkws-politics); box-shadow: 0 0 6px var(--mkws-politics); }
.mkws__legend-item--breaking::before { background: var(--mkws-breaking); box-shadow: 0 0 6px var(--mkws-breaking); }

.mkws__updated {
	margin-left: auto;
	color: var(--mkws-muted);
	font-weight: 500;
	white-space: nowrap;
}

/* The map strip --------------------------------------------------------------
   Wide and deliberately LOW: ~2.7:1, capped at 380px tall, so it reads
   as a panel inside the page, never as a page-filling map.

   CRITICAL alignment contract: the SVG fills this box exactly
   (preserveAspectRatio="none" + absolute inset 0), and markers are
   positioned in percentages of this same box — map and markers can
   therefore never drift apart, at any viewport size. Spacing around
   the map is margin (outside the box), never padding (inside it). */
.mkws__stage {
	position: relative;
	aspect-ratio: 900 / 330;
	max-height: 380px;
	margin: 0.4rem 1rem 1.1rem;
}

.mkws__map {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.mkws__land {
	stroke: var(--mkws-land);
}

/* Markers -------------------------------------------------------------------- */
.mkws__marker {
	position: absolute;
	transform: translate(-50%, -50%);
	width: 14px;
	height: 14px;
}

.mkws__dot {
	position: absolute;
	inset: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	text-decoration: none;
	background: var(--mkws-politics);
	box-shadow: 0 0 10px var(--mkws-politics);
	border: 2px solid rgba(255, 255, 255, 0.55);
}

.mkws__marker--ai .mkws__dot { background: var(--mkws-ai); box-shadow: 0 0 10px var(--mkws-ai); }
.mkws__marker--breaking .mkws__dot { background: var(--mkws-breaking); box-shadow: 0 0 12px var(--mkws-breaking); }

.mkws__dot:hover {
	transform: scale(1.15);
}

.mkws__dot:focus-visible {
	outline: 2px solid var(--mkws-focus);
	outline-offset: 3px;
}

.mkws__count {
	font-size: 9px;
	font-weight: 800;
	line-height: 1;
	color: #0a0d16;
}

/* Quiet neon pulse — one ring, slow, never frantic. */
.mkws__pulse {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--mkws-politics);
	opacity: 0.5;
	animation: mkws-pulse 3s ease-out infinite;
	pointer-events: none;
}

.mkws__marker--ai .mkws__pulse { background: var(--mkws-ai); }
.mkws__marker--breaking .mkws__pulse { background: var(--mkws-breaking); animation-duration: 2.1s; }

@keyframes mkws-pulse {
	0%   { transform: scale(1); opacity: 0.5; }
	70%  { transform: scale(2.6); opacity: 0; }
	100% { transform: scale(2.6); opacity: 0; }
}

/* Tooltips (pure CSS: hover + keyboard focus) -------------------------------- */
.mkws__tip {
	position: absolute;
	bottom: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%);
	width: max-content;
	max-width: min(20rem, 60vw);
	background: var(--mkws-tip-bg);
	border: 1px solid var(--mkws-tip-border);
	border-radius: 10px;
	padding: 0.65rem 0.8rem;
	box-shadow: 0 14px 38px rgba(0, 0, 0, 0.4);
	z-index: 20;
	visibility: hidden;
	opacity: 0;
	transition: opacity 160ms ease;
	text-transform: none;
	letter-spacing: normal;
}

.mkws__marker:hover .mkws__tip,
.mkws__marker:focus-within .mkws__tip {
	visibility: visible;
	opacity: 1;
}

/* Edge-aware placement (classes computed server-side). */
.mkws__marker--below .mkws__tip {
	bottom: auto;
	top: calc(100% + 10px);
}

.mkws__marker--left .mkws__tip {
	left: auto;
	right: -6px;
	transform: none;
}

.mkws__marker--right .mkws__tip {
	left: -6px;
	transform: none;
}

.mkws__tip-place {
	margin: 0 0 0.35rem;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mkws-muted);
}

.mkws__tip-item {
	margin: 0.3rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--mkws-text);
}

.mkws__tip-topic {
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.mkws__tip-topic--ai { color: var(--mkws-ai); }
.mkws__tip-topic--politics { color: var(--mkws-politics); }
.mkws__tip-topic--breaking { color: var(--mkws-breaking); }

.mkws__tip-time {
	color: var(--mkws-muted);
	font-size: 0.7rem;
	white-space: nowrap;
}

/* Mobile ----------------------------------------------------------------------
   The strip stays a strip: full-bleed inside its container, smaller
   header, tooltips disabled (markers are direct links there). */
@media (max-width: 640px) {
	.mkws { border-radius: 14px; }

	.mkws__head {
		padding: 0.65rem 0.9rem 0.1rem;
		gap: 0.4rem 0.8rem;
	}

	.mkws__legend { display: none; }
	.mkws__updated { margin-left: 0; }

	.mkws__stage { margin: 0.25rem 0.5rem 0.7rem; }

	.mkws__marker { width: 12px; height: 12px; }

	.mkws__tip { display: none; }
}

/* Reduced motion ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.mkws__pulse { animation: none; opacity: 0.25; }
	.mkws__dot:hover { transform: none; }
	.mkws__tip { transition: none; }
}

/* Print: the panel is a live signal surface, not document content. */
@media print {
	.mkws { display: none; }
}