/* nav.css — THE single source of truth for the customer top-nav (SINGLE SOURCE, do not duplicate).
   Loaded by BOTH surfaces: the server-rendered Answers pages (layout.templ) AND the React dashboard
   shell (index.html) which injects the same server-rendered nav markup. Contains ONLY the design
   tokens + nav rules — NO html/body/page styles — so it can load inside the Tailwind SPA without
   clobbering it. Change the nav here once; it appears on every page. */

:root {
  --bg: #0a0b0d;
  --bg-2: #101216;
  --bg-3: #171a1f;
  --line: #23272e;
  --line-2: #2d323b;
  --text: #cbd2dc;
  --text-dim: #7b8494;
  --text-faint: #565e6b;
  --accent: #34d399;      /* emerald — VQS visuals (grade chips, buttons, thermometer, arcs) */
  --accent-dim: rgba(52, 211, 153, 0.12);
  --nav-accent: #00FF41;  /* brand green (forge-400) — nav active state ONLY, matches the SPA */
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ── top bar ── */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 22px; height: 60px;
  border-bottom: 1px solid var(--line-2);
  background: var(--bg);
  position: sticky; top: 0; z-index: 40;
  font-family: var(--sans);
}
.topbar a { color: inherit; text-decoration: none; }
.brand { display: flex; align-items: center; gap: 16px; font-weight: 700; }

/* hamburger — pure <details>/<summary>, no JS */
.hmenu { position: relative; }
.hmenu-btn {
  list-style: none; cursor: pointer; display: flex; flex-direction: column;
  gap: 4px; width: 30px; height: 30px; align-items: center; justify-content: center;
  border-radius: 6px; margin-right: 2px;
}
.hmenu-btn::-webkit-details-marker { display: none; }
.hmenu-btn span { display: block; width: 17px; height: 2px; border-radius: 2px; background: var(--text); transition: background 0.2s; }
.hmenu-btn:hover span { background: #fff; }
.hmenu[open] .hmenu-btn span { background: var(--nav-accent); }
.hmenu-pop {
  position: absolute; left: 0; top: calc(100% + 8px); z-index: 60;
  min-width: 190px; padding: 6px;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.55); display: flex; flex-direction: column;
}
.hmenu-pop a { padding: 8px 12px; border-radius: 6px; font-size: 14px; color: var(--text-dim); }
.hmenu-pop a:hover { background: var(--bg-3); color: #fff; }
.hmenu-email {
  padding: 6px 12px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; color: var(--text-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Empty email slots (the SPA injects the nav with no email, then a client script fills them from
   localStorage) collapse until filled, so no empty row/gap shows. */
.hmenu-email:empty { display: none; }
.topbar-right .who:empty { display: none; }
.hmenu-out { margin-top: 4px; border-top: 1px solid var(--line); color: var(--text-dim) !important; }
.brand .prod { color: var(--text); font-size: 16px; letter-spacing: 0.01em; }
.brand .prod:hover { color: #fff; }
.brand .prod.active { color: var(--nav-accent); }
.brand .dot { color: var(--text-faint); }
.topbar-right { display: flex; align-items: center; gap: 20px; font-size: 14px; font-weight: 500; }
.topbar-right a { color: var(--text); }
.topbar-right a:hover { color: #fff; }
.topbar-right .who { color: var(--text-dim); font-family: var(--mono); font-size: 12px; }