/* Shared content surfaces. Keep each page's canvas, art and status colours.
   Loaded after page styles, with an explicit opt-in on every published page. */
body[data-accel-surfaces="white"] {
  --panel-surface: #fff;
  --panel-line: #d5dce8;
}

/* Cards, content panels, search panels and forms across the page families. */
html:root body[data-accel-surfaces="white"] :is(
  .compare-card,
  .route-tile,
  .direction,
  .direction-title,
  .direction-body,
  .goal-choice a,
  .goal-route,
  .goal-chain a,
  .directory-search,
  .service-card,
  .service-card .card-band,
  .detail-action,
  .related,
  .next-panel,
  .support-grid > article,
  .coverage-stats > div,
  .platform-link,
  .blank,
  .journey-step,
  .mega,
  dialog,
  .faq-controls,
  .faq-list details,
  .faq details,
  .sales-faq details,
  .create-faq details,
  .business-directory,
  .legal-document,
  .migration-item,
  .faq-empty,
  .faq-service-help,
  .public-catalog-group,
  .public-service-boundary,
  .result-summary,
  .result-support,
  .test-record-warning,
  .marketing-board,
  .marketing-search-example,
  .marketing-map > div,
  .marketing-calendar > div,
  .marketing-pillar-grid > article,
  .marketing-service,
  .marketing-output,
  .marketing-plan-grid article,
  .marketing-scope-note,
  .marketing-report-note,
  .marketing-brief-form,
  .marketing-brief-layout > div > p.marketing-local-note,
  .marketing-proposed-grid article,
  .business-board,
  .chat-sample,
  .business-handoff,
  .crm-sample-board > div,
  .crm-sample-board article,
  .geo-source-flow > div,
  .business-discovery-card,
  .business-example-grid > article,
  .business-evidence-panel,
  .business-responsibility-grid > article,
  .studio-step,
  .brand-sample,
  .voice-sample,
  .shop-order-dialog,
  .shop-order-summary,
  .visual-demo,
  .flow-node,
  .deliverable-panel,
  .plan-detail,
  .selector-buttons,
  .payment-sequence,
  .requirements-layout aside,
  .product-card,
  .sales-directory-note,
  .file-drop,
  .file-row,
  .intake-plan-box,
  .confirmation-box,
  .workspace-card,
  .readiness-card,
  .workspace-empty,
  .create-composer,
  .create-dialog,
  .art-browser,
  .art-browser-bar,
  .art-phone,
  .floating-tag,
  .process-scene
) {
  background: var(--panel-surface);
  border-color: var(--panel-line);
  color: var(--ink, #182921);
}

/* Thin separators keep white panels distinct inside larger white boards. */
html:root body[data-accel-surfaces="white"] :is(
  .marketing-search-example,
  .marketing-map > div,
  .marketing-calendar > div,
  .marketing-output,
  .chat-sample,
  .business-handoff,
  .crm-sample-board > div,
  .geo-source-flow > div,
  .studio-step,
  .brand-sample,
  .voice-sample,
  .flow-node,
  .selector-buttons,
  .art-browser-bar
) {
  box-shadow: inset 0 0 0 1px var(--panel-line);
}

/* Neutral option pills stay white; selected controls keep their contrast. */
html:root body[data-accel-surfaces="white"] :is(
  .section-nav a,
  .kind-tabs a:not([aria-current="page"]),
  .pagination a:not(.current),
  .directory-tools button:not([aria-pressed="true"]),
  .create-suggestions button,
  .marketing-service-label,
  .single-plan-badge
) {
  background: var(--panel-surface);
  border-color: var(--panel-line);
}

/* Inputs remain separate from both the white form and the coloured canvas. */
html:root body[data-accel-surfaces="white"] :is(
  .filters select,
  .directory-tools > input,
  .selector select,
  .create-dialog input,
  .create-dialog select,
  .create-dialog textarea,
  .intake-step input:not([type="checkbox"]),
  .intake-step select,
  .intake-step textarea,
  .workspace-content select
) {
  background: var(--panel-surface);
}

/* These cards previously inherited pale text from a dark section. */
html:root body[data-accel-surfaces="white"] :is(
  .journey-step p,
  .journey-step small,
  .deliverable-panel .eyebrow
) {
  color: #53606a;
}