/* Same as the merge workspace: the page canvas uses the whole window instead of
   the 860px reading column, so a wide screen fits more pages across. Compound
   selector because theme.css is loaded last and sets .tool-page { max-width }. */
.tool-page.pages-page {
  --pages-gutter: var(--tool-gutter, clamp(16px, 2vw, 30px));
  max-width: none;
  padding-inline: var(--pages-gutter);
}

.pages-work { margin-top: 22px; }

/* The heading and the file name, centred over the page area. */
.pages-head { text-align: center; align-items: center; }
.pages-head h1 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
.pages-head .lead { max-width: 640px; margin-left: auto; margin-right: auto; }
.pages-selected { margin: 0 0 12px; text-align: center; }
.pages-selected strong { color: var(--ink); font-weight: 600; }

/* Split's "Choose an option" step: four little cards in a row — icons, the
   counts and what each produces — the screen their split tool opens with. */
.pages-choose { text-align: center; }
.pages-choose-title { font-size: 1rem; font-weight: 700; margin: 0 0 24px; }
.pages-options {
  display: flex; flex-wrap: wrap; gap: 26px; justify-content: center;
  margin: 0 auto 26px;
}
.pages-option {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  width: 178px; min-height: 152px; padding: 20px 14px 16px;
  text-align: center; font: inherit; cursor: pointer;
  background: var(--white); border: 2px solid var(--accent-line); border-radius: 8px;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.pages-option:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.pages-option.is-on { border-color: var(--accent); background: var(--accent-soft); }
.pages-option-icons { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
.pages-option-icons .ico { font-size: 21px; line-height: 1; }
.pages-option-sep { font-size: 11px; opacity: .75; }
.pages-option-stat { font-size: .76rem; color: var(--muted); line-height: 1.4; }
.pages-option strong { font-size: .92rem; font-weight: 700; color: var(--accent); line-height: 1.3; margin-top: auto; }
.pages-option-go { font-size: .8rem; }
.pages-stage { margin-top: 4px; }

.pages-bar {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  flex-wrap: wrap; background: var(--amber-bg); border: 1px solid var(--amber-line);
  border-radius: var(--radius); padding: 14px 16px; margin-top: 16px;
}
.pages-bar strong { font-size: 1rem; }
/* Their action band carries the buttons alone, centred under the pages. */
.pages-bar-spacer { display: none; }
.pages-bar-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.pages-bar-actions-row { margin-top: 12px; }
.pages-hint { max-width: 380px; }
.pages-reset {
  border: none; background: none; font: inherit; font-size: .82rem; cursor: pointer;
  color: var(--accent-dark); text-decoration: none;
}

/* "More options": the two switches their footer hides behind a link — whether
   the bookmarks come across, and what the results are called. */
.pages-more { position: relative; display: inline-flex; align-items: center; }
.pages-more-toggle {
  border: none; background: none; font: inherit; font-size: .86rem; cursor: pointer;
  color: var(--muted); padding: 4px 2px;
}
.pages-more-toggle:hover { color: var(--ink); }
.pages-more-toggle[aria-expanded="true"] { color: var(--accent-dark); }
.pages-more-panel {
  position: absolute; right: 0; bottom: calc(100% + 10px); z-index: 40;
  width: max-content; max-width: min(340px, calc(100vw - 32px));
  display: grid; gap: 12px; text-align: left;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px; box-shadow: var(--shadow-lg, var(--shadow-sm));
}
.pages-pattern { display: grid; gap: 6px; font-size: .88rem; }
.pages-pattern input {
  width: 100%; font: inherit; font-size: .88rem; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--white);
  color: var(--ink);
}
.pages-pattern-help { margin: 0; line-height: 1.45; overflow-wrap: anywhere; }

/* On a phone the button sits too close to the left edge for a 340px popup to fit
   beside it, so it becomes a sheet at the bottom — still inside the screen. */
@media (max-width: 600px) {
  .pages-more-panel {
    position: fixed; left: 12px; right: 12px; bottom: 12px;
    width: auto; max-width: none;
  }
}
.pages-zoom { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: .95rem; }
.pages-zoom input[type=range] { width: clamp(110px, 20vw, 190px); accent-color: var(--accent); }

/* The typed range box: "Deleting many pages? Type an interval here:" */
.pages-bulk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.pages-bulk-label { font-size: .86rem; color: var(--muted); }
.pages-spec {
  flex: 1 1 260px; max-width: 420px; font: inherit; font-size: .9rem;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--white); color: var(--ink);
}
.pages-quick { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.pages-quick-label { font-size: .86rem; color: var(--muted); }
.pages-split-extra { margin-top: 12px; }
.pages-step { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--muted); }
.pages-step input {
  width: 74px; font: inherit; font-size: .88rem; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 8px;
}

