#map-stack[data-location-explain-available="true"]::after {
  content: "Select mode · click the heatmap to ask ‘Why here?’";
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 12;
  max-width: min(360px, calc(100% - 32px));
  padding: 8px 11px;
  border: 1px solid rgba(200,255,87,.24);
  border-radius: 999px;
  background: rgba(12,18,15,.86);
  color: #d9e5de;
  font-size: .74rem;
  font-weight: 750;
  letter-spacing: .01em;
  pointer-events: none;
  backdrop-filter: blur(12px);
}

.suitability-cell[data-explain-cell-index] { cursor: help; }
.suitability-cell[data-explain-cell-index]:focus { outline: none; stroke: #fff; stroke-width: 2.2; }
.suitability-cell[data-explain-selected="true"] {
  stroke: #fff;
  stroke-width: 2.5;
  filter: drop-shadow(0 0 6px rgba(200,255,87,.72));
}

.location-explainer {
  position: absolute;
  right: 16px;
  top: 16px;
  z-index: 16;
  width: min(430px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  overflow: auto;
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(200,255,87,.24);
  border-radius: 20px;
  background: linear-gradient(150deg, rgba(12,18,15,.97), rgba(24,40,32,.96));
  color: #f4f8f4;
  box-shadow: 0 22px 55px rgba(0,0,0,.34);
  backdrop-filter: blur(16px);
}
.location-explainer[hidden] { display: none; }
.location-explainer-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.location-explainer-head strong { font-size:1rem; }
.location-explainer .eyebrow,
.location-explainer-grid span,
.location-explainer-next span { color:#aebdb5; font-size:.69rem; letter-spacing:.1em; text-transform:uppercase; }
.location-explainer-score { display:flex; align-items:baseline; gap:10px; }
.location-explainer-score span { font-size:2.25rem; font-weight:900; letter-spacing:-.05em; }
.location-explainer-score small,
.location-explainer > small,
.location-explainer p { color:#bdc9c2; }
.location-explainer p { margin:0; line-height:1.45; }
.location-explainer-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.location-explainer-grid > div,
.location-explainer-next { padding:12px; border:1px solid rgba(255,255,255,.08); border-radius:14px; background:rgba(255,255,255,.04); }
.location-explainer-grid ul { margin:8px 0 0; padding-left:18px; color:#e4ebe7; }
.location-explainer-grid li + li { margin-top:6px; }
.location-explainer-next { border-color:rgba(200,255,87,.18); background:rgba(200,255,87,.06); }
.location-explainer-next p { margin-top:5px; color:#edf7e9; }
.location-explainer-trust { border-top:1px solid rgba(255,255,255,.08); padding-top:10px; line-height:1.4; }

@media (max-width: 700px) {
  .location-explainer { top:auto; right:10px; bottom:10px; width:calc(100% - 20px); max-height:54%; border-radius:16px; }
  .location-explainer-grid { grid-template-columns:1fr; }
  #map-stack[data-location-explain-available="true"]::after { left:10px; right:10px; bottom:10px; max-width:none; text-align:center; }
  #map-stack:has(.location-explainer:not([hidden]))::after { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  .suitability-cell[data-explain-selected="true"] { filter:none; }
}