/*!
 * EV Central Matcher styles.
 *
 * Everything is namespaced under .evc- so it cannot collide with the theme.
 * Colours and fonts come from the custom properties below: to rebrand, change
 * those and nothing else. All selectors are scoped inside .evc-shell so theme
 * resets do not leak in either direction.
 */

.evc-matcher-mount {
	/* ---------------------------------------------------------------
	 * EV Central brand palette.
	 * Only these two are brand colours; everything else is derived.
	 * --------------------------------------------------------------- */
	--evc-navy: #134376;        /* EV Central dark blue */
	--evc-sky:  #85c7fb;        /* EV Central light blue */

	/* Derived neutrals, all tinted toward the brand blues so the widget
	   sits with the site rather than beside it. */
	--evc-ink:     #16283C;     /* body text: navy pulled down to read well */
	--evc-paper:   #FFFFFF;
	--evc-wash:    #F1F6FB;
	--evc-wash-2:  #DCE7F2;
	--evc-rule:    #C9D8E7;
	--evc-muted:   #5B7186;
	--evc-bar:     #B4C9DD;     /* a bar that is not the winning one */
	--evc-sky-pale:#E8F4FE;     /* sky at panel strength */

	/* Functional colours, deliberately outside the brand palette so a
	   warning cannot be mistaken for decoration. */
	--evc-warn-bg: #FFF4E0;
	--evc-warn:    #A85D00;
	--evc-danger:  #B3261E;
	--evc-success: #0F7B5A;

	/* ---------------------------------------------------------------
	 * Typography.
	 *
	 * Inherited from the theme by default, so the widget always matches
	 * the site and no extra font is downloaded on an already busy page.
	 * To force a specific face instead, set:
	 *     .evc-matcher-mount { --evc-font: "Open Sans", sans-serif; }
	 *
	 * Figures stay monospaced regardless. Prices, ranges and charge
	 * times sit in columns, and proportional numerals do not line up.
	 * --------------------------------------------------------------- */
	--evc-font: inherit;
	--evc-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	font-family: var(--evc-font);
	color: var(--evc-ink);
	max-width: 760px;
	margin: 2rem auto;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

/* Headings use the body face too. The widget is a tool, not an article,
   so internal consistency beats matching the theme's display font. */
.evc-matcher-mount h2,
.evc-matcher-mount h3,
.evc-matcher-mount h4 {
	font-family: inherit;
}

.evc-matcher-mount *,
.evc-matcher-mount *::before,
.evc-matcher-mount *::after {
	box-sizing: border-box;
}

.evc-shell {
	border: 1px solid var(--evc-rule);
	background: var(--evc-paper);
}

/* ---------- Header ----------
 *
 * White rather than navy, because the EV Central logo is navy and grey and
 * needs a light ground to read on. Reversing the mark out to white would mean
 * altering the brand asset, which is not ours to do. The navy still anchors
 * the widget through the rule beneath, the buttons and the capture panel.
 */

.evc-top {
	padding: 20px 22px 16px;
	background: var(--evc-paper);
	border-bottom: 3px solid var(--evc-navy);
}
.evc-logo {
	display: block;
	width: 170px;
	height: auto;
	margin: 0 0 14px;
}
.evc-kicker {
	display: block;
	font-family: var(--evc-mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--evc-navy);
	font-weight: 700;
	margin-bottom: 10px;
}
.evc-top h2 {
	margin: 0 0 3px;
	font-size: 21px;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--evc-navy);
	line-height: 1.25;
}
.evc-top p {
	margin: 0;
	font-size: 13.5px;
	color: var(--evc-muted);
}

/* ---------- Progress ---------- */

.evc-prog { display: flex; height: 4px; background: var(--evc-wash-2); }
.evc-prog span { flex: 1; background: transparent; transition: background .3s; }
.evc-prog span.on { background: var(--evc-sky); }

/* ---------- Questions ---------- */

.evc-body { padding: 26px 22px; }
.evc-loading { margin: 0; color: var(--evc-muted); font-size: 14px; }

.evc-q { animation: evc-rise .3s ease both; }
@keyframes evc-rise {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.evc-q { animation: none; }
}

