/* ============================================================================
   image-tool.css — Image Tool (resize / reformat / compress).
   All processing happens in the browser via Canvas; nothing is uploaded.
   Tokens only, per DESIGN-CONSTITUTION.md.
   ========================================================================== */

#view-imagetool [hidden] { display: none !important; }

.it-wrap { max-width: 1180px; margin: 0 auto; padding: var(--space-6) var(--space-5) var(--space-10); }

/* ---- header ---- */
.it-head { margin-bottom: var(--space-6); }
.it-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--purple-bright);
  background: rgba(124, 92, 252, 0.10); border: 1px solid rgba(124, 92, 252, 0.28);
  border-radius: var(--radius-pill); padding: 5px 12px; margin-bottom: var(--space-4);
}
.it-eyebrow svg { width: 13px; height: 13px; }
.it-h1 {
  font-family: var(--font-heading); font-size: clamp(26px, 3vw, 34px); font-weight: 800;
  letter-spacing: -.02em; color: var(--text); margin: 0 0 var(--space-2);
}
.it-h1 em {
  font-style: normal;
  background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.it-sub { font-size: 14px; line-height: 1.6; color: var(--text-3); margin: 0; max-width: 640px; }

/* ---- dropzone ---- */
.it-drop {
  border: 1.5px dashed var(--border-strong); border-radius: var(--radius-lg);
  background: var(--card); padding: var(--space-10) var(--space-6);
  text-align: center; cursor: pointer; transition: border-color .18s, background .18s;
}
.it-drop:hover, .it-drop.is-over { border-color: var(--purple); background: rgba(124, 92, 252, 0.06); }
.it-drop-ic {
  width: 54px; height: 54px; margin: 0 auto var(--space-4); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  background: rgba(124, 92, 252, 0.12); border: 1px solid rgba(124, 92, 252, 0.26); color: var(--purple-bright);
}
.it-drop-ic svg { width: 24px; height: 24px; }
.it-drop h3 { font-family: var(--font-heading); font-size: 17px; font-weight: 700; color: var(--text); margin: 0 0 6px; }
.it-drop p { font-size: 13px; color: var(--muted); margin: 0; }
.it-drop-btn {
  display: inline-block; margin-top: var(--space-4);
  background: var(--gradient); color: #fff; border: 0; border-radius: var(--radius-sm);
  font-family: var(--font); font-size: 13px; font-weight: 700; padding: 10px 20px; cursor: pointer;
}

/* ---- workspace ---- */
.it-grid { display: grid; grid-template-columns: 1fr 330px; gap: var(--space-5); align-items: start; }
@media (max-width: 1000px) { .it-grid { grid-template-columns: 1fr; } }

.it-panel {
  background: var(--card); border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg); overflow: hidden;
}
.it-panel-h {
  display: flex; align-items: center; gap: 8px; padding: 12px var(--space-5);
  border-bottom: 1px solid var(--hairline); background: var(--bg-2);
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.it-panel-h svg { width: 14px; height: 14px; color: var(--purple-bright); }

/* preview */
.it-stage {
  display: flex; align-items: center; justify-content: center;
  min-height: 340px; padding: var(--space-5); background: var(--bg-2);
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.03) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.03) 75%),
    linear-gradient(45deg, rgba(255,255,255,.03) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.03) 75%);
  background-size: 18px 18px; background-position: 0 0, 9px 9px;
}
.it-stage img { max-width: 100%; max-height: 460px; display: block; border-radius: var(--radius-xs); }

/* controls */
.it-field { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--hairline); }
.it-field:last-child { border-bottom: 0; }
.it-label {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 9px;
}
.it-dims { display: flex; align-items: center; gap: 8px; }
.it-num {
  flex: 1; min-width: 0; background: var(--bg-2); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); color: var(--text); font-family: var(--font-mono);
  font-size: 13px; padding: 9px 11px;
}
.it-num:focus { outline: none; border-color: var(--purple); }
.it-x { color: var(--muted-soft); font-size: 12px; }
.it-lock {
  display: flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  flex: 0 0 auto; cursor: pointer; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: var(--bg-2); color: var(--muted);
}
.it-lock svg { width: 15px; height: 15px; }
.it-lock.on { color: var(--purple-bright); border-color: rgba(124, 92, 252, 0.45); background: rgba(124, 92, 252, 0.12); }

