/* v2.6.3: shared header controls, panel toggles and a compact scale key. */
:root{--header-height:82px}
.topbar{height:var(--header-height);gap:26px}
.topbar .brand{min-width:240px}
.topbar .search-wrap{min-width:180px}
.top-actions{height:100%;padding-top:15px;align-items:flex-start;gap:17px}
.top-actions .guide-btn{height:40px;margin:0;padding:0 4px;border-radius:6px}
.header-layers.active{background:var(--soft)}
.top-actions .theme-toggle{margin-top:2px}
.top-actions .coverage-control{align-self:flex-start}
.coverage-alert{z-index:2}
.workspace{height:calc(100dvh - var(--header-height))}
.inline-legend{display:flex;align-items:center;gap:10px;white-space:nowrap;height:17px;margin-top:2px;font-size:12px;line-height:17px;color:#254e48;text-shadow:0 1px 2px #fff,0 -1px 2px #fff;pointer-events:none}
.inline-legend[hidden],.inline-legend .legend-item[hidden]{display:none}
.inline-legend .legend-item{display:inline-flex;flex:none;gap:4px;line-height:17px;font-size:12px}
.inline-legend .swatch{width:8px;height:8px;border-radius:2px}
.swatch.outline,.swatch.dashed{background:transparent;border:2px solid var(--color)}
.swatch.dashed{border-style:dashed}
.layer-key{display:flex;flex-wrap:wrap;gap:8px 15px;margin-top:10px}
.leaflet-control-scale{display:block!important;margin-bottom:32px!important;pointer-events:none}
[data-theme=dark] .inline-legend{color:#dae7de;text-shadow:0 1px 2px #10201a,0 -1px 2px #10201a}
@media(max-width:1150px){.topbar{gap:18px}.topbar .brand{min-width:215px}.top-actions{gap:12px}}
@media(max-width:800px){
 :root{--header-height:128px}
 .topbar{grid-template-rows:54px 43px;gap:8px;padding:9px 15px 12px}
 .topbar .brand{min-width:0}
 .topbar .top-actions{grid-column:2;grid-row:1;height:54px;padding-top:0;gap:12px}
 .top-actions .guide-btn{height:34px;font-size:12px}
 .top-actions .theme-toggle{margin-top:0}
 .coverage-opacity{height:22px}
 .coverage-alert{left:auto;right:0}
 .topbar .search-wrap{grid-row:2;grid-column:1/3;min-width:0}
 .workspace{height:calc(100dvh - var(--header-height));padding-bottom:60px}
 .inline-legend{gap:7px}
 .leaflet-control-scale{margin-left:10px!important;margin-bottom:66px!important}
}
@media(max-width:560px){
 :root{--header-height:160px}
 .topbar{grid-template-columns:1fr;grid-template-rows:32px 50px 44px;gap:8px;padding:9px 15px}
 .topbar .brand{grid-row:1;grid-column:1;font-size:17px;gap:9px}
 .topbar .brandmark{width:30px;height:30px;font-size:27px}
 .topbar .brand small{display:none}
 .topbar .top-actions{grid-column:1;grid-row:2;justify-self:end;margin:0;height:50px;gap:18px}
 .topbar .search-wrap{grid-column:1;grid-row:3}
}