/*
 * SLBI Quadplex Hunt — Map layer styles
 * Owned by Agent 2 (Map Frontend).
 * Loaded by frontend/slbi-hunt.html (Agent 4 owns the shell).
 *
 * Color palette (per PHASE_1_ANSWERS Decision 3):
 *   Bucket fills:
 *     Through Medium  #3b82f6  (blue)
 *     Through Deep    #10b981  (green)
 *     Wide-Deep       #f59e0b  (amber)
 *   Status pills:
 *     ACTIVE          #2563EB  (Seekly blue; overrides handoff green)
 *     SOLD_12MO       #6b7280  (gray)
 *     OFF_MARKET      no pill, polygon/circle only
 */

/* ─────────────────────────────────────────────────────────────────────────
 * Container — wraps the Mapbox canvas. Agent 4 will mount this inside its
 * own page shell, so we don't impose width/height — only relative-position
 * for the overlay layers (pill DOM markers + legend).
 * ───────────────────────────────────────────────────────────────────────── */
.slbi-map {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 480px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.slbi-map .mapboxgl-canvas-container { outline: none; }

/* Basemap toggle (Satellite / Map) — sits below the NavigationControl
   in the top-right ctrl-group. Matches Mapbox's own button sizing. */
.slbi-basemap-ctrl {
  margin-top: 6px !important;
}
.slbi-basemap-btn {
  background: #fff;
  border: 0;
  padding: 6px 10px;
  min-width: 70px;
  font: 600 11px/1 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: 0.02em;
  color: #1e293b;
  cursor: pointer;
  border-radius: 4px;
}
.slbi-basemap-btn:hover {
  background: #f1f5f9;
}
.slbi-basemap-btn:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: -2px;
}

.slbi-map-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafaf7;
  color: #6b6b66;
  font-size: 13px;
}

/* ─────────────────────────────────────────────────────────────────────────
 * Parcel pill marker (ACTIVE + SOLD_12MO)
 * DOM markers attached via mapboxgl.Marker — float above the polygon/circle.
 * ───────────────────────────────────────────────────────────────────────── */