.evc-qn {
	font-family: var(--evc-mono);
	font-size: 11px;
	color: var(--evc-muted);
	letter-spacing: .1em;
	text-transform: uppercase;
	margin-bottom: 6px;
}
.evc-q h3 {
	margin: 0 0 4px;
	font-size: 23px;
	font-weight: 600;
	letter-spacing: -.02em;
	color: var(--evc-ink);
}
.evc-sub { margin: 0 0 18px; font-size: 14px; color: var(--evc-muted); }
.evc-lab { font-size: 13px; color: var(--evc-muted); margin: 16px 0 6px; }
.evc-opt-note { font-size: 11.5px; color: var(--evc-muted); opacity: .8; }
.evc-lab:first-child { margin-top: 0; }

.evc-opts { display: grid; gap: 8px; }
.evc-opts.g2 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

.evc-opt {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	text-align: left;
	padding: 13px 15px;
	border: 1px solid var(--evc-rule);
	border-radius: 0;
	background: var(--evc-paper);
	font: inherit;
	font-size: 15px;
	color: var(--evc-ink);
	cursor: pointer;
	transition: border-color .15s, background .15s;
}
.evc-opt:hover { border-color: var(--evc-navy); background: var(--evc-wash); }
.evc-opt:focus-visible { outline: 2px solid var(--evc-sky); outline-offset: 2px; }
.evc-opt.on { border-color: var(--evc-navy); background: var(--evc-navy); color: #fff; }

.evc-rk {
	font-family: var(--evc-mono);
	font-size: 11px;
	font-weight: 600;
	width: 22px;
	height: 22px;
	flex: 0 0 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--evc-rule);
	color: var(--evc-muted);
}
.evc-opt.on .evc-rk {
	background: var(--evc-sky);
	border-color: var(--evc-sky);
	color: var(--evc-navy);
}
.evc-opt.cond .evc-rk { border-style: dashed; }
.evc-tag { margin-left: auto; font-family: var(--evc-mono); font-size: 11px; color: var(--evc-muted); }
.evc-opt.on .evc-tag { color: #B8D4EE; }

.evc-pc { display: flex; gap: 10px; align-items: center; }
.evc-pc input {
	font: inherit;
	font-family: var(--evc-mono);
	font-size: 16px;
	letter-spacing: .1em;
	padding: 13px 15px;
	border: 1px solid var(--evc-rule);
	width: 130px;
	background: var(--evc-paper);
	color: var(--evc-ink);
}
.evc-pc input:focus { outline: 2px solid var(--evc-navy); outline-offset: 1px; border-color: var(--evc-navy); }
.evc-state { font-family: var(--evc-mono); font-size: 13px; color: var(--evc-success); font-weight: 600; }
.evc-err { font-size: 13px; color: var(--evc-danger); margin: 8px 0 0; }

/* ---------- Price range ---------- */

.evc-price { margin-top: 4px; }

.evc-price-vals { display: flex; align-items: flex-end; gap: 12px; }
.evc-price-val { flex: 1 1 0; min-width: 0; }
.evc-price-val label {
	display: block;
	font-family: var(--evc-mono);
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--evc-muted);
	margin-bottom: 4px;
}
.evc-price-val input {
	font: inherit;
	font-family: var(--evc-mono);
	font-size: 17px;
	font-weight: 600;
	padding: 11px 13px;
	border: 1px solid var(--evc-rule);
	background: var(--evc-paper);
	color: var(--evc-ink);
	width: 100%;
}
.evc-price-val input:focus { outline: 2px solid var(--evc-navy); outline-offset: 1px; border-color: var(--evc-navy); }
.evc-price-dash { color: var(--evc-muted); padding-bottom: 14px; font-size: 15px; }

/* Two range inputs stacked on one rail. Each is transparent apart from its
   thumb, so the painted rail and active band show through. */
.evc-slider { position: relative; height: 34px; margin: 22px 0 2px; }
.evc-slider-rail {
	position: absolute;
	left: 0; right: 0; top: 15px;
	height: 4px;
	background: var(--evc-wash-2);
}
.evc-slider-active {
	position: absolute;
	top: 15px;
	height: 4px;
	background: var(--evc-sky);
}
.evc-slider input[type=range] {
	position: absolute;
	left: 0;
	width: 100%;
	top: 0;
	height: 34px;
	margin: 0;
	background: none;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}
