/* 更新密度 */
html,
.coverage-page {
  width: 100%;
  height: 100%
}


.coverage-page {
  display: grid;
  grid-template-rows: auto 1fr
}


.coverage-page header {
  z-index: 2
}


.coverage-page main {
  position: relative;
  min-height: 0
}


#map {
  position: absolute;
  inset: 0
}


.panel {
  position: absolute;
  z-index: 1;
  top: 12px;
  left: 12px;
  width: min(360px, calc(100% - 24px));
  padding: 14px
}


.panel p {
  margin: 5px 0;
  font-size: .82rem;
  line-height: 1.5
}


.controls {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 10px 0
}


.controls label {
  flex: 0 0 auto;
  font-size: .78rem;
  font-weight: 700
}


.controls select {
  min-height: 36px;
  flex: 1;
  padding: 5px 8px
}


.legend {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
  margin-top: 8px;
  font-size: .7rem;
  text-align: center
}


.legend span::before {
  display: block;
  height: 8px;
  margin-bottom: 2px;
  border-radius: 2px;
  background: var(--color);
  content: ""
}


.legend .is-transparent::before {
  border: 1px dashed #8fa39b;
  background: transparent;
  box-sizing: border-box
}


#status {
  min-height: 1.5em;
  color: #37463f
}


.notice {
  color: #6b3f00
}


.maplibregl-popup-content {
  padding: 10px 12px;
  font-size: .82rem;
  line-height: 1.45
}


@media(max-width:700px) {
  .panel {
    top: 8px;
    left: 8px;
    width: calc(100% - 16px);
    padding: 10px
  }
}