/**
 * UniHouse map styling
 * ====================
 * Shared by every screen that loads js/map.js. Written once for both engines:
 * Mapbox GL builds its markers from a DOM element and Leaflet from an HTML
 * string, but both end up rendering the same .uh-pin / .uh-pop markup, so the
 * map looks identical whether or not a Mapbox token is configured.
 *
 * Colours follow the dashboard: near-black ink, white cards,
 * one accent blue for the state the student is looking at.
 */

/* ---------- containers ---------- */

.uh-map {
  width: 100%;
  height: 520px;
  border-radius: 16px;
  overflow: hidden;
  background: #eceff1;
  position: relative;
}

.uh-map.sm { height: 240px; border-radius: 12px; }

/* Placeholder shown while the engine and tiles are still coming down. */
.uh-map-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  color: #8a8a8a;
  font-size: 0.88rem;
  background: #eceff1;
  z-index: 2;
}

.uh-map-loading i { font-size: 1.4rem; opacity: 0.5; }

.uh-map-empty {
  text-align: center;
  padding: 3rem 1.25rem;
  color: #888;
}

.uh-map-empty i {
  font-size: 2rem;
  color: #dcdcdc;
  display: block;
  margin-bottom: 0.75rem;
}

.uh-map-empty h3 { font-size: 1.05rem; color: #444; margin-bottom: 0.35rem; }
.uh-map-empty p { font-size: 0.9rem; line-height: 1.55; max-width: 420px; margin: 0 auto; }

/* A quiet line under a map saying which engine drew it and how exact the
   pins are. Students should never wonder whether a pin is the actual house. */
.uh-map-note {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.8rem;
  color: #777;
  line-height: 1.5;
  margin-top: 0.75rem;
}

.uh-map-note i { color: #aaa; margin-top: 0.15rem; }

/* ---------- price pins ---------- */

.uh-pin-host { background: none; border: none; }

.uh-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 28px;
  padding: 0 0.6rem;
  border-radius: 50px;
  background: #1a1a1a;
  color: #fff;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
  transition: transform 0.16s ease, background 0.16s ease;
}

.uh-pin:hover,
.uh-pin:focus-visible {
  background: #2563eb;
  transform: scale(1.09);
  outline: none;
  z-index: 3;
}

/* Dashed edge = we placed this from the address or the town, not from saved
   coordinates. The popup says so in words too. */
.uh-pin.approx {
  background: #fff;
  color: #1a1a1a;
  border: 2px dashed #9aa0a6;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.uh-pin.approx:hover,
.uh-pin.approx:focus-visible {
  background: #2563eb;
  color: #fff;
  border-color: #fff;
}

/* ---------- popups ---------- */

.uh-pop {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-family: 'Inter', system-ui, sans-serif;
  min-width: 180px;
}

.uh-pop-img {
  width: 100%;
  height: 96px;
  object-fit: cover;
  border-radius: 9px;
  margin-bottom: 0.15rem;
}

.uh-pop-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.35;
}

.uh-pop-price { font-size: 0.9rem; font-weight: 700; color: #2563eb; }
.uh-pop-price span { font-size: 0.74rem; font-weight: 500; color: #999; }

.uh-pop-loc {
  font-size: 0.78rem;
  color: #777;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.uh-pop-approx {
  font-size: 0.72rem;
  color: #8a6d1f;
  background: #fdf6e3;
  border-radius: 6px;
  padding: 0.3rem 0.45rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  line-height: 1.4;
}

.uh-pop-actions { display: flex; gap: 0.4rem; margin-top: 0.45rem; }

.uh-pop-btn {
  flex: 1;
  border: none;
  border-radius: 8px;
  background: #1a1a1a;
  color: #fff;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.45rem 0.6rem;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.16s ease;
}

.uh-pop-btn:hover { background: #2563eb; }

.uh-pop-btn.ghost {
  background: #fff;
  color: #1a1a1a;
  border: 1px solid #e2e2e2;
}

.uh-pop-btn.ghost:hover { border-color: #1a1a1a; background: #fafafa; }

/* Trim the chrome both engines wrap a popup in so the card above is the
   only thing with padding and a radius. */
.mapboxgl-popup-content,
.leaflet-popup-content-wrapper {
  border-radius: 13px;
  padding: 0.75rem;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.16);
}

.leaflet-popup-content { margin: 0; min-width: 180px; }
.mapboxgl-popup-close-button { font-size: 1.1rem; padding: 0 0.35rem; color: #999; }
.mapboxgl-popup-close-button:hover { background: none; color: #1a1a1a; }

/* ---------- token prompt ---------- */

/* Shown only where a build is running on OpenStreetMap because no Mapbox
   token was configured. It is informational, not an error. */
.uh-map-token {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  background: #f5f8ff;
  border: 1px solid #dbe6ff;
  border-radius: 11px;
  padding: 0.75rem 0.9rem;
  font-size: 0.82rem;
  color: #3a4a63;
  line-height: 1.55;
  margin-bottom: 0.9rem;
}

.uh-map-token i { color: #2563eb; margin-top: 0.15rem; }
.uh-map-token code {
  background: #e8efff;
  border-radius: 4px;
  padding: 0.05rem 0.3rem;
  font-size: 0.78rem;
}

@media (max-width: 640px) {
  .uh-map { height: 420px; }
  .uh-map.sm { height: 200px; }
}