:root{
  --bg:#0b0d10; --panel:#14181de6; --line:#2a3038; --ink:#e8ecf1; --dim:#9aa5b1;
  --gold:#e0b04a; --mss:#c76b8e; --landsat:#5aa9d6; --s2:#61c48a; --mosaic:#8f8ad8; --hires:#e0b04a;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
  --panel-w:370px; --tl-h:132px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font:14px/1.5 var(--sans);
  overflow:hidden;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
#story li:focus-visible{outline-offset:-2px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.hint{color:var(--dim);font-size:12px;line-height:1.45;margin:6px 0 0}
.small{font-size:12px;color:var(--dim)}

#map{position:absolute;inset:0 0 var(--tl-h) 0;background:#05070a}
.leaflet-container{background:#05070a;font:inherit}
.leaflet-control-attribution{display:none}

/* ---------- title ---------- */
#titlecard{position:absolute;top:18px;left:22px;z-index:600;max-width:460px;pointer-events:none;
  text-shadow:0 2px 18px #000c,0 1px 3px #000}
#titlecard h1{margin:0;font-size:27px;letter-spacing:-.02em;font-weight:650}
#titlecard .sub{margin:4px 0 0;font-size:13px;color:#cfd6de;max-width:420px}
#titlecard .sub b{color:var(--gold);font-weight:600}
.linkish{background:none;border:0;padding:4px 0 0;color:var(--gold);font-size:12px;
  text-decoration:underline;text-underline-offset:3px;pointer-events:auto}

/* ---------- big date stamp ---------- */
/* Sits at the top-right of the map, clear of the side panel. Pure white with a heavy
   shadow so it holds up over bright bare soil as well as dark canopy. */
#bigyear{position:absolute;top:12px;right:calc(var(--panel-w) + 26px);z-index:600;
  text-align:right;pointer-events:none;line-height:1}
#bigyear .y{font:700 clamp(40px,5.4vw,76px)/1 var(--mono);color:#fff;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;
  text-shadow:0 3px 24px #000e,0 1px 4px #000c,0 0 2px #0008}
#bigyear .m{margin-top:5px;font:600 12px/1 var(--sans);letter-spacing:.22em;
  text-transform:uppercase;color:#ffffffd9;text-shadow:0 2px 10px #000e,0 1px 3px #000}
#bigyear .m .side{color:var(--gold);letter-spacing:.14em}
#bigyear .m:empty{display:none}

/* ---------- side panel ---------- */
#panel{position:absolute;top:0;right:0;bottom:var(--tl-h);width:var(--panel-w);z-index:650;
  background:var(--panel);backdrop-filter:blur(14px);border-left:1px solid var(--line);
  display:flex;flex-direction:column}
#tabs{display:flex;border-bottom:1px solid var(--line);flex:0 0 auto}
#tabs button{flex:1;background:none;border:0;padding:12px 4px;color:var(--dim);font-size:12.5px;
  border-bottom:2px solid transparent}
#tabs button.on{color:var(--ink);border-bottom-color:var(--gold)}
#tabs button:hover{color:var(--ink)}
#panel section{display:none;overflow-y:auto;padding:16px 18px;flex:1 1 auto;scrollbar-width:thin}
#panel section.on{display:block}
#panel h2{font-size:14px;margin:0 0 8px;letter-spacing:.01em}
.field{margin-bottom:18px}
.field>label,.label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--dim);margin-bottom:6px}
label.row{display:flex;gap:8px;align-items:center;font-size:13px;text-transform:none;
  letter-spacing:0;color:var(--ink);margin:0 0 7px;cursor:pointer}
select,input[type=range]{width:100%}
select{background:#1b2027;color:var(--ink);border:1px solid var(--line);border-radius:6px;
  padding:8px 9px;font:inherit}
input[type=range]{accent-color:var(--gold);height:20px}
input[type=checkbox]{accent-color:var(--gold);width:15px;height:15px}
#attrib{flex:0 0 auto;border-top:1px solid var(--line);padding:9px 18px;font-size:11px;
  color:#98a3ae;line-height:1.5}
#attrib a{color:#b3bec9}

/* ---------- readout ---------- */
#readout{border:1px solid var(--line);border-radius:9px;padding:12px 13px;margin-bottom:18px;
  background:#0f1318a8}
#readout .rdate{font:600 20px/1.15 var(--mono);letter-spacing:-.01em}
#readout .rsensor{color:var(--gold);font-size:12.5px;margin-top:3px}
#readout dl{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;margin:11px 0 0;font-size:12px}
#readout dt{color:var(--dim)}
#readout dd{margin:0;font-family:var(--mono)}
#readout .note{font-size:11.5px;color:var(--dim);margin:10px 0 0;line-height:1.45}
.chip{display:inline-block;font-size:10px;padding:2px 6px;border-radius:20px;
  border:1px solid currentColor;margin-left:6px;vertical-align:2px}

