/**
 * Night Shift, OVERTEMP and Blueprint 1937.
 *
 * NIGHT SHIFT (html[data-shift="night"], opt-in from the header or drawer):
 * the plant at 3 a.m. The KDL gray scale flips (so every component built
 * on gray and semantic tokens follows), red eases to red-200/300 for text,
 * copper glows faintly, and the page-header rule becomes a thin heated
 * line. Surfaces that are dark on purpose (dock, CTA band,
 * video tiles, the dark hero) are pinned to fixed darks below. Screen only:
 * print always gets the day shift.
 *
 * OVERTEMP (html[data-mode="overtemp"]) and BLUEPRINT (data-mode="blueprint")
 * are the two secret modes from shift-modes.js.
 */

@media screen {

	/* ============================================================
	 * Night Shift — tokens
	 * ========================================================= */
	html[data-shift="night"] {
		color-scheme: dark;

		--night-0: #0e1217;
		--night-50: #151a20;
		--night-deep: #07090c;

		--kdl-gray-0: var(--night-0);
		--kdl-gray-50: var(--night-50);
		--kdl-gray-100: #1f252c;
		--kdl-gray-200: #2f363e;
		--kdl-gray-300: #56606b;
		--kdl-gray-400: #8f9aa6;
		--kdl-gray-500: #b4bec8;
		--kdl-gray-600: #cfd6dd;
		--kdl-gray-700: #e2e7ec;
		--kdl-gray-800: #eef1f4;
		--kdl-gray-900: #f7f9fa;

		/* Legacy warm grays follow the same flip. */
		--gray-50: #151a20;
		--gray-100: #1a1f26;
		--gray-200: #2f363e;
		--gray-300: #414a54;
		--gray-400: #8f9aa6;
		--gray-500: #a3aeb8;
		--gray-600: #cfd6dd;
		--gray-700: #e2e7ec;
		--gray-800: #eef1f4;
		--gray-900: #f4f6f8;

		--kdl-surface-base: var(--night-0);
		--kdl-surface-raised: var(--night-50);
		--kdl-surface-sunken: var(--night-deep);
		--kdl-surface-inverse: var(--night-deep);
		--kdl-text-strong: #f4f6f8;
		--kdl-text-default: #cfd6dd;
		--kdl-text-muted: #9aa5b1;
		--kdl-text-on-dark: #f4f6f8;
		--kdl-text-accent: var(--kdl-red-200);
		--kdl-border-subtle: #1f252c;
		--kdl-border-default: #2f363e;
		--kdl-border-strong: #6c7682;

		--kdl-elev-2: 0 1px 2px rgba(0, 0, 0, 0.5), 0 0 0 1px #1f252c;
		--kdl-elev-3: 0 6px 16px rgba(0, 0, 0, 0.55), 0 0 0 1px #2f363e;
		--kdl-elev-4: 0 16px 36px rgba(0, 0, 0, 0.6);

		--footer-bg: var(--night-50);
		--kdl-copper-700: var(--kdl-copper-300);

		background: var(--night-0);
	}

	html[data-shift="night"] body {
		background: var(--night-0);
		color: var(--kdl-text-default);
	}

	/* Links and focus: red eased for text, copper-300 rings. The night
	 * scope sits in :where() so these stay as weak as the base rules they
	 * replace and component link colours still win. */
	:where(html[data-shift="night"]) a {
		color: var(--kdl-red-200);
	}

	:where(html[data-shift="night"]) a:where(:hover, :active, :focus) {
		color: var(--kdl-gray-900);
	}

	html[data-shift="night"] :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
		outline-color: var(--kdl-copper-300);
	}

	:where(html[data-shift="night"]) :is(input, select, textarea) {
		background: var(--night-deep);
		border-color: var(--kdl-border-default);
		color: var(--kdl-text-strong);
	}

	/* The logo is black ink on white: invert its lightness, keep its hues. */
	html[data-shift="night"] .custom-logo {
		filter: invert(1) hue-rotate(180deg) brightness(1.08);
	}

	html[data-shift="night"] img:not(.custom-logo) {
		filter: brightness(0.92) contrast(1.04);
	}

	/* ============================================================
	 * Night Shift — chrome
	 * ========================================================= */
	html[data-shift="night"] #masthead,
	html[data-shift="night"] #mobile-bar {
		background: var(--night-0);
		box-shadow: 0 1px 0 #1f252c;
	}

	html[data-shift="night"] .has-sticky-nav.is-condensed #masthead {
		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
	}

	/* Heat bars on dark get a hairline, so the dull-red end doesn't vanish,
	 * and the page-header rule becomes a thin heated line. */
	html[data-shift="night"] .page-header::after {
		height: 2px;
		box-shadow: 0 -1px 0 rgba(163, 174, 184, 0.25), 0 0 10px rgba(232, 84, 30, 0.35);
	}

	html[data-shift="night"] :is(#mobile-bar, #colophon .site-info)::after,
	html[data-shift="night"] #colophon .site-info::before {
		box-shadow: 0 0 8px rgba(232, 84, 30, 0.3);
	}

	html[data-shift="night"] .kdl-eyebrow::before,
	html[data-shift="night"] #colophon .footer-heading::before {
		background: var(--kdl-red-400);
		box-shadow: 0 0 6px rgba(210, 55, 64, 0.8);
	}

	html[data-shift="night"] .menu-salt__tag {
		background: var(--kdl-blue-500);
	}

	html[data-shift="night"] #masthead .site-header-bar .menu.primary-menu > li.menu-item-salt > a,
	html[data-shift="night"] .mobile-drawer__nav .menu-item-salt > a,
	html[data-shift="night"] .menu-salt-card__maker,
	html[data-shift="night"] .menu-salt-card__call a {
		color: var(--kdl-blue-200);
	}

	html[data-shift="night"] #masthead .site-header-bar .menu.primary-menu > li.menu-item-salt > a {
		background-image: linear-gradient(var(--kdl-blue-200), var(--kdl-blue-200));
	}

	html[data-shift="night"] .mobile-drawer-backdrop {
		background: rgba(0, 0, 0, 0.6);
	}

	/* Surfaces that are dark by design keep the day gray scale, so their
	 * light-on-dark text doesn't flip with the rest of the page. */
	html[data-shift="night"] :is(.hero--dark, .desludger__stage, .desludger__scene, .screening-room, .upton-palette, .upton-dock) {
		--kdl-gray-0: #ffffff;
		--kdl-gray-50: #f4f6f8;
		--kdl-gray-100: #e7ebef;
		--kdl-gray-200: #cfd6dd;
		--kdl-gray-300: #a3aeb8;
		--kdl-gray-400: #6c7682;
		--kdl-gray-500: #444c56;
		--kdl-gray-600: #2f353d;
		--kdl-gray-700: #1f242b;
		--kdl-gray-800: #14181d;
		--kdl-gray-900: #0a0d11;
		--kdl-text-on-dark: #f4f6f8;
	}

	/* Gravity Forms (Orbital) reads its own colour variables. */
	html[data-shift="night"] .gform_wrapper {
		--gf-color-in-ctrl: var(--night-deep);
		--gf-color-in-ctrl-contrast: #f4f6f8;
		--gf-ctrl-bg-color: var(--night-deep);
		--gf-ctrl-color: #f4f6f8;
		--gf-ctrl-border-color: #56606b;
		--gf-ctrl-label-color-primary: #f4f6f8;
		--gf-ctrl-label-color-secondary: #cfd6dd;
		--gf-ctrl-label-color-req: var(--kdl-red-200);
		--gf-ctrl-desc-color: #b4bec8;
		--gf-color-secondary: var(--night-50);
		--gf-color-secondary-contrast: #f4f6f8;
	}

	html[data-shift="night"] .gform_wrapper :is(.gform-field-label, .gfield_label, legend, .gfield_description) {
		color: #e2e7ec;
	}

	html[data-shift="night"] .gform_wrapper .gfield_required {
		color: var(--kdl-red-200);
	}

	/* Always-dark surfaces stay dark. */
	html[data-shift="night"] .cta-band,
	html[data-shift="night"] .yt-facade,
	html[data-shift="night"] .video-container {
		background-color: var(--night-deep);
	}

	html[data-shift="night"] .upton-dock {
		background: var(--night-deep);
		border-top-color: var(--kdl-copper-500);
	}

	html[data-shift="night"] .upton-dock__key {
		color: #f4f6f8;
	}

	html[data-shift="night"] .upton-dock__key--quote {
		color: #fff;
	}

	html[data-shift="night"] #colophon .site-info {
		background: #050403;
		color: #a3aeb8;
	}

	html[data-shift="night"] #colophon .site-info a {
		color: #f4f6f8;
	}

	/* Buttons: red stays red (white text 5.4:1); secondaries go dark. */
	html[data-shift="night"] .kdl-btn--secondary,
	html[data-shift="night"] a.kdl-btn--secondary:link,
	html[data-shift="night"] a.kdl-btn--secondary:visited {
		background: transparent;
		border-color: var(--kdl-red-300);
		color: var(--kdl-red-200);
	}

	html[data-shift="night"] .kdl-btn--secondary:hover,
	html[data-shift="night"] a.kdl-btn--secondary:hover {
		background: rgba(206, 32, 41, 0.14);
		color: #fff;
	}

	/* Copper rules glow faintly on the night shift. */
	html[data-shift="night"] #colophon {
		border-top-color: var(--kdl-copper-500);
		box-shadow: 0 -1px 10px rgba(194, 99, 42, 0.25);
	}

	html[data-shift="night"] .shift-toggle[aria-pressed="true"] .shift-toggle__track {
		background: #000;
	}
}

