/* "Use this post" on the Content tab (views/campaign/content-posts*.js): a creator's TikTok
   posts under their pieces, folded until asked for. Every rule is .cup-*; buttons, links
   and the picker are the app's .btn, .link-btn and .input. Deploy Previews only, sample
   data, as in the mockup's "Content tab › a creator: Use this post" board (canvas v31). */

.cup { margin: 6px 0 2px; padding-top: 8px; border-top: 1px dashed var(--border); }
.cup-i { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cup-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px;
  background: none; color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.cup-toggle:hover { border-color: var(--muted); }
.cup-toggle .cup-i:first-child { fill: currentColor; stroke: none; color: var(--muted); }
.cup-toggle[aria-expanded="true"] .cup-chev { transform: rotate(180deg); }
.cup-tag { display: inline-block; padding: 0 6px; border: 1px dashed var(--warn); border-radius: 4px; color: var(--warn); font-size: 10px; font-weight: 600;
  letter-spacing: .02em; line-height: 1.6; white-space: nowrap; }
.cup-muted { margin: 6px 0 0; font-size: 12px; color: var(--muted); }

.cup-list { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.cup-post { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: 10px; }
.cup-thumb { width: 40px; height: 64px; border-radius: 6px; background: var(--border); color: var(--muted); display: flex; align-items: center; justify-content: center; }
.cup-thumb .cup-i { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.cup-thumb.is-live b { padding: 0 4px; border-radius: 3px; background: var(--bad); color: #ffffff; font-size: 9px; letter-spacing: .03em; }
.cup-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; }
.cup-main small { font-size: 12px; color: var(--muted); }
.cup-stats { font-size: 12px; color: var(--muted); }
.cup-stats b { color: var(--text); font-weight: 650; }
.cup-act { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.cup-for { height: 32px; padding: 0 8px; font-size: 13px; max-width: 180px; }
.cup-ok { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--good); }
.cup-act .link-btn { margin: 0; font-size: 13px; }

@media (max-width: 720px) {
  .cup-post { grid-template-columns: 40px minmax(0, 1fr); }
  .cup-act { grid-column: 1 / -1; justify-content: flex-start; }
}