/* Merge PDF + Alternate & Mix.

   The workspace is a page canvas: the upload box gives way to it, a toolbar
   sits on top (view toggle, thumbnail size, add/reorder), the pages are shown
   as bare thumbnails with the file name above them, and each one carries its
   own tools. The action bar stays at the bottom of the screen. */

/* The workspace IS the page here, the way their merge screen is: the canvas, the
   toolbar and the action band use the width of the window instead of the 860px
   reading column. The client's words: "they have lot of working place. but we
   dont". The compound selector is needed because theme.css is loaded last and
   sets .tool-page { max-width: 860px }. */
.tool-page.files-page {
  --files-gutter: var(--tool-gutter, clamp(16px, 2vw, 30px));
  max-width: none;
}

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

/* Toolbar pieces that belong to one tool only are hidden with [hidden], which
   display:flex/inline-flex would otherwise win against. */
.files-tools [hidden],
.files-menu-wrap[hidden],
.files-only-organize[hidden],
.files-only-alt[hidden],
.files-hint[hidden] { display: none !important; }

/* Their hero is centred over the workspace, so this tool's heading is too. */
.files-head { text-align: center; align-items: center; }
/* Extract Images uses a left-aligned heading, so the heading brings the same
   gutter as the canvas it sits over. */
.tool-page.files-page > .tool-head { padding-inline: var(--files-gutter, 20px); }
.files-head h1 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
.files-head .lead { max-width: 620px; margin-left: auto; margin-right: auto; }

/* ---- toolbar ------------------------------------------------------------- */
/* Toggle over the middle of the canvas, zoom at the right edge — the two places
   their toolbar puts them. */
.files-toolbar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 16px; padding: 0 var(--files-gutter, 20px) 14px;
  border-bottom: 1px solid var(--line);
}
.files-views {
  grid-column: 2; justify-self: center;
  display: inline-flex; background: var(--white); border: 1px solid var(--line);
  border-radius: 4px; padding: 1px; gap: 0;
}
.files-view-btn {
  border: 1px solid transparent; background: none; font: inherit; font-size: .92rem; cursor: pointer;
  padding: 8px 16px; border-radius: 4px; color: var(--ink);
}
/* Their toggle's chosen half carries the accent border — Files view is the
   one their screen opens on. */
.files-view-btn.is-on {
  background: var(--white); color: var(--ink); border-color: var(--accent);
}
.files-zoom {
  grid-column: 3; justify-self: end; margin-left: 0;
  display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: .95rem;
}
.files-zoom input[type=range] { width: clamp(110px, 22vw, 190px); accent-color: var(--accent); }
.files-zoom .la { font-size: .9em; }
.files-zoom-value { font-size: .78rem; color: var(--muted); min-width: 26px; text-align: right; }

/* Second row: the tool group, centred under the toggle row. */
.files-tools {
  display: inline-flex; align-items: stretch; margin: 14px auto 0;
  border: 1px solid var(--line); border-radius: 4px; background: var(--white);
  overflow: visible; position: relative;
}
.files-toolbar + .files-tools { display: flex; width: fit-content; }
.files-tool {
  display: inline-flex; align-items: center; gap: 7px;
  border: none; background: none; font: inherit; font-size: .87rem; cursor: pointer;
  padding: 9px 16px; color: var(--ink); border-right: 1px solid var(--line);
  white-space: nowrap;
}
.files-tool .la { color: var(--muted); font-size: .95em; }
.files-tool:hover .la { color: var(--accent-dark); }
.files-tools > *:last-child .files-tool,
.files-tools > .files-tool:last-child { border-right: none; }
.files-tool:hover { background: var(--accent-soft); color: var(--accent-dark); }
.files-menu-wrap { position: relative; display: inline-flex; }
.files-menu {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 60; min-width: 236px;
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow); padding: 6px; display: grid; gap: 2px;
}
.files-menu button {
  text-align: left; border: none; background: none; font: inherit; font-size: .88rem;
  padding: 9px 11px; border-radius: 7px; cursor: pointer; color: var(--ink);
  display: flex; align-items: center; gap: 10px;
}
.files-menu button:hover { background: var(--accent-soft); color: var(--accent-dark); }
/* The mark beside each source, so the list reads at a glance the way theirs
   does: a folder, the three provider logos, a page, a blank page. */
