/*
 * Tuottolaskuri Core – Sijoituksen tuottolaskuri.
 * Loaded only with this calculator, after tlc-core.css. Reuses the shared .tlc- components
 * and adds the hero, mode tabs and comparison widgets. Everything is scoped under .tlc-ir.
 */

.tlc-root.tlc-ir {
	--tlc-ir-a: #0e8f74;
	--tlc-ir-a-line: #20a995;
	--tlc-ir-b: #1769dd;
}

/* ---------------- Hero (shared .tlc-hero base in tlc-core.css) ---------------- */
/* Tabs sit on the bottom edge: no bottom padding, title block centred in the space above. */
.tlc-ir .tlc-ir-hero { padding-bottom: 0; justify-content: flex-end; }
.tlc-ir .tlc-ir-hero__content { display: flex; flex-direction: column; flex: 1 1 auto; max-width: 680px; }
.tlc-ir .tlc-ir-hero__content > .tlc-title { margin-top: auto; }

.tlc-ir .tlc-ir-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: auto;
	padding-top: clamp(1.25rem, 3vw, 1.75rem);
}

.tlc-ir .tlc-ir-tab {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	min-height: 50px;
	padding: .7rem 1.35rem;
	border: 1px solid var(--tlc-border);
	border-bottom: 0;
	border-radius: 12px 12px 0 0;
	background: rgba(255, 255, 255, .92);
	color: var(--tlc-navy);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	transition: background-color .15s ease, color .15s ease;
}

.tlc-ir .tlc-ir-tab svg { color: var(--tlc-primary); }
.tlc-ir .tlc-ir-tab:hover { background: #fff; }

.tlc-ir .tlc-ir-tab[aria-selected="true"] {
	border-color: var(--tlc-primary);
	background: var(--tlc-primary);
	color: #fff;
}

.tlc-ir .tlc-ir-tab[aria-selected="true"] svg { color: #fff; }

.tlc-ir .tlc-ir-notice { margin: 0; }

/* ---------------- Panels and inputs ---------------- */
.tlc-ir .tlc-ir-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tlc-gap); min-width: 0; }
.tlc-ir .tlc-ir-panel > * { min-width: 0; }

.tlc-ir .tlc-ir-intro {
	margin: -.6rem 0 1.15rem;
	font-size: .9375rem;
	color: var(--tlc-muted-strong);
}

.tlc-ir .tlc-input--plain { padding-right: .95rem; }
.tlc-ir .tlc-ir-fees-field { margin-top: 1.4rem; }

.tlc-ir .tlc-ir-fee-pair {
	display: grid;
	gap: 0 1.5rem;
	margin-top: 1.5rem;
	padding-top: .25rem;
	border-top: 1px solid #e3eaf4;
}

