/* css/tablet-sections.css: the sections' own pages on an iPad, in Frakt's spirit (the owner, 2026-11-13: «حاول اكمال التطوير
   على الايباد ليكون كل شيء جميل … وما اريده منك هو جمالية الاقسام فقط لا كثر»). Loaded after css/tablet.css with the same
   media query (index.html), so a phone held upright never reads it; css/tablet.css (the first chain's: the one surface, the
   640 px column, the glass header, the sign-in card) is left as it is, and this file only adds to it.

   THE IDEA: Frakt on a tablet is a canvas with a floating panel beside it. A page that is a long column of cards (the account,
   the business hub, Club, a section's home) does the same from 1000 px wide (an iPad on its side, a Samsung tablet, 1280 ×
   800): the column opens to a wider canvas (--wide-col, at most 1040 px) and its cards stand side by side, the person's own
   card a floating panel at the reading start that stays while the rest scrolls. Upright (820, 884 px) the 640 px column of
   css/tablet.css stays: two columns of 300 px would be two phones. Only the layout and the material change; every class, every
   colour and every control is the design's (rule 5), and nothing here is read below 560 px. */

@media (min-width: 1000px) and (any-pointer: coarse) {
  :root { --wide-col: 1040px; --wide-side: 340px; --wide-gap: 28px; }

  /* ---- P1 «Mitt konto»: the profile card a floating panel at the side, the rest beside it ---------------------------------- */
  :root #screen-outlet > [data-screen="P1"]:not([data-pane]) > div > main.sys-w15-sections.w-full {
    display: grid !important;
    grid-template-columns: var(--wide-side) minmax(0, 1fr);
    gap: 0 var(--wide-gap);
    align-items: start;
    align-content: start;
    padding-inline: max(1.5rem, calc((100% - var(--wide-col)) / 2)) !important;
  }
  /* the design's 16 px between the groups (css/stitch/profile/P1.css), as margins: a gap would repeat under every row the panel spans */
  #screen-outlet > [data-screen="P1"] main.sys-w15-sections > :not(header) { margin-top: 16px; }
  #screen-outlet > [data-screen="P1"] main.sys-w15-sections > footer { margin-top: 28px; }
  #screen-outlet > [data-screen="P1"] main.sys-w15-sections > header { grid-column: 1 / -1; grid-row: 1; }
  #screen-outlet > [data-screen="P1"] main.sys-w15-sections > :not(header, section:has(> div > [data-part="avatar-wrap"])) { grid-column: 2; }
  #screen-outlet > [data-screen="P1"] main.sys-w15-sections > section:has(> div > [data-part="avatar-wrap"]) {
    grid-column: 1;
    grid-row: 2 / span 40;
    align-self: start;
    position: sticky;
    top: calc(var(--safe-top, 0px) + 76px);
    padding: 28px 24px 24px;
  }
  /* the card itself as an Apple ID page: the picture large in the middle, the name and the roles under it */
  #screen-outlet > [data-screen="P1"] section:has(> div > [data-part="avatar-wrap"]) > .flex.items-start:first-child {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  #screen-outlet > [data-screen="P1"] section:has(> div > [data-part="avatar-wrap"]) > .flex.items-start:first-child > * { margin-inline: 0 !important; }
  #screen-outlet > [data-screen="P1"] section:has(> div > [data-part="avatar-wrap"]) > .flex.items-start:first-child > .flex-1 { width: 100%; margin-top: 14px; }
  /* the wrap grows with the picture: css/stitch/profile/P1.css gives the wrap 68 px, and a 104 px circle in it was drawn 36 px
     over the name under it (the owner's iPad, 13 Nov 19:50); its companion's room at the side is not needed in a centred card */
  #screen-outlet > [data-screen="P1"] section:has(> div > [data-part="avatar-wrap"]) .sys-p1-avatar-wrap { width: 104px; height: 104px; }
  #screen-outlet > [data-screen="P1"] section:has(> div > [data-part="avatar-wrap"]) .sys-p1-avatar-circle { width: 104px; height: 104px; font-size: 32px; }
  #screen-outlet > [data-screen="P1"] section:has(> div > [data-part="avatar-wrap"]) .sys-p1-name-row { justify-content: center; }
  #screen-outlet > [data-screen="P1"] section:has(> div > [data-part="avatar-wrap"]) .sys-p1-name-row > h2 { font-size: 24px; letter-spacing: -0.01em; }
  /* the panel has the height: a long name or e-mail wraps under the picture instead of ending in «…» */
  #screen-outlet > [data-screen="P1"] section:has(> div > [data-part="avatar-wrap"]) :is(.sys-p1-name-row > h2, [data-bind="email"]) {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }
  #screen-outlet > [data-screen="P1"] section:has(> div > [data-part="avatar-wrap"]) [data-part="roles"] { justify-content: center; }
  #screen-outlet > [data-screen="P1"] section:has(> div > [data-part="avatar-wrap"]) .sys-p1-avatar-bar { justify-content: center; }

  /* the wide canvas for a page whose design root is its own canvas (the design's full-width canvas, which css/tablet.css pads to the 640 px column) */
  :root:root #screen-outlet > :is([data-screen="O1"], [data-screen="Q11"]):not([data-pane]) > div > div.w-full.min-h-screen {
    padding-inline: max(1.5rem, calc((100% - var(--wide-col)) / 2)) !important;
  }

  /* ---- O1 Club: the membership card and its tiles at the reading start, the levels beside them, the perks four abreast ----- */
  #screen-outlet > [data-screen="O1"] main {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px var(--wide-gap);
    align-items: start;
  }
  #screen-outlet > [data-screen="O1"] main > * { grid-column: 1 / -1; margin: 0 !important; }
  #screen-outlet > [data-screen="O1"] main > [data-part="hero-card"] { grid-column: 1; grid-row: 1; }
  #screen-outlet > [data-screen="O1"] main > .sys-club-tiles { grid-column: 1; grid-row: 2; }
  #screen-outlet > [data-screen="O1"] main > section:has(> [data-list="levels"], [data-list="levels"]) { grid-column: 2; grid-row: 1 / span 2; }
  #screen-outlet > [data-screen="O1"] main > [data-list="levels"] { grid-column: 2; grid-row: 1 / span 2; }
  #screen-outlet > [data-screen="O1"] [data-list="perks"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* ---- Q11 «Bli partner»: the sectors four abreast instead of two, the foot's words and button in the column ---------------- */
  #screen-outlet > [data-screen="Q11"] main > section.grid.grid-cols-2 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  #screen-outlet > [data-screen="Q11"] [data-chrome="actionbar"] > * { max-width: 600px; margin-inline: auto; }

  /* ---- Q8, the business owner's hub: a dashboard. The business and its figures side by side, the tools four abreast -------- */
  :root #screen-outlet > [data-screen="Q8"]:not([data-pane]) > div > main.w-full.aurora-bg.min-h-screen {
    padding-inline: max(1.5rem, calc((100% - var(--wide-col)) / 2)) !important;
  }
  #screen-outlet > [data-screen="Q8"] main > .px-4.space-y-4 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px var(--wide-gap);
    align-items: start;
    padding-inline: 0;
  }
  #screen-outlet > [data-screen="Q8"] main > .px-4.space-y-4 > * { grid-column: 1 / -1; margin-top: 0 !important; }
  #screen-outlet > [data-screen="Q8"] main > .px-4.space-y-4 > section:has(+ section[data-list="kpis"]:not([hidden])) { grid-column: 1; align-self: stretch; }
  #screen-outlet > [data-screen="Q8"] main > .px-4.space-y-4 > section[data-list="kpis"] { grid-column: 2; align-self: stretch; }
  #screen-outlet > [data-screen="Q8"] [data-list="tools"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #screen-outlet > [data-screen="Q8"] [data-list="live"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  #screen-outlet > [data-screen="Q8"] [data-list="live"] > * { margin-top: 0 !important; }
  #screen-outlet > [data-screen="Q8"] main > .px-4.space-y-4 > .pt-2.pb-2:has(> button) { justify-self: center; width: min(100%, 440px); }
}

