/* WTC light theme (2026-09-20).
   Dark stays each page's own built-in look, untouched. Light is an override
   layer on top: :root[data-theme="light"] (specificity 0,2,0) beats every
   page's own plain :root block regardless of load order, so this file needs
   no per-page edits beyond linking it. Palette comes from the company logo:
   red #FD0000 (used slightly deeper, #D40000, wherever it has to carry white
   text or sit on a white surface), black, white, and the logo's mid gray #868686.
   Loaded by theme.js's toggle; charts are restyled in theme.js (they take
   their colors from JS, not CSS). */

:root[data-theme="light"]{
  color-scheme:light;
  /* gray first, white second (inputs, modals, inner highlights), red third (accent) */
  --bg-0:#b9bec5; --bg-1:#c9cdd3; --panel:#dde0e5; --panel-2:#eaecef;
  --line:#a6acb5; --line-2:#8f96a1;
  --text:#14171c; --text-2:#2f353e; --muted:#535b68;
  --primary:#d40000; --accent:#d40000;
  --shadow:0 8px 22px rgba(20,24,32,.16);
  --rs:#b71c1c; --cs:#e53935; --rate:#1d4ed8; --dh:#15803d; --rc:#16a34a;
  --tot:#64748b; --stg:#475569; --ok:#16a34a; --bad:#dc2626; --warn:#b45309;
  --off:#dc2626; --on:#16a34a; --pumping:#1d6fd0;
}
:root[data-theme="dark"]{color-scheme:dark}

/* ---- page ground ---- */
:root[data-theme="light"] body{
  color:var(--text);
  background:
    radial-gradient(1200px 500px at 10% -10%,rgba(212,0,0,.06),transparent 55%),
    linear-gradient(180deg,var(--bg-1),var(--bg-0) 60%,var(--bg-1));
}

