/* LandTargets mobile/tablet layout. Everything is scoped to html.lt-m (set by mobile.js), so desktop is untouched. */
html.lt-m,html.lt-m body{height:100%;overflow:hidden;overscroll-behavior:none;-webkit-text-size-adjust:100%}
html.lt-m body{display:flex;flex-direction:column;height:100dvh;max-width:100vw}
html.lt-m header{flex:none;padding:calc(6px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) 6px calc(10px + env(safe-area-inset-left));gap:8px;flex-wrap:nowrap}
html.lt-m header h1 img{height:26px}
html.lt-m #sf{min-width:0;max-width:none}html.lt-m #sf input{min-width:0;font-size:16px;padding:8px}html.lt-m #sf button{min-height:40px}
html.lt-m header .hd{display:none!important}
html.lt-m #wrap{flex:1;min-height:0;height:auto!important;flex-direction:row!important;position:relative}
html.lt-m #map{flex:1!important;height:auto!important;width:100%}
/* drawer */
html.lt-m #side{position:fixed;top:0;bottom:0;left:0;z-index:40;width:min(400px,88vw)!important;height:100%!important;max-height:none;
 padding:calc(10px + env(safe-area-inset-top)) 10px calc(14px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left));
 transform:translateX(-105%);transition:transform .28s cubic-bezier(.2,.8,.2,1);box-shadow:4px 0 24px rgba(0,0,0,.3);overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
html.lt-m.m-drawer #side{transform:none}
#m-bd{position:fixed;inset:0;z-index:39;background:rgba(6,20,45,.45);opacity:0;pointer-events:none;transition:opacity .25s}
html.lt-m.m-drawer #m-bd{opacity:1;pointer-events:auto}
#m-ham,#m-drx,#m-sheet,#m-bd,.m-selnote{display:none}
html.lt-m #m-ham{display:flex;position:absolute;top:10px;left:10px;z-index:6;width:46px;height:46px;padding:0;border:0;border-radius:8px;background:#06275D;color:#fff;font-size:22px;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.35)}
html.lt-m #m-ham .b{position:absolute;top:-5px;right:-5px;min-width:20px;height:20px;border-radius:10px;background:#A2CF34;color:#06275D;font-size:11px;font-weight:700;line-height:20px;padding:0 4px;box-sizing:border-box}
html.lt-m #m-ham .b:empty{display:none}
html.lt-m #m-bd{display:block}
html.lt-m #m-drx{display:flex;margin-left:auto;width:44px;height:44px;min-width:44px;padding:0;align-items:center;justify-content:center;font-size:20px;border-radius:50%}
html.lt-m .m-drhd{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-weight:700}
#m-lyrbtn{display:none}
html.lt-m #m-lyrbtn{display:flex;position:absolute;top:11px;left:66px;z-index:6;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:#fff;color:#06275D;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.35)}
html.lt-m.m-lyr #m-lyrbtn{background:#06275D;color:#fff}
html.lt-m #lyr{display:none;left:66px;top:62px;z-index:7;flex-direction:column;gap:0;padding:6px 12px;min-width:190px;max-width:calc(100vw - 86px);max-height:calc(100% - 80px);overflow-y:auto;border-radius:12px;box-shadow:0 6px 24px rgba(0,0,0,.3);box-sizing:border-box;font-size:14px}
html.lt-m.m-lyr #lyr{display:flex}
html.lt-m #lyr label{display:flex;align-items:center;gap:8px;min-height:40px;white-space:nowrap}
html.lt-m #lyr input{width:20px;height:20px;margin:0}
html.lt-m #lt-lasso{display:none!important}
html.lt-m .maplibregl-ctrl-group button{width:44px;height:44px}
html.lt-m .maplibregl-ctrl-top-right{top:env(safe-area-inset-top,0)}
html.lt-m .maplibregl-ctrl-bottom-right,html.lt-m .maplibregl-ctrl-bottom-left{bottom:calc(env(safe-area-inset-bottom) + var(--m-peek-off,0px));transition:bottom .25s}
html.lt-m .devs-panel,html.lt-m #status{bottom:calc(30px + env(safe-area-inset-bottom) + var(--m-peek-off,0px));transition:bottom .25s;max-width:calc(100vw - 30px);box-sizing:border-box}
html.lt-m.m-drawer .tdot-leg{z-index:5}
/* touch targets inside drawer + sheet */
html.lt-m #side button,html.lt-m #side .btn,html.lt-m #m-sheet button,html.lt-m #m-sheet .btn{min-height:44px;padding:8px 12px;font-size:14px;box-sizing:border-box}
html.lt-m #side .tabs button{min-height:44px;font-size:13px}
html.lt-m #side input:not([type=checkbox]):not([type=radio]),html.lt-m #side select,html.lt-m #side textarea,html.lt-m #m-sheet input:not([type=checkbox]):not([type=radio]),html.lt-m #m-sheet select,html.lt-m #m-sheet textarea{min-height:40px;font-size:16px;box-sizing:border-box;max-width:100%}
html.lt-m #side input[type=checkbox],html.lt-m #side input[type=radio]{width:22px;height:22px}
html.lt-m #side .chip{min-height:36px;padding:6px 12px}
html.lt-m #side *,html.lt-m #m-sheet *{max-width:100%}
html.lt-m #side table,html.lt-m #m-sheet table{table-layout:auto;word-break:break-word}
html.lt-m #p-sel>.btns,html.lt-m #p-sel>#sellist{display:none}
html.lt-m .m-selnote{display:block}
/* bottom sheet */
html.lt-m #m-sheet{display:flex;flex-direction:column;position:fixed;left:0;right:0;bottom:0;z-index:30;height:calc(100dvh - 70px - env(safe-area-inset-top));
 background:#fff;border-radius:16px 16px 0 0;box-shadow:0 -4px 24px rgba(0,0,0,.28);transform:translateY(100%);transition:transform .3s cubic-bezier(.2,.8,.2,1);will-change:transform;
 padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);touch-action:none;max-width:100vw;box-sizing:border-box}
