/*
 * PDF Toolkit — the page grid.
 * Surfaces, buttons and status cards come from media-tools.css; this file only
 * owns the thumbnail grid, the page tile, the toolbar and the confirm modal.
 * Every selector is `.pt-` prefixed so nothing leaks into the shared layer.
 */

.pt-drop { min-height: 300px; }

/* Once pages exist the drop target shrinks to a strip so the grid owns the view. */
.pt-drop.is-compact { min-height: 108px; padding: 14px; }
.pt-drop.is-compact .drop-icon,
.pt-drop.is-compact .dropzone-inner p { display: none; }
.pt-drop.is-compact .dropzone-inner { display: flex; max-width: none; align-items: center; justify-content: center; gap: 14px; }
.pt-drop.is-compact h2 { font-size: .86rem; letter-spacing: -.02em; }

/* ---------- toolbar ---------- */

.pt-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px;
  border: 1px solid var(--media-line);
  border-radius: 14px;
  background: rgba(248, 245, 238, .74);
}

.pt-toolgroup {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--media-line);
  border-radius: 11px;
  background: #fffdf8;
}

.pt-tbtn {
  display: inline-flex;
  min-height: 31px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #55524c;
  background: transparent;
  cursor: pointer;
  font-size: .69rem;
  font-weight: 700;
  white-space: nowrap;
}

.pt-tbtn svg { width: 15px; height: 15px; }
/* hover looks only where there is hover: a finger leaves :hover on the button it tapped */
@media (hover: hover) {
  .pt-tbtn:hover:not(:disabled) { border-color: var(--media-line); color: var(--media-ink); background: var(--surface-subtle, #f8f5ee); }
}
.pt-tbtn:disabled { opacity: .38; cursor: not-allowed; }
@media (hover: hover) {
  .pt-tbtn.is-danger:hover:not(:disabled) { color: #b23c2c; }
}

.pt-range { gap: 6px; padding: 3px 3px 3px 9px; }
.pt-inline-label { color: #7d7970; font-family: "DM Mono", ui-monospace, monospace; font-size: .6rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.pt-range-input { width: 132px; min-height: 31px; border-radius: 8px; font-size: .7rem; }

.pt-selcount {
  margin-left: auto;
  color: var(--media-muted);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: .64rem;
}

/* ---------- page grid ---------- */

.pt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--pt-tile, 168px), 1fr));
  gap: 11px;
  margin-top: 13px;
}

.pt-page {
  position: relative;
  display: grid;
  gap: 7px;
  padding: 8px;
  border: 1px solid var(--media-line);
  border-radius: 14px;
  background: #fffdf8;
}

.pt-page.is-selected {
  border-color: var(--media-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--media-accent) 15%, transparent);
}

.pt-page.has-break { border-right: 3px dashed var(--media-accent); }
.pt-page.is-dragging { opacity: .35; }

/* Insertion marker while dragging: a bar on the edge the pages will land on. */
.pt-page.is-drop-before::before,
.pt-page.is-drop-after::before {
  position: absolute;
  top: 4px;
  bottom: 4px;
  z-index: 3;
  width: 3px;
  border-radius: 3px;
  background: var(--media-accent);
  content: "";
}

.pt-page.is-drop-before::before { left: -7px; }
.pt-page.is-drop-after::before { right: -7px; }

.pt-thumb {
  position: relative;
  display: grid;
  height: var(--pt-thumb, 178px);
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  background: #ebe6dd;
}

.pt-select {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  padding: 7px;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
}

.pt-select canvas {
  display: block;
  max-width: 100%;
  max-height: 100%;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 2px 9px rgba(46, 40, 30, .18);
}

.pt-thumb.is-pending canvas { width: 62%; height: 82%; background: #f3efe8; box-shadow: none; }
.pt-thumb.is-pending::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%);
  background-size: 220% 100%;
  content: "";
  animation: pt-shimmer 1.5s linear infinite;
  pointer-events: none;
}

