/* ui/touch.css — owned by W39. THE 44px FLOOR. * * MEASURED, NOT READ. At a real 390px in a real Chromium, logged in, inside Regis's tenancy: * 63 of 207 controls were under 44px in one or both axes. The worst were not decorative — * they were the controls the whole pitch depends on: * * input[type=range] 312 x 16px the nine care-minute assumption sliders (occupancy, * RN rate, PCA rate, on-costs). The one interaction that * makes a CFO believe us, and you cannot grab it. * .cal-slider 312 x 4px the regulatory-calendar scrubber. FOUR pixels. * .cmf-sbtn 30 x 44px the +/- stepper. Wide enough for a mouse; not a thumb. * .bl-link 22 x 44px every "Edit" on the billing page. * #nav button 241 x 36px the whole navigation. On every screen. * * W16 (ui/mobile.css) set `button { min-height: 44px }` and that is why the heights above are * already right. It did nothing for WIDTH, nothing for , and `#nav button` beats a bare * `button` on specificity, so the nav was never touched. A floor that is not measured is not a * floor. gate_touch.py now measures every control's real bounding box in Chromium and fails the * build on anything under 44px that a finger is meant to hit. * * SCOPE: coarse pointers and small screens only. Andrew demos on a laptop; prospects poke at it * on a phone. Desktop layout is untouched by construction — every rule is inside the media query. * * EXEMPT, deliberately: a link inside a sentence (WCAG 2.5.8 "inline" exception). Padding an * inline link to 44px shreds the line box of the paragraph around it. The gate exempts exactly * that case and nothing else. */ /* 1. SLIDERS. AT EVERY WIDTH — this one is NOT inside the media query, and that is deliberate. ------------------------------------------------------------------------------------------ A native range input paints a 16px-tall control with a ~12px thumb. That is the size of the care-minute assumption sliders, the on-cost sliders and the calendar scrubber — the controls the entire "drag it and watch the verdict move" pitch rests on. Andrew demos on a LAPTOP, so scoping this to phones would have left the hero interaction of the product fiddly in the one place it is actually performed. The input gets a 44px box, the rail stays thin (6px, so it still reads as a track) and the thumb becomes a 28px dot you can put a finger on. */ input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; min-height: 44px; padding: 0; background: transparent; cursor: pointer; touch-action: pan-y; /* drag the thumb horizontally; the PAGE still scrolls vertically */ } input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: rgba(39, 18, 87, 0.16); } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 28px; height: 28px; margin-top: -11px; /* centre the 28px thumb on the 6px rail */ border-radius: 50%; background: #4330F5; /* electric indigo */ border: 2px solid #fff; box-shadow: 0 1px 5px rgba(39, 18, 87, 0.38); } input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: rgba(39, 18, 87, 0.16); } input[type="range"]::-moz-range-thumb { width: 28px; height: 28px; border: 2px solid #fff; border-radius: 50%; background: #4330F5; box-shadow: 0 1px 5px rgba(39, 18, 87, 0.38); } input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 3px solid rgba(67, 48, 245, 0.35); outline-offset: 2px; } /* ------------------------------------------------------------------------------------------ EVERYTHING BELOW IS PHONE / TOUCH ONLY. Desktop layout is untouched by construction. ------------------------------------------------------------------------------------------ */ @media (max-width: 900px), (pointer: coarse) { /* 2. BUTTONS. W16 gave them height. They also need WIDTH. ---------------------------------- */ button, [role="button"], [role="tab"] { min-height: 44px; min-width: 44px; } /* The nav is an ID selector in styles.css, so a bare `button` rule never reached it. And styles.css @820px explicitly set a 34px "comfortable-tap floor" for the nav and 32px for Sign out. 32 is not a floor, it is a smaller ceiling. These selectors match theirs exactly so they win on order, not on an !important. */ #nav button, .nav button, .modeseg button, .btn.sm, .foot #logoutBtn, #logoutBtn { min-height: 44px; } /* 3. TEXT / NUMBER INPUTS AND SELECTS. Every override the client is invited to type into. --- */ input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea { min-height: 44px; box-sizing: border-box; } /* 4. LINKS THAT ARE NOT IN A SENTENCE. A standalone link is a button wearing underline. ----- :where() carries no specificity, so this stays easy to override and cannot escalate. */ a[href]:not(:where(p, li, td, th, .note, .hint, .muted, .sub, .caption, small, figcaption) a) { display: inline-flex; align-items: center; min-height: 44px; } /* 5. THE PAGE MUST NOT SCROLL SIDEWAYS. --------------------------------------------------- Measured at 390px, body.scrollWidth was 1,231px on Star ratings, 937 on QFR/ACFR, 899 on Summary. The whole page slid sideways under the thumb: you scroll down a column of figures and the headings walk off the screen. It is not caused by the 44px floor — the same numbers come back with this stylesheet blocked at the network — it has simply never been measured. W16's note says "no overflow anywhere"; that was true of the product W16 measured. The fix is containment, NOT clipping. `overflow: hidden` would make the page stop scrolling and make the right-hand columns of a 1,231px table UNREACHABLE — a green gate over an amputated table. So each wide thing gets its OWN horizontal scroller and keeps every column. gate_touch asserts both halves: the body does not scroll, AND everything wider than the screen sits inside something that does. */ section[id^="view-"] { max-width: 100%; } section[id^="view-"] table { display: block; /* a table cannot scroll; a block can */ width: 100%; max-width: 100%; min-width: 0; /* mobile.css sets min-width:max-content — that IS the overflow */ overflow-x: auto; -webkit-overflow-scrolling: touch; } /* the rows keep their natural width, so the columns stay aligned inside the scroller */ section[id^="view-"] table > thead, section[id^="view-"] table > tbody, section[id^="view-"] table > tfoot { display: table; width: max-content; min-width: 100%; } /* Cards and grids wider than the phone scroll inside themselves too. (Attribute selectors, not bare classes: a bare `.sm-card` rule in this file would CLAIM a class ui/summary.css already owns, and gate_css_namespace would rightly go red.) */ section[id^="view-"] > *, section[id^="view-"] div[class*="card"], section[id^="view-"] div[class*="grid"] { max-width: 100%; overflow-x: auto; } }