/* ==========================================================================
   Crop image
   The picture is the page. Everything else is a narrow column beside it.
   ========================================================================== */

.cr-stage{
  display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;
  align-items:start;margin-top:6px;
}
@media (max-width:860px){
  .cr-stage{grid-template-columns:1fr;}
}

.cr-head{
  display:flex;align-items:center;gap:12px;margin-bottom:10px;min-height:32px;
}
.cr-file{
  font-family:var(--f-mono);font-size:.8rem;color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;
}
.cr-count{
  font-family:var(--f-mono);font-size:.74rem;color:var(--ink-3);white-space:nowrap;
}
.cr-head .btn{padding:5px 11px;font-size:.8rem;white-space:nowrap;}

/* ---------- the canvas ----------
   A fixed box so the frame does not jump about as pictures of different
   shapes go through it. The canvas fills it and the image is letterboxed.
*/
.crop-canvas-wrap{
  position:relative;
  background:var(--surface-2);border-radius:var(--radius-sm);
  height:clamp(300px,58vh,560px);padding:10px;
}
/* The canvas fills the box exactly. Nothing here may resize it -- no flex, no
   max-width -- because the drawing code and the pointer both measure it, and
   they have to agree about where the frame is. */
#cropCanvas{
  display:block;width:100%;height:100%;border-radius:3px;
  touch-action:none;              /* or the browser pans the page instead */
}
#cropCanvas:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

/* Arrows live at the vertical middle of the two edges, so they stay put
   whatever shape the picture is. */
.cr-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  display:none;place-items:center;width:38px;height:38px;
  border-radius:50%;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-2);cursor:pointer;z-index:2;
  box-shadow:0 2px 10px rgba(0,0,0,.18);
}
.cr-nav-on .cr-arrow{display:grid;}
.cr-arrow-l{left:10px;}
.cr-arrow-r{right:10px;}
.cr-arrow:hover{border-color:var(--accent);color:var(--accent);}
.cr-arrow svg{width:18px;height:18px;}

.cr-hint{font-size:.84rem;color:var(--ink-3);margin:10px 0 0;line-height:1.6;}

/* ---------- the side column ---------- */

.cr-side .opt{margin-bottom:20px;}
.cr-side .opt:last-child{margin-bottom:0;}

.ratio-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px;
}
.ratio-grid button{
  padding:8px 4px;font-size:.8rem;font-family:var(--f-mono);
  border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--ink-2);cursor:pointer;
  transition:border-color .12s,color .12s,background .12s;
}
.ratio-grid button:hover{border-color:var(--accent);color:var(--accent);}
.ratio-grid button[aria-pressed="true"]{
  background:var(--accent);border-color:var(--accent);color:#fff;
}

.cr-row{display:flex;gap:8px;margin-top:10px;}
.cr-row .btn{flex:1;padding:7px 8px;font-size:.82rem;}

/* The size of what you are about to get, large enough to be the answer. */
.cr-readout{
  margin-top:4px;padding:14px;border-radius:var(--radius-sm);
  background:var(--surface-2);border:1px solid var(--line);
}
.cr-readout .ro-size{
  font-family:var(--f-mono);font-size:1.15rem;color:var(--ink-1);line-height:1.3;
}
.cr-readout .ro-sub{color:var(--ink-3);font-size:.9rem;}
.cr-readout .ro-note{
  font-size:.8rem;color:var(--ink-3);margin:6px 0 0;line-height:1.5;
}

.cr-save{
  display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;
  margin-top:18px;padding-top:18px;border-top:1px solid var(--line);
}
.cr-save .opt{flex:1;min-width:200px;margin:0;}
.cr-save .btn-primary{padding:12px 22px;font-size:.95rem;}
.cr-save .btn-primary svg{width:17px;height:17px;}