.evc-slider input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	pointer-events: auto;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--evc-navy);
	border: 3px solid var(--evc-paper);
	box-shadow: 0 1px 4px rgba(19,67,118,.4);
	cursor: grab;
}
.evc-slider input[type=range]::-webkit-slider-thumb:active { cursor: grabbing; }
.evc-slider input[type=range]::-moz-range-thumb {
	pointer-events: auto;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--evc-navy);
	border: 3px solid var(--evc-paper);
	box-shadow: 0 1px 4px rgba(19,67,118,.4);
	cursor: grab;
}
.evc-slider input[type=range]::-moz-range-track { background: none; border: none; }
.evc-slider input[type=range]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--evc-sky); outline-offset: 2px; }
.evc-slider input[type=range]:focus-visible::-moz-range-thumb { outline: 2px solid var(--evc-sky); outline-offset: 2px; }

.evc-slider-ends {
	display: flex;
	justify-content: space-between;
	font-family: var(--evc-mono);
	font-size: 11px;
	color: var(--evc-muted);
}
.evc-price-count {
	margin: 16px 0 0;
	font-size: 13.5px;
	color: var(--evc-muted);
}
.evc-price-count.none { color: var(--evc-danger); }

.evc-opts.g3 { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
.evc-opt.compact { padding: 11px 12px; font-size: 14px; justify-content: center; text-align: center; }

.evc-nav { display: flex; gap: 10px; margin-top: 22px; align-items: center; }
.evc-btn {
	font: inherit;
	font-weight: 600;
	font-size: 14px;
	padding: 12px 22px;
	border: 1px solid var(--evc-navy);
	border-radius: 0;
	background: var(--evc-navy);
	color: #fff;
	cursor: pointer;
}
.evc-btn:hover { background: #0E3159; }
.evc-btn:disabled { opacity: .4; cursor: not-allowed; }
.evc-btn:focus-visible { outline: 2px solid var(--evc-sky); outline-offset: 2px; }
.evc-btn.ghost { background: transparent; color: var(--evc-muted); border-color: transparent; padding-left: 0; }
.evc-btn.ghost:hover { color: var(--evc-navy); background: transparent; }
.evc-btn.accent { background: var(--evc-sky); border-color: var(--evc-sky); color: var(--evc-navy); font-weight: 700; }
.evc-btn.accent:hover { background: #A6D7FC; }
.evc-hint { margin-left: auto; font-family: var(--evc-mono); font-size: 12px; color: var(--evc-muted); }

/* ---------- Results ---------- */

.evc-reshead {
	position: relative;
	padding: 18px 22px;
	background: var(--evc-wash);
	border-bottom: 1px solid var(--evc-rule);
}
/* The masthead sits in the space to the right of the summary line. */
.evc-reslogo {
	position: absolute;
	top: 16px;
	right: 22px;
	width: 128px;
	height: auto;
}
.evc-reshead p, .evc-reshead h3 { padding-right: 140px; }
.evc-reshead p {
	margin: 0 0 4px;
	font-family: var(--evc-mono);
	font-size: 11.5px;
	color: var(--evc-muted);
	letter-spacing: .05em;
	text-transform: uppercase;
}
.evc-reshead h3 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.02em; color: var(--evc-ink); }

.evc-warn {
	margin: 0;
	padding: 12px 22px;
	background: var(--evc-warn-bg);
	color: var(--evc-warn);
	font-size: 13px;
	border-bottom: 1px solid var(--evc-rule);
}

.evc-card { border-bottom: 1px solid var(--evc-rule); padding: 22px; }
.evc-ch { display: flex; gap: 14px; align-items: flex-start; }
.evc-pos {
	font-family: var(--evc-mono);
	font-size: 13px;
	font-weight: 600;
	width: 30px;
	height: 30px;
	flex: 0 0 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--evc-navy);
	color: #fff;
}
.evc-card.top .evc-pos { background: var(--evc-sky); color: var(--evc-navy); }
.evc-photo {
	flex: 0 0 132px;
	width: 132px;
	overflow: hidden;
	background: var(--evc-wash);
	line-height: 0;
}
.evc-photo img {
	width: 100%;
	height: 88px;
	object-fit: cover;
	display: block;
}
.evc-lthumb { width: 56px; }
.evc-lthumb img {
	width: 48px;
	height: 32px;
	object-fit: cover;
	display: block;
	background: var(--evc-wash);
}
.evc-nm { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.015em; color: var(--evc-ink); }
.evc-nm span { color: var(--evc-muted); font-weight: 400; }
.evc-pr {
	font-family: var(--evc-mono);
	font-size: 17px;
	font-weight: 600;
	margin-left: auto;
	text-align: right;
	white-space: nowrap;
}
.evc-pr em {
	display: block;
	font-style: normal;
	font-family: var(--evc-font);
	font-size: 10.5px;
	font-weight: 400;
	color: var(--evc-muted);
	letter-spacing: .05em;
	text-transform: uppercase;
}

.evc-vd {
	margin: 14px 0 0;
	padding: 11px 14px;
	background: var(--evc-sky-pale);
	border-left: 3px solid var(--evc-sky);
	font-size: 14.5px;
	color: var(--evc-navy);
}
.evc-to { margin: 9px 0 0; font-size: 13.5px; color: var(--evc-muted); }
/* Called out only when the reader asked about seats, size or space. */
.evc-highlight {
	margin: 10px 0 0;
	font-family: var(--evc-mono);
	font-size: 12px;
	letter-spacing: .04em;
	color: var(--evc-navy);
	background: var(--evc-wash);
	display: inline-block;
	padding: 6px 11px;
}
.evc-en { margin: 10px 0 0; font-size: 13.5px; color: var(--evc-muted); font-style: italic; }

/* The comparison strip: bar is this car, tick is the class median. */
.evc-bars { margin: 16px 0 0; border-top: 1px solid var(--evc-rule); padding-top: 14px; }
.evc-bl {
	font-family: var(--evc-mono);
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--evc-muted);
	margin-bottom: 10px;
}
.evc-br { display: grid; grid-template-columns: 128px 1fr 78px; gap: 10px; align-items: center; margin-bottom: 7px; }
.evc-bn { font-size: 12.5px; color: var(--evc-muted); }
.evc-br.key .evc-bn { color: var(--evc-ink); font-weight: 600; }
.evc-track { position: relative; height: 15px; background: var(--evc-wash); border: 1px solid var(--evc-wash-2); }
.evc-fill { position: absolute; top: 0; bottom: 0; left: 0; background: var(--evc-bar); }
.evc-br.key .evc-fill { background: var(--evc-navy); }
/* The class median marker.
 *
 * A lightning bolt rather than a tick: it reads instantly as "this is the
 * middle of the field" while staying on theme.
 *
 * Drawn as two stacked CSS masks. The outer one is white and slightly larger,
 * giving the bolt a halo; the inner one is navy. Without the halo the marker
 * vanishes whenever it lands on the filled part of a winning bar, which is
 * navy on navy. Masks rather than an image file so the colour comes from the
 * palette and follows any rebrand.
 *
 * Opacity is baked into the colours rather than set with the opacity property,
 * because that would create a stacking context and trap the halo behind the
 * bolt.
 */
