/* ============ Photo upscaling (powiekszanie) ============
   The before/after frame of usun-tlo, with a close-up view that pans, and the
   progress over the photo while tiles arrive. The rest comes from the shared
   tool components. */

/* ---- before / after frame ---- */
.pz-view{display:flex;flex-direction:column;align-items:center;gap:12px}
/* pan-y: on a phone the page still scrolls up and down over the photo; a
   sideways drag moves the divider (or the close-up). */
.pz-frame{
  --split:50%;
  position:relative;max-width:100%;overflow:hidden;border-radius:var(--r-xs);background:var(--ink-2);
  touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
.pz-frame.has-result{cursor:ew-resize}
/* The close-up pans both ways, so it keeps the finger. */
.pz-frame.is-zoom{cursor:grab;touch-action:none}
.pz-frame.is-zoom.is-pan{cursor:grabbing}
.pz-canvas{display:block;width:100%;height:100%}
.pz-canvas--before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--split)) 0 0)}

.pz-split{
  position:absolute;top:0;bottom:0;left:var(--split);width:44px;margin-left:-22px;
  display:flex;align-items:center;justify-content:center;cursor:ew-resize;
}
.pz-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);
}
.pz-split:focus-visible{outline:none}
.pz-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);
}
.pz-split__knob svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pz-split:focus-visible .pz-split__knob{outline:2px solid var(--olive);outline-offset:3px}
.pz-frame.is-drag .pz-split__knob{transform:scale(1.08);background:var(--olive)}

.pz-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;
}
.pz-tag--before{left:10px}
.pz-tag--after{right:10px;color:var(--olive)}

.pz-under{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 18px}
.pz-under .tool__hint{text-align:center;margin:0}
.pz-zoom .pill{min-height:36px}

/* ---- progress over the photo: tiles land under it, so it stays light ---- */
.pz-busy{
  position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:18px 20px 20px;text-align:center;
  background:linear-gradient(to top,rgba(10,10,10,.72),rgba(10,10,10,0));
}
.pz-busy.is-error{top:0;justify-content:center;background:rgba(10,10,10,.6)}
.pz-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)}
.pz-bar{width:min(300px,76%);height:2px;border-radius:2px;background:rgba(250,250,247,.2);overflow:hidden}
.pz-bar span{display:block;height:100%;background:var(--olive);transform:scaleX(0);transform-origin:left;transition:transform .25s linear}
.pz-busy.is-error .pz-busy__text{color:#ff8a7a}
.pz-busy.is-error .pz-bar{display:none}
.pz-busy .gen__action{min-height:40px;background:rgba(10,10,10,.6)}

/* ---- panel ---- */
.pz-hint{margin-top:10px;max-width:46ch;font-size:13px;line-height:1.5;color:var(--fg-2)}
.pz-forget{margin-top:12px;border-color:var(--rule-d);color:var(--fg-2)}
.pz-forget:hover{border-color:var(--fg)}

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