/* crop-image: styles only it uses, split out of site.css by scripts/split-css.mjs. */
.crop-editor { display: flex; flex-direction: column; gap: 16px; }
.crop-editor [data-ratio][aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.crop-stage {
    position: relative; align-self: center; max-width: 100%; line-height: 0; user-select: none; touch-action: none;
    background: repeating-conic-gradient(#E9EDF3 0 25%, #fff 0 50%) 0 0 / 16px 16px;
}
.crop-stage img { display: block; max-width: 100%; max-height: 70vh; }
.crop-box {
    position: absolute; cursor: move; outline: none;
    box-shadow: 0 0 0 9999px rgb(15 29 58 / 0.55); border: 2px solid #fff;
    background-image: linear-gradient(rgb(255 255 255 / 0.35) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 0.35) 1px, transparent 1px);
    background-size: 33.333% 33.333%; background-position: -1px -1px;
}
.crop-box:focus-visible { border-color: var(--signal); }
.crop-stage { overflow: hidden; }
.crop-handle { position: absolute; width: 18px; height: 18px; background: #fff; border: 2px solid var(--signal); border-radius: 4px; }
.crop-handle[data-handle="nw"] { left: -2px; top: -2px; cursor: nwse-resize; }
.crop-handle[data-handle="ne"] { right: -2px; top: -2px; cursor: nesw-resize; }
.crop-handle[data-handle="sw"] { left: -2px; bottom: -2px; cursor: nesw-resize; }
.crop-handle[data-handle="se"] { right: -2px; bottom: -2px; cursor: nwse-resize; }
.crop-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 560px) { .crop-fields { grid-template-columns: repeat(2, 1fr); } }