/* ============================================================
   LookingGlass — World map (SVG) styles
   Consumes tokens.css. The SVG markup lives in fragments/world-map.html;
   nodes / arcs / packets / target are injected at runtime by lg-map.js.
   ============================================================ */

/* ---------- Panel ---------- */
.lg-map-panel {
    position: relative;
    overflow: hidden;
    border-radius: var(--lg-radius-lg);
    border: 1px solid var(--lg-border);
    background:
        radial-gradient(120% 120% at 50% 0%, #ffffff 0%, var(--lg-gray-25) 55%, #f3f4fb 100%);
    box-shadow: var(--lg-shadow);
}
.lg-map-panel::after {
    /* soft top sheen */
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(90% 60% at 50% -10%, rgba(65, 46, 250, .05), transparent 60%);
    pointer-events: none;
}

.lg-worldmap {
    display: block;
    width: 100%;
    height: auto;
    cursor: grab;
    touch-action: none;
    user-select: none;
}
.lg-map-panel.is-panning .lg-worldmap { cursor: grabbing; }

#lg-continent-fill {
    pointer-events: none;
}
.lg-continent-shape {
    stroke: #ffffff;
    stroke-width: .6;
    opacity: .42;
}
.lg-continent-shape.lg-continent-na { fill: #dbeafe; }
.lg-continent-shape.lg-continent-sa { fill: #dcfce7; }
.lg-continent-shape.lg-continent-eu { fill: #ede9fe; }
.lg-continent-shape.lg-continent-af { fill: #fef3c7; }
.lg-continent-shape.lg-continent-as { fill: #cffafe; }
.lg-continent-shape.lg-continent-oc { fill: #fce7f3; }
.lg-continent-shape.lg-continent-land { fill: #e5e7eb; }

#lg-land circle {
    fill: var(--lg-map-dot);
    opacity: .72;
}
#lg-land .lg-continent-na { fill: #dbeafe; }
#lg-land .lg-continent-sa { fill: #dcfce7; }
#lg-land .lg-continent-eu { fill: #ede9fe; }
#lg-land .lg-continent-af { fill: #fef3c7; }
#lg-land .lg-continent-as { fill: #cffafe; }
#lg-land .lg-continent-oc { fill: #fce7f3; }
#lg-land .lg-continent-land { fill: #e5e7eb; }

/* ---------- Nodes ---------- */
.lg-node { cursor: pointer; }
.lg-node-glow { fill: url(#lgNodeGrad); }
.lg-node-dot {
    fill: var(--lg-node);
    stroke: #ffffff;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    transition: r .15s ease;
}
.lg-node:hover .lg-node-dot { filter: drop-shadow(0 0 4px rgba(65, 46, 250, .4)); }

/* ---------- Target ---------- */
.lg-target-glow { fill: url(#lgTargetGrad); }
.lg-target-dot { fill: var(--lg-target); stroke: #fff; stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.lg-target-intersection {
    fill: none;
    stroke: var(--lg-target);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
    opacity: .72;
    filter: drop-shadow(0 0 5px rgba(255, 61, 119, .45));
}
.lg-target-cross {
    stroke: var(--lg-target);
    stroke-width: 1.2;
    vector-effect: non-scaling-stroke;
    stroke-linecap: round;
    opacity: .45;
    pointer-events: none;
}
.lg-target-pulse {
    fill: var(--lg-target);
    transform-box: fill-box;
    transform-origin: center;
    animation: lgPulse 2.2s ease-out infinite;
}
@keyframes lgPulse {
    0%   { transform: scale(.45); opacity: .55; }
    100% { transform: scale(4.2); opacity: 0; }
}

/* ---------- Arcs + packets ---------- */
.lg-arc {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.15;
    vector-effect: non-scaling-stroke;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .26;
    shape-rendering: geometricPrecision;
    /* draw-in animation */
    stroke-dasharray: var(--len, 1200);
    stroke-dashoffset: var(--len, 1200);
    animation: lgDraw .9s ease forwards;
}
.lg-arc--single { stroke-width: 1.8; opacity: .45; }
.lg-arc--dead { stroke-dasharray: 3 6 !important; opacity: .4; animation: none; stroke-dashoffset: 0; }
@keyframes lgDraw { to { stroke-dashoffset: 0; } }

.lg-packet { fill: currentColor; filter: drop-shadow(0 0 2px currentColor); }
.lg-worldmap.lg-map-zoomed .lg-arc {
    animation: none;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    opacity: .22;
}
.lg-worldmap.lg-map-close .lg-arc { opacity: .16; }
.lg-worldmap.lg-map-zoomed .lg-packet { display: none; }
.lg-worldmap.lg-map-zoomed .lg-mark-pulse,
.lg-worldmap.lg-map-zoomed .lg-target-pulse {
    animation: none;
    opacity: .18;
}

/* rtt color classes drive both stroke (currentColor) and packet fill */
.lg-arc.rtt-fast,  .lg-packet.rtt-fast  { color: var(--lg-rtt-fast); }
.lg-arc.rtt-mid,   .lg-packet.rtt-mid   { color: var(--lg-rtt-mid); }
.lg-arc.rtt-slow,  .lg-packet.rtt-slow  { color: var(--lg-rtt-slow); }
.lg-arc.rtt-vslow, .lg-packet.rtt-vslow { color: var(--lg-rtt-vslow); }
.lg-arc.rtt-dead,  .lg-packet.rtt-dead  { color: var(--lg-rtt-dead); }

/* ---------- Latency-judged result marks (colour inherited from the rtt-* class) ---------- */
.lg-mark { cursor: pointer; }
.lg-mark.rtt-fast  { color: var(--lg-rtt-fast); }
.lg-mark.rtt-mid   { color: var(--lg-rtt-mid); }
.lg-mark.rtt-slow  { color: var(--lg-rtt-slow); }
.lg-mark.rtt-vslow { color: var(--lg-rtt-vslow); }
.lg-mark.rtt-dead  { color: var(--lg-rtt-dead); }
.lg-mark-dot  { fill: currentColor; stroke: #fff; stroke-width: 1; vector-effect: non-scaling-stroke; }
.lg-mark-glow { fill: currentColor; opacity: .16; }
.lg-mark-pulse {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
    transform-box: fill-box;
    transform-origin: center;
    animation: lgMarkPulse 1.9s ease-out infinite;
}
@keyframes lgMarkPulse {
    0%   { transform: scale(.5);  opacity: .75; }
    100% { transform: scale(4.2); opacity: 0; }
}

/* ---------- Tooltip ---------- */
.lg-map-tip {
    position: absolute;
    z-index: 20;
    transform: translate(-50%, -130%);
    background: var(--lg-gray-900);
    color: #fff;
    padding: 7px 11px;
    border-radius: var(--lg-radius-sm);
    font-size: .78rem;
    line-height: 1.35;
    white-space: nowrap;
    box-shadow: var(--lg-shadow-lg);
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s ease;
}
.lg-map-tip.is-on { opacity: 1; }
.lg-map-tip b { color: #fff; }
.lg-map-tip .lg-tip-rtt { font-family: var(--lg-font-data); }
.lg-map-tip::after {
    content: '';
    position: absolute; left: 50%; top: 100%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--lg-gray-900);
}

/* ---------- Legend ---------- */
.lg-legend {
    position: absolute;
    left: var(--lg-s4); bottom: var(--lg-s4);
    display: flex; flex-wrap: wrap; gap: var(--lg-s3);
    padding: 8px 12px;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(6px);
    border: 1px solid var(--lg-border);
    border-radius: var(--lg-radius-pill);
    font-size: .72rem;
    color: var(--lg-text-muted);
    box-shadow: var(--lg-shadow-sm);
}
.lg-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lg-legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

/* count chip top-right of the map */
.lg-map-stat {
    position: absolute;
    right: var(--lg-s4); top: var(--lg-s4);
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 13px;
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(6px);
    border: 1px solid var(--lg-border);
    border-radius: var(--lg-radius-pill);
    font-size: .78rem;
    font-weight: 600;
    color: var(--lg-text-strong);
    box-shadow: var(--lg-shadow-sm);
}
.lg-map-stat b { color: var(--lg-indigo-600); font-family: var(--lg-font-data); }
.lg-map-stat .lg-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lg-rtt-fast); }

/* compact map controls for measured-result maps */
.lg-map-tools {
    position: absolute;
    right: 12px;
    top: 12px;
    z-index: 18;
    display: inline-flex;
    overflow: hidden;
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(6px);
    border: 1px solid var(--lg-border);
    border-radius: var(--lg-radius-sm);
    box-shadow: var(--lg-shadow-sm);
}
.lg-map-tool {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-left: 1px solid var(--lg-border);
    background: transparent;
    color: var(--lg-text-strong);
    cursor: pointer;
}
.lg-map-tool:first-child { border-left: 0; }
.lg-map-tool:hover { background: var(--lg-surface-2); }
.lg-map-tool:focus-visible {
    position: relative;
    z-index: 1;
    outline: 3px solid var(--lg-indigo-100);
    outline-offset: -3px;
}
.lg-map-tool svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- Multilateration range rings ---------- */
.lg-range-lock,
.lg-range-ring {
    fill: none;
    stroke: currentColor;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}
.lg-range-lock {
    stroke-width: 1;
    opacity: .16;
}
.lg-range-ring {
    stroke-width: 1.7;
    opacity: .2;
    transform-box: fill-box;
    transform-origin: center;
    animation: lgRangeExpand 4.8s ease-out infinite;
}
.lg-map-mini .lg-range-lock { opacity: .22; }
.lg-map-mini .lg-range-ring {
    stroke-width: 2;
    opacity: .28;
}
.lg-worldmap.lg-map-zoomed .lg-range-lock { opacity: .12; }
.lg-worldmap.lg-map-zoomed .lg-range-ring {
    animation: none;
    transform: none;
    opacity: .12;
}
.lg-worldmap.lg-map-close .lg-range-lock { opacity: .08; }
.lg-worldmap.lg-map-close .lg-range-ring { opacity: .08; }
.lg-range-lock.rtt-fast,
.lg-range-ring.rtt-fast  { color: var(--lg-rtt-fast); }
.lg-range-lock.rtt-mid,
.lg-range-ring.rtt-mid   { color: var(--lg-rtt-mid); }
.lg-range-lock.rtt-slow,
.lg-range-ring.rtt-slow  { color: var(--lg-rtt-slow); }
.lg-range-lock.rtt-vslow,
.lg-range-ring.rtt-vslow { color: var(--lg-rtt-vslow); }
.lg-range-lock.rtt-dead,
.lg-range-ring.rtt-dead  { color: var(--lg-rtt-dead); }
@keyframes lgRangeExpand {
    0%   { transform: scale(.08); opacity: 0; }
    16%  { opacity: .24; }
    72%  { opacity: .20; }
    100% { transform: scale(1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .lg-arc { animation: none; stroke-dashoffset: 0; }
    .lg-target-pulse, .lg-mark-pulse, .lg-range-ring { animation: none; }
}