/* ---------- chronology ---------- */
#story{list-style:none;margin:8px 0 0;padding:0}
#story li{border-left:2px solid var(--line);padding:0 0 16px 14px;margin:0;position:relative;cursor:pointer}
#story li:hover{border-left-color:var(--gold)}
#story li.on{border-left-color:var(--gold)}
#story li::before{content:"";position:absolute;left:-5px;top:6px;width:8px;height:8px;border-radius:50%;
  background:var(--line)}
#story li.on::before,#story li:hover::before{background:var(--gold)}
#story .d{font:600 11px/1 var(--mono);color:var(--gold);letter-spacing:.04em}
#story .t{font-weight:600;margin:3px 0 0}
#story .b{font-size:12.5px;color:#c3ccd6;margin:4px 0 0;line-height:1.5}
#story .look{font-size:12px;color:var(--dim);margin:6px 0 0;border-left:2px solid #3a424c;padding-left:9px}
#story .look b{color:#b8c2cc;font-weight:600}
#story .src{font-size:11px;margin:6px 0 0}
#story .src a{color:#7d8894;margin-right:8px}
li.kind-imagery .d{color:var(--s2)}
li.kind-conflict .d{color:#e07a5f}
li.kind-greening .d{color:#7fc48f}

/* ---------- chart ---------- */
#chart svg{width:100%;height:auto;display:block}
#chart-legend{display:flex;flex-wrap:wrap;gap:10px;font-size:11px;color:var(--dim);margin-top:8px}
#chart-legend i{display:inline-block;width:16px;height:2px;vertical-align:3px;margin-right:5px}

/* ---------- deep archive ---------- */
#deep h3{font-size:13px;margin:16px 0 4px}
#deep p{font-size:12.5px;color:#c3ccd6;margin:4px 0}
#deep code{background:#1b2027;border:1px solid var(--line);border-radius:4px;padding:1px 5px;
  font-family:var(--mono);font-size:11.5px}
#deep a{color:var(--gold)}
#deep .box{border:1px solid var(--line);border-radius:8px;padding:11px 12px;margin:12px 0;background:#0f1318a8}

/* ---------- timeline ---------- */
#timeline{position:absolute;left:0;right:0;bottom:0;height:var(--tl-h);z-index:700;
  background:#0c0f13f2;border-top:1px solid var(--line);backdrop-filter:blur(10px);
  overflow:hidden}
#tl-controls{display:flex;align-items:center;gap:9px;padding:9px 16px 2px}
#tl-controls button{background:#1b2027;border:1px solid var(--line);border-radius:6px;
  width:31px;height:29px;line-height:1;display:grid;place-items:center}
#tl-controls button:hover{background:#252c35;border-color:#3d4650}
#play{font-size:12px}
#tl-date{font-size:16px;font-weight:600;margin-left:6px;white-space:nowrap;flex-shrink:0}
#tl-meta{font-size:12px;color:var(--dim);flex:1 1 auto;overflow:hidden;white-space:nowrap;
  text-overflow:ellipsis}
#speed-wrap{font-size:11px;color:var(--dim);display:flex;align-items:center;gap:7px;flex:0 0 150px}
#speed{width:96px}
#tl-svg{width:100%;height:88px;display:block;cursor:pointer;user-select:none}
#tl-svg text{fill:var(--dim);font:10px var(--sans)}
#tl-svg .yr{fill:#9aa5b1}
#tl-svg .gap rect{fill:#ffffff08}
#tl-svg .gap text{fill:#b09a72;font-size:9.5px}
#tl-svg .tick{cursor:pointer}
#tl-svg .tick:hover rect{filter:brightness(1.6)}
#tl-svg .ev{cursor:pointer;fill:#8b95a1}
#tl-svg .ev:hover,#tl-svg .ev.on{fill:var(--gold)}
#tl-svg .head line{stroke:var(--gold);stroke-width:1.5}
#tl-svg .head polygon{fill:var(--gold)}

/* ---------- swipe compare ---------- */
#swipe{position:absolute;inset:0 0 var(--tl-h) 0;z-index:620;pointer-events:none}
#swipe-handle{position:absolute;top:0;bottom:0;width:26px;margin-left:-13px;pointer-events:auto;
  cursor:ew-resize;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0}
#swipe-handle::before{content:"";position:absolute;top:0;bottom:0;left:12px;width:2px;
  background:var(--gold);box-shadow:0 0 12px #000a}
#swipe-handle span{position:relative;background:var(--gold);color:#12161a;font-size:9px;
  width:22px;text-align:center;line-height:16px}
#swipe-handle span:first-child{border-radius:4px 4px 0 0}
#swipe-handle span:last-child{border-radius:0 0 4px 4px;border-top:1px solid #12161a3d}
#swipe-label-a,#swipe-label-b{position:absolute;bottom:16px;font:600 11px/1 var(--mono);
  background:#0c0f13e6;border:1px solid var(--line);border-radius:5px;padding:6px 9px}
