/* =============================================================================
   Image compression - what the shared tool components do not cover: the
   totals shown on the stage once photos are in, and the list of files.
   ============================================================================= */

/* The input lives outside the drop zone (see the partial): its focus ring
   is drawn on the zone. */
.kp-file:focus-visible + .drop{outline:2px solid var(--olive);outline-offset:3px}

/* ---- totals on the stage ---- */
.kp-sum{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  min-height:clamp(220px,26vw,320px);padding:28px 20px;text-align:center;
}
.kp-sum__sizes{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:4px 16px;
  font-size:clamp(30px,4.4vw,56px);line-height:1;letter-spacing:-.04em;font-weight:300;font-style:italic;color:var(--fg-2);
}
.kp-sum__sizes b{font-weight:900;color:var(--fg);word-spacing:.14em}
.kp-sum__to{display:inline-flex;align-items:baseline;gap:16px}
.kp-sum__arrow{font-style:normal;font-weight:300;color:var(--olive)}
.kp-sum__line{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2)}
/* A hairline that fills while a batch runs, gone when it is done. */
.kp-bar{width:min(320px,80%);height:2px;border-radius:2px;background:rgba(250,250,247,.14);overflow:hidden;
  opacity:0;transition:opacity .3s var(--ease)}
.kp-sum.is-busy .kp-bar{opacity:1}
.kp-bar span{display:block;width:100%;height:100%;background:var(--olive);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease-out)}

/* ---- settings ---- */
.kp-hint{margin-top:-8px;font-size:13px;line-height:1.5;color:var(--fg-2)}

/* ---- list: one row per photo ---- */
.kp-list{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:8px}
.kp-row{
  display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:14px;
  padding:10px 14px 10px 10px;border:1px solid var(--rule-d);border-radius:var(--r-sm);background:rgba(250,250,247,.025);
}
.kp-thumb{
  display:block;width:56px;height:56px;border-radius:var(--r-xs);overflow:hidden;
  background:repeating-conic-gradient(var(--ink-3) 0 25%,var(--ink-2) 0 50%) 0 0/12px 12px;
}
.kp-thumb img{width:100%;height:100%;object-fit:cover}
.kp-thumb img:not([src]){visibility:hidden}
.kp-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.kp-top{display:flex;align-items:center;gap:10px;min-width:0}
.kp-name{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:15px;font-weight:500;letter-spacing:-.01em}
.kp-sizes{font-size:12px;letter-spacing:.02em;color:var(--fg-2)}
.kp-sizes b{font-weight:500;color:var(--fg)}
.kp-pct{color:var(--olive)}
.kp-dims{font-size:11px;letter-spacing:.02em;color:var(--fg-3)}
.kp-badge{
  flex:none;padding:3px 8px;border-radius:999px;border:1px solid var(--rule-d);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2);white-space:nowrap;
}
.kp-row[data-state="working"] .kp-badge{border-color:var(--olive);color:var(--olive)}
.kp-row[data-state="done"] .kp-badge{border-color:rgba(204,211,118,.5);color:var(--olive)}
.kp-row[data-state="over"] .kp-badge,
.kp-row[data-state="error"] .kp-badge{border-color:rgba(255,138,122,.55);color:#ff8a7a}
.kp-row[data-state="pending"],.kp-row[data-state="working"]{border-style:dashed}
.kp-row .gen__action{min-height:40px}
@media (max-width:560px){
  .kp-sum{padding:24px 14px}
  .kp-sum__sizes{font-size:28px;gap:4px 12px}
  .kp-sum__to{gap:12px}
  .kp-row{grid-template-columns:48px minmax(0,1fr) auto;gap:10px;padding:8px 10px 8px 8px}
  .kp-thumb{width:48px;height:48px}
  .kp-name{font-size:14px}
  .kp-row .gen__action{padding:8px 10px}
}
@media (prefers-reduced-motion:reduce){.kp-bar,.kp-bar span{transition:none}}