#settingsGroup.settings-panel {
	position: absolute;
	left: 56px;
	top: 0;
	min-width: 180px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 2px 12px rgba(0,0,0,0.14);
	padding: 14px 12px;
	z-index: 101;
	display: none;
}
#settingsGroup.settings-panel.open {
	display: block;
}
body { margin: 0; overflow: hidden; }
canvas { display: block; touch-action: none; }
/* Shared variables */
:root { --toolbox-width: 56px; }
/* Modify HUD (2D) */
#modifyHUD {
	position: fixed;
	left: calc(24px + var(--toolbox-width) + 12px);
	top: 50%; transform: translateY(-50%) translateX(-8px);
	background: rgba(255,255,255,0.98);
	border: 1px solid #e0e0e0;
	border-radius: 12px;
	box-shadow: 0 2px 12px rgba(0,0,0,0.10);
	padding: 10px 12px; min-width: 220px;
	z-index: 120;
	opacity: 0; pointer-events: none;
	transition: opacity 180ms cubic-bezier(.3,.7,.2,1), transform 220ms cubic-bezier(.2,.8,.2,1);
}
#modifyHUD.show { opacity: 1; pointer-events: auto; transform: translateY(-50%) translateX(0); }
#modifyHUD .mh-title { font: 600 12px/1.2 system-ui, sans-serif; color:#444; letter-spacing:.06em; text-transform:uppercase; margin-bottom:6px; }
#modifyHUD .mh-row { display:flex; align-items:center; gap:8px; margin:8px 0; }
#modifyHUD .mh-label { font: 12px/1.2 system-ui, sans-serif; color:#333; min-width:64px; }
#modifyHUD .mh-joins { display:flex; gap:6px; }
#modifyHUD .pill { border:1px solid #ddd; background:#f7f7f7; border-radius:16px; padding:4px 10px; font:12px/1.2 system-ui; color:#333; cursor:pointer; }
#modifyHUD .pill[aria-pressed="true"] { background:#111; color:#fff; border-color:#111; }
#modifyHUD .mh-stepper { display:flex; align-items:center; gap:6px; }
#modifyHUD .mh-stepper input { width:80px; padding:4px 6px; border:1px solid #ddd; border-radius:8px; font:13px system-ui; }
#modifyHUD .mh-unit { font:12px system-ui; color:#666; }
#modifyHUD .icon-btn.small { width:26px; height:26px; min-width:26px; min-height:26px; border-radius:8px; }
#modifyHUD .mh-hint { font:11px/1.2 system-ui; color:#666; opacity:.9; margin-top:4px; }
#modifyHUD .mh-x { position:absolute; right:6px; top:6px; width:22px; height:22px; border-radius:50%; border:1px solid #ddd; background:#f2f2f2; color:#333; cursor:pointer; }
#modifyHUD .mh-x:hover { background:#e9e9e9; }
/* Mobile/Tablet/VR delete bar (hidden by default; JS toggles display) */
#mobileDeleteBar {
	display: none;
	position: fixed; /* stay in viewport; JS sets left/top to sit under toolbox */
	left: 24px;
	top: 0;
	transform: none;
	background: rgba(255,255,255,0.96);
	border: 1px solid #e0e0e0;
	border-radius: 14px; /* match toolbox */
	box-shadow: 0 2px 12px rgba(0,0,0,0.10);
	width: var(--toolbox-width);
	padding: 8px 4px; /* match toolbox vertical padding */
	z-index: 120;
	align-items: center;
	justify-content: center;
}
#mobileDeleteBar .icon-btn {
	width: 48px; /* fill most of the toolbox width */
	height: 48px;
	min-width: 48px;
	min-height: 48px;
	border-radius: 12px;
}
#mobileDeleteBar .icon-btn svg { width: 24px; height: 24px; }
@media (max-width: 640px) {
	/* keep same sizing; media left for future overrides */
}
/* Placing popup styles */
#placingPopup {
	position: fixed;
	left: calc(24px + var(--toolbox-width) + 12px);
	top: 50%;
	transform: translateY(-50%);
	background: rgba(255,255,255,0.98);
	border: 1px solid #e0e0e0;
	border-radius: 12px;
	box-shadow: 0 2px 12px rgba(0,0,0,0.10);
	padding: 10px 12px 10px 12px;
	min-width: 160px;
	z-index: 120;
}
/* Ensure custom pinch/zoom works on Columbarium canvas */
#gridStage {
	touch-action: none;
	-ms-touch-action: none; /* IE/Edge legacy */
}
#placingPopup .placing-title {
	font-family: sans-serif;
	font-size: 11px;
	color: #666;
	letter-spacing: .06em;
	text-transform: uppercase;
	margin-bottom: 4px;
}
#placingPopup .placing-name {
	font-family: sans-serif;
	font-size: 13px;
	color: #111;
	max-width: 260px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#placingPopup .placing-cancel {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 22px;
	height: 22px;
	border: none;
	border-radius: 50%;
	background: #f2f2f2;
	color: #333;
	cursor: pointer;
}
#placingPopup .placing-cancel:hover { background: #e8e8e8; }

