@charset "UTF-8";

/* =====================================================================
   HUD MARKS: the dark-theme replacement for the print marks
   (with js/hud-marks.js, which builds the .hud layer in every module)

   Light theme = print proof: crop/registration marks, CMYK colour bars,
   ink tint scale (component-layout.css). Dark theme = screen
   calibration: the image is light, not ink, so the marks become a
   display HUD in the same gutters (--printer-marks-padding):
     corners  camera-style L brackets, ~1.4x the crop marks' length
     top      module tag (status LED, module number, live size in device
              pixels) + signal / refresh-rate tag
     left     RGB subpixel triads + vertical spec text (additive colour)
     right    additive-mix glyph + live display readout (viewport, DPR,
              page scale, colour gamut, dynamic range, refresh rate)
     bottom   pixel ruler, LED brightness row, bit-depth ladder (1/2/4/8)
   Everything is decorative (aria-hidden) and sized from the gutter, so
   it scales with the page. First pass is deliberately busy, to be pared
   back; every element has its own class so it can be dropped in one
   line.
   ===================================================================== */

.printer-marks-container {
	position: relative;
}

/* hidden in the light theme */
.hud {
	display: none;
}

html[data-theme="dark"] .printer-marks-container > .hud {
	display: block;
}

/* ---- corners: L brackets instead of crop + registration marks ---- */
html[data-theme="dark"] .printer-marks-container {
	--hud-corner: clamp(44px, calc(3.5 * var(--vw)) + 34px, 78px);
	background-position: left top, right top, right bottom, left bottom;
	background-size: var(--hud-corner) var(--hud-corner);
	background-image:
		url("../image-assets/module-container-assets/hud-corner-tl.svg"),
		url("../image-assets/module-container-assets/hud-corner-tr.svg"),
		url("../image-assets/module-container-assets/hud-corner-br.svg"),
		url("../image-assets/module-container-assets/hud-corner-bl.svg");
}

/* ---- the layer ---- */
.hud {
	--g: var(--printer-marks-padding);              /* gutter width */
	--hud-fs: calc(var(--g) * 0.4);                 /* ~11px at the widest gutter */
	--hud-dim: var(--color-grey-negative-500);      /* #7A7A7A */
	--hud-mid: var(--color-grey-negative-600);      /* #A3A3A3 */
	--hud-hi: var(--color-grey-negative-800);       /* #F5F5F5 */
	--hud-r: #FF3B3B;
	--hud-gr: #34E36A;
	--hud-b: #3B7BFF;
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	font-family: Consolas, "Courier New", monospace;
	font-size: var(--hud-fs);
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hud-dim);
	white-space: nowrap;
	user-select: none;
}

.hud b {
	font-weight: 400;
	color: var(--hud-hi);
}

/* ---- top tags ---- */
.hud-tag {
	position: absolute;
	top: 0;
	height: var(--g);
	display: flex;
	align-items: center;
	gap: 0.7em;
}

.hud-tag--tl {
	left: calc(var(--hud-corner) + var(--g) * 0.4);
}

.hud-tag--tr {
	right: calc(var(--hud-corner) + var(--g) * 0.4);
}

.hud-led {
	width: 0.7em;
	height: 0.7em;
	border-radius: 50%;
	background: var(--hud-r);
	box-shadow: 0 0 0.6em var(--hud-r);
	animation: hud-blink 2.4s steps(1, end) infinite;
}

.hud-sig {
	display: inline-flex;
	align-items: flex-end;
	gap: 0.15em;
	height: 0.9em;
}

.hud-sig i {
	width: 0.25em;
	background: var(--hud-hi);
}

.hud-sig i:nth-child(1) { height: 30%; }
.hud-sig i:nth-child(2) { height: 55%; }
.hud-sig i:nth-child(3) { height: 80%; }
.hud-sig i:nth-child(4) { height: 100%; opacity: 0.35; }

/* ---- side rails ---- */
.hud-side {
	position: absolute;
	top: calc(var(--hud-corner) + var(--g) * 0.4);
	bottom: calc(var(--hud-corner) + var(--g) * 0.4);
	width: var(--g);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.2em;
	overflow: hidden;
}

.hud-side--l { left: 0; }
.hud-side--r { right: 0; }