/* ================================================================
 * OVERTEMP: a PLC alarm bar, and every heat bar runs hot.
 * Nothing flashes faster than 1Hz; with reduced motion nothing pulses.
 * ============================================================= */
.upton-alarm {
	position: sticky;
	top: 0;
	z-index: 200;
	background: #1a0503;
	border-bottom: 3px solid var(--upton-heat-5, #e8541e);
	color: #fff6e5;
}

.upton-alarm__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 20px;
	max-width: 1320px;
	margin: 0 auto;
	padding: 12px 24px;
}

.upton-alarm__code {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font: 500 14px/1.3 var(--kdl-font-mono, Lilex, monospace);
	letter-spacing: 0.12em;
	color: var(--upton-heat-7, #ffd98a);
}

.upton-alarm__lamp {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--upton-heat-5, #e8541e);
	box-shadow: 0 0 10px 2px rgba(232, 84, 30, 0.8);
}

.upton-alarm__note {
	flex: 1 1 260px;
	margin: 0;
	font-size: 14px;
	color: #e7ddd0;
}

.upton-alarm__ack {
	min-height: 40px;
	padding: 0 18px;
	border: 1px solid var(--upton-heat-6, #f5a13a);
	border-radius: 4px;
	background: transparent;
	color: var(--upton-heat-7, #ffd98a);
	cursor: pointer;
	font: 600 13px/1 var(--kdl-font-mono, Lilex, monospace);
	letter-spacing: 0.14em;
}

.upton-alarm__ack:hover {
	background: rgba(245, 161, 58, 0.14);
}

.upton-alarm__ack:focus-visible {
	outline: 2px solid var(--upton-heat-7, #ffd98a);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
	.upton-alarm__lamp {
		animation: upton-alarm-lamp 1s steps(2, jump-none) infinite;
	}

	html[data-mode="overtemp"] :is(.page-header, #mobile-bar)::after,
	html[data-mode="overtemp"] #colophon .site-info::before {
		animation: upton-overtemp 2s ease-in-out infinite;
	}
}

/* The alarm stays on top; the sticky header parks under it. */
html[data-mode="overtemp"] .has-sticky-nav #masthead,
html[data-mode="overtemp"] #mobile-bar {
	top: var(--upton-alarm-h, 0px);
}

html[data-mode="overtemp"] .page-header::after {
	height: 6px;
	background: linear-gradient(90deg, var(--upton-heat-4, #c2632a), var(--upton-heat-5, #e8541e) 40%, var(--upton-heat-6, #f5a13a) 75%, var(--upton-heat-8, #fff6e5));
	box-shadow: 0 0 18px 2px rgba(245, 161, 58, 0.55);
}

@keyframes upton-alarm-lamp {
	from { opacity: 1; }
	to { opacity: 0.35; }
}

@keyframes upton-overtemp {
	0%, 100% { filter: none; }
	50% { filter: brightness(1.35) saturate(1.2); }
}

/* ================================================================
 * BLUEPRINT 1937: the site as its own drawing — white linework on
 * Kolene blue-800 over a blueprint grid, Lilex everywhere.
 * ============================================================= */
html[data-mode="blueprint"] body {
	background:
		linear-gradient(to right, rgba(126, 195, 232, 0.13) 1px, transparent 1px) -1px -1px / 240px 240px,
		linear-gradient(to bottom, rgba(126, 195, 232, 0.13) 1px, transparent 1px) -1px -1px / 240px 240px,
		linear-gradient(to right, rgba(126, 195, 232, 0.06) 1px, transparent 1px) -1px -1px / 48px 48px,
		linear-gradient(to bottom, rgba(126, 195, 232, 0.06) 1px, transparent 1px) -1px -1px / 48px 48px,
		var(--kdl-blue-800, #093753);
	color: #e6f4fb;
}

html[data-mode="blueprint"] body *:not(svg, svg *, .fa, .upton-blueprint-badge) {
	background-color: transparent !important;
	background-image: none !important;
	border-color: rgba(230, 244, 251, 0.45) !important;
	box-shadow: none !important;
	color: #e6f4fb !important;
	font-family: var(--kdl-font-mono, Lilex, monospace) !important;
	text-shadow: none !important;
}

html[data-mode="blueprint"] body :is(.kdl-btn, .button, button, input, select, textarea, .product-card, .kdl-card, .family-card__half, .upton-dock) {
	border: 1px solid rgba(230, 244, 251, 0.7) !important;
}

html[data-mode="blueprint"] body :is(#masthead, #mobile-bar, .upton-dock, .mega-panel, .mobile-drawer) {
	background-color: var(--kdl-blue-800, #093753) !important;
}

/* Heat bars and pilot lights become plain linework. */
html[data-mode="blueprint"] :is(.page-header, #mobile-bar, #masthead, .product-card, .kdl-btn, .applications-finder__link)::after,
html[data-mode="blueprint"] :is(#colophon .site-info, .kdl-eyebrow, #colophon .footer-heading, .mega-panel)::before {
	background: rgba(230, 244, 251, 0.7) !important;
	box-shadow: none !important;
}

html[data-mode="blueprint"] img {
	filter: grayscale(1) contrast(1.35) brightness(1.2);
	mix-blend-mode: screen;
	opacity: 0.8;
}

html[data-mode="blueprint"] .custom-logo {
	filter: grayscale(1) invert(1) brightness(1.6);
	mix-blend-mode: screen;
}

html[data-mode="blueprint"] svg {
	color: #e6f4fb;
}

.upton-blueprint-badge {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 210;
	margin: 0;
	padding: 8px 12px;
	border: 1px solid rgba(230, 244, 251, 0.7);
	background: var(--kdl-blue-900, #061f33);
	color: #e6f4fb;
	font: 500 12px/1.3 var(--kdl-font-mono, Lilex, monospace);
	letter-spacing: 0.12em;
}

@media screen and (max-width: 991px) {
	.upton-blueprint-badge {
		bottom: calc(80px + env(safe-area-inset-bottom, 0px));
	}
}

@media print {
	.upton-alarm,
	.upton-blueprint-badge {
		display: none !important;
	}
}