/* =============================================================================
   Zdjęcia do PDF - the slide list: numbered page thumbnails that reorder by
   drag (mouse anywhere, finger on the grip) or by the arrow buttons.
   ============================================================================= */
.zp-view{display:flex;flex-direction:column;gap:12px}
.zp-slides{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.zp-slide{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

/* A square window with the page centred in it, so slides of any shape line up. */
.zp-thumb{position:relative;aspect-ratio:1;overflow:hidden;border-radius:var(--r-xs);background:rgba(0,0,0,.32)}
@media (pointer:fine){.zp-thumb{cursor:grab}}
.zp-page{position:absolute;left:50%;top:50%;overflow:hidden;transform:translate(-50%,-50%);background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.35)}
.zp-page img{position:absolute;display:block;max-width:none;pointer-events:none;-webkit-user-drag:none}

/* The grip is the only place a finger starts a drag, so the page still scrolls. */
.zp-grip{
  position:absolute;top:6px;right:6px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  background:rgba(10,10,10,.78);color:var(--bone);cursor:grab;touch-action:none;
}
.zp-grip svg{width:18px;height:18px;fill:currentColor}

.zp-acts{display:flex;align-items:center;gap:6px}
.zp-btn{
  display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:50%;
  border:1px solid var(--ghost);color:var(--fg);
  transition:background .26s var(--ease),color .26s var(--ease),border-color .26s var(--ease),opacity .2s var(--ease);
}
.zp-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.zp-btn:hover:not([disabled]){background:var(--fg);border-color:var(--fg);color:var(--bg)}
.zp-btn[disabled]{opacity:.28;cursor:default}
.zp-btn--del{margin-left:auto}
.zp-btn--del:hover:not([disabled]){background:#ff8a7a;border-color:#ff8a7a;color:var(--ink)}

/* Picked up: lifted above the rest, following the pointer. */
.zp-slide.is-dragging{z-index:5;cursor:grabbing;border-color:var(--olive);background:var(--ink-2);box-shadow:0 18px 44px rgba(0,0,0,.6)}
.zp-slide.is-dragging .zp-thumb,.zp-slide.is-dragging .zp-grip{cursor:grabbing}
.zp-slide.is-settling{transition:transform .24s var(--ease-out)}
.zp-slides.is-sorting .zp-slide:not(.is-dragging){opacity:.85}

.zp-more{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.zp-add{display:inline-flex;align-items:center;gap:8px;min-height:40px;cursor:pointer}
.zp-add:has(input:focus-visible){outline:2px solid var(--olive);outline-offset:3px}
/* The hint names the grip where fingers are the pointer. */
.zp-hint--touch{display:none}
@media (pointer:coarse){.zp-hint--fine{display:none}.zp-hint--touch{display:inline}}

.zp-field-hint{margin-top:2px;line-height:1.5}

/* Lit when the colour picker, not a swatch, holds the colour. */
.swatches:not(:has(input[name="zpSwatch"]:checked)) .swatch-custom{border-color:var(--olive)}

#zpRoot.is-busy .zp-slides{cursor:progress}
#zpRoot.is-busy .zp-btn{pointer-events:none;opacity:.5}

@media (max-width:560px){
  .zp-slides{grid-template-columns:repeat(2,minmax(0,1fr))}
  .zp-btn{width:40px;height:40px}
  .zp-acts{gap:4px}
}
@media (prefers-reduced-motion:reduce){.zp-slide.is-settling{transition:none}}