/*
 * Steam trap selector — prototype lines 676–781. Every value below is the inline style of that element
 * in the prototype; tokens and shared classes (.kicker, .page-title, .h-22) come from base.css and are
 * never restated here. Markup: page-trap-selector.php (band, duty panel, result skeleton) filled by
 * assets/js/trap-selector.js (trap-select.js is the oracle for every computed string and colour).
 *
 * Colours the prototype uses only here (no base.css token): #9aa1ab (stat labels, "big enough" bars),
 * #f0b26a (warning stat value), #e6e3dc (application row hover), #8a8f96 (undersized capacity text),
 * #4a5563 is not used on this route.
 */

/* ---------------------------------------------------------------------------
 * Dark intro band (line 678)
 * ------------------------------------------------------------------------ */
.traps-intro {
	background: var(--navy);
	color: #fff;
	padding: 56px var(--gutter) 48px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	gap: 32px 48px;
	align-items: end;
}
.traps-intro__title { margin: 6px 0 16px; }
.traps-intro__lede { margin: 0; color: var(--dark-text); max-width: 520px; text-wrap: pretty; }
.traps-intro__actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.traps-intro__btn {
	display: block;
	padding: 13px 20px;
	border: 0;
	background: none;
	color: #fff;
	font: 600 14px/1.5 var(--font-body);
	border-radius: 2px;
	cursor: pointer;
}
.traps-intro__btn--outline { border: 1.5px solid var(--tag-t); }
.traps-intro__btn--outline:hover { border-color: #fff; color: #fff; }
.traps-intro__btn--primary { background: var(--orange); }
.traps-intro__btn--primary:hover { background: var(--orange-dark); color: #fff; }

/* ---------------------------------------------------------------------------
 * Tool row: duty panel + result column (line 688)
 * ------------------------------------------------------------------------ */
.traps-tool {
	padding: 40px var(--gutter) 72px;
	display: flex;
	flex-wrap: wrap;
	gap: 32px 40px;
	align-items: flex-start;
}

/* Duty panel (lines 689–709) */
.traps-duty {
	flex: 1 1 300px;
	min-width: 0;
	background: var(--panel);
	border: 1px solid var(--line);
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.traps-duty__group { display: flex; flex-direction: column; gap: 6px; }
.traps-duty__label { font-size: 13px; font-weight: 500; }
.traps-duty__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.traps-duty__hint { font-size: 12px; color: var(--muted); text-wrap: pretty; }

/* Application list (lines 693–697) */
.traps-apps {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--input-line);
	background: #fff;
	border-radius: 2px;
	overflow: hidden;
}
.traps-app {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	width: 100%;
	margin: 0;
	padding: 11px 14px;
	border: 0;
	border-bottom: 1px solid var(--line-2);
	background: transparent;
	color: var(--ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.traps-app:hover { background: #e6e3dc; }
.traps-app.is-on { background: var(--navy); color: #fff; }
.traps-app__label { font-size: 14px; font-weight: 500; }
.traps-app__hint { font: 10px var(--font-mono); letter-spacing: .1em; white-space: nowrap; color: var(--muted-2); }
.traps-app.is-on .traps-app__hint { color: var(--dark-text); }

/* Pressure / load inputs (lines 700–707) */
.traps-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; }
.traps-input {
	padding: 12px 14px;
	border: 1px solid var(--input-line);
	background: #fff;
	color: var(--ink);
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	border-radius: 2px;
	min-width: 0;
}

/* ---------------------------------------------------------------------------
 * Result column (line 710)
 * ------------------------------------------------------------------------ */
.traps-result { flex: 999 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }

/* Recommendation card (lines 711–730) */
.traps-card {
	background: var(--navy);
	color: #fff;
	padding: 28px;
	display: flex;
	flex-wrap: wrap;
	gap: 24px 40px;
	align-items: flex-start;
}
.traps-card__photo {
	flex: none;
	width: 132px;
	height: 110px;
	background: #fff;
	border-radius: 2px;
	display: grid;
	place-items: center;
	padding: 8px;
}
.traps-card__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.traps-card__main { flex: 1 1 260px; min-width: 0; }
.traps-card__type {
	margin: 6px 0 6px;
	font: 700 clamp(32px, 4vw, 44px)/1 var(--font-display);
	text-transform: uppercase;
	text-wrap: pretty;
	min-height: 1em;
}
.traps-card__model { display: block; font-size: 13px; color: var(--dark-text); min-height: 1.5em; }
.traps-card__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.traps-card__btn {
	display: block;
	margin: 0;
	padding: 11px 16px;
	border: 0;
	background: none;
	color: #fff;
	font: 600 13px/1.5 var(--font-body);
	border-radius: 2px;
	cursor: pointer;
}
.traps-card__btn--primary { background: var(--orange); }
.traps-card__btn--primary:hover { background: var(--orange-dark); color: #fff; }
.traps-card__btn--outline { border: 1.5px solid var(--tag-t); }
.traps-card__btn--outline:hover { border-color: #fff; color: #fff; }
.traps-card__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 16px 24px;
	flex: 1 1 280px;
}
.traps-stat { display: flex; flex-direction: column; gap: 2px; }
.traps-stat__k { font: 11px var(--font-mono); color: #9aa1ab; letter-spacing: .1em; }
.traps-stat__v { font: 700 26px/1.1 var(--font-display); min-height: 1.1em; }
.traps-stat__v.is-warn { color: #f0b26a; }
.traps-card__error { flex: 1 1 100%; margin: 0; font-size: 13px; color: #f0b26a; text-wrap: pretty; }

/* ---------------------------------------------------------------------------
 * Sizes + reasoning (lines 731–755)
 * ------------------------------------------------------------------------ */
.traps-detail { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }

/* Capacity table (lines 732–742) */
.traps-sizes { flex: 1 1 300px; min-width: 0; background: var(--panel); border: 1px solid var(--line); }
.traps-sizes__head {
	padding: 12px 18px;
	border-bottom: 1px solid var(--line);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.traps-sizes__dp { font: 11px var(--font-mono); color: var(--muted); letter-spacing: .06em; }
.traps-size {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) auto;
	gap: 14px;
	align-items: center;
	padding: 10px 18px;
	border-bottom: 1px solid var(--line-2);
}
.traps-size__name { font: 700 20px var(--font-display); }
.traps-size__bar { position: relative; height: 6px; background: var(--line-2); border-radius: 3px; }
.traps-size__fill { height: 6px; border-radius: 3px; background: var(--line); }
.traps-size__marker { position: absolute; top: -4px; width: 2px; height: 14px; background: var(--ink); }
.traps-size__cap { font: 12px var(--font-mono); white-space: nowrap; color: #8a8f96; }
/* Row states — prototype sz.bg / sz.barColor / sz.fg */
.traps-size.is-enough .traps-size__fill { background: #9aa1ab; }
.traps-size.is-enough .traps-size__cap { color: var(--ink); }
.traps-size.is-pick { background: #fff; }
.traps-size.is-pick .traps-size__fill { background: var(--orange); }
.traps-size.is-pick .traps-size__cap { color: var(--orange); }
.traps-sizes__note { display: block; padding: 10px 18px; font-size: 12px; color: var(--muted); text-wrap: pretty; }

/* "Why this trap" / "Alternative" / disclaimer (lines 743–754) */
.traps-why-col { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.traps-box { background: var(--panel); border: 1px solid var(--line); padding: 18px; }
.traps-box__title { display: block; margin-bottom: 10px; }
.traps-box__title--alt { margin-bottom: 6px; }
.traps-why {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 13.5px;
	color: var(--text);
}
.traps-why__item { padding-left: 14px; border-left: 2px solid var(--orange); text-wrap: pretty; }
.traps-alt__name { display: block; font-weight: 600; margin-bottom: 4px; }
.traps-alt__why { font-size: 13px; color: var(--text-2); text-wrap: pretty; }
.traps-disclaimer { font-size: 11px; color: var(--muted); text-wrap: pretty; }

/* ---------------------------------------------------------------------------
 * Mobile (designed from the desktop language — no phone reference)
 * ------------------------------------------------------------------------ */
.traps-card { scroll-margin-top: 84px; } /* the sticky header, when trap-selector.js scrolls the card into view */
@media (max-width: 899.98px) {
	/* The duty panel reads as numbered steps: 1 application, 2–3 pressures, 4 load. */
	.traps-duty { counter-reset: step; }
	.traps-duty__label::before, .traps-field__text::before {
		counter-increment: step;
		content: counter(step);
		display: inline-block;
		min-width: 18px;
		height: 18px;
		margin-right: 8px;
		border-radius: 9px;
		background: var(--navy);
		color: #fff;
		font: 600 11px/18px var(--font-mono);
		text-align: center;
		vertical-align: 1px;
	}
	.traps-app__hint { font-size: 11px; }
	.traps-card__btn { min-height: 44px; display: flex; align-items: center; justify-content: center; }
}
@media (max-width: 599.98px) {
	.traps-intro__actions { flex-direction: column; justify-content: flex-start; align-items: stretch; }
	.traps-intro__btn { text-align: center; }
}
@media (max-width: 499.98px) {
	.traps-card__actions { flex-direction: column; }
}