/* ============================================================================
   ToolBench — image-compressor.css
   Advanced Image Compressor only. Loaded via the registry's 'css' key.

   .drop/.orline/.limits/.results/.row/.rhead/.thumb/.rmain/.rname/.meta/
   .rbtns/.dot/.rbody/.preview and .panel/.prow/.plbl/.seg/.opt all already
   exist in tools.css — reused as-is, not redeclared here. Tokens come from
   site.css.

   All CSS for this site lives in assets/css/ — no <style> blocks, no
   style="" attributes. The before/after slider's reveal position is
   genuinely dynamic (a live drag value), so it's driven by a discrete
   reveal-{0,5,...,100} class per 5% step rather than an inline style — the
   same "class step, not inline style" approach used for the Advanced EMI
   Calculator's result grids.
   ============================================================================ */

/* --------------------------------------------------------------- controls -- */
.inp-narrow{max-width:90px;flex:0 0 auto}

/* --------------------------------------------------------- batch summary -- */
.batch-summary{
  display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;
  margin:18px 0 0;padding:14px 16px;
  background:var(--ink);border-radius:var(--radius);
}
.batch-summary .bs-stat{min-width:90px}
.batch-summary .bs-stat b{display:block;font:600 20px/1.15 var(--display);color:#fff}
.batch-summary .bs-stat span{display:block;margin-top:2px;font:400 11px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--slate-light-ink)}
.batch-summary .bs-stat.is-good b{color:#9FE0AE}
.batch-summary .grow{flex:1 1 auto}

/* ------------------------------------------------------------- batch rows -- */
.row.is-selectable{cursor:pointer}
.row.is-selected{border-color:var(--blueprint)}
.row .thumb{cursor:pointer}
.warn-list{margin:6px 0 0;padding:0;list-style:none;font-size:12.5px;color:var(--warn-ink)}
.warn-list li{display:flex;gap:6px;align-items:flex-start}

/* -------------------------------------------------------- before/after ---- */
.compare-wrap{margin:18px 0 0}
.compare-box{
  position:relative;width:100%;max-width:640px;margin:0 auto;
  aspect-ratio:4/3;overflow:hidden;
  background:repeating-conic-gradient(#f4f4f4 0% 25%, #fff 0% 50%) 0 0/16px 16px;
  border:1px solid var(--paper-line);border-radius:var(--radius);
  cursor:col-resize;user-select:none;touch-action:none;
}
.compare-after-img,.compare-before-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
}
.compare-before-img{clip-path:polygon(0 0,50% 0,50% 100%,0 100%)}
.compare-handle{
  position:absolute;top:0;bottom:0;left:50%;width:0;
  border-left:2px solid #fff;box-shadow:0 0 0 1px rgba(14,27,42,.25);
  transform:translateX(-1px);
}
.compare-handle::after{
  content:'⇔';position:absolute;top:50%;left:50%;
  width:30px;height:30px;margin:-15px 0 0 -15px;display:grid;place-items:center;
  background:#fff;border-radius:50%;box-shadow:0 2px 6px rgba(14,27,42,.3);
  font-size:14px;color:var(--ink);
}
.compare-labels{display:flex;justify-content:space-between;margin:8px 0 0;font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--slate-light)}
.compare-hint{margin:6px 0 0;text-align:center;font-size:12px;color:var(--slate-light)}

/* ==================== generated reveal-step classes ======================== */
.reveal-0 .compare-before-img{clip-path:polygon(0 0,0% 0,0% 100%,0 100%)}
.reveal-0 .compare-handle{left:0%}
.reveal-5 .compare-before-img{clip-path:polygon(0 0,5% 0,5% 100%,0 100%)}
.reveal-5 .compare-handle{left:5%}
.reveal-10 .compare-before-img{clip-path:polygon(0 0,10% 0,10% 100%,0 100%)}
.reveal-10 .compare-handle{left:10%}
.reveal-15 .compare-before-img{clip-path:polygon(0 0,15% 0,15% 100%,0 100%)}
.reveal-15 .compare-handle{left:15%}
.reveal-20 .compare-before-img{clip-path:polygon(0 0,20% 0,20% 100%,0 100%)}
.reveal-20 .compare-handle{left:20%}
.reveal-25 .compare-before-img{clip-path:polygon(0 0,25% 0,25% 100%,0 100%)}
.reveal-25 .compare-handle{left:25%}
.reveal-30 .compare-before-img{clip-path:polygon(0 0,30% 0,30% 100%,0 100%)}
.reveal-30 .compare-handle{left:30%}
.reveal-35 .compare-before-img{clip-path:polygon(0 0,35% 0,35% 100%,0 100%)}
.reveal-35 .compare-handle{left:35%}
.reveal-40 .compare-before-img{clip-path:polygon(0 0,40% 0,40% 100%,0 100%)}
.reveal-40 .compare-handle{left:40%}
.reveal-45 .compare-before-img{clip-path:polygon(0 0,45% 0,45% 100%,0 100%)}
.reveal-45 .compare-handle{left:45%}
.reveal-50 .compare-before-img{clip-path:polygon(0 0,50% 0,50% 100%,0 100%)}
.reveal-50 .compare-handle{left:50%}
.reveal-55 .compare-before-img{clip-path:polygon(0 0,55% 0,55% 100%,0 100%)}
.reveal-55 .compare-handle{left:55%}
.reveal-60 .compare-before-img{clip-path:polygon(0 0,60% 0,60% 100%,0 100%)}
.reveal-60 .compare-handle{left:60%}
.reveal-65 .compare-before-img{clip-path:polygon(0 0,65% 0,65% 100%,0 100%)}
.reveal-65 .compare-handle{left:65%}
.reveal-70 .compare-before-img{clip-path:polygon(0 0,70% 0,70% 100%,0 100%)}
.reveal-70 .compare-handle{left:70%}
.reveal-75 .compare-before-img{clip-path:polygon(0 0,75% 0,75% 100%,0 100%)}
.reveal-75 .compare-handle{left:75%}
.reveal-80 .compare-before-img{clip-path:polygon(0 0,80% 0,80% 100%,0 100%)}
.reveal-80 .compare-handle{left:80%}
.reveal-85 .compare-before-img{clip-path:polygon(0 0,85% 0,85% 100%,0 100%)}
.reveal-85 .compare-handle{left:85%}
.reveal-90 .compare-before-img{clip-path:polygon(0 0,90% 0,90% 100%,0 100%)}
.reveal-90 .compare-handle{left:90%}
.reveal-95 .compare-before-img{clip-path:polygon(0 0,95% 0,95% 100%,0 100%)}
.reveal-95 .compare-handle{left:95%}
.reveal-100 .compare-before-img{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.reveal-100 .compare-handle{left:100%}