/* P1's camera badge sits on the photo (css/stitch/profile/P1.css: absolute at its bottom corner), but responsive.css and
   frame.css give every action button position: relative, which outranks it: the badge fell under the photo, over the name
   on an iPad on its side and over «Byt profilbild» upright (the owner's iPad, 13 Nov 19:50). On a tablet it is on the photo */
@media (min-width: 560px) and (any-pointer: coarse) {
  #screen-outlet > [data-screen="P1"] .sys-p1-avatar-wrap > button.sys-p1-cam-badge { position: absolute; }
}

/* A section's home that is a list beside its detail (js/core/split-pane.js: the salons E1, the car washes H0, the shops J1,
   the hotels K1 and KS1, the orders M1, the workshops W1, the tyre hotel X0) showed on an iPad a phone's list, 380 px, at the
   side of an empty pane of 440 to 980 px with a grey skeleton card in it: «the phone on a big empty screen». While nothing is
   chosen the list is the page (the pane waits, display none; it is aria-hidden and holds nothing), its content in the column
   (640 px; from 1000 px the wide canvas, below), and the first tap opens the two panes as before. Food's D1 is the first
   chain's */
@media (min-width: 700px) and (any-pointer: coarse) {
  :root { --list-page-col: var(--app-col, 640px); }
  #screen-outlet[data-pane="split"][data-split-detail="empty"]:not([data-split-solo="true"]):is([data-split-list="E1"], [data-split-list="H0"], [data-split-list="J1"], [data-split-list^="K1"], [data-split-list="KS1"], [data-split-list^="M1"], [data-split-list="W1"], [data-split-list="X0"]) { grid-template-columns: minmax(0, 1fr); }
  #screen-outlet[data-pane="split"][data-split-detail="empty"]:not([data-split-solo="true"]):is([data-split-list="E1"], [data-split-list="H0"], [data-split-list="J1"], [data-split-list^="K1"], [data-split-list="KS1"], [data-split-list^="M1"], [data-split-list="W1"], [data-split-list="X0"]) > [data-split-slot="detail"] { display: none; }
  #screen-outlet[data-pane="split"][data-split-detail="empty"]:not([data-split-solo="true"]):is([data-split-list="E1"], [data-split-list="H0"], [data-split-list="J1"], [data-split-list^="K1"], [data-split-list="KS1"], [data-split-list^="M1"], [data-split-list="W1"], [data-split-list="X0"]) > [data-split-slot="list"] { border-inline-end: 0; }
  #screen-outlet[data-pane="split"][data-split-detail="empty"]:not([data-split-solo="true"]):is([data-split-list="E1"], [data-split-list="H0"], [data-split-list="J1"], [data-split-list^="K1"], [data-split-list="KS1"], [data-split-list^="M1"], [data-split-list="W1"], [data-split-list="X0"]) > [data-split-slot="list"] > [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"]),
  #screen-outlet[data-pane="split"][data-split-detail="empty"]:not([data-split-solo="true"]):is([data-split-list="E1"], [data-split-list="H0"], [data-split-list="J1"], [data-split-list^="K1"], [data-split-list="KS1"], [data-split-list^="M1"], [data-split-list="W1"], [data-split-list="X0"]) > [data-split-slot="list"] > [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]),
  #screen-outlet[data-pane="split"][data-split-detail="empty"]:not([data-split-solo="true"]):is([data-split-list="E1"], [data-split-list="H0"], [data-split-list="J1"], [data-split-list^="K1"], [data-split-list="KS1"], [data-split-list^="M1"], [data-split-list="W1"], [data-split-list="X0"]) > [data-split-slot="list"] > [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: max(1rem, calc((100% - var(--list-page-col)) / 2 + 1rem)) !important;
    border-inline-width: 0 !important;
    box-shadow: none !important;
    max-width: none !important;
  }
  body:has(#screen-outlet[data-pane="split"][data-split-detail="empty"]:not([data-split-solo="true"]):is([data-split-list="E1"], [data-split-list="H0"], [data-split-list="J1"], [data-split-list^="K1"], [data-split-list="KS1"], [data-split-list^="M1"], [data-split-list="W1"], [data-split-list="X0"])) :is(.ride-return, .live-capsule-container, .live-update-note) { left: 16px; right: 16px; }
}
/* from 1000 px the list is a page of 920 px and its cards stand two abreast, each the width of the phone's card or a little
   more (440 px), never one card stretched over the screen */
