/* Grouped map layers (piece 8e) — web/map-layers.js */
.leaflet-control-layers.ml-bases-only .leaflet-control-layers-separator,
.leaflet-control-layers.ml-bases-only .leaflet-control-layers-overlays { display: none; }

.ml-box { background: #fff; border-radius: 6px; font: 12px/1.35 system-ui, sans-serif; color: #222; max-width: min(300px, calc(100vw - 72px)); }
.ml-toggle { display: block; width: 100%; border: 0; background: #1f3864; color: #fff; font-weight: 600; padding: 6px 10px; border-radius: 6px; cursor: pointer; text-align: left; }
.ml-panel { padding: 6px 8px 8px; max-height: min(60vh, 520px); overflow-y: auto; overflow-x: hidden; }
.ml-status { color: #666; font-size: 11px; margin-bottom: 4px; }
.ml-box details { border-top: 1px solid #eee; padding: 3px 0; }
.ml-box summary { cursor: pointer; font-weight: 600; padding: 3px 0; }
.ml-count { font-weight: 400; color: #777; font-size: 11px; }
.ml-row { display: flex; align-items: center; gap: 6px; padding: 2px 0 2px 4px; cursor: pointer; min-width: 0; }
.ml-row input { margin: 0; flex: none; }
.ml-sw { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.ml-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-note { color: #777; font-size: 11px; flex: none; }
.ml-warn { color: #b26a00; }
.ml-off { cursor: help; color: #999; }
.ml-off .ml-note { font-style: italic; }
.ml-sub { color: #888; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; margin: 4px 0 1px 4px; }
.ml-legacy .ml-name { font-style: normal; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ml-box { background: #1e1f22; color: #e6e6e6; }
  :root:not([data-theme="light"]) .ml-box details { border-color: #333; }
}

/* Layers without data wait under "Coming later" */
.ml-later > summary{color:var(--muted,#6b7280)}