/* ── Grow Space Designer ──────────────────────────────────────── */

.an-dz {
	--z-line: var(--an-line, #DEDEDA);
	--z-dim: var(--an-text-2, #52565A);
	--z-accent: var(--an-accent, #B4501C);
	max-width: var(--an-max, 1320px);
	margin: 0 auto;
	padding: 30px 20px 72px;
	color: var(--an-text, #16181A);
	font-family: var(--an-font-ui, -apple-system, system-ui, sans-serif);
}

.an-dz-head { max-width: 74ch; margin-bottom: 24px; }
.an-dz-eyebrow { display:block; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--z-accent); margin-bottom:6px; }
.an-dz-head h1 { margin:0 0 10px; font-size:clamp(26px,4vw,40px); line-height:1.08; letter-spacing:-.025em; text-wrap:balance; }
.an-dz-head p { margin:0; color:var(--z-dim); line-height:1.6; }

.an-dz-body { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:24px; align-items:start; }
@media (max-width:940px){ .an-dz-body{ grid-template-columns:1fr; } }

.an-dz-stage {
	position:relative; border:1px solid var(--z-line); border-radius:14px; overflow:hidden;
	background:#0E1512; height:min(70vh,620px);
}
.an-dz-stage canvas { display:block; width:100%; height:100%; cursor:crosshair; }
.an-dz-hint {
	position:absolute; left:16px; bottom:14px; margin:0;
	font-size:12.5px; color:rgba(235,240,236,.62); pointer-events:none;
}

.an-dz-panel { border:1px solid var(--z-line); border-radius:14px; background:var(--an-surface,#fff); padding:18px 20px; }
.an-dz-panel label, .an-dz-k {
	display:block; font-size:11.5px; font-weight:600; letter-spacing:.05em;
	text-transform:uppercase; color:var(--z-dim); margin:14px 0 6px;
}
.an-dz-panel select, .an-dz-panel input {
	width:100%; padding:9px 11px; border:1px solid var(--z-line); border-radius:8px;
	background:var(--an-bg,#F4F4F2); color:inherit; font:inherit; font-size:14.5px; box-sizing:border-box;
}
.an-dz-room { display:grid; grid-template-columns:1fr 1fr; gap:10px; }

.an-dz-units { display:grid; gap:7px; }
.an-dz-units button {
	display:grid; grid-template-columns:14px 1fr; gap:10px; align-items:center;
	padding:10px 12px; border:1px solid var(--z-line); border-radius:10px;
	background:var(--an-bg,#F4F4F2); color:inherit; font:inherit; text-align:left; cursor:pointer;
}
.an-dz-units button.is-on { border-color:var(--z-accent); background:var(--an-surface,#fff); }
.an-dz-units i { width:14px; height:14px; border-radius:4px; background:var(--c,#888); grid-row:span 2; }
.an-dz-units b { font-size:14px; font-weight:600; }
.an-dz-units span { font-size:11.5px; color:var(--z-dim); grid-column:2; }

.an-dz-stats { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:18px 0 12px; }
.an-dz-stats div { border:1px solid var(--z-line); border-radius:10px; padding:11px 13px; }
.an-dz-stats b { display:block; font-size:21px; line-height:1.05; font-variant-numeric:tabular-nums; letter-spacing:-.015em; }
.an-dz-stats span { font-size:11px; color:var(--z-dim); }

.an-dz-fill { margin:0 0 6px; font-size:13px; color:var(--z-dim); }
.an-dz-fill b { color:var(--an-text,#16181A); font-variant-numeric:tabular-nums; }

.an-dz-warn { margin:0 0 12px; font-size:12.5px; line-height:1.45; min-height:1px; }
.an-dz-warn.is-warn { color:#8A5D0F; }
.an-dz-warn.is-bad { color:#B23A2B; font-weight:600; }

.an-dz-clear {
	width:100%; padding:9px; border:1px solid var(--z-line); border-radius:8px;
	background:var(--an-bg,#F4F4F2); color:inherit; font:inherit; font-size:13.5px; cursor:pointer;
}
.an-dz-clear:hover { border-color:#B23A2B; color:#B23A2B; }

.an-dz-note { margin:14px 0 0; font-size:12px; line-height:1.55; color:var(--an-text-3,#82878C); }

/* rotate needs to be a control, not a keyboard shortcut, on touch */
.an-dz-rotate {
	position:absolute; right:14px; bottom:14px;
	padding:10px 16px; min-height:44px;
	border:1px solid rgba(235,240,236,.22); border-radius:10px;
	background:rgba(14,21,18,.82); color:#EBF0EC; font:inherit; font-size:13.5px;
	cursor:pointer; backdrop-filter:blur(6px);
}
.an-dz-rotate[aria-pressed="true"] { border-color:var(--z-accent); color:var(--z-accent); }
.an-dz-rotate kbd {
	margin-left:6px; padding:1px 5px; border:1px solid rgba(235,240,236,.24);
	border-radius:4px; font-size:11px; font-family:var(--an-font-mono,ui-monospace,monospace);
}

@media (max-width:940px) {
	.an-dz-stage { height:min(56vh,460px); }
	/* Equipment picker becomes a horizontal rail — a phone should not need a
	   scroll to reach the thing it is about to place. */
	.an-dz-units { grid-auto-flow:column; grid-auto-columns:minmax(190px,1fr); overflow-x:auto; padding-bottom:4px; }
	.an-dz-units button { min-height:44px; }
	.an-dz-stats { grid-template-columns:repeat(3,1fr); }
	.an-dz-rotate kbd { display:none; }
}
@media (max-width:520px) {
	.an-dz-stats { grid-template-columns:repeat(2,1fr); }
}