.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

.masthead__brand {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  text-decoration: none;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.masthead__mark {
  width: 1.375rem;
  height: 1.375rem;
  flex: none;
}

/* Only a phone stacks the map over the list, so only a phone has a reason to
   fold the map away. */
.masthead__map {
  display: none;
}

.masthead__map-icon {
  flex: 0 0 auto;
  width: 0.875rem;
  height: 0.875rem;
}

/* The account side is what gives way when the header runs out of room: the
   brand is one word that cannot be half-said, and the switch is a control. So
   this side shrinks, and the shrinking has to reach the address — hence the
   run of `min-width: 0` down to it, one per flex level, since each level would
   otherwise floor itself at its own content. */
.masthead__account {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-width: 0;
}

.masthead__account .dropdown,
.masthead__account .dropdown__trigger {
  min-width: 0;
}

/* A hair more room than the trigger's own gap: the ring is a reading and the
   address is a name, and pressed together they read as one thing. */
.masthead__email {
  margin-inline-start: var(--space-4xs);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 11rem;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

.masthead__signout {
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-soft);
}

.masthead__signout:hover {
  background-color: var(--color-surface-sunken);
  color: var(--color-text);
}

/* Only there does the map take half the screen from the list, so only there is
   there anything to fold away. Pushed against the account block, so the header
   still reads as a title on the left and its controls on the right. */
@media (max-width: 52rem) {
  .masthead__map {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    margin-left: auto;
    padding: var(--space-4xs) var(--space-xs);
    border-radius: var(--radius-full);
    background-color: var(--color-land-soft);
    color: var(--color-land);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    line-height: 1.4;
    white-space: nowrap;
  }

  /* Folded away: the chip goes quiet, and reads as the way back rather than as
     something switched on. */
  .masthead__map[aria-pressed="false"] {
    background-color: var(--color-surface-sunken);
    color: var(--color-text-faint);
  }
}

/* On a phone the header is asked to hold a brand, a map chip and an account in
   very little width. The address is what goes: the map chip leaves it 17 px —
   an ellipsis and nothing else, which is not "as much of the address as fits"
   but noise standing where it used to be. The menu it opens still gives it in
   full. What is left is the brand, one toggle and a ring. */
@media (max-width: 30rem) {
  .masthead {
    padding-inline: var(--space-sm);
  }

  .masthead__email {
    display: none;
  }
}