/* css/safe-area.css — the screens' own top bars below the clock (the owner, 2026-11-10, his iPhone 17 Pro Max: «on the taxi map and
   the parcels map the buttons slipped behind the clock»). Since the iOS build 2026111101 the web view draws under the status bar
   and the home indicator (capacitor.config.json contentInset "never"), so env(safe-area-inset-*) carry the real insets
   (css/tokens.css --safe-top, --safe-bottom: 62 and 34 on a Pro Max, 47 and 34 on a 390 phone, 20 and 0 on an SE; 0 in a desktop
   browser, where nothing here moves). A header marked data-chrome="header" pads itself (css/chrome.css); this is for the
   templates that draw their own top bar, wherever the outlet mounts them (straight in it, or in a split pane's column: W1,
   Q18): the map screens' floating rows (C1…C14, CF1…CF12, CP1's states, the freight's, the
   workshop's) and the other screens whose first header is their own.
   The foot (part 4) keeps what a screen puts at its foot above the home indicator.
   The measure: design-ui/00-DESIGN-SYSTEM/stitch-build/geometry-sweep.mjs --impact css/safe-area.css (each key with and without
   this sheet: what it fixes, what it brings, which boxes move). tests/unit/layout/safe-area.test.mjs keeps it whole.
   Only the block direction here (top, bottom, heights): nothing to mirror for right to left. */

/* 1. A screen's top bar: the first header of its template (its first element, or the first header in the template's root), or
   a header laid over the screen's top (absolute, fixed or sticky at top-0: C3's, C8's and J5's float over their map), the
   header that is (or opens) the picture a sheet's track carries at the screen's top (C1.plats-av, C1.ingen-traff: a host with
   no header of its own), or the header of the map block a screen starts with (C1.karta, CF2.tagen, CF3.kund-avbokade,
   C4.avbokning: one rule cannot tell that block from a map card lower down, so they are named), unless it
   pads for the clock already: a chrome header (css/chrome.css), the sector bars that do it in their own sheet (sys-w15-topbar,
   sys-w15-bar, sys-cw-topbar, sys-b1-header …, a salon page's .sys-bty-page, the .safe-top and .pt-safe utilities where a
   screen's sheet draws them (F2, WP2, WP5, W4, W8: elsewhere the class draws nothing), a pt-[…safe-area-inset-top…]), the home
   (B1, --b1-head-top), and A2, CP1 and YP3 (css/frame.css). A header in a sheet is the sheet's, and two screens draw their
   first header lower down (A3.inloggad under its greeting, EP3.tv's in the shop's sign). The bar's row starts the design's own top padding below the safe area:
   the padding its class drew is --bar-pt (below), and the safe area comes on top of it. */
@property --bar-pt { syntax: '<length>'; inherits: false; initial-value: 0px; }

:is(#screen-outlet [data-screen] > div > header:first-of-type,
    #screen-outlet [data-screen] > div > :is(main, div, section, form) > header:first-of-type,
    #screen-outlet [data-screen] header:is(.absolute, .fixed, .sticky).top-0,
    #screen-outlet [data-screen] [data-sheet-host]:not(:has(> header)) > .sheet-track[data-flow] > header[data-sheet-gap],
    #screen-outlet [data-screen] [data-sheet-host]:not(:has(> header)) > .sheet-track[data-flow] > [data-sheet-gap] > header:first-of-type,
    #screen-outlet :is([data-screen="C1.karta"], [data-screen="CF2.tagen"], [data-screen="CF3.kund-avbokade"]) :is([data-purpose="map-container"], .relative.z-10) > header:first-of-type,
    #screen-outlet [data-screen="C4.avbokning"] .h-\[42vh\] > header:first-of-type,
    #screen-outlet :is([data-screen="Q18"], [data-screen^="Q18."]) > div > * > .relative.z-10 > header:first-of-type,
    #screen-outlet [data-screen="T3"] > div > main > .relative.h-full > header:first-of-type,
    #screen-outlet [data-screen="Q18.oppettider"] > div > .min-h-screen > main > header:first-of-type,
    #screen-outlet [data-screen="EP3.skylt"] > div > .min-h-screen > div > header:first-of-type,
    #overlay-outlet > [data-overlay][data-present="fullscreen-overlay"] > [data-screen] > div > :is(main, div, section) > header:first-of-type,
    #overlay-outlet [data-screen="Q1"] main > .relative.h-\[320px\] > header:first-of-type):not(
    [data-chrome="header"], [data-chrome="header"] *, [data-sheet] *,
    .sys-w15-topbar, .sys-w15-bar, .sys-cw-topbar, .sys-p3-header, .sys-cv-fs-topbar, .sys-hv-topbar, .sys-b3-header, .sys-b1-header, .sys-bty-page *,
    :is([data-screen="F2"], [data-screen="WP2"], [data-screen="WP2.schema"], [data-screen="WP5"]) :is(.safe-top, .safe-top *),
    :is([data-screen="W4"], [data-screen="W4.jobbkort"], [data-screen="W8"], [data-screen="W8.offert"]) :is(.pt-safe, .pt-safe *),
    [class*="safe-area-inset-top"], [class*="safe-area-inset-top"] *,
    [data-screen="B1"] *, [data-screen^="B1."] *, [data-screen="A2"] *, [data-screen^="A2."] *, [data-screen="CP1"] *, [data-screen="YP3"] *,
    [data-screen="A3.inloggad"] *, [data-screen="EP3.tv"] *) {
  padding-top: calc(var(--safe-top, 0px) + var(--bar-pt));
}
/* the design's own top padding, as its class drew it (Tailwind's scale: 0.25rem a step) */
header:is(.pt-0, .py-0, .p-0) { --bar-pt: 0px; }
header:is(.pt-0\.5, .py-0\.5, .p-0\.5) { --bar-pt: 0.125rem; }
header:is(.pt-1, .py-1, .p-1) { --bar-pt: 0.25rem; }
header:is(.pt-1\.5, .py-1\.5, .p-1\.5) { --bar-pt: 0.375rem; }
header:is(.pt-2, .py-2, .p-2) { --bar-pt: 0.5rem; }
header:is(.pt-2\.5, .py-2\.5, .p-2\.5) { --bar-pt: 0.625rem; }
header:is(.pt-3, .py-3, .p-3) { --bar-pt: 0.75rem; }
header:is(.pt-3\.5, .py-3\.5, .p-3\.5) { --bar-pt: 0.875rem; }
header:is(.pt-4, .py-4, .p-4) { --bar-pt: 1rem; }
header:is(.pt-5, .py-5, .p-5) { --bar-pt: 1.25rem; }
header:is(.pt-6, .py-6, .p-6) { --bar-pt: 1.5rem; }
header:is(.pt-8, .py-8, .p-8) { --bar-pt: 2rem; }
/* a design drawn under a phone's status bar (pt-10 … pt-12: 40–48 px over its row) keeps that room where the phone's inset is
   smaller, and has the inset and 8 px where it is larger: max(the design, the inset + 8 px) */
