/**
 * Reverse Mortgage Calculator — front end.
 *
 * Everything is scoped under .rmc so it does not leak into the theme.
 *
 * Type scale is deliberately generous. The people using this calculator are
 * very often 60+ and reading numbers that matter to their retirement, so
 * nothing here should dip below 14px, and the figures that carry the most
 * weight (the payment, the entry values) are sized to be read at a glance,
 * not squinted at.
 *
 * NOTE: sizes are in px, not rem. Some themes set the root <html> font-size
 * away from the browser default (a common one is 62.5%, i.e. 10px), which
 * silently shrinks any rem value used here. px keeps this calculator at its
 * intended size regardless of what the theme does elsewhere on the page.
 */

.rmc {
	--rmc-accent: #05549d;
	--rmc-secondary: #eda01d;
	--rmc-ink: #1f2937;
	--rmc-muted: #5b6b7d;
	--rmc-muted-bg: #eef0f3;
	--rmc-card: #ffffff;
	--rmc-border: #d7dce2;
	--rmc-highlight-bg: #eaf2fa;
	--rmc-radius: 16px;
	--rmc-shadow: 0 4px 16px rgba( 20, 30, 50, 0.06 );

	position: relative;
	container-type: inline-size;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 17px;
	line-height: 1.5;
	color: var( --rmc-ink );
	max-width: 1180px;
	margin: 0 auto;
	-webkit-font-smoothing: antialiased;
}

.rmc *,
.rmc *::before,
.rmc *::after {
	box-sizing: border-box;
}

.rmc-amount,
.rmc-stat-value,
.rmc-stat-box dd,
.rmc-number,
.rmc-table td {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* ---------------------------------------------------------------
 * Header
 * ------------------------------------------------------------- */

.rmc-head {
	margin-bottom: 28px;
	text-align: center;
}

.rmc-title {
	font-weight: 800;
	font-size: clamp( 30px, 4.5vw, 40px );
	letter-spacing: -0.4px;
	line-height: 1.15;
	margin: 0 0 10px;
}

.rmc-intro {
	color: var( --rmc-muted );
	font-size: 18px;
	line-height: 1.55;
	margin: 0 auto;
	max-width: 640px;
}

/* ---------------------------------------------------------------
 * Card shell
 * ------------------------------------------------------------- */

.rmc-card {
	position: relative;
	background: var( --rmc-card );
	border: 1px solid var( --rmc-border );
	border-radius: var( --rmc-radius );
	box-shadow: var( --rmc-shadow );
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr;
}

.rmc-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	background: linear-gradient( 90deg, var( --rmc-accent ) 0%, var( --rmc-accent ) 60%, var( --rmc-secondary ) 100% );
	z-index: 1;
}

@container ( min-width: 720px ) {
	.rmc-card {
		grid-template-columns: 5fr 4fr;
	}

	.rmc-results {
		border-left: 1px solid var( --rmc-border );
	}
}

/* ---------------------------------------------------------------
 * Inputs panel
 * ------------------------------------------------------------- */

.rmc-inputs {
	min-width: 0;
	padding: 40px;
}

.rmc-field {
	margin-bottom: 32px;
}

.rmc-field:last-child {
	margin-bottom: 0;
}

.rmc-field[hidden] {
	display: none;
}

.rmc-field-top {
	align-items: center;
	display: flex;
	gap: 16px;
	justify-content: space-between;
	margin-bottom: 10px;
}

.rmc-label {
	color: var( --rmc-ink );
	font-size: 15px;
	font-weight: 700;
}

