/* Mobile header patch v3 — MAYABAY header (no overlap) */
@media (max-width: 640px){
  .topbar{
    padding: 12px 14px;
    gap:10px;
    grid-template-columns: auto 1fr auto; /* burger | flower | status */
  }

  .topbar-loc{
    display:none;
  }

  .topbar-right{
    gap:6px;
    flex-wrap:wrap;
    justify-content:flex-end;
    max-width: 56vw;
  }

  /* Prevent long auth text from overlapping the flower */
  #authPill, #healthPill{
    display:block;
    max-width: 56vw;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #healthPill{ max-width: 28vw; }

  .page-header{
    padding: 12px 14px 14px;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }

  /* No horizontal scroll on mobile */
  .page-header-actions{
    width:100%;
    flex-wrap:wrap;
    overflow-x:visible;
    -webkit-overflow-scrolling:auto;
    justify-content:flex-start;
    gap:8px;
    padding-bottom:0;
  }
}

/* Ultra small screens: stack right items */
@media (max-width: 420px){
  .topbar-right{
    max-width: 100%;
    justify-content:flex-start;
  }
  #authPill, #healthPill{
    max-width: 100%;
  }
}

/* Mobile-only bottom spacer so last elements aren't stuck to bottom of viewport */
@media (max-width: 640px){
  .list{
    padding-bottom: 50vh;
  }
}