/* EV explorer, styled after the live site (www.tasclimatecollective.org): white header, Montserrat light headings, teal banners, coral pill buttons, dark-teal footer. */
:root{
  --teal:#0b95a1;--teal-dark:#054e54;--coral:#ee4c3f;--coral-dark:#c43328;
  --slate:#455457;--slate-muted:#677e82;--grey-100:#f2f2f2;--grey-300:#d5d5d5;--border:#e0e0e0;
  --pill-bg:#e0f2f1;--pill-text:#00695c;--focus:#1a6aff;
  --font-head:"Montserrat",system-ui,sans-serif;--font-body:"Open Sans",system-ui,sans-serif;
  --radius:12px;--shadow:0 1px 3px rgb(0 0 0/.12);
  --gutter:clamp(1rem,4vw,1.75rem);--max:76rem;--header-h:7.4rem;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 1rem)}
body{margin:0;background:#fff;color:var(--slate);font:400 1rem/1.6 var(--font-body);min-height:100dvh;display:flex;flex-direction:column}
main{flex:1}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--font-head);color:var(--slate);line-height:1.25;margin:0 0 .75rem}
h2{font-weight:400;font-size:1.75rem}
h3{font-weight:700;font-size:1rem}
p{margin:0 0 1rem}
a{color:var(--teal-dark)}
a:hover{color:var(--teal)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:2px}
.wrap,.container{width:min(100% - 2*var(--gutter),var(--max));margin-inline:auto}
.skip-link{position:absolute;left:.75rem;top:-4rem;background:var(--teal-dark);color:#fff;padding:.75rem 1rem;border-radius:8px;z-index:100}
.skip-link:focus{top:.75rem}
.section{padding-block:2.5rem}
.section--tint{background:var(--grey-100)}
.eyebrow{font:600 .75rem var(--font-head);letter-spacing:.08em;text-transform:uppercase;margin:0 0 .5rem}

/* Pills / buttons: coral, fully rounded, Montserrat regular caps as on the live site */
.pill,.btn{display:inline-flex;align-items:center;justify-content:center;min-height:2.75rem;padding:0 1.1rem;border-radius:999px;border:2px solid var(--coral);background:var(--coral);color:#fff;font:400 1rem/1 var(--font-head);text-decoration:none;cursor:pointer;white-space:nowrap}
.pill:hover,.btn:hover{background:var(--coral-dark);border-color:var(--coral-dark);color:#fff}
.btn--ghost{background:#fff;color:var(--slate);border-color:var(--slate-muted)}
.btn--ghost:hover{background:var(--slate);border-color:var(--slate);color:#fff}
.btn--sm{min-height:2.25rem;padding:0 .9rem;font-size:.875rem}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:#fff;box-shadow:0 1px 0 var(--border)}
.site-header__bar{display:flex;align-items:center;gap:1rem;min-height:6.5rem;width:min(100% - 2*var(--gutter),var(--max));margin-inline:auto}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:var(--teal-dark);font:700 1rem/1.4 var(--font-head);margin-right:auto}
.brand img{width:5.5rem;height:auto}
.brand span{display:none}
.nav-toggle{min-height:2.5rem;padding:0 .9rem;border:2px solid var(--slate-muted);border-radius:8px;background:#fff;color:var(--slate);font:500 .9rem var(--font-head);cursor:pointer}
.site-header__join{display:none}
.site-nav{display:none;position:absolute;inset:100% 0 auto 0;background:#fff;box-shadow:0 8px 16px rgb(0 0 0/.12);padding:.5rem var(--gutter) 1rem}
.site-header[data-open] .site-nav{display:block}
.site-nav ul{list-style:none;margin:0;padding:0}
.site-nav a{display:block;padding:.7rem 0;color:var(--slate);font:400 1rem var(--font-head);text-decoration:none;border-bottom:1px solid var(--border)}
.site-nav a:hover,.site-nav [aria-current=page]{color:var(--coral)}
@media (min-width:1000px){
  .brand span{display:block}
  .nav-toggle{display:none}
  .site-nav{display:block;position:static;box-shadow:none;padding:0}
  .site-nav ul{display:flex;gap:1.4rem}
  .site-nav a{border:0;padding:.25rem 0}
  .site-header__join{display:inline-flex}
}

/* Hero banner: bright teal like the live page banners */
.ev-hero{background:var(--teal);color:#fff;padding-block:2.5rem}
.ev-hero h1{color:#fff;font-weight:700;font-size:clamp(1.9rem,1.2rem + 3vw,3rem);margin-bottom:.75rem}
.ev-hero .eyebrow{color:#fff;opacity:.9}
.ev-hero__lead{max-width:46rem;font-size:1.125rem;font-weight:400}
.ev-hero__meta{margin:0;font-size:.8125rem;opacity:.9}

/* Three-step intro */
.ev-steps{background:var(--grey-100)}
.ev-steps__list{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:1rem}
@media (min-width:860px){.ev-steps__list{grid-template-columns:repeat(3,1fr)}}
.ev-step{position:relative;background:#fff;border:1px solid var(--border);border-left:3px solid var(--teal);border-bottom:3px solid var(--teal);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.25rem 1.25rem .5rem}
.ev-step h3{font-size:1.125rem;margin:.5rem 0 .6rem}
.ev-step__n{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:50%;background:var(--teal);color:#fff;font:700 1.125rem var(--font-head)}
.ev-steps__note{font-size:.9375rem;color:var(--slate-muted);margin:0}
.ev-explorer__h{margin-bottom:.5rem}
.ev-explorer__lead{max-width:46rem}
.ev-explorer__meta{font-size:.8125rem;color:var(--slate-muted);margin-bottom:1.5rem}

/* Layout */
.ev-layout{display:grid;gap:1.5rem}
@media (min-width:960px){.ev-layout{grid-template-columns:19rem minmax(0,1fr);align-items:start}.ev-filters{position:sticky;top:calc(var(--header-h) + .75rem);max-height:calc(100dvh - var(--header-h) - 1.5rem);overflow-y:auto}}
.ev-filters__box{background:#fff;border:1px solid var(--border);border-left:3px solid var(--teal);border-radius:var(--radius);box-shadow:var(--shadow)}
.ev-filters__box>summary{font:400 1.5rem var(--font-head);color:var(--slate);padding:1rem 1.1rem;cursor:pointer;display:flex;align-items:center;list-style:none}
.ev-filters__box>summary::-webkit-details-marker{display:none}
.ev-filters__box>summary::after{content:"▾";margin-left:auto;font-size:1rem}
.ev-filters__box:not([open])>summary::after{content:"▸"}
.ev-filters__count{font:600 .75rem var(--font-body);background:var(--coral);color:#fff;border-radius:999px;padding:.1rem .6rem;margin-left:.6rem}
.ev-filters__count:empty{display:none}
#ev-form{padding:0 1.1rem 1.1rem;display:grid;gap:1rem}
#ev-form fieldset{border:0;padding:0;margin:0;min-width:0}
#ev-form legend,#ev-form label{font:600 .875rem var(--font-body);color:var(--slate);display:block;margin-bottom:.25rem;padding:0}
#ev-form output{color:var(--teal);font-weight:700}
#ev-form input[type=search],#ev-form select{width:100%;min-height:2.6rem;padding:0 .8rem;font:400 1rem var(--font-body);border:1px solid var(--grey-300);border-radius:8px;background:#fff;color:var(--slate)}
#ev-form input[type=range]{width:100%;accent-color:var(--teal)}
#ev-form .hint{font-size:.8125rem;color:var(--slate-muted);margin:.25rem 0 0}
.ev-check{display:flex!important;gap:.5rem;align-items:center;font-weight:400!important;min-height:2rem;cursor:pointer}
.ev-check input{width:1.1rem;height:1.1rem;accent-color:var(--teal)}
.ev-checks{display:grid;grid-template-columns:1fr 1fr;gap:0 .75rem}
.ev-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.ev-chip{font:400 .8125rem var(--font-body);padding:.3rem .8rem;border-radius:999px;border:0;background:var(--pill-bg);color:var(--pill-text);cursor:pointer;min-height:2rem}
.ev-chip:hover{background:#c8e6e3}
.ev-chip[aria-pressed=true]{background:var(--teal);color:#fff}

/* Results */
.ev-results__bar{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:space-between;align-items:center;margin-bottom:1rem}
.ev-results__count{margin:0;font:400 1.5rem var(--font-head);color:var(--slate)}
.ev-sort{display:flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:600}
.ev-sort select{min-height:2.6rem;padding:0 .8rem;border:1px solid var(--grey-300);border-radius:8px;background:#fff;font:400 .9375rem var(--font-body);color:var(--slate)}
.ev-grid{list-style:none;margin:0;padding:0;display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr))}
.ev-card{background:#fff;border:1px solid var(--border);border-left:3px solid var(--teal);border-bottom:3px solid var(--teal);border-radius:var(--radius);box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden;height:100%}
.ev-card__top{padding:1rem 1rem .5rem}
.ev-card__make{font:700 .8125rem var(--font-body);color:var(--slate-muted);margin:0}
.ev-card h3{font-size:1.25rem;margin:.1rem 0 .5rem}
.ev-card__price{font:700 1.5rem var(--font-head);color:var(--coral);margin:0}
.ev-card__price small{font:400 .8125rem var(--font-body);color:var(--slate-muted)}
.tags{display:flex;flex-wrap:wrap;gap:.35rem .5rem;list-style:none;margin:.6rem 0 0;padding:0}
.tag{display:inline-block;padding:.2rem .75rem;font-size:.75rem;background:var(--pill-bg);color:var(--pill-text);border-radius:999px}
.tag--tas{background:#fff3cd;color:#664d03}
.ev-card__stats{display:grid;grid-template-columns:1fr 1fr;gap:.5rem .75rem;margin:0;padding:.75rem 1rem;border-top:1px solid var(--border)}
.ev-card__stats div{min-width:0}
.ev-card__stats dt{font-size:.6875rem;text-transform:uppercase;letter-spacing:.05em;color:var(--slate-muted);font-weight:600}
.ev-card__stats dd{margin:0;font-weight:600;color:var(--slate);overflow-wrap:anywhere}
.ev-card__ethics{padding:.5rem 1rem .75rem}
.ev-meter{display:flex;align-items:center;gap:.75rem;font-size:.8125rem}
.ev-meter__bar{flex:1;height:.5rem;background:var(--grey-100);border-radius:999px;overflow:hidden}
.ev-meter__bar span{display:block;height:100%;background:var(--teal);border-radius:inherit}
.ev-meter b{font-family:var(--font-head);color:var(--teal-dark)}
.ev-lowconf{color:var(--coral-dark);font-size:.75rem;margin:.25rem 0 0}
.ev-card__foot{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.7rem 1rem;background:var(--grey-100);font-size:.8125rem}
.ev-card__foot label{display:flex;gap:.5rem;align-items:center;cursor:pointer;font-family:var(--font-head);color:var(--slate)}
.ev-card__foot input{width:1.1rem;height:1.1rem;accent-color:var(--teal)}
.ev-empty{padding:2.5rem 0;text-align:center;font-size:1.125rem}
.ev-notes__cols{display:grid;gap:1.5rem;margin-bottom:1rem}
@media (min-width:800px){.ev-notes__cols{grid-template-columns:repeat(3,1fr)}}

/* Compare */
.ev-compare{position:fixed;inset:auto 0 0 0;background:var(--teal-dark);color:#fff;z-index:40;padding:.75rem 0;box-shadow:0 -2px 12px rgb(0 0 0/.2)}
.ev-compare[hidden]{display:none}
.ev-compare__inner{display:flex;align-items:center;gap:.75rem}
.ev-compare__inner p{margin:0 auto 0 0}
.ev-compare .btn--ghost{background:transparent;color:#fff;border-color:#fff}
.ev-compare .btn--ghost:hover{background:#fff;color:var(--teal-dark)}
.ev-dialog{width:min(64rem,calc(100% - 1rem));max-height:90dvh;padding:0;border:0;border-radius:var(--radius);box-shadow:0 10px 40px rgb(0 0 0/.35);color:var(--slate)}
.ev-dialog::backdrop{background:rgb(0 0 0/.5)}
.ev-dialog__head{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid var(--border);position:sticky;top:0;background:#fff}
.ev-dialog__head h2{margin:0}
.ev-dialog__scroll{overflow:auto;max-height:calc(90dvh - 4.5rem);padding:1rem}
.ev-table{border-collapse:collapse;width:100%;min-width:34rem}
.ev-table th,.ev-table td{text-align:left;padding:.5rem .75rem;border-bottom:1px solid var(--border);vertical-align:top}
.ev-table thead th{font:700 1rem var(--font-head);color:var(--teal-dark)}
.ev-table tbody th{font-weight:600;color:var(--slate-muted);font-size:.875rem;width:11rem}
.ev-table td.best{background:var(--pill-bg);font-weight:700;color:var(--pill-text)}

/* "Climate action now" band and footer */
.cta-band{background:var(--teal);color:#fff;padding-block:1.75rem;margin-top:0}
.cta-band__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem}
.cta-band p{margin:0}
.cta-band__title{font:700 2.25rem/1 var(--font-head)}
.cta-band__title span{color:var(--coral)}
.cta-band__text{font-family:var(--font-head);flex:1 1 16rem;max-width:24rem}
.site-footer{background:var(--teal-dark);color:#fff;padding-top:2.5rem}
.site-footer a{color:#fff}
.site-footer h2{font:700 1rem var(--font-body);color:#fff;margin-bottom:.75rem}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:.25rem}
.site-footer__cols{display:grid;gap:2rem}
@media (min-width:800px){.site-footer__cols{grid-template-columns:1.4fr 1fr 1.4fr}}
.site-footer__brand{display:flex;align-items:center;gap:.75rem;font:700 1.125rem/1.3 var(--font-head)}
.site-footer__brand img{width:3.1rem;height:auto}
.site-footer__legal{text-align:center;padding-block:1.5rem 2rem;color:var(--grey-300);font-size:.9375rem}
.site-footer__legal p{margin:0 0 .25rem}
body:has(.ev-compare:not([hidden])) .site-footer{padding-bottom:4rem}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}