/* =============================================================================
   No-crop frame - what the shared tool components do not cover: the blurred
   background option next to the colour swatches, and a preview that is
   only looked at (the whole photo is always in, there is nothing to drag).
   ============================================================================= */

.tool__canvas.rm-canvas{cursor:default;touch-action:auto}

/* The colour picker is lit when it, not a swatch, holds the background.
   The first rule undoes the splitter's version, which keys on its own
   swatch name and would otherwise light this picker all the time. */
.swatches:has(input[name="rmBg"]:checked) .swatch-custom{border-color:var(--rule-d)}
.swatches:not(:has(input[name="rmBg"]:checked)) .swatch-custom{border-color:var(--olive)}

/* "Rozmyte tło": a swatch-sized dot of soft colour, lit like the picker. */
.rm-blur{
  position:relative;display:inline-flex;align-items:center;gap:8px;padding:4px 14px 4px 4px;min-height:40px;
  border:1px solid var(--rule-d);border-radius:999px;cursor:pointer;transition:border-color .2s var(--ease);
}
.rm-blur input{position:absolute;inset:0;margin:0;opacity:0;pointer-events:none}
.rm-blur:hover{border-color:var(--ghost)}
.rm-blur:has(input:checked){border-color:var(--olive)}
.rm-blur:has(input:focus-visible){outline:2px solid var(--olive);outline-offset:3px}
.rm-blur__dot{position:relative;width:30px;height:30px;border-radius:50%;overflow:hidden;border:1px solid rgba(250,250,247,.3)}
.rm-blur__dot::before{
  content:"";position:absolute;inset:-6px;filter:blur(4px);
  background:radial-gradient(circle at 30% 35%,#ccd376 0 22%,transparent 46%),
             radial-gradient(circle at 72% 70%,#5b7fa3 0 20%,transparent 50%),#4a4a3e;
}
.rm-blur .mono{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2)}