@media (min-width: 1000px) and (any-pointer: coarse) {
  :root { --list-page-col: 920px; }
  #screen-outlet[data-split-detail="empty"] > [data-split-slot="list"] :is([data-screen="E1"] [data-list="salons"], [data-screen="H0"] [data-list="companies"], [data-screen^="K1"] [data-list="hotels"], [data-screen="X0"] [data-list="hotels"], [data-screen^="M1"] [data-list="open"], [data-screen="W1"] main > div.space-y-3) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
  }
  #screen-outlet[data-split-detail="empty"] > [data-split-slot="list"] :is([data-screen="E1"] [data-list="salons"], [data-screen="H0"] [data-list="companies"], [data-screen^="K1"] [data-list="hotels"], [data-screen="X0"] [data-list="hotels"], [data-screen^="M1"] [data-list="open"], [data-screen="W1"] main > div.space-y-3) > * { margin: 0 !important; min-width: 0; }
}

/* ---- Shops and pets (J): from 1000 px on a touch screen ------------------------------------------------------------------- */
@media (min-width: 1000px) and (any-pointer: coarse) {
  /* J1 «Butiker» as a page (above): its three tiles in one row, each shop's products two abreast instead of a phone's rows
     (three cut the product's line, «Riven 200 g · …») */
  #screen-outlet[data-split-detail="empty"] [data-screen="J1"] main > section.grid.grid-cols-2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #screen-outlet[data-split-detail="empty"] [data-screen="J1"] [data-list="stores"] [data-list="products"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* J2, a shop's page, J3 a product and J4 «Mitt husdjur» on the wide canvas */
  :root:root #screen-outlet > :is([data-screen="J2"], [data-screen="J3"], [data-screen="J4"]) > div > :is(div.w-full.min-h-screen.relative, div.w-full.min-h-screen.flex-col, main[data-purpose="mobile-viewport"].w-full.min-h-screen) {
    padding-inline: max(1.5rem, calc((100% - var(--wide-col)) / 2)) !important;
    max-width: none !important;
  }
  /* J2: the products four abreast */
  #screen-outlet > [data-screen="J2"] [data-list="products"] { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }

  /* J3: the product's picture card a panel at the reading start that stays, its formats, facts and safety beside it */
  #screen-outlet > [data-screen="J3"] main {
    display: grid !important;
    grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
    gap: 0 var(--wide-gap);
    align-items: start;
  }
  #screen-outlet > [data-screen="J3"] main > * { grid-column: 2; margin-top: 16px !important; }
  #screen-outlet > [data-screen="J3"] main > :is(.sys-ad-slot, [data-ad-slot]) { grid-column: 1 / -1; }
  #screen-outlet > [data-screen="J3"] main > section:has(> .sys-j3-hero-media) {
    grid-column: 1;
    grid-row: 2 / span 40;
    position: sticky;
    top: calc(var(--safe-top, 0px) + 84px);
  }

  /* J4 «Mitt husdjur»: the pet's card a panel at the reading start that stays, the walks and the booking beside it */
  #screen-outlet > [data-screen="J4"] div.px-4.space-y-4:has(> [data-purpose="pet-profile-card"]) {
    display: grid;
    grid-template-columns: var(--wide-side) minmax(0, 1fr);
    gap: 0 var(--wide-gap);
    align-items: start;
  }
  #screen-outlet > [data-screen="J4"] div.px-4.space-y-4:has(> [data-purpose="pet-profile-card"]) > * { grid-column: 2; margin-top: 16px !important; }
  #screen-outlet > [data-screen="J4"] div.px-4.space-y-4:has(> [data-purpose="pet-profile-card"]) > [data-purpose="page-title-and-trust"] { grid-column: 1 / -1; }
  #screen-outlet > [data-screen="J4"] div.px-4.space-y-4:has(> [data-purpose="pet-profile-card"]) > [data-purpose="pet-profile-card"] {
    grid-column: 1;
    grid-row: 2 / span 40;
    position: sticky;
    top: calc(var(--safe-top, 0px) + 84px);
  }
}