.it-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.it-preset {
  cursor: pointer; font-family: var(--font); font-size: 11.5px; font-weight: 600;
  color: var(--text-3); background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill); padding: 5px 11px;
}
.it-preset:hover { color: var(--text); border-color: var(--purple); }

.it-segs { display: flex; gap: 4px; background: var(--bg-2); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 3px; }
.it-seg {
  flex: 1; cursor: pointer; text-align: center; font-family: var(--font);
  font-size: 12px; font-weight: 700; color: var(--muted); background: none; border: 0;
  border-radius: var(--radius-xs); padding: 7px 4px;
}
.it-seg.on { color: #fff; background: var(--gradient); }

.it-range { width: 100%; accent-color: var(--purple); }
.it-rangerow { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.it-rangeval { font-family: var(--font-mono); font-size: 12px; color: var(--text-2); }

/* stats */
.it-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hairline); }
.it-stat { background: var(--panel); padding: var(--space-4) var(--space-5); }
.it-stat .k {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 5px;
}
.it-stat .v { font-family: var(--font-mono); font-size: 15px; font-weight: 800; color: var(--text); }
.it-stat .v.good { color: var(--green); }

.it-actions { display: flex; gap: 8px; padding: var(--space-4) var(--space-5); }
.it-dl {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--gradient); color: #fff; border: 0; border-radius: var(--radius-sm);
  font-family: var(--font); font-size: 13px; font-weight: 700; padding: 11px 16px; cursor: pointer;
}
.it-dl svg { width: 15px; height: 15px; }
.it-ghost {
  cursor: pointer; font-family: var(--font); font-size: 12.5px; font-weight: 700;
  color: var(--text-3); background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 11px 15px;
}
.it-ghost:hover { color: var(--text); border-color: var(--purple); }

.it-err {
  margin-top: var(--space-4); padding: 11px var(--space-4); border-radius: var(--radius-sm);
  background: rgba(245, 101, 101, 0.10); border: 1px solid rgba(245, 101, 101, 0.32);
  color: var(--red); font-size: 12.5px;
}

/* ============================================================================
   Motion + crop
   ========================================================================== */

/* ---- aspect lock: the shackle springs open and the whole key bumps -------- */
.it-lock { position: relative; overflow: visible; transition: color .2s, border-color .2s, background .2s; }
.it-lock svg { overflow: visible; }
.it-lock .it-lock-shackle {
  /* pivot at the right leg so the shackle swings open like a real padlock */
  transform-origin: 17px 11px;
  transition: transform .42s cubic-bezier(.34, 1.56, .64, 1);
}
.it-lock:not(.on) .it-lock-shackle { transform: translate(1px, -2.5px) rotate(-24deg); }
.it-lock .it-lock-body { transition: transform .42s cubic-bezier(.34, 1.56, .64, 1); }
.it-lock.bump svg { animation: it-bump .42s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes it-bump {
  0% { transform: scale(1); }
  35% { transform: scale(.86) translateY(1px); }
  70% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
/* ripple that fires on each toggle */
.it-lock-ring {
  position: absolute; inset: -1px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--purple-bright); opacity: 0; pointer-events: none;
}
.it-lock.bump .it-lock-ring { animation: it-ring .5s ease-out; }
@keyframes it-ring {
  0% { opacity: .85; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.5); }
}

/* ---- size readout: value tweens, then flashes ---------------------------- */
.it-stat .v { transition: color .25s; }
.it-stat .v.flash { animation: it-flash .5s ease-out; }
@keyframes it-flash {
  0% { transform: scale(1); }
  30% { transform: scale(1.09); }
  100% { transform: scale(1); }
}
.it-stat .v { display: inline-block; transform-origin: left center; }

