/* Order Flow — shared navigation strip
   =====================================================================================

   Included by index.html, app.html and docs.html. Every selector is scoped under .site-nav,
   every custom property is declared ON .site-nav rather than :root, and no bare element
   selector appears anywhere in this file. Nothing here can reach a page's own styles.

   The reverse direction needed real care: index.html styles anchors globally with
       a         { color: var(--flow); border-bottom: 1px solid var(--line); }
       a:hover   { border-bottom-color: var(--flow); }
       a:focus-visible { outline: 2px solid var(--flow); }
   which would otherwise paint an amber underline under every nav item. The rules below carry
   higher specificity and reset border/text-decoration explicitly, so the strip looks identical
   on a page that styles anchors and a page that does not.

   INCLUDE IT BEFORE THE PAGE'S OWN <style>, so a page can always override this file:

       <link rel="stylesheet" href="/nav.css">

   MARKUP CONTRACT — identical on all three pages:

       <nav class="site-nav" aria-label="Primary">
         <div class="site-nav__inner">
           <a class="site-nav__mark" href="/">Order<span class="site-nav__slash">/</span>Flow</a>
           <ul class="site-nav__links">
             <li><a href="/">Home</a></li>
             <li><a href="/app" aria-current="page">Play</a></li>
             <li><a href="/docs">Docs</a></li>
           </ul>
         </div>
       </nav>

   Mark the current page with aria-current="page". The amber styling keys off that attribute,
   so the accessible state and the visible state cannot drift apart — there is no second class
   to remember to update.

   OPTIONAL BITS
   - Network chip:  <span class="site-nav__net">…</span> as the last child of __inner.
     Write its text from the page's own chain config at runtime rather than typing the chain id
     into the markup, so the chip can never claim a network the app is not actually talking to.
   - Skip link:     <a class="site-nav__skip" href="#main">Skip to content</a> as the FIRST child
     of .site-nav. Invisible until focused.
   - Sticky:        add .site-nav--sticky. Off by default on purpose — index.html sets
     `body { overflow-x: hidden }`, which turns the body into a scroll container and makes
     position:sticky unreliable in several browsers. Only opt in on a page without that rule.
   - Width:         the strip's inner column matches index.html's 860px .wrap. A wider page (the
     app terminal, most likely) can widen it without editing this file:
         .site-nav { --site-nav-width: 1180px; }
     in the page's own <style>, which wins on load order.
   ===================================================================================== */

.site-nav {
  --site-nav-width: 860px;

  --nav-ground: #0b0e14;
  --nav-line: #252e3d;
  --nav-ink: #dde3ec;
  --nav-muted: #7c8798;
  --nav-accent: #ffb020;
  --nav-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  display: block;
  position: relative;
  z-index: 40;
  background: var(--nav-ground);
  border-bottom: 1px solid var(--nav-line);
  font-family: var(--nav-mono);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

/* A page may or may not ship a box-sizing reset. Assume it does not. */
.site-nav,
.site-nav *,
.site-nav *::before,
.site-nav *::after {
  box-sizing: border-box;
}

.site-nav--sticky {
  position: sticky;
  top: 0;
}

.site-nav__inner {
  max-width: var(--site-nav-width);
  margin: 0 auto;
  padding: 0 24px;
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Wordmark, matching the h1 lockup on index.html: neutral word, amber slash. */
.site-nav__mark {
  margin-right: auto;
  padding: 6px 0;
  font-family: var(--nav-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  color: var(--nav-ink);
  text-decoration: none;
  border: 0;
  transition: opacity 120ms linear;
}

.site-nav__mark:hover,
.site-nav__mark:focus {
  color: var(--nav-ink);
  border: 0;
  opacity: 0.78;
}

.site-nav__slash {
  color: var(--nav-accent);
}

.site-nav__links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__links li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__links a {
  display: block;
  padding: 8px 11px 6px;
  font-family: var(--nav-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--nav-muted);
  text-decoration: none;
  border: 0;
  border-bottom: 2px solid transparent;
  transition: color 120ms linear, border-color 120ms linear;
}

.site-nav__links a:hover {
  color: var(--nav-ink);
  border-bottom-color: var(--nav-line);
}

.site-nav__links a[aria-current="page"] {
  color: var(--nav-accent);
  border-bottom-color: var(--nav-accent);
}

.site-nav a:focus-visible {
  outline: 2px solid var(--nav-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Optional network chip. Text is written by the page from its own chain config. */
.site-nav__net {
  padding: 2px 8px;
  border: 1px solid var(--nav-line);
  border-radius: 2px;
  font-family: var(--nav-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.6;
  white-space: nowrap;
  color: var(--nav-muted);
  font-variant-numeric: tabular-nums;
}

.site-nav__net--live {
  color: var(--nav-accent);
  border-color: var(--nav-accent);
}

.site-nav__skip {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 10px 14px;
  font-family: var(--nav-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nav-ground);
  background: var(--nav-accent);
  text-decoration: none;
  border: 0;
}

.site-nav__skip:focus {
  left: 0;
  z-index: 1;
}

@media (max-width: 560px) {
  .site-nav__inner {
    min-height: 46px;
    padding: 0 16px;
    gap: 8px;
  }

  .site-nav__links {
    gap: 0;
  }

  .site-nav__links a {
    padding: 8px 7px 6px;
    letter-spacing: 0.1em;
  }

  .site-nav__net {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav__mark,
  .site-nav__links a {
    transition: none;
  }
}

@media print {
  .site-nav {
    display: none;
  }
}