/* image-tools.css — shared by /images/resize/, /images/convert/ and
   /generators/favicon/, the three pages built on js/image-core.js. */

/* ===== STAGE: CONTROLS BESIDE PREVIEW ===== */
.img-stage {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

/* Clears the sticky header, which would otherwise cover the top of the editor
   when a page scrolls to it after a file is opened. */
#editor { scroll-margin-top: 4.5rem; }

/* ===== PREVIEW PANES ===== */
.preview-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}
.preview-pane { min-width: 0; }
.preview-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .375rem;
}
.preview-name {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-sec);
}
.preview-dims { font-family: var(--mono); font-size: .75rem; color: var(--text-muted); }

.preview-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Only a guard against the frame collapsing while the result is still being
     encoded. Anything taller reads as padding around the picture. */
  min-height: 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  overflow: hidden;
}
/* The checkerboard sits on the image rather than on the frame around it, so it
   marks transparency in the picture instead of implying it in the empty space a
   wide image leaves above and below. */
.preview-frame img {
  max-width: 100%;
  max-height: 260px;
  display: block;
  object-fit: contain;
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #eceff3 25%, transparent 25%, transparent 75%, #eceff3 75%),
    linear-gradient(45deg, #eceff3 25%, transparent 25%, transparent 75%, #eceff3 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
}

/* ===== SIZE READOUT ===== */
.size-stat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem .75rem;
  margin-top: .875rem;
  padding: .75rem .875rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.size-big {
  font-family: var(--mono);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.size-from { font-family: var(--mono); font-size: .875rem; color: var(--text-sec); }
.size-delta {
  font-size: .8125rem;
  font-weight: 600;
  padding: .1rem .45rem;
  border-radius: 999px;
  background: var(--success-bg);
  color: #15803d;
  border: 1px solid #bbf7d0;
}
.size-delta.up { background: var(--warning-bg); color: #92400e; border-color: #fde68a; }

/* While a new encode is running the previous figure stays put rather than
   blanking: it is one setting out of date, not meaningless, and a number that
   vanishes on every keystroke is harder to read than one that dims. */
.size-spinner { display: none; }
.size-stat.measuring .size-spinner { display: inline-block; }
.size-stat.measuring .size-big,
.size-stat.measuring .size-delta,
.size-stat.measuring .size-from { opacity: .45; }
.size-stat .size-big,
.size-stat .size-delta,
.size-stat .size-from { transition: opacity .15s ease; }

/* ===== PRESETS ===== */
.preset-row { display: flex; flex-wrap: wrap; gap: .375rem; }
.preset-btn {
  padding: .3rem .6rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-sec);
  font-family: var(--font);
  font-size: .8125rem;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.preset-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }

/* ===== FORMAT CHOOSER (Image Converter's centerpiece) ===== */
.format-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: .625rem;
}
.format-btn {
  padding: .875rem .5rem;
  border: 2px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  cursor: pointer;
  font-family: var(--font);
  text-align: center;
  transition: border-color .15s, background .15s, transform .1s;
}
.format-btn:hover { border-color: var(--primary); }
.format-btn:active { transform: scale(.98); }
.format-btn.active { border-color: var(--primary); background: var(--primary-light); }
/* A target the page has ruled out: the browser cannot write it, or it is what
   the visitor already has. It stays in place rather than disappearing, because
   a grid that changes shape per file is harder to read than a grayed cell. */
.format-btn:disabled { opacity: .5; cursor: not-allowed; }
.format-btn:disabled:hover { border-color: var(--border); }
.format-btn:disabled:active { transform: none; }
.format-btn .fmt-name {
  display: block;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text);
}
.format-btn .fmt-note { display: block; font-size: .6875rem; color: var(--text-muted); margin-top: .15rem; }
.format-btn.active .fmt-name { color: var(--primary); }

/* ===== COLOR FIELD ===== */
.color-row { display: flex; align-items: center; gap: .5rem; }
.color-row input[type="color"] {
  width: 40px;
  height: 34px;
  padding: 2px;
  border: 1px solid var(--border-input);
  border-radius: var(--r-sm);
  background: var(--surface);
  cursor: pointer;
}
.color-row input[type="text"] { max-width: 10ch; font-family: var(--mono); }

/* ===== ICON SET (Favicon Generator) ===== */
.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: .875rem;
}
.icon-tile {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: .75rem .5rem .625rem;
  text-align: center;
  background: var(--surface);
}
.icon-tile .icon-holder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  margin-bottom: .5rem;
}
.icon-tile img { image-rendering: auto; display: block; }
.icon-tile .icon-label { font-family: var(--mono); font-size: .75rem; color: var(--text-sec); }
.icon-tile .icon-file {
  font-size: .6875rem;
  color: var(--text-muted);
  word-break: break-all;
  margin-bottom: .5rem;
}

/* ===== CONTEXT MOCK-UPS (how the icon actually reads) ===== */
.ctx-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: flex-end;
}
.ctx-item { text-align: center; }
.ctx-caption { font-size: .6875rem; color: var(--text-muted); margin-top: .375rem; }

/* Browser tab */
.ctx-tab {
  display: flex;
  align-items: center;
  gap: .4rem;
  width: 176px;
  padding: .4rem .6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px 8px 0 0;
  border-bottom: 2px solid var(--primary);
}
.ctx-tab img { width: 16px; height: 16px; flex-shrink: 0; }
.ctx-tab span {
  font-size: .75rem;
  color: var(--text-sec);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Bookmark row */
.ctx-bookmark {
  display: flex;
  align-items: center;
  gap: .4rem;
  width: 176px;
  padding: .35rem .5rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.ctx-bookmark img { width: 16px; height: 16px; flex-shrink: 0; }
.ctx-bookmark span { font-size: .75rem; color: var(--text-sec); }

/* Home screen */
.ctx-home {
  width: 96px;
  padding: .75rem .5rem .5rem;
  background: linear-gradient(160deg, #334155, #0f172a);
  border-radius: 14px;
  text-align: center;
}
.ctx-home img { width: 48px; height: 48px; border-radius: 11px; display: block; margin: 0 auto .375rem; }
.ctx-home span { font-size: .625rem; color: #e2e8f0; }

/* ===== RESPONSIVE ===== */
@media (max-width: 860px) {
  .img-stage { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .preview-frame img { max-height: 180px; }
  .size-big { font-size: 1.125rem; }
}