.pages-grid {
  display: flex; flex-wrap: wrap; gap: 16px; margin-top: 18px;
  /* Their screens centre the sheets as a cluster per row. A fixed-track grid
     only centres the whole track grid — a short last row would stick to the
     left — so the strip is a centred wrapping flex instead. */
  justify-content: center;
}
.page-card {
  flex: 0 0 auto; width: min(var(--pages-thumb, 150px), 42vw);
  position: relative; background: var(--white); border: 2px solid var(--line);
  border-radius: 12px; padding: 8px; cursor: pointer; text-align: center;
  transition: border-color .12s, box-shadow .12s, transform .12s, background-color .12s;
}
.page-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.page-card canvas { display: block; width: 100%; height: auto; border-radius: 6px; background: #fff; }
/* A page that carries a rotation wears the soft mint wash — the tell that
   this page will come out turned, even when the page itself is white. */
.page-card.rotated { background: var(--accent-soft); border-color: var(--accent-line); }

/* Their per-page Delete: a trash pill in a white band under the sheet — the
   card extends the page downward — resting at 20% until the card is hovered.
   Clicking it takes the page off the list at once and writes its number into
   the interval box below — that box is what "Apply changes" commits. */
.page-actions { margin-top: 8px; }
.page-delete-wrap {
  background: var(--white); display: flex; justify-content: center;
  padding: 8px 0 12px;
}
.page-delete {
  display: inline-flex; align-items: center; gap: 6px; opacity: .2;
  border: 1px solid var(--accent); background: transparent; color: var(--accent);
  font: inherit; font-size: .82rem; padding: 6px 12px;
  border-radius: 4px; cursor: pointer; transition: opacity .12s;
}
.page-card:hover .page-delete, .page-delete:focus-visible { opacity: 1; }
.page-delete:hover { background: var(--accent-soft); }
/* Delete's cards are their bare sheets: no frame and no corner circle, the
   number under the sheet, the trash band right above it. */
.pages-grid[data-mode="delete"] .page-card {
  background: transparent; border-color: transparent; padding: 10px 20px 0; cursor: default;
}
.pages-grid[data-mode="delete"] .page-card:hover { box-shadow: none; transform: none; }
.pages-grid[data-mode="delete"] .page-card canvas {
  border-radius: 0; box-shadow: 0 3px 6px -2px rgba(50, 50, 50, .3); margin-top: 20px;
}
.pages-grid[data-mode="delete"] .page-num {
  position: static; display: block; margin: 6px auto 0; padding: 0;
  background: none; color: var(--ink); font-size: .82rem; font-weight: 400;
}
/* Extract's cards are their bare sheets too: a grey plate while hovered, an
   amber plate while picked, the number under the sheet, Enlarge on hover. */
.pages-grid[data-mode="extract"] .page-card {
  background: transparent; border-color: transparent; padding: 10px 20px 0;
}
.pages-grid[data-mode="extract"] .page-card:hover { background: #e9ecef; box-shadow: none; transform: none; }
.pages-grid[data-mode="extract"] .page-card.selected {
  background: rgba(255, 212, 144, .5); border-color: transparent;
}
.pages-grid[data-mode="extract"] .page-card.selected:hover { background: rgba(255, 212, 144, .5); }
.pages-grid[data-mode="extract"] .page-card canvas {
  border-radius: 0; box-shadow: 0 3px 6px -2px rgba(50, 50, 50, .3); margin-top: 20px;
}
.pages-grid[data-mode="extract"] .page-num {
  position: static; display: block; margin: 6px auto 0; padding: 0;
  background: none; color: var(--ink); font-size: .82rem; font-weight: 400;
}
/* Their "Selected pages" quick chips: separate pills, the active one amber,
   the first two carrying their "?" bubbles word for word — no radio dots. */
.pages-quick .seg { display: flex; gap: 8px; }
.pages-quick .seg input { position: absolute; opacity: 0; pointer-events: none; }
.pages-quick .seg label { position: relative; }
.pages-quick .seg label span {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); background: var(--white); border-radius: 4px;
  padding: 8px 13px; font-size: .82rem; cursor: pointer;
}
.pages-quick .seg label:has(input:checked) span {
  background: rgba(255, 212, 144, .45); border-color: var(--line-strong);
}
/* Extract's hint row is their plain line above the pages — no amber band. */
.pages-bar.is-plain { background: transparent; border: 0; }
/* The interval box carries their "?" — a circled question mark whose bubble
   opens on hover or focus, with their own words. */
.pages-help {
  width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line-strong);
  color: var(--muted); font-size: .72rem; font-weight: 700; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: help; background: var(--white); position: relative;
}
.pages-help::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 10px); left: 50%;
  transform: translateX(-50%); width: max-content; max-width: 340px;
  background: var(--white); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; box-shadow: var(--shadow); padding: 10px 12px;
  font-size: .8rem; font-weight: 400; line-height: 1.45; text-align: left;
  opacity: 0; visibility: hidden; transition: opacity .12s; z-index: 30;
}
.pages-help:hover::after, .pages-help:focus::after { opacity: 1; visibility: visible; }
/* Their zoom row: top right above the pages, magnifiers either side. */
.pages-zoom-row { display: flex; justify-content: flex-end; margin: 0 0 10px; }
.page-card.is-deleted { display: none; }
.page-num {
  position: absolute; left: 8px; top: 8px; background: rgba(16,32,43,.75); color: #fff;
  font-size: .72rem; font-weight: 700; padding: 2px 7px; border-radius: 999px;
}
/* Their cards name the document beside the page number ("1  m1"). */
.page-file {
  position: absolute; left: 40px; top: 8px; max-width: calc(100% - 84px);
  font-size: .72rem; color: var(--muted); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.page-mark {
  position: absolute; right: 8px; top: 8px; width: 26px; height: 26px; border-radius: 50%;
  background: #fff; border: 2px solid var(--line-strong); display: flex;
  align-items: center; justify-content: center; font-size: 14px; line-height: 1; color: #fff;
}
.page-card.selected { border-color: var(--accent); }
.page-card.selected .page-mark { background: var(--accent); border-color: var(--accent); }
.page-card.removed { border-color: var(--red); }
.page-card.removed canvas { opacity: .35; filter: grayscale(1); }
.page-card.removed .page-mark { background: var(--red); border-color: var(--red); }
.page-card.removed::after {
  content: ""; position: absolute; inset: 8px; border-radius: 6px;
  background: linear-gradient(to top right, transparent 48%, var(--red) 48%, var(--red) 52%, transparent 52%);
  opacity: .5; pointer-events: none;
}
.pages-modal-box { width: min(400px, 92vw); text-align: center; }

/* Filenames: the parts you are about to get, named as they will download. */
.pages-names { margin-top: 18px; }
.pages-names-title { margin: 0 0 8px; font-size: .88rem; font-weight: 600; }
.pages-names-list {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 4px;
  max-width: 460px; max-height: 240px; overflow-y: auto;
}
.pages-names-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  font-size: .82rem; padding: 6px 10px; border-radius: 6px;
  background: var(--white); border: 1px solid var(--line);
}
.pages-name { color: var(--ink); }
.pages-name-range { color: var(--muted); }
.pages-name-more { border: none; background: none; color: var(--muted); }

