/* static/satellite.css — the "Use satellite" picker panel, built lazily by
   static/satellite.js. Reuses pond.html's own :root tokens (--band, --accent,
   etc.) rather than inventing a second palette, since this panel lives on
   the same page and the same dark idiom the results band already uses. */

.satPanel{position:fixed;inset:0;z-index:2000;display:flex;
  align-items:center;justify-content:center;padding:16px}
.satPanel[hidden]{display:none}
.satBackdrop{position:absolute;inset:0;background:var(--pt-backdrop)}
.satModal{position:relative;width:90vw;max-width:90vw;max-height:94vh;
  overflow:auto;background:var(--band-2);border:1px solid var(--band-rule);
  border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.5);
  color:var(--band-ink);font:14px/1.5 -apple-system,BlinkMacSystemFont,
  'Segoe UI',Roboto,Helvetica,Arial,sans-serif;padding:18px 20px 20px}
.satHead{display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:-18px;z-index:1001;margin:-18px -20px 16px;padding:16px 20px;
  background:var(--pt-surface);border-bottom:1px solid var(--pt-border);box-shadow:0 2px 8px #0001}
.satHead h2{margin:0;font-size:22px;font-weight:700;letter-spacing:-.02em}
.satClose{background:transparent;border:0;color:var(--band-ink-2);
  font-size:22px;line-height:1;cursor:pointer;padding:2px 8px;border-radius:8px;
  width:40px;min-height:40px;background:var(--pt-paper);border:1px solid var(--pt-border)}
.satClose:hover{background:var(--pt-surface);color:var(--band-ink)}

.satSearchWrap{position:relative;margin-bottom:10px}
.satAddr{width:100%;background:var(--paper);color:var(--band-ink);
  border:1px solid var(--band-rule);border-radius:8px;padding:9px 11px;
  font:inherit;font-size:14px}
.satAddr:focus{outline:2px solid var(--accent);outline-offset:-1px}
.satResults{position:absolute;z-index:5;left:0;right:0;top:calc(100% + 4px);
  margin:0;padding:4px;list-style:none;background:var(--paper);
  border:1px solid var(--band-rule);border-radius:8px;max-height:220px;
  overflow:auto;box-shadow:0 10px 26px rgba(0,0,0,.4)}
.satResults[hidden]{display:none}
.satResults li{padding:8px 9px;border-radius:6px;cursor:pointer;font-size:13px;
  color:var(--band-ink)}
.satResults li:hover,.satResults li.active{background:var(--pt-hover)}
.satResults li.satEmpty,.satResults li.satErrItem{color:var(--band-ink-2);
  cursor:default}
.satResults li.satEmpty:hover,.satResults li.satErrItem:hover{background:none}

.satMapWrap{position:relative;width:100%;height:clamp(360px,64vh,860px);border-radius:10px;
  overflow:hidden;background:#0A1018;border:1px solid var(--band-rule);
  margin-bottom:10px}
.satMap{position:absolute;inset:0}
/* The user pans/zooms the map underneath; the frame itself never receives
   pointer events so a drag started anywhere - including over the frame -
   still moves the map. The huge box-shadow dims everything outside it
   without needing a second overlay element. */
.satFrame{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  /* as large as the map allows, 4:3, never touching its edges */
  height:calc(100% - 48px);width:auto;aspect-ratio:4/3;
  max-width:calc(100% - 48px);
  border:2px solid #fff;border-radius:4px;pointer-events:none;
  box-shadow:0 0 0 2000px rgba(5,10,16,.5)}
.satPrompt{position:absolute;left:12px;right:12px;bottom:10px;margin:0;
  font-size:12.5px;color:#EDEDED;text-shadow:0 1px 3px rgba(0,0,0,.7);
  pointer-events:none}

.satReadoutRow{margin:0 0 10px;font-size:12.5px;color:var(--band-ink-2);
  font-variant-numeric:tabular-nums}

.satErr{background:rgba(224,110,58,.16);border:1px solid rgba(224,135,58,.4);
  color:var(--pt-warning);padding:8px 10px;border-radius:8px;font-size:12.5px;
  margin:0 0 10px}
.satErr[hidden]{display:none}
.satErr a{color:inherit;text-decoration:underline}

.satActions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.satActions button{border:0;border-radius:8px;font:600 13px/1 inherit;
  padding:10px 14px;min-height:44px;cursor:pointer}
.satUse{background:var(--accent);color:#fff}
.satUse:hover:not(:disabled){background:var(--pt-accent-hover)}
.satEnhance{background:var(--pt-surface);color:var(--band-ink)}
.satEnhance:hover:not(:disabled){background:var(--pt-hover)}
.satChoiceHelp{margin:8px 0 0;font-size:12px;color:var(--band-ink-2)}
.satActions button:disabled{opacity:.45;cursor:default}
.satQuota{font-size:12px;color:var(--band-ink-2);margin-left:auto}

.satAttrib{margin:12px 0 0;font-size:11px;color:var(--band-ink-2)}

@media (max-width:640px){
  .satModal{padding:14px}
  .satMapWrap{height:280px}
  .satQuota{margin-left:0;width:100%;order:3}
}

/* Ground terrain. The picker's control is a card of its own above the capture
   buttons: it was previously a line of text wedged against them and got missed. */
.satTerrain{margin:12px 0 16px;padding:12px 14px;border:1px solid var(--rule);
  border-radius:10px;background:var(--pt-surface);display:grid;gap:6px}
.satTerrain[data-state="unavailable"]{opacity:.6}
.satTerrainPick{display:flex;align-items:center;gap:10px;cursor:pointer;
  color:var(--band-ink);min-height:28px}
.satTerrain[data-state="unavailable"] .satTerrainPick{cursor:default}
.satTerrainPick input{width:20px;height:20px;flex:none;accent-color:var(--accent)}
.satTerrainLabel{font:600 15px/1.2 inherit}
.satTerrainNote{font-size:12px;color:var(--band-ink-2);line-height:1.45}

#terrain-import-panel{display:grid;gap:8px;margin-top:10px;
  padding-top:10px;border-top:1px solid var(--rule)}
.terrainHeading{margin:0;font-size:13px;font-weight:600;color:var(--text)}
#terrain-import-panel .btnRow{display:flex;flex-wrap:wrap;gap:8px}
#terrain-import-panel .btnRow button{flex:1 1 120px;min-height:44px}
.terrainToggle{display:flex;align-items:center;gap:8px;font-size:12px;
  color:var(--text-2);cursor:pointer}
.terrainToggle input{width:16px;height:16px;flex:none}
.terrainPreview{border:1px solid var(--rule);border-radius:8px;overflow:hidden;
  background:var(--bg-deep);line-height:0}
.terrainPreview canvas{display:block;width:100%;height:auto;image-rendering:auto}