/* Be EV Wise guide, car and charger pages and contact page: Design.md look (v139, 7 November 2026). Loaded last, after /bw-design.css. APPEARANCE ONLY. */

/* EV Wise's own light/dark tokens, re-pointed for every display setting (the Design.md dark look is used for all) */
html:root, html:root:not([data-theme="light"]), html:root[data-theme]{
  --navy:var(--d-panel); --navy-2:var(--d-hover); --navy-3:var(--d-canvas);
  --coral:var(--d-accent); --coral-2:var(--d-accent); --coral-3:var(--d-accent); --coral-soft:var(--d-accent-tint);
  --blue:var(--d-text); --blue-soft:var(--d-hover); --accent:var(--d-accent);
  --bg:var(--d-canvas); --surface:var(--d-panel); --surface-2:var(--d-hover); --surface-3:var(--d-hover);
  --text:var(--d-text); --text-2:var(--d-text-2); --muted:var(--d-text-2);
  --rule:var(--d-line); --rule-2:var(--d-line-input); --line:var(--d-line);
  --bad:var(--d-red); --bad-soft:var(--d-red-tint);
  --shadow-1:none; --shadow-2:none; --glass:var(--d-hover); --glass-line:var(--d-line-input);
  --font-head:var(--d-display); --font-body:var(--d-body); --r:8px; --r-sm:6px; --r-xs:4px;
  --tyre:var(--d-canvas); --hub:var(--d-text-3); --car-glass:var(--d-hover);
  --ink:var(--d-text); --ink-soft:var(--d-text-2); --paper:var(--d-canvas); --raised:var(--d-panel);
  --signal:var(--d-accent); --signal-dark:var(--d-accent); --signal-soft:var(--d-accent-tint);
  --charge:var(--d-accent); --charge-soft:var(--d-accent-tint); --amber:var(--d-text-2); --amber-soft:var(--d-hover);
  --flag:var(--d-red); --flag-soft:var(--d-red-tint); --focus:var(--d-accent);
  color-scheme:dark;
}
html:root body{ background:var(--d-canvas) !important; color:var(--d-text) !important; }

/* guide, car, comparison and charger pages */
html body :is(.tbl, details.q, .keep, .chart-fig, .diagram, .vs-car, .ucard, .mcard, .page .note){
  background:var(--d-panel) !important; background-image:none !important; border:1px solid var(--d-line) !important; border-radius:8px !important; box-shadow:none !important; color:var(--d-text) !important;
}
html body :is(.mcard, .ucard):hover{ background:var(--d-hover) !important; box-shadow:none !important; transform:none !important; }
html body details.q summary{ color:var(--d-text) !important; }
html body details.q summary:hover{ background:var(--d-hover) !important; }
html body details.q p, html body .keep p, html body .chart-fig figcaption, html body .legend span{ color:var(--d-text-2) !important; }
html body .keep h2{ color:var(--d-text) !important; }
html body .tbl th{ background:var(--d-panel) !important; color:var(--d-text-2) !important; font-family:var(--d-body) !important; }
html body .tbl td{ background:transparent !important; color:var(--d-text) !important; }
html body .tbl td a{ color:var(--d-text) !important; }
html body .tbl td.best{ background:var(--d-green-tint) !important; color:var(--d-text) !important; }
html body .tbl tr:target td{ background:var(--d-accent-tint) !important; }
html body .tbl table:has(th:nth-child(7)) :is(th:first-child, td:first-child){ background:var(--d-panel) !important; box-shadow:inset -1px 0 0 var(--d-line) !important; }
html body .linkgrid{ gap:1px !important; background:var(--d-line); border:1px solid var(--d-line); border-radius:8px; overflow:hidden; }
html body .linkgrid a{ background:var(--d-panel) !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; color:var(--d-text) !important; }
html body .linkgrid a:is(:hover, :focus-visible){ background:var(--d-hover) !important; }
html body .page .note{ border-left:1px solid var(--d-accent) !important; }
html body .page .note.info{ border-left-color:var(--d-text-2) !important; }
html body .note.bad{ background:var(--d-red-tint) !important; border-color:var(--d-red-edge) !important; }
html body .mcard .mthumb{ background:var(--d-hover) !important; background-image:none !important; border-radius:6px !important; }
html body :is(.mcard, .vs-car, .res .thumb, .mini, .cc-top) svg{ color:var(--d-text-2) !important; }
html body .strip{ background:var(--d-line) !important; border-radius:8px !important; }
html body .strip div{ background:var(--d-panel) !important; }
html body .rr-row .bar{ background:var(--d-hover) !important; border-radius:999px !important; }
html body .rr-row .bar span{ background:var(--d-accent) !important; background-image:none !important; border-radius:999px !important; }
html body .rr-row .bar.cold span{ background:var(--d-text-2) !important; }
html body .chip{ border-radius:4px !important; background:var(--d-hover) !important; color:var(--d-text) !important; border:1px solid var(--d-line-input) !important; }
html body :is(.chip.bev, .chip.lfp, .chip.ecg){ background:var(--d-hover) !important; color:var(--d-text) !important; border-color:var(--d-line-input) !important; }
html body :is(.page .chip.price-dn, .pchg .chip.price-dn){ background:var(--d-green-tint) !important; color:var(--d-green) !important; border-color:var(--d-green-edge) !important; }
html body :is(.chip.phev, .chip.hev){ background:var(--d-accent-tint) !important; color:var(--d-accent) !important; border-color:var(--d-accent-edge) !important; }
html body :is(.chip.gone, .page .chip.price-up, .pchg .chip.price-up){ background:var(--d-red-tint) !important; color:var(--d-red) !important; border-color:var(--d-red-edge) !important; }
html body :is(.page .tbl .chip, .page .note .chip){ background:var(--d-hover) !important; }

