/* house-phone.css: the phone rules every page shares, in the house style. * * Ben, 18 Sep 2026: "the dashboard is very far away from being mobile responsive." * * The page wrappers clip anything wider than the screen (house-mobile.css, rule 6), so a page * that overflows looks tidy and is missing its right-hand side. These rules are the shared part * of the fix; each page's own layout is fixed in its own CSS, and tests/phone/ measures both. * * Every selector carries the house-shell prefix, and this sheet loads AFTER house.css and * house-mobile.css, so on a tie it wins. Loaded last on purpose: a rule here that needs * !important is one that is beating an !important in house.css. * * Primitives (any width, no prefix needed by the page): * .rsp-grid a grid whose columns come from --rsp-cols (desktop) and collapse to one column * on a phone unless --rsp-cols-phone says otherwise. Replaces inline * style="grid-template-columns: ..." one attribute at a time. * .rsp-scroll a deliberately scrollable table: wrap the , and the first column stays * pinned so the row keeps its name while the numbers scroll. * .rsp-stack a flex row that becomes a column on a phone. * .rsp-strip a row of pills or tabs that scrolls sideways instead of wrapping into a heap. * table[data-mobile="cards"] one white tile per row on a phone (mobile-tables.js labels the * cells from the header). Re-declared here at the phone breakpoint: the old rule * only kicked in under 640px, so the 641 to 767px band got neither treatment. */ /* ── primitives, all widths ─────────────────────────────────────────────── */ html:root[data-design-mode][data-theme][data-palette] body#opt-house .rsp-grid { display: grid; grid-template-columns: var(--rsp-cols, minmax(0, 1fr)); gap: var(--rsp-gap, 16px); } html:root[data-design-mode][data-theme][data-palette] body#opt-house .rsp-grid > * { min-width: 0; } html:root[data-design-mode][data-theme][data-palette] body#opt-house .rsp-scroll { position: relative; max-width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; border-radius: 14px; } html:root[data-design-mode][data-theme][data-palette] body#opt-house .rsp-scroll > table { width: max-content; min-width: 100%; } html:root[data-design-mode][data-theme][data-palette] body#opt-house .rsp-scroll > table > thead > tr > th:first-child, html:root[data-design-mode][data-theme][data-palette] body#opt-house .rsp-scroll > table > tbody > tr > td:first-child, html:root[data-design-mode][data-theme][data-palette] body#opt-house .rsp-scroll > table > tbody > tr > th:first-child { position: sticky; left: 0; z-index: 2; background: var(--hs-paper) !important; box-shadow: 1px 0 0 var(--hs-line); max-width: 45vw; overflow: hidden; text-overflow: ellipsis; } html:root[data-design-mode][data-theme][data-palette] body#opt-house .rsp-scroll > table > thead > tr > th:first-child { z-index: 3; } html:root[data-design-mode][data-theme][data-palette] body#opt-house .rsp-scroll.is-cut::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 28px; pointer-events: none; background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--hs-paper)); } html:root[data-design-mode][data-theme][data-palette] body#opt-house .rsp-strip { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; } html:root[data-design-mode][data-theme][data-palette] body#opt-house .rsp-strip::-webkit-scrollbar { display: none; } html:root[data-design-mode][data-theme][data-palette] body#opt-house .rsp-strip > * { flex: 0 0 auto; } @media (max-width: 767.98px) { /* ── 1. the whole canvas ──────────────────────────────────────────────── */ html:root[data-design-mode][data-theme][data-palette] body#opt-house .rsp-grid { grid-template-columns: var(--rsp-cols-phone, minmax(0, 1fr)); gap: var(--rsp-gap-phone, 12px); } html:root[data-design-mode][data-theme][data-palette] body#opt-house .rsp-stack { display: flex !important; flex-direction: column !important; align-items: stretch !important; } html:root[data-design-mode][data-theme][data-palette] body#opt-house .rsp-stack > * { width: auto !important; max-width: none !important; min-width: 0 !important; } /* .app-content is a flex container, and a flex item's minimum width is its content's: a page holding a scrollable table grew to the TABLE's width and was clipped (LTV audit, 1,292px). Every page block may shrink to the screen; the scrollers inside it then do their job. */ html:root[data-design-mode][data-theme][data-palette] body#opt-house .app-content > *:not(#rsp) { min-width: 0 !important; max-width: 100% !important; } /* words and addresses longer than the screen wrap instead of pushing the page out */ html:root[data-design-mode][data-theme][data-palette] body#opt-house .app-content { overflow-wrap: anywhere; } html:root[data-design-mode][data-theme][data-palette] body#opt-house .app-content pre, html:root[data-design-mode][data-theme][data-palette] body#opt-house .app-content code, html:root[data-design-mode][data-theme][data-palette] body#opt-house .app-content .rsp-scroll { overflow-wrap: normal; } /* pictures, maps, embeds and drawings never wider than the screen */ html:root[data-design-mode][data-theme][data-palette] body#opt-house .app-content img, html:root[data-design-mode][data-theme][data-palette] body#opt-house .app-content video, html:root[data-design-mode][data-theme][data-palette] body#opt-house .app-content canvas, html:root[data-design-mode][data-theme][data-palette] body#opt-house .app-content iframe, html:root[data-design-mode][data-theme][data-palette] body#opt-house .app-content svg:not(.bi) { max-width: 100%; } html:root[data-design-mode][data-theme][data-palette] body#opt-house .app-content img, html:root[data-design-mode][data-theme][data-palette] body#opt-house .app-content video { height: auto; } /* ── 2. text boxes at 16px: under that, iOS zooms the whole page on focus ── :not(#rsp) adds an id's worth of specificity, so this beats every house.css and page rule that sizes a text box, however specific, without naming any of them. */ html:root[data-design-mode][data-theme][data-palette] body#opt-house .form-control:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .form-select:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house textarea:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house select:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="hidden"]):not(#rsp) { font-size: 16px !important; } /* ── 3. one white tile per row ────────────────────────────────────────── */ html:root[data-design-mode][data-theme][data-palette] body#opt-house table[data-mobile="cards"] { display: block !important; width: 100% !important; overflow: visible !important; } html:root[data-design-mode][data-theme][data-palette] body#opt-house table[data-mobile="cards"] > thead, html:root[data-design-mode][data-theme][data-palette] body#opt-house table[data-mobile="cards"] > colgroup { display: none !important; } html:root[data-design-mode][data-theme][data-palette] body#opt-house table[data-mobile="cards"] > tbody, html:root[data-design-mode][data-theme][data-palette] body#opt-house table[data-mobile="cards"] > tbody > tr, html:root[data-design-mode][data-theme][data-palette] body#opt-house table[data-mobile="cards"] > tbody > tr > td, html:root[data-design-mode][data-theme][data-palette] body#opt-house table[data-mobile="cards"] > tbody > tr > th { display: block !important; width: 100% !important; box-sizing: border-box; } /* a row the page has hidden (a folded detail row, a filtered-out row) stays hidden */ html:root[data-design-mode][data-theme][data-palette] body#opt-house table[data-mobile="cards"] > tbody > tr[hidden], html:root[data-design-mode][data-theme][data-palette] body#opt-house table[data-mobile="cards"] > tbody > tr.d-none, html:root[data-design-mode][data-theme][data-palette] body#opt-house table[data-mobile="cards"] > tbody > tr[style*="display:none"], html:root[data-design-mode][data-theme][data-palette] body#opt-house table[data-mobile="cards"] > tbody > tr[style*="display: none"], html:root[data-design-mode][data-theme][data-palette] body#opt-house table[data-mobile="cards"] > tbody > tr > td[hidden] { display: none !important; } html:root[data-design-mode][data-theme][data-palette] body#opt-house table[data-mobile="cards"] > tbody > tr { border: 1px solid var(--hs-line) !important; border-radius: 18px !important; padding: 12px 14px !important; margin: 0 0 10px !important; background: var(--hs-paper) !important; box-shadow: var(--hs-shadow-tile) !important; } html:root[data-design-mode][data-theme][data-palette] body#opt-house table[data-mobile="cards"] > tbody > tr > td, html:root[data-design-mode][data-theme][data-palette] body#opt-house table[data-mobile="cards"] > tbody > tr > th { padding: 3px 0 !important; border: 0 !important; text-align: left !important; white-space: normal !important; background: transparent !important; min-height: 0 !important; } html:root[data-design-mode][data-theme][data-palette] body#opt-house table[data-mobile="cards"] > tbody > tr > td[data-label]::before { content: attr(data-label); display: block; font: 600 10.5px/1.4 var(--hs-font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--hs-ink-mute); margin: 4px 0 0; } html:root[data-design-mode][data-theme][data-palette] body#opt-house table[data-mobile="cards"] > tbody > tr > td[data-mobile-title], html:root[data-design-mode][data-theme][data-palette] body#opt-house table[data-mobile="cards"] > tbody > tr > td.rsp-title { font-weight: 600 !important; font-size: 15px !important; } html:root[data-design-mode][data-theme][data-palette] body#opt-house table[data-mobile="cards"] > tbody > tr > td[data-mobile-title]::before, html:root[data-design-mode][data-theme][data-palette] body#opt-house table[data-mobile="cards"] > tbody > tr > td.rsp-title::before { display: none; } html:root[data-design-mode][data-theme][data-palette] body#opt-house table[data-mobile="cards"] > tbody > tr > td[data-mobile-hide], html:root[data-design-mode][data-theme][data-palette] body#opt-house table[data-mobile="cards"] > tbody > tr > td:empty { display: none !important; } html:root[data-design-mode][data-theme][data-palette] body#opt-house table[data-mobile="cards"] > tbody > tr > td[data-mobile-action], html:root[data-design-mode][data-theme][data-palette] body#opt-house table[data-mobile="cards"] > tbody > tr > td.rsp-actions { display: flex !important; flex-wrap: wrap; gap: 8px; margin-top: 8px; padding-top: 10px !important; border-top: 1px solid var(--hs-line) !important; } html:root[data-design-mode][data-theme][data-palette] body#opt-house table[data-mobile="cards"] > tbody > tr > td[data-mobile-action]::before, html:root[data-design-mode][data-theme][data-palette] body#opt-house table[data-mobile="cards"] > tbody > tr > td.rsp-actions::before { display: none; } html:root[data-design-mode][data-theme][data-palette] body#opt-house table[data-mobile="cards"] > tbody > tr > td[data-mobile-action] .btn, html:root[data-design-mode][data-theme][data-palette] body#opt-house table[data-mobile="cards"] > tbody > tr > td.rsp-actions .btn { min-height: 40px; } /* ── 4. a scrollable table never lets the page pan; the pinned column stays readable ── */ html:root[data-design-mode][data-theme][data-palette] body#opt-house .rsp-scroll { margin-left: 0; margin-right: 0; } html:root[data-design-mode][data-theme][data-palette] body#opt-house .rsp-scroll > table > thead > tr > th:first-child, html:root[data-design-mode][data-theme][data-palette] body#opt-house .rsp-scroll > table > tbody > tr > td:first-child { max-width: 44vw; } /* ── 5. controls a thumb can hit ──────────────────────────────────────── */ html:root[data-design-mode][data-theme][data-palette] body#opt-house .notification-bell-btn, html:root[data-design-mode][data-theme][data-palette] body#opt-house .topbar-search-trigger, html:root[data-design-mode][data-theme][data-palette] body#opt-house .design-mode-toggle { min-width: 40px !important; min-height: 40px !important; } html:root[data-design-mode][data-theme][data-palette] body#opt-house .app-content .btn:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .app-content button:not(.bare):not(.icon-btn):not([class*="close"]):not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .app-content select:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .app-content .form-select:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .app-content .pill.editable:not(#rsp) { min-height: 40px !important; } html:root[data-design-mode][data-theme][data-palette] body#opt-house .app-content .btn-sm:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .app-content .btn-xs:not(#rsp) { min-height: 40px !important; padding-top: 8px !important; padding-bottom: 8px !important; } html:root[data-design-mode][data-theme][data-palette] body#opt-house .app-content .icon-btn:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .app-content .bare:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .app-content button.as-expand:not(#rsp) { min-width: 40px !important; min-height: 40px !important; } /* an icon-only button is tall enough and 15 to 38px wide: every button gets a thumb's width */ html:root[data-design-mode][data-theme][data-palette] body#opt-house .app-content button:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .app-content .btn-close:not(#rsp) { min-width: 40px !important; } html:root[data-design-mode][data-theme][data-palette] body#opt-house .app-content .btn-close:not(#rsp) { min-height: 40px !important; } html:root[data-design-mode][data-theme][data-palette] body#opt-house .app-content .btn:not(#rsp) { display: inline-flex; align-items: center; justify-content: center; } html:root[data-design-mode][data-theme][data-palette] body#opt-house .app-content [role="tab"]:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .app-content .gmb-tab:not(#rsp) { min-height: 40px !important; } html:root[data-design-mode][data-theme][data-palette] body#opt-house .app-content summary:not(#rsp) { min-height: 40px; display: flex; align-items: center; } html:root[data-design-mode][data-theme][data-palette] body#opt-house .app-content .score-dot.is-clickable:not(#rsp) { width: 40px !important; height: 40px !important; min-width: 40px !important; display: inline-flex !important; align-items: center; justify-content: center; } } /* ---- 7. pop-ups are full-screen sheets on a phone (Ben, 18 Sep 2026: "make all pop-ups scrollable on mobile ... the Client Brain edit just isn't responsive at all") ------------------------ Bootstrap's .modal already got this in house-mobile.css. These are the custom families. Each sheet is pinned to the viewport at 100dvh (Safari's bottom bar cannot hide the footer), its body scrolls, fields go to one column, and house-phone.js locks the page behind. */ @media (max-width: 767.98px) { html:root[data-design-mode][data-theme][data-palette] body#opt-house .ce2-overlay:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .nx-modal-overlay:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .gmb-modal-overlay:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .br-modal-backdrop:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .payments-modal-shroud:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .dm-modal-backdrop:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .am-drill-overlay:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .cm-modal-backdrop:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .cm-emodal:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .share-modal-overlay:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .cm-rpt-overlay:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .hg-overlay:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-drawer-overlay:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .cb-sheet-overlay:not(#rsp) { padding: 0 !important; align-items: stretch !important; justify-content: stretch !important; } html:root[data-design-mode][data-theme][data-palette] body#opt-house .ce2-modal:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .cm-emodal .cm-edit-modal:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .cm-edit-modal:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .nx-modal:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .gmb-modal:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .br-modal:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .payments-modal:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .dm-modal:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .am-drill-panel:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .share-modal-overlay .share-modal-content:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .cm-modal-dialog:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .cmov-modal:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .opt-modal-content:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .cb-sheet:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-drawer:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .hg-overlay .hg-panel:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .cm-cannibal-panel:not(#rsp) { position: fixed !important; inset: 0 !important; width: 100% !important; max-width: none !important; min-width: 0 !important; height: 100vh !important; height: 100dvh !important; max-height: 100vh !important; max-height: 100dvh !important; margin: 0 !important; border-radius: 0 !important; border-left: 0 !important; border-right: 0 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; overflow-y: auto !important; /* the whole sheet scrolls unless a body below takes over */ -webkit-overflow-scrolling: touch; overscroll-behavior: contain; transform: none !important; animation: none !important; box-sizing: border-box !important; } html:root[data-design-mode][data-theme][data-palette] body#opt-house .ce2-modal:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .cm-edit-modal:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .gmb-modal:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .br-modal:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .payments-modal:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .dm-modal:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .am-drill-panel:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-drawer:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .cb-sheet:not(#rsp) { overflow: hidden !important; /* head and foot stay put, the body scrolls */ } html:root[data-design-mode][data-theme][data-palette] body#opt-house .ce2-panes:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .cm-edit-modal__body:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .nx-modal-body:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .gmb-modal-body:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .br-modal-body:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .payments-modal-body:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .dm-modal__body:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .am-drill-body:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-drawer-body:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .cb-sheet-scroll:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .share-modal-body:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .cm-modal-body:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .cmov-modal-body:not(#rsp) { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; overflow-x: auto !important; /* a wide table scrolls sideways inside the sheet */ -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-left: 16px !important; padding-right: 16px !important; } html:root[data-design-mode][data-theme][data-palette] body#opt-house .ce2-foot:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .cm-edit-modal__foot:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .nx-modal-footer:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .gmb-modal-footer:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .br-modal-footer:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .payments-modal-footer:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .dm-modal__foot:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-drawer-foot:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .cb-sheet-footer:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .cm-modal-actions:not(#rsp) { flex: 0 0 auto !important; flex-wrap: wrap !important; gap: 10px !important; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important; } html:root[data-design-mode][data-theme][data-palette] body#opt-house .ce2-grid:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .cm-emodal .cm-edit-grid:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house #cmEditForm:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .gmb-modal-grid:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .br-grid:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .nx-modal-grid:not(#rsp) { grid-template-columns: 1fr !important; } html:root[data-design-mode][data-theme][data-palette] body#opt-house .ce2-field:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .cm-edit-field:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .gmb-modal-field:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .br-field:not(#rsp) { grid-column: 1 / -1 !important; min-width: 0 !important; } html:root[data-design-mode][data-theme][data-palette] body#opt-house .ce2-rail:not(#rsp) { flex-direction: row !important; overflow-x: auto !important; border-right: 0 !important; } html:root[data-design-mode][data-theme][data-palette] body#opt-house .ce2-head:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .cm-edit-modal__head:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .dm-modal__head:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .am-drill-head:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-drawer-head:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .payments-modal-header:not(#rsp), html:root[data-design-mode][data-theme][data-palette] body#opt-house .br-modal-header:not(#rsp) { flex: 0 0 auto !important; padding-left: 16px !important; padding-right: 16px !important; } /* the page behind a sheet does not scroll (house-phone.js sets the class) */ html:root[data-design-mode][data-theme][data-palette].hp-lock, html:root[data-design-mode][data-theme][data-palette].hp-lock body#opt-house { overflow: hidden !important; height: 100% !important; } }