/* css/tablet.css: the app on a tablet, an iPad first (the owner, 2026-11-10: «التطبيق يقلب في العرض فيصبح الشكل سيئ جدا …
   تظهر خطوط خلفة وشاشة تضمين … اجعل الريسبونص جميل … ثم سخره للايباد»). Loaded last of the app's sheets (index.html).

   WHAT HE SAW: from 560 px the frame lays the app out as a computer's: one 480 px phone column in the middle (frame.css), a
   violet hairline round it (its box-shadow) and a violet and blue glow on the page beside it, and what a screen draws past
   the column cut at its edges (responsive.css's clip-path). On an iPhone turned sideways (956 × 440) and on every iPad that
   column is «the lines behind» (the ring) and «the embedded screen» (the phone set in a glowing page), with the glass header
   cut at the column's edges. design-ui/00-DESIGN-SYSTEM/stitch-build/tablet-fit.mjs measures it (ring, glow, column, seam,
   edge) and what follows from it (drawers that open in the column, a scrim that dims the column only, stretched sheets,
   controls under a sideways phone's island).

   WHAT A TOUCH SCREEN GETS INSTEAD, (any-pointer: coarse): an iPad, an Android tablet, a Fold opened, and a phone on its side
   (a phone turns, the app too: EAA-07, WCAG 2.2 SC 1.3.4; its island is then at a side, 62 px on the owner's Pro Max, 47 on a
   390 px iPhone, and its home bar 21 px below). A computer (a mouse, a trackpad) keeps the phone column on the violet page,
   and a phone held upright (under 560 px) is not touched (tablet-fit.mjs TABLET_FIT_AB, the phone gate, at 440 × 956 and
   390 × 844).
   From 560 px (an iPad's Split View, a small phone sideways):
   - one surface from edge to edge, no ring and no glow: a page and its phone canvas (the design's full-height wrapper with
     its background, its glows and its blurred blobs) span the whole screen, as they span a phone, and their content keeps
     to the column (--app-col: 480 px, 640 px from 700 px) by the canvas's side padding; the design's phone frame round the
     canvas (border-x, shadow-2xl), which frame.css already takes away below 560 px, goes; the glass header and bar the
     frame draws (css/chrome.css) reach the screen's edges, as they do on a phone;
   - the menu and every drawer at the screen's own edge (its reading start), its scrim over the whole screen; a full-screen
     layer (a scrim, a background) over the whole screen.
   From 700 px (every iPad, a Fold opened, a phone on its side: 844 and 956 px):
   - the content in a readable column of 640 px (--app-col), every fixed bar and dock in it as before; a detail opened on
     its own (a restaurant's or a salon's page from a link) in that column too, not stretched over the screen;
   - a picker (the languages, the business switcher …) and the partner's sheets as a centred form sheet, as an iPad shows them;
   - list | detail pairs side by side (js/core/split-pane.js, css/responsive.css), clear of a sideways phone's island.
   At every width from 700 px, a computer's too: the map screens dock their sheet at the reading start (at the right in
   Arabic), the body's pills follow the list's pane, and both keep clear of a sideways phone's island.
   Each design keeps its classes and its look (rule 5): only the frame round it changes. */

