/* 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), everything fixed kept inside it, and what a
     screen draws past it cut at its edges;
   - (min-width: 640px), (min-width: 768px): the map screens' wide layout, a design's own md: classes;
   - (min-width: 700px): two panes from an unfolded Fold (700–839 px) and iPad portrait upward: declared list | detail pairs
     (data-pane="split", 380 px list + flexible detail) and foldable map | sheet docking (data-pane="map", 356 px column);
   - (min-width: 840px): wider map | sheet docking on large foldables and tablets (420 px column, 16 px gap);
   - (hover: hover) and (pointer: fine): a mouse's or a trackpad's pointer cursor, never on a touch screen.
   The blocks from 560 px up are in css/responsive-wide.css, linked right after this file with media="(min-width: 560px)", so
   a phone held upright never waits for them (PLAN-V3 QA.6); a new rule for a wide screen goes there. */
: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: its company chip is part of the line under the title since round 47, cut with an ellipsis there (css/chrome.css) */
/* 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, .rescue-switch):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%;
}
/* Two small actions on lines closer than a finger (M8: «Översätt» or «Visa original» in a message's bubble and, 4 px under
   it, «Rapportera», each 18 px tall): centred, the lower one's reach lay 13 px up, over the middle of the upper one, and
   being later in the page it took that tap (the test page, 2026-11-11: «Översätt» opened «Rapportera»). The template says
   which is which with data-hit-reach, as C11's 48 px chips do (frame.css): the upper action's reach goes up from its own
   lower edge and the lower one's down from its own upper edge. Each keeps its 44 px and they never meet; only the box the
   reach already made moves (no content here), so an action the reach leaves out stays out */
:is(#screen-outlet, #overlay-outlet) [data-screen] [data-action][data-hit-reach="up"]:not([data-hit="48"])::after { top: 100%; transform: translate(-50%, -100%); }
:is(#screen-outlet, #overlay-outlet) [data-screen] [data-action][data-hit-reach="down"]:not([data-hit="48"])::after { top: 0; transform: translate(-50%, 0); }
/* 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;
}

/* A keyboard (an iPad's, a computer's) sees where it is, over the designs' focus:outline-none: the id outranks the
   generated [data-screen="K"] .focus\:outline-none:focus. A button or a link shows it only after a key (:focus-visible),
   never after a tap; a field keeps the focus look its design draws, and a sheet's handle its own ring (frame.css). An
   outline is no box: nothing moves (tests/unit/layout/focus.test.mjs) */
:is(#screen-outlet, #overlay-outlet) [data-screen] :is(a[href], button, [role="button"], [role="switch"], [role="tab"], [data-action]):not(input, select, textarea, [data-sheet-handle]):focus-visible {
  outline: 2px solid #c084fc; outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  /* a mouse or a trackpad: every action shows the hand, a div or a span as a button does. Not where a cursor is chosen: a
     design's cursor-grab, cursor-not-allowed…, the sheet's handle (grab, frame.css), a text field's own */
  :is(#screen-outlet, #overlay-outlet) [data-screen] [data-action]:not(:disabled, [aria-disabled="true"], [class*="cursor-"], [data-sheet-handle], textarea, input:not([type="checkbox"], [type="radio"])) { cursor: pointer; }
}

@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); }
  /* (from right to left the strip's left-[320px] is right-[320px], js/core/rtl-classes.js: the same 56 px at the reading's end) */
  :is(#screen-outlet, #overlay-outlet) [data-screen="B2"] :is([class~="left-[320px]"], [class~="right-[320px]"]) { inset-inline-start: 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; }
}