body{margin:0}#m{width:100vw;height:100vh}#ft button,#ft select{font-size:14px;padding:4px 6px;margin:2px}#ft b.big{font-size:18px}
.k{display:inline-block;width:22px;height:0;vertical-align:middle;margin-right:4px}#ly{padding:0 10px 4px}#ly label{display:flex;align-items:center;gap:8px;min-height:38px;cursor:pointer}#ly input{width:20px;height:20px}#ly summary{min-height:38px;line-height:38px;cursor:pointer}

.ev3{color:#e00}.ev2{color:#f08c00}.ev1{color:#b8a000}.ev0{color:#555}
#mm{display:flex;overflow:hidden}#mm button{font:600 14px sans-serif;min-width:58px;min-height:44px;border:0;background:none;cursor:pointer}#mm button.on{background:#000;color:#fff}
body.dk .pnl{background:#15181dee;color:#f3f4f6;border-color:#555}body.dk #mm button{color:#ddd}body.dk #mm button.on{background:#ff7a1a;color:#000}body.dk #ft select,body.dk #ft button{background:#222;color:#eee;border:1px solid #555}
body.nt .pnl{background:#120000ee;color:#e8b0a8;border-color:#5a3030}body.nt #mm button{color:#c33}body.nt #mm button.on{background:#7a0000;color:#ffb0a0}body.nt #ft select,body.nt #ft button{background:#200;color:#f55;border:1px solid #500}body.nt 
.maplibregl-popup-content{font:14px/1.35 sans-serif;padding:10px 12px;border-radius:10px;min-width:220px}body.dk .maplibregl-popup-content{background:#15181d;color:#f3f4f6}body.dk .maplibregl-popup-tip{border-top-color:#15181d!important;border-bottom-color:#15181d!important}
body.nt .maplibregl-popup-content{background:#120000;color:#ff4a3a}.up b{font-size:16px}.up .k{color:#555;width:auto;height:auto;display:inline;margin:0}.up .act{display:flex;gap:6px;margin-top:8px}.up .act button{flex:1;min-height:44px;font:600 13px sans-serif;border-radius:8px;border:1px solid #888;background:none;color:inherit;cursor:pointer}
.fr{color:#1a9b4b}.ag{color:#d08a00}.st{color:#d33}.cp{cursor:copy;text-decoration:underline dotted}
/* popup manager */
.pm-pop .maplibregl-popup-content{padding:0}.pm-card{position:relative;padding:10px 52px 10px 12px}
.pm-x{position:absolute;top:2px;right:2px;width:44px;height:44px;border:0;border-radius:10px;background:none;color:inherit;font:400 30px/1 sans-serif;cursor:pointer}.pm-x:hover{background:#8883}
.pm-tip .maplibregl-popup-content{pointer-events:none;padding:6px 10px;min-width:0}
.pm-list{display:flex;flex-direction:column;gap:6px;margin-top:8px}.pm-list button{min-height:44px;text-align:left;font:600 14px sans-serif;border-radius:8px;border:1px solid #8888;background:none;color:inherit;cursor:pointer;padding:0 10px}
.pm-kind{display:inline-block;min-width:58px;font:600 12px sans-serif;text-transform:uppercase;color:#555}
#pm-sheet{position:fixed;left:0;right:0;bottom:0;max-height:45vh;overflow:auto;background:#fff;color:#111;border-radius:16px 16px 0 0;box-shadow:0 -4px 20px #0005;z-index:20;transform:translateY(110%);transition:transform .2s;font:15px/1.4 sans-serif}
#pm-sheet.open{transform:none}.pm-grab{width:44px;height:5px;border-radius:3px;background:#9998;margin:8px auto 0}
body.dk #pm-sheet{background:#15181d;color:#f3f4f6}body.nt #pm-sheet{background:#120000;color:#ff4a3a}
.evb{display:inline-block;padding:2px 8px;border-radius:6px;font-weight:700}.evb3{background:#c00000;color:#fff}.evb2{background:#f08c00;color:#000}.evb1{background:#ffd500;color:#000}.evb0{background:#666;color:#fff}
.evn{max-height:30vh;overflow:auto;white-space:pre-line;margin-top:6px;padding:8px;border-radius:8px;background:#0000000d;color:inherit}body.dk .evn{background:#ffffff12;color:#e8e8e8}
body.dk .up .k{color:#a8b0bb}body.nt .up .k{color:#c33}

/* overlay layout: slots in a flowing grid, safe-area aware; nothing absolutely positioned against anything else */
html,body{height:100%;overflow:hidden}#m{position:fixed;inset:0;width:auto;height:auto}
#ov{position:fixed;inset:0;display:flex;flex-direction:column;justify-content:space-between;gap:8px;pointer-events:none;z-index:5;
 padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
#top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;min-height:0}
#tl,#tr{display:flex;flex-direction:column;gap:6px;min-width:0;max-height:calc(100vh - 140px)}#tl{flex:0 1 400px}#tr{flex:0 0 auto;align-items:flex-end}
#bot{display:flex;align-items:flex-end;gap:8px;padding-right:118px;min-height:0}
.pnl{pointer-events:auto;background:#fffe;color:#111;border:2px solid #000;border-radius:10px;font:12px sans-serif;box-sizing:border-box;max-width:100%}
details.pnl>summary{min-height:40px;display:flex;align-items:center;gap:6px;padding:0 10px;cursor:pointer;font:600 13px sans-serif;list-style:none}
details.pnl>summary::-webkit-details-marker{display:none}details.pnl>summary::after{content:'▾';margin-left:auto;opacity:.6}details.pnl:not([open])>summary::after{content:'▸'}
#sd #s{padding:0 10px 8px;overflow:auto;max-height:30vh}.warn{color:#b00}body.dk .warn{color:#ff8080}
#lyd{overflow:auto;min-height:0}#ftd{flex:0 1 420px;min-width:0}#ft{padding:0 10px 8px;font:13px sans-serif}#ft button,#ft select{font-size:14px;padding:4px 6px;margin:2px;min-height:36px;max-width:100%}
#status{background:#5a0d0d;color:#fff;border-color:#5a0d0d}#status summary{font-size:12px}#stlist{padding:0 10px 8px;font:12px/1.35 sans-serif}#stlist div+div{margin-top:4px}
body.nt #status{background:#200;color:#ff4a3a;border-color:#5a0000}
body.sheet #bot{visibility:hidden}
.maplibregl-ctrl-bottom-right{padding-bottom:env(safe-area-inset-bottom)}
@media (max-width:600px){#tl{flex:1 1 0}#mm button{min-width:44px;font-size:12px}#ftd{flex:1 1 auto}#bot{padding-right:110px}}
body.dk .pnl a{color:#8cc4ff}body.nt .pnl a{color:#ff7a6a}
.pm-list button{display:flex;align-items:center;gap:8px}.pm-sub{margin-left:auto;font:400 12px sans-serif;opacity:.75}
.lyh{font:600 12px sans-serif;color:#555;margin-top:6px}.lys{font:400 12px sans-serif;opacity:.8;padding:0 0 4px 28px;max-width:220px}#wx-sl input{width:100%;min-height:44px}
#top{flex:1 1 0;min-height:0}#bot{flex:0 0 auto}#tl,#tr{max-height:100%}#tl{overflow:auto}#tr{min-height:0}#lyd{flex:0 1 auto}
/* search (left slot, in flow above the title panel; results are part of the panel so nothing overlaps) */
#srch{flex:0 0 auto;display:flex;flex-direction:column;min-height:0;max-height:min(62vh,520px);border-width:2px}
.sr-in{display:flex;align-items:center;gap:6px;padding:0 4px 0 10px;min-height:44px}.sr-in svg{flex:0 0 auto;opacity:.7}
#sq{flex:1;min-width:0;height:44px;border:0;background:none;color:inherit;font:500 16px sans-serif;outline:none}#sq::-webkit-search-cancel-button{display:none}#sq::placeholder{color:#555}
#sx{width:44px;height:44px;border:0;background:none;color:inherit;font:400 26px/1 sans-serif;cursor:pointer;border-radius:8px}#sx:hover{background:#8883}
#srch:focus-within{box-shadow:0 0 0 3px #ff7a1a88}
#sres{overflow:auto;border-top:1px solid #8885;padding:2px 4px 6px;min-height:0;overscroll-behavior:contain}
.sr-h{font:700 12px sans-serif;text-transform:uppercase;letter-spacing:.04em;color:#555;padding:8px 8px 2px}
.sr-it{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:4px 8px;border:0;border-radius:8px;background:none;color:inherit;text-align:left;cursor:pointer;font:14px sans-serif}
.sr-it:hover,.sr-it.act{background:#ff7a1a26}.sr-it.act{outline:2px solid #ff7a1a}
.sr-ic{flex:0 0 40px;height:28px;border-radius:7px;color:#fff;font:700 12px/28px sans-serif;text-align:center;letter-spacing:.02em}
.sr-t{flex:1;min-width:0;display:flex;flex-direction:column}.sr-t b{font:600 14px sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sr-t small{font:12px sans-serif;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-d{font:12px sans-serif;opacity:.65;white-space:nowrap}.sr-none{padding:12px 8px;font:13px sans-serif;opacity:.8}
body.dk #sq::placeholder{color:#9aa3ad}body.nt #sq::placeholder{color:#a33}body.nt .sr-ic{filter:saturate(.3) brightness(.7)}body.nt #srch:focus-within{box-shadow:0 0 0 3px #7a0000}
body.nt .sr-it:hover,body.nt .sr-it.act{background:#5a000055;outline-color:#a00}
@media (max-width:600px){#srch{max-height:55vh}}
/* directions panel (bottom slot, flow layout; wraps above Field test so nothing overlaps) */
#bot{flex-wrap:wrap-reverse}
#rtd{flex:1 1 340px;min-width:0;max-width:520px;display:flex;flex-direction:column;max-height:min(48vh,460px)}#rtd>summary{flex:0 0 auto}
#rt{padding:0 10px 8px;font:13px/1.35 sans-serif;overflow:auto;min-height:0}
#rt button,#rt select{font:600 13px sans-serif;min-height:36px;padding:2px 8px;margin:2px;border-radius:8px;border:1px solid #bbb;background:#fff;color:#111;cursor:pointer}
.rt-opts{display:flex;gap:6px;margin:6px 0;overflow-x:auto}#rt .rt-o{flex:1 1 0;text-align:left;min-width:96px;font-weight:400;padding:4px 8px}#rt .rt-o.on{border:2px solid #ff6a00;background:#fff3e8}
.rt-steps{margin:4px 0;padding-left:22px}.rt-steps li{min-height:44px;box-sizing:border-box;padding:11px 0;cursor:pointer;border-bottom:1px solid #8883}.rt-steps li:hover{background:#ff7a1a1a}
.rt-w{margin:3px 0;padding:3px 6px;border-radius:6px;background:#fff3cd;color:#5a4300}.rt-w.danger{background:#fde2e2;color:#8b0000}.rt-msg{margin:6px 0;font-style:italic}
.rt-g{background:#333;color:#fff;border-radius:4px;padding:0 4px;font-size:12px}
.up .act button.pri{background:#a84300;color:#fff;border-color:#a84300;min-height:48px;font-size:16px}
body.dk #rt button,body.dk #rt select{background:#222;color:#eee;border-color:#555}body.dk #rt .rt-o.on{background:#3a2210}body.dk .rt-w{background:#4a3a00;color:#ffe08a}body.dk .rt-w.danger{background:#5a1010;color:#ffb0b0}
body.nt #rt button,body.nt #rt select{background:#200;color:#ff4a3a;border-color:#5a0000}body.nt .rt-w{background:#300;color:#ff6a5a}body.nt .up .act button.pri{background:#7a0000;border-color:#7a0000;color:#ffb0a0}
@media (max-width:600px){#rtd{flex:1 1 100%;max-width:none;max-height:none}}
/* narrow top bar: search uses the row; style buttons move into Layers */
#searchrow{display:flex;align-items:stretch;gap:6px;min-width:0}
#searchrow #srch{flex:1 1 auto;min-width:0}
#mbtn{display:none;align-items:center;justify-content:center;min-width:76px;min-height:48px;padding:0 12px;font:700 15px sans-serif;cursor:pointer}
#mbtn[hidden]{display:none}
.feedlink{margin-left:8px;font:600 13px sans-serif}
@media (max-width:412px){
 #top{flex-direction:column}
 #tl{flex:1 1 auto;width:100%;max-width:none}
 #tr{width:100%;align-items:stretch}
 #tr>#mm{display:none}
 #mbtn{display:flex}
 #lyd{width:100%}
 #ly #mm{display:flex;width:100%}
 #mm button{flex:1}
 #sq{font-size:16px}
}
/* one bottom sheet: peek / half / full. Field test stays inside it and is hidden unless ?dev=1 */
#bot{display:block;padding-right:0;pointer-events:none}
#dock{pointer-events:auto;display:flex;flex-direction:column;width:100%;max-width:640px;margin:0 auto;background:#fffe;color:#111;border:2px solid #000;border-radius:16px 16px 0 0;box-shadow:0 -8px 28px #0003;overflow:hidden}
#dock[hidden]{display:none}
#dock[data-snap=peek]{height:76px}
#dock[data-snap=half]{height:min(48vh,460px)}
#dock[data-snap=full]{height:min(86vh,760px)}
#dgrab{flex:0 0 28px;border:0;background:transparent;cursor:grab;display:flex;align-items:center;justify-content:center;min-height:28px;touch-action:none}
#dgrab i{width:44px;height:5px;border-radius:3px;background:#0004;display:block}
#dbody{overflow:auto;min-height:0;flex:1;overscroll-behavior:contain}
#dock .pnl{border:0;background:transparent;box-shadow:none;width:100%;max-width:none}
#dock #rtd,#dock #ftd{max-height:none}
.up{overflow-wrap:anywhere}
.up .act{flex-wrap:wrap}
.up-more{margin-top:8px}
.up-more summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:650}
.up-more .cp{display:inline-flex;align-items:center;min-height:44px;margin:4px 6px 0 0;padding:0 10px;border-radius:8px;border:1px solid #888;background:none;color:inherit;font:600 14px sans-serif;cursor:pointer}
body.dk #dock{background:#15181d;color:#f3f4f6;border-color:#555}
body.dk #dgrab i{background:#fff4}
body.nt #dock{background:#140c0b;color:#f0d0c8;border-color:#5a3030}
body.nt #m{filter:none}
.rk{color:#555}body.dk .rk{color:#a8b0bb}body.nt .rk{color:#a33}
/* secondary text: #555 on light, light grey on dark, warm on night (nt also carries dk) */
body.dk .lyh,body.dk .pm-kind,body.dk .sr-h,body.dk .ev0{color:#a8b0bb}body.nt .lyh,body.nt .pm-kind,body.nt .sr-h{color:#c09484}
.cp-set{margin-top:6px}.cp-set .k{display:block}.up-more .cp-set .cp{width:100%;justify-content:flex-start;gap:8px;font:500 14px ui-monospace,Menlo,Consolas,monospace}.cp-set .cp b{font:700 12px sans-serif;min-width:70px}#rt .rt-ft{line-height:1.9}
