/* Agent marks (marks.js). The mark fills whatever tile holds it and takes its
   ink from currentColor. Set --nxm-node to colour the state node. Motion runs
   on .working (the console, while an agent writes) and on .play (a card
   hover), never under reduced motion. */

.nxm{display:grid; place-items:center; width:100%; height:100%}
.nxm svg{width:62%; height:62%; overflow:visible}
.nxm .n, .nxm .f{fill:currentColor; stroke:none}
.nxm .n{fill:var(--nxm-node, currentColor); transform-box:fill-box; transform-origin:center; transition:fill .4s}

/* icon: Lucide sits a touch smaller to match the glyph's optical size */
.nxm-icon svg{width:56%; height:56%}

/* motion */
@keyframes nxm-draw{from{stroke-dasharray:1; stroke-dashoffset:1} to{stroke-dasharray:1; stroke-dashoffset:0}}
@keyframes nxm-pulse{50%{transform:scale(1.35)}}
.nxm-glyph.play .d{animation:nxm-draw .9s var(--ease) backwards}
.nxm-glyph.play .n{animation:nxm-pulse .6s var(--ease) .55s}
.nxm-icon.play svg{animation:nxm-pulse .6s var(--ease)}
.working .nxm-glyph .d{animation:nxm-draw 1.4s var(--ease) infinite}
.working .nxm-glyph .n{animation:nxm-pulse 1.4s var(--ease) infinite}
.working .nxm-icon svg{animation:nxm-pulse 1.4s var(--ease) infinite}

@media (prefers-reduced-motion: reduce){
  .nxm *, .nxm svg{animation:none !important}
}