@media (min-width: 560px) and (any-pointer: coarse) {
  /* one surface: no glow round the column and no ring on it. The body paints nothing, so the screen's backdrop below (z-index
     -1, on the root's stacking layer) is not covered by it */
  html { background: var(--sys-base); }
  body { background: transparent; overflow-x: clip; }
  #screen-outlet { box-shadow: none; max-width: none; }

  /* the page spans the screen: the design's root (the wrapper js/stitch/stitch-runtime.js mounts inside [data-screen], with the
     template's wrapperClasses) and each phone canvas in it (a full-height or full-width wrapper: frame.css makes its 390 px
     canvas 100 % already) paint over the whole width, and their content keeps to the column by the canvas's side padding
     (the column and the design's 16 px; 100 % is the screen); a header, a footer or a nav beside a canvas too. A root with no
     canvas of its own (DP1) is its canvas. A detail on its own (a restaurant's or a salon's page from a link) is a page */
  :root :is(#screen-outlet > [data-screen]:not([data-pane]), #screen-outlet[data-split-solo="true"] > [data-screen]) > div > :is(main, div, section, article):not(.absolute, .fixed, .sticky, [hidden], [aria-hidden="true"], .pointer-events-none):is(.w-full, .min-h-screen, .h-screen, .app-viewport, .mobile-screen, .mobile-frame, .nordic-canvas, .phone-frame, .device-frame, .max-w-md, .max-w-sm, [class*="max-w-[3"], [class*="max-w-[4"]),
  :root :is(#screen-outlet > [data-screen]:not([data-pane]), #screen-outlet[data-split-solo="true"] > [data-screen]) > div:has(> :is(main, div, section, article):not(.absolute, .fixed, .sticky, [hidden], [aria-hidden="true"], .pointer-events-none):is(.w-full, .min-h-screen, .h-screen, .app-viewport, .mobile-screen, .mobile-frame, .nordic-canvas, .phone-frame, .device-frame, .max-w-md, .max-w-sm, [class*="max-w-[3"], [class*="max-w-[4"])) > :is(header, footer, nav):not(.absolute, .fixed, [hidden]),
  :root :is(#screen-outlet > [data-screen]:not([data-pane]), #screen-outlet[data-split-solo="true"] > [data-screen]) > div:not(:has(> :is(main, div, section, article):not(.absolute, .fixed, .sticky, [hidden], [aria-hidden="true"], .pointer-events-none):is(.w-full, .min-h-screen, .h-screen, .app-viewport, .mobile-screen, .mobile-frame, .nordic-canvas, .phone-frame, .device-frame, .max-w-md, .max-w-sm, [class*="max-w-[3"], [class*="max-w-[4"]))) {
    box-sizing: border-box !important;
    padding-inline: max(1rem, calc((100% - var(--app-col)) / 2 + 1rem)) !important;
    border-inline-width: 0 !important;
    box-shadow: none !important;
  }
  /* a card drawn 85 vw wide (a carousel's: DP4, DA1, CA2, B5) is 85 % of the column, not of the screen */
  #screen-outlet [data-screen] [class~="w-[85vw]"] { width: calc(var(--app-col) * 0.85); }
  #screen-outlet [data-screen] [class~="w-[82vw]"] { width: calc(var(--app-col) * 0.82); }

  /* the screen's own background behind the whole screen as well, where a page is shorter than a screen or bounces: a fixed
     layer that takes the root's background as it is computed (its colour, its gradient, the light look's). An overlay's
     root (the menu's scrim, a sheet's) dims the whole screen the same way */
  #screen-outlet > [data-screen]:not([data-pane])::before,
  #screen-outlet[data-split-solo="true"] > [data-screen]::before,
  #overlay-outlet > [data-overlay] > [data-screen]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: inherit;
  }
  /* nothing a screen draws is cut at the column's edges any more: the glass header and bar run to the screen's edges, and
     the drawers wait off the screen's own edge (below) */
  #screen-outlet > [data-screen],
  #screen-outlet > [data-split-slot] > [data-split-scroll] > [data-screen] { clip-path: none; }

  /* the menu is a drawer of the whole screen: it opens at the screen's edge, its scrim over all of it */
  #overlay-outlet > [data-overlay][data-present="drawer"] { max-width: none; }

  /* a full-screen layer (a scrim, a dialog's backdrop, a background glow) covers the screen, not the column */
  :root :is(#screen-outlet, #overlay-outlet) [data-screen] .fixed.fixed.inset-0:not([class*="translate-x-1/2"], [class*="translate-x-full"]) { left: 0; right: 0; }

  /* a drawer waits off the screen's edge and opens there (from right to left its class is right-0: it does already) */
  :root :is(#screen-outlet, #overlay-outlet) [data-screen] .fixed.fixed.left-0:is(.inset-y-0, .top-0.bottom-0, .h-full):not(.right-0, .w-full, .inset-x-0) { left: 0; }
  :root #screen-outlet [data-partial="driver-drawer"][data-partial] .p-drawer { left: 0; }

  /* a drawer at a sideways phone's island side grows by the island and keeps its content clear of it, its strip beside it
     moved as far (an iPad has no side inset: nothing changes there). The menu (B2, 320 px) and the partner's drawer
     (core/partner-drawer.js, 336 px; at the right from right to left, css/i18n/rtl.css) */
  html:not([dir="rtl"]) #overlay-outlet .b2-drawer { width: calc(320px + env(safe-area-inset-left, 0px)); padding-inline-start: env(safe-area-inset-left, 0px); }
  html[dir="rtl"] #overlay-outlet .b2-drawer { width: calc(320px + env(safe-area-inset-right, 0px)); padding-inline-start: env(safe-area-inset-right, 0px); }
  html:not([dir="rtl"]) #overlay-outlet .b2-dismiss { inset-inline-start: calc(320px + env(safe-area-inset-left, 0px)); }
  html[dir="rtl"] #overlay-outlet .b2-dismiss { inset-inline-start: calc(320px + env(safe-area-inset-right, 0px)); }
  html:not([dir="rtl"]) .sys-pdrawer-host .sys-pdrawer { width: calc(336px + env(safe-area-inset-left, 0px)); padding-inline-start: env(safe-area-inset-left, 0px); }
  html[dir="rtl"] .sys-pdrawer-host .sys-pdrawer { width: calc(336px + env(safe-area-inset-right, 0px)); padding-inline-start: env(safe-area-inset-right, 0px); }

  /* a business page's picture (E2's salon, D2's restaurant): on a phone a band from edge to edge, in the column a picture
     with round corners, as the cards under it have; a list's cards keep theirs as drawn */
  #screen-outlet > [data-screen]:is([data-screen^="E2"], [data-screen^="D2"]) :is(section[data-part="hero"], [data-part="hero-stage"]) { border-radius: 24px; overflow: hidden; }
}

@media (min-width: 700px) and (any-pointer: coarse) {
  :root { --app-col: 640px; }

  /* a detail opened on its own (no list beside it: a link, the home's card) is a page (above), not css/split-sectors.css's
     960 px canvas, which stretched a phone's cards and buttons over an iPad (D2: 788 px cards) */
  :root body:not(:has(#overlay-outlet > [data-overlay])) #screen-outlet:not(:has(> :nth-child(2):not(:empty))):has(> [data-screen][data-pane="split"][data-split-role="detail"]),
  :root #screen-outlet[data-split-solo="true"] {
    max-width: none;
  }

  /* list | detail side by side, clear of a sideways phone's island (an iPad has no side inset) */
  #screen-outlet[data-pane="split"]:not([data-split-solo="true"]) { box-sizing: border-box; }
  html:not([dir="rtl"]) #screen-outlet[data-pane="split"]:not([data-split-solo="true"]) { padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px); }
  html[dir="rtl"] #screen-outlet[data-pane="split"]:not([data-split-solo="true"]) { padding-inline: env(safe-area-inset-right, 0px) env(safe-area-inset-left, 0px); }

  /* a list beside its detail: the detail's pane is a container, and where it is wider than the column (an iPad on its side:
     800 px beside the 380 px list) the detail's content keeps to the column in it, as a page's does (the last block); in a
     narrow pane (an iPad upright: 440 px) the design keeps its own sides */
  #screen-outlet[data-pane="split"]:not([data-split-solo="true"]) > [data-split-slot="detail"] { container-type: inline-size; }

  /* a picker (the languages, the business switcher, a place) and the support chat: a centred form sheet, all its corners round */
  html .support-chat-sheet {
    top: 50%;
    bottom: auto;
    translate: 0 -50%;
    height: min(84dvh, 780px);
    max-width: min(560px, calc(100% - 48px));
    border-radius: 24px;
    border: 1px solid var(--glass-l3-border, var(--sys-edge));
    padding-bottom: 0;
  }
  html .support-chat-sheet.is-short { height: auto; max-height: min(84dvh, 780px); }
  html[data-apple-theme="light"] .support-chat-sheet { border-color: var(--sys-edge); }
  /* the partner's payments, account and admin sheets (core/partner-drawer.js): the same */
  html .sys-inapp-sheet-host .sys-inapp-sheet-backdrop { align-items: center; padding: 24px; }
  html .sys-inapp-sheet-host .sys-inapp-sheet {
    max-width: 560px;
    max-height: min(84dvh, 820px);
    border-radius: 26px;
    border: 0.5px solid var(--pd-panel-edge);
  }
}

/* the map screens on a tablet, in Frakt's spirit (the owner, 2026-11-13: «قسم الشحن في الاي بياد رائع … حاول اكمال التطوير على
   الايباد»): the map is the canvas from the screen's top edge to its foot, and the booking a panel that floats on it.
   - The panel (the page sheet's track, docked at the side from 840 px, a centred card below) stops 16 px above the screen's
     foot and the home bar, its foot corners round, as an iPad's Maps floats its panel: it no longer runs off the screen's
     edge. Its stops (peek, rest, open) are the track's own, measured by sheet.js from the track as it is.
   - C2 «Boka taxi»: its map block is pulled up under its header by the phone's 64 px (css/frame.css), which on a tablet's
     shorter status bar left a 27 px band of the page's black over the map. The block no longer places the map here, so the
     map fills the screen from its top whatever the header's height, as CF3's and CF4's do */
@media (min-width: 700px) and (any-pointer: coarse) {
  body:not(:has(#overlay-outlet > [data-overlay])) #screen-outlet > [data-screen]:has(.sheet-track:not([data-dialog], [data-flow])):has([data-map-slot]) .sheet-track:not([data-dialog], [data-flow]) {
    bottom: calc(var(--pane-gap, 16px) + var(--safe-bottom, 0px));
    border-radius: 0 0 28px 28px;
  }
  body:not(:has(#overlay-outlet > [data-overlay])) #screen-outlet > [data-screen^="C2"]:has(.sheet-track:not([data-dialog], [data-flow])):has([data-map-slot]) header.relative ~ section:not(.absolute):has(> [data-map-slot]) {
    position: static;
  }
}

/* A phone on its side is short (390 px on a 390 px iPhone, 440 on the Pro Max): C3's states draw a 370 px map above their
   sheet, which left the sheet 44 px at rest, and the sheet's foot («Avbryt resa», css/frame.css's sticky foot) stood over its
   title. The map gives way to the sheet there, as css/a11y-forms.css does CF1's (EAA-07's guards); an iPad is taller */
@media (min-width: 560px) and (any-pointer: coarse) and (max-height: 540px) {
  #screen-outlet [data-screen^="C3"] [data-sheet-gap][class~="h-[370px]"] { height: clamp(96px, calc(100dvh - 300px), 370px); }
}

/* Every screen from 700 px, a computer's too: what the two panes need in Arabic and round a sideways phone's island */
@media (min-width: 700px) {
  :root { --pane-gap: max(12px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); }

  /* the map screens: the sheet docks at the reading start, in Arabic at the right (its header's words already follow it,
     padding-inline), clear of a sideways phone's island (--pane-gap above). responsive.css's 700 and 840 px rules read the
     same tokens, so one rule here serves both */
  html[dir="rtl"] 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: auto; right: var(--pane-gap);
  }
  html[dir="rtl"] 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(var(--pane-gap) + 0.75rem);
  }
  html[dir="rtl"] 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(100% - var(--pane-gap) - var(--pane-col) + 0.75rem);
  }
  html[dir="rtl"] 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(var(--pane-gap) + 1rem);
  }
  html[dir="rtl"] 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(100% - var(--pane-gap) - var(--pane-col) + 1rem);
  }
  html[dir="rtl"] 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: auto; right: var(--pane-gap);
  }

  /* list | detail: the body's pills keep to the list's pane, which from right to left is at the right */
  html[dir="rtl"] body:has(#screen-outlet[data-pane="split"]:not([data-split-solo="true"])) :is(.ride-return, .live-capsule-container, .live-update-note) {
    left: calc(100% - var(--split-list-col) + 16px);
    right: 16px;
  }
}
@media (min-width: 840px) {
  :root { --pane-gap: max(16px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); }
}

/* the frame's glass bar at the foot (css/chrome.css, a layer whose !important outranks every sheet outside it): a fixed bar
   keeps its button in the column, its glass runs to the screen's edges as the header's does */
