/* Preview specimen poster — All Glyphs A–Z / 0–9 · 1080 × 1350 */
.fx-specimen-layout {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	width: 100%;
	min-width: 0;
}

.fx-specimen-posters {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 16px;
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	padding-bottom: 4px;
}

.fx-specimen-editor {
	flex: 0 0 220px;
	width: 220px;
	max-width: 100%;
	border: 1px solid rgba(15, 23, 42, 0.1);
	border-radius: 8px;
	background: #f3f4f6;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.fx-specimen-editor__head {
	display: flex;
	align-items: center;
	min-height: 36px;
	padding: 0 12px;
	background: #0061ff;
	color: #fff;
}

.fx-specimen-editor__title {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1;
}

.fx-specimen-editor__body {
	display: flex;
	flex-direction: column;
	padding: 4px 0;
}

.fx-specimen-editor__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0;
	padding: 10px 12px;
	border-bottom: 1px solid rgba(15, 23, 42, 0.08);
	cursor: pointer;
}

.fx-specimen-editor__row:last-child {
	border-bottom: 0;
}

.fx-specimen-editor__row--text {
	flex-direction: column;
	align-items: stretch;
	gap: 6px;
	cursor: default;
}

.fx-specimen-editor__label {
	font-size: 12px;
	font-weight: 600;
	color: #4b5563;
	line-height: 1.2;
}

.fx-specimen-editor__row input[type='color'] {
	width: 32px;
	height: 24px;
	padding: 0;
	border: 1px solid rgba(15, 23, 42, 0.18);
	border-radius: 5px;
	background: #fff;
	cursor: pointer;
	flex-shrink: 0;
}

.fx-specimen-editor__row input[type='color']::-webkit-color-swatch-wrapper {
	padding: 2px;
}

.fx-specimen-editor__row input[type='color']::-webkit-color-swatch {
	border: none;
	border-radius: 3px;
}

.fx-specimen-editor__row input[type='text'] {
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 7px 9px;
	border: 1px solid rgba(15, 23, 42, 0.14);
	border-radius: 6px;
	background: #fff;
	color: #111827;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
}

.fx-specimen-editor__row input[type='text']:focus {
	outline: 2px solid rgba(0, 97, 255, 0.35);
	outline-offset: 0;
	border-color: #0061ff;
}

