/* ═══════════════════════════════════════════════════════════════════════════════════════════ los-phone.css — THE LOS ON A PHONE. The other half of los-desktop.css. ⭐ Christa, 2026-09-04: "there are gonna be times that potentially a loan officer's on the field and needs to do something in the file that's in a live file and active in order for them to like lock a loan or do something ... remember this is desktop first... but it needs to have a mobile friendly view too.... JUST in case." WHAT THIS IS NOT: a responsive redesign. The LOS stays desktop-first — that decision is hers from 8/22 and nothing here touches it. WHAT IT IS: the difference between "does not scroll sideways" and "a thumb can hit it." Measured 9/4 — every one of the 40 LOS screens that render inside 390px already had ZERO horizontal overflow, so by the old measure they all passed. Then /los/lock, the exact screen her field-LO scenario needs, turned out to have its two real actions — "Request a lock…" and "Confirm the lock…" — at 32px and 30px tall. It looked perfect in a screenshot and could not be operated in a driveway. Across all 40 screens the audit found 1025 controls under 44px. THE FLOOR: 44px, Apple HIG. Material says 48dp; 44 is the lower of the two and the one this build holds. Enforced by verify-los-touch.mjs. FOUR RULES, so this does not become a blunt instrument: 1. ⛔ NOTHING HERE FIRES ABOVE 560px. A 30px button under a mouse is correct and dense, and density is the whole point of a desktop-first LOS. Mirror image of los-desktop.css, which fires only above 1280px. Between the two, the tablet range is untouched by both. 2. ⭐ CONTROLS ONLY, never inline links. WCAG 2.5.8 sets 24px and explicitly EXEMPTS a link inside a sentence — padding every breadcrumb to 44px would make each page enormous and fix nothing a thumb was missing. The first version of the audit counted those and reported 1080 findings that were 90% noise; a list nobody can act on gets ignored entirely. 3. `min-height`, not `height`. A control whose content already needs more room keeps it; this only ever raises a floor. Nothing shrinks, so no label can be clipped by this file. 4. Row-level `display` is left alone except where a min-height cannot apply — a bare `inline` element ignores min-height, so those get `inline-flex` and nothing else. ═══════════════════════════════════════════════════════════════════════════════════════════ */ @media (max-width: 560px) { /* ── The targets. Buttons, real inputs, and links that are already styled as boxes (tabs, chips, pills, cards). A bare in running text is deliberately absent. ── */ button, [role="button"], [role="tab"], [role="switch"], summary, select, textarea, input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]), a[class*="btn"], a[class*="Btn"], a[class*="tab"], a[class*="chip"], a[class*="pill"] { min-height: 44px; } /* ⭐ A LINK INSIDE