on the SAP page. It earns its place - without it long titles and wide rows run past the white panel onto the dark ground - but if something on this page is mysteriously clamped, look here first, and narrow this rather than adding another one beside it. */ [data-p="sap"] main *:not(.overflow-x-auto):not(.overflow-x-auto *) { max-width: 100%; } /* ---------------------------- MODALS --------------------------------- A modal is `fixed inset-0`, so it is not inside

and none of the safety nets above reach it. On a phone it should use the width it has, scroll its body, and never push the page sideways. */ [data-p="sap"] .fixed.inset-0 > div { max-width: calc(100vw - 24px) !important; } [data-p="sap"] .fixed.inset-0 > div > div { min-width: 0; } [data-p="sap"] .fixed.inset-0 .grid.grid-cols-2 { grid-template-columns: 1fr; } [data-p="sap"] .fixed.inset-0 input, [data-p="sap"] .fixed.inset-0 textarea, [data-p="sap"] .fixed.inset-0 select { font-size: 16px; max-width: 100%; } /* 16px stops iOS zooming on focus */ [data-p="sap"] .flex > button { flex: 0 0 auto; } /* the board filters were 34px tall - under what a thumb can reliably hit */ [data-p="sap"] select { min-height: 44px; } /* ======================= THE PHONE ITSELF ============================== Three things every screen needs and none of them had. */ /* 1. clear the home bar. A page that ends flush with the bottom of the glass puts its last row under the gesture area, where it cannot be tapped. */ [data-p="sap"] main, [data-p="founder"] .wrap, [data-p="crm"] .board, [data-p="crm-dashboard"] .wrap, [data-p="delivery"] .wrap, [data-p="leads"] .wrap, [data-p="report"] .wrap, [data-p="tokens"] .wrap, [data-p="spine"] .main, [data-p="floor"] .wrap, [data-p="desk"] .wrap { padding-bottom: calc(28px + env(safe-area-inset-bottom)) !important; } /* landscape, where the notch eats a side */ .app, [data-p="sap"] main, [data-p="founder"] .wrap { padding-left: max(env(safe-area-inset-left), 0px); padding-right: max(env(safe-area-inset-right), 0px); } /* 2. the header stays. One swipe used to be enough to forget which board you were on, which matters most on SAP where the boards look alike. */ [data-p="sap"] header { position: sticky; top: 0; z-index: 40; -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); } [data-p="founder"] .mission, [data-p="desk"] .head { scroll-margin-top: 8px; } /* 3. a thumb needs 44px. Several controls were under thirty. */ [data-p="sap"] button, [data-p="sap"] a[role="button"], [data-p="crm"] button, [data-p="delivery"] button, [data-p="founder"] button, [data-p="desk"] button, [data-p="leads"] button { min-height: 44px; } /* icon-only controls stay square rather than becoming tall pills */ [data-p="sap"] button:empty, [data-p="sap"] button > svg:only-child { min-width: 44px; } .chan, .offr { min-height: 44px; } /* momentum scrolling on every horizontal strip, so a kanban feels native */ [data-p="sap"] .overflow-x-auto, [data-p="spine"] .side, [data-p="founder"] .funnel, [data-p="crm"] .board { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } } @media (max-width: 560px) { input, select, textarea { font-size: 16px; } /* stops iOS zooming on focus */ [data-p="founder"] .mission h1, [data-p="floor"] h1 { font-size: clamp(24px, 7vw, 34px); } [data-p="desk"] .fun { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); } } /* ============================================================================ MOTION — the phone layer SAP's animation was ~74 hover transitions, and a phone has no hover: on touch the app simply snapped. This adds the three things an iOS app does and this one did not — content arrives, taps answer, and quantities grow. Rules held throughout: · only transform and opacity animate. Never width, height, top or left. · every hidden state is applied BY JAVASCRIPT (.m-rv). If the script fails the page renders exactly as before rather than staying blank. · prefers-reduced-motion turns all of it off. ========================================================================== */ /* Apple's settle curve: fast out, long soft landing. */ :root { --m-ease: cubic-bezier(.32, .72, 0, 1); } @media (prefers-reduced-motion: no-preference) { /* ---- content arrives ---- */ .m-rv { opacity: 0; transform: translate3d(0, 15px, 0); transition: opacity .52s var(--m-ease), transform .52s var(--m-ease); will-change: opacity, transform; } .m-rv.m-in { opacity: 1; transform: none; } .m-rv.m-done { will-change: auto; } /* ---- quantities grow ---- */ /* scaleX, not width: a bar is a leaf, so this is one GPU transform and the surrounding layout never reflows. */ .m-bar { transform: scaleX(0); transform-origin: left center; transition: transform .78s var(--m-ease); } .m-bar.m-in { transform: scaleX(1); } /* ---- a new message lands ---- */ .m-msg { animation: m-land .42s var(--m-ease) both; } @keyframes m-land { from { opacity: 0; transform: translate3d(0, 10px, 0) scale(.985); } to { opacity: 1; transform: none; } } } /* ---- taps answer ---- The one thing hover was doing that touch lost. Kept outside the reduced-motion guard: a press state is feedback, not decoration, and it is under 100ms. */ @media (hover: none) and (pointer: coarse) { [data-p="sap"] button:active, [data-p="sap"] .zc-card:active, [data-p="chat"] .chan:active, [data-p="chat"] .offr:active, [data-p="chat"] .m:active { transform: scale(.972); transition: transform .08s ease-out; } /* hover lift is meaningless on a phone and leaves cards stuck raised after a tap */ [data-p="sap"] .zc-card:hover { transform: none; } } /* ---- touch drag: the card follows the finger, the target column answers ---- */ /* touch-action:none tells the browser this gesture is ours. Without it Chrome decides a long press that moves is a pan - the card sits in a board that scrolls both ways, so it has every reason to - and fires touchcancel mid-drag. Measured: cancelled at ~650ms, twice, reproducibly. Only while dragging: permanently, it would break scrolling the board with a finger that happens to land on a card. */ body.m-dragging { -webkit-user-select: none; user-select: none; overflow: hidden; touch-action: none; } body.m-dragging .zc-card, body.m-dragging .zc-well { touch-action: none; } body.m-dragging * { -webkit-touch-callout: none; } /* while dragging, snap fights the auto-scroll and the strip never moves */ body.m-dragging .overflow-x-auto { scroll-snap-type: none !important; scroll-behavior: auto !important; } .m-ghost { opacity: .95; box-shadow: 0 18px 44px rgba(0, 0, 0, .30); transition: none !important; } [data-p="sap"] .zc-well.m-dropzone { outline: 2px dashed rgba(130, 130, 145, .55); outline-offset: -3px; transition: outline-color .12s ease; } /* ============================================================================ THE DROP BAR A phone shows one kanban column at a time, so there is no second column to drag onto. This appears only while a card is in the air on a board that is wider than the screen; drop on a name and the card goes there. ========================================================================== */ .m-movebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10000; display: flex; gap: 6px; padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(12,12,14,.94); backdrop-filter: blur(8px); border-top: 1px solid rgba(255,255,255,.12); } .m-movechip { flex: 1 1 0; min-width: 0; text-align: center; padding: 13px 4px; border-radius: 12px; font: 600 11.5px/1.15 system-ui, sans-serif; letter-spacing: .01em; color: #d4d5da; background: #23252b; border: 1px solid #34373f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .m-movechip.on { background: #FB7185; border-color: #FB7185; color: #17171a; transform: translateY(-2px); }