/* Keep the application at the same visual density as Chrome's 90% zoom. */
html {
  zoom: 90%;
}

/* Fixed Bootstrap backdrops are also reduced by the page zoom. Compensate so
   the darkened layer still reaches every viewport edge. */
.modal-backdrop {
  width: calc(100vw / 0.9) !important;
  height: calc(100vh / 0.9) !important;
}

.form-step-actions > .col-3 .btn,
.form-step-actions > .col-6 .btn {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

@media (max-width: 767.98px) {
  .form-subpage-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
  }

  .form-subpage-nav:has(> .form-subpage-button:nth-child(3):last-child:not([style*="display: none"])) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .form-subpage-nav .form-subpage-button,
  .form-subpage-nav-equal .form-subpage-button {
    width: 100%;
    min-width: 0;
  }

  .form-step-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    column-gap: 0.5rem;
  }

  .form-step-actions > .col-3 {
    width: auto;
    padding: 0;
    text-align: center !important;
  }

  .form-step-actions > .col-6 {
    display: contents;
  }

  .form-step-actions .btn {
    width: auto;
    min-width: 0;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .form-step-actions > .col-12 {
    flex: 0 0 100%;
    width: 100%;
  }
}