/* ═══════════════════════════════════════════════════════════
   FIELDCUT. THE BAR
   One navigation bar for every page on the site, the landing page and the
   changelog alike, so the two can never drift apart again. The markup it
   expects, exactly:

     <div class="bar" id="bar">
       <div class="wrap nav-row">
         <a class="nav-mark" href="/" aria-label="FieldCut, home">
           <svg …the flower…></svg><span class="nav-word">FieldCut</span>
         </a>
         <nav class="nav-links" aria-label="Site">
           <a href="/#how">How it works</a>
           <a href="/get/">Pricing</a>
         </nav>
         <a class="btn btn--primary nav-cta" href="/get/"><span>Get for Mac</span></a>
       </div>
     </div>

   Two links and one button, since 23 September 2026. What's new, FAQ and
   Help all left the bar on Swayam's word. Two links fit beside the name on
   anything wider than a phone, so there is no burger: on a phone the links
   step out and the name and the button are what is left.

   Every value is a var(--fc-*) from ui/css/tokens.css.
   ═══════════════════════════════════════════════════════════ */

/* components.css has a .bar of its own, the kit's thin progress bar, 6px tall
   with its own radius and overflow:hidden. Same class name, different job,
   so all three are reset here or the nav sits clipped inside a 6px strip. */
.bar{
  position:fixed;inset:0 0 auto 0;z-index:60;height:auto;min-height:64px;
  padding:var(--fc-s-3) 0;border-radius:0;overflow:visible;
  background:transparent;background-color:transparent;border-bottom:1px solid transparent;
  transition:background-color var(--fc-dur-tap) var(--fc-ease),border-color var(--fc-dur-tap) var(--fc-ease),
             transform var(--fc-dur-slow) var(--fc-ease-out);
}
/* Glass once something is scrolling under it. */
.bar.is-on{
  background:var(--fc-glass);
  -webkit-backdrop-filter:var(--fc-glass-fx);backdrop-filter:var(--fc-glass-fx);
  border-bottom-color:var(--fc-border);
}
/* Out of the way while the app window fills the screen, because the app has
   a top bar of its own and two bars stacked read as one broken one. */
.bar.is-away{transform:translateY(-100%);transition-timing-function:var(--fc-ease-in)}

.nav-row{display:flex;align-items:center;gap:var(--fc-s-4);position:relative}

/* The flower and the name, one link home. */
.nav-mark{
  display:inline-flex;align-items:center;gap:var(--fc-s-2);flex-shrink:0;
  min-height:var(--fc-hit);padding:0 var(--fc-s-1);margin-left:calc(var(--fc-s-1) * -1);
  border-radius:var(--fc-r-pill);color:var(--fc-fg);text-decoration:none;
}
.nav-mark svg{width:var(--fc-s-5);height:var(--fc-s-5);display:block;color:var(--fc-ac)}
.nav-word{font-size:var(--fc-fs-6);font-weight:var(--fc-fw-up);letter-spacing:var(--fc-ls-mid);line-height:1}

.nav-links{display:flex;align-items:center;gap:var(--fc-s-1);margin-left:auto}
.nav-links a{
  display:inline-flex;align-items:center;min-height:var(--fc-ctrl-h-sm);
  padding:0 var(--fc-s-3);border-radius:var(--fc-r-pill);
  color:var(--fc-fg2);font-size:var(--fc-fs-4);font-weight:var(--fc-fw-mid);
  text-decoration:none;white-space:nowrap;
  transition:background-color var(--fc-dur-tap) var(--fc-ease),color var(--fc-dur-tap) var(--fc-ease);
}
.nav-links a:hover{background:var(--fc-bg2);color:var(--fc-fg)}
.nav-links a:active{transform:scale(var(--fc-press))}
.nav-cta{margin-left:var(--fc-s-2)}

@media (max-width:600px){
  .nav-links{display:none}
  .nav-cta{margin-left:auto}
}
@media (prefers-reduced-motion:reduce){
  .bar{transition:none}
}