/* ---- EV tracker: /ev-sales/ and /ev-sales/<state>.html ---------------------------------
   Loaded after /css/styles.css and /css/state-pages.css, whose db-* hero, cards, tables,
   tiles and SVG classes these pages reuse, so the EV and solar trackers read as one family.
   This file holds only the EV parts: the month bars (with the lighter, dashed "so far" bar,
   no SVG pattern and no ids), the "of every 100" line and bar rows, the type table and tiles,
   the small-place lists, the stale notice and the preview band. The CSP forbids inline
   styles, so every chart is inline SVG coloured by class from here. Written by
   scripts/ev-pages.mjs; see the plan, sections 2 and 4.1. */

:root{
  --ev-base:#C5D6CA;        /* last year's bars and line */
  --ev-base-ink:#7E978A;
  --ev-this:#2E9E3A;        /* this year */
  --ev-this-deep:#1F7F2C;
  --ev-sofar:rgba(46,158,58,.2);
  --ev-count:#86CB91;       /* a month still being counted */
  --ev-amber:#FFF4D6;
  --ev-amber-line:#F0D27A;
}

/* ================= hero ================= */
.ev-hero h1{font-size:clamp(30px,3.8vw,50px)}
.ev-status{
  display:flex;gap:10px;align-items:flex-start;margin:0;max-width:64ch;
  padding:10px 16px 10px 14px;border-radius:16px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  font-size:13px;font-weight:500;line-height:1.5;color:rgba(255,255,255,.8);
}
.ev-status .db-live{margin-top:5px}
.ev-status time{color:#fff;font-weight:700}
.ev-lead2{margin:16px 0 0;font-size:15.5px;line-height:1.65;color:rgba(255,255,255,.7);max-width:62ch}
.ev-lead2 strong{color:#fff;font-weight:700}
.ev-lead2 a{color:#BFE8C5;font-weight:600}
.ev-live-off{background:rgba(255,255,255,.45)}
.ev-live-off::after{display:none}
.ev-stale{
  display:flex;gap:10px;align-items:flex-start;margin:12px 0 0;max-width:62ch;
  padding:11px 14px;border-radius:14px;background:var(--ev-amber);border:1px solid var(--ev-amber-line);
  color:#4A3A07;font-size:14px;font-weight:600;line-height:1.5;
}
.ev-stale i{font-size:18px;color:#9A7300;margin-top:1px}

.ev-hs .db-hs-k{letter-spacing:.12em}
.ev-hs .db-hs-num.ev-num-long{font-size:clamp(50px,5.6vw,76px)}
.ev-hbars{display:block;width:100%;height:auto;margin:18px 0 6px}
.ev-hb-b{fill:rgba(255,255,255,.2)}
.ev-hb-t{fill:var(--b-gold)}
.ev-hb-t.so{fill:rgba(245,194,12,.28);stroke:var(--b-gold);stroke-width:1;stroke-dasharray:2.5 2}
.ev-hs-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:11.5px;color:rgba(255,255,255,.55);margin-bottom:16px}
.ev-hs-lg{display:inline-flex;align-items:center;gap:6px}
.ev-sw{display:inline-block;width:9px;height:9px;border-radius:2px;margin-left:6px}
.ev-sw:first-child{margin-left:0}
.ev-sw.b{background:rgba(255,255,255,.3)}
.ev-sw.t{background:var(--b-gold)}
.db-chip.ev-chip-so{border-style:dashed;border-color:rgba(245,194,12,.5);background:rgba(245,194,12,.07)}
.db-chip.ev-chip-so b{color:var(--b-gold)}

.ev-kpi-head{margin-top:40px}
.ev-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
.ev-kpis .db-kv.ev-kv-long{font-size:clamp(20px,1.9vw,26px)}
.ev-kpis .db-ks{line-height:1.45}

/* preview band (local previews only; never on a published page) */
.ev-preview{background:repeating-linear-gradient(135deg,#FFE9A8 0 14px,#FFF1C4 14px 28px);border-bottom:1px solid #E8C65A;color:#4A3A07}
.ev-preview .container{display:flex;align-items:center;gap:10px;padding-top:9px;padding-bottom:9px;font-size:13.5px;font-weight:700}
.ev-preview i{font-size:17px}

/* ================= section helpers ================= */
.ev-h3{font-family:var(--b-num);font-weight:700;font-size:17px;letter-spacing:-.01em;color:var(--b-ink);margin:30px 0 4px}
.ev-cap{font-size:14px;line-height:1.6;color:var(--b-soft);margin:0 0 14px;max-width:80ch}
.ev-fn{color:var(--b-deep);font-weight:600}
.db-card .db-note a,.db-card .db-sub a{color:var(--b-deep);font-weight:600}
.db-facts a{color:var(--b-gold);font-weight:600}
.db-facts strong{color:#fff}

/* legend swatches */
.ev-lg-b{width:10px;height:10px;border-radius:2px;background:var(--ev-base)}
.ev-lg-t{width:10px;height:10px;border-radius:2px;background:var(--ev-this)}
.ev-lg-so{width:10px;height:10px;border-radius:2px;background:var(--ev-sofar);border:1.5px dashed var(--ev-this)}
.ev-lg-cnt{width:10px;height:10px;border-radius:2px;background:var(--ev-count)}
.ev-lg-rb{width:18px;height:3px;border-radius:2px;background:var(--ev-base-ink)}
.ev-lg-rt{width:18px;height:3px;border-radius:2px;background:var(--ev-this)}
.ev-lg-me{width:14px;height:8px;border-radius:2px;background:var(--b-gold)}
.ev-lg-in{width:14px;height:8px;border-radius:2px;background:var(--b-deep)}

/* ================= month by month ================= */
.ev-month{display:block;width:100%;height:auto}
.ev-month-m{display:none}
.ev-mb-b{fill:var(--ev-base)}
.ev-mb-t{fill:var(--ev-this)}
.ev-mb-t.cnt{fill:var(--ev-count)}
.ev-mb-t.so{fill:var(--ev-sofar);stroke:var(--ev-this);stroke-width:1.6;stroke-dasharray:5 3}
.ev-month-m .ev-mb-t.so{stroke-width:1.1;stroke-dasharray:3 2}
.ev-month rect:hover{opacity:.85}
.ev-ml{fill:var(--ev-this-deep);font-family:'Inter',system-ui,sans-serif;font-weight:600;font-size:12.5px}
.ev-month-m .ev-ml{font-size:12px}
.ev-mv{fill:var(--b-deep);font-family:var(--b-num);font-weight:700;font-size:15px;font-variant-numeric:tabular-nums}
.db-ax.ev-ax-lf{fill:var(--b-ink);font-weight:700}
.ev-month-m .db-ax{font-size:12.5px}
.ev-mtable td,.ev-mtable th{white-space:nowrap}
.ev-tag{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;background:#EAF5EC;color:var(--ev-this-deep);font-size:11.5px;font-weight:600;letter-spacing:0;text-transform:none;vertical-align:1px}
.ev-counts th,.ev-counts td{padding:10px 12px}
.ev-counts thead th:not(:first-child){text-align:right}

/* ================= of every 100 ================= */
.ev-ratio{display:block;width:100%;height:auto}
.ev-ratio-m{display:none}
.ev-rl{fill:none;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.ev-rl.b{stroke:var(--ev-base-ink);stroke-width:2.2;stroke-dasharray:1 0}
.ev-rl.t{stroke:var(--ev-this)}
.ev-rd.b{fill:#fff;stroke:var(--ev-base-ink);stroke-width:2}
.ev-rd.t{fill:var(--ev-this);stroke:#fff;stroke-width:2}
.ev-rv{fill:var(--b-soft);font-family:'Inter',system-ui,sans-serif;font-weight:600;font-size:12px;font-variant-numeric:tabular-nums}
.ev-re{font-family:var(--b-num);font-weight:700;font-size:16px;font-variant-numeric:tabular-nums}
.ev-re.t{fill:var(--ev-this-deep)}
.ev-re.b{fill:var(--ev-base-ink);font-size:14px}
.ev-ratio-m .ev-re{font-size:12px}
.ev-ratio-m .ev-re.b{font-size:11px}

/* rows of bars: name, bar, value (the hub's ranking, and a state's nearby list) */
.ev-bars{list-style:none;margin:0;padding:0}
.ev-bars-2{columns:2;column-gap:44px}
.ev-bar{
  break-inside:avoid;display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr) 54px;align-items:center;gap:14px;
  padding:7px 10px;border-radius:10px;font-size:14.5px;
}
.ev-bar.rk{grid-template-columns:24px minmax(0,170px) minmax(0,1fr) 54px}
.ev-bar:hover{background:#F5F9F5}
.ev-bar-r{font-size:12px;font-weight:600;color:#9AA89F;text-align:right;font-variant-numeric:tabular-nums}
.ev-bar-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:var(--b-ink);text-decoration:none}
a.ev-bar-n{color:var(--b-deep)}
a.ev-bar-n:hover{text-decoration:underline}
.ev-bar-s{display:block;width:100%;height:12px;border-radius:2px}
.ev-bar-s .t{fill:#EEF4EF}
.ev-bar-s .f{fill:var(--b-green2)}
.ev-bar-s .i{fill:var(--b-ink)}
.ev-bar-v{font-family:var(--b-num);font-weight:700;font-size:15px;color:var(--b-ink);text-align:right;font-variant-numeric:tabular-nums}
.ev-bar.in{background:#EAF3EC}
.ev-bar.in .ev-bar-s .f{fill:var(--b-deep)}
.ev-bar.in .ev-bar-n{color:var(--b-deep)}
.ev-bar.me{background:#FFF6D1}
.ev-bar.me .ev-bar-s .f{fill:var(--b-gold)}
.ev-bar-c{grid-column:2 / -1;font-size:13.5px;color:var(--b-soft);font-variant-numeric:tabular-nums}
.ev-bars-nb .ev-bar{grid-template-columns:minmax(0,230px) minmax(0,1fr) 64px;padding:10px 12px;font-size:15px}
.ev-bars-nb .ev-bar-s{height:16px}
.ev-bars-nb .ev-bar-v{font-size:17px}

.ev-smalls{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
.ev-smalls li{display:flex;flex-direction:column;gap:3px;padding:11px 14px;border-radius:12px;background:#F7FAF7;border:1px solid #E6EEE7;font-size:14px;line-height:1.4}
.ev-smalls a{color:var(--b-deep);font-weight:600;text-decoration:none}
.ev-smalls a:hover{text-decoration:underline}
.ev-smalls span{color:var(--b-soft);font-variant-numeric:tabular-nums}

/* ================= tables ================= */
.ev-st tr.ev-in > *,.ev-nbt tr.ev-in > *{background:#EAF3EC;font-weight:700}
.ev-st tr.ev-in th[scope=row]{color:var(--b-deep)}
.ev-st .db-bc{min-width:220px;width:30%}
.ev-st thead th{white-space:normal;vertical-align:bottom;line-height:1.35}
.ev-st thead th:not(:first-child){min-width:92px}
.ev-st th[scope=row]{min-width:200px}
.ev-chg span{display:inline-block;min-width:44px;text-align:center;padding:3px 9px;border-radius:999px;font-weight:700;font-size:13px}
.db-chg.ev-chg.up span{background:#DDF2E0;color:#1E7A2E}
.db-chg.ev-chg.dn span{background:#F1F3F1;color:#4F5D55}
.db-chg.ev-chg.eq span{background:#F1F3F1;color:#4F5D55}
.db-chg.ev-chg.few span,.db-chg.ev-chg.note span{padding:0;min-width:0;font-weight:500;font-size:12.5px;color:var(--b-mute);background:none}
.ev-chg.note a{color:var(--b-deep);font-weight:600}
.ev-chg .ev-fn{margin-left:2px;text-decoration:none}
.ev-total > *{border-top:1px solid #DCE7DE;background:#F8FBF8;font-weight:700}
.ev-tsub{display:block;font-size:12px;font-weight:500;color:var(--b-mute);white-space:normal}
.ev-types .db-bc{min-width:220px}
.ev-nbt td:nth-child(5){color:var(--b-mute)}
.ev-nbt th[scope=row]{text-align:left}
.ev-hm{display:none}
/* "EVs" inside a label set in capitals (table heads, the hero label) keeps its small s */
.ev-nocaps{text-transform:none}
/* the phone-only line over a table wider than the screen */
.ev-swipe{display:none}

/* electric out of every 100 new vehicles of each type: instrument tiles */
.ev-tiles{margin-top:12px}
.ev-tiles.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ev-tiles.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ev-tiles.c1{grid-template-columns:minmax(0,1fr)}
.ev-tile .db-cr-v{margin:6px 0 2px}
.ev-tile .db-cr-v.ev-cr-sm{font-size:clamp(18px,1.7vw,22px)}
.ev-tile-s{font-size:12.5px;line-height:1.45;color:var(--b-mute);margin-bottom:14px}
.ev-tile .db-cr-i{white-space:normal}

/* ================= FAQ, notes, about ================= */
.ev-faq-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 40px}
.ev-qa{padding:16px 0;border-top:1px solid #EAF1EB}
.ev-qa h3{font-family:var(--b-num);font-weight:700;font-size:16.5px;line-height:1.35;color:var(--b-ink);margin:0 0 6px;letter-spacing:-.01em}
.ev-qa p{margin:0;font-size:15px;line-height:1.65;color:var(--b-soft)}

.ev-about .db-h2{margin-bottom:10px}
.ev-notes{margin:0;padding-left:20px;display:grid;gap:8px;max-width:92ch}
.ev-notes li{font-size:14.5px;line-height:1.65;color:var(--b-soft);padding-left:4px}
.ev-notes li::marker{color:var(--b-green);font-weight:700}
.ev-pnotes{list-style:none;padding-left:0}
.ev-pnotes li{padding:10px 14px;border-left:3px solid var(--b-gold);background:#FFFBEA;border-radius:0 10px 10px 0}
.ev-pnotes li:target{background:#FFF2C2}
.ev-dte{margin:18px 0 0;font-size:14px;line-height:1.65;color:var(--b-soft);max-width:92ch}
.ev-src{margin:12px 0 0;font-size:14px;line-height:1.65;color:var(--b-soft);max-width:92ch}
.ev-src a,.ev-about-s a{color:var(--b-deep);font-weight:600}
.ev-dl{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}
.ev-dl-a{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;border:1px solid var(--b-line);background:#F7FAF7;color:var(--b-deep);font-weight:600;font-size:14px;text-decoration:none}
.ev-dl-a:hover{border-color:#9ACFA2;background:#EEF6EF}
.ev-placenotes .db-h3{font-size:17px;margin-bottom:12px}
.ev-about-s p{margin:0 0 8px}
.ev-solar{margin-top:18px!important}
.ev-solar a{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:14px;background:#fff;border:1px solid var(--b-line);
  box-shadow:0 14px 30px -26px rgba(14,80,34,.5);font-family:var(--b-num);font-size:15px;font-weight:600;color:var(--b-deep);text-decoration:none}
.ev-solar a:hover{border-color:#9ACFA2}
.ev-solar .ph-duotone{font-size:20px;color:#C99A00}
.ev-solar .ph{font-size:15px;opacity:.7}
.ev-nbcard + .db-facts{margin-top:20px}
.ev-facts.n4 ul,.ev-facts.n2 ul{grid-template-columns:repeat(2,minmax(0,1fr))}
.ev-facts.n3 ul{grid-template-columns:repeat(3,minmax(0,1fr))}
.ev-facts.n1 ul{grid-template-columns:minmax(0,1fr)}
.ev-types th[scope=row]{position:sticky;left:0;z-index:1;background:#fff;box-shadow:1px 0 0 #EEF3EF}
.ev-types thead th:first-child{position:sticky;left:0;z-index:2}
.ev-types tr.ev-total th[scope=row]{background:#F8FBF8}

/* ================= responsive ================= */
@media (max-width:1100px){
  .ev-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ev-bars-2{columns:1}
  .ev-tiles.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ev-tiles .db-cr:nth-child(3){border-left:0}
  .ev-tiles .db-cr:nth-child(n+3){border-top:1px solid #E6EEE7}
}
@media (max-width:919px){
  .ev-faq-list{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .ev-lead2{font-size:14.5px}
  .ev-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ev-kpis .db-kv{font-size:22px}
  .ev-kpis .db-kpi-installations{grid-column:auto;order:0}
  .ev-types thead th,.ev-nbt thead th{white-space:normal;vertical-align:bottom;line-height:1.3}
  .ev-nbt th:nth-child(5),.ev-nbt td:nth-child(5){display:none}
  .ev-nbt{font-size:13px}
  .ev-nbt .ev-hd,.ev-st .ev-hd,.ev-types .ev-hd,.ev-mtable .ev-hd{display:none}
  .ev-nbt .ev-hm,.ev-st .ev-hm,.ev-types .ev-hm,.ev-mtable .ev-hm{display:inline}
  /* "too few to compare" and "see note" wrap, so a small place's tables need less room */
  .db-chg.ev-chg.few span,.db-chg.ev-chg.note span{white-space:normal;max-width:64px;line-height:1.25;text-align:right}
  .ev-st th,.ev-st td,.ev-types th,.ev-types td,.ev-mtable th,.ev-mtable td{padding-left:9px;padding-right:9px}
  /* the swipe line over tables wider than a phone (they scroll inside their box) */
  .ev-swipe{display:flex;align-items:center;gap:6px;margin:0 0 8px;font-size:13px;font-weight:500;color:var(--b-mute)}
  .ev-swipe i{font-size:14px;color:var(--b-green)}
  .ev-rknote{display:none}
  .ev-st th[scope=row]{min-width:0;max-width:150px;white-space:normal;line-height:1.3}
  .ev-st thead th:not(:first-child){min-width:0}
  .ev-nbt th[scope=row]{min-width:0;max-width:104px;white-space:normal;line-height:1.3}
  .ev-nbt th,.ev-nbt td{padding:10px 7px}
  .ev-nbt thead th{font-size:10.5px;letter-spacing:.04em}
  .ev-nbt .ev-chg span{min-width:0;padding:3px 6px;font-size:11.5px}
  .ev-nbt td:nth-child(4){white-space:normal;line-height:1.3}
  .ev-hs .db-hs-num.ev-num-long{font-size:50px}
  .ev-month-d,.ev-ratio-d{display:none}
  .ev-month-m,.ev-ratio-m{display:block}
  .ev-h3{font-size:16px;margin-top:24px}
  .ev-bar,.ev-bar.rk,.ev-bars-nb .ev-bar{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:8px 8px}
  .ev-bar.rk{grid-template-columns:22px minmax(0,1fr) auto}
  .ev-bar-s,.ev-bars-nb .ev-bar-s{grid-column:1 / -1;grid-row:2;height:10px}
  .ev-bar.rk .ev-bar-s{grid-column:2 / -1}
  .ev-bar-c{grid-column:1 / -1;grid-row:2}
  .ev-bar.rk .ev-bar-c{grid-column:2 / -1}
  .ev-bar-n{white-space:normal}
  .ev-smalls{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ev-smalls li{padding:10px 12px;font-size:13.5px}
  .ev-facts.n4 ul,.ev-facts.n3 ul,.ev-facts.n2 ul{grid-template-columns:minmax(0,1fr)}
  .ev-st .db-cbar,.ev-types .db-cbar{display:none}
  .ev-st .db-bn,.ev-types .db-bn{min-width:0;margin-right:0}
  .ev-types th[scope=row]{white-space:normal;min-width:136px;max-width:150px;line-height:1.3}
  .ev-tiles.c4,.ev-tiles.c3,.ev-tiles.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ev-tiles.c3 .db-cr:nth-child(3){grid-column:1 / -1}
  .ev-st .db-bc,.ev-types .db-bc{min-width:0;width:auto}
  .ev-qa h3{font-size:15.5px}
  .ev-notes li{font-size:14px}
  .ev-dl{flex-direction:column;align-items:flex-start}
}
/* 360 px phones: the nearby-states table (no swipe line, four columns) fits without scrolling */
@media (max-width:380px){
  .ev-nbt{font-size:12.5px}
  .ev-nbt th,.ev-nbt td{padding:9px 4px}
  .ev-nbt th[scope=row]{max-width:92px}
  .ev-nbt .ev-chg span{padding:3px 5px;font-size:11px}
}