/* -----------------------------------------------------------------------------------------
 * ngs-mobile.css
 *
 * Phone fixes that belong in the app's own stylesheet, but that stylesheet is compiled output
 * whose source no longer exists. Loaded after it, so these rules win on equal specificity.
 * Everything here is inside a max-width media query: the desktop layout is untouched.
 * --------------------------------------------------------------------------------------- */

/* -- Tab strips --------------------------------------------------------------------------
 *
 * A shipment has seven or eight tabs (Details, Load, Charges, Tracking, Documents, Notes,
 * Terminals, Carrier calls). On a phone they were laid out in a single row that scrolled
 * sideways: 669px of tabs in a 316px strip, so 353px of them - more than half - sat off the
 * edge of the screen with nothing to say so. A sideways scroll inside a page that also scrolls
 * down is a gesture people miss entirely, and the ones who find it still cannot see what they
 * are scrolling towards. Both things were happening here.
 *
 * So on a phone the row becomes a block of pills that wraps. Every tab is visible at once, each
 * one is a proper 40px target, and the one you are on is filled in rather than marked with a
 * 2px underline that a thumb covers. No gesture to discover, nothing hidden, one tap to any of
 * them. It costs about two extra lines of vertical space, which is the cheapest thing on the
 * page.
 * ------------------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .tabs {
    flex-wrap: wrap;
    overflow-x: visible;
    border-bottom: 0;
    gap: 7px;
    margin-bottom: 15px;
    padding-bottom: 2px;
  }

  .tabs .tab {
    /* Grow to share the row, so a row of two or three pills fills the width evenly instead of
       leaving a ragged gap on the right. */
    flex: 1 1 auto;
    white-space: nowrap;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink-2);
    padding: 0 14px;
    min-height: 40px;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* The underline the desktop uses is under a thumb at this size; the fill below replaces it. */
    border-bottom: 1px solid var(--line);
    transition: background .12s, color .12s, border-color .12s;
  }

  .tabs .tab.active {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
    color: #fff;
  }

  /* A tap should look like it landed, on a device with no hover to fall back on. */
  .tabs .tab:active {
    transform: scale(.98);
  }
}