/* Extra styles for the watermarker. The base look comes from ../photo-filter-lab/style.css */

/* minmax(0, …) stops the full-size canvases from stretching their columns wider than the screen */
.lab { grid-template-columns: minmax(0, 1fr) 300px; }
.results { place-items: stretch; align-content: start; grid-template-columns: minmax(0, 1fr); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 14px; }

.result { display: grid; gap: 8px; align-content: start; min-width: 0; }
.result canvas { width: 100%; height: auto; max-height: none; background: var(--surface-2); }
.result .row { align-items: center; gap: 8px; }
.result .name { font-family: var(--mono); font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result button { padding: 6px 10px; font-size: 13px; }

.upload.small span { font-weight: 500; font-size: 14px; padding: 9px; }

@media (max-width: 760px) {
  .lab { grid-template-columns: minmax(0, 1fr); }
}

select {
  font: 500 15px var(--body); color: var(--ink); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; width: 100%;
}