/* ═══════════════════════════════════════════════════════════════════
   EV battery site — page furniture

   Sits on /demos/demo.css, which carries the Clickflame house tokens,
   type and buttons. Only what this site needs lives here.

   The bite and snack classes implement the house content rule: every
   deep page opens with a one sentence answer, then a four point box,
   then the full copy. See bite-snack-meal-content in memory.
═══════════════════════════════════════════════════════════════════ */

/* ── Nav ─────────────────────────────────────────────────────────── */
.sitenav { display:flex; gap:24px; flex-wrap:wrap; align-items:center; min-width:0 }
.sitenav a {
  font-family:var(--font-sub); font-weight:700; font-size:.95rem; letter-spacing:.11em;
  text-transform:uppercase; text-decoration:none; color:var(--ink-600);
  padding-bottom:3px; position:relative; white-space:nowrap;
}
.sitenav a::after {
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--orange);
  transform:scaleX(0); transform-origin:left; transition:transform .22s ease;
}
.sitenav a:hover { color:var(--ink-900) }
.sitenav a:hover::after, .sitenav a[aria-current="page"]::after { transform:scaleX(1) }
.sitenav a[aria-current="page"] { color:var(--ink-900) }
@media (max-width:900px){
  .topbar .wrap { padding-block:12px }
  .sitenav { order:3; width:100%; gap:16px }
  .sitenav a { font-size:.87rem }
}

.crumbs { border-bottom:1px solid var(--border); background:var(--cream) }
.crumbs .wrap {
  padding-block:11px; font-family:var(--font-sub); font-size:.94rem; letter-spacing:.04em;
  color:var(--ink-500); display:flex; flex-wrap:wrap; align-items:center;
}
.crumbs a { color:var(--ink-600); text-decoration:none }
.crumbs a:hover { color:var(--orange-deep); text-decoration:underline }
.crumbs .sep { color:var(--border-strong); padding-inline:7px }

/* ── Bite. One sentence answer, the key phrase bold. ─────────────── */
.bite {
  border-left:4px solid var(--orange); background:var(--cream);
  padding:22px 26px; margin-bottom:28px; font-size:1.34rem; line-height:1.5;
  color:var(--ink-900); max-width:68ch;
}
.bite b { font-weight:700 }
.band--ink .bite { background:rgba(255,255,255,.06); color:var(--on-ink) }

/* ── Snack. Four points, skimmable. ──────────────────────────────── */
.snack {
  border:1px solid var(--border-strong); padding:22px 24px; margin-bottom:34px;
  background:var(--panel); max-width:74ch;
}
.snack h2, .snack h3 {
  font-family:var(--font-sub); font-weight:700; font-size:.92rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-500); margin-bottom:14px;
}
.snack ul { list-style:none; display:flex; flex-direction:column; gap:11px }
.snack li { padding-left:28px; position:relative; color:var(--ink-800);
            font-size:1.08rem; line-height:1.55 }
.snack li::before {
  content:''; position:absolute; left:2px; top:.62em; width:11px; height:6px;
  border-left:2.5px solid var(--orange); border-bottom:2.5px solid var(--orange);
  transform:rotate(-45deg);
}
.snack li b { color:var(--ink-900) }

/* ── Meal. Long form prose. ──────────────────────────────────────── */
.meal { max-width:70ch }
.meal h2 {
  font-family:var(--font-head); font-weight:400; text-transform:uppercase;
  font-size:clamp(1.6rem,2.6vw,2.2rem); line-height:1; letter-spacing:.006em;
  margin:40px 0 12px; color:var(--ink-900);
}
.meal h2:first-child { margin-top:0 }
.meal h3 {
  font-family:var(--font-sub); font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  font-size:1.14rem; margin:30px 0 8px; color:var(--ink-900);
}
.meal p { margin-bottom:16px }
.meal ul, .meal ol { margin:0 0 18px 20px; display:flex; flex-direction:column; gap:9px }
.meal li { line-height:1.6 }
.meal > :last-child { margin-bottom:0 }

