/* MyEstateAngel calculators.
   Sizing follows the container, not the viewport: these sit inside the article column, which
   is narrower than the window and changes width on its own. */

.mea-calc {
	container-type: inline-size;
	margin-block: 32px;
	font-size: 16px;
	line-height: 1.55;
	color: #1F2933;
}

.mea-calc-group {
	border: 1px solid #E4EBEF;
	border-radius: 12px;
	padding: 18px 20px 20px;
	margin: 0 0 16px;
	background: #fff;
}

.mea-calc-group legend {
	font-weight: 700;
	font-size: 18px;
	padding-inline: 8px;
	margin-inline-start: -8px;
}

.mea-calc-hint {
	margin: 2px 0 16px;
	font-size: 14px;
	color: #52616F;
}

.mea-calc-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 6px;
	padding-block: 10px;
	border-block-end: 1px solid #F0F4F6;
}

.mea-calc-row:last-of-type { border-block-end: 0 }

.mea-calc-rowname,
.mea-calc-rowname-input {
	font-size: 15px;
	font-weight: 600;
	align-self: center;
}

.mea-calc-rowname-input {
	border: 1px solid #84939F;
	border-radius: 8px;
	padding: 9px 12px;
	font-weight: 400;
	min-width: 0;
}

.mea-calc-field {
	display: flex;
	align-items: center;
	gap: 6px;
	border: 1px solid #84939F;
	border-radius: 8px;
	padding-inline-start: 12px;
	background: #fff;
	min-width: 0;
}

.mea-calc-field:focus-within {
	border-color: #127A75;
	box-shadow: 0 0 0 2px rgba(18, 122, 117, 0.2);
}

.mea-calc-cur { color: #52616F; font-size: 15px }

.mea-calc-field input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: none;
	padding: 9px 12px 9px 0;
	font: inherit;
	font-size: 15px;
	color: inherit;
}

.mea-calc-field input:focus { outline: none }

.mea-calc-row select {
	border: 1px solid #84939F;
	border-radius: 8px;
	padding: 9px 12px;
	font: inherit;
	font-size: 15px;
	background: #fff;
	color: inherit;
	min-width: 0;
	max-width: 100%;
	min-block-size: 52px;
}

