:root{--bg:#121211;--panel:#1b1b19;--panel2:#232320;--deep:#141413;--line:#31312d;--line2:#292926;--line3:#4a4a45;--ink:#f0efec;--ink2:#b9b8b2;--mute:#85847e;
  --blue:#3987e5;--blue2:#2a6fc4;--blue3:#2a4a75;--bluebg:#1d2a3d;--link:#7fb2f0;--good:#199e70;--warn:#c98500;--bad:#d95926;--goodt:#4ccb9c;--warnt:#e5ad42;--badt:#f58a5e;
  --goodbg:#12382c;--goodln:#1a6b50;--warnbg:#3b2f10;--warnln:#7a5a12;--badbg:#3d2010;--badln:#8a4a22;--shadow:#000000a6;--off:#3a3a37;--mc:#e0a530;--r:10px;color-scheme:dark}
:root[data-theme=light]{--bg:#f3f2ee;--panel:#ffffff;--panel2:#efeee8;--deep:#e9e7e1;--line:#dcdad2;--line2:#e8e6df;--line3:#bdbbb2;--ink:#1b1b19;--ink2:#4b4a45;--mute:#6b6961;
  --blue:#2468c8;--blue2:#2468c8;--blue3:#2468c8;--bluebg:#e1ebf9;--link:#1f5fbd;--good:#10855a;--warn:#a86a00;--bad:#c2441a;--goodt:#0c7a52;--warnt:#8f5c00;--badt:#b83c14;
  --goodbg:#e0f3ea;--goodln:#93cfb5;--warnbg:#fbf0d4;--warnln:#dab868;--badbg:#fbe7dd;--badln:#e4a688;--shadow:#1b1b1933;--off:#b9b7ae;--mc:#e8a41c;color-scheme:light}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-variant-numeric:tabular-nums}
a{color:var(--link);text-decoration:none}a:hover{text-decoration:underline}
code{font:13px ui-monospace,Consolas,monospace;background:var(--panel2);padding:1px 5px;border-radius:4px}
.top{position:sticky;top:0;z-index:1000;display:flex;align-items:center;gap:20px;padding:10px 20px;background:color-mix(in srgb,var(--deep) 93%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:650;font-size:16px;white-space:nowrap}.brand:hover{text-decoration:none}
.brand small{display:block;font-weight:400;font-size:11px;color:var(--mute);letter-spacing:.02em}
nav{display:flex;gap:2px;flex:1;overflow-x:auto;scrollbar-width:none}nav::-webkit-scrollbar{display:none}
nav a{color:var(--ink2);padding:7px 12px;border-radius:7px;white-space:nowrap;font-size:14px}
nav a:hover{background:var(--panel2);text-decoration:none;color:var(--ink)}
nav a.on{background:var(--panel2);color:var(--ink);box-shadow:inset 0 -2px 0 var(--blue)}
.topr{display:flex;gap:8px;align-items:center;white-space:nowrap}
.chip,.pill{font-size:12.5px;padding:5px 10px;border-radius:99px;border:1px solid var(--line);color:var(--ink2)}
.pill{display:inline-flex;align-items:center;gap:7px}.pill:hover{text-decoration:none;border-color:var(--mute)}
.pill i{width:8px;height:8px;border-radius:50%;background:var(--mute)}
.pill.ok i{background:var(--good)}.pill.warn i{background:var(--warn)}.pill.bad i{background:var(--bad)}
main{max-width:1280px;margin:0 auto;padding:20px 20px 8px}
footer{max-width:1280px;margin:0 auto;padding:14px 20px 34px;color:var(--mute);font-size:12.5px}
h1{font-size:22px;margin:0;font-weight:650}
h2{font-size:17px;margin:22px 0 10px;font-weight:650}h2 small,h3 small{font-weight:400;color:var(--mute);font-size:13px;margin-left:6px}
h3{font-size:15px;margin:0;font-weight:650}
.head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.picker select{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:7px 10px;font:inherit;font-size:14px;margin-left:6px;max-width:70vw}
.picker label{color:var(--mute);font-size:13px}
.fine{color:var(--mute);font-size:12.5px;margin:10px 0 0}span.fine{margin:0}
.empty{color:var(--ink2);padding:18px 0;margin:0}
.tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:14px}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;min-width:0}
.tile small{display:block;color:var(--mute);font-size:12px;text-transform:uppercase;letter-spacing:.05em}
.tile b{display:block;font-size:28px;font-weight:650;line-height:1.2;margin:4px 0 2px;white-space:nowrap}
.tile b span{font-size:14px;font-weight:500;color:var(--ink2);margin-left:4px}
.tile em{display:block;font-style:normal;color:var(--ink2);font-size:12.5px}
.tile.good{border-color:var(--goodln)}.tile.good b::after{content:" ✓";color:var(--good);font-size:18px}
.tile.warn{border-color:var(--warnln)}.tile.warn small::after{content:"";display:inline-block;width:.95em;height:.95em;vertical-align:-.13em;margin-left:.4em;background:var(--warnt);-webkit-mask:var(--warn-ic) center/contain no-repeat;mask:var(--warn-ic) center/contain no-repeat}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin-bottom:14px;min-width:0}
.ph{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.more{font-size:13px}
.cols{display:grid;grid-template-columns:3fr 2fr;gap:14px;align-items:start}
.hero{display:grid;grid-template-columns:minmax(230px,1fr) 3fr;gap:10px;margin-bottom:6px}
.state{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.state small{color:var(--mute);font-size:12px;text-transform:uppercase;letter-spacing:.05em}
.state b{display:block;font-size:26px;line-height:1.2;margin:4px 0}.state em{font-style:normal;color:var(--ink2);font-size:12.5px}

.gauges{display:grid;grid-template-columns:repeat(9,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.g{background:var(--panel);padding:12px 10px;min-width:0}
.g small{display:block;color:var(--mute);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g b{font-size:19px;font-weight:650;white-space:nowrap}.g b span{font-size:12px;color:var(--ink2);font-weight:500;margin-left:3px}
#map{height:430px;border-radius:8px;background:var(--deep);z-index:1}
.maperr{display:grid;place-items:center;height:100%;color:var(--mute);font-size:13px;padding:20px;text-align:center}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin:0 3px 0 8px;border:1.5px solid var(--ink)}
.d-dump{background:var(--bad)}.d-load{background:var(--warn)}
.truckpin{width:22px;height:22px;border-radius:50%;background:var(--blue);border:3px solid #fff;box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 33%,transparent)}
.leaflet-container{font:inherit;background:var(--deep)}
.legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px;color:var(--ink2)}
.legend i,.sw{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:-1px;border:1px solid color-mix(in srgb,var(--ink) 13%,transparent)}
svg.chart{width:100%;height:auto;display:block}
svg.strip{width:100%;display:block;height:38px}
.axis{display:flex;justify-content:space-between;color:var(--mute);font-size:11px;margin-top:4px}
.chartw{overflow-x:auto}.chartw svg{min-width:680px}
.strips svg.strip{height:20px}
.grid{stroke:var(--line2);stroke-width:1}.target{stroke:var(--ink2);stroke-width:1.2;stroke-dasharray:5 4}
.ax{fill:var(--mute);font-size:11px}
.val{fill:var(--ink);font-size:11.5px;font-weight:600}
.bar:hover,svg.strip rect[data-tip]:hover,.cybar i:hover,.share i:hover{filter:brightness(1.25)}
.share{display:flex;gap:2px;height:14px;margin:12px 0 4px;border-radius:5px;overflow:hidden}
.strips{display:grid;gap:8px}
.srow{display:grid;grid-template-columns:130px 1fr 54px;gap:12px;align-items:center;color:var(--ink2);font-size:13px}
.srow:hover{text-decoration:none;color:var(--ink)}.srow b{text-align:right;color:var(--ink)}
.t{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:6px}
.t th{text-align:left;color:var(--mute);font-weight:500;font-size:12px;padding:6px 10px 6px 0;border-bottom:1px solid var(--line);white-space:nowrap}
.t td{padding:7px 10px 7px 0;border-bottom:1px solid var(--line2);white-space:nowrap}
.t tr:last-child td{border-bottom:0}.t tr.dim td{color:var(--mute)}
.t.narrow{max-width:380px}.t.mono td{font:12.5px ui-monospace,Consolas,monospace;color:var(--ink2)}
.scroll{overflow-x:auto}
.tag{font-style:normal;font-size:11px;padding:1px 7px;border-radius:99px;border:1px solid var(--line);color:var(--ink2);margin-left:4px}
.lv{font-style:normal}.lv-critical{color:var(--badt)}.lv-warning{color:var(--warnt)}.over{color:var(--badt);font-weight:650}
.cyc{display:grid;gap:3px}
.cyrow{display:grid;grid-template-columns:86px 1fr 50px;gap:10px;align-items:center;font-size:12.5px}
.cyn{color:var(--ink)}.cyn small{color:var(--mute);margin-left:4px}.cyt{text-align:right;color:var(--ink2)}
.cybar{display:flex;gap:2px;height:14px}.cybar i{display:block;height:100%;border-radius:2px;min-width:1px}
.cybar em{font-style:normal;color:var(--mute);font-size:12px;line-height:14px}
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;counter-reset:f}
.flow li{background:var(--panel2);border-radius:8px;padding:10px 12px;position:relative}
.flow li b{display:block;font-size:14px}.flow li span{color:var(--ink2);font-size:12.5px}
.flow li:not(:last-child)::after{content:"→";position:absolute;right:-10px;top:50%;transform:translate(50%,-50%);color:var(--mute);z-index:1}
#tip{position:fixed;z-index:2000;pointer-events:none;background:var(--ink);color:var(--deep);font-size:12.5px;padding:5px 9px;border-radius:6px;max-width:280px;box-shadow:0 4px 14px var(--shadow)}
.tsel{color:var(--mute);font-size:12.5px}.tsel select,.t.form input:not([type=checkbox]),.t.form select,.limits input{background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:7px;padding:6px 9px;font:inherit;font-size:13.5px}
.tsel select{margin-left:5px;border-radius:99px;max-width:44vw}
.t.form input:focus,.t.form select:focus,.limits input:focus,.tsel select:focus,.picker select:focus{outline:2px solid var(--blue);outline-offset:1px}
.t.form td{padding:6px 10px 6px 0}.t.form tr.add td{border-top:1px solid var(--line);padding-top:12px}
button{background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:7px;padding:6px 13px;font:inherit;font-size:13.5px;cursor:pointer}button:hover{border-color:var(--mute)}
button.pri{background:var(--blue2);border-color:var(--blue2);color:#fff}button.pri:hover{background:var(--blue)}
.limits{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:end}.limits label{display:grid;gap:4px;font-size:13px;color:var(--ink2)}.limits input{width:110px}.limits small{color:var(--mute);font-size:11.5px}
.msg{padding:10px 14px;border-radius:8px;margin:0 0 14px;font-size:14px}.msg.ok{background:var(--goodbg);border:1px solid var(--goodln)}.msg.err{background:var(--badbg);border:1px solid var(--badln)}
.filters{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}.seg a{padding:6px 12px;font-size:13.5px;color:var(--ink2)}.seg a+a{border-left:1px solid var(--line)}.seg a.on{background:var(--panel2);color:var(--ink)}.seg a:hover{text-decoration:none;color:var(--ink)}
.now{display:inline-flex;align-items:center;gap:7px}.now i{width:9px;height:9px;border-radius:50%;border:1px solid color-mix(in srgb,var(--ink) 20%,transparent)}
.sub{display:block;color:var(--mute);font-size:11.5px}.dimc{color:var(--mute)}.sep{color:var(--mute);margin:0 4px}
.prog{display:block;width:90px;height:4px;background:var(--panel2);border-radius:2px;margin-top:5px;overflow:hidden}.prog i{display:block;height:100%;background:var(--blue)}
.t.fleet td{vertical-align:middle}.t.fleet .wide{width:32%;min-width:220px}.t.fleet svg.strip{height:18px}
.t td.wrap{white-space:normal}
.fpin{position:absolute;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:6px;background:var(--deep);color:var(--ink);border:1.5px solid var(--ink);border-radius:99px;padding:3px 9px 3px 6px;font-size:12.5px;font-weight:650;white-space:nowrap;cursor:pointer;box-shadow:0 2px 8px var(--shadow)}
.fpin i{width:10px;height:10px;border-radius:50%}
@media(max-width:1100px){.tiles{grid-template-columns:repeat(3,1fr)}.gauges{grid-template-columns:repeat(5,1fr)}.cols{grid-template-columns:1fr}}
@media(max-width:760px){
  .top{flex-wrap:wrap;gap:8px 12px;padding:8px 16px}nav{order:3;flex-basis:100%}.topr{margin-left:auto}.tsel{font-size:0}.tsel select{font-size:13px;margin:0;max-width:38vw}
  main{padding:14px 16px 4px}footer{padding:10px 16px 28px}
  .tiles{grid-template-columns:repeat(2,1fr)}.tile b{font-size:23px}
  .hero{grid-template-columns:1fr}.gauges{grid-template-columns:repeat(3,1fr)}
  #map{height:320px}.flow{grid-template-columns:1fr}.flow li:not(:last-child)::after{display:none}
  .srow{grid-template-columns:96px 1fr 44px;gap:8px;font-size:12px}
  .cyrow{grid-template-columns:70px 1fr 42px;gap:6px}.cyn small{display:none}
  .panel{padding:12px}.panel>.t{display:block;overflow-x:auto}
}

/* ── v2: full width, depth, motion ── */
body{background:radial-gradient(1200px 500px at 18% -140px,color-mix(in srgb,var(--bluebg) 33%,transparent),transparent 70%),var(--bg);background-attachment:fixed;font-feature-settings:"tnum","cv11";-webkit-font-smoothing:antialiased}
main,footer{max-width:none;padding-left:clamp(16px,2.2vw,44px);padding-right:clamp(16px,2.2vw,44px)}
.top{padding-left:clamp(16px,2.2vw,44px);padding-right:clamp(16px,2.2vw,44px);background:color-mix(in srgb,var(--deep) 85%,transparent);backdrop-filter:saturate(140%) blur(14px)}
nav a{transition:background .18s,color .18s}
.panel,.tile,.kpi{background:linear-gradient(180deg,var(--panel),var(--panel));border:1px solid var(--line2);box-shadow:0 1px 0 color-mix(in srgb,var(--ink) 3%,transparent) inset,0 8px 24px -16px #000}
.panel{border-radius:14px;padding:16px 18px}
.ph h3{font-size:15px;letter-spacing:.005em}
.head.ov{align-items:flex-end;margin-bottom:16px}.head.ov h1{font-size:26px;letter-spacing:-.01em}
.lede{margin:3px 0 0;color:var(--ink2);font-size:13.5px}
.seg{background:var(--panel)}.seg a{transition:background .18s,color .18s}
.picker select,.tsel select{transition:border-color .18s}.picker select:hover,.tsel select:hover{border-color:var(--mute)}
.shiftbar{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;font-size:12.5px;color:var(--ink2);margin-bottom:14px}
.shiftbar>div{height:4px;background:var(--line2);border-radius:2px;overflow:hidden}
.shiftbar>div i{display:block;height:100%;border-radius:2px;background:linear-gradient(90deg,var(--blue2),var(--link));transform-origin:left;animation:growx 1s cubic-bezier(.2,.8,.2,1) both}
.livedot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--goodt);margin-right:8px;box-shadow:0 0 0 0 color-mix(in srgb,var(--goodt) 53%,transparent);animation:pulse 2s infinite}
.kpis{display:grid;grid-template-columns:1.35fr repeat(5,1fr);gap:12px;margin-bottom:14px}
.kpi{border-radius:14px;padding:14px 16px;min-width:0;position:relative;overflow:hidden;transition:transform .2s,border-color .2s}
.kpi:hover{transform:translateY(-2px);border-color:var(--line)}
.kpi small{display:block;color:var(--mute);font-size:11.5px;text-transform:uppercase;letter-spacing:.07em}
.kpi b{display:flex;align-items:baseline;gap:6px;font-size:32px;font-weight:650;line-height:1.15;margin:6px 0 4px;letter-spacing:-.01em;white-space:nowrap}
.kpi b u{text-decoration:none;font-size:14px;font-weight:500;color:var(--ink2);letter-spacing:0}
.kpi em{display:block;font-style:normal;color:var(--ink2);font-size:12.5px;line-height:1.4}.kpi em strong{color:var(--ink);font-weight:650}
.kpi.k-warn{border-color:var(--warnln)}.kpi.k-warn small::after{content:"";display:inline-block;width:.95em;height:.95em;vertical-align:-.13em;margin-left:.4em;background:var(--warnt);-webkit-mask:var(--warn-ic) center/contain no-repeat;mask:var(--warn-ic) center/contain no-repeat}
.k-main{display:flex;gap:16px;align-items:center;background:linear-gradient(135deg,var(--bluebg),var(--panel) 62%);border-color:var(--bluebg)}
.k-main b{font-size:40px}
.ring{position:relative;width:84px;height:84px;flex:none}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke:color-mix(in srgb,var(--ink) 8%,transparent);stroke-width:6}
.ring circle.v{stroke:var(--link);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--p));animation:ring 1.1s cubic-bezier(.2,.8,.2,1) both}
.ring span{position:absolute;inset:0;display:grid;place-items:center;font-size:15px;font-weight:650}
.split{display:flex;gap:2px;height:6px;border-radius:3px;overflow:hidden;margin:6px 0 7px;transform-origin:left;animation:growx .9s cubic-bezier(.2,.8,.2,1) .15s both}
.pips{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}.pips i{width:14px;height:14px;border-radius:4px;background:var(--line);border:1px solid color-mix(in srgb,var(--ink) 8%,transparent)}.pips i.on{background:var(--goodt);box-shadow:0 0 10px color-mix(in srgb,var(--goodt) 33%,transparent)}
.grid2{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:14px;align-items:stretch;margin-bottom:14px}.grid2>.panel{margin-bottom:0}
.stack{display:grid;gap:14px;align-content:start}.stack>.panel{margin-bottom:0}
.key{display:inline-flex;align-items:center;gap:8px;color:var(--ink2);font-size:12.5px}.key .dash{width:22px;border-top:2px dashed var(--ink2)}
.jchart{width:100%;position:relative}.jchart svg{display:block;overflow:visible}
.jchart .grid{stroke:color-mix(in srgb,var(--ink) 6%,transparent);stroke-width:1;shape-rendering:crispEdges}.jchart .grid.base{stroke:color-mix(in srgb,var(--ink) 15%,transparent)}
.jchart .ax{fill:var(--mute);font-size:11.5px}.jchart .val{fill:var(--ink);font-size:12px;font-weight:650}
.jchart .hit{fill:transparent}.jchart .nowband{fill:color-mix(in srgb,var(--ink) 4%,transparent)}
.jchart .target{stroke:var(--ink2);stroke-width:1.5;stroke-dasharray:6 5;opacity:.75;pointer-events:none}
.jchart .bar{transition:filter .15s,opacity .15s}.jchart svg:hover .bar{opacity:.55}.jchart .col:hover .bar{opacity:1;filter:brightness(1.18)}
.jchart .anim .bar{transform-box:fill-box;transform-origin:50% 100%;animation:growy .7s cubic-bezier(.2,.8,.2,1) both}
.jchart .anim .val{animation:fade .4s both}.jchart .anim .target{animation:fade .6s .5s both}
.attn.has{border-color:var(--warnln)}.attn .count{background:var(--warn);color:var(--deep);font-weight:700;font-size:12px;border-radius:99px;padding:2px 9px}
.alist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.alist li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;padding:10px 12px;background:color-mix(in srgb,var(--ink) 2%,transparent);border-radius:10px}
.alist a b{display:block;font-size:14.5px}.alist a small{color:var(--mute);font-size:11.5px}
.alist div{display:grid;gap:3px;font-size:13px}.alist div span{color:var(--ink)}.alist div span::first-letter{color:var(--warnt)}
.okmark{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--goodbg);color:var(--goodt);margin-right:10px;font-size:12px}
.uses{display:grid;gap:9px}
.use{display:grid;grid-template-columns:minmax(120px,170px) 1fr 52px 40px;gap:10px;align-items:center;font-size:13px}
.use span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink2)}
.use div{height:8px;background:color-mix(in srgb,var(--ink) 4%,transparent);border-radius:4px;overflow:hidden}.use div i{display:block;height:100%;border-radius:4px;transform-origin:left;animation:growx .9s cubic-bezier(.2,.8,.2,1) both}
.use b{text-align:right;font-weight:650}.use em{font-style:normal;color:var(--mute);text-align:right}
.t.fleet tbody tr{transition:background .15s}.t.fleet tbody tr:hover{background:color-mix(in srgb,var(--ink) 3%,transparent)}
.t.fleet td{padding-top:12px;padding-bottom:12px}.t.fleet .code{font-size:15px}
.t.fleet .wide{width:38%}
.now i{position:relative}.now.s-move i,.now.s-idle i,.now.s-tip i{animation:pulse 2s infinite;color:inherit}
.prog{height:5px;width:110px;border-radius:3px}.prog i{border-radius:3px;background:linear-gradient(90deg,var(--blue2),var(--link));transform-origin:left;animation:growx .9s cubic-bezier(.2,.8,.2,1) both}.prog.full i{background:linear-gradient(90deg,var(--goodln),var(--goodt))}
.stripw{display:block;position:relative;border-radius:5px;overflow:hidden;animation:wipe 1.1s cubic-bezier(.3,.7,.2,1) both}.t.fleet svg.strip{height:22px}
.nowline{position:absolute;top:0;bottom:0;width:2px;background:#fff;box-shadow:0 0 6px #fff}
#map.tall{height:clamp(340px,44vh,560px)}
.leaflet-bar a,.leaflet-bar a:hover{background:var(--panel);color:var(--ink);border-color:var(--line)}.leaflet-control-attribution{background:color-mix(in srgb,var(--deep) 80%,transparent)!important;color:var(--mute)!important}.leaflet-control-attribution a{color:var(--ink2)!important}
.leaflet-tooltip{background:var(--ink);color:var(--deep);border:0;border-radius:6px;font-size:12.5px;box-shadow:0 4px 14px var(--shadow)}.leaflet-tooltip-top:before{border-top-color:var(--ink)}
.fpin{border-color:color-mix(in srgb,var(--ink) 80%,transparent);transition:transform .15s}.fpin:hover{transform:translate(-50%,-50%) scale(1.08)}
.fpin i{background:var(--c);position:relative}.fpin.on i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--c);animation:ping 1.8s infinite}
.leaflet-marker-icon{transition:transform .9s ease}
main>.head,main .kpis>*,main .grid2,main #livebody>.panel,.shiftbar{animation:rise .55s cubic-bezier(.2,.8,.2,1) both}
.kpis>*:nth-child(2){animation-delay:.05s}.kpis>*:nth-child(3){animation-delay:.1s}.kpis>*:nth-child(4){animation-delay:.15s}.kpis>*:nth-child(5){animation-delay:.2s}.kpis>*:nth-child(6){animation-delay:.25s}
main .grid2{animation-delay:.2s}main #livebody>.panel{animation-delay:.28s}
.settled main *,.settled .shiftbar{animation:none!important}.settled .livedot,.settled .now i,.settled .fpin.on i::after{animation:revert!important}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes growy{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes growx{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes ring{from{stroke-dashoffset:100}}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ink) 33%,transparent)}70%{box-shadow:0 0 0 7px color-mix(in srgb,var(--ink) 0%,transparent)}100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ink) 0%,transparent)}}
@keyframes ping{from{transform:scale(.6);opacity:.9}to{transform:scale(1.9);opacity:0}}
@media(max-width:1300px){.kpis{grid-template-columns:repeat(3,1fr)}.k-main{grid-column:span 3}}
@media(max-width:1000px){.grid2{grid-template-columns:1fr}}
@media(max-width:760px){.kpis{grid-template-columns:repeat(2,1fr)}.k-main{grid-column:span 2}.kpi b{font-size:26px}.k-main b{font-size:34px}.use{grid-template-columns:110px 1fr 48px 34px}.head.ov{align-items:flex-start}.t.fleet .wide{min-width:240px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.grid2>.panel{display:flex;flex-direction:column}.grid2>.panel>.jchart{flex:1 1 auto;min-height:240px;height:auto!important}
.jchart .val{paint-order:stroke;stroke:var(--panel);stroke-width:4px;stroke-linejoin:round}
.use{grid-template-columns:minmax(150px,215px) 1fr 52px 40px}
/* ── Machine health ── */
.meter{position:relative;height:8px;background:color-mix(in srgb,var(--ink) 5%,transparent);border-radius:4px;margin:8px 0 7px}
.meter i{display:block;height:100%;border-radius:4px;transform-origin:left;animation:growx .9s cubic-bezier(.2,.8,.2,1) .1s both}
.meter s{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--ink);border-radius:1px}.meter s::after{content:"limit";position:absolute;top:-14px;left:50%;transform:translateX(-50%);font-size:9.5px;color:var(--mute);text-decoration:none;letter-spacing:.04em}
.meter u{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--mute);border-radius:1px}.meter.off{opacity:.4}
.kpi .meter s::after{display:none}
.k-alert{background:linear-gradient(135deg,var(--badbg),var(--panel) 62%)!important;border-color:var(--badln)!important}
.ring.r-ok circle.v{stroke:var(--goodt)}.ring.r-watch circle.v{stroke:var(--warnt)}.ring.r-alert circle.v{stroke:var(--badt)}
.ring.r-ok span{color:var(--goodt)}.ring.r-watch span{color:var(--warnt)}.ring.r-alert span{color:var(--badt)}.ring span{font-size:20px}
.badge{font-size:12.5px;font-weight:650;padding:4px 11px;border-radius:99px;white-space:nowrap;border:1px solid}
.b-ok{color:var(--goodt);border-color:var(--goodln);background:var(--goodbg)}.b-watch{color:var(--warnt);border-color:var(--warnln);background:var(--warnbg)}.b-alert{color:var(--badt);border-color:var(--badln);background:var(--badbg)}.b-gps{color:var(--ink2);border-color:var(--line);background:var(--panel2)}
.ml{font-size:13.5px}.ml small,.mv small{display:block;color:var(--mute);font-size:11.5px}
.mv{text-align:right}.mv b{font-size:15px;font-weight:650}
.nocan{color:var(--ink2);font-size:13px;margin:0 0 14px;padding:10px 12px;background:color-mix(in srgb,var(--ink) 2%,transparent);border-radius:8px}
.hfacts{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line2);border:1px solid var(--line2);border-radius:9px;overflow:hidden;margin:0}
.hfacts div{background:var(--panel);padding:8px 10px;min-width:0}.hfacts dt{color:var(--mute);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hfacts dd{margin:2px 0 0;font-weight:650;font-size:13.5px;white-space:nowrap}
.hwhy{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:5px;font-size:13px}.hwhy li{padding:7px 10px;background:color-mix(in srgb,var(--warn) 8%,transparent);border:1px solid color-mix(in srgb,var(--warn) 38%,var(--line));border-radius:6px}.st-alert .hwhy li{background:color-mix(in srgb,var(--bad) 9%,transparent);border-color:color-mix(in srgb,var(--bad) 45%,var(--line))}
.tabs>input{position:absolute;opacity:0}.tabs>label{display:inline-block;padding:6px 13px;font-size:13px;color:var(--ink2);border:1px solid var(--line);margin:0 -1px 12px 0;cursor:pointer;transition:background .15s}
.tabs>label:first-of-type{border-radius:8px 0 0 8px}.tabs>label:last-of-type{border-radius:0 8px 8px 0}
.tabs>input:checked+label{background:var(--panel2);color:var(--ink)}.tabs>input:focus-visible+label{outline:2px solid var(--blue)}
.tabs>.tab{display:none}.tabs>input:nth-of-type(1):checked~.tab:nth-of-type(1),.tabs>input:nth-of-type(2):checked~.tab:nth-of-type(2),.tabs>input:nth-of-type(3):checked~.tab:nth-of-type(3){display:block}
.heat{border-collapse:separate;border-spacing:3px;width:100%;font-size:12.5px}
.heat thead th{color:var(--mute);font-weight:500;font-size:11.5px;text-align:center;padding-bottom:2px}.heat thead th small{display:block;font-size:10px}
.heat tbody th{text-align:left;font-weight:650;padding-right:10px;white-space:nowrap;width:1%}
.heat td{height:34px;min-width:38px;text-align:center;border-radius:6px;color:#fff;font-weight:600;text-shadow:0 1px 2px var(--shadow);transition:transform .12s}.heat td:hover{transform:scale(1.08)}
.heat td.na{background:color-mix(in srgb,var(--ink) 2%,transparent)}.heat td.hit{outline:2px solid var(--badt);outline-offset:-2px}
@keyframes drawline{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media(max-width:760px){.hfacts{grid-template-columns:repeat(2,1fr)}}
.hwhy.note li{background:color-mix(in srgb,var(--ink) 3%,transparent);border-color:var(--line);color:var(--ink2)}.hwhy.note b{color:var(--ink);font-weight:650;margin-right:6px}
.k-main>div:last-child{min-width:0}.k-main em{overflow-wrap:anywhere}
/* ── Loader queue, weather ── */
.wxline{white-space:nowrap}.wxline strong{color:var(--ink)}
.wxwrap{margin-top:10px;padding-left:34px;padding-right:10px}.wxwrap>small{display:block;color:var(--mute);font-size:11px;text-transform:uppercase;letter-spacing:.07em;margin-bottom:4px}
.wx{display:grid;grid-template-columns:repeat(12,1fr);gap:3px}
.wxc{background:color-mix(in srgb,var(--ink) 3%,transparent);border-radius:6px;padding:5px 2px;text-align:center;min-width:0;font-size:12px;line-height:1.25;border:1px solid transparent}
.wxc span{display:block;font-size:15px}.wxc b{font-weight:600}.wxc small{display:block;color:var(--link);font-size:10.5px;min-height:13px;white-space:nowrap}
.wxc.wet{background:color-mix(in srgb,var(--blue) 17%,transparent);border-color:color-mix(in srgb,var(--blue) 40%,transparent)}.wxc.fc{opacity:.55;border-style:dashed;border-color:color-mix(in srgb,var(--ink) 13%,transparent)}.wxc.na{opacity:.3}
.lpts{display:grid;gap:12px}
.lpt{background:color-mix(in srgb,var(--ink) 2%,transparent);border-radius:10px;padding:12px 14px}
.lpt header{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}.lpt header b{display:flex;align-items:center;gap:9px;font-size:14.5px}.lpt header span{color:var(--ink2);font-size:12.5px}
.lpt header i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--warn);color:var(--deep);font-style:normal;font-size:12px;font-weight:700}
.lbar{height:6px;background:color-mix(in srgb,var(--ink) 5%,transparent);border-radius:3px;margin:10px 0;overflow:hidden}.lbar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--warnln),var(--warnt));transform-origin:left;animation:growx .9s cubic-bezier(.2,.8,.2,1) both}
.lpt dl{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0}.lpt dt{color:var(--mute);font-size:11px}.lpt dd{margin:2px 0 0;font-weight:650;font-size:14px}
.lplabel{display:grid;place-items:center;color:var(--deep);font-weight:800;font-size:12px;pointer-events:none}
.alist a b{white-space:nowrap}
.t.sf td small{display:block;color:var(--mute);font-size:11.5px}
@media(max-width:760px){.wx{grid-template-columns:repeat(6,1fr)}.wxwrap{padding-left:0}.lpt dl{grid-template-columns:repeat(2,1fr)}}
.grid2>.panel>#map.tall{flex:1 1 auto;min-height:340px;height:auto}

