/* ── Site nav for the walkthrough ────────────────────────────────────────
   The tour is a self-contained static bundle served from /public, so it sits
   OUTSIDE Next routing and never gets the real <Navbar/>. Without this bar the
   page is a dead end: no main menu, no way back to the site.

   This is a hand-rolled copy of app/components/Navbar.tsx + Navbar.module.css.
   Every dimension below is COPIED from those files (74px bar, 56px logo, 30px
   wordmark, 16px links, 1024px collapse breakpoint, --amber #D4A017 underline)
   so the menu is the same size here as on every other page. If the real navbar
   changes, change it here too. The only omission is the Products dropdown —
   flattened to a single link to /products/universe/. */

/* Header + tour stack vertically; the tour takes whatever height is left. */
body {
  display: flex;
  flex-direction: column;
}
#root {
  height: auto;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* .tour / .tour-done ask for height:100%; with an auto-height flex parent that
   is unreliable, so stretch them as flex children instead. */
#root > * {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}

.site-nav {
  flex: 0 0 auto;
  position: relative;
  z-index: 900;
  height: 74px;                                   /* --nav-height */
  background: #0a1018;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.site-nav-inner {
  width: 100%;
  height: 100%;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-nav-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.site-nav-brand img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}
.site-nav-brand span {
  font-family: 'Saira Condensed', 'Impact', sans-serif;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 4px;
  color: #ffffff;                                 /* --text-score */
}

.site-nav-links {
  display: flex;
  align-items: center;
  gap: 0;
  height: 100%;
}
.site-nav-link {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 20px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #9ab5d2;                                 /* --text-meta */
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.site-nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20px;
  right: 20px;
  height: 2px;
  background: #D4A017;                            /* --amber */
  transform: scaleX(0);
  transition: transform 0.2s ease;
}
.site-nav-link:hover { color: #ffffff; }
.site-nav-link:hover::after { transform: scaleX(1); }
/* The walkthrough itself is the current page. */
.site-nav-link.current { color: #ffffff; }
.site-nav-link.current::after { transform: scaleX(1); }

.site-nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  background: transparent;
  border: 0;
}
.site-nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: #9ab5d2;
  transition: all 0.15s ease;
}
.site-nav-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.site-nav-toggle.open span:nth-child(2) { opacity: 0; }
.site-nav-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Same 1024px collapse as the real navbar — the horizontal row needs ~1000px. */
@media (max-width: 1024px) {
  .site-nav-toggle { display: flex; }

  .site-nav-inner { padding: 0 8px; }

  .site-nav-links {
    display: none;
    position: absolute;
    top: 74px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    height: auto;
    background: #0c1520;
    padding: 4px 0 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  }
  .site-nav-links.open { display: flex; }

  .site-nav-link {
    height: auto;
    padding: 13px 24px;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 14px;
  }
  .site-nav-link:last-child { border-bottom: none; }
  .site-nav-link::after { display: none; }
}