/* Rotate: their scope/direction row above the pages. */
.pages-rot-tools {
  display: flex; align-items: center; justify-content: center; gap: 42px;
  flex-wrap: wrap; margin: 12px 0 6px;
}
.pages-rot-tools .seg { gap: 0; }
/* Joined boxes: every one has the accent border and accent text; the chosen
   one takes the faint fill and their press-in inset shadow. */
.pages-rot-tools .rot-scope {
  border: 1px solid var(--accent); background: var(--white); color: var(--accent);
  font: inherit; font-size: .875rem; padding: 6px 12px; height: 34px; cursor: pointer;
}
.pages-rot-tools .rot-scope:first-of-type { border-radius: 4px 0 0 4px; }
.pages-rot-tools .rot-scope:last-of-type { border-radius: 0 4px 4px 0; }
.pages-rot-tools .rot-scope.is-on {
  background: var(--accent-soft); color: var(--accent-dark);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.pages-rot-tools .rot-dirs { display: inline-flex; }
.pages-rot-tools .rot-dirs button {
  width: 48px; height: 34px; cursor: pointer; padding: 0;
  border: 1px solid var(--accent); background: var(--white); color: var(--accent);
  font-size: .95rem; line-height: 1;
}
.pages-rot-tools .rot-dirs button:first-child { border-radius: 4px 0 0 4px; }
.pages-rot-tools .rot-dirs button:last-child { border-radius: 0 4px 4px 0; }
.pages-rot-tools .rot-reset-btn {
  height: 34px; padding: 6px 12px; cursor: pointer;
  border: 1px solid var(--accent); border-radius: 4px;
  background: var(--white); color: var(--accent);
  font: inherit; font-size: .875rem;
}
.pages-rot-tools .rot-reset-btn i { margin-right: 5px; }

/* The little white group on every rotate card: Enlarge, turn left, turn
   right — 42x35 white boxes, end corners rounded 3px, the soft shadow on the
   group itself. Like theirs, the group is empty (0x0) until the card is
   hovered, then it pops up just below the top edge of the page. */
.page-tools-btns {
  position: absolute; top: 10px; left: 0; right: 0; z-index: 5;
  display: flex; justify-content: center; pointer-events: none;
}
.page-tools-btns .btn-group {
  display: inline-flex; pointer-events: auto;
  border-radius: 6px; overflow: hidden;
  box-shadow: 0 2px 8px rgba(20, 30, 35, .12), 0 0 0 1px var(--line);
}
.page-tools-btns button {
  display: none; width: 42px; height: 35px; padding: 0; cursor: pointer;
  align-items: center; justify-content: center;
  border: 1px solid transparent; background: var(--white); color: var(--muted);
  font-size: 14px; line-height: 1;
  transition: color .12s, background-color .12s;
}
.page-tools-btns button + button { border-left: 1px solid var(--line); }
.page-card:hover .page-tools-btns button { display: inline-flex; }
/* Touch screens never hover: show the group straight away there. */
@media (hover: none) { .page-tools-btns button { display: inline-flex; } }
.page-tools-btns button:first-child { border-radius: 6px 0 0 6px; }
.page-tools-btns button:last-child { border-radius: 0 6px 6px 0; }
.page-tools-btns button:hover { color: var(--accent); background: var(--accent-soft); }
.page-tools-btns button:active { color: var(--accent-dark); }

/* Enlarge: their dark backdrop with the big page on it and a white x up in
   the corner. */
.page-magnify-backdrop {
  position: fixed; inset: 0; z-index: 1000; overflow: auto;
  background: rgba(15, 23, 30, .5);
  display: flex; justify-content: center; align-items: flex-start;
  padding: 48px 0;
}
.page-magnify-backdrop[hidden] { display: none; }
.page-magnify-canvas {
  background: var(--white); box-shadow: var(--shadow-lg); border-radius: 4px;
  transition: transform .15s ease;
}
#closePagePreviewBtn {
  position: fixed; top: 0; right: 10px; font-size: 35px; line-height: 1;
  color: #fff; text-decoration: none; cursor: pointer;
}
#closePagePreviewBtn:hover { color: var(--accent-soft); }

