/**
 * Candela — Photometric distribution instrument.
 * =============================================================================
 *
 * Two jobs:
 *
 *   1. Style the instrument itself — a drafting-table object, not a widget.
 *      Hairlines, mono numerals, no rounded pills, no shadows that a plotter
 *      could not have drawn.
 *
 *   2. Style everything the instrument LIGHTS. The widget writes three custom
 *      properties to :root on every input — --pm-cct, --pm-intensity and
 *      --pm-spread — and the [data-pm-lit] rules at the bottom of this file
 *      turn those into an actual pool of light falling on cards elsewhere in
 *      the page. That is the signature move: dragging the beam slider is
 *      supposed to visibly narrow the light on the rest of the layout.
 *
 * Only existing theme tokens are used. Nothing new is invented.
 */

/* ---------------------------------------------------------------------------
   0. THE LIGHT BUS
   Registered so the values interpolate instead of snapping while the user
   drags a slider. Registration also gives us safe initial values if the
   script has not run yet (or has been torn down).
   --------------------------------------------------------------------------- */

@property --pm-intensity {
	syntax: '<number>';
	inherits: true;
	initial-value: 0.55;
}

@property --pm-spread {
	syntax: '<number>';
	inherits: true;
	initial-value: 0.45;
}

:root {
	--pm-cct: rgb( 255, 185, 110 );
	--pm-cct-rgb: 255 185 110;
	--pm-intensity: 0.55;
	--pm-spread: 0.45;
}

/* ---------------------------------------------------------------------------
   1. SHELL
   --------------------------------------------------------------------------- */