.evc-med {
	position: absolute;
	top: -6px;
	bottom: -6px;
	width: 12px;
	transform: translateX(-50%);
	background-color: rgba(255, 255, 255, .92);
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2014%2024'%3E%3Cpath%20d='M8.5%200%20L1%2013.5%20H6%20L4.5%2024%20L13%209.5%20H7.8%20Z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2014%2024'%3E%3Cpath%20d='M8.5%200%20L1%2013.5%20H6%20L4.5%2024%20L13%209.5%20H7.8%20Z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.evc-med::after {
	content: '';
	position: absolute;
	inset: 1.5px;
	background-color: var(--evc-navy);
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2014%2024'%3E%3Cpath%20d='M8.5%200%20L1%2013.5%20H6%20L4.5%2024%20L13%209.5%20H7.8%20Z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2014%2024'%3E%3Cpath%20d='M8.5%200%20L1%2013.5%20H6%20L4.5%2024%20L13%209.5%20H7.8%20Z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.evc-bv { font-family: var(--evc-mono); font-size: 12px; text-align: right; white-space: nowrap; color: var(--evc-muted); }

.evc-facts { display: flex; flex-wrap: wrap; gap: 0; margin: 14px 0 0; border: 1px solid var(--evc-rule); }
.evc-fact { flex: 1 1 88px; padding: 9px 11px; border-right: 1px solid var(--evc-rule); }
.evc-fact:last-child { border-right: none; }
.evc-fact dt {
	font-family: var(--evc-mono);
	font-size: 9.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--evc-muted);
}
.evc-fact dd { margin: 2px 0 0; font-family: var(--evc-mono); font-size: 14px; font-weight: 600; }

.evc-rev {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 15px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--evc-navy);
	text-decoration: none;
	border-bottom: 2px solid var(--evc-sky);
	padding-bottom: 1px;
}
.evc-rev:hover { border-bottom-color: var(--evc-navy); }
.evc-revs { margin-top: 15px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.evc-revs .evc-rev { margin-top: 0; }
.evc-score {
	display: inline-block;
	font-family: var(--evc-mono);
	font-size: 15px;
	font-weight: 600;
	color: var(--evc-navy);
	background: var(--evc-sky-pale);
	padding: 4px 10px;
	margin-bottom: 2px;
}
.evc-score em { font-style: normal; font-size: 11px; color: var(--evc-muted); }
.evc-norev { margin: 15px 0 0; font-family: var(--evc-mono); font-size: 13px; color: var(--evc-muted); }

.evc-flags { margin: 12px 0 0; padding: 0; list-style: none; }
.evc-flags li {
	font-family: var(--evc-mono);
	font-size: 11.5px;
	color: var(--evc-muted);
	padding-left: 15px;
	position: relative;
	line-height: 1.45;
	margin-bottom: 5px;
}
.evc-flags li::before { content: '!'; position: absolute; left: 0; color: var(--evc-warn); font-weight: 700; }

/* ---------- Charging ----------
 *
 * Tiles rather than bars. Home charging and DC fast charging differ by two
 * orders of magnitude, so a shared axis made the fast charge invisible and
 * separate axes made the two incomparable. Colour carries the comparison
 * instead, and works at both scales.
 *
 * Thresholds are absolute, not relative to the shortlist: a 30-hour charge is
 * slow whether or not its rivals are slower.
 */

.evc-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 8px;
	margin-top: 10px;
}
.evc-tile {
	padding: 10px 12px;
	background: var(--evc-wash);
	border-left: 3px solid var(--evc-bar);
}
.evc-tile-t { font-family: var(--evc-mono); font-size: 16px; font-weight: 600; color: var(--evc-ink); }
.evc-tile-l { font-size: 12.5px; color: var(--evc-ink); margin-top: 3px; }
.evc-tile-s { font-family: var(--evc-mono); font-size: 10.5px; color: var(--evc-muted); margin-top: 2px; }

