/* ===================== THEME SYSTEM (ported from blotter deck) ===================== */
:root{
  --bg:#03070c;--bg2:#050b12;--pane:#071019;--pane2:#0a1622;--head:#0a1622;
  --rule:#16313f;--rule2:#1f4356;--txt:#cfe6f5;--txt2:#97b8cd;--txt3:#6a8898;
  /* Ghost-button border. Was referenced by eight buttons and never defined, so each rendered
     borderless - an invisible clickable block on a dark card (the "phantom button", #57). */
  --bd:#24485c;
  --drv-ticker-h:0px;
  --ink:#021018;--hover:#0d1f2c;--sel:#123043;
  --amber:#62d0ff;--green:#3be0c4;--red:#ff6b8a;--cyan:#5ad1ff;
  --pos:#3be0c4;--neg:#ff6b8a;--warn:#ffc24d;--gold:#7fd8ff;
  --shadow:rgba(0,0,0,.82);--thumb:#1c3a4a;--thumb2:#27506a;
  --a-over:#62a6ff;--a-map:#5ad1ff;--a-blot:#3be0c4;--a-route:#9ad0ff;--a-fleet:#5ad1ff;
  --a-driv:#ffc24d;--a-assign:#b78bff;--a-load:#ff9a6a;--a-cover:#3be0c4;--a-feed:#62d0ff;
}
html[data-theme="amber"]{--bg:#05080a;--bg2:#080c10;--pane:#0a0f13;--pane2:#0c1217;--head:#0a1014;
  --rule:#16202a;--rule2:#1d2a36;--txt:#c7d4cf;--txt2:#94a89f;--txt3:#6c7d75;--ink:#000;--hover:#0d161c;--sel:#13202a;--bd:#27363f;
  --amber:#ffb000;--green:#21d07a;--red:#ff4d4d;--cyan:#34c7d4;--pos:#21d07a;--neg:#ff4d4d;--warn:#ffb000;--gold:#ffb000;
  --thumb:#1b2730;--thumb2:#27353f;--a-over:#7da6ff;--a-map:#34c7d4;--a-blot:#21d07a;--a-route:#9aa7ff;--a-fleet:#34c7d4;
  --a-driv:#ffb000;--a-assign:#b78bff;--a-load:#ff7a59;--a-cover:#21d07a;--a-feed:#ffb000;}
html[data-theme="bloomberg"]{--bg:#070503;--bg2:#0c0906;--pane:#120d08;--pane2:#18110a;--head:#18110a;
  --rule:#2a1c0c;--rule2:#3a2810;--txt:#f0d9b8;--txt2:#c8a370;--txt3:#8e7048;--ink:#000;--hover:#1c1206;--sel:#2a1c0a;--bd:#4a3419;
  --amber:#ff9b1e;--green:#46d07a;--red:#ff5340;--cyan:#f0a83c;--pos:#46d07a;--neg:#ff5340;--warn:#ffb01e;--gold:#ff9b1e;
  --thumb:#2a1c0c;--thumb2:#4a3216;--a-over:#f0a83c;--a-map:#f0a83c;--a-blot:#46d07a;--a-route:#e0b85a;--a-fleet:#f0a83c;
  --a-driv:#ffb01e;--a-assign:#ff8c5a;--a-load:#ff5340;--a-cover:#46d07a;--a-feed:#ff9b1e;}
html[data-theme="phosphor"]{--bg:#020503;--bg2:#040906;--pane:#061009;--pane2:#08150d;--head:#08150d;
  --rule:#103a22;--rule2:#1a5436;--txt:#9ff7b8;--txt2:#6cc890;--txt3:#479866;--ink:#021006;--hover:#0c2316;--sel:#103420;
  --amber:#7dff9e;--green:#39ff88;--red:#ff6a5a;--cyan:#6affc8;--pos:#39ff88;--neg:#ff6a5a;--warn:#c8ff7d;--gold:#aaff7d;
  --thumb:#16573a;--thumb2:#1f7a52;--a-over:#6affc8;--a-map:#6affc8;--a-blot:#39ff88;--a-route:#8effd0;--a-fleet:#6affc8;
  --a-driv:#aaff7d;--a-assign:#9affb0;--a-load:#ffb86a;--a-cover:#39ff88;--a-feed:#aaff7d;}
html[data-theme="midnight"]{--bg:#070912;--bg2:#0a0d1a;--pane:#0e1224;--pane2:#12172e;--head:#12172e;
  --rule:#222a4a;--rule2:#2f3a60;--txt:#d2d8f5;--txt2:#a2abda;--txt3:#717bac;--ink:#05071a;--hover:#171d38;--sel:#1e2748;
  --amber:#9aa6ff;--green:#5ae0a8;--red:#ff6b8a;--cyan:#6ad0ff;--pos:#5ae0a8;--neg:#ff6b8a;--warn:#ffd06a;--gold:#ffd06a;
  --thumb:#2a3258;--thumb2:#3a4578;--a-over:#7da6ff;--a-map:#6ad0ff;--a-blot:#5ae0a8;--a-route:#b0b8ff;--a-fleet:#6ad0ff;
  --a-driv:#ffd06a;--a-assign:#c08bff;--a-load:#ff8c9a;--a-cover:#5ae0a8;--a-feed:#ffd06a;}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font:12.5px/1.45 'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  background:var(--bg);color:var(--txt);overflow:hidden;-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;letter-spacing:.005em}
.mono,code,.code,.blot td,.blot th{font-family:var(--mono)}
.mono{font-variant-numeric:tabular-nums}

/* ===== Global form controls — modern + theme-aware BASE (element-level; component .class rules still
   override where they set their own look). Fixes unstyled/old-school inputs and dark-in-light-theme controls. ===== */
input[type=text],input[type=number],input[type=email],input[type=password],input[type=search],
input[type=tel],input[type=url],input[type=date],input[type=time],input[type=datetime-local],
input[type=month],input:not([type]),select,textarea{
  background:var(--pane2);color:var(--txt);border:1px solid var(--rule2);border-radius:8px;
  padding:8px 11px;font:inherit;font-size:12.5px;line-height:1.3;outline:none;box-sizing:border-box;
  transition:border-color .13s,box-shadow .13s,background .13s;-webkit-appearance:none;appearance:none}
input:not([type=checkbox]):not([type=radio]):not([type=range]):focus,select:focus,textarea:focus{
  border-color:var(--a-map);box-shadow:0 0 0 3px color-mix(in srgb,var(--a-map) 26%,transparent)}
input:not([type=checkbox]):not([type=radio])::placeholder,textarea::placeholder{color:var(--txt3);opacity:1}
input:not([type=checkbox]):not([type=radio]):hover:not(:focus),select:hover:not(:focus),textarea:hover:not(:focus){border-color:var(--rule2);filter:brightness(1.03)}
select{padding-right:30px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a97a8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:11px}
select option{background:var(--pane);color:var(--txt)}
textarea{min-height:60px;resize:vertical}
/* legacy hardcoded-dark controls → follow the theme in light mode */
html.theme-light .stopbulk select,html.theme-light .stopbulk input[type=date],
html.theme-light .rmenu select,html.theme-light .rmenu input{background:var(--pane2);color:var(--txt);border-color:var(--rule2)}
::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:var(--thumb);border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:var(--thumb2)}::-webkit-scrollbar-track{background:transparent}
button{font:inherit;color:inherit;cursor:pointer}
.pos{color:var(--pos)}.neg{color:var(--neg)}.warn{color:var(--warn)}.dim{color:var(--txt3)}.t2{color:var(--txt2)}

/* ===================== TOP BAR ===================== */
.topbar{height:46px;flex:none;display:flex;align-items:center;gap:0;border-bottom:1px solid var(--rule);
  background:linear-gradient(180deg,var(--bg2),var(--bg));padding:0 12px;z-index:50}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:13px;letter-spacing:.04em;padding-right:14px;border-right:1px solid var(--rule)}
.brand .mk{width:22px;height:22px;border-radius:5px;display:grid;place-items:center;background:var(--a-map);color:var(--ink);font-weight:800;font-size:13px}
.brand small{color:var(--txt3);font-weight:600;font-size:10px;letter-spacing:.22em}
/* Which tenant this window is signed in to (Parik: "nothing in header shows their name"). Body text
   colour on the panel surface, so it reads in every theme; it truncates before it crowds the tabs. */
.tenantchip{display:inline-block;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:11px;font-weight:700;letter-spacing:.01em;text-transform:none;color:var(--txt);background:var(--pane2);
  border:1px solid var(--rule);border-radius:5px;padding:2px 8px;line-height:16px;cursor:default}
@media (max-width:900px){ .tenantchip{max-width:120px} }
/* Phone-width header (Parik, with the tenant name): at 400px the bar was 491px wide — the clock ran
   off the right edge, the page scrolled sideways, and the tab strip was squeezed to 12px so NO screen
   was reachable. Under 640px it becomes two rows: brand + tenant + the essentials (undo, search,
   clock) on top, the tabs full-width underneath (their priority-nav still folds into More). The
   text-size/font picker, the least-used control, moves into the More menu (see toggleMoreMenu). */
/* (Selectors carry an extra class so they outrank the later .topbar .tabs rules further down.) */
@media (max-width:900px){
  .topbar.topbar{height:auto;flex-wrap:wrap;row-gap:0}
  .topbar .brand{height:40px;min-width:0;flex:0 1 auto}
  .topbar .tb-right{margin-left:auto;height:40px;flex:none}
  .topbar .tabs.tabs{order:3;flex:1 0 100%;height:36px;padding:0;border-top:1px solid var(--rule)}
  .detailwin.detailwin{top:77px}   /* below the two-row bar, not under its tabs */
}
@media (max-width:640px){
  .topbar.topbar{padding:0 8px}
  .topbar .brand{padding-right:8px}
  .topbar .tb-right{gap:8px;padding-left:6px}
  .topbar #fontPrefs{display:none}
  .topbar .clock small{display:none}
  .topbar .undobtn{padding:4px 8px}
}
/* Header legibility in EVERY theme (the tenant-header check measures it, AA 4.5:1). The tab labels
   were --txt3 — the dimmest text — and failed in 10 of 28 themes; the clock and the active tab were
   the raw accent, which on the light themes (solarized-light: 2.6:1) is decoration, not text. Labels
   use the body text colour; accent-coloured text is the accent pulled toward the text colour, so it
   still reads as the accent while clearing contrast. */
.topbar .tabs .tab{color:var(--txt)}
.topbar .tabs .tab.on,.topbar .clock{color:color-mix(in srgb,var(--a-map) 45%,var(--txt))}
.topbar .undobtn{color:var(--txt)}
@media (max-width:380px){ .topbar .undobtn{font-size:0;gap:0} .topbar .undobtn::before{content:"↩";font-size:13px} }
/* On a phone the tenant matters more than the product name, and the controls are already tight: the
   "ICE GENIUS" words give way (the ◆ mark stays) so the name costs the header ~30px, not ~90px. */
@media (max-width:520px){ .topbar .brand:has(.tenantchip:not([hidden])){font-size:0;gap:6px}
  .topbar .brand .mk{font-size:13px}
  .tenantchip{max-width:84px;font-size:10px;padding:1px 6px} }
.glob{display:flex;align-items:stretch;gap:0;height:100%;overflow:hidden;flex:1}
.gstat{display:flex;flex-direction:column;justify-content:center;padding:0 14px;border-right:1px solid var(--rule);min-width:74px}
.gstat .v{font-size:13px;font-weight:700;letter-spacing:.02em}.gstat .k{font-size:9px;letter-spacing:.13em;color:var(--txt3);text-transform:uppercase}
.tb-right{display:flex;align-items:center;gap:12px;padding-left:12px}
.clock{font-size:13px;font-weight:700;color:var(--a-map);letter-spacing:.05em}
.clock small{color:var(--txt3);font-weight:500;margin-left:7px;font-size:10px}
.conn{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--green);letter-spacing:.1em}
.conn .d{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:bl 1.6s infinite}
@keyframes bl{50%{opacity:.35}}
.thsel{background:var(--pane);border:1px solid var(--rule);color:var(--txt2);border-radius:5px;padding:4px 6px;font:inherit;font-size:10px}

/* ===================== TABS ===================== */
.tabs{height:34px;flex:1;min-width:0;display:flex;align-items:stretch;border-bottom:1px solid var(--rule);background:var(--bg2);padding:0 8px;gap:1px;overflow:hidden}
.tab.tab-hidden{display:none}   /* folded into More on narrow screens (priority-nav overflow) */
.moremenu-sep{height:1px;background:var(--rule);margin:5px 0}
.moremenu-font{display:flex;align-items:center;gap:6px;padding:6px 8px}
.moremenu-font .fp-a{font:800 13px/1 system-ui,sans-serif;color:var(--txt2)}
.moremenu-font select{flex:1;background:var(--pane);border:1px solid var(--rule2);color:var(--txt);border-radius:6px;font-size:12px;padding:5px 6px}
.tab{display:flex;flex:none;align-items:center;gap:7px;padding:0 13px;font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--txt3);
  border:none;background:none;border-bottom:2px solid transparent;white-space:nowrap;text-transform:uppercase;position:relative}
.tab .kc{font-size:9px;color:var(--txt3);border:1px solid var(--rule);border-radius:3px;padding:0 4px;line-height:14px}
.tab:hover{color:var(--txt)}
.tab.on{color:var(--a-map);border-bottom-color:var(--a-map)}   /* active tab = single theme accent (consistent across all tabs) */
.tab .badge{background:var(--neg);color:#fff;border-radius:8px;font-size:9px;padding:0 5px;line-height:14px;font-weight:700}

/* ===================== VIEW ===================== */
#view{flex:1;min-height:0;position:relative;overflow:hidden}
.mod{position:absolute;inset:0;overflow:auto;padding:10px;display:none}
.mod.on{display:block}
.mod.flex{display:none}.mod.flex.on{display:flex}

/* grid helpers */
.grid{display:grid;gap:10px}
.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.g-12-1{grid-template-columns:1.2fr 1fr}.row{display:flex;gap:10px}

/* PANE */
.pane{background:var(--pane);border:1px solid var(--rule);border-radius:7px;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.pane>.ph{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;border-bottom:1px solid var(--rule);
  background:var(--head);flex:none}
.ph h3{margin:0;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt2);font-weight:700;display:flex;align-items:center;gap:7px}
.ph h3 .acc{width:7px;height:7px;border-radius:2px;background:var(--ac,var(--a-map))}
.ph .meta{font-size:10px;color:var(--txt3);letter-spacing:.06em}
.pbody{overflow:auto;flex:1;min-height:0}

/* KPI tiles */
.kpi{background:var(--pane);border:1px solid var(--rule);border-radius:7px;padding:11px 13px;position:relative;overflow:hidden}
.kpi .k{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt3)}
.kpi .v{font-size:27px;font-weight:800;letter-spacing:-.01em;margin-top:3px;line-height:1}
.kpi .sub{font-size:10px;color:var(--txt2);margin-top:5px}
.kpi .spark{position:absolute;right:10px;top:10px;opacity:.8}
.kpi .stripe{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ac,var(--a-over))}

/* TABLES (blotter) */
table.blot{width:100%;border-collapse:collapse;font-size:11px}
table.blot th{position:sticky;top:0;background:var(--head);text-align:left;padding:6px 9px;font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--txt3);font-weight:700;border-bottom:1px solid var(--rule2);cursor:pointer;white-space:nowrap;z-index:2}
table.blot th:hover{color:var(--txt)}
table.blot th.num,table.blot td.num{text-align:right;font-variant-numeric:tabular-nums}
table.blot td{padding:5px 9px;border-bottom:1px solid var(--rule);white-space:nowrap}
table.blot tbody tr{cursor:pointer}
table.blot tbody tr:hover{background:var(--hover)}
table.blot tbody tr.sel{background:var(--sel)}
table.blot tbody tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--ac,var(--a-map))}
/* #109 - the ONE focused stop on the dispatch board: the row last plainly clicked (or whose pin was).
   Selected rows keep the quiet fill above; this is the only row with an outline, so it always wins. */
table.blot tbody tr.ctstop-row.focus{background:color-mix(in srgb,var(--ac,var(--a-map)) 24%,transparent);outline:2px solid var(--ac,var(--a-map));outline-offset:-2px}
table.blot tbody tr.ctstop-row.focus td{color:var(--txt)}
table.blot tbody tr.ctstop-row.focus td:first-child{box-shadow:inset 4px 0 0 var(--ac,var(--a-map))}
.code{font-weight:700;letter-spacing:.03em}
.tag{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.04em;padding:1px 7px;border-radius:4px;border:1px solid;text-transform:uppercase}
.t-done{color:#8fe0b0;border-color:color-mix(in srgb,var(--pos) 40%,transparent);background:color-mix(in srgb,var(--pos) 12%,transparent)}
.t-uns{color:#ffce8a;border-color:color-mix(in srgb,#ffb454 50%,transparent);background:color-mix(in srgb,#ffb454 15%,transparent);font-weight:700}
.t-sched{color:#8fd6ff;border-color:color-mix(in srgb,#5ad1ff 45%,transparent);background:color-mix(in srgb,#5ad1ff 13%,transparent)}
.t-enr{color:var(--a-map);border-color:color-mix(in srgb,var(--a-map) 40%,transparent);background:color-mix(in srgb,var(--a-map) 10%,transparent)}
/* #91 - LOADED. Brian: "Probably need to subtly adjust the color to a light green." Subtly is the
   word doing the work — a loaded truck is good news, not an alert, so it reads as a quiet green
   beside the amber of TO LOAD rather than competing with the live states. */
.t-loaded{color:#7fe3a1;border-color:color-mix(in srgb,#7fe3a1 40%,transparent);background:color-mix(in srgb,#7fe3a1 12%,transparent)}
.t-next{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent);background:color-mix(in srgb,var(--warn) 10%,transparent)}
.t-q{color:var(--txt2);border-color:var(--rule2)}
.t-urg{color:var(--neg);border-color:color-mix(in srgb,var(--neg) 50%,transparent);background:color-mix(in srgb,var(--neg) 12%,transparent);animation:bl 1.1s infinite}
.t-ok{color:var(--pos);border-color:color-mix(in srgb,var(--pos) 40%,transparent);background:color-mix(in srgb,var(--pos) 10%,transparent)}
.t-risk{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent);background:color-mix(in srgb,var(--warn) 10%,transparent)}
.t-late{color:var(--neg);border-color:color-mix(in srgb,var(--neg) 45%,transparent);background:color-mix(in srgb,var(--neg) 11%,transparent)}
.dotc{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.bar{height:6px;border-radius:4px;background:var(--rule);overflow:hidden;min-width:46px;display:inline-block;vertical-align:middle}
.bar i{display:block;height:100%;border-radius:4px}
.miniact{font-size:10px;font-weight:700;letter-spacing:.04em;padding:3px 9px;border-radius:6px;border:1px solid var(--rule);
  background:var(--pane2);color:var(--txt);box-shadow:0 1px 2px -1px rgba(0,0,0,.4);transition:background .12s,border-color .12s,transform .04s}
.miniact:hover{background:color-mix(in srgb,var(--ac,var(--a-map)) 16%,var(--pane2));border-color:var(--ac,var(--a-map))}
.miniact:active{transform:translateY(1px)}
.miniact.on{background:var(--ac,var(--a-map));color:var(--ink);border-color:transparent}

/* coverage ring */
.ring{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;position:relative;flex:none}
.ring b{font-size:14px;font-weight:800}
.gauge{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--rule)}
.gauge:last-child{border-bottom:none}

/* OVERVIEW alert list */
.alert{display:flex;gap:9px;padding:8px 10px;border-bottom:1px solid var(--rule);align-items:flex-start}
.alert .ai{width:18px;height:18px;border-radius:4px;display:grid;place-items:center;font-size:11px;font-weight:800;flex:none;color:var(--ink)}
.alert .at{font-size:11px;font-weight:700}.alert .ab{font-size:10px;color:var(--txt2);margin-top:2px;line-height:1.35}
.alert .ar{margin-left:auto;font-size:9.5px;font-weight:700;color:var(--txt3)}
.alert .acts{display:flex;gap:5px;margin-top:6px;flex-wrap:wrap}

/* ASSIGN best match */
.bestmatch{border:1px solid color-mix(in srgb,var(--a-assign) 55%,transparent);border-radius:8px;padding:14px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--a-assign) 12%,transparent),transparent)}
.score{font-size:42px;font-weight:800;color:var(--a-assign);line-height:1;letter-spacing:-.02em}
.sbk{margin-top:4px}.sbk .row2{display:flex;align-items:center;gap:9px;margin:6px 0;font-size:10.5px}
.sbk .row2 .lab{width:150px;color:var(--txt2)}.sbk .row2 .bar{flex:1}

/* LOADING bay */
.bay{display:flex;flex-direction:column-reverse;gap:3px;padding:8px;background:var(--bg2);border:1px solid var(--rule);border-radius:6px}
.bayslot{height:30px;border-radius:4px;display:flex;align-items:center;padding:0 10px;font-size:10.5px;font-weight:700;color:var(--ink);justify-content:space-between}
.constraint{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--rule);font-size:11px}
.constraint .ck{margin-left:auto;font-weight:800}

/* big buttons */
.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:7px;font-size:11px;font-weight:700;letter-spacing:.05em;
  border:1px solid var(--rule);background:var(--pane2);color:var(--txt);box-shadow:0 1px 3px -1px rgba(0,0,0,.4);
  transition:background .12s,border-color .12s,transform .04s,box-shadow .12s;cursor:pointer}
.btn:hover{border-color:var(--ac,var(--a-map));background:color-mix(in srgb,var(--ac,var(--a-map)) 15%,var(--pane2))}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--ac,var(--a-map));color:var(--ink);border-color:transparent;box-shadow:0 2px 8px -2px rgba(0,0,0,.5)}
.btn.primary:hover{filter:brightness(1.08);background:var(--ac,var(--a-map))}

/* ===================== LIVE MAP MODULE ===================== */
#mapModule{padding:0}
.mapwrap{position:absolute;inset:0;display:grid;grid-template-columns:268px 1fr 280px}
#map{position:relative;background:var(--bg2)}
.leaflet-container{background:var(--bg2);font-family:inherit}
/* light themes: give the (otherwise washed-out) basemap a touch more definition so routes/pins read */
html.theme-light .leaflet-tile-pane{filter:saturate(1.08) contrast(1.06) brightness(0.97)}
.leaflet-control-attribution{background:rgba(3,7,12,.7)!important;color:var(--txt3)!important;font-size:9px}
.leaflet-control-attribution a{color:var(--txt2)!important}.leaflet-control-zoom{display:none}
.mapside{border-right:1px solid var(--rule);background:var(--pane);display:flex;flex-direction:column;min-height:0}
.mapside.r{border-right:none;border-left:1px solid var(--rule)}
.rcard{padding:9px 10px;border-bottom:1px solid var(--rule);cursor:pointer;position:relative}
.rcard:hover{background:var(--hover)}.rcard.sel{background:var(--sel)}
.rcard.sel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--rc)}
.rc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px}
/* worst (most at-risk) route floated to the top of the fleet panel */
.rcard-worst{background:rgba(255,107,138,.06);box-shadow:inset 3px 0 0 var(--neg,#ff6b8a)}
.rc-worst{font:800 8px/1 var(--mono,monospace);letter-spacing:.08em;color:var(--neg,#ff6b8a);margin-bottom:5px;display:flex;align-items:center;gap:4px}
.rc-code{font-weight:700;font-size:12px;display:flex;align-items:center;gap:6px}
.rc-meta{font-size:9.5px;color:var(--txt3);margin-bottom:6px}
.rc-bars{display:flex;flex-wrap:wrap;gap:3px 10px;font-size:9px;color:var(--txt3)}
.feedrow{padding:6px 10px;border-bottom:1px solid var(--rule);font-size:10px;display:flex;gap:7px;align-items:baseline}
.feedrow .ts{color:var(--txt3);font-size:9px;flex:none}
.feedrow .sev{width:4px;align-self:stretch;border-radius:2px;flex:none}
.mapkpi{position:absolute;left:10px;bottom:10px;z-index:500;display:flex;gap:0;background:color-mix(in srgb,var(--pane2) 80%,transparent);
  backdrop-filter:blur(8px);border:1px solid var(--rule);border-radius:7px;overflow:hidden}
.mapkpi .mk{padding:7px 12px;border-right:1px solid var(--rule)}.mapkpi .mk:last-child{border-right:none}
.mapkpi .v{font-size:15px;font-weight:800}.mapkpi .k{font-size:8.5px;letter-spacing:.12em;color:var(--txt3);text-transform:uppercase}
.maptools{position:absolute;right:10px;top:10px;z-index:500;display:flex;gap:5px}
/* Map / Satellite switch. Sits inside a Leaflet control so it rides along on every map, including
   the driver's handheld, where the buttons have to be thumb-sized rather than mouse-sized. */
/* #121 - "Base map unavailable": said, never a silent grey field */
.map-tiles-note{display:flex;flex-direction:column;gap:4px;max-width:260px;padding:9px 11px;border-radius:8px;
  background:var(--pane);border:1px solid var(--warn);box-shadow:0 2px 10px var(--shadow);color:var(--txt);font-size:11px;line-height:1.35}
.map-tiles-note b{color:var(--warn);font-size:11.5px}
.map-tiles-note .mtn-acts{display:flex;gap:6px;margin-top:3px}
.map-tiles-note button{appearance:none;border:1px solid var(--rule2);background:var(--pane2);color:var(--txt);border-radius:6px;
  font:600 10.5px/1 inherit;padding:6px 9px;min-height:28px;cursor:pointer}
.map-tiles-note button:hover{border-color:var(--warn)}
.basesw{display:flex;gap:0;border-radius:7px;overflow:hidden;border:1px solid var(--rule2);
  box-shadow:0 2px 10px var(--shadow);background:var(--pane)}
.basesw-b{appearance:none;border:0;background:var(--pane);color:var(--txt2);
  font:600 11px/1 var(--mono,inherit);letter-spacing:.02em;padding:8px 11px;cursor:pointer;white-space:nowrap;
  min-height:34px;transition:background .12s,color .12s}
.basesw-b+.basesw-b{border-left:1px solid var(--rule2)}
.basesw-b:hover{background:var(--pane2);color:var(--txt)}
.basesw-b.on{background:var(--a-map,#62d0ff);color:var(--ink,#04121b)}
@media (max-width:520px){ .basesw-b{padding:9px 12px;font-size:12px;min-height:38px} }
.mtool{background:color-mix(in srgb,var(--pane2) 80%,transparent);backdrop-filter:blur(8px);border:1px solid var(--rule);border-radius:6px;color:var(--txt2);padding:6px 9px;font-size:10px;font-weight:600}
.mtool:hover,.mtool.on{color:var(--ink);background:var(--a-map);border-color:transparent}

/* markers */
.truck-wrap{position:relative;width:30px;height:30px}
.truck-halo{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,var(--c) 0%,transparent 70%);opacity:.5;animation:halo 2.2s ease-out infinite}
@keyframes halo{0%{transform:scale(.5);opacity:.55}100%{transform:scale(1.5);opacity:0}}
.truck-glyph{position:absolute;top:50%;left:50%;width:23px;height:23px;transform:translate(-50%,-50%);border-radius:6px;
  display:grid;place-items:center;background:#06121e;border:1.5px solid var(--rc);box-shadow:0 0 12px -2px var(--rc);font-size:11px;color:var(--rc)}
.truck-rot{display:block}
.stopmk{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:9px;font-weight:800;
  border:2px solid var(--rc);background:#06121e;color:var(--rc);box-shadow:0 0 0 2px rgba(6,18,30,.7)}
.stopmk.done{background:var(--rc);color:#04121e}.stopmk.next{animation:np 1.4s infinite;border-color:#fff}
@keyframes np{50%{box-shadow:0 0 0 5px rgba(255,255,255,.001),0 0 0 2px rgba(6,18,30,.7)}}
.stopmk.urg{border-color:var(--neg);color:var(--neg);animation:np 1s infinite}
.depotmk{width:20px;height:20px;transform:rotate(45deg);border-radius:4px;background:#06121e;border:2px solid var(--cyan);display:grid;place-items:center;box-shadow:0 0 10px -2px var(--cyan)}
.depotmk i{transform:rotate(-45deg);font-size:9px;color:var(--cyan);font-style:normal}
.leaflet-popup-content-wrapper{background:var(--pane2);color:var(--txt);border:1px solid var(--rule2);border-radius:7px}
.leaflet-popup-tip{background:var(--pane2)}.leaflet-popup-content{margin:9px 11px;font-size:11px}
.poph{font-weight:700;margin-bottom:4px;display:flex;align-items:center;gap:6px}
.popr{display:flex;justify-content:space-between;gap:16px;color:var(--txt2)}.popr b{color:var(--txt)}

/* ===================== TAPE + STATUSBAR ===================== */
.tape{height:28px;flex:none;display:flex;align-items:center;border-top:1px solid var(--rule);background:var(--bg2);overflow:hidden}
.tape .lbl{flex:none;padding:0 11px;height:100%;display:flex;align-items:center;font-size:9.5px;font-weight:700;letter-spacing:.14em;
  color:var(--ink);background:var(--a-feed);text-transform:uppercase}
.tape .track{flex:1;overflow:hidden;position:relative;height:100%}
.tape .marq{position:absolute;white-space:nowrap;display:flex;align-items:center;height:100%;animation:marq 60s linear infinite;will-change:transform}
.tape .it{padding:0 18px;font-size:10.5px;color:var(--txt2);display:inline-flex;gap:8px;align-items:center}
.tape .it b{color:var(--txt)}.tape .it .sv{width:6px;height:6px;border-radius:50%}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tape:hover .marq{animation-play-state:paused}
/* significant events (new orders / equipment / urgent + alerts) get a red border so they stand out */
.tape .it.sig{border:1.5px solid var(--neg);border-radius:6px;padding:2px 12px;background:color-mix(in srgb,var(--neg) 18%,transparent)}
.tape .it.sig b{color:var(--neg)}
.statusbar{height:20px;flex:none;display:flex;align-items:center;gap:0;border-top:1px solid var(--rule);background:var(--bg);font-size:9.5px;color:var(--txt3);padding:0 10px}
.statusbar .s{padding:0 11px;border-right:1px solid var(--rule)}.statusbar .s:first-child{padding-left:0}
.statusbar .sp{flex:1}
kbd{font:inherit;font-size:9px;border:1px solid var(--rule2);border-radius:3px;padding:0 4px;color:var(--txt2);background:var(--pane)}

/* toast */
#toasts{position:fixed;top:58px;left:50%;transform:translateX(-50%);z-index:999;display:flex;flex-direction:column;gap:7px;align-items:center}
.toast{background:var(--pane2);border:1px solid var(--rule2);border-left:3px solid var(--a-map);border-radius:6px;padding:9px 14px;font-size:11px;
  box-shadow:0 14px 36px -14px var(--shadow);animation:ti .25s ease;max-width:460px}
@keyframes ti{from{opacity:0;transform:translateY(8px)}}
.toast b{color:var(--txt)}

/* ===== Live-map ops rail ===== */
.opsec{border-bottom:1px solid var(--rule)}
.opsh{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:7px 10px;
  background:var(--head);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt2);font-weight:700;border-bottom:1px solid var(--rule)}
.opsh .n{background:var(--ac,var(--a-map));color:var(--ink);border-radius:8px;padding:0 6px;font-size:9px}
.qcard{padding:8px 10px;border-bottom:1px solid var(--rule)}
.qcard .qt{display:flex;align-items:center;justify-content:space-between;gap:6px}
.qcard .qm{font-size:9.5px;color:var(--txt3);margin:3px 0 6px}
.monrow{padding:8px 10px;border-bottom:1px solid var(--rule)}
.monrow .mt{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700}
.monrow .ms{display:flex;align-items:center;gap:6px;font-size:9.5px;color:var(--txt3);margin:4px 0 6px}
.monrow .acts{display:flex;gap:5px;flex-wrap:wrap}
.sdot{width:8px;height:8px;border-radius:50%;flex:none}

/* ===== Dispatch board ===== */
.dwrap{display:flex;flex-direction:column;height:100%}
.dstrip{display:flex;gap:8px;align-items:center;margin-bottom:9px;flex:none}
.dpill{border:1px solid var(--rule);border-radius:6px;padding:5px 11px;font-size:10px}
.dpill b{font-size:14px;font-weight:800;margin-right:5px}
/* Billing: A/R filter chips + inline record-payment */
.billchips{display:flex;gap:6px;flex-wrap:wrap;padding:8px 12px 0}
.billchip{background:var(--pane);color:var(--txt2);border:1px solid var(--rule);border-radius:999px;padding:4px 11px;font:inherit;font-size:10px;font-weight:600;cursor:pointer;transition:background .12s,border-color .12s,color .12s}
.billchip b{font-weight:800;margin-left:3px;color:var(--txt3)}
.billchip:hover{background:var(--hover);border-color:var(--rule2)}
.billchip.on{color:var(--txt);border-color:var(--a-feed);box-shadow:inset 0 0 0 1px var(--a-feed)}
.billchip.on b{color:var(--a-feed)}
.billchip.bc-overdue.on{border-color:var(--neg);box-shadow:inset 0 0 0 1px var(--neg)}.billchip.bc-overdue.on b{color:var(--neg)}
.billchip.bc-paid.on{border-color:var(--pos);box-shadow:inset 0 0 0 1px var(--pos)}.billchip.bc-paid.on b{color:var(--pos)}
/* radar route-card right-click menu (playback report) */
.rcardmenu{position:fixed;z-index:4000;background:var(--pane);border:1px solid var(--rule2);border-radius:9px;box-shadow:0 12px 34px var(--shadow,rgba(0,0,0,.5));padding:5px;min-width:210px;display:flex;flex-direction:column;gap:2px}
.rcardmenu button{display:block;width:100%;text-align:left;background:none;border:none;color:var(--txt);font:inherit;font-size:12px;padding:8px 11px;border-radius:6px;cursor:pointer;white-space:nowrap}
.rcardmenu button:hover{background:var(--hover)}
.billpay{background:rgba(65,240,173,.12);color:#1f9c6e;border:1px solid rgba(65,240,173,.45);border-radius:6px;padding:3px 9px;font:inherit;font-size:9px;font-weight:800;white-space:nowrap;cursor:pointer}
html:not(.theme-light) .billpay{color:#41f0ad}
/* #4 AR view toggle (Invoices · Collections · COD Cash) */
.billviews{display:inline-flex;gap:5px}
.billview{background:var(--pane2);border:1px solid var(--rule2);color:var(--txt2);border-radius:999px;padding:3px 11px;font:600 10px/1.4 var(--mono);cursor:pointer;transition:.12s}
.billview:hover{filter:brightness(1.12)}
.billview.on{background:color-mix(in srgb,var(--a-feed) 20%,transparent);border-color:var(--a-feed);color:var(--txt)}
.collhdr{padding:9px 12px;font-size:11.5px;color:var(--txt2);border-bottom:1px solid var(--rule);background:var(--head)}
.collhdr b{color:var(--txt)} .collhdr b.neg{color:var(--neg)} .collhdr b.pos{color:var(--pos)}
.agebar{display:inline-flex;width:100%;max-width:150px;height:9px;border-radius:5px;overflow:hidden;background:var(--pane2);vertical-align:middle}
.agebar i{display:block;height:100%}
.custtbl td.age-30,.blot td.age-30{color:var(--warn)} .blot td.age-60{color:var(--a-load)} .blot td.age-90{color:var(--neg);font-weight:800}
tr.coll-over{box-shadow:inset 3px 0 0 var(--neg)}
tr.collrow{cursor:default}
.billpay:hover{background:rgba(65,240,173,.24)}
/* Load/Unload: whole-dock floor board */
.lt-dock{background:var(--pane);border:1px solid var(--rule2);border-radius:6px;color:var(--txt2);font:inherit;font-size:9px;font-weight:700;padding:3px 8px;cursor:pointer}
.lt-dock:hover{border-color:var(--a-load,#ff9a6a);color:var(--txt)}
.lt-dock.on{background:var(--a-load,#ff9a6a);color:var(--ink);border-color:transparent}
.dockboard{display:flex;flex-direction:column;gap:8px}
.dockcard{display:flex;align-items:stretch;gap:11px;border:1px solid var(--rule);border-left:3px solid var(--rc);border-radius:9px;padding:9px 12px;background:var(--pane);cursor:pointer;transition:background .12s}
.dockcard:hover{background:var(--hover)}
.dockcard.done{opacity:.72}
.dock-seq{flex:0 0 30px;display:flex;align-items:center;justify-content:center;font:800 15px/1 var(--mono,monospace);color:var(--txt2);background:var(--head);border-radius:7px}
.dock-seq.ok{color:var(--pos,#41f0ad)}
.dock-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.dock-top{display:flex;align-items:center;gap:6px;font-size:12px}
.dock-sub{font-size:10px;color:var(--txt2)}.dock-sub b{color:var(--txt);font-family:var(--mono,monospace)}
.dock-bar{height:4px;background:var(--rule);border-radius:3px;overflow:hidden}
.dock-bar>i{display:block;height:100%;background:var(--rc);border-radius:3px;transition:width .3s}
.recon tfoot td{border-top:2px solid var(--rule2);padding-top:5px}
/* Radar: cold-chain melt-risk ring + ghost-truck projection */
.dtruck{position:relative}
.dtruck .truck-rot{position:relative;z-index:1}
.meltring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:0}
.meltring.mr-ok,.meltring.mr-na{display:none}
.meltring.mr-warm{width:34px;height:34px;background:radial-gradient(circle,rgba(255,180,84,.30),transparent 70%);box-shadow:0 0 0 2px rgba(255,180,84,.55)}
.meltring.mr-hot{width:40px;height:40px;background:radial-gradient(circle,rgba(255,107,138,.36),transparent 68%);box-shadow:0 0 0 2px rgba(255,107,138,.75);animation:meltpulse 1.5s ease-in-out infinite}
@keyframes meltpulse{0%,100%{opacity:.55}50%{opacity:1}}
.ghosttruck{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font:800 8px/1 var(--mono,monospace);color:var(--rc);background:var(--bg2,#0a1622);border:1.5px dashed var(--rc);opacity:.6}
.ghosttruck.g60{opacity:.34}
/* Overview: Ice Demand Index — weather-driven demand vs staged supply */
.idx-strip{margin:12px 0;border:1px solid var(--rule);border-left:3px solid var(--a-map,#5ad1ff);border-radius:10px;padding:11px 14px;background:var(--pane)}
.idx-strip.risk{border-left-color:var(--neg,#ff6b8a);background:linear-gradient(90deg,rgba(255,107,138,.06),transparent)}
.idx-hd{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:9px}
.idx-t{font:800 11px/1 var(--mono,monospace);letter-spacing:.06em;color:var(--txt)}
.idx-sub{font-size:10px}
.idx-risk{margin-left:auto;font:800 10px/1 var(--mono,monospace);color:var(--neg,#ff6b8a);border:1px solid var(--neg,#ff6b8a);border-radius:999px;padding:4px 10px;background:rgba(255,107,138,.1)}
.idx-okpill{margin-left:auto;font:800 10px/1 var(--mono,monospace);color:var(--pos,#41f0ad);border:1px solid rgba(65,240,173,.5);border-radius:999px;padding:4px 10px}
.idx-rows{display:flex;flex-direction:column;gap:6px}
.idx-row{display:flex;align-items:center;gap:10px}
.idx-dl{flex:0 0 130px;font-size:11px;color:var(--txt2)}
.idx-dl b{color:var(--txt);font-family:var(--mono,monospace)}
.idx-dl b.idx-hot{color:#ff8f6a}
.idx-track{position:relative;flex:1;height:14px;background:var(--rule);border-radius:7px;overflow:hidden}
.idx-track>i{position:absolute;left:0;top:0;bottom:0;background:var(--a-map,#5ad1ff);border-radius:7px;transition:width .3s}
.idx-track>i.over{background:var(--neg,#ff6b8a)}
.idx-track>.idx-sup{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--txt);opacity:.65;transform:translateX(-1px)}
.idx-dv{flex:0 0 64px;text-align:right;font-family:var(--mono,monospace);font-weight:800;font-size:12px;color:var(--txt)}
.idx-foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin-top:9px;font-size:10px;color:var(--txt3)}
.idx-key{display:flex;align-items:center;gap:5px}
.idx-kd,.idx-ks{display:inline-block;width:10px;height:10px;border-radius:2px;vertical-align:-1px}
.idx-kd{background:var(--a-map,#5ad1ff)}.idx-ks{background:var(--txt);width:2px;height:12px;border-radius:0}
/* weather chip on Radar + Dispatch maps */
.wxchip{display:flex;align-items:center;gap:7px;background:var(--pane);border:1px solid var(--rule2);border-radius:10px;padding:6px 10px;margin:8px;box-shadow:0 2px 10px rgba(0,0,0,.28);cursor:pointer;font-size:11px;color:var(--txt)}
.wxchip.risk{border-color:var(--neg,#ff6b8a)}
.wxchip:hover{border-color:var(--a-map,#5ad1ff)}
.wxchip .wx-ic{font-size:18px;line-height:1}
.wxchip .wx-txt{display:flex;flex-direction:column;line-height:1.25}
.wxchip .wx-txt b{font-weight:800}
.wxchip .wx-risk{font-size:9px;font-weight:800;color:var(--neg,#ff6b8a)}
/* radar: lift the weather chip above the bottom-left .mapkpi metrics bar so they don't overlap.
   Specificity must beat Leaflet's own `.leaflet-bottom .leaflet-control{margin-bottom:10px}`. */
.leaflet-bottom .leaflet-control.wxchip-lift{margin-bottom:70px}
/* Dispatch: hard-deadline rail above the backlog */
.ddeadrail{margin:8px 0 0;padding:7px 10px;border:1px solid var(--rule);border-left:3px solid var(--a-blot,#ffb454);border-radius:8px;background:var(--pane)}
.ddead-hd{font:800 9px/1 var(--mono,monospace);letter-spacing:.05em;text-transform:uppercase;color:var(--txt2);display:flex;align-items:center;gap:7px;margin-bottom:7px}
.ddead-n{background:var(--rule2);color:var(--txt);border-radius:999px;padding:1px 7px;font-size:9px}
.ddead-risk{color:var(--neg,#ff6b8a);border:1px solid var(--neg,#ff6b8a);border-radius:999px;padding:1px 7px;font-size:8px}
.ddead-strip{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px}
.ddead-chip{flex:0 0 auto;display:flex;align-items:center;gap:6px;background:var(--pane2,var(--head));border:1px solid var(--rule2);border-left:3px solid var(--rule2);border-radius:7px;padding:5px 9px;font:inherit;font-size:10px;color:var(--txt);cursor:pointer;white-space:nowrap;transition:background .12s}
.ddead-chip:hover{background:var(--hover)}
.ddead-chip .dd-ic{font-size:11px}
.ddead-chip .dd-nm{font-weight:700;max-width:130px;overflow:hidden;text-overflow:ellipsis}
.ddead-chip .dd-dl{font-family:var(--mono,monospace);color:var(--txt2);font-size:9px}
.ddead-chip .dd-st{font-family:var(--mono,monospace);font-size:9px;font-weight:700;padding:1px 6px;border-radius:4px}
.ddead-chip.dl-ok{border-left-color:var(--pos,#41f0ad)}.ddead-chip.dl-ok .dd-st{color:var(--pos,#41f0ad);background:rgba(65,240,173,.12)}
.ddead-chip.dl-soon{border-left-color:#ffb454}.ddead-chip.dl-soon .dd-st{color:#c98a1f;background:rgba(255,180,84,.14)}
html:not(.theme-light) .ddead-chip.dl-soon .dd-st{color:#ffb454}
.ddead-chip.dl-past{border-left-color:var(--neg,#ff6b8a)}.ddead-chip.dl-past .dd-st{color:var(--neg,#ff6b8a);background:rgba(255,107,138,.13)}
/* Equipment: per-hub in-stock vs requested shortfall strip */
.eq-short{margin-bottom:12px;border:1px solid var(--rule);border-radius:9px;overflow:hidden}
.eq-short-hd{font:800 9px/1 var(--mono,monospace);letter-spacing:.06em;text-transform:uppercase;color:var(--txt2);padding:8px 11px;background:var(--head);display:flex;align-items:center;gap:8px}
.eq-short-warn{color:var(--neg,#ff6b8a);border:1px solid var(--neg,#ff6b8a);border-radius:999px;padding:1px 7px;font-size:8px}
.eq-short-row{display:flex;gap:0}
.eq-short-cell{flex:1;padding:9px 12px;border-left:3px solid var(--pos,#41f0ad);border-right:1px solid var(--rule);display:flex;flex-direction:column;gap:3px}
.eq-short-cell:last-child{border-right:none}
.eq-short-cell.short{border-left-color:var(--neg,#ff6b8a);background:rgba(255,107,138,.05)}
.eq-short-name{font-weight:800;font-size:11px;color:var(--txt)}
.eq-short-nums{display:flex;align-items:baseline;gap:5px;font-size:9px;color:var(--txt3)}
.eq-short-nums b{font-size:15px;font-weight:800;color:var(--txt);font-family:var(--mono,monospace)}
.eq-short-gap{font:800 9px/1 var(--mono,monospace);margin-top:2px}
.eq-short-cell.ok .eq-short-gap{color:var(--pos,#41f0ad)}
.eq-short-cell.short .eq-short-gap{color:var(--neg,#ff6b8a)}
/* Orders: clickable filter pills */
.dpill-f{background:var(--pane);color:var(--txt);font:inherit;font-size:10px;cursor:pointer;transition:background .12s,border-color .12s}
.dpill-f:hover{background:var(--hover);border-color:var(--rule2)}
.dpill-f.on{border-color:var(--a-route);box-shadow:inset 0 0 0 1px var(--a-route);background:color-mix(in srgb,var(--a-route) 10%,var(--pane))}
tr.ord-risk td{background:rgba(255,107,138,.07)}
.ord-riskdot{color:var(--neg,#ff6b8a);font-weight:800}
.seg{display:flex;border:1px solid var(--rule);border-radius:6px;overflow:hidden;margin-left:auto}
.seg button{padding:5px 12px;font-size:10px;font-weight:600;background:var(--pane);border:none;color:var(--txt3);letter-spacing:.05em}
.seg button.on{background:var(--a-map);color:var(--ink)}
.dboard{display:flex;gap:10px;flex:1;min-height:0}
.bucket{width:236px;flex:none;display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:7px;background:var(--pane);overflow:hidden}
.lanes{flex:1;display:flex;gap:10px;overflow-x:auto;padding-bottom:4px}
.lane{width:228px;flex:none;display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:7px;background:var(--pane);overflow:hidden;transition:.15s}
.lane.target{outline:2px dashed var(--rc);outline-offset:-2px;cursor:pointer}
.lane.target:hover{background:var(--hover)}
.lanehd{padding:8px 10px;border-bottom:1px solid var(--rule);background:var(--head);position:relative}
.lanehd::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--rc)}
.lanestops{flex:1;overflow:auto}
.ordcard{border:1px solid var(--rule);border-radius:6px;padding:8px;margin:7px;background:var(--pane2);cursor:pointer;transition:.12s}
.ordcard:hover{border-color:var(--a-blot)}
.ordcard.sel{outline:1.5px solid var(--a-blot);border-color:transparent;background:var(--sel)}
.stopchip{display:flex;align-items:center;gap:8px;padding:6px 9px;border-bottom:1px solid var(--rule);font-size:10.5px}
.stopchip .sn{width:17px;height:17px;border-radius:50%;display:grid;place-items:center;font-size:9px;font-weight:800;flex:none;border:1.5px solid var(--rc);color:var(--rc)}
.stopchip.done .sn{background:var(--rc);color:var(--ink)}.stopchip.done{opacity:.5}
.stopchip.next .sn{border-color:#fff;animation:bl 1.4s infinite}
.dropzone{margin:7px;padding:11px;border:1.5px dashed var(--rc);border-radius:6px;text-align:center;font-size:10px;color:var(--rc);cursor:pointer;font-weight:700;letter-spacing:.05em}
.dropzone:hover{background:var(--hover)}
.capm{height:5px;border-radius:4px;background:var(--rule);overflow:hidden;margin-top:6px}.capm i{display:block;height:100%}

/* ===== Route lists ===== */
.rlwrap{display:grid;grid-template-columns:300px 1fr;gap:10px;height:100%}
.rltpl{padding:10px;border-bottom:1px solid var(--rule);cursor:pointer;position:relative}
.rltpl:hover{background:var(--hover)}.rltpl.sel{background:var(--sel)}
.rltpl.sel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--a-route)}
.rltpl .due{font-size:9px;letter-spacing:.05em;padding:1px 6px;border-radius:4px}
.chk{width:16px;height:16px;border-radius:4px;border:1.5px solid var(--rule2);display:inline-grid;place-items:center;cursor:pointer;font-size:10px;color:transparent;flex:none}
.chk.on{background:var(--a-route);border-color:transparent;color:var(--ink)}

/* ===== Inventory ===== */
.invbar{height:8px;border-radius:5px;background:var(--rule);overflow:hidden;min-width:90px;display:inline-block;vertical-align:middle}
.invbar i{display:block;height:100%;border-radius:5px}
.sku{display:inline-flex;align-items:center;gap:5px;font-size:10px}.sku .sg{width:10px;height:10px;border-radius:3px}

/* ===== Truck cargo (loading) ===== */
.truckwrap{display:flex;justify-content:center;padding:6px 0}
.bays{display:flex;gap:3px;align-items:flex-end}
.tbay{width:74px;border-radius:4px 4px 0 0;display:flex;flex-direction:column;justify-content:flex-end;padding:7px 6px;
  color:var(--ink);font-size:9.5px;font-weight:700;position:relative;cursor:pointer;transition:.15s;border:1px solid rgba(0,0,0,.2)}
.tbay:hover{filter:brightness(1.12)}
.tbay.dim{opacity:.32}.tbay.now{outline:2px solid #fff;outline-offset:1px}
.tbay .lab{font-size:9px;opacity:.85}.tbay .wt{font-size:13px;font-weight:800;line-height:1}
.tbay .stack{display:flex;flex-direction:column;gap:2px;margin-bottom:5px}
.tbay .ice{height:6px;border-radius:2px;background:rgba(255,255,255,.55)}
.tlx{display:flex;align-items:stretch;gap:0}
.cab{width:34px;background:linear-gradient(180deg,var(--rule2),var(--head));border:1px solid var(--rule2);border-radius:6px 10px 0 6px;align-self:stretch;display:grid;place-items:center;color:var(--txt3);font-size:8px}
.ltabs{display:flex;gap:0;border:1px solid var(--rule);border-radius:6px;overflow:hidden;width:max-content}
.ltabs button{padding:6px 16px;font-size:10px;font-weight:700;letter-spacing:.06em;background:var(--pane);border:none;color:var(--txt3)}
.ltabs button.on{background:var(--a-map);color:var(--ink)}

/* ===== Graphical dock scene ===== */
.dock-scene{position:relative;height:288px;border:1px solid var(--rule);border-radius:8px;overflow:hidden;flex:none;
  background:linear-gradient(180deg,#0a1119 0%,#0a1119 60%,#0c141d 60%,#0c141d 100%)}
.dock-grid{position:absolute;inset:0;background-image:linear-gradient(var(--rule) 1px,transparent 1px);background-size:100% 30px;opacity:.16}
.dground{position:absolute;left:0;right:0;bottom:0;height:40%;background:#0c141d;border-top:1px solid var(--rule2);
  background-image:repeating-linear-gradient(90deg,transparent,transparent 76px,rgba(255,255,255,.03) 76px,rgba(255,255,255,.03) 78px)}
.wh{position:absolute;left:0;top:18px;bottom:0;width:44%;background:linear-gradient(180deg,#141d27,#0e151d);border-right:4px solid #080d12;z-index:1}
.wh-roof{position:absolute;top:0;left:0;right:0;height:15px;background:#080d12}
.wh-sign{position:absolute;top:22px;left:16px;font-size:10px;letter-spacing:.16em;color:var(--a-load);font-weight:800}
.wh-sub{position:absolute;top:38px;left:16px;font-size:8px;letter-spacing:.12em;color:var(--txt3)}
.bay-opening{position:absolute;right:-4px;bottom:40%;width:118px;height:128px;background:#04070b;border:3px solid #080d12;border-right:none;border-radius:5px 0 0 5px}
.bay-opening .roll{position:absolute;top:0;left:0;right:0;height:32px;background:repeating-linear-gradient(180deg,#1b2734,#1b2734 4px,#141d27 4px,#141d27 8px);border-bottom:2px solid #080d12}
.bay-opening .lbl{position:absolute;bottom:5px;left:0;right:0;text-align:center;font-size:8px;color:var(--txt3);letter-spacing:.12em}
.leveler{position:absolute;left:calc(44% - 4px);bottom:calc(40% + 4px);width:30px;height:7px;background:#34485a;transform:skewX(-22deg);z-index:4}
.staging{position:absolute;left:14px;bottom:calc(40% + 3px);display:flex;gap:5px;align-items:flex-end;z-index:2}
.staging .ttl{position:absolute;top:-15px;left:0;font-size:8px;color:var(--txt3);letter-spacing:.1em;white-space:nowrap}
.pallet{width:21px;border-radius:2px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:2px;border:1px solid rgba(0,0,0,.25)}
.pallet .pi{width:15px;height:3px;background:rgba(255,255,255,.5);border-radius:1px;margin:1px 0}
.dock-truck{position:absolute;right:14px;bottom:40%;display:flex;align-items:flex-end;z-index:3;
  transform:translateX(140%);transition:transform 1.25s cubic-bezier(.2,.8,.25,1)}
.dock-truck.in{transform:translateX(0)}
.dt-box{position:relative;display:flex;align-items:flex-end;gap:0;height:120px;padding:14px 5px 6px;background:#0c141d;border:2px solid #243341;border-radius:3px}
.dt-box::before{content:"REEFER 26' · #104";position:absolute;top:3px;left:0;right:0;text-align:center;font-size:7px;letter-spacing:.12em;color:var(--txt3)}
.dt-cab{width:36px;height:78px;margin-left:3px;background:linear-gradient(180deg,#26333f,#141d27);border:2px solid #243341;border-radius:5px 9px 3px 3px;position:relative}
.dt-cab::after{content:"";position:absolute;top:9px;left:6px;right:6px;height:17px;background:#0a3850;border-radius:3px;opacity:.8}
.dt-wheel{position:absolute;bottom:-11px;width:17px;height:17px;border-radius:50%;background:#05080c;border:3px solid #243341}
.dbay{position:relative;width:26px;height:100%;border-radius:3px 3px 0 0;border:1px dashed var(--rule2);overflow:hidden;background:rgba(255,255,255,.015);margin:0 1px}
.dbay .bn{position:absolute;top:2px;left:0;right:0;text-align:center;font-size:7px;color:var(--txt3);z-index:2}
.dbay .fill{position:absolute;left:1px;right:1px;bottom:1px;border-radius:2px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;color:var(--ink);font-size:7.5px;font-weight:800;padding-bottom:1px}
.dbay .fill .pi{width:15px;height:3px;background:rgba(255,255,255,.55);border-radius:1px;margin:1px 0}
.dbay.full{border-style:solid;border-color:rgba(0,0,0,.3)}
@keyframes dropIn{from{transform:translateY(-150%);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes slideOut{from{transform:translateX(0);opacity:1}to{transform:translateX(-220%);opacity:0}}
.dbay.anim-load .fill{animation:dropIn .5s ease}
.dbay.anim-unload .fill{animation:slideOut .55s ease forwards}
.forklift{position:absolute;bottom:calc(40% - 3px);left:38%;font-size:19px;z-index:5;opacity:0;transition:left .5s ease,opacity .25s}
.forklift.show{opacity:1}

/* command palette */
#cmdk{position:fixed;inset:0;z-index:980;display:none;align-items:flex-start;justify-content:center;padding-top:12vh;
  background:rgba(2,5,9,.62);backdrop-filter:blur(3px)}
#cmdk.on{display:flex}
.cmdbox{width:560px;max-width:92vw;background:var(--pane);border:1px solid var(--rule2);border-radius:10px;
  box-shadow:0 30px 80px -20px #000;overflow:hidden;animation:cin .16s ease}
@keyframes cin{from{opacity:0;transform:translateY(-8px) scale(.99)}}
.cmdbox input{width:100%;border:none;background:transparent;color:var(--txt);font:14px 'JetBrains Mono',monospace;
  padding:15px 16px;outline:none;border-bottom:1px solid var(--rule)}
.cmdbox input::placeholder{color:var(--txt3)}
.cmdlist{max-height:46vh;overflow:auto}
.cmdrow{display:flex;align-items:center;gap:11px;padding:9px 16px;font-size:12px;cursor:pointer;border-left:2px solid transparent}
.cmdrow .ci{width:22px;height:22px;border-radius:5px;display:grid;place-items:center;font-size:11px;font-weight:800;color:var(--ink);flex:none}
.cmdrow .cg{margin-left:auto;font-size:9.5px;color:var(--txt3);letter-spacing:.1em;text-transform:uppercase}
.cmdrow.sel{background:var(--hover);border-left-color:var(--a-map)}
.cmdrow .ck{font-size:9px;border:1px solid var(--rule2);border-radius:3px;padding:0 5px;color:var(--txt2)}
.cmdhint{padding:7px 16px;border-top:1px solid var(--rule);font-size:9.5px;color:var(--txt3);display:flex;gap:14px}

/* boot */
#boot{position:fixed;inset:0;z-index:1000;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;transition:opacity .5s}
#boot.hide{opacity:0;pointer-events:none}
.bmk{width:46px;height:46px;border-radius:11px;display:grid;place-items:center;font-size:24px;font-weight:800;color:var(--ink);background:var(--a-map);box-shadow:0 0 30px -4px var(--a-map)}
.bt{font-size:15px;font-weight:700;letter-spacing:.1em}.bs{font-size:10px;color:var(--txt3);letter-spacing:.2em;text-transform:uppercase}
.bootlog{font-size:10px;color:var(--txt3);height:14px}

/* ===================== RADAR / BOARD mode + Geoman + Areas editor ===================== */
.modeswitch{display:flex;gap:0;border:1px solid var(--rule2);border-radius:6px;overflow:hidden}
.modeswitch .mbtn{padding:5px 10px;font-size:10px;font-weight:700;letter-spacing:.08em;background:var(--pane);border:none;color:var(--txt2);border-right:1px solid var(--rule2)}
.modeswitch .mbtn:last-child{border-right:none}
.modeswitch .mbtn:hover{background:var(--hover);color:var(--txt)}

/* mode badge shown in topbar brand when window is locked to a role */
.modebadge{margin-left:10px;font-size:9.5px;font-weight:800;letter-spacing:.18em;padding:2px 9px;border-radius:5px;color:var(--ink)}
.modebadge.radar{background:var(--a-map)}.modebadge.board{background:var(--a-blot)}

/* locked full-screen role windows hide the tab bar + mode switch */
body.mode-radar .tabs,body.mode-board .tabs,body.mode-radar .modeswitch,body.mode-board .modeswitch{display:none}
body.mode-radar #mod-map,body.mode-board #mod-dispatch{padding:0}

/* cross-window linked selection highlight */
.rcard.linksel,.lane.linksel,.rrow.linksel,.grow.linksel{outline:2px solid var(--rc);outline-offset:-2px}
.rcard.sel,.rcard.linksel{box-shadow:inset 3px 0 0 var(--rc)}

/* Geoman toolbar — match the terminal theme */
.leaflet-pm-toolbar .leaflet-pm-actions-container,.leaflet-pm-toolbar .button-container a{background:var(--pane2);color:var(--txt)}
.leaflet-pm-toolbar .button-container a.leaflet-pm-actions-container{border-color:var(--rule2)}
/* Geoman DRAW tools on the dedicated center areas map — make the buttons a touch larger */
#areaMap .leaflet-pm-toolbar .button-container a{width:32px;height:32px;background-size:18px 18px}
/* hide Geoman's native Finish/Cancel action buttons (they clutter when idle) — use a custom bar */
.leaflet-pm-toolbar .leaflet-pm-actions-container{display:none!important}
.area-drawbar{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:1000;display:none;
  align-items:center;gap:8px;background:var(--pane2);border:1px solid var(--a-cover);border-radius:8px;padding:7px 10px;box-shadow:0 6px 20px rgba(0,0,0,.55)}
.area-drawbar.on{display:flex}
.area-drawhint{font-size:10px;color:var(--txt2)}
.area-dbtn{font:700 10px/1 var(--mono,monospace);text-transform:uppercase;letter-spacing:.03em;border-radius:5px;padding:7px 12px;cursor:pointer;border:1px solid var(--rule2);background:var(--pane);color:var(--txt)}
.area-dbtn.ok{background:var(--pos);color:#04201a;border-color:transparent}
.area-dbtn:hover{filter:brightness(1.12)}

/* Areas editor (admin) */
/* "routine is live" status chip on the Service Routes today panel (replaces the old disabled BUILD button) */
.rl-livechip{display:block;font-size:10px;font-weight:700;color:var(--pos);background:color-mix(in srgb,var(--pos) 14%,transparent);
  border:1px solid var(--pos);border-radius:5px;padding:6px 9px;text-align:center;letter-spacing:.01em}

/* on-the-fly route chip (Dispatch lane list) — distinguishes ad-hoc from routine routes */
.otfchip{display:inline-block;font-size:8px;font-weight:800;letter-spacing:.04em;color:#fff;
  background:#7c5cff;border-radius:3px;padding:1px 4px;vertical-align:middle}
/* will-call badge — one dedicated color, used everywhere a will-call stop appears */
.wc-badge{display:inline-block;font:800 7.5px/1.4 var(--mono,monospace);letter-spacing:.04em;color:#2a0a2e;background:#e879f9;border-radius:3px;padding:1px 4px;vertical-align:middle;white-space:nowrap}

/* merged Routes screen — sub-tab chrome over Territories / Service Routes views */
.routesScreen{display:flex;flex-direction:column;height:100%;gap:8px}
.routes-subtabs{flex:none;display:flex;gap:6px;border-bottom:1px solid var(--rule);padding-bottom:7px}
.routes-subtabs .rsub{font:600 11px/1 var(--mono,inherit);letter-spacing:.03em;color:var(--txt2);
  background:var(--pane);border:1px solid var(--rule);border-radius:6px;padding:7px 13px;cursor:pointer;
  text-transform:uppercase;transition:background .12s,color .12s,border-color .12s}
.routes-subtabs .rsub:hover{background:var(--hover);color:var(--txt)}
.routes-subtabs .rsub.on{background:var(--a-route);border-color:transparent;color:var(--ink)}
.routesBody{flex:1;min-height:0;position:relative}
/* unified Routes screen — 4 cols: Delivery Areas list+form | Areas draw map | Service Routes (selector+stops) | Route map */
/* Delivery-Areas columns hidden by default; "Manage Delivery Areas" toggles them */
.rlscreen{display:flex;flex-direction:column;height:100%;gap:8px}
.rltoolbar{flex:none;display:flex;align-items:center;gap:9px}
.rlscreen>.rl3r,.rlscreen>.rl2areas,.rlscreen>.rl1c{flex:1;min-height:0}
/* Routes sub-tab: selector | selected-route stops | route map (map takes the most space) */
.rl3r{display:grid;grid-template-columns:268px 400px 1fr;gap:9px;height:100%}
.rl-stopcol{display:flex;flex-direction:column;min-height:0;overflow:hidden}
/* Delivery Areas sub-tab: areas list+form | (sub-areas) | full draw map */
.rl2areas{display:grid;grid-template-columns:320px 1fr;gap:9px;height:100%}
.rlscreen>.rl3areas{flex:1;min-height:0}
.rl3areas{display:grid;grid-template-columns:262px 232px 1fr;gap:9px;height:100%}
.rl-subcol{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.prefsec{font:700 9px/1 var(--mono,monospace);letter-spacing:.05em;text-transform:uppercase;color:var(--txt3);margin:14px 0 7px;border-bottom:1px solid var(--rule);padding-bottom:5px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.prefsec:first-of-type{margin-top:0}
/* setting scope badges: This device · This tenant · My profile */
.scopebadge{display:inline-block;font:800 8px/1.4 var(--mono,monospace);letter-spacing:.02em;padding:2px 6px;border-radius:999px;border:1px solid;vertical-align:middle;text-transform:none;white-space:nowrap}
.sb-device{color:#38b6e6;border-color:rgba(56,182,230,.5);background:rgba(56,182,230,.1)}
.sb-tenant{color:#d98a1f;border-color:rgba(217,138,31,.5);background:rgba(217,138,31,.1)}
.sb-profile{color:#8b5cf6;border-color:rgba(139,92,246,.5);background:rgba(139,92,246,.1)}
html:not(.theme-light) .sb-device{color:#5ad1ff}html:not(.theme-light) .sb-tenant{color:#ffb454}html:not(.theme-light) .sb-profile{color:#b78bff}
.scopelegend{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:9.5px;color:var(--txt3);margin-bottom:12px;line-height:1.9}
.aiq-ctrls{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--txt2);flex-wrap:wrap}
.prefrow .scopebadge{margin-left:2px}
/* Google-Maps style teardrop stop pin (colored by sub-area / area / status) */
.gpin{position:relative;width:14px;height:14px;background:var(--pc);border:1.5px solid rgba(0,0,0,.6);border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 1px 3px rgba(0,0,0,.55)}
.gpin::after{content:'';position:absolute;left:3.5px;top:3.5px;width:5px;height:5px;background:rgba(255,255,255,.9);border-radius:50%}
.gpin-wc{border-color:var(--wc,#e879f9);box-shadow:0 0 0 2px var(--wc,#e879f9),0 1px 3px rgba(0,0,0,.55)}
.wcbtn.on{background:#e879f9;color:#2a0a2e;border-color:transparent}
/* new-route modal: frequency day chips */
.rln-days{display:flex;gap:5px;flex-wrap:wrap}
.rlnday{font:700 10px/1 var(--mono,monospace);color:var(--txt2);background:var(--pane);border:1px solid var(--rule2);border-radius:5px;padding:6px 9px;cursor:pointer}
.rlnday:hover{border-color:var(--a-route);color:var(--txt)}
.rlnday.on{background:var(--a-route);color:var(--ink);border-color:transparent}
/* delivery-area coverage badges on the route selector items (colors match the areas) */
.rlareas{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px}
.rlareabadge{font:700 8px/1.3 var(--mono,monospace);color:#04121a;border-radius:3px;padding:2px 5px;white-space:nowrap;text-shadow:0 1px 1px rgba(255,255,255,.25)}
.rltoolbtn{font:700 10px/1 var(--mono,monospace);letter-spacing:.04em;text-transform:uppercase;color:var(--a-cover);
  background:var(--pane);border:1px solid var(--a-cover);border-radius:6px;padding:8px 13px;cursor:pointer;transition:background .12s,color .12s}
.rltoolbtn:hover{background:var(--hover)}
.rltoolbtn.on{background:var(--a-cover);color:var(--ink);border-color:transparent}
/* Service Routes / Delivery Areas SUB-TABS (clickable tabs, not a toggle) */
.rl-subtabs{gap:6px}
.rlsubtab{font:700 10px/1 var(--mono,monospace);letter-spacing:.04em;text-transform:uppercase;color:var(--txt2);
  background:var(--pane);border:1px solid var(--rule2);border-radius:6px 6px 0 0;padding:8px 16px;cursor:pointer;transition:background .12s,color .12s,border-color .12s}
.rlsubtab:hover{background:var(--hover);color:var(--txt)}
.rlsubtab.on{background:var(--a-route);color:var(--ink);border-color:transparent}
/* master–detail: col3 = full-height route selector, col4 = selected route (stops top + map bottom) */
.rl4b{display:grid;grid-template-columns:184px 1.18fr 232px 1.42fr;gap:9px;height:100%}
.rl-detailcol{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.rl-detailstops{flex:0 1 auto;max-height:50%;min-height:120px;overflow:auto}
.rl-detailcol .rlmap{flex:1;min-height:190px}
.rl-areacol{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.rl-arealist{flex:0 1 auto;min-height:90px;max-height:42%;overflow:auto}
.rl-areaform{flex:1;min-height:0;overflow:auto;border-top:1px solid var(--rule);padding:9px 10px}
.rl-svccol{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.rl-svclist{flex:0 0 auto;max-height:30%;overflow:auto}
.rl-svcstops{flex:1;min-height:0;overflow:auto}
/* selected-route sub-header — a subtle strip (not a heavy colored .ph bar) between the
   route selector list and its stops, so the mid-column break reads smoothly */
.rl-routehd{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;
  padding:7px 10px;background:var(--pane2);border-top:1px solid var(--rule2);border-bottom:1px solid var(--rule)}
.rl-routehd h3{margin:0;font-size:11px;font-weight:700;color:var(--txt);display:flex;align-items:center;gap:6px;letter-spacing:.01em}
.rl-routehd h3 .acc{display:inline-block;width:7px;height:7px;border-radius:2px;background:var(--a-route);flex:none}
.rl-routehd .meta{color:var(--txt2);font-size:9.5px}
.rlcode{font:700 9.5px/1 var(--mono,monospace);color:var(--a-route);letter-spacing:.02em;background:color-mix(in srgb,var(--a-route) 14%,transparent);border:1px solid color-mix(in srgb,var(--a-route) 40%,transparent);border-radius:3px;padding:2px 4px}
.rl-dayschip{font:700 9px/1 var(--mono,monospace);color:var(--txt2);background:var(--pane);border:1px solid var(--rule2);border-radius:4px;padding:3px 6px;white-space:nowrap}
.rl-colordot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.5)}
/* drag selected stops (col 4) onto another route (col 3) to reassign them */
.rltbl tr.rl-selstop{background:color-mix(in srgb,var(--a-route) 20%,transparent)!important;cursor:grab}
.rltpl.rl-droptarget{outline:2px dashed var(--a-route);outline-offset:-2px;background:color-mix(in srgb,var(--a-route) 12%,transparent)}
.rlstopchk{cursor:pointer}
/* routine list — Today's Schedule badges + map legend */
.rl-legend{display:flex;align-items:center;gap:12px;padding:6px 10px;border-bottom:1px solid var(--rule);font-size:9.5px;color:var(--txt2)}
.rl-legend i{display:inline-block;width:14px;height:0;vertical-align:middle;margin-right:5px}
.rl-legend .sw-routine{border-top:2px dashed #9ad0ff}
.rl-legend .sw-today{border-top:3px solid #3be0c4}
.rltbl{table-layout:fixed;width:100%}
.rltbl th,.rltbl td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rltbl th.rl-ckcol,.rltbl td.rl-ckcol{width:26px;overflow:visible;text-align:center;padding:0 2px 0 4px}
.rltbl td.rl-ckcol input{margin:0}
#rlRoster{overflow-x:hidden}
.rltbl tbody tr{cursor:pointer}
.rltbl tr.rl-stophl{background:color-mix(in srgb,#ffd166 22%,transparent)!important;outline:1px solid #ffd166;outline-offset:-1px}
.rltbl tr.rl-in{background:color-mix(in srgb,#3be0c4 8%,transparent)}
.rltbl tr.rl-extra{background:color-mix(in srgb,#ffb454 10%,transparent)}
.rlbadge{font:800 9px/1 var(--mono,monospace);letter-spacing:.03em;border-radius:4px;padding:4px 6px;cursor:pointer;border:1px solid transparent}
.bdg-today{background:#3be0c4;color:#04201a}
.bdg-add{background:transparent;color:var(--txt3);border-color:var(--rule2)}
.bdg-add:hover{color:var(--a-cover);border-color:var(--a-cover)}
.bdg-extra{background:#ffb454;color:#241400}
.rl-liveinline{font-size:9.5px;font-weight:700;color:var(--pos)}
/* Unassigned Stops — bottom bucket (like the dispatch unscheduled bucket): horizontal cards */
.rl-bucket{flex:none;margin-top:1px}
.rl-bucket .strips-h{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;padding:8px 10px;min-height:54px}
.uscard{display:flex;align-items:center;gap:8px;flex:none;min-width:186px;max-width:236px;background:var(--pane2);border:1px solid var(--rule2);border-radius:7px;padding:7px 10px;cursor:pointer}
.uscard:hover{border-color:var(--warn)} .uscard.sel{border-color:var(--warn);outline:1px solid var(--warn);background:var(--sel)}
.usname{font-weight:700;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}
.uspin{width:11px;height:11px;border-radius:50%;background:#fff;border:1.5px solid #0a1622;flex:none}
.us-go{color:var(--warn);font-size:11px;margin-left:auto}
.rl-stopcol.rl-coldrop{outline:2px dashed var(--warn);outline-offset:-3px}
/* route-list filter bar (Today/Week/Month/range/area) + multi-route compare */
.rl-filters{flex:none;padding:6px 8px;border-bottom:1px solid var(--rule);display:flex;flex-direction:column;gap:5px}
.rlf-row{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.rlfchip{font:700 9px/1 var(--mono,monospace);letter-spacing:.03em;text-transform:uppercase;color:var(--txt2);background:var(--pane);border:1px solid var(--rule2);border-radius:5px;padding:5px 8px;cursor:pointer}
.rlfchip:hover{color:var(--txt);border-color:var(--a-route)} .rlfchip.on{background:var(--a-route);color:var(--ink);border-color:transparent}
/* Routes: ops-snapshot KPI header + search / sort */
.rl-kpis{display:flex;gap:5px;flex-wrap:wrap;padding-bottom:5px;margin-bottom:2px;border-bottom:1px dashed var(--rule)}
.rl-kpi{display:flex;flex-direction:column;align-items:center;background:var(--pane);border:1px solid var(--rule);border-radius:5px;padding:3px 8px;font:600 7.5px/1.3 var(--mono,monospace);text-transform:uppercase;letter-spacing:.03em;color:var(--txt3);min-width:44px}
.rl-kpi b{font-size:13px;font-weight:800;color:var(--txt)}
.rl-kpi-warn b{color:var(--neg,#ff6b8a)}
.rlf-searchrow{gap:5px}
.rlf-search{flex:1;min-width:0;background:var(--pane);border:1px solid var(--rule2);border-radius:5px;color:var(--txt);font:inherit;font-size:10px;padding:5px 8px}
.rlf-search:focus{outline:none;border-color:var(--a-route)}
.rlf-sort{background:var(--pane);border:1px solid var(--rule2);border-radius:5px;color:var(--txt);font:inherit;font-size:9.5px;padding:5px 6px;cursor:pointer}
.rlf-rng{display:flex;align-items:center;gap:4px;font-size:9px;color:var(--txt2)}
.rlf-rng input[type=date]{background:var(--pane);border:1px solid var(--rule2);border-radius:4px;color:var(--txt);font-size:9px;padding:3px 4px;color-scheme:dark}
/* delivery-area filter — multi-select dropdown */
.rlf-dd{position:relative;flex:1;min-width:0}
.rlf-ddbtn{font:700 9px/1 var(--mono,monospace);letter-spacing:.03em;text-transform:uppercase;color:var(--txt2);background:var(--pane);border:1px solid var(--rule2);border-radius:5px;padding:6px 9px;cursor:pointer;width:100%;text-align:left}
.rlf-ddbtn:hover{border-color:var(--a-cover);color:var(--txt)}
.rlf-ddmenu{display:none;position:absolute;top:calc(100% + 3px);left:0;right:0;z-index:50;background:var(--pane2);border:1px solid var(--rule2);border-radius:6px;box-shadow:0 8px 22px rgba(0,0,0,.5);max-height:230px;overflow:auto;padding:4px}
.rlf-ddmenu.on{display:block}
.rlf-ddopt{display:flex;align-items:center;gap:7px;padding:5px 7px;font-size:10px;color:var(--txt);cursor:pointer;border-radius:4px}
.rlf-ddopt:hover{background:var(--hover)}
.rlf-ddopt .sw{width:11px;height:11px;border-radius:3px;flex:none}
.rlf-ddclr{display:block;width:100%;text-align:left;font-size:9px;color:var(--neg);background:none;border:none;border-bottom:1px solid var(--rule);padding:5px 7px;cursor:pointer;margin-bottom:3px}
.rlmulti{flex:none;cursor:pointer}
.rltpl.rl-multi{outline:1px solid var(--a-cover);outline-offset:-1px}
.rl-multilist{padding:8px;overflow:auto;height:100%}
.rl-mgroup{margin-bottom:12px}
.rl-mghd{font-size:10px;padding:6px 8px;background:var(--pane2);border-radius:5px;margin-bottom:4px}
/* AI suggestion panel (col-2 when an unserved stop is selected) */
.us-suggest{padding:10px;overflow:auto;height:100%}
.us-sugcard{background:var(--pane2);border:1px solid var(--warn);border-radius:8px;padding:11px}
.us-sughd{font:800 11px/1 var(--mono,monospace);letter-spacing:.04em;text-transform:uppercase;color:var(--warn);margin-bottom:8px}
.us-sugroutes{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.us-sugchip{font-size:9.5px;background:var(--pane);border:1px solid var(--a-route);border-radius:5px;padding:4px 7px}
.us-sugwhy{font-size:11px;line-height:1.5;color:var(--txt);background:var(--pane);border-radius:6px;padding:9px 10px}
.us-sugacts{display:flex;gap:7px;margin-top:10px;flex-wrap:wrap}
.us-manual{margin-top:10px}
.us-manualgrid{display:flex;flex-wrap:wrap;gap:5px}
.us-mbtn{font:700 9px/1 var(--mono,monospace);color:var(--txt2);background:var(--pane);border:1px solid var(--rule2);border-radius:4px;padding:5px 7px;cursor:pointer}
.us-mbtn:hover{border-color:var(--a-route);color:var(--txt)}
.us-bigpin{width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid #0a1622;display:grid;place-items:center;color:#c47d12;font-size:12px;box-shadow:0 0 0 4px rgba(255,255,255,.25)}
/* AI dispatch-suggestion modal (unscheduled card click on the Dispatch board) */
.ai-sug{text-align:left;font-size:11px}
.ai-order{padding:7px 9px;background:var(--pane);border-radius:6px;margin-bottom:8px}
.ai-route{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--pane2);border:1px solid var(--rule2);border-radius:6px;font-size:11px;margin-bottom:9px}
.ai-rcode{font:800 12px/1 var(--mono,monospace)}
.ai-whyhd{font:700 10px/1 var(--mono,monospace);letter-spacing:.03em;text-transform:uppercase;color:var(--a-blot);margin-bottom:5px}
.ai-why ul{margin:0;padding-left:16px;display:flex;flex-direction:column;gap:4px}
.ai-why li{font-size:10.5px;line-height:1.4;color:var(--txt)}
.areawrap{display:grid;grid-template-columns:1fr 320px;gap:10px;height:100%}
.arow{padding:9px 10px;border-bottom:1px solid var(--rule);cursor:pointer;position:relative;display:flex;align-items:center;gap:9px}
.arow:hover{background:var(--hover)}.arow.sel{background:var(--sel)}
.arow .sw{width:13px;height:13px;border-radius:3px;flex:none}
.afield{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.afield label{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt3)}
.afield input,.afield select{background:var(--pane2);border:1px solid var(--rule2);color:var(--txt);border-radius:5px;padding:6px 8px;font:inherit;font-size:11px}

/* ===================== ATC DISPATCH BOARD (flight strips + inspector) ===================== */
.dsplit{display:flex;gap:10px;flex:1;min-height:0}
.dmap-pane{flex:0 0 36%;min-width:300px}
.board-col{flex:1;min-width:0;display:flex;min-height:0;overflow:hidden}
.board-col .dboard{flex:1}
.inspector{flex:0 0 286px;display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:7px;background:var(--pane);overflow:hidden}
.insp-hd{display:flex;align-items:center;justify-content:space-between;padding:8px 11px;background:var(--head);border-bottom:1px solid var(--rule);
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt2);font-weight:700}
.insp-x{background:none;border:none;color:var(--txt3);font-size:13px}.insp-x:hover{color:var(--neg)}
.insp-body{padding:11px;overflow:auto;flex:1;display:flex;flex-direction:column;gap:0}
.insp-empty{align-items:flex-start}
.insp-title{font-size:14px;font-weight:800;margin-bottom:5px}
.insp-tags{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:9px}
.kv{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid var(--rule);font-size:10.5px}
.kv span{color:var(--txt3)}.kv b{color:var(--txt);text-align:right}
.insp-sec{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt3);margin:12px 0 6px;font-weight:700}
.insp-stops,.insp-load{display:flex;flex-direction:column;gap:3px}
.loadrow{display:flex;align-items:center;gap:8px;padding:5px 8px;border:1px solid var(--rule);border-radius:5px;background:var(--pane2);font-size:10px}
.insp-acts{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.insp-acts .irow{display:flex;gap:6px}
.ibtn{flex:1;padding:9px 11px;border-radius:7px;border:1px solid var(--rule);background:var(--pane2);color:var(--txt);font-size:11px;font-weight:700;letter-spacing:.02em;white-space:nowrap;cursor:pointer;box-shadow:0 1px 3px -1px rgba(0,0,0,.4);transition:background .12s,border-color .12s,transform .04s}
.ibtn:hover{border-color:var(--rc,var(--a-blot));background:color-mix(in srgb,var(--rc,var(--a-blot)) 15%,var(--pane2))}
.ibtn:active{transform:translateY(1px)}
.ibtn.primary{background:var(--rc,var(--a-blot));color:var(--ink);border-color:transparent;box-shadow:0 2px 8px -2px rgba(0,0,0,.5)}.ibtn.primary:hover{filter:brightness(1.08);background:var(--rc,var(--a-blot))}
.ipick{display:flex;flex-direction:column;gap:5px;border:1px solid var(--rule);border-radius:6px;padding:8px}
.ipick select{background:var(--pane2);border:1px solid var(--rule2);color:var(--txt);border-radius:5px;padding:6px;font:inherit;font-size:10px}

/* flight strips */
.strips{flex:1;overflow:auto;display:flex;flex-direction:column;gap:6px;padding:7px}
.strip{display:flex;align-items:stretch;gap:0;border:1px solid var(--rule2);border-radius:6px;background:var(--pane2);cursor:grab;overflow:hidden;transition:border-color .12s,transform .06s}
.strip:hover{border-color:var(--a-blot)}
.strip.sel{outline:1.5px solid var(--a-blot);outline-offset:0}
.strip.dragging{opacity:.4;cursor:grabbing}
.strip-flash{width:4px;flex:none;background:var(--rule2)}
.strip.urg .strip-flash{background:var(--neg);animation:bl 1s infinite}
.strip-main{flex:1;min-width:0;padding:9px 11px;display:flex;flex-direction:column;justify-content:center}
.strip-top{display:flex;justify-content:space-between;gap:8px;align-items:center}
.strip-top b{font-size:13px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.strip-qty{flex:none;white-space:nowrap;font-size:10.5px}
.strip-tags{display:flex;flex-wrap:wrap;gap:3px;margin-top:4px}
.strip-tags .dchip,.strip-tags .eqreq-badge{margin-left:0}
.strip.urg .strip-top b{color:var(--neg)}
.strip-sub{font-size:10.5px;margin-top:4px;line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.strip-go{align-self:stretch;border:none;border-left:1px solid var(--rule);background:var(--pane);color:var(--rc,var(--a-blot));font-size:9.5px;font-weight:800;letter-spacing:.03em;padding:0 10px;white-space:nowrap;flex:none}
.strip-go:hover{background:var(--rc,var(--a-blot));color:var(--ink)}

/* drop targets */
.droptarget.dragover{outline:2px dashed var(--rc,var(--a-blot));outline-offset:-3px;background:var(--hover)}
.lane-drop{display:none;text-align:center;font-size:9px;color:var(--rc);padding:7px;border-top:1px dashed var(--rule2);letter-spacing:.05em;font-weight:700}
.lane.dragover .lane-drop{display:block}
.bucket.dragover{background:var(--hover)}
.urgcard{border-left:3px solid var(--neg)}

/* ===================== pin states · urgent flash · slower ticker ===================== */
/* Stop pins: done = route-color tick, next = yellow, pending = route-color number */
.stopmk.done{background:#06121e;border-color:var(--rc);color:var(--rc);font-size:11px}
.stopmk.next{background:#06121e;border-color:var(--rc);color:var(--rc);animation:np 1.3s infinite}
.opt-ai-line{font-size:11px;font-weight:600;padding:5px 9px;border-radius:7px;margin-bottom:8px;display:inline-block}
.opt-ai-line.on{background:rgba(183,139,255,.16);color:#c9b3ff;border:1px solid rgba(183,139,255,.4)}
.opt-ai-line.off{background:rgba(120,130,150,.14);color:#9aa4b8;border:1px solid rgba(120,130,150,.3)}
.opt-ai-line.rev{background:rgba(154,208,255,.14);color:#9ad0ff;border:1px solid rgba(154,208,255,.35);animation:np 1.3s infinite}
/* AI modal: the numbers that talk — diesel $ / time / risk */
.opt-metrics{display:flex;gap:8px;margin:2px 0 6px}
.opt-metric{flex:1;text-align:center;background:rgba(255,255,255,.03);border:1px solid var(--rule2,#1e2a3a);border-radius:9px;padding:9px 6px}
.opt-metric-v{display:block;font-size:21px;font-weight:800;line-height:1.05;font-variant-numeric:tabular-nums}
.opt-metric-v small{font-size:11px;font-weight:600;opacity:.7;margin-left:1px}
.opt-metric-v.pos{color:#41f0ad}.opt-metric-v.tim{color:#9ad0ff}.opt-metric-v.rsk{color:#ffd166}
.opt-metric-k{display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:#8894a8;margin-top:3px}
.opt-metric-sub{font-size:10px;color:#8894a8;margin:0 0 6px}
.opt-metric-sub.rev{color:#9ad0ff}
/* Dispatch: highlight the stop(s) an accepted optimization moved */
.ct-moved{background:color-mix(in srgb,#ffd166 20%,transparent)!important;outline:1px solid #ffd166;outline-offset:-1px;animation:np 1.3s ease-in-out 3}
/* Audit log list: wrap the Detail column, never scroll horizontally */
#feedBody{overflow-x:hidden}
#feedBody table{width:100%;table-layout:fixed}
#feedBody th:nth-child(1),#feedBody td:nth-child(1){width:62px}
#feedBody th:nth-child(2),#feedBody td:nth-child(2){width:82px}
#feedBody th:nth-child(3),#feedBody td:nth-child(3){width:150px}
#feedBody td{white-space:normal;word-break:break-word;overflow-wrap:anywhere;vertical-align:top}
/* Demo mode — self-running guided walkthrough */
.demo-fab{position:fixed;right:18px;bottom:44px;z-index:2400;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.demo-fab-main{background:linear-gradient(135deg,#b78bff,#7f5fff);color:#fff;border:none;border-radius:22px;padding:9px 15px;font-weight:700;font-size:12px;cursor:pointer;box-shadow:0 4px 16px rgba(127,95,255,.4)}
.demo-fab-menu{display:none;flex-direction:column;gap:4px;background:#0b1622;border:1px solid var(--rule2,#1e2a3a);border-radius:10px;padding:6px}
.demo-fab.open .demo-fab-menu{display:flex}
.demo-fab-menu button{background:transparent;border:none;color:#cfe3ff;text-align:right;padding:6px 10px;border-radius:7px;cursor:pointer;font-size:12px;white-space:nowrap}
.demo-fab-menu button:hover{background:rgba(183,139,255,.15)}
.demo-banner{position:fixed;top:74px;left:50%;transform:translateX(-50%);z-index:2500;width:min(560px,92vw);
  background:rgba(10,18,30,.97);border:1px solid rgba(183,139,255,.5);border-radius:14px;padding:16px 18px;
  box-shadow:0 10px 40px rgba(0,0,0,.55);color:#e8f0ff}
.demo-banner.done{border-color:rgba(65,240,173,.5)}
.demo-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.demo-badge{font-size:11px;font-weight:700;color:#c9b3ff}
.demo-prog{font-size:10px;color:#8894a8}
.demo-title{font-size:15px;font-weight:800;margin-bottom:4px}
.demo-body{font-size:12px;line-height:1.5;color:#b8c6da}
.demo-bar{height:3px;background:rgba(255,255,255,.08);border-radius:2px;margin:11px 0 9px;overflow:hidden}
.demo-bar i{display:block;height:100%;background:linear-gradient(90deg,#7f5fff,#b78bff);transition:width .4s}
.demo-acts{display:flex;align-items:center;gap:7px}
.demo-btn{background:rgba(255,255,255,.06);border:1px solid var(--rule2,#26364a);color:#dbe7f7;border-radius:8px;padding:6px 12px;font-size:12px;font-weight:600;cursor:pointer}
.demo-btn:hover{background:rgba(183,139,255,.18)}
.demo-btn.danger{color:#ff9db0}
/* Test Assist — library menu + step log + element highlight */
.ta-menu{position:fixed;right:18px;bottom:92px;z-index:2600;width:min(420px,94vw);background:rgba(10,18,30,.98);border:1px solid rgba(183,139,255,.45);border-radius:14px;box-shadow:0 12px 44px rgba(0,0,0,.6);overflow:hidden}
.ta-menu-hd{display:flex;align-items:center;gap:6px;padding:12px 14px;font-weight:800;font-size:13px;color:#e8f0ff;border-bottom:1px solid var(--rule2,#1e2a3a)}
/* Impersonation banner — a loud, unmissable bar so nobody forgets they are acting as someone else. */
/* Impersonation banner (#97). It used to be position:fixed at top:0, which parked it ON TOP of the
   master menu — the one thing a support person needs while impersonating, and the only way out was
   Exit, which ended the impersonation. It is now part of the layout: the first row of the column, so
   everything below it moves down and nothing is covered. Collapsible too, because on a laptop every
   row of vertical space is someone's stop list. */
#impBanner{position:relative;flex:none;z-index:3000;display:flex;align-items:center;justify-content:center;gap:12px;background:linear-gradient(90deg,#b45309,#d97706);color:#fff;font-size:12.5px;font-weight:700;padding:6px 14px;box-shadow:0 2px 10px rgba(0,0,0,.45)}
#impBanner.mini{padding:0;min-height:6px;gap:0;cursor:pointer}
#impBanner.mini > *:not(#impShow){display:none}
#impBanner #impShow{display:none;background:transparent;border:0;color:#fff;font-size:11px;padding:0 8px;line-height:6px}
#impBanner.mini #impShow{display:block}
#impBanner .impmsg{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#impBanner b{font-weight:800}
#impBanner button{appearance:none;background:rgba(0,0,0,.28);color:#fff;border:1px solid rgba(255,255,255,.55);border-radius:6px;padding:3px 13px;font:inherit;font-size:11px;font-weight:700;cursor:pointer}
#impBanner button:hover{background:rgba(0,0,0,.42)}
.ta-menu-hd .dw-x{margin-left:auto;background:none;border:none;color:#8894a8;cursor:pointer;font-size:14px}
.ta-menu-search{padding:8px 10px 0}
.ta-menu-search input{width:100%;box-sizing:border-box;background:rgba(255,255,255,.05);border:1px solid var(--rule2,#1e2a3a);border-radius:9px;padding:8px 11px;color:#e8f0ff;font-size:12.5px;outline:none}
.ta-menu-search input::placeholder{color:#7f8da3}
.ta-menu-search input:focus{border-color:rgba(183,139,255,.55);background:rgba(183,139,255,.08)}
.ta-search-none{display:block;color:#8894a8;font-size:11px;padding:8px 2px 2px}
.ta-menu-list{display:flex;flex-direction:column;padding:8px;gap:6px;max-height:56vh;overflow:auto}
.ta-case{display:flex;align-items:center;gap:11px;text-align:left;background:rgba(255,255,255,.03);border:1px solid var(--rule2,#1e2a3a);border-radius:10px;padding:10px 12px;cursor:pointer;color:#dbe7f7}
.ta-case:hover{background:rgba(183,139,255,.14);border-color:rgba(183,139,255,.4)}
.ta-case-ic{font-size:18px}
.ta-case-t{display:flex;flex-direction:column;flex:1}
.ta-case-t b{font-size:12.5px}
.ta-case-t small{font-size:10.5px;color:#8894a8;margin-top:1px}
.ta-case-go{color:#b78bff;font-weight:800}
.ta-cat{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#7f8ca3;padding:8px 4px 3px}
.ta-tally{font-size:10px;color:#8fb0d8;margin-top:4px;font-weight:700}
.demo-banner.fail{border-color:rgba(255,107,138,.55)}
/* Inventory qty drill-down button */
.qtybtn{background:none;border:none;color:var(--a-driv,#62d0ff);font:inherit;font-weight:700;cursor:pointer;font-variant-numeric:tabular-nums;padding:1px 3px;border-radius:4px}
.qtybtn:hover{background:color-mix(in srgb,var(--a-driv,#62d0ff) 16%,transparent)}
/* Professional empty state */
.emptystate{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;color:#7f8da2;width:100%}
.emptystate .es-ic{font-size:34px;opacity:.5;line-height:1}
.emptystate .es-t{font-size:13px;font-weight:700;color:#aeb9cc;letter-spacing:.02em}
.emptystate .es-h{font-size:11px;line-height:1.6;color:#7c879b;max-width:420px}
.emptystate.es-lg{min-height:340px;padding:40px 20px}
.emptystate.es-md{min-height:150px;padding:26px 16px}
.emptystate.es-sm{min-height:0;padding:14px 12px}
.emptystate.es-sm .es-ic{font-size:20px}
.emptystate.es-sm .es-t{font-size:11px}
/* Test Results dashboard */
.tr-kpis{display:flex;gap:10px;padding:10px 12px}
.tr-kpi{flex:1;background:rgba(255,255,255,.03);border:1px solid var(--rule2,#1e2a3a);border-radius:10px;padding:10px 12px;position:relative}
.tr-kpi-v{display:block;font-size:20px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}
.tr-kpi-k{display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:#8894a8;margin-top:3px}
.tr-ratebar{height:3px;background:rgba(255,255,255,.08);border-radius:2px;margin-top:6px;overflow:hidden}
.tr-ratebar i{display:block;height:100%;background:#41f0ad}
.tr-search{background:rgba(255,255,255,.05);border:1px solid var(--rule2,#26364a);color:#dbe7f7;border-radius:7px;padding:4px 9px;font-size:11px;min-width:180px}
.tr-badge{font-size:9.5px;font-weight:800;padding:2px 7px;border-radius:8px;border:1px solid;white-space:nowrap}
.tr-row:hover{background:rgba(255,255,255,.03)}
.tr-detail td{background:rgba(0,0,0,.18)}
.tr-steps{display:flex;flex-direction:column;gap:3px;padding:8px 10px}
.tr-step{display:flex;align-items:center;gap:8px;font-size:11px}
.tr-step-ic{font-weight:800;width:12px;text-align:center}
.tr-step-n{flex:1}
.tr-step-note{color:#ffb454;font-size:10px}
.tr-step-ms{width:44px;text-align:right;font-family:var(--mono,monospace);font-size:10px}
.ta-menu-ft{padding:10px 14px;border-top:1px solid var(--rule2,#1e2a3a)}
.ta-logwrap{background:rgba(0,0,0,.25);border-radius:7px;padding:6px 9px;margin:8px 0}
.ta-log{font-size:10px;color:#8fb0d8;line-height:1.5;font-family:var(--mono,monospace)}
.wh-scoped{margin-left:6px;font-size:9px;font-weight:700;letter-spacing:.04em;color:var(--warn,#ffb454);
  border:1px solid color-mix(in srgb,var(--warn,#ffb454) 45%,transparent);border-radius:10px;padding:1px 6px;cursor:help}
.dw-hd .dw-go{margin-left:auto;margin-right:8px;font:inherit;font-size:10px;font-weight:700;letter-spacing:.03em;
  background:none;border:1px solid var(--rule2);color:var(--txt3);border-radius:6px;padding:2px 8px;cursor:pointer}
.dw-hd .dw-go:hover{color:var(--txt);border-color:var(--a-feed)}
.cd-season{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0;padding:8px 11px;border-radius:9px;
  border:1px solid var(--rule2);background:var(--pane2);font-size:11.5px;color:var(--txt2)}
.cd-season.undated{border-color:color-mix(in srgb,var(--warn,#ffb454) 45%,transparent)}
.cd-season.off{color:var(--txt3)}
.cd-season .warn{color:var(--warn,#ffb454)}
.cd-season-ic{font-size:13px}
.cd-season-f{display:flex;align-items:center;gap:5px;font-size:10.5px;color:var(--txt3)}
.cd-season-f input{background:var(--bg2,#0e1826);border:1px solid var(--rule2);border-radius:6px;color:var(--txt);font:inherit;font-size:11px;padding:3px 6px}
.cd-season-go{margin-left:auto;font-size:10.5px;color:var(--a-cover,#3be0c4);cursor:pointer;text-decoration:none}
.cd-season-go:hover{text-decoration:underline}
.ibtn.xs{font-size:10px;padding:3px 9px}

.seas-health{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  border:1px solid var(--rule2);border-left:4px solid var(--pos,#41f0ad);border-radius:10px;padding:11px 14px;margin-bottom:14px;background:var(--pane2)}
.seas-health.warn{border-left-color:var(--warn,#ffb454)}
.seas-health .sh-state b{font-size:13px;display:block}
.seas-health .sh-state span{font-size:11px;color:var(--txt3)}
.seas-health .sh-nums{display:flex;gap:20px;flex-wrap:wrap}
.seas-health .sh-nums div{text-align:right}
.seas-health .sh-nums b{display:block;font-size:16px;font-weight:800}
.seas-health .sh-nums span{font-size:9.5px;color:var(--txt3)}
.seas-health .sh-nums .bad b{color:var(--warn,#ffb454)}
/* Seasonal communications (#8). The switch reads as a sentence rather than a toggle with a label,
   because what it turns on is "software writes to my customers in my name" and that deserves words. */
.seas-top{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-bottom:12px}
.seas-switch{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:12.5px}
.seas-switch input{position:absolute;opacity:0;width:0;height:0}
.seas-switch span{width:38px;height:21px;border-radius:11px;background:var(--rule2);position:relative;transition:background .15s;flex:none}
.seas-switch span::after{content:'';position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:var(--txt3);transition:transform .15s,background .15s}
.seas-switch input:checked+span{background:rgba(65,240,173,.3)}
.seas-switch input:checked+span::after{transform:translateX(17px);background:var(--pos,#41f0ad)}
.seas-switch i{font-style:normal;font-size:10.5px;color:var(--txt3)}
.seas-counts{display:flex;gap:16px;font-size:11px;color:var(--txt3)}
.seas-counts b{color:var(--txt);font-size:13px}
.seas-counts .warn b{color:var(--warn,#ffb454)}
.seas-rules{display:flex;flex-wrap:wrap;gap:18px;padding:10px 12px;border:1px solid var(--rule);border-radius:9px;background:var(--pane2);margin-bottom:14px}
.seas-rules label{font-size:12px;color:var(--txt2);display:flex;align-items:center;gap:6px}
.seas-rules input{width:56px;background:var(--bg2,#0e1826);border:1px solid var(--rule2);border-radius:6px;color:var(--txt);font:inherit;font-size:12px;padding:3px 6px;text-align:center}
.seas-tpls{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:11px}
.seas-tpl{border:1px solid var(--rule);border-radius:9px;background:var(--pane2);padding:10px}
.seas-tpl-h{font-size:11.5px;font-weight:700;margin-bottom:7px}
.seas-tpl input,.seas-tpl textarea{width:100%;background:var(--bg2,#0e1826);border:1px solid var(--rule2);border-radius:7px;
  color:var(--txt);font:inherit;font-size:12px;padding:7px 9px;margin-bottom:7px;resize:vertical;line-height:1.6}
.seas-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:14px 0 4px}
.seas-actions input[type=date]{background:var(--bg2,#0e1826);border:1px solid var(--rule2);border-radius:6px;color:var(--txt);font:inherit;font-size:12px;padding:4px 8px}
.seas-res{border:1px solid var(--rule);border-radius:9px;background:var(--pane2);padding:10px 12px;margin-top:9px}
.seas-res-h{font-size:12px;margin-bottom:7px}
.seas-res-h .warn{color:var(--warn,#ffb454)}
.seas-res-r{display:flex;gap:8px;align-items:baseline;font-size:11.5px;padding:3px 0;flex-wrap:wrap}
.seas-res-r i{font-style:normal;color:var(--txt3);width:12px}
.seas-res-r.queued i{color:var(--pos,#41f0ad)}
.seas-res-r .seas-why{color:var(--warn,#ffb454);font-size:10.5px}
.seas-undated td{opacity:.72}
/* Guided tutorials (#62). The card is a floating panel rather than a modal, because the whole
   point is that the control it describes stays visible and usable underneath it. */
.coach-host{position:fixed;inset:0;z-index:4200;pointer-events:none}
.coach-card{position:fixed;pointer-events:auto;width:min(330px,88vw);background:var(--pane);border:1px solid var(--rule2);
  border-radius:11px;box-shadow:0 18px 48px rgba(0,0,0,.5);padding:13px 14px 11px;transition:left .16s,top .16s}
.coach-card .coach-n{font-size:9.5px;letter-spacing:.14em;color:var(--txt3);text-transform:uppercase}
.coach-card .coach-t{font-size:14px;font-weight:700;color:var(--txt);margin:3px 0 6px}
.coach-card .coach-b{font-size:12px;line-height:1.62;color:var(--txt2)}
.coach-card .coach-b b{color:var(--txt)}
.coach-card .coach-miss{margin-top:8px;font-size:10.5px;color:var(--txt3);border-left:2px solid var(--rule2);padding-left:7px}
.coach-acts{display:flex;gap:7px;align-items:center;margin-top:11px}
.coach-btn{font:inherit;font-size:11.5px;font-weight:600;padding:6px 11px;border-radius:7px;cursor:pointer;
  background:var(--pane2);border:1px solid var(--rule2);color:var(--txt)}
.coach-btn.go{background:var(--a-route,#5ad1ff);border-color:transparent;color:#04121b}
.coach-btn.ghost{background:none;color:var(--txt3)}
.coach-btn:hover{filter:brightness(1.12)}
.coach-hi{outline:3px solid #5ad1ff !important;outline-offset:2px;border-radius:6px;box-shadow:0 0 0 5px rgba(90,209,255,.22);position:relative;z-index:4100}
.coach-nudge{position:fixed;right:18px;bottom:18px;z-index:4150;display:flex;gap:9px;align-items:center;flex-wrap:wrap;
  max-width:min(420px,92vw);background:var(--pane);border:1px solid var(--rule2);border-radius:11px;padding:11px 13px;
  box-shadow:0 14px 40px rgba(0,0,0,.45);font-size:12px;color:var(--txt2)}
.coach-nudge b{color:var(--txt)}
.rl-help{font:inherit;font-size:10.5px;font-weight:600;padding:3px 9px;border-radius:6px;cursor:pointer;margin-left:6px;
  background:none;border:1px solid var(--rule2);color:var(--txt3)}
.rl-help:hover{color:var(--txt);border-color:var(--a-route)}
.ta-hi{outline:3px solid #ffd166 !important;outline-offset:2px;border-radius:6px;box-shadow:0 0 0 4px rgba(255,209,102,.25);transition:outline .15s}
.rl-xstop{opacity:0;border:none;background:transparent;color:var(--neg,#ff6b8a);cursor:pointer;font-size:11px;padding:0 3px;transition:opacity .12s}
tr:hover .rl-xstop{opacity:.65}
.rl-xstop:hover{opacity:1}
.stopmk.todo{background:#06121e;border-color:var(--rc);color:var(--rc)}
.stopchip.done .sn{background:transparent;border-color:var(--rc);color:var(--rc)}
.stopchip.next .sn{border-color:#ffc24d;color:#ffc24d}

/* Urgent unscheduled — make the flash unmissable */
.strip.urg{border-color:var(--neg);box-shadow:0 0 0 1px color-mix(in srgb,var(--neg) 40%,transparent) inset}
.strip.urg .strip-flash{width:5px;background:var(--neg);animation:bl .85s infinite;box-shadow:0 0 9px var(--neg)}
.strip.urg .strip-top b{animation:bl 1.6s infinite}
.qcard.urgcard{animation:bl 2s infinite}
.qcard.urgcard{border-left:3px solid var(--neg)}

/* Slow the live-tape marquee right down */
.tape .marq{animation-duration:220s}

/* ===================== Live-Map right rail: tabs · copilot · detail window ===================== */
.opsTabs{display:flex;gap:1px;background:var(--head);border-bottom:1px solid var(--rule);flex:none;padding:5px 5px 0}
.opsTabs button{flex:1;padding:6px 3px;font-size:9px;font-weight:700;letter-spacing:.02em;background:none;border:none;color:var(--txt3);border-bottom:2px solid transparent;display:flex;align-items:center;justify-content:center;gap:4px;white-space:nowrap}
.opsTabs button.on{color:var(--a-map);border-bottom-color:var(--a-map)}
.opsTabs .otn{background:var(--neg);color:#fff;border-radius:7px;font-size:8px;padding:0 4px;font-weight:800}
#mapOps{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.opslist{overflow:auto;flex:1}
.opscard{padding:8px 10px;border-bottom:1px solid var(--rule);cursor:pointer}
.opscard:hover{background:var(--hover)}
.opscard .qt{display:flex;align-items:center;justify-content:space-between;gap:6px}
.opscard .qm{font-size:9.5px;color:var(--txt3);margin:3px 0 6px}

.copilot{display:flex;flex-direction:column;flex:1;min-height:0}
.cop-msgs{flex:1;overflow:auto;padding:10px;display:flex;flex-direction:column;gap:8px}
.cmsg{display:flex}.cmsg.user{justify-content:flex-end}
.cbub{max-width:88%;padding:8px 10px;border-radius:9px;font-size:11px;line-height:1.45}
.cmsg.ai .cbub{background:var(--pane2);border:1px solid var(--rule);color:var(--txt)}
.cmsg.user .cbub{background:var(--a-map);color:var(--ink);font-weight:600}
.cref{margin-top:5px;padding:4px 7px;border:1px solid var(--rule2);border-radius:5px;cursor:pointer;font-size:10px}
.cref:hover{background:var(--hover);border-color:var(--a-map)}
.cacts{display:flex;gap:5px;margin-top:7px;flex-wrap:wrap}
.cact{font-size:9.5px;padding:4px 8px;border-radius:5px;border:1px solid var(--rule2);background:var(--pane2);color:var(--txt)}
.cact:hover{background:var(--a-map);color:var(--ink);border-color:transparent}
.cop-sugg{display:flex;gap:5px;flex-wrap:wrap;padding:7px 10px;border-top:1px solid var(--rule)}
.cop-sugg .sugg{font-size:9.5px;padding:4px 9px;border-radius:11px;border:1px solid var(--rule2);background:var(--pane2);color:var(--txt2)}
.cop-sugg .sugg:hover{color:var(--ink);background:var(--a-map);border-color:transparent}
.cop-in{display:flex;gap:6px;padding:9px 10px;border-top:1px solid var(--rule)}
.cop-in input{flex:1;background:var(--pane2);border:1px solid var(--rule2);border-radius:7px;padding:7px 10px;color:var(--txt);font:inherit;font-size:11px;outline:none}
.cop-in button{width:34px;border-radius:7px;background:var(--a-map);color:var(--ink);border:none;font-weight:800}

.detailwin{position:fixed;top:46px;right:0;bottom:48px;width:344px;max-width:92vw;background:var(--pane);border-left:1px solid var(--rule2);
  box-shadow:-18px 0 50px -20px #000;transform:translateX(103%);transition:transform .22s cubic-bezier(.2,.8,.25,1);z-index:600;display:flex;flex-direction:column;overflow:hidden}
.detailwin.on{transform:translateX(0)}
.dw-hd{display:flex;align-items:center;justify-content:space-between;padding:11px 13px;background:var(--head);border-bottom:1px solid var(--rule);flex:none}
.dw-kind{font-size:9.5px;letter-spacing:.16em;font-weight:800}
.dw-x{background:none;border:none;color:var(--txt3);font-size:15px;cursor:pointer}.dw-x:hover{color:var(--neg)}
.dw-body{padding:13px;overflow:auto;flex:1}
.dw-title{font-size:16px;font-weight:800;margin-bottom:11px;line-height:1.2}

/* ===================== Settings (themes) · Users (perms) ===================== */
.themegrid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.themecard{display:flex;align-items:center;gap:9px;padding:10px;border:1px solid var(--rule2);border-radius:8px;background:var(--pane2);color:var(--txt);font-size:11px;font-weight:700;letter-spacing:.06em}
.themecard:hover{border-color:var(--a-map)}
.themecard.on{border-color:var(--a-map);box-shadow:0 0 0 1px var(--a-map) inset}
.swatches{display:flex;gap:2px}.swatches i{width:11px;height:18px;border-radius:2px;display:block}
.prefrow{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--rule);font-size:11px}
.prefrow input{width:16px;height:16px;accent-color:var(--a-map)}
.permdot{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:5px;border:1px solid var(--rule2);color:var(--txt3);cursor:pointer;font-weight:800}
.permdot.on{background:var(--pos);border-color:transparent;color:var(--ink)}

/* ===================== Route Lists 3-col · Inventory breakdown ===================== */
.rl3{display:grid;grid-template-columns:288px 1fr 1fr;gap:10px;height:100%}
.rl3 .pbody{overflow:auto}
tr.rl-in td{background:color-mix(in srgb,var(--a-route) 10%,transparent)}
.invsplit{display:flex;height:16px;border-radius:5px;overflow:hidden;gap:1px;background:var(--rule)}
.invseg{min-width:2px}

/* ===================== Dispatch GRID (grouped) + grid mode layout ===================== */
.dsplit.gridmode .dmap-pane{order:2;flex:0 0 42%}
.dsplit.gridmode .board-col{order:1;overflow:auto}
.gridgroup{margin-bottom:12px;border:1px solid var(--rule);border-radius:7px;overflow:hidden}
.gridgrouphd{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;background:var(--head)}
.gridgroup table.blot th{background:var(--pane2)}

/* ===================== Loading — clear horizontal truck bay map ===================== */
.truckdiag{display:flex;align-items:stretch;gap:0;height:150px;border:1px solid var(--rule2);border-radius:8px;background:var(--bg2);overflow:hidden}
.td-end{width:80px;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10px;font-weight:800;letter-spacing:.1em;color:var(--txt2);background:var(--head)}
.td-end small{font-size:8px;font-weight:600;color:var(--txt3);letter-spacing:.04em}
.td-cab{background:linear-gradient(180deg,var(--rule2),var(--head));border-left:2px solid var(--rule2)}
.td-door{border-right:2px solid var(--rule2)}
.td-end .arrowdn{font-size:9px;color:var(--a-load);font-weight:700;margin-top:3px}
.td-bays{flex:1;display:flex;align-items:flex-end;gap:3px;padding:8px}
.tbay2{flex:1;position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;border:1px dashed var(--rule2);border-radius:4px 4px 0 0;overflow:hidden}
.tbay2.full{border-style:solid;border-color:var(--bc)}
.tbay2.now{outline:2px solid #fff;outline-offset:1px}
.tb-fill{width:100%;transition:height .45s cubic-bezier(.2,.8,.25,1);border-radius:3px 3px 0 0}
.tb-lab{position:absolute;top:4px;left:0;right:0;text-align:center;font-size:8.5px;color:var(--txt2);line-height:1.3}
.tb-lab b{display:block;font-size:10px;color:var(--txt)}
.diaglegend{font-size:11px;color:var(--txt2);padding:9px 11px;border:1px solid var(--rule);border-radius:7px;background:var(--pane2)}

/* ===================== autoIQ theme pack (generated, mapped to tower vars) ===================== */
html[data-theme="amber"]{--bg:#05080a;--bg2:#080c10;--pane:#0a0f13;--pane2:#0c1217;--rule:#16202a;--rule2:#1d2a36;--txt:#c7d4cf;--txt2:#94a89f;--txt3:#6c7d75;--ink:#000;--hover:#0d161c;--sel:#13202a;--amber:#ffb000;--green:#21d07a;--red:#ff4d4d;--cyan:#34c7d4;--pos:#21d07a;--neg:#ff4d4d;--warn:#ffb000;--gold:#ffb000;--shadow:rgba(0,0,0,.8);--head:#0a1014;--thumb:#1b2730;--thumb2:#27353f;--a-over:#7da6ff;--a-map:#34c7d4;--a-blot:#21d07a;--a-route:#ffb000;--a-fleet:#9aa7ff;--a-driv:#e0a64b;--a-assign:#b78bff;--a-load:#ff7a59;--a-cover:#8aa0ad;--a-feed:#ffb000}
html[data-theme="phosphor"]{--bg:#020503;--bg2:#040906;--pane:#061009;--pane2:#08150d;--rule:#103a22;--rule2:#1a5436;--txt:#9ff7b8;--txt2:#6cc890;--txt3:#479866;--ink:#021006;--hover:#0c2316;--sel:#103420;--amber:#7dff9e;--green:#39ff88;--red:#ff6a5a;--cyan:#6affc8;--pos:#39ff88;--neg:#ff6a5a;--warn:#c8ff7d;--gold:#aaff7d;--shadow:rgba(0,0,0,.85);--head:#08150d;--thumb:#16573a;--thumb2:#1f7a52;--a-over:#6affc8;--a-map:#6affc8;--a-blot:#39ff88;--a-route:#aaff7d;--a-fleet:#8effd0;--a-driv:#d8ff7d;--a-assign:#9affb0;--a-load:#ffb86a;--a-cover:#7ec79a;--a-feed:#aaff7d}
html[data-theme="ice"]{--bg:#03070c;--bg2:#050b12;--pane:#071019;--pane2:#0a1622;--rule:#16313f;--rule2:#1f4356;--txt:#cfe6f5;--txt2:#97b8cd;--txt3:#6a8898;--ink:#021018;--hover:#0d1f2c;--sel:#123043;--amber:#62d0ff;--green:#3be0c4;--red:#ff6b8a;--cyan:#5ad1ff;--pos:#3be0c4;--neg:#ff6b8a;--warn:#62d0ff;--gold:#7fd8ff;--shadow:rgba(0,0,0,.82);--head:#0a1622;--thumb:#1c3a4a;--thumb2:#27506a;--a-over:#62a6ff;--a-map:#5ad1ff;--a-blot:#3be0c4;--a-route:#62d0ff;--a-fleet:#9ad0ff;--a-driv:#7fd0d8;--a-assign:#9aa6ff;--a-load:#ff9a6a;--a-cover:#9fb8c8;--a-feed:#62d0ff}
html[data-theme="bloomberg"]{--bg:#070503;--bg2:#0c0906;--pane:#120d08;--pane2:#18110a;--rule:#2a1c0c;--rule2:#3a2810;--txt:#f0d9b8;--txt2:#c8a370;--txt3:#8e7048;--ink:#000;--hover:#1c1206;--sel:#2a1c0a;--amber:#ff9b1e;--green:#46d07a;--red:#ff5340;--cyan:#f0a83c;--pos:#46d07a;--neg:#ff5340;--warn:#ffb01e;--gold:#ff9b1e;--shadow:rgba(0,0,0,.9);--head:#18110a;--thumb:#2a1c0c;--thumb2:#4a3216;--a-over:#f0a83c;--a-map:#ffcf7d;--a-blot:#46d07a;--a-route:#ff9b1e;--a-fleet:#e0b85a;--a-driv:#ffb01e;--a-assign:#ff8c5a;--a-load:#ff5340;--a-cover:#c8a878;--a-feed:#ff9b1e}
html[data-theme="matrix"]{--bg:#040804;--bg2:#071107;--pane:#0a160a;--pane2:#0d1c0d;--rule:#0d3a0d;--rule2:#155415;--txt:#b8ffb8;--txt2:#76d876;--txt3:#48a648;--ink:#001000;--hover:#0a230a;--sel:#0f340f;--amber:#9dff5a;--green:#33ff66;--red:#ff5a5a;--cyan:#5affa0;--pos:#33ff66;--neg:#ff5a5a;--warn:#c8ff33;--gold:#9dff5a;--shadow:rgba(0,0,0,.88);--head:#0d1c0d;--thumb:#155415;--thumb2:#1f7a1f;--a-over:#5affa0;--a-map:#5affa0;--a-blot:#33ff66;--a-route:#9dff5a;--a-fleet:#7dffb0;--a-driv:#d8ff33;--a-assign:#aaff7d;--a-load:#ffb05a;--a-cover:#8ac88a;--a-feed:#9dff5a}
html[data-theme="midnight"]{--bg:#070912;--bg2:#0a0d1a;--pane:#0e1224;--pane2:#12172e;--rule:#222a4a;--rule2:#2f3a60;--txt:#d2d8f5;--txt2:#a2abda;--txt3:#717bac;--ink:#05071a;--hover:#171d38;--sel:#1e2748;--amber:#9aa6ff;--green:#5ae0a8;--red:#ff6b8a;--cyan:#6ad0ff;--pos:#5ae0a8;--neg:#ff6b8a;--warn:#ffd06a;--gold:#ffd06a;--shadow:rgba(0,0,0,.82);--head:#12172e;--thumb:#2a3258;--thumb2:#3a4578;--a-over:#7da6ff;--a-map:#6ad0ff;--a-blot:#5ae0a8;--a-route:#ffd06a;--a-fleet:#b0b8ff;--a-driv:#e0a6ff;--a-assign:#c08bff;--a-load:#ff8c9a;--a-cover:#a8b0d8;--a-feed:#ffd06a}
html[data-theme="crimson"]{--bg:#0a0304;--bg2:#100508;--pane:#16080c;--pane2:#1c0a10;--rule:#3a1620;--rule2:#54202e;--txt:#f5d2d8;--txt2:#d2a2ac;--txt3:#a06872;--ink:#100204;--hover:#230c12;--sel:#34101a;--amber:#ff8c6a;--green:#5ad08a;--red:#ff4060;--cyan:#ff9aae;--pos:#5ad08a;--neg:#ff4060;--warn:#ffb05a;--gold:#ffb05a;--shadow:rgba(0,0,0,.85);--head:#1c0a10;--thumb:#54202e;--thumb2:#7a2f42;--a-over:#ff8ca0;--a-map:#ff9aae;--a-blot:#5ad08a;--a-route:#ff8c6a;--a-fleet:#ffb0c0;--a-driv:#ffb05a;--a-assign:#e08bff;--a-load:#ff4060;--a-cover:#d8a0a8;--a-feed:#ff8c6a}
html[data-theme="solarized"]{--bg:#002b36;--bg2:#02303b;--pane:#073642;--pane2:#083e4b;--rule:#0d4f5e;--rule2:#1a6577;--txt:#a7b3b3;--txt2:#7e9298;--txt3:#647c82;--ink:#002b36;--hover:#0a4250;--sel:#0e4e5e;--amber:#b58900;--green:#859900;--red:#dc322f;--cyan:#2aa198;--pos:#859900;--neg:#dc322f;--warn:#cb4b16;--gold:#b58900;--shadow:rgba(0,0,0,.6);--head:#073642;--thumb:#0d4f5e;--thumb2:#1a6577;--a-over:#268bd2;--a-map:#2aa198;--a-blot:#859900;--a-route:#b58900;--a-fleet:#6c71c4;--a-driv:#b58900;--a-assign:#d33682;--a-load:#cb4b16;--a-cover:#93a1a1;--a-feed:#b58900}
html[data-theme="nord"]{--bg:#242933;--bg2:#2e3440;--pane:#323a48;--pane2:#3b4252;--rule:#434c5e;--rule2:#4c566a;--txt:#eceff4;--txt2:#bcc4d2;--txt3:#8590a2;--ink:#2e3440;--hover:#3b4252;--sel:#434c5e;--amber:#ebcb8b;--green:#a3be8c;--red:#bf616a;--cyan:#88c0d0;--pos:#a3be8c;--neg:#bf616a;--warn:#d08770;--gold:#ebcb8b;--shadow:rgba(0,0,0,.55);--head:#3b4252;--thumb:#434c5e;--thumb2:#4c566a;--a-over:#81a1c1;--a-map:#88c0d0;--a-blot:#a3be8c;--a-route:#ebcb8b;--a-fleet:#b48ead;--a-driv:#ebcb8b;--a-assign:#b48ead;--a-load:#d08770;--a-cover:#d8dee9;--a-feed:#ebcb8b}
html[data-theme="paper"]{--bg:#e7e2d6;--bg2:#efe9dc;--pane:#f4efe4;--pane2:#fbf7ee;--rule:#cfc7b4;--rule2:#b8ae97;--txt:#2b2a26;--txt2:#545044;--txt3:#736d5d;--ink:#fbf7ee;--hover:#e0dac9;--sel:#d8e0d0;--amber:#a8690a;--green:#2e7d4f;--red:#c0392b;--cyan:#1f7a8c;--pos:#2e7d4f;--neg:#c0392b;--warn:#b5760a;--gold:#a8690a;--shadow:rgba(60,52,36,.28);--head:#e3ddcd;--thumb:#c2b9a4;--thumb2:#a89e86;--a-over:#2f5fb0;--a-map:#1f7a8c;--a-blot:#2e7d4f;--a-route:#a8690a;--a-fleet:#5a5fb0;--a-driv:#9a6a14;--a-assign:#8a4fb0;--a-load:#c0563b;--a-cover:#5a6068;--a-feed:#a8690a}
html[data-theme="cream"]{--bg:#efe7d6;--bg2:#f4ede0;--pane:#f9f3e9;--pane2:#fdf9f1;--rule:#d8ccb4;--rule2:#c2b496;--txt:#3a3328;--txt2:#605646;--txt3:#7d725d;--ink:#fdf9f1;--hover:#e8dfcb;--sel:#e0e3cf;--amber:#a06a14;--green:#3a7d52;--red:#bc4032;--cyan:#1f7a86;--pos:#3a7d52;--neg:#bc4032;--warn:#aa7314;--gold:#a87f1a;--shadow:rgba(70,58,36,.26);--head:#ece3d0;--thumb:#cabda4;--thumb2:#b0a286;--a-over:#33619e;--a-map:#1f7a86;--a-blot:#3a7d52;--a-route:#a06a14;--a-fleet:#5f63ad;--a-driv:#996814;--a-assign:#8a52a8;--a-load:#bc5a3b;--a-cover:#5e6068;--a-feed:#a06a14}
html[data-theme="coolgray"]{--bg:#e4e7ea;--bg2:#eaedf0;--pane:#f0f2f5;--pane2:#f7f8fa;--rule:#cbd1d8;--rule2:#aeb6c0;--txt:#28303a;--txt2:#4c5764;--txt3:#6f7a8a;--ink:#f7f8fa;--hover:#dde2e8;--sel:#d6e0ea;--amber:#9a6a1a;--green:#2f7d54;--red:#bc3b3b;--cyan:#1f7689;--pos:#2f7d54;--neg:#bc3b3b;--warn:#a07418;--gold:#9a7320;--shadow:rgba(40,48,58,.22);--head:#dde1e6;--thumb:#c0c8d0;--thumb2:#a4adb8;--a-over:#2f5fb0;--a-map:#1f7689;--a-blot:#2f7d54;--a-route:#9a6a1a;--a-fleet:#5860ad;--a-driv:#946618;--a-assign:#8550a8;--a-load:#bc553b;--a-cover:#5a6068;--a-feed:#9a6a1a}
html[data-theme="solight"]{--bg:#eee8d5;--bg2:#f2ecda;--pane:#f7f1e0;--pane2:#fdf6e3;--rule:#d8d0b4;--rule2:#bfb898;--txt:#3a4b50;--txt2:#5a7077;--txt3:#7a8888;--ink:#fdf6e3;--hover:#e6dfc6;--sel:#dfe2cb;--amber:#b58900;--green:#6f8400;--red:#dc322f;--cyan:#2aa198;--pos:#6f8400;--neg:#dc322f;--warn:#cb4b16;--gold:#b58900;--shadow:rgba(60,60,40,.2);--head:#e8e1cb;--thumb:#cfc8ac;--thumb2:#b6ae90;--a-over:#268bd2;--a-map:#2aa198;--a-blot:#6f8400;--a-route:#b58900;--a-fleet:#6c71c4;--a-driv:#b58900;--a-assign:#d33682;--a-load:#cb4b16;--a-cover:#5e6c6c;--a-feed:#b58900}
html[data-theme="sage"]{--bg:#dfe5dc;--bg2:#e6ebe2;--pane:#edf1e9;--pane2:#f4f7f1;--rule:#c6d0c0;--rule2:#a9b6a2;--txt:#2b332a;--txt2:#4c564a;--txt3:#6f7a6b;--ink:#f4f7f1;--hover:#d8e0d2;--sel:#d2e0d0;--amber:#977218;--green:#3a7d4f;--red:#bc4338;--cyan:#1f7a7e;--pos:#3a7d4f;--neg:#bc4338;--warn:#9c7618;--gold:#9a7720;--shadow:rgba(40,52,40,.22);--head:#d8e0d4;--thumb:#bcc8b6;--thumb2:#a2ae9a;--a-over:#2f64a8;--a-map:#1f7a7e;--a-blot:#3a7d4f;--a-route:#977218;--a-fleet:#5a64a8;--a-driv:#92681a;--a-assign:#8252a4;--a-load:#bc553b;--a-cover:#5a6460;--a-feed:#977218}
html[data-theme="graphite"]{--bg:#1a1c1f;--bg2:#1f2226;--pane:#24282d;--pane2:#2a2f35;--rule:#34393f;--rule2:#434a52;--txt:#d2d6db;--txt2:#a8aeb6;--txt3:#838a93;--ink:#16181b;--hover:#2c3036;--sel:#323841;--amber:#e0b15c;--green:#6cc28e;--red:#e0726a;--cyan:#67b8c8;--pos:#6cc28e;--neg:#e0726a;--warn:#e0b15c;--gold:#e0b15c;--shadow:rgba(0,0,0,.6);--head:#23272c;--thumb:#3a4047;--thumb2:#4a525b;--a-over:#7fa6e0;--a-map:#67b8c8;--a-blot:#6cc28e;--a-route:#e0b15c;--a-fleet:#9aa6e0;--a-driv:#d8b06a;--a-assign:#b48edd;--a-load:#e0876a;--a-cover:#aab2bc;--a-feed:#e0b15c}
html[data-theme="charcoal"]{--bg:#121417;--bg2:#16191d;--pane:#1b1f24;--pane2:#21262c;--rule:#2b3036;--rule2:#3a414a;--txt:#c8cdd4;--txt2:#a0a8b2;--txt3:#7a828d;--ink:#101216;--hover:#22272e;--sel:#28303a;--amber:#d8a850;--green:#5ebd86;--red:#dd6b64;--cyan:#5cb2c4;--pos:#5ebd86;--neg:#dd6b64;--warn:#d8a850;--gold:#d8a850;--shadow:rgba(0,0,0,.7);--head:#1a1e23;--thumb:#30373f;--thumb2:#414a54;--a-over:#76a0e0;--a-map:#5cb2c4;--a-blot:#5ebd86;--a-route:#d8a850;--a-fleet:#92a0e0;--a-driv:#d0a860;--a-assign:#ae88da;--a-load:#dd826a;--a-cover:#a2acb8;--a-feed:#d8a850}
html[data-theme="navy"]{--bg:#0e1622;--bg2:#121b2a;--pane:#172132;--pane2:#1c283c;--rule:#283750;--rule2:#374a68;--txt:#cdd6e4;--txt2:#a4b2c8;--txt3:#7c8aa4;--ink:#0c121c;--hover:#1e2a3e;--sel:#243450;--amber:#e0b96a;--green:#5ec795;--red:#e0707e;--cyan:#5fb6d0;--pos:#5ec795;--neg:#e0707e;--warn:#e0b96a;--gold:#e0b96a;--shadow:rgba(0,0,0,.66);--head:#172132;--thumb:#2c3c58;--thumb2:#3c4f70;--a-over:#74a4e8;--a-map:#5fb6d0;--a-blot:#5ec795;--a-route:#e0b96a;--a-fleet:#94a4e8;--a-driv:#d8b066;--a-assign:#b28ee0;--a-load:#e0876e;--a-cover:#a4b2c4;--a-feed:#e0b96a}
html[data-theme="dim"]{--bg:#1c1a18;--bg2:#211f1c;--pane:#272421;--pane2:#2d2a26;--rule:#383430;--rule2:#48433d;--txt:#d6d0c8;--txt2:#aea89e;--txt3:#8a847a;--ink:#181614;--hover:#2e2b27;--sel:#363229;--amber:#dcae5e;--green:#74bc8c;--red:#dd7a6e;--cyan:#6cb6b0;--pos:#74bc8c;--neg:#dd7a6e;--warn:#dcae5e;--gold:#dcae5e;--shadow:rgba(0,0,0,.62);--head:#262320;--thumb:#3c382f;--thumb2:#4d473c;--a-over:#86a4d8;--a-map:#6cb6b0;--a-blot:#74bc8c;--a-route:#dcae5e;--a-fleet:#a0a4d8;--a-driv:#d4a85e;--a-assign:#b48ed4;--a-load:#dd886e;--a-cover:#aaa89e;--a-feed:#dcae5e}
html[data-theme="slate"]{--bg:#15191e;--bg2:#191e24;--pane:#1e242b;--pane2:#242b33;--rule:#2c333c;--rule2:#3a434e;--txt:#cdd4dd;--txt2:#a6b2bf;--txt3:#828d9a;--ink:#131217;--hover:#262e37;--sel:#2c3742;--amber:#d6b277;--green:#7cc09a;--red:#d67e7e;--cyan:#7bb6c4;--pos:#7cc09a;--neg:#d67e7e;--warn:#d6b277;--gold:#d6b277;--shadow:rgba(0,0,0,.6);--head:#1d2229;--thumb:#323a44;--thumb2:#414b57;--a-over:#82a4cf;--a-map:#7bb6c4;--a-blot:#7cc09a;--a-route:#d6b277;--a-fleet:#9aa6cf;--a-driv:#cda968;--a-assign:#a994ce;--a-load:#d6957c;--a-cover:#a6b0bc;--a-feed:#d6b277}
html[data-theme="nordic"]{--bg:#222730;--bg2:#272d38;--pane:#2c333f;--pane2:#333b48;--rule:#3b4452;--rule2:#49546a;--txt:#dde3ee;--txt2:#b6bfd0;--txt3:#8893a4;--ink:#222730;--hover:#333b48;--sel:#3b4555;--amber:#ead2a0;--green:#a3be8c;--red:#cf7f87;--cyan:#88c0d0;--pos:#a3be8c;--neg:#cf7f87;--warn:#d8a07a;--gold:#ead2a0;--shadow:rgba(0,0,0,.5);--head:#2e3542;--thumb:#414b5a;--thumb2:#4f5a6c;--a-over:#8aa6cc;--a-map:#88c0d0;--a-blot:#a3be8c;--a-route:#ead2a0;--a-fleet:#b099c4;--a-driv:#e0c088;--a-assign:#b48ead;--a-load:#d49078;--a-cover:#d2dae6;--a-feed:#ead2a0}
html[data-theme="tokyonight"]{--bg:#1a1b26;--bg2:#1e2030;--pane:#232539;--pane2:#292b42;--rule:#2f334d;--rule2:#3b3f5c;--txt:#c0caf5;--txt2:#a2abd4;--txt3:#787ea0;--ink:#16161e;--hover:#2a2e45;--sel:#323852;--amber:#e0af68;--green:#9ece6a;--red:#e07a8a;--cyan:#7dcfff;--pos:#9ece6a;--neg:#e07a8a;--warn:#e0af68;--gold:#e0af68;--shadow:rgba(0,0,0,.65);--head:#24283b;--thumb:#363b56;--thumb2:#444a6a;--a-over:#7aa2f7;--a-map:#7dcfff;--a-blot:#9ece6a;--a-route:#e0af68;--a-fleet:#9aa5e6;--a-driv:#e0c07a;--a-assign:#bb9af7;--a-load:#e09a78;--a-cover:#a9b1d6;--a-feed:#e0af68}
html[data-theme="catppuccin"]{--bg:#1e2030;--bg2:#24273a;--pane:#2a2d44;--pane2:#303446;--rule:#363a54;--rule2:#444963;--txt:#cad3f5;--txt2:#b0b8da;--txt3:#868cae;--ink:#1a1b26;--hover:#2f3349;--sel:#383d57;--amber:#eed49f;--green:#a6da95;--red:#ed8796;--cyan:#8bd5ca;--pos:#a6da95;--neg:#ed8796;--warn:#f5a97f;--gold:#eed49f;--shadow:rgba(0,0,0,.58);--head:#2b2e42;--thumb:#3c4160;--thumb2:#4b5172;--a-over:#8aadf4;--a-map:#8bd5ca;--a-blot:#a6da95;--a-route:#eed49f;--a-fleet:#b7bdf8;--a-driv:#eed49f;--a-assign:#c6a0f6;--a-load:#f0a080;--a-cover:#b8c0e0;--a-feed:#eed49f}
html[data-theme="rosepine"]{--bg:#1f1d2c;--bg2:#232136;--pane:#2a273f;--pane2:#302d4a;--rule:#393552;--rule2:#474364;--txt:#e0def4;--txt2:#b6b0d6;--txt3:#8a86a8;--ink:#191724;--hover:#2f2b47;--sel:#393552;--amber:#f6c177;--green:#9ccfd8;--red:#eb6f92;--cyan:#9ccfd8;--pos:#9ccfd8;--neg:#eb6f92;--warn:#f6c177;--gold:#f6c177;--shadow:rgba(0,0,0,.6);--head:#2b283e;--thumb:#3e3a5a;--thumb2:#4d4870;--a-over:#88a6d8;--a-map:#9ccfd8;--a-blot:#9ccfd8;--a-route:#f6c177;--a-fleet:#c4a7e7;--a-driv:#f0bd86;--a-assign:#c4a7e7;--a-load:#ea9a8f;--a-cover:#bcb6d6;--a-feed:#f6c177}
html[data-theme="pine"]{--bg:#10191a;--bg2:#141f20;--pane:#192728;--pane2:#1e2f30;--rule:#27393a;--rule2:#354c4e;--txt:#cbdbd8;--txt2:#a2b8b5;--txt3:#7c908e;--ink:#0e1717;--hover:#213334;--sel:#27403f;--amber:#d8b87a;--green:#73c39a;--red:#d97f82;--cyan:#6cbcc0;--pos:#73c39a;--neg:#d97f82;--warn:#d8b87a;--gold:#d8b87a;--shadow:rgba(0,0,0,.62);--head:#1a2929;--thumb:#2e4344;--thumb2:#3c5556;--a-over:#7fa6c8;--a-map:#6cbcc0;--a-blot:#73c39a;--a-route:#d8b87a;--a-fleet:#94aacb;--a-driv:#d0b070;--a-assign:#a695c8;--a-load:#d8957c;--a-cover:#9eb4b2;--a-feed:#d8b87a}
html[data-theme="gruvbox"]{--bg:#282420;--bg2:#2e2a24;--pane:#352f28;--pane2:#3c352c;--rule:#453d34;--rule2:#564c40;--txt:#e3d6bf;--txt2:#bfb49e;--txt3:#948975;--ink:#1d1a16;--hover:#3d362d;--sel:#473f34;--amber:#d8a657;--green:#a9b665;--red:#e08a82;--cyan:#89b8a0;--pos:#a9b665;--neg:#e08a82;--warn:#e0a063;--gold:#d8a657;--shadow:rgba(0,0,0,.58);--head:#36302a;--thumb:#473f34;--thumb2:#564c40;--a-over:#7daea0;--a-map:#89b8a0;--a-blot:#a9b665;--a-route:#d8a657;--a-fleet:#a0a6c4;--a-driv:#e0b878;--a-assign:#c19acc;--a-load:#e08763;--a-cover:#bcb0a0;--a-feed:#d8a657}
html[data-theme="seaglass"]{--bg:#dde7e6;--bg2:#e4edec;--pane:#ecf3f2;--pane2:#f4f9f8;--rule:#c2d2d0;--rule2:#a4b8b6;--txt:#26343a;--txt2:#46565e;--txt3:#6c7f83;--ink:#f4f9f8;--hover:#d6e3e1;--sel:#cfe1de;--amber:#977a18;--green:#2f7d62;--red:#bc4848;--cyan:#1f7a86;--pos:#2f7d62;--neg:#bc4848;--warn:#9c7418;--gold:#977720;--shadow:rgba(36,52,56,.2);--head:#d6e2e1;--thumb:#bccecb;--thumb2:#a0b4b1;--a-over:#2f63a4;--a-map:#1f7a86;--a-blot:#2f7d62;--a-route:#977a18;--a-fleet:#5560a4;--a-driv:#8e6a18;--a-assign:#7a52a0;--a-load:#bc593b;--a-cover:#566066;--a-feed:#977a18}
html[data-theme="mist"]{--bg:#e0e4ea;--bg2:#e7ebf0;--pane:#eef1f6;--pane2:#f6f8fb;--rule:#c6cdda;--rule2:#a8b2c2;--txt:#28303c;--txt2:#485364;--txt3:#6c788c;--ink:#f6f8fb;--hover:#d8dfe9;--sel:#d2dcee;--amber:#8e6e22;--green:#2f7556;--red:#bc4452;--cyan:#1f6e8c;--pos:#2f7556;--neg:#bc4452;--warn:#946c1c;--gold:#8e7022;--shadow:rgba(36,42,56,.2);--head:#d8dde6;--thumb:#bcc4d2;--thumb2:#a0aabc;--a-over:#2f5fae;--a-map:#1f6e8c;--a-blot:#2f7556;--a-route:#8e6e22;--a-fleet:#525ea8;--a-driv:#8a6620;--a-assign:#7850a4;--a-load:#bc553f;--a-cover:#545e6c;--a-feed:#8e6e22}
html[data-theme="fog"]{--bg:#e6e8ec;--bg2:#eceef1;--pane:#f2f4f7;--pane2:#f9fafc;--rule:#ccd1d9;--rule2:#aeb5c0;--txt:#2a313a;--txt2:#4a545d;--txt3:#6f7884;--ink:#f9fafc;--hover:#dde1e8;--sel:#d6dde8;--amber:#8e7028;--green:#347a5a;--red:#b94a4a;--cyan:#216f84;--pos:#347a5a;--neg:#b94a4a;--warn:#947024;--gold:#8e7228;--shadow:rgba(40,46,56,.18);--head:#dee1e6;--thumb:#c2c8d0;--thumb2:#a6aeba;--a-over:#34619e;--a-map:#216f84;--a-blot:#347a5a;--a-route:#8e7028;--a-fleet:#5560a0;--a-driv:#8a6824;--a-assign:#7a54a0;--a-load:#ba573f;--a-cover:#586068;--a-feed:#8e7028}

/* ===== Per-VERTICAL accent identity (set on <html data-vertical> by deployment.js) =====
   Ice keeps the cyan primary accent. Water reads as a royal blue instead, so the brand mark, boot
   splash, active tab and the primary buttons all carry the water identity. Placed AFTER the whole
   28-theme registry above: html[data-vertical="water"] and html[data-theme="…"] have EQUAL
   specificity (type+attr), so the later one wins — meaning water's blue survives whatever theme a
   water tenant picks, while every other token (bg/text) still comes from their chosen theme. Kept
   light enough that the dark --ink button text stays legible on it. */
html[data-vertical="water"]{
  /* primary accent → royal blue (brand, tabs, buttons, most metric numbers) */
  --cyan:#3d7dff; --a-map:#3d7dff; --a-fleet:#3d7dff;
  /* the REST of the ice cyan family, shifted into the blue family so nothing on the platform reads
     cyan — --amber/--warn/--a-driv/--gold are all a cyan (#62d0ff/#7fd0d8/#7fd8ff) in the ice palette.
     Greens (--pos/--a-blot/--green #3be0c4) and red/orange/purple are deliberately LEFT ALONE so
     positive/negative metric colouring and the categorical accents still work. */
  --amber:#4f8dff; --warn:#4f8dff; --a-driv:#5b93ff; --gold:#6aa6ff;
  /* --a-blot is the teal-green SECONDARY accent (#3be0c4) — decorative only (backlog headers, order
     links, chips, the Today/MTD/QTD period pill), never the semantic positive colour (that's --pos).
     It reads as cyan, so it goes blue on water too. */
  --a-blot:#4f8dff;
  /* The ice "positive/good" green (#3be0c4) and mint (#41f0ad) are cyan-LEANING teals that read as
     cyan. Owner's call: wipe that colour to BLUE across the app — so positive goes blue too (fuel
     gauge, deposit stripes, aging, positive deltas, ✓ badges). Red (--neg) is unchanged for negatives. */
  --pos:#4f8dff; --green:#4f8dff;
}
/* A few spots hardcode cyan directly (not via a token), so the token override above can't reach
   them — restate them in blue for water. The scheduled badge matters most: water's route model IS
   scheduled, so .t-sched is everywhere. */
html[data-vertical="water"] .t-sched{ color:#8fb3ff;
  border-color:color-mix(in srgb,#4f8dff 45%,transparent);
  background:color-mix(in srgb,#4f8dff 13%,transparent); }
html[data-vertical="water"] .sb-device{ color:#4f8dff; }
/* The Cash In hero number is coloured --pos (the teal-green #3be0c4) which reads as cyan — but it is
   a metric VALUE, not an up/down delta, so on water it takes the card's blue accent instead. The real
   pos/neg delta arrows keep --pos/--neg. */
html[data-vertical="water"] .ovh-rev .ovh-v{ color:var(--a-blot); }
/* Money In "top payers" bars are a green→cyan gradient; the cyan end reads cyanish → blue on water. */
html[data-vertical="water"] .paybar-track i{ background:linear-gradient(90deg,#3d7dff,#7fb0ff); }

/* Light themes: near-BLACK text everywhere (owner: the grey text reads washed-out). One rule for all light
   themes — dark themes never get .theme-light so they're untouched. Primary is near-black; secondary/tertiary
   are dark greys that still clearly read on a light background. */
html.theme-light{--txt:#111419;--txt2:#353c46;--txt3:#525a66}

/* ---- variety fix: most themes mapped BOTH --a-route and --a-feed to the same gold accent, so Orders /
   Route Lists / Billing / Customers headers all read yellow. Re-alias them (per theme) to that theme's
   purple & blue so heading fills span cyan·blue·green·purple·orange. --a-driv stays gold for some yellow. ---- */
html[data-theme]{--a-route:var(--a-assign);--a-feed:var(--a-over)}

/* ===================== Dispatch GRID: routes | stops | map ===================== */
.gridwrap{display:grid;grid-template-columns:232px 1fr;gap:10px;height:100%}
.gridwrap .pbody{overflow:auto}
.grow{padding:8px 10px;border-bottom:1px solid var(--rule);cursor:pointer;border-left:3px solid transparent}
/* load/unload route rows — route color as a left strip + dot, near-black readable text */
.rgrow-top{display:flex;align-items:center;gap:6px}
.rgrow-dot{width:8px;height:8px;border-radius:2px;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.rgrow-id{font-size:12px;font-weight:800;color:var(--txt)}
.rgrow-sub{font-size:10.5px;color:var(--txt2);margin-top:3px;line-height:1.3}
.rgrow.sel{background:var(--sel)}
.grow:hover{background:var(--hover)}
.grow.sel{background:var(--sel);border-left-color:var(--rc)}

/* ===================== Control Tower BOARD — scales to 10+ routes ===================== */
.dsplit.boardmode .board-col{order:1;flex:0 0 210px;min-width:0;overflow:hidden}
.dsplit.boardmode .board-col .bucket{width:100%;height:100%}
.dsplit.boardmode .dmap-pane{order:2;flex:1;min-width:0}                 /* big center map */
.dsplit.boardmode #dispRight{order:3;flex:0 0 244px;display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:7px;background:var(--pane);overflow:hidden}
.dsplit.gridmode .board-col{order:1;flex:1;overflow:hidden}
.dsplit.gridmode #dispRight{display:none}
#dispRight .opsh{flex:none}
.routerail-list{overflow:auto;flex:1}
/* #43 - a search hit announces itself. Once, briefly: a permanently highlighted row stops being
   a signal and becomes decoration. */
@keyframes dpHit{0%{box-shadow:0 0 0 0 var(--a-map,#5ad1ff);background:color-mix(in srgb,var(--a-map,#5ad1ff) 22%,transparent)}
  100%{box-shadow:0 0 0 6px transparent;background:transparent}}
.rrow.dp-hit{animation:dpHit 1.3s ease-out 1}
.rrow{padding:8px 10px;border-bottom:1px solid var(--rule);cursor:pointer;border-left:3px solid transparent}
.rrow:hover{background:var(--hover)}
.rrow.sel{background:var(--sel);border-left-color:var(--rc)}
.rrow-drop{display:none;text-align:center;font-size:9px;color:var(--rc);margin-top:5px;font-weight:700}
.rrow.dragover{outline:2px dashed var(--rc);outline-offset:-3px;background:var(--hover)}
.rrow.dragover .rrow-drop{display:block}
/* Heat-the-board: during a drag every lane shows its real marginal route-time, coloured cheapest→dearest. */
.rrow.drop-heat .rrow-drop{display:block}
.rrow.heat-best{background:color-mix(in srgb,var(--pos) 10%,transparent);border-left-color:var(--pos)}
.rrow.heat-best .rrow-drop{color:var(--pos)}
.rrow.heat-ok{border-left-color:var(--amber,#ffb454)}
.rrow.heat-ok .rrow-drop{color:var(--amber,#ffb454)}
.rrow.heat-hot{opacity:.84;border-left-color:var(--neg,#ff6b8a)}
.rrow.heat-hot .rrow-drop{color:var(--neg,#ff6b8a)}
.rrow.heat-from{opacity:.5}
.rrow.heat-from .rrow-drop{color:var(--txt3)}

/* ===================== custom theme picker with swatches ===================== */
.thpick{position:relative}
.thpick-btn{display:flex;align-items:center;gap:7px;background:var(--pane);border:1px solid var(--rule);color:var(--txt2);border-radius:5px;padding:4px 8px;font:inherit;font-size:10px;font-weight:600;letter-spacing:.04em}
.thpick-btn:hover{border-color:var(--a-map);color:var(--txt)}
.thsw{display:inline-flex;gap:2px}.thsw i{width:8px;height:13px;border-radius:2px;display:block}
.thpick-menu{position:absolute;top:calc(100% + 5px);right:0;width:206px;max-height:360px;overflow:auto;background:var(--pane);border:1px solid var(--rule2);border-radius:8px;box-shadow:0 18px 50px -16px #000;padding:5px;display:none;z-index:700}
.thpick.open .thpick-menu{display:block}
.thpick-menu button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;border:none;color:var(--txt);font:inherit;font-size:11px;padding:6px 8px;border-radius:5px;cursor:pointer}
.thpick-menu button:hover{background:var(--hover)}
.thpick-menu button.on{background:var(--sel);font-weight:700}
.thpick-menu .thsw i{width:9px;height:15px}

/* ===================== Control Tower (grid-only): routes·stops·big map + trucks ===================== */
.ctsplit{display:flex;gap:10px;flex:1;min-height:0}
.ctleft{flex:0 0 214px;display:flex;flex-direction:column;gap:10px;min-height:0}
.unschpane{flex:0 0 40%;display:flex;flex-direction:column;overflow:hidden;min-height:0}
.unschpane .strips{flex:1;overflow:auto}
.routespane{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}
.ctstops{flex:0 0 322px;display:flex;flex-direction:column;overflow:hidden}
.ctstops .pbody{overflow:auto}
.ctmap{flex:1;min-width:0}                               /* biggest — fills the gap */
.dtruck{width:22px;height:22px;display:grid;place-items:center;filter:drop-shadow(0 0 5px currentColor)}
.tab .tabopen{margin-left:6px;font-size:10px;color:var(--txt3);border:1px solid var(--rule);border-radius:3px;padding:0 3px;line-height:14px;cursor:pointer}
.tab .tabopen:hover{color:var(--a-map);border-color:var(--a-map)}

/* Loading — confirmed truck animation + buffer input */
.bufin{width:64px;background:var(--pane2);border:1px solid var(--rule2);color:var(--txt);border-radius:5px;padding:4px 6px;font:inherit;font-size:11px;text-align:right}
.loaded-scene{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:8px}
.loaded-truck{animation:rollin 1s cubic-bezier(.2,.8,.25,1)}
.loaded-truck svg{width:92px;height:92px}
@keyframes rollin{from{transform:translateX(-130%);opacity:0}to{transform:translateX(0);opacity:1}}
.loaded-lock{font-size:26px;animation:lockpop .4s .85s both}
@keyframes lockpop{0%{transform:scale(0);opacity:0}70%{transform:scale(1.3)}100%{transform:scale(1);opacity:1}}
.loaded-msg{text-align:center}

/* ===================== Route Lists bulk bar · Billing ===================== */
.rlbulk{display:flex;align-items:center;gap:8px;padding:7px 10px;border-bottom:1px solid var(--rule);background:var(--head);font-size:10px;flex-wrap:wrap;position:sticky;top:0;z-index:3}
.rlbulk .rlchk,.rlbulk input{accent-color:var(--a-route)}
.rlwinsel{background:var(--pane2);border:1px solid var(--rule2);color:var(--txt);border-radius:5px;padding:3px 6px;font:inherit;font-size:10px}
.rlchk{accent-color:var(--a-route)}

/* ===================== z-index: keep chrome/overlays above Leaflet map panes ===================== */
.topbar{z-index:1200}
.thpick-menu{z-index:1300}
.detailwin{z-index:1250}
#cmdk{z-index:1400}
#toasts{z-index:5000}  /* above modals (pay-ov=4000) so toasts never sit behind a blurred overlay */
#boot{z-index:2000}

/* ===================== fixes: stop-list fit · contrasting truck ===================== */
.ctstops{flex:0 0 500px}
.ctstoptbl{width:100%;table-layout:fixed}
.ctstoptbl th,.ctstoptbl td{white-space:nowrap;overflow:hidden}
/* #123 — the search shortlist. Anchored under the box so the answer appears where the question
   was asked, and grouped by kind: ‘Riverhead’ is a route, a town and a shop at once, and only the
   dispatcher knows which they meant. */
#dpSearchPill{position:relative}
.dsh{position:absolute;top:calc(100% + 6px);left:0;z-index:400;min-width:290px;max-width:380px;
  max-height:340px;overflow:auto;background:var(--pane,#121a24);border:1px solid var(--rule,#25333f);
  border-radius:10px;box-shadow:0 18px 44px rgba(0,0,0,.55);padding:5px}
.dsh-head{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim,#8fa6b8);
  padding:6px 8px 5px;border-bottom:1px solid var(--rule,#25333f);margin-bottom:3px}
.dsh-grp{font-size:9px;letter-spacing:.07em;text-transform:uppercase;color:var(--dim,#8fa6b8);
  padding:7px 8px 3px;font-weight:800}
.dsh-grp span{opacity:.7;font-weight:600}
.dsh-row{display:flex;align-items:center;gap:7px;width:100%;background:none;border:0;cursor:pointer;
  color:inherit;font:inherit;font-size:11px;text-align:left;padding:6px 8px;border-radius:7px}
.dsh-row:hover{background:#ffffff12}
.dsh-dot{width:7px;height:7px;border-radius:2px;flex:none}
.dsh-l{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dsh-s{flex:none;font-size:9.5px;color:var(--dim,#8fa6b8);max-width:46%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.dsh-more{font-size:9.5px;color:var(--dim,#8fa6b8);padding:3px 8px 6px}

/* #156 — the full stop name, like the comparison view already shows. This truncated with an
   ellipsis, so two branches of the same customer read identically and a dispatcher had to hover
   each one to tell them apart. Wrapping costs a second line on the long ones and nothing on the
   rest; the column keeps its width, so the numeric columns beside it stay aligned. */
.ctstoptbl td.cust{max-width:0;width:99%;white-space:normal;overflow-wrap:anywhere;
  line-height:1.3;padding-top:5px;padding-bottom:5px}
.ctstoptbl th:first-child,.ctstoptbl td:first-child{width:44px;padding-left:6px;padding-right:3px}
.ctstoptbl td:nth-child(3){width:76px}.ctstoptbl td:nth-child(4){width:52px}
/* truck stands out from its own route line: white truck on a route-colored disc */
.dtruck{width:24px;height:24px;display:grid;place-items:center;color:#fff;background:var(--rc);border:2px solid #fff;border-radius:50%;box-shadow:0 0 9px var(--rc),0 1px 4px rgba(0,0,0,.55);filter:none}
.dtruck svg{width:14px;height:14px}

/* ===================== undo button · staged trucks · stop-list drop ===================== */
.undobtn{background:var(--pane);border:1px solid var(--rule2);color:var(--txt2);border-radius:5px;padding:4px 10px;font:inherit;font-size:10px;font-weight:700;letter-spacing:.05em;cursor:pointer;display:flex;align-items:center;gap:5px}
.undobtn:hover:not(:disabled){border-color:var(--a-route);color:var(--a-route)}
.undobtn:disabled{opacity:.38;cursor:default}
.undon{background:var(--a-route);color:var(--ink);border-radius:7px;padding:0 4px;font-size:8px;font-weight:800}
.dtruck{position:relative}
/* per-phase status at a glance: en-route (moving) = clean glow · LOAD (staging at dock) = amber ring ·
   UNLOAD (at the customer) = green ring. Staged trucks gently pulse instead of the old hard blink. */
.dtruck.dt-enroute{box-shadow:0 0 10px var(--rc),0 1px 4px rgba(0,0,0,.55)}
.dtruck.dt-load{box-shadow:0 0 0 2px #ffb454,0 0 11px rgba(255,180,84,.55),0 1px 4px rgba(0,0,0,.55)}
.dtruck.dt-unload{box-shadow:0 0 0 2px #41f0ad,0 0 11px rgba(65,240,173,.5),0 1px 4px rgba(0,0,0,.55)}
.dtruck.staged{animation:dtpulse 1.9s ease-in-out infinite}
@keyframes dtpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
.dtbadge{position:absolute;top:-8px;left:50%;transform:translateX(-50%);background:var(--rc);color:#06121e;font-size:6.5px;font-weight:800;padding:0 3px;border-radius:3px;letter-spacing:.03em;white-space:nowrap;border:1px solid #fff}
.dt-load .dtbadge{background:#ffb454}
.dt-unload .dtbadge{background:#41f0ad}
.ctstop-drop{display:none;text-align:center;font-size:9px;color:var(--a-blot);padding:9px;border-top:1px dashed var(--rule2);font-weight:700}
.droptarget.dragover .ctstop-drop{display:block}
/* dispatch stop drag · reorder · pin/lock */
.ctstoptbl th:nth-child(5),.ctstoptbl td:nth-child(5){width:74px}   /* Window — keep room so Status can't overlap */
.ctstoptbl th:nth-child(6),.ctstoptbl td:nth-child(6){width:64px}   /* Status */
.ctstoptbl th:last-child,.ctstoptbl td:last-child{width:78px;text-align:right;padding-right:6px;white-space:nowrap}
.ctstop-row[draggable="true"]{cursor:grab}
.ctstop-row.dragging{opacity:.4}
.ctstop-row.rstop-drop-above td{box-shadow:inset 0 2px 0 var(--a-blot)}
.ctstop-row.rstop-lock td.cust::after{content:' 📌';font-size:9px}
.pinbtn{appearance:none;background:transparent;border:none;cursor:pointer;font-size:11px;line-height:1;padding:2px;border-radius:4px;filter:grayscale(1) opacity(.35)}
.pinbtn:hover{filter:grayscale(.3) opacity(.8)}
.pinbtn.on{filter:none;opacity:1}

/* ===================== Control Tower: horizontal unscheduled bucket at bottom ===================== */
.routespane{flex:0 0 216px;display:flex;flex-direction:column;overflow:hidden;min-height:0}
.ctbucket{flex:0 0 158px;display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:7px;background:var(--pane);overflow:hidden;margin-top:10px}
.ctbucket-hd{padding:6px 10px;border-bottom:1px solid var(--rule);background:var(--head);font-size:9.5px;letter-spacing:.06em;flex:none}
.ctbucket-hd .n{background:var(--neg);color:#fff;border-radius:8px;padding:0 5px;font-size:9px;font-weight:800}
.strips-h{flex:1;display:flex;gap:7px;overflow-x:auto;overflow-y:hidden;padding:7px;align-items:center}
.strips-h .strip{min-width:326px;max-width:326px;flex:0 0 auto;align-self:stretch}
.ctbucket.dragover{background:var(--hover);outline:2px dashed var(--neg);outline-offset:-3px}

/* ===================== Warehouse marker (was depot ▦) ===================== */
.whmk{width:21px;height:21px;border-radius:5px;background:#06121e;border:2px solid var(--cyan);display:grid;place-items:center;color:var(--cyan);box-shadow:0 0 10px -2px var(--cyan)}

/* ===================== date/time navigator (center-top on Radar + Control Tower) ===================== */
.ctmap{position:relative}
.mapholder{position:relative;flex:1;min-height:0}
.datebar{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:500;display:flex;align-items:center;gap:8px;background:color-mix(in srgb,var(--pane2) 86%,transparent);backdrop-filter:blur(8px);border:1px solid var(--rule2);border-radius:9px;padding:5px 7px;box-shadow:0 8px 26px -12px var(--shadow)}
.datebar-mid{text-align:center;min-width:140px}
.datebar-date{font-size:16px;font-weight:800;letter-spacing:.01em}
.datebar-time{font-size:12px;color:var(--a-map);font-weight:700;font-variant-numeric:tabular-nums}
.datebar-sub{font-size:9px;font-weight:800;letter-spacing:.14em}
.datebar-sub.past{color:var(--warn)}.datebar-sub.future{color:var(--a-assign)}
.dbnav{background:var(--pane2);border:1px solid var(--rule2);color:var(--txt);border-radius:6px;width:26px;height:26px;font-size:12px;cursor:pointer}
.dbnav:hover{border-color:var(--a-map);color:var(--a-map)}
.dbtoday{background:var(--pane2);border:1px solid var(--rule2);color:var(--txt2);border-radius:6px;padding:0 9px;font-size:9px;font-weight:800;height:26px;cursor:pointer}
.dbtoday.on{background:var(--a-map);color:var(--ink);border-color:transparent}
.dayveil{position:absolute;top:52px;left:12px;transform:none;z-index:499;display:none;white-space:nowrap;text-align:left;background:color-mix(in srgb,var(--pane2) 90%,transparent);border:1px solid var(--rule2);border-radius:9px;padding:6px 12px;backdrop-filter:blur(6px);max-width:70%;overflow:hidden;text-overflow:ellipsis;font-size:10.5px}
.dayveil.on{display:block}

/* ---- closed/past day: pale + italic so it reads clearly different from the live (active) day ---- */
body.day-past #fleetPanel .rcard,
body.day-past #ctRoutes .rrow{font-style:italic;opacity:.6;filter:saturate(.55)}
body.day-past #fleetPanel .rcard:hover,
body.day-past #ctRoutes .rrow:hover{opacity:.92}
body.day-past #fleetPanel .rcard{background:rgba(255,255,255,.015)}
/* fade the radar + tower map itself (tiles desaturated, route/area overlays dimmed) */
body.day-past #map .leaflet-tile-pane,
body.day-past .ctmap .leaflet-tile-pane{filter:grayscale(.5) brightness(.78)}
body.day-past #map .leaflet-overlay-pane,
body.day-past #map .leaflet-marker-pane,
body.day-past .ctmap .leaflet-overlay-pane,
body.day-past .ctmap .leaflet-marker-pane{opacity:.55}

/* ===================== nav restructure: top icons · More · theme groups ===================== */
.topicons{display:flex;gap:3px;align-items:center}
.topicon{width:28px;height:26px;border:1px solid var(--rule);background:var(--pane);color:var(--txt2);border-radius:5px;font-size:13px;cursor:pointer;display:grid;place-items:center}
.topicon:hover{border-color:var(--a-map);color:var(--a-map)}
.topicon.on{background:var(--a-map);color:var(--ink);border-color:transparent}
.morewrap{display:flex;flex-direction:column;height:100%}
.moretabs{display:flex;gap:6px;flex:none;margin-bottom:10px}
.moretabs button{padding:8px 16px;border:1px solid var(--rule2);background:var(--pane);color:var(--txt2);border-radius:7px;font:inherit;font-size:11px;font-weight:700;letter-spacing:.04em;cursor:pointer}
.moretabs button.on{background:var(--a-map);color:var(--ink);border-color:transparent}
#moreBody{flex:1;min-height:0;display:flex;flex-direction:column}
.themegroup-h{font-size:10px;font-weight:800;letter-spacing:.1em;color:var(--txt2);margin-bottom:7px;display:flex;gap:6px;align-items:center}

/* ===================== Billing: apply-check bar · statement modal ===================== */
.billbar{display:flex;align-items:center;gap:8px;padding:7px 10px;border-bottom:1px solid var(--rule);background:var(--head);font-size:10px;flex:none}
.billbar input[type=number],.billbar input[type=text],.billbar input:not([type]){background:var(--pane2);border:1px solid var(--rule2);color:var(--txt);border-radius:5px;padding:3px 6px;font:inherit;font-size:10px}
.billchk{accent-color:var(--pos)}
.stmtmodal{position:fixed;inset:0;z-index:1450;display:none;align-items:flex-start;justify-content:center;padding:4vh 0;background:rgba(2,5,9,.66);backdrop-filter:blur(3px)}
.stmtmodal.on{display:flex}
.stmt{width:860px;max-width:96vw;max-height:92vh;background:#1a1f27;border:1px solid var(--rule2);border-radius:11px;box-shadow:0 30px 90px -20px #000;display:flex;flex-direction:column;overflow:hidden}
.stmt-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;background:var(--head);border-bottom:1px solid var(--rule);color:var(--txt2);font-size:11px;font-weight:700;letter-spacing:.03em}
.stmt-tb-acts{display:flex;align-items:center;gap:7px}
.stmt-scroll{overflow:auto;padding:22px;background:#3a3f47}
/* ---------- the statement "paper" (light, print-faithful document) ---------- */
.stp{width:8.5in;max-width:100%;margin:0 auto;background:#fff;color:#1d2530;padding:0.6in 0.62in 0.45in;
  font-family:"Helvetica Neue",Arial,sans-serif;font-size:11px;line-height:1.45;box-shadow:0 8px 30px -8px rgba(0,0,0,.5)}
.stp *{box-sizing:border-box}
.sp-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;border-bottom:3px solid #0d3b66;padding-bottom:14px}
.sp-co{display:flex;gap:12px;align-items:flex-start}
.sp-logo{width:42px;height:42px;border-radius:10px;background:linear-gradient(135deg,#1488d8,#0d3b66);color:#fff;font-size:24px;display:grid;place-items:center;flex:none;box-shadow:0 3px 8px -2px rgba(13,59,102,.5)}
.sp-co-name{font-size:19px;font-weight:800;letter-spacing:.04em;color:#0d3b66}
.sp-co-name span{color:#1488d8}
.sp-co-meta{font-size:9.5px;color:#5a6675;margin-top:3px;line-height:1.5}
.sp-doc{text-align:right;flex:none}
.sp-doc h1{margin:0 0 6px;font-size:26px;letter-spacing:.16em;color:#0d3b66;font-weight:800}
.sp-doc-meta{border-collapse:collapse;margin-left:auto;font-size:10px}
.sp-doc-meta td{padding:2px 0 2px 14px;text-align:right;color:#5a6675}
.sp-doc-meta td:last-child{color:#1d2530;font-weight:700;font-variant-numeric:tabular-nums}
.sp-doc-meta tr.sp-due td{padding-top:6px;font-size:12px}
.sp-doc-meta tr.sp-due td:first-child{color:#0d3b66;font-weight:800}
.sp-doc-meta tr.sp-due td:last-child{color:#b00d1e;font-weight:800;font-size:14px}
.sp-parties{display:flex;justify-content:space-between;gap:24px;margin:16px 0 6px}
.sp-lbl{font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:#8a96a5;font-weight:700;margin-bottom:4px}
.sp-billto-name{font-size:14px;font-weight:800;color:#1d2530}
.sp-billto-lines{font-size:10.5px;color:#43505f;margin-top:2px;line-height:1.55}
.sp-muted{color:#8a96a5}
.sp-sum{min-width:280px;border:1px solid #d7dee6;border-radius:8px;overflow:hidden;align-self:flex-start}
.sp-sum-row{display:flex;justify-content:space-between;gap:18px;padding:7px 12px;font-size:10.5px;color:#43505f;border-bottom:1px solid #eef2f6}
.sp-sum-row b{font-variant-numeric:tabular-nums;color:#1d2530}
.sp-sum .sp-cr{color:#127a3e}
.sp-sum-due{background:#0d3b66;color:#fff;border-bottom:none}
.sp-sum-due span{color:#cfe2f2}.sp-sum-due b{color:#fff;font-size:14px}
.sp-ledger{width:100%;border-collapse:collapse;margin-top:14px;font-size:10px}
.sp-ledger thead th{background:#0d3b66;color:#fff;text-align:left;padding:7px 10px;font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.sp-ledger th.r,.sp-ledger td.r{text-align:right;font-variant-numeric:tabular-nums}
.sp-ledger td{padding:5px 10px;vertical-align:top;border-bottom:1px solid #eef2f6}
.sp-ledger tr.sp-inv td{border-top:1px solid #d7dee6;padding-top:8px;color:#1d2530}
.sp-ledger tr.sp-li td{padding-top:1px;padding-bottom:1px;color:#5a6675;font-size:9.5px}
.sp-li-q{display:inline-block;min-width:30px;font-weight:700;color:#1d2530}
.sp-ledger tr.sp-li-fee td{font-style:italic}
.sp-ledger tr.sp-pay td{color:#127a3e}
.sp-ledger tr.sp-pay .sp-cr{color:#127a3e;font-weight:700}
.sp-ledger tr.sp-open td{color:#8a96a5;font-style:italic}
.sp-ledger tr.sp-total td{border-top:2px solid #0d3b66;border-bottom:none;padding-top:8px;font-weight:800;color:#0d3b66;font-size:11px}
.sp-aging{margin-top:18px}
.sp-aging-t{font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:#8a96a5;font-weight:700;margin-bottom:6px}
.sp-aging-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.sp-age{border:1px solid #d7dee6;border-radius:7px;padding:8px 10px;text-align:center}
.sp-age span{display:block;font-size:9px;color:#8a96a5;letter-spacing:.04em}
.sp-age b{display:block;font-size:14px;margin-top:3px;color:#1d2530;font-variant-numeric:tabular-nums}
.sp-age.over{border-color:#f0c2c2;background:#fdf3f3}
.sp-age.over b{color:#b00d1e}
.sp-remit{margin-top:22px;border:1px dashed #b9c4cf;border-radius:8px;overflow:hidden}
.sp-remit-cut{background:#f3f6f9;color:#8a96a5;font-size:9px;letter-spacing:.08em;padding:5px 12px;border-bottom:1px dashed #b9c4cf}
.sp-remit-body{display:flex;justify-content:space-between;gap:24px;padding:12px 14px}
.sp-remit-addr{font-size:10.5px;color:#43505f;line-height:1.5}
.sp-remit-meta{border-collapse:collapse;font-size:10.5px}
.sp-remit-meta td{padding:3px 0 3px 16px;text-align:right;color:#5a6675}
.sp-remit-meta td:last-child{color:#1d2530;font-weight:700;font-variant-numeric:tabular-nums;min-width:120px}
.sp-foot{margin-top:18px;padding-top:12px;border-top:1px solid #d7dee6;font-size:9px;color:#7a8593;line-height:1.6}
.sp-foot-thanks{margin-top:6px;color:#0d3b66;font-weight:700;font-size:10px}
.sp-foot-fine{margin-top:5px;font-size:8px;color:#9aa6b4}
@media print{
  body.printing-stmt *{visibility:hidden!important}
  body.printing-stmt .stmtmodal,body.printing-stmt .stmtmodal *{visibility:visible!important}
  body.printing-stmt .stmtmodal{position:absolute;inset:0;padding:0;background:#fff;display:block;overflow:visible}
  body.printing-stmt .stmt{width:auto;max-width:none;max-height:none;background:#fff;border:none;box-shadow:none;display:block}
  body.printing-stmt .stmt-toolbar{display:none!important}
  body.printing-stmt .stmt-scroll{overflow:visible;padding:0;background:#fff}
  body.printing-stmt .stp{width:auto;box-shadow:none;padding:0.3in 0.4in}
  @page{margin:0.5in}
}

/* ===================== date nav → bottom-right edge (less distraction) ===================== */
.datebar{top:auto;bottom:10px;left:auto;right:10px;transform:none;gap:6px;padding:4px 7px}
.datebar-mid{min-width:0}
.datebar-date{font-size:13px}
.datebar-time{font-size:11px}
.dayveil{top:52px;bottom:auto;left:12px;right:auto;transform:none;text-align:left;max-width:72%;font-size:9.5px}

/* ===================== compact Control Tower header strip → bigger map ===================== */
.dwrap .dstrip{margin-bottom:6px;gap:6px;flex:none}
.dwrap .dstrip .dpill{padding:3px 9px;font-size:9px}
.dwrap .dstrip .dpill b{font-size:12px;margin-right:4px}

/* ===================== undo confirmation modal ===================== */
/* Above every modal it can be raised from (New Order is 1470, the roster builder 1480). A
   confirmation that renders BEHIND the thing it is confirming is a dead end: the buttons are
   visible, the click lands on the modal in front, and the operator is stuck. Found by
   tools/check-dup-orders.mjs pressing the real buttons — it looked right in a screenshot. */
.confirmmodal{position:fixed;inset:0;z-index:1490;display:none;align-items:center;justify-content:center;background:rgba(2,5,9,.6);backdrop-filter:blur(3px)}
.confirmmodal.on{display:flex}
.confirmbox{width:360px;max-width:92vw;background:var(--pane);border:1px solid var(--rule2);border-radius:11px;box-shadow:0 30px 80px -20px #000;overflow:hidden}
.confirmhd{padding:13px 16px;font-size:13px;font-weight:800;border-bottom:1px solid var(--rule);background:var(--head)}
.confirmbody{padding:16px;font-size:12px;line-height:1.6;color:var(--txt2)}
.confirmacts{display:flex;gap:8px;padding:0 16px 16px;justify-content:flex-end}

/* #108 - the duplicate-order warning. Wider than a yes/no box because its whole job is to SHOW the
   order that is already in the system, and the three answers are choices, not a confirmation — so
   they stack full-width and read as three sentences rather than as OK/Cancel plus a stranger. */
.confirmbox.wide{width:520px}
.confirmacts.stack{flex-direction:column;align-items:stretch;gap:7px}
.confirmacts.stack .btn{width:100%;justify-content:center;text-align:center}

/* #112 - a stop that is costing its route far more than the rest of the run. Warning-coloured and
   clickable, sitting next to the customer name where the dispatcher's eye already is. Kept small
   and inline so a route with none of them looks exactly as it did. */
.stop-out{display:inline-flex;align-items:center;gap:3px;margin-left:6px;padding:1px 5px;border-radius:4px;
  font-size:9px;font-weight:800;letter-spacing:.03em;cursor:pointer;white-space:nowrap;
  color:var(--warn);background:color-mix(in srgb,var(--warn) 15%,transparent);border:1px solid color-mix(in srgb,var(--warn) 45%,transparent)}
.stop-out:hover{background:color-mix(in srgb,var(--warn) 28%,transparent)}
/* The map popup's action row — two links that need to read as actions, not as body text. */
.popacts{margin-top:7px;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center}
.popacts a{cursor:pointer;color:var(--a-blot);font-weight:700;font-size:11px}
.popacts a.pop-rb{color:var(--a-assign)}
.popacts a:hover{text-decoration:underline}

/* #105 - the on-the-fly proposal. Every line is a stop with the REASON it is there, so the list
   reads as an argument rather than as three names that appeared. Unticked/excluded rows are dimmed
   rather than hidden: "why not that one" is half of "where did these come from". */
.otfrule{font-size:11px;line-height:1.6;color:var(--txt2);padding:8px 10px;margin-bottom:4px;
  border-left:2px solid #7c5cff;background:color-mix(in srgb,#7c5cff 9%,transparent);border-radius:0 6px 6px 0}
.otflist{display:flex;flex-direction:column;gap:4px;max-height:30vh;overflow-y:auto}
.otfrow{display:flex;align-items:center;gap:9px;padding:7px 10px;border:1px solid var(--rule);
  border-radius:7px;background:var(--bg2);cursor:pointer}
.otfrow:hover{border-color:var(--rule2)}
.otfrow.off{opacity:.55;cursor:default}
.otfrow input{flex:0 0 auto}
.otfx{flex:0 0 auto;width:13px;text-align:center;color:var(--txt3);font-size:10px}
.otfmain{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.otfname{font-size:12px;font-weight:700;color:var(--txt);overflow-wrap:anywhere}
.otfwhy{font-size:10.5px;color:var(--txt3);line-height:1.5;overflow-wrap:anywhere}
.otfunits{flex:0 0 auto;font-size:11px;color:var(--txt2);font-variant-numeric:tabular-nums;white-space:nowrap}
.otfcrew{display:flex;gap:10px;flex-wrap:wrap}
.otfcrew>div{flex:1 1 190px;display:flex;flex-direction:column;gap:2px;padding:8px 10px;
  border:1px solid var(--rule);border-radius:7px;background:var(--bg2)}
.otfcrew b{font-size:12.5px;color:var(--txt)}
.otfk{font-size:9.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--txt3)}

/* #128 - the crew question every on-the-fly door asks, and the lane's editable crew. */
.otfcrew.otfq-host{display:block}
.otfq-wrap{margin-top:4px}
.otfq{display:flex;gap:6px;margin:4px 0 6px}
.otfq-b{flex:1 1 0;padding:7px 10px;border-radius:7px;border:1px solid var(--rule2,var(--rule));background:var(--bg2);
  color:var(--txt);font-size:12px;font-weight:700;cursor:pointer}
.otfq-b.on{border-color:var(--a-blot,#7c5cff);background:color-mix(in srgb,var(--a-blot,#7c5cff) 18%,transparent)}
.otfq-b:focus-visible{outline:2px solid var(--a-blot,#7c5cff);outline-offset:2px}
.otfq-no{font-size:11px;margin:2px 0 4px}
.otfq-pick{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.otfq-pick label{display:flex;flex-direction:column;gap:3px;font-size:10px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--txt3)}
.otfq-pick select{background:var(--bg2);color:var(--txt);border:1px solid var(--rule2,var(--rule));border-radius:6px;
  padding:6px 8px;font-size:12px;text-transform:none;letter-spacing:0;font-weight:600;min-width:0;width:100%}
.otfq-note{grid-column:1/-1;font-size:10.5px;line-height:1.5}
.otfwh{display:flex;flex-direction:column;gap:3px;margin:8px 0 2px;font-size:10px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--txt3)}
.otfwh select{background:var(--bg2);color:var(--txt);border:1px solid var(--rule2,var(--rule));border-radius:6px;
  padding:6px 8px;font-size:12px;text-transform:none;letter-spacing:0;font-weight:600;max-width:100%}
@media (max-width:520px){ .otfq-pick{grid-template-columns:1fr} }
select.lanecrew{max-width:112px;background:transparent;color:var(--txt2);border:1px solid var(--rule);border-radius:4px;
  font-size:9.5px;padding:0 2px;margin:0 2px 0 0;cursor:pointer}
select.lanecrew:hover,select.lanecrew:focus{color:var(--txt);border-color:var(--a-blot,#7c5cff)}

/* #137 - "what will happen", written out before the dispatcher commits. Each line is one consequence
   of the move; the warn lines are the two they are being asked to take responsibility for. */
.mwplan{display:flex;flex-direction:column;gap:5px}
.mwline{font-size:11px;line-height:1.6;color:var(--txt2);padding:6px 9px;border-radius:6px;
  background:var(--bg2);border:1px solid var(--rule);overflow-wrap:anywhere}
.mwline.warn{color:var(--txt);border-color:color-mix(in srgb,var(--warn) 55%,transparent);
  background:color-mix(in srgb,var(--warn) 12%,transparent)}
/* A two-item chooser is not a form — the rows need room to carry their explanation. */
.rmenu .skip-opt{text-align:left;line-height:1.35}
.rmenu .skip-opt:disabled{opacity:.45;cursor:not-allowed}

/* #135 - the overlap explanation. Sections and plain sentences rather than a facts row, because the
   complaint was "I'm not sure what this means" and a denser fact does not answer that. */
.ovsec{font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--txt3);
  margin:11px 0 5px}
.ovsec:first-child{margin-top:0}
.ovline{font-size:11.5px;line-height:1.65;color:var(--txt2);padding:7px 10px;border-radius:6px;
  background:var(--bg2);border:1px solid var(--rule);margin-bottom:5px;overflow-wrap:anywhere}
.ovline.warn{color:var(--txt);border-color:color-mix(in srgb,var(--warn) 55%,transparent);
  background:color-mix(in srgb,var(--warn) 12%,transparent)}
/* "This one is fine" has to read as reassurance, not as another warning. */
.ovline.ok{border-color:color-mix(in srgb,var(--pos) 45%,transparent);
  background:color-mix(in srgb,var(--pos) 9%,transparent)}
.ovline.dim{background:transparent;border-style:dashed}
/* The same customer on two routes is the one that costs real money — it reads differently. */
.ovdup{margin-left:6px;font-size:8.5px;font-weight:800;letter-spacing:.05em;padding:1px 4px;border-radius:3px;
  color:var(--neg);background:color-mix(in srgb,var(--neg) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--neg) 45%,transparent)}
.alerts-body .confl-row.dup{background:color-mix(in srgb,var(--neg) 7%,transparent)}

/* #138 - the drag package. Brian: "they kind of visually bunch up into a package". Three stacked
   cards with the count on the front one, so a selection does not drag as the browser's ghost of a
   single row. Rendered off-screen and rasterised by setDragImage. */
.dragpack{position:relative;width:132px;height:34px;font:700 11px/1 var(--mono,ui-monospace,monospace)}
.dragpack .dp-card{position:absolute;left:0;top:0;width:112px;height:28px;border-radius:6px;
  background:var(--pane2);border:1px solid var(--a-blot);display:flex;align-items:center;
  justify-content:center;color:var(--txt);box-shadow:0 4px 14px -4px #000}
.dragpack .dp-2{transform:translate(6px,4px);opacity:.72}
.dragpack .dp-3{transform:translate(12px,8px);opacity:.45}
.dragpack .dp-1{transform:translate(0,0)}
.dragpack b{color:var(--a-blot);margin-right:4px}
/* The lane that received them flashes, so "did that land where I meant" is answered on the board. */
@keyframes dcland{0%{box-shadow:inset 0 0 0 2px var(--pos)}100%{box-shadow:inset 0 0 0 2px transparent}}
.rrow.dc-land{animation:dcland 1.4s ease-out}
@media (prefers-reduced-motion: reduce){ .rrow.dc-land{animation:none;box-shadow:inset 0 0 0 2px var(--pos)} }
/* The recap, with the verification chip. Stays longer when something did NOT land — a partial
   result is the one worth reading. #107: it sat at right:14px, directly under the Ask Nexus and Test
   Assist buttons (right:18px, z-index 2400), so the one message that said a move had failed was the
   one Brian "can't read". It now sits LEFT of that button column (the same 172px clearance the
   correspondence bar uses) and above the ticker, and it is wider so the reason fits. */
.dcrecap{position:fixed;right:172px;bottom:40px;z-index:1500;width:340px;max-width:calc(100vw - 190px);
  background:var(--pane);border:1px solid color-mix(in srgb,var(--pos) 55%,transparent);border-radius:9px;
  box-shadow:0 18px 44px -14px #000;padding:10px 11px;font-size:11px;color:var(--txt2)}
@media (max-width:640px){ .dcrecap{right:14px;bottom:150px;max-width:calc(100vw - 28px)} }
.dcrecap.part{border-color:color-mix(in srgb,var(--warn) 60%,transparent)}
.dcrecap.bad{border-color:color-mix(in srgb,var(--neg) 70%,transparent)}
.dc-hd{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:11.5px;font-weight:700;color:var(--txt);margin-bottom:6px;padding-right:16px}
.dc-chk{font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:2px 5px;
  border-radius:4px;background:var(--hover);color:var(--txt3);white-space:nowrap}
.dc-chk.ok{color:var(--pos);background:color-mix(in srgb,var(--pos) 14%,transparent)}
.dc-chk.bad{color:var(--neg);background:color-mix(in srgb,var(--neg) 16%,transparent)}
.dc-chk.warn{color:var(--warn);background:color-mix(in srgb,var(--warn) 16%,transparent)}
.dc-list{display:flex;flex-wrap:wrap;gap:4px}
.dc-ok,.dc-no{font-size:10px;padding:2px 6px;border-radius:4px;overflow-wrap:anywhere}
.dc-ok{color:var(--pos);background:color-mix(in srgb,var(--pos) 11%,transparent)}
.dc-no{color:var(--neg);background:color-mix(in srgb,var(--neg) 12%,transparent)}
.dc-why{margin-top:7px;font-size:11px;line-height:1.55;color:var(--txt3)}
.dc-why.bad{color:var(--txt);padding:7px 9px;border-radius:6px;
  background:color-mix(in srgb,var(--neg) 12%,transparent);border:1px solid color-mix(in srgb,var(--neg) 45%,transparent)}
.dc-x{position:absolute;top:6px;right:7px;background:none;border:0;color:var(--txt3);cursor:pointer;font-size:11px;line-height:1}
.dc-x:hover{color:var(--txt)}

/* #140 - the skip / cancel stamp. It rides on the order everywhere the order shows, and names WHO
   and WHEN as well as why: "skipped" with nobody's name on it is the version that starts an
   argument three weeks later. */
.skipstamp{margin-top:5px;padding:5px 8px;border-radius:6px;font-size:10px;line-height:1.55;
  color:var(--txt2);background:color-mix(in srgb,var(--warn) 11%,transparent);
  border:1px solid color-mix(in srgb,var(--warn) 40%,transparent);overflow-wrap:anywhere}
.skipstamp b{color:var(--warn);letter-spacing:.03em;margin-right:4px}
.skipstamp.churn{background:color-mix(in srgb,var(--neg) 11%,transparent);
  border-color:color-mix(in srgb,var(--neg) 45%,transparent)}
.skipstamp.churn b{color:var(--neg)}
.ss-who{display:block;color:var(--txt3);font-size:9.5px;margin-top:2px}
.ss-churn{display:inline-block;margin-top:3px;font-size:9px;font-weight:800;color:var(--neg)}

/* #164 / #130 - rename in place, Brian's "kind of like renaming a new Google doc". The name has to
   LOOK editable before anyone double-clicks it, or the gesture is undiscoverable. */
.rname{cursor:text;border-radius:3px;padding:0 2px;margin:0 -2px}
.rname:hover{background:color-mix(in srgb,var(--a-route) 18%,transparent);outline:1px dashed color-mix(in srgb,var(--a-route) 50%,transparent)}
.rn-inline{width:110px;font:800 11px/1.2 var(--mono,ui-monospace,monospace);color:var(--txt);
  background:var(--bg2);border:1px solid var(--a-route);border-radius:4px;padding:1px 4px}
.rn-inline.bad{border-color:var(--neg)}
.rn-inline:focus{outline:2px solid var(--a-route);outline-offset:1px}

/* #169 - areas no route covers, listed under the routes. Deliberately NOT styled as a route card:
   these are not routes, and dressing them as one would be the screen lying in the other direction. */
.acblock{margin-top:10px;padding-top:9px;border-top:1px dashed var(--rule2)}
.achd{font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--warn);
  margin-bottom:6px;line-height:1.5}
.achd .dim{font-weight:500;letter-spacing:0;text-transform:none;color:var(--txt3)}
.acrow{display:flex;align-items:center;gap:7px;padding:6px 8px;margin-bottom:4px;border-radius:6px;
  background:var(--bg2);border:1px solid var(--rule);cursor:pointer;font-size:10.5px}
.acrow:hover{border-color:var(--warn)}
/* An area with nothing in it is information, not a problem — it must not compete for attention
   with one holding fourteen unrouted stops. */
.acrow.quiet{opacity:.6}
.acrow .sw{width:9px;height:9px;border-radius:2px;flex:0 0 auto}
.acname{font-weight:700;color:var(--txt);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acn{font-size:10px;color:var(--txt2);white-space:nowrap}
.acnone{color:var(--warn)}
.acgo{flex:0 0 auto;font:700 9px/1 var(--mono,ui-monospace,monospace);padding:3px 6px;border-radius:4px;
  cursor:pointer;color:var(--a-route);background:color-mix(in srgb,var(--a-route) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--a-route) 45%,transparent)}
.acgo:hover{background:color-mix(in srgb,var(--a-route) 28%,transparent)}
/* The Areas filter: say what picking each one will find, before it is picked. */
.rlf-ddn{margin-left:auto;font-size:9px;color:var(--txt3);white-space:nowrap}
.rlf-ddopt.rlf-nocov .rlf-ddn{color:var(--warn)}

/* #125 - a selected backlog card, and the bar that only exists while something is selected. A
   permanently-present toolbar for an occasional action is clutter, and the backlog is where the
   dispatcher spends the day. */
.strip.uns-pick{box-shadow:inset 3px 0 0 var(--a-blot),0 0 0 1px var(--a-blot)}
.unsbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:7px 10px;margin:6px 0 0;
  border-radius:7px;font-size:11px;color:var(--txt2);
  background:color-mix(in srgb,var(--a-blot) 11%,transparent);
  border:1px solid color-mix(in srgb,var(--a-blot) 40%,transparent)}
.unsbar b{color:var(--txt);font-size:12px}
.unsbar .miniact{margin-left:0}
.unsbar .pay-go{margin-left:auto}

/* #145 - the look-ahead state. A driver opening the NEXT stop to check for surprises is not
   arriving, and the screen has to look different or they will read it as "the app thinks I'm here".
   Warning-coloured rather than green, and it says nothing is being timed. */
.df-gps.look{color:var(--txt);background:color-mix(in srgb,var(--warn) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--warn) 45%,transparent);line-height:1.6}
.df-gps.look b{color:var(--warn)}
.df-dim{color:var(--txt3);font-size:11px}

/* #168 - the day-label calendar. Brian's spreadsheet is a grid and so is this: routes down the
   side, cycle days across the top. The two questions it has to answer are read in two directions —
   "who is free on M12" is a column, "what does P08 do" is a row — so the cells are small and dense
   and the colour carries the state, not the text. */
.rl1c{display:flex;flex-direction:column;min-height:0;flex:1;padding:8px;gap:8px}
.cgwrap{display:flex;flex-direction:column;gap:9px;min-height:0}
.cghd{font-size:11.5px;color:var(--txt2);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cghd b{color:var(--txt);font-size:12.5px}
.cgkey{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:9.5px;color:var(--txt3)}
.cgkey i{width:10px;height:10px;border-radius:2px;display:inline-block;margin-left:6px}
.cgscroll{overflow:auto;max-height:56vh;border:1px solid var(--rule);border-radius:8px}
.cgtab{border-collapse:separate;border-spacing:0;font-size:10px;width:max-content;min-width:100%}
.cgtab th,.cgtab td{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:4px 6px;
  white-space:nowrap;text-align:left}
.cgtab thead th{position:sticky;top:0;z-index:2;background:var(--head);color:var(--txt3);
  font-size:9px;font-weight:800;letter-spacing:.04em}
/* The route column stays put: reading across a 20-day cycle is the point, and losing which route
   you are on halfway across makes the grid useless. */
.cgtab th.cg-rt{position:sticky;left:0;z-index:3;background:var(--head);min-width:96px}
.cgtab thead th.cg-rt{z-index:4}
.cgtab th.cg-rt b{display:block;color:var(--txt);font-size:11px}
.cgtab th.cg-rt .dim{font-size:9px;font-weight:400}
.cgtab thead th.cg-now{color:var(--a-cover);background:color-mix(in srgb,var(--a-cover) 16%,transparent)}
.cgtab td{cursor:pointer;max-width:132px;overflow:hidden;text-overflow:ellipsis}
.cgtab td:hover{outline:1px solid var(--a-route);outline-offset:-1px}
.cg-planned,.cgkey i.cg-planned{background:color-mix(in srgb,var(--a-cover) 13%,transparent)}
.cgtab td.cg-planned{color:var(--txt2)}
/* OPEN is capacity, not a gap — it has to be the thing the eye lands on. */
.cg-open,.cgkey i.cg-open{background:color-mix(in srgb,var(--warn) 22%,transparent)}
.cgtab td.cg-open{color:var(--warn);font-weight:800;letter-spacing:.04em}
.cg-named{color:var(--txt3)}
.cg-undeclared,.cgkey i.cg-undeclared{background:transparent}
.cgtab td.cg-undeclared{color:var(--txt3)}
.cgtab td.cg-na{background:repeating-linear-gradient(45deg,transparent,transparent 3px,var(--rule) 3px,var(--rule) 4px);cursor:default}
.cg-n{float:right;color:var(--txt3);font-size:9px;margin-left:6px}
.cgopen{font-size:10.5px;color:var(--txt2);line-height:1.6}
.cgopen b{color:var(--warn)}
.cgopenlist{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.cgchip{font:800 9.5px/1 var(--mono,ui-monospace,monospace);padding:3px 6px;border-radius:4px;
  color:var(--warn);background:color-mix(in srgb,var(--warn) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--warn) 40%,transparent)}

/* #174 - the empty state has to READ, because it is now carrying the answer to "where are my
   stops". A one-line grey mumble was the old behaviour and it is what made the map look dead. */
.rln-empty{padding:11px 12px;font-size:11px;line-height:1.7;color:var(--txt2);
  background:var(--bg2);border:1px solid var(--rule);border-radius:7px;margin:8px 0;overflow-wrap:anywhere}
.rln-empty b{color:var(--txt)}
/* How many stops exist AT ALL, on the bar, so "nothing here" is never a mystery before you draw. */
.rln-pool{margin-left:10px;font:700 9.5px/1 var(--mono,ui-monospace,monospace);padding:3px 7px;
  border-radius:4px;color:var(--a-route);background:color-mix(in srgb,var(--a-route) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--a-route) 38%,transparent)}

/* #173 - the Stops tab. A register, not a dashboard: dense rows, one line per stop, and the two
   columns that carry a WARNING (no address, never serviced) reading differently from the rest. */
.sthd{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.stsearch{flex:1 1 260px;min-width:0;font-size:11.5px;padding:6px 9px;border-radius:6px;
  background:var(--bg2);border:1px solid var(--rule2);color:var(--txt)}
.stchips{display:flex;gap:5px;flex-wrap:wrap}
.stchip{display:inline-flex;align-items:center;gap:5px;font:700 10px/1 var(--mono,ui-monospace,monospace);
  padding:5px 8px;border-radius:5px;cursor:pointer;color:var(--txt2);background:var(--bg2);
  border:1px solid var(--rule)}
.stchip span{color:var(--txt3);font-weight:400}
.stchip:hover{border-color:var(--rule2)}
.stchip.on{color:var(--a-blot);border-color:var(--a-blot);background:color-mix(in srgb,var(--a-blot) 13%,transparent)}
.stchip.on span{color:var(--a-blot)}
.stscroll{overflow:auto;max-height:60vh;border:1px solid var(--rule);border-radius:8px}
.sttab{width:100%;border-collapse:separate;border-spacing:0;font-size:11px}
.sttab th,.sttab td{padding:6px 9px;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top}
.sttab thead th{position:sticky;top:0;z-index:2;background:var(--head);color:var(--txt3);
  font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.sttab tbody tr:hover{background:var(--hover)}
.stname a{color:var(--txt);font-weight:700;cursor:pointer;overflow-wrap:anywhere}
.stname a:hover{color:var(--a-blot);text-decoration:underline}
.stwc{display:inline-block;margin-left:5px;font-size:8.5px;font-weight:800;color:var(--a-driv)}
.storph{display:block;font-size:9px;color:var(--warn)}
/* A stop with no address cannot be routed at all — that is the #174 finding, surfaced per row. */
.stno{color:var(--warn)}
.stfreq{font-size:10.5px;padding:3px 5px;border-radius:4px;background:var(--bg2);
  border:1px solid var(--rule2);color:var(--txt)}
.stroute{color:var(--a-route);font-size:11px}
.stday{margin-left:5px;font:800 9px/1 var(--mono,ui-monospace,monospace);padding:2px 4px;border-radius:3px;
  color:var(--a-cover);background:color-mix(in srgb,var(--a-cover) 15%,transparent)}
.stst{font-size:9.5px;font-weight:800;padding:2px 6px;border-radius:4px;white-space:nowrap}
.st-active{color:var(--pos);background:color-mix(in srgb,var(--pos) 13%,transparent)}
.st-hold{color:var(--neg);background:color-mix(in srgb,var(--neg) 14%,transparent)}
.st-due{color:var(--warn);background:color-mix(in srgb,var(--warn) 15%,transparent)}
.st-inactive{color:var(--txt3);background:var(--hover)}
.stfoot{margin-top:8px;font-size:10.5px;line-height:1.6}
.stfoot b{color:var(--txt)}
.stnote{display:block;color:var(--txt3);font-size:9.5px;margin-top:3px}


.dupq{font-size:11px;color:var(--txt3);margin-bottom:8px}
.duplist{display:flex;flex-direction:column;gap:6px;max-height:34vh;overflow-y:auto}
.dupcard{display:flex;gap:9px;align-items:flex-start;padding:9px 11px;border:1px solid var(--rule);
  border-radius:8px;background:var(--bg2);cursor:pointer}
.dupcard:hover{border-color:var(--rule2)}
/* Selected has to beat hover, or picking one of three looks the same as pointing at it. */
.dupcard.on,.dupcard.on:hover{border-color:var(--a-route);background:var(--sel);box-shadow:inset 0 0 0 1px var(--a-route)}
.dupcard input{margin-top:3px;flex:0 0 auto}
.dupmain{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.duptop{display:flex;align-items:center;gap:8px}
.duptop b{font-size:12.5px;color:var(--txt);font-variant-numeric:tabular-nums}
.dupst{font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:2px 6px;
  border-radius:4px;background:var(--hover);color:var(--txt2);white-space:nowrap}
.dupsub{font-size:10.5px;color:var(--txt3);line-height:1.5;overflow-wrap:anywhere}
.duplines{font-size:11px;color:var(--txt2);line-height:1.6;overflow-wrap:anywhere}
/* #108 - adding to an order whose truck has already left: said in the card, before the button. */
.dupout{display:block;margin-top:5px;padding:5px 7px;border-radius:6px;font-size:11px;line-height:1.45;font-weight:600;
  color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,transparent);border:1px solid color-mix(in srgb,var(--warn) 40%,transparent)}
.dupnew{margin-top:11px;padding:9px 11px;border-radius:8px;border:1px dashed var(--rule2);
  background:var(--bg2);font-size:11px;color:var(--txt2);line-height:1.6;overflow-wrap:anywhere}
.dupnewhd{display:block;font-size:9.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--txt3);margin-bottom:3px}

/* ===================== tabs moved into the header row (reclaim a row) ===================== */
.topbar .tabs{height:100%;flex:1;min-width:0;border-bottom:none;background:none;padding:0 6px;margin:0;overflow-x:auto}
.topbar{gap:0}

/* ===================== Overview 7-metric row (moved from header) ===================== */
.g7ov{grid-template-columns:repeat(7,1fr)}
.g7ov .kpi{padding:9px 11px}
.g7ov .kpi .v{font-size:22px}
.g7ov .kpi .spark{transform:scale(.82);transform-origin:top right}
/* ===== redesigned Overview command deck ===== */
.kpiclick{cursor:pointer;transition:border-color .12s,transform .08s}
.kpiclick:hover{border-color:var(--ac);transform:translateY(-1px)}
.kpi-go{float:right;color:var(--ac);opacity:.7;font-size:10px}
.ovgrid{display:grid;grid-template-columns:1.55fr 1fr 1fr;gap:10px;height:calc(100% - 104px)}
.ovstack{display:flex;flex-direction:column;gap:10px;min-height:0}
.ovstack>.pane{flex:1;min-height:0;display:flex;flex-direction:column}
.ovstack>.pane>.pbody,.ovstack>.pane .pbody{overflow:auto}
.ovfleet{min-height:0;display:flex;flex-direction:column}
.ovfleet>.pbody{overflow:auto}
.ovatt{display:flex;align-items:center;gap:9px;padding:8px 11px;border-bottom:1px solid var(--rule);cursor:pointer}
.ovatt:hover{background:var(--hover)}
.ovatt-ic{width:24px;height:24px;border-radius:6px;display:grid;place-items:center;color:#06121e;font-size:13px;font-weight:800;flex:none}
.ovatt-b{flex:1;min-width:0}
.ovatt-t{font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ovatt-s{font-size:9.5px;color:var(--txt3)}
.ovatt-more{padding:9px 11px;font-size:10px;font-weight:700;color:var(--a-blot);cursor:pointer}
.ovatt-more:hover{background:var(--hover)}
.ovhub{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--rule)}
.ovhub:last-child{border-bottom:none}
.ovhub-code{width:34px;height:34px;border-radius:8px;background:var(--ac,var(--a-cover));color:var(--ink);display:grid;place-items:center;font-weight:800;font-size:12px;flex:none}
.ovhub-b{flex:1;min-width:0}.ovhub-name{font-size:11.5px;font-weight:700}
.ovrecap-top{font-size:11px;margin-bottom:6px}.ovrecap-wx{font-weight:800;color:var(--a-map)}
.ovrecap-big{font-size:13px;margin-bottom:10px}.ovrecap-big b{font-size:26px;color:var(--pos)}
.ovrecap-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.ovrecap-grid>div{background:var(--head);border:1px solid var(--rule);border-radius:7px;padding:7px 9px;display:flex;flex-direction:column;gap:2px}
.ovrecap-grid span{font-size:9px;color:var(--txt3);letter-spacing:.04em}
.ovrecap-grid b{font-size:15px}
.ovar-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;font-size:11px;border-bottom:1px solid var(--rule)}
.ovar-row b{font-variant-numeric:tabular-nums}
.ovar-cust{display:flex;justify-content:space-between;padding:4px 0;font-size:10.5px;cursor:pointer;border-bottom:1px solid var(--rule)}
.ovar-cust:hover{color:var(--a-feed)}

/* ===================== stop pins: number always + ✓ badge when done ===================== */
.stopmk{position:relative}
.stopmk.done{background:#06121e;border-color:var(--rc);color:var(--rc)}
.stopmk.done::after{content:'✓';position:absolute;top:-6px;right:-6px;width:12px;height:12px;border-radius:50%;background:var(--rc);color:#06121e;font-size:7.5px;font-weight:900;display:grid;place-items:center;border:1px solid #06121e}
/* ---- past-day actual stop outcomes (radar replay): delivered-late / cancelled / rolled over ---- */
.stopmk.late{background:#06121e;border-color:var(--warn);color:var(--warn);box-shadow:0 0 0 2px color-mix(in srgb,var(--warn) 55%,transparent)}
.stopmk.late::after{content:'!';position:absolute;top:-6px;right:-6px;width:12px;height:12px;border-radius:50%;background:var(--warn);color:#06121e;font-size:8px;font-weight:900;display:grid;place-items:center;border:1px solid #06121e}
.stopmk.cancel{background:var(--neg);border-color:var(--neg);color:#fff;font-weight:900}
.stopmk.roll{background:#0a1622;border-style:dashed;border-color:var(--txt3);color:var(--txt3);opacity:.6}
/* clicked-stop highlight ring on the dispatch map */
/* #109 - the focused stop's own pin: bigger, white-rimmed, haloed, so it reads without the ring's beat */
.stopmk.stopmk-focus{width:32px;height:32px;font-size:13px;border-width:3px;border-color:#fff;background:var(--rc);color:#06121e;
  box-shadow:0 0 0 3px var(--rc),0 0 18px 4px color-mix(in srgb,var(--rc) 70%,transparent);animation:none}
.stop-hl{width:52px;height:52px;border-radius:50%;border:3px solid var(--rc,#fff);box-shadow:0 0 0 3px color-mix(in srgb,var(--rc,#fff) 30%,transparent),0 0 16px color-mix(in srgb,var(--rc,#fff) 55%,transparent);animation:stophl 1.3s ease-out infinite}
@keyframes stophl{0%{transform:scale(.55);opacity:1}70%{transform:scale(1);opacity:.5}100%{transform:scale(1.05);opacity:0}}

/* ===================== important headings pop in the current theme color ===================== */
.ph h3{font-size:12px;color:var(--ac,var(--a-map));font-weight:800}
.ph h3 .acc{width:8px;height:8px}
.opsh{color:var(--ac,var(--a-map));font-size:10.5px}
.insp-sec{color:var(--ac,var(--a-map));font-size:10px}
.dw-kind,.stmt-hd .dw-kind{color:var(--ac,var(--a-feed))}
.ctbucket-hd,.billbar{font-size:10px}

/* ===================== Route Lists: 2-col default, map below stops ===================== */
.rlwrap{display:grid;grid-template-columns:288px 1fr;gap:10px;height:100%}
.rl-split{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.rl-split .pbody{flex:0 1 auto;overflow:auto;min-height:80px;max-height:40%}   /* list sizes to content/caps → map fills the rest */
.rlmap{flex:1;min-height:260px;border-top:1px solid var(--rule);background:#06121e}
.rl3 .rlmap{min-height:240px}

/* ===================== Customers: search bar · accordion · global search ===================== */
.custbar{display:flex;align-items:center;gap:8px;padding:7px 10px;border-bottom:1px solid var(--rule);background:var(--head);flex:none}
.custbar input,.custbar select{background:var(--pane2);border:1px solid var(--rule2);color:var(--txt);border-radius:5px;padding:5px 8px;font:inherit;font-size:11px}
.custbar #custSearch{flex:1;max-width:340px}
tr.custrow{cursor:pointer}
tr.custexp>td{background:var(--bg2);padding:0}
.custexp-in{padding:11px 14px}
.locrow{display:flex;align-items:center;gap:10px;padding:4px 0;border-bottom:1px solid var(--rule);font-size:10.5px}
.locrow:last-child{border-bottom:none}
.gsearch{background:var(--pane);border:1px solid var(--rule2);color:var(--txt);border-radius:6px;padding:5px 9px;font:inherit;font-size:11px;width:170px}
.gsearch:focus{outline:none;border-color:var(--a-map);width:230px}

/* --- stop order-id tags (Control Tower stop list) --- */
.oidtag{display:inline-block;font:700 10px/1 ui-monospace,monospace;letter-spacing:.4px;
  color:var(--a-blot,#62d0ff);border:1px solid color-mix(in srgb,var(--a-blot,#62d0ff) 55%,transparent);
  background:color-mix(in srgb,var(--a-blot,#62d0ff) 14%,transparent);padding:3px 6px;border-radius:5px;white-space:nowrap}
.ctstoptbl .rtn{font:600 9.5px/1 ui-monospace,monospace;letter-spacing:.5px;color:var(--dim,#7790a0);
  text-transform:uppercase;opacity:.65}
/* recurring-service order ids (RS-) read calmer than special/call-in (SO-) */
.oidtag.rec{color:#86e0b0;border-color:color-mix(in srgb,#86e0b0 50%,transparent);background:color-mix(in srgb,#86e0b0 12%,transparent)}

/* ===== heading "pop" chips — filled theme-accent background, like the LIVE FEED label ===== */
.hpop{display:inline-flex;align-items:center;gap:6px;background:var(--ac,var(--a-map));color:var(--ink);
  padding:3px 9px;border-radius:5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;line-height:1.3;font-size:11px}
.hpop .n,.hpop small{background:rgba(0,0,0,.22);color:var(--ink);border-radius:7px;padding:0 6px;font-size:9px;font-weight:800}
.hpop .sub{background:none;color:var(--ink);opacity:.78;font-weight:600;letter-spacing:.02em;text-transform:none;font-size:9.5px}
/* every panel header is fully filled with the SINGLE theme accent (consistent across all tabs/screens —
   the theme's signature color sticks everywhere instead of a different hue per pane) */
.pane>.ph,.ph{background:var(--a-map);border-bottom-color:rgba(0,0,0,.28)}
.pane>.ph h3,.ph h3{background:none;color:var(--ink);padding:0;border-radius:0;
  font-weight:800;letter-spacing:.1em;font-size:11px}
.ph .meta{color:var(--ink);opacity:.82}
.ph h3 .acc{display:none}
/* Control Tower "Routes" header (.opsh) + Unscheduled bucket header → same full-bar fill as every .ph */
.opsh{background:var(--a-map);border-bottom:1px solid rgba(0,0,0,.28);color:var(--ink)}
.opsh .hpop{background:transparent;color:var(--ink);padding:0;border-radius:0;box-shadow:none}
.opsh .hpop .sub{color:var(--ink);opacity:.82}
.opsh .n{background:rgba(0,0,0,.24);color:var(--ink)}
.ctbucket-hd{background:var(--a-map);border-bottom:1px solid rgba(0,0,0,.28);color:var(--ink)}
.ctbucket-hd .hpop{background:transparent;color:var(--ink);padding:0;border-radius:0;box-shadow:none}
.ctbucket-hd .dim{color:var(--ink);opacity:.78}
.ctbucket-hd .n{background:rgba(0,0,0,.24);color:var(--ink)}

/* DARK themes: the full-strength neon accent fill on every header reads too hot. Use a restrained
   accent-TINTED bar with normal light text + a small per-pane accent dot for identity. Light themes
   keep the solid fill above (near-black ink stays legible on the brighter light-theme accent). */
html:not(.theme-light) .pane>.ph,
html:not(.theme-light) .ph,
html:not(.theme-light) .opsh,
html:not(.theme-light) .ctbucket-hd{
  background:color-mix(in srgb,var(--a-map) 11%,var(--pane));
  border-bottom:1px solid color-mix(in srgb,var(--a-map) 24%,var(--rule))}
html:not(.theme-light) .pane>.ph h3,
html:not(.theme-light) .ph h3{color:var(--txt)}
html:not(.theme-light) .ph .meta{color:var(--txt2);opacity:1}
html:not(.theme-light) .ph h3 .acc{display:inline-block;background:var(--ac,var(--a-map))}
html:not(.theme-light) .opsh,
html:not(.theme-light) .ctbucket-hd,
html:not(.theme-light) .opsh .hpop,
html:not(.theme-light) .ctbucket-hd .hpop{color:var(--txt)}
html:not(.theme-light) .opsh .hpop .sub,
html:not(.theme-light) .ctbucket-hd .dim{color:var(--txt2);opacity:1}
html:not(.theme-light) .opsh .n,
html:not(.theme-light) .ctbucket-hd .n{background:color-mix(in srgb,var(--a-map) 20%,transparent);color:var(--txt)}

/* ===== header tabs: priority-nav overflow — keep natural width, fold extras into More (reflowTabs) ===== */
.topbar .tabs{overflow:hidden;flex-wrap:nowrap;padding:0 6px;gap:0}
.topbar .tabs .tab{flex:none;padding:0 10px;gap:5px;white-space:nowrap}
.topbar .tabs .tab .kc{display:none}            /* drop number keycaps to reclaim width */
.searchbtn{background:var(--pane);border:1px solid var(--rule2);color:var(--txt2);border-radius:6px;
  height:26px;width:30px;display:grid;place-items:center;font-size:13px;cursor:pointer}
.searchbtn:hover{color:var(--ink);background:var(--a-map);border-color:transparent}
.searchov{position:fixed;inset:0;z-index:1450;background:rgba(2,8,12,.62);backdrop-filter:blur(3px);
  display:none;align-items:flex-start;justify-content:center;padding-top:11vh}
.searchov.on{display:flex}
.searchov-box{width:min(680px,92vw);background:var(--bg2,#0c151b);border:1px solid var(--rule2);border-radius:12px;
  box-shadow:0 24px 70px rgba(0,0,0,.6);overflow:hidden}
.searchov-top{display:flex;align-items:center;gap:9px;padding:12px 14px;border-bottom:1px solid var(--rule)}
.searchov-ic{font-size:15px;opacity:.8}
#searchOvInput{flex:1;background:none;border:none;outline:none;color:var(--txt);font:inherit;font-size:15px}
.searchov-res{max-height:54vh;overflow:auto;padding:6px}
.searchov-res .sov-sec{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt3);padding:9px 10px 4px}
.searchov-res .sov-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:7px;cursor:pointer}
.searchov-res .sov-row:hover{background:var(--hover)}
.searchov-res .sov-row b{font-size:12px}
.searchov-res .sov-row .sov-meta{color:var(--txt3);font-size:10.5px;margin-left:auto;font-family:ui-monospace,monospace}
.sov-empty{padding:22px;text-align:center;color:var(--txt3);font-size:11.5px}
.searchov-hint{display:flex;gap:16px;justify-content:flex-end;padding:8px 14px;border-top:1px solid var(--rule);color:var(--txt3);font-size:10px}

/* ===== Customers blotter split (list left · detail right, autoiq-style) ===== */
.custsplit{display:flex;gap:10px;height:100%}
.custsplit .custleft{flex:1;min-width:0;height:100%;display:flex;flex-direction:column}
.custright{position:relative;flex:0 0 clamp(440px,46vw,660px);width:auto;background:var(--pane);border:1px solid var(--rule);border-radius:8px;overflow:auto;display:flex;flex-direction:column}
/* full-width list until a row is picked → then the detail panel slides in with a close ✕ */
.custsplit.solo .custright{display:none}
.custtbl .cust-addr{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* extra columns show in full-width browse; hidden when a customer is open so the narrow list stays clean.
   cols now: 1 Customer · 2 Area · 3 Home DC · 4 Phone · 5 Stops · 6 Tier · 7 Last order · 8 Status · 9 Balance —
   in narrow mode keep Customer, Home DC, Tier, Last order, Status, Balance (hide Area, Phone, Stops). */
.custsplit:not(.solo) .custtbl th:nth-child(2),.custsplit:not(.solo) .custtbl td:nth-child(2),
.custsplit:not(.solo) .custtbl th:nth-child(4),.custsplit:not(.solo) .custtbl td:nth-child(4),
.custsplit:not(.solo) .custtbl th:nth-child(5),.custsplit:not(.solo) .custtbl td:nth-child(5){display:none}
/* Home-DC chip in the customer list */
.dc-chip{display:inline-flex;align-items:center;gap:4px;font:700 10px/1.4 var(--mono);letter-spacing:.04em;color:var(--txt2);background:color-mix(in srgb,var(--a-map) 12%,transparent);border:1px solid color-mix(in srgb,var(--a-map) 32%,var(--rule));border-radius:6px;padding:1px 7px}
.dc-flex{font-size:10px;color:var(--a-map);opacity:.85}
.dc-lock{font-size:8px;opacity:.7}

/* ---- #6 churn radar (Customers) ---- */
.churn-radar{flex:none;padding:8px 10px;border-bottom:1px solid var(--rule);background:var(--head);display:flex;flex-direction:column;gap:7px}
.cr-head{display:flex;align-items:center;gap:8px;font-size:11px;flex-wrap:wrap}
.cr-ic{font-size:13px}
.cr-ttl{font:800 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--txt2)}
.cr-sum{color:var(--txt2);font-size:11px}
.cr-season{margin-left:auto;font:700 9px/1 var(--mono);letter-spacing:.04em;color:var(--txt3);border:1px solid var(--rule2);border-radius:999px;padding:3px 8px;white-space:nowrap}
.cr-pills{display:flex;gap:6px;flex-wrap:wrap}
.cr-pill{background:var(--pane2);border:1px solid var(--rule2);color:var(--txt2);border-radius:999px;padding:3px 10px;font:600 10px/1.4 var(--mono);cursor:pointer;transition:.12s;display:inline-flex;align-items:center;gap:5px}
.cr-pill b{font-weight:800}
.cr-pill:hover{filter:brightness(1.12)}
.cr-pill.on{background:color-mix(in srgb,var(--a-over) 20%,transparent);border-color:var(--a-over);color:var(--txt)}
.cr-pill.ch-warn.on{background:color-mix(in srgb,var(--warn) 22%,transparent);border-color:var(--warn);color:var(--txt)}
.cr-pill.ch-crit.on{background:color-mix(in srgb,var(--neg) 22%,transparent);border-color:var(--neg);color:var(--txt)}
.chip-churn{display:inline-block;font:700 9px/1.4 var(--mono);letter-spacing:.03em;padding:2px 8px;border-radius:999px;border:1px solid;white-space:nowrap}
.chip-churn.ch-crit{color:var(--neg);border-color:color-mix(in srgb,var(--neg) 55%,transparent);background:color-mix(in srgb,var(--neg) 13%,transparent)}
.chip-churn.ch-warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 55%,transparent);background:color-mix(in srgb,var(--warn) 13%,transparent)}
.chip-churn.ch-due{color:var(--a-driv);border-color:color-mix(in srgb,var(--a-driv) 45%,transparent);background:color-mix(in srgb,var(--a-driv) 10%,transparent)}
.chip-churn.ch-ok{color:var(--pos);border-color:color-mix(in srgb,var(--pos) 40%,transparent);background:color-mix(in srgb,var(--pos) 10%,transparent)}
.custtbl tr.churn-crit{box-shadow:inset 3px 0 0 var(--neg)}
.custtbl tr.churn-warn{box-shadow:inset 3px 0 0 var(--warn)}
/* #10 asset-ROI status chips (reuse .chip-churn base) */
.chip-churn.roi-dead{color:var(--neg);border-color:color-mix(in srgb,var(--neg) 55%,transparent);background:color-mix(in srgb,var(--neg) 13%,transparent)}
.chip-churn.roi-atr{color:var(--a-assign,#b78bff);border-color:color-mix(in srgb,var(--a-assign,#b78bff) 50%,transparent);background:color-mix(in srgb,var(--a-assign,#b78bff) 12%,transparent)}
.chip-churn.roi-thin{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 50%,transparent);background:color-mix(in srgb,var(--warn) 12%,transparent)}
.chip-churn.roi-ok{color:var(--pos);border-color:color-mix(in srgb,var(--pos) 40%,transparent);background:color-mix(in srgb,var(--pos) 10%,transparent)}
tr.roi-row-dead{box-shadow:inset 3px 0 0 var(--neg)}
.cd-churn{display:flex;align-items:center;gap:10px;padding:9px 13px;border-bottom:1px solid var(--rule);font-size:11px;color:var(--txt2);flex-wrap:wrap;line-height:1.5}
.cd-churn.ch-crit{background:color-mix(in srgb,var(--neg) 8%,transparent)}
.cd-churn.ch-warn{background:color-mix(in srgb,var(--warn) 8%,transparent)}
.cd-churn.ch-due{background:color-mix(in srgb,var(--a-driv) 7%,transparent)}
.cd-churn b{color:var(--txt)}
.cd-churn b.neg{color:var(--neg)}
.cd-churn-act{margin-left:auto;background:var(--a-over);color:var(--ink);border:none;border-radius:6px;padding:5px 11px;font:700 10px/1 var(--mono);cursor:pointer;white-space:nowrap}
.cd-churn-act:hover{filter:brightness(1.08)}
.cd-wh{display:flex;align-items:center;gap:9px;padding:8px 13px;border-bottom:1px solid var(--rule);font-size:11px;color:var(--txt2);line-height:1.5}
.cd-wh-ic{font-size:13px}
.cd-wh b{color:var(--txt)}
.cd-close{position:absolute;top:9px;right:11px;z-index:6;background:var(--pane2);border:1px solid var(--rule);border-radius:6px;width:24px;height:24px;color:var(--txt2);font-size:12px;cursor:pointer;display:grid;place-items:center}
.cd-close:hover{color:var(--neg);border-color:var(--neg)}
.custrow{cursor:pointer}
.custrow.sel td{background:color-mix(in srgb,var(--a-over) 16%,transparent)}
.custrow.sel td:first-child{box-shadow:inset 3px 0 0 var(--a-over)}
.cd-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:13px 13px 11px;border-bottom:1px solid var(--rule)}
.cd-name{font-size:15px;font-weight:800;letter-spacing:.01em}
.cd-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border-bottom:1px solid var(--rule)}
.cd-kpi{background:var(--pane);padding:8px 6px;display:flex;flex-direction:column;gap:3px;align-items:center}
.cd-kpi span{font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt3)}
.cd-kpi b{font-size:13px;font-family:ui-monospace,monospace}
.cd-acts{display:flex;gap:6px;padding:11px 13px;border-bottom:1px solid var(--rule);flex-wrap:wrap}
.cd-body{padding:6px 13px 16px}
.cd-none{font-size:10.5px;padding:3px 2px 6px}
.cd-actor{font-size:9px;font-weight:800;letter-spacing:.04em;padding:1px 5px;border-radius:4px;min-width:46px;text-align:center}
.cd-actor.a-you{background:color-mix(in srgb,var(--a-map) 22%,transparent);color:var(--a-map)}
.cd-actor.a-copilot{background:color-mix(in srgb,var(--a-blot) 22%,transparent);color:var(--a-blot)}
.cd-actor.a-system{background:color-mix(in srgb,var(--txt3) 24%,transparent);color:var(--txt2)}
.custright .insp-sec{margin-top:13px}
/* customer / order detail tabs (replace stacked lists → tabbed, no long scroll) */
.cdtabs{display:flex;gap:2px;padding:8px 10px 0;border-bottom:1px solid var(--rule);position:sticky;top:0;background:var(--pane);z-index:2;flex-wrap:nowrap;overflow-x:auto}
.cdtab{appearance:none;background:transparent;border:1px solid transparent;border-bottom:none;color:var(--txt3);font:inherit;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:6px 9px;border-radius:6px 6px 0 0;cursor:pointer;display:inline-flex;align-items:center;gap:5px;margin-bottom:-1px}
.cdtab:hover{color:var(--txt2);background:var(--hover)}
.cdtab.on{color:var(--ink);background:var(--a-map);border-color:transparent}
.cdtab-n{font-size:8.5px;font-weight:800;padding:0 5px;border-radius:7px;background:color-mix(in srgb,var(--txt3) 26%,transparent);color:var(--txt2)}
.cdtab.on .cdtab-n{background:rgba(0,0,0,.24);color:var(--ink)}
.custright .cd-body .insp-sec:first-child{margin-top:4px}
/* areas: custom color picker chip */
.afcustom{display:inline-flex;align-items:center;gap:5px;cursor:pointer;border:1px dashed var(--rule2);border-radius:5px;padding:3px 7px;font-size:9.5px;font-weight:700;color:var(--txt2);height:22px}
.afcustom:hover{border-color:var(--a-cover);color:var(--txt)}
.afcustom input[type=color]{width:18px;height:18px;padding:0;border:none;background:none;cursor:pointer}
.afcustom input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.afcustom input[type=color]::-webkit-color-swatch{border:1px solid var(--rule2);border-radius:4px}
/* prominent action button that sits inside a filled .ph header bar */
.ph-act{appearance:none;background:var(--ink);color:var(--pa,var(--ac,var(--a-route)));border:1px solid color-mix(in srgb,var(--pa,var(--ac,var(--a-route))) 34%,transparent);border-radius:7px;font:inherit;font-size:10px;font-weight:800;letter-spacing:.05em;padding:5px 11px;cursor:pointer;white-space:nowrap;box-shadow:0 2px 5px -2px rgba(0,0,0,.5);transition:background .12s,color .12s,transform .04s}
.ph-act:hover{background:var(--pa,var(--ac,var(--a-route)));color:var(--ink);border-color:transparent}
.ph-act:active{transform:translateY(1px)}
/* ===== Equipment module (asset management) ===== */
/* Firm, solid action buttons for the equipment move/custody modals + in-flight panel (--eb sets accent). */
.eq-btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:var(--eb,var(--a-driv));color:#04121a;border:1px solid transparent;border-radius:9px;
  font:inherit;font-size:12.5px;font-weight:800;letter-spacing:.01em;padding:10px 18px;cursor:pointer;
  white-space:nowrap;box-shadow:0 3px 10px -3px rgba(0,0,0,.55);transition:filter .12s,transform .04s,box-shadow .12s}
.eq-btn:hover{filter:brightness(1.08);box-shadow:0 5px 14px -4px rgba(0,0,0,.6)}
.eq-btn:active{transform:translateY(1px)}
.eq-btn.sm{font-size:11.5px;padding:7px 13px;border-radius:8px}
.eq-btn.ghost{background:transparent;color:var(--eb,var(--txt2));border-color:color-mix(in srgb,var(--eb,var(--rule2)) 55%,transparent);box-shadow:none}
.eq-btn.ghost:hover{background:color-mix(in srgb,var(--eb,var(--a-map)) 16%,transparent);filter:none}
.eqwrap{display:flex;flex-direction:column;height:100%}
.eqhdr{display:flex;align-items:center;gap:14px;row-gap:6px;flex-wrap:wrap;padding:9px 13px;background:var(--head);border:1px solid var(--rule);border-radius:9px;flex:none}
.eq-brand{font-size:14px;font-weight:800;letter-spacing:.04em;color:var(--a-feed);white-space:nowrap}
.eqnav{display:flex;gap:3px;max-width:100%;min-width:0;overflow-x:auto;scrollbar-width:thin}
.eqtab{appearance:none;background:transparent;border:none;color:var(--txt3);font:inherit;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:6px 12px;border-radius:7px;cursor:pointer;white-space:nowrap;flex:none}
.eqtab:hover{color:var(--txt);background:var(--hover)}
.eqtab.on{background:var(--a-map);color:var(--ink)}
.eqmain{display:flex;gap:10px;flex:1;min-height:0;margin-top:10px}
.eqkpis{display:flex;flex-direction:column;gap:8px;width:208px;flex:none;overflow:auto}
.eqkpis .kpi{flex:none}
.eqbody{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}
.eqbody-scroll{overflow:auto}
/* ---- Metrics tab: KPIs row + pie/bar charts (all drill into a modal) ---- */
.eqmetrics{display:flex;flex-direction:column;gap:12px}
.eqmetrics .eqkpis{flex-direction:row;width:auto;flex-wrap:wrap;gap:8px}
.eqmetrics .eqkpis .kpi{flex:1 1 150px;min-width:150px}
.eqcharts{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.eqchart{border:1px solid var(--rule);border-radius:10px;background:var(--pane);padding:11px 12px;overflow:hidden;min-width:0}
.eqchart-wide{grid-column:1/-1}
.eqchart-h{font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--txt3);margin-bottom:9px}
.eqchart-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.eqpie{flex:none;filter:drop-shadow(0 2px 5px rgba(0,0,0,.4))}
.eqlegend2{display:flex;flex-direction:column;gap:4px;font-size:10.5px;flex:1 0 auto}
.eqlegend2 span{display:flex;align-items:center;gap:6px;cursor:pointer;padding:2px 4px;border-radius:5px;white-space:nowrap}
.eqlegend2 span:hover{background:var(--hover)}
.eqlegend2 i{width:10px;height:10px;border-radius:3px;flex:none}
.eqlegend2 b{margin-left:auto;color:var(--txt)}
.eqbars{display:flex;flex-direction:column;gap:6px}
.eqbar{display:flex;align-items:center;gap:8px;cursor:pointer;padding:2px 3px;border-radius:5px;font-size:10.5px}
.eqbar:hover{background:var(--hover)}
.eqbar-l{width:96px;flex:none;color:var(--txt2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eqbar-t{flex:1;height:11px;background:var(--rule2);border-radius:6px;overflow:hidden}
.eqbar-t i{display:block;height:100%;border-radius:6px}
.eqbar-v{width:62px;flex:none;text-align:right;font-family:var(--mono,monospace);font-weight:700;color:var(--txt)}
.eqdrill-ov{position:fixed;inset:0;background:rgba(4,9,14,.62);backdrop-filter:blur(3px);z-index:6000;display:none;align-items:center;justify-content:center}
.eqdrill-ov.on{display:flex}
.eqdrill{width:min(720px,92vw);max-height:80vh;display:flex;flex-direction:column;background:var(--panel,#0c1824);border:1px solid var(--rule);border-radius:12px;box-shadow:0 24px 70px -20px #000;overflow:hidden}
.eqdrill-hd{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--rule);font-size:13px}
.eqdrill-bd{overflow:auto;padding:6px 10px 12px}
/* ---- E2: asset photos + chain-of-custody timeline + replay ---- */
.eq-photos{display:flex;gap:6px;flex-wrap:wrap;padding:4px 0 2px}
.eq-thumb{width:62px;height:47px;object-fit:cover;border-radius:5px;border:1px solid var(--rule2);cursor:pointer;transition:transform .1s}
.eq-thumb:hover{transform:scale(1.06);border-color:var(--a-feed)}
.eq-timeline{display:flex;flex-direction:column;gap:0;padding:2px 0 4px}
.eq-tl{display:flex;gap:9px;position:relative;padding:0 0 11px 2px}
.eq-tl:not(:last-child)::before{content:'';position:absolute;left:5px;top:11px;bottom:0;width:1px;background:var(--rule2)}
.eq-tl-dot{flex:none;width:9px;height:9px;border-radius:50%;margin-top:3px;box-shadow:0 0 0 2px var(--pane);z-index:1}
.eq-tl-act{font-size:11px;font-weight:600;color:var(--txt)}
.eq-tl-meta{font-size:9px;color:var(--txt3);margin-top:1px}
.eq-replaymk{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--rc);color:#04121e;font-size:13px;font-weight:900;box-shadow:0 0 0 4px color-mix(in srgb,var(--rc) 35%,transparent),0 2px 8px rgba(0,0,0,.6)}
/* ---- E3: Equipment Request ---- */
.eqreq-badge{display:inline-block;font:800 7.5px/1.4 var(--mono,monospace);letter-spacing:.04em;color:var(--c);background:color-mix(in srgb,var(--c) 18%,transparent);border:1px solid color-mix(in srgb,var(--c) 50%,transparent);border-radius:3px;padding:1px 4px;vertical-align:middle;white-space:nowrap;margin-left:3px}
/* designation chips (#4) — order type + priority tags on dispatch stops/backlog */
.dchip{display:inline-block;font:800 8px/1.2 var(--mono,monospace);padding:1px 4px;border-radius:4px;margin-left:3px;vertical-align:middle;white-space:nowrap;border:1px solid #ffffff22;background:#1e2a38;color:#cfe}
.dchip.d-timed{background:#3a2d10;color:#ffd27a;border-color:#ffd27a66}
.dchip.d-sculp{background:#2c1838;color:#e9a8ff;border-color:#e9a8ff66}
.dchip.d-equip{background:#10303a;color:#7fe3ff;border-color:#7fe3ff66}
.dchip.d-xfer{background:#10331f;color:#7df0a8;border-color:#7df0a866}
.dchip.d-seas{background:#33300f;color:#f5e27a;border-color:#f5e27a66}
.dchip.tier-A{background:#3a1020;color:#ff8aa6;border-color:#ff8aa6aa}
.dchip.tier-B{background:#241a3a;color:#b3a6ff;border-color:#b3a6ffaa}
.dchip.tier-C{background:#21333a;color:#8ad0ff;border-color:#8ad0ffaa}
/* #2 route overlap warning */
.confpill{cursor:pointer}.confpill .neg{color:var(--neg,#ff6b8a)}
.conflbar{margin:0 0 6px;padding:6px 9px;border:1px solid color-mix(in srgb,#ff6b8a 45%,transparent);background:color-mix(in srgb,#ff6b8a 10%,transparent);border-radius:7px}
.confl-hd{font-weight:800;color:#ffb3c2;margin-bottom:4px;font-size:10px}
.confl-row{display:flex;align-items:center;gap:6px;padding:2px 0;font-size:10px}
/* overlaps/exceptions moved into a narrow right "Alerts" column (preserve board height) */
.ctalerts{flex:0 0 212px;display:flex;flex-direction:column;overflow:hidden;min-height:0;background:#0c1620;border:1px solid #ffffff14;border-radius:8px}
.ctalerts .ph{display:flex;align-items:center;justify-content:space-between;padding:6px 9px;flex:0 0 auto}
.alerts-body{overflow:auto;padding:7px;display:flex;flex-direction:column;gap:8px}
.alerts-body .conflbar,.alerts-body .excbar{margin:0;padding:7px}
.alerts-body .confl-row{display:flex;flex-direction:column;align-items:stretch;gap:2px;padding:5px 0;border-bottom:1px solid #ffffff10}
.alerts-body .cr-routes{font-size:10px;font-weight:700}
.alerts-body .cr-det{font-size:9px;color:var(--dim);line-height:1.3}
.alerts-body .cr-acts{display:flex;gap:4px;margin-top:3px;flex-wrap:wrap}
.alerts-body .confl-go{margin:3px 0 0}
.confl-hd.ok{color:var(--pos,#41f0ad)}
.confl-go{margin-left:auto;font:700 9px/1 var(--mono,monospace);background:#ff6b8a22;color:#ffb3c2;border:1px solid #ff6b8a55;border-radius:4px;padding:2px 6px;cursor:pointer}
.confl-go:hover{background:#ff6b8a44}
.confl-ring{width:30px;height:30px;border-radius:50%;border:2.5px solid #ff6b8a;box-shadow:0 0 10px #ff6b8a99;animation:conflpulse 1.4s ease-in-out infinite}
@keyframes conflpulse{0%,100%{transform:scale(.7);opacity:.5}50%{transform:scale(1);opacity:1}}
/* #11 category filter bar */
.catbar{display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding:4px 0 6px}
.catbar-lbl{font:700 9px/1 var(--mono,monospace);color:var(--dim);margin-right:2px}
.catchip{font:700 9px/1 var(--mono,monospace);background:#1b2734;color:#bcd;border:1px solid #ffffff1f;border-radius:5px;padding:3px 6px;cursor:pointer;white-space:nowrap}
.catchip:hover{border-color:var(--a-blot,#62d0ff)}
.catchip.on{background:var(--a-blot,#62d0ff);color:#04121d;border-color:transparent}
.catchip b{font-weight:800}
.catchip.clr{background:#3a1020;color:#ff8aa6}
.ctstop-row.cat-dim{opacity:.28}
/* #5 multi-select stop bulk bar */
.stopbulk{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:5px 8px;background:color-mix(in srgb,var(--a-blot,#62d0ff) 12%,transparent);border-bottom:1px solid var(--rule2,#ffffff14);font-size:10px}
.stopbulk b{color:var(--a-blot,#62d0ff)}
.stopbulk select,.stopbulk input[type=date]{background:#10202c;color:#cfe;border:1px solid #ffffff22;border-radius:4px;font-size:10px;padding:1px 3px}
.sb-act{font:700 9px/1 var(--mono,monospace);background:var(--a-blot,#62d0ff);color:#04121d;border:none;border-radius:4px;padding:3px 7px;cursor:pointer}
.sb-clr{margin-left:auto;font:700 9px/1 var(--mono,monospace);background:#3a1020;color:#ff8aa6;border:1px solid #ff6b8a55;border-radius:4px;padding:3px 6px;cursor:pointer}
input.stopsel{margin-right:4px;vertical-align:middle;cursor:pointer}
/* #6 route reassign / move popover */
.rmenu-btn{background:none;border:none;color:var(--dim);cursor:pointer;font-size:13px;line-height:1;padding:0 3px;border-radius:3px}
.rmenu-btn:hover{color:#fff;background:#ffffff14}
.rmenu{position:fixed;z-index:9999;background:#0e1b26;border:1px solid var(--rule2,#ffffff22);border-radius:8px;padding:9px;width:214px;box-shadow:0 8px 24px #000a;font-size:10px;display:flex;flex-direction:column;gap:6px}
.rmenu-hd{font-weight:800;font-size:11px}
.rmenu label{display:flex;flex-direction:column;gap:2px;color:var(--dim)}
.rmenu select,.rmenu input{background:#10202c;color:#cfe;border:1px solid #ffffff22;border-radius:4px;font-size:10px;padding:2px 4px}
.rmenu-row{display:flex;gap:6px;margin-top:2px}
/* #1 multi-select routes */
.rsel-lbl{display:inline-flex;align-items:center;cursor:pointer}
input.rsel{cursor:pointer;vertical-align:middle;margin:0}
.cmp-chip{font:700 9px/1 var(--mono,monospace);background:var(--a-route,#9ad0ff);color:#04121d;border:none;border-radius:5px;padding:3px 6px;cursor:pointer;margin-right:6px}
/* #10 skip/cancel + exceptions */
.skipbtn{background:color-mix(in srgb,#ffb454 12%,transparent);border:1px solid color-mix(in srgb,#ffb454 45%,transparent);color:#ffb454;cursor:pointer;font:700 9px/1 var(--mono,monospace);letter-spacing:.02em;padding:3px 6px;border-radius:5px;opacity:.92;white-space:nowrap;margin-right:4px}
.skipbtn:hover{opacity:1;background:#ffb454;color:#1a1206;border-color:transparent}
.excbar{margin:0 0 6px;padding:6px 9px;border:1px solid color-mix(in srgb,#ffd27a 45%,transparent);background:color-mix(in srgb,#ffd27a 9%,transparent);border-radius:7px}
.skipmenu .skip-opt{text-align:left;font:600 10px/1.2 var(--mono,monospace);background:#13212c;color:#dce;border:1px solid #ffffff1a;border-radius:5px;padding:5px 7px;cursor:pointer}
.skipmenu .skip-opt:hover{border-color:#ffb454;color:#fff}
.skipmenu .skip-opt.cancel{color:#ff8aa6;border-color:#ff6b8a44}
.dchip.d-age{background:#2a2a10;color:#e8d27a;border-color:#e8d27a66}
/* #7 operator scope + #3 vehicle-load fit */
#opSel{background:#10202c;color:#cfe;border:1px solid #ffffff22;border-radius:4px;font-size:10px;padding:1px 3px}
.fit{font:700 9px/1 var(--mono,monospace);padding:2px 5px;border-radius:4px;white-space:nowrap;background:rgba(0,0,0,.32)}
.fit.ok{color:var(--pos)}
.fit.bad{color:var(--warn)}
.rmenu-fit{font:700 9px/1.3 var(--mono,monospace);padding:4px 6px;border-radius:5px;text-align:center}
.rmenu-fit.ok{background:color-mix(in srgb,var(--pos) 14%,transparent);color:var(--pos)}
.rmenu-fit.bad{background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--warn)}
/* quality multi-select checkboxes + side-by-side route compare (#1) */
input.rsel,input.stopsel{appearance:none;-webkit-appearance:none;width:16px;height:16px;border:1.6px solid #5a7184;border-radius:4px;background:#0e1b26;cursor:pointer;position:relative;flex:none;margin:0;vertical-align:middle;transition:background .12s,border-color .12s,box-shadow .12s}
input.stopsel{margin-right:4px}
input.rsel:hover,input.stopsel:hover{border-color:var(--a-route,#9ad0ff);box-shadow:0 0 0 3px #9ad0ff22}
input.rsel:checked{background:var(--a-route,#9ad0ff);border-color:var(--a-route,#9ad0ff)}
input.stopsel:checked{background:var(--a-blot,#62d0ff);border-color:var(--a-blot,#62d0ff)}
input.rsel:checked::after,input.stopsel:checked::after{content:'';position:absolute;left:4.5px;top:1px;width:4px;height:8px;border:solid #04121d;border-width:0 2px 2px 0;transform:rotate(45deg)}
.multistops{display:flex;gap:8px;height:100%;overflow:auto;padding:5px}
.mscol{flex:1 1 0;min-width:150px;background:#0c1620;border:1px solid #ffffff14;border-radius:7px;display:flex;flex-direction:column;overflow:hidden}
.mscol-hd{padding:6px 8px;border-bottom:2px solid var(--rc);background:#0e1b26}
.mscol-hd b{font-size:11px}
.mscol-body{overflow:auto}
.msrow{display:flex;align-items:center;gap:5px;padding:3px 8px;font-size:10px;border-bottom:1px solid #ffffff0a;cursor:pointer}
.msrow:hover{background:#ffffff0d}
.msrow.done{opacity:.5}.msrow.next{background:#ffc24d18}
.msrow.focus{background:color-mix(in srgb,var(--a-blot,#62d0ff) 26%,transparent);box-shadow:inset 3px 0 0 var(--a-blot,#62d0ff);outline:2px solid var(--a-blot,#62d0ff);outline-offset:-2px}
.msnum{font-weight:800;min-width:13px;text-align:center}
.mscust{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mswin{color:var(--dim);font-size:9px}
/* #107 - the compare columns are now a working drag surface, so they have to SHOW it: what is
   picked, what is being dragged, and where a drop would land. `pick` is the multi-selection (shift
   / ctrl) and reads differently from `focus`, which is the one stop the map is looking at (#109). */
.msrow.pick{background:color-mix(in srgb,var(--a-route) 24%,transparent);box-shadow:inset 2px 0 0 var(--a-route)}
.msrow.pick.focus{box-shadow:inset 3px 0 0 var(--a-route)}
.msrow.dragging{opacity:.4}
/* A stop that cannot move must not look draggable — the cursor is the first thing that says so. */
.msrow.stuck{cursor:not-allowed;opacity:.62}
.msrow.msdrop-above{box-shadow:inset 0 2px 0 var(--a-blot)}
.mscol-body.msdrop-on{background:color-mix(in srgb,var(--a-blot) 10%,transparent);outline:1px dashed color-mix(in srgb,var(--a-blot) 50%,transparent);outline-offset:-2px}
.msdrop{padding:5px 8px;font-size:9px;color:var(--txt3);border-top:1px dashed var(--rule2);text-align:center}
.multistops .stop-out{margin-left:4px;font-size:8px;padding:0 4px}
.eqr-own{display:flex;align-items:center;gap:7px;padding:6px 8px;border:1px solid var(--rule2);border-radius:7px;margin-bottom:5px;cursor:pointer;font-size:11px}
.eqr-own:hover{border-color:var(--a-feed)}
.eqr-own input{margin:0}
/* ---- E4: equipment scanning ---- */
.eqscan-anim{font-size:46px;color:var(--a-feed);animation:eqscanpulse 1s ease-in-out infinite}
@keyframes eqscanpulse{0%,100%{opacity:.3;transform:scale(.9)}50%{opacity:1;transform:scale(1.08)}}
.eqai{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;font-size:11px;background:color-mix(in srgb,var(--a-feed) 9%,transparent);border:1px solid color-mix(in srgb,var(--a-feed) 28%,transparent);border-radius:8px;padding:8px 10px;margin:9px 0}
.eqai-b{font:800 8px/1.4 var(--mono,monospace);letter-spacing:.06em;color:var(--ink);background:var(--a-feed);border-radius:3px;padding:1px 5px;flex:none}
.eqscan-st .omt{flex:1 1 auto}
/* .drv-scan was defined here as a full-width block button. The only markup that uses the class is the
   handheld's header rail, which needs the opposite shape, so the definition lives with the shell. */
/* ---- E5: lease / service agreement ---- */
.eqlease{border:1px solid color-mix(in srgb,var(--a-feed) 30%,transparent);border-radius:10px;padding:10px 11px;margin:4px 0;background:color-mix(in srgb,var(--a-feed) 5%,transparent)}
.eqlease-h{font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--a-feed);margin-bottom:7px}
.eqlease-tog{display:flex;align-items:center;gap:7px;font-size:11px;margin-bottom:7px;cursor:pointer}
.eqsign-wrap{position:relative;display:inline-block}
.eqsign{width:100%;max-width:380px;height:86px;background:#0a141d;border:1px dashed var(--rule2);border-radius:8px;cursor:crosshair;touch-action:none}
.eqsign-clr{position:absolute;top:5px;right:5px;font:700 9px/1 var(--mono,monospace);color:var(--txt3);background:rgba(8,14,20,.8);border:1px solid var(--rule2);border-radius:5px;padding:3px 6px;cursor:pointer}
.eqsign-clr:hover{color:var(--txt)}
/* ---- E5: lease agreement document (modal preview mirrors the printable PDF) ---- */
.lease-paper{background:#fff;color:#141414;font-family:Georgia,'Times New Roman',serif;max-width:600px;margin:0 auto;padding:34px 40px;border-radius:6px;box-shadow:0 10px 40px -12px #000}
.lease-paper .lease-hd{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid #141414;padding-bottom:9px;margin-bottom:18px}
.lease-paper .lease-logo{font:800 17px/1 Arial,sans-serif;letter-spacing:.06em}
.lease-paper .lease-co{font:11.5px Arial,sans-serif;color:#555}
.lease-paper h1{font-size:19px;margin:0 0 4px}
.lease-paper .lease-meta{display:flex;gap:22px;color:#444;font-size:12.5px;margin-bottom:14px}
.lease-paper p{font-size:13px;line-height:1.6}
.lease-paper .lease-terms{color:#333;font-size:11.5px}
.lease-paper .lease-tbl{width:100%;border-collapse:collapse;margin:12px 0}
.lease-paper .lease-tbl th{text-align:left;width:160px;vertical-align:top;padding:6px 9px;background:#f3f3f3;border:1px solid #ddd;font:12.5px Arial,sans-serif}
.lease-paper .lease-tbl td{padding:6px 9px;border:1px solid #ddd;font-size:13px}
.lease-paper .lease-sign{display:flex;gap:34px;margin-top:34px}
.lease-paper .lease-sign>div{flex:1}
.lease-paper .lease-sigline{height:58px;border-bottom:1.5px solid #141414;display:flex;align-items:flex-end}
.lease-paper .lease-sigline img{max-height:54px}
.lease-paper .lease-cosig{font:italic 21px Georgia;color:#1a4a8a}
.lease-paper .lease-siglbl{font:10.5px Arial,sans-serif;color:#555;margin-top:5px}
.lease-paper .lease-foot{margin-top:28px;font:10px Arial,sans-serif;color:#888;border-top:1px solid #ddd;padding-top:7px}
.lease-paper .dim{color:#999}
.eqmapwrap{display:flex;gap:10px;height:100%;min-height:0}
.eqmapwrap .eqlist{width:236px;flex:none;overflow:auto;border:1px solid var(--rule);border-radius:9px;background:var(--pane)}
.eqlist-hd{position:sticky;top:0;background:var(--head);font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--txt3);padding:8px 10px;border-bottom:1px solid var(--rule);z-index:1}
.eqlrow{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--rule);cursor:pointer}
.eqlrow:hover{background:var(--hover)}
.eqlrow.on{background:var(--sel);box-shadow:inset 3px 0 0 var(--a-feed)}
.eqldot{width:10px;height:10px;border-radius:50%;flex:none}
.eqlb{flex:1;min-width:0}.eqlb b{font-size:10.5px}
.eqmapcol{flex:1;min-width:0;display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:9px;overflow:hidden}
.eqmapcol #eqMap{flex:1;min-height:0;background:#06121e}
.eqmapwrap2{display:flex;flex-direction:column;height:100%;border:1px solid var(--rule);border-radius:9px;overflow:hidden}
#eqMap{flex:1;min-height:0;background:#06121e}
.eqlegend{display:flex;align-items:center;gap:14px;padding:7px 12px;background:var(--head);border-top:1px solid var(--rule);font-size:10px;color:var(--txt2);flex-wrap:wrap}
.eqlegend>span{display:flex;align-items:center;gap:5px}
.eqlegend i{width:10px;height:10px;border-radius:50%;display:inline-block}
html.app-equipment .topbar,html.app-driver .topbar,html.app-portal .topbar{display:none}
html.app-equipment #view,html.app-driver #view,html.app-portal #view{padding-top:12px}
html.app-driver #view,html.app-portal #view{padding:0}
/* ===== Driver app (mobile) ===== */
.drvbg,.mbg{height:100%;overflow:auto;display:block;background:radial-gradient(120% 50% at 50% 0,#16344e,#060c12 70%)}
.mbg{background:radial-gradient(120% 50% at 50% 0,#0d3a5d,#05090e 70%)}
/* mobile app = a long page that scrolls (no cramped phone-frame inner scroll) */
.phone{width:100%;max-width:440px;min-height:100%;margin:0 auto;background:#0a121a;display:flex;flex-direction:column;position:relative;box-shadow:0 0 60px -20px #000}
.phone::before{display:none}
/* ── the handheld shell ────────────────────────────────────────────────────────────────────────
   Rebuilt for a phone in a hand, not a browser on a desk. What was wrong, measured at 430px:

     · the header cluster RAN OFF the right edge — the route select had flex:1 while the icon
       buttons had no shrink and nothing wrapped, so they were simply pushed out of view
     · four stacked rows of chrome before a single line of content
     · the action row was four buttons crushed side by side, each below a comfortable tap target
     · the bottom action sat mid-card while the thumb zone held nothing, and the floating buttons
       were covered by the data-mode banner

   Fixes, in order of how much they change the feel: one identity row instead of three, the
   secondary actions on a scrolling chip rail that CANNOT overflow, a segmented step control with
   real touch targets, and bottom room reserved so nothing important hides under the banner. */
.drv-top{padding:calc(14px + env(safe-area-inset-top,0px)) 14px 11px;background:linear-gradient(165deg,#14293d,#0b131c);border-bottom:1px solid #1a2735}

/* min-width:0 is the whole fix for the overflow: without it the select refuses to shrink below its
   content and pushes everything after it off-screen. */
.drv-top-row{display:flex;align-items:center;gap:8px;min-width:0}
.drv-who{flex:1;min-width:0}
.drv-who-name{font-size:16px;font-weight:800;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.15}
.drv-who-sub{display:flex;align-items:center;gap:6px;margin-top:2px;font-size:10.5px;color:var(--txt2);white-space:nowrap;overflow:hidden}
.drv-who-sub b{font-variant-numeric:tabular-nums}
.drv-pick{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.drv-whowrap{position:relative;flex:1;min-width:0;display:flex;align-items:center;gap:7px}
/* A drawn chevron, not a glyph. '⌄' renders as a bare lowercase "v" in the stacks this ships with,
   which reads as a typo sitting next to the driver's name. */
.drv-whowrap::after{content:'';flex:0 0 auto;width:7px;height:7px;margin-top:-3px;
  border-right:2px solid var(--txt3);border-bottom:2px solid var(--txt3);transform:rotate(45deg);border-radius:1px}

.drv-shift{flex:0 0 auto;font-size:9.5px;font-weight:800;padding:4px 8px;border-radius:999px;white-space:nowrap}
.drv-shift.day{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.drv-shift.night{background:color-mix(in srgb,var(--a-over) 22%,transparent);color:var(--a-over)}

/* 40px is the smallest square a thumb hits reliably; these were 26. */
.drv-ic{flex:0 0 auto;width:40px;height:40px;display:grid;place-items:center;font-size:16px;
  background:color-mix(in srgb,#fff 5%,transparent);border:1px solid #26384a;border-radius:12px;color:var(--txt);cursor:pointer}
.drv-ic:active{transform:scale(.94)}

.drv-top-row2{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;font-size:12px;min-width:0}
.drv-date{flex:0 0 auto;display:flex;align-items:center;gap:4px;font-size:10.5px;color:var(--txt2);
  background:color-mix(in srgb,#fff 4%,transparent);border-radius:999px;padding:3px 4px}
.drv-date button{background:transparent;border:none;color:var(--txt2);border-radius:999px;width:26px;height:26px;cursor:pointer;font-size:11px}
.drv-date button:active{background:color-mix(in srgb,#fff 10%,transparent)}

/* A RAIL, not a row. Four buttons cannot share 400px comfortably, so they scroll instead of
   shrinking — and the fade on the right says there is more without needing a scrollbar. */
.drv-scanrow{display:flex;gap:7px;margin-top:11px;overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
  mask-image:linear-gradient(90deg,#000 88%,transparent)}
.drv-scanrow::-webkit-scrollbar{display:none}
.drv-scan{flex:0 0 auto;scroll-snap-align:start;min-height:38px;padding:0 13px;border-radius:11px;
  background:color-mix(in srgb,#fff 5%,transparent);border:1px solid #26384a;color:var(--txt);
  font:inherit;font-size:11.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.drv-scan.hi{border-color:color-mix(in srgb,var(--warn) 55%,transparent);color:var(--warn);
  background:color-mix(in srgb,var(--warn) 12%,transparent)}
.drv-scan:active{transform:scale(.96)}

/* A segmented control. Was 9px uppercase text in a 6px-tall box — legible on a desk, not in a cab. */
.drv-steps{display:flex;gap:3px;padding:7px 10px 9px;background:var(--bg2);border-bottom:1px solid var(--rule)}
.drv-step{flex:1;appearance:none;background:transparent;border:none;color:var(--txt3);font:inherit;
  font-size:11px;font-weight:800;letter-spacing:.01em;padding:10px 2px 9px;border-radius:10px;cursor:pointer;
  position:relative;transition:background .12s,color .12s}
.drv-step.on{background:var(--a-map);color:var(--ink);box-shadow:0 6px 16px -8px color-mix(in srgb,var(--a-map) 80%,transparent)}
.drv-step.done:not(.on){color:var(--pos)}
/* A dot, not a colour change alone — a done step has to read at a glance and in sunlight. */
.drv-step.done:not(.on)::after{content:'';position:absolute;left:50%;bottom:3px;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--pos)}
.drv-step:active:not(.on){background:color-mix(in srgb,#fff 7%,transparent)}

/* Bottom room reserved for the floating actions and the data-mode banner, which used to sit on top of
   whatever the driver needed to tap. 112px is measured, not guessed: the tallest floating control
   occupies 79px of the viewport bottom and the banner 66px, so this clears both with enough left over
   that a label wrapping to two lines does not eat the margin. */
.drv-body{flex:1;padding:13px 13px calc(112px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:11px}

/* THE PRIMARY ACTION, IN THE THUMB ZONE.
   A short screen used to leave 400px of dead black between the card and the bottom of the phone,
   with the one button the driver needed floating in the middle of it. Pinning it does two jobs at
   once: the gap stops reading as unfinished, and the action lands where a thumb already is.
   Sticky rather than fixed so it settles at the end of a LONG screen instead of covering it. */
.drv-cta{position:sticky;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:3;margin-top:auto;padding-top:12px}
.drv-cta::before{content:'';position:absolute;left:-13px;right:-13px;top:-26px;bottom:-14px;z-index:-1;
  background:linear-gradient(180deg,transparent,#0a121a 60%);pointer-events:none}
.drv-cta .drv-btn{margin-top:0}
.drv-steps{position:sticky;top:0;z-index:4}
.drv-card{background:linear-gradient(168deg,#16222e,#0f1822);border:1px solid #233340;border-radius:18px;padding:16px;box-shadow:0 12px 30px -16px #000}
.drv-h{font-size:15px;font-weight:800;margin-bottom:12px;letter-spacing:-.01em}
/* Roomier rows and a heavier value: these are read in a moving vehicle, and the label matters less
   than the number beside it. The last row loses its rule so the card does not end on a line. */
.drv-kv{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 0;border-bottom:1px solid var(--rule);font-size:12.5px}
.drv-kv:last-of-type{border-bottom:none}
.drv-kv>span:first-child{color:var(--txt2)}
.drv-kv b{font-variant-numeric:tabular-nums;font-size:13.5px;text-align:right}
/* 52px tall. A driver taps this with gloves on, often without looking straight at it. */
.drv-top{position:relative}
.drv-signout{position:absolute;top:10px;right:12px;font:inherit;font-size:10.5px;font-weight:600;
  background:transparent;border:1px solid var(--neg,#ff6b8a);color:var(--neg,#ff6b8a);
  border-radius:7px;padding:4px 10px;cursor:pointer;line-height:1}
.drv-signout:active{transform:scale(.97)}
/* No-route action row (#60 / #27). It sits ABOVE the empty-state card because that is the whole
   point: a driver with no route still has work, and the first thing on the screen should be the
   things they can do rather than an apology for having nothing. */
.drv-noract{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:9px 11px 3px}
.drv-nra{display:flex;flex-direction:column;align-items:center;gap:3px;font:inherit;font-size:10.5px;font-weight:600;
  padding:9px 4px;border-radius:10px;cursor:pointer;background:var(--pane2);border:1px solid var(--bd);color:var(--txt)}
.drv-nra i{font-style:normal;font-size:17px;line-height:1}
.drv-nra:active{transform:scale(.97)}
.drv-nra.on{border-color:#ffd54a;color:#ffd54a;background:rgba(255,213,74,.12)}

/* Live off-route session */
.off-live{width:100%;text-align:left}
.off-hd{display:flex;align-items:center;gap:7px;font-size:12.5px}
.off-hd b{letter-spacing:.08em}
.off-dot{width:8px;height:8px;border-radius:50%;background:#ffd54a;box-shadow:0 0 0 4px rgba(255,213,74,.18);animation:offpulse 2s infinite}
@keyframes offpulse{50%{box-shadow:0 0 0 8px rgba(255,213,74,0)}}
.off-since{font-size:11px;color:var(--txt3);margin-top:4px}
.off-q{color:#ffd54a}
.off-log{margin-top:10px;border-top:1px solid var(--rule);padding-top:8px;display:flex;flex-direction:column;gap:7px;max-height:38vh;overflow:auto}
.off-row{display:flex;gap:8px;font-size:11.5px;line-height:1.5}
.off-row i{font-style:normal;color:var(--txt3);font-size:10.5px;min-width:52px;padding-top:1px}
.off-reasons{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px}
.off-chip{font:inherit;font-size:11px;font-weight:600;padding:7px 11px;border-radius:18px;cursor:pointer;
  background:var(--pane2);border:1px solid var(--bd);color:var(--txt2)}
.off-chip.on{background:var(--acc,#5ad1ff);border-color:transparent;color:#04121b}
.off-note{width:100%;margin-top:8px;background:var(--pane2);border:1px solid var(--bd);border-radius:9px;
  color:var(--txt);font:inherit;font-size:12.5px;padding:9px 10px;resize:none}
.drv-skip.arm{border-color:#ff6b8a;color:#ff6b8a;font-weight:700}

/* Previous day(s) recap (#27) — a full-screen READ-ONLY sheet. Nothing in it writes. */
.drv-recap{position:fixed;inset:0;z-index:2400;background:rgba(4,9,15,.97);display:grid;place-items:center;padding:14px}
.drv-recap .rcp{width:min(430px,96vw);max-height:94vh;display:flex;flex-direction:column;background:var(--pane);
  border:1px solid var(--rule2);border-radius:14px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.55)}
.drv-recap .rcp-hd{display:flex;align-items:center;padding:9px 9px 9px 13px;border-bottom:1px solid var(--rule);font-size:14px}
/* 44px is the smallest control a thumb hits reliably, and this one is used in a moving truck.
   The close was 24x24 and the day arrows 39x31 — small enough that a mis-tap was the default (#27). */
.drv-recap .rcp-x{width:44px;height:44px;flex:none;display:grid;place-items:center;font:inherit;font-size:17px;
  background:transparent;border:0;color:var(--txt2);border-radius:11px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.drv-recap .rcp-x:active{background:var(--pane2)}
/* The day being viewed is the whole context of this screen, so it does not scroll away with the
   content — it sits in the shell, between the two controls that change it. */
.drv-recap .rcp-day{display:flex;align-items:center;gap:8px;padding:7px 9px;border-bottom:1px solid var(--rule);background:var(--pane2)}
.drv-recap .rcp-day b{flex:1;text-align:center;font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drv-recap .rcp-step{width:44px;height:44px;flex:none;display:grid;place-items:center;font:inherit;font-size:14px;
  background:var(--pane);border:1px solid var(--bd);border-radius:12px;color:var(--txt);cursor:pointer;-webkit-tap-highlight-color:transparent}
.drv-recap .rcp-step:active{background:var(--pane2)}
.drv-recap .rcp-step.off{opacity:.32;cursor:default}
.drv-recap .rcp-load{font-size:11.5px;color:var(--txt3);padding:18px}
.drv-recap .rcp-hd b{flex:1}
.drv-recap .rcp-bd{overflow:auto;padding:11px 13px 16px}
.rcp-top{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.rcp-top .rcp-k{display:block;font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--txt3)}
.rcp-top b{font-size:13px}
.rcp-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:6px}
.rcp-kpis div,.rcp-kpis button{background:var(--pane2);border:1px solid var(--rule);border-radius:9px;padding:8px 6px;text-align:center}
/* Two of the four tiles answer a question ('which ones did I skip?', 'what did I take in?') so they
   are buttons that narrow the list or jump to the money. Nothing here writes — the recap has no
   write path, and these do not add one. */
.rcp-kpis button{font:inherit;color:var(--txt);cursor:pointer;min-height:56px;display:block;width:100%;-webkit-tap-highlight-color:transparent}
.rcp-kpis button:active{transform:scale(.97)}
.rcp-kpis button.on{border-color:var(--a-driv,#5ad1ff);box-shadow:inset 0 0 0 1px var(--a-driv,#5ad1ff)}
.rcp-kpis b{display:block;font-size:16px;font-weight:800}
.rcp-kpis b small{font-size:11px;font-weight:600;color:var(--txt3)}
.rcp-kpis span{font-size:9.5px;color:var(--txt3)}
.rcp-kpis .bad b{color:#ff6b8a}
.rcp-sec{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt3);margin:14px 0 6px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* A filtered list must say so, and must be one tap from being un-filtered. */
.rcp-clear{font:inherit;font-size:9px;letter-spacing:.1em;text-transform:uppercase;background:var(--pane2);
  border:1px solid var(--bd);border-radius:999px;color:var(--txt2);padding:5px 10px;min-height:30px;cursor:pointer}
/* The stop's number on the run, so it can be found by position rather than by counting rows. */
.rcp-stop b .rcp-seq{display:inline-grid;place-items:center;min-width:19px;width:auto;height:19px;padding:0 5px;margin-right:7px;
  border-radius:6px;background:var(--pane);border:1px solid var(--rule);color:var(--txt3);
  font-size:10px;font-weight:700;vertical-align:1px}
.rcp-stop.done b .rcp-seq{color:var(--pos,#41f0ad)}
.rcp-stop.skipped b .rcp-seq{color:#ff6b8a}
.rcp-list{display:flex;flex-direction:column;gap:6px}
.rcp-stop{display:flex;gap:9px;align-items:flex-start;background:var(--pane2);border:1px solid var(--rule);border-radius:9px;padding:8px 10px}
.rcp-stop i{font-style:normal;color:var(--txt3);font-size:13px;line-height:1.4}
.rcp-stop.done i{color:var(--pos,#41f0ad)}
.rcp-stop.skipped i{color:#ff6b8a}
.rcp-stop b{display:block;font-size:12.5px}
.rcp-stop span{display:block;font-size:10.5px}
.rcp-why{color:#ff6b8a;margin-top:2px}
.rcp-note{color:var(--txt2);margin-top:2px;font-style:italic}
.rcp-money{background:var(--pane2);border:1px solid var(--rule);border-radius:9px;padding:8px 10px}
.rcp-mrow{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;padding:3px 0}
.rcp-mrow.head{font-weight:700}
.rcp-mrow i{display:block;font-style:normal;font-size:10px;color:var(--txt3)}
.rcp-mdiv{height:1px;background:var(--rule);margin:6px 0}
.rcp-empty{font-size:11.5px;color:var(--txt3);padding:12px 2px}
/* Demo data must say so on its face — a recap is the thing a driver is asked to account for. */
.rcp-demo{margin-top:14px;font-size:10.5px;line-height:1.6;color:var(--warn,#ffb454);
  background:rgba(255,180,84,.09);border:1px solid rgba(255,180,84,.3);border-radius:9px;padding:8px 10px}
.rcp-foot{margin-top:14px;font-size:10px;line-height:1.6;color:var(--txt3);border-top:1px solid var(--rule);padding-top:9px}
/* Driver alert ticker (#61). Sits along the bottom, and the hands-free mic lifts above it rather
   than covering it - an alert that says "do NOT deliver" must never be behind a button. */
/* The 92px right gutter was there to keep the text out from under the mic. It cost a quarter of a
   412px screen: a dead dark band on the right with the alert truncated before it, which reads as
   something covering the strip. The mic now lifts above the ticker (--drv-ticker-h), so the strip
   owns its full width; the bottom inset keeps it off an Android gesture bar. */
#drvTicker{position:fixed;left:0;right:0;bottom:0;z-index:2350;background:linear-gradient(180deg,rgba(8,14,22,.92),rgba(8,14,22,.99));
  border-top:1px solid var(--rule2);backdrop-filter:blur(6px);overflow:hidden;
  padding:7px calc(12px + env(safe-area-inset-right,0px)) calc(7px + env(safe-area-inset-bottom,0px)) calc(12px + env(safe-area-inset-left,0px))}
#drvTicker .drvtk-in{display:flex;gap:18px;align-items:center;overflow-x:auto;scrollbar-width:none}
#drvTicker .drvtk-in::-webkit-scrollbar{display:none}
#drvTicker .drvtk-i{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font-size:12.5px;
  font-weight:600;color:var(--txt);padding:3px 10px;border-radius:20px;background:rgba(255,255,255,.05);border:1px solid var(--rule)}
#drvTicker .drvtk-i{font:inherit;font-size:12.5px;cursor:pointer;min-height:34px;-webkit-tap-highlight-color:transparent}
#drvTicker .drvtk-i:active{transform:scale(.98)}
#drvTicker .drvtk-i b{font-size:13px}
#drvTicker .drvtk-i i{font-style:normal;font-size:10.5px;color:var(--txt3);font-weight:500}
#drvTicker .drvtk-i.idle{color:var(--txt3);border-color:var(--rule);background:rgba(255,255,255,.03);font-weight:500}
#drvTicker .drvtk-i.idle b{color:var(--a-feed,#62d0ff)}
#drvTicker .drvtk-i.cancel{color:#ff8fa3;border-color:rgba(255,107,138,.45);background:rgba(255,107,138,.12)}
#drvTicker .drvtk-i.new{color:#41f0ad;border-color:rgba(65,240,173,.4);background:rgba(65,240,173,.1)}
#drvTicker .drvtk-i.reopt{color:#ffd54a;border-color:rgba(255,213,74,.4);background:rgba(255,213,74,.1)}
.drv-btn{width:100%;min-height:52px;margin-top:16px;background:linear-gradient(180deg,color-mix(in srgb,var(--a-map) 92%,#fff),var(--a-map));color:#06121e;border:none;border-radius:15px;padding:14px 16px;font:inherit;font-size:14px;font-weight:800;letter-spacing:.01em;cursor:pointer;box-shadow:0 10px 24px -10px color-mix(in srgb,var(--a-map) 70%,transparent)}
.drv-btn:active{transform:translateY(1px) scale(.995)}
/* The outline variant. .drv-btn is the filled button and carries near-black text for a light
   background; every outline button was undoing that with an inline color, and the one that forgot
   rendered unreadable dark-on-dark in the handheld settings sheet (#85). */
.drv-btn.ghost{background:transparent;border:1px solid var(--bd);color:var(--txt);box-shadow:none;margin-top:8px}
.drv-btn.ghost:active{background:var(--pane2,rgba(255,255,255,.05))}
.drv-btn.danger{background:transparent;border:1px solid var(--neg);color:var(--neg);box-shadow:none;margin-top:14px}

.drv-btn:hover{filter:brightness(1.06)}
.drv-btn[disabled]{opacity:.35;cursor:not-allowed;box-shadow:none;filter:saturate(.4)}
.drv-tires{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:12px}
.drv-tires label{font-size:8px;color:var(--txt3);display:block;margin-bottom:2px}.drv-tires input{width:100%;text-align:center;font-size:12px}
.drv-chk{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--rule);font-size:12px}
.drv-chkb{width:27px;height:27px;border-radius:8px;border:1.5px solid var(--rule2);background:transparent;color:var(--txt3);font-weight:900;cursor:pointer;flex:none}
.drv-chk.on .drv-chkb{background:var(--pos);border-color:var(--pos);color:#06121e}.drv-chk span{flex:1}
.drv-cam{background:none;border:none;font-size:17px;cursor:pointer;opacity:.45}.drv-cam.shot{opacity:1}
.drv-q{font-weight:800;font-variant-numeric:tabular-nums;color:var(--a-load)}
.drv-prog{font-size:11px;font-weight:700;color:var(--txt2);text-align:center}
.drv-cur{border:1.5px solid var(--a-map)}
.drv-cur-top{display:flex;align-items:center;gap:11px;margin-bottom:11px}
.drv-sn{width:31px;height:31px;border-radius:50%;background:var(--a-map);color:var(--ink);display:grid;place-items:center;font-weight:800;flex:none}
.drv-items{margin:8px 0;font-size:12px}
.drv-acts{display:flex;gap:6px;margin:11px 0}
.drv-a{flex:1;background:var(--head);border:1px solid var(--rule2);color:var(--txt);border-radius:9px;padding:9px 3px;font:inherit;font-size:10px;font-weight:700;cursor:pointer;white-space:nowrap}
/* one-tap contact row (call / ETA text) on the driver's current stop */
.drv-contact{margin-top:-2px}
.drv-contact .drv-a:first-child{color:#41f0ad;border-color:rgba(65,240,173,.4)}
.drv-contact .drv-a:last-child{color:#5ad1ff;border-color:rgba(90,209,255,.4)}
.drv-contact .drv-a:active{transform:scale(.97)}
.drv-a.paid{background:color-mix(in srgb,var(--pos) 20%,transparent);color:var(--pos);border-color:transparent}
.drv-up{margin-top:2px}.drv-uprow{display:flex;gap:9px;padding:8px 4px;border-bottom:1px solid var(--rule);font-size:11px;color:var(--txt2)}
.drv-uprow span{color:var(--txt3);font-weight:700;min-width:16px}
/* driver stops home — polished list + List/Map toggle + map */
.drv-listhd{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#6a8898;margin:16px 2px 8px}
.drv-stoplist{display:flex;flex-direction:column;gap:7px}
.drv-stoprow{display:flex;align-items:center;gap:12px;padding:13px;background:linear-gradient(180deg,#142231,#101a26);border:1px solid #243443;border-radius:14px;transition:border-color .12s,transform .06s}
.drv-stoprow:hover{border-color:#34506a}
.drv-stoprow.done{opacity:.5;background:none;border-color:#1a2735}
.drv-sn2{min-width:28px;height:28px;border-radius:9px;background:#1c2a3a;color:#9ec4dc;font:800 12px/1 var(--mono,monospace);display:flex;align-items:center;justify-content:center;flex:none}
.drv-srm{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;overflow:hidden}
.drv-srm b{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#eaf3fa}
.drv-srsub{font-size:11px;color:#7f9bb0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drv-mini{flex:none;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--a-map,#5ad1ff) 14%,transparent);border:1px solid color-mix(in srgb,var(--a-map,#5ad1ff) 45%,transparent);color:var(--a-map,#5ad1ff);border-radius:11px;font-size:16px;width:40px;height:40px;cursor:pointer}
.drv-done{margin-top:14px}
.drv-done summary{font-size:11px;font-weight:700;color:#7df0a8;cursor:pointer;padding:8px 2px;list-style:none}
.drv-done summary::-webkit-details-marker{display:none}
.drv-done .drv-stoprow{margin-top:6px}
.drv-vtoggle{display:flex;background:#101a26;border:1px solid #243443;border-radius:13px;padding:3px;margin:16px 0 8px}
.drv-vtoggle button{flex:1;appearance:none;background:none;border:none;color:#7f9bb0;font:inherit;font-size:12.5px;font-weight:700;padding:10px;border-radius:10px;cursor:pointer;transition:.12s}
.drv-vtoggle button.on{background:var(--a-map,#5ad1ff);color:#04121d}
.drv-map{height:400px;border-radius:14px;overflow:hidden;border:1px solid #243443}
.drv-mpin{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:800 11px/1 var(--mono,monospace);background:#1c2a3a;color:#cfe6f5;border:2px solid #5a7184;box-shadow:0 1px 5px #000a}
.drv-mpin.next{background:var(--a-map,#5ad1ff);color:#04121d;border-color:#fff}
.drv-mpin.done{background:#143a28;color:#7df0a8;border-color:#3be0c4}
.drv-mpin.hub{background:none;border:none;box-shadow:none;font-size:18px}
/* Phase 1 driver delivery sheet */
/* #90 - THE BUG. The guided stop flow (.df-wrap) is z-index 10001, opaque, and covers the whole
   screen. Every bottom sheet sat at 10000, so a sheet opened from inside the flow rendered
   BEHIND the screen that opened it. Brian: "Neither the Capture signature or the customer can't
   sign button are doing anything." They were doing exactly what they were asked; nobody could
   see the result. An invisible panel and a dead button are the same thing to the person holding
   the phone.
   This sits above the flow deliberately: a sheet is always a response to something on the screen
   underneath it, so it can never be correct for it to go behind. Ten sheets shared this fault. */
.drv-sheetwrap{position:fixed;inset:0;z-index:10050;background:rgba(0,0,0,.5);display:flex;align-items:flex-end;justify-content:center}
/* ── SITE HISTORY ─────────────────────────────────────────────────────────────────────────────
   The entry point is deliberately loud: it only exists when this site has something a driver has
   not seen, and on that day it must not read as one more row. Amber rather than the route accent,
   because it is information from somebody else rather than a control. */
.drv-histbtn{display:flex;align-items:center;gap:10px;width:100%;margin-top:10px;padding:12px 14px;
  background:linear-gradient(168deg,#2a2317,#1d1a12);border:1px solid #6b5426;border-radius:14px;
  color:#ffd79a;text-align:left;cursor:pointer;font:inherit;box-shadow:0 10px 26px -18px #000}
.drv-histbtn:active{transform:translateY(1px)}
.drv-histico{font-size:19px;line-height:1}
.drv-histtx{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.drv-histtx b{font-size:13px;font-weight:800;letter-spacing:-.01em}
.drv-histtx span{font-size:10.5px;opacity:.82}
.drv-histgo{font-size:22px;opacity:.6;line-height:1}
.drv-histsheet{max-height:86vh;overflow-y:auto}
.drv-histrow{border-top:1px solid #1e2b36;padding:10px 0;display:flex;flex-direction:column;gap:4px}
.drv-histrow:first-of-type{border-top:0}
.drv-histhd{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:12px}
.drv-histwhat{font-size:12.5px;color:#cfe6f5}
.drv-histnote{font-size:12px;color:#9fd2ea;background:#12202b;border-left:2px solid #2a4a5e;
  padding:6px 9px;border-radius:0 8px 8px 0;white-space:pre-wrap}
/* Getting in comes FIRST and reads as a key, because it is the one thing that stops a driver at
   the kerb with nobody to ring. */
.drv-access{background:linear-gradient(168deg,#1b2a1e,#131f16);border:1px solid #2f5537;
  border-radius:12px;padding:11px 13px;margin-bottom:6px}
.drv-accesshd{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:#8fe0a5;margin-bottom:4px}
.drv-access div:last-child{font-size:13px;color:#dff3e4;white-space:pre-wrap}
.drv-sheet{width:100%;max-width:420px;background:linear-gradient(168deg,#16222e,#0f1822);border:1px solid #233340;border-radius:18px 18px 0 0;padding:18px 16px 22px;display:flex;flex-direction:column;gap:9px;box-shadow:0 -10px 40px #000a}
.drv-fld{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--txt2)}
.drv-fld input{background:#0c1620;border:1px solid #2a3a48;border-radius:9px;color:var(--txt);font-size:15px;padding:9px 11px}
.drv-cancel{background:none;border:none;color:var(--txt3);font-size:12px;padding:6px;cursor:pointer}
/* Phase 2 driver payment engine */
.drv-ban{padding:7px 10px;border-radius:9px;font-size:11px;font-weight:700;margin:2px 0}
.drv-ban.hold{background:#3a0d18;color:#ff8aa6;border:1px solid #ff6b8a}
.drv-ban.warn{background:#3a2d10;color:#ffd27a;border:1px solid #ffd27a66}
.drv-ban.ok{background:#10331f;color:#7df0a8;border:1px solid #7df0a866}
.drv-scanrow{display:flex;gap:6px}.drv-scanrow .drv-scan{flex:1;font-size:10px;padding:7px 4px}
.drv-scan.hi{border-color:color-mix(in srgb,var(--a-load,#ff9a6a) 60%,transparent);background:color-mix(in srgb,var(--a-load,#ff9a6a) 18%,transparent);color:var(--a-load,#ff9a6a)}
.drv-skip{width:100%;margin-top:8px;background:none;border:1px solid #ffb45455;color:#ffb454;border-radius:11px;padding:9px;font-size:11px;font-weight:700;cursor:pointer}
/* Phase 5 EOD journals + top icons */
.drv-var{width:100%;border-collapse:collapse;font-size:10px;margin:4px 0 8px}
.drv-var th{text-align:right;color:var(--txt3);font-weight:700;padding:3px 5px;border-bottom:1px solid var(--rule)}
.drv-var th:first-child{text-align:left}
.drv-var td{text-align:right;padding:4px 5px;border-bottom:1px solid var(--rule)}
.drv-var td:first-child{text-align:left;color:var(--txt)}
.drv-var td.pos{color:var(--pos)}.drv-var td.neg{color:var(--neg)}
/* .drv-ic used to be redefined here as 30x26. It is now defined ONCE, up with the handheld shell, at
   40x40 — a thumb target. Two definitions meant source order decided the size, which is how it ended
   up too small to hit while looking like a deliberate choice. */
/* ===== guided stop flow — fresh full-screen wizard ===== */
.df-wrap{position:fixed;inset:0;z-index:10001;background:#070d14}
.df-screen{height:100%;max-width:540px;margin:0 auto;display:flex;flex-direction:column;background:linear-gradient(180deg,#0d1828,#0a1018)}
.df-top{display:flex;align-items:center;gap:12px;padding:18px 18px 10px}
.df-back{width:40px;height:40px;border-radius:50%;background:#16222e;border:1px solid #2a3a48;color:#cfe6f5;font-size:18px;cursor:pointer;flex:none}
.df-progwrap{flex:1;height:5px;background:#1c2a36;border-radius:3px;overflow:hidden}
.df-prog{height:100%;background:linear-gradient(90deg,#3be0c4,#62d0ff);border-radius:3px;transition:width .3s}
.df-stepn{font:700 11px/1 ui-monospace,monospace;color:#6a8898}
.df-body{flex:1;overflow:auto;padding:18px 24px;display:flex;flex-direction:column;gap:15px}
.df-title{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#62d0ff}
.df-cust{font-size:27px;font-weight:800;line-height:1.12;color:#fff}
.df-sub{font-size:13.5px;color:#97b8cd;line-height:1.55}
.df-note{font-size:11px;color:#6a8898}
.df-big{font-size:46px;font-weight:800;text-align:center;color:#fff;padding:12px 0 4px}
.df-big .df-unit{display:block;font-size:12px;font-weight:700;color:#97b8cd;letter-spacing:.12em;text-transform:uppercase;margin-top:6px}
.df-gps{padding:13px 15px;border-radius:13px;background:#13202c;border:1px solid #2a3a48;font-size:13px;color:#97b8cd}
.df-gps.ok{border-color:#3be0c4;color:#7df0d4;background:#0e2a25}
.df-reasons{display:flex;flex-direction:column;gap:11px}
.df-reason{display:flex;align-items:center;gap:14px;padding:17px 16px;border-radius:15px;background:#13202c;border:2px solid #243443;color:#dceaf2;font-size:15px;font-weight:600;cursor:pointer;text-align:left}
.df-reason.on{border-color:#3be0c4;background:#0e2a25}
.df-ric{font-size:23px;flex:none}.df-rck{margin-left:auto;color:#3be0c4;font-weight:800;font-size:19px}
.df-fld{display:flex;flex-direction:column;gap:6px;font-size:12px;color:#97b8cd}
.df-fld input{background:#0a141e;border:1.5px solid #2a3a48;border-radius:13px;color:#fff;font-size:18px;padding:14px 15px}
.df-chk{display:flex;align-items:center;gap:10px;font-size:13px;color:#97b8cd}
.df-action{width:100%;padding:16px;border-radius:15px;background:#11283a;border:1.5px solid #62d0ff;color:#9fe0ff;font-size:15px;font-weight:700;cursor:pointer}
.df-action.done{background:#0e2a1e;border-color:#3be0c4;color:#7df0d4}
.df-ghost{width:100%;padding:13px;border-radius:13px;background:none;border:1px solid #2a3a48;color:#97b8cd;font-size:13px;cursor:pointer}
.df-row{display:flex;gap:10px;font-size:13px;color:#97b8cd;padding:9px 0;border-bottom:1px solid #1c2a36}.df-row b{margin-left:auto;color:#fff}.df-row b.pos{color:#3be0c4}
.df-alert{padding:11px 13px;border-radius:11px;background:#3a0d18;color:#ff9db0;border:1px solid #ff6b8a;font-size:12.5px;font-weight:700}
.df-warn{padding:11px 13px;border-radius:11px;background:#3a2d10;color:#ffd27a;border:1px solid #ffd27a66;font-size:12.5px;font-weight:700}
.df-ok{padding:12px 14px;border-radius:12px;background:#0e2a1e;color:#7df0d4;border:1px solid #3be0c4;font-size:13.5px;font-weight:700}
.df-prog2{font-size:20px;font-weight:800;text-align:center;color:#62d0ff}
.df-summary{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}.df-summary li{font-size:14.5px;color:#7df0d4;font-weight:600}
.df-foot{padding:14px 24px 28px;border-top:1px solid #14202c}
.df-next{width:100%;padding:18px;border-radius:16px;background:linear-gradient(90deg,#3be0c4,#62d0ff);border:none;color:#04121d;font-size:16px;font-weight:800;cursor:pointer}
.df-next:disabled{opacity:.35;cursor:not-allowed}
/* ===== driver themes — separate accent for the driver app, set via a dt-class on the driver/flow root ===== */
.drvbg.dt-violet,.df-wrap.dt-violet{--a-map:#b78bff}
.drvbg.dt-amber,.df-wrap.dt-amber{--a-map:#ffb000}
.drvbg.dt-mint,.df-wrap.dt-mint{--a-map:#39ff88}
.drvbg.dt-rose,.df-wrap.dt-rose{--a-map:#ff6b8a}
.df-wrap .df-prog,.df-wrap .df-next{background:var(--a-map)}
.df-wrap .df-title,.df-wrap .df-rck,.df-wrap .df-prog2{color:var(--a-map)}
.df-wrap .df-action{color:var(--a-map)}
.df-wrap .df-reason.on,.df-wrap .df-action,.df-wrap .df-action.done,.df-wrap .df-ok,.df-wrap .df-gps.ok{border-color:var(--a-map)}
/* ===== unified driver-app form controls — modern, matches the web (no legacy OS look) ===== */
.drvbg input:not([type=checkbox]):not([type=radio]),.df-wrap input:not([type=checkbox]):not([type=radio]),.drv-sheetwrap input:not([type=checkbox]):not([type=radio]),
.drvbg select,.df-wrap select,.drv-sheetwrap select,
.drvbg textarea,.df-wrap textarea,.drv-sheetwrap textarea{
  appearance:none;-webkit-appearance:none;font:inherit;font-size:16px;color:#fff;
  background:#0a141e;border:1.5px solid #2a3a48;border-radius:12px;padding:12px 14px;outline:none}
.drvbg input:focus,.df-wrap input:focus,.drv-sheetwrap input:focus,
.drvbg select:focus,.df-wrap select:focus,.drv-sheetwrap select:focus,
.drvbg textarea:focus,.df-wrap textarea:focus,.drv-sheetwrap textarea:focus{border-color:var(--a-map,#5ad1ff);box-shadow:0 0 0 3px color-mix(in srgb,var(--a-map,#5ad1ff) 22%,transparent)}
.drvbg select,.df-wrap select,.drv-sheetwrap select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5l3.5 3.5 3.5-3.5' stroke='%2397b8cd' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:13px;padding-right:36px;cursor:pointer}
.drvbg select option,.df-wrap select option,.drv-sheetwrap select option{background:#0e1b26;color:#fff}
/* ===== tap-friendly numeric steppers (mobile) ===== */
.drv-stepper{display:flex;align-items:stretch;gap:0;border-radius:13px;overflow:hidden;border:1.5px solid #2a3a48;background:#0a141e;margin-top:4px}
.drv-stepper button{flex:none;width:48px;min-height:48px;border:0;background:#16283b;color:var(--a-map,#5ad1ff);font-size:24px;line-height:1;font-weight:800;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background .1s}
.drv-stepper button:active{background:var(--a-map,#5ad1ff);color:#04121f}
.drv-stepper input{flex:1;min-width:0;border:0!important;border-radius:0!important;background:transparent!important;text-align:center;font-size:20px!important;font-weight:800;padding:12px 6px!important;box-shadow:none!important}
.drv-tires{grid-template-columns:repeat(2,1fr)!important;gap:10px!important}
.drv-tires .drv-stepper button{width:40px;min-height:42px;font-size:20px}
.drv-tires .drv-stepper input{font-size:17px!important;padding:9px 4px!important}
/* ===== camera barcode scan to load ===== */
.drv-btn2{width:100%;background:#13212e;color:var(--a-map,#5ad1ff);border:1.5px solid color-mix(in srgb,var(--a-map,#5ad1ff) 45%,#2a3a48);border-radius:12px;padding:11px;font:inherit;font-size:12.5px;font-weight:800;cursor:pointer;-webkit-tap-highlight-color:transparent}
.drv-btn2:active{background:var(--a-map,#5ad1ff);color:#04121f}
.drv-btn2[disabled]{opacity:.4;cursor:default}
.drv-scanbar{display:flex;align-items:center;gap:10px;margin:2px 0 12px}
.drv-scanbar>span{font-size:11px;color:var(--txt2);white-space:nowrap}
.drv-scanbar .drv-btn2{width:auto;flex:1}
.drv-ldk{flex:1;display:flex;flex-direction:column;gap:1px}
.drv-bc{font-family:var(--mono,monospace);font-size:9px;letter-spacing:.04em;color:var(--txt3);opacity:.85}
/* Phase 3 — stepped/gated FILO driver load list */
.drv-manlist{display:flex;flex-direction:column;gap:6px;margin:2px 0 12px}
.drv-manrow{display:flex;align-items:center;gap:10px;padding:8px 9px;border-radius:9px;background:rgba(255,255,255,.03);border:1px solid var(--rule)}
.drv-mn{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800;background:var(--a-load,#ff9a6a);color:#04121e}
.drv-mm{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.drv-mm b{font-size:12.5px;color:#eaf2fa}
.drv-loadcur{display:flex;align-items:center;gap:14px;padding:14px;border-radius:12px;background:rgba(255,154,106,.08);border:1px solid rgba(255,154,106,.3);margin-bottom:10px}
.drv-loadphoto{flex:none;width:60px;height:60px;border-radius:12px;display:grid;place-items:center;font-size:30px;background:rgba(0,0,0,.25);border:1px dashed rgba(255,255,255,.18)}
.drv-loadinfo{flex:1;min-width:0}
.drv-loadinfo b{font-size:15px;color:#eaf2fa}
.drv-tagpend{font-size:10px;font-weight:800;letter-spacing:.04em;color:#ffb454;margin-top:4px}
.drv-bincontents{background:rgba(61,139,245,.12);border:1px solid rgba(61,139,245,.32);border-radius:10px;padding:9px 11px;margin-bottom:10px}
.drv-bch{font-size:10px;font-weight:800;letter-spacing:.05em;color:#8fd6ff;text-transform:uppercase;margin-bottom:5px}
.drv-binline{font-size:11px;color:#cfe0f0;padding:2px 0}
.drv-binline b{color:#8fd6ff}
.drv-loadprog{text-align:center;font-size:10px;color:#7f9bb0;margin-top:8px;font-weight:700}
.drv-scanwrap{position:fixed;inset:0;z-index:10001;background:#040a11;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
.drv-scanbox{width:100%;max-width:440px;height:100%;display:flex;flex-direction:column}
.ds-cam{position:relative;flex:none;height:46%;min-height:240px;background:#000;overflow:hidden}
.ds-cam video{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.05)}
.ds-frame{position:absolute;inset:18% 14%;border:2px solid color-mix(in srgb,var(--a-map,#5ad1ff) 80%,#fff);border-radius:14px;box-shadow:0 0 0 100vmax rgba(0,0,0,.35);pointer-events:none}
.ds-frame.qr{inset:16% 24%;aspect-ratio:1;top:50%;left:50%;right:auto;bottom:auto;width:56vw;max-width:280px;height:auto;transform:translate(-50%,-50%);border-radius:16px}
.ds-laser{position:absolute;left:14%;right:14%;height:2px;background:var(--a-map,#5ad1ff);box-shadow:0 0 12px var(--a-map,#5ad1ff);top:18%;animation:dslaser 2s ease-in-out infinite;pointer-events:none}
@keyframes dslaser{0%,100%{top:20%}50%{top:78%}}
.ds-hint{position:absolute;left:0;right:0;bottom:14px;text-align:center;font-size:11px;color:#cfe8f7;text-shadow:0 1px 4px #000}
.drv-x{position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:50%;border:0;background:rgba(0,0,0,.5);color:#fff;font-size:17px;cursor:pointer}
.ds-body{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:9px}
.ds-title{font-size:14px;font-weight:800;color:#fff}
.ds-list{display:flex;flex-direction:column;gap:6px;margin-bottom:6px}
.ds-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:11px;background:#0e1a26;border:1px solid #1d2c3a}
.ds-item.ok{background:color-mix(in srgb,var(--pos,#3be0c4) 14%,#0e1a26);border-color:color-mix(in srgb,var(--pos,#3be0c4) 50%,#1d2c3a)}
.ds-ic{font-size:15px;width:20px;text-align:center;color:var(--txt3)}.ds-item.ok .ds-ic{color:var(--pos,#3be0c4)}
.ds-k{flex:1;display:flex;flex-direction:column;gap:1px;font-size:12px}
/* ===== driver status badges · ETA · windows · timer · history ===== */
.drv-bdgs{display:flex;flex-wrap:wrap;gap:5px;margin:2px 0 8px}
.drv-bdg{font-size:8.5px;font-weight:800;letter-spacing:.04em;padding:2px 7px;border-radius:20px;border:1px solid}
.drv-bdg.urgent{color:#ff5c6c;border-color:#ff5c6c;background:rgba(255,92,108,.12);animation:drvflash 1s steps(1) infinite}
.drv-bdg.timed{color:#ffd27a;border-color:#ffd27a;background:rgba(255,210,122,.1)}
.drv-bdg.wc{color:#62d0ff;border-color:#62d0ff;background:rgba(98,208,255,.1)}
@keyframes drvflash{50%{background:rgba(255,92,108,.42);color:#fff}}
.drv-eta{font-size:8.5px;font-weight:800;padding:1px 6px;border-radius:20px;margin-left:4px;vertical-align:middle}
.drv-eta.late,b.late{color:#ff5c6c}.drv-eta.late{background:rgba(255,92,108,.16)}
.drv-eta.ontime,b.ontime{color:#3be0c4}.drv-eta.ontime{background:rgba(59,224,196,.14)}
.drv-eta.early,b.early{color:#ffd27a}.drv-eta.early{background:rgba(255,210,122,.13)}
.drv-srsub b.late,.drv-srsub b.ontime,.drv-srsub b.early{font-weight:800}
.df-timer{font-family:var(--mono,monospace);font-size:12px;font-weight:800;color:var(--a-map,#5ad1ff);background:color-mix(in srgb,var(--a-map,#5ad1ff) 16%,transparent);padding:3px 9px;border-radius:20px;margin-right:8px;white-space:nowrap}
.drv-detrows{display:flex;flex-direction:column;gap:2px;margin:4px 0}
.drv-done.skipped summary{color:#ffb454}
.drv-stoprow.skip{opacity:.92}
.drv-sn2.sk{color:#ffb454;border-color:#ffb454}
.drv-mpin.skip{background:#3a2a16;border-color:#ffb454;color:#ffb454}
.drv-pick{flex:1}
.drv-pp{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--txt2);padding:6px 0;border-bottom:1px solid var(--rule)}
.drv-pp b{color:var(--txt);margin-left:auto}
.drv-pp.big{font-size:13px;border-bottom:none;padding-top:8px}.drv-pp.big b{font-size:17px;color:var(--a-map);margin-left:auto}
.drv-pp.bad b{color:var(--neg)}
.drv-terms{background:#1c2a36;color:var(--txt2);font-size:9px;font-weight:700;padding:2px 7px;border-radius:20px}
.drv-chk2{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--txt2);padding:5px 0}
.drv-tag{font-size:9px;color:var(--txt3);font-style:italic;padding:2px 0 0}
/* ===== Customer portal ===== */
.portalbg{height:100%;overflow:auto;background:radial-gradient(160% 80% at 50% -8%,#12365a,#070d14 70%)}
.portal{max-width:840px;margin:0 auto;padding:30px 22px 40px}
.pt-hd{display:flex;align-items:center;gap:14px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid #1a2937}
.pt-brand{font-size:22px;font-weight:800;color:#eaf4fb;letter-spacing:-.01em}
.pt-brand span{font-size:10px;color:var(--txt3);font-weight:600;text-transform:uppercase;letter-spacing:.12em;margin-left:4px}
.pt-cust{margin-left:auto;font-size:12px;max-width:230px}
.pt-acct{text-align:right}.pt-acct .dim{font-size:9px;display:block}.pt-acct b{font-size:17px;font-variant-numeric:tabular-nums}
.pt-nav{display:flex;gap:3px;border-bottom:1px solid var(--rule);margin-bottom:16px;flex-wrap:wrap}
.pt-tab{appearance:none;background:transparent;border:none;border-bottom:2px solid transparent;color:var(--txt3);font:inherit;font-size:12px;font-weight:700;padding:9px 13px;cursor:pointer}
.pt-tab.on{color:var(--a-map);border-bottom-color:var(--a-map)}
.pt-card{background:linear-gradient(168deg,#101a25,#0b131b);border:1px solid #1f2e3b;border-radius:16px;padding:20px;margin-bottom:14px;box-shadow:0 16px 40px -24px #000}
.pt-card-h{font-size:15px;font-weight:800;margin-bottom:15px;letter-spacing:-.01em}
.pt-track{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.pt-timeline{display:flex;flex-direction:column}
.pt-step{display:flex;align-items:center;gap:12px;font-size:12.5px;color:var(--txt3);padding:9px 0;position:relative}
.pt-step .pt-dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--rule2);background:var(--pane);flex:none;z-index:1}
.pt-step:not(:last-child)::after{content:'';position:absolute;left:6px;top:24px;height:18px;width:2px;background:var(--rule2)}
.pt-step.on{color:var(--txt);font-weight:600}
.pt-step.on .pt-dot{background:var(--pos);border-color:var(--pos);box-shadow:0 0 0 3px color-mix(in srgb,var(--pos) 22%,transparent)}
.pt-step.on:not(:last-child)::after{background:var(--pos)}
.pt-driver{display:flex;align-items:center;gap:11px;margin-top:12px;padding-top:12px;border-top:1px solid var(--rule)}
.pt-driver .dtruck{width:30px;height:30px}
.pt-map{min-height:320px;height:100%;border-radius:13px;overflow:hidden;border:1px solid var(--rule);background:#06121e}
.pt-kv{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--rule);font-size:12px}
.pt-paybtn{background:var(--a-map);color:var(--ink);border:none;border-radius:6px;padding:4px 13px;font-weight:700;cursor:pointer}
.pt-btn{width:100%;margin-top:14px;background:linear-gradient(180deg,color-mix(in srgb,var(--a-map) 92%,#fff),var(--a-map));color:#06121e;border:none;border-radius:12px;padding:14px;font:inherit;font-weight:800;font-size:13px;cursor:pointer;box-shadow:0 8px 22px -10px color-mix(in srgb,var(--a-map) 70%,transparent)}
.pt-btn:hover{filter:brightness(1.06)}
.pt-field{margin-bottom:12px}.pt-field label{display:block;font-size:10px;color:var(--txt3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.pt-field input,.pt-field select{width:100%}
@media(max-width:620px){.pt-track{grid-template-columns:1fr}.pt-map{min-height:240px}}
/* ===== mobile-app shell (customer portal + driver) ===== */
.mbg{height:100%;display:flex;align-items:center;justify-content:center;background:radial-gradient(150% 90% at 50% -12%,#0d3a5d,#05090e 72%);overflow:auto;padding:18px}
.phone.app{display:flex;flex-direction:column;overflow:hidden}
.appbar{display:flex;align-items:center;gap:10px;padding:26px 16px 14px;border-bottom:1px solid #15212e}
.app-portal{background:linear-gradient(160deg,#0c5183,#0a1622)}
.appbar-l{min-width:0}
.app-eyebrow{font-size:9px;font-weight:800;letter-spacing:.18em;color:#86c9f0}
.app-title{font-size:18px;font-weight:800;margin-top:2px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px;color:#fff}
.app-switch{margin-left:auto;max-width:110px;font-size:11px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);color:#fff;border-radius:9px;padding:6px}
.app-body{flex:1;padding:14px;display:flex;flex-direction:column;gap:12px;background:#0a121a}
.appbar{position:sticky;top:0;z-index:5}
.appnav{display:flex;border-top:1px solid #1a2735;background:rgba(12,20,29,.96);backdrop-filter:blur(8px);padding:8px 4px;position:sticky;bottom:0;z-index:5}
.appnavb{flex:1;appearance:none;background:none;border:none;color:var(--txt3);font:inherit;font-size:8.5px;font-weight:700;display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 2px;cursor:pointer;border-radius:10px}
.appnavb .ani{font-size:18px;filter:grayscale(.45);opacity:.65;transition:.12s}
.appnavb.on{color:var(--a-map)}.appnavb.on .ani{filter:none;opacity:1;transform:translateY(-1px)}
.pt-hero{border-radius:18px;padding:20px;background:linear-gradient(150deg,#0f72b5,#0a3f66);color:#fff;box-shadow:0 18px 44px -22px #000}
.pt-hero.live{background:linear-gradient(150deg,#10a87e,#0a5f57)}
.pt-hero-top{font-size:10px;font-weight:800;letter-spacing:.14em;opacity:.88}
.pt-hero-eta{font-size:36px;font-weight:800;margin:6px 0 2px;letter-spacing:-.02em;line-height:1}
.pt-hero-sub{font-size:12px;opacity:.92}
.app-body .pt-map{min-height:230px;flex:none}
.app-body .pt-card{margin-bottom:0}
/* New Order modal */
.ordermodal{position:fixed;inset:0;z-index:1470;display:none;align-items:flex-start;justify-content:center;padding:5vh 0;background:rgba(2,5,9,.66);backdrop-filter:blur(3px)}
.ordermodal.on{display:flex}
.om{width:480px;max-width:94vw;max-height:90vh;background:var(--pane);border:1px solid var(--rule2);border-radius:11px;box-shadow:0 30px 80px -20px #000;display:flex;flex-direction:column;overflow:hidden}
.om-hd{display:flex;align-items:center;padding:13px 15px;background:var(--head);border-bottom:1px solid var(--rule);font-size:14px}
.om-body{padding:14px 15px;overflow:auto;display:flex;flex-direction:column;gap:11px}
.om-foot{padding:12px 15px;border-top:1px solid var(--rule);background:var(--head)}
.om-prod{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid var(--rule);font-size:11.5px}
.om-prod input{width:74px;text-align:right}
/* clean inputs inside data tables / config / equipment screens */
.blot input,.blot select,.eqbody input,#invBreak input{background:var(--pane2);border:1px solid var(--rule2);color:var(--txt);border-radius:6px;padding:5px 8px;font:inherit;font-size:11px;outline:none}
.blot input[type=number],#invBreak input[type=number]{text-align:right;font-variant-numeric:tabular-nums}
.blot input:focus,.blot select:focus,.eqbody input:focus,#invBreak input:focus{border-color:var(--a-map);background:var(--pane)}
.blot td{vertical-align:middle}
.om-toggle{display:flex;gap:0;border:1px solid var(--rule2);border-radius:7px;overflow:hidden}
.omt{flex:1;appearance:none;background:transparent;border:none;color:var(--txt2);font:inherit;font-size:10.5px;font-weight:700;padding:7px 6px;cursor:pointer}
.omt.on{background:var(--a-route);color:var(--ink)}
.om-urg{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--txt2);cursor:pointer;padding:4px 0}
.om-urg input{width:16px;height:16px}
/* 'More' nav dropdown */
.moremenu{position:fixed;z-index:1460;min-width:196px;background:var(--pane2);border:1px solid var(--rule2);border-radius:9px;box-shadow:0 18px 50px -16px #000;padding:5px;display:none}
.moremenu.on{display:block}
.moremenu button{display:flex;align-items:center;gap:9px;width:100%;background:transparent;border:none;color:var(--txt);font:inherit;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-align:left;padding:8px 10px;border-radius:6px;cursor:pointer}
.moremenu button:hover{background:var(--hover);color:var(--a-map)}
.moremenu .mm-ic{font-size:14px;width:18px;text-align:center}
.moremenu-soon{font-size:9px;color:var(--txt3);padding:7px 10px 4px;border-top:1px solid var(--rule);margin-top:4px;letter-spacing:.04em;font-style:italic}
/* ZIP overlay label + the ▦ ZIP map toggle button */
.ziplbl{display:inline-block;font:700 8.5px/1.2 var(--mono,monospace);color:#cdd8e4;background:rgba(8,14,20,.66);border:1px solid rgba(159,176,194,.35);border-radius:4px;padding:0 3px;white-space:nowrap;letter-spacing:.02em}
.zipbtn{background:rgba(8,14,20,.82);color:var(--txt2);border:1px solid var(--rule2);border-radius:6px;font:700 10px/1 var(--mono,monospace);padding:6px 8px;cursor:pointer;box-shadow:0 2px 8px -3px #000}
.zipbtn:hover{color:var(--txt);border-color:var(--a-map)}
.zipbtn.on{background:var(--a-map);color:var(--ink);border-color:transparent}
/* ===== New Service Route builder (draw-on-map / pick by area & ZIP) ===== */
.rlnewmodal{position:fixed;inset:0;z-index:1480;display:none;background:rgba(2,5,9,.72);backdrop-filter:blur(3px)}
.rlnewmodal.on{display:block}
.rln{position:absolute;inset:0;background:var(--pane);border:none;border-radius:0;box-shadow:none;display:flex;flex-direction:column;overflow:hidden}
.rln-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:var(--head);border-bottom:1px solid var(--rule);font-size:13px}
.rln-body{flex:1;min-height:0;display:flex}
.rln-side{width:262px;flex:none;border-right:1px solid var(--rule);overflow:auto;padding:12px 13px;display:flex;flex-direction:column;gap:4px}
.rln-stopcol{width:380px;flex:none;border-right:1px solid var(--rule);overflow:auto;padding:12px 14px;display:flex;flex-direction:column}
.rln-map{flex:1;min-width:0}
.rln-sec{font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt3);font-weight:800;margin:12px 0 6px}
.rln-fl-t{font-size:9.5px;color:var(--txt2);font-weight:700;margin:8px 0 5px}
.rln-chips{display:flex;flex-wrap:wrap;gap:5px;max-height:118px;overflow:auto}
.rln-zips{max-height:96px}
.rlnchip{appearance:none;display:inline-flex;align-items:center;gap:5px;background:var(--head);border:1px solid var(--rule2);color:var(--txt2);font:inherit;font-size:10px;font-weight:600;padding:3px 8px;border-radius:13px;cursor:pointer}
.rlnchip:hover{border-color:var(--a-route);color:var(--txt)}
.rlnchip.on{background:var(--a-route);border-color:transparent;color:var(--ink);font-weight:800}
.rlnchip-dot{width:9px;height:9px;border-radius:50%}
.rln-stoplist{flex:1;min-height:120px;overflow:auto;border:1px solid var(--rule);border-radius:7px}
.rln-pickwrap{border:1px solid var(--rule);border-radius:7px;padding:8px 9px}
/* loading/unloading: per-line scan & verify (barcode-ready) */
.loadgrp{font-size:9px;font-weight:800;letter-spacing:.12em;color:var(--txt3);padding:9px 10px 4px;text-transform:uppercase;position:sticky;top:0;background:var(--pane);z-index:1}
.loadtabs{display:flex;gap:2px;padding:7px 7px 0;position:sticky;top:0;background:var(--pane);z-index:2;border-bottom:1px solid var(--rule)}
.loadtab{flex:1;min-width:0;appearance:none;background:transparent;border:1px solid transparent;border-bottom:none;color:var(--txt2);font:inherit;font-size:9px;font-weight:700;letter-spacing:0;text-transform:uppercase;white-space:nowrap;padding:7px 3px;border-radius:6px 6px 0 0;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:4px;margin-bottom:-1px}
.loadtab:hover{color:var(--txt);background:var(--hover)}
.loadtab.on{color:var(--ink);background:var(--a-map);border-color:transparent;font-weight:800}
.lt-n{font-size:8px;font-weight:800;padding:0 4px;border-radius:7px;background:color-mix(in srgb,var(--txt2) 22%,transparent);color:var(--txt2)}
.loadtab.on .lt-n{background:rgba(0,0,0,.24);color:var(--ink)}
.scanbar{display:flex;align-items:center;gap:7px;font-size:10px;color:var(--txt2);background:var(--head);border:1px solid var(--rule);border-radius:7px;padding:6px 9px;margin-bottom:9px}
.scanbar-n{font-weight:800;font-family:var(--mono,monospace);color:var(--warn);background:color-mix(in srgb,var(--warn) 14%,transparent);border-radius:6px;padding:1px 7px}
.scanbar-n.ok{color:var(--pos);background:color-mix(in srgb,var(--pos) 16%,transparent)}
.lchk{width:22px;height:22px;border-radius:6px;border:1.5px solid var(--rule2);background:transparent;color:var(--txt3);font-weight:900;font-size:12px;cursor:pointer;display:grid;place-items:center;line-height:1;transition:.12s}
.lchk:hover{border-color:var(--a-load);color:var(--a-load)}
.lchk.on{background:var(--pos);border-color:var(--pos);color:#06121e}
tr.lrow-on td{background:color-mix(in srgb,var(--pos) 7%,transparent)}
.btn.primary[disabled]{opacity:.45;cursor:not-allowed;filter:saturate(.4)}
/* ===== Load/Unload spatial dock — drag pallets into truck cargo zones ===== */
.lstage{padding:12px;height:100%;display:flex;flex-direction:column;min-height:0}
.lstage-bar{display:flex;align-items:center;gap:8px;font-size:10px;color:var(--txt2);margin-bottom:10px}
.lstage-cols{display:flex;gap:12px;flex:1;min-height:0}
.ltray{flex:0 0 184px;display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:9px;background:var(--head);min-height:0}
.lprods{flex:0 0 230px;display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:9px;background:var(--pane);overflow:auto;min-height:0}
.lprods-hd{position:sticky;top:0;background:var(--head);font-size:9px;font-weight:800;letter-spacing:.1em;color:var(--txt3);padding:8px 10px;border-bottom:1px solid var(--rule);z-index:1}
.lprod{border-bottom:1px solid var(--rule)}
.lprod-h{display:flex;align-items:center;gap:7px;padding:8px 10px;cursor:pointer;font-size:11px}
.lprod-h:hover{background:var(--hover)}
.lprod.open .lprod-h{background:var(--sel)}
.lprod-h b{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lprod-t{font-weight:800;font-variant-numeric:tabular-nums;color:var(--a-load)}
.lprod-x{color:var(--txt3);font-size:9px;width:10px}
.lprod-chk{display:none;font-size:8.5px;font-weight:800;color:var(--pos);letter-spacing:.03em;white-space:nowrap}
.lprod.loaded .lprod-chk{display:inline}
.lprod.loaded .lprod-h b{text-decoration:line-through;color:var(--txt3)}
.lprod.loaded .lprod-t{color:var(--txt3)}
.lprod.loaded .dotc{box-shadow:0 0 0 2px color-mix(in srgb,var(--pos) 55%,transparent)}
.lprod-body{padding:2px 0 6px}
.lprod-ord{display:flex;align-items:center;gap:7px;padding:4px 10px 4px 22px;font-size:10px;border-top:1px solid var(--rule)}
.lprod-cust{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lprod-ord b{font-variant-numeric:tabular-nums}
.ltray-hd{font-size:9px;font-weight:800;letter-spacing:.12em;color:var(--txt3);padding:9px 10px;border-bottom:1px solid var(--rule);text-transform:uppercase}
.ltray-body{flex:1;overflow:auto;padding:10px;align-content:flex-start}
.ltray.dragover,.lzone.dragover{outline:2px dashed var(--a-load);outline-offset:-3px;background:color-mix(in srgb,var(--a-load) 8%,transparent)}
.ltray-empty{font-size:10px;color:var(--txt3);padding:8px;width:100%}
.lz-pals{display:flex;flex-wrap:wrap;gap:5px}
.pallet{width:50px;height:40px;border-radius:4px;background:linear-gradient(160deg,color-mix(in srgb,var(--pc,#888) 34%,#1a242e),#10181f);border:1px solid color-mix(in srgb,var(--pc,#888) 45%,#2a3744);border-top:4px solid var(--pc,var(--a-load));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;cursor:grab;user-select:none;box-shadow:0 3px 6px -2px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08)}
.pallet::after{content:'';position:absolute}
.pallet:hover{border-color:var(--pc);transform:translateY(-1px)}
.pallet:active{cursor:grabbing}
.pallet.dragging{opacity:.4}
.pallet.equip{border-top-style:dashed;border-top-width:3px;background:linear-gradient(160deg,color-mix(in srgb,var(--pc,#888) 26%,#241a2e),#16101d)}
.pal-ab{font-size:9px;font-weight:800;color:#fff;letter-spacing:.02em}
/* order → product map */
.omap-tot{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:6px}
.omaprow{padding:8px 0;border-bottom:1px solid var(--rule)}
.omaprow-h{display:flex;align-items:center;gap:8px;font-size:11px}.omaprow-h b{color:var(--a-blot)}.omaprow-t{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums}
.omap-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.omapchip{font-size:9px;font-weight:700;padding:2px 7px;border-radius:10px;background:color-mix(in srgb,var(--pc,#888) 16%,transparent);color:var(--pc,#888);border:1px solid color-mix(in srgb,var(--pc,#888) 40%,transparent)}
.omapchip b{color:var(--txt)}
.pal-bags{font-size:8px;color:var(--txt2);font-variant-numeric:tabular-nums}
/* realistic truck rig backing into a loading dock */
.ltruck{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0;border:1px solid var(--rule);border-radius:9px;background:radial-gradient(120% 100% at 80% 0%,#0c1822,#060e16);overflow:hidden;position:relative}
.rig{flex:none;display:flex;flex-direction:column;padding:14px 22px 0 16px;position:relative;animation:rigIn .8s cubic-bezier(.2,.85,.25,1)}
@keyframes rigIn{from{transform:translateX(-46px);opacity:.2}60%{transform:translateX(6px)}to{transform:none;opacity:1}}
/* loading dock on the RIGHT — truck backs in so its REAR DOOR faces the dock */
.rig-dockwall{position:absolute;right:0;top:6px;bottom:32px;width:12px;background:repeating-linear-gradient(180deg,#1c2a36 0 13px,#0e1822 13px 17px);border-left:3px solid #2c4150;border-radius:2px}
.rig-body{height:172px;flex:none;display:flex;align-items:flex-end}
.rig-cab{width:54px;flex:none;height:72%;align-self:flex-end;background:linear-gradient(180deg,color-mix(in srgb,var(--rc,#6aa) 60%,#1c2c3a),#0f1e29);border-radius:11px 5px 5px 11px;position:relative;box-shadow:inset 0 2px 7px rgba(255,255,255,.1),0 4px 10px -4px #000}
.rig-win{position:absolute;top:11px;left:8px;right:8px;height:20px;background:linear-gradient(180deg,#cdeafa,#6c9fbb);border-radius:4px;opacity:.9}
.rig-mirror{position:absolute;top:28px;left:-6px;width:6px;height:12px;background:#23323e;border-radius:2px}
.rig-box{flex:1;min-width:0;height:100%;border:2px solid #38505f;border-right:1px solid #38505f;border-radius:9px 0 0 9px;background:repeating-linear-gradient(90deg,#13212c 0 9px,#172631 9px 11px);padding:8px;position:relative;box-shadow:inset 0 0 18px rgba(0,0,0,.5)}
.rig-doorlbl{position:absolute;left:8px;right:0;top:-13px;text-align:right;font-size:8px;color:var(--txt3);font-weight:800;letter-spacing:.08em}
.rig .lbed{height:100%;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:1fr;gap:6px}
.rig-axle{height:30px;display:flex;justify-content:space-between;align-items:flex-start;padding:2px 30px 0 18px}
.rig-rear{display:flex;gap:5px}
.rig-wheel{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 50% 50%,#39434e 0 34%,#0e151c 36%);border:3px solid #1b2630;box-shadow:0 3px 5px -2px #000}
.lzone{border:1.5px dashed #3a5161;border-radius:6px;padding:5px;display:flex;flex-direction:column;gap:4px;min-height:0;background:rgba(8,16,24,.4);overflow:hidden}
.lzone .lz-pals{margin-top:auto;align-content:flex-end}
.lzone .lz-lbl{flex:none}
.lzone.dragover{outline:2px solid var(--a-load);outline-offset:-2px;background:color-mix(in srgb,var(--a-load) 12%,transparent)}
.lz-lbl{font-size:7.5px;font-weight:800;letter-spacing:.1em;color:#7d93a4;text-transform:uppercase}
.loaded-truck.dock-out{animation:dockOut 1.1s cubic-bezier(.4,0,.2,1)}
@keyframes dockOut{0%{transform:none}45%{transform:translateX(0) scale(1.03)}100%{transform:translateX(-12%) scale(.98);opacity:.9}}

/* ===== OVERHEAD FILO load plan (top-down floor-plan · door left / cab right) ===== */
.ovstage{display:flex;flex-direction:column;gap:11px;flex:1;min-height:0;overflow:auto}
.ovnote{font-size:10.5px;line-height:1.55;color:#b9c9d6;background:#0d1722;border:1px solid #223448;border-left:3px solid var(--a-load,#ff9a6a);border-radius:8px;padding:10px 12px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ovnote b{color:var(--a-load)}
.ovtog{margin-left:auto;font-size:10px;font-weight:700;color:var(--txt2);display:inline-flex;align-items:center;gap:5px;cursor:pointer;white-space:nowrap}
.ovtog input{accent-color:var(--a-load)}
.ovwt{background:#0d1722;border:1px solid #223448;border-radius:9px;padding:9px 12px}
.ovwt-top b{color:#a9bccb}.ovwt-fig{color:#eaf2fa}
.ovwt-top{display:flex;justify-content:space-between;align-items:baseline;font-size:10px;letter-spacing:.06em}
.ovwt-top b{color:var(--txt2)}
.ovwt-fig{font-family:var(--mono,monospace);font-weight:800;color:var(--txt)}
.ovwt-bar{margin-top:6px;height:8px;border-radius:5px;background:rgba(255,255,255,.07);overflow:hidden}
.ovwt-bar>span{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#3fd08a,#ffcf6a);transition:width .4s}
.ovwt.over .ovwt-fig{color:#ff8f6a}
.ovwt.over .ovwt-bar>span{background:linear-gradient(90deg,#ffb15a,#ff5a5a)}
.ovbed{display:flex;align-items:stretch;gap:0;border:1px solid var(--rule);border-radius:12px;background:radial-gradient(140% 120% at 100% 0%,#0e1c28,#060d14);padding:10px;min-height:210px;position:relative;overflow-x:auto}
.ovbed.trailer{min-height:250px}
.ovend{flex:none;width:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px;font-weight:900;letter-spacing:.08em;font-size:11px;color:#8fa6b6}
.ovend small{font-size:8px;font-weight:700;letter-spacing:.04em;color:var(--txt3)}
.ovend.door{border-right:3px dashed #4a6272;color:#ffb98a}
.ovend.door span{background:rgba(255,154,106,.14);border:1px solid rgba(255,154,106,.4);border-radius:6px;padding:6px 4px;line-height:1.15}
.ovend.cab{border-left:3px solid #3a5161}
.ovend.cab span{background:rgba(98,208,255,.12);border:1px solid rgba(98,208,255,.35);border-radius:6px;padding:8px 6px;color:#8fd6ff}
.ovfloor{flex:1;display:flex;gap:6px;padding:0 8px;align-items:stretch;min-width:0}
.ovbx{position:relative;display:flex;flex-direction:column;gap:3px;min-width:74px;padding:8px 8px 7px;border-radius:7px;cursor:pointer;
  background:linear-gradient(160deg,color-mix(in srgb,var(--rc) 30%,#0c1621),color-mix(in srgb,var(--rc) 12%,#0a121b));
  border:1px solid color-mix(in srgb,var(--rc) 55%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);transition:transform .12s,box-shadow .12s}
.ovbx:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.4),0 0 0 1px var(--rc)}
.ovbx-hd{display:flex;justify-content:space-between;align-items:center;gap:4px}
.ovbx-seq{font-size:8.5px;font-weight:900;letter-spacing:.05em;color:var(--rc);filter:brightness(1.4)}
.ovbx-lo{font-size:7.5px;font-weight:800;color:var(--txt3);background:rgba(0,0,0,.3);border-radius:4px;padding:1px 4px;white-space:nowrap}
.ovbx-cust{font-size:11px;font-weight:800;color:var(--txt);line-height:1.15;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ovbx-meta{font-size:8.5px;font-family:var(--mono,monospace);color:var(--txt2);margin-top:auto}
.ovbx-tap{font-size:7.5px;font-weight:700;color:var(--txt3);opacity:.7}
.ovbx:hover .ovbx-tap{color:var(--a-load);opacity:1}
.ovalerts{display:flex;flex-direction:column;gap:6px}
.ovalert{font-size:11px;font-weight:600;color:#ffcaa0;background:rgba(255,90,90,.1);border:1px solid rgba(255,120,90,.4);border-radius:7px;padding:8px 11px}
.ovalert b{color:#ff8f6a}
.ovok{font-size:11px;font-weight:700;color:#8fe0b0;background:rgba(63,208,138,.08);border:1px solid rgba(63,208,138,.3);border-radius:7px;padding:8px 11px}
.wgl{position:fixed;inset:0;z-index:3100;display:none;background:rgba(3,7,12,.66);backdrop-filter:blur(3px);align-items:center;justify-content:center;padding:24px}
.wgl.on{display:flex}
.wgl-card{position:relative;width:min(640px,95vw);max-height:90vh;overflow:auto;background:#0c1620;color:#eaf2fa;border:1px solid #1e2b38;border-top:3px solid var(--a-load,#ff9a6a);border-radius:14px;box-shadow:0 30px 90px rgba(0,0,0,.7);padding:22px 24px}
.wgl-h{font-size:15px}
.wgl-cur{padding:16px 18px}
.wgl-ic{width:64px;height:64px;font-size:32px}
.wgl-cur b{font-size:16px}
.wgl-seg{height:26px;font-size:10px}
.wgl-card .dim{color:#8296a6}
.wgl-card .nxam-x{background:rgba(255,255,255,.06);border-color:#2a3a48;color:#c4d3df}
.wgl-h{font-size:14px;font-weight:800;color:#eaf2fa;margin-bottom:8px;padding-right:26px}
.wgl-cur{display:flex;align-items:center;gap:14px;padding:14px;border-radius:12px;background:rgba(255,154,106,.08);border:1px solid rgba(255,154,106,.3)}
.wgl-cur b{font-size:15px}
.wgl-ic{flex:none;width:58px;height:58px;border-radius:12px;display:grid;place-items:center;font-size:28px;background:rgba(0,0,0,.25);border:1px dashed rgba(255,255,255,.18)}
.wgl-steps{display:flex;gap:5px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.wgl-dot{width:8px;height:8px;border-radius:50%;background:var(--rule2)}
.wgl-dot.on{background:#3be0c4}
.wgl-dot.cur{background:var(--a-load,#ff9a6a);box-shadow:0 0 0 3px rgba(255,154,106,.25)}
.wgl-row{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid var(--rule);font-size:12.5px}
.wgl-tick{color:#3be0c4;font-weight:800}
/* Phase 4 — QR manifest modal + time-to-roll KPI */
.qrm-datenav{display:flex;align-items:center;justify-content:center;gap:12px;margin:2px 0 10px;font-size:12px;color:#cfe0f0}
.qrm-datenav button{background:rgba(255,255,255,.06);border:1px solid #2a3a48;color:#c4d3df;border-radius:6px;width:26px;height:26px;cursor:pointer;font-size:12px}
.qrm-qrwrap{display:flex;justify-content:center;padding:12px;background:#fff;border-radius:12px;width:max-content;margin:0 auto}
.qrm-qrwrap canvas{display:block;image-rendering:pixelated}
.qrm-token{text-align:center;font-family:var(--mono,monospace);font-size:9.5px;color:#8fd6ff;margin:8px 0 12px;word-break:break-all}
.qrm-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}
.qrm-kv{display:flex;justify-content:space-between;gap:8px;font-size:11px;border-bottom:1px solid #1c2836;padding:4px 0}
.qrm-kv span{color:#8296a6}.qrm-kv b{color:#eaf2fa;text-align:right}
.qrm-prods{display:flex;flex-direction:column;gap:3px}
.qrm-line{display:flex;align-items:center;gap:7px;font-size:11px;color:#dbe9f5}
.qrm-line b{margin-left:auto;color:#eaf2fa}
.qrm-line .dotc{width:9px;height:9px;border-radius:2px;flex:none}
.drv-rollkpi{color:#62d0ff;font-weight:700;margin-left:6px}
/* Phase 6 — COGS / Margins calculator */
/* min-height (not a hard height) so the flex column grows to its content and the module scrolls, instead
   of flexbox shrinking the bottom panes (channel + All-products) to their headers and clipping them */
.cogswrap{display:flex;flex-direction:column;min-height:100%;padding:2px}
.cogs-sel{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.cogs-tab{font:700 10px/1 var(--mono,monospace);color:var(--txt2);background:var(--pane2);border:1px solid var(--rule2);border-radius:8px;padding:7px 11px;cursor:pointer}
.cogs-tab.on{background:var(--a-load,#ff9a6a);color:#04121e;border-color:transparent}
.cogs-qty{margin-top:10px;font-size:11px;color:var(--txt2);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cogs-gauge{width:120px;height:120px;border-radius:50%;margin:4px auto 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle,color-mix(in srgb,var(--mc) 16%,transparent),transparent 72%);border:3px solid var(--mc)}
.cogs-gnum{font-size:30px;font-weight:900;color:var(--mc);line-height:1}
.cogs-glbl{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt3);margin-top:3px}
.cogs-big{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.cogs-big>div{background:var(--pane2);border:1px solid var(--rule);border-radius:9px;padding:9px;text-align:center}
.cogs-big span{display:block;font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt3);margin-bottom:3px}
.cogs-big b{font-size:16px;font-family:var(--mono,monospace)}
/* Settings sub-tabs */
.setwrap{display:flex;flex-direction:column;height:100%;min-height:0}
.settabs{display:flex;gap:6px;flex:none;margin-bottom:10px;border-bottom:1px solid var(--rule);padding-bottom:8px}
/* ── Drivers App QR Code (D2) — on screen, and as a printable dispatch-room sheet ────────────── */
/* Import / Export (#68) */
.ie-lede{font-size:11.5px;margin:-2px 0 14px;max-width:70ch;line-height:1.55}
.ie-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px;max-width:980px}
.ie-card{background:var(--pane2);border:1px solid var(--rule);border-radius:10px;padding:12px 13px}
.ie-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:12.5px}
.ie-cols{font-size:10px;color:var(--txt3);margin:5px 0 10px;line-height:1.5;word-break:break-word}
.ie-acts{display:flex;flex-wrap:wrap;gap:6px}
.ie-acts .btn{font-size:11px;padding:5px 9px}
.ie-result{margin:14px 0 0;max-width:70ch;font-size:12px;background:var(--pane2);border:1px solid var(--rule);border-left:3px solid var(--acc,#5ad1ff);border-radius:8px;padding:10px 12px;line-height:1.55}
.ie-ok{color:#3be0c4}
.ie-bad{color:#ff6b8a}
.ie-note{margin-top:16px;max-width:70ch;font-size:11px;color:var(--txt3);line-height:1.6;border-top:1px solid var(--rule);padding-top:10px}
.dqr-lede{font-size:11.5px;margin:-2px 0 14px;max-width:640px;line-height:1.5}
.dqr-warn{font-size:11px;background:color-mix(in srgb,var(--warn) 12%,transparent);border:1px solid color-mix(in srgb,var(--warn) 40%,transparent);
  color:var(--txt);border-radius:8px;padding:8px 11px;margin:0 0 14px;max-width:640px}
.dqr-grid{display:grid;grid-template-columns:minmax(200px,262px) minmax(240px,1fr);gap:26px;align-items:start;max-width:880px}
.dqr-qr{display:flex;flex-direction:column;gap:9px;align-items:center}
/* White plate always — a QR inverted by a dark theme will not scan. */
.dqr-canvas{background:#fff;border-radius:10px;padding:14px;width:100%;box-sizing:border-box;
  border:1px solid var(--rule2);display:flex;align-items:center;justify-content:center;min-height:180px}
.dqr-canvas svg{display:block;width:100%;height:auto}
.dqr-canvas svg rect{shape-rendering:crispEdges}
.dqr-cap{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--txt3)}
.dqr-side{display:flex;flex-direction:column;gap:9px;min-width:0}
.dqr-lab{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--txt3)}
.dqr-urlrow{display:flex;gap:7px}
.dqr-url{flex:1;min-width:0;background:var(--pane2);border:1px solid var(--rule2);border-radius:8px;color:var(--txt);
  font:inherit;font-size:12px;padding:8px 10px}
.dqr-steps{font-size:11.5px;line-height:1.55;background:var(--pane2);border:1px solid var(--rule);border-radius:9px;padding:11px 13px}
.dqr-steps b{font-size:11px;letter-spacing:.02em}
.dqr-steps ol{margin:6px 0 0;padding-left:18px}
.dqr-steps li{margin:5px 0}
.dqr-print{align-self:flex-start}
@media (max-width:760px){ .dqr-grid{grid-template-columns:1fr} }
/* Printing: only the sheet, on white, with the code big enough to scan off the wall. */
@media print{
  body.dqr-printing *{visibility:hidden!important}
  body.dqr-printing .dqr-sheet,body.dqr-printing .dqr-sheet *{visibility:visible!important}
  body.dqr-printing .dqr-sheet{position:absolute;inset:0;background:#fff;color:#000;padding:26px;border:0}
  body.dqr-printing .dqr-sheet .dqr-grid{grid-template-columns:1fr;justify-items:center;gap:18px}
  body.dqr-printing .dqr-sheet .dqr-canvas{width:360px;border:0}
  body.dqr-printing .dqr-sheet .dqr-url{border:0;background:#fff;color:#000;font-size:14px;text-align:center}
  body.dqr-printing .dqr-sheet .dqr-print,body.dqr-printing .dqr-sheet .dqr-urlrow button{display:none!important}
  body.dqr-printing .dqr-sheet .dqr-lede,body.dqr-printing .dqr-sheet .dqr-steps{color:#000}
}
.settab{appearance:none;background:var(--pane2);border:1px solid var(--rule2);color:var(--txt2);font:inherit;font-size:11px;font-weight:700;letter-spacing:.02em;padding:7px 14px;border-radius:9px;cursor:pointer}
.settab.on{background:var(--a-over,#5ad1ff);color:#04121e;border-color:transparent}
.setbody{flex:1;min-height:0;display:block;overflow:auto}
.setbody>.pane{min-height:0;height:auto}
/* COGS dashboard widgets */
.cg-kpis{display:flex;gap:12px;flex:none;margin-bottom:12px;align-items:stretch;flex-wrap:wrap}
.kpibig{flex:1;min-width:130px;background:var(--pane);border:1px solid var(--rule);border-radius:11px;padding:12px 14px;display:flex;flex-direction:column;gap:3px}
.kpibig-n{font-size:26px;font-weight:900;font-family:var(--mono,monospace);color:var(--txt);line-height:1}
.kpibig-l{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt3)}
.cg-kpi-note{align-self:center;font-size:10px;color:var(--txt3);text-align:right;min-width:130px}
.cg-bar{display:flex;align-items:center;gap:10px;padding:5px 0}
.cg-bar-lbl{flex:0 0 130px;font-size:11px;color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cg-bar-track{flex:1;height:14px;background:rgba(255,255,255,.06);border-radius:8px;overflow:hidden}
.cg-bar-fill{height:100%;border-radius:8px;transition:width .4s}
.cg-bar-val{flex:0 0 40px;text-align:right;font-size:12px;font-weight:800;font-family:var(--mono,monospace)}
.cg-gcn{padding:6px 0;border-bottom:1px solid var(--rule)}
.cg-gcn:last-child{border-bottom:none}
.cg-gcn-h{display:flex;justify-content:space-between;font-size:11px;margin-bottom:4px}
.cg-gcn-h b{color:var(--txt)}
.cg-gcn-bar{display:flex;height:12px;border-radius:6px;overflow:hidden;gap:2px}
.cg-gcn-bar .cg-cogs{background:#ffb454}.cg-gcn-bar .cg-net{background:#41f0ad}
/* ===== COGS interactive calculator ===== */
.cgc-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
@media(max-width:1000px){.cgc-grid{grid-template-columns:1fr}}
.cgl-body{padding:14px 16px;display:flex;flex-direction:column;gap:13px}
.cgl-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px}
.cgl-lbl{font-size:11.5px;color:var(--txt2);font-weight:600}
.cgl-valwrap{font-family:var(--mono,monospace)}
.cgl-val{font-size:14px;font-weight:800;color:var(--txt)}
/* editable value box — reads as the bold number, but typeable */
input.cgl-val{font-family:var(--mono,monospace);width:66px;text-align:right;background:transparent;border:1px solid var(--rule2);border-radius:4px;padding:1px 5px;-moz-appearance:textfield;cursor:text}
input.cgl-val:hover{border-color:var(--txt3)}
input.cgl-val:focus{outline:none;border-color:var(--a-load,#ff9a6a);background:rgba(255,255,255,.05)}
input.cgl-val::-webkit-outer-spin-button,input.cgl-val::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cgl-valwrap small{font-size:9px;color:var(--txt3);margin-left:3px}
.cgl-vol{border-top:1px dashed var(--rule2);padding-top:12px;margin-top:2px}
input[type=range].cgl-rng{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:5px;background:linear-gradient(90deg,var(--a-load,#ff9a6a),var(--a-load,#ff9a6a));background:var(--rule2);outline:none;padding:0;border:none;cursor:pointer}
input[type=range].cgl-rng::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--a-load,#ff9a6a);border:3px solid var(--pane);box-shadow:0 1px 4px rgba(0,0,0,.35);cursor:grab}
input[type=range].cgl-rng::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--a-load,#ff9a6a);border:3px solid var(--pane);cursor:grab}
input[type=range].cgl-rng:active::-webkit-slider-thumb{cursor:grabbing;transform:scale(1.12)}
/* price-slider break-even + target-margin markers */
.cgl-mks{position:relative;height:16px;margin-top:3px}
.cgl-mk{position:absolute;top:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;white-space:nowrap;pointer-events:none;transition:left .12s ease}
.cgl-mk i{width:2px;height:7px;border-radius:1px;display:block}
.cgl-mk em{font-style:normal;font-size:8px;line-height:1;margin-top:2px;font-weight:800;letter-spacing:.02em;font-family:var(--mono,monospace)}
.cgl-mk.be i{background:#ff6b8a}.cgl-mk.be em{color:#ff6b8a}
.cgl-mk.tgt i{background:#41f0ad}.cgl-mk.tgt em{color:#41f0ad}
.cgl-mk.off{opacity:.38}
/* Inventory REORDER → build-order button + on-order pill */
.reordbtn{font-size:8px;font-weight:800;letter-spacing:.05em;padding:3px 8px;border-radius:5px;border:1px solid #ff6b8a;background:rgba(255,107,138,.12);color:#ff6b8a;cursor:pointer;text-transform:uppercase;white-space:nowrap}
.reordbtn:hover{background:rgba(255,107,138,.22)}
.invord{font-size:8px;font-weight:800;letter-spacing:.05em;padding:3px 8px;border-radius:5px;border:1px solid #ffb454;background:rgba(255,180,84,.12);color:#ffb454;cursor:pointer;white-space:nowrap}
.invord:hover{background:rgba(255,180,84,.24)}
.rplrow input.rplin{font-family:var(--mono,monospace)}
/* Inventory days-of-supply cover tiers */
td.cover,.cover-crit,.cover-warn,.cover-ok{font-weight:700}
.cover-crit{color:var(--neg,#ff6b8a)}
.cover-warn{color:#c98a1f}
html:not(.theme-light) .cover-warn{color:#ffb454}
.cover-ok{color:var(--pos,#41f0ad)}
.cgc-out{padding:16px 18px}
/* COGS: delivered-vs-walk-in true landed cost */
.cogch-body{padding:14px 16px}
.cogch-cols{display:flex;gap:12px}
.cogch-col{flex:1;border:1px solid var(--rule2);border-radius:9px;padding:12px 13px;background:var(--pane2,var(--head))}
.cogch-col.wal{border-top:3px solid var(--a-map,#5ad1ff)}
.cogch-col.del{border-top:3px solid var(--a-load,#ff9a6a)}
.cogch-h{font-weight:800;font-size:12px;color:var(--txt);margin-bottom:2px}
.cogch-units{font-family:var(--mono,monospace);font-size:16px;font-weight:800;color:var(--txt);margin-bottom:9px}
.cogch-units small{font-size:9px;font-weight:600;color:var(--txt3)}
.cogch-kv{display:flex;justify-content:space-between;align-items:baseline;font-size:11px;color:var(--txt2);padding:3px 0}
.cogch-kv b{font-family:var(--mono,monospace);color:var(--txt);font-weight:700}
.cogch-kv.landed{border-top:1px solid var(--rule);margin-top:3px;padding-top:5px}
.cogch-kv.landed b{font-size:13px;font-weight:800}
.cogch-margin{margin-top:8px;font-size:24px;font-weight:800;font-family:var(--mono,monospace);display:flex;align-items:baseline;gap:6px}
.cogch-margin small{font-size:9px;font-weight:600;color:var(--txt3)}
.cogch-drag{margin-top:12px;border:1px solid var(--rule2);border-left:3px solid var(--a-load,#ff9a6a);border-radius:8px;padding:10px 13px;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.cogch-dragn{font-family:var(--mono,monospace);font-size:20px;font-weight:800;white-space:nowrap}
.cogch-dragl{flex:1;min-width:220px;font-size:11px;color:var(--txt2);line-height:1.5}
.cogch-blend{width:100%;font-size:10.5px;color:var(--txt3);border-top:1px dashed var(--rule);padding-top:8px}
.cgc-gauge{width:132px;height:132px;border-radius:50%;margin:2px auto 14px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;
  background:conic-gradient(var(--mc) var(--pct,0%), color-mix(in srgb,var(--mc) 12%,transparent) 0)}
.cgc-gauge::before{content:"";position:absolute;inset:11px;border-radius:50%;background:var(--pane)}
.cgc-gnum{font-size:34px;font-weight:900;line-height:1;z-index:1;font-family:var(--mono,monospace)}
.cgc-glbl{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt3);z-index:1;margin-top:3px}
.cgc-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.cgc-trio>div{background:var(--pane2);border:1px solid var(--rule);border-radius:9px;padding:9px 8px;text-align:center}
.cgc-trio span{display:block;font-size:8.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--txt3);margin-bottom:3px}
.cgc-trio b{font-size:15px;font-family:var(--mono,monospace);color:var(--txt)}
.cgc-wf-h{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt3);margin:2px 0 6px}
.cgc-wf{display:flex;height:20px;border-radius:6px;overflow:hidden;gap:2px}
.cgc-seg{min-width:2px;transition:flex .18s}
.cgc-wflg{display:flex;flex-wrap:wrap;gap:5px 12px;margin:8px 0 12px}
.cgc-lg{font-size:10px;color:var(--txt2);display:inline-flex;align-items:center;gap:5px}
.cgc-lg i{width:9px;height:9px;border-radius:2px;display:inline-block}
.cgc-lg b{font-family:var(--mono,monospace);color:var(--txt)}
.cg-cur{background:color-mix(in srgb,var(--a-load,#ff9a6a) 10%,transparent)}
/* en-route live load manifest (editable) */
.enr-list{display:flex;flex-direction:column;gap:1px}
.enr-row{display:flex;align-items:center;gap:9px;padding:6px 2px;border-bottom:1px solid var(--rule)}
.enr-row:last-child{border-bottom:none}
.enr-row .dotc{width:10px;height:10px;border-radius:3px;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.2)}
.enr-nm{flex:1;font-size:12px;color:var(--txt);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.enr-qty{width:88px;text-align:right;font-family:var(--mono,monospace);font-weight:700;padding:5px 8px}
.enr-qty.edited{border-color:var(--a-map);box-shadow:0 0 0 2px color-mix(in srgb,var(--a-map) 22%,transparent)}
.enr-u{font-size:9px;width:38px;flex:none}
.cg-gcn-f{display:flex;justify-content:space-between;font-size:9px;font-family:var(--mono,monospace);margin-top:3px}
.ovassets{border:1px solid var(--rule);border-radius:9px;background:rgba(8,16,24,.4);padding:9px 11px}
.ovassets-hd{font-size:9px;font-weight:800;letter-spacing:.08em;color:#ffc24d;text-transform:uppercase;margin-bottom:8px}
.ovassets-hd .dim{font-weight:600;letter-spacing:.02em;text-transform:none}
.ovasset{display:flex;align-items:flex-start;gap:10px;padding:8px 9px;border-radius:7px;background:rgba(255,194,77,.05);border:1px solid rgba(255,194,77,.22);margin-bottom:6px}
.ovasset:last-child{margin-bottom:0}
.ovasset.bound{background:rgba(63,208,138,.06);border-color:rgba(63,208,138,.3)}
.ova-ic{font-size:17px;flex:none;line-height:1.2}
.ova-main{flex:1;min-width:0}
.ova-t{font-size:11.5px;font-weight:700;color:var(--txt)}
.ova-pending{font-size:9.5px;font-weight:800;letter-spacing:.04em;color:#ffb454;margin-top:2px}
.ova-tag{font-size:10.5px;font-weight:800;color:#41f0ad;margin-top:2px;font-family:var(--mono,monospace)}
.ova-tag .dim{font-weight:600}
.ova-contents{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.ova-line{font-size:9px;font-family:var(--mono,monospace);color:var(--txt2);background:rgba(61,139,245,.12);border:1px solid rgba(61,139,245,.3);border-radius:5px;padding:2px 6px;white-space:nowrap}
.ova-line b{color:#8fd6ff}
.ova-btn{flex:none;align-self:center;white-space:nowrap}
html.theme-light .ova-t{color:#16232e}
html.theme-light .ovbed{background:radial-gradient(140% 120% at 100% 0%,#dbe6ee,#eef3f7)}
html.theme-light .ovnote{color:#5a4a3a}
html.theme-light .ovbx-cust{color:#16232e}

/* ===== Load stage v2 — dock bay → truck, block units, both panels ===== */
.ovlocked{font-size:12px;font-weight:800;color:#04121e;background:linear-gradient(90deg,#41f0ad,#8fe0b0);border-radius:9px;padding:9px 13px;text-align:center;letter-spacing:.02em}
.ovlocked.ul{background:linear-gradient(90deg,#62d0ff,#8fd6ff)}
.ovbed2{display:flex;gap:10px;align-items:stretch;min-height:150px}
.ovdock{flex:0 0 300px;display:flex;flex-direction:column;border:1px solid #223448;border-radius:12px;background:#0d1722;overflow:hidden}
.ovbay-hd{font-size:9px;font-weight:800;letter-spacing:.08em;color:#8fa6b6;text-transform:uppercase;padding:7px 10px;border-bottom:1px solid var(--rule);flex:none}
/* staged blocks WRAP (2-up) and are all visible — no internal scroll */
.ovdock-floor{flex:1;overflow:visible;padding:7px;display:flex;flex-flow:row wrap;align-content:flex-start;gap:6px}
.ovdock-floor .ovblk{flex:1 1 calc(50% - 6px);flex-direction:row;align-items:center;gap:7px;padding:6px 8px;min-height:0;max-width:none}
.ovdock-floor .ovblk-hd{flex:none;flex-direction:column;gap:2px}
.ovdock-floor .ovblk-t{flex:1;font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ovdock-floor .ovblk-sub,.ovdock-floor .ovblk-foot{display:none}
.ovtruck2{flex:1;display:flex;align-items:stretch;border:2px solid #3a5161;border-radius:10px 16px 16px 10px;background:linear-gradient(180deg,#12212e,#0a141d);padding:8px;min-width:0;overflow:hidden;position:relative;box-shadow:inset 0 0 24px rgba(0,0,0,.5)}
.ovtruck-floor{flex:1;display:flex;gap:6px;padding:0 8px;align-items:center;min-width:0;overflow-x:auto}
.ovtruck2 .ovend.cab{width:52px;background:linear-gradient(90deg,rgba(98,208,255,.06),rgba(98,208,255,.20));border-left:2px solid #46617a;border-radius:0 14px 14px 0;margin:-8px -8px -8px 0;justify-content:center;position:relative;z-index:2}
.ovtruck2 .ovend.cab::before{content:"";position:absolute;left:8px;right:9px;top:14px;bottom:14px;border-radius:5px 8px 8px 5px;background:linear-gradient(90deg,rgba(150,220,255,.10),rgba(180,235,255,.30));border:1px solid rgba(150,220,255,.4);box-shadow:inset 0 0 8px rgba(120,200,255,.3)}
.ovtruck2 .ovend.door{border-right:3px dashed #5b7387;margin:-8px 0 -8px -8px;padding-left:8px;position:relative;z-index:2}
/* corrugated reefer floor + subtle rails for a top-down truck look */
.ovtruck2::after{content:"";position:absolute;inset:7px 54px 7px 46px;pointer-events:none;border-radius:6px;z-index:0;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 13px),linear-gradient(180deg,rgba(255,255,255,.03),transparent 30%,transparent 70%,rgba(0,0,0,.25))}
.ovtruck2::before{content:"";position:absolute;left:56px;right:48px;bottom:-4px;height:7px;pointer-events:none;z-index:0;border-radius:0 0 5px 5px;
  background:repeating-linear-gradient(90deg,transparent 0 16px,#04080c 16px 30px,transparent 30px 46px)}
.ovtruck2 .ovtruck-floor{position:relative;z-index:1}
.ovbay-empty{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;font-size:11px;color:var(--txt3);padding:16px;line-height:1.5}
.ovbay-empty b{color:var(--a-load,#ff9a6a);margin:0 .3em}   /* flex trims whitespace around this item → restore the word spacing */
.ovend{flex:none;width:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px;font-weight:900;letter-spacing:.06em;font-size:10.5px;color:#8fa6b6}
.ovend small{font-size:8px;font-weight:700;color:var(--txt3)}
.ovend.door{color:#ffb98a}.ovend.cab{color:#8fd6ff}
.ovblk{position:relative;display:flex;flex-direction:column;gap:2px;min-width:96px;max-width:150px;padding:8px 9px 7px;border-radius:8px;cursor:pointer;flex:0 0 auto;
  background:linear-gradient(160deg,color-mix(in srgb,var(--rc) 34%,#0c1621),color-mix(in srgb,var(--rc) 14%,#0a121b));
  border:1px solid color-mix(in srgb,var(--rc) 60%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);transition:transform .12s,box-shadow .12s}
.ovdock-floor .ovblk{min-width:0;max-width:none}
.ovblk:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.45),0 0 0 1px var(--rc)}
.ovblk-hd{display:flex;align-items:center;gap:6px}
.ovblk-ic{font-size:16px}
.ovblk-lo{margin-left:auto;font-size:8px;font-weight:900;color:#04121e;background:color-mix(in srgb,var(--rc) 80%,#fff);border-radius:5px;padding:1px 5px}
.ovblk-ok{color:#41f0ad;font-weight:900;font-size:11px}
.ovblk-t{font-size:11.5px;font-weight:800;color:#eaf2fa;line-height:1.15}
.ovblk-sub{font-size:9px;font-family:var(--mono,monospace);color:#b9c9d6}
.ovblk-foot{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.ovblk-tag{font-size:8px;font-family:var(--mono,monospace);color:#ffce8a;background:rgba(255,180,84,.14);border-radius:4px;padding:1px 5px}
.ovblk-n{font-size:8px;font-weight:700;color:#8fd6ff;background:rgba(98,208,255,.12);border-radius:4px;padding:1px 5px}
.ovpanels{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:11px}
.ovpanel{border:1px solid #223448;border-radius:10px;background:#0d1722;padding:11px 13px}
.ovpanel-hd{font-size:10px;font-weight:800;letter-spacing:.05em;color:#a9bccb;text-transform:uppercase;margin-bottom:8px}
.ovpanel-hd .dim{font-weight:600;letter-spacing:.02em;text-transform:none}
.ovprod-grid{display:flex;flex-wrap:wrap;gap:6px}
.ovprod{display:flex;align-items:center;gap:6px;font-size:11px;background:#17293a;border:1px solid #26384c;border-radius:7px;padding:5px 9px}
.ovprod .dotc{width:9px;height:9px;border-radius:2px}
.ovprod b{font-weight:700;color:#eaf2fa}
.ovprod-q{font-family:var(--mono,monospace);font-weight:800;color:var(--a-load,#ff9a6a);margin-left:2px}
.ovac-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:7px}
.ovac{display:flex;gap:9px;align-items:flex-start;padding:8px 9px;border-radius:8px;background:rgba(255,194,77,.06);border:1px solid rgba(255,194,77,.24);cursor:pointer}
.ovac.ok{background:rgba(63,208,138,.07);border-color:rgba(63,208,138,.3)}
.ovac-ic{font-size:16px;flex:none}
.ovac-m{min-width:0;display:flex;flex-direction:column;gap:1px}
.ovac-m b{font-size:11px;color:#eaf2fa}
.ovac-sub{font-size:9px;font-family:var(--mono,monospace);color:#ffb454}
.ovac-sub.ok{color:#41f0ad}
.ovac-sub2{font-size:9px;color:var(--txt3)}
/* guided FILO checklist position bar */
.wgl-filobar{display:flex;align-items:stretch;gap:8px;margin:10px 0 4px}
.wgl-end{flex:none;font-size:8px;font-weight:800;letter-spacing:.05em;color:#8fa6b6;text-align:center;line-height:1.2;align-self:center}
.wgl-end small{font-weight:600;color:var(--txt3)}
.wgl-track{flex:1;display:flex;gap:3px;align-items:center}
.wgl-seg{flex:1;min-width:0;height:22px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;border-radius:5px;background:rgba(255,255,255,.06);color:#7f9bb0}
.wgl-seg.on{background:#3be0c4;color:#04121e}
.wgl-seg.cur{background:var(--a-load,#ff9a6a);color:#04121e;box-shadow:0 0 0 2px rgba(255,154,106,.35)}
.wgl-pos{font-size:11px;font-weight:800;color:var(--a-load,#ff9a6a);margin-top:5px}
/* ===== Load stage v2 — LIGHT-THEME surfaces =====
   In dark themes these stay dark consoles (above). In light themes they were still dark boxes
   floating on a light page (black/grey/red mess) — here we remap them to clean light cards, with
   a light-aluminium truck floor that still reads as a truck. ===== */
html.theme-light .ovnote{background:#fff;border-color:var(--rule);color:var(--txt2)}
html.theme-light .ovwt{background:#fff;border-color:var(--rule)}
html.theme-light .ovwt-top b{color:var(--txt2)}
html.theme-light .ovwt-fig{color:var(--txt)}
html.theme-light .ovwt-bar{background:rgba(40,55,75,.08)}
html.theme-light .ovdock{background:#fff;border-color:var(--rule)}
html.theme-light .ovbay-hd{color:var(--txt3);border-bottom-color:var(--rule)}
html.theme-light .ovbay-empty{color:var(--txt3)}
/* truck bed → brushed-aluminium floor */
html.theme-light .ovtruck2{border-color:#b3bdcb;background:linear-gradient(180deg,#eef1f6,#dde3ec);box-shadow:inset 0 0 22px rgba(90,110,135,.14)}
html.theme-light .ovtruck2::after{background:repeating-linear-gradient(0deg,rgba(90,110,135,.06) 0 1px,transparent 1px 13px),linear-gradient(180deg,rgba(255,255,255,.5),transparent 30%,transparent 70%,rgba(90,110,135,.12))}
html.theme-light .ovtruck2::before{background:repeating-linear-gradient(90deg,transparent 0 16px,#b0bac8 16px 30px,transparent 30px 46px)}
html.theme-light .ovtruck2 .ovend.cab{background:linear-gradient(90deg,rgba(47,107,145,.05),rgba(47,107,145,.16));border-left-color:#9fb0c2}
html.theme-light .ovtruck2 .ovend.cab::before{background:linear-gradient(90deg,rgba(80,150,195,.14),rgba(120,185,225,.3));border-color:rgba(80,150,195,.4);box-shadow:inset 0 0 8px rgba(80,150,195,.22)}
html.theme-light .ovtruck2 .ovend.door{border-right-color:#c79a72}
html.theme-light .ovend{color:var(--txt2)}
html.theme-light .ovend small{color:var(--txt3)}
html.theme-light .ovend.door{color:#b0592f}
html.theme-light .ovend.door span{background:rgba(176,89,47,.1);border-color:rgba(176,89,47,.4)}
html.theme-light .ovend.cab{color:#2f6b91}
html.theme-light .ovend.cab span{background:rgba(47,107,145,.1);border-color:rgba(47,107,145,.34);color:#2f6b91}
/* blocks → light tint of their accent, dark text */
html.theme-light .ovblk{background:linear-gradient(160deg,color-mix(in srgb,var(--rc) 22%,#fff),color-mix(in srgb,var(--rc) 8%,#fff));border-color:color-mix(in srgb,var(--rc) 52%,#c6cdda);box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
html.theme-light .ovblk:hover{box-shadow:0 6px 16px rgba(60,80,105,.18),0 0 0 1px var(--rc)}
html.theme-light .ovblk-t{color:var(--txt)}
html.theme-light .ovblk-sub{color:var(--txt2)}
html.theme-light .ovblk-tag{color:#8a5a1a;background:rgba(200,140,40,.16)}
html.theme-light .ovblk-n{color:#2f6b91;background:rgba(47,107,145,.12)}
/* panels + chips */
html.theme-light .ovpanel{background:#fff;border-color:var(--rule)}
html.theme-light .ovpanel-hd{color:var(--txt2)}
html.theme-light .ovprod{background:#eef2f7;border-color:var(--rule)}
html.theme-light .ovprod b{color:var(--txt)}
html.theme-light .ovac{background:rgba(200,150,40,.09);border-color:rgba(200,150,40,.3)}
html.theme-light .ovac.ok{background:rgba(47,117,86,.09);border-color:rgba(47,117,86,.32)}
html.theme-light .ovac-m b{color:var(--txt)}
html.theme-light .ovac-sub{color:#8a5a1a}
html.theme-light .ovac-sub.ok{color:#2f7556}
html.theme-light .ovac-sub2{color:var(--txt3)}
/* status strips */
html.theme-light .ovok{color:#256a48;background:rgba(47,117,86,.1);border-color:rgba(47,117,86,.32)}
html.theme-light .ovalert{color:#9a3f2a;background:rgba(200,70,50,.09);border-color:rgba(200,70,50,.3)}
html.theme-light .ovalert b{color:#b23d22}
/* guided FILO checklist strip */
html.theme-light .wgl-end{color:var(--txt2)}
html.theme-light .wgl-seg{background:rgba(40,55,75,.08);color:var(--txt3)}
/* guided FILO modal — light-theme surfaces (was a dark card on a light page) */
html.theme-light .wgl-card{background:#fff;color:var(--txt);border-color:var(--rule)}
html.theme-light .wgl-h,html.theme-light .wgl-cur b{color:var(--txt)}
html.theme-light .wgl-card .dim{color:var(--txt3)}
html.theme-light .wgl-ic{background:rgba(40,55,75,.05);border-color:rgba(40,55,75,.2)}
html.theme-light .wgl-row{color:var(--txt)}
html.theme-light .wgl-card .nxam-x{background:rgba(40,55,75,.06);border-color:var(--rule2);color:var(--txt2)}

/* ===== Loading screen: date-nav driven (load today/future · unload past) ===== */
.loadwrap{display:flex;flex-direction:column;height:100%;gap:10px}
.loaddatebar{position:static;transform:none;top:auto;left:auto;right:auto;bottom:auto;align-self:center;z-index:1}

/* ---- Payment modal ---- */
.pay-ov{position:fixed;inset:0;z-index:4000;background:rgba(0,0,0,.55);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;padding:20px}
.pay-card{width:min(420px,94vw);max-height:92vh;overflow:auto;background:var(--pane);border:1px solid var(--rule2);box-shadow:0 18px 60px rgba(0,0,0,.5)}
.pay-body{padding:12px 14px;display:flex;flex-direction:column;gap:3px}
.pay-body .kv{display:flex;justify-content:space-between;align-items:center;padding:2px 0 8px;font-size:11px;border-bottom:1px solid var(--rule);margin-bottom:8px}
.pay-l{font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--txt3);margin:8px 0 3px}
.pay-body input,.pay-body select{background:var(--pane2);border:1px solid var(--rule2);color:var(--txt);border-radius:5px;padding:6px 8px;font:inherit;font-size:12px;width:100%;box-sizing:border-box}
.pay-body input:focus,.pay-body select:focus{outline:none;border-color:var(--a-feed);box-shadow:0 0 0 3px color-mix(in srgb,var(--a-feed) 22%,transparent)}
.pay-amt-row{display:flex;gap:6px;align-items:center}
.pay-amt-row input{flex:1}
.pay-acts{display:flex;justify-content:flex-end;gap:8px;padding:10px 14px;border-top:1px solid var(--rule)}
.pay-acts .miniact{font-size:11px;padding:6px 14px}
.pay-go{background:var(--pos);color:var(--ink);border-color:transparent}
.pay-go:hover{background:var(--pos);color:var(--ink);filter:brightness(1.08)}
.pay-go:disabled{opacity:.6;cursor:default}
.pay-err{background:color-mix(in srgb,var(--neg) 16%,transparent);border:1px solid var(--neg);color:var(--neg);border-radius:5px;padding:7px 10px;font-size:11px;font-weight:600;margin-bottom:6px}
/* ---- User Management: permissions editor ---- */
.permfeatlist{border-right:1px solid var(--rule);overflow:auto;background:var(--bg2)}
.permfeat{display:flex;justify-content:space-between;align-items:center;padding:8px 11px;font-size:11.5px;cursor:pointer;border-bottom:1px solid var(--rule)}
.permfeat:hover{background:var(--hover)}
.permfeat.on{background:color-mix(in srgb,var(--a-assign) 16%,transparent);border-left:3px solid var(--a-assign);font-weight:600}
.permfeat-n{font-size:9px;color:var(--txt3);font-family:var(--mono,monospace)}
.permfeat-n.has{color:var(--a-assign)}
.permpane{overflow:auto;padding:12px 14px}
.permgroup{margin-bottom:12px;border:1px solid var(--rule2);border-radius:7px;overflow:hidden}
.permgroup-h{display:flex;align-items:center;gap:7px;background:var(--head);padding:7px 10px;font-size:11.5px;cursor:pointer;margin:0}
.permgroup-body{padding:7px 12px;display:grid;grid-template-columns:1fr 1fr;gap:2px 16px}
.permchk{display:flex;align-items:center;gap:7px;font-size:11px;padding:3px 0;cursor:pointer}
.permchk input{cursor:pointer;flex:none}
/* AI optimization mode toggle (Settings) */
.optmode{flex:1;display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;padding:9px 11px;border:1px solid var(--rule);border-radius:7px;background:var(--bg2);color:var(--txt);cursor:pointer;font-family:inherit}
.optmode:hover:not(:disabled){border-color:var(--a-assign)}
.optmode.on{border-color:var(--a-assign);background:color-mix(in srgb,var(--a-assign) 15%,transparent)}
.optmode b{font-size:12px}
.optmode span{font-size:9.5px;color:var(--txt3)}
.optmode:disabled{opacity:.5;cursor:not-allowed}
/* Monitor Agent — propose modal */
.opt-card{width:440px;max-width:94vw}
.opt-body{display:block}
.opt-row{display:flex;gap:10px;padding:4px 0;font-size:11.5px}
.opt-k{flex:none;width:64px;color:var(--txt3);text-transform:uppercase;font-size:9px;letter-spacing:.08em;padding-top:2px}
.opt-v{flex:1}
.opt-sec{margin:8px 0 3px;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--a-assign)}
.opt-why{margin:0 0 4px;padding-left:16px;font-size:11px;line-height:1.5}
.opt-why li{margin:1px 0}
.opt-risk{margin-top:7px;padding:6px 9px;border:1px solid var(--warn,#ffb454);border-radius:6px;background:color-mix(in srgb,var(--warn,#ffb454) 13%,transparent);color:var(--warn,#ffb454);font-size:11px}
.opt-diff{width:100%;border-collapse:collapse;font-size:11px;margin:2px 0 4px}
.opt-diff td{padding:2px 6px;border-bottom:1px solid var(--rule)}
.opt-diff-seq{width:22px;text-align:center;color:var(--a-assign);font-weight:700}
.opt-hint{margin-top:9px;padding:7px 9px;border:1px dashed var(--a-map);border-radius:6px;font-size:10.5px;color:var(--txt2)}
.opt-acts{display:flex;align-items:center;gap:6px}
/* ⚡ Route AI Optimization affordances on Dispatch */
.ai-opt-badge{margin-left:auto;border:1px solid var(--a-assign);background:color-mix(in srgb,var(--a-assign) 20%,transparent);color:var(--a-assign);border-radius:5px;font-size:10px;line-height:1;padding:2px 5px;cursor:pointer;animation:aiOptPulse 1.6s ease-in-out infinite}
.ai-opt-icon{margin-left:6px;border:1px solid var(--a-assign);background:color-mix(in srgb,var(--a-assign) 18%,transparent);color:var(--a-assign);border-radius:5px;font-size:9.5px;font-weight:700;padding:2px 6px;cursor:pointer}
.ai-opt-dot{margin-left:6px;color:var(--a-assign);cursor:pointer;font-size:11px}
/* #109 - a pending proposal MARKS its stop; it does not select it. This was a 2px outline with a
   tinted fill - heavier than the row the dispatcher had just clicked, so Brian saw Babylon Town IGA
   "heavily designated" while the stop he picked got a faint fill. A thin right-edge tick + the ⚡. */
tr.ai-opt-focus td:last-child{box-shadow:inset -3px 0 0 var(--a-assign)}
@keyframes aiOptPulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--a-assign) 55%,transparent)}50%{box-shadow:0 0 0 4px transparent}}
/* Optimization Guide (Radar + Dispatch) */
.og-btn{font-size:10px;padding:3px 8px;border:1px solid var(--rule);border-radius:5px;background:var(--bg2);color:var(--txt2);cursor:pointer;font-family:inherit}
.og-btn.on,.og-btn:hover{border-color:var(--a-assign);color:var(--txt)}
.og-panel{position:fixed;z-index:1200;top:92px;right:16px;width:300px;max-height:74vh;overflow:auto;background:var(--bg2);border:1px solid var(--a-assign);border-radius:8px;padding:11px 13px;box-shadow:0 18px 60px rgba(0,0,0,.6)}
.og-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:-2px 0 8px;font-weight:800;font-size:12px;letter-spacing:.03em;color:var(--a-assign)}
.og-x{border:1px solid var(--rule2);background:var(--pane2);color:var(--txt2);width:24px;height:24px;border-radius:6px;font-size:12px;cursor:pointer;flex:none;display:grid;place-items:center}
.og-x:hover{background:var(--neg);color:#fff;border-color:transparent}
.og-mode{font-size:11px;margin-bottom:8px;padding-bottom:7px;border-bottom:1px solid var(--rule)}
.og-h{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--a-assign);margin:9px 0 4px}
.og-hard{margin:0;padding-left:15px;font-size:10.5px;line-height:1.5}
.og-band{font-size:9.5px;color:var(--txt3);margin:6px 0 2px;font-weight:700}
.og-item{font-size:10.5px;padding:1px 0 1px 8px;border-left:2px solid var(--rule)}

/* Paused AI-Optimization digest — a non-modal side pop-up compiling suggestions (never takes over the screen) */
.optdg-panel{position:fixed;z-index:1200;bottom:16px;right:16px;width:320px;max-height:70vh;overflow:auto;background:var(--bg2);border:1px solid var(--a-assign);border-radius:8px;padding:11px 13px;box-shadow:0 18px 60px rgba(0,0,0,.6)}
.optdg-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:-2px 0 6px;font-weight:800;font-size:12px;letter-spacing:.03em;color:var(--a-assign)}
.optdg-sub{font-size:10px;color:var(--txt3);margin:0 0 8px;padding-bottom:7px;border-bottom:1px solid var(--rule)}
.optdg-sub a{color:var(--a-assign);text-decoration:none}.optdg-sub a:hover{text-decoration:underline}
.optdg-item{padding:7px 0;border-bottom:1px solid var(--rule)}
.optdg-item:last-child{border-bottom:0}
.optdg-sum{font-size:11.5px;font-weight:700;color:var(--txt)}
.optdg-trig{font-size:10px;color:var(--txt2);margin-top:2px}
.optdg-why{font-size:9.5px;color:var(--txt3);margin-top:2px}
.optdg-acts{display:flex;gap:6px;margin-top:6px}
.optdg-b{flex:1;font:inherit;font-size:10px;padding:4px 6px;border:1px solid var(--rule2);background:var(--pane2);color:var(--txt2);border-radius:5px;cursor:pointer}
.optdg-b:hover{border-color:var(--a-assign);color:var(--txt)}
.optdg-b.neg:hover{border-color:var(--neg);color:var(--neg)}
.optdg-b.go{background:var(--a-assign);border-color:var(--a-assign);color:#0b0e13;font-weight:700}
.optpause-b b{font-weight:700}
.optpause-on{font-size:11px;color:var(--txt);background:var(--pane2);border:1px solid var(--rule2);border-radius:7px;padding:9px 11px}

/* ===================== TALK TO PLATFORM (voice console) ===================== */
:root{--talk-ac:var(--a-map)}
/* floating button — present on every screen, above Test Assist. Quiet accent glass, not candy. */
.talk-fab{display:inline-flex;align-items:center;gap:7px;background:linear-gradient(135deg,var(--talk-ac),#2f8fff);
  color:#04121e;border:none;border-radius:22px;padding:10px 18px;font-weight:800;font-size:12.5px;letter-spacing:.02em;
  box-shadow:0 6px 22px color-mix(in srgb,var(--talk-ac) 48%,transparent),0 2px 6px rgba(0,0,0,.4)}
.talk-fab svg{width:16px;height:16px;stroke:currentColor;stroke-width:2}
.talk-fab:hover{filter:brightness(1.08);transform:translateY(-1px)}
/* Driver App: big low-center hands-free target */
/* Circular thumb-corner mic on the handheld (Brian #58). 64px is a comfortable gloved target and
   clears the stop card's action button, which the full-width pill used to sit on top of. */
.talk-fab-drv{width:64px;height:64px;padding:0;border-radius:50%;gap:0;justify-content:center;
  box-shadow:0 8px 28px rgba(47,143,255,.55)}
.talk-fab-drv svg{width:26px;height:26px}
.talk-fab-drv span{display:none}
.talk-fab-drv:hover{transform:translateY(-1px)}

/* full-screen overlay */
#talkOverlay{position:fixed;inset:0;z-index:3200;display:none;
  background:radial-gradient(1200px 800px at 50% -8%,color-mix(in srgb,var(--talk-ac) 8%,transparent),transparent 58%),linear-gradient(180deg,var(--bg2),var(--bg));
  backdrop-filter:blur(8px)}
#talkOverlay.on{display:block;animation:talkFade .26s ease}
@keyframes talkFade{from{opacity:0}to{opacity:1}}
.talk{max-width:720px;height:100%;margin:0 auto;display:flex;flex-direction:column;padding:26px 24px 20px}

/* header */
.talk-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex:none;padding-bottom:16px;border-bottom:1px solid var(--rule)}
.talk-eyebrow{display:flex;align-items:center;gap:7px;font:600 10px/1 var(--mono);letter-spacing:.28em;text-transform:uppercase;color:var(--talk-ac);opacity:.85;margin-bottom:9px}
.talk-eyebrow svg{width:13px;height:13px;stroke:currentColor}
.talk-hd h2{margin:0;font-size:20px;font-weight:600;letter-spacing:-.01em;color:var(--txt)}
.talk-sub{font-size:12px;color:var(--txt3);margin-top:6px;max-width:430px;line-height:1.55}
.talk-hdr{display:flex;align-items:center;gap:8px;flex:none}
.talk-langchip{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid var(--rule2);color:var(--txt2);border-radius:9px;padding:7px 11px;font-size:11px;font-weight:500;white-space:nowrap}
.talk-langchip:hover{border-color:var(--talk-ac);color:var(--txt)}
.talk-caret{color:var(--txt3);font-size:9px}
.talk-x{background:transparent;border:1px solid var(--rule);color:var(--txt3);border-radius:9px;width:34px;height:34px;font-size:14px;line-height:1;flex:none}
.talk-x:hover{border-color:var(--txt2);color:var(--txt)}
.talk-langmenu{position:fixed;z-index:3400;background:var(--pane2);border:1px solid var(--rule2);border-radius:11px;padding:6px;
  box-shadow:0 18px 50px var(--shadow);display:flex;flex-direction:column;gap:1px;min-width:200px}
.talk-langmenu button{background:transparent;border:none;text-align:left;color:var(--txt2);padding:9px 12px;border-radius:8px;font-size:12px}
.talk-langmenu button:hover{background:var(--hover);color:var(--txt)}
.talk-langmenu button.on{color:var(--talk-ac);font-weight:600}

/* transcript */
.talk-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:18px 2px;min-height:0}
.talk-log{display:flex;flex-direction:column;gap:16px}
.talk-empty{text-align:center;color:var(--txt3);font-size:12px;padding:44px 10px;line-height:1.6}
.talk-log .tb{display:flex;gap:11px;max-width:86%;animation:talkBub .24s ease}
@keyframes talkBub{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.talk-log .tb-user{align-self:flex-end;flex-direction:row-reverse}
.talk-log .tb-av{width:28px;height:28px;flex:none;border-radius:9px;display:grid;place-items:center;background:var(--pane2);
  border:1px solid var(--rule2);color:var(--talk-ac);font-size:13px;margin-top:1px}
.talk-log .tb-wrap{display:flex;flex-direction:column;gap:5px;min-width:0}
.talk-log .tb-body{background:var(--pane);border:1px solid var(--rule);border-radius:5px 13px 13px 13px;padding:11px 15px;font-size:13.5px;line-height:1.55;word-break:break-word;color:var(--txt2)}
.talk-log .tb-user .tb-body{background:color-mix(in srgb,var(--talk-ac) 13%,var(--pane));border-color:color-mix(in srgb,var(--talk-ac) 32%,var(--rule));color:var(--txt);border-radius:13px 13px 5px 13px}
.talk-log .tb-body b{color:var(--txt);font-weight:600}
.talk-log .tb-ts{font:500 9px/1 var(--mono);color:var(--txt3);letter-spacing:.14em;padding:0 3px}
.talk-log .tb-user .tb-ts{text-align:right}
.talk-log .tb-ref{margin-top:6px;padding:7px 11px;background:var(--bg2);border:1px solid var(--rule);border-radius:9px;font-size:12px}
.talk-log .tb-acted{margin-top:9px;font:600 10px/1.3 var(--mono);letter-spacing:.05em;color:var(--pos);display:flex;align-items:center;gap:6px}
.talk-actions{margin-top:11px}
.talk-gobtn{background:color-mix(in srgb,var(--a-assign) 16%,transparent);border:1px solid color-mix(in srgb,var(--a-assign) 55%,var(--rule));
  color:var(--a-assign);border-radius:9px;padding:8px 14px;font-size:12px;font-weight:600;letter-spacing:.01em}
.talk-gobtn:hover{background:color-mix(in srgb,var(--a-assign) 28%,transparent);color:var(--txt)}
.talk-confirm{display:flex;gap:22px;margin-top:14px}
.tc-yes,.tc-no{border-radius:9px;padding:9px 18px;font-size:12.5px;font-weight:600;border:1px solid;letter-spacing:.01em;min-width:104px;text-align:center}
.tc-yes{background:var(--talk-ac);border-color:var(--talk-ac);color:var(--ink)}
.tc-yes:hover{filter:brightness(1.09)}
.tc-no{background:transparent;border-color:var(--rule2);color:var(--txt2)}
.tc-no:hover{border-color:var(--txt2);color:var(--txt)}

/* suggestion chips */
.talk-sugg{flex:none;display:flex;flex-wrap:wrap;gap:8px;padding:16px 0 6px;justify-content:center}
.talk-chip{background:transparent;border:1px solid var(--rule);color:var(--txt3);border-radius:9px;padding:8px 13px;font-size:11.5px;font-weight:500;transition:.14s}
.talk-chip:hover{border-color:var(--talk-ac);color:var(--txt);background:color-mix(in srgb,var(--talk-ac) 8%,transparent)}

/* the mic console */
.talk-stage{flex:none;display:flex;flex-direction:column;align-items:center;gap:17px;padding:12px 0 6px}
.talk-orb{position:relative;width:124px;height:124px;border-radius:50%;border:none;flex:none;cursor:pointer;color:var(--talk-ac);
  background:radial-gradient(circle at 50% 42%,var(--pane2),var(--pane));
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--talk-ac) 20%,transparent),0 10px 34px rgba(0,0,0,.42);
  display:grid;place-items:center;transition:transform .16s,box-shadow .28s}
.talk-orb::before{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid color-mix(in srgb,var(--talk-ac) 42%,transparent)}
.talk-orb::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid color-mix(in srgb,var(--talk-ac) 28%,transparent);animation:talkBreath 3.8s ease-in-out infinite}
@keyframes talkBreath{0%,100%{transform:scale(1);opacity:.4}50%{transform:scale(1.13);opacity:0}}
.talk-orb:hover{box-shadow:inset 0 1px 0 color-mix(in srgb,var(--talk-ac) 28%,transparent),0 10px 38px rgba(0,0,0,.46),0 0 0 6px color-mix(in srgb,var(--talk-ac) 6%,transparent)}
.talk-orb:active{transform:scale(.96)}
.talk-orb .talk-mic{z-index:3;display:grid;place-items:center;transition:opacity .2s}
.talk-orb .talk-mic svg{width:36px;height:36px;stroke:currentColor}
.talk-orb .talk-ring{position:absolute;inset:0;border-radius:50%;border:1px solid var(--talk-ac);opacity:0;z-index:1}
.talk-orb .talk-wave{position:absolute;z-index:3;display:none;align-items:center;gap:3px;height:36px}
.talk-orb .talk-wave i{width:3px;height:8px;border-radius:3px;background:var(--talk-ac)}
/* LISTENING — calm accent: soft halo + concentric pulses + audio meter (no glyph) */
.talk-orb.listening{box-shadow:inset 0 1px 0 color-mix(in srgb,var(--talk-ac) 30%,transparent),0 10px 34px rgba(0,0,0,.42),0 0 0 1px color-mix(in srgb,var(--talk-ac) 42%,transparent),0 0 40px color-mix(in srgb,var(--talk-ac) 26%,transparent)}
.talk-orb.listening::after{animation:none;opacity:0}
.talk-orb.listening .talk-mic{opacity:0}
.talk-orb.listening .talk-ring{animation:talkRing 2.3s ease-out infinite}
.talk-orb.listening .talk-ring.r2{animation-delay:.77s}
.talk-orb.listening .talk-ring.r3{animation-delay:1.54s}
@keyframes talkRing{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.95);opacity:0}}
.talk-orb.listening .talk-wave{display:flex}
.talk-orb.listening .talk-wave i{animation:talkWave 1.1s ease-in-out infinite}
.talk-orb .talk-wave i:nth-child(1){animation-delay:0s}.talk-orb .talk-wave i:nth-child(2){animation-delay:.13s}
.talk-orb .talk-wave i:nth-child(3){animation-delay:.26s}.talk-orb .talk-wave i:nth-child(4){animation-delay:.39s}
.talk-orb .talk-wave i:nth-child(5){animation-delay:.26s}.talk-orb .talk-wave i:nth-child(6){animation-delay:.13s}
.talk-orb .talk-wave i:nth-child(7){animation-delay:0s}
@keyframes talkWave{0%,100%{height:6px;opacity:.6}50%{height:30px;opacity:1}}
/* THINKING — a single quiet arc sweeps */
.talk-orb.thinking .talk-mic{opacity:.3}
.talk-orb.thinking::after{inset:5px;border:1.5px solid transparent;border-top-color:var(--talk-ac);opacity:1;animation:talkSpin 1.1s linear infinite}
@keyframes talkSpin{to{transform:rotate(360deg)}}
/* SPEAKING — gentle meter */
.talk-orb.speaking .talk-mic{opacity:0}
.talk-orb.speaking .talk-wave{display:flex}
.talk-orb.speaking .talk-wave i{animation:talkWave .82s ease-in-out infinite}
.talk-status{font:600 10.5px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--txt3);min-height:13px;text-align:center}
.talk-done{display:none;cursor:pointer;border:none}
.talk-done.on{display:inline-flex;align-items:center;gap:10px;padding:17px 48px;border-radius:34px;color:#04121e;
  font:800 16px/1 var(--sans,inherit);letter-spacing:.06em;text-transform:none;
  background:linear-gradient(135deg,var(--talk-ac,#5ad1ff),#2f8fff);box-shadow:0 10px 30px rgba(47,143,255,.5);
  animation:talkDonePulse 1.7s ease-in-out infinite}
.talk-done.on::before{content:"■";font-size:13px}
.talk-done.on:hover{filter:brightness(1.07);transform:translateY(-1px)}
@keyframes talkDonePulse{0%,100%{box-shadow:0 10px 28px rgba(47,143,255,.4)}50%{box-shadow:0 12px 40px rgba(47,143,255,.8)}}
/* STOP — cut off the assistant while it's speaking/thinking (barge-in). Clear red control. */
.talk-stop{display:none;cursor:pointer;border:none}
.talk-stop.on{display:inline-flex;align-items:center;gap:10px;padding:17px 46px;border-radius:34px;color:#fff;
  font:800 16px/1 var(--sans,inherit);letter-spacing:.06em;
  background:linear-gradient(135deg,#ff5f7a,#d1495b);box-shadow:0 10px 30px rgba(209,73,91,.5);
  animation:talkStopPulse 1.5s ease-in-out infinite}
.talk-stop.on:hover{filter:brightness(1.07);transform:translateY(-1px)}
@keyframes talkStopPulse{0%,100%{box-shadow:0 10px 26px rgba(209,73,91,.42)}50%{box-shadow:0 12px 42px rgba(209,73,91,.85)}}
/* type fallback */
.talk-typebar{flex:none;display:flex;gap:9px;margin-top:14px}
.talk-typebar input{flex:1;background:var(--pane);border:1px solid var(--rule2);color:var(--txt);border-radius:11px;padding:12px 15px;font:inherit;font-size:13px}
.talk-typebar input::placeholder{color:var(--txt3)}
.talk-typebar input:focus{outline:none;border-color:var(--talk-ac)}
.talk-typebar button{background:transparent;color:var(--talk-ac);border:1px solid var(--rule2);border-radius:11px;width:46px;font-size:15px;flex:none}
.talk-typebar button:hover{border-color:var(--talk-ac)}
/* mobile: whole screen, comfy targets */
@media (max-width:820px){
  .talk{padding:18px 14px 14px;max-width:none}
  .talk-hd h2{font-size:18px}.talk-sub{display:none}
  .talk-orb{width:116px;height:116px}
}
@media (prefers-reduced-motion:reduce){
  .talk-orb::after,.talk-orb .talk-ring,.talk-orb .talk-wave i{animation:none!important}
}

/* ===================== ICE SCULPTURE STUDIO ===================== */
.studio{height:100%;display:flex;flex-direction:column}
.studio-top{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--rule)}
.studio-tabs{display:flex;gap:6px}
.studio-tabs .stab{background:var(--pane);border:1px solid var(--rule2);color:var(--txt2);border-radius:9px;padding:8px 14px;font-size:12px;font-weight:600}
.studio-tabs .stab.on{background:color-mix(in srgb,var(--a-map) 18%,var(--pane));border-color:var(--a-map);color:var(--txt)}
.studio-new{background:linear-gradient(135deg,var(--a-map),#3f9dff);color:#04121e;border:none;border-radius:9px;padding:9px 15px;font-weight:800;font-size:12px}
.studio-new:hover{filter:brightness(1.08)}
.studio-board{flex:1;min-height:0;display:flex;gap:12px;padding:14px 16px;overflow-x:auto;overflow-y:hidden}
/* #11 Melt Runway */
.rway{padding:14px 16px}
.rway-hd{font-size:12px;color:var(--txt2);line-height:1.5;margin-bottom:12px} .rway-hd b{color:var(--txt)} .rway-hd b.neg{color:var(--neg)}
.rway-empty{color:var(--txt3);font-size:12px;padding:20px}
.rway-list{display:flex;flex-direction:column;gap:10px}
.rw-card{background:var(--pane);border:1px solid var(--rule);border-left:3px solid var(--a-cover,#3be0c4);border-radius:10px;padding:11px 13px;cursor:pointer;transition:.13s}
.rw-card:hover{border-color:var(--rule2);transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.28)}
.rw-card.behind,.rw-card.late,.rw-card.passed{border-left-color:var(--neg)}
.rw-card.holding{border-left-color:var(--a-map,#5ad1ff)} .rw-card.shipnow{border-left-color:var(--warn)}
.rw-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:3px}
.rw-ttl b{font-size:13px} .rw-ttl .dim{font-size:11px}
.rw-chip{font:800 9px/1.5 var(--mono);letter-spacing:.03em;padding:2px 9px;border-radius:999px;border:1px solid;white-space:nowrap}
.rw-ontrack{color:var(--pos);border-color:color-mix(in srgb,var(--pos) 45%,transparent);background:color-mix(in srgb,var(--pos) 12%,transparent)}
.rw-behind,.rw-late,.rw-passed,.rw-shipnow{color:var(--neg);border-color:color-mix(in srgb,var(--neg) 50%,transparent);background:color-mix(in srgb,var(--neg) 12%,transparent)}
.rw-shipnow{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 50%,transparent);background:color-mix(in srgb,var(--warn) 12%,transparent)}
.rw-holding{color:var(--a-map,#5ad1ff);border-color:color-mix(in srgb,var(--a-map) 45%,transparent);background:color-mix(in srgb,var(--a-map) 12%,transparent)}
.rw-meta{font-size:10.5px;color:var(--txt3);margin-bottom:8px}
.rw-bar{display:flex;align-items:stretch;gap:2px;height:20px;border-radius:6px;overflow:hidden;background:var(--pane2);position:relative}
.rw-seg{display:flex;align-items:center;justify-content:center;font:700 8px/1 var(--mono);letter-spacing:.02em;color:#06121c;white-space:nowrap;overflow:hidden;min-width:0}
.rw-seg.slack{background:var(--rule2);color:var(--txt3)}
.rw-seg.prod{background:var(--a-cover,#3be0c4)} .rw-seg.hold{background:var(--a-map,#5ad1ff)}
.rw-seg.deliver{background:var(--warn)} .rw-seg.behind,.rw-seg.late{background:var(--neg);color:#fff;animation:bl 1.1s infinite}
.rw-event{position:absolute;right:0;top:50%;transform:translate(40%,-50%);font-size:13px}
.rw-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px;font-size:10.5px;color:var(--txt2)} .rw-legend b{color:var(--txt)} .rw-legend .neg{color:var(--neg)} .rw-legend .dim{color:var(--txt3)}
.scol{flex:1 1 0;min-width:186px;display:flex;flex-direction:column;min-height:0;background:var(--bg2);border:1px solid var(--rule);border-radius:12px}
.scol.drop{border-color:var(--a-map);box-shadow:0 0 0 2px color-mix(in srgb,var(--a-map) 30%,transparent)}
.scol-h{flex:none;display:flex;align-items:center;gap:7px;padding:11px 13px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--txt2);border-bottom:1px solid var(--rule)}
.scol-dot{width:8px;height:8px;border-radius:50%;background:var(--sc);box-shadow:0 0 8px var(--sc)}
.col-cap{margin-left:auto;font:600 10px/1 var(--mono);color:var(--txt3);background:var(--pane);border:1px solid var(--rule);border-radius:20px;padding:3px 8px}
.col-cap.over{color:var(--neg);border-color:var(--neg)}
.scol-body{flex:1;min-height:0;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:9px}
.scol-empty{color:var(--txt3);font-size:11px;text-align:center;padding:14px 0}
.scard{background:var(--pane);border:1px solid var(--rule2);border-left:3px solid var(--a-map);border-radius:9px;padding:10px 11px;cursor:pointer;transition:.14s}
.scard:hover{border-color:var(--a-map);transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.35)}
.scard.meltrisk{border-left-color:var(--neg)}
.scard-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.scard-title{font-size:13px;font-weight:700;color:var(--txt)}
.scard-parts{font:600 9px/1 var(--mono);color:var(--txt3);white-space:nowrap}
.scard-cust{font-size:11px;color:var(--txt2);margin-top:3px}
.scard-id{font-family:var(--mono);color:var(--txt3);font-size:10px}
.scard-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px}
.scard-meta span{font:600 9.5px/1 var(--mono);letter-spacing:.02em;border-radius:20px;padding:3px 7px;border:1px solid var(--rule)}
.scard-kind{color:var(--txt2)}.scard-kind.custom{color:var(--a-map)}
.scard-ver{color:var(--warn)}
.scard-timer{color:var(--txt2)}.scard-timer.risk{color:var(--neg);border-color:var(--neg)}
.scard-pp{color:var(--txt3)}
.scard-msgs{color:var(--a-assign)}
.sculpt-drawer{position:fixed;top:47px;bottom:0;right:0;width:min(460px,94vw);z-index:2600;background:var(--bg2);border-left:1px solid var(--rule2);box-shadow:-14px 0 44px var(--shadow);transform:translateX(102%);transition:transform .26s cubic-bezier(.4,0,.2,1);overflow-y:auto}
.sculpt-drawer.on{transform:none}
.sd-in{padding:18px 18px 30px}
.sd-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--rule)}
.sd-eyebrow{font:600 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--a-map);margin-bottom:7px}
.sd-h h3{margin:0;font-size:18px;font-weight:600;color:var(--txt)}
.sd-sub{font-size:11.5px;color:var(--txt3);margin-top:5px;line-height:1.5}
.sd-kind{text-transform:capitalize}.sd-kind.custom{color:var(--a-map)}
.sd-x{background:transparent;border:1px solid var(--rule);color:var(--txt3);border-radius:9px;width:32px;height:32px;flex:none;font-size:14px}
.sd-x:hover{border-color:var(--txt2);color:var(--txt)}
.sd-stage{padding:14px 0;border-bottom:1px solid var(--rule)}
.sd-stageline{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.sd-step{font:600 10px/1 var(--mono);letter-spacing:.03em;color:var(--txt3);padding:5px 8px;border:1px solid var(--rule);border-radius:20px}
.sd-step.done{color:var(--txt2);border-color:var(--rule2)}
.sd-step.now{color:#04121e;background:var(--sc);border-color:var(--sc)}
.sd-arrow{color:var(--txt3);font-size:11px}
.sd-melt{margin-top:11px;font:600 11px/1 var(--mono);color:var(--txt2)}
.sd-melt.risk{color:var(--neg)}
.sd-sec{padding:14px 0;border-bottom:1px solid var(--rule)}
.sd-sech{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--txt);margin-bottom:11px}
.sd-mini{margin-left:auto;background:var(--pane);border:1px solid var(--rule2);color:var(--txt2);border-radius:7px;padding:5px 10px;font-size:11px}
.sd-mini:hover{border-color:var(--a-map);color:var(--txt)}
.sd-vers{display:flex;flex-direction:column;gap:9px;margin-bottom:12px}
.sd-ver{display:flex;gap:9px}
.sd-vtag{flex:none;font:700 10px/1 var(--mono);color:var(--warn);background:color-mix(in srgb,var(--warn) 14%,transparent);border:1px solid color-mix(in srgb,var(--warn) 40%,var(--rule));border-radius:6px;padding:5px 7px;height:fit-content}
.sd-vnote{font-size:12px;color:var(--txt);line-height:1.45}
.sd-vmeta{font:500 9px/1 var(--mono);color:var(--txt3);letter-spacing:.08em;margin-top:4px}
.sd-flow{display:flex;flex-wrap:wrap;gap:9px}
.sd-adv{background:var(--pane);border:1px solid var(--a-map);color:var(--a-map);border-radius:9px;padding:9px 15px;font-size:12px;font-weight:700}
.sd-adv:hover{background:color-mix(in srgb,var(--a-map) 16%,transparent)}
.sd-esign{background:linear-gradient(135deg,var(--pos),#2fb98a);color:#04140e;border:none;border-radius:9px;padding:9px 15px;font-size:12px;font-weight:800}
.sd-esign:hover{filter:brightness(1.08)}
.sd-approved{margin-top:11px;font:600 11px/1.4 var(--mono);color:var(--pos)}
.sd-parts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.sd-part{background:var(--pane);border:1px solid var(--rule2);color:var(--txt2);border-radius:8px;padding:8px 13px;font-size:12px;font-weight:600}
.sd-part.done{border-color:var(--pos);color:var(--pos);background:color-mix(in srgb,var(--pos) 12%,transparent)}
.sd-locked{font-size:11.5px;color:var(--txt3);padding:8px 0}
.sd-thread{display:flex;flex-direction:column;gap:10px;margin-bottom:12px;max-height:320px;overflow-y:auto}
.sd-msg{border:1px solid var(--rule);border-radius:10px;padding:9px 12px}
.sd-msg.in{background:var(--pane);border-left:3px solid var(--a-assign)}
.sd-msg.out{background:color-mix(in srgb,var(--a-map) 8%,var(--pane));border-left:3px solid var(--a-map)}
.sd-msg-h{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--txt2);margin-bottom:5px}
.sd-msg-h b{color:var(--txt);font-size:11.5px}
.sd-chan{font:600 9px/1 var(--mono);letter-spacing:.04em;border-radius:20px;padding:3px 7px;border:1px solid var(--rule)}
.sd-chan.email{color:var(--a-map)}.sd-chan.note{color:var(--txt3)}
.sd-msg-ts{margin-left:auto;font:500 9px/1 var(--mono);color:var(--txt3)}
.sd-msg-subj{font-size:11.5px;font-weight:700;color:var(--txt);margin-bottom:3px}
.sd-msg-body{font-size:12px;color:var(--txt2);line-height:1.5;white-space:pre-wrap}
.sd-compose{display:flex;flex-direction:column;gap:8px}
.sd-chanpick{display:flex;gap:7px}
.sd-cb{background:var(--pane);border:1px solid var(--rule2);color:var(--txt3);border-radius:8px;padding:6px 11px;font-size:11px;font-weight:600}
.sd-cb.on{border-color:var(--a-map);color:var(--txt)}
.sd-subj,.sd-body{background:var(--pane);border:1px solid var(--rule2);color:var(--txt);border-radius:8px;padding:9px 11px;font:inherit;font-size:12px;width:100%}
.sd-body{min-height:64px;resize:vertical}
.sd-subj:focus,.sd-body:focus{outline:none;border-color:var(--a-map)}
.sd-send{align-self:flex-start;background:var(--a-map);color:#04121e;border:none;border-radius:8px;padding:8px 18px;font-size:12px;font-weight:800}
.sd-send:hover{filter:brightness(1.08)}
.sd-form{display:flex;flex-direction:column;gap:6px;padding-top:14px}
.sd-form label{font:600 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--txt3);margin-top:8px}
.sd-form input,.sd-form select{background:var(--pane);border:1px solid var(--rule2);color:var(--txt);border-radius:8px;padding:9px 11px;font:inherit;font-size:12.5px}
.sd-form input:focus,.sd-form select:focus{outline:none;border-color:var(--a-map)}
.sd-toggle{display:flex;gap:7px}
.sd-toggle button{flex:1;background:var(--pane);border:1px solid var(--rule2);color:var(--txt2);border-radius:8px;padding:8px;font-size:12px;font-weight:600}
.sd-toggle button.on{border-color:var(--a-map);color:var(--txt);background:color-mix(in srgb,var(--a-map) 12%,transparent)}
@media (max-width:820px){ .sculpt-drawer{width:100vw} .scol{flex:0 0 200px} }
/* studio tab bodies (dashboard/comms/stock/settings) — Equipment-style shell */
.studio-board{height:100%}
.studio-pad{padding:14px 16px}
.comms-list{display:flex;flex-direction:column;gap:8px}
.comms-row{display:flex;align-items:center;gap:12px;background:var(--pane);border:1px solid var(--rule);border-radius:10px;padding:11px 13px;cursor:pointer;transition:.14s}
.comms-row:hover{border-color:var(--a-map);transform:translateX(2px)}
.comms-ic{width:34px;height:34px;flex:none;border-radius:9px;display:grid;place-items:center;font-size:15px;background:var(--pane2);border:1px solid var(--rule2);color:var(--a-map)}
.comms-b{flex:1;min-width:0}
.comms-t{font-size:13px;font-weight:600;color:var(--txt)}
.comms-last{font-size:11.5px;color:var(--txt3);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.comms-meta{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.comms-n{background:var(--a-map);color:#04121e;border-radius:20px;font:700 10px/1 var(--mono);padding:3px 7px}
.comms-ts{font:500 9px/1 var(--mono);color:var(--txt3)}
/* Correspondence workspace (comms tab) — mailbox-style 3-pane */
.corr-wrap{display:flex;height:100%;min-height:0}
.corr-list{flex:0 0 300px;display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--rule);background:var(--pane)}
.corr-lhd{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 12px 6px}
.corr-unreadall{color:var(--a-map);font-weight:700}
.corr-mbx{font:600 10px/1 var(--mono);color:var(--txt3);border:1px solid var(--rule2);border-radius:20px;padding:4px 9px;cursor:default;white-space:nowrap}
.corr-mbx.live{color:#41f0ad;border-color:rgba(65,240,173,.4)}
.corr-mbx.demo{color:var(--txt3)}
.corr-mbx[onclick]{cursor:pointer;color:var(--a-map);border-color:rgba(90,209,255,.4)}
.corr-search{margin:4px 12px 8px;padding:8px 10px;background:var(--pane2);border:1px solid var(--rule);border-radius:8px;color:var(--txt);font-size:12px}
.corr-people{flex:1;overflow-y:auto;padding:0 8px 10px}
.corr-person{display:flex;align-items:center;gap:10px;padding:10px;border-radius:9px;cursor:pointer;transition:.12s}
.corr-person:hover{background:var(--pane2)}
.corr-person.on{background:var(--pane2);box-shadow:inset 2px 0 0 var(--a-map)}
.corr-av{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;font:700 13px/1 var(--mono);background:linear-gradient(135deg,#5ad1ff,#7ee0ff);color:#04121e}
.corr-pb{flex:1;min-width:0}
.corr-pn{font-size:12.5px;font-weight:600;color:var(--txt);display:flex;align-items:center;gap:6px}
.corr-badge{background:#ff6b8a;color:#fff;border-radius:20px;font:700 9px/1 var(--mono);padding:2px 6px}
.corr-psn{font-size:11px;color:var(--txt3);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.corr-pmeta{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:5px;font:500 9px/1 var(--mono);color:var(--txt3)}
.corr-cnt{opacity:.7}
.corr-conv{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg2)}
.corr-empty{display:grid;place-items:center;height:100%;font-size:13px}
.corr-chd{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;border-bottom:1px solid var(--rule)}
.corr-cname{font-size:15px;font-weight:600;color:var(--txt)}
.corr-cmail{font:500 11px/1 var(--mono);color:var(--txt3);margin-top:4px}
.corr-thread{flex:1;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.corr-msg{max-width:78%;border:1px solid var(--rule);border-radius:12px;padding:10px 12px;background:var(--pane)}
.corr-msg.out{align-self:flex-end;background:rgba(90,209,255,.08);border-color:rgba(90,209,255,.25)}
.corr-msg.in{align-self:flex-start}
.corr-msg.unread{border-color:#ff6b8a;box-shadow:0 0 0 1px rgba(255,107,138,.25)}
.corr-mh{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--txt2)}
.corr-mh b{color:var(--txt);font-size:11.5px}
.corr-tag{font:600 9px/1 var(--mono);color:var(--a-map);border:1px solid rgba(90,209,255,.35);border-radius:5px;padding:2px 5px}
.corr-mts{margin-left:auto;font:500 9px/1 var(--mono);color:var(--txt3)}
.corr-msubj{font-size:12.5px;font-weight:600;color:var(--txt);margin:6px 0 3px}
.corr-mbody{font-size:12.5px;line-height:1.5;color:var(--txt2);white-space:pre-wrap}
.corr-matts,.corr-atts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.corr-matt,.corr-att{display:inline-flex;align-items:center;gap:5px;font:500 10px/1 var(--mono);color:var(--txt2);background:var(--pane2);border:1px solid var(--rule2);border-radius:6px;padding:5px 7px}
.corr-matt b,.corr-att b{color:var(--txt3);font-weight:600}
.corr-att i{cursor:pointer;color:var(--txt3);font-style:normal;margin-left:2px}
.corr-att i:hover{color:#ff6b8a}
.corr-compose{border-top:1px solid var(--rule);padding:12px 16px;background:var(--pane);display:flex;flex-direction:column;gap:8px}
.corr-subj{padding:8px 10px;background:var(--pane2);border:1px solid var(--rule);border-radius:8px;color:var(--txt);font-size:12.5px}
.corr-body{min-height:64px;resize:vertical;padding:9px 10px;background:var(--pane2);border:1px solid var(--rule);border-radius:8px;color:var(--txt);font-size:12.5px;line-height:1.5;font-family:inherit}
.corr-cbar{display:flex;align-items:center;gap:8px;padding-right:172px}   /* clear the floating Talk/Test/Fake-driver fabs at bottom-right */
@media (max-width:820px){ .corr-cbar{padding-right:8px} }
/* ===== STANDARD TOGGLE SWITCH — every checkbox in the app renders as a switch (owner directive) ===== */
input[type="checkbox"]{ -webkit-appearance:none;appearance:none;position:relative;width:36px;height:19px;flex:none;
  border-radius:19px;background:var(--rule2);border:1px solid var(--rule);cursor:pointer;transition:background .18s,border-color .18s;vertical-align:middle;margin:0}
input[type="checkbox"]::after{ content:"";position:absolute;top:1px;left:1px;width:15px;height:15px;border-radius:50%;
  background:var(--txt2);transition:transform .18s,background .18s;box-shadow:0 1px 2px rgba(0,0,0,.35)}
input[type="checkbox"]:checked{ background:var(--a-map,#5ad1ff);border-color:var(--a-map,#5ad1ff) }
input[type="checkbox"]:checked::after{ transform:translateX(17px);background:#fff }
input[type="checkbox"]:disabled{ opacity:.5;cursor:not-allowed }
input[type="checkbox"]:focus-visible{ outline:2px solid var(--a-map,#5ad1ff);outline-offset:2px }
/* SELECTION checkboxes (route compare, stop select) stay a compact SQUARE — a switch is for on/off
   settings, not multi-select. Higher specificity so it wins over the global switch directive above. */
input[type="checkbox"].rsel,input[type="checkbox"].stopsel,input[type="checkbox"].rlstopchk{
  width:16px;height:16px;border-radius:4px;background:#0e1b26;border:1.6px solid #5a7184;transition:background .12s,border-color .12s}
input[type="checkbox"].rsel::after,input[type="checkbox"].stopsel::after,input[type="checkbox"].rlstopchk::after{
  content:"";position:absolute;top:1px;left:4.5px;width:4px;height:8px;border:solid #04121d;border-width:0 2px 2px 0;border-radius:0;transform:rotate(45deg);background:none;box-shadow:none;opacity:0}
input[type="checkbox"].rsel:checked,input[type="checkbox"].stopsel:checked,input[type="checkbox"].rlstopchk:checked{background:var(--a-route,#9ad0ff);border-color:var(--a-route,#9ad0ff)}
input[type="checkbox"].rsel:checked::after,input[type="checkbox"].stopsel:checked::after,input[type="checkbox"].rlstopchk:checked::after{opacity:1;transform:rotate(45deg)}
.corr-attbtn{background:var(--pane2);border:1px solid var(--rule);color:var(--txt2);border-radius:8px;padding:8px 12px;font-size:11.5px;cursor:pointer}
.corr-attbtn:hover{border-color:var(--a-map);color:var(--txt)}
.corr-send{background:var(--a-map);color:#04121e;border:none;border-radius:8px;padding:9px 18px;font-weight:700;font-size:12px;cursor:pointer}
.corr-send:hover{filter:brightness(1.08)}
@media (max-width:820px){ .corr-list{flex-basis:130px} .corr-wrap{flex-direction:column} }
.stock-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.stock-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:12px}
.stock-card{display:flex;align-items:center;gap:11px;background:var(--pane);border:1px solid var(--rule);border-radius:11px;padding:12px 13px}
.stock-card:hover{border-color:var(--a-map)}
.stock-ic{width:40px;height:40px;flex:none;border-radius:10px;display:grid;place-items:center;font-size:19px;background:var(--pane2);border:1px solid var(--rule2)}
.stock-b{flex:1;min-width:0;display:flex;flex-direction:column}
.stock-b b{font-size:13px;color:var(--txt)}
.stock-b span{font-size:10.5px;color:var(--txt3);margin-top:2px}
.stock-price{font:700 14px/1 var(--mono);color:var(--pos);margin-right:4px}
.stock-sub{font-size:11.5px;color:var(--txt3);margin-top:4px;max-width:640px}
/* Image-led catalog — ONE sculpture per full-width row (list), image preview in the row.
   Rows are a UNIFORM fixed height with even spacing between them. */
.catalog{display:flex;flex-direction:column;gap:14px}
.cat-item{display:flex;align-items:stretch;gap:0;background:var(--pane);border:1px solid var(--rule);border-radius:14px;overflow:hidden;transition:.16s;height:128px}
.cat-item:hover{border-color:var(--a-map);box-shadow:0 8px 24px var(--shadow);transform:translateY(-1px)}
.cat-img{position:relative;width:196px;flex:none;background:linear-gradient(145deg,color-mix(in srgb,var(--g,#7ee0ff) 40%,var(--pane2)),var(--pane2));display:grid;place-items:center;overflow:hidden}
.cat-img img{width:100%;height:100%;object-fit:cover;display:block}
.cat-img .cat-glyph{position:absolute;font-size:38px;opacity:0;transition:.15s;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.cat-img.noimg .cat-glyph{opacity:.9}
.cat-img.noimg img{display:none}
.cat-imgedit{position:absolute;top:7px;right:7px;width:24px;height:24px;border-radius:6px;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.45);color:#fff;font-size:11px;cursor:pointer;opacity:0;transition:.15s;display:grid;place-items:center}
.cat-item:hover .cat-imgedit{opacity:1}
.cat-imgedit:hover{background:rgba(0,0,0,.7)}
.cat-info{flex:1;min-width:0;padding:13px 14px;display:flex;flex-direction:column;gap:6px;justify-content:center}
.cat-name{font-size:14px;font-weight:600;color:var(--txt)}
.cat-desc{font-size:11.5px;color:var(--txt3);line-height:1.45}
.cat-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.cat-tag{font:600 9.5px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--txt2);background:var(--pane2);border:1px solid var(--rule2);border-radius:20px;padding:4px 8px}
.cat-buy{flex:none;padding:13px 14px;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:9px;border-left:1px solid var(--rule)}
.cat-price{font:700 16px/1 var(--mono);color:var(--pos)}
.cat-order{background:var(--a-map);color:#04121e;border:none;border-radius:8px;padding:8px 14px;font-weight:700;font-size:12px;cursor:pointer;white-space:nowrap}
.cat-order:hover{filter:brightness(1.08)}
/* Shared order-status list (main Orders · Customer details · Sculpture Studio) */
.ordsl{display:flex;flex-direction:column;gap:6px}
.ordsl-row{display:flex;align-items:center;gap:10px;padding:8px 11px;background:var(--pane2);border:1px solid var(--rule);border-radius:9px;transition:.13s}
.ordsl-row:hover{border-color:var(--a-map)}
.ordsl-main{flex:1;min-width:0}
.ordsl-t{font-size:12.5px;color:var(--txt);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ordsl-id{font:600 9px/1 var(--mono);color:var(--txt3);margin-left:5px}
.ordsl-sub{font-size:10.5px;color:var(--txt3);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ordsl-tag{flex:none}
.ordsl-pasthd{font:700 9px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--txt3);margin:13px 0 6px}
/* Frequency badge — one-time (blue) vs recurring (green) + cadence/days beneath */
.fq{display:inline-block;font:700 9px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:20px;white-space:nowrap}
.fq-one{background:rgba(154,208,255,.14);color:#9ad0ff;border:1px solid rgba(154,208,255,.34)}
.fq-rec{background:rgba(65,240,173,.14);color:#41f0ad;border:1px solid rgba(65,240,173,.36)}
.fq-sub{font-size:9.5px;color:var(--txt3);margin-top:4px}
/* Header font controls (text size + typeface), saved per-user */
.fontprefs{display:flex;align-items:center;gap:4px;margin-right:8px}
.fontprefs .fp-a{font:800 13px/1 system-ui,sans-serif;color:var(--txt3);margin-right:1px}
.fontprefs select{background:var(--pane2);border:1px solid var(--rule2);color:var(--txt2);border-radius:6px;font-size:10.5px;padding:3px 5px;cursor:pointer;max-width:78px}
.fontprefs select:hover{border-color:var(--a-map);color:var(--txt)}
@media (max-width:820px){ .catalog{grid-template-columns:1fr} }
/* dispatch backlog card — colored left edge per group (sculpture / standalone equipment); product & combined keep order color */
.strip{border-left:3px solid var(--gc,transparent)}

/* ===== data-mode banner — demo / offline / not-live warning (see apisync setDataMode) ===== */
#dataModeBanner{position:fixed;bottom:36px;top:auto;left:50%;transform:translateX(-50%);z-index:6000;
  display:flex;align-items:center;gap:8px;padding:6px 15px;border-radius:20px;font-size:11px;
  letter-spacing:.02em;pointer-events:none;white-space:nowrap;max-width:92vw;overflow:hidden;
  border:1px solid;backdrop-filter:blur(6px);box-shadow:0 6px 22px rgba(0,0,0,.45)}
#dataModeBanner b{font-weight:800;font-family:var(--mono,monospace)}
#dataModeBanner span{opacity:.85}
.dmb-demo{background:color-mix(in srgb,#62a6ff 22%,#0a1622);border-color:#62a6ff88;color:#cfe4ff}
.dmb-off{background:color-mix(in srgb,#ff6b8a 26%,#160a0f);border-color:#ff6b8a99;color:#ffd6de;animation:dmbpulse 1.5s infinite}
.dmb-stale{background:color-mix(in srgb,#ffb347 22%,#161005);border-color:#ffb34799;color:#ffe6c2}
@keyframes dmbpulse{0%,100%{opacity:1}50%{opacity:.62}}

/* ===== NEXUS · digital-employee (A2A) strip + live agents log + node choreography ===== */
/* agents panel — a normal flow bar ABOVE the brain graph (not an overlay) */
.nx-agents{position:relative;z-index:24;display:flex;align-items:stretch;justify-content:center;gap:22px;flex:none;
  width:100%;padding:34px 22px 13px;background:color-mix(in srgb,var(--bg2,#050b12) 92%,transparent);border-bottom:1px solid var(--rule,#16202a);
  box-shadow:0 8px 26px rgba(0,0,0,.4)}
.nx-agents .nxa-brand{align-self:center}
.nxa-brand{display:flex;flex-direction:column;justify-content:center;gap:2px;flex:none;padding-right:11px;border-right:1px solid var(--rule2);white-space:nowrap}
.nxa-brand b{font:800 12px/1 var(--mono,monospace);letter-spacing:.04em;color:var(--a-assign,#b78bff)}
.nxa-brand span{font:700 7.5px/1 var(--mono,monospace);letter-spacing:.09em;text-transform:uppercase;color:var(--txt3,#7790a0)}
.nxa-strip{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:10px;overflow:visible;padding-top:13px}
.nxa-sub{display:block;font:600 9.5px/1.25 var(--mono,monospace);letter-spacing:.02em;color:var(--txt3,#7790a0);margin-top:3px;white-space:nowrap}
.nxa{position:relative;display:flex;align-items:center;gap:11px;padding:12px 15px;border-radius:13px;background:var(--pane2,#0c1622);min-width:172px;
  border:1px solid var(--rule2,#16202a);white-space:nowrap;transition:.18s;flex:none;opacity:.78}
.nxa-ic{font-size:18px;line-height:1;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;flex:none;
  background:color-mix(in srgb,var(--ac) 15%,transparent);border:1px solid color-mix(in srgb,var(--ac) 32%,transparent);color:var(--ac)}
.nxa-nm{font:700 12.5px/1 var(--mono,monospace);letter-spacing:.02em;color:var(--txt2,#9fb2c2)}
.nxa-dot{width:9px;height:9px;border-radius:50%;background:var(--rule2,#2a3a4a);flex:none;margin-left:auto}
.nxa-ct{font:800 12px/1 var(--mono,monospace);background:color-mix(in srgb,var(--ac) 16%,var(--pane));border:1px solid color-mix(in srgb,var(--ac) 34%,transparent);border-radius:9px;padding:5px 9px;color:var(--ac);margin-left:auto;flex:none;min-width:26px;text-align:center}
/* orchestrator = the conductor, elevated ABOVE the worker row */
.nxa-main{display:flex;flex-direction:column;gap:15px;min-width:0}
.nxa-orch{display:flex}
.nxa-cond{width:auto;padding:11px 24px;background:color-mix(in srgb,var(--ac) 16%,var(--pane2));border-color:color-mix(in srgb,var(--ac) 60%,transparent);opacity:1;cursor:pointer}
.nxa-cond .nxa-ic{font-size:20px;width:38px;height:38px}
.nxa-cond .nxa-nm{color:var(--ac);font-size:14px}
.nxa-cond-sub{font:600 8.5px/1 var(--mono,monospace);letter-spacing:.04em;color:var(--txt3,#7790a0);text-transform:uppercase;margin-left:2px}
.nxa{cursor:pointer;align-items:center}
.nxa-orch{justify-content:center;position:relative}
/* conductor's baton: a stem down from the orchestrator into a horizontal "bus" that fans across the worker strip */
.nxa-orch::after{content:'';position:absolute;left:50%;transform:translateX(-50%);bottom:-13px;width:2px;height:13px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--a-assign,#b78bff) 85%,transparent),color-mix(in srgb,var(--a-assign,#b78bff) 30%,transparent))}
.nxa-strip{position:relative}
.nxa-strip::before{content:'';position:absolute;top:-1px;left:8%;right:8%;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--a-assign,#b78bff) 55%,transparent) 12%,color-mix(in srgb,var(--a-assign,#b78bff) 55%,transparent) 88%,transparent);
  box-shadow:0 0 8px color-mix(in srgb,var(--a-assign,#b78bff) 40%,transparent)}
/* a pulse of light travels the bus — the orchestrator "conducting" the section */
.nxa-strip::after{content:'';position:absolute;top:-2px;left:8%;width:26px;height:4px;border-radius:3px;
  background:radial-gradient(circle,color-mix(in srgb,var(--a-assign,#b78bff) 95%,#fff) 0%,transparent 70%);
  animation:nxaConduct 3.4s linear infinite;opacity:.9;pointer-events:none}
@keyframes nxaConduct{0%{left:8%;opacity:0}12%{opacity:.95}88%{opacity:.95}100%{left:88%;opacity:0}}
.nxa-txt{display:flex;flex-direction:column;min-width:0;line-height:1.1}
.nxa.orch{opacity:1;border-color:color-mix(in srgb,var(--ac) 55%,transparent);background:color-mix(in srgb,var(--ac) 12%,var(--pane2))}
/* per-agent task-log modal */
.nxam{position:fixed;inset:0;z-index:3000;display:none;background:rgba(3,7,12,.72);backdrop-filter:blur(4px);align-items:center;justify-content:center;padding:24px}
.nxam.on{display:flex}
.nxam-card{width:min(1180px,96vw);max-width:96vw;height:calc(100vh - 48px);max-height:calc(100vh - 48px);display:flex;flex-direction:column;background:var(--bg2,#050b12);border:1px solid var(--rule,#16202a);border-top:3px solid var(--ac,#5ad1ff);border-radius:14px;box-shadow:0 30px 90px rgba(0,0,0,.7);overflow:hidden}
.nxam-h{display:flex;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--rule2)}
.nxam-ic{font-size:22px;width:42px;height:42px;display:grid;place-items:center;background:color-mix(in srgb,var(--ac) 16%,var(--pane2));border:1px solid color-mix(in srgb,var(--ac) 40%,transparent);border-radius:10px;flex:none}
.nxam-hh{flex:1;min-width:0}.nxam-hh h3{margin:0;font-size:15px;color:var(--txt)}
.nxam-role{font-size:11px;color:var(--txt3);margin-top:2px}
.nxam-x{background:var(--pane2);border:1px solid var(--rule2);color:var(--txt2);width:28px;height:28px;border-radius:7px;cursor:pointer;font-size:13px;flex:none}
.nxam-x:hover{background:var(--neg);color:#fff;border-color:transparent}
.nxam-meta{display:flex;flex-wrap:wrap;gap:14px;padding:11px 18px;border-bottom:1px solid var(--rule2);font-size:11px;color:var(--txt3)}
.nxam-meta b{color:var(--txt);font-weight:700}.nxam-meta b.pos{color:var(--pos,#41f0ad)}
.nxam-filters{display:flex;gap:6px;padding:11px 18px 5px}
.nxam-f{font:700 10px/1 var(--mono,monospace);letter-spacing:.03em;color:var(--txt2);background:var(--pane2);border:1px solid var(--rule2);border-radius:7px;padding:5px 11px;cursor:pointer}
.nxam-f.on{background:var(--ac);color:#04121e;border-color:transparent}
.nxam-list{flex:1;overflow:auto;padding:12px 18px 20px;display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:8px;align-content:start}
.nxam-task{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border-left:2px solid var(--ac);border-radius:5px;background:var(--pane2,#0c1622)}
.nxam-list>.dim{grid-column:1/-1}
.nxam-tt{font:600 9.5px/1.4 var(--mono,monospace);color:var(--txt3);flex:none;padding-top:1px}
.nxam-tx{flex:1;min-width:0;font-size:11.5px;color:var(--txt);line-height:1.4}
.nxam-res{font:700 9px/1 var(--mono,monospace);color:var(--pos,#41f0ad);flex:none;white-space:nowrap;padding-top:2px}
.nxam-links{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.nxam-link{font:600 9px/1 var(--mono,monospace);color:var(--a-map,#5ad1ff);background:color-mix(in srgb,var(--a-map,#5ad1ff) 12%,transparent);border:1px solid color-mix(in srgb,var(--a-map,#5ad1ff) 30%,transparent);border-radius:20px;padding:3px 8px;cursor:pointer}
.nxam-link:hover{background:var(--a-map,#5ad1ff);color:#04121e}
.nxa.orch .nxa-nm{color:var(--ac)}
.nxa.on{opacity:1;border-color:var(--ac);box-shadow:0 0 0 1px var(--ac),0 0 14px color-mix(in srgb,var(--ac) 55%,transparent);transform:translateY(-1px)}
.nxa.on .nxa-nm{color:var(--txt,#e8f1f8)}
.nxa.on .nxa-dot{background:var(--ac);box-shadow:0 0 7px var(--ac);animation:nxaDot 1s ease-in-out infinite}
.nxa.on .nxa-ct{background:var(--ac);color:#04121e;box-shadow:0 0 12px color-mix(in srgb,var(--ac) 60%,transparent);animation:nxaDot 1s ease-in-out infinite}
@keyframes nxaDot{0%,100%{opacity:1}50%{opacity:.45}}
.nx-btn.nxa-logbtn.on{border-color:var(--a-assign,#b78bff);color:var(--a-assign,#b78bff)}
.nx-agentlog{position:absolute;top:0;right:0;bottom:0;width:340px;max-width:86vw;z-index:30;background:color-mix(in srgb,var(--bg2,#050b12) 94%,transparent);
  border-left:1px solid var(--rule,#16202a);box-shadow:-14px 0 40px rgba(0,0,0,.5);transform:translateX(102%);transition:transform .22s ease;display:flex;flex-direction:column;backdrop-filter:blur(6px)}
.nx-agentlog.on{transform:none}
.nxa-log-h{display:flex;align-items:center;justify-content:space-between;padding:11px 13px;border-bottom:1px solid var(--rule2);
  font:800 11px/1 var(--mono,monospace);letter-spacing:.03em;color:var(--a-assign,#b78bff)}
.nxa-log-x{background:var(--pane2);border:1px solid var(--rule2);color:var(--txt2);width:24px;height:24px;border-radius:6px;cursor:pointer;font-size:12px}
.nxa-log-x:hover{background:var(--neg);color:#fff;border-color:transparent}
.nxa-log-body{flex:1;overflow:auto;padding:6px 8px}
.nxa-le{display:flex;align-items:flex-start;gap:8px;padding:7px 8px;border-left:2px solid var(--ac,#5ad1ff);border-radius:4px;margin-bottom:5px;background:var(--pane2,#0c1622)}
.nxa-le-t{font:600 9px/1.3 var(--mono,monospace);color:var(--txt3,#7790a0);flex:none;padding-top:1px}
.nxa-le-ic{font-size:11px;flex:none}
.nxa-le-x{font-size:10.5px;line-height:1.35;color:var(--txt,#cfe)}
/* Today's-learnings panel (Agent-Learning recap, right dock) */
.nx-learnpanel{position:absolute;top:0;right:0;bottom:0;width:360px;max-width:88vw;z-index:31;background:color-mix(in srgb,var(--bg2,#050b12) 95%,transparent);
  border-left:1px solid var(--rule);box-shadow:-14px 0 40px rgba(0,0,0,.5);transform:translateX(102%);transition:transform .22s ease;display:flex;flex-direction:column;backdrop-filter:blur(6px)}
.nx-learnpanel.on{transform:none}
.nxl-h{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--rule2);font:700 12px/1 var(--mono,monospace);letter-spacing:.02em;color:var(--txt)}
.nxl-h b{color:var(--a-assign,#b78bff)}
.nxl-x{background:var(--pane2);border:1px solid var(--rule2);color:var(--txt2);width:24px;height:24px;border-radius:6px;cursor:pointer;font-size:12px}
.nxl-x:hover{background:var(--neg);color:#fff;border-color:transparent}
.nxl-body{flex:1;overflow:auto;padding:14px}
.nxl-badge{font:700 11px/1.4 var(--mono,monospace);color:var(--a-assign,#b78bff);background:color-mix(in srgb,var(--a-assign,#b78bff) 12%,transparent);border:1px solid color-mix(in srgb,var(--a-assign,#b78bff) 40%,transparent);border-radius:8px;padding:8px 11px;display:inline-block;margin-bottom:11px}
.nxl-badge b{color:var(--txt)}
.nxl-stat{display:flex;flex-direction:column;gap:5px;margin-bottom:12px;font-size:11.5px;color:var(--txt2)}
.nxl-stat b{color:var(--txt);font-family:var(--mono,monospace)}
.nxl-intro{font-size:12.5px;line-height:1.6;color:var(--txt);margin-bottom:9px}
.nxl-list{margin:0 0 12px;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.nxl-list li{font-size:12px;line-height:1.55;color:var(--txt2);padding-left:18px;position:relative}
.nxl-list li::before{content:"→";position:absolute;left:0;top:0;color:var(--a-assign,#b78bff);font-weight:800}
.nxl-foot{font-size:10.5px;line-height:1.55;color:var(--txt3);border-top:1px solid var(--rule);padding-top:10px}
/* choreography: acting node brightens + an expanding ring pings on it */
.node.nx-act .core{fill-opacity:1;filter:url(#nxsoft)}
.node.nx-act .ring{stroke-width:3;stroke-opacity:1}
.node.nx-act .orb{opacity:1}
.nx-flash{transform-box:fill-box;transform-origin:center;animation:nxFlashRing 1.5s ease-out forwards;pointer-events:none;filter:drop-shadow(0 0 6px currentColor)}
@keyframes nxFlashRing{0%{transform:scale(.35);opacity:1}60%{opacity:.6}100%{transform:scale(2.7);opacity:0}}
.nx-flash2{transform-box:fill-box;transform-origin:center;animation:nxFlashRing 1.5s ease-out .18s forwards;pointer-events:none}
@media (max-width:900px){ .nx-agents{padding:9px 10px;gap:9px} .nxa-brand{display:none} }

/* ===================== OVERVIEW · COMMAND CENTER ===================== */
/* min-height (not a hard height) so tall content grows the column and the module (.mod overflow:auto)
   scrolls, instead of the fixed-height grid clipping panes on shorter viewports */
.ovcc{display:flex;flex-direction:column;gap:12px;min-height:100%}
.ovhero{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;flex:none}
.ovh{position:relative;background:linear-gradient(180deg,var(--pane),var(--bg2));border:1px solid var(--rule);border-top:2px solid var(--ac);border-radius:12px;padding:13px 16px 10px;overflow:hidden;cursor:pointer;transition:.15s}
.ovh:hover{border-color:color-mix(in srgb,var(--ac) 55%,var(--rule));transform:translateY(-1px);box-shadow:0 8px 22px rgba(0,0,0,.34)}
.ovh-k{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font:600 10px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--txt3)}
.ovh-v{font-size:30px;font-weight:800;letter-spacing:-.02em;color:var(--ac);margin:6px 0 2px;font-variant-numeric:tabular-nums;line-height:1}
.ovh-sub{font-size:11px;color:var(--txt2)}
.ovh-spark{margin-top:8px;opacity:.9}
.ovh-rev .ovh-v{color:var(--pos)}
.ovh-fuel{border-top-color:var(--a-driv)}
/* Fuel tile — honest "Not Connected" state (no fuel-card source wired for this tenant yet). */
.ovh-nc{opacity:.9;cursor:pointer}
.ovh-nc-wm{font:800 22px/1 var(--font,inherit);letter-spacing:.06em;text-transform:uppercase;color:transparent;-webkit-text-stroke:1.3px color-mix(in srgb,var(--txt2) 70%,transparent);opacity:.6;transform:rotate(-4deg);transform-origin:left center;margin:9px 0 5px}
.ov-nc-cta{color:var(--a-driv);cursor:pointer;white-space:nowrap}
.ov-nc-cta:hover{text-decoration:underline}
.ovh-v.ov-await{color:var(--txt2);text-shadow:none}
.dch{font:700 10px/1 var(--mono);border-radius:20px;padding:3px 7px;letter-spacing:.02em}
.dch.pos{color:var(--pos);background:color-mix(in srgb,var(--pos) 14%,transparent)}
.dch.neg{color:var(--neg);background:color-mix(in srgb,var(--neg) 14%,transparent)}
.gas-chip{margin-left:auto;background:color-mix(in srgb,var(--a-driv) 16%,transparent);border:1px solid color-mix(in srgb,var(--a-driv) 45%,var(--rule));color:var(--a-driv);border-radius:20px;padding:3px 9px;font:600 9px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase}
.gas-chip:hover{background:color-mix(in srgb,var(--a-driv) 28%,transparent);color:var(--txt)}
/* rows fill when content fits (1fr) but never shrink below their content (min-content) → no clipping,
   the page scrolls instead */
.ovcc-grid{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:minmax(min-content,1fr);gap:12px}
/* AR command center — cash composition donut, hourly cash, top-payer & leak bars */
.ov-cash{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.ov-donut{position:relative;flex:none;width:108px;height:108px}
.ov-donut-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.ov-donut-c b{font-size:17px;color:var(--txt);line-height:1}
.ov-donut-c span{font:600 8.5px/1 var(--mono);color:var(--txt3);text-transform:uppercase;letter-spacing:.1em;margin-top:4px}
.ov-donut-lg{flex:1;display:flex;flex-direction:column;gap:7px}
.ov-dlg{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--txt2)}
.ov-dlg i{width:9px;height:9px;border-radius:2px;flex:none}
.ov-dlg span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ov-dlg b{color:var(--txt);font-size:11.5px}
.paybar,.leakbar{display:flex;align-items:center;gap:9px;margin:6px 0;cursor:pointer}
.leakbar{cursor:default}
.paybar-k,.leakbar-k{flex:0 0 40%;font-size:11.5px;color:var(--txt2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.paybar-track,.leakbar-track{flex:1;height:8px;background:var(--pane2);border-radius:5px;overflow:hidden}
.paybar-track i{display:block;height:100%;background:linear-gradient(90deg,#41f0ad,#5ad1ff);border-radius:5px}
.leakbar-track i{display:block;height:100%;border-radius:5px}
.paybar-v,.leakbar-v{flex:none;font:600 11px/1 var(--mono)}
.ov-drill{float:right;font-size:9.5px;color:var(--a-blot);cursor:pointer;text-transform:none;letter-spacing:0}
.ov-drill:hover{text-decoration:underline}
/* leak-pane header keeps the shared header text color (red-on-fill was unreadable); the pane's
   red identity now reads through its accent dot + the big -$ figure instead of the title. */
.ov-leaktop{display:flex;flex-direction:column;gap:2px;padding:4px 0 2px}
.ov-leakbig{font-size:30px;font-weight:700;line-height:1}
.ov-leaksub{font-size:10.5px;color:var(--txt3)}
.ovcc-grid .pane{min-height:0}
.ov-lbl{font:600 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--txt3);margin-bottom:9px}
/* money-in product bars */
.prodbar{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.prodbar-k{flex:0 0 84px;font-size:11px;color:var(--txt2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prodbar-track{flex:1;height:8px;background:var(--bg2);border-radius:6px;overflow:hidden}
.prodbar-track i{display:block;height:100%;border-radius:6px}
.prodbar-v{flex:0 0 auto;font:700 11px/1 var(--mono);color:var(--txt)}
.payer{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--rule);font-size:12px;cursor:pointer}
.payer:hover{color:var(--txt)}.payer b{font-family:var(--mono)}
.ov-arrow{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.ov-mini{background:var(--bg2);border:1px solid var(--rule);border-radius:9px;padding:8px 9px;text-align:center}
.ov-mini span{display:block;font:600 8.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--txt3);margin-bottom:5px}
.ov-mini b{font-size:15px;font-family:var(--mono)}
.ph-alert{background:var(--neg);color:#fff;border-radius:20px;font:700 9px/1 var(--mono);padding:2px 6px;margin-left:6px}
/* ops pulse */
.ov-att{flex:none;max-height:168px;overflow-y:auto;border-bottom:1px solid var(--rule)}
.ov-fleetwrap{flex:1;min-height:0;overflow-y:auto}
/* fuel & gas cards */
.ov-fuelpane .pbody{overflow-y:auto}
.gas-connect{display:flex;align-items:center;gap:11px;background:color-mix(in srgb,var(--a-driv) 12%,var(--pane));border:1px dashed color-mix(in srgb,var(--a-driv) 55%,var(--rule));border-radius:11px;padding:10px 12px;cursor:pointer;margin-bottom:12px}
.gas-connect:hover{background:color-mix(in srgb,var(--a-driv) 20%,var(--pane))}
.gas-connect>div{flex:1;display:flex;flex-direction:column}
.gas-connect b{font-size:12px;color:var(--txt)}
.gas-connect span:not(.gas-dot):not(.gas-go){font-size:10px;color:var(--txt3);margin-top:2px}
.gas-dot{width:9px;height:9px;border-radius:50%;background:var(--a-driv);box-shadow:0 0 9px var(--a-driv);animation:bl 1.6s infinite;flex:none}
.gas-go{font-size:18px;color:var(--a-driv);font-weight:800;flex:none}
.fuel-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:6px}
.fuel-kpi{background:var(--bg2);border:1px solid var(--rule);border-radius:9px;padding:9px 8px;text-align:center}
.fuel-kpi span{display:block;font:600 8.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--txt3);margin-bottom:5px}
.fuel-kpi b{font-size:16px;font-family:var(--mono);color:var(--txt)}
.fuel-gauge{position:relative;height:14px;background:var(--bg2);border:1px solid var(--rule);border-radius:8px;overflow:hidden}
.fuel-gauge i{display:block;height:100%;border-radius:8px;transition:width .4s}
.fuel-gauge-t{position:absolute;top:0;right:7px;line-height:14px;font:700 9px/14px var(--mono);color:var(--txt)}
.ftruck{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--rule);font-size:12px}
.ftruck .dotc{width:8px;height:8px;flex:none}
.ftruck-id{flex:0 0 auto;color:var(--txt2)}
.ftruck-mpg{margin-left:auto;font:600 10px/1 var(--mono);color:var(--txt3)}
.ftruck b{font-family:var(--mono);color:var(--txt);flex:0 0 auto;min-width:46px;text-align:right}
.ov-anom{display:flex;align-items:center;gap:9px;margin-top:11px;background:color-mix(in srgb,var(--neg) 12%,transparent);border:1px solid color-mix(in srgb,var(--neg) 45%,var(--rule));border-radius:10px;padding:9px 11px;cursor:pointer}
.ov-anom>span{color:var(--neg);font-size:15px}
.ov-anom>div{display:flex;flex-direction:column}
.ov-anom b{font-size:11.5px;color:var(--txt)}.ov-anom span:last-child{font-size:10px;color:var(--txt3)}
@media (max-width:1100px){ .ovhero{grid-template-columns:repeat(2,1fr)} .ovcc-grid{grid-template-columns:1fr;overflow-y:auto} }

/* ---- Overview POP: glowing/animated hero + full-bleed, no empty space ---- */
.ovh{box-shadow:0 0 0 1px transparent}
.ovh::after{content:"";position:absolute;inset:0;border-radius:12px;pointer-events:none;
  box-shadow:inset 0 0 22px color-mix(in srgb,var(--ac) 12%,transparent);opacity:.6;animation:ovBreath 3.4s ease-in-out infinite}
.ovh::before{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,color-mix(in srgb,var(--ac) 14%,transparent),transparent);
  transform:skewX(-18deg);animation:ovShine 6s ease-in-out infinite}
@keyframes ovBreath{0%,100%{opacity:.35}50%{opacity:.8}}
@keyframes ovShine{0%,72%{left:-60%}88%,100%{left:130%}}
.ovh-v{text-shadow:0 0 18px color-mix(in srgb,var(--ac) 40%,transparent)}
.ovh-rev .ovh-v{text-shadow:0 0 18px color-mix(in srgb,var(--pos) 40%,transparent)}
.ovh-spark svg polyline:first-of-type{stroke-dasharray:400;stroke-dashoffset:400;animation:ovDraw 1.2s .1s ease forwards}
@keyframes ovDraw{to{stroke-dashoffset:0}}
.ov-live{display:inline-flex;align-items:center;gap:6px;font:700 9px/1 var(--mono);letter-spacing:.18em;color:var(--pos)}
.ov-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--pos);box-shadow:0 0 8px var(--pos);animation:bl 1.3s infinite}
/* aging segmented bar (Money In) */
.aging{display:flex;height:16px;border-radius:8px;overflow:hidden;border:1px solid var(--rule);margin-bottom:8px}
.aging i{height:100%}
.aging-lg{display:flex;flex-wrap:wrap;gap:9px}
.aging-lg span{display:inline-flex;align-items:center;gap:5px;font-size:10px;color:var(--txt2)}
.aging-lg i{width:9px;height:9px;border-radius:3px}
.ovcc-grid .pbody{display:flex;flex-direction:column}
.ov-fill{flex:1;min-height:6px}
@media (prefers-reduced-motion:reduce){ .ovh::after,.ovh::before,.ovh-spark svg polyline:first-of-type{animation:none!important;stroke-dashoffset:0!important} }

/* ---- Overview period filter (dashboard + per-widget) + drill-down affordances ---- */
.ov-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none;flex-wrap:wrap}
.ov-topttl{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--txt2);letter-spacing:.02em}
.ov-topttl b{color:var(--txt);font-weight:700}
.ov-scopelbl{color:var(--txt3);font:600 10px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em}
.ov-perwrap{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ov-per{display:inline-flex;background:var(--bg2);border:1px solid var(--rule);border-radius:9px;padding:2px;gap:1px}
.ov-per button{appearance:none;background:none;border:none;color:var(--txt3);font:700 10px/1 var(--mono);letter-spacing:.04em;padding:6px 11px;border-radius:7px;cursor:pointer;transition:.12s;text-transform:uppercase}
.ov-per button:hover{color:var(--txt);background:var(--hover)}
.ov-per button.on{background:var(--a-blot);color:var(--ink)}
.ov-per-sm{padding:2px}
.ov-per-sm button{padding:4px 8px;font-size:9px}
.ov-custom{display:inline-flex;align-items:center;gap:6px;background:var(--bg2);border:1px solid var(--rule);border-radius:9px;padding:4px 8px}
.ov-custom input[type=date]{background:var(--pane);border:1px solid var(--rule);border-radius:6px;color:var(--txt);font:600 10px/1 var(--mono);padding:5px 6px}
.ov-custom span{color:var(--txt3);font-size:11px}
.ov-wctrl{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:-2px 0 10px;flex-wrap:wrap}
.ov-wtag{font:600 8.5px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--txt3)}
.ovh-go{margin-left:auto;font:700 8.5px/1 var(--mono);letter-spacing:.08em;color:var(--ac);opacity:.55;text-transform:uppercase}
.ovh:hover .ovh-go{opacity:1}
.ov-clk{cursor:pointer;transition:.12s}
.ov-clk:hover{filter:brightness(1.12)}
.paybar.ov-clk:hover .paybar-k,.leakbar.ov-clk:hover .leakbar-k{color:var(--txt)}
.ov-mini.ov-clk:hover,.fuel-kpi.ov-clk:hover{border-color:var(--ac,var(--a-blot))}
.ov-donut.ov-clk:hover{transform:scale(1.02)}
.ftruck.ov-clk:hover .ftruck-id{color:var(--txt)}
.ov-agseg{cursor:pointer}
.ov-agseg:hover{color:var(--txt);text-decoration:underline}
/* drill-down drawer content (renders inside the existing #detailWin slide-in) */
.ovd-sec{font:700 9px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--txt3);margin:14px 0 8px;padding-bottom:5px;border-bottom:1px solid var(--rule)}
.ovd-bar{display:flex;align-items:center;gap:8px;margin:7px 0}
.ovd-bk{flex:0 0 42%;font-size:11px;color:var(--txt2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ovd-bt{flex:1;height:8px;background:var(--bg2);border-radius:5px;overflow:hidden}
.ovd-bt i{display:block;height:100%;border-radius:5px}
.ovd-bar b{flex:none;font:700 10.5px/1 var(--mono);color:var(--txt)}
.ovd-list{display:flex;flex-direction:column;gap:0}
.ovd-row{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid var(--rule);font-size:11px;color:var(--txt2)}
.ovd-row>span:first-child{flex:0 0 34%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ovd-mini{flex:1;height:6px;background:var(--bg2);border-radius:4px;overflow:hidden}
.ovd-mini i{display:block;height:100%;background:var(--a-blot);border-radius:4px}
.ovd-row b{flex:none;font:700 10.5px/1 var(--mono);color:var(--txt);min-width:56px;text-align:right}
.ovd-row.ov-clk:hover{color:var(--txt)}
.ovd-inv{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid var(--rule);font-size:11px}
.ovd-inv-c{flex:1;min-width:0;color:var(--txt2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ovd-inv-n{flex:none;font:600 9.5px/1 var(--mono);color:var(--txt3)}
.ovd-inv-age{flex:none;font:600 9.5px/1 var(--mono);color:var(--txt3);min-width:30px;text-align:right}
.ovd-inv b{flex:none;font:700 10.5px/1 var(--mono);color:var(--txt);min-width:58px;text-align:right}
.ovd-bkt{display:flex;align-items:center;justify-content:space-between;margin:12px 0 4px;font-size:11px;color:var(--txt2)}
.ovd-bkt-l{display:inline-flex;align-items:center;gap:6px}
.ovd-bkt-l i{width:9px;height:9px;border-radius:3px}
.ovd-bkt b{font:700 11px/1 var(--mono);color:var(--txt)}
.ovd-empty{font-size:10.5px;color:var(--txt3);padding:6px 0}
.ovd-note{font-size:10.5px;color:var(--txt3);line-height:1.5;margin-bottom:4px}
.ovd-tot{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding-top:9px;border-top:1px solid var(--rule2);font-size:11px;color:var(--txt2)}
.ovd-tot b{font:800 13px/1 var(--mono)}

/* ===================== INTEGRATIONS ===================== */
.intg{height:100%;display:flex;flex-direction:column;padding:0;overflow-y:auto}
.intg-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:16px 18px;border-bottom:1px solid var(--rule);flex:none}
.intg-eyebrow{font:600 10px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--a-map);margin-bottom:7px}
.intg-hd h2{margin:0;font-size:20px;font-weight:600;color:var(--txt)}
.intg-sub{font-size:11.5px;color:var(--txt3);margin-top:6px;max-width:620px;line-height:1.55}
.intg-count{flex:none;font:700 12px/1 var(--mono);color:var(--txt2);background:var(--pane);border:1px solid var(--rule2);border-radius:20px;padding:9px 14px;white-space:nowrap}
.intg-count b{color:var(--pos);font-size:15px}
.intg-count-fail{color:var(--neg,#ff6b8a)}
/* Integrations: health filter chips + category groups */
.intg-filters{display:flex;gap:7px;flex-wrap:wrap;padding:12px 18px 0;align-items:center}
.intg-views{margin-left:auto;display:inline-flex;gap:5px}
.intg-vbtn{background:var(--pane2);border:1px solid var(--rule2);color:var(--txt2);border-radius:999px;padding:5px 12px;font:600 10px/1 var(--mono,monospace);cursor:pointer;transition:.12s}
.intg-vbtn:hover{filter:brightness(1.12)}
.intg-vbtn.on{background:color-mix(in srgb,var(--a-map) 20%,transparent);border-color:var(--a-map);color:var(--txt)}
/* #12 data-flow map */
.iflow-cap{padding:14px 18px 4px;font-size:12px;color:var(--txt2);line-height:1.5}
.iflow-cap b{color:var(--txt)} .iflow-cap b.intg-count-fail{color:var(--neg)}
.iflow-wrap{overflow-x:auto;padding:6px 0 16px}
.iflow-lbls{display:flex;justify-content:space-between;width:940px;margin:0 auto 4px;padding:0 14px;font:800 10px/1 var(--mono,monospace);letter-spacing:.14em;color:var(--txt3)}
.iflow-stage{position:relative;width:940px;margin:0 auto}
.iflow-svg{position:absolute;inset:0}
.iflow-nodes{position:absolute;inset:0;pointer-events:none}
.iflow-node{position:absolute;display:flex;align-items:center;gap:8px;width:210px;padding:7px 10px;background:var(--pane);border:1px solid var(--rule2);border-radius:10px;transform:translateY(-50%);box-shadow:0 2px 8px rgba(0,0,0,.25);pointer-events:auto}
.iflow-node.src{left:14px} .iflow-node.dst{right:14px;background:var(--pane2)}
.ifn-ic{font-size:17px;line-height:1;flex:none}
.ifn-tx{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.ifn-tx b{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ifn-st{font-size:8.5px;font-weight:700;color:var(--txt3)}
.iflow-node.f-ok .ifn-st{color:var(--pos)} .iflow-node.f-bad .ifn-st{color:var(--neg)} .iflow-node.f-off{opacity:.5}
.iflow-node.f-ok{border-color:color-mix(in srgb,var(--pos) 45%,var(--rule2))}
.iflow-node.f-bad{border-color:var(--neg)}
.iflow-edge{fill:none;stroke-width:2}
.iflow-edge.f-ok{stroke:color-mix(in srgb,var(--pos) 72%,transparent);stroke-dasharray:6 8;animation:iflowDash 1.1s linear infinite}
.iflow-edge.f-bad{stroke:var(--neg);stroke-dasharray:3 5;animation:iflowPulse 1.3s ease-in-out infinite}
.iflow-edge.f-off{stroke:var(--rule2);opacity:.4}
.iflow-dot{fill:var(--pos);filter:drop-shadow(0 0 3px var(--pos))}
@keyframes iflowDash{to{stroke-dashoffset:-14}}
@keyframes iflowPulse{0%,100%{opacity:.3}50%{opacity:.9}}
@media (prefers-reduced-motion:reduce){.iflow-edge{animation:none} .iflow-dot{display:none}}
.intg-fchip{background:var(--pane);color:var(--txt2);border:1px solid var(--rule2);border-radius:999px;padding:5px 13px;font:600 11px/1 var(--mono,monospace);cursor:pointer;transition:.12s}
.intg-fchip b{color:var(--txt);margin-left:4px}
.intg-fchip:hover{border-color:var(--a-map);color:var(--txt)}
.intg-fchip.on{background:var(--a-map);color:var(--ink);border-color:transparent}.intg-fchip.on b{color:var(--ink)}
.intg-fchip.fail.on{background:var(--neg,#ff6b8a)}
.intg-catgroup{padding:14px 18px 0}
.intg-cath{font:800 9px/1 var(--mono,monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--txt3);margin-bottom:9px;display:flex;align-items:center;gap:7px}
.intg-cath span{background:var(--rule2);color:var(--txt2);border-radius:999px;padding:1px 7px;font-size:9px}
.intg-empty{padding:28px 18px;color:var(--txt3);font-size:12px}
.intg-catgroup .intg-grid{padding:0}
.intg-grid{flex:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:13px;padding:16px 18px;align-content:start}
.intg-card{position:relative;background:linear-gradient(180deg,var(--pane),var(--bg2));border:1px solid var(--rule);border-top:2px solid var(--ac);border-radius:12px;padding:14px 15px;display:flex;flex-direction:column;gap:10px;transition:.15s}
.intg-card:hover{border-color:color-mix(in srgb,var(--ac) 50%,var(--rule));transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.36)}
.intg-card.on{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ac) 22%,transparent)}
.intg-card-top{display:flex;align-items:center;gap:11px}
.intg-ic{width:38px;height:38px;flex:none;border-radius:10px;display:grid;place-items:center;font-size:20px;background:color-mix(in srgb,var(--ac) 15%,var(--pane2));border:1px solid color-mix(in srgb,var(--ac) 35%,var(--rule))}
.intg-ic.big{width:44px;height:44px;font-size:23px}
.intg-name{flex:1;display:flex;flex-direction:column;min-width:0}
.intg-name b{font-size:14px;color:var(--txt)}
.intg-name span{font:600 9.5px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--txt3);margin-top:3px}
.intg-pill{flex:none;font:600 9.5px/1 var(--mono);letter-spacing:.04em;border-radius:20px;padding:5px 9px;border:1px solid var(--rule2);color:var(--txt3)}
.intg-pill.on{color:var(--pos);border-color:color-mix(in srgb,var(--pos) 50%,transparent);background:color-mix(in srgb,var(--pos) 12%,transparent)}
.intg-desc{font-size:11.5px;color:var(--txt2);line-height:1.5;flex:1}
.intg-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.intg-health{font:600 10px/1 var(--mono);color:var(--txt3)}
.intg-health.ok{color:var(--pos)}.intg-health.fail{color:var(--neg)}
.intg-actions{margin-left:auto;display:flex;gap:6px}
.intg-btn{background:var(--a-map);color:#04121e;border:none;border-radius:8px;padding:7px 13px;font-size:11.5px;font-weight:700}
.intg-btn:hover{filter:brightness(1.08)}
.intg-btn.ghost{background:transparent;border:1px solid var(--rule2);color:var(--txt2)}
.intg-btn.ghost:hover{border-color:var(--a-map);color:var(--txt)}
.intg-logbtn{background:transparent;border:1px solid var(--rule2);color:var(--txt2);border-radius:8px;padding:7px 11px;font-size:11px}
.intg-logbtn:hover{border-color:var(--a-map);color:var(--txt)}
.intg-logn{background:var(--pane2);border-radius:20px;padding:1px 6px;font:700 9px/1.4 var(--mono);color:var(--txt3)}
.intg-logn.fail{color:var(--neg)}
.intg-since{font:500 9.5px/1 var(--mono);color:var(--txt3);letter-spacing:.02em;border-top:1px solid var(--rule);padding-top:9px}
.intg-lock{opacity:.7}
/* integrations modal */
#intgModal{position:fixed;inset:0;z-index:3300;display:none;background:rgba(2,7,12,.66);backdrop-filter:blur(4px)}
#intgModal.on{display:grid;place-items:center;animation:talkFade .2s ease}
.intg-modal{width:min(480px,94vw);max-height:88vh;overflow-y:auto;background:var(--bg2);border:1px solid var(--rule2);border-radius:14px;box-shadow:0 24px 60px var(--shadow)}
.intg-mh{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--rule)}
.intg-mh h3{margin:0;font-size:16px;color:var(--txt)}
.intg-x{margin-left:auto;background:transparent;border:1px solid var(--rule);color:var(--txt3);border-radius:8px;width:30px;height:30px;flex:none}
.intg-x:hover{border-color:var(--txt2);color:var(--txt)}
.intg-mbody{padding:16px 18px}
.intg-flabel{display:block;font:600 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--txt3);margin:12px 0 5px}
.intg-fin{width:100%;background:var(--pane);border:1px solid var(--rule2);color:var(--txt);border-radius:9px;padding:10px 12px;font:inherit;font-size:13px}
.intg-fin:focus{outline:none;border-color:var(--a-map)}
.intg-note{margin-top:14px;font-size:10.5px;color:var(--txt3);line-height:1.55;background:var(--pane);border:1px solid var(--rule);border-radius:9px;padding:10px 12px}
.intg-mfoot{display:flex;align-items:center;gap:9px;padding:14px 18px;border-top:1px solid var(--rule)}
.intg-logsub{font-size:11px;color:var(--txt3);margin-bottom:12px}
.intg-loglist{display:flex;flex-direction:column;gap:8px}
.intg-logrow{display:flex;align-items:center;gap:10px;background:var(--pane);border:1px solid var(--rule);border-radius:9px;padding:9px 11px}
.intg-logdot{width:9px;height:9px;border-radius:50%;flex:none}
.intg-logdot.ok{background:var(--pos);box-shadow:0 0 7px var(--pos)}
.intg-logdot.fail{background:var(--neg);box-shadow:0 0 7px var(--neg)}
.intg-logb{flex:1;min-width:0}
.intg-logd{font-size:12px;color:var(--txt)}
.intg-logt{font:500 9.5px/1 var(--mono);color:var(--txt3);margin-top:3px}
.intg-logs{font:700 9px/1 var(--mono);letter-spacing:.06em;border-radius:5px;padding:3px 6px}
.intg-logs.ok{color:var(--pos);background:color-mix(in srgb,var(--pos) 12%,transparent)}
.intg-logs.fail{color:var(--neg);background:color-mix(in srgb,var(--neg) 12%,transparent)}

/* ── Load bay: dragging blocks between the dock and the truck ──────────────────────────────────
   The gesture the owner remembered. It was never deleted — wireLoadStage() still implements it for
   the pallet view this screen replaced — but it had no target on the block view, so there was
   nothing to drag. These are the affordances that make the drag legible: what is moving, and where
   it can land. */
.ovblk[draggable="true"]{cursor:grab}
.ovblk[draggable="true"]:active{cursor:grabbing}
.ovblk.ovblk-dragging{opacity:.4;transform:scale(.96)}
.ovblk.locked{cursor:default}
.ovdock-floor.ovfloor-over,.ovtruck-floor.ovfloor-over{
  outline:2px dashed var(--a-load,#ff9a6a);outline-offset:-4px;background:rgba(255,154,106,.10)}
.ovbay-n{font:600 10px/1 ui-monospace,Consolas,monospace;opacity:.7;margin-left:6px}
/* An en-route bed is a record, not a workspace — it reads the same but invites no interaction. */
.ovbed2.enroute .ovblk{cursor:default}

/* ===== ACCOUNTING workspace (screens/22-accounting.js) =====================
   Reuses the Equipment shell (.eqwrap/.eqhdr/.eqnav/.eqtab) so the two
   workspaces feel like one system. Only what accounting adds lives here:
   an aging bar, the invoice detail drawer, and the line editor. ========== */

/* aging bars — the length is the comparison; the number stays exact beside it */
.acct-age{display:grid;grid-template-columns:56px 1fr 96px 30px;align-items:center;gap:10px;padding:5px 0}
.acct-age-l{font-size:10.5px;font-weight:700;letter-spacing:.06em;color:var(--txt2)}
.acct-age-bar{height:8px;border-radius:4px;background:var(--hover);overflow:hidden}
.acct-age-bar>span{display:block;height:100%;border-radius:4px;transition:width .3s ease}
.acct-age-v{text-align:right;font-size:11.5px;font-variant-numeric:tabular-nums}
.acct-age-n{text-align:right;font-size:10px;font-variant-numeric:tabular-nums}

.acct-search{background:var(--pane);border:1px solid var(--rule);border-radius:5px;color:var(--txt);
  font:inherit;font-size:11px;padding:3px 8px;width:190px;max-width:40vw}
.acct-search:focus{outline:none;border-color:var(--a-feed)}

/* a credit note badge — a negative invoice must never be mistaken for a charge */
.acct-cn{display:inline-block;margin-left:5px;padding:0 4px;border-radius:3px;background:var(--warn);
  color:var(--ink);font:800 8.5px/1.5 ui-monospace,Consolas,monospace;letter-spacing:.06em;vertical-align:middle}
.acct-nt{display:inline-block;margin-left:6px;padding:0 4px;border:1px solid var(--rule2);border-radius:3px;
  color:var(--txt3);font-size:9px;vertical-align:middle}

/* detail drawer */
.acct-void{background:rgba(239,68,68,.12);color:var(--neg);border-left:3px solid var(--neg);
  padding:7px 12px;font:800 10px/1.4 inherit;letter-spacing:.1em}
.acct-head{display:flex;justify-content:space-between;gap:16px;padding:12px 14px;border-bottom:1px solid var(--rule)}
.acct-lbl{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt3);margin-bottom:3px}
.acct-strong{font-weight:700}
.acct-facts{display:grid;grid-template-columns:auto auto;gap:2px 10px;margin:0;text-align:right;align-content:start}
.acct-facts dt{font-size:10px;color:var(--txt3)}
.acct-facts dd{margin:0;font-size:11px;font-variant-numeric:tabular-nums}

.acct-tot{display:flex;justify-content:flex-end;padding:10px 14px}
.acct-tot dl{display:grid;grid-template-columns:auto 110px;gap:3px 14px;margin:0;min-width:220px}
.acct-tot dt{font-size:11px;color:var(--txt2)}
.acct-tot dd{margin:0;text-align:right;font-size:11.5px;font-variant-numeric:tabular-nums}
.acct-tot .rule{padding-top:5px;border-top:1px solid var(--rule)}
.acct-tot .strong{font-weight:800;color:var(--txt)}

.acct-sec{padding:10px 14px;border-top:1px solid var(--rule)}
.acct-pay{display:flex;justify-content:space-between;gap:10px;font-size:11px;padding:3px 0;
  font-variant-numeric:tabular-nums;color:var(--txt2)}
.acct-acts{display:flex;flex-wrap:wrap;gap:6px;padding:12px 14px;border-top:1px solid var(--rule)}

/* line editor */
.acct-form{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px}
.acct-form label{display:flex;flex-direction:column;gap:3px;font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--txt3)}
.acct-form select,.acct-form input{background:var(--pane);border:1px solid var(--rule);border-radius:5px;
  color:var(--txt);font:inherit;font-size:11.5px;padding:4px 7px;text-transform:none;letter-spacing:0}
.acct-form select:focus,.acct-form input:focus{outline:none;border-color:var(--a-feed)}
.acct-ro{font-size:11.5px;padding:4px 0;color:var(--txt);text-transform:none;letter-spacing:0;font-weight:600}
.acct-lines input[type=text],.acct-lines input:not([type=checkbox]){width:100%;background:transparent;
  border:1px solid transparent;border-radius:4px;color:var(--txt);font:inherit;font-size:11px;padding:2px 4px}
.acct-lines input:not([type=checkbox]):hover{border-color:var(--rule)}
.acct-lines input:not([type=checkbox]):focus{outline:none;border-color:var(--a-feed);background:var(--pane)}
.acct-note{display:flex;flex-direction:column;gap:3px;margin-top:12px;font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--txt3)}
.acct-note textarea{background:var(--pane);border:1px solid var(--rule);border-radius:5px;color:var(--txt);
  font:inherit;font-size:11.5px;padding:5px 7px;resize:vertical;text-transform:none;letter-spacing:0}
.acct-note textarea:focus{outline:none;border-color:var(--a-feed)}

/* A/R totals strip — the column sums, aligned under their columns */
.acct-artot{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr 1fr 1fr;gap:8px;padding:8px 12px;
  border-top:1px solid var(--rule2);background:var(--head);font-size:11px;text-align:right;
  font-variant-numeric:tabular-nums}
.acct-artot>span:first-child{text-align:left;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt3)}
.acct-artot .strong{font-weight:800;color:var(--txt)}

/* an honest note about what a screen does NOT cover, kept visually quiet */
.acct-caveat{margin:10px 2px 0;font-size:10.5px;line-height:1.6;color:var(--txt3);max-width:70ch}

/* ── Settlement: counting the driver's money back in ─────────────────────────
   Two columns of figures side by side — what the ledger says, what was counted
   — because the whole job is comparing them. The variance is large and coloured
   and updates as you type, so a shortage is seen BEFORE the button is pressed
   rather than after it is committed. */
.acct-settle{border:1px solid var(--rule);border-radius:8px;margin:10px 12px;background:var(--pane);overflow:hidden}
.acct-settle-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;
  padding:10px 13px;background:var(--head);border-bottom:1px solid var(--rule)}
.acct-settle-var{text-align:right;min-width:110px}
.acct-settle-vn{font-size:19px;font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums;line-height:1.1}
.acct-settle-var.pos .acct-settle-vn{color:var(--pos)}
.acct-settle-var.neg .acct-settle-vn{color:var(--neg)}
.acct-settle-var.warn .acct-settle-vn{color:var(--warn)}
.acct-settle-var.dim .acct-settle-vn{color:var(--txt2)}

.acct-tenders{padding:8px 13px}
.acct-tender{display:grid;grid-template-columns:1fr 110px 110px;gap:10px;align-items:center;padding:3px 0}
.acct-tender-l{font-size:11.5px;color:var(--txt2)}
.acct-tender>span:nth-child(2),.acct-tender>span:nth-child(3){text-align:right;font-size:11.5px;
  font-variant-numeric:tabular-nums}
.acct-tender-hd{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt3);
  border-bottom:1px solid var(--rule);padding-bottom:4px;margin-bottom:2px}
.acct-tender-hd>span:nth-child(2),.acct-tender-hd>span:nth-child(3){font-size:9.5px}
.acct-tender-tot{border-top:1px solid var(--rule);margin-top:4px;padding-top:6px;font-weight:700}
.acct-tender input{background:var(--bg,var(--pane));border:1px solid var(--rule);border-radius:5px;
  color:var(--txt);font:inherit;font-size:11.5px;padding:3px 7px;text-align:right;width:110px;
  font-variant-numeric:tabular-nums}
.acct-tender input:focus{outline:none;border-color:var(--a-load)}

.acct-settle-ft{display:flex;gap:8px;align-items:center;padding:9px 13px;border-top:1px solid var(--rule);
  background:var(--head)}
.acct-settle-note{flex:1;min-width:0;background:var(--pane);border:1px solid var(--rule);border-radius:5px;
  color:var(--txt);font:inherit;font-size:11.5px;padding:4px 8px}
.acct-settle-note:focus{outline:none;border-color:var(--a-load)}
.acct-settle-lines{border-top:1px solid var(--rule)}

/* An account on credit hold — the badge has to read at a glance in a dense table,
   because its whole purpose is to stop somebody taking the next order. */
.acct-hold{display:inline-block;margin-left:6px;padding:0 5px;border-radius:3px;background:var(--neg);
  color:#fff;font:800 8.5px/1.6 ui-monospace,Consolas,monospace;letter-spacing:.08em;vertical-align:middle}

/* A bill raised from a service order rather than typed in — knowing where a payable
   came from is what lets somebody find the work behind it. */
.acct-src{display:inline-block;margin-left:6px;padding:0 4px;border-radius:3px;border:1px solid var(--rule2);
  color:var(--txt3);font:700 8.5px/1.6 ui-monospace,Consolas,monospace;letter-spacing:.06em;vertical-align:middle}

/* An actionable AI ticker line — a suggestion awaiting a decision, as against a status update.
   Only one of the two is asking the user for something, so the difference has to read at a glance
   while the strip is moving. */
.tape .it.ai-act{cursor:pointer}
.tape .it.ai-act:hover{background:color-mix(in srgb,var(--a-map) 22%,transparent)}
.tape .it.ai-act:focus-visible{outline:2px solid var(--a-map);outline-offset:1px}
.tape .lbl{color:var(--a-map)}

/* ── The shared CRUD form (screens/00-crud.js) ─────────────────────────────
   Reuses the payment modal's shell so a register form and a payment form are
   recognisably the same kind of thing. Only the field grid is new. */
.crud-form{display:grid;grid-template-columns:1fr 1fr;gap:9px 12px}
.crud-form label{display:flex;flex-direction:column;gap:3px;font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--txt3)}
.crud-form label .req{color:var(--neg);font-style:normal}
.crud-form input,.crud-form select{background:var(--pane);border:1px solid var(--rule);border-radius:5px;
  color:var(--txt);font:inherit;font-size:12px;padding:5px 8px;text-transform:none;letter-spacing:0}
.crud-form input:focus,.crud-form select:focus{outline:none;border-color:var(--a-map)}
.crud-form .crud-check{flex-direction:row;align-items:center;gap:7px;text-transform:none;letter-spacing:0;
  font-size:11.5px;color:var(--txt2);grid-column:1/-1}
.crud-hint{font-style:normal;font-size:10px;text-transform:none;letter-spacing:0;color:var(--txt3)}
/* A field that needs the full width says so by spanning — a long address in a half-width box is a
   box the user cannot read what they typed into. */
.crud-form label.wide{grid-column:1/-1}
.crud-note{margin:10px 0 0;font-size:10.5px;line-height:1.55;color:var(--txt3)}
.crud-acts{display:flex;gap:7px;padding-top:13px;margin-top:12px;border-top:1px solid var(--rule)}
.crud-err{background:rgba(239,68,68,.12);color:var(--neg);border-left:3px solid var(--neg);
  padding:7px 10px;border-radius:4px;font-size:11.5px;margin-bottom:10px}

/* Automated-dunning opt-in on the A/R tab — a quiet control, not a call to action. */
.acct-dun{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;color:var(--txt3);
  border:1px solid var(--rule);border-radius:6px;padding:2px 7px;background:var(--pane)}
.acct-dun-l{white-space:nowrap}
.acct-dun input{width:48px;background:var(--bg,var(--pane));border:1px solid var(--rule);border-radius:4px;
  color:var(--txt);font:inherit;font-size:11px;padding:1px 5px;text-align:right}
.acct-dun input:focus{outline:none;border-color:var(--neg)}

/* ── Water side-bay truck loading (screens/07-loading.js) ──────────────────
   A top-down truck divided into labeled bay compartments — the water load model
   from the conversion audit. Configurable 4/6/8/10 + starter templates. */
.wload{display:flex;flex-direction:column;gap:12px;padding:12px}
.wbaysel{display:inline-flex;gap:3px;margin-left:6px}
/* Water load screen: the LOAD LIST + CUSTOMERS panels above the side-bay truck */
.wpanels{display:grid;grid-template-columns:1fr 1.3fr;gap:10px}
@media(max-width:900px){.wpanels{grid-template-columns:1fr}}
.wll-q{margin-left:auto;font-weight:700;color:var(--a-map)}
/* draggable inventory chips in the LOAD LIST (the drag source) */
.wll .enr-list{display:flex;flex-direction:column;gap:3px;max-height:220px;overflow:auto;padding:2px}
.wll.wbay-over{outline:2px dashed var(--a-load);outline-offset:-4px;border-radius:10px}
.wll-tools{margin-left:auto;display:inline-flex;gap:4px}
.wll-item{display:flex;align-items:center;gap:7px;padding:5px 8px;border-radius:8px;background:var(--pane2);border:1px solid var(--rule);cursor:grab}
.wll-item:hover{border-color:var(--a-load);background:var(--hover)}
.wll-item:active{cursor:grabbing}
.wll-item.wblk-drag{opacity:.45}
.wll-item.staged{opacity:.72}
.wll-grip{color:var(--txt3);font-size:10px;letter-spacing:-2px;flex:none}
.wll-item .enr-nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px}
.wll-item .wll-q{margin-left:0}
.wll-bay{flex:none;font:700 8.5px/1 ui-monospace,Consolas,monospace;letter-spacing:.04em;padding:3px 6px;border-radius:6px;
  background:color-mix(in srgb,var(--txt3) 16%,transparent);color:var(--txt3);white-space:nowrap}
.wll-bay.on{background:color-mix(in srgb,var(--a-load) 22%,transparent);color:var(--a-load)}
.wcust-list{max-height:200px;overflow:auto;display:flex;flex-direction:column;gap:2px;padding:2px}
.wcust-row{display:flex;align-items:center;gap:8px;padding:4px 8px;border-radius:7px;border-left:3px solid var(--rc,var(--a-map));background:var(--pane2)}
.wcust-row:hover{background:var(--hover)}
.wcust-seq{flex:none;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font:800 9px/1 ui-monospace,Consolas,monospace;background:var(--rc,var(--a-map));color:var(--ink)}
.wcust-nm{font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.wcust-q{font-weight:700;color:var(--txt)}
.wcust-u{font-size:9px}
.wcust-win{font-size:9px;margin-left:6px;white-space:nowrap}
.wbtpl{appearance:none;background:transparent;border:1px solid var(--rule);color:var(--txt3);
  font:inherit;font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 7px;border-radius:5px;cursor:pointer}
.wbtpl:hover{color:var(--txt);background:var(--hover)}
.wbtpl.on{background:var(--a-load);color:var(--ink);border-color:transparent}
.wtruck{display:flex;align-items:stretch;gap:8px;border:2px solid var(--rule2);border-radius:14px;
  padding:12px;background:var(--bg2)}
.wcab{flex:none;width:52px;display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;
  transform:rotate(180deg);font:800 11px/1 ui-monospace,Consolas,monospace;letter-spacing:.2em;
  color:var(--txt3);background:var(--head);border:1px solid var(--rule);border-radius:10px}
.wbays{flex:1;display:grid;gap:8px}
.wbay{border:1px solid var(--rule);border-radius:9px;background:var(--pane);min-height:96px;display:flex;
  flex-direction:column;transition:border-color .12s,background .12s}
.wbay.wbay-over{border-color:var(--a-load);background:color-mix(in srgb,var(--a-load) 12%,transparent)}
.wbay-empties{border-style:dashed;background:color-mix(in srgb,var(--a-driv) 8%,transparent)}
.wbay-hd{display:flex;justify-content:space-between;align-items:center;padding:5px 8px;
  border-bottom:1px solid var(--rule)}
.wbay-n{font:800 10px/1 ui-monospace,Consolas,monospace;letter-spacing:.08em;color:var(--txt2)}
.wbay-c{font-size:9.5px;color:var(--txt3);font-variant-numeric:tabular-nums}
.wbay-body{flex:1;padding:6px;display:flex;flex-wrap:wrap;gap:5px;align-content:flex-start}
.wbay-empty{width:100%;align-self:center;text-align:center;font-size:10px;color:var(--txt3);opacity:.7}
.wblk{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:52px;padding:5px 6px;
  border-radius:6px;border:1px solid var(--rule2);border-left:3px solid var(--bc,#5ad1ff);
  background:var(--bg2);cursor:grab}
.wblk:active{cursor:grabbing}
.wblk-sku{font:700 10px/1.1 ui-monospace,Consolas,monospace;color:var(--txt)}
.wblk-q{font-size:11px;font-weight:800;color:var(--bc,#5ad1ff);font-variant-numeric:tabular-nums}
/* ── Driver's Load Sheet — top-down truck: cab, two side columns of bays (2×2), rear doors ── */
.wtruck2{display:flex;flex-direction:column;gap:6px;border:2px solid var(--rule2);border-radius:14px;padding:10px;background:var(--bg2)}
.wcab2,.wrear2{flex:none;text-align:center;font:800 10px/1 ui-monospace,Consolas,monospace;letter-spacing:.22em;
  color:var(--txt3);background:var(--head);border:1px solid var(--rule);border-radius:9px;padding:6px}
.wgrid{display:flex;flex-direction:column;gap:8px}
.wgrow{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.wgrow-starter{position:relative}
.wgrow-starter::after{content:'STARTER';position:absolute;top:-7px;left:50%;transform:translateX(-50%);
  font:800 8px/1 ui-monospace,Consolas,monospace;letter-spacing:.16em;color:var(--a-driv);
  background:var(--bg2);padding:0 6px}
.wbay-starter{border-style:dashed;background:color-mix(in srgb,var(--a-driv) 9%,transparent)}
.wbay-starter .wbay-n{color:var(--a-driv)}
.wbay-none{border:1px dashed var(--rule);border-radius:9px;background:transparent;opacity:.35}
.wcoolers{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--rule);border-radius:10px;background:var(--pane2)}
.wcool-lab{font:800 10px/1 ui-monospace,Consolas,monospace;letter-spacing:.1em;color:var(--txt2)}
.wcool-pill{font-size:10px;padding:3px 9px;border-radius:20px;border:1px solid var(--rule2);color:var(--txt2);font-variant-numeric:tabular-nums}
.wcool-pill b{color:var(--txt);margin-right:2px}
.wcool-pill.out{border-color:color-mix(in srgb,var(--a-load) 45%,var(--rule2))}
.wcool-pill.in{border-color:color-mix(in srgb,var(--a-driv) 45%,var(--rule2))}
.wll-grp{font:800 9px/1 ui-monospace,Consolas,monospace;letter-spacing:.08em;color:var(--txt3);
  text-transform:uppercase;padding:6px 4px 2px;position:sticky;top:0;background:var(--pane)}
.wload-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 4px}
/* ── Route-Sell / Driver Commission form ── */
.commwrap{display:flex;flex-direction:column;height:100%;padding:10px}
.comm-rtlist{display:flex;flex-direction:column;gap:6px;overflow:auto;padding:2px}
.comm-rt{border:1px solid var(--rule);border-left:3px solid var(--rc,var(--a-feed));border-radius:9px;background:var(--pane2);padding:7px 9px;cursor:pointer;transition:background .12s,border-color .12s}
.comm-rt:hover{background:var(--hover)}
.comm-rt.on{background:color-mix(in srgb,var(--a-feed) 12%,transparent);border-color:var(--a-feed)}
.comm-rt-top{display:flex;justify-content:space-between;align-items:center}
.comm-rt-top b{font:800 12px/1 ui-monospace,Consolas,monospace;color:var(--txt)}
.comm-rt-st{font:800 11px/1 ui-monospace,Consolas,monospace;color:var(--txt3)}
.comm-rt-st.part{color:var(--amber,#ffb454)}
.comm-rt-st.ok{color:var(--pos)}
.comm-rt-sub{font-size:10px;color:var(--txt2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.comm-rt-pay{font:800 13px/1 ui-monospace,Consolas,monospace;color:var(--txt);margin-top:4px}
.comm-rt-pay .dim{font-weight:400;font-size:9px}
.comm-body{display:flex;flex-direction:column;gap:12px;overflow:auto;padding:2px}
.comm-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.comm-kpi{border:1px solid var(--rule);border-radius:10px;background:var(--pane2);padding:8px 10px}
.comm-kpi span{display:block;font-size:9.5px;color:var(--txt3);text-transform:uppercase;letter-spacing:.05em}
.comm-kpi b{font:800 17px/1.1 ui-monospace,Consolas,monospace;color:var(--txt);font-variant-numeric:tabular-nums}
.comm-kpi.pos b{color:var(--pos)}
.comm-cut{width:58px;background:transparent;border:none;border-bottom:1px solid var(--rule2);color:var(--txt);font:800 17px/1 ui-monospace,Consolas,monospace;text-align:right}
.comm-tbl{width:100%}
.comm-tbl td,.comm-tbl th{padding:5px 8px}
.comm-tbl .comm-sku{font:600 8.5px/1 ui-monospace,Consolas,monospace;color:var(--txt3);margin-left:8px}
.comm-tbl .comm-z{opacity:.4}
.comm-sold{font-weight:800;color:var(--a-feed)}
.comm-comm{font-weight:800;color:var(--pos)}
.comm-in,.comm-r,.comm-n{background:var(--bg2);border:1px solid var(--rule2);border-radius:6px;color:var(--txt);
  font:700 11px/1 ui-monospace,Consolas,monospace;padding:3px 5px;text-align:right}
.comm-in{width:56px}.comm-r{width:62px}.comm-n{width:96px}.comm-n.sm{width:56px}
.comm-in:focus,.comm-r:focus,.comm-n:focus,.comm-cut:focus{outline:none;border-color:var(--a-feed)}
.comm-tbl .comm-total td{border-top:2px solid var(--rule2);padding-top:7px}
.comm-settle{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.comm-turn,.comm-pay{border:1px solid var(--rule);border-radius:11px;background:var(--pane2);padding:10px 12px}
.comm-sec{font:800 9px/1 ui-monospace,Consolas,monospace;letter-spacing:.1em;color:var(--txt3);margin-bottom:8px}
.comm-kv{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 0;font-size:12px;color:var(--txt2)}
.comm-kv b{color:var(--txt);font-variant-numeric:tabular-nums}
.comm-kv.strong{border-top:1px solid var(--rule);margin-top:4px;padding-top:8px;font-weight:700}
.comm-kv.strong b{font:800 15px/1 ui-monospace,Consolas,monospace}
.comm-kv.pos b{color:var(--pos)}
.comm-verify{display:flex;align-items:center;gap:8px;padding:2px}
.comm-vbtn{appearance:none;border:1px solid var(--rule2);border-radius:8px;background:var(--pane2);color:var(--txt2);
  font:700 11px/1 inherit;padding:7px 12px;cursor:pointer;transition:.12s}
.comm-vbtn:hover{border-color:var(--a-feed);color:var(--txt)}
.comm-vbtn.on{background:color-mix(in srgb,var(--pos) 16%,transparent);border-color:var(--pos);color:var(--pos)}
/* ── Warehouses (hubs) CRUD ── */
.whwrap{height:100%;padding:10px}
.wh-form{display:flex;flex-direction:column;gap:9px;padding:12px}
.wh-form label{display:flex;flex-direction:column;gap:3px;font-size:10px;color:var(--txt3);text-transform:uppercase;letter-spacing:.05em}
.wh-form input{background:var(--bg2);border:1px solid var(--rule2);border-radius:7px;color:var(--txt);padding:7px 9px;font:600 12px/1 inherit}
.wh-form input:focus{outline:none;border-color:var(--a-load)}
.wh-form label span{text-transform:none;letter-spacing:0;color:var(--txt3);font-size:9.5px}
.wh-row{display:flex;gap:8px;align-items:flex-end}
.wh-row label{flex:1}
.wh-acts{display:flex;align-items:center;gap:8px;margin-top:6px}

/* Move-route menu (#94): the plan line states what the button will do BEFORE it is pressed —
   which driver, how many stops, which route they land on — because the previous version said
   "move route to another day" and silently returned everything to the backlog. */
.rmenu-move{display:flex;flex-direction:column;gap:5px;margin:4px 0}
.rmenu-plan{background:rgba(90,209,255,.09);border:1px solid var(--rule2);border-radius:6px;
  padding:6px 8px;font-size:10.5px;line-height:1.5;color:var(--txt2)}
.rmenu-plan b{color:var(--txt)}
.rmenu-newname.hide{display:none}
.rmenu-pickroute.hide,.rmenu-day.hide{display:none}
.rmenu-over{margin-top:5px;padding:4px 6px;border-radius:5px;background:rgba(255,180,84,.14);
  border:1px solid rgba(255,180,84,.4);color:var(--warn);font-size:10px;font-weight:600}

/* #170/#172 - the Big Picture cards became places to act from.

   Brian on the coverage card: "there's nothing clickable, and I'm not sure what to do with this
   information"; on Cycle Completion: "I should see all route's cycles"; and on Staffing: "I kind of
   was expecting to see the Cycle Completion change to show that route I clicked on." All three had
   the same shape of fault — a read-only readout of something you plainly want to open — so they get
   the same treatment: a row is a control, it says what is inside it, and it leads somewhere. */
.ovgaps{display:flex;flex-wrap:wrap;gap:5px}
.ovgap{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:9.5px;font-weight:700;
  padding:4px 8px;border-radius:6px;cursor:pointer;color:var(--txt2);
  background:var(--bg2);border:1px solid var(--rule);transition:background .12s,border-color .12s,transform .04s}
.ovgap:hover{background:var(--hover);border-color:var(--a-area);color:var(--txt)}
.ovgap:active{transform:translateY(1px)}
.ovgap .sw{width:7px;height:7px;border-radius:2px;flex:0 0 auto}
/* An area with stops inside it is the one worth opening; an empty one is just a gap on the map. */
.ovgap.has{color:var(--txt);border-color:color-mix(in srgb,var(--neg) 45%,transparent);
  background:color-mix(in srgb,var(--neg) 10%,transparent)}
.ovgap-n{font-size:8.5px;font-weight:800;letter-spacing:.04em;color:var(--txt3)}
.ovgap.has .ovgap-n{color:var(--neg)}
.ovcyc{display:flex;align-items:center;gap:8px;font-size:11px;padding:3px 5px;margin:0 -5px;
  border-radius:5px;cursor:pointer}
.ovcyc:hover{background:var(--hover)}
.ovcyc>b{width:64px;color:var(--txt2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ovcyc-bar{flex:1;height:7px;background:var(--rule);border-radius:4px;overflow:hidden}
.ovcyc-bar>i{display:block;height:100%}
.ovcyc>.mono{width:52px;text-align:right;color:var(--txt3)}
/* What the bar is measuring, said on every row — three routes can be at "6/10" for three different
   reasons and a bar alone cannot tell you which. */
.ovcyc-src{width:70px;font-size:8.5px;letter-spacing:.03em;color:var(--txt3);text-align:right}
.ovstaff{cursor:pointer}
.ovstaff:hover{background:var(--hover)}

/* #111 - container routes. A permanent code with no recurring stops, activated for a day. */
.rln-cnote{font-size:10.5px;line-height:1.6;color:var(--txt2);background:var(--bg2);
  border:1px dashed var(--rule2);border-radius:7px;padding:9px 10px;margin:2px 0 8px}
.rln-cnote b{color:var(--txt)}
/* On the board a container lane reads as a container even when empty — an empty ordinary lane is a
   problem, an empty container is just Tuesday morning. */
.tag.t-container{color:#c9a7ff;border-color:color-mix(in srgb,#c9a7ff 40%,transparent);
  background:color-mix(in srgb,#c9a7ff 12%,transparent)}
.ctrow{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;cursor:pointer;
  border:1px solid var(--rule);background:var(--bg2);margin-bottom:6px;text-align:left;width:100%;
  font:inherit;color:var(--txt2);transition:border-color .12s,background .12s}
.ctrow:hover{border-color:#c9a7ff;background:var(--hover);color:var(--txt)}
.ctrow .sw{width:9px;height:9px;border-radius:3px;flex:0 0 auto}
.ctrow b{font-size:12px;color:var(--txt)}
.ctrow .ctmeta{margin-left:auto;font-size:9.5px;color:var(--txt3);text-align:right}

/* #151 - the Routes rail as layers. Hiding and collapsing are separate controls because they are
   separate operations: hidden means "off my map but still mine", collapsed means "I know it is
   there, give me the room". */
.rr-eye,.rr-collapse,.rr-del{appearance:none;background:none;border:none;cursor:pointer;padding:0 2px;
  font:inherit;font-size:10px;line-height:1;color:var(--txt3);flex:0 0 auto;transition:color .12s}
.rr-eye:hover,.rr-collapse:hover{color:var(--txt)}
.rr-del{margin-left:auto;color:var(--txt3)}
.rr-del:hover{color:var(--neg)}
/* Hidden: legible, obviously set aside, and NOT gone. Fading it to nothing would say "deleted". */
.rrow.rr-hidden{opacity:.42}
.rrow.rr-hidden .rname{text-decoration:line-through;text-decoration-thickness:1px}
.rrow.rr-hidden .rr-eye{color:var(--warn)}
.rrow.rr-collapsed .rr-body{display:none}
.rrow.rr-collapsed{padding-bottom:6px}
.rrow.rr-dragging{opacity:.5}
.rrow.rr-over{box-shadow:inset 0 2px 0 0 var(--a-route)}
/* The five states. Colour carries the sequence - amber waiting, green ready, blue moving, violet
   returning, teal finished - so the rail reads as a progression at a glance rather than as five
   unrelated badges. */
.rstage{font-size:8px;font-weight:800;letter-spacing:.05em;padding:1px 5px;border-radius:3px;
  border:1px solid transparent;white-space:nowrap}
.rs-new{color:#ffc24d;border-color:color-mix(in srgb,#ffc24d 40%,transparent);background:color-mix(in srgb,#ffc24d 12%,transparent)}
.rs-load{color:#7fe3a1;border-color:color-mix(in srgb,#7fe3a1 40%,transparent);background:color-mix(in srgb,#7fe3a1 12%,transparent)}
.rs-act{color:#5ad1ff;border-color:color-mix(in srgb,#5ad1ff 40%,transparent);background:color-mix(in srgb,#5ad1ff 12%,transparent)}
.rs-ret{color:#c9a7ff;border-color:color-mix(in srgb,#c9a7ff 40%,transparent);background:color-mix(in srgb,#c9a7ff 12%,transparent)}
.rs-done{color:#3be0c4;border-color:color-mix(in srgb,#3be0c4 40%,transparent);background:color-mix(in srgb,#3be0c4 12%,transparent)}

/* #167 - the area workbench. Grouped by route and day because that is how he says it out loud. */
.awbar{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.awgroup{border:1px solid var(--rule);border-radius:8px;margin-bottom:8px;overflow:hidden;background:var(--bg2)}
.awghd{display:flex;align-items:center;gap:7px;padding:6px 9px;font-size:10.5px;
  background:var(--pane2);border-bottom:1px solid var(--rule)}
.awghd .miniact{margin-left:auto}
.awstop{display:flex;align-items:center;gap:8px;padding:4px 9px;font-size:11px;cursor:pointer}
.awstop:hover{background:var(--hover)}
/* A pinned stop reads as deliberately out of scope, not as broken. */
.awstop.pinned{opacity:.5;cursor:default}
.awname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.awmeta{margin-left:auto;font-size:9.5px;white-space:nowrap}
.awpreview{border-style:dashed}

/* #91 (2026-09-29) — the actual-count editor on every load confirm: the handheld summary (.lc-big,
   thumb-sized steppers for a driver at the dock) and the office confirm sheet. */
.lc{margin:10px 0 12px;display:flex;flex-direction:column;gap:6px}
.lc-hd{font-size:11px;font-weight:700;letter-spacing:.02em}
.lc-row{display:grid;grid-template-columns:10px 1fr auto 70px auto;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--rule2);border-radius:8px}
.lc-row.lc-changed{border-color:color-mix(in srgb,#7fe3a1 55%,transparent);background:color-mix(in srgb,#7fe3a1 7%,transparent)}
.lc-k{display:flex;flex-direction:column;min-width:0}.lc-k b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lc-k .dim{font-size:10px}
.lc-step{min-width:34px;height:32px;border-radius:8px;border:1px solid var(--rule2);background:transparent;color:inherit;font-size:18px;font-weight:800;cursor:pointer}
.lc-q{width:70px;height:32px;text-align:center;font-weight:800;font-size:15px;border-radius:8px;border:1px solid var(--rule2);background:transparent;color:inherit}
.lc-add select{width:100%;height:34px;border-radius:8px;border:1px dashed var(--rule2);background:transparent;color:inherit;padding:0 8px}
.lc-sum{font-size:12px;padding:4px 2px}.lc-sum .lc-extra{color:#7fe3a1}.lc-sum .lc-short{color:#ffb454}
.lc-big .lc-row{grid-template-columns:10px 1fr 52px 76px 52px;padding:8px}
.lc-big .lc-step{min-width:52px;height:52px;font-size:24px;border-radius:12px}
.lc-big .lc-q{width:76px;height:52px;font-size:20px;border-radius:12px}
.lc-big .lc-add select{height:52px;font-size:15px;border-radius:12px}
.lc-big .lc-sum{font-size:14px}
.lc-sheetwrap{position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.55);display:grid;place-items:center;padding:16px}
.lc-sheet{background:var(--pane);color:var(--txt);border:1px solid var(--rule2);border-radius:12px;padding:14px 16px;width:min(520px,100%);max-height:88vh;overflow:auto}
.lc-sheet-hd{font-size:13px;margin-bottom:4px}.lc-acts{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}

/* ===== #136 — every .rmenu popover (stop right-click, route menu, crew form, skip reasons) reads in
   ALL 28 themes. Its options used to be browser-default light buttons carrying the theme's pale text
   (1.1:1 in Ice), the menu itself was hard-coded dark in light themes, a disabled item faded to 45%
   and hover/focus changed nothing. Every text colour here is the theme's own --txt (secondary lines
   are smaller, not greyer - several themes' --txt3 does not reach 4.5:1 on their panes); accents live
   in borders and bars, never in text. tools/check-menu-contrast.mjs holds every item to WCAG AA
   (4.5:1) at rest, on hover and on keyboard focus, in every theme. */
.rmenu{background:var(--pane2);color:var(--txt);border:1px solid var(--rule2);box-shadow:0 8px 24px var(--shadow)}
.rmenu-hd{color:var(--txt);border-left:3px solid var(--rc,transparent);padding-left:6px}
.rmenu-sub{font:700 9px/1.2 var(--mono,monospace);letter-spacing:.06em;text-transform:uppercase;color:var(--txt);margin-top:2px}
.rmenu .dim,.rmenu label,.rmenu b{color:var(--txt)}
.rmenu .dim{font-weight:400}
.rmenu select,.rmenu input{background:var(--pane);color:var(--txt);border:1px solid var(--rule2)}
.rmenu .skip-opt,.skipmenu .skip-opt{background:var(--pane);color:var(--txt);border:1px solid var(--rule2);border-radius:5px;padding:6px 8px;
  font:600 10.5px/1.3 var(--mono,monospace);text-align:left;cursor:pointer}
.rmenu .skip-opt .dim{color:var(--txt);font-weight:400;font-size:9.5px}
.rmenu .skip-opt:hover,.skipmenu .skip-opt:hover{background:var(--pane2);border-color:var(--txt);color:var(--txt);box-shadow:0 0 0 1px var(--txt) inset}
.rmenu .skip-opt:focus-visible,.rmenu .sb-act:focus-visible,.rmenu .sb-clr:focus-visible{outline:2px solid var(--txt);outline-offset:1px}
.rmenu .skip-opt.cancel,.skipmenu .skip-opt.cancel{color:var(--txt);border-color:var(--neg);border-left-width:3px}
/* A disabled option stays READABLE (its second line says why) - it is dashed and does not respond. */
.rmenu .skip-opt:disabled{opacity:1;cursor:not-allowed;background:transparent;border-style:dashed;color:var(--txt)}
.rmenu .skip-opt:disabled:hover{background:transparent;border-color:var(--rule2);box-shadow:none}
.rmenu .sb-act{background:color-mix(in srgb,var(--a-blot) 16%,var(--pane));color:var(--txt);border:1px solid color-mix(in srgb,var(--a-blot) 65%,var(--rule2))}
.rmenu .sb-act:hover,.rmenu .sb-clr:hover{box-shadow:0 0 0 2px var(--txt) inset}
.rmenu-fit.ok,.rmenu-fit.bad{color:var(--txt)}