exe-topbar,
exe-topbar * {
  box-sizing: border-box;
}

exe-topbar {
  display: block;
  /* The shared topbar also renders on 16px-root web pages. Keep its local
     type scale stable when the Vue app uses a 13px root for PrimeVue. */
  font-size: 16px;
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace);
}

exe-topbar .exe-topbar-header {
  padding: 0;
  background: var(--surface-card, var(--color-surface, #fff));
  border-bottom: 1px solid var(--surface-border, var(--color-border, #e5e5e5));
  position: sticky;
  top: 0;
  z-index: 100;
}

exe-topbar .app-menubar {
  max-width: 1000px;
  margin: 0 auto;
  padding: 1rem 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

exe-topbar .nav-left {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  min-width: 0;
}

exe-topbar .nav-logo {
  display: flex;
  align-self: center;
  flex: 0 0 auto;
}

exe-topbar .logo-img {
  width: 24px;
  height: 24px;
}

exe-topbar .logo-text {
  color: var(--text-color, var(--color-text, #111));
  font-size: 0.9em;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

exe-topbar .docs-link {
  color: var(--text-color-secondary, var(--color-text-secondary, #666));
  font-size: 0.85em;
  text-decoration: none;
  white-space: nowrap;
}

exe-topbar .docs-link:hover,
exe-topbar .logo-text:hover {
  color: var(--text-color, var(--color-text, #111));
  text-decoration: none;
}

exe-topbar .nav-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  font-size: 0.85em;
}

exe-topbar .nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 6px 10px;
  background: var(--btn-bg, transparent);
  border: 1px solid var(--btn-border, var(--color-border-input, #e0e0e0));
  border-radius: 6px;
  color: var(--btn-text, var(--color-text-secondary, #666));
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  line-height: 1;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}

exe-topbar .nav-login-btn {
  padding: 0.4rem 1rem;
  border-color: #d1d5db;
  color: #6b7280;
}

exe-topbar .nav-btn:hover {
  background: var(--btn-hover-bg, transparent);
  border-color: var(--btn-hover-border, var(--color-border, #999));
  color: var(--btn-hover-text, var(--color-text, #111));
  text-decoration: none;
}

/* "Get a Demo": filled, so it reads as the emphasized sibling of the
   outlined Login button. Mirrors .topbar-demo in common.css. Declared after
   .nav-btn:hover so the generic hover rule cannot flatten it. */
exe-topbar .nav-demo-btn,
exe-topbar .nav-demo-btn:hover {
  padding: 0.4rem 1rem;
  background: #111;
  border-color: #111;
  color: #fff;
}

exe-topbar .nav-demo-btn:hover {
  background: #374151;
  border-color: #374151;
}

exe-topbar .nav-btn.active {
  background: var(--btn-active-bg, var(--color-bg-subtle, #f8f8f8));
  border-color: var(--btn-active-border, var(--color-border-input, #e0e0e0));
  color: var(--text-color, var(--color-text, #111));
  font-weight: 600;
}

exe-topbar .nav-support-btn {
  justify-content: center;
  width: 30px;
  padding-inline: 6px;
}

exe-topbar .nav-icon {
  flex: 0 0 auto;
  font-size: 12px;
}

exe-topbar .nav-submenu-icon {
  flex: 0 0 auto;
  font-size: 10px !important;
}

exe-topbar .nav-dropdown {
  position: relative;
}

exe-topbar .nav-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 1000;
  min-width: 160px;
  padding: 6px;
  background: var(--surface-card, var(--color-surface, #fff));
  border: 1px solid var(--surface-border, var(--color-border, #e5e5e5));
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

exe-topbar .nav-menu[hidden] {
  display: none;
}


exe-topbar .nav-menu-label {
  min-width: 148px;
  padding: 8px 10px 6px;
  color: var(--text-color-secondary, var(--color-text-secondary, #666));
  font-size: 11px;
  line-height: 1.3;
  white-space: nowrap;
}

exe-topbar .nav-menu-label-text {
  display: block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Identity header affiliation row: "<team> team" plus a role chip. Only
   rendered for team members with a non-blank team name. */
exe-topbar .nav-menu-affiliation {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

exe-topbar .nav-menu-affiliation-team {
  max-width: 150px;
  overflow: hidden;
  color: var(--text-color, var(--color-text, #111));
  font-weight: 600;
  text-overflow: ellipsis;
}

exe-topbar .nav-menu-role-chip {
  flex: 0 0 auto;
  padding: 1px 5px;
  border: 1px solid var(--surface-border, var(--color-border, #e5e5e5));
  border-radius: 999px;
  color: var(--text-color-secondary, var(--color-text-secondary, #666));
  font-size: 9px;
  letter-spacing: 0.04em;
  line-height: 1.4;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Section eyebrow (e.g. "TEAM · Acme") above the team destinations. */
exe-topbar .nav-menu-eyebrow {
  max-width: 220px;
  overflow: hidden;
  padding: 6px 10px 2px;
  color: var(--text-color-secondary, var(--color-text-secondary, #666));
  font-size: 9px;
  letter-spacing: 0.06em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

exe-topbar .nav-menu-divider {
  height: 1px;
  margin: 4px 2px;
  background: var(--surface-border, var(--color-border, #e5e5e5));
}

exe-topbar .nav-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 148px;
  padding: 8px 10px;
  border-radius: 4px;
  color: var(--btn-text, var(--color-text-secondary, #666));
  font-size: 12px;
  text-decoration: none;
  white-space: nowrap;
}

exe-topbar .nav-menu-item:hover {
  background: var(--btn-hover-bg, var(--color-bg-subtle, #f8f8f8));
  color: var(--btn-hover-text, var(--color-text, #111));
  text-decoration: none;
}

exe-topbar .nav-menu-item.active {
  color: var(--text-color, var(--color-text, #111));
  font-weight: 600;
}

exe-topbar .nav-login-short {
  display: none;
}

exe-topbar .nav-demo-short {
  display: none;
}

@media (prefers-color-scheme: dark) {
  exe-topbar .nav-login-btn {
    border-color: #4b5563;
    color: #9ca3af;
  }

  exe-topbar .nav-login-btn:hover {
    border-color: #f3f4f6;
    color: #f3f4f6;
  }

  exe-topbar .nav-demo-btn,
  exe-topbar .nav-demo-btn:hover {
    background: #f3f4f6;
    border-color: #f3f4f6;
    color: #111;
  }

  exe-topbar .nav-demo-btn:hover {
    background: #fff;
    border-color: #fff;
  }

  exe-topbar .nav-menu {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
  }
}

@media (max-width: 768px) {
  exe-topbar .app-menubar {
    padding: 0.75rem 1rem;
    gap: 0.5rem;
  }

  exe-topbar .nav-left {
    gap: 0.5rem;
    flex-shrink: 1;
  }

  exe-topbar .logo-text {
    margin-right: 0.5rem;
    font-size: 0.8em;
  }

  exe-topbar .docs-link {
    font-size: 0.75em;
  }

  exe-topbar .nav-right {
    gap: 2px;
    font-size: 0.75em;
  }

  exe-topbar .nav-btn {
    padding: 6px 8px;
  }

  exe-topbar .nav-login-btn {
    padding: 0.3rem 0.6rem;
    font-size: 1em;
  }

  exe-topbar .nav-demo-btn,
  exe-topbar .nav-demo-btn:hover {
    padding: 0.3rem 0.6rem;
    font-size: 1em;
  }

  exe-topbar .nav-btn-text {
    display: none;
  }

  exe-topbar .nav-submenu-icon {
    margin-left: -2px;
  }

  exe-topbar .nav-login-full {
    display: none;
  }

  exe-topbar .nav-login-short {
    display: inline;
  }

  exe-topbar .nav-demo-full {
    display: none;
  }

  exe-topbar .nav-demo-short {
    display: inline;
  }

  /* The 18rem menu is wider than a small phone once the trigger's own left
     offset is added, so anchor it to the menubar (which spans the viewport)
     rather than the trigger, and let it use the bar's gutters. */
  exe-topbar .app-menubar {
    position: relative;
  }

  exe-topbar .nav-dropdown.uses-dropdown {
    position: static;
  }

  exe-topbar .nav-dropdown.uses-dropdown .nav-dropdown-menu {
    left: 1rem;
    right: 1rem;
    min-width: 0;
  }
}

/* Overflow-driven collapse. JS measures the menubar and sets these
   attributes when the nav links would otherwise wrap/overflow. blog is
   dropped first, then docs, so that whenever there is room the links
   are shown (preferring docs over blog), and the action buttons in
   nav-right always win the available space. */
exe-topbar[data-hide-blog] .docs-link-blog {
  display: none;
}
exe-topbar[data-hide-docs] .docs-link-docs {
  display: none;
}
exe-topbar[data-hide-wordmark] .logo-text {
  display: none;
}

/* "uses" nav dropdown */
exe-topbar .nav-dropdown.uses-dropdown {
  position: relative;
  display: inline-flex;
  align-items: baseline;
}

exe-topbar .nav-dropdown-trigger {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  /* font-size comes from the .docs-link class on the button so it
     matches the sibling nav links exactly. */
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

exe-topbar .nav-dropdown-caret {
  font-size: 0.75em;
  transition: transform 0.18s ease;
}

exe-topbar .nav-dropdown.uses-dropdown:hover .nav-dropdown-caret,
exe-topbar .nav-dropdown.uses-dropdown.open .nav-dropdown-caret {
  transform: rotate(180deg);
}

exe-topbar .nav-dropdown.uses-dropdown .nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.5rem;
  min-width: 18rem;
  background: var(--surface-card, var(--color-surface, #fff));
  border: 1px solid var(--surface-border, var(--color-border, #e5e5e5));
  border-radius: 0.5rem;
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.18), 0 4px 8px -4px rgba(0, 0, 0, 0.08);
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  z-index: 200;
}

exe-topbar .nav-dropdown.uses-dropdown .nav-dropdown-menu[hidden] {
  display: none;
}

exe-topbar .nav-dropdown-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.6rem 0.75rem;
  border-radius: 0.375rem;
  text-decoration: none;
  color: inherit;
  transition: background 0.12s;
}

exe-topbar .nav-dropdown-item:hover,
exe-topbar .nav-dropdown-item:focus-visible {
  background: var(--btn-hover-bg, var(--color-bg-subtle, #f3f4f6));
  outline: none;
  text-decoration: none;
}

exe-topbar .nav-dropdown-title {
  font-size: 0.85em;
  font-weight: 600;
  color: var(--text-color, var(--color-text, #111));
}

exe-topbar .nav-dropdown-desc {
  font-size: 0.75em;
  color: var(--text-color-secondary, var(--color-text-secondary, #666));
  line-height: 1.5;
}