/*
 * Page-specific Catalyst adaptations for scenes 2 to 17.
 * Shared controls, typography, cards and global shell live in catalyst-site.css.
 * Every rule stays inside the scene's #main content region.
 */

body[data-scene="2"] #main,
body[data-scene="3"] #main,
body[data-scene="4"] #main,
body[data-scene="5"] #main,
body[data-scene="6"] #main,
body[data-scene="7"] #main,
body[data-scene="8"] #main,
body[data-scene="9"] #main,
body[data-scene="10"] #main,
body[data-scene="11"] #main,
body[data-scene="12"] #main,
body[data-scene="13"] #main,
body[data-scene="14"] #main,
body[data-scene="15"] #main,
body[data-scene="16"] #main,
body[data-scene="17"] #main {
  --scene-ink: #1b1f26;
  --scene-muted: #515c6c;
  --scene-line: #d7dbe0;
  --scene-teal: #008194;
  --scene-teal-hover: #017384;
  --scene-teal-active: #026371;
  box-sizing: border-box;
  max-width: 1520px;
  padding: 28px clamp(18px, 2.4vw, 36px) 44px;
  color: var(--scene-ink);
}

body[data-scene="2"] #main .page-heading,
body[data-scene="3"] #main .page-heading,
body[data-scene="4"] #main .page-heading,
body[data-scene="5"] #main .page-heading,
body[data-scene="6"] #main .page-heading,
body[data-scene="7"] #main .page-heading,
body[data-scene="8"] #main .page-heading,
body[data-scene="9"] #main .page-heading,
body[data-scene="10"] #main .page-heading,
body[data-scene="11"] #main .page-heading,
body[data-scene="12"] #main .page-heading,
body[data-scene="13"] #main .page-heading,
body[data-scene="14"] #main .page-heading,
body[data-scene="15"] #main .page-heading,
body[data-scene="16"] #main .page-heading,
body[data-scene="17"] #main .page-heading {
  gap: 16px;
  margin-bottom: 24px;
}

body[data-scene="2"] #main .page-heading h1,
body[data-scene="2"] #main .page-heading .title,
body[data-scene="3"] #main .page-heading h1,
body[data-scene="3"] #main .page-heading .title,
body[data-scene="4"] #main .page-heading h1,
body[data-scene="4"] #main .page-heading .title,
body[data-scene="5"] #main .page-heading h1,
body[data-scene="5"] #main .page-heading .title,
body[data-scene="6"] #main .page-heading h1,
body[data-scene="6"] #main .page-heading .title,
body[data-scene="7"] #main .page-heading h1,
body[data-scene="7"] #main .page-heading .title,
body[data-scene="8"] #main .page-heading h1,
body[data-scene="8"] #main .page-heading .title,
body[data-scene="9"] #main .page-heading h1,
body[data-scene="9"] #main .page-heading .title,
body[data-scene="10"] #main .page-heading h1,
body[data-scene="10"] #main .page-heading .title,
body[data-scene="11"] #main .page-heading h1,
body[data-scene="11"] #main .page-heading .title,
body[data-scene="12"] #main .page-heading h1,
body[data-scene="12"] #main .page-heading .title,
body[data-scene="13"] #main .page-heading h1,
body[data-scene="13"] #main .page-heading .title,
body[data-scene="14"] #main .page-heading h1,
body[data-scene="14"] #main .page-heading .title,
body[data-scene="15"] #main .page-heading h1,
body[data-scene="15"] #main .page-heading .title,
body[data-scene="16"] #main .page-heading h1,
body[data-scene="16"] #main .page-heading .title,
body[data-scene="17"] #main .page-heading h1,
body[data-scene="17"] #main .page-heading .title {
  color: var(--scene-ink);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -.45px;
  line-height: 1.22;
}

