/* UniFi ecosystem block (views/blocks/unifi_ecosystem.php + unifi.js). Loaded only on pages that contain the block.
   Everything is scoped to .ue so no other block changes. Light, UniFi-like product look on both site themes. */
.ue{
  --ue-ink:#0E1A2E;--ue-text:#3A4860;--ue-mute:#6A778C;--ue-line:#DCE5F2;--ue-blue:#006FFF;--ue-soft:#E8F1FF;
  --c:#006FFF;
  position:relative;direction:rtl;color:var(--ue-text);
  background:radial-gradient(900px 480px at 30% 0%,#FFFFFF 0%,rgba(255,255,255,0) 70%),linear-gradient(180deg,#F5F9FF 0%,#E9F1FC 100%);
  border:1px solid var(--ue-line);border-radius:28px;padding:clamp(22px,4vw,48px);
  box-shadow:0 1px 2px rgba(14,26,46,.05),0 30px 60px -36px rgba(14,40,90,.35);overflow:hidden;
}
.ue h2,.ue h3{color:var(--ue-ink);font-family:var(--f-display,system-ui,sans-serif)}
.ue .eyebrow{color:var(--ue-blue)}
.ue-head{max-width:760px;margin-bottom:22px}
.ue-head h2{font-size:clamp(26px,3.4vw,42px);font-weight:700;margin-top:10px}
.ue-lead{margin:12px 0 0;color:var(--ue-mute);font-size:16.5px;max-width:62ch}

/* layer chips + tour toggle */
.ue-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.ue-chips{display:flex;gap:6px;flex-wrap:wrap;background:#fff;border:1px solid var(--ue-line);border-radius:999px;padding:5px;box-shadow:0 8px 24px -16px rgba(14,40,90,.4)}
.ue-chip{display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;color:var(--ue-text);font:600 14px var(--f-body,system-ui,sans-serif);
  padding:9px 16px;border-radius:999px;cursor:pointer;transition:background .25s,color .25s,box-shadow .25s;white-space:nowrap}
.ue-chip i{width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 18%,transparent)}
.ue-chip:hover{background:var(--ue-soft);color:var(--ue-ink)}
.ue-chip[aria-pressed="true"]{background:var(--c);color:#fff;box-shadow:0 8px 20px -10px var(--c)}
.ue-chip[aria-pressed="true"] i{background:#fff;box-shadow:none}
.ue-tour{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--ue-line);background:#fff;color:var(--ue-mute);font:500 13px var(--f-body,system-ui,sans-serif);
  padding:8px 14px;border-radius:999px;cursor:pointer}
.ue-tour i{width:14px;height:14px;display:inline-block;background:currentColor;clip-path:polygon(15% 5%,90% 50%,15% 95%)}
.ue-tour[aria-pressed="true"]{color:var(--ue-blue);border-color:#BCD5FB}
.ue-tour[aria-pressed="true"] i{clip-path:polygon(10% 5%,40% 5%,40% 95%,10% 95%,10% 5%,60% 5%,90% 5%,90% 95%,60% 95%,60% 5%)}
.ue-tour:hover{color:var(--ue-ink)}
.ue-chip:focus-visible,.ue-tour:focus-visible,.ue-hot:focus-visible{outline:2px solid var(--ue-blue);outline-offset:3px}

/* layout: side panel (start = right in RTL) + stage */
.ue-grid{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:clamp(18px,3vw,40px);align-items:start}
.ue-side{display:grid;gap:16px}
.ue-panel{background:#fff;border:1px solid var(--ue-line);border-radius:20px;padding:22px 22px 20px;box-shadow:0 12px 32px -22px rgba(14,40,90,.45);
  border-top:3px solid var(--c);animation:ue-in .45s cubic-bezier(.2,.7,.2,1)}
.ue-tag{display:inline-block;font:500 11.5px var(--f-mono,ui-monospace,monospace);letter-spacing:.1em;text-transform:uppercase;color:var(--c);
  background:color-mix(in srgb,var(--c) 10%,#fff);border-radius:6px;padding:3px 8px;direction:ltr}
.ue-panel h3{font-size:21px;font-weight:700;margin:12px 0 8px;line-height:1.25}
.ue-panel p{margin:0;font-size:15px;line-height:1.7}
.ue-devs{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.ue-devs li{font-size:12.5px;color:var(--ue-ink);background:#F2F6FC;border:1px solid var(--ue-line);border-radius:8px;padding:4px 9px}
.ue-story{background:rgba(255,255,255,.7);border:1px dashed #C8D8EF;border-radius:18px;padding:16px 18px}
.ue-story-t{font:600 13px var(--f-body,system-ui,sans-serif);color:var(--ue-ink);margin-bottom:10px}
.ue-story ol{list-style:none;margin:0;padding:0;display:grid;gap:8px;counter-reset:s}
.ue-story li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--ue-mute);transition:color .35s}
.ue-story b{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:600 12px var(--f-mono,monospace);background:#E6EDF8;color:var(--ue-mute);transition:background .35s,color .35s,box-shadow .35s}
.ue-story li.on{color:var(--ue-ink)}
.ue-story li.on b{background:var(--ue-blue);color:#fff;box-shadow:0 0 0 4px rgba(0,111,255,.15)}
.ue-note{margin:0;font-size:13px;color:var(--ue-mute)}
.ue-hint{margin:8px 0 0;text-align:center;font-size:12.5px;color:var(--ue-mute)}

/* stage: the SVG in a light 3D tilt */
.ue-stage{position:relative;perspective:1600px;min-width:0}
.ue-world{position:relative;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.ue.is-ready .ue-world{opacity:0;transform:translateY(24px) rotateX(18deg) scale(.96);transition:opacity .8s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
.ue.is-ready.is-seen .ue-world{opacity:1;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.ue.is-ready.is-seen.is-tilting .ue-world{transition:opacity .8s ease,transform .25s ease-out}
.ue-svg{display:block;width:100%;height:auto;overflow:visible;user-select:none;-webkit-user-select:none}

/* scene primitives */
.ue-svg polygon,.ue-svg path,.ue-svg ellipse,.ue-svg rect{stroke-linejoin:round}
.ue-box .ue-t{fill:#FFFFFF;stroke:#C9D7EA;stroke-width:.8}
.ue-box .ue-r{fill:#E2EBF7;stroke:#C9D7EA;stroke-width:.8}
.ue-box .ue-f{fill:#D2DFF0;stroke:#C2D1E6;stroke-width:.8}
.ue-slab .ue-t{fill:#FBFDFF;stroke:#D5E1F1}
.ue-slab .ue-r{fill:#DCE7F6}.ue-slab .ue-f{fill:#C8D8EE}
.ue-shadow{pointer-events:none}
.ue-wall .ue-t{fill:#F6F9FE}.ue-wall .ue-r{fill:#EEF3FA}.ue-wall .ue-f{fill:#E6EEF8}
.ue-glass .ue-t{fill:#FFFFFF;fill-opacity:.9;stroke:#B9CDEA}
.ue-glass .ue-r,.ue-glass .ue-f{fill:#DCEAFB;fill-opacity:.45;stroke:#B9CDEA}
.ue-desk .ue-t{fill:#FFFFFF}.ue-desk .ue-r{fill:#E9EFF7}.ue-desk .ue-f{fill:#DDE6F2}
.ue-monitor .ue-t,.ue-monitor .ue-r{fill:#2A3954;stroke:#1C2A42}.ue-monitor .ue-f{fill:#14213A;stroke:#1C2A42}
.ue-kbd .ue-t{fill:#EEF2F8}.ue-kbd .ue-r,.ue-kbd .ue-f{fill:#CBD6E5}
.ue-cab-box .ue-t{fill:#F4F7FC}.ue-cab-box .ue-r{fill:#D9E3F1}.ue-cab-box .ue-f{fill:#CCD9EB}
.ue-switch .ue-t{fill:#FFFFFF}.ue-switch .ue-r{fill:#E4ECF7}.ue-switch .ue-f{fill:#EEF3FA}
.ue-port{fill:#B8C6DA;stroke:none}.ue-port.on{fill:#2BC48A}
.ue-plant-pot .ue-t{fill:#F2F5FA}.ue-plant-pot .ue-r{fill:#DDE4EE}.ue-plant-pot .ue-f{fill:#CFD8E5}
.ue-plant{fill:#8BCFA9;stroke:#6DBA91;stroke-width:.8}
.ue-mount .ue-t{fill:#fff}.ue-mount .ue-r,.ue-mount .ue-f{fill:#D5E0EF}
.ue-dome{fill:#FFFFFF;stroke:#B8C9E0;stroke-width:.8}.ue-domeb{fill:#F3F7FC;stroke:#B8C9E0;stroke-width:.8}
.ue-lens{fill:#1A2740}
.ue-doorway{fill:#DDF5EA;stroke:#8FA7C9;stroke-width:1.6}
.ue-doorleaf{fill:#7E97BD;stroke:#5F7AA3;stroke-width:1;transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.2,1);transform-box:fill-box;transform-origin:0 50%}
.ue-handle{fill:#fff}
.ue-reader .ue-t{fill:#fff}.ue-reader .ue-r{fill:#E1E9F5}.ue-reader .ue-f{fill:#1E2B44}
.ue-led{fill:#7C8BA3;transition:fill .3s}
.ue-door.is-open .ue-doorleaf{opacity:.18;transform:scaleX(.35)}
.ue-door.is-open .ue-led{fill:#2BC48A}
.ue-phone .ue-t{fill:#26354F}.ue-phone .ue-r{fill:#1A263C}.ue-phone .ue-f{fill:#121C2E}
.ue-phscreen{fill:#5EA2FF;stroke:#2C4C80;stroke-width:.6}
.ue-phled{fill:#F08C00}
.ue-gwbody .ue-cb{stroke:#B5C7E0;stroke-width:.8}
.ue-gwbody .ue-ct{fill:#FFFFFF;stroke:#C4D3E8;stroke-width:.8}
.ue-gwring{fill:none;stroke:var(--ue-blue);stroke-width:2.2;filter:drop-shadow(0 0 4px rgba(0,111,255,.65))}
.ue-gwtop{fill:#F5F8FD;stroke:#D9E3F1;stroke-width:.6}
.ue-gwscreen{fill:#0E1A2E}
.ue-glow{fill:rgba(0,111,255,.16);opacity:0;transition:opacity .4s}
.ue-apbody .ue-cb{fill:#E7EEF8;stroke:#BFD0E8;stroke-width:.8}
.ue-apbody .ue-ct{fill:#FFFFFF;stroke:#C9D7EA;stroke-width:.8}
.ue-apled{fill:none;stroke:var(--ue-blue);stroke-width:1.6;opacity:.9}
.ue-halo{fill:none;stroke:var(--ue-blue);stroke-width:1.2;opacity:0;transform-box:fill-box;transform-origin:center;animation:ue-halo 2.8s ease-out infinite;animation-delay:var(--d,0s)}
.ue-drop{stroke:#9DB5D8;stroke-width:1;stroke-dasharray:2 4;opacity:.7}
.ue-apf{animation:ue-bob 4.8s ease-in-out infinite;animation-delay:var(--d,0s)}

/* floor plane (strokes keep their width under the plan transform) */
.ue-floor *{vector-effect:non-scaling-stroke}
.ue-room{fill:#EDF3FC}
.ue-gridl line{stroke:#E3EAF5;stroke-width:1}
.ue-floortxt text{font:600 15px var(--f-body,system-ui,sans-serif);fill:#9AAAC2;text-anchor:middle;direction:rtl}
.ue-cov-a{fill:rgba(0,111,255,.05);stroke:rgba(0,111,255,.16);stroke-width:1;stroke-dasharray:3 4}
.ue-ring{fill:none;stroke:rgba(0,111,255,.45);stroke-width:1.4;opacity:0;transform-box:fill-box;transform-origin:center;animation:ue-ring 3.2s ease-out infinite}
.ue-ring2{animation-delay:1.6s}
.ue-apsh{fill:rgba(20,50,100,.10)}
.ue-cone{fill:rgba(122,90,248,.10);stroke:rgba(122,90,248,.35);stroke-width:1}
.ue-doorpad{fill:rgba(18,162,110,.10);stroke:rgba(18,162,110,.35);stroke-width:1;stroke-dasharray:3 3}
.ue-cab{fill:none;stroke:var(--c);stroke-opacity:.38;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke-opacity .4s,stroke-width .4s}
.ue-pk circle{fill:var(--c)}
.ue-link{fill:none;stroke:#7FB0F5;stroke-width:1.6;stroke-dasharray:4 6;animation:ue-dash 1.4s linear infinite}

/* phone with the app */
.ue-phone-body{fill:#0E1A2E;filter:drop-shadow(0 18px 24px rgba(14,40,90,.28))}
.ue-phone-scr{fill:#FFFFFF}
.ue-notch{fill:#0E1A2E}
.ue-app text{font-family:var(--f-body,system-ui,sans-serif);fill:var(--ue-ink)}
.ue-app-h{font-size:13px;font-weight:700}
.ue-row rect{fill:#F2F6FC;stroke:transparent;stroke-width:1.4;transition:fill .3s,stroke .3s}
.ue-row circle{fill:var(--c)}
.ue-row text{font-size:11px;font-weight:600}
.ue-row .ue-ok{font-size:9px;font-weight:500;fill:#12A26E}
.ue-notif{opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
.ue-notif-bg{fill:#FFFFFF;stroke:#DCE5F2;filter:drop-shadow(0 6px 10px rgba(14,40,90,.16))}
.ue-play{fill:#fff}
.ue-nt{font-size:9.5px;font-weight:700}
.ue-ns{font-size:8.5px;fill:var(--ue-mute)!important}
.ue.is-alert .ue-notif{opacity:1;transform:none}

/* devices: hover + click target */
.ue-dev{cursor:pointer}
.ue-dev:hover .ue-t,.ue-dev:hover .ue-ct{filter:brightness(1.03)}

/* hotspots + captions */
.ue-hot{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;border:0;padding:0;cursor:pointer;background:transparent;display:none;z-index:2}
.ue.is-ready .ue-hot{display:block}
.ue-hot::before{content:"";position:absolute;inset:8px;border-radius:50%;background:#fff;border:2px solid var(--ue-blue);box-shadow:0 2px 8px rgba(0,60,160,.3);transition:transform .2s}
.ue-hot::after{content:"";position:absolute;inset:6px;border-radius:50%;border:2px solid var(--ue-blue);opacity:0;animation:ue-ping 2.4s ease-out infinite}
.ue-hot:hover::before,.ue-hot[aria-expanded="true"]::before{transform:scale(1.25);background:var(--ue-blue)}
.ue-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.ue-tip{position:absolute;z-index:3;width:min(250px,70vw);transform:translate(-50%,calc(-100% - 20px));background:#0E1A2E;color:#E6EDF8;border-radius:14px;
  padding:12px 14px;font-size:13.5px;line-height:1.55;box-shadow:0 18px 40px -16px rgba(14,26,46,.6);animation:ue-in .25s ease;pointer-events:none}
.ue-tip b{display:block;color:#fff;font-size:14px;margin-bottom:3px}
.ue-tip span{display:block}
.ue-tip.start{transform:translate(-14%,calc(-100% - 20px))}
.ue-tip.end{transform:translate(-86%,calc(-100% - 20px))}
.ue-tip.below{transform:translate(-50%,20px)}
.ue-tip.below.end{transform:translate(-86%,20px)}
.ue-tip.below.start{transform:translate(-14%,20px)}

/* layer focus: everything outside the chosen layer steps back */
.ue-svg [data-l],.ue-hot{transition:opacity .45s ease}
.ue[data-on="network"] .ue-svg [data-l]:not([data-l~="network"]),
.ue[data-on="protect"] .ue-svg [data-l]:not([data-l~="protect"]),
.ue[data-on="access"] .ue-svg [data-l]:not([data-l~="access"]),
.ue[data-on="talk"] .ue-svg [data-l]:not([data-l~="talk"]){opacity:.14}
.ue[data-on="network"] .ue-hot:not([data-l~="network"]),
.ue[data-on="protect"] .ue-hot:not([data-l~="protect"]),
.ue[data-on="access"] .ue-hot:not([data-l~="access"]),
.ue[data-on="talk"] .ue-hot:not([data-l~="talk"]){opacity:.3}
.ue[data-on="network"] .ue-pk:not([data-l~="network"]),
.ue[data-on="protect"] .ue-pk:not([data-l~="protect"]),
.ue[data-on="access"] .ue-pk:not([data-l~="access"]),
.ue[data-on="talk"] .ue-pk:not([data-l~="talk"]){opacity:0}
.ue[data-on="network"] .ue-cab[data-l="network"],
.ue[data-on="protect"] .ue-cab[data-l="protect"],
.ue[data-on="access"] .ue-cab[data-l="access"],
.ue[data-on="talk"] .ue-cab[data-l="talk"]{stroke-opacity:1;stroke-width:3}
.ue[data-on="network"] .ue-row[data-l="network"] rect,
.ue[data-on="protect"] .ue-row[data-l="protect"] rect,
.ue[data-on="access"] .ue-row[data-l="access"] rect,
.ue[data-on="talk"] .ue-row[data-l="talk"] rect{fill:#fff;stroke:var(--c)}
.ue:not([data-on="all"]) .ue-glow{opacity:1}
.ue[data-on="protect"] .ue-cone{fill:rgba(122,90,248,.2)}
.ue[data-on="protect"] .ue-notif,.ue[data-on="access"] .ue-notif{opacity:1;transform:none}
.ue[data-on="network"] .ue-notif,.ue[data-on="talk"] .ue-notif{opacity:0}
.ue.is-cam .ue-cone{fill:rgba(122,90,248,.26);stroke:rgba(122,90,248,.7)}

@keyframes ue-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ue-tip{animation-name:ue-tipin}
@keyframes ue-tipin{from{opacity:0}to{opacity:1}}
@keyframes ue-ring{0%{opacity:.85;transform:scale(.12)}80%{opacity:0}100%{opacity:0;transform:scale(1)}}
@keyframes ue-halo{0%{opacity:.8;transform:scale(.6)}100%{opacity:0;transform:scale(1.6)}}
@keyframes ue-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes ue-dash{to{stroke-dashoffset:-20}}
@keyframes ue-ping{0%{opacity:.7;transform:scale(.8)}100%{opacity:0;transform:scale(1.8)}}

/* tablet / phone: stacked, the scene first and full width */
@media (max-width:900px){
  .ue-grid{grid-template-columns:1fr}
  .ue-stage{order:-1}
  .ue-bar{justify-content:center}
  .ue-chips{width:100%;justify-content:center;border-radius:18px}
}
@media (max-width:560px){
  .ue{border-radius:20px;padding:20px 14px}
  .ue-chips{justify-content:center;gap:4px}
  .ue-chip{padding:8px 12px;font-size:13.5px}
  .ue-stage{margin-inline:-8px}
  .ue-hot{width:26px;height:26px;margin:-13px 0 0 -13px}
  .ue-hot::before{inset:7px}
  .ue-panel{padding:18px}
  .ue-panel h3{font-size:19px}
}

/* reduced motion: no packets, no pulses, a static highlight of the chosen layer */
@media (prefers-reduced-motion:reduce){
  .ue-pk,.ue-ring,.ue-halo{display:none}
  .ue-apf,.ue-link,.ue-hot::after{animation:none}
  .ue.is-ready .ue-world,.ue.is-ready.is-seen .ue-world{opacity:1;transform:none;transition:none}
  .ue-panel,.ue-tip{animation:none}
  .ue-cab{stroke-opacity:.6}
  .ue-cov-a{fill:rgba(0,111,255,.08)}
}