/* Free Image Cropper — additive to utility.css, which already supplies the
   hero, drop zone, option groups, status line and result actions. Only the
   interactive crop stage is new here. */

.crop-workspace { display: grid; grid-template-columns: 280px minmax(0, 1fr); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; min-height: 540px; box-shadow: var(--shadow); }
/* An author `display` beats the UA's [hidden] rule, so the workspace and the
   result would both render before there was anything to put in them. */
.crop-workspace[hidden], .crop-result[hidden], .drop-zone[hidden] { display: none; }
.crop-options { padding: 22px; background: #fafbfc; border-right: 1px solid var(--line); }
.crop-options h2 { margin: 0 0 18px; font-size: 17px; }
.crop-options .button.wide { width: 100%; margin-bottom: 9px; }

.option-label { font-weight: 700; font-size: 13px; }
.option-hint { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.5; }

.ratio-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
/* 40px minimum so these stay tappable on a phone. */
.ratio { min-height: 40px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; }
.ratio:hover { background: #f2f4f8; }
.ratio.is-active { background: var(--purple); border-color: var(--purple); color: #fff; }

.crop-size-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.crop-size-fields label { display: grid; gap: 5px; font-size: 12px; color: var(--muted); }
.crop-size-fields input { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 9px; font: inherit; }

.crop-stage-wrap { padding: 22px; display: flex; flex-direction: column; min-width: 0; }

/* The stage sizes itself to the image; the box is positioned against it, so
   both must share the same origin — hence position:relative and an inline
   block that shrink-wraps the preview. */
.crop-stage { position: relative; display: inline-block; max-width: 100%; align-self: center; line-height: 0; background: #fff repeating-conic-gradient(#eef1f6 0% 25%, #fff 0% 50%) 50% / 18px 18px; }
.crop-stage img { display: block; max-width: 100%; max-height: 52vh; width: auto; height: auto; user-select: none; -webkit-user-drag: none; }

.crop-box { position: absolute; border: 2px solid #fff; box-shadow: 0 0 0 1px #14203366, 0 0 0 9999px #14203359; cursor: move; touch-action: none; }
.crop-box:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }

.crop-handle { position: absolute; width: 18px; height: 18px; background: #fff; border: 1px solid #7d879a; border-radius: 3px; touch-action: none; }
.crop-handle[data-handle="nw"] { top: -9px; left: -9px; cursor: nwse-resize; }
.crop-handle[data-handle="ne"] { top: -9px; right: -9px; cursor: nesw-resize; }
.crop-handle[data-handle="sw"] { bottom: -9px; left: -9px; cursor: nesw-resize; }
.crop-handle[data-handle="se"] { bottom: -9px; right: -9px; cursor: nwse-resize; }

.crop-readout { margin: 14px 0 0; text-align: center; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.crop-readout b { color: var(--ink); }

.crop-result { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 18px; text-align: center; }
.crop-result img { max-width: 100%; max-height: 240px; border: 1px solid var(--line); border-radius: 10px; background: #fff repeating-conic-gradient(#eef1f6 0% 25%, #fff 0% 50%) 50% / 14px 14px; }
.crop-result .result-actions { justify-content: center; }

@media (max-width: 860px) {
  .crop-workspace { grid-template-columns: 1fr; }
  .crop-options { border-right: 0; border-bottom: 1px solid var(--line); }
  /* Bigger handles where the pointer is a fingertip. */
  .crop-handle { width: 24px; height: 24px; }
  .crop-handle[data-handle="nw"] { top: -12px; left: -12px; }
  .crop-handle[data-handle="ne"] { top: -12px; right: -12px; }
  .crop-handle[data-handle="sw"] { bottom: -12px; left: -12px; }
  .crop-handle[data-handle="se"] { bottom: -12px; right: -12px; }
  .crop-stage img { max-height: 42vh; }
}