/* ChromaLab — Color filter widget
   Layout:
     .chromalab                         flex row, align-items: flex-start
     ├── .chromalab__center             flex row, align-items: stretch
     │   ├── .chromalab__sidebar        vertical CHROMALAB title
     │   └── .chromalab__stack          column: body + precision
     │       ├── .chromalab__body       row: wheel-wrapper + lightness
     │       └── .chromalab__precision  horizontal tolerance slider
     └── .chromalab__finish-filters     vertical text list, flex: 1

   The sidebar lives inside .chromalab__center, not at the root, so its
   height is bound to the stack's height (B → top of wheel, C → bottom
   of precision). The finish-filters column stretches to match that same
   height (align-self: stretch) and wraps into a 2nd column if needed. */

.chromalab {
	--cl-wheel: 210px;
	--cl-tool: 36px;
	--cl-gap: 20px;
	--cl-gap-body: 24px;
	--cl-gap-tag: 10px;
	--cl-color-text: #171717;
	--cl-color-muted: #a3a3a3;
	--cl-color-border: #e5e5e5;
	--cl-color-track: #f0f0f0;

	display: flex;
	align-items: flex-start;
	gap: var(--cl-gap);
	padding: var(--cl-gap);
	background: transparent;
	width: 100%;
	box-sizing: border-box;
}

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

/* === Sidebar + stack (paired so sidebar matches stack height) === */

.chromalab__center {
	display: flex;
	align-items: stretch;
	gap: var(--cl-gap-body);
	flex-shrink: 0;
}

.chromalab__sidebar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.chromalab__title {
	writing-mode: vertical-lr;
	transform: rotate(180deg);
	/* Starting size — the real size is set by JS on init/resize to match
	   the sidebar height exactly (glyph advance in vertical writing modes
	   is font-metric dependent, so a pure CSS calc is unreliable). */
	font-size: 20px;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
	user-select: none;
}

.chromalab__title-chroma {
	font-weight: 800;
	color: var(--cl-color-text);
	text-shadow: 0 0 8px rgba(0, 0, 0, 0.08);
}

.chromalab__title-lab {
	font-weight: 300;
	color: var(--cl-color-muted);
}

.chromalab__stack {
	display: flex;
	flex-direction: column;
	gap: var(--cl-gap);
	flex-shrink: 0;
}

/* === Body: wheel + lightness slider === */

.chromalab__body {
	display: flex;
	align-items: stretch;
	gap: var(--cl-gap-body);
}

.chromalab__wheel-wrapper {
	position: relative;
	flex-shrink: 0;
	width: var(--cl-wheel);
	display: flex;
	flex-direction: column;
	gap: 8px;
	line-height: 0;
}

.chromalab__wheel-tools {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: var(--cl-tool);
}

.chromalab__wheel {
	position: relative;
	width: var(--cl-wheel);
	height: var(--cl-wheel);
	touch-action: none;
	border-radius: 50%;
	overflow: hidden;
}

/* Tolerance halo (overlay on wheel) */
.chromalab__halo {
	position: absolute;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.08);
	border: 1.5px solid rgba(0, 0, 0, 0.15);
	pointer-events: none;
	transform: translate(-50%, -50%);
	transition: width 0.15s ease, height 0.15s ease;
	z-index: 1;
}

/* === Wheel tools (camera + reset), in a row above the wheel === */