body[data-scene="2"] #main .page-heading .lead,
body[data-scene="3"] #main .page-heading .lead,
body[data-scene="4"] #main .page-heading .lead,
body[data-scene="5"] #main .page-heading .lead,
body[data-scene="6"] #main .page-heading .lead,
body[data-scene="7"] #main .page-heading .lead,
body[data-scene="8"] #main .page-heading .lead,
body[data-scene="9"] #main .page-heading .lead,
body[data-scene="10"] #main .page-heading .lead,
body[data-scene="11"] #main .page-heading .lead,
body[data-scene="12"] #main .page-heading .lead,
body[data-scene="13"] #main .page-heading .lead,
body[data-scene="14"] #main .page-heading .lead,
body[data-scene="15"] #main .page-heading p,
body[data-scene="16"] #main .page-heading p,
body[data-scene="17"] #main .page-heading p {
  color: var(--scene-muted);
  font-size: 15px;
  line-height: 1.5;
}

/* Scene 2, keep the recommendation dominant and make the AI prompt a quiet accent. */
body[data-scene="2"] #main::before,
body[data-scene="3"] #main::before,
body[data-scene="4"] #main::before,
body[data-scene="6"] #main::before,
body[data-scene="7"] #main::before,
body[data-scene="8"] #main::before {
  display: none;
}

body[data-scene="2"] #main .page-heading { max-width: none; margin-bottom: 18px; }
body[data-scene="2"] #main .discovery-workspace {
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, .75fr);
  gap: 24px;
  align-items: start;
}
body[data-scene="2"] #main .discovery-primary,
body[data-scene="2"] #main .discovery-section,
body[data-scene="2"] #main .discovery-final-cta {
  border: 1px solid var(--scene-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 8px rgb(27 31 38 / 4%);
}
body[data-scene="2"] #main .discovery-primary {
  padding: clamp(20px, 2.5vw, 30px);
}
body[data-scene="2"] #main .discovery-primary-content {
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 16px;
  margin: 22px 0 20px;
}
body[data-scene="2"] #main .discovery-primary-content h2 {
  color: var(--scene-ink);
  font-size: 24px;
  letter-spacing: -.35px;
}
body[data-scene="2"] #main .discovery-primary-content p,
body[data-scene="2"] #main .discovery-reasons > div,
body[data-scene="2"] #main .discovery-recommendation-row,
body[data-scene="2"] #main .discovery-topic-row,
body[data-scene="2"] #main .discovery-event-row { color: var(--scene-muted); }
body[data-scene="2"] #main .discovery-spark {
  width: 46px;
  height: 46px;
  border: 1px solid #e6e2f1;
  border-radius: 12px;
  background: #f6f4fb;
  color: #6c62a8;
  font-size: 23px;
  box-shadow: none;
}
body[data-scene="2"] #main .discovery-composer {
  border: 1px solid #e5e1ef;
  border-radius: 12px;
  background: #fbfaff;
  box-shadow: 0 2px 8px rgb(27 31 38 / 4%);
}
body[data-scene="2"] #main .discovery-eyebrow { color: #625b8d; }
body[data-scene="2"] #main .discovery-final-cta {
  border-color: #49636a;
  background: #1b3740;
  color: #fff;
}
body[data-scene="2"] #main .discovery-final-cta .discovery-eyebrow { color: #c6d7da; }
body[data-scene="2"] #main .discovery-final-cta h2 { color: #fff; }
body[data-scene="2"] #main .discovery-final-cta p { color: #d5e0e2; }
body[data-scene="2"] #main .discovery-final-cta .btn.primary {
  border: 1px solid #b8d0d4;
  background: #fff;
  color: #1b1f26;
  box-shadow: none;
}
body[data-scene="2"] #main .discovery-final-cta .btn.primary:hover {
  border-color: #fff;
  background: #eef6f7;
  color: #1b1f26;
}
body[data-scene="2"] #main .discovery-reasons { gap: 8px; }
body[data-scene="2"] #main .discovery-reasons > div {
  border-color: #e5e8ec;
  border-radius: 8px;
  background: #f8f9fa;
}