header:is(.pt-10, .py-10) { --bar-pt: max(0.5rem, calc(2.5rem - var(--safe-top, 0px))); }
header:is(.pt-11, .py-11) { --bar-pt: max(0.5rem, calc(2.75rem - var(--safe-top, 0px))); }
header:is(.pt-12, .py-12) { --bar-pt: max(0.5rem, calc(3rem - var(--safe-top, 0px))); }

/* a top bar of a set height (CF2's and YF2's h-16, C1's and YF3's map strips) grows by the safe area, so its row keeps the room
   it was drawn with and the map runs up under the clock */
:is(#screen-outlet [data-screen] > div > header:first-of-type,
    #screen-outlet [data-screen] > div > :is(main, div, section, form) > header:first-of-type,
    #screen-outlet [data-screen] header:is(.absolute, .fixed, .sticky).top-0,
    #screen-outlet [data-screen] [data-sheet-host]:not(:has(> header)) > .sheet-track[data-flow] > header[data-sheet-gap],
    #screen-outlet [data-screen] [data-sheet-host]:not(:has(> header)) > .sheet-track[data-flow] > [data-sheet-gap] > header:first-of-type,
    #screen-outlet :is([data-screen="C1.karta"], [data-screen="CF2.tagen"], [data-screen="CF3.kund-avbokade"]) :is([data-purpose="map-container"], .relative.z-10) > header:first-of-type,
    #screen-outlet [data-screen="C4.avbokning"] .h-\[42vh\] > header:first-of-type,
    #screen-outlet :is([data-screen="Q18"], [data-screen^="Q18."]) > div > * > .relative.z-10 > header:first-of-type,
    #screen-outlet [data-screen="T3"] > div > main > .relative.h-full > header:first-of-type,
    #screen-outlet [data-screen="Q18.oppettider"] > div > .min-h-screen > main > header:first-of-type,
    #screen-outlet [data-screen="EP3.skylt"] > div > .min-h-screen > div > header:first-of-type,
    #overlay-outlet > [data-overlay][data-present="fullscreen-overlay"] > [data-screen] > div > :is(main, div, section) > header:first-of-type,
    #overlay-outlet [data-screen="Q1"] main > .relative.h-\[320px\] > header:first-of-type):not(
    [data-chrome="header"], [data-chrome="header"] *, [data-sheet] *,
    .sys-w15-topbar, .sys-w15-bar, .sys-cw-topbar, .sys-p3-header, .sys-cv-fs-topbar, .sys-hv-topbar, .sys-b3-header, .sys-b1-header, .sys-bty-page *,
    :is([data-screen="F2"], [data-screen="WP2"], [data-screen="WP2.schema"], [data-screen="WP5"]) :is(.safe-top, .safe-top *),
    :is([data-screen="W4"], [data-screen="W4.jobbkort"], [data-screen="W8"], [data-screen="W8.offert"]) :is(.pt-safe, .pt-safe *),
    [class*="safe-area-inset-top"], [class*="safe-area-inset-top"] *,
    [data-screen="B1"] *, [data-screen^="B1."] *, [data-screen="A2"] *, [data-screen^="A2."] *, [data-screen="CP1"] *, [data-screen="YP3"] *,
    [data-screen="A3.inloggad"] *, [data-screen="EP3.tv"] *).h-14 { height: calc(3.5rem + var(--safe-top, 0px)); }
