/*
 * /css/growth_stage6.css
 * Stage 6: expanded content layout, creator tools and product analytics.
 */

/* ===== Use the space released by the removed duplicate sidebar ===== */
.vm-public-body .app-main-shell{
  width:100%;
  max-width:1760px;
  margin:0 auto;
  padding-inline:clamp(14px,2vw,32px);
}

.vm-feed-page.vm-no-legacy-sidebar{
  width:100%;
  grid-template-columns:minmax(0,1fr) minmax(250px,310px)!important;
  align-items:start;
  gap:clamp(16px,1.7vw,28px)!important;
}
.vm-feed-page.vm-no-legacy-sidebar>.vm-feed-column{
  width:100%;
  max-width:none;
  min-width:0;
}
.vm-feed-page.vm-no-legacy-sidebar>.vm-feed-right-rail{
  width:100%;
  min-width:0;
}
.vm-feed-page.vm-no-legacy-sidebar:not(.vm-with-left-ad)>.vm-feed-left-ad-rail{
  display:none!important;
}

/* An independent left advertising rail exists only when a real campaign exists. */
@media(min-width:1500px){
  .vm-feed-page.vm-no-legacy-sidebar.vm-with-left-ad{
    grid-template-columns:minmax(180px,220px) minmax(0,1fr) minmax(250px,310px)!important;
  }
  .vm-feed-page.vm-no-legacy-sidebar.vm-with-left-ad>.vm-feed-left-ad-rail{
    display:block!important;
    grid-column:1!important;
    order:1!important;
  }
  .vm-feed-page.vm-no-legacy-sidebar.vm-with-left-ad>.vm-feed-column{
    grid-column:2!important;
    order:2!important;
  }
  .vm-feed-page.vm-no-legacy-sidebar.vm-with-left-ad>.vm-feed-right-rail{
    grid-column:3!important;
    order:3!important;
  }
}

@media(min-width:992px) and (max-width:1499.98px){
  .vm-feed-page.vm-no-legacy-sidebar.vm-with-left-ad>.vm-feed-left-ad-rail{
    display:none!important;
  }
  .vm-feed-page.vm-no-legacy-sidebar.vm-with-left-ad{
    grid-template-columns:minmax(0,1fr) minmax(250px,300px)!important;
  }
  .vm-feed-page.vm-no-legacy-sidebar.vm-with-left-ad>.vm-feed-column{
    grid-column:1!important;
    order:1!important;
  }
  .vm-feed-page.vm-no-legacy-sidebar.vm-with-left-ad>.vm-feed-right-rail{
    grid-column:2!important;
    order:2!important;
  }
}

@media(max-width:991.98px){
  .vm-public-body .app-main-shell{padding-inline:12px}
  .vm-feed-page.vm-no-legacy-sidebar,
  .vm-feed-page.vm-no-legacy-sidebar.vm-with-left-ad{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .vm-feed-page.vm-no-legacy-sidebar>.vm-feed-column,
  .vm-feed-page.vm-no-legacy-sidebar>.vm-feed-right-rail{
    grid-column:1!important;
  }
}

/* ===== Stage 6 shared surfaces ===== */
.vm-stage6-page{display:grid;gap:22px}
.vm-stage6-hero{
  position:relative;
  overflow:hidden;
  padding:clamp(22px,3vw,38px);
  border:1px solid var(--vm-border);
  border-radius:28px;
  background:
    radial-gradient(circle at 88% 18%,color-mix(in srgb,var(--vm-primary) 24%,transparent),transparent 34%),
    linear-gradient(135deg,color-mix(in srgb,var(--vm-primary-soft) 72%,var(--vm-surface)),var(--vm-surface));
  box-shadow:var(--vm-shadow-sm);
}
.vm-stage6-kicker{font-size:.78rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--vm-primary)}
.vm-stage6-title{margin:.35rem 0 .55rem;font-size:clamp(1.75rem,3vw,2.65rem);font-weight:900;letter-spacing:-.04em;color:var(--vm-text)}
.vm-stage6-subtitle{max-width:760px;margin:0;color:var(--vm-muted);font-size:1.02rem;line-height:1.65}
.vm-stage6-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.vm-stage6-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.vm-stage6-stat,.vm-stage6-card{
  border:1px solid var(--vm-border);
  border-radius:22px;
  background:var(--vm-surface);
  box-shadow:var(--vm-shadow-sm);
}
.vm-stage6-stat{padding:18px;min-width:0}
.vm-stage6-stat small{display:block;margin-bottom:8px;color:var(--vm-muted);font-weight:700}
.vm-stage6-stat strong{display:block;font-size:clamp(1.45rem,2.3vw,2.15rem);line-height:1;color:var(--vm-text);overflow-wrap:anywhere}
.vm-stage6-stat span{display:block;margin-top:8px;color:var(--vm-muted);font-size:.8rem}
.vm-stage6-card{padding:clamp(17px,2vw,24px)}
.vm-stage6-card h2,.vm-stage6-card h3{color:var(--vm-text);font-weight:850}
.vm-stage6-two{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.75fr);gap:18px;align-items:start}
.vm-stage6-table{width:100%;border-collapse:separate;border-spacing:0}
.vm-stage6-table th,.vm-stage6-table td{padding:12px 10px;border-bottom:1px solid var(--vm-border);vertical-align:middle}
.vm-stage6-table th{color:var(--vm-muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.06em}
.vm-stage6-list{display:grid;gap:10px}
.vm-stage6-list-item{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 14px;border:1px solid var(--vm-border);border-radius:16px;background:var(--vm-surface-soft)}
.vm-stage6-list-copy{min-width:0}
.vm-stage6-list-copy strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vm-stage6-list-copy small{color:var(--vm-muted)}
.vm-stage6-progress{height:9px;border-radius:999px;overflow:hidden;background:var(--vm-surface-soft)}
.vm-stage6-progress>span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--vm-primary),#8b5cf6)}
.vm-stage6-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:var(--vm-primary-soft);color:var(--vm-primary);font-size:.78rem;font-weight:800}
.vm-supporter-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:999px;background:linear-gradient(135deg,#fff4bf,#ffd56a);color:#715000;font-size:.75rem;font-weight:900;border:1px solid rgba(167,112,0,.18)}
.vm-stage6-chart{display:flex;align-items:end;gap:7px;height:150px;padding-top:12px}
.vm-stage6-chart-bar{flex:1;min-width:8px;border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,var(--vm-primary),#8b5cf6);opacity:.88;position:relative}
.vm-stage6-chart-bar:hover{opacity:1}
.vm-stage6-chart-bar span{position:absolute;inset:auto 50% -24px;transform:translateX(-50%);font-size:.68rem;color:var(--vm-muted);white-space:nowrap}
.vm-stage6-empty{padding:24px;text-align:center;color:var(--vm-muted);border:1px dashed var(--vm-border);border-radius:18px}

@media(max-width:1199.98px){.vm-stage6-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:991.98px){.vm-stage6-two{grid-template-columns:1fr}}
@media(max-width:575.98px){.vm-stage6-grid{grid-template-columns:1fr}.vm-stage6-card{padding:16px}.vm-stage6-table{font-size:.88rem}}