/* Scene 3, keep source identities and simplify the briefing workspace. */
body[data-scene="3"] #main .briefing-layout {
  grid-template-columns: minmax(0, 1fr) minmax(250px, 300px);
  gap: 24px;
  align-items: start;
}
body[data-scene="3"] #main .briefing-list-card,
body[data-scene="3"] #main .briefing-sidebar > .card {
  border: 1px solid var(--scene-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 8px rgb(27 31 38 / 4%);
}
body[data-scene="3"] #main .briefing-row {
  border-color: #e7e9ed;
  background: #fff;
}
body[data-scene="3"] #main .briefing-number,
body[data-scene="3"] #main .briefing-row-2 .briefing-number,
body[data-scene="3"] #main .briefing-row-3 .briefing-number,
body[data-scene="3"] #main .briefing-row-4 .briefing-number,
body[data-scene="3"] #main .briefing-row-5 .briefing-number,
body[data-scene="3"] #main .briefing-row-6 .briefing-number {
  background: #e9f4f5;
  color: #006f7b;
}
body[data-scene="3"] #main .briefing-hero {
  border: 1px solid #e6e2f1;
  border-radius: 10px;
  background: #faf9fd;
}
body[data-scene="3"] #main .briefing-sidebar { gap: 16px; }

/* Scene 4, distinguish the grounded answer from its evidence and trust signals. */
body[data-scene="4"] #main .page-heading { margin-bottom: 18px; }
body[data-scene="4"] #main .answer-layout {
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, .72fr);
  gap: 24px;
}
body[data-scene="4"] #main .answer-main,
body[data-scene="4"] #main .answer-trust { gap: 16px; }
body[data-scene="4"] #main .answer-main > .card,
body[data-scene="4"] #main .answer-trust > .card {
  border-color: var(--scene-line);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgb(27 31 38 / 4%);
}
body[data-scene="4"] #main .answer-heading-icon {
  border-radius: 8px;
  background: #e8f4f5;
  color: #006f7b;
}
body[data-scene="4"] #main .answer-card { border-left: 3px solid var(--scene-teal); }
body[data-scene="4"] #main .answer-card p,
body[data-scene="4"] #main .answer-source-copy,
body[data-scene="4"] #main .answer-trust-row { color: var(--scene-muted); }
body[data-scene="4"] #main .answer-warning { border-radius: 8px; }

/* Scene 5, let people and evidence lead, with presence colours kept semantic. */
body[data-scene="5"] #main .people-expert-card,
body[data-scene="5"] #main .people-community-card,
body[data-scene="5"] #main .people-section-card,
body[data-scene="5"] #main .people-activity-panel {
  border: 1px solid var(--scene-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 8px rgb(27 31 38 / 4%);
}
body[data-scene="5"] #main .people-community-icon {
  border: 1px solid #dce9eb;
  border-radius: 10px;
  background: #edf5f6;
  color: #006f7b;
}
body[data-scene="5"] #main .people-expert-details,
body[data-scene="5"] #main .people-community-copy p,
body[data-scene="5"] #main .people-activity-row time { color: var(--scene-muted); }
body[data-scene="5"] #main .people-community-actions .btn.link,
body[data-scene="5"] #main .people-profile-link .btn.link { color: var(--scene-teal); }

/* Scene 6, keep the recommendation, rationale and action form in one calm workspace. */
body[data-scene="6"] #main .action-intelligence-layout {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 1.12fr) minmax(245px, .78fr);
  gap: 16px;
}
body[data-scene="6"] #main .action-intelligence-primary,
body[data-scene="6"] #main .action-intelligence-rail { gap: 16px; }
body[data-scene="6"] #main .action-intelligence-layout .card {
  border-color: var(--scene-line);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgb(27 31 38 / 4%);
}
body[data-scene="6"] #main .action-answer-card { border-top-color: var(--scene-teal) !important; }
body[data-scene="6"] #main .action-card-icon {
  border-radius: 8px;
  background: #e8f4f5;
  color: #006f7b;
}
body[data-scene="6"] #main .action-card-actions .btn.primary,
body[data-scene="6"] #main .action-review-callout .btn.primary,
body[data-scene="6"] #main .action-form-actions .btn.primary,
body[data-scene="6"] #main .action-intelligence-rail > .btn.primary {
  border-color: var(--scene-teal);
  background: var(--scene-teal);
  box-shadow: none;
}
body[data-scene="6"] #main .action-card-actions .btn.primary:hover,
body[data-scene="6"] #main .action-review-callout .btn.primary:hover,
body[data-scene="6"] #main .action-form-actions .btn.primary:hover,
body[data-scene="6"] #main .action-intelligence-rail > .btn.primary:hover {
  border-color: var(--scene-teal-hover);
  background: var(--scene-teal-hover);
}
body[data-scene="6"] #main .action-card-actions .btn.primary:active,
body[data-scene="6"] #main .action-review-callout .btn.primary:active,
body[data-scene="6"] #main .action-form-actions .btn.primary:active,
body[data-scene="6"] #main .action-intelligence-rail > .btn.primary:active {
  border-color: var(--scene-teal-active);
  background: var(--scene-teal-active);
}