:is(#screen-outlet [data-screen] > div > header:first-of-type,
    #screen-outlet [data-screen] > div > :is(main, div, section, form) > header:first-of-type,
    #screen-outlet [data-screen] header:is(.absolute, .fixed, .sticky).top-0,
    #screen-outlet [data-screen] [data-sheet-host]:not(:has(> header)) > .sheet-track[data-flow] > header[data-sheet-gap],
    #screen-outlet [data-screen] [data-sheet-host]:not(:has(> header)) > .sheet-track[data-flow] > [data-sheet-gap] > header:first-of-type,
    #screen-outlet :is([data-screen="C1.karta"], [data-screen="CF2.tagen"], [data-screen="CF3.kund-avbokade"]) :is([data-purpose="map-container"], .relative.z-10) > header:first-of-type,
    #screen-outlet [data-screen="C4.avbokning"] .h-\[42vh\] > header:first-of-type,
    #screen-outlet :is([data-screen="Q18"], [data-screen^="Q18."]) > div > * > .relative.z-10 > header:first-of-type,
    #screen-outlet [data-screen="T3"] > div > main > .relative.h-full > header:first-of-type,
    #screen-outlet [data-screen="Q18.oppettider"] > div > .min-h-screen > main > header:first-of-type,
    #screen-outlet [data-screen="EP3.skylt"] > div > .min-h-screen > div > header:first-of-type,
    #overlay-outlet > [data-overlay][data-present="fullscreen-overlay"] > [data-screen] > div > :is(main, div, section) > header:first-of-type,
    #overlay-outlet [data-screen="Q1"] main > .relative.h-\[320px\] > header:first-of-type):not(
    [data-chrome="header"], [data-chrome="header"] *, [data-sheet] *,
    .sys-w15-topbar, .sys-w15-bar, .sys-cw-topbar, .sys-p3-header, .sys-cv-fs-topbar, .sys-hv-topbar, .sys-b3-header, .sys-b1-header, .sys-bty-page *,
    :is([data-screen="F2"], [data-screen="WP2"], [data-screen="WP2.schema"], [data-screen="WP5"]) :is(.safe-top, .safe-top *),
    :is([data-screen="W4"], [data-screen="W4.jobbkort"], [data-screen="W8"], [data-screen="W8.offert"]) :is(.pt-safe, .pt-safe *),
    [class*="safe-area-inset-top"], [class*="safe-area-inset-top"] *,
    [data-screen="B1"] *, [data-screen^="B1."] *, [data-screen="A2"] *, [data-screen^="A2."] *, [data-screen="CP1"] *, [data-screen="YP3"] *,
    [data-screen="A3.inloggad"] *, [data-screen="EP3.tv"] *).h-16 { height: calc(4rem + var(--safe-top, 0px)); }
:is(#screen-outlet [data-screen] > div > header:first-of-type,
    #screen-outlet [data-screen] > div > :is(main, div, section, form) > header:first-of-type,
    #screen-outlet [data-screen] header:is(.absolute, .fixed, .sticky).top-0,
    #screen-outlet [data-screen] [data-sheet-host]:not(:has(> header)) > .sheet-track[data-flow] > header[data-sheet-gap],
    #screen-outlet [data-screen] [data-sheet-host]:not(:has(> header)) > .sheet-track[data-flow] > [data-sheet-gap] > header:first-of-type,
    #screen-outlet :is([data-screen="C1.karta"], [data-screen="CF2.tagen"], [data-screen="CF3.kund-avbokade"]) :is([data-purpose="map-container"], .relative.z-10) > header:first-of-type,
    #screen-outlet [data-screen="C4.avbokning"] .h-\[42vh\] > header:first-of-type,
    #screen-outlet :is([data-screen="Q18"], [data-screen^="Q18."]) > div > * > .relative.z-10 > header:first-of-type,
    #screen-outlet [data-screen="T3"] > div > main > .relative.h-full > header:first-of-type,
    #screen-outlet [data-screen="Q18.oppettider"] > div > .min-h-screen > main > header:first-of-type,
    #screen-outlet [data-screen="EP3.skylt"] > div > .min-h-screen > div > header:first-of-type,
    #overlay-outlet > [data-overlay][data-present="fullscreen-overlay"] > [data-screen] > div > :is(main, div, section) > header:first-of-type,
    #overlay-outlet [data-screen="Q1"] main > .relative.h-\[320px\] > header:first-of-type):not(
    [data-chrome="header"], [data-chrome="header"] *, [data-sheet] *,
    .sys-w15-topbar, .sys-w15-bar, .sys-cw-topbar, .sys-p3-header, .sys-cv-fs-topbar, .sys-hv-topbar, .sys-b3-header, .sys-b1-header, .sys-bty-page *,
    :is([data-screen="F2"], [data-screen="WP2"], [data-screen="WP2.schema"], [data-screen="WP5"]) :is(.safe-top, .safe-top *),
    :is([data-screen="W4"], [data-screen="W4.jobbkort"], [data-screen="W8"], [data-screen="W8.offert"]) :is(.pt-safe, .pt-safe *),
    [class*="safe-area-inset-top"], [class*="safe-area-inset-top"] *,
    [data-screen="B1"] *, [data-screen^="B1."] *, [data-screen="A2"] *, [data-screen^="A2."] *, [data-screen="CP1"] *, [data-screen="YP3"] *,
    [data-screen="A3.inloggad"] *, [data-screen="EP3.tv"] *).h-24 { height: calc(6rem + var(--safe-top, 0px)); }