/* savings bar — width animates as the encode settles */
.it-savings {
  display: flex; align-items: center; gap: var(--space-4);
  padding: 12px var(--space-5); border-top: 1px solid var(--hairline); background: var(--panel);
}
.it-bar {
  position: relative; flex: 1; height: 7px; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.07); overflow: hidden;
}
.it-bar-fill {
  position: absolute; inset: 0 auto 0 0; width: 0;
  border-radius: var(--radius-pill); background: var(--gradient);
  transition: width .5s cubic-bezier(.16, 1, .3, 1), background .3s;
}
.it-bar-fill.good { background: linear-gradient(90deg, var(--green), var(--cyan)); }
.it-save-pct {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
  color: var(--muted); white-space: nowrap; min-width: 86px; text-align: right;
}
.it-save-pct.good { color: var(--green); }

/* preview swaps size smoothly instead of snapping */
.it-canvas { position: relative; display: inline-block; line-height: 0; }
.it-canvas img { transition: width .35s cubic-bezier(.16, 1, .3, 1), height .35s cubic-bezier(.16, 1, .3, 1); }

/* ---- crop ---------------------------------------------------------------- */
.it-cropbtn {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-family: var(--font); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-3); background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill); padding: 5px 12px;
  transition: color .18s, border-color .18s, background .18s;
}
.it-cropbtn svg { width: 13px; height: 13px; }
.it-cropbtn:hover { color: var(--text); border-color: var(--purple); }
.it-cropbtn.on { color: #fff; background: var(--gradient); border-color: transparent; }

.it-cropbox {
  position: absolute; cursor: move;
  outline: 9999px solid rgba(5, 2, 14, 0.62);
  box-shadow: 0 0 0 1.5px var(--purple-bright);
  animation: it-cropin .28s cubic-bezier(.16, 1, .3, 1);
}
@keyframes it-cropin { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: scale(1); } }
/* rule-of-thirds guides */
.it-cropbox::before, .it-cropbox::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
}
.it-cropbox::before {
  background:
    linear-gradient(to right, transparent 33.33%, rgba(255,255,255,.28) 33.33%, rgba(255,255,255,.28) calc(33.33% + 1px), transparent calc(33.33% + 1px)),
    linear-gradient(to right, transparent 66.66%, rgba(255,255,255,.28) 66.66%, rgba(255,255,255,.28) calc(66.66% + 1px), transparent calc(66.66% + 1px));
}
.it-cropbox::after {
  background:
    linear-gradient(to bottom, transparent 33.33%, rgba(255,255,255,.28) 33.33%, rgba(255,255,255,.28) calc(33.33% + 1px), transparent calc(33.33% + 1px)),
    linear-gradient(to bottom, transparent 66.66%, rgba(255,255,255,.28) 66.66%, rgba(255,255,255,.28) calc(66.66% + 1px), transparent calc(66.66% + 1px));
}
.it-ch {
  position: absolute; width: 12px; height: 12px; background: var(--purple-bright);
  border: 2px solid var(--panel); border-radius: 50%; z-index: 2;
  transition: transform .15s;
}
.it-ch:hover { transform: scale(1.35); }
.it-ch[data-h="nw"] { top: -6px; left: -6px; cursor: nwse-resize; }
.it-ch[data-h="n"]  { top: -6px; left: 50%; margin-left: -6px; cursor: ns-resize; }
.it-ch[data-h="ne"] { top: -6px; right: -6px; cursor: nesw-resize; }
.it-ch[data-h="w"]  { top: 50%; left: -6px; margin-top: -6px; cursor: ew-resize; }
.it-ch[data-h="e"]  { top: 50%; right: -6px; margin-top: -6px; cursor: ew-resize; }
.it-ch[data-h="sw"] { bottom: -6px; left: -6px; cursor: nesw-resize; }
.it-ch[data-h="s"]  { bottom: -6px; left: 50%; margin-left: -6px; cursor: ns-resize; }
.it-ch[data-h="se"] { bottom: -6px; right: -6px; cursor: nwse-resize; }