/* J4's booking dock is the frame's action bar (css/chrome.css, a layer whose !important outranks every sheet outside it, which
   keeps a fixed bar's button in the 640 px column): on the wide canvas it stands under the walks' column, never over the pet's
   card at the side; its glass still runs to the screen's edges (chrome.css's ::before) */
@layer chrome {
  @media (min-width: 1000px) and (any-pointer: coarse) {
    html:not([dir="rtl"]) #screen-outlet > [data-screen="J4"] [data-part="pet-dock"][data-chrome="actionbar"].fixed {
      left: calc(50% - var(--wide-col) / 2 + var(--wide-side) + var(--wide-gap)) !important;
      right: calc(50% - var(--wide-col) / 2) !important;
      max-width: none !important;
      margin-inline: 0 !important;
    }
    html[dir="rtl"] #screen-outlet > [data-screen="J4"] [data-part="pet-dock"][data-chrome="actionbar"].fixed {
      right: calc(50% - var(--wide-col) / 2 + var(--wide-side) + var(--wide-gap)) !important;
      left: calc(50% - var(--wide-col) / 2) !important;
      max-width: none !important;
      margin-inline: 0 !important;
    }
  }
}

/* ---- The booked services (E beauty, F cleaning, G moving, H car wash, I crafts): from 1000 px on a touch screen ----------- */
@media (min-width: 1000px) and (any-pointer: coarse) {
  /* the wide canvas: css/tablet.css pads each page's canvas to var(--app-col); on these screens that column is the wide one.
     A bar at the foot (the frame's action bar, a fixed foot) keeps the 640 px column: one button is not stretched */
  #screen-outlet > :is([data-screen="E2"], [data-screen="E3"], [data-screen="F1"], [data-screen="G1"], [data-screen="H1"], [data-screen="I1"]) { --app-col: var(--wide-col); }
  #screen-outlet > :is([data-screen="E2"], [data-screen="E3"], [data-screen="F1"], [data-screen="G1"], [data-screen="H1"], [data-screen="I1"]) :is([data-chrome="actionbar"], .fixed.bottom-0, footer, aside.fixed) { --app-col: 640px; }

  /* E2, a salon's page: its picture a panel at the reading start that stays, the salon's card, services and hours beside it */
  #screen-outlet > [data-screen="E2"] main.relative.z-10 {
    display: grid !important;
    grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
    gap: 0 var(--wide-gap);
    align-items: start;
  }
  #screen-outlet > [data-screen="E2"] main.relative.z-10 > * { grid-column: 2; }
  #screen-outlet > [data-screen="E2"] main.relative.z-10 > [data-part="card"] { margin-top: 16px !important; padding-inline: 0; }
  #screen-outlet > [data-screen="E2"] main.relative.z-10 > [data-part="hero"] {
    grid-column: 1;
    grid-row: 1 / span 40;
    position: sticky;
    top: calc(var(--safe-top, 0px) + 56px);
    margin-top: 16px;
    border-radius: 24px;
  }
  #screen-outlet > [data-screen="E2"] [data-list="services"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  #screen-outlet > [data-screen="E2"] [data-list="services"] > * { margin: 0 !important; }

  /* E3, the time: the services two abreast */
  #screen-outlet > [data-screen="E3"] [data-list="services"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  #screen-outlet > [data-screen="E3"] [data-list="services"] > * { margin: 0 !important; }

  /* H1, a car wash: the choices at the reading start, the booking's summary a panel beside them that stays (as a booking site
     on a tablet shows its card) */
  #screen-outlet > [data-screen="H1"] div.sys-cw-col {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
    gap: 16px var(--wide-gap);
    align-items: start;
  }
  #screen-outlet > [data-screen="H1"] div.sys-cw-col > * { grid-column: 1; margin: 0 !important; }
  #screen-outlet > [data-screen="H1"] div.sys-cw-col > .sys-cw-summary {
    grid-column: 2;
    grid-row: 1 / span 40;
    position: sticky;
    top: calc(var(--safe-top, 0px) + 84px);
  }

  /* F1 (cleaning) and G1 (moving), long forms: their cards two abreast, in their order */
  #screen-outlet > [data-screen="F1"] main,
  #screen-outlet > [data-screen="G1"] div.sys-w15-stack {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px var(--wide-gap);
    align-items: start;
  }
  #screen-outlet > [data-screen="F1"] main > *,
  #screen-outlet > [data-screen="G1"] div.sys-w15-stack > * { margin: 0 !important; min-width: 0; }
  #screen-outlet > [data-screen="F1"] main > :is(header, [data-chrome="header"], .absolute, .fixed, button) { grid-column: 1 / -1; }
  /* F1's foot (its own sticky action bar) across both columns, its words and button in the 640 px column */
  #screen-outlet > [data-screen="F1"] main > [data-chrome="actionbar"] { grid-column: 1 / -1; }
  #screen-outlet > [data-screen="F1"] main > [data-chrome="actionbar"] > * { max-width: 608px; margin-inline: auto !important; }
  /* G1: the tall «Våning, hiss och bäravstånd» beside both the heavy items and the extras, not one card beside a hole */
  #screen-outlet > [data-screen="G1"] div.sys-w15-stack > section:has(+ section + [data-part="extras-section"]) { grid-row: span 2; }

  /* I1, crafts: the trades four abreast */
  #screen-outlet > [data-screen="I1"] [data-list="trades"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ===== LANDSCAPE: the whole width (the owner, 13 Nov 20:12: «التصميم الطولي على الايباد شكله كتير حلو، لكن التصميم العرضي …
   ما ناخذ حجم الشاشة بالكامل»). On an iPad held sideways (1180 × 820, 1366 × 1024, a 1280 × 800 tablet) the account (P), Club
   (O), the hub and its pages (Q), help (M4), the shops and the pet (J) left a 640 px column, or the 1040 px canvas above, in
   the middle with empty bands of 70 to 360 px at its sides. Here the canvas is the screen less 24 px at each side, and each
   page's cards stand side by side in it: a stack of cards flows into two columns (each card whole), a page with a card of its
   own puts it beside the rest. A bar at the foot keeps the 640 px column (one button is not stretched). Upright the column of
   tablet.css and the rules above stay as they are: nothing here is read in portrait. */