:is(#screen-outlet [data-screen] > div > header:first-of-type,
    #screen-outlet [data-screen] > div > :is(main, div, section, form) > header:first-of-type,
    #screen-outlet [data-screen] header:is(.absolute, .fixed, .sticky).top-0,
    #screen-outlet [data-screen] [data-sheet-host]:not(:has(> header)) > .sheet-track[data-flow] > header[data-sheet-gap],
    #screen-outlet [data-screen] [data-sheet-host]:not(:has(> header)) > .sheet-track[data-flow] > [data-sheet-gap] > header:first-of-type,
    #screen-outlet :is([data-screen="C1.karta"], [data-screen="CF2.tagen"], [data-screen="CF3.kund-avbokade"]) :is([data-purpose="map-container"], .relative.z-10) > header:first-of-type,
    #screen-outlet [data-screen="C4.avbokning"] .h-\[42vh\] > header:first-of-type,
    #screen-outlet :is([data-screen="Q18"], [data-screen^="Q18."]) > div > * > .relative.z-10 > header:first-of-type,
    #screen-outlet [data-screen="T3"] > div > main > .relative.h-full > header:first-of-type,
    #screen-outlet [data-screen="Q18.oppettider"] > div > .min-h-screen > main > header:first-of-type,
    #screen-outlet [data-screen="EP3.skylt"] > div > .min-h-screen > div > header:first-of-type,
    #overlay-outlet > [data-overlay][data-present="fullscreen-overlay"] > [data-screen] > div > :is(main, div, section) > header:first-of-type,
    #overlay-outlet [data-screen="Q1"] main > .relative.h-\[320px\] > header:first-of-type):not(
    [data-chrome="header"], [data-chrome="header"] *, [data-sheet] *,
    .sys-w15-topbar, .sys-w15-bar, .sys-cw-topbar, .sys-p3-header, .sys-cv-fs-topbar, .sys-hv-topbar, .sys-b3-header, .sys-b1-header, .sys-bty-page *,
    :is([data-screen="F2"], [data-screen="WP2"], [data-screen="WP2.schema"], [data-screen="WP5"]) :is(.safe-top, .safe-top *),
    :is([data-screen="W4"], [data-screen="W4.jobbkort"], [data-screen="W8"], [data-screen="W8.offert"]) :is(.pt-safe, .pt-safe *),
    [class*="safe-area-inset-top"], [class*="safe-area-inset-top"] *,
    [data-screen="B1"] *, [data-screen^="B1."] *, [data-screen="A2"] *, [data-screen^="A2."] *, [data-screen="CP1"] *, [data-screen="YP3"] *,
    [data-screen="A3.inloggad"] *, [data-screen="EP3.tv"] *).h-\[120px\] { height: calc(120px + var(--safe-top, 0px)); }
:is(#screen-outlet [data-screen] > div > header:first-of-type,
    #screen-outlet [data-screen] > div > :is(main, div, section, form) > header:first-of-type,
    #screen-outlet [data-screen] header:is(.absolute, .fixed, .sticky).top-0,
    #screen-outlet [data-screen] [data-sheet-host]:not(:has(> header)) > .sheet-track[data-flow] > header[data-sheet-gap],
    #screen-outlet [data-screen] [data-sheet-host]:not(:has(> header)) > .sheet-track[data-flow] > [data-sheet-gap] > header:first-of-type,
    #screen-outlet :is([data-screen="C1.karta"], [data-screen="CF2.tagen"], [data-screen="CF3.kund-avbokade"]) :is([data-purpose="map-container"], .relative.z-10) > header:first-of-type,
    #screen-outlet [data-screen="C4.avbokning"] .h-\[42vh\] > header:first-of-type,
    #screen-outlet :is([data-screen="Q18"], [data-screen^="Q18."]) > div > * > .relative.z-10 > header:first-of-type,
    #screen-outlet [data-screen="T3"] > div > main > .relative.h-full > header:first-of-type,
    #screen-outlet [data-screen="Q18.oppettider"] > div > .min-h-screen > main > header:first-of-type,
    #screen-outlet [data-screen="EP3.skylt"] > div > .min-h-screen > div > header:first-of-type,
    #overlay-outlet > [data-overlay][data-present="fullscreen-overlay"] > [data-screen] > div > :is(main, div, section) > header:first-of-type,
    #overlay-outlet [data-screen="Q1"] main > .relative.h-\[320px\] > header:first-of-type):not(
    [data-chrome="header"], [data-chrome="header"] *, [data-sheet] *,
    .sys-w15-topbar, .sys-w15-bar, .sys-cw-topbar, .sys-p3-header, .sys-cv-fs-topbar, .sys-hv-topbar, .sys-b3-header, .sys-b1-header, .sys-bty-page *,
    :is([data-screen="F2"], [data-screen="WP2"], [data-screen="WP2.schema"], [data-screen="WP5"]) :is(.safe-top, .safe-top *),
    :is([data-screen="W4"], [data-screen="W4.jobbkort"], [data-screen="W8"], [data-screen="W8.offert"]) :is(.pt-safe, .pt-safe *),
    [class*="safe-area-inset-top"], [class*="safe-area-inset-top"] *,
    [data-screen="B1"] *, [data-screen^="B1."] *, [data-screen="A2"] *, [data-screen^="A2."] *, [data-screen="CP1"] *, [data-screen="YP3"] *,
    [data-screen="A3.inloggad"] *, [data-screen="EP3.tv"] *).h-\[140px\] { height: calc(140px + var(--safe-top, 0px)); }