@container tlc-settings (min-width: 420px) {
	.tlc-ir .tlc-ir-fee-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.tlc-ir .tlc-ir-fee .tlc-label { font-size: .875rem; }
.tlc-ir .tlc-ir-fee .tlc-input--compact { width: 4.75rem; }
.tlc-ir .tlc-ir-fee--a .tlc-input--compact { color: var(--tlc-ir-a); }
.tlc-ir .tlc-ir-fee--b .tlc-input--compact { color: var(--tlc-ir-b); }

/* ---------------- Mode A results ---------------- */
.tlc-ir .tlc-ir-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.tlc-ir .tlc-ir-kpis .tlc-kpi { padding: 1rem 1.1rem; }
.tlc-ir .tlc-ir-kpis .tlc-kpi__label { min-height: 0; }
.tlc-ir .tlc-ir-kpis .tlc-kpi__value { font-size: clamp(1.4rem, 1rem + 2.4cqi, 2rem); }

@container tlc-results (max-width: 300px) {
	.tlc-ir .tlc-ir-kpis { grid-template-columns: minmax(0, 1fr); }
}

.tlc-ir .tlc-ir-comp {
	margin-top: 1.25rem;
	padding: 1rem 1.1rem;
	border: 1px solid #e7eef7;
	border-radius: 12px;
	background: var(--tlc-bg);
}

.tlc-ir .tlc-ir-comp__title { font-size: .9375rem; font-weight: 700; }

.tlc-ir .tlc-ir-comp__bar {
	display: flex;
	height: 14px;
	margin-top: .75rem;
	overflow: hidden;
	border-radius: 999px;
	background: #e3eaf4;
}

.tlc-ir .tlc-ir-comp__seg { display: block; height: 100%; transition: width .2s ease; }
.tlc-ir .tlc-ir-comp__seg--kept { background: #7fa9e8; }
.tlc-ir .tlc-ir-comp__seg--profit { background: var(--tlc-positive); }
.tlc-ir .tlc-ir-comp__seg--loss { background: repeating-linear-gradient(135deg, #e5484d 0 4px, #f3a5a7 4px 8px); }
.tlc-ir .tlc-ir-comp__seg--fees { background: #94a3b8; }

.tlc-ir .tlc-ir-comp__legend {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem 1.25rem;
	margin: .7rem 0 0;
	padding: 0;
	list-style: none;
	font-size: .8125rem;
	color: var(--tlc-muted-strong);
}

.tlc-ir .tlc-ir-comp__item { display: inline-flex; align-items: center; gap: .4rem; margin: 0; }
.tlc-ir .tlc-ir-comp__item b { color: var(--tlc-navy); font-variant-numeric: tabular-nums; }
.tlc-ir .tlc-ir-comp__item::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: #7fa9e8; }
.tlc-ir .tlc-ir-comp__item--profit::before { background: var(--tlc-positive); }
.tlc-ir .tlc-ir-comp__item--loss::before { background: #e5484d; }
.tlc-ir .tlc-ir-comp__item--fees::before { background: #94a3b8; }

.tlc-ir .tlc-ir-comp__note { margin-top: .6rem; font-size: .75rem; color: var(--tlc-muted); }

/* ---------------- Mode B results ---------------- */
.tlc-ir .tlc-ir-highlight {
	display: flex;
	gap: 1rem;
	align-items: center;
	padding: 1rem 1.25rem;
	border: 1px solid #c9ebe0;
	border-radius: 14px;
	background: linear-gradient(110deg, #e7f6f1 0%, #f1faf7 100%);
}

.tlc-ir .tlc-ir-highlight.is-reversed { border-color: #cfe0f7; background: linear-gradient(110deg, #eaf2fd 0%, #f4f8fe 100%); }
.tlc-ir .tlc-ir-highlight__icon { display: inline-grid; flex: none; color: var(--tlc-positive); }
.tlc-ir .tlc-ir-highlight.is-reversed .tlc-ir-highlight__icon { color: var(--tlc-primary); }
.tlc-ir .tlc-ir-highlight__label { font-size: .875rem; font-weight: 600; color: var(--tlc-navy); }

.tlc-ir .tlc-ir-highlight__value {
	font-size: clamp(1.75rem, 1.2rem + 3cqi, 2.5rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.025em;
	color: var(--tlc-navy);
	font-variant-numeric: tabular-nums;
}

.tlc-ir .tlc-ir-highlight__value.is-positive { color: var(--tlc-positive-text); }
.tlc-ir .tlc-ir-highlight__value.is-negative { color: var(--tlc-negative-text); }
.tlc-ir .tlc-ir-highlight__text { margin-top: .2rem; font-size: .875rem; font-weight: 600; color: var(--tlc-text); }
.tlc-ir .tlc-ir-highlight__formula { margin-top: .15rem; font-size: .75rem; color: var(--tlc-muted); }

.tlc-ir .tlc-ir-chart { margin-top: 1rem; }

.tlc-ir .tlc-ir-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: .6rem;
	margin-top: 1rem;
}

@container tlc-results (max-width: 520px) {
	.tlc-ir .tlc-ir-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tlc-ir .tlc-ir-card--impact { grid-column: 1 / -1; }
}

@container tlc-results (max-width: 300px) {
	.tlc-ir .tlc-ir-cards { grid-template-columns: minmax(0, 1fr); }
}

.tlc-ir .tlc-ir-cards .tlc-kpi { padding: .85rem .9rem; background: #fff; }
.tlc-ir .tlc-ir-cards .tlc-kpi__label { min-height: 0; font-weight: 600; color: var(--tlc-navy); }
.tlc-ir .tlc-ir-cards .tlc-kpi__value { font-size: clamp(1.2rem, .8rem + 2cqi, 1.5rem); }
.tlc-ir .tlc-ir-card--a .tlc-kpi__value { color: var(--tlc-ir-a); }
.tlc-ir .tlc-ir-card--b .tlc-kpi__value { color: var(--tlc-ir-b); }
.tlc-ir .tlc-ir-cards .tlc-kpi__sub + .tlc-kpi__sub { margin-top: .15rem; }

/* Two-line comparison chart (variant of the shared SVG chart). */
.tlc-ir .tlc-chart__svg--compare .tlc-chart__area { display: none; }
.tlc-ir .tlc-chart__svg--compare .tlc-chart__line--value { stroke: var(--tlc-ir-a-line); stroke-width: 3; }
.tlc-ir .tlc-chart__svg--compare .tlc-chart__line--contrib { stroke: var(--tlc-ir-b); stroke-width: 3; stroke-dasharray: none; }
.tlc-ir .tlc-chart__svg--compare .tlc-chart__end--value,
.tlc-ir .tlc-chart__svg--compare .tlc-chart__dot--value { fill: var(--tlc-ir-a-line); }
.tlc-ir .tlc-chart__svg--compare .tlc-chart__end--contrib,
.tlc-ir .tlc-chart__svg--compare .tlc-chart__dot--contrib { fill: var(--tlc-ir-b); stroke: #fff; stroke-width: 2.5; }
.tlc-ir .tlc-chart__svg--compare .tlc-chart__pill--value rect { fill: var(--tlc-ir-a); }
.tlc-ir .tlc-chart__svg--compare .tlc-chart__pill--contrib rect { fill: var(--tlc-ir-b); stroke: none; }
.tlc-ir .tlc-chart__svg--compare .tlc-chart__pill--contrib text { fill: #fff; }
.tlc-ir .tlc-chart__tooltip-row--value span::before { background: var(--tlc-ir-a-line); }
.tlc-ir .tlc-chart__tooltip-row--contrib span::before { background: var(--tlc-ir-b); }

.tlc-ir .tlc-ir-legend .tlc-legend__item::before { width: 12px; height: 12px; border-radius: 50%; }
.tlc-ir .tlc-ir-legend--a::before { background: var(--tlc-ir-a-line); }
.tlc-ir .tlc-ir-legend--b::before { background: var(--tlc-ir-b); }

/* Decomposition table */
.tlc-ir .tlc-ir-breakdown .tlc-card__title { margin-bottom: 1rem; }
.tlc-ir .tlc-ir-breakdown .tlc-ir-intro { margin-top: 0; }
.tlc-ir .tlc-ir-bd th:first-child,
.tlc-ir .tlc-ir-bd td:first-child { text-align: left; white-space: normal; min-width: 12rem; }
.tlc-ir .tlc-ir-bd tbody th { font-weight: 500; }
.tlc-ir .tlc-ir-bd__total th,
.tlc-ir .tlc-ir-bd__total td { border-top: 2px solid #dde6f1; font-weight: 700; color: var(--tlc-navy); }
.tlc-ir .tlc-ir-breakdown .tlc-table-note { margin-top: .75rem; }

/* Lower area: methodology and notes side by side on wide layouts. */
.tlc-ir .tlc-ir-lower { grid-template-columns: minmax(0, 1fr) !important; }

@container tlc (min-width: 900px) {
	.tlc-ir .tlc-ir-lower .tlc-method { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2rem; }
	.tlc-ir .tlc-ir-lower .tlc-method__block + .tlc-method__block { padding-top: 0; border-top: 0; }
}

/* ---------------- Narrow layouts ---------------- */
@container tlc (max-width: 640px) {
	.tlc-ir .tlc-ir-hero { padding-bottom: 1rem; }
	.tlc-ir .tlc-ir-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tlc-ir .tlc-ir-tab {
		justify-content: center;
		gap: .45rem;
		padding: .6rem .5rem;
		border-bottom: 1px solid var(--tlc-border);
		border-radius: 12px;
		font-size: .9375rem;
		text-align: center;
	}
	.tlc-ir .tlc-ir-highlight { padding: .9rem 1rem; }
	.tlc-ir .tlc-ir-highlight__icon svg { width: 38px; height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
	.tlc-ir .tlc-ir-comp__seg,
	.tlc-ir .tlc-ir-tab { transition: none; }
}