/* ============================================================
   GUARDIAN MESH — UNIFIED NAVIGATION (variant D, locked)
   Single source of truth for the gated-page header pattern.

   One row, full-bleed (24px gutter), 56px tall.
   Layout:  [wordmark→home]  [Home › Partner Portal › Page]  [admin badge]

   Rendered by js/mesh-nav.js. Every gated page calls
   MeshNav.init({ page: '...' }) and gets the same chrome.

   Class names are namespaced (`.mesh-nav-*`) so the legacy
   `.id-bar` / `.site-nav` rules in components.css continue to
   apply on public pages and tools that haven't migrated.
   ============================================================ */

.mesh-nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 16px;
  height: 56px;
  padding: 0 24px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  font-family: var(--font-primary);
}
[data-theme="dark"] .mesh-nav { background: rgba(26, 26, 26, 0.96); }

/* ── Wordmark logo → /home ──
   Wordmark image carries both shield and "Guardian Mesh"; we
   rely on filter: var(--nav-logo-filter) to invert in dark mode. */
.mesh-nav-logo {
  display: flex; align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.mesh-nav-logo-img {
  height: 19px;
  width: auto;
  filter: var(--nav-logo-filter);
  display: block;
}

/* ── Inline three-tier breadcrumbs ──
   Sits immediately right of the wordmark, separated by a thin
   divider so the eye reads logo + nav as one unit. */
.mesh-nav-crumbs {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  min-width: 0;          /* let breadcrumbs ellipsize, not the bar */
  padding-left: 14px;
  border-left: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mesh-nav-crumbs a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--transition-base);
}
.mesh-nav-crumbs a:hover { color: var(--text-primary); }
.mesh-nav-crumbs .sep {
  color: var(--text-faint);
  font-size: 10px;
  user-select: none;
}
.mesh-nav-crumbs .current {
  color: var(--text-primary);
  font-weight: 600;
}

/* Spacer — pushes the actions cluster to the right edge while
   leaving the breadcrumbs free to grow naturally next to the
   wordmark. */
.mesh-nav-spacer { flex: 1 1 auto; min-width: 16px; }

/* ── Right-side actions cluster ── */
.mesh-nav-actions {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}

/* Admin badge — auto-shown when /api/auth/verify reports
   user.admin === true. */
.mesh-nav-admin-badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 24px;
  padding: 0 10px;
  border-radius: 100px;
  background: #FFF7E0;
  color: #8C6A1A;
  border: 1px solid #F0D585;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.mesh-nav-admin-badge svg { width: 10px; height: 10px; }
[data-theme="dark"] .mesh-nav-admin-badge {
  background: rgba(255, 215, 100, 0.12);
  color: #F4D478;
  border-color: rgba(255, 215, 100, 0.28);
}

/* Mobile — hide breadcrumbs once the bar gets tight; keep the
   wordmark + admin badge so users still know where they are. */
@media (max-width: 768px) {
  .mesh-nav { padding: 0 16px; gap: 12px; }
  .mesh-nav-crumbs { padding-left: 10px; font-size: 11px; }
  .mesh-nav-admin-badge { padding: 0 8px; font-size: 9px; }
}
@media (max-width: 480px) {
  .mesh-nav-crumbs { display: none; }
}

/* Print — drop the chrome entirely so gated pages that print
   (brand-guidelines, partner-program-guide, etc) snapshot only
   their content. */
@media print {
  .mesh-nav { display: none !important; }
}