/* One public topbar: landing, developers, CLI, extension, privacy, terms and
   404 carry identical markup (test/public-topbar.test.js). It uses its own
   class names so no page stylesheet can bleed into it: passport-common.css,
   passport-index.css and the pages' inline styles each defined .topbar,
   .meta-pill and .btn-teal differently. Literal colours, because these pages
   don't share a token set. */
.site-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  box-sizing: border-box;
  width: 100%;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 48px;
  background: #ffffff;
  border-bottom: 0.5px solid rgba(16, 16, 18, 0.08);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  text-align: left;
}
.site-topbar-brand { display: flex; align-items: center; gap: 8px; align-self: stretch; flex-shrink: 0; text-decoration: none; }
.site-topbar-mark { display: block; width: 24px; height: 24px; flex: none; }
.site-topbar-word { display: block; width: auto; height: 18px; }
.site-topbar-actions { display: flex; align-items: center; gap: 8px; }
.site-topbar-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: 500;
  color: #3d3d42;
  text-decoration: none;
}
.site-topbar-link:hover { color: #101012; }
.site-topbar-link + .site-topbar-signin { margin-left: 8px; }
.site-topbar-signin,
.site-topbar-start {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  font-size: 12px;
  white-space: nowrap;
  text-decoration: none;
}
.site-topbar-signin {
  border: 1px solid rgba(16, 16, 18, 0.15);
  border-radius: 8px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #3d3d42;
}
.site-topbar-signin:hover { border-color: rgba(16, 16, 18, 0.32); color: #101012; }
.site-topbar-start {
  border-radius: 999px;
  background: #1f49ff;
  color: #ffffff;
  font-weight: 700;
  transition: background 0.15s;
}
.site-topbar-start:hover { background: #163cdd; }
.site-topbar a:focus-visible { outline: 2px solid #1f49ff; outline-offset: 2px; }

/* Narrow desktop: the full bar needs ~630px, so trade side padding for room
   rather than let Get started run into the right edge (641–660px did). */
@media (max-width: 760px) {
  .site-topbar { padding: 0 24px; }
}

/* Phones: the links fold away; Sign in and Get started stay, and the wordmark
   shrinks to make room. */
@media (max-width: 640px) {
  .site-topbar { padding: 0 16px; }
  .site-topbar-link { display: none; }
  /* the hidden links still match the sibling selector */
  .site-topbar-link + .site-topbar-signin { margin-left: 0; }
  .site-topbar-word { height: 13px; }
  .site-topbar-signin,
  .site-topbar-start { padding: 0 12px; }
}
/* Narrow phones: the mark alone carries the brand */
@media (max-width: 380px) {
  .site-topbar-word { display: none; }
}