/* =========================================================================
   Melissa Kampers Breaking News Radar — front-end styles (v1.0.2)

   Moving mode runs on PURE CSS: the seamless-loop duplicate track is
   rendered server-side, so the marquee moves even with JavaScript
   disabled. JS only enhances (duration sizing, short-track padding,
   pause/hide buttons).

   Theme-independent; light/dark aware; restyle via the custom
   properties on .mkbnr.
   ========================================================================= */

.mkbnr {
	--mkbnr-bg: #ffffff;
	--mkbnr-text: #1d2027;
	--mkbnr-muted: #565d69;
	--mkbnr-border: #dcdfe6;
	--mkbnr-accent: #2742e0;
	--mkbnr-accent-2: #0b7b86;
	--mkbnr-live: #b3173d;
	--mkbnr-focus: var(--mkbnr-accent);
	--mkbnr-shadow: 0 1px 2px rgba(22, 23, 28, 0.04), 0 10px 28px rgba(22, 23, 28, 0.06);
	--mkbnr-duration: 45s;

	/* Topic palette (light): every desk gets its own color. */
	--mkbnr-t-ai: #0b7b86;
	--mkbnr-t-technology: #0d6e9e;
	--mkbnr-t-politics: #2742e0;
	--mkbnr-t-geopolitics: #6d28d9;
	--mkbnr-t-governance: #875e0b;
	--mkbnr-t-society: #b03579;

	font-family: inherit;
	font-size: 0.8125rem;
	color: var(--mkbnr-text);
	background: var(--mkbnr-bg);

	/* Panel format, matched to the World Signal map: same 76rem grid,
	   same border/radius family — stacked, they read as one console. */
	width: calc(100% - 2 * clamp(1rem, 3vw, 1.5rem));
	max-width: 76rem;
	margin: 0.9rem auto;
	border: 1px solid var(--mkbnr-border);
	border-radius: 18px;
	box-shadow: var(--mkbnr-shadow, none);
}

[data-theme="dark"] .mkbnr {
	--mkbnr-bg: linear-gradient(180deg, #0c101c 0%, #0a0d16 100%);
	--mkbnr-text: #e8ebf2;
	--mkbnr-muted: #9aa4b5;
	--mkbnr-border: rgba(141, 164, 255, 0.16);
	--mkbnr-accent: #8da4ff;
	--mkbnr-accent-2: #34d8c5;
	--mkbnr-live: #ff8095;
	--mkbnr-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 14px 38px rgba(5, 8, 18, 0.3);

	--mkbnr-t-ai: #34d8c5;
	--mkbnr-t-technology: #5fc7f0;
	--mkbnr-t-politics: #8da4ff;
	--mkbnr-t-geopolitics: #c4a5ff;
	--mkbnr-t-governance: #ecc56a;
	--mkbnr-t-society: #ff9ad5;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .mkbnr {
		--mkbnr-bg: linear-gradient(180deg, #0c101c 0%, #0a0d16 100%);
		--mkbnr-text: #e8ebf2;
		--mkbnr-muted: #9aa4b5;
		--mkbnr-border: rgba(141, 164, 255, 0.16);
		--mkbnr-accent: #8da4ff;
		--mkbnr-accent-2: #34d8c5;
		--mkbnr-live: #ff8095;
		--mkbnr-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 14px 38px rgba(5, 8, 18, 0.3);

		--mkbnr-t-ai: #34d8c5;
		--mkbnr-t-technology: #5fc7f0;
		--mkbnr-t-politics: #8da4ff;
		--mkbnr-t-geopolitics: #c4a5ff;
		--mkbnr-t-governance: #ecc56a;
		--mkbnr-t-society: #ff9ad5;
	}
}

.mkbnr__bar {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	/* The panel itself is grid-constrained; the bar just breathes
	   inside the rounded corners. */
	padding: 0.45rem clamp(1rem, 2.5vw, 1.5rem);
	min-height: 44px;
}

/* Brand label with a quiet live pulse. */
.mkbnr__brand {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	flex-shrink: 0;
	font-weight: 700;
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mkbnr-live);
}

