/* =============================================================
   MortgageWire — tools-shared.css
   Shared styles for Affordability Check + Refinance Analyzer
   Extends style.css — load AFTER style.css
   ============================================================= */


/* --- BACK NAV --- */
.tool-nav-back {
	margin-bottom: 20px;
}

.tool-nav-back a {
	font-size: 13px;
	color: #2176C7;
	transition: color 0.15s;
}

.tool-nav-back a:hover {
	color: #1A5FA0;
}


/* --- PAGE WRAPPER --- */
.tool-page {
	max-width: 900px;
	margin: 0 auto;
	padding: 28px 20px 60px;
}


/* --- TITLE ROW --- */
.tool-title-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 24px;
	flex-wrap: wrap;
	gap: 12px;
}

.tool-eyebrow {
	font-size: 10px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #2176C7;
	font-weight: 500;
	margin-bottom: 4px;
}

.tool-title {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 28px;
	font-weight: 500;
	color: #0C2340;
	letter-spacing: -0.5px;
	margin-bottom: 4px;
}

.tool-subtitle {
	font-size: 12px;
	color: #999490;
}

.tool-rate-note {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
}

.tool-rate-badge {
	font-size: 10px;
	letter-spacing: 1px;
	text-transform: uppercase;
	background: #EAF2FC;
	color: #2176C7;
	padding: 2px 8px;
	border-radius: 20px;
	font-weight: 500;
}

.tool-rate-val {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 24px;
	font-weight: 500;
	color: #0C2340;
}

.tool-rate-src {
	font-size: 11px;
	color: #999490;
}


/* --- INPUTS CARD --- */
.tool-inputs-card {
	background: #ffffff;
	border-radius: 10px;
	border: 0.5px solid #E0DDD6;
	padding: 24px;
	margin-bottom: 20px;
}

.tool-inputs-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 24px;
	margin-bottom: 20px;
}

.tool-inputs-grid--3 {
	grid-template-columns: 1fr 1fr 1fr;
}

.tool-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.tool-field--full {
	grid-column: 1 / -1;
}

.tool-label {
	font-size: 12px;
	font-weight: 500;
	color: #555550;
	display: flex;
	align-items: center;
	gap: 6px;
}

.tool-live-tag {
	font-size: 9px;
	letter-spacing: 1px;
	text-transform: uppercase;
	background: #EAF2FC;
	color: #2176C7;
	padding: 1px 6px;
	border-radius: 20px;
	font-weight: 500;
}

.tool-input-wrap {
	display: flex;
	align-items: center;
	border: 0.5px solid #D0CCC4;
	border-radius: 8px;
	background: #F7F5F0;
	overflow: hidden;
	transition: border-color 0.15s;
}

.tool-input-wrap:focus-within {
	border-color: #2176C7;
	background: #ffffff;
}

.tool-prefix,
.tool-suffix {
	padding: 0 10px;
	font-size: 13px;
	color: #888880;
	background: transparent;
	flex-shrink: 0;
}

.tool-input {
	flex: 1;
	border: none;
	background: transparent;
	padding: 9px 8px;
	font-size: 14px;
	font-family: 'Source Sans 3', sans-serif;
	color: #1A1A1A;
	outline: none;
	min-width: 0;
}

.tool-select {
	flex: 1;
	border: none;
	background: transparent;
	padding: 9px 10px;
	font-size: 14px;
	font-family: 'Source Sans 3', sans-serif;
	color: #1A1A1A;
	outline: none;
	cursor: pointer;
	width: 100%;
}

.tool-field-note {
	font-size: 11px;
	color: #999490;
}

.tool-section-divider {
	grid-column: 1 / -1;
	height: 0.5px;
	background: #E0DDD6;
	margin: 4px 0;
}

.tool-section-label {
	grid-column: 1 / -1;
	font-size: 10px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #999490;
	font-weight: 500;
	margin-top: 4px;
}


/* --- ACTION ROW --- */
.tool-action-row {
	display: flex;
	gap: 10px;
	align-items: center;
	border-top: 0.5px solid #E0DDD6;
	padding-top: 16px;
}

.tool-btn {
	padding: 10px 32px;
	font-size: 14px;
	font-weight: 500;
	font-family: 'Source Sans 3', sans-serif;
	background: #2176C7;
	color: #ffffff;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.15s;
}

.tool-btn:hover {
	background: #0C447C;
}

.tool-reset-btn {
	padding: 10px 20px;
	font-size: 13px;
	font-family: 'Source Sans 3', sans-serif;
	background: transparent;
	color: #888880;
	border: 0.5px solid #D0CCC4;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.15s;
}

.tool-reset-btn:hover {
	background: #F7F5F0;
	color: #555550;
}


/* --- RESULTS AREA --- */
.tool-results {
	display: flex;
	flex-direction: column;
	gap: 16px;
}


/* --- METRIC CARDS --- */
.tool-metrics {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}

.tool-metrics--3 {
	grid-template-columns: repeat(3, 1fr);
}

.tool-metrics--2 {
	grid-template-columns: repeat(2, 1fr);
}