:is(#screen-outlet [data-screen] > div > header:first-of-type,
    #screen-outlet [data-screen] > div > :is(main, div, section, form) > header:first-of-type,
    #screen-outlet [data-screen] header:is(.absolute, .fixed, .sticky).top-0,
    #screen-outlet [data-screen] [data-sheet-host]:not(:has(> header)) > .sheet-track[data-flow] > header[data-sheet-gap],
    #screen-outlet [data-screen] [data-sheet-host]:not(:has(> header)) > .sheet-track[data-flow] > [data-sheet-gap] > header:first-of-type,
    #screen-outlet :is([data-screen="C1.karta"], [data-screen="CF2.tagen"], [data-screen="CF3.kund-avbokade"]) :is([data-purpose="map-container"], .relative.z-10) > header:first-of-type,
    #screen-outlet [data-screen="C4.avbokning"] .h-\[42vh\] > header:first-of-type,
    #screen-outlet :is([data-screen="Q18"], [data-screen^="Q18."]) > div > * > .relative.z-10 > header:first-of-type,
    #screen-outlet [data-screen="T3"] > div > main > .relative.h-full > header:first-of-type,
    #screen-outlet [data-screen="Q18.oppettider"] > div > .min-h-screen > main > header:first-of-type,
    #screen-outlet [data-screen="EP3.skylt"] > div > .min-h-screen > div > header:first-of-type,
    #overlay-outlet > [data-overlay][data-present="fullscreen-overlay"] > [data-screen] > div > :is(main, div, section) > header:first-of-type,
    #overlay-outlet [data-screen="Q1"] main > .relative.h-\[320px\] > header:first-of-type):not(
    [data-chrome="header"], [data-chrome="header"] *, [data-sheet] *,
    .sys-w15-topbar, .sys-w15-bar, .sys-cw-topbar, .sys-p3-header, .sys-cv-fs-topbar, .sys-hv-topbar, .sys-b3-header, .sys-b1-header, .sys-bty-page *,
    :is([data-screen="F2"], [data-screen="WP2"], [data-screen="WP2.schema"], [data-screen="WP5"]) :is(.safe-top, .safe-top *),
    :is([data-screen="W4"], [data-screen="W4.jobbkort"], [data-screen="W8"], [data-screen="W8.offert"]) :is(.pt-safe, .pt-safe *),
    [class*="safe-area-inset-top"], [class*="safe-area-inset-top"] *,
    [data-screen="B1"] *, [data-screen^="B1."] *, [data-screen="A2"] *, [data-screen^="A2."] *, [data-screen="CP1"] *, [data-screen="YP3"] *,
    [data-screen="A3.inloggad"] *, [data-screen="EP3.tv"] *).h-\[190px\] { height: calc(190px + var(--safe-top, 0px)); }
/* ...and C1.ingen-traff's picture, a set height that holds its bar in its flow, grows with it */
#screen-outlet [data-screen="C1.ingen-traff"] .sheet-track[data-flow] > [data-sheet-gap].h-\[185px\]:has(> header) { height: calc(185px + var(--safe-top, 0px)); }

/* the chrome header of a full-screen overlay (T8): css/chrome.css pads the outlet's chrome headers only */
#overlay-outlet > [data-overlay][data-present="fullscreen-overlay"] [data-chrome="header"] { padding-top: calc(var(--safe-top, 0px) + var(--bar-pt)); }
/* YP2 starts with a sheet drawn as tall as the screen (its handle, then its title): the sheet starts below the clock */
#screen-outlet [data-screen="YP2"] section.min-h-screen[aria-labelledby="sheet-title"] { padding-top: var(--safe-top, 0px); }
/* CA2 draws its queue pill in a row above its chrome header, which css/chrome.css pads for the clock as if it stood at the
   top: the row moves down into that room, over the header's material, and the clock's band above it stays clear */
#screen-outlet [data-screen="CA2"] .min-h-screen > .relative.pt-3:has(+ [data-chrome="header"]) { position: relative; z-index: 2; transform: translateY(var(--safe-top, 0px)); }

/* 2. A sheet raised all the way stops --sheet-open under its host's top (css/frame.css). A host that starts at the screen's top
   (the map screens) keeps the sheet's handle below the clock too. Not: B1 (its --sheet-open is under --b1-head-top, which holds
   the inset), CP1 and YP3 (their track is a grid row under their header), a host under rows of its own screen
   ([data-sheet-host="fill"], CA1) and a dialog's */
#screen-outlet [data-screen]:not([data-screen="B1"], [data-screen^="B1."], [data-screen="CP1"], [data-screen="YP3"]) [data-sheet-host]:not([data-sheet-host="fill"], [data-sheet-host="dialog"]) > .sheet-track {
  scroll-padding-top: calc(var(--safe-top, 0px) + var(--sheet-open));
}
/* ...and a block the sheet keeps in view ([data-sheet-keep], C4's driver) sticks there too, past open */
#screen-outlet [data-screen]:not([data-screen="B1"], [data-screen^="B1."], [data-screen="CP1"], [data-screen="YP3"]) [data-sheet-host]:not([data-sheet-host="fill"], [data-sheet-host="dialog"]) > .sheet-track > [data-sheet] > [data-sheet-keep] {
  top: calc(var(--safe-top, 0px) + var(--sheet-open));
}
/* a dialog sheet rests with its foot at the screen's foot (js/core/sheet.js): one drawn as tall as the screen from 24 or 56 px
   down (CF13.detalj, C2.preferenser: both scroll inside) stops 8 px below the clock instead */
#screen-outlet .sheet-track[data-dialog] > [data-sheet] { max-height: calc(100% - var(--safe-top, 0px) - 8px); }

/* 3. What a map screen floats just under its top bar (a status chip, a banner, the arrival card) moves down with the bar, so it
   stands under the bar's row as drawn instead of under the bar itself (the gate's overlaps: CF2's «till kunden» chip under the
   menu, C4.framme's «Framme» under «Tillbaka»). Each is placed from the screen's top by its own class: the safe area comes on top.
   C4's bar is drawn under a status bar (pt-12), so its float moves by what the bar's row moved: the inset less 40 px */
