/* 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}} [dir="rtl"] html[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;overflow-x:hidden !important;overflow-y:auto !important;-webkit-overflow-scrolling:touch} #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} /* A modal is a full-height sheet on a phone, not a centred box. The responsive rules here only ever matched [data-r="sheet"]; the modal component renders .xc-sheet-host and .xc-sheet and matched none of them, so every dialog kept its desktop width and its side-by-side preview column. */ .xc-sheet-host,.xc-sheet-host--wide{max-inline-size:100vw !important;inline-size:100vw !important;margin:0 !important;max-block-size:100dvh !important} .xc-sheet{flex-direction:column !important;border-radius:0 !important;max-block-size:100dvh !important;block-size:100dvh !important} .xc-sheet__main{min-inline-size:0 !important} /* The preview column sits under the form rather than beside it, and loses the divider it had when it was a column. */ .xc-sheet__prev{inline-size:100% !important;max-inline-size:100% !important;border-inline-start:0 !important;border-block-start:1px solid var(--line) !important} .xc-sheet__foot{flex-wrap:wrap !important;gap:8px !important} /* 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"] > button{flex:none !important;min-inline-size:46px !important} [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: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} [data-r="chartwrap"]{min-inline-size:520px !important} [data-r="chartscroll"]{overflow-x:auto !important} } @media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}}