:root {
  --wc-blue: #2C5697;
  --wc-yellow: #FCC917;
  --ink: #1d2433;
  --muted: #5d6779;
  --line: #dde2ea;
  --surface: #ffffff;
  --high: #D7301F;
  --medium: #F28E2B;
  --low: #F2C14E;
  --ok: #2E9E5B;
  --warn: #E0A100;
  --bad: #D7301F;
  --shadow: 0 2px 10px rgba(20, 30, 50, .18);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #e9edf2; }
#map { position: fixed; inset: 0; }

.card {
  position: fixed;
  z-index: 1000;
  background: var(--surface);
  border-radius: 10px;
  box-shadow: var(--shadow);
}

/* Header */
.brand {
  top: 12px; left: 56px;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px 10px 0;
  overflow: hidden;
}
.brand-bar { align-self: stretch; width: 6px; background: var(--wc-yellow); margin: -10px 0; }
.brand h1 { margin: 0; font-size: 18px; letter-spacing: .2px; color: var(--wc-blue); }
.brand p { margin: 1px 0 0; font-size: 12px; color: var(--muted); }
.chips { display: flex; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; padding: 4px 9px; border-radius: 999px;
  background: #f2f4f8; white-space: nowrap;
}
.chip i { width: 8px; height: 8px; border-radius: 50%; background: #aab2c0; }
.chip b { font-weight: 600; }
.chip.ok i { background: var(--ok); }
.chip.warn i { background: var(--warn); }
.chip.bad i { background: var(--bad); }
.chip.bad { background: #fde8e6; }

/* Filter panel */
.panel {
  top: 12px; right: 12px; width: 250px;
  padding: 14px;
  display: flex; flex-direction: column; gap: 12px;
  max-height: calc(100% - 24px); overflow: auto;
}
.field { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--muted); border: 0; padding: 0; margin: 0; }
.field legend, .field .label { padding: 0; margin-bottom: 5px; }
select {
  font: inherit; font-size: 14px; font-weight: 400; color: var(--ink);
  padding: 7px 8px; border: 1px solid var(--line); border-radius: 7px; background: #fff;
}
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 400; color: var(--ink); }
.regions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.regions button {
  font: inherit; font-size: 13px; padding: 7px 6px; cursor: pointer;
  border: 1px solid var(--line); background: #fff; border-radius: 7px; color: var(--wc-blue);
}
.regions button:hover { border-color: var(--wc-blue); background: #f2f6fc; }
.count { margin: 0; font-size: 13px; color: var(--ink); }
.count .warn { color: var(--bad); display: block; margin-top: 4px; }
.about { font-size: 12px; color: var(--muted); line-height: 1.45; }
.about summary { cursor: pointer; color: var(--wc-blue); font-weight: 600; }
.about p { margin: 6px 0 0; }

.toggle { display: none; }

/* Legend */
.legend {
  bottom: 24px; left: 12px;
  display: flex; gap: 12px; align-items: center;
  padding: 8px 12px; font-size: 12px;
}
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(0,0,0,.45); }
.dot.high { background: var(--high); }
.dot.medium { background: var(--medium); }
.dot.low { background: var(--low); }
.legend .fade { color: var(--muted); }

/* Popup */
.fw-pop { font-size: 13px; line-height: 1.45; min-width: 220px; }
.fw-pop h3 { margin: 0 0 4px; font-size: 14px; }
.fw-pop .pill { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; color: #fff; margin-right: 6px; vertical-align: 1px; }
.fw-pop .pill.high { background: var(--high); }
.fw-pop .pill.medium { background: var(--medium); }
.fw-pop .pill.low { background: var(--low); color: #3a2c00; }
.fw-pop table { border-collapse: collapse; margin-top: 4px; }
.fw-pop td { padding: 1px 10px 1px 0; vertical-align: top; }
.fw-pop td:first-child { color: var(--muted); }
.fw-pop .id { margin-top: 6px; font-size: 11px; color: var(--muted); font-family: ui-monospace, Menlo, monospace; word-break: break-all; }

/* Phone */
@media (max-width: 640px) {
  .brand { left: 12px; right: 12px; top: 12px; flex-wrap: wrap; row-gap: 6px; padding-right: 10px; }
  .leaflet-top.leaflet-left { top: 96px; }
  .toggle {
    display: block; top: auto; bottom: 24px; right: 12px;
    font: inherit; font-size: 14px; font-weight: 600; color: var(--wc-blue);
    border: 0; padding: 10px 16px; cursor: pointer;
  }
  .panel { display: none; top: auto; bottom: 74px; right: 12px; left: 12px; width: auto; max-height: 60%; }
  .panel.open { display: flex; }
  .legend { bottom: 24px; gap: 8px; }
  .leaflet-bottom.leaflet-right { bottom: 64px; }
  .legend .fade { display: none; }
}