.user-pill {
  max-width: 58%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .hero {
    flex-wrap: wrap;
    gap: 14px;
  }

  .hero > div {
    flex: 1 1 100%;
    min-width: 0;
  }

  .hero > .secondary {
    margin-left: auto;
  }

  .toast {
    top: 82px;
    width: calc(100% - 28px);
    text-align: center;
  }

  .tabbar button {
    font-size: 10px;
    line-height: 1.05;
  }
}