#screen-outlet [data-screen="C3.forare-hittad"] .absolute.top-10:not([data-sheet] *) { top: calc(2.5rem + var(--safe-top, 0px)); }
#screen-outlet [data-screen="C3.offline"] header ~ .absolute.top-\[52px\] { top: calc(52px + var(--safe-top, 0px)); }
#screen-outlet :is([data-screen="C4.framme"], [data-screen="C4.framme-vantar"]) .absolute.top-\[86px\]:not([data-sheet] *) { top: calc(86px + max(0px, var(--safe-top, 0px) - 2.5rem)); }
#screen-outlet > [data-screen^="C5"] header ~ [data-section="arrival"].top-\[108px\] { top: calc(108px + var(--safe-top, 0px)); }
#screen-outlet :is([data-screen="CF1"], [data-screen^="CF1."]) header ~ [data-section="connection"].top-16 { top: calc(4rem + var(--safe-top, 0px)); }
#screen-outlet :is([data-screen="CF2"], [data-screen^="CF2."]) [data-part="pickup-chip"].top-\[76px\] { top: calc(76px + var(--safe-top, 0px)); }
#screen-outlet [data-screen="CF2.missad-forfragan"] .absolute.top-\[68px\]:not([data-sheet] *) { top: calc(68px + var(--safe-top, 0px)); }
#screen-outlet [data-screen="J5"] [data-purpose="live-map-viewport"] > header ~ .absolute.top-16 { top: calc(4rem + var(--safe-top, 0px)); }
#screen-outlet :is([data-screen="YF2"], [data-screen^="YF2."]) [data-part="eta-chip"].top-\[76px\] { top: calc(76px + var(--safe-top, 0px)); }

/* 4. The foot, over the home indicator (34 px on an iPhone with Face ID, 0 on an SE and in a browser). Its design's own bottom
   padding stays, and the inset comes under it, as css/chrome.css's action bar does (calc(12px + the inset)); the padding the
   design drew is --foot-pb, read off its class below.
   a) a bar fixed at the screen's foot, the screen's width (a screen's own «Fortsätt», CF2's «Acceptera» and «Avböj», a
      salon's sheet; an absolute one only from edge to edge, inset-x-0 or left-0 right-0, never a tab's underline or a dot), or the last row of one
      that is only its frame (CF2's and YF2's buttons under their fade, F4.problem's, G4.problem's sheet);
   a') a dialog sheet (js/core/sheet.js: [data-sheet="dialog"], resting at the foot: EP5.ny's form, Q1's), or its last row
      when that row draws the padding;
   b) the panel of a dialog layer that puts it at the foot (fixed over the whole screen, justify-end or items-end:
      EF1.kassa's, EP5.ny's), when the panel draws the padding itself;
   c) a page as tall as the screen (min-h-screen, 100dvh: A5's and B6's foot, the driver's breaks, M5's chat field): what it
      holds at its foot ends above the inset, and a longer page scrolls its last row above it. Its own full-height child
      takes it instead, if it has one, and a page that hosts a map and its sheet (css/frame.css pads the sheet's foot) not.
   Not: what pads itself (data-chrome="actionbar", a sheet's foot, CP1's and YP3's bar), what is in a sheet's track. A bar
   with the frame's foot material (data-foot-material: P6's, EP3's) has the material under it, not the room: it is padded. */
@property --foot-pb { syntax: '<length>'; inherits: false; initial-value: 0px; }
:is(#screen-outlet [data-screen] :is(.fixed.bottom-0, .absolute.bottom-0:is(.inset-x-0, .left-0.right-0)):not([data-chrome], [data-chrome] *, [data-sheet-foot], .sheet-track:not([data-dialog]) *, [data-sheet-host]:not([data-sheet-host="dialog"]), :has(.sheet-track:not([data-dialog])), [data-screen="CP1"] *, [data-screen="YP3"] *):not(:has(> :last-child[class*="pb-"])),
    #screen-outlet [data-screen] :is(.fixed.bottom-0, .absolute.bottom-0:is(.inset-x-0, .left-0.right-0)):not([data-chrome], [data-chrome] *, [data-sheet-foot], .sheet-track:not([data-dialog]) *, [data-sheet-host]:not([data-sheet-host="dialog"]), :has(.sheet-track:not([data-dialog])), [data-screen="CP1"] *, [data-screen="YP3"] *) > :last-child:is([class*="pb-"]),
    #screen-outlet [data-screen] .sheet-track[data-dialog] > [data-sheet]:not(:has(> :last-child[class*="pb-"])),
    #screen-outlet [data-screen] .sheet-track[data-dialog] > [data-sheet] > :last-child[class*="pb-"],
    #screen-outlet [data-screen] .fixed.inset-0:is(.flex-col.justify-end, .items-end):not([data-chrome], [data-chrome] *, [data-sheet-foot], .sheet-track:not([data-dialog]) *, [data-sheet-host]:not([data-sheet-host="dialog"]), :has(.sheet-track:not([data-dialog])), [data-screen="CP1"] *, [data-screen="YP3"] *) > :last-child:is([class*="pb-"], [class*="p-"])) {
  padding-bottom: max(var(--foot-pb), var(--safe-bottom, 0px));
}
/* the design's own bottom padding, as its class drew it */
:is(.pb-0, .py-0, .p-0) { --foot-pb: 0px; }
:is(.pb-0\.5, .py-0\.5, .p-0\.5) { --foot-pb: 0.125rem; }
:is(.pb-1, .py-1, .p-1) { --foot-pb: 0.25rem; }
:is(.pb-1\.5, .py-1\.5, .p-1\.5) { --foot-pb: 0.375rem; }
:is(.pb-2, .py-2, .p-2) { --foot-pb: 0.5rem; }
:is(.pb-2\.5, .py-2\.5, .p-2\.5) { --foot-pb: 0.625rem; }
:is(.pb-3, .py-3, .p-3) { --foot-pb: 0.75rem; }
:is(.pb-3\.5, .py-3\.5, .p-3\.5) { --foot-pb: 0.875rem; }
:is(.pb-4, .py-4, .p-4) { --foot-pb: 1rem; }
:is(.pb-5, .py-5, .p-5) { --foot-pb: 1.25rem; }
:is(.pb-6, .py-6, .p-6) { --foot-pb: 1.5rem; }
:is(.pb-7, .py-7, .p-7) { --foot-pb: 1.75rem; }
:is(.pb-8, .py-8, .p-8) { --foot-pb: 2rem; }
:is(.pb-10, .py-10, .p-10) { --foot-pb: 2.5rem; }
:is(.pb-12, .py-12, .p-12) { --foot-pb: 3rem; }
:is(.pb-16, .py-16, .p-16) { --foot-pb: 4rem; }
:is(.pb-20, .py-20, .p-20) { --foot-pb: 5rem; }
:is(.pb-24, .py-24, .p-24) { --foot-pb: 6rem; }
:is(.pb-28, .py-28, .p-28) { --foot-pb: 7rem; }
:is(.pb-32, .py-32, .p-32) { --foot-pb: 8rem; }
:is(.pb-36, .py-36, .p-36) { --foot-pb: 9rem; }
:is(.pb-40, .py-40, .p-40) { --foot-pb: 10rem; }
:is(.pb-44, .py-44, .p-44) { --foot-pb: 11rem; }
:is(.pb-48, .py-48, .p-48) { --foot-pb: 12rem; }
:is(.pb-52, .py-52, .p-52) { --foot-pb: 13rem; }

