/* Organize PDF: page thumbnail grid. Loaded only on /tools/organize-pdf/. */
.page-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--matrix-space-12); }
/* the key to the buttons under each page (Lucy's UAT round 1, 19 Oct, L3) */
.page-key { margin: 0; font-size: var(--matrix-type-caption); }
.page-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--matrix-space-12); }
.page-card { border: 1px solid var(--matrix-border); border-radius: var(--matrix-radius-control); padding: var(--matrix-space-8); background: var(--matrix-surface); display: grid; gap: 6px; }
/* Only the thumbnail is dimmed: the label and buttons keep full contrast (axe: 4.5:1 for the deleted label). */
.page-card.is-deleted { border-style: dashed; }
.page-card.is-deleted .page-thumb { filter: grayscale(1); opacity: 0.55; }
.page-thumb { display: grid; place-items: center; aspect-ratio: 3 / 4; overflow: hidden; background: var(--matrix-surface-subtle); border-radius: 6px; }
.page-thumb canvas { max-width: 100%; max-height: 100%; height: auto; transition: transform var(--matrix-motion-standard) var(--matrix-ease); box-shadow: var(--matrix-shadow-card); }
.page-label { margin: 0; font-size: var(--matrix-type-caption); text-align: center; }
.page-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
.page-actions .matrix-icon-button { min-width: 34px; min-height: 34px; padding: 0; }
/* moving a page by dragging or by the keyboard (Jack's T04-01): a mouse grabs it, a dragged card lets the pointer find the card
   under it, and a picked-up card (keyboard) shows it is held */
.page-card { cursor: grab; }
.page-card:focus-visible { outline: 2px solid var(--matrix-focus); outline-offset: 2px; }
.page-grid.is-sorting .page-card { user-select: none; -webkit-user-select: none; }
.page-card.is-dragging { opacity: 0.55; pointer-events: none; outline: 2px dashed var(--matrix-focus); outline-offset: 2px; cursor: grabbing; }
.page-card.is-lifted { outline: 3px solid var(--matrix-focus); outline-offset: 3px; }
/* pages chosen together (Jack's T04-02): a box on each page, at least 32 px to touch, and a chosen page marked beyond its box */
.page-card { position: relative; }
.page-choose { position: absolute; top: 4px; left: 4px; z-index: 1; display: grid; place-items: center; min-width: 32px; min-height: 32px; border-radius: 6px; background: var(--matrix-surface); cursor: pointer; }
.page-choose input { width: 20px; height: 20px; margin: 0; cursor: pointer; }
.page-card.is-selected { outline: 2px solid var(--matrix-focus); outline-offset: 1px; }
.page-select-bar { flex-basis: 100%; padding: var(--matrix-space-8) 0 0; }