/* Frosted application chrome, with solid surfaces where blur is unavailable. */
:root{--mt-footer-height:48px;--mt-glass-fill:color-mix(in srgb,var(--panel) 68%,transparent);--mt-glass-edge:color-mix(in srgb,var(--text) 14%,transparent)}
body.mt-chrome{padding-bottom:var(--mt-footer-height)}
body.mt-chrome>footer.mt-site-footer{position:fixed;inset:auto 0 0;z-index:2250;min-height:48px;height:auto;margin:0;box-sizing:border-box;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:9px 18px;background:var(--panel);border:0;border-top:1px solid var(--border);color:var(--muted);font-size:11px;line-height:1.4}
.mt-site-footer>img{width:20px;height:20px;object-fit:contain;flex:none}
.mt-site-footer>b{color:var(--text);font-weight:500}
.mt-site-footer .grow{flex:1}
.mt-site-footer a{color:var(--muted);text-decoration:none}
.mt-site-footer a:hover{color:var(--accent)}
.mt-site-footer nav,.mt-site-footer .footLinks{display:flex;gap:14px;flex-wrap:wrap}
body.ml-home.mt-chrome{padding-top:var(--mt-home-header-height,64px)}
body.ml-home.mt-chrome>header{position:fixed;top:0;left:0;right:0;z-index:60}
body.ml-home.in.mt-chrome>header{left:248px}
body.ml-workspace.mt-chrome{padding-bottom:0}
body.ml-workspace.mt-chrome #app{height:calc(100% - var(--workspace-header) - var(--mt-footer-height))}
body.ml-workspace.mt-chrome #brandFoot{display:none}
@media(max-width:768px),(orientation:landscape) and (max-height:560px){body.ml-workspace.mt-chrome #sidebar{bottom:var(--mt-footer-height);height:auto}}
body.mt-chrome #drafter{bottom:var(--mt-footer-height)}
body.ml-studio.mt-chrome #scene3d{bottom:var(--mt-footer-height)}
body.ml-home.in #side{bottom:var(--mt-footer-height)}
body.ml-home #workspacePage{min-height:calc(100vh - var(--mt-home-header-height,64px) - var(--mt-footer-height))}
body.ml-home #workspaceFrame{height:calc(100vh - var(--mt-home-header-height,64px) - var(--mt-footer-height))}
/* Preferences expose measurements only; connection settings live in Admin. */
body.ml-home.in .pubTog{display:flex;align-items:center;justify-content:space-between;width:100%;gap:14px;text-align:left;padding:13px 16px;border:1px solid var(--border);border-radius:8px;background:var(--panel);color:var(--text);font:inherit;font-size:13px;font-weight:500;text-decoration:none;cursor:pointer}
body.ml-home.in .pubTog:hover{background:var(--panel2);color:var(--accent)}
.pubChevron{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .2s;flex:none;margin-right:3px}
.pubTog[aria-expanded=true] .pubChevron{transform:rotate(225deg)}
body.ml-workspace #orgSec{max-width:230px}
body.ml-workspace #orgBtn{min-height:42px;padding:4px 9px;gap:9px;font-size:14px;line-height:1.3;background:var(--panel2)}
body.ml-workspace #orgLogo{width:32px;height:32px;border-radius:6px;object-fit:contain}
body.ml-workspace #orgName{font-size:14px;font-weight:600;line-height:1.3}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 body.mt-chrome>header,body.ml-workspace #workspaceHeader,body.ml-home.in #side,body.ml-workspace #sidebar,body.mt-chrome>footer.mt-site-footer,body.ml-workspace .hmgroup,body.ml-workspace #v3toolbar,body.ml-workspace #v3bar,body.mt-chrome #drafter .drBar,body.mt-chrome #drafter .drSide{
  background:var(--mt-glass-fill);border-color:var(--mt-glass-edge);-webkit-backdrop-filter:var(--mt-frost);backdrop-filter:var(--mt-frost);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 5%,transparent)
 }
 body.ml-home:not(.in)>header{background:color-mix(in srgb,var(--panel) 28%,transparent)}
 body.ml-workspace #sbContent,body.ml-workspace #sbTabs{background:transparent}
 body.ml-home.in #sbOrg,body.ml-workspace #orgBtn{background:color-mix(in srgb,var(--panel2) 65%,transparent)}
}
/* Extend the 2D map behind its chrome. Camera padding keeps content clear of it. */
body.ml-workspace.mt-glass-map #workspaceHeader{position:absolute;top:0;left:0;right:0}
body.ml-workspace.mt-glass-map #app{position:relative;height:calc(100% - var(--mt-footer-height))}
body.ml-workspace.mt-glass-map #sidebar{position:absolute;left:0;top:var(--workspace-header);bottom:0;height:auto}
body.ml-workspace.mt-glass-map #sbGrip{position:absolute;left:calc(var(--mt-map-left) - 3px);top:var(--workspace-header);bottom:0}
body.ml-workspace.mt-glass-map #mapwrap{position:absolute;inset:0}
body.ml-workspace.mt-glass-map .leaflet-left{left:var(--mt-map-left)}
body.ml-workspace.mt-glass-map .leaflet-top{top:var(--workspace-header);margin-top:0}
body.ml-workspace.mt-glass-map .maplibregl-ctrl-top-left,body.ml-workspace.mt-glass-map .maplibregl-ctrl-top-right{top:var(--workspace-header)}
@media(max-width:1100px){body.ml-workspace #orgSec{max-width:170px}body.ml-workspace #orgName{max-width:110px}}
@media(max-width:900px){body.ml-home.in.mt-chrome>header{left:0}body.ml-home.in #side{bottom:auto}body.ml-home #workspacePage{min-height:calc(100vh - var(--mt-home-header-height,64px) - var(--mt-home-nav-height,146px) - var(--mt-footer-height))}body.ml-home #workspaceFrame{height:calc(100vh - var(--mt-home-header-height,64px) - var(--mt-home-nav-height,146px) - var(--mt-footer-height))}}
@media(max-width:768px){
 body.ml-workspace #orgSec{max-width:72px}body.ml-workspace #orgBtn{padding:3px 5px;min-height:38px;gap:5px}body.ml-workspace #orgName{font-size:12px;max-width:46px}body.ml-workspace #orgLogo{width:30px;height:30px}
 .mt-site-footer .hideSm,.mt-site-footer .mt-company-site{display:none!important}
 body.mt-chrome>footer.mt-site-footer{padding:8px 12px;gap:8px;font-size:10px}.mt-site-footer nav,.mt-site-footer .footLinks{gap:9px}
}
@media(prefers-reduced-transparency:reduce){
 body.mt-chrome>header,body.ml-workspace #workspaceHeader,body.ml-home.in #side,body.ml-workspace #sidebar,body.mt-chrome>footer.mt-site-footer,body.ml-workspace .hmgroup,body.ml-workspace #v3toolbar,body.ml-workspace #v3bar,body.mt-chrome #drafter .drBar,body.mt-chrome #drafter .drSide{background:var(--panel);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media print{body.mt-chrome>footer.mt-site-footer{display:none}body.mt-chrome{padding-bottom:0}body.mt-chrome #drafter{bottom:0}}

/* Surface tokens are shared by full pages, embedded console cards and lazy UI.
   Keep a single frosted shell; inner rows use tints rather than stacked blurs. */
:root{
 --mt-floating-fill:var(--panel);--mt-card-fill:var(--panel);
 --mt-inset-fill:var(--panel2);--mt-sticky-fill:var(--panel2);
 --mt-frost:none;
 --mt-surface-shadow:0 8px 28px #0003;--mt-header-fill:var(--panel)
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 :root{
  --mt-floating-fill:color-mix(in srgb,var(--panel) 80%,transparent);
  --mt-card-fill:color-mix(in srgb,var(--panel) 62%,transparent);
  --mt-inset-fill:color-mix(in srgb,var(--panel2) 38%,transparent);
  --mt-sticky-fill:color-mix(in srgb,var(--panel2) 94%,transparent);
  
  --mt-frost:blur(24px) saturate(125%);
  --mt-surface-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 6%,transparent),0 8px 28px #0003;
  --mt-header-fill:var(--mt-glass-fill)
 }
}
/* All floating map/account/settings surfaces, including the shared modal used
   for Project files, Preferences, project settings, analysis and share flows. */
body.mt-surfaces :is(#modal,#md,#quoteDlg,#cmdBox,#upBox,#login,#profileMenu,#menu,#notifTray,#lyrMenu,#attrBox,#pcBox,#profBox,#waterBox,#infoBox,#gpsInfo,#m3dBox,#timebar,#rectBox,#workspaceOrgMenu,#workspaceLoading,#svBody,#busyBox,#v3keys,body:not([class*=ml-]) #toast),
body.mt-surfaces :is(.v3panel,.v3ToolTip,.elBox,.leaflet-control-layers,.leaflet-bar.hmtools,.leaflet-bar.hmview,.maplibregl-ctrl-group,.maplibregl-popup-content,.leaflet-popup-content-wrapper,.toastmsg,.toastgone,.tmsg,.measure-tip,#swipeBar span,.projectMenu>div),
body.mt-surfaces #drafter :is(.drProps,.drSide,.drRibbon,.drStatus,.drShTop,.drRTop,.drRBot,.drZoomPill,.drOver,.drLayers,.drFinish,.drSay,.drExportPanel,.drPlaneTip,.drViewportTools,.drVisibilityPanel,.drSettingsPanel){
 background-color:var(--mt-floating-fill);
 -webkit-backdrop-filter:var(--mt-frost);backdrop-filter:var(--mt-frost);
 box-shadow:var(--mt-surface-shadow)
}
/* Headers host dropdowns. Frost a separate paint layer so the header itself
   does not become a backdrop root that cuts off blur in menus below it. */
body.ml-home.mt-surfaces>header,body.ml-workspace.mt-surfaces #workspaceHeader,
body.mt-surfaces #drafter :is(.drBar,.drRibbon,.drViewportTools){
 background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;isolation:isolate;box-shadow:none
}
body.ml-home.mt-surfaces>header::before,body.ml-workspace.mt-surfaces #workspaceHeader::before,
body.mt-surfaces #drafter :is(.drBar,.drRibbon,.drViewportTools)::before{
 content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
 background:var(--mt-header-fill);-webkit-backdrop-filter:var(--mt-frost);backdrop-filter:var(--mt-frost);
 box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 5%,transparent)
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 body.ml-home:not(.in){--mt-header-fill:color-mix(in srgb,var(--panel) 28%,transparent)}
 /* A readable landscape behind the workspace makes frosting visible on cards. */
 body.ml-home.in #heroBg::after{background:linear-gradient(180deg,rgba(18,18,18,.65),rgba(18,18,18,.78))}
}
/* Includes the retained org-console iframe: it opts into surfaces before the
   shared script skips its duplicate header/footer setup. */
