/* The image compressor (/image-compressor), on the foundation, tool.css and the video checker's drop tile (video.css):
   the editor is the drop tile and four choices between hairlines; the well shows the photo picked as it was made, then
   what the networks say of it, a row per photo with its numbers and Download, and the pennant. */
.squeeze .editor { border-radius: 12px; transition: background .15s ease-out, box-shadow .15s ease-out; }
.squeeze .editor.drop { background: var(--muted); box-shadow: 0 0 0 12px var(--muted); }

/* The choices: hidden until a photo is in, then one a row, the control on the right. */
.squeeze .set { display: none; margin-top: 24px; border-top: 1px solid var(--border); }
.has-photos .set { display: block; }
.squeeze .field { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 60px; border-bottom: 1px solid var(--border); font-size: 15px; color: var(--muted-foreground); }
.squeeze .field > :first-child { flex: none; }
.squeeze .seg button { padding: 0 11px; }
.range { display: inline-flex; align-items: center; gap: 12px; }
.range input { width: 150px; accent-color: var(--foreground); }
.range output { min-width: 3ch; font-size: 16px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; color: var(--foreground); }

/* The well: the photo at its own size, never wider than the well. */
.squeeze .view { display: block; }
.squeeze .stage { min-height: 360px; }
.squeeze .stage img { display: block; max-width: 100%; max-height: 560px; height: auto; border-radius: 6px; }
.squeeze .stage img[hidden] { display: none; }
.squeeze .stage.making img { opacity: .55; }
.has-photos .stage .empty { display: none; }
.squeeze .stage .empty { margin: 0; font-size: 16px; color: var(--muted-foreground); }

/* What each network says of the photo picked: one line each, green when it fits. */
.fits { margin: 20px 0 0; padding: 0; list-style: none; }
.fits:empty { display: none; }
.fits li { position: relative; padding: 6px 0 6px 22px; font-size: 15.5px; line-height: 1.45; color: var(--foreground); }
.fits li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 10px; height: 10px; border-radius: 999px; background: var(--success); }
.fits li.no::before { background: var(--destructive); }

/* A row per photo: its thumbnail, name and numbers (a tap shows it in the well), and its Download. */
.files { margin: 20px 0 0; padding: 0; list-style: none; }
.files:empty { display: none; }
.files li { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-top: 1px solid var(--border); }
.files li:last-child { border-bottom: 1px solid var(--border); }
.files .row { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.files .row img { flex: none; width: 52px; height: 52px; object-fit: cover; border-radius: 6px; background: var(--muted); }
.files li.on .row img { box-shadow: 0 0 0 2px var(--foreground); }
.files .row > span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.files .row b { font-size: 15.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.files .row span span { font-size: 14.5px; line-height: 1.4; color: var(--muted-foreground); font-variant-numeric: tabular-nums; text-wrap: pretty; }
.files a { flex: none; }
.squeeze .result { justify-content: flex-end; }
.squeeze .result .numbers:empty { display: none; }
.checked { margin-top: var(--space-5); font-size: 15px; color: var(--muted-foreground); }

@media (max-width: 1119px) {
  .squeeze .editor { position: static; }
}
@media (max-width: 759px) {
  .squeeze .stage { min-height: 220px; padding: 20px; }
  .squeeze .result { flex-direction: column; align-items: stretch; }
  .files li { flex-wrap: wrap; }
  .files a { width: 100%; }
  .squeeze .seg button { padding: 0 8px; }
  .range input { width: 120px; }
}