/* Object Remover — additive to utility.css and background-remover.css,
   which already supply .br-workspace/.br-compare/.br-pane/.br-actions/
   .result-actions and .drop-zone. Only the brush controls and the paint
   canvas itself live here. */

.or-brush-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.or-brush-controls label { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.or-brush-controls input[type="range"] { flex: 1 1 200px; accent-color: var(--purple); }

.or-canvas-wrap { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; display: flex; justify-content: center; }

/* Unlike Background Remover's After pane, the result here is a normal
   opaque photo, not a transparent cutout — the checkerboard background.br-
   after-slot uses to signal transparency would be actively misleading, so
   this overrides it back to a plain surface. */
.or-after-slot { background: #f7f7fb; }
/* touch-action:none stops the browser from scrolling the page on a drag
   gesture over the canvas — painting on a phone needs the drag itself. */
#orCanvas { max-width: 100%; height: auto; touch-action: none; cursor: crosshair; display: block; }

#orStatus { margin: 16px 0 0; min-height: 1.4em; }
#orStatus.error { color: #991b1b; }
#orStatus.success { color: var(--purple); }
#orStatus.busy { color: var(--muted); }

@media (max-width: 700px) {
  .or-brush-controls { flex-direction: column; align-items: stretch; gap: 8px; }
}