/* Final iPhone visual QA fixes. Keep this stylesheet last in index.html. */

.generation-progress{
  display:block;
  box-sizing:border-box;
  width:100%;
  height:.6rem;
  margin:0;
  padding:0;
  overflow:hidden;
  appearance:none;
  -webkit-appearance:none;
  border:0;
  border-radius:999px;
  background:rgba(8,10,15,.64);
  color:#b46ae4;
}
.generation-progress::-webkit-progress-bar{
  border-radius:inherit;
  background:rgba(8,10,15,.64);
}
.generation-progress::-webkit-progress-value{
  border-radius:inherit;
  background:linear-gradient(90deg,#8257ff,#ef4f9a);
}
.generation-progress::-moz-progress-bar{
  border-radius:inherit;
  background:linear-gradient(90deg,#8257ff,#ef4f9a);
}

/* Link buttons must not inherit Safari's visited-link purple. */
a.button.ghost,
a.button.ghost:visited{
  color:var(--ink);
  text-decoration:none;
}

/* mobile.css changes this action zone to flex globally, which makes the
   Instagram notice shrink to its intrinsic content width. */
#detail .publish-zone{
  box-sizing:border-box;
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  align-items:stretch!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
}
#detail .publish-zone>*{
  box-sizing:border-box;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  margin-inline:0!important;
}
#detail .instagram-missing{
  overflow-wrap:break-word;
  word-break:normal;
}

@media(max-width:800px){
  html,
  body{
    box-sizing:border-box!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }
  body{
    position:relative!important;
    padding-bottom:calc(5.75rem + var(--safe-bottom))!important;
  }
  .workspace{
    box-sizing:border-box!important;
    width:100vw!important;
    min-width:0!important;
    max-width:100vw!important;
    margin:0!important;
    overflow-x:hidden!important;
  }
  .workspace>.topbar,
  #content,
  #content.page,
  #content.g3-dashboard{
    box-sizing:border-box!important;
    min-width:0!important;
    max-width:100%!important;
  }
  #content,
  #content.page,
  #content.g3-dashboard,
  .generation-banner,
  .generation-details,
  .generation-steps{
    width:100%!important;
  }

  .topbar-actions>.brand-picker{
    overflow:hidden!important;
  }
  .topbar-actions>.brand-picker select{
    display:block!important;
    min-width:0!important;
    max-width:100%!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
  }

  /* One stage per row prevents Russian labels and their statuses from being
     squeezed into mid-word line breaks. It also lets a single stage use the
     complete banner width. */
  .generation-steps{
    grid-template-columns:minmax(0,1fr)!important;
    align-items:stretch!important;
  }
  .generation-step{
    box-sizing:border-box!important;
    width:100%!important;
    min-width:0!important;
  }
  .generation-step-row{
    box-sizing:border-box!important;
    grid-template-columns:auto minmax(0,1fr) auto!important;
    width:100%!important;
    min-width:0!important;
  }
  .generation-step-row>b{
    overflow-wrap:break-word!important;
    word-break:normal!important;
    hyphens:none!important;
  }
  .generation-step-row>span:last-child{
    justify-self:end!important;
  }

  /* The fixed navigation still reserves page space, but its solid surface
     prevents scrolled cards and text from bleeding through it. */
  .sidebar{
    box-sizing:border-box!important;
    left:0!important;
    right:0!important;
    width:100vw!important;
    min-width:0!important;
    max-width:100vw!important;
    background:#0a0a0f!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  .sidebar nav{
    width:100%!important;
    min-width:0!important;
  }
}

@supports(overflow:clip){
  @media(max-width:800px){
    html,
    body,
    .workspace{overflow-x:clip!important}
  }
}