.files-menu button i {
  font-size: 1.05rem; width: 1.2em; text-align: center; flex: none; color: var(--muted);
}
.files-menu button:hover i { color: var(--accent-dark); }
.files-menu button.is-cloud i { color: var(--accent); }
.files-menu button span.menu-label { flex: 1 1 auto; }
.files-menu-empty { padding: 9px 11px; font-size: .85rem; color: var(--muted); }

/* The ⊕ instant menu: "Add Files" / "Add Pages" rows, each unfolding its
   source list beside the popup — Sejda's mark menu. Whatever is picked there
   lands at the marked spot. */
.files-mark-menu { position: fixed; }
.mark-row { position: relative; }
.mark-row .mark-head { display: flex; align-items: center; gap: 10px; width: 100%; }
.mark-row .mark-head .mark-chev { margin-left: auto; flex: none; width: auto;
  font-size: .7rem; color: var(--muted); }
.mark-row .mark-sub { display: none; position: absolute; left: calc(100% + 6px); top: -6px; z-index: 61;
  max-height: calc(100vh - 16px); overflow-y: auto; }
.mark-row:hover > .mark-sub,
.mark-row.is-open > .mark-sub { display: grid; }
/* The "Drag to move" buttons are real handles: grab them and the card or the
   page follows the pointer. */
.fx-tool.is-drag-handle { cursor: grab; }
.fx-tool.is-drag-handle:active { cursor: grabbing; }

/* ---- the canvas: a full-width grey band with the pages centred in it ---- */
.files-grid,
.files-pages-grid {
  display: grid; gap: 26px 30px;
  /* The band runs edge to edge, the way their workspace does, and the pages now
     fill it — the window is the workspace, not the reading column. */
  width: 100%; margin-left: 0;
  padding: 30px var(--files-gutter, 20px);
  background: var(--bg);
  grid-template-columns: repeat(auto-fit, var(--files-thumb, 150px));
  justify-content: center; align-content: start;
}
/* Files view wraps exactly as theirs does: the files stay the size the slider
   asks for and the row fills up, the next file starting a new line rather than
   the files being squeezed to keep one line. Their words: "why our 5 pdf will
   stay togther — make it like sajde". Alternate & Mix keeps its own vertical
   list via .files-rows, and Pages view uses the same wrapping template. */
.files-grid:empty { display: none; }
.files-pages { margin-top: 0; }

/* Pages view: the pages CENTRE in the band, the way Sejda's do. A grid could
   not do it — the per-file heading spans every column (`grid-column: 1 / -1`),
   and one item touching all the auto-fit tracks keeps every empty track alive,
   so the "centred" tracks still started at the gutter (the client: "page view
   gone left, it should be centre the pages"). A wrapping flex line has no
   tracks to strand: whatever fits goes in the row, and the row centres. */
.files-pages-grid {
  display: flex; flex-wrap: wrap; align-content: flex-start;
}
.files-pages-grid > .fx-cell { flex: 0 0 var(--files-thumb, 150px); }
/* The document heading gets a line to itself, as it did when it spanned. */
.files-pages-grid > .fx-file-chip { flex: 0 0 100%; }

/* One page (or one file) as it appears in the canvas: the picture, its name,
   and the tools that fade in when you point at it. */
.fx-item,
.fx-cell {
  position: relative; text-align: center; background: none; border: none;
  padding: 0; font: inherit; cursor: pointer; min-width: 0;
  user-select: none;            /* pointer-dragging a page must not select its label */
}
/* File card header: name on the left, page chip on the right, above the picture
   and always on screen, whatever the zoom. */
