/* ====================================================================
   THE FRAME — the sheet that places a photograph or a logo.

   It borrows the house sheet wholesale (.modal-overlay / .modal in
   rdy-noir.css §13) and adds only the four things a cropper needs: the
   stage, the mask that says what will be kept, the zoom, and the little
   segmented control that chooses between a square mark and a wide one.

   THE MASK IS A DIM, NOT A CROP. What is outside the circle is still drawn,
   just darkened, because a face you cannot see the edges of is a face you
   cannot judge the framing of. The canvas underneath is the real output at
   real pixels; everything in this file is on top of it.

   Its own file, and its own <link>, because it is one self-contained piece
   of furniture — nothing else in the product styles it, and nothing in it
   styles anything else.
   ==================================================================== */

/* the sheet is narrow on purpose: the stage should not be wider than a
   thumb can drag across in one go */
.crop-over .crop-sheet{max-width:520px}
body.crop-open{overflow:hidden}

.crop-stage{position:relative;width:100%;margin:0 0 18px;border:1px solid var(--line);
  border-radius:10px;overflow:hidden;background:#04030c;touch-action:none}
.crop-stage canvas{display:block;width:100%;height:auto;cursor:grab;touch-action:none;
  -webkit-user-select:none;user-select:none}
.crop-stage canvas.held{cursor:grabbing}

/* a mark keeps its transparency, so the stage says so rather than letting
   somebody read a black background as part of their logo */
.crop-stage.alpha{background:
  linear-gradient(45deg,rgba(255,255,255,.055) 25%,transparent 25% 75%,rgba(255,255,255,.055) 75%) 0 0/18px 18px,
  linear-gradient(45deg,rgba(255,255,255,.055) 25%,transparent 25% 75%,rgba(255,255,255,.055) 75%) 9px 9px/18px 18px,
  #0a0912}

.crop-guide{position:absolute;inset:0;pointer-events:none}
/* the face: everything outside the circle is dimmed, and the circle carries
   a hairline so the edge is where the eye expects the plate to be */
.crop-stage.round .crop-guide{border-radius:50%;
  box-shadow:0 0 0 9999px rgba(4,3,12,.66),inset 0 0 0 1px rgba(255,255,255,.22)}
/* the mark: no dim, only the hairline of the box it will be drawn in */
.crop-stage:not(.round) .crop-guide{box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}

.crop-tools{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.crop-seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--pill-radius);overflow:hidden}
.crop-seg button{background:none;border:0;padding:7px 14px;font-size:12px;color:var(--muted2);
  text-transform:lowercase;cursor:pointer;transition:.25s var(--ease)}
.crop-seg button.on{background:var(--accent-soft);color:var(--accent-bright)}
.crop-seg button:not(.on):hover{color:#fff}

.crop-zoom{flex:1 1 140px;min-width:120px;-webkit-appearance:none;appearance:none;
  height:2px;background:var(--line);border-radius:2px;cursor:pointer}
.crop-zoom::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;
  background:var(--ink);border:0;cursor:grab}
.crop-zoom::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--ink);
  border:0;cursor:grab}

.crop-quick{display:inline-flex;gap:14px;font-size:12px}

.crop-hint{margin:14px 0 0;font-size:12px;color:var(--muted2);text-transform:lowercase;opacity:.7}
.crop-row{display:flex;align-items:center;gap:12px;margin-top:20px}
.crop-size{flex:1 1 auto;font-size:11px;color:var(--muted2);text-transform:lowercase;opacity:.55}

/* the phone: the stage takes the width it can get, and the tools stack so
   the zoom is a full-width track rather than a stub beside two buttons */
@media (max-width:760px){
  .crop-tools{gap:12px}
  .crop-zoom{flex:1 1 100%;order:3}
  .crop-quick{order:2;margin-left:auto}
}