/* crop-image: preview stage with the draggable crop box, number fields, and hidden option groups
   (the shared .option-group / .option-row set display, which would override the hidden attribute). */
.option-group[hidden], .option-row[hidden], .crop-stage[hidden], .crop-box[hidden], .crop-shade[hidden] { display: none; }
.option-hint { margin: 0; font-size: var(--matrix-type-control); }
.option-row output { min-width: 3.5em; font-variant-numeric: tabular-nums; }
/* The stage is exactly the painted picture: the canvas fills it at its own aspect ratio (no object-fit,
   so nothing is letterboxed) and the controller caps the stage width so the height stays under 70vh.
   The crop box is positioned in percentages of the stage, so it maps 1:1 onto image pixels.
   The box and its handles are not clipped (a handle on the picture's edge stays whole and grabbable from
   either side of the edge); only the shade that darkens the picture outside the box is, by .crop-clip.
   The stage's margin leaves room for the handles that reach past the picture. */
.crop-box { --crop-handle: 16px; }
.crop-stage { position: relative; overflow: visible; box-sizing: content-box; border: 1px solid var(--matrix-border); border-radius: var(--matrix-radius-control); display: block; width: auto; max-width: 720px; margin: 10px; touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair; line-height: 0; }
.crop-canvas { display: block; width: 100%; height: auto; border-radius: inherit; background: repeating-conic-gradient(#e6e6e6 0 25%, #fafafa 0 50%) 0 0 / 16px 16px; }
.crop-clip { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.crop-shade { position: absolute; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.35); pointer-events: none; }
.crop-box { position: absolute; box-sizing: border-box; border: 2px solid var(--matrix-brand); cursor: move; }
.crop-handle { position: absolute; width: var(--crop-handle); height: var(--crop-handle); background: #fff; border: 2px solid var(--matrix-brand); border-radius: 3px; box-sizing: border-box; }
/* each handle is centred on its edge or corner of the box's outer border */
.crop-handle--nw { left: calc(var(--crop-handle) / -2 - 1px); top: calc(var(--crop-handle) / -2 - 1px); cursor: nwse-resize; }
.crop-handle--n { left: calc(50% - var(--crop-handle) / 2); top: calc(var(--crop-handle) / -2 - 1px); cursor: ns-resize; }
.crop-handle--ne { right: calc(var(--crop-handle) / -2 - 1px); top: calc(var(--crop-handle) / -2 - 1px); cursor: nesw-resize; }
.crop-handle--e { right: calc(var(--crop-handle) / -2 - 1px); top: calc(50% - var(--crop-handle) / 2); cursor: ew-resize; }
.crop-handle--se { right: calc(var(--crop-handle) / -2 - 1px); bottom: calc(var(--crop-handle) / -2 - 1px); cursor: nwse-resize; }
.crop-handle--s { left: calc(50% - var(--crop-handle) / 2); bottom: calc(var(--crop-handle) / -2 - 1px); cursor: ns-resize; }
.crop-handle--sw { left: calc(var(--crop-handle) / -2 - 1px); bottom: calc(var(--crop-handle) / -2 - 1px); cursor: nesw-resize; }
.crop-handle--w { left: calc(var(--crop-handle) / -2 - 1px); top: calc(50% - var(--crop-handle) / 2); cursor: ew-resize; }
.crop-fields { gap: var(--matrix-space-8) var(--matrix-space-16); }
.crop-field { display: inline-flex; align-items: center; gap: 6px; }
.crop-field input { width: 6.5em; }
@media (pointer: coarse) { .crop-box { --crop-handle: 24px; } .crop-stage { margin: 14px; } }
/* A choice's words stay beside its box at any width (Lucy's round 1, L02 and L07: at 390 px the shell's row wrapped a long
   label below its box, the dot alone on its line). */
#options .option-row:has(> input[type="checkbox"], > input[type="radio"]) { flex-wrap: nowrap; }
#options .option-row:has(> input[type="checkbox"], > input[type="radio"]) > label { min-width: 0; }