/* css/responsive-wide.css: css/responsive.css's rules for a screen 560 px and wider (its (min-width: 560px), 640, 700, 768 and
   840 px blocks), moved here unchanged and linked right after it with media="(min-width: 560px)" (index.html, PLAN-V3 QA.6):
   a phone held upright neither waits for this file before its first paint nor matches these rules on every style pass, and
   from 560 px the rules apply in the same order as before. Only rules inside a min-width query of 560 px or more belong here
   (tests/unit/layout/wide-sheets.test.mjs); what the header of css/responsive.css says of each block holds here. */

@media (min-width: 560px) {
  /* A fixed box is placed against the viewport, not the 480 column (#screen-outlet must never get transform, filter or
     contain: that would carry every fixed bar away with the page's scroll). Bars drawn as wide as the phone span the column.
     A drawer slid out of sight (-translate-x-full: DP3's menu) stays where it hides, off the screen; opened (the flow takes
     the class away) it is a bar like the others and opens in the column. */
  :is(#screen-outlet, #overlay-outlet) [data-screen] .fixed:is(.inset-0, .inset-x-0, .left-0.right-0, .left-0.w-full, .left-0[class~="w-[390px]"]):not([class*="translate-x-1/2"], [class*="translate-x-full"]) {
    left: max(0px, calc((100% - var(--app-col)) / 2));
  }
  :is(#screen-outlet, #overlay-outlet) [data-screen] .fixed:is(.inset-0, .inset-x-0, .left-0.right-0, .right-0.w-full):not([class*="translate-x-1/2"], [class*="translate-x-full"]) {
    right: max(0px, calc((100% - var(--app-col)) / 2));
  }
  /* D1's cart pill (fixed bottom-4 left-3 right-3) */
  :is(#screen-outlet, #overlay-outlet) [data-screen] .fixed.left-3.right-3 {
    left: calc(max(0px, (100% - var(--app-col)) / 2) + 0.75rem);
    right: calc(max(0px, (100% - var(--app-col)) / 2) + 0.75rem);
  }
  /* B5's dock: fixed with no side of its own */
  :is(#screen-outlet, #overlay-outlet) [data-screen] .fixed[class~="w-[390px]"]:not([class*="left-"], [class*="right-"], [class*="inset-"]) {
    left: max(0px, calc((100% - var(--app-col)) / 2));
  }
  /* frame.css makes w-[390px] 100 %: of the viewport, for a fixed box. Never wider than the column. */
  :is(#screen-outlet, #overlay-outlet) [data-screen] .fixed:is(.w-full, [class~="w-[390px]"]):is(:not([class*="max-w-"]), .max-w-full) {
    max-width: var(--app-col);
  }
  /* 100vw meant the phone's width */
  #screen-outlet [class~="max-w-[calc(100vw-128px)]"] { max-width: calc(var(--app-col) - 128px); }
  #screen-outlet [class~="max-w-[calc(100vw-8.5rem)]"] { max-width: calc(var(--app-col) - 8.5rem); }
  #screen-outlet [class~="max-w-[calc(100vw-196px)]"] { max-width: calc(var(--app-col) - 196px); }
  #screen-outlet [class~="max-w-[calc(100vw-48px)]"] { max-width: calc(var(--app-col) - 48px); }
  /* CP6.bil, CP6.ny and YP4.ny: frame.css leaves the header's middle the screen's width less 232 px, which below 560 px is the
     header's own; in the column it is the column's */
  #screen-outlet :is([data-screen="CP6.bil"], [data-screen="CP6.ny"], [data-screen="YP4.ny"]) [data-purpose="mobile-header"] > div > :nth-child(2) { max-width: calc(var(--app-col) - 232px); }
  /* the body's pills pinned under the header (ride-return.js, r-system.js, live-update.js) and the support sheet keep to the column */
  :is(.ride-return, .live-capsule-container, .live-update-note) {
    left: calc(max(0px, (100% - var(--app-col)) / 2) + 16px);
    right: calc(max(0px, (100% - var(--app-col)) / 2) + 16px);
  }
  .support-chat-sheet { max-width: var(--app-col); }
  /* What a screen draws past the column (a glow, a drawer at rest) is cut at the column's edges, as a phone's edges cut it.
     clip-path clips fixed children too, where overflow cannot, and makes no containing block for them (unlike transform or
     contain). -100vh up and down keeps a fixed header and foot whole on a page that scrolls. The cut follows the root's
     margin box, which a block always stretches to the column's width: a root drawn 390 wide (DP1, D4, JF2, K5: max-width
     390px), centred or not, is cut at the column's edges, not its own, so the bars and drawers kept in the column stay whole */
  #screen-outlet > [data-screen] { clip-path: inset(-100vh 0) margin-box; }
  #screen-outlet > [data-split-slot] > [data-split-scroll] > [data-screen] { clip-path: inset(-100vh 0) margin-box; }
  /* a drawer opens at the column's left edge: at rest (-translate-x-full) it waits beside the column, under the cut, and
     slides in from there. The driver-drawer partial draws its own (not included by any screen today) */
  :is(#screen-outlet, #overlay-outlet) [data-screen] .fixed.left-0:is(.inset-y-0, .top-0.bottom-0, .h-full):not(.right-0, .w-full, .inset-x-0) {
    left: max(0px, calc((100% - var(--app-col)) / 2));
  }
  #screen-outlet [data-partial="driver-drawer"][data-partial] .p-drawer { left: max(0px, calc((100% - var(--app-col)) / 2)); }
  /* The cut makes the screen's root a stacking context, so the body's «Pågående resa» pill and live capsule (z 40) draw
     over all of the screen, its z-50 layers too: they step aside while the screen lays something over itself (a dialog, a
     dialog sheet, a z-40/z-50 scrim, an open drawer). A layer at rest (hidden, inside a hidden wrapper, opacity-0, slid
     out with -translate-x-full) is not up */
  body:has(#screen-outlet :is([role="dialog"], .sheet-track[data-dialog], .fixed.inset-0:is(.z-40, .z-50), .fixed.left-0:is(.inset-y-0, .top-0.bottom-0, .h-full):not(.right-0, .w-full, .inset-x-0, [class*="translate-x-full"])):not([hidden], [hidden] *, .hidden, .opacity-0, .pointer-events-none, [aria-hidden="true"])) :is(.ride-return, .live-capsule-container, .live-update-note) {
    visibility: hidden;
  }
}

