/* The bar: the wordmark on the left; Apply and the menu on the right.
   Stuck to the top edge. Its horizontal padding is set in script to the same margin the box
   below keeps, which is where the rhythm of the page comes from: bar, gap, box, gap, and the
   bar's own height IS the gap.

   Its height is fixed rather than grown from its contents, because that height is the page's
   margin: a bar that changed size would move the box, and the flight inside it, in mid-air.

   No border and no background here. Its underside is not a straight line -- it runs up into
   the two bottom corners on a smoothed curve, which no border-radius draws -- so the bar's
   white ground and its outline are ONE path, built in src/squircle.js and written into
   .nav-edge on every layout.

   The padding is a rule at the bottom, which is what the underside takes out of the bar: it
   leaves the contents centred in the white above the line rather than in the box. */
.nav{ position:fixed; top:0; left:0; right:0; z-index:var(--z-nav); display:flex;
  align-items:flex-start; gap:18px; background:none; border:0;
  height:var(--bar-h, var(--nav-h)); padding:0 0 var(--rule); }

/* Behind the bar's own content, and nothing else: .nav carries a z-index, so this sits inside
   its stacking context.

   ONE path, filled AND stroked. It is left OPEN across the top: an open path still fills as
   though it were closed, so the white ground reaches the top of the window while the stroke
   only ever draws the three sides that were actually written. That is the top border gone,
   without a second element to keep in step with the first.

   The path also runs past the window on the left, the right and the top by --nav-bleed. The
   stroke is centred on it, so a bleed of one full rule puts the entire width of the side
   stroke off screen: the corner curve runs out of the window instead of straightening into a
   vertical line drawn down the inside of it. */
.nav-edge{ position:absolute; left:0; top:0; width:100%; height:100%; z-index:var(--z-under);
  pointer-events:none; }
.nav-edge path{ fill:var(--paper); stroke:var(--ink); stroke-width:var(--rule); }

/* The two sides align the logo, Apply and the menu at the bar's existing vertical position. */
.nav-side{ flex:0 0 auto; display:flex; align-items:center;
  height:var(--brand-h); margin-top:var(--nav-top); }
.nav-end{ justify-content:flex-end; gap:var(--nav-end-gap); margin-left:auto; }

/* The wordmark by default; the mark alone when the bar is too narrow to carry the word.
   assets/brand/ is generated by tools/make_brand.py: the black files under source/ are the
   originals, everything else derives from them. */
.brand{ display:block; cursor:pointer; transition:opacity var(--t-hover) ease; }
.brand img{ display:block; height:var(--brand-h); width:auto; }
/* `.brand img` is a class AND an element, so `.brand-mark` alone loses to it and the mark
   showed up under the wordmark on every screen. Same two parts, and the later rule wins. */
.brand img.brand-mark{ display:none; }
/* The website's pages carry ONE logo image in a <picture>: the mark's file is the source for
   a bar 700px wide or less, the wordmark's otherwise, so a device downloads only the file it
   shows. The <picture> takes no box of its own; the image takes the height its file had. */
.brand picture{ display:contents; }
.brand:hover{ opacity:.62; }

/* The button is --burger-pad wider than its bars on each side. Pulling it back out by that
   much lines the bars up with the box's right edge while the bar's own padding stays
   symmetrical. */
.burger{ width:var(--burger-size); height:var(--burger-size); padding:0 var(--burger-pad);
  margin-right:calc(-1 * var(--burger-pad));
  border:0; background:none; cursor:pointer; display:flex; flex-direction:column;
  justify-content:center; gap:5px; }
.burger span{ display:block; height:var(--rule); background:var(--ink);
  transition:transform var(--t-fast) ease; }
.burger:hover span:first-child{ transform:translateX(2px); }
.burger:hover span:last-child{ transform:translateX(-2px); }

/* APPLY, beside the menu. The same ink control as the receipt's APPLY, so the two read as one
   action. A SURFACE with no outline (its ground is ink), for the page's smoothed corner. */
.nav-apply{ display:inline-flex; align-items:center; justify-content:center; flex:none;
  height:var(--nav-apply-h); padding:0 var(--nav-apply-pad); background-color:var(--ink);
  color:var(--on-ink); font:400 var(--fs-13)/1 var(--font-mono); letter-spacing:var(--ls-button);
  text-transform:uppercase; text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:background-color var(--t-hover) ease; }
.nav-apply:hover{ background-color:var(--ink-soft); }
.nav-apply:focus-visible::after{ background-image:var(--surface-focus); filter:invert(1); }

@media(max-width:700px){
 .brand img.brand-word{display:none;}.brand img.brand-mark,.brand img.brand-logo{display:block;height:var(--brand-h-mark);}.nav{gap:10px;}
 /* On a phone Apply leads the menu instead (styles/legal.css). */
 .nav-apply{display:none;}
}
@media(min-width:701px) and (max-width:1000px){.brand img.brand-word,.brand img.brand-logo{height:17px;}}