/* Shared on-map legend / key control (HL.MapLegend, map-legend.js).
   Styled to sit alongside the existing .gis-legend constraint legend and the
   sage/warm-neutral design system. Used on site-screening, project-results,
   the assessment findings maps, and the consultant maps workspace. */

.map-legend {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    font-family: var(--font-sans, "IBM Plex Sans", system-ui, sans-serif);
    font-size: 0.78rem;
    color: var(--color-text);
    max-width: 240px;
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.map-legend-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 10px;
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    background: rgba(255, 255, 255, 0.98);
}

.map-legend-title {
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.01em;
}

.map-legend-toggle {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
    padding: 0 4px;
    color: var(--color-text-secondary);
}
.map-legend-toggle:hover { color: var(--color-text); }

.map-legend-body { padding: 6px 10px 8px; }

.map-legend-cat { margin-top: 6px; }
.map-legend-cat:first-child { margin-top: 0; }

.map-legend-cat-title {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    margin: 4px 0 3px;
    font-weight: 600;
}

.map-legend-item {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 2px 0;
    line-height: 1.25;
}

/* Toggled-off / hidden layers stay listed but dimmed. */
.map-legend-item--off { opacity: 0.4; }

.map-legend-swatch {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(0, 0, 0, 0.18);
}

/* Approximate / source-rendered swatch (hatched) — same visual cue the
   "All GIS Layers" panel uses for layers whose color the source controls. */
.map-legend-swatch--approx {
    background-image: repeating-linear-gradient(
        45deg, var(--color-text-muted), var(--color-text-muted) 3px, var(--color-border) 3px, var(--color-border) 6px);
}

/* Real per-class symbol image returned by an ArcGIS /legend endpoint. */
.map-legend-swatch-img {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
}

.map-legend-label {
    flex: 1 1 auto;
    word-break: break-word;
}

/* Indented list of names under a solid entry (e.g. species in a range layer). */
.map-legend-sublist {
    list-style: none;
    margin: 1px 0 3px 21px;   /* align under the label, past the swatch */
    padding: 0;
}
.map-legend-subitem {
    font-size: 0.72rem;
    color: var(--color-text-secondary);
    line-height: 1.3;
    padding: 1px 0;
    font-style: italic;
}
/* Per-species swatch on a sub-row, so the key's color matches that species on
   the map. Smaller than a top-level swatch and inline with the italic name. */
.map-legend-swatch--sub {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    margin-right: 5px;
    vertical-align: baseline;
}

/* A server layer's name heading its symbol classes. */
.map-legend-group { margin: 3px 0; }
.map-legend-group-name {
    font-weight: 600;
    font-size: 0.72rem;
    margin-bottom: 2px;
}
.map-legend-group .map-legend-item { padding-left: 4px; }

/* Small spinner shown while a server legend is still being fetched. */
.map-legend-pending {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: map-legend-spin 0.7s linear infinite;
}

@keyframes map-legend-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .map-legend-pending { animation: none; }
}

/* ===========================================================
   Hydrology feature labels — bound as permanent Leaflet
   tooltips by gis-layers.js when a hydro (NHD / NWI) feature
   renders. Visibility is zoom-gated by JS; the styling here
   keeps them quiet enough to coexist with the parcel polygon.
   =========================================================== */
.leaflet-tooltip.map-hydro-label {
    font-family: var(--font, system-ui, sans-serif);
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--color-primary);
    background: rgba(255, 255, 255, 0.75);
    border: none;
    border-radius: var(--radius-sm);
    padding: 1px 5px;
    box-shadow: none;
    pointer-events: none;
    white-space: nowrap;
}
.leaflet-tooltip.map-hydro-label::before {
    display: none;        /* no callout arrow on center-direction tooltips */
}

/* Click-to-identify popup (HL.MapEngine.popupHtmlFor) — shared by the
   site-screening map and the consultant Maps tab so both render identically. */
.map-popup-title {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--color-text);
    margin-bottom: 4px;
}
.map-popup-name {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: 2px;
}
.map-popup-detail {
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin-bottom: 4px;
}
.map-popup-cite {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    font-style: italic;
    border-top: 1px solid var(--color-border);
    padding-top: 5px;
}
.map-popup-sub {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    margin-bottom: 4px;
}

/* Shared layer-panel empty-state hints. The HL.MapWorkspace panel (.layer-item
 * rows, built by map-workspace.js) mounts on EVERY map surface — consultant
 * workspace, site-screening, project-assessment — so these live here in the
 * shared map stylesheet (base.html loads it everywhere), not in a per-page CSS.
 * onState toggles the class; both are cleared on toggle-off. A muted inline note
 * so an enabled-but-blank layer never reads as broken. */
.layer-item.is-empty > label::after,
.layer-item.is-zoom > label::after {
    margin-left: 0.4em;
    font-size: 0.72rem;  /* meta ramp */
    font-style: italic;
    color: var(--color-text-muted);
}
.layer-item.is-empty > label::after { content: "none in view"; }
.layer-item.is-zoom > label::after { content: "zoom in for detail"; }

/* Project-site marker — the SAME draggable golden dot on every map (pick /
   site / per-topic assessment), built by HL.siteMarker in _core.js. The warm
   --color-golden token with a white ring reads clearly over satellite imagery.
   Neutralize Leaflet's default .leaflet-div-icon white box/border. */
.hl-site-marker {
    background: transparent;
    border: 0;
}
.hl-site-marker-dot {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-golden);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(44, 37, 32, 0.35);
}
.leaflet-marker-draggable .hl-site-marker-dot { cursor: grab; }
.leaflet-marker-draggable:active .hl-site-marker-dot { cursor: grabbing; }