/* The video to GIF converter (/video-to-gif), on the foundation, tool.css and the video checker's drop tile (video.css):
   the editor is the file and four choices between hairlines; the well shows the video while the GIF is made, then the
   GIF; under it, what X and LinkedIn say of it, its numbers, Download GIF and the pennant. */
.gifmaker .editor { border-radius: 12px; transition: background .15s ease-out, box-shadow .15s ease-out; }
.gifmaker .editor.drop { background: var(--muted); box-shadow: 0 0 0 12px var(--muted); }

/* The choices: hidden until a video is in, then one a row, the control on the right. */
.set { display: none; margin-top: 24px; }
.has-video .set { display: block; }
.set .name { margin: 0; padding-bottom: 12px; border-bottom: 1px solid var(--border); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.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); }
.field label, .field > span:first-child { flex: none; }
.num { display: inline-flex; align-items: center; gap: 6px; color: var(--muted-foreground); }
.num input {
  width: 84px; height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--muted); text-align: right;
  font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--foreground);
}
.num input:focus-visible { outline: 2px solid var(--foreground); outline-offset: 0; }

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

/* What each network says of the GIF: one line each, green when it fits. */
.fits { grid-column: 1 / -1; 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); }

.gifmaker .result { align-items: center; }
.acts { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; justify-content: flex-end; }
.acts [hidden] { display: none; }
.checked { margin-top: var(--space-5); font-size: 15px; color: var(--muted-foreground); }

@media (max-width: 1119px) {
  .gifmaker .editor { position: static; }
}
@media (max-width: 759px) {
  .gifmaker .stage { min-height: 220px; padding: 20px; }
  .gifmaker .result { flex-direction: column; align-items: stretch; }
  .acts { flex-direction: column; align-items: stretch; }
}