/**
 * Calculators and the tools grid (docs/13-TOOLS.md §7.8, §9; 14 §16; 09 §3.9; 02 §7.28): mainland/calculator and
 * mainland/tools-grid (mainland-inventory). Loaded only where one of them prints (mainland_enqueue_calc_css(),
 * functions.php), after theme.css and pages.css.
 *
 * Layout (09 §3.9): the inputs on a white card, the result on an ink plate beside them (sticky from 960 px when the
 * screen is tall enough to hold it), a compact result card above the phone action bar while the inputs are in view,
 * then the chart and its table on a white card. Charts are our own SVG: on light, `text` and `cyan-700` series with
 * `field` gridlines; on the plate, cyan and `on-dark-2`. Every chart sits in a role="img" figure with its summary
 * and has a table beside it.
 *
 * Tokens only (theme.json presets and the --mn-* surface properties). Grids use minmax(0, 1fr). Targets are 44 px.
 * Motion (10): the figure counts in JavaScript (none under reduced motion); bars move by width over `ui`; nothing
 * moves on its own. The global reduced-motion stop in theme.css §24 ends every transition here too.
 *
 * The calculator itself is here (render-blocking: it is on the first screen). The chart and table under each
 * calculator, the hub's cards and the print styles are in calc-more.css, which loads without blocking the first
 * paint; the insurance checklist adds calc-check.css and the /tools/ hub uses calc-hub.css instead of this file
 * (inc/calc.php), so each page loads only its own share.
 *
 *  1. Band and layout             4. Result plate
 *  2. Inputs card and fields      5. Phone result card
 *  3. Choices, chips, switches    6. Rent vs lease vs buy, stock, revenue vs cost, caution
 */

/* 1. Band and layout --------------------------------------------------------------------------------------------- */

.mn-calc-band { scroll-margin-block-start: var(--mn-sticky-top); }
.mn-calc { --mn-calc-gap: clamp(20px, 2.4vw, 32px); display: grid; gap: var(--mn-calc-gap); }
.mn-calc [hidden] { display: none !important; }
.mn-calc p { margin: 0; }
.mn-calc__form { display: grid; gap: var(--mn-calc-gap); margin: 0; grid-template-columns: minmax(0, 1fr); align-items: start; }

@media (min-width: 960px) {
	.mn-calc__form { grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr); }
	.mn-calc--rent-lease-buy .mn-calc__form { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); }
}

/* 2. Inputs card and fields ------------------------------------------------------------------------------------- */

.mn-calc__inputs {
	--mn-calc-error: var(--wp--preset--color--error);
	container: mn-calc-in / inline-size;
	display: grid;
	gap: 26px;
	min-inline-size: 0;
	padding: clamp(20px, 3vw, 36px);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--card);
}
.mn-calc__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.mn-calc__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: var(--wp--custom--line-height--title);
	letter-spacing: var(--wp--custom--tracking--title);
}
.mn-calc__reset {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-block-size: var(--wp--custom--target--min);
	color: var(--mn-text);
	font-size: var(--wp--custom--font-size--ui);
	font-weight: 600;
	text-decoration: none;
}
.mn-calc__reset .mn-icon { inline-size: 1rem; block-size: 1rem; }
.mn-calc__reset:hover { color: var(--mn-link); }