@layer chrome {
  @media (min-width: 560px) and (any-pointer: coarse) {
    html #screen-outlet [data-chrome="actionbar"].fixed::before { left: calc(50% - 50vw) !important; right: calc(50% - 50vw) !important; }

    /* the iPhone's glass header in every section (the owner, 2026-11-13: «الهيدر اجعله شكل ابل الزجاجي مثل الايفون … في كل
       الاقسام»). A screen whose top bar is not the frame's header (data-chrome="header": Frakt's Y1 and Y3, Flytt's G1 with
       their own sys-w15-bar; the sticky bands of C6, Y6, CF12, I4, M9 and the glass-nav of CP1 and YP3) drew a band of its
       own, 80 to 90 % opaque with a hard line under it: over the wide map of a tablet a dark strip across the whole screen.
       Here it gets the frame's material instead: no band, the page's colour at 64 % under a 22 px blur that runs to the
       screen's edges and feathers out over 18 px at its foot, and its icon controls the 44 px glass circles. The phone keeps
       the bar as drawn. A bar hidden from a reader (F4's and I4's under their dialog) stays as it is */
    html #screen-outlet [data-screen] header:is(.sys-w15-bar, .sticky, .glass-nav, .glass-header):not([data-chrome], [aria-hidden="true"], .sheet-track *) {
      background: transparent !important;
      border-bottom-color: transparent !important;
      box-shadow: none !important;
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
      isolation: isolate !important;
    }
    html #screen-outlet [data-screen] header:is(.sys-w15-bar, .sticky, .glass-nav, .glass-header):not([data-chrome], [aria-hidden="true"], .sheet-track *)::before {
      content: '' !important;
      position: absolute !important;
      z-index: -1 !important;
      top: -24px !important;
      bottom: -18px !important;
      left: calc(50% - 50vw) !important;
      right: calc(50% - 50vw) !important;
      pointer-events: none !important;
      background: color-mix(in srgb, var(--sys-base) 64%, transparent) !important;
      -webkit-backdrop-filter: blur(22px) saturate(180%) !important;
      backdrop-filter: blur(22px) saturate(180%) !important;
      -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 18px), transparent 100%) !important;
      mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 18px), transparent 100%) !important;
      transform: none !important;
    }
    html #screen-outlet [data-screen] header:is(.sys-w15-bar, .sticky, .glass-nav, .glass-header):not([data-chrome], [aria-hidden="true"], .sheet-track *) :is(button, a)[data-action][aria-label]:has(> :is(.material-symbols-outlined, svg):only-child):not([hidden], .hidden) {
      display: inline-flex !important;
      width: 44px !important;
      height: 44px !important;
      min-width: 44px !important;
      padding: 0 !important;
      flex-shrink: 0 !important;
      border-radius: 999px !important;
      align-items: center !important;
      justify-content: center !important;
      color: var(--sys-label) !important;
      background: color-mix(in srgb, var(--sys-raised) 62%, transparent) !important;
      -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
      backdrop-filter: blur(16px) saturate(160%) !important;
      border: 1px solid var(--sys-hairline) !important;
      box-shadow: inset 0 1px 0 var(--sys-film), 0 4px 16px var(--sys-shadow) !important;
    }
    /* the sign-in on a tablet (the owner, 2026-11-13: «صفحة تسجيل الدخول على الاي باد سيئة يمكن ان تكون اجمل»): A3 «Logga
       in», its code (A3.kod, A8.kod), the SMS code (A6), BankID (A5), «Skapa konto» (A9) and «Innan vi börjar» (A7) were the phone's column stretched to
       608 px, the button at the foot of a 1180 px screen and the rest empty. Here they are what an iPad shows for a sign-in: a
       form sheet, 540 px, in the middle of the screen over the screen's own aurora, its glass on ::before (a backdrop-filter on
       the card itself would make it the box of A5's full-screen QR code). The header's back and language stay in the card, as
       its first row, without the band a page's header draws under the status bar */
    #screen-outlet > [data-screen="A3"],
    #screen-outlet > :is([data-screen="A3.kod"], [data-screen="A8.kod"], [data-screen^="A6"], [data-screen^="A5"], [data-screen^="A9"], [data-screen="A7"]) > div {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      box-sizing: border-box !important;
      min-height: 100dvh !important;
      padding: calc(var(--safe-top, 0px) + 32px) 24px calc(var(--safe-bottom, 0px) + 32px) !important;
    }
    #screen-outlet > [data-screen="A3"] > div,
    #screen-outlet > :is([data-screen="A3.kod"], [data-screen="A8.kod"], [data-screen^="A6"], [data-screen^="A5"], [data-screen="A7"]) > div > main,
    #screen-outlet > [data-screen^="A9"] > div > div[class~="max-w-[390px]"] {
      position: relative !important;
      isolation: isolate !important;
      box-sizing: border-box !important;
      width: min(540px, 100%) !important;
      max-width: none !important;
      min-height: 0 !important;
      height: auto !important;
      flex: 0 0 auto !important;
      justify-content: flex-start !important;
      margin: 0 auto !important;
      padding: 20px 36px 32px !important;
      border-radius: 32px !important;
      box-shadow: 0 40px 100px -32px rgb(0 0 0 / 0.55) !important;
    }
    :is(#screen-outlet > [data-screen="A3"] > div,
    #screen-outlet > :is([data-screen="A3.kod"], [data-screen="A8.kod"], [data-screen^="A6"], [data-screen^="A5"], [data-screen="A7"]) > div > main,
    #screen-outlet > [data-screen^="A9"] > div > div[class~="max-w-[390px]"])::before {
      content: '' !important;
      position: absolute !important;
      inset: 0 !important;
      z-index: -1 !important;
      pointer-events: none !important;
      border-radius: inherit !important;
      background: color-mix(in srgb, var(--sys-raised) 52%, transparent) !important;
      -webkit-backdrop-filter: blur(28px) saturate(170%) !important;
      backdrop-filter: blur(28px) saturate(170%) !important;
      border: 1px solid var(--sys-hairline) !important;
      box-shadow: inset 0 1px 0 var(--sys-film) !important;
    }
    :is(#screen-outlet > [data-screen="A3"] > div,
    #screen-outlet > :is([data-screen="A3.kod"], [data-screen="A8.kod"], [data-screen^="A6"], [data-screen^="A5"], [data-screen="A7"]) > div > main,
    #screen-outlet > [data-screen^="A9"] > div > div[class~="max-w-[390px]"]) [data-chrome="header"] {
      position: relative !important;
      top: auto !important;
      padding-top: 0 !important;
      min-height: 56px !important;
      margin-top: 0 !important;
    }
    :is(#screen-outlet > [data-screen="A3"] > div,
    #screen-outlet > :is([data-screen="A3.kod"], [data-screen="A8.kod"], [data-screen^="A6"], [data-screen^="A5"], [data-screen="A7"]) > div > main,
    #screen-outlet > [data-screen^="A9"] > div > div[class~="max-w-[390px]"]) [data-chrome="header"]::before { content: none !important; }
    /* the card's foot (A3.kod's and A8.kod's «Skicka kod») stands in the card, after its field, not as the page's sticky glass
       bar across the screen */
    :is(#screen-outlet > [data-screen="A3"] > div,
    #screen-outlet > :is([data-screen="A3.kod"], [data-screen="A8.kod"], [data-screen^="A6"], [data-screen^="A5"], [data-screen="A7"]) > div > main,
    #screen-outlet > [data-screen^="A9"] > div > div[class~="max-w-[390px]"]) [data-chrome="actionbar"] { position: relative !important; bottom: auto !important; margin-top: 24px !important; }
    :is(#screen-outlet > [data-screen="A3"] > div,
    #screen-outlet > :is([data-screen="A3.kod"], [data-screen="A8.kod"], [data-screen^="A6"], [data-screen^="A5"], [data-screen="A7"]) > div > main,
    #screen-outlet > [data-screen^="A9"] > div > div[class~="max-w-[390px]"]) [data-chrome="actionbar"]::before { content: none !important; }
    /* the start (A2) on a tablet: the phone spread its parts over the screen's height (the header at the top, the buttons at
       the foot, 300 px of nothing between them on an iPad upright) and pressed the art into a 296 px strip under an overlapping
       logo. Here the story and its actions are one group in the middle of a 560 px column, the art card taller where the
       screen is (296 px at 820 px high, 420 px at 1180), its figures with it, and the header's language and «Hoppa över» over
       the column's corners */
    #screen-outlet > [data-screen="A2"] > div > main {
      max-width: none !important;
      padding-inline: max(24px, calc((100% - 560px) / 2)) !important;
      padding-top: calc(var(--safe-top, 0px) + 72px) !important;
      padding-bottom: calc(var(--safe-bottom, 0px) + 24px) !important;
      justify-content: center !important;
      gap: 28px !important;
    }
    #screen-outlet > [data-screen="A2"] > div > main > header {
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      padding-inline: max(24px, calc((100% - 560px) / 2)) !important;
    }
    #screen-outlet > [data-screen="A2"] [data-section="story-stage"] { flex: 0 0 auto !important; margin-top: 0 !important; overflow: visible !important; }
    #screen-outlet > [data-screen="A2"] [data-section="story-stage"] > :first-child { padding-bottom: 16px !important; }
    #screen-outlet > [data-screen="A2"] #slideContent > :first-child { height: clamp(296px, calc(100dvh - 760px), 420px) !important; border-radius: 32px !important; }
    #screen-outlet > [data-screen="A2"] .sys-stage-hero { width: auto !important; height: clamp(222px, calc(100dvh - 834px), 346px) !important; aspect-ratio: 186 / 222 !important; }
    #screen-outlet > [data-screen="A2"] [data-section="story-footer"] { padding-bottom: 0 !important; }
  }
  /* an iPad on its side is 744 to 1024 px tall: the sign-in sheet keeps its parts and gives up air, so A3's sheet (860 px with
     its legal line) stands whole on a 820 px screen instead of running past its foot */
  @media (min-width: 560px) and (any-pointer: coarse) and (max-height: 900px) {
    #screen-outlet > [data-screen="A3"],
    #screen-outlet > :is([data-screen="A3.kod"], [data-screen="A8.kod"], [data-screen^="A6"], [data-screen^="A5"], [data-screen^="A9"], [data-screen="A7"]) > div {
      padding-top: calc(var(--safe-top, 0px) + 12px) !important;
      padding-bottom: calc(var(--safe-bottom, 0px) + 12px) !important;
    }
    #screen-outlet > [data-screen="A3"] > div { padding-top: 8px !important; padding-bottom: 16px !important; }
    #screen-outlet > [data-screen="A3"] [data-chrome="header"] { min-height: 48px !important; margin-bottom: 0 !important; }
    #screen-outlet > [data-screen="A3"] [data-purpose="goteborg-skyline-illustration"] { height: 44px !important; margin-bottom: 10px !important; }
    #screen-outlet > [data-screen="A3"] [data-purpose="brand-hero"] > :nth-child(2) { margin-bottom: 8px !important; }
  }
  /* reduced transparency: the frame's frosted, near-solid version (css/chrome.css) */
  @media (min-width: 560px) and (any-pointer: coarse) and (prefers-reduced-transparency: reduce) {
    html #screen-outlet [data-screen] header:is(.sys-w15-bar, .sticky, .glass-nav, .glass-header):not([data-chrome], [aria-hidden="true"], .sheet-track *)::before {
      background: var(--sys-base) !important;
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
    }
  }
}

