/* App wrapper specifics (inherits Foundry global theme) */
.app-layr #app { display: flex; flex-direction: column; min-height: 100vh; }

/* Stage */
#stage { position: relative; flex: 1; min-height: 60vh; margin: 12px; border: 1px solid var(--line); border-radius: var(--round); background: var(--panel); overflow: hidden; }
#mapSvg { width: 100%; height: 100%; user-select: none; }
#mapSvg #edgesLayer path { stroke: var(--ink); stroke-width: 2; fill: none; marker-end: url(#arrow); opacity: .9; }
#mapSvg #edgesLayer path.is-selected { stroke-dasharray: 6 6; }
#mapSvg marker path { fill: var(--ink); }

/* Nodes (SVG groups) */
.node { cursor: grab; }
.node.is-dragging { cursor: grabbing; }
.node rect.card { fill: rgba(0,0,0,.04); stroke: var(--line); stroke-width: 1; rx: 12; ry: 12; }
.node .header { fill: rgba(0,0,0,.06); }
.node text.title { font-family: var(--font-ui); font-size: 12px; fill: var(--ink); dominant-baseline: hanging; }
.node .type-pill { fill: var(--brand1); }
.node .type-icon { color: var(--ink2); }
.node .selected { stroke: var(--brand1); stroke-width: 2; }

/* Palette */
.palette { position: absolute; left: 12px; top: 12px; display: flex; gap: 8px; background: rgba(0,0,0,.04); border: 1px solid var(--line); border-radius: 12px; padding: 6px; backdrop-filter: blur(8px); }
.palette .chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: rgba(0,0,0,.02); color: var(--ink); border-radius: 999px; padding: 6px 10px; font-size: 12px; }
.palette .chip svg { width: 16px; height: 16px; display: block; }

/* Toolbar tweaks (uses global .toolbar) */
.app-layr .toolbar .left .icon-btn + .icon-btn { margin-left: 6px; }
.app-layr .toolbar .right { display: flex; align-items: center; gap: 8px; }

/* Printable export */
@media print {
  body { background: white; }
  #app > .toolbar, #app > .app-titlebar, .palette, .foundry-footer-status { display: none !important; }
  #stage { border: none; margin: 0; }
}

/* Canvas layers */
#boardWrap { position: relative; height: calc(100vh - 140px); overflow: auto; background: var(--app-bg, #f7f8fa); }
#edgesSvg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#nodesLayer { position: absolute; inset: 0; width: 100%; height: 100%; contain: layout paint size; touch-action: none; }
#guides { position: absolute; inset: 0; pointer-events: none; }
.page-node.selected { box-shadow: 0 0 0 2px rgba(37,99,235,.25), 0 6px 20px rgba(0,0,0,.10); }
.link-handle.armed { outline: 2px solid #2563eb; }

/* Popovers */
.popover { z-index: 10; }

/* Selection (borrowed from Foldr’s selection ring) */
.page-node.is-selected {
  outline: 2px solid var(--brand1);
  outline-offset: 0;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
}

/* Small circular icon buttons (for Maps popover + card actions) */
.circle-btn {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: inline-grid; place-items: center;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.06);
  line-height: 0; cursor: pointer;
}
.circle-btn .icon svg { width: 14px; height: 14px; fill: var(--ink); }


.ctxbtn{ font-size: 13px; text-align: left; background: none; border: none;}