/* css/tablet-services.css: the booked services on an iPad (beauty, cleaning, car wash, crafts, moving), in Frakt's spirit (the
   owner, 2026-11-13: «حاول اكمال التطوير على الايباد ليكون كل شيء جميل … في كل الاقسام», «جمالية الاقسام فقط لا كثر»). Loaded
   last, with tablet.css's media query (index.html), so a phone held upright never reads it. css/tablet.css (the one surface,
   the 640 px column, the glass header) and css/tablet-sections.css (E2, E3, F1, G1, H1, I1 and the list homes) stay as they
   are; this file only adds to them.

   THE IDEA, as in tablet-sections.css: from 1000 px wide (an iPad on its side, a Samsung tablet, 1280 × 800) a page that is a
   long column of cards opens to a wider canvas (--svc-col, at most 1040 px) and its cards stand side by side; a provider's
   calendar uses the whole canvas; a bar at the foot keeps the 640 px column (one button is not stretched). Upright (820,
   884 px) the 640 px column of tablet.css stays. Only the layout changes: every class, colour and control is the design's
   (rule 5), and nothing here is read below 560 px. */

@media (min-width: 560px) and (any-pointer: coarse) {
  /* E7, the drop-in queue: the design caps its page at 480 px (css/stitch/beauty/E7.css), and tablet.css's canvas padding
     inside that cap left its content 0 px wide; the page spans the screen as every other canvas does */
  #screen-outlet > [data-screen="E7"] .sys-bty-page { max-width: none; }
  /* HP2, HP3, HP4 (the car wash's team, hours and programmes): the design draws a 390 px canvas (.mobile-canvas, a class
     tablet.css does not list, capped again by .sys-cw-canvas in css/stitch/carwash/), which stood as a phone strip in the middle of the screen; it spans the screen and keeps its
     content to the column, as every other canvas */
  #screen-outlet > [data-screen] main.mobile-canvas {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
    padding-inline: max(0px, calc((100% - var(--app-col)) / 2 + 1rem)) !important;
  }
}