/* the detail's content in its pane (the container above), from a pane of 700 px: the same canvases as a page's, the column
   read from the pane (100cqi) */
@media (min-width: 700px) and (any-pointer: coarse) {
  @container (min-width: 700px) {
    :root #screen-outlet > [data-split-slot="detail"] > [data-split-scroll] > [data-screen] > div > :is(main, div, section, article):not(.absolute, .fixed, .sticky, [hidden], [aria-hidden="true"], .pointer-events-none):is(.w-full, .min-h-screen, .h-screen, .app-viewport, .mobile-screen, .mobile-frame, .nordic-canvas, .phone-frame, .device-frame, .max-w-md, .max-w-sm, [class*="max-w-[3"], [class*="max-w-[4"]),
    :root #screen-outlet > [data-split-slot="detail"] > [data-split-scroll] > [data-screen] > div:has(> :is(main, div, section, article):not(.absolute, .fixed, .sticky, [hidden], [aria-hidden="true"], .pointer-events-none):is(.w-full, .min-h-screen, .h-screen, .app-viewport, .mobile-screen, .mobile-frame, .nordic-canvas, .phone-frame, .device-frame, .max-w-md, .max-w-sm, [class*="max-w-[3"], [class*="max-w-[4"])) > :is(header, footer, nav):not(.absolute, .fixed, [hidden]),
    :root #screen-outlet > [data-split-slot="detail"] > [data-split-scroll] > [data-screen] > div:not(:has(> :is(main, div, section, article):not(.absolute, .fixed, .sticky, [hidden], [aria-hidden="true"], .pointer-events-none):is(.w-full, .min-h-screen, .h-screen, .app-viewport, .mobile-screen, .mobile-frame, .nordic-canvas, .phone-frame, .device-frame, .max-w-md, .max-w-sm, [class*="max-w-[3"], [class*="max-w-[4"]))) {
      box-sizing: border-box !important;
      padding-inline: calc((100cqi - var(--app-col)) / 2 + 1rem) !important;
      border-inline-width: 0 !important;
      box-shadow: none !important;
    }
    #screen-outlet > [data-split-slot="detail"] [data-screen]:is([data-screen^="E2"], [data-screen^="D2"]) :is(section[data-part="hero"], [data-part="hero-stage"]) { border-radius: 24px; overflow: hidden; }
  }
}

/* a header's title row and its line under it read from one edge (C10's family, E1, I1, M1, CF10 …): chrome.css centres the
   title and the subtitle of a back-and-title header, but where the title sits in a row of its own with a pill (a flex row,
   not centred) the title stays at the start and only the subtitle went to the middle. On a phone the subtitle is cut to
   the row's width, so both start at one edge; on a tablet the row is 500 px and the subtitle stood 100 px right of its
   title (in chrome.css's layer, whose !important outranks this sheet's own). And C10's first card stood under the header's
   feather (its top line hidden): the sheet keeps 12 px under it. */
@layer chrome {
  @media (min-width: 560px) and (any-pointer: coarse) {
    #screen-outlet [data-chrome="header"] :is(.flex, .inline-flex):not(.flex-col, .justify-center):has(> [data-chrome="title"]) ~ [data-chrome="subtitle"][data-chrome="subtitle"][data-chrome="subtitle"]:not(.text-center) {
      text-align: start !important;
      justify-content: flex-start !important;
    }
  }
}
@media (min-width: 560px) and (any-pointer: coarse) {
  #screen-outlet [data-purpose="stop-header"] ~ [data-purpose="stop-sheet"] { padding-top: 12px; }
}

/* D2, a restaurant's page on its own (a link, the home's card) or chosen in D1's grid (below), on an iPad on its side and wider: the
   restaurant and its menu side by side, as an iPad's store page is. On a phone and an iPad upright the page is one column,
   and on a landscape iPad that column put the picture and the place card over the whole first screen, the menu under the
   fold and the cart bar over the menu. From 1000 px the page spans the screen (32 px sides): at its reading start a 380 to 440 px column with
   the picture and the place card, which stay while the menu scrolls, and the cart bar (or the closed restaurant's dock) at
   that column's foot, under them; beside it the order mode, the categories (sticky as before), the filter, the menu (two
   cards abreast, css/split-sectors.css) and the reviews. The same DOM, classes and colours: only the grid places them.
   The rows: the header spans both columns, the side column spans every row after it and ends on a 1fr row, so a short menu
   does not spread out to the side column's height (a spanning item gives its extra height to the flexible row only). */