/* Split: their second screen lives in one amber panel — the filenames, the
   "Split every N" box and the action, centred — with a scissors on every page
   boundary and a dashed line where the cut is. */
.pages-split-panel {
  margin-top: 20px; padding: 22px 26px 26px;
  background: var(--amber-bg); border: 1px solid var(--amber-line);
  border-radius: 16px; display: flex; flex-direction: column;
  align-items: center; gap: 16px;
}
.pages-split-panel .pages-names { width: 100%; margin: 0; }
.pages-split-panel .pages-names-title { text-align: center; font-size: 1.02rem; }
.pages-split-panel .pages-names-list {
  max-width: 560px; width: 100%; margin: 0 auto;
}
.pages-split-panel .pages-names-list li { background: rgba(255, 255, 255, .8); }
.pages-split-panel .pages-split-extra { margin: 0; }
.pages-split-panel .pages-bar {
  position: static; background: none; border: 0; padding: 0; margin: 4px 0 0;
}
.pages-split-panel .pages-bar-spacer { display: none; }
.pages-split-panel .pages-bar-actions { justify-content: center; }
.split-cut {
  position: absolute; right: -17px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%; z-index: 3;
  border: 1px solid var(--line); background: var(--white); color: var(--muted);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 14px; opacity: .45; transition: opacity .12s, background .12s;
}
.page-card:hover .split-cut, .split-cut.is-on { opacity: 1; }
.split-cut.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.page-card.cut-after::after {
  content: ""; position: absolute; right: -17px; top: 6px; bottom: 6px;
  border-right: 2px dashed var(--accent); opacity: .75; pointer-events: none;
}

