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

	color: var(--amr-ink-soft);
	font-family: var(--amr-body);
	min-height: 32rem;
}
.am-runes, .am-runes *, .am-runes *::before, .am-runes *::after { box-sizing: border-box; }
.am-runes.is-loading::before {
	content: "Loading the rune editor";
	display: block;
	padding: var(--space-5, 34px) var(--gutter, 21px);
	font: 400 12px/21px var(--amr-mono);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--amr-ink-muted);
}

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

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

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

/* ---------- stage */
.amr-stage { position: absolute; inset: 0; border-top: 1px solid var(--amr-line); }
.amr-canvas, .amr-canvas canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.amr-canvas canvas { cursor: grab; touch-action: none; }
.amr-canvas canvas:active { cursor: grabbing; }
.amr-hint {
	position: absolute;
	left: var(--gutter, 21px);
	bottom: calc(var(--amr-gap) + env(safe-area-inset-bottom, 0px));
	margin: 0;
	pointer-events: none;
	font: 400 11px/16px var(--amr-mono);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--amr-ink-muted);
}

/* ---------- panel */
.amr-panel {
	position: absolute;
	top: var(--amr-gap);
	right: var(--amr-gap);
	bottom: var(--amr-gap);
	width: var(--amr-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(--amr-line);
	scrollbar-width: thin;
	scrollbar-color: var(--amr-line-strong) transparent;
}
.is-panel-closed .amr-panel { display: none; }

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

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

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

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

.amr-input {
	width: 100%;
	padding: var(--space-1, 5px) var(--space-2, 8px);
	background: var(--amr-surface);
	color: var(--amr-ink);
	border: 1px solid var(--amr-line-strong);
	border-radius: var(--radius-sm, 3px);
	font: 400 13px/21px var(--amr-mono);
}

/* segmented choices: pills, as the configurator plates */
.amr-seg { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px); }
.amr-seg-btn {
	padding: var(--space-1, 5px) var(--space-3, 13px);
	background: transparent;
	color: var(--amr-ink-muted);
	border: 1px solid var(--amr-line);
	border-radius: var(--radius-round, 999px);
	font: 400 12px/21px var(--amr-mono);
	letter-spacing: .08em;
	text-transform: uppercase;
	cursor: pointer;
}
.amr-seg-btn:hover { color: var(--amr-ink); border-color: var(--amr-line-strong); }
.amr-seg-btn[aria-pressed="true"] { color: var(--amr-ink); border-color: var(--amr-ink); }
.amr-seg-num .amr-seg-btn { min-width: 2.4rem; padding-inline: 0; font-variant-numeric: tabular-nums; }
.amr-badge { margin-left: var(--space-1, 5px); color: var(--amr-citrine); }

/* rune grid */
.amr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.4rem, 1fr)); gap: var(--space-1, 5px); }
.amr-rune {
	position: relative;
	display: flex; flex-direction: column; align-items: center; gap: 2px;
	padding: var(--space-2, 8px) 2px var(--space-1, 5px);
	background: transparent;
	color: var(--amr-ink-muted);
	border: 1px solid transparent;
	cursor: pointer;
}
.amr-rune span { font: 400 10px/14px var(--amr-mono); letter-spacing: .04em; }
.amr-rune:hover { color: var(--amr-ink); border-color: var(--amr-line); }
.amr-rune[aria-pressed="true"] { color: var(--amr-ink); border-color: var(--amr-ink); }
.amr-rune[data-order]::after {
	content: attr(data-order);
	position: absolute; top: 3px; right: 5px;
	font: 400 10px/1 var(--amr-mono);
	color: var(--amr-citrine);
}

/* bindrune proposals and locked previews */
.amr-props { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2, 8px); }
.amr-prop {
	display: flex; flex-direction: column; align-items: center; gap: var(--space-1, 5px);
	padding: var(--space-2, 8px) var(--space-1, 5px);
	background: transparent;
	color: var(--amr-ink-muted);
	border: 1px solid var(--amr-line);
	cursor: pointer;
}
.amr-prop span { font: 400 10px/14px var(--amr-mono); letter-spacing: .04em; text-align: center; }
.amr-prop[aria-pressed="true"] { color: var(--amr-ink); border-color: var(--amr-ink); }

.amr-locked { padding: var(--space-3, 13px) 0; border-top: 1px solid var(--amr-line); }
.amr-locked > .amr-desc { margin: 0 0 var(--space-3, 13px); color: var(--amr-ink-soft); }
.amr-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2, 8px); margin: 0 0 var(--space-3, 13px); }
.amr-prev { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--amr-ink-soft); }
.amr-prev figcaption { font: 400 9.5px/13px var(--amr-mono); letter-spacing: .04em; color: var(--amr-ink-muted); text-align: center; }
.amr-actions-inline { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px); margin: 0; }

/* buttons, as the configurator */
.amr-actions {
	display: flex; flex-wrap: wrap; gap: var(--space-2, 8px);
	padding-top: var(--space-4, 21px);
	border-top: 1px solid var(--amr-line);
}
.amr-btn {
	display: inline-block;
	padding: var(--space-2, 8px) var(--space-4, 21px);
	background: transparent;
	color: var(--amr-ink);
	border: 1px solid var(--amr-line-strong);
	border-radius: var(--radius-round, 999px);
	font: 400 12px/21px var(--amr-mono);
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}
.amr-btn:hover:not(:disabled) { border-color: var(--amr-ink); }
.amr-btn-primary { border-color: var(--amr-ink); }
.amr-btn-quiet { border-color: transparent; color: var(--amr-ink-muted); }
.amr-btn:disabled { opacity: .4; cursor: not-allowed; }
.am-runes button:focus-visible, .am-runes a:focus-visible, .am-runes input:focus-visible, .am-runes select:focus-visible { outline: 2px solid var(--amr-ink); outline-offset: 3px; }

.amr-status {
	margin: var(--space-3, 13px) 0 0;
	min-height: 21px;
	font: 400 12px/21px var(--amr-mono);
	letter-spacing: .06em;
	color: var(--amr-ink-muted);
}
.is-busy .amr-status::before {
	content: "";
	display: inline-block;
	width: 5px; height: 5px;
	margin-right: var(--space-2, 8px);
	vertical-align: middle;
	border-radius: 50%;
	background: var(--amr-citrine);
	animation: amr-pulse 1.2s ease-in-out infinite alternate;
}
@keyframes amr-pulse { from { opacity: .2; } to { opacity: 1; } }
.amr-status.is-error { color: var(--amr-rubedo); }

/* what each mode shows */
.am-runes:not([data-mode="bind"]) .amr-only-bind,
.am-runes:not([data-mode="set"]) .amr-only-set,
.am-runes:not([data-mode="rune"]) .amr-only-rune,
.am-runes[data-mode="set"] .amr-no-set { display: none; }

/* ---------- phones: viewer on top, settings as a sheet below */
@media (max-width: 48rem) {
	.amr-stage { bottom: 45%; }
	.amr-panel {
		top: 55%; left: 0; right: 0; bottom: 0;
		width: auto;
		padding-left: max(var(--space-4, 21px), env(safe-area-inset-left, 0px));
		padding-right: max(var(--space-4, 21px), env(safe-area-inset-right, 0px));
		border-width: 1px 0 0;
		background: var(--amr-surface);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
	.amr-toggle { right: var(--amr-gap); top: var(--amr-gap); }
	.is-panel-closed .amr-stage { bottom: 0; }
	.amr-hint { display: none; }
}

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