@media (min-width: 1000px) and (any-pointer: coarse) {
  body:not(:has(#overlay-outlet > [data-overlay])) :is(#screen-outlet, #screen-outlet[data-split-list^="D1"] > [data-split-slot="detail"] > [data-split-scroll]) > [data-screen^="D2"] > div > main.app-viewport {
    --app-col: calc(100% - 32px);
    --d2-side: clamp(380px, 32%, 440px);
    --d2-hero: 236px;
    --d2-top: calc(var(--safe-top, 0px) + 72px);
    display: grid;
    grid-template-columns: var(--d2-side) minmax(0, 1fr);
    grid-template-rows: repeat(40, auto) 1fr;
    column-gap: 28px;
    align-items: start;
  }
  body:not(:has(#overlay-outlet > [data-overlay])) :is(#screen-outlet, #screen-outlet[data-split-list^="D1"] > [data-split-slot="detail"] > [data-split-scroll]) > [data-screen^="D2"] > div > main.app-viewport > :not(.absolute, .fixed, [class*="aurora-glow"]) { grid-column: 2; }
  body:not(:has(#overlay-outlet > [data-overlay])) :is(#screen-outlet, #screen-outlet[data-split-list^="D1"] > [data-split-slot="detail"] > [data-split-scroll]) > [data-screen^="D2"] > div > main.app-viewport > header:not(.absolute, .fixed, [class*="aurora-glow"]) { grid-column: 1 / -1; grid-row: 1; margin-bottom: 0 !important; }
  body:not(:has(#overlay-outlet > [data-overlay])) :is(#screen-outlet, #screen-outlet[data-split-list^="D1"] > [data-split-slot="detail"] > [data-split-scroll]) > [data-screen^="D2"] > div > main.app-viewport > [data-part="hero-stage"] {
    grid-column: 1;
    grid-row: 2 / span 40;
    position: sticky;
    top: var(--d2-top);
    height: var(--d2-hero) !important;
  }
  body:not(:has(#overlay-outlet > [data-overlay])) :is(#screen-outlet, #screen-outlet[data-split-list^="D1"] > [data-split-slot="detail"] > [data-split-scroll]) > [data-screen^="D2"] > div > main.app-viewport > [data-section="info"] {
    grid-column: 1;
    grid-row: 2 / span 40;
    position: sticky;
    top: calc(var(--d2-top) + var(--d2-hero) - 30px);
    margin-top: calc(var(--d2-hero) - 30px);
    padding-inline: 12px;
  }
  /* the cart bar and the closed restaurant's dock (sticky at the page's foot here, css/split-sectors.css) at the side column's
     foot, under the place card: the cart beside the menu */
  body:not(:has(#overlay-outlet > [data-overlay])) :is(#screen-outlet, #screen-outlet[data-split-list^="D1"] > [data-split-slot="detail"] > [data-split-scroll]) > [data-screen^="D2"] > div > main.app-viewport > :is([data-cart-bar], [data-part="closed-dock"]) {
    grid-column: 1;
    grid-row: 2 / span 40;
    align-self: end;
    position: sticky !important;
    bottom: calc(var(--safe-bottom, 0px) + 16px) !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* D1, the restaurants, on an iPad on its side (the owner, 2026-11-13 20:12: «التصميم العرضي في المطاعم بالذات كتير تعبان»): a
   380 px list beside an 800 px pane left two thirds of the screen to a welcome, and a chosen restaurant was a phone's column
   in that pane. From 1000 px the list | detail pair takes turns on the whole screen, as on a phone: the restaurants are a
   grid of cards (three a row at 1180 and 1280 px, four at 1366 px), and a chosen restaurant is D2's side-by-side page above
   (picture and place card | menu, the cart under the card); its back returns to the grid where it was (the list stays
   mounted, split-pane.js). The cart bar is a 560 px capsule in the middle of the foot, not a strip across the screen. */
@media (min-width: 1000px) and (any-pointer: coarse) {
  #screen-outlet[data-pane="split"][data-split-list^="D1"]:not([data-split-solo="true"]) { grid-template-columns: minmax(0, 1fr); }
  #screen-outlet[data-pane="split"][data-split-list^="D1"][data-split-focus="list"]:not([data-split-solo="true"]) > [data-split-slot="detail"],
  #screen-outlet[data-pane="split"][data-split-list^="D1"][data-split-focus="detail"]:not([data-split-solo="true"]) > [data-split-slot="list"] { display: none; }
  #screen-outlet[data-pane="split"][data-split-list^="D1"]:not([data-split-solo="true"]) > [data-split-slot="list"] { border-inline-end: 0; }
  #screen-outlet[data-split-list^="D1"] > [data-split-slot="list"] [data-screen^="D1"] > div > main > div.relative.z-10 { padding-inline: 32px; }
  #screen-outlet[data-split-list^="D1"] > [data-split-slot="list"] [data-screen^="D1"] > div > main > header[data-chrome="header"] { padding-inline: 32px; }
  #screen-outlet[data-split-list^="D1"] > [data-split-slot="list"] [data-screen^="D1"] section[data-list="restaurants"] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    align-items: stretch;
  }
  #screen-outlet[data-split-list^="D1"] > [data-split-slot="list"] [data-screen^="D1"] section[data-list="restaurants"] > :not([data-item]) { grid-column: 1 / -1; }
  #screen-outlet[data-split-list^="D1"] > [data-split-slot="list"] [data-screen^="D1"] section[data-list="restaurants"] > [data-item] > div:last-child { flex: 1 1 auto; }
  #screen-outlet[data-split-list^="D1"] > [data-split-slot="list"] [data-screen^="D1"] section[data-list="restaurants"] > [data-item] > div:last-child > div:last-child { margin-top: auto; }
  #screen-outlet[data-split-list^="D1"] > [data-split-slot="list"] [data-screen^="D1"] [data-cart-bar].fixed {
    left: 0;
    right: 0;
    width: min(560px, 100% - 64px);
    margin-inline: auto;
  }
}

/* D4 (the cart and its checkout) and D6 (a table booking) on an iPad on its side: a phone's column of 608 px in the middle of
   the screen, everything one under the other and the button at the foot over the end of the form. From 1000 px the page
   spans the screen (32 px sides) in two columns, as an iPad's checkout is: at the reading start what is ordered (D4: the
   restaurant, the dishes, «Lägg till något mer?»; D6: the restaurant, the guests), at the end a 380 to 440 px column with
   the choices (how and when, the code and the total; the date, the sitting, the note) and the action bar at its foot. The
   start's blocks float to the start, so both columns begin at the top whatever their heights; the rest keeps its flow
   beside them. The empty cart (D4.tom-varukorg) stays the centred card. D7, «Rädda maten»: the drops a grid of cards on the
   whole screen, as D1's restaurants */
@media (min-width: 1000px) and (any-pointer: coarse) {
  #screen-outlet :is([data-screen="D4"], [data-screen="D6"]) {
    --app-col: calc(100% - 32px);
    --d4-side: clamp(380px, 34vw, 440px);
  }
  #screen-outlet [data-screen="D7"] { --app-col: 100%; }
  #screen-outlet :is([data-screen="D4"] > div > main > div.space-y-4, [data-screen="D6"] main.space-y-5) { display: flow-root; }
  #screen-outlet :is([data-screen="D4"] > div > main > div.space-y-4 > :is(section:first-child, [data-list="cart"], [data-section="more"]), [data-screen="D6"] main.space-y-5 > :is(section:first-child, [data-part="booked"], [data-part="allergy-shared"], [data-part="pick"].glass-card)) {
    float: inline-start;
    clear: inline-start;
    width: calc(100% - var(--d4-side) - 28px);
    margin-top: 0;
    margin-bottom: 16px;
  }
  #screen-outlet :is([data-screen="D4"] > div > main > div.space-y-4 > :not(section:first-child, [data-list="cart"], [data-section="more"]), [data-screen="D6"] main.space-y-5 > :not(section:first-child, [data-part="booked"], [data-part="allergy-shared"], [data-part="pick"].glass-card)) {
    margin-inline-start: calc(100% - var(--d4-side));
  }
  #screen-outlet :is([data-screen="D4"] > div > main > div.space-y-4 > [data-section="more"], [data-screen="D6"] main.space-y-5 > [data-part="pick"].glass-card) + * { margin-top: 0; }
  #screen-outlet [data-screen="D4"] [data-section="more"] .sys-d4-upsell-track { margin-inline: 0; padding-inline: 0; }
  #screen-outlet [data-screen="D7"] section[data-list="drops"] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    align-items: stretch;
  }
  #screen-outlet [data-screen="D7"] section[data-list="drops"] > :not([data-item]) { grid-column: 1 / -1; }
  #screen-outlet [data-screen="D7"] section[data-part="empty"] { width: min(100%, 560px); margin-inline: auto; box-sizing: border-box; }
  /* D8, a drop: what it is, its numbers and the business at the reading start, the notice and the purchase beside them, «Köp»
     under the purchase's column */
  #screen-outlet [data-screen="D8"] { --app-col: 100%; }
  #screen-outlet [data-screen="D8"] main > div.relative.z-10.flex-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto auto 1fr auto;
    gap: 16px 24px;
    align-items: start;
  }
  #screen-outlet [data-screen="D8"] main > div.relative.z-10.flex-col > * { grid-column: 1; }
  #screen-outlet [data-screen="D8"] main > div.relative.z-10.flex-col > section:nth-of-type(1) { grid-row: 1; }
  #screen-outlet [data-screen="D8"] main > div.relative.z-10.flex-col > section:nth-of-type(2) { grid-row: 2; }
  #screen-outlet [data-screen="D8"] main > div.relative.z-10.flex-col > section:nth-of-type(3) { grid-row: 3; }
  #screen-outlet [data-screen="D8"] main > div.relative.z-10.flex-col > section:nth-of-type(4) { grid-column: 2; grid-row: 1; }
  #screen-outlet [data-screen="D8"] main > div.relative.z-10.flex-col > :is([data-part="buy"], [data-part="gone"]) { grid-column: 2; grid-row: 2 / 5; }
  #screen-outlet [data-screen="D8"] main > div.relative.z-10.flex-col > button { grid-column: 1 / -1; grid-row: 5; }
  #screen-outlet [data-screen="D8"] [data-part="dock"] { justify-content: flex-end; padding-inline-end: 32px; }
  #screen-outlet#screen-outlet [data-screen="D8"] [data-part="dock"] > button[data-action="buy"] { max-width: calc(50vw - 44px) !important; margin-inline: 0; }
}
@layer chrome {
  @media (min-width: 1000px) and (any-pointer: coarse) {
    html #screen-outlet :is([data-screen="D4"], [data-screen="D6"]) [data-chrome="actionbar"].fixed {
      max-width: calc(var(--d4-side) + 32px) !important;
      margin-inline: auto 32px !important;
    }
    /* a page that spans the screen keeps its fixed action bar a 560 px capsule in the middle, not a button across the screen */
    html #screen-outlet :is([data-screen="D7"], [data-screen^="C11"], [data-screen^="C12"], [data-screen^="C15"], [data-screen="CF6"], [data-screen="CF7"], [data-screen="CF10"], [data-screen^="CF11"], [data-screen="CF12"], [data-screen="CF13"], [data-screen="CF17"], [data-screen="CF19"], [data-screen="CF21"], [data-screen="CP4"], [data-screen="CP6"], [data-screen="CA3"]) [data-chrome="actionbar"].fixed { max-width: 592px !important; }
    /* C9's «Tillbaka» and CF14's «Skicka rapport» stand in their column: their glass behind them only, not across the cards beside */
    html #screen-outlet :is([data-screen="C9"], [data-screen="CF14"]) [data-chrome="actionbar"]::before { left: 0 !important; right: 0 !important; }
  }
}

/* Taxi's own pages on an iPad on its side (the owner, 2026-11-13 20:12): «Kommande resor» (C11), «Mina taxiresor» (C12) and
   «Mina förare» (C15) were a 608 px column with 286 px of nothing at each side, «Trygghet & SOS» (C9) the same. From 1000 px
   the lists span the screen (32 px sides) and their rides stand as cards in a grid, two or three a row; C9 is two columns,
   the 112 card at the reading start and beside it the ride, the safety services and «Tillbaka», which stays at the foot */
@media (min-width: 1000px) and (any-pointer: coarse) {
  #screen-outlet :is([data-screen="C9"], [data-screen="C11"], [data-screen="C12"], [data-screen="C15"]) { --app-col: 100%; }
  #screen-outlet :is([data-screen="C11"], [data-screen="C12"]) [data-list="rides"] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
    align-items: stretch;
  }
  #screen-outlet :is([data-screen="C11"], [data-screen="C12"]) [data-list="rides"] > * { margin-top: 0; }
  #screen-outlet [data-screen="C9"] > div > div.min-h-screen {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto 1fr auto;
    column-gap: 12px;
    align-content: start;
  }
  #screen-outlet [data-screen="C9"] > div > div.min-h-screen > :is(header, div:last-child) { grid-column: 1 / -1; }
  #screen-outlet [data-screen="C9"] > div > div.min-h-screen > header { grid-row: 1; }
  #screen-outlet [data-screen="C9"] > div > div.min-h-screen > section[aria-labelledby="sos-section-title"] { grid-column: 1; grid-row: 2 / 6; }
  #screen-outlet [data-screen="C9"] > div > div.min-h-screen > [data-section="ride"] { grid-column: 2; grid-row: 2; }
  #screen-outlet [data-screen="C9"] > div > div.min-h-screen > section[aria-labelledby="safety-features-title"] { grid-column: 2; grid-row: 3; }
  #screen-outlet [data-screen="C9"] > div > div.min-h-screen > [data-chrome="actionbar"] { grid-column: 2; grid-row: 4; margin-top: 0; }
  #screen-outlet [data-screen="C9"] > div > div.min-h-screen > div:last-child { grid-row: 6; }
}

