/* ================================================
   WA GMU Explorer — styles
   1. theme vars  2. layout  3. panel controls
   4. legends/pins  5. mobile (max-width:800px)
   ================================================ */
 :root{--bg:#f0f0f0;--panel:#ffffff;--card:#ffffff;--ink:#1a1a1a;
   --acc:#ffa836;--acc2:#1a1a1a;--line:#e6e6e6;--mut:#666666;
   --mono:'Atkinson Hyperlegible Mono',ui-monospace,'Cascadia Mono',
   Consolas,monospace}
 html,body{margin:0;height:100%;font-family:var(--mono);color:var(--ink)}
 #hdr{position:absolute;top:0;left:0;right:0;height:50px;z-index:1100;
   background:#ffffff;color:#1a1a1a;border-bottom:1px solid var(--line);
   display:flex;align-items:baseline;gap:14px;padding:0 18px;
   box-sizing:border-box;box-shadow:0 2px 8px #0004}
 .brand{font-size:17px;font-weight:700;letter-spacing:.4px;
   line-height:50px}
 .brand::before{content:"";display:inline-block;width:10px;height:10px;
   border-radius:50%;background:var(--acc);margin-right:9px}
 .sub{font-size:12px;opacity:.75}
 #map,#chart{position:absolute;inset:50px 350px 0 0;background:#eef0ea}
 #chart{display:none;overflow:hidden}
 #panel{position:absolute;top:50px;right:0;width:350px;
   height:calc(100% - 50px);
   overflow-y:auto;background:var(--panel);border-left:1px solid var(--line);
   box-sizing:border-box;padding:14px;font-size:13px}
 h2{margin:0 0 6px;font-size:17px;letter-spacing:.3px}
 h3{margin:.9em 0 .35em;font-size:11px;text-transform:uppercase;
   letter-spacing:1.2px;color:#666;font-weight:700}
 .seg{display:flex;gap:0;margin:6px 0 12px;border:1px solid var(--line);
   border-radius:999px;overflow:hidden;background:#f0f0f0;padding:3px}
 .seg button{flex:1;border:0;background:transparent;color:#666;
   padding:7px 0;font-size:12.5px;font-weight:700;cursor:pointer;
   border-radius:999px;font-family:var(--mono)}
 .seg button.on{background:var(--acc);color:#1a1a1a}
 select{width:100%;padding:8px 9px;border:1px solid var(--line);
   border-radius:10px;background:#fff;font-size:12.5px;color:var(--ink);
   font-family:var(--mono)}
 label{font-size:11px;color:#666;display:block;margin-top:10px;
   letter-spacing:.3px}
 input[type=range]{width:100%;accent-color:var(--acc);height:22px}
 .fval{float:right;font-weight:700;color:#1a1a1a;background:var(--acc);
   border-radius:999px;padding:0 8px;font-size:10.5px;line-height:16px}
 .card,.cmpbox{background:#fff;border:1px solid var(--line);
   border-radius:14px;padding:12px 14px;margin-top:10px;
   box-shadow:0 2px 8px #0000000f}
 .row{display:flex;justify-content:space-between;padding:2px 0;
   border-bottom:1px dashed #ece7da}
 .row:last-of-type{border-bottom:0} .row b{font-weight:650}
 .legend{position:absolute;bottom:16px;left:12px;max-width:230px;background:#fffffff2;color:var(--ink);
   padding:9px 12px;border-radius:10px;box-shadow:0 1px 5px #0003;
   font-size:12px;z-index:1000}
 .lg-item{display:flex;align-items:center;gap:6px;margin:1px 0}
 .sw{width:13px;height:13px;border:1px solid #999;border-radius:3px}
 .pill{display:inline-block;background:var(--acc);color:#1a1a1a;
   border-radius:999px;padding:2px 10px;margin:2px 3px 2px 0;
   font-size:10.5px;font-weight:700}
 table.cmp{border-collapse:collapse;width:100%;font-size:11px}
 table.cmp td,table.cmp th{border:1px solid #e6e6e6;padding:3px 5px;
   text-align:right}
 table.cmp th{background:#f0f0f0} table.cmp tr:nth-child(even){background:#fafafa}
 button.btn{border:0;background:var(--acc);color:#1a1a1a;
   border-radius:999px;padding:6px 14px;font-size:12px;font-weight:700;
   cursor:pointer;margin-top:8px;font-family:var(--mono)}
 button.btn:hover{filter:brightness(0.93)}
 body.lowzoom .gmu-label{display:none}
 .gmu-label{background:none;border:none;box-shadow:none;
   font-family:var(--mono);font-weight:700;font-size:12px;color:#1c2416;
   text-shadow:0 0 1px #fff,0 0 1px #fff,0 0 2px #fff;
   pointer-events:none}
 .gmu-label::before{display:none}
 .muted{color:var(--mut)}
 #locdd{display:none;position:absolute;top:calc(100% + 3px);left:0;right:0;
   background:#fff;border:1px solid var(--line);border-radius:10px;
   box-shadow:0 6px 18px #00000022;z-index:60;overflow:hidden;
   max-height:220px;overflow-y:auto}
 .locitem{padding:9px 12px;font-size:13px;cursor:pointer;
   border-bottom:1px solid #f2f0ea}
 .locitem:last-child{border-bottom:0}
 .locitem:hover{background:#fff4e4}
 .sprow{display:flex;gap:6px;margin:4px 0 2px}
 .chk{flex:1;display:flex;align-items:center;justify-content:center;
   gap:5px;background:#fff;border:1px solid var(--line);
   border-radius:999px;padding:7px 4px;font-size:11.5px;cursor:pointer;
   margin-top:0}
 .chk input{accent-color:var(--acc);margin:0}
 .chk:has(input:checked){border-color:var(--acc);
   background:#fff7ec;font-weight:700}
 #panel{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
   touch-action:pan-y}
 #landtoggle{display:none;position:absolute;left:12px;top:60px;z-index:1100;
   border:1px solid var(--line);background:#fff;color:#1a1a1a;
   font-family:var(--mono);font-weight:700;font-size:12px;padding:7px 12px;
   border-radius:999px;box-shadow:0 1px 4px #0002;cursor:pointer}
 #landtoggle.on{background:var(--acc);border-color:var(--acc)}
 @media(max-width:800px){#landtoggle{display:block;top:48px;left:8px;padding:6px 11px}}
 #fab{display:none;position:fixed;right:14px;bottom:16px;z-index:1150;
   border:0;background:var(--acc);color:#1a1a1a;font-family:var(--mono);
   font-weight:700;font-size:13px;padding:12px 18px;border-radius:999px;
   box-shadow:0 4px 14px #00000040;cursor:pointer}
 #grabhandle{display:none;position:relative;height:26px;
   margin:0 -14px;width:calc(100% + 28px);background:#fff;
   touch-action:none;cursor:grab;
   box-shadow:0 6px 8px -6px #00000022}
 #grabhandle::before{content:"";position:absolute;left:50%;top:8px;
   transform:translateX(-50%);width:44px;height:5px;border-radius:3px;
   background:#d0d0d0}
 #sheetclose{display:none;position:absolute;top:10px;right:14px;
   width:34px;height:34px;border-radius:50%;background:var(--acc);
   color:#1a1a1a;font-size:17px;font-weight:700;align-items:center;
   justify-content:center;cursor:pointer;z-index:6;
   box-shadow:0 2px 6px #00000030}
 #browse h3{background:#faf9f5;border-radius:8px;padding:6px 10px;
   margin:.7em 0 .5em;border:1px solid var(--line)}
 #browse h3:first-child{margin-top:0}
 details#filt summary{cursor:pointer;font-size:11px;font-weight:700;
   text-transform:uppercase;letter-spacing:1.2px;color:#666;
   margin:.9em 0 .35em;list-style:none;display:flex;align-items:center}
 details#filt summary::before{content:"▸";margin-right:6px;
   transition:transform .15s;color:var(--acc)}
 details#filt[open] summary::before{transform:rotate(90deg)}
 .cardown{margin:4px 0}
 .cardown .lg-item{display:inline-flex;margin-right:8px;font-size:11px}
 .cardown b{display:block;font-size:11px;margin-bottom:2px}
 .mini{display:flex;align-items:center;gap:8px;margin:3px 0}
 .minilab{font-size:10px;color:#666;width:52px;flex:none}
 .miniend{font-size:11px;font-weight:700;width:52px;flex:none;
   text-align:right}
 .pinbtn{background:#fff;border:1px solid var(--line);
   border-radius:10px;padding:3px 5px 1px;margin:2px;cursor:pointer}
 .pinbtn svg{width:20px;height:auto}
 .pinpop .pinbtn{padding:5px 7px 3px;margin:3px}
 .pinpop .pinbtn svg{width:32px;height:auto}
 .pinpop{font-size:13.5px}
 .pinpop input{font-size:13px;padding:6px 8px}
 #pinlist svg{width:15px;height:auto;vertical-align:-4px}
 .pinpop b{font-family:var(--mono)}
 .pinbtn.armed{border-color:var(--acc);
   box-shadow:0 0 0 2px #ffa83666}
 .pinicon{filter:drop-shadow(0 1px 2px #000c);font-size:20px;
   text-align:center;line-height:26px}
 .pinpopup .leaflet-popup-content-wrapper{background:#fff;
   color:var(--ink);border-radius:10px;border:1px solid var(--line)}
 @media(max-width:800px){.pinpopup .leaflet-popup-content-wrapper{
   max-width:80vw}}
 .pinpopup .leaflet-popup-tip{background:#fff}
 .pinpop input{background:#fff;border:1px solid var(--line);
   border-radius:6px;color:var(--ink);padding:4px 6px;font-size:12px}
 svg text.blab{font:700 9px var(--mono);paint-order:stroke;fill:#26301f;
   stroke:#fff;stroke-width:2.6px}
 svg .axis{stroke:#c6c2b2;stroke-width:1} svg text.ax{font:11px var(--mono);
   fill:#67705c}
 input[type=range]{-webkit-appearance:none;background:transparent}
 input[type=range]::-webkit-slider-runnable-track{height:5px;
   background:linear-gradient(90deg,#e6e6e6,var(--acc));border-radius:3px}
 input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;
   width:16px;height:16px;border-radius:50%;background:#1a1a1a;
   border:3px solid var(--acc);margin-top:-6px;cursor:pointer;
   box-shadow:0 1px 3px #0003}
 input[type=range]::-moz-range-track{height:5px;background:#e6e6e6;
   border-radius:3px}
 input[type=range]::-moz-range-thumb{width:12px;height:12px;
   border-radius:50%;background:#1a1a1a;border:3px solid var(--acc)}
 select:focus,button:focus{outline:2px solid var(--acc);
   outline-offset:1px}
 .legend{backdrop-filter:blur(3px)}
 /* ---------- 5. MOBILE ---------- */
 @media(max-width:800px){
   #hdr{height:38px;padding:0 12px}
   .brand{font-size:13px;line-height:38px}
   .brand::before{width:8px;height:8px;margin-right:7px}
   .sub{display:none}
   #map,#chart{inset:38px 0 0 0;transition:bottom .28s ease}
   /* sheet open: map occupies only the visible top 60% */
   body.panelopen #map,body.panelopen #chart{bottom:40%}
   #panel{position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;
     height:40%;border-left:0;border-top:0;padding:0 14px 14px;
     border-radius:18px 18px 0 0;box-shadow:0 -10px 28px #00000038;
     transform:translateY(105%);transition:transform .28s ease;
     z-index:1200}
   body.panelopen #panel{transform:translateY(0)}
   body.panelopen #fab{display:none}
   #fab{display:block}
   #sheetclose{display:none}
   body.panelopen #sheetclose{display:flex;position:fixed;top:auto;
     bottom:calc(40% + 12px);right:14px;left:auto;
     width:44px;height:44px;font-size:20px;z-index:1300;
     box-shadow:0 4px 14px #00000045}
   #grabhandle{display:block;position:sticky;top:0;z-index:15;
     background:#fff;border-radius:18px 18px 0 0}
   #panel h2{display:none}
   .seg{margin:2px 0 8px}
   .seg button{padding:8px 0;font-size:12px}
   /* 16px+ form fields: below that, iOS auto-zooms the page onto a
      focused input and leaves it stuck-zoomed afterward */
   select{padding:8px 9px;font-size:16px;border-radius:12px}
   #locq{font-size:16px !important}
   .locitem{padding:11px 12px;font-size:15px}
   label{margin-top:8px;font-size:10.5px}
   input[type=range]{height:40px}
   input[type=range]::-webkit-slider-runnable-track{height:8px}
   input[type=range]::-webkit-slider-thumb{width:30px;height:30px;
     margin-top:-11px}
   input[type=range]::-moz-range-track{height:8px}
   input[type=range]::-moz-range-thumb{width:26px;height:26px}
   label{margin-top:14px;font-size:12px}
   .fval{font-size:12px;line-height:20px;padding:0 10px}
   .card,.cmpbox{padding:10px 12px;border-radius:12px;margin-top:8px}
   button.btn{padding:8px 14px;font-size:12px}
   .pinbtn{padding:5px 7px 2px} .pinbtn svg{width:22px}
   .pinpop{font-size:12px;max-width:74vw}
   .pinpop .pinbtn{padding:3px 4px 1px;margin:2px}
   .pinpop .pinbtn svg{width:24px}
   .pinpop input{font-size:12px;padding:4px 6px}
   .pinpopup .leaflet-popup-content-wrapper{max-width:78vw}
   .leaflet-popup-content{margin:8px 10px}
   .cmpbox{overflow-x:auto}
   /* map chrome: tiny, out of the way */
   .legend{bottom:12px;left:8px;max-width:150px;transition:bottom .28s}
   body.panelopen .legend{bottom:calc(40% + 10px)}
   .legend{
     padding:5px 8px;font-size:10px;border-radius:8px}
   .legend div:first-child{white-space:nowrap;overflow:hidden;
     text-overflow:ellipsis;max-width:140px}
   #ownlegend{display:none}
   .leaflet-control-attribution{font-size:8px;opacity:.75}
   .leaflet-control-zoom{transform:scale(.85);transform-origin:top left}
   .gmu-label{font-size:9.5px}
 }

/* ---- data loading overlay ---- */
#loading{position:fixed;inset:0;background:#faf9f5;z-index:9000;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--mono);gap:12px}
#loading .dot{width:14px;height:14px;border-radius:50%;background:var(--acc);animation:lpulse 1s infinite alternate}
@keyframes lpulse{from{transform:scale(.7);opacity:.5}to{transform:scale(1.15);opacity:1}}