/* Cart-Flow — the support-session banner's styles (shared/hcd-supportbanner.js draws the markup).

   Unmissable, so a Cart-Flow staffer working under a support session can never mistake it for
   their own tenant. One file for every front end that draws the banner: the five consoles and the
   five field apps (driver-app, specials-app, rollout-app, route-app, cart-request-portal). It used
   to live in shared/components.css, which only the consoles load — the field apps cannot take that
   file, whose .btn/.field/focus rules would restyle their own controls. Before that it was copied
   into four console stylesheets and missing from admin-console, which rendered the banner as plain
   body text on /admin/, where the wrong tenant does the most damage (review §282).
   test/support-banner-consoles.test.js and test/support-banner-field-apps.test.js pin both halves.

   Literal colours on purpose: the bar reads the same dark red in both themes (white on #7a1f1f is
   10.3:1), and the field apps do not load the token sheet. */
.support-banner {
  background: #7a1f1f;
  color: #fff;
  padding: 8px 12px;
  font-size: 14px;
  border-radius: 4px;
  margin-bottom: 12px;
}

/* The field apps' slot: a persistent, empty-at-boot live region above each app's own header. Those
   apps draw edge to edge (viewport-fit=cover), so the bar runs full width and keeps its text clear
   of the phone's status bar and notch itself; env() is 0 everywhere else. */
.support-banner-slot .support-banner {
  margin: 0;
  border-radius: 0;
  padding-top: calc(8px + env(safe-area-inset-top, 0px));
  padding-left: calc(12px + env(safe-area-inset-left, 0px));
  padding-right: calc(12px + env(safe-area-inset-right, 0px));
}