/* Image Optimizer — tool-specific styles.
   Loaded only on the Image Optimizer page (linked from its template
   partial). Base components (.btn, .form-field, .dropzone, .alert …)
   live in site.css; only image-batch layout lives here. */

.img-settings-grid { display: grid; gap: var(--space-4); }
@media (min-width: 768px) { .img-settings-grid { grid-template-columns: 1fr 1fr; } }

.img-queue { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.img-queue-row {
  display: flex; align-items: center; gap: var(--space-3);
  border: 1px solid var(--color-line); border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3); background: var(--color-surface);
}
.img-thumb {
  width: 56px; height: 56px; object-fit: cover; flex: none;
  border-radius: var(--radius-sm); border: 1px solid var(--color-line);
  background: var(--color-surface-alt);
}
.img-queue-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.img-queue-meta strong { overflow-wrap: anywhere; }
.img-queue-meta span { font-size: var(--text-sm); color: var(--color-muted); overflow-wrap: anywhere; }

.img-range-row { display: flex; align-items: center; gap: var(--space-3); }
.img-range-row input[type="range"] { flex: 1; min-height: 44px; }
.img-range-val { font-weight: var(--weight-semibold); min-width: 3ch; text-align: right; }

.img-results { display: grid; gap: var(--space-4); }
@media (min-width: 768px) { .img-results { grid-template-columns: 1fr 1fr; } }
.img-result-card {
  border: 1px solid var(--color-line); border-radius: var(--radius-md);
  padding: var(--space-4); background: var(--color-surface);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.img-result-card.is-selected { border-color: var(--color-action-blue); box-shadow: var(--shadow-md); }
.img-result-card strong { overflow-wrap: anywhere; }
.img-result-thumb {
  width: 100%; height: 180px; object-fit: contain;
  background: var(--color-surface-alt); border-radius: var(--radius-sm);
  border: 1px solid var(--color-line);
}
.img-result-meta { font-size: var(--text-sm); color: var(--color-ink-2); margin: 0; }
.img-result-note { font-size: var(--text-sm); color: var(--color-muted); margin: 0; }
.img-result-card .action-bar { margin: 0; }

.img-compare { margin-top: var(--space-6); }
.img-compare-grid { display: grid; gap: var(--space-4); }
@media (min-width: 768px) { .img-compare-grid { grid-template-columns: 1fr 1fr; } }
.img-compare figure { margin: 0; }
.img-compare img {
  width: 100%; max-height: 420px; object-fit: contain; display: block;
  background: var(--color-surface-alt); border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
}
.img-compare figcaption { font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-2); }

.img-mode-group { border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-4); }
.img-mode-group legend { font-weight: var(--weight-semibold); padding: 0 var(--space-2); }