/* ============================================================
 * Process × Equipment matrix (template-parts/applications-matrix.php)
 *
 * KDL §2.7 data table, set like the compatibility chart at the back of
 * an equipment catalog: processes down the side, systems across the top
 * under their family, rotated Lilex headers, a dot per listing. Hover or
 * focus draws a copper crosshair along the row and the column (pure CSS,
 * :has()). The head row and the process column stay put while the
 * labelled region scrolls. Under 800px matrix.js swaps in a picker.
 * ========================================================= */
.app-matrix {
	--matrix-col: 2.75rem;
	--matrix-group-h: 30px;
	--matrix-head-h: 12.75rem;
	--matrix-cross: color-mix(in srgb, var(--kdl-copper-500) 9%, transparent);
	--matrix-cross-strong: color-mix(in srgb, var(--kdl-copper-500) 16%, transparent);
	--matrix-rule: var(--kdl-border-default);
	margin: 0;
}

/* Under the Salt Bath grid: one more section of the page. */
.app-matrix--family {
	border-top: 1px solid var(--kdl-border-default);
	margin-top: var(--upton-block-gap);
	padding-top: 1.25rem;
}

.app-matrix__header {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	justify-content: space-between;
	margin: 0 0 16px;
}

.app-matrix__title {
	border: 0;
	color: var(--kdl-text-strong);
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.3;
	margin: 0;
	padding: 0;
}

.app-matrix__legend {
	align-items: center;
	color: var(--kdl-text-default);
	display: flex;
	flex-wrap: wrap;
	font-family: var(--kdl-font-mono);
	font-size: 12px;
	gap: 4px 10px;
	letter-spacing: 0.04em;
	line-height: 1.5;
	margin: 0;
	max-width: none;
}

.app-matrix__key {
	align-items: center;
	display: inline-flex;
	gap: 6px;
}

