.studio-nav-head{display:none}
#studioNavScrim[hidden]{display:none}
#studioNavScrim{position:fixed;inset:0;z-index:119;background:rgba(20,20,20,.4);border:0;width:100%;height:100%}
.top-in #drawerBtn{min-width:44px;min-height:44px;gap:5px}
@media(min-width:900px){#drawerBtn{display:none!important}}
@media(max-width:899px){
 body.studio-nav-open{overflow:hidden}
 body.studio-nav-open #appSide{display:flex;top:0;bottom:0;left:0;width:min(340px,90vw);z-index:120;padding:calc(14px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom));overscroll-behavior:contain;-webkit-overflow-scrolling:touch;box-shadow:8px 0 30px #0002}
 .studio-nav-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}
 .studio-nav-head button{min-width:44px;min-height:44px;border:1px solid var(--hair);border-radius:10px;background:#fff;font:inherit;color:var(--ink)}
 #appSide .side-a,#appSide summary{min-height:44px;display:flex;align-items:center}
 #appSide .side-acct{flex-shrink:0}
 .simple-nav .studio-tools-button{flex:1 0 100%;background:var(--tint);border-color:var(--cobalt);font-weight:600;color:var(--cobalt)}
}

/* Keep the account, brand and navigation on one top row on phones and in the app. */
@media(max-width:899px){
 .top .top-in{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;gap:4px 8px;align-items:center;padding:6px 12px 8px!important}
 .top .top-in #drawerBtn{position:static;grid-column:1;grid-row:1;margin:0!important;width:48px;height:48px}
 .top #drawerBtn svg{width:26px;height:26px}
 .top .top-in .brand{grid-column:2;grid-row:1;margin:0;max-width:none;min-height:48px;justify-content:center;font-size:18px;gap:7px}
 .top .brand img{width:32px!important;height:32px!important}
 .top .top-right{display:contents}
 .top #acctBtn{grid-column:3;grid-row:1;width:44px;height:44px;justify-self:end;font-size:19px;overflow:hidden}
 .top #signInBtn{grid-column:3;grid-row:1;justify-self:end;padding:8px 4px!important;font-size:12px!important}
 .top #planPill{grid-column:1/-1;grid-row:2;justify-self:center;max-width:100%;font-size:12px}
 .top #billingStatus:empty{display:none}
}
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}