.it-cropbar {
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  padding: 12px var(--space-5); border-top: 1px solid var(--hairline); background: var(--bg-2);
}
.it-crop-aspects { display: flex; gap: 6px; flex-wrap: wrap; }
.it-crop-acts { display: flex; gap: 8px; margin-left: auto; }
.it-preset.on { color: #fff; background: var(--gradient); border-color: transparent; }
.it-dl-sm { flex: 0 0 auto; padding: 8px 16px; font-size: 12.5px; }

@media (prefers-reduced-motion: reduce) {
  .it-lock .it-lock-shackle, .it-lock .it-lock-body, .it-canvas img,
  .it-bar-fill, .it-lock.bump svg, .it-lock.bump .it-lock-ring, .it-cropbox { animation: none !important; transition: none !important; }
}

/* ============================================================================
   Compact settings panel — tighter rhythm, one consistent label/value row.
   ========================================================================== */
.it-field { padding: 13px var(--space-5); }
.it-rangerow { margin-bottom: 8px; min-height: 16px; }
.it-label { margin-bottom: 0; font-size: 10.5px; letter-spacing: .1em; }
.it-rangeval { font-size: 11.5px; font-weight: 700; color: var(--purple-bright); }

/* size slider sits above the numeric inputs and drives them */
.it-field .it-range { margin-bottom: 10px; }
.it-range {
  -webkit-appearance: none; appearance: none; height: 4px; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.10); outline: none; cursor: pointer;
}
.it-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border-radius: 50%;
  background: var(--purple-bright); border: 2px solid var(--panel);
  box-shadow: 0 2px 8px rgba(124, 92, 252, .55); cursor: pointer;
  transition: transform .15s;
}
.it-range::-webkit-slider-thumb:hover { transform: scale(1.18); }
.it-range::-moz-range-thumb {
  width: 13px; height: 13px; border-radius: 50%; background: var(--purple-bright);
  border: 2px solid var(--panel); cursor: pointer;
}

.it-num { padding: 8px 10px; font-size: 12.5px; }
.it-lock { width: 32px; height: 32px; }
.it-dims { gap: 6px; }

.it-presets { margin-top: 9px; gap: 5px; }
.it-preset { font-size: 11px; padding: 4px 10px; }

.it-segs { padding: 2px; }
.it-seg { padding: 6px 4px; font-size: 11.5px; }

.it-actions { padding: 13px var(--space-5); }
.it-dl { padding: 10px 16px; font-size: 12.5px; }
.it-ghost { padding: 10px 14px; font-size: 12px; }

/* ============================================================================
   Crop overlay containment.
   The dimming is a huge outline on the crop box; without clipping it paints
   across the whole panel and buries the Apply/Cancel bar. Clip it to the
   stage, and keep the action bar above it.
   ========================================================================== */
.it-stage { overflow: hidden; position: relative; }
.it-cropbox { z-index: 2; }
.it-cropbar { position: relative; z-index: 3; }

/* Make the commit action unmistakable while cropping. */
.it-cropbar { border-top: 1px solid rgba(124, 92, 252, 0.35); }
.it-crop-hint {
  font-size: 11.5px; color: var(--muted); margin-right: auto;
}
.it-crop-hint b { color: var(--text-2); font-family: var(--font-mono); font-weight: 700; }

/* ============================================================================
   Sliders — visible filled track, larger grabbable thumb.
   --fill is set from JS so the coloured portion tracks the value.
   ========================================================================== */
.it-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: var(--radius-pill);
  cursor: pointer; outline: none; border: 0;
  background: linear-gradient(90deg,
    var(--purple) 0%, var(--magenta) var(--fill, 50%),
    rgba(255, 255, 255, 0.12) var(--fill, 50%), rgba(255, 255, 255, 0.12) 100%);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35);
}
.it-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 3px solid var(--purple-bright);
  box-shadow: 0 2px 10px rgba(124, 92, 252, .6);
  cursor: grab; transition: transform .12s ease, box-shadow .12s ease;
}
.it-range::-webkit-slider-thumb:hover { transform: scale(1.15); }
.it-range:active::-webkit-slider-thumb {
  transform: scale(1.25); cursor: grabbing;
  box-shadow: 0 3px 16px rgba(124, 92, 252, .85);
}
.it-range::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%;
  background: #fff; border: 3px solid var(--purple-bright); cursor: grab;
  box-shadow: 0 2px 10px rgba(124, 92, 252, .6);
}
.it-range::-moz-range-track { background: transparent; }