.mkbnr__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--mkbnr-live);
	animation: mkbnr-pulse 2.4s ease-out infinite;
}

@keyframes mkbnr-pulse {
	0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mkbnr-live) 45%, transparent); }
	70%  { box-shadow: 0 0 0 8px transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}

/* Track ------------------------------------------------------------------ */
.mkbnr__viewport {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
}

.mkbnr__rail {
	display: flex;
}

.mkbnr__track {
	display: flex;
	gap: 2.25rem;
	list-style: none;
	margin: 0;
	/* Trailing padding equals the internal gap, so the spacing across
	   the loop seam is identical to the spacing between items. */
	padding: 0 2.25rem 0 0;
}

/* The server-rendered loop copy is only ever shown by moving mode. */
.mkbnr__track--clone {
	display: none;
}

.mkbnr__item {
	margin: 0;
	white-space: nowrap;
}

.mkbnr__link {
	display: inline-flex;
	align-items: baseline;
	gap: 0.55rem;
	color: var(--mkbnr-text);
	text-decoration: none;
	padding: 0.2rem 0;
}

.mkbnr__link:hover .mkbnr__headline {
	color: var(--mkbnr-accent);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.mkbnr__link:focus-visible {
	outline: 2px solid var(--mkbnr-focus);
	outline-offset: 2px;
	border-radius: 3px;
}

.mkbnr__topic {
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mkbnr-accent-2);
	border: 1px solid currentColor;
	border-radius: 999px;
	padding: 0.12rem 0.55rem;
}

/* Desk colors: the label text always names the topic — color
   reinforces, never carries, the meaning. */
.mkbnr__topic--ai { color: var(--mkbnr-t-ai); }
.mkbnr__topic--technology { color: var(--mkbnr-t-technology); }
.mkbnr__topic--politics { color: var(--mkbnr-t-politics); }
.mkbnr__topic--geopolitics { color: var(--mkbnr-t-geopolitics); }
.mkbnr__topic--governance { color: var(--mkbnr-t-governance); }
.mkbnr__topic--society { color: var(--mkbnr-t-society); }

.mkbnr__topic--breaking,
.mkbnr__topic--manual {
	color: var(--mkbnr-live);
}

.mkbnr__headline {
	font-weight: 600;
}

.mkbnr__source,
.mkbnr__time {
	color: var(--mkbnr-muted);
	font-size: 0.75rem;
}

.mkbnr__source::before {
	content: "\00B7";
	content: "\00B7" / "";
	margin-right: 0.5rem;
	color: var(--mkbnr-border);
}

/* -------------------------------------------------------------------------
   MOVING MODE — pure CSS marquee, hardened against theme resets.
   ------------------------------------------------------------------------- */
.mkbnr.mkbnr-mode-moving .mkbnr__viewport {
	overflow: hidden !important;
}

.mkbnr.mkbnr-mode-moving .mkbnr__track--clone {
	display: flex;
}

.mkbnr.mkbnr-mode-moving .mkbnr__rail {
	display: flex !important;
	width: max-content !important;
	overflow: visible !important;
	animation: mkbnr-marquee var(--mkbnr-duration, 45s) linear infinite !important;
	will-change: transform;
}

@keyframes mkbnr-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Pause on hover, on any keyboard focus inside, and via the button. */
.mkbnr.mkbnr-mode-moving .mkbnr__viewport:hover .mkbnr__rail,
.mkbnr.mkbnr-mode-moving .mkbnr__viewport:focus-within .mkbnr__rail,
.mkbnr.mkbnr-mode-moving.is-paused .mkbnr__rail {
	animation-play-state: paused !important;
}

/* JS-added padding duplicates (for short tracks) belong to the loop only. */
.mkbnr:not(.mkbnr-mode-moving) .mkbnr__item--dup {
	display: none;
}