.mn-calc__group { display: grid; gap: 16px; min-inline-size: 0; margin: 0; padding: 22px 0 0; border: 0; border-block-start: 1px solid var(--wp--preset--color--line); }
.mn-calc__head + .mn-calc__group,
.mn-calc__head + .mn-calc__units { padding-block-start: 0; border-block-start: 0; }
.mn-calc__legend {
	display: flex;
	align-items: center;
	gap: 10px;
	float: left; /* lets the legend sit inside the grid's flow in every browser */
	inline-size: 100%;
	margin: 0 0 16px;
	padding: 0;
	color: var(--mn-text-strong);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 800;
	letter-spacing: var(--wp--custom--tracking--title);
}
.mn-calc__legend-icon {
	box-sizing: border-box;
	inline-size: 32px;
	block-size: 32px;
	padding: 6px;
	border-radius: var(--wp--custom--radius--sm);
	background: var(--mn-tick-bg);
	color: var(--mn-tick-fg);
}
.mn-calc__grid { clear: both; display: grid; gap: 18px 20px; grid-template-columns: minmax(0, 1fr); }
@container mn-calc-in (min-width: 30rem) {
	.mn-calc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mn-calc__field--wide,
	.mn-calc__choice:has(.mn-calc__seg--cards),
	.mn-calc__field--down { grid-column: 1 / -1; }
}

.mn-calc__field { display: grid; gap: 7px; align-content: start; min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.mn-calc__labels { display: grid; gap: 2px; min-inline-size: 0; }
.mn-calc__label {
	padding: 0;
	color: var(--mn-text-strong);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--custom--font-size--ui);
	font-weight: 600;
	line-height: 1.3;
}
.mn-calc__hint { color: var(--mn-text-muted); font-size: var(--wp--custom--font-size--meta); line-height: 1.4; }
.mn-calc__hint a { color: var(--mn-link); }

/* A field: its unit inside the box, right-aligned tabular figures (the estimator's box, 13 §9). */
.mn-calc__box {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 6px;
	inline-size: 100%;
	block-size: 48px;
	padding-inline: 14px;
	border-radius: var(--wp--custom--radius--sm);
	background: var(--mn-field-bg);
	box-shadow: inset 0 0 0 1px var(--mn-field-border);
	color: var(--mn-text);
	cursor: text;
	transition: box-shadow var(--wp--custom--motion--micro) var(--wp--custom--motion--ease);
}
.mn-calc__box:hover { box-shadow: inset 0 0 0 1px var(--mn-text-strong); }
.mn-calc__box:focus-within {
	box-shadow: inset 0 0 0 1px var(--mn-text-strong);
	outline: var(--wp--custom--focus--width) solid var(--mn-focus);
	outline-offset: 2px;
}
.mn-calc__affix { flex: none; color: var(--mn-text-muted); font-size: var(--wp--custom--font-size--ui); font-weight: 600; white-space: nowrap; pointer-events: none; }
.mn-calc__input {
	flex: 1 1 auto;
	box-sizing: border-box;
	inline-size: 100%;
	min-inline-size: 0;
	block-size: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--mn-field-text);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-align: end;
	-moz-appearance: textfield;
	appearance: textfield;
}
.mn-calc__input::placeholder { color: var(--wp--preset--color--text-3); font-weight: 500; opacity: 1; }
.mn-calc__input:focus,
.mn-calc__input:focus-visible { outline: none; }
.mn-calc__input::-webkit-outer-spin-button,
.mn-calc__input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; appearance: none; }
.mn-calc__box:has(> .mn-calc__input[aria-invalid="true"]),
.mn-calc__box:has(> .mn-calc__input[aria-invalid="true"]):hover { box-shadow: inset 0 0 0 2px var(--mn-calc-error); }
.mn-calc__box:has(> .mn-calc__input:disabled) { opacity: 0.5; cursor: not-allowed; }

