/* Be EV Wise guide and model pages: v95 layer (16 Oct 2026).
   Loaded last on every /ev-wise/ page. Adds the spec-sheet band, model cards, charts, the "Ask about this page"
   box, the compare tray and a dark mode, and lifts cards, tables and buttons to match the app. */
:root{--navy:#14213D;--navy-2:#1B2A4A;--navy-3:#0D1629;--coral:#E4572E;--coral-2:#C2461F;--coral-3:#A63B19;--coral-soft:#FCF1EC;--blue:#2C5E8C;--blue-soft:#E7EFF8;--accent:#3A7BD5;
  --surface:#fff;--surface-2:#F6F8FB;--surface-3:#EEF1F6;--text:#14213D;--text-2:#3E4A63;--muted:#56637A;--line:#D9DFE8;--line-2:#C3CCD9;
  --shadow-1:0 1px 2px rgba(20,33,61,.06),0 4px 14px rgba(20,33,61,.06);--shadow-2:0 2px 6px rgba(20,33,61,.08),0 18px 40px rgba(20,33,61,.14);--car-glass:#DCE6F2;--tyre:#0D1629;--hub:#C3CCD9}
.wrap.page{max-width:1120px}
.page .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.74rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--coral-2)}
.page .eyebrow::before{content:"";width:18px;height:2px;background:currentColor;border-radius:2px}
.btn{border-radius:999px!important;transition:background .18s,border-color .18s,transform .12s,box-shadow .18s}
.btn.signal{background:linear-gradient(180deg,#E8603A,#C2461F)!important;border-color:#C2461F!important;box-shadow:0 6px 18px rgba(194,70,31,.25)}
.btn.signal:hover{background:linear-gradient(180deg,#D9532D,#A63B19)!important}
.btn.xs{padding:4px 10px;font-size:.78rem;min-height:30px}
.tbl{border-radius:12px!important;box-shadow:var(--shadow-1)}
.tbl th{font-size:.78rem;text-transform:uppercase;letter-spacing:.02em}
.tbl td.best{background:var(--blue-soft);font-weight:700;color:var(--text)}
details.q{border-radius:12px!important;box-shadow:var(--shadow-1)}
.linkgrid a{border-radius:10px!important;transition:border-color .15s,transform .15s}
.linkgrid a:hover{transform:translateY(-1px);border-color:var(--coral-2)!important}
.linkgrid small{display:block;font-weight:400;color:var(--muted);font-size:.78rem}
.keep{border-radius:16px!important}

/* chips */
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.chip{display:inline-flex;align-items:center;font-size:.72rem;font-weight:700;border-radius:999px;padding:3px 9px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);color:#fff;white-space:nowrap}
.chip.ecg{background:linear-gradient(180deg,#E8603A,#C2461F);border-color:transparent}
.chip.bev,.chip.lfp{background:#E7EFF8;color:#1F4466;border-color:transparent}
.chip.phev{background:#FCF1EC;color:#7A2C12;border-color:transparent}
.chip.hev{background:#F1F3F7;color:#3E4A63;border-color:transparent}
.chip.gone{background:#F8ECEA;color:#A23B3B;border-color:transparent}
.page .chip.price-dn,.pchg .chip.price-dn{background:var(--blue-soft);color:var(--blue);border-color:transparent;margin-left:6px}
.page .chip.price-up,.pchg .chip.price-up{background:var(--coral-soft);color:var(--coral-3);border-color:transparent;margin-left:6px}
.page .tbl .chip,.page .note .chip{border-color:var(--line-2);background:var(--surface-2);color:var(--text)}

/* spec-sheet band */
.sheet-band{position:relative;isolation:isolate;color:#fff;padding:26px 0 28px;margin:-6px 0 22px}
.sheet-band::before{content:"";position:absolute;z-index:-1;inset:0 auto 0 50%;width:100vw;transform:translateX(-50%);background:radial-gradient(900px 300px at 80% 0%,rgba(58,123,213,.3),transparent 60%),linear-gradient(165deg,#1B2A4A,#14213D 60%,#0D1629)}
.sheet-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:26px;align-items:center}
.sheet-band h1{color:#fff!important;margin:8px 0 6px!important;max-width:none!important}
.sheet-band .variant{color:rgba(255,255,255,.78);margin:0}
.sheet-price{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;margin-top:10px}
.sheet-price b{font-family:var(--font-head,Georgia);font-size:1.9rem;font-weight:600;color:#fff}
.sheet-price span{color:rgba(255,255,255,.75);font-size:.88rem}
.sheet-band svg.body{width:100%;max-width:420px;display:block;margin:0 auto;color:#E9EEF6;filter:drop-shadow(0 16px 18px rgba(0,0,0,.4))}
.sheet-band .tyre{--tyre:#050A14;--hub:#8E9AAE;--car-glass:#5B86BF}
.strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);border-radius:14px;overflow:hidden;margin-top:18px}
.strip div{background:rgba(13,22,41,.55);padding:12px 12px 10px;min-width:0}
.strip b{display:block;font-family:var(--font-head,Georgia);font-size:1.25rem;font-weight:600;line-height:1.1;white-space:nowrap;color:#fff}
.strip span{display:block;font-size:.72rem;color:rgba(255,255,255,.72);margin-top:3px}
@media (max-width:860px){.sheet-grid{grid-template-columns:1fr}.strip{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* model cards */
.mcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin:14px 0}
.mcard{display:flex;flex-direction:column;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;text-decoration:none!important;color:var(--text)!important;box-shadow:var(--shadow-1);transition:transform .2s,box-shadow .2s}
.mcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.mcard .mthumb{background:radial-gradient(130% 80% at 50% 100%,var(--surface-3),var(--surface) 70%);border-radius:10px;padding:6px 10px}
.mcard svg{width:100%;color:var(--navy);display:block}
.mcard b{font-family:var(--font-head,Georgia);font-size:1.05rem;font-weight:600}
.mcard .small{color:var(--muted)}

/* charts and range bars */
.chart-fig{margin:14px 0;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;box-shadow:var(--shadow-1)}
.chart{width:100%;height:auto;display:block}
.chart .grid line{stroke:var(--line);stroke-width:1}
.chart .axis text{fill:var(--muted);font-size:11px;font-family:var(--font-body,Arial)}
.chart .line{fill:none;stroke:var(--blue);stroke-width:2.2}
.chart .area{fill:url(#evwArea)}
.chart .avg{stroke:var(--coral-2);stroke-width:1.6;stroke-dasharray:5 4}
.chart .lbl{font-size:11.5px;font-family:var(--font-body,Arial);fill:var(--text-2);font-weight:600}
.chart-fig figcaption{font-size:.8rem;color:var(--muted);margin-top:8px}
.legend{display:inline-flex;gap:14px;flex-wrap:wrap;margin-right:8px}
.legend i{display:inline-block;width:16px;height:3px;border-radius:3px;vertical-align:middle;margin-right:6px}
.rr{display:grid;gap:9px;margin:12px 0;max-width:820px}
.rr-row{display:grid;grid-template-columns:190px 1fr 70px;gap:10px;align-items:center;font-size:.9rem}
.rr-row .bar{height:12px;border-radius:12px;background:var(--surface-3);overflow:hidden;border:1px solid var(--line)}
.rr-row .bar span{display:block;height:100%;border-radius:12px;background:linear-gradient(90deg,var(--accent),var(--blue))}
.rr-row .bar.cold span{background:linear-gradient(90deg,#7FA3D6,#3D5F8F)}
.rr-row b{text-align:right}
@media (max-width:560px){.rr-row{grid-template-columns:1fr 60px}.rr-row .bar{grid-column:1/-1;order:3}}
.diagram{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;margin:14px 0;box-shadow:var(--shadow-1)}
.diagram svg{display:block;width:100%;height:auto}
.diagram figcaption{font-size:.82rem;color:var(--muted);margin-top:6px}
.dg-box{fill:var(--surface-2);stroke:var(--line-2)}.dg-txt{fill:var(--text);font-family:var(--font-body,Arial);font-size:13px;font-weight:600}.dg-sub{fill:var(--muted);font-family:var(--font-body,Arial);font-size:11.5px}.dg-line{stroke:var(--blue);stroke-width:3;fill:none}.dg-dc{stroke:var(--coral-2);stroke-width:3;fill:none}

/* versus */
.vs-head{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;margin:10px 0 18px}
.vs-car{display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px;text-decoration:none!important;color:var(--text)!important;box-shadow:var(--shadow-1);transition:transform .2s}
.vs-car:hover{transform:translateY(-3px)}
.vs-car svg{width:100%;max-width:240px;color:var(--navy)}
.vs-car b{font-family:var(--font-head,Georgia);font-size:1.15rem;font-weight:600;text-align:center}
.vs-car span{color:var(--muted);font-size:.86rem}
.vs-x{font-family:var(--font-head,Georgia);font-size:1.6rem;color:var(--coral-2);font-style:italic}

/* used */
.ucards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin:12px 0}
.ucard{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:var(--shadow-1);display:flex;flex-direction:column;gap:6px;text-decoration:none!important;color:var(--text)!important;transition:transform .2s,box-shadow .2s}
.ucard:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.ucard h3{margin:0!important;font-size:1.08rem}.ucard p{margin:0!important;font-size:.9rem}.ucard .go{color:var(--coral-2);font-weight:600;font-size:.88rem;margin-top:auto}
.check{list-style:none!important;padding:0!important;display:grid;gap:8px}
.check li{position:relative;padding-left:30px}
.check li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:6px;border:2px solid var(--blue)}

/* note */
.page .note{background:var(--surface-2);border-left:4px solid var(--navy-2);padding:11px 15px;border-radius:0 10px 10px 0;margin:14px 0}
.page .note.info{background:var(--blue-soft);border-left-color:var(--blue)}
.page .note p{margin:0}

/* ask box */
.askbox{margin:34px 0 10px;background:linear-gradient(165deg,#1B2A4A,#14213D 60%,#0D1629);color:#fff;border-radius:18px;padding:22px;box-shadow:var(--shadow-2)}
.askbox h2{color:#fff!important;margin:4px 0 4px!important}
.askbox p{color:rgba(255,255,255,.8)!important}
.askbox .eyebrow{color:#FFB59E!important}
.ask-form{display:flex;gap:8px;margin-top:10px}
.ask-form input{flex:1;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;padding:10px 16px;font:inherit;font-size:16px;min-height:44px}
.ask-form input::placeholder{color:rgba(255,255,255,.6)}
.ask-out{margin-top:12px}
.ask-out .ans{background:#fff;color:var(--text);border-radius:14px;padding:14px 16px;line-height:1.55}
.ask-out .ans p{color:var(--text-2)!important}
.ask-out .cite{display:block;font-size:.78rem;color:var(--muted);margin-top:8px}
.ask-out .typing i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#fff;margin-right:4px;animation:pgDot 1s infinite}
.ask-out .typing i:nth-child(2){animation-delay:.15s}.ask-out .typing i:nth-child(3){animation-delay:.3s}
@keyframes pgDot{0%,80%,100%{opacity:.25}40%{opacity:1}}

/* compare tray */
.ctray{position:fixed;left:50%;bottom:16px;transform:translate(-50%,140%);visibility:hidden;z-index:80;display:flex;align-items:center;gap:10px;padding:10px 10px 10px 16px;background:rgba(20,33,61,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff;border:1px solid rgba(255,255,255,.16);border-radius:999px;box-shadow:0 18px 40px rgba(0,0,0,.35);transition:transform .35s cubic-bezier(.2,.8,.2,1.1),visibility .35s;max-width:calc(100vw - 24px)}
.ctray.show{transform:translate(-50%,0);visibility:visible}
.ctray .slots{display:flex;gap:6px}
.ctray .slot{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:4px 6px 4px 10px;font-size:.8rem;max-width:180px}
.ctray .slot span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctray .slot button{background:rgba(255,255,255,.14);border:0;color:#fff;width:22px;height:22px;border-radius:50%;cursor:pointer;flex:none}
.ctray .clear{background:none;border:0;color:rgba(255,255,255,.7);cursor:pointer;font-size:.82rem;text-decoration:underline}
@media (max-width:640px){.ctray{border-radius:18px;left:12px;right:12px;transform:translateY(140%);flex-wrap:wrap;justify-content:space-between}.ctray.show{transform:none}.ctray .slot{max-width:110px}}
.price-hist svg{vertical-align:middle}
@media print{.ctray,.askbox{display:none!important}}

/* dark mode (follows the app's switch, or the device setting) */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--surface:#111B31;--surface-2:#16223D;--surface-3:#1B2949;--text:#E9EEF6;--text-2:#C3CCDB;--muted:#9AA7BD;--line:#24345A;--line-2:#31446F;--blue:#7FB0F0;--blue-soft:#17294A;--coral-soft:#3A1E17;--coral-3:#FF8D69;--car-glass:#3B5A86;--hub:#5A6B8A;
  --bw-mist:#0A1120;--bw-tint:#16223D;--bw-rule:#24345A;--bw-rule-strong:#31446F;--bw-text:#C3CCDB;--bw-steel:#9AA7BD;--bw-ink:#E9EEF6;--bw-blue:#7FB0F0;--bw-blue-bg:#17294A;--ink:#E9EEF6;--ink-soft:#C3CCDB;--paper:#0A1120;--raised:#111B31;--rule:#24345A;--rule-strong:#31446F}}
:root[data-theme="dark"]{--surface:#111B31;--surface-2:#16223D;--surface-3:#1B2949;--text:#E9EEF6;--text-2:#C3CCDB;--muted:#9AA7BD;--line:#24345A;--line-2:#31446F;--blue:#7FB0F0;--blue-soft:#17294A;--coral-soft:#3A1E17;--coral-3:#FF8D69;--car-glass:#3B5A86;--hub:#5A6B8A;
  --bw-mist:#0A1120;--bw-tint:#16223D;--bw-rule:#24345A;--bw-rule-strong:#31446F;--bw-text:#C3CCDB;--bw-steel:#9AA7BD;--bw-ink:#E9EEF6;--bw-blue:#7FB0F0;--bw-blue-bg:#17294A;--ink:#E9EEF6;--ink-soft:#C3CCDB;--paper:#0A1120;--raised:#111B31;--rule:#24345A;--rule-strong:#31446F}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body,:root:not([data-theme="light"]) html{background:#0A1120!important;color:#E9EEF6}
  :root:not([data-theme="light"]) .tbl,:root:not([data-theme="light"]) details.q,:root:not([data-theme="light"]) .linkgrid a,:root:not([data-theme="light"]) .keep,:root:not([data-theme="light"]) .tbl th{background:var(--surface)!important;border-color:var(--line)!important;color:var(--text)}
  :root:not([data-theme="light"]) .masthead{background:#14213D}
  :root:not([data-theme="light"]) .mcard svg,:root:not([data-theme="light"]) .vs-car svg{color:#D4DCEA}}
:root[data-theme="dark"] body,:root[data-theme="dark"] html{background:#0A1120!important;color:#E9EEF6}
:root[data-theme="dark"] .tbl,:root[data-theme="dark"] details.q,:root[data-theme="dark"] .linkgrid a,:root[data-theme="dark"] .keep,:root[data-theme="dark"] .tbl th{background:var(--surface)!important;border-color:var(--line)!important;color:var(--text)}
:root[data-theme="dark"] .mcard svg,:root[data-theme="dark"] .vs-car svg{color:#D4DCEA}