.pm {
	display: grid;
	grid-template-columns: minmax( 0, 1.62fr ) minmax( 244px, 0.9fr );
	gap: var( --sp-4, 2rem );
	align-items: start;

	padding: var( --sp-3, 1.5rem );
	border: 1px solid var( --hair, rgba( 255, 255, 255, 0.10 ) );
	border-radius: var( --radius, 3px );
	background:
		radial-gradient( 120% 90% at 30% -20%,
			rgba( 255, 179, 92, 0.055 ) 0%,
			rgba( 255, 179, 92, 0 ) 62% ),
		linear-gradient( 180deg, var( --ink-2, #0d1320 ) 0%, var( --ink-1, #080c15 ) 100% );
	color: var( --paper-1, #d9d3c8 );
	font-family: var( --ff-ui, system-ui, sans-serif );
	-webkit-font-smoothing: antialiased;
}

/* The container is styled by JS-added class; before boot it is just a box.
   A noscript fallback lives in the template, so nothing is hidden here. */
.pm:not( .pm--ready ) {
	min-height: 220px;
}

.pm__plot-col {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var( --sp-3, 1.5rem );
}

/* ---------------------------------------------------------------------------
   2. HEADINGS
   --------------------------------------------------------------------------- */

.pm__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var( --sp-1, 0.5rem ) var( --sp-2, 1rem );
	padding-bottom: var( --sp-1, 0.5rem );
	border-bottom: 1px solid var( --hair, rgba( 255, 255, 255, 0.10 ) );
}

.pm__title {
	margin: 0;
	font-family: var( --ff-ui, system-ui, sans-serif );
	font-size: 0.795rem;
	font-weight: 500;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var( --paper-0, #f4efe6 );
}

.pm__sub {
	margin: 0;
	font-family: var( --ff-plot, monospace );
	font-size: 0.605rem;
	letter-spacing: 0.055em;
	color: var( --paper-3, #74716c );
	margin-left: auto;
}

/* ---------------------------------------------------------------------------
   3. THE PLOT
   --------------------------------------------------------------------------- */

.pm__figure {
	position: relative;
	border: 1px solid var( --hair, rgba( 255, 255, 255, 0.10 ) );
	border-radius: var( --radius, 3px );
	background:
		radial-gradient( 78% 62% at 50% 8%,
			rgba( 134, 169, 240, 0.055 ) 0%,
			rgba( 134, 169, 240, 0 ) 70% ),
		var( --ink-1, #080c15 );
	padding: var( --sp-1, 0.5rem );
	overflow: hidden;
}

.pm__svg {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
}

/* --- grid ---------------------------------------------------------------- */

.pm__grid {
	fill: none;
	stroke: var( --hair, rgba( 255, 255, 255, 0.10 ) );
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

.pm__ring {
	stroke: rgba( 134, 169, 240, 0.135 );
}

.pm__ring--outer {
	stroke: var( --hair-strong, rgba( 255, 255, 255, 0.185 ) );
}

.pm__spoke {
	stroke: rgba( 134, 169, 240, 0.10 );
}

.pm__spoke--nadir {
	stroke: rgba( 134, 169, 240, 0.26 );
	stroke-dasharray: 2 4;
}

/* --- labels -------------------------------------------------------------- */

.pm__tick,
.pm__ring-label,
.pm__callout-label {
	font-family: var( --ff-plot, monospace );
	stroke: none;
}

.pm__tick {
	font-size: 9.5px;
	letter-spacing: 0.02em;
	fill: var( --paper-3, #74716c );
}

.pm__ring-label {
	font-size: 8.6px;
	fill: var( --paper-2, #a5a099 );
	/* the scale runs down the nadir axis, so on a narrow spot it crosses the
	   curve; the halo is what keeps it readable there */
	paint-order: stroke;
	stroke: var( --ink-1, #080c15 );
	stroke-width: 3.6px;
	stroke-opacity: 0.92;
	stroke-linejoin: round;
}

.pm__callout-label {
	font-size: 9px;
	letter-spacing: 0.055em;
	paint-order: stroke;
	stroke: var( --ink-1, #080c15 );
	stroke-width: 3.2px;
	stroke-linejoin: round;
}

.pm__callout-label--beam {
	fill: var( --lume-hot, #ffd7a3 );
}

.pm__callout-label--field {
	fill: var( --cool, #86a9f0 );
}

/* --- the distribution curve ---------------------------------------------- */

.pm__stop--hot {
	stop-color: var( --pm-cct, #ffd7a3 );
	stop-opacity: 0.62;
}

.pm__stop--mid {
	stop-color: var( --lume, #ffb35c );
	stop-opacity: 0.24;
}

.pm__stop--out {
	stop-color: var( --lume, #ffb35c );
	stop-opacity: 0;
}

.pm__lobe-fill {
	stroke: none;
}

.pm__lobe-stroke {
	fill: none;
	stroke: var( --lume-hot, #ffd7a3 );
	stroke-width: 1.6;
	stroke-linejoin: round;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}

/* --- beam / field callouts ------------------------------------------------ */

.pm__ray {
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
	fill: none;
}

.pm__ray--beam {
	stroke: var( --lume-hot, #ffd7a3 );
	stroke-opacity: 0.55;
	stroke-dasharray: 3 3;
}

.pm__ray--field {
	stroke: var( --cool, #86a9f0 );
	stroke-opacity: 0.42;
	stroke-dasharray: 1 4;
}

.pm__arc {
	fill: none;
	stroke-width: 1.1;
	vector-effect: non-scaling-stroke;
}

.pm__arc--beam {
	stroke: var( --lume-hot, #ffd7a3 );
	stroke-opacity: 0.72;
}

.pm__arc--field {
	stroke: var( --cool, #86a9f0 );
	stroke-opacity: 0.55;
}

/* --- the fixture glyph ---------------------------------------------------- */

.pm__fixture-body {
	fill: var( --ink-3, #141c2d );
	stroke: var( --hair-strong, rgba( 255, 255, 255, 0.185 ) );
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

.pm__fixture-lens {
	stroke: var( --pm-cct, #ffd7a3 );
	stroke-width: 2.4;
	stroke-linecap: round;
}

/* ---------------------------------------------------------------------------
   4. CONTROLS
   --------------------------------------------------------------------------- */

.pm__controls {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: var( --sp-2, 1rem ) var( --sp-3, 1.5rem );
}

.pm__presets {
	grid-column: 1 / -1;
}

.pm__field-label {
	display: block;
	font-family: var( --ff-ui, system-ui, sans-serif );
	font-size: 0.635rem;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var( --paper-2, #a5a099 );
}

.pm__preset-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin-top: var( --sp-1, 0.5rem );
	border: 1px solid var( --hair, rgba( 255, 255, 255, 0.10 ) );
	border-radius: var( --radius, 3px );
	overflow: hidden;
}

.pm__preset {
	flex: 1 1 0;
	min-width: 82px;
	margin: 0;
	padding: 0.58rem 0.5rem;
	border: 0;
	border-left: 1px solid var( --hair, rgba( 255, 255, 255, 0.10 ) );
	border-radius: 0;
	background: transparent;
	color: var( --paper-2, #a5a099 );
	font-family: var( --ff-ui, system-ui, sans-serif );
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.075em;
	line-height: 1;
	cursor: pointer;
	transition:
		background-color var( --dur-micro, 220ms ) var( --ease-out, ease ),
		color var( --dur-micro, 220ms ) var( --ease-out, ease );
}

.pm__preset:first-child {
	border-left: 0;
}

.pm__preset:hover {
	background: var( --surface-1, rgba( 255, 255, 255, 0.03 ) );
	color: var( --paper-0, #f4efe6 );
}

.pm__preset[aria-pressed='true'] {
	background: rgba( 255, 179, 92, 0.14 );
	color: var( --lume-hot, #ffd7a3 );
	box-shadow: inset 0 -2px 0 0 var( --lume, #ffb35c );
}

.pm__preset:focus-visible {
	outline: 2px solid var( --cool, #86a9f0 );
	outline-offset: -2px;
}

/* --- sliders -------------------------------------------------------------- */

.pm__slider-top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var( --sp-1, 0.5rem );
	margin-bottom: 0.55rem;
}

.pm__slider-value {
	font-family: var( --ff-plot, monospace );
	font-size: 0.72rem;
	color: var( --lume-hot, #ffd7a3 );
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.pm__slider-scale {
	display: flex;
	justify-content: space-between;
	margin-top: 0.3rem;
	font-family: var( --ff-plot, monospace );
	font-size: 0.56rem;
	color: var( --paper-3, #74716c );
}

.pm__range {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	height: 18px;
	margin: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
}

.pm__range:focus-visible {
	outline: 2px solid var( --cool, #86a9f0 );
	outline-offset: 3px;
	border-radius: var( --radius, 3px );
}

.pm__range::-webkit-slider-runnable-track {
	height: 2px;
	border-radius: 0;
	background: linear-gradient( 90deg,
		var( --hair-strong, rgba( 255, 255, 255, 0.185 ) ) 0%,
		var( --hair, rgba( 255, 255, 255, 0.10 ) ) 100% );
}

.pm__range::-moz-range-track {
	height: 2px;
	border-radius: 0;
	background: var( --hair, rgba( 255, 255, 255, 0.10 ) );
}

.pm__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 12px;
	height: 12px;
	margin-top: -5px;
	border: 0;
	border-radius: 50%;
	background: var( --lume, #ffb35c );
	box-shadow: 0 0 0 4px rgba( 255, 179, 92, 0.16 );
	transition: box-shadow var( --dur-micro, 220ms ) var( --ease-out, ease );
}

.pm__range::-moz-range-thumb {
	width: 12px;
	height: 12px;
	border: 0;
	border-radius: 50%;
	background: var( --lume, #ffb35c );
	box-shadow: 0 0 0 4px rgba( 255, 179, 92, 0.16 );
}

.pm__range:hover::-webkit-slider-thumb,
.pm__range:active::-webkit-slider-thumb {
	box-shadow: 0 0 0 7px rgba( 255, 179, 92, 0.22 );
}

/* ---------------------------------------------------------------------------
   5. READOUT
   --------------------------------------------------------------------------- */

.pm__readout {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var( --sp-2, 1rem );
	padding: var( --sp-2, 1rem );
	border: 1px solid var( --hair, rgba( 255, 255, 255, 0.10 ) );
	border-radius: var( --radius, 3px );
	background: var( --ink-2, #0d1320 );
}

.pm__head--read {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.25rem;
}

.pm__head--read .pm__sub {
	margin-left: 0;
}

.pm__rows {
	margin: 0;
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) auto;
	align-items: baseline;
	gap: 0;
}

.pm__row-key {
	grid-column: 1;
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	padding: 0.52rem 0;
	border-top: 1px solid var( --hair, rgba( 255, 255, 255, 0.10 ) );
}

.pm__rows > .pm__row-key:first-child,
.pm__rows > .pm__row-key:first-child + .pm__row-val {
	border-top: 0;
}

.pm__row-name {
	font-family: var( --ff-ui, system-ui, sans-serif );
	font-size: 0.71rem;
	letter-spacing: 0.045em;
	color: var( --paper-1, #d9d3c8 );
	white-space: nowrap;
}

.pm__row-note {
	font-family: var( --ff-plot, monospace );
	font-size: 0.535rem;
	letter-spacing: 0.03em;
	color: var( --paper-3, #74716c );
}

.pm__row-val {
	grid-column: 2;
	margin: 0;
	padding: 0.52rem 0 0.52rem var( --sp-1, 0.5rem );
	border-top: 1px solid var( --hair, rgba( 255, 255, 255, 0.10 ) );
	text-align: right;
	white-space: nowrap;
}

.pm__val {
	font-family: var( --ff-plot, monospace );
	font-size: 0.92rem;
	font-variant-numeric: tabular-nums;
	color: var( --paper-0, #f4efe6 );
}

.pm__unit {
	margin-left: 0.32em;
	font-family: var( --ff-plot, monospace );
	font-size: 0.56rem;
	letter-spacing: 0.03em;
	color: var( --paper-3, #74716c );
}

/* --- CCT swatch ----------------------------------------------------------- */

.pm__cct {
	display: flex;
	align-items: center;
	gap: var( --sp-2, 1rem );
	padding: var( --sp-1, 0.5rem );
	border: 1px solid var( --hair, rgba( 255, 255, 255, 0.10 ) );
	border-radius: var( --radius, 3px );
	background: var( --ink-1, #080c15 );
}

.pm__swatch {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border-radius: var( --radius, 3px );
	border: 1px solid var( --hair-strong, rgba( 255, 255, 255, 0.185 ) );
	background: var( --pm-cct, #ffb35c );
	box-shadow: 0 0 22px -4px var( --pm-cct, #ffb35c );
	transition: background-color var( --dur-micro, 220ms ) var( --ease-out, ease );
}

.pm__cct-text {
	display: flex;
	flex-direction: column;
	gap: 0.14rem;
	min-width: 0;
}

.pm__cct-k {
	font-family: var( --ff-plot, monospace );
	font-size: 0.92rem;
	font-variant-numeric: tabular-nums;
	color: var( --paper-0, #f4efe6 );
}

.pm__cct-rgb {
	font-family: var( --ff-plot, monospace );
	font-size: 0.56rem;
	letter-spacing: 0.045em;
	color: var( --paper-3, #74716c );
}

.pm__note {
	margin: 0;
	padding-top: var( --sp-1, 0.5rem );
	border-top: 1px solid var( --hair, rgba( 255, 255, 255, 0.10 ) );
	font-family: var( --ff-ui, system-ui, sans-serif );
	font-size: 0.645rem;
	line-height: 1.5;
	color: var( --paper-3, #74716c );
}

/* ---------------------------------------------------------------------------
   6. THE SIGNATURE MOVE — [data-pm-lit]
   Any element in the page that opts in gets an actual pool of light thrown
   onto it. Width follows --pm-spread, strength follows --pm-intensity, and
   the colour is the real Planckian RGB of the chosen CCT.
   --------------------------------------------------------------------------- */

[data-pm-lit] {
	position: relative;
	isolation: isolate;
	border: 1px solid
		rgb( var( --pm-cct-rgb, 255 185 110 ) /
			calc( 0.10 + var( --pm-intensity ) * 0.55 ) );
	border-radius: var( --radius, 3px );
	background-color: var( --ink-2, #0d1320 );
	overflow: hidden;
	transition:
		border-color var( --dur-ui, 380ms ) var( --ease-out, ease ),
		--pm-intensity var( --dur-ui, 380ms ) var( --ease-out, ease ),
		--pm-spread var( --dur-ui, 380ms ) var( --ease-out, ease );
}

/* the pool of light itself */
[data-pm-lit]::before {
	content: '';
	position: absolute;
	inset: -1px;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(
			ellipse
				calc( 9% + var( --pm-spread ) * 92% )
				calc( 20% + var( --pm-spread ) * 125% )
			at 50% -6%,
			rgb( var( --pm-cct-rgb, 255 185 110 ) /
				calc( 0.09 + var( --pm-intensity ) * 0.80 ) ) 0%,
			rgb( var( --pm-cct-rgb, 255 185 110 ) /
				calc( 0.04 + var( --pm-intensity ) * 0.38 ) ) 34%,
			rgb( var( --pm-cct-rgb, 255 185 110 ) / 0 ) 74%
		);
}

/* a hot sliver where the beam meets the top edge — reads as the source */
[data-pm-lit]::after {
	content: '';
	position: absolute;
	top: -1px;
	left: 50%;
	transform: translateX( -50% );
	z-index: 1;
	pointer-events: none;
	width: calc( 8% + var( --pm-spread ) * 86% );
	height: 2px;
	background: linear-gradient( 90deg,
		rgb( var( --pm-cct-rgb, 255 185 110 ) / 0 ) 0%,
		rgb( var( --pm-cct-rgb, 255 185 110 ) /
			calc( 0.25 + var( --pm-intensity ) * 0.72 ) ) 50%,
		rgb( var( --pm-cct-rgb, 255 185 110 ) / 0 ) 100% );
	box-shadow: 0 0 calc( 6px + var( --pm-intensity ) * 26px )
		rgb( var( --pm-cct-rgb, 255 185 110 ) / calc( var( --pm-intensity ) * 0.55 ) );
}

/* keep the card's own content above the light */
[data-pm-lit] > * {
	position: relative;
	z-index: 2;
}

/* ---------------------------------------------------------------------------
   7. RESPONSIVE
   --------------------------------------------------------------------------- */

@media ( max-width: 720px ) {

	.pm {
		grid-template-columns: minmax( 0, 1fr );
		gap: var( --sp-3, 1.5rem );
		padding: var( --sp-2, 1rem );
	}

	.pm__sub {
		margin-left: 0;
		flex-basis: 100%;
	}

	.pm__controls {
		grid-template-columns: minmax( 0, 1fr );
	}
}

/* Below this width the whole viewBox is scaled to roughly 45% of its
   authored size, which would render 9px plot type at about 4px. Scale the
   SVG type back up and thin out the tick ring so it still reads. */
@media ( max-width: 560px ) {

	.pm__figure {
		padding: 2px;
	}

	.pm__tick--minor {
		display: none;
	}

	.pm__tick {
		font-size: 19px;
	}

	.pm__ring-label {
		font-size: 17px;
		stroke-width: 5px;
	}

	.pm__callout-label {
		font-size: 17px;
		stroke-width: 5px;
	}
}

@media ( max-width: 420px ) {

	.pm__preset-row {
		flex-wrap: wrap;
	}

	.pm__preset {
		flex: 1 1 46%;
		min-width: 0;
		border-top: 1px solid var( --hair, rgba( 255, 255, 255, 0.10 ) );
	}

	.pm__preset:first-child,
	.pm__preset:nth-child( 2 ) {
		border-top: 0;
	}

	.pm__preset:nth-child( odd ) {
		border-left: 0;
	}

	.pm__row-name {
		white-space: normal;
	}
}

/* ---------------------------------------------------------------------------
   8. REDUCED MOTION
   Everything still renders and stays fully interactive; only the tweening
   between states is removed.
   --------------------------------------------------------------------------- */

@media ( prefers-reduced-motion: reduce ) {

	.pm *,
	.pm *::before,
	.pm *::after,
	[data-pm-lit],
	[data-pm-lit]::before,
	[data-pm-lit]::after {
		transition-duration: 1ms !important;
		animation-duration: 1ms !important;
	}
}

.pm--still *,
.pm--still *::before,
.pm--still *::after {
	transition-duration: 1ms !important;
}