/* Image tools: size chips, results with previews. Uses the palette of base.css */
.drop .pages circle { fill: none; stroke: var(--accent); stroke-width: 2; }

.chips { gap: 8px !important; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--rule);
  border-radius: 3px; cursor: pointer; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chip span:hover { border-color: var(--ink); }
.chip input:checked + span { border-color: var(--accent); background: var(--accent); color: #fff; }
@media (prefers-color-scheme: dark) { .chip input:checked + span { color: #0d1430; } }
.chip input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.options .pair { display: flex; flex-wrap: wrap; gap: 14px 20px; }
.options .pair input[type=text], .custom-size input[type=text] { width: 6.5em; }
.tool select { max-width: 100%; }
.hint { margin: 14px 0 0; font-size: 15px; color: var(--pencil); }

.bar { display: block; width: 100%; height: 8px; margin: 14px 0 0; accent-color: var(--accent); }

.results { margin-top: 16px; border-top: 1px solid var(--rule); }
.out { list-style: none; padding: 0; margin: 0; }
.out li { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.out img { width: 64px; height: 64px; object-fit: cover; flex: none; border-radius: 2px;
  background: repeating-conic-gradient(var(--rule) 0 25%, transparent 0 50%) 0 0 / 12px 12px; }
.out .meta { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 15px; line-height: 1.35; }
.out .name { font-weight: 700; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.out .sizes { font-variant-numeric: tabular-nums; }
.out .dims, .out .note { color: var(--pencil); font-variant-numeric: tabular-nums; }
.out .dl { display: grid; place-items: center; text-decoration: none; font-size: 20px; flex: none; }
.out li.bad { color: var(--err); font-weight: 600; }
.results .actions a.btn { display: inline-flex; align-items: center; text-decoration: none; }

/* Video tool */
.options .check { gap: 10px; min-height: 44px; }
.options .check input { accent-color: var(--accent); width: 20px; height: 20px; margin: 0; }
.results .preview { display: block; width: 100%; max-height: 420px; margin-top: 16px; background: #000; border-radius: 2px; }
.results .sizes { margin: 10px 0 0; font-variant-numeric: tabular-nums; }