/* the driver's pages on an iPad on its side (the owner drives; the same 20:12 word): «Körda resor» (CF6), «Förbokade resor»
   (CF10), «Resehistorik» (CF13) and «Mål och veckosammanfattning» (CF17) were the phone's column in the middle. From 1000 px
   they span the screen (32 px sides): the week's summary stays at the reading start while the rides scroll beside it (CF6,
   CF13), the booked rides are cards three a row (CF10), the week's cards stand two abreast (CF17). The map screens (CF1 and
   the ride) keep the map as the canvas with the floating panel */
@media (min-width: 1000px) and (any-pointer: coarse) {
  #screen-outlet :is([data-screen="CF6"], [data-screen="CF10"], [data-screen="CF13"], [data-screen="CF17"]) { --app-col: 100%; }
  #screen-outlet [data-screen="CF6"] div.relative.z-10.flex-col.w-full:has(> header[data-chrome="header"]) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    grid-template-rows: auto auto auto 1fr auto;
    column-gap: 24px;
    align-items: start;
  }
  #screen-outlet [data-screen="CF6"] div.relative.z-10.flex-col.w-full:has(> header[data-chrome="header"]) > * { margin-top: 0; }
  #screen-outlet [data-screen="CF6"] div.relative.z-10.flex-col.w-full:has(> header[data-chrome="header"]) > :is(header, footer) { grid-column: 1 / -1; }
  #screen-outlet [data-screen="CF6"] div.relative.z-10.flex-col.w-full:has(> header[data-chrome="header"]) > section.glass-card:not([data-list]) { grid-column: 1; grid-row: 2 / 5; position: sticky; top: calc(var(--safe-top, 0px) + 16px); }
  #screen-outlet [data-screen="CF6"] div.relative.z-10.flex-col.w-full:has(> header[data-chrome="header"]) > div { grid-column: 2; grid-row: 2; }
  #screen-outlet [data-screen="CF6"] div.relative.z-10.flex-col.w-full:has(> header[data-chrome="header"]) > [data-list="trips"] { grid-column: 2; grid-row: 3 / 5; }
  #screen-outlet [data-screen="CF6"] div.relative.z-10.flex-col.w-full:has(> header[data-chrome="header"]) > footer { grid-row: 5; }
  #screen-outlet [data-screen="CF10"] main[data-list="rides"] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
    align-items: stretch;
    align-content: start;
  }
  #screen-outlet [data-screen="CF10"] main[data-list="rides"] > * { margin-top: 0; }
  #screen-outlet [data-screen="CF13"] main.flex-col {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 24px;
    row-gap: 14px;
    align-items: start;
  }
  #screen-outlet [data-screen="CF13"] main.flex-col > section.glass-card { grid-column: 1; grid-row: 1 / 4; position: sticky; top: calc(var(--safe-top, 0px) + 16px); }
  #screen-outlet [data-screen="CF13"] main.flex-col > div:first-child { grid-column: 2; grid-row: 1; }
  #screen-outlet [data-screen="CF13"] main.flex-col > [data-list="days"] { grid-column: 2; grid-row: 2 / 4; }
  #screen-outlet [data-screen="CF17"] div.relative.z-10.flex-col.w-full:has(> header[data-chrome="header"]) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
  }
  #screen-outlet [data-screen="CF17"] div.relative.z-10.flex-col.w-full:has(> header[data-chrome="header"]) > * { margin-top: 0; }
  #screen-outlet [data-screen="CF17"] div.relative.z-10.flex-col.w-full:has(> header[data-chrome="header"]) > :is(header, footer, div.grid) { grid-column: 1 / -1; }
}

