/* ---------- collapsed map: only WorkOps, SpaceOps and the loop until a hub is tapped ---------- */
.cx.gone{display:none!important}
.tile.cx{animation:none;opacity:0;scale:.3;translate:var(--dx,0) var(--dy,0);z-index:1;
  transition:translate .4s var(--ease),scale .4s var(--ease),opacity .25s ease,box-shadow .25s var(--ease),border-color .25s}
.tile.cx.on{opacity:1;scale:1;translate:0 0;
  transition:translate .55s var(--ease) calc(var(--k)*45ms),scale .55s var(--ease) calc(var(--k)*45ms),opacity .3s ease calc(var(--k)*45ms),box-shadow .25s var(--ease),border-color .25s}
.tile.cx.on:hover,.tile.cx.on:focus-visible{translate:0 -3px;transition:translate .25s var(--ease),box-shadow .25s var(--ease),border-color .25s}
.wire.cx,.flow.cx{transition:opacity .3s ease}
.wire.cx.fade,.flow.cx.fade{opacity:0!important}

/* hubs are now toggles */
.hub{z-index:3}
.hub .xp{position:absolute;top:-8px;right:-8px;width:19px;height:19px;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;
  box-shadow:0 0 0 2.5px #fff,0 3px 8px color-mix(in srgb,var(--c) 45%,transparent);transition:rotate .35s var(--ease),background .25s}
.xp svg{width:11px;height:11px}
.hub.open .xp,.addons-toggle.open .xp{rotate:45deg}
.hub.cue::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;animation:cue 2.6s ease-out 1.4s infinite}
@keyframes cue{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c) 40%,transparent)}70%,100%{box-shadow:0 0 0 12px color-mix(in srgb,var(--c) 0%,transparent)}}

/* add-ons toggle (sits where the Add-ons heading was) */
.addons-toggle{position:absolute;left:507px;top:438px;translate:-50% 0;z-index:3;height:22px;padding:0 11px 0 5px;border-radius:99px;border:1px solid #E3E6EC;background:#fff;
  font:700 10.5px/1 "Inter",system-ui,sans-serif;letter-spacing:-.01em;color:var(--ink);display:flex;align-items:center;gap:6px;cursor:pointer;
  box-shadow:0 4px 14px rgba(17,24,39,.06);opacity:0;animation:fadein .6s 1s forwards;transition:box-shadow .25s var(--ease),border-color .25s,translate .25s var(--ease);-webkit-tap-highlight-color:transparent}
.addons-toggle .xp{position:static;--c:#6B7280;width:15px;height:15px;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;flex:none;transition:rotate .35s var(--ease)}
.addons-toggle .xp svg{width:9px;height:9px}
.addons-toggle:hover{border-color:#F3C6DA;box-shadow:0 8px 20px rgba(17,24,39,.09),0 0 0 3px rgba(238,24,129,.1)}
.addons-toggle:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.addons-panel,.addons-head p{opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s .35s}
.x-addon .addons-panel,.x-addon .addons-head p{opacity:1;visibility:visible;transition:opacity .35s ease}
.addons-head h2{visibility:hidden}

@media (max-width:899px){
  .tile.cx{--dx:0px!important;--dy:-14px!important;scale:.88}
  .hub{padding-right:46px}
  .hub .xp{top:50%;right:14px;margin-top:-13px;width:26px;height:26px;box-shadow:0 3px 8px color-mix(in srgb,var(--c) 40%,transparent)}
  .hub .xp svg{width:14px;height:14px}
  .grid2 > .hub{grid-column:1/-1}
  .g-add .group-h{display:none!important}
  .addons-toggle{position:relative;left:auto;top:auto;translate:none;width:100%;height:52px;padding:0 14px;border-radius:14px;font-size:15px;font-weight:600;gap:12px;animation:none;opacity:1;margin-bottom:10px}
  .addons-toggle .xp{width:26px;height:26px}
  .addons-toggle .xp svg{width:14px;height:14px}
  .addons-head p{display:none}
  .x-addon .addons-head p{display:block}
}
@media (prefers-reduced-motion: reduce){ .hub.cue::after{display:none} }