/* The Bridgit logo block at the top of every page. The HTML lives in site-bar.mjs and the build puts it
   wherever a page says {{SITE_BRAND}}. Only this file styles .wordmark, so every page looks the same. */
.wordmark{display:flex;align-items:center;gap:14px;min-width:0;flex-shrink:0;text-decoration:none;font-weight:650;letter-spacing:0}
.wordmark .brand-link{display:flex;flex:none;text-decoration:none}
.wordmark .brand-icon{display:block;width:72px;height:72px;flex:none}
.wordmark>span{display:flex;flex-direction:column;line-height:1.1;letter-spacing:-1px}
.wordmark .brand-name{display:block;width:152px;height:auto}
.wordmark small{display:flex;align-items:center;white-space:nowrap;color:var(--ink);font-size:16px;line-height:1.2;margin-top:6px;font-weight:600;letter-spacing:0}
/* The tagline is drawn as SVG text pinned (textLength) to the wordmark's width, so it is exactly as wide as the
   wordmark in every font; keep its width equal to .brand-name at every breakpoint. No full stop after it. */
.wordmark .wordmark-tagline{display:block;flex:none;width:152px;height:auto;overflow:visible}
.wordmark .web-version{display:inline-block;margin-left:8px;font:500 11px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;color:#705e73;border:1px solid var(--line);border-radius:20px;padding:0 7px;white-space:nowrap;vertical-align:1px}
@media(max-width:680px){nav{min-height:96px;height:auto;padding:12px 0;gap:12px}.wordmark{gap:10px}.wordmark .brand-icon{width:56px;height:56px}.wordmark .brand-name{width:126px}.wordmark small{font-size:12px;margin-top:4px}.wordmark .wordmark-tagline{width:126px}.wordmark{max-width:100%;flex-shrink:1}.wordmark>span,.wordmark small{min-width:0}.wordmark .web-version{min-width:0;overflow:hidden;text-overflow:ellipsis}}
@media(max-width:380px){.wordmark .brand-icon{width:52px;height:52px}}

/* Right end of the bar: Sign in + Sign up, or the signed-in profile chip (brand.js). The logo takes the left,
   page links and the account sit together on the right. */
nav[aria-label="Main navigation"]>.wordmark{margin-right:auto}
.site-account{display:flex;align-items:center;gap:10px;flex:none;font-size:14px;white-space:nowrap}
.site-account a{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:none}
.site-account .site-signin{text-decoration:underline;text-underline-offset:5px}
.site-account .site-signup{min-height:40px;padding:0 16px;border-radius:999px;background:var(--ink,#2b1834);color:var(--paper,#fbf5eb);font-weight:600}
.site-account .site-signup:hover{opacity:.88}
.site-account .site-profile{gap:8px;max-width:240px}
.site-account .site-avatar{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;flex:none;background:linear-gradient(135deg,#bb8cf0,#ffbb70);color:#2b1834;font-weight:700;font-size:15px;text-transform:uppercase}
.site-account .site-profile-email{overflow:hidden;text-overflow:ellipsis;font-size:13px}
@media(max-width:900px){.site-account .site-profile-email{display:none}}
/* Phones: one row, account at the top right. The logo block gives way first (the version pill shrinks to an
   ellipsis), and the page links leave the bar; the footer and page body still link to them. */
@media(max-width:680px){
nav[aria-label="Main navigation"]{flex-wrap:nowrap;gap:10px}
nav[aria-label="Main navigation"]>.wordmark{flex-shrink:1;min-width:0}
.site-account{font-size:13px;gap:8px}
.site-account .site-signup{min-height:36px;padding:0 12px}
}
@media(max-width:600px){nav[aria-label="Main navigation"] .navlinks{display:none}}

/* Pages that don't load style.css (the generated /api/ reference) wrap the bar in .site-bar, which carries the
   site's colours and the nav layout itself so the page's own styles and dark mode don't change it. */
.site-bar{--ink:#2b1834;--paper:#fbf5eb;--line:#ded1df;background:var(--paper);color:var(--ink);font:16px/1.6 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.site-bar>nav{max-width:1240px;margin:0 auto;padding:0 44px;min-height:100px;display:flex;align-items:center;gap:20px;border-bottom:1px solid var(--line)}
.site-bar a{color:inherit;margin:0}
.site-bar .navlinks{display:flex;gap:30px;align-items:center}
.site-bar .navlinks a{font-size:14px;text-decoration:none}
.site-bar .navlinks .navcta{border:1px solid var(--ink);padding:10px 17px;border-radius:4px}
@media(max-width:900px){.site-bar>nav{padding:0 24px}.site-bar .navlinks{gap:18px}}
@media(max-width:680px){.site-bar>nav{padding:12px 20px;min-height:96px}.site-bar .navlinks{gap:15px}.site-bar .navlinks a{font-size:12px}.site-bar .navlinks .navcta,.site-bar .navlinks a[href="/developers/"]{display:none}}
/* Keep the bar on one row: links never wrap. brand.js hides the least-used links when the row runs out of room. */
nav[aria-label="Main navigation"] .navlinks a{white-space:nowrap}
nav[aria-label="Main navigation"] [data-bar-dropped]{display:none!important}
/* Pages the Worker draws have no version stamp: no empty pill. */
.wordmark .web-version:empty{display:none}