/* images tools — styles owned by the images work; keep area-specific rules here, shared tokens stay in style.css */

/* per-file results of Compress and Compress image to KB */
.img-rows { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.img-rows:empty { display: none; }
.img-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.5fr); gap: 4px 16px; align-items: baseline;
  padding: 10px 14px; border-top: 1px solid var(--line); font-size: 14px; }
.img-row:first-child { border-top: 0; }
.img-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.img-sizes { font: 13px var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.img-note { color: var(--muted); }
.img-note.bad { color: #C0362C; font-weight: 600; }
:root[data-theme="dark"] .img-note.bad { color: #F08C80; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .img-note.bad { color: #F08C80; } }
.img-row[data-fits="true"] .img-sizes, .img-row[data-kept="false"] .img-sizes { color: var(--local); }
.img-tool .err[hidden] { display: none; }

@media (max-width: 560px) {
  .img-row { grid-template-columns: minmax(0, 1fr) auto; }
  .img-note { grid-column: 1 / -1; }
  .img-tool .grid2, .img-tool .grid3 { grid-template-columns: 1fr; }
}

/* Make PNG transparent: the list of removed colors under the image */
.tcolors { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-weight: 400; }
.tcolor { display: inline-flex; align-items: center; gap: 7px; padding: 3px 4px 3px 5px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); }
.tswatch { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line); flex: none; }
.tcolor code { font: 500 13px var(--mono); }
.tcolor-x { border: 0; background: var(--soft); width: 24px; height: 24px; border-radius: 50%; cursor: pointer; font-size: 15px; line-height: 1; color: var(--muted); }
.tcolor-x:hover, .tcolor-x:focus-visible { background: var(--ink); color: var(--paper); }