/* d) what one rule cannot reach, each named with the padding it is drawn with (where a class of the design draws nothing, the
   inset alone), so nothing moves on a phone without a home indicator */
/* the onboarding's «Fortsätt som gäst» (its pb-7 draws nothing: the inset alone) */
#screen-outlet > [data-screen^="A2"] footer[data-section="story-footer"] { padding-bottom: var(--safe-bottom, 0px); }
/* C9's and F1's last row comes after their sticky action bar, which pads itself while what holds it keeps no room
   (css/chrome.css): the row takes the room itself */
#screen-outlet [data-screen="C9"] footer.mt-4.pb-2 { padding-bottom: max(8px, var(--safe-bottom, 0px)); }
#screen-outlet [data-screen="F1"] main > .report-link:last-child { margin-bottom: var(--safe-bottom, 0px); }
/* a full-height page's foot: A3.fel's legal line, BankID's (A5) footer, the salon's empty shop (JP2.tom), the freight's forms (Y1, Y4.nytt-pris), the driver's papers (CF8) */
#screen-outlet [data-screen="A3.fel"] .min-h-screen.pb-6,
#screen-outlet :is([data-screen="A5"], [data-screen^="A5."]) main.min-h-screen.pb-6,
#screen-outlet [data-screen="JP2.tom"] .min-h-\[100dvh\],
#screen-outlet [data-screen="Y1"] main.glass-sheet.pb-6,
#screen-outlet [data-screen="Y4.nytt-pris"] main.pb-6,
#screen-outlet > [data-screen^="CF8."] main.min-h-\[100dvh\].pb-6 { padding-bottom: max(24px, var(--safe-bottom, 0px)); }
/* B3's foot, the booking sheets' «Stäng» (H2.ombokning, HP1.nybokning, HP5.flytta) */
#screen-outlet [data-screen="B3"] > div > main.sys-b3,
#screen-outlet :is([data-screen="H2.ombokning"], [data-screen="HP1.nybokning"], [data-screen="HP5.flytta"]) section.p-5.pb-7 { padding-bottom: max(28px, var(--safe-bottom, 0px)); }
/* the driver's break (CF1.rast, CF9.paus, CF9.rast) */
#screen-outlet :is([data-screen="CF1.rast"], [data-screen="CF9.paus"], [data-screen="CF9.rast"]) main.min-h-\[100dvh\].pb-3 { padding-bottom: max(12px, var(--safe-bottom, 0px)); }
/* Q18's «Senare» */
#screen-outlet [data-screen="Q18"] > div > .min-h-screen.pb-8 { padding-bottom: max(32px, var(--safe-bottom, 0px)); }
/* a dialog's panel nested in its layer (I4.problem's, YP1.motbud's) */
#screen-outlet [data-screen="I4.problem"] .fixed.inset-0 > .relative > .p-5,
#screen-outlet [data-screen="YP1.motbud"] .fixed.inset-0 .p-5:has([data-action="cancel"]) { padding-bottom: max(20px, var(--safe-bottom, 0px)); }
/* L4's page clears its action bar, which grew by the inset (css/chrome.css) */
#screen-outlet [data-screen="L4"] main.min-h-screen.pb-32 { padding-bottom: calc(128px + var(--safe-bottom, 0px)); }
/* C8's sheet foot stands at the screen's very foot (css/frame.css «keep confirm-booking inside 844px viewport», written when the
   inset was 0): its material keeps reaching the edge, its row stands on the safe area's edge */
