/*
 * Bankera Financial Calculators. Loaded only where a calculator renders.
 * Consumes Bankera tokens with neutral fallbacks for non-Bankera themes.
 * RTL-first, logical properties only; layout adapts to its own container.
 */
.bankera-calc {
	--calc-primary: var(--bankera-primary, #3446a2);
	--calc-primary-light: var(--bankera-primary-light, #edf0ff);
	--calc-gold: var(--bankera-gold, #b88713);
	--calc-gold-light: var(--bankera-gold-light, #fff6d8);
	--calc-surface: var(--bankera-surface, #fff);
	--calc-surface-alt: var(--bankera-surface-alt, #eef2f8);
	--calc-text: var(--bankera-text, #152139);
	--calc-muted: var(--bankera-text-muted, #58647b);
	--calc-heading: var(--bankera-heading, #17274d);
	--calc-border: var(--bankera-border, #d8dfeb);
	--calc-control: var(--bankera-control-border, #738199);
	--calc-success: var(--bankera-success, #127449);
	--calc-warning: var(--bankera-warning, #885b00);
	--calc-danger: var(--bankera-danger, #bd1e2d);
	--calc-focus: var(--bankera-focus, #805800);
	--calc-radius: var(--bankera-radius-md, 0.5rem);
	--calc-radius-lg: var(--bankera-radius-lg, 0.75rem);
	--calc-radius-xl: var(--bankera-radius-xl, 1rem);
	--calc-feature-bg: #17274d;
	--calc-feature-text: #fff;
	--calc-feature-accent: #f0ce80;
	--calc-gap: var(--bankera-space-4, 1rem);
	container-type: inline-size;
	container-name: bankera-calc;
	box-sizing: border-box;
	margin-block: 0 var(--bankera-space-6, 2rem);
	padding: clamp(1rem, 0.6rem + 1.6vw, 2rem);
	background: var(--calc-surface);
	color: var(--calc-text);
	border: 1px solid var(--calc-border);
	border-radius: var(--calc-radius-xl);
	box-shadow: var(--bankera-shadow-sm, 0 2px 8px rgb(21 33 57 / 4%));
	font-size: var(--bankera-text-md, 1rem);
	line-height: 1.6;
	overflow-wrap: normal;
}
.bankera-calc *,
.bankera-calc *::before,
.bankera-calc *::after { box-sizing: border-box; }
.bankera-calc [hidden] { display: none !important; }
.bankera-calc p,
.bankera-calc dl,
.bankera-calc figure { margin: 0; }
.bankera-calc bdi,
.bankera-calc input[data-number],
.bankera-calc__table td { font-variant-numeric: tabular-nums; }

.bankera-calc__sr {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Header */
.bankera-calc__head {
	display: flex;
	align-items: flex-start;
	gap: var(--bankera-space-3, 0.75rem);
	margin-block-end: var(--bankera-space-5, 1.5rem);
}
.bankera-calc__badge {
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	inline-size: 3rem;
	block-size: 3rem;
	border-radius: var(--calc-radius-lg);
	background: var(--calc-primary-light);
	color: var(--calc-primary);
	box-shadow: inset 0 -3px 0 var(--calc-gold);
}
.bankera-calc__title {
	margin: 0 0 var(--bankera-space-1, 0.25rem);
	color: var(--calc-heading);
	font-family: var(--bankera-font-heading, inherit);
	font-size: var(--bankera-text-xl, 1.375rem);
	font-weight: 700;
	line-height: 1.4;
}
.bankera-calc__intro { color: var(--calc-muted); font-size: var(--bankera-text-sm, 0.875rem); }
.bankera-calc__section-title {
	margin: 0 0 var(--bankera-space-3, 0.75rem);
	color: var(--calc-heading);
	font-family: var(--bankera-font-heading, inherit);
	font-size: var(--bankera-text-md, 1rem);
	font-weight: 700;
	line-height: 1.5;
}

/* Layout: one column, two panes when the calculator itself is wide enough. */
.bankera-calc__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bankera-space-5, 1.5rem); }
@container bankera-calc (min-width: 46rem) {
	.bankera-calc__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: start; }
	.bankera-calc__results { position: sticky; inset-block-start: calc(var(--bankera-sticky-header-height, 0px) + 1rem); }
}

/* Form */
.bankera-calc__form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--calc-gap); align-content: start; min-inline-size: 0; }
.bankera-calc__field { display: grid; gap: var(--bankera-space-1, 0.25rem); min-inline-size: 0; }
.bankera-calc__field > label,
.bankera-calc__choice > legend,
.bankera-calc__group > legend {
	color: var(--calc-heading);
	font-size: var(--bankera-text-sm, 0.875rem);
	font-weight: 600;
	line-height: 1.5;
}
.bankera-calc__control {
	display: flex;
	align-items: stretch;
	min-block-size: 3rem;
	background: var(--calc-surface);
	border: 1px solid var(--calc-control);
	border-radius: var(--calc-radius);
	overflow: hidden;
}
.bankera-calc__control:focus-within { outline: 3px solid var(--calc-focus); outline-offset: 2px; border-color: var(--calc-primary); }
.bankera-calc__control input,
.bankera-calc__control select {
	flex: 1 1 auto;
	min-inline-size: 0;
	inline-size: 100%;
	min-block-size: 3rem;
	margin: 0;
	padding: 0 var(--bankera-space-3, 0.75rem);
	background: transparent;
	color: var(--calc-text);
	border: 0;
	border-radius: 0;
	box-shadow: none;
	font: inherit;
	font-size: 1.0625rem;
	font-weight: 600;
	outline: none;
}
.bankera-calc__control select { cursor: pointer; font-weight: 500; }
html[dir="rtl"] .bankera-calc input[data-number] { text-align: right; }
html:not([dir="rtl"]) .bankera-calc input[data-number] { text-align: left; }
.bankera-calc__unit {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	padding-inline: var(--bankera-space-3, 0.75rem);
	background: var(--calc-surface-alt);
	color: var(--calc-muted);
	font-size: var(--bankera-text-sm, 0.875rem);
	font-weight: 600;
	border-inline-start: 1px solid var(--calc-border);
	white-space: nowrap;
}
.bankera-calc input[aria-invalid="true"] { color: var(--calc-danger); }
.bankera-calc__control:has(input[aria-invalid="true"]) { border-color: var(--calc-danger); box-shadow: inset 0 0 0 1px var(--calc-danger); }
.bankera-calc__hint { color: var(--calc-muted); font-size: var(--bankera-text-xs, 0.8125rem); line-height: 1.5; }
.bankera-calc__hint--block { margin-block-start: calc(-1 * var(--bankera-space-2, 0.5rem)); }
.bankera-calc__error { color: var(--calc-danger); font-size: var(--bankera-text-sm, 0.875rem); font-weight: 600; line-height: 1.5; }
.bankera-calc__status {
	padding: var(--bankera-space-3, 0.75rem);
	border-radius: var(--calc-radius);
	background: color-mix(in srgb, var(--calc-danger) 8%, var(--calc-surface));
	border: 1px solid var(--calc-danger);
	color: var(--calc-danger);
	font-size: var(--bankera-text-sm, 0.875rem);
	font-weight: 600;
}
.bankera-calc__group {
	display: grid;
	gap: var(--bankera-space-3, 0.75rem);
	min-inline-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
}
.bankera-calc__group--fees,
.bankera-calc__group--income,
.bankera-calc__group--years {
	padding: var(--bankera-space-4, 1rem);
	border: 1px dashed var(--calc-border);
	border-radius: var(--calc-radius-lg);
}
.bankera-calc__group > legend { padding-inline: var(--bankera-space-2, 0.5rem); }
@container bankera-calc (min-width: 22rem) {
	.bankera-calc__group:not(fieldset) { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
	.bankera-calc__group--fees,
	.bankera-calc__group--income { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.bankera-calc__group--fees > .bankera-calc__choice { grid-column: 1 / -1; }
}
.bankera-calc__years { display: grid; gap: var(--bankera-space-3, 0.75rem); grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
.bankera-calc__field--compact .bankera-calc__control,
.bankera-calc__field--compact .bankera-calc__control input { min-block-size: 2.75rem; }

/* Segmented radio controls */
.bankera-calc__choice { display: grid; gap: var(--bankera-space-1, 0.25rem); min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.bankera-calc__segments,
.bankera-calc__view {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	padding: 0.25rem;
	margin: 0;
	background: var(--calc-surface-alt);
	border: 1px solid var(--calc-border);
	border-radius: var(--calc-radius);
}
.bankera-calc__view { display: inline-flex; margin-block-end: var(--bankera-space-3, 0.75rem); }
.bankera-calc__segment { position: relative; display: flex; flex: 1 1 auto; }
.bankera-calc__segment input {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}
.bankera-calc__segment label {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	min-block-size: 2.75rem;
	padding: 0.25rem 0.875rem;
	border-radius: calc(var(--calc-radius) - 0.125rem);
	color: var(--calc-muted);
	font-size: var(--bankera-text-sm, 0.875rem);
	font-weight: 600;
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
}
.bankera-calc__segment input:checked + label {
	background: var(--calc-surface);
	color: var(--calc-primary);
	box-shadow: 0 1px 3px rgb(21 33 57 / 12%), inset 0 -2px 0 var(--calc-gold);
}
.bankera-calc__segment input:focus-visible + label { outline: 3px solid var(--calc-focus); outline-offset: 1px; }
.bankera-calc__choice--compact .bankera-calc__segments { flex-wrap: nowrap; }
@container bankera-calc (min-width: 22rem) {
	.bankera-calc__group:not(fieldset) > .bankera-calc__choice--compact { margin-block-start: 0; }
}

.bankera-calc__toggle { display: flex; align-items: flex-start; gap: var(--bankera-space-3, 0.75rem); min-block-size: 2.75rem; padding-block: 0.25rem; }
.bankera-calc__toggle input {
	flex: 0 0 auto;
	inline-size: 1.25rem;
	block-size: 1.25rem;
	min-block-size: 0;
	margin: 0.2rem 0 0;
	accent-color: var(--calc-primary);
	cursor: pointer;
}
.bankera-calc__toggle label { font-size: var(--bankera-text-sm, 0.875rem); font-weight: 600; cursor: pointer; }
.bankera-calc__toggle input:focus-visible { outline: 3px solid var(--calc-focus); outline-offset: 2px; }

.bankera-calc__actions { display: flex; justify-content: flex-start; }
.bankera-calc .bankera-calc__reset {
	display: inline-flex;
	align-items: center;
	gap: var(--bankera-space-2, 0.5rem);
	min-block-size: 2.75rem;
	padding: 0.5rem 1.125rem;
	background: transparent;
	color: var(--calc-primary);
	border: 1px solid var(--calc-primary);
	border-radius: var(--calc-radius);
	font-size: var(--bankera-text-sm, 0.875rem);
	font-weight: 700;
	cursor: pointer;
}
.bankera-calc .bankera-calc__reset:hover { background: var(--calc-primary-light); }
.bankera-calc .bankera-calc__reset:focus-visible { outline: 3px solid var(--calc-focus); outline-offset: 2px; }

/* Results */
.bankera-calc__results {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--calc-gap);
	min-inline-size: 0;
	padding: var(--bankera-space-4, 1rem);
	background: var(--calc-surface-alt);
	border-radius: var(--calc-radius-lg);
}
.bankera-calc__feature {
	position: relative;
	padding: var(--bankera-space-4, 1rem) var(--bankera-space-5, 1.5rem);
	background: var(--calc-feature-bg);
	background-image: linear-gradient(135deg, rgb(255 255 255 / 6%), transparent 55%);
	color: var(--calc-feature-text);
	border-radius: var(--calc-radius-lg);
	border-inline-start: 4px solid var(--calc-feature-accent);
	overflow: hidden;
}
.bankera-calc__feature-label { font-size: var(--bankera-text-sm, 0.875rem); font-weight: 600; opacity: 0.88; }
.bankera-calc__feature-value {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.5rem;
	min-block-size: 2.75rem;
	font-size: clamp(1.625rem, 1.2rem + 2.2cqi, 2.25rem);
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.01em;
}
.bankera-calc__feature-value .bankera-calc__currency { color: var(--calc-feature-accent); font-size: var(--bankera-text-md, 1rem); font-weight: 700; }
.bankera-calc__feature-note { min-block-size: 1.5em; color: #d8def0; font-size: var(--bankera-text-xs, 0.8125rem); }
.bankera-calc__stats { display: grid; background: var(--calc-surface); border: 1px solid var(--calc-border); border-radius: var(--calc-radius); overflow: hidden; }
@container bankera-calc (min-width: 24rem) {
	.bankera-calc__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Hairlines without gap tricks, so an odd count never leaves a grey cell. */
.bankera-calc__stat { display: grid; gap: 0.125rem; align-content: start; padding: 0.75rem 0.875rem; background: var(--calc-surface); min-inline-size: 0; border-inline-end: 1px solid var(--calc-border); border-block-end: 1px solid var(--calc-border); margin-inline-end: -1px; margin-block-end: -1px; }
.bankera-calc__stat dt { color: var(--calc-muted); font-size: var(--bankera-text-xs, 0.8125rem); font-weight: 500; line-height: 1.45; }
.bankera-calc__stat dd { margin: 0; color: var(--calc-heading); font-size: var(--bankera-text-md, 1rem); font-weight: 700; line-height: 1.45; }
.bankera-calc__currency { color: var(--calc-muted); font-size: 0.8em; font-weight: 600; }
.bankera-calc__muted { color: var(--calc-muted); font-weight: 500; }
.bankera-calc__note { color: var(--calc-muted); font-size: var(--bankera-text-xs, 0.8125rem); line-height: 1.6; min-block-size: 1.6em; }
.bankera-calc__alert {
	padding: 0.75rem 0.875rem;
	background: var(--calc-gold-light);
	color: var(--calc-heading);
	border: 1px solid color-mix(in srgb, var(--calc-warning) 45%, transparent);
	border-inline-start: 4px solid var(--calc-warning);
	border-radius: var(--calc-radius);
	font-size: var(--bankera-text-sm, 0.875rem);
	font-weight: 600;
	line-height: 1.55;
}

/* Proportional bar (principal vs interest) with text legend */
.bankera-calc__chart { display: grid; gap: var(--bankera-space-2, 0.5rem); }
.bankera-calc__chart figcaption { color: var(--calc-muted); font-size: var(--bankera-text-xs, 0.8125rem); font-weight: 600; }
.bankera-calc__bar { display: flex; block-size: 0.75rem; overflow: hidden; background: var(--calc-border); border-radius: 999px; }
.bankera-calc__bar span { display: block; block-size: 100%; inline-size: 0; transition: inline-size 0.25s ease; }
.bankera-calc__bar-a,
.bankera-calc__swatch--a { background: var(--calc-primary); }
.bankera-calc__bar-b,
.bankera-calc__swatch--b { background: var(--calc-gold); }
.bankera-calc__legend { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: 0; padding: 0; list-style: none; font-size: var(--bankera-text-sm, 0.875rem); }
.bankera-calc__legend li { display: inline-flex; align-items: center; gap: 0.375rem; }
.bankera-calc__legend bdi { font-weight: 700; color: var(--calc-heading); }
.bankera-calc__swatch { inline-size: 0.75rem; block-size: 0.75rem; border-radius: 3px; }

/* Affordability */
.bankera-calc__afford {
	display: grid;
	gap: var(--bankera-space-2, 0.5rem);
	padding: var(--bankera-space-4, 1rem);
	background: var(--calc-surface);
	border: 1px solid var(--calc-border);
	border-radius: var(--calc-radius-lg);
	--afford: var(--calc-muted);
}
.bankera-calc__afford.is-comfortable { --afford: var(--calc-success); }
.bankera-calc__afford.is-stretched { --afford: var(--calc-warning); }
.bankera-calc__afford.is-exceeds { --afford: var(--calc-danger); }
.bankera-calc__afford-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.bankera-calc__afford-title { color: var(--calc-heading); font-weight: 700; }
.bankera-calc__pill {
	padding: 0.125rem 0.75rem;
	border: 1px solid var(--afford);
	border-radius: 999px;
	color: var(--afford);
	background: color-mix(in srgb, var(--afford) 10%, var(--calc-surface));
	font-size: var(--bankera-text-sm, 0.875rem);
	font-weight: 700;
}
.bankera-calc__afford-dti { display: flex; justify-content: space-between; gap: 0.5rem; color: var(--calc-muted); font-size: var(--bankera-text-sm, 0.875rem); }
.bankera-calc__afford-dti bdi { color: var(--calc-heading); font-size: var(--bankera-text-lg, 1.125rem); font-weight: 800; }
.bankera-calc__meter { position: relative; block-size: 0.625rem; background: var(--calc-surface-alt); border: 1px solid var(--calc-border); border-radius: 999px; }
.bankera-calc__meter-fill { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 0; background: var(--afford); border-radius: 999px; transition: inline-size 0.25s ease; }
.bankera-calc__meter-mark { position: absolute; inset-block: -0.25rem; inline-size: 2px; background: var(--calc-warning); }
.bankera-calc__meter-mark--max { background: var(--calc-danger); }
.bankera-calc__stats--compact { margin-block-start: var(--bankera-space-2, 0.5rem); }

/* Schedule */
.bankera-calc__schedule { border: 1px solid var(--calc-border); border-radius: var(--calc-radius); background: var(--calc-surface); }
.bankera-calc__schedule > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-block-size: 2.75rem;
	padding: 0.5rem 1rem;
	color: var(--calc-primary);
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}
.bankera-calc__schedule > summary::-webkit-details-marker { display: none; }
/* Non-directional chevron: physical borders so it points down in RTL and LTR. */
.bankera-calc__schedule > summary::after { content: ""; flex: 0 0 auto; inline-size: 0.5rem; block-size: 0.5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.bankera-calc__schedule[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.bankera-calc__schedule > summary:focus-visible { outline: 3px solid var(--calc-focus); outline-offset: 2px; border-radius: var(--calc-radius); }
.bankera-calc__schedule[open] { padding-block-end: 0.75rem; }
.bankera-calc__schedule[open] > :not(summary) { margin-inline: 0.75rem; }
.bankera-calc__table-wrap { max-block-size: 26rem; overflow: auto; border: 1px solid var(--calc-border); border-radius: calc(var(--calc-radius) - 0.125rem); }
.bankera-calc__table-wrap:focus-visible { outline: 3px solid var(--calc-focus); outline-offset: 2px; }
.bankera-calc__table { inline-size: 100%; min-inline-size: 30rem; margin: 0; border-collapse: collapse; font-size: var(--bankera-text-sm, 0.875rem); }
.bankera-calc--certificate .bankera-calc__table { min-inline-size: 38rem; }
.bankera-calc__table caption { padding: 0.5rem 0.75rem; color: var(--calc-muted); font-size: var(--bankera-text-xs, 0.8125rem); text-align: start; caption-side: top; }
.bankera-calc__table th,
.bankera-calc__table td { padding: 0.5rem 0.75rem; border-block-end: 1px solid var(--calc-border); text-align: end; white-space: nowrap; }
.bankera-calc__table thead th { position: sticky; inset-block-start: 0; z-index: 1; background: var(--calc-surface-alt); color: var(--calc-heading); font-size: var(--bankera-text-xs, 0.8125rem); font-weight: 700; }
.bankera-calc__table tbody th { color: var(--calc-heading); font-weight: 600; text-align: start; }
.bankera-calc__table thead th:first-child { text-align: start; }
.bankera-calc__table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--calc-surface-alt) 55%, var(--calc-surface)); }

/* Disclaimer */
.bankera-calc__disclaimer {
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
	margin-block-start: var(--bankera-space-5, 1.5rem);
	padding-block-start: var(--bankera-space-4, 1rem);
	border-block-start: 1px solid var(--calc-border);
	color: var(--calc-muted);
	font-size: var(--bankera-text-xs, 0.8125rem);
	line-height: 1.6;
}
.bankera-calc__disclaimer svg { flex: 0 0 auto; margin-block-start: 0.125rem; color: var(--calc-gold); }
.bankera-calc__noscript { margin-block-start: var(--bankera-space-3, 0.75rem); color: var(--calc-danger); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
	.bankera-calc__bar span,
	.bankera-calc__meter-fill { transition: none; }
}
@media print {
	.bankera-calc { box-shadow: none; }
	.bankera-calc__actions,
	.bankera-calc__view { display: none; }
	.bankera-calc__results { position: static; }
	.bankera-calc__table-wrap { max-block-size: none; overflow: visible; }
}