/* ========== Base & Variables ========== */
:root{
	--border: 1px solid #e5e7eb;
	--radius: 16px;
	--grid-size: 20px;
	--grid-color: #e5e7eb;
}

*{ box-sizing:border-box; }

html, body{
	height:100%;
	margin:0;
	font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
	background:#f7f7f9;
	color:#111827;
}

/* ========== Layout Containers ========== */

/* Fill the parent (your absolute pink wrapper) */
.wrap{
	height:100%;
	width:100%;
	max-width:none;   /* remove 1000px cap */
	margin:0;         /* cancel centered margins */
	padding:16px;
	display:flex;
	flex-direction:column;
}


/* Toolbar layout */
.toolbar{
	display:flex;
	flex-direction:column;
	gap:8px 10px;
	align-items:center;
	padding:12px;
	border-bottom:var(--border);
	background:#fafafa;
}

.toolbar .more_controls{
	display:flex;
	flex-direction:column;
}

.toolbar row{
	display:flex;
}


/* ========== Controls ========== */

.toolbar button,
.toolbar input,
.toolbar label{ font:inherit; }

.toolbar button{
	border:var(--border);
	background:#fff;
	padding:8px 12px;
	border-radius:999px;
	cursor:pointer;
}

.toolbar button[disabled]{ opacity:.5; cursor:not-allowed; }
.toolbar button:hover:not([disabled]){ background:#f3f4f6; }

/* Swatches */
.swatches{
	display:flex;
	gap:6px;
	align-items:center;
}

/* Show the actual color; override generic button background */
.toolbar .swatch_btn{
	width:24px;
	height:24px;
	flex:0 0 auto;
	border-radius:999px;
	border:var(--border);
	background:var(--swatch, #000) !important;
	cursor:pointer;
	display:inline-block;
	position:relative;
}

/* Current color chip */
.current_color_chip{
	width:24px;
	height:24px;
	flex:0 0 auto;
	border-radius:999px;
	border:var(--border);
	background:var(--swatch, #000) !important;
}

/* Selected swatch ring */
.toolbar .swatch_btn[aria-pressed="true"]{
	box-shadow:0 0 0 3px #111827, inset 0 0 0 2px #fff;
}

/* Numbers row */
.numrow{
	grid-column:1 / -1;
	display:flex;
	gap:6px;
	align-items:center;
	margin-top:6px;
	flex-wrap:wrap;
}
.num_btn{
	border:var(--border);
	background:#fff;
	padding:4px 10px;
	border-radius:999px;
	cursor:pointer;
	font-weight:600;
}
.num_btn[aria-pressed="true"]{ background:#111827; color:#fff; }

/* ========== Canvas Area ========== */

/* Canvas wrapper fills remaining space */
.canvas_wrap{
	position:relative;
	width:100%;
	flex:1 1 auto;
	min-height:0;         /* critical for flex children that need to shrink */
	height:auto;          /* override any fixed height */
	background:#ffffff;
}

/* Optional grid background */
.canvas_wrap.show_grid{
	background-image:
		linear-gradient(#ffffff, #ffffff),
		repeating-linear-gradient(0deg, var(--grid-color), var(--grid-color) 1px, transparent 1px, transparent var(--grid-size)),
		repeating-linear-gradient(90deg, var(--grid-color), var(--grid-color) 1px, transparent 1px, transparent var(--grid-size));
	background-blend-mode:normal;
}

/* Canvas follows wrapper size */
canvas{
	display:block;
	width:100%;
	height:100%;
	touch-action:none; /* allow smooth pointer events */
	/* JS forces cursor styles; we keep this neutral here */
}

/* Cursor ring overlay */
#cursor_ring{
	position:absolute;
	left:0; top:0;
	width:12px; height:12px;
	border:1px solid currentColor;
	border-radius:999px;
	pointer-events:none;
	transform:translate(-50%, -50%);
	z-index:2;
	box-sizing:border-box;
	opacity:0;
	transition:opacity .06s linear;
	color:#000;
	background:transparent;
}
#cursor_ring.visible{ opacity:1; }
#cursor_ring.eraser{ border-style:dashed; background:rgba(0,0,0,0.06); }

/* A11y helpers */
.visually_hidden{
	position:absolute !important;
	clip:rect(1px,1px,1px,1px);
	padding:0 !important;
	border:0 !important;
	height:1px !important;
	width:1px !important;
	overflow:hidden;
	white-space:nowrap;
}