/* The brand side's Log in (d35, lib/page.mjs loginLink) and its bar. Loaded after journey.css and desktop.css, so it
   only adds to them. Phones: a 44px icon button in the app bar, a pill with its word on the front door's bar.
   From 64rem: Ad library, Make a video and Log in sit together on the right. */
.nav-login{grid-column:3;grid-row:1;justify-self:end;display:flex;align-items:center;justify-content:center;gap:6px;width:44px;height:44px;border-radius:50%;background:var(--grad-raised);box-shadow:var(--btn-secondary);color:var(--ink);font-size:.875rem;font-weight:700;letter-spacing:-.005em;white-space:nowrap;transition:transform var(--dur-micro) var(--ease-press)}
.nav-login svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;flex:none}
.nav-login span{display:none}
.nav-login:active{transform:scale(.95)}
.nav-login[aria-current]{color:var(--link);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px var(--accent-ring)}
.journey-nav.is-brand-only.has-login{grid-template-columns:minmax(0,1fr) auto}
/* The wordmark spans two columns by default (journey.css), which pushed it under Log in on /ads and /for phones. */
.journey-nav.is-brand-only .brand{grid-column:1;grid-row:1}
.journey-nav.is-brand-only .nav-login{grid-column:2;width:auto;height:40px;padding:0 14px 0 11px;border-radius:var(--radius-pill)}
.journey-nav.is-brand-only .nav-login span{display:inline}
@media(min-width:64rem){
 .journey-nav.has-login .desk-nav{display:flex;margin-left:auto}
 .journey-nav.has-login .nav-login{margin-left:0;width:auto;height:40px;padding:0 14px 0 11px;border-radius:var(--radius-pill)}
 .journey-nav.has-login .nav-login span{display:inline}
}