/* CCM v3.4 web map layout */
html,body{margin:0;height:100%;font:14px/1.4 Helvetica,Arial,system-ui,sans-serif;color:#1d1d1b}
#map,#mapB{position:absolute;inset:0 0 0 360px}#mapB{pointer-events:none}
#swipe{position:absolute;top:0;bottom:0;width:4px;margin-left:-2px;background:#fff;box-shadow:0 0 4px #0008;cursor:ew-resize;z-index:5}
#swipe span{position:absolute;top:12px;padding:2px 6px;background:#111c;color:#fff;font-size:12px}#swipe .l{right:8px}#swipe .r{left:8px}
#panel{position:absolute;top:0;left:0;bottom:0;width:360px;overflow-y:auto;background:#fbfaf7;border-right:1px solid #ddd;box-sizing:border-box;padding:12px 14px;z-index:6}
#panel h1{font-size:17px;margin:0}#panel header p{margin:4px 0 10px;color:#555;font-size:12px}
.tools{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;font-size:12px}
fieldset{border:1px solid #ddd;margin:0 0 10px;padding:6px 10px;font-size:12px}legend{font-weight:600}fieldset label{display:block}
#compare select{max-width:100%;font-size:12px;margin:2px 0}#compare .row{display:flex;gap:6px;align-items:center;margin-top:4px}.note{color:#8a4b00;margin:6px 0 0}
summary{cursor:pointer;font-weight:600;padding:3px 0}details{margin-left:6px}
.lyr{display:grid;grid-template-columns:1fr 70px 22px;align-items:center;gap:4px;padding:2px 0 2px 10px;font-size:13px}
.lyr input[type=range]{width:70px}.lyr .i{width:20px;height:20px;border-radius:50%;border:1px solid #999;background:#fff;cursor:pointer}
#legend h4{margin:12px 0 4px;font-size:13px}#legend ul{list-style:none;margin:0;padding:0;max-height:260px;overflow-y:auto;font-size:12px}
#legend li{display:flex;gap:6px;align-items:center}#legend i{flex:0 0 14px;height:14px;border:1px solid #0003}
.ramp{height:12px;border:1px solid #0003}.rl{display:flex;justify-content:space-between;font-size:11px}
footer{margin-top:16px;font-size:11px;color:#555;border-top:1px solid #ddd;padding-top:8px}
.site{font:700 11px Helvetica,Arial,system-ui;background:#ffffffd9;padding:1px 4px;border:1px solid #111}
#info{position:absolute;right:12px;top:12px;width:min(420px,90vw);max-height:80vh;overflow-y:auto;background:#fff;border:1px solid #ccc;padding:10px 14px;z-index:7;font-size:13px}
#info .g{color:#666;font-size:12px}#infox{float:right;border:0;background:none;font-size:20px}
table.id th{text-align:left;padding-right:8px;font-weight:600}
#ptoggle{display:none}
@media (max-width:760px){#map,#mapB{inset:0}#panel{top:auto;width:100%;height:55vh;transform:translateY(100%);transition:transform .2s}
body.panel-open #panel{transform:none}#ptoggle{display:block;position:absolute;left:10px;bottom:34px;z-index:8;padding:8px 12px}}
@media print{#panel,#ptoggle,#info{display:none}#map{inset:0}}