.chromalab__tool {
	width: var(--cl-tool);
	height: var(--cl-tool);
	padding: 0;
	border: 1px solid var(--cl-color-border);
	border-radius: 50%;
	background: #fff;
	color: #525252;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

/* Reserve space for the camera button even when hidden, so the reset
   button stays right-aligned and the layout doesn't shift. */
.chromalab__tool[hidden] {
	visibility: hidden;
	display: inline-flex;
}

.chromalab__tool:hover,
.chromalab__tool:focus-visible {
	border-color: var(--cl-color-text);
	color: var(--cl-color-text);
	outline: none;
}

.chromalab__tool:active { background: #f5f5f5; }

/* === Lightness (vertical slider + label) === */

.chromalab__lightness {
	display: flex;
	align-items: flex-end;
	gap: 8px;
}

.chromalab__lightness-slider {
	align-self: stretch;
	position: relative;
	width: 12px;
	background: linear-gradient(to bottom, #fff, var(--lightness-mid, #808080), #000);
	border-radius: 9999px;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* Vertical range via writing-mode. The input is sized to exactly the
   slider's width (12px) so the thumb centers natively over the track.
   Value axis goes 0 (top) → 100 (bottom) natively; the JS side flips it
   so the bright end of the gradient is at the top. */
.chromalab .chromalab__lightness-slider input[type="range"] {
	position: absolute;
	inset: 0;
	writing-mode: vertical-lr;
	width: 100%;
	height: 100%;
	cursor: ns-resize;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	border: 0;
	outline: none;
	margin: 0;
	padding: 0;
	z-index: 2;
}

.chromalab .chromalab__lightness-slider input[type="range"]::-webkit-slider-runnable-track { background: transparent; border: 0; width: 100%; }
.chromalab .chromalab__lightness-slider input[type="range"]::-moz-range-track           { background: transparent; border: 0; width: 100%; }
.chromalab .chromalab__lightness-slider input[type="range"]::-moz-range-progress         { background: transparent; }

.chromalab .chromalab__lightness-slider input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--precision-color, var(--cl-color-muted));
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.chromalab .chromalab__lightness-slider input[type="range"]::-moz-range-thumb {
	-moz-appearance: none;
	appearance: none;
	box-sizing: border-box;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--precision-color, var(--cl-color-muted));
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.chromalab__lightness-label {
	writing-mode: vertical-lr;
	transform: rotate(180deg);
	user-select: none;
	order: -1;
}

/* === Precision (horizontal tolerance slider + dots) === */

.chromalab__precision-label {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 8px;
}

.chromalab__tolerance {
	display: flex;
	align-items: center;
	gap: 12px;
}

.chromalab__tolerance-track {
	position: relative;
	flex: 1;
	height: 12px;
	background: var(--cl-color-track);
	border-radius: 9999px;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}

.chromalab__tolerance-track::before {
	content: '';
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--precision-pct, 25%);
	background: var(--precision-color, var(--cl-color-muted));
	border-radius: 9999px;
	transition: width 0.1s ease;
}

.chromalab .chromalab__tolerance-track input[type="range"] {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 100%;
	height: 40px;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	border: 0;
	outline: none;
	z-index: 3;
	margin: 0;
	padding: 0;
}

.chromalab .chromalab__tolerance-track input[type="range"]::-webkit-slider-runnable-track { background: transparent; border: 0; height: 12px; }
.chromalab .chromalab__tolerance-track input[type="range"]::-moz-range-track           { background: transparent; border: 0; height: 12px; }
/* Firefox-specific fills (visible without appearance: none overrides) */
.chromalab .chromalab__tolerance-track input[type="range"]::-moz-range-progress { background: transparent; }

.chromalab .chromalab__tolerance-track input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--precision-color, var(--cl-color-muted));
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
	margin-top: -6px;
}

.chromalab .chromalab__tolerance-track input[type="range"]::-moz-range-thumb {
	-moz-appearance: none;
	appearance: none;
	box-sizing: border-box;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--precision-color, var(--cl-color-muted));
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.chromalab__tolerance-value {
	font-family: monospace;
	font-size: 14px;
	font-weight: 700;
	color: var(--cl-color-text);
	min-width: 40px;
	text-align: right;
}

.chromalab__tolerance-dots {
	position: absolute;
	inset: 50% 0 auto 0;
	height: 12px;
	transform: translateY(-50%);
	pointer-events: none;
	z-index: 2;
}

.chromalab__tolerance-dot {
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--cl-color-text);
	pointer-events: auto;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.chromalab__tolerance-dot--minor { width: 6px;  height: 6px;  opacity: 0.25; }
.chromalab__tolerance-dot--major { width: 10px; height: 10px; opacity: 0.5;  }
.chromalab__tolerance-dot:hover  { opacity: 1; }

/* === Finish filters (text list, one per line) ===
   align-self: stretch makes this column match .chromalab__center height
   (wheel + precision row); column-wrap lets entries flow into a 2nd column
   if there are too many to fit vertically. */

.chromalab__finish-filters {
	flex: 1;
	min-width: 0;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	gap: 8px;
	overflow: hidden;
}

.chromalab__finish-label {
	user-select: none;
}

.chromalab__finish-list {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: 2px 24px;
	overflow: hidden;
}

.chromalab__finish-btn {
	padding: 4px 0;
	border: 0;
	background: transparent;
	color: #525252;
	font-size: 14px;
	font-weight: 500;
	text-align: left;
	text-transform: capitalize;
	cursor: pointer;
	transition: color 0.15s ease;
	white-space: nowrap;
}

.chromalab__finish-btn:hover {
	color: var(--cl-color-text);
}