/* Field messages (02 §7.9): the error with its icon; the note (a value clamped, a warning) in the strong text. */
.mn-calc__error {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	color: var(--mn-calc-error);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.4;
}
.mn-calc__error::before {
	content: "";
	flex: none;
	inline-size: 1.05em;
	block-size: 1.05em;
	margin-block-start: 0.1em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mn-calc__note { padding-inline-start: 10px; border-inline-start: 2px solid var(--wp--preset--color--warn); color: var(--mn-text-strong); font-size: var(--wp--preset--font-size--small); line-height: 1.4; }

.mn-calc__submit { padding-block-start: 4px; }

/* The distance unit: two links (a toggle with the script) on a tray. */
.mn-calc__units { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding-block-end: 4px; }
.mn-calc__units-label { color: var(--mn-text-strong); font-size: var(--wp--custom--font-size--ui); font-weight: 600; }
.mn-calc__unit-links { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--md); background: var(--wp--preset--color--paper); }
.mn-calc__unit {
	display: grid;
	place-items: center;
	min-inline-size: 5.5rem;
	min-block-size: var(--wp--custom--target--min);
	padding-inline: 14px;
	border-radius: var(--wp--custom--radius--sm);
	color: var(--mn-text);
	font-size: var(--wp--custom--font-size--ui);
	font-weight: 600;
	text-decoration: none;
}
.mn-calc__unit:hover { color: var(--mn-text-strong); background: var(--wp--preset--color--white); }
.mn-calc__unit[aria-current="true"] { background: var(--wp--preset--color--ink-1); box-shadow: inset 0 -3px 0 var(--wp--preset--color--cyan), var(--wp--preset--shadow--ink); color: var(--wp--preset--color--white); }

/* 3. Choices, chips, switches ----------------------------------------------------------------------------------- */
/* Segments: native radios over each label, so clicks, arrow keys and the GET form all work without the script.
   The chosen one is the choice-chip family's (02 §7.16): ink with the cyan bar. */

.mn-calc__choice > legend { float: left; inline-size: 100%; margin-block-end: 7px; }
.mn-calc__choice > .mn-calc__hint { clear: both; margin-block-end: 4px; }
.mn-calc__seg {
	clear: both;
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	gap: 2px;
	padding: 3px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--paper);
}
.mn-calc__opt { position: relative; display: grid; min-inline-size: 0; }
.mn-calc__opt input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; }
.mn-calc__opt-text {
	display: grid;
	place-items: center;
	gap: 3px;
	min-block-size: var(--wp--custom--target--min);
	padding: 6px 10px;
	border-radius: var(--wp--custom--radius--sm);
	color: var(--mn-text);
	font-size: var(--wp--custom--font-size--ui);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	pointer-events: none;
	transition: background-color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease), color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease);
}
.mn-calc__opt:hover .mn-calc__opt-text { background: var(--wp--preset--color--white); color: var(--mn-text-strong); }
.mn-calc__opt input:checked + .mn-calc__opt-text {
	background: var(--wp--preset--color--ink-1);
	box-shadow: inset 0 -3px 0 var(--wp--preset--color--cyan), var(--wp--preset--shadow--ink);
	color: var(--wp--preset--color--white);
}
.mn-calc__opt input:focus-visible + .mn-calc__opt-text { outline: var(--wp--custom--focus--width) solid var(--mn-focus); outline-offset: 2px; }

/* Option cards (the lease's end-of-term options): a name and a line each, two across from 30 rem. */
.mn-calc__seg--cards { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 0; border: 0; background: none; }
@container mn-calc-in (min-width: 30rem) {
	.mn-calc__seg--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.mn-calc__opt--card .mn-calc__opt-text {
	place-items: start;
	align-content: start;
	block-size: 100%;
	box-sizing: border-box;
	padding: 14px 16px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--white);
	text-align: start;
}
.mn-calc__opt--card:hover .mn-calc__opt-text { border-color: var(--mn-text-strong); }
.mn-calc__opt--card input:checked + .mn-calc__opt-text { border-color: var(--wp--preset--color--ink-1); }
.mn-calc__opt-name { color: inherit; }
.mn-calc__opt-line { color: var(--mn-text-muted); font-size: var(--wp--custom--font-size--meta); font-weight: 400; line-height: 1.45; }
.mn-calc__opt--card input:checked + .mn-calc__opt-text .mn-calc__opt-line { color: var(--wp--preset--color--on-dark-2); }

