/* Resize Image — local styles (see docs/TOOL_GUIDE.md; do not rely on this file existing anywhere else) */

/* "Size by" segmented control: 4 labels need two rows of two, not 3-then-1 */
.rz-mode-seg { flex-wrap: wrap; }
.rz-mode-seg label { flex: 1 1 47%; }

/* Ready-made size groups */
.rz-preset-group { margin-top: 1.1rem; }
.rz-preset-group:first-child { margin-top: 0; }
.rz-preset-group-title { font-size: .76rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 .5rem; }
.rz-preset-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.rz-preset-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .15rem;
  text-align: left;
  min-height: 44px;
  padding: .55rem .7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color .15s var(--ease), background-color .15s var(--ease), transform .15s var(--ease-spring), box-shadow .15s var(--ease);
}
@media (hover: hover) { .rz-preset-btn:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); transform: translateY(-1px); } }
.rz-preset-btn[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-softer); box-shadow: 0 0 0 1px var(--primary) inset; }
.rz-preset-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.rz-preset-label { font-weight: 650; font-size: .84rem; letter-spacing: -.005em; line-height: 1.25; }
.rz-preset-dims { font-size: .72rem; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.rz-preset-btn[aria-pressed="true"] .rz-preset-dims { color: var(--primary); }

/* Shape-mismatch panel */
.rz-meta-arrow { color: var(--text-faint); }

/* Background / border colour swatches row (reuses .swatches from site.css) */
.rz-bg-custom-wrap { position: relative; width: 34px; height: 34px; }
.rz-bg-custom-wrap input[type="color"] { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border-strong); padding: 0; background: none; cursor: pointer; }
.rz-bg-custom-icon { position: absolute; inset: 0; margin: auto; width: 15px; height: 15px; color: #fff; pointer-events: none; filter: drop-shadow(0 0 1.5px rgb(0 0 0 / .65)); }
.rz-swatch-transparent {
  background-image:
    linear-gradient(45deg, var(--border-strong) 25%, transparent 25%),
    linear-gradient(-45deg, var(--border-strong) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--border-strong) 75%),
    linear-gradient(-45deg, transparent 75%, var(--border-strong) 75%);
  background-size: 10px 10px;
  background-position: 0 0, 0 5px, 5px -5px, -5px 0;
}

/* File list rows (batch mode) */
.ic-file-status { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 600; }
.ic-file-status .icon { width: 15px; height: 15px; }
.ic-file-status-working { color: var(--info); }
.ic-file-status-done { color: var(--success); }
.ic-file-status-error { color: var(--danger); }
.ic-file-status .spinner { width: 13px; height: 13px; }
.ic-row-actions { display: flex; align-items: center; gap: .4rem; flex: none; }
.file-item.is-error { border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); }

@media (max-width: 380px) {
  .rz-preset-grid { grid-template-columns: 1fr; }
}