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

.ic-hero {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}
.ic-hero-any {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  flex: none;
}
.ic-hero-pic {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: var(--primary-soft);
  color: var(--primary);
  display: grid;
  place-items: center;
}
.ic-hero-pic .icon { width: 26px; height: 26px; }
.ic-hero-label { font-weight: 650; font-size: .85rem; color: var(--text-soft); white-space: nowrap; }
.ic-hero-arrow { width: 22px; height: 22px; flex: none; color: var(--text-faint); }
.ic-hero-formats { display: flex; flex-wrap: wrap; gap: .4rem; flex: 1 1 auto; align-content: center; }
@media (max-width: 560px) {
  .ic-hero { flex-direction: column; text-align: center; }
  .ic-hero-arrow { transform: rotate(90deg); }
}

/* Format picker */
.fmt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin-bottom: 1rem; }
.fmt-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .3rem;
  text-align: left;
  padding: .7rem .75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  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) { .fmt-btn:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); transform: translateY(-1px); } }
.fmt-btn[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-softer); box-shadow: 0 0 0 1px var(--primary) inset; }
.fmt-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.fmt-btn-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: .66rem;
  font-weight: 750;
  letter-spacing: -.01em;
  background: hsl(var(--h) 78% 93%);
  color: hsl(var(--h) 55% 32%);
}
html[data-theme="dark"] .fmt-btn-icon { background: hsl(var(--h) 32% 24%); color: hsl(var(--h) 75% 78%); }
.fmt-btn-label { font-weight: 700; font-size: .95rem; letter-spacing: -.01em; }
.fmt-btn-desc { font-size: .74rem; line-height: 1.3; color: var(--text-faint); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fmt-btn-check { position: absolute; top: .55rem; right: .55rem; width: 17px; height: 17px; color: var(--primary); opacity: 0; transform: scale(.6); transition: opacity .15s var(--ease), transform .15s var(--ease-spring); }
.fmt-btn[aria-pressed="true"] .fmt-btn-check { opacity: 1; transform: scale(1); }

/* Per-format option panel */
.ic-opt-heading { display: flex; align-items: center; gap: .5rem; }
.ic-slow-note { font-size: .8rem; color: var(--text-faint); margin: -.3rem 0 .2rem; }

/* File list rows */
.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-pending { color: var(--text-faint); }
.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; }
.ic-row-progress { margin-top: .3rem; }
.ic-row-progress .progress-wrap { margin: 0; }
.file-item.is-error { border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); }

/* Background swatches row (reuses .swatches from site.css) */
.ic-bg-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ic-bg-custom-wrap { position: relative; width: 34px; height: 34px; }
.ic-bg-row 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; }
.ic-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)); }

/* ICO sizes */
.ic-sizes { display: flex; flex-wrap: wrap; gap: .5rem .9rem; }

/* SVG trace preview */
.ic-trace-preview {
  margin-top: .7rem;
  min-height: 130px;
  border-radius: var(--radius);
  background: var(--surface-sunken);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.ic-trace-preview img { max-width: 100%; max-height: 160px; }
.ic-trace-preview[data-empty] p { color: var(--text-faint); font-size: .82rem; margin: 0; padding: 1rem; text-align: center; }
.ic-trace-busy { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--surface-sunken) 70%, transparent); font-size: .78rem; color: var(--text-soft); }

@media (max-width: 420px) {
  .fmt-grid { grid-template-columns: 1fr 1fr; }
  .fmt-btn-desc { -webkit-line-clamp: 3; }
}