/*
 * MEP-FLOW pump selection — prototype lines 557–693 (and 1370–1404 for the printed curve). Every value
 * below is the inline style of that element in the prototype; tokens and shared classes (.kicker,
 * .page-title, .h-22, .sr-only) come from base.css and are never restated here.
 *
 * Markup: page-mep-flow.php + template-parts/curve-panel.php, filled by assets/js/mep-flow.js
 * (hydraulics.js is the oracle for every computed string, path and colour).
 *
 * Colours the prototype uses only here (no base.css token): #dcd9d1 (chart grid), #a9a59c (chart frame
 * and the dashed trim curves).
 *
 * The .mepflow-plot label classes are deliberately not nested under .mepflow-curve: the same markup is
 * handed to print-sheet.js for the printable curve sheet, where .print-sheet__curve re-points the two
 * custom properties to the prototype's white-paper variants (line 1383/1402).
 */

/* ---------------------------------------------------------------------------
 * Dark intro band (line 559)
 * ------------------------------------------------------------------------ */
.mepflow-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;
}
.mepflow-intro__title { margin: 6px 0 16px; }
.mepflow-intro__lede { margin: 0; color: var(--dark-text); max-width: 520px; text-wrap: pretty; }
.mepflow-intro__actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.mepflow-intro__btn {
	display: block;
	padding: 13px 20px;
	border: 0;
	background: none;
	color: #fff;
	font: 600 14px/1.5 var(--font-body);
	border-radius: 2px;
}
a.mepflow-intro__btn { cursor: pointer; }
/* The prototype's buttons are inert divs that still react to the pointer (style-hover on lines 566/567),
   so the hover states are not scoped to the anchor: a label whose link field is still empty renders as a
   <span> here and must look and behave the same. */
