/* Phone layouts only. Keep all tablet/desktop rules in their existing files. */
@media screen and (max-width: 767.98px) {
  /* Keep branding and account actions visible without consuming the screen. */
  .header-grey {
    padding: 1rem;
  }

  .header-grey img {
    width: auto;
    height: auto;
    max-width: 100% !important;
    max-height: 120px;
  }

  .header-grey h3 {
    font-size: 1.25rem;
  }

  .header-grey h5 {
    font-size: 1rem;
  }

  .header-grey .btn {
    padding: .35rem .6rem;
    margin: .25rem !important;
    font-size: .875rem;
  }

  .container-flex.p-4 {
    padding: 1rem !important;
  }

  /* Wrap long labels, links and names rather than widening the page. */
  .container-flex section {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .container-flex .btn {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .container-flex .badge {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .profile-detail > .row > .d-flex > .text-break {
    min-width: 0;
  }

  .profile-detail > .row .btn.ml-2 {
    margin-left: 0 !important;
  }

  /* A fixed-width logo and wide margins otherwise overflow the sign-in page. */
  .mobile-sign-in-heading {
    margin: 1rem 0 !important;
  }

  .mobile-sign-in-actions {
    margin: 1.5rem 0 !important;
  }

  .mobile-sign-in-logo {
    height: auto;
    max-width: 100%;
    padding: 1.5rem !important;
  }
}