/* Paint tool — tool-specific styles (site/style.css stays shared-only). */

.paint-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.paint-tool {
  width: 42px;
  height: 38px;
  font-size: 1.1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  cursor: pointer;
}
.paint-tool:hover { border-color: var(--accent); }
.paint-tool.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* Action buttons sit above the canvas so they are never hidden below the fold. */
.paint-actions { margin-bottom: 8px; }

.paint-colorrow {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-bottom: 10px;
}
.paint-palette {
  display: grid;
  grid-template-columns: repeat(12, 22px);
  gap: 3px;
}
.paint-swatch {
  width: 22px;
  height: 22px;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
}
.paint-swatch:hover { transform: scale(1.12); }
.paint-swatch.selected {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.paint-colors {
  display: flex;
  align-items: center;
  gap: 6px;
}
.paint-color-label { font-size: 0.8rem; color: var(--muted); }
.paint-colors input[type="color"] {
  width: 40px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  padding: 2px;
  cursor: pointer;
}
.paint-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  color: var(--muted);
}
.paint-option input[type="range"] { width: 110px; }

.paint-stage {
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: repeating-conic-gradient(#e8e8e8 0% 25%, #f5f5f5 0% 50%) 0 0 / 20px 20px;
  padding: 8px;
}
.paint-canvas-stack {
  position: relative;
  display: inline-block;
  box-shadow: var(--shadow);
  max-width: 100%;
}
.paint-main,
.paint-overlay {
  display: block;
  touch-action: none;
}
/* Scale the canvas down to fit narrow viewports; the internal resolution
   stays 800×600 and pointer coordinates are remapped in JS. */
.paint-main {
  max-width: 100%;
  height: auto;
  cursor: crosshair;
  background: #ffffff;
}
/* The overlay only previews shapes while dragging. It sits ON TOP of the
   main canvas, so it MUST stay transparent (no background) or it hides
   everything drawn on the canvas underneath — and it must not intercept
   pointer events, which belong to the main canvas. */
.paint-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  pointer-events: none;
}
.paint-text-input {
  position: absolute;
  border: 1px dashed var(--accent);
  background: transparent;
  outline: none;
  padding: 0 2px;
  min-width: 120px;
}

@media (max-width: 640px) {
  /* Keep everything compact so the canvas itself is visible without
     scrolling on a phone. */
  .paint-toolbar { gap: 4px; margin-bottom: 6px; }
  .paint-tool { width: 34px; height: 34px; font-size: 1rem; }
  .paint-actions { gap: 4px; margin-bottom: 6px; }
  .paint-actions .btn { padding: 4px 9px; font-size: 0.8rem; }
  .paint-actions input[type="number"] { width: 60px !important; }
  .paint-colorrow { gap: 8px; margin-bottom: 8px; }
  .paint-palette { grid-template-columns: repeat(12, 20px); gap: 2px; }
  .paint-swatch { width: 20px; height: 20px; }
  .paint-option input[type="range"] { width: 80px; }
}