/* Mobile layout */
@media (max-width: 768px) {
  /* Base mobile body */
  body {
    margin: 0;
    background: var(--bg-color);
    overflow-y: auto;
    /* allow it to grow with content; no fixed height */
    min-height: 100svh;
  }

  /* BEFORE any results: center page vertically */
  body:not(.has-results) {
    display: flex;
    align-items: center;      /* vertical centering */
    justify-content: center;  /* horizontal centering */
    /* flex + min-height gives us centering without clipping */
  }

  /* AFTER results: normal scrolling layout */
  body.has-results {
    display: block;
  }

  .page {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 1.25rem 1rem 2rem;
  }

  /* Give a little extra top spacing once results are visible */
  .page.show-results {
    margin-top: 1.5rem;
  }

  .container {
    width: 100%;
    margin: 0 auto 1.5rem;
  }

  .box-inner {
    inset: 20px;
  }

  .box-image {
    width: 40%;
  }
}

/* Large desktop layout */
@media (min-width: 1400px) {
  .container {
    width: min(55vmin, 520px);
  }

  .page.show-results .result-container {
    width: min(55vmin, 520px);
  }

  .box-inner {
    transform: scale(1.10);
    transform-origin: center;
  }

  .box-image {
    width: 45%;
  }

  .content label,
  .content button {
    font-size: 1.05rem;
  }

  .content input,
  .content select {
    font-size: 0.95rem;
    padding: 3px 6px;
  }
}