/* -------------------------------------------------------------------------
   STATIC + STACKED MODES
   ------------------------------------------------------------------------- */
.mkbnr-mode-static .mkbnr__rail {
	width: 100%;
	overflow-x: auto;
	scrollbar-width: thin;
}

.mkbnr-mode-stacked .mkbnr__bar {
	align-items: flex-start;
	flex-wrap: wrap;
}

.mkbnr-mode-stacked .mkbnr__rail {
	width: 100%;
}

.mkbnr-mode-stacked .mkbnr__track {
	flex-direction: column;
	gap: 0.55rem;
	padding: 0.2rem 0;
}

.mkbnr-mode-stacked .mkbnr__item {
	white-space: normal;
}

/* Tools ------------------------------------------------------------------ */
.mkbnr__tools {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-shrink: 0;
}

.mkbnr__pause,
.mkbnr__hide {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 1px solid var(--mkbnr-border);
	border-radius: 999px;
	background: transparent;
	color: var(--mkbnr-text);
	cursor: pointer;
	transition: border-color 160ms ease, color 160ms ease;
}

.mkbnr__pause:hover,
.mkbnr__hide:hover {
	border-color: var(--mkbnr-accent);
	color: var(--mkbnr-accent);
}

.mkbnr__pause:focus-visible,
.mkbnr__hide:focus-visible {
	outline: 2px solid var(--mkbnr-focus);
	outline-offset: 2px;
}

.mkbnr__icon { display: block; }

/* Play icon shows while paused, pause icon while playing. */
.mkbnr__icon--play { display: none; }
.mkbnr.is-paused .mkbnr__icon--play { display: block; }
.mkbnr.is-paused .mkbnr__icon--pause { display: none; }

.mkbnr__updated {
	color: var(--mkbnr-muted);
	font-size: 0.7rem;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
   MOBILE — the moving bar stays one moving bar.
   ------------------------------------------------------------------------- */
@media (max-width: 640px) {
	.mkbnr {
		border-radius: 14px;
		margin-block: 0.6rem;
	}

	.mkbnr__bar {
		gap: 0.6rem;
		padding-inline: 0.85rem;
	}

	/* Save horizontal room for the headlines. */
	.mkbnr__updated { display: none; }

	.mkbnr__source { display: none; }
}

/* -------------------------------------------------------------------------
   REDUCED MOTION — wins over everything, including the hardened rule,
   unless the owner explicitly disabled the static fallback
   (data-rm-static="0"), in which case the pause button still provides
   the required control.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.mkbnr .mkbnr__rail,
	.mkbnr.mkbnr-mode-moving .mkbnr__rail {
		animation: none !important;
		width: 100% !important;
		overflow-x: auto !important;
	}

	.mkbnr .mkbnr__track--clone,
	.mkbnr .mkbnr__item--dup {
		display: none !important;
	}

	.mkbnr__dot {
		animation: none;
	}

	.mkbnr__pause,
	.mkbnr__hide {
		transition: none;
	}

	/* Owner opt-out: motion despite OS preference (pause button remains). */
	.mkbnr[data-rm-static="0"].mkbnr-mode-moving .mkbnr__rail {
		animation: mkbnr-marquee var(--mkbnr-duration, 45s) linear infinite !important;
		width: max-content !important;
		overflow: visible !important;
	}

	.mkbnr[data-rm-static="0"].mkbnr-mode-moving .mkbnr__track--clone {
		display: flex !important;
	}

	.mkbnr[data-rm-static="0"].mkbnr-mode-moving .mkbnr__viewport:hover .mkbnr__rail,
	.mkbnr[data-rm-static="0"].mkbnr-mode-moving .mkbnr__viewport:focus-within .mkbnr__rail,
	.mkbnr[data-rm-static="0"].mkbnr-mode-moving.is-paused .mkbnr__rail {
		animation-play-state: paused !important;
	}
}