@media (max-width: 640px) {
  .page-delete { min-height: 40px; padding: 8px 18px; }
  .pages-bar { position: static; }
  .pages-option { width: 158px; min-height: 140px; }
}
.pages-modal-box .modal-actions { justify-content: center; }
@media (max-width: 900px) {
  /* The thumb-size variable still drives the card width here — the old fixed
     120px floor quietly killed the zoom slider on every window under 900px
     wide. Cap it against the viewport so 400px thumbs fit two per row. */
  .page-card { width: min(var(--pages-thumb, 150px), 42vw); }
  .pages-bar { top: 68px; }
}

.page-card canvas { transition: transform .15s ease; }
.page-moves { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 6px; }
.page-moves .tool-btn { padding: 2px 10px; }
.page-card-organize { cursor: default; }

.page-card.split { border-color: var(--accent); }
.split-badge {
  position: absolute; left: 8px; bottom: 8px; background: var(--accent); color: #fff;
  font-size: .8rem; font-weight: 700; padding: 2px 8px; border-radius: 6px;
}
.page-card.split::before {
  content: ""; position: absolute; left: 8px; right: 8px; top: -2px; height: 3px;
  background: var(--accent); border-radius: 2px;
}

/* --------------------------------------------------------------- resize ---*/
/* Their resize chooser: three 200x195 cards (the third behind "More options")
   each holding a big icon and a bold two-line title — our palette. */
.rs-options {
  grid-template-columns: repeat(auto-fit, minmax(190px, 200px));
  justify-content: center; margin: 0 auto 18px; max-width: 680px;
}
.rs-option {
  width: 200px; height: 195px; margin: 0 auto; align-items: center;
  justify-content: center; text-align: center; gap: 10px; padding: 18px 14px;
  border-radius: 8px;
}
.rs-option.is-on { background: var(--accent-soft); box-shadow: none; }
.rs-option-ico { font-size: 34px; line-height: 1; color: var(--accent); }
.rs-option strong { font-size: 1.05rem; line-height: 1.3; font-weight: 700; }
.rs-option .rs-option-stat-strong {
  font-size: .82rem; font-weight: 700; color: var(--accent-dark);
}
.rs-choose-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.rs-more-link {
  background: none; border: 0; padding: 6px 12px; cursor: pointer;
  color: var(--accent); font: inherit; font-size: .9rem; font-weight: 600;
}
.rs-more-link:hover { text-decoration: none; }

/* Their resize editor, under the pages: the margins boxes with the inch
   toggle, or the Page size dropdown with its custom width/height — in our
   palette, the way every other tool screen is built here. */
