/* Vome — /how-it-works interactive exhibits.
 *
 * Museum-cabinet styling for the two SVG boards: chunky switches,
 * glowing wires, packet dots.  Theme tokens come from vomehome.css;
 * the page shell (gd-top, gd-page, gd-proc…) comes from guides.css.
 * Everything animated respects prefers-reduced-motion — the JS swaps
 * moving dots for a static highlight, and the CSS below stops the
 * ambient pulses.
 */

.hx-page { max-width: 1080px; }

/* ── Exhibit cabinet ───────────────────────────────────────────── */
.hx-exhibit {
	margin: 2.25rem 0;
	background: var(--bg-secondary);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-lg);
	padding: 1.4rem 1.5rem 1.6rem;
	box-shadow: var(--shadow-lg);
}
.hx-exhibit-head {
	display: flex;
	gap: 0.9rem;
	align-items: flex-start;
	margin-bottom: 1.1rem;
}
.hx-exhibit-no {
	flex: 0 0 auto;
	width: 2.1rem;
	height: 2.1rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--primary), var(--accent));
	color: #14161c;
	font-size: 1.05rem;
	font-weight: 800;
}
.hx-exhibit-head h2 { font-size: 1.3rem; font-weight: 700; margin: 0 0 0.25rem; }
.hx-exhibit-head p { margin: 0; color: var(--text-secondary); font-size: 0.95rem; max-width: 72ch; }

/* ── The glass: SVG board ──────────────────────────────────────── */
.hx-board {
	position: relative; /* anchors the .hx-pop node popover */
	background:
		radial-gradient(700px 320px at 30% 0%, rgba(255, 152, 0, 0.04), transparent 60%),
		radial-gradient(700px 320px at 90% 100%, rgba(16, 185, 129, 0.05), transparent 55%),
		#0b0d12;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 0.6rem;
	margin: 1rem 0 0.4rem;
}
.hx-board svg { display: block; width: 100%; height: auto; }

