/*
 * Tuottolaskuri Core – Sähköautolaskuri.
 * Builds on the shared tabbed-calculator styles (tlc-core, investment return … loan); only EV-specific parts here.
 */

/* Input groups */
.tlc-ev .tlc-ev-intro { margin: 0 0 1rem; color: var(--tlc-muted-strong); font-size: .9375rem; }
.tlc-ev .tlc-ev-group {
	margin: 0 0 1rem;
	padding: 0 1rem 1rem;
	border: 1px solid #dbe6f5;
	border-radius: 14px;
	background: #fbfdff;
	min-width: 0;
}
.tlc-ev .tlc-ev-group[hidden] { display: none; }
.tlc-ev .tlc-ev-group__title {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0 0 .85rem -.25rem;
	padding: .35rem .75rem .35rem .5rem;
	border-radius: 10px;
	background: var(--tlc-primary-soft);
	color: var(--tlc-navy);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
}
.tlc-ev .tlc-ev-group__title svg { flex: none; color: var(--tlc-primary); }
.tlc-ev .tlc-ev-group--scenario .tlc-ev-group__title { background: #e5f5f0; }
.tlc-ev .tlc-ev-group--scenario .tlc-ev-group__title svg { color: var(--tlc-positive-text); }
.tlc-ev .tlc-ev-group__grid { display: grid; gap: .75rem 1rem; align-items: start; }
.tlc-ev .tlc-ev-group__grid > [hidden] { display: none; }
.tlc-ev .tlc-ev-span,
.tlc-ev .tlc-ev-group__grid > .tlc-field--slider { grid-column: 1 / -1; }
.tlc-ev .tlc-mach-select { width: 100%; }
.tlc-ev .tlc-help { margin-top: .3rem; }

@container tlc-settings (min-width: 400px) {
	.tlc-ev .tlc-ev-group__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.tlc-ev .tlc-ev-subhead {
	margin: .5rem 0 0;
	padding-top: .75rem;
	border-top: 1px solid var(--tlc-border);
	color: var(--tlc-navy);
	font-weight: 700;
}
.tlc-ev .tlc-ev-subhead:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.tlc-ev .tlc-ev-note,
.tlc-ev .tlc-ev-split {
	margin: 0;
	padding: .6rem .8rem;
	border-radius: 10px;
	background: #f1f6fd;
	color: var(--tlc-text);
	font-size: .9063rem;
	line-height: 1.5;
}
.tlc-ev .tlc-ev-note:empty,
.tlc-ev .tlc-ev-split:empty { display: none; }
.tlc-ev .tlc-ev-split { font-weight: 600; color: var(--tlc-navy); }

/* Advanced settings */
.tlc-ev .tlc-ev-advanced { margin-top: .25rem; border-top: 1px solid var(--tlc-border); padding-top: .5rem; }
.tlc-ev .tlc-ev-advanced__toggle { font-size: 1rem; font-weight: 700; }
.tlc-ev .tlc-ev-advanced__panel { padding-top: .75rem; }
.tlc-ev .tlc-ev-group--advanced .tlc-ev-group__title { display: none; }
.tlc-ev .tlc-ev-group--advanced { padding-top: 1rem; }

/* Results */
.tlc-ev .tlc-ev-results.is-stale .tlc-ev-highlight,
.tlc-ev .tlc-ev-results.is-stale .tlc-ev-cards,
.tlc-ev .tlc-ev-results.is-stale .tlc-ev-bars,
.tlc-ev .tlc-ev-results.is-stale .tlc-ev-chart,
.tlc-ev .tlc-ev-results.is-stale .tlc-ev-payback { opacity: .45; }
.tlc-ev .tlc-ev-errors {
	margin: 0 0 1rem;
	padding: .85rem 1rem;
	border: 1px solid #f3c7c2;
	border-radius: 12px;
	background: #fef3f2;
	color: var(--tlc-negative-text);
}
.tlc-ev .tlc-ev-errors[hidden] { display: none; }
.tlc-ev .tlc-ev-errors__title { margin: 0 0 .35rem; font-weight: 700; }
.tlc-ev .tlc-ev-errors__list { margin: 0; padding-left: 1.1rem; }
.tlc-ev .tlc-ev-errors__list .tlc-link-button { color: var(--tlc-negative-text); text-align: left; }

.tlc-ev .tlc-ev-cards { display: grid; gap: .75rem; margin: 1rem 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.tlc-ev .tlc-ev-card {
	padding: .9rem 1rem;
	border: 1px solid var(--tlc-border);
	border-radius: 14px;
	background: #fff;
	min-width: 0;
}
.tlc-ev .tlc-ev-card.is-baseline { background: #f7f9fc; }
.tlc-ev .tlc-ev-card > p { margin: 0; }
.tlc-ev .tlc-ev-card__name { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; font-weight: 700; color: var(--tlc-navy); }
.tlc-ev .tlc-ev-card__tag { padding: .05rem .45rem; border-radius: 6px; background: #e7edf5; color: var(--tlc-muted-strong); font-size: .75rem; font-weight: 600; }
.tlc-ev .tlc-ev-card__label { margin-top: .5rem !important; color: var(--tlc-muted-strong); font-size: .8125rem; }
.tlc-ev .tlc-ev-card__value { font-size: clamp(1.375rem, 1.2rem + .6vw, 1.625rem); font-weight: 800; color: var(--tlc-navy); letter-spacing: -.01em; }
.tlc-ev .tlc-ev-card__sub { color: var(--tlc-muted-strong); font-size: .875rem; }
.tlc-ev .tlc-ev-card__diff { margin-top: .4rem !important; font-weight: 700; font-size: .9375rem; }
.tlc-ev .tlc-ev-card__diff.is-positive { color: var(--tlc-positive-text); }
.tlc-ev .tlc-ev-card__diff.is-negative { color: var(--tlc-negative-text); }
.tlc-ev .tlc-ev-card__km { margin-top: .4rem !important; color: var(--tlc-text); font-size: .875rem; }
.tlc-ev .tlc-ev-card__kmchange { color: #9a5b00; font-size: .8125rem; font-weight: 600; }

/* Stacked cost bars */
.tlc-ev .tlc-ev-bars { margin: 1.25rem 0; }
.tlc-ev .tlc-ev-bars__plot { width: 100%; overflow: hidden; }
.tlc-ev .tlc-ev-bars__svg { display: block; max-width: 100%; height: auto; }
.tlc-ev .tlc-ev-bars__label { fill: var(--tlc-navy); font-size: 13px; font-weight: 600; }
.tlc-ev .tlc-ev-bars__value { fill: var(--tlc-navy); font-size: 13px; font-weight: 700; }
.tlc-ev .tlc-ev-seg--depreciation { fill: #1769dd; }
.tlc-ev .tlc-ev-seg--energy { fill: #20a995; }
.tlc-ev .tlc-ev-seg--tax { fill: #8fb8f2; }
.tlc-ev .tlc-ev-seg--insurance { fill: #f0a35e; }
.tlc-ev .tlc-ev-seg--maintenance { fill: #9b8ae6; }
.tlc-ev .tlc-ev-seg--financing { fill: #d9534f; }
.tlc-ev .tlc-ev-seg--charger { fill: #17365d; }
.tlc-ev .tlc-ev-bars__legend { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin: .5rem 0 0; padding: 0; list-style: none; }
.tlc-ev .tlc-ev-legend { display: inline-flex; align-items: center; gap: .4rem; font-size: .8125rem; color: var(--tlc-text); }
.tlc-ev .tlc-ev-legend::before { content: ""; width: 12px; height: 12px; border-radius: 3px; background: currentColor; }
.tlc-ev .tlc-ev-legend--depreciation::before { background: #1769dd; }
.tlc-ev .tlc-ev-legend--energy::before { background: #20a995; }
.tlc-ev .tlc-ev-legend--tax::before { background: #8fb8f2; }
.tlc-ev .tlc-ev-legend--insurance::before { background: #f0a35e; }
.tlc-ev .tlc-ev-legend--maintenance::before { background: #9b8ae6; }
.tlc-ev .tlc-ev-legend--financing::before { background: #d9534f; }
.tlc-ev .tlc-ev-legend--charger::before { background: #17365d; }
.tlc-ev .tlc-ev-small { margin: .35rem 0 0; color: var(--tlc-muted-strong); font-size: .8438rem; line-height: 1.5; }

/* Scenario picker for the line chart */
.tlc-ev .tlc-ev-pick { display: flex; flex-wrap: wrap; gap: .4rem; margin: .25rem 0 .75rem; }
.tlc-ev .tlc-ev-pick[hidden] { display: none; }
.tlc-ev .tlc-ev-pick__btn {
	min-height: 40px;
	padding: .35rem .85rem;
	border: 1px solid var(--tlc-border-strong);
	border-radius: 999px;
	background: #fff;
	color: var(--tlc-navy);
	font: inherit;
	font-size: .875rem;
	font-weight: 600;
	cursor: pointer;
}
.tlc-ev .tlc-ev-pick__btn[aria-checked="true"] { border-color: var(--tlc-primary); background: var(--tlc-primary); color: #fff; }
.tlc-ev .tlc-ev-pick__btn:focus-visible { outline: 3px solid var(--tlc-primary); outline-offset: 2px; }

/* Payback (separate from TCO) */
.tlc-ev .tlc-ev-payback {
	margin: 1.25rem 0 0;
	padding: 1rem;
	border: 1px dashed #c3d4ec;
	border-radius: 14px;
	background: #fbfdff;
}
.tlc-ev .tlc-ev-payback__title { margin: 0; font-size: 1rem; color: var(--tlc-navy); }
.tlc-ev .tlc-ev-payback__list { display: grid; gap: .75rem; margin-top: .75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.tlc-ev .tlc-ev-payback__item { padding: .75rem .85rem; border-radius: 12px; background: #fff; border: 1px solid var(--tlc-border); }
.tlc-ev .tlc-ev-payback__item > p { margin: 0; }
.tlc-ev .tlc-ev-payback__name { font-weight: 700; color: var(--tlc-navy); }
.tlc-ev .tlc-ev-payback__value { margin-top: .25rem !important; font-size: 1.125rem; font-weight: 800; color: var(--tlc-navy); }
.tlc-ev .tlc-ev-payback__tco { font-weight: 600; }

/* Warnings */
.tlc-ev .tlc-ev-warnings {
	margin: 1rem 0 0;
	padding: .85rem 1rem;
	border: 1px solid #f2d7a6;
	border-radius: 12px;
	background: #fff8eb;
	color: #6b4400;
	font-size: .9063rem;
}
.tlc-ev .tlc-ev-warnings[hidden] { display: none; }
.tlc-ev .tlc-ev-warnings__title { margin: 0 0 .35rem; font-weight: 700; }
.tlc-ev .tlc-ev-warnings ul { margin: 0; padding-left: 1.1rem; }
.tlc-ev .tlc-ev-warnings li + li { margin-top: .3rem; }

/* Tables */
.tlc-ev .tlc-ev-table .tlc-table th.is-num,
.tlc-ev .tlc-ev-table .tlc-table td.is-num { text-align: right; white-space: nowrap; }
.tlc-ev .tlc-ev-table .tlc-table tr.is-total th,
.tlc-ev .tlc-ev-table .tlc-table tr.is-total td { font-weight: 800; background: #f1f6fd; }
.tlc-ev .tlc-ev-table__group { text-align: left; background: #eaf2fd; color: var(--tlc-navy); font-weight: 700; }

/* Jump to results (narrow layouts, where results follow the long form) */
.tlc-ev .tlc-ev-jump {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	width: 100%;
	min-height: 46px;
	margin: 0 0 1rem;
	padding: .55rem 1rem;
	border: 1px solid var(--tlc-primary);
	border-radius: 12px;
	background: var(--tlc-primary-soft);
	color: var(--tlc-primary-dark);
	font-weight: 700;
	text-decoration: none;
}
.tlc-ev .tlc-ev-jump:hover { background: #dbe9fc; }
.tlc-ev .tlc-ev-jump:focus-visible { outline: 3px solid var(--tlc-primary); outline-offset: 2px; }
.tlc-ev .tlc-ev-jump--end { margin: 1rem 0 0; background: var(--tlc-primary); color: #fff; }
.tlc-ev .tlc-ev-jump--end:hover { background: var(--tlc-primary-dark); }
.tlc-ev .tlc-ev-results:focus { outline: none; }
.tlc-ev .tlc-ev-results:focus-visible { outline: 3px solid var(--tlc-primary); outline-offset: 3px; }
@container tlc (min-width: 900px) {
	.tlc-ev .tlc-ev-jump { display: none; }
}

/* Print button */
.tlc-ev .tlc-ev-results__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.tlc-ev .tlc-ev-print {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	min-height: 40px;
	padding: .4rem .9rem;
	border: 1px solid var(--tlc-border-strong);
	border-radius: 10px;
	background: #fff;
	color: var(--tlc-primary-dark);
	font: inherit;
	font-size: .9063rem;
	font-weight: 700;
	cursor: pointer;
}
.tlc-ev .tlc-ev-print:hover:not(:disabled) { border-color: var(--tlc-primary); background: var(--tlc-primary-soft); }
.tlc-ev .tlc-ev-print:focus-visible { outline: 3px solid var(--tlc-primary); outline-offset: 2px; }
.tlc-ev .tlc-ev-print:disabled { opacity: .55; cursor: not-allowed; }
.tlc-ev .tlc-ev-print-help { margin: -.25rem 0 .75rem; }

/* Hero image: keep the charging car and the cable on the driveway in view (the image is 16:9);
 * a shorter bottom fade keeps the cable visible. */
.tlc-ev .tlc-ev-hero .tlc-hero__img { object-position: right 82%; }
@container tlc (min-width: 641px) {
	.tlc-root.tlc-layout-full-hero.tlc-ev > .tlc-hero::after { height: 16%; }
}
/* Very wide heroes show less of the photo's height: keep the roof and the charger in view. */
@container tlc (min-width: 1600px) {
	.tlc-ev .tlc-ev-hero .tlc-hero__img { object-position: right 75%; }
}
/* A light veil behind the hero text keeps the title and introduction readable over the photo. */
@container tlc (min-width: 641px) {
	.tlc-ev .tlc-ev-hero::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		background: linear-gradient(90deg, rgba(246, 249, 253, .9) 0%, rgba(246, 249, 253, .86) 42%, rgba(246, 249, 253, .6) 56%, rgba(246, 249, 253, 0) 72%);
		pointer-events: none;
	}
}
/* Narrow tablets: the text spans most of the width, so the veil reaches further. */
@container tlc (min-width: 641px) and (max-width: 899px) {
	.tlc-ev .tlc-ev-hero::before {
		background: linear-gradient(90deg, rgba(246, 249, 253, .92) 0%, rgba(246, 249, 253, .88) 58%, rgba(246, 249, 253, .62) 80%, rgba(246, 249, 253, .25) 100%);
	}
}