/* --- Mobile bottom-nav fix -------------------------------------------------
   The bottom bar carries 7 destinations. As *labelled* tabs they need ~414px
   of width, but the bar is only ~334px wide on a 360px phone, so the row
   overflowed its own rounded container: the tabs stopped shrinking (each one's
   min-width:auto won out over flex-1) and the active pill ended up flush against
   the screen edge, outside the bar.

   Below 640px the icons alone carry the bar, so all seven fit in equal columns
   with nothing truncated or overlapping. The labels stay in the DOM and in the
   accessibility tree (clipped, not display:none), so screen readers still
   announce every destination.

   From 640px up the labels return: the bar is capped at 36rem, which leaves
   ~71px of text per tab — room for all seven at 12px.

   Only the mobile bar is touched (nav.fixed.lg\:hidden); the desktop nav is a
   different element (nav.hidden.lg\:flex) and is left alone.
   -------------------------------------------------------------------------- */

nav.fixed.lg\:hidden > div {
  gap: 2px;
}

/* Let flex-1 actually divide the bar: without min-width:0 a flex item refuses
   to shrink below its label's width, which is what caused the overflow. */
nav.fixed.lg\:hidden > div > a {
  min-width: 0;
}

@media (max-width: 639.98px) {
  /* Icon-only on phones, with a 44px-tall touch target. */
  nav.fixed.lg\:hidden > div > a {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  nav.fixed.lg\:hidden > div > a > span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
}