/**
 * Chrome around the builder app (outer layout, not the canvas itself).
 */
#collage-builder-root {
	width: 100%;
	min-height: calc(100vh - 80px);
	background: var(--bg);
}

/* Body class `wccb-fullscreen` (set by page-templates/builder.php) hides
   Storefront chrome → the root fills the viewport. */
body.wccb-fullscreen #collage-builder-root {
	min-height: 100vh;
}

/* Branded boot loader — sibling of #collage-builder-root so the bundle's
   `root.innerHTML = …` mount step does not wipe it. JS removes the loader
   when bootstrapDesign() completes; a watchdog swaps it to the error state
   if 20s elapse without removal. Reuses the canonical `wh-loader-spin`
   keyframe shipped by tokens.css so the spinner matches every other loading
   surface in the site. */
#collage-builder-loader.collage-builder-loading {
	position: fixed;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--s-4);
	background: var(--bg);
	color: var(--ink-muted);
	font-family: var(--font-body);
	/* Builder chrome (.wccb-zoom, .wccb-canvas-tools) sits at z-index 9999.
	   Loader must paint above it during boot so the controls don't bleed
	   through. Stays below modals (z-index 9999+ via openModal()'s isolated
	   stacking context). */
	z-index: 100000;
	transition: opacity 250ms var(--ease);
}

#collage-builder-loader.is-leaving {
	opacity: 0;
	pointer-events: none;
}

.collage-builder-loading__spinner {
	width: 44px;
	height: 44px;
	border: 3px solid rgba(14, 14, 12, .12);
	border-top-color: var(--accent);
	border-radius: 50%;
	animation: wh-loader-spin 700ms linear infinite;
	box-sizing: border-box;
}

.collage-builder-loading__caption {
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .02em;
	color: var(--ink-muted);
	min-height: 1em;
}

/* Error state — gated on `.is-error` (added by the JS watchdog when boot
   doesn't complete in 20s). Default = hidden; using a parent-class gate
   instead of relying on `[hidden]` is necessary because an explicit
   `display: flex` on the error element would override the `hidden`
   attribute's UA `display: none`. */
.collage-builder-loading__error {
	display: none;
	flex-direction: column;
	align-items: center;
	gap: var(--s-3);
	margin-top: var(--s-2);
}

#collage-builder-loader.is-error .collage-builder-loading__error {
	display: flex;
}

.collage-builder-loading__error-text {
	margin: 0;
	font-size: 14px;
	color: var(--ink-2);
}

#collage-builder-loader.is-error .collage-builder-loading__spinner {
	border-top-color: var(--err);
}