.signsnap-field {
	position: relative;
	/* White background on the wrapper means even if the canvas element
	   itself has a transparent CSS background, users see white behind it. */
	background: #ffffff;
	border-radius: 4px;
}

.signsnap-field canvas {
	display: block;
	width: 100%;
	border: 1px solid #ccd0d4;
	border-radius: 4px;
	/* force white at every CSS layer */
	background-color: #ffffff !important;
	/* Tell the browser this element lives in a light colour-scheme so it
	   does not apply any automatic dark-mode recolouring to it. */
	color-scheme: light;
	/* Prevents forced-colour (high-contrast / dark-mode override) modes
	   from repainting this element — the white pixel fill in JS is the
	   authoritative background. */
	forced-color-adjust: none;
	touch-action: none;
	cursor: crosshair;
}

.signsnap-field__actions {
	margin-top: 6px;
}

.signsnap-field__clear {
	background: #ffffff;
	border: 1px solid #ccd0d4;
	border-radius: 4px;
	padding: 4px 10px;
	font-size: 12px;
	cursor: pointer;
	color: #1d2327;
	color-scheme: light;
	forced-color-adjust: none;
}

.signsnap-field__clear:hover {
	background: #f6f7f7;
	color: #1d2327;
}

/* Extra dark-mode guardrail: explicitly undo any automatic dark-mode
   overrides applied by the browser or the active theme. */
@media (prefers-color-scheme: dark) {
	.signsnap-field {
		background: #ffffff !important;
	}
	.signsnap-field canvas {
		background-color: #ffffff !important;
		border-color: #8c8f94 !important;
		filter: none !important;
	}
	.signsnap-field__clear {
		background: #ffffff !important;
		color: #1d2327 !important;
		border-color: #8c8f94 !important;
		filter: none !important;
	}
}