/* Page fade transitions: fade through black using an overlay */
html, body { height: 100%; }
/* iOS Dynamic Island full-bleed: use html background to paint safe areas */
html { background: #1e1e1e; }
body { background: #1e1e1e; }
/* Columbarium variant background */
body.columbarium { background: #111; }
#pageFade {
	position: fixed;
	inset: 0;
	background: #000;
	opacity: 0; /* start transparent so site is visible even if JS fails */
	pointer-events: none;
	z-index: 99999;
	transition: opacity 160ms ease;
}
body.page-leave #pageFade { opacity: 1; }
/* Unify corner radius for all main UI panels */
#ui-container, #toolbox {
	position: absolute;
	left: 24px;
	right: auto;
	z-index: 10;
	background: rgba(255,255,255,0.95);
	padding: 10px;
	border-radius: 14px;
	font-family: sans-serif;
	font-size: 14px;
	max-width: 320px;
	min-width: 180px;
	box-sizing: border-box;
	box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
#ui-container { top: 24px; left: 24px; right: auto; max-width: 320px; z-index: 12; }
/* Hide legacy main UI panel (kept in DOM for script refs only) */
#ui-container { display: none !important; pointer-events: none; }
#toolbox { display: block; left: 24px; right: auto; z-index: 11; position: fixed; top: 50%; transform: translateY(-50%); }
.leaflet-container { z-index: 1; }
#mapModalBackdrop { z-index: 1000; }
canvas { z-index: 0; }

/* Error banner for surfacing runtime issues */
#error-banner {
	position: fixed;
	left: 50%;
	top: 16px;
	transform: translateX(-50%);
	background: #d32f2f;
	color: #fff;
	padding: 8px 12px;
	border-radius: 10px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.25);
	z-index: 100000;
	font: 600 13px/1.3 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	max-width: min(92vw, 820px);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Texture Editor popup base styles (override inline when needed) */
#textureEditor {
	backdrop-filter: blur(8px) saturate(1.05) contrast(1.02);
	-webkit-backdrop-filter: blur(8px) saturate(1.05) contrast(1.02);
	box-sizing: border-box;
}
#textureEditor .te-header { background: linear-gradient(to bottom, rgba(255,255,255,0.18), rgba(255,255,255,0)); }
#textureEditor .te-body { max-height: calc(80vh - 120px); overflow: auto; box-sizing: border-box; }
#textureEditor .btn { padding: 6px 10px; border-radius: 8px; border: 1px solid #ddd; background: #f8f8f8; cursor: pointer; }
#textureEditor .btn.primary { background: #222; color: #fff; border-color: #222; }
#textureEditor input[type="number"],
#textureEditor input[type="file"] { width: 100%; box-sizing: border-box; padding: 4px 6px; border:1px solid #ddd; border-radius:6px; background: rgba(255,255,255,0.9); }
#textureEditor label { display:flex; flex-direction:column; gap:4px; font-size:12px; color:#333; overflow: hidden; }
#textureEditor .te-grid-2 { display:grid; grid-template-columns: repeat( auto-fit, minmax(120px, 1fr) ); gap:8px; align-items: start; }
/* Small icons inside labels */
#textureEditor .te-grid-2 label { position: relative; padding-left: 22px; }
#textureEditor .te-grid-2 label .te-ico { position:absolute; left: 4px; top: 50%; transform: translateY(-50%); width:14px; height:14px; opacity:0.9; }
/* Make file inputs tighter */
#textureEditor .te-grid-2 input[type="file"] { padding: 2px 4px; }
#textureEditor .te-grid-2 input[type="text"] { width: 100%; margin: 2px 0 4px; padding: 3px 5px; border:1px solid #ddd; border-radius:6px; font-size: 12px; }
/* Compact mode tightens spacing and fonts */
#textureEditor.compact .te-body { padding: 8px 10px; }
#textureEditor.compact .btn { padding: 4px 8px; border-radius: 6px; }
#textureEditor.compact label { font-size: 11px; gap: 2px; }
#textureEditor.compact input[type="number"],
#textureEditor.compact input[type="file"] { padding: 3px 5px; }
#textureEditor.compact .te-grid-2 { gap:6px; grid-template-columns: repeat( auto-fit, minmax(100px, 1fr) ); }
/* Hide text labels and tighten header in compact mode */
#textureEditor.compact .te-label { display: none !important; }
#textureEditor.compact .te-header { padding:6px 8px !important; }
#textureEditor.compact .te-header .btn { padding: 0 6px; height:22px; }
#textureEditor.compact .te-ico { opacity: 0.95; }
@media (max-width: 420px) {
	#textureEditor { width: 92vw !important; left: 4vw !important; right: 4vw !important; }
	#textureEditor .te-body { max-height: calc(100vh - 160px); }
	#textureEditor .te-grid-2 { grid-template-columns: 1fr; }
}


/* AnArch glitch overlay */
#anarchOverlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	pointer-events: auto;
	opacity: 0; /* safe default */
	/* Fade in immediately, fade out after the text sequence completes */
	animation: aoOverlayIn 140ms ease forwards, aoOverlayOut 220ms ease 3800ms forwards;
}
#anarchOverlay .ao-bg {
	position: absolute; inset: 0; background: #000; opacity: 0.95;
}
#anarchOverlay .ao-scanlines {
	position: absolute; inset: 0; background-image:
	  linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
	background-size: 100% 3px; mix-blend-mode: screen; opacity: .5;
	animation: aoVShift 600ms linear infinite;
}
#anarchOverlay.crt { overflow: hidden; }
#anarchOverlay.crt::before {
	content: '';
	position: absolute; inset: -4%;
	background: radial-gradient(ellipse at center, rgba(255,255,255,0.06) 0%, rgba(0,0,0,0.15) 70%, rgba(0,0,0,0.6) 100%);
	pointer-events: none;
	transform: scale(1.02);
	filter: blur(0.3px);
}
#anarchOverlay .ao-vignette { position:absolute; inset:-2%; pointer-events:none; box-shadow: inset 0 0 180px rgba(0,0,0,0.75); }
#anarchOverlay .ao-flash {
		/* Repurpose as a subtle noise/glitch overlay instead of a bright flash */
		position: absolute; inset: 0; pointer-events: none; opacity: 0;
		background:
			repeating-linear-gradient(
				0deg,
				rgba(255,255,255,0.03) 0px,
				rgba(255,255,255,0.03) 1px,
				rgba(0,0,0,0) 2px
			),
			repeating-linear-gradient(
				90deg,
				rgba(255,255,255,0.02) 0px,
				rgba(255,255,255,0.02) 1px,
				rgba(0,0,0,0) 3px
			);
		mix-blend-mode: screen;
}
#anarchOverlay.ao-burst .ao-flash { animation: aoNoiseFlicker 180ms steps(3) 1; }
#anarchOverlay.ao-burst .ao-center { animation: aoBurstJitter 160ms steps(2) 1; }
#anarchOverlay .ao-center {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	display: inline-block; white-space: nowrap; overflow: visible; z-index: 2;
	filter: drop-shadow(0 8px 24px rgba(0,0,0,.6));
	transition: filter 120ms ease;
	transform-style: preserve-3d;
}
#anarchOverlay .ao-static { position:absolute; inset:0; opacity:0; pointer-events:none; z-index: 3; background:
	repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px, rgba(0,0,0,0) 2px),
	repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, rgba(0,0,0,0) 3px);
	mix-blend-mode: screen;
	animation: aoStaticSnow 120ms steps(3) infinite;
}
#anarchOverlay .ao-bars { position:absolute; inset:0; opacity:0; pointer-events:none; z-index: 4; background:
	linear-gradient(90deg,
		#ffffff 0% 14.285%,
		#ffff00 14.285% 28.57%,
		#00ffff 28.57% 42.85%,
		#00ff00 42.85% 57.14%,
		#ff00ff 57.14% 71.42%,
		#ff0000 71.42% 85.71%,
		#0000ff 85.71% 100%
	);
	filter: saturate(1.1) contrast(1.05);
}
#anarchOverlay.show-static .ao-static { opacity: 0.28; }
#anarchOverlay.show-bars .ao-bars { opacity: 0.92; animation: aoBarsRoll 900ms linear infinite; }
/* Keep center visible during glitches for combined effect */
/* Add mild RGB split when bars visible for extra drama */
#anarchOverlay.show-bars .ao-base::before { transform: translate(-1px, 0); opacity: .32; }
#anarchOverlay.show-bars .ao-base::after { transform: translate(1px, 0); opacity: .32; }
#anarchOverlay .ao-line { position: relative; display: inline-block; transform: translateX(var(--centerShift, 0)); }
#anarchOverlay .ao-base { display: inline-block; }
#anarchOverlay .ao-ext, #anarchOverlay .ao-y { position: absolute; left: calc(100% + 0.02em); }
#anarchOverlay .ao-word { position: relative; display: inline-block; font-family: 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif; font-weight: 900; letter-spacing: 0.02em; }
/* Re-assert absolute positioning after generic ao-word rule to avoid cascade override */
#anarchOverlay .ao-ext, #anarchOverlay .ao-y { position: absolute; left: calc(100% + 0.02em); top: 0; }
#anarchOverlay .ao-base { font-size: clamp(42px, 8vw, 120px); color: #fff; text-shadow: 0 0 18px rgba(255,255,255,0.15), 0 0 48px rgba(0,153,255,0.25); }
#anarchOverlay .ao-ext { font-size: clamp(42px, 8vw, 120px); color: #66f; opacity: 0; transform: translateY(-120%); }
#anarchOverlay .ao-y { font-size: clamp(42px, 8vw, 120px); color: #f55; opacity: 0; transform: translateY(-160%); }
/* Start text animations only after overlay is in the DOM to avoid race conditions */
#anarchOverlay.run .ao-ext { animation: aoExtSlideIn 800ms 600ms cubic-bezier(.2,.9,.1,1) forwards, aoExtSlideOut 360ms 1700ms cubic-bezier(.4,.0,.2,1) forwards; }
#anarchOverlay.run .ao-y { animation: aoYDrop 520ms 1820ms cubic-bezier(.2,.9,.1,1) forwards; }
/* When extension is visible, shift left by half its width to keep phrase centered */
#anarchOverlay.ext-visible { --centerShift: calc(-0.5 * var(--extW, 0px)); }
/* Force immediate switch to Archy when .to-archy is set (post bars) */
#anarchOverlay.to-archy .ao-ext { opacity: 0 !important; transform: translateY(-120%) !important; animation: none !important; }
#anarchOverlay.to-archy .ao-y { opacity: 1 !important; transform: translateY(0) !important; animation: none !important; }

