/* Desktop and laptop layout pass: use available workspace without stretching
   reading content or allowing tool controls to overflow. */
@media (min-width: 861px) {
  :root { --max: min(94vw, 1440px); }
  .wrap,
  .tool-wrap {
    width: min(94vw, 1440px);
    max-width: none;
  }

  .tool-wrap,
  .tool-wrap > *,
  .tool-wrap .tool-box,
  .tool-wrap .tool-box > * {
    min-width: 0;
  }

  .tool-wrap .tool-box {
    padding: clamp(20px, 2vw, 32px);
  }

  .tool-wrap .opts {
    column-gap: clamp(14px, 1.6vw, 24px);
    row-gap: 16px;
  }

  .tool-wrap .opts label {
    min-width: 160px;
    max-width: 100%;
  }

  .tool-wrap .opts input[type="number"],
  .tool-wrap .opts input[type="text"],
  .tool-wrap .opts input[type="date"],
  .tool-wrap .opts select {
    max-width: min(100%, 260px);
    min-height: 42px;
  }

  .tool-wrap .thumbs {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
  }

  .tool-wrap .thumb .pv { height: 170px; }
  .tool-wrap .thumb img { max-height: 160px; }
  .tool-wrap .preview img,
  .tool-wrap .preview canvas { max-height: min(68vh, 760px); }

  .tool-wrap .table-wrap,
  .tool-wrap .results,
  .tool-wrap pre { max-width: 100%; }

  .tool-wrap :is(input, select, textarea, button) { max-width: 100%; }
}

@media (min-width: 861px) and (max-width: 1199px) {
  .wrap,
  .tool-wrap { width: calc(100% - 40px); }
  .tool-wrap .tool-box { padding: 20px; }
}

@media (min-width: 1600px) {
  .tool-wrap .tool-box { padding: 32px; }
  .tool-wrap .thumbs { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .tool-wrap .thumb .pv { height: 190px; }
  .tool-wrap .thumb img { max-height: 180px; }
}

@media (min-width: 861px) and (max-height: 800px) {
  .tool-wrap .preview img,
  .tool-wrap .preview canvas { max-height: 58vh; }
  .tool-wrap .thumb .pv { height: 145px; }
  .tool-wrap .thumb img { max-height: 135px; }
}