@media (min-width: 1000px) and (orientation: landscape) and (any-pointer: coarse) {
  #screen-outlet > :is([data-screen^="P"], [data-screen^="O"], [data-screen^="Q"], [data-screen^="J"], [data-screen="M4"]) {
    --land-col: calc(100vw - 48px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
    --app-col: calc(100vw - 16px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
    --wide-col: var(--land-col);
  }
  #screen-outlet > :is([data-screen^="P"], [data-screen^="O"], [data-screen^="Q"], [data-screen^="J"], [data-screen="M4"]) :is([data-chrome="actionbar"], [data-chrome="bottomnav"], .fixed.bottom-0, footer.fixed, aside.fixed) { --app-col: 640px; }

  /* a stack of cards in two columns, each card whole (the design's space-y margins: a column's first card loses its own) */
  #screen-outlet > [data-screen="P2"] main.space-y-5,
  #screen-outlet > [data-screen="P3"] .sys-p3-body,
  #screen-outlet > [data-screen="P4"] main.relative.z-10,
  #screen-outlet > [data-screen="P5"] div.px-4.space-y-5,
  #screen-outlet > [data-screen="P6"] main.space-y-4,
  #screen-outlet > [data-screen="P7"] div.px-4.space-y-6,
  #screen-outlet > [data-screen="O2"] div.px-4.space-y-5,
  #screen-outlet > [data-screen="O3"] main.space-y-4,
  #screen-outlet > [data-screen="O5"] div[data-part="body"].space-y-4,
  #screen-outlet > [data-screen="M4"] main.space-y-5 {
    display: block !important;
    columns: 2;
    column-gap: 28px;
  }
  #screen-outlet > :is([data-screen="P2"] main.space-y-5, [data-screen="P3"] .sys-p3-body, [data-screen="P4"] main.relative.z-10, [data-screen="P5"] div.px-4.space-y-5, [data-screen="P6"] main.space-y-4, [data-screen="P7"] div.px-4.space-y-6, [data-screen="O2"] div.px-4.space-y-5, [data-screen="O3"] main.space-y-4, [data-screen="O5"] div[data-part="body"].space-y-4, [data-screen="M4"] main.space-y-5) > * { break-inside: avoid; }
  /* a page's title line and its meta row read across the top */
  #screen-outlet > [data-screen="P4"] main.relative.z-10 > :is(section:first-child, div.flex-wrap),
  #screen-outlet > [data-screen="P6"] main.space-y-4 > section:first-child,
  #screen-outlet > [data-screen="O2"] div.px-4.space-y-5 > div[data-part="body"]:first-child { column-span: all; }
  #screen-outlet > [data-screen="P4"] main.relative.z-10 > div.flex-wrap { margin-bottom: 16px; }
  /* P2's first group is longer than the rest together: its rows continue in the second column, the card drawn round each part */
  #screen-outlet > [data-screen="P2"] main.space-y-5 > section.sys-p2-group:first-of-type { break-inside: auto; }
  #screen-outlet > [data-screen="P2"] main.space-y-5 > section.sys-p2-group:first-of-type * { box-decoration-break: clone; -webkit-box-decoration-break: clone; }
  #screen-outlet > [data-screen="P2"] main.space-y-5 > section.sys-p2-group:first-of-type > * > * { break-inside: avoid; }

  /* P8 «Bjud in vänner»: the invitation card at the reading start, the figures and the way back beside it */
  :root:root #screen-outlet > [data-screen="P8"] > div > div.w-full.flex-col {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
    gap: 16px 28px;
    align-items: start;
  }
  #screen-outlet > [data-screen="P8"] div.w-full.flex-col > header { grid-column: 1 / -1; }
  #screen-outlet > [data-screen="P8"] div.w-full.flex-col > section:first-of-type { grid-column: 1; grid-row: 2 / span 3; margin: 0 !important; }
  #screen-outlet > [data-screen="P8"] div.w-full.flex-col > :not(header, section:first-of-type) { grid-column: 2; margin: 0 !important; }

  /* P9–P11 (the needs), P12 (the username), P13 (the rider's rating): the design's 520 px page spans the canvas, its cards side by side */
  #screen-outlet > :is([data-screen="P9"], [data-screen="P10"], [data-screen="P11"]) main.sys-nb,
  #screen-outlet > [data-screen="P12"] .sys-un,
  #screen-outlet > [data-screen="P13"] .sys-rr { max-width: none; width: 100%; }
  #screen-outlet > :is([data-screen="P9"], [data-screen="P10"], [data-screen="P11"]) main.sys-nb {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px 28px;
    align-items: start;
    align-content: start;
  }
  #screen-outlet > :is([data-screen="P9"], [data-screen="P10"], [data-screen="P11"]) main.sys-nb > header { grid-column: 1 / -1; }
  #screen-outlet > :is([data-screen="P9"], [data-screen="P10"], [data-screen="P11"]) main.sys-nb > :not(header) { margin: 0 !important; }
  #screen-outlet > [data-screen="P12"] div[data-part="body"].sys-un,
  #screen-outlet > [data-screen="P13"] div[data-part="body"].sys-rr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px 28px;
    align-items: start;
  }
  #screen-outlet > [data-screen="P12"] div[data-part="body"].sys-un > *,
  #screen-outlet > [data-screen="P13"] div[data-part="body"].sys-rr > * { margin: 0 !important; }
  #screen-outlet > [data-screen="P12"] div[data-part="body"].sys-un,
  #screen-outlet > [data-screen="P13"] div[data-part="body"].sys-rr { padding-inline: 0; }

  /* O4 (a new level): the badge and its words at the reading start, the perks and the progress beside them, the buttons under */
  :root:root #screen-outlet > [data-screen="O4"] > div > main.w-full {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px 28px;
    align-content: start;
    align-items: start;
  }
  #screen-outlet > [data-screen="O4"] main.w-full > :is(div.relative.z-10, footer) { grid-column: 1 / -1; }
  #screen-outlet > [data-screen="O4"] main.w-full > section:first-of-type { grid-column: 1; grid-row: 2 / span 2; margin: 0 !important; }
  #screen-outlet > [data-screen="O4"] main.w-full > section:not(:first-of-type) { grid-column: 2; margin: 0 !important; }
  #screen-outlet > [data-screen="O4"] main.w-full > footer > * { max-width: 440px; margin-inline: auto; }

  /* O6 (the points' history): the balance card at the reading start, the filter and the list beside it */
  #screen-outlet > [data-screen="O6"] main.flex-1 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px 28px;
    align-items: start;
    align-content: start;
  }
  #screen-outlet > [data-screen="O6"] main.flex-1 > * { grid-column: 2; margin: 0 !important; min-width: 0; }
  #screen-outlet > [data-screen="O6"] main.flex-1 > div:first-child { grid-column: 1 / -1; }
  #screen-outlet > [data-screen="O6"] main.flex-1 > div.frosted-glass:not([data-part="empty"]) { grid-column: 1; grid-row: 2 / span 20; }

  /* O7 (Club's terms): the text in two columns of a readable measure */
  #screen-outlet > [data-screen="O7"] section[data-list="paragraphs"] { display: block !important; columns: 2; column-gap: 40px; }
  #screen-outlet > [data-screen="O7"] section[data-list="paragraphs"] > * { break-inside: avoid; }
  #screen-outlet > [data-screen="O7"] section[data-part="leave"] { width: min(100%, 640px); margin-inline: auto; }

  /* ---- the hub's pages ---- */
  /* Q10 «Bli partner», the application form: the fields two abreast, a line of its own (a consent, a note) across */
  #screen-outlet > [data-screen="Q10"] div.px-4.pt-3.flex.flex-col.gap-4 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px 28px;
    align-items: start;
  }
  #screen-outlet > [data-screen="Q10"] div.px-4.pt-3.flex.flex-col.gap-4 > :not(div.flex.flex-col.gap-1\.5) { grid-column: 1 / -1; }
  /* Q15 (a role's door: what it needs and how to apply): the card's words and buttons at the reading start, its list beside */
  #screen-outlet > [data-screen="Q15"] article[data-purpose="auth-gate-card"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 40px;
    align-content: start;
    align-items: start;
  }
  #screen-outlet > [data-screen="Q15"] article[data-purpose="auth-gate-card"] > * { grid-column: 1; }
  #screen-outlet > [data-screen="Q15"] article[data-purpose="auth-gate-card"] > div.inline-flex { justify-self: center; }
  #screen-outlet > [data-screen="Q15"] article[data-purpose="auth-gate-card"] > [data-purpose="driver-benefits-list"] { grid-column: 2; grid-row: 1 / span 8; align-self: center; margin-top: 0; }
  /* Q17 «Ert företag»: the page's cards in two columns, each card whole */
  #screen-outlet > [data-screen="Q17"] div[data-part="page"] { display: block !important; columns: 2; column-gap: 28px; }
  #screen-outlet > [data-screen="Q17"] div[data-part="page"] > * { break-inside: avoid; }

  /* Q18, the business profile's steps: the overview's steps two abreast, a form's fields two abreast, the plan's three cards in
     a row, the review's summary beside what is left and what is done; the step's button 440 px in the middle (not stretched) */
  #screen-outlet > [data-screen="Q18.oversikt"] [data-list="steps"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; align-items: stretch; }
  #screen-outlet > [data-screen="Q18.oversikt"] [data-list="steps"] > * { margin: 0 !important; }
  #screen-outlet > :is([data-screen="Q18"], [data-screen="Q18.personal"], [data-screen="Q18.tjanster"]) div.flex.flex-col.gap-5.w-full {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 28px;
    align-items: start;
  }
  #screen-outlet > [data-screen^="Q18"] :is(button.primary-btn, button.primary-btn-gradient) { max-width: 440px; margin-inline: auto; }
  #screen-outlet > [data-screen^="Q18"] input[data-field]:not([type="checkbox"], [type="radio"], [type="file"]) { min-height: 44px; }
  #screen-outlet > [data-screen="Q18.oppettider"] main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 28px;
    align-items: start;
  }
  #screen-outlet > [data-screen="Q18.oppettider"] main > * { grid-column: 1 / -1; }
  #screen-outlet > [data-screen="Q18.oppettider"] main > section.glass-card { grid-column: 1; }
  #screen-outlet > [data-screen="Q18.oppettider"] main > section.glass-card + div { grid-column: 2; }
  #screen-outlet > [data-screen="Q18.plan"] main > div.relative.z-10.flex-col {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 20px;
    align-items: stretch;
    align-content: start;
  }
  #screen-outlet > [data-screen="Q18.plan"] main > div.relative.z-10.flex-col > :not(article) { grid-column: 1 / -1; }
  #screen-outlet > [data-screen="Q18.plan"] main > div.relative.z-10.flex-col > article { margin: 0 0 16px !important; }
  #screen-outlet > [data-screen="Q18.granska"] main {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px 28px;
    align-items: start;
    align-content: start;
  }
  #screen-outlet > [data-screen="Q18.granska"] main > * { grid-column: 2; margin: 0 !important; }
  #screen-outlet > [data-screen="Q18.granska"] main > section:first-child { grid-column: 1; grid-row: 1 / span 3; }
  #screen-outlet > [data-screen="Q18.granska"] main > section:last-child:not([data-part]) { grid-column: 1 / -1; }

  /* ---- shops and pets ---- */
  /* a section's home with nothing chosen (above: the list is the page) spans the screen too */
  :root { --list-page-col: calc(100vw - 16px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)); }
  #screen-outlet[data-split-detail="empty"] [data-screen="J1"] [data-list="stores"] [data-list="products"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* JF1, the dog walker's orders with none yet: the card's words at the reading start, its two ways on beside them */
  #screen-outlet > [data-screen^="JF1"] section.rounded-2xl.p-6.space-y-3 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px 40px;
    align-items: center;
  }
  #screen-outlet > [data-screen^="JF1"] section.rounded-2xl.p-6.space-y-3 > * { grid-column: 1; margin: 0 !important; }
  #screen-outlet > [data-screen^="JF1"] section.rounded-2xl.p-6.space-y-3 > div.flex-col { grid-column: 2; grid-row: 1 / span 3; }
  /* JF2, the dog walker's desk: the figures across, its three ways in one row, the photos beside the reviews */
  #screen-outlet > [data-screen="JF2"] > div > main.flex-1 {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
    align-content: start;
    align-items: start;
  }
  #screen-outlet > [data-screen="JF2"] > div > main.flex-1 > * { grid-column: 1 / -1; margin: 0 !important; min-width: 0; }
  #screen-outlet > [data-screen="JF2"] > div > main.flex-1 > div.h-1 { margin-inline: auto !important; }
  #screen-outlet > [data-screen="JF2"] > div > main.flex-1 > button { grid-column: span 2; }
  #screen-outlet > [data-screen="JF2"] > div > main.flex-1 > :is([data-part="biz-photos"], [data-part="biz-reviews"]) { grid-column: span 3; }
  /* JF3 (the dog walker's profile) and JP3 (the shop's settings): the cards in two columns, each card whole; the save 440 px */
  #screen-outlet > [data-screen="JF3"] main.space-y-4,
  #screen-outlet > [data-screen="JP3"] main > div.flex.flex-col.gap-4 { display: block !important; columns: 2; column-gap: 28px; }
  #screen-outlet > [data-screen="JF3"] main.space-y-4 > *,
  #screen-outlet > [data-screen="JP3"] main > div.flex.flex-col.gap-4 > * { break-inside: avoid; margin-bottom: 16px; }
  #screen-outlet > [data-screen="JF3"] main.space-y-4 > p:first-child { column-span: all; }
  #screen-outlet > [data-screen="JF3"] div.sticky.bottom-0 > button { max-width: 440px; margin-inline: auto; display: flex; }
  /* JP1, the shop's orders and stock: the four figures in a row, the owner's links across, the rest in two columns */
  #screen-outlet > [data-screen="JP1"] main.relative.z-10 { columns: 2; column-gap: 28px; }
  #screen-outlet > [data-screen="JP1"] main.relative.z-10 > * { break-inside: avoid; }
  #screen-outlet > [data-screen="JP1"] main.relative.z-10 > section.grid.grid-cols-2:first-child { column-span: all; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 16px; }
  #screen-outlet > [data-screen="JP1"] main.relative.z-10 > section[data-part="owner-links"] { column-span: all; margin-bottom: 16px; }
  /* JP2, the shop's range: what to browse at the reading start, the products beside it */
  #screen-outlet > [data-screen^="JP2"] main.app-viewport > div.flex.flex-col.gap-5 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 20px 28px;
    align-items: start;
  }
  #screen-outlet > [data-screen^="JP2"] [data-list="filters"] { flex-wrap: wrap; overflow: visible; }

  /* a button is at least 44 px tall to the touch (the design's 30 to 41 px pills and links); a switch keeps Apple's 51 × 31 */
  #screen-outlet > :is([data-screen^="P"], [data-screen^="O"], [data-screen^="Q"], [data-screen^="J"], [data-screen="M4"]) :is(button, a[href])[data-action]:not([data-action^="toggle"], [data-action$="-switch"], [role="switch"], .absolute, .fixed) { min-height: 44px; min-width: 44px; align-content: center; }
}