.mepflow-intro__btn--outline { border: 1.5px solid var(--tag-t); }
.mepflow-intro__btn--outline:hover { border-color: #fff; color: #fff; }
.mepflow-intro__btn--primary { background: var(--orange); }
.mepflow-intro__btn--primary:hover { background: var(--orange-dark); color: #fff; }

/* ---------------------------------------------------------------------------
 * Tool row: quick-select panel + results (line 569)
 * ------------------------------------------------------------------------ */
.mepflow-tool {
	padding: 40px var(--gutter) 72px;
	display: flex;
	flex-wrap: wrap;
	gap: 32px 40px;
	align-items: flex-start;
}

/* Quick select panel (lines 570–582). The box is base.css .card, the labels .field and the controls
   .input / .select — only the number inputs' 16px (line 575/577) is route-specific. */
.mepflow-panel {
	flex: 1 1 300px;
	min-width: 0;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.mepflow-input { font-size: 16px; }
.mepflow-panel__note { font-size: 12px; color: var(--muted); text-wrap: pretty; }

/* ---------------------------------------------------------------------------
 * Results column (lines 583–605)
 * ------------------------------------------------------------------------ */
.mepflow-results { flex: 999 1 480px; min-width: 0; }
.mepflow-results__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 14px;
	gap: 12px;
	flex-wrap: wrap;
}
.mepflow-results__count { margin: 0; font: 700 30px var(--font-display); text-transform: uppercase; }
.mepflow-results__duty { font: 12px var(--font-mono); color: var(--muted); }

.mepflow-table { overflow-x: auto; }
.mepflow-table__inner {
	min-width: 620px;
	/* Contains the .sr-only column label: an absolutely positioned box whose containing block is
	   outside the scroller would widen the document at narrow viewports. */
	position: relative;
}
.mepflow-table__head,
.mepflow-row {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr .8fr 110px;
	gap: 0 12px;
}
.mepflow-table__head {
	padding: 10px 20px;
	border-bottom: 1px solid var(--line);
	font: 11px var(--font-mono);
	color: var(--muted);
	letter-spacing: .1em;
}
.mepflow-row {
	align-items: center;
	padding: 14px 20px;
	border-bottom: 1px solid var(--line-2);
	background: transparent;
}
.mepflow-row.is-on { background: #fff; }
.mepflow-row__model { display: flex; flex-direction: column; }
.mepflow-row__name { font: 700 20px var(--font-display); }
.mepflow-row__range { font: 11px var(--font-mono); color: var(--muted-2); }
.mepflow-row__cell { font-size: 13px; }
.mepflow-row__eff { display: flex; flex-direction: column; gap: 4px; }
.mepflow-row__effv { font-weight: 600; }
.mepflow-bar { height: 4px; background: var(--line); border-radius: 2px; width: 90px; }
.mepflow-bar__fill { height: 4px; background: var(--orange); border-radius: 2px; }
.mepflow-row__btn {
	display: block;
	width: 100%;
	margin: 0;
	padding: 8px 12px;
	border: 1.5px solid var(--navy);
	background: transparent;
	color: var(--ink);
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	border-radius: 2px;
	text-align: center;
}
.mepflow-row__btn:hover { background: var(--navy); color: #fff; }
.mepflow-row__btn[aria-expanded="true"] { background: var(--navy); color: #fff; }
.mepflow-empty { padding: 28px 20px; color: var(--muted); font-size: 14px; text-wrap: pretty; }

/* ---------------------------------------------------------------------------
 * Curve panel (lines 606–670)
 * ------------------------------------------------------------------------ */
.mepflow-curve {
	margin-top: 24px;
	display: flex;
	flex-wrap: wrap;
}
.mepflow-curve__plot {
	flex: 999 1 440px;
	min-width: 0;
	padding: 20px 24px 16px;
	border-right: 1px solid var(--line);
}
.mepflow-curve__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 8px;
}
.mepflow-curve__id { display: flex; flex-direction: column; }
.mepflow-curve__model { font: 700 28px/1 var(--font-display); }
.mepflow-curve__sub { font: 11px var(--font-mono); color: var(--muted); letter-spacing: .08em; }
.mepflow-curve__close {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: 12px var(--font-mono);
	color: var(--muted);
	cursor: pointer;
}
.mepflow-curve__close:hover { color: var(--ink); }

/* Plot area (lines 613–650) */
.mepflow-plot { position: relative; font: 10.5px var(--font-mono); color: var(--muted); }
.mepflow-svg { width: 100%; height: auto; display: block; font-family: var(--font-mono); overflow: visible; }
.mepflow-svg__por { fill: var(--orange); opacity: .09; }
.mepflow-svg__grid { stroke: #dcd9d1; stroke-width: 1; fill: none; }
.mepflow-svg__frame { stroke: #a9a59c; stroke-width: 1; fill: none; }
.mepflow-svg__eff-tick { font-size: 10.5px; fill: var(--orange-text); dominant-baseline: middle; }
.mepflow-svg__axis-x { font-size: 11px; fill: var(--text-2); text-anchor: middle; letter-spacing: .1em; }
.mepflow-svg__axis-y { font-size: 11px; fill: var(--text-2); text-anchor: middle; letter-spacing: .1em; }
.mepflow-svg__axis-e { font-size: 11px; fill: var(--orange-text); text-anchor: middle; letter-spacing: .1em; }
.mepflow-svg__trim { stroke: #a9a59c; stroke-width: 1.5; fill: none; stroke-dasharray: 4 3; }
.mepflow-svg__max { stroke: var(--navy); stroke-width: 2.5; fill: none; }
.mepflow-svg__duty { stroke: var(--orange); stroke-width: 2; fill: none; }
.mepflow-svg__eff { stroke: var(--orange); stroke-width: 1.5; fill: none; stroke-dasharray: 1 3; }
.mepflow-svg__bep { fill: var(--mepflow-bep-fill, var(--panel)); stroke: var(--navy); stroke-width: 2; }
.mepflow-svg__bep-label { font-size: 10px; fill: var(--navy); text-anchor: middle; }
.mepflow-svg__point { fill: var(--orange); stroke: #fff; stroke-width: 2.5; }

.mepflow-ylab { position: absolute; left: 8.1%; transform: translate(-100%, -50%); }
.mepflow-ylab--0 { top: 86.02%; }
.mepflow-ylab--1 { top: 70.75%; }
.mepflow-ylab--2 { top: 55.48%; }
.mepflow-ylab--3 { top: 40.22%; }
.mepflow-ylab--4 { top: 24.95%; }
.mepflow-ylab--5 { top: 9.68%; }
.mepflow-xlab { position: absolute; top: 87.5%; transform: translate(-50%, 0); }
.mepflow-xlab--0 { left: 9.375%; }
.mepflow-xlab--1 { left: 25.94%; }
.mepflow-xlab--2 { left: 42.5%; }
.mepflow-xlab--3 { left: 59.06%; }
.mepflow-xlab--4 { left: 75.63%; }
.mepflow-xlab--5 { left: 92.19%; }
.mepflow-tlab { position: absolute; transform: translate(0, -50%); font-size: 10px; white-space: nowrap; }
.mepflow-tlab--max { color: var(--navy); }
.mepflow-dlab {
	position: absolute;
	transform: translate(0, 35%);
	color: var(--orange-text);
	font-weight: 600;
	white-space: nowrap;
	background: var(--mepflow-label-bg, rgba(247, 246, 242, .85));
	padding: 1px 4px;
}

/* The printed sheet draws the same curve on white paper (prototype lines 1383 and 1402). */
.print-sheet__curve { --mepflow-bep-fill: #fff; --mepflow-label-bg: rgba(255, 255, 255, .85); }

/* Legend (lines 651–657) */
.mepflow-legend {
	display: flex;
	gap: 8px 18px;
	flex-wrap: wrap;
	margin-top: 8px;
	font: 11px var(--font-mono);
	color: var(--text-2);
}
.mepflow-legend__item { display: flex; align-items: center; gap: 6px; }
.mepflow-legend__swatch { width: 18px; height: 0; }
.mepflow-legend__swatch--max { border-top: 2.5px solid var(--navy); }
.mepflow-legend__swatch--selected { border-top: 2px solid var(--orange); }
.mepflow-legend__swatch--other { border-top: 1.5px dashed #a9a59c; }
.mepflow-legend__swatch--eff { border-top: 1.5px dotted var(--orange); }
.mepflow-legend__swatch--por { width: 14px; height: 10px; border-top: 0; background: var(--orange); opacity: .15; }

/* Stats + actions (lines 659–668) */
.mepflow-curve__side {
	flex: 1 1 250px;
	min-width: 0;
	padding: 20px 24px;
	display: flex;
	flex-direction: column;
	gap: 0;
}
.mepflow-stat {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid var(--line-2);
	font-size: 13px;
}
.mepflow-stat__k { font: 11px var(--font-mono); color: var(--muted); letter-spacing: .06em; padding-top: 2px; }
.mepflow-stat__v { font-weight: 600; text-align: right; color: var(--ink); }
.mepflow-stat__v.is-good { color: var(--green); }
.mepflow-stat__v.is-warn { color: var(--orange-hover); }
.mepflow-curve__actions { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.mepflow-curve__quote {
	display: block;
	padding: 11px;
	background: var(--orange);
	color: var(--ink);
	text-align: center;
	font-weight: 600;
	cursor: pointer;
	border-radius: 2px;
	font-size: 13px;
}
.mepflow-curve__quote:hover { background: var(--orange-dark); color: var(--ink); }
.mepflow-curve__pair { display: flex; gap: 8px; }
.mepflow-curve__btn {
	flex: 1;
	margin: 0;
	padding: 10px;
	border: 1.5px solid var(--navy);
	background: transparent;
	color: var(--ink);
	text-align: center;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	border-radius: 2px;
}
.mepflow-curve__btn:hover { background: var(--navy); color: #fff; }
.mepflow-curve__note { font-size: 11px; color: var(--muted); margin-top: 12px; text-wrap: pretty; }

/* ---------------------------------------------------------------------------
 * Mobile (designed from the desktop language — no phone reference)
 * ------------------------------------------------------------------------ */
/* The sticky header is 72px: keep it clear when the panel is scrolled into view (mep-flow.js). */
.mepflow-curve { scroll-margin-top: 84px; }
@media (max-width: 899.98px) {
	.mepflow-curve__close { display: inline-flex; align-items: center; justify-content: flex-end; min-height: 44px; min-width: 44px; }
	.mepflow-curve__btn, .mepflow-curve__quote { min-height: 44px; display: flex; align-items: center; justify-content: center; }
	.mepflow-row__btn { min-height: 44px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; }
	.mepflow-plot { font-size: 11px; }
	.mepflow-tlab { font-size: 11px; background: var(--mepflow-label-bg, rgba(247, 246, 242, .85)); padding: 0 3px; }
	/* mep-flow.js flips the duty label to the left of its point when it would cover a trim label. */
	.mepflow-dlab.is-left { transform: translate(-100%, 35%); }
}
/* Below 700px the 620px result grid would scroll sideways with the View-curve column off-screen: each
   pump becomes a card — model + button on top, the four figures in a 2 × 2 grid with their own labels
   (data-label, filled from the column head by mep-flow.js). The head stays in the DOM for assistive tech. */
@media (max-width: 699.98px) {
	.mepflow-table__inner { min-width: 0; }
	.mepflow-table__head { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
	.mepflow-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-areas: "model btn" "type eff" "motor npsh";
		gap: 14px 16px;
		padding: 16px;
		align-items: start;
	}
	.mepflow-row__model { grid-area: model; }
	.mepflow-row > [role="cell"]:nth-child(2) { grid-area: type; }
	.mepflow-row__eff { grid-area: eff; }
	.mepflow-row > [role="cell"]:nth-child(4) { grid-area: motor; }
	.mepflow-row > [role="cell"]:nth-child(5) { grid-area: npsh; }
	.mepflow-row > [role="cell"]:nth-child(6) { grid-area: btn; justify-self: end; }
	.mepflow-row [data-label]::before { content: attr(data-label); display: block; font: 11px var(--font-mono); color: var(--muted); letter-spacing: .1em; margin-bottom: 3px; }
	.mepflow-row__cell, .mepflow-row__effv { font-size: 14px; }
	.mepflow-row__btn { width: auto; padding: 0 16px; font-size: 13px; }
	.mepflow-curve__plot { border-right: 0; border-bottom: 1px solid var(--line); padding: 16px 12px 12px; }
	.mepflow-curve__side { padding: 16px; }
	/* Trim labels sit at the right end of curves that converge on a 350px plot: spread the outer two. */
	.mepflow-tlab--max { transform: translate(0, -120%); }
	.mepflow-tlab[data-mep-flow-tlab="3"] { transform: translate(0, 20%); }
}
@media (max-width: 599.98px) {
	.mepflow-intro__actions { flex-direction: column; justify-content: flex-start; align-items: stretch; }
	.mepflow-intro__btn { text-align: center; }
}

/* ---------------------------------------------------------------------------
 * Verification gate: unverified models list as products, never as selections
 * ------------------------------------------------------------------------ */
.mepflow-unverified { margin-top: 24px; padding: 20px 20px 8px; }
.mepflow-unverified__title { margin: 0 0 6px; font: 700 22px/1.1 var(--font-display); text-transform: uppercase; text-wrap: pretty; }
.mepflow-unverified__text { margin: 0 0 12px; font-size: 13px; color: var(--muted); text-wrap: pretty; }
.mepflow-unverified__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 0; border-top: 1px solid var(--line-2); }
.mepflow-unverified__model { font: 700 20px var(--font-display); }
.mepflow-unverified__type { font-size: 13px; color: var(--text-2); flex: 1 1 140px; }
.mepflow-unverified__status { font: 11px var(--font-mono); color: var(--muted); letter-spacing: .06em; }
.mepflow-unverified__btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--navy); border-radius: 2px; color: var(--ink); font-size: 13px; font-weight: 600; }
.mepflow-unverified__btn:hover { background: var(--navy); color: #fff; }
.mepflow-curve__contact { flex: 1 1 100%; padding: 20px 24px; display: flex; flex-direction: column; gap: 12px; }
.mepflow-curve__contact-kicker { font-size: 11px; }
.mepflow-curve__contact-text { margin: 0; max-width: 620px; color: var(--text-2); text-wrap: pretty; }
.mepflow-curve__contact-actions { margin-top: 4px; max-width: 360px; }
.mepflow-curve__phone { font-size: 13px; font-weight: 600; color: var(--orange-text); text-align: center; padding: 8px 0; }