/* =============================================================================
   Porządkowanie PDF - the page grid: tiles that drag (mouse anywhere, finger
   on the grip), turn with a CSS transform and step back when deleted; the
   bulk buttons and the keyboard crib in the panel.
   ============================================================================= */

/* Until a PDF is open the panel has nothing to act on, so the drop zone
   takes the whole width and is the only thing to look at. */
#poRoot:not(.has-doc) .tool__work{grid-template-columns:minmax(0,1fr)}
#poRoot:not(.has-doc) .po-panel{display:none}

/* The input lives outside the drop zone (see the partial): its focus ring
   is drawn on the zone. */
.po-input:focus-visible + .drop{outline:2px solid var(--olive);outline-offset:3px}

.po-view{display:flex;flex-direction:column;gap:12px}
.po-doc{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2);overflow-wrap:anywhere}

/* A long document scrolls inside the stage, so the panel and the download
   button stay in reach. */
.po-pages{
  list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:16px 12px;align-items:start;
  max-height:min(72vh,720px);overflow:auto;overscroll-behavior:contain;padding:6px 6px 6px 4px;
  scrollbar-width:thin;scrollbar-color:rgba(204,211,118,.5) transparent;
}
.po-page{
  position:relative;display:flex;flex-direction:column;gap:6px;border-radius:var(--r-xs);background:var(--ink);
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
@media (pointer:fine){.po-page{cursor:grab}}

/* A fixed window with the page centred in it. The sheet turns inside it. */
.po-thumb{position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:var(--r-xs);background:rgba(250,250,247,.04)}
.po-sheet{
  position:absolute;left:50%;top:50%;overflow:hidden;background:rgba(250,250,247,.1);
  transform:translate(-50%,-50%);transform-origin:50% 50%;
  transition:transform .34s var(--ease-out),opacity .2s var(--ease),background .3s var(--ease);
}
.po-sheet:has(img[src]){background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.35)}
.po-sheet img{display:block;width:100%;height:100%;pointer-events:none;-webkit-user-drag:none}
.po-sheet img:not([src]){visibility:hidden}
.po-page.is-blank .po-sheet{background:rgba(250,250,247,.16)}

.po-num{
  position:absolute;top:6px;left:6px;padding:3px 8px;border-radius:999px;
  background:rgba(10,10,10,.78);color:var(--olive);font-size:11px;letter-spacing:.06em;
}
.po-num:empty{display:none}

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

/* Deleted: the page steps back and says so; the button turns into "restore". */
.po-gone{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:none;padding:4px 10px;border-radius:999px;
  background:rgba(10,10,10,.85);border:1px solid rgba(255,138,122,.6);color:#ff8a7a;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
}
.po-page.is-gone .po-sheet{opacity:.22}
.po-page.is-gone .po-gone{display:block}

.po-acts{display:flex;align-items:center;gap:4px}
.po-btn{
  display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:50%;
  border:1px solid transparent;color:var(--fg-2);
  transition:background .26s var(--ease),color .26s var(--ease),border-color .26s var(--ease),opacity .2s var(--ease);
}
.po-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.po-btn[disabled]{opacity:.25;cursor:default}
.po-btn--del{margin-left:auto}
.po-page.is-gone .po-btn--del{color:var(--olive)}
@media (hover:hover){
  .po-btn:hover:not([disabled]){border-color:var(--ghost);color:var(--fg)}
  .po-btn--del:hover:not([disabled]){background:#ff8a7a;border-color:#ff8a7a;color:var(--ink)}
  .po-page.is-gone .po-btn--del:hover{background:var(--olive);border-color:var(--olive);color:var(--ink)}
  .po-page:hover .po-sheet:has(img[src]){box-shadow:0 6px 18px rgba(0,0,0,.5)}
}

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

/* The hint names the grip where fingers are the pointer. */
.po-hint{text-align:center}
.po-hint--touch{display:none}
@media (pointer:coarse){.po-hint--fine{display:none}.po-hint--touch{display:inline}}

/* ---- password ---- */
.po-pass{display:flex;flex-direction:column;gap:16px;max-width:420px;width:100%;margin:0 auto;padding:clamp(28px,6vw,64px) 4px}
.po-pass__text{font-size:15px;line-height:1.55;color:var(--fg-2)}
.po-pass__acts{display:flex;flex-wrap:wrap;gap:10px}
.po-pass__acts .btn{padding:14px 22px}

/* ---- panel ---- */
.po-bulk{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px}
.po-bulk .gen__action{display:inline-flex;align-items:center;gap:8px;min-height:40px}
.po-bulk svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* The keyboard crib folds away under "Skróty klawiszowe". */
.po-keys{display:flex;flex-direction:column;border-top:1px solid var(--rule-d)}
.po-keys > div{display:grid;grid-template-columns:128px minmax(0,1fr);gap:12px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--rule-d)}
.po-keys dt{font-size:11px;letter-spacing:.06em;color:var(--fg)}
.po-keys dd{font-size:13px;line-height:1.45;color:var(--fg-2)}
/* Phones and tablets without a keyboard don't need the crib. */
@media (pointer:coarse){.po-more{display:none}}

#poRoot.is-busy .po-pages{cursor:progress}
#poRoot.is-busy .po-btn,#poRoot.is-busy .po-grip{pointer-events:none;opacity:.5}

@media (max-width:560px){
  .po-pages{grid-template-columns:repeat(2,minmax(0,1fr));max-height:64vh;gap:14px 10px}
  .po-btn{width:40px;height:40px}
  .po-acts{gap:2px}
  .po-pass__acts .btn{flex:1 1 auto;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.po-sheet,.po-page.is-settling{transition:none}}