/* ======================================================================
   Mervia Group Tools
   Layout for the calculators. Everything here builds on the theme's tokens
   and its .c-input / .c-select / .c-btn components — the calculators must
   not look like a different website.
   ====================================================================== */

.c-tool {
	display: grid;
	gap: var(--co-space-6);
	align-items: start;
	margin-block: var(--co-space-6);
	padding: var(--co-card-padding);
	background: var(--co-color-surface);
	border: var(--co-border-width) solid var(--co-color-border);
	border-radius: var(--co-radius-md);
}

/* The answer beside the inputs, not below them. The whole value of the tool
   is watching the number move while you change a figure; a result you have
   to scroll to is a result you compare from memory. */
@media (min-width: 56em) {
	.c-tool {
		grid-template-columns: minmax(0, 1.15fr) minmax(17rem, 0.85fr);
		gap: var(--co-space-7);
	}
}

.c-tool__heading {
	grid-column: 1 / -1;
	margin: 0;
	font-size: var(--co-text-xl);
}

.c-tool__legend {
	margin: 0 0 var(--co-space-3);
	font-size: var(--co-text-xs);
	font-weight: var(--co-weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--co-tracking-wide);
	color: var(--co-color-text-muted);
}

.c-tool__legend:not(:first-child) {
	margin-block-start: var(--co-space-6);
	padding-block-start: var(--co-space-5);
	border-block-start: var(--co-border-width) solid var(--co-color-rule);
}

.c-tool__fields {
	display: grid;
	gap: var(--co-space-4) var(--co-space-5);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.c-tool__field--full {
	grid-column: 1 / -1;
}

/* One column below 30em. Two 140px-wide number fields side by side on a
   phone leave no room for the unit suffix, which is the part that tells you
   whether it wants millimetres or metres. */
@media (max-width: 30em) {
	.c-tool__fields {
		grid-template-columns: minmax(0, 1fr);
	}
}

.c-tool__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--co-space-3);
	margin-block-start: var(--co-space-5);
}

/* ----------------------------------------------------------------------
   Results
   ---------------------------------------------------------------------- */

.c-tool__output {
	position: sticky;
	top: var(--co-space-6);
	align-self: start;
}

@media (max-width: 55.99em) {
	.c-tool__output {
		position: static;
	}
}

.c-tool__results {
	display: grid;
	gap: var(--co-space-1);
	padding: var(--co-space-5);
	background: var(--co-color-surface-sunken);
	border-radius: var(--co-radius-md);
}

.c-result {
	display: grid;
	/* Both tracks may shrink below their content. Without the minmax on the
	   value track a long result widens the whole page instead of wrapping. */
	grid-template-columns: minmax(0, 1fr) minmax(0, auto);
	align-items: baseline;
	gap: var(--co-space-4);
	padding-block: var(--co-space-3);
	border-block-end: var(--co-border-width) solid var(--co-color-rule);
}

.c-result:last-child {
	border-block-end: 0;
}

.c-result__label {
	font-size: var(--co-text-sm);
	color: var(--co-color-text-muted);
}

.c-result__value {
	font-size: var(--co-text-lg);
	font-weight: var(--co-weight-semibold);
	font-variant-numeric: tabular-nums;
	text-align: end;
}

/* A figure and its unit are adjacent with no whitespace between them, so they
   cannot break apart on their own; nothing here needs white-space: nowrap, and
   setting it made every prose result push the page sideways. */

/* Prose results stack: a sentence right-aligned in a narrow column beside its
   own label is unreadable at any width. */
.c-result--text {
	grid-template-columns: minmax(0, 1fr);
	gap: var(--co-space-1);
}

.c-result--text .c-result__value {
	font-size: var(--co-text-sm);
	font-weight: var(--co-weight-regular);
	line-height: var(--co-leading-snug);
	text-align: start;
}

/* Tabular figures matter more here than anywhere else on the site: these
   numbers change under the reader's eyes, and proportional digits make the
   value jump sideways on every keystroke. */

.c-result__unit {
	margin-inline-start: 0.35em;
	font-size: var(--co-text-sm);
	font-weight: var(--co-weight-regular);
	color: var(--co-color-text-muted);
}

.c-result__hint {
	grid-column: 1 / -1;
	font-size: var(--co-text-xs);
	color: var(--co-color-text-subtle);
}

.c-result--primary {
	padding-block: var(--co-space-4);
}