.mea-calc .mea-calc-remove {
	justify-self: start;
	border: 1px solid #84939F;
	background: #fff;
	color: #52616F;
	border-radius: 8px;
	inline-size: 44px;
	block-size: 44px;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.mea-calc .mea-calc-remove:hover { border-color: #B3261E; color: #B3261E }

.mea-calc .mea-calc-add {
	margin-block-start: 14px;
	border: 1px dashed #84939F;
	background: #fff;
	color: #127A75;
	border-radius: 8px;
	padding: 9px 16px;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.mea-calc .mea-calc-add:hover { border-color: #127A75; background: #F3F9F8 }

/* Wider container: the row becomes a real row. The tracks differ per group so an empty
   column never opens a gap where nothing sits. */
@container (min-width: 520px) {
	.mea-calc-row {
		grid-template-columns: minmax(0, 1.5fr) minmax(130px, 0.9fr) minmax(0, 1.2fr);
		align-items: center;
		gap: 12px;
	}
	.mea-calc-row[data-group="debts"],
	.mea-calc-row.is-pair,
	.mea-calc:not(.has-probate) .mea-calc-row {
		grid-template-columns: minmax(0, 1.5fr) minmax(130px, 0.9fr);
	}
	.mea-calc-row.is-custom {
		grid-template-columns: minmax(0, 1.5fr) minmax(130px, 0.9fr) minmax(0, 1.2fr) auto;
	}
	.mea-calc-row.is-custom[data-group="debts"],
	.mea-calc:not(.has-probate) .mea-calc-row.is-custom {
		grid-template-columns: minmax(0, 1.5fr) minmax(130px, 0.9fr) auto;
	}
}

/* ------------------------------------------------------------------- the result */

.mea-calc-results {
	background: #EFF6F5;
	border: 1px solid #DCEAE8;
	border-radius: 12px;
	padding: 22px 24px;
}

.mea-calc-reslabel {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #0F5F5B;
}

.mea-calc-big {
	display: block;
	font-size: 38px;
	font-weight: 700;
	line-height: 1.15;
	margin-block: 4px 0;
	color: #12312F;
	font-variant-numeric: tabular-nums;
}

.mea-calc-sub { margin: 6px 0 0; font-size: 14px; color: #3C4A55 }

.mea-calc-splitlabel { margin: 22px 0 0; font-size: 14px; font-weight: 700; color: #0F5F5B }

.mea-calc-bar {
	display: flex;
	block-size: 12px;
	border-radius: 99px;
	overflow: hidden;
	background: #DCE6E4;
	margin-block: 10px 14px;
}

.mea-calc-seg { inline-size: 0; transition: inline-size 0.25s ease }
.mea-calc-seg + .mea-calc-seg { box-shadow: -2px 0 0 0 #EFF6F5 }
.mea-calc-seg.is-out { background: #127A75 }
.mea-calc-seg.is-in { background: #B3261E }
.mea-calc-seg.is-unknown { background: #6B7B8A }

@media (prefers-reduced-motion: reduce) {
	.mea-calc-seg { transition: none }
}

.mea-calc-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px }

.mea-calc-legend li {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	font-size: 15px;
	padding-inline-start: 20px;
}

.mea-calc-legend li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.42em;
	inline-size: 11px;
	block-size: 11px;
	border-radius: 3px;
}

.mea-calc-legend li.is-out::before { background: #127A75 }
.mea-calc-legend li.is-in::before { background: #B3261E }
.mea-calc-legend li.is-unknown::before { background: #6B7B8A }

.mea-calc-key { flex: 1 1 14ch }
.mea-calc-legend output { font-weight: 700; font-variant-numeric: tabular-nums }
.mea-calc-pct { color: #3C4A55; font-size: 14px }

.mea-calc-itemslabel { margin: 20px 0 6px; font-size: 15px; font-weight: 700 }

.mea-calc-items { list-style: none; margin: 0; padding: 0; font-size: 15px }

.mea-calc-items li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 7px 0;
	border-block-end: 1px solid #DCEAE8;
}

.mea-calc-items li:last-child { border-block-end: 0 }
.mea-calc-items b { font-variant-numeric: tabular-nums; white-space: nowrap }
.mea-calc-items .mea-calc-placeholder { color: #3C4A55; justify-content: flex-start }

.mea-calc-note { margin: 18px 0 0; font-size: 14px; color: #3C4A55 }

.mea-calc-cta { margin: 20px 0 0 }

.mea-calc .mea-calc-btn {
	display: inline-block;
	background: #127A75;
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	font-size: 16px;
	padding: 13px 22px;
	border-radius: 8px;
}

.mea-calc .mea-calc-btn:hover,
.mea-calc .mea-calc-btn:focus { background: #0E625E; color: #fff }

/* Editors only, when a calculator is switched off but its shortcode is still in a post. */
.mea-calc-off {
	border: 1px dashed #84939F;
	border-radius: 8px;
	padding: 12px 16px;
	color: #3C4A55;
	font-size: 15px;
}

/* Announced to screen readers, never painted. The panel itself is not a live region:
   marking it live would read the whole result back on every keystroke. */
.mea-calc-sr {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	margin: 0;
}

/* ------------------------------------------------- rows built by mea_calc_field() */

.mea-calc-rowlabel { align-self: center }

.mea-calc-rowhint {
	display: block;
	font-weight: 400;
	font-size: 13px;
	line-height: 1.45;
	color: #52616F;
	margin-block-start: 3px;
}

.mea-calc-suffix {
	padding-inline-end: 12px;
	color: #52616F;
	font-size: 14px;
	white-space: nowrap;
}

.mea-calc-row.is-pair .mea-calc-field input { padding-inline-end: 6px }

/* A native disclosure, so the second person is there with or without JavaScript. */
.mea-calc-details {
	border: 1px solid #E4EBEF;
	border-radius: 12px;
	background: #fff;
	margin: 0 0 16px;
}

.mea-calc-details > summary {
	cursor: pointer;
	padding: 15px 20px;
	font-weight: 700;
	font-size: 16px;
	border-radius: 12px;
}

.mea-calc-details > summary:focus-visible {
	outline: 2px solid #127A75;
	outline-offset: 2px;
}

.mea-calc-details[open] > summary { border-block-end: 1px solid #F0F4F6 }

.mea-calc-group.is-nested {
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 4px 20px 18px;
}

.mea-calc-source {
	margin: 12px 0 0;
	font-size: 13px;
	color: #3C4A55;
}

.mea-calc-source a { color: #0E625E }

/* The one line a couple is actually reading for. */
.mea-calc-items li.is-headline {
	font-weight: 700;
	border-block-end: 0;
	border-block-start: 1px solid #DCEAE8;
	margin-block-start: 4px;
	padding-block-start: 10px;
}

/* ------------------------------------------------------- readiness questions */

.mea-calc-q {
	padding-block: 16px;
	border-block-end: 1px solid #F0F4F6;
}

.mea-calc-q:last-of-type { border-block-end: 0 }

.mea-calc-qtext {
	margin: 0 0 12px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.45;
	display: flex;
	gap: 10px;
	align-items: baseline;
}

.mea-calc-qnum {
	flex: 0 0 auto;
	color: #127A75;
	font-size: 13px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.mea-calc-answers { display: flex; flex-wrap: wrap; gap: 10px }

.mea-calc-ans {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-block-size: 44px;
	padding: 8px 18px;
	border: 1px solid #84939F;
	border-radius: 999px;
	background: #fff;
	font-size: 15px;
	cursor: pointer;
}

.mea-calc-ans:has(input:checked) {
	border-color: #127A75;
	background: #EFF6F5;
	font-weight: 600;
	box-shadow: inset 0 0 0 1px #127A75;
}

.mea-calc-ans:focus-within { outline: 2px solid #127A75; outline-offset: 2px }
.mea-calc-ans.is-na { color: #3C4A55 }

.mea-calc-bandlabel {
	margin: 22px 0 0;
	font-family: "Libre Caslon Text", serif;
	font-size: 22px;
	line-height: 1.25;
	color: #12312F;
}

.mea-calc-bandlabel:empty { margin: 0 }

/* --------------------------------------------------------- digital inventory */

.mea-calc-cat {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-block: 6px;
	border-block-end: 1px solid #F0F4F6;
}

.mea-calc-cat:last-of-type { border-block-end: 0 }

.mea-calc-catbox {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1 1 auto;
	min-inline-size: 0;
	min-block-size: 44px;
	font-size: 15px;
	cursor: pointer;
}

.mea-calc-catbox input {
	inline-size: 20px;
	block-size: 20px;
	flex: 0 0 auto;
	accent-color: #127A75;
}

.mea-calc-catcount { flex: 0 0 auto }

.mea-calc-catcount input {
	inline-size: 68px;
	flex: 0 0 auto;
	min-block-size: 44px;
	padding: 8px 12px;
	border: 1px solid #84939F;
	border-radius: 8px;
	font: inherit;
	font-size: 15px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.mea-calc-catcount input:focus { outline: 2px solid #127A75; outline-offset: 1px }

/* The checkbox is what counts, so an untouched row should read as switched off. */
.mea-calc-cat:not(:has(input[type="checkbox"]:checked)) .mea-calc-catcount { opacity: 0.45 }

.mea-calc-big.is-warn { color: #B3261E }

/* --------------------------------------------------- gap and breakdown lists */

.mea-calc-gaps { list-style: none; margin: 10px 0 0; padding: 0; font-size: 15px }

.mea-calc-gaps li {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	padding: 9px 0;
	border-block-end: 1px solid #DCEAE8;
	line-height: 1.5;
}

.mea-calc-gaps li:last-child { border-block-end: 0 }
.mea-calc-gaps li.is-headline { font-weight: 700; border-block-end: 0; padding-block-end: 2px }
.mea-calc-gaps li.is-muted { color: #3C4A55; font-size: 14px; padding-block: 0 10px; border-block-end: 1px solid #DCEAE8 }
.mea-calc-gaps li.is-muted b { display: none }
.mea-calc-gaps b { font-variant-numeric: tabular-nums; white-space: nowrap }
.mea-calc-gaps .mea-calc-placeholder { color: #3C4A55; justify-content: flex-start }

/* ------------------------------------------------------------- download button */

.mea-calc .mea-calc-download {
	border: 1px solid #127A75;
	background: #fff;
	color: #127A75;
	border-radius: 8px;
	padding: 13px 22px;
	min-block-size: 44px;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}

.mea-calc .mea-calc-download:hover { background: #EFF6F5 }
.mea-calc .mea-calc-download:focus-visible { outline: 2px solid #127A75; outline-offset: 2px }

.mea-calc-downnote { display: block; margin-block-start: 8px; font-size: 13px; color: #3C4A55 }