/*
 * The drawing surface: ruler gutters, the viewport and its canvas stack.
 * Rulers paint themselves from --bg-panel / --fg-muted (see ui/rulers.js).
 */

.canvas-area {
  display: grid;
  grid-template-columns: var(--ruler) minmax(0, 1fr);
  grid-template-rows: var(--ruler) minmax(0, 1fr);
}
.canvas-area.no-rulers { grid-template-columns: 0 minmax(0, 1fr); grid-template-rows: 0 minmax(0, 1fr); }

.ruler-corner {
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.ruler-x, .ruler-y { position: relative; background: var(--bg-panel); overflow: hidden; }
.ruler-x { border-bottom: 1px solid var(--border); }
.ruler-y { border-right: 1px solid var(--border); }
.ruler-x canvas, .ruler-y canvas { position: absolute; left: 0; top: 0; }

.viewport {
  position: relative;
  overflow: hidden;
  background: var(--canvas-bg);
  touch-action: none;
  outline: none;
}
.viewport canvas { display: block; }
.canvas-layer { pointer-events: none; }

/* drop a file onto the canvas */
.viewport.drop-target::after {
  content: '';
  position: absolute;
  inset: var(--sp-2);
  border: 2px dashed var(--accent);
  border-radius: var(--radius-lg);
  background: var(--accent-soft);
  pointer-events: none;
}

.canvas-overlay-hint {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  color: var(--fg-muted);
  font-size: var(--fs-lg);
  pointer-events: none;
  text-align: center;
}