/* ------------------------------------------------------------------ *
 * coverage.css — styling for the "Predicted coverage" section.
 * Reuses the page's existing CSS variables (--fw-green, --line, etc.).
 * ------------------------------------------------------------------ */

.coverage{
  margin-top:22px;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:18px 20px;box-shadow:0 1px 3px rgba(20,50,43,.05)
}
.coverage-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  position:relative;z-index:1}
.coverage-bar h2{font-size:17px;margin:0;color:var(--fw-green)}
.coverage-actions{display:flex;gap:8px;align-items:center}

.cov-controls{display:flex;flex-wrap:wrap;gap:18px 26px;align-items:flex-end;margin:14px 0 6px}
.cov-group{display:flex;flex-direction:column;gap:6px}
.cov-group > .cov-label{font-size:11px;font-weight:bold;color:#5d6f62;text-transform:uppercase;letter-spacing:.04em}
.cov-segwrap{display:flex;flex-wrap:wrap;gap:6px}
.cov-seg{
  border:1px solid var(--line);background:#fff;color:var(--fw-dark);
  font-size:13px;padding:7px 13px;border-radius:8px;cursor:pointer;white-space:nowrap;
  transition:background .12s ease,border-color .12s ease,color .12s ease
}
.cov-seg:hover{border-color:var(--fw-green)}
.cov-seg.on{background:var(--fw-green);color:#fff;border-color:var(--fw-green)}

.cov-check{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--fw-dark);cursor:pointer}
.cov-check input{width:16px;height:16px;accent-color:var(--fw-green)}

.cov-run{
  border:1px solid var(--fw-green);background:var(--fw-green);color:#fff;
  font-size:13px;font-weight:bold;padding:8px 16px;border-radius:8px;cursor:pointer
}
.cov-run:hover{background:var(--fw-dark);border-color:var(--fw-dark)}

.cov-status{font-size:12.5px;color:#5d6f62;margin:6px 2px 10px;min-height:16px}
.cov-status.busy{color:var(--fw-green);font-weight:bold}

/* position+z-index:0 boxes Leaflet's own stacking (its panes/controls run up to
   z-index 1000) inside the map, so it can't paint over the page's buttons. */
#covmap{height:460px;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:#eef3ee;
  position:relative;z-index:0}
.cov-heat{image-rendering:auto}

.cov-legend{margin:12px 2px 0;max-width:420px}
.cov-legend-bar{height:12px;border-radius:6px;border:1px solid var(--line)}
.cov-legend-labels{display:flex;justify-content:space-between;font-size:10.5px;color:#5d6f62;margin-top:3px}

.cov-explain{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
.cov-explain > summary{
  cursor:pointer;font-size:13.5px;font-weight:bold;color:var(--fw-green);list-style:none;
  display:inline-flex;align-items:center;gap:7px
}
.cov-explain > summary::-webkit-details-marker{display:none}
.cov-explain > summary::before{content:'ⓘ';font-weight:normal}
.cov-explain[open] > summary::before{content:'▾'}
.cov-explain-body{font-size:12.5px;color:var(--fw-dark);line-height:1.5;margin-top:8px}
.cov-explain-body ul{margin:8px 0 0;padding-left:18px}
.cov-explain-body li{margin:5px 0}
.cov-explain-body a{color:var(--fw-green)}
.cov-warn,.cov-explain-body .cov-warn{color:var(--fw-coral);font-weight:bold}

@media (max-width:760px){
  #covmap{height:340px}
  .cov-controls{gap:14px 18px}
}