/* Mortgage Calculator — dq-calculators
   Minimal, calm, one-task layout. Neutral surface with a single blue accent.
   Falls back to sane values if theme tokens are absent. */

.dq-ploan {
	--dq-accent: var(--dq-color-accent, #0066cc);
	--dq-accent-dark: var(--dq-color-accent-dark, #0053a6);
	--dq-ink: var(--dq-color-ink, #1a1f24);
	--dq-muted: var(--dq-color-muted, #5c6873);
	--dq-line: var(--dq-color-line, #e2e6ea);
	--dq-surface: var(--dq-color-surface, #ffffff);
	--dq-subtle: var(--dq-color-subtle, #f6f8fa);
	--dq-error: #c0362c;
	--dq-radius: 10px;

	max-width: 620px;
	margin: 0 auto;
	color: var(--dq-ink);
	font-family: inherit;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

/* Desktop: widen and place inputs + result side by side.
   The intro spans the full width; form and result share a row.
   Below the breakpoint everything stacks in natural source order. */
@media (min-width: 860px) {
	.dq-ploan {
		max-width: 960px;
		display: grid;
		grid-template-columns: minmax(320px, 400px) 1fr;
		grid-template-areas:
			"intro  intro"
			"form   result";
		column-gap: 2rem;
		row-gap: 0;
		align-items: start;
	}
	.dq-ploan__intro  { grid-area: intro; }
	.dq-ploan__form   { grid-area: form; margin: 0; }
	.dq-ploan__result { grid-area: result; margin-top: 0; }

	/* When no result yet, let the form breathe centered rather than
	   leaving a lopsided empty column. */
	.dq-ploan:not(.dq-ploan--has-result) {
		grid-template-columns: minmax(320px, 480px);
		grid-template-areas:
			"intro"
			"form";
		justify-content: center;
	}
}

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

/* --- Intro ------------------------------------------------------------- */
.dq-ploan__intro {
	margin-bottom: 1.5rem;
}
.dq-ploan__title {
	margin: 0 0 .35rem;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.25;
}
.dq-ploan__lede {
	margin: 0;
	color: var(--dq-muted);
	font-size: 1rem;
}

/* --- Form / inputs ----------------------------------------------------- */
.dq-ploan__form {
	display: grid;
	gap: 1.15rem;
	padding: 1.5rem;
	background: var(--dq-surface);
	border: 1px solid var(--dq-line);
	border-radius: var(--dq-radius);
}

.dq-field {
	display: grid;
	gap: .4rem;
}
.dq-field__label {
	font-size: .95rem;
	font-weight: 600;
}
.dq-field__control {
	display: flex;
	align-items: stretch;
	position: relative;
}
.dq-field__input {
	width: 100%;
	min-height: 48px;               /* comfortable touch target */
	padding: .65rem .8rem;
	font-size: 1.05rem;
	color: var(--dq-ink);
	background: var(--dq-surface);
	border: 1px solid var(--dq-line);
	border-radius: var(--dq-radius);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.dq-field__input:focus {
	outline: none;
	border-color: var(--dq-accent);
	box-shadow: 0 0 0 3px rgba(0, 102, 204, .18);
}
.dq-field__input::placeholder { color: var(--dq-muted); }

/* affix (currency $, percent %) sits inside the same visual field */
.dq-field__prefix,
.dq-field__suffix {
	display: flex;
	align-items: center;
	padding: 0 .75rem;
	font-size: 1.05rem;
	color: var(--dq-muted);
	background: var(--dq-subtle);
	border: 1px solid var(--dq-line);
}
.dq-field__prefix {
	border-right: 0;
	border-radius: var(--dq-radius) 0 0 var(--dq-radius);
}
.dq-field__suffix {
	border-left: 0;
	border-radius: 0 var(--dq-radius) var(--dq-radius) 0;
}
.dq-field__input--prefixed { border-radius: 0 var(--dq-radius) var(--dq-radius) 0; }
.dq-field__input--suffixed { border-radius: var(--dq-radius) 0 0 var(--dq-radius); }

.dq-field__select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235c6873' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .9rem center;
	padding-right: 2.4rem;
	cursor: pointer;
}

/* inline, per-field validation */
.dq-field__error {
	margin: 0;
	min-height: 0;
	font-size: .85rem;
	color: var(--dq-error);
}
.dq-field__error:empty { display: none; }
.dq-field--invalid .dq-field__input,
.dq-field--invalid .dq-field__prefix,
.dq-field--invalid .dq-field__suffix {
	border-color: var(--dq-error);
}

/* small helper text under an input */
.dq-field__hint {
	margin: 0;
	font-size: .8rem;
	color: var(--dq-muted);
}

/* optional-field disclosure (origination fee) */
.dq-field-extra {
	border: 1px dashed var(--dq-line);
	border-radius: var(--dq-radius);
}
.dq-field-extra > summary {
	padding: .75rem 1rem;
	font-size: .9rem;
	font-weight: 600;
	color: var(--dq-accent);
	cursor: pointer;
	list-style: none;
}
.dq-field-extra > summary::-webkit-details-marker { display: none; }
.dq-field-extra > summary::before {
	content: "+";
	display: inline-block;
	width: 1.1em;
	font-weight: 700;
}
.dq-field-extra[open] > summary::before { content: "\2212"; } /* minus */
.dq-field-extra > summary:focus-visible {
	outline: 3px solid rgba(0, 102, 204, .35);
	outline-offset: 2px;
	border-radius: 4px;
}
.dq-field-extra__body {
	padding: 0 1rem 1rem;
}

/* --- Primary action ---------------------------------------------------- */
.dq-ploan__submit {
	min-height: 50px;
	padding: .8rem 1.4rem;
	font-size: 1.05rem;
	font-weight: 600;
	color: #fff;
	background: var(--dq-accent);
	border: 0;
	border-radius: var(--dq-radius);
	cursor: pointer;
	transition: background .15s ease;
}
.dq-ploan__submit:hover { background: var(--dq-accent-dark); }
.dq-ploan__submit:focus-visible {
	outline: 3px solid rgba(0, 102, 204, .4);
	outline-offset: 2px;
}

/* --- Result: the focal point ------------------------------------------ */
.dq-ploan__result {
	margin-top: 1.5rem;
	padding: 1.75rem 1.5rem;
	background: var(--dq-subtle);
	border: 1px solid var(--dq-line);
	border-radius: var(--dq-radius);
	text-align: center;
}
.dq-result__label {
	margin: 0 0 .25rem;
	font-size: .9rem;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--dq-muted);
}
.dq-result__value {
	margin: 0 0 1.25rem;
	font-size: 2.75rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--dq-ink);
	font-variant-numeric: tabular-nums;
}

.dq-result__breakdown {
	display: grid;
	gap: .55rem;
	margin: 0 0 1.25rem;
	text-align: left;
	max-width: 340px;
	margin-inline: auto;
}
@media (min-width: 860px) {
	.dq-result__breakdown { max-width: none; }
}
.dq-result__row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: .55rem;
	border-bottom: 1px solid var(--dq-line);
}
.dq-result__row:last-child { border-bottom: 0; padding-bottom: 0; }
.dq-result__row dt { margin: 0; color: var(--dq-muted); }
.dq-result__row dd {
	margin: 0;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.dq-result__note {
	margin: 0 0 1rem;
	font-size: .85rem;
	color: var(--dq-muted);
}

/* --- Donut chart (Principal vs Interest) ------------------------------ */
.dq-chart {
	margin: 0 0 1.5rem;
	display: grid;
	justify-items: center;
	gap: .75rem;
}
.dq-chart__title {
	font-size: .9rem;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--dq-muted);
}
.dq-chart__svg {
	width: 180px;
	height: 180px;
	max-width: 60vw;
	transform: rotate(0deg);
}
.dq-chart__track {
	stroke: var(--dq-line);
}
.dq-chart__seg {
	stroke-linecap: butt;
	transition: stroke-dasharray .6s ease;
}
.dq-chart__seg--principal { stroke: var(--dq-accent); }
.dq-chart__seg--interest  { stroke: #f5a623; }

.dq-chart__center-num {
	font-size: 7px;
	font-weight: 700;
	fill: var(--dq-ink);
	font-variant-numeric: tabular-nums;
}
.dq-chart__center-lbl {
	font-size: 2.6px;
	letter-spacing: .08em;
	text-transform: uppercase;
	fill: var(--dq-muted);
}

.dq-chart__legend {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .35rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .9rem;
}
.dq-chart__legend li {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	color: var(--dq-muted);
}
.dq-chart__legend b {
	color: var(--dq-ink);
	font-variant-numeric: tabular-nums;
}
.dq-chart__key {
	width: 11px;
	height: 11px;
	border-radius: 3px;
	flex: 0 0 auto;
}
.dq-chart__key--principal { background: var(--dq-accent); }
.dq-chart__key--interest  { background: #f5a623; }

@media (prefers-reduced-motion: reduce) {
	.dq-chart__seg { transition: none; }
}

/* --- Disclosures (formula + schedule) --------------------------------- */
.dq-disclosure {
	text-align: left;
	border-top: 1px solid var(--dq-line);
}
.dq-disclosure > summary {
	padding: .85rem .25rem;
	font-size: .95rem;
	font-weight: 600;
	color: var(--dq-accent);
	cursor: pointer;
	list-style: none;
}
.dq-disclosure > summary::-webkit-details-marker { display: none; }
.dq-disclosure > summary::before {
	content: "▸";
	display: inline-block;
	margin-right: .5rem;
	transition: transform .15s ease;
}
.dq-disclosure[open] > summary::before { transform: rotate(90deg); }
.dq-disclosure > summary:focus-visible {
	outline: 3px solid rgba(0, 102, 204, .35);
	outline-offset: 2px;
	border-radius: 4px;
}
.dq-disclosure__body {
	padding: 0 .25rem 1rem;
	font-size: .9rem;
	color: var(--dq-ink);
}
.dq-disclosure__body ul { margin: .5rem 0; padding-left: 1.2rem; }
.dq-disclosure__body li { margin: .2rem 0; }
.dq-formula {
	padding: .6rem .8rem;
	background: var(--dq-surface);
	border: 1px solid var(--dq-line);
	border-radius: 8px;
	font-variant-numeric: tabular-nums;
}
.dq-disclosure__values {
	margin: .5rem 0 0;
	color: var(--dq-muted);
	font-variant-numeric: tabular-nums;
}

/* --- Schedule table --------------------------------------------------- */
.dq-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.dq-schedule {
	width: 100%;
	border-collapse: collapse;
	font-size: .88rem;
	font-variant-numeric: tabular-nums;
}
.dq-schedule th,
.dq-schedule td {
	padding: .55rem .6rem;
	text-align: right;
	border-bottom: 1px solid var(--dq-line);
	white-space: nowrap;
}
.dq-schedule th:first-child,
.dq-schedule td:first-child { text-align: left; }
.dq-schedule thead th {
	color: var(--dq-muted);
	font-weight: 600;
	border-bottom: 2px solid var(--dq-line);
}
.dq-schedule tbody tr:last-child td { border-bottom: 0; }

/* --- Mobile ----------------------------------------------------------- */
@media (max-width: 480px) {
	.dq-ploan__form { padding: 1.15rem; }
	.dq-ploan__result { padding: 1.4rem 1.1rem; }
	.dq-result__value { font-size: 2.25rem; }
	.dq-ploan__title { font-size: 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
	.dq-ploan *,
	.dq-ploan *::before { transition: none !important; }
}