.canvas-wrapper {
  width: 100vw;
  height: 100vh;
}

body:not(.app-slava-restraint) .canvas-wrapper {
  background: #111;
}

body:not(.app-slava-restraint) .react-flow {
  --xy-background-color: #111;
  --xy-edge-stroke-default: #555;
  --xy-edge-stroke-width-default: 2;
  --xy-node-border-radius-default: 6px;
  --xy-handle-background-color-default: #4CAF50;
  --xy-handle-border-color-default: rgba(255, 255, 255, 0.3);
  --xy-minimap-mask-background-color-default: rgba(0, 0, 0, 0.6);
}

body:not(.app-slava-restraint) .react-flow__selection {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

body:not(.app-slava-restraint) .react-flow__controls button {
  background: #1c1c1c !important;
  border-color: #333 !important;
  color: #999 !important;
  fill: #999 !important;
}

body:not(.app-slava-restraint) .react-flow__controls button:hover {
  background: #252525 !important;
  color: #ccc !important;
  fill: #ccc !important;
}

/* --- Large-graph performance affordances (P0.1) --- */

.react-flow__minimap {
  border-radius: 8px;
}
body:not(.app-slava-restraint) .react-flow__minimap {
  background: #141414 !important;
  border: 1px solid #2a2a2a;
}
body.app-slava-restraint .react-flow__minimap {
  background: var(--sr-canvas, #f4f1ea);
  border: 1px solid var(--sr-hairline, rgba(0, 0, 0, 0.12));
}

.canvas-node-count {
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.45);
  color: rgba(255, 255, 255, 0.6);
  pointer-events: none;
  user-select: none;
}
body.app-slava-restraint .canvas-node-count {
  background: rgba(255, 255, 255, 0.7);
  color: var(--sr-mono, rgba(0, 0, 0, 0.55));
  font-family: var(--sr-font-mono, monospace);
}

/* Zoom level-of-detail: when zoomed out past the threshold, hide the heavy
   per-node media/labels so panning a large graph stays cheap. Handles, edges,
   header and the node box stay visible so topology remains readable. */
.canvas-wrapper[data-lod='low'] .react-flow__node .model-node__preview,
.canvas-wrapper[data-lod='low'] .react-flow__node .model-node__port-label {
  visibility: hidden;
}

body:not(.app-slava-restraint) .react-flow__edge.animated path {
  stroke-dasharray: 5;
  animation: edge-flow 0.5s linear infinite;
}

@keyframes edge-flow {
  to { stroke-dashoffset: -10; }
}

/* ─────────────────────────────────────────────────────────────────────
 * Empty-canvas splash — NN-45 Crab mark + NEBULA / NODES wordmark.
 * Only the splash uses the brand gradient. Product UI (toolbar, nodes,
 * panels, focus rings) stays locked to --sr-accent #FF5A1F.
 * ───────────────────────────────────────────────────────────────────── */
.canvas-wrapper--slava-empty .nn-splash {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  pointer-events: none;
  z-index: 2;
  user-select: none;
}

.nn-splash__mark {
  opacity: 0.95;
}

.nn-splash__wordmark {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 12px;
}

.nn-splash__wordmark-line {
  font-family: var(--sr-ui, 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif);
  font-weight: 200;
  font-size: 36px;
  letter-spacing: 0.3em;
  line-height: 1;
  color: #fff;
  padding-left: 0.3em; /* visual recentering for the tracked-out caps */
}

.nn-splash__wordmark-line--warm {
  font-weight: 300;
  color: var(--nn-crab-warm, rgb(240, 150, 90));
  margin-top: 6px;
}

.nn-splash__caption {
  font-family: var(--sr-mono, 'JetBrains Mono', 'IBM Plex Mono', 'SF Mono', Menlo, monospace);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 6px;
}

.nn-splash__hint {
  font-family: var(--sr-ui, 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
}

/* Soften the splash when the canvas wrapper isn't actually empty
 * (defensive — Canvas.tsx already guards on nodes.length === 0). */
.canvas-wrapper:not(.canvas-wrapper--slava-empty) .nn-splash {
  display: none;
}

/* Marquee select tool — crosshair cursor on the pane in select mode.
 * Scoped to app-slava-restraint (the only active skin). */
body.app-slava-restraint .canvas--select .react-flow__pane { cursor: crosshair; }