/* Term chips: quick picks under the term field (the field takes any whole number 12–84). */
.mn-calc__chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--wp--custom--target--min), 1fr)); gap: 6px; }
.mn-calc__chip {
	min-block-size: var(--wp--custom--target--min);
	padding: 0 6px;
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--white);
	color: var(--mn-text-strong);
	font: 600 var(--wp--custom--font-size--ui) / 1 var(--wp--preset--font-family--body);
	cursor: pointer;
	transition: background-color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease), border-color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease), color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease);
}
.mn-calc__chip:hover { border-color: var(--mn-text-strong); }
.mn-calc__chip[aria-pressed="true"] {
	border-color: var(--wp--preset--color--ink-1);
	background: var(--wp--preset--color--ink-1);
	box-shadow: inset 0 -3px 0 var(--wp--preset--color--cyan), var(--wp--preset--shadow--ink);
	color: var(--wp--preset--color--white);
}

/* The down payment: the active field beside a $ / % switch. */
.mn-calc__down { display: flex; align-items: center; gap: 10px; }
.mn-calc__down-box { flex: 1 1 auto; min-inline-size: 0; }
.mn-calc__switch { display: flex; flex: none; gap: 2px; padding: 1px; border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--md); background: var(--wp--preset--color--paper); }
.mn-calc__switch button {
	inline-size: var(--wp--custom--target--min);
	block-size: var(--wp--custom--target--min);
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--sm);
	background: none;
	color: var(--mn-text);
	font: 700 var(--wp--preset--font-size--medium) / 1 var(--wp--preset--font-family--body);
	cursor: pointer;
}
.mn-calc__switch button:hover { background: var(--wp--preset--color--white); color: var(--mn-text-strong); }
.mn-calc__switch button[aria-pressed="true"] { background: var(--wp--preset--color--ink-1); box-shadow: inset 0 -3px 0 var(--wp--preset--color--cyan); color: var(--wp--preset--color--white); }

