/* Map (Explore pattern). The layout, search bar and sheet come from
   ui-explore in core/css/ui/patterns.css; this file styles what is
   particular to the map: the workspace pins and the "you" marker. */

/* ─── Workspace pins (Phase 2) ─────────────────────────────────────────── */

/* Phase 3 zoom-handoff: pins fade in once the map crosses the street-zoom
   threshold (body.jp-map-show-pins is toggled in JS on zoomend). At lower
   zoom levels the heatmap + clusters take over and the DOM pins are
   visually + interactionally inert. The "you" marker overrides this — it's
   a personal anchor, not a density indicator. */
/* .jp-wpin-anchor is MapLibre's marker element (it owns position, the
   translate transform and an inline opacity). Never style its geometry
   here — the pin below is the visual. `visibility` (not just opacity)
   also drops hidden pins out of the keyboard tab order. */
.jp-wpin{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}
.jp-map-show-pins .jp-wpin{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}
.jp-map-show-pins .jp-wpin--weak{opacity:.65}

/* Base pin — circular monogram badge with optional role-count chip. */
.jp-wpin{
    position:relative;
    padding:0;
    font:inherit;
    appearance:none;
    width:46px;
    height:46px;
    border-radius:50%;
    background:linear-gradient(145deg,var(--jp-panel),var(--jp-canvas-3));
    border:2px solid var(--jp-ink);
    box-shadow:0 6px 18px rgba(0,0,0,.20);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:transform var(--jp-duration-base) var(--jp-ease),
               box-shadow var(--jp-duration-base) var(--jp-ease),
               opacity var(--jp-duration-slow) var(--jp-ease),
               visibility 0s linear var(--jp-duration-slow);
}
.jp-map-show-pins .jp-wpin{transition-delay:0s}
.jp-wpin:focus-visible{outline:3px solid var(--jp-ink);outline-offset:3px}
.jp-wpin:hover,
.jp-wpin.is-active{
    transform:scale(1.15);
    box-shadow:0 12px 28px rgba(0,0,0,.30);
    z-index:2;
}
.jp-wpin__mono{
    font-weight:900;
    font-size:var(--jp-text-sm);
    letter-spacing:-.02em;
    color:var(--jp-ink);
}
.jp-wpin__badge{
    position:absolute;
    top:-6px;
    right:-6px;
    min-width:22px;
    height:22px;
    padding:0 6px;
    border-radius:var(--jp-radius-pill);
    background:var(--jp-charcoal);
    color:#fff;
    font-size:11px;
    font-weight:900;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 4px 10px rgba(0,0,0,.30);
}

/* Match-brightness bands — for logged-in candidates with a match score
   on the underlying workspace. Anonymous viewers always land on --neutral. */
.jp-wpin--neutral{
    background:linear-gradient(145deg,var(--jp-panel),var(--jp-canvas-3));
    border-color:var(--jp-ink);
}
.jp-wpin--strong{
    background:linear-gradient(145deg,var(--jp-accent),#B89A38);
    border-color:var(--jp-accent-ink);
    box-shadow:0 0 0 4px rgba(231,199,90,.30),
               0 8px 22px rgba(231,199,90,.45);
    animation:jp-wpin-pulse 3s ease-in-out infinite;
}
.jp-wpin--mid{
    background:linear-gradient(145deg,#FBF3D6,var(--jp-accent-soft));
    border-color:var(--jp-accent-ink);
    box-shadow:0 0 0 3px rgba(231,199,90,.18),
               0 6px 16px rgba(0,0,0,.22);
}
.jp-wpin--weak{
    background:linear-gradient(145deg,#EEEAE0,#D8D2C6);
    border-color:var(--jp-muted);
    box-shadow:0 4px 10px rgba(0,0,0,.18);
    opacity:.65;
}
.jp-wpin--weak .jp-wpin__mono{color:var(--jp-muted)}

@keyframes jp-wpin-pulse {
    0%, 100% {
        box-shadow:0 0 0 4px rgba(231,199,90,.30),
                   0 8px 22px rgba(231,199,90,.45);
    }
    50% {
        box-shadow:0 0 0 12px rgba(231,199,90,.10),
                   0 8px 22px rgba(231,199,90,.45);
    }
}

/* "You" marker — only ever shown to the candidate themselves. It shows
   with the pins; at cluster zoom a map layer drawn beneath the clusters
   (jp-me-layer) marks home instead, so it never hides a cluster's count. */
.jp-wpin--me{
    width:20px;
    height:20px;
    background:var(--jp-charcoal);
    border:3px solid var(--jp-accent);
    box-shadow:0 0 0 4px rgba(231,199,90,.22),
               0 2px 6px rgba(0,0,0,.30);
    animation:jp-pin-pulse 2.6s ease-in-out infinite;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
}
.jp-wpin--me .jp-wpin__mono{display:none}
@keyframes jp-pin-pulse {
    0%, 100% { box-shadow:0 0 0 4px rgba(231,199,90,.22), 0 2px 6px rgba(0,0,0,.30); }
    50%      { box-shadow:0 0 0 9px rgba(231,199,90,.06), 0 2px 6px rgba(0,0,0,.30); }
}

/* Reduced motion: no pin pulses or "you" marker pulse. Panning and
   zooming the map are the user's own motion and stay. */
@media (prefers-reduced-motion: reduce){
    .jp-wpin,
    .jp-wpin--strong,
    .jp-wpin--me{
        animation:none !important;
        transition:none !important;
    }
}