/**
 * Finance block styles.
 *
 * Shared by every finance block. All colours, gradients, radii and spacing
 * come from the theme's design-system tokens (assets/css/variables.css), which
 * is the single source of truth for the palette — a rebrand flows through to
 * blocks with no per-block edits. The tone variants (info, risk) map to the
 * same semantic status colours the theme uses for alerts and badges.
 */

.finp-box,
.finp-example,
.finp-faq,
.finp-sources,
.finp-table {
	margin-block: var( --finp-space-8 );
}

.finp-box__title,
.finp-example__title,
.finp-faq__title,
.finp-sources__title {
	font-family: var( --finp-font-display );
	letter-spacing: var( --finp-track-display );
	line-height: var( --finp-leading-snug );
}

/* ------------------------------------------------------------------ boxes */

.finp-box {
	border: 1px solid var( --finp-color-brand-line );
	border-left: 4px solid var( --finp-color-brand-500 );
	background: var( --finp-color-brand-50 );
	border-radius: 0 var( --finp-radius-sm ) var( --finp-radius-sm ) 0;
	color: var( --finp-color-ink );
	padding: var( --finp-space-5 ) var( --finp-space-6 );
}

.finp-box__title {
	color: var( --finp-color-brand-700 );
	font-weight: var( --finp-weight-semibold );
	margin: 0 0 var( --finp-space-2 );
}

.finp-box__body {
	color: var( --finp-color-ink-soft );
}

.finp-box__body > :first-child,
.finp-example__body > :first-child {
	margin-top: 0;
}

.finp-box__body > :last-child,
.finp-example__body > :last-child {
	margin-bottom: 0;
}

.finp-box--info {
	background: var( --finp-color-info-soft );
	border-color: var( --finp-color-info-line );
	border-left-color: var( --finp-color-info );
}

.finp-box--info .finp-box__title {
	color: var( --finp-color-info-strong );
}

.finp-box--risk {
	background: var( --finp-color-caution-soft );
	border-color: var( --finp-color-caution-line );
	border-left-color: var( --finp-color-caution );
}

.finp-box--risk .finp-box__title {
	color: var( --finp-color-caution-strong );
}

/* ---------------------------------------------------------------- example */

.finp-example {
	background: var( --finp-gradient-card-light );
	border: 1px solid var( --finp-color-line );
	border-radius: var( --finp-radius-md );
	box-shadow: var( --finp-shadow-card );
	padding: var( --finp-space-6 );
	position: relative;
}

.finp-example::before {
	background: var( --finp-gradient-gold );
	content: "";
	height: 2px;
	left: var( --finp-space-6 );
	position: absolute;
	right: var( --finp-space-6 );
	top: 0;
}

.finp-example__title {
	font-weight: var( --finp-weight-semibold );
	margin: 0 0 var( --finp-space-3 );
	font-size: var( --finp-text-lg );
}

.finp-example__table {
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
	margin: var( --finp-space-5 ) 0;
	width: 100%;
}

.finp-example__table th,
.finp-example__table td {
	border-bottom: 1px solid var( --finp-color-line );
	padding: var( --finp-space-3 ) var( --finp-space-2 );
	text-align: left;
	vertical-align: top;
}

.finp-example__table th {
	font-weight: var( --finp-weight-semibold );
	width: 55%;
}

.finp-example__note {
	display: block;
	font-size: var( --finp-text-sm );
	color: var( --finp-color-ink-soft );
}

.finp-example__result {
	background: var( --finp-gradient-surface-warm );
	border: 1px solid var( --finp-color-accent-line );
	border-radius: var( --finp-radius-sm );
	color: var( --finp-color-accent-700 );
	font-variant-numeric: tabular-nums;
	font-weight: var( --finp-weight-bold );
	margin: var( --finp-space-5 ) 0 0;
	padding: var( --finp-space-3 ) var( --finp-space-4 );
}

/* ------------------------------------------------------------ comparison */

.finp-table__caption {
	color: var( --finp-color-ink-muted );
	font-size: var( --finp-text-base );
	margin-bottom: var( --finp-space-3 );
}

.finp-table__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.finp-table__scroll table {
	border-collapse: collapse;
	background: var( --finp-gradient-card-light );
	border: 1px solid var( --finp-color-line );
	border-radius: var( --finp-radius-sm );
	box-shadow: var( --finp-shadow-card );
	font-variant-numeric: tabular-nums;
	overflow: hidden;
	width: 100%;
}

.finp-table__scroll th,
.finp-table__scroll td {
	border-bottom: 1px solid var( --finp-color-line );
	padding: var( --finp-space-3 );
	text-align: left;
	vertical-align: top;
}

