/* Scene 11, governed campaign approval */
.campaign-approval-page {
  max-width: 1440px;
  margin: 0 auto;
  color: var(--live-ink, #08080c);
}

.campaign-approval-page .page-heading {
  align-items: flex-end;
  margin-bottom: 24px;
}

.campaign-approval-page .page-heading h1 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 6px;
  color: var(--live-ink, #08080c);
}

.campaign-approval-page .page-heading .lead {
  margin-bottom: 0;
  color: var(--live-muted, #626875);
}

.approval-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.approval-header-actions .btn.primary {
  min-width: 184px;
  background: #090a0f;
  border-color: #090a0f;
}

.approval-header-actions .btn.danger {
  min-width: 100px;
  background: #fff;
}

.approval-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: 20px;
  align-items: start;
}

.approval-main-column,
.approval-side-column {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 18px;
}

.campaign-approval-page .card {
  min-width: 0;
  border-color: var(--live-line, #dfe2e8);
  border-radius: 9px;
  box-shadow: 0 2px 5px rgb(8 8 12 / 6%);
}

.approval-card-heading {
  align-items: flex-start;
  margin-bottom: 14px;
}

.approval-card-heading > div:first-child {
  min-width: 0;
}

.approval-card-heading strong {
  display: inline-block;
  margin-bottom: 3px;
  color: #12141a;
  font-size: 16px;
}

.approval-card-heading p {
  margin: 0;
}

.approval-check-card {
  padding: 20px;
}

.approval-check-card .card-header .btn {
  min-height: 36px;
  padding: 8px 13px;
  white-space: nowrap;
}

.approval-check-list {
  overflow: hidden;
  border: 1px solid var(--live-line, #dfe2e8);
  border-radius: 7px;
}

.approval-check-row {
  display: grid;
  grid-template-columns: 30px minmax(135px, 1.25fr) auto minmax(145px, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 74px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--live-line, #dfe2e8);
}

.approval-check-row:last-child {
  border-bottom: 0;
}

.approval-check-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: #e9ebf0;
  color: #5f6878;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

.approval-check-approved .approval-check-icon {
  background: #d9f2e4;
  color: #12825c;
}

.approval-check-blocked .approval-check-icon {
  background: #fff0d8;
  color: #bb6b00;
}

.approval-check-locked .approval-check-icon {
  background: #eee9ff;
  color: #6545d8;
  border-radius: 7px;
}

.approval-check-copy,
.approval-check-detail {
  min-width: 0;
}

.approval-check-copy strong,
.approval-check-copy span,
.approval-check-detail span {
  display: block;
}

.approval-check-copy strong {
  color: #101d39;
  font-size: 14px;
}

.approval-check-copy span,
.approval-check-detail,
.approval-check-detail span {
  color: var(--live-muted, #626875);
  font-size: 11px;
  line-height: 1.45;
}

.approval-check-detail {
  color: #182442;
  line-height: 1.45;
}

.approval-check-status {
  justify-self: start;
}

.approval-check-status .badge {
  font-size: 11px;
}

.approval-check-action {
  justify-self: end;
  min-height: 34px;
  padding: 7px 12px !important;
  font-size: 12px;
}

.approval-canonical-card {
  padding: 20px;
}

.approval-canonical-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  border: 1px solid var(--live-line, #dfe2e8);
  border-radius: 7px;
  overflow: hidden;
}

.approval-canonical-list li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px 14px;
  border-bottom: 1px solid var(--live-line, #dfe2e8);
}

.approval-canonical-list li:last-child {
  border-bottom: 0;
}

.approval-canonical-list li > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  background: #f0f1f4;
  color: #1f2d4c;
  font-size: 12px;
  font-weight: 700;
}

.approval-canonical-list p {
  margin: 2px 0 0;
  color: #25355a;
  font-size: 12px;
  line-height: 1.55;
}

.approval-canonical-note {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin: 0;
  padding: 10px 12px;
  border-color: #cfe5f9;
  background: #f0f7ff;
  color: #37557c;
}

.approval-inline-link {
  color: #075bff;
  font-size: 11px;
  text-decoration: none;
}

.approval-inline-link:hover {
  text-decoration: underline;
}

.approval-guidance-card {
  overflow: hidden;
  padding: 0;
}

.approval-guidance-intro {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 17px;
  border-bottom: 1px solid #d7e4f3;
  background: #f1f8ff;
}

.approval-guidance-intro p {
  margin: 0;
  color: #234673;
  font-size: 13px;
  line-height: 1.55;
}

.approval-info-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid #1769ff;
  border-radius: 50%;
  color: #1769ff;
  font-size: 12px;
  font-weight: 700;
}

.approval-guidance-body {
  padding: 17px;
}

.approval-guidance-body > strong {
  display: block;
  color: #0e1f3e;
  font-size: 15px;
}

.approval-guidance-body > p {
  margin: 4px 0 13px;
}

.approval-adaptation-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.approval-adaptation-list span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 33px;
  padding: 7px 10px;
  border: 1px solid #dfe2e8;
  border-radius: 6px;
  background: #fff;
  color: #172341;
  font-size: 12px;
}

.approval-adaptation-list span:first-letter {
  color: #155dcb;
  font-size: 16px;
}

.approval-adaptation-list b {
  font-weight: 500;
}

.approval-locked-note {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 9px 11px;
  border: 1px solid #f5cfd4;
  border-radius: 6px;
  background: #fff3f4;
  color: #bd2b37;
  font-size: 12px;
}

.approval-variants-card {
  padding: 17px;
}

.approval-variants-card .card-header {
  align-items: center;
}

.approval-variant-count {
  display: inline-block;
  margin-left: 18px;
}

.approval-variants-card .card-header .btn {
  min-height: 35px;
  padding: 7px 12px;
  white-space: nowrap;
}

.approval-variant-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.approval-variant-card {
  min-width: 0;
  min-height: 143px;
  padding: 11px;
  border: 1px solid var(--live-line, #dfe2e8);
  border-radius: 8px;
  background: #fbfcfe;
}

.approval-variant-head {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
  margin-bottom: 9px;
}

.approval-variant-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  border-radius: 6px;
  background: #e8efff;
  color: #3158b7;
  font-size: 15px;
}

.approval-variant-head > div {
  min-width: 0;
}

.approval-variant-head strong,
.approval-variant-head span {
  display: block;
  overflow: hidden;
  color: #203052;
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.approval-variant-head span {
  color: var(--live-muted, #626875);
}

.approval-variant-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 80px;
  gap: 8px;
  min-width: 0;
  align-items: end;
}

.approval-variant-body h3 {
  display: -webkit-box;
  overflow: hidden;
  margin: 0 0 7px;
  color: #111827;
  font-size: 13px;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.approval-variant-body p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0 0 7px;
  color: #53617b;
  font-size: 10px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.approval-variant-cta {
  display: inline-block;
  padding: 4px 7px;
  border-radius: 4px;
  background: #4d2ddb;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
}

.approval-preview-art {
  position: relative;
  display: flex;
  min-height: 69px;
  flex-direction: column;
  justify-content: flex-end;
  gap: 5px;
  overflow: hidden;
  padding: 9px;
  border-radius: 6px;
  background: linear-gradient(145deg, #dceff7 0%, #9dbfca 54%, #567582 100%);
}

.approval-preview-art::before {
  position: absolute;
  top: 10px;
  right: 11px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: rgb(255 255 255 / 65%);
  content: '';
}

.approval-preview-art i {
  position: relative;
  z-index: 1;
  display: block;
  width: 70%;
  height: 4px;
  border-radius: 4px;
  background: rgb(255 255 255 / 82%);
}

.approval-preview-art i:nth-child(2) {
  width: 54%;
  opacity: .8;
}

.approval-preview-art i:nth-child(3) {
  width: 63%;
  opacity: .6;
}

.approval-preview-art b {
  position: absolute;
  right: -8px;
  bottom: -20px;
  width: 78px;
  height: 64px;
  border-radius: 50% 50% 0 0;
  background: rgb(36 66 77 / 58%);
}

.approval-art-email,
.approval-art-german-email {
  background: linear-gradient(150deg, #f1e9ff 0%, #c5b5f0 58%, #6c4cc6 100%);
}

.approval-art-email::before,
.approval-art-german-email::before {
  top: 14px;
  right: 13px;
  width: 26px;
  height: 18px;
  border-radius: 3px;
  background: #fff;
  box-shadow: inset 0 -8px #e0d6fa;
}

.approval-art-manager {
  background: linear-gradient(150deg, #dff5ec 0%, #9cd0b9 58%, #407b63 100%);
}

.approval-art-frontline {
  background: linear-gradient(150deg, #fff1db 0%, #f3bf73 58%, #b56d18 100%);
}

.approval-art-german {
  background: linear-gradient(150deg, #dceff7 0%, #a6c6db 56%, #456b83 100%);
}

.approval-provenance-note {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
  padding: 9px 10px;
  border-top: 1px solid var(--live-line, #dfe2e8);
  color: #53617b;
  font-size: 11px;
}

.approval-trust-bar {
  display: flex;
  gap: 28px;
  align-items: center;
  min-height: 43px;
  margin-top: 20px;
  padding: 9px 15px;
  border: 1px solid var(--live-line, #dfe2e8);
  border-radius: 7px;
  background: #fff;
  color: #52617d;
  font-size: 11px;
}

.approval-trust-bar strong {
  color: #53617b;
  font-weight: 500;
}

.approval-trust-bar a {
  margin-left: auto;
  color: #075bff;
  text-decoration: none;
}

.approval-trust-bar a:hover {
  text-decoration: underline;
}

@media (max-width: 1100px) {
  .approval-check-row {
    grid-template-columns: 30px minmax(125px, 1fr) auto minmax(120px, 1fr);
  }

  .approval-check-action {
    grid-column: 4;
    justify-self: start;
  }

  .approval-variant-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .approval-preview-art {
    min-height: 48px;
  }
}

@media (max-width: 900px) {
  .approval-grid {
    grid-template-columns: 1fr;
  }

  .approval-side-column {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    align-items: start;
  }

  .approval-trust-bar {
    gap: 16px;
    flex-wrap: wrap;
  }

  .approval-trust-bar a {
    margin-left: 0;
  }
}

@media (max-width: 620px) {
  .campaign-approval-page .page-heading {
    align-items: flex-start;
  }

  .approval-header-actions {
    width: 100%;
  }

  .approval-header-actions .btn {
    flex: 1 1 auto;
  }

  .approval-check-row {
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 9px;
    padding: 11px 10px;
  }

  .approval-check-status {
    justify-self: end;
  }

  .approval-check-detail {
    grid-column: 2 / -1;
  }

  .approval-check-action {
    grid-column: 2 / -1;
    justify-self: start;
  }

  .approval-side-column {
    display: flex;
  }

  .approval-variant-grid {
    grid-template-columns: 1fr;
  }

  .approval-variant-body {
    grid-template-columns: minmax(0, 1fr) 88px;
  }

  .approval-trust-bar {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
}