/* A checkbox row (the half-year rule). */
.mn-calc__check { position: relative; display: flex; align-items: flex-start; gap: 12px; min-block-size: var(--wp--custom--target--min); cursor: pointer; }
.mn-calc__check input { position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 44px; block-size: 44px; margin: 0; opacity: 0; cursor: pointer; }
.mn-calc__check-box {
	box-sizing: border-box;
	flex: none;
	display: grid;
	place-items: center;
	inline-size: 26px;
	block-size: 26px;
	margin: 9px;
	border: 1.5px solid var(--wp--preset--color--field);
	border-radius: var(--wp--custom--radius--xs);
	background: var(--wp--preset--color--white);
}
.mn-calc__check input:checked + .mn-calc__check-box { border-color: var(--wp--preset--color--ink-1); background: var(--wp--preset--color--ink-1); }
.mn-calc__check input:checked + .mn-calc__check-box::after {
	content: "";
	inline-size: 14px;
	block-size: 14px;
	background: var(--wp--preset--color--cyan);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mn-calc__check input:focus-visible + .mn-calc__check-box { outline: var(--wp--custom--focus--width) solid var(--mn-focus); outline-offset: 3px; }
.mn-calc__check-text { display: grid; gap: 2px; padding-block: 10px; }

/* 4. Result plate ----------------------------------------------------------------------------------------------- */
/* Ink-3 with a cyan light from the top corner; every small text on-dark-2 or lighter. The figure is the page's
   loudest number; the footnote sits right under the result at the small body size (13 §3.3). */

.mn-calc__result {
	--mn-calc-error: var(--wp--preset--color--led-amber);
	--mn-calc-track: rgba(255, 255, 255, 0.14);
	position: relative;
	isolation: isolate;
	overflow: clip;
	container: mn-calc-out / inline-size;
	display: grid;
	gap: 16px;
	min-inline-size: 0;
	padding: clamp(22px, 2.8vw, 34px);
	border-radius: var(--wp--custom--radius--lg);
	background:
		radial-gradient(120% 70% at 100% 0%, rgba(var(--wp--custom--cyan-rgb), 0.16), transparent 60%),
		linear-gradient(180deg, var(--wp--preset--color--ink-3), var(--wp--preset--color--ink-1));
	box-shadow: var(--wp--preset--shadow--raised);
	color: var(--mn-text);
}
.mn-calc__result::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: var(--mn-z-under);
	background-image: linear-gradient(var(--mn-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--mn-grid-line) 1px, transparent 1px);
	background-size: var(--wp--custom--grid--plate) var(--wp--custom--grid--plate);
	-webkit-mask-image: linear-gradient(160deg, #000, transparent 55%);
	mask-image: linear-gradient(160deg, #000, transparent 55%);
	pointer-events: none;
}
.mn-calc__out-label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	color: var(--wp--preset--color--cyan-300);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
}
.mn-calc__out-label::before { content: ""; flex: none; inline-size: 22px; block-size: 1px; background: var(--wp--preset--color--cyan); }
.mn-calc__figure {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 10px;
	min-block-size: calc(var(--mn-calc-fig) * 0.95);
	color: var(--wp--preset--color--white);
	line-height: 1;
	--mn-calc-fig: clamp(2.75rem, 2rem + 2.6vw, 4rem);
}
.mn-calc__approx { color: var(--wp--preset--color--cyan-300); font-family: var(--wp--preset--font-family--display); font-size: calc(var(--mn-calc-fig) * 0.62); font-weight: 700; line-height: 0; }
.mn-calc__amount {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--mn-calc-fig);
	font-weight: 800;
	line-height: 0.95;
	letter-spacing: var(--wp--custom--tracking--heading);
	font-variant-numeric: tabular-nums;
	font-synthesis: none;
}
.mn-calc__per { color: var(--wp--preset--color--on-dark-2); font-size: var(--wp--preset--font-size--medium); font-weight: 600; white-space: nowrap; }
.mn-calc__per abbr { text-decoration: none; }
.mn-calc__mark {
	display: inline-block;
	margin: -14px -26px -14px 0;
	padding: 14px 26px 14px 3px;
	color: var(--wp--preset--color--cyan-300);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	vertical-align: 0.4em;
}
.mn-calc__mark:hover { color: var(--wp--preset--color--white); }
.mn-calc__msg { display: none; color: var(--wp--preset--color--white); font-weight: 600; line-height: 1.45; }
.mn-calc:not([data-state="ok"]) .mn-calc__msg { display: block; }
.mn-calc:not([data-state="ok"]) :is(.mn-calc__approx, .mn-calc__per) { display: none; }
.mn-calc:not([data-state="ok"]) .mn-calc__amount { color: var(--wp--preset--color--on-dark-3); }
.mn-calc[data-state="paid"] .mn-calc__amount { color: var(--wp--preset--color--white); }
.mn-calc__meta { color: var(--wp--preset--color--on-dark-2); font-size: var(--wp--preset--font-size--small); line-height: 1.5; }

/* No figure yet (a field to fill in, or no figures at all): the prompt takes the figure's place, and the parts that
   only mean something with a figure step aside (the footnote keeps its estimate sentences). */
.mn-calc:is([data-state="need"], [data-state="empty"]) .mn-calc__figure,
.mn-calc:is([data-state="need"], [data-state="empty"]) .mn-calc__result :is(.mn-calc-stack, .mn-calc-legend, .mn-calc__stats, .mn-calc-vs),
.mn-calc:is([data-state="need"], [data-state="empty"]) .mn-calc__fn-based { display: none; }
.mn-calc:is([data-state="need"], [data-state="empty"]) .mn-calc__msg {
	padding-inline-start: 14px;
	border-inline-start: 2px solid var(--wp--preset--color--cyan);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 800;
	line-height: var(--wp--custom--line-height--title);
	letter-spacing: var(--wp--custom--tracking--title);
	text-wrap: balance;
}

