/* components/diagram-nodes.css — diagrams, nodes, connectors */
.signal-map,
.signal-map > .wp-block-group__inner-container {
	display: grid;
	gap: 0.85rem;
	align-items: start;
}

.node {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.85rem;
	border: var( --card-border-width ) solid var( --stroke-strong );
	border-radius: var( --card-radius );
	background: var( --surface );
	box-shadow: var( --shadow-soft );
	transition:
		background-color 160ms ease,
		box-shadow 160ms ease,
		transform 160ms ease;
}

.node > .wp-block-group__inner-container {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.node-icon {
	display: grid;
	flex: 0 0 auto;
	width: 2.65rem;
	height: 2.65rem;
	place-items: center;
	border: 0;
	border-radius: var( --radius-sm );
	background: var( --surface );
	box-shadow: 0.16rem 0.16rem 0 var( --shadow-ink );
	color: var( --ink );
	font-family: var( --font-display );
	font-weight: 900;
	transition:
		box-shadow 160ms ease,
		transform 160ms ease;
}

.node-icon.is-symbol {
	background: var( --aqua );
	color: var( --on-highlight );
}

.node-icon .dashicons,
.card-icon .dashicons {
	width: 1.35rem;
	height: 1.35rem;
	font-size: 1.35rem;
	line-height: 1;
}

.node-icon,
.node-title,
.node-description {
	margin: 0;
}

.node-copy {
	min-width: 0;
}

.node-title {
	line-height: 1.2;
	font-family: var( --font-display );
	font-weight: 900;
}

.node-description {
	color: var( --muted );
	font-size: 0.9rem;
	line-height: 1.35;
}

.node.home .node-icon {
	background: var( --aqua );
	color: var( --ink );
}

.node.route .node-icon {
	background: var( --highlight );
	color: var( --on-highlight );
	text-shadow: none;
}

.node.route {
	background: var( --node-route-bg );
	color: var( --node-route-ink );
	box-shadow: 0.3rem 0.3rem 0 var( --coral );
}

.node.route .node-description {
	color: var( --node-route-muted );
}

.destination-grid,
.destination-grid > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 0.75rem;
	align-items: stretch;
}

.destination-grid .node {
	min-height: 0;
	height: 100%;
	padding: 0.75rem;
	align-self: stretch;
}

.destination-grid .node,
.destination-grid .node > .wp-block-group__inner-container {
	align-items: flex-start;
	gap: 0.62rem;
}

.destination-grid .node-icon {
	width: 2.32rem;
	height: 2.32rem;
	margin-top: 0.45rem;
}

.destination-node--rss .node-icon.is-symbol {
	background: var( --highlight );
}

:root[data-theme="dark"] .destination-node--social .node-icon.is-symbol {
	background: var( --surface-soft );
	color: var( --accent-strong );
}

@media ( prefers-color-scheme: dark ) {
	:root:not( [data-theme="light"] ) .node-icon.is-symbol,
	:root:not( [data-theme="light"] ) .node.home .node-icon,
	:root:not( [data-theme="light"] ) .node.route .node-icon,
	:root:not( [data-theme="light"] ) .destination-node--rss .node-icon.is-symbol,
	:root:not( [data-theme="light"] ) .destination-node--social .node-icon.is-symbol {
		background: var( --surface-soft );
		color: var( --accent-strong );
	}

	:root:not( [data-theme="light"] ) .node-icon .dashicons,
	:root:not( [data-theme="light"] ) .card-icon .dashicons {
		color: var( --accent-strong );
	}

	:root:not( [data-theme="light"] ) .theme-toggle:hover {
		color: var( --ink );
	}
}

:root[data-theme="dark"] .node-icon.is-symbol,
:root[data-theme="dark"] .node.home .node-icon,
:root[data-theme="dark"] .node.route .node-icon,
:root[data-theme="dark"] .destination-node--rss .node-icon.is-symbol,
:root[data-theme="dark"] .destination-node--social .node-icon.is-symbol {
	background: var( --surface-soft );
	color: var( --accent-strong );
}

:root[data-theme="dark"] .node-icon .dashicons,
:root[data-theme="dark"] .card-icon .dashicons {
	color: var( --accent-strong );
}

:root[data-theme="dark"] .theme-toggle:hover {
	color: var( --ink );
}

:root[data-theme="dark"] .card-icon {
	color: var( --accent-strong );
}

@media ( prefers-color-scheme: dark ) {
	:root:not( [data-theme="light"] ) .card-icon {
		color: var( --accent-strong );
	}
}

.connector {
	position: relative;
	height: 2.2rem;
}

.connector::before,
.connector::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX( -50% );
}

.connector::before {
	top: 0;
	bottom: 0;
	border-left: 3px solid var( --connector-line );
}

.connector::after {
	bottom: -0.05rem;
	width: 0.85rem;
	height: 0.85rem;
	border-right: 3px solid var( --connector-arrow );
	border-bottom: 3px solid var( --connector-arrow );
	transform: translateX( -50% ) rotate( 45deg );
}