/*
 * Costs and tax, v22.0.
 *
 * Follows the rules the design review set: one bordered container level,
 * three type weights, colour only where it means something, and no gradient
 * hero carrying a greeting.
 */

.evtaxuk-tax{
	max-width:1380px;
	margin:16px auto;
	font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
	color:var(--evtaxuk-navy);
}
.evtaxuk-tax *{box-sizing:border-box}

.evtaxuk-tax__intro{margin:0 0 18px}
.evtaxuk-tax__intro > p:first-child{
	margin:0;
	color:var(--evtaxuk-muted);
	font-size:.75rem;
	font-weight:600;
	letter-spacing:.06em;
	text-transform:uppercase;
}
.evtaxuk-tax__intro h2{margin:6px 0 8px;font-size:1.75rem;font-weight:650}
.evtaxuk-tax__lede{margin:0;max-width:62ch;color:var(--evtaxuk-muted);line-height:1.6}

/* Only shown when the rates are genuinely overdue a check. */
.evtaxuk-tax__stale{
	margin:0 0 16px;
	padding:12px 16px;
	border:1px solid var(--evtaxuk-amber);
	border-left-width:4px;
	border-radius:var(--evtaxuk-radius-sm);
	background:#fffbeb;
	line-height:1.55;
}

.evtaxuk-tax__panel{
	padding:20px 22px;
	border:1px solid var(--evtaxuk-border);
	border-radius:var(--evtaxuk-radius);
	background:#fff;
	box-shadow:0 1px 2px rgba(15,23,42,.05);
}
.evtaxuk-tax__panel.is-headline{
	border-left:4px solid var(--evtaxuk-blue-2);
	margin-bottom:16px;
}
.evtaxuk-tax__label{
	display:block;
	color:var(--evtaxuk-muted);
	font-size:.72rem;
	font-weight:600;
	letter-spacing:.06em;
	text-transform:uppercase;
}
.evtaxuk-tax__panel h3{margin:6px 0 12px;font-size:1.15rem;font-weight:650}
.evtaxuk-tax__panel p{margin:0 0 12px;line-height:1.6;max-width:62ch}
.evtaxuk-tax__panel p:last-of-type{margin-bottom:0}

.evtaxuk-tax__figure{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline}
.evtaxuk-tax__figure strong{font-size:2rem;font-weight:650;line-height:1.1}
.evtaxuk-tax__figure small{color:var(--evtaxuk-muted)}

.evtaxuk-tax__caveat{
	padding-left:12px;
	border-left:3px solid var(--evtaxuk-amber);
	color:var(--evtaxuk-muted);
	font-size:.88rem;
}
.evtaxuk-tax__aside{color:var(--evtaxuk-muted);font-size:.88rem}

.evtaxuk-tax__source{
	display:inline-block;
	margin-top:12px;
	color:var(--evtaxuk-blue-2);
	font-size:.85rem;
	font-weight:600;
}

.evtaxuk-tax__grid{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
	gap:16px;
}

/* A table inside a panel gets dividers, not another border. */
.evtaxuk-tax__table{width:100%;margin:0 0 12px;border-collapse:collapse;font-size:.9rem}
.evtaxuk-tax__table caption{
	padding:0 0 6px;
	color:var(--evtaxuk-muted);
	font-size:.75rem;
	font-weight:600;
	letter-spacing:.05em;
	text-align:left;
	text-transform:uppercase;
}
.evtaxuk-tax__table th,
.evtaxuk-tax__table td{
	padding:6px 0;
	border-bottom:1px solid var(--evtaxuk-border);
	text-align:left;
	font-weight:400;
}
.evtaxuk-tax__table tr:last-child th,
.evtaxuk-tax__table tr:last-child td{border-bottom:0}
.evtaxuk-tax__table tr.is-now th,
.evtaxuk-tax__table tr.is-now td{font-weight:650}

.evtaxuk-tax__footer{
	margin:18px 0 0;
	max-width:70ch;
	color:var(--evtaxuk-muted);
	font-size:.85rem;
	line-height:1.6;
}
.evtaxuk-tax__signin{
	max-width:760px;
	margin:30px auto;
	padding:22px;
	border-radius:var(--evtaxuk-radius);
	background:var(--evtaxuk-surface-soft);
	text-align:center;
}

