/* The ONE nav stylesheet - loaded by every page that renders the shared
 * header (js/nav-component.js). History (don't regress): the site once
 * had three nav geometries (index 12px/72px + 780px breakpoint, this
 * component 16px/32px + 1050px, legal pages a third) and desktop
 * flex-wrap, so the header changed height and shuffled links between
 * pages and at mid widths - the "buttons not locked in" defect. A second
 * round (7 Sep 2026) found the links still moving on every signed-in load
 * because hidden links were revealed after /api/auth/me, the auth area's
 * "fixed" basis was narrower than the chip inside it, and the bar took
 * the page's web font (Inter, display=swap, loaded after cookie consent
 * on index.html and never on the other pages) so it reflowed when the
 * font arrived and looked different from page to page. Rules here exist
 * to make the bar IMMOVABLE and IDENTICAL on every page:
 *  - one breakpoint (1200px) below which the menu is a hamburger;
 *  - above it .nav-links is flex-wrap:nowrap, so a second row is
 *    impossible;
 *  - the link row is decided at first paint and never gains an item
 *    (nav-component.js: no hidden entries); the signed-in state only ever
 *    changes the CONTENT of #navAuthArea;
 *  - #navAuthArea is a FIXED width (--nav-auth-w) with min-width:0, so
 *    even an over-long name cannot grow it (the name truncates instead);
 *    240px is what the widest chip needs (pill + Sign out), and 8 links +
 *    brand + 240px still fit at 1201px, the narrowest desktop width;
 *  - the brand image has explicit dimensions, so the space the links are
 *    centred in is the same before and after the logo loads;
 *  - the bar uses a SYSTEM font stack (--nav-font), never the page's web
 *    font: a swap moves every link by a few px and repaints the blurred
 *    backdrop layer beneath it, which is the "blurred then sharp" the
 *    owner saw. Eighteen of nineteen pages never load Inter, so this is
 *    also what the bar already looked like almost everywhere;
 *  - the frosted backdrop (backdrop-filter) sits on a ::before layer
 *    BEHIND the text, so the text-bearing layer is never the one being
 *    re-rasterised while the page scrolls under it;
 *  - the bar's colours are pinned here (index.html's palette, the landing
 *    page being the reference look) instead of read from each page's
 *    :root, whose values differ slightly between pages;
 *  - explicit control heights so chip vs button never changes bar height;
 *  - the nav sign-in button is exempt from page-level .btn hover
 *    transforms (index lifts buttons 1px on hover - fine for CTAs, not
 *    for a nav that must stay locked).
 *
 * Two variants (see nav-component.js): the PUBLIC bar, and the SLIM bar
 * (nav.topnav-slim) on signed-in app pages: brand + Dashboard chip + name
 * + Sign out, never a hamburger, because the dashboard sidebar
 * (css/app-shell.css) is the navigation there.
 */
/* The bar is centred in the viewport, so the viewport must not change
   width after first paint. On pages whose content arrives asynchronously
   (For Sale listings, blog posts) the vertical scrollbar appeared only
   once the page had grown, took 15px off the width and moved every
   centred link ~7px and the auth area 15px - measured on for-sale.html
   and blog.html, 0px on pages that were tall from the start. Reserving
   the gutter on every page makes short and tall pages lay out the same.
   A no-op with overlay scrollbars (macOS, phones). Set here because this
   stylesheet is the one file every page loads. */
html{scrollbar-gutter:stable;}
nav.topnav{
  --nav-line:#24314F;
  --nav-border:#2C3F68;
  --nav-text:#8C97AE;
  --nav-text-strong:#F6F3EC;
  --nav-gold-300:#F0DBA8;
  --nav-gold-500:#D4AF6A;
  --nav-rose:#F2707A;
  --nav-auth-w:240px;
  --nav-font:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  position:sticky; top:0; z-index:50;
  isolation:isolate; /* keeps the ::before backdrop layer inside this bar's stacking context */
  border-bottom:1px solid var(--nav-line);
  font-family:var(--nav-font);
  line-height:1.45;
  color:var(--nav-text-strong);
}
/* The frosted glass, on its own layer behind the text (see header). */
nav.topnav::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(7,11,20,.72);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}
.topnav-inner{
  display:flex; align-items:center; gap:20px;
  padding:12px 32px; max-width:1440px; margin:0 auto;
  min-height:64px; box-sizing:border-box;
}
.brand{display:flex; align-items:center; flex:none; width:136px; height:38px; text-decoration:none; color:inherit;}
.brand img{display:block; width:136px; height:38px;}
.nav-links{
  display:flex; flex:1 1 0; justify-content:center; gap:18px;
  font-size:14px; color:var(--nav-text); align-items:center;
  flex-wrap:nowrap; min-width:0;
}
.nav-links a{white-space:nowrap; text-decoration:none; color:inherit; line-height:20px; padding:4px 0; transition:color .15s;}
.nav-links a:hover{color:var(--nav-text-strong);}
.nav-links a[aria-current="page"]{color:var(--nav-gold-300); font-weight:600;}
/* The current page's link is bold, and bold is 1-2px wider, so the centred
   row re-centred by up to 1px from page to page (measured: Calculator at
   271.95 on "/", 270.61 on /market-intel.html, 1280px). Every public link
   reserves its BOLD width with a hidden, zero-height bold copy of its own
   label (data-label, written by nav-component.js), so the row is the same
   width on every page and no link's text moves when it becomes current.
   Scoped to [data-label] so the slim bar's Dashboard chip (an inline-flex
   box with a gap) does not gain an empty flex item. */