/* The stacked bar on the plate (principal and interest, financed and down …), then its legend. */
.mn-calc-stack {
	display: flex;
	overflow: hidden;
	block-size: 10px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--mn-calc-track);
}
.mn-calc-stack__seg { flex: none; inline-size: var(--w, 0%); transition: inline-size var(--wp--custom--motion--ui) var(--wp--custom--motion--ease-out); }
.mn-calc-stack__seg + .mn-calc-stack__seg { box-shadow: inset 2px 0 0 var(--wp--preset--color--ink-1); }
.mn-calc__result .mn-calc-stack__seg:nth-child(1) { background: linear-gradient(90deg, var(--wp--preset--color--cyan-700), var(--wp--preset--color--cyan)); }
.mn-calc__result .mn-calc-stack__seg:nth-child(2) { background: var(--wp--preset--color--on-dark-2); }
.mn-calc__result .mn-calc-stack__seg:nth-child(3) { background: var(--wp--preset--color--on-dark-3); }

.mn-calc-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; }
.mn-calc-legend__key {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--mn-text);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--spec);
	text-transform: uppercase;
}
.mn-calc-legend__key::before { content: ""; flex: none; inline-size: 10px; block-size: 10px; border-radius: 2px; background: var(--mn-key, currentColor); }
.mn-calc__result .mn-calc-legend__key:nth-child(1) { --mn-key: var(--wp--preset--color--cyan); }
.mn-calc__result .mn-calc-legend__key:nth-child(2) { --mn-key: var(--wp--preset--color--on-dark-2); }
.mn-calc__result .mn-calc-legend__key:nth-child(3) { --mn-key: var(--wp--preset--color--on-dark-3); }

