/* SMP Engagement Graph — scoped styles */
.smp-graph {
	--smp-accent: #f2a13a;
	--smp-bg: #0e1219;
	--smp-panel: #131922;
	--smp-ink: #e6e9ee;
	--smp-muted: #7f8b9d;
	--smp-line: rgba(230, 233, 238, 0.08);
	font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	background: var(--smp-panel);
	border: 1px solid var(--smp-line);
	border-radius: 10px;
	max-width: 560px;
	width: 100%;
	box-sizing: border-box;
	color: var(--smp-ink);
	overflow: hidden;
}

.smp-graph *,
.smp-graph *::before,
.smp-graph *::after {
	box-sizing: border-box;
}

.smp-graph__head,
.smp-graph__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px;
	font-size: 11.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.smp-graph__head {
	color: var(--smp-muted);
}

.smp-graph__foot {
	border-top: 1px solid var(--smp-line);
	color: var(--smp-muted);
	text-transform: none;
	letter-spacing: 0.06em;
}

.smp-graph__live {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--smp-accent);
	font-weight: 500;
}

.smp-graph__live::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--smp-accent);
	box-shadow: 0 0 0 0 rgba(242, 161, 58, 0.5);
	animation: smp-graph-pulse 2s ease-out infinite;
}

@keyframes smp-graph-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(242, 161, 58, 0.5); }
	70%  { box-shadow: 0 0 0 7px rgba(242, 161, 58, 0); }
	100% { box-shadow: 0 0 0 0 rgba(242, 161, 58, 0); }
}

.smp-graph__stage {
	padding: 8px 12px 4px;
}

.smp-graph__svg {
	display: block;
	width: 100%;
	height: auto;
}

.smp-graph__edge {
	stroke: rgba(230, 233, 238, 0.18);
	stroke-width: 1.2;
	fill: none;
}

.smp-graph__edge--active {
	stroke: var(--smp-accent);
	stroke-width: 1.6;
	stroke-dasharray: 6 6;
	animation: smp-graph-dash 1.4s linear infinite;
	opacity: 0.95;
}

@keyframes smp-graph-dash {
	to { stroke-dashoffset: -24; }
}

.smp-graph__node {
	fill: #4a5768;
	stroke: rgba(230, 233, 238, 0.12);
	stroke-width: 1;
}

.smp-graph__node--entry {
	fill: none;
	stroke: var(--smp-accent);
	stroke-width: 1.6;
}

.smp-graph__node--target {
	fill: none;
	stroke: #e2574c;
	stroke-width: 1.6;
}

.smp-graph__halo {
	fill: none;
	stroke: rgba(226, 87, 76, 0.45);
	stroke-width: 1;
	transform-box: fill-box;
	transform-origin: center;
	animation: smp-graph-halo 2.4s ease-out infinite;
}

@keyframes smp-graph-halo {
	0%   { transform: scale(0.6); opacity: 0.9; }
	100% { transform: scale(1.15); opacity: 0; }
}

.smp-graph__label {
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 10.5px;
	fill: var(--smp-muted);
	letter-spacing: 0.04em;
}

.smp-graph__label--target {
	fill: #b9707a;
}

.smp-graph__foot strong {
	color: var(--smp-ink);
	font-weight: 600;
}

@media (max-width: 480px) {
	.smp-graph__head,
	.smp-graph__foot {
		font-size: 10px;
		padding: 13px 14px;
		gap: 10px;
	}
}