.nav-links a[data-label]::after{
  content:attr(data-label); display:block; height:0; overflow:hidden; visibility:hidden;
  font-weight:600; pointer-events:none;
}
#navAuthArea{
  flex:0 0 var(--nav-auth-w); width:var(--nav-auth-w); min-width:0;
  display:flex; justify-content:flex-end; align-items:center;
  white-space:nowrap; height:40px;
}
/* 39px is what the landing page's .btn (9px padding + a 21px line) always
   measured, so the signed-out bar stays pixel-for-pixel what it was;
   the height is pinned so a page's .btn rules cannot change it. */
#navAuthArea .btn, #navAuthArea .nav-signin{
  height:39px; padding:0 20px !important; line-height:39px; transform:none !important; box-sizing:border-box;
}
#navAuthArea .btn:hover, #navAuthArea .nav-signin:hover{transform:none !important;}
.nav-signin{
  background:linear-gradient(135deg, var(--nav-gold-300), var(--nav-gold-500));
  color:#151515; border:none; border-radius:999px; font:inherit; font-size:14px;
  font-weight:600; cursor:pointer;
}
.account-chip{display:flex; align-items:center; justify-content:flex-end; gap:8px; font-size:13.5px; color:var(--nav-text); height:36px; max-width:100%; min-width:0;}
/* The name is the way into the dashboard (/app). A pill, so it reads as a
   control; the name truncates rather than widening the chip. */
.account-chip .account-link{
  display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px; min-width:0;
  border:1px solid var(--nav-border); border-radius:999px; box-sizing:border-box;
  text-decoration:none; color:var(--nav-text-strong); transition:border-color .15s, color .15s;
}
.account-chip .account-link svg{width:14px; height:14px; flex:none; color:var(--nav-gold-500);}
.account-chip .account-link b{font-weight:600; max-width:100px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.account-chip .account-link:hover{border-color:var(--nav-gold-500); color:var(--nav-gold-300);}
.account-chip .account-link:focus-visible{outline:2px solid var(--nav-gold-500); outline-offset:2px;}
.account-chip .account-name{color:var(--nav-text-strong); font-weight:600; max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.account-chip .signout{
  color:var(--nav-rose); cursor:pointer; background:none; font:inherit; font-size:13px; font-weight:600;
  border:1px solid var(--nav-rose); border-radius:999px; height:32px; padding:0 12px; flex:none; box-sizing:border-box;
}
.account-chip .signout:hover{background:rgba(242,112,122,.1);}
/* Slim variant: one chip on the left, no centring. */
nav.topnav-slim .nav-links{justify-content:flex-start;}
/* Written as .nav-links .nav-dash-chip on purpose: the generic
   .nav-links a rule above (padding:4px 0) outranks a bare .nav-dash-chip
   and stripped the chip's side padding on desktop, so the chip was a
   different shape above and below the 1200px breakpoint (review, 7 Sep
   2026). */
.nav-links .nav-dash-chip{
  display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 14px; box-sizing:border-box;
  border:1px solid var(--nav-border); border-radius:999px; color:var(--nav-text-strong);
  font-weight:600; font-size:13.5px; white-space:nowrap; text-decoration:none;
}
.nav-dash-chip::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--nav-gold-500); flex:none;}
.nav-links .nav-dash-chip:hover, .nav-links .nav-dash-chip[aria-current="page"]{border-color:var(--nav-gold-500); color:var(--nav-gold-300);}
.nav-toggle{
  display:none; background:none; border:1px solid var(--nav-border); border-radius:9px;
  width:40px; height:40px; align-items:center; justify-content:center; cursor:pointer; flex:none;
}
.nav-toggle span{position:relative; width:18px; height:2px; background:var(--nav-text-strong); border-radius:2px;}
.nav-toggle span::before, .nav-toggle span::after{
  content:""; position:absolute; left:0; width:18px; height:2px; background:var(--nav-text-strong);
  border-radius:2px; transition:transform .18s ease, top .18s ease;
}
.nav-toggle span::before{top:-6px;}
.nav-toggle span::after{top:6px;}
nav.topnav.nav-open .nav-toggle span{background:transparent;}
nav.topnav.nav-open .nav-toggle span::before{top:0; transform:rotate(45deg);}
nav.topnav.nav-open .nav-toggle span::after{top:0; transform:rotate(-45deg);}
/* ONE breakpoint. 1200px because the full link row + brand + auth area
 * needs ~1180px - below that the row physically cannot fit on one line,
 * and wrapping it was the up-and-down bug. */
