/* The bar: the wordmark, persistent search capsule, and menu.
   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 when an answer was given 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. */
/* A fixed height keeps the persistent search from shifting the scene. */
.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); }

/* THREE COLUMNS, and the two outer ones are THE SAME WIDTH. The capsule used to be centred in
   whatever was left between the wordmark and the menu, and those are not the same width, so it
   sat 57px right of the middle of the bar.

   Splitting the free space evenly is not enough on its own: once the bar gets tight the
   wordmark's column stops shrinking before the menu's does, the two go unequal, and the
   capsule drifts (measured: +14px at 940, +54px at 860). So both columns are pinned to the
   same fixed width -- the wider of the two contents, measured and written to --nav-side-w in
   layout(). The middle then takes everything left over and centres in it, which is the bar's
   own centre line at every width, and when there is not enough room it is the capsule that
   gives rather than the centring. */
/* The side columns align the logo and menu at their existing navigation position. */
.nav-side{ flex:0 0 var(--nav-side-w, auto); display:flex; align-items:center;
  height:var(--brand-h); margin-top:var(--nav-top); }
.nav-end{ justify-content:flex-end; }
/* The middle column anchors the persistent search capsule. */
.nav-mid{ flex:1 1 auto; display:flex; justify-content:center; min-width:0; position:relative; }

/* 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; }
.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 -- and symmetrical padding is what lets equal columns land the capsule on the
   true centre rather than half a menu-button off it. */
.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); }

/* Persistent search segments. Answers replace their placeholders in place. */
.nav .cap{position:absolute;left:50%;top:calc((var(--nav-h) - var(--rule) - var(--cap-h))/2);display:flex;align-items:stretch;height:var(--cap-h);width:min(620px,100%);min-width:0;transform:translateX(-50%);}
/* Preserve its geometry so the logo, menu and scene never shift during the story. */
.nav .cap[aria-hidden="true"]{visibility:hidden;pointer-events:none;}
.seg{display:flex;flex:1 1 0;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;padding:0 17px;border:0;background:var(--surface);cursor:pointer;text-align:left;white-space:nowrap;overflow:hidden;min-width:0;}
.seg+.seg{position:relative;}
.seg+.seg::before{content:'';position:absolute;left:0;top:var(--rule);bottom:var(--rule);width:var(--rule);background:var(--ink);z-index:var(--z-outline);pointer-events:none;}
.seg:hover{background:var(--surface-hover);}.seg.open{background:var(--surface-press);}
.seg:focus-visible{outline:2px solid var(--ink);outline-offset:-4px;}
.seg .lab{font:600 var(--fs-9-5) var(--font-mono);letter-spacing:var(--ls-label-mid);text-transform:uppercase;color:var(--text-muted);}
.seg .val{font:400 var(--fs-13-5) var(--font-mono);color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;width:100%;}
body.a-loc .seg.loc .val,body.a-set .seg.set .val,body.a-biz .seg.biz .val{color:var(--ink);}
.cap-home{display:none;align-items:center;justify-content:center;align-self:stretch;flex:0 0 43px;padding:0;border:0;background:var(--surface);color:var(--ink);cursor:pointer;}
body.city .cap-home{display:flex;}.cap-home:hover{background:var(--surface-press);}.cap-home svg{width:17px;height:17px;}
.cap-search{display:flex;align-items:center;justify-content:center;align-self:stretch;flex:0 0 44px;padding:0;border:0;background:var(--surface);color:var(--ink);cursor:pointer;}
.cap-search[hidden]{display:none;}.cap-search svg{width:20px;height:20px;}
.cap-search:hover:not(:disabled){background:var(--surface-hover);}.cap-search:disabled{opacity:.45;cursor:default;}
.cap-search:focus-visible{outline:2px solid var(--ink);outline-offset:-4px;}
.location-hint{position:absolute;display:flex;align-items:flex-end;gap:6px;padding:0;border:0;background:transparent;color:var(--ink);font:500 14px var(--font-mono);cursor:pointer;white-space:nowrap;}
.location-hint[hidden]{display:none;}.location-hint svg{width:28px;height:33px;}.location-hint span{padding-bottom:1px;}
@media(max-width:1100px){.seg{padding:0 11px;}.seg .val{font-size:12px;}}
@media(max-width:820px){.seg{padding:0 9px;}.seg .lab{font-size:8.5px;letter-spacing:.04em;}.seg .val{font-size:11px;}}
@media(max-width:700px){
 .brand img.brand-word{display:none;}.brand img.brand-mark{display:block;height:var(--brand-h-mark);}.nav{gap:10px;}
 .nav .cap{width:100%;}.seg{padding:0 7px;}.seg .val{font-size:10px;}.seg .lab{font-size:9px;letter-spacing:0;}
 body:not(.a-loc) .seg.loc .val,body:not(.a-set) .seg.set .val,body:not(.a-biz) .seg.biz .val{display:none;}
 body:not(.a-loc) .seg.loc .lab,body:not(.a-set) .seg.set .lab,body:not(.a-biz) .seg.biz .lab{color:var(--ink);}
 body.city .cap-home{display:none;}
}
@media(min-width:701px) and (max-width:1000px){.brand img.brand-word{height:17px;}}

/* ---- the bar's dropdown ----
   A question reopened in place, hung under the segment that asked it. Placed in script
   (src/navpop.js), because it is anchored to a segment whose width is its answer's.

   IT IS NOT A SURFACE. What you see inside it is: the field is one, its list is another, and
   the setup's two rows are a third. A box around them would be a fourth outline drawn around
   three, and -- because a surface CLIPS to its own curve -- it would cut the field's list off
   at its own bottom edge.

   Its contents are styled by BEING IN HERE rather than by a state class, so a node that has
   been put back where it came from cannot be left looking open. */
.nav-pop{ position:absolute; left:0; top:100%; display:none; z-index:var(--z-menu); }
.nav-pop.on{ display:block; }
.nav-pop > .combo{ display:block; }
/* 18px, which is the segment's own padding: the answer in the field lands on the same
   vertical as the answer in the segment it dropped out of. */
.nav-pop > .combo input{ width:100%; height:var(--cap-h); font-size:var(--fs-14);
  padding:0 18px; }
/* The setup's two rows live in the bar and nowhere else, so they are hidden until they are
   moved in -- and in here they stand in the flow rather than dropping out of a field. */
#setupMenu{ display:none; }
.nav-pop > #setupMenu{ display:block; position:static; }
/* The trade's field is NOT hidden the same way, because it lives in the panel now: the third
   question is asked there with a field and cards, exactly as the first one is asked over the
   country. It is still only ONE box -- clicking BUSINESS in the bar moves this very node up
   into the dropdown and puts it back afterwards -- so it needs no display rule of its own. */

.nav-pop .menu-list{overscroll-behavior:contain;}