@media(min-width:700px){html.lt-m #m-sheet{left:auto;right:12px;width:440px;height:calc(100dvh - 90px)}}
html.lt-m #m-sheet.drag{transition:none}
.m-sh-top{flex:none;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;padding:0 12px 8px;border-bottom:1px solid #e3e9f1}
.m-handle{display:block;width:100%;height:24px;border:0!important;background:none!important;padding:0!important;min-height:24px!important;position:relative}
.m-handle:after{content:"";position:absolute;left:50%;top:9px;width:42px;height:5px;margin-left:-21px;border-radius:3px;background:#c3cbd6}
.m-peek{display:flex;align-items:flex-start;gap:8px}
.m-peek .m-pt{flex:1;min-width:0}
.m-peek .m-pa{font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-peek .m-ps{font-size:13px;color:#445;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-peek .m-x{flex:none;width:44px;height:44px;min-width:44px;padding:0!important;border-radius:50%;border:0;background:#eef2f7;color:#06275D;font-size:20px}
.m-sh-body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;padding:6px 12px calc(16px + env(safe-area-inset-bottom))}
.m-sh-body .it{margin:8px 0}
.m-sh-body .it .acts{flex-wrap:wrap}
/* modals fit phone */
html.lt-m .pd-box{width:100vw;height:100dvh;border-radius:0;padding-top:env(safe-area-inset-top);box-sizing:border-box}
html.lt-m .pd-hd{flex-wrap:wrap;gap:6px;padding:8px 10px}
html.lt-m .pd-hd button{min-height:44px;min-width:44px}
@media(max-width:760px){html.lt-m .pd-body{flex-direction:column;overflow:auto}html.lt-m .pd-ctl{width:auto;border-right:0;max-height:none;overflow:visible}html.lt-m .pd-prev{overflow:visible;padding:8px}}
html.lt-m .ml-box,html.lt-m .vc-box,html.lt-m .au-box,html.lt-m .pf-box{max-width:calc(100vw - 16px);max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));box-sizing:border-box;overflow:auto}
html.lt-m #vc-modal,html.lt-m .ml-ov,html.lt-m #prof,html.lt-m #pd{padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
html.lt-m #vc-modal{padding:calc(8px + env(safe-area-inset-top)) 8px calc(8px + env(safe-area-inset-bottom))}
html.lt-m .vc-body figure{flex-basis:100%}
html.lt-m .vc-x,html.lt-m .ov-x{width:44px;height:44px;min-width:44px}
html.lt-m .ml-box button,html.lt-m .vc-box button,html.lt-m .ltd-ov button{min-height:44px}
@media(max-width:560px){html.lt-m .pf-grid{grid-template-columns:1fr}html.lt-m .pf-grid .w2{grid-column:auto}}
html.lt-m #lt-tools{position:absolute!important;top:64px!important;left:10px!important;right:auto!important;display:flex;flex-direction:column;gap:6px;z-index:6}
html.lt-m #lt-tools button{min-height:44px;min-width:46px;padding:4px 6px;font-size:12px;box-shadow:0 2px 6px rgba(0,0,0,.3)}
html.lt-m #lt-keys{display:none!important}
html.lt-m #lt-tools:not(:has(> :not(#lt-lasso):not(#lt-keys))){display:none!important}
html.lt-m #side .tabs{flex-wrap:wrap}html.lt-m #side .tabs button{flex:1 1 30%;min-width:0}
html.lt-m #side .btn,html.lt-m #m-sheet .btn{display:inline-flex;align-items:center}
/* PWA standalone (home-screen) — keep header clear of notch/status bar on all widths */
@media all and (display-mode:standalone){
 html:not(.lt-m) header{padding-top:calc(6px + env(safe-area-inset-top));padding-left:calc(10px + env(safe-area-inset-left));padding-right:calc(10px + env(safe-area-inset-right))}
 body{background:#1F3864}
 html.lt-m,html.lt-m body{height:100vh!important;min-height:100vh}
 html.lt-m #m-sheet{padding-bottom:env(safe-area-inset-bottom)}
}
@media(max-width:1024px){html.lt-m .maplibregl-ctrl-zoom-in,html.lt-m .maplibregl-ctrl-zoom-out{display:none!important}}

/* bottom-left overlay stack (legend chip, status, devs panel) — never overlap; rides above the bottom sheet peek */
#m-bl{display:none}
html.lt-m #m-bl{display:flex;flex-direction:column-reverse;align-items:flex-start;gap:6px;position:absolute;z-index:5;left:calc(10px + env(safe-area-inset-left));bottom:calc(30px + env(safe-area-inset-bottom) + var(--m-peek-off,0px));max-width:calc(100% - 120px);max-height:calc(100% - 140px);pointer-events:none;transition:bottom .25s}
html.lt-m #m-bl>*{position:static!important;pointer-events:auto;max-width:100%;box-sizing:border-box;margin:0}
html.lt-m #m-bl .devs-panel{min-width:0;max-height:40vh;overflow:auto}
html.lt-m #m-bl .tdot-leg{max-width:min(260px,100%);cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html.lt-m:not(.m-leg) #m-bl .tdot-leg{padding:0 10px;border-radius:16px;border-left:0;min-height:32px;display:flex;align-items:center;font-size:12px;box-shadow:0 2px 6px rgba(0,0,0,.3)}
html.lt-m:not(.m-leg) #m-bl .tdot-leg[style*="none"]{display:none}
html.lt-m:not(.m-leg) #m-bl .tdot-leg>div{display:none}
html.lt-m .tdot-leg>b{display:flex;align-items:center;gap:5px;white-space:nowrap}
html.lt-m .tdot-leg .m-lt{overflow:hidden;text-overflow:ellipsis;max-width:150px}
html.lt-m .tdot-leg .m-ln{font-weight:400;color:#556}
html.lt-m .m-ldots{display:inline-flex}html.lt-m .m-ldots i{width:9px;height:9px;margin:0 0 0 -3px!important}html.lt-m .m-ldots i:first-child{margin-left:0!important}
html.lt-m .m-ldots:empty{display:none}
html.lt-m .tdot-leg .m-lc:after{content:"\25BE";font-size:11px;color:#556}
html.lt-m.m-leg .tdot-leg .m-lc:after{content:"\25B4"}
html.lt-m.m-leg #m-bl .tdot-leg{max-height:calc(100dvh - 300px);overflow:auto;font-size:12px;padding:8px 10px}
html.lt-m.m-leg #m-bl .tdot-leg>div{padding:2px 0}
html.lt-m.m-leg #m-bl .tdot-leg .m-ldots{display:none}
html.lt-m #m-bl #status{max-width:100%}
/* list focus chip: top-center under header, clear of the left buttons and right controls */
html.lt-m .lt-focus{top:calc(64px + env(safe-area-inset-top,0px)*0);max-width:calc(100% - 132px);box-sizing:border-box;font-size:12px;min-height:36px;padding:2px 4px 2px 10px}
html.lt-m .lt-focus span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.lt-m .lt-focus button{flex:none;min-height:32px;white-space:nowrap}
/* hide MapLibre compass/zoom group on mobile (geolocate stays) */
@media(max-width:1024px){html.lt-m .maplibregl-ctrl-group.m-navgrp,html.lt-m .maplibregl-ctrl-group:has(.maplibregl-ctrl-compass){display:none!important}}

/* legend rows: comfortable tap targets when the chip is expanded */
html.lt-m.m-leg #m-bl .tdot-leg>div.tdot-row{padding:5px 2px}
html.lt-m.m-leg #m-bl .tdot-leg .tdot-ax{padding:6px 0 2px;font-size:12px}
html.lt-m.m-leg #m-bl .tdot-leg>b{min-height:30px;cursor:pointer}

/* sewer legend: chip in the bottom-left stack, styled like the Targets chip; expands to the full legend */
html.lt-m #m-bl .sewer-panel{max-width:min(260px,100%);right:auto;bottom:auto;-webkit-tap-highlight-color:transparent}
html.lt-m #m-bl .sewer-panel:not(.open){padding:0 10px;border-radius:16px;border-left:0;min-height:32px;font-size:12px;box-shadow:0 2px 6px rgba(0,0,0,.3)}
html.lt-m #m-bl .sewer-panel>b{min-height:30px;white-space:nowrap;font-size:12px}
html.lt-m #m-bl .sewer-panel .sc:after{font-size:11px;color:#556}
html.lt-m #m-bl .sewer-panel.open{max-height:calc(100dvh - 300px);overflow:auto;font-size:12px;padding:8px 10px}
html.lt-m #m-bl .sewer-panel.open>div,html.lt-m #m-bl .sewer-panel.open>label{padding:4px 0;flex-wrap:wrap}
html.lt-m #m-bl .sewer-panel.open label input{width:18px;height:18px}

/* New developments chip in the mobile stack: same chip look as Targets/Sewer */
html.lt-m #m-bl .devs-panel{max-width:min(260px,100%);-webkit-tap-highlight-color:transparent}
html.lt-m #m-bl .devs-panel:not(.open){min-height:32px;font-size:12px;max-height:none;overflow:visible}
html.lt-m #m-bl .devs-panel>b{min-height:30px;font-size:12px}
html.lt-m #m-bl .devs-panel.open{max-height:calc(100dvh - 300px);font-size:12px;padding:8px 10px}
html.lt-m #m-bl .devs-panel.open label{padding:4px 0}html.lt-m #m-bl .devs-panel.open label input{width:18px;height:18px}
html.lt-m #m-bl .devs-panel .devs-row button{min-height:32px}
