/* TCW Studio: What should we post next? */

.tcw-next-post-section{
  border-top:1px solid rgba(255,255,255,.08);
}

.tcw-next-post-toggle{
  width:100%;
  margin:0;
  padding:16px 0 13px;
  border:0;
  border-radius:0;
  background:transparent;
  color:#f6f7fb;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  text-align:left;
  font-size:14px;
  font-weight:700;
}

.tcw-next-post-toggle:hover{
  color:#fff;
}

.tcw-next-post-chevron{
  width:26px;
  height:26px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:#262b4b;
  color:#cbd2eb;
  transition:
    transform .18s ease,
    background .18s ease;
}

.tcw-next-post-section.tcw-next-post-open
.tcw-next-post-chevron{
  transform:rotate(180deg);
  background:linear-gradient(
    135deg,
    #14d9ff,
    #d622ff
  );
  color:#07101a;
}

.tcw-next-post-section:not(.tcw-next-post-open)
.tcw-next-post-body{
  display:none;
}

.tcw-next-post-body{
  padding-bottom:14px;
}

.tcw-next-post-intro{
  color:#9da7c8;
  font-size:10px;
  line-height:1.5;
}

.tcw-next-post-refresh{
  width:100%;
  min-height:38px;
  margin:10px 0 0;
  border-radius:10px;
  background:linear-gradient(
    135deg,
    rgba(22,213,247,.3),
    rgba(211,38,246,.28)
  );
  color:#f7f8ff;
  font-size:11px;
  font-weight:700;
}

.tcw-next-post-message{
  min-height:17px;
  margin-top:8px;
  color:#94a0c3;
  font-size:10px;
  line-height:1.45;
}

.tcw-next-post-message[data-state="error"]{
  color:#ff9cac;
}

.tcw-next-post-message[data-state="success"]{
  color:#85e8cd;
}

.tcw-next-post-card{
  display:none;
  margin-top:10px;
  padding:13px;
  border:1px solid rgba(92,214,255,.25);
  border-radius:14px;
  background:linear-gradient(
    145deg,
    rgba(38,47,84,.82),
    rgba(15,20,43,.9)
  );
}

.tcw-next-post-card.is-visible{
  display:block;
}

.tcw-next-post-label{
  color:#80e7d0;
  font-size:9px;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.tcw-next-post-service{
  margin-top:6px;
  color:#f8f9ff;
  font-size:15px;
  font-weight:800;
  line-height:1.25;
}

.tcw-next-post-reason{
  margin-top:7px;
  color:#aeb8d7;
  font-size:10px;
  line-height:1.5;
}

.tcw-next-post-detail{
  margin-top:10px;
  padding:9px 10px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:10px;
  background:rgba(8,12,31,.45);
}

.tcw-next-post-detail-label{
  color:#8793b7;
  font-size:8px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.tcw-next-post-topic{
  margin-top:4px;
  color:#f2f4ff;
  font-size:12px;
  font-weight:700;
  line-height:1.4;
}

.tcw-next-post-angle{
  margin-top:4px;
  color:#c7cee5;
  font-size:10px;
  line-height:1.4;
}

.tcw-next-post-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
  margin-top:10px;
}

.tcw-next-post-stat{
  padding:7px 5px;
  border-radius:9px;
  background:rgba(255,255,255,.045);
  text-align:center;
}

.tcw-next-post-stat-value{
  color:#f8f9ff;
  font-size:13px;
  font-weight:800;
}

.tcw-next-post-stat-label{
  margin-top:2px;
  color:#7e89aa;
  font-size:8px;
}

.tcw-next-post-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  margin-top:11px;
}

.tcw-next-post-actions button{
  min-height:35px;
  margin:0;
  padding:7px 8px;
  border-radius:9px;
  font-size:10px;
  font-weight:700;
}

.tcw-next-post-generate{
  grid-column:1 / -1;
  color:#07101a;
  background:#73e7c9;
}

.tcw-next-post-secondary{
  color:#eef1ff;
  background:#293052;
}

.tcw-gap-map{
  display:none;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.08);
}

.tcw-gap-map.is-visible{
  display:grid;
  gap:7px;
}

.tcw-gap-row{
  padding:8px 9px;
  border-radius:9px;
  background:rgba(255,255,255,.04);
}

.tcw-gap-row-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.tcw-gap-name{
  color:#e9ecfa;
  font-size:10px;
  font-weight:700;
}

.tcw-gap-count{
  color:#95a1c3;
  font-size:9px;
}

.tcw-gap-track{
  height:5px;
  margin-top:6px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.07);
}

.tcw-gap-fill{
  height:100%;
  min-width:3px;
  border-radius:999px;
  background:linear-gradient(
    90deg,
    #16d8fb,
    #cc35f0
  );
}

.tcw-gap-meta{
  margin-top:5px;
  color:#747f9f;
  font-size:8px;
}