/* I segni della mappa (S08, Pietro, 25/10: «i cerchi non mi piacciono», «giganti»): piccoli, sottili,
   da gioiello, a dimensione costante in pixel (map-points.js). Mercato: nucleo luminoso con anelli che
   pulsano; notizia: mirino sottile con il puntino; logistica: forma sottile con riempimento leggero, più
   intensa con più disruption, in rosso caldo (ambra sullo scuro). Etichette con un alone del fondo per
   leggersi su qualunque punto. Lo scuro: le stesse forme con la luminescenza. Anche la legenda. */
.pt {
  position: absolute;
  left: 0;
  top: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  pointer-events: auto;
  font: inherit;
  transition: opacity 0.24s var(--ease-rivela);
}
/* Il bersaglio di tocco: un cerchio di 44 px, ridotto (--hit, map-stage.js) quanto basta per non entrare
   in quello del vicino: il clic al centro di un segno è sempre suo. */
.pt::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, var(--hit, 44px));
  height: max(100%, var(--hit, 44px));
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.pt:focus-visible {
  outline: 2px solid var(--brand-text);
  outline-offset: 3px;
  z-index: 8;
}
.pt-market {
  --c: var(--brand-accent);
  z-index: 4;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--brand-mark) 55%, white) 0 25%,
    var(--brand-mark) 55%,
    var(--c) 100%
  );
  box-shadow:
    0 0 0 1px var(--c),
    0 0 10px 1px color-mix(in srgb, var(--brand-mark) 55%, transparent);
}
.pt-rings {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--halo, 30px);
  height: var(--halo, 30px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--c) 70%, transparent);
  background: radial-gradient(
    circle,
    transparent 0 30%,
    color-mix(in srgb, var(--brand-mark) 22%, transparent) 48%,
    transparent 72%
  );
  pointer-events: none;
}
.pt-rings::after {
  content: '';
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
}
/* La pulsazione: un anello che si allarga fino agli anelli; più segnali (--k), più lenta. */
.pt-market::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--halo, 30px);
  height: var(--halo, 30px);
  margin: calc(var(--halo, 30px) / -2) 0 0 calc(var(--halo, 30px) / -2);
  border-radius: 50%;
  border: 1px solid var(--brand-mark);
  opacity: 0;
  animation: pt-pulse calc(2.4s + 3.6s * var(--k, 0)) ease-out infinite;
  pointer-events: none;
}
@keyframes pt-pulse {
  from {
    opacity: 0.9;
    transform: scale(0.3);
  }
  to {
    opacity: 0;
    transform: scale(1.15);
  }
}
.pt-market.pt-off {
  --c: var(--brand-muted);
  background: var(--brand-muted);
  box-shadow: none;
}
.pt-market.pt-off::before {
  display: none;
}
.pt-market.dim {
  opacity: 0.4;
}
.pt-label,
.pt-cluster {
  font-family: var(--brand-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--s16);
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--brand-text);
}
.pt-label {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(calc(-50% + var(--lx, 0px)), 4px);
  text-shadow:
    0 0 2px var(--brand-bg),
    0 0 4px var(--brand-bg),
    0 0 8px var(--brand-bg),
    0 0 12px var(--brand-bg);
  pointer-events: none;
}
.pt-news {
  --c: var(--brand-info);
  z-index: 3;
  border: 1.5px solid var(--c);
  background:
    radial-gradient(circle, var(--c) 0 1.4px, transparent 1.9px),
    color-mix(in srgb, var(--c) 7%, transparent);
}
/* Il mirino: quattro tacche sul cerchio, solo sulle notizie più grandi. */
.pt-news.big::before {
  content: '';
  position: absolute;
  inset: -4px;
  pointer-events: none;
  background:
    linear-gradient(var(--c), var(--c)) 50% 0 / 1.5px 5px no-repeat,
    linear-gradient(var(--c), var(--c)) 50% 100% / 1.5px 5px no-repeat,
    linear-gradient(var(--c), var(--c)) 0 50% / 5px 1.5px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 50% / 5px 1.5px no-repeat;
}
.pt-log {
  --c: var(--brand-down);
  z-index: 3;
  border-radius: 0;
}
.pt-shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.pt-shape > * {
  fill: var(--c);
  fill-opacity: calc(0.12 + 0.45 * var(--d, 0.5));
  stroke: var(--c);
  stroke-opacity: calc(0.65 + 0.35 * var(--d, 0.5));
  stroke-width: 1.5px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.pt-strike .pt-shape > * {
  stroke-dasharray: 3 2;
  fill-opacity: 0.1;
}
.pt-tethers line {
  stroke: var(--brand-down);
  stroke-width: 1;
  opacity: 0.6;
}
:root[data-brand-theme='dark'] .pt-log {
  --c: var(--brand-risk);
}
:root[data-brand-theme='dark'] .pt-tethers line {
  stroke: var(--brand-risk);
}
:root[data-brand-theme='dark'] .pt-shape,
:root[data-brand-theme='dark'] .pt-news {
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--c) 70%, transparent));
}
:root[data-brand-theme='dark'] .pt-market {
  --c: var(--brand-mark);
  box-shadow:
    0 0 0 1px var(--c),
    0 0 16px 3px color-mix(in srgb, var(--brand-mark) 70%, transparent);
}

/* La legenda: gli stessi segni, in piccolo. */
.legend-keys {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
}
.key-market::before,
.key-news::before,
.shape::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
}
.key-market::before {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand-mark);
  box-shadow:
    0 0 0 1px var(--brand-accent),
    0 0 0 5px color-mix(in srgb, var(--brand-mark) 18%, transparent),
    0 0 0 6px color-mix(in srgb, var(--brand-accent) 45%, transparent);
  margin: 0 12px 0 6px;
}
.key-news::before {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--brand-info);
  background: radial-gradient(circle, var(--brand-info) 0 1.4px, transparent 1.9px);
}
.key-log .shape {
  margin-right: 12px;
}
.shape::before {
  width: 11px;
  height: 11px;
  margin-right: 5px;
  border: 1.5px solid var(--brand-down);
  background: color-mix(in srgb, var(--brand-down) 30%, transparent);
}
.shape-sea::before {
  transform: rotate(45deg) scale(0.8);
}
.shape-air::before {
  border: 0;
  background: var(--brand-down);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.shape-strike::before {
  border-style: dashed;
  background: transparent;
}
:root[data-brand-theme='dark'] .shape::before {
  border-color: var(--brand-risk);
  background: color-mix(in srgb, var(--brand-risk) 30%, transparent);
}
:root[data-brand-theme='dark'] .shape-air::before {
  background: var(--brand-risk);
}
:root[data-brand-theme='dark'] .shape-strike::before {
  background: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .pt-market::before {
    animation: none;
  }
  .pt {
    transition: none;
  }
}