#screen-outlet [data-screen="C8"] [data-sheet-foot] { padding-bottom: max(8px, var(--safe-bottom, 0px)) !important; }
/* KF1's action bar is sticky in a main marked overflow-y-auto that never scrolls itself (it is as tall as its rows): the main
   was the bar's scroll box, so the bar never stuck and rested half under the screen's foot. clip cuts nothing there and lets
   the bar stick to the screen (css/chrome.css does the same for the overflow-hidden wrappers) */
#screen-outlet [data-screen="KF1"] main.overflow-y-auto:has(> [data-chrome="actionbar"]:not(.fixed)) { overflow: clip; }
/* e) a page whose action bar is fixed over it (css/chrome.css pads that bar for the inset since 2026111101) keeps the room it
   drew under its last row (pb-28 …) and the inset on top of it, so its last row still ends above the bar (CA3's log, FP1's
   plan, Q14's «Välj fil») */
#screen-outlet [data-screen] :has(> [data-chrome="actionbar"].fixed:not([hidden], .hidden)):not([data-chrome-room]) { padding-bottom: calc(var(--foot-pb) + var(--safe-bottom, 0px)); }
/* W1's last row ends 32 px over the page's foot, B6's story panel 24 px, M5's chat field 4 px */
#screen-outlet [data-screen="W1"] main.min-h-screen.pb-8 { padding-bottom: max(32px, var(--safe-bottom, 0px)); }
:is(#screen-outlet, #overlay-outlet) [data-screen="B6"] footer[data-purpose="call-to-action-panel"].pb-6 { padding-bottom: max(24px, var(--safe-bottom, 0px)); }
#screen-outlet [data-screen="M5"] footer[data-purpose="chat-input-controls"].pb-1 { padding-bottom: max(4px, var(--safe-bottom, 0px)); }
/* the car wash's canvas (sys-cw-canvas: overflow-x hidden in its sheet, so a scroll box up and down too, as tall as its rows)
   held HP3.tvattare's sticky action bar to itself, never to the screen: at rest «Spara» stood half under the screen's foot.
   clip keeps the sideways cut without the box (css/frame.css does it for the overflow-x-hidden class) */
#screen-outlet [data-screen] .sys-cw-canvas:has([data-chrome="actionbar"]:not(.fixed)) { overflow-x: clip; }
/* the same for a sticky header in a screen's own canvas drawn overflow-x hidden by its generated sheet (IF1's mobile-screen,
   the car wash's mobile-canvas, D2's and JP2's app-viewport, CF19's nordic-canvas; each as tall as its rows): the canvas was
   the header's scroll box, and «Jobbförfrågningar» with a long list lost its header off the top of the screen with the page
   (test-page item look-other-managers) */
#screen-outlet [data-screen] :is(.mobile-screen, .mobile-canvas, .app-viewport, .nordic-canvas):has([data-chrome="header"]:not(.fixed, .absolute), [data-chrome="actionbar"]:not(.fixed)) { overflow-x: clip; }
/* FP1's fixed bar (its plan's two rows and «Lägg till pass», 153 px and the inset) is taller than the room its page drew under
   its last row (pb-32, 128 px): «Inga pass» stood 25 px under it on every phone. The room is the bar's and 16 px */
#screen-outlet [data-screen="FP1"] main.min-h-screen.pb-32:has(> [data-chrome="actionbar"].fixed) { padding-bottom: calc(10.5rem + var(--safe-bottom, 0px)); }
/* K6's fixed bar (the ticket's total and «Betala», 177 px and the inset) is taller than its page's room (pb-36, 144 px): the
   seller's «Villkor» stood 33 px under it on every phone. The room is the bar's and 16 px */
#screen-outlet [data-screen="K6"] .min-h-screen.pb-36:has(> [data-chrome="actionbar"].fixed) { padding-bottom: calc(12rem + var(--safe-bottom, 0px)); }

/* js/core/foot-room.js's gauge of the home indicator's band (env(safe-area-inset-bottom): 34 px on an iPhone with Face ID), here
   with the band's other rules, so that css/foot-room.css switched off (geometry-sweep.mjs --pixel) leaves exactly what
   was before it */
[data-foot-gauge] {
  position: fixed;
  inset-inline-start: 0;
  bottom: 0;
  width: 0;
  height: var(--safe-bottom, 0px);
  visibility: hidden;
  pointer-events: none;
}

/* 5. A field is never smaller than 16 px on an iPhone or an iPad (the owner, 2026-11-10: «in the report section a field sticks
   out of the side of the screen»). iOS zooms the page into a field whose text is smaller as it takes the focus, and stays
   zoomed: CF14's «Vad hände…» (14 px) then ran past the screen's side and the page scrolled sideways. The viewport keeps pinch
   zoom (docs/legal/TILLGANGLIGHET-BEDOMNING.md), so the floor is the fields'. Only iOS zooms (-webkit-touch-callout is iOS's
   alone), so only there; only the fields drawn smaller (a small size class, the sectors' address fields, a date or time field
   with no class), never one drawn larger */
@supports (-webkit-touch-callout: none) {
  :is(#screen-outlet, #overlay-outlet, #drawer-outlet) :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="button"], [type="submit"], [type="reset"], [type="image"], [type="hidden"]), textarea, select):is(.text-xs, .text-sm, .text-\[11px\], .text-\[12px\], .text-\[12\.5px\], .text-\[13px\], .text-\[13\.5px\], .text-\[14px\], .text-\[15px\], .text-body-sm, .text-body-md, .text-label-sm, .text-label-md, .text-metric-mono-sm, .sys-cw-addr-input, .sys-veh-addr-input, .sys-frk-addr-input, :not([class])) {
    font-size: 16px !important;
  }
}