/**
 * ENP CSS Tools — tool-specific styles.
 *
 * These are the non-Tailwind rules the CSS Generator workspace relies on,
 * carried verbatim from css_gen.html's <style> block. They live with the
 * plugin (not the theme's style.css) so the tool's presentation ships with the
 * tool — keeping the theme generic (spec R4/R5).
 */

.code-block {
	background-color: #0f172a;
	color: #e2e8f0;
}

.canvas-bg {
	background-image: radial-gradient( #e2e8f0 1px, transparent 1px );
	background-size: 20px 20px;
}

/* Range slider — webkit */
.control-input {
	-webkit-appearance: none;
	width: 100%;
	background: transparent;
}
.control-input::-webkit-slider-runnable-track {
	width: 100%;
	height: 4px;
	cursor: pointer;
	background: #e2e8f0;
	border-radius: 2px;
}
.control-input::-webkit-slider-thumb {
	height: 16px;
	width: 16px;
	border-radius: 50%;
	background: #2563eb;
	cursor: pointer;
	-webkit-appearance: none;
	margin-top: -6px;
}

/* Range slider — firefox */
.control-input::-moz-range-track {
	width: 100%;
	height: 4px;
	cursor: pointer;
	background: #e2e8f0;
	border-radius: 2px;
}
.control-input::-moz-range-thumb {
	height: 16px;
	width: 16px;
	border: none;
	border-radius: 50%;
	background: #2563eb;
	cursor: pointer;
}