/* Lynxwell Tint Simulator
   Tokens live on .lts so a page can host several instances with different
   palettes. Every rule is scoped under .lts and most carry two class levels of
   specificity, so an opinionated theme (Astra, Kadence, Blocksy) cannot reach
   inside and restyle the tool. */

.lts {
	--lts-bg: #0F0D08;
	--lts-surface: #17130D;
	--lts-border: #2B2419;
	--lts-text: #F7F3EC;
	--lts-muted: #A2988A;
	--lts-primary: #F5A623;
	--lts-track: #2B2419;
	--lts-slider: var(--lts-primary);
	--lts-primary-2: #FFC94A;
	--lts-on-primary: #150F06;
	--lts-max: 1152px;
	--lts-radius: 12px;
	--lts-radius-sm: 6px;
	--lts-gap: 24px;
	--lts-display: "Bebas Neue", "Oswald", "Archivo Narrow", "Barlow Condensed", Impact, system-ui, sans-serif;
	--lts-heading-weight: 400;
	--lts-heading-spacing: 0.02em;
	--lts-heading-size: 64px;
	--lts-heading-color: var(--lts-text);
	--lts-step-size: 26px;
	--lts-body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	display: block;
	background: var(--lts-bg);
	color: var(--lts-text);
	font-family: var(--lts-body);
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

.lts *,
.lts *::before,
.lts *::after {
	box-sizing: border-box;
}

/* Theme reset. Astra and friends style bare h2 / h3 / p / button / input inside
   the content area, so those defaults are stripped first and the component
   styles below reapply what is wanted. */

.lts section,
.lts header,
.lts aside,
.lts div,
.lts h2,
.lts h3,
.lts p,
.lts span,
.lts label,
.lts a,
.lts button,
.lts input {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	font-style: normal;
	line-height: inherit;
	letter-spacing: normal;
	text-transform: none;
	text-align: left;
	text-decoration: none;
	text-shadow: none;
	min-height: 0;
	min-width: 0;
	max-width: none;
	float: none;
	clear: none;
	transition: none;
}

.lts button,
.lts input {
	-webkit-appearance: none;
	appearance: none;
	width: auto;
	height: auto;
	outline-offset: 2px;
}

.lts__inner {
	max-width: var(--lts-max);
	margin: 0 auto;
	padding: 64px 20px;
}

/* Header ------------------------------------------------------------------ */

.lts .lts__head {
	margin-bottom: 40px;
}

.lts .lts__eyebrow {
	font-family: var(--lts-body) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	line-height: 1.4;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--lts-primary);
}

.lts .lts__title {
	margin-top: 16px;
	font-family: var(--lts-display) !important;
	font-size: clamp(34px, 6vw, var(--lts-heading-size)) !important;
	font-weight: var(--lts-heading-weight) !important;
	line-height: 0.98 !important;
	letter-spacing: var(--lts-heading-spacing);
	text-transform: uppercase;
	color: var(--lts-heading-color);
}

.lts .lts__intro {
	margin-top: 16px;
	max-width: 42em;
	font-size: 16px;
	line-height: 1.6;
	color: var(--lts-muted);
}

/* Layout ------------------------------------------------------------------ */

.lts .lts__grid {
	display: grid;
	gap: var(--lts-gap);
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 1024px) {
	.lts .lts__grid {
		grid-template-columns: 1.6fr 1fr;
	}
}

.lts .lts__stage,
.lts .lts__panel {
	border: 1px solid var(--lts-border);
	border-radius: var(--lts-radius);
	background: var(--lts-surface);
}

.lts .lts__stage {
	overflow: hidden;
}

.lts .lts__canvas-wrap {
	position: relative;
	min-height: 160px;
}

.lts .lts__canvas {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	cursor: crosshair;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.lts.is-wand .lts__canvas {
	cursor: pointer;
}

.lts.is-erasing .lts__canvas {
	cursor: cell;
}

.lts.is-poly .lts__canvas {
	cursor: crosshair;
}

.lts.is-edit .lts__canvas {
	cursor: grab;
}

.lts.is-box .lts__canvas {
	cursor: crosshair;
}

/* The close button only matters while a shape is being traced. */
.lts .lts__pill--shape {
	display: none;
}

.lts.is-poly .lts__pill--shape {
	display: inline-block;
}

.lts .lts__status {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 16px;
	padding: 10px 14px;
	border-radius: 8px;
	text-align: center;
	font-size: 13px;
	line-height: 1.4;
	color: var(--lts-text);
	background: rgba(10, 12, 16, 0.86);
}

.lts .lts__status[hidden] {
	display: none;
}

/* Toolbar ----------------------------------------------------------------- */

.lts .lts__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px;
	border-top: 1px solid var(--lts-border);
	font-size: 12px;
	line-height: 1.4;
	color: var(--lts-muted);
}

.lts .lts__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.lts .lts__pill {
	touch-action: manipulation;
	border: 1px solid var(--lts-border);
	border-radius: 999px;
	padding: 9px 14px;
	min-height: 38px;
	font-family: var(--lts-body) !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--lts-muted);
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.lts .lts__pill:hover:not(:disabled),
.lts .lts__pill:focus-visible {
	color: var(--lts-primary);
	border-color: var(--lts-primary);
	background: transparent;
}

.lts .lts__pill:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.lts .lts__pill.is-active {
	color: var(--lts-primary);
	border-color: var(--lts-primary);
}

.lts .lts__pill--solid {
	border-color: transparent;
	background-image: linear-gradient(100deg, var(--lts-primary), var(--lts-primary-2));
	color: var(--lts-on-primary);
}