.evc-tile.quick { border-left-color: #0F7B5A; }
.evc-tile.fair  { border-left-color: #C77700; }
.evc-tile.slow  { border-left-color: #B3261E; }
.evc-tile.quick .evc-tile-t { color: #0B6349; }
.evc-tile.fair  .evc-tile-t { color: #9A5D00; }
.evc-tile.slow  .evc-tile-t { color: #8E1E18; }

/* ---------- Information disclosures ----------
 *
 * Methodology has to be available but must not bury the recommendation it
 * supports. A native <details> keeps it one click away, keyboard reachable,
 * and correctly announced as a disclosure.
 */

/* Visually hidden, still read aloud. The "i" alone means nothing to a screen
   reader, so the disclosure carries its real label here. */
.evc-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.evc-info { display: inline; }
.evc-info summary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 15px;
	height: 15px;
	margin-left: 6px;
	border: 1px solid var(--evc-rule);
	border-radius: 50%;
	font-family: var(--evc-font);
	font-size: 10px;
	font-style: italic;
	font-weight: 700;
	line-height: 1;
	color: var(--evc-muted);
	cursor: pointer;
	list-style: none;
	vertical-align: middle;
	text-transform: none;
	letter-spacing: 0;
}
.evc-info summary::-webkit-details-marker { display: none; }
.evc-info summary:hover { border-color: var(--evc-navy); color: var(--evc-navy); }
.evc-info summary:focus-visible { outline: 2px solid var(--evc-navy); outline-offset: 2px; }
.evc-info[open] summary { background: var(--evc-navy); border-color: var(--evc-navy); color: #fff; }
.evc-info-body {
	margin: 9px 0 2px;
	padding: 10px 13px;
	background: var(--evc-wash);
	border-left: 3px solid var(--evc-rule);
	font-family: var(--evc-font);
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--evc-muted);
	text-transform: none;
	letter-spacing: 0;
}

/* ---------- Body style icons ---------- */

.evc-opt.icon {
	flex-direction: column;
	gap: 4px;
	padding: 12px 8px;
	text-align: center;
}
.evc-opt.icon svg {
	width: 52px;
	height: auto;
	fill: currentColor;
	display: block;
}
.evc-opt.icon span { font-size: 12.5px; line-height: 1.25; }

/* ---------- Old charging chart, retained for the fast-charge note ---------- */

.evc-charge { margin-top: 16px; border-top: 1px solid var(--evc-rule); padding-top: 14px; }
.evc-cbr { display: grid; grid-template-columns: 128px 1fr 78px; gap: 10px; align-items: center; margin-bottom: 7px; }
.evc-charge { margin-top: 16px; border-top: 1px solid var(--evc-rule); padding-top: 14px; }
.evc-cfill { position: absolute; top: 0; bottom: 0; left: 0; }
.evc-cfill.slow { background: #C3D3E4; }
.evc-cfill.mid  { background: var(--evc-sky); }
.evc-cfill.fast { background: var(--evc-navy); }
/* Fast charging sits on its own scale, so it is visually separated from the
   home-charging bars above rather than reading as a fourth of them. */
.evc-fast { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--evc-rule); }
.evc-track-dc { background: var(--evc-sky-pale); border-color: var(--evc-sky-pale); }
.evc-cfill.dc { background: var(--evc-navy); }
.evc-cnote { margin: 8px 0 0; font-family: var(--evc-mono); font-size: 10.5px; color: var(--evc-muted); }

/* ---------- Reveal controls ---------- */

.evc-more { display: flex; flex-wrap: wrap; gap: 10px; padding: 18px 22px; border-bottom: 1px solid var(--evc-rule); }
.evc-btn.bordered {
	border: 1px solid var(--evc-rule);
	color: var(--evc-ink);
	background: var(--evc-paper);
	padding: 12px 18px;
}
.evc-btn.bordered:hover { border-color: var(--evc-navy); background: var(--evc-wash); }

/* ---------- Full ranking ---------- */

.evc-full { padding: 22px; border-bottom: 1px solid var(--evc-rule); }
.evc-full h4 { margin: 0 0 4px; font-size: 17px; font-weight: 600; color: var(--evc-ink); }
.evc-full > p { margin: 0 0 14px; font-size: 13px; color: var(--evc-muted); }
.evc-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.evc-table th {
	text-align: left;
	font-family: var(--evc-mono);
	font-size: 9.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--evc-muted);
	font-weight: 600;
	padding: 0 8px 7px 0;
	border-bottom: 1px solid var(--evc-rule);
}
.evc-table td { padding: 9px 8px 9px 0; border-bottom: 1px solid var(--evc-wash-2); vertical-align: top; }
.evc-table tr:nth-child(-n+3) td { background: var(--evc-sky-pale); }
.evc-lrank { font-family: var(--evc-mono); font-size: 12px; color: var(--evc-muted); width: 30px; }
.evc-lname a { color: var(--evc-navy); text-decoration: none; border-bottom: 1px solid var(--evc-sky); }
.evc-lname a:hover { border-bottom-color: var(--evc-navy); }
.evc-lname span { color: var(--evc-muted); }
.evc-lbest { color: var(--evc-muted); font-size: 12.5px; }
.evc-lbest span { font-family: var(--evc-mono); color: var(--evc-ink); }
.evc-lprice { font-family: var(--evc-mono); text-align: right; white-space: nowrap; }

/* ---------- Detailed specs ---------- */

.evc-details { margin-top: 14px; border-top: 1px solid var(--evc-rule); padding-top: 12px; }
.evc-details summary {
	cursor: pointer;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--evc-navy);
	list-style: none;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 13px;
	border: 1px solid var(--evc-rule);
	background: var(--evc-wash);
}
.evc-details summary::-webkit-details-marker { display: none; }
.evc-details summary::after {
	content: '+';
	font-family: var(--evc-mono);
	font-size: 15px;
	line-height: 1;
	color: var(--evc-muted);
}
.evc-details[open] summary::after { content: '\2212'; }
.evc-details summary:hover { border-color: var(--evc-navy); background: var(--evc-sky-pale); }
.evc-details summary:focus-visible { outline: 2px solid var(--evc-navy); outline-offset: 2px; }

.evc-specs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: 0 28px;
	margin: 14px 0 4px;
}
.evc-spec {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 7px 0;
	border-bottom: 1px solid var(--evc-wash-2);
	font-size: 13.5px;
}
.evc-spec dt { color: var(--evc-muted); }
.evc-spec dd { margin: 0; font-family: var(--evc-mono); font-size: 13px; text-align: right; white-space: nowrap; }

.evc-scope {
	margin: 12px 0 0;
	font-family: var(--evc-mono);
	font-size: 10.5px;
	line-height: 1.6;
	color: var(--evc-muted);
}

/* ---------- Shortlist ---------- */

.evc-save {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 14px;
	padding: 10px 16px;
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--evc-navy);
	background: var(--evc-paper);
	border: 1px solid var(--evc-navy);
	cursor: pointer;
}
.evc-save:hover { background: var(--evc-sky-pale); }
.evc-save.on { background: var(--evc-navy); color: #fff; }
.evc-save:focus-visible { outline: 2px solid var(--evc-sky); outline-offset: 2px; }

.evc-lsave { width: 34px; text-align: right; }
.evc-savemini {
	width: 26px;
	height: 26px;
	font: inherit;
	font-size: 14px;
	line-height: 1;
	color: var(--evc-navy);
	background: var(--evc-paper);
	border: 1px solid var(--evc-rule);
	cursor: pointer;
}
.evc-savemini:hover { border-color: var(--evc-navy); background: var(--evc-sky-pale); }
.evc-savemini.on { background: var(--evc-navy); border-color: var(--evc-navy); color: #fff; }

.evc-savedlist {
	margin: 0 0 14px !important;
	padding: 10px 13px;
	background: rgba(255,255,255,.1);
	border-left: 3px solid var(--evc-sky);
	font-size: 13.5px;
	color: #D6E7F7 !important;
}
.evc-savedlist strong { color: #fff; }
.evc-optional { font-weight: 400; opacity: .75; text-transform: none; letter-spacing: 0; }

/* ---------- Capture ---------- */

.evc-capture { padding: 22px; background: var(--evc-navy); color: #fff; }
.evc-capture h4 { margin: 0 0 5px; font-size: 17px; font-weight: 600; color: #fff; }
.evc-capture p { margin: 0 0 14px; font-size: 13.5px; color: #B8D4EE; }
.evc-form { display: flex; flex-direction: column; gap: 4px; max-width: 460px; }
.evc-fl { font-size: 12px; color: #B8D4EE; margin-top: 8px; }
/* White, not navy-on-navy.
 *
 * Dark fields on a dark panel read as disabled, and a field a reader is not
 * sure is editable is a field they do not fill in. This is the last screen
 * before a lead, so it is the worst place to be subtle.
 */
.evc-form input[type=text],
.evc-form input[type=email],
.evc-form input[type=tel] {
	font: inherit;
	font-size: 15px;
	padding: 11px 13px;
	border: 1px solid #B8D4EE;
	background: #FFFFFF;
	color: var(--evc-ink);
	color: #fff;
	width: 100%;
}
.evc-form input:focus { outline: 2px solid var(--evc-sky); outline-offset: 1px; }
.evc-check {
	display: flex;
	gap: 9px;
	align-items: flex-start;
	margin-top: 12px;
	font-size: 13px;
	color: #D6E7F7;
	cursor: pointer;
	line-height: 1.45;
}
.evc-check input { margin-top: 3px; flex: 0 0 auto; }
.evc-privacy { margin: 10px 0 0; font-size: 12px; }
.evc-privacy a { color: var(--evc-sky); }
.evc-capture .evc-btn { margin-top: 16px; align-self: flex-start; }
.evc-capture .evc-err { color: #FFC2BC; }
.evc-form input::placeholder { color: #7A8FA5; opacity: 1; }
.evc-form input:focus {
	outline: 2px solid var(--evc-sky);
	outline-offset: 1px;
	border-color: var(--evc-sky);
}

/* Honeypot: hidden from people, reachable by bots. Not display:none, since
   some bots skip those. */
.evc-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
}

/* ---------- Data attribution ----------
 *
 * Present on every step, because the data licence requires the credit. Kept
 * deliberately quiet: EV Central makes the recommendation and owns the
 * judgement; carloop provide the raw numbers. The visual hierarchy should say
 * that without anyone having to explain it.
 */
.evc-attr {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	padding: 10px 22px;
	border-top: 1px solid var(--evc-rule);
	background: var(--evc-wash);
}
.evc-attr span {
	font-family: var(--evc-mono);
	font-size: 9.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--evc-muted);
}
.evc-attr img {
	width: 72px;
	height: auto;
	display: block;
	opacity: .85;
	transition: opacity .15s;
}
.evc-attr-link { display: block; line-height: 0; }
.evc-attr-link:hover img,
.evc-attr-link:focus-visible img { opacity: 1; }
.evc-attr-link:focus-visible { outline: 2px solid var(--evc-navy); outline-offset: 3px; }

/* ---------- Footer ---------- */

.evc-foot {
	padding: 14px 22px;
	font-family: var(--evc-mono);
	font-size: 10.5px;
	color: var(--evc-muted);
	line-height: 1.6;
}
.evc-restart {
	background: none;
	border: none;
	font: inherit;
	color: var(--evc-muted);
	text-decoration: underline;
	cursor: pointer;
	padding: 0;
}
.evc-restart:hover { color: var(--evc-navy); }

/* ---------- Mobile ---------- */

@media (max-width: 560px) {
	.evc-matcher-mount { margin: 1.25rem auto; }
	.evc-body, .evc-card, .evc-reshead, .evc-capture, .evc-top, .evc-foot, .evc-warn {
		padding-left: 16px;
		padding-right: 16px;
	}
	.evc-br,
	.evc-cbr { grid-template-columns: 92px 1fr 62px; gap: 8px; }
	.evc-more { padding: 16px; flex-direction: column; }
	.evc-more .evc-btn { width: 100%; text-align: center; }
	.evc-full { padding: 18px 16px; }
	.evc-attr { padding: 9px 16px; }
	.evc-table { font-size: 12.5px; }
	.evc-lbest { display: none; }
	.evc-tiles { grid-template-columns: 1fr 1fr; }
	.evc-opt.icon svg { width: 44px; }
	.evc-opt.icon span { font-size: 11.5px; }
	/* On a phone the card header stacks, so the photo goes full width above
	   the name rather than squeezing it into a column. */
	.evc-ch { flex-wrap: wrap; }
	.evc-photo { flex: 1 1 100%; width: 100%; order: -1; margin-bottom: 10px; }
	.evc-photo img { height: 180px; }
	.evc-lthumb { display: none; }
	.evc-table th:nth-child(2) { display: none; }
	.evc-save { width: 100%; justify-content: center; }
	.evc-reslogo { position: static; display: block; width: 118px; margin: 0 0 10px; }
	.evc-reshead p, .evc-reshead h3 { padding-right: 0; }
	.evc-specs { grid-template-columns: 1fr; gap: 0; }
	.evc-table th:nth-child(3) { display: none; }
	.evc-bn { font-size: 11.5px; }
	.evc-bv { font-size: 11px; }
	.evc-pr { font-size: 15px; }
	.evc-q h3 { font-size: 20px; }
	.evc-nm { font-size: 17px; }
	.evc-opts.g2 { grid-template-columns: 1fr 1fr; }
	.evc-opts.g3 { grid-template-columns: 1fr 1fr; }
	.evc-logo { width: 140px; margin-bottom: 12px; }
	.evc-top h2 { font-size: 19px; }
	.evc-price-val input { font-size: 16px; padding: 10px; }
	.evc-price-vals { gap: 8px; }
	.evc-opt.compact { padding: 12px 8px; font-size: 13.5px; }
}

@media (prefers-contrast: more) {
	.evc-matcher-mount { --evc-muted: #33414F; --evc-rule: #8FA8C0; --evc-bar: #7C99B8; }
}