.rmc-entry {
	align-items: center;
	background: transparent;
	border: 1.5px solid var( --rmc-border );
	border-radius: 8px;
	display: inline-flex;
	flex-shrink: 0;
	gap: 7px;
	padding: 7px 18px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rmc-entry:focus-within {
	border-color: var( --rmc-accent );
	box-shadow: 0 0 0 3px color-mix( in srgb, var( --rmc-accent ) 16%, transparent );
}

.rmc-entry-suffix {
	color: var( --rmc-muted );
	flex-shrink: 0;
	font-size: 14px;
	font-weight: 600;
}

.rmc-number {
	/* !important throughout this rule: many themes ship a blanket
	   input[type="number"] (and similar) selector with its own color,
	   background, padding, border and outline. That selector is more
	   specific than a plain class, so without !important a theme can
	   silently repaint this box grey and inflate its padding. */
	background: none !important;
	border: 0 !important;
	color: var( --rmc-accent ) !important;
	font: inherit !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	margin: 0 !important;
	outline: none !important;
	padding: 0 !important;
	text-align: right !important;
	/* Fallback for browsers that don't support field-sizing below. */
	width: 8ch;
}

/* Progressive enhancement: size the box to whatever is actually typed, so no
   gap collects between the digits and the unit. A plain `width` and
   `field-sizing: content` can't be combined on the same rule — the explicit
   width always wins — so this only applies where the width above is first
   cleared. */
@supports ( field-sizing: content ) {
	.rmc-number {
		field-sizing: content;
		max-width: 12ch;
		min-width: 2.5ch;
		width: auto;
	}
}

.rmc-number:focus {
	outline: none;
}

.rmc-number::-webkit-outer-spin-button,
.rmc-number::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

.rmc-number[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
}

/* Custom-arrow select */
.rmc-select-wrap {
	flex-shrink: 0;
	position: relative;
}

.rmc-select {
	/* !important: same theme rule targets select elements too. */
	appearance: none !important;
	-webkit-appearance: none !important;
	background: transparent !important;
	border: 1.5px solid var( --rmc-border ) !important;
	border-radius: 8px;
	color: var( --rmc-ink ) !important;
	cursor: pointer;
	font: inherit;
	font-size: 15px !important;
	font-weight: 600;
	height: 40px !important;
	padding: 0 38px 0 14px !important;
	width: 160px;
}

.rmc-select:focus-visible {
	border-color: var( --rmc-accent );
	box-shadow: 0 0 0 3px color-mix( in srgb, var( --rmc-accent ) 16%, transparent );
	outline: none;
}

.rmc-select-arrow {
	color: var( --rmc-muted );
	pointer-events: none;
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY( -50% );
}

.rmc-select-arrow svg {
	display: block;
	height: 16px;
	width: 16px;
}

.rmc-hint {
	color: var( --rmc-muted );
	font-size: 15px;
	line-height: 1.5;
	margin: 10px 0 0;
}

.rmc-hint:empty {
	display: none;
}

.rmc-error {
	color: #c0362a;
	font-size: 15px;
	margin: 10px 0 0;
}

.rmc-check {
	align-items: flex-start;
	cursor: pointer;
	display: flex;
	font-size: 17px;
	gap: 12px;
	line-height: 1.45;
}

.rmc-check input {
	accent-color: var( --rmc-accent );
	flex: none;
	height: 22px;
	margin: 2px 0 0;
	width: 22px;
}

/* thin flat-track slider, matched to the site's other calculators. */
.rmc-slider {
	/* !important throughout: the same theme rule that greys out .rmc-number
	   also targets input[type="range"] with its own padding. That padding
	   shrinks the thumb's native travel range in from the visible edges —
	   the browser keeps the whole thumb inside the input's content box, so
	   at the minimum value the thumb sits inset by the padding rather than
	   touching the left edge, and the same happens at the maximum on the
	   right. Zeroing padding here is what fixes that, not a layout change. */
	appearance: none !important;
	-webkit-appearance: none !important;
	background: #e9ebee !important;
	border: none !important;
	border-radius: 2px !important;
	cursor: pointer;
	display: block;
	height: 4px !important;
	margin: 14px 0 4px !important;
	outline: none !important;
	padding: 0 !important;
	width: 100%;
}

.rmc-slider::-webkit-slider-runnable-track {
	background: transparent;
	border-radius: 2px;
	height: 4px;
}

.rmc-slider::-moz-range-track {
	background: transparent;
	border: none;
	border-radius: 2px;
	height: 4px;
}

.rmc-slider::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	background: #ffffff;
	border: 3px solid var( --rmc-accent );
	border-radius: 50%;
	box-shadow: none;
	cursor: pointer;
	height: 16px;
	margin-top: -6px;
	width: 16px;
}

.rmc-slider::-moz-range-thumb {
	background: #ffffff;
	border: 3px solid var( --rmc-accent );
	border-radius: 50%;
	box-shadow: none;
	cursor: pointer;
	height: 16px;
	width: 16px;
}

.rmc-slider:focus-visible::-webkit-slider-thumb {
	outline: 3px solid var( --rmc-accent );
	outline-offset: 2px;
}

.rmc-slider:focus-visible::-moz-range-thumb {
	outline: 3px solid var( --rmc-accent );
	outline-offset: 2px;
}

.rmc-scale {
	color: var( --rmc-muted );
	display: flex;
	font-size: 14px;
	justify-content: space-between;
	margin-top: 8px;
}