.tool-metric {
	background: #ffffff;
	border: 0.5px solid #E0DDD6;
	border-radius: 10px;
	padding: 16px;
}

.tool-metric--featured {
	background: #EAF2FC;
	border-color: #2176C7;
}

.tool-metric--positive {
	background: #EAF3E6;
	border-color: #4A9A30;
}

.tool-metric--warn {
	background: #FEF3E6;
	border-color: #C07A20;
}

.tool-metric-label {
	font-size: 11px;
	color: #888880;
	margin-bottom: 6px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.tool-metric-val {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 24px;
	font-weight: 500;
	color: #0C2340;
	margin-bottom: 4px;
	line-height: 1.1;
}

.tool-metric--featured .tool-metric-val {
	color: #185FA5;
}

.tool-metric--positive .tool-metric-val {
	color: #2E6B1A;
}

.tool-metric--warn .tool-metric-val {
	color: #8A5010;
}

.tool-metric-note {
	font-size: 11px;
	color: #999490;
}


/* --- DETAIL CARD --- */
.tool-detail-card {
	background: #ffffff;
	border: 0.5px solid #E0DDD6;
	border-radius: 10px;
	overflow: hidden;
}

.tool-detail-head {
	padding: 10px 18px;
	border-bottom: 0.5px solid #E0DDD6;
	font-size: 10px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #999490;
	font-weight: 500;
	background: #F7F5F0;
}

.tool-detail-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 11px 18px;
	border-bottom: 0.5px solid #F0EDE6;
	font-size: 13px;
}

.tool-detail-row:last-child {
	border-bottom: none;
}

.tool-detail-row--total {
	background: #F7F5F0;
	font-weight: 500;
}

.tool-detail-key {
	color: #666660;
}

.tool-detail-val {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 15px;
	color: #1A1A1A;
}

.tool-detail-val--featured {
	color: #185FA5;
}

.tool-detail-val--positive {
	color: #2E6B1A;
}

.tool-detail-val--negative {
	color: #A03020;
}


/* --- PROGRESS BAR --- */
.tool-progress-wrap {
	background: #ffffff;
	border: 0.5px solid #E0DDD6;
	border-radius: 10px;
	padding: 18px 20px;
}

.tool-progress-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #999490;
	margin-bottom: 10px;
}

.tool-progress-bar {
	height: 14px;
	background: #F0EDE6;
	border-radius: 7px;
	overflow: hidden;
	margin-bottom: 10px;
}

.tool-progress-fill {
	height: 100%;
	border-radius: 7px;
	transition: width 0.4s ease;
}

.tool-progress-fill--blue  { background: #2176C7; }
.tool-progress-fill--green { background: #2A8A5A; }
.tool-progress-fill--amber { background: #C07A20; }
.tool-progress-fill--red   { background: #C0402A; }

.tool-progress-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
}

.tool-progress-legend-item {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: #555550;
}

.tool-progress-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}


/* --- CALLOUT / VERDICT BOX --- */
.tool-verdict {
	background: #EAF2FC;
	border: 0.5px solid #2176C7;
	border-radius: 10px;
	padding: 16px 20px;
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.tool-verdict--positive {
	background: #EAF3E6;
	border-color: #4A9A30;
}

.tool-verdict--warn {
	background: #FEF3E6;
	border-color: #C07A20;
}

.tool-verdict--negative {
	background: #FEF0ED;
	border-color: #C0402A;
}

.tool-verdict-icon {
	font-size: 20px;
	line-height: 1;
	flex-shrink: 0;
	margin-top: 1px;
}

.tool-verdict-body {
	flex: 1;
}

.tool-verdict-hed {
	font-size: 14px;
	font-weight: 600;
	color: #0C2340;
	margin-bottom: 4px;
}

.tool-verdict-sub {
	font-size: 13px;
	color: #444440;
	line-height: 1.6;
}


/* --- CONTEXT / DISCLAIMER --- */
.tool-context {
	background: #F7F5F0;
	border-radius: 10px;
	border: 0.5px solid #E0DDD6;
	padding: 16px 20px;
}

.tool-context-head {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #999490;
	margin-bottom: 8px;
}

.tool-context-body {
	font-size: 12px;
	color: #888880;
	line-height: 1.7;
}

.tool-context-body a {
	color: #2176C7;
}

.tool-context-body a:hover {
	text-decoration: underline;
}


/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 768px) {
	.tool-inputs-grid {
		grid-template-columns: 1fr;
	}

	.tool-inputs-grid--3 {
		grid-template-columns: 1fr;
	}

	.tool-metrics {
		grid-template-columns: 1fr 1fr;
	}

	.tool-metrics--3 {
		grid-template-columns: 1fr 1fr;
	}

	.tool-title-row {
		flex-direction: column;
	}

	.tool-rate-note {
		align-items: flex-start;
	}
}

@media (max-width: 480px) {
	.tool-page {
		padding: 16px 14px 40px;
	}

	.tool-metrics {
		grid-template-columns: 1fr;
	}

	.tool-metrics--3 {
		grid-template-columns: 1fr;
	}

	.tool-metrics--2 {
		grid-template-columns: 1fr;
	}

	.tool-title {
		font-size: 24px;
	}
}