/*
 * map.css — la mappa SVG (terre, reticolo, punti degli oggetti .pin,
 * quadrati dei viaggi .sm), la legenda e il tooltip (#tip).
 */

.map {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--rule);
  background: var(--sea);
}

.map .land {
  fill: var(--land);
  stroke: var(--land-edge);
  stroke-width: .6;
}

.map .grat {
  fill: none;
  stroke: var(--land-edge);
  stroke-opacity: .18;
  stroke-width: .5;
}

.map .pin {
  cursor: pointer;
  stroke: #fff;
  stroke-width: 1.6;
}

.map .pin:hover, .map .pin:focus {
  stroke: var(--gold);
  stroke-width: 3;
  outline: none;
}

.map .sm {
  cursor: pointer;
  fill: none;
  stroke: var(--gold);
  stroke-width: 2.5;
}

.map .sm:hover, .map .sm:focus {
  stroke-width: 4;
  outline: none;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 10px 0;
  font-size: 13px;
}

.legend a {
  text-decoration: none;
  color: var(--ink);
}

.tip {
  position: fixed;
  pointer-events: none;
  background: var(--tip);
  color: var(--tip-ink);
  border: 1px solid var(--tip-edge);
  border-radius: 2px;
  box-shadow: 2px 2px 4px rgba(0,0,0,.3);
  padding: 3px 7px;
  font-size: 12px;
  display: none;
  z-index: 20;
}