.hud-vtext {
	writing-mode: vertical-rl;
	overflow: hidden;
	min-height: 0;
}

/* left rail reads bottom-to-top, like a print slug */
.hud-side--l .hud-vtext {
	transform: rotate(180deg);
}

/* RGB subpixel triads: what a pixel looks like up close; the last one
   is fully lit (R+G+B = white) */
.hud-triads {
	display: flex;
	flex-direction: column;
	gap: 0.35em;
	flex: none;
}

.hud-triad {
	display: flex;
	gap: 0.12em;
	height: 1.1em;
}

.hud-triad i {
	width: 0.28em;
	border-radius: 0.06em;
}

.hud-triad i:nth-child(1) { background: var(--hud-r); }
.hud-triad i:nth-child(2) { background: var(--hud-gr); }
.hud-triad i:nth-child(3) { background: var(--hud-b); }
.hud-triad--white i { background: var(--hud-hi) !important; box-shadow: 0 0 0.4em rgba(255, 255, 255, 0.5); }

/* additive mix: R/G/B discs, screen blending makes the overlaps
   yellow/cyan/magenta and the centre white */
.hud-mix {
	flex: none;
	width: 1.9em;
	height: 1.8em;
	position: relative;
	isolation: isolate;
}

.hud-mix i {
	position: absolute;
	width: 1.15em;
	height: 1.15em;
	border-radius: 50%;
	mix-blend-mode: screen;
}

