nav {
  /* Seems to only work for smaller screens? */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
}

.switcher {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  /*gap: var(--space-xs);*/
  font-family: "Source Sans 3", sans-serif;
  font-size: var(--font-size-xxl);
  color: var(--color-dark);
}

nav .switcher > * {
  padding: var(--space-2xs);
}

.switcher > :nth-last-child(n+ 5),
.switcher > :nth-last-child(n+ 5) ~ * {
  flex-basis: 100%;
}

.switcher > button {
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
}

/* Nav buttons paint background boxes (the More button's open-state
   highlight, tap flashes) while their siblings never do -- and every
   child's intrinsic height differs slightly (text line boxes vs cap-sized
   icons, diverging as the fluid type scales), so the row's align-items:
   center leaves whichever children are shorter than the tallest with a
   few px of nav background peeking above their own. Stretching just the
   buttons makes their painted boxes meet the row's edges; their content
   stays centered via each button's own inline-flex alignment. */
nav .switcher > button {
  align-self: stretch;
  align-items: center;
}

/* Bare-icon nav buttons (settings gear, stats chart): each wraps what was
   once a bare svg child of the switcher, so the svg keeps the switcher
   child's padding (mirroring nav .switcher > * above) -- box-sizing:
   border-box carves that padding out of the svg's fixed cap-sized box, so
   without it the icon renders visibly larger than its neighbors -- while
   the button itself goes chrome-less. Scoped above nav .switcher > *'s
   specificity so the button's own padding stays zeroed. */
nav .switcher > .nav-icon-btn {
  display: inline-flex;
  padding: 0;
  border: 0;
  background-color: transparent;
  cursor: pointer;
}

nav .switcher > .nav-icon-btn svg {
  padding: var(--space-xs);
}

/* Open-state highlight (added/removed by nav_controller.js while the
   button's modal is open) -- restated because the transparent background
   above outranks helpers.css's single-class .bg-vowls-inactive, whose
   load-order edge only settles ties in specificity. */
nav .switcher > .nav-icon-btn.bg-vowls-inactive {
  background-color: var(--color-vowls-inactive);
}