/* ── Sourced fact. Every number on this site carries one. ────────── */
.src {
  display:block; font-size:.95rem; color:var(--ink-500); margin-top:8px;
  font-family:var(--font-sub); letter-spacing:.02em;
}
.src a { color:var(--ink-500) }
.unverified {
  border-left:3px solid var(--watch); background:var(--watch-bg); padding:14px 18px;
  margin:18px 0; font-size:1.06rem; color:var(--ink-800); max-width:68ch;
}

/* ── Maker cards. A list with real substance per row. ────────────── */
.makers { list-style:none; border-top:1px solid var(--border) }
.maker {
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px 22px; align-items:start;
  padding:18px 2px; border-bottom:1px solid var(--border);
}
.maker__link { text-decoration:none; min-width:0 }
.maker__name {
  display:block; font-family:var(--font-sub); font-weight:700; font-size:1.26rem;
  letter-spacing:.02em; color:var(--ink-900); line-height:1.3;
}
.maker__link:hover .maker__name { color:var(--orange-deep) }
.maker__meta { display:block; font-size:1.01rem; color:var(--ink-500); margin-top:4px; line-height:1.5 }
.maker__cars { grid-column:1/-1; font-size:1.03rem; color:var(--ink-700); line-height:1.5 }
.maker__tags { display:flex; gap:6px; flex-wrap:wrap; flex-shrink:0 }
.band--ink .makers { border-top-color:rgba(255,255,255,.14) }
.band--ink .maker { border-bottom-color:rgba(255,255,255,.14) }
.band--ink .maker__name { color:var(--on-ink) }
.band--ink .maker__meta, .band--ink .maker__cars { color:var(--on-ink-mute) }

/* ── Spec sheet. Grouped, not a hairline under every row. ────────── */
.spec { border-top:2px solid var(--ink-900) }
.spec__row {
  display:grid; grid-template-columns:210px minmax(0,1fr); gap:10px 28px;
  padding:15px 0; border-bottom:1px solid var(--border);
}
.spec__row dt {
  font-family:var(--font-sub); font-weight:700; font-size:.9rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-500); padding-top:3px;
}
.spec__row dd { color:var(--ink-900); font-size:1.16rem; line-height:1.45 }
.spec__row dd small {
  display:block; font-size:1.01rem; color:var(--ink-600); margin-top:5px; line-height:1.55;
  max-width:60ch;
}
@media (max-width:640px){ .spec__row{ grid-template-columns:1fr; gap:3px } .spec__row dt{ padding-top:0 } }

/* ── Chemistry tiles. Varied, not six identical cards. ───────────── */
.chems { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1px; background:var(--border) }
.chem { background:var(--page); padding:24px 22px }
.band--cream .chem { background:var(--cream) }
.chem__code {
  font-family:var(--font-head); font-size:2.3rem; line-height:1; color:var(--orange-strong);
  letter-spacing:.02em; margin-bottom:6px;
}
.chem__name { font-family:var(--font-sub); font-weight:700; letter-spacing:.04em; color:var(--ink-900); margin-bottom:9px }
.chem p { font-size:1.04rem; line-height:1.55; color:var(--ink-700); margin:0 }

/* ── FAQ. Real details, mirrored in JSON-LD. ─────────────────────── */
.faq { border-top:1px solid var(--border); max-width:72ch }
.faq details { border-bottom:1px solid var(--border) }
.faq summary {
  padding:16px 0; cursor:pointer; font-family:var(--font-sub); font-weight:700;
  font-size:1.16rem; letter-spacing:.02em; color:var(--ink-900); list-style:none;
  display:flex; justify-content:space-between; gap:16px; align-items:center;
}
.faq summary::-webkit-details-marker { display:none }
.faq summary::after { content:'+'; color:var(--orange-strong); font-size:1.4rem; line-height:1; flex-shrink:0 }
.faq details[open] summary::after { content:'\2013' }
.faq details > div { padding:0 0 18px; color:var(--ink-700); max-width:66ch }
.faq details > div p + p { margin-top:12px }

