/* Address symbols, not building outlines or live person positions. */
.map .map-pin.pictogram {
  --marker-ink: #245952;
  --marker-surface: #fff;
  width: 46px;
  min-width: 46px;
  min-height: 46px;
  height: 46px;
  padding: 0;
  overflow: visible;
  max-width: none;
  display: grid;
  place-items: center;
  border: 2px solid var(--marker-ink);
  border-radius: 14px;
  background: var(--marker-surface);
  color: var(--marker-ink);
  box-shadow: 0 3px 9px #163f3726, 0 0 0 2px #ffffffe0;
  line-height: 1;
  z-index: 3;
  transition: box-shadow 160ms ease, background 160ms ease;
}
.map .map-pin.pictogram:hover { z-index: 8; box-shadow: 0 3px 14px #163f3740, 0 0 0 3px #fff; }
.map .map-pin.pictogram.selected { border-color: var(--marker-ink); background: var(--marker-surface); box-shadow: 0 0 0 5px #057e6755, 0 3px 12px #153c3340; z-index: 8; }
.map .map-pin.pictogram.state-tasks { --marker-ink: #225cb4; --marker-surface: #eff5ff; }
.map .map-pin.pictogram.state-overdue { --marker-ink: #925a0d; --marker-surface: #fff5dc; }
.map .map-pin.pictogram.state-offline { --marker-ink: #64727a; --marker-surface: #f1f3f4; }
.map .map-pin.pictogram.debt { --marker-ink: #a04540; --marker-surface: #fff3f1; }
.map .map-pin.pictogram.debt.settled { --marker-ink: #64727a; --marker-surface: #f1f3f4; }
.map .map-pin.pictogram.approximate::before {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1.5px dashed #4a6961;
  border-radius: 18px;
  pointer-events: none;
}
.marker-glyph { display: grid; place-items: center; }
.marker-code {
  position: absolute;
  top: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 6px;
  background: #fffffff5;
  border: 1px solid #d5e1dc;
  border-radius: 5px;
  color: #23483f;
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
}
.marker-reading, .marker-debt {
  position: absolute;
  top: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 23px;
  padding: 3px 6px;
  background: #fff;
  color: #9b482a;
  border: 1px solid #d9e1de;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.marker-code + .marker-reading, .marker-code + .marker-debt { top: auto; bottom: calc(100% + 4px); }
.marker-reading.is-unknown { color: #64727a; background: #f1f3f4; }
.marker-debt { color: #a04540; }
.marker-state, .marker-settled {
  position: absolute;
  right: -5px;
  top: -5px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: #fff;
}
.marker-settled { color: #477260; }
.map .map-pin.pictogram.worker { border-radius: 50%; z-index: 5; }
.marker-initials {
  position: absolute;
  right: -8px;
  bottom: -7px;
  padding: 4px;
  min-width: 23px;
  border-radius: 8px;
  border: 1px solid var(--marker-ink);
  background: #fff;
  font-size: 10px;
  font-weight: 800;
  color: var(--marker-ink);
}
.map .map-pin.pictogram.trade-yard { --marker-ink: #377641; --marker-surface: #f1faef; }
.map .map-pin.pictogram.trade-plumber { --marker-ink: #206b9c; --marker-surface: #edf7ff; }
.map .map-pin.pictogram.trade-electrician { --marker-ink: #98620c; --marker-surface: #fff7df; }
.map .map-pin.pictogram.trade-cleaner { --marker-ink: #865292; --marker-surface: #faf0fd; }
.map .map-pin.pictogram.trade-master { --marker-ink: #225c58; --marker-surface: #eaf7f2; }
.map .map-pin.pictogram.cluster {
  border-radius: 50%;
  width: 48px;
  height: 48px;
  min-width: 48px;
  background: #225c58;
  color: #fff;
  border: 3px solid #fff;
  outline: 1px solid #577d6f;
  display: flex;
  gap: 3px;
  font-size: 14px;
}
.map .map-pin.pictogram.cluster.approximate::before { border-radius: 50%; }
.map-marker-leader { position: absolute; display: block; height: 0; border-top: 1.5px dotted #4e746b; transform-origin: 0 0; pointer-events: none; z-index: 2; }
.map-marker-leader::before { content: ""; position: absolute; left: -2px; top: -3px; width: 5px; height: 5px; border-radius: 50%; background: #4e746b; }
.map-pictogram-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 14px; font-size: 11px; line-height: 1.5; color: #50685f; }
.map-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.map-legend-item svg, .map-worker-trades svg { width: 19px; height: 19px; flex-shrink: 0; }
.map-legend-item.normal { color: #245952; }
.map-legend-item.tasks { color: #225cb4; }
.map-legend-item.overdue { color: #925a0d; }
.map-legend-item.offline { color: #64727a; }
.map-approximate-key { display: inline-block; width: 19px; height: 19px; border: 1.5px dashed #4a6961; border-radius: 6px; }
.map-leader-key { display: inline-block; width: 22px; border-top: 1.5px dotted #4e746b; }
.map-worker-trades { display: flex; flex-wrap: wrap; gap: 8px 12px; width: 100%; }
.map-worker-trades > span { display: inline-flex; align-items: center; gap: 3px; }
.map-worker-trades .trade-yard { color: #377641; }
.map-worker-trades .trade-plumber { color: #206b9c; }
.map-worker-trades .trade-electrician { color: #98620c; }
.map-worker-trades .trade-cleaner { color: #865292; }
.map-worker-trades .trade-master { color: #225c58; }
.map-cluster-list button { min-height: 44px; }
@media (prefers-reduced-motion: reduce) {
  .map .map-pin.pictogram, .map-marker-leader { transition: none; animation: none; }
}