/* no-JS submit button (only rendered inside <noscript>) */
.rmc-button {
	/* !important: this is a <button>, also caught by the same theme rule. */
	align-items: center;
	background: var( --rmc-accent ) !important;
	border: 0 !important;
	border-radius: 28px;
	color: #ffffff !important;
	cursor: pointer;
	display: flex;
	font: inherit;
	font-size: 18px;
	font-weight: 700;
	gap: 10px;
	height: 58px;
	justify-content: center;
	margin-top: 12px;
	padding: 0 !important;
	width: 100%;
	box-shadow: 0 4px 10px color-mix( in srgb, var( --rmc-accent ) 30%, transparent );
}

.rmc-button svg {
	height: 20px;
	width: 20px;
}

.rmc-button:hover,
.rmc-button:focus {
	filter: brightness( 0.85 );
}

.rmc-button:focus-visible {
	outline: 3px solid var( --rmc-accent );
	outline-offset: 2px;
}

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

.rmc-results {
	background: linear-gradient( 135deg, color-mix( in srgb, var( --rmc-accent ) 6%, transparent ) 0%, color-mix( in srgb, var( --rmc-secondary ) 8%, transparent ) 100% );
	min-width: 0;
	padding: 40px;
	text-align: center;
}

@media ( max-width: 719px ) {
	.rmc-results {
		border-top: 1px solid var( --rmc-border );
	}
}

.rmc-results p {
	margin: 0;
}

.rmc-eyebrow {
	color: var( --rmc-muted );
	font-size: 16px;
	font-weight: 600;
}

.rmc-amount {
	color: var( --rmc-accent );
	font-size: clamp( 40px, 8vw, 56px );
	font-weight: 800;
	letter-spacing: -0.4px;
	line-height: 1.1;
	margin-top: 8px !important;
}

.rmc-cadence-line {
	color: var( --rmc-ink );
	font-size: 17px;
	margin-bottom: 28px !important;
	margin-top: 8px !important;
}

.rmc-cadence-line [data-rmc-cadence] {
	font-weight: 600;
}

.rmc-cadence-line [data-rmc-term] {
	color: var( --rmc-muted );
}

.rmc-cadence-sep {
	color: var( --rmc-muted );
	margin: 0 4px;
}

.rmc-progress-wrap {
	margin-bottom: 28px;
	text-align: left;
}

.rmc-progress-track {
	background: var( --rmc-muted-bg );
	border-radius: 999px;
	height: 10px;
	overflow: hidden;
	width: 100%;
}

.rmc-progress-fill {
	background: linear-gradient( to right, var( --rmc-accent ), var( --rmc-secondary ) );
	border-radius: 999px;
	height: 100%;
}

.rmc-progress-caption {
	color: var( --rmc-muted );
	font-size: 15px;
	margin-top: 10px !important;
}

.rmc-progress-caption strong {
	color: var( --rmc-ink );
	font-weight: 700;
}

.rmc-stats-grid {
	display: grid;
	gap: 14px;
	grid-template-columns: 1fr 1fr;
	margin: 0 0 14px;
}

.rmc-stat-box {
	background: var( --rmc-card );
	border: 1.5px solid var( --rmc-border );
	border-radius: 14px;
	padding: 16px;
}

.rmc-stat-box dt {
	color: var( --rmc-muted );
	font-size: 14px;
	margin: 0;
}

.rmc-stat-box dd {
	font-size: 21px;
	font-weight: 700;
	margin: 4px 0 0;
}

.rmc-stat-cost {
	color: #a06a0f;
}

.rmc-stat-wide {
	margin-bottom: 28px;
	text-align: center;
}

.rmc-stat-note {
	color: var( --rmc-muted );
	font-size: 14px;
	line-height: 1.5;
	margin-top: 8px !important;
}

.rmc-cta {
	align-items: center;
	background: color-mix( in srgb, var( --rmc-accent ) 6%, transparent );
	border: 1.5px solid color-mix( in srgb, var( --rmc-accent ) 30%, transparent );
	border-radius: 28px;
	color: var( --rmc-accent );
	display: flex;
	font: inherit;
	font-size: 17px;
	font-weight: 700;
	gap: 10px;
	height: 54px;
	justify-content: center;
	text-decoration: none;
	transition: background-color 0.15s ease;
	width: 100%;
}

.rmc-cta svg {
	height: 18px;
	width: 18px;
}

.rmc-cta:hover,
.rmc-cta:focus {
	background: color-mix( in srgb, var( --rmc-accent ) 12%, transparent );
	color: var( --rmc-accent );
}

.rmc-cta:focus-visible {
	outline: 3px solid var( --rmc-accent );
	outline-offset: 2px;
}

