/* ======================================================================
   Canvas / SVG visualization styles
   ====================================================================== */

.viz-stage {
  background: var(--bg-elev-2);
  border-radius: var(--radius-md);
  width: 100%;
  display: block;
  cursor: grab;
}
.viz-stage:active { cursor: grabbing; }

/* SVG axis styles */
.viz-svg .grid-line {
  stroke: var(--border);
  stroke-width: 0.5;
}
.viz-svg .grid-line.major {
  stroke: var(--border-strong);
  stroke-width: 1;
}
.viz-svg .axis-label {
  fill: var(--ink-mute);
  font-family: var(--mono);
  font-size: 11px;
}
.viz-svg .axis {
  stroke: var(--ink-mute);
  stroke-width: 1.5;
}

/* Vector arrows */
.viz-svg .vector { stroke-width: 2.5; fill: none; stroke-linecap: round; }
.viz-svg .vector.input { stroke: var(--info); }
.viz-svg .vector.output { stroke: var(--accent); }
.viz-svg .vector.eigen { stroke: var(--warn); stroke-dasharray: 4 3; }
.viz-svg .vector.basis { stroke: var(--ink-mute); stroke-width: 1.5; }
.viz-svg .vector.projection { stroke: var(--danger); stroke-dasharray: 3 3; }

.viz-svg .vector-tip { stroke: none; }
.viz-svg .vector-tip.input { fill: var(--info); }
.viz-svg .vector-tip.output { fill: var(--accent); }
.viz-svg .vector-tip.eigen { fill: var(--warn); }

.viz-svg .vector-handle {
  fill: var(--bg-elev-1);
  stroke: var(--info);
  stroke-width: 2;
  cursor: grab;
}
.viz-svg .vector-handle:active { cursor: grabbing; }
.viz-svg .vector-handle.draggable:hover {
  fill: var(--info);
}

.viz-svg .label {
  fill: var(--ink);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
}
.viz-svg .label.faint { fill: var(--ink-mute); font-weight: 400; }

.viz-svg .surface { fill: var(--accent-soft); fill-opacity: 0.5; }
.viz-svg .surface.warn { fill: var(--warn-soft); }
.viz-svg .surface.info { fill: var(--info-soft); }
.viz-svg .surface.danger { fill: var(--danger-soft); }

.viz-svg .level-curve { stroke: var(--info); fill: none; stroke-width: 1.4; opacity: 0.6; }
.viz-svg .level-curve.highlight { stroke: var(--accent); stroke-width: 2; opacity: 1; }

.viz-svg .point {
  fill: var(--accent);
  stroke: var(--bg-elev-1);
  stroke-width: 2;
}
.viz-svg .point.draggable { cursor: grab; }
.viz-svg .point.draggable:hover { fill: var(--accent-deep); }

.viz-svg .grid-image {
  stroke: var(--info);
  stroke-width: 1;
  fill: none;
  opacity: 0.6;
}
.viz-svg .grid-image.warped {
  stroke: var(--accent);
  opacity: 0.8;
}

.viz-svg .gradient-arrow { stroke: var(--accent); stroke-width: 1; fill: var(--accent); opacity: 0.7; }
.viz-svg .descent-path {
  stroke: var(--warn);
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.viz-svg .descent-point {
  fill: var(--warn);
  stroke: var(--bg-elev-1);
  stroke-width: 1.5;
}

/* Distribution shapes */
.viz-svg .pdf-curve {
  fill: var(--accent-soft);
  stroke: var(--accent);
  stroke-width: 2;
  fill-opacity: 0.6;
}
.viz-svg .pdf-curve.alt {
  fill: var(--info-soft);
  stroke: var(--info);
  fill-opacity: 0.45;
}

.viz-svg .pdf-bar {
  fill: var(--accent-soft);
  stroke: var(--accent);
}

.viz-svg .ellipse-contour {
  fill: none;
  stroke: var(--info);
  stroke-width: 1.5;
  opacity: 0.7;
}
.viz-svg .ellipse-contour.fill {
  fill: var(--info-soft);
  fill-opacity: 0.25;
}

.viz-svg .convex-region {
  fill: var(--accent-soft);
  fill-opacity: 0.6;
  stroke: var(--accent);
  stroke-width: 1.5;
}
.viz-svg .non-convex-region {
  fill: var(--danger-soft);
  fill-opacity: 0.6;
  stroke: var(--danger);
  stroke-width: 1.5;
}

.viz-svg .secant {
  stroke: var(--warn);
  stroke-width: 2;
  stroke-dasharray: 5 4;
  fill: none;
}
.viz-svg .function-curve {
  stroke: var(--accent);
  stroke-width: 2.5;
  fill: none;
}
.viz-svg .tangent-line {
  stroke: var(--info);
  stroke-width: 2;
  stroke-dasharray: 6 4;
  fill: none;
}