:root{
  --bg:#0b1220;
  --bg2:#0f1830;
  --panel:rgba(13,20,38,.92);
  --ink:#e7ecf5;
  --dim:#93a0b8;
  --faint:#5a6780;
  --line:rgba(231,236,245,.09);
  --accent:#5da983;
  --accent2:#9ed8b8;
  --warn:#f5a623;
  --cyan:#55c1e8;
  --ok:#7ddb8a;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Segoe UI',system-ui,sans-serif;
  overflow:hidden;
}
.mono{font-family:Consolas,'Cascadia Mono',monospace}

/* ---------- layout ---------- */
#app{display:flex;height:100%}
#sidebar{
  width:330px;min-width:330px;
  background:var(--panel);
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;
  z-index:20;
}
#stage{flex:1;position:relative}

/* ---------- sidebar ---------- */
#brand{padding:1.3rem 1.4rem 1rem;border-bottom:1px solid var(--line)}
#brand h1{
  font-size:1.15rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
}
#brand h1 .tick{color:var(--accent)}
#brand .tag{font-size:.78rem;color:var(--dim);margin-top:.35rem}
#list{flex:1;overflow-y:auto;padding:.6rem}
#list::-webkit-scrollbar{width:8px}
#list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:4px}

.card{
  padding:.75rem .9rem;margin:.3rem 0;
  border:1px solid transparent;border-radius:10px;
  cursor:pointer;transition:background .2s,border-color .2s;
}
.card:hover{background:rgba(255,255,255,.04)}
.card.active{background:rgba(93,169,131,.08);border-color:rgba(93,169,131,.35)}
.card .top{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem}
.card .name{font-size:.95rem;font-weight:600}
.card .years{font-size:.72rem;color:var(--dim);white-space:nowrap}
.card .sub{font-size:.76rem;color:var(--dim);margin-top:.15rem;display:flex;gap:.45rem;align-items:center}
.chip{
  font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.1rem .4rem;border-radius:4px;border:1px solid var(--line);
}
.chip.ongoing{color:var(--cyan);border-color:rgba(85,193,232,.4)}
.chip.complete{color:var(--ok);border-color:rgba(125,219,138,.35)}

#sources{border-top:1px solid var(--line);padding:.8rem 1.2rem;font-size:.7rem;color:var(--faint)}
#sources summary{cursor:pointer;letter-spacing:.15em;text-transform:uppercase;font-size:.64rem}
#sources ul{margin:.5rem 0 0 1rem;line-height:1.7}
#sources a{color:var(--dim)}

/* ---------- map stage ---------- */
#globeMap,#compare{position:absolute;inset:0}
#compare{display:none}
#compare.show{display:block}
#beforeMap,#afterWrap,#afterMap{position:absolute;inset:0}
#afterWrap{overflow:hidden;pointer-events:none}
#afterMap{pointer-events:auto}

#divider{
  position:absolute;top:0;bottom:0;width:36px;margin-left:-18px;
  cursor:ew-resize;z-index:12;touch-action:none;
}
#divider::before{
  content:'';position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;
  background:var(--accent);box-shadow:0 0 12px rgba(93,169,131,.6);
}
#divider .knob{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:34px;height:34px;border-radius:50%;
  background:var(--accent);color:#0b1220;
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;font-weight:700;letter-spacing:-.05em;
  box-shadow:0 2px 10px rgba(0,0,0,.5);
}

/* imagery date chips (honesty surfaces) */
.datechip{
  position:absolute;top:14px;z-index:11;
  background:rgba(11,18,32,.82);border:1px solid var(--line);border-radius:8px;
  padding:.4rem .7rem;font-size:.72rem;color:var(--ink);
  display:flex;align-items:center;gap:.5rem;
}
.datechip select{
  background:transparent;color:var(--accent2);border:none;font:inherit;cursor:pointer;
}
.datechip select option{background:#0f1830;color:var(--ink)}
.datechip .credit{color:var(--faint);font-size:.62rem}
#chipBefore{left:14px}
#chipAfter{right:14px}

#backBtn{
  position:absolute;bottom:calc(200px + 24px);left:14px;z-index:11;
  background:rgba(11,18,32,.85);border:1px solid var(--line);border-radius:8px;
  color:var(--ink);padding:.5rem .9rem;font-size:.78rem;cursor:pointer;
}
#backBtn:hover{border-color:var(--accent)}