/* ---- top nav ---- */
:root[data-theme="light"] .navbar{background:#e6e8ec;border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(20,24,32,.04)}
:root[data-theme="light"] .navbar-brand{color:#111!important}
:root[data-theme="light"] .navbar .nav-link{color:#0b0d11;font-weight:700}
:root[data-theme="light"] .navbar .nav-link:hover{color:#000;background:rgba(20,24,32,.05)}
:root[data-theme="light"] .navbar .nav-link.active{color:#ff0000;background:linear-gradient(0deg,rgba(255,0,0,.38) 0%,rgba(255,0,0,.17) 45%,rgba(255,0,0,.04) 100%) bottom/100% 100% no-repeat;box-shadow:none}
/* Night theme's selected tab: the same bottom-up fade in amber, no underline. Each page's own
   <style> still sets its text color/weight; this outranks only its tint and 3px bar. */
:root:not([data-theme="light"]) .navbar .nav-link.active{background:linear-gradient(0deg,rgba(232,163,60,.38) 0%,rgba(232,163,60,.17) 45%,rgba(232,163,60,.04) 100%) bottom/100% 100% no-repeat;box-shadow:none}
:root[data-theme="light"] .navbar-toggler{border-color:rgba(20,24,32,.3)}
:root[data-theme="light"] .navbar-toggler-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(20,24,32,.85)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}
:root[data-theme="light"] .subbar{background:#d3d7dc}
:root[data-theme="light"] .subbar a:hover{background:rgba(20,24,32,.06);color:#000}

/* signed-in chip */
:root[data-theme="light"] .user-chip{background:linear-gradient(180deg,#f4f5f7,#e2e5e9);border-color:var(--line-2)}
:root[data-theme="light"] .user-avatar{color:#fff;background:linear-gradient(135deg,#ff4a4a,#d40000);box-shadow:0 0 0 2px rgba(212,0,0,.18)}
:root[data-theme="light"] .user-meta b{color:#111}
:root[data-theme="light"] .user-meta small{color:var(--muted)}
:root[data-theme="light"] .login-buttons{color:var(--muted)}

/* ---- buttons / chips / inputs ---- */
:root[data-theme="light"] .btn-ghost,
:root[data-theme="light"] .pan-arrow,
:root[data-theme="light"] .chip,
:root[data-theme="light"] .series-pill,
:root[data-theme="light"] .axis-btn,
:root[data-theme="light"] .kv,
:root[data-theme="light"] .watch-pick-btn{background:rgba(20,24,32,.035);border-color:var(--line-2);color:var(--text-2)}
:root[data-theme="light"] .axis-btn,
:root[data-theme="light"] .kv b,
:root[data-theme="light"] .series-pill.on{color:var(--text)}
:root[data-theme="light"] .series-pill{color:var(--text-2)!important}
:root[data-theme="light"] .btn-ghost:hover,
:root[data-theme="light"] .pan-arrow:hover,
:root[data-theme="light"] .series-pill:hover{background:rgba(212,0,0,.09);border-color:rgba(212,0,0,.45);color:#111!important}
:root[data-theme="light"] .pan-arrow:active{background:rgba(212,0,0,.18)}
:root[data-theme="light"] .axis-btn:hover,
:root[data-theme="light"] .watch-pick-btn:hover{border-color:rgba(212,0,0,.5);background:rgba(212,0,0,.06);box-shadow:none}
:root[data-theme="light"] .btn-win,
:root[data-theme="light"] .btn-primary{background:#d40000;border-color:#b30000;color:#fff;box-shadow:0 2px 8px rgba(212,0,0,.25)}
:root[data-theme="light"] .btn-win:hover,
:root[data-theme="light"] .btn-primary:hover{background:#e60000;border-color:#c40000;color:#fff}
:root[data-theme="light"] .btn-win:active{background:#a80000}
:root[data-theme="light"] .btn-secondary{background:#4b5563;color:#fff}
:root[data-theme="light"] .btn-action{border-color:rgba(212,0,0,.45);background:rgba(212,0,0,.07);color:#a80000}
:root[data-theme="light"] .btn-action:hover:not(:disabled){border-color:rgba(212,0,0,.8);background:rgba(212,0,0,.16);color:#800000}
:root[data-theme="light"] .btn-toggle-info.on{border-color:rgba(22,163,74,.55);background:rgba(22,163,74,.12);color:#166534}
:root[data-theme="light"] .btn-toggle-info.on:hover{border-color:#16a34a;background:rgba(22,163,74,.22);color:#0f4d26}
:root[data-theme="light"] .btn-toggle-info.off{border-color:rgba(220,38,38,.55);background:rgba(220,38,38,.10);color:#b91c1c}
:root[data-theme="light"] .btn-toggle-info.off:hover{border-color:#dc2626;background:rgba(220,38,38,.2);color:#7f1d1d}
:root[data-theme="light"] .btn-apply{background:#15803d}
:root[data-theme="light"] .btn-apply:hover{background:#166534}
:root[data-theme="light"] .form-control,
:root[data-theme="light"] .form-select{background:#fff;color:var(--text);border-color:var(--line-2)}
:root[data-theme="light"] .form-control:focus,
:root[data-theme="light"] .form-select:focus{background:#fff;color:var(--text);border-color:#d40000;box-shadow:0 0 0 .2rem rgba(212,0,0,.15)}
:root[data-theme="light"] .form-control::placeholder{color:#9aa1ac}
:root[data-theme="light"] .ticket-prefix{background:#f2f3f5;color:#d40000}
:root[data-theme="light"] .add-metric-row select{background:#fff;color:var(--text)}
:root[data-theme="light"] .add-metric-row select:hover{background:#fff;border-color:#d40000;color:#111}
:root[data-theme="light"] .add-metric-row select option{background:#fff;color:var(--text)}

/* ---- panels ---- */
:root[data-theme="light"] .chart-wrap,
:root[data-theme="light"] .meta-card,
:root[data-theme="light"] .sheet-card,
:root[data-theme="light"] .cards{background:var(--panel);border-color:var(--line)}
:root[data-theme="light"] .cardx{background:var(--panel-2);border-color:var(--line-2)}
:root[data-theme="light"] .cardx .sub{color:#6a7280}
:root[data-theme="light"] .c-rs b{color:#b71c1c} :root[data-theme="light"] .c-cs b{color:#d32f2f}
:root[data-theme="light"] .c-rate b{color:#1d4ed8} :root[data-theme="light"] .c-dh b{color:#15803d}
:root[data-theme="light"] .c-rc b{color:#16a34a} :root[data-theme="light"] .c-stg b{color:#475569}
:root[data-theme="light"] .c-water b{color:#0e7490}
:root[data-theme="light"] .c-rs_rate b{color:#0369a1} :root[data-theme="light"] .c-cs_rate b{color:#0284c7}
:root[data-theme="light"] .cardx label{color:var(--muted)}
:root[data-theme="light"] .cardx .extra-remove:hover{color:#b91c1c}
:root[data-theme="light"] .hero h1,
:root[data-theme="light"] .chart-bar h2{color:var(--text)}
:root[data-theme="light"] .chip.job{border-color:rgba(22,163,74,.4);background:rgba(22,163,74,.10);color:#166534}
:root[data-theme="light"] .chip.job.empty{background:rgba(20,24,32,.035);color:var(--muted)}
:root[data-theme="light"] .chip-fault{border-color:rgba(220,38,38,.4);background:rgba(220,38,38,.09);color:#991b1b}
:root[data-theme="light"] .dot.ok{box-shadow:0 0 8px rgba(22,163,74,.35)}

/* offline banner (Cement) */
:root[data-theme="light"] .offline-banner{background:#fde8e8;border-bottom-color:#dc2626;color:#7f1d1d}
:root[data-theme="light"] .offline-banner-title{color:#7f1d1d}
:root[data-theme="light"] .offline-banner-sub{color:#991b1b}
:root[data-theme="light"] .offline-banner code{background:rgba(127,29,29,.12);color:#7f1d1d}
:root[data-theme="light"] .offline-banner a{color:#b91c1c}

/* ---- flags ---- */
:root[data-theme="light"] .flag-btn{color:#92400e;background:rgba(232,163,60,.14);border-color:rgba(180,110,20,.55)}
:root[data-theme="light"] .flag-btn:hover{background:rgba(232,163,60,.28)}
:root[data-theme="light"] .flag-btn .flag-del{color:#b91c1c}
:root[data-theme="light"] .flag-popup{background:#fff;border-color:var(--line-2);box-shadow:0 10px 24px rgba(20,24,32,.16)}
:root[data-theme="light"] .flag-popup .fp-label{color:var(--text)}
:root[data-theme="light"] .flag-popup button{background:rgba(20,24,32,.04);color:var(--text-2)}
:root[data-theme="light"] .flags-row .hint,
:root[data-theme="light"] .chart-time-confirm-row .ct-note{color:var(--text-2)}
:root[data-theme="light"] .flag-time-btn{background:rgba(20,24,32,.04);border-color:rgba(20,24,32,.28);color:var(--text)}
:root[data-theme="light"] .flag-time-btn:hover:not(:disabled){background:rgba(212,0,0,.08);border-color:rgba(212,0,0,.5)}
:root[data-theme="light"] .flag-time-btn:disabled{border-color:var(--line-2)}
:root[data-theme="light"] .zoom-select-box{background:rgba(212,0,0,.12);border-left-color:rgba(212,0,0,.7);border-right-color:rgba(212,0,0,.7)}

/* ---- modals ---- */
:root[data-theme="light"] .modal-content,
:root[data-theme="light"] #flagInfoModal .modal-content,
:root[data-theme="light"] #addWatchModal .modal-content,
:root[data-theme="light"] #confirmModal .modal-content,
:root[data-theme="light"] #flagLabelModal .modal-content{background:#fff;color:var(--text);border:1px solid var(--line-2);box-shadow:0 24px 60px rgba(20,24,32,.25)}
:root[data-theme="light"] .modal-header,
:root[data-theme="light"] .modal-footer,
:root[data-theme="light"] #flagInfoModal .modal-header,
:root[data-theme="light"] #flagInfoModal .modal-footer,
:root[data-theme="light"] #confirmModal .modal-header,
:root[data-theme="light"] #confirmModal .modal-footer,
:root[data-theme="light"] #flagLabelModal .modal-header,
:root[data-theme="light"] #flagLabelModal .modal-footer{border-color:var(--line)}
:root[data-theme="light"] #addWatchModal .modal-title,
:root[data-theme="light"] #confirmModal .modal-title,
:root[data-theme="light"] #flagLabelModal .modal-title{color:var(--text)}
/* Added 2026-10-07 -- #confirmModal/#flagLabelModal's own <style> block in
   cement.html hardcodes literal light colors for the night/default look
   (#eef2f7 body text, #fff title, #b9c4d2 labels -- see that file's own
   comment for why they're literal, not theme variables). Those id+class
   selectors are more specific than this file's plain .modal-content rule
   above, so without these two lines the day-theme override on .modal-content
   would apply but the body/label text would stay hardcoded light-on-light. */
:root[data-theme="light"] #confirmModal .modal-body p{color:var(--text)}
:root[data-theme="light"] #flagLabelModal .form-label{color:var(--text-2)}
/* Added 2026-10-07 -- #witsInline (the "Sending to Yellow Box" pill on
   Cement) never had a day-theme override at all. Its own <style> block in
   cement.html hardcodes a translucent green over whatever's behind it and
   near-white text -- fine composited over this page's dark background, but
   composited over the light theme's own light page it became a pale green
   with barely-readable white-on-pale-green text. Solid, deep backgrounds
   here (not translucent) so the white text has guaranteed contrast
   regardless of theme, same reasoning as the modal fixes above. */
:root[data-theme="light"] .wits-inline{background:#15803d;border-color:#166534;color:#fff;box-shadow:0 10px 24px rgba(21,128,61,.25)}
:root[data-theme="light"] .wits-inline.bad{background:#b91c1c;border-color:#7f1d1d;color:#fff;box-shadow:0 10px 24px rgba(127,29,29,.25)}
:root[data-theme="light"] .btn-close-white{filter:none}
:root[data-theme="light"] .ctp-cal-btn{background:rgba(212,0,0,.07);border-color:rgba(212,0,0,.35);color:#c00000}
:root[data-theme="light"] .ctp-cal-btn:hover{background:rgba(212,0,0,.15);border-color:rgba(212,0,0,.6);color:#900000}
:root[data-theme="light"] .ctp-slider-row input[type=range]{accent-color:#d40000}
:root[data-theme="light"] .ctp-slider-row .ctp-slider-label b{color:#111}

/* ---- theme toggle button (injected by theme.js) ---- */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:2.1rem;height:2.1rem;padding:0;border-radius:999px;border:1px solid var(--line,#242c37);background:rgba(255,255,255,.05);color:var(--text-2,#b9c4d2);cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease}
.theme-toggle svg{width:1.05rem;height:1.05rem;flex:none}
.theme-toggle:hover{background:rgba(255,255,255,.12);color:#fff}
:root[data-theme="light"] .theme-toggle{background:rgba(20,24,32,.04);border-color:var(--line-2);color:var(--text-2)}
:root[data-theme="light"] .theme-toggle:hover{background:rgba(212,0,0,.09);border-color:rgba(212,0,0,.45);color:#111}
/* tiny corner button: far top-right of the toolbar, all widths; just left of the lock where there is one */
.theme-toggle.nav-theme{display:inline-flex;position:absolute;top:.3rem;right:.6rem;left:auto;width:1.5rem;height:1.5rem;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:var(--text-2,#b9c4d2);z-index:2;margin:0}
.theme-toggle.nav-theme.beside-lock{right:2.85rem}
.theme-toggle.nav-theme svg{width:.85rem;height:.85rem}
.theme-toggle.nav-theme:hover{color:#fff;background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.5)}
:root[data-theme="light"] .theme-toggle.nav-theme{background:#fff;border-color:rgba(20,24,32,.35)}
/* lock gets the same box when off, so the pair matches */
.nav-lock{width:1.9rem;height:1.9rem}
.nav-lock:not(.on){border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:var(--text-2,#b9c4d2)}
.nav-lock:not(.on):hover{color:#fff;background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.5)}
:root[data-theme="light"] .nav-lock:not(.on){background:rgba(20,24,32,.05);border-color:rgba(20,24,32,.30);color:var(--text)}
:root[data-theme="light"] .nav-lock:not(.on):hover{background:rgba(212,0,0,.09);border-color:rgba(212,0,0,.5);color:#111}
@media(min-width:992px){.theme-toggle.nav-theme{display:inline-flex}}
/* 2026-09-20 home pass: dark solid Log Out with white text; sun/moon inside a white circle */
:root[data-theme="light"] .navbar .btn-secondary,
:root[data-theme="light"] .login-buttons .btn-secondary{background:#2b3038;border-color:#1c2026;color:#fff!important;opacity:1}
:root[data-theme="light"] .navbar .btn-secondary:hover,
:root[data-theme="light"] .login-buttons .btn-secondary:hover{background:#000;color:#fff!important}
:root[data-theme="light"] .theme-toggle,
:root[data-theme="light"] .theme-toggle.nav-theme{background:#fff;border:1px solid rgba(20,24,32,.35);border-radius:50%;color:#e08a00;box-shadow:0 1px 3px rgba(20,24,32,.18)}
:root[data-theme="light"] .theme-toggle:hover,
:root[data-theme="light"] .theme-toggle.nav-theme:hover{background:#fff;border-color:rgba(255,0,0,.6);color:#c96f00}

/* ---- Home (2026-09-20) ---- */
/* the "Fleet / Every unit. One board." + Off/On/Pumping legend strip -> white bar */
:root[data-theme="light"] .hero:has(.legend){background:#fff;border:1px solid var(--line-2);border-radius:10px;padding:.315rem 1.1rem;box-shadow:0 2px 8px rgba(20,24,32,.10)}
:root[data-theme="light"] .hero:has(.legend) .chip{background:#fff;border:1px solid var(--line-2);color:var(--text)}
:root[data-theme="light"] .hero:has(.legend) .chip::after{border-color:rgba(20,24,32,.10)}
/* pump cards (option L): thick frame that fades down + frosted glass body.
   Same box size/padding/layout as the dark card -- only colors change. */
:root[data-theme="light"] .pump-card.pumping{--a:#22b8f0;--b:#1f4fd8;--d:#0e2a7a;--tint:#d6ebff}
:root[data-theme="light"] .pump-card.on{--a:#7ddc4a;--b:#12a05a;--d:#075c33;--tint:#d9f5df}
:root[data-theme="light"] .pump-card.off{--a:#b71c1c;--b:#b71c1c;--d:#7a1212;--tint:#f4dada}
:root[data-theme="light"] .hero:has(.legend) .dot.off{background:#b71c1c}
:root[data-theme="light"] .pump-card{--fr:2px;isolation:isolate;border:1px solid color-mix(in srgb,var(--b) 55%,transparent);
 background:linear-gradient(180deg,var(--b) 0%,color-mix(in srgb,var(--a) 75%,transparent) 38%,color-mix(in srgb,var(--a) 28%,transparent) 72%,color-mix(in srgb,var(--a) 8%,transparent) 100%);
 box-shadow:0 8px 18px rgba(20,24,32,.26)}
:root[data-theme="light"] .pump-card::before{-webkit-mask-image:none;mask-image:none;border:0;inset:var(--fr);border-radius:8px;z-index:-1;
 background:radial-gradient(90% 70% at 100% 0%,color-mix(in srgb,var(--a) 42%,transparent),transparent 70%),linear-gradient(150deg,rgba(255,255,255,.92),color-mix(in srgb,var(--tint) 85%,var(--b)));
 box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1.5px rgba(255,255,255,.7),0 0 0 1px color-mix(in srgb,var(--b) 40%,transparent)}
:root[data-theme="light"] .pump-card::after{border-color:var(--line-2)}
:root[data-theme="light"] .pump-card.off{opacity:.94}
:root[data-theme="light"] .pump-card:hover{border-color:color-mix(in srgb,var(--b) 80%,transparent)}
:root[data-theme="light"] .pump-card .pump-id{color:var(--d)}
:root[data-theme="light"] .pump-card .metric{background:linear-gradient(#fff,#f0f2f5);border:1px solid #5f6672;box-shadow:0 1px 2px rgba(0,0,0,.18)}
/* status: flat label for On/Idle + Off, jewel button for Pumping only */
:root[data-theme="light"] .pump-card .status-badge{background:rgba(255,255,255,.6);border:1px solid color-mix(in srgb,var(--b) 60%,transparent);color:var(--d)}
:root[data-theme="light"] .pump-card .status-badge.pumping,
:root[data-theme="light"] .pump-card .status-badge.on{background:var(--b);border:1px solid var(--d);color:#fff}

/* ---- Cement (2026-09-20): match Home ---- */
/* header strip -> white bar (same treatment as Home's Fleet strip) */
:root[data-theme="light"] .hero:has(.title-row){background:#fff;border:1px solid var(--line-2);border-radius:10px;padding:.6rem 1.1rem .69rem;box-shadow:0 2px 8px rgba(20,24,32,.10)}
:root[data-theme="light"] .hero:has(.title-row) .chip{background:#fff;border:1px solid var(--line-2);color:var(--text)}
:root[data-theme="light"] .hero:has(.title-row) .chip.job{background:#e7f6ec;border-color:#2f9e5b;color:#0f5f2c}
:root[data-theme="light"] .hero:has(.title-row) .chip.job.empty{background:#fff;border-color:var(--line-2);color:var(--muted)}
/* metric cards: thin colored frame that fades down + frosted glass body (same as Home's pump cards) */
:root[data-theme="light"] #metricCards .cardx{--tint:color-mix(in srgb,var(--accent,#94a3b8) 14%,#fff);isolation:isolate;
 border:1px solid color-mix(in srgb,var(--accent,var(--line-2)) 60%,transparent);
 background:linear-gradient(180deg,var(--accent,var(--line-2)) 0%,color-mix(in srgb,var(--accent,var(--line-2)) 55%,transparent) 38%,color-mix(in srgb,var(--accent,var(--line-2)) 22%,transparent) 72%,color-mix(in srgb,var(--accent,var(--line-2)) 8%,transparent) 100%);
 box-shadow:0 6px 14px rgba(20,24,32,.20)}
:root[data-theme="light"] #metricCards .cardx::before{-webkit-mask-image:none;mask-image:none;border:0;inset:2px;border-radius:6px;z-index:-1;
 background:radial-gradient(90% 70% at 100% 0%,color-mix(in srgb,var(--accent,#94a3b8) 30%,transparent),transparent 70%),linear-gradient(150deg,rgba(255,255,255,.94),var(--tint));
 box-shadow:inset 0 1px 0 #fff,0 0 0 1px color-mix(in srgb,var(--accent,var(--line-2)) 35%,transparent)}
:root[data-theme="light"] #metricCards .cardx::after{background:none;border-color:var(--line-2)}
/* the chart panel: white so the lines read cleanly */
:root[data-theme="light"] .chart-wrap{background:linear-gradient(180deg,#ffffff,#f1f3f6);border:1px solid var(--line-2)}

/* ---- Home, DARK theme (2026-09-20): a little more color on the cards. Colors only, no size changes. ---- */
:root[data-theme="dark"] .pump-card{
 background:radial-gradient(90% 70% at 100% 0%,color-mix(in srgb,var(--accent,transparent) 15%,transparent),transparent 70%),
            linear-gradient(to bottom,color-mix(in srgb,var(--accent,transparent) 12%,transparent),color-mix(in srgb,var(--accent,transparent) 3%,transparent) 78%),var(--panel);
 border-color:color-mix(in srgb,var(--accent,var(--line)) 45%,var(--line))}
:root[data-theme="dark"] .pump-card::before{-webkit-mask-image:linear-gradient(to bottom,#000,transparent 88%);mask-image:linear-gradient(to bottom,#000,transparent 88%)}
:root[data-theme="dark"] .pump-card .metric{border-color:color-mix(in srgb,var(--accent,var(--line)) 30%,var(--line))}
:root[data-theme="dark"] .status-badge.off{background:rgba(224,82,79,.26);border-color:rgba(224,82,79,.55);color:#ffc9c7}
:root[data-theme="dark"] .status-badge.on{background:rgba(63,169,106,.62);border-color:rgba(90,205,140,.95);color:#fff}
:root[data-theme="dark"] .status-badge.pumping{background:rgba(46,155,214,.62);border-color:rgba(100,185,235,.95);color:#fff}
/* dividers that were hard to see: the toolbar bottom edge (above "Fleet") and the strip under the Fleet header (above "Active") */
:root[data-theme="dark"] .navbar{border-bottom-color:rgba(255,255,255,.30)}
:root[data-theme="dark"] .hero:has(.legend){border-bottom-color:rgba(255,255,255,.32)}

/* ---- Jobs (2026-09-20): soft, light-tinted row buttons instead of solid red/slate/green ---- */
/* 2026-09-29 -- .job's own card border/background were never themed at all,
   only the buttons inside it were (the block below this). jobs.html's base
   rule is rgba(255,255,255,.06) border / rgba(255,255,255,.03) background --
   a barely-there WHITE tint meant to read against the dark page background;
   on light theme that's white-on-near-white, so every divider between job
   rows was invisible ("you can clearly see the lines... on day theme you
   can't"). Given a real, visible border + a panel background instead. */
:root[data-theme="light"] .job{border-color:var(--line);background:var(--panel-2)}
:root[data-theme="light"] .job.open{border-color:rgba(34,197,94,.45)}
:root[data-theme="light"] .job .btn{box-shadow:none;font-weight:700;border-width:1px;border-style:solid}
:root[data-theme="light"] .job .btn-primary{background:#e3ecfa;border-color:#a7bde6;color:#1e4fb0}
:root[data-theme="light"] .job .btn-primary:hover{background:#d3e2f8;border-color:#86a5dc;color:#173f8f}
:root[data-theme="light"] .job [data-edit]{background:#eef0f3;border-color:#aab1bb;color:#2f353e}
:root[data-theme="light"] .job [data-edit]:hover{background:#e2e5ea;border-color:#8f97a3;color:#14171c}
:root[data-theme="light"] .job a.btn-secondary{background:#def1f3;border-color:#93cdd4;color:#0d6470}
:root[data-theme="light"] .job a.btn-secondary:hover{background:#cde8ec;border-color:#6fbcc5;color:#0a4f59}
:root[data-theme="light"] .job .btn-danger{background:#fbe4e4;border-color:#e3a8a8;color:#a01a1a}
:root[data-theme="light"] .job .btn-danger:hover{background:#f6d2d2;border-color:#d68585;color:#7d1010}
:root[data-theme="light"] .job .btn-ok{background:#fdf0d3;border-color:#e6c885;color:#7a5200}
:root[data-theme="light"] .job .btn-ok:hover{background:#fae5b8;border-color:#d9b25d;color:#5f3f00}

/* ---- Engine page (2026-09-20): keep the blue undertones, not red "danger" ---- */
:root[data-theme="light"]:has(#engineGrid){--primary:#2f6fd0;--accent:#2f6fd0}
:root[data-theme="light"] #engineGrid .eng-tabs button.on{background:#2f6fd0;border-color:#1f56ad;color:#fff}
:root[data-theme="light"] #engineGrid .bar{background:#0b1220;border:1px solid #1f2a3d}
:root[data-theme="light"] #engineGrid .bar i{background:linear-gradient(90deg,#22c55e,#e8a33c,#ef4444)}
:root[data-theme="light"] #engineGrid .rpm span{color:#d98b14}

/* engine cards: blue undertone like the night theme; clearly boxed data points */
:root[data-theme="light"] .eng{background:linear-gradient(180deg,#e6eefb 0%,#d3e1f5 100%);border:1px solid #6f8fc4;box-shadow:0 8px 18px rgba(20,40,90,.22)}
:root[data-theme="light"] .eng .stat,
:root[data-theme="light"] .eng .live-raw-item{background:linear-gradient(#ffffff,#f1f5fb);border:1.5px solid #5f7ba8;box-shadow:0 1px 2px rgba(20,40,90,.18)}
:root[data-theme="light"] .eng .stat label,
:root[data-theme="light"] .eng .live-raw-item label{color:#44536b}
:root[data-theme="light"] .eng .eng-tabs button:not(.on){background:#fff;border:1.5px solid #5f7ba8;color:#1f2f4d}
:root[data-theme="light"] .eng .eng-tabs button:not(.on):hover{background:#eaf1fc}
:root[data-theme="light"] .eng .eng-pane,
:root[data-theme="light"] .eng .live-raw{border-top-color:#8ea6cc}

/* ---- PLC board (2026-09-20): Home-style tiles ---- */
:root[data-theme="light"] .plc-tile.live{--a:#7ddc4a;--b:#12a05a;--d:#075c33;--tint:#d9f5df}
:root[data-theme="light"] .plc-tile.stale{--a:#f5c15a;--b:#c9820a;--d:#7a4a00;--tint:#fdf0d3}
:root[data-theme="light"] .plc-tile.never{--a:#b0bac8;--b:#64748b;--d:#334155;--tint:#e9edf2}
:root[data-theme="light"] .plc-tile{isolation:isolate;border:1px solid color-mix(in srgb,var(--b) 55%,transparent);
 background:linear-gradient(180deg,var(--b) 0%,color-mix(in srgb,var(--a) 75%,transparent) 38%,color-mix(in srgb,var(--a) 28%,transparent) 72%,color-mix(in srgb,var(--a) 8%,transparent) 100%);
 box-shadow:0 8px 18px rgba(20,24,32,.24)}
:root[data-theme="light"] .plc-tile::before{content:"";position:absolute;inset:2px;border-radius:8px;z-index:-1;
 background:radial-gradient(90% 70% at 100% 0%,color-mix(in srgb,var(--a) 42%,transparent),transparent 70%),linear-gradient(150deg,rgba(255,255,255,.92),color-mix(in srgb,var(--tint) 85%,var(--b)));
 box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1.5px rgba(255,255,255,.7),0 0 0 1px color-mix(in srgb,var(--b) 40%,transparent)}
:root[data-theme="light"] .plc-tile:hover{border-color:var(--b)}
:root[data-theme="light"] .plc-tile .t-id{color:var(--d)}
:root[data-theme="light"] .plc-tile .t-what{color:#44536b}
:root[data-theme="light"] .plc-tile .t-age{color:#535b68}
:root[data-theme="light"] .plc-tile .t-stat{background:linear-gradient(#fff,#f0f2f5);border:1px solid #5f6672;box-shadow:0 1px 2px rgba(0,0,0,.18)}
:root[data-theme="light"] .plc-tile .t-stat label{color:#535b68}
:root[data-theme="light"] .plc-tile.never .t-stat b,:root[data-theme="light"] .plc-tile.never .t-what{opacity:1}
:root[data-theme="light"] .plc-tile.live .t-badge,
:root[data-theme="light"] .plc-tile.stale .t-badge,
:root[data-theme="light"] .t-badge.live,:root[data-theme="light"] .t-badge.stale{background:var(--b);border-color:var(--d);color:#fff}
:root[data-theme="light"] .t-badge.live{--b:#12a05a;--d:#075c33}
:root[data-theme="light"] .t-badge.stale{--b:#c9820a;--d:#7a4a00}
:root[data-theme="light"] .plc-tile.never .t-badge,:root[data-theme="light"] .t-badge.never{background:rgba(255,255,255,.65);border-color:#8391a4;color:#334155}
:root[data-theme="light"] .plc-key .k.never i{background:#64748b}
:root[data-theme="light"] .t-warn{color:#7a4a00;background:#fdf0d3}
:root[data-theme="light"] .t-warn.bad{color:#7d0f14;background:#f6d2d2}
:root[data-theme="light"] .t-stat b.warn{color:#8a5a00}
:root[data-theme="light"] .t-stat b.bad{color:#a01a1a}
:root[data-theme="light"] .plc-overlay{background:rgba(20,24,32,.5)}
:root[data-theme="light"] .plc-dialog{background:#f4f5f7;border-color:var(--line-2);box-shadow:0 24px 60px rgba(20,24,32,.4)}
:root[data-theme="light"] .plc-x{background:#fff;color:var(--text)}
:root[data-theme="light"] .dlg-reach,:root[data-theme="light"] .dlg-empty{background:#fff}

/* PLC: HMI state chips */
:root[data-theme="light"] .t-hmi.ok{background:#dff3e6;border-color:#2f9e5b;color:#0f5f2c}
:root[data-theme="light"] .t-hmi.slow{background:#fdf0d3;border-color:#c9820a;color:#7a4a00}
:root[data-theme="light"] .t-hmi.frozen,:root[data-theme="light"] .t-hmi.unreachable{background:#fbe0e0;border-color:#c53030;color:#7d0f14}
:root[data-theme="light"] .t-hmi.none{background:#eceff3;border-color:#8391a4;color:#334155}

/* toolbar right cluster (2026-09-21): theme + lock stacked above name / Log Out, in normal flow (never overlaps) */
.nav-right{display:flex;flex-direction:column;align-items:flex-end;gap:.4rem;margin-left:auto}
.nav-tools{display:flex;align-items:center;gap:.4rem}
/* 2026-09-30 -- more room between theme/lock and between that row and
   login/logout, now that both buttons are bigger (2.6rem) -- the original
   .4rem gaps were sized for the smaller 1.5-2rem buttons and felt crowded
   once those grew. Scoped to the same laptop-and-smaller block the button
   size itself lives in, for the same reason: a big external monitor never
   needed either change. */
@media (max-width:1400px){
  .nav-tools{gap:.9rem}
  .nav-right{gap:.85rem}
}
.nav-tools .theme-toggle.nav-theme,.nav-tools .nav-lock{position:static;top:auto;right:auto;left:auto;margin:0}
@media(max-width:991.98px){.nav-right{align-items:flex-start;margin-left:0;margin-top:.7rem}}

/* Log Out never wraps onto two lines on narrow screens */
.login-buttons .btn{white-space:nowrap}

/* PLC health tint (light): pale wash of the health color, dark readable value */
:root[data-theme="light"] .plc-tile .t-stat.hc{background:linear-gradient(color-mix(in srgb,var(--c) 20%,#ffffff),color-mix(in srgb,var(--c) 34%,#f0f2f5));border-color:color-mix(in srgb,var(--c) 85%,#3a414b)}
:root[data-theme="light"] .plc-tile .t-stat.hc b{color:hsl(var(--h) 90% 18%)}
:root[data-theme="light"] .plc-tile .t-stat.hc label{color:hsl(var(--h) 60% 24%)}
/* toolbar between 992px and 1200px: tighten so the links + right cluster fit without overflowing */
@media (min-width:992px) and (max-width:1199.98px){
  .navbar .nav-link{padding:.6rem .8rem;font-size:1rem}
  .nav-rows{margin-right:.75rem}
  .navbar-brand{font-size:1.25rem}
  .brand-logo{height:2.1rem;width:2.1rem}
}

/* Theme toggle / lock / login button were too small on a smaller laptop screen
   (2026-09-23) -- both .theme-toggle.nav-theme and .nav-lock are defined a
   second time, smaller, in each page's own local <style> block (before this
   file's <link>), and .login-buttons .btn-sm's padding/font-size is likewise
   only ever set locally per page. Since this file's link tag loads after every
   page's local <style>, a same-specificity selector here (no !important
   needed) wins the cascade and applies everywhere at once instead of needing
   to touch 15+ templates individually. Scoped to laptop-and-smaller screens on
   purpose -- a big external monitor keeps the original, more compact sizing. */
@media (max-width:1400px){
  /* 2026-09-25 -- matched to .nav-lock's own size exactly, direct request
     ("make it the size of the lock button") -- was 2rem/1.15rem svg here
     against the lock's 2.3rem/1.3rem, a real (if small) mismatch between
     two controls sitting right next to each other in the same cluster.
     2026-09-28 -- bumped again, both together so they stay matched
     ("still kinda small... make it just slightly larger"). */
  .theme-toggle.nav-theme{width:2.6rem;height:2.6rem}
  .theme-toggle.nav-theme svg{width:1.5rem;height:1.5rem}
  .nav-lock{width:2.6rem;height:2.6rem}
  .nav-lock svg{width:1.5rem;height:1.5rem}
  .login-buttons .btn{padding:.55rem 1.15rem;font-size:1rem}
}

/* PLC: the Uptime box gets a real blue tint (light theme) instead of the plain white every other unfilled box gets */
:root[data-theme="light"] .plc-tile .t-stat:has(.t-up){background:linear-gradient(#dbe8fd,#c7dcfb);border-color:#5b8fdb}
:root[data-theme="light"] .plc-tile .t-stat:has(.t-up) label{color:#28518f}
:root[data-theme="light"] .plc-tile .t-stat:has(.t-up) b{color:#173a70}

/* Permissions > Home: pump bubbles readable in light mode */
:root[data-theme="light"] .pump-cell{color:#2f353e;background:#fff;border-color:#8b94a1;opacity:1}
:root[data-theme="light"] .pump-cell.on{background:#c6eed4;border-color:#1d8a4a;color:#0a4522}
:root[data-theme="light"] .pump-cell:not(.on){color:#535b68;background:#f0f2f5;opacity:.85}
:root[data-theme="light"] .hm-preset{background:#fff;border-color:#8b94a1;color:#2f353e}
:root[data-theme="light"] .hm-card{background:#f4f5f7}

/* Accounts > Can see: readable in light mode */
:root[data-theme="light"] .cs-item.on i{background:#c6eed4;border-color:#1d8a4a;color:#0a4522}
:root[data-theme="light"] .cs-item.off i{background:#fbe0e0;border-color:#c53030;color:#8a1414}
:root[data-theme="light"] .cs-tile{background:#fff;border-color:#8b94a1;color:#14171c}
:root[data-theme="light"] .cs-tile.open{background:#dbe6f9;border-color:#1f56ad}
:root[data-theme="light"] .cs-detail{background:#f4f5f7}

/* Accounts > Edit window */
.modal .btn{white-space:nowrap}
:root[data-theme="light"] .modal .btn-danger{background:#b71c1c;border-color:#8a1414;color:#fff}
:root[data-theme="light"] .modal .btn-danger:hover{background:#8a1414;color:#fff}

/* Office strip: active link red instead of amber */
:root[data-theme="light"] .subbar a.active{background:rgba(212,0,0,.10);border-color:rgba(212,0,0,.45);color:#a80000}
/* ==== AUTO-GENERATED light overrides (gen_auto.py) — hardcoded light text / dark panels found in page CSS ==== */
:root[data-theme="light"] #mapCanvas,
:root[data-theme="light"] .bar,
:root[data-theme="light"] .btn-danger,
:root[data-theme="light"] .code,
:root[data-theme="light"] .health-card,
:root[data-theme="light"] .intro,
:root[data-theme="light"] .mc-eng-card,
:root[data-theme="light"] .mock-frame,
:root[data-theme="light"] .mock-titlebar,
:root[data-theme="light"] .panel,
:root[data-theme="light"] .pump-tab,
:root[data-theme="light"] .raw-pre,
:root[data-theme="light"] .sheet,
:root[data-theme="light"] .svc-card,
:root[data-theme="light"] .table-btn,
:root[data-theme="light"] table.db-table th{background:var(--panel-2)}
:root[data-theme="light"] .error-box{background:var(--panel-2);color:#960303}
:root[data-theme="light"] .edit-bar .form-select{background:var(--panel-2);color:var(--text)}
:root[data-theme="light"] .forgot{color:#034896}
:root[data-theme="light"] .badge-role.role-admin,
:root[data-theme="light"] .rig-badge,
:root[data-theme="light"] .role-tab.active.role-admin{color:#103e89}
:root[data-theme="light"] .badge-sl.ok,
:root[data-theme="light"] .badge.ok,
:root[data-theme="light"] .mc-eng-live,
:root[data-theme="light"] .msg.ok,
:root[data-theme="light"] .pill.open{color:#10893a}
:root[data-theme="light"] .h-live-chip,
:root[data-theme="light"] .live-badge,
:root[data-theme="light"] .sum-chip.ok b,
:root[data-theme="light"] .svc-status.active{color:#12873c}
:root[data-theme="light"] .status-badge.pumping,
:root[data-theme="light"] .status-pill.pumping{color:#145e85}
:root[data-theme="light"] .badge-role.role-manager,
:root[data-theme="light"] .role-tab.active.role-manager{color:#198072}
:root[data-theme="light"] .mock-legend-item.on{color:#207945}
:root[data-theme="light"] .badge-result.ok,
:root[data-theme="light"] .badge-role.role-cementer,
:root[data-theme="light"] .role-tab.active.role-cementer{color:#217840}
:root[data-theme="light"] .status-badge.on,
:root[data-theme="light"] .status-pill.on{color:#287147}
:root[data-theme="light"] .badge-role.role-customer,
:root[data-theme="light"] .role-tab.active.role-customer{color:#4a0891}
:root[data-theme="light"] .dropdown-item.text-danger,
:root[data-theme="light"] .mc-chip.bad,
:root[data-theme="light"] .mc-chip.static.bad,
:root[data-theme="light"] .status-badge.off,
:root[data-theme="light"] .status-pill.off,
:root[data-theme="light"] .warn-box{color:#881411}
:root[data-theme="light"] .badge-result.fail{color:#8f110a}
:root[data-theme="light"] .lock-pill,
:root[data-theme="light"] .svc-status.bad{color:#940505}
:root[data-theme="light"] .badge.fault,
:root[data-theme="light"] .dropdown-item.text-danger:hover,
:root[data-theme="light"] .eng-tabs button .count,
:root[data-theme="light"] .fchip,
:root[data-theme="light"] .h-row-top b.bad,
:root[data-theme="light"] .h-stat b.bad,
:root[data-theme="light"] .job-msg.bad,
:root[data-theme="light"] .lamp.on-red,
:root[data-theme="light"] .msg.bad,
:root[data-theme="light"] .net-stats b.bad,
:root[data-theme="light"] .nt-chip.bad,
:root[data-theme="light"] .plc-table td.temp.bad{color:#960303}
:root[data-theme="light"] .code strong{color:#960315}
:root[data-theme="light"] .badge-role.role-master,
:root[data-theme="light"] .badge.warn,
:root[data-theme="light"] .h-row-top b.warn,
:root[data-theme="light"] .h-stat b.warn,
:root[data-theme="light"] .lamp.on-amber,
:root[data-theme="light"] .mock-legend-item.perm-primary.on,
:root[data-theme="light"] .mock-legend-item.perm-primary.on b,
:root[data-theme="light"] .net-stats b.warn,
:root[data-theme="light"] .nt-chip,
:root[data-theme="light"] .pf.on,
:root[data-theme="light"] .plc-table td.temp.warn,
:root[data-theme="light"] .role-tab.active.role-master,
:root[data-theme="light"] .sum-chip.attn b,
:root[data-theme="light"] code{color:#967903}
:root[data-theme="light"] .dlg-alert-head{color:#967903}
:root[data-theme="light"] .dlg-alert.bad .dlg-alert-head,
:root[data-theme="light"] .dlg-alert-list li.bad{color:#960303}
:root[data-theme="light"] .badge-sl.off,
:root[data-theme="light"] .badge.off,
:root[data-theme="light"] .h-live-chip.stale,
:root[data-theme="light"] .health-card.stale .h-live-chip,
:root[data-theme="light"] .rig-badge.dim{color:var(--muted)}
:root[data-theme="light"] .btn-backup.to-primary,
:root[data-theme="light"] .btn-danger,
:root[data-theme="light"] .btn-danger:hover,
:root[data-theme="light"] .btn-ok,
:root[data-theme="light"] .btn-save,
:root[data-theme="light"] .cfg-row b,
:root[data-theme="light"] .dropdown-item:focus,
:root[data-theme="light"] .dropdown-item:hover,
:root[data-theme="light"] .eng-tabs button.on,
:root[data-theme="light"] .forgot:hover,
:root[data-theme="light"] .fs-num,
:root[data-theme="light"] .hm-badge,
:root[data-theme="light"] .intro h2,
:root[data-theme="light"] .job a.ticket-link,
:root[data-theme="light"] .mc-btn-fake,
:root[data-theme="light"] .mc-chip.hot::after,
:root[data-theme="light"] .mc-hotzone::after,
:root[data-theme="light"] .metric span.value,
:root[data-theme="light"] .offline-steps li,
:root[data-theme="light"] .offline-steps li::before{color:var(--text)}
:root[data-theme="light"] .page-tab.active,
:root[data-theme="light"] .page-tab:hover,
:root[data-theme="light"] .pager button.on,
:root[data-theme="light"] .perm-group-block .tabs label.perm-primary,
:root[data-theme="light"] .perm-pill:hover,
:root[data-theme="light"] .pf:hover,
:root[data-theme="light"] .pump-id,
:root[data-theme="light"] .pump-tab.active,
:root[data-theme="light"] .raw-toggle:hover,
:root[data-theme="light"] .role-tab:hover,
:root[data-theme="light"] .table,
:root[data-theme="light"] .table > :not(caption) > * > *,
:root[data-theme="light"] .table-btn.active,
:root[data-theme="light"] a.btn,
:root[data-theme="light"] a:hover,
:root[data-theme="light"] table.db-table{color:var(--text)}
:root[data-theme="light"] .badge-role.role-viewer,
:root[data-theme="light"] .pill.closed,
:root[data-theme="light"] .role-tab.active.role-viewer{color:var(--text-2)}
/* ==== END AUTO ==== */

/* Brand / tabs separation (2026-10-14): the logo + "WTC Pumping" and the tab rows ran
   together and read as one thing. A thin divider plus extra room on both sides of it
   splits them. Only on the full two-row nav (pages with .nav-rows) at desktop widths;
   below 992px the tabs fold into the menu button and there is nothing to separate. */
@media (min-width:992px){
  .navbar:has(.nav-rows) .navbar-brand{position:relative;align-self:stretch;padding-right:1.6rem;margin-right:1.6rem}
  .navbar:has(.nav-rows) .navbar-brand::after{content:"";position:absolute;right:0;top:6%;bottom:6%;width:2px;border-radius:2px;background:rgba(255,255,255,.24)}
  :root[data-theme="light"] .navbar:has(.nav-rows) .navbar-brand::after{background:rgba(20,24,32,.22)}
}
/* Narrower laptops: below ~1100px the nav already runs tight (and below ~1040px it
   overflowed before this divider existed), so the divider costs no extra width there. */
@media (min-width:992px) and (max-width:1199.98px){
  .navbar:has(.nav-rows) .navbar-brand{padding-right:1rem;margin-right:1rem}
}
@media (min-width:992px) and (max-width:1099.98px){
  .navbar:has(.nav-rows) .navbar-brand{padding-right:.5rem;margin-right:.5rem}
}

/* Tab boxes, lined up in columns (2026-10-25). Every tab in the top nav sits in its own light
   shaded box. Both rows share one grid, so each column is as wide as the widest tab in it and
   the second row's boxes line up under the first row's (Blackbox under Home, and so on) --
   the user: "the tabs dont line up". The two <ul> rows become display:contents so their <li>
   tabs are the grid's items; row 1 is grid-row 1, row 2 (.nav-row-2) grid-row 2. A thin line
   runs between the rows when there are two (roles with Office): one piece under each first-row
   tab reaching half a gap to each side, so it reads as one line. History: a single band behind
   the second row read as one label; per-tab boxes came next; then the same on row 1; then
   this alignment. Desktop widths only; below 992px the tabs fold into the menu button. The
   active tab keeps its own highlight (:not(.active)). */
@media (min-width:992px){
  .navbar .nav-rows{--tab-gap:.55rem;--row-gap:.9rem;display:grid;grid-auto-columns:auto;column-gap:var(--tab-gap);row-gap:.35rem;justify-content:start;align-items:stretch}
  .navbar .nav-rows:has(.nav-row-2){row-gap:var(--row-gap)}
  .navbar .nav-rows > .navbar-nav{display:contents}
  .navbar .nav-rows > .navbar-nav > .nav-item{display:flex;grid-row:1}
  .navbar .nav-rows > .nav-row-2 > .nav-item{grid-row:2}
  .navbar .nav-rows .nav-item > .nav-link{flex:1;text-align:center}
  .navbar .nav-rows .nav-link:not(.active){background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.1)}
  .navbar .nav-rows .nav-link:not(.active):hover{background:rgba(255,255,255,.11)}
  .navbar .nav-rows:has(.nav-row-2) > .navbar-nav:first-child > .nav-item{position:relative}
  .navbar .nav-rows:has(.nav-row-2) > .navbar-nav:first-child > .nav-item::after{content:"";position:absolute;left:calc(var(--tab-gap) / -2);right:calc(var(--tab-gap) / -2);bottom:calc(var(--row-gap) / -2);height:1px;background:rgba(255,255,255,.16);pointer-events:none}
  .navbar .nav-rows:has(.nav-row-2) > .navbar-nav:first-child > .nav-item:first-child::after{left:0}
  .navbar .nav-rows:has(.nav-row-2) > .navbar-nav:first-child > .nav-item:last-child::after{right:0}
  :root[data-theme="light"] .navbar .nav-rows .nav-link:not(.active){background:rgba(20,24,32,.06);border-color:rgba(20,24,32,.13)}
  :root[data-theme="light"] .navbar .nav-rows .nav-link:not(.active):hover{background:rgba(20,24,32,.11)}
  :root[data-theme="light"] .navbar .nav-rows:has(.nav-row-2) > .navbar-nav:first-child > .nav-item::after{background:rgba(20,24,32,.2)}
}
/* Room per tab by width (2026-10-25). The site's own rules make the logo and the tab text
   bigger in steps at 1100 and 1200px, which left the first row running past the window edge
   just after each step; these tiers set the gap and side padding so it fits at every width
   from 992px up (checked every 5px from 992 to 1500px by loading the page in iframes of set
   widths). Above 1400px the defaults above apply. */
@media (min-width:992px) and (max-width:1059.98px){.navbar .nav-rows{--tab-gap:.2rem}.navbar .nav-rows .nav-item > .nav-link{padding-left:.3rem;padding-right:.3rem;font-size:.95rem}}
@media (min-width:1060px) and (max-width:1159.98px){.navbar .nav-rows{--tab-gap:.3rem}.navbar .nav-rows .nav-item > .nav-link{padding-left:.4rem;padding-right:.4rem}}
@media (min-width:1160px) and (max-width:1199.98px){.navbar .nav-rows{--tab-gap:.35rem}.navbar .nav-rows .nav-item > .nav-link{padding-left:.6rem;padding-right:.6rem}}
@media (min-width:1200px) and (max-width:1279.98px){.navbar .nav-rows{--tab-gap:.35rem}.navbar .nav-rows .nav-item > .nav-link{padding-left:.4rem;padding-right:.4rem}}
@media (min-width:1280px) and (max-width:1399.98px){.navbar .nav-rows{--tab-gap:.45rem}.navbar .nav-rows .nav-item > .nav-link{padding-left:.6rem;padding-right:.6rem}}

/* Tab motion (2026-10-26). Every tab is a link to a new page, so the motion is in two parts:
   the tab presses in when clicked, and on the page that opens the selected tab's shade rises
   in from the bottom (the red fade by day, the amber fade at night). The keyframes give only
   a starting point, so each one ends on the tab's normal look. Off for anyone who has asked
   their system for reduced motion. */
@media (prefers-reduced-motion: no-preference){
  .navbar .nav-link{transition:transform .12s ease,background-color .2s ease,color .2s ease}
  .navbar .nav-link:active{transform:scale(.94)}
  .navbar .nav-link.active{animation:navShadeUp .55s cubic-bezier(.2,.7,.2,1) both}
}
@keyframes navShadeUp{from{background-size:100% 0%;transform:translateY(2px)}}