/* Claude update below (mini image editor: crop, rotate, flip) */

/* A class that sets display beats the browser's own [hidden] rule, which is
   only a plain `display: none` on the element. Two things here are shown and
   hidden by that attribute and both set `display: flex`, so both were showing
   permanently: the busy overlay covered the picture and swallowed every click
   on it, and the "use it everywhere" row appeared with an empty label
   wherever it did not belong. This one rule covers anything added later. */
#imageEditDialog [hidden] { display: none !important; }

/* The floors matter: a viewport unit that resolves to nothing, which a very
   short window or an embedded browser can produce, would otherwise collapse
   the stage to a couple of pixels and leave the editor unusable with no sign
   of what went wrong. */
#imageEditDialog {
  width: min(980px, max(320px, 94vw));
  max-width: none;
}

#imageEditDialog .imgEditBar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 0 12px;
  border-bottom: 1px solid var(--border);
}

#imageEditDialog .imgEditBar select {
  min-width: 170px;
}

/* Pushes everything after it to the right hand end, so the shape picker sits
   with the picture and undo sits with the other controls. */
#imageEditDialog .imgEditBarGap { flex: 1 1 auto; }

/* The stage is a fixed height box rather than one that grows with the
   picture, so the dialog does not jump about between a tall photo and a wide
   banner, and the buttons stay where the user last saw them. */
#imageEditDialog .imgEditStage {
  position: relative;
  height: min(52vh, 460px);
  min-height: 260px;
  margin: 12px 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  /* A transparent PNG has to read as transparent, or someone cropping a logo
     is looking at a white background that is not there. */
  background-color: #fbfbfc;
  background-image:
    linear-gradient(45deg, #eceef1 25%, transparent 25%),
    linear-gradient(-45deg, #eceef1 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #eceef1 75%),
    linear-gradient(-45deg, transparent 75%, #eceef1 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}

#imageEditDialog canvas {
  display: block;
  width: 100%;
  height: 100%;
  /* Without this a drag on a touchscreen scrolls the page instead of moving
     the crop box. */
  touch-action: none;
}

/* Claude update below (background removal). Folded away behind its own
   checkbox: most edits are a crop, and four more controls on top of the
   toolbar would make the dialog read as harder than it is. */
#imageEditDialog .imgEditBg {
  margin: 4px 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
}

#imageEditDialog .imgEditBgToggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  margin: 0;
}

#imageEditDialog .imgEditBg input[type="checkbox"],
#imageEditDialog .imgEditBg input[type="radio"] {
  width: auto;
  margin: 0;
}

#imageEditDialog #imgEditBgControls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

#imageEditDialog .imgEditBgRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  margin: 0;
}

#imageEditDialog .imgEditBgRow label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

#imageEditDialog .imgEditBgLabel {
  min-width: 72px;
}

#imageEditDialog #imgEditBgTol {
  flex: 1 1 140px;
  width: auto;
  margin: 0;
}

#imageEditDialog #imgEditBgTolOut {
  min-width: 2.5em;
  font-variant-numeric: tabular-nums;
}

/* A button rather than an <input type="color">, because a native color input
   has no alpha and the whole point here is being able to replace a background
   with nothing. The checkerboard is what makes that readable. */
#imageEditDialog .imgEditFillBtn {
  width: 46px;
  height: 28px;
  padding: 2px;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #ddd 25%, transparent 25%),
    linear-gradient(-45deg, #ddd 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ddd 75%),
    linear-gradient(-45deg, transparent 75%, #ddd 75%);
  background-size: 10px 10px;
  background-position: 0 0, 0 5px, 5px -5px, -5px 0;
}

#imageEditDialog .imgEditFillBtn span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 2px;
}

/* The color being matched. A button, not a swatch to look at: clicking it
   opens the picker, which is the other way to say which color to remove when
   the eyedropper is awkward. */
#imageEditDialog .imgEditSwatch {
  width: 28px;
  height: 28px;
  padding: 0;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  display: inline-block;
  background-color: #fff;
  cursor: pointer;
}

#imageEditDialog .imgEditBgPicking {
  color: var(--accent);
  font-weight: 600;
}

#imageEditDialog .imgEditBgHint {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

#imageEditDialog .imgEditFacts {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 13px;
  color: var(--muted);
}

#imageEditDialog .imgEditFacts strong {
  color: var(--text);
  font-weight: 600;
}

/* The result is smaller than where it is going, so it will be scaled up and
   look softer. Worth saying, not worth refusing. */
#imageEditDialog .imgEditSmall strong,
#imageEditDialog .imgEditSmall { color: #8a5a00; }

#imageEditDialog .imgEditNote {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--muted);
}

#imageEditDialog .imgEditRepoint {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  font-size: 14px;
}

#imageEditDialog .imgEditRepoint input[type="checkbox"] {
  width: auto;
  margin: 0;
}

/* Indented under the checkbox it belongs to, and it names the places rather
   than counting them, because "2 places" does not tell anyone whether ticking
   this is safe. */
#imageEditDialog .imgEditRepointHint {
  margin: 4px 0 0 26px;
  font-size: 13px;
  color: var(--muted);
}

#imageEditDialog .imgEditBusy {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.75);
  font-size: 15px;
}

/* The row that opens the editor. Matches the other buttons in the file row. */
.editImageBtn[disabled] { cursor: not-allowed; }

@media (max-width: 620px) {
  #imageEditDialog .imgEditStage { height: 44vh; min-height: 220px; }
  #imageEditDialog .imgEditBar select { min-width: 0; flex: 1 1 140px; }
}
/* Claude update end */