Site: light and dark mode for the landing page, plant overview and fleet calculator

User, October 2026: add bright/dark mode to the site for both tools.

- Each page sets data-theme on <html> before first paint: the saved choice
  (localStorage "cnx-theme", shared by all cnxvinyl.lol pages) or, without
  one, the system setting (prefers-color-scheme), which it keeps following
  until the user picks a mode. Toggle: header button (sun / moon).
- Plant overview: light overrides for every SVG class; pipe colours are
  now CSS variables (--p-*), used by the pipes and the legend, darkened in
  light mode where the dark-mode tints were too pale (DI water, granulate,
  stamper sets, cooling return); press state text and the VEX zone fills
  use variables instead of inline hex, so they flip with the theme.
- Fleet calculator and landing page: light palettes; input, flag, badge
  and ladder-highlight colours moved to variables.

Checked headless in Edge: both system schemes pick the right mode, the
toggle persists across pages, computed colours flip (press text, zones,
pipes, legend), no text overflow in either mode, no JS errors.

docs/fleet-calculator.html

@@ -5,6 +5,11 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="robots" content="noindex, nofollow">
 <title>CNX Vinyl · press fleet calculator</title>
+<script>
+(function(){var t=null;try{t=localStorage.getItem("cnx-theme")}catch(e){}
+if(t!=="light"&&t!=="dark")t=window.matchMedia&&matchMedia("(prefers-color-scheme: light)").matches?"light":"dark";
+document.documentElement.setAttribute("data-theme",t);})();
+</script>
 <style>
   :root {
     --bg: #0a0f1a; --panel: #0f1626; --panel2: #131c30; --stroke: #2a3a56;
@@ -12,6 +17,22 @@
     --warn: #ffb547; --bad: #ff6b6b; --dspec: #c58bff; --dstd: #6aa8ff;
     --classic: #3ddc84;
   }
+  :root { color-scheme: dark; --input: #0a1120; --flagw: #1b1a12; --flago: #0f1a14; --flagb: #1d1214; --cur: #12261c;
+    --bv: #9fd0ff; --bvb: #2c4c73; --bd: #b5e8c7; --bdb: #2b5a3d; --be: #ffd59a; --beb: #6b5426; --bu: #e2c4ff; --bub: #563a73; }
+  html[data-theme=light] {
+    color-scheme: light;
+    --bg: #f4f6fa; --panel: #ffffff; --panel2: #eef2f8; --stroke: #cfd8e6; --line: #e4e9f1;
+    --fg: #1b2533; --mute: #5b6880; --accent: #0e8f4f; --warn: #c27c00; --bad: #c62828;
+    --dspec: #9b5de5; --dstd: #2f7de1; --classic: #1fae68;
+    --input: #ffffff; --flagw: #fff6e0; --flago: #e8f6ee; --flagb: #fdeaea; --cur: #e1f3e8;
+    --bv: #1f5f9e; --bvb: #9cc0e6; --bd: #1e7a45; --bdb: #9fd3b3; --be: #8a5a00; --beb: #e3c27a; --bu: #6b3fa0; --bub: #c9a8ec;
+  }
+  .themebtn {
+    position: absolute; top: 24px; right: 20px; background: var(--panel); color: var(--fg);
+    border: 1px solid var(--stroke); border-radius: 5px; padding: 6px 12px; font: inherit; font-size: 14px; cursor: pointer;
+  }
+  .themebtn:hover { border-color: var(--accent); }
+  header { position: relative; }
   * { box-sizing: border-box; }
   body {
     margin: 0; background: var(--bg); color: var(--fg);
@@ -41,7 +62,7 @@
   .row small, .hint { color: var(--mute); font-size: 12.5px; }
   .hint { margin: 6px 0 0; }
   input[type=number] {
-    width: 118px; background: #0a1120; color: var(--fg); border: 1px solid var(--stroke);
+    width: 118px; background: var(--input); color: var(--fg); border: 1px solid var(--stroke);
     border-radius: 4px; padding: 5px 7px; font: inherit; text-align: right;
     font-variant-numeric: tabular-nums;
   }
@@ -71,24 +92,24 @@
     padding-top: 14px; border-bottom-color: var(--stroke);
   }
   td.src { color: var(--mute); font-size: 12.5px; }
-  .flag { border-left: 3px solid var(--warn); background: #1b1a12; padding: 7px 10px; margin: 8px 0 0; font-size: 14px; }
-  .flag.ok { border-color: var(--accent); background: #0f1a14; }
-  .flag.bad { border-color: var(--bad); background: #1d1214; }
+  .flag { border-left: 3px solid var(--warn); background: var(--flagw); padding: 7px 10px; margin: 8px 0 0; font-size: 14px; }
+  .flag.ok { border-color: var(--accent); background: var(--flago); }
+  .flag.bad { border-color: var(--bad); background: var(--flagb); }
   .bar { display: flex; height: 24px; border-radius: 4px; overflow: hidden; margin: 14px 0 8px; background: var(--panel2); }
   .bar div { height: 100%; }
   .legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; color: var(--mute); }
   .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; }
   #ladT tbody tr { cursor: pointer; }
   #ladT tbody tr:hover td { background: var(--panel2); }
-  #ladT tbody tr.cur td { background: #12261c; }
+  #ladT tbody tr.cur td { background: var(--cur); }
   .badge {
     display: inline-block; font-size: 11px; padding: 0 6px; border-radius: 3px;
     border: 1px solid var(--stroke); color: var(--mute); white-space: nowrap;
   }
-  .badge.vendor { color: #9fd0ff; border-color: #2c4c73; }
-  .badge.doc { color: #b5e8c7; border-color: #2b5a3d; }
-  .badge.est { color: #ffd59a; border-color: #6b5426; }
-  .badge.user { color: #e2c4ff; border-color: #563a73; }
+  .badge.vendor { color: var(--bv); border-color: var(--bvb); }
+  .badge.doc { color: var(--bd); border-color: var(--bdb); }
+  .badge.est { color: var(--be); border-color: var(--beb); }
+  .badge.user { color: var(--bu); border-color: var(--bub); }
   #asT input[type=number] { width: 92px; }
   #asT tr.chg input { border-color: var(--warn); }
   .btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
@@ -109,6 +130,7 @@
 </head>
 <body>
 <header>
+  <button class="themebtn" id="themeBtn" type="button">Light mode</button>
   <h1>Press fleet calculator</h1>
   <span class="tag">planning estimates · not a quote</span>
   <p class="lead">
@@ -591,6 +613,15 @@ $("copy").addEventListener("click", () => {
   if (navigator.clipboard) navigator.clipboard.writeText(location.href).then(done, done); else done();
 });
 render();
+(function(){
+  var b=document.getElementById("themeBtn"),de=document.documentElement;
+  function set(t,save){de.setAttribute("data-theme",t);if(save){try{localStorage.setItem("cnx-theme",t)}catch(e){}}
+    b.textContent=t==="light"?"☾ Dark mode":"☀ Light mode";b.title="Switch to "+(t==="light"?"dark":"light")+" mode";}
+  set(de.getAttribute("data-theme")||"dark",false);
+  b.addEventListener("click",function(){set(de.getAttribute("data-theme")==="light"?"dark":"light",true);b.blur();});
+  var mq=window.matchMedia&&matchMedia("(prefers-color-scheme: light)");
+  if(mq&&mq.addEventListener)mq.addEventListener("change",function(e){var s=null;try{s=localStorage.getItem("cnx-theme")}catch(_){}if(!s)set(e.matches?"light":"dark",false);});
+})();
 </script>
 </body>
 </html>