/* ==========================================================================
   Image Tools · editor styles                                 Version No.: 1
   Used by every editing template (imgt-edit.php). Loaded after imgt-core.css and imgt-gallery.css, so it only holds what the shared
   files do not: the preview with its drawing layer, the options on the right, and the download menu.
   Colours, fonts, radii, buttons, chips, swatch row, (i) tips and the three panes all come from imgt-core.css and imgt-gallery.css.
   ========================================================================== */
.edt-tool{
  /* The preview is as big as the middle pane allows. On a computer the pane is a fixed height, so the preview fills what is left
     under the photo row; on small screens it is limited by the screen height instead. */
  --edt-stage-h:clamp(260px, calc(100vh - 380px), 700px);
  --edt-slider-track:var(--imgt-line);
  --edt-slider-thumb:var(--imgt-accent);
  --edt-slider-ring:#ffffff;
  width:100%;
}
@media (max-width:899px){
  .edt-tool{ display:flex; flex-direction:column; }
  .edt-tool > .imgt-pane-left,
  .edt-tool > .imgt-pane-right{ border-top:1px solid var(--imgt-line); }
}
@media (min-width:900px){
  .edt-stage-col{ --edt-stage-h:var(--imgt-stage-h); }
}
/* Never show the browser's own focus ring on a control. Keyboard users get the solid ring from imgt-core.css. */
.edt-tool input,
.edt-tool select,
.edt-tool textarea{ outline:none !important; }
.edt-tool input::-moz-focus-inner,
.edt-tool button::-moz-focus-inner{ border:0 !important; }

