/*
 * Tuottolaskuri Core – Sähköauton kannattavuuslaskuri: calculation-mode selector and mode 2 (purchase).
 * Builds on tlc-core and tlc-sahkoauto (group, card and result styles); only the new parts are here.
 */

/* ---------------- Mode selector ---------------- */
.tlc-ev .tlc-ev-modes { margin: 0 0 var(--tlc-gap, 1.25rem); }
.tlc-ev .tlc-ev-modes__title { margin: 0 0 .75rem; color: var(--tlc-navy); font-size: 1.25rem; line-height: 1.3; }
.tlc-ev .tlc-ev-modes__grid { display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr); }
@container tlc (min-width: 900px) {
	.tlc-ev .tlc-ev-modes__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.tlc-ev .tlc-ev-mode__title, .tlc-ev .tlc-ev-mode__desc { overflow-wrap: break-word; hyphens: auto; }
/* The mode-1 tabs moved out of the hero (0.11.0); keep the tablet hero at its previous height so the
   approved image crop stays the same. Desktop already has its own minimum height. */
@container tlc (min-width: 641px) and (max-width: 899px) {
	.tlc-root.tlc-ev > .tlc-ev-hero { min-height: 202px; }
}
.tlc-ev .tlc-ev-mode {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
	width: 100%;
	min-height: 100%;
	margin: 0;
	padding: .9rem 1rem;
	border: 1.5px solid var(--tlc-border, #d7e2f0);
	border-radius: 14px;
	background: #fff;
	color: var(--tlc-text, #17365d);
	font: inherit;
	text-align: left;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(23, 54, 93, .05);
	transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.tlc-ev .tlc-ev-mode:hover { border-color: #9cbdeb; }
.tlc-ev .tlc-ev-mode:focus-visible { outline: 3px solid var(--tlc-primary, #1769dd); outline-offset: 2px; }
.tlc-ev .tlc-ev-mode[aria-checked="true"] { border-color: var(--tlc-primary, #1769dd); background: #f2f7fe; box-shadow: 0 0 0 2px rgba(23, 105, 221, .14); }
.tlc-ev .tlc-ev-mode.is-upcoming { cursor: default; background: #f7f9fc; color: var(--tlc-muted-strong, #52627a); box-shadow: none; }
.tlc-ev .tlc-ev-mode.is-upcoming:hover { border-color: var(--tlc-border, #d7e2f0); }
.tlc-ev .tlc-ev-mode__icon { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #e6effc; color: var(--tlc-primary, #1769dd); }
.tlc-ev .tlc-ev-mode.is-upcoming .tlc-ev-mode__icon { background: #edf1f6; color: #7b8ba3; }
.tlc-ev .tlc-ev-mode__text { display: grid; gap: .25rem; min-width: 0; }
.tlc-ev .tlc-ev-mode__title { font-weight: 800; font-size: 1rem; line-height: 1.3; color: var(--tlc-navy, #17365d); }
.tlc-ev .tlc-ev-mode.is-upcoming .tlc-ev-mode__title { color: var(--tlc-muted-strong, #52627a); }
.tlc-ev .tlc-ev-mode__desc { font-size: .875rem; line-height: 1.45; color: var(--tlc-muted-strong, #52627a); }
.tlc-ev .tlc-ev-mode__badge { display: inline-block; margin-left: .4rem; padding: 0 .45rem; border-radius: 999px; background: #fff3db; color: #7a4d00; font-size: .75rem; font-weight: 700; vertical-align: .1em; white-space: nowrap; }
.tlc-ev .tlc-ev-modes__note { margin: .6rem 0 0; padding: .55rem .8rem; border-radius: 10px; background: #fff7e6; color: #6b4300; font-size: .875rem; }
.tlc-ev .tlc-ev-modes__note[hidden], .tlc-ev .tlc-ev-modepanel[hidden] { display: none; }
/* Mode-1 sub-tabs (Yksi auto / Kahden auton talous) inside mode 1, above the inputs. */
.tlc-ev .tlc-ev-tabs--mode { margin: 0 0 var(--tlc-gap, 1.25rem); }

/* ---------------- Mode 2 ---------------- */
.tlc-ev .tlc-evb-advnote { margin: 0 0 .75rem; color: var(--tlc-muted-strong, #52627a); font-size: .875rem; }
.tlc-ev .tlc-evb-kpis { display: grid; gap: .6rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 1rem 0; }
@container tlc (min-width: 1100px) {
	.tlc-ev .tlc-evb-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.tlc-ev .tlc-evb-kpi { padding: .75rem .85rem; border: 1px solid var(--tlc-border, #d7e2f0); border-radius: 12px; background: #fff; min-width: 0; }
.tlc-ev .tlc-evb-kpi p { margin: 0; }
.tlc-ev .tlc-evb-kpi__label { font-size: .8125rem; color: var(--tlc-muted-strong, #52627a); }
.tlc-ev .tlc-evb-kpi__value { font-size: 1.25rem; font-weight: 800; color: var(--tlc-navy, #17365d); overflow-wrap: anywhere; }
.tlc-ev .tlc-evb-kpi__sub { font-size: .8125rem; color: var(--tlc-muted, #6b7a90); }
.tlc-ev .tlc-evb-title { margin: 1.4rem 0 .5rem; font-size: 1rem; color: var(--tlc-navy, #17365d); }
.tlc-ev .tlc-evb-scenlist, .tlc-ev .tlc-evb-loanlist { margin: .4rem 0; padding: 0; list-style: none; display: grid; gap: .35rem; font-size: .9063rem; }
.tlc-ev .tlc-evb-scenlist li { display: flex; flex-wrap: wrap; gap: .15rem .6rem; padding: .5rem .7rem; border-radius: 10px; background: #f4f8fe; }
.tlc-ev .tlc-evb-scenlist li.is-base { background: #e6effc; }
.tlc-ev .tlc-evb-loanlist li::before { content: "• "; color: var(--tlc-primary, #1769dd); }
.tlc-ev .tlc-evb-loantitle { margin: .8rem 0 .2rem; font-weight: 800; color: var(--tlc-navy, #17365d); }
.tlc-ev .tlc-evb-bar { display: grid; grid-template-columns: minmax(7.5rem, 11rem) minmax(0, 1fr) auto; align-items: center; gap: .6rem; margin: .35rem 0; font-size: .875rem; }
.tlc-ev .tlc-evb-bar__label { color: var(--tlc-text, #17365d); }
.tlc-ev .tlc-evb-bar__track { height: 12px; border-radius: 6px; background: #eef3fa; overflow: hidden; }
.tlc-ev .tlc-evb-bar__fill { display: block; height: 100%; border-radius: 6px; background: #1769dd; }
.tlc-ev .tlc-evb-bar__fill--energy { background: #20a995; }
.tlc-ev .tlc-evb-bar__fill--financing { background: #d9534f; }
.tlc-ev .tlc-evb-bar__fill--charger { background: #e07a1f; }
.tlc-ev .tlc-evb-bar__fill--insurance, .tlc-ev .tlc-evb-bar__fill--tax, .tlc-ev .tlc-evb-bar__fill--maintenance, .tlc-ev .tlc-evb-bar__fill--tyres, .tlc-ev .tlc-evb-bar__fill--other { background: #9b8ae6; }
.tlc-ev .tlc-evb-bar__value { font-weight: 700; white-space: nowrap; }
@container tlc (max-width: 520px) {
	.tlc-ev .tlc-evb-bar { grid-template-columns: minmax(0, 1fr) auto; }
	.tlc-ev .tlc-evb-bar__track { grid-column: 1 / -1; grid-row: 2; }
}
.tlc-ev .tlc-evb-cashlist { margin: .5rem 0 0; display: grid; gap: .5rem; }
.tlc-ev .tlc-evb-cashrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .1rem .75rem; padding: .55rem .7rem; border-radius: 10px; background: #f4f8fe; }
.tlc-ev .tlc-evb-cashrow dt { font-weight: 700; color: var(--tlc-navy, #17365d); }
.tlc-ev .tlc-evb-cashrow dd { margin: 0; font-weight: 800; text-align: right; white-space: nowrap; }
.tlc-ev .tlc-evb-cashrow .tlc-evb-cashrow__sub { grid-column: 1 / -1; text-align: left; white-space: normal; font-weight: 400; font-size: .8125rem; color: var(--tlc-muted-strong, #52627a); }
.tlc-ev .tlc-evb-repair[hidden], .tlc-ev .tlc-evb-warnings[hidden] { display: none; }
.tlc-ev .tlc-evb-results.is-stale .tlc-evb-highlight,
.tlc-ev .tlc-evb-results.is-stale .tlc-evb-kpis,
.tlc-ev .tlc-evb-results.is-stale .tlc-evb-scenarios,
.tlc-ev .tlc-evb-results.is-stale .tlc-evb-breakdown,
.tlc-ev .tlc-evb-results.is-stale .tlc-evb-cash { opacity: .45; }

/* Links in help texts (e.g. Traficom's vehicle tax calculator) in the Modern Blue link colour. */
.tlc-ev .tlc-evb-panel .tlc-help a, .tlc-ev .tlc-evc-panel .tlc-help a { color: var(--tlc-primary, #1769dd); text-decoration: underline; text-underline-offset: 2px; }
.tlc-ev .tlc-evb-panel .tlc-help a:hover, .tlc-ev .tlc-evc-panel .tlc-help a:hover { color: var(--tlc-primary-dark, #0f55b8); }

/* Estimated loan instalment (all three modes; 0.11.0). */
.tlc-ev .tlc-evp:empty, .tlc-ev .tlc-evp[hidden] { display: none; }
.tlc-ev .tlc-evp { padding: .7rem .85rem; border: 1px solid #cfe0f6; border-radius: 12px; background: #f2f7fe; }
.tlc-ev .tlc-evp p { margin: 0; }
.tlc-ev .tlc-evp__title { font-size: .8125rem; font-weight: 700; color: var(--tlc-muted-strong, #52627a); }
.tlc-ev .tlc-evp__row { margin-top: .15rem !important; font-size: .9063rem; color: var(--tlc-navy, #17365d); overflow-wrap: anywhere; }
.tlc-ev .tlc-evp__value { font-size: 1.25rem; font-weight: 800; }
.tlc-ev .tlc-evp__row.is-invalid { color: #8a2d1c; }
.tlc-ev .tlc-evp__note { margin-top: .35rem !important; font-size: .8125rem; color: var(--tlc-muted, #6b7a90); }

/* ---------------- Mode 3: comparison ---------------- */
/* Car A uses the chart's first series colour (teal), car B the second (blue), everywhere in mode 3. */
.tlc-ev .tlc-evc-main { display: grid; gap: var(--tlc-gap, 1.25rem); min-width: 0; }
.tlc-ev .tlc-evc-main > * { min-width: 0; }
.tlc-ev .tlc-evc-sharedgrid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.tlc-ev .tlc-evc-cars { display: grid; gap: var(--tlc-gap, 1.25rem); grid-template-columns: minmax(0, 1fr); align-items: start; }
@container tlc (min-width: 900px) {
	.tlc-ev .tlc-evc-sharedgrid, .tlc-ev .tlc-evc-cars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.tlc-ev .tlc-evc-car { min-width: 0; }
.tlc-ev .tlc-evc-car__badge { display: inline-grid; place-items: center; min-width: 2rem; height: 2rem; padding: 0 .55rem; border-radius: 999px; background: var(--tlc-ir-a-line, #20a995); color: #fff; font-size: .9375rem; }
.tlc-ev .tlc-evc-car--cb .tlc-evc-car__badge { background: var(--tlc-ir-b, #1769dd); }
.tlc-ev .tlc-evc-cards { display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr); margin: 1rem 0; }
@container tlc (min-width: 640px) {
	.tlc-ev .tlc-evc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.tlc-ev .tlc-evc-card { padding: .9rem 1rem; border: 1.5px solid var(--tlc-border, #d7e2f0); border-radius: 14px; background: #fff; min-width: 0; }
.tlc-ev .tlc-evc-card.is-best { border-color: #0e7c6b; box-shadow: 0 0 0 2px rgba(14, 124, 107, .15); }
.tlc-ev .tlc-evc-card p { margin: 0; }
.tlc-ev .tlc-evc-card__name { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-weight: 800; color: var(--tlc-navy, #17365d); overflow-wrap: anywhere; }
.tlc-ev .tlc-evc-card__badge { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--tlc-ir-a-line, #20a995); color: #fff; font-size: .8125rem; }
.tlc-ev .tlc-evc-card[data-tlb-card="B"] .tlc-evc-card__badge { background: var(--tlc-ir-b, #1769dd); }
.tlc-ev .tlc-evc-card__tag { padding: 0 .5rem; border-radius: 999px; background: #e5f5f0; color: #0e7c6b; font-size: .75rem; }
.tlc-ev .tlc-evc-card__meta, .tlc-ev .tlc-evc-card__sub, .tlc-ev .tlc-evc-card__label { font-size: .8438rem; color: var(--tlc-muted-strong, #52627a); }
.tlc-ev .tlc-evc-card__value { margin: .15rem 0 !important; font-size: 1.5rem; font-weight: 800; color: var(--tlc-navy, #17365d); }
.tlc-ev .tlc-evc-diff { grid-column: 1 / -1; margin: 0; padding: .55rem .8rem; border-radius: 10px; background: #f4f8fe; font-weight: 700; color: var(--tlc-navy, #17365d); }
.tlc-ev .tlc-evc-ranknote { margin: 0 0 1rem; padding: .6rem .8rem; border-radius: 10px; background: #fff7e6; border: 1px solid #f3d9a4; color: #6b4300; font-size: .875rem; }
.tlc-ev .tlc-evc-ranknote[hidden], .tlc-ev .tlc-evc-section[hidden] { display: none; }
.tlc-ev .tlc-evc-section { margin-top: .5rem; }
.tlc-ev .tlc-evc-legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; padding: 0; margin: .2rem 0 .6rem; list-style: none; font-size: .8125rem; }
.tlc-ev .tlc-evc-legend .tlc-legend__item::before { width: 12px; height: 12px; border-radius: 3px; }
.tlc-ev .tlc-evc-legend--a::before { background: var(--tlc-ir-a-line, #20a995); }
.tlc-ev .tlc-evc-legend--b::before { background: var(--tlc-ir-b, #1769dd); }
.tlc-ev .tlc-evc-bar { display: grid; grid-template-columns: minmax(7rem, 10rem) minmax(0, 1fr); gap: .6rem; align-items: center; margin: .45rem 0; font-size: .875rem; }
.tlc-ev .tlc-evc-bar__pair { display: grid; gap: .2rem; min-width: 0; }
.tlc-ev .tlc-evc-bar__line { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr) auto; gap: .45rem; align-items: center; }
.tlc-ev .tlc-evc-bar__who { font-size: .75rem; font-weight: 800; color: var(--tlc-muted-strong, #52627a); }
.tlc-ev .tlc-evc-fill--a { background: var(--tlc-ir-a-line, #20a995); }
.tlc-ev .tlc-evc-fill--b { background: var(--tlc-ir-b, #1769dd); }
@container tlc (max-width: 520px) {
	.tlc-ev .tlc-evc-bar { grid-template-columns: minmax(0, 1fr); }
}
.tlc-ev .tlc-evc-breakeven { margin: .6rem 0 0; padding: .55rem .8rem; border-radius: 10px; background: #f4f8fe; font-size: .9063rem; }
.tlc-ev .tlc-evc-results.is-stale .tlc-evc-highlight,
.tlc-ev .tlc-evc-results.is-stale .tlc-evc-cards,
.tlc-ev .tlc-evc-results.is-stale .tlc-evc-section { opacity: .45; }
/* Compare bars keep "A/B – bar – value" on one line also on narrow screens. */
.tlc-ev .tlc-evc-bar__line .tlc-evb-bar__track { grid-column: auto; grid-row: auto; }

/* ---------------- Print report of modes 2 and 3 (shared A4 system: tlc-print.js / tlc-print.css) ---------------- */
@media print {
	.tlc-evr .tlc-report__card-name, .tlc-evr p, .tlc-evr li { overflow-wrap: anywhere; }
	.tlc-evr td, .tlc-evr th { overflow-wrap: break-word; }
	.tlc-evr .tlc-report__table { table-layout: auto; }
	.tlc-evr .tlc-report__table thead th { white-space: normal; overflow-wrap: break-word; font-size: 8pt; }
	.tlc-evr .tlc-report__table thead th:first-child, .tlc-evr .tlc-report__table tbody th { min-width: 12mm; }
	.tlc-evr .tlc-report__table th, .tlc-evr .tlc-report__table td { padding: 1mm 1.4mm; }
	.tlc-evr .tlc-evr-inputs--cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 5mm; align-items: start; }
	.tlc-evr .tlc-evr-inputs--cols > h3 { grid-column: 1 / -1; }
	.tlc-evr .tlc-evr-group { margin: 1.6mm 0 .6mm; font-weight: 700; font-size: 9pt; color: #2a4365; }
	/* Compact but readable (≥ 8.5 pt): input tables and section spacing of the mode 2/3 reports. */
	.tlc-evr h2 { margin: 4.5mm 0 2mm; }
	.tlc-evr .tlc-evr-inputs .tlc-report__kv th, .tlc-evr .tlc-evr-inputs .tlc-report__kv td { padding: .65mm 1.4mm; }
	.tlc-evr .tlc-report__figure { margin: 1.5mm 0 2.5mm; }
	.tlc-evr p, .tlc-evr li { orphans: 3; widows: 3; }
	.tlc-evr .tlc-report__foot { break-before: avoid; page-break-before: avoid; margin-top: 4mm; }
	/* Sections may continue on the next page; their figures and short tables stay whole, and a heading
	   always stays with what follows it. */
	.tlc-evr .tlc-evr-keep, .tlc-evr .tlc-report__figure, .tlc-evr .tlc-report__kv { break-inside: avoid; page-break-inside: avoid; }
	.tlc-evr h2, .tlc-evr h3 { break-after: avoid; page-break-after: avoid; }
	.tlc-evr .tlc-evr-inputs h3 { margin-top: 2mm; }
	.tlc-evr .tlc-report__inputs { align-items: start; }
	.tlc-evr .tlc-evr-question { display: block; font-size: 9pt; color: #2a4365; }
	.tlc-evr .tlc-evr-badge { display: inline-block; min-width: 5mm; padding: 0 1.2mm; border-radius: 2.5mm; color: #fff; font-size: 8.5pt; text-align: center; }
	.tlc-evr .tlc-evr-badge--a { background: #20a995; }
	.tlc-evr .tlc-evr-badge--b { background: #1769dd; }
	.tlc-evr .tlc-evr-card--a { border-left: 1.2mm solid #20a995; }
	.tlc-evr .tlc-evr-card--b { border-left: 1.2mm solid #1769dd; }
	.tlc-evr .tlc-evr-card.is-best { background: #f0faf7; }
	.tlc-evr .tlc-evr-diff { margin-top: 2.5mm; padding: 2mm 3mm; border-radius: 2mm; background: #f1f6fd; font-weight: 700; }
	.tlc-evr .tlc-evr-note { padding: 2mm 3mm; border-radius: 2mm; background: #fff7e6; border: .3mm solid #f3d9a4; color: #6b4300; }
}