/* HQ's own navigation: the wings this person's grants reach. The shell's, because a wing is where
   pages live and no page knows about the others. Tokens only, like everything else.

   In the top line on the ground beside the mark, as the Spec draws it (sheet 1b): each wing a word
   in the ground's grey, the one you are on a round pill in the shell's colours, because a nav pill
   rests on the ground (the corners rule). An empty nav draws nothing at all, which is what somebody
   with no wings should see. */
.wings {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  font-size: var(--text-nav);
  font-weight: var(--weight-medium);
}

.wings:empty {
  display: none;
}

.wing {
  padding: var(--nav-pill-padding);
  border-radius: var(--radius-pill);
  color: var(--color-muted);
  text-decoration: none;
}

.wing:hover {
  color: var(--color-ink);
}

.wing:focus-visible {
  outline: var(--focus-width) solid var(--color-accent);
  outline-offset: var(--focus-offset);
}

/* `leptos_router`'s `<A>` marks the entry whose route is showing. */
.wing[aria-current="page"] {
  background: var(--color-shell);
  color: var(--color-shell-ink);
}

/* **HQ's top line holds one row on a phone** (the fifth polish round, measured at 390 px: the 36rem
   rule before it still wrapped *Dark* and *Sign out* onto a second line, since the three wings alone
   run to 304 px). Under 36rem the first name and its hairline go (who is signed in is the person
   holding the phone; "Sign out" stays), and so does the "HQ" chip beside the mark, because the wings
   beside it already say which site this is; the wings, the theme word and "Sign out" take the quiet
   size, the wings' pills close to 6 px a side, every gap to the smallest step and the line's edge to
   the shell's. What is left is about 380 px, one row on a 390 px phone and anything wider. Narrower than that
   (a 375 or 360 px phone) the top line wraps as it always could, rather than scroll or lose the
   theme switch. */
@media (max-width: 36rem) {
  /* The top line and the page's own gutter close in together. */
  .frame-wide .frame-top {
    gap: var(--space-2);
    padding-inline: var(--shell-inset-narrow);
  }

  .frame-wide .page {
    padding-inline: var(--space-4);
  }

  .frame-wide .frame-start,
  .frame-wide .frame-end,
  .frame-wide .whoami {
    gap: var(--space-1);
  }

  .frame-wide .wings {
    gap: 0;
    font-size: var(--text-quiet);
    white-space: nowrap;
  }

  .frame-wide .wing {
    padding-inline: calc(var(--space-1) * 1.5);
  }

  .frame-wide .frame-end .theme-toggle,
  .frame-wide .whoami .button-quiet {
    font-size: var(--text-quiet);
  }

  .frame-wide .site-mark-site,
  .frame-wide .whoami-name,
  .frame-wide .whoami-rule {
    display: none;
  }
}