/* css/responsive.css: the shell's size rules for foldables, tablets and big screens (owner-notes 68), after frame.css.
   css/stitch is generated and never edited: each rule starts at an outlet's id, so it outranks [data-screen="K"] .cls.
   Where a rule may go (tests/unit/layout/phone-safe.test.mjs and column.test.mjs keep it so):
   - no media query: only a per-screen fix that changes nothing while its row fits, the tap reach and the focus ring;
   - (max-width: 359.98px): the Fold's cover screen, below the 360 phones;
   - (min-width: 560px): the app's 480 column on a wide screen (frame.css), and everything fixed kept inside it;
   - (min-width: 640px), (min-width: 768px): the map screens' wide layout, a design's own md: classes. */
:root { --app-col: 480px; }

/* every width, one screen each: a no-op wherever the row fits. At 390 the geometry gate moved only rows that had no room
   with real data: FP4.personal (it spills there), FP4 with an English phone's «12:00 AM» (in Swedish it is unchanged),
   EP4's salon line (each name broke inside itself) and GP1's company chip (squeezed onto two lines in its pill) */
/* F1 (F2 and F3 open it): frame.css makes w-[390px] the phone's width, its min-w-[390px] held «main» at 390 (cut 23 px a side) */
:is(#screen-outlet, #overlay-outlet) [data-screen="F1"] [class~="min-w-[390px]"] { min-width: 0; }
/* O1: «SeeYouSoon CLUB» stacks when «Tillbaka» and «Medlem» leave it no room */
#screen-outlet [data-screen="O1"] header > [data-part="brand"] { flex-wrap: wrap; justify-content: center; row-gap: 2px; }
/* EP4: salon · address · city wrap under «Tjänster & priser» instead of pushing «SALONG» out */
#screen-outlet [data-screen="EP4"] .flex-1:has(> p > [data-bind="salon_name"]) { min-width: 0; }
#screen-outlet [data-screen="EP4"] .flex-1 > p:has(> [data-bind="salon_name"]) { flex-wrap: wrap; }
/* GP1: the company chip goes under the title when the company's name is long */
#screen-outlet [data-screen="GP1"] section:has(> div > [data-bind="company_name"]) { flex-wrap: wrap; row-gap: 8px; }
/* FP4, FP4.personal: a day's two times (and the break's two) stack in their column when the row has no room */
#screen-outlet :is([data-screen="FP4"], [data-screen="FP4.personal"]) [data-list="week"] :is([data-part="clocks"], [data-part="clocks"] > *) { flex-wrap: wrap; justify-content: center; row-gap: 4px; }

/* Every action drawn smaller than a finger answers a 44 × 44 tap round its middle (Q6 in frame.css did this for the taxi's
   screens, and stays as it is: it also reaches taxi controls with an absolute child, which this one leaves out).
   Not: a control that holds another control or a field (the reach would take their taps); a link inside a sentence or a
   label (A9: it would cover the consent's lines); a cell of a dense 4–7 column grid (the reaches would overlap: EP2.vecka,
   EF2's days, EP2.kassabokning's times); a control with an absolute child and no position of its own (position: relative
   would move that child); a class that draws its own ::after; data-hit="off" on it or round it.
   position: relative and a transparent ::after move no box (tests/unit/layout/tap-reach.test.mjs keeps the class list whole) */
:where(#screen-outlet, #overlay-outlet) [data-screen] :is(a, button, [role="button"])[data-action]:not(.fixed, .absolute, .sticky, .relative, [data-sheet-handle], [data-hit="off"], [data-hit48], [class*="after:"]):not(:has([data-action], .absolute, input, select, textarea)):not(:is(p, label, [data-hit="off"]) *):not(:is(.grid-cols-4, .grid-cols-5, .grid-cols-6, .grid-cols-7, [class*="repeat(7"]) > *) {
  position: relative;
}
:where(#screen-outlet, #overlay-outlet) [data-screen] :is(a, button, [role="button"])[data-action]:not([data-sheet-handle], [data-hit="off"], [data-hit48], [class*="after:"], .toggle-track, .btn-primary-sheen, .cta-button, .shimmer-btn, .shimmer-active, .shimmer-badge, .shimmer-element, .shimmer--N3-trigger, .break-card-highlight, .skeleton, .skeleton-shimmer, .skeleton-box, .map-shimmer):not(:has([data-action], input, select, textarea)):not(:is(p, label, [data-hit="off"]) *):not(:is(.grid-cols-4, .grid-cols-5, .grid-cols-6, .grid-cols-7, [class*="repeat(7"]) > *):is(.relative, .absolute, .fixed, .sticky, :not(:has(.absolute)))::after {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  min-width: 44px; min-height: 44px; width: 100%; height: 100%;
}
/* A strip that scrolls sideways (a row of chips: D1, E1, H0, K1…) never scrolls up and down. The reach round a chip as tall
   as its strip reaches past the strip's edge, where the strip clips it anyway, and would give the strip a few px to scroll
   (34 → 39 px on E1): the chips would slide under a thumb and a swipe down the page that starts on them would be lost. No
   strip in the designs has a height of its own, so none has anything else to scroll up and down (Q6's reach had already
   given the taxi's CF13, CA2 and CA6 strips 3–7 px: they stop sliding too) */
:where(#screen-outlet, #overlay-outlet) [data-screen] .overflow-x-auto:not(.overflow-y-auto, .overflow-y-scroll, .overflow-auto, .overflow-scroll):has([data-action]) {
  overflow-y: hidden;
}

@media (max-width: 359.98px) {
  /* the cover screen only: a long bound word (an e-mail, a link) breaks where it would run out of its line, a flexible
     column may shrink, a width drawn on the 390 canvas never exceeds its box (EP3.tv's 1920 board is scaled by frame.css,
     never capped). break-word, not anywhere: anywhere let a tight row squeeze a short word, «Medle m» on O1, «Må n» and
     «Arbe tar» on FP4.personal */
  :is(#screen-outlet, #overlay-outlet) [data-screen] [data-bind] { overflow-wrap: break-word; }
  :is(#screen-outlet, #overlay-outlet) [data-screen] :is(.flex-1, .grow, .flex-grow, .flex-auto) { min-width: 0; }
  :is(#screen-outlet, #overlay-outlet) [data-screen]:not([data-screen="EP3.tv"]) :is([class^="w-["], [class*=" w-["]):not(.absolute, .fixed, [class*="max-w-"]) { max-width: 100%; }
  /* B2: the menu drawer leaves 56 px beside it: «Stäng meny» (40 px) whole, its strip a tap */
  :is(#screen-outlet, #overlay-outlet) [data-screen="B2"] [class~="w-[320px]"] { width: calc(100% - 56px); }
  :is(#screen-outlet, #overlay-outlet) [data-screen="B2"] [class~="left-[320px]"] { left: calc(100% - 56px); }
  /* B3: «· Gbg» gives its room to «Granskade» */
  #screen-outlet [data-screen="B3"] [data-part="brand-city"] { display: none; }
  /* X1.protokoll: the two tyre columns beside the car give way before the card does */
  #screen-outlet [data-screen="X1.protokoll"] .shrink-0[class~="w-[95px]"] { flex-shrink: 1; min-width: 0; }
}

@media (min-width: 560px) {
  /* A fixed box is placed against the viewport, not the 480 column (#screen-outlet must never get transform, filter or
     contain: that would carry every fixed bar away with the page's scroll). Bars drawn as wide as the phone span the column.
     A drawer slid out of sight (-translate-x-full: DP3's menu) stays where it hides, off the screen; opened (the flow takes
     the class away) it is a bar like the others and opens in the column. */
  :is(#screen-outlet, #overlay-outlet) [data-screen] .fixed:is(.inset-0, .inset-x-0, .left-0.right-0, .left-0.w-full, .left-0[class~="w-[390px]"]):not([class*="translate-x-1/2"], [class*="translate-x-full"]) {
    left: max(0px, calc((100% - var(--app-col)) / 2));
  }
  :is(#screen-outlet, #overlay-outlet) [data-screen] .fixed:is(.inset-0, .inset-x-0, .left-0.right-0, .right-0.w-full):not([class*="translate-x-1/2"], [class*="translate-x-full"]) {
    right: max(0px, calc((100% - var(--app-col)) / 2));
  }
  /* D1's cart pill (fixed bottom-4 left-3 right-3) */
  :is(#screen-outlet, #overlay-outlet) [data-screen] .fixed.left-3.right-3 {
    left: calc(max(0px, (100% - var(--app-col)) / 2) + 0.75rem);
    right: calc(max(0px, (100% - var(--app-col)) / 2) + 0.75rem);
  }
  /* B5's dock: fixed with no side of its own */
  :is(#screen-outlet, #overlay-outlet) [data-screen] .fixed[class~="w-[390px]"]:not([class*="left-"], [class*="right-"], [class*="inset-"]) {
    left: max(0px, calc((100% - var(--app-col)) / 2));
  }
  /* frame.css makes w-[390px] 100 %: of the viewport, for a fixed box. Never wider than the column. */
  :is(#screen-outlet, #overlay-outlet) [data-screen] .fixed:is(.w-full, [class~="w-[390px]"]):is(:not([class*="max-w-"]), .max-w-full) {
    max-width: var(--app-col);
  }
  /* 100vw meant the phone's width */
  #screen-outlet [class~="max-w-[calc(100vw-128px)]"] { max-width: calc(var(--app-col) - 128px); }
  #screen-outlet [class~="max-w-[calc(100vw-8.5rem)]"] { max-width: calc(var(--app-col) - 8.5rem); }
  #screen-outlet [class~="max-w-[calc(100vw-196px)]"] { max-width: calc(var(--app-col) - 196px); }
  #screen-outlet [class~="max-w-[calc(100vw-48px)]"] { max-width: calc(var(--app-col) - 48px); }
  /* the body's pills pinned under the header (ride-return.js, r-system.js) and the support sheet keep to the column */
  :is(.ride-return, .live-capsule-container) {
    left: calc(max(0px, (100% - var(--app-col)) / 2) + 16px);
    right: calc(max(0px, (100% - var(--app-col)) / 2) + 16px);
  }
  .support-chat-sheet { max-width: var(--app-col); }
}

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