[x-cloak] { display: none !important; }

/* ─── Smooth expand via CSS grid trick ─── */
.expand-grid {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}
.expand-grid.is-open { grid-template-rows: 1fr; }
.expand-grid > div { overflow: hidden; }

/* ─── Chevron ─── */
.chevron {
  transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}
.chevron.rotated { transform: rotate(180deg); }

/* ─── Canvas ─── */
#flow-canvas { cursor: grab; user-select: none; }
#flow-canvas.dragging { cursor: grabbing; }
#flow-canvas::-webkit-scrollbar { height: 8px; }
#flow-canvas::-webkit-scrollbar-track { background: transparent; }
#flow-canvas::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

/* ─── Card ─── */
.flow-card { transition: box-shadow 0.2s ease, transform 0.15s ease; }
.flow-card:hover { box-shadow: 0 10px 30px rgba(0,0,0,0.11); }
.flow-card:active { transform: scale(0.997); }