.pt-thumb.is-failed::after {
  position: absolute;
  inset: auto 0 0;
  padding: 4px;
  color: #b23c2c;
  content: "Preview unavailable";
  font-size: .58rem;
  text-align: center;
}

.pt-move {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--media-line);
  border-radius: 50%;
  color: var(--media-ink);
  background: rgba(255, 253, 248, .93);
  box-shadow: 0 3px 9px rgba(46, 40, 30, .16);
  opacity: 0;
  cursor: pointer;
  transform: translateY(-50%);
  /* invisible means untappable: a hidden arrow once caught taps on a page's edge */
  pointer-events: none;
}

.pt-move svg { width: 13px; height: 13px; }
.pt-move[data-act="left"] { left: 5px; }
.pt-move[data-act="right"] { right: 5px; }
.pt-page:hover .pt-move,
.pt-page:focus-within .pt-move { opacity: 1; pointer-events: auto; }
.pt-move:disabled { opacity: 0 !important; pointer-events: none !important; }

.pt-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.pt-num {
  flex: 0 0 auto;
  min-width: 20px;
  padding: 2px 5px;
  border-radius: 6px;
  color: var(--media-accent-dark);
  background: var(--media-soft);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: .6rem;
  font-weight: 600;
  text-align: center;
}

.pt-badge {
  overflow: hidden;
  min-width: 0;
  color: #8b867d;
  font-size: .58rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pt-acts { display: flex; gap: 3px; }

.pt-abtn {
  display: grid;
  flex: 1;
  height: 26px;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #7d7870;
  background: transparent;
  cursor: pointer;
}

.pt-abtn svg { width: 14px; height: 14px; }
@media (hover: hover) {
  .pt-abtn:hover { border-color: var(--media-line); color: var(--media-ink); background: var(--surface-subtle, #f8f5ee); }
  .pt-abtn.is-danger:hover { color: #b23c2c; }
}
.pt-page.has-break .pt-abtn[data-act="break"] { color: var(--media-accent); background: var(--media-soft); }

.pt-gridempty {
  margin: 22px 0;
  padding: 34px 16px;
  border: 1px dashed var(--media-line);
  border-radius: 14px;
  color: #89847a;
  font-size: .74rem;
  text-align: center;
}

/* ---------- sidebar extras ---------- */

.pt-source { display: grid; gap: 7px; }
.pt-source + .pt-source { margin-top: 8px; }

.pt-lock {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--media-accent) 35%, var(--media-line));
  border-radius: 11px;
  background: color-mix(in srgb, var(--media-soft) 45%, #fffdf8);
}

.pt-lock input { min-height: 36px; font-size: .72rem; }
.pt-lock button { min-height: 36px; padding: 0 12px; font-size: .68rem; }
.pt-lock p { grid-column: 1 / -1; margin: 0; color: #8b867d; font-size: .62rem; line-height: 1.45; }
.pt-lock p.is-error { color: #b23c2c; }

.pt-flush { margin: 0 !important; }

.pt-note {
  margin: 12px 0 0;
  padding: 10px 11px;
  border-radius: 9px;
  color: #6f6b62;
  background: #eee9e0;
  font-size: .65rem;
  line-height: 1.5;
}

.pt-results { margin-top: 14px; padding: 14px; border: 1px solid var(--media-line); border-radius: 16px; background: rgba(255, 253, 248, .78); }

/* ---------- confirm modal ---------- */

.pt-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(28, 24, 18, .42);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.pt-modal {
  width: min(380px, 100%);
  padding: 22px 24px 18px;
  border: 1px solid var(--border, #ded8cd);
  border-radius: 16px;
  background: #fffdf8;
  box-shadow: 0 26px 70px rgba(35, 30, 22, .3);
}

.pt-modal h2 { margin: 0 0 7px; font-size: 1rem; font-weight: 800; letter-spacing: -.02em; }
.pt-modal p { margin: 0 0 18px; color: var(--text-secondary, #626159); font-size: .82rem; line-height: 1.55; }
.pt-modal-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ---------- phone dock ----------
   Below 840px the sidebar, and with it Export, sits under the whole grid: 150
   rows down for a 300-page file. The dock rides the bottom of the screen while
   the grid is in view and parks after the grid's last row, just above the
   sidebar it stands in for. */

.pt-dock { display: none; }
.pt-help-touch { display: none; }

@keyframes pt-shimmer { to { background-position: -220% 0; } }

@media (max-width: 840px) {
  .pt-selcount { margin-left: 0; }

  /* `hidden` would make the panel the dock's scroll container, and it would never stick */
  .media-panel { overflow: clip; }

  .pt-dock {
    position: sticky;
    bottom: 8px;
    z-index: 5;
    display: grid;
    gap: 8px;
    margin-top: 14px;
    padding: 8px 8px 8px 12px;
    overflow: hidden;
    border: 1px solid var(--media-line);
    border-radius: 16px;
    background: rgba(255, 253, 248, .94);
    box-shadow: 0 10px 30px rgba(46, 40, 30, .16);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .pt-dock-row { display: flex; align-items: center; gap: 6px; }
  .pt-dock-place .pt-dock-row { flex-wrap: wrap; }

  .pt-dock-note {
    overflow: hidden;
    min-width: 0;
    flex: 1;
    color: var(--media-muted);
    font-family: "DM Mono", ui-monospace, monospace;
    font-size: .66rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pt-dock.is-error .pt-dock-note { color: #b23c2c; }
  .pt-dock-hint { margin: 2px 0 0; color: var(--media-ink); font-size: .74rem; font-weight: 650; }
  .pt-dock-place { padding-bottom: 8px; border-bottom: 1px solid var(--media-line); }
  .pt-dock .pt-tbtn { border-color: var(--media-line); background: #fffdf8; }
  .pt-dock .pt-tbtn[aria-pressed="true"] { border-color: var(--media-ink); color: #fff; background: var(--media-ink); }
  .pt-dock-export { min-height: 38px; padding: 0 14px; }

  .pt-dock-progress { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; }
  .pt-dock-bar { width: 0; height: 100%; background: var(--media-accent); opacity: 0; transition: width .25s ease, opacity .25s; }
  .pt-dock.is-working .pt-dock-bar { opacity: 1; }

  /* while Move waits for a page, every page reads as a place to put them */
  .pt-grid.is-placing .pt-page:not(.is-selected) { outline: 1px dashed color-mix(in srgb, var(--media-accent) 55%, transparent); outline-offset: 2px; }
}

@media (max-width: 540px) {
  .pt-grid { --pt-tile: 128px !important; --pt-thumb: 138px !important; }
  .pt-range-input { width: 104px; }
}

/* ---------- touch ----------
   Without hover the per-page arrows show only on a page selected on its own,
   where a tap on them is meant. On several selected pages they would sit where
   a tap to let a page go lands, and the dock's Move is the tool for a group. */

@media (hover: none) {
  .pt-help-pointer { display: none; }
  .pt-help-touch { display: block; }

  .pt-page:hover .pt-move,
  .pt-page:focus-within .pt-move { opacity: 0; pointer-events: none; }
  .pt-grid.has-one-selected:not(.is-placing) .pt-page.is-selected .pt-move { opacity: 1; pointer-events: auto; }
  .pt-page:has(.pt-move:focus-visible) .pt-move { opacity: 1; pointer-events: auto; }
  .pt-grid.is-placing .pt-move { opacity: 0; pointer-events: none; }
  .pt-move { width: 34px; height: 34px; }
  .pt-move svg { width: 15px; height: 15px; }

  /* a 2px tint is easy to miss on a phone when several pages are picked */
  .pt-page.is-selected { box-shadow: 0 0 0 2px var(--media-accent); }
}

@media (pointer: coarse) {
  .pt-tbtn { min-height: 38px; }
  .pt-abtn { height: 34px; }
  .inline-check { min-height: 44px; }
  .inline-check input { width: 22px; height: 22px; margin: 0; }
}