/*
 * Mapping Witches — tool-specific styles (map + list layout). Requires
 * ../../shared/css/tokens.css and ../../shared/css/tool-shell.css loaded
 * first, plus Leaflet's own CSS (../leaflet/leaflet.css).
 * Source: build_docs/design_handoff_witch_tools/redesign/tools.html.
 */

.map-layout { margin-top: 44px; display: grid; grid-template-columns: 1fr 340px; gap: 36px; align-items: stretch; height: 560px; }
.map-plate { position: relative; flex: 1 1 auto; min-height: 0; background: #B9CFCB; border-radius: 3px; overflow: hidden; height: 100%; }
.map-plate .leaflet-map { position: absolute; inset: 0; }
.pin-chip { width: 15px; height: 19px; border-radius: 3px; border: 2px solid #fff; box-shadow: 0 2px 4px rgba(0,0,0,.4); cursor: pointer; transition: transform 160ms; transform: scale(1); }
.pin-chip.hi { transform: scale(1.35); }
.map-caption { margin-top: 10px; font-size: 12.5px; color: var(--ink-mid); }
.map-list { display: flex; flex-direction: column; height: 100%; overflow-y: auto; }
.map-row { padding: 14px 2px; border-top: 1px solid var(--desk); cursor: pointer; display: flex; gap: 10px; transition: background 150ms; }
.map-row:first-child { border-top: 0; }
.map-row.hi, .map-row:hover { background: var(--desk); }
.map-row .dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 10px; margin-top: 5px; }
.map-row .rtext { font-size: 13px; line-height: 1.42; color: var(--ink-soft); }
.map-row .rtitle { font-weight: 600; color: var(--ink); display: block; margin-bottom: 2px; }
.map-row .rmeta { font-size: 11.5px; color: var(--ink-mid); text-transform: uppercase; letter-spacing: .06em; }

@media (max-width: 900px) {
  .map-layout { grid-template-columns: 1fr; height: auto; }
  .map-plate { height: 420px; }
  .map-list { height: 360px; }
}