/* The global navigation bar (nav.js), shared by every web surface: the apex
   site, the developer portal, the public docs and the admin panel. Built on
   the palette variables style.css and admin.css both define, with the same
   values as fallbacks so it reads the same on any host. The placeholder
   element reserves the bar's height in the flow; the bar itself is fixed. */
#bliss-nav { height: 48px; flex: none; }
.bliss-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: 48px;
  display: flex; align-items: center; gap: 4px; padding: 0 16px;
  background: var(--bg-0, #1e1f22); border-bottom: 1px solid var(--border, #3f4147);
  font-family: var(--font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
  font-size: 14px; line-height: 1.2; color: var(--text, #dbdee1);
}
.bliss-nav a { text-decoration: none; }
.bliss-nav :focus-visible { outline: 2px solid var(--blurple, #5865f2); outline-offset: 2px; }
.bliss-nav-brand {
  display: inline-flex; align-items: center; gap: 8px; margin-right: 12px; padding: 4px 6px; border-radius: 4px;
  font-weight: 800; font-size: 15px; letter-spacing: -0.02em; color: var(--text-strong, #f2f3f5);
}
.bliss-nav-brand:hover { text-decoration: none; color: var(--text-strong, #f2f3f5); }
.bliss-nav-brand img { width: 22px; height: 22px; }
.bliss-nav-links { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; flex: 1; min-width: 0; }
.bliss-nav-link, .bliss-nav-btn {
  display: inline-block; padding: 6px 10px; border-radius: 4px; border: 0; background: none; cursor: pointer;
  color: var(--muted, #949ba4); font: inherit; font-weight: 600; white-space: nowrap;
}
.bliss-nav-link:hover, .bliss-nav-btn:hover { background: var(--bg-3, #383a40); color: var(--text, #dbdee1); text-decoration: none; }
.bliss-nav-link[aria-current] { background: var(--bg-hover, #404249); color: var(--text-strong, #f2f3f5); }
/* The hosted web client is the one thing a visitor with no install can use,
   so it reads as a button rather than another link. */
.bliss-nav-link.is-cta { background: var(--blurple, #5865f2); color: #fff; }
.bliss-nav-link.is-cta:hover { background: var(--blurple-hover, #4752c4); color: #fff; }
.bliss-nav-account { display: flex; align-items: center; gap: 4px; margin-left: auto; list-style: none; padding: 0; }
.bliss-nav-user { display: inline-flex; align-items: center; gap: 8px; padding: 0 8px; color: var(--text-strong, #f2f3f5); font-weight: 600; white-space: nowrap; max-width: 220px; }
.bliss-nav-user span { overflow: hidden; text-overflow: ellipsis; }
.bliss-nav-avatar {
  width: 24px; height: 24px; border-radius: 50%; flex: none; overflow: hidden; object-fit: cover;
  background: var(--blurple, #5865f2); color: #fff; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700;
}
.bliss-nav-toggle { display: none; margin-left: auto; }
.bliss-nav-toggle svg { display: block; }

@media (max-width: 719px) {
  .bliss-nav-toggle { display: inline-flex; align-items: center; gap: 6px; }
  .bliss-nav-menu {
    display: none; position: fixed; top: 48px; left: 0; right: 0; max-height: calc(100vh - 48px); overflow-y: auto;
    flex-direction: column; align-items: stretch; gap: 2px; padding: 8px 12px 12px;
    background: var(--bg-0, #1e1f22); border-bottom: 1px solid var(--border, #3f4147); box-shadow: 0 8px 24px rgba(0,0,0,.4);
  }
  .bliss-nav.is-open .bliss-nav-menu { display: flex; }
  .bliss-nav-links, .bliss-nav-account { flex-direction: column; align-items: stretch; margin: 0; }
  .bliss-nav-account { border-top: 1px solid var(--border, #3f4147); padding-top: 6px; margin-top: 4px; }
  .bliss-nav-link, .bliss-nav-btn { display: block; width: 100%; text-align: left; padding: 10px 12px; }
  .bliss-nav-user { padding: 8px 12px; max-width: none; }
}
@media (min-width: 720px) {
  .bliss-nav-menu { display: flex; align-items: center; flex: 1; min-width: 0; }
}