:root{
  --bg:#0b0c0f; /* near-black */
  --panel:#141720; /* panel bg */
  --muted:#8b93a7; /* labels */
  --text:#e9eef9; /* bright text */
  --accent:#4c8bf5; /* focus ring */
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font:14px/1.35 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"}

#app{display:grid;grid-template-columns:320px 1fr;grid-template-rows:100vh;gap:12px;padding:12px}
#panel{background:var(--panel);border:1px solid #1d2230;border-radius:14px;padding:14px;display:flex;flex-direction:column;min-height:0}
#panel h1{font-size:16px;margin:0 0 8px 0}
#panel .sub{color:var(--muted);font-size:12px;margin-bottom:12px}
#panel .row{margin-bottom:12px}
#panel label{display:block;color:var(--muted);font-size:12px;margin-bottom:6px}
#panel input[type="file"]{width:100%}

.value-label {
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  text-shadow:
    0 0 2px #000,
    0 0 4px #000,
    0 0 6px #000;  /* halo so it stands out on heatmap */
  pointer-events: none;
}

.controls{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.controls .stack{grid-column: span 2;}
.stack{display:flex;flex-direction:column;gap:6px}
input[type="range"]{width:100%}
select, input[type="number"], input[type="text"], input[type="range"], button{
  background:#0f121a;border:1px solid #23283a;color:var(--text);border-radius:10px;padding:8px;outline:none
}
button{cursor:pointer}
button.primary{background:#203054}
button:hover{border-color:#3a4260}
button:focus{box-shadow:0 0 0 3px color-mix(in hsl, var(--accent) 50%, transparent)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.hint{color:var(--muted);font-size:11px}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid #2a3146;border-radius:999px;font-size:12px}

#mapWrap{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  border:1px solid #1d2230;
  height:100%;          /* keep the map area filled */
  min-height:320px;     /* avoid collapsing to 0 height */
}
#map{height:100%;width:100%;position:relative}

/* Keep the heat canvas above tiles */
#heatCanvas{
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 650; /* above tiles/overlays */
}

/* Let Leaflet keep its defaults (optional override shown for clarity) */
.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }  /* lines/drawings, etc. */
.leaflet-marker-pane  { z-index: 600; }

.legend{
  position:absolute;bottom:14px;left:14px;background:rgba(14,16,22,.9);
  border:1px solid #252c42;border-radius:10px;padding:10px;backdrop-filter: blur(4px);
  z-index:360;
}
.legend .bar{height:10px;width:220px;border-radius:6px;
  background: linear-gradient(90deg, #0000ff, #00ffff, #00ff00, #ffff00, #ff0000); /* heat */
}
.legend .ticks{display:flex;justify-content:space-between;color:#bcc4d6;font-size:11px;margin-top:6px}

#hover{
  position:absolute;top:14px;left:14px;background:rgba(14,16,22,.9);
  border:1px solid #252c42;border-radius:10px;padding:8px 10px;font-size:12px;display:none;
  z-index:900; /* above heat canvas */
}
.debug-note, #debugStatus{
  position:absolute;
  top:10px;
  right:10px;
  background:rgba(0,0,0,0.65);
  border:1px solid #444d66;
  color:#f5f6ff;
  padding:6px 10px;
  border-radius:8px;
  font-size:11px;
  z-index:380;
  pointer-events:none;
  max-width:260px;
}
.kbd{display:inline-block;border:1px solid #3a4260;border-bottom-width:2px;border-radius:6px;padding:2px 6px;font-size:11px;background:#0b0d14}
.rowhr{height:1px;background:#21283a;margin:8px 0}
a.link{color:#a9c4ff;text-decoration:none}

/* ---- site nav: link out to other tuckermojo.com apps ---- */
#siteNav{margin-top:auto;padding-top:4px}
#siteNav .navLabel{color:var(--muted);font-size:11px;margin-bottom:6px}
#siteNav a{color:var(--text);font-size:12px;text-decoration:none;display:block;margin-bottom:6px;
  border:1px solid #23283a;background:#0f121a;border-radius:10px;padding:7px 10px}
#siteNav a:hover{border-color:var(--accent);color:#fff}