/* Creative Partner OS v3 — Status pill styles.
 * Replaces v2.1's cp-readiness.css. Same visual treatment, honest taxonomy.
 */

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  background: #FFFFFF;
  border: 1px solid var(--warm-border, #E5E1DB);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--cp-navy, #0E1E36);
  line-height: 1.2;
  white-space: nowrap;
  text-transform: capitalize;
}
.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  flex-shrink: 0;
}

/* Dark variant — on navy/dark backgrounds */
.status-dark {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.95);
}

.status-mini {
  padding: 2px 7px;
  font-size: 10px;
}

/* Suspended treatment — for the Cooling Period note */
.suspended-treatment {
  position: relative;
  color: var(--slate-500, #64748B);
}
.suspended-treatment .susp-text {
  text-decoration: line-through;
  text-decoration-color: rgba(225, 29, 72, 0.65);
  text-decoration-thickness: 1.5px;
}
.suspended-treatment .susp-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  background: rgba(225, 29, 72, 0.08);
  border: 1px solid rgba(225, 29, 72, 0.25);
  color: #E11D48;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Status legend */
.status-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 10px 14px;
  background: var(--cream, #F8F7F4);
  border: 1px solid var(--warm-border, #E5E1DB);
  border-radius: 10px;
  font-size: 11px;
}
.status-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--slate-700, #334155);
  text-transform: capitalize;
}
.status-legend-item .sld {
  width: 6px;
  height: 6px;
  border-radius: 999px;
}