@media (min-width: 1000px) and (any-pointer: coarse) {
  :root { --svc-col: 1040px; --svc-gap: 20px; }

  /* the wide canvas: tablet.css pads each page's canvas to var(--app-col); on the screens below that column is the wide one.
     A bar at the foot keeps the 640 px column: one button is not stretched */
  #screen-outlet > :is([data-screen="E6"], [data-screen="E7"], [data-screen="E8"], [data-screen="EP1"], [data-screen="EP2"], [data-screen="EP2.vecka"], [data-screen="FP1.vecka"], [data-screen="HP1.vecka"], [data-screen="EP4"], [data-screen="EP5"], [data-screen="EP7"], [data-screen="F6"], [data-screen="F8"], [data-screen="FP1"], [data-screen="FP3"], [data-screen="FP5"], [data-screen="HP1"], [data-screen="HP2"], [data-screen="HP4"], [data-screen="HP6"], [data-screen="IF5"], [data-screen="IF6"], [data-screen="G2"], [data-screen="G3"]) { --app-col: var(--svc-col); }
  #screen-outlet > :is([data-screen="E6"], [data-screen="E7"], [data-screen="E8"], [data-screen="EP1"], [data-screen="EP2"], [data-screen="EP2.vecka"], [data-screen="FP1.vecka"], [data-screen="HP1.vecka"], [data-screen="EP4"], [data-screen="EP5"], [data-screen="EP7"], [data-screen="F6"], [data-screen="F8"], [data-screen="FP1"], [data-screen="FP3"], [data-screen="FP5"], [data-screen="HP1"], [data-screen="HP2"], [data-screen="HP4"], [data-screen="HP6"], [data-screen="IF5"], [data-screen="IF6"], [data-screen="G2"], [data-screen="G3"]) :is([data-chrome="actionbar"], [data-chrome="bottomnav"], .fixed.bottom-0, footer.fixed, aside.fixed) { --app-col: 640px; }

  /* ---- beauty ---------------------------------------------------------------------------------------------------------- */
  /* EP1, the salon's day: a dashboard. The price promise across, then the capacity beside the day's takings, the drop-in
     queue beside the chairs, the team beside the stamp card */
  :root:root #screen-outlet > [data-screen="EP1"]:not([data-pane]) > div > div[class~="max-w-[390px]"] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--svc-gap);
    align-content: start;
    align-items: start;
  }
  #screen-outlet > [data-screen="EP1"] div[class~="max-w-[390px]"] > :is(header, section:first-of-type, .fixed, [class~="h-[2px]"]) { grid-column: 1 / -1; }
  #screen-outlet > [data-screen="EP1"] div[class~="max-w-[390px]"] > section { min-width: 0; }

  /* the calendars, EP2 (the salon's day and week), FP1.vecka (the cleaning team's week) and HP1.vecka (the car wash's week):
     the whole wide canvas, so each column (a stylist's, a day's) is wide enough to read a booking at a glance; the header,
     the week and the staff row follow var(--app-col) above */

  /* E7, the drop-in queue: the queue card and the note at the reading start, the treatments beside them */
  #screen-outlet > [data-screen="E7"] .sys-bty-page > div.z-10:not([data-chrome]) > div.flex.flex-col.gap-4 {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--svc-gap);
    align-items: start;
  }
  #screen-outlet > [data-screen="E7"] .sys-bty-page > div.z-10:not([data-chrome]) > div.flex.flex-col.gap-4 > * { grid-column: 1; margin: 0 !important; min-width: 0; }
  #screen-outlet > [data-screen="E7"] .sys-bty-page > div.z-10:not([data-chrome]) > div.flex.flex-col.gap-4 > section:has([data-list="services"]) { grid-column: 2; grid-row: 1 / span 3; }
  #screen-outlet > [data-screen="E7"] [data-chrome="actionbar"] { max-width: 608px; margin-inline: auto; }

  /* E8, the waiting list, and E6, the wellness salons: the cards two abreast */
  #screen-outlet > [data-screen="E8"] .sys-bty-page > div.relative.z-10 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px var(--svc-gap);
    align-items: start;
  }
  #screen-outlet > [data-screen="E8"] .sys-bty-page > div.relative.z-10 > * { margin: 0 !important; min-width: 0; }
  #screen-outlet > [data-screen="E8"] .sys-bty-page > div.relative.z-10 > :not(section) { grid-column: 1 / -1; }
  #screen-outlet > [data-screen="E6"] [data-list="salons"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
  #screen-outlet > [data-screen="E6"] [data-list="salons"] > * { margin: 0 !important; min-width: 0; }

  /* EP4, the treatments, and EP5, the team: their cards two abreast */
  #screen-outlet > [data-screen="EP4"] [data-list="services"],
  #screen-outlet > [data-screen="EP5"] [data-list="staff"] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
  }
  #screen-outlet > :is([data-screen="EP4"], [data-screen="EP5"]) :is([data-list="services"], [data-list="staff"]) > * { margin: 0 !important; min-width: 0; }

  /* ---- the long forms and the dashboards of every booked service: their cards two abreast, in their order -------------- */
  /* EP7 the salon's settings, F8 the cleaning quote, FP1 the cleaning company's day, FP5 its company and prices, HP1 the car
     wash's day, HP6 its profile. The column that holds three cards or more
     is the grid; a header, a bar, a notice row or anything that is not a card spans both columns */
  #screen-outlet > :is([data-screen="EP7"], [data-screen="F8"], [data-screen="FP1"], [data-screen="FP5"], [data-screen="HP1"], [data-screen="HP6"]) :is(main, div):has(> :is(section, article, .glass-panel, .glass-card):not([data-chrome]) ~ :is(section, article, .glass-panel, .glass-card):not([data-chrome]) ~ :is(section, article, .glass-panel, .glass-card):not([data-chrome])):not(:is(section, article, .glass-panel, .glass-card) *) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--svc-gap);
    align-items: start;
    align-content: start;
  }
  #screen-outlet > :is([data-screen="EP7"], [data-screen="F8"], [data-screen="FP1"], [data-screen="FP5"], [data-screen="HP1"], [data-screen="HP6"]) :is(main, div):has(> :is(section, article, .glass-panel, .glass-card):not([data-chrome]) ~ :is(section, article, .glass-panel, .glass-card):not([data-chrome]) ~ :is(section, article, .glass-panel, .glass-card):not([data-chrome])):not(:is(section, article, .glass-panel, .glass-card) *) > * { min-width: 0; }
  #screen-outlet > :is([data-screen="EP7"], [data-screen="F8"], [data-screen="FP1"], [data-screen="FP5"], [data-screen="HP1"], [data-screen="HP6"]) :is(main, div):has(> :is(section, article, .glass-panel, .glass-card):not([data-chrome]) ~ :is(section, article, .glass-panel, .glass-card):not([data-chrome]) ~ :is(section, article, .glass-panel, .glass-card):not([data-chrome])):not(:is(section, article, .glass-panel, .glass-card) *) > :is(:not(section, article, .glass-panel), [data-chrome], .sticky, .fixed, .absolute) { grid-column: 1 / -1; }

  /* IF5 the craftsman's company and areas, IF6 the team: their groups (div.pt-1) two abreast, the profile card across */
  #screen-outlet > :is([data-screen="IF5"], [data-screen="IF6"]) main.flex-1 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--svc-gap);
    align-items: start;
    align-content: start;
  }
  #screen-outlet > :is([data-screen="IF5"], [data-screen="IF6"]) main.flex-1 > * { grid-column: 1 / -1; min-width: 0; }
  #screen-outlet > :is([data-screen="IF5"], [data-screen="IF6"]) main.flex-1 > div.pt-1 { grid-column: auto; }

  /* ---- lists of companies, people and items: two abreast ------------------------------------------------------------- */
  /* F6 the cleaning companies, FP3 the cleaners, HP2 the washers, HP4 the programmes and extras, G2 the things to move, G3 the
     moving offers */
  #screen-outlet > [data-screen="F6"] [data-list="companies"],
  #screen-outlet > [data-screen="FP3"] [data-list="team"],
  #screen-outlet > [data-screen="HP2"] [data-list="team"],
  #screen-outlet > [data-screen="HP4"] :is([data-list="packages"], [data-list="addons"]),
  #screen-outlet > [data-screen="G2"] [data-list="items"],
  #screen-outlet > [data-screen="G3"] [data-list="offers"] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    align-items: start;
  }
  #screen-outlet > :is([data-screen="F6"], [data-screen="FP3"], [data-screen="HP2"], [data-screen="HP4"], [data-screen="G2"], [data-screen="G3"]) :is([data-list="companies"], [data-list="team"], [data-list="packages"], [data-list="addons"], [data-list="items"], [data-list="offers"]) > * { margin: 0 !important; min-width: 0; }
}

