/**
 * MT Type Tester widget — metal playground
 */

.jt-mt-type-tester-widget {
	width: 100%;
	font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 14px;
	line-height: 1.45;
	-webkit-font-smoothing: antialiased;
}

.jt-mt-type-tester-widget .jt-ttp-playground {
	--jt-ttp-bg: #050505;
	--jt-ttp-panel: #080808;
	--jt-ttp-border: rgba(255, 255, 255, 0.14);
	--jt-ttp-border-soft: rgba(255, 255, 255, 0.08);
	--jt-ttp-text: rgba(255, 255, 255, 0.92);
	--jt-ttp-muted: rgba(255, 255, 255, 0.46);
	--jt-ttp-specimen: #ededed;
	--jt-ttp-accent: #c41e2a;
	--jt-ttp-accent-deep: #8f1219;
	--jt-ttp-accent-glow: rgba(143, 18, 25, 0.38);
	--jt-ttp-dd-bg: #0a0707;
	--jt-ttp-dd-bg-elevated: #110c0c;
	--jt-ttp-dd-border: rgba(143, 18, 25, 0.82);
	--jt-ttp-dd-border-soft: rgba(143, 18, 25, 0.32);
	--jt-ttp-field-bg: rgba(255, 255, 255, 0.03);
	--jt-ttp-radius: 4px;
	--jt-ttp-font-ui: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--jt-ttp-font-display: system-ui, sans-serif;
	--jt-ttp-specimen-size: 120px;
	--jt-ttp-specimen-line-height: 0.92;
	--jt-ttp-specimen-letter-spacing: 0.02em;
	position: relative;
	width: min(var(--jt-mt-ttp-max-width, 1800px), 100%);
	margin-top: 0;
	border: 0;
	border-radius: var(--jt-ttp-radius);
	background: var(--jt-ttp-panel);
	overflow: hidden;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
}
.jt-mt-type-tester-widget__message {
	margin: 0;
	padding: 16px 18px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.04);
	color: rgba(255, 255, 255, 0.72);
	font-size: 13px;
	line-height: 1.45;
}

.jt-mt-type-tester-widget .jt-ttp-playground__font-in-use {
	position: relative;
	z-index: 6;
	flex-shrink: 0;
	align-self: center;
	width: 100%;
	max-width: min(520px, 100%);
	margin: 0;
	padding: clamp(20px, 3vw, 32px) 16px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5em;
	text-align: center;
	font-size: 11px;
	line-height: 1.35;
	pointer-events: auto;
}

.jt-mt-type-tester-widget .jt-ttp-playground__preview {
	position: relative;
	isolation: isolate;
	overflow: visible;
	min-height: clamp(320px, 46vw, 500px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding: clamp(40px, 7vw, 68px) clamp(20px, 4vw, 40px) clamp(48px, 8vw, 80px);
	background:
		radial-gradient(ellipse 90% 70% at 50% 40%, rgba(255, 255, 255, 0.03), transparent 70%),
		var(--jt-ttp-bg);
}

.jt-mt-type-tester-widget .jt-ttp-playground__specimen-wrap {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: clamp(170px, 32vw, 360px);
	max-width: 100%;
	text-align: center;
}
.jt-mt-type-tester-widget .jt-ttp-playground__font-in-use-label {
			font-weight: 600;
			letter-spacing: 0.1em;
			text-transform: uppercase;
			color: rgba(255, 255, 255, 0.42);
		}
.jt-mt-type-tester-widget .jt-ttp-playground__font-in-use-link {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	color: rgba(255, 255, 255, 0.92);
	transition: color 0.15s ease;
}
.jt-mt-type-tester-widget .jt-ttp-playground__font-in-use-link:hover,
.jt-mt-type-tester-widget .jt-ttp-playground__font-in-use-link:focus-visible {
	color: var(--jt-ttp-accent);
	outline: none;
}
.jt-mt-type-tester-widget .jt-ttp-playground__specimen {
			position: relative;
			display: inline-block;
			max-width: 100%;
			margin: 0;
			padding: 0 2px;
			border: 0;
			outline: none;
			font-family: var(--jt-ttp-font-display);
			font-size: var(--jt-ttp-specimen-size);
			font-weight: 400;
			line-height: var(--jt-ttp-specimen-line-height);
			letter-spacing: var(--jt-ttp-specimen-letter-spacing);
			color: var(--jt-ttp-specimen);
			white-space: nowrap;
			overflow-wrap: anywhere;
			caret-color: #fff;
			text-shadow:
				0 0 1px rgba(255, 255, 255, 0.35),
				0 2px 12px rgba(0, 0, 0, 0.65);
			filter: contrast(1.08) saturate(0.85);
		}
.jt-mt-type-tester-widget .jt-ttp-playground__preview > :not(.jt-ttp-playground__red-line) {
	position: relative;
	z-index: 1;
}

.jt-mt-type-tester-widget .jt-ttp-playground__preview:hover {
	background: rgba(196, 30, 42, 0.04);
}

.jt-mt-type-tester-widget .jt-ttp-playground__red-line {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 2;
	opacity: 0;
	padding: 2px;
	overflow: hidden;
	transition: opacity 0.18s ease;
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	mask-composite: exclude;
}

.jt-mt-type-tester-widget .jt-ttp-playground__preview:hover > .jt-ttp-playground__red-line {
	opacity: 1;
}

.jt-mt-type-tester-widget .jt-ttp-playground__red-line::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 220%;
	height: 220%;
	transform: translate(-50%, -50%);
	background: conic-gradient(
		from 0deg,
		transparent 0deg 338deg,
		var(--jt-ttp-accent) 338deg 352deg,
		transparent 352deg 360deg
	);
	filter:
		drop-shadow(0 0 2px rgba(255, 120, 130, 0.95))
		drop-shadow(0 0 8px rgba(196, 30, 42, 0.8));
	animation: jt-ttp-red-line-spin 1.15s linear infinite;
}

