/* ==========================================================
   UNIVERSAL LANGUAGE-SAFE RESPONSIVE LAYOUT
   Designed for English and translated versions with longer text.
   ========================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { max-width: 100%; overflow-x: hidden; }
/* clip (not hidden) on body so the sticky sidebar keeps working, same as the Home page */
body { max-width: 100%; overflow-x: hidden; overflow-x: clip; }
img, canvas, svg { max-width: 100%; }
button, input, select, textarea { max-width: 100%; }

/* Never let translated labels force a row wider than its container. */
.panel, .tool-panel, .workspace, .field-row, .panel-head,
.panel-head .btn-row, .page-hero-inner, .section-head,
.stat-grid, .field, .btn-row, .pct-row, .quality-row,
.page-hero-text, .page-hero-media { min-width: 0; }

/* Main tool area: columns collapse cleanly without fixed widths. */
.workspace {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
}
.workspace > * { min-width: 0; }

/* Panel headings/buttons can wrap for long translations. */
.panel-head {
  align-items: center;
}
.panel-head h3 {
  min-width: 0;
  overflow-wrap: anywhere;
}
.panel-head .btn-row {
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Width/height controls: never squeeze translated labels or inputs. */
.field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr);
  align-items: end;
  gap: 12px;
}
.field-row > .field { min-width: 0; }
.lock-btn { width: 40px; min-width: 40px; }
.field label {
  overflow-wrap: anywhere;
  word-break: normal;
}
.field input[type="number"],
.field select {
  min-width: 0;
  max-width: 100%;
}

/* Drop area: translated strings can become long without breaking the box. */
.drop-zone {
  width: 100%;
  min-width: 0;
}
.drop-zone b,
.drop-zone span {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Preview placeholder is centered in the complete preview area. */
.img-preview-wrap {
  width: 100%;
  min-width: 0;
  display: grid;
  place-items: center;
  text-align: center;
}
.img-preview-wrap .empty-note {
  width: 100%;
  max-width: 32ch;
  margin: 0;
  padding: 32px 20px;
  text-align: center;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Buttons are allowed to wrap instead of overflowing on translated pages. */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  min-width: 0;
}
.btn {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
.pct-row { align-items: center; }

/* Stats remain two columns where possible, but never overflow. */
.stat-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.stat-card { min-width: 0; }
.stat-card b, .stat-card span {
  overflow-wrap: anywhere;
}

/* Hero/banner is language-safe. */
.page-hero-inner { min-width: 0; }
.page-hero-text { flex: 1 1 320px; }
.page-hero-media { min-width: 0; width: 100%; }
.page-hero-media img { width: 100%; height: auto; }

/* Header stays usable when translated labels become longer. */
.site-header .inner,
.header-actions,
.brand { min-width: 0; }
.brand { flex-shrink: 1; }
.brand span:not(.brand-mark) {
  overflow-wrap: anywhere;
}
.header-actions { flex-shrink: 0; }

/* ---------- Tablet ---------- */
@media (max-width: 980px) {
  .workspace {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 680px) {
  .container, .layout {
    width: 100%;
    max-width: 100%;
    padding-inline: 16px;
  }

  .page-hero {
    padding: 22px 18px;
  }

  .page-hero-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .page-hero-text,
  .page-hero-media {
    width: 100%;
    max-width: none;
    flex: 1 1 auto;
  }

  .panel {
    width: 100%;
    max-width: 100%;
    padding: 16px;
  }

  .panel-head {
    align-items: flex-start;
  }

  .panel-head .btn-row {
    width: 100%;
    justify-content: flex-start;
  }

  .panel-head .btn-row .btn {
    flex: 0 1 auto;
  }

  .field-row {
    grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr);
    gap: 8px;
  }

  .lock-btn {
    width: 40px;
    min-width: 40px;
  }

  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .img-preview-wrap {
    min-height: 220px;
  }

  .img-preview-wrap .empty-note {
    max-width: 28ch;
    padding: 28px 14px;
  }

  .btn-row .btn-solid,
  .btn-row .btn-outline {
    max-width: 100%;
  }
}

/* ---------- Small phones ---------- */
@media (max-width: 480px) {
  .container, .layout { padding-inline: 12px; }
  .panel { padding: 14px; }

  .field-row {
    grid-template-columns: minmax(0, 1fr) 38px minmax(0, 1fr);
    gap: 6px;
  }

  .lock-btn {
    width: 38px;
    min-width: 38px;
  }

  .stat-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .pct-row .btn {
    flex: 1 1 calc(50% - .5rem);
    min-width: 0;
  }

  .panel-head .btn-row .btn {
    flex: 1 1 auto;
  }

  .img-preview-wrap .empty-note {
    max-width: 24ch;
    padding-inline: 8px;
  }
}

/* ---------- Very narrow phones ---------- */
@media (max-width: 360px) {
  .field-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .field-row .lock-btn {
    justify-self: center;
    order: 2;
  }

  .field-row .field:first-child { order: 1; }
  .field-row .field:last-child { order: 3; }

  .stat-grid { grid-template-columns: 1fr; }
}

/* Accessibility: translated content should remain readable when text is enlarged. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}