/* ==========================================================================
   Calculators — form on the left, result panel on the right.
   ========================================================================== */

.lmt-calc {
	display: grid;
	gap: var(--lmt-space-6);
	align-items: start;
	margin-top: var(--lmt-space-6);
}

@media (min-width: 900px) {
	.lmt-calc { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--lmt-space-7); }
}

/* ---- Form ---- */

.lmt-calc__form { display: flex; flex-direction: column; gap: var(--lmt-space-5); min-width: 0; }

.lmt-calc__grid {
	display: grid;
	gap: 20px 24px;
	grid-template-columns: minmax(0, 1fr);
}

/* Age is one number, height is two with units, weight is one. Sized to that
   rather than to equal thirds, which left height cramped beside a wide age. */
@media (min-width: 620px) {
	.lmt-calc__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr) minmax(0, 1fr); }
}

.lmt-calc__field { display: flex; flex-direction: column; gap: 8px; min-width: 0; border: 0; padding: 0; margin: 0; }
.lmt-calc__field--wide { grid-column: 1 / -1; }

.lmt-calc__label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--lmt-grey-700);
	padding: 0;
}

.lmt-calc__optional { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--lmt-grey-500); }
.lmt-calc__help { font-size: 13px; line-height: 1.45; color: var(--lmt-ink-muted); }

/* A number and its unit sit on one line. */
.lmt-calc__pair { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lmt-calc__pair .lmt-input { min-width: 0; flex: 1 1 4.5rem; }
.lmt-calc__unit { flex: none; font-size: 14px; font-weight: 600; color: var(--lmt-ink-muted); }
.lmt-calc__select { flex: none; width: auto; }

.lmt-calc__choices { display: flex; flex-wrap: wrap; gap: 8px; }

/* The radio itself stays focusable but out of sight; the label is the control. */
.lmt-calc__radio {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.lmt-calc__radio:checked + .lmt-chip {
	background: var(--lmt-black);
	border-color: var(--lmt-black);
	color: var(--lmt-white);
}
.lmt-calc__radio:focus-visible + .lmt-chip,
.lmt-calc__radio:focus-visible + .lmt-calc__option {
	outline: 2px solid var(--lmt-red);
	outline-offset: 2px;
}

.lmt-calc__options { display: grid; gap: 8px; }


.lmt-calc__option {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 16px;
	border: 1px solid var(--lmt-rule);
	background: var(--lmt-white);
	cursor: pointer;
	transition: border-color var(--lmt-transition), background-color var(--lmt-transition);
}
.lmt-calc__option:hover { border-color: var(--lmt-black); }

.lmt-calc__radio:checked + .lmt-calc__option {
	border-color: var(--lmt-black);
	background: var(--lmt-black);
	color: var(--lmt-white);
}

.lmt-calc__option-name { font-size: 14px; font-weight: 700; }
.lmt-calc__option-note { font-size: 12px; color: var(--lmt-ink-muted); }
.lmt-calc__radio:checked + .lmt-calc__option .lmt-calc__option-note { color: #bbb; }

/* ---- Result ---- */

.lmt-calc__out { position: sticky; top: calc(var(--lmt-header-h) + var(--lmt-admin-bar) + 20px); }

.lmt-calc__result {
	background: var(--lmt-black);
	color: var(--lmt-white);
	padding: var(--lmt-space-6);
}

.lmt-calc__headline { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }

.lmt-calc__value {
	font-family: var(--lmt-font-display);
	font-weight: 400;
	font-size: clamp(3rem, 2rem + 4vw, 4.5rem);
	line-height: 1;
}
.lmt-calc__result.is-warning .lmt-calc__value { color: var(--lmt-red); }

/* Rolling digits are dimmed and set in tabular figures so the panel does not
   twitch as the numbers change width. */
.lmt-calc__result.is-rolling .lmt-calc__value,
.lmt-calc__result.is-rolling .lmt-calc__row dd { color: #6a6a6a; }

.lmt-calc__value,
.lmt-calc__row dd {
	font-variant-numeric: tabular-nums;
}

.lmt-calc__unit-label { font-size: var(--lmt-size-base); color: #999; }

.lmt-calc__caption {
	margin-top: 10px;
	font-size: var(--lmt-size-sm);
	line-height: 1.5;
	color: #bbb;
}

.lmt-calc__rows { margin: var(--lmt-space-5) 0 0; }

.lmt-calc__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--lmt-space-3);
	padding: 12px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
	font-size: 14px;
}
.lmt-calc__row:last-child { border-bottom: 0; }
.lmt-calc__row dt { color: #999; }
.lmt-calc__row dd { margin: 0; font-weight: 700; text-align: right; }

.lmt-calc__note { margin-top: var(--lmt-space-4); font-size: 13px; line-height: 1.5; color: var(--lmt-ink-muted); }