/* Phone layout for the screens a Watcher uses one-handed.
   Loaded after the other stylesheets so these rules win at the same specificity. */

@media (max-width: 480px) {
  .brand {
    flex-wrap: wrap;
    max-width: 100%;
  }

  .brand-title {
    flex: 1 1 10rem;
    min-width: 0;
    line-height: 1.3;
  }

  .masthead-user {
    flex-wrap: wrap;
    max-width: 100%;
    row-gap: 0.35rem;
  }

  /* A long status pill (an unknown WBS code) must wrap instead of widening the page. */
  .badge {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: left;
    line-height: 1.35;
  }

  .ts-grid tbody td {
    flex-wrap: wrap;
  }

  .ts-cell,
  .ts-cell > .badge {
    max-width: 100%;
  }

  /* Hours box plus Add, under the "Hours worked" label, on a 390px screen. */
  .ts-sched-form {
    flex-wrap: wrap;
    max-width: 100%;
  }

  input,
  select,
  textarea,
  .ts-input {
    max-width: 100%;
  }
}