/* Scene 7, retain due and completion states while reducing dashboard decoration. */
body[data-scene="7"] #main .my-actions-page .page-heading { margin-bottom: 18px; }
body[data-scene="7"] #main .my-actions-toolbar {
  border: 1px solid var(--scene-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 8px rgb(27 31 38 / 4%);
}
body[data-scene="7"] #main .my-actions-row {
  border-color: #e7e9ed;
  border-radius: 10px;
  box-shadow: none;
}
body[data-scene="7"] #main .my-actions-row:hover { background: #f8fafb; }
body[data-scene="7"] #main .my-actions-row-amber,
body[data-scene="7"] #main .my-actions-row-green { border-left-width: 3px; }
body[data-scene="7"] #main .my-actions-tabs .btn.primary { background: var(--scene-teal); }

/* Scene 8, keep knowledge health and workflow states easy to scan. */
body[data-scene="8"] #main .knowledge-signals-layout {
  grid-template-columns: minmax(0, 1.4fr) minmax(270px, .8fr);
  gap: 24px;
}
body[data-scene="8"] #main .knowledge-signals-rail { gap: 16px; }
body[data-scene="8"] #main .knowledge-signals-rail > .card,
body[data-scene="8"] #main .knowledge-signals-main > .card {
  border-color: var(--scene-line);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgb(27 31 38 / 4%);
}
body[data-scene="8"] #main .knowledge-signals-summary-item { border-color: #e7e9ed; }
body[data-scene="8"] #main .knowledge-signals-actions { gap: 10px; }
body[data-scene="8"] #main .knowledge-signal-action {
  border-color: #e4e7eb;
  border-radius: 10px;
  box-shadow: none;
}
body[data-scene="8"] #main .knowledge-signal-action:hover { background: #f8fafb; }

/* Scene 9, preserve the real workflow sequence and the AI generation cue. */
body[data-scene="9"] #main .campaign-plan-page { max-width: 1320px; }
body[data-scene="9"] #main .campaign-plan-grid {
  grid-template-columns: minmax(0, 1.52fr) minmax(300px, .72fr);
  gap: 24px;
}
body[data-scene="9"] #main .campaign-plan-main,
body[data-scene="9"] #main .campaign-plan-rail { gap: 16px; }
body[data-scene="9"] #main .campaign-plan-page .card {
  border-color: var(--scene-line);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgb(27 31 38 / 4%);
}
body[data-scene="9"] #main .campaign-brief-card { background: #fff; }
body[data-scene="9"] #main .campaign-brief-value {
  border-color: #e4e7eb;
  border-radius: 8px;
  color: var(--scene-ink);
}
body[data-scene="9"] #main .campaign-plan-icon:not(.muted) {
  border-radius: 8px;
  background: #e8f4f5;
  color: #006f7b;
}
body[data-scene="9"] #main .campaign-plan-number,
body[data-scene="9"] #main .tone-purple .campaign-plan-number,
body[data-scene="9"] #main .tone-blue .campaign-plan-number,
body[data-scene="9"] #main .tone-teal .campaign-plan-number,
body[data-scene="9"] #main .tone-green .campaign-plan-number,
body[data-scene="9"] #main .tone-orange .campaign-plan-number,
body[data-scene="9"] #main .tone-amber .campaign-plan-number,
body[data-scene="9"] #main .tone-pink .campaign-plan-number {
  background: var(--scene-teal);
}
body[data-scene="9"] #main .campaign-plan-row:hover,
body[data-scene="9"] #main .campaign-plan-row.is-open { background: #f7fafb; }
body[data-scene="9"] #main .campaign-plan-row { border-color: #e7e9ed; }
body[data-scene="9"] #main .campaign-sparkle { color: #6c62a8; }