@media(max-width:650px){
	.evtaxuk-tax__figure strong{font-size:1.6rem}
}

/* ---------------------------------------------------------------------
 * The public per-mile calculator, v22.1.
 *
 * Deliberately plainer than the portal: this is the first thing a stranger
 * sees, so it should look like a tool rather than a product tour.
 * ------------------------------------------------------------------ */
.evtaxuk-eved{
	max-width:720px;
	margin:24px auto;
	padding:24px 26px;
	border:1px solid var(--evtaxuk-border,#e2e8f0);
	border-left:4px solid var(--evtaxuk-blue-2,#2563eb);
	border-radius:var(--evtaxuk-radius,14px);
	background:#fff;
	font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
	color:var(--evtaxuk-navy,#0f172a);
}
.evtaxuk-eved *{box-sizing:border-box}
.evtaxuk-eved__head h2{margin:6px 0 10px;font-size:1.5rem;font-weight:650;line-height:1.25}
.evtaxuk-eved p{margin:0 0 14px;line-height:1.6}
.evtaxuk-eved p:last-child{margin-bottom:0}

.evtaxuk-eved__form{
	display:flex;
	flex-wrap:wrap;
	gap:14px 20px;
	align-items:flex-end;
	margin:18px 0;
	padding:16px 18px;
	border-radius:var(--evtaxuk-radius-sm,10px);
	background:var(--evtaxuk-surface-soft,#f8fafc);
}
.evtaxuk-eved__form > label{
	display:block;
	font-size:.8rem;
	font-weight:600;
	color:var(--evtaxuk-muted,#64748b);
}
.evtaxuk-eved__form input[type=number]{
	display:block;
	width:9em;
	margin-top:6px;
	padding:10px 12px;
	border:1px solid var(--evtaxuk-border,#e2e8f0);
	border-radius:var(--evtaxuk-radius-sm,10px);
	background:#fff;
	font:inherit;
	font-size:1.1rem;
	font-weight:650;
}
.evtaxuk-eved__type{margin:0;padding:0;border:0}
.evtaxuk-eved__type legend{
	padding:0 0 6px;
	font-size:.8rem;
	font-weight:600;
	color:var(--evtaxuk-muted,#64748b);
}
.evtaxuk-eved__type label{
	display:inline-flex;
	gap:6px;
	align-items:center;
	margin-right:14px;
	font-size:.95rem;
}

.evtaxuk-eved__result{display:block;margin:0 0 14px}
.evtaxuk-eved__figure{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;margin:0 0 8px}
.evtaxuk-eved__figure strong{font-size:2.25rem;font-weight:650;line-height:1.1}
.evtaxuk-eved__figure small{color:var(--evtaxuk-muted,#64748b)}

.evtaxuk-eved__measured{
	padding-left:12px;
	border-left:3px solid var(--evtaxuk-green,#16a34a);
	color:var(--evtaxuk-muted,#64748b);
	font-size:.88rem;
}
.evtaxuk-eved__unknown{
	padding:12px 14px;
	border-radius:var(--evtaxuk-radius-sm,10px);
	background:var(--evtaxuk-surface-soft,#f8fafc);
	font-size:.9rem;
}
.evtaxuk-eved__source{font-size:.82rem}
.evtaxuk-eved__source a{color:var(--evtaxuk-blue-2,#2563eb);font-weight:600}

@media(max-width:560px){
	.evtaxuk-eved{padding:20px 18px}
	.evtaxuk-eved__figure strong{font-size:1.8rem}
	.evtaxuk-eved__form input[type=number]{width:100%}
}

/* The mechanism, added v22.2 when the scheme was confirmed. The rate is the
 * headline; how you actually pay it is what people cannot find elsewhere. */
.evtaxuk-eved__mechanism{
	padding:12px 14px;
	border-radius:var(--evtaxuk-radius-sm,10px);
	background:var(--evtaxuk-surface-soft,#f8fafc);
	font-size:.9rem;
	line-height:1.6;
}