/* Shared artwork corrections; palette and surface comparisons are scoped below.
   User authority and dimensions: specs/creative-image-controls.md. */
.awareness-art .creative-loop {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: auto;
  height: 100%;
  aspect-ratio: 1;
  margin-inline: auto;
}
.awareness-art .creative-loop__track {
  background: var(--neutral-400);
  mask: url('assets/agent-creative-options/circular-routine.svg') center / contain no-repeat;
}
.awareness-art .creative-loop__node {
  width: 38.8889%;
  height: auto;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-1);
  border-radius: var(--radius-full);
  background: var(--surface);
  box-shadow: var(--awareness-installed-shadow);
}
.awareness-art .creative-loop__node:nth-child(2) { left: 50%; top: 20.3704%; }
.awareness-art .creative-loop__node:nth-child(3) { left: 77.2638%; top: 67.5926%; }
.awareness-art .creative-loop__node:nth-child(4) { left: 22.7362%; top: 67.5926%; }
.awareness-art .creative-loop__node .ph { font-size: var(--space-6); }
.awareness-art .creative-loop__node b { font-size: var(--awareness-fs-micro); line-height: var(--space-5); }
.awareness-art .creative-page-context { width: 55%; opacity: .65; }
.awareness-art .creative-page-result--criteria {
  top: 12%;
  width: 80%;
  height: 84%;
  padding: var(--space-4);
  gap: var(--space-3);
  justify-content: space-between;
}
.awareness-art .creative-page-criterion { display: flex; flex-direction: column; gap: var(--space-2); }
.awareness-art .creative-page-criterion > span { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.awareness-art .creative-page-criterion b { color: var(--neutral-600); font: var(--fw-medium) var(--awareness-fs-detail)/var(--awareness-lh-detail) var(--font-sans); white-space: nowrap; }
.awareness-art .creative-page-criterion small { color: var(--neutral-600); font: var(--fw-medium) var(--awareness-fs-detail)/var(--awareness-lh-detail) var(--font-sans); font-variant-numeric: tabular-nums; }
.awareness-art .creative-page-criterion > i { display: block; height: var(--space-1); background: var(--neutral-100); border-radius: var(--radius-full); }
.awareness-art .creative-page-criterion em { display: block; width: 76%; height: 100%; border-radius: inherit; background: var(--neutral-300); }
.awareness-art .creative-page-criterion:nth-child(2) em { width: 84%; }
.awareness-art .creative-page-criterion:nth-child(3) em { width: 62%; }
.awareness-art .creative-audit-dial { background: conic-gradient(from 0deg,var(--neutral-300) 0 82%,var(--neutral-100) 82% 100%); box-shadow: none; }
.awareness-art .creative-audit-dial::before { background: var(--surface); box-shadow: none; inset: var(--space-2); }
.awareness-art .creative-audit-checks em { background: var(--neutral-300); }
.awareness-art .creative-value-chart { position: relative; display: block; width: 56%; height: 100%; }
.awareness-art .creative-value-chart img { width: 100%; height: 100%; object-fit: contain; }

/* Two orthogonal native radio groups. Their labels remain neutral UI chrome. */
.agent-catalog--options .creative-options { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-5) var(--space-8); margin-bottom: var(--space-6); }
.agent-catalog--options .creative-options__group { display: flex; align-items: center; gap: var(--space-1); min-width: 0; margin: 0; border: 0; padding: 0; }
.agent-catalog--options .creative-options__legend { float: left; padding: 0; margin-right: var(--space-3); color: var(--neutral-500); font: var(--fw-regular) var(--type-c1-size)/var(--type-c1-lh) var(--font-sans); }
.agent-catalog--options .creative-options__choice { position: relative; cursor: pointer; }
.agent-catalog--options .creative-options__choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.agent-catalog--options .creative-options__choice span { display: block; padding: var(--space-2) var(--space-4); color: var(--neutral-600); border-radius: var(--radius-sm); font: var(--fw-regular) var(--type-c1-size)/var(--type-c1-lh) var(--font-sans); }
.agent-catalog--options .creative-options__choice input:checked + span { background: var(--neutral-100); color: var(--neutral-800); }
.agent-catalog--options .creative-options__choice input:focus-visible + span { outline: var(--stroke-1) solid var(--neutral-500); outline-offset: var(--space-1); }

