/* ---- JPG to PDF: their workspace ----------------------------------------
   The heading centres, the zoom sits top-right, the sheets live in a grey
   band with the "Add More Files" button over them, and the cream band below
   carries the three labelled dropdowns, the merge box and the green action. */
.images-head { text-align: center; align-items: center; }
.images-head h1 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
.images-head .lead { max-width: 640px; margin-left: auto; margin-right: auto; }

.images-zoom-row { display: flex; justify-content: flex-end; margin: 14px 0 10px; padding-right: clamp(16px, 3.5vw, 45px); }
.images-zoom { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: .95rem; }
.images-zoom input[type=range] { width: 120px; accent-color: var(--accent); }

.images-stage {
  background: var(--bg);
  padding: 22px 20px 30px;
}
.images-toolbar { display: flex; justify-content: center; margin-bottom: 22px; }
.images-add {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line-strong); border-radius: 6px; background: var(--white);
  color: var(--ink); font: inherit; font-size: .9rem; padding: 8px 16px; cursor: pointer;
  transition: border-color .12s, color .12s;
}
.images-add:hover { border-color: var(--accent); color: var(--accent-dark); }

.images-grid {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  gap: 26px 30px;
}
.img-card {
  position: relative;
  width: min(calc(var(--images-thumb, 165px) + 44px), 68vw);
  text-align: center; cursor: grab; user-select: none;
}
.img-card.is-dragging { opacity: .45; cursor: grabbing; }
.img-card.drag-over .thumb { outline: 2px dashed var(--accent); outline-offset: 4px; }
/* Their card keeps a reserved strip above the sheet and greys the whole box
   (rgb(221,221,221)) the moment the pointer is on it. */
.images-page .thumb { padding: 46px 22px 0; }
.images-page .thumb img {
  display: block; width: min(var(--images-thumb, 165px), 55vw); height: auto;
  margin: 0 auto; background: var(--white);
  box-shadow: 0 3px 10px -2px rgba(50, 50, 50, .35);
  transition: transform .15s ease;
}
.img-card:hover .thumb { background: #dddddd; }
/* Turned sideways, the sheet fits the column at 80% — the same footprint
   their viewer gives a rotated card, so neighbours never touch. */
.img-card img.is-side {
  height: calc(min(var(--images-thumb, 165px), 60vw) * .8);
  width: auto; margin: 0 auto;
}
.img-name {
  display: block; margin-top: 10px; font-size: .85rem; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Their hover strip: magnify, rotate left, rotate right, remove — four 35x30
   white buttons in a joined group at the top of the card (always on touch). */
.img-tools {
  position: absolute; top: 8px; left: 0; right: 0; z-index: 5;
  display: flex; justify-content: center; pointer-events: none;
}
.img-tools .btn-group {
  display: inline-flex; pointer-events: auto;
  border-radius: 3px; overflow: hidden;
  box-shadow: 0 2px 8px rgba(20, 30, 35, .12), 0 0 0 1px var(--line);
}
.img-tools button {
  display: none; width: 35px; height: 30px; padding: 0; cursor: pointer;
  align-items: center; justify-content: center;
  border: 1px solid transparent; background: var(--white); color: #666;
  font-size: 14px; line-height: 1;
  transition: color .12s, background-color .12s;
}
.img-tools button + button { border-left: 1px solid #ececec; }
.img-card:hover .img-tools button { display: inline-flex; }
@media (hover: none) { .img-tools button { display: inline-flex; } }
.img-tools button:first-child { border-radius: 3px 0 0 3px; }
.img-tools button:last-child { border-radius: 0 3px 3px 0; }
.img-tools button:hover { color: var(--ink); background: #f2f2f2; }

/* The magnify button shows the picture large, like their viewer popup. */
.img-lightbox {
  position: fixed; inset: 0; z-index: 999; cursor: zoom-out;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20, 25, 30, .78);
}
.img-lightbox img {
  background: var(--white); box-shadow: 0 12px 44px rgba(0, 0, 0, .45);
}

/* The cream band, in flow like every house bar. */
.images-panel {
  margin-top: 18px; padding: 18px 20px 16px;
  background: var(--amber-bg);
  border: 1px solid var(--amber-line); border-radius: 14px;
}
.img-cols { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 44px; }
.img-col { display: flex; flex-direction: column; gap: 8px; }
.img-label { font-weight: 700; font-size: .95rem; color: var(--ink); text-align: center; }
.img-col select {
  min-width: 200px; height: 42px; border: 1px solid var(--line);
  border-radius: 8px; padding: 0 12px; font: inherit; font-size: .95rem;
  color: var(--ink); background: var(--white);
}
.img-merge {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 18px 0 2px; font-size: .92rem; color: var(--ink); cursor: pointer;
}
.img-merge input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
/* This page loads files.css, which has no .hf-actions rule: without flex on
   the row itself the single button fell flush left under the form. */
.images-panel .hf-actions {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; margin-top: 14px;
}

/* The start screen fills the window like every other tool's drop screen
   (client: "make full screen like sajde"): the title sits on top and the
   dashed card centres in what's left. The rule lifts itself the moment files
   are in — #files-work only loses its hidden attribute then. */
.images-page:has(#files-work[hidden]) {
  min-height: calc(100dvh - 170px);
  display: flex; flex-direction: column;
}
.images-page:has(#files-work[hidden]) .tool-form {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
}