/**
 * Obsidian Consortium — Wormhole Mapper styles
 * Version: 5.1.0
 */

.obcn-wh-mapper {
	background: var(--obcn-obsidian-black);
	border: 1px solid rgba(0, 240, 255, 0.2);
	border-radius: var(--obcn-radius);
	overflow: hidden;
}

.obcn-wh-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	padding: 12px 16px;
	background: var(--obcn-midnight-blue);
	border-bottom: 1px solid rgba(0, 240, 255, 0.2);
}

.obcn-wh-toolbar-group {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}

.obcn-wh-canvas-wrap {
	position: relative;
	background: var(--obcn-obsidian-black);
	height: 70vh;
	min-height: 500px;
	overflow: hidden;
}

.obcn-wh-canvas {
	width: 100%;
	height: 100%;
	display: block;
	cursor: grab;
	user-select: none;
}

.obcn-wh-canvas:active { cursor: grabbing; }

/* Minimap — top-right corner */
.obcn-wh-minimap {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 180px;
	height: 140px;
	background: rgba(10, 10, 26, 0.85);
	border: 1px solid var(--obcn-electric-cyan);
	border-radius: var(--obcn-radius);
	overflow: hidden;
	backdrop-filter: blur(8px);
	pointer-events: none;
}

.obcn-wh-minimap-content {
	position: relative;
	width: 100%;
	height: 100%;
}

/* Type picker popover */
.obcn-wh-type-picker {
	position: absolute;
	top: 80px;
	right: 210px;
	width: 280px;
	max-height: 320px;
	background: var(--obcn-midnight-blue);
	border: 1px solid var(--obcn-electric-cyan);
	border-radius: var(--obcn-radius);
	box-shadow: var(--obcn-shadow-deep);
	z-index: 10;
}

.obcn-wh-type-picker input {
	width: 100%;
	background: var(--obcn-deep-surface);
	border: none;
	border-bottom: 1px solid rgba(0, 240, 255, 0.2);
	padding: 10px 12px;
	color: var(--obcn-light-text);
	font-family: var(--obcn-font-body);
}

.obcn-wh-type-list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 260px;
	overflow-y: auto;
}

.obcn-wh-type-list li {
	padding: 8px 12px;
	cursor: pointer;
	border-bottom: 1px solid rgba(0, 240, 255, 0.05);
	display: flex;
	justify-content: space-between;
	gap: 8px;
	font-size: 13px;
}

.obcn-wh-type-list li:hover {
	background: rgba(0, 240, 255, 0.1);
}

.obcn-wh-type-list li strong {
	color: var(--obcn-electric-cyan);
	font-family: var(--obcn-font-mono);
}

/* Connection panel — bottom of mapper */
.obcn-wh-conn-panel {
	background: var(--obcn-midnight-blue);
	border-top: 1px solid var(--obcn-electric-cyan);
	padding: 20px;
}

.obcn-wh-conn-panel h3 {
	margin: 0 0 16px;
	color: var(--obcn-electric-cyan);
}

.obcn-wh-conn-panel h4 {
	margin: 16px 0 8px;
	font-size: 14px;
	text-transform: uppercase;
	color: var(--obcn-electric-cyan);
}

.obcn-wh-rolling-actions {
	display: flex;
	gap: 8px;
	margin-top: 12px;
	flex-wrap: wrap;
}

.obcn-wh-rolling-output {
	margin-top: 12px;
}

.obcn-wh-rolling-output .obcn-table {
	font-size: 12px;
}

/* SVG system nodes — additional CSS (most styling is in JS attributes) */
.obcn-wh-canvas text { pointer-events: none; }

/* Connection labels are positioned absolutely */
.obcn-wh-canvas line { transition: stroke 0.3s ease; }