/* Bright green is reserved for outcomes and focal objects, never headings or the frame. */
.agent-catalog--options:has(input[name="creative-color"][value="green"]:checked) {
  --creative-accent: var(--success-500);
  --creative-accent-light: var(--success-100);
  --creative-accent-mid: var(--secondary-green);
}
.agent-catalog--options:has(input[name="creative-color"][value="green"]:checked) .awareness-art--social .awareness-chart::before,
.agent-catalog--options:has(input[name="creative-color"][value="green"]:checked) .awareness-art--social .awareness-chart::after { content: ''; display: block; position: absolute; inset: 0; clip-path: none; }
.agent-catalog--options:has(input[name="creative-color"][value="green"]:checked) .awareness-art--social .awareness-chart::before { background: linear-gradient(to bottom,var(--creative-accent-mid),color-mix(in srgb,var(--creative-accent-light) 12%,transparent)); mask: url('assets/agent-creative-options/social-area.svg') center / 100% 100% no-repeat; opacity: .75; }
.agent-catalog--options:has(input[name="creative-color"][value="green"]:checked) .awareness-art--social .awareness-chart::after { background: var(--creative-accent); mask: url('assets/agent-creative-options/social-line.svg') center / 100% 100% no-repeat; }
.agent-catalog--options:has(input[name="creative-color"][value="green"]:checked) .awareness-art--search .awareness-search-result:not(.awareness-search-result--muted)::after { padding: var(--space-2); border-radius: var(--radius-xs); background: var(--creative-accent-light); color: var(--neutral-700); }
.agent-catalog--options:has(input[name="creative-color"][value="green"]:checked) .awareness-art--ai .awareness-ai-body::before { background: var(--creative-accent-mid); box-shadow: 0 0 0 var(--space-3) color-mix(in srgb,var(--creative-accent-light) 82%,transparent),0 0 0 var(--space-6) color-mix(in srgb,var(--creative-accent-light) 42%,transparent); }
.agent-catalog--options:has(input[name="creative-color"][value="green"]:checked) .creative-loop__track { background: var(--creative-accent); }
.agent-catalog--options:has(input[name="creative-color"][value="green"]:checked) .creative-loop__node { background: linear-gradient(145deg,var(--surface) 38%,var(--creative-accent-light)); }
.agent-catalog--options:has(input[name="creative-color"][value="green"]:checked) .creative-outreach__message { background: linear-gradient(145deg,var(--surface) 10%,var(--creative-accent-light)); }
.agent-catalog--options:has(input[name="creative-color"][value="green"]:checked) .creative-outreach__message .ph { color: var(--creative-accent); }
.agent-catalog--options:has(input[name="creative-color"][value="green"]:checked) .creative-contact > b { background: var(--creative-accent-mid); }
.agent-catalog--options:has(input[name="creative-color"][value="green"]:checked) .starter-mail > .ph { color: var(--creative-accent); }
.agent-catalog--options:has(input[name="creative-color"][value="green"]:checked) .creative-page-criterion em { background: linear-gradient(90deg,var(--creative-accent-mid),var(--creative-accent)); }
.agent-catalog--options:has(input[name="creative-color"][value="green"]:checked) .creative-audit-dial { background: conic-gradient(from 0deg,var(--creative-accent-mid),var(--creative-accent) 82%,var(--neutral-100) 82%); }
.agent-catalog--options:has(input[name="creative-color"][value="green"]:checked) .creative-audit-checks em { background: var(--creative-accent-mid); }
.agent-catalog--options:has(input[name="creative-color"][value="green"]:checked) .creative-audit-checks .ph-check { background: var(--creative-accent-light); color: var(--neutral-600); }
.agent-catalog--options:has(input[name="creative-color"][value="green"]:checked) .creative-value-chart img { visibility: hidden; }
.agent-catalog--options:has(input[name="creative-color"][value="green"]:checked) .creative-value-chart::before,
.agent-catalog--options:has(input[name="creative-color"][value="green"]:checked) .creative-value-chart::after { content: ''; position: absolute; inset: 0; }
.agent-catalog--options:has(input[name="creative-color"][value="green"]:checked) .creative-value-chart::before { background: linear-gradient(var(--creative-accent-mid),transparent); mask: url('assets/agent-creative-options/value-area.svg') center / contain no-repeat; }
.agent-catalog--options:has(input[name="creative-color"][value="green"]:checked) .creative-value-chart::after { background: var(--creative-accent); mask: url('assets/agent-creative-options/value-line.svg') center / contain no-repeat; }
.agent-catalog--options:has(input[name="creative-color"][value="green"]:checked) .creative-map-brand { background: var(--creative-accent-light); box-shadow: 0 0 0 var(--space-1) var(--creative-accent-mid),var(--shadow-1); }
.agent-catalog--options:has(input[name="creative-color"][value="green"]:checked) .creative-sentiment-arc { background: conic-gradient(from 270deg,var(--neutral-300) 0deg 52deg,var(--surface) 52deg 55deg,var(--neutral-200) 55deg 112deg,var(--surface) 112deg 115deg,var(--creative-accent-mid) 115deg 180deg,transparent 180deg); }