/* larger readout so the value is easy to read while dragging */
.it-rangeval {
  font-size: 12.5px; font-weight: 800; color: var(--purple-bright);
  font-family: var(--font-mono);
}

/* While a slider is being dragged the preview is resized every frame, so any
   transition would read as lag. Killed during drag, restored after. */
.it-canvas img.no-anim { transition: none !important; }
.it-canvas img { transition: width .16s ease-out, height .16s ease-out; }

/* ============================================================================
   Size block — PowerToys Image Resizer layout.

   The width/height pair is a BOUNDING BOX, not the output size: the fit mode
   decides how the picture maps into it, so the real output dimensions are
   derived and shown in the header readout. That is why the old scale slider
   and preset chips are gone — they set the output directly, which contradicts
   "fits within".
   ========================================================================== */

/* ---- flyout menus (preset / fit / unit) ---------------------------------- */
.it-menu { position: relative; }
.it-menu-btn {
  display: flex; align-items: center; gap: 6px; width: 100%; cursor: pointer;
  background: var(--bg-2); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); color: var(--text);
  font-family: var(--font); font-size: 12.5px; font-weight: 600;
  padding: 8px 10px; text-align: left;
  transition: border-color .16s;
}
.it-menu-btn:hover, .it-menu-btn[aria-expanded="true"] { border-color: var(--purple); }
.it-menu-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.it-menu-caret { width: 13px; height: 13px; flex: 0 0 auto; color: var(--muted); transition: transform .18s; }
.it-menu-btn[aria-expanded="true"] .it-menu-caret { transform: rotate(180deg); }
/* the preset picker is the headline control, so it reads a size up */
.it-menu-btn.is-lead { font-size: 14.5px; font-weight: 700; padding: 12px 13px; }

/* The panel clips its children so the preview stage keeps the rounded corner,
   which would slice every dropdown in half. The settings panel opts out and
   rounds its own header instead. */
.it-grid > .it-panel:last-child { overflow: visible; }
.it-grid > .it-panel:last-child > .it-panel-h { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }

.it-menu-pop {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 5px);
  background: var(--panel); border: 1px solid var(--border-strong);
  border-radius: var(--radius); padding: var(--space-1);
  box-shadow: 0 18px 44px rgba(5, 2, 14, 0.55);
  animation: it-pop .16s cubic-bezier(.16, 1, .3, 1);
}
@keyframes it-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.it-menu-item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; border-radius: var(--radius-xs);
  padding: 8px 10px; color: var(--text-2); font-family: var(--font);
}
.it-menu-item b { display: block; font-size: 12.5px; font-weight: 700; color: var(--text); }
.it-menu-item small { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); }
.it-menu-item:hover { background: rgba(124, 92, 252, 0.12); }
.it-menu-item.is-on { background: rgba(124, 92, 252, 0.16); }

/* ---- the two-by-two control grid ----------------------------------------- */
.it-ptgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.it-ptcell { display: flex; align-items: center; gap: 7px; min-width: 0; }
.it-ptic { flex: 0 0 auto; display: flex; color: var(--muted-soft); }
.it-ptic svg { width: 15px; height: 15px; }
.it-ptcell > .it-menu, .it-ptcell > .it-spin { flex: 1; min-width: 0; }
/* A grid cell is only ~120px, too narrow for "Centimeters" or the fit
   descriptions, so these popups break out of their cell. The right-hand column
   opens leftwards so it cannot spill past the panel edge. */
.it-ptcell .it-menu-pop { min-width: 190px; }
.it-ptgrid > .it-ptcell:nth-child(even) .it-menu-pop { left: auto; right: 0; }