.hud-mix i:nth-child(1) { left: 0.375em; top: 0; background: #FF0000; }
.hud-mix i:nth-child(2) { left: 0; top: 0.65em; background: #00FF00; }
.hud-mix i:nth-child(3) { left: 0.75em; top: 0.65em; background: #0000FF; }

/* slow scanline travelling down each rail */
.hud-side::after {
	content: "";
	position: absolute;
	left: 15%;
	right: 15%;
	height: 18%;
	top: -20%;
	background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.07), transparent);
	animation: hud-scan 7s linear infinite;
}

.hud-side--r::after {
	animation-delay: -3.5s;
}

/* ---- bottom strip ---- */
.hud-bottom {
	position: absolute;
	bottom: 0;
	left: calc(var(--hud-corner) + var(--g) * 0.4);
	right: calc(var(--hud-corner) + var(--g) * 0.4);
	height: var(--g);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.6em;
	overflow: hidden;
}

.hud-group {
	display: flex;
	align-items: center;
	gap: 0.6em;
	flex: none;
}

/* pixel ruler: minor tick every 2 units, major every 10 */
.hud-ruler {
	width: 11em;
	height: 0.9em;
	background:
		linear-gradient(var(--hud-dim), var(--hud-dim)) left bottom / 100% 1px no-repeat,
		repeating-linear-gradient(to right, var(--hud-hi) 0 1px, transparent 1px 2.2em) left bottom / 100% 100% no-repeat,
		repeating-linear-gradient(to right, var(--hud-dim) 0 1px, transparent 1px 0.44em) left bottom / 100% 45% no-repeat;
}

/* LED brightness row: off -> full, with glow on the brighter ones */
.hud-leds {
	display: flex;
	gap: 0.32em;
}

.hud-leds i {
	width: 0.55em;
	height: 0.55em;
	border-radius: 50%;
	background: rgb(var(--v) var(--v) var(--v));
	box-shadow: 0 0 calc(var(--k) * 0.7em) rgba(255, 255, 255, calc(var(--k) * 0.55));
}

/* bit-depth ladder: the same black-to-white ramp quantised to 1, 2, 4 and
   8 bits, so the banding gets finer step by step */
.hud-ladder {
	display: flex;
	flex-direction: column;
	gap: 0.12em;
	width: 9em;
}

.hud-ladder i {
	height: 0.17em;
}

.hud-ladder .b1 { background: linear-gradient(to right, #000 50%, #FFF 50%); }
.hud-ladder .b2 { background: linear-gradient(to right, #000 25%, #555 25% 50%, #AAA 50% 75%, #FFF 75%); }
.hud-ladder .b4 { background: linear-gradient(to right, #000000 0% 6.25%, #111111 6.25% 12.5%, #222222 12.5% 18.75%, #333333 18.75% 25%, #444444 25% 31.25%, #555555 31.25% 37.5%, #666666 37.5% 43.75%, #777777 43.75% 50%, #888888 50% 56.25%, #999999 56.25% 62.5%, #AAAAAA 62.5% 68.75%, #BBBBBB 68.75% 75%, #CCCCCC 75% 81.25%, #DDDDDD 81.25% 87.5%, #EEEEEE 87.5% 93.75%, #FFFFFF 93.75% 100%); }
.hud-ladder .b8 { background: linear-gradient(to right, #000, #FFF); }

@keyframes hud-blink {
	0%, 70% { opacity: 1; }
	70.01%, 100% { opacity: 0.15; }
}

@keyframes hud-scan {
	to { top: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.hud-led,
	.hud-side::after {
		animation: none;
	}
}

/* narrow layouts: the gutter is too thin for the rails' text; keep the
   icons, the corner tag and the ladder */
html.bp-max-600 .hud-side .hud-vtext,
html.bp-max-600 .hud-tag--tr,
html.bp-max-600 .hud-group--ruler,
html.bp-max-600 .hud-group--leds {
	display: none;
}
@media (max-width: 600px) {
	html:not(.dfui) .hud-side .hud-vtext,
	html:not(.dfui) .hud-tag--tr,
	html:not(.dfui) .hud-group--ruler,
	html:not(.dfui) .hud-group--leds {
		display: none;
	}
}

/* =====================================================================
   PROOF MARKS: the light-theme counterpart (print proof), built by the
   same script as .proof. Each element mirrors one in the dark HUD:
     HUD subpixel triads   ->  halftone rosette (C/M/Y/K screens, loupe)
     HUD spec text         ->  slug lines (process, screening, stock)
     HUD live readout      ->  live print units (trim in mm at 96 ppi,
                               bleed, page scale) + proof date/time
     HUD signal tag        ->  Siemens star + proof timestamp
     CMYK colour bar       ->  fuller control strip (solids, 50% tints,
                               grey balance C50/M40/Y40 vs K50, overprints)
     tint bar / LED row    ->  halftone dot scale 0-100%
     bit-depth ladder      ->  screen-angle swatches C15 M75 Y0 K45
     pixel ruler           ->  millimetre ruler
   plus classic extras: centre marks (top/bottom middle) and a bleed
   line. With the script running these replace the old colour and tint
   bars (the registration corners stay); without it the original marks
   show unchanged.
   ===================================================================== */

.proof {
	display: none;
}

html.dfui:not([data-theme="dark"]) .printer-marks-container > .proof {
	display: block;
}

/* the proof layer brings its own control strip and scales, so keep only
   the registration corners from the background artwork */
html.dfui:not([data-theme="dark"]) .printer-marks-container:not(.footer-printer-marks) {
	background-position: left top, left bottom, right bottom, right top;
	background-size:
		clamp(32px, calc(2.5 * var(--vw)) + 24px, 56px) auto,
		clamp(32px, calc(2.5 * var(--vw)) + 24px, 56px) auto,
		clamp(32px, calc(2.5 * var(--vw)) + 24px, 56px) auto,
		clamp(32px, calc(2.5 * var(--vw)) + 24px, 56px) auto;
	background-image:
		url("../image-assets/module-container-assets/registration-marks-tl.svg"),
		url("../image-assets/module-container-assets/registration-marks-bl.svg"),
		url("../image-assets/module-container-assets/registration-marks-br.svg"),
		url("../image-assets/module-container-assets/registration-marks-tr.svg");
}

.proof {
	--g: var(--printer-marks-padding);
	--pc: clamp(32px, calc(2.5 * var(--vw)) + 24px, 56px);   /* registration mark size */
	--p-dim: var(--color-grey-neutral-500);
	--p-hi: var(--color-grey-neutral-700);
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	font-family: Consolas, "Courier New", monospace;
	font-size: calc(var(--g) * 0.4);
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--p-dim);
	white-space: nowrap;
	user-select: none;
}

.proof b {
	font-weight: 400;
	color: var(--p-hi);
}

.proof-tag {
	position: absolute;
	top: 0;
	height: var(--g);
	display: flex;
	align-items: center;
	gap: 0.7em;
}

.proof-tag--tl { left: calc(var(--pc) + var(--g) * 0.4); }
.proof-tag--tr { right: calc(var(--pc) + var(--g) * 0.4); }

.proof-star,
.proof-rosette {
	flex: none;
	width: 1.6em;
	height: 1.6em;
	background: center / contain no-repeat;
}

.proof-star { background-image: url("../image-assets/module-container-assets/proof-siemens-star.svg"); width: 1.2em; height: 1.2em; }
.proof-rosette { background-image: url("../image-assets/module-container-assets/proof-rosette.svg"); width: 1.9em; height: 1.9em; }

.proof-side {
	position: absolute;
	top: calc(var(--pc) + var(--g) * 0.4);
	bottom: calc(var(--pc) + var(--g) * 0.4);
	width: var(--g);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.2em;
	overflow: hidden;
}

.proof-side--l { left: 0; }
.proof-side--r { right: 0; }

.proof-vtext {
	writing-mode: vertical-rl;
	overflow: hidden;
	min-height: 0;
}

.proof-side--l .proof-vtext {
	transform: rotate(180deg);
}

/* control strip: 10 x 132 artwork, drawn ~1em wide */
.proof-strip {
	flex: none;
	width: 1.1em;
	height: calc(1.1em * 13.2);
	background: url("../image-assets/module-container-assets/proof-control-strip.svg") center / contain no-repeat;
}

.proof-bottom {
	position: absolute;
	bottom: 0;
	left: calc(var(--pc) + var(--g) * 0.4);
	right: calc(var(--pc) + var(--g) * 0.4);
	height: var(--g);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.6em;
	overflow: hidden;
}

.proof-group {
	display: flex;
	align-items: center;
	gap: 0.6em;
	flex: none;
}

/* millimetre ruler: tick every mm (3.78px at 96 ppi), long tick every 5 */
.proof-ruler {
	width: calc(30 * 3.7795px);
	height: 0.9em;
	background:
		linear-gradient(var(--p-dim), var(--p-dim)) left bottom / 100% 1px no-repeat,
		repeating-linear-gradient(to right, var(--p-hi) 0 1px, transparent 1px 18.8976px) left bottom / 100% 100% no-repeat,
		repeating-linear-gradient(to right, var(--p-dim) 0 1px, transparent 1px 3.7795px) left bottom / 100% 45% no-repeat;
}

.proof-dots {
	width: 11em;
	height: 1em;
	background: url("../image-assets/module-container-assets/proof-dot-scale.svg") center / contain no-repeat;
}

.proof-angles {
	width: 4.6em;
	height: 1em;
	background: url("../image-assets/module-container-assets/proof-screen-angles.svg") center / contain no-repeat;
}

/* centre marks: a short rule + ring at the middle of the top and bottom
   edges (fold / centre line) */
.proof-centre {
	position: absolute;
	left: 50%;
	width: 0.9em;
	height: var(--g);
	transform: translateX(-50%);
	background:
		linear-gradient(var(--p-hi), var(--p-hi)) center / 1px 100% no-repeat,
		radial-gradient(circle, transparent 0 0.24em, var(--p-hi) 0.26em 0.32em, transparent 0.34em) center / 0.9em 0.9em no-repeat;
}

.proof-centre--t { top: 0; }
.proof-centre--b { bottom: 0; display: none; }   /* bottom middle is the scales */

/* bleed line: a faint dashed box 3mm outside the trim (the module panel) */
.proof-bleed {
	position: absolute;
	inset: calc(var(--g) - 11.34px);
	border: 1px dashed var(--color-grey-neutral-300);
	pointer-events: none;
}

html.bp-max-600 .proof-side .proof-vtext,
html.bp-max-600 .proof-tag--tr,
html.bp-max-600 .proof-group--ruler,
html.bp-max-600 .proof-group--angles,
html.bp-max-600 .proof-bleed {
	display: none;
}
@media (max-width: 600px) {
	html:not(.dfui) .proof-side .proof-vtext,
	html:not(.dfui) .proof-tag--tr,
	html:not(.dfui) .proof-group--ruler,
	html:not(.dfui) .proof-group--angles,
	html:not(.dfui) .proof-bleed {
		display: none;
	}
}