/* CorporateX Set the Scene employment context.
   Keeps Company, Location, Role and Leaving month visually consistent without changing
   the existing guided-story workflow mechanics. */
.ref-guided-context-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  align-items:start;
}

.ref-context-role,
.ref-context-left-date{
  position:relative;
}

.cx-context-reference{
  display:block;
  margin:6px 1px 0;
  color:#7f786f;
  font-size:.64rem;
  font-weight:650;
  line-height:1.35;
  letter-spacing:.01em;
}

.cx-role-listbox{
  position:absolute;
  z-index:31;
  left:0;
  right:0;
  top:calc(100% - 2px);
  max-height:330px;
  overflow:auto;
  padding:8px;
  border:1px solid rgba(246,200,79,.34);
  border-radius:0 0 16px 16px;
  background:rgba(9,10,12,.985);
  box-shadow:0 22px 45px rgba(0,0,0,.42);
}

.cx-role-option{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:11px 12px;
  border:0;
  border-radius:10px;
  color:#fffaf0;
  background:transparent;
  text-align:left;
  cursor:pointer;
}

.cx-role-option strong{
  min-width:0;
  font-size:.92rem;
  font-weight:750;
  line-height:1.3;
}

.cx-role-option span{
  flex:0 0 auto;
  color:#918a80;
  font-size:.66rem;
  letter-spacing:.045em;
  text-transform:uppercase;
}

.cx-role-option:hover,
.cx-role-option[aria-selected="true"]{
  background:rgba(246,200,79,.11);
  outline:1px solid rgba(246,200,79,.18);
}

.cx-role-empty,
.cx-role-more{
  margin:0;
  padding:12px;
  color:#aaa298;
  font-size:.8rem;
  line-height:1.5;
}

.cx-role-more{
  border-top:1px solid rgba(255,255,255,.06);
  color:#c4a652;
}

.ref-context-role input[aria-expanded="true"]{
  border-bottom-left-radius:0!important;
  border-bottom-right-radius:0!important;
  border-color:rgba(246,200,79,.5)!important;
}

.ref-context-left-date input{
  font-variant-numeric:tabular-nums;
  letter-spacing:.06em;
}

.ref-context-review{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

@media(max-width:760px){
  .ref-guided-context-grid{
    grid-template-columns:1fr!important;
  }

  .cx-role-option{
    align-items:flex-start;
    flex-direction:column;
    gap:3px;
  }

  .cx-role-listbox{
    max-height:285px;
  }

  .ref-context-review{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:440px){
  .ref-context-review{
    grid-template-columns:1fr;
  }
}