/* RGB split glitch on base word */
#anarchOverlay .ao-base::before, #anarchOverlay .ao-base::after {
	content: attr(data-text);
	position: absolute; left: 0; top: 0; color: #0ff; mix-blend-mode: screen; opacity: .25; filter: blur(0.6px);
}
#anarchOverlay .ao-base::after { color: #f0f; transform: translate(0,0); }
body.anarch-active .ao-base { animation: aoGlitch 1200ms steps(2) 2; }

/* Keyframes */
@keyframes aoOverlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes aoOverlayOut { 99% { opacity: 1; } 100% { opacity: 0; } }
@keyframes aoVShift { 0% { background-position-y: 0; } 100% { background-position-y: 3px; } }
@keyframes aoFlash { from { opacity: 0.4; } to { opacity: 0; } } /* kept for backwards compat if referenced */
@keyframes aoStaticSnow {
	0% { background-position: 0 0, 0 0; }
	25% { background-position: 0 1px, 1px 0; }
	50% { background-position: 0 2px, 0 1px; }
	75% { background-position: 0 3px, -1px 0; }
	100% { background-position: 0 0, 0 0; }
}
@keyframes aoBarsRoll {
	0% { transform: translateY(0); }
	50% { transform: translateY(1.5px); }
	100% { transform: translateY(0); }
}
@keyframes aoCenterGlitchOut {
	from { opacity: 1; filter: none; }
	to { opacity: 0.15; filter: blur(0.2px) saturate(0.9); }
}

/* Mobile typography tuning to avoid off-screen overflow */
@media (max-width: 480px) {
	#anarchOverlay .ao-base,
	#anarchOverlay .ao-ext,
	#anarchOverlay .ao-y { font-size: clamp(32px, 6.6vw, 100px); letter-spacing: 0.01em; }
	#anarchOverlay .ao-ext, #anarchOverlay .ao-y { left: calc(100% + 0.01em); }
}

/* Short-height (landscape) phones/tablets: dock toolboxes and cap panel heights */
@media (max-height: 420px) {
	/* Dock toolboxes to top-left and remove vertical centering to avoid cutoff */
	#toolbox, #cToolbox {
		position: fixed;
		top: max(12px, env(safe-area-inset-top, 0px) + 12px);
		left: max(12px, env(safe-area-inset-left, 0px) + 12px);
		transform: none;
	}
	/* Limit slide-out height and enable scrolling if content exceeds viewport */
	.collapse.open {
		max-height: 220px;
		overflow: auto;
	}
	/* Ensure floating popups fit and can scroll on short screens */
	#materialsPopup, #legendPopup, #visibilityPopup {
		max-height: calc(100vh - 24px);
		overflow: auto;
	}
}
@keyframes aoNoiseFlicker {
	0% { opacity: 0.06; }
	40% { opacity: 0.22; }
	60% { opacity: 0.12; }
	100% { opacity: 0.08; }
}
@keyframes aoBurstJitter {
	0% { transform: translate(-50%, -50%) translateX(0) skewX(0deg); }
	50% { transform: translate(-50%, -50%) translateX(1.5px) skewX(0.6deg); }
	100% { transform: translate(-50%, -50%) translateX(-0.8px) skewX(-0.4deg); }
}
@keyframes aoGlitch {
	0% { transform: translate(0,0); }
	10% { transform: translate(-2px, 0.5px); }
	20% { transform: translate(1.5px, -1px) skewX(0.5deg); }
	30% { transform: translate(-1px, 1px); }
	40% { transform: translate(2px, -0.5px); }
	50% { transform: translate(-1.5px, 0.5px); }
	60% { transform: translate(0.5px, -1px); }
	70% { transform: translate(-0.5px, 0.5px); }
	80% { transform: translate(1px, -0.5px); }
	90% { transform: translate(-1px, 0.5px); }
	100% { transform: translate(0,0); }
}
@keyframes aoExtSlideIn { from { opacity: 0; transform: translateY(-120%); }
	60% { opacity: 1; transform: translateY(0); }
	100% { opacity: 1; transform: translateY(0); } }
