:root{
  --bg:#f4f6f8; --panel:#ffffff; --ink:#1b2430; --muted:#6b7684; --line:#dfe4ea;
  --accent:#1f6feb; --accent-ink:#fff; --navy:#22262b; --mark:#d6336c; --warn:#b45309; --warn-bg:#fff7e6; --danger:#c62828;
  --radius:8px; font-size:14px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{display:flex;flex-direction:column;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--bg)}
header{min-height:52px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:8px 14px;padding-top:calc(8px + env(safe-area-inset-top,0px));background:var(--navy);color:#fff;flex:none}
.brand{font-weight:700;letter-spacing:.2px;font-size:15px;white-space:nowrap}
.logo{background:#fff;color:var(--navy);border-radius:3px;padding:2px 6px;margin-right:4px;font-size:12.5px;letter-spacing:.6px}
header select{min-width:200px;max-width:340px;flex:0 1 340px}
.spacer{flex:1}
main{position:relative;flex:1;min-height:0;display:flex}
#map{flex:1;height:100%}
#panel{width:400px;max-width:46vw;flex:none;height:100%;overflow-y:auto;background:var(--panel);border-left:1px solid var(--line);padding:4px 0 24px}
section{padding:12px 16px;border-bottom:1px solid var(--line)}
h2{font-size:16px;margin:2px 0 8px} h3{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin:0 0 8px}
label{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--muted)}
label.inline{flex-direction:row;align-items:center;gap:6px}
input,select{font:inherit;color:var(--ink);padding:5px 7px;border:1px solid var(--line);border-radius:6px;background:#fff;min-width:0}
input[type=number]{width:84px}
button{font:inherit;padding:6px 11px;border-radius:6px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer}
button:hover{border-color:#b9c2cc}
button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
button.primary:hover{filter:brightness(1.07)}
button.ghost{background:transparent}
header button{border-color:#4b6684;background:transparent;color:#fff}
header button.primary{background:#fff;border-color:#fff;color:var(--navy);font-weight:600}
button.danger{color:var(--danger)}
button.small,.small{font-size:12px}
button.wide{flex:1}
button:disabled{opacity:.5;cursor:default}
.row{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}
.row.between{justify-content:space-between;margin-top:0}
.row.end{justify-content:flex-end}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.muted{color:var(--muted)}
.hidden{display:none!important}
.warn{background:var(--warn-bg);border:1px solid #f3d19c;color:#7a4a00;border-radius:6px;padding:7px 9px;font-size:12px;margin-top:8px}
.err{background:#fdecec;border:1px solid #f5b5b5;color:#8a1c1c;border-radius:6px;padding:7px 9px;font-size:12px;margin-top:8px}
.status{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:13px}
.spin{width:14px;height:14px;border:2px solid #c9d3de;border-top-color:var(--accent);border-radius:50%;animation:sp 0.8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.seg button{border:0;border-radius:0;padding:5px 12px}
.seg button.on{background:var(--navy);color:#fff}
.tools{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.tool.on{background:var(--navy);color:#fff;border-color:var(--navy)}
#detectBar{margin-top:8px;padding:8px;background:#eef4ff;border-radius:6px}
.pile{border:1px solid var(--line);border-radius:var(--radius);padding:8px;margin-top:8px}
.pile.sel{border-color:var(--accent);box-shadow:0 0 0 2px #1f6feb22}
.pile .top{display:flex;gap:6px;align-items:center}
.pile .sw{width:12px;height:12px;border-radius:3px;flex:none}
.pile .nm{flex:1;font-weight:600}
.pile .x{border:0;padding:2px 6px;color:var(--muted)}
.pile .opts{display:grid;grid-template-columns:26px 1.6fr .8fr 1.1fr;gap:6px;margin-top:6px}
.pile .opts .star{padding:0;font-size:16px;line-height:1;border:1px solid var(--line);border-radius:5px;background:#fff;color:#9aa3ad;cursor:pointer}
.pile .opts .star.on{color:#f58628;border-color:#f58628}
.pile .opts input,.pile .opts select{font-size:12px;padding:4px 5px;width:100%}
.pile .res{display:flex;gap:12px;margin-top:6px;font-size:12px;font-variant-numeric:tabular-nums}
.pile .res b{font-size:13px}
.pile .res.stale{opacity:.45}
.pile .flags{margin-top:6px;font-size:11.5px;color:#7a4a00;background:var(--warn-bg);border-radius:5px;padding:5px 7px}
.pile.excl{border-style:dashed}
.totals{justify-content:space-between;font-variant-numeric:tabular-nums;font-size:13px}
.totals b{font-size:15px}
#readout{position:absolute;left:12px;bottom:52px;z-index:500;background:#fffffff0;border:1px solid var(--line);border-radius:6px;padding:4px 8px;font-size:12px;font-variant-numeric:tabular-nums}
#modeHint{position:absolute;left:50%;top:12px;transform:translateX(-50%);z-index:600;background:var(--navy);color:#fff;padding:6px 12px;border-radius:20px;font-size:12.5px}
#toast{position:fixed;right:420px;bottom:20px;z-index:2000;display:flex;flex-direction:column;gap:6px}
#toast div{background:#1b2430;color:#fff;padding:8px 12px;border-radius:6px;font-size:13px;max-width:420px;box-shadow:0 4px 14px #0003}
#toast div.e{background:#8a1c1c}
dialog{border:0;border-radius:12px;padding:18px 20px;width:560px;max-width:94vw;box-shadow:0 20px 60px #0004}
dialog::backdrop{background:#0b1a2a66}
dialog label{margin-top:8px}
.tabs{display:flex;gap:4px;margin-bottom:6px}
.tabs button.on{background:var(--navy);color:#fff}
#nInbox{width:100%}
.bar{height:8px;background:#e6ebf0;border-radius:4px;overflow:hidden;margin-top:12px}
.bar div{height:100%;width:0;background:var(--accent);transition:width .2s}
table.mat{width:100%;border-collapse:collapse;margin:6px 0}
table.mat td,table.mat th{padding:3px 4px;text-align:left;font-size:12px;border-bottom:1px solid var(--line)}
table.mat input{width:100%}
table.mat td:nth-child(2) input{width:80px}
table.mat td:nth-child(3){color:var(--muted);width:60px}
.filebtn{position:relative;overflow:hidden;display:inline-block;border:1px solid var(--line);border-radius:6px;padding:4px 9px;cursor:pointer;color:var(--ink)}
.filebtn input{position:absolute;inset:0;opacity:0;cursor:pointer}
.pile-label{background:#ffffffe0;border:1px solid #0003;border-radius:4px;padding:1px 5px;font-size:11px;font-weight:700;white-space:nowrap;box-shadow:none}
.pile-label::before{display:none}
@media (max-width:1100px){#panel{width:340px}#toast{right:360px}}
@media (max-width:760px){
  main{flex-direction:column}
  #map{flex:none;height:50%}
  #panel{width:100%;max-width:none;flex:1;min-height:0;height:auto;border-left:0;border-top:1px solid var(--line);padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
  #toast{right:12px;left:12px;bottom:12px}
  #toast div{max-width:none}
  header{padding:6px 10px;gap:6px}
  header select{flex:1 1 100%;max-width:none;order:5}
  header button{padding:6px 9px}
  .brand{flex:1}
  .spacer{display:none}
  input,select{font-size:16px}          /* stops iOS zooming the page when a field gets focus */
  button,.filebtn{min-height:38px}
  .pile .x{min-width:38px}
  .pile .opts{grid-template-columns:26px 1fr 1fr}
  .pile .opts select[data-k=material]{grid-column:2/-1}
  .pile .opts input[data-k=density]{grid-column:1/3}
  .pile .res{flex-wrap:wrap;gap:4px 12px}
  #readout{bottom:auto;top:10px;left:54px}
  #modeHint{top:auto;bottom:10px;max-width:92%;text-align:center}
  dialog{padding:14px;max-height:92vh;overflow-y:auto}
  .grid2{grid-template-columns:1fr}
}
@media (max-height:520px) and (min-width:600px){   /* phone on its side */
  main{flex-direction:row}
  #map{height:100%;flex:1}
  #panel{width:300px;flex:none;height:100%;border-top:0;border-left:1px solid var(--line)}
}

button.findall{width:100%;margin-bottom:8px;background:#fff7e6;border-color:#f0c070;font-weight:600}
#findBar{margin:-2px 0 8px}
#findBar .bar{margin-top:0}
.review{background:#fff7e6;border:1px solid #f3d19c;border-radius:8px;padding:8px 10px;margin-top:8px;font-size:12.5px}
.review .lk{color:#1e7a34;font-weight:600}.review .ck{color:#9a5b00;font-weight:600}
.pile.pending{border-color:#f0c070;background:#fffcf5}
.pile.off{opacity:.55}
.rvrow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:6px;font-size:11.5px;color:#7a4a00}
.rvrow .badge{font-weight:700;border-radius:10px;padding:1px 8px;font-size:11px}
.rvrow.likely .badge{background:#e3f4e7;color:#1e7a34}
.rvrow.check .badge{background:#fdebc8;color:#9a5b00}
.rvrow .sp{flex:1}
.rvrow button.keep{background:#1e7a34;border-color:#1e7a34;color:#fff}
.inrep{flex-direction:row;align-items:center;gap:3px;font-size:11px;white-space:nowrap}
.inrep input{margin:0}
.rejpop{font-size:12.5px;line-height:1.45}
.rejpop button{margin-top:6px}
.exgroup{margin-top:8px;border:1px dashed var(--line);border-radius:8px;padding:6px 8px}
.exgroup summary{cursor:pointer;font-size:12.5px;color:var(--muted)}
.exgroup .pile{margin-top:6px;padding:5px 6px}

/* 9 Line additions */
.tools{grid-template-columns:repeat(4,1fr)}
.tools .filebtn{text-align:center;padding:6px 4px;font-size:inherit}
h3.sub{margin:14px 0 0}
.pile.meas .res{flex-wrap:wrap;gap:4px 12px}
.prof{display:block;width:100%;height:110px;margin-top:6px}
.hist{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:12.5px}
.hist th{text-align:left;font-weight:500;white-space:nowrap;padding:4px 8px 4px 0}
.hist td{padding:4px 0 4px 8px;text-align:right;white-space:nowrap}
.hist .barcell{width:100%;padding-left:0}
.hbar{display:block;height:8px;background:#c9d3de;border-radius:2px}
.hist tr.cur .hbar{background:var(--mark)}
.hist tr.cur th{font-weight:700}
.hist .chg{color:var(--muted);min-width:52px}
#histBody .hist tr{cursor:pointer}
#histBody .hist tr:hover th{text-decoration:underline}
.phist{margin-top:8px;border-top:1px solid var(--line);padding-top:6px}
hr{border:0;border-top:1px solid var(--line);margin:14px 0}
dialog h3{margin-top:4px}
.login{margin:auto;width:340px;max-width:92vw;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:22px}
.login h1{font-size:18px;margin:0 0 4px}
.login label{margin-top:10px}
.login input{font-size:16px;padding:8px}
.login button{width:100%;margin-top:14px;padding:9px}
@media (max-width:760px), (max-height:520px){   /* small screens: piles first, display settings last */
  #panel{display:flex;flex-direction:column}
  #panel>section{flex:none}
  #siteBox{order:0}#toolsBox{order:1}#histBox{order:2}#displayBox{order:3}#emptyBox{order:4}
}

/* 3D point cloud view, laid over the map */
#view3d{position:absolute;z-index:1100;background:#17191e;touch-action:none}
#cv3d{width:100%;height:100%;display:block;touch-action:none;cursor:grab}
.bar3d{position:absolute;left:10px;right:10px;top:10px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:#1f232bd9;color:#e9edf2;border-radius:8px;padding:6px 10px}
.bar3d .sp{flex:1}.bar3d label{color:#e9edf2}.bar3d #stat3d{color:#aab3c0}
.hint3d{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);background:#1f232bd9;color:#c9d1dc;font-size:12px;padding:4px 10px;border-radius:14px;white-space:nowrap;max-width:94%;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.bar3d button.ghost{color:#e9edf2;border-color:#5a6372;background:transparent}
.bar3d input[type=range]{vertical-align:middle}
#view3d.full{position:fixed;inset:0;width:auto;height:auto;z-index:3000}
#view3d.full .bar3d{left:6px;right:6px;top:6px;gap:6px;padding:5px 6px}
#view3d.full .bar3d label, #view3d.full #stat3d{display:none}
#view3d.full .hint3d{font-size:11px}
#labels3d{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#labels3d .l3{position:absolute;transform:translate(-50%,-130%);background:#ffffffeb;color:#14181f;font-size:12px;font-weight:600;padding:2px 7px;border-radius:4px;white-space:nowrap;border-left:4px solid #888}
.bar3d label.chk{display:flex;align-items:center;gap:4px;font-size:12.5px}
#view3d.full .bar3d label.chk{display:flex}
#pos3d{position:absolute;right:10px;bottom:40px;background:#1f232be6;color:#e9edf2;font-size:12px;padding:5px 10px;border-radius:6px;font-variant-numeric:tabular-nums;pointer-events:none;white-space:nowrap}
#pos3d b{color:#ffb86b;font-weight:600}
#view3d.full #pos3d{bottom:34px;right:6px}
.bar3d label.mix3d{display:flex;align-items:center;gap:6px;font-size:12.5px}
#view3d.full .bar3d label.mix3d{display:flex}
#view3d.full .bar3d label.mix3d input{width:90px}

/* 2D / 3D switch, and the list of survey dates */
#dimToggle{position:absolute;left:56px;top:11px;z-index:1200;box-shadow:0 1px 4px #0005}
#dimToggle.full{position:fixed;left:6px;top:6px;z-index:3100}
.bar3d{left:160px}
#view3d.full .bar3d{top:46px}
.surveys{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 8px}
.surveys .lbl{flex-basis:100%;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#6b7480)}
.surveys button{padding:5px 10px;border-radius:16px;font-size:12.5px;background:#fff;border:1px solid var(--line);cursor:pointer}
.surveys button.on{background:var(--navy);color:#fff;border-color:var(--navy);font-weight:600}
#siteEdit{margin:4px 0 6px}#siteEdit summary{cursor:pointer;font-size:12px;color:var(--muted,#6b7480);margin-bottom:6px}
#modeHint button{margin-left:8px;padding:2px 8px;font-size:12px;border-radius:10px;border:1px solid #fff8;background:transparent;color:#fff;cursor:pointer}

/* material search box and its list */
.pile .opts .matbox{font-size:12px;padding:4px 5px;width:100%}
#matMenu{position:fixed;z-index:4000;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 28px #0004;overflow:auto;font-size:13px}
#matMenu .mg{padding:6px 10px 3px;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:#6b7480;background:#f6f7f9;position:sticky;top:0}
#matMenu .mi{display:flex;align-items:center;gap:8px;padding:6px 10px;cursor:pointer}
#matMenu .mi:hover{background:#fff3e6}
#matMenu .mi .st{width:18px;text-align:center;color:#a9b1ba;font-size:15px}#matMenu .mi .st.on{color:#f58628}
#matMenu .mi .nm{flex:1}#matMenu .mi .dn{color:#6b7480;font-variant-numeric:tabular-nums}
#matMenu .mi.custom .nm{font-style:italic}
@media (max-width:760px){ .pile .opts .matbox{grid-column:2/-1} }
#attr3d{position:absolute;left:8px;bottom:8px;font-size:10px;color:#aab3c0;background:#1f232b99;padding:2px 6px;border-radius:4px;pointer-events:none}


/* =====================================================================================================================
   9 Line theme. Black frame, the brand's orange for the things you act on, its olive for the things that are counted.
   Numbers are set in a narrow industrial face (the kind stencilled on plant signage); everything else stays quiet.
   ===================================================================================================================== */
:root{
  color-scheme:dark;
  --bg:#000; --panel:#101214; --raised:#1a1d20; --field:#08090a; --ink:#f2f0ea; --muted:#9299a1; --line:#2a2e33;
  --accent:#f58628; --accent2:#e85a28; --accent-ink:#140a02; --olive:#93a445; --navy:#f58628; --mark:#f58628;
  --warn:#f0b35a; --warn-bg:#2a2010; --danger:#ff7a6b; --radius:10px;
  --num:"Bahnschrift","DIN Alternate","Roboto Condensed","Arial Narrow","Helvetica Neue Condensed",system-ui,sans-serif;
  font-size:14.5px;
}
body{font-family:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",sans-serif;background:var(--bg);color:var(--ink)}
header{background:#000;border-bottom:1px solid var(--line);min-height:56px;position:relative}
header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,#687838 0,#93a445 18%,#f58628 18%,#e85a28 55%,#e85a2800 100%)}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--num);font-size:19px;font-weight:600;letter-spacing:.04em}
.brand img{display:block;height:30px;width:auto}
#panel{background:var(--panel);border-left:1px solid var(--line);width:410px}
section{border-bottom:1px solid var(--line);padding:14px 18px}
h2{font-family:var(--num);font-size:22px;font-weight:600;letter-spacing:.01em;margin:0 0 6px}
h3{font-size:12.5px;text-transform:none;letter-spacing:0;color:var(--muted);font-weight:600;margin:0 0 10px}
label{color:var(--muted)}
input,select{background:var(--field);color:var(--ink);border:1px solid var(--line);border-radius:7px;padding:7px 9px}
input:focus,select:focus,button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
input[type=checkbox],input[type=range]{accent-color:var(--accent)}
button{background:var(--raised);color:var(--ink);border:1px solid var(--line);border-radius:7px;padding:7px 12px}
button:hover{border-color:#4a5058;background:#22262a}
button.ghost{background:transparent}
button.danger{color:var(--danger)}
header select{background:var(--raised);border-color:var(--line);font-weight:600}
header button{border-color:var(--line);background:transparent;color:var(--ink)}
header button.primary{background:var(--raised);color:var(--ink);border-color:var(--line);font-weight:400}
/* the one loud control: the brand's blade */
button.primary{background:linear-gradient(100deg,var(--accent) 0 62%,var(--accent2) 62%);border:0;color:var(--accent-ink);font-family:var(--num);font-size:17px;font-weight:700;letter-spacing:.03em;padding:11px 14px;border-radius:7px}
button.primary:hover{filter:brightness(1.08);background:linear-gradient(100deg,var(--accent) 0 62%,var(--accent2) 62%)}
button.primary.small{font-size:13.5px;padding:6px 12px}
.seg{border-color:var(--line);background:var(--field);border-radius:8px}
.seg button{background:transparent;color:var(--muted);padding:6px 14px}
.seg button.on{background:var(--accent);color:var(--accent-ink);font-weight:600}
.warn{background:var(--warn-bg);border-color:#5a4318;color:#f3cf8f}
.err{background:#2b1212;border-color:#6b2a2a;color:#ffb4a8}
.muted{color:var(--muted)}
details>summary{cursor:pointer;color:var(--muted);font-size:12.5px;margin:8px 0}
details>summary:hover{color:var(--ink)}
/* tools: a row of plain words under small marks */
.tools{grid-template-columns:repeat(4,1fr);gap:6px}
.tool,.tools .filebtn{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px 7px;font-size:11.5px;line-height:1.15;background:var(--raised);border:1px solid var(--line);border-radius:8px;color:var(--ink);text-align:center}
.tool i{font-style:normal;font-size:16px;color:var(--olive);line-height:1}
.tool.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.tool.on i{color:var(--accent-ink)}
button.findall{background:transparent;border:1px dashed #5a4a22;color:#f0c98a;font-weight:500;margin-bottom:10px}
#detectBar{background:#17140c;border:1px solid #3d3216;border-radius:8px}
.filebtn{border-color:var(--line);color:var(--ink);background:var(--raised)}
/* a pile: its tons first */
.pile{background:var(--raised);border:1px solid var(--line);border-radius:var(--radius);padding:12px 12px 10px;margin-top:10px}
.pile.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.pile .sw{width:6px;height:22px;border-radius:2px}
.pile .nm{background:transparent;border-color:transparent;font-size:15.5px;font-weight:600;padding:3px 4px}
.pile .nm:hover{border-color:var(--line)}
.pile .x{background:transparent;border:0;color:var(--muted);font-size:15px}.pile .x:hover{color:var(--ink);background:transparent}
.inrep{color:var(--muted)}
.pile .res{color:var(--muted);font-size:12.5px;gap:14px}
.pile .res.hero{align-items:baseline;gap:16px;margin-top:8px}
.pile .res.hero .tons{font-family:var(--num);color:var(--ink);font-size:15px}
.pile .res.hero .tons b{font-size:34px;font-weight:700;color:var(--accent);letter-spacing:.01em;line-height:1}
.pile .res.hero .yd{font-family:var(--num);font-size:13.5px}.pile .res.hero .yd b{font-size:18px;color:var(--ink);font-weight:600}
.pile .res.dims{margin-top:2px}
.pile .res .old{color:#f0b35a}
.pile .res.stale{opacity:.5}
.pile .opts{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;margin-top:12px}
.pile .opts .f{font-size:11.5px;gap:4px}
.pile .opts .f.mat{grid-column:1/-1}
.pile .opts .matrow{display:flex;gap:6px}
.pile .opts input,.pile .opts select,.pile .opts .matbox{font-size:13px;padding:6px 8px;width:100%}
.pile .opts .star{flex:none;width:32px;background:var(--field);border:1px solid var(--line);color:#6f767e;font-size:16px;border-radius:7px}
.pile .opts .star.on{color:var(--accent);border-color:var(--accent)}
.pile .chkrow{margin-top:10px;color:var(--muted)}
.pile .flags{background:var(--warn-bg);color:#f3cf8f;border-radius:7px;padding:7px 9px;margin-top:10px;font-size:12px}
.pile.pending{background:#1c170c;border-color:#5a4318}
.pile.excl{border-style:dashed}
.review{background:var(--warn-bg);border-color:#5a4318;color:#f3cf8f}
.review .lk{color:#a9d27a}.review .ck{color:#f0b35a}
.rvrow{color:#f3cf8f}.rvrow.likely .badge{background:#243016;color:#b9dd8c}.rvrow.check .badge{background:#3a2c10;color:#f0c98a}
.rvrow button.keep{background:var(--olive);border-color:var(--olive);color:#10140a}
.exgroup{border-color:var(--line)}
.totals{margin-top:14px;padding:12px 2px 2px;border-top:1px solid var(--line);align-items:baseline;gap:12px}
.totals .lbl{display:flex;flex-direction:column;font-size:13px;color:var(--ink);font-weight:600}
.totals .tons{font-family:var(--num);font-size:15px}.totals .tons b{font-size:30px;color:var(--olive);font-weight:700;line-height:1}
.totals .yd{font-family:var(--num);font-size:13px;color:var(--muted)}.totals .yd b{font-size:17px;color:var(--ink)}
/* survey dates */
.surveys .lbl{text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:600;color:var(--muted)}
.surveys button{background:var(--raised);border-color:var(--line);color:var(--ink);font-family:var(--num);font-size:14px;padding:5px 12px}
.surveys button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700}
/* history */
.hbar{background:#3a4047}.hist tr.cur .hbar{background:var(--accent)}
.hist{font-family:var(--num);font-size:14px}
.phist{border-top-color:var(--line)}
/* map furniture */
#map{background:#0a0b0c}
#readout{background:#101214e6;border-color:var(--line);color:var(--ink);font-family:var(--num);font-size:13.5px}
#modeHint{background:#101214f2;border:1px solid var(--accent);color:var(--ink)}
#toast div{background:#1a1d20;border:1px solid var(--line);color:var(--ink)}#toast div.e{background:#3a1512;border-color:#7a2f28}
.pile-label{background:#0c0d0ee6;border:1px solid #ffffff2e;color:#fff;font-family:var(--num);font-size:13px;font-weight:600;padding:2px 7px;border-radius:5px;white-space:pre}
.leaflet-bar a,.leaflet-bar a:hover{background:#101214;color:var(--ink);border-bottom-color:var(--line)}
.leaflet-bar{border:1px solid var(--line)!important;box-shadow:none!important}
.leaflet-control-layers{background:#101214;color:var(--ink);border:1px solid var(--line)!important;box-shadow:none!important}
.leaflet-control-layers-toggle{filter:invert(1) brightness(.9)}
.leaflet-control-scale-line{background:#101214cc;color:var(--ink);border-color:#aaa;text-shadow:none}
.leaflet-control-attribution{background:#000a!important;color:#9aa!important}.leaflet-control-attribution a{color:#cbd!important}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:#1a1d20;color:var(--ink)}
#dimToggle{background:#101214;border-color:var(--line)}
/* dialogs and lists */
dialog{background:var(--panel);color:var(--ink);border:1px solid var(--line)}
dialog::backdrop{background:#000b}
.tabs button.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.bar{background:#2a2e33}
table.mat td,table.mat th{border-bottom-color:var(--line)}
#matMenu{background:#16191c;border-color:#3a4047;box-shadow:0 14px 40px #000c}
#matMenu .mg{background:#0d0f10;color:var(--muted);text-transform:none;letter-spacing:0;font-size:11.5px;font-weight:600}
#matMenu .mi:hover{background:#2a1d10}
#matMenu .mi .dn{color:var(--muted);font-family:var(--num)}
#labels3d .l3{background:#0c0d0ee6;color:#fff;font-family:var(--num);font-size:13.5px;border:1px solid #ffffff2e;border-left-width:4px}
.bar3d{background:#101214e0;border:1px solid var(--line)}
#pos3d{font-family:var(--num);font-size:13.5px;background:#101214e6;border:1px solid var(--line)}#pos3d b{color:var(--accent)}
/* sign in */
.login{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:28px 26px}
.login .mark{display:block;height:64px;margin:0 0 14px}
.login h1{font-family:var(--num);font-size:26px;font-weight:700;letter-spacing:.02em;margin:0 0 4px}
.login input{background:var(--field)}
@media (max-width:1100px){#panel{width:350px}}
@media (max-width:760px){ #panel{width:100%} .pile .res.hero .tons b{font-size:30px} .tools{grid-template-columns:repeat(4,1fr)} }
@media (max-height:520px) and (min-width:600px){ #panel{width:310px} }
#labels3d .l3{white-space:pre}


/* =====================================================================================================================
   Finish: machined metal. Surfaces are dark brushed steel with a lit top edge and a shadowed bottom edge, controls sit
   proud of them, and the orange is polished: lighter at the top, a hard specular band, deeper at the foot.
   ===================================================================================================================== */
:root{
  --steel:linear-gradient(180deg,#2b2f34 0%,#1d2024 46%,#15171a 100%);
  --steel-hi:linear-gradient(180deg,#3a3f46 0%,#26292e 46%,#1a1c20 100%);
  --well:linear-gradient(180deg,#050506 0%,#0c0d0f 100%);
  --orange-metal:linear-gradient(180deg,#ffd08a 0%,#ffa23f 18%,#f58628 48%,#e06a1c 52%,#c9481a 100%);
  --olive-metal:linear-gradient(180deg,#dbe7a0 0%,#a9bb55 45%,#7c8c3a 55%,#5d6b2a 100%);
  --bevel:inset 0 1px 0 #ffffff26, inset 0 -1px 0 #00000080, 0 1px 0 #000, 0 6px 14px -6px #000c;
  --bevel-in:inset 0 2px 4px #000c, inset 0 -1px 0 #ffffff12;
}
body{background:radial-gradient(1200px 600px at 70% -10%,#1a1d22 0,#000 60%) #000}
header{background:linear-gradient(180deg,#1c1f23 0%,#0b0c0e 55%,#000 100%);box-shadow:inset 0 1px 0 #ffffff1f, 0 8px 24px -10px #000}
header::after{height:3px;bottom:-2px;background:linear-gradient(90deg,#5d6b2a 0,#a9bb55 9%,#dbe7a0 12%,#93a445 16%,#f58628 16%,#ffd08a 22%,#f58628 30%,#e85a28 52%,#e85a2800 100%);filter:drop-shadow(0 0 6px #f5862899)}
.brand span{background:linear-gradient(180deg,#fff 0%,#d9dde2 45%,#8d949c 55%,#c5cad0 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 1px 0 #0006}
.brand img{filter:drop-shadow(0 2px 4px #000) drop-shadow(0 0 10px #f5862840)}
#panel{background:linear-gradient(180deg,#16181b 0%,#0d0e10 100%);box-shadow:inset 1px 0 0 #ffffff12}
section{border-bottom:1px solid #000;box-shadow:0 1px 0 #ffffff0d}
h2{background:linear-gradient(180deg,#fff 0%,#e3e6ea 48%,#9aa1a9 54%,#cfd3d8 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
/* raised controls */
button,.filebtn,header select{background:var(--steel);border:1px solid #000;box-shadow:var(--bevel);text-shadow:0 1px 0 #000a;transition:filter .12s, transform .06s}
button:hover,.filebtn:hover{background:var(--steel-hi);border-color:#000}
button:active,.filebtn:active{transform:translateY(1px);box-shadow:inset 0 2px 5px #000c}
button.ghost{background:var(--steel)}
header button{background:var(--steel);border-color:#000}
.pile .x,.pile .nm{box-shadow:none;background:transparent}
/* recessed fields */
input,select{background:var(--well);border:1px solid #000;box-shadow:var(--bevel-in)}
header select{box-shadow:var(--bevel)}
/* polished orange */
button.primary{background:var(--orange-metal);color:#1a0b02;text-shadow:0 1px 0 #ffffff66;border:1px solid #7a2e0c;position:relative;overflow:hidden;
  box-shadow:inset 0 1px 0 #fff9, inset 0 -2px 0 #0005, 0 1px 0 #000, 0 10px 22px -8px #f58628aa}
button.primary::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:34%;transform:skewX(-24deg);background:linear-gradient(90deg,#fff0,#ffffff8c,#fff0);animation:sheen 5.5s ease-in-out infinite}
@keyframes sheen{0%,62%{left:-40%}100%{left:130%}}
@media (prefers-reduced-motion:reduce){button.primary::after{animation:none;left:58%;opacity:.5}}
button.primary:hover{background:var(--orange-metal);filter:brightness(1.1) saturate(1.05)}
.seg{background:var(--well);border:1px solid #000;box-shadow:var(--bevel-in);padding:2px;border-radius:9px}
.seg button{box-shadow:none;border-radius:7px;background:transparent}
.seg button.on,.surveys button.on,.tabs button.on{background:var(--orange-metal);color:#1a0b02;text-shadow:0 1px 0 #ffffff59;box-shadow:inset 0 1px 0 #fff9, inset 0 -1px 0 #0006, 0 2px 8px -2px #f58628aa;border-color:#7a2e0c}
.surveys button{background:var(--steel);border:1px solid #000;box-shadow:var(--bevel)}
input[type=range]{-webkit-appearance:none;appearance:none;height:8px;border-radius:5px;background:var(--well);box-shadow:var(--bevel-in);border:1px solid #000;padding:0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe2b0 0,#f58628 45%,#b9431a 100%);border:1px solid #5c2208;box-shadow:0 2px 5px #000c, inset 0 1px 0 #fff8;cursor:pointer}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe2b0 0,#f58628 45%,#b9431a 100%);border:1px solid #5c2208;box-shadow:0 2px 5px #000c;cursor:pointer}
/* tool keys */
.tools{gap:8px}
.tool,.tools .filebtn{background:var(--steel);border:1px solid #000;box-shadow:var(--bevel);border-radius:10px;padding:9px 2px 8px;gap:5px;font-size:11.5px;font-weight:600;color:#dfe3e7}
.tool .ic,.findall .ic{width:30px;height:30px;display:block;filter:drop-shadow(0 2px 2px #000c)}
.tool:hover{background:var(--steel-hi)}.tool:hover .ic{filter:drop-shadow(0 2px 2px #000c) drop-shadow(0 0 7px #f5862880)}
.tool.on{background:var(--orange-metal);border-color:#7a2e0c;color:#1a0b02;text-shadow:0 1px 0 #ffffff59;box-shadow:inset 0 1px 0 #fff9, inset 0 -2px 0 #0005, 0 0 18px -2px #f58628}
.tool.on .ic{filter:brightness(0) opacity(.82)}
button.findall{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--steel);border:1px solid #000;color:#f3d39a;font-weight:600;padding:8px;box-shadow:var(--bevel), inset 0 0 0 1px #f5862833}
/* pile plates */
.pile{background:linear-gradient(180deg,#24272c 0%,#191b1f 38%,#131517 100%);border:1px solid #000;border-radius:12px;box-shadow:inset 0 1px 0 #ffffff24, inset 0 -1px 0 #000, 0 12px 22px -14px #000, 0 1px 0 #ffffff0a;position:relative;overflow:hidden}
.pile::before{content:"";position:absolute;inset:0 0 auto 0;height:44%;background:linear-gradient(180deg,#ffffff0d,#fff0);pointer-events:none}
.pile.sel{border-color:#7a2e0c;box-shadow:inset 0 1px 0 #ffffff24, 0 0 0 1px #f58628, 0 0 22px -4px #f58628aa}
.pile .sw{width:7px;height:24px;border-radius:3px;box-shadow:inset 0 1px 0 #ffffff80, inset 0 -6px 8px #0006, 0 0 8px -1px currentColor}
.pile .res.hero .tons b{background:var(--orange-metal);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:38px;filter:drop-shadow(0 2px 0 #000) drop-shadow(0 0 14px #f5862855)}
.pile .res.hero .yd b{background:linear-gradient(180deg,#fff,#aeb5bd);-webkit-background-clip:text;background-clip:text;color:transparent}
.pile .opts .star{background:var(--steel);border:1px solid #000;box-shadow:var(--bevel)}
.pile .opts .star.on{color:#ffb14d;text-shadow:0 0 8px #f58628;border-color:#7a2e0c}
.pile .flags{background:linear-gradient(180deg,#33260f,#231a0b);border:1px solid #000;box-shadow:inset 0 1px 0 #ffffff14}
.totals{border-top:1px solid #000;box-shadow:inset 0 1px 0 #ffffff12;margin-top:16px}
.totals .tons b{background:var(--olive-metal);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:34px;filter:drop-shadow(0 2px 0 #000) drop-shadow(0 0 12px #93a44555)}
.hbar{background:linear-gradient(180deg,#5a626b,#2e3338);box-shadow:inset 0 1px 0 #ffffff2e;height:9px;border-radius:3px}
.hist tr.cur .hbar{background:var(--orange-metal);box-shadow:inset 0 1px 0 #fff8, 0 0 8px -1px #f58628}
/* things that float over the map */
#dimToggle{background:var(--well);border:1px solid #000;box-shadow:var(--bevel-in), 0 6px 16px -6px #000}
.leaflet-bar a,.leaflet-bar a:hover,.leaflet-control-layers{background:var(--steel)!important;box-shadow:var(--bevel)}
.leaflet-bar{border:1px solid #000!important}
#readout,#pos3d,.bar3d,#modeHint,#toast div{background:linear-gradient(180deg,#24272ce8,#111315ee);border:1px solid #000;box-shadow:inset 0 1px 0 #ffffff24, 0 10px 24px -10px #000}
#modeHint{border-color:#7a2e0c;box-shadow:inset 0 1px 0 #ffffff24, 0 0 16px -4px #f58628}
.pile-label,#labels3d .l3{background:linear-gradient(180deg,#2a2e33f2,#0c0d0ef2);border:1px solid #000;box-shadow:inset 0 1px 0 #ffffff33, 0 6px 14px -6px #000;text-shadow:0 1px 0 #000}
#labels3d .l3{border-left:4px solid}
dialog{background:linear-gradient(180deg,#1d2024,#0f1012);border:1px solid #000;box-shadow:inset 0 1px 0 #ffffff24, 0 30px 80px #000}
#matMenu{background:linear-gradient(180deg,#1f2226,#111315);border:1px solid #000;box-shadow:inset 0 1px 0 #ffffff24, 0 18px 44px #000}
.login{background:linear-gradient(180deg,#22252a,#0e0f11);border:1px solid #000;box-shadow:inset 0 1px 0 #ffffff2b, 0 30px 80px #000, 0 0 60px -20px #f5862866}
.login h1{background:linear-gradient(180deg,#fff 0%,#e3e6ea 48%,#9aa1a9 54%,#cfd3d8 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.login .mark{filter:drop-shadow(0 4px 6px #000) drop-shadow(0 0 18px #f5862855)}
::-webkit-scrollbar{width:11px;height:11px}::-webkit-scrollbar-track{background:#08090a}
::-webkit-scrollbar-thumb{background:linear-gradient(90deg,#33373d,#1c1f22);border:2px solid #08090a;border-radius:8px}

/* Update 30: dropdown lists. The opened list is drawn by the browser, so it needs its own colours. */
:root{color-scheme:dark}
select option,select optgroup{background-color:#15181c;color:#e9ecef}
select option:checked{background-color:#f58628;color:#14100b}
select option:disabled{color:#7d858d}

/* Update 33: quiet notes and notes waiting on a calculation */
.flags.info{background:none;border:0;box-shadow:none;padding:2px 2px 0;color:#8d959d;font-size:12px}
.flags.stale{opacity:.4}

/* Update 35: marks */
.marknote{margin:-2px 0 8px;line-height:1.35}
.pile.meas.off{opacity:.55}
.pile.meas.off .res{display:none}

/* Update 36: the data column sits on the left, the map on the right */
#panel{order:-1;border-left:0;border-right:1px solid #000;box-shadow:inset -1px 0 0 #ffffff12}
#toast{right:20px}
@media (max-width:760px){ #panel{order:0;border-right:0;box-shadow:none} #toast{right:12px} }
@media (max-height:520px) and (min-width:600px){ #panel{order:-1;border-left:0;border-right:1px solid #000} }
:root{--pw:min(410px,46vw)}
@media (max-width:1100px){:root{--pw:min(350px,46vw)}}
#dimToggle{left:calc(var(--pw) + 56px)}
#readout{left:calc(var(--pw) + 12px)}
#modeHint{left:calc(var(--pw) + (100% - var(--pw)) / 2)}
@media (max-width:760px){ :root{--pw:0px} #readout{left:54px} }
@media (max-height:520px) and (min-width:600px){ :root{--pw:310px} #readout{left:calc(var(--pw) + 12px)} }

/* Update 37: the 9 Line Stockpiles mark */
.brand img{height:46px;margin:-2px 0}
header{min-height:62px}
.login .mark{height:auto;width:100%;max-width:260px}
@media (max-width:760px){ .brand img{height:32px} }

/* Update 38: phones and tablets */
.hint3d .touch{display:none}
@media (pointer:coarse){
  .hint3d .mouse{display:none} .hint3d .touch{display:inline}
  input,select,textarea{font-size:16px !important}            /* below 16px an iPhone zooms the page when a box is tapped */
  .pile .x{min-width:40px;min-height:40px;font-size:18px}
  .pile .top{gap:4px}
  input[type=checkbox]{width:22px;height:22px}
  .chips button,.seg button{min-height:40px}
  details>summary{padding:8px 0}
  .leaflet-touch .leaflet-bar a{width:40px;height:40px;line-height:40px}
}
@media (max-width:1100px){ .pile .opts{grid-template-columns:.85fr 1.15fr} }
@media (max-width:760px){
  #readout{top:12px;bottom:auto;left:auto;right:64px}        /* clear of the zoom buttons, the 2D/3D switch and the layers button */
  header{min-height:0}
  .pile .opts{grid-template-columns:1fr 1fr}
  button,.tools button{touch-action:manipulation}
}
@media (max-height:520px) and (min-width:600px){ #readout{top:auto;right:auto;bottom:52px;left:calc(var(--pw) + 12px)} header{min-height:0} .brand img{height:30px} }
html,body{overscroll-behavior:none}
@media (pointer:coarse){
  header button,header select,.seg button,#panel button.ghost,#panel button.small,.pile .star{min-height:40px !important}
}
@media (max-width:760px){
  .pile .opts{grid-template-columns:.7fr 1.3fr}
  header button{font-size:13px;padding:6px 10px}
  #view3d.full .bar3d label.mix3d input{width:120px}
}
@media (max-height:520px) and (min-width:600px){ .brand span{display:none} header{flex-wrap:nowrap} header select{min-width:0;flex:1} header button{white-space:nowrap;font-size:13px;padding:6px 10px} }
@media (max-width:1100px){ .pile .opts{grid-template-columns:1fr !important} }