/* Standard map-page control panel — the single source of the layer
   box's look, shared by /map/2dmap.html and /caribou/map (and any
   future page on the 2-D stack).  Pages provide the markup (title,
   basemap buttons, layer mount, sub-rows, swatches, note); this file
   provides the vocabulary. */

#controls{position:absolute;top:10px;right:10px;background:#fff;
          padding:10px 12px;box-shadow:0 1px 4px #0006;border-radius:4px;
          z-index:10;font-size:12px;max-width:280px}
#controls b{font-size:13px}
/* Collapsible: the panel is a <details open> whose <summary> is the
   hamburger + title header; closing it hides everything else. */
#controls > summary{display:flex;align-items:center;gap:8px;
                    cursor:pointer;list-style:none;user-select:none}
#controls > summary::-webkit-details-marker{display:none}
#controls .burger{padding:1px 7px;border:1px solid #aaa;
                  border-radius:4px;background:#fff;font-size:14px;
                  line-height:1.3}
#controls > summary:hover .burger{background:#f4f4f4}
.hd{font-size:11px;color:#666;margin:8px 0 4px}
#basemap-btns{display:flex;gap:4px}
#basemap-btns .legend-btn{flex:1;text-align:center}
#layersec{margin:8px 0 0;border-top:1px solid #ddd;padding-top:2px}
#layer-buttons{display:flex;flex-direction:column;gap:4px}
.legend-btn{padding:5px 9px;border:1px solid #aaa;border-radius:4px;
            background:#fff;color:#222;cursor:pointer;font-size:12px;
            text-align:left;touch-action:manipulation}
.legend-btn:hover{background:#f4f4f4}
.legend-btn.active{background:#006893;color:#fff;border-color:#004f70}
/* Sub-controls tucked under a layer button, shown while it is on */
.sub-row{display:none;align-items:center;gap:6px;margin:0 0 2px 6px;
         font-size:11px;color:#444}
#layer-buttons .legend-btn.active + .sub-row{display:flex}
.legend-btn.mini{padding:2px 8px;font-size:11px;flex:0 0 auto}
/* Polygon swatch legend — shown only while the Proposed Mine layer is
   on (telkwa-layers.js toggles body.polygons-on, same as the 3D map) */
.poly-legend-rows{display:none;margin:2px 0 2px 6px;font-size:11px}
body.polygons-on .poly-legend-rows{display:block}
.poly-legend-rows .row{display:flex;align-items:center;gap:6px;
                       margin:2px 0}
.poly-legend-rows .sw{width:12px;height:12px;border:2px solid;
                      border-radius:2px;flex:0 0 12px}
.note{margin-top:8px;font-size:10px;color:#888;line-height:1.4}
.note a{color:#006893}