:root{
  --green-deep:#0b2418; --green:#143a26; --green-soft:#1c4d33;
  --bolt:#34d27b; --amber:#e0a33c; --amber-dark:#c48a2a;
  --cream:#f4eedc; --paper:#f6f4ee; --white:#fff;
  --ink:#172119; --muted:#5e6b62; --line:#dfe3dc; --soft:#eef1eb;
  --warn:#b4401f; --ok:#1c7a46;
  --body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ed-accent:var(--bolt); --ed-strong:var(--green-soft); --ed-bg:var(--paper); --ed-top:0px;
  --ed-change-text:#8a5a00; --ed-change-row:#fffcf3;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font:400 16px/1.55 var(--body);-webkit-text-size-adjust:100%}
a{color:var(--green-soft)}
.wrap{max-width:960px;margin:0 auto;padding:0 16px}

/* ── header ─────────────────────────────────────────────────────────── */
header.top{background:linear-gradient(135deg,var(--green-deep),var(--green) 60%,var(--green-soft));color:var(--cream);
  padding:calc(14px + env(safe-area-inset-top)) 0 18px;border-bottom:4px solid var(--amber)}
.brand{display:flex;align-items:center;gap:10px;font:800 20px/1 var(--body);letter-spacing:.02em;text-decoration:none;color:var(--cream)}
.brand svg{width:22px;height:22px;flex:0 0 auto}
.brand small{font:500 12px/1 var(--body);letter-spacing:.08em;opacity:.75;margin-left:6px}
.topline{display:flex;align-items:center;justify-content:space-between;gap:10px 20px;flex-wrap:wrap}
.sitenav{display:flex;gap:14px;flex-wrap:wrap;font:500 13px/1 var(--body)}
.sitenav a{color:#c7d6c9;text-decoration:none}
.sitenav a:hover{color:#fff}
.others{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 0}
.others a{font:500 12.5px/1 var(--body);color:#dfe8e1;text-decoration:none;border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:6px 10px}
.others a:hover{background:rgba(255,255,255,.12);color:#fff}
.others a[aria-current]{background:var(--amber);border-color:var(--amber);color:#1d1508;font-weight:700}
.others .all{border-style:dashed}
header.top h1{margin:16px 0 4px;font:700 clamp(21px,3.4vw,30px)/1.2 var(--body);letter-spacing:-.01em}
header.top p.lead{margin:0;font-size:15px;color:#c7d6c9;max-width:680px}
/* The picture beside the title: the truck or charger, or the maker's logo on white. */
.headgrid{display:grid;grid-template-columns:minmax(0,1fr);column-gap:28px;align-items:center}
.headgrid.pic-on{grid-template-columns:minmax(0,1fr) minmax(0,320px)}
.shot{margin:16px 0 0;min-width:0}
.shot .frame{width:100%;aspect-ratio:3/2;background:#fff;border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px -16px rgba(0,0,0,.55)}
.shot .frame img{display:block;width:100%;height:100%;object-fit:cover}
.shot .frame.logo{padding:9% 13%}
.shot .frame.logo img{object-fit:contain}
.shot .frame.contain{background:#f4f6f8}
.shot .frame.contain img{object-fit:contain}
.shot figcaption{margin-top:5px;font:400 11.5px/1.3 var(--body);color:#a9bcae;text-align:right}
.shot figcaption a{color:inherit;text-decoration:none}
.shot figcaption a:hover{text-decoration:underline;color:var(--cream)}
/* The site's own videos in the same box as the photograph (14 October 2026,
   shared/videos.mjs): the players above it, the short version first, and
   the words of each video in the caption under the photo credit. */
.shot .vid-frame{margin:0 0 10px;min-width:0}
.shot .vid-player{display:block;width:100%;aspect-ratio:16/9;height:auto;border-radius:10px;background:#000;box-shadow:0 12px 30px -16px rgba(0,0,0,.55)}
.shot figcaption .credit{display:block}
.shot figcaption .vid-text{margin:8px 0 0;text-align:left;font:400 12.5px/1.45 var(--body);color:#c5d4c9}
.shot figcaption .vid-text b{color:var(--cream)}
.shot figcaption .vid-meta{color:#a9bcae}
.headgrid.vids-on{align-items:start}
.headgrid.vids-on .headtext{padding-top:6px}
@media(max-width:720px){
  .headgrid.pic-on{grid-template-columns:minmax(0,1fr)}
  .shot{max-width:420px}
  .shot figcaption{text-align:left}
}

/* ── the site's own videos (13 October 2026, shared/videos.mjs) ──────── */
.vids{margin:22px 0 0}
.vids h2{margin:0 0 6px}
.vids-note{margin:0 0 14px;max-width:74ch;font-size:14px;opacity:.85}
.vid{margin:0 0 22px;min-width:0}
.vid-player{display:block;width:100%;max-width:960px;aspect-ratio:16/9;height:auto;background:#000;border-radius:10px}
.vid-title{margin:10px 0 4px;font-size:17px;line-height:1.3}
.vid-sum{margin:0 0 4px;max-width:74ch;font-size:14px}
.vid-meta{margin:0;font-size:13px;opacity:.8}
.vid-meta a{color:inherit}

/* ── intro card ─────────────────────────────────────────────────────── */
.intro{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin:18px 0 14px}
.intro p{margin:0 0 8px}
.intro p:last-child{margin:0}
.intro b{color:var(--green)}
.meta{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
@media(max-width:640px){.meta{grid-template-columns:1fr}}
.meta label{display:block;font:600 12.5px/1.3 var(--body);color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.meta input,.meta textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:9px 11px;font:400 15px/1.4 var(--body);
  background:var(--white);color:var(--ink)}
.meta textarea{min-height:64px;resize:vertical;grid-column:1/-1}
.meta .full{grid-column:1/-1}
input:focus,textarea:focus{outline:2px solid var(--bolt);outline-offset:0;border-color:var(--bolt)}

/* ── banners ────────────────────────────────────────────────────────── */
.banner{display:none;align-items:center;gap:12px;flex-wrap:wrap;border-radius:10px;padding:10px 14px;margin:0 0 14px;font-size:14.5px}
.banner.show{display:flex}
.banner.note{background:#fff7e6;border:1px solid #f0d9a6;color:#6b4d0f}
.banner.good{background:#e9f7ee;border:1px solid #bfe6cc;color:#155c35}
.banner.bad{background:#fdecea;border:1px solid #f3c0b8;color:#8a2a17}
.banner .grow{flex:1;min-width:200px}
.banner button{appearance:none;border:1px solid currentColor;background:transparent;color:inherit;border-radius:999px;
  padding:5px 12px;font:600 13px var(--body);cursor:pointer}

/* ── the sheet ──────────────────────────────────────────────────────── */
section.block{background:var(--white);border:1px solid var(--line);border-radius:12px;margin:0 0 14px;overflow:hidden}
section.block h2{margin:0;padding:12px 16px;font:700 15px/1.3 var(--body);background:var(--green);color:var(--cream);
  display:flex;align-items:center;justify-content:space-between;gap:10px}
section.block h2 span.count{font:600 12px/1 var(--body);color:#bcd6c3;letter-spacing:.03em}
.head{display:grid;grid-template-columns:minmax(200px,1fr) 1.4fr;gap:0;background:var(--soft);border-bottom:1px solid var(--line);
  font:600 12px/1.3 var(--body);color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.head div{padding:8px 12px}
.head .sp{color:var(--green)}
.row{display:grid;grid-template-columns:minmax(200px,1fr) 1.4fr;border-bottom:1px solid var(--line);align-items:center}
.row:last-child{border-bottom:0}
.row:hover{background:#fbfcfa}
.row .lab{padding:10px 12px;font-size:14.5px;line-height:1.35}
.row .lab .unit{display:block;font:500 12px/1.3 var(--mono);color:var(--muted);margin-top:2px}
.row .cell{padding:6px 8px;display:flex;align-items:center;gap:4px;min-width:0}
.row .cell input{flex:1;min-width:0;width:100%;border:1px solid #cfe4d6;border-radius:8px;padding:8px 10px;
  font:400 15px/1.3 var(--body);background:var(--white);color:var(--ink)}
.row .cell input.filled{border-color:var(--bolt);background:#f5fdf8}
.row .cell input.changed{border-color:var(--amber);background:#fff9ec}
.row .cell input::placeholder{color:#9aa39c;font-size:13.5px}
.src{flex:0 0 auto;font:500 12px/1 var(--body);color:var(--muted);text-decoration:none;padding:6px 5px;border-radius:6px}
.src:hover{background:var(--soft);color:var(--green)}
.legend{font-size:13px;color:var(--muted);margin:0 0 12px;display:flex;gap:14px;flex-wrap:wrap}
.legend span::before{content:"";display:inline-block;width:12px;height:12px;border-radius:3px;border:1px solid;margin-right:6px;vertical-align:-1px}
.legend .l-filled::before{background:#f5fdf8;border-color:var(--bolt)}
.legend .l-changed::before{background:#fff9ec;border-color:var(--amber)}
.legend .l-empty::before{background:var(--white);border-color:#cfe4d6}
.meta small{display:block;font:400 12px/1.35 var(--body);color:var(--muted);text-transform:none;letter-spacing:0;margin-top:3px}
.meta label b{color:var(--warn);font-weight:600}

/* ── the history ────────────────────────────────────────────────────── */
section.hist{background:var(--white);border:1px solid var(--line);border-radius:12px;margin:18px 0 14px;overflow:hidden}
section.hist h2{margin:0;padding:12px 16px;font:700 15px/1.3 var(--body);background:var(--soft);color:var(--ink);border-bottom:1px solid var(--line)}
section.hist .none{padding:12px 16px;font-size:14px;color:var(--muted)}
section.hist details{border-bottom:1px solid var(--line)}
section.hist details:last-child{border-bottom:0}
section.hist summary{list-style:none;cursor:pointer;padding:10px 16px;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;font-size:14.5px}
section.hist summary::-webkit-details-marker{display:none}
section.hist summary .v{font:700 12px/1 var(--mono);background:var(--green);color:var(--cream);padding:4px 7px;border-radius:6px}
section.hist summary .when{color:var(--muted);font-size:13px}
section.hist summary .n{margin-left:auto;color:var(--muted);font-size:13px;white-space:nowrap}
section.hist .body{padding:0 16px 12px;font-size:14px}
section.hist table{border-collapse:collapse;width:100%;margin:4px 0 8px}
section.hist td{padding:5px 8px;border-top:1px solid var(--soft);vertical-align:top}
section.hist td.lab{color:var(--muted);width:40%}
section.hist td .old{color:#8a2a17;text-decoration:line-through;margin-right:8px}
section.hist td .new{color:var(--ok);font-weight:600}
section.hist .notes{white-space:pre-wrap;color:var(--ink);background:var(--soft);border-radius:8px;padding:8px 10px;margin:6px 0 0}
@media(max-width:700px){
  .head{display:none}
  .row{grid-template-columns:1fr;padding:8px 0 10px}
  .row .lab{padding:4px 12px 2px;font-weight:600}
  .row .cell{padding:3px 12px}
}

/* ── toolbar ────────────────────────────────────────────────────────── */
.bar{position:sticky;bottom:0;z-index:20;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-top:1px solid var(--line);
  padding:10px 0 calc(10px + env(safe-area-inset-bottom));margin-top:8px}
.bar .in{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.progress{flex:1;min-width:160px;font-size:13.5px;color:var(--muted)}
/* The save bar on a phone (20 September 2026). Its text used to sit in a
   column beside the two buttons, and "39 of 71 values filled in · 1 changed by
   you, not sent yet" came out one word per line. Below 620 px the text takes
   the whole width, with the buttons under it and Review & send the wide one. */
/* The More menu on a phone (20 September 2026). It hangs from the right edge
   of its own button and is 230 px wide; since the button moved to the left of
   the second row, that put the menu off the left of the screen. Below 620 px
   it is measured from the bar instead of from the button, so it stands above
   the bar across the full width, whatever the button does. */
@media(max-width:620px){
  .bar2 details.more{position:static}
  .bar2 details.more .menu{left:16px;right:16px;min-width:0;bottom:calc(100% + 10px)}
}
@media(max-width:620px){
  .bar2 .in{gap:8px 10px}
  .progress{flex:1 0 100%;font-size:13px}
  .bar2 .in details.more{flex:0 0 auto}
  .bar2 .in .btn.primary{flex:1 1 auto;text-align:center}
}
.progress b{color:var(--ink)}
.progress .track{height:6px;background:var(--soft);border-radius:999px;margin-top:5px;overflow:hidden}
.progress .fill{height:100%;background:var(--bolt);width:0;transition:width .3s}
.btn{appearance:none;border:0;border-radius:999px;padding:11px 20px;font:700 15px var(--body);cursor:pointer;white-space:nowrap}
.btn.primary{background:var(--amber);color:#1d1508}
.btn.primary:hover{background:var(--amber-dark)}
.btn.primary[disabled]{opacity:.6;cursor:default}
.btn.ghost{background:var(--soft);color:var(--ink);font-weight:600;padding:10px 14px}
.btn.ghost:hover{background:#e3e8de}
details.more{position:relative}
details.more summary{list-style:none;cursor:pointer}
details.more summary::-webkit-details-marker{display:none}
details.more .menu{position:absolute;bottom:calc(100% + 8px);right:0;background:var(--white);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.12);min-width:230px;padding:6px;z-index:30}
details.more .menu button,details.more .menu label{display:block;width:100%;text-align:left;appearance:none;border:0;background:transparent;
  padding:9px 12px;border-radius:7px;font:500 14.5px var(--body);color:var(--ink);cursor:pointer}
details.more .menu button:hover,details.more .menu label:hover{background:var(--soft)}
details.more .menu button.danger{color:var(--warn)}
details.more .menu hr{border:0;border-top:1px solid var(--line);margin:4px 0}
.attach{font-size:13.5px;color:var(--muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.attach .chip{background:var(--soft);border-radius:999px;padding:3px 10px;font-size:13px;color:var(--ink);display:inline-flex;align-items:center;gap:6px}
.attach .chip button{appearance:none;border:0;background:transparent;cursor:pointer;font-size:14px;line-height:1;color:var(--muted);padding:0}

footer.foot{padding:20px 0 30px;font-size:13px;color:var(--muted)}
footer.foot a{color:var(--muted)}
footer.foot ul{margin:8px 0 0;padding-left:18px}
footer.foot li{margin:2px 0}

@media print{
  header.top{background:var(--green);-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .bar,.sitenav,.intro .meta textarea:placeholder-shown,.banner,.src,.legend,details.more{display:none!important}
  .row .cell input{border:0;background:transparent;padding:4px 0}
  section.block{break-inside:avoid;box-shadow:none}
  body{background:#fff}
}

/* ── editing (15 September 2026): find, views, notes under a row, undo, review ── */
.intro .how{margin:0}
.intro .how-log{margin:8px 0 0;font-size:13px;color:var(--muted)}
.howmore{margin-top:8px;font-size:14px;color:var(--muted)}
.howmore summary{cursor:pointer;font-weight:600;color:var(--ed-strong)}
.howmore p{margin:6px 0 0}
#notices{scroll-margin-top:calc(var(--ed-top) + 12px)}
.tools{position:sticky;top:var(--ed-top);z-index:15;display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;background:var(--ed-bg);padding:10px 0 8px;margin:0 0 8px;border-bottom:1px solid var(--line)}
.tools .find{flex:1 1 220px;min-width:0;border:1.5px solid var(--line);border-radius:999px;padding:9px 14px;font:400 15px/1.3 var(--body);background:var(--white);color:var(--ink)}
.tools .find:focus{outline:2px solid var(--ed-accent);outline-offset:0;border-color:var(--ed-accent)}
.views{display:flex;gap:3px;background:var(--soft);border-radius:999px;padding:3px;max-width:100%;overflow-x:auto}
.views button{appearance:none;border:0;background:transparent;border-radius:999px;padding:7px 12px;font:600 13.5px/1 var(--body);color:var(--muted);cursor:pointer;white-space:nowrap}
.views button[aria-pressed="true"]{background:var(--white);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.14)}
.views .n{font-weight:700;color:var(--ed-strong)}
.jump{flex-basis:100%;display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:thin}
.jump a{flex:0 0 auto;font:500 12.5px/1 var(--body);color:var(--ink);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:6px 10px;background:var(--white)}
.jump a:hover{border-color:var(--ed-accent)}
section.block{scroll-margin-top:calc(var(--ed-top) + 130px)}
section.block[hidden],.row[hidden]{display:none!important}
.row .field{position:relative;flex:1;min-width:0;display:flex}
.row .field input{flex:1;min-width:0;width:100%}
.row .field.has-unit input{padding-right:4em}
.row .field .u{position:absolute;right:10px;top:50%;transform:translateY(-50%);font:500 12px/1 var(--body);color:var(--muted);pointer-events:none}
.row .hp{flex:0 0 auto;white-space:nowrap;font:500 12.5px/1 var(--mono);color:var(--muted)}
.row .hp[hidden]{display:none}
.row .undo{flex:0 0 auto;appearance:none;border:1px solid var(--line);background:var(--white);border-radius:8px;width:34px;height:34px;cursor:pointer;font-size:17px;line-height:1;color:var(--ink)}
.row .undo:hover{border-color:var(--ed-accent);background:var(--soft)}
.row .undo[hidden]{display:none}
.row .rnote{grid-column:2;padding:0 12px 8px 8px;font:400 12.5px/1.4 var(--body);color:var(--muted);display:flex;flex-direction:column;gap:2px;min-width:0;overflow-wrap:anywhere}
.row .rnote:not(:has(> :not([hidden]))){display:none}
.row .rnote [hidden]{display:none}
.row .rnote .was{color:var(--ed-change-text)}
.row .rnote .warn{color:var(--warn);font-weight:600}
.row.is-changed{background:var(--ed-change-row)}
.t-none{background:var(--white);border:1px dashed var(--line);border-radius:12px;padding:18px;text-align:center;color:var(--muted);margin:0 0 14px}
.t-none button{appearance:none;border:0;background:transparent;color:var(--ed-strong);font:600 14px var(--body);text-decoration:underline;cursor:pointer}
.btn.primary[disabled]{opacity:.55;cursor:default}
@media(max-width:700px){
  .row .rnote{grid-column:1;padding:0 12px 6px}
  .tools .find{flex-basis:100%}
  .jump{display:none}
}
dialog.review{border:0;border-radius:14px;padding:0;width:min(660px,calc(100vw - 24px));max-height:calc(100vh - 32px);box-shadow:0 30px 80px -20px rgba(0,0,0,.45);color:var(--ink);background:var(--white)}
dialog.review::backdrop{background:rgba(10,20,25,.55)}
.rv{padding:18px 20px 16px;overflow:auto;max-height:calc(100vh - 32px)}
.rv h2{margin:0 0 4px;font:800 20px/1.2 var(--body)}
.rv-sub{margin:0 0 12px;color:var(--muted);font-size:14px}
.rv-list{list-style:none;margin:0 0 14px;padding:0;border:1px solid var(--line);border-radius:10px}
.rv-list li{padding:10px 12px;border-bottom:1px solid var(--line)}
.rv-list li:last-child{border-bottom:0}
.rv-row{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.rv-lab{font-weight:600;font-size:14.5px}
.rv-lab small{color:var(--muted);font-weight:500}
.rv-val{flex:1;min-width:140px;font-size:14.5px;overflow-wrap:anywhere}
.rv-val .old{color:#8a2a17;text-decoration:line-through}
.rv-val .new{color:var(--ok);font-weight:700}
.rv-edit{appearance:none;border:0;background:transparent;color:var(--ed-strong);font:600 13px var(--body);text-decoration:underline;cursor:pointer;padding:0}
.rv-src{width:100%;margin-top:6px;border:1px solid var(--line);border-radius:8px;padding:7px 10px;font:400 13.5px/1.3 var(--body);color:var(--ink);background:var(--white)}
.rv .meta{margin-top:0}
.rv-attach{margin:10px 0 0;font-size:14px}
.rv-attach label{color:var(--ed-strong);text-decoration:underline;cursor:pointer;font-weight:600}
.rv-msg{margin:10px 0 0;background:#fdecea;border:1px solid #f3c0b8;color:#8a2a17;border-radius:8px;padding:8px 10px;font-size:14px}
.rv-msg[hidden]{display:none}
.rv-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:14px}
.rv-fine{margin:8px 0 0;font-size:12.5px;color:var(--muted);text-align:right}
@media print{.tools,.t-none,.row .undo,.row .rnote .was,.row .rnote .warn,dialog.review{display:none!important}}