/* ============================================================
 * Applications — process data sheets (/application/<slug>/) and the
 * List | Matrix switch on /applications/.
 *
 * The sheet body is .entry-content with direct <h2>s, so the product
 * data-sheet layout (style.css: rail + 42rem text column, hairline
 * section rules) sets it; this file styles only what sits inside.
 * ========================================================= */

/* ─── Header: the Lilex count line under the lede ───────────── */
.application-count {
	margin: 0;
	color: var(--kdl-gray-500, #444c56);
	font-family: var(--kdl-font-mono);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	font-weight: 500;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* ─── Summary plate: flat, hairline cells, Lilex labels ──────── */
.entry-content > .process-plate {
	align-items: stretch;
	background: var(--kdl-surface-base);
	border: 1px solid var(--kdl-border-default);
	border-radius: var(--kdl-radius-sm);
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	margin: 0 0 1.1em;
	max-width: none;
}

.process-plate__facts {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) minmax(0, 0.6fr);
	margin: 0;
	max-width: none;
}

.process-plate__fact {
	border-right: 1px solid var(--kdl-border-subtle);
	min-width: 0;
	padding: 14px 20px 16px;
}

.process-plate__fact dt {
	color: var(--kdl-text-muted);
	font-family: var(--kdl-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	line-height: 1.3;
	margin: 0 0 6px;
	text-transform: uppercase;
}

.process-plate__fact dd {
	color: var(--kdl-text-strong);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
	margin: 0;
}

.process-plate__fact dd a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--kdl-border-strong);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.process-plate__fact dd a:hover {
	color: inherit;
	text-decoration-color: var(--kdl-copper-500);
}

.process-plate__sep {
	color: var(--kdl-text-muted);
	font-weight: 400;
}

.process-plate__num {
	font-family: var(--kdl-font-mono);
	font-variant-numeric: tabular-nums;
}

.process-plate__action {
	align-items: center;
	display: flex;
	margin: 0;
	max-width: none;
	padding: 12px 20px;
}

@media (max-width: 799px) {
	.entry-content > .process-plate {
		grid-template-columns: minmax(0, 1fr);
	}

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

	.process-plate__fact {
		align-items: baseline;
		border-bottom: 1px solid var(--kdl-border-subtle);
		border-right: 0;
		display: grid;
		gap: 12px;
		grid-template-columns: 7.5rem minmax(0, 1fr);
		padding: 10px 16px;
	}

	.process-plate__fact dt {
		margin: 0;
	}

	.process-plate__action {
		padding: 14px 16px 16px;
	}

	.process-plate__action .kdl-btn {
		width: 100%;
	}
}

@media (min-width: 1000px) {
	/* The plate heads the sheet across the rail and the text column. */
	.entry-content:has(> h2) > .process-plate {
		grid-column: rail-start / text-end;
	}
}

/* ─── Equipment registers: ruled rows, like the drawings list ── */
.entry-content > .equipment-register {
	list-style: none;
	margin: 0;
	max-width: var(--upton-measure);
	padding: 0;
}

.entry-content > .equipment-register > li + li {
	margin-top: 0;
}

.equipment-register__item {
	align-items: center;
	border-bottom: 1px solid var(--kdl-border-subtle);
	display: grid;
	gap: 16px;
	grid-template-columns: 96px minmax(0, 1fr) 20px;
	padding: 14px 0;
	position: relative;
	transition: --heat var(--upton-heat-cool) var(--upton-heat-cool-ease);
}

.equipment-register__item:first-child {
	padding-top: 0;
}

.equipment-register__item:has(.equipment-register__link:focus-visible) {
	--heat: 1;
	transition-duration: var(--upton-heat-rise);
	transition-timing-function: var(--upton-heat-rise-ease);
}

@media (hover: hover) {
	.equipment-register__item:has(.equipment-register__link:hover) {
		--heat: 1;
		transition-duration: var(--upton-heat-rise);
		transition-timing-function: var(--upton-heat-rise-ease);
	}
}

/* The row's rule heats along the ramp, then cools back to a hairline. */
.equipment-register__item::after {
	background: var(--heat-c);
	bottom: -1px;
	content: "";
	height: 2px;
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	transform: scaleX(var(--heat-len));
	transform-origin: left center;
}

.equipment-register__media {
	aspect-ratio: 4 / 3;
	background: var(--kdl-surface-sunken);
	border-radius: var(--kdl-radius-xs);
	display: block;
	overflow: hidden;
}

.equipment-register__img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.equipment-register__body {
	min-width: 0;
}

.equipment-register__title {
	color: var(--kdl-text-strong);
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.35;
	margin: 0;
}

.equipment-register__link {
	color: inherit;
	text-decoration: none;
}

.equipment-register__link:hover {
	color: inherit;
}

/* The whole row is the link's target; the focus ring stays on the title. */
.equipment-register__link::after {
	content: "";
	inset: 0;
	position: absolute;
	z-index: 1;
}

.equipment-register__meta {
	color: var(--kdl-text-muted);
	font-family: var(--kdl-font-mono);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1.4;
	margin: 3px 0 0;
	text-transform: uppercase;
}

.equipment-register__summary {
	color: var(--kdl-text-default);
	font-size: 0.9375rem;
	line-height: 1.5;
	margin: 4px 0 0;
}

.equipment-register__arrow {
	background: color-mix(in oklab, var(--heat-c) calc(var(--heat) * 100%), var(--kdl-gray-400));
	height: 20px;
	-webkit-mask: var(--kdl-chev-right) center / contain no-repeat;
	mask: var(--kdl-chev-right) center / contain no-repeat;
	transform: translateX(calc(var(--heat) * 4px));
	width: 20px;
}

@media (max-width: 479px) {
	.equipment-register__item {
		align-items: start;
		gap: 12px;
		grid-template-columns: 72px minmax(0, 1fr);
	}

	.equipment-register__arrow {
		display: none;
	}
}

/* ─── Related processes: flat tags ──────────────────────────── */
.entry-content > .related-processes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	max-width: var(--upton-measure);
	padding: 0;
}

