/*
 * page_swap.css — the Page Swap tool's dual-document composer. Kept
 * separate from pdf_edit.css (that file's toolbar/canvas/overlay/modal
 * styles are for the single-document freeform editor; this tool's whole
 * layout — two page grids, insertion slots, a source tray — is its own
 * shape). Reuses the shared token contract (--card, --border, --accent,
 * --primary, --cyan, etc.) from style.css's :root so it still repaints
 * correctly for both themes without redefining any color itself.
 */

.psw-panel { max-width: none; }

/* style.css's .btn is a fairly large, chunky call-to-action button by
   design (11px/22px padding) - too heavy for the secondary, low-stakes
   actions on this page (Try again, Change file, Save/Load recipe, Clear
   selection). Rather than inventing a site-wide .btn-sm/.btn-outline
   that doesn't exist anywhere else yet, this page just tightens .btn
   locally wherever it's paired with this class. */
.psw-btn-sm { padding: 7px 14px; font-size: 13px; }

.psw-loading {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 60px 20px; color: var(--text-muted); font-size: 14px;
}
.psw-spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--border); border-top-color: var(--accent);
  animation: pswSpin 0.8s linear infinite;
}
@keyframes pswSpin { to { transform: rotate(360deg); } }

.psw-privacy-note {
  display: flex; align-items: center; gap: 8px;
  color: var(--text-muted); font-size: 12.5px; margin: 6px 0 0;
}
.psw-privacy-note svg { flex-shrink: 0; color: var(--accent-light); }

/* --- Workspace shell ------------------------------------------------- */

.psw-workspace { margin-top: 4px; }

.psw-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--surface-soft); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 12px; position: sticky; top: 76px; z-index: 20;
}
.psw-toolbar-file { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.psw-toolbar-file strong { font-size: 14px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
.psw-toolbar-file span { font-size: 12.5px; color: var(--text-muted); }
.psw-toolbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.psw-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--border);
  background: var(--card); color: var(--text); cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, opacity 0.18s ease, transform 0.12s ease;
}
.psw-icon-btn:hover:not(:disabled) { background: var(--tint); border-color: var(--border-strong); transform: translateY(-1px); }
.psw-icon-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* --- Plain-English change summary -------------------------------------- */

.psw-summary {
  background: var(--card); border: 1px dashed var(--border-strong); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 14px; font-size: 13.5px; color: var(--text);
}
.psw-summary h4 { margin: 0 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); }
.psw-summary ul { margin: 0; padding-left: 18px; }
.psw-summary li { margin: 3px 0; }
.psw-summary .psw-summary-empty { color: var(--text-muted); font-style: italic; }
.psw-summary-count { float: right; font-weight: 700; color: var(--accent-light); }

/* --- Two-column main layout --------------------------------------------- */

.psw-main-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 18px; align-items: start; }
@media (max-width: 880px) { .psw-main-grid { grid-template-columns: 1fr; } }

.psw-col-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.psw-col-head h3 { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 7px; }
.psw-col-hint { font-size: 12px; color: var(--text-muted); margin: 0 0 10px; }

/* --- Composed-document canvas -------------------------------------------- */

.psw-canvas {
  display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px; min-height: 220px;
}
.psw-canvas.psw-canvas-dragging-active { background: var(--tint); }

.psw-tile {
  position: relative; width: 108px; display: flex; flex-direction: column; align-items: center;
  padding: 6px; border-radius: 10px; border: 2px solid transparent; cursor: grab;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.psw-tile:active { cursor: grabbing; }
.psw-tile:hover { box-shadow: 0 4px 14px rgba(33, 29, 44, 0.12); transform: translateY(-1px); }
.psw-tile.psw-tile-dragging { opacity: 0.35; }
.psw-tile.psw-tile-replace-target { border-color: var(--accent); background: var(--tint); box-shadow: 0 0 0 3px var(--tint-border); }
.psw-tile.psw-tile-flash { animation: pswFlash 1.1s ease; }
@keyframes pswFlash {
  0% { box-shadow: 0 0 0 4px var(--tint-border); }
  100% { box-shadow: 0 0 0 0 rgba(226, 150, 60, 0); }
}

.psw-thumb-wrap {
  position: relative; width: 96px; height: 128px; border-radius: 6px; overflow: hidden;
  background: #fff; border: 1px solid var(--border); box-shadow: 0 1px 3px rgba(33, 29, 44, 0.15);
}
.psw-thumb-wrap img, .psw-thumb-wrap canvas { display: block; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.psw-thumb-placeholder {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); background: var(--surface-soft);
}
.psw-thumb-placeholder .psw-spinner { width: 20px; height: 20px; border-width: 2px; }

.psw-tile-badge {
  position: absolute; top: 4px; left: 4px; font-size: 10px; font-weight: 800; letter-spacing: 0.02em;
  color: #fff; padding: 1.5px 5px; border-radius: 5px; line-height: 1.5;
}
.psw-badge-a { background: var(--primary); }
.psw-badge-b { background: var(--accent); }

.psw-tile-num { margin-top: 4px; font-size: 11px; color: var(--text-muted); }

.psw-tile-remove {
  position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--danger); color: #fff; border: 2px solid var(--card); display: flex; align-items: center;
  justify-content: center; cursor: pointer; font-size: 13px; line-height: 1; opacity: 0;
  transition: opacity 0.15s ease, transform 0.12s ease;
}
.psw-tile:hover .psw-tile-remove, .psw-tile:focus-within .psw-tile-remove { opacity: 1; }
.psw-tile-remove:hover { transform: scale(1.1); }