/* ── Jump chips for long index pages ─────────────────────────────── */
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:30px }
.chips a {
  font-family:var(--font-sub); font-weight:700; font-size:.9rem; letter-spacing:.07em;
  text-transform:uppercase; text-decoration:none; color:var(--ink-700);
  border:1px solid var(--border-strong); padding:8px 13px;
}
.chips a:hover { border-color:var(--orange); color:var(--orange-deep) }

.hero-split { display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); gap:clamp(28px,4vw,54px); align-items:center }
@media (max-width:860px){ .hero-split{ grid-template-columns:1fr } }

/* .counts now lives in demo.css as house furniture. */

/* cf-a11y:start */
/* ============================================================
   Clickflame accessibility layer
   Managed block. Edit _shared/a11y/a11y.css and re-run
   _shared/a11y/apply_a11y.py. Do not hand edit the copies.

   Design rule: nothing in here is visible to a mouse user who
   has not asked for it. No overlay, no toolbar, no JavaScript.
   ============================================================ */

/* --- Skip link: off screen until a keyboard user focuses it --- */
.cf-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2147483000;
  display: inline-block;
  padding: .75rem 1.15rem;
  background: #10131a;
  color: #fff;
  font: 600 1rem/1.25 system-ui, -apple-system, "Segoe UI", sans-serif;
  text-decoration: underline;
  border-radius: 0 0 .4rem 0;
}
.cf-skip:focus {
  left: 0;
}

/* --- Text for screen readers only --- */
.cf-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Focus ring.
   :focus-visible means mouse and touch users never see this.
   Set --cf-focus in your own stylesheet to match the brand.
   The default #1a73e8 clears 3:1 against both white and black. --- */
