* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #0b0d12;
  color: #e7e9ee;
}

#map {
  position: absolute;
  inset: 0;
  background: #0b0d12;
}

#panel {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1000;
  width: 240px;
  max-height: calc(100% - 24px);
  overflow-y: auto;
  background: rgba(16, 19, 27, 0.92);
  border: 1px solid #262b38;
  border-radius: 10px;
  padding: 14px 16px;
  backdrop-filter: blur(6px);
}

#panel h1 {
  margin: 0;
  font-size: 18px;
  letter-spacing: 0.02em;
}

#panel .sub {
  margin: 2px 0 10px;
  font-size: 12px;
  color: #8b93a7;
}

#panel h2 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8b93a7;
  margin: 14px 0 6px;
}

#panel section { margin-bottom: 4px; }

#panel label {
  display: block;
  font-size: 13px;
  margin: 8px 0;
}

#panel select {
  display: block;
  width: 100%;
  margin-top: 4px;
  background: #1a1f2b;
  color: #e7e9ee;
  border: 1px solid #303748;
  border-radius: 6px;
  padding: 5px 6px;
  font-size: 13px;
}

#panel input[type="range"] {
  display: block;
  width: 100%;
  margin-top: 4px;
}

#panel input[type="checkbox"] { margin-right: 7px; }

#buckets label {
  display: flex;
  align-items: center;
  font-size: 13px;
  margin: 6px 0;
  cursor: pointer;
}

#buckets .count {
  margin-left: auto;
  font-size: 11px;
  color: #8b93a7;
}

#export {
  width: 100%;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid #3a4257;
  background: #232a3b;
  color: #e7e9ee;
  font-size: 13px;
  cursor: pointer;
}

#export:hover { background: #2b3348; }

.note {
  font-size: 10px;
  color: #8b93a7;
  margin: 6px 0 8px;
}

#export:disabled { opacity: 0.7; cursor: progress; }

.credit {
  font-size: 10px;
  color: #626b80;
  margin: 12px 0 0;
}

.leaflet-container { background: #0b0d12; }

/* Shows exactly what an aspect-constrained export will contain. */
#export-frame {
  position: absolute;
  display: none;
  pointer-events: none;
  z-index: 500;
  border: 1px dashed rgba(255, 255, 255, 0.75);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.35);
}

/* Panel collapse. The button only appears on narrow screens, where the panel
 * becomes a bottom sheet -- pinned top-right it covered a third of a phone
 * screen with the map behind it and no way to get it out of the way. */
#panel-toggle {
  display: none;
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid #3a4257;
  background: #232a3b;
  color: #e7e9ee;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 600px) {
  #panel {
    top: auto;
    left: 8px;
    right: 8px;
    bottom: 8px;
    width: auto;
    max-height: 52vh;
    padding-right: 52px;  /* clear of the toggle */
  }
  #panel-toggle { display: block; }
  #panel.collapsed { max-height: none; overflow: hidden; }
  #panel.collapsed section,
  #panel.collapsed .credit { display: none; }
  #panel.collapsed .sub { margin-bottom: 0; }
  /* Keep the basemap attribution clear of the sheet -- OSM and Carto both
   * require it to stay visible. */
  .leaflet-bottom.leaflet-right { bottom: 80px; }
}

/* The map never rendered, so this is the entire page. */
#fatal {
  position: absolute;
  inset: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  background: #0b0d12;
}

#fatal h1 { margin: 0; font-size: 20px; letter-spacing: 0.02em; }

#fatal p {
  color: #8b93a7;
  font-size: 13px;
  max-width: 34ch;
  margin: 8px 0 16px;
}

#fatal button {
  padding: 8px 18px;
  border-radius: 6px;
  border: 1px solid #3a4257;
  background: #232a3b;
  color: #e7e9ee;
  font-size: 13px;
  cursor: pointer;
}

#fatal button:hover { background: #2b3348; }

/* Licence warning under the export estimate: visible enough to read before
 * clicking, not so loud it looks like an error. */
.note.warn {
  color: #d7a45f;
  border-left: 2px solid #6b5220;
  padding-left: 7px;
}

/* Print preview. Shown after the file is rendered and before any money
   changes hands, because the poster is made to order and cannot be restocked
   if it is not what the buyer pictured. */
#preview { position: fixed; inset: 0; z-index: 2000; display: flex;
           align-items: center; justify-content: center; }
/* The `hidden` attribute only sets display:none in the UA stylesheet, so any
   author rule with a display beats it -- and the rule above has one. Without
   this the dialog is on screen from page load, holding an empty image. */
#preview[hidden] { display: none; }
#preview .preview-backdrop { position: absolute; inset: 0;
                             background: rgba(0, 0, 0, 0.72); }
#preview .preview-box { position: relative; background: #14181f;
  border: 1px solid #2b3442; border-radius: 6px; padding: 16px;
  max-width: min(90vw, 560px); max-height: 92vh; overflow: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6); }
#preview h3 { margin: 0 0 10px; font-size: 14px; font-weight: 600; }
#preview img { display: block; max-width: 100%; max-height: 62vh;
  margin: 0 auto 10px; background: #05070c; border: 1px solid #2b3442; }
#preview .preview-actions { display: flex; gap: 8px; justify-content: flex-end; }
#preview .preview-actions button { width: auto; padding: 7px 14px; }
#preview-cancel { background: #222a35; }