/**
 * Calculators, the part below the first screen (docs/13-TOOLS.md §7.8, §9; 09 §3.9): the chart and table under each
 * calculator, the /tools/ hub's cards, and the print styles. Loaded without blocking the first paint (inc/calc.php,
 * media="print" switched to "all" once loaded; a <noscript> copy without JavaScript), so a tool page's render-blocking
 * CSS stays small. calc.css holds the rest.
 *
 *  1. Detail: charts, legends, tables     2. Tools grid (the /tools/ hub)     3. Print
 */

/* 1. Detail: charts, legends, tables ---------------------------------------------------------------------------- */

.mn-calc-detail {
	display: grid;
	gap: 22px;
	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-detail__head { display: grid; gap: 6px; max-inline-size: 46rem; }
.mn-calc-detail__title { margin: 0; font-size: var(--wp--preset--font-size--xx-large); line-height: var(--wp--custom--line-height--heading); letter-spacing: var(--wp--custom--tracking--heading); }
.mn-calc-detail__lede { color: var(--mn-text); line-height: var(--wp--custom--line-height--lede); }
.mn-calc-detail__grid { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) { .mn-calc-detail__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px; } }

.mn-calc-chart { display: grid; gap: 12px; margin: 0; min-inline-size: 0; }
.mn-calc-chart__plot { position: relative; aspect-ratio: 640 / 260; }
/* An empty chart (no figures yet): the gridlines stay, a note sits over them. */
.mn-calc-chart__empty {
	position: absolute;
	inset: 0 0 12% 9%;
	display: none;
	place-content: center;
	justify-items: center;
	gap: 8px;
	color: var(--mn-text-muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-align: center;
}
.mn-calc-chart__empty .mn-icon { inline-size: 1.75rem; block-size: 1.75rem; color: var(--wp--preset--color--cyan-700); }
.mn-calc:is([data-state="need"], [data-state="empty"]) .mn-calc-chart__empty { display: grid; }
.mn-calc-chart__svg,
.mn-calc-chart__svg > svg { display: block; inline-size: 100%; block-size: 100%; }
.mn-chart { overflow: visible; }
.mn-chart__grid { stroke: var(--wp--preset--color--line); stroke-width: 1; }
.mn-chart__base { stroke: var(--wp--preset--color--field); stroke-width: 1.5; }
.mn-chart__axis,
.mn-chart__label { fill: var(--wp--preset--color--text-3); font-family: var(--wp--preset--font-family--body); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.mn-chart__label { fill: var(--wp--preset--color--text-2); font-weight: 600; }
.mn-chart__label.is-on { fill: var(--wp--preset--color--text); font-weight: 700; }
.mn-chart__bar--a { fill: var(--wp--preset--color--text); }
.mn-chart__bar--b { fill: rgba(var(--wp--custom--cyan-rgb), 0.3); }
.mn-calc--lease-payment .mn-chart__bar--a,
.mn-calc--affordability .mn-chart__bar--a { fill: var(--wp--preset--color--line-strong); }
.mn-calc--lease-payment .mn-chart__bar--a.is-on,
.mn-calc--affordability .mn-chart__bar--a.is-on { fill: var(--wp--preset--color--cyan-700); }
/* The TCO waterfall keeps the plate's meaning: financing in cyan, fuel the strong neutral, running the field grey. */
.mn-calc--tco .mn-chart__bar--a { fill: var(--wp--preset--color--cyan-700); }
.mn-calc--tco .mn-chart__bar--b { fill: var(--wp--preset--color--text); }
.mn-calc--tco .mn-chart__bar--c { fill: var(--wp--preset--color--field); }
.mn-calc--tco .mn-chart__bar--d { fill: rgba(var(--wp--custom--cyan-rgb), 0.22); stroke: var(--wp--preset--color--cyan-700); stroke-width: 1.5; stroke-dasharray: 4 3; }
.mn-calc--tco .mn-chart__bar--e { fill: var(--wp--preset--color--cyan); }
.mn-calc--cca .mn-chart__bar--a { fill: var(--wp--preset--color--cyan-700); }
.mn-calc--cca .mn-chart__bar--b { fill: var(--wp--preset--color--line-strong); }
.mn-chart__line { fill: none; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.mn-chart__line--rent { stroke: var(--wp--preset--color--text); }
.mn-chart__line--lease { stroke: var(--wp--preset--color--field); stroke-dasharray: 7 5; }
.mn-chart__line--buy { stroke: var(--wp--preset--color--cyan-700); }
.mn-chart__mark { fill: var(--wp--preset--color--white); stroke: var(--wp--preset--color--cyan-700); stroke-width: 3; }
.mn-chart__mark--lease { stroke: var(--wp--preset--color--field); }
@media (max-width: 599px) {
	.mn-chart__axis,
	.mn-chart__label { font-size: 20px; }
	.mn-chart__label.is-minor { display: none; }
}

/* The legends on light: the same swatches as the chart. */
.mn-calc-detail .mn-calc-legend__key { color: var(--mn-text); }
.mn-calc-detail .mn-calc-legend__key--a { --mn-key: var(--wp--preset--color--text); }
.mn-calc-detail .mn-calc-legend__key--b { --mn-key: rgba(var(--wp--custom--cyan-rgb), 0.3); }
.mn-calc-detail .mn-calc-legend__key--on { --mn-key: var(--wp--preset--color--cyan-700); }
.mn-calc--lease-payment .mn-calc-detail .mn-calc-legend__key--a,
.mn-calc--affordability .mn-calc-detail .mn-calc-legend__key--a { --mn-key: var(--wp--preset--color--line-strong); }
.mn-calc--tco .mn-calc-detail .mn-calc-legend__key--a { --mn-key: var(--wp--preset--color--cyan-700); }
.mn-calc--tco .mn-calc-detail .mn-calc-legend__key--b { --mn-key: var(--wp--preset--color--text); }
.mn-calc--tco .mn-calc-detail .mn-calc-legend__key--c { --mn-key: var(--wp--preset--color--field); }
.mn-calc--tco .mn-calc-detail .mn-calc-legend__key--d { --mn-key: rgba(var(--wp--custom--cyan-rgb), 0.22); }
.mn-calc--tco .mn-calc-detail .mn-calc-legend__key--e { --mn-key: var(--wp--preset--color--cyan); }
.mn-calc--cca .mn-calc-detail .mn-calc-legend__key--a { --mn-key: var(--wp--preset--color--cyan-700); }
.mn-calc--cca .mn-calc-detail .mn-calc-legend__key--b { --mn-key: var(--wp--preset--color--line-strong); }
.mn-calc-legend__key--rent { --mn-key: var(--wp--preset--color--text); }
.mn-calc-legend__key--lease { --mn-key: var(--wp--preset--color--field); }
.mn-calc-legend__key--buy { --mn-key: var(--wp--preset--color--cyan-700); }

/* Tables: tabular figures right-aligned; a narrow screen scrolls the table inside its labelled region. */
.mn-calc-table { overflow-x: auto; min-inline-size: 0; border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--md); }
.mn-calc-table:focus-visible { outline: var(--wp--custom--focus--width) solid var(--mn-focus); outline-offset: 2px; }
.mn-calc-table table { inline-size: 100%; border-collapse: collapse; font-size: var(--wp--preset--font-size--small); font-variant-numeric: tabular-nums; }
.mn-calc-table :is(th, td) { padding: 10px 12px; border-block-end: 1px solid var(--wp--preset--color--line); text-align: end; white-space: nowrap; }
.mn-calc-table thead th { background: var(--wp--preset--color--paper); color: var(--mn-text-strong); font-size: 0.6875rem; font-weight: 600; line-height: 1.3; letter-spacing: 0.04em; text-transform: uppercase; white-space: normal; vertical-align: bottom; }
.mn-calc-table :is(th[scope="row"], thead th:first-child) { text-align: start; }
.mn-calc-table tbody th { color: var(--mn-text-strong); font-weight: 600; white-space: normal; min-inline-size: 6.5rem; }
.mn-calc-table td { color: var(--mn-text); }
.mn-calc-table tfoot :is(th, td) { border-block-end: 0; background: var(--wp--preset--color--paper); color: var(--mn-text-strong); font-weight: 700; }
.mn-calc-table tbody tr:last-child :is(th, td) { border-block-end: 0; }
.mn-calc-table tbody + tfoot :is(th, td) { border-block-start: 1px solid var(--wp--preset--color--line-strong); }
.mn-calc-table__empty { display: none; padding: 14px; color: var(--mn-text-muted); font-size: var(--wp--preset--font-size--small); }
.mn-calc:is([data-state="need"], [data-state="empty"]) .mn-calc-table__empty { display: block; }
.mn-calc:is([data-state="need"], [data-state="empty"]) .mn-calc-table tfoot { display: none; }
.mn-calc-swatch { display: inline-block; inline-size: 10px; block-size: 10px; margin-inline-end: 10px; border-radius: 2px; vertical-align: 0.05em; background: var(--mn-key); }

/* Cost per km: the breakdown as one tall bar over the table. Six series: ink, cyan-700, field, the cyan tint, the
   strong line and paper with an outline, so neighbours always differ. */
.mn-calc-breakdown { display: grid; gap: 18px; }
.mn-calc-stack--tall { block-size: 22px; border-radius: var(--wp--custom--radius--sm); background: var(--wp--preset--color--paper); }
.mn-calc-stack--tall .mn-calc-stack__seg + .mn-calc-stack__seg { box-shadow: inset 2px 0 0 var(--wp--preset--color--white); }
.mn-calc-stack__seg--fuel,
.mn-calc-swatch--fuel { --mn-key: var(--wp--preset--color--text); background: var(--wp--preset--color--text); }
.mn-calc-stack__seg--maintenance,
.mn-calc-swatch--maintenance { --mn-key: var(--wp--preset--color--cyan-700); background: var(--wp--preset--color--cyan-700); }
.mn-calc-stack__seg--insurance,
.mn-calc-swatch--insurance { --mn-key: var(--wp--preset--color--field); background: var(--wp--preset--color--field); }
.mn-calc-stack__seg--permits,
.mn-calc-swatch--permits { --mn-key: rgba(var(--wp--custom--cyan-rgb), 0.45); background: rgba(var(--wp--custom--cyan-rgb), 0.45); }
.mn-calc-stack__seg--financing,
.mn-calc-swatch--financing { --mn-key: var(--wp--preset--color--cyan); background: var(--wp--preset--color--cyan); }
.mn-calc-stack__seg--other,
.mn-calc-swatch--other { --mn-key: var(--wp--preset--color--line-strong); background: var(--wp--preset--color--line-strong); }

/* Lease: the four end-of-term options as a definition list beside the chart. */
.mn-calc-defs { display: grid; gap: 0; margin: 0; border-block-start: 1px solid var(--wp--preset--color--line); }
.mn-calc-defs__item { display: grid; gap: 4px; padding: 14px 0; border-block-end: 1px solid var(--wp--preset--color--line); }
.mn-calc-defs dt { color: var(--mn-text-strong); font-weight: 700; }
.mn-calc-defs dd { margin: 0; color: var(--mn-text); font-size: var(--wp--preset--font-size--small); line-height: 1.5; }

/* 2. Tools grid (the /tools/ hub) ------------------------------------------------------------------------------- */
/* Each card leads with the question the tool answers, over a small drawing of the tool's own chart. */

.mn-tgroups { display: grid; gap: clamp(36px, 4vw, 52px); }
.mn-tgroup { display: grid; gap: 18px; }
.mn-tgroup__title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	color: var(--mn-eyebrow);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
}
.mn-tgroup__title::before { content: ""; inline-size: 22px; block-size: 1px; background: var(--mn-eyebrow-rule); }
.mn-tcards { display: grid; gap: 18px; margin: 0; padding: 0; grid-template-columns: minmax(0, 1fr); list-style: none; }
@media (min-width: 640px) { .mn-tcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .mn-tcards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Two across (tablets): a group's odd last card runs the full row, its drawing beside the words. */
@media (min-width: 640px) and (max-width: 1023px) {
	.mn-tcard:last-child:nth-child(odd) { grid-column: 1 / -1; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) auto; grid-template-areas: "art body go"; padding: 0; }
	.mn-tcard:last-child:nth-child(odd) .mn-tcard__art { aspect-ratio: auto; block-size: 100%; min-block-size: 11rem; }
	.mn-tcard:last-child:nth-child(odd) .mn-tcard__body { align-self: center; padding-block: 22px; }
	.mn-tcard:last-child:nth-child(odd) .mn-tcard__go { align-self: center; }
}
.mn-tcard {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "art art" "body go";
	grid-template-rows: auto 1fr;
	gap: 18px 14px;
	min-inline-size: 0;
	padding: 0 0 22px;
	overflow: hidden;
	border: 1px solid var(--mn-rule);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--mn-surface-raised);
	box-shadow: var(--mn-shadow-card);
	transition: border-color var(--wp--custom--motion--ui) var(--wp--custom--motion--ease), box-shadow var(--wp--custom--motion--ui) var(--wp--custom--motion--ease), transform var(--wp--custom--motion--ui) var(--wp--custom--motion--ease);
}
.mn-tcard__art {
	grid-area: art;
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 7;
	padding: 18px 24px;
	background:
		radial-gradient(90% 120% at 100% 0%, rgba(var(--wp--custom--cyan-rgb), 0.18), transparent 60%),
		var(--wp--preset--gradient--stage, var(--wp--preset--color--ink-1));
	background-color: var(--wp--preset--color--ink-1);
	color: var(--wp--preset--color--on-dark-2);
}
.mn-tcard__art::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
	background-size: 22px 22px;
	-webkit-mask-image: linear-gradient(160deg, #000, transparent 75%);
	mask-image: linear-gradient(160deg, #000, transparent 75%);
}
.mn-tcard__body { grid-area: body; display: grid; gap: 6px; align-content: start; min-inline-size: 0; padding-inline-start: 22px; }
.mn-tcard__body > * { margin: 0; }
.mn-tcard__q { color: var(--mn-eyebrow); font-size: var(--wp--custom--font-size--meta); font-weight: 600; line-height: 1.35; }
.mn-tcard__title { color: var(--mn-text-strong); 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-tcard__line { color: var(--mn-text); font-size: var(--wp--custom--font-size--ui); line-height: 1.5; }
.mn-tcard__go { grid-area: go; align-self: end; margin-inline-end: 22px; }
.mn-tcard .mn-lcard__draft { position: absolute; inset-block-start: 12px; inset-inline-end: 12px; z-index: var(--mn-z-raised); }
.mn-tcard.mn-card-host:is(:hover, :focus-within) { border-color: rgba(var(--wp--custom--cyan-rgb), 0.55); box-shadow: var(--wp--preset--shadow--lift); }
@media (hover: hover) and (pointer: fine) {
	.mn-tcard.mn-card-host:hover { transform: translateY(-4px); }
	.mn-tcard.mn-card-host:hover .mn-tart { transform: scale(1.04); }
}
:is(.mn-band--ink) .mn-tcard { --mn-shadow-card: none; }

/* 3. Print -------------------------------------------------------------------------------------------------------- */
/* The checklist (and any calculator) prints on its own: the chrome, the hero's textures and the actions go. */

@media print {
	.mn-utility, .mn-header, .mn-chrome, .mn-action-bar, .mn-footer, .mn-closing, .mn-draft-note, .mn-page-hero, .mn-flow > :not(.mn-calc-band),
	.mn-calc__mini, .mn-calc__reset, .mn-calc__submit, .mn-calc__actions, .mn-check__tools, .mn-check__tabs { display: none !important; }
	.mn-calc-band { padding: 0; background: none; }
	.mn-calc__form { grid-template-columns: minmax(0, 1fr); }
	.mn-calc__inputs, .mn-calc-detail { box-shadow: none; }
	.mn-calc__result { position: static; background: none; box-shadow: none; color: #000; }
	.mn-calc__result :is(*, ::before) { color: #000 !important; background: none !important; }
	.mn-calc .mn-check__panel[hidden] { display: grid !important; }
	.mn-check__row { break-inside: avoid; }
}