/* === Evara auth mobile branch — v1. ========================================= SERVED AS PLATFORM CSS. `LiveSiteHead` links this file LAST on every public-render surface, so it ships with the deploy and needs nobody to remember anything. It is ALSO appendable to websites.global_css by scripts/marketing/ship-auth-mobile-css.ts (and by scripts/marketing/ship-global-auth-css.ts, which always re-appends it so a desktop re-ship can never drop the mobile branch). That path is now belt-and-braces, not the delivery mechanism. WHY THE LINK EXISTS — measured 2026-09-05 ----------------------------------------- This file was written on 2026-09-05 and the ship script was never run. On the live https://evara.build/login served by prod sha 2a73037 the marker on line 1 of this file appeared **0 times** in the delivered HTML, so every rule below was inert and the phone layout was exactly as broken as it was before the file existed. A CSS fix whose only delivery path is a hand-run DB script is a to-do, not a fix. WHY THIS FILE EXISTS -------------------- Measured 2026-09-05 against the LIVE https://evara.build/login with the ExactQA runner (POST 127.0.0.1:9000/layout-audit) and against the page's own inline global_css: * The auth block in websites.global_css is 58,692 chars and contains ZERO @media rules. The only two @media rules in the whole 66,728-char global_css sit at offsets 7576 / 7697 — BEFORE the auth marker at 8036 — and belong to the footer. The auth design is desktop-only by construction, and it is 633 declarations of !important deep, so nothing downstream can soften it. * That produces FOUR nested padded boxes. On a 390px viewport the horizontal padding alone is: [data-element-id="el-signin-columns"] padding 32px 20px -> 40px .el--login-form (outer ghost) padding 60px 22px -> 44px .el-login-form--card padding 36px 44px -> 88px .el-login-form__surface (renderer) padding 28px 24px -> 48px total -> 220px ExactQA measured the resulting content column directly: button.el-login-form__submit had client_width 144px inside a 390px viewport while its own text needed scroll_width 316px (delta 172px, reported as text_truncation/accidental_clip). At 361px the same button was 115px wide. * The segmented rows are pinned to a fixed height and clipped: .el-login-form__tabs / .el-login-form__mode-tabs carry "height: 48px !important; overflow: hidden !important", and every segment inside carries "flex: 1 1 0 !important; height: 34px !important; max-height: 34px !important; padding: 0 12px !important". ExactQA measured each method tab at 40.67px wide / 34px tall at 390px and 30.33px wide at 359px — which is why "Login link / Password / Passkey" renders as "ogin lir / asswor / asske" in the owner's screenshot. A centred flex item clips on BOTH sides, and text-overflow never applies to a flex container, so no ellipsis appears either. * .el-login-form__form is "display: grid; grid-template-columns: repeat(2, minmax(0, 1fr))" unconditionally — a two-column form inside a 144px column. WHAT THIS BRANCH DOES --------------------- It does not restyle anything. It only (a) collapses the padding stack from 220px to 104px per 390px viewport, (b) un-pins the segmented rows so labels wrap instead of being clipped and every segment is a >= 44px tap target, (c) forces the form grid to one column, (d) stops long strings (the recipient email on the magic-link screen) from spilling past the card, and (e) adds safe-area insets. Everything in that branch is inside @media (max-width: 480px), so it cannot reach desktop. One block sits OUTSIDE that media query — the segmented-row floor directly below — because the clipping it fixes was measured at 768 and 1440 too. It is the only such block and a guard keeps it that way. SPECIFICITY, and why it is not optional — MEASURED 2026-09-05 ------------------------------------------------------------- Every selector below is the desktop selector it overrides with `html:root ` spliced onto the front (`html body ...` becomes `html:root body ...`; a `:root ` PREFIX would never match, because html is not a descendant of itself). That adds exactly one class-level unit, so each rule outranks the desktop rule it is aimed at and nothing else. This used to rely on source order instead, on the theory that the block is appended last. That theory is false for the served copy. Read back through `document.styleSheets` on the live page with the floor injected at the exact position LiveSiteHead emits it: sheet 36 /css/leaflet.css <- last platform stylesheet sheet 37 the injected floor sheet 38