/*!
 * Orbiscale · live map & topology layer (v4)
 * Copyright (C) 2026 Ernesto Athaualpa Rojas (Neto)
 * SPDX-License-Identifier: AGPL-3.0-or-later
 */

/* ---------- overlay containers ---------- */
.lv-leads,.lv-cards{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.lv-leads{width:100%!important;height:100%!important;max-height:none!important;z-index:3}
.lv-cards{z-index:4}

/* ---------- floating site cards ---------- */
.lv-card{position:absolute;left:0;top:0;width:236px;pointer-events:auto;background:var(--pf-glass,var(--surface));
  -webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--pf-shadow-md,0 6px 18px rgba(0,0,0,.12));
  font:12px/1.35 var(--body);color:var(--ink);will-change:transform;opacity:0;transition:opacity .22s,box-shadow .18s,border-color .18s}
.lv-card.lv-in{opacity:1}
.lv-card.lv-l2{width:276px}
.lv-card:hover{box-shadow:var(--pf-shadow-lg,0 18px 40px rgba(0,0,0,.2));border-color:color-mix(in srgb,var(--accent) 45%,var(--line));z-index:5}
.lv-card.lv-sel{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent),var(--pf-shadow-md)}
.lv-card.lv-dragging{transition:none;cursor:grabbing;z-index:6}
.lv-card.lv-pinned .lv-h{background:color-mix(in srgb,var(--pf-gold,#FBD000) 16%,transparent)}
.lv-h{display:flex;align-items:center;gap:6px;padding:7px 8px 6px 10px;cursor:grab;border-radius:12px 12px 0 0;touch-action:none}
.lv-st{width:9px;height:9px;border-radius:50%;flex:none;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 18%,transparent)}
.lv-k{font:700 9px/1 var(--mono);letter-spacing:.06em;color:var(--ink-3);border:1px solid var(--line);border-radius:6px;padding:2px 4px;flex:none}
.lv-n{font-weight:700;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0;cursor:pointer}
.lv-n:hover{color:var(--accent)}
.lv-cc{font:600 10px var(--mono);color:var(--ink-3);flex:none}
.lv-b{border:0;background:transparent;color:var(--ink-3);width:20px;height:20px;border-radius:6px;cursor:pointer;font-size:13px;line-height:20px;padding:0;flex:none}
.lv-b:hover{background:var(--surface-2);color:var(--ink)}
.lv-b[aria-pressed="true"]{color:var(--accent)}
.lv-s{padding:0 10px 6px;color:var(--ink-2);font-size:11.5px;display:flex;flex-wrap:wrap;gap:2px 8px}
.lv-s .ok{color:var(--ok)}.lv-s .cr{color:var(--crit);font-weight:700}.lv-s .wa{color:var(--warn);font-weight:700}
.lv-bar{display:flex;height:4px;margin:0 10px 8px;border-radius:3px;overflow:hidden;background:var(--surface-3)}
.lv-bar i{display:block;height:100%}
.lv-list{max-height:212px;overflow:auto;border-top:1px solid var(--line-soft);padding:3px 0;overscroll-behavior:contain}
.lv-r{display:flex;align-items:center;gap:6px;width:100%;border:0;background:transparent;padding:3px 10px;font:11px/1.3 var(--mono);color:var(--ink);cursor:pointer;text-align:left}
.lv-r:hover,.lv-r:focus-visible{background:var(--accent-soft);outline:none}
.lv-r i{width:7px;height:7px;border-radius:50%;flex:none}
.lv-r .t{font-weight:800;font-size:9.5px;flex:none;min-width:30px}
.lv-r .nm{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.lv-r .ip{color:var(--ink-3);font-size:10px;flex:none}
.lv-r .g{color:var(--warn);font-weight:800}
.lv-f{display:flex;gap:4px;padding:6px 8px 8px;border-top:1px solid var(--line-soft)}
.lv-f button{flex:1;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);border-radius:8px;padding:4px 6px;font:600 11px var(--body);cursor:pointer}
.lv-f button:hover{border-color:var(--accent);color:var(--accent)}
.lv-more{padding:2px 10px 4px;font:10.5px var(--mono);color:var(--ink-3)}

/* collapsed / ghost (too far or no room: blurred until you get closer or hover) */
.lv-card.lv-mini .lv-s,.lv-card.lv-mini .lv-bar,.lv-card.lv-mini .lv-list,.lv-card.lv-mini .lv-f,.lv-card.lv-mini .lv-more{display:none}
.lv-ghost{position:absolute;left:0;top:0;pointer-events:auto;padding:3px 9px 3px 7px;border-radius:999px;background:var(--pf-glass,var(--surface));
  border:1px solid var(--line);font:600 11px var(--mono);color:var(--ink);white-space:nowrap;display:flex;gap:6px;align-items:center;cursor:pointer;
  filter:blur(2.2px);opacity:.55;transition:filter .2s,opacity .2s,box-shadow .2s;will-change:transform}
.lv-ghost i{width:7px;height:7px;border-radius:50%}
.lv-ghost:hover,.lv-ghost:focus-visible{filter:none;opacity:1;box-shadow:var(--pf-shadow-md);z-index:5;outline:none}

/* leader lines */
.lv-leads path{fill:none;stroke-width:1.6;stroke-linecap:round;opacity:.75}
.lv-leads circle{stroke:var(--surface);stroke-width:1.5}

/* SVG labels that would collide fade to a blur; hover brings them back */
#mmk text.lv-blur{filter:blur(1.4px);opacity:.28;transition:filter .2s,opacity .2s}
#mmk .mk:hover text.lv-blur{filter:none;opacity:1}
#mmk text.lv-hid{opacity:0}
#mmk text.cl.lv-blur{opacity:.12}
#msvg.lv-focus #mland path.c:not(.sel){opacity:.5;transition:opacity .3s}

/* WAN arcs: calmer in blue so red stays meaningful */
.map .wan{stroke:var(--pf-blue,var(--accent));opacity:.4}
.map .wan:hover{opacity:.9}

/* hover tooltip */
.lv-tip{position:absolute;z-index:8;pointer-events:none;max-width:280px;background:var(--surface);border:1px solid var(--line);border-radius:10px;
  box-shadow:var(--pf-shadow-md);padding:8px 10px;font:12px/1.4 var(--body);color:var(--ink-2);transform:translate(14px,14px)}
.lv-tip b{display:block;color:var(--ink);font-size:12.5px;margin-bottom:2px}
.lv-tip em{display:block;font-style:normal;color:var(--accent);font-size:11px;margin-top:4px}

/* click ripple */
.lv-rip{position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;border:2px solid var(--accent);pointer-events:none;z-index:7;animation:lv-rip .6s ease-out forwards}
@keyframes lv-rip{to{transform:scale(4.2);opacity:0}}

/* minimap (map + topology) */
.lv-mini-box{position:absolute;right:10px;z-index:6;width:184px;border-radius:10px;overflow:hidden;background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--pf-shadow-md);transition:opacity .2s}
.lv-mini-box svg{display:block;width:100%;height:auto;cursor:crosshair;touch-action:none}
.lv-mini-box .lv-vp{fill:color-mix(in srgb,var(--accent) 14%,transparent);stroke:var(--accent);vector-effect:non-scaling-stroke;stroke-width:1.6}
.lv-mini-box .lv-msea{fill:var(--sea)}
.lv-mini-box .lv-mh{display:flex;align-items:center;justify-content:space-between;padding:3px 6px 3px 8px;font:700 9px var(--mono);letter-spacing:.08em;color:var(--ink-3);border-bottom:1px solid var(--line-soft)}
.lv-mini-box .lv-mh button{border:0;background:transparent;color:var(--ink-3);cursor:pointer;font-size:12px;padding:0 2px}
.lv-mini-box.lv-closed svg{display:none}
.lv-mini-box use{pointer-events:none}
.lv-mdots circle{stroke:var(--surface);vector-effect:non-scaling-stroke;stroke-width:.8}

/* exploration progress */
.lv-xp{position:absolute;left:10px;z-index:5;display:flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:3px 10px 3px 8px;font:600 11px var(--mono);color:var(--ink-2);cursor:default;user-select:none}
.lv-xp .lv-xb{width:64px;height:5px;border-radius:3px;background:var(--surface-3);overflow:hidden}
.lv-xp .lv-xb i{display:block;height:100%;background:var(--pf-grad,var(--accent));transition:width .5s var(--pf-ease,ease)}
.lv-xp.lv-done{border-color:var(--pf-gold,#D9B44A);color:var(--ink)}

/* topology: hover highlight is softer than a click selection */
#tsvg.hl.soft .node:not(.on){opacity:.42}
#tsvg.hl.soft .lk:not(.on):not(.hit){opacity:.25}
#tsvg .node{cursor:grab}
#tsvg .node.lv-moved .box{stroke-dasharray:4 3}
/* far zoom: text blurs instead of vanishing, sharpens as you get closer */
#tsvg.lod-far .node text.nm{display:block!important;filter:blur(2.4px);opacity:.55}
#tsvg .node text{transition:filter .25s,opacity .25s}
.tb.lv-reorg{border-color:var(--pf-gold,#D9B44A)!important}

@media (max-width:640px){
  .lv-card{width:208px}.lv-card.lv-l2{width:228px}.lv-list{max-height:150px}
  .lv-mini-box{width:132px}
  .lv-xp .lv-xb{width:40px}
}
@media (prefers-reduced-motion:reduce){
  .lv-card,.lv-ghost,.lv-xp .lv-xb i{transition:none}.lv-rip{animation:none;display:none}
}

/* v4 palette for the topology chrome (was hard-coded blue) */
.topo .toolbar .tb[aria-pressed="true"],.toolbar .tb[aria-pressed="true"]{background:var(--accent)!important;border-color:var(--accent)!important;color:var(--accent-ink)!important}
#tsvg.hl .lk.on{stroke:var(--accent)!important}
#tsvg .node.focus .box,.topo .node.sel rect.box{stroke:var(--accent)!important}
.topo .fsc:hover,.map #mfs:hover{border-color:var(--accent)!important;color:var(--accent)!important}

/* topology, hierarchical view: when zoomed out, secondary captions step aside so the
   site title stays readable; they return as soon as you zoom in */
#tsvg.lv-hier .za,#tsvg.lv-hier .band,#tsvg.lv-hier .lkl,#tsvg.lv-hier .bubl,#tsvg.lv-hier .fl{transition:opacity .2s,filter .2s}
#tsvg.lv-hier.lod-mid .za,#tsvg.lv-hier.lod-mid .band,#tsvg.lv-hier.lod-mid .lkl,#tsvg.lv-hier.lod-mid .bubl{opacity:0}
#tsvg.lv-hier.lod-mid .fl{filter:blur(1.5px);opacity:.55}
#tsvg.lv-hier.lod-mid .zone:hover~.za{opacity:1}
#tsvg .zl{paint-order:stroke;stroke:var(--tp-bg,#fff);stroke-width:4px;stroke-linejoin:round}

/* loading veil for heavy screens */
#view{position:relative}
#view.lv-busy::before{content:"";position:absolute;inset:0;z-index:40;background:color-mix(in srgb,var(--ground) 70%,transparent);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
#view.lv-busy::after{content:"";position:absolute;left:50%;top:180px;z-index:41;width:38px;height:38px;margin-left:-19px;border-radius:50%;border:3px solid color-mix(in srgb,var(--accent) 25%,transparent);border-top-color:var(--accent);animation:lv-spin .7s linear infinite}
@keyframes lv-spin{to{transform:rotate(360deg)}}

/* v6 · while panning/zooming: no filters, shadows or transitions (the frame budget goes to the map) */
#mapbox.lv-moving #msvg{will-change:transform}
#mapbox.lv-moving *,#mapbox.lv-moving *::before,#mapbox.lv-moving *::after{transition:none !important;animation-play-state:paused !important}
#mapbox.lv-moving .lv-card,#mapbox.lv-moving .lv-ghost{box-shadow:none !important;backdrop-filter:none !important}
#mapbox.lv-moving .lv-blur,#mapbox.lv-moving text{filter:none !important}
#mapbox.lv-moving #lvleads{opacity:0}
#tsvg{will-change:transform}

/* v6 · performance: no live blur over the map/topology (re-blurred every frame on modest GPUs) */
.lv-card{-webkit-backdrop-filter:none !important;backdrop-filter:none !important;background:color-mix(in srgb,var(--surface) 97%,transparent) !important}
#mmk text.lv-blur{filter:none !important;opacity:.22}
#tsvg.lod-far .node text.nm{filter:none !important;opacity:.45}
#tsvg.lv-hier.lod-mid .fl{filter:none !important;opacity:.45}
.lv-ghost{filter:none !important;opacity:.7}
html[data-product="knoc"] .toolbar .tb{-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
html[data-product] header.top{-webkit-backdrop-filter:none !important;backdrop-filter:none !important;background:color-mix(in srgb,var(--surface) 96%,transparent) !important}