/* ================================================================
   Macondo journey canvas — JourneyNode
   Node categories: trigger (yellow), action (turquoise),
   timing (red), logic (ash), campaign (violet).
   ================================================================ */
.sp-node {
  display: flex;
  align-items: center;
  gap: var(--space-300);
  width: var(--node-width);
  min-height: var(--space-1750);
  padding: var(--space-300) var(--space-400);
  box-sizing: border-box;
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius-card-sm);
  background: var(--surface-primary);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background-color 0.1s ease, box-shadow 0.1s ease;
}
.sp-node:hover { background: var(--surface-hover); }

.sp-node__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--space-1000);
  height: var(--space-1000);
  border-radius: var(--border-radius-full);
}
.sp-node__icon i { font-size: 18px; }

.sp-node__content { flex: 1; min-width: 0; }
.sp-node__label { font-size: var(--callout-font-size); line-height: var(--callout-line-height); font-weight: var(--font-weight-medium); color: var(--typography-primary); }
.sp-node__description { font-size: var(--caption-font-size); line-height: var(--caption-line-height); color: var(--typography-secondary); }
.sp-node__grip { color: var(--typography-secondary); }
.sp-node__grip i { font-size: 20px; }

/* Category colorways */
.sp-node--trigger .sp-node__icon { background: var(--warning-surface); color: var(--warning-text); }
.sp-node--action .sp-node__icon { background: var(--brand-turquoise-surface); color: var(--brand-turquoise-text); }
.sp-node--timing .sp-node__icon { background: var(--critical-surface); color: var(--critical-text); }
.sp-node--logic .sp-node__icon { background: var(--brand-ash-surface); color: var(--brand-ash-text); }
.sp-node--campaign .sp-node__icon { background: var(--brand-violet-surface); color: var(--brand-violet-text); }

/* Selected: 2px category ring + tinted wash (alpha-30 over category surface) */
.sp-node--trigger[aria-selected="true"] { box-shadow: 0 0 0 2px var(--warning-border); background: linear-gradient(0deg, var(--alpha-30), var(--alpha-30)), var(--warning-surface); }
.sp-node--action[aria-selected="true"] { box-shadow: 0 0 0 2px var(--brand-turquoise-border); background: linear-gradient(0deg, var(--alpha-30), var(--alpha-30)), var(--brand-turquoise-surface); }
.sp-node--timing[aria-selected="true"] { box-shadow: 0 0 0 2px var(--critical-border); background: linear-gradient(0deg, var(--alpha-30), var(--alpha-30)), var(--critical-surface); }
.sp-node--logic[aria-selected="true"] { box-shadow: 0 0 0 2px var(--brand-ash-border); background: linear-gradient(0deg, var(--alpha-30), var(--alpha-30)), var(--brand-ash-surface); }
.sp-node--campaign[aria-selected="true"] { box-shadow: 0 0 0 2px var(--brand-violet-border); background: linear-gradient(0deg, var(--alpha-30), var(--alpha-30)), var(--brand-violet-surface); }

/* Disabled */
.sp-node[aria-disabled="true"] { pointer-events: none; background: var(--surface-primary); }
.sp-node[aria-disabled="true"] .sp-node__icon { background: var(--surface-hover); color: var(--typography-tertiary); }
.sp-node[aria-disabled="true"] .sp-node__label,
.sp-node[aria-disabled="true"] .sp-node__description { color: var(--typography-tertiary); }

/* Edge label (between nodes on the canvas) */
.sp-edge-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-3000);
  padding: var(--space-100) var(--space-200);
  border-radius: var(--border-radius-badge);
  background: var(--surface-secondary);
  color: var(--typography-secondary);
  font-size: var(--caption-font-size);
  line-height: var(--caption-line-height);
  font-weight: var(--font-weight-medium);
}