/* ---------- fact panel ---------- */
#panel{
  position:absolute;left:0;right:0;bottom:0;height:200px;z-index:11;
  background:var(--panel);border-top:1px solid var(--line);
  padding:1rem 1.4rem;display:none;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
#panel.show{display:block}
#panel .head{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap}
#panel h2{font-size:1.15rem;font-weight:600}
#panel .country{color:var(--dim);font-size:.85rem}
#panel .blurb{color:var(--dim);font-size:.85rem;margin-top:.4rem;max-width:760px}
#stats{display:flex;gap:2.2rem;margin-top:.8rem;flex-wrap:wrap}
.stat .lab{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.stat .val{font-size:.92rem;margin-top:.15rem}
.stat .val.amber{color:var(--accent)}
#durbar{height:6px;border-radius:3px;background:var(--accent);margin-top:.35rem;min-width:8px;box-shadow:0 0 8px rgba(93,169,131,.4)}
#links{margin-top:.35rem;display:flex;gap:1rem}
#links a{color:var(--cyan);font-size:.78rem;text-decoration:none;border-bottom:1px dashed rgba(85,193,232,.4)}

/* ---------- intro hint ---------- */
#hint{
  position:absolute;top:16px;left:50%;transform:translateX(-50%);z-index:9;
  background:rgba(11,18,32,.8);border:1px solid var(--line);border-radius:999px;
  padding:.45rem 1.1rem;font-size:.76rem;color:var(--dim);
  transition:opacity .6s;pointer-events:none;
}
#hint.hide{opacity:0}

/* markers */
.gw-marker{
  width:13px;height:13px;border-radius:50%;
  border:2px solid #0b1220;cursor:pointer;
  box-shadow:0 0 10px rgba(93,169,131,.7);
  background:var(--accent);
}
.gw-marker.ongoing{background:var(--cyan);box-shadow:0 0 10px rgba(85,193,232,.7)}
.gw-marker:hover{transform:scale(1.35)}

