/* Shrink: a darkroom contact sheet. Each result is a print with its old and new weight stamped under it,
   the saving in a bold rust figure. Warm paper page, one rust colour for actions. */
:root { --page: #f3f2ee; --card: #ffffff; --ink: #1c1b18; --soft: #5f5d56; --line: #d9d6cc; --field: #ecebe5; --act: #a4401a; --on-act: #ffffff; --stop: #b3261e; --wide: 720px; color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --page: #141412; --card: #1d1c19; --ink: #efede6; --soft: #aaa79d; --line: #34322c; --field: #141412; --act: #f08a5d; --on-act: #2a1206; --stop: #ff8a80; color-scheme: dark; }
}
.drop { position: relative; display: grid; place-items: center; gap: 4px; min-height: 150px; border: 2px dashed var(--soft); border-radius: 12px; background: var(--card); text-align: center; cursor: pointer; padding: 20px; font-size: 20px; }
.drop.over, .drop:focus-within { border-color: var(--act); border-style: solid; }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.drop .soft { font-weight: 400; }
#quality { width: 100%; accent-color: var(--act); min-height: 44px; }
.top { justify-content: space-between; align-items: center; }
.out { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.out li { background: var(--card); border: 1px solid var(--line); border-radius: 4px; padding: 10px 10px 12px; display: grid; gap: 8px; align-content: start; box-shadow: 0 1px 3px rgb(0 0 0 / 0.08); }
.out img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--field); display: block; }
.out .name { font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
.out .stamp { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 14px; color: var(--soft); }
.out .stamp b { font-size: 22px; color: var(--act); }
.out .stamp b.worse { color: var(--soft); }
.out button { width: 100%; }
@media (max-width: 480px) { .top { flex-direction: column; align-items: stretch; } }