#swipe-label-a{left:70px}
#swipe-label-b{right:calc(var(--panel-w) + 22px)}
@media (max-width:720px){#swipe-label-b{right:22px}}

/* ---------- transient notice ---------- */
#notice{position:absolute;left:50%;transform:translateX(-50%);top:16px;z-index:800;
  max-width:min(560px,calc(100% - 40px));background:#2a1f12f2;border:1px solid #6b542c;
  color:#f0dfc0;border-radius:8px;padding:10px 14px;font-size:12.5px;line-height:1.5;
  box-shadow:0 8px 30px #0009}

/* ---------- no-JS ---------- */
#nojs{position:absolute;inset:0;z-index:850;background:var(--bg);padding:12vh 8vw;
  overflow-y:auto}
#nojs h1{font-size:26px;margin:0 0 12px}
#nojs p{color:var(--dim);max-width:44em;font-size:14px}

/* ---------- markers ---------- */
.pin{background:none;border:0}
.pin i{display:block;width:9px;height:9px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 2px #0009,0 0 10px #000}
.pin.comm i{width:6px;height:6px;background:#8fd0ff;box-shadow:0 0 0 1.5px #0009}
.pin b{position:absolute;left:13px;top:-4px;white-space:nowrap;font:11px/1.4 var(--sans);
  color:#e8ecf1;text-shadow:0 1px 4px #000,0 0 9px #000;font-weight:500}
.pin.comm b{font-size:10px;color:#cfe6ff}
.leaflet-tooltip.tip{background:#12161ae8;border:1px solid var(--line);color:var(--ink);
  font-size:12px;box-shadow:none}
.leaflet-tooltip.tip::before{display:none}

/* ---------- about sheet ---------- */
#about{position:absolute;inset:0;z-index:900;background:#05070ac9;display:grid;place-items:center;
  padding:24px}
#about .sheet{background:#12161a;border:1px solid var(--line);border-radius:12px;max-width:660px;
  max-height:82vh;overflow-y:auto;padding:26px 30px;position:relative}
#about h2{margin:0 0 12px;font-size:19px}
#about h3{font-size:13px;margin:18px 0 4px;color:var(--gold)}
#about p,#about li{font-size:13px;color:#c8d1da;line-height:1.6}
#about a{color:var(--gold)}
#about-close{position:absolute;top:10px;right:14px;background:none;border:0;font-size:24px;
  color:var(--dim);line-height:1}
#about table{width:100%;border-collapse:collapse;font-size:12px;margin:8px 0}
#about th,#about td{text-align:left;padding:5px 8px;border-bottom:1px solid var(--line)}
#about th{color:var(--dim);font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.06em}

@media (max-width:1000px){
  :root{--panel-w:300px}
  #titlecard{max-width:calc(100% - 340px)}
  #titlecard h1{font-size:21px}
}
@media (max-width:720px){
  /* --tl-h must fit the 40px control row plus the 88px SVG, or the axis, the year
     labels and the playhead fall below a viewport that cannot scroll. */
  :root{--panel-w:100%;--tl-h:132px}
  #panel{top:auto;height:min(42vh,340px);bottom:var(--tl-h);border-left:0;
    border-top:1px solid var(--line)}
  #titlecard{max-width:calc(100% - 34px);top:12px;left:14px}
  /* --panel-w is 100% here, so the desktop `right: calc(--panel-w + 26px)` would park
     the stamp entirely off-screen. Pin it to the viewport edge instead, and shrink it
     so it clears the title card. */
  #bigyear{right:14px;top:10px}
  #bigyear .y{font-size:34px}
  #bigyear .m{font-size:10px;letter-spacing:.16em}
  /* The stamp is right-aligned over the same band as the strapline, so the strapline
     yields: it wraps short of the stamp instead of running underneath it. */
  #titlecard .sub{max-width:calc(100% - 150px)}
  #titlecard h1{font-size:19px}
  #titlecard .sub{font-size:12px}
  /* the zoom control sat on top of the panel, hiding the attribution and stealing taps */
  .leaflet-bottom.leaflet-left{bottom:calc(min(42vh,340px) + 6px)}
  #swipe{bottom:calc(min(42vh,340px) + var(--tl-h))}
  #swipe-label-a,#swipe-label-b{bottom:8px;font-size:10px;padding:5px 7px}
  #swipe-label-b{right:14px}
  #swipe-label-a{left:14px}
  #speed-wrap{flex:0 0 auto}
  #speed{width:56px}
  #tl-meta{font-size:11px}
}
@media (max-width:420px){
  #tl-date{font-size:14px}
  #tl-meta{display:none}
}

/* [hidden] must win over the display rules above */
[hidden]{display:none !important}