/* Middle pane: the preview and the photos. */
.edt-stage-col{ display:flex; flex-direction:column; align-items:center; gap:20px; }
.edt-single{ display:flex; flex-direction:column; align-items:center; gap:20px; width:100%; }
.edt-stage-col.imgt-pane-mid .imgt-toolbar{ position:static; }
.edt-single[hidden]{ display:none; }
.edt-stage{
  position:relative; margin:20px 0;
  width:min(calc(100% - 2 * (40px - var(--imgt-pane-pad))), calc(var(--edt-stage-h) * var(--edt-ar, 1.3333))); aspect-ratio:var(--edt-ar, 1.3333);
  border:1px solid var(--imgt-line); border-radius:6px; touch-action:pan-y; cursor:pointer; background:var(--imgt-paper);
}
.edt-stage.edt-has-image{ cursor:default; }
.edt-stage.edt-draw{ cursor:crosshair; touch-action:none; }
.edt-stage.edt-pick{ cursor:copy; touch-action:none; }
.edt-stage.edt-move{ cursor:move; }
.edt-stage:focus-visible{ outline:3px solid var(--imgt-focus); outline-offset:3px; }
.edt-stage canvas{ width:100%; height:100%; display:block; background:#e3e3e3;
  background-image:linear-gradient(45deg,#dfe4ea 25%,transparent 25%),linear-gradient(-45deg,#dfe4ea 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#dfe4ea 75%),linear-gradient(-45deg,transparent 75%,#dfe4ea 75%);
  background-size:16px 16px; background-position:0 0,0 8px,8px -8px,-8px 0; }
/* The drawing layer above the photo holds the selection box and handles. It is never saved. */
.edt-stage canvas.edt-over{ position:absolute; inset:0; background:none; pointer-events:none; }
.edt-stage.edt-has-image .edt-drop-hint{ display:none; }
.edt-drop-hint{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center; padding:20px; color:var(--imgt-muted); pointer-events:none; }
.edt-drop-hint svg{ color:var(--imgt-accent); margin-bottom:4px; }
.edt-drop-hint p{ margin:0; font-size:0.92rem; }
.edt-drop-hint-inner{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:14px 18px; }
.edt-stage.edt-just-loaded{ animation:edtSettle 0.4s ease; }
@keyframes edtSettle{ from{ transform:scale(0.96); opacity:0.6; } to{ transform:scale(1); opacity:1; } }
.edt-pip{ position:fixed; right:16px; bottom:86px; width:120px; aspect-ratio:4 / 3; overflow:hidden; border-radius:6px; background:var(--imgt-paper);
  filter:drop-shadow(0 4px 14px rgba(0,0,0,0.28)); opacity:0; pointer-events:none; cursor:pointer; transform:scale(0.85);
  transition:opacity 0.2s ease, transform 0.2s ease; z-index:60; }
.edt-pip canvas{ width:100%; height:100%; display:block; }
.edt-stage.edt-has-image ~ .edt-pip.edt-pip-visible{ opacity:1; transform:scale(1); pointer-events:auto; }
[data-wlcustom-dm="dark"] .edt-pip{ filter:drop-shadow(0 4px 14px rgba(0,0,0,0.55)); }
[data-wlcustom-dm="dark"] .edt-stage canvas{ background:#212a3d; }

/* Right pane: the tool's options. */
.imgt-pane-right{ display:flex; flex-direction:column; gap:24px; }
.edt-controls{ display:flex; flex-direction:column; gap:20px; }
.edt-section{ display:flex; flex-direction:column; gap:16px; }
.edt-control{ display:flex; flex-direction:column; }
.edt-control[hidden]{ display:none; }
.edt-heading{ margin:0; font-family:var(--imgt-font-body); font-size:22px; font-weight:800; line-height:1.3; color:var(--imgt-ink); }
.edt-note, .edt-hint{ margin:0; font-family:var(--imgt-font-body); font-size:0.82rem; font-weight:400; color:var(--imgt-muted); }
.edt-control-label{ margin-bottom:12px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.edt-label-group{ display:inline-flex; align-items:center; gap:6px; }
.edt-sub, .edt-menu-label{ margin:0; font-family:var(--imgt-font-body); font-size:0.9rem; font-weight:600; line-height:1.3; color:var(--imgt-ink); }
.edt-value-wrap{ display:inline-flex; align-items:center; gap:4px; }
.edt-unit{ font-size:0.78rem; font-weight:600; color:var(--imgt-muted); }
.edt-value-input{
  width:58px; padding:2px 4px; border:1px solid var(--imgt-line); border-radius:6px;
  background:var(--imgt-surface); color:var(--imgt-ink); font-family:var(--imgt-font-body);
  font-size:0.78rem; font-weight:600; font-variant-numeric:tabular-nums; text-align:center;
  -moz-appearance:textfield; appearance:textfield;
}
.edt-value-input::-webkit-outer-spin-button, .edt-value-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.edt-limit{ margin:6px 0 0; color:#c1121f; font-size:0.76rem; font-weight:600; display:inline-block; }
.edt-limit[hidden]{ display:none; }
[data-wlcustom-dm="dark"] .edt-limit{ color:#ff6b6b; }

.edt-range{
  width:100%; -webkit-appearance:none; appearance:none; height:6px; margin:0;
  border-radius:var(--imgt-radius-pill); background:var(--edt-slider-track);
}
.edt-range::-webkit-slider-thumb{
  -webkit-appearance:none; width:24px; height:24px; border-radius:50%;
  background:var(--edt-slider-thumb); border:3px solid var(--edt-slider-ring); box-shadow:0 0 0 1px var(--edt-slider-thumb); cursor:pointer;
}
.edt-range::-moz-range-thumb{
  width:24px; height:24px; border-radius:50%;
  background:var(--edt-slider-thumb); border:3px solid var(--edt-slider-ring); box-shadow:0 0 0 1px var(--edt-slider-thumb); cursor:pointer;
}
.edt-range:focus-visible::-webkit-slider-thumb{ outline:3px solid var(--imgt-focus); outline-offset:2px; }
.edt-range:focus-visible::-moz-range-thumb{ outline:3px solid var(--imgt-focus); outline-offset:2px; }
.edt-range:disabled{ opacity:0.4; }
.edt-select, .edt-text{
  width:100%; padding:10px 12px; border:1px solid var(--imgt-line); border-radius:8px;
  background:var(--imgt-surface); color:var(--imgt-ink); font-family:var(--imgt-font-body); font-size:0.92rem;
}
.edt-select{ cursor:pointer; }
.edt-text{ resize:vertical; }
@media (max-width:899px){ .edt-text, .edt-select, .edt-value-input{ font-size:16px; } }
.edt-chips .imgt-chip{ padding:8px 12px; font-size:13px; gap:6px; align-items:center; border-radius:6px; }
.edt-chips .imgt-chip svg{ width:16px; height:16px; flex:none; }
.edt-swatch-btn{
  -webkit-appearance:none; appearance:none; padding:0; border:1px solid var(--imgt-line); border-radius:8px;
  background-color:transparent; background-image:linear-gradient(var(--edt-swatch), var(--edt-swatch)); cursor:pointer;
  transition:transform 0.1s ease;
}
.edt-swatch-btn:hover{ transform:scale(1.06); }
.edt-swatch-btn:active{ transform:scale(0.96); }
.edt-swatch-btn[aria-pressed="true"]{ box-shadow:0 0 0 2px var(--imgt-paper), 0 0 0 4px var(--imgt-accent); }
.edt-text-btn, .edt-text-action{
  display:inline-flex; align-items:center; margin:0; padding:4px 2px; background:none; border:none; border-radius:0;
  color:var(--imgt-ink); font-family:inherit; font-weight:700; font-size:0.95rem; line-height:normal;
  text-decoration:underline; text-underline-offset:2px; cursor:pointer;
}
.edt-text-btn{ font-size:0.82rem; }
.edt-text-btn[aria-pressed="true"]{ color:var(--imgt-accent); }
.edt-text-btn:hover, .edt-text-action:hover{ color:var(--imgt-accent-dark); }
.edt-text-action:disabled{ opacity:0.45; cursor:not-allowed; }
.edt-action-row{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; }
.edt-status{ min-height:1.2em; font-size:0.85rem; color:var(--imgt-muted); margin:0; }
.edt-file{ display:flex; align-items:center; gap:10px; min-width:0; }
.edt-file-btn{ flex:none; padding:8px 14px; border:1px solid var(--imgt-line); border-radius:8px; background:var(--imgt-surface); color:var(--imgt-ink); font-size:0.88rem; font-weight:600; }
.edt-file-btn:hover{ border-color:var(--imgt-accent); }
.edt-file-name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:0.85rem; color:var(--imgt-muted); }

/* Results of a tool that reads the photo (colour picker, palette, metadata, text output). */
.edt-probe{ display:flex; flex-direction:column; gap:14px; }
.edt-probe:empty{ display:none; }
.edt-probe-box{ width:100%; min-height:120px; max-height:260px; padding:10px 12px; border:1px solid var(--imgt-line); border-radius:8px; background:var(--imgt-surface); color:var(--imgt-ink); font:12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; resize:vertical; }
.edt-probe-table{ width:100%; border-collapse:collapse; font-size:0.85rem; }
.edt-probe-table th{ text-align:left; padding:6px 8px 6px 0; font-weight:600; color:var(--imgt-muted); white-space:nowrap; vertical-align:top; }
.edt-probe-table td{ padding:6px 0; word-break:break-word; }
.edt-probe-table tr + tr{ border-top:1px solid var(--imgt-line); }
.edt-probe-list{ display:flex; flex-direction:column; gap:8px; }
.edt-probe-row{ display:flex; align-items:center; gap:10px; padding:6px 10px 6px 6px; border:1px solid var(--imgt-line); border-radius:8px; background:var(--imgt-surface); font-size:0.88rem; font-weight:600; font-variant-numeric:tabular-nums; cursor:pointer; text-align:left; color:var(--imgt-ink); }
.edt-probe-row:hover{ border-color:var(--imgt-accent); }
.edt-probe-dot{ flex:none; width:28px; height:28px; border-radius:6px; border:1px solid var(--imgt-line); }
.edt-probe-row small{ margin-left:auto; color:var(--imgt-muted); font-weight:500; }

/* Download button and its menu */
.edt-download-wrap{ position:relative; display:flex; flex-direction:column; align-items:stretch; gap:10px; }
.edt-download-btn{ display:inline-flex; align-items:center; justify-content:center; }
.edt-download-caret{ margin-left:8px; transition:transform 0.15s ease; }
.edt-download-wrap.edt-download-open .edt-download-caret{ transform:rotate(180deg); }
.edt-download-menu{
  position:absolute; bottom:calc(100% + 8px); left:0; right:0; max-height:min(70vh, 460px); overflow-y:auto;
  background:var(--imgt-surface); border:1px solid var(--imgt-line); border-radius:var(--imgt-radius-sm); box-shadow:0 4px 14px rgba(0,0,0,0.28);
  padding:6px; display:flex; flex-direction:column; gap:2px; z-index:20;
}
.edt-download-menu[hidden]{ display:none; }
[data-wlcustom-dm="dark"] .edt-download-menu{ box-shadow:0 4px 14px rgba(0,0,0,0.55); }
.edt-format-group{ display:flex; flex-wrap:wrap; gap:6px; padding:2px 4px 6px; }
.edt-format-btn{
  flex:1 1 56px; margin:0; padding:8px 10px; border:1px solid var(--imgt-line); border-radius:calc(var(--imgt-radius-sm) - 4px);
  background:var(--imgt-surface); color:var(--imgt-ink); font-family:var(--imgt-font-body); font-size:0.82rem; font-weight:600; cursor:pointer;
}
.edt-format-btn:hover{ border-color:var(--imgt-ink); }
.edt-format-btn[aria-pressed="true"]{ background:var(--imgt-accent); border-color:var(--imgt-accent); color:#fff; }
.edt-format-btn:disabled{ opacity:0.4; cursor:not-allowed; }
.edt-format-hint{ padding:0 4px 8px; text-align:center; }
.edt-menu-row{ padding:6px 4px 2px; display:flex; flex-direction:column; gap:8px; }
.edt-menu-row .edt-control-label{ margin-bottom:0; }
.edt-menu-label{ font-size:0.78rem; color:var(--imgt-muted); }
.edt-menu-value{ font-size:0.78rem; font-weight:600; color:var(--imgt-muted); font-variant-numeric:tabular-nums; }
.edt-download-option{ background:none; border:0; border-radius:calc(var(--imgt-radius-sm) - 4px); padding:9px 12px; font-family:var(--imgt-font-body);
  font-size:0.88rem; font-weight:600; color:var(--imgt-ink); text-align:left; cursor:pointer; }
.edt-download-option:hover, .edt-download-option:focus-visible{ background:var(--imgt-paper); outline:none; }
.edt-download-option.edt-download-option-last{ display:flex; justify-content:space-between; align-items:center; }
.edt-download-option.edt-download-option-last::after{ content:'✓'; color:var(--imgt-accent); }
.edt-download-divider{ height:1px; background:var(--imgt-line); margin:4px 2px; }
.edt-download-custom{ padding:6px 8px 4px; }
.edt-download-custom-label{ font-family:var(--imgt-font-body); font-size:0.78rem; font-weight:600; color:var(--imgt-muted); white-space:nowrap; }
.edt-download-custom-row{ display:flex; align-items:center; gap:8px; }
.edt-download-custom-input{ width:88px; padding:6px 8px; border:1px solid var(--imgt-line); border-radius:6px; background:var(--imgt-surface);
  color:var(--imgt-ink); font-family:var(--imgt-font-body); font-size:0.85rem; font-weight:600; font-variant-numeric:tabular-nums; text-align:center; -moz-appearance:textfield; }
.edt-download-custom-input::-webkit-outer-spin-button, .edt-download-custom-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.edt-download-custom-go{ background:var(--imgt-accent); color:#fff; border:0; border-radius:6px; padding:7px 14px; font-family:var(--imgt-font-body); font-size:0.82rem; font-weight:600; cursor:pointer; }
.edt-download-custom-go:hover{ background:var(--imgt-accent-dark); }