.c-result--primary .c-result__label {
	color: var(--co-color-text);
	font-weight: var(--co-weight-medium);
}

.c-result--primary .c-result__value {
	font-size: var(--co-text-2xl);
	color: var(--co-color-action);
}

/* ----------------------------------------------------------------------
   Messages, notes, call to action
   ---------------------------------------------------------------------- */

.c-tool__message {
	margin-block-start: var(--co-space-4);
	padding: var(--co-space-3) var(--co-space-4);
	font-size: var(--co-text-sm);
	line-height: var(--co-leading-snug);
	border-radius: var(--co-radius-sm);
	border-inline-start: 3px solid var(--co-color-border);
	background: var(--co-color-surface-sunken);
}

.c-tool__message--note {
	border-inline-start-color: var(--co-color-action);
}

.c-tool__message--warning {
	border-inline-start-color: var(--co-color-danger);
	background: var(--co-color-danger-bg);
	color: var(--co-color-danger);
}

.c-tool__message--good {
	border-inline-start-color: var(--co-color-success);
	background: var(--co-color-success-bg);
	color: var(--co-color-success);
}

.c-tool__note,
.c-tool__noscript {
	margin-block-start: var(--co-space-4);
	font-size: var(--co-text-xs);
	line-height: var(--co-leading-normal);
	color: var(--co-color-text-subtle);
}

.c-tool__cta {
	margin-block-start: var(--co-space-5);
}

/* ----------------------------------------------------------------------
   Segmented control
   Used where two scales or two modes must never be confused — the micron
   and gauge converter above all, where picking the wrong one produces a
   plausible number that is wrong by a factor of sixteen.
   ---------------------------------------------------------------------- */

.c-segment {
	display: inline-flex;
	padding: 3px;
	background: var(--co-color-surface-sunken);
	border: var(--co-border-width) solid var(--co-color-border);
	border-radius: var(--co-radius-sm);
}

.c-segment__option input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.c-segment__option span {
	display: block;
	padding: var(--co-space-2) var(--co-space-4);
	font-size: var(--co-text-sm);
	border-radius: calc(var(--co-radius-sm) - 2px);
	cursor: pointer;
}

.c-segment__option input:checked + span {
	background: var(--co-color-surface);
	font-weight: var(--co-weight-semibold);
	box-shadow: var(--co-shadow-sm);
}

/* The focus ring has to come from the hidden input, or a keyboard user
   tabbing through a segmented control gets no indication at all. */
.c-segment__option input:focus-visible + span {
	outline: none;
	box-shadow: var(--co-focus-ring);
}

/* ----------------------------------------------------------------------
   Print
   Somebody will print the answer and take it into a meeting. The inputs
   have to come with it, or the page is a number with no question.
   ---------------------------------------------------------------------- */

@media print {
	.c-tool {
		display: block;
		border: 0;
		padding: 0;
	}

	.c-tool__actions,
	.c-tool__cta {
		display: none;
	}

	.c-tool__output {
		position: static;
		margin-block-start: var(--co-space-5);
		break-inside: avoid;
	}

	.c-tool__results {
		border: 1px solid #999;
	}
}

/* ----------------------------------------------------------------------
   Report request
   Deliberately quiet, and deliberately below the answer. It is an offer,
   not a toll gate — the calculation above it is complete without this.
   ---------------------------------------------------------------------- */

.c-toolreport {
	grid-column: 1 / -1;
	margin-block-start: var(--co-space-6);
	padding-block-start: var(--co-space-5);
	border-block-start: var(--co-border-width) solid var(--co-color-rule);
}

.c-toolreport__lead {
	max-width: var(--co-measure);
	margin: 0 0 var(--co-space-4);
	font-size: var(--co-text-sm);
	line-height: var(--co-leading-normal);
	color: var(--co-color-text-muted);
}

.c-toolreport__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--co-space-3);
}

.c-toolreport__row .c-field {
	flex: 1 1 16rem;
	margin: 0;
}

.c-toolreport .c-check {
	margin-block-start: var(--co-space-4);
}

.c-toolreport .c-notice {
	margin-block-end: var(--co-space-4);
}

/* ----------------------------------------------------------------------
   Hub
   The cards are the theme's own .c-card; only the spacing around the grid
   belongs to this plugin.
   ---------------------------------------------------------------------- */

.c-toolgrid {
	margin-block: var(--co-space-6);
}

@media print {
	.c-toolreport {
		display: none;
	}
}