.entry-content > .related-processes > li + li {
	margin-top: 0;
}

.related-processes__item {
	transition: --heat var(--upton-heat-cool) var(--upton-heat-cool-ease);
}

.related-processes__item:has(.related-processes__link:focus-visible) {
	--heat: 1;
	transition-duration: var(--upton-heat-rise);
}

@media (hover: hover) {
	.related-processes__item:has(.related-processes__link:hover) {
		--heat: 1;
		transition-duration: var(--upton-heat-rise);
	}
}

.related-processes__link {
	align-items: baseline;
	background: var(--kdl-surface-base);
	border: 1px solid var(--kdl-border-default);
	border-radius: var(--kdl-radius-sm);
	color: var(--kdl-text-strong);
	display: inline-flex;
	flex-wrap: wrap;
	gap: 2px 10px;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.35;
	min-height: 40px;
	overflow: hidden;
	padding: 9px 14px 10px;
	position: relative;
	text-decoration: none;
}

.related-processes__link:hover {
	color: var(--kdl-text-strong);
}

.related-processes__link::after {
	background: var(--heat-c);
	bottom: 0;
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	right: 0;
	transform: scaleX(var(--heat-len));
	transform-origin: left center;
}

.related-processes__shared {
	color: var(--kdl-text-muted);
	font-family: var(--kdl-font-mono);
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

@media (pointer: coarse) {
	.related-processes__link {
		min-height: 44px;
	}
}

/* ─── /applications/: List | Matrix ─────────────────────────── */
.app-view-switch {
	margin: 0 0 clamp(20px, 2.4vw, 28px);
}

.app-view-switch__list {
	border: 1px solid var(--kdl-border-default);
	border-radius: var(--kdl-radius-sm);
	display: inline-flex;
	list-style: none;
	margin: 0;
	overflow: hidden;
	padding: 0;
}

.app-view-switch__list > li {
	margin: 0;
}

.app-view-switch__list > li + li {
	border-left: 1px solid var(--kdl-border-default);
}

.app-view-switch__link {
	align-items: center;
	color: var(--kdl-text-default);
	display: inline-flex;
	font-family: var(--kdl-font-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	min-height: 40px;
	padding: 0 18px;
	position: relative;
	text-decoration: none;
	text-transform: uppercase;
}

.app-view-switch__link:hover {
	background: var(--kdl-surface-raised);
	color: var(--kdl-text-strong);
}

.app-view-switch__link:focus-visible {
	outline-offset: -2px;
}

/* You are here: copper. */
.app-view-switch__link[aria-current="page"] {
	background: var(--kdl-surface-raised);
	color: var(--kdl-text-strong);
}

.app-view-switch__link[aria-current="page"]::after {
	background: var(--kdl-copper-500);
	bottom: 0;
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	right: 0;
}

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

/* ─── Forced colours and print ──────────────────────────────── */
@media (forced-colors: active) {
	.equipment-register__item::after,
	.related-processes__link::after {
		display: none;
	}

	.equipment-register__arrow {
		background: CanvasText;
	}

	.app-view-switch__link[aria-current="page"]::after {
		background: Highlight;
	}
}

@media print {
	.process-plate__action,
	.app-view-switch,
	.equipment-register__arrow {
		display: none !important;
	}

	.entry-content > .process-plate {
		grid-template-columns: minmax(0, 1fr);
	}

	.process-plate__facts {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) minmax(0, 0.6fr);
	}

	.equipment-register__item {
		break-inside: avoid;
	}
}