@keyframes aoExtSlideOut { from { opacity: 1; transform: translateY(0); }
	100% { opacity: 0; transform: translateY(-120%); } }
@keyframes aoYDrop { from { opacity: 0; transform: translateY(-160%); }
  60% { opacity: 1; transform: translateY(0); }
  100% { opacity: 1; transform: translateY(0); } }

/* Subtle freeze/jitter on underlying canvas during sequence */
body.anarch-active canvas, body.anarch-active #gridStage {
		will-change: transform, filter;
		animation: aoFreezeJitter 110ms steps(1) 24;
		filter: brightness(.98) contrast(1.05) saturate(.95);
}
/* Respect reduced motion unless user explicitly triggers and we force it for this effect */
@media (prefers-reduced-motion: reduce) {
	body:not(.anarch-force-anim) #anarchOverlay,
	body:not(.anarch-force-anim) #anarchOverlay * {
		animation: none !important;
		transition: none !important;
	}
}
@keyframes aoFreezeJitter {
		0% { transform: translate(0,0); }
		25% { transform: translate(0.5px, 0); }
		50% { transform: translate(-0.5px, 0); }
		75% { transform: translate(0, 0.5px); }
		100% { transform: translate(0,0); }
}


/* Prevent panels from blocking clicks outside their bounds */
#toolbox, #ui-container { pointer-events: auto; }
/* Full-bleed canvas sizing; prefer dynamic viewport units when supported */
body > canvas {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
}
@supports (height: 100dvh) {
	body > canvas { width: 100dvw; height: 100dvh; }
}
#objectList div { display: flex; align-items: center; margin-bottom: 4px; }
#objectList input[type="checkbox"] { margin-right: 6px; }
#objectList span { flex: 1; cursor: pointer; }
body.anarch-active .floating-nav { filter: blur(0.2px) brightness(.95); }
@media (max-width: 600px) {
	#ui-container {
		left: 0; right: 0; max-width: 100vw; min-width: 0; padding: 6px; font-size: 12px;
		box-shadow: none;
	}
	#ui-container { top: 0; }
	/* On small screens, dock toolboxes near the top-left to avoid overlap */
	#toolbox, #cToolbox {
		position: fixed;
		top: max(12px, env(safe-area-inset-top, 0px) + 12px);
		left: max(12px, env(safe-area-inset-left, 0px) + 12px);
		transform: none;
	}
	#placingPopup {
		left: max(12px, env(safe-area-inset-left, 0px) + 12px);
		top: calc(max(12px, env(safe-area-inset-top, 0px) + 12px) + 56px + 8px);
		transform: none;
	}
	/* Keep texture editor within viewport on small screens */
	#textureEditor { max-height: calc(100vh - 24px); overflow: auto; }
	button, select, input { font-size: 14px !important; }
}
/* Icon button styling for toolbar icons */
.icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px; height: 40px;
	min-width: 40px; min-height: 40px;
	margin-right: 8px;
	background: transparent;
	border: none;
	box-shadow: none;
	cursor: pointer;
}
.icon-btn:hover { background: transparent; }
.icon-btn:focus-visible {
	/* Use inset ring to avoid overlapping neighbors */
	outline: none;
	box-shadow: inset 0 0 0 2px #888;
	border-radius: 6px;
}
/* Map modal */
#mapModalBackdrop {
	position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: none; align-items: center; justify-content: center; z-index: 1000;
}
#mapModal {
	background: #fff; width: min(92vw, 820px); height: min(80vh, 620px); border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,0.25); display: flex; flex-direction: column; overflow: hidden;
}
#mapModalHeader { padding: 8px 12px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid #eee; }
#mapModalHeader input { flex: 1; padding: 6px 8px; font-size: 14px; border: 1px solid #ddd; border-radius: 4px; }
#mapContainer { flex: 1; }
#mapModalFooter { padding: 8px 12px; border-top: 1px solid #eee; display: flex; gap: 8px; justify-content: space-between; align-items: center; }
#mapModalFooter .btn { padding: 6px 10px; font-size: 14px; border: 1px solid #ccc; border-radius: 4px; background: #f7f7f7; cursor: pointer; }
#mapModalFooter .btn.primary { background: #222; color: #fff; border-color: #222; }
.icon-btn svg { width: 22px; height: 22px; display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,1px,1px); white-space: nowrap; border: 0; }
/* Map draw selection styles */
.leaflet-container.crosshair { cursor: crosshair; }
.selection-rect { pointer-events:none; border:2px dashed #0078ff; background:rgba(0,120,255,0.08); }
/* Toolbox: snap to content width and stack vertically */
/* Shrink toolbox to icons only */
#toolbox {
	display: none;
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	left: 24px;
	z-index: 11;
	background: rgba(255,255,255,0.96);
	box-shadow: 0 2px 12px rgba(0,0,0,0.10);
	padding: 8px 4px;
	min-width: 0;
	max-width: none;
	width: var(--toolbox-width);
	box-sizing: border-box;
	border-radius: 14px;
	border: 1px solid #e0e0e0;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	gap: 4px;
	max-height: none;
	overflow: visible;
}
#toolbox .icon-btn {
	display: flex;
	margin: 0 auto;
	width: 36px;
	height: 36px;
	min-width: 36px;
	min-height: 36px;
	background: transparent;
	border-radius: 12px;
	box-shadow: none;
}
#toolbox .icon-btn:last-child { margin-bottom: 0; }
/* Utilities popup floats right of gear */
/* Remove popup style for utilities, use collapse animation only */
/* Collapsible groups */
.collapse {
	position: static;
	min-width: 0;
	width: 100%;
	background: transparent; /* closed state has no background */
	border-radius: 8px;
	box-shadow: none; /* closed state has no shadow */
	padding: 0; /* closed state has no padding to avoid extra spacing */
	font-size: 13px;
	z-index: 101;
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	transform: translateY(-8px) scale(0.98);
	transition: max-height 180ms cubic-bezier(.4,.2,.2,1), opacity 120ms cubic-bezier(.4,.2,.2,1), transform 180ms cubic-bezier(.4,.2,.2,1);
}
.collapse.open {
	display: block;
	max-height: 320px; /* more compact */
	opacity: 1;
	transform: translateY(0) scale(1);
	padding: 6px 4px; /* restore padding when open */
	background: #f9f9f9; /* restore background when open */
	box-shadow: 0 1px 6px rgba(0,0,0,0.08); /* restore shadow when open */
	overflow-y: auto; /* scroll vertically if needed */
	overflow-x: hidden; /* avoid horizontal scrollbars in narrow panels */
	box-sizing: border-box; /* include padding & border in set width */
}
/* In the main toolbox, nudge the open panel slightly down and right for visual separation */
#toolbox .collapse.open {
	margin-top: 4px;                      /* avoid overlapping the parent button outline */
	transform: translate(6px, 0) scale(1);/* subtle horizontal offset to the right */
	border: 1px solid #e0e0e0;            /* match toolbox subtle border */
	border-radius: 12px;                  /* match toolbox corners */
	position: relative; z-index: 120;     /* ensure it sits above the parent button outline */
	overflow-y: auto;                     /* vertical scroll only */
	overflow-x: hidden;                   /* no horizontal scrollbar */
	width: var(--toolbox-width);          /* match parent toolbox width */
	box-sizing: border-box;               /* ensure exact width including border/padding */
}
/* Apply same visual separation to Columbarium toolbox slide-outs */
#cToolbox .collapse.open {
	margin-top: 4px;
	transform: translate(6px, 0) scale(1);
	border: 1px solid #e0e0e0;
	border-radius: 12px;
	position: relative; z-index: 120;
	width: var(--toolbox-width);          /* match parent toolbox width */
	box-sizing: border-box;               /* ensure exact width including border/padding */
	overflow-y: auto;                     /* vertical scroll only */
	overflow-x: hidden;                   /* no horizontal scrollbar */
}

