/* District choropleth — sequential single-hue ramp on a quantile scale. */

.map-layout { display: grid; gap: .85rem; grid-template-columns: minmax(0, 1fr) 340px; }
.map-card { position: relative; overflow: hidden; min-height: 620px; }
#aquaMap { height: 620px; width: 100%; background: #eef4f6; }

.leaflet-container { font-family: 'Inter', system-ui, sans-serif; }
.leaflet-control-attribution { font-size: 9px; opacity: .55; }

.map-legend {
    position: absolute; left: 14px; bottom: 44px; z-index: 500;
    background: rgba(255,255,255,.96); border: 1px solid var(--line);
    border-radius: 10px; padding: .6rem .7rem; box-shadow: 0 3px 14px rgba(4,50,63,.12);
    max-width: 210px;
}
.map-legend .lg-title { font-size: .72rem; font-weight: 700; color: var(--ink);
                        margin-bottom: .4rem; }
.map-legend .lg-row { display: flex; align-items: center; gap: .45rem;
                      font-size: .7rem; color: var(--muted); padding: 1px 0; }
.map-legend .lg-sw { width: 16px; height: 11px; border-radius: 3px; flex: none;
                     border: 1px solid rgba(0,0,0,.08); }
.map-note {
    position: absolute; right: 14px; bottom: 44px; z-index: 500;
    background: rgba(255,255,255,.96); border: 1px solid var(--line);
    border-radius: 999px; padding: .28rem .7rem; font-size: .68rem; color: var(--muted);
}
.map-note i { color: var(--brand); margin-right: .25rem; }

.aqua-tip {
    background: #04323f; color: #fff; border: none; border-radius: 8px;
    padding: .45rem .6rem; font-size: .76rem; box-shadow: 0 4px 14px rgba(0,0,0,.22);
}
.aqua-tip::before { border-top-color: #04323f !important; }
.aqua-tip .tip-name { font-weight: 700; }
.aqua-tip .tip-val { color: #9fdbe7; font-variant-numeric: tabular-nums; }

.map-side { display: flex; flex-direction: column; gap: .85rem; }
.side-card { flex: none; }

.prof-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem;
             padding-bottom: .6rem; }
.prof-cell { border: 1px solid var(--line-soft); border-radius: 9px; padding: .5rem .6rem; }
.prof-cell .v { font-size: 1.1rem; font-weight: 800; color: var(--brand-dk);
                font-variant-numeric: tabular-nums; line-height: 1.15; }
.prof-cell .v .u { font-size: .66rem; font-weight: 600; color: var(--muted); margin-left: 2px; }
.prof-cell .l { font-size: .69rem; color: var(--muted); margin-top: .1rem; }
.prof-cell .r { font-size: .64rem; color: var(--brand); font-weight: 700; margin-top: .15rem; }
.prof-cell.is-empty .v { color: #ccd7de; }

.top-list { list-style: none; margin: 0; padding: 0 0 .4rem; counter-reset: t; }
.top-list li {
    display: flex; align-items: center; gap: .55rem; padding: .34rem 0;
    border-bottom: 1px solid var(--line-soft); cursor: pointer; font-size: .8rem;
}
.top-list li:last-child { border-bottom: none; }
.top-list li:hover .nm { color: var(--brand); }
.top-list .rk { width: 18px; font-size: .68rem; font-weight: 700; color: #b6c3cc; flex: none; }
.top-list .nm { flex: 1; min-width: 0; color: var(--ink); overflow: hidden;
                text-overflow: ellipsis; white-space: nowrap; }
.top-list .bar { width: 68px; height: 6px; border-radius: 3px; background: var(--line-soft);
                 flex: none; overflow: hidden; }
.top-list .bar span { display: block; height: 100%; border-radius: 3px; background: var(--brand); }
.top-list .vl { width: 62px; text-align: right; font-variant-numeric: tabular-nums;
                color: var(--ink-2); font-weight: 600; font-size: .76rem; flex: none; }

@media (max-width: 1100px) {
    .map-layout { grid-template-columns: minmax(0, 1fr); }
    .map-card, #aquaMap { min-height: 460px; height: 460px; }
    .prof-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .prof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .map-legend { left: 8px; bottom: 38px; padding: .45rem .55rem; }
}

/* The report's own farm-locations map — a point pattern no table carries. */
.dot-map { margin: 0; text-align: center; }
.dot-map img {
    max-width: 100%; height: auto; border-radius: 8px;
    background: #fff;
}