/* Session-aware nav — shared across every portal page that renders the
   "Log in" button (the landing page, the guides layout and the API reference),
   loaded as /_/css/session-nav.css alongside /_/js/session-nav.js. Carries the
   profile-chip component styles the script renders, plus the
   progressive-enhancement rule that hides the server-rendered "Log in" button
   until the session probe resolves (so an authenticated visitor never sees a
   "Log in" flash before the chip appears).

   These rules used to live only in the landing page's inline <style>, so on the
   guides and reference pages the JS-swapped SVG had no size constraint and
   rendered huge. Extracting them here and linking this sheet from all three
   pages fixes that.

   Design tokens used below (--surface, --border, --radius-md, --shadow-lg,
   --fg, --cs-storm-grey, --cs-grey-50, --cs-cobalt-blue) are all provided by
   the brand token sheet each page already loads BEFORE this one:
   /_/css/colors_and_type.css on the landing and guides pages, and
   /_/css/reference.css on the API reference. */

/* ---------- No-flash reveal (progressive enhancement) ----------
   The "Log in" button is server-rendered and is the no-JS default. When JS is
   available, the inline <head> script adds `js` to <html> before first paint,
   so we can hide the button until the session probe resolves. session-nav.js
   then either replaces it with the profile chip (authenticated) or reveals it
   again (not authenticated / error / timeout) — on EVERY terminal path, so a
   slow or failed probe can never leave it permanently hidden. `visibility`
   (not `display`) keeps the nav layout stable, so revealing causes no shift.
   No JS → no `js` class → the button stays visible, preserving the fallback. */
html.js #login-btn { visibility: hidden; }

/* ---------- Profile chip (rendered by JS on an active session) ---------- */
.profile { position: relative; display: inline-flex; }
.avatar-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; padding: 0; border: none; cursor: pointer;
  background: rgba(255, 255, 255, .12); color: #fff; transition: .15s;
}
.avatar-btn:hover, .avatar-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .22); }
.avatar-btn svg { width: 18px; height: 18px; display: block; }
.profile-menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 190px; z-index: 20;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); padding: 6px;
}
.profile-menu[hidden] { display: none; }
.profile-menu a {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px;
  font-size: 14px; font-weight: 500; color: var(--fg); transition: .12s;
  /* Menu rows are actions, not prose links — no underline (the reference page's
     Scalar/global styles underline <a> by default, which bleeds into the chip). */
  text-decoration: none;
}
.profile-menu a svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--cs-storm-grey); }
.profile-menu a:hover, .profile-menu a:focus-visible { background: var(--cs-grey-50); outline: none; }
.profile-menu a:hover svg, .profile-menu a:focus-visible svg { color: var(--cs-cobalt-blue); }