/* Reusable vertical slider (used by 2D Eraser and 2D Lineweight) */
.vslider {
	appearance: slider-vertical;
	-webkit-appearance: slider-vertical;
	writing-mode: bt-lr;
	width: 18px;
	height: 80px;
}
.vslider::-webkit-slider-thumb { cursor: ns-resize; }
.vslider::-moz-range-thumb { cursor: ns-resize; }
/* 2D/3D toolbox collapse row layout and centering */
#toolbox .collapse .row { display:flex; align-items:center; justify-content: center; gap: 8px; padding: 4px 0; }
#toolbox .collapse .row.center { justify-content: center; }
#toolbox .collapse .row.end { justify-content: flex-end; }
#toolbox .collapse .icon-btn { margin: 0; }
/* If buttons are direct children (no .row wrapper), center them */
#toolbox .collapse > .icon-btn { margin-left: auto; margin-right: auto; }
/* Resize color pickers for settings group in toolbox */
#settingsGroup input[type="color"] {
	width: 28px;
	height: 28px;
	padding: 0;
	border: none;
	background: none;
	vertical-align: middle;
	margin-left: 0;
	box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
/* Ensure consistent color picker style in both 2D and 3D toolboxes */
#toolbox input[type="color"],
#cToolbox input[type="color"] {
	width: 28px;
	height: 28px;
	padding: 0;
	border: none;
	background: none;
	box-shadow: 0 1px 4px rgba(0,0,0,0.08);
	border-radius: 6px;
}
/* Compact settings layout to fit toolbox width */
#settingsGroup .settings-compact { display:flex; flex-direction:column; gap:6px; margin-top:6px; }
#settingsGroup .settings-compact .field { display:flex; flex-direction:column; gap:4px; align-items:center; text-align:center; }
#settingsGroup .settings-compact .field label { font-size:12px; color:#333; text-align:center; }
#settingsGroup .settings-compact .field input[type="number"] {
	width: 44px; /* fit within 56px toolbox width minus padding */
	box-sizing: border-box;
	padding: 4px 6px;
	font-size: 12px;
	border: 1px solid #ddd;
	border-radius: 6px;
	background: #fff;
	text-align: center;
	margin: 0 auto;
}
/* Center the Columbarium Import child horizontally */
#cImportGroup { display: flex; justify-content: center; }
#cImportGroup .icon-btn { margin: 0 auto; }
#settingsGroup .settings-compact .icon-btn { margin: 4px auto 0; }

/* Subtle page-edge vignette overlay */
.page-vignette {
	position: fixed;
	inset: 0;
	pointer-events: none;
	/* place above WebGL canvas (z=0) but below toolbox and other UI */
	z-index: 5;
}
.page-vignette::before {
	content: '';
	position: absolute;
	inset: 0;
	/* soft edge fade using inset box-shadow for performance */
	box-shadow:
		inset 0 0 180px rgba(0,0,0,0.45),
		inset 0 0 60px rgba(0,0,0,0.12);
}
/* Columbarium: stronger black vignette for void-like illumination */
body.columbarium .page-vignette::before {
	box-shadow:
		inset 0 0 240px rgba(0,0,0,0.75),
		inset 0 0 120px rgba(0,0,0,0.6),
		inset 0 0 420px rgba(0,0,0,0.6);
}
/* Community: match the same edge fade as personal for consistency */
body.community .page-vignette::before {
	box-shadow:
		inset 0 0 240px rgba(0,0,0,0.75),
		inset 0 0 120px rgba(0,0,0,0.6),
		inset 0 0 420px rgba(0,0,0,0.6);
}
/* On mobile/touch, ease the vignette so content isn't overly dark */
@media (max-width: 820px), (max-height: 700px), (hover: none), (pointer: coarse) {
	body.columbarium .page-vignette::before {
		/* use smaller blurs and slightly lower opacity on compact viewports */
		box-shadow:
			inset 0 0 160px rgba(0,0,0,0.6),
			inset 0 0 80px rgba(0,0,0,0.45),
			inset 0 0 260px rgba(0,0,0,0.45);
	}
	body.community .page-vignette::before {
		box-shadow:
			inset 0 0 160px rgba(0,0,0,0.6),
			inset 0 0 80px rgba(0,0,0,0.45),
			inset 0 0 260px rgba(0,0,0,0.45);
	}
}
.toggle-btn[aria-pressed="true"],
.icon-btn[aria-pressed="true"] {
	/* Inset ring prevents pressed state from bleeding into adjacent buttons */
	outline: none;
	box-shadow: inset 0 0 0 2px #222;
	border-radius: 6px;
}
/* Ensure pressed states are visible inside the toolbox despite earlier box-shadow resets */
#toolbox .icon-btn[aria-pressed="true"],
#toolbox .toggle-btn[aria-pressed="true"] {
	box-shadow: inset 0 0 0 2px #222;
	background: rgba(0,0,0,0.03);
}
/* Ensure focus visible ring shows inside toolbox */
#toolbox .icon-btn:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 2px #888;
	border-radius: 6px;
}

/* Make the Object Select icon a touch bolder */
#toggle2DSelect svg { width: 24px; height: 24px; }
#toggle2DSelect svg path { stroke: #222; stroke-width: 1.6; stroke-linejoin: round; }

