/* ============ Background removal (usun-tlo) ============
   The before/after frame with its divider, the progress over the photo and a
   checkbox pill. The rest comes from the shared tool components. */

/* ---- before / after frame ---- */
.ut-view{display:flex;flex-direction:column;align-items:center;gap:10px}
.ut-view .tool__hint{text-align:center}
/* pan-y: on a phone the page still scrolls up and down over the photo; a
   sideways drag moves the divider. */
.ut-frame{
  --split:50%;
  position:relative;max-width:100%;overflow:hidden;border-radius:var(--r-xs);
  touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
.ut-frame.has-result{cursor:ew-resize}
.ut-canvas{display:block;width:100%;height:100%}
.ut-canvas--after{background:repeating-conic-gradient(var(--ink-3) 0 25%,var(--ink-2) 0 50%) 0 0/16px 16px;transition:opacity .3s var(--ease)}
.ut-canvas--before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--split)) 0 0)}
.ut-frame.is-busy .ut-canvas--after{opacity:.4}

.ut-split{
  position:absolute;top:0;bottom:0;left:var(--split);width:44px;margin-left:-22px;
  display:flex;align-items:center;justify-content:center;
}
.ut-split::before{
  content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;
  background:var(--bone);box-shadow:0 0 0 1px rgba(10,10,10,.22);
}
.ut-split:focus-visible{outline:none}
.ut-split__knob{
  position:relative;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:var(--bone);color:var(--ink);box-shadow:0 2px 12px rgba(10,10,10,.35);
  transition:transform .2s var(--ease-out),background .2s var(--ease);
}
.ut-split__knob svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ut-split:focus-visible .ut-split__knob{outline:2px solid var(--olive);outline-offset:3px}
.ut-frame.is-drag .ut-split__knob{transform:scale(1.08);background:var(--olive)}

.ut-tag{
  position:absolute;top:10px;padding:4px 9px;border-radius:999px;pointer-events:none;
  background:rgba(10,10,10,.74);color:var(--bone);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
}
.ut-tag--before{left:10px}
.ut-tag--after{right:10px;color:var(--olive)}

/* ---- progress over the photo ---- */
.ut-busy{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:20px;text-align:center;
}
.ut-busy__text{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone);
  padding:5px 11px;border-radius:999px;background:rgba(10,10,10,.6)}
.ut-bar{width:min(300px,76%);height:2px;border-radius:2px;background:rgba(250,250,247,.2);overflow:hidden}
.ut-bar span{display:block;height:100%;background:var(--olive);transform:scaleX(0);transform-origin:left;transition:transform .25s linear}
.ut-busy.is-error .ut-busy__text{color:#ff8a7a}
.ut-busy.is-error .ut-bar{display:none}
.ut-busy .gen__action{min-height:40px;background:rgba(10,10,10,.6)}

/* ---- panel ---- */
.ut-hint{margin-top:10px;max-width:46ch;font-size:13px;line-height:1.5;color:var(--fg-2)}
.ut-forget{margin-top:12px;border-color:var(--rule-d);color:var(--fg-2)}
.ut-forget:hover{border-color:var(--fg)}
.ut-bgimg{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:-6px}
.ut-bgimg .gen__action{min-height:40px}
.ut-bgimg__name{min-width:0;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px;color:var(--fg-2)}
/* "Pobierz maskę" waits for a result; until then it reads as switched off. */
.ut-mask{margin-top:12px;min-height:40px}
.ut .gen__action[disabled]{opacity:.4;cursor:not-allowed;background:transparent;color:var(--fg);border-color:var(--ghost)}
.ut-edges .range{margin-top:10px}
.ut-edges .range + .range{margin-top:14px}
.ut-edges .pills{margin-top:14px}

/* A pill that is a checkbox: a small square fills when it is on. */
.ut-toggle > span::before{
  content:"";flex:none;width:11px;height:11px;border-radius:3px;border:1.5px solid currentColor;
  transition:background .2s var(--ease),box-shadow .2s var(--ease);
}
.ut-toggle input:checked + span::before{background:var(--ink);border-color:var(--ink);box-shadow:inset 0 0 0 2px var(--olive)}

@media (max-width:560px){
  .ut-split__knob{width:34px;height:34px}
  .ut-tag{top:8px;font-size:11px;padding:3px 8px}
  .ut-tag--before{left:8px}
  .ut-tag--after{right:8px}
}
@media (prefers-reduced-motion:reduce){
  .ut-bar span,.ut-canvas--after,.ut-split__knob{transition:none}
}