/* ============================================================================ mobile.css — one sheet, three products: ViryaCORE, ANSR CORE, EMCORE. Asa, 18 Oct 2026: "major issues with mobile responsiveness — the swipeable tabs, 1 line, the rounded boxes look bad, the drop downs are not mobile friendly. Do a full estate scan and fix all 3 in one sweep." THE ONE RULE: a horizontal group of controls keeps its line and scrolls INSIDE ITS OWN BOX. Nothing wraps into three stacked rows, and the page never scrolls sideways. Those are the two ways a desktop screen fails on a phone and they have the same fix. THE TEST THAT COUNTS is not a screenshot — a screenshot cannot show that the page scrolls sideways. It is: document.documentElement.scrollWidth === document.documentElement.clientWidth --------------------------------------------------------------------------- HOW THE CLASS LIST WAS BUILT, and what was deliberately LEFT OUT. Every stylesheet in all three products was parsed for rules declaring flex-wrap:wrap whose last class names a horizontal group. That yielded 100 candidates. 64 are listed below. The rest are excluded ON PURPOSE, because "it wraps on a phone" is not the same as "it should slide": .row modal footers (.modal .row — justify-content:flex-end) and form field rows (.rd-page .row — align-items:flex-end). As a rail the Save button scrolls out of reach and fields stop stacking. Both are regressions; wrapping is the CORRECT behaviour here. .bar the shell header. core.css already sets .bar{flex-wrap:wrap} under max-width:900px — a deliberate decision, not an oversight. .bar__nav the burger menu's list. It is display:none on mobile and shown only inside .bar.is-open. Forcing display onto it puts the whole nav permanently on screen and breaks the burger. *-head, *__head, *-meta, *__meta, .chead-titlerow, .cbl-hrow, .b-hrow title and metadata rows. A heading that wraps above its actions reads better on a phone than one that hides them off-edge. *-row with card chrome (.arch-row, .batch-row, .rd-row, .r2-chrow, .cbl-vrow, .sa-row, .rcrow, .cb-sr-clsrow, .gw-row) these are LIST ITEMS — a record drawn as a row. Sliding one sideways hides the record's own content. form rows (.cb-row, .pm-row, .pm-pickrow, .cb-al3-fnrow) align-items:flex-end gives them away: they are fields, and a field belongs full width on a phone. NOTHING here sets `display`. Every class below already declares display:flex in its own stylesheet — that is how it was found. Declaring it again is what un-hid .bar__nav. !important appears on exactly four properties — flex-wrap, overflow-x, and a field's font-size and min-height — each of which must beat a more specific selector already in core.css or an app sheet. Every other declaration here wins on source order alone, because this sheet loads last. ========================================================================== */ /* ---- always on, every width ---------------------------------------------- */ /* Scrollbars are hidden EVERYWHERE, which is only honest because every rail below bleeds to the screen edge — the cut-off edge is the affordance that says "this scrolls". A rail that ended flush with a hidden scrollbar would have no clue at all. */ *{scrollbar-width:none;-ms-overflow-style:none} *::-webkit-scrollbar{width:0;height:0;display:none} *{-webkit-tap-highlight-color:transparent} /* THE most common cause of a real sideways dropoff: a grid or flex child defaults to min-width:auto, so one wide table or one long unbroken string pushes its column — and the whole page — wider than the screen. */ .wrap>*,.shell>*,.split>*,.grid2>*,.cards>*,.figures>*,.stats>*,.two>*{min-width:0} /* A shell must CLIP, never hide. overflow:hidden creates a scroll container, and every position:fixed child inside it — a sheet, the aura — silently starts scrolling with the page instead of staying put. */ .shell{overflow-x:clip} /* ---- the phone ----------------------------------------------------------- */ @media (max-width:760px){ /* TIER ONE — naked control groups. No chrome of their own, so they may bleed to the screen edge and pad inside. A rail with a right margin looks finished, so nobody swipes it; one that runs off the edge is visibly cut off, and that is the whole affordance. */ .actbar, .appfilter, .au-chips, .au-row, .au-seg, .b-tbar, .cb-al3-chips, .cb-al3-lvbar, .cb-bm-filters, .cb-facet, .cb-facet__pills, .cb-maprow, .cb-sk-chips, .cb-tabs, .cbkg-bar, .cbl-an-pills, .cbl-crumb, .cbl-rchips, .cbl-row, .cbx-sub2row, .cfilter, .chips, .colf-bar, .filters, .fsig-tabs, .grp-actions, .gw-bar, .hlrow, .lib-filters, .mchips, .n-frow, .od-actions, .pick__row, .pl-chips, .r1-chips, .r1-runrow, .r1-tools, .r2-urlrow, .rchips, .rp-actions, .rp-bar, .skill-filter, .tablebar, .tabs, .third, .topicfilter, .tsr-chips, .typerow { flex-wrap:nowrap !important; overflow-x:auto !important; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; /* a swipe past the end must not go Back */ scroll-snap-type:x proximity; margin-left:0; margin-right:0; padding-left:14px; padding-right:14px; border-radius:0; } /* TIER TWO — groups that carry their own card chrome: a background, a border, a pill. A segmented control keeps its pill and a save bar keeps its panel; they scroll INSIDE that shape rather than being flattened to the edge. */ .au-bar, .bulkbar, .cb-al3-seg, .cb-tabbar, .cbkg-seg, .cbl-chips, .cbl-g-bar, .cbl-rp-filters, .cbl-verbar, .ex-tabs, .fl-bar, .fld-bar, .genbar, .gw-tabs, .savebar, .usr-tabs { flex-wrap:nowrap !important; overflow-x:auto !important; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; scroll-snap-type:x proximity; } /* Both tiers: an item must hold its width instead of squashing to fit. The shell's own .tabs already scrolls but never pinned its children, so five tabs quietly compressed into illegible slivers rather than sliding. */ .actbar>*, .appfilter>*, .au-bar>*, .au-chips>*, .au-row>*, .au-seg>*, .b-tbar>*, .bulkbar>*, .cb-al3-chips>*, .cb-al3-lvbar>*, .cb-al3-seg>*, .cb-bm-filters>*, .cb-facet>*, .cb-facet__pills>*, .cb-maprow>*, .cb-sk-chips>*, .cb-tabbar>*, .cb-tabs>*, .cbkg-bar>*, .cbkg-seg>*, .cbl-an-pills>*, .cbl-chips>*, .cbl-crumb>*, .cbl-g-bar>*, .cbl-rchips>*, .cbl-row>*, .cbl-rp-filters>*, .cbl-verbar>*, .cbx-sub2row>*, .cfilter>*, .chips>*, .colf-bar>*, .ex-tabs>*, .filters>*, .fl-bar>*, .fld-bar>*, .fsig-tabs>*, .genbar>*, .grp-actions>*, .gw-bar>*, .gw-tabs>*, .hlrow>*, .lib-filters>*, .mchips>*, .n-frow>*, .od-actions>*, .pick__row>*, .pl-chips>*, .r1-chips>*, .r1-runrow>*, .r1-tools>*, .r2-urlrow>*, .rchips>*, .rp-actions>*, .rp-bar>*, .savebar>*, .skill-filter>*, .tablebar>*, .tabs>*, .third>*, .topicfilter>*, .tsr-chips>*, .typerow>*, .usr-tabs>* {flex:0 0 auto;scroll-snap-align:start;white-space:nowrap} /* THE APP MENU. Asa's phone showed it wrapped onto FOUR stacked rows, and the sub-nav cut mid-word at the right edge ("Anomaly Re..."). .bar__nav is display:none on mobile and shown only inside .bar.is-open, so it is reached THROUGH that state. Styling .bar__nav bare — which is what the first version of this sheet did, with display:flex !important — forces the closed burger menu permanently on screen. Hence the .bar.is-open prefix: specificity 0,3,0, which beats the 0,1,0 that sets wrap, so this needs no !important either. */ .bar.is-open .bar__nav{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; scroll-snap-type:x proximity} .bar.is-open .bar__nav>*{flex:0 0 auto; scroll-snap-align:start; white-space:nowrap} /* THE HEADER IS THE TOP EDGE. Asa, 20 Oct: "get rid of the curved menus — in mobile main nav be fixed to the top with glass background header ... the curves look real bad in mobile." On a desktop .bar is a floating capsule: top:14px for air, a gutter either side, a pill radius. Those three are what make it an OBJECT, and a phone has no room for an object floating in front of the content — it becomes the screen's top edge instead. The glass is already in core.css, so this is a geometry fix, not a repaint. Only the bottom hairline survives: a border down the sides of a full-bleed header draws two lines nothing needs. */ .bar{ top:0; left:0; right:0; transform:none; /* kill the desktop centring translate */ width:100%; max-width:none; border-radius:0; border-left:0; border-right:0; padding-left:max(14px,env(safe-area-inset-left)); padding-right:max(10px,env(safe-area-inset-right)); padding-top:max(9px,env(safe-area-inset-top)); } /* Every layout clears the bar through ONE variable, and moving the bar to top:0 changed its height. Measured at 390px against the real bar markup: the bar is 64px, while --bar-clear was still 92px (core.css sets 84, this product's brand sheet raises it) — a 28px dead band above the first line. 64 + a 14px breathing gap. The safe-area term is added rather than folded in, so on a notched phone this over-reserves by a few px instead of ever sliding content under the glass. */ :root{--bar-clear:calc(78px + env(safe-area-inset-top,0px))} /* And "no doubel lines": .third draws a border-bottom across the whole strip while .third a.on::after draws the active underline at bottom:-1px, sitting ON that border. One line, by design. They only separate into two visible lines when .third WRAPS and the active item ends up on a different row from the strip's bottom edge. The rail above is what fixes it — once the strip is one line again, the underline is back on the border. */ /* tables scroll in their own box, never widening the page */ .table-wrap,.tablewrap,.scroll-x,.tscroll,.tbl-wrap{ overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain} /* iOS zooms the page when a field is under 16px and will not zoom back out, and a 36px control is under the touch floor. Both are functional defects, not style preferences, which is why they carry the sheet's only !important outside the rails: core.css sets font-size:14px and min-height:36px through a selector carrying NINE :not() clauses (specificity 0,9,1), and nothing sane outruns that. Measured on the sign-in field, before -> after: font-size 14px -> 16px, height 39px -> 44px. */ input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select,textarea{font-size:16px !important; min-height:44px !important} .btn,button,[role=button]{min-height:44px} /* Touch targets. 44px is the floor. The drop-downs Asa called out keep their NATIVE appearance on purpose: there is no custom arrow image anywhere in the estate, so appearance:none would strip the only affordance a select has and leave it looking like a text box. A native select on a phone opens the OS picker, which is the most mobile-friendly control available — it needed room to be tappable, not restyling. */ select{padding:10px 12px} .btn,.chip,.pill,button{user-select:none;-webkit-user-select:none} /* The rounded boxes Asa said "look bad": at 390px a 14px radius with side margins leaves two slivers of ground either side of every card, and the corners eat the text's own margin. Tighter radius, not full bleed — negative margins are themselves a leading cause of sideways scroll. */ .card,.co,.grp-co,.co-app,.panel,.well{border-radius:10px} /* ---- actions are not tokens ------------------------------------------- --r-pill is 100px and the whole control system wears it. On a pill the radius is the POINT when the thing is a token — a chip, a status tag, a segmented tab — because a token is a small self-contained object. An action button is not an object, it is a control, and at phone width it goes full width: 100px then turns each end into a ~22px semicircle, the corners go dead, and a column of them reads as a pile of lozenges. Actions take the radius of what surrounds them, which here is 9-10px (cards, fields). .chip, .pill, .nav and the status tags keep the pill, on purpose. */ .btn,.v-btn,.bar__burger,.who__out, .btn--ghost,.btn-ai,.btn-recal,.railbtn,.send-btn{border-radius:10px} /* ---- every dialog is a bottom sheet ----------------------------------- All three overlay families are the same shape: a fixed veil that centres a box (.veil>.sheet, .v-veil>.v-sheet, .modal-bg>.modal). Centred is right on a desktop and wrong on a phone — it floats mid-screen, out of thumb reach, with dead gutters either side. A sheet is anchored to the edge the thumb is already near, and keeps its own rounded top so it still reads as a layer above the page rather than a new screen. */ .veil,.v-veil,.modal-bg{place-items:end stretch; padding:0} .sheet,.v-sheet,.modal{ width:100%; max-width:none; max-height:85dvh; /* dvh, not vh: vh counts the address bar */ border-radius:22px 22px 0 0; border-left:0; border-right:0; border-bottom:0; animation:phone-sheet-up .26s var(--ease); } /* the home indicator must not sit on top of the last control */ .sheet,.v-sheet{padding:20px 18px calc(20px + env(safe-area-inset-bottom,0px))} .modal{padding:24px 18px calc(24px + env(safe-area-inset-bottom,0px))} /* a sheet's own actions are reachable: side by side, splitting the width */ .v-sheet__acts > *,.modal .row > *{flex:1 1 0; min-width:0} /* The page already reserves 60px (core.css). All that was missing was the home indicator on a notched phone. There is no fixed bottom nav in any of the three products, so nothing more is reserved here. */ .page{padding-bottom:calc(60px + env(safe-area-inset-bottom,0px))} } /* ============================================================================ THE PHONE AUDIT FIXES (Asa, 21 Oct 2026: "go"). Measured with the phone-audit skill at 390px across ANSR CORE, ViryaCORE and EMCORE — every rule below names the finding it answers. Phone only; the desktop is untouched. ========================================================================== */ @media (max-width:760px){ /* 1 · THE HAMBURGER IS A MENU, NOT A RAIL. Opened, it was the glass header grown taller: the apps a sideways row of pills, "Change password" and "Sign out" floating as pills on the right, the page reading through the glass behind them. A phone menu is a solid panel under the header: one app per full-width row, the account below as rows, the page dimmed behind it. phone-shell.js closes it on a tap outside, Escape and a route change, and stops the page scrolling underneath. */ .bar.is-open{ background:var(--w,#fff); -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:0 0 0 100vmax rgba(17,38,46,.34); max-height:100dvh; overflow-y:auto; overscroll-behavior:contain; padding-bottom:max(8px,env(safe-area-inset-bottom)); } .bar.is-open .bar__nav{ flex-direction:column; align-items:stretch; flex-wrap:nowrap; overflow:visible; scroll-snap-type:none; gap:0; padding:6px 0 0; } .bar.is-open .bar__nav>.nav{ position:relative; display:flex; align-items:center; gap:10px; min-height:50px; padding:0 4px; border-radius:0; border-bottom:1px solid var(--line); font-size:16px; white-space:nowrap; } .bar.is-open .bar__nav>.nav[hidden]{display:none} .bar.is-open .bar__nav>.nav:last-child{border-bottom:0} /* the current app: a dot beside its name — the travelling underline belongs to a horizontal bar, and a stripe down one edge is never used */ .bar.is-open .bar__nav>.nav.on::after{ position:static; order:3; margin-left:auto; width:8px; height:8px; border-radius:50%; view-transition-name:none; } /* CompBench's PRO switch: a small tag after the name, on the name's line. It is a [role=button], so the 44px touch floor above stretched it into a tall orange block (Asa: "the PRO on mobile looks out of sync"). The tag stays small; its tap area is widened invisibly instead. */ .bar.is-open .nav-pro{position:relative; top:auto; left:auto; transform:none; order:2; display:inline-flex; align-items:center; min-height:0 !important; height:22px; margin-left:2px; padding:0 8px; border-radius:6px; font-size:10px; line-height:1} .bar.is-open .nav-pro::before{content:""; position:absolute; inset:-11px -8px} .bar.is-open .bar__who{ flex-wrap:wrap; align-items:center; gap:10px; margin:6px 0 0; padding:12px 4px 0; border-top:1px solid var(--line); } .bar.is-open .who__menu{ flex-basis:100%; width:100%; margin:6px 0 0; padding:0; min-width:0; } .bar.is-open .who__out{ min-height:50px; padding:0 4px; font-size:16px; background:none; border:0; border-top:1px solid var(--line); border-radius:0; box-shadow:none; } .bar__burger[aria-expanded="true"]{background:var(--mist,#F1F4F5)} /* 2 · A DROP-DOWN IS A SHEET. The column filter opened as a 248px box pinned under its header, half off a finger's reach. On a phone it rises from the bottom edge, full width, like every other dialog. colf.js writes top/left inline, hence the !important on those two and on position. */ html body .cfp{ /* colf.js injects its own