/* ---------------------------------------------------------------
 * Chart
 * ------------------------------------------------------------- */

.rmc-chart-card {
	background: var( --rmc-card );
	border: 1px solid var( --rmc-border );
	border-radius: var( --rmc-radius );
	margin: 20px 0;
	padding: 20px 20px 16px;
	text-align: left;
}

.rmc-chart-title {
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 28px !important;
	text-align: center;
}

.rmc-chart-plot {
	display: flex;
	gap: 8px;
}

.rmc-chart-axis-title {
	color: var( --rmc-muted );
	flex-shrink: 0;
	font-size: 11px;
	font-weight: 600;
	margin: 0;
}

.rmc-chart-axis-title-y {
	height: 140px;
	text-align: center;
	transform: rotate( 180deg );
	white-space: nowrap;
	width: 14px;
	writing-mode: vertical-rl;
}

.rmc-chart-axis-title-x {
	margin: 2px 0 0 88px !important;
	text-align: center;
}

.rmc-chart-yaxis {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	height: 140px;
	justify-content: space-between;
	padding-bottom: 1px;
	text-align: right;
	width: 58px;
}

.rmc-chart-yaxis span {
	color: var( --rmc-muted );
	font-size: 11px;
	line-height: 1;
}

.rmc-chart-holder {
	flex: 1 1 auto;
	height: 140px;
	min-width: 0;
	position: relative;
}

.rmc-chart-xaxis {
	display: flex;
	margin: 6px 0 0 88px;
}

.rmc-chart-xaxis span {
	color: var( --rmc-muted );
	flex: 1 1 0;
	font-size: 11px;
	text-align: center;
}

.rmc-chart-canvas {
	height: 100%;
	width: 100%;
}

.rmc-chart-canvas svg {
	display: block;
	height: 100%;
	width: 100%;
}

.rmc-bar-paid {
	fill: var( --rmc-accent );
}

.rmc-bar-interest {
	fill: var( --rmc-secondary );
	opacity: 0.55;
}

.rmc-chart-grid {
	stroke: var( --rmc-border );
	stroke-width: 1;
}

.rmc-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 14px;
}

.rmc-legend-item {
	align-items: center;
	color: var( --rmc-muted );
	display: inline-flex;
	font-size: 15px;
	gap: 8px;
}

.rmc-legend-item::before {
	border-radius: 3px;
	content: "";
	height: 12px;
	width: 12px;
}

.rmc-legend-paid::before {
	background: var( --rmc-accent );
}

.rmc-legend-interest::before {
	background: var( --rmc-secondary );
	opacity: 0.55;
}

/* ---------------------------------------------------------------
 * Schedule
 * ------------------------------------------------------------- */

.rmc-schedule {
	border-top: 1px solid var( --rmc-border );
	margin-top: 28px;
	padding-top: 20px;
}

.rmc-schedule summary {
	cursor: pointer;
	font-size: 15px;
	font-weight: 700;
	padding: 4px 0;
}

.rmc-schedule summary:focus-visible {
	outline: 3px solid var( --rmc-accent );
	outline-offset: 3px;
}

.rmc-table-scroll {
	margin-top: 16px;
	overflow-x: auto;
}

.rmc-table {
	border-collapse: collapse;
	font-size: 16px;
	min-width: 560px;
	width: 100%;
}

.rmc-table th,
.rmc-table td {
	border-bottom: 1px solid var( --rmc-border );
	padding: 12px 14px;
	text-align: right;
}

.rmc-table th:first-child,
.rmc-table td:first-child {
	text-align: left;
}

.rmc-table thead th {
	color: var( --rmc-muted );
	font-size: 14px;
	font-weight: 700;
}

.rmc-table tbody tr:nth-child( even ) {
	background: var( --rmc-highlight-bg );
}

/* ---------------------------------------------------------------
 * Disclaimer
 * ------------------------------------------------------------- */

.rmc-disclaimer {
	color: var( --rmc-muted );
	font-size: 14px;
	line-height: 1.65;
	margin: 24px auto 0;
	max-width: 900px;
	text-align: center;
}

/* ---------------------------------------------------------------
 * Small screens
 * ------------------------------------------------------------- */

@media ( max-width: 480px ) {
	.rmc-inputs,
	.rmc-results {
		padding: 24px;
	}

	.rmc-amount {
		font-size: 38px;
	}

	.rmc-number {
		font-size: 21px;
	}

	.rmc-stats-grid {
		grid-template-columns: 1fr;
	}

	.rmc-stat-box {
		text-align: center;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.rmc * {
		animation: none !important;
		transition: none !important;
	}
}