/* ---------- resize image ---------- */

.dim-row{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;}
.dim-field{display:flex;flex-direction:column;gap:5px;}
.dim-field label{font-size:.78rem;color:var(--ink-3);}
.dim-field input{
  width:104px;padding:10px 12px;
  border:1px solid var(--rule-2);border-radius:var(--radius-sm);
  background:var(--surface-2);color:var(--ink);
  font-family:var(--f-mono);font-size:1rem;
}
.dim-field input:focus{outline:none;border-color:var(--accent);}
.dim-x{color:var(--ink-3);padding-bottom:11px;font-family:var(--f-mono);}
.lock-row{
  display:flex;align-items:center;gap:8px;margin-top:11px;
  font-size:.84rem;color:var(--ink-2);cursor:pointer;
}
.lock-row input{accent-color:var(--accent);width:15px;height:15px;}

/* presets say what they are for, then how big */
.preset-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
  gap:7px;margin-top:4px;
}
.preset-grid button{
  text-align:left;padding:8px 11px;cursor:pointer;
  border:1px solid var(--rule);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--ink-2);
  font-family:var(--f-ui);font-size:.83rem;line-height:1.3;
}
.preset-grid button span{
  display:block;font-family:var(--f-mono);font-size:.72rem;color:var(--ink-3);margin-top:2px;
}
.preset-grid button:hover{border-color:var(--accent);color:var(--accent);}
.preset-grid button.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);}
.preset-grid button.on span{color:var(--accent);}

/* what the shape will do, shown rather than described */
.shape-preview{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:16px 0 4px;
}
.pv-frame{
  position:relative;overflow:hidden;
  border:1px solid var(--rule-2);border-radius:3px;
  background:var(--surface-3);
}
.pv-note{
  margin:0;font-family:var(--f-mono);font-size:.74rem;color:var(--ink-3);
}

.bg-row{display:flex;align-items:center;gap:9px;margin-top:9px;}
.bg-row input[type="color"]{
  width:38px;height:30px;padding:0;border:1px solid var(--rule-2);
  border-radius:var(--radius-sm);background:none;cursor:pointer;
}

/* ---------- crop stage ----------
   The frame stays put and the picture moves behind it, which is how a phone
   does it and therefore what a thumb expects. */

.crop-stage{margin-top:14px;}
.crop-canvas-wrap{
  display:flex;justify-content:center;
  background:var(--surface-2);border-radius:var(--radius-sm);
  padding:12px;
}
#cropCanvas{
  display:block;border-radius:3px;
  cursor:grab;touch-action:none;   /* or the browser pans the page instead */
  max-width:100%;
}
#cropCanvas:active{cursor:grabbing;}
#cropCanvas:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

.crop-tools{
  display:flex;align-items:center;gap:12px;margin-top:12px;
}
.crop-tools label{
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);
}
.crop-tools input[type="range"]{flex:1;min-width:0;margin:0;}
.crop-tools .btn{padding:6px 12px;font-size:.82rem;white-space:nowrap;}

.crop-note{
  font-family:var(--f-mono);font-size:.76rem;color:var(--ink-3);
  margin:10px 0 0;line-height:1.5;
}
.crop-hint{font-size:.84rem;color:var(--ink-3);margin:6px 0 0;line-height:1.6;}

/* ---------- the stage ----------
   Once there is a picture, the picture is the page. The dropzone steps aside
   rather than sitting above a thumbnail in a corner, and the controls move to
   a column beside it where they read as adjustments to what you can see. */

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

.rz-main-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:10px;
}
.rz-file{
  font-weight:600;font-size:.95rem;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.rz-main-head .btn{padding:5px 11px;font-size:.8rem;white-space:nowrap;}

.rz-side .opts{display:block;}
.rz-side .opt{margin-bottom:20px;}
.rz-side .opt:last-child{margin-bottom:0;}

/* The save decisions sit under the picture, where they read as the last step
   rather than as another thing to configure before starting. */
.save-bar{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:18px;
  padding:16px 0 0;margin-top:18px;
  border-top:1px solid var(--rule);
}
.save-bar .opt{flex:1;min-width:220px;margin:0;}

/* The eight presets were a column that made the panel long for something most
   people use once. Folded away, one press from open. */
.preset-fold summary{
  cursor:pointer;font-size:.88rem;color:var(--ink-2);
  padding:9px 12px;border:1px solid var(--rule-2);border-radius:var(--radius-sm);
  list-style:none;
}
.preset-fold summary::-webkit-details-marker{display:none;}
.preset-fold summary::after{content:' ▾';color:var(--ink-3);}
.preset-fold[open] summary::after{content:' ▴';}
.preset-fold summary:hover{border-color:var(--accent);color:var(--ink);}
/* It floats over the page rather than expanding into it. An inline accordion
   pushes everything below it down the screen, which is the wrong behaviour for
   a picker somebody opens, glances at and closes -- the layout should not move
   under a decision that has not been made yet. */
.preset-fold{position:relative;}
.preset-fold[open] .preset-grid{
  position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;
  grid-template-columns:1fr;
  max-height:min(56vh,340px);overflow-y:auto;
  margin:0;padding:8px;
  background:var(--surface);
  border:1px solid var(--rule-2);border-radius:var(--radius-sm);
  box-shadow:0 12px 34px rgba(0,0,0,.3);
}

/* The download is the point of the page, so it sits with the format under the
   picture rather than below a file list somebody has to scroll to find. */
.save-bar .btn-primary{
  padding:12px 22px;font-size:1rem;white-space:nowrap;
}

/* Platform headings inside the picker. Twenty-nine sizes in a flat list is a
   wall; the same twenty-nine under the name of the app you are posting to is
   a short list you can scan. */
.preset-group{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);
  padding:12px 4px 5px;
}
.preset-group:first-child{padding-top:2px;}

/* Paging between images. A second photo used to shrink the whole editor to a
   thumbnail; now they queue up and you step through them, each keeping its own
   frame. */
.rz-nav{display:inline-flex;align-items:center;gap:6px;}

/* On the edges of the grey area, vertically centred, because that box keeps
   its size whatever shape the picture is. In the header they moved with the
   filename and with each image's proportions, so the button was somewhere
   else by the time you pressed it again. */
.crop-canvas-wrap{position:relative;}
.rz-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  display:none;place-items:center;width:40px;height:40px;
  border:1px solid var(--rule-2);border-radius:100px;
  background:var(--surface);color:var(--ink-2);cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.28);
}
.crop-canvas-wrap.has-nav .rz-arrow{display:grid;}
.rz-arrow-l{left:10px;}
.rz-arrow-r{right:10px;}
.rz-arrow:hover{border-color:var(--accent);color:var(--accent);}
.rz-arrow svg{width:18px;height:18px;}
.rz-count{
  font-family:var(--f-mono);font-size:.76rem;color:var(--ink-3);
  min-width:52px;text-align:center;
}
/* The row for whichever image is on the stage, so the list says where you are
   as well as what is queued. */
.fileitem[data-idx]{cursor:pointer;}
.fileitem.on{border-color:var(--accent);background:var(--accent-soft);}