/* THE SITE MENU on the static pages (the free tools and the Lab): the same links
   as the home page's top bar (src/chrome/TopBar.tsx). Wide screens show the
   links in the bar; narrow ones fold them behind a Menu button (/tools/nav.js).
   Each page supplies --text, --muted and --yellow. */
.top { position: relative; }
.sitenav { list-style: none; margin: 0 auto 0 1.4rem; padding: 0; display: flex; gap: 0.2rem; flex-wrap: nowrap; }
.sitenav a { display: block; padding: 0.45em 0.7em; border-radius: 999px; color: var(--muted); text-decoration: none; font-size: 0.92rem; font-weight: 500; white-space: nowrap; transition: color 0.15s, background 0.15s; }
.sitenav a:hover { color: var(--text); background: rgba(127, 208, 255, 0.08); }
.sitenav a[aria-current="page"] { color: var(--yellow); }
.menu-btn { display: none; margin-left: auto; align-items: center; gap: 8px; padding: 0.55em 0.95em; border: 0; border-radius: 999px; background: transparent; color: var(--text); font: 600 0.9rem "Inter", sans-serif; cursor: pointer; box-shadow: 0 0 0 1px rgba(127, 208, 255, 0.35) inset; }
.menu-btn:hover { background: rgba(127, 208, 255, 0.08); }
.menu-btn span { width: 16px; height: 10px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; position: relative; }
.menu-btn span::after { content: ""; position: absolute; left: 0; right: 0; top: 2px; border-top: 2px solid currentColor; }
@media (max-width: 1180px) {   /* back to 1180px (2026-11-12) once the menu was trimmed to the business: eight links fit a laptop row again */
  .menu-btn { display: inline-flex; }
  .sitenav { display: none; position: absolute; right: 0; top: calc(100% + 10px); z-index: 20; flex-direction: column; min-width: 220px; margin: 0; padding: 8px; border-radius: 16px; background: #0a1430; box-shadow: 0 0 0 1px rgba(201, 163, 90, 0.4), 0 24px 60px rgba(0, 0, 0, 0.55); }
  .sitenav.open { display: flex; }
  .sitenav a { font-size: 1rem; padding: 0.7em 0.9em; border-radius: 10px; }
}
.sitenav .narrow { display: none; }
@media (max-width: 560px) { .top .start { display: none; } .sitenav .narrow { display: block; } .sitenav .narrow a { color: var(--yellow); } }