:root{
  --bg:#0e1116; --bg2:#151a21; --bg3:#1c232c; --line:#2a323d;
  --fg:#e6ebf2; --fg2:#9aa7b6; --fg3:#697687;
  --hot:#d73f3f; --post:#f0883e; --pre:#4d9de0; --drone:#5ec26a; --arch:#8b7cc8;
  --sidebar:356px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:var(--bg);color:var(--fg);
  font:14px/1.45 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
#app{display:flex;height:100%;overflow:hidden}

#sidebar{
  width:var(--sidebar);flex:0 0 var(--sidebar);display:flex;flex-direction:column;
  background:var(--bg2);border-right:1px solid var(--line);min-height:0;transition:margin-left .18s ease;
}
#sidebar.hidden{margin-left:calc(-1 * var(--sidebar))}
#brand{padding:13px 16px 11px;border-bottom:1px solid var(--line)}
.brand-row{display:flex;align-items:flex-start;gap:8px}
.brand-row>div{flex:1;min-width:0}
#brand h1{margin:0;font-size:16px;font-weight:650;letter-spacing:-.01em}
#brand h1::before{content:"";display:inline-block;width:3px;height:13px;background:var(--hot);margin-right:8px;vertical-align:-1px;border-radius:1px}
#brand .sub{margin:3px 0 0 11px;font-size:11.5px;color:var(--fg2)}
#brand .meta{margin:7px 0 0;font-size:10.5px;color:var(--fg3);font-variant-numeric:tabular-nums}
#collapse,#expand{background:var(--bg3);border:1px solid var(--line);color:var(--fg2);border-radius:5px;cursor:pointer;font-size:11px;padding:3px 7px;line-height:1}
#collapse:hover,#expand:hover{color:var(--fg);border-color:#3c4653}
#expand{position:absolute;top:12px;left:12px;z-index:600;padding:7px 10px;font-size:13px}

#tabs{display:flex;border-bottom:1px solid var(--line)}
.tab{flex:1;background:none;border:none;border-bottom:2px solid transparent;color:var(--fg3);padding:9px 4px;font:inherit;font-size:12.5px;font-weight:550;cursor:pointer}
.tab:hover{color:var(--fg2)}
.tab.active{color:var(--fg);border-bottom-color:var(--hot)}
.tabwrap{flex:1;overflow-y:auto;min-height:0;overscroll-behavior:contain}
.panel{display:none}.panel.active{display:block}