:focus-visible {
  outline: 3px solid var(--cf-focus, #1a73e8) !important;
  outline-offset: 2px !important;
}
@supports not selector(:focus-visible) {
  :focus {
    outline: 3px solid var(--cf-focus, #1a73e8) !important;
    outline-offset: 2px !important;
  }
}

/* A programmatic focus target should not draw a ring. */
[tabindex="-1"]:focus {
  outline: none !important;
}

/* Focus must not be swallowed by a sticky header. */
:target,
[tabindex="-1"] {
  scroll-margin-top: 6rem;
}

/* --- Respect a stated preference for less motion --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Windows High Contrast / forced colours --- */
@media (forced-colors: active) {
  :focus-visible {
    outline: 3px solid Highlight !important;
  }
  .cf-skip {
    background: Canvas;
    color: CanvasText;
    border: 2px solid CanvasText;
  }
}

/* --- Stronger ring for people who asked for more contrast --- */
@media (prefers-contrast: more) {
  :focus-visible {
    outline-width: 4px !important;
  }
}
/* cf-a11y:end */

.cc-fig{margin-top:28px;max-width:760px}
.cc-video{max-width:340px;justify-self:center}
.cc-video video{width:100%;height:auto;display:block;background:#10131a}

/* ── Glossary page and inline term tooltips ──────────────────────── */
.gl-letter{font-family:var(--font-head);font-size:2.4rem;color:var(--orange-strong);margin:34px 0 8px;scroll-margin-top:20px}
.gl-list{max-width:72ch;border-top:1px solid var(--border)}
.gl-list dt{font-family:var(--font-sub);font-weight:700;font-size:1.2rem;color:var(--ink-900);padding-top:16px;scroll-margin-top:20px}
.gl-list dt:target{background:var(--watch-bg)}
.gl-list dd{margin:4px 0 0;padding-bottom:16px;border-bottom:1px solid var(--border);color:var(--ink-700)}
.gl-list .src{display:inline;margin-left:4px}
a.gl{color:inherit;text-decoration:underline dotted var(--orange-strong);text-underline-offset:3px;text-decoration-thickness:2px;position:relative;cursor:help}
a.gl:hover,a.gl:focus-visible{color:var(--orange-deep)}
@media(hover:hover) and (min-width:700px){
a.gl:hover::after,a.gl:focus-visible::after{content:attr(data-tip);position:absolute;left:-6px;bottom:calc(100% + 10px);
width:max-content;max-width:300px;background:var(--ink);color:var(--on-ink);padding:10px 13px;font:400 .92rem/1.45 var(--font-body);
letter-spacing:0;text-transform:none;text-align:left;white-space:normal;z-index:30;box-shadow:0 6px 20px rgba(0,0,0,.25);pointer-events:none}
a.gl:hover::before,a.gl:focus-visible::before{content:"";position:absolute;left:8px;bottom:calc(100% - 2px);
border:6px solid transparent;border-top-color:var(--ink);z-index:30}}
@media print{a.gl{text-decoration:none}}

.ct-form textarea{width:100%;font:inherit;font-size:1.05rem;padding:12px 14px;border:1.5px solid var(--border-strong);background:var(--panel);color:var(--ink-900);border-radius:0;resize:vertical}
.ct-form textarea:focus{outline:3px solid var(--orange);outline-offset:1px}
.ct-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:600px){.ct-grid{grid-template-columns:1fr}}
.ct-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── Checklist portal ───────────────────────────────────────────── */
.ck-pick{margin-top:8px;max-width:960px}
.ck-pick label{display:block;font-family:var(--font-sub);font-weight:700;font-size:.86rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-600);margin-bottom:6px}
.ck-pick select,.ck-pick input,.ck-note{width:100%;font:inherit;font-size:1.05rem;padding:12px 14px;border:1.5px solid var(--border-strong);background:var(--panel);color:var(--ink-900);border-radius:0;min-width:0}
.ck-pick select:disabled{opacity:.55}
.ck-pick select:focus,.ck-pick input:focus,.ck-note:focus{outline:3px solid var(--orange);outline-offset:1px}
.ck-vin{margin-bottom:18px;max-width:620px}
.ck-row{display:flex;gap:10px}.ck-row input{flex:1}.ck-row .btn{padding:12px 20px;white-space:nowrap}
.ck-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media(max-width:820px){.ck-grid{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.ck-grid{grid-template-columns:1fr}.ck-row{flex-direction:column}}
.ck-status{margin-top:12px;min-height:1.4em;color:var(--ink-700);font-weight:600}
.ck-status--bad{color:var(--bad)}
.ck-band:has(#ck-out:empty){display:none}
.ck-car{margin-bottom:26px}
.ck-car-top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.ck-car-top .sec{margin:0}
.ck-actions{display:flex;gap:8px;flex-wrap:wrap}.ck-actions .btn{padding:10px 16px;font-size:.9rem}
.ck-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:20px 0 14px}
@media(max-width:820px){.ck-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ck-stat{background:var(--panel);border:1px solid var(--border);padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.ck-stat b{font-family:var(--font-head);font-size:2.2rem;line-height:1;color:var(--ink-900)}
.ck-stat span{font-family:var(--font-sub);font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-600)}
.ck-stat--bad b{color:var(--bad)}.ck-stat--watch b{color:var(--watch)}.ck-stat--good b{color:var(--good)}
.ck-bar{height:6px;background:var(--border);margin-top:8px}.ck-bar i{display:block;height:100%;width:0;background:var(--orange);transition:width .25s}
.ck-jump{position:sticky;top:0;z-index:5;background:var(--cream);padding:10px 0;margin-bottom:10px}
@media(max-width:820px){.ck-jump{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.ck-jump a{flex:0 0 auto}.ck-area{scroll-margin-top:70px;padding:18px}}
.ck-dot{display:inline-block;min-width:1.5em;padding:0 5px;margin-left:4px;background:var(--bad);color:#fff;font-size:.78rem;text-align:center}
.ck-area{background:var(--panel);border:1px solid var(--border);padding:24px;margin-bottom:18px;scroll-margin-top:130px}
.ck-area-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;border-bottom:3px solid var(--orange);padding-bottom:10px;margin-bottom:16px}
.ck-area-head h3{font-family:var(--font-head);font-size:1.9rem;letter-spacing:.02em;color:var(--ink-900);margin:0}
.ck-area-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:28px}
@media(max-width:900px){.ck-area-grid{grid-template-columns:1fr}}
.ck-why{color:var(--ink-700);margin-bottom:14px;max-width:62ch}
.ck-items{list-style:none;display:flex;flex-direction:column;gap:10px;padding:0}
.ck-item{border:1px solid var(--border);border-left:5px solid var(--border-strong);padding:12px 14px;display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:center}
.ck-item p{margin:0;color:var(--ink-900)}
.ck-item .ck-note{grid-column:1/-1;font-size:.95rem;padding:8px 10px}
.ck-item.is-pass{border-left-color:var(--good);background:var(--good-bg)}
.ck-item.is-watch{border-left-color:var(--watch);background:var(--watch-bg)}
.ck-item.is-fail{border-left-color:var(--bad);background:var(--bad-bg)}
@media(max-width:560px){.ck-item{grid-template-columns:1fr}}
.ck-marks{display:flex;gap:4px}
.ck-marks button{font-family:var(--font-sub);font-weight:700;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;padding:9px 11px;min-height:40px;border:1.5px solid var(--border-strong);background:var(--panel);color:var(--ink-700);cursor:pointer}
.ck-marks button[data-mark=pass][aria-pressed=true]{background:var(--good);border-color:var(--good);color:#fff}
.ck-marks button[data-mark=watch][aria-pressed=true]{background:var(--watch);border-color:var(--watch);color:#fff}
.ck-marks button[data-mark=fail][aria-pressed=true]{background:var(--bad);border-color:var(--bad);color:#fff}
.ck-research{background:var(--cream);border:1px solid var(--border);padding:16px 18px;font-size:.98rem;min-width:0}
.ck-research h4{font-family:var(--font-sub);font-weight:700;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-500);margin:16px 0 8px}
.ck-research h4:first-child{margin-top:0}
.ck-research p{margin:6px 0;color:var(--ink-800);overflow-wrap:anywhere}
.ck-rec,.ck-quote{border-top:1px solid var(--border);padding:8px 0}
.ck-rec summary,.ck-quote summary{cursor:pointer;display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-weight:600;color:var(--ink-900)}
.ck-rec-id{font-family:var(--font-sub);letter-spacing:.06em;color:var(--orange-deep)}
.ck-rec-comp{font-weight:600}
.ck-parts{list-style:none;padding:0;margin:8px 0}
.ck-parts li{display:flex;justify-content:space-between;gap:10px;padding:4px 0;border-bottom:1px dotted var(--border);color:var(--ink-700)}
.ck-read{padding-left:18px}.ck-read li{margin:4px 0}
.ck-cta{background:var(--ink);color:var(--on-ink);padding:28px}
.ck-cta h3{font-family:var(--font-head);font-size:2rem;color:var(--on-ink);margin:0 0 8px}
.ck-cta p{color:var(--on-ink-soft)}
@media print{.topbar,.sitenav,.crumbs,.ck-pick,.ck-actions,.ck-jump,.ck-cta,.foot,.band:first-of-type .snack{display:none!important}
.ck-area{break-inside:avoid-page}.ck-marks button:not([aria-pressed=true]){display:none}.ck-research details{display:block}.ck-research details>*{display:block}}

.mark{display:inline-flex;align-items:center;gap:10px}.mark-ico{width:40px;height:40px;flex-shrink:0}@media(max-width:420px){.mark{font-size:1.2rem}.mark-ico{width:34px;height:34px}}