.lts .lts__pill--solid:hover:not(:disabled),
.lts .lts__pill--solid:focus-visible {
	color: var(--lts-on-primary);
	border-color: transparent;
	background-image: linear-gradient(100deg, var(--lts-primary), var(--lts-primary-2));
	filter: brightness(1.07);
}

/* Panel ------------------------------------------------------------------- */

.lts .lts__panel {
	padding: 24px;
	display: grid;
	gap: 28px;
	align-content: start;
}

.lts .lts__step-title {
	margin-top: 4px;
	font-family: var(--lts-display) !important;
	font-size: var(--lts-step-size) !important;
	font-weight: var(--lts-heading-weight) !important;
	line-height: 1.1 !important;
	letter-spacing: var(--lts-heading-spacing);
	color: var(--lts-heading-color);
}

.lts .lts__diag {
	margin: 16px 0 0;
	padding: 12px 14px;
	border: 1px solid var(--lts-primary);
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.55);
	color: var(--lts-text);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11px;
	line-height: 1.6;
	white-space: pre;
	overflow-x: auto;
}

.lts .lts__drop {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 12px;
	padding: 24px 16px;
	text-align: center;
	font-size: 14px;
	line-height: 1.4;
	color: var(--lts-muted);
	border: 1px dashed var(--lts-border);
	border-radius: 8px;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.lts .lts__drop:hover,
.lts .lts__drop.is-dragging {
	color: var(--lts-primary);
	border-color: var(--lts-primary);
}

.lts .lts__file {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.lts .lts__file:focus-visible + span {
	outline: 2px solid var(--lts-primary);
	outline-offset: 4px;
}

.lts .lts__note {
	margin-top: 8px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--lts-muted);
}

.lts .lts__note--tone {
	font-size: 14px;
}

.lts .lts__presets {
	display: grid;
	/* Six tones do not fit across a narrow panel, so they wrap instead of being
	   squeezed until the labels break. */
	grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
	gap: 8px;
	margin-top: 12px;
}

@media (min-width: 1024px) {
	.lts .lts__presets {
		grid-template-columns: repeat(var(--lts-cols, 5), minmax(0, 1fr));
	}
}

@media (min-width: 1024px) and (max-width: 1240px) {
	.lts .lts__presets {
		grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
	}
}

.lts .lts__preset {
	touch-action: manipulation;
	border: 1px solid var(--lts-border);
	border-radius: var(--lts-radius-sm);
	padding: 14px 2px;
	min-height: 46px;
	text-align: center;
	font-family: var(--lts-body) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	line-height: 1.2;
	color: var(--lts-muted);
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.lts .lts__preset:hover {
	border-color: rgba(255, 255, 255, 0.35);
}

.lts .lts__preset.is-active {
	border-color: var(--lts-primary);
	color: var(--lts-primary);
}

.lts .lts__drop {
	touch-action: manipulation;
}

.lts .lts__range {
	/* Set here as well as in the reset: a theme that styles range inputs will
	   otherwise put the browser's own track back, which is the pale bar that
	   ignored the tone. */
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	display: block;
	width: 100%;
	height: 20px;
	margin-top: 16px;
	padding: 0;
	border: 0;
	background: transparent !important;
	box-shadow: none;
	cursor: pointer;
	/* If a browser ever ignores all of the above, its native slider at least
	   comes out in the right colour. */
	accent-color: var(--lts-slider);
}

/* Chrome and Safari draw their own track on top of anything set on the input
   itself, which is why the bar looked wrong. The track has to be styled. */
.lts .lts__range::-webkit-slider-runnable-track {
	height: 6px !important;
	border: 0 !important;
	border-radius: 999px !important;
	box-shadow: none !important;
	background: linear-gradient(90deg, var(--lts-slider) 0%, var(--lts-slider) var(--lts-fill, 50%), var(--lts-track, #2B2419) var(--lts-fill, 50%), var(--lts-track, #2B2419) 100%) !important;
}

.lts .lts__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	margin-top: -6px;
	border: 0;
	border-radius: 50%;
	background: var(--lts-slider);
	box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.6);
	cursor: grab;
}

.lts .lts__range:active::-webkit-slider-thumb {
	cursor: grabbing;
}

.lts .lts__range::-moz-range-track {
	height: 6px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--lts-track, #2B2419) !important;
}

.lts .lts__range::-moz-range-progress {
	height: 6px !important;
	border-radius: 999px !important;
	background: var(--lts-slider) !important;
}

.lts .lts__range::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border: 0;
	border-radius: 50%;
	background: var(--lts-slider);
	box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.6);
	cursor: grab;
}

.lts .lts__range:focus-visible::-webkit-slider-thumb,
.lts .lts__range:focus-visible::-moz-range-thumb {
	outline: 2px solid var(--lts-primary);
	outline-offset: 3px;
}

.lts .lts__cta {
	touch-action: manipulation;
	display: block;
	padding: 14px 24px;
	border-radius: 999px;
	text-align: center;
	font-family: var(--lts-body) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--lts-on-primary);
	background-image: linear-gradient(100deg, var(--lts-primary), var(--lts-primary-2));
	box-shadow: 0 12px 30px -12px var(--lts-primary);
	transition: filter 0.15s ease, transform 0.15s ease;
}

.lts .lts__cta:hover,
.lts .lts__cta:focus {
	color: var(--lts-on-primary);
	text-decoration: none;
	filter: brightness(1.07);
	transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
	.lts .lts__pill,
	.lts .lts__preset,
	.lts .lts__drop,
	.lts .lts__cta {
		transition: none;
	}

	.lts .lts__cta:hover {
		transform: none;
	}
}

@media (max-width: 600px) {
	.lts .lts__inner {
		padding: 40px 16px;
	}

	.lts .lts__bar {
		justify-content: flex-start;
	}

	.lts .lts__panel {
		padding: 20px;
	}
}