.finp-table__scroll thead th {
	background: var( --finp-color-surface-strong );
	border-bottom: 2px solid var( --finp-color-accent-400 );
	box-shadow: var( --finp-highlight-strong );
	font-family: var( --finp-font-sans );
	font-size: var( --finp-text-sm );
	font-weight: var( --finp-weight-bold );
	letter-spacing: var( --finp-track-wide );
	text-transform: uppercase;
}

.finp-table__scroll tbody tr:last-child td {
	border-bottom: 0;
}

/* -------------------------------------------------------------------- faq */

.finp-faq__title,
.finp-sources__title {
	margin: 0 0 var( --finp-space-4 );
	font-weight: var( --finp-weight-semibold );
	font-size: var( --finp-text-xl );
}

.finp-faq__items {
	margin: 0;
}

.finp-faq__item {
	border-top: 1px solid var( --finp-color-line );
	padding: var( --finp-space-4 ) 0;
}

.finp-faq__item:last-child {
	border-bottom: 1px solid var( --finp-color-line );
}

.finp-faq__question {
	align-items: baseline;
	color: var( --finp-color-ink );
	cursor: pointer;
	display: flex;
	font-family: var( --finp-font-display );
	font-weight: var( --finp-weight-semibold );
	gap: var( --finp-space-4 );
	justify-content: space-between;
	list-style: none;
}

.finp-faq__question::-webkit-details-marker {
	display: none;
}

.finp-faq__question:hover {
	color: var( --finp-color-accent-600 );
}

.finp-faq__question::after {
	border: solid var( --finp-color-ink-muted );
	border-width: 0 2px 2px 0;
	content: "";
	flex: none;
	height: 8px;
	margin-top: 0.35em;
	transform: rotate( 45deg );
	transition: transform var( --finp-transition-fast );
	width: 8px;
}

.finp-faq__item[open] .finp-faq__question::after {
	transform: rotate( -135deg );
}

.finp-faq__answer {
	color: var( --finp-color-ink-soft );
	line-height: var( --finp-leading-normal );
	margin: var( --finp-space-2 ) 0 0;
}

.finp-faq__answer p:first-child {
	margin-top: 0;
}

.finp-faq__answer > :last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------- sources */

.finp-sources__list {
	font-size: var( --finp-text-base );
	margin: 0;
	padding-left: 0;
}

.finp-sources__item {
	list-style: none;
	margin-bottom: var( --finp-space-3 );
	padding-left: var( --finp-space-5 );
	position: relative;
}

.finp-sources__item::before {
	background: var( --finp-gradient-gold );
	border-radius: var( --finp-radius-pill );
	content: "";
	height: 6px;
	left: var( --finp-space-1 );
	position: absolute;
	top: 0.55em;
	width: 6px;
}

.finp-sources__meta {
	color: var( --finp-color-ink-muted );
	display: block;
	font-size: var( --finp-text-sm );
}

/* --------------------------------------------------------------- pros & cons */

.finp-proscons {
	margin-block: var( --finp-space-8 );
}

.finp-proscons__title {
	font-family: var( --finp-font-display );
	font-size: var( --finp-text-xl );
	letter-spacing: var( --finp-track-display );
	line-height: var( --finp-leading-snug );
	margin: 0 0 var( --finp-space-4 );
}

.finp-proscons__grid {
	display: grid;
	gap: var( --finp-space-5 );
	grid-template-columns: 1fr 1fr;
}

.finp-proscons__col {
	background: var( --finp-color-surface );
	border: 1px solid var( --finp-color-line );
	border-radius: var( --finp-radius-md );
	padding: var( --finp-space-5 );
}

.finp-proscons__col--pros {
	background: var( --finp-color-positive-soft );
	border-color: var( --finp-color-positive-line );
}

.finp-proscons__col--cons {
	background: var( --finp-color-danger-soft );
	border-color: var( --finp-color-danger-line );
}

.finp-proscons__label {
	font-family: var( --finp-font-sans );
	font-size: var( --finp-text-xs );
	font-weight: var( --finp-weight-bold );
	letter-spacing: var( --finp-track-caption );
	margin: 0 0 var( --finp-space-3 );
	text-transform: uppercase;
}

.finp-proscons__col--pros .finp-proscons__label {
	color: var( --finp-color-positive-strong );
}

.finp-proscons__col--cons .finp-proscons__label {
	color: var( --finp-color-danger-strong );
}

.finp-proscons__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.finp-proscons__list li {
	color: var( --finp-color-ink-soft );
	padding-left: var( --finp-space-5 );
	position: relative;
}