@media (max-width:1200px){
  .nav-toggle{display:flex;}
  .topnav-inner{flex-wrap:wrap; gap:16px;}
  .brand{margin-right:auto;}
  .nav-links{
    display:none; order:4; width:100%; flex-direction:column; align-items:flex-start; gap:2px;
    padding-top:12px; margin-top:12px; border-top:1px solid var(--nav-line);
  }
  .nav-links a{width:100%; padding:11px 4px;}
  #navAuthArea{display:none; order:5; width:100%; flex:0 0 100%; height:auto; padding-top:12px; justify-content:flex-start;}
  #navAuthArea .btn, #navAuthArea .nav-signin{width:100%;}
  .account-chip{justify-content:flex-start; width:100%;}
  nav.topnav.nav-open .nav-links{display:flex;}
  nav.topnav.nav-open #navAuthArea{display:flex;}
  /* The slim bar has one chip and one button: they stay inline at every
     width, and there is no hamburger (the sidebar has its own toggle). */
  nav.topnav-slim .nav-toggle{display:none;}
  nav.topnav-slim .topnav-inner{flex-wrap:nowrap; gap:12px;}
  nav.topnav-slim .brand{margin-right:0;}
  nav.topnav-slim .nav-links{
    display:flex; order:0; width:auto; flex:1 1 0; flex-direction:row; align-items:center; gap:18px;
    padding-top:0; margin-top:0; border-top:0;
  }
  nav.topnav-slim .nav-links a{width:auto; padding:0 14px;}
  nav.topnav-slim #navAuthArea{display:flex; order:0; width:auto; flex:0 0 auto; height:40px; padding-top:0; justify-content:flex-end;}
  nav.topnav-slim .account-chip{width:auto; justify-content:flex-end;}
}
@media (max-width:600px){
  nav.topnav-slim .account-chip .account-name{display:none;}
  /* Phone widths. Brand (136) + Dashboard chip (~112) + Sign out (~76) +
     gaps + 32px side padding is ~390px, so at 360-375px the chip sat on
     top of the Sign out button (measured 24px of overlap at 375px in
     review, 7 Sep 2026). Tighter padding, a smaller chip and no dot bring
     the row to ~350px. The public bar is untouched: it is a hamburger at
     these widths. */
  nav.topnav-slim .topnav-inner{padding:12px 16px; gap:10px;}
  nav.topnav-slim .nav-links .nav-dash-chip{padding:0 10px;}
  nav.topnav-slim .nav-dash-chip::before{display:none;}
}
/* The header's confirmation modal (nav-component.js: siteNav.confirm and
   the default sign-out). Colours are pinned to the same palette as the bar
   for the same reason: pages read their own :root tokens and the dialog
   must look the same on every one of them. Uses the [hidden] attribute,
   so no page's .hidden rule is involved. */
.nav-confirm{
  position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(4,7,14,.72); font-family:var(--nav-font, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
}
.nav-confirm[hidden]{display:none;}
.nav-confirm-card{
  background:#0D1526; border:1px solid #24314F; border-radius:18px; padding:28px 26px;
  max-width:380px; width:100%; box-shadow:0 24px 70px rgba(0,0,0,.55); text-align:center; color:#F6F3EC;
}
.nav-confirm-card p{font-size:14.5px; line-height:1.5; margin:0 0 22px;}
.nav-confirm-actions{display:flex; gap:10px;}
.nav-confirm-actions button{
  flex:1; height:40px; border-radius:999px; font:inherit; font-size:14px; font-weight:600; cursor:pointer; box-sizing:border-box;
}
.nav-confirm-cancel{background:transparent; border:1px solid #2C3F68; color:#F6F3EC;}
.nav-confirm-cancel:hover{border-color:#8C97AE;}
.nav-confirm-ok{background:linear-gradient(135deg,#F0DBA8,#D4AF6A); border:none; color:#151515;}
.nav-confirm-ok.nav-confirm-danger{background:rgba(242,112,122,.12); border:1px solid #F2707A; color:#F2707A;}
.nav-confirm-ok.nav-confirm-danger:hover{background:rgba(242,112,122,.22);}
.nav-confirm-actions button:focus-visible{outline:2px solid #D4AF6A; outline-offset:2px;}