.block{padding:13px 16px;border-bottom:1px solid var(--line)}
.block-head{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.block-head h2{margin:0;font-size:11px;font-weight:650;letter-spacing:.07em;text-transform:uppercase;color:var(--fg2);flex:1}
.count{font-size:10.5px;color:var(--fg3);font-variant-numeric:tabular-nums}
.linkbtn{background:none;border:none;color:var(--fg3);font:inherit;font-size:11px;cursor:pointer;text-decoration:underline;padding:0}
.linkbtn:hover{color:var(--hot)}
.hint{margin:7px 0 0;font-size:11.5px;color:var(--fg3);line-height:1.45}
.meta{font-size:11px;color:var(--fg3)}

.chk{display:flex;align-items:center;gap:7px;cursor:pointer;padding:3px 0;font-size:13px}
.chk input{accent-color:var(--hot);margin:0;cursor:pointer;flex:0 0 auto}
.filters{display:flex;flex-direction:column;gap:5px;margin-bottom:9px}
input[type=search],select{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--fg);border-radius:5px;padding:5px 8px;font:inherit;font-size:12.5px}
input[type=search]:focus,select:focus{outline:none;border-color:#43505f}
.btn{background:var(--bg3);border:1px solid var(--line);color:var(--fg);border-radius:5px;padding:6px 11px;font:inherit;font-size:12.5px;cursor:pointer;margin:8px 6px 0 0}
.btn:hover{border-color:#43505f}
.btn:disabled{opacity:.5;cursor:default}
.btn.subtle{color:var(--fg3)}

.group{margin-bottom:11px}.group:last-child{margin-bottom:0}
.group-head{display:flex;align-items:center;gap:6px;width:100%;background:none;border:none;color:var(--fg2);font:inherit;font-size:11.5px;font-weight:600;cursor:pointer;padding:4px 0;text-align:left}
.group-head:hover{color:var(--fg)}
.group-head .caret{font-size:9px;color:var(--fg3);width:9px;flex:0 0 9px}
.group-head .dot{width:7px;height:7px;border-radius:50%;flex:0 0 7px}
.group-head .n{color:var(--fg3);font-weight:400;font-variant-numeric:tabular-nums;margin-left:auto}
.group.collapsed .group-body{display:none}

.scene{display:flex;gap:8px;align-items:flex-start;padding:6px 7px;border-radius:5px;cursor:pointer;border:1px solid transparent}
.scene:hover{background:var(--bg3)}
.scene.on{background:#1d2733;border-color:#31465c}
.scene input{margin:2px 0 0;accent-color:var(--hot);cursor:pointer;flex:0 0 auto}
.scene .body{flex:1;min-width:0}
.scene .t{font-size:12.5px;line-height:1.3;word-break:break-word}
.scene .d{font-size:11px;color:var(--fg3);margin-top:2px;font-variant-numeric:tabular-nums}
.scene .d b{color:var(--fg2);font-weight:550}
.scene a.ext{color:var(--fg3);font-size:11px;text-decoration:none;flex:0 0 auto;padding-top:1px}
.scene a.ext:hover{color:var(--hot)}
.badge{display:inline-block;font-size:9.5px;font-weight:650;letter-spacing:.04em;padding:1px 5px;border-radius:3px;text-transform:uppercase;margin-left:5px;vertical-align:1px}
.badge.post{background:rgba(240,136,62,.18);color:var(--post)}
.badge.hires{background:rgba(94,194,106,.16);color:var(--drone)}
.badge.coarse{background:rgba(154,167,182,.14);color:var(--fg2)}
.empty{font-size:11.5px;color:var(--fg3);padding:6px 0}

.active-item{background:var(--bg3);border:1px solid var(--line);border-radius:6px;padding:8px 9px;margin-bottom:7px}
.active-item .row1{display:flex;align-items:center;gap:6px}
.active-item .nm{flex:1;font-size:12.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.iconbtn{background:none;border:none;color:var(--fg3);cursor:pointer;font-size:12px;padding:1px 3px;line-height:1}
.iconbtn:hover{color:var(--fg)}
.iconbtn.rm:hover{color:var(--hot)}
.opacity-row{display:flex;align-items:center;gap:7px;margin-top:6px}
.opacity-row input[type=range]{flex:1;accent-color:var(--hot);height:3px}
.opacity-row .pct{font-size:10.5px;color:var(--fg3);width:32px;text-align:right;font-variant-numeric:tabular-nums}
.compare-box{margin-top:4px;padding-top:9px;border-top:1px solid var(--line)}
.cmp-row{display:flex;align-items:center;gap:7px;margin-top:6px}
.cmp-tag{font-size:9.5px;font-weight:700;padding:2px 5px;border-radius:3px;flex:0 0 40px;text-align:center}
.cmp-tag.left{background:rgba(77,157,224,.2);color:var(--pre)}
.cmp-tag.right{background:rgba(240,136,62,.2);color:var(--post)}

.ref{padding:8px 0;border-bottom:1px solid rgba(42,50,61,.55)}
.ref:last-child{border-bottom:none}
.ref .top{display:flex;align-items:center;gap:7px}
.ref .top .nm{flex:1;font-size:12.5px}
.ref .sw{width:12px;height:12px;border-radius:3px;flex:0 0 12px;border:1px solid rgba(255,255,255,.22)}
.ref .d{font-size:11px;color:var(--fg3);margin:4px 0 0 19px;line-height:1.45}
.ref a{color:var(--pre);text-decoration:none}
.ref a:hover{text-decoration:underline}
.bar{height:3px;background:var(--bg);border-radius:2px;margin:6px 0 0 19px;overflow:hidden;display:flex}
.bar i{display:block;height:100%}
.bar i.m{background:var(--drone)}
.bar i.v{background:var(--pre)}
.pill{display:inline-block;font-size:9.5px;font-weight:650;padding:1px 5px;border-radius:3px;text-transform:uppercase;letter-spacing:.04em}
.pill.urgent{background:rgba(215,63,63,.18);color:var(--hot)}
.pill.high{background:rgba(240,136,62,.18);color:var(--post)}
.pill.other{background:rgba(154,167,182,.14);color:var(--fg2)}
.warn{
  margin:7px 0 0 19px;padding:6px 8px;border-radius:5px;font-size:11px;line-height:1.45;
  background:rgba(215,63,63,.1);border:1px solid rgba(215,63,63,.3);color:#f0b0b0;
}
.warn b{color:var(--hot)}

#about-body h3{font-size:11px;margin:15px 0 6px;color:var(--fg2);text-transform:uppercase;letter-spacing:.06em}
#about-body h3:first-child{margin-top:0}
#about-body p,#about-body li{font-size:12px;color:var(--fg2);line-height:1.55}
#about-body ul{margin:5px 0;padding-left:17px}
#about-body a{color:var(--pre);text-decoration:none}
#about-body a:hover{text-decoration:underline}

#mapwrap{flex:1;position:relative;min-width:0}
#map,#map-b{position:absolute;inset:0}
#map-b{z-index:2}
#readout{position:absolute;bottom:8px;left:10px;z-index:20;pointer-events:none;font-size:10.5px;color:var(--fg2);background:rgba(14,17,22,.82);padding:3px 7px;border-radius:4px;font-variant-numeric:tabular-nums}
#places{position:absolute;top:12px;right:12px;z-index:20;display:flex;flex-wrap:wrap;gap:5px;justify-content:flex-end;max-width:60%}
#places button{background:rgba(21,26,33,.9);border:1px solid var(--line);color:var(--fg2);border-radius:4px;padding:4px 8px;font:inherit;font-size:11px;cursor:pointer}
#places button:hover{color:var(--fg);border-color:#43505f}
#swipe-handle{position:absolute;top:0;bottom:0;width:28px;margin-left:-14px;z-index:30;cursor:ew-resize;display:flex;align-items:center;justify-content:center;touch-action:none}
#swipe-handle span{width:2px;height:100%;background:rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(0,0,0,.5);position:relative}
#swipe-handle span::after{content:"\276E\276F";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;color:#111;font-size:10px;padding:6px 4px;border-radius:4px;letter-spacing:-1px;box-shadow:0 1px 5px rgba(0,0,0,.45)}

.maplibregl-map{background:#0a0d11;font:inherit}
.maplibregl-ctrl-attrib{background:rgba(14,17,22,.85)!important}
.maplibregl-ctrl-attrib,.maplibregl-ctrl-attrib a{color:var(--fg3)!important;font-size:10px!important}
.maplibregl-ctrl-group{background:var(--bg2)!important;border:1px solid var(--line)!important;box-shadow:none!important}
.maplibregl-ctrl-group button+button{border-top:1px solid var(--line)!important}
.maplibregl-ctrl-group button .maplibregl-ctrl-icon{filter:invert(88%)}
.maplibregl-ctrl-scale{background:rgba(14,17,22,.82)!important;border-color:var(--line)!important;color:var(--fg2)!important;font-size:10px!important}
.maplibregl-popup-content{background:var(--bg2);color:var(--fg);border-radius:7px;padding:11px 13px;font-size:12.5px;line-height:1.5;box-shadow:0 3px 16px rgba(0,0,0,.55)}
.maplibregl-popup-content h4{margin:0 0 5px;font-size:13px}
.maplibregl-popup-content a{color:var(--pre)}
.maplibregl-popup-tip{border-top-color:var(--bg2)!important;border-bottom-color:var(--bg2)!important}
.maplibregl-popup-close-button{color:var(--fg3);font-size:16px}

@media (max-width:760px){
  :root{--sidebar:100%}
  #app{flex-direction:column}
  #sidebar{max-height:54%;flex:0 0 auto;width:100%;border-right:none;border-bottom:1px solid var(--line)}
  #sidebar.hidden{margin-left:0;display:none}
  #places{max-width:80%}
}

/* Legends: task status, OSM overlay */
.legend{display:flex;flex-wrap:wrap;gap:5px 11px;margin:8px 0 2px}
.legend.inline{margin:6px 0 0 19px}
.legend .lg{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;color:var(--fg2);font-variant-numeric:tabular-nums}
.legend .lg i{width:9px;height:9px;border-radius:2px;display:inline-block;flex:0 0 9px;border:1px solid rgba(255,255,255,.15)}
#tm-toggles{margin-bottom:4px}

/* Render-mode selectors and OSM statistics */
.modebox{margin-bottom:9px}
.modebox .hint{margin-top:5px}
.stats{display:flex;flex-direction:column;gap:9px;margin:2px 0 10px}
.stat{background:var(--bg3);border:1px solid var(--line);border-radius:6px;padding:9px 11px}
.stat b{display:block;font-size:19px;font-weight:650;color:var(--drone);line-height:1.15;font-variant-numeric:tabular-nums}
.stat span{display:block;font-size:11.5px;color:var(--fg);margin-top:2px}
.stat em{display:block;font-size:10.5px;color:var(--fg3);font-style:normal;margin-top:3px}
.row-actions{display:flex;gap:12px;margin:7px 0 0 19px}

/* Headline mapping-progress figure, kept in the header so it is visible from
   any tab rather than only on Reference. */
.osm-headline{
  margin:8px 0 0;font-size:11.5px;line-height:1.45;color:var(--fg2);
  background:var(--bg3);border:1px solid var(--line);border-left:2px solid var(--drone);
  border-radius:4px;padding:6px 8px;
}
.osm-headline b{color:var(--drone);font-weight:650;font-variant-numeric:tabular-nums}
.osm-headline.loading{border-left-color:var(--fg3);color:var(--fg3)}
.osm-headline.error{border-left-color:var(--hot);color:var(--fg3)}

/* Cloud cover badges on catalogue rows */
.badge.clear{background:rgba(94,194,106,.16);color:var(--drone)}
.badge.part{background:rgba(240,201,77,.16);color:#f0c94d}
.badge.cloudy{background:rgba(154,167,182,.16);color:var(--fg2)}
.scene .note{font-size:10.5px;color:var(--fg3);margin-top:3px;line-height:1.4}

/* Loud, not quiet: stale catalogue or failed upstream sources */
.health{margin:8px 0 0;background:rgba(215,63,63,.1);border:1px solid rgba(215,63,63,.35);
  border-left:3px solid var(--hot);border-radius:5px;padding:8px 10px}
.health p{margin:0 0 5px;font-size:11.5px;line-height:1.45;color:#f0b8b8}
.health p:last-child{margin-bottom:0}
.health b{color:var(--hot)}

/* Per-scene rendering selector */
.render-row{display:flex;align-items:center;gap:6px;margin-top:5px}
.render-row select{font-size:11px;padding:3px 6px}
.render-row .lbl{font-size:10.5px;color:var(--fg3);flex:0 0 auto}

/* Imagery catalogue controls: grouping, sorting and provider filtering. */
.ctl-row{display:flex;gap:8px;margin-top:7px}
.ctl{flex:1 1 0;display:flex;flex-direction:column;gap:3px;min-width:0}
.ctl>span{font-size:10px;color:var(--fg3);letter-spacing:.03em;text-transform:uppercase}
.ctl select{width:100%;font-size:11.5px;padding:4px 6px}
.chk-row{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px}
.chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.chip{
  display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:11px;
  font-size:10.5px;line-height:1.5;cursor:pointer;
  background:var(--bg3);border:1px solid var(--line);color:var(--fg2);
}
.chip:hover{border-color:#43505f;color:var(--fg)}
.chip .n{font-variant-numeric:tabular-nums;color:var(--fg3)}
.chip.on{background:rgba(215,63,63,.16);border-color:rgba(215,63,63,.5);color:var(--fg)}
.chip.on .n{color:var(--fg2)}
.chip.dim{opacity:.5}
.chip.clear{background:none;border-style:dashed}
.group-head .n.on-map{
  background:rgba(94,194,106,.16);color:var(--drone);
  padding:0 6px;border-radius:8px;
}
.subhead{margin:13px 0 5px;font-size:10px;font-weight:650;letter-spacing:.05em;
  text-transform:uppercase;color:var(--fg3)}
.ref.archived .nm{color:var(--fg2)}
.pill.archived{background:rgba(154,167,182,.16);color:var(--fg2)}

/* Active imagery, floated over the map. It used to sit above the catalogue in
   the sidebar, where adding a layer grew it and pushed the list down by roughly
   one row, so a second click landed on the wrong scene and often deselected the
   first. Over the map it can grow without moving anything the reader is aiming
   at. */
#active-block{
  /* Below the place shortcuts, which occupy the top right of the map frame and
     were drawing over this panel's header. */
  position:absolute;top:50px;right:12px;z-index:5;width:280px;max-width:calc(100% - 96px);
  background:rgba(20,24,30,.93);border:1px solid var(--line);border-radius:8px;
  backdrop-filter:blur(6px);box-shadow:0 6px 22px rgba(0,0,0,.4);
  max-height:calc(100% - 118px);display:flex;flex-direction:column;
}
/* An id selector with display:flex overrides the user agent's [hidden] rule, so
   the panel has to be told to obey it. Without this it showed empty. */
#active-block[hidden]{display:none}
#active-block .ab-head{
  display:flex;align-items:center;gap:7px;padding:8px 10px;border-bottom:1px solid var(--line);flex:0 0 auto;
}
#active-block .ab-head h2{
  margin:0;font-size:10.5px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;
  color:var(--fg2);flex:1 1 auto;
}
#active-block .ab-head .n{
  color:var(--fg3);font-weight:400;font-variant-numeric:tabular-nums;text-transform:none;letter-spacing:0;
}
.ab-caret{
  background:none;border:none;color:var(--fg3);cursor:pointer;font-size:9px;padding:0;width:12px;flex:0 0 12px;
}
.ab-caret:hover{color:var(--fg)}
#active-block .ab-body{overflow-y:auto;padding:8px 10px 10px;flex:1 1 auto}
#active-block.collapsed .ab-body{display:none}
#active-block .compare-box{margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}

@media (max-width:820px){
  #active-block{width:auto;left:12px;right:12px;top:46px;max-height:40%}
}

/* Fixed-size "drawn on the map" accent. Occupies its space whether or not the
   scene is active, so toggling cannot change row height and shift the list. */
.onflag{
  flex:0 0 3px;width:3px;align-self:stretch;min-height:30px;border-radius:2px;
  background:transparent;position:relative;
}
.onflag.on{background:var(--drone)}
.onflag.on[data-side]::after{
  content:attr(data-side);position:absolute;left:6px;top:0;
  font-size:9px;font-weight:650;color:var(--drone);
}

/* Basemap switcher, floated bottom right of the map. It used to be the last
   block in the sidebar, below the whole imagery catalogue, so switching
   basemap meant scrolling past everything to reach it. Collapsed by default so
   it costs almost no map. */
#basemap-ctl{position:absolute;bottom:74px;right:12px;z-index:5;display:flex;
  flex-direction:column;align-items:flex-end;gap:5px;max-width:calc(100% - 24px)}
#basemap-toggle{
  display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:6px;
  font:inherit;font-size:11px;cursor:pointer;
  background:rgba(20,24,30,.93);border:1px solid var(--line);color:var(--fg2);
  backdrop-filter:blur(6px);box-shadow:0 3px 12px rgba(0,0,0,.35);
}
#basemap-toggle:hover{color:var(--fg);border-color:#43505f}
#basemap-toggle .bm-icon{font-size:12px;color:var(--fg3)}
#basemap-ctl #basemap-list{
  background:rgba(20,24,30,.95);border:1px solid var(--line);border-radius:7px;
  padding:7px 9px;min-width:190px;backdrop-filter:blur(6px);
  box-shadow:0 6px 22px rgba(0,0,0,.45);max-height:46vh;overflow-y:auto;
}
#basemap-ctl #basemap-list .chk{display:flex;margin:3px 0;font-size:11.5px}