/* The site toolbar — one definition, every page.
 *
 * There used to be three of these. The landing page had the real one; support
 * and privacy had a left-aligned strip with three links in it; the docs had a
 * third with a "Docs" label, a spacer and its own Support/Privacy pair. Clicking
 * User Guide therefore looked like leaving the site: the bar you were using
 * disappeared and a different one took its place, with the items in new
 * positions — reported as *"when i click a docs i lost a toolbar"*.
 *
 * So the bar lives here and the pages only supply the markup, which is the same
 * markup. It carries its own tokens rather than reading the host page's, because
 * the two stylesheets that used to own it named their greys differently
 * (`--ink-dim` on the landing page, `--dim` in the docs) and a shared component
 * that depends on what it is dropped into is not shared.
 */
:root{
  --navh:48px;
  --nav-ink:#f5f5f7;
  --nav-dim:#a1a1a6;
  --nav-hair:rgba(255,255,255,.10);
  --nav-bg:rgba(8,8,10,.62);
  --nav-max:1120px;
  --nav-ease:cubic-bezier(.22,.61,.36,1);
}

nav.sitebar{
  position:fixed;top:0;left:0;right:0;z-index:50;height:var(--navh);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  background:var(--nav-bg);border-bottom:1px solid var(--nav-hair);
  display:flex;align-items:center;color:var(--nav-ink);
  font-family:-apple-system,"SF Pro Display","SF Pro Text",system-ui,Helvetica,Arial,sans-serif;
  line-height:1.4;
}
nav.sitebar a{color:inherit;text-decoration:none}
nav.sitebar .navwrap{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;max-width:var(--nav-max);margin:0 auto;padding:0 24px;
}
nav.sitebar .logo{font-weight:700;letter-spacing:.14em;font-size:15px;
  display:flex;align-items:center;gap:9px;flex:0 0 auto}
nav.sitebar .logo .mk{width:28px;height:28px;display:block;flex:0 0 auto}
nav.sitebar .links{display:flex;gap:28px;font-size:12.5px;color:var(--nav-dim)}
nav.sitebar .links a{transition:color .2s}
nav.sitebar .links a:hover{color:var(--nav-ink)}
/* The page you are on, so the bar says where you are — the old docs bar said it
   with a "Docs" label that only that bar had. */
nav.sitebar .links a[aria-current="page"]{color:var(--nav-ink)}
nav.sitebar .navright{display:flex;align-items:center;gap:12px}

nav.sitebar .navfb{background:transparent;border:1px solid var(--nav-hair);color:var(--nav-dim);
  font:inherit;font-size:12.5px;font-weight:600;padding:5px 13px;border-radius:999px;cursor:pointer;
  display:inline-flex;align-items:center;transition:color .2s,border-color .2s}
nav.sitebar .navfb:hover{color:var(--nav-ink);border-color:rgba(255,255,255,.28)}

nav.sitebar .buy{font-size:12.5px;background:var(--nav-ink);color:#000;padding:5px 14px;
  border-radius:999px;font-weight:600;
  transition:transform .2s var(--nav-ease),box-shadow .2s}
nav.sitebar .buy:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(255,255,255,.18)}

/* language picker */
nav.sitebar .langpick{position:relative}
nav.sitebar .lp-btn{display:flex;align-items:center;gap:5px;background:transparent;
  border:1px solid var(--nav-hair);color:var(--nav-dim);font:inherit;font-size:12.5px;font-weight:600;
  padding:5px 9px;border-radius:999px;cursor:pointer;transition:color .2s,border-color .2s}
nav.sitebar .lp-btn:hover,nav.sitebar .lp-btn[aria-expanded="true"]{
  color:var(--nav-ink);border-color:rgba(255,255,255,.28)}
nav.sitebar .lp-btn svg{width:14px;height:14px;flex:0 0 auto}
nav.sitebar .lp-btn .chev{width:11px;height:11px;transition:transform .2s}
nav.sitebar .lp-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
nav.sitebar .lp-menu{position:absolute;right:0;top:calc(100% + 9px);min-width:148px;list-style:none;
  margin:0;padding:6px;background:rgba(18,18,22,.94);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border:1px solid var(--nav-hair);border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.55);z-index:60}
nav.sitebar .lp-menu li{padding:7px 10px;border-radius:8px;font-size:13px;color:var(--nav-dim);cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  transition:background .15s,color .15s}
nav.sitebar .lp-menu li:hover{background:rgba(255,255,255,.06);color:var(--nav-ink)}
nav.sitebar .lp-menu li[aria-selected="true"]{color:var(--nav-ink)}
nav.sitebar .lp-menu li[aria-selected="true"]::after{content:"✓";color:#5ac8fa;font-size:12px}

/* The docs sidebar's mobile toggle rides in the same bar. Hidden until the
   sidebar is, so it never shows up on a page that has no sidebar. */
nav.sitebar #nav-toggle{display:none;background:none;border:1px solid var(--nav-hair);
  border-radius:999px;color:var(--nav-ink);font:inherit;font-size:12.5px;font-weight:600;
  padding:5px 13px;cursor:pointer}

/* Every page gets the same gap under a bar that is out of flow. */
body{padding-top:calc(var(--navh) + 1px)}

/* Narrow: the links collapse into the docs sidebar's own menu, and Feedback
   stands down — it is one tap away in the footer and on Support, and with it
   in the row the bar ran past the right edge and clipped "Get it". It did that
   before this file existed; the docs Menu button only made it obvious. */
@media(max-width:780px){
  nav.sitebar .navwrap{padding:0 14px}
  nav.sitebar .navright{gap:8px}
  nav.sitebar .links{display:none}
  nav.sitebar .navfb{display:none}
  nav.sitebar #nav-toggle{display:block}
}
/* Below this the wordmark is the thing that will not fit — the bar needs about
   375px for mark, word and the three controls — so the mark carries the brand
   on its own and the controls keep their room. Not measurable in headless
   Chrome, which clamps its window to 500px and crops the screenshot to
   whatever narrower size you asked for: the picture looks like an overflow and
   is a crop. See rule 189. */
@media(max-width:400px){
  nav.sitebar .logo{font-size:0;gap:0;letter-spacing:0}
  nav.sitebar .navright{gap:6px}
  nav.sitebar .buy,nav.sitebar .lp-btn,nav.sitebar #nav-toggle{padding-left:10px;padding-right:10px}
}