/* Crop PDF: margin fields and the crop preview. Loaded only on /tools/crop-pdf/. */
/* before the crop: cropping hides and does not delete (queue row 113, T52-01 part 1) */
/* .notice.notice--warning's look, not its classes: a .notice in the options is a link's note (deeplink.js) */
.crop-hides { margin: 0; padding: var(--matrix-space-12) var(--matrix-space-16); border-radius: var(--matrix-radius-control); border: 1px solid transparent; background: var(--matrix-warning-background); color: var(--matrix-warning); }
.crop-field { display: inline-flex; flex-direction: column; gap: 4px; }
.crop-field input { width: 8em; }
.crop-edges { grid-template-columns: repeat(auto-fit, minmax(9em, max-content)); }
.crop-preview-wrap { display: grid; gap: var(--matrix-space-8); justify-items: start; }
.crop-preview { display: block; max-width: 100%; height: auto; border: 1px solid var(--matrix-border); background: var(--matrix-surface); }
.crop-preview-wrap p { margin: 0; }
/* the optional removal's cost, under its box (T52-01 part 2) */
.crop-remove-cost { margin: 0; padding-left: 32px; font-size: var(--matrix-type-caption); }
/* the crop box over the preview, with fixed margins (Jack's T52-02): its body moved, its edges and corners dragged, its edges
   moved by the arrow keys; the page outside it shaded. Handles are 24 px targets around an 10 px square. */
.crop-stage { position: relative; display: inline-block; max-width: 100%; line-height: 0; }
.crop-shade { position: absolute; inset: 0; background: rgba(20, 20, 30, 0.5); pointer-events: none; }
.crop-box { position: absolute; box-sizing: border-box; border: 2px solid var(--matrix-link); cursor: move; touch-action: none; }
.crop-handle { position: absolute; width: 24px; height: 24px; margin: -12px 0 0 -12px; touch-action: none; }
.crop-handle::before { content: ""; position: absolute; inset: 7px; box-sizing: border-box; background: var(--matrix-surface); border: 2px solid var(--matrix-link); border-radius: 2px; }
.crop-top { top: 0; left: 50%; cursor: ns-resize; }
.crop-bottom { top: 100%; left: 50%; cursor: ns-resize; }
.crop-left { top: 50%; left: 0; cursor: ew-resize; }
.crop-right { top: 50%; left: 100%; cursor: ew-resize; }
.crop-top-left { top: 0; left: 0; cursor: nwse-resize; }
.crop-bottom-right { top: 100%; left: 100%; cursor: nwse-resize; }
.crop-top-right { top: 0; left: 100%; cursor: nesw-resize; }
.crop-bottom-left { top: 100%; left: 0; cursor: nesw-resize; }
.crop-edge:focus-visible { outline: 3px solid var(--matrix-focus); outline-offset: 2px; }
.crop-drag-hint { grid-column: 1 / -1; margin: 0; font-size: var(--matrix-type-caption); }
@media (forced-colors: active) { .crop-box, .crop-handle::before { border-color: Highlight; } .crop-shade { background: transparent; } }