/* Floating navigation button */
.floating-nav {
	position: fixed;
	right: 20px;
	bottom: 20px;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(24,24,24,0.9);
	color: #fff;
	border: 1px solid #2a2a2a;
	box-shadow: 0 8px 24px rgba(0,0,0,0.25);
	text-decoration: none;
	z-index: 200;
	transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.floating-nav:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,0.35); background: rgba(28,28,28,0.95); }
.floating-nav svg { width: 24px; height: 24px; display:block; }

/* Columbarium popup animated children */
#columbariumPopup .floating-nav {
	position: static; right: auto; bottom: auto; top: auto; left: auto;
	width: 52px; height: 52px; border-radius: 50%;
	transform-origin: top right;
	transform: translateY(-8px) scale(0.85); opacity: 0;
	transition: transform .22s cubic-bezier(.2,.8,.25,1), opacity .22s ease;
}
#columbariumPopup[data-open="true"] .floating-nav { transform: translateY(0) scale(1); opacity: 1; }
#columbariumPopup .floating-nav:nth-child(1) { transition-delay: 20ms; }
#columbariumPopup .floating-nav:nth-child(2) { transition-delay: 60ms; }

/* Mobile alignment for floating buttons */
@media (max-width: 640px) {
	.floating-nav { width: 48px; height: 48px; }
	.floating-nav svg { width: 22px; height: 22px; }
	.nav-top-right { top: max(12px, env(safe-area-inset-top, 0px) + 12px); right: max(12px, env(safe-area-inset-right, 0px) + 12px); left: auto; bottom: auto; }
	.nav-top-right-2 { top: calc(max(12px, env(safe-area-inset-top, 0px) + 12px) + 56px); right: max(12px, env(safe-area-inset-right, 0px) + 12px); left: auto; bottom: auto; }
	.nav-top-right-3 { top: calc(max(12px, env(safe-area-inset-top, 0px) + 12px) + 112px); right: max(12px, env(safe-area-inset-right, 0px) + 12px); left: auto; bottom: auto; }
	.nav-top-right-4 { top: calc(max(12px, env(safe-area-inset-top, 0px) + 12px) + 168px); right: max(12px, env(safe-area-inset-right, 0px) + 12px); left: auto; bottom: auto; }
	.nav-top-right-5 { top: calc(max(12px, env(safe-area-inset-top, 0px) + 12px) + 224px); right: max(12px, env(safe-area-inset-right, 0px) + 12px); left: auto; bottom: auto; }
	.nav-top-right-6 { top: calc(max(12px, env(safe-area-inset-top, 0px) + 12px) + 280px); right: max(12px, env(safe-area-inset-right, 0px) + 12px); left: auto; bottom: auto; }

	/* Reposition Columbarium popup to the left of the right-edge stack to avoid overlap */
	#columbariumPopup {
		top: calc(max(12px, env(safe-area-inset-top, 0px) + 12px)) !important;
		right: calc(max(12px, env(safe-area-inset-right, 0px) + 12px) + 56px) !important; /* shift one button width+gap left */
	}
}

/* Top-left placement variant */
.nav-top-left {
	left: 20px;
	top: 20px;
	right: auto;
	bottom: auto;
}

/* Bottom-left placement variant */
.nav-bottom-left {
	left: 20px;
	right: auto;
	bottom: 20px;
	top: auto;
}

/* Top-right placement variant */
.nav-top-right {
	right: 20px;
	top: 20px;
	left: auto;
	bottom: auto;
}

/* Second top-right button (shifted left to sit beside the primary) */
.nav-top-right-2 {
	right: 84px; /* 52px button + ~12px gap + a bit of cushion */
	top: 20px;
	left: auto;
	bottom: auto;
}

/* Third top-right button (shifted further left) */
.nav-top-right-3 {
		right: 148px; /* 52px button * 2 + gaps */
		top: 20px;
		left: auto;
		bottom: auto;
}

/* Fourth top-right button (shifted further left) */
.nav-top-right-4 {
		right: 212px; /* 52px button * 3 + gaps */
		top: 20px;
		left: auto;
		bottom: auto;
}

/* Fifth top-right button (shifted further left) */
.nav-top-right-5 {
	right: 276px; /* 52px button * 4 + gaps */
	top: 20px;
	left: auto;
	bottom: auto;
}

/* Sixth top-right button (shifted further left) */
.nav-top-right-6 {
	right: 340px; /* 52px button * 5 + gaps */
	top: 20px;
	left: auto;
	bottom: auto;
}

/* Center a floating button horizontally over the toolbox (left stack) */
.nav-toolbox-center {
	left: calc(max(12px, env(safe-area-inset-left, 0px) + 12px) + (var(--toolbox-width) / 2) - 26px);
	top: 50%;
	right: auto;
	bottom: auto;
	transform: translateY(-50%);
}
@media (max-width: 640px) {
	/* When toolboxes dock to the top-left on small screens, keep the button centered on toolbox horizontally and place it just below */
	.nav-toolbox-center {
		left: calc(max(12px, env(safe-area-inset-left, 0px) + 12px) + (var(--toolbox-width) / 2) - 24px); /* 48px button on mobile */
		top: calc(max(12px, env(safe-area-inset-top, 0px) + 12px) + 56px + 8px);
		transform: none;
	}
}

/* Bottom-anchored: center under toolbox horizontally */
.nav-bottom-toolbox-center {
	left: calc(max(12px, env(safe-area-inset-left, 0px) + 12px) + (var(--toolbox-width) / 2) - 26px); /* 52px button desktop */
	right: auto;
	top: auto;
	bottom: 20px;
}
@media (max-width: 640px) {
	.nav-bottom-toolbox-center {
		left: calc(max(12px, env(safe-area-inset-left, 0px) + 12px) + (var(--toolbox-width) / 2) - 24px); /* 48px button mobile */
		bottom: 20px;
	}
}

