/* ==========================================================================
   Mari Bertumbuh Financial Tools
   Uses the theme's --mb-* design tokens; fallbacks keep it usable without
   the theme. Loaded only on /tools/ pages.
   Breakpoints follow the theme: 40em · 48em · 64em.
   ========================================================================== */

.mb-tool-page {
	--mbft-brand: var(--mb-color-brand, #0b6b4f);
	--mbft-accent: #b45309; /* interest / cost series, 5:1 on white */
	--mbft-text: var(--mb-color-text, #14171c);
	--mbft-soft: var(--mb-color-text-soft, #363c45);
	--mbft-muted: var(--mb-color-muted, #5c636e);
	--mbft-line: var(--mb-color-line, #e4e6e9);
	--mbft-line-strong: var(--mb-color-line-strong, #c8ccd2);
	--mbft-bg: var(--mb-color-bg, #fff);
	--mbft-bg-alt: var(--mb-color-bg-alt, #f5f5f2);
	--mbft-brand-soft: var(--mb-color-brand-soft, #e6f2ed);
	--mbft-danger: var(--mb-color-down, #b42318);
	--mbft-radius: var(--mb-radius, 4px);
	--mbft-tap: var(--mb-tap, 2.75rem);
	--mbft-font-ui: var(--mb-font-ui, system-ui, sans-serif);
	--mbft-font-serif: var(--mb-font-serif, Georgia, serif);

	padding-bottom: var(--mb-space-8, 4rem);
}

/* Page header
   ========================================================================== */

.mb-tool-page__header {
	padding-block: var(--mb-space-5, 1.5rem) var(--mb-space-6, 2rem);
}

.mb-tool-page__header > * + * {
	margin-top: var(--mb-space-3, 0.75rem);
}

.mb-tool-page__title {
	font-size: var(--mb-text-3xl, 2.5rem);
	letter-spacing: -0.01em;
}

.mb-tool-page__intro {
	max-width: var(--mb-measure, 42rem);
	color: var(--mbft-soft);
	font-family: var(--mbft-font-serif);
	font-size: var(--mb-text-lg, 1.25rem);
	line-height: 1.5;
}

.mb-tool-page__share {
	margin-top: var(--mb-space-6, 2rem);
}

.mb-tool-page__content {
	margin-top: var(--mb-space-7, 3rem);
}

.mb-tool-page__content pre {
	white-space: pre-wrap;
	font-family: var(--mbft-font-ui);
}

.mb-tool-page__section {
	margin-top: var(--mb-space-7, 3rem);
}

/* Calculator layout: form | results, details full width below
   ========================================================================== */

.mb-tool {
	display: grid;
	gap: var(--mb-space-5, 1.5rem);
}

.mb-tool > * {
	min-width: 0;
}

@media (min-width: 64em) {
	.mb-tool {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		align-items: start;
		gap: var(--mb-space-6, 2rem);
	}

	.mb-tool__details {
		grid-column: 1 / -1;
	}

	.mb-tool__results {
		position: sticky;
		top: var(--mb-space-5, 1.5rem);
	}
}

.mb-tool__form,
.mb-tool__results {
	padding: var(--mb-space-5, 1.5rem);
	border: 1px solid var(--mbft-line);
	border-radius: var(--mbft-radius);
	background: var(--mbft-bg);
}

.mb-tool__form {
	background: var(--mbft-bg-alt);
}

.mb-tool__heading {
	margin-bottom: var(--mb-space-4, 1rem);
	font-family: var(--mbft-font-ui);
	font-size: var(--mb-text-sm, 0.875rem);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Fields
   ========================================================================== */

.mb-tool-field + .mb-tool-field {
	margin-top: var(--mb-space-4, 1rem);
}

.mb-tool-field__label {
	display: block;
	margin-bottom: var(--mb-space-1, 0.25rem);
	font-size: var(--mb-text-sm, 0.875rem);
	font-weight: 600;
}

.mb-tool-field__control {
	display: flex;
	align-items: center;
	min-height: var(--mbft-tap);
	border: 1px solid var(--mbft-line-strong);
	border-radius: var(--mbft-radius);
	background: var(--mbft-bg);
}

.mb-tool-field__control:focus-within {
	border-color: var(--mbft-brand);
	outline: 2px solid var(--mbft-brand);
	outline-offset: 0;
}

.mb-tool-field__affix {
	flex: none;
	padding-inline: var(--mb-space-3, 0.75rem);
	color: var(--mbft-muted);
	font-size: var(--mb-text-sm, 0.875rem);
	font-weight: 600;
}

.mb-tool-field__affix:first-child {
	padding-right: 0;
}

.mb-tool-field__input {
	flex: 1;
	width: 100%;
	min-width: 0;
	min-height: calc(var(--mbft-tap) - 2px);
	padding: var(--mb-space-2, 0.5rem) var(--mb-space-3, 0.75rem);
	border: 0;
	background: transparent;
	font-size: var(--mb-text-md, 1.125rem);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.mb-tool-field__input:focus {
	outline: none;
}

.mb-tool-field__input[aria-invalid="true"] {
	color: var(--mbft-danger);
}

.mb-tool-field:has([aria-invalid="true"]) .mb-tool-field__control {
	border-color: var(--mbft-danger);
}

.mb-tool-select {
	width: 100%;
	min-height: var(--mbft-tap);
	padding: var(--mb-space-2, 0.5rem) var(--mb-space-3, 0.75rem);
	border: 1px solid var(--mbft-line-strong);
	border-radius: var(--mbft-radius);
	background: var(--mbft-bg);
	font-size: var(--mb-text-base, 1rem);
}

.mb-tool-field__range {
	display: block;
	width: 100%;
	margin-top: var(--mb-space-2, 0.5rem);
	accent-color: var(--mbft-brand);
}

.mb-tool-field__help {
	margin-top: var(--mb-space-1, 0.25rem);
	color: var(--mbft-muted);
	font-size: var(--mb-text-xs, 0.8125rem);
}

.mb-tool-field__error {
	margin-top: var(--mb-space-1, 0.25rem);
	color: var(--mbft-danger);
	font-size: var(--mb-text-sm, 0.875rem);
	font-weight: 600;
}

.mb-tool__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mb-space-3, 0.75rem);
	margin-top: var(--mb-space-5, 1.5rem);
}

.mb-tool__secondary {
	min-height: var(--mbft-tap);
	padding: var(--mb-space-2, 0.5rem) var(--mb-space-4, 1rem);
	border: 1px solid var(--mbft-line-strong);
	border-radius: var(--mbft-radius);
	background: var(--mbft-bg);
	color: var(--mbft-text);
	font-size: var(--mb-text-sm, 0.875rem);
	font-weight: 600;
	cursor: pointer;
}

.mb-tool__secondary:hover {
	border-color: var(--mbft-text);
}

/* Results
   ========================================================================== */

.mb-tool__results-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--mb-space-2, 0.5rem);
}

.mb-tool__share-status:empty {
	display: none;
}

.mb-tool__share-status {
	margin-bottom: var(--mb-space-2, 0.5rem);
	color: var(--mbft-brand);
	font-size: var(--mb-text-sm, 0.875rem);
	font-weight: 600;
	overflow-wrap: anywhere;
}

.mb-tool__statement {
	margin-bottom: var(--mb-space-4, 1rem);
	color: var(--mbft-soft);
	font-family: var(--mbft-font-serif);
	font-size: var(--mb-text-md, 1.125rem);
	line-height: 1.55;
}

.mb-tool__statement:empty {
	display: none;
}

/* Flex rows: cells grow to fill each row, so any item count tiles without
   gaps; primary figures take a full row. Borders overlap by 1px. */
.mb-tool-summary {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
}

.mb-tool-summary__item {
	flex: 1 1 11rem;
	margin: 0 0 -1px -1px;
	padding: var(--mb-space-3, 0.75rem) var(--mb-space-4, 1rem);
	border: 1px solid var(--mbft-line);
	background: var(--mbft-bg);
}

.mb-tool-summary__item:first-child,
.mb-tool-summary__item--primary {
	margin-left: 0;
}

.mb-tool-summary__item--primary {
	flex-basis: 100%;
	background: var(--mbft-brand-soft);
}

.mb-tool-summary dt {
	color: var(--mbft-muted);
	font-size: var(--mb-text-xs, 0.8125rem);
	font-weight: 600;
}

.mb-tool-summary dd {
	display: grid;
	margin: 0;
}

.mb-tool-summary__value {
	font-size: var(--mb-text-lg, 1.25rem);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	overflow-wrap: anywhere;
}

.mb-tool-summary__item--primary .mb-tool-summary__value {
	color: var(--mb-color-brand-dark, #074a37);
	font-size: var(--mb-text-2xl, 2rem);
	line-height: 1.2;
}

.mb-tool-summary__note {
	color: var(--mbft-muted);
	font-size: var(--mb-text-xs, 0.8125rem);
}

.mb-tool-notes {
	display: grid;
	gap: var(--mb-space-2, 0.5rem);
	margin: var(--mb-space-4, 1rem) 0 0;
	padding: var(--mb-space-3, 0.75rem) var(--mb-space-4, 1rem) var(--mb-space-3, 0.75rem) var(--mb-space-6, 2rem);
	border-left: 3px solid var(--mbft-accent);
	background: var(--mbft-bg-alt);
	color: var(--mbft-soft);
	font-size: var(--mb-text-sm, 0.875rem);
}

.mb-tool-message {
	padding: var(--mb-space-4, 1rem);
	border: 1px dashed var(--mbft-line-strong);
	color: var(--mbft-soft);
	font-size: var(--mb-text-sm, 0.875rem);
}

.mb-tool__disclaimer {
	margin-top: var(--mb-space-4, 1rem);
	color: var(--mbft-muted);
	font-size: var(--mb-text-xs, 0.8125rem);
	line-height: 1.5;
}

/* Details: chart and tables
   ========================================================================== */

.mb-tool-section + .mb-tool-section {
	margin-top: var(--mb-space-6, 2rem);
}

.mb-tool__details:not(:empty) {
	margin-top: var(--mb-space-4, 1rem);
}

.mb-tool-section__title {
	margin-bottom: var(--mb-space-3, 0.75rem);
	font-size: var(--mb-text-lg, 1.25rem);
}

.mb-tool-chart {
	margin: 0;
	min-height: 220px;
}

.mb-chart {
	display: block;
	font-family: var(--mbft-font-ui);
}

.mb-chart__grid {
	stroke: var(--mbft-line);
}

.mb-chart__axis {
	stroke: var(--mbft-muted);
}

.mb-chart__tick {
	fill: var(--mbft-muted);
	font-size: 12px;
}

.mb-chart__line {
	fill: none;
	stroke-width: 2.5;
	stroke-linejoin: round;
}

.mb-chart__line--brand {
	stroke: var(--mbft-brand);
}

.mb-chart__line--accent {
	stroke: var(--mbft-accent);
}

.mb-chart__line--muted {
	stroke: var(--mbft-soft);
}

.mb-chart__line--dashed {
	stroke-dasharray: 6 4;
}

.mb-chart__area--brand {
	fill: var(--mbft-brand);
	opacity: 0.08;
}

.mb-chart__area--accent {
	fill: var(--mbft-accent);
	opacity: 0.08;
}

.mb-chart__fill--brand {
	fill: var(--mbft-brand);
}

.mb-chart__fill--accent {
	fill: var(--mbft-accent);
}

.mb-chart__hatch {
	stroke: #fff;
	stroke-width: 2;
	opacity: 0.6;
}

.mb-chart-legend {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mb-space-2, 0.5rem) var(--mb-space-5, 1.5rem);
	margin: var(--mb-space-3, 0.75rem) 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--mb-text-sm, 0.875rem);
}

.mb-chart-legend li {
	display: flex;
	align-items: center;
	gap: var(--mb-space-2, 0.5rem);
}

.mb-chart-legend__swatch {
	display: inline-block;
	width: 1.5rem;
	height: 0.75rem;
}

.mb-chart-legend__swatch--solid.mb-chart-legend__swatch--brand {
	background: var(--mbft-brand);
}

.mb-chart-legend__swatch--solid.mb-chart-legend__swatch--accent {
	background: var(--mbft-accent);
}

.mb-chart-legend__swatch--dashed {
	height: 0;
	border-top: 3px dashed var(--mbft-soft);
}

.mb-chart-legend__swatch--dashed.mb-chart-legend__swatch--brand {
	border-top-color: var(--mbft-brand);
}

.mb-chart-legend__swatch--hatched {
	background: repeating-linear-gradient(45deg, var(--mbft-accent) 0 3px, #e6b88f 3px 5px);
}

.mb-tool-chart__summary {
	margin-top: var(--mb-space-2, 0.5rem);
	color: var(--mbft-soft);
	font-size: var(--mb-text-sm, 0.875rem);
}

/* Tables scroll inside their own box; the page never scrolls sideways. */
.mb-tool-table {
	max-width: 100%;
	overflow-x: auto;
	border: 1px solid var(--mbft-line);
	border-radius: var(--mbft-radius);
}

.mb-tool-table:focus-visible {
	outline: 2px solid var(--mbft-brand);
	outline-offset: 2px;
}

.mb-tool-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--mb-text-sm, 0.875rem);
	font-variant-numeric: tabular-nums;
}

.mb-tool-table th,
.mb-tool-table td {
	padding: var(--mb-space-2, 0.5rem) var(--mb-space-3, 0.75rem);
	border-bottom: 1px solid var(--mbft-line);
	text-align: left;
	white-space: nowrap;
}

.mb-tool-table thead th {
	position: sticky;
	top: 0;
	background: var(--mbft-bg-alt);
	font-size: var(--mb-text-xs, 0.8125rem);
	font-weight: 700;
}

.mb-tool-table tbody th {
	font-weight: 600;
}

.mb-tool-table .is-numeric {
	text-align: right;
}

.mb-tool-table tbody tr:last-child > * {
	border-bottom: 0;
}

.mb-tool-detail__control {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mb-space-2, 0.5rem) var(--mb-space-3, 0.75rem);
	margin-bottom: var(--mb-space-3, 0.75rem);
	font-size: var(--mb-text-sm, 0.875rem);
	font-weight: 600;
}

.mb-tool-detail__control .mb-tool-select {
	width: auto;
	min-width: 10rem;
}

/* FAQ
   ========================================================================== */

.mb-tool-faq {
	max-width: var(--mb-measure, 42rem);
}

.mb-tool-faq__item {
	border-bottom: 1px solid var(--mbft-line);
}

.mb-tool-faq__item summary {
	display: flex;
	align-items: center;
	min-height: var(--mbft-tap);
	padding-block: var(--mb-space-3, 0.75rem);
	font-family: var(--mbft-font-serif);
	font-size: var(--mb-text-md, 1.125rem);
	font-weight: 600;
	cursor: pointer;
}

.mb-tool-faq__answer {
	padding-bottom: var(--mb-space-4, 1rem);
	color: var(--mbft-soft);
	font-family: var(--mbft-font-serif);
	line-height: 1.7;
}

/* Tools index (/tools/)
   ========================================================================== */

.mb-tool-index {
	display: grid;
	gap: var(--mb-space-4, 1rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 40em) {
	.mb-tool-index {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64em) {
	.mb-tool-index {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.mb-tool-index__item {
	position: relative;
	padding: var(--mb-space-5, 1.5rem);
	border: 1px solid var(--mbft-line);
	border-top: 3px solid var(--mbft-brand);
	border-radius: var(--mbft-radius);
	color: var(--mbft-soft);
}

.mb-tool-index__item:hover {
	border-color: var(--mbft-line-strong);
	border-top-color: var(--mbft-brand);
}

.mb-tool-index__title {
	margin-bottom: var(--mb-space-2, 0.5rem);
	font-size: var(--mb-text-lg, 1.25rem);
}

.mb-tool-index__title a {
	color: var(--mbft-text);
	text-decoration: none;
}

.mb-tool-index__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.mb-tool-index__title a:focus-visible {
	outline: none;
}

.mb-tool-index__title a:focus-visible::after {
	outline: 2px solid var(--mbft-brand);
	outline-offset: 2px;
}