/* StackMap — custom rules Tailwind can't express. Component styling lives
   in markup as Tailwind utilities; this file is fonts, canvas mechanics,
   keyframes, and scrollbars only. */

:root {
  color-scheme: only light;
  --sm-accent: #0e6b5c;   /* Sonvo pine */
  --sm-lime: #d9f99d;
  --sm-ink: #14201d;
}

html, body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.font-display {
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  letter-spacing: -0.02em;
}

/* The HTML "hidden" attribute must beat utility display classes. */
[hidden] { display: none !important; }

/* ————— Editor canvas ————— */

.sm-canvas-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #fbfbfc;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.sm-canvas-wrap svg { display: block; width: 100%; height: 100%; }

.sm-canvas-wrap.tool-place { cursor: crosshair; }
.sm-canvas-wrap.panning { cursor: grabbing; }
.sm-canvas-wrap.space-pan { cursor: grab; }

svg text { user-select: none; -webkit-user-select: none; pointer-events: none; }

/* node hover lift */
g.sm-node { cursor: default; }
g.sm-node .sm-node-body { transition: filter 120ms ease; }
g.sm-node:hover .sm-node-body { filter: drop-shadow(0 2px 6px rgba(24,24,27,0.10)); }

g.sm-node.dragging .sm-node-body { filter: drop-shadow(0 6px 16px rgba(24,24,27,0.16)); }

.sm-port { cursor: crosshair; opacity: 0; transition: opacity 100ms ease; }
g.sm-node:hover .sm-port, g.sm-node.connect-src .sm-port { opacity: 1; }

.sm-edge-hit { cursor: pointer; }

.sm-resize { cursor: nwse-resize; }
.sm-resize[data-corner="ne"], .sm-resize[data-corner="sw"] { cursor: nesw-resize; }

/* selection marquee */
.sm-marquee {
  fill: rgba(14, 107, 92, 0.06);
  stroke: rgba(14, 107, 92, 0.5);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}

@keyframes sm-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sm-fade-in { animation: sm-fade-in 160ms ease both; }

/* thin scrollbars in panels */
.sm-scroll { scrollbar-width: thin; scrollbar-color: #d4d4d8 transparent; }
.sm-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.sm-scroll::-webkit-scrollbar-thumb { background: #d4d4d8; border-radius: 4px; }
.sm-scroll::-webkit-scrollbar-track { background: transparent; }

/* inline-edit input over canvas */
.sm-inline-edit {
  position: absolute;
  z-index: 40;
  border: 1px solid var(--sm-accent);
  border-radius: 6px;
  background: #fff;
  font-family: inherit;
  outline: none;
  box-shadow: 0 4px 12px rgba(24,24,27,0.12);
}