/* Legend popup styles */
#legendPopup {
	position: fixed;
	/* Will be positioned dynamically under the legend button */
	background: rgba(24,24,24,0.88);
	color: #fff;
	border: 1px solid #2a2a2a;
	box-shadow: 0 8px 24px rgba(0,0,0,0.35);
	border-radius: 10px;
	padding: 6px 8px;
	z-index: 230;
	opacity: 0;
	transform: translateY(-8px) scale(0.98);
	transition: opacity 160ms ease, transform 180ms cubic-bezier(.2,.6,.2,1);
	pointer-events: none;
}
#legendPopup.open {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}
#legendPopup .legend-grid {
	display: grid;
	grid-template-columns: 24px auto;
	gap: 6px 8px;
	align-items: center;
	padding: 6px 8px;
}
#legendPopup .legend-welcome { padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,0.12); margin-bottom: 4px; }
#legendPopup .legend-welcome h3 { margin: 0; font-family: sans-serif; font-weight: 600; font-size: 13px; color: #fff; }
#legendPopup .legend-tagline { margin-top: 2px; font-family: sans-serif; font-size: 11px; color: rgba(255,255,255,0.9); }
#legendPopup .legend-quick { margin-top: 6px; display: grid; grid-template-columns: repeat(5, minmax(48px, 1fr)); gap: 6px; }
#legendPopup .quick-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
#legendPopup .quick-item svg { width: 24px; height: 24px; }
#legendPopup .quick-label { font-family: sans-serif; font-size: 10.5px; opacity: 0.95; white-space: nowrap; }
#legendPopup::-webkit-scrollbar { width: 10px; }
#legendPopup::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); border-radius: 10px; }
#legendPopup::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 10px; }
#legendPopup::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.35); }
#legendPopup .legend-item svg { width: 18px; height: 18px; display:block; }
#legendPopup .legend-label { font-family: sans-serif; font-size: 11px; opacity: 0.95; white-space: nowrap; }

/* Expanded help sections */
#legendPopup .legend-section { padding: 8px 10px; border-top: 1px solid rgba(255,255,255,0.08); }
#legendPopup .legend-section h4 { margin: 6px 0 6px; font-family: sans-serif; font-weight: 600; font-size: 12.5px; color: #fff; }
#legendPopup .legend-section ul { margin: 0 0 6px 16px; padding: 0; color: rgba(255,255,255,0.95); font-family: sans-serif; font-size: 12px; }
#legendPopup .legend-section ol { margin: 0 0 6px 16px; padding: 0; color: rgba(255,255,255,0.95); font-family: sans-serif; font-size: 12px; }
#legendPopup .legend-section.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
#legendPopup .legend-section li { margin: 2px 0; }

/* Visibility popup styles (mirrors legend) */
#visibilityPopup {
	position: fixed;
	background: rgba(24,24,24,0.95);
	color: #fff;
	border: 1px solid #2a2a2a;
	box-shadow: 0 8px 24px rgba(0,0,0,0.35);
	border-radius: 12px;
	padding: 10px 12px;
	z-index: 230;
	opacity: 0;
	transform: translateY(-8px) scale(0.98);
	transition: opacity 160ms ease, transform 180ms cubic-bezier(.2,.6,.2,1);
	pointer-events: none;
	min-width: 240px;
}
#visibilityPopup.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
#visibilityPopup .visibility-header { font-family: sans-serif; font-size: 12px; opacity: 0.9; margin-bottom: 6px; }
#visibilityPopup #objectList { max-height: 260px; overflow: auto; }
#visibilityPopup #objectList div { display:flex; align-items:center; gap:8px; padding:4px 2px; border-radius:6px; }
#visibilityPopup #objectList div:hover { background: rgba(255,255,255,0.06); }
#visibilityPopup input[type="checkbox"] { accent-color: #fff; }
#visibilityPopup span { color: #fff; font-family: sans-serif; font-size: 12px; }

/* Scan HUD */
#scanHud {
	position: fixed;
	left: max(12px, env(safe-area-inset-left, 0px) + 12px);
	bottom: max(12px, env(safe-area-inset-bottom, 0px) + 12px);
	background: rgba(24,24,24,0.95);
	color: #fff;
	border: 1px solid #2a2a2a;
	box-shadow: 0 8px 24px rgba(0,0,0,0.35);
	border-radius: 12px;
	padding: 10px 12px;
	z-index: 240;
	min-width: 180px;
}
#scanHud .scan-hud-title { font-family: sans-serif; font-size: 11px; color: #ddd; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; }
#scanHud .scan-hud-status { font-family: sans-serif; font-size: 12px; color: #fff; opacity: 0.95; }
#scanHud .scan-hud-cancel {
	position: absolute; top: 6px; right: 6px; width: 22px; height: 22px;
	border: none; border-radius: 50%; background: #2a2a2a; color: #fff; cursor: pointer;
}
#scanHud .scan-hud-cancel:hover { background: #333; }

/* Mobile floating button overrides (placed late to win cascade) */
@media (max-width: 640px) {
	.floating-nav { width: 48px; height: 48px; }
	.floating-nav svg { width: 22px; height: 22px; }
	.nav-top-right { top: max(12px, env(safe-area-inset-top, 0px) + 12px); right: max(12px, env(safe-area-inset-right, 0px) + 12px); left: auto; bottom: auto; }
	.nav-top-right-2 { top: calc(max(12px, env(safe-area-inset-top, 0px) + 12px) + 56px); right: max(12px, env(safe-area-inset-right, 0px) + 12px); left: auto; bottom: auto; }
	.nav-top-right-3 { top: calc(max(12px, env(safe-area-inset-top, 0px) + 12px) + 112px); right: max(12px, env(safe-area-inset-right, 0px) + 12px); left: auto; bottom: auto; }
	.nav-top-right-4 { top: calc(max(12px, env(safe-area-inset-top, 0px) + 12px) + 168px); right: max(12px, env(safe-area-inset-right, 0px) + 12px); left: auto; bottom: auto; }
	.nav-top-right-5 { top: calc(max(12px, env(safe-area-inset-top, 0px) + 12px) + 224px); right: max(12px, env(safe-area-inset-right, 0px) + 12px); left: auto; bottom: auto; }
}

/* Columbarium toolbox icon alignment */
#cToolbox {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	left: 24px;
	z-index: 11;
	background: rgba(255,255,255,0.96);
	box-shadow: 0 2px 12px rgba(0,0,0,0.10);
	padding: 8px 4px;
	width: var(--toolbox-width);
	box-sizing: border-box;
	min-width: 0;
	max-width: none;
	border-radius: 14px;
	border: 1px solid #e0e0e0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 4px; /* match main toolbox vertical rhythm */
	text-align: center;
	max-height: none;
	overflow: visible;
}
#cToolbox .icon-btn {
	margin: 0 auto; /* let container gap control spacing */
	width: 36px;
	height: 36px;
	min-width: 36px;
	min-height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px; /* match index toolbox buttons */
}
#cToolbox .collapse { width: 100%; }
#cToolbox > .collapse { margin: 0; }
#cToolbox .collapse .row { display:flex; align-items:center; justify-content: center; gap: 8px; padding: 4px 0; }
#cToolbox .collapse .row.center { justify-content: center; }
#cToolbox .collapse .row.end { justify-content: flex-end; }
#cToolbox .collapse .icon-btn { margin: 0; }
/* If buttons are direct children (no .row wrapper), center them */
#cToolbox .collapse > .icon-btn { margin-left: auto; margin-right: auto; }
/* Top icon stack (Import, Center, Zones) */
#cTopIcons { display:flex; flex-direction:column; align-items:center; gap: 4px; width:100%; }

