/* Brownout: electric cars as home batteries (ev.html). Lane v1.31.0, roadmap item 2.3.0.
   Uses main.css tokens and classes only -- no new colours, no new fonts. main.css is not edited. */

.ev-wide{max-width:1240px}
#compare,#dealers,#why-now,#prices{scroll-margin-top:64px}   /* clear the sticky header */
.ev-derived{margin:-6px 0 18px}

/* (a) the three V2L states, explained */
.ev-legend{list-style:none;padding:0;margin:24px 0 10px;display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr))}
.ev-legend-item{display:grid;gap:8px;align-content:start;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:14px 16px}
.ev-legend-item .v2l{justify-self:start}
@media(max-width:820px){.ev-legend{grid-template-columns:1fr}}
.ev-jump{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.ev-jump .btn{min-height:44px;display:inline-flex;align-items:center;padding:10px 20px}

/* V2L badges: each state differs in glyph, colour AND outline, so colour is never the only signal.
   house = solid pill, leaf  ·  12 V = square-cornered box, clay  ·  unknown = dashed pill, muted */
.v2l{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:4px 12px 4px 9px;
  border-radius:var(--pill);font-family:var(--font-body);font-size:.84rem;font-weight:600;line-height:1.25;
  text-decoration:none;max-width:100%}
.v2l-ico{width:16px;height:16px;flex:none;fill:currentColor}
.v2l.house{color:var(--leaf);background:var(--leaf-bg);border:2px solid var(--leaf)}
.v2l.s12{color:var(--clay);background:var(--clay-bg);border:1.5px solid var(--clay-line);border-radius:var(--radius-sm)}
.v2l.unk{color:var(--muted);background:transparent;border:1.5px dashed var(--line-strong)}
a.v2l{text-decoration:underline;text-underline-offset:3px}
a.v2l:hover{filter:brightness(1.12)}

/* (b) filter bar */
.ev-filters .field{min-width:150px}
.ev-count-row{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.ev-count{margin:0;font-weight:600;color:var(--head)}
.ev-reset{min-height:44px;padding:10px 18px}

/* (c) the comparison table (desktop) */
.ev-table-wrap{margin-top:8px}
.ev-table{width:100%;border-collapse:separate;border-spacing:0;font-size:.92rem;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.ev-table[hidden]{display:none}
.ev-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ev-table thead th{background:var(--inset);color:var(--head);text-align:left;font-weight:600;font-size:.84rem;
  padding:12px;border-bottom:1px solid var(--line-strong);vertical-align:bottom}
.ev-th-note{display:block;font-weight:400;color:var(--muted);font-size:.74rem;line-height:1.35}
.ev-table td{padding:14px 12px;border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:break-word}
.ev-table tbody tr:last-child td{border-bottom:0}
.ev-table tr.is-picked td{background:var(--sun-tint)}
.ev-table .c-car{width:24%}
.ev-table .c-v2l .v2l{min-width:11.5em}
.ev-table .c-see,.ev-table .c-pick{white-space:nowrap}

.ev-car{line-height:1.35}
.ev-brand{color:var(--ink-2)}
.ev-model{color:var(--head)}
.ev-variant{color:var(--muted)}
.ev-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px}
.ev-body{font-size:.8rem;color:var(--muted)}
.ev-type.t-HEV-mild{border-style:dashed}

.ev-price{display:block;font-weight:600;color:var(--head);font-family:var(--font-mono);font-size:.9rem}
.ev-intro{display:block;font-size:.82rem;color:var(--sun);white-space:nowrap}
.ev-asof{display:block;font-size:.78rem;color:var(--muted)}
.ev-asof a{color:var(--ink-2)}
.ev-price-na{display:block;font-weight:600;color:var(--ink-2)}
.ev-runout{margin-top:6px;white-space:nowrap}
.ev-kwh{display:block;font-weight:600;color:var(--head);font-family:var(--font-mono);font-size:.9rem}
.ev-hbe{display:block;font-size:.82rem;color:var(--ink-2)}
.ev-derived-tag{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  border-bottom:1px dotted var(--muted);cursor:help}
.ev-range{display:block}
.ev-range-2{display:block;font-size:.82rem;color:var(--muted)}
.ev-std{font-size:.74rem;color:var(--muted);text-decoration:none;border-bottom:1px dotted var(--muted);cursor:help}
.ev-na{color:var(--muted)}
.ev-nobranch{font-size:.84rem;color:var(--muted)}

.ev-see{min-height:44px;padding:10px 16px;font-size:.86rem;white-space:nowrap}

/* (d) pick toggle: a real button with aria-pressed, 44 px tall */
.ev-pick{display:inline-flex;align-items:center;gap:8px;min-height:44px;min-width:44px;padding:0 16px;
  border-radius:var(--pill);border:1.5px solid var(--line-strong);background:var(--inset);color:var(--ink);
  font-family:var(--font-body);font-size:.9rem;font-weight:600;cursor:pointer;white-space:nowrap}
.ev-pick:hover{border-color:var(--sun);color:var(--sun-soft)}
.ev-pick-box{position:relative;display:inline-block;width:16px;height:16px;border:1.5px solid var(--line-strong);border-radius:4px}
.ev-pick[aria-pressed="true"]{border-color:var(--sun);background:var(--sun-tint);color:var(--sun-soft)}
.ev-pick[aria-pressed="true"] .ev-pick-box{background:var(--sun);border-color:var(--sun)}
.ev-pick[aria-pressed="true"] .ev-pick-box::after{content:"";position:absolute;left:4px;top:0;width:4px;height:9px;
  border:solid var(--void);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* notes stay folded so long text never spills into the table */
.ev-notes{margin-top:4px}
.ev-notes summary{display:inline-flex;align-items:center;gap:6px;min-height:44px;min-width:44px;padding-right:10px;
  cursor:pointer;color:var(--ink-2);font-size:.85rem;list-style:none}
.ev-notes summary::-webkit-details-marker{display:none}
.ev-notes summary::before{content:"";width:0;height:0;border-style:solid;border-width:4.5px 0 4.5px 7px;
  border-color:transparent transparent transparent currentColor;transition:transform .15s}
.ev-notes[open] summary::before{transform:rotate(90deg)}
.ev-notes summary:hover{color:var(--sun)}
.ev-notes p{margin:0 0 6px;font-size:.85rem;color:var(--ink-2);max-width:48ch}

/* (c) at 720 px and below, each table row becomes a card */
@media(max-width:720px){
  .ev-table,.ev-table tbody,.ev-table tr,.ev-table td{display:block;width:100%}
  .ev-table{background:none;border:0;border-radius:0;overflow:visible}
  /* display:block so overflow/clip apply (they do not apply to a table-header-group) */
  .ev-table thead{display:block;position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .ev-table tr{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);margin:0 0 14px;padding:4px 16px}
  .ev-table tr.is-picked{border-color:var(--sun)}
  .ev-table tr.is-picked td{background:none}
  .ev-table td{position:relative;padding:10px 0 10px 6.4em;min-height:40px}
  .ev-table td::before{content:attr(data-label);position:absolute;left:0;top:13px;color:var(--muted);
    font-family:var(--font-mono);font-size:.68rem;letter-spacing:.07em;text-transform:uppercase}
  .ev-table .c-car,.ev-table .c-v2l{width:100%}
  .ev-table .c-v2l .v2l{min-width:0}
  .ev-table td.c-car{padding:12px 0 6px}
  .ev-table td.c-car::before{display:none}
  .ev-table td.c-see,.ev-table td.c-pick{display:inline-flex;width:auto;min-height:0;border-bottom:0;padding:10px 10px 12px 0;vertical-align:top}
  .ev-table td.c-see::before,.ev-table td.c-pick::before{display:none}
  .ev-table td.c-v2l{border-bottom:1px solid var(--line)}
  .ev-nobranch{display:inline-flex;align-items:center;min-height:44px}
}

/* (d) the picked-cars bar */
.ev-bar{position:fixed;left:0;right:0;bottom:0;z-index:1050;background:var(--void);border-top:1px solid var(--line-strong);
  box-shadow:var(--shadow);padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px))}
.ev-bar[hidden]{display:none}
.ev-bar-in{max-width:var(--maxw);margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.ev-bar-n{font-weight:600;color:var(--head);margin-right:auto}
.ev-bar .btn{min-height:44px;padding:10px 22px}
.ev-bar-msg{flex-basis:100%;margin:0;font-size:.88rem;color:var(--clay)}
.ev-bar-msg:empty{display:none}
body.ev-has-bar{padding-bottom:96px}

/* (d) the side-by-side panel */
.ev-dialog{width:min(980px,calc(100vw - 24px));max-height:calc(100vh - 40px);padding:18px 18px 8px;
  background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.ev-dialog::backdrop{background:var(--void);opacity:.72}
.ev-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.ev-dialog-head h2{margin:0;font-size:1.35rem}
.ev-dialog-head .btn{min-height:44px;padding:10px 20px}
.ev-cmp-scroll{overflow-x:auto}
.ev-cmp{width:100%;border-collapse:collapse;font-size:.88rem;table-layout:fixed}
.ev-cmp th,.ev-cmp td{padding:9px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;overflow-wrap:break-word}
.ev-cmp thead th{color:var(--head);font-weight:600;line-height:1.35}
.ev-cmp thead td{width:9.5em}
.ev-cmp tbody th{color:var(--muted);font-weight:500;font-size:.8rem}
.ev-cmp-rm{display:flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;margin-top:6px;padding:8px 14px;font-size:.82rem;white-space:nowrap}
.ev-cmp .v2l{font-size:.78rem}
@media(max-width:560px){
  .ev-dialog{padding:14px 12px 6px}
  .ev-cmp{font-size:.8rem}
  .ev-cmp thead td{width:5.6em}
  .ev-cmp th,.ev-cmp td{padding:8px 5px}
  .ev-cmp .v2l{padding:3px 7px;gap:5px}
  .ev-cmp thead th{font-size:.78rem}
  .ev-cmp .badge{padding:2px 5px;letter-spacing:.02em;font-size:.6rem}
  .ev-cmp-rm{padding:6px 8px;font-size:.76rem}
}

/* (e) dealer map popups keep Leaflet's light surface (main.css rule), so their text goes dark */
.ev-pop{color:var(--void);line-height:1.5}
.ev-pop strong{color:var(--void)}
.ev-pop a{color:var(--void);text-decoration-color:var(--void)}
.ev-pop .badge.sample{color:var(--void);background:var(--clay-bg);border:1px solid var(--clay)}
.ev-branch{padding:14px 18px}
.ev-branch .badge{margin-left:4px}

/* (f) why now */
.ev-why{max-width:820px}
.ev-claims{list-style:none;margin:0;padding:0;display:grid;gap:0}
.ev-claims li{padding:14px 0;border-bottom:1px solid var(--line)}
.ev-claims li:last-child{border-bottom:0}
.ev-claims p{margin:0 0 4px}
.ev-src{font-size:.84rem;color:var(--muted)}
.ev-src a{color:var(--ink-2)}

/* (g) sources */
.ev-sources{padding-left:1.2em;display:grid;grid-template-columns:minmax(0,1fr);gap:6px;font-size:.92rem}
.ev-sources li,.ev-sources a{min-width:0;overflow-wrap:anywhere}

/* lane v1.31.0: rows come 24 at a time so the dealer map stays within reach */
.ev-more{display:block;margin:14px auto 0;min-height:44px}
.ev-more[hidden]{display:none}

/* lane v1.31.1: one free-licence photo per car model, on a white plate (as the catalogue's unit photos).
   The photo sits LEFT of the name at every width (a grid INSIDE the cell, so the table layout is untouched). */
@media(min-width:721px){.ev-table .c-car{width:28%}}
.ev-carcell{display:grid;grid-template-columns:136px minmax(0,1fr);column-gap:14px;align-items:start}
.ev-carcell.no-photo{display:block}
.ev-fig{margin:0}
.ev-fig[hidden]{display:none}
.ev-photo{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm)}
.ev-shows{margin-top:4px;font-size:.72rem;line-height:1.35;color:var(--muted)}
.ev-fig-cmp{margin:0 0 8px}
.ev-photo-note{margin-top:-4px}
.ev-photo-note a{display:inline-block;padding:12px 0;margin:-12px 0}
@media(max-width:720px){.ev-carcell{grid-template-columns:116px minmax(0,1fr);column-gap:12px}}

/* (h) photo credits */
.ev-credits-box summary{display:inline-flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;font-weight:600;color:var(--head);list-style:none}
.ev-credits-box summary::-webkit-details-marker{display:none}
.ev-credits-box summary::before{content:"";width:0;height:0;border-style:solid;border-width:5px 0 5px 8px;
  border-color:transparent transparent transparent currentColor;transition:transform .15s}
.ev-credits-box[open] summary::before{transform:rotate(90deg)}
.ev-credits-box summary:hover{color:var(--sun)}
.ev-credits{margin:10px 0 0;padding-left:1.4em;display:grid;gap:8px;font-size:.86rem;color:var(--ink-2)}
.ev-credits li{overflow-wrap:anywhere}
.ev-credits a{color:var(--ink-2)}

/* lane v1.31.1, QA MINORs: standalone text links get a 44 px tap height without moving the layout */
.ev-asof a,.ev-src a{display:inline-block;padding:14px 2px;margin:-14px -2px}
/* lane v1.31.2 (QA-RC 3): 44 px WIDE as well -- "source" was 42 and "PNA" 30. 11 px each side covers the
   shortest word ("PNA", 26 px of text) with room to spare; the negative margin keeps every line where it was. */
.ev-asof a,.ev-src a{padding:14px 11px;margin:-14px -11px}
/* lane v1.35.0 (QA-RC2 1): a "Why now" source line can wrap on a phone, and a 44 px box then reaches into the
   line above (a tap on Top Gear opened CarGuide). These links sit inside a sentence, so they grow only as far
   as the wider line spacing allows: 9 px up and down inside 2.6 line-heights never touches the next line. */
.ev-src{line-height:2.6}
.ev-src a{display:inline;padding:9px 6px;margin:0 -6px}
.ev-sources li{padding:0}
.ev-sources a{display:inline-block;padding:11px 0}
.ev-sources{gap:0}
a.v2l{min-height:44px}
#ev-map .leaflet-bar a{width:44px;height:44px;line-height:44px;font-size:22px}
/* the compare panel's V2L labels wrap inside a softer box instead of a tall oval (QA anew P13) */
.ev-cmp .v2l{align-items:flex-start}
.ev-cmp .v2l.house,.ev-cmp .v2l.unk{border-radius:14px}   /* 12 V keeps its square corners, so shape still tells them apart */
.ev-cmp .v2l .v2l-ico{margin-top:2px}

/* lane v1.31.2 (QA-RC 1): the compare panel on a phone. At 390 px the labels column took 72 px of 325,
   leaving each car 74 px: V2L labels ran to 3-5 lines and past their own padding, and "Plug-in hybrid"
   wrapped. Now the panel uses the phone's width, each row's name sits on its own line ABOVE its values,
   and the V2L badge shows its short form (House / 12 V only / Not stated). Icon, colour and outline are
   untouched, so the three states still differ in all three. Wider screens keep the four-column table. */
.v2l-short{display:none}
@media(max-width:560px){
  .ev-dialog{width:calc(100vw - 16px);max-width:none;padding:14px 10px 6px}
  .ev-cmp,.ev-cmp thead,.ev-cmp tbody{display:block;width:100%}
  .ev-cmp tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .ev-cmp.n2 tr{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ev-cmp .ev-cmp-corner{position:absolute;width:1px;height:1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}
  .ev-cmp tbody th{grid-column:1/-1;padding:10px 5px 0;border-bottom:0}
  .ev-cmp .v2l-short{display:inline}
  .ev-cmp .v2l-full{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
/* the panel's "Price as of · source" link is the same standalone link as the table's: 44 px both ways
   (4 px a side is enough for "source"; the V2L badge links already have their own 44 px height) */
.ev-cmp td>a:not(.v2l){display:inline-block;padding:14px 4px;margin:-14px -4px}