/* 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. Rules
 * here exist to make the bar IMMOVABLE:
 *  - one breakpoint (1200px) below which the menu is a hamburger;
 *  - above it .nav-links is flex-wrap:nowrap, so a second row is
 *    impossible;
 *  - #navAuthArea has a FIXED flex-basis, so swapping "Sign in" for the
 *    signed-in chip cannot re-centre the links (auth resolves after an
 *    async /api/auth/me - without the fixed basis every load visibly
 *    nudged the whole row);
 *  - 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).
 */
nav.topnav{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(14px);
  background:rgba(7,11,20,.72);
  border-bottom:1px solid var(--navy-line);
}
.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; gap:10px; font-family:var(--font-display); font-weight:700; font-size:18px; flex:none; text-decoration:none; color:inherit;}
.brand-mark{width:30px; height:30px; flex:none;}
.nav-links{
  display:flex; flex:1; justify-content:center; gap:18px;
  font-size:14px; color:var(--slate-400); align-items:center;
  flex-wrap:nowrap; min-width:0;
}
.nav-links a{white-space:nowrap; text-decoration:none; transition:color .15s;}
.nav-links a:hover{color:var(--ivory-100);}
.nav-links a[aria-current="page"]{color:var(--gold-300, #F0DBA8); font-weight:600;}
#navAuthArea{
  flex:0 0 200px; display:flex; justify-content:flex-end; align-items:center;
  white-space:nowrap; min-height:40px;
}
#navAuthArea .btn, #navAuthArea .nav-signin{
  padding:9px 20px !important; transform:none !important; box-sizing:border-box;
}
#navAuthArea .btn:hover, #navAuthArea .nav-signin:hover{transform:none !important;}
.nav-signin{
  background:linear-gradient(135deg, var(--gold-300, #F0DBA8), var(--gold-500, #D4AF6A));
  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:10px; font-size:13.5px; color:var(--slate-400); min-height:33px;}
.account-chip b{color:var(--ivory-100); font-weight:600; display:inline-block; max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom;}
/* The account name is the way into /workspace. Underline on hover only, so
   it reads as a name first and a control second, and the bar's height and
   spacing are untouched. */
.account-chip .account-link{text-decoration:none; color:inherit; border-bottom:1px solid transparent;}
.account-chip .account-link:hover b{color:var(--gold-300);}
.account-chip .account-link:focus-visible{outline:2px solid var(--gold-500); outline-offset:2px; border-radius:4px;}
.account-chip .signout{
  color:var(--rose-400); cursor:pointer; background:none; font:inherit; font-size:13px; font-weight:600;
  border:1px solid var(--rose-400); border-radius:999px; padding:5px 12px; flex:none;
}
.account-chip .signout:hover{background:rgba(242,112,122,.1);}
.nav-toggle{
  display:none; background:none; border:1px solid var(--navy-600); 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(--ivory-100); border-radius:2px;}
.nav-toggle span::before, .nav-toggle span::after{
  content:""; position:absolute; left:0; width:18px; height:2px; background:var(--ivory-100);
  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(--navy-line);
  }
  .nav-links a{width:100%; padding:11px 4px;}
  #navAuthArea{display:none; order:5; width:100%; flex:0 0 100%; 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;}
}