/* =============================================================================
   Łączenie PDF - the file list: hairline rows with the first page, the name,
   a page range and the order buttons. Rows reorder by drag (mouse anywhere,
   finger on the grip) or by the arrows.
   ============================================================================= */

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

.pm-view{display:flex;flex-direction:column;gap:14px}
.pm-list{list-style:none;border-top:1px solid var(--rule-d)}

.pm-row{
  position:relative;display:grid;align-items:center;gap:6px 12px;
  grid-template-columns:20px 24px 44px minmax(0,1fr) 196px auto auto;
  grid-template-areas:"grip n thumb main range acts del";
  padding:12px 0;border-bottom:1px solid var(--rule-d);background:var(--ink);
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
@media (pointer:fine){.pm-row{cursor:grab}}

/* The grip is the only place a finger starts a drag, so the page still scrolls. */
.pm-grip{
  grid-area:grip;display:grid;place-items:center;width:20px;height:40px;color:var(--fg-3);
  touch-action:none;cursor:grab;transition:color .2s var(--ease);
}
.pm-grip svg{width:16px;height:16px;fill:currentColor}
.pm-n{grid-area:n;font-size:11px;letter-spacing:.06em;color:var(--olive)}

/* The first page, white on a dark well, in its own shape. */
.pm-thumb{
  grid-area:thumb;display:grid;place-items:center;width:44px;height:56px;border-radius:3px;
  background:rgba(250,250,247,.06);overflow:hidden;
}
.pm-thumb img{display:block;max-width:100%;max-height:100%;background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.4);pointer-events:none;-webkit-user-drag:none}
.pm-thumb img:not([src]){display:none}

.pm-main{grid-area:main;min-width:0;display:flex;flex-direction:column;gap:3px;transition:transform .42s var(--ease-out)}
.pm-name{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:15px;font-weight:500;letter-spacing:-.01em}
.pm-info{font-size:11px;letter-spacing:.04em;color:var(--fg-2)}
.pm-msg{font-size:13px;line-height:1.45;color:var(--fg-2);-webkit-user-select:text;user-select:text}
.pm-msg.is-error{color:#ff8a7a}

.pm-pass{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:4px}
.pm-pass input{
  flex:1 1 150px;min-width:0;max-width:240px;min-height:40px;padding:8px 12px;border-radius:var(--r-sm);
  background:var(--ink);border:1px solid rgba(250,250,247,.2);color:var(--bone);font-size:14px;outline:none;
  transition:border-color .2s var(--ease);
}
.pm-pass input:focus{border-color:var(--olive)}
.pm-pass .gen__action{min-height:40px}

/* Page range: a small labelled field. */
.pm-range{grid-area:range;display:flex;align-items:center;gap:10px}
.pm-range label{flex:none;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.pm-range input{
  width:100%;min-height:40px;padding:8px 12px;border-radius:var(--r-sm);
  background:var(--ink);border:1px solid rgba(250,250,247,.16);color:var(--bone);
  font-family:'JetBrains Mono',monospace;font-size:13px;outline:none;
  transition:border-color .2s var(--ease),opacity .2s var(--ease);
}
.pm-range input::placeholder{color:var(--bone);opacity:.45}
.pm-range input:focus{border-color:var(--olive)}
.pm-range input[aria-invalid="true"]{border-color:#ff8a7a}
.pm-range input:disabled{opacity:.35;cursor:not-allowed}

.pm-acts{grid-area:acts;display:flex;align-items:center;gap:4px}
.pm-btn{
  display:grid;place-items:center;width:40px;height:40px;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);
}
.pm-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pm-btn[disabled]{opacity:.25;cursor:default}
.pm-btn--del{grid-area:del}
@media (hover:hover){
  .pm-row:hover .pm-grip{color:var(--fg)}
  .pm-row:hover .pm-main{transform:translate3d(6px,0,0)}
  .pm-btn:hover:not([disabled]){border-color:var(--ghost);color:var(--fg)}
  .pm-btn--del:hover:not([disabled]){background:#ff8a7a;border-color:#ff8a7a;color:var(--ink)}
}

/* States: waiting rows are quiet, broken ones step back. */
.pm-row[data-state="wait"] .pm-thumb,.pm-row[data-state="read"] .pm-thumb{background:rgba(250,250,247,.04)}
.pm-row[data-state="read"] .pm-info{color:var(--olive)}
.pm-row[data-state="bad"] .pm-thumb,.pm-row[data-state="bad"] .pm-name{opacity:.45}
.pm-row[data-state="lock"] .pm-info{color:var(--olive)}

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

.pm-more{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.pm-add{display:inline-flex;align-items:center;gap:8px;min-height:40px}
/* The hint names the grip where fingers are the pointer. */
.pm-hint--touch{display:none}
@media (pointer:coarse){.pm-hint--fine{display:none}.pm-hint--touch{display:inline}}

/* ---- panel ---- */
.pm-order{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px}
.pm-order .gen__action{min-height:40px}
.pm-tip{font-size:13px;line-height:1.55;color:var(--fg-2)}
.pm-tip .mono{font-size:12px;color:var(--fg)}

#pmRoot.is-busy .pm-list{cursor:progress}
#pmRoot.is-busy .pm-btn,#pmRoot.is-busy .pm-range input{pointer-events:none;opacity:.5}
#pmNote a{color:var(--fg);text-decoration:underline;text-decoration-color:var(--olive);text-underline-offset:3px}

@media (max-width:640px){
  .pm-range input,.pm-pass input{font-size:16px}   /* below 16px iOS zooms in */
}
@media (max-width:760px){
  .pm-row{
    grid-template-columns:24px 40px minmax(0,1fr) auto;
    grid-template-areas:"n thumb main del" "grip thumb range acts";
    align-items:start;gap:8px 10px;
  }
  .pm-n{padding-top:2px;text-align:center}
  .pm-grip{width:24px;height:40px;align-self:center}
  .pm-thumb{width:40px;height:52px}
  .pm-range{gap:8px}
  .pm-acts{gap:0}
  .pm-btn--del{justify-self:end;margin-top:-4px}
  .pm-name{font-size:14px}
}
@media (prefers-reduced-motion:reduce){.pm-row.is-settling,.pm-main{transition:none}}