.fx-specimen-editor__sliders {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 10px 12px 14px;
	border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.fx-specimen-editor__slider {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 11px;
	font-weight: 600;
	color: #4b5563;
	white-space: nowrap;
	cursor: pointer;
}

.fx-specimen-editor__slider > span {
	flex: 0 0 78px;
	min-width: 0;
	line-height: 1.2;
	white-space: normal;
}

.fx-specimen-editor__slider input[type='range'] {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	margin: 0;
	/* Keep custom square thumbs (global range styles); do not force blue accent */
	accent-color: transparent;
	cursor: pointer;
}

.fx-specimen-editor__slider strong {
	flex: 0 0 28px;
	min-width: 28px;
	font-size: 12px;
	font-weight: 700;
	color: #111827;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.fx-specimen-editor__actions {
	padding: 12px;
	border-top: 1px solid rgba(15, 23, 42, 0.08);
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.fx-specimen-editor__format {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
}

.fx-specimen-editor__format-btn {
	appearance: none;
	height: 32px;
	margin: 0;
	padding: 0 10px;
	border: 1px solid rgba(15, 23, 42, 0.14);
	border-radius: 6px;
	background: #fff;
	color: #4b5563;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	cursor: pointer;
}

.fx-specimen-editor__format-btn.is-active {
	background: #111827;
	border-color: #111827;
	color: #fff;
}

.fx-specimen-editor__download {
	width: 100%;
	justify-content: center;
}

html[data-fx-theme='dark'] .fx-specimen-editor {
	background: #1a1d24;
	border-color: rgba(255, 255, 255, 0.1);
	box-shadow: none;
}

html[data-fx-theme='dark'] .fx-specimen-editor__row {
	border-bottom-color: rgba(255, 255, 255, 0.08);
}

html[data-fx-theme='dark'] .fx-specimen-editor__label,
html[data-fx-theme='dark'] .fx-specimen-editor__slider {
	color: rgba(255, 255, 255, 0.72);
}

html[data-fx-theme='dark'] .fx-specimen-editor__slider strong {
	color: #ffffff;
}

html[data-fx-theme='dark'] .fx-specimen-editor__row input[type='text'] {
	background: #0f1115;
	border-color: rgba(255, 255, 255, 0.14);
	color: #ffffff;
}

html[data-fx-theme='dark'] .fx-specimen-editor__row input[type='color'] {
	background: #0f1115;
	border-color: rgba(255, 255, 255, 0.18);
}

html[data-fx-theme='dark'] .fx-specimen-editor__sliders,
html[data-fx-theme='dark'] .fx-specimen-editor__actions {
	border-top-color: rgba(255, 255, 255, 0.08);
}

html[data-fx-theme='dark'] .fx-specimen-editor__format-btn {
	background: #0f1115;
	border-color: rgba(255, 255, 255, 0.16);
	color: rgba(255, 255, 255, 0.78);
}

html[data-fx-theme='dark'] .fx-specimen-editor__format-btn.is-active {
	background: #ffffff;
	border-color: #ffffff;
	color: #000000;
}

html[data-fx-theme='dark'] .fx-specimen-editor__slider input[type='range'] {
	--fx-range-fill: #ffffff;
	--fx-range-track: rgba(255, 255, 255, 0.22);
	--fx-range-thumb: #ffffff;
	accent-color: transparent;
}

html[data-fx-theme='dark'] .fx-specimen-editor__download.fx-btn--primary {
	background: #ffffff;
	color: #000000;
	border-color: #ffffff;
}

html[data-fx-theme='dark'] .fx-specimen-editor__download.fx-btn--primary:hover {
	background: #e5e5e5;
	color: #000000;
}

.fx-specimen {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: 6px;
	cursor: pointer;
	outline: none;
}

.fx-specimen__label {
	display: block;
	align-self: flex-start;
	margin: 0;
	padding: 0 2px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.2;
	color: #6b7280;
	user-select: none;
	transition: color 0.15s ease;
}

.fx-specimen.is-active .fx-specimen__label {
	color: #111827;
	font-weight: 700;
}

.fx-specimen.is-active .fx-specimen__board {
	box-shadow:
		0 0 0 2px #0061ff,
		0 18px 48px rgba(15, 23, 42, 0.14);
}

.fx-specimen--run .fx-specimen__board {
	--fx-specimen-tracking: 0;
}

.fx-specimen__board {
	--fx-specimen-yellow: #000000;
	--fx-specimen-ink: #ffffff;
	--fx-specimen-foot-bg: #ffffff;
	--fx-specimen-foot-ink: #0a0a0a;
	--fx-specimen-glyph-size: 96;
	--fx-specimen-tracking: -16;
	--fx-specimen-leading: 0.8;
	--fx-specimen-group-scale: 1.3;
	/* Layout always uses reference size 70; Font size only scales the drawing */
	--fx-sp-unit: calc(100cqw / 1080);
	--fx-sp-glyph-scale: 2.23;
	--fx-sp-base: calc(70 * var(--fx-sp-unit) * var(--fx-sp-glyph-scale));
	--fx-sp-zoom: calc(var(--fx-specimen-glyph-size, 96) / 70);
	--fx-sp-track: calc(var(--fx-specimen-tracking, -16) * var(--fx-sp-unit) * var(--fx-sp-glyph-scale));
	--fx-sp-lead: calc((var(--fx-specimen-leading, 0.8) - 1) * 70 * var(--fx-sp-unit) * var(--fx-sp-glyph-scale));
	--fx-specimen-w: 1080;
	--fx-specimen-h: 1350;
	container-type: inline-size;
	container-name: fx-specimen;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 2.5cqw;
	/* Same size as before (1080×1350 fit) — two posters scroll horizontally if needed */
	width: min(1080px, calc((100dvh - 160px) * 1080 / 1350));
	aspect-ratio: 1080 / 1350;
	height: auto;
	max-height: min(1350px, calc(100dvh - 160px));
	margin: 0;
	padding: 4cqw 0 0;
	box-sizing: border-box;
	border-radius: 4px;
	background: var(--fx-specimen-yellow);
	color: var(--fx-specimen-ink);
	box-shadow: 0 18px 48px rgba(15, 23, 42, 0.14);
	overflow: hidden;
}

.fx-specimen__glyphs {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	min-height: 0;
	width: 100%;
	/* Scale all glyphs as one group (spacing included) */
	transform: scale(var(--fx-specimen-group-scale, 1.3));
	transform-origin: center center;
}

.fx-specimen__glyphs--run {
	align-items: center;
	justify-content: center;
	padding: 2cqw 5cqw 1cqw;
	box-sizing: border-box;
	/* Do NOT scale this wrapper — transform would paint over the footer */
	transform: none;
	overflow: hidden;
	isolation: isolate;
}

.fx-specimen__run {
	flex: 1 1 auto;
	align-self: stretch;
	width: 100%;
	min-height: 0;
	margin: 0;
	padding: 1cqw 0;
	box-sizing: border-box;
	outline: none;
	border: 0;
	background: transparent;
	color: var(--fx-specimen-ink);
	font-family: "FontxsisPreview", "Plus Jakarta Sans", system-ui, sans-serif;
	font-size: calc(var(--fx-sp-base) * var(--fx-sp-zoom));
	font-weight: 400;
	line-height: var(--fx-specimen-leading, 0.8);
	letter-spacing: var(--fx-sp-track);
	text-align: center;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	word-break: break-word;
	caret-color: var(--fx-specimen-ink);
	cursor: text;
	overflow: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-user-select: text;
	user-select: text;
	/* Scale typed text inside the clipped canvas only */
	transform: scale(var(--fx-specimen-group-scale, 1.3));
	transform-origin: center center;
	/* Center glyph text in the canvas */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.fx-specimen__run::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

.fx-specimen__run:focus {
	outline: none;
}

.fx-specimen__run:empty::before {
	content: attr(data-placeholder);
	color: var(--fx-specimen-ink);
	opacity: 0.28;
	pointer-events: none;
}

.fx-specimen__rows {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex: 0 0 auto;
	min-height: 0;
	gap: 0;
	padding-inline: 3cqw;
	box-sizing: border-box;
	overflow: visible;
}

.fx-specimen__row {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0;
	height: var(--fx-sp-base);
	width: auto;
	max-width: 100%;
	flex-shrink: 0;
	margin: 0;
	margin-bottom: var(--fx-sp-lead);
	overflow: visible;
}

.fx-specimen__row:last-child {
	margin-bottom: 0;
}

.fx-specimen__glyph {
	appearance: none;
	flex: 0 0 auto;
	/* Layout box stays at reference size 70 — tracking/leading unaffected */
	width: var(--fx-sp-base);
	height: var(--fx-sp-base);
	margin: 0;
	margin-inline-end: var(--fx-sp-track);
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--fx-specimen-ink);
	font-family: "Plus Jakarta Sans", system-ui, sans-serif;
	font-size: var(--fx-sp-base);
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0;
	text-align: center;
	text-transform: uppercase;
	cursor: pointer;
	display: grid;
	place-items: center;
	overflow: visible;
	/* Font size = scale drawing only (does not change layout spacing) */
	transform: scale(var(--fx-sp-zoom));
	transform-origin: center center;
}

.fx-specimen__glyph:last-child {
	margin-inline-end: 0;
}

.fx-specimen__glyph.is-filled {
	opacity: 1;
	font-size: 0;
	line-height: 0;
}

.fx-specimen__glyph .fx-specimen__outline,
.fx-specimen__glyph .fx-glyph-preview {
	width: 100%;
	height: 100%;
	max-height: 100%;
	display: block;
	pointer-events: none;
	color: var(--fx-specimen-ink);
}

.fx-specimen__glyph.is-ghost {
	font-family: "Plus Jakarta Sans", system-ui, sans-serif;
	font-weight: 800;
	opacity: 0.22;
}

.fx-specimen__glyph:hover {
	opacity: 1;
	filter: brightness(0.92);
}

.fx-specimen__glyph.is-ghost:hover {
	opacity: 0.4;
	filter: none;
}

.fx-specimen__foot {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	column-gap: 2.5cqw;
	flex-shrink: 0;
	align-self: stretch;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin: 1.2cqw 0 0;
	padding: 2.4cqw 5cqw 2.6cqw;
	background: var(--fx-specimen-foot-bg);
	color: var(--fx-specimen-foot-ink);
	position: relative;
	z-index: 2;
}

.fx-specimen__foot-designed {
	justify-self: center;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.25cqw;
	text-align: left;
	font-size: 1.35cqw;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.25;
	color: var(--fx-specimen-foot-ink);
	max-width: 36cqw;
}

.fx-specimen__foot-designed-label {
	font-weight: 600;
	opacity: 0.78;
}

.fx-specimen__foot-designed-name {
	font-weight: 800;
	letter-spacing: -0.01em;
}

@media (max-width: 1100px) {
	.fx-specimen-posters {
		justify-content: center;
	}
}

@media (max-width: 720px) {
	.fx-specimen-layout {
		flex-direction: column;
		align-items: stretch;
	}

	.fx-specimen-editor {
		flex-basis: auto;
		width: 100%;
	}

	.fx-specimen-posters {
		flex-direction: column;
		align-items: center;
		overflow-x: visible;
	}

	.fx-specimen__board {
		width: min(1080px, 100%, calc((100dvh - 160px) * 1080 / 1350));
	}
}

.fx-specimen__foot-name {
	justify-self: end;
	font-family: "FontxsisPreview", "Plus Jakarta Sans", system-ui, sans-serif;
	font-size: 3.6cqw;
	font-weight: 400;
	letter-spacing: -0.03em;
	line-height: 1.1;
	color: var(--fx-specimen-foot-ink);
	text-align: right;
}

.fx-specimen__foot-credit {
	justify-self: start;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.3cqw;
	flex-shrink: 0;
	font-size: 1.5cqw;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: var(--fx-specimen-foot-ink);
	text-align: left;
}

.fx-specimen__foot-credit-line {
	display: inline-flex;
	align-items: center;
	gap: 0.9cqw;
	white-space: nowrap;
}

.fx-specimen__foot-logo {
	width: 2.1cqw;
	height: 2.1cqw;
	min-width: 14px;
	min-height: 14px;
	display: block;
	object-fit: contain;
	border-radius: 0.4cqw;
}

.fx-specimen__foot-brand {
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--fx-specimen-foot-ink);
}

.fx-specimen__foot-slogan {
	display: block;
	max-width: 40cqw;
	font-size: 1.2cqw;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.25;
	opacity: 0.78;
	color: var(--fx-specimen-foot-ink);
	white-space: normal;
}

@media (max-width: 560px) {
	.fx-specimen__foot {
		grid-template-columns: 1fr;
		row-gap: 2cqw;
		justify-items: start;
	}

	.fx-specimen__foot-designed,
	.fx-specimen__foot-name {
		justify-self: start;
	}

	.fx-specimen__foot-name {
		text-align: left;
	}
}