.pages-psel { position: relative; margin-top: 14px; display: inline-block; }
.pages-psel-toggle {
  height: 34px; padding: 6px 14px; cursor: pointer; font: inherit;
  font-size: .875rem; border: 1px solid var(--accent); border-radius: 8px;
  background: var(--white); color: var(--accent);
}
.pages-psel-toggle:hover { background: var(--accent-soft); }
.pages-psel-toggle[aria-expanded="true"] {
  background: var(--accent-soft); box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.pages-psel-menu {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 30;
  min-width: 190px; background: var(--white); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: var(--shadow); padding: 6px; display: flex;
  flex-direction: column;
}
.pages-psel-menu button {
  text-align: left; border: 0; background: none; font: inherit;
  font-size: .875rem; color: var(--ink); padding: 9px 12px;
  border-radius: 7px; cursor: pointer;
}
.pages-psel-menu button:hover { background: var(--accent-soft); color: var(--accent-dark); }
.rs-panels { margin-top: 16px; }
.rs-panel {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 16px 18px;
}
.rs-title { margin: 0 0 12px; font-size: .95rem; font-weight: 700; color: var(--ink); }
.rs-grid { display: flex; flex-wrap: wrap; gap: 14px 20px; }
.rs-field {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .9rem; color: var(--muted); font-weight: 500;
}
.rs-field input {
  width: 110px; height: 40px; border: 1px solid var(--line); border-radius: 10px;
  padding: 0 12px; font: inherit; font-size: 16px; color: var(--ink);
  background: var(--white);
}
.rs-field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rs-unit { display: flex; gap: 6px; margin-top: 14px; }
.rs-unit label {
  position: relative; display: inline-flex; align-items: center; font-size: .84rem;
  cursor: pointer; border: 1px solid var(--line); border-radius: 8px; padding: 8px 14px;
  background: var(--white); color: var(--muted);
}
.rs-unit label:has(input:checked) {
  border-color: var(--accent); background: var(--accent-soft);
  color: var(--accent-dark); font-weight: 600;
}
.rs-unit label.is-on {
  border-color: var(--accent); background: var(--accent-soft);
  color: var(--accent-dark); font-weight: 600;
}
.rs-unit input { position: absolute; opacity: 0; width: 0; height: 0; }
.rs-size-label { display: inline-block; margin-right: 12px; font-weight: 600; color: var(--ink); }
.rs-select {
  height: 42px; min-width: 240px; max-width: 100%; border: 1px solid var(--line);
  border-radius: 10px; padding: 0 12px; font: inherit; font-size: .95rem;
  color: var(--ink); background: var(--white);
}
.rs-custom { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 14px; }
.rs-custom-unit { font-weight: 600; }
.rs-note { margin: 12px 0 0; }
/* The page's own size, under its thumbnail — theirs updates the number as the
   boxes are typed into, ours does too (pages.js paints it). */
.pcard-size {
  display: block; margin-top: 6px; font-size: 13px; text-align: center;
  color: var(--muted);
}

/* ---- PDF to JPG ----------------------------------------------------------
   Their screen: bare sheets with an amber plate while picked, a "Save as
   <format>" pill over the foot of each sheet (a browser-side download), and a
   cream options band under the pages holding the resolution and format chip
   rows, the TIFF extras and the Convert action. The band joins the action row
   into one cream block — in the flow, like every house bar, so it never
   covers a page. */
.pages-page[data-mode="jpg"] .jpg-band {
  margin: 16px 0 -1px; padding: 14px 16px 6px;
  background: var(--amber-bg);
  border: 1px solid var(--amber-line); border-bottom: 0;
  border-radius: 14px 14px 0 0;
}
.pages-page[data-mode="jpg"] .pages-bar-actions-row {
  border-radius: 0 0 14px 14px; margin-top: 0; padding-top: 6px;
}
.jpg-row {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 7px 0; flex-wrap: wrap;
}
.jpg-label { font-weight: 700; font-size: .9rem; }
.jpg-seg { display: inline-flex; }
.jpg-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.jpg-seg label { position: relative; display: inline-flex; }
.jpg-seg label > span {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--accent); background: var(--white); color: var(--accent);
  font-size: .875rem; padding: 6px 12px; cursor: pointer;
}
.jpg-seg label + label > span { border-left: 0; margin-left: -1px; }
.jpg-seg label:first-child > span { border-radius: 4px 0 0 4px; }
.jpg-seg label:last-child > span { border-radius: 0 4px 4px 0; }
.jpg-seg input:checked + span {
  background: var(--accent-soft); color: var(--accent-dark);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.jpg-seg .pages-help { margin-left: 2px; }
.jpg-tiff { display: grid; gap: 6px; justify-items: center; margin-top: 6px; }
.jpg-tiff[hidden] { display: none; }
.jpg-check { display: inline-flex; align-items: center; gap: 8px; font-size: .875rem; cursor: pointer; }
.jpg-check input { accent-color: var(--accent); width: 16px; height: 16px; }
/* Their cards: bare sheets, grey plate on hover, amber plate while picked.
   On theirs the zoom slider is the SHEET width (165px of page, plus the cell
   padding around it) — so the card carries the padding (and the 2px border)
   on top of the slider value, or the sheet comes out narrower than theirs and
   the save pill spans its whole width. */
.pages-grid[data-mode="jpg"] .page-card {
  background: transparent; border-color: transparent; padding: 10px 20px 0;
  width: min(calc(var(--pages-thumb, 150px) + 44px), 42vw);
}
.pages-grid[data-mode="jpg"] .page-card:hover { background: #e9ecef; box-shadow: none; transform: none; }
.pages-grid[data-mode="jpg"] .page-card.selected { background: rgba(255, 212, 144, .5); border-color: transparent; }
.pages-grid[data-mode="jpg"] .page-card.selected:hover { background: rgba(255, 212, 144, .5); }
.pages-grid[data-mode="jpg"] .page-card canvas {
  border-radius: 0; box-shadow: 0 3px 6px -2px rgba(50, 50, 50, .3); margin-top: 20px;
}
.pages-grid[data-mode="jpg"] .page-num {
  position: static; display: block; margin: 6px auto 0; padding: 0;
  background: none; color: var(--ink); font-size: .82rem; font-weight: 400;
}
/* Their per-page save, mirrored to the pixel: a 70px white band (95% opaque)
   over the foot of the sheet with the pill resting at 20% opacity — a ghost
   until the card is hovered, when it snaps to full opacity, filled with the
   accent and bold. Once a page is saved its card fades to 60%, exactly like
   their .saved rule. */
.jpg-save-wrap {
  position: absolute; left: 20px; right: 20px; bottom: 14px; height: 70px;
  background: rgba(255, 255, 255, .95); text-align: center;
}
.jpg-save-wrap[hidden] { display: none; }
.jpg-save {
  margin-top: 10px; opacity: .2;
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--accent); border-radius: 3px;
  background: transparent; color: var(--accent);
  font: inherit; font-size: 12px; line-height: 1.5; font-weight: 400;
  padding: 5px 10px; cursor: pointer; white-space: nowrap; max-width: 100%;
  transition: background-color .12s, color .12s, opacity .12s;
}
.jpg-save i { font-size: 11px; }
.pages-grid[data-mode="jpg"] .page-card:hover .jpg-save {
  opacity: 1; background: var(--accent); color: #fff; font-weight: 700;
}
.pages-grid[data-mode="jpg"] .page-card.saved { opacity: .6; }
.jpg-save:disabled { cursor: default; }
/* Touch screens never hover: the pill must not stay a ghost there. */
@media (hover: none) { .jpg-save { opacity: 1; } }

/* ------------------------------------------------- detail under the drop box
   Client: "Extract Pages" — the files-family guide dress on a page tool.
   Rides inside #pages-start, so the workspace replaces it once a file loads.
   Step cards reuse the parked walkthrough classes from app.css; the boxes
   wear the site-card dress. Same block as files.css, copied because
   pages.html does not load that sheet. */
.files-guide {
  width: min(880px, 100% - 32px); margin: 56px auto 84px;
  text-align: left;
}
.files-guide .howto-steps { margin-top: 26px; }
.files-guide .guide-photo {
  display: block; max-width: 100%; height: auto; margin: 16px auto 0;
  border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 14px 34px rgba(12, 77, 143, .10);
}
.files-feats {
  list-style: none; margin: 30px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
}
.files-feat {
  display: flex; gap: 13px; align-items: flex-start;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  padding: 15px 16px; box-shadow: 0 14px 34px rgba(12, 77, 143, .06);
}
.files-feat > i {
  flex: 0 0 auto; font-size: 21px; line-height: 1.2; color: var(--accent-dark);
}
.files-feat b { display: block; font-size: .95rem; color: var(--ink); }
.files-feat p { margin: 3px 0 0; font-size: .84rem; line-height: 1.5; color: var(--muted); }
@media (max-width: 640px) {
  .files-guide { margin: 40px auto 64px; }
  .files-feats { grid-template-columns: 1fr; }
}