/* Transfer Image2's white rounded panels and elevation without transferring its palette. */
.agent-catalog--options:has(input[name="creative-surface"][value="rounded"]:checked) .awareness-product { border-radius: var(--radius-xl); box-shadow: var(--shadow-1); }
.agent-catalog--options:has(input[name="creative-surface"][value="rounded"]:checked) :is(.creative-page-context,.creative-page-result,.creative-table,.creative-outreach__message,.starter-mail,.creative-value,.creative-opinions > span) { border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }
.agent-catalog--options:has(input[name="creative-surface"][value="rounded"]:checked) .awareness-art--search .awareness-search-result:not(.awareness-search-result--muted) { border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }
.agent-catalog--options:has(input[name="creative-surface"][value="rounded"]:checked) :is(.creative-loop__node,.creative-outreach__people > span,.creative-map-brand,.creative-customer-context > .ph) { box-shadow: inset var(--stroke-1) var(--stroke-1) var(--space-2) var(--surface),var(--shadow-1); }
.agent-catalog--options:has(input[name="creative-surface"][value="rounded"]:checked) .awareness-art--ai :is(.awareness-ai-prompt,.awareness-ai-answer,.awareness-growth) { box-shadow: var(--shadow-1); }
.agent-catalog--options:has(input[name="creative-surface"][value="rounded"]:checked) .awareness-art--social .awareness-post-copy { border-radius: var(--radius-lg); }
.agent-catalog--options:has(input[name="creative-surface"][value="rounded"]:checked) .creative-audit-dial::before { box-shadow: inset var(--stroke-1) var(--stroke-1) var(--space-2) var(--surface),var(--shadow-1); }
@media (max-width: 700px) { .agent-catalog--options .creative-options { justify-content: flex-start; } }

/* Keep the neutral skeleton legible without adding content or changing geometry. */
.agent-catalog--options:has(input[name="creative-color"][value="gray"]:checked) .creative-contact > b,
.agent-catalog--options:has(input[name="creative-color"][value="gray"]:checked) .creative-contact:first-child > span { background: var(--neutral-300); }
.agent-catalog--options:has(input[name="creative-color"][value="gray"]:checked):has(input[name="creative-surface"][value="current"]:checked) .creative-opinions > span { box-shadow: 0 0 0 var(--stroke-hairline) var(--neutral-200),var(--awareness-installed-shadow); }
.agent-catalog--options:has(input[name="creative-color"][value="gray"]:checked):has(input[name="creative-surface"][value="current"]:checked) .creative-opinions i { background: var(--neutral-300); }
.agent-catalog--options:has(input[name="creative-color"][value="gray"]:checked):has(input[name="creative-surface"][value="current"]:checked) .creative-opinions > span:nth-child(1) { opacity: .82; }
.agent-catalog--options:has(input[name="creative-color"][value="gray"]:checked):has(input[name="creative-surface"][value="current"]:checked) .creative-opinions > span:nth-child(3) { opacity: .8; }

/* Outcome labels are catalog comparison content; Main and shared home mirrors
   retain the original artwork. Reference: research/creative-outcomes-2026-09-08/. */
.creative-outcome { display: none; }
.agent-catalog--options .agent-catalog__card .onb6-channel-preview { position: relative; }
.agent-catalog--options:has(input[name="creative-outcome"][value="tag"]:checked) .onb6-channel-preview { aspect-ratio: auto; }
.agent-catalog--options:has(input[name="creative-outcome"][value="tag"]:checked) .onb6-channel-art { height: auto; aspect-ratio: 4 / 3; }
.agent-catalog--options:has(input[name="creative-outcome"][value="tag"]:checked) .creative-outcome--tag {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  position: relative;
  width: max-content;
  margin: 0 var(--space-5) var(--space-5) auto;
  padding: var(--space-1) var(--space-4);
  border: var(--stroke-hairline) solid var(--neutral-200);
  border-radius: var(--radius-xs);
  background: var(--surface);
  color: var(--neutral-600);
  font: var(--fw-medium) var(--type-c3-size)/var(--type-c1-lh) var(--font-sans);
  white-space: nowrap;
  pointer-events: none;
}
.agent-catalog--options:has(input[name="creative-outcome"][value="text"]:checked) .creative-outcome--text {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-inline: var(--space-2);
  margin-top: var(--space-2);
  color: var(--neutral-600);
  font: var(--fw-regular) var(--type-c1-size)/var(--type-c2-lh) var(--font-sans);
}
.agent-catalog--options .creative-outcome > .ph { flex: none; font-size: var(--space-6); line-height: 1; color: var(--neutral-500); }
.agent-catalog--options:has(input[name="creative-outcome"][value="text"]:checked) .agent-catalog__card { row-gap: 0; }
.agent-catalog--options:has(input[name="creative-outcome"][value="text"]:checked) .agent-catalog__card .chan-card__title { min-height: 0; margin-top: var(--space-4); }