.app-matrix__legend a {
	color: var(--kdl-text-strong);
	text-decoration: underline;
	text-decoration-color: var(--kdl-copper-500);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

/* A dot drawn with a border: it prints without background graphics and
 * keeps its colour in forced-colours mode. */
.app-matrix__dot {
	border: 5px solid var(--kdl-text-strong);
	border-radius: 50%;
	display: inline-block;
	height: 0;
	vertical-align: middle;
	width: 0;
}

/* ─── Scroll region ─────────────────────────────────────────── */
.app-matrix__scroll {
	background: var(--kdl-surface-base);
	border: 1px solid var(--kdl-border-default);
	border-radius: var(--kdl-radius-sm);
	max-height: min(82vh, 64rem);
	max-width: 100%;
	overflow: auto;
	width: fit-content;
}

.app-matrix__scroll:focus-visible {
	outline: 2px solid var(--kdl-copper-500);
	outline-offset: 2px;
}

.app-matrix__table {
	border-collapse: separate;
	border-spacing: 0;
	color: var(--kdl-text-default);
	font-family: var(--kdl-font-sans);
	font-size: var(--kdl-fs-small);
	line-height: 1.3;
	margin: 0;
	width: max-content;
}

:where(.app-matrix__table) :where(th, td) {
	background-color: var(--kdl-surface-base);
	padding: 0;
}

/* Family rules: the first column of each group. */
.app-matrix__table .is-group-start {
	border-left: 1px solid var(--matrix-rule);
}

/* ─── Head: family row + rotated system names ───────────────── */
.app-matrix__table thead :is(th, td) {
	position: sticky;
	z-index: 2;
}

.app-matrix__groups > * {
	background-color: var(--kdl-surface-raised);
	border-bottom: 1px solid var(--kdl-border-subtle);
	height: var(--matrix-group-h);
	top: 0;
}

.app-matrix__group {
	color: var(--kdl-text-strong);
	font-family: var(--kdl-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	padding: 0 8px;
	text-align: left;
	text-transform: uppercase;
	vertical-align: middle;
	white-space: nowrap;
}

.app-matrix__corner {
	left: 0;
	z-index: 4 !important;
}

.app-matrix__systems > th {
	border-bottom: 1px solid var(--kdl-border-strong);
	height: var(--matrix-head-h);
	top: var(--matrix-group-h);
	vertical-align: bottom;
}

.app-matrix__system {
	min-width: var(--matrix-col);
	width: var(--matrix-col);
}

.app-matrix__system-inner {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 8px;
	justify-content: flex-end;
	padding: 10px 0 8px;
}

.app-matrix__system-link {
	color: var(--kdl-text-strong);
	font-family: var(--kdl-font-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1.15;
	/* A long name ("Cleaning & Stripping") wraps into a second column. */
	max-height: calc(var(--matrix-head-h) - 52px);
	text-align: left;
	text-decoration: none;
	text-transform: uppercase;
	transform: rotate(180deg);
	writing-mode: vertical-rl;
}

.app-matrix__system-link:hover {
	color: var(--kdl-text-strong);
	text-decoration: underline;
	text-decoration-color: var(--kdl-copper-500);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.app-matrix__process-head {
	left: 0;
	text-align: left;
	z-index: 4 !important;
}

.app-matrix__process-inner {
	align-items: flex-end;
	display: flex;
	gap: 10px;
	justify-content: space-between;
	padding: 0 12px 8px;
}

.app-matrix__process-label {
	color: var(--kdl-text-muted);
	font-family: var(--kdl-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* Sort buttons (added by matrix.js). */
.app-matrix__sort {
	align-items: center;
	background: var(--kdl-surface-base);
	border: 1px solid var(--kdl-border-default);
	border-radius: var(--kdl-radius-xs);
	color: var(--kdl-text-muted);
	cursor: pointer;
	display: inline-flex;
	font-family: var(--kdl-font-mono);
	font-size: 11px;
	font-weight: 500;
	height: 24px;
	justify-content: center;
	letter-spacing: 0.06em;
	line-height: 1;
	min-width: 24px;
	padding: 0 4px;
}

.app-matrix__sort:hover {
	border-color: var(--kdl-border-strong);
	color: var(--kdl-text-strong);
}

.app-matrix__sort:focus-visible {
	outline: 2px solid var(--kdl-copper-500);
	outline-offset: 1px;
}

:is([aria-sort="descending"], [aria-sort="ascending"]) > div > .app-matrix__sort {
	background: color-mix(in srgb, var(--kdl-copper-500) 12%, var(--kdl-surface-base));
	border-color: var(--kdl-copper-500);
	color: var(--kdl-copper-700);
}

/* ─── Body ──────────────────────────────────────────────────── */
.app-matrix__table tbody :is(th, td) {
	border-bottom: 1px solid var(--kdl-border-subtle);
	height: 34px;
}

.app-matrix__table tbody td {
	text-align: center;
	vertical-align: middle;
}

.app-matrix__process,
.app-matrix__foot-label {
	border-right: 1px solid var(--matrix-rule);
	left: 0;
	min-width: 13rem;
	position: sticky;
	text-align: left;
	z-index: 1;
}

.app-matrix__process {
	font-weight: 500;
	padding: 0 16px 0 12px !important;
	white-space: nowrap;
}

.app-matrix__process a {
	color: var(--kdl-text-strong);
	text-decoration: none;
}

.app-matrix__process a:hover {
	color: var(--kdl-text-strong);
	text-decoration: underline;
	text-decoration-color: var(--kdl-copper-500);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* ─── Crosshair ─────────────────────────────────────────────── */
.app-matrix__table tbody tr:is(:hover, :has(:focus-visible)) > * {
	background-image: linear-gradient(var(--matrix-cross), var(--matrix-cross));
}

.app-matrix__table tbody tr:is(:hover, :has(:focus-visible)) .app-matrix__dot,
.app-matrix__table tbody td:hover .app-matrix__dot {
	border-color: var(--kdl-copper-500);
}

.app-matrix__table tbody td:hover {
	box-shadow: inset 0 0 0 1px var(--kdl-copper-500);
}

/* One rule per column (16 covers the 13 systems with room to grow). */
.app-matrix__table:has([data-col="1"]:hover, [data-col="1"] :focus-visible) [data-col="1"],
.app-matrix__table:has([data-col="2"]:hover, [data-col="2"] :focus-visible) [data-col="2"],
.app-matrix__table:has([data-col="3"]:hover, [data-col="3"] :focus-visible) [data-col="3"],
.app-matrix__table:has([data-col="4"]:hover, [data-col="4"] :focus-visible) [data-col="4"],
.app-matrix__table:has([data-col="5"]:hover, [data-col="5"] :focus-visible) [data-col="5"],
.app-matrix__table:has([data-col="6"]:hover, [data-col="6"] :focus-visible) [data-col="6"],
.app-matrix__table:has([data-col="7"]:hover, [data-col="7"] :focus-visible) [data-col="7"],
.app-matrix__table:has([data-col="8"]:hover, [data-col="8"] :focus-visible) [data-col="8"],
.app-matrix__table:has([data-col="9"]:hover, [data-col="9"] :focus-visible) [data-col="9"],
.app-matrix__table:has([data-col="10"]:hover, [data-col="10"] :focus-visible) [data-col="10"],
.app-matrix__table:has([data-col="11"]:hover, [data-col="11"] :focus-visible) [data-col="11"],
.app-matrix__table:has([data-col="12"]:hover, [data-col="12"] :focus-visible) [data-col="12"],
.app-matrix__table:has([data-col="13"]:hover, [data-col="13"] :focus-visible) [data-col="13"],
.app-matrix__table:has([data-col="14"]:hover, [data-col="14"] :focus-visible) [data-col="14"],
.app-matrix__table:has([data-col="15"]:hover, [data-col="15"] :focus-visible) [data-col="15"],
.app-matrix__table:has([data-col="16"]:hover, [data-col="16"] :focus-visible) [data-col="16"] {
	background-image: linear-gradient(var(--matrix-cross), var(--matrix-cross));
	--matrix-dot: var(--kdl-copper-500);
}

.app-matrix__table [data-col] .app-matrix__dot {
	border-color: var(--matrix-dot, var(--kdl-text-strong));
}

.app-matrix__table tbody tr:is(:hover, :has(:focus-visible)) .app-matrix__dot {
	border-color: var(--kdl-copper-500);
}

/* ─── Sorted: listed processes on top, a copper rule under them ─ */
.app-matrix__table tbody tr.is-last-listed > * {
	border-bottom: 2px solid var(--kdl-copper-500);
}

/* ─── Foot: processes per system ────────────────────────────── */
.app-matrix__table tfoot :is(th, td) {
	background-color: var(--kdl-surface-raised);
	border-top: 1px solid var(--kdl-border-default);
	padding: 8px 0;
	vertical-align: top;
}

.app-matrix__foot-label {
	color: var(--kdl-text-muted);
	font-family: var(--kdl-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.12em;
	padding: 10px 12px !important;
	text-transform: uppercase;
	vertical-align: middle !important;
}

.app-matrix__total {
	color: var(--kdl-text-strong);
	font-family: var(--kdl-font-mono);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	text-align: center;
}

.app-matrix__total-unit {
	display: none;
}

/* The sorted column's foot reads "21 PROCESSES". */
.app-matrix__total.is-sorted {
	background-color: color-mix(in srgb, var(--kdl-copper-500) 12%, var(--kdl-surface-base));
	box-shadow: inset 0 2px 0 var(--kdl-copper-500);
	color: var(--kdl-copper-700);
}

.app-matrix__total.is-sorted .app-matrix__total-unit {
	display: block;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.12em;
	margin: 6px auto 0;
	text-transform: uppercase;
	transform: rotate(180deg);
	writing-mode: vertical-rl;
}

/* ─── Picker (under 800px, with matrix.js) ──────────────────── */
.app-matrix__picker {
	display: grid;
	gap: 10px;
}

.app-matrix__picker-label {
	color: var(--kdl-text-strong);
	font-family: var(--kdl-font-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.app-matrix__select {
	-webkit-appearance: none;
	appearance: none;
	background: var(--kdl-surface-base) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23444c56' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right 14px center / 18px 18px;
	border: 1px solid var(--kdl-border-strong);
	border-radius: var(--kdl-radius-sm);
	color: var(--kdl-text-strong);
	font: 500 1rem / 1.3 var(--kdl-font-sans);
	min-height: 48px;
	padding: 10px 44px 10px 14px;
	width: 100%;
}

.app-matrix__select:focus-visible {
	border-color: var(--kdl-copper-500);
	outline: 2px solid var(--kdl-copper-500);
	outline-offset: 0;
}

.app-matrix__picked {
	color: var(--kdl-copper-700);
	font-family: var(--kdl-font-mono);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	letter-spacing: 0.12em;
	margin: 6px 0 0;
	text-transform: uppercase;
}

.app-matrix__picked-list {
	border-top: 1px solid var(--kdl-border-default);
	list-style: none;
	margin: 0;
	padding: 0;
}

.app-matrix__picked-list li {
	border-bottom: 1px solid var(--kdl-border-subtle);
	margin: 0;
}

.app-matrix__picked-list a {
	align-items: center;
	color: var(--kdl-text-strong);
	display: flex;
	font-weight: 500;
	gap: 12px;
	justify-content: space-between;
	min-height: 48px;
	padding: 8px 0;
	text-decoration: none;
}

.app-matrix__picked-list a::after {
	background: var(--kdl-gray-400);
	content: "";
	flex: none;
	height: 18px;
	-webkit-mask: var(--kdl-chev-right) center / contain no-repeat;
	mask: var(--kdl-chev-right) center / contain no-repeat;
	width: 18px;
}

@media (min-width: 800px) {
	.app-matrix__picker {
		display: none;
	}
}

@media (max-width: 799px) {
	.app-matrix.is-enhanced .app-matrix__scroll {
		display: none;
	}
}

@media (pointer: coarse) {
	.app-matrix__sort {
		min-height: 44px;
		min-width: 44px;
	}

	.app-matrix {
		--matrix-col: 3rem;
		--matrix-head-h: 13.5rem;
	}
}

/* ─── Forced colours ────────────────────────────────────────── */
@media (forced-colors: active) {
	.app-matrix__dot,
	.app-matrix__table [data-col] .app-matrix__dot {
		border-color: CanvasText;
	}

	.app-matrix__table tbody td:hover,
	.app-matrix__table tbody tr:has(:focus-visible) > th {
		outline: 2px solid Highlight;
		outline-offset: -2px;
	}

	.app-matrix__table tbody tr.is-last-listed > * {
		border-bottom-color: Highlight;
	}

	.app-matrix__total.is-sorted {
		outline: 2px solid Highlight;
		outline-offset: -2px;
	}
}

/* ─── Print: the chart on one landscape sheet ───────────────── */
@page upton-matrix {
	margin: 9mm;
	size: landscape;
}

@media print {
	/* The matrix view is landscape throughout (a named page on the section
	 * alone would end with a blank portrait sheet); on the Salt Bath page
	 * the matrix gets its own landscape sheet after the grid. */
	.is-matrix-view,
	.app-matrix--family {
		page: upton-matrix;
	}

	.app-matrix {
		--matrix-col: 6.4mm;
		--matrix-group-h: 5mm;
		--matrix-head-h: 32mm;
	}

	.app-matrix__header {
		margin-bottom: 3mm;
	}

	.app-matrix--family {
		border-top: 0;
		break-before: page;
	}

	.app-matrix__picker,
	.app-matrix__sort {
		display: none !important;
	}

	.app-matrix__scroll,
	.app-matrix.is-enhanced .app-matrix__scroll {
		border: 0;
		display: block !important;
		max-height: none;
		overflow: visible;
		width: auto;
	}

	.app-matrix__table {
		font-size: 7.5pt;
		width: 100%;
	}

	.app-matrix__table :is(th, td) {
		position: static !important;
	}

	.app-matrix__table tbody :is(th, td) {
		height: 3.7mm;
	}

	.app-matrix__table :is(th, td) {
		background-image: none !important;
		box-shadow: none !important;
	}

	.app-matrix__process,
	.app-matrix__foot-label {
		min-width: 0;
	}

	.app-matrix__system-inner {
		padding: 1.5mm 0;
	}

	.app-matrix__system-link {
		font-size: 7pt;
		max-height: 28mm;
	}

	.app-matrix__dot,
	.app-matrix__table [data-col] .app-matrix__dot {
		border-color: #000 !important;
		border-width: 3.5px;
	}

	.app-matrix__table thead,
	.app-matrix__table tr {
		break-inside: avoid;
	}

	/* The matrix view prints alone: no site chrome, no intro. */
	.is-matrix-view #masthead,
	.is-matrix-view .page-header,
	.is-matrix-view #colophon,
	.is-matrix-view .app-view-switch,
	.is-matrix-view .entry-content > :not(.app-matrix-view) {
		display: none !important;
	}

	.is-matrix-view #primary {
		padding: 0 !important;
	}
}