/* ===========================================================
   GCC FIELD — jobsite UI
   Big targets, high contrast, one-handed. Sun mode inverts the
   drawing for direct sunlight.
   =========================================================== */
:root{
  --blue:#1B1FFF; --blue-mid:#4B4EFF; --blue-hi:#7F82FF;
  --red:#FF2800; --amber:#FFB020; --green:#22C55E;
  --dark:#05070C; --dark2:#0A0E1A; --dark3:#0F1424; --dark4:#151B2E;
  --g1:#ECEEF8; --g2:#9098B8; --g3:#565E80;
  --edge:rgba(255,255,255,.10); --edge-hi:rgba(27,31,255,.42);
  --fD:'Syne',system-ui,sans-serif; --fB:'Barlow',system-ui,sans-serif;
  --fC:'Barlow Condensed',system-ui,sans-serif; --fM:'JetBrains Mono',ui-monospace,monospace;
  --bar:58px; --rp:100px; --r:8px;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;overflow:hidden;overscroll-behavior:none;}
body{
  font-family:var(--fB);background:var(--dark);color:var(--g1);
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
  user-select:none;-webkit-user-select:none;
}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer;}
.mono{font-family:var(--fM);}

/* ---------- app frame ---------- */
#app{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;}

/* ---------- top bar ---------- */
#top{
  flex:0 0 auto;padding:calc(var(--safe-t) + 8px) 12px 8px;
  display:flex;align-items:center;gap:10px;
  background:rgba(5,7,12,.92);border-bottom:1px solid var(--edge);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);z-index:20;
}
#title{
  flex:1 1 auto;min-width:0;font-family:var(--fC);font-size:16px;font-weight:600;
  letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#title small{display:block;font-family:var(--fM);font-size:9px;letter-spacing:.14em;
  color:var(--g3);text-transform:uppercase;margin-top:2px;}
.chip{
  flex:0 0 auto;font-family:var(--fM);font-size:10px;letter-spacing:.08em;
  padding:7px 11px;border-radius:var(--rp);border:1px solid var(--edge);
  background:var(--dark3);color:var(--g2);white-space:nowrap;
}
.chip.on{border-color:var(--green);color:var(--green);}
.chip.warn{border-color:var(--amber);color:var(--amber);}
.chip.err{border-color:var(--red);color:var(--red);}

/* ---------- canvas ---------- */
#stage{flex:1 1 auto;position:relative;overflow:hidden;background:var(--dark2);}
#cv{position:absolute;top:0;left:0;width:100%;height:100%;display:block;touch-action:none;}
#hud{
  position:absolute;left:10px;bottom:10px;z-index:5;pointer-events:none;
  font-family:var(--fM);font-size:9.5px;line-height:1.7;color:var(--g2);
  background:rgba(5,7,12,.72);padding:7px 10px;border-radius:var(--r);
  border:1px solid var(--edge);backdrop-filter:blur(8px);max-width:60%;
}
#hud b{color:var(--blue-hi);font-weight:500;}
#scalebar{
  position:absolute;right:10px;bottom:10px;z-index:5;pointer-events:none;
  font-family:var(--fM);font-size:9.5px;color:var(--g2);text-align:center;
  background:rgba(5,7,12,.72);padding:6px 9px;border-radius:var(--r);
  border:1px solid var(--edge);backdrop-filter:blur(8px);
}
#scalebar .bar{height:3px;background:var(--g1);margin-top:5px;border-radius:2px;}

/* floating round buttons on the canvas */
.fab{
  position:absolute;right:12px;z-index:6;width:46px;height:46px;border-radius:50%;
  background:rgba(10,14,26,.9);border:1px solid var(--edge);
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 6px 20px rgba(0,0,0,.45);
}
.fab:active{transform:scale(.94);}
.fab svg{width:21px;height:21px;stroke:var(--g1);fill:none;stroke-width:1.7;}
.fab.on{border-color:var(--blue);background:rgba(27,31,255,.24);}
.fab.on svg{stroke:var(--blue-hi);}
#fab-fit{top:12px;} #fab-me{top:68px;} #fab-sun{top:140px;}

/* the lock button carries a word under it — "ME" is not obviously a
   toggle, "LOCKED" is, and a foreman should not have to guess */