/* ---------- v6: kind filter + watchlist (sidebar) ---------- */
#filters{display:flex;flex-wrap:wrap;gap:.3rem;padding:.6rem .9rem 0}
.fchip{font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;padding:.22rem .55rem;border-radius:999px;border:1px solid var(--line);background:none;color:var(--dim);cursor:pointer;font-family:inherit}
.fchip:hover{border-color:var(--accent)}
.fchip.on{color:var(--accent2);border-color:rgba(93,169,131,.6);background:rgba(93,169,131,.1)}
.fchip.watch.on{color:var(--warn);border-color:rgba(245,166,35,.6);background:rgba(245,166,35,.08)}
.fchip .n{opacity:.65;margin-left:.3rem;font-family:Consolas,'Cascadia Mono',monospace}
.card{position:relative}
.card.hide,.grow.hide{display:none}
.card .sub .kind{color:var(--faint);font-size:.68rem}
.card .top{padding-right:1.5rem}
.card .star{position:absolute;right:.55rem;top:.55rem;width:22px;height:22px;background:none;border:0;padding:3px;cursor:pointer;color:var(--faint);opacity:0;transition:opacity .15s,color .15s}
.card:hover .star,.card.active .star,.card .star[aria-pressed="true"]{opacity:1}
.card .star svg{width:16px;height:16px;display:block;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.card .star:hover{color:var(--warn)}
.card .star[aria-pressed="true"]{color:var(--warn)}
.card .star[aria-pressed="true"] svg{fill:currentColor}
#benchBtn{margin:0;padding:.55rem .9rem;background:none;border:1px solid var(--line);border-radius:8px;color:var(--ink);font-size:.78rem;cursor:pointer;text-align:left}
#benchBtn:hover{border-color:var(--accent)}
.gw-marker.hide{display:none}
#brand .tag b{color:var(--ink);font-weight:600}

/* maplibre chrome */
.maplibregl-ctrl-attrib{background:rgba(11,18,32,.7)!important;color:var(--faint)!important;font-size:.62rem!important}
.maplibregl-ctrl-attrib a{color:var(--dim)!important}

@media (max-width:820px){
  #app{flex-direction:column}
  #sidebar{width:100%;min-width:0;height:34vh;order:2}
  #stage{order:1;height:66vh}
  #panel{height:auto;max-height:45%;overflow-y:auto}
  #backBtn{bottom:auto;top:64px}
  #stats{gap:1.2rem}
}

/* ---------- country code (no emojis by owner rule) ---------- */
.cc{
  display:inline-block;min-width:1.9em;text-align:center;
  font-family:Consolas,'Cascadia Mono',monospace;font-size:.62rem;
  color:var(--dim);border:1px solid var(--line);border-radius:4px;
  padding:.08rem .22rem;margin-right:.35rem;vertical-align:.12em;letter-spacing:.06em;
}

/* ---------- timeline scrubber ---------- */
#timeline{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(200px + 20px);z-index:11;
  display:flex;align-items:center;gap:.8rem;
  background:rgba(11,18,32,.85);border:1px solid var(--line);border-radius:10px;
  padding:.55rem .9rem;max-width:min(720px,72%);
}
#playBtn{
  background:var(--accent);color:#0b1220;border:none;border-radius:50%;
  width:30px;height:30px;min-width:30px;cursor:pointer;font-size:.75rem;font-weight:700;
}
#playBtn:hover{filter:brightness(1.1)}
#tlTrack{display:flex;align-items:flex-end;gap:2px;overflow-x:auto;padding-bottom:2px}
.tltick{
  display:flex;flex-direction:column;align-items:center;gap:.25rem;
  cursor:pointer;padding:.15rem .3rem;border-radius:6px;min-width:44px;
}
.tltick:hover{background:rgba(255,255,255,.05)}
.tltick .dot{width:8px;height:8px;border-radius:50%;background:var(--faint)}
.tltick.active .dot{background:var(--accent);box-shadow:0 0 8px rgba(93,169,131,.7)}
.tltick .yr{font-family:Consolas,monospace;font-size:.6rem;color:var(--faint);white-space:nowrap}
.tltick.active .yr{color:var(--accent2)}
.tltick.gibs .dot{border-radius:1px}

/* ---------- footprints chip ---------- */
#fpChip{
  position:absolute;right:14px;bottom:calc(200px + 24px);z-index:11;
  background:rgba(11,18,32,.85);border:1px solid var(--line);border-radius:8px;
  color:var(--ink);padding:.5rem .9rem;font-size:.76rem;cursor:pointer;
}
#fpChip:hover{border-color:var(--accent)}
#fpChip.on{border-color:var(--accent);color:var(--accent)}
#fpChip.busy{opacity:.55;pointer-events:none}

/* ---------- inspector ---------- */
#inspectBtn{
  position:absolute;top:14px;right:14px;z-index:9;
  background:rgba(11,18,32,.85);border:1px solid var(--line);border-radius:8px;
  color:var(--ink);padding:.5rem .9rem;font-size:.76rem;cursor:pointer;
}
#inspectBtn:hover{border-color:var(--cyan)}
#inspectBtn.on{border-color:var(--cyan);color:var(--cyan)}
#inspectBtn.hidden,#timeline.hidden,#fpChip.hidden{display:none}
#stage.inspecting #globeMap{cursor:crosshair}
#inspectCard{
  position:absolute;top:60px;right:14px;z-index:10;width:300px;
  background:var(--panel);border:1px solid rgba(85,193,232,.35);border-radius:12px;
  padding:1rem 1.1rem;font-size:.8rem;display:none;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
