/* ============================================================
   DUAL PAGE — split a PDF into odd/even halves for manual
   duplex printing, with optional delay pages and reverse
   ordering. Styles match the other .tool-body / .copt cards.
   ============================================================ */

#view-dual-pager .dp-wrap{max-width:980px;margin:0 auto;padding:0 4px}

#view-dual-pager .dp-input{display:flex;flex-direction:column;gap:16px;margin-bottom:20px}

/* The drop zone is clickable, so it has to be reachable by keyboard too. */
#view-dual-pager .drop:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

#view-dual-pager .dp-opts{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:14px 18px;
  align-items:end;
}
#view-dual-pager .dp-opts .fld{margin:0}
#view-dual-pager .dp-opts .fld > span{
  display:block;
  font:600 10.5px var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--soft);
  margin-bottom:5px;
}
#view-dual-pager .dp-opts select,
#view-dual-pager .dp-opts input[type="number"]{
  width:100%;
  padding:8px 10px;
  font:600 13px var(--sans);
  color:var(--fg);
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:8px;
}
#view-dual-pager .dp-opts select:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:1px;
}

#view-dual-pager .dp-info{
  display:flex;
  flex-wrap:wrap;
  gap:8px 12px;
  margin-top:14px;
  padding:11px 14px;
  border-radius:10px;
  background:color-mix(in srgb,var(--accent) 6%,var(--surface));
  border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));
  font:12.5px/1.55 var(--sans);
  color:var(--soft);
  align-items:center;
}
#view-dual-pager .dp-info b{color:var(--fg);font-weight:600}
#view-dual-pager .dp-info .dp-tag{
  display:inline-block;
  padding:2px 9px;
  border-radius:99px;
  background:var(--accent);
  color:var(--accent-ink);
  font:700 10px var(--mono);
  letter-spacing:.06em;
  text-transform:uppercase;
  flex:none;
}

#view-dual-pager .dp-go{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:12px;
  margin-top:16px;
}
#view-dual-pager .dp-go .btn{padding:11px 22px;font-size:13.5px}
#view-dual-pager .dp-status{
  font:600 11.5px var(--mono);
  color:var(--soft);
  margin-right:auto;
}
#view-dual-pager .dp-status[hidden]{display:none!important}
#view-dual-pager .dp-status.err{color:var(--err)}

/* ---------- Thumbnail preview strip inside each result card ---------- */
#view-dual-pager .dp-thumbs{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(74px,1fr));
  gap:8px;
  margin-top:4px;
}
#view-dual-pager .dp-thumb{
  position:relative;
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden;
  background:#fff;
  aspect-ratio:1 / 1.414;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}
#view-dual-pager .dp-thumb canvas{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
#view-dual-pager .dp-thumb .dp-num{
  position:absolute;
  left:3px;
  bottom:3px;
  padding:1px 6px;
  border-radius:99px;
  background:rgba(0,0,0,.66);
  color:#fff;
  font:700 9.5px var(--mono);
  letter-spacing:.02em;
}
#view-dual-pager .dp-thumbs-more{
  grid-column:1 / -1;
  text-align:center;
  font:600 11px var(--mono);
  color:var(--soft);
  padding:6px 0;
}