.mn-calc__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-block-start: 1px solid var(--mn-rule-2); }
.mn-calc__stat { display: grid; gap: 4px; align-content: start; padding: 12px 0; border-block-end: 1px solid var(--mn-rule); }
.mn-calc__stat:nth-child(odd) { padding-inline-end: 12px; }
.mn-calc__stat:nth-child(even) { padding-inline-start: 12px; border-inline-start: 1px solid var(--mn-rule); }
.mn-calc__stat dt { color: var(--wp--preset--color--on-dark-2); font-size: 0.75rem; font-weight: 500; line-height: 1.3; }
.mn-calc__stat dd { margin: 0; color: var(--wp--preset--color--white); font-size: var(--wp--preset--font-size--large); font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.mn-calc:not([data-state="ok"]) .mn-calc__stat dd { color: var(--wp--preset--color--on-dark-3); }

.mn-calc__actions { display: grid; gap: 12px; padding-block-start: 4px; }
.mn-calc__cta { inline-size: 100%; }
.mn-calc__links { display: flex; flex-wrap: wrap; gap: 0 22px; }
.mn-calc__link { min-block-size: var(--wp--custom--target--min); color: var(--wp--preset--color--cyan-300); }
.mn-calc__sister { color: var(--wp--preset--color--on-dark-2); font-size: var(--wp--custom--font-size--meta); line-height: 1.45; }
.mn-calc__fn {
	padding-block-start: 14px;
	border-block-start: 1px solid var(--mn-rule);
	color: var(--wp--preset--color--on-dark-2);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
	text-wrap: pretty;
}
.mn-calc__fn-mark { color: var(--wp--preset--color--cyan-300); font-weight: 700; }
.mn-calc__fn:target { color: var(--wp--preset--color--white); }
.mn-calc__fn [data-mn-v] { color: var(--wp--preset--color--white); font-weight: 600; }
.mn-calc__note-line,
.mn-calc__loss { padding: 10px 12px; border-inline-start: 2px solid var(--wp--preset--color--led-amber); border-radius: var(--wp--custom--radius--xs); background: rgba(232, 161, 58, 0.08); color: var(--wp--preset--color--on-dark); font-size: var(--wp--preset--font-size--small); line-height: 1.5; }

/* Sticky beside the inputs from 960 px, when the screen is tall enough to hold the whole plate (09 §3.9). */
@media (min-width: 960px) and (min-height: 820px) {
	.mn-calc__result { position: sticky; inset-block-start: calc(var(--mn-sticky-top) + 20px); }
}

/* 5. Phone result card ------------------------------------------------------------------------------------------ */
/* Under 960 px the result sits below the inputs; this card keeps the figure in view above the phone action bar
   while the inputs are on screen (it sticks inside the inputs card), and takes the visitor to the full result. */

.mn-calc__mini {
	position: sticky;
	inset-block-end: calc(var(--mn-bar-h) + 10px);
	z-index: var(--mn-z-raised);
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "label go" "fig go";
	align-items: center;
	gap: 2px 12px;
	margin-inline: -6px;
	padding: 10px 14px;
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--ink-1);
	box-shadow: var(--wp--preset--shadow--pop), inset 0 -2px 0 var(--wp--preset--color--cyan);
	color: var(--wp--preset--color--white);
	text-decoration: none;
}
.mn-calc__mini-label { grid-area: label; color: var(--wp--preset--color--on-dark-2); font-size: 0.6875rem; font-weight: 600; letter-spacing: var(--wp--custom--tracking--spec); text-transform: uppercase; }
.mn-calc__mini-fig { grid-area: fig; font-family: var(--wp--preset--font-family--display); font-size: 1.375rem; font-weight: 800; letter-spacing: var(--wp--custom--tracking--title); }
.mn-calc__mini-fig > span:last-child { color: var(--wp--preset--color--on-dark-2); font-family: var(--wp--preset--font-family--body); font-size: var(--wp--custom--font-size--ui); font-weight: 600; letter-spacing: 0; }
.mn-calc__mini-go { grid-area: go; display: inline-flex; align-items: center; gap: 6px; min-block-size: var(--wp--custom--target--min); color: var(--wp--preset--color--cyan-300); font-size: var(--wp--custom--font-size--meta); font-weight: 600; }
.mn-calc__mini-go .mn-icon { inline-size: 1rem; block-size: 1rem; }
/* It appears once the visitor changes a figure (the script adds .has-input), so it never covers a field on arrival. */
.mn-calc:not(.has-input) .mn-calc__mini { display: none; }
@media (min-width: 960px) { .mn-calc__mini { display: none !important; } }
@media (max-width: 959px) { html:has(.mn-calc.has-input) { scroll-padding-bottom: calc(var(--mn-bar-h) + 96px); } }

/* 6. Rent vs lease vs buy, stock, revenue vs cost, caution ------------------------------------------------------ */

