/* Split PDF: the split points on the pages' pictures (Jack's T02-03). Loaded only on /tools/split-pdf/; the grid is
   Organize PDF's, without its moving parts. */
.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(120px, 1fr)); gap: var(--matrix-space-12); }
.page-card { position: relative; 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; }
.page-thumb { display: grid; place-items: center; aspect-ratio: 3 / 4; overflow: hidden; background: var(--matrix-surface-subtle); border-radius: 6px; cursor: pointer; }
.page-thumb canvas { max-width: 100%; max-height: 100%; height: auto; box-shadow: var(--matrix-shadow-card); }
.page-label { margin: 0; font-size: var(--matrix-type-caption); text-align: center; }
/* a box on each page, at least 32 px to touch, and a picked page marked beyond its box */
.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:has(input:focus-visible) { outline: 2px solid var(--matrix-focus); outline-offset: 2px; }
.page-card.is-selected { outline: 2px solid var(--matrix-focus); outline-offset: 1px; }
.page-card.is-selected .page-label { font-weight: 600; }
/* a split after a page: the page ends its file, marked by a line on its far side (the box says the same to a screen reader) */
.page-thumbs .page-card.is-selected { outline: none; box-shadow: inset -4px 0 0 var(--matrix-focus); }
.page-thumbs .page-card.is-selected .page-label::after { content: " ✂"; }
.split-parts { margin: 0; }