html,
body {
  height: 100%;
  margin: 0;
  font: 13px/1.4 system-ui, -apple-system, Segoe UI, Arial, sans-serif;
}

body {
  display: flex;
  flex-direction: column;
}

#bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 8px 12px;
  background: #f4f4f4;
  border-bottom: 1px solid #ccc;
  flex: none;
}

#bar .spacer {
  flex: 1;
}

#version {
  color: #999;
  font: 11px/1 ui-monospace, Menlo, Consolas, monospace;
}

#about {
  max-width: 28em;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 4px 18px 14px;
}

#about::backdrop {
  background: #0005;
}

#about form {
  text-align: right;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  color: #333;
}

.legend .swatch {
  display: inline-block;
  flex: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid #00000055;
  margin: 0 4px 0 10px;
}

#status {
  color: #555;
  min-width: 16em;
  text-align: right;
}

/* Phones: bigger type and touch targets. The spacer becomes a full-width,
   zero-height item, which — since #bar wraps — forces everything after it
   (the live status and controls) onto its own line below the title and
   legend, instead of being crushed into one unreadable row. */
@media (max-width: 640px) {
  html,
  body {
    font-size: 16px;
  }

  #bar {
    padding: 10px 12px;
  }

  #bar .spacer {
    flex-basis: 100%;
    height: 0;
  }

  #status {
    min-width: 0;
    flex: 1;
    text-align: left;
    /* The message's length changes on every refresh ("N mapped" vs "N
       mapped, M not located, looking up K more…"), which — if allowed to
       wrap — changes how many lines it takes, changing the header's total
       height, which shoves the map below it up/down on every refresh.
       Keep it to one line, truncated, so the header's height stays put. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  button,
  #bar label {
    padding: 8px 14px;
  }

  #bar input[type='checkbox'] {
    width: 20px;
    height: 20px;
    vertical-align: middle;
  }

  .tip {
    font-size: 15px;
  }
}

#progress {
  width: 8em;
}

#progress[hidden] {
  /* visibility, not display: none — keeps its slot in the header's flex
     row reserved, so the header doesn't reflow every time this appears or
     disappears as incidents finish resolving. */
  visibility: hidden;
}

button {
  font: inherit;
  padding: 3px 10px;
}

#map {
  flex: 1;
  min-height: 0;
}

/* The pin itself: an SVG teardrop whose fill is set per incident, so it
   matches the color of that incident's row on the city's page. */
.pin svg {
  display: block;
  filter: drop-shadow(0 1px 1px #0006);
}

.pin.new svg {
  animation: drop 0.4s ease-out;
}

@keyframes drop {
  from {
    transform: translateY(-10px) scale(0.6);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

.tip {
  font: 13px/1.5 system-ui, -apple-system, Segoe UI, Arial, sans-serif;
}

.tip .type {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 3px;
}

.tip b {
  display: inline-block;
  min-width: 6.5em;
  color: #555;
  font-weight: 600;
}