/* The marketing header on a phone.

   Every page used to carry its own copy of the header's one phone rule, which
   hid the green "Start free trial" button at 420 and below. Above 420 the bar
   still had to hold the brand, the language switch, "Admin Panel", that green
   button and the menu button: 485 px in English and 498 in Spanish. So the
   header ran off the right edge from 421 to 500 wide, again from 521 to 581
   (where the 520 tightening in lang.css stops), and from 320 to 346 even
   without the green button. The menu button was the thing pushed off screen.

   This file is the one place that decides what the bar holds on a phone. It
   loads after site-a11y.css and lang.css, so it wins a tie with either. Every
   rule here sits at 640 and below; the desktop header is untouched. */

/* The copy of "Admin Panel" that lives in the menu. Hidden wherever the bar
   still has room for the real button. */
.nav-links .nav-admin-link {
  display: none;
}

@media (max-width: 640px) {
  /* The hero right under the header carries the trial button, so the bar
     does not need a second one. */
  .nav-right .btn-green {
    display: none;
  }

  /* "Admin Panel" moves out of the bar and into the menu as its own item. */
  .nav-right .nav-admin {
    display: none;
  }

  .nav-links .nav-admin-link {
    display: block;
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--line, rgba(20, 60, 35, .12));
  }

  /* What is left is the brand, the language switch and the menu button. The
     menu button gets a full 44 px target now that it has the room. */
  .menu-btn {
    width: 44px;
    height: 44px;
    flex: none;
  }

  /* Last line of defence: if the bar is ever too full again, the brand gives
     way first and the menu button stays on screen. */
  .nav {
    min-width: 0;
  }

  .nav .brand {
    gap: 8px;
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .nav .brand svg {
    flex: none;
  }

  .nav-right {
    flex: none;
  }
}