/* ============================================================
   The spatial map (SVG). Candidate dots + de-cluttered name chips +
   a bright "you" bullseye that glides to your matches.
   ============================================================ */

.map { width: 100%; aspect-ratio: 1 / 1; display: block; touch-action: manipulation; overflow: visible; }
.map text { font-family: var(--font-display); }

/* frame + grid */
.map__frame { fill: var(--surface-2); stroke: var(--line); stroke-width: 0.4; }
.map__grid { stroke: var(--line); stroke-width: 0.22; }
.map__axis { stroke: var(--line-strong); stroke-width: 0.4; stroke-dasharray: 1.2 1.4; }

/* axis pole words (in the outer margins) */
.map__axisend { fill: var(--ink-faint); font-size: 3.2px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }

/* cross-endorsement link */
.map__link { stroke: var(--gold); stroke-width: 0.7; stroke-dasharray: 1.5 1.5; opacity: 0.7; }

/* lead line: marker -> current leader */
.map__lead-line { stroke: var(--brand); stroke-width: 0.4; stroke-dasharray: 0.8 1; opacity: 0.5; transition: all var(--dur-marker) var(--ease); }

/* leader line: dot -> its name chip */
.map__leader { stroke: var(--cand-color, var(--line-strong)); stroke-width: 0.45; opacity: 0.75; }

/* candidate dots */
.node { cursor: pointer; }
.node__dot {
  fill: var(--cand-color); stroke: var(--surface-2); stroke-width: 0.7;
  transform-box: fill-box; transform-origin: center;
  transition: transform var(--dur-marker) var(--ease-spring), stroke var(--dur-2);
}
.node:hover .node__dot, .node:focus-visible .node__dot { stroke: var(--ink); stroke-width: 1; }
.node:focus-visible { outline: none; }
.node.is-leader .node__dot { stroke: var(--cand-color); stroke-width: 1.1; }
.node.is-excluded { opacity: 0.34; }
.node.is-excluded .node__dot { fill: var(--ink-faint); }

/* name chips */
.chip { cursor: pointer; }
.chip__bg { fill: var(--surface); stroke: var(--line); stroke-width: 0.3; transition: stroke var(--dur-2); }
.chip__text { fill: var(--ink); font-size: 3px; font-weight: 700; transition: fill var(--dur-2); }
.chip:hover .chip__bg { stroke: var(--ink-faint); }
.chip.is-leader .chip__bg { stroke: var(--cand-color); stroke-width: 0.6; }
/* Leader text stays high-contrast ink (candidate-color text on the surface chip
   failed AA for teal/amber); the colored border + bold weight mark the leader. */
.chip.is-leader .chip__text { fill: var(--ink); font-weight: 800; }
.chip.is-excluded { opacity: 0.4; }

/* the "you" marker: bright bullseye + pill label, always on top */
.marker { pointer-events: none; transition: transform var(--dur-marker) var(--ease); }
.marker__glow { fill: var(--brand); opacity: 0.18; transform-box: fill-box; transform-origin: center; }
.marker__white { fill: #fff; }
.marker__core { fill: var(--brand); }
.marker__center { fill: #fff; }
.marker__pill { fill: var(--brand); }
.marker__pilltext { fill: #fff; font-size: 3.1px; font-weight: 700; letter-spacing: 0.02em; }
.marker__glow, .marker__white, .marker__core, .marker__center, .marker__pill, .marker__pilltext { transition: opacity var(--dur-2); }

@media (prefers-reduced-motion: no-preference) {
  .marker.is-active .marker__glow { animation: markerPulse 2.6s var(--ease) infinite; }
  @keyframes markerPulse { 0% { transform: scale(0.7); opacity: 0.32; } 70% { transform: scale(2); opacity: 0; } 100% { opacity: 0; } }
}
.marker.is-idle .marker__glow { opacity: 0.1; }