/* Zones (house, data centre) */
.zone rect {
	fill: rgba(20, 22, 28, 0.55);
	stroke: var(--border);
	stroke-width: 1.5;
	stroke-dasharray: none;
}
.zone-vome rect { stroke: rgba(16, 185, 129, 0.35); }
.zone-label {
	fill: var(--text-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Hardware nodes */
.hw-node rect {
	fill: var(--bg-tertiary);
	stroke: var(--border-light);
	stroke-width: 1.5;
	transition: opacity 0.35s ease, filter 0.35s ease;
}
.hw-node .n-label { fill: var(--text-primary); font-size: 14px; font-weight: 650; }
.hw-node .n-sub { fill: var(--text-muted); font-size: 11.5px; }
.hw-node .hw-dot { fill: var(--accent); }
.hw-vendor rect { stroke: rgba(245, 158, 11, 0.45); }
.hw-vome rect { stroke: rgba(16, 185, 129, 0.45); }
.phone-glyph { fill: #0c0d11; stroke: var(--border-light); stroke-width: 1.2; }
.vault-dial { fill: none; stroke: var(--text-muted); stroke-width: 1.6; }

.hw-node, .zone { transition: opacity 0.35s ease; }
.hw-node.is-dead, .zone.is-dead { opacity: 0.28; }
.hw-node.is-dead rect { filter: saturate(0); }

/* Burned hardware */
.flame { display: none; fill: #f97316; stroke: #7c2d12; stroke-width: 1; }
.is-burned .flame { display: block; animation: hxFlicker 0.9s ease-in-out infinite alternate; }
.is-burned > rect, .hw-node.is-burned rect { stroke: #7f1d1d; fill: #17090b; }
@keyframes hxFlicker {
	from { transform: scale(1); opacity: 0.95; }
	to { transform: scale(1.12); opacity: 0.7; }
}
.is-burned .flame { transform-box: fill-box; transform-origin: 50% 80%; }

/* Who's the brain? */
.brain-chip { display: none; }
.is-brain .brain-chip { display: block; }
.brain-chip rect { fill: var(--accent); stroke: none; }
.brain-chip text { fill: #06281e; font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; }
.brain-halo {
	fill: none;
	stroke: var(--accent);
	stroke-width: 2;
	transform-box: fill-box;
	transform-origin: center;
	animation: hxBrainPulse 2.2s ease-out infinite;
}
@keyframes hxBrainPulse {
	0% { transform: scale(0.55); opacity: 0.9; }
	100% { transform: scale(1.5); opacity: 0; }
}

/* Bulbs & lock */
.bulb-glass { fill: #20232c; stroke: var(--border-light); stroke-width: 1.5; transition: fill 0.3s ease, stroke 0.3s ease; }
.bulb-filament { fill: none; stroke: var(--text-muted); stroke-width: 1.4; }
.bulb-base { fill: #2a2d38; stroke: var(--border-light); stroke-width: 1; }
.bulb.lit .bulb-glass {
	fill: #ffd54f;
	stroke: #ffb300;
	filter: drop-shadow(0 0 10px rgba(255, 213, 79, 0.75));
	animation: hxBulbBreathe 2.6s ease-in-out infinite;
}
.bulb.lit .bulb-filament { stroke: #b45309; }
@keyframes hxBulbBreathe {
	0%, 100% { filter: drop-shadow(0 0 7px rgba(255, 213, 79, 0.55)); }
	50% { filter: drop-shadow(0 0 14px rgba(255, 213, 79, 0.9)); }
}
.lock-body { fill: var(--bg-tertiary); stroke: var(--border-light); stroke-width: 1.5; transition: stroke 0.3s ease; }
.lock-keyhole { fill: var(--text-muted); }
.lock-shackle {
	fill: none;
	stroke: var(--text-secondary);
	stroke-width: 3;
	stroke-linecap: round;
	transform-box: fill-box;
	transform-origin: 15% 100%;
	transition: transform 0.4s ease, stroke 0.3s ease;
}
.lock.unlocked .lock-shackle { transform: rotate(-38deg); stroke: var(--accent-bright); }
.lock.unlocked .lock-body { stroke: var(--accent); }
.lock.unlocked .lock-keyhole { fill: var(--accent-bright); }

/* Wires, leashes, packets.
 * Lines are colour-coded by the network they cross:
 *   periwinkle = the public internet, teal = the home network,
 *   and tunnels draw the teal dashes *inside* a periwinkle casing.
 * Active command paths *glow*; dots appear only when data moves. */
.wire { fill: none; stroke: #4a4e5e; stroke-opacity: 0.45; stroke-width: 4; stroke-linecap: round; }
.wire.net-inet { stroke: #7d8ec7; stroke-opacity: 0.38; stroke-width: 4.5; }
.wire.net-lan { stroke: #10b981; stroke-opacity: 0.38; stroke-width: 4.5; }
.wire.net-vpn { stroke: #10b981; stroke-opacity: 0.45; stroke-width: 4.5; stroke-dasharray: 7 6; }
.wire-ghost { stroke: transparent; stroke-width: 4; }
.wire.active { stroke: var(--primary); stroke-width: 5; opacity: 0.85; }

/* Glowing active route — orange halo, network-coloured core */
.wire.route-live {
	stroke-opacity: 1;
	stroke-width: 5.5;
	animation: hxRouteGlow 2.4s ease-in-out infinite;
}
.wire.route-live.net-inet { stroke: #7d8ec7; }
.wire.route-live.net-lan { stroke: #10b981; }
.wire.route-live.net-vpn { stroke: #10b981; stroke-dasharray: 7 6; }
@keyframes hxRouteGlow {
	0%, 100% {
		filter: drop-shadow(0 0 4px rgba(255, 152, 0, 0.75)) drop-shadow(0 0 10px rgba(255, 152, 0, 0.35));
	}
	50% {
		filter: drop-shadow(0 0 7px rgba(255, 152, 0, 1)) drop-shadow(0 0 16px rgba(255, 152, 0, 0.55));
	}
}
.tunnel-casing {
	fill: none;
	stroke: #7d8ec7;
	stroke-opacity: 0.14;
	stroke-width: 10;
	stroke-linecap: round;
	transition: stroke-opacity 0.3s ease;
}
.tunnel-casing.up { stroke-opacity: 0.3; }
/* Exhibit 1: the casings only exist in the modes that build them */
#a-vpn-casing, #a-vome-casing { stroke-opacity: 0; }
svg[data-mode="vpn"] #a-vpn-casing { stroke-opacity: 0.3; }
svg[data-mode="vome"] #a-vome-casing { stroke-opacity: 0.3; }
svg[data-mode="vpn"] #a-cloud-vpn {
	stroke-opacity: 0.85;
}
.leash {
	fill: none;
	stroke: var(--text-muted);
	stroke-width: 1.6;
	stroke-dasharray: 6 7;
	opacity: 0.55;
	transition: opacity 0.3s ease, stroke 0.3s ease;
}
.leash.active, .leash.up {
	stroke: var(--accent);
	opacity: 0.95;
	animation: hxMarch 1.1s linear infinite;
}
.leash-inet.active { stroke: #7d8ec7; }
#c-tunnel-leash:not(.up) { opacity: 0.18; }
@keyframes hxMarch {
	to { stroke-dashoffset: -13; }
}
.wire-tag {
	fill: #7d8ec7;
	font-size: 10px;
	font-style: italic;
	opacity: 0.85;
}
.wire-tag.tag-tunnel { fill: var(--accent); }
.flow-dot { stroke: none; }
.flow-dot.tone-ok { fill: var(--primary); filter: drop-shadow(0 0 5px rgba(255, 152, 0, 0.8)); }
.flow-dot.tone-warn { fill: var(--warning); filter: drop-shadow(0 0 5px rgba(245, 158, 11, 0.8)); }
.flow-dot.tone-bad { fill: var(--danger); filter: drop-shadow(0 0 5px rgba(239, 68, 68, 0.8)); }
.flow-dot.tone-backup { fill: var(--accent); filter: drop-shadow(0 0 4px rgba(16, 185, 129, 0.8)); }
.flow-dot.flow-pulse { stroke: rgba(255, 255, 255, 0.9); stroke-width: 1.5; }

/* Failure marks.  The pulse animates an inner wrapper group — never
 * the outer <g>, whose SVG transform *attribute* does the positioning
 * and would be clobbered by a CSS transform animation. */
.x-mark { opacity: 0; transition: opacity 0.25s ease; pointer-events: none; }
.x-mark.shown { opacity: 1; }
.x-mark.shown .x-mark-inner { animation: hxXPulse 1.4s ease-in-out infinite; }
.x-mark-inner { transform-box: fill-box; transform-origin: center; }
.x-mark circle { fill: #1d0a0d; stroke: var(--danger); stroke-width: 2; }
.x-mark path { stroke: var(--danger); stroke-width: 2.5; stroke-linecap: round; }
@keyframes hxXPulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.15); }
}

/* Firewall & VPN door (exhibit 1) */
.firewall rect { fill: #34181a; stroke: #7f1d1d; stroke-width: 1; }
#a-vpn-door rect { fill: var(--bg-tertiary); stroke: var(--border-light); stroke-width: 1.2; }
svg[data-mode="vpn"] #a-vpn-door rect { stroke: var(--warning); filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.6)); }
.wire-label { fill: var(--text-muted); font-size: 10.5px; }

/* ── Clickable machines on the glass ───────────────────────────── */
.hx-clickable { cursor: pointer; }
.hx-clickable:hover > rect, .hx-clickable:focus-visible > rect {
	stroke: var(--primary);
	filter: drop-shadow(0 0 6px rgba(255, 152, 0, 0.35));
}
.hx-clickable:focus { outline: none; }
.hx-clickable:focus-visible > rect { stroke-width: 2; }
/* zones highlight on their border only, and never eat clicks meant
 * for the nodes inside them */
.zone.hx-clickable > rect { pointer-events: stroke; }

/* the "you" marker: whichever phone you currently are */
.hw-node.is-you > rect { stroke: var(--primary); stroke-width: 2; }

/* tap buttons: a real light/lock control on the phone */
.tap-btn { cursor: pointer; }
.tap-btn .tap-bg {
	fill: #171a22;
	stroke: var(--border-light);
	stroke-width: 1.3;
	transition: stroke 0.2s ease, fill 0.2s ease;
}
.tap-btn:hover .tap-bg, .tap-btn:focus-visible .tap-bg { stroke: var(--primary); fill: #21242e; }
.tap-btn:focus { outline: none; }
.tap-btn .tap-glyph { pointer-events: none; }
.tap-btn .tap-glyph circle, .tap-btn .tap-glyph path, .tap-btn .tap-glyph rect {
	fill: none;
	stroke: var(--text-secondary);
	stroke-width: 1.5;
}
.tap-btn:hover .tap-glyph circle, .tap-btn:hover .tap-glyph path, .tap-btn:hover .tap-glyph rect { stroke: var(--primary); }
.tap-btn .tap-label { fill: var(--text-muted); font-size: 11px; font-style: italic; }
.tap-btn.tap-denied .tap-bg {
	animation: hxDenied 0.45s ease;
	stroke: var(--danger);
	transform-box: fill-box;
	transform-origin: center;
}
@keyframes hxDenied {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-2.5px); }
	75% { transform: translateX(2.5px); }
}

/* the fuse box on the house wall */
.fuse .fuse-box { fill: var(--bg-tertiary); stroke: var(--border-light); stroke-width: 1.5; }
.fuse .fuse-slot { fill: #0c0d11; stroke: var(--border-light); stroke-width: 1; }
.fuse .fuse-lever { fill: var(--accent); transition: transform 0.25s ease, fill 0.25s ease; }
.fuse.off .fuse-lever { transform: translateY(15px); fill: var(--danger); }
.fuse:hover .fuse-box, .fuse:focus-visible .fuse-box { stroke: var(--primary); }
.fuse:focus { outline: none; }

/* the VM joining the home network once it's the brain */
.lan-chip { display: none; }
.is-brain .lan-chip { display: block; }
.lan-chip rect { fill: rgba(16, 185, 129, 0.14); stroke: var(--accent); stroke-width: 1; }
.lan-chip text { fill: var(--accent-bright); font-size: 10px; font-weight: 650; }
#n-vm.is-brain > rect { stroke: var(--accent); stroke-dasharray: 5 4; }

/* a machine mid-resync (restore/handback sequences) */
.hw-node.is-syncing > rect {
	stroke: var(--accent);
	stroke-dasharray: 6 5;
	animation: hxSyncSpin 1s linear infinite;
}
@keyframes hxSyncSpin {
	to { stroke-dashoffset: -11; }
}

/* ── Node popover (click a machine for its controls) ───────────── */
.hx-pop {
	position: absolute;
	z-index: 30;
	min-width: 200px;
	max-width: 260px;
	background: #14161d;
	border: 1px solid var(--border-light);
	border-radius: var(--radius);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
	padding: 0.55rem 0.6rem 0.6rem;
}
.hx-pop[hidden] { display: none; }
.hx-pop-title {
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin: 0 0 0.4rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.5rem;
}
.hx-pop-close {
	background: none;
	border: 0;
	color: var(--text-muted);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	padding: 0.1rem 0.25rem;
}
.hx-pop-close:hover { color: var(--text-primary); }
.hx-pop-act {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	margin: 0.25rem 0 0;
	padding: 0.45rem 0.55rem;
	background: var(--bg-tertiary);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	color: var(--text-primary);
	font-size: 0.88rem;
	text-align: left;
	cursor: pointer;
	transition: var(--transition);
}
.hx-pop-act:hover { border-color: var(--primary); }
.hx-pop-act .bi { color: var(--primary); }
.hx-pop-note { margin: 0.4rem 0 0; color: var(--text-muted); font-size: 0.78rem; }

/* ── Legend & hint under the glass ─────────────────────────────── */
.hx-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.1rem;
	margin: 0.35rem 0 0;
	color: var(--text-muted);
	font-size: 0.8rem;
}
.hx-leg { display: inline-flex; align-items: center; gap: 0.4rem; }
.hx-leg svg { flex: 0 0 auto; }
.leg-inet { stroke: #7d8ec7; stroke-width: 2.5; fill: none; }
.leg-lan { stroke: #10b981; stroke-width: 2.5; fill: none; }
.leg-tunnel-casing { stroke: rgba(125, 142, 199, 0.35); stroke-width: 8; stroke-linecap: round; fill: none; }
.leg-tunnel-core { stroke: #10b981; stroke-width: 2; stroke-dasharray: 4 4; fill: none; }
.leg-backup { fill: var(--accent); }
.hx-hint {
	margin: 0.5rem 0 0.25rem;
	color: var(--text-muted);
	font-size: 0.85rem;
}
.hx-hint .bi { color: var(--primary); margin-right: 0.35rem; }

/* ── Mode buttons (exhibit 1) ──────────────────────────────────── */
.hx-modes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 0.6rem;
	margin: 0.25rem 0 0.5rem;
}
.hx-mode-btn {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.7rem 0.9rem;
	background: var(--bg-tertiary);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	color: var(--text-primary);
	font-size: 0.93rem;
	font-weight: 600;
	cursor: pointer;
	transition: var(--transition);
}
.hx-mode-btn .bi { font-size: 1.25rem; color: var(--text-muted); transition: color 0.2s ease; }
.hx-mode-btn:hover { border-color: var(--primary); transform: translateY(-1px); }
.hx-mode-btn[aria-pressed="true"] {
	border-color: var(--primary);
	background: rgba(255, 152, 0, 0.10);
	box-shadow: 0 0 0 1px var(--primary) inset;
}
.hx-mode-btn[aria-pressed="true"] .bi { color: var(--primary); }

/* ── CHAP standby mode (exhibit 2) ─────────────────────────────── */
.hx-standby-modes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 0.6rem;
	margin: 0.25rem 0 0.5rem;
}
.hx-standby-btn {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.2rem;
	padding: 0.65rem 0.9rem;
	background: var(--bg-tertiary);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	color: var(--text-primary);
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
	transition: var(--transition);
	text-align: left;
}
.hx-standby-btn .hx-standby-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.hx-standby-btn .bi { font-size: 1.15rem; color: var(--text-muted); }
.hx-standby-btn small {
	font-weight: 450;
	color: var(--text-muted);
	font-size: 0.78rem;
	line-height: 1.35;
}
.hx-standby-btn:hover { border-color: var(--accent); }
.hx-standby-btn[aria-pressed="true"] {
	border-color: var(--accent);
	background: rgba(16, 185, 129, 0.08);
	box-shadow: 0 0 0 1px var(--accent) inset;
}
.hx-standby-btn[aria-pressed="true"] .bi { color: var(--accent); }

/* cold / hot chip on the standby VM */
.mode-chip { display: none; }
.mode-chip rect { fill: var(--bg-secondary); stroke: var(--border-light); stroke-width: 1; }
.mode-chip text { fill: var(--text-muted); font-size: 9px; font-weight: 750; letter-spacing: 0.04em; text-transform: uppercase; }
#n-vm.is-cold .cold-chip { display: block; }
#n-vm.is-hot .hot-chip { display: block; }
#n-vm.is-hot > rect { stroke: rgba(16, 185, 129, 0.55); }
#n-vm.is-hot .vm-sub { fill: var(--accent-bright); }

/* ── Preset chips (exhibit 2) ──────────────────────────────────── */
.hx-presets {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin: 0.25rem 0 0.5rem;
}
.hx-preset-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.8rem;
	background: var(--bg-tertiary);
	border: 1px solid var(--border);
	border-radius: 999px;
	color: var(--text-secondary);
	font-size: 0.85rem;
	cursor: pointer;
	transition: var(--transition);
}
.hx-preset-btn .bi { color: var(--primary); }
.hx-preset-btn:hover { border-color: var(--primary); color: var(--text-primary); }

/* ── Status readout ────────────────────────────────────────────── */
.hx-status {
	border: 1px solid var(--border-light);
	border-left-width: 4px;
	border-radius: var(--radius);
	background: var(--bg-tertiary);
	padding: 0.85rem 1.1rem;
	margin: 0.75rem 0;
	transition: border-color 0.3s ease;
}
.hx-status.tone-ok { border-left-color: var(--accent); }
.hx-status.tone-warn { border-left-color: var(--warning); }
.hx-status.tone-bad { border-left-color: var(--danger); }
.hx-status-headline { font-size: 1.05rem; font-weight: 700; margin: 0 0 0.3rem; }
.hx-status.tone-ok .hx-status-headline { color: var(--accent-bright); }
.hx-status.tone-warn .hx-status-headline { color: var(--warning); }
.hx-status.tone-bad .hx-status-headline { color: var(--danger); }
.hx-status-explain { color: var(--text-secondary); font-size: 0.93rem; margin: 0; max-width: 90ch; }
.hx-status.hx-attn { animation: hxAttn 0.5s ease; }
@keyframes hxAttn {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-4px); }
	75% { transform: translateX(4px); }
}
.hx-manual {
	margin: 0.7rem 0 0;
	padding: 0.55rem 0.8rem;
	border: 1px solid rgba(239, 68, 68, 0.5);
	border-radius: var(--radius-sm);
	background: rgba(239, 68, 68, 0.10);
	color: #fecaca;
	font-size: 0.9rem;
}
.hx-manual .bi { color: var(--danger); margin-right: 0.4rem; }
.hx-manual[hidden] { display: none; }

/* ── Switch board (exhibit 2) ──────────────────────────────────── */
.hx-controls {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 0.8rem;
	margin-top: 0.75rem;
}
.hx-group {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: rgba(12, 13, 17, 0.5);
	padding: 0.35rem 0.9rem 0.7rem;
	margin: 0;
	min-width: 0;
}
.hx-group legend {
	float: none;
	width: auto;
	padding: 0 0.4rem;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.hx-group legend .bi { color: var(--primary); margin-right: 0.25rem; }
.hx-switch {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	width: 100%;
	padding: 0.45rem 0.3rem;
	background: transparent;
	border: 0;
	color: var(--text-primary);
	font-size: 0.92rem;
	text-align: left;
	cursor: pointer;
	border-radius: var(--radius-sm);
}
.hx-switch:hover { background: rgba(255, 255, 255, 0.03); }
.hx-switch:disabled { opacity: 0.4; cursor: not-allowed; }
.hx-switch-label small { display: block; color: var(--text-muted); font-size: 0.75rem; }
.hx-switch-label .bi { margin-right: 0.3rem; color: var(--text-muted); }
.hx-track {
	flex: 0 0 auto;
	width: 52px;
	height: 28px;
	border-radius: 999px;
	background: rgba(239, 68, 68, 0.35);
	border: 1px solid var(--danger);
	position: relative;
	transition: background 0.25s ease, border-color 0.25s ease;
}
.hx-knob {
	position: absolute;
	top: 2px;
	left: 3px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #e8e8ec;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
	transition: transform 0.25s ease;
}
.hx-switch[aria-checked="true"] .hx-track {
	background: rgba(16, 185, 129, 0.4);
	border-color: var(--accent);
}
.hx-switch[aria-checked="true"] .hx-knob { transform: translateX(23px); }
.hx-switch-neutral .hx-track { background: rgba(122, 124, 133, 0.3); border-color: var(--border-light); }
.hx-switch-neutral[aria-checked="true"] .hx-track {
	background: rgba(255, 152, 0, 0.35);
	border-color: var(--primary);
}

/* ── Reduced motion & print ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.leash.active, .leash.up, .x-mark.shown .x-mark-inner,
	.bulb.lit .bulb-glass, .brain-halo, .is-burned .flame,
	.hw-node.is-syncing > rect, .tap-btn.tap-denied .tap-bg,
	.wire.route-live {
		animation: none;
	}
}
@media print {
	.hx-modes, .hx-standby-modes, .hx-presets, .hx-controls, .gd-top { display: none !important; }
	.hx-exhibit { break-inside: avoid-page; }
}
@media (max-width: 640px) {
	.hx-exhibit { padding: 1rem 0.9rem 1.1rem; }
	.hx-exhibit-head h2 { font-size: 1.12rem; }
}