* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background: #0f1419; color: #e7ecf1; }
#map { position: absolute; top: 0; right: 0; bottom: 0; left: 300px; }
#panel { position: absolute; top: 0; left: 0; bottom: 0; width: 300px; overflow: auto; background: #151b23; border-right: 1px solid #2a3441; padding: 14px 14px 24px; z-index: 2; }
h1 { font-size: 1.05rem; margin: 0 0 4px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.sub { margin: 0 0 10px; color: #9aa7b5; font-size: 0.78rem; }
.api-chip {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid #2a3441;
  color: #8a97a6;
  background: #0f1419;
  line-height: 1.3;
}
.api-chip.live { color: #8fd18f; border-color: #3d8f5a; background: #1a3324; }
.api-chip.offline { color: #e0b34a; border-color: #8a6a20; background: #3d2a10; }
h2 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: #9aa7b5; margin: 12px 0 8px; }
h3 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: #8a97a6; margin: 14px 0 6px; }
.hint { text-transform: none; letter-spacing: 0; font-weight: 400; color: #6b7785; }
.row { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; margin: 4px 0; cursor: pointer; }
.row input { accent-color: #3d9cf0; }
.swatch { width: 12px; height: 12px; border-radius: 2px; border: 1px solid rgba(255,255,255,0.35); flex: 0 0 auto; }
.swatch.round { border-radius: 50%; }
.disabled { opacity: 0.45; pointer-events: none; }
.note { font-size: 0.72rem; color: #8a97a6; line-height: 1.35; margin: 8px 0 0; }
.status-line { font-size: 0.72rem; color: #8a97a6; line-height: 1.35; margin: 12px 0 0; }
#status { white-space: pre-wrap; font-size: 0.72rem; background: #0f1419; border: 1px solid #2a3441; border-radius: 6px; padding: 8px; color: #b7c2cd; max-height: 180px; overflow: auto; }
footer { margin-top: 16px; font-size: 0.72rem; color: #6b7785; line-height: 1.4; }

.demo-banner {
  background: #3d2a10;
  border: 1px solid #c48a2a;
  color: #f2c14e;
  font-size: 0.75rem;
  line-height: 1.35;
  padding: 8px 10px;
  border-radius: 6px;
  margin: 0 0 12px;
}

.group { border-bottom: 1px solid #2a3441; padding: 2px 0 8px; }
.group > summary {
  cursor: pointer;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #9aa7b5;
  padding: 8px 0;
  list-style: none;
}
.group > summary::-webkit-details-marker { display: none; }
.group > summary::before { content: "▸ "; color: #6b7785; }
.group[open] > summary::before { content: "▾ "; }

#find, #geo-search {
  width: 100%;
  margin: 4px 0 6px;
  padding: 7px 8px;
  border-radius: 6px;
  border: 1px solid #2a3441;
  background: #0f1419;
  color: #e7ecf1;
  font-size: 0.82rem;
}
#find:focus, #geo-search:focus { outline: 1px solid #3d9cf0; }
#find-results { max-height: 280px; overflow: auto; margin-top: 4px; }
.find-summary { font-size: 0.72rem; color: #8a97a6; line-height: 1.35; margin: 4px 0 6px; }
.find-summary strong { color: #c5d0db; }
.find-hit {
  display: block;
  width: 100%;
  text-align: left;
  background: #1e2733;
  border: 1px solid #2a3441;
  color: #e7ecf1;
  border-radius: 4px;
  padding: 6px 8px;
  margin: 4px 0;
  cursor: pointer;
  font-size: 0.75rem;
}
.find-hit:hover { background: #263140; }
.find-hit strong { display: block; font-weight: 650; }
.find-hit span { color: #8a97a6; }

.kind-actions { display: flex; gap: 8px; margin: 0 0 6px; }
.kind-actions button { background: #1e2733; color: #c5d0db; border: 1px solid #2a3441; border-radius: 4px; font-size: 0.72rem; padding: 3px 8px; cursor: pointer; }
.kind-actions button:hover { background: #263140; }
#kind-toggles, #mineral-toggles { display: grid; grid-template-columns: 1fr 1fr; gap: 0 6px; }
#kind-toggles .row, #mineral-toggles .row { font-size: 0.78rem; margin: 2px 0; }
#occ-toggles, #holes-toggles, #gchem-toggles { display: grid; grid-template-columns: 1fr 1fr; gap: 0 6px; }
#occ-toggles .row, #holes-toggles .row, #gchem-toggles .row { font-size: 0.78rem; margin: 2px 0; }

.legend { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: 0.68rem; color: #8a97a6; }
.legend .ramp { flex: 1; height: 8px; border-radius: 4px; border: 1px solid #2a3441; }
.legend .ramp.holes { background: linear-gradient(90deg, #1b4d6e, #2a9d8f, #e9c46a, #e76f51); }
.legend .ramp.gchem { background: linear-gradient(90deg, #3c096c, #7b2cbf, #e0aaff, #ff6d00); }
.legend[hidden] { display: none; }
.legend-box { margin-top: 14px; }
.legend-row { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; margin: 3px 0; color: #c5d0db; }
.legend-empty { font-size: 0.72rem; color: #8a97a6; }

.maplibregl-popup-content { background: #1b2430; color: #e7ecf1; border-radius: 8px; padding: 10px 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.45); max-width: 340px; }
.maplibregl-popup-tip { border-top-color: #1b2430 !important; }
.maplibregl-popup-close-button { color: #c5d0db; font-size: 18px; }
.popup-title { font-weight: 650; margin-bottom: 8px; line-height: 1.3; }
.popup-kicker { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: #8a97a6; margin-bottom: 2px; }
.popup-row { display: grid; grid-template-columns: 86px 1fr; gap: 6px; font-size: 0.8rem; margin: 3px 0; }
.popup-row span:first-child { color: #8a97a6; }
.popup-demo { color: #e0b34a; font-style: italic; }

#ground-name, #ground-company, #ground-vs, #ground-titles {
  width: 100%;
  margin: 4px 0;
  padding: 7px 8px;
  border-radius: 6px;
  border: 1px solid #2a3441;
  background: #0f1419;
  color: #e7ecf1;
  font-size: 0.82rem;
}
#ground-name:focus, #ground-company:focus, #ground-vs:focus, #ground-titles:focus { outline: 1px solid #3d9cf0; }
.myground { margin-top: 10px; }
.myground .kind-actions { flex-wrap: wrap; }

.openground { margin: 8px 0 4px; }
#open-ground {
  background: #1e2733;
  color: #c5d0db;
  border: 1px solid #2a3441;
  border-radius: 4px;
  font-size: 0.78rem;
  padding: 5px 10px;
  cursor: pointer;
}
#open-ground:hover { background: #263140; }
#open-ground.active {
  background: #2a5a3a;
  color: #c8f0d0;
  border-color: #3d8f5a;
}
.popup-kicker.popup-open { color: #8fd18f; }
.popup-kicker.popup-held { color: #e0b34a; }

#map-tools {
  position: absolute;
  top: 12px;
  right: 54px;
  z-index: 3;
}
#map-tools button, .pack-row, .popup-link, .popup-pin {
  font: inherit;
}
#map-tools button {
  background: #1b2430;
  color: #e7ecf1;
  border: 1px solid #3d4a5c;
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 0.78rem;
}
#map-tools button.active { background: #3d9cf0; color: #0b1220; border-color: #3d9cf0; }
#draw-box {
  position: fixed;
  border: 2px solid #3d9cf0;
  background: rgba(61, 156, 240, 0.12);
  pointer-events: none;
  z-index: 4;
}
#pack {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 340px;
  background: #151b23;
  border-left: 1px solid #2a3441;
  z-index: 5;
  overflow: auto;
  padding: 12px 14px 20px;
}
#pack[hidden] { display: none; }
#pack header { display: flex; align-items: center; justify-content: space-between; }
#pack h2 { margin: 0; }
#pack-close {
  background: transparent;
  border: 0;
  color: #c5d0db;
  font-size: 22px;
  cursor: pointer;
}
.pack-section { margin: 12px 0; }
.pack-section h3 { margin-bottom: 6px; }
.pack-row {
  display: block;
  width: 100%;
  text-align: left;
  background: #1e2733;
  border: 1px solid #2a3441;
  color: #e7ecf1;
  border-radius: 4px;
  padding: 6px 8px;
  margin: 4px 0;
  cursor: pointer;
  font-size: 0.75rem;
}
.pack-row:hover { background: #263140; }
.pack-row strong { display: block; }
.pack-row span { color: #8a97a6; }
.pack-row a { color: #7ec4ff; }
.legend-row.vs-a .swatch { background: #3d9cf0; }
.legend-row.vs-b .swatch { background: #e83e8c; }

.maplibregl-popup-content { max-width: 380px; }
.popup-links { margin-top: 8px; }
.popup-links h4 {
  margin: 8px 0 4px;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #8a97a6;
}
.popup-link {
  display: block;
  color: #7ec4ff;
  font-size: 0.75rem;
  line-height: 1.35;
  margin: 3px 0;
  text-decoration: none;
}
.popup-link:hover { text-decoration: underline; }
.popup-id { font-size: 0.75rem; color: #c5d0db; margin: 2px 0; }
.popup-pin {
  margin-top: 8px;
  background: #1e2733;
  color: #c5d0db;
  border: 1px solid #2a3441;
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 0.72rem;
}
.popup-more { font-size: 0.72rem; color: #8a97a6; margin-top: 4px; }

.maplibregl-popup-content { max-width: 400px; }
.popup-row { align-items: start; }
.popup-row span:last-child { overflow-wrap: anywhere; }