.chromalab__finish-btn.active {
	color: var(--cl-color-text);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

/* === Narrow viewport: scale the layout down, keep structure === */

@media (max-width: 600px) {
	.chromalab {
		--cl-wheel: 160px;
		--cl-tool: 32px;
		--cl-gap: 14px;
		--cl-gap-body: 10px;
		border-radius: 20px;
	}

	.chromalab__title      { font-size: 24px; }
	.chromalab__finish-btn { font-size: 13px; }
}

/* === Camera overlay (fullscreen color scanner) === */

/* iOS Safari: `overflow:hidden` on body is not enough to stop scroll under a
   fixed overlay. Pinning the body in place is the only reliable lock. */
body.chromalab-cam-open {
	overflow: hidden;
	position: fixed;
	inset: 0;
	width: 100%;
}

.chromalab-cam {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	z-index: 2147483000;
	background: #000;
	color: #fff;
	font-family: inherit;
	/* Neutralize any inherited transform/filter so iOS doesn't trap the
	   fixed positioning inside an ancestor stacking context. */
	transform: none;
	-webkit-transform: none;
	isolation: isolate;
}

.chromalab-cam__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: #000;
	/* Promote to its own compositing layer — fixes intermittent black video
	   on iOS Safari when a MediaStream is attached to a fresh element. */
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
}

.chromalab-cam__scrim {
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at center, transparent 60px, rgba(0, 0, 0, 0.55) 120px);
	pointer-events: none;
}

.chromalab-cam__reticle {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
	border: 2px solid #fff;
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 0 12px rgba(0, 0, 0, 0.35);
	pointer-events: none;
}

.chromalab-cam__reticle::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 6px;
	height: 6px;
	background: #fff;
	border-radius: 50%;
	transform: translate(-50%, -50%);
}

.chromalab-cam__close {
	position: absolute;
	top: calc(12px + env(safe-area-inset-top, 0px));
	right: calc(12px + env(safe-area-inset-right, 0px));
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
}

.chromalab-cam__hint {
	position: absolute;
	top: calc(16px + env(safe-area-inset-top, 0px));
	left: calc(16px + env(safe-area-inset-left, 0px));
	right: calc(64px + env(safe-area-inset-right, 0px));
	z-index: 1;
	padding: 8px 12px;
	background: rgba(0, 0, 0, 0.45);
	border-radius: 8px;
	font-size: 13px;
	line-height: 1.3;
}

.chromalab-cam__footer {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 16px calc(16px + env(safe-area-inset-right))
	         calc(16px + env(safe-area-inset-bottom))
	         calc(16px + env(safe-area-inset-left));
	background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0));
	display: flex;
	align-items: center;
	gap: 12px;
	z-index: 2;
}

.chromalab-cam__readout {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
	min-width: 0;
}

.chromalab-cam__swatch {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #333;
	border: 2px solid #fff;
	flex-shrink: 0;
}

.chromalab-cam__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.chromalab-cam__match {
	font-size: 14px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.chromalab-cam__hex {
	font-size: 12px;
	opacity: 0.7;
	font-family: ui-monospace, monospace;
}

.chromalab-cam__validate {
	padding: 12px 20px;
	border: 0;
	border-radius: 999px;
	background: #fff;
	color: #000;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	flex-shrink: 0;
}

.chromalab-cam__validate:disabled {
	opacity: 0.5;
	cursor: default;
}

.chromalab-cam__error {
	position: absolute;
	top: 50%;
	left: 16px;
	right: 16px;
	transform: translateY(-50%);
	padding: 16px 20px;
	background: rgba(0, 0, 0, 0.85);
	border-radius: 12px;
	text-align: center;
	font-size: 14px;
	line-height: 1.4;
	z-index: 3;
}

/* Disabled state — display=products mode. Filter is greyed out with a
   permanent visible label (no tooltip, mobile-friendly). All inputs are
   inert; the body is dimmed but still readable so the layout stays
   stable. */
.chromalab--disabled {
	position: relative;
}
.chromalab--disabled > *:not(.chromalab__disabled-banner) {
	opacity: 0.4;
	pointer-events: none;
	filter: grayscale(0.8);
}
.chromalab__disabled-banner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: max-content;
	max-width: min(360px, calc(100% - 32px));
	margin: 0;
	padding: 12px 18px;
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
	color: #444;
	font-size: 13px;
	line-height: 1.4;
	text-align: center;
	font-style: italic;
	z-index: 5;
}