.fx-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 6px; min-height: 17px; text-align: left;
}
.fx-name,
.fx-label {
  font-size: .78rem; color: var(--muted); font-weight: 500; letter-spacing: .01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.fx-head .fx-name { color: var(--ink, #1b2430); font-weight: 600; }
.fx-thumb {
  position: relative;          /* anchors the page-count badge */
  display: block; background: var(--white); border: 1px solid var(--line);
  box-shadow: 0 1px 3px rgba(20, 30, 35, .12); overflow: hidden;
  transition: box-shadow .12s, border-color .12s;
}
.fx-item:hover .fx-thumb,
.fx-cell:hover .fx-thumb { box-shadow: var(--shadow); border-color: var(--line-strong); }
/* The page fills the item width, so its shape is the page's shape. */
.fx-thumb canvas, .fx-thumb img { display: block; width: 100%; height: auto; }
.fx-thumb.fx-empty { background: var(--red-bg, #fbeceb); border-color: var(--red-line); }
/* "6 pages" on the picture: the count stays readable at any zoom. */
.fx-badge {
  position: absolute; right: 6px; bottom: 6px; z-index: 2;
  background: rgba(17, 24, 32, .72); color: #fff;
  font-size: 11px; line-height: 1; padding: 4px 7px; border-radius: 10px;
  pointer-events: none;
}
/* "6 pages" on the picture: the count stays readable at any zoom. */
.fx-badge {
  position: absolute; right: 6px; bottom: 6px; z-index: 2;
  background: rgba(17, 24, 32, .72); color: #fff;
  font-size: 11px; line-height: 1; padding: 4px 7px; border-radius: 10px;
  pointer-events: none;
}
.fx-ph {
  display: flex; align-items: center; justify-content: center;
  min-height: calc(var(--files-thumb, 150px) * 1.3);
  font-size: .78rem; color: var(--muted);
}

.fx-pages {
  display: inline-block; margin-top: 0; border: none; background: none;
  color: var(--muted); border-radius: 999px; padding: 3px 9px;
  font: inherit; font-size: .7rem; cursor: pointer; text-decoration: underline;
  text-decoration-color: var(--line-strong); text-underline-offset: 3px;
  white-space: nowrap; flex: 0 0 auto;
}
/* In a page cell the chip is still its own row under the thumbnail; on a file
   card it rides in the header. */
.fx-cell > .fx-pages { margin-top: 8px; }
.fx-pages:hover { color: var(--accent-dark); }
.fx-pages.is-picked {
  background: var(--accent-soft); border-color: var(--accent-line);
  color: var(--accent-dark); font-weight: 600;
}

/* The tools sit over the top of the page, the way their hover bar does. */
.fx-tools {
  position: absolute; left: 50%; top: 34px; transform: translateX(-50%);
  display: flex; gap: 2px; padding: 3px; z-index: 5;
  background: rgba(255, 255, 255, .97); border: 1px solid var(--line);
  border-radius: 7px; box-shadow: var(--shadow);
  opacity: 0; pointer-events: none; transition: opacity .12s;
}
.fx-item:hover .fx-tools,
.fx-item.is-open .fx-tools,
.fx-cell:hover .fx-tools,
.fx-cell.is-open .fx-tools { opacity: 1; pointer-events: auto; }
.fx-tool {
  border: none; background: none; color: var(--muted);
  width: 26px; height: 26px; border-radius: 5px; cursor: pointer; font-size: 13px;
  line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}
.fx-tool:hover { background: var(--accent-soft); color: var(--accent-dark); }
/* No hover to reveal anything on a touch screen, so the tools sit under the
   page instead of floating over it. */
@media (hover: none) {
  .fx-tools {
    position: static; transform: none; opacity: 1; pointer-events: auto;
    justify-content: center; margin-top: 7px; background: none; border: none;
    box-shadow: none; padding: 0;
  }
}

/* ⊕ before and after an item: always there, the way theirs are — a quiet grey
   circle you can aim at, because it is how more pages get in. */
.fx-insert {
  position: absolute; top: calc(50% - 11px); width: 22px; height: 22px; z-index: 4;
  border: 1px solid var(--line-strong); border-radius: 50%; background: var(--white);
  color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: .85; transition: opacity .12s, border-color .12s, color .12s, transform .12s;
}
.fx-insert-before { left: -15px; }
.fx-insert-after { right: -15px; }
.fx-insert:hover {
  opacity: 1; transform: scale(1.12); border-color: var(--accent);
  color: var(--accent-dark);
}
/* The ⊕ the visitor aimed at: it stays lit while the Add Pages menu is open, so
   it is obvious where the file, the pages or the blank page will land. */
.fx-insert.is-armed {
  opacity: 1; border-color: var(--accent); color: var(--accent-dark);
  background: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-soft);
}
/* An item that was just inserted (a blank page, usually): tinted, briefly, and
   scrolled to, because a blank page is invisible in a long document. */
.fx-cell.is-new .fx-thumb {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
  animation: fx-new-flash 1.8s ease-out 1;
}
@keyframes fx-new-flash {
  0% { background: var(--accent-soft); }
  100% { background: var(--white); }
}
.files-menu-sep { height: 1px; margin: 5px 6px; background: var(--line); }
@media (hover: none) { .fx-insert { position: static; margin: 4px auto 0; } }

/* Their toolbar: outlined boxes that wrap, one row per set of tools — and the
   hint line centred over the canvas. */
.files-tools { flex-wrap: wrap; }
.files-tools .files-tool {
  border: 1px solid var(--accent-line); background: var(--white);
  color: var(--accent); border-radius: 4px; font-weight: 600;
}
.files-tools .files-tool:hover { border-color: var(--accent); background: var(--accent-soft); }
.files-hint { text-align: center; }

.fx-item.dragging, .fx-cell.dragging { opacity: .4; }
.fx-item.drop-target .fx-thumb,
.fx-cell.drop-target .fx-thumb { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* The pointer drag on page cells (see startPageDrag): the held page fades, a
   ghost of it follows the pointer, and a green bar shows where it will land. */
.fx-cell.is-moving, .fx-item.is-moving { opacity: .35; }
.pdrag-ghost {
  position: fixed; z-index: 90; pointer-events: none; background: var(--white);
  border: 1px solid var(--line-strong); border-radius: 6px; padding: 2px;
  box-shadow: 0 12px 28px rgba(20, 30, 35, .28); transform: rotate(1.6deg);
}
.pdrag-ghost .fx-tools, .pdrag-ghost .fx-insert, .pdrag-ghost .fx-tick { display: none; }
.fx-cell.pdrag-before::after,
.fx-cell.pdrag-after::after,
.fx-item.pdrag-before::after,
.fx-item.pdrag-after::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 3px;
  border-radius: 2px; background: var(--accent); z-index: 7;
}
.fx-cell.pdrag-before::after,
.fx-item.pdrag-before::after { left: -16px; }
.fx-cell.pdrag-after::after,
.fx-item.pdrag-after::after { right: -16px; }

/* A heading row inside the page strip, naming the document the pages below
   belong to. It takes a flex line to itself (see .files-pages-grid). */
.fx-file-chip {
  font-size: .78rem; font-weight: 700; color: var(--accent-dark);
  padding-top: 4px;
}

/* ---- Alternate & Mix: a list of documents, not a page grid -------------- */
.files-grid.files-rows { grid-template-columns: minmax(0, 1fr); gap: 22px; }
.fx-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  position: relative;
  background: var(--white); border: 1px solid #ddd; border-radius: 10px;
  padding: 20px; margin: 10px 0;
  /* Their card carries three soft layers, not one. */
  box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08),
              0 -1px 3px rgba(0, 0, 0, .02);
}
.fx-row.dragging { opacity: .5; }
.fx-row.drop-target { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
@media (max-width: 640px) {
  .fx-row { gap: 10px; }
  .fx-row-field { width: 100%; }
  .files-alt-sort { margin-left: 0; }
}
.fx-row-num {
  /* Their number: a small soft chip with plain gray digits, not a bold tile. */
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 24px; padding: 0 3px; border-radius: 4px;
  background: var(--accent-soft); color: #666;
  font-size: 1rem; font-weight: 400; flex: 0 0 auto;
}
.fx-row-name {
  font-weight: 700; font-size: 1.15rem; min-width: 60px; color: var(--accent);
  max-width: calc(100% - 56px); overflow-wrap: anywhere;
}
/* Their faint × waits in the card's top-right corner; the row brings it
   forward on hover. */
.fx-row .fx-tool {
  position: absolute; top: 10px; right: 12px;
  color: var(--ink); font-size: 15px;
  opacity: .22; transition: opacity .12s;
}
.fx-row:hover .fx-tool, .fx-row:focus-within .fx-tool { opacity: 1; }
/* Their Pick-pages pair: two joined 12px boxes; the chosen one has the accent
   border, a faint tint and an INSET shadow (their press-in look). */
.fx-row .seg { border-radius: 4px; }
.fx-row .seg label {
  border: 1px solid #ccc; border-right-width: 0; background: var(--white);
  color: #333; border-radius: 0; padding: 4px 8px; font-size: .75rem;
  font-weight: 400;
}
.fx-row .seg label:first-of-type { border-radius: 4px 0 0 4px; }
.fx-row .seg label:last-of-type { border-right-width: 1px; border-radius: 0 4px 4px 0; }
.fx-row .seg label:has(input:checked) {
  border-color: var(--accent); background: var(--accent-soft); color: #000;
  font-weight: 400; box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.fx-row-field {
  display: inline-flex; align-items: center; gap: 8px; font-size: .95rem;
  color: var(--ink);
}
/* Each question sits on its own line, the way their cards stack. */
.fx-row-field { flex-basis: 100%; }
.fx-row-pick { color: var(--muted); }
.fx-row-step { color: var(--muted); }
/* Their step box: a squat 30px square, no spinner arrows, centered digit. */
.fx-step {
  width: 40px; height: 30px; font: inherit; font-size: 1rem; padding: 2px 6px;
  text-align: center; -webkit-appearance: none; appearance: textfield;
  border: 1px solid #ccc; border-radius: 4px; background: var(--white);
  color: #555;
}
.fx-step::-webkit-outer-spin-button,
.fx-step::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.seg-sm label { padding: 4px 8px; font-size: .75rem; }

/* Their screen has no view toggle and no zoom row, and the heading is
   centred over the cards. */
.files-page[data-tool="alternate-mix-pdf"] .files-toolbar { display: none; }
.files-page[data-tool="alternate-mix-pdf"] .files-head { text-align: center; }
.files-page[data-tool="alternate-mix-pdf"] .files-head .pill { display: none; }
.files-page[data-tool="alternate-mix-pdf"] .files-head .lead { margin-inline: auto; }
.files-page[data-tool="alternate-mix-pdf"] .files-head h1 {
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
}
/* Alternate & Mix: their layout is two columns — the document list on the
   left, and on the right a rail with "Add more files ▾" and the sort links. */
.files-canvas-row { display: flex; align-items: flex-start; gap: 28px; }
.files-canvas-row > .files-grid { flex: 1 1 auto; min-width: 0; }
.files-alt-bar {
  flex: 0 0 230px; display: flex; flex-direction: column;
  align-items: flex-start; gap: 10px; margin-top: 50px;
  padding-inline: 0;
}
.files-alt-add {
  /* Their rail's "Add more files": a soft accent button with a copy mark,
     40px tall like theirs. The caret beside it opens the sources. */
  display: inline-flex; align-items: center; gap: 2px;
  border: 1px solid transparent; background: var(--accent-soft);
  color: var(--accent-dark); font: inherit; font-size: 1rem; font-weight: 400;
  padding: 7px 14px; border-radius: 4px; cursor: pointer;
}
.files-alt-add:hover { border-color: var(--accent); }
.files-alt-add i { margin-right: 8px; }
.files-alt-group { display: inline-flex; align-items: stretch; }
.files-alt-group .files-alt-add { border-radius: 4px 0 0 4px; border-right: 0; }
.files-alt-caret {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; background: var(--accent-soft);
  color: var(--accent-dark); border-radius: 0 4px 4px 0; padding: 7px 9px;
  font: inherit; font-size: .9rem; line-height: 1; cursor: pointer;
}
.files-alt-add:hover + .files-alt-caret,
.files-alt-caret:hover { border-color: var(--accent); }
.files-alt-sort { display: flex; gap: 14px; }
.files-alt-sort .files-link { white-space: nowrap; }
@media (max-width: 900px) {
  .files-alt-bar { flex-basis: 200px; }
}
.files-link {
  border: none; background: none; font: inherit; font-size: 1rem; cursor: pointer;
  color: var(--accent-dark);
  padding: 4px 0;
}
.files-link:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
  .files-canvas-row { flex-direction: column; gap: 14px; }
  .files-alt-bar { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 14px; }
  .files-alt-sort { margin-left: auto; }
}

/* ---- Organize: picked pages, and the hint above the canvas -------------- */
.files-hint { margin: 10px 0 0; padding-inline: var(--files-gutter, 20px); }
.fx-cell.is-sel .fx-thumb {
  border-color: var(--sel, var(--accent)); box-shadow: 0 0 0 3px rgba(31, 122, 109, .18);
}
.fx-tick {
  position: absolute; right: 6px; top: 26px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--sel, var(--accent)); color: #fff; font-size: 12px; line-height: 22px;
  text-align: center; opacity: 0; transform: scale(.7); transition: opacity .12s, transform .12s;
  z-index: 6;
}
.fx-cell.is-sel .fx-tick { opacity: 1; transform: scale(1); }
.fx-cell.is-blank .fx-thumb {
  background: repeating-linear-gradient(45deg, #f7f9f9, #f7f9f9 8px, #eef2f2 8px, #eef2f2 16px);
}
.fx-cell.is-blank .fx-ph { color: var(--muted); font-size: .76rem; }

/* Dropping more files anywhere on the workspace. */
.files-page.is-dropping .files-work,
.files-page.is-dropping .files-toolbar { outline: 2px dashed var(--accent-line); outline-offset: 6px; }

/* ---- options: segmented groups ------------------------------------------- */
/* Options stay a readable card in the middle of the wider workspace. */
/* Their options live on the amber band: one centred column — sections
   stacked, each row centred — and the action bar beneath carries no seam. */
.files-options {
  margin: 0; width: 100%; padding: 20px var(--files-gutter, 20px) 8px;
  background: var(--amber-bg); border: 0; border-radius: 0;
  display: grid; gap: 22px; text-align: center;
}
.files-page:has(.files-options:not([hidden])) .files-bar { border-top-color: transparent; }
.opt-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.opt-group legend { font-size: 1.0625rem; font-weight: 700; color: var(--ink); padding: 0 0 10px; text-align: center; }
.opt-group .check {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  font-weight: 400; font-size: 1rem; color: var(--ink); margin-bottom: 10px;
}
.opt-group .check .la { color: var(--muted); font-size: 1.02em; cursor: help; }
.opt-group input[type=checkbox] { accent-color: var(--accent); width: 15px; height: 15px; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg label {
  position: relative; display: inline-flex; align-items: center; font-size: .84rem;
  cursor: pointer; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px;
  background: var(--white); color: var(--muted);
}
.seg label:has(input:checked) {
  border-color: var(--accent); background: var(--accent-soft);
  color: var(--accent-dark); font-weight: 600;
}
.seg input { position: absolute; opacity: 0; width: 0; height: 0; }
/* The options' pill rows are Sejda's: joined 12px boxes; the chosen one has
   the accent border, a faint tint and their press-in shadow. */
.files-options .seg { gap: 0; justify-content: center; margin-top: 2px; }
.files-options .seg label {
  border: 1px solid #ccc; border-right-width: 0; border-radius: 0;
  background: var(--white); color: #333; font-weight: 400; font-size: .75rem;
  padding: 4px 8px;
}
.files-options .seg label:first-of-type { border-radius: 4px 0 0 4px; }
.files-options .seg label:last-of-type { border-right-width: 1px; border-radius: 0 4px 4px 0; }
.files-options .seg label:has(input:checked) {
  border-color: var(--accent); background: var(--accent-soft); color: #000;
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); font-weight: 400;
}
@media (min-width: 860px) {
  .files-options { gap: 24px; }
}

/* ---- the action band: full width, button centred -------------------------*/
.files-bar {
  position: sticky; bottom: 0; z-index: 30; margin-top: 0;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 14px;
  width: 100%; margin-left: 0;
  padding: 16px var(--files-gutter, 20px);
  background: var(--amber-bg); border-top: 1px solid var(--amber-line);
}
.files-bar-actions { display: flex; align-items: center; gap: 12px; }
/* Their "More options": a soft accent chip beside the big merge button. */
.files-bar #files-more {
  background: var(--accent-soft); border-color: transparent; color: var(--accent);
  border-radius: 4px; font-size: .9rem; padding: 10px 18px;
}
.files-bar #files-more:hover { border-color: var(--accent); color: var(--accent-dark); }
.files-bar .btn.is-on { background: rgba(255, 255, 255, .7); border-color: var(--amber-line); }
.files-bar-count {
  position: absolute; left: var(--files-gutter, 20px);
  font-size: .82rem; color: var(--amber-ink);
}
/* Their Alternate & Mix band: one centred button, no count. */
.files-bar-alt .files-bar-count { display: none; }
@media (max-width: 900px) {
  .files-bar { justify-content: center; }
  .files-bar-count { position: static; order: 2; width: 100%; text-align: center; }
  .files-bar-actions { order: 1; }
}

/* ---- the page popup ------------------------------------------------------ */
.files-modal-box { width: min(1040px, 96vw); padding: 0; display: flex; flex-direction: column; }
.files-modal-head {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.fm-name { font-size: .95rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files-modal-actions { display: flex; gap: 8px; margin-left: auto; }
.files-modal-body {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 14px; background: var(--canvas); min-height: 240px;
}
.files-modal-body canvas { background: var(--white); box-shadow: var(--shadow-sm); max-width: 100%; }
.fm-nav {
  border: 1px solid var(--line-strong); background: var(--white); color: var(--ink);
  width: 42px; height: 42px; border-radius: 50%; font-size: 22px; line-height: 1;
  cursor: pointer; flex: 0 0 auto;
}
.fm-nav:disabled { opacity: .35; cursor: default; }
.fm-grid-wrap { padding: 14px; overflow-y: auto; max-height: 62vh; background: var(--bg); }
/* Picking pages needs the room the single-page view was holding. The preview
   body stayed on screen with nothing in it (its canvas and arrows are hidden),
   which left an empty grey band above the grid and pushed the pages down —
   the popup looked broken. Hiding it gives the grid the whole box back. */
.files-modal-box.is-picking .files-modal-body { display: none; }
.fm-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); }
.fm-cell {
  position: relative; border: 2px solid var(--line); background: var(--white);
  border-radius: 8px; padding: 6px; cursor: pointer; font: inherit;
}
.fm-cell-thumb {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1.35; background: var(--bg); border-radius: 5px; overflow: hidden;
}
.fm-cell-thumb canvas { display: block; }
.fm-cell-num { display: block; text-align: center; font-size: .74rem; color: var(--muted); margin-top: 4px; }
.fm-cell-tick {
  position: absolute; right: 6px; top: 6px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 13px; line-height: 22px; text-align: center;
  opacity: 0; transform: scale(.7); transition: opacity .12s, transform .12s;
}
.fm-cell.picked { border-color: var(--accent); }
.fm-cell.picked .fm-cell-tick { opacity: 1; transform: scale(1); }
.fm-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-top: 1px solid var(--line); flex-wrap: wrap;
}
.fm-bar-actions { display: flex; gap: 8px; margin-left: auto; }

/* ---- phone --------------------------------------------------------------- */
@media (max-width: 640px) {
  /* One column on a phone: toggle over zoom, both centred. */
  .files-toolbar { grid-template-columns: 1fr; justify-items: center; gap: 10px; }
  .files-views, .files-zoom { grid-column: 1; justify-self: center; }
  .files-zoom input[type=range] { width: 110px; }
  /* Seven tools have to wrap on a phone instead of running off the side. */
  .files-tools { width: 100%; flex-wrap: wrap; border-radius: 8px; }
  .files-tool, .files-menu-wrap { flex: 1 1 auto; }
  .files-menu-wrap .files-tool { width: 100%; justify-content: center; }
  .files-menu { left: 0; right: auto; min-width: 210px; }
  .files-grid, .files-pages-grid { gap: 14px 10px; }
  /* Zoomed in on a phone a full-size card would run off the side, so there the
     columns are allowed to shrink below the size the slider asks for. */
  .files-grid, .files-pages-grid {
    grid-template-columns: repeat(auto-fit, minmax(0, var(--files-thumb, 150px)));
  }
  .files-pages-grid > .fx-cell { flex-shrink: 1; }
  .files-options { padding: 12px; }
  .files-bar { padding: 10px 12px; }
  .files-bar-actions { width: 100%; }
  .files-bar-actions .btn { flex: 1 1 auto; justify-content: center; }
  .files-modal-box { width: 96vw; }
  .files-modal-body { padding: 10px 6px; }
  .fm-nav { width: 36px; height: 36px; font-size: 19px; }
  .fm-grid { grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 9px; }
  .fm-bar { position: sticky; bottom: 0; background: var(--white); }
  .fm-bar-actions { width: 100%; }
  .fm-bar-actions .btn { flex: 1 1 auto; justify-content: center; }
  .files-modal-head { flex-wrap: wrap; }
  .files-modal-actions { margin-left: 0; width: 100%; }
  .files-modal-actions .btn { flex: 1 1 auto; justify-content: center; }
}