.slbi-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  user-select: none;
  font-feature-settings: 'tnum';
  font-variant-numeric: tabular-nums;
  transform: translateY(-14px); /* lift pill above the marker anchor point */
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.slbi-pill:hover {
  transform: translateY(-14px) scale(1.05);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* v2.34: collapse to a 3-color status palette per user spec:
 *   blue   → Active + Coming Soon (both "available, no offer")
 *   yellow → Pending + Under Contract (both "offer accepted / in escrow")
 *   gray   → Sold ≤12mo                                                   */
.slbi-pill.active      { background: #2563EB; }   /* blue — available */
.slbi-pill.coming-soon { background: #2563EB; }   /* blue — available, list date pending */
.slbi-pill.pending     { background: #eab308; }   /* yellow — offer in escrow */
.slbi-pill.uc          { background: #eab308; }   /* yellow — Active Under Contract */
.slbi-pill.sold        { background: #6b7280; }   /* gray — recently closed */

/* Tiny tail pointing down at the parcel */
.slbi-pill::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
}

.slbi-pill.active::after      { color: #2563EB; }
.slbi-pill.coming-soon::after { color: #2563EB; }
.slbi-pill.pending::after     { color: #eab308; }
.slbi-pill.uc::after          { color: #eab308; }
.slbi-pill.sold::after        { color: #6b7280; }

/* v2.32: off-hunt pill (DOM markers for nbhd listings outside the SLBI
 * universe). Background color set inline from L.color (host palette:
 * teal #14B8A6 / burnt-orange #C2410C / black #0F172A). We override the
 * downward tail via currentColor so the triangle matches the inline bg.
 * Slightly smaller font + tighter padding so they read as "secondary"
 * relative to the on-hunt pills underneath. */
.slbi-pill.slbi-pill-offhunt {
  font-size: 10.5px;
  padding: 2px 7px;
  opacity: 0.97;
}
.slbi-pill.slbi-pill-offhunt::after {
  /* Tail color follows the pill's inline color (host JS sets pill.style.color
   * to white for text contrast; for the tail we want the bg color instead).
   * Cleanest is a per-status class override: */
  color: inherit;
}
.slbi-pill.slbi-pill-offhunt.offhunt-active::after  { color: #14B8A6; }
.slbi-pill.slbi-pill-offhunt.offhunt-pending::after { color: #C2410C; }
.slbi-pill.slbi-pill-offhunt.offhunt-sold::after    { color: #0F172A; }

/* ─────────────────────────────────────────────────────────────────────────
 * Off-market circle (DOM marker fallback when polygon is null)
 * Bucket color, 60% opacity, 1px stroke.
 * ───────────────────────────────────────────────────────────────────────── */
.slbi-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.35);
  opacity: 0.85;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  transition: transform 120ms ease;
}

.slbi-dot:hover { transform: scale(1.25); }

.slbi-dot.bucket-tm { background: #3b82f6; }  /* Through Medium */
.slbi-dot.bucket-td { background: #10b981; }  /* Through Deep   */
.slbi-dot.bucket-wd { background: #f59e0b; }  /* Wide-Deep      */

/* ─────────────────────────────────────────────────────────────────────────
 * Cluster bubble (shown when zoom < 13)
 * ───────────────────────────────────────────────────────────────────────── */
.slbi-cluster {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  font-feature-settings: 'tnum';
  font-variant-numeric: tabular-nums;
  transition: transform 120ms ease;
}

.slbi-cluster:hover { transform: scale(1.1); }

.slbi-cluster.bucket-tm { background: #3b82f6; }
.slbi-cluster.bucket-td { background: #10b981; }
.slbi-cluster.bucket-wd { background: #f59e0b; }
.slbi-cluster.bucket-mixed { background: #475569; }

.slbi-cluster.size-md { width: 38px; height: 38px; font-size: 12px; }
.slbi-cluster.size-lg { width: 46px; height: 46px; font-size: 13px; }
.slbi-cluster.size-xl { width: 56px; height: 56px; font-size: 14px; }

/* ─────────────────────────────────────────────────────────────────────────
 * Polygon source-layer style (Mapbox GL fill-layer) — used when a parcel
 * carries real GeoJSON. In v1 polygon is always null (Decision 13), but the
 * fill layer is wired so future iterations get it for free.
 *
 * These colors are referenced from slbi-hunt-map.js when building the
 * Mapbox style — kept in sync via the bucket-color map in JS.
 * ───────────────────────────────────────────────────────────────────────── */

/* Legend (small overlay top-left) */
.slbi-legend {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #e8e6df;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 11px;
  color: #00102E;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  z-index: 2;
}

.slbi-legend h4 {
  margin: 0 0 6px 0;
  font-size: 11px;
  font-weight: 700;
  color: #6b6b66;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.slbi-legend .row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
}

.slbi-legend .sw {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.3);
}

.slbi-legend .sw.tm { background: #3b82f6; }
.slbi-legend .sw.td { background: #10b981; }
.slbi-legend .sw.ws { background: #facc15; }
.slbi-legend .sw.wm { background: #f59e0b; }
.slbi-legend .sw.wd { background: #dc2626; }
/* 2026-05-22 — Koch Through swatches; palette matches BUCKET_HEX_BY_NAME in slbi-hunt-map.js. */
.slbi-legend .sw.k130 { background: #ec4899; }
.slbi-legend .sw.k140 { background: #a855f7; }
.slbi-legend .sw.k150 { background: #6366f1; }
.slbi-legend .sw.k160 { background: #06b6d4; }
.slbi-legend .dim { color: #94a3b8; font-size: 10px; margin-left: 4px; }

.slbi-legend .sw.pill-active  { background: #2563EB; border-radius: 3px; }
.slbi-legend .sw.pill-coming  { background: #2563EB; border-radius: 3px; }
.slbi-legend .sw.pill-pending { background: #eab308; border-radius: 3px; }
.slbi-legend .sw.pill-uc      { background: #eab308; border-radius: 3px; }
.slbi-legend .sw.pill-sold    { background: #6b7280; border-radius: 3px; }
.slbi-legend .sw.sfr-filled   { background: #94a3b8; border-radius: 50%; }
.slbi-legend .sw.mf-ring      { background: transparent; border: 2px solid #94a3b8; border-radius: 50%; box-sizing: border-box; }

/* Marker wrap — keeps the pill positioned correctly relative to the
 * latitude/longitude anchor point Mapbox places it at.
 */
.slbi-marker-wrap {
  position: relative;
  display: inline-block;
}

/* ─────────────────────────────────────────────────────────────────────────
 * v2.30: Neighborhood hover tooltip — dark rounded pill, white text.
 * Painted by slbi-hunt-map.js when the cursor enters a nbhd outline polygon
 * (feature-state 'hover' also picks up via Mapbox paint expression).
 * Positioned absolute by JS to follow the cursor.
 * ───────────────────────────────────────────────────────────────────────── */
.slbi-nbhd-tooltip {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  background: #0f172a;
  color: #ffffff;
  padding: 8px 14px;
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-align: center;
  min-width: 120px;
  user-select: none;
}
.slbi-nbhd-tooltip-name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.slbi-nbhd-tooltip-sub {
  margin-top: 2px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #94a3b8;
}