/* Preview-wide header/canvas unification — removes visible header bands. */
:root {
  --preview-unified-canvas: #090a09;
}

html,
body,
body .demo-stage,
body .phone-shell-wrap.persistent-bottom-nav-shell,
body .phone-shell-wrap.persistent-bottom-nav-shell > .app-scroll-region,
body .phone-shell-wrap.persistent-bottom-nav-shell > .app-scroll-region > .app-nav-spacer {
  background-color: var(--preview-unified-canvas) !important;
  background-image: none !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell .preview-reference-home,
body .phone-shell-wrap.persistent-bottom-nav-shell .reference-alerts-screen,
body .phone-shell-wrap.persistent-bottom-nav-shell .event-detail-screen,
body .phone-shell-wrap.persistent-bottom-nav-shell .event-detail-redesign,
body .phone-shell-wrap.persistent-bottom-nav-shell .settings-screen,
body .phone-shell-wrap.persistent-bottom-nav-shell .settings-detail-redesign,
body .phone-shell-wrap.persistent-bottom-nav-shell .notification-preferences-screen,
body .phone-shell-wrap.persistent-bottom-nav-shell .system-health-screen,
body .phone-shell-wrap.persistent-bottom-nav-shell .location-screen,
body .phone-shell-wrap.persistent-bottom-nav-shell .vehicle-overview-screen,
body .phone-shell-wrap.persistent-bottom-nav-shell .vehicle-assignment-screen {
  background-color: var(--preview-unified-canvas) !important;
  background-image: none !important;
}

body .phone-shell-wrap.persistent-bottom-nav-shell > .app-screen-header,
body .phone-shell-wrap.persistent-bottom-nav-shell .preview-reference-header,
body .phone-shell-wrap.persistent-bottom-nav-shell .home-header,
body .phone-shell-wrap.persistent-bottom-nav-shell .home-v2-header,
body .phone-shell-wrap.persistent-bottom-nav-shell .home-redesign-header,
body .phone-shell-wrap.persistent-bottom-nav-shell .reference-home-header,
body .phone-shell-wrap.persistent-bottom-nav-shell .locked-home-header,
body .phone-shell-wrap.persistent-bottom-nav-shell.live-shell-active .live-v3-topbar {
  background-color: var(--preview-unified-canvas) !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Home's logo/bell row must be part of the canvas, never a separate rectangle. */
body .phone-shell-wrap.persistent-bottom-nav-shell.home-shell-active .preview-reference-header {
  background: transparent !important;
  border: 0 !important;
}

/* State-specific selectors win over legacy per-screen colour layers. */
body .phone-shell-wrap.persistent-bottom-nav-shell.home-shell-active,
body .phone-shell-wrap.persistent-bottom-nav-shell.home-shell-active > .app-scroll-region,
body .phone-shell-wrap.persistent-bottom-nav-shell.home-shell-active .preview-reference-home,
body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active,
body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active > .app-scroll-region,
body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active > .app-screen-header,
body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-alerts-screen,
body .phone-shell-wrap.persistent-bottom-nav-shell.event-detail-shell-active,
body .phone-shell-wrap.persistent-bottom-nav-shell.event-detail-shell-active > .app-scroll-region,
body .phone-shell-wrap.persistent-bottom-nav-shell.event-detail-shell-active > .app-screen-header,
body .phone-shell-wrap.persistent-bottom-nav-shell.event-detail-shell-active .event-detail-screen,
body .phone-shell-wrap.persistent-bottom-nav-shell.live-shell-active,
body .phone-shell-wrap.persistent-bottom-nav-shell.live-shell-active > .app-scroll-region,
body .phone-shell-wrap.persistent-bottom-nav-shell.live-shell-active .live-layout-v3,
body .phone-shell-wrap.persistent-bottom-nav-shell.live-shell-active .live-v3-topbar,
body .phone-shell-wrap.persistent-bottom-nav-shell.health-shell-active,
body .phone-shell-wrap.persistent-bottom-nav-shell.health-shell-active > .app-scroll-region,
body .phone-shell-wrap.persistent-bottom-nav-shell.health-shell-active > .app-screen-header,
body .phone-shell-wrap.persistent-bottom-nav-shell.health-shell-active .system-health-screen,
body .phone-shell-wrap.persistent-bottom-nav-shell.settings-main-shell-active,
body .phone-shell-wrap.persistent-bottom-nav-shell.settings-main-shell-active > .app-scroll-region,
body .phone-shell-wrap.persistent-bottom-nav-shell.settings-main-shell-active > .app-screen-header,
body .phone-shell-wrap.persistent-bottom-nav-shell.settings-main-shell-active .settings-detail-redesign,
body .phone-shell-wrap.persistent-bottom-nav-shell.notification-preferences-shell-active,
body .phone-shell-wrap.persistent-bottom-nav-shell.notification-preferences-shell-active > .app-scroll-region,
body .phone-shell-wrap.persistent-bottom-nav-shell.notification-preferences-shell-active > .app-screen-header,
body .phone-shell-wrap.persistent-bottom-nav-shell.notification-preferences-shell-active .notification-preferences-screen,
body .phone-shell-wrap.persistent-bottom-nav-shell.location-shell-active,
body .phone-shell-wrap.persistent-bottom-nav-shell.location-shell-active > .app-scroll-region,
body .phone-shell-wrap.persistent-bottom-nav-shell.location-shell-active > .app-screen-header,
body .phone-shell-wrap.persistent-bottom-nav-shell.vehicle-shell-active,
body .phone-shell-wrap.persistent-bottom-nav-shell.vehicle-shell-active > .app-scroll-region,
body .phone-shell-wrap.persistent-bottom-nav-shell.vehicle-shell-active > .app-screen-header,
body .phone-shell-wrap.persistent-bottom-nav-shell.assignment-shell-active,
body .phone-shell-wrap.persistent-bottom-nav-shell.assignment-shell-active > .app-scroll-region,
body .phone-shell-wrap.persistent-bottom-nav-shell.assignment-shell-active > .app-screen-header {
  background-color: var(--preview-unified-canvas) !important;
  background-image: none !important;
  box-shadow: none !important;
}