/* Top-bar account state. Markup lives in _includes/duet-bar.html, the identity check in js/account-nav.js — which does nothing but set `duet-signed-in` on . Every show/hide decision is here. The signed-out pair is what the page is served with, so it needs no rule of its own; it is hidden only once a visitor is known to be signed in. The !important is load-bearing: this file is pulled in by the include, before duet-styles.css has finished asserting `display` on .nav-link and .button at five breakpoints, and a later same-specificity rule would win. */ html.duet-signed-in .duet-signed-out { display: none !important; } .nav-account { display: none; align-items: center; justify-content: flex-end; gap: 12px; } html.duet-signed-in .nav-account { display: inline-flex; } /* The email is context, not a control: quiet, and it gives way before the button does. Long addresses truncate rather than push the button off the bar — the full value stays in the title attribute. */ .nav-account-email { color: #5c6678; font-family: Nunito Sans, sans-serif; font-size: 13px; line-height: 1.2; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* A signed-in session whose address is unverified mints no email (the backend answers 403 email_unverified). The button still shows; the empty span must not leave a gap beside it. */ .nav-account-email:empty { display: none; } /* "Go to Account" is twice the length of "Sign Up", so the button it inherits from (.button.border-btn.nav-getting-started) has to stop being a fixed-width pill and size to its text. */ .nav-account .button.nav-account-link { width: auto; min-width: 0; max-width: none; margin-left: 0; white-space: nowrap; } /* Below the desktop bar there is no room for both: the email goes, the button stays. It shrinks too — at 479px the base rule leaves a 150px pill, which this text overflows. */ @media screen and (max-width: 991px) { .nav-account-email { display: none; } } @media screen and (max-width: 767px) { .nav-account .button.nav-account-link { height: auto; padding: 8px 16px; font-size: 16px; line-height: 18px; } }