/* Landing-site pins on the 3D Moon (landing-pins.js). Values from tokens.css only.
   Tip on the site. Hover, focus or tap shows the name above the pin, without a surface.
   The selected site keeps its name and a larger pin (size, not colour, marks the selection). */
.pins{position:absolute;inset:0;z-index:3;overflow:hidden;pointer-events:none;font-family:var(--font-ui);user-select:none}
.entering .pins{display:none}
.pin{position:absolute;left:0;top:0;pointer-events:auto}
.pin:hover,.pin:focus-within,.pin.open{z-index:100000!important}
.pin-head{position:absolute;left:-18px;top:-44px;width:36px;height:44px;padding:12px 6px 0;background:none;border:0;border-radius:var(--r-inner);cursor:pointer}
.pin-head svg{display:block;width:24px;height:32px;overflow:visible;transform-origin:50% 100%;transition:transform var(--t-fast) var(--ease)}
.pin-head path{fill:var(--accent);stroke:var(--accent-ink);stroke-width:1.6}
.pin-head circle,.pin-head text{fill:var(--accent-ink)}
.pin-head text{font:600 11px var(--font-ui);font-variant-numeric:tabular-nums}
.pin-head.multi circle{display:none}
.pin-head.candidate path{fill:var(--accent-ink);stroke:var(--accent)}
.pin-head.candidate circle,.pin-head.candidate text{fill:var(--accent)}
.pin:hover .pin-head svg,.pin:focus-within .pin-head svg,.pin.open .pin-head svg{transform:scale(1.15)}
.pin.picked .pin-head svg{transform:scale(1.3)}
.pin-head:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* Names: plain text above the pin; the dark halo keeps them readable on sunlit ground */
.pin-names{position:absolute;left:0;bottom:44px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;width:max-content;padding-bottom:var(--s1);opacity:0;visibility:hidden;transition:opacity var(--t-fast),visibility 0s var(--t-fast)}
.pin:hover .pin-names,.pin:focus-within .pin-names,.pin.open .pin-names,.pin.picked .pin-names{opacity:1;visibility:visible;transition-delay:0s}
.pin-name{padding:0 var(--s1);background:none;border:0;border-radius:var(--r-inner);color:var(--text);font:500 13px/1.5 var(--font-ui);font-variant-numeric:tabular-nums;text-shadow:0 0 3px var(--bg),0 0 6px var(--bg),0 1px 2px var(--bg);white-space:nowrap;cursor:pointer}
.pin-name[aria-pressed="true"]{font-weight:600}
.pin.picked:not(:hover):not(:focus-within):not(.open) .pin-name[aria-pressed="false"]{display:none}
.pin-name:hover{text-decoration:underline;text-underline-offset:3px}
.pin-name:focus-visible{outline:2px solid var(--accent);outline-offset:0}
@media(prefers-reduced-motion:reduce){.pin-head svg,.pin-names{transition:none}}