.campaign-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-lg);
}

.campaign-toolbar > .button {
  width: fit-content;
}

.campaign-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.campaign-filter {
  min-height: var(--control-height);
  padding-inline: var(--space-md);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
}

.campaign-filter[aria-pressed="true"] {
  border-color: var(--color-brand-300);
  background: var(--color-brand-50);
  color: var(--color-brand-800);
}

.campaign-overview-list {
  display: grid;
  gap: var(--space-sm);
}

.campaign-list-card {
  min-width: 0;
  border-block-end: 1px solid var(--color-line);
  background: var(--color-surface);
}

.campaign-row-button {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) auto;
  gap: var(--space-lg);
  align-items: center;
  width: 100%;
  padding: var(--space-md);
  border: 0;
  background: transparent;
  color: var(--color-ink);
  text-align: start;
}

.campaign-thumb {
  width: 5.5rem;
  aspect-ratio: 4 / 3;
  overflow: clip;
  border-radius: var(--radius-sm);
  background: var(--color-brand-50);
}

.campaign-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.campaign-row-main {
  display: grid;
  gap: var(--space-xs);
  min-width: 0;
}

.campaign-row-main h2 {
  overflow: hidden;
  font-size: var(--text-base);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-row-meta,
.campaign-channels {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xs);
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.campaign-row-meta svg,
.campaign-row-side small svg {
  width: 0.9rem;
  height: 0.9rem;
  flex: none;
}

.campaign-channel-icons {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-brand-700);
}

.campaign-channel-icons svg {
  width: 1rem;
  height: 1rem;
}

.campaign-row-side {
  display: grid;
  justify-items: end;
  gap: var(--space-xs);
  min-width: 8rem;
}

.campaign-row-side small {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.campaign-editor-head {
  display: grid;
  gap: var(--space-sm);
}

.campaign-editor-head .button {
  width: fit-content;
}

.campaign-editor {
  display: grid;
  grid-template-areas: "form preview";
  grid-template-columns: minmax(27rem, 0.92fr) minmax(24rem, 1.08fr);
  gap: var(--space-xl);
  align-items: start;
}

.campaign-editor-form {
  grid-area: form;
  overflow: clip;
}

.campaign-group {
  display: grid;
  gap: var(--space-md);
  min-width: 0;
  margin: 0;
  padding: var(--space-lg);
  border: 0;
}

.campaign-group + .campaign-group {
  border-block-start: 1px solid var(--color-line);
}

.campaign-group legend {
  padding: 0;
  font-size: var(--text-md);
  font-weight: 600;
}

.campaign-group > .button {
  width: fit-content;
}

.campaign-copy-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.campaign-creative-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);
}

.campaign-creative-option {
  display: grid;
  gap: var(--space-xs);
  min-width: 0;
  min-height: 7.5rem;
  padding: var(--space-xs);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 500;
  white-space: nowrap;
}

.campaign-creative-option[aria-pressed="true"] {
  border-color: var(--color-brand-500);
  color: var(--color-brand-800);
}

.campaign-creative-option img {
  width: 100%;
  height: 5rem;
  border-radius: calc(var(--radius-sm) / 2);
  object-fit: cover;
}

.campaign-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding: var(--space-lg);
  border-block-start: 1px solid var(--color-line);
}

.campaign-preview-column {
  position: sticky;
  inset-block-start: calc(var(--topbar-height) + var(--space-lg));
  grid-area: preview;
  display: grid;
  gap: var(--space-md);
}

.campaign-editor-preview {
  display: grid;
  grid-template-columns: minmax(11rem, 0.7fr) minmax(0, 1fr);
  min-height: 20rem;
  overflow: clip;
}

.campaign-preview-art {
  min-height: 20rem;
  background: var(--color-brand-50);
}

.campaign-preview-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.campaign-preview-copy {
  display: grid;
  align-content: center;
  gap: var(--space-md);
  padding: var(--space-xl);
}

.campaign-preview-copy h2 {
  font-size: var(--text-lg);
  font-weight: 600;
}

.campaign-preview-copy p {
  color: var(--color-ink-soft);
}

.campaign-preview-copy small {
  color: var(--color-muted);
}

.campaign-confirmation {
  display: grid;
  gap: var(--space-md);
  padding: var(--space-lg);
  border: 1px solid var(--color-gold-300);
  border-radius: var(--radius-md);
  background: var(--color-gold-50);
}

.campaign-confirmation-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}

.campaign-confirmation-head svg {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  color: var(--color-warning);
}

.campaign-confirmation p {
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}

.campaign-confirmation-details {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: var(--space-md);
  align-items: center;
}

.campaign-confirmation-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

@media (hover: hover) and (pointer: fine) {
  .campaign-row-button:hover,
  .campaign-creative-option:hover {
    background: var(--color-surface-hover);
  }
}

@media (max-width: 48rem) {
  .campaign-toolbar {
    display: grid;
  }

  .campaign-editor {
    grid-template-areas: "preview" "form";
    grid-template-columns: minmax(0, 1fr);
  }

  .campaign-preview-column {
    position: static;
  }

  .campaign-editor-preview {
    grid-template-columns: 8rem minmax(0, 1fr);
    min-height: 12rem;
  }

  .campaign-preview-art {
    min-height: 12rem;
  }

  .campaign-preview-copy {
    padding: var(--space-md);
  }

  .campaign-preview-copy p,
  .campaign-preview-copy small {
    display: none;
  }

  .campaign-row-button {
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: var(--space-md);
  }

  .campaign-thumb {
    width: 4.5rem;
  }

  .campaign-row-side {
    display: flex;
    align-items: center;
    grid-column: 2;
    justify-content: flex-start;
    gap: var(--space-sm);
    min-width: 0;
  }
}

@media (max-width: 25.875rem) {
  .campaign-group,
  .campaign-form-actions {
    padding: var(--space-md);
  }

  .campaign-creative-picker {
    gap: var(--space-xs);
  }

  .campaign-creative-option {
    min-height: 6.5rem;
    padding: var(--space-2xs);
  }

  .campaign-creative-option img {
    height: 4rem;
  }

  .campaign-form-actions .button,
  .campaign-confirmation-actions .button {
    width: 100%;
  }
}