.map-view {
  flex: 1 1 42%;
  min-height: 200px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #dce6ea;
}

.leaflet-container {
  border-radius: var(--radius);
  font-family: var(--font-sans);
}

/* divIcon marker shapes, keyed by place type */
.marker-icon {
  display: block;
  width: 16px;
  height: 16px;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35);
}

.marker-icon--settlement {
  border-radius: 50%;
}

.marker-icon--mountain {
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  border-radius: 0;
}

.marker-icon--island {
  border-radius: 3px;
}

.marker-icon--river {
  border-radius: 40%;
  width: 14px;
  height: 8px;
}

/* side colors */
.marker-icon--side-achaean { background: var(--color-achaean); }
.marker-icon--side-trojan  { background: var(--color-trojan); }
.marker-icon--side-ally    { background: var(--color-ally); }
.marker-icon--side-neutral { background: var(--color-neutral); }

/* confidence modifiers */
.marker-icon--confidence-probable {
  opacity: 0.75;
  border-style: dashed;
}

.marker-icon--confidence-disputed {
  opacity: 0.5;
  border-style: dotted;
}

.marker-icon--badge::after {
  content: "?";
  position: absolute;
  top: -6px;
  right: -6px;
  font-size: 10px;
  line-height: 1;
  background: #fff;
  color: var(--color-text);
  border-radius: 50%;
  width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
}

.marker-icon.is-highlighted {
  box-shadow: 0 0 0 3px rgba(255, 210, 80, 0.9), 0 0 0 1px rgba(0,0,0,0.35);
}

.marker-icon.is-dimmed {
  opacity: 0.25 !important;
}

.map-legend {
  background: rgba(255,255,255,0.92);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  font-size: 0.75rem;
  line-height: 1.5;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  max-width: 220px;
}

.map-legend h4 {
  margin: 0 0 var(--space-1) 0;
  font-size: 0.75rem;
}

.map-legend-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  cursor: pointer;
  user-select: none;
  min-height: 24px;
}

.map-legend-caret {
  font-size: 0.65rem;
  color: var(--color-text-muted);
}

.map-legend.is-collapsed h4 {
  margin-bottom: 0;
}

.map-legend.is-collapsed .map-legend-body {
  display: none;
}

.map-legend-row {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: 2px;
}

.popup-link {
  color: var(--color-accent);
  text-decoration: underline;
  cursor: pointer;
}

.map-legend-swatch {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  display: inline-block;
}