/* ---- number spinner ------------------------------------------------------ */
.it-spin { position: relative; display: flex; }
.it-spin .it-num { width: 100%; padding-right: 24px; appearance: textfield; -moz-appearance: textfield; }
.it-spin .it-num::-webkit-outer-spin-button,
.it-spin .it-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.it-spin-btns { position: absolute; right: 3px; top: 3px; bottom: 3px; display: flex; flex-direction: column; }
.it-spinb {
  flex: 1; display: flex; align-items: center; justify-content: center;
  width: 18px; padding: 0; cursor: pointer; color: var(--muted);
  background: none; border: 0; border-radius: var(--radius-xs);
}
.it-spinb:hover { color: var(--text); background: rgba(124, 92, 252, 0.16); }
.it-spinb svg { width: 11px; height: 11px; }

/* ---- option checkboxes --------------------------------------------------- */
.it-checks { margin-top: 13px; display: grid; gap: 10px; }
.it-check {
  display: flex; align-items: flex-start; gap: 9px; cursor: pointer;
  font-size: 12px; line-height: 1.35; color: var(--text-2);
}
.it-check input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.it-cbox {
  flex: 0 0 auto; width: 17px; height: 17px; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-strong); border-radius: var(--radius-xs);
  background: var(--bg-2); color: transparent;
  transition: background .15s, border-color .15s, color .15s;
}
.it-cbox svg { width: 11px; height: 11px; }
.it-check:hover .it-cbox { border-color: var(--purple); }
.it-check input:checked + .it-cbox { background: var(--gradient); border-color: transparent; color: #fff; }
.it-check input:focus-visible + .it-cbox { outline: 2px solid var(--purple-bright); outline-offset: 2px; }
/* forced on and unchangeable — WebP output cannot carry the metadata */
.it-check.is-locked { opacity: .55; cursor: default; }

.it-note { margin: 8px 0 0; font-size: 11px; line-height: 1.45; color: var(--muted); }

/* ============================================================================
   Action feedback.

   Encoding is debounced, so pressing Resize can land while the real bytes are
   still being produced. Rather than silently doing nothing, the button reports
   the wait and then confirms the save — and the same tick confirms a crop,
   which otherwise just made the toolbar vanish.
   ========================================================================== */
.it-dl .it-ic-spin, .it-dl .it-ic-done { display: none; }
.it-dl.is-busy .it-ic-go, .it-dl.is-done .it-ic-go { display: none; }
.it-dl.is-busy .it-ic-spin { display: block; }
.it-dl.is-done .it-ic-done { display: block; }
.it-dl[disabled] { cursor: progress; }
.it-ic-spin {
  width: 15px; height: 15px; flex: 0 0 auto; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff;
  animation: it-spin .7s linear infinite;
}
@keyframes it-spin { to { transform: rotate(360deg); } }
.it-dl.is-done { animation: it-pulse .45s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes it-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.045); } 100% { transform: scale(1); } }

/* saved bar — names the file and offers the next image */
.it-done {
  display: flex; align-items: center; gap: 10px;
  padding: 11px var(--space-5); border-top: 1px solid var(--hairline);
  background: rgba(20, 184, 127, 0.09);
  animation: it-slidein .3s cubic-bezier(.16, 1, .3, 1);
}
.it-done-ic {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--green); color: #fff;
}
.it-done-ic svg { width: 12px; height: 12px; }
.it-done-txt {
  font-size: 12px; color: var(--text-3); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.it-done-txt b { color: var(--text); font-weight: 700; }
.it-done .it-ghost { margin-left: auto; flex: 0 0 auto; padding: 7px 12px; font-size: 11.5px; }
@keyframes it-slidein { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* a new picture can be dropped straight onto the workspace */
#itWork.is-over { outline: 2px dashed var(--purple); outline-offset: 8px; border-radius: var(--radius-lg); }

@media (prefers-reduced-motion: reduce) {
  .it-menu-pop, .it-done, .it-dl.is-done { animation: none; }
  .it-ic-spin { animation-duration: 1.6s; }
}