/* Phone layout for the KreditFunding application.
   The desktop system stays as it is: navy ink, blue actions, Manrope.
   These rules only apply under 640px. */

@media (max-width: 639px) {
  html {
    scrollbar-gutter: auto;
  }

  body {
    overflow-x: clip;
  }

  .header {
    padding-top: env(safe-area-inset-top, 0px);
  }

  .stage {
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  }

  .footer {
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }

  /* iOS zooms the page when a focused field is smaller than 16px. */
  .field__input:not(.field__input--signature),
  select.field__input,
  textarea.field__input {
    font-size: 16px;
  }

  /* Statement cards were a single squeezed row, so "up to 20 MB" was cut off
     and Choose file was a 40px target. Put the action on its own row. */
  .doc {
    flex-wrap: wrap;
    align-items: center;
    row-gap: 12px;
  }

  .doc__label {
    text-wrap: pretty;
  }

  .doc__meta {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }

  .doc[data-state="empty"] .doc__choose,
  .doc[data-state="error"] .doc__choose {
    flex: 1 1 100%;
    justify-content: center;
    box-sizing: border-box;
    height: 48px;
  }

  .doc__action {
    width: 48px;
    height: 48px;
  }

  .check {
    align-items: flex-start;
    width: auto;
    max-width: 100%;
    min-height: 44px;
  }

  .check input {
    width: 22px;
    height: 22px;
    margin-top: 1px;
  }

  .range {
    height: 44px;
    margin-top: 10px;
  }

  .affix__button {
    width: 44px;
    height: 44px;
    margin-top: -22px;
  }

  .summary__edit {
    min-height: 44px;
    padding-inline: 4px;
  }
}

/* First/last, state/ZIP, and date/SSN pairs get too narrow to type in. */
@media (max-width: 380px) {
  .fields__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .header__inner {
    gap: 8px;
  }

  .stars {
    height: 16px;
  }

  .summary__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    padding: 8px 0;
  }
}