/* Campaigns — the plan-a-run-of-posts screen. Reuses the shell's buttons
   and spacing tokens; only the layout that is specific to this screen
   lives here. */

.campaign-crumb {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--text-muted);
}

.campaign-stage {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 46rem;
}

.campaign-notice,
.campaign-error {
  border-radius: 10px;
  padding: 0.65rem 0.85rem;
  margin: 0;
}

.campaign-notice {
  background: var(--surface-2, rgba(255, 255, 255, 0.06));
  color: var(--text);
}

.campaign-error {
  background: rgba(220, 80, 80, 0.12);
  color: var(--text);
}

/* --- brand + shape pickers --- */

.campaign-brand-grid,
.campaign-shape-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.75rem;
}

.campaign-brand-card,
.campaign-shape-card,
.campaign-angle-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-align: left;
  padding: 0.9rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  background: var(--surface-1, rgba(255, 255, 255, 0.04));
  color: inherit;
  font: inherit;
  cursor: pointer;
  width: 100%;
}

.campaign-brand-card:hover,
.campaign-shape-card:hover,
.campaign-angle-card:hover {
  border-color: var(--accent, #6ea8fe);
}

.campaign-shape-card.is-selected {
  border-color: var(--accent, #6ea8fe);
  box-shadow: 0 0 0 1px var(--accent, #6ea8fe) inset;
}

.campaign-shape-label {
  font-weight: 600;
}

.campaign-shape-when,
.campaign-angle-why {
  color: var(--text-muted);
  font-size: 0.9em;
}

/* --- topic stage --- */

.campaign-topic,
.campaign-seed,
.campaign-input {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border-radius: 10px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  background: var(--surface-1, rgba(255, 255, 255, 0.04));
  color: inherit;
  font: inherit;
}

.campaign-brainstorm,
.campaign-existing,
.campaign-draft-panel {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 1rem;
  border-radius: 12px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
}

.campaign-angle-list,
.campaign-existing-list,
.campaign-slot-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: 100%;
}

/* --- the campaign list (R2 item a) --- */

.campaign-list-section {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: 100%;
}

.campaign-list-heading {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9em;
}

.campaign-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: 100%;
}

.campaign-row {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.8rem 0.9rem;
  border-radius: 12px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
}

.campaign-row-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: baseline;
  justify-content: space-between;
}

.campaign-row-name {
  font-weight: 600;
}

.campaign-row-state,
.campaign-row-line,
.campaign-row-note {
  color: var(--text-muted);
  font-size: 0.9em;
  margin: 0;
}

.campaign-row-dot {
  padding: 0 0.4rem;
}

/* Quiet by design: the numbers above the bar are the real answer, the bar
   is only the shape of them at a glance. */
.campaign-bar {
  height: 0.35rem;
  border-radius: 999px;
  background: var(--surface-2, rgba(255, 255, 255, 0.08));
  overflow: hidden;
}

.campaign-bar-fill {
  display: block;
  height: 100%;
  background: var(--accent, #6ea8fe);
}

/* --- review list --- */

.campaign-phase {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.campaign-phase-name {
  margin: 0;
}

.campaign-slot {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.8rem 0.9rem;
  border-radius: 12px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
}

.campaign-slot-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: baseline;
}

.campaign-slot-date {
  font-weight: 600;
}

.campaign-slot-type,
.campaign-slot-platform,
.campaign-slot-status {
  color: var(--text-muted);
  font-size: 0.9em;
}

.campaign-slot-angle {
  margin: 0;
}

.campaign-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* Advisory only — deliberately quiet, never red: nothing here blocks a
   save, so it must not read as a failure. */
.campaign-chip {
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.8em;
  background: var(--surface-2, rgba(255, 255, 255, 0.08));
  color: var(--text-muted);
}

.campaign-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.campaign-slot-editor {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: 100%;
}

.campaign-field,
.campaign-anchor-label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.campaign-field-label {
  color: var(--text-muted);
  font-size: 0.9em;
}

.campaign-angle-input {
  resize: vertical;
}