/* ask EVBot box */
html body .askbox-head h2{ color:var(--d-text) !important; }
html body .askbox{ background:var(--d-panel) !important; background-image:none !important; border:1px solid var(--d-line) !important; border-top:1px solid var(--d-accent) !important; border-radius:8px !important; box-shadow:none !important; }
html body .askbox .eyebrow{ color:var(--d-accent) !important; }
html body .ask-form input{ background:var(--d-canvas) !important; color:var(--d-text) !important; border:1px solid var(--d-line-input) !important; }
html body .ask-out .ans{ background:var(--d-canvas) !important; color:var(--d-text) !important; border:1px solid var(--d-line) !important; border-left:1px solid var(--d-accent) !important; border-radius:6px !important; }
html body .ask-out .typing i{ background:var(--d-text-2) !important; }
html body .btn.signal, html body :is(button, a).btn.signal{ background:var(--d-accent) !important; background-image:none !important; color:var(--d-on-accent) !important; border-color:var(--d-accent) !important; }
html body .btn.ghost{ background:transparent !important; color:var(--d-text) !important; border-color:var(--d-line-input) !important; }
html body .ctray{ border-radius:8px !important; background:var(--d-panel) !important; border:1px solid var(--d-line) !important; }
html body .ctray .slot{ background:var(--d-hover) !important; border-radius:6px !important; }
html body .ctray .slot button{ background:transparent !important; border:1px solid var(--d-line-input) !important; color:var(--d-text) !important; }
html body .crumbs::before{ background:var(--d-accent) !important; }
html body .page .eyebrow::before{ background:var(--d-accent) !important; }

/* charging-curve charts: the curve in amber, the 10-80% average as a grey dashed line, no gradient fill */
html body .chart .grid line{ stroke:var(--d-line); }
html body .chart .axis text{ fill:var(--d-text-2); font-family:var(--d-mono); }
html body .chart .line{ stroke:var(--d-accent); }
html body .chart .area{ fill:var(--d-accent-tint); }
html body .chart .avg{ stroke:var(--d-text-2); }
html body .chart .lbl{ fill:var(--d-text); font-family:var(--d-mono); }
html body .legend > span:nth-child(1) > i{ background:var(--d-accent) !important; }
html body .legend > span:nth-child(2) > i{ background:var(--d-text-2) !important; }

/* car spec header: a plain panel band, no gradient or glow; the car drawing in quiet greys */
html body .sheet-band{ color:var(--d-text) !important; }
html body .sheet-band::before{ background:var(--d-panel) !important; background-image:none !important; border-bottom:1px solid var(--d-line); }
html body .sheet-band h1{ color:var(--d-text) !important; }
html body .sheet-band .variant, html body .sheet-price span{ color:var(--d-text-2) !important; }
html body .sheet-price b{ color:var(--d-text) !important; font-family:var(--d-mono) !important; }
html body .sheet-band svg.body{ color:var(--d-text-2) !important; filter:none !important; }
html body .sheet-band .tyre{ --tyre:var(--d-canvas); --hub:var(--d-text-3); --car-glass:var(--d-hover); }
html body .strip b{ color:var(--d-text) !important; font-family:var(--d-mono) !important; }
html body .strip span{ color:var(--d-text-2) !important; }