.mapset-detail-map-card,
.mapset-detail-panel {
  border: 1px solid var(--ar-border-color);
  border-radius: 1rem;
  background: var(--ar-body-bg);
}

.mapset-detail-map-card,
.mapset-detail-panel { padding: 1.25rem; }

.mapset-detail-map {
  height: clamp(22rem, 55vh, 38rem);
  overflow: hidden;
  background: var(--ar-gray-100);
  border: 1px solid var(--ar-border-color);
  border-radius: .75rem;
}

.mapset-detail-map .leaflet-container { width: 100%; height: 100%; }

.mapset-sld-control { width: min(100%, 24rem); }

.mapset-detail-panel dl {
  display: grid;
  grid-template-columns: minmax(7rem, .8fr) minmax(0, 1.2fr);
  gap: .65rem 1rem;
  margin: 0;
}

.mapset-detail-panel dt { color: var(--ar-gray-600); font-weight: 500; }
.mapset-detail-panel dd { margin: 0; overflow-wrap: anywhere; }

.mapset-field-table {
  max-height: 20rem;
  overflow: auto;
}

.mapset-field-table thead { position: sticky; top: 0; z-index: 1; }
.mapset-download-note { padding: .75rem; background: var(--ar-gray-100); border-radius: .5rem; }

@media (max-width: 767.98px) {
  .mapset-detail-map-card,
  .mapset-detail-panel { padding: 1rem; }
  .mapset-detail-map { height: 24rem; }
  .mapset-detail-actions { display: grid !important; width: 100%; }
  .mapset-detail-actions .btn { min-height: 2.75rem; }
  .mapset-sld-control { width: 100%; }
  .mapset-sld-control .input-group { flex-wrap: wrap; }
  .mapset-sld-control .form-select { width: 100%; flex-basis: 100%; border-radius: var(--ar-border-radius) !important; }
  .mapset-sld-control .btn { width: 100%; margin-top: .5rem; border-radius: var(--ar-border-radius) !important; }
}