/* Scene 10, selected audience is a teal interaction state, channel and status colours remain meaningful. */
body[data-scene="10"] #main .campaign-audience-page { color: var(--scene-ink); }
body[data-scene="10"] #main .campaign-audience-grid {
  grid-template-columns: minmax(0, 1.58fr) minmax(285px, .76fr);
  gap: 24px;
}
body[data-scene="10"] #main .campaign-audience-page .card,
body[data-scene="10"] #main .audience-summary-strip {
  border-color: var(--scene-line);
  box-shadow: 0 2px 8px rgb(27 31 38 / 4%);
}
body[data-scene="10"] #main .audience-summary-strip { background: var(--scene-line); }
body[data-scene="10"] #main .audience-row.is-selected {
  background: #f1f8f9;
  box-shadow: inset 3px 0 var(--scene-teal);
}
body[data-scene="10"] #main .audience-row:hover { background: #f8fafb; }
body[data-scene="10"] #main .audience-select-all input:checked + .audience-checkbox,
body[data-scene="10"] #main .audience-row-check input:checked + .audience-checkbox {
  border-color: var(--scene-teal);
  background: var(--scene-teal);
}
body[data-scene="10"] #main .audience-select-all input:focus-visible + .audience-checkbox,
body[data-scene="10"] #main .audience-row-check input:focus-visible + .audience-checkbox {
  outline-color: rgb(0 129 148 / 28%);
}

/* Scene 11, the approval checks remain the focus and approval colours retain their meaning. */
body[data-scene="11"] #main .campaign-approval-page { max-width: 1400px; color: var(--scene-ink); }
body[data-scene="11"] #main .approval-grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .78fr);
  gap: 24px;
}
body[data-scene="11"] #main .approval-main-column,
body[data-scene="11"] #main .approval-side-column { gap: 16px; }
body[data-scene="11"] #main .campaign-approval-page .card {
  border-color: var(--scene-line);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgb(27 31 38 / 4%);
}
body[data-scene="11"] #main .approval-check-icon {
  border-radius: 8px;
  background: #e8f4f5;
  color: #006f7b;
}
body[data-scene="11"] #main .approval-locked-note { border-radius: 8px; }
body[data-scene="11"] #main .approval-header-actions .btn.primary {
  border-color: var(--scene-teal);
  background: var(--scene-teal);
  box-shadow: none;
}
body[data-scene="11"] #main .approval-header-actions .btn.primary:hover {
  border-color: var(--scene-teal-hover);
  background: var(--scene-teal-hover);
}

/* Scene 12, keep channel marks recognisable and put publication status first. */
body[data-scene="12"] #main .campaign-publish-page { max-width: 1440px; color: var(--scene-ink); }
body[data-scene="12"] #main .campaign-publish-page .card {
  border-color: var(--scene-line);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgb(27 31 38 / 4%);
}
body[data-scene="12"] #main .publish-preview-card { padding: 20px; }
body[data-scene="12"] #main .publish-preview-heading {
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e7e9ed;
}
body[data-scene="12"] #main .publish-channel-strip {
  gap: 16px;
  padding: 18px 2px 8px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
}
body[data-scene="12"] #main .publish-channel-card { scroll-snap-align: start; }
body[data-scene="12"] #main .publish-strip-hint { color: var(--scene-muted); }
body[data-scene="12"] #main .publish-supporting-grid { gap: 24px; }
body[data-scene="12"] #main .publish-summary-card .list-row { border-color: #e7e9ed; }
body[data-scene="12"] #main .publish-ready-state {
  border: 1px solid #cfe7dc;
  border-radius: 8px;
  background: #f1f8f4;
}