body.mt-surfaces :is(.card:not(.projectWorkspace),.stat,.metric,.tile,.plan,.cmp),
body.ml-console.mt-surfaces .tabs,
body.mt-surfaces :is(#projectCreate,#projectContinue),
body.ml-home.mt-surfaces :is(#hero,#codeForm,#trialForm){
 background-color:var(--mt-card-fill);
 -webkit-backdrop-filter:var(--mt-frost);backdrop-filter:var(--mt-frost);
 box-shadow:var(--mt-surface-shadow)
}
/* A project menu can extend beyond its card. Keep the card's frosting on a
   paint layer, then raise the open card above its siblings without trapping blur. */
body.mt-surfaces .projectCard{background-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;isolation:isolate;box-shadow:var(--mt-surface-shadow)}
body.mt-surfaces .projectCard::before{
 content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
 background:var(--mt-card-fill);-webkit-backdrop-filter:var(--mt-frost);backdrop-filter:var(--mt-frost)
}
body.mt-surfaces .projectCard:has(.projectMenu[open]){z-index:5}
/* Inset controls and data cards keep the already blurred scene visible. */
body.mt-surfaces :is(.lyr,.grpHead,.mediaCard,.docCard,.bill-plan,.job,.outCard,.procSum>div,.sbStore,.pgIcon,.psFacts),
body.mt-surfaces :is(#cloudSec,#signedOutNote,#sbOrg,#orgBtn,#studioLaunch,#profileBtn),
body.mt-surfaces #drafter :is(.drCard,.drPlaneSummary,.drTabs){background-color:var(--mt-inset-fill)}
body.ml-workspace.mt-surfaces .lyr.on,body.mt-surfaces #drafter .drCard.on{
 background-color:color-mix(in srgb,var(--accent) 12%,var(--mt-inset-fill));border-color:var(--accent)
}
body.mt-surfaces :is(#sbContent,#sbTabs,#attrHead,#attrFoot,#attrScroll,.pfList,.pfGroup,.continueProject,.mlBar,.mlFoot,#mlMeta,#pvBar,#svHead){background-color:transparent}
body.mt-surfaces #drafter .drBar{z-index:20}
body.mt-surfaces #drafter .drExport>summary{background:var(--accent);border-color:var(--accent);color:#1a1408}
body.mt-surfaces #drafter .drRibbon{position:relative;z-index:10}
body.mt-surfaces #drafter .drRibbon>:is(.drTools,.drTail){background:transparent}
body.mt-surfaces #topBar .seg{background-color:var(--mt-inset-fill)}
body.mt-surfaces #v3toolbar .v3btn:not(.on),body.mt-surfaces #v3bar button:not(.on){background-color:var(--mt-inset-fill)}
body.mt-surfaces :is(.mlBar,.mlFoot,#mlMeta,#pvBar,#svHead,#gcpTop,#gcpStrip,#gcpFoot){
 background-color:var(--mt-floating-fill);-webkit-backdrop-filter:var(--mt-frost);backdrop-filter:var(--mt-frost)
}
/* Sticky cells must still cover scrolled text. The rest of each table stays
   transparent so a table does not turn its glass container back into a slab. */
body.mt-surfaces :is(#attrTable thead th,#attrTable td.rowNo,#svBody thead th,#svBody th.rn){
 background-color:var(--mt-sticky-fill)
}
body.mt-surfaces input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=submit]):not([type=button]),
body.mt-surfaces :is(select,textarea,.btn2),body.mt-surfaces #modalBtns button:not(.ok),
body.mt-surfaces #drafter .drForm :is(input,select){background-color:var(--mt-inset-fill)}
body.mt-surfaces option{background:var(--panel);color:var(--text)}
body.mt-surfaces :is(.btn2,#modalBtns button:not(.ok)):hover:not(:disabled){background-color:var(--hover)}
body.mt-surfaces .leaflet-control-layers-toggle{background-color:transparent}
body.mt-surfaces .maplibregl-popup-anchor-bottom .maplibregl-popup-tip{border-top-color:var(--mt-floating-fill)}
body.mt-surfaces .maplibregl-popup-anchor-top .maplibregl-popup-tip{border-bottom-color:var(--mt-floating-fill)}
body.mt-surfaces .maplibregl-popup-anchor-left .maplibregl-popup-tip{border-right-color:var(--mt-floating-fill)}
body.mt-surfaces .maplibregl-popup-anchor-right .maplibregl-popup-tip{border-left-color:var(--mt-floating-fill)}
@media(prefers-contrast:more){
 :root{--mt-floating-fill:var(--panel);--mt-card-fill:var(--panel);--mt-inset-fill:var(--panel2);--mt-sticky-fill:var(--panel2);--mt-header-fill:var(--panel);--mt-glass-fill:var(--panel)}
}
@media(prefers-reduced-transparency:reduce),(forced-colors:active),print{
 :root{--mt-floating-fill:var(--panel);--mt-card-fill:var(--panel);--mt-inset-fill:var(--panel2);--mt-sticky-fill:var(--panel2);--mt-frost:none;--mt-header-fill:var(--panel);--mt-glass-fill:var(--panel)}
 body.ml-home:not(.in){--mt-header-fill:var(--panel)}
}

/* Phones. Draft Studio is a desktop drafting tool, so it asks for a bigger screen. */
#stPhone{display:none}
@media(max-width:700px){
 body.ml-studio #stPhone{position:fixed;inset:0;z-index:5000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:28px;text-align:center;background:var(--bg);color:var(--text)}
 #stPhone b{font-size:17px}#stPhone span{font-size:13px;color:var(--muted);max-width:300px;line-height:1.6}
 #stPhone button{margin-top:6px;padding:9px 22px;border-radius:8px;border:1px solid var(--accent);background:var(--accent);color:#1a1408;font:inherit;font-weight:600;cursor:pointer}
}
@media(max-width:560px){
 body.ml-home .secRow{flex-wrap:wrap;gap:10px}
 body.ml-home .pjTools{flex-wrap:wrap;width:100%;gap:8px}
 body.ml-home .pjTools #projSearch{flex:1 1 100%;min-width:0;width:100%}
 body.ml-home .pjTools #newProjBtn{flex:1 1 auto;white-space:nowrap}
}
@media(max-width:480px){
 body.ml-progress header{gap:6px}
 body.ml-progress header h1{min-width:0;flex:1 1 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 body.ml-progress header .right{min-width:0;flex:0 1 auto}
 body.ml-progress header .right button,body.ml-progress header .right a{padding:5px 7px}
}

/* ===== Phone design (iOS conventions: tab bar, sheets, 44 px targets, 16 px fields) ===== */
@media(max-width:640px){
 :root{--mt-tabbar:calc(60px + env(safe-area-inset-bottom,0px))}
 /* An app, not a website: no page footer inside the signed-in workspace or the map. */
 body.ml-workspace>footer.mt-site-footer,body.ml-home.in>footer.mt-site-footer{display:none}
 /* Top-level sections become a bottom tab bar, within thumb reach. */
 body.ml-home.in .sbNav{position:fixed;left:0;right:0;bottom:0;z-index:70;margin:0;gap:0;flex-direction:row;justify-content:space-around;padding:5px 2px calc(5px + env(safe-area-inset-bottom,0px));background:var(--mt-glass-fill,var(--panel));-webkit-backdrop-filter:var(--mt-frost,none);backdrop-filter:var(--mt-frost,none);border-top:1px solid var(--mt-glass-edge,var(--border))}
 body.ml-home.in .sbNav a{flex:1 1 0;min-width:0;min-height:50px;flex-direction:column;justify-content:center;gap:3px;padding:4px 2px;font-size:10px;line-height:1.1;text-align:center;border-radius:10px}
 body.ml-home.in .sbNav svg{width:22px;height:22px}
 /* a backdrop filter would trap the fixed tab bar inside the side panel */
 body.ml-home.in #side{-webkit-backdrop-filter:none;backdrop-filter:none}
 body.ml-home.in.mt-chrome{padding-bottom:var(--mt-tabbar)}
 body.ml-home #workspacePage{min-height:calc(100vh - var(--mt-home-header-height,64px) - var(--mt-home-nav-height,0px) - var(--mt-tabbar))}
 body.ml-home #workspaceFrame{height:calc(100vh - var(--mt-home-header-height,64px) - var(--mt-home-nav-height,0px) - var(--mt-tabbar))}
 body.ml-home.in #toast{bottom:calc(var(--mt-tabbar) + 12px)}
}
@media(max-width:768px){
 /* Dialogs rise from the bottom as sheets. */
 #overlay,#upWrap,#ov{align-items:flex-end!important;padding:0!important}
 #modal,#upBox,#md{width:100%!important;max-width:none!important;margin:0!important;border-radius:18px 18px 0 0!important;max-height:90dvh;padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
 #modal::before,#md::before{content:'';display:block;width:38px;height:4px;border-radius:3px;background:color-mix(in srgb,var(--text) 28%,transparent);margin:-6px auto 12px}
 /* 16 px stops iOS zooming the page when a field is focused; 44 px is the touch minimum. */
 input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea{font-size:16px!important;min-height:44px}
 .btn,.btn2,#modalBtns button,#mdBtns button,#v3bar button{min-height:44px}
 /* Banners span the screen under the top bar, like a notification. */
 body.ml-workspace #toast,body.ml-studio #toast{left:12px!important;right:12px!important;top:calc(var(--mtbH,56px) + 8px)!important;align-items:stretch!important}
 body.ml-workspace .toastmsg,body.ml-workspace .toastgone{max-width:none!important}
}