/* cvce-nav.css — the CVCE top navbar, and nothing else.
 *
 * One navbar on seven pages (2026-09-16/17): the three root pages (CVCE.html,
 * atlas_plates.html, module_browser.html) and the four tools (Data Explorer,
 * Navigator, Intelligence Report Builder, Deep Dives). The markup is identical on
 * all seven except for the relative prefix on its links and aria-current on the
 * page's own tab; scripts/dev/check_landing_layout.js compares the resolved links.
 *
 * ⚠️ SELF-CONTAINED ON PURPOSE. The tools do not load cvce.css — its global reset,
 * body background and `header` rules would restyle them — and they define their
 * own, different custom properties (the Data Explorer has a light theme). So every
 * colour here is a literal, the reset is scoped to the bar, and the font is
 * imported here rather than assumed. The literals are cvce.css's --border, --text,
 * --muted and --accent.
 *
 * Pages whose layout is pinned to the viewport (the Navigator; the Report Builder
 * and Deep Dives in report mode) must make room for the bar themselves; see the
 * `cvce-nav` notes in those files. Deployed to the site root by deploy_pages.sh. */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;800&display=swap");

.topbar {
  position: sticky; top: 0; z-index: 100; margin: 0; box-sizing: border-box;
  border-bottom: 1px solid rgba(255,255,255,.07); padding: 9px 28px;
  display: flex; align-items: center; gap: 16px;
  background: rgba(6,13,8,.97); backdrop-filter: blur(12px);
  font-family: 'Archivo', -apple-system, "Segoe UI", sans-serif; line-height: 1.6;
}
.topbar * { box-sizing: border-box; margin: 0; padding: 0; }
.tb-brand { display: flex; flex-direction: column; gap: 1px; text-decoration: none; flex-shrink: 0; }
.tb-lab { font-size: 8.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: #3cb54a; white-space: nowrap; }
.tb-title { font-size: 11px; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; color: #fff; white-space: nowrap; }
.tb-nav { display: flex; gap: 2px; flex-wrap: wrap; margin-left: auto; }
.topbar .tb-nav a {
  font-size: 11px; font-weight: 500; color: #7a9b7d;
  text-decoration: none; padding: 4px 9px; border-radius: 4px;
  transition: color .15s, background .15s; white-space: nowrap;
}
.topbar .tb-nav a:hover { color: #dde8dd; background: rgba(255,255,255,.06); }
.topbar .tb-nav a[aria-current="page"] { color: #fff; background: rgba(60,181,74,.14); }
/* The red INTERNAL button. ⚠️ It must NOT carry [data-internal-only]: the deploy
   strips that marker from the public copies, and the button has to survive it. */
.topbar .tb-internal {
  display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: #fff; background: #c0332c; border: 1px solid #e04b41;
  border-radius: 4px; padding: 5px 11px; text-decoration: none; white-space: nowrap; flex-shrink: 0;
  transition: background .15s;
}
.topbar .tb-internal:hover { background: #d63b32; }

@media (max-width: 760px) {
  .topbar { flex-wrap: wrap; }
  .tb-nav { order: 3; width: 100%; margin-left: 0; }
}
@media print {
  .topbar { display: none !important; }
}