/* Scene 13, keep the phone as the simulated delivery channel and preserve step states. */
body[data-scene="13"] #main {
  max-width: 1600px;
  padding: 28px clamp(18px, 3vw, 48px) 40px;
}
body[data-scene="13"] #main .scene13-page { max-width: 1480px; }
body[data-scene="13"] #main .scene13-heading {
  max-width: 1180px;
  margin-bottom: 22px;
}
body[data-scene="13"] #main .scene13-heading .small { display: block; color: var(--scene-muted); }
body[data-scene="13"] #main .scene13-heading h1,
body[data-scene="13"] #main .scene13-heading .title {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -.45px;
  line-height: 1.22;
}
body[data-scene="13"] #main .scene13-heading .lead { color: var(--scene-muted); font-size: 15px; }
body[data-scene="13"] #main .scene13-journey-map {
  max-width: 1340px;
  margin-bottom: 20px;
  gap: 16px;
}
body[data-scene="13"] #main .scene13-journey-step p { color: var(--scene-muted); }
body[data-scene="13"] #main .scene13-journey-step.is-current .scene13-journey-number {
  border-color: #d2e8eb;
  background: var(--scene-teal);
  color: #fff;
}
body[data-scene="13"] #main .scene13-journey-step.is-complete .scene13-journey-number {
  border-color: #d3e9df;
  background: #008458;
  color: #fff;
}
body[data-scene="13"] #main .scene13-phone {
  border-color: #7a838e;
  box-shadow: 0 8px 24px rgb(27 31 38 / 10%);
}
body[data-scene="13"] #main .scene13-info-block {
  border: 1px solid #e4e7eb;
  border-left: 3px solid var(--scene-teal);
  border-radius: 8px;
  background: #f8fafb;
}
body[data-scene="13"] #main .scene13-info-purple,
body[data-scene="13"] #main .scene13-info-blue {
  color: var(--scene-ink);
}
body[data-scene="13"] #main .scene13-info-icon {
  background: #e8f4f5;
  color: #006f7b;
}
body[data-scene="13"] #main .scene13-save-note { max-width: 780px; margin: 18px auto 0; }

/* Scene 14, keep the historical funnel, cohort table and action cues distinct. */
body[data-scene="14"] #main .page-heading { align-items: flex-start; }
body[data-scene="14"] #main .page-heading > .row {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
body[data-scene="14"] #main > .grid-2 {
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, .8fr);
  gap: 24px;
  align-items: start;
}
body[data-scene="14"] #main > .grid-2 > .stack { gap: 16px; }
body[data-scene="14"] #main .grid-3 { gap: 12px; }
body[data-scene="14"] #main .metric { border-color: #e4e7eb; border-radius: 10px; }
body[data-scene="14"] #main tr.attention { background: #fff8ed; }
body[data-scene="14"] #main tr.attention > td:first-child { border-left: 3px solid #9f6100; }
body[data-scene="14"] #main .callout.blue { border-radius: 8px; }

/* Scene 15, issue review layout keeps the linked challenge and timeline visible. */
body[data-scene="15"] #main .admin-grid {
  grid-template-columns: minmax(360px, 1.24fr) minmax(330px, 1fr) minmax(235px, .78fr);
  gap: 16px;
}
body[data-scene="15"] #main .admin-grid > * { min-width: 0; }
body[data-scene="15"] #main .admin-grid > .stack { gap: 16px; }
body[data-scene="15"] #main .admin-grid > .card,
body[data-scene="15"] #main .admin-grid > section.card,
body[data-scene="15"] #main .admin-grid > aside.card {
  border-color: var(--scene-line);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgb(27 31 38 / 4%);
}
body[data-scene="15"] #main .admin-grid > .stack > .card:first-child .metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
body[data-scene="15"] #main .issue-selected { background: #eef6f7; }
body[data-scene="15"] #main .timeline { border-color: #d9e6e8; }
body[data-scene="15"] #main .timeline-entry::before { background: var(--scene-teal); }

