/* ===== Responsive ===== */

@media (max-width: 640px) {
  .app {
    padding: 0.9rem 0.9rem 1.75rem;
  }

  h1 {
    font-size: 1.4rem;
  }

  .card {
    padding: 0.85rem 0.9rem;
    border-radius: 0.8rem;
  }

  button {
    width: 100%;
    justify-content: center;
  }

  #help-button {
    width: auto;
  }

  .file-input-row {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Make the reference stepper larger on small screens */
  .ref-step {
    width: 2.8rem;
    height: 2.8rem;
  }

  .value-slider {
    margin-top: 0.45rem;
  }

  .file-chosen {
    white-space: normal;
  }

  .action-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (min-width: 960px) {
  main {
    gap: 1.5rem;
  }
}