.psw-tile-replace-btn {
  position: absolute; bottom: -7px; right: -7px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); color: #fff; border: 2px solid var(--card); display: none; align-items: center;
  justify-content: center; cursor: pointer; font-size: 12px; line-height: 1;
}
.psw-tile-replace-btn.psw-visible { display: flex; }
.psw-tile-replace-btn:hover { transform: scale(1.1); }

/* Insertion slot: a thin gap between (or before/after) tiles that becomes
   a visible, clickable "+" target only while the tray has a selection or
   a drag is in flight — kept invisible-but-present the rest of the time
   so the canvas doesn't look like a row of gaps waiting for something. */
.psw-slot {
  width: 10px; align-self: stretch; min-height: 128px; display: flex; align-items: center; justify-content: center;
  border-radius: 6px; transition: width 0.12s ease, background 0.12s ease;
}
.psw-slot-active { width: 34px; background: var(--tint); border: 1.5px dashed var(--border-strong); cursor: pointer; }
.psw-slot-active .psw-slot-plus {
  width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; line-height: 1;
}
.psw-slot-hot { width: 44px; background: var(--tint-violet); border-color: var(--violet); }
.psw-slot-hot .psw-slot-plus { background: var(--violet); }

.psw-canvas-empty { color: var(--text-muted); font-size: 13.5px; padding: 30px; text-align: center; width: 100%; }

/* --- Source tray (Document B) -------------------------------------------- */

.psw-tray-upload { padding: 18px; }
.psw-tray-upload .dz-icon { width: 40px; height: 40px; }

.psw-source-loaded {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 12px;
}
.psw-source-file-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.psw-source-file-row strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psw-link-btn {
  background: none; border: none; color: var(--accent-light); font-size: 12.5px; font-weight: 700;
  cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 2px;
}

.psw-tray-actions-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.psw-tray-actions-row .psw-link-btn { font-size: 12px; }

.psw-suggestions {
  background: var(--tint-violet); border: 1px solid var(--tint-violet-border); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 10px; font-size: 12.5px;
}
.psw-suggestions h4 {
  margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--violet);
  display: flex; align-items: center; gap: 5px;
}
.psw-suggestion-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 5px 0; border-top: 1px solid rgba(168, 59, 44, 0.12);
}
.psw-suggestion-row:first-of-type { border-top: none; }
.psw-suggestion-row button {
  background: var(--violet); color: #fff; border: none; border-radius: 7px; padding: 4px 9px;
  font-size: 11.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.psw-suggestion-row button:hover { background: var(--violet-deep); }
.psw-suggestion-match { color: var(--text-muted); font-size: 11px; }

.psw-tray {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px;
  max-height: 480px; overflow-y: auto; padding: 4px 2px;
}
.psw-tray-tile {
  position: relative; cursor: grab; border-radius: 8px; border: 2px solid transparent; padding: 3px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.psw-tray-tile:hover { background: var(--tint); }
.psw-tray-tile.psw-tray-selected { border-color: var(--accent); background: var(--tint); }
.psw-tray-tile .psw-thumb-wrap { width: 78px; height: 104px; }
.psw-tray-check {
  position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 5px;
  background: rgba(251, 248, 241, 0.92); border: 1.5px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center; color: var(--accent); font-size: 12px; font-weight: 900;
}
.psw-tray-tile.psw-tray-selected .psw-tray-check { background: var(--accent); color: #fff; border-color: var(--accent); }
.psw-tray-tile .psw-tile-num { font-size: 10.5px; text-align: center; }

.psw-clipboard-bar {
  display: none; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--tint); border: 1px solid var(--border-strong); border-radius: 10px;
  padding: 8px 10px; margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--text);
}
.psw-clipboard-bar.psw-visible { display: flex; }
.psw-clipboard-bar button { flex-shrink: 0; }

/* --- Recipe row ------------------------------------------------------- */

.psw-recipe-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px;
  padding-top: 14px; border-top: 1px solid var(--border);
}
.psw-recipe-note { font-size: 12px; color: var(--text-muted); flex-basis: 100%; margin: 0 0 2px; }
.psw-recipe-status {
  font-size: 12.5px; padding: 8px 10px; border-radius: 9px; margin-top: 8px; flex-basis: 100%;
  background: var(--warn-bg); border: 1px solid var(--warn-border); color: var(--warn); display: none;
}
.psw-recipe-status.psw-visible { display: block; }
.psw-recipe-status.psw-status-ok { background: var(--success-bg); border-color: var(--success-border); color: var(--success); }

/* --- Error box (shared shape with other upload-first tools) -------------- */

.psw-error-box {
  display: none; align-items: flex-start; gap: 10px; background: var(--danger-bg);
  border: 1px solid var(--danger-border); color: var(--danger); border-radius: 12px; padding: 14px 16px; margin-top: 12px;
}
.psw-error-box.psw-visible { display: flex; }
.psw-error-box button { margin-left: auto; flex-shrink: 0; }

/* .hidden is already defined globally in style.css - reused as-is. */