/* ─────────────────────────────────────────────────────────────────────────────
   site-account.css — the signed-in parts of the nav, shared by the homepage
   (landing.html) and every page that uses /assets/site-chrome.css:

   - the account button (avatar + first name) and its menu
   - the dashboard button beside "Send us your contract"

   The markup is written by /assets/site-nav.js (window.ccNav). One copy only:
   if this changes, it changes on every page at once. Uses the Night Sky tokens
   both landing.html and site-chrome.css define on :root.
   ───────────────────────────────────────────────────────────────────────────── */
.auth-slot{display:flex;align-items:center;flex-shrink:0}
.nav-r .auth-slot:empty{display:none}
.auth-item{position:relative}
html.auth-likely-signed-in #navSignin{display:none!important}

/* the account button */
.auth-pill{display:inline-flex;align-items:center;gap:8px;height:36px;padding:3px 12px 3px 3px;border-radius:99px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.85);font:500 13px/1 var(--sans);cursor:pointer;transition:background-color .15s,border-color .15s;white-space:nowrap;text-decoration:none}
.auth-pill:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
.auth-pill:focus-visible{outline:1px solid var(--teal-hi);outline-offset:3px}
.auth-avatar{width:28px;height:28px;border-radius:50%;background:#2B4590;display:flex;align-items:center;justify-content:center;color:#fff;font:600 12px/1 var(--sans);flex-shrink:0;overflow:hidden}
.auth-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.auth-name{max-width:140px;overflow:hidden;text-overflow:ellipsis}
.auth-chev{width:10px;height:10px;opacity:.5;transition:transform .2s var(--out),opacity .2s;flex-shrink:0;margin-right:4px}
.auth-pill.auth-open .auth-chev{transform:rotate(180deg);opacity:.8}

/* the menu: centred directly under the account button (it does not swing out to one side); a short fade and rise in, a quicker fade out */
.auth-dd{position:absolute;top:calc(100% + 10px);left:50%;width:max-content;min-width:232px;max-width:min(300px,calc(100vw - 32px));padding:6px 0;
  background:rgba(14,24,32,.97);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);
  border:1px solid var(--line2);border-radius:6px;box-shadow:0 18px 48px -18px rgba(0,0,0,.7);
  font-family:var(--sans);text-align:left;z-index:300;
  opacity:0;pointer-events:none;translate:-50% 0;transform:translateY(6px);
  transition:opacity .14s ease-in,transform .14s ease-in}
/* closed, the menu is also inert (set by site-nav.js), so it cannot take focus or be read out */
.auth-dd.auth-show{opacity:1;pointer-events:auto;transform:none;transition:opacity .18s var(--out),transform .24s var(--out)}
.auth-dd-header{padding:12px 18px 13px;border-bottom:1px solid var(--line);margin-bottom:6px}
.auth-dd-name{font:500 15px/1.3 var(--sans);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.auth-dd-email{margin-top:3px;font:400 13.5px/1.35 var(--sans);color:var(--tx3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.auth-dd-link{display:block;width:100%;padding:10px 18px;border:0;background:none;text-align:left;text-decoration:none;font:400 15px/1.3 var(--sans);color:var(--tx2);cursor:pointer;transition:color .15s,background-color .15s}
.auth-dd-link:hover,.auth-dd-link:focus-visible{color:#fff;background:rgba(255,255,255,.04);outline:none}
.auth-dd-link:focus-visible{box-shadow:inset 2px 0 0 var(--teal-hi)}
.auth-dd-sep{height:1px;margin:6px 0;background:var(--line)}

/* the dashboard button beside "Send us your contract" (signed in only): the same size as that button, hairline outline */
.btn2{display:inline-flex;align-items:center;text-decoration:none;font:500 15px/1 var(--sans);color:#fff;padding:10px 15px;border:1px solid var(--line2);border-radius:4px;white-space:nowrap;transition:border-color .2s,background-color .2s}
.btn2:hover{border-color:rgba(168,180,192,.45);background:rgba(255,255,255,.03)}
.btn2:focus-visible{outline:1px solid var(--teal-hi);outline-offset:3px}
.nav-r .btn2{margin-right:-16px}

/* signed in, the bar carries one more button: keep the centre links on one line by first showing the account
   button as the avatar alone, then folding the links away earlier than the signed-out 1060px */
.nav-links a{white-space:nowrap}
@media(max-width:1440px){
  .nav-r:has(#navDash){gap:24px}
  .nav-r:has(#navDash) .btn2{margin-right:-12px}
  .nav-r:has(#navDash) .auth-name{display:none}
  .nav-r:has(#navDash) .auth-pill{padding-right:10px}
}
@media(max-width:1220px){
  .nav:has(#navDash) .nav-links{display:none}
  .nav:has(#navDash) .wrap{justify-content:space-between}
}
@media(max-width:860px){
  .nav-r .auth-name,.nav-r .auth-chev{display:none}
  .nav-r .auth-pill{padding:3px}
  /* on a phone the dashboard link lives in the account menu */
  .nav-r .btn2{display:none}
}
@media (prefers-reduced-motion:reduce){
  .auth-dd,.auth-dd.auth-show{transform:none;transition:opacity .01ms}
}
/* phones: the name button sits near the right edge, so keep the menu's right edge on the button there */
@media(max-width:860px){.auth-dd{left:auto;right:0;translate:none}}