/* the driver's other pages on an iPad on its side: the documents (CF7), the settings (CF11), «Mot hemmet» (CF12), a report
   (CF14), the driver's safety (CF19) and «Så fungerar fördelningen» (CF21) were the phone's column. From 1000 px they span
   the screen (16 to 32 px sides) and their cards stand two abreast, in reading order; a page's title block, its chips and its
   action bar keep the whole row. CF12's map is the reading start's column, the screen's height, beside its list */
@media (min-width: 1000px) and (any-pointer: coarse) {
  #screen-outlet :is([data-screen="CF7"], [data-screen^="CF11"], [data-screen="CF12"], [data-screen="CF14"], [data-screen="CF19"], [data-screen="CF21"]) { --app-col: 100%; }
  #screen-outlet [data-screen="CF21"] > div > div[class~="max-w-[390px]"] { max-width: none; }
  #screen-outlet :is([data-screen^="CF11"] div.space-y-4, [data-screen="CF14"] main.flex-col, [data-screen="CF19"] main > div.relative.z-10, [data-screen="CF21"] div.relative.z-10.space-y-4) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 24px;
    align-items: start;
    align-content: start;
  }
  #screen-outlet :is([data-screen^="CF11"] div.space-y-4, [data-screen="CF14"] main.flex-col, [data-screen="CF19"] main > div.relative.z-10, [data-screen="CF21"] div.relative.z-10.space-y-4) > * { margin-top: 0; margin-bottom: 0; }
  #screen-outlet :is([data-screen="CF14"] main.flex-col > section:first-child, [data-screen="CF21"] div.relative.z-10.space-y-4 > :is(header, div:nth-child(2))) { grid-column: 1 / -1; }
  /* CF7: the state of the papers, the upload and the note at the reading start, the list of papers beside them; CF14: the
     ride, the words and the picture at the reading start, what happened, the note and «Skicka rapport» beside them. Each
     page's rows are named, the long column spans them and ends on a 1fr row, so neither column waits for the other */
  #screen-outlet [data-screen="CF7"] main.relative.z-10 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto auto auto auto auto 1fr;
    gap: 16px 24px;
    align-items: start;
  }
  #screen-outlet [data-screen="CF7"] main.relative.z-10 > * { margin-top: 0; margin-bottom: 0; grid-column: 1 / -1; }
  #screen-outlet [data-screen="CF7"] main.relative.z-10 > [data-section="passkey"] { grid-row: 1; }
  #screen-outlet [data-screen="CF7"] main.relative.z-10 > div.justify-between { grid-row: 2; }
  #screen-outlet [data-screen="CF7"] main.relative.z-10 > section.overflow-x-auto { grid-row: 3; }
  #screen-outlet [data-screen="CF7"] main.relative.z-10 > section.glass-card:not([data-section]) { grid-column: 1; grid-row: 4; }
  #screen-outlet [data-screen="CF7"] main.relative.z-10 > [data-section="upload-card"] { grid-column: 1; grid-row: 5; }
  #screen-outlet [data-screen="CF7"] main.relative.z-10 > section.rounded-xl:not(.glass-card) { grid-column: 1; grid-row: 6; }
  #screen-outlet [data-screen="CF7"] main.relative.z-10 > section.flex-col:not(.glass-card) { grid-column: 2; grid-row: 4 / 8; }
  #screen-outlet [data-screen="CF14"] main.flex-col { grid-template-rows: auto auto auto auto 1fr auto auto; }
  #screen-outlet [data-screen="CF14"] main.flex-col > section:first-child { grid-row: 1; }
  #screen-outlet [data-screen="CF14"] main.flex-col > .stagger-2 { grid-column: 1; grid-row: 2; }
  #screen-outlet [data-screen="CF14"] main.flex-col > .stagger-3 { grid-column: 2; grid-row: 2 / 6; }
  #screen-outlet [data-screen="CF14"] main.flex-col > .stagger-4:not([data-section]) { grid-column: 1; grid-row: 3; }
  #screen-outlet [data-screen="CF14"] main.flex-col > .stagger-5 { grid-column: 1; grid-row: 4; }
  #screen-outlet [data-screen="CF14"] main.flex-col > [data-section="block-card"] { grid-column: 1; grid-row: 5; }
  #screen-outlet [data-screen="CF14"] main.flex-col > .stagger-6 { grid-column: 2; grid-row: 6; }
  #screen-outlet [data-screen="CF14"] main.flex-col > [data-chrome="actionbar"] { grid-column: 2; grid-row: 7; }
  #screen-outlet [data-screen="CF12"] main > div.flex-1.flex-col {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    grid-template-rows: repeat(19, auto) 1fr;
    column-gap: 24px;
    row-gap: 12px;
    align-items: start;
    align-content: start;
  }
  #screen-outlet [data-screen="CF12"] main > div.flex-1.flex-col > * { grid-column: 2; margin-top: 0; }
  #screen-outlet [data-screen="CF12"] main > div.flex-1.flex-col > [data-section="map"] {
    grid-column: 1;
    grid-row: 1 / span 20;
    position: sticky;
    top: calc(var(--safe-top, 0px) + 72px);
    height: calc(100dvh - var(--safe-top, 0px) - 96px);
  }
}

/* the fleet owner's pages on an iPad on its side (CP1 is the map with its panel): «Förare & skift» (CP2), «Vilotid i flottan»
   (CP3), a driver (CP4) and the cars (CP6) were the phone's 416 px column. From 1000 px they span the screen (16 px sides):
   the day, the week's shifts and the invitation at the reading start, the drivers beside them (CP2); the summary across, the note and the
   log at the reading start, the drivers beside them (CP3); the driver's card beside the papers (CP4); the cars a grid of
   cards (CP6). The rows are named and end on a 1fr row, so neither column waits for the other */
@media (min-width: 1000px) and (any-pointer: coarse) {
  #screen-outlet :is([data-screen="CP2"], [data-screen="CP3"], [data-screen="CP4"], [data-screen="CP6"], [data-screen="CA4"]) { --app-col: 100%; }
  #screen-outlet :is([data-screen="CP2"], [data-screen="CP3"], [data-screen="CP4"], [data-screen="CA4"]) [data-purpose="mobile-viewport"] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto auto auto 1fr auto;
    gap: 16px 24px;
    align-items: start;
    align-content: start;
    max-width: none;
  }
  #screen-outlet :is([data-screen="CP2"], [data-screen="CP3"], [data-screen="CP4"], [data-screen="CA4"]) [data-purpose="mobile-viewport"] > :not(.fixed) { margin-top: 0; margin-bottom: 0; grid-column: 1 / -1; }
  #screen-outlet :is([data-screen="CP2"], [data-screen="CP3"], [data-screen="CP4"], [data-screen="CA4"]) [data-purpose="mobile-viewport"] > [data-chrome="header"] { grid-row: 1; }
  #screen-outlet :is([data-screen="CP2"], [data-screen="CP3"], [data-screen="CP4"], [data-screen="CA4"]) [data-purpose="mobile-viewport"] > footer { grid-row: 6; }
  #screen-outlet [data-screen="CP2"] [data-purpose="mobile-viewport"] > [data-purpose="date-and-revenue-card"] { grid-column: 1; grid-row: 2; }
  #screen-outlet [data-screen="CP2"] [data-purpose="mobile-viewport"] > [data-purpose="shift-schedule-calendar"] { grid-column: 1; grid-row: 3; }
  #screen-outlet [data-screen="CP2"] [data-purpose="mobile-viewport"] > [data-purpose="invite-drivers-card"] { grid-column: 1; grid-row: 4; }
  #screen-outlet [data-screen="CP2"] [data-purpose="mobile-viewport"] > [data-purpose="drivers-section"] { grid-column: 2; grid-row: 2 / 6; }
  #screen-outlet :is([data-screen="CP3"], [data-screen="CA4"]) [data-purpose="mobile-viewport"] > [data-purpose="summary"] { grid-row: 2; }
  #screen-outlet :is([data-screen="CP3"], [data-screen="CA4"]) [data-purpose="mobile-viewport"] > [data-purpose="duty-note"] { grid-column: 1; grid-row: 3; }
  #screen-outlet :is([data-screen="CP3"], [data-screen="CA4"]) [data-purpose="mobile-viewport"] > [data-purpose="driver-log"] { grid-column: 1; grid-row: 4 / 6; }
  #screen-outlet :is([data-screen="CP3"], [data-screen="CA4"]) [data-purpose="mobile-viewport"] > [data-purpose="rest-drivers"] { grid-column: 2; grid-row: 3 / 6; }
  #screen-outlet [data-screen="CP4"] [data-purpose="mobile-viewport"] > [data-purpose="driver-card"] { grid-column: 1; grid-row: 2 / 6; }
  #screen-outlet [data-screen="CP4"] [data-purpose="mobile-viewport"] > [data-purpose="papers-section"] { grid-column: 2; grid-row: 2; }
  #screen-outlet [data-screen="CP4"] [data-purpose="mobile-viewport"] > [data-purpose="release-driver"] { grid-column: 2; grid-row: 3; }
  #screen-outlet [data-screen="CP6"] [data-purpose="mobile-viewport"] { max-width: none; }
  #screen-outlet [data-screen="CP6"] [data-list="cars"] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
    align-items: stretch;
  }
  #screen-outlet [data-screen="CP6"] [data-list="cars"] > * { margin-top: 0; }
  #screen-outlet [data-screen="CP6"] [data-list="cars"] > :not([data-item]) { grid-column: 1 / -1; }
}