/* ── Maps: trail, replay, custom maps ── */
#map.big{height:clamp(420px,62vh,820px)}
.mapp{padding:14px 16px}.mapp:fullscreen{border-radius:0;overflow:auto;background:var(--bg)}.mapp:fullscreen #map.big{height:calc(100vh - 210px)}
.mapbar{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin-bottom:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 9px;border:1px solid var(--line);border-radius:99px;background:var(--panel2);cursor:pointer;font-size:13px;transition:border-color .15s,background .15s}
.chip input{accent-color:var(--blue);margin:0}.chip b{font-weight:650}.chip small{color:var(--mute);font-size:12px}.chip.focus{border-color:var(--blue);background:color-mix(in srgb,var(--blue) 12%,transparent)}.chip:hover{border-color:var(--mute)}
.seg{display:flex;align-items:center}.seg>span{color:var(--mute);font-size:12.5px;margin-right:8px}
.seg button{background:var(--panel2);color:var(--ink2);border:1px solid var(--line);padding:6px 12px;font:inherit;font-size:13px;cursor:pointer;margin-left:-1px;transition:background .15s,color .15s}
.seg button:first-of-type{border-radius:8px 0 0 8px;margin-left:0}.seg button:last-of-type{border-radius:0 8px 8px 0}.seg button.on{background:var(--blue);border-color:var(--blue);color:#fff;position:relative}.seg button:hover:not(.on){color:var(--ink)}
.togs{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:var(--ink2)}.togs label{display:flex;align-items:center;gap:6px;cursor:pointer}.togs input{accent-color:var(--blue);margin:0}
.opac{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink2)}.opac input{width:110px;accent-color:var(--blue)}.opac[hidden]{display:none}
button.ghost{background:none;border:1px solid var(--line);color:var(--ink2);border-radius:8px;padding:6px 12px;font:inherit;font-size:13px;cursor:pointer}button.ghost:hover{color:var(--ink);border-color:var(--mute)}.mapbtns{margin-left:auto;display:flex;gap:8px}
.mapwrap{position:relative}
.readout{position:absolute;z-index:500;left:12px;bottom:28px;width:230px;background:color-mix(in srgb,var(--deep) 90%,transparent);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:12px;padding:12px 14px;box-shadow:0 10px 30px -12px #000;pointer-events:none}
.readout:empty{display:none}.readout h4{margin:0 0 8px;font-size:17px;display:flex;align-items:baseline;gap:8px}.readout h4 small{font-size:12px;color:var(--mute);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.readout .rs{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;margin-bottom:8px}.readout .rs i{width:10px;height:10px;border-radius:50%;flex:none}
.readout dl{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:7px 12px}.readout dt{font-size:11px;color:var(--mute);text-transform:uppercase;letter-spacing:.04em}.readout dd{margin:0;font-size:16px;font-weight:650;font-variant-numeric:tabular-nums}
.readout dd span{font-size:11.5px;color:var(--mute);font-weight:400;margin-left:3px}.readout dd em{font-style:normal;font-size:12px;color:var(--mute);font-weight:400}.readout dl>div:last-child{grid-column:1/-1}.readout .fine{margin-top:9px;font-size:11.5px}
.replay{display:flex;align-items:center;gap:14px;margin-top:12px;flex-wrap:wrap}
.play{width:42px;height:42px;border-radius:50%;border:0;background:var(--blue);color:#fff;display:grid;place-items:center;cursor:pointer;flex:none;transition:transform .12s,background .15s}.play:hover{transform:scale(1.06)}.play:active{transform:scale(.96)}.play.on{background:var(--blue2)}
.clock{font-size:20px;font-variant-numeric:tabular-nums;min-width:92px;letter-spacing:.01em}
.scrub{position:relative;flex:1 1 320px;height:34px;border-radius:7px;background:var(--line2);cursor:pointer;touch-action:none;outline-offset:3px}.scrub:focus-visible{outline:2px solid var(--blue)}
.scrub .strip,.scrub .ticks{position:absolute;inset:0;border-radius:7px;overflow:hidden;pointer-events:none}.scrub .strip i{position:absolute;top:0;bottom:0}.scrub .strip i.future{background:repeating-linear-gradient(135deg,#0000 0 5px,color-mix(in srgb,var(--ink) 5%,transparent) 5px 10px)}
.scrub .ticks i{position:absolute;top:0;bottom:0;width:1.5px;background:var(--ink);opacity:.9}
.scrub .cur{position:absolute;top:-5px;bottom:-5px;width:3px;margin-left:-1.5px;background:#fff;border-radius:2px;box-shadow:0 0 0 1.5px var(--deep),0 2px 8px #000;pointer-events:none}.scrub .cur::after{content:"";position:absolute;left:50%;top:-5px;width:11px;height:11px;margin-left:-5.5px;background:#fff;border-radius:50%;box-shadow:0 0 0 1.5px var(--deep)}
.scrubax{position:absolute;left:0;right:0;top:calc(100% + 6px);display:flex;justify-content:space-between;color:var(--mute);font-size:11.5px;pointer-events:none}.replay{margin-bottom:26px}
.legendrow{margin:12px 0 0}.legend .lt{color:var(--mute)}.legend i.rd{border-radius:50%}.legend i.hl{background:var(--badt);opacity:.6;height:6px;width:18px;border-radius:3px}.maplegend{margin-top:10px}
.tk{position:absolute;transform:translate(-50%,-50%);--c:var(--line3);--rot:0deg;pointer-events:auto;cursor:pointer}
.tk i{display:block;width:30px;height:30px;filter:drop-shadow(0 2px 4px var(--shadow))}.tk svg{display:block;transform:rotate(var(--rot));transition:transform .25s linear}
.tk .ar{fill:var(--c);stroke:#fff;stroke-width:1.6;stroke-linejoin:round;display:none}.tk .dt{fill:var(--c);stroke:#fff;stroke-width:1.8}.tk.mov .ar{display:block}.tk.mov .dt{display:none}
.tk b{position:absolute;left:50%;top:-19px;transform:translateX(-50%);background:var(--deep);color:var(--ink);border:1px solid var(--line3);border-radius:6px;font-size:11.5px;padding:1px 6px;white-space:nowrap;font-weight:650}
.tk.focus b{border-color:#fff;background:#fff;color:var(--deep)}.tk.offl{opacity:.75}
.trailtip{background:var(--deep);color:var(--ink);border:1px solid var(--line3);border-radius:8px;font-size:12.5px;line-height:1.45;box-shadow:0 6px 18px -8px #000;padding:6px 9px}.trailtip::before{display:none}
.evpin{color:var(--warnt);font-size:15px;line-height:18px;text-align:center;text-shadow:0 0 3px #000,0 0 3px #000}.evpin.serious,.evpin.critical{color:var(--badt)}
.leaflet-control-layers{background:color-mix(in srgb,var(--deep) 95%,transparent)!important;color:var(--ink)!important;border:1px solid var(--line)!important;border-radius:10px!important;font-size:13px}.leaflet-control-layers-separator{border-top-color:var(--line)!important}.leaflet-control-layers-toggle{filter:invert(1) hue-rotate(180deg);border-radius:10px}
.leaflet-control-scale-line{background:color-mix(in srgb,var(--deep) 80%,transparent);color:var(--ink);border-color:var(--ink2);text-shadow:none}
/* custom maps on Setup */
.st{font-weight:600;font-size:13px}.st.ok{color:var(--goodt)}.st.bad{color:var(--badt)}.st.run{color:var(--ink)}td .st+small{display:block;color:var(--mute);font-size:12px;margin-top:2px;max-width:46ch;white-space:normal}
.prog{height:6px;border-radius:3px;background:var(--line2);margin-top:6px;width:180px;overflow:hidden}.prog i{display:block;height:100%;background:var(--blue);border-radius:3px}
td.acts{white-space:nowrap}td.acts form{display:inline}button.del{background:none;border:1px solid var(--line);color:var(--badt);border-radius:7px;padding:6px 10px;font:inherit;font-size:13px;cursor:pointer}button.del:hover{border-color:var(--badt)}
.mapup{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:end;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}.mapup label{display:grid;gap:4px;font-size:13px;color:var(--ink2)}
.mapup input:not([type=file]){background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:7px;padding:6px 9px;font:inherit;font-size:13.5px;width:230px}.mapup input[type=file]{font:inherit;font-size:13px;color:var(--ink2);max-width:320px}
code{background:var(--panel2);border:1px solid var(--line);border-radius:5px;padding:1px 5px;font-size:12px}
@media(max-width:760px){.readout{position:static;width:auto;margin-top:10px;pointer-events:auto}.readout dl{grid-template-columns:repeat(3,1fr)}.mapbtns{margin-left:0}.replay .scrub{order:5;flex-basis:100%}#map.big{height:52vh}}
@media(prefers-reduced-motion:reduce){.tk svg,.play{transition:none}}

/* ── Map tabs, zones, heat map, haul roads, vehicles ── */
.subnav{display:flex;gap:4px;margin:-4px 0 14px;border-bottom:1px solid var(--line)}.subnav a{padding:8px 14px;color:var(--ink2);font-size:14px;border-bottom:2px solid #0000;margin-bottom:-1px}
.subnav a:hover{color:var(--ink);text-decoration:none}.subnav a.on{color:var(--ink);border-bottom-color:var(--blue);font-weight:600}
@media(max-width:1750px){nav a{padding:7px 9px;font-size:13.5px}}
.seg a{background:var(--panel2);color:var(--ink2);border:1px solid var(--line);padding:6px 12px;font-size:13px;margin-left:-1px}.seg a:first-of-type{border-radius:8px 0 0 8px;margin-left:0}.seg a:last-of-type{border-radius:0 8px 8px 0}
.seg a.on{background:var(--blue);border-color:var(--blue);color:#fff;position:relative}.seg a:hover{text-decoration:none;color:var(--ink)}.seg a.on:hover{color:#fff}
a.ghost{border:1px solid var(--line);color:var(--ink2);border-radius:8px;padding:6px 12px;font-size:13px}a.ghost:hover{color:var(--ink);border-color:var(--mute);text-decoration:none}
button.recording{border-color:#e5484d!important;color:var(--badt)!important}button.recording::before{content:"● "}
.zgrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:14px;align-items:start;margin-bottom:14px}.zgrid>.panel{margin-bottom:0}@media(max-width:1000px){.zgrid{grid-template-columns:1fr}}
.zform{display:grid;gap:11px}.zform label{display:grid;gap:4px;font-size:13px;color:var(--ink2)}.zform label[hidden]{display:none}.zform input:not([type=checkbox]),.zform select{background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:7px;padding:7px 9px;font:inherit;font-size:13.5px}
.zform input:focus,.zform select:focus{outline:2px solid var(--blue);outline-offset:1px}.zform small{color:var(--mute);font-size:11.5px}.zform .chk{display:flex;align-items:center;gap:8px}.zform .fine{margin:0}
.zbtns{display:flex;flex-wrap:wrap;gap:8px}.zbtns button:disabled{opacity:.45;cursor:not-allowed}#zdel{margin-top:12px}
.zlist{list-style:none;margin:0;padding:0;display:grid;gap:4px}.zlist button{width:100%;display:grid;grid-template-columns:12px 1fr;gap:2px 9px;align-items:center;text-align:left;background:none;border:1px solid #0000;border-radius:8px;padding:7px 8px;color:var(--ink);font:inherit;font-size:13.5px;cursor:pointer}
.zlist button:hover{background:var(--panel2);border-color:var(--line)}.zlist i{width:12px;height:12px;border-radius:3px}.zlist small{grid-column:2;color:var(--mute);font-size:12px}
.vx{background:#fff;border:2px solid var(--deep);border-radius:50%;box-shadow:0 1px 4px var(--shadow);cursor:grab}
.zlabel{background:color-mix(in srgb,var(--deep) 85%,transparent);color:var(--ink);border:0;border-radius:6px;font-size:11.5px;font-weight:600;padding:2px 7px;box-shadow:none}.zlabel::before{display:none}
tr.dimrow td{color:var(--mute)}h1 .tag{font-size:12px;font-weight:600;color:var(--blue);border:1px solid color-mix(in srgb,var(--blue) 40%,transparent);border-radius:99px;padding:2px 9px;vertical-align:middle;margin-left:8px;letter-spacing:.02em}
.heattotal{font-weight:400;color:var(--ink2);font-size:13.5px;margin-left:auto}.heattotal strong{color:var(--ink);font-size:16px}
.sideh{font-size:14px;margin:2px 0 10px}.spots{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:6px}
.spots button{width:100%;display:grid;grid-template-columns:24px 1fr auto;gap:10px;align-items:center;text-align:left;background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:8px 10px;color:var(--ink);font:inherit;font-size:13.5px;cursor:pointer}
.spots button:hover{border-color:var(--mute)}.spots b{width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--deep);display:grid;place-items:center;font-size:12px}.spots small{display:block;color:var(--mute);font-size:11.5px}
.spots em{font-style:normal;font-weight:650;font-variant-numeric:tabular-nums;text-align:right;display:grid;gap:4px;min-width:74px}.spots em i{height:4px;border-radius:2px;justify-self:end}
.spotpin{background:var(--ink);color:var(--deep);border-radius:50%;font-size:12px;font-weight:700;text-align:center;line-height:22px;box-shadow:0 0 0 2px var(--deep),0 2px 6px #000}
.linechart{position:relative;min-height:260px}.linechart svg{display:block}.linechart .grid{stroke:color-mix(in srgb,var(--ink) 8%,transparent)}.linechart .grid.base{stroke:color-mix(in srgb,var(--ink) 22%,transparent)}.linechart .ax{fill:var(--mute);font-size:11.5px}.linechart .cross{stroke:color-mix(in srgb,var(--ink) 40%,transparent);stroke-dasharray:3 3}.linechart circle{stroke:var(--deep);stroke-width:2}
.lctip{position:absolute;top:8px;background:color-mix(in srgb,var(--deep) 95%,transparent);border:1px solid var(--line3);border-radius:8px;padding:7px 10px;font-size:12.5px;display:grid;gap:3px;pointer-events:none;width:190px}.lctip[hidden]{display:none}.lctip span{display:flex;align-items:center;gap:6px;color:var(--ink2)}.lctip i{width:9px;height:9px;border-radius:2px;flex:none}
.slowl{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}.slowl button{width:100%;text-align:left;background:color-mix(in srgb,var(--bad) 8%,transparent);border:1px solid color-mix(in srgb,var(--bad) 33%,transparent);border-radius:8px;padding:8px 11px;color:var(--ink2);font:inherit;font-size:13.5px;cursor:pointer}.slowl b{color:var(--badt);margin-right:6px}.slowl strong{color:var(--ink)}
.rlabel{white-space:nowrap}.rlabel{width:auto!important;height:auto!important;background:color-mix(in srgb,var(--deep) 90%,transparent);color:var(--ink);border:1px solid var(--line3);border-radius:6px;font-size:11.5px;font-weight:600;padding:2px 7px;transform:translate(8px,-50%)}
.vfilter{display:flex;gap:8px;flex-wrap:wrap}.vfilter input,.vfilter select{background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:6px 10px;font:inherit;font-size:13.5px}.vfilter input{width:200px}
.sw.rd{border-radius:50%}tr[hidden]{display:none}

/* ── Grouped top menu ── */
nav{overflow:visible;align-items:center}
.navg{position:relative}
.navg>button{display:inline-flex;align-items:center;gap:7px;background:none;border:0;color:var(--ink2);padding:7px 12px;border-radius:7px;font:inherit;font-size:14px;cursor:pointer;white-space:nowrap;transition:background .18s,color .18s}
.navg>button:hover,.navg.open>button{background:var(--panel2);color:var(--ink)}
.navg.on>button{background:var(--panel2);color:var(--ink);box-shadow:inset 0 -2px 0 var(--blue)}
.navg>button em{font-style:normal;color:var(--mute);font-size:12.5px}.navg>button em::before{content:"/ "}
.navg>button svg{opacity:.7;transition:transform .18s}.navg.open>button svg{transform:rotate(180deg)}
.navm{position:absolute;top:calc(100% + 8px);left:0;min-width:250px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:0 18px 40px -12px var(--shadow);display:none;z-index:1100}
.navg.open .navm{display:block;animation:rise .16s ease-out both}
.navm a{display:block;padding:8px 12px;border-radius:8px;color:var(--ink);font-size:14px}.navm a small{display:block;color:var(--mute);font-size:12px;margin-top:1px}
.navm a:hover{background:var(--panel2);text-decoration:none}.navm a.on{background:color-mix(in srgb,var(--blue) 13%,transparent);box-shadow:inset 2px 0 0 var(--blue)}
main,footer{max-width:1520px}
@media(max-width:760px){nav{flex-wrap:wrap}.top{flex-wrap:wrap;gap:8px 14px}.navm{position:fixed;left:10px;right:10px;top:auto}}

/* ── Overview: plan chart, fleet table ── */
.demo{background:var(--warnbg);border:1px solid var(--warnln);color:#f0d9a0;border-radius:10px;padding:8px 14px;font-size:13px;margin:0 0 14px}
.verdict{margin:-4px 0 8px;font-size:15px;color:var(--ink2)}.verdict strong{color:var(--ink);font-weight:650}.verdict strong.over{color:var(--badt)}.okc{color:var(--goodt)!important;font-weight:650}.behind{color:var(--warnt);font-weight:650}
.key{gap:8px}.key .ln{width:22px;border-top:3px solid var(--blue);border-radius:2px}.key .dots{width:22px;border-top:2px dotted var(--blue)}.key .dash,.key .dots{margin-left:10px}
.planchart{flex:1 1 auto;min-height:270px;position:relative}
.planchart svg{display:block}.planchart text{font:11.5px system-ui,sans-serif;fill:var(--mute)}.planchart .grid{stroke:color-mix(in srgb,var(--ink) 6%,transparent)}.planchart .grid.base{stroke:color-mix(in srgb,var(--ink) 19%,transparent)}
.planchart .plan{stroke:var(--ink2);stroke-width:1.5;stroke-dasharray:5 5;fill:none}.planchart .act{stroke:var(--blue);stroke-width:2.5;fill:none;stroke-linejoin:round;stroke-linecap:round}
.planchart .area{fill:color-mix(in srgb,var(--blue) 11%,transparent)}.planchart .fc{stroke:var(--blue);stroke-width:2;stroke-dasharray:1 6;stroke-linecap:round;fill:none}
.planchart .end{fill:var(--blue);stroke:var(--panel);stroke-width:2}.planchart .lab{fill:var(--ink);font-weight:650;font-size:13px}.planchart .lab2{fill:var(--ink2)}
.planchart .hit{fill:#0000}.planchart g.h:hover .hit{fill:color-mix(in srgb,var(--ink) 4%,transparent)}.planchart .nowl{stroke:color-mix(in srgb,var(--ink) 44%,transparent);stroke-width:1}
.planchart .cell{fill:color-mix(in srgb,var(--ink) 4%,transparent)}.planchart .cell.low{fill:color-mix(in srgb,var(--warn) 20%,transparent)}.planchart .cell.fut{fill:none;stroke:color-mix(in srgb,var(--ink) 7%,transparent)}.planchart .cv{fill:var(--ink);font-weight:600;font-size:12px}.planchart .cv.low{fill:var(--warnt)}
.ovtop>.panel{display:flex;flex-direction:column}.scrolly{max-height:330px;overflow-y:auto;padding-right:4px;scrollbar-width:thin}
.ftools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#fsearch{background:var(--panel2);border:1px solid var(--line);border-radius:8px;color:var(--ink);font:inherit;font-size:13.5px;padding:6px 10px;width:210px}#fsearch:focus{outline:2px solid color-mix(in srgb,var(--blue) 53%,transparent);outline-offset:1px}
.fchips{display:inline-flex;gap:6px;flex-wrap:wrap}.fchips button{background:none;border:1px solid var(--line);color:var(--ink2);border-radius:99px;padding:5px 11px;font:inherit;font-size:12.5px;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.fchips button b{font-weight:650;color:var(--ink);margin-left:3px}.fchips button:hover{border-color:var(--mute);color:var(--ink)}.fchips button.on{background:var(--ink);border-color:var(--ink);color:var(--deep)}.fchips button.on b{color:var(--deep)}
.fchips button.warn{border-color:var(--warnln)}.fchips button.warn b{color:var(--warnt)}.fchips button.warn.on{background:var(--warn);border-color:var(--warn)}.fchips button.warn.on b{color:var(--deep)}
.t.ft{margin-top:0}.t.ft th{position:sticky;top:0;background:var(--panel);z-index:2;padding:8px 14px 8px 0;user-select:none}
.t.ft th[data-sort]{cursor:pointer}.t.ft th[data-sort]:hover{color:var(--ink)}.t.ft th.asc::after{content:" ↑";color:var(--blue)}.t.ft th.desc::after{content:" ↓";color:var(--blue)}
.t.ft td{padding:7px 14px 7px 0!important;vertical-align:middle}.t.ft .code{font-size:14.5px}.t.ft .sub{font-size:11.5px;max-width:180px;overflow:hidden;text-overflow:ellipsis}
.t.ft tr.site td{background:color-mix(in srgb,var(--ink) 3%,transparent);color:var(--ink2);font-size:12.5px;padding:6px 10px!important;border-bottom:1px solid var(--line)}.t.ft tr.site b{color:var(--ink);font-size:13.5px;margin-right:8px}
.t.ft[data-view=prod] .v-time,.t.ft[data-view=prod] .v-sf,.t.ft[data-view=time] .v-prod,.t.ft[data-view=time] .v-sf,.t.ft[data-view=sf] .v-prod,.t.ft[data-view=sf] .v-time{display:none}
.t.ft .wide{width:34%;min-width:240px}.t.ft svg.strip{height:18px}.t.ft .prog{width:96px;margin-top:4px}
.t.ft .flag{font-style:normal;color:var(--warnt);font-size:11px;margin-left:6px;cursor:help}
.mix{display:flex;height:14px;border-radius:4px;overflow:hidden;gap:2px;background:none}.mix i{display:block;min-width:2px;border-radius:2px}
.ffoot{display:flex;justify-content:space-between;gap:10px 24px;flex-wrap:wrap;align-items:center;margin-top:12px}.ffoot .fine{margin:0}
.fleetp .scroll{max-height:min(72vh,900px);overflow:auto;scrollbar-width:thin}
/* ── Full-screen button on every map ── */
.leaflet-bar a.fsbtn{display:grid;place-items:center;cursor:pointer}.leaflet-bar a.fsbtn svg{width:15px;height:15px}
.leaflet-container:fullscreen{width:100vw!important;height:100vh!important;border-radius:0}
.leaflet-container.fsfake{position:fixed!important;inset:0;width:100vw!important;height:100vh!important;z-index:5000;border-radius:0}

/* ── Netstar next to our trucks; choosing assets for the replay ── */
.fpin.nsp{background:color-mix(in srgb,var(--deep) 85%,transparent);border:1px dashed color-mix(in srgb,var(--ink) 69%,transparent);font-weight:550;font-size:11.5px;padding:2px 7px 2px 5px;color:var(--ink)}.fpin.nsp i{width:8px;height:8px;border-radius:2px}
.togl{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink2);cursor:pointer}.togl input{accent-color:var(--blue);margin:0}
.nsnear{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;margin-top:12px;font-size:12.5px}.nsnear>b{flex-basis:100%;font-size:13px;font-weight:650}
.nsnear a{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:8px;padding:5px 10px;color:var(--ink);font-weight:600}.nsnear a:hover{border-color:var(--blue);text-decoration:none;background:color-mix(in srgb,var(--blue) 8%,transparent)}
.nsnear a i{width:8px;height:8px;border-radius:2px;border:1px solid color-mix(in srgb,var(--ink) 20%,transparent)}.nsnear a small,.nsnear>small{color:var(--mute);font-weight:400;font-size:12px}
.grid2>.panel>#map.tall{min-height:380px}
.picker2{position:relative}button.ghost.strong{color:var(--ink);border-color:var(--line3);background:var(--panel2);font-weight:600}
.pickpop{position:absolute;top:calc(100% + 8px);left:0;width:min(440px,calc(100vw - 40px));background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px;box-shadow:0 18px 40px -12px var(--shadow);z-index:1200}
.pickpop input[type=search]{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:8px;color:var(--ink);font:inherit;font-size:14px;padding:7px 10px}
.picklist{max-height:min(48vh,420px);overflow-y:auto;margin:10px -4px 0;padding:0 4px;scrollbar-width:thin}
.picklist h5{margin:10px 0 4px;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--mute);font-weight:600;position:sticky;top:0;background:var(--panel);padding:4px 0}.picklist h5 small{font-weight:400}
.picklist label{display:grid;grid-template-columns:auto auto 1fr auto;gap:9px;align-items:center;padding:6px 8px;border-radius:7px;cursor:pointer;font-size:13.5px}.picklist label:hover{background:var(--panel2)}
.picklist label small{color:var(--mute);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.picklist label em{font-style:normal;color:var(--mute);font-size:11.5px}.picklist label.none{opacity:.55}.picklist input{accent-color:var(--blue);margin:0}
.pickfoot{display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}.pickfoot .fine{margin:0 auto 0 0}
button.go{background:var(--blue);border:1px solid var(--blue);color:#fff;border-radius:8px;padding:6px 14px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}button.go:disabled{opacity:.45;cursor:default}
.meets{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}.meets h4{margin:0 0 8px;font-size:14px;font-weight:650}.meets h4 small{font-weight:400;color:var(--mute);font-size:12.5px;margin-left:6px}
.meets ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:6px;max-height:210px;overflow-y:auto;scrollbar-width:thin}
.meets button{width:100%;display:grid;grid-template-columns:1fr auto auto auto;gap:12px;align-items:center;text-align:left;background:color-mix(in srgb,var(--ink) 2%,transparent);border:1px solid #0000;border-radius:8px;padding:7px 10px;color:var(--ink2);font:inherit;font-size:13px;cursor:pointer}
.meets button:hover{border-color:var(--blue);background:color-mix(in srgb,var(--blue) 8%,transparent)}.meets button b{color:var(--ink)}.meets button span{color:var(--mute);font-size:12.5px;white-space:nowrap}
.meets button em{font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.meets ul{grid-template-columns:repeat(auto-fill,minmax(400px,1fr))}

/* ── Production: loads by truck and hour ── */
.kpis.k5{grid-template-columns:1.35fr repeat(4,1fr)}@media(max-width:1300px){.kpis.k5{grid-template-columns:repeat(2,1fr)}.kpis.k5 .k-main{grid-column:span 2}}
.t.pm th.hh{text-align:center;padding:8px 0;width:38px;min-width:34px;font-variant-numeric:tabular-nums}
.t.pm td.hc{padding:3px 2px!important;text-align:center}.t.pm td.hc i{display:grid;place-items:center;height:30px;min-width:30px;border-radius:6px;font-style:normal;font-weight:650;font-size:13px;color:#f4f6fb;background:rgba(57,135,229,calc(.14 + .72*var(--a,0)))}
.t.pm td.hc.z i{background:color-mix(in srgb,var(--ink) 3%,transparent);color:var(--line3);font-weight:400}.t.pm td.hc.fut i{background:none;border:1px dashed color-mix(in srgb,var(--ink) 8%,transparent)}
.t.pm tfoot td{border-top:1px solid var(--line);border-bottom:0;padding-top:10px!important;position:sticky;bottom:0;background:var(--panel)}
.t.pm td.hc.tot i{background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--ink)}.t.pm td.hc.tot.low i{background:color-mix(in srgb,var(--warn) 20%,transparent);color:var(--warnt)}
.t.pm .prog{width:84px}
.spk{display:inline-flex;align-items:flex-end;gap:2px;height:24px;vertical-align:middle}.spk i{display:block;width:6px;background:var(--blue);border-radius:2px 2px 0 0;min-height:2px}.spk i.z{background:var(--line3)}
.grid2.even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}@media(max-width:1000px){.grid2.even{grid-template-columns:1fr}}
.scrolly.tall{max-height:330px}.t.hist tr.cur td{background:color-mix(in srgb,var(--blue) 8%,transparent)}.t.hist tr.cur td:first-child{box-shadow:inset 2px 0 0 var(--blue)}.t.hist td{padding:8px 14px 8px 8px!important}.t.hist th{padding-left:8px}
.t.pm td.hc+td:not(.hc),.t.pm th.hh+th:not(.hh){padding-left:18px!important}.t.pm td.hc:first-of-type{padding-left:0}

/* ── Replay: the asset list beside the map ── */
.mapgrid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:12px;align-items:stretch}
.assets{display:flex;flex-direction:column;min-height:0;background:var(--deep);border:1px solid var(--line);border-radius:10px;padding:12px 10px 10px;height:clamp(420px,62vh,820px)}
.assets header{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:0 4px 8px}.assets h4{margin:0;font-size:14px;font-weight:650}.assets h4 small{color:var(--mute);font-weight:400;font-size:12.5px;margin-left:6px}
.alinks{display:flex;gap:10px}.alinks button{background:none;border:0;padding:0;color:var(--link);font:inherit;font-size:12.5px;cursor:pointer}.alinks button:hover{text-decoration:underline}
.assets input[type=search]{background:var(--panel2);border:1px solid var(--line);border-radius:8px;color:var(--ink);font:inherit;font-size:13.5px;padding:6px 10px;margin:0 2px 6px}
.alist2{flex:1 1 auto;overflow-y:auto;min-height:0;scrollbar-width:thin;padding-right:2px}
.alist2 h5{position:sticky;top:0;z-index:1;margin:0;padding:8px 6px 5px;background:var(--deep);font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--mute);font-weight:600;display:flex;justify-content:space-between}.alist2 h5 small{font-weight:400}
.arow{display:grid;grid-template-columns:16px 10px minmax(0,1fr) auto;gap:9px;align-items:center;padding:7px 8px;border-radius:8px;cursor:pointer;transition:background .12s}
.arow:hover{background:color-mix(in srgb,var(--ink) 4%,transparent)}.arow:focus-visible{outline:2px solid color-mix(in srgb,var(--blue) 60%,transparent);outline-offset:-2px}.arow.focus{background:color-mix(in srgb,var(--blue) 12%,transparent)}
.arow input{accent-color:var(--blue);margin:0;width:15px;height:15px;cursor:pointer}.arow .st{width:10px;height:10px;border-radius:50%;background:var(--line3);border:1px solid color-mix(in srgb,var(--ink) 18%,transparent)}
.arow .nm{min-width:0}.arow .nm b{display:block;font-size:13.5px;font-weight:650;line-height:1.25}.arow .nm small,.arow .fig small{display:block;color:var(--mute);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.arow .fig{text-align:right}.arow .fig b{display:block;font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.25}.arow .fig b.dim{color:var(--mute);font-weight:400}
.arow.off .nm,.arow.off .fig,.arow.off .st{opacity:.42}
.assets>.fine{margin:8px 4px 0;font-size:11.5px}
.mapp:fullscreen .assets{height:calc(100vh - 210px)}
@media(max-width:900px){.mapgrid{grid-template-columns:1fr}.assets{height:auto;max-height:250px}.assets>.fine{display:none}}
.alinks{white-space:nowrap}.assets h4{white-space:nowrap}.alist2 h5{margin-bottom:2px}.mapp .mapbar{flex-wrap:wrap}.mapp .mapbtns a.ghost,.mapp .mapbtns button.ghost{padding:6px 10px}

/* ── Replay: date and time range ── */
.rangebar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 14px;padding:10px 14px;background:var(--panel);border:1px solid var(--line);border-radius:12px;font-size:13px}
.rangebar.on{border-color:color-mix(in srgb,var(--blue) 47%,transparent);background:color-mix(in srgb,var(--blue) 6%,transparent)}.rangebar>b{font-weight:650;font-size:13.5px;margin-right:4px}
.rangebar label{display:inline-flex;align-items:center;gap:7px;color:var(--mute)}
.rangebar input[type=datetime-local]{background:var(--panel2);border:1px solid var(--line);border-radius:8px;color:var(--ink);font:inherit;font-size:13.5px;padding:5px 8px}
.rangebar .quick{display:inline-flex;flex-wrap:wrap;gap:6px;margin-left:6px}.rangebar .quick button{background:none;border:1px solid var(--line);color:var(--ink2);border-radius:99px;padding:4px 11px;font:inherit;font-size:12.5px;cursor:pointer}
.rangebar .quick button:hover{border-color:var(--mute);color:var(--ink)}.rangebar .fine{margin:0 0 0 auto}.rangebar .fine.over{color:var(--badt);font-weight:600}
.clock small{display:block;font-size:11px;font-weight:500;color:var(--mute);line-height:1;margin-bottom:2px}
.rangebar input[type=date],.rangebar select{background:var(--panel2);border:1px solid var(--line);border-radius:8px;color:var(--ink);font:inherit;font-size:13.5px;padding:5px 8px}
.rangebar .quick a{border:1px solid var(--line);color:var(--ink2);border-radius:99px;padding:4px 11px;font-size:12.5px}.rangebar .quick a:hover{border-color:var(--mute);color:var(--ink);text-decoration:none}.rangebar .quick a.on{background:var(--ink);border-color:var(--ink);color:var(--deep)}
.spk.wide{height:22px;gap:2px;width:100%;max-width:520px}.spk.wide i{flex:1 1 0;width:auto;max-width:18px}

/* ── System page, error pages ── */
.t.sys td small{display:block;color:var(--mute);font-size:12px;margin-top:1px}
.t.sys .r{text-align:right}.t.sys .nw{white-space:nowrap}.t.sys .errl{font:12px/1.4 ui-monospace,Consolas,monospace;color:var(--ink2);word-break:break-word}
.st{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;white-space:nowrap}
.st::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--mute)}
.st-ok::before{background:var(--good)}.st-late{color:var(--warnt)}.st-late::before{background:var(--warn)}
.st-failing{color:var(--badt)}.st-failing::before{background:var(--bad)}.st-never,.st-off{color:var(--mute)}
.gaps{list-style:none;margin:0;padding:0}.gaps li{padding:9px 0;border-bottom:1px solid var(--line);color:var(--ink2);font-size:14px}.gaps li:last-child{border-bottom:0}
.gaps li b{color:var(--ink)}.gaps li a{margin-left:6px;font-size:13px}
.panel .note{color:var(--ink2);font-size:14px;margin:14px 0 6px}
.badge.warn{background:var(--warn);color:var(--deep);border-radius:99px;padding:1px 9px;font-weight:700;font-size:13px}
.oops{max-width:560px;margin:12vh auto;padding:0 20px;text-align:center}.oops h1{font-size:26px;margin:0 0 10px}.oops p{color:var(--ink2)}
.btn{display:inline-block;padding:8px 16px;border-radius:8px;background:var(--blue);color:#fff;font-weight:600;margin:8px 4px}.btn:hover{text-decoration:none;filter:brightness(1.1)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.t.sys td{white-space:normal}.t.sys td.r,.t.sys td.nw{white-space:nowrap}.t.sys{width:100%}

/* ── fleet pages: truck detail under the table ── */
.t.ft .open{font-style:normal;font-size:11px;color:var(--link);margin-left:6px}
.t.ft .cybar{height:12px;min-width:200px}.t.ft tr[data-st=none] td{color:var(--mute)}
.fleetp>.legend{margin:0 0 10px}
.panel.detail{border-color:var(--blue3);scroll-margin-top:76px}.panel.detail .close{font-size:13px;color:var(--ink2);border:1px solid var(--line);border-radius:99px;padding:4px 12px}.panel.detail .close:hover{color:var(--ink);text-decoration:none;border-color:var(--mute)}
.scroll.tall{max-height:460px;overflow:auto;margin-top:14px;scrollbar-width:thin}
.kpi.k-main>div>b{font-size:34px}
.share.sm{height:12px;margin:0;min-width:220px}
.sub4{font-size:14px;margin:20px 0 10px;color:var(--ink)}.sub4 small{font-weight:400;color:var(--mute);margin-left:8px;font-size:12.5px}
.chipk{display:inline-block;border:1px solid var(--line);border-radius:99px;padding:2px 9px;margin:1px 5px 1px 0;font-size:12px;color:var(--ink2);white-space:nowrap}.chipk b{color:var(--warnt);font-weight:650}
.kpi b .txt{font-size:19px;line-height:1.25;display:block;padding:6px 0 2px}
.grid2.inner{margin:0;gap:26px}.grid2.inner h4:first-child{margin-top:4px}
.panel .ph .ftools .close{font-size:13px;color:var(--ink2);border:1px solid var(--line);border-radius:99px;padding:4px 12px}
.flow{grid-template-columns:repeat(5,minmax(0,1fr))}@media(max-width:900px){.flow{grid-template-columns:1fr}}

/* ── replay: one colour per asset, Netstar dashed, stood-together marks ── */
.tk.nsl b{top:auto;bottom:-21px;border-style:dashed;border-color:var(--mute)}.tk.nsl.focus b{border-style:solid}
.legend i.dsh,.acol.dsh{background:repeating-linear-gradient(90deg,currentColor 0 5px,#0000 5px 8px)!important}
.acol{display:inline-block;width:16px;height:4px;border-radius:2px;background:currentColor;vertical-align:middle;margin-right:7px;text-decoration:none}
.legend .lt{color:var(--mute);margin-right:-4px}.legend .lt:not(:first-child){margin-left:10px}
.meetpin{background:#fff;color:var(--deep);border-radius:50%;font-size:13px;font-weight:700;line-height:20px;text-align:center;box-shadow:0 0 0 2px var(--deep),0 2px 6px var(--shadow);cursor:pointer}
.scrub .strip i.meet{top:auto;bottom:0;height:7px;background:#fff;opacity:.95;border-radius:2px}
.barfor{margin:26px 0 0;color:var(--mute);font-size:12.5px}.barfor b{color:var(--ink)}

/* ── assets at one spot: labels stacked into a list instead of overlapping ── */
.tk b{transform:translate(calc(-50% + var(--lx,0px)),var(--ly,0px))}
.tk.stk b,.tk.nsl.stk b{top:-19px;bottom:auto;z-index:2}.tk.stk.focus b{z-index:3}
.tk.stk:not(.nsl) b::before,.tk.nsl.stk b::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--c);margin-right:5px;vertical-align:1px;border:1px solid color-mix(in srgb,var(--ink) 56%,transparent)}
.fpin{transform:translate(calc(-50% + var(--lx,0px)),calc(-50% + var(--ly,0px)))}
.fpin:hover{transform:translate(calc(-50% + var(--lx,0px)),calc(-50% + var(--ly,0px))) scale(1.08);z-index:5}
.fpin.stk{box-shadow:0 1px 5px var(--shadow)}

/* ── accounts: sign-in, first run, the user menu, Users and the audit log ── */
.authp{display:grid;place-items:center;min-height:100vh;padding:24px 16px;background:radial-gradient(900px 500px at 50% -10%,var(--bluebg) 0,transparent 70%),var(--bg)}
.auth{width:100%;max-width:400px}.auth .brand{display:flex;align-items:center;gap:11px;justify-content:center;margin-bottom:20px;font-weight:650;font-size:19px}.auth .brand small{display:block;font-weight:400;font-size:12px;color:var(--mute)}
.auth .card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:26px 26px 22px}.auth h1{font-size:21px;margin:0 0 6px}.auth .lede{margin:0 0 16px}.auth .msg{margin:12px 0 0}.auth .fstack{margin-top:16px}.auth .fine{text-align:center;margin-top:16px}
.fstack{display:grid;gap:14px;max-width:420px}.fstack label{display:grid;gap:5px;font-size:13px;color:var(--ink2)}.fstack small{color:var(--mute);font-size:12px}
.fstack input{background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:10px 12px;font:inherit;font-size:15px;width:100%}.fstack input:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
button.wide{width:100%;padding:11px;font-size:15px;font-weight:600;border-radius:8px}
.me{position:relative}.me summary{list-style:none;display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--ink2);padding:3px 10px 3px 3px;border:1px solid var(--line);border-radius:99px}.me summary::-webkit-details-marker{display:none}
.me summary:hover,.me[open] summary{border-color:var(--mute);color:var(--ink)}.me summary b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--blue3);color:#fff;font-size:11px;font-weight:650}
.me summary span{max-width:120px;overflow:hidden;text-overflow:ellipsis}
.mem{position:absolute;right:0;top:calc(100% + 6px);z-index:1200;min-width:210px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:6px;box-shadow:0 10px 30px var(--shadow)}
.mem p{margin:0;padding:8px 10px 10px;border-bottom:1px solid var(--line);white-space:normal}.mem p strong{display:block}.mem p small{color:var(--mute);font-size:12px}
.mem a,.mem button{display:block;width:100%;text-align:left;background:none;border:0;color:var(--ink);padding:8px 10px;border-radius:7px;font:inherit;font-size:13.5px;cursor:pointer;margin-top:2px}.mem a:hover,.mem button:hover{background:var(--panel);text-decoration:none}
@media(max-width:700px){.me summary span{display:none}.me summary{padding:3px}}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:8px 18px;margin:0 0 18px;font-size:14px}.kv dt{color:var(--mute)}.kv dd{margin:0}.kv small{color:var(--mute)}
.once{border-color:var(--goodln);background:var(--goodbg)}.once h3{margin:0 0 8px}.once p{margin:0}.once code.big{font-size:19px;letter-spacing:.04em;background:var(--goodbg);padding:3px 10px;border-radius:6px;user-select:all}
.tag.good{color:var(--goodt);border-color:var(--goodln)}.tag.warn{color:var(--warnt);border-color:var(--warnln)}.tag.bad{color:var(--badt);border-color:var(--badln)}
.t tr.off td{opacity:.55}.t .yes{color:var(--goodt)}.t .no{color:var(--mute)}.head .picker input[type=search]{background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:6px 10px;font:inherit;font-size:13.5px;width:230px}

/* ── assets and hardware: the grouped form, readings checklist ── */
.aform{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 28px}.aform fieldset{border:0;padding:0;margin:0;display:grid;gap:12px;align-content:start;min-width:0}
.aform legend{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--mute);padding:0;margin-bottom:10px}
.aform label{display:grid;gap:5px;font-size:13px;color:var(--ink2)}.aform small{color:var(--mute);font-size:12px}
.aform input:not([type=checkbox]),.aform select,.aform textarea{background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:8px 11px;font:inherit;font-size:14px;width:100%;min-width:0}
.aform input:focus,.aform select:focus,.aform textarea:focus{outline:2px solid var(--blue);outline-offset:1px}.aform textarea{resize:vertical}
.aform .unit{display:flex;align-items:center;gap:8px}.aform .unit i{font-style:normal;color:var(--mute);font-size:13px;min-width:34px}
.aform label.chk{display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--ink)}.aform label.chk small{flex-basis:100%}
.aform .ro{margin:0;padding:9px 12px;border:1px dashed var(--line);border-radius:8px}.aform .ro b{display:block}.aform .ro small{font-size:12.5px}.aform .fine{margin:0}
.afoot{grid-column:1/-1;display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-top:14px;border-top:1px solid var(--line)}.afoot .fine{margin:0 0 0 auto;max-width:520px;text-align:right}
.aform.one{grid-template-columns:1fr;gap:12px;max-width:min(380px,100%)}.grid2.sub>div{min-width:0;overflow-x:auto}
.grid2.sub{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--line)}.grid2.sub h4{margin:0 0 12px;font-size:14px}
@media(max-width:900px){.aform{grid-template-columns:1fr}.afoot .fine{margin:0;text-align:left}}
a.lnk{font-size:13px;border:1px solid var(--line);border-radius:7px;padding:5px 12px;color:var(--ink)}a.lnk:hover{border-color:var(--mute);text-decoration:none}
.head .filters .btn{margin:0}.t small.sub2{display:block;color:var(--mute);font-size:12px}.warnt{color:var(--warnt);font-weight:600}
.reads{white-space:normal!important;min-width:300px}.rd{display:inline-block;font-size:11.5px;padding:2px 8px;border-radius:99px;border:1px solid var(--line);margin:2px 4px 2px 0;color:var(--mute)}
.rd.y{color:var(--goodt);border-color:var(--goodln)}.rd.p{color:var(--warnt);border-color:var(--warnln)}.rd.n{text-decoration:line-through;opacity:.7}


/* ── reports: picker on the left, the report as a sheet of paper ── */
.repgrid{display:grid;grid-template-columns:270px minmax(0,1fr);gap:18px;align-items:start}@media(max-width:1000px){.repgrid{grid-template-columns:1fr}}
.reppick{margin:0;display:grid;gap:6px}.reppick h3{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--mute);margin:8px 0 4px;font-weight:500}.reppick h3:first-child{margin-top:0}
.reppick>a{display:block;padding:8px 10px;border-radius:8px;color:var(--ink);border:1px solid transparent}.reppick>a:hover{background:var(--panel2);text-decoration:none}.reppick>a.on{background:var(--panel2);border-color:var(--blue)}
.reppick>a b{display:block;font-size:14px;font-weight:600}.reppick>a small{color:var(--mute);font-size:12px;line-height:1.35;display:block}
.repform{display:grid;gap:9px}.repform label{display:grid;grid-template-columns:54px 1fr;align-items:center;font-size:13px;color:var(--ink2)}
.repform input,.repform select{background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:7px 9px;font:inherit;font-size:13.5px;min-width:0}
.reppick .quick{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.reppick .quick a{font-size:12px;padding:4px 10px;border:1px solid var(--line);border-radius:99px;color:var(--ink2)}.reppick .quick a.on,.reppick .quick a:hover{color:var(--ink);border-color:var(--mute);text-decoration:none}
.paper{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:30px 34px 24px;min-width:0;max-width:1180px}
.paper>header{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-start;padding-bottom:18px;border-bottom:2px solid var(--line)}
.paper .eyebrow{margin:0 0 4px;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--blue);font-weight:600}.paper h2{margin:0;font-size:25px;letter-spacing:-.01em}.paper .when{margin:6px 0 0;color:var(--ink2);font-size:14px}
.repacts{display:flex;gap:8px;align-items:center}
.repk{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0;border-bottom:1px solid var(--line)}.repk>div{padding:16px 16px 16px 0}.repk>div+div{padding-left:16px;border-left:1px solid var(--line)}
.repk dt{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}.repk dd{margin:5px 0 0;font-size:22px;font-weight:650;font-variant-numeric:tabular-nums}
@media(max-width:700px){.repk{grid-template-columns:1fr 1fr}.repk>div:nth-child(3){padding-left:0;border-left:0}.repk>div:nth-child(n+3){border-top:1px solid var(--line)}.paper{padding:20px 16px}}
.rt{width:100%;border-collapse:collapse;font-size:13.5px;font-variant-numeric:tabular-nums;margin-top:8px}.rt th{font-size:11.5px;font-weight:500;color:var(--mute);text-align:left;padding:10px 12px 8px 0;border-bottom:1px solid var(--line);vertical-align:bottom;line-height:1.25}
.rt td{padding:9px 12px 9px 0;border-bottom:1px solid var(--line2);white-space:nowrap}.rt .r{text-align:right;padding-right:0;padding-left:12px}.rt td:first-child{font-weight:600}
.rt tfoot td{border-top:2px solid var(--line);border-bottom:0;font-weight:650}
.paper>footer{margin-top:20px;padding-top:14px;border-top:1px solid var(--line);color:var(--mute);font-size:12px;line-height:1.5}.paper>footer ul{margin:0 0 8px;padding-left:16px}.paper>footer p{margin:0}

/* ── the frame: menu down the left, a thin strip on top ── */
.side{position:fixed;inset:0 auto 0 0;width:238px;z-index:1100;display:flex;flex-direction:column;background:var(--panel);border-right:1px solid var(--line);padding:14px 10px 10px;transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.side .brand{padding:4px 8px 14px;font-size:16.5px}
.snav{flex:1;overflow-y:auto;scrollbar-width:thin;display:flex;flex-direction:column;gap:1px;margin:0 -4px;padding:0 4px}
.snav h6{margin:16px 10px 5px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);font-weight:600}
.snav a{position:relative;display:flex;align-items:center;gap:11px;padding:7px 10px;border-radius:8px;color:var(--ink2);font-size:14px;transition:background .16s,color .16s}
.snav a .ic{flex:none;opacity:.8;transition:transform .2s}.snav a:hover{background:var(--panel2);color:var(--ink);text-decoration:none}.snav a:hover .ic{transform:scale(1.1)}
.snav a.on{background:color-mix(in srgb,var(--blue) 15%,transparent);color:var(--ink);font-weight:600}.snav a.on .ic{color:var(--blue);opacity:1}
.snav a.on::before{content:"";position:absolute;left:-4px;top:7px;bottom:7px;width:3px;border-radius:3px;background:var(--blue);animation:grow .3s cubic-bezier(.2,.8,.2,1) both}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.sfoot{margin:10px 8px 2px;font-size:11.5px;color:var(--mute);line-height:1.4}
.wrap{margin-left:238px;min-width:0}
.strip{position:sticky;top:0;z-index:1000;display:flex;align-items:center;gap:14px;height:54px;padding:0 clamp(16px,2.2vw,44px);background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:saturate(140%) blur(14px);border-bottom:1px solid var(--line)}
.crumb{margin:0;display:flex;align-items:baseline;gap:8px;font-size:15px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.crumb span{color:var(--mute);font-size:13px}.crumb span::after{content:"/";margin-left:8px;opacity:.6}.crumb b{font-weight:650}
.strip .topr{margin-left:auto}.strip .tsel{font-size:13px;color:var(--mute)}.strip .tsel select{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:5px 8px;font:inherit;font-size:13px;margin-left:4px;max-width:30vw}
.burger,.themebtn{display:grid;place-items:center;width:34px;height:34px;padding:0;border-radius:99px;background:none;border:1px solid var(--line);color:var(--ink2)}.burger{display:none;border-radius:8px}
.themebtn:hover,.burger:hover{color:var(--ink);border-color:var(--mute)}.themebtn .ic{grid-area:1/1;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s}
.themebtn .ic:first-child{opacity:0;transform:rotate(-90deg) scale(.5)}:root[data-theme=light] .themebtn .ic:first-child{opacity:1;transform:none}:root[data-theme=light] .themebtn .ic:last-child{opacity:0;transform:rotate(90deg) scale(.5)}
.scrim{display:none}
@media(max-width:1000px){
  .side{transform:translateX(-100%);box-shadow:0 0 40px var(--shadow)}body.nav-open .side{transform:none}.wrap{margin-left:0}.burger{display:grid}
  body.nav-open .scrim{display:block;position:fixed;inset:0;z-index:1090;background:#0008;animation:fade .2s both}
  .strip{gap:10px;padding:0 12px}.strip .pill span{display:none}.strip .pill{padding:8px}.strip .tsel{font-size:0}.strip .tsel select{font-size:13px;margin:0}
}
@keyframes fade{from{opacity:0}to{opacity:1}}
html.swap *,html.swap *::before,html.swap *::after{transition:background-color .35s,border-color .35s,color .35s,fill .35s!important}
@view-transition{navigation:auto}::view-transition-old(root),::view-transition-new(root){animation-duration:.18s}
main{animation:fade .3s ease-out both}
.panel{transition:border-color .2s,box-shadow .25s}.panel:hover{border-color:color-mix(in srgb,var(--line3) 70%,var(--line))}
:root[data-theme=light] body{background:var(--bg)}:root[data-theme=light] .panel,:root[data-theme=light] .paper{box-shadow:0 1px 2px #1b1b190a,0 4px 14px -8px #1b1b1922}
.pill.ok i{animation:beat 2.4s ease-out infinite}@keyframes beat{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--good) 60%,transparent)}70%,100%{box-shadow:0 0 0 7px transparent}}

/* ── pictures: machines, the pit scene ── */
.mpic{flex:none;vertical-align:middle;overflow:visible}td.who{white-space:nowrap}td.who .mpic{transition:transform .25s cubic-bezier(.2,.8,.2,1)}tr:hover>td.who .mpic{transform:translateX(-3px)}
.whob{display:flex;align-items:center;gap:10px}.whob>div{min-width:0}
h3.withpic{display:flex;align-items:center;gap:14px}h3.withpic span{display:inline-flex;animation:rise .4s both}
.scene{display:block;width:100%;height:100%;--sky1:#17304f;--sky2:#c46a3a}.scene.night{--sky1:#070b16;--sky2:#1a2742}
:root[data-theme=light] .scene.day{--sky1:#8ec5f2;--sky2:#fbe3c0}:root[data-theme=light] .scene.night{--sky1:#172444;--sky2:#48598a}
.scene .orb{fill:#ffd98a}.scene .orb.glow{opacity:.22;animation:glow 6s ease-in-out infinite;transform-origin:985px 100px}.scene.night .orb{fill:#e6ecf7}
:root[data-theme=light] .scene.day .orb{fill:#fff3c4}
@keyframes glow{50%{transform:scale(1.25);opacity:.12}}
.scene .star{fill:#fff;animation:twinkle 4s ease-in-out infinite}@keyframes twinkle{50%{opacity:.25}}
.scene .e0{fill:#2a2420;opacity:.75}.scene .e1{fill:#3a2e24}.scene .e1s{fill:#00000038}.scene .e2{fill:#4a3a2b}.scene .road{fill:#2b2723}.scene .lane{stroke:#ffffff26;stroke-width:2;stroke-dasharray:22 26;fill:none}
:root[data-theme=light] .scene.day .e0{fill:#b79a7c}:root[data-theme=light] .scene.day .e1{fill:#c9a783}:root[data-theme=light] .scene.day .e2{fill:#d9bb95}:root[data-theme=light] .scene.day .road{fill:#8d7a66}:root[data-theme=light] .scene.day .e1s{fill:#0000001f}
.scene .haul{animation:drive 46s linear infinite}@keyframes drive{from{transform:translateX(1260px)}to{transform:translateX(-200px)}}
.scene .haul .whl{animation:spin 1.1s linear infinite}@keyframes spin{to{transform:rotate(-360deg)}}
.scene .dust{fill:#c9b79f;opacity:0;animation:puff 1.6s ease-out infinite}.scene .dust.d2{animation-delay:.8s}@keyframes puff{0%{opacity:.5;transform:translate(0,0) scale(.6)}100%{opacity:0;transform:translate(34px,-10px) scale(1.5)}}
.scene .dust{transform-box:fill-box;transform-origin:center}
.hero{position:relative;height:168px;border-radius:14px;overflow:hidden;border:1px solid var(--line);margin-bottom:14px;animation:rise .55s cubic-bezier(.2,.8,.2,1) both}
.hero .scene{position:absolute;inset:0}.herotx{position:absolute;left:24px;top:18px;right:24px}.herotx h1{font-size:26px;color:#fff;text-shadow:0 1px 12px #0009}.herotx .lede{color:#ffffffe0;text-shadow:0 1px 8px #000b;margin-top:4px}
:root[data-theme=light] .scene.day~.herotx h1{color:#14213a;text-shadow:0 1px 10px #fff9}:root[data-theme=light] .scene.day~.herotx .lede{color:#22324f;text-shadow:0 1px 8px #fffb}
.head.ov>div:empty{display:none}
.authp{position:relative;overflow:hidden}.authscene{position:fixed;left:0;right:0;bottom:0;height:min(42vh,340px);opacity:.9;mask-image:linear-gradient(to bottom,transparent,#000 45%);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 45%)}
.auth{position:relative;z-index:1;animation:rise .5s cubic-bezier(.2,.8,.2,1) both}.auth .card{box-shadow:0 20px 60px -20px var(--shadow)}
:root[data-theme=light] .authp{background:var(--bg)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.scene .haul{transform:translateX(300px)}}

:root[data-theme=light] :is(.aform,.fstack,.repform,.zform,.limits,.t.form,.picker,.rangebar,.vfilter) :is(input,select,textarea){background:#fff}

/* ── finish: type, the browser's own surfaces, states of controls, drawn marks ── */
@font-face{font-family:"Barlow SC";font-weight:500;font-display:swap;src:url(/fonts/barlow-semi-condensed-500.woff2) format("woff2")}
@font-face{font-family:"Barlow SC";font-weight:600;font-display:swap;src:url(/fonts/barlow-semi-condensed-600.woff2) format("woff2")}
@font-face{font-family:"Barlow SC";font-weight:700;font-display:swap;src:url(/fonts/barlow-semi-condensed-700.woff2) format("woff2")}
:root{--disp:"Barlow SC",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--ok-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.500l4.500 4.500L19 7.500'/%3E%3C/svg%3E");--warn-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4 2.800 19.500h18.400zM12 10v4.500M12 17v.300'/%3E%3C/svg%3E");--x-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");--dot-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7a5 5 0 1 0 .010 0z'/%3E%3C/svg%3E");accent-color:var(--blue);caret-color:var(--blue)}
h1,h2,.ph h3,.panel>h3,.auth h1,.paper h2,.side .brand>span,.kpi b,.repk dd,.state b,.oops h1{font-family:var(--disp);font-variant-numeric:tabular-nums lining-nums;letter-spacing:.005em}
h1,.head.ov h1{font-size:31px;font-weight:600;line-height:1.1}.herotx h1{font-size:34px;font-weight:600}.auth h1{font-size:27px;font-weight:600}.paper h2{font-size:31px;font-weight:600;letter-spacing:.005em}
.ph h3,.panel>h3{font-size:18.5px;font-weight:600}.side .brand>span{font-size:20px;font-weight:700;line-height:1.1}.side .brand small{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;margin-top:2px}
.kpi b{font-size:37px;font-weight:600;letter-spacing:0;flex-wrap:wrap;white-space:normal;row-gap:0}.repk dd{font-size:27px;font-weight:600}.kpi b u{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.tile b{font-family:var(--disp);font-variant-numeric:tabular-nums lining-nums;font-size:33px;font-weight:600}.tile b span{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}@media(max-width:760px){.tile b{font-size:27px}}
h2{font-size:23px;font-weight:600}h2 small,h3 small{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;letter-spacing:0}
h1,h2,h3{text-wrap:balance}p,li,.fine,.lede{text-wrap:pretty}.panel>.fine{max-width:92ch}.paper>footer{max-width:none;margin-left:0;margin-right:0;padding-left:0;padding-right:0}.paper>footer ul,.paper>footer p{max-width:92ch}
.reppick h3{font-family:inherit;font-size:11.5px;font-weight:500;letter-spacing:.07em}
.crumb b{font-weight:500;color:var(--ink2)}
::selection{background:color-mix(in srgb,var(--blue) 34%,transparent);color:var(--ink)}
html{scrollbar-color:var(--line3) var(--bg)}.snav,.scroll,.scrolly,.assets,.picklist{scrollbar-color:var(--line3) transparent;scrollbar-width:thin}
a{text-underline-offset:.18em;text-decoration-thickness:1px}
::placeholder{color:var(--mute);opacity:1}
:is(a,button,summary,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:6px}
:is(input,select,textarea):focus-visible{outline-offset:1px;border-color:var(--blue)}
button,.btn,a.lnk,.pill,.snav a,.quick a{transition:background-color .16s,border-color .16s,color .16s,transform .08s,box-shadow .16s,filter .16s}
button:active:not(:disabled),.btn:active,a.lnk:active{transform:translateY(1px)}
button:disabled,button[disabled]{opacity:.5;cursor:not-allowed}
button.pri,.btn{box-shadow:0 1px 0 color-mix(in srgb,#fff 18%,transparent) inset,0 1px 2px var(--shadow)}button.pri:hover,.btn:hover{box-shadow:0 1px 0 color-mix(in srgb,#fff 18%,transparent) inset,0 4px 12px -4px color-mix(in srgb,var(--blue) 70%,transparent)}
:is(input,select,textarea){transition:border-color .16s,box-shadow .16s}:is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea):hover{border-color:var(--line3)}
.t:not(.form):not(.heat) tbody tr{transition:background-color .12s}.t:not(.form):not(.heat) tbody tr:hover>td{background-color:color-mix(in srgb,var(--ink) 3.500%,transparent)}
.mem{animation:rise .16s cubic-bezier(.2,.8,.2,1) both;transform-origin:top right}
/* messages and marks: a drawn tick or triangle, not a typed character */
.msg{display:flex;gap:10px;align-items:flex-start;line-height:1.45}.msg::before,.okmark::before,.rd::before{content:"";flex:none;background:currentColor;-webkit-mask:var(--ok-ic) center/contain no-repeat;mask:var(--ok-ic) center/contain no-repeat}
.msg::before{width:17px;height:17px;margin-top:2px}.msg.ok{background:var(--goodbg);border:1px solid var(--goodln);color:var(--ink)}.msg.ok::before{color:var(--goodt)}
.msg.err{background:var(--badbg);border:1px solid var(--badln);color:var(--ink)}.msg.err::before{color:var(--badt);-webkit-mask-image:var(--warn-ic);mask-image:var(--warn-ic)}
.okmark{font-size:0;display:inline-grid;place-items:center}.okmark::before{width:13px;height:13px}
.rd{display:inline-flex;align-items:center;gap:5px}.rd::before{width:10px;height:10px}.rd.p::before{-webkit-mask-image:var(--dot-ic);mask-image:var(--dot-ic)}.rd.n::before{-webkit-mask-image:var(--x-ic);mask-image:var(--x-ic)}
.mk{display:inline-block;width:.95em;height:.95em;vertical-align:-.13em;margin-right:.38em;background:currentColor;-webkit-mask:var(--warn-ic) center/contain no-repeat;mask:var(--warn-ic) center/contain no-repeat}
.mk.k{-webkit-mask-image:var(--ok-ic);mask-image:var(--ok-ic)}.mk:only-child,.flag .mk,.ring .mk{margin-right:0}.heat td .mk{margin-right:.2em}
/* no coloured stripe down the side of a card: tint the whole card, or mark it with a dot */
.alist li{border-left:0;border:1px solid color-mix(in srgb,var(--warn) 38%,var(--line));background:color-mix(in srgb,var(--warn) 7%,transparent)}

.state small{display:flex;align-items:center;gap:8px}.state small::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--mute)}
.state.s-haul small::before{background:#3987e5}.state.s-empty small::before{background:#199e70}.state.s-load small::before{background:#c98500}.state.s-tip small::before{background:#d95926}.state.s-idle small::before{background:#d55181}.state.s-move small::before{background:#8f8e88}
.arow.focus{box-shadow:0 0 0 1px color-mix(in srgb,var(--blue) 55%,transparent)}
.t.hist tr.cur td:first-child{box-shadow:none}.t.hist tr.cur td{background:color-mix(in srgb,var(--blue) 10%,transparent)}
.paper .when b{font-weight:600;color:var(--ink)}
/* on a map everything floats over a satellite picture, so labels and panels there keep the dark look in both themes */
:root[data-theme=light] .leaflet-container{--bg:#121211;--panel:#1b1b19;--panel2:#232320;--deep:#141413;--line:#31312d;--line2:#292926;--line3:#4a4a45;--ink:#f0efec;--ink2:#b9b8b2;--mute:#85847e;--link:#7fb2f0;--shadow:#000000a6;--off:#3a3a37}
:root[data-theme=light] .heat td.pale{color:var(--ink)}
@media print{
  @page{size:A4 landscape;margin:12mm}
  body{background:#fff!important;color:#000}.side,.strip,.scrim,main~footer,.noprint,#tip{display:none!important}.wrap{margin:0!important}main{padding:0!important;max-width:none!important}
  .repgrid{display:block}.paper{border:0;border-radius:0;padding:0;max-width:none;background:#fff;color:#000}.paper *{color:#000!important;border-color:#bbb!important;animation:none!important}
  .paper .eyebrow{color:#1d5fb0!important}.paper .scroll{overflow:visible}.rt{font-size:10.5pt}.rt td{border-bottom:1px solid #ddd!important}.rt tr{break-inside:avoid}.rt thead{display:table-header-group}
}

/* ── Machine health: fleet table and the trend chart ── */
.kpis.k3{grid-template-columns:1.35fr 1fr 1fr}@media(max-width:1300px){.kpis.k3{grid-template-columns:repeat(2,1fr)}.kpis.k3 .k-main{grid-column:span 2}}
.t.hfleet{margin-top:0}.t.hfleet td{padding:12px 16px 12px 0;vertical-align:middle;border-bottom:1px solid var(--line2)}.t.hfleet th.r,.t.hfleet td.r{text-align:right;font-variant-numeric:tabular-nums}
.t.hfleet tbody tr{transition:background .15s}.t.hfleet tr[data-href]{cursor:pointer}.t.hfleet tr[data-href]:hover,.t.hfleet tr[data-href]:hover+tr.why{background:color-mix(in srgb,var(--ink) 3%,transparent)}
.t.hfleet tr.on,.t.hfleet tr.on:hover{background:color-mix(in srgb,var(--blue) 9%,transparent)}.t.hfleet tr.on td:first-child{box-shadow:inset 3px 0 0 var(--blue)}
.t.hfleet td:first-child{padding-left:12px}.t.hfleet th:first-child{padding-left:12px}
.t.hfleet .code{font-family:var(--disp);font-size:17px;font-weight:600;color:var(--link)}.t.hfleet td small{display:block;color:var(--mute);font-size:11.5px;margin-top:2px}.t.hfleet tr.why td{position:sticky;left:0}
.t.hfleet .tc{min-width:170px;width:19%}.t.hfleet .tc b{font-size:15px;font-weight:650;font-variant-numeric:tabular-nums}.t.hfleet .tc b.over{color:var(--badt)}.t.hfleet .tc .meter{margin:6px 0 5px;max-width:230px}.t.hfleet .tc .meter s::after{display:none}
.t.hfleet tr.haswhy td{border-bottom:0;padding-bottom:6px}.t.hfleet tr.why td{padding:0 12px 12px;white-space:normal;font-size:12.5px;color:var(--ink2)}
.t.hfleet tr.why span{display:inline-block;margin:0 8px 4px 0;padding:4px 10px;border-radius:7px;background:color-mix(in srgb,var(--warn) 9%,transparent);border:1px solid color-mix(in srgb,var(--warn) 38%,var(--line))}
.t.hfleet tr.why span.note{background:color-mix(in srgb,var(--ink) 3%,transparent);border-color:var(--line)}.t.hfleet tr.why span.note b{color:var(--ink);font-weight:650;margin-right:5px}
.trend{scroll-margin-top:70px}.trend .ph{align-items:flex-start}.trend .ph h3{margin:0 0 3px}.trtools{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tlegend{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-wrap:wrap;gap:10px 28px;font-size:13.5px}.tlegend li{display:flex;gap:9px;align-items:flex-start}
.tlegend i{flex:none;width:14px;height:4px;border-radius:2px;margin-top:8px}.tlegend b{font-weight:650}.tlegend small{display:block;color:var(--mute);font-size:12px;margin-top:1px}.tlegend em{font-style:normal;color:var(--ink2)}.tlegend em.hot{color:var(--warnt);font-weight:650}
.tchart{position:relative;margin:4px 0 14px;min-height:120px;touch-action:pan-y}.tchart svg{display:block;width:100%;overflow:visible}.tchart.busy svg{opacity:.45;transition:opacity .2s}
.tchart text{fill:var(--mute);font-size:11px;font-variant-numeric:tabular-nums}.tchart text.pt{fill:var(--ink2);font-size:12px;font-weight:600}.tchart text.lim{fill:var(--badt)}
.tchart .gl{stroke:var(--line2);stroke-width:1}.tchart .ax{stroke:var(--line);stroke-width:1}.tchart .sh{stroke:var(--line3);stroke-width:1;stroke-dasharray:2 4}
.tchart .offr{fill:color-mix(in srgb,var(--ink) 4%,transparent)}.tchart .limit{stroke:var(--badt);stroke-width:1.2;stroke-dasharray:5 4;opacity:.85}
.tchart path.ln{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}.tchart path.load{fill:color-mix(in srgb,var(--ink2) 26%,transparent);stroke:none}.tchart path.wx{fill:none;stroke:var(--ink2);stroke-width:1.6;stroke-linejoin:round}
.tchart .cross{stroke:var(--ink2);stroke-width:1}.tchart .dot{stroke:var(--panel);stroke-width:2}.tchart .hit{fill:transparent;cursor:crosshair}
.ttip{position:absolute;top:8px;z-index:5;pointer-events:none;background:var(--panel2);border:1px solid var(--line3);border-radius:9px;padding:9px 11px;font-size:12.5px;box-shadow:0 10px 26px -10px var(--shadow);min-width:190px}
.ttip b.tt{display:block;font-weight:650;margin-bottom:5px}.ttip div{display:flex;justify-content:space-between;gap:16px;line-height:1.55;color:var(--ink2)}.ttip div span:first-child{display:flex;align-items:center;gap:7px}.ttip div b{color:var(--ink);font-weight:650;font-variant-numeric:tabular-nums}
.ttip i{width:10px;height:10px;border-radius:3px;flex:none}.ttip i.l{height:3px;border-radius:2px}.ttip hr{border:0;border-top:1px solid var(--line);margin:5px 0}
.tkeys{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--mute);margin:-6px 0 14px}.tkeys span{display:inline-flex;align-items:center;gap:6px}.tkeys i{width:10px;height:10px;border-radius:3px}.tkeys i.o{background:color-mix(in srgb,var(--ink) 9%,transparent)}
@media(max-width:760px){.t.hfleet .tc{min-width:150px}.tlegend{gap:8px 18px}}
@media(prefers-reduced-motion:reduce){.tchart.busy svg{transition:none}}

/* the server-health strip (wall screen, dashboard for managers, System page) */
.srv{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;padding:9px 16px;margin-bottom:12px;border:1px solid var(--line);border-radius:12px;background:var(--panel);font-size:13px}
.srv .svh{display:inline-flex;align-items:center;gap:9px;font-weight:650;color:var(--goodt);margin-right:6px}.srv .svh i{width:9px;height:9px;border-radius:50%;background:var(--good)}
.srv.srv-warn{border-color:var(--warnln);background:var(--warnbg)}.srv.srv-warn .svh{color:var(--warnt)}.srv.srv-warn .svh i{background:var(--warn)}
.srv.srv-bad{border-color:var(--badln);background:var(--badbg)}.srv.srv-bad .svh{color:var(--badt)}.srv.srv-bad .svh i{background:var(--bad)}
.srv .sv{display:inline-flex;align-items:baseline;gap:6px;white-space:nowrap}.srv .sv small{color:var(--mute);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em}.srv .sv b{font-weight:650;font-variant-numeric:tabular-nums}
.srv .sv.w b{color:var(--warnt)}.srv .sva{flex-basis:100%;color:var(--ink2);font-size:12.5px}
.panel>.srv{margin:0 14px 12px}