/* responsive — the design's own breakpoints, keyed off data-r region markers. * 1180px collapses the rail and grids; 820px is the phone layout. */ @media (max-width:1180px){ [data-r="setcell"][data-full="true"]{grid-column:1 / -1} [data-r="tbl"]{overflow-x:auto} [data-r="tblrow"]{min-inline-size:680px} [data-r="shell"],[data-r="app"],[data-r="auth"]{min-inline-size:0 !important} [data-r="rail"]{inline-size:76px !important} [data-r="rail"] .xc-nav-label,[data-r="rail"] .xc-rail-wide{display:none !important} [data-r="rail"]{padding:20px 8px !important;overflow-x:hidden !important;align-items:stretch !important} [data-r="rail"] button{justify-content:center !important;padding-inline:8px !important;gap:0 !important} [data-r="rail"] .xc-rail-row{justify-content:center !important;padding-inline:4px !important;gap:0 !important} [data-r="rail"] .xc-rail-logo{justify-content:center !important;padding-inline:0 !important} [data-r="rail"] [data-r="usermenu"] button{justify-content:flex-start !important;gap:10px !important;padding:9px 11px !important} [data-r="rail"][data-menu="1"]{overflow:visible !important} [data-r="aside"]{inline-size:264px !important} [data-r="g4"]{grid-template-columns:repeat(2,1fr) !important} [data-r="g3"]{grid-template-columns:repeat(2,1fr) !important} [data-r="hero"]{font-size:32px !important} } @media (max-width:820px){ [data-r="shell"]{min-inline-size:0 !important;block-size:auto !important;min-block-size:100vh !important;overflow:visible !important} [data-r="app"],[data-r="auth"]{min-inline-size:0 !important;flex-direction:column !important;block-size:auto !important;min-block-size:100vh !important;overflow:visible !important} [data-r="rail"],[data-r="authside"]{display:none !important} [data-r="main"]{padding:0 !important} [data-r="mainbox"]{border:0 !important;border-radius:0 !important;padding-block-end:calc(84px + env(safe-area-inset-bottom)) !important;max-inline-size:100% !important;overflow:visible !important;min-block-size:auto !important} [data-r="btm"]{padding-block-end:calc(6px + env(safe-area-inset-bottom)) !important} [data-r="burger"]{display:flex !important} [data-r="btm"]{display:flex !important} /* The drawer. app.js has set data-drawer="1" on since the burger existed, and nothing in any stylesheet has ever read it — so on a phone the three-line button set an attribute and the rail stayed display:none. The menu was not broken, it was never connected. The rail is reused rather than duplicated: one nav, one set of permissions, one place to change an entry. It needs its labels back, because the 1180px rule strips them down to icons for the narrow desktop rail. */ html[data-drawer="1"] [data-r="rail"]{display:flex !important;position:fixed !important;inset-block:0 !important;inset-inline-start:0 !important;box-sizing:border-box !important;inline-size:min(78vw,300px) !important;max-inline-size:300px !important;z-index:70 !important;overflow-y:auto !important;overflow-x:hidden !important;padding:20px 12px !important;box-shadow:0 0 50px rgba(0,0,0,.45) !important;animation:xc-drawer-in 240ms cubic-bezier(.2,.8,.25,1) both} html[data-drawer="1"] [data-r="rail"] .xc-nav-label,html[data-drawer="1"] [data-r="rail"] .xc-rail-wide{display:block !important} html[data-drawer="1"] [data-r="rail"] button,html[data-drawer="1"] [data-r="rail"] .xc-rail-row,html[data-drawer="1"] [data-r="rail"] .xc-rail-logo{justify-content:flex-start !important;padding-inline:10px !important;gap:11px !important} /* A flex item is min-width:auto, so a label that cannot shrink pushes the row wider than the drawer and hands it a horizontal scrollbar. "Onboarding checklist 3/4" wanted 353px inside 261. Let the label shrink and ellipsis. */ html[data-drawer="1"] [data-r="rail"] a,html[data-drawer="1"] [data-r="rail"] button,html[data-drawer="1"] [data-r="rail"] div{min-inline-size:0 !important} html[data-drawer="1"] [data-r="rail"] .xc-nav-label{min-inline-size:0 !important;overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important} html[data-drawer="1"] [data-r="rail"] *{overflow-x:clip} /* The scrim is the close affordance — app.js already treats any click while the drawer is open as "close", so this only has to be visible. */ html[data-drawer="1"] body::after{content:'';position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:69;animation:xc-scrim-in 200ms ease both} /* Nothing behind the drawer scrolls while it is open. */ html[data-drawer="1"],html[data-drawer="1"] body{overflow:hidden !important} @keyframes xc-drawer-in{from{transform:translateX(-100%)}to{transform:translateX(0)}} @keyframes xc-scrim-in{from{opacity:0}to{opacity:1}} html[dir="rtl"][data-drawer="1"] [data-r="rail"]{animation-name:xc-drawer-in-rtl} @keyframes xc-drawer-in-rtl{from{transform:translateX(100%)}to{transform:translateX(0)}} html,body{block-size:auto !important;min-block-size:100% !important} /* The page scrolls on the viewport, and nothing may widen it. html's overflow is handed to the viewport, so html can have hidden/auto. body cannot: the same values on body made it a scroll container of its own — one that never scrolls, because it is as tall as the page — and every position:sticky inside the page stuck to *it*, which is to say not at all. The builder's footer sat at the end of the form. clip trims the same overflow without making a scroll container. */ html{overflow-x:hidden !important;overflow-y:auto !important;-webkit-overflow-scrolling:touch} body{overflow-x:clip !important;overflow-y:visible !important} /* The same for the skip link's target, which wraps every screen with an inline overflow of its own (hidden on the tenant console, auto on the platform one) that the phone layout never needs. */ #main{overflow:clip !important} #dc-root,.sc-host{block-size:auto !important;min-block-size:100% !important;overflow:visible !important} [data-r="head"]{flex-wrap:wrap !important;align-items:flex-start !important;gap:10px !important;padding:14px 14px 10px !important} [data-r="burger"]{order:0 !important} [data-r="headtitle"]{order:1 !important;flex:1 1 auto !important} [data-r="headtitle"] h1{font-size:21px !important} [data-r="headtitle"] p{font-size:13px !important;display:-webkit-box !important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} [data-r="headtools"]{order:2 !important;flex:1 0 100% !important;flex-wrap:wrap !important;gap:8px !important} [data-r="heroblock"]{margin-inline-start:auto !important;padding-inline-start:0 !important} [data-r="hero"]{font-size:26px !important} [data-r="strip"],[data-r="quals"]{overflow-x:auto !important;scrollbar-width:none;-webkit-overflow-scrolling:touch} /* Forms, which were two columns at every width. .xc-grid is 1fr 1fr in shell.css and nothing ever overrode it, so every form in the product — the new-tenant sheet, settings, the template wizard — put two fields side by side in 375px. Each one ended up about 160px wide: wide enough to look deliberate, too narrow to type an email into. */ .xc-grid{grid-template-columns:1fr !important;gap:14px !important} .xc-f--wide{grid-column:auto !important} /* Modals: see the bottom-sheet rules in the mobile pass block below. */ /* Tapping a field must not zoom the page. iOS zooms any input under 16px. */ .xc-in,.xc-seek>input,.xc-mem__in,input,select,textarea{font-size:16px !important} [data-r="strip"]::-webkit-scrollbar,[data-r="quals"]::-webkit-scrollbar{display:none} [data-r="strip"] > a,[data-r="strip"] > button{flex:none !important;min-inline-size:46px !important;box-sizing:border-box} [data-r="quals"] > div{flex:none !important;min-inline-size:94px !important} [data-r="cols"]{flex-direction:column !important;overflow:visible !important;padding:0 12px 16px !important;gap:12px !important} [data-r="scrollcol"],[data-scrollcol="1"]{overflow:visible !important;min-block-size:auto !important;flex:0 0 auto !important} [data-r="head"]{position:relative !important} [data-r="aside"],[data-r="studioaside"]{inline-size:100% !important;flex:none !important;overflow:visible !important} [data-r="g4"]{grid-template-columns:repeat(2,1fr) !important;gap:10px !important} [data-r="g3"]{grid-template-columns:minmax(0,1fr) !important} [data-r="tbl"]{overflow-x:auto !important} [data-r="tblrow"]{min-inline-size:680px !important} [data-r="inboxlist"]{flex:1 1 auto !important;min-block-size:60vh !important} [data-r="inboxlist"][data-open="1"]{display:none !important} [data-r="inboxthread"]{min-inline-size:0 !important;min-block-size:74vh !important} [data-r="inboxthread"][data-open="0"]{display:none !important} [data-r="ovl"]{align-items:flex-end !important;padding:0 !important} [data-r="sheet"]{inline-size:100% !important;max-inline-size:none !important;max-block-size:94vh !important;border-radius:22px 22px 0 0 !important;flex-direction:column !important;animation:xc-sheet 340ms cubic-bezier(.2,.8,.25,1) both !important;inline-size:100vw !important;max-inline-size:100vw !important;overflow-x:hidden !important;overflow-y:auto !important} [data-r="sheet"] > div{min-inline-size:0 !important;max-inline-size:100% !important;box-sizing:border-box !important;flex:0 0 auto !important} [data-r="fbody"]{flex:none !important;overflow:visible !important;padding:16px 14px 20px !important} [data-r="mprev"]{inline-size:100% !important;max-inline-size:100% !important;box-sizing:border-box !important;border-inline-start:0 !important;border-block-start:1px solid var(--line) !important;order:2 !important;flex:none !important;overflow-wrap:anywhere;padding:16px 14px !important} [data-r="sheet"] > div:first-child{order:1 !important} [data-r="setnav"]{flex:none !important;inline-size:100% !important;flex-direction:row !important;overflow-x:auto !important;scrollbar-width:none;padding:8px !important} [data-r="setnav"]::-webkit-scrollbar{display:none} [data-r="setnav"] > button{flex:none !important} [data-r="setcell"][data-full="true"]{grid-column:1 / -1 !important} [data-r="setseg"]{flex-wrap:wrap !important} [data-r="igrid"]{grid-template-columns:repeat(6,1fr) !important} [data-r="cardgrid"][data-strip="true"]{grid-template-columns:1fr !important} [data-r="fgrid"]{grid-template-columns:1fr !important} [data-r="fcell"]{grid-column:1 / -1 !important} [data-r="bot"]{inset-block-end:88px !important;inset-inline:12px !important;inline-size:auto !important} [data-r="botfab"]{inset-block-end:88px !important} } @media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}} /* ══ The phone, as one set of rules every screen inherits ══════════════════ * * Built as shared behaviour rather than fixed screen by screen, because every * one of the problems below was the same problem showing up in a different * place: a component written for a wide screen with nothing telling it what * to do on a narrow one. */ @media (max-width:820px){ /* ── Forms and panels are bottom sheets ──────────────────────────────────── renders a native , centred by the browser's own margin:auto and inset:0. On a phone that left it floating 4px off the left edge with a strip of the page showing down the right — which read as a drawer that had not opened all the way. One scroll region, not three. The sheet itself scrolls; the head sticks to its top and the footer to its bottom, so Back / Next / Create are on screen however long the form is. `display:contents` on __main lets head, body, preview and footer be ordered as siblings — so the preview column scrolls *between* the form and the footer instead of after the footer. */ .xc-sheet-host,.xc-sheet-host--wide{position:fixed !important;inset:auto 0 0 0 !important;margin:0 !important;padding:0 !important;inline-size:100% !important;max-inline-size:100% !important;max-block-size:92dvh !important;block-size:auto !important;overflow:visible !important} .xc-sheet-host::backdrop{background:rgba(8,8,20,.58)} .xc-sheet{display:flex !important;flex-direction:column !important;overflow-y:auto !important;overflow-x:hidden !important;overscroll-behavior:contain;max-block-size:92dvh !important;block-size:auto !important;border-radius:22px 22px 0 0 !important;border-block-end:0 !important;box-shadow:0 -18px 50px rgba(0,0,0,.35) !important;animation:xc-sheet-up 320ms cubic-bezier(.2,.8,.25,1) both !important} .xc-sheet__main{display:contents !important} .xc-sheet__head{order:1;position:sticky;inset-block-start:0;z-index:3;background:var(--surface);padding:24px 16px 12px !important;gap:10px !important;flex-wrap:wrap} /* The handle. Centred with margin:auto rather than a transform, so it sits in the middle in both directions without a left/right in sight. It works: a downward drag on the head closes the sheet (modal.js). */ .xc-sheet__head::before{content:'';position:absolute;inset-block-start:9px;inset-inline:0;margin-inline:auto;inline-size:40px;block-size:4px;border-radius:4px;background:rgba(var(--ink),.2)} .xc-sheet__icon{inline-size:36px !important;block-size:36px !important;border-radius:12px !important} .xc-sheet__icon svg{inline-size:18px;block-size:18px} .xc-sheet__head h2{font-size:17px !important;line-height:1.25} .xc-sheet__head p{font-size:13.5px !important} .xc-sheet__body{order:2;overflow:visible !important;padding:16px !important;flex:none !important;gap:18px !important} .xc-sheet__prev{order:3} .xc-sheet__foot{order:4;position:sticky;inset-block-end:0;z-index:3;background:var(--surface);padding:12px 16px calc(12px + env(safe-area-inset-bottom)) !important} .xc-sheet__foot .xc-sheet__esc{display:none} /* Full width in the footer, primary on the end side. */ .xc-sheet__foot > button{flex:1;justify-content:center;min-block-size:48px;box-sizing:border-box} @keyframes xc-sheet-up{from{transform:translateY(100%)}to{transform:translateY(0)}} /* The wizards' own footer — agents, knowledge, team, WhatsApp, workflows all render Back / Next / Done inside the body rather than using the sheet's footer. Keyed on the hook they already share, so all five are sticky. */ .xc-sheet div:has(> [data-wizard-next]){position:sticky;inset-block-end:0;z-index:2;background:var(--surface);margin-inline:-16px;padding:12px 16px calc(12px + env(safe-area-inset-bottom)) !important;border-block-start:1px solid var(--line)} .xc-sheet div:has(> [data-wizard-next]) > button{min-block-size:48px;box-sizing:border-box} .xc-sheet div:has(> [data-wizard-next]) > button:not([hidden]){flex:1;justify-content:center} /* The empty spacer that pushes Next to the end on a desktop row. On a phone the buttons share the width, and a spacer taking half of it left "Next" at half size. Empty spans only: anything with words in it stays. */ .xc-sheet div:has(> [data-wizard-next]) > span:empty{display:none} /* One gradient at a time. With "save anywhere" on, Knowledge showed Next and Save as two identical primaries side by side — two things claiming to be the one thing to do. While Next is on screen, Save steps back to secondary; on the last step, where Next is gone, it is the primary again. */ .xc-sheet div:has(> [data-wizard-next]:not([hidden])) > [data-wizard-done]:not([hidden]){background:rgba(var(--ink),.06) !important;color:var(--text) !important;box-shadow:none !important;border:1px solid var(--line) !important} /* And the primary on the end side, whichever one it is. In the markup Next comes before Save, so on the steps where a form can be saved early the strong button sat on the start side with the quiet one after it. Back, then Save, then Next — and on the last step Back, then the one that finishes. */ .xc-sheet div:has(> [data-wizard-next]) > [data-wizard-back]{order:1} .xc-sheet div:has(> [data-wizard-next]) > [data-wizard-done]{order:2} .xc-sheet div:has(> [data-wizard-next]) > [data-wizard-next]{order:3} /* A sheet's header, rebuilt for a narrow screen. Icon, title, tag and close shared one row with the subtitle, so the subtitle got what was left — about 150px — and wrapped to six lines. The text block is opened up so title and subtitle can be placed separately: title, tag and close on the first line; the subtitle underneath, full width. */ .xc-sheet__head > div{display:contents !important} .xc-sheet__head .xc-sheet__icon{order:1} /* The title gets the row. "Add something you offer" beside its badge and the ✕ was "Add some…" — and the one word a sheet's title cannot lose is the thing it adds. The badge goes: it names the screen the sheet was opened from, and on a phone that screen is still showing above the sheet. Two lines before the title gives up, not one. */ .xc-sheet__head h2{order:2;flex:1 1 0;min-inline-size:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .xc-sheet__head .xc-sheet__badge{display:none !important} .xc-sheet__head .xc-sheet__x{order:4} .xc-sheet__head p{order:5;flex:1 1 100%;margin-block-start:2px !important} /* The step indicator: the bar on its own line, where you are underneath it. Nine segments and "about the business" beside them left the label three words tall and running off the edge. */ div:has(> [data-wizard-dots]){flex-wrap:wrap !important;row-gap:8px !important} [data-wizard-dots]{flex:1 1 100% !important} [data-wizard-dots] .xc-dot{flex:1 1 0;min-inline-size:0} [data-wizard-title]{flex:1 1 100% !important} [data-wizard-title][data-where]::before{content:attr(data-where) " · ";color:rgba(var(--ink),.45)} /* ── Fields stack in one column ───────────────────────────────────────────── Eleven views set `grid-template-columns: repeat(2,1fr)` inline, which no stylesheet reaches without matching the attribute. Scoped to forms and sheets: inside a form a two-column grid is side-by-side fields, which at 375px is two 160px boxes and a label cut in half. */ .xc-sheet [style*="grid-template-columns"],form [style*="grid-template-columns"],[data-r="g2"]{grid-template-columns:minmax(0,1fr) !important} /* ── Rows that do not fit scroll sideways ─────────────────────────────────── Tabs and filter chips wrapped onto a second line or lost their last item off the edge — "Desks" on Reports, cut in half. One row that scrolls, no scrollbar, and a fade at the end that only shows when there is more: the padding gives the fade something to cover when everything fits. */ .xc-subnav,.xc-tabs,.xc-filt,.xc-stops{display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;overflow-x:auto !important;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-inline-end:26px !important;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);inline-size:auto !important;max-inline-size:100% !important} [dir="rtl"] .xc-subnav,[dir="rtl"] .xc-tabs,[dir="rtl"] .xc-filt,[dir="rtl"] .xc-stops{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 26px),transparent)} .xc-subnav::-webkit-scrollbar,.xc-tabs::-webkit-scrollbar,.xc-filt::-webkit-scrollbar,.xc-stops::-webkit-scrollbar{display:none} .xc-subnav > *,.xc-tabs > *,.xc-filt > *,.xc-stops > *{flex:none !important;white-space:nowrap} /* A pill group scrolls when it does not fit, and is left alone when it does. No end padding here, unlike the rows above: these sit on a grey track, and padding would show as an empty stretch of track on the Reports period selector, which fits. Contacts' consent filter was 395px in 303. */ .xc-pills{max-inline-size:100% !important;overflow-x:auto !important;flex-wrap:nowrap !important;scrollbar-width:none;-webkit-overflow-scrolling:touch} .xc-pills::-webkit-scrollbar{display:none} .xc-pills > *{flex:none !important;white-space:nowrap} /* A segment never wraps its own label onto three lines. Four or more options become a 2x2 grid of equal cells — "winning them back" beside "orders" in one row of a segmented control was never going to fit a phone. */ .xc-seg label span{white-space:nowrap} .xc-seg:has(> label:nth-child(4)){display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important} .xc-seg:has(> label:nth-child(4)) label span{white-space:normal} /* ── Touch targets ────────────────────────────────────────────────────────── Forty-four points, which is the smallest thing a thumb reliably hits. Height only for text buttons; square for the icon ones. border-box on every one of these. Nothing in the product sets it globally, so on a link a min-block-size of 44px was 44px of *content* plus its padding — a 64px button, and menu rows half as tall again as the mockup. */ .xc-act,.xc-primary,.xc-mild,.xc-quiet,.xc-filt__one,.xc-tabs__one{min-block-size:44px;box-sizing:border-box} .xc-rowact__one,.xc-sheet__x,.xc-icon-btn{min-inline-size:44px;min-block-size:44px;box-sizing:border-box} /* ── The header's figure goes to the end of the tools row ─────────────────── As the mockup draws it: the three icons on the start side, the figure on the end. In the DOM it sits between the theme toggle and the language switch, so it has to be sent there explicitly. */ [data-r="heroblock"]{order:99;margin-inline-start:auto !important;padding-inline-end:0 !important} /* The three header controls, one height. The theme toggle came out 44x44, but the language switch and the bell grew to 62px with their content pinned to the top of the box — three buttons of three sizes in a row. A fixed height with the content centred; width follows the content, so "العربية" keeps its whole word. */ [data-r="headtools"] .xc-icon-btn{display:inline-flex !important;align-items:center !important;justify-content:center !important;block-size:44px !important;min-inline-size:44px;padding-block:0 !important;box-sizing:border-box} /* ── A search with its filters ────────────────────────────────────────────── AI agents put the search box and four status chips in one unwrapping row: 522px of controls in 343. The last two chips were sliced off, and that was the "hidden button behind the search" — a chip cut in half. The search takes its own line; the chips follow on the next, where all four fit; New agent gets a line of its own below them. */ [data-r="seekbar"]{flex-wrap:wrap !important;flex:1 1 100% !important;min-inline-size:0 !important} [data-r="seekbar"] > span:first-child{flex:1 1 100% !important;min-inline-size:0 !important} [data-r="seekbar"] ~ .xc-primary{flex:1 1 100%;justify-content:center} /* ── The menu drawer ──────────────────────────────────────────────────────── As the mockup draws it: the full height of the screen from the start edge, over the tab bar, with a ✕ in its head. It was the desktop rail let loose — a floating card 16px in from every edge, still wearing the rail's margin and corners, with the tab bar showing beneath it. One scroll for the whole drawer. The nav list scrolled inside it with a bar of its own, next to a footer that did not scroll: two scroll regions in a 300px column, one of them marked by a grey bar through the middle. */ html[data-drawer="1"] [data-r="rail"]{margin:0 !important;border-radius:0 !important;inline-size:min(300px,86vw) !important;max-inline-size:none !important;gap:18px !important;padding:20px 14px calc(20px + env(safe-area-inset-bottom)) !important;overscroll-behavior:contain;scrollbar-width:none} html[data-drawer="1"] [data-r="rail"]::-webkit-scrollbar{display:none} html[data-drawer="1"] [data-r="rail"] [data-keep-scroll="rail"]{flex:none !important;overflow:visible !important;min-block-size:auto !important} html[data-drawer="1"] [data-r="rail"] .xc-rail-logo{padding-inline:8px 0 !important} html[data-drawer="1"] [data-r="rail"] .xc-rail-logo > span{flex:1 1 auto;font-size:16px !important} html[data-drawer="1"] [data-r="rail"] .xc-rail-x{display:flex !important;align-items:center;justify-content:center !important;flex:none;inline-size:44px;block-size:44px;padding:0 !important;border:0;border-radius:12px;background:rgba(var(--rail-ink),.08);color:inherit;cursor:pointer} /* Thumb-sized rows, and no hints that belong to a keyboard or a mouse: the ⌘K on the search, and the hover labels the icon-only rail uses. */ html[data-drawer="1"] [data-r="rail"] .xc-nav-btn{padding-block:11px !important;min-block-size:44px;box-sizing:border-box} html[data-drawer="1"] [data-r="rail"] .xc-pop__on,html[data-drawer="1"] [data-r="rail"] .xc-search-btn{min-block-size:44px;box-sizing:border-box} html[data-drawer="1"] [data-r="rail"] [data-kbd]{display:none !important} /* The rule above that brings the labels back sets display:block on every .xc-rail-wide — which put your role on the same line as your name. */ html[data-drawer="1"] [data-r="rail"] .xc-pop__who{display:flex !important} /* The account and help menus span the drawer's footer, with rows a thumb can hit. The drawer's min-inline-size:0 on every div had squeezed them to the width of their longest word. */ html[data-drawer="1"] [data-r="rail"] .xc-pop__sheet{inset-inline:0 !important;min-inline-size:0 !important} html[data-drawer="1"] [data-r="rail"] .xc-pop__item{min-block-size:44px;box-sizing:border-box} html[data-drawer="1"] [data-r="rail"] [data-tip]::after{content:none !important} html[data-drawer="1"] body::after{background:rgba(var(--scrim),.66) !important;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)} /* ── Search fills the screen ──────────────────────────────────────────────── A box 12vh down with the keyboard up covered half of what it found. On a phone it is the whole screen, results scroll under the field, and a ✕ is the way out — there is no Escape key and no backdrop left to tap. */ .xc-lookup{inline-size:100% !important;max-inline-size:100% !important;block-size:100dvh !important;max-block-size:100dvh !important;margin:0 !important;border:0 !important;border-radius:0 !important;box-shadow:none !important} .xc-lookup[open]{display:flex;flex-direction:column} .xc-lookup__head{padding-block:calc(6px + env(safe-area-inset-top)) 6px !important;padding-inline:16px 8px !important} .xc-lookup__esc{display:none !important} .xc-lookup__x{display:flex !important} .xc-lookup__rows{flex:1;max-block-size:none !important;padding-block-end:calc(8px + env(safe-area-inset-bottom)) !important} .xc-lookup__row{min-block-size:44px;box-sizing:border-box;align-items:center !important} /* ── The tour ─────────────────────────────────────────────────────────────── A card across the screen, above the tab bar it starts by pointing at, with its buttons thumb-sized. tour.js places it. */ .xc-tour__card{inline-size:calc(100vw - 24px) !important} .xc-tour__btn{min-block-size:44px;box-sizing:border-box} /* ── The bell's sheet ─────────────────────────────────────────────────────── The full height of the screen, over the tab bar, with a sliver of the page left showing at the top so it still reads as a sheet over something. Mark all read sits between the title and the ✕. */ dialog.xc-notes-host.xc-sheet-host{block-size:calc(100dvh - 12px - env(safe-area-inset-top)) !important;max-block-size:none !important} dialog.xc-notes-host .xc-sheet{block-size:100% !important;max-block-size:none !important;border-radius:22px 22px 0 0 !important;border-inline-end:1px solid var(--line)} .xc-notes-host .xc-sheet__head .xc-act{order:3} /* ── An open thread's head ────────────────────────────────────────────────── Back, the contact and who holds it on the first row; the team, the workflow and the assignee on the next, sharing the width. All six were in one wrapping row, so the name was squeezed to "S…" and the owner's chip sat on top of the phone number. The empty ::after is the line break: a flex item a whole row wide, ordered between the two groups. */ [data-r="threadhead"]{padding:12px 14px !important;gap:10px !important} [data-r="threadhead"]::after{content:'';flex:1 0 100%;order:1;block-size:0;margin-block:-5px} [data-r="threadhead"] > form{order:2;flex:1 1 0 !important;min-inline-size:0} [data-r="threadhead"] > form select{inline-size:100%;max-inline-size:none !important;min-block-size:44px;box-sizing:border-box;font-size:16px !important} [data-r="threadhead"] .xc-who{gap:10px} [data-r="threadhead"] .xc-who > span > span:last-child{flex-wrap:wrap;row-gap:4px} /* ── The workflow builder takes the whole screen ──────────────────────────── Six screens of a form somebody is in the middle of. The app's header and the tab bar took most of the first screen, the six stops wrapped onto two rows, and the buttons that move it on were below the fold. On a phone it is a full-screen task: its own head with the way back, the stops in one row that scrolls to the current one (rows.js), and its buttons pinned to the bottom. overflow:clip rather than hidden on the panel, which is what lets the footer stick: hidden makes a scroll container, and a sticky child sticks to that instead of to the screen. */ body:has([data-focus]) [data-r="head"],body:has([data-focus]) [data-r="btm"]{display:none !important} body:has([data-focus]) [data-r="mainbox"]{padding-block-end:0 !important} body:has([data-focus]) [data-r="cols"]{padding:0 !important} .xc-aurora:has([data-focus]){overflow:clip !important;border:0 !important;border-radius:0 !important;min-block-size:100dvh;padding:calc(14px + env(safe-area-inset-top)) 16px 0 !important} /* And at the foot of the screen when the form is short, not halfway up it. */ .xc-aurora:has([data-focus]) > form{flex:1 0 auto} [data-r="feet"]{margin-block-start:auto;position:sticky;inset-block-end:0;z-index:5;background:var(--surface) !important;margin-inline:-16px;padding:12px 16px calc(12px + env(safe-area-inset-bottom)) !important;border:0 !important;border-block-start:1px solid var(--line) !important;border-radius:0 !important;flex-wrap:nowrap !important} [data-r="feet"] > span:empty,[data-r="feet"] > span[style*="flex:1"],[data-r="feet"] > .xc-bar__state{display:none !important} [data-r="feet"] > a,[data-r="feet"] > button,[data-r="feet"] > form{flex:1 1 0;min-inline-size:0} [data-r="feet"] > a,[data-r="feet"] > button,[data-r="feet"] > form > button{inline-size:100%;justify-content:center;min-block-size:48px;box-sizing:border-box;white-space:nowrap} /* ── A workflow's actions ─────────────────────────────────────────────────── Four equal buttons, two by two, and Delete across the foot with its word showing. They were a wrapping row of five sizes — Edit and "Set live" on one line, "Duplicate" and "Run it now" on the next, a lone bin at the end — which is the layout of whatever happened to fit. */ [data-r="wfacts"]{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px !important} [data-r="wfacts"] > form,[data-r="wfacts"] > a{min-inline-size:0;display:flex} [data-r="wfacts"] .xc-act{flex:1;inline-size:100%;justify-content:center} [data-r="wfacts"] > form:last-child{grid-column:1 / -1} [data-r="wfacts"] .xc-act__word{display:inline} [data-r="wfacts"] .xc-act--icon{inline-size:100%;gap:8px} /* The confirmation is a sheet too — the same handle, from the same edge, with the two buttons sharing the width and the destructive one on the end. */ dialog[data-confirm-dialog]{position:fixed !important;inset:auto 0 0 0 !important;margin:0 !important;inline-size:100% !important;max-inline-size:100% !important;max-block-size:92dvh} dialog[data-confirm-dialog]::backdrop{background:rgba(8,8,20,.58)} dialog[data-confirm-dialog] > div{position:relative;border-radius:22px 22px 0 0 !important;border-block-end:0 !important;padding:28px 16px calc(16px + env(safe-area-inset-bottom)) !important;animation:xc-sheet-up 320ms cubic-bezier(.2,.8,.25,1) both} dialog[data-confirm-dialog] > div::before{content:'';position:absolute;inset-block-start:9px;inset-inline:0;margin-inline:auto;inline-size:40px;block-size:4px;border-radius:4px;background:rgba(var(--ink),.2)} dialog[data-confirm-dialog] > div > div:last-child > button{flex:1;justify-content:center;min-block-size:48px} /* ── Dashboard ────────────────────────────────────────────────────────────── The card head: title and subtitle across the full width, days / weeks / months on a row of their own beneath as three equal segments. Side by side they left the subtitle a column four words wide. */ [data-r="cardhead"]{flex-wrap:wrap !important;gap:14px !important} [data-r="cardhead"] > div:first-child{flex:1 1 100% !important} [data-r="gran"]{flex:1 1 100% !important} [data-r="gran"] > a{flex:1 1 0;display:flex;align-items:center;justify-content:center;min-block-size:38px} /* The date strip scrolls like any other row of chips — with the fade at the end that says there is more. rows.js opens it on the chosen day. */ [data-r="strip"]{padding-inline-end:26px;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent)} [dir="rtl"] [data-r="strip"]{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 26px),transparent)} /* The chart fits the card. Thirteen dates, or twelve months, do not fit under it at a readable size — every other one does. */ [data-r="xticks"]:has(> span:nth-child(8)) > span:nth-child(even){visibility:hidden} /* The crosshair is a :hover rule, and a phone has no hover. A tap focuses the column instead (tabindex=-1), which shows the same figures. */ .xc-chart-cell:focus .xc-chart-rule,.xc-chart-cell:focus .xc-chart-dot,.xc-chart-cell:focus .xc-chart-tip{opacity:1} .xc-chart-cell:focus{outline:0} /* The bell leads the row, as the mockup draws it: the one control on it that can have something new behind it. */ [data-r="bell"]{order:-1} /* ── Reports: the period and the download ─────────────────────────────────── The row holding them was flex:0 0 auto, so it would not shrink and its own flex-wrap never had a narrower box to wrap inside. Download sat at 442px on a 375px screen. Full width, and Download wraps to a line of its own. */ div:has(> .xc-pills){flex:1 1 100% !important;min-inline-size:0 !important} [data-r="g4"][data-stack]{grid-template-columns:minmax(0,1fr) !important} div:has(> .xc-pills) > .xc-act{flex:1 1 100%;justify-content:center} /* ── Tables scroll inside their own box ───────────────────────────────────── The mockup's answer for a table on a phone, and already in this file for [data-r="tbl"] — but only two views carry that hook. Every other table in the product is a class of its own, and none of them was covered: What you sell fixed columns of 136 + 96 + 88px left the item's name and description zero pixels wide. You could not see what the row was for. Contacts each row's consent badge sat 170px past the row's edge. The box scrolls; the page does not. Rows keep the width their columns were designed for, so nothing collapses to nothing. */ .xc-tbl,.xc-rows,.xc-co,.xc-au{overflow-x:auto !important;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain} .xc-tbl__head,.xc-tbl__row,.xc-rows__one,.xc-co__head,.xc-co__row,.xc-au__head,.xc-au__row{min-inline-size:680px} }