.fab.lock{flex-direction:column;gap:1px;height:52px;border-radius:26px;}
.fab.lock svg{width:18px;height:18px;}
.fab.lock i{
  font-family:var(--fC,var(--fM));font-style:normal;font-size:8.5px;
  letter-spacing:.08em;color:var(--g2);line-height:1;
}
.fab.lock.on i{color:var(--blue-hi);}
.fab.lock.on{
  box-shadow:0 6px 20px rgba(0,0,0,.45), 0 0 0 3px rgba(27,31,255,.22);
}
/* a locked view is a live state, so it reads as live */
@keyframes lockpulse{0%,100%{opacity:1;}50%{opacity:.55;}}
.fab.lock.on svg{animation:lockpulse 2.2s ease-in-out infinite;}
@media (prefers-reduced-motion:reduce){.fab.lock.on svg{animation:none;}}

/* ---------- bottom toolbar ---------- */
#tools{
  flex:0 0 auto;display:grid;grid-template-columns:repeat(5,1fr);
  background:rgba(5,7,12,.96);border-top:1px solid var(--edge);
  padding-bottom:var(--safe-b);z-index:20;
}
.tool{
  height:var(--bar);display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:4px;color:var(--g2);transition:color .15s,background .15s;
}
.tool svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6;}
.tool span{font-family:var(--fC);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;}
.tool:active{background:rgba(255,255,255,.05);}
.tool.on{color:var(--blue-hi);}
.tool.on svg{stroke:var(--blue-hi);}

/* ---------- bottom sheets ---------- */
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  max-height:76vh;display:flex;flex-direction:column;
  background:var(--dark2);border-top:1px solid var(--edge-hi);
  border-radius:16px 16px 0 0;box-shadow:0 -14px 50px rgba(0,0,0,.6);
  transform:translateY(102%);transition:transform .26s cubic-bezier(.2,.8,.3,1);
  padding-bottom:var(--safe-b);
}
.sheet.open{transform:translateY(0);}
/* Non-modal: the drawing stays tappable above the sheet. Measure and
   calibration both need canvas taps while their panel is open. */
.sheet.nonmodal{max-height:46vh;box-shadow:0 -10px 34px rgba(0,0,0,.5);}
.sheet-h{
  flex:0 0 auto;display:flex;align-items:center;gap:10px;
  padding:14px 16px 12px;border-bottom:1px solid var(--edge);
}
.sheet-h h2{flex:1;font-family:var(--fD);font-size:17px;font-weight:700;}
.sheet-h .x{font-size:24px;line-height:1;color:var(--g2);padding:2px 6px;}
.sheet-b{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px 16px 20px;}
#scrim{
  position:fixed;top:0;left:0;right:0;bottom:0;z-index:35;background:rgba(0,0,0,.55);
  opacity:0;pointer-events:none;transition:opacity .26s;backdrop-filter:blur(2px);
}
#scrim.on{opacity:1;pointer-events:auto;}

/* property rows */
.prow{
  display:flex;justify-content:space-between;gap:14px;padding:11px 0;
  border-bottom:1px solid var(--edge);font-size:14px;
}
.prow dt{font-family:var(--fM);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--g3);flex:0 0 auto;padding-top:2px;}
.prow dd{font-family:var(--fM);font-size:13px;color:var(--g1);text-align:right;
  word-break:break-word;user-select:text;-webkit-user-select:text;}
.prow dd.big{font-size:17px;color:var(--blue-hi);}

/* layer rows */
.lrow{
  display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--edge);
}
.lrow .sw{width:14px;height:14px;border-radius:3px;flex:0 0 auto;border:1px solid var(--edge);}
.lrow .nm{flex:1;font-family:var(--fM);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lrow .nm i.off{
  display:inline-block;margin-left:7px;font-style:normal;font-size:9px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--g3);
  border:1px solid var(--edge);border-radius:3px;padding:1px 4px;vertical-align:1px;
}
.lrow .ct{font-family:var(--fM);font-size:10px;color:var(--g3);}
.lrow .tg{
  width:44px;height:26px;border-radius:var(--rp);background:var(--dark4);
  border:1px solid var(--edge);position:relative;flex:0 0 auto;transition:background .18s,border-color .18s;
}
.lrow .tg::after{
  content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;
  background:var(--g3);transition:transform .18s,background .18s;
}
.lrow.on .tg{background:rgba(27,31,255,.3);border-color:var(--blue);}
.lrow.on .tg::after{transform:translateX(18px);background:var(--blue-hi);}

/* form controls */
.fld{margin-bottom:16px;}
.fld label{display:block;font-family:var(--fM);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--g3);margin-bottom:7px;}
.fld select,.fld input{
  width:100%;font-family:var(--fB);font-size:16px;color:var(--g1);
  background:var(--dark3);border:1px solid var(--edge);border-radius:var(--r);
  padding:13px 14px;outline:none;-webkit-appearance:none;appearance:none;
}
.fld select:focus,.fld input:focus{border-color:var(--blue);}
.fld select option{background:var(--dark3);}
.btn{
  width:100%;font-family:var(--fC);font-size:14px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;background:var(--blue);color:#fff;
  padding:15px;border-radius:var(--rp);margin-top:6px;
}
.btn:active{transform:translateY(1px);}
/* the DWG help sheet uses an <a> as a button, so it needs the block
   layout and centring a <button> gets for free */
