/* Shared image backdrop only. Existing typography, controls and layout stay
   as authored. Shared production background approved from the test application. */
@layer ce-app-background {
  body:not(.gridbox) {
    --ce-app-backdrop: url('/images/clevereat/ce-app-ambient-background-v1.webp');
    background: #080e19 !important;
    isolation: isolate;
  }
  /* A fixed layer avoids mobile WebView background-attachment issues and
     keeps the picture still while page content scrolls. */
  body:not(.gridbox)::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: #080e19 var(--ce-app-backdrop) center / cover no-repeat !important;
  }
  body:not(.gridbox) :is(.body, main, .ba-wrapper,
      .ba-wrapper > .ba-section, #cef1, .cef1-tabs, #ce90-root,
      #ce-settings-app, #ce-settings-custom-head, #ce-settings-custom-page,
      .ceh24-host) {
    background: transparent !important;
  }
  body:not(.gridbox) .ba-wrapper > .ba-section > .ba-overlay {
    background: transparent !important;
    backdrop-filter: none !important;
  }
  body:not(.gridbox) #cef1::before {
    background: none !important;
  }
  /* Full-screen views must carry the same image above their underlying page. */
  body:not(.gridbox) :is(#ceOb, #ce90-day-overlay, .ce90-day-screen,
      #ce90-intro-overlay, #ce-settings-profile-data-modal) {
    background: #080e19 var(--ce-app-backdrop) center / cover no-repeat !important;
  }
  body:not(.gridbox) :is(.ce-ob-slide, .ce-screen-shell, .ce-pd-top,
      .ce90-intro-shell) {
    background: transparent !important;
  }
}