/* ---------------------------------------------------------------------------
   mm-nav — the top bar every matrixmgmt.xyz dashboard shares.

   Canonical copy lives in workspace/shared/mm-nav/. It is duplicated into each
   project rather than imported, for the same reason _sso.js is: the dashboards
   deploy separately and share no package or build step. Edit here, then run
   shared/mm-nav/sync.sh to push it out.

   The class names are the staff portal's, which had the most developed bar of
   the five. Adopting its vocabulary rather than inventing a prefixed one means
   the portal's permission-sensitive nav needed no markup changes to join.

   The farm keeps its own inline copy inside farm-gateway/nav.js, because that
   bar is injected into third-party HTML on the way out and cannot load a
   stylesheet the normal way. Its palette is kept in step with this file.
--------------------------------------------------------------------------- */

.nav {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 10px 16px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font: 14px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: #e6edf3;
}

.nav a,
.nav button {
  color: #8b949e;
  text-decoration: none;
  font-size: .88rem;
  font-family: inherit;
  padding: 4px 0;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.nav a:visited { color: #8b949e; }
.nav a:hover,
.nav button:hover { color: #e6edf3; text-decoration: none; }
.nav a.active { color: #58a6ff; border-bottom-color: #58a6ff; font-weight: 600; }

/* The brand doubles as the menu button for the dashboard switcher, so it opts
   out of the dimmed link colour and the underline every other item gets. */
.nav .brand {
  font-weight: 700;
  font-size: 1rem;
  margin-right: 4px;
  white-space: nowrap;
  color: #e6edf3;
}
.nav a.brand { color: #e6edf3; border-bottom: 0; }
.nav a.brand:visited { color: #e6edf3; }
.nav .brand .domain { color: #58a6ff; font-weight: 400; }
.nav a.brand .caret { color: #8b949e; font-size: .65rem; font-weight: 400; }
.nav a.brand:hover .caret { color: #58a6ff; }

.nav .spacer { flex: 1; }
.nav .who {
  color: #8b949e;
  font-size: .82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 26ch;
}
.nav form { display: inline; margin: 0; }

.navdrop { position: relative; display: inline-block; }
.dropmenu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 6px;
  min-width: 170px;
  z-index: 40;
  box-shadow: 0 8px 24px rgba(1, 4, 9, .6);
}
.dropmenu a {
  display: block;
  padding: 7px 10px;
  border-radius: 6px;
  border-bottom: 0;
  white-space: nowrap;
}
.dropmenu a:hover { background: #21262d; color: #e6edf3; }
.dropmenu a.active { border-bottom: 0; }
.dropmenu.sites { min-width: 190px; }
.dropmenu.sites a.current { color: #58a6ff; font-weight: 600; }
.dropmenu.sites .tick { float: right; margin-left: 12px; }
.dropmenu[hidden] { display: none; }

@media (max-width: 560px) {
  .nav { gap: 11px; padding: 9px 12px; }
  .nav .who { display: none; }
}