/* Desktop short-height breakpoint: open child panels horizontally to avoid vertical overflow */
@media (max-height: 700px) and (min-width: 820px) {
	/* Below the parent (DOM order), still overlaps the toolbar, but lays out horizontally */
	#toolbox .collapse.open,
	#cToolbox .collapse.open {
		width: max-content !important;                  /* size to content horizontally */
		min-width: 0 !important;
		max-width: none !important;                     /* allow to expand as needed */
		height: var(--toolbox-width) !important;        /* horizontal band height matches toolbox width */
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;                   /* keep icons in a single row */
		align-items: center !important;
		justify-content: flex-start !important;
		gap: 6px !important;
		overflow-x: visible !important;                 /* no horizontal scroll; allow overflow if it exceeds viewport */
		overflow-y: hidden !important;                  /* no vertical scrolling in the band */
		margin-top: 4px !important;                     /* keep visual relation "below" parent */
		transform: translate(6px, 0) scale(1) !important; /* slight right nudge to overlap like vertical */
		z-index: 200 !important;                        /* stay above the toolbox */
	}
		/* Keep icon buttons inline as fixed-size items */
			#toolbox .collapse.open .icon-btn,
			#cToolbox .collapse.open .icon-btn { flex: 0 0 auto !important; }
	/* Inner rows also wrap to avoid vertical growth */
		#toolbox .collapse .row,
		#cToolbox .collapse .row {
			flex-wrap: nowrap !important;
			gap: 6px !important;
			padding: 4px !important;
			flex-direction: row !important;      /* override any inline column layout */
			justify-content: flex-start !important;
			align-items: center !important;
		}
		/* If buttons are direct children (no .row wrapper), remove centering margins */
			#toolbox .collapse > .icon-btn,
			#cToolbox .collapse > .icon-btn { margin: 0 !important; }

		/* 2D: Make vertical sliders horizontal inside the horizontal band */
		#toolbox .collapse.open .vslider {
			appearance: auto !important;            /* reset vertical slider appearance */
			-webkit-appearance: none !important;     /* ensure horizontal on WebKit */
			writing-mode: horizontal-tb !important;  /* horizontal axis */
			width: 120px !important;                 /* widen to fit band */
			height: 16px !important;                 /* compact height */
			margin: 0 6px !important;
		}

		/* 2D Erase: its inner container isn't a .row; force it horizontal */
		#erase2DGroup.open > div {
			display: flex !important;
			flex-direction: row !important;
			align-items: center !important;
			gap: 6px !important;
			padding: 4px !important;
		}

		/* 2D Style: ensure its .row becomes horizontal and compact */
		#style2DGroup.open .row {
			display: flex !important;
			flex-direction: row !important;
			align-items: center !important;
			gap: 8px !important;
			padding: 4px !important;
		}

	/* Extra enforcement for stubborn 3D groups: force single-row band and inline children */
	#drawCreateGroup.open,
	#primsGroup.open {
		width: max-content !important;
		height: var(--toolbox-width) !important;
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: flex-start !important;
		gap: 6px !important;
		overflow: visible !important;
		margin-top: 4px !important;
		transform: translate(6px, 0) scale(1) !important;
		z-index: 201 !important; /* slightly above generic to win stacking */
	}
	#drawCreateGroup.open > *,
	#primsGroup.open > * { flex: 0 0 auto !important; margin: 0 !important; }
}

/* Subtle grid background pattern (dark mode friendly) */
.grid-bg {
	background-color: #111;
	background-image:
		linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px),
		linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
	background-size: 64px 64px, 64px 64px, 16px 16px, 16px 16px;
	background-position: 0 0, 0 0, 0 0, 0 0;
}

/* Mobile and safe-area adjustments for floating nav buttons */
/* Safer offsets for bottom-left visibility button on devices with notches */
.nav-bottom-left {
	left: max(12px, env(safe-area-inset-left, 0px) + 12px);
	right: auto;
	bottom: max(12px, env(safe-area-inset-bottom, 0px) + 12px);
	top: auto;
}

@media (max-width: 600px) {
	/* Slightly smaller circles on narrow screens */
	.floating-nav { width: 48px; height: 48px; }
	.floating-nav svg { width: 22px; height: 22px; }
	/* Stack top-right cluster vertically to prevent overlap */
	.nav-top-right { top: max(12px, env(safe-area-inset-top, 0px) + 12px); right: max(12px, env(safe-area-inset-right, 0px) + 12px); left: auto; bottom: auto; }
	.nav-top-right-2 { top: calc(max(12px, env(safe-area-inset-top, 0px) + 12px) + 56px); right: max(12px, env(safe-area-inset-right, 0px) + 12px); left: auto; bottom: auto; }
	.nav-top-right-3 { top: calc(max(12px, env(safe-area-inset-top, 0px) + 12px) + 112px); right: max(12px, env(safe-area-inset-right, 0px) + 12px); left: auto; bottom: auto; }
	.nav-top-right-4 { top: calc(max(12px, env(safe-area-inset-top, 0px) + 12px) + 168px); right: max(12px, env(safe-area-inset-right, 0px) + 12px); left: auto; bottom: auto; }
}

/* Materials popup styles (match toolbox look, compact size) */
#materialsPopup {
	position: fixed;
	background: rgba(255,255,255,0.96);
	color: #111;
	border: 1px solid #e0e0e0;
	box-shadow: 0 2px 12px rgba(0,0,0,0.10);
	border-radius: 14px; /* match toolbox */
	padding: 8px 10px;
	z-index: 230;
	min-width: 200px; /* keep compact */
	opacity: 0;
	transform: translateY(-8px) scale(0.98);
	transition: opacity 160ms ease, transform 180ms cubic-bezier(.2,.6,.2,1);
	pointer-events: none;
}
#materialsPopup.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.materials-header { font-family: sans-serif; font-size: 12px; opacity: 0.9; margin-bottom: 6px; color: #222; }
.materials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mat-swatch { display: flex; flex-direction: column; align-items: center; gap: 4px; background: transparent; border: none; cursor: pointer; padding: 2px; color:#111; }
.mat-swatch[aria-pressed="true"] .swatch-box { outline: 2px solid #222; outline-offset: 2px; }
.swatch-box { width: 42px; height: 42px; border-radius: 6px; }
.swatch-label { font-size: 10.5px; color: #333; font-family: sans-serif; opacity: 0.95; }