@media (min-width: 640px) {
  /* a screen with a live map (its [data-map-slot]) under a page sheet fills the screen; its sheet stays the column's width,
     centred at the bottom. A map drawn on the 390 canvas (B1's states) or a sheet over a drawn picture stays in the column.
     The same DOM as on a phone (sheet.js, map.js and nav.js unchanged), so a fold or a rotation keeps everything
     (tests/unit/layout/map-wide.test.mjs). Not while an overlay is up (B2's menu, Q1's «Byt roll», a call): the overlay is
     the column's, and nav.js has taken the map out of the page for it (parkMap), so the page under it keeps to the column
     too, as every other page does, and opens up again when the overlay goes and the map comes back */
  body:not(:has(#overlay-outlet > [data-overlay])) #screen-outlet:has(> [data-screen] .sheet-track:not([data-dialog], [data-flow])):has(> [data-screen] [data-map-slot]) { max-width: none; box-shadow: none; }
  /* frame.css's max-w-[390px] / max-w-[430px] are 480px !important on the hosts; their w-[390px] is 100 % already */
  body:not(:has(#overlay-outlet > [data-overlay])) #screen-outlet > [data-screen]:has(.sheet-track:not([data-dialog], [data-flow])):has([data-map-slot]) :has(.sheet-track:not([data-dialog], [data-flow])) {
    width: 100%; max-width: none !important;
  }
  /* the sheet's host keeps no room at its foot (C2's, C2.ingen-bil's, C2.nytt-pris's, CF2's and CF2.leverans's pb-8, C8's
     pb-12, CP1's and YP3's pb-28 for their fixed foot): on a phone the full-width sheet or the foot lies over that room, so
     the map stopping there never showed; beside the card the page's black would show under the map, 32 to 113 px. The
     track lies over the host's padding box, so the sheet and its stops stay where they are, and the map runs to the
     screen's foot (under CP1's and YP3's foot too, which stays the card's width) */
  body:not(:has(#overlay-outlet > [data-overlay])) #screen-outlet > [data-screen]:has(.sheet-track:not([data-dialog], [data-flow])):has([data-map-slot]) [data-sheet-host]:not([data-sheet-host="dialog"]) {
    padding-bottom: 0;
  }
  #screen-outlet .sheet-track:not([data-flow]) > :is([data-sheet], .sheet-tail) { width: min(100%, var(--app-col)); align-self: center; }
  /* the header over the map spans the screen as on a phone (its glass or its fade has no edge over the map), and what it
     holds stays in the column: its 16 px become the gutter and 16 px (not the one that holds the map: C1's map-header) */
  body:not(:has(#overlay-outlet > [data-overlay])) #screen-outlet > [data-screen]:has(.sheet-track:not([data-dialog], [data-flow])):has([data-map-slot]) :is(header, [data-purpose="app-topbar"]):not(:has([data-map-slot]), .fixed, .fixed *, .sheet-track *).px-4 {
    padding-inline: calc(max(0px, (100% - var(--app-col)) / 2) + 1rem);
  }
  body:not(:has(#overlay-outlet > [data-overlay])) #screen-outlet > [data-screen]:has(.sheet-track:not([data-dialog], [data-flow])):has([data-map-slot]) :is(header, [data-purpose="app-topbar"]):not(:has([data-map-slot]), .fixed, .fixed *, .sheet-track *, [class^="p-"], [class*=" p-"], [class^="px-"], [class*=" px-"], [class^="pl-"], [class*=" pl-"], [class^="pr-"], [class*=" pr-"]) {
    padding-inline: max(0px, calc((100% - var(--app-col)) / 2));
  }
  body:not(:has(#overlay-outlet > [data-overlay])) #screen-outlet > [data-screen]:has(.sheet-track:not([data-dialog], [data-flow])):has([data-map-slot]) :is(header, [data-purpose="app-topbar"]).absolute.left-0:not(.right-0, .inset-x-0) { right: 0; }
  /* a row with the design's 16 px sides that stands in the map's block (CF4's and YF4's «Navigera», C1's «Stäng» and pills
     in its map-header): its 16 px become the gutter and 16 px */
  body:not(:has(#overlay-outlet > [data-overlay])) #screen-outlet > [data-screen]:has(.sheet-track:not([data-dialog], [data-flow])):has([data-map-slot]) :is([data-sheet-map], [data-purpose="map-header"]) > .px-4:not(.absolute, .fixed) {
    padding-inline: calc(max(0px, (100% - var(--app-col)) / 2) + 1rem);
  }
  /* what the screen sets on its map at a side (a chip under the header, a banner, CA1's recenter) keeps to the column */
  body:not(:has(#overlay-outlet > [data-overlay])) #screen-outlet > [data-screen]:has(.sheet-track:not([data-dialog], [data-flow])):has([data-map-slot]) .absolute:is(.left-3, .inset-x-3):not(.sheet-track *, header *, [data-map-slot] *) {
    left: calc(max(0px, (100% - var(--app-col)) / 2) + 0.75rem);
  }
  body:not(:has(#overlay-outlet > [data-overlay])) #screen-outlet > [data-screen]:has(.sheet-track:not([data-dialog], [data-flow])):has([data-map-slot]) .absolute:is(.right-3, .inset-x-3):not(.sheet-track *, header *, [data-map-slot] *) {
    right: calc(max(0px, (100% - var(--app-col)) / 2) + 0.75rem);
  }
  body:not(:has(#overlay-outlet > [data-overlay])) #screen-outlet > [data-screen]:has(.sheet-track:not([data-dialog], [data-flow])):has([data-map-slot]) .absolute.left-4:not(.sheet-track *, header *, [data-map-slot] *) {
    left: calc(max(0px, (100% - var(--app-col)) / 2) + 1rem);
  }
  body:not(:has(#overlay-outlet > [data-overlay])) #screen-outlet > [data-screen]:has(.sheet-track:not([data-dialog], [data-flow])):has([data-map-slot]) .absolute.right-4:not(.sheet-track *, header *, [data-map-slot] *) {
    right: calc(max(0px, (100% - var(--app-col)) / 2) + 1rem);
  }
  /* CF3's «Navigera» banner, which frame.css stands in the map's flow under the header (relative, 12 px margins) */
  body:not(:has(#overlay-outlet > [data-overlay])) #screen-outlet > [data-screen]:has(.sheet-track:not([data-dialog], [data-flow])):has([data-map-slot]) header[class*="top-0"] ~ [data-sheet-map] > .animate-banner {
    left: auto; right: auto; margin-inline: calc(max(0px, (100% - var(--app-col)) / 2) + 0.75rem);
  }
  /* the screen's menu belongs to the screen: its drawer waits off the screen's left edge and opens there, its scrim dims it
     all (in the column, C7 left the drawer waiting beside it, where the opened screen now shows the map) */
  body:not(:has(#overlay-outlet > [data-overlay])) #screen-outlet > [data-screen]:has(.sheet-track:not([data-dialog], [data-flow])):has([data-map-slot]) .fixed.left-0:is(.inset-y-0, .top-0.bottom-0, .h-full):not(.right-0, .w-full, .inset-x-0) { left: 0; }
  body:not(:has(#overlay-outlet > [data-overlay])) #screen-outlet > [data-screen]:has(.sheet-track:not([data-dialog], [data-flow])):has([data-map-slot]) .fixed.inset-0[data-action] { left: 0; right: 0; }
  /* CF2.missad-forfragan draws a phone's frame from 640 px (sm:): 24 px above and below, 44 px corners. Over the whole
     screen it is the screen */
  body:not(:has(#overlay-outlet > [data-overlay])) #screen-outlet > [data-screen]:has(.sheet-track:not([data-dialog], [data-flow])):has([data-map-slot]) [class~="sm:rounded-[44px]"] { border-radius: 0; }
  body:not(:has(#overlay-outlet > [data-overlay])) #screen-outlet > [data-screen]:has(.sheet-track:not([data-dialog], [data-flow])):has([data-map-slot]) [class~="sm:py-6"] { padding-block: 0; }
  /* a bar fixed at its place in the flow (CP1's and YP3's foot): under the sheet, as wide as it */
  body:not(:has(#overlay-outlet > [data-overlay])) #screen-outlet > [data-screen]:has(.sheet-track:not([data-dialog], [data-flow])):has([data-map-slot]) .fixed.w-full:not([class*="left-"], [class*="right-"], [class*="inset-"]) {
    left: 0; right: 0; margin-inline: auto; max-width: var(--app-col);
  }
}

@media (min-width: 700px) {
  /* Unfolded Galaxy Z Fold (700–884 px), iPad Mini / iPad portrait (744–1024 px), iPad landscape (1024–1366 px), Split View:
     1) map | sheet screens (data-pane="map") dock their sheet as a 356 px column (12 px gap) at 700–839 px before widening
        to 420 px at 840 px;
     2) declared list | detail screen pairs (data-pane="split", js/core/split-pane.js) stand side by side (380 px list column
        + flexible detail column) with independent pane scrollers and pane-contained fixed headers/action bars. */
  :root { --pane-col: 356px; --pane-gap: 12px; --split-list-col: 380px; }
  body:not(:has(#overlay-outlet > [data-overlay])) #screen-outlet > [data-screen][data-pane="map"]:has(.sheet-track:not([data-dialog], [data-flow])):has([data-map-slot]) .sheet-track:not([data-dialog], [data-flow]) {
    left: var(--pane-gap); right: auto; width: var(--pane-col);
  }
  body:not(:has(#overlay-outlet > [data-overlay])) #screen-outlet > [data-screen][data-pane="map"]:has(.sheet-track:not([data-dialog], [data-flow])):has([data-map-slot]) :is(header, [data-purpose="app-topbar"]):not(:has([data-map-slot]), .fixed, .fixed *, .sheet-track *).px-4 {
    padding-inline: calc(var(--pane-gap) + 1rem) calc(100% - var(--pane-gap) - var(--pane-col) + 1rem);
  }
  body:not(:has(#overlay-outlet > [data-overlay])) #screen-outlet > [data-screen][data-pane="map"]:has(.sheet-track:not([data-dialog], [data-flow])):has([data-map-slot]) :is(header, [data-purpose="app-topbar"]):not(:has([data-map-slot]), .fixed, .fixed *, .sheet-track *, [class^="p-"], [class*=" p-"], [class^="px-"], [class*=" px-"], [class^="pl-"], [class*=" pl-"], [class^="pr-"], [class*=" pr-"]) {
    padding-inline: var(--pane-gap) calc(100% - var(--pane-gap) - var(--pane-col));
  }
  body:not(:has(#overlay-outlet > [data-overlay])) #screen-outlet > [data-screen][data-pane="map"]:has(.sheet-track:not([data-dialog], [data-flow])):has([data-map-slot]) :is([data-sheet-map], [data-purpose="map-header"]) > .px-4:not(.absolute, .fixed) {
    padding-inline: calc(var(--pane-gap) + 1rem) calc(100% - var(--pane-gap) - var(--pane-col) + 1rem);
  }
  body:not(:has(#overlay-outlet > [data-overlay])) #screen-outlet > [data-screen][data-pane="map"]:has(.sheet-track:not([data-dialog], [data-flow])):has([data-map-slot]) header[class*="top-0"] ~ [data-sheet-map] > .animate-banner {
    margin-inline: calc(var(--pane-gap) + 0.75rem) calc(100% - var(--pane-gap) - var(--pane-col) + 0.75rem);
  }
  body:not(:has(#overlay-outlet > [data-overlay])) #screen-outlet > [data-screen][data-pane="map"]:has(.sheet-track:not([data-dialog], [data-flow])):has([data-map-slot]) .absolute:is(.left-3, .inset-x-3):not(.sheet-track *, header *, [data-map-slot] *) {
    left: calc(var(--pane-gap) + 0.75rem);
  }
  body:not(:has(#overlay-outlet > [data-overlay])) #screen-outlet > [data-screen][data-pane="map"]:has(.sheet-track:not([data-dialog], [data-flow])):has([data-map-slot]) .absolute:is(.right-3, .inset-x-3):not(.sheet-track *, header *, [data-map-slot] *) {
    right: calc(100% - var(--pane-gap) - var(--pane-col) + 0.75rem);
  }
  body:not(:has(#overlay-outlet > [data-overlay])) #screen-outlet > [data-screen][data-pane="map"]:has(.sheet-track:not([data-dialog], [data-flow])):has([data-map-slot]) .absolute.left-4:not(.sheet-track *, header *, [data-map-slot] *) {
    left: calc(var(--pane-gap) + 1rem);
  }
  body:not(:has(#overlay-outlet > [data-overlay])) #screen-outlet > [data-screen][data-pane="map"]:has(.sheet-track:not([data-dialog], [data-flow])):has([data-map-slot]) .absolute.right-4:not(.sheet-track *, header *, [data-map-slot] *) {
    right: calc(100% - var(--pane-gap) - var(--pane-col) + 1rem);
  }
  body:not(:has(#overlay-outlet > [data-overlay])) #screen-outlet > [data-screen][data-pane="map"]:has(.sheet-track:not([data-dialog], [data-flow])):has([data-map-slot]) .fixed.w-full:not([class*="left-"], [class*="right-"], [class*="inset-"]) {
    left: var(--pane-gap); right: auto; margin-inline: 0; max-width: var(--pane-col);
  }

  /* list | detail split-pane layout (WP-01) */
  #screen-outlet[data-pane="split"]:not([data-split-solo="true"]) {
    display: grid;
    grid-template-columns: var(--split-list-col) minmax(0, 1fr);
    align-items: start;
    max-width: none;
    width: 100%;
    min-height: 100dvh;
    box-shadow: none;
  }
  #screen-outlet[data-pane="split"]:not([data-split-solo="true"]) > [data-split-slot] {
    display: block;
    position: sticky;
    top: 0;
    height: 100dvh;
    min-width: 0;
    overflow: clip;
    transform: translateZ(0);
    background: var(--sys-base);
  }
  #screen-outlet[data-pane="split"]:not([data-split-solo="true"]) > [data-split-slot="list"] {
    z-index: 2;
    border-inline-end: 1px solid var(--sys-hairline);
  }
  #screen-outlet[data-pane="split"]:not([data-split-solo="true"]) > [data-split-slot="detail"] {
    z-index: 1;
  }
  #screen-outlet[data-pane="split"]:not([data-split-solo="true"]) > [data-split-slot] > [data-split-scroll] {
    display: block;
    height: 100%;
    min-width: 0;
    overflow-y: auto;
    overflow-x: clip;
    overscroll-behavior-y: contain;
  }
  #screen-outlet[data-pane="split"]:not([data-split-solo="true"]) > [data-split-slot] > [data-split-scroll] > [data-screen] {
    clip-path: none;
  }
  /* Fixed bottom action bars, headers and drawers inside a split slot stay contained to their own pane */
  #screen-outlet[data-pane="split"]:not([data-split-solo="true"]) [data-split-slot] [data-screen] .fixed:is(.inset-0, .inset-x-0, .left-0.right-0, .left-0.w-full, .left-0[class~="w-[390px]"]):not([class*="translate-x-1/2"], [class*="translate-x-full"]) {
    left: 0;
  }
  #screen-outlet[data-pane="split"]:not([data-split-solo="true"]) [data-split-slot] [data-screen] .fixed:is(.inset-0, .inset-x-0, .left-0.right-0, .right-0.w-full):not([class*="translate-x-1/2"], [class*="translate-x-full"]) {
    right: 0;
  }
  #screen-outlet[data-pane="split"]:not([data-split-solo="true"]) [data-split-slot] [data-screen] .fixed.left-3.right-3 {
    left: 0.75rem;
    right: 0.75rem;
  }
  #screen-outlet[data-pane="split"]:not([data-split-solo="true"]) [data-split-slot] [data-screen] .fixed[class~="w-[390px]"]:not([class*="left-"], [class*="right-"], [class*="inset-"]) {
    left: 0;
  }
  #screen-outlet[data-pane="split"]:not([data-split-solo="true"]) [data-split-slot] [data-screen] .fixed:is(.w-full, [class~="w-[390px]"]):is(:not([class*="max-w-"]), .max-w-full) {
    max-width: 100%;
  }
  #screen-outlet[data-pane="split"]:not([data-split-solo="true"]) [data-split-slot] [data-screen] .fixed.left-0:is(.inset-y-0, .top-0.bottom-0, .h-full):not(.right-0, .w-full, .inset-x-0) {
    left: 0;
  }
  #screen-outlet[data-pane="split"][data-split-focus="detail"]:not([data-split-solo="true"]) > [data-split-slot="list"] [data-cart-bar] {
    display: none !important;
  }
  #screen-outlet[data-pane="split"]:not([data-split-solo="true"]) > [data-split-slot="list"] [class~="max-w-[calc(100vw-128px)]"] { max-width: calc(var(--split-list-col) - 128px); }
  #screen-outlet[data-pane="split"]:not([data-split-solo="true"]) > [data-split-slot="list"] [class~="max-w-[calc(100vw-8.5rem)]"] { max-width: calc(var(--split-list-col) - 8.5rem); }
  #screen-outlet[data-pane="split"]:not([data-split-solo="true"]) > [data-split-slot="list"] [class~="max-w-[calc(100vw-196px)]"] { max-width: calc(var(--split-list-col) - 196px); }
  #screen-outlet[data-pane="split"]:not([data-split-solo="true"]) > [data-split-slot="list"] [class~="max-w-[calc(100vw-48px)]"] { max-width: calc(var(--split-list-col) - 48px); }
  #screen-outlet[data-pane="split"]:not([data-split-solo="true"]) > [data-split-slot="detail"] [class~="max-w-[calc(100vw-128px)]"] { max-width: calc(100% - 128px); }
  #screen-outlet[data-pane="split"]:not([data-split-solo="true"]) > [data-split-slot="detail"] [class~="max-w-[calc(100vw-8.5rem)]"] { max-width: calc(100% - 8.5rem); }
  #screen-outlet[data-pane="split"]:not([data-split-solo="true"]) > [data-split-slot="detail"] [class~="max-w-[calc(100vw-196px)]"] { max-width: calc(100% - 196px); }
  #screen-outlet[data-pane="split"]:not([data-split-solo="true"]) > [data-split-slot="detail"] [class~="max-w-[calc(100vw-48px)]"] { max-width: calc(100% - 48px); }
  body:has(#screen-outlet[data-pane="split"]:not([data-split-solo="true"])) :is(.ride-return, .live-capsule-container, .live-update-note) {
    left: 16px;
    right: calc(100% - var(--split-list-col) + 16px);
  }
  /* Active list row highlight and ambient empty detail surface (token-only, light & dark) */
  #screen-outlet[data-pane="split"]:not([data-split-solo="true"]) > [data-split-slot="list"] [data-item][data-split-selected="true"] {
    box-shadow: inset 0 0 0 2px var(--sys-accent);
    background-color: color-mix(in srgb, var(--sys-accent) 12%, var(--sys-raised));
  }
  #screen-outlet[data-pane="split"]:not([data-split-solo="true"]) [data-split-empty] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
    padding: 32px;
    box-sizing: border-box;
    background:
      radial-gradient(60% 50% at 50% 42%, color-mix(in srgb, var(--sys-accent) 12%, transparent), transparent 70%),
      var(--sys-base);
  }
  /* The welcome (split-pane.js's fillEmptyFace): the section's art as an app icon and its name, open on the canvas, no
     card and no bars (a grey card with bars read as «loading» on the owner's iPad, 2026-11-13) */
  #screen-outlet[data-pane="split"]:not([data-split-solo="true"]) .split-pane__empty-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    width: min(100%, 360px);
    text-align: center;
  }
  #screen-outlet[data-pane="split"]:not([data-split-solo="true"]) .split-pane__empty-art {
    display: block;
    box-sizing: border-box;
    overflow: hidden;
    width: 96px;
    height: 96px;
    border-radius: 22.5%;
    background: var(--sys-raised);
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.6), inset 0 0 0 1px var(--sys-specular);
  }
  :is(html[data-theme="light"], html[data-apple-theme="light"]) #screen-outlet[data-pane="split"]:not([data-split-solo="true"]) .split-pane__empty-art {
    box-shadow: 0 16px 36px -14px rgba(0, 0, 0, 0.22), inset 0 0 0 1px rgba(0, 0, 0, 0.04);
  }
  #screen-outlet[data-pane="split"]:not([data-split-solo="true"]) .split-pane__empty-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
  }
  #screen-outlet[data-pane="split"]:not([data-split-solo="true"]) .split-pane__empty-art[data-brand] { padding: 12px; }
  #screen-outlet[data-pane="split"]:not([data-split-solo="true"]) .split-pane__empty-art[data-brand] .split-pane__empty-img { object-fit: contain; }
  #screen-outlet[data-pane="split"]:not([data-split-solo="true"]) .split-pane__empty-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.375rem;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--sys-label);
    overflow-wrap: anywhere;
    text-wrap: balance;
  }
  #screen-outlet[data-pane="split"]:not([data-split-solo="true"]) .split-pane__empty-title:empty { display: none; }
  html[lang="ar"] #screen-outlet[data-pane="split"]:not([data-split-solo="true"]) .split-pane__empty-title { font-family: var(--font-arabic); }
}

@media (min-width: 768px) {
  /* Y11 draws a phone frame from md (844 px tall, rounded, ringed, padded); frame.css's Fit block matches h-[844px] only */
  #screen-outlet [data-screen="Y11"] :is([class~="md:h-[844px]"], [class~="md:min-h-[844px]"]) { height: auto; min-height: 100dvh; border-radius: 0; box-shadow: none; }
  #screen-outlet > [data-screen="Y11"] > div { padding: 0; }
}

@media (min-width: 840px) {
  /* Two panes (a Fold opened, an iPad; Wave 10): a map screen that opens up from 640 px keeps its map over the whole screen
     and docks its sheet as a 420 px column at the leading edge, 16 px in, the way a tablet's maps do; the sheet keeps its
     stops (peek, rest, open), now in its column. What the screen sets in its column on a phone (the header's words, the
     chips at its sides, CF3's banner, CP1's and YP3's foot) lines up with the sheet's column instead of the middle.
     frame.js marks the screen data-pane="map" by what it holds (a live map under a page sheet), never by the width, so a
     fold or a rotation lays the same DOM out again (tests/unit/layout/two-pane.test.mjs) */
  :root { --pane-col: 420px; --pane-gap: 16px; }
  body:not(:has(#overlay-outlet > [data-overlay])) #screen-outlet > [data-screen][data-pane="map"]:has(.sheet-track:not([data-dialog], [data-flow])):has([data-map-slot]) .sheet-track:not([data-dialog], [data-flow]) {
    left: var(--pane-gap); right: auto; width: var(--pane-col);
  }
  body:not(:has(#overlay-outlet > [data-overlay])) #screen-outlet > [data-screen][data-pane="map"]:has(.sheet-track:not([data-dialog], [data-flow])):has([data-map-slot]) :is(header, [data-purpose="app-topbar"]):not(:has([data-map-slot]), .fixed, .fixed *, .sheet-track *).px-4 {
    padding-inline: calc(var(--pane-gap) + 1rem) calc(100% - var(--pane-gap) - var(--pane-col) + 1rem);
  }
  body:not(:has(#overlay-outlet > [data-overlay])) #screen-outlet > [data-screen][data-pane="map"]:has(.sheet-track:not([data-dialog], [data-flow])):has([data-map-slot]) :is(header, [data-purpose="app-topbar"]):not(:has([data-map-slot]), .fixed, .fixed *, .sheet-track *, [class^="p-"], [class*=" p-"], [class^="px-"], [class*=" px-"], [class^="pl-"], [class*=" pl-"], [class^="pr-"], [class*=" pr-"]) {
    padding-inline: var(--pane-gap) calc(100% - var(--pane-gap) - var(--pane-col));
  }
  body:not(:has(#overlay-outlet > [data-overlay])) #screen-outlet > [data-screen][data-pane="map"]:has(.sheet-track:not([data-dialog], [data-flow])):has([data-map-slot]) :is([data-sheet-map], [data-purpose="map-header"]) > .px-4:not(.absolute, .fixed) {
    padding-inline: calc(var(--pane-gap) + 1rem) calc(100% - var(--pane-gap) - var(--pane-col) + 1rem);
  }
  body:not(:has(#overlay-outlet > [data-overlay])) #screen-outlet > [data-screen][data-pane="map"]:has(.sheet-track:not([data-dialog], [data-flow])):has([data-map-slot]) header[class*="top-0"] ~ [data-sheet-map] > .animate-banner {
    margin-inline: calc(var(--pane-gap) + 0.75rem) calc(100% - var(--pane-gap) - var(--pane-col) + 0.75rem);
  }
  body:not(:has(#overlay-outlet > [data-overlay])) #screen-outlet > [data-screen][data-pane="map"]:has(.sheet-track:not([data-dialog], [data-flow])):has([data-map-slot]) .absolute:is(.left-3, .inset-x-3):not(.sheet-track *, header *, [data-map-slot] *) {
    left: calc(var(--pane-gap) + 0.75rem);
  }
  body:not(:has(#overlay-outlet > [data-overlay])) #screen-outlet > [data-screen][data-pane="map"]:has(.sheet-track:not([data-dialog], [data-flow])):has([data-map-slot]) .absolute:is(.right-3, .inset-x-3):not(.sheet-track *, header *, [data-map-slot] *) {
    right: calc(100% - var(--pane-gap) - var(--pane-col) + 0.75rem);
  }
  body:not(:has(#overlay-outlet > [data-overlay])) #screen-outlet > [data-screen][data-pane="map"]:has(.sheet-track:not([data-dialog], [data-flow])):has([data-map-slot]) .absolute.left-4:not(.sheet-track *, header *, [data-map-slot] *) {
    left: calc(var(--pane-gap) + 1rem);
  }
  body:not(:has(#overlay-outlet > [data-overlay])) #screen-outlet > [data-screen][data-pane="map"]:has(.sheet-track:not([data-dialog], [data-flow])):has([data-map-slot]) .absolute.right-4:not(.sheet-track *, header *, [data-map-slot] *) {
    right: calc(100% - var(--pane-gap) - var(--pane-col) + 1rem);
  }
  body:not(:has(#overlay-outlet > [data-overlay])) #screen-outlet > [data-screen][data-pane="map"]:has(.sheet-track:not([data-dialog], [data-flow])):has([data-map-slot]) .fixed.w-full:not([class*="left-"], [class*="right-"], [class*="inset-"]) {
    left: var(--pane-gap); right: auto; margin-inline: 0; max-width: var(--pane-col);
  }
}