/* What a campaign's posts sold, on its Content tab (views/campaign/content-sales*.js,
   docs/prd-creator-sales-step2.md Part 3b): the total over the list and a line under each
   posted TikTok piece. Every rule is .cps-*. LIVE and video wear the creator panel's
   colours, so the two screens read alike; the tokens are the panel's, repeated here because
   the panel scopes them to .cp. */

.cps { --tt-c0: var(--accent); --tt-c1: #d95926; margin: 0 0 14px; padding: 14px 16px; }
.cps-h { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; }
.cps-h h3 { margin: 0; font-size: 15px; }
.cps-ts { font-size: 12px; color: var(--muted); }
.cps-cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.cps-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; }
.cps-cl { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; color: var(--muted); }
.cps-key { display: inline-block; flex: none; width: 9px; height: 9px; margin-right: 6px; border-radius: 2px; background: var(--tt, var(--muted)); }
.cps-key.t-c0 { --tt: var(--tt-c0); }
.cps-key.t-c1 { --tt: var(--tt-c1); }
.cps-cv { font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; }
.cps-cs { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.cps-note { margin: 10px 0 0; font-size: 12px; color: var(--muted); }
.cps-note a { white-space: nowrap; }

/* Under a posted piece: one line, quiet unless it sold or the link needs mending. */
.cps-line { margin: 4px 0 0; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.cps-line .cps-k { display: inline-block; margin-right: 4px; padding: 0 5px; border: 1px solid var(--border); border-radius: 4px; font-size: 10px; font-weight: 600;
  letter-spacing: .02em; line-height: 1.6; white-space: nowrap; color: var(--muted); }
.cps-line.is-sold { color: var(--text); }
.cps-line.is-fix { color: var(--warn); }

@media (max-width: 560px) {
  .cps-cells { grid-template-columns: minmax(0, 1fr); }
}