/* the rest of Taxi on an iPad on its side: the rating after a ride (C6), the receipt (C7), «Glömt något?» (C13), the
   driver's car (CF8) and rest time (CF9) were the phone's column. From 1000 px they span the screen (16 px sides) in two
   columns: the receipt is a paper at the reading start and its actions beside it; CF8's car and its papers beside the
   equipment; CF9's status, the manual work and the log beside the rest book; C6 and C13 their cards two abreast */
@media (min-width: 1000px) and (any-pointer: coarse) {
  #screen-outlet :is([data-screen^="C6"], [data-screen^="C7"], [data-screen="C13"], [data-screen="CF8"], [data-screen="CF9"]) { --app-col: 100%; }
  #screen-outlet [data-screen^="C6"] main > div.space-y-2,
  #screen-outlet [data-screen="C13"] main > div.relative.z-10.flex-col:has(> header) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 24px;
    align-items: start;
    align-content: start;
  }
  #screen-outlet [data-screen^="C6"] main > div.space-y-2 > *,
  #screen-outlet [data-screen="C13"] main > div.relative.z-10.flex-col:has(> header) > * { margin-top: 0; margin-bottom: 0; }
  #screen-outlet [data-screen^="C6"] main > div.space-y-2 > [data-sheet-foot] { grid-column: 2; }
  #screen-outlet [data-screen^="C6"] main > div.space-y-2 > div.relative:first-child,
  #screen-outlet [data-screen="C13"] main > div.relative.z-10.flex-col:has(> header) > header { grid-column: 1 / -1; }
  #screen-outlet [data-screen^="C7"] main > div.space-y-4 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr auto;
    gap: 16px 24px;
    align-items: start;
  }
  #screen-outlet [data-screen^="C7"] main > div.space-y-4 > * { margin-top: 0; grid-column: 2; }
  #screen-outlet [data-screen^="C7"] main > div.space-y-4 > div:first-child { grid-column: 1; grid-row: 1; }
  #screen-outlet [data-screen^="C7"] main > div.space-y-4 > article { grid-column: 1; grid-row: 2 / 5; }
  #screen-outlet [data-screen^="C7"] main > div.space-y-4 > footer { grid-column: 1 / -1; grid-row: 5; }
  #screen-outlet [data-screen="CF8"] main {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto auto 1fr;
    gap: 16px 24px;
    align-items: start;
    max-width: none;
  }
  #screen-outlet [data-screen="CF8"] main > * { margin-top: 0; grid-column: 2; }
  #screen-outlet [data-screen="CF8"] main > div.flex-col:first-child { grid-column: 1; grid-row: 1 / 5; }
  #screen-outlet [data-screen="CF9"] main {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto auto auto auto auto auto 1fr auto;
    gap: 16px 24px;
    align-items: start;
    max-width: none;
  }
  #screen-outlet [data-screen="CF9"] main > * { margin-top: 0; margin-bottom: 0; grid-column: 1 / -1; }
  #screen-outlet [data-screen="CF9"] main > [data-purpose="mobile-header"] { grid-row: 1; }
  #screen-outlet [data-screen="CF9"] main > [data-purpose="load-error"] { grid-row: 2; }
  #screen-outlet [data-screen="CF9"] main > [data-purpose="break-card"] { grid-row: 3; }
  #screen-outlet [data-screen="CF9"] main > [data-purpose="rest-warning"] { grid-row: 4; }
  #screen-outlet [data-screen="CF9"] main > [data-purpose="rest-status"] { grid-column: 1; grid-row: 5; }
  #screen-outlet [data-screen="CF9"] main > [data-purpose="manual-work"] { grid-column: 1; grid-row: 6; }
  #screen-outlet [data-screen="CF9"] main > [data-purpose="work-log"] { grid-column: 1; grid-row: 7; }
  #screen-outlet [data-screen="CF9"] main > [data-purpose="book-entry"] { grid-column: 2; grid-row: 5 / 9; }
  #screen-outlet [data-screen="CF9"] main > [data-purpose="legal-note"] { grid-row: 9; }
}

/* the taxi admin's pages in the app on an iPad on its side (CA1 is the map with its panel; CA4 «Vilotid» as the fleet's CP3,
   above): the drivers to approve (CA2) and the rides (CA6) as cards two or three a row, the fares (CA3) two abreast */
@media (min-width: 1000px) and (any-pointer: coarse) {
  #screen-outlet :is([data-screen="CA2"], [data-screen="CA3"], [data-screen="CA6"]) { --app-col: 100%; }
  #screen-outlet :is([data-screen="CA2"], [data-screen="CA3"], [data-screen="CA6"]) > div > div:is([class~="max-w-[390px]"]) { max-width: none; }
  #screen-outlet :is([data-screen="CA2"] main.relative.z-10, [data-screen="CA3"] main.relative.z-10) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 24px;
    align-items: start;
    align-content: start;
  }
  #screen-outlet :is([data-screen="CA2"] main.relative.z-10, [data-screen="CA3"] main.relative.z-10) > * { margin-top: 0; margin-bottom: 0; }
  #screen-outlet [data-screen="CA2"] main.relative.z-10 > section:not([data-purpose="candidate"]) { grid-column: 1 / -1; }
  #screen-outlet [data-screen="CA6"] [data-list="rides"] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 12px 16px;
  }
  #screen-outlet [data-screen="CA6"] [data-list="rides"] > * { margin-top: 0; }
}

/* a dialog sheet (D3's dish, C2's preferences, Q1, CF10's and CF13's, YF5's and YP1's) on a tablet floats as the map's
   panel does: 16 px above the screen's foot, its foot corners round, the dimmed page round it; on a phone it stands on the
   foot as before. D3's grab handle stood on its «Anpassa beställning» (the phone's too: frame.css puts every handle in
   the flow, and D3's became an item of the row): on a tablet it is back where its classes put it, at the sheet's top in the
   middle, and the row keeps clear of it */
@media (min-width: 700px) and (any-pointer: coarse) {
  :is(#screen-outlet, #overlay-outlet) .sheet-track[data-dialog] > [data-sheet] {
    margin-bottom: var(--pane-gap, 16px);
    border-bottom-left-radius: 28px;
    border-bottom-right-radius: 28px;
    overflow: clip;
  }
  #screen-outlet [data-screen^="D3"] .sheet-track[data-dialog] > [data-sheet] > header:has(> [data-sheet-handle]) { padding-top: 26px; }
  #screen-outlet [data-screen^="D3"] .sheet-track[data-dialog] > [data-sheet] > header > button[data-sheet-handle].absolute { position: absolute; }
}