.mn-calc-opts { display: grid; gap: 8px; }
.mn-calc-opt {
	display: grid;
	gap: 8px;
	padding: 14px 16px;
	border: 1px solid var(--mn-rule-2);
	border-radius: var(--wp--custom--radius--md);
	background: rgba(255, 255, 255, 0.03);
}
.mn-calc-opt:has(.mn-calc-opt__best:not([hidden])) { border-color: rgba(var(--wp--custom--cyan-rgb), 0.6); background: rgba(var(--wp--custom--cyan-rgb), 0.07); }
.mn-calc-opt__head { display: flex; align-items: center; gap: 10px; }
.mn-calc-opt__icon { flex: none; inline-size: 1.25rem; block-size: 1.25rem; color: var(--wp--preset--color--cyan-300); }
.mn-calc-opt__name { margin: 0; color: var(--wp--preset--color--white); font-size: var(--wp--preset--font-size--large); line-height: 1.2; }
.mn-calc-opt__best { margin-inline-start: auto; border-color: rgba(var(--wp--custom--cyan-rgb), 0.5); background: rgba(var(--wp--custom--cyan-rgb), 0.16); }
.mn-calc-opt__figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin: 0; }
@container mn-calc-out (min-width: 26rem) { .mn-calc-opt__figs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mn-calc-opt__figs dt { color: var(--wp--preset--color--on-dark-2); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.mn-calc-opt__figs dd { margin: 2px 0 0; color: var(--wp--preset--color--white); font-size: var(--wp--custom--font-size--ui); font-weight: 700; font-variant-numeric: tabular-nums; }
.mn-calc-opt__line { color: var(--wp--preset--color--on-dark-2); font-size: var(--wp--custom--font-size--meta); line-height: 1.45; }
.mn-calc-opt__line:empty { display: none; }
.mn-calc-opt__empty { color: var(--wp--preset--color--on-dark-2); font-size: var(--wp--preset--font-size--small); line-height: 1.45; }
.mn-calc__be { padding-inline-start: 12px; border-inline-start: 2px solid var(--wp--preset--color--cyan); color: var(--wp--preset--color--on-dark); font-size: var(--wp--preset--font-size--small); line-height: 1.5; }

.mn-calc-stock { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid var(--mn-rule-2); border-radius: var(--wp--custom--radius--md); background: rgba(255, 255, 255, 0.03); }
.mn-calc-stock__title { color: var(--wp--preset--color--white); font-weight: 600; }
.mn-calc-stock__list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.mn-calc-stock__link { display: flex; align-items: center; gap: 12px; min-block-size: var(--wp--custom--target--min); color: var(--wp--preset--color--on-dark); text-decoration: none; }
.mn-calc-stock__link:hover { color: var(--wp--preset--color--white); }
.mn-calc-stock__link .mn-icon { inline-size: 1rem; block-size: 1rem; margin-inline-start: auto; color: var(--wp--preset--color--cyan-300); }
.mn-calc-stock__n { display: grid; place-items: center; min-inline-size: 2.25rem; block-size: 2rem; padding-inline: 6px; border-radius: var(--wp--custom--radius--sm); background: rgba(var(--wp--custom--cyan-rgb), 0.16); color: var(--wp--preset--color--cyan-300); font-weight: 700; }
.mn-calc-stock__none,
.mn-calc-stock__cfp { color: var(--wp--preset--color--on-dark-2); font-size: var(--wp--preset--font-size--small); line-height: 1.5; }
.mn-calc-stock__none .mn-calc__link { display: inline-flex; min-block-size: var(--wp--custom--target--min); }

.mn-calc-vs { display: grid; gap: 8px; }
.mn-calc-vs__row { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.mn-calc-vs__label { color: var(--wp--preset--color--on-dark-2); font-size: var(--wp--custom--font-size--meta); font-weight: 600; }
.mn-calc-vs__track { display: block; block-size: 10px; border-radius: var(--wp--custom--radius--pill); background: var(--mn-calc-track); overflow: hidden; }
.mn-calc-vs__bar { display: block; block-size: 100%; inline-size: var(--w, 0%); border-radius: inherit; transition: inline-size var(--wp--custom--motion--ui) var(--wp--custom--motion--ease-out); }
.mn-calc-vs__bar--rev { background: var(--wp--preset--color--cyan); }
.mn-calc-vs__bar--cost { background: var(--wp--preset--color--on-dark-2); }
.mn-calc-vs__value { color: var(--wp--preset--color--white); font-size: var(--wp--custom--font-size--ui); font-weight: 700; }

.mn-calc__caution { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid rgba(232, 161, 58, 0.45); border-radius: var(--wp--custom--radius--md); background: rgba(232, 161, 58, 0.08); color: var(--wp--preset--color--on-dark); font-size: var(--wp--preset--font-size--small); line-height: 1.5; }
.mn-calc__caution .mn-icon { flex: none; inline-size: 1.25rem; block-size: 1.25rem; color: var(--wp--preset--color--led-amber); }