/* ==========================================================================================================================
   LANDSCAPE (the owner, 2026-11-13 20:12: «the upright design on the iPad is lovely, but on its side … the sections do not
   take the whole screen»). An iPad on its side (1180 × 820, 1366 × 1024, a 1280 × 800 tablet): the page takes the whole
   width, 20 px from each edge, and what was one long column stands in two (a form, a provider's settings) or as a grid of
   cards (a list). Upright (820, 884, 1024 px wide) nothing here applies: the 640 px column and the wide canvas above stay.
   ========================================================================================================================== */
@media (min-width: 1000px) and (orientation: landscape) and (any-pointer: coarse) {
  /* a page that fills the screen: on its own, or in the frame's split as the detail alone (a salon's page opened from the
     list) or as the list with no detail beside it (css/tablet-sections.css's empty pane) */
  :root { --svc-land: calc(100vw - 2 * max(4px, var(--safe-left, 0px), var(--safe-right, 0px))); }
  :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen]):is([data-screen^="E"], [data-screen^="F"], [data-screen^="G"], [data-screen^="H"], [data-screen^="I"]) {
    --svc-col: var(--svc-land);
    --wide-col: var(--svc-land);
    --app-col: var(--svc-land);
    --list-page-col: var(--svc-land);
  }
  /* a bar at the foot keeps the 640 px column (its price and its line under the pill; one button is not stretched), and so
     does a dialog or a sheet over the page (EP5.ny's new colleague): a floating panel, not a strip across the screen */
  :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen]):is([data-screen^="E"], [data-screen^="F"], [data-screen^="G"], [data-screen^="H"], [data-screen^="I"]) :is([data-chrome="actionbar"], [data-chrome="bottomnav"], .fixed.bottom-0, footer.fixed, aside.fixed, .fixed.inset-0, [role="dialog"]) { --app-col: 640px; }

  /* the sheet a design draws as a dialog over the page (EP2.blockera's «Blockera tid», EP5.ny's new colleague; the frame
     makes their 390 px 100 %): a panel of 640 px in the middle of the foot, the page dimmed round it */
  :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen]):is([data-screen^="E"], [data-screen^="F"], [data-screen^="G"], [data-screen^="H"], [data-screen^="I"]) [role="dialog"]:is(.absolute, .relative) {
    max-width: 640px !important;
    margin-inline: auto !important;
  }

  /* a page that is one long stack of cards stands in two columns that balance (CSS columns: the cards keep their order, read
     down the first column and on in the second, and none is cut across the two). What heads the page (a header, the mode
     tabs, a row of chips) and the action bar span both. The stacks, section by section: */
  :is(
    /* crafts: I1's request (the intro, the trades, the pros, the details, the questions), I3's offers, I4's job, and the
       firm's pages: IF1 the requests, IF2 the offer, IF3 the job, IF4 the papers */
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen="I1"] [data-part="tab-request"],
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen="I3"] main,
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen="I4"] main > div.px-4,
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen^="IF1"] main > div.relative,
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen="IF2"] main,
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen="IF3"] main > div.relative,
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen="IF4"] main,
    /* beauty: E3 the times, E4 the booking, E5 the visit, EF1 the stylist's day */
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen="E3"] main,
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen="E4"] main,
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen="E5"] main > div.relative,
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen^="EF1"] main,
    /* EF2 the stylist's week, EP3 the queue's settings, EP7 the salon's settings (its groups are divs, so the wide grid
       above put every one across) */
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen^="EF2"] main,
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen^="EP3"]:not([data-screen="EP3.tv"], [data-screen="EP3.skylt"]) main,
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen="EP7"] main,
    /* cleaning: F4 the visit, FF1 the cleaner's day, FF2 the job, FP2 the company's request */
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen^="F4"] main,
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen^="FF1"] main > div.relative,
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen^="FF2"] main,
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen="FP2"] main,
    /* car wash: H1 the wash's page, H2 my wash, HF2 the washer's job */
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen="H1"] main > .sys-cw-col,
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen^="H2"] main > div.relative,
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen^="HF2"] main > div.px-4,
    /* moving: G1 the move, G2 the things, G3 the offers, G4 the booked move (its sheet), GF2 the inspection, GF3 the mover's
       job, GP1 the board (its picks beside the request chosen) */
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen="G1"] .sys-w15-stack,
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen="G2"] .sys-w15-page,
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen="G3"] main,
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen^="G4"] .sheet-track > section.z-20,
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen="GF2"] main,
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen="GF3"] main,
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen="GP1"] main
  ):not([hidden]) {
    display: block !important;
    columns: 2;
    column-gap: 24px;
  }
  :is(
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen="I1"] [data-part="tab-request"],
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen="I3"] main,
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen="I4"] main > div.px-4,
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen^="IF1"] main > div.relative,
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen="IF2"] main,
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen="IF3"] main > div.relative,
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen="IF4"] main,
    /* beauty: E3 the times, E4 the booking, E5 the visit, EF1 the stylist's day */
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen="E3"] main,
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen="E4"] main,
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen="E5"] main > div.relative,
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen^="EF1"] main,
    /* EF2 the stylist's week, EP3 the queue's settings, EP7 the salon's settings (its groups are divs, so the wide grid
       above put every one across) */
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen^="EF2"] main,
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen^="EP3"]:not([data-screen="EP3.tv"], [data-screen="EP3.skylt"]) main,
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen="EP7"] main,
    /* cleaning: F4 the visit, FF1 the cleaner's day, FF2 the job, FP2 the company's request */
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen^="F4"] main,
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen^="FF1"] main > div.relative,
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen^="FF2"] main,
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen="FP2"] main,
    /* car wash: H1 the wash's page, H2 my wash, HF2 the washer's job */
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen="H1"] main > .sys-cw-col,
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen^="H2"] main > div.relative,
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen^="HF2"] main > div.px-4,
    /* moving: G1 the move, G2 the things, G3 the offers, G4 the booked move (its sheet), GF2 the inspection, GF3 the mover's
       job, GP1 the board (its picks beside the request chosen) */
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen="G1"] .sys-w15-stack,
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen="G2"] .sys-w15-page,
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen="G3"] main,
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen^="G4"] .sheet-track > section.z-20,
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen="GF2"] main,
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen="GF3"] main,
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen="GP1"] main
  ) > * {
    break-inside: avoid;
    /* one rhythm, 16 px under each card (a design's space-y or flex gap put it over the card, and the second column's first
       card lost it at the break: the two columns' tops stood 12 to 16 px apart) */
    margin-top: 0 !important;
    margin-bottom: 16px !important;
  }
  /* E1's salons: three cards a row (css/tablet-sections.css's two at 920 px) */
  :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen="E1"] [data-list="salons"] { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
  /* G2's things and G3's offers, two abreast on the wide canvas above, stand one under the other in their column */
  :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen="G2"] [data-list="items"], :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen="G3"] [data-list="offers"] { grid-template-columns: minmax(0, 1fr) !important; }
  /* car wash: H0's washes, H3 my washes, HF1 the washer's jobs, HF1.vecka the days, and GF1 the mover's jobs: three cards a
     row */
  :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen="H0"] [data-list="companies"]:not([hidden]),
  :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen^="H3"] [data-list="upcoming"]:not([hidden]),
  :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen^="HF1"] main > div.space-y-3:not([hidden]),
  :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen="HF1.vecka"] main[data-list="days"]:not([hidden]),
  :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen^="GF1"] main > div.space-y-4:not([hidden]) { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important; gap: 12px; align-items: start; align-content: start; }
  :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen="H0"] [data-list="companies"] > *,
  :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen^="H3"] [data-list="upcoming"] > *,
  :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen^="HF1"] main > div.space-y-3 > *,
  :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen="HF1.vecka"] main[data-list="days"] > *,
  :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen^="GF1"] main > div.space-y-4 > * { margin: 0 !important; min-width: 0; }
  /* FF3 the cleaner's weeks, FP9 the requests: three cards a row */
  :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen^="FF3"] [data-list="days"]:not([hidden]), :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen^="FP9"] [data-list="requests"]:not([hidden]) { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; align-items: start; align-content: start; }
  :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen^="FF3"] [data-list="days"] > *, :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen^="FP9"] [data-list="requests"] > * { margin: 0 !important; min-width: 0; }
  /* E6's salons and EP4's treatments: three cards a row; EP9's reviews two (each a longer text) */
  :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen^="EP9"] [data-list="reviews"]:not([hidden]) { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 16px; align-items: start; align-content: start; }
  :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen^="EP9"] [data-list="reviews"] > * { margin: 0 !important; min-width: 0; }
  :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen="E6"] [data-list="salons"], :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen="EP4"] [data-list="services"] { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important; }
  /* I1's directory of pros: three cards a row, and the questions two */
  :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen="I1"] [data-part="cv-dir-list"]:not([hidden]) {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 16px;
    align-items: start;
  }
  :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen="I1"] [data-part="qa-list"]:has(> :not(.sys-cv-empty)):not([hidden]) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
  }
  :is(:is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen="I1"] :is([data-part="cv-dir-list"], [data-part="qa-list"])) > * { margin: 0 !important; min-width: 0; }
  :is(
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen="G2"] .sys-w15-page > :is(header, .sys-w15-steps-row),
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen="G3"] main > :is(section:first-of-type, section.mt-4),
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen^="G4"] .sheet-track > section.z-20 > :is(button:first-child, div:nth-child(2), div.overflow-x-auto),
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen="GP1"] main > footer,
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen^="H2"] main > div.relative > div:first-child,
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen^="FF2"] main > div:first-child,
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen="I3"] main > :is(header, section:first-of-type),
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen^="IF1"] main > div.relative > div:first-child,
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen])[data-screen="IF4"] main > div:nth-child(-n + 2),
    :is(#screen-outlet:not([data-pane]) > [data-screen], #screen-outlet[data-split-solo="true"] [data-split-role][data-screen], #screen-outlet[data-split-detail="empty"] [data-split-role="list"][data-screen]) :is([data-chrome="header"], [data-chrome="actionbar"])
  ) {
    column-span: all;
  }
}