/* Interactive Eraser diagrams use the existing documentation colour roles. */
.venturi-eraser-diagram {
  border: 1px solid var(--venturi-border-strong, #dadde1);
  border-radius: 0.5rem;
  margin: 1.5rem 0;
  padding: 1rem;
  background: var(--venturi-surface, #fff);
  color: var(--venturi-ink, #1c1e21);
}
.venturi-eraser-diagram button {
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--venturi-border-strong, #dadde1);
  border-radius: 0.25rem;
  background: var(--venturi-surface-alt, #f6f7f8);
  color: var(--venturi-ink, #1c1e21);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}
.venturi-eraser-diagram button:focus-visible,
.venturi-eraser-canvas:focus-visible {
  outline: 3px solid var(--venturi-navy, #102445);
  outline-offset: 3px;
}
.venturi-eraser-diagram button:disabled { cursor: wait; opacity: 0.7; }
.venturi-eraser-controls { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }
.venturi-eraser-canvas {
  position: relative;
  height: clamp(320px, 55vh, 640px);
  width: 100%;
  box-sizing: border-box;
  max-width: 100%;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--venturi-border-strong, #dadde1);
  border-radius: 0.25rem;
  touch-action: none;
}
.venturi-eraser-canvas svg { max-width: none; }
.venturi-eraser-diagram [data-diagram-status] { color: var(--venturi-muted, #525860); font-size: 0.875rem; }
.venturi-eraser-diagram:fullscreen { box-sizing: border-box; overflow: auto; padding: 1.5rem; }
.venturi-eraser-diagram:fullscreen { --eraser-diagram-height: calc(100vh - 250px); }
@media (max-width: 480px) {
  .venturi-eraser-diagram { padding: 0.75rem; }
  .venturi-eraser-controls button { flex: 1 0 40%; }
}