/* The Location field's map button and its dialog (incident-map.js). Tokens from styles.css. */
.loc-row { display: flex; gap: var(--sp-2); align-items: stretch; }
.loc-row .input { flex: 1; min-width: 0; }
.loc-map-btn { flex: none; padding-left: var(--sp-4); padding-right: var(--sp-4); }
.loc-pin-acts { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }
.loc-pin-acts .btn { padding: var(--sp-1) var(--sp-3); }
.loc-offer {
  margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md); border: 1px solid color-mix(in srgb, var(--mysa-green) 30%, transparent);
  background: var(--mysa-green-tint); color: var(--text); font-size: 0.875rem;
}
.loc-offer.hidden { display: none; }
.loc-offer-text { margin: 0; overflow-wrap: anywhere; }

html.loc-map-open, html.loc-map-open body { overflow: hidden; }

.loc-map {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(10, 10, 9, .55);
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-6);
}
.loc-map.hidden { display: none; }
.loc-map-card {
  width: 100%; max-width: 960px; height: min(820px, 100%);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
  display: flex; flex-direction: column; overflow: hidden;
}
.loc-map-head {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5) var(--sp-3);
}
.loc-map-head > div { flex: 1; min-width: 0; }
.loc-map-title { font-size: 1.125rem; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
.loc-map-hint { margin: 2px 0 0; font-size: 0.875rem; color: var(--text-muted); }
.loc-map-x {
  flex: none; width: 40px; height: 40px; margin: -6px -8px 0 0;
  border: 0; border-radius: var(--r-full); background: transparent;
  color: var(--text-muted); font-size: 1.75rem; line-height: 1; cursor: pointer;
}
.loc-map-x:hover { background: var(--surface-2); color: var(--text); }
.loc-map-public {
  margin: 0 var(--sp-5) var(--sp-3); padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md); font-size: 0.8125rem;
  background: rgba(180, 83, 9, .12); color: #B45309; border: 1px solid rgba(180, 83, 9, .3);
}
.loc-map-public.hidden { display: none; }
.loc-map-canvas { flex: 1; min-height: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.loc-map-foot {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-5) var(--sp-4);
}
.loc-map-picked {
  flex: 1 1 220px; min-width: 0; margin: 0;
  font-size: 0.875rem; color: var(--text-muted); font-variant-numeric: tabular-nums;
}
.loc-map-actions { display: flex; gap: var(--sp-2); margin-left: auto; }

/* A phone: the map takes the whole screen, the buttons sit at the bottom within thumb reach. */
@media (max-width: 640px) {
  .loc-map { padding: 0; }
  .loc-map-card { max-width: none; height: 100%; height: 100dvh; border: 0; border-radius: 0; }
  .loc-map-head { padding: var(--sp-3) var(--sp-4) var(--sp-2); }
  .loc-map-public { margin: 0 var(--sp-4) var(--sp-2); }
  .loc-map-foot { padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom)); }
  .loc-map-picked { flex-basis: 100%; }
  .loc-map-actions { width: 100%; }
  .loc-map-actions .btn { flex: 1; }
}