/* css/mz-menu.css — the canonical TOP MENU (brand + nav + login slot).
 *
 * Single source for the `.mz-topbar` markup that both the React shared
 * component (MzTopbar in js/landing/mz-ui.jsx) and the PHP partial
 * (php/cosmic-header.php) emit, so the top bar is identical on every page.
 * Geometry matches the Vocal Remover model exactly (6/2/0 padding + 30px gap
 * to the hero). Uses only universal cosmic tokens (with fallbacks) so it works
 * regardless of which family stylesheet a page also loads.
 *
 * The dark/light toggle deliberately does NOT live here — it lives in the rail.
 * The right-hand `.mz-auth` slot is filled by js/mz-auth.js (login control).
 */
.mz-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 6px 2px 0; margin: 0 0 30px; }
.mz-brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink, #111827); }
.mz-brand-mark { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--accent2, #4f7cff), var(--accent, #7c2fe0));
  box-shadow: 0 16px 38px -14px color-mix(in srgb, var(--accent, #7c2fe0) 70%, transparent); }
.mz-brand-mark svg { width: 19px; height: 19px; }
.mz-brand-name { font-family: var(--font-body, system-ui, sans-serif); font-weight: 600; font-size: 16.5px; letter-spacing: -.02em; }
.mz-brand-name em { font-family: var(--font-display, var(--font-serif, Georgia, serif)); font-style: italic; font-weight: 400; color: var(--accent, #7c2fe0); }

.mz-nav { display: flex; align-items: center; gap: 8px; }
.mz-nav-link { color: var(--sub, #6b7280); text-decoration: none; font-family: var(--font-body, system-ui, sans-serif); font-size: 14px; font-weight: 500; padding: 8px 12px; border-radius: 10px; transition: color .18s ease, background .18s ease; white-space: nowrap; }
.mz-nav-link:hover { color: var(--ink, #111827); background: color-mix(in srgb, var(--ink, #111827) 8%, transparent); }

/* Legacy toggle — canonical toggle now lives in the rail; kept styled only so a
   transitional render isn't unstyled. New top bars omit it. */
.mz-theme-toggle { appearance: none; border: 1px solid color-mix(in srgb, var(--ink, #111827) 16%, transparent); background: color-mix(in srgb, var(--surface, #ffffff) 70%, transparent);
  width: 40px; height: 40px; border-radius: 11px; cursor: pointer; color: var(--sub, #6b7280); display: grid; place-items: center; transition: .18s ease; }
.mz-theme-toggle:hover { color: var(--accent, #7c2fe0); border-color: color-mix(in srgb, var(--accent, #7c2fe0) 45%, transparent); }

/* Login control slot — populated by js/mz-auth.js (Phase 2). Hidden while empty. */
.mz-auth { display: inline-flex; align-items: center; min-height: 40px; }
.mz-auth:empty { display: none; }

/* The rail is the navigation on small screens, so the top-bar links collapse. */
@media (max-width: 640px) { .mz-nav-link.hide-sm { display: none; } }

/* ── Login control (js/mz-auth.js fills the .mz-auth slot) ─────────────────── */
.mz-gbtn { display: inline-flex; align-items: center; }
.mz-signin-fallback { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line, #e5e7eb); background: color-mix(in srgb, var(--surface, #fff) 70%, transparent);
  color: var(--ink, #111827); text-decoration: none; font-family: var(--font-body, system-ui, sans-serif); font-size: 14px; font-weight: 600; }
.mz-signin-fallback:hover { border-color: color-mix(in srgb, var(--accent, #7c2fe0) 45%, transparent); color: var(--accent, #7c2fe0); }

.mz-user { position: relative; }
.mz-user-btn { appearance: none; border: 0; padding: 0; cursor: pointer; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden; background: var(--cta, var(--accent, #7c2fe0)); color: #fff;
  font-family: var(--font-body, system-ui, sans-serif); font-weight: 700; font-size: 15px;
  box-shadow: 0 0 0 1px var(--line, #e5e7eb), 0 6px 18px -8px rgba(0,0,0,.5); transition: box-shadow .15s ease, transform .12s ease; }
.mz-user-btn:hover { transform: translateY(-1px); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #7c2fe0) 55%, transparent), 0 10px 26px -10px rgba(0,0,0,.55); }
.mz-user-avatar { width: 100%; height: 100%; object-fit: cover; display: block; }
.mz-user-menu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 6800; min-width: 210px; padding: 8px;
  background: var(--surface, #fff); border: 1px solid var(--line, #e5e7eb); border-radius: 14px;
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.6); -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
  font-family: var(--font-body, system-ui, sans-serif); }
.mz-user-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--line, #e5e7eb); margin-bottom: 6px; }
.mz-user-name { font-weight: 600; font-size: 14px; color: var(--ink, #111827); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mz-user-email { font-size: 12px; color: var(--sub, #6b7280); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mz-user-item { display: block; padding: 9px 10px; border-radius: 9px; text-decoration: none; color: var(--ink, #111827); font-size: 14px; font-weight: 500; }
.mz-user-item:hover { background: color-mix(in srgb, var(--accent, #7c2fe0) 14%, transparent); color: var(--accent, #7c2fe0); }