/* Alchemic Matter Configurator. Uses the theme tokens (design system "Alchemic Matter"),
   with fallbacks so it also works outside the theme.
   Layout: the viewer fills the window under the site header, the settings panel floats
   over it on the right (a bottom sheet on phones). */
.am-configurator {
	--amc-surface: var(--surface, #000);
	--amc-raised: var(--surface-raised, #0b0b0b);
	--amc-shade: var(--shade, #141414);
	--amc-line: var(--line, #262626);
	--amc-line-strong: var(--line-strong, #7a7a7a);
	--amc-ink: var(--ink, #f2f2f0);
	--amc-ink-soft: var(--ink-soft, #c6c6c4);
	--amc-ink-muted: var(--ink-muted, #8e8e8c);
	--amc-citrine: var(--citrine, #d6b25a);
	--amc-rubedo: var(--rubedo, #e0684f);
	--amc-mono: var(--font-mono, ui-monospace, Menlo, Consolas, monospace);
	--amc-display: var(--font-display, "Josefin Sans", Futura, sans-serif);
	--amc-body: var(--font-body, "Jost", Futura, sans-serif);
	--amc-gap: var(--space-3, 13px);
	--amc-panel-w: 24rem;

	color: var(--amc-ink-soft);
	font-family: var(--amc-body);
	min-height: 32rem;
}
.am-configurator.is-loading::before {
	content: "Loading the model";
	display: block;
	padding: var(--space-5, 34px) 0;
	font: 400 12px/21px var(--amc-mono);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--amc-ink-muted);
}

/* ---------- app mode: the page becomes the configurator */
body.am-configurator-app { overflow: hidden; }
body.am-configurator-app .site-main,
body.am-configurator-app .site-footer { display: none; }

.amc-app {
	position: fixed;
	top: var(--amc-top, 0);
	left: 0; right: 0; bottom: 0;
	z-index: 5;
	min-height: 0;
	background: var(--amc-surface);
	animation: amc-emerge 900ms ease-out both;
}
@keyframes amc-emerge { from { opacity: 0; } to { opacity: 1; } }

.amc-layout { position: relative; width: 100%; height: 100%; }

/* ---------- stage (viewer) */
.amc-stage { position: absolute; inset: 0; border-top: 1px solid var(--amc-line); }
.amc-canvas, .amc-canvas canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.amc-canvas canvas { cursor: grab; touch-action: none; }
.amc-canvas canvas:active { cursor: grabbing; }

.amc-hud {
	position: absolute;
	left: var(--gutter, 21px);
	top: var(--amc-gap);
	right: calc(var(--amc-panel-w) + 2 * var(--amc-gap) + 7rem);
	pointer-events: none;
}
.is-panel-closed .amc-hud { right: 8rem; }
.amc-hud > * { pointer-events: auto; }
.amc-hud .amc-status, .amc-hud .amc-error { pointer-events: none; }

.amc-plates { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px); margin-bottom: var(--space-2, 8px); }
.amc-plate {
	padding: var(--space-1, 5px) var(--space-3, 13px);
	background: rgba(0, 0, 0, .6);
	color: var(--amc-ink-muted);
	border: 1px solid var(--amc-line);
	border-radius: var(--radius-round, 999px);
	font: 400 12px/21px var(--amc-mono);
	letter-spacing: .08em;
	text-transform: uppercase;
	cursor: pointer;
}
.amc-plate:hover { color: var(--amc-ink); border-color: var(--amc-line-strong); }
.amc-plate[aria-selected="true"] { color: var(--amc-ink); border-color: var(--amc-ink); }

.amc-status, .amc-dims {
	margin: 0;
	font: 400 12px/21px var(--amc-mono);
	letter-spacing: .08em;
	color: var(--amc-ink-muted);
}
.is-busy .amc-status::before {
	content: "";
	display: inline-block;
	width: 5px; height: 5px;
	margin-right: var(--space-2, 8px);
	vertical-align: middle;
	border-radius: 50%;
	background: var(--amc-citrine);
	animation: amc-pulse 1.2s ease-in-out infinite alternate;
}
@keyframes amc-pulse { from { opacity: .2; } to { opacity: 1; } }
.amc-dims { position: absolute; left: var(--gutter, 21px); bottom: var(--amc-gap); pointer-events: none; }
.amc-error { margin: var(--space-2, 8px) 0 0; font-size: 14px; line-height: 21px; color: var(--amc-ink); max-width: 34rem; }
.amc-error strong { color: var(--amc-rubedo); font-weight: 400; }

/* ---------- settings panel, over the viewer */
.amc-panel {
	position: absolute;
	top: var(--amc-gap);
	right: var(--amc-gap);
	bottom: var(--amc-gap);
	width: var(--amc-panel-w);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--space-4, 21px);
	background: rgba(0, 0, 0, .78);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border: 1px solid var(--amc-line);
	scrollbar-width: thin;
	scrollbar-color: var(--amc-line-strong) transparent;
}
.is-panel-closed .amc-panel { display: none; }

.amc-toggle {
	position: absolute;
	top: var(--amc-gap);
	right: calc(var(--amc-panel-w) + 2 * var(--amc-gap));
	background: rgba(0, 0, 0, .6);
}
.is-panel-closed .amc-toggle { right: var(--amc-gap); }

.amc-title {
	margin: 0 0 var(--space-4, 21px);
	font: 300 21px/30px var(--amc-display);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--amc-ink);
}

.amc-about { margin: 0 0 var(--space-4, 21px); }
.amc-about-body { font-size: 14px; line-height: 21px; color: var(--amc-ink-soft); }
.amc-about-body > * { margin: 0 0 var(--space-3, 13px); }
.amc-about summary, .amc-console summary {
	cursor: pointer;
	font: 400 12px/21px var(--amc-mono);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--amc-ink-muted);
	margin-bottom: var(--space-2, 8px);
}

.amc-params { margin: 0; }
.amc-group { border: 0; margin: 0 0 var(--space-4, 21px); padding: 0; min-width: 0; }
.amc-group legend {
	padding: 0 0 var(--space-2, 8px);
	font: 300 14px/21px var(--amc-display);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--amc-ink);
}
.amc-field { padding: var(--space-3, 13px) 0; border-top: 1px solid var(--amc-line); }
.amc-label, .amc-check span {
	display: block;
	margin-bottom: var(--space-2, 8px);
	font: 400 12px/21px var(--amc-mono);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--amc-ink);
}
.amc-check { display: flex; align-items: center; gap: var(--space-2, 8px); cursor: pointer; }
.amc-check span { margin: 0; }
.amc-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--amc-ink); }
.amc-desc { margin: var(--space-2, 8px) 0 0; font-size: 13px; line-height: 21px; color: var(--amc-ink-muted); }

.amc-input {
	width: 100%;
	padding: var(--space-1, 5px) var(--space-2, 8px);
	background: var(--amc-surface);
	color: var(--amc-ink);
	border: 1px solid var(--amc-line-strong);
	border-radius: var(--radius-sm, 3px);
	font: 400 14px/21px var(--amc-mono);
}
.amc-input:focus-visible { outline: 2px solid var(--amc-ink); outline-offset: 3px; }
.amc-slider { display: flex; align-items: center; gap: var(--space-3, 13px); }
.amc-slider input[type="range"] { flex: 1; min-width: 0; accent-color: var(--amc-ink); }
.amc-num { width: 5.5rem; flex: none; text-align: right; }

.amc-actions {
	display: flex; flex-wrap: wrap; gap: var(--space-2, 8px);
	padding-top: var(--space-4, 21px);
	border-top: 1px solid var(--amc-line);
}
.amc-btn {
	padding: var(--space-2, 8px) var(--space-4, 21px);
	background: transparent;
	color: var(--amc-ink);
	border: 1px solid var(--amc-line-strong);
	border-radius: var(--radius-round, 999px);
	font: 400 12px/21px var(--amc-mono);
	letter-spacing: .12em;
	text-transform: uppercase;
	cursor: pointer;
}
.amc-btn:hover:not(:disabled) { border-color: var(--amc-ink); }
.amc-btn:focus-visible, .amc-plate:focus-visible { outline: 2px solid var(--amc-ink); outline-offset: 3px; }
.amc-btn-primary { border-color: var(--amc-ink); }
.amc-btn-quiet { border-color: transparent; color: var(--amc-ink-muted); }
.amc-btn:disabled { opacity: .4; cursor: not-allowed; }

.amc-console { margin-top: var(--space-4, 21px); }
.amc-log {
	max-height: 14rem;
	overflow: auto;
	margin: 0;
	padding: var(--space-3, 13px);
	background: var(--amc-raised);
	border: 1px solid var(--amc-line);
	font: 400 11px/16px var(--amc-mono);
	color: var(--amc-ink-muted);
	white-space: pre-wrap;
}

/* ---------- phones: viewer on top, settings as a sheet below */
@media (max-width: 48rem) {
	.amc-stage { bottom: 45%; }
	.amc-panel {
		top: 55%; left: 0; right: 0; bottom: 0;
		width: auto;
		border-width: 1px 0 0;
		background: var(--amc-surface);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
	.amc-hud { right: 6rem; left: var(--amc-gap); }
	.amc-dims { left: var(--amc-gap); }
	.amc-toggle { right: var(--amc-gap); top: var(--amc-gap); }
	.is-panel-closed .amc-stage { bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.amc-app { animation: none; }
	.is-busy .amc-status::before { animation: none; }
}