/* Rotate PDF: a thumbnail of every page, each one a button that turns its page a further 90° clockwise (T03-01). Loaded only on
   /tools/rotate-pdf/. The thumbnail's box is square, so a page drawn to fit it fits it whichever way it is turned, unscaled. */
.rotate-board { display: grid; gap: var(--matrix-space-12); min-width: 0; }
.rotate-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--matrix-space-8) var(--matrix-space-12); }
.rotate-how { flex: 1 1 20rem; min-width: 0; margin: 0; font-size: var(--matrix-type-control); }
.rotate-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(132px, 100%), 1fr)); gap: var(--matrix-space-12); }
/* the card is a size container: the square box is as wide as the card, so a page's longest side is held to that width
   (100cqi), with no height for a percentage to resolve against */
.rotate-card { position: relative; container-type: inline-size; display: grid; gap: 6px; min-width: 0; padding: var(--matrix-space-8); border: 1px solid var(--matrix-border); border-radius: var(--matrix-radius-control); background: var(--matrix-surface); }
/* a page that will turn: its card outlined, its label in the selection colour */
.rotate-card.is-turned { border-color: var(--matrix-brand); box-shadow: inset 0 0 0 1px var(--matrix-brand); }
.rotate-page { display: grid; place-items: center; width: 100%; aspect-ratio: 1 / 1; padding: 8px; border: 0; border-radius: 6px; background: var(--matrix-surface-subtle); color: var(--matrix-text); cursor: pointer; }
/* the whole card takes the click, its label included, while the label stays out of the button's name */
.rotate-page::after { content: ""; position: absolute; inset: 0; border-radius: var(--matrix-radius-control); }
@media (hover: hover) {
  .rotate-card:hover { border-color: var(--matrix-control-border); }
  .rotate-card.is-turned:hover { border-color: var(--matrix-brand); }
}
.rotate-page canvas { display: block; max-width: calc(100cqi - 16px); max-height: calc(100cqi - 16px); background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.24); transition: transform var(--matrix-motion-standard) var(--matrix-ease); }
.rotate-label { margin: 0; font-size: var(--matrix-type-caption); text-align: center; overflow-wrap: anywhere; }
.rotate-card.is-turned .rotate-label { color: var(--matrix-selected-text); font-weight: 600; }