/* 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 rule below. */
@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;
  }
}

/* **And on a 375 or 360 px phone** (the cleanup round, 21 Oct 2026, the candidates' 25: the top line
   wrapped *Dark* and *Sign out* to a second row there): under 24rem the theme word gives way to its
   glyph (theme-toggle.css; the button's label still says what it does) and the wings' pills close
   to 4 px a side, which keeps one row at 360 px. */
@media (max-width: 24rem) {
  .frame-wide .frame-end .theme-toggle-word {
    display: none;
  }

  .frame-wide .frame-end .theme-toggle-glyph {
    display: inline;
  }

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