/* iPhone creator profile overflow fix.
   Stack only the large creator-profile card groups on narrow screens.
   Keep the inner creator metrics grid as a compact 2x2. */
@media (max-width: 600px) {
  .grid.two:has(> .card .avatar.round[style*="76px"]) {
    grid-template-columns: 1fr;
  }

  .grid.two:has(> .card .avatar.round[style*="76px"]) + .section > .grid.two {
    grid-template-columns: 1fr;
  }

  .grid.two:has(> .card .avatar.round[style*="76px"]) > .card,
  .grid.two:has(> .card .avatar.round[style*="76px"]) + .section > .grid.two > .card {
    min-width: 0;
    width: 100%;
  }

  .grid.two:has(> .card .avatar.round[style*="76px"]) > .card > .row,
  .grid.two:has(> .card .avatar.round[style*="76px"]) + .section > .grid.two .between {
    min-width: 0;
    flex-wrap: wrap;
  }

  .grid.two:has(> .card .avatar.round[style*="76px"]) + .section > .grid.two strong {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* Business applicant cards double as inline creator profiles.
   CSS-only: uses the creator data already present in the campaign drawer. */
#drawerBody .stack > .card:has(.avatar.round){
  position:relative;
  overflow:hidden;
  padding-top:68px;
  border-color:rgba(220,255,22,.28);
}
#drawerBody .stack > .card:has(.avatar.round)::before{
  content:"CREATOR PROFILE";
  position:absolute;
  top:0;
  left:0;
  right:0;
  box-sizing:border-box;
  padding:15px 20px;
  color:#dcff16;
  background:rgba(220,255,22,.07);
  border-bottom:1px solid rgba(220,255,22,.18);
  font-size:12px;
  font-weight:900;
  letter-spacing:.16em;
}
#drawerBody .stack > .card:has(.avatar.round) .avatar.round{
  width:68px;
  height:68px;
  flex:0 0 68px;
  font-size:22px;
}
#drawerBody .stack > .card:has(.avatar.round) > .between:first-of-type{
  align-items:flex-start;
  gap:14px;
}
#drawerBody .stack > .card:has(.avatar.round) .small.muted{
  line-height:1.45;
}
#drawerBody .stack > .card:has(.avatar.round) .pill{
  margin-top:6px;
}
@media(max-width:600px){
  #drawerBody .stack > .card:has(.avatar.round){
    padding:68px 20px 20px;
  }
  #drawerBody .stack > .card:has(.avatar.round) .row:has(button[onclick*="acceptApplicant"]){
    flex-wrap:wrap;
  }
}