/* SkyyCast Merge PDF (/tools/merge-pdf).
 *
 * Loaded by that page only, after assets/sc-public.css AND
 * assets/sc-image-checker.css: reuses the checker's shared `ic-*` shell
 * (drop zone, buttons, card list, badges, facts grid) and the shared
 * `.ic-split` two-pane workspace, and only adds the `mp-*` pieces specific
 * to this tool -- the per-item reorder/rotate buttons and the final
 * page-order list (a real list of each file's page range in the merged
 * document, not a rendered thumbnail -- see sc-merge-pdf.js's header note
 * on why page thumbnails aren't implemented). All scoped under `.pub-site`
 * and built from the `--pub-*` tokens: no new colours, no new fonts,
 * nothing on :root/html/body. Motion is limited to short state
 * transitions and is switched off under prefers-reduced-motion. */

/* ---- Drop zone reused from ic-drop; just needs top margin here ---- */
.pub-site .mp-tool .ic-drop { margin-top: .25rem; }

/* ---- File list: PDF icon + reorder/rotate buttons ---- */
.pub-site .mp-card { align-items: center; }
.pub-site .mp-card-icon {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--pub-radius-sm, 6px);
  background: var(--pub-bg-soft);
  border: 1px solid var(--pub-border);
  color: var(--pub-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pub-site .mp-card-icon svg { width: 18px; height: 18px; }
.pub-site .mp-card-actions { display: flex; align-items: center; gap: .15rem; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.pub-site .mp-move-btn {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--pub-text-muted);
  width: 32px;
  height: 32px;
  border-radius: var(--pub-radius-sm, 6px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.pub-site .mp-move-btn svg { width: 16px; height: 16px; }
.pub-site .mp-move-btn:hover:not(:disabled) { background: var(--pub-bg-soft); color: var(--pub-text); }
.pub-site .mp-move-btn:focus-visible { outline: none; box-shadow: var(--pub-ring); }
.pub-site .mp-move-btn:disabled { opacity: .3; cursor: not-allowed; }

/* ---- Progress ---- */
.pub-site .mp-progress { margin: .9rem 0 0; display: flex; align-items: center; gap: .6rem; }
.pub-site .mp-progress[hidden] { display: none; }
.pub-site .mp-progress::before {
  content: "";
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid var(--pub-accent);
  border-right-color: transparent;
  animation: mp-spin .8s linear infinite;
  flex: none;
}
@keyframes mp-spin { to { transform: rotate(360deg); } }
.pub-site .mp-progress-label { font-size: .875rem; font-weight: 700; color: var(--pub-text-secondary); margin: 0; }

/* ---- Final page-order list (right panel) ---- */
.pub-site .mp-order-wrap[hidden] { display: none; }
.pub-site .mp-order-title {
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--pub-text-muted);
  margin: 0 0 .75rem;
}
.pub-site .mp-order-list {
  list-style: none;
  counter-reset: mp-order;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.pub-site .mp-order-item {
  counter-increment: mp-order;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  padding: .55rem .7rem;
  border: 1px solid var(--pub-border);
  border-radius: var(--pub-radius-sm, 6px);
  background: var(--pub-surface);
}
.pub-site .mp-order-item::before {
  content: counter(mp-order) ".";
  font-weight: 800;
  color: var(--pub-text-muted);
  margin-right: .5rem;
}
.pub-site .mp-order-name { font-weight: 700; color: var(--pub-text); overflow-wrap: anywhere; }
.pub-site .mp-order-meta { font-size: .8125rem; color: var(--pub-text-muted); white-space: nowrap; flex: none; }

@media (prefers-reduced-motion: reduce) {
  .pub-site .mp-progress::before { animation: none; border-right-color: var(--pub-accent); }
}