@keyframes jt-ttp-red-line-spin {
	to {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.jt-mt-type-tester-widget .jt-ttp-playground__red-line::before {
		animation: none;
		transform: translate(-50%, -50%) rotate(20deg);
	}
}

/* —— Controls —— */
.jt-mt-type-tester-widget .jt-ttp-playground__controls {
			position: relative;
			z-index: 5;
			display: flex;
			flex-wrap: wrap;
			align-items: flex-end;
			gap: clamp(14px, 2.2vw, 28px);
			padding: clamp(16px, 2.5vw, 22px) clamp(16px, 2.8vw, 28px) clamp(18px, 2.8vw, 24px);
			background: #060606;
			overflow: visible;
		}
.jt-mt-type-tester-widget .jt-ttp-playground__field {
			position: relative;
			isolation: isolate;
			overflow: visible;
			display: flex;
			flex-direction: column;
			gap: 8px;
			min-width: 0;
			border-radius: 6px;
			padding: 4px;
			margin: -4px;
			transition: background 0.2s ease;
		}
.jt-mt-type-tester-widget .jt-ttp-playground__field-label {
			margin: 0;
			font-size: 10px;
			font-weight: 600;
			letter-spacing: 0.12em;
			text-transform: uppercase;
			color: rgba(255, 255, 255, 0.52);
		}
.jt-mt-type-tester-widget .jt-ttp-playground__size-value {
			flex: 0 0 auto;
			min-width: 3.6em;
			font-size: 11px;
			font-weight: 600;
			letter-spacing: 0.04em;
			text-transform: none;
			text-align: right;
			color: rgba(255, 255, 255, 0.72);
			font-variant-numeric: tabular-nums;
		}
.jt-mt-type-tester-widget .jt-ttp-playground__field--letter-spacing .jt-ttp-playground__size-value {
			min-width: 4.2em;
		}
.jt-mt-type-tester-widget .jt-ttp-playground__field--fonts {
			min-width: min(300px, 100%);
		}
.jt-mt-type-tester-widget .jt-ttp-playground__font-dd {
			position: relative;
			width: min(340px, 100%);
		}
.jt-mt-type-tester-widget .jt-ttp-playground__font-dd-panel {
			position: absolute;
			bottom: calc(100% + 8px);
			left: 0;
			z-index: 30;
			width: 100%;
			max-height: min(360px, 52vh);
			overflow: hidden;
			border: 1px solid var(--jt-ttp-dd-border);
			border-radius: 8px;
			background:
				linear-gradient(180deg, rgba(143, 18, 25, 0.08) 0%, transparent 18%),
				var(--jt-ttp-dd-bg-elevated);
			box-shadow:
				0 0 0 1px rgba(0, 0, 0, 0.65) inset,
				0 0 14px rgba(143, 18, 25, 0.12),
				0 16px 40px rgba(0, 0, 0, 0.55);
		}
.jt-mt-type-tester-widget .jt-ttp-playground__font-dd-panel[hidden] {
			display: none !important;
		}
.jt-mt-type-tester-widget .jt-ttp-playground__font-dd-list {
			margin: 0;
			padding: 6px;
			max-height: min(348px, calc(52vh - 12px));
			overflow-y: auto;
			list-style: none;
			scrollbar-width: thin;
			scrollbar-color: var(--jt-ttp-accent) rgba(255, 255, 255, 0.06);
		}
.jt-mt-type-tester-widget .jt-ttp-playground__font-dd-list::-webkit-scrollbar {
			width: 5px;
		}
.jt-mt-type-tester-widget .jt-ttp-playground__font-dd-list::-webkit-scrollbar-track {
			background: rgba(255, 255, 255, 0.04);
			border-radius: 99px;
		}
.jt-mt-type-tester-widget .jt-ttp-playground__font-dd-list::-webkit-scrollbar-thumb {
			background: linear-gradient(180deg, var(--jt-ttp-accent) 0%, var(--jt-ttp-accent-deep) 100%);
			border-radius: 99px;
		}
.jt-mt-type-tester-widget .jt-ttp-playground__font-dd-option {
			display: block;
			width: 100%;
			margin: 0;
			padding: 11px 12px;
			border: 0;
			border-radius: 6px;
			background: transparent;
			color: inherit;
			font: inherit;
			text-align: left;
			cursor: pointer;
			transition: background 0.15s ease;
		}
.jt-mt-type-tester-widget .jt-ttp-playground__font-dd-option:hover,
.jt-mt-type-tester-widget .jt-ttp-playground__font-dd-option:focus-visible {
			background: rgba(143, 18, 25, 0.16);
			outline: none;
		}
.jt-mt-type-tester-widget .jt-ttp-playground__font-dd-option.is-active {
			background: rgba(143, 18, 25, 0.24);
			box-shadow: inset 0 0 0 1px var(--jt-ttp-dd-border-soft);
		}
.jt-mt-type-tester-widget .jt-ttp-playground__font-dd-option-name {
			display: block;
			font-size: 13px;
			font-weight: 700;
			letter-spacing: 0.06em;
			text-transform: uppercase;
			line-height: 1.25;
			color: rgba(255, 255, 255, 0.94);
		}
.jt-mt-type-tester-widget .jt-ttp-playground__font-dd-option-meta {
			display: block;
			margin-top: 3px;
			font-size: 11px;
			font-weight: 500;
			line-height: 1.35;
			letter-spacing: 0.02em;
			text-transform: uppercase;
			color: rgba(255, 255, 255, 0.42);
		}
.jt-mt-type-tester-widget .jt-ttp-playground__font-dd-trigger {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 12px;
			width: 100%;
			min-height: 48px;
			padding: 10px 12px;
			border: 1px solid var(--jt-ttp-dd-border);
			border-radius: 8px;
			background:
				linear-gradient(180deg, rgba(143, 18, 25, 0.07) 0%, transparent 100%),
				var(--jt-ttp-dd-bg);
			color: var(--jt-ttp-text);
			font: inherit;
			text-align: left;
			cursor: pointer;
			box-shadow: 0 0 10px rgba(143, 18, 25, 0.1);
			transition:
				border-color 0.15s ease,
				box-shadow 0.15s ease,
				background 0.15s ease;
		}
.jt-mt-type-tester-widget .jt-ttp-playground__font-dd-trigger:hover,
.jt-mt-type-tester-widget .jt-ttp-playground__font-dd-trigger:focus-visible {
			border-color: rgba(196, 30, 42, 0.75);
			box-shadow: 0 0 14px rgba(143, 18, 25, 0.18);
			outline: none;
		}
.jt-mt-type-tester-widget .jt-ttp-playground__font-dd.is-open .jt-ttp-playground__font-dd-trigger {
			border-color: rgba(196, 30, 42, 0.85);
			box-shadow: 0 0 16px rgba(143, 18, 25, 0.22);
		}
.jt-mt-type-tester-widget .jt-ttp-playground__font-dd-copy {
			flex: 1 1 auto;
			min-width: 0;
		}
.jt-mt-type-tester-widget .jt-ttp-playground__font-dd-trigger-name {
			display: block;
			font-size: 13px;
			font-weight: 700;
			letter-spacing: 0.05em;
			text-transform: uppercase;
			line-height: 1.25;
			color: rgba(255, 255, 255, 0.94);
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
.jt-mt-type-tester-widget .jt-ttp-playground__font-dd-trigger-meta {
			display: block;
			margin-top: 2px;
			font-size: 10px;
			font-weight: 500;
			letter-spacing: 0.04em;
			text-transform: uppercase;
			color: rgba(255, 255, 255, 0.4);
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
.jt-mt-type-tester-widget .jt-ttp-playground__font-dd-chevron {
			flex: 0 0 auto;
			width: 12px;
			height: 12px;
			color: var(--jt-ttp-accent-deep);
			transition: transform 0.2s ease;
		}
.jt-mt-type-tester-widget .jt-ttp-playground__font-dd.is-open .jt-ttp-playground__font-dd-chevron {
			transform: rotate(180deg);
		}
.jt-mt-type-tester-widget .jt-ttp-playground__font-dd.is-open {
			z-index: 40;
		}

		/* —— Explore Font CTA (bottom-right) —— */
.jt-mt-type-tester-widget .jt-ttp-playground__field--explore {
			flex: 0 0 auto;
			margin-left: auto;
			align-self: flex-end;
			gap: 0;
		}
.jt-mt-type-tester-widget .jt-ttp-playground__explore-btn {
			position: relative;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: 10px;
			overflow: hidden;
			min-height: 48px;
			padding: 0 18px;
			border: 1px solid var(--jt-ttp-dd-border);
			border-radius: 8px;
			background:
				linear-gradient(180deg, rgba(143, 18, 25, 0.12) 0%, transparent 55%),
				var(--jt-ttp-dd-bg);
			color: rgba(255, 255, 255, 0.94);
			font: inherit;
			font-size: 12px;
			font-weight: 700;
			letter-spacing: 0.08em;
			text-transform: uppercase;
			text-decoration: none;
			white-space: nowrap;
			cursor: pointer;
			box-shadow: 0 0 10px rgba(143, 18, 25, 0.08);
			transition:
				border-color 0.2s ease,
				box-shadow 0.2s ease,
				transform 0.2s ease,
				background 0.2s ease;
		}
.jt-mt-type-tester-widget .jt-ttp-playground__explore-btn::before {
			content: "";
			position: absolute;
			top: 0;
			left: -120%;
			width: 75%;
			height: 100%;
			background: linear-gradient(90deg, transparent, rgba(196, 30, 42, 0.28), transparent);
			transform: skewX(-18deg);
			transition: left 0.55s ease;
			pointer-events: none;
		}
.jt-mt-type-tester-widget .jt-ttp-playground__explore-btn:hover::before,
.jt-mt-type-tester-widget .jt-ttp-playground__explore-btn:focus-visible::before {
			left: 140%;
		}
.jt-mt-type-tester-widget .jt-ttp-playground__explore-btn:hover,
.jt-mt-type-tester-widget .jt-ttp-playground__explore-btn:focus-visible {
			border-color: rgba(196, 30, 42, 0.85);
			background:
				linear-gradient(180deg, rgba(143, 18, 25, 0.2) 0%, transparent 60%),
				var(--jt-ttp-dd-bg-elevated);
			box-shadow:
				0 0 20px rgba(143, 18, 25, 0.28),
				0 8px 24px rgba(0, 0, 0, 0.35);
			transform: translateY(-2px) scale(1.02);
			outline: none;
		}
.jt-mt-type-tester-widget .jt-ttp-playground__explore-btn:active {
			transform: translateY(0) scale(0.98);
			box-shadow: 0 0 10px rgba(143, 18, 25, 0.14);
			transition-duration: 0.1s;
		}
.jt-mt-type-tester-widget .jt-ttp-playground__explore-btn-label {
			position: relative;
			z-index: 1;
		}
.jt-mt-type-tester-widget .jt-ttp-playground__explore-btn-arrow {
			position: relative;
			z-index: 1;
			display: inline-flex;
			flex-shrink: 0;
			width: 14px;
			height: 14px;
			color: var(--jt-ttp-accent);
		}
.jt-mt-type-tester-widget .jt-ttp-playground__explore-btn-arrow svg {
			width: 100%;
			height: 100%;
			stroke: currentColor;
			fill: none;
			stroke-width: 2;
			stroke-linecap: round;
			stroke-linejoin: round;
		}
.jt-mt-type-tester-widget .jt-ttp-playground__explore-btn:hover .jt-ttp-playground__explore-btn-arrow,
.jt-mt-type-tester-widget .jt-ttp-playground__explore-btn:focus-visible .jt-ttp-playground__explore-btn-arrow {
			animation: jt-ttp-explore-arrow 0.75s ease-in-out infinite;
		}
.jt-mt-type-tester-widget .jt-ttp-playground__explore-btn:active .jt-ttp-playground__explore-btn-arrow {
			animation: none;
			transform: translateX(4px);
		}
@keyframes jt-ttp-explore-arrow {
			0%,
			100% {
				transform: translateX(0);
			}

			50% {
				transform: translateX(5px);
			}
		}
@media (prefers-reduced-motion: reduce) {
.jt-mt-type-tester-widget .jt-ttp-playground__explore-btn::before {
				display: none;
			}
.jt-mt-type-tester-widget .jt-ttp-playground__explore-btn:hover .jt-ttp-playground__explore-btn-arrow,
.jt-mt-type-tester-widget .jt-ttp-playground__explore-btn:focus-visible .jt-ttp-playground__explore-btn-arrow {
				animation: none;
				transform: translateX(3px);
			}
		}
.jt-mt-type-tester-widget .jt-ttp-playground__field--size,
.jt-mt-type-tester-widget .jt-ttp-playground__field--line-height,
.jt-mt-type-tester-widget .jt-ttp-playground__field--letter-spacing {
			flex: 1 1 180px;
			min-width: min(220px, 100%);
		}
.jt-mt-type-tester-widget .jt-ttp-playground__slider-row {
			display: flex;
			align-items: center;
			gap: 12px;
		}
.jt-mt-type-tester-widget .jt-ttp-playground__range {
			flex: 1 1 auto;
			appearance: none;
			-webkit-appearance: none;
			height: 3px;
			margin: 0;
			border-radius: 999px;
			background: linear-gradient(
				to right,
				var(--jt-ttp-accent) 0%,
				var(--jt-ttp-accent) 42%,
				rgba(255, 255, 255, 0.12) 42%,
				rgba(255, 255, 255, 0.12) 100%
			);
			cursor: pointer;
		}
.jt-mt-type-tester-widget .jt-ttp-playground__range::-webkit-slider-thumb {
			-webkit-appearance: none;
			width: 14px;
			height: 14px;
			border: 0;
			border-radius: 50%;
			background: var(--jt-ttp-accent);
			box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35);
			cursor: pointer;
		}
.jt-mt-type-tester-widget .jt-ttp-playground__range::-moz-range-thumb {
			width: 14px;
			height: 14px;
			border: 0;
			border-radius: 50%;
			background: var(--jt-ttp-accent);
			box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35);
			cursor: pointer;
		}
@media (max-width: 860px) {
.jt-mt-type-tester-widget .jt-ttp-playground__controls {
				display: grid;
				grid-template-columns: 1fr 1fr;
			}
.jt-mt-type-tester-widget .jt-ttp-playground__field--size,
.jt-mt-type-tester-widget .jt-ttp-playground__field--line-height,
.jt-mt-type-tester-widget .jt-ttp-playground__field--letter-spacing {
				grid-column: 1 / -1;
			}
.jt-mt-type-tester-widget .jt-ttp-playground__field--explore {
				grid-column: 1 / -1;
				justify-self: end;
				margin-left: 0;
			}
		}
@media (max-width: 520px) {
.jt-mt-type-tester-widget .jt-ttp-playground__controls {
				grid-template-columns: 1fr;
			}
.jt-mt-type-tester-widget .jt-ttp-playground__specimen {
				font-size: var(--jt-ttp-specimen-size);
				white-space: normal;
			}
		}