a.btn{display:block;box-sizing:border-box;text-align:center;text-decoration:none;}
.btn.ghost{background:transparent;border:1px solid var(--edge);color:var(--g1);}
.btn.danger{background:transparent;border:1px solid var(--red);color:var(--red);}
.btn[disabled]{opacity:.4;pointer-events:none;}

.note{
  font-size:13px;line-height:1.65;color:var(--g2);
  background:var(--dark3);border-left:2px solid var(--blue);
  padding:12px 14px;border-radius:0 var(--r) var(--r) 0;margin-bottom:16px;
}
.note.warn{border-left-color:var(--amber);color:#FFD79A;}
.note.err{border-left-color:var(--red);color:#FFB3A8;}
.note b{color:#fff;font-weight:600;}

/* ---------- open / start screen ---------- */
#start{
  position:absolute;top:0;left:0;right:0;bottom:0;z-index:10;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;padding:26px;text-align:center;background:var(--dark);
}
#start.hide{display:none;}
#start .logo{height:34px;opacity:.9;margin-bottom:4px;}
#start h1{font-family:var(--fD);font-size:24px;font-weight:800;letter-spacing:-.02em;}
#start p{font-size:14px;color:var(--g2);line-height:1.6;max-width:30ch;}
#start .btn{max-width:280px;}
#recent{width:100%;max-width:340px;margin-top:6px;text-align:left;}
#recent h3{font-family:var(--fM);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--g3);margin-bottom:8px;}
.rrow{
  display:flex;align-items:center;gap:10px;padding:13px 14px;margin-bottom:8px;
  background:var(--dark3);border:1px solid var(--edge);border-radius:var(--r);
}
.rrow .nm{flex:1;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rrow .mt{font-family:var(--fM);font-size:9.5px;color:var(--g3);}
.rrow .del{color:var(--g3);font-size:19px;padding:0 4px;}

/* ---------- sun mode ---------- */
body.sun{--dark:#E9ECF2;--dark2:#F4F6FA;--dark3:#FFFFFF;--dark4:#E2E6EF;
  --g1:#070A14;--g2:#3C4257;--g3:#5A6178;--edge:rgba(0,0,0,.16);}
body.sun{background:#E9ECF2;color:#070A14;}
body.sun #top,body.sun #tools{background:rgba(244,246,250,.97);}
body.sun .chip{background:#fff;}
body.sun #hud,body.sun #scalebar{background:rgba(255,255,255,.88);color:#3C4257;}
body.sun .fab{background:rgba(255,255,255,.94);}
body.sun .fab svg{stroke:#070A14;}
body.sun .sheet{background:#F4F6FA;}
body.sun .prow dd{color:#070A14;}
body.sun .lrow .tg::after{background:#8A90A6;}

@media (min-width:760px){
  .sheet{left:50%;transform:translate(-50%,102%);max-width:520px;border-radius:16px 16px 0 0;}
  .sheet.open{transform:translate(-50%,0);}
  #tools{grid-template-columns:repeat(5,minmax(0,140px));justify-content:center;}
}

/* ---------- install banner ----------
   PWAs only install from the right browser, and nobody knows the ritual.
   This says which browser and what to tap. Hidden once standalone. */
.ibar{
  position:fixed;left:10px;right:10px;z-index:34;
  bottom:calc(10px + var(--safe-b));
  display:none;align-items:center;gap:12px;
  background:rgba(10,14,26,.96);border:1px solid var(--edge-hi);
  border-radius:14px;padding:12px 12px 12px 13px;
  box-shadow:0 10px 34px rgba(0,0,0,.55);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.ibar.show{display:flex;}
.ibar .ico{flex:0 0 auto;width:42px;height:42px;border-radius:10px;overflow:hidden;
  border:1px solid var(--edge);background:#05070C;}
.ibar .ico img{width:100%;height:100%;display:block;}
.ibar .txt{flex:1 1 auto;min-width:0;}
.ibar .txt > b{display:block;font-family:var(--fD);font-size:14px;font-weight:700;color:#fff;}
/* emphasis inside the instruction line must stay inline */
.ibar .txt span b{display:inline;font-family:inherit;font-size:inherit;font-weight:600;color:#fff;}
.ibar .txt span{display:block;font-size:12px;line-height:1.45;color:var(--g2);margin-top:3px;}
.ibar .go{
  flex:0 0 auto;font-family:var(--fC);font-size:12.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;background:var(--blue);color:#fff;
  padding:11px 17px;border-radius:var(--rp);
}
.ibar .go:active{transform:translateY(1px);}
.ibar .go.hide{display:none;}
.ibar .dz{flex:0 0 auto;font-size:21px;line-height:1;color:var(--g3);padding:2px 5px;}
body.sun .ibar{background:rgba(255,255,255,.97);}
body.sun .ibar .txt b{color:#070A14;}
@media (max-width:360px){ .ibar .txt span{display:none;} }

/* ---------- properties popup ----------
   Non-modal by design: selecting an entity must not hide the drawing
   it belongs to, and you need to keep tapping other entities. */
.props{
  position:fixed;left:10px;right:10px;z-index:30;
  bottom:calc(var(--bar) + var(--safe-b) + 10px);
  background:rgba(10,14,26,.97);border:1px solid var(--edge-hi);
  border-radius:14px;overflow:hidden;
  box-shadow:0 12px 40px rgba(0,0,0,.6);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  transform:translateY(calc(100% + 80px));opacity:0;
  transition:transform .22s cubic-bezier(.2,.8,.3,1),opacity .18s;
  pointer-events:none;
}
.props.open{transform:translateY(0);opacity:1;pointer-events:auto;}
.props-h{
  display:flex;align-items:center;gap:9px;padding:11px 8px 11px 14px;
  border-bottom:1px solid var(--edge);
}
.props-h .pt{
  font-family:var(--fM);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;background:var(--blue);padding:5px 10px;border-radius:var(--rp);flex:0 0 auto;
}
.props-h .pl{
  flex:1 1 auto;min-width:0;font-family:var(--fM);font-size:11.5px;color:var(--g2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.props-h .pexp,.props-h .px{
  flex:0 0 auto;color:var(--g2);padding:6px 9px;font-size:15px;line-height:1;
}
.props-h .px{font-size:21px;}
.props-h .pexp{transition:transform .2s;}
.props.exp .props-h .pexp{transform:rotate(180deg);}
.props-b{max-height:33vh;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:4px 14px 12px;}
.props.exp .props-b{max-height:62vh;}
.props .prow{padding:9px 0;}
.props .prow dt{font-size:9.5px;}
.props .prow dd{font-size:12.5px;}
.props .prow dd.big{font-size:16px;}
body.sun .props{background:rgba(255,255,255,.98);}

/* hide rows past the 5th until expanded — the summary is what you
   need standing in the dirt; the full list is one tap away */
.props:not(.exp) .prow:nth-child(n+6){display:none;}

/* ===========================================================
   SCREENS (jobs / job / viewer)
   =========================================================== */
.screen{display:none;flex:1 1 auto;min-height:0;flex-direction:column;}
.screen.on{display:flex;}
.sc-body{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:18px 16px calc(28px + var(--safe-b));}
#sc-view.on{display:flex;}

#top .back{display:none;flex:0 0 auto;font-size:19px;color:var(--g1);padding:6px 10px 6px 2px;}
#top .back.on{display:block;}

.hero-blurb{margin-bottom:20px;}
.hero-blurb h1{font-family:var(--fD);font-size:26px;font-weight:800;letter-spacing:-.02em;margin-bottom:8px;}
.hero-blurb p{font-size:14px;line-height:1.6;color:var(--g2);max-width:42ch;}

/* ---------- home masthead ----------
   The same live contour field as the website, behind the logo. It is a
   background, so it stays quiet: slow drift, masked off at the bottom so
   the lines fade into the page rather than ending on a hard edge. */
.masthead{
  position:relative;overflow:hidden;isolation:isolate;
  margin:-4px -18px 20px;padding:26px 18px 24px;
  border-bottom:1px solid var(--edge);
}
.masthead .topo-bg{
  position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.46;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 52%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 52%,transparent 100%);
  pointer-events:none;
}
.masthead::after{   /* keeps text legible wherever the contours bunch up */
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(105% 75% at 14% 34%,rgba(5,7,12,.88) 0%,rgba(5,7,12,.40) 52%,transparent 100%);
}
.mh-in{position:relative;z-index:2;}
/* the logo PNG carries its own rounded corners and a transparent margin,
   so the glow has to follow the alpha, not the image box */
.mh-logo{display:block;width:124px;height:auto;margin:0 0 14px -4px;
  filter:drop-shadow(0 6px 20px rgba(0,56,253,.45));}
.mh-in h1{font-family:var(--fD);font-size:34px;font-weight:800;letter-spacing:-.025em;
  line-height:1;margin-bottom:9px;}
.mh-in p{font-size:14.5px;line-height:1.55;color:var(--g2);max-width:30ch;margin-bottom:14px;}
.mh-tag{
  display:inline-block;font-family:var(--fM);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--blue-hi);
  border:1px solid var(--edge-hi);border-radius:var(--rp);padding:5px 11px;
  background:rgba(27,31,255,.14);
}

/* small logo in the top bar, on every screen */
#topmark{flex:0 0 auto;width:36px;height:auto;display:block;}
#back.on ~ #topmark{display:none;}   /* the back arrow takes its place */

.empty{text-align:center;padding:34px 18px;color:var(--g3);}
.empty b{display:block;font-family:var(--fD);font-size:16px;color:var(--g2);margin-bottom:6px;}
.empty span{font-size:13.5px;line-height:1.6;}

/* list rows */
.row{
  display:flex;align-items:center;gap:13px;padding:15px 14px;margin-bottom:9px;
  background:var(--dark3);border:1px solid var(--edge);border-radius:12px;
  transition:border-color .18s,transform .12s;
}
.row:active{transform:scale(.995);border-color:var(--edge-hi);}
.row .ri{flex:0 0 auto;width:38px;height:38px;border-radius:10px;display:flex;
  align-items:center;justify-content:center;background:rgba(27,31,255,.16);
  border:1px solid var(--edge-hi);}
.row .ri svg{width:18px;height:18px;stroke:var(--blue-hi);fill:none;stroke-width:1.7;}
.row .rm{flex:1 1 auto;min-width:0;}
.row .rm b{display:block;font-size:15px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.row .rm span{display:block;font-family:var(--fM);font-size:10px;color:var(--g3);margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.row .rx{flex:0 0 auto;color:var(--g3);font-size:20px;padding:4px 6px;}
.row .chev{flex:0 0 auto;color:var(--g3);font-size:15px;}

.jobhead{margin-bottom:18px;}
.jobhead h1{font-family:var(--fD);font-size:23px;font-weight:800;letter-spacing:-.02em;margin-bottom:7px;}
.jobhead .meta{font-family:var(--fM);font-size:10.5px;color:var(--g3);letter-spacing:.06em;line-height:1.8;}
.jobhead .meta b{color:var(--blue-hi);font-weight:500;}

/* segmented control */
.seg{display:flex;gap:4px;background:var(--dark3);border:1px solid var(--edge);
  border-radius:var(--rp);padding:4px;margin-bottom:18px;}
.seg.small{margin-bottom:14px;}
.segb{flex:1;padding:10px 8px;border-radius:var(--rp);font-family:var(--fC);
  font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--g2);}
.segb.on{background:var(--blue);color:#fff;}

.hint{font-size:12.5px;line-height:1.6;color:var(--g3);margin:10px 0 14px;}
.zonemap{width:100%;border-radius:10px;border:1px solid var(--edge);
  background:#fff;margin-bottom:16px;display:block;}

/* ===========================================================
   3D CONTROL BAR
   =========================================================== */
#d3bar{
  position:absolute;left:10px;right:74px;top:10px;z-index:8;display:none;
  flex-wrap:wrap;gap:7px;align-items:center;
}
#d3bar.on{display:flex;}
.d3b{
  font-family:var(--fM);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  padding:8px 12px;border-radius:var(--rp);border:1px solid var(--edge);
  background:rgba(10,14,26,.9);color:var(--g2);backdrop-filter:blur(10px);
}
.d3b.on{border-color:var(--blue);color:var(--blue-hi);background:rgba(27,31,255,.22);}
#d3bar .ve{
  display:flex;align-items:center;gap:8px;font-family:var(--fM);font-size:10px;
  letter-spacing:.1em;color:var(--g2);background:rgba(10,14,26,.9);
  border:1px solid var(--edge);border-radius:var(--rp);padding:6px 12px;
  backdrop-filter:blur(10px);
}
#d3bar .ve input{width:96px;accent-color:var(--blue);}
#d3bar .ve b{color:var(--blue-hi);font-weight:500;min-width:34px;}
body.sun .d3b,body.sun #d3bar .ve{background:rgba(255,255,255,.93);}

#gl,#ov{position:absolute;top:0;left:0;width:100%;height:100%;display:block;}
#gl{touch-action:none;}
#ov{pointer-events:none;}

/* saved measurement rows */
.mrow .ri{background:rgba(255,176,32,.16);border-color:rgba(255,176,32,.4);}
.mrow .ri svg{stroke:var(--amber);}