/* Alchemic Matter Flexi Case. 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-flexicase {
	--amf-surface: var(--surface, #000);
	--amf-raised: var(--surface-raised, #0b0b0b);
	--amf-line: var(--line, #262626);
	--amf-line-strong: var(--line-strong, #7a7a7a);
	--amf-ink: var(--ink, #f2f2f0);
	--amf-ink-soft: var(--ink-soft, #c6c6c4);
	--amf-ink-muted: var(--ink-muted, #8e8e8c);
	--amf-citrine: var(--citrine, #d6b25a);
	--amf-rubedo: var(--rubedo, #e0684f);
	--amf-mono: var(--font-mono, ui-monospace, Menlo, Consolas, monospace);
	--amf-display: var(--font-display, "Josefin Sans", Futura, sans-serif);
	--amf-body: var(--font-body, "Jost", Futura, sans-serif);
	--amf-gap: var(--space-3, 13px);
	--amf-panel-w: 25rem;

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

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

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

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

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

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

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

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

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

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

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

/* segmented choices: pills, as the configurator plates */
.amf-seg { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px); }
.amf-seg-btn {
	padding: var(--space-1, 5px) var(--space-3, 13px);
	background: transparent;
	color: var(--amf-ink-muted);
	border: 1px solid var(--amf-line);
	border-radius: var(--radius-round, 999px);
	font: 400 12px/21px var(--amf-mono);
	letter-spacing: .08em;
	text-transform: uppercase;
	cursor: pointer;
}
.amf-seg-btn:hover { color: var(--amf-ink); border-color: var(--amf-line-strong); }
.amf-seg-btn[aria-pressed="true"] { color: var(--amf-ink); border-color: var(--amf-ink); }
.amf-seg-num .amf-seg-btn { min-width: 2.4rem; padding-inline: 0; font-variant-numeric: tabular-nums; }
.amf-badge { margin-left: var(--space-1, 5px); color: var(--amf-citrine); }
/* Premium: a small crown, the same mark the site uses for patron-only content. */
.amf-crown {
	display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -.2em;
	background: var(--amf-citrine);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 18h18v2H3zM3 7l4.5 4L12 4l4.5 7L21 7l-2 9H5z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 18h18v2H3zM3 7l4.5 4L12 4l4.5 7L21 7l-2 9H5z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Livelli: la corona base (3 punte) = qualsiasi livello a pagamento e il primo; --2 = 5 punte; --3 = 5 punte con gemme e doppia fascia. */
.amf-crown--2 { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 18h18v2H3zM2 8l2.5 4L7 5l2.5 6L12 3l2.5 8L17 5l2.5 7L22 8l-2 8H4z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 18h18v2H3zM2 8l2.5 4L7 5l2.5 6L12 3l2.5 8L17 5l2.5 7L22 8l-2 8H4z'/%3E%3C/svg%3E"); }
.amf-crown--3 { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17h18v1.6H3zM3 19.4h18v1.6H3zM2.2 9.2l2.4 3.6L7 6.6l2.5 5L12 5l2.5 6.6L17 6.6l2.4 6.2 2.4-3.6-2 6.2H4.2z'/%3E%3Ccircle cx='2.2' cy='7.6' r='1.3'/%3E%3Ccircle cx='7' cy='5' r='1.3'/%3E%3Ccircle cx='12' cy='3.2' r='1.3'/%3E%3Ccircle cx='17' cy='5' r='1.3'/%3E%3Ccircle cx='21.8' cy='7.6' r='1.3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17h18v1.6H3zM3 19.4h18v1.6H3zM2.2 9.2l2.4 3.6L7 6.6l2.5 5L12 5l2.5 6.6L17 6.6l2.4 6.2 2.4-3.6-2 6.2H4.2z'/%3E%3Ccircle cx='2.2' cy='7.6' r='1.3'/%3E%3Ccircle cx='7' cy='5' r='1.3'/%3E%3Ccircle cx='12' cy='3.2' r='1.3'/%3E%3Ccircle cx='17' cy='5' r='1.3'/%3E%3Ccircle cx='21.8' cy='7.6' r='1.3'/%3E%3C/svg%3E"); }

.amf-locked { padding: var(--space-3, 13px) 0; border-top: 1px solid var(--amf-line); }
.amf-locked > .amf-desc { margin: 0 0 var(--space-3, 13px); color: var(--amf-ink-soft); }
.amf-actions-inline { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px); margin: 0; }

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

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

/* sliders: label, value and range on one row */
.amf-range { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0 var(--space-2, 8px); padding: var(--space-2, 8px) 0; }
.amf-range .amf-label { margin: 0; }
.amf-range output { font: 400 12px/21px var(--amf-mono); color: var(--amf-ink); }
.amf-range input[type="range"] { grid-column: 1 / -1; width: 100%; margin: var(--space-1, 5px) 0 0; accent-color: var(--amf-ink); }
.amf-range .amf-desc { grid-column: 1 / -1; margin-top: 2px; }
.amf-text { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2, 8px); }
.amf-input::placeholder { color: var(--amf-ink-muted); }
.amf-locked .amf-btn-primary { margin-right: var(--space-2, 8px); }
.am-flexicase.is-locked .amf-settings { opacity: .45; pointer-events: none; }
.am-flexicase:not([data-closed="1"]) .amf-only-closed { display: none; }

/* ---------- phones: viewer on top, settings as a sheet below */
@media (max-width: 48rem) {
	.amf-stage { bottom: 45%; }
	.amf-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(--amf-surface);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
	.amf-toggle { right: var(--amf-gap); top: var(--amf-gap); }
	.is-panel-closed .amf-stage { bottom: 0; }
	.amf-hint { display: none; }
}

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

/* premium details: greyed until the premium module is there */
.am-flexicase:not(.has-premium) .amf-premium .amf-check,
.am-flexicase:not(.has-premium) .amf-premium .amf-range,
.am-flexicase:not(.has-premium) .amf-premium select { opacity: .5; }
.amf-premium-note:empty { display: none; }
select.amf-input { appearance: auto; }

/* ready-made cases, printer bed and the warning when a piece is too big */
.amf-presets .amf-seg-btn { padding-inline: var(--space-2, 8px); }
.amf-fit { padding: var(--space-3, 13px) 0; border-top: 1px solid var(--amf-line); }
.amf-fit .amf-label { display: block; margin-bottom: var(--space-2, 8px); }
.amf-sizes { font-variant-numeric: tabular-nums; }
.amf-warn {
	margin-top: var(--space-2, 8px);
	padding: var(--space-2, 8px) var(--space-3, 13px);
	border: 1px solid var(--amf-citrine, #e6c200);
	border-radius: var(--radius-sm, 4px);
	color: var(--amf-ink);
	font-size: 13px; line-height: 21px;
}
.amf-warn p { margin: 0; }
.amf-warn p + p { margin-top: var(--space-2, 8px); }
.amf-warn[hidden] { display: none; }
.am-flexicase.is-locked .amf-fit { display: none; }
.amf-stage-warn {
	position: absolute; left: var(--space-4, 21px); top: var(--space-4, 21px); margin: 0;
	padding: var(--space-1, 5px) var(--space-3, 13px);
	border: 1px solid var(--amf-citrine); border-radius: var(--radius-round, 999px);
	background: rgba(0, 0, 0, .7); color: var(--amf-ink);
	font: 400 12px/21px var(--amf-mono); letter-spacing: .08em; text-transform: uppercase;
}
.amf-stage-warn[hidden] { display: none; }