/* /css-grid-generator only: area painter and the live grid stage. Scoped under #grdgApp. */
#grdgApp .xr-painter { display: grid; gap: 4px; margin: 8px 0; }
#grdgApp .xr-painter button { min-height: 40px; min-width: 0; padding: 4px; border: 1px dashed var(--bm-line-2, var(--bm-line)); border-radius: 8px; background: var(--bm-bg); color: var(--bm-ink-2); font: inherit; font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
#grdgApp .xr-painter button.is-named { border-style: solid; color: #0f172a; font-weight: 700; }
#grdgApp .xr-painter button:focus-visible { outline: 3px solid var(--bm-accent-ring); }
#grdgApp .xr-grid-stage { min-height: 260px; padding: 10px; border: 1px solid var(--bm-line); border-radius: 14px; background: var(--bm-bg); overflow: auto; }
#grdgApp .xr-grid-stage > div { display: grid; min-height: 240px; }
#grdgApp .xr-cell { display: grid; place-items: center; min-height: 48px; padding: 8px; border-radius: 10px; color: #0f172a; font-weight: 700; font-size: .82rem; overflow-wrap: anywhere; }
@media (forced-colors: active) { #grdgApp .xr-cell, #grdgApp .xr-painter button { border: 1px solid CanvasText; } }