/* PV LAB Studio-only account navigation.
 * The public landing, Moods, and Account menus retain their approved styles.
 * This follows the Studio's charcoal controls and restrained 12-14px type. */

#studio-header #studio-account-menu .pv-account-panel{
  position:fixed;
  top:calc(var(--lab-header-height,82px) + 8px);
  right:16px;
  left:auto;
  z-index:1000;
  box-sizing:border-box;
  width:min(276px,calc(100vw - 32px));
  max-height:calc(100dvh - var(--lab-header-height,82px) - 24px);
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#55575c transparent;
  padding:7px 0 0;
  background:#18191d;
  color:#eae9e5;
  border:1px solid #353840;
  border-radius:8px;
  box-shadow:0 14px 36px rgba(0,0,0,.50);
}

/* A hairline connects the open menu to its avatar, without touching the header.
   The Studio shell stays separated from the masthead by eight pixels. */
#studio-header #studio-account-menu[open]::after{
  content:'';
  position:fixed;
  top:var(--lab-header-height,82px);
  right:37px;
  width:1px;
  height:8px;
  z-index:1001;
  background:#51555c;
  pointer-events:none;
}
#studio-header #studio-account-menu[open] .pv-account-avatar{
  border-color:#b6b9be;
  background:#23252a;
  box-shadow:0 0 0 2px rgba(255,255,255,.05);
}

#studio-header #studio-account-menu .pv-account-details{
  margin:0 17px 4px;
  padding:15px 3px 14px;
  border-bottom:1px solid #35383d;
}
#studio-header #studio-account-menu .pv-account-details::before{
  width:116px;
  height:24px;
}
#studio-header #studio-account-menu .pv-account-details::after{
  margin-top:4px;
  color:#a9aab0;
  font:400 11px/1.4 'PV Lab Navigation','DM Sans',Arial,sans-serif;
  letter-spacing:0;
}

/* Quiet list rows with technical-Studio density, rather than large
 * landing-page typography or bright ivory fill on hover. */
#studio-header #studio-account-menu .pv-account-panel > :is(a,button){
  display:flex;
  align-items:center;
  justify-content:flex-start;
  width:calc(100% - 16px);
  min-height:42px;
  margin:0 8px;
  padding:10px 13px;
  border:0;
  border-radius:6px;
  box-shadow:none;
  background:transparent;
  color:#d9dbe0;
  font:450 14px/1.35 'PV Lab Navigation','DM Sans',Arial,sans-serif;
  letter-spacing:-.012em;
  text-align:left;
  text-decoration:none;
  transition:background .15s ease,color .15s ease;
}
#studio-header #studio-account-menu .pv-account-panel > :is(a,button):not([data-account-signout]):hover,
#studio-header #studio-account-menu .pv-account-panel > :is(a,button):not([data-account-signout]):focus-visible{
  background:#24262b;
  color:#fff;
  box-shadow:inset 2px 0 0 #8c9097;
}
#studio-header #studio-account-menu .pv-account-panel > :is(a,button):not([data-account-signout]):active{
  background:#2b2d33;
}
#studio-header #studio-account-menu .pv-account-panel > [data-account-signout]{
  width:100%;
  min-height:48px;
  margin:8px 0 0;
  padding:12px 21px 13px;
  background:transparent;
  border:0;
  border-top:1px solid #35383d;
  border-radius:0 0 9px 9px;
  color:#a4a5aa;
  font:400 12px/1.35 'PV Lab Navigation','DM Sans',Arial,sans-serif;
  letter-spacing:0;
}
#studio-header #studio-account-menu .pv-account-panel > [data-account-signout]:hover{
  background:#24262b;
  color:#eeece8;
}
#studio-header #studio-account-menu .pv-account-panel > :is(a,button):focus-visible{
  outline:1px solid #d7d8dc;
  outline-offset:-3px;
}
@media(max-width:900px){
  #studio-header #studio-account-menu .pv-account-panel{
    top:calc(var(--lab-header-height,109px) + 8px);
  }
}
@media(max-width:640px){
  #studio-header #studio-account-menu[open]::after{right:31px}
  #studio-header #studio-account-menu .pv-account-panel{
    right:10px;
    width:min(276px,calc(100vw - 20px));
  }
  #studio-header #studio-account-menu .pv-account-panel > :is(a,button){
    min-height:44px;
  }
}
@media(prefers-reduced-motion:reduce){
  #studio-header #studio-account-menu .pv-account-panel > :is(a,button){
    transition:none;
  }
}