/* SkyyCast PDF to JPG / PNG (/tools/pdf-to-jpg).
 *
 * 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, badges, facts grid, donate card) and the shared
 * `.ic-split` two-pane workspace, and only adds the `pj-*` pieces specific
 * to this tool -- the format/resolution/quality/range settings row, the
 * page-selection grid with real rendered thumbnails, and the converted-
 * results grid. 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. */

/* ---- Settings row ---- */
.pub-site .pj-settings {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem .75rem;
  margin-bottom: 1rem;
}
.pub-site .pj-field-row {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  flex: 1 1 140px;
  min-width: 140px;
}
.pub-site .pj-label {
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--pub-text-muted);
}
.pub-site .pj-select {
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  min-height: 40px;
  padding: .4rem .7rem;
  border: 1px solid var(--pub-border-strong);
  border-radius: var(--pub-radius-md);
  background: var(--pub-surface);
  color: var(--pub-text);
}
.pub-site .pj-select:focus-visible { outline: none; box-shadow: var(--pub-ring); border-color: var(--pub-accent); }
.pub-site .pj-range-input { flex: 1 1 100%; }
.pub-site .pj-field-row:has(.pj-range-input) { flex-basis: 100%; }
/* The class selector above sets display:flex unconditionally, which beats
   the browser's own [hidden]{display:none} default on specificity --
   same gotcha already documented in sc-image-to-pdf.css for .ip-advanced.
   #pj-quality-row is toggled via the `hidden` property (not a class) when
   PNG is selected, since JPG quality has no meaning for PNG. */
.pub-site .pj-field-row[hidden] { display: none; }

/* ---- Page selection grid ---- */
.pub-site .pj-pages {
  list-style: none;
  margin: .75rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: .6rem;
  max-height: 360px;
  overflow-y: auto;
}
.pub-site .pj-page-card {
  border: 1px solid var(--pub-border);
  border-radius: var(--pub-radius-md);
  background: var(--pub-surface);
  overflow: hidden;
}
.pub-site .pj-page-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: .45rem;
  cursor: pointer;
  position: relative;
}
.pub-site .pj-page-check {
  position: absolute;
  top: .35rem;
  left: .35rem;
  width: 18px;
  height: 18px;
  z-index: 1;
}
.pub-site .pj-page-thumb-wrap {
  width: 100%;
  aspect-ratio: 3 / 4;
  background: var(--pub-bg-soft);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pub-site .pj-page-thumb { width: 100%; height: 100%; object-fit: contain; display: block; }
.pub-site .pj-page-thumb-placeholder {
  width: 60%;
  height: 60%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--pub-bg-soft) 25%, var(--pub-border) 50%, var(--pub-bg-soft) 75%);
  background-size: 200% 100%;
  animation: pj-shimmer 1.4s ease-in-out infinite;
}
@keyframes pj-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.pub-site .pj-page-num { font-size: .75rem; font-weight: 700; color: var(--pub-text-muted); }

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

/* ---- Results grid (right panel) ---- */
.pub-site .pj-results-wrap[hidden] { display: none; }
.pub-site .pj-results {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .75rem;
}
.pub-site .pj-result-card {
  border: 1px solid var(--pub-border);
  border-radius: var(--pub-radius-md);
  background: var(--pub-surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.pub-site .pj-result-thumb { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; background: var(--pub-bg-soft); }
.pub-site .pj-result-body { padding: .5rem; display: flex; flex-direction: column; gap: .3rem; }
.pub-site .pj-result-name { font-size: .75rem; font-weight: 700; color: var(--pub-text); margin: 0; overflow-wrap: anywhere; }
.pub-site .pj-result-meta { font-size: .75rem; color: var(--pub-text-muted); margin: 0; }
.pub-site .pj-result-dl { width: 100%; justify-content: center; font-size: .8125rem; padding: .4rem .6rem; }

@media (max-width: 640px) {
  .pub-site .pj-field-row { min-width: 0; }
}

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