/* ==========================================================================
   SEEYOUSOON — the foot of the booked services' pages (beauty E…, cleaning F…, moving G…, car wash H…, crafts I…), on
   every device. The owner, 2026-11-13, on Flytthjälp (G3): «when you scroll down it goes a very long way, and the button
   keeps a background band behind it that looks bad; fix it on every kind of device».

   Two causes, both here:
   - the room under the bar was counted twice: G3's generated sheet pads its main 148 px for the dock (css/stitch/moving/*.css
     «G3 Top-Aligned Flow»), and css/safe-area.css pads the page round it again for the same dock (pb-36 and the inset):
     at 390 × 844 the page went on 154 px past the dock under an empty screen;
   - the action bar's material (css/chrome.css: glass at 64 % of the page's colour, out to the screen's edges) is a band
     188 px tall behind G3's button.
   Now a page of these sections ends where its content ends: the bar (its price, its line, a second button) stands in the
   page's flow after the last row, without a material, and its main action, the app's purple pill (data-chrome="primary"),
   floats alone over the home indicator. The bar's foot keeps the pill's room (16 px of breath, the 52 px pill, 12 px
   over the inset), so scrolled to the end nothing stands under the pill and nothing more follows.
   Not here: a bar with no pill (it keeps the chrome's), a bar in a sheet or a dialog, a screen in a split pane.
   In the chrome layer: its !important outranks every sheet outside a layer, and these selectors outweigh css/chrome.css's;
   what holds the bar loses its padding at one id of weight (one :has() in another is no selector at all: the whole rule went), so css/foot-room.css's measured room (two ids) still comes on top.
   ========================================================================== */

@layer chrome {
  /* the bar: in the page's flow, no material, its foot the floating pill's room */
  #screen-outlet > :is([data-screen^="E"], [data-screen^="F"], [data-screen^="G"], [data-screen^="H"], [data-screen^="I"]) [data-chrome="actionbar"]:has([data-chrome="primary"]):not(.sheet-track *, .fixed.inset-0 *) {
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    max-width: var(--app-col) !important;
    margin-inline: auto !important;
    transform: none !important;
    translate: none !important;
    padding: 12px 16px calc(80px + var(--safe-bottom, 0px)) !important;
  }
  #screen-outlet > :is([data-screen^="E"], [data-screen^="F"], [data-screen^="G"], [data-screen^="H"], [data-screen^="I"]) [data-chrome="actionbar"]:has([data-chrome="primary"]):not(.sheet-track *, .fixed.inset-0 *)::before {
    content: none !important;
  }
  /* the band a design drew on the bar or on a box in it round the pill (G3's aside, F4's inner column: a colour, a blur, a
     line and a shadow); a blur would also hold the floating pill inside that box */
  #screen-outlet > :is([data-screen^="E"], [data-screen^="F"], [data-screen^="G"], [data-screen^="H"], [data-screen^="I"]) [data-chrome="actionbar"]:has([data-chrome="primary"]):not(.sheet-track *, .fixed.inset-0 *),
  #screen-outlet > :is([data-screen^="E"], [data-screen^="F"], [data-screen^="G"], [data-screen^="H"], [data-screen^="I"]) [data-chrome="actionbar"]:not(.sheet-track *, .fixed.inset-0 *) :has([data-chrome="primary"]) {
    background: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }
  /* what holds it, however far out, keeps no room of its own for it (a fixed bar's page drew pb-28 … for it, EP2's on the box
     round its column; css/chrome.css does the same for a sticky bar), and G3's main none for its dock */
  #screen-outlet > :is([data-screen^="E"], [data-screen^="F"], [data-screen^="G"], [data-screen^="H"], [data-screen^="I"]) :has([data-chrome="actionbar"]:not([hidden], .hidden, .sheet-track *, .fixed.inset-0 *) [data-chrome="primary"]),
  #screen-outlet > [data-screen="G3"] main.sys-g3-main {
    padding-bottom: 0 !important;
  }
  /* the pill floats over the foot, on the column (the iPad's too), above the home indicator */
  #screen-outlet > :is([data-screen^="E"], [data-screen^="F"], [data-screen^="G"], [data-screen^="H"], [data-screen^="I"]) [data-chrome="actionbar"]:not(.sheet-track *, .fixed.inset-0 *) [data-chrome="primary"] {
    position: fixed !important;
    z-index: 40 !important;
    top: auto !important;
    bottom: calc(12px + var(--safe-bottom, 0px)) !important;
    inset-inline: 16px !important;
    width: auto !important;
    max-width: 480px !important;
    margin: 0 auto !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 10px 24px -8px rgba(124, 58, 237, 0.6), 0 12px 32px -12px rgba(0, 0, 0, 0.45) !important;
  }
}