/* ── SVG Diagram Styling ── */
.diagram-svg {
  background: #FAFBFC;
  border-radius: var(--radius-md);
  border: 1px solid #E5E7EB;
}

.diagram-svg .shape-fill {
  fill: var(--accent-light, var(--geometry-light));
  stroke: var(--accent, var(--geometry));
  stroke-width: 2;
}

.diagram-svg .shape-outline {
  fill: none;
  stroke: var(--accent, var(--geometry));
  stroke-width: 2;
}

.diagram-svg .shape-highlight {
  fill: var(--accent, var(--geometry));
  opacity: 0.3;
}

.diagram-svg .label-text {
  font-family: var(--font-mono);
  font-size: 14px;
  fill: var(--text-primary);
  text-anchor: middle;
  dominant-baseline: middle;
}

.diagram-svg .dim-text {
  font-family: var(--font-mono);
  font-size: 12px;
  fill: var(--text-secondary);
  text-anchor: middle;
  dominant-baseline: middle;
}

.diagram-svg .dim-line {
  stroke: var(--text-muted);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}

.diagram-svg .grid-line {
  stroke: #D1D5DB;
  stroke-width: 1;
}

.diagram-svg .grid-dot {
  fill: var(--text-muted);
}

.diagram-svg .angle-arc {
  fill: none;
  stroke: var(--star-gold);
  stroke-width: 2;
}

.diagram-svg .angle-label {
  font-family: var(--font-mono);
  font-size: 11px;
  fill: var(--star-gold);
}

/* ── Balance Scale ── */
.balance-svg .beam {
  stroke: #6B7280;
  stroke-width: 3;
  fill: none;
}

.balance-svg .fulcrum {
  fill: #6B7280;
}

.balance-svg .pan {
  fill: #E5E7EB;
  stroke: #9CA3AF;
  stroke-width: 2;
}

.balance-svg .weight {
  fill: var(--accent, var(--logic));
  stroke: var(--accent-dark, var(--logic-dark));
  stroke-width: 1.5;
}

.balance-svg .weight-label {
  font-family: var(--font-mono);
  font-size: 14px;
  fill: white;
  text-anchor: middle;
  dominant-baseline: middle;
  font-weight: 700;
}

.balance-svg .unknown {
  fill: var(--star-gold);
  stroke: #D97706;
  stroke-width: 1.5;
}

/* ── Grid Path ── */
.grid-path-svg .grid-cell {
  fill: white;
  stroke: #D1D5DB;
  stroke-width: 1;
}

.grid-path-svg .start-cell {
  fill: var(--correct-light);
}

.grid-path-svg .end-cell {
  fill: var(--accent-light, var(--logic-light));
}

.grid-path-svg .cell-label {
  font-family: var(--font-heading);
  font-size: 12px;
  fill: var(--text-secondary);
  text-anchor: middle;
  dominant-baseline: middle;
}

.grid-path-svg .arrow {
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 1.5;
  marker-end: url(#arrowhead);
}