#inspectCard.show{display:block}
#inspectCard h4{font-size:.85rem;font-weight:600;margin-bottom:.5rem;padding-right:1.4rem}
#inspectCard .row{margin:.35rem 0;color:var(--dim)}
#inspectCard .row b{color:var(--ink);font-weight:600}
#inspectCard .foot{margin-top:.6rem;padding-top:.5rem;border-top:1px solid var(--line);
  font-size:.62rem;color:var(--faint);font-family:Consolas,monospace}
#inspectCard .close{
  position:absolute;top:.5rem;right:.6rem;background:none;border:none;
  color:var(--dim);cursor:pointer;font-size:.85rem;
}
#inspectCard .spin{color:var(--cyan)}

/* ---------- gantt ---------- */
#sideBtns{display:flex;flex-direction:column;gap:.4rem;padding:.4rem .9rem .6rem}
#hubBtn,#ganttBtn{
  margin:0;padding:.55rem .9rem;
  background:none;border:1px solid var(--line);border-radius:8px;
  color:var(--ink);font-size:.78rem;cursor:pointer;text-align:left;
}
#hubBtn:hover,#ganttBtn:hover{border-color:var(--accent)}
#hubBtn{border-color:rgba(93,169,131,.45);color:var(--accent2)}
#gantt{
  position:absolute;inset:0;z-index:30;display:none;
  background:rgba(9,14,26,.97);padding:1.4rem 2rem;overflow-y:auto;
}
#gantt.show{display:block}
#gantt .ghead{display:flex;align-items:baseline;gap:1rem;margin-bottom:1.2rem}
#gantt h3{font-size:1.05rem;font-weight:600}
#gantt .gnote{font-size:.72rem;color:var(--faint)}
#ganttClose{
  margin-left:auto;background:none;border:1px solid var(--line);border-radius:8px;
  color:var(--ink);padding:.35rem .7rem;cursor:pointer;
}
#ganttClose:hover{border-color:var(--accent)}
#gaxis{position:relative;height:20px;margin-left:210px;margin-bottom:.4rem}
#gaxis span{
  position:absolute;transform:translateX(-50%);
  font-family:Consolas,monospace;font-size:.62rem;color:var(--faint);
}
.grow{
  display:flex;align-items:center;gap:0;margin:.3rem 0;cursor:pointer;
  border-radius:8px;padding:.25rem .3rem;
}
.grow:hover{background:rgba(255,255,255,.04)}
.grow .gname{width:210px;min-width:210px;font-size:.78rem;color:var(--ink);
  padding-right:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grow .gbararea{position:relative;flex:1;height:16px}
.grow .gline{position:absolute;top:50%;left:0;right:0;height:1px;background:var(--line)}
.grow .gbar{
  position:absolute;top:2px;height:12px;border-radius:6px;background:var(--accent);
  min-width:6px;box-shadow:0 0 6px rgba(93,169,131,.35);
}
.grow .gbar.ongoing{
  background:linear-gradient(90deg, var(--cyan) 55%, rgba(85,193,232,0));
  box-shadow:0 0 6px rgba(85,193,232,.3);
}
.grow .gdur{
  position:absolute;top:0;font-family:Consolas,monospace;font-size:.62rem;
  color:var(--dim);white-space:nowrap;padding-left:.5rem;line-height:16px;
}
@media (max-width:820px){
  #timeline{max-width:92%;bottom:auto;top:60px}
  #gaxis{margin-left:110px}
  .grow .gname{width:110px;min-width:110px;font-size:.68rem}
}

  .bunit{margin-left:0}
  table.pf-t td:first-child{width:auto}
}

#pfOpen{display:inline-block;margin-top:.2rem;padding:.2rem .6rem;border:1px solid rgba(93,169,131,.5);border-radius:5px;color:var(--accent2);text-decoration:none;font-size:.8rem}
#pfOpen:hover{background:rgba(93,169,131,.1)}