.finp-proscons__list li + li {
	margin-top: var( --finp-space-2 );
}

.finp-proscons__sign {
	font-weight: var( --finp-weight-bold );
	left: 0;
	position: absolute;
}

.finp-proscons__col--pros .finp-proscons__sign {
	color: var( --finp-color-positive );
}

.finp-proscons__col--cons .finp-proscons__sign {
	color: var( --finp-color-danger );
}

/* ------------------------------------------------------------- takeaways */

.finp-takeaways {
	background: var( --finp-gradient-surface-warm );
	border: 1px solid var( --finp-color-accent-line );
	border-radius: var( --finp-radius-md );
	box-shadow: var( --finp-shadow-card );
	margin: var( --finp-space-8 ) 0;
	padding: var( --finp-space-6 );
	position: relative;
}

.finp-takeaways::before {
	background: var( --finp-gradient-gold );
	content: "";
	height: 3px;
	left: var( --finp-space-6 );
	position: absolute;
	right: var( --finp-space-6 );
	top: 0;
}

.finp-takeaways__title {
	font-family: var( --finp-font-display );
	font-size: var( --finp-text-2xl );
	font-weight: var( --finp-weight-semibold );
	margin: 0 0 var( --finp-space-4 );
}

.finp-takeaways__hint {
	color: var( --finp-color-ink-muted );
	font-size: var( --finp-text-sm );
	margin: 0 0 var( --finp-space-4 );
}

.finp-takeaways__row {
	align-items: flex-start;
	display: flex;
	gap: var( --finp-space-2 );
}

.finp-takeaways__list {
	margin: 0;
}

.finp-takeaways__list,
.finp-takeaways__list li {
	list-style: none;
	padding-left: 0;
}

.finp-takeaways__list li {
	line-height: var( --finp-leading-normal );
	margin-bottom: var( --finp-space-3 );
	padding-left: var( --finp-space-6 );
	position: relative;
}

.finp-takeaways__list li::before {
	background: var( --finp-gradient-gold );
	border-radius: var( --finp-radius-pill );
	content: "";
	height: 6px;
	left: var( --finp-space-1 );
	position: absolute;
	top: 0.7em;
	width: 6px;
}

.finp-takeaways__list li:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------- alerts */

/*
 * The theme's .finp-alert component carries the visual tone; these rules only
 * add the inner body spacing the dynamic block needs.
 */
.finp-alert__body {
	color: var( --finp-color-ink-soft );
}

.finp-alert__body > :first-child {
	margin-top: 0;
}

.finp-alert__body > :last-child {
	margin-bottom: 0;
}

.finp-alert__body p {
	margin: 0 0 var( --finp-space-4 );
}

/* ----------------------------------------------------------------- stat */

.finp-stat__support {
	color: var( --finp-color-ink-soft );
	margin-top: var( --finp-space-2 );
}

.finp-stat__source {
	color: var( --finp-color-ink-muted );
	font-size: var( --finp-text-sm );
	font-style: italic;
	margin-top: var( --finp-space-4 );
}

.finp-stat__disclaimer {
	color: var( --finp-color-ink-muted );
	font-size: var( --finp-text-xs );
	margin-top: var( --finp-space-2 );
}

/* -------------------------------------------------------- related list */

.finp-related__hint {
	color: var( --finp-color-ink-muted );
	font-size: var( --finp-text-sm );
	margin: var( --finp-space-2 ) 0 0;
}

/* ------------------------------------------------------- worked example */

.finp-example__calc,
.finp-example__explain {
	border-top: 1px solid var( --finp-color-line );
	margin-top: var( --finp-space-5 );
	padding-top: var( --finp-space-4 );
}

.finp-example__calc-label,
.finp-example__explain-label,
.finp-example__field-label {
	color: var( --finp-color-accent-600 );
	font-size: var( --finp-text-xs );
	font-weight: var( --finp-weight-bold );
	letter-spacing: var( --finp-track-caption );
	margin: 0 0 var( --finp-space-2 );
	text-transform: uppercase;
}

.finp-example__calc-body,
.finp-example__explain-body {
	color: var( --finp-color-ink-soft );
	margin: 0;
}

/* -------------------------------------------------------------- small screens */
@media ( max-width: 599px ) {
	.finp-box,
	.finp-example {
		padding: var( --finp-space-4 );
	}

	.finp-example__table th {
		width: 45%;
	}

	.finp-stat__value {
		font-size: var( --finp-text-3xl );
	}

	.finp-proscons__grid {
		grid-template-columns: 1fr;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.finp-faq__question,
	.finp-faq__question::after {
		transition: none;
	}
}