/* Abrovink Prisma Remote — all selectors scoped under .apr-scene so nothing leaks. */

.apr-scene{
	--apr-dot:#d6e1e6;
	--apr-num:#2b4a66;
	--apr-leader:#8a8a8a;
	--apr-accent:#395775;
	--apr-accent-num:#ffffff;
	--apr-ink:#1d2733;
	--apr-rule:#e6eaef;
	--apr-tint:#eef4f9;

	display:grid;
	grid-template-columns:minmax(220px,330px) 1fr;
	gap:42px;
	align-items:start;
	max-width:940px;
	margin:0 auto;
	color:var(--apr-ink);
	font-family:"Helvetica Neue",Arial,sans-serif;
	line-height:1.5;
}
@media (max-width:700px){
	.apr-scene{ grid-template-columns:1fr; gap:26px; }
}

.apr-figure{ margin:0; }
.apr-scene .apr-svg{ display:block; width:100%; height:auto; }

/* Leaders, dots, numbers — foreground SVG content (prints reliably). */
.apr-scene .apr-leaders polyline{
	fill:none;
	stroke:var(--apr-leader);
	stroke-width:2;
	transition:stroke .15s, stroke-width .15s;
}
.apr-scene .apr-dots circle{
	fill:var(--apr-dot);
	transform-box:fill-box;
	transform-origin:center;
	transition:transform .15s, fill .15s;
}
.apr-scene .apr-nums text{
	fill:var(--apr-num);
	font:700 22px Arial, sans-serif;
	pointer-events:none;
	transition:fill .15s;
}

/* Reflowing function list — two columns on wide, one on narrow. */
.apr-scene .apr-fns{
	margin:0; padding:0; list-style:none;
	column-gap:38px; column-count:1;
}
@media (min-width:1280px){
	.apr-scene{ max-width:1080px; }
	.apr-scene .apr-fns{ column-count:2; }
}
.apr-scene .apr-fns li{
	position:relative;
	padding:8px 8px 8px 42px;
	font-size:14px;
	border-radius:8px;
	cursor:pointer;
	break-inside:avoid;
	transition:background .15s;
}
.apr-scene .apr-fns li .apr-mk{
	position:absolute; left:6px; top:7px;
	width:26px; height:26px; border-radius:50%;
	background:var(--apr-dot); color:var(--apr-num);
	font-size:12px; font-weight:700;
	display:flex; align-items:center; justify-content:center;
	transition:background .15s, color .15s, transform .15s;
}
.apr-scene .apr-fns li:focus{ outline:2px solid var(--apr-accent); outline-offset:1px; }

/* Highlight (hover/focus) and pin (click) — applied to the matching pair. */
.apr-scene .apr-leaders polyline.is-hl,
.apr-scene .apr-leaders polyline.is-sel{ stroke:var(--apr-accent); stroke-width:3.5; }
.apr-scene .apr-dots circle.is-hl,
.apr-scene .apr-dots circle.is-sel{ fill:var(--apr-accent); transform:scale(1.18); }
.apr-scene .apr-nums text.is-hl,
.apr-scene .apr-nums text.is-sel{ fill:var(--apr-accent-num); }
.apr-scene .apr-fns li.is-hl,
.apr-scene .apr-fns li.is-sel{ background:var(--apr-tint); }
.apr-scene .apr-fns li.is-hl .apr-mk,
.apr-scene .apr-fns li.is-sel .apr-mk{
	background:var(--apr-accent); color:var(--apr-accent-num); transform:scale(1.08);
}

/* Print / PDF — force colours, keep the figure intact, drop interactive states. */
@media print{
	.apr-scene{ grid-template-columns:150px 1fr; gap:18px; }
	.apr-scene .apr-figure{ max-width:150px; }
	.apr-scene,
	.apr-scene *,
	.apr-scene .apr-fns li .apr-mk{
		-webkit-print-color-adjust:exact; print-color-adjust:exact;
	}
	.apr-scene .apr-leaders polyline.is-hl,
	.apr-scene .apr-leaders polyline.is-sel{ stroke:var(--apr-leader); stroke-width:2; }
	.apr-scene .apr-dots circle.is-hl,
	.apr-scene .apr-dots circle.is-sel{ fill:var(--apr-dot); transform:none; }
	.apr-scene .apr-nums text.is-hl,
	.apr-scene .apr-nums text.is-sel{ fill:var(--apr-num); }
	.apr-scene .apr-fns li.is-hl,
	.apr-scene .apr-fns li.is-sel{ background:none; }
	.apr-scene .apr-fns li.is-hl .apr-mk,
	.apr-scene .apr-fns li.is-sel .apr-mk{ background:var(--apr-dot); color:var(--apr-num); transform:none; }
	.apr-scene .apr-figure,
	.apr-scene .apr-fns li{ break-inside:avoid; }
}