/* Scene 16, make source health scannable beside access-profile preview. */
body[data-scene="16"] #main > .grid-2 {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: 16px;
  align-items: start;
}
body[data-scene="16"] #main > .grid-2 > .card {
  border-color: var(--scene-line);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgb(27 31 38 / 4%);
}
body[data-scene="16"] #main .source-preview .list-row { border-color: #e7e9ed; }
body[data-scene="16"] #main .source-preview .between { align-items: center; gap: 12px; }

/* Scene 17, keep the plugin preview clear while retaining its simulated status. */
body[data-scene="17"] #main > .grid-2 {
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr);
  gap: 24px;
  align-items: start;
}
body[data-scene="17"] #main > .grid-2 > .card,
body[data-scene="17"] #main > .grid-2 > .stack > .card {
  border-color: var(--scene-line);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgb(27 31 38 / 4%);
}
body[data-scene="17"] #main .widget-preview {
  border-color: var(--scene-line);
  border-radius: 12px;
}
body[data-scene="17"] #main .widget-preview.mobile {
  border-color: #7a838e;
  border-radius: 22px;
}
body[data-scene="17"] #main details { border-color: #e7e9ed; }
body[data-scene="17"] #main details summary:focus-visible { outline-color: var(--scene-teal); }

@media (max-width: 1100px) {
  body[data-scene="2"] #main .discovery-workspace,
  body[data-scene="3"] #main .briefing-layout,
  body[data-scene="4"] #main .answer-layout,
  body[data-scene="6"] #main .action-intelligence-layout,
  body[data-scene="8"] #main .knowledge-signals-layout,
  body[data-scene="9"] #main .campaign-plan-grid,
  body[data-scene="10"] #main .campaign-audience-grid,
  body[data-scene="11"] #main .approval-grid,
  body[data-scene="14"] #main > .grid-2,
  body[data-scene="15"] #main .admin-grid,
  body[data-scene="16"] #main > .grid-2,
  body[data-scene="17"] #main > .grid-2 {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-scene="3"] #main .briefing-sidebar,
  body[data-scene="8"] #main .knowledge-signals-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-scene="15"] #main .admin-grid > aside.card { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  body[data-scene="2"] #main,
  body[data-scene="3"] #main,
  body[data-scene="4"] #main,
  body[data-scene="5"] #main,
  body[data-scene="6"] #main,
  body[data-scene="7"] #main,
  body[data-scene="8"] #main,
  body[data-scene="9"] #main,
  body[data-scene="10"] #main,
  body[data-scene="11"] #main,
  body[data-scene="12"] #main,
  body[data-scene="13"] #main,
  body[data-scene="14"] #main,
  body[data-scene="15"] #main,
  body[data-scene="16"] #main,
  body[data-scene="17"] #main {
    padding: 22px 20px 36px;
  }

  body[data-scene="5"] #main .people-expert-card,
  body[data-scene="5"] #main .people-community-card,
  body[data-scene="5"] #main .people-section-card,
  body[data-scene="5"] #main .people-activity-panel { min-width: 0; }

  body[data-scene="10"] #main .audience-summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-scene="13"] #main .scene13-journey-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-scene="14"] #main .page-heading > .row { justify-content: flex-start; }
}

@media (max-width: 480px) {
  body[data-scene="2"] #main,
  body[data-scene="3"] #main,
  body[data-scene="4"] #main,
  body[data-scene="5"] #main,
  body[data-scene="6"] #main,
  body[data-scene="7"] #main,
  body[data-scene="8"] #main,
  body[data-scene="9"] #main,
  body[data-scene="10"] #main,
  body[data-scene="11"] #main,
  body[data-scene="12"] #main,
  body[data-scene="13"] #main,
  body[data-scene="14"] #main,
  body[data-scene="15"] #main,
  body[data-scene="16"] #main,
  body[data-scene="17"] #main {
    padding: 18px 14px 30px;
  }

  body[data-scene="2"] #main .page-heading,
  body[data-scene="3"] #main .page-heading,
  body[data-scene="4"] #main .page-heading,
  body[data-scene="5"] #main .page-heading,
  body[data-scene="6"] #main .page-heading,
  body[data-scene="7"] #main .page-heading,
  body[data-scene="8"] #main .page-heading,
  body[data-scene="9"] #main .page-heading,
  body[data-scene="10"] #main .page-heading,
  body[data-scene="11"] #main .page-heading,
  body[data-scene="12"] #main .page-heading,
  body[data-scene="13"] #main .page-heading,
  body[data-scene="14"] #main .page-heading,
  body[data-scene="15"] #main .page-heading,
  body[data-scene="16"] #main .page-heading,
  body[data-scene="17"] #main .page-heading {
    align-items: flex-start;
    margin-bottom: 18px;
  }

  body[data-scene="2"] #main .page-heading h1,
  body[data-scene="2"] #main .page-heading .title,
  body[data-scene="3"] #main .page-heading h1,
  body[data-scene="3"] #main .page-heading .title,
  body[data-scene="4"] #main .page-heading h1,
  body[data-scene="4"] #main .page-heading .title,
  body[data-scene="5"] #main .page-heading h1,
  body[data-scene="5"] #main .page-heading .title,
  body[data-scene="6"] #main .page-heading h1,
  body[data-scene="6"] #main .page-heading .title,
  body[data-scene="7"] #main .page-heading h1,
  body[data-scene="7"] #main .page-heading .title,
  body[data-scene="8"] #main .page-heading h1,
  body[data-scene="8"] #main .page-heading .title,
  body[data-scene="9"] #main .page-heading h1,
  body[data-scene="9"] #main .page-heading .title,
  body[data-scene="10"] #main .page-heading h1,
  body[data-scene="10"] #main .page-heading .title,
  body[data-scene="11"] #main .page-heading h1,
  body[data-scene="11"] #main .page-heading .title,
  body[data-scene="12"] #main .page-heading h1,
  body[data-scene="12"] #main .page-heading .title,
  body[data-scene="13"] #main .page-heading h1,
  body[data-scene="13"] #main .page-heading .title,
  body[data-scene="14"] #main .page-heading h1,
  body[data-scene="14"] #main .page-heading .title,
  body[data-scene="15"] #main .page-heading h1,
  body[data-scene="15"] #main .page-heading .title,
  body[data-scene="16"] #main .page-heading h1,
  body[data-scene="16"] #main .page-heading .title,
  body[data-scene="17"] #main .page-heading h1,
  body[data-scene="17"] #main .page-heading .title {
    font-size: 24px;
  }

  body[data-scene="2"] #main .discovery-primary-content { grid-template-columns: 38px minmax(0, 1fr); gap: 12px; }
  body[data-scene="2"] #main .discovery-spark { width: 38px; height: 38px; border-radius: 10px; }
  body[data-scene="2"] #main .discovery-reasons { grid-template-columns: minmax(0, 1fr); }
  body[data-scene="3"] #main .briefing-sidebar,
  body[data-scene="8"] #main .knowledge-signals-rail { grid-template-columns: minmax(0, 1fr); }
  body[data-scene="3"] #main .briefing-toolbar > .row { flex-wrap: wrap; }
  body[data-scene="10"] #main .audience-summary-strip { grid-template-columns: minmax(0, 1fr); }
  body[data-scene="13"] #main .scene13-journey-map { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  body[data-scene="13"] #main .scene13-journey-map::before { display: none; }
  body[data-scene="13"] #main .scene13-journey-step { padding-bottom: 4px; }
  body[data-scene="13"] #main .scene13-heading > .badge { align-self: flex-start; }
  body[data-scene="14"] #main .grid-3,
  body[data-scene="15"] #main .admin-grid > .stack > .card:first-child .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-scene="15"] #main .admin-grid > aside.card { grid-column: auto; }
  body[data-scene="17"] #main .widget-preview.mobile { max-width: 100%; }
}