/* ==========================================================================
   WebsDocs ASG Owner Lifecycle Components
   v9.2.0 — component-owned lifecycle + hosted-profile status surface
   This file owns .asg-flow only. Page layout remains in directory-owner.css.
   ========================================================================== */

.asg-flow{
  box-sizing:border-box;
  margin:18px 0;
  padding:20px;
  border:1px solid #d7e4f5;
  border-radius:16px;
  background:#fff;
  color:#162f4b;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.5;
}

.asg-flow[hidden]{display:none!important}

.asg-flow-head{
  display:flex;
  align-items:center;
  gap:18px;
}

.asg-flow-head>div{min-width:0}

.asg-flow-head strong{
  display:block;
  color:#163251;
  font-size:15px;
  font-weight:750;
}

.asg-flow-head p{
  margin:4px 0 0;
  color:#546f8b;
  font-size:13px;
  overflow-wrap:anywhere;
}

.asg-flow-orbit{
  position:relative;
  display:block;
  width:64px;
  height:64px;
  flex:0 0 64px;
  background:radial-gradient(circle,#e6f3ff,transparent 70%);
}

.asg-flow-orbit i{
  position:absolute;
  inset:0;
  border:2px solid #cbdff7;
  border-top-color:#2563eb;
  border-radius:50%;
  animation:asg-flow-turn 1.6s linear infinite;
  animation-play-state:paused;
}

.asg-flow-orbit i:nth-child(2){
  inset:8px;
  border-color:#c9edf3;
  border-right-color:#0b9fbd;
  animation-duration:1.3s;
  animation-direction:reverse;
}

.asg-flow-orbit i:nth-child(3){
  inset:16px;
  border-color:#e2dcfa;
  border-bottom-color:#805de8;
  animation-duration:1s;
}

.asg-flow-orbit i:nth-child(4){
  inset:24px;
  border-color:#cfebe5;
  border-left-color:#15957f;
  animation-duration:.8s;
  animation-direction:reverse;
}

.asg-flow[data-busy="true"] .asg-flow-orbit i{
  animation-play-state:running;
}

.asg-flow-stages{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin:16px 0 0;
  padding:16px 0 0;
  border-top:1px solid #e2eaf5;
  list-style:none;
}

.asg-flow-stages li{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
  color:#60748d;
  font-size:12px;
}

.asg-flow-stages li b{
  color:#203c5b;
  font-size:12px;
  font-weight:700;
}

.asg-flow-stages li span{overflow-wrap:anywhere}

.asg-flow-stages li::before{
  content:"";
  display:block;
  width:12px;
  height:12px;
  margin-bottom:4px;
  border:2px solid #cad8e9;
  border-radius:50%;
}

.asg-flow-stages li[data-state="complete"]::before{
  border-color:#148567;
  background:#148567;
  box-shadow:inset 0 0 0 2px #fff;
}

.asg-flow-stages li[data-state="processing"]::before{
  border-color:#2b69eb;
  box-shadow:0 0 0 3px #e8efff;
}

.asg-flow-stages li[data-state="warning"]::before{
  border-color:#b88218;
  background:#fff5d6;
}

.asg-flow-stages li[data-state="error"]::before{
  border-color:#b73e48;
  background:#ffecef;
}

.asg-flow-facts{
  display:grid;
  gap:10px;
  margin:18px 0 0;
  padding-top:15px;
  border-top:1px solid #e2eaf5;
  font-size:13px;
}

.asg-flow-facts>div{
  display:grid;
  grid-template-columns:minmax(110px,.4fr) minmax(0,1fr);
  gap:15px;
}

.asg-flow-facts dt{color:#526c88}

.asg-flow-facts dd{
  margin:0;
  overflow-wrap:anywhere;
  color:#203b59;
}

.asg-flow-facts code{
  font-size:12px;
  word-break:break-all;
}

.asg-flow-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}

.asg-flow-actions button,
.asg-flow-actions a{
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:9px 14px;
  border:1px solid #c6d8f0;
  border-radius:9px;
  background:#f3f7fd;
  color:#1d54b9;
  font-family:inherit;
  font-size:13px;
  font-weight:650;
  text-decoration:none;
  cursor:pointer;
}

.asg-flow-actions button:disabled{
  opacity:.55;
  cursor:wait;
}

.asg-flow-actions a:focus-visible,
.asg-flow-actions button:focus-visible{
  outline:3px solid #48b5e1;
  outline-offset:3px;
}

.asg-flow-note{
  display:block;
  margin:12px 0 0;
  color:#596f88;
  font-size:12px;
  line-height:1.5;
}

.asg-public-link-pending{
  display:inline-block;
  color:#6e7890;
  font-size:12px;
  line-height:1.5;
}

/* Hosted storefront lifecycle is a connected status overview, not floating cards. */
.storefront-lifecycle-host{
  min-width:0;
  background:#fff;
}

.storefront-lifecycle-host:empty{
  display:none;
}

.storefront-lifecycle-host>.asg-flow{
  margin:0;
  padding:22px 24px;
  border:0;
  border-bottom:1px solid #d9e1ec;
  border-radius:0;
  background:#fff;
}

.storefront-lifecycle-host>.asg-flow .asg-flow-stages{
  gap:0;
  overflow:hidden;
  border:1px solid #dbe4ef;
  border-radius:10px;
  background:#f9fbfe;
}

.storefront-lifecycle-host>.asg-flow .asg-flow-stages li{
  padding:12px 14px;
  border-right:1px solid #dbe4ef;
}

.storefront-lifecycle-host>.asg-flow .asg-flow-stages li:last-child{
  border-right:0;
}

.storefront-lifecycle-host>.asg-flow-facts{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:0;
  margin:0;
  padding:0;
  border-top:0;
  border-bottom:1px solid #d9e1ec;
  background:#fff;
}

.storefront-lifecycle-host>.asg-flow-facts>div{
  min-width:0;
  display:block;
  padding:16px 18px;
  border-right:1px solid #d9e1ec;
}

.storefront-lifecycle-host>.asg-flow-facts>div:last-child{
  border-right:0;
}

.storefront-lifecycle-host>.asg-flow-facts dt{
  color:#75859a;
  font-size:10px;
  font-weight:850;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.storefront-lifecycle-host>.asg-flow-facts dd{
  margin-top:6px;
  color:#15273f;
  font-size:12px;
  font-weight:750;
  line-height:1.45;
}

.storefront-lifecycle-host>.asg-flow-facts code{
  font-size:11px;
}

.storefront-lifecycle-host>.asg-flow-note{
  margin:0;
  padding:13px 18px;
  border-bottom:1px solid #d9e1ec;
  background:#f8fafc;
  color:#65758a;
}

.storefront-loading-flow.asg-flow{
  margin:0;
  border:0;
  border-bottom:1px solid #d9e1ec;
  border-radius:0;
  background:#f8fbff;
}

@keyframes asg-flow-turn{
  to{transform:rotate(360deg)}
}

@media(max-width:1000px){
  .storefront-lifecycle-host>.asg-flow-facts{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .storefront-lifecycle-host>.asg-flow-facts>div{
    border-bottom:1px solid #d9e1ec;
  }

  .storefront-lifecycle-host>.asg-flow-facts>div:nth-child(2n){
    border-right:0;
  }

  .storefront-lifecycle-host>.asg-flow-facts>div:last-child{
    grid-column:1/-1;
    border-bottom:0;
  }
}

@media(max-width:600px){
  .asg-flow{padding:16px}
  .asg-flow-head{gap:12px}
  .asg-flow-stages{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
  .asg-flow-facts>div{grid-template-columns:1fr;gap:3px}

  .storefront-lifecycle-host>.asg-flow{
    padding:18px;
  }

  .storefront-lifecycle-host>.asg-flow .asg-flow-stages{
    grid-template-columns:1fr 1fr;
    gap:0;
  }

  .storefront-lifecycle-host>.asg-flow .asg-flow-stages li{
    border-right:1px solid #dbe4ef;
    border-bottom:1px solid #dbe4ef;
  }

  .storefront-lifecycle-host>.asg-flow .asg-flow-stages li:nth-child(2n){
    border-right:0;
  }

  .storefront-lifecycle-host>.asg-flow .asg-flow-stages li:nth-last-child(-n+2){
    border-bottom:0;
  }

  .storefront-lifecycle-host>.asg-flow-facts{
    grid-template-columns:1fr;
  }

  .storefront-lifecycle-host>.asg-flow-facts>div,
  .storefront-lifecycle-host>.asg-flow-facts>div:nth-child(2n){
    grid-column:auto;
    border-right:0;
    border-bottom:1px solid #d9e1ec;
  }

  .storefront-lifecycle-host